Compare commits
3 Commits
fafed9176b
...
d31107f36b
| Author | SHA1 | Date |
|---|---|---|
 沈明
|
d31107f36b | 1 year ago |
|
沈明
|
998628dc24 | 1 year ago |
|
沈明
|
0ad4dfee85 | 1 year ago |
7 changed files with 680 additions and 655 deletions
@ -0,0 +1,17 @@ |
|||||
|
import { request } from '@/utils/http' |
||||
|
|
||||
|
export function getVoteList(data: pageType) { |
||||
|
return request.http({ |
||||
|
url: '/api/vote_list', |
||||
|
method: 'GET', |
||||
|
data |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
export function getVoteDetail(data: { id: number }) { |
||||
|
return request.http({ |
||||
|
url: '/api/vote_result_detail', |
||||
|
method: 'GET', |
||||
|
data |
||||
|
}) |
||||
|
} |
||||
@ -1,272 +1,271 @@ |
|||||
<template> |
<template> |
||||
<view class="container"> |
<view class="container"> |
||||
<scroll-view class="scroll-view" scroll-y @scrolltolower="loadMore" :show-scrollbar="false"> |
<scroll-view class="scroll-view" scroll-y @scrolltolower="loadMore" :show-scrollbar="false"> |
||||
<view v-for="(item, index) in electionList" :key="index" class="election-item"> |
<view v-for="(item, index) in electionList" :key="index" class="election-item"> |
||||
<view class="year-title"> |
<view class="year-title"> |
||||
<view class="headpart"> |
<view class="headpart"> |
||||
<text class="title">{{ item.title }}</text> |
<text class="title">{{ item.title }}</text> |
||||
<view class="type" :style=" |
<view |
||||
item.type == '投票中' |
class="type" |
||||
? 'background: #DBEAFE;color: #3B82F6;' |
:style=" |
||||
: item.type == '当选' |
item.type == '投票中' |
||||
? 'background: #DCFCE7;color: #10B981' |
? 'background: #DBEAFE;color: #3B82F6;' |
||||
: 'background: #F3F4F6;color: #4B5563' |
: item.type == '当选' |
||||
"> |
? 'background: #DCFCE7;color: #10B981' |
||||
{{ item.type }} |
: 'background: #F3F4F6;color: #4B5563' |
||||
</view> |
" |
||||
</view> |
> |
||||
</view> |
{{ item.type }} |
||||
<view class="flex-center-between" style="display: flex"> |
</view> |
||||
<view style="display: grid"> |
</view> |
||||
<view |
</view> |
||||
v-for="(candidate, cIndex) in item.candidates.slice(0, expandedStates[index] ? item.candidates.length : 1)" |
<view class="flex-center-between" style="display: flex"> |
||||
:key="cIndex" class="candidate-item"> |
<view style="display: grid"> |
||||
<view class="info-section"> |
<view |
||||
<view style="display: flex; align-items: center"> |
v-for="(candidate, cIndex) in item.candidates.slice(0, expandedStates[index] ? item.candidates.length : 1)" |
||||
<img style="width: 96rpx; height: 96rpx; border-radius: 50%" :src="item.img" |
:key="cIndex" |
||||
alt="" /> |
class="candidate-item" |
||||
<view style="margin-left: 24rpx; display: grid"> |
> |
||||
<text class="name">{{ candidate.name }}</text> |
<view class="info-section"> |
||||
<text class="college">{{ candidate.college }}</text> |
<view style="display: flex; align-items: center"> |
||||
</view> |
<img style="width: 96rpx; height: 96rpx; border-radius: 50%" :src="item.img" alt="" /> |
||||
</view> |
<view style="margin-left: 24rpx; display: grid"> |
||||
<view style="display: flex; margin-top: 24rpx"> |
<text class="name">{{ candidate.name }}</text> |
||||
我的选择： |
<text class="college">{{ candidate.college }}</text> |
||||
<view :class="['choice-tag', choiceClass(candidate.choice)]"> |
</view> |
||||
{{ choiceText(candidate.choice) }} |
</view> |
||||
</view> |
<view style="display: flex; margin-top: 24rpx"> |
||||
</view> |
我的选择： |
||||
</view> |
<view :class="['choice-tag', choiceClass(candidate.choice)]"> |
||||
</view> |
{{ choiceText(candidate.choice) }} |
||||
</view> |
</view> |
||||
<view class="expand-btn" @click="toggleExpand(index)"> |
</view> |
||||
<text :class="['arrow', expandedStates[index] ? 'up' : 'down']"></text> |
</view> |
||||
</view> |
</view> |
||||
</view> |
</view> |
||||
</view> |
<view class="expand-btn" @click="toggleExpand(index)"> |
||||
</scroll-view> |
<text :class="['arrow', expandedStates[index] ? 'up' : 'down']"></text> |
||||
</view> |
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</scroll-view> |
||||
|
</view> |
||||
</template> |
</template> |
||||
|
|
||||
<script setup> |
<script setup> |
||||
import { |
import { ref, watch } from 'vue' |
||||
ref, |
import { getMyvote } from '../../api/votingElection' |
||||
watch |
|
||||
} from 'vue' |
const electionList = ref([]) |
||||
import { |
const page = ref(1) |
||||
getMyvote |
const pageSize = ref(10) |
||||
} from '../../api/votingElection' |
const loading = ref(false) |
||||
|
const noMoreData = ref(false) |
||||
|
|
||||
const electionList = ref([]) |
// 展开状态管理 |
||||
const page = ref(1) |
const expandedStates = ref([]) |
||||
const pageSize = ref(10) |
watch( |
||||
const loading = ref(false) |
() => electionList.value, |
||||
const noMoreData = ref(false) |
(newVal) => { |
||||
|
expandedStates.value = newVal.map(() => false) |
||||
// 展开状态管理 |
}, |
||||
const expandedStates = ref([]) |
{ |
||||
watch( |
immediate: true |
||||
() => electionList.value, |
} |
||||
(newVal) => { |
) |
||||
expandedStates.value = newVal.map(() => false) |
|
||||
}, { |
const toggleExpand = (index) => { |
||||
immediate: true |
expandedStates.value[index] = !expandedStates.value[index] |
||||
} |
} |
||||
) |
|
||||
|
const choiceClass = (choice) => { |
||||
const toggleExpand = (index) => { |
switch (choice) { |
||||
expandedStates.value[index] = !expandedStates.value[index] |
case 1: |
||||
} |
return 'agree' |
||||
|
case 0: |
||||
const choiceClass = (choice) => { |
return 'oppose' |
||||
switch (choice) { |
case 2: |
||||
case 1: |
return 'abstain' |
||||
return 'agree' |
default: |
||||
case 0: |
return '' |
||||
return 'oppose' |
} |
||||
case 2: |
} |
||||
return 'abstain' |
|
||||
default: |
const choiceText = (choice) => { |
||||
return '' |
return ( |
||||
} |
{ |
||||
} |
1: '同意', |
||||
|
0: '反对', |
||||
const choiceText = (choice) => { |
2: '弃权' |
||||
return ({ |
}[choice] || '' |
||||
1: '同意', |
) |
||||
0: '反对', |
} |
||||
2: '弃权' |
|
||||
} [choice] || '') |
// 获取数据 |
||||
} |
const getList = async () => { |
||||
|
try { |
||||
// 获取数据 |
loading.value = true |
||||
const getList = async () => { |
|
||||
try { |
// 模拟接口请求（替换为你的真实接口） |
||||
loading.value = true |
const mockData = await getMyvote() |
||||
|
|
||||
// 模拟接口请求（替换为你的真实接口） |
// 处理数据 |
||||
const mockData = await getMyvote().then((res)=> { |
dataList.value = [...dataList.value, ...mockData] |
||||
|
|
||||
}) |
// 判断是否还有数据 |
||||
|
noMoreData.value = mockData.length < pageSize.value |
||||
// 处理数据 |
} finally { |
||||
dataList.value = [...dataList.value, ...mockData] |
loading.value = false |
||||
|
} |
||||
// 判断是否还有数据 |
} |
||||
noMoreData.value = mockData.length < pageSize.value |
|
||||
} finally { |
// 加载更多 |
||||
loading.value = false |
const loadMore = () => { |
||||
} |
if (loading.value || noMoreData.value) return |
||||
} |
page.value += 1 |
||||
|
getList() |
||||
// 加载更多 |
} |
||||
const loadMore = () => { |
|
||||
if (loading.value || noMoreData.value) return |
onMounted(() => { |
||||
page.value += 1 |
getList() |
||||
getList() |
}) |
||||
} |
|
||||
|
|
||||
onMounted(() => { |
|
||||
getList() |
|
||||
}) |
|
||||
</script> |
</script> |
||||
|
|
||||
<style scoped lang="scss"> |
<style scoped lang="scss"> |
||||
.container { |
.container { |
||||
padding: 20rpx; |
padding: 20rpx; |
||||
background-color: #f9fafb; |
background-color: #f9fafb; |
||||
height: 100vh; |
height: 100vh; |
||||
} |
} |
||||
|
|
||||
.election-item { |
.election-item { |
||||
margin-bottom: 30rpx; |
margin-bottom: 30rpx; |
||||
padding: 34rpx; |
padding: 34rpx; |
||||
border-radius: 24rpx; |
border-radius: 24rpx; |
||||
background: linear-gradient(0deg, rgba(0, 0, 0, 0.001), rgba(0, 0, 0, 0.001)), #ffffff; |
background: linear-gradient(0deg, rgba(0, 0, 0, 0.001), rgba(0, 0, 0, 0.001)), #ffffff; |
||||
box-sizing: border-box; |
box-sizing: border-box; |
||||
border: 2rpx solid #f3f4f6; |
border: 2rpx solid #f3f4f6; |
||||
box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.05); |
box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.05); |
||||
} |
} |
||||
|
|
||||
.year-title { |
.year-title { |
||||
font-size: 32rpx; |
font-size: 32rpx; |
||||
font-weight: bold; |
font-weight: bold; |
||||
color: #333; |
color: #333; |
||||
|
|
||||
.headpart { |
.headpart { |
||||
width: 100%; |
width: 100%; |
||||
display: flex; |
display: flex; |
||||
justify-content: space-between; |
justify-content: space-between; |
||||
align-items: center; |
align-items: center; |
||||
|
|
||||
.title { |
.title { |
||||
font-family: Roboto; |
font-family: Roboto; |
||||
font-size: 32rpx; |
font-size: 32rpx; |
||||
font-weight: 500; |
font-weight: 500; |
||||
letter-spacing: normal; |
letter-spacing: normal; |
||||
color: #000000; |
color: #000000; |
||||
} |
} |
||||
|
|
||||
.type { |
.type { |
||||
font-family: Roboto; |
font-family: Roboto; |
||||
font-size: 24rpx; |
font-size: 24rpx; |
||||
font-weight: normal; |
font-weight: normal; |
||||
/* 自动布局 */ |
/* 自动布局 */ |
||||
display: flex; |
display: flex; |
||||
flex-direction: column; |
flex-direction: column; |
||||
padding: 4rpx 16rpx; |
padding: 4rpx 16rpx; |
||||
gap: 0rpx 20rpx; |
gap: 0rpx 20rpx; |
||||
flex-wrap: wrap; |
flex-wrap: wrap; |
||||
align-content: flex-start; |
align-content: flex-start; |
||||
border-radius: 24rpx; |
border-radius: 24rpx; |
||||
} |
} |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
.candidate-item { |
.candidate-item { |
||||
display: flex; |
display: flex; |
||||
justify-content: space-between; |
justify-content: space-between; |
||||
align-items: center; |
align-items: center; |
||||
padding: 20rpx 0; |
padding: 20rpx 0; |
||||
} |
} |
||||
|
|
||||
.info-section { |
.info-section { |
||||
flex: 1; |
flex: 1; |
||||
display: flex; |
display: flex; |
||||
flex-direction: column; |
flex-direction: column; |
||||
} |
} |
||||
|
|
||||
.name { |
.name { |
||||
font-family: Roboto; |
font-family: Roboto; |
||||
font-size: 28rpx; |
font-size: 28rpx; |
||||
font-weight: 500; |
font-weight: 500; |
||||
letter-spacing: normal; |
letter-spacing: normal; |
||||
color: #000000; |
color: #000000; |
||||
} |
} |
||||
|
|
||||
.college { |
.college { |
||||
font-family: Roboto; |
font-family: Roboto; |
||||
font-size: 24rpx; |
font-size: 24rpx; |
||||
font-weight: normal; |
font-weight: normal; |
||||
letter-spacing: normal; |
letter-spacing: normal; |
||||
color: #6b7280; |
color: #6b7280; |
||||
} |
} |
||||
|
|
||||
.choice-tag { |
.choice-tag { |
||||
display: flex; |
display: flex; |
||||
justify-content: center; |
justify-content: center; |
||||
align-items: center; |
align-items: center; |
||||
font-family: Roboto; |
font-family: Roboto; |
||||
font-size: 28rpx; |
font-size: 28rpx; |
||||
font-weight: normal; |
font-weight: normal; |
||||
} |
} |
||||
|
|
||||
.agree { |
.agree { |
||||
color: #3b82f6; |
color: #3b82f6; |
||||
} |
} |
||||
|
|
||||
.oppose { |
.oppose { |
||||
color: #f44336; |
color: #f44336; |
||||
} |
} |
||||
|
|
||||
.abstain { |
.abstain { |
||||
color: #9ca3af; |
color: #9ca3af; |
||||
} |
} |
||||
|
|
||||
.year-title { |
.year-title { |
||||
display: flex; |
display: flex; |
||||
justify-content: space-between; |
justify-content: space-between; |
||||
align-items: center; |
align-items: center; |
||||
} |
} |
||||
|
|
||||
.expand-btn { |
.expand-btn { |
||||
display: flex; |
display: flex; |
||||
align-items: center; |
align-items: center; |
||||
color: #666; |
color: #666; |
||||
font-size: 26rpx; |
font-size: 26rpx; |
||||
padding: 10rpx 20rpx; |
padding: 10rpx 20rpx; |
||||
} |
} |
||||
|
|
||||
.arrow { |
.arrow { |
||||
display: inline-block; |
display: inline-block; |
||||
width: 0; |
width: 0; |
||||
height: 0; |
height: 0; |
||||
margin-left: 10rpx; |
margin-left: 10rpx; |
||||
border-left: 10rpx solid transparent; |
border-left: 10rpx solid transparent; |
||||
border-right: 10rpx solid transparent; |
border-right: 10rpx solid transparent; |
||||
} |
} |
||||
|
|
||||
.down { |
.down { |
||||
border-top: 15rpx solid #999; |
border-top: 15rpx solid #999; |
||||
} |
} |
||||
|
|
||||
.up { |
.up { |
||||
border-bottom: 15rpx solid #999; |
border-bottom: 15rpx solid #999; |
||||
} |
} |
||||
|
|
||||
/* 优化候选人项间距 */ |
/* 优化候选人项间距 */ |
||||
.candidate-item:last-child { |
.candidate-item:last-child { |
||||
border-bottom: none; |
border-bottom: none; |
||||
} |
} |
||||
</style> |
</style> |
||||
|
|||||
@ -1,378 +1,378 @@ |
|||||
<script setup lang="ts"> |
<script setup lang="ts"> |
||||
import { getVoteprogress, voteMember } from '../../api/votingElection' |
import { getVoteprogress, voteMember } from '../../api/votingElection' |
||||
import { getUserList } from '../../api/user' |
import useUserStore from '@/store/user' |
||||
import useUserStore from '@/store/user' |
const userStore = useUserStore() |
||||
const userStore = useUserStore() |
|
||||
|
|
||||
const xjList = ref({}) |
const xjList = ref({}) |
||||
const doSearch = (_formData : { page : number; limit : number }, onSuccess : Function) => { |
const doSearch = (_formData: { page: number; limit: number }, onSuccess: Function) => { |
||||
getVoteprogress().then((res) => { |
getVoteprogress().then((res) => { |
||||
xjList.value = res.data |
xjList.value = res.data |
||||
res.data.data = res.data.candidate; |
res.data.data = res.data.candidate |
||||
// 2. 删除旧属性名 |
// 2. 删除旧属性名 |
||||
delete res.data.candidate; |
delete res.data.candidate |
||||
res.data.total = res.data.candidate?.length |
res.data.total = res.data.candidate?.length |
||||
const { data } = res as { data : { data : any; total : number } } |
const { data } = res as { data: { data: any; total: number } } |
||||
onSuccess({ data }) |
onSuccess({ data }) |
||||
}) |
}) |
||||
|
} |
||||
|
|
||||
} |
const buttlist = ref([ |
||||
|
{ |
||||
|
type: '1', |
||||
|
butname: '同意' |
||||
|
}, |
||||
|
{ |
||||
|
type: '2', |
||||
|
butname: '反对' |
||||
|
}, |
||||
|
{ |
||||
|
type: '3', |
||||
|
butname: '弃权' |
||||
|
} |
||||
|
]) |
||||
|
const params = ref([]) |
||||
|
const selectBut = (data: any, cardid: any, type: string, butname: string) => { |
||||
|
if (cardid) { |
||||
|
const target = data.find((card: { id: any }) => card.id === cardid) |
||||
|
uni.showModal({ |
||||
|
title: '您本轮选举投' + butname + '票', |
||||
|
content: '确定吗？', |
||||
|
success: function (res) { |
||||
|
if (res.confirm) { |
||||
|
if (target) { |
||||
|
target.vote_result = type |
||||
|
} |
||||
|
} else if (res.cancel) { |
||||
|
console.log('用户点击取消') |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
params.value.push(target) |
||||
|
} else { |
||||
|
data.forEach((ele: { vote_result: number; id: any }) => { |
||||
|
ele.vote_result = 1 |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
const allChange = () => { |
||||
|
uni.showModal({ |
||||
|
title: '您本轮选举全投同意票', |
||||
|
content: '确定吗？', |
||||
|
success: function (res) { |
||||
|
if (res.confirm) { |
||||
|
xjList.value.data?.forEach((ele: { vote_result: number }) => { |
||||
|
ele.vote_result = 1 |
||||
|
}) |
||||
|
params.value = xjList.value.data |
||||
|
submit() |
||||
|
} else if (res.cancel) { |
||||
|
console.log('用户点击取消') |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
|
||||
const buttlist = ref([ |
function extractTwoProps(arr: any, key1: string, key2: string) { |
||||
{ |
return arr.map(({ [key1]: prop1, [key2]: prop2 }) => ({ |
||||
type: '1', |
[key1]: prop1, |
||||
butname: '同意' |
[key2]: prop2 |
||||
}, |
})) |
||||
{ |
} |
||||
type: '2', |
const submit = () => { |
||||
butname: '反对' |
let param = { |
||||
}, |
openid: userStore.openId, |
||||
{ |
id: xjList.value.id, |
||||
type: '3', |
candidate: JSON.stringify(extractTwoProps(params.value, 'id', 'vote_result')) |
||||
butname: '弃权' |
} |
||||
} |
if (param.candidate === '[]') { |
||||
]) |
uni.showToast({ |
||||
const params = ref([]) |
title: '未选举', |
||||
const selectBut = (data : any, cardid : any, type : string, butname : string) => { |
icon: 'none', // 可选，图标类型，'success', 'loading', 'none' |
||||
if (cardid) { |
duration: 1500 // 持续时长，单位ms |
||||
const target = data.find((card : { id : any }) => card.id === cardid) |
}) |
||||
uni.showModal({ |
} else { |
||||
title: '您本轮选举投' + butname + '票', |
voteMember(param).then((res) => { |
||||
content: '确定吗？', |
console.log(res, 555555555555555) |
||||
success: function (res) { |
}) |
||||
if (res.confirm) { |
} |
||||
if (target) { |
} |
||||
target.vote_result = type |
|
||||
} |
|
||||
} else if (res.cancel) { |
|
||||
console.log('用户点击取消') |
|
||||
} |
|
||||
} |
|
||||
}) |
|
||||
params.value.push(target) |
|
||||
} else { |
|
||||
data.forEach((ele : { |
|
||||
vote_result : number; id : any; |
|
||||
}) => { |
|
||||
ele.vote_result = 1 |
|
||||
}) |
|
||||
} |
|
||||
} |
|
||||
const allChange = () => { |
|
||||
uni.showModal({ |
|
||||
title: '您本轮选举全投同意票', |
|
||||
content: '确定吗？', |
|
||||
success: function (res) { |
|
||||
if (res.confirm) { |
|
||||
xjList.value.data?.forEach((ele : { vote_result : number; }) => { |
|
||||
ele.vote_result = 1 |
|
||||
}) |
|
||||
params.value = xjList.value.data |
|
||||
submit() |
|
||||
} else if (res.cancel) { |
|
||||
console.log('用户点击取消') |
|
||||
} |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
function extractTwoProps(arr:any, key1:string, key2:string) { |
|
||||
return arr.map(({ [key1]: prop1, [key2]: prop2 }) => ({ |
|
||||
[key1]: prop1, |
|
||||
[key2]: prop2 |
|
||||
})); |
|
||||
} |
|
||||
const submit = () => { |
|
||||
let param = { |
|
||||
openid: userStore.openId, |
|
||||
id: xjList.value.id, |
|
||||
candidate: JSON.stringify(extractTwoProps(params.value,'id','vote_result')) |
|
||||
} |
|
||||
if(param.candidate === '[]') { |
|
||||
uni.showToast({ |
|
||||
title: '未选举', |
|
||||
icon: 'none', // 可选，图标类型，'success', 'loading', 'none' |
|
||||
duration: 1500 // 持续时长，单位ms |
|
||||
}); |
|
||||
} else { |
|
||||
voteMember(param).then((res)=> { |
|
||||
console.log(res,555555555555555) |
|
||||
}) |
|
||||
} |
|
||||
} |
|
||||
</script> |
</script> |
||||
|
|
||||
<template> |
<template> |
||||
<!-- 你的页面内容 --> |
<!-- 你的页面内容 --> |
||||
<view class="box"> |
<view class="box"> |
||||
<view class="headpart"> |
<view class="headpart"> |
||||
<view class="title">{{ xjList.title }}</view> |
<view class="title">{{ xjList.title }}</view> |
||||
<view class="time">投票开始时间：{{ xjList.start_time }}</view> |
<view class="time">投票开始时间：{{ xjList.start_time }}</view> |
||||
<view class="time">投票截止时间：{{ xjList.end_time }}</view> |
<view class="time">投票截止时间：{{ xjList.end_time }}</view> |
||||
</view> |
</view> |
||||
<ex-list ref="reListRef" custom-list-type="custom" :on-form-search="doSearch"> |
<ex-list ref="reListRef" custom-list-type="custom" :on-form-search="doSearch"> |
||||
<template v-slot="{ data }"> |
<template v-slot="{ data }"> |
||||
<view class="tppart"> |
<view class="tppart"> |
||||
<view class="tpone" v-for="(row, index) of data" :key="'tpone' + index"> |
<view class="tpone" v-for="(row, index) of data" :key="'tpone' + index"> |
||||
<view class="topp"> |
<view class="topp"> |
||||
<img style="width: 96rpx; height: 96rpx; border-radius: 50%" :src="row.photo" alt="" /> |
<img style="width: 96rpx; height: 96rpx; border-radius: 50%" :src="row.photo" alt="" /> |
||||
<view class="rightpart"> |
<view class="rightpart"> |
||||
<view class="name"> |
<view class="name"> |
||||
{{ row.name }} |
{{ row.name }} |
||||
</view> |
</view> |
||||
<view class="class"> |
<view class="class"> |
||||
{{ row.position }} |
{{ row.position }} |
||||
</view> |
</view> |
||||
</view> |
</view> |
||||
</view> |
</view> |
||||
<view class="bottomp"> |
<view class="bottomp"> |
||||
<view class="minbut" v-for="(item, ele) in buttlist" :key="ele" |
<view |
||||
@click="selectBut(data, row.id, item.type, item.butname)" |
class="minbut" |
||||
:class="{ active: row.vote_result === item.type }"> |
v-for="(item, ele) in buttlist" |
||||
{{ item.butname }} |
:key="ele" |
||||
</view> |
@click="selectBut(data, row.id, item.type, item.butname)" |
||||
</view> |
:class="{ active: row.vote_result === item.type }" |
||||
</view> |
> |
||||
</view> |
{{ item.butname }} |
||||
</template> |
</view> |
||||
</ex-list> |
</view> |
||||
<view class="bottbutton"> |
</view> |
||||
<view class="qbty" @click="allChange">全部同意</view> |
</view> |
||||
<view class="tjtp" @click="submit">提交投票</view> |
</template> |
||||
</view> |
</ex-list> |
||||
</view> |
<view class="bottbutton"> |
||||
|
<view class="qbty" @click="allChange">全部同意</view> |
||||
|
<view class="tjtp" @click="submit">提交投票</view> |
||||
|
</view> |
||||
|
</view> |
||||
</template> |
</template> |
||||
|
|
||||
<style scoped lang="scss"> |
<style scoped lang="scss"> |
||||
.box { |
.box { |
||||
width: 100%; |
width: 100%; |
||||
background-color: #f9fafb; |
background-color: #f9fafb; |
||||
|
|
||||
.headpart { |
.headpart { |
||||
width: 92%; |
width: 92%; |
||||
height: 194rpx; |
height: 194rpx; |
||||
border-radius: 24rpx; |
border-radius: 24rpx; |
||||
background-color: #eff6ff; |
background-color: #eff6ff; |
||||
margin: 32rpx auto; |
margin: 32rpx auto; |
||||
padding: 20rpx 3%; |
padding: 20rpx 3%; |
||||
|
|
||||
.title { |
.title { |
||||
color: #2563eb; |
color: #2563eb; |
||||
font-size: 28rpx; |
font-size: 28rpx; |
||||
margin-top: 16rpx; |
margin-top: 16rpx; |
||||
} |
} |
||||
|
|
||||
.time { |
.time { |
||||
margin-top: 16rpx; |
margin-top: 16rpx; |
||||
color: #4b5563; |
color: #4b5563; |
||||
font-size: 28rpx; |
font-size: 28rpx; |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
.tppart { |
.tppart { |
||||
width: 100%; |
width: 100%; |
||||
max-height: 69vh; |
max-height: 69vh; |
||||
overflow-y: auto; |
overflow-y: auto; |
||||
display: grid; |
display: grid; |
||||
justify-items: center; |
justify-items: center; |
||||
|
|
||||
.tpone { |
.tpone { |
||||
width: 91%; |
width: 91%; |
||||
height: 264rpx; |
height: 264rpx; |
||||
padding: 20rpx 4%; |
padding: 20rpx 4%; |
||||
box-sizing: border-box; |
box-sizing: border-box; |
||||
border-radius: 24rpx; |
border-radius: 24rpx; |
||||
background: linear-gradient(0deg, rgba(0, 0, 0, 0.001), rgba(0, 0, 0, 0.001)), #ffffff; |
background: linear-gradient(0deg, rgba(0, 0, 0, 0.001), rgba(0, 0, 0, 0.001)), #ffffff; |
||||
box-sizing: border-box; |
box-sizing: border-box; |
||||
border: 2rpx solid #f3f4f6; |
border: 2rpx solid #f3f4f6; |
||||
box-shadow: |
box-shadow: |
||||
0rpx 2rpx 4rpx -2rpx rgba(0, 0, 0, 0.1), |
0rpx 2rpx 4rpx -2rpx rgba(0, 0, 0, 0.1), |
||||
0rpx 2rpx 6rpx 0rpx rgba(0, 0, 0, 0.1); |
0rpx 2rpx 6rpx 0rpx rgba(0, 0, 0, 0.1); |
||||
margin-top: 32rpx; |
margin-top: 32rpx; |
||||
display: grid; |
display: grid; |
||||
|
|
||||
.topp { |
.topp { |
||||
display: flex; |
display: flex; |
||||
|
|
||||
.rightpart { |
.rightpart { |
||||
margin-left: 32rpx; |
margin-left: 32rpx; |
||||
display: grid; |
display: grid; |
||||
justify-items: left; |
justify-items: left; |
||||
align-content: baseline; |
align-content: baseline; |
||||
|
|
||||
.name { |
.name { |
||||
font-family: Roboto; |
font-family: Roboto; |
||||
font-size: 28rpx; |
font-size: 28rpx; |
||||
font-weight: 500; |
font-weight: 500; |
||||
line-height: 42rpx; |
line-height: 42rpx; |
||||
letter-spacing: normal; |
letter-spacing: normal; |
||||
color: #000000; |
color: #000000; |
||||
margin-top: 7rpx; |
margin-top: 7rpx; |
||||
} |
} |
||||
|
|
||||
.class { |
.class { |
||||
font-family: Roboto; |
font-family: Roboto; |
||||
font-size: 28rpx; |
font-size: 28rpx; |
||||
font-weight: normal; |
font-weight: normal; |
||||
line-height: 40rpx; |
line-height: 40rpx; |
||||
letter-spacing: normal; |
letter-spacing: normal; |
||||
color: #6b7280; |
color: #6b7280; |
||||
margin-top: 7rpx; |
margin-top: 7rpx; |
||||
} |
} |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
.bottomp { |
.bottomp { |
||||
display: flex; |
display: flex; |
||||
justify-content: space-between; |
justify-content: space-between; |
||||
gap: 0rpx 20rpx; |
gap: 0rpx 20rpx; |
||||
|
|
||||
.minbut { |
.minbut { |
||||
flex: 1; |
flex: 1; |
||||
width: 190rpx; |
width: 190rpx; |
||||
height: 76rpx; |
height: 76rpx; |
||||
/* 自动布局 */ |
/* 自动布局 */ |
||||
display: flex; |
display: flex; |
||||
justify-content: center; |
justify-content: center; |
||||
padding: 16rpx 32rpx; |
padding: 16rpx 32rpx; |
||||
flex-wrap: wrap; |
flex-wrap: wrap; |
||||
align-content: flex-start; |
align-content: flex-start; |
||||
border-radius: 8rpx; |
border-radius: 8rpx; |
||||
background: #ffffff; |
background: #ffffff; |
||||
box-sizing: border-box; |
box-sizing: border-box; |
||||
border: 2rpx solid #d1d5db; |
border: 2rpx solid #d1d5db; |
||||
font-family: Roboto; |
font-family: Roboto; |
||||
font-size: 28rpx; |
font-size: 28rpx; |
||||
font-weight: normal; |
font-weight: normal; |
||||
line-height: 40rpx; |
line-height: 40rpx; |
||||
text-align: center; |
text-align: center; |
||||
letter-spacing: normal; |
letter-spacing: normal; |
||||
color: #4b5563; |
color: #4b5563; |
||||
} |
} |
||||
|
|
||||
.minbut.active { |
.minbut.active { |
||||
border: 2rpx solid #2563eb; |
border: 2rpx solid #2563eb; |
||||
color: #2563eb; |
color: #2563eb; |
||||
} |
} |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
.tpone:first-child { |
.tpone:first-child { |
||||
margin-top: 0; |
margin-top: 0; |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
.bottbutton { |
.bottbutton { |
||||
width: 100%; |
width: 100%; |
||||
height: 10vh; |
height: 10vh; |
||||
display: flex; |
display: flex; |
||||
padding: 24rpx 32rpx; |
padding: 24rpx 32rpx; |
||||
gap: 0rpx 24rpx; |
gap: 0rpx 24rpx; |
||||
flex-wrap: wrap; |
flex-wrap: wrap; |
||||
align-content: flex-start; |
align-content: flex-start; |
||||
background: #ffffff; |
background: #ffffff; |
||||
box-sizing: border-box; |
box-sizing: border-box; |
||||
border-width: 2rpx 0rpx 0rpx 0rpx; |
border-width: 2rpx 0rpx 0rpx 0rpx; |
||||
border-style: solid; |
border-style: solid; |
||||
border-color: #f3f4f6; |
border-color: #f3f4f6; |
||||
position: fixed; |
position: fixed; |
||||
bottom: 0; |
bottom: 0; |
||||
|
|
||||
.qbty { |
.qbty { |
||||
width: 331rpx; |
width: 331rpx; |
||||
height: 90rpx; |
height: 90rpx; |
||||
/* 自动布局 */ |
/* 自动布局 */ |
||||
display: flex; |
display: flex; |
||||
box-sizing: border-box; |
box-sizing: border-box; |
||||
justify-content: center; |
justify-content: center; |
||||
padding: 24rpx 0rpx; |
padding: 24rpx 0rpx; |
||||
gap: 0rpx 20rpx; |
gap: 0rpx 20rpx; |
||||
flex-wrap: wrap; |
flex-wrap: wrap; |
||||
border-radius: 8rpx; |
border-radius: 8rpx; |
||||
background: #eff6ff; |
background: #eff6ff; |
||||
font-family: Roboto; |
font-family: Roboto; |
||||
font-size: 28rpx; |
font-size: 28rpx; |
||||
font-weight: 500; |
font-weight: 500; |
||||
line-height: 42rpx; |
line-height: 42rpx; |
||||
text-align: center; |
text-align: center; |
||||
letter-spacing: normal; |
letter-spacing: normal; |
||||
color: #2563eb; |
color: #2563eb; |
||||
} |
} |
||||
|
|
||||
.tjtp { |
.tjtp { |
||||
width: 331rpx; |
width: 331rpx; |
||||
height: 90rpx; |
height: 90rpx; |
||||
/* 自动布局 */ |
/* 自动布局 */ |
||||
display: flex; |
display: flex; |
||||
box-sizing: border-box; |
box-sizing: border-box; |
||||
justify-content: center; |
justify-content: center; |
||||
padding: 24rpx 0rpx; |
padding: 24rpx 0rpx; |
||||
gap: 0rpx 20rpx; |
gap: 0rpx 20rpx; |
||||
flex-wrap: wrap; |
flex-wrap: wrap; |
||||
border-radius: 8rpx; |
border-radius: 8rpx; |
||||
background: #2563eb; |
background: #2563eb; |
||||
font-family: Roboto; |
font-family: Roboto; |
||||
font-size: 28rpx; |
font-size: 28rpx; |
||||
font-weight: 500; |
font-weight: 500; |
||||
line-height: 42rpx; |
line-height: 42rpx; |
||||
text-align: center; |
text-align: center; |
||||
letter-spacing: normal; |
letter-spacing: normal; |
||||
color: #ffffff; |
color: #ffffff; |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
.address-items { |
.address-items { |
||||
padding: 20rpx 15rpx 32rpx 28rpx; |
padding: 20rpx 15rpx 32rpx 28rpx; |
||||
background-color: #fff; |
background-color: #fff; |
||||
border-bottom: 2rpx solid #f5f5f5; |
border-bottom: 2rpx solid #f5f5f5; |
||||
|
|
||||
.left { |
.left { |
||||
flex: 1; |
flex: 1; |
||||
overflow: hidden; |
overflow: hidden; |
||||
|
|
||||
.name { |
.name { |
||||
font-size: 28rpx; |
font-size: 28rpx; |
||||
font-weight: 700; |
font-weight: 700; |
||||
color: #101010; |
color: #101010; |
||||
line-height: 40rpx; |
line-height: 40rpx; |
||||
margin-right: 16rpx; |
margin-right: 16rpx; |
||||
} |
} |
||||
|
|
||||
.isdefault { |
.isdefault { |
||||
font-size: 20rpx; |
font-size: 20rpx; |
||||
font-weight: 400; |
font-weight: 400; |
||||
color: #fff; |
color: #fff; |
||||
padding: 4rpx 12rpx; |
padding: 4rpx 12rpx; |
||||
border-radius: 8rpx; |
border-radius: 8rpx; |
||||
background: linear-gradient(90deg, #4778ff 0%, #4778ffb8 100%); |
background: linear-gradient(90deg, #4778ff 0%, #4778ffb8 100%); |
||||
} |
} |
||||
|
|
||||
.info { |
.info { |
||||
width: 100%; |
width: 100%; |
||||
color: #666; |
color: #666; |
||||
font-size: 24rpx; |
font-size: 24rpx; |
||||
font-weight: 400; |
font-weight: 400; |
||||
margin-top: 12rpx; |
margin-top: 12rpx; |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
.right { |
.right { |
||||
width: 140rpx; |
width: 140rpx; |
||||
padding-left: 32rpx; |
padding-left: 32rpx; |
||||
font-size: 24rpx; |
font-size: 24rpx; |
||||
font-weight: 400; |
font-weight: 400; |
||||
color: #4979ff; |
color: #4979ff; |
||||
text-align: right; |
text-align: right; |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
.buts { |
.buts { |
||||
width: 100%; |
width: 100%; |
||||
height: 10vh; |
height: 10vh; |
||||
background-color: F3F4F6; |
background-color: F3F4F6; |
||||
position: fixed; |
position: fixed; |
||||
bottom: 0; |
bottom: 0; |
||||
border-top: 2rpx solid #ebebec; |
border-top: 2rpx solid #ebebec; |
||||
} |
} |
||||
} |
} |
||||
</style> |
</style> |
||||
|
|||||
Loading…
Reference in new issue