Election/src/pages/electionList/index.vue

<script setup lang="ts">

const doSearch = (_formData: { page: number; limit: number }, onSuccess: Function) => {
    onSuccess({
        data: {
            data:[
                { name: '测试一' },
                { name: '测试二' }
            ],
            total: 4
        }
    })
}
</script>

<template>
    <view class="electionList">
        <ex-list ref="reListRef" custom-list-type="scroll" :on-form-search="doSearch">
            <template v-slot="{ row, index }">
                <view class="items" :uid="'items' + 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">
							<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" active-color="#ff0000" :show-text="false" />
								<view class="progress-text">60%</view>
							</view>
						</view>
						<view class="flex info-items">
							<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" active-color="#ff0000" :show-text="false" />
								<view class="progress-text">60%</view>
							</view>
						</view>
                        <view class="info-bts">查看投票详情</view>
                    </view>
                </view>
            </template>
        </ex-list>
    </view>
</template>

<style scoped lang="scss">
.electionList {
    width: 100%;
    box-sizing: border-box;
    min-height: calc(100vh - 100rpx);
    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;
                    }
                }
            }

            &-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>