TmOct5/ZhHealth
1
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

新增记录模块页面

Browse Source
This commit is contained in:
张冬雪
2022-01-11 17:15:00 +08:00
parent c810dbdb1d
commit f7b4468119
83 changed files with 16340 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

186
pages/evaluation/list.vue Normal file
View File

@@ -0,0 +1,186 @@
<!--
* @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>