Election/src/pages/electionList/info.vue

<script setup lang="ts"></script>

<template>
    <view class="electionList-info">
        <view class="head">
            <view class="title">2024年度业主委员会主任选举</view>
            <view class="status">
                <text style="color: #4b5563; margin-right: 16rpx">已结束</text>
                <text style="color: #6b7280">2024-01-15 10:00 ~ 2024-01-16 10:00</text>
            </view>
        </view>
        <view class="countview flex-center-between">
            <view class="flex column items">
                <u-count-to :startVal="0" :endVal="20" bold fontSize="48rpx" color="#2563EB" />
                <view class="tip">参选人数</view>
            </view>
            <view class="flex column items">
                <u-count-to :startVal="0" :endVal="20" bold fontSize="48rpx" color="#2563EB" />
                <view class="tip">候选人数</view>
            </view>
            <view class="flex column items">
                <u-count-to :startVal="0" :endVal="20" bold fontSize="48rpx" color="#2563EB" />
                <view class="tip">当选人数</view>
            </view>
        </view>

        <view class="content" v-for="(v, k) of 4" :key="k">
            <view class="flex">
                <view class="headimg"></view>
                <view class="name">陈志明</view>
                <view class="status">当选</view>
                <!-- <view class="status un">未当选</view> -->
            </view>
            <view class="progress">
                <view class="flex-center-between progress-text">
                    <text>同意</text>
                    <text class="b">98 票(62.8%)</text>
                </view>
                <u-line-progress :percentage="62.8" height="8rpx" active-color="#2563EB" :show-text="false" />
            </view>
            <view class="progress">
                <view class="flex-center-between progress-text">
                    <text>反对</text>
                    <text class="e">35 票 (22.4%)</text>
                </view>
                <u-line-progress :percentage="22.4" height="8rpx" active-color="#ef4444" :show-text="false" />
            </view>
            <view class="progress">
                <view class="flex-center-between progress-text">
                    <text>弃权</text>
                    <text class="f">23 票 (14.8%)</text>
                </view>
                <u-line-progress :percentage="14.8" height="8rpx" active-color="#9CA3AF" :show-text="false" />
            </view>
        </view>
    </view>
</template>

<style scoped lang="scss">
.electionList-info {
    width: 100%;
    min-height: 100vh;
    padding: 32rpx;
    box-sizing: border-box;
    background-color: #f9fafb;

    .head {
        margin-bottom: 48rpx;

        .title {
            font-size: 40rpx;
            font-weight: bold;
            line-height: 56rpx;
            color: #000000;
            text-align: left;
            margin-bottom: 16rpx;
        }

        .status {
            font-size: 28rpx;
            font-weight: normal;
            line-height: 40rpx;
        }
    }

    .countview {
        padding: 32rpx 60rpx;
        border-radius: 24rpx;
        margin-bottom: 32rpx;
        background-color: #fff;

        .tip {
            color: #4b5563;
        }
    }

    .content {
        padding: 32rpx;
        border-radius: 24rpx;
        margin-bottom: 32rpx;
        background-color: #fff;

        .headimg {
            width: 128rpx;
            height: 128rpx;
            border-radius: 50%;
            overflow: hidden;
            background-color: #4b556377;
            margin-right: 22rpx;
        }

        .name {
            font-size: 36rpx;
            font-weight: 500;
            line-height: 56rpx;
            color: #000000;
            margin-right: auto;
        }

        .status {
            width: 136rpx;
            text-align: center;
            font-size: 36rpx;
            font-weight: normal;
            border-radius: 999rpx;
            padding: 16rpx 0;
            line-height: 40rpx;
            color: #2563eb;
            background: rgba(37, 99, 235, 0.1);

            &.un {
                color: #f44336;
                background: rgba(244, 67, 54, 0.1);
            }
        }

        .progress {
            margin-top: 24rpx;
            height: min-content;

            &-text {
                color: #000;
                font-size: 28rpx;
                line-height: 40rpx;
                margin-bottom: 8rpx;

                .b {
                    color: #2563eb;
                }

                .f {
                    color: #6b7280;
                }

                .e {
                    color: #ef4444;
                }
            }
        }
    }
}
</style>