From 743caa3d4c2955d030099eb464e9a36e80d40dde Mon Sep 17 00:00:00 2001
From: Hx <2294602187@qq.com>
Date: Wed, 26 Mar 2025 17:50:46 +0800
Subject: [PATCH] =?UTF-8?q?=E9=80=89=E4=B8=BE=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/pages/electionList/index.vue   | 236 ++++++++++++++++++++++++-
 src/app/pages/votingElection/index.vue |  81 +--------
 src/styles/flex.scss                   |  62 +++++++
 src/styles/index.scss                  |   2 +-
 4 files changed, 292 insertions(+), 89 deletions(-)
 create mode 100644 src/styles/flex.scss

diff --git a/src/app/pages/electionList/index.vue b/src/app/pages/electionList/index.vue
index a5c4930..529a28b 100644
--- a/src/app/pages/electionList/index.vue
+++ b/src/app/pages/electionList/index.vue
@@ -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>
\ No newline at end of file
+            &-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>
diff --git a/src/app/pages/votingElection/index.vue b/src/app/pages/votingElection/index.vue
index e833133..b363ff5 100644
--- a/src/app/pages/votingElection/index.vue
+++ b/src/app/pages/votingElection/index.vue
@@ -59,8 +59,6 @@ const doSearch = (_formData: { page: number; limit: number }, onSuccess: Functio
 
 <template>
 	<view class="box">
-		<ex-header :leftShow="false" backgroundColor="#2563EB" textColor="#fff" title="地址管理" />
-
 		<ex-list ref="reListRef" custom-list-type="scroll" :on-form-search="doSearch" empty-text="暂无收货地址~"
 			customListType="custom">
 			<template v-slot="{ data }">
@@ -77,7 +75,7 @@ const doSearch = (_formData: { page: number; limit: number }, onSuccess: Functio
 					</view>
 				</view>
 
-				<view v-for="(row, index) of data" class="address-items flex" @click.stop="onChoose(row)">
+				<view v-for="(row, index) of data" class="items flex" @click.stop="onChoose(row)">
 					<view class="flex1 left">
 						<view class="flex-center-start">
 							<text class="name">{{ row.name }}</text>
@@ -95,37 +93,6 @@ const doSearch = (_formData: { page: number; limit: number }, onSuccess: Functio
 			</template>
 		</ex-list>
 	</view>
-	<!-- <view class="box">
-		<view class="main">
-			<view class="headpart">
-				<view class="title">
-					2024年度董事会成员选举
-				</view>
-				<view class="time">
-					投票开始时间：2024年3月15日 18:00
-				</view>
-				<view class="time">
-					投票截止时间：2024年3月15日 18:00
-				</view>
-			</view>
-			<view class="tppart">
-				<view class="tpone" v-for="(item, index) in tpList" :key="index">
-					<img style="width: 96rpx;height: 96rpx; border-radius: 50%;" :src="item.img" alt="" />
-					<view class="rightpart">
-						<view class="name">
-							{{ item.name }}
-						</view>
-						<view class="class">
-
-						</view>
-					</view>
-				</view>
-			</view>
-		</view>
-		<view class="buts">
-
-		</view>
-	</view> -->
 </template>
 
 <style scoped lang="scss">
@@ -155,42 +122,7 @@ const doSearch = (_formData: { page: number; limit: number }, onSuccess: Functio
 		}
 	}
 
-	.main {
-		width: 100%;
-		height: 90vh;
-		display: grid;
-		justify-items: center;
-		align-content: start;
-
-
-
-		.tppart {
-			margin-top: 32rpx;
-			width: 100%;
-			max-height: 60vh;
-			overflow-y: auto;
-			display: grid;
-			justify-items: center;
-
-			.tpone {
-				width: 84%;
-				height: 264rpx;
-				padding: 20rpx 4%;
-				border-radius: 24rpx;
-				background-color: #FFFFFF;
-				border: 2rpx solid #F3F4F6;
-				box-shadow: 5rpx 5rpx 3rpx 0 rgba(212, 212, 212, 0.7);
-
-				.rightpart {
-					margin-left: 40rpx;
-
-					.name {}
-				}
-			}
-		}
-	}
-
-	.address-items {
+	.items {
 		padding: 20rpx 15rpx 32rpx 28rpx;
 		background-color: #fff;
 		border-bottom: 2rpx solid #f5f5f5;
@@ -234,14 +166,5 @@ const doSearch = (_formData: { page: number; limit: number }, onSuccess: Functio
 			text-align: right;
 		}
 	}
-
-	.buts {
-		width: 100%;
-		height: 10vh;
-		background-color: F3F4F6;
-		position: fixed;
-		bottom: 0;
-		border-top: 2rpx solid #ebebec;
-	}
 }
 </style>
\ No newline at end of file
diff --git a/src/styles/flex.scss b/src/styles/flex.scss
new file mode 100644
index 0000000..c22ad29
--- /dev/null
+++ b/src/styles/flex.scss
@@ -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;
+    }
+}
\ No newline at end of file
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 302dd2a..2698e0e 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -2,4 +2,4 @@
 @import 'common.scss';
 @import 'iconfont.css';
 @import 'official-iconfont.css';
-
+@import 'flex.scss';
\ No newline at end of file