4 changed files with 292 additions and 89 deletions
@ -1,13 +1,231 @@ |
|||
//选举列表 |
|||
<script setup lang="ts"> |
|||
import { onMounted, ref } from "vue"; |
|||
|
|||
const doSearch = (_formData: { page: number; limit: number }, onSuccess: Function) => { |
|||
// const submitData = { ...formData } |
|||
// listApi(submitData, userStore.useType).then((res) => { |
|||
// const { data } = res as { data: { data: any; total: number } } |
|||
// onSuccess({ data }) |
|||
// }) |
|||
onSuccess({ |
|||
data: { |
|||
data: [ |
|||
{ |
|||
id: 1, |
|||
name: "测试一", |
|||
phone: "17612341234", |
|||
address: "测试地址", |
|||
region_desc: "测试地址测试地址测试地址测试地址", |
|||
is_default: true, |
|||
}, |
|||
{ |
|||
id: 2, |
|||
name: "测试一", |
|||
phone: "17612341234", |
|||
address: "测试地址", |
|||
region_desc: "测试地址测试地址测试地址测试地址", |
|||
}, |
|||
{ |
|||
id: 3, |
|||
name: "测试一", |
|||
phone: "17612341234", |
|||
address: "测试地址", |
|||
region_desc: "测试地址测试地址测试地址测试地址", |
|||
}, |
|||
{ |
|||
id: 4, |
|||
name: "测试一", |
|||
phone: "17612341234", |
|||
address: "测试地址", |
|||
region_desc: "测试地址测试地址测试地址测试地址", |
|||
}, |
|||
], |
|||
total: 0, |
|||
}, |
|||
}); |
|||
}; |
|||
</script> |
|||
|
|||
<template> |
|||
|
|||
<view class="electionList"> |
|||
<ex-list ref="reListRef" custom-list-type="scroll" :on-form-search="doSearch" empty-text="暂无收货地址~"> |
|||
<template v-slot="{ row, index }"> |
|||
<view class="items" :key="index"> |
|||
<view class="flex"> |
|||
<view class="flex1"> |
|||
<view class="flex-center-start"> |
|||
<text class="text-ellipsis title">{{ "2024年度学生会主席选举" }}</text> |
|||
<text class="status b">进行中</text> |
|||
<!-- <text class="status f">未开始</text> --> |
|||
<!-- <text class="status e">已结束</text> --> |
|||
</view> |
|||
<view class="time">{{ "投票时间：2024-03-01 至 2024-03-07" }}</view> |
|||
</view> |
|||
<view :class="{ arrow: true, active: row.showInfo }" @click="row.showInfo = !row.showInfo"><u-icon name="arrow-down" color="#9CA3AF" /></view> |
|||
</view> |
|||
<view class="info" v-if="row.showInfo"> |
|||
<view class="flex info-items" v-for="(v, k) of 2" :key="k"> |
|||
<view class="head"></view> |
|||
<view class="content flex1"> |
|||
<view class="name flex-center-start"> |
|||
<text>陈佳怡</text> |
|||
<!-- <text class="status">当选</text> --> |
|||
<text class="status un">未当选</text> |
|||
</view> |
|||
<view class="votes">得票数：286</view> |
|||
</view> |
|||
|
|||
<view class="progress"> |
|||
<u-line-progress :percentage="60" height="8rpx" activeColor="#ff0000" :showText="false" /> |
|||
<view class="progress-text">60%</view> |
|||
</view> |
|||
</view> |
|||
<view class="info-bts">查看投票详情</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
</ex-list> |
|||
</view> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { ref } from 'vue' |
|||
|
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.electionList { |
|||
width: 100%; |
|||
box-sizing: border-box; |
|||
min-height: 100vh; |
|||
padding: 32rpx; |
|||
background-color: #f9fafb; |
|||
|
|||
.items { |
|||
padding: 32rpx; |
|||
border-radius: 12px; |
|||
background: linear-gradient(0deg, rgba(0, 0, 0, 0.001), rgba(0, 0, 0, 0.001)), #ffffff; |
|||
box-sizing: border-box; |
|||
border: 1px solid #f3f4f6; |
|||
box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.1), 0px 1px 3px 0px rgba(0, 0, 0, 0.1); |
|||
margin-bottom: 32rpx; |
|||
|
|||
.text-ellipsis { |
|||
overflow: hidden; |
|||
white-space: noraml; |
|||
text-overflow: ellipsis; |
|||
} |
|||
|
|||
.title { |
|||
color: #000; |
|||
font-size: 32rpx; |
|||
font-weight: 500; |
|||
line-height: 48rpx; |
|||
} |
|||
|
|||
.status { |
|||
font-size: 24rpx; |
|||
border-radius: 20rpx; |
|||
padding: 0 16rpx; |
|||
margin-left: 16rpx; |
|||
white-space: nowrap; |
|||
|
|||
&.b { |
|||
color: #fff; |
|||
background-color: #2563eb; |
|||
} |
|||
|
|||
&.f { |
|||
color: #6b7280; |
|||
background-color: #e5e7eb; |
|||
} |
|||
|
|||
&.e { |
|||
color: #fff; |
|||
background-color: #ef4444; |
|||
} |
|||
} |
|||
|
|||
.time { |
|||
padding-top: 8rpx; |
|||
color: #6b7280; |
|||
line-height: 40rpx; |
|||
font-size: 28rpx; |
|||
} |
|||
|
|||
.arrow { |
|||
transition: 0.3s all ease-in; |
|||
|
|||
&.active { |
|||
transform: rotateZ(180deg); |
|||
} |
|||
} |
|||
|
|||
.info { |
|||
&-items { |
|||
margin-top: 32rpx; |
|||
|
|||
.head { |
|||
width: 96rpx; |
|||
height: 96rpx; |
|||
border-radius: 50%; |
|||
overflow: hidden; |
|||
background-color: #6b7280; |
|||
margin-right: 24rpx; |
|||
} |
|||
|
|||
.content { |
|||
height: min-content; |
|||
|
|||
.name { |
|||
font-size: 28rpx; |
|||
font-weight: 500; |
|||
line-height: 40rpx; |
|||
color: #000000; |
|||
|
|||
.status { |
|||
font-size: 20rpx; |
|||
font-weight: normal; |
|||
border-radius: 999rpx; |
|||
padding: 8rpx 24rpx; |
|||
line-height: 20rpx; |
|||
color: #2563eb; |
|||
background: rgba(37, 99, 235, 0.1); |
|||
|
|||
&.un { |
|||
color: #f44336; |
|||
background: rgba(244, 67, 54, 0.1); |
|||
} |
|||
} |
|||
} |
|||
|
|||
.votes { |
|||
font-size: 28rpx; |
|||
line-height: 40rpx; |
|||
color: #6b7280; |
|||
} |
|||
} |
|||
|
|||
.progress { |
|||
width: 192rpx; |
|||
height: min-content; |
|||
|
|||
&-text { |
|||
padding-top: 8rpx; |
|||
color: #6b7280; |
|||
font-size: 24rpx; |
|||
line-height: 32rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
<style lang="scss" scoped> |
|||
|
|||
</style> |
|||
&-bts { |
|||
padding: 16rpx; |
|||
margin: 48rpx 0 24rpx; |
|||
font-size: 28rpx; |
|||
font-weight: normal; |
|||
line-height: 42rpx; |
|||
text-align: center; |
|||
color: #ffffff; |
|||
background-color: #2563eb; |
|||
border-radius: 8rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,62 @@ |
|||
%flex-base { |
|||
display: flex; |
|||
flex-wrap: nowrap; |
|||
} |
|||
|
|||
$flex-way: ( |
|||
start, |
|||
flex-start), |
|||
(center, center), |
|||
(end, flex-end), |
|||
(between, space-between), |
|||
(around, space-around), |
|||
(evenly, space-evenly |
|||
); |
|||
|
|||
@mixin flex-algin($align) { |
|||
@each $way, $justify in $flex-way { |
|||
&-#{$way} { |
|||
@if $way !=$align { |
|||
@if $way !=$align { |
|||
@extend %flex-base; |
|||
align-items: $align; |
|||
justify-content: $justify; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.flex { |
|||
@extend %flex-base; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
@each $way, $justify in (start, flex-start), (center, center), (end, flex-end) { |
|||
&-#{$way} { |
|||
@include flex-algin($justify); |
|||
} |
|||
} |
|||
} |
|||
|
|||
[class^="flex"] { |
|||
&.stretch { |
|||
align-items: stretch; |
|||
} |
|||
|
|||
@each $direction, $name in (row, direction), (column, direction), (wrap, wrap) { |
|||
&.#{$direction} { |
|||
flex-#{$name}: $direction; |
|||
|
|||
&-reverse { |
|||
flex-#{$name}: '#{$direction}-reverse'; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
@for $i from 1 through 4 { |
|||
.flex#{$i} { |
|||
flex: $i; |
|||
} |
|||
} |
|||
Loading…
Reference in new issue