ZhHealth/pages/evaluation/list.vue

<!--
 * @Description:用于展示评测列表，带分页加载更多~
 * @Author: Aimee·Zhang
 * @Date: 2022-01-05 09:13:53
 * @LastEditors: Aimee·Zhang
 * @LastEditTime: 2022-01-05 14:07:11
-->
<template>
    <view class="evaluation-list ">
        <view
            class="evaluation-item"
            v-for="(item,index) in evalList"
            :key="index"
        >
            <!-- 评测列表主要内容 标题 图片 描述 -->
            <view class="--content">
                <u-image
                    class="content-img"
                    width="170rpx"
                    height="170rpx"
                    radius="20rpx"
                    :src="require('../../static/imgs/test.png')"
                    :lazy-load="true"
                />
                <view class="title-des">
                    <view class="title">抗衰护肤测评抗衰护肤测评抗衰护肤测评</view>
                    <view class="des">科学护肤，‘精准’防衰老，延缓</view>
                </view>
            </view>

            <!-- 分数 -->
            <view
                class="score"
                v-if="index === 0"
            ><span>80</span>分</view>

            <!-- 评测状态 -->
            <view class="--status">
                <!-- 已测试展示 状态-->
                <view
                    class="status"
                    v-if="index === 0"
                >
                    <span class="dian">·</span>今日最新完成
                </view>
                <view
                    v-if="index === 0"
                    class="history"
                    @click="$Router.push({name:'EvaluationResult'})"
                >
                    查看历史结果
                </view>
                <!-- 未测试展示 状态-->
                <view
                    class="status"
                    v-if="index !== 0"
                >
                    <span class="dian">·</span>
                    <span class="person">32828837</span>
                    人已测 | 约4~8分钟
                </view>
                <u-icon
                    name="arrow-right"
                    :color="index === 0?'#26a377':'#faa81a'"
                    size="14"
                    :bold="true"
                    :label="index === 0?'重新评测':'开始测评'"
                    labelPos="left"
                    labelSize="14"
                    space="1"
                    :labelColor="index === 0?'#26a377':'#faa81a'"
                    @click="$Router.push({name:'EvaluationIntroduce'})"
                />
            </view>
        </view>
        <!-- 没有更多 -->
        <view class="no-more">没有更多~</view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            evalList: 4,
        };
    },
};
</script>

<style lang="scss" scoped>
// 列表
.evaluation-item {
    background-color: #fff;
    padding: $padding;
    margin: $margin;
    box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
    border-radius: $radius;
    position: relative;
    // 评测列表主要内容
    .--content {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        box-sizing: border-box;
        .content-img {
            box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
            border-radius: 30rpx;
        }
        .title-des {
            padding-left: $padding - 10;
            width: 440rpx;
            .title {
                font-size: $title-size + 4;
                font-weight: bold;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                width: 340rpx;
            }
            .des {
                font-size: $title-size-lg;
                color: $text-gray;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                padding-top: $padding - 8;
            }
        }
    }
    // .测试状态
    .--status {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        color: $text-gray-m;
        font-size: $title-size-m;
        padding-top: $padding;
        .status {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            .dian {
                font-size: $title-size-lg;
                margin-right: $padding * 0.2;
                font-weight: bold;
            }
            .person {
                color: #faa81a;
            }
        }
        .history {
            text-decoration: underline;
        }
    }
    // 分数
    .score {
        font-size: $title-size-m - 2;
        color: $text-gray-m;
        position: absolute;
        right: $padding;
        top: $padding - 10;
        span {
            font-size: 50rpx;
            color: $main-color;
            font-weight: bold;
        }
    }
}
// 没有更多
.no-more {
    color: $uni-text-color-disable;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: $padding;
    font-size: $title-size-m;
}
</style>