yuepenglong
/
Election
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge branch 'master' of http://gitlab.frkj.cc/yuepenglong/Election

master
岳鹏龙 1 year ago
parent
e053712186 743caa3d4c
commit
96e5ece429
3 changed files with 290 additions and 10 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 228
      src/app/pages/electionList/index.vue
  2. 62
      src/styles/flex.scss
  3. 2
      src/styles/index.scss

228
src/app/pages/electionList/index.vue
View File

@ -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> <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> </template>
<script lang="ts" setup> <style scoped lang="scss">
import { ref } from 'vue' .electionList {
width: 100%;
box-sizing: border-box;
min-height: 100vh;
padding: 32rpx;
background-color: #f9fafb;
</script> .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;
<style lang="scss" scoped> &-text {
padding-top: 8rpx;
color: #6b7280;
font-size: 24rpx;
line-height: 32rpx;
}
}
}
&-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> </style>

62
src/styles/flex.scss
View File

@ -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;
}
}

2
src/styles/index.scss
View File

@ -2,4 +2,4 @@
@import 'common.scss'; @import 'common.scss';
@import 'iconfont.css'; @import 'iconfont.css';
@import 'official-iconfont.css'; @import 'official-iconfont.css';
@import 'flex.scss';
Write Preview
Loading…
Cancel
Save