You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
868 lines
19 KiB
Vue
868 lines
19 KiB
Vue
<template>
|
|
<view class="checkManDetail">
|
|
<u-navbar :bgColor="background" left-icon=" "></u-navbar>
|
|
<view class="topImgCon">
|
|
<image src="https://wx3.sinaimg.cn/mw1024/007bFxqGly1hrtnqdv7fpj30u00u0afj.jpg" mode="aspectFill" class="topBg"></image>
|
|
<image src="../../static/img/2.png" class="topBtBg"></image>
|
|
<view class="topTip taste">
|
|
<image src="../../static/img/happy1.png"></image> 味道鲜美</view>
|
|
<view class="topTip weight">
|
|
<image src="../../static/img/happy1.png"></image>足斤足两</view>
|
|
<view class="topTip quality">
|
|
<image src="../../static/img/happy2.png"></image>肉质鲜嫩</view>
|
|
<view class="man-id-card">
|
|
<view class="name-box">
|
|
<view class="name">验蟹师名字</view>
|
|
<view class="visitor">
|
|
<image src="../../static/img/eye.png"></image>
|
|
访客<text class="visitor-num">121</text>
|
|
</view>
|
|
</view>
|
|
<view class="label-box">
|
|
</view>
|
|
<view class="man-detail">
|
|
<view class="box left">
|
|
<view class="detail-tip">
|
|
<image src="../../static/img/map-pin@2x.png" class="detail-img"></image>
|
|
南京市
|
|
</view>
|
|
<view class="detail-tip">
|
|
<image src="../../static/img/magic-hands@2x.png" class="detail-img"></image>
|
|
已验蟹 2W+
|
|
</view>
|
|
</view>
|
|
<view class="box right">
|
|
<view class="rate-text">评分</view>
|
|
<view class="rate-value">{{valueCheckman}}</view>
|
|
<view class="rate">
|
|
<u-rate :count="count" v-model="valueCheckman" size="20rpx" :allowHalf="true"></u-rate>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="bodyCon">
|
|
<view class="claims-box" v-if="type==0">
|
|
<view class="title">缺斤少两，<text>三步</text>轻松理赔</view>
|
|
<view class="title-add">蟹联网理赔成功率 99%</view>
|
|
<view class="part3">
|
|
<view class="steps-box left">
|
|
<view class="steps-num">01</view>
|
|
<view class="steps-con">提交快递信息</view>
|
|
<view class="row left">
|
|
<image src="../../static/img/row.png"></image>
|
|
</view>
|
|
</view>
|
|
<view class="steps-box center">
|
|
<view class="steps-num">02</view>
|
|
<view class="steps-con">补充订单信息</view>
|
|
<view class="row right">
|
|
<image src="../../static/img/row.png"></image>
|
|
</view>
|
|
</view>
|
|
<view class="steps-box right">
|
|
<view class="steps-num">03</view>
|
|
<view class="steps-con">上传证明材料</view>
|
|
</view>
|
|
</view>
|
|
<view class="part4">
|
|
<button class="claims-btn">
|
|
前往理赔
|
|
<image src="../../static/img/chevron-right-small@2x.png"></image>
|
|
</button>
|
|
</view>
|
|
</view>
|
|
<claims-card class="claims-card" v-if="type!=0" :type="type" ></claims-card>
|
|
<view class="line"></view>
|
|
<view class="claims-assess-box" @click="show=true">
|
|
<view class="title">您对本次验蟹结果满意吗？</view>
|
|
<view class="bottom-img">
|
|
<view class="img-con" v-for="item in rateList">
|
|
<image :src="item.imgUrl" class="unclick"></image>
|
|
<text class="unclick">{{item.name}}</text>
|
|
</view>
|
|
</view>
|
|
<u-popup :show="show" mode="bottom" @open="open" :safeAreaInsetBottom="false" :round="16">
|
|
<view class="rate-popup">
|
|
<image src="../../static/img/popup-close.png" @click="close"></image>
|
|
<view class="top-bg">
|
|
<view class="top-bg-linear"></view>
|
|
</view>
|
|
<view class="rate-img">
|
|
<view class="img-con" v-for="(item,index) in rateList" @click="click" :data-id="item.num" :key="index">
|
|
<image :src="item.imgUrl" :class="{'click':item.isClicked}"></image>
|
|
<text :class="{'click':item.isClicked}">{{item.name}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="rate-item-box">
|
|
<view class="rate-item" v-for="item in clickList" @click="rateClick" :class="{'click':item.checked}" :data-id="item.num">
|
|
{{item.name}}
|
|
</view>
|
|
</view>
|
|
<view class="advice-input-box">
|
|
<input placeholder="您的建议是我们前进的方向" placeholder-class="input-text"/>
|
|
</view>
|
|
<view class="assess-btn">
|
|
匿名评价
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
<view class="line"></view>
|
|
<view class="assess-box">
|
|
<view class="assess-top">
|
|
<view class="left">
|
|
<view class="title">用户评价</view>
|
|
<view class="title-add">已有 {{customerNum}} 名用户参与评价</view>
|
|
</view>
|
|
<view class="right">
|
|
<u-rate :count="count" v-model="valueCustomer" size="20rpx" :allowHalf="true"></u-rate>
|
|
<view class="rate-value">{{valueCustomer}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="assess-body">
|
|
<view class="assess-item" v-for="item in assessList" >
|
|
{{item.name}}{{item.num}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import claimsCard from './components/claimsCard.vue'
|
|
export default {
|
|
components:{claimsCard,},
|
|
data(){
|
|
return{
|
|
show:false,
|
|
type:1,
|
|
background:"transparent",
|
|
valueCheckman:4.9,
|
|
valueCustomer:3.9,
|
|
count:5,
|
|
customerNum:6712,
|
|
assessList:[{
|
|
name:"味道鲜美",
|
|
num:8
|
|
},
|
|
{
|
|
name:"饱满香浓",
|
|
num:6
|
|
},
|
|
{
|
|
name:"蟹膏浓郁",
|
|
num:10
|
|
},
|
|
{
|
|
name:"味道好",
|
|
num:8
|
|
},
|
|
{
|
|
name:"肉质鲜嫩",
|
|
num:8
|
|
},
|
|
{
|
|
name:"足斤足两",
|
|
num:12
|
|
}],
|
|
|
|
rateList:[{
|
|
imgUrl:"../../static/img/anger.png",
|
|
name:"很糟糕",
|
|
num:0,
|
|
isClicked:false,
|
|
},
|
|
{
|
|
imgUrl:"../../static/img/happy1.png",
|
|
name:"还可以",
|
|
num:1,
|
|
isClicked:false,
|
|
},
|
|
{
|
|
imgUrl:'../../static/img/happy2.png',
|
|
name:"太赞了",
|
|
num:2,
|
|
isClicked:true,
|
|
}],
|
|
|
|
//太赞了
|
|
perfectList:[{
|
|
name:"无损活蟹",
|
|
num:0,
|
|
checked:false
|
|
},
|
|
{
|
|
name:"肉肥黄满",
|
|
num:1,
|
|
checked:false
|
|
},
|
|
{
|
|
name:"色泽鲜亮",
|
|
num:2,
|
|
checked:false
|
|
},
|
|
{
|
|
name:"肉质紧实",
|
|
num:3,
|
|
checked:false
|
|
},
|
|
{
|
|
name:"口感极佳",
|
|
num:4,
|
|
checked:false
|
|
},
|
|
{
|
|
name:"顶级品质",
|
|
num:5,
|
|
checked:false
|
|
}],
|
|
//还可以
|
|
goodList:[{
|
|
name:"质量一般",
|
|
num:0,
|
|
checked:false
|
|
},
|
|
{
|
|
name:"肉质尚可",
|
|
num:1,
|
|
checked:false
|
|
},
|
|
{
|
|
name:"比较新鲜",
|
|
num:2,
|
|
checked:false
|
|
},
|
|
{
|
|
name:"活力一般",
|
|
num:3,
|
|
checked:false
|
|
},
|
|
{
|
|
name:"品相尚可",
|
|
num:4,
|
|
checked:false
|
|
},
|
|
{
|
|
name:"个头适中",
|
|
num:5,
|
|
checked:false
|
|
}],
|
|
//很糟糕
|
|
badList:[{
|
|
name:"品质极差",
|
|
num:0,
|
|
checked:false
|
|
},
|
|
{
|
|
name:"死蟹很多",
|
|
num:1,
|
|
checked:false
|
|
},
|
|
{
|
|
name:"无肉无黄",
|
|
num:2,
|
|
checked:false
|
|
},
|
|
{
|
|
name:"异味明显",
|
|
num:3,
|
|
checked:false
|
|
},
|
|
{
|
|
name:"肉质松散",
|
|
num:4,
|
|
checked:false
|
|
},
|
|
{
|
|
name:"缺斤少两",
|
|
num:5,
|
|
checked:false
|
|
}],
|
|
clickType:0,
|
|
clickList:this.perfectList
|
|
}
|
|
},
|
|
mounted() {
|
|
for(var item of this.rateList){
|
|
if(item.isClicked == true){
|
|
this.clickType = item.num
|
|
if(this.clickType == 0){
|
|
this.clickList = this.badList
|
|
}else if(this.clickType == 1){
|
|
this.clickList = this.goodList
|
|
}else{
|
|
this.clickList = this.perfectList
|
|
}
|
|
}
|
|
}
|
|
},
|
|
methods:{
|
|
open(){
|
|
this.show = true
|
|
},
|
|
close(){
|
|
this.show = false
|
|
},
|
|
click:function(e){
|
|
var index = e.currentTarget.dataset.id
|
|
var list = this.rateList
|
|
this.clickType = index
|
|
console.log(index)
|
|
console.log(list[index].isClicked)
|
|
if(list[index].isClicked == false){
|
|
for (var item of this.rateList){
|
|
item.isClicked = false
|
|
}
|
|
list[index].isClicked = true
|
|
if(this.clickType == 0){
|
|
this.clickList = this.badList
|
|
}else if(this.clickType == 1){
|
|
this.clickList = this.goodList
|
|
}else{
|
|
this.clickList = this.perfectList
|
|
}
|
|
}
|
|
this.rateList = list
|
|
console.log(this.rateList[index].isClicked)
|
|
},
|
|
rateClick:function(e){
|
|
var index = e.currentTarget.dataset.id
|
|
var list = this.clickList
|
|
console.log(index)
|
|
console.log(list)
|
|
if(list[index].checked == false){
|
|
list[index].checked = true
|
|
}else{
|
|
for (var item of this.rateList){
|
|
item.checked = false
|
|
}
|
|
list[index].checked = false
|
|
}
|
|
this.clickList = list
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.checkManDetail{
|
|
}
|
|
.topImgCon{
|
|
width: 750rpx;
|
|
height: 750rpx;
|
|
position: relative;
|
|
.topBg{
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 5;
|
|
}
|
|
.topBtBg{
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
width: 100%;
|
|
height: 96rpx;
|
|
z-index: 10;
|
|
}
|
|
.topTip{
|
|
width: 184rpx;
|
|
height: 56rpx;
|
|
background: rgba(0,0,0,0.2);
|
|
border-radius: 56rpx 56rpx 56rpx 56rpx;
|
|
position: absolute;
|
|
display: flex;
|
|
justify-content: center;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #FFFFFF;
|
|
line-height: 34rpx;
|
|
text-align: center;
|
|
padding-top: 12rpx;
|
|
box-sizing: border-box;
|
|
>image{
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
margin-right: 8rpx;
|
|
}
|
|
&.taste{
|
|
left: 124rpx;
|
|
top: 360rpx;
|
|
}
|
|
&.weight{
|
|
left: 316rpx;
|
|
top: 434rpx;
|
|
}
|
|
&.quality{
|
|
left: 416rpx;
|
|
top: 360rpx;
|
|
}
|
|
}
|
|
.man-id-card{
|
|
z-index: 12;
|
|
width: 678rpx;
|
|
height: 338rpx;
|
|
background: #FFFFFF;
|
|
box-shadow: 0rpx 14rpx 58rpx 0rpx rgba(100,100,111,0.2);
|
|
border-radius: 24rpx;
|
|
position: absolute;
|
|
top: 532rpx;
|
|
left: 36rpx;
|
|
padding: 28rpx;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
.name-box{
|
|
height: 78rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.name{
|
|
font-weight: 600;
|
|
font-size: 56rpx;
|
|
color: #222222;
|
|
line-height: 78rpx;
|
|
}
|
|
.visitor{
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: rgba(34,34,34,0.6);
|
|
line-height: 34rpx;
|
|
text-align: left;
|
|
display: flex;
|
|
>image{
|
|
height: 32rpx;
|
|
width: 32rpx;
|
|
margin-right: 4rpx;
|
|
}
|
|
>text{
|
|
font-weight: 600;
|
|
font-size: 26rpx;
|
|
color: #222222;
|
|
line-height: 36rpx;
|
|
margin-left: 4rpx;
|
|
}
|
|
}
|
|
|
|
}
|
|
.label-box{
|
|
height: 40rpx;
|
|
// background-color: rebeccapurple;
|
|
// display: flex;
|
|
// position: relative;
|
|
// .label{
|
|
// height: 40rpx;
|
|
// width: 152rpx;
|
|
// display: flex;
|
|
// font-weight: 400;
|
|
// font-size: 20rpx;
|
|
// color: #FFFFFF;
|
|
// line-height: 28rpx;
|
|
// .label-img{
|
|
// .labelBg{
|
|
// height: 36rpx;
|
|
// width: 36rpx;
|
|
// }
|
|
// }
|
|
// .label-text{
|
|
// width: 112rpx;
|
|
// height: 30rpx;
|
|
// border-radius: 4rpx;
|
|
// text-align: center;
|
|
// &.first{
|
|
// background: #2388FF;
|
|
// }
|
|
// }
|
|
|
|
// }
|
|
}
|
|
.man-detail{
|
|
width: 622rpx;
|
|
height: 134rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.box{
|
|
width: 310rpx;
|
|
height: 134rpx;
|
|
background: #F8F9FA;
|
|
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
|
&.left{
|
|
padding: 24rpx;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
.detail-tip{
|
|
height: 36rpx;
|
|
font-weight: 400;
|
|
font-size: 26rpx;
|
|
color: #333333;
|
|
line-height: 36rpx;
|
|
text-align: left;
|
|
display: flex;
|
|
.detail-img{
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
margin-right: 8rpx;
|
|
}
|
|
}
|
|
}
|
|
&.right{
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
.rate-text{
|
|
position: absolute;
|
|
right:24rpx;
|
|
top:24rpx;
|
|
font-weight: 400;
|
|
font-size: 26rpx;
|
|
color: #B2B2B2;
|
|
line-height: 36rpx;
|
|
}
|
|
.rate-value{
|
|
position: absolute;
|
|
left: 34rpx;
|
|
top:20rpx;
|
|
font-family: D-DIN-DIN, D-DIN-DIN;
|
|
font-weight: bold;
|
|
font-size: 92rpx;
|
|
color: #FF480B;
|
|
line-height: 92rpx;
|
|
display: flex;
|
|
}
|
|
.rate{
|
|
position: absolute;
|
|
left: 162rpx;
|
|
bottom: 36rpx;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.bodyCon{
|
|
position: absolute;
|
|
top: 878rpx;
|
|
.claims-box{
|
|
width: 750rpx;
|
|
height: 414rpx;
|
|
background: #FFFFFF;
|
|
//background-color: #FF480B;
|
|
padding: 32rpx 36rpx;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
.part3{
|
|
height: 120rpx;
|
|
display: flex;
|
|
position: relative;
|
|
.steps-box{
|
|
height: 120rpx;
|
|
background: linear-gradient( 180deg, rgba(51,135,251,0.05) 0%, rgba(51,135,251,0.1) 100%);
|
|
width: 240rpx;
|
|
border-radius: 16rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
padding: 10rpx 0 12rpx 24rpx;
|
|
box-sizing: border-box;
|
|
&.center{
|
|
width: 266rpx;
|
|
padding-left: 56rpx;
|
|
}
|
|
&.right{
|
|
padding-left: 60rpx;
|
|
}
|
|
}
|
|
.steps-num{
|
|
font-family: D-DIN-DIN, D-DIN-DIN;
|
|
font-weight: bold;
|
|
font-size: 48rpx;
|
|
color: #3387FB;
|
|
line-height: 67rpx;
|
|
text-align: left;
|
|
}
|
|
.steps-con{
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: rgba(34,34,34,0.6);
|
|
line-height: 34rpx;
|
|
text-align: left;
|
|
}
|
|
.row{
|
|
height: 180rpx;
|
|
width: 80rpx;
|
|
>image{
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
&.left{
|
|
position: absolute;
|
|
left: 194rpx;
|
|
top: -30rpx;
|
|
}
|
|
&.right{
|
|
position: absolute;
|
|
right: 168rpx;
|
|
top: -30rpx;
|
|
}
|
|
}
|
|
}
|
|
.part4{
|
|
|
|
.claims-btn{
|
|
width: 678rpx;
|
|
height: 92rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 98rpx 98rpx 98rpx 98rpx;
|
|
border: 2rpx solid #2388FF;
|
|
display: flex;
|
|
justify-content: center;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #2388FF;
|
|
line-height: 39rpx;
|
|
padding-top: 26rpx;
|
|
>image{
|
|
width: 43rpx;
|
|
height: 43rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.claims-assess-box{
|
|
width: 750rpx;
|
|
height: 254rpx;
|
|
background: #FFFFFF;
|
|
//background-color: aqua;
|
|
padding: 32rpx 36rpx;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
.bottom-img{
|
|
width: 496rpx;
|
|
height: 106rpx;
|
|
margin-left: 96rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 34rpx;
|
|
}
|
|
.img-con{
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
>image{
|
|
width: 72rpx;
|
|
height: 72rpx;
|
|
&.unclick{
|
|
filter: grayscale(100%);
|
|
}
|
|
&.click{
|
|
// width: 120rpx;
|
|
// height: 120rpx;
|
|
transform: scale(1.7);
|
|
position: absolute;
|
|
top: 20rpx;
|
|
}
|
|
}
|
|
>text{
|
|
font-size: 24rpx;
|
|
color: rgba(0,0,0,0.3);
|
|
line-height: 34rpx;
|
|
text-align: center;
|
|
&.unclick{
|
|
color: #000000;
|
|
}
|
|
&.click{
|
|
color: #000000;
|
|
margin-top: 68rpx;
|
|
}
|
|
}
|
|
}
|
|
.rate-popup{
|
|
width: 750rpx;
|
|
height: 718rpx;
|
|
background: #FFFFFF;
|
|
box-sizing: border-box;
|
|
padding-bottom: 68rpx;
|
|
border-radius: 16rpx;
|
|
//关闭图标
|
|
>image{
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
position: absolute;
|
|
right: 0;
|
|
top: -72rpx;
|
|
}
|
|
.top-bg{
|
|
width: 750rpx;
|
|
height: 88rpx;
|
|
background: linear-gradient( 133deg, #D0FFBA 0%, #FFF6A1 100%);
|
|
border-radius: 16rpx;
|
|
.top-bg-linear{
|
|
width: 750rpx;
|
|
height: 88rpx;
|
|
background: linear-gradient(rgba(255, 255, 255, 0.1),rgba(255, 255, 255, 1));
|
|
}
|
|
}
|
|
.rate-img{
|
|
width: 544rpx;
|
|
position: absolute;
|
|
left: 102rpx;
|
|
top: -28rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding-top: 48rpx;
|
|
//background-color: #2388FF;
|
|
}
|
|
.rate-item-box{
|
|
width: 702rpx;
|
|
height: 244rpx;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
margin-top: 86rpx;
|
|
margin-left: 24rpx;
|
|
box-sizing: border-box;
|
|
.rate-item{
|
|
width: 344rpx;
|
|
height: 72rpx;
|
|
border-radius: 8rpx;
|
|
border: 2rpx solid rgba(0,0,0,0.1);
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #000000;
|
|
line-height: 39rpx;
|
|
text-align: center;
|
|
padding-top: 16rpx;
|
|
box-sizing: border-box;
|
|
&.click{
|
|
background:rgba(35,136,255,0.1);
|
|
border: 2rpx solid #2388FF;
|
|
}
|
|
}
|
|
}
|
|
.advice-input-box{
|
|
width: 702rpx;
|
|
height: 72rpx;
|
|
background: #F8F8F8;
|
|
border-radius: 8rpx;
|
|
box-sizing: border-box;
|
|
padding-top: 16rpx;
|
|
margin: 24rpx;
|
|
.input-text{
|
|
text-align: center;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: rgba(0,0,0,0.5);
|
|
}
|
|
}
|
|
.assess-btn{
|
|
width: 702rpx;
|
|
height: 92rpx;
|
|
background: linear-gradient( 91deg, #43A1FF 0%, #2F80F9 100%);
|
|
border-radius: 24rpx;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #FFFFFF;
|
|
line-height: 39rpx;
|
|
text-align: center;
|
|
padding-top: 26rpx;
|
|
box-sizing: border-box;
|
|
margin: 8rpx 24rpx 12rpx 24rpx;
|
|
}
|
|
|
|
}
|
|
}
|
|
.assess-box{
|
|
width: 750rpx;
|
|
height: 284rpx;
|
|
background: #FFFFFF;
|
|
//background-color: blueviolet;
|
|
padding: 32rpx 36rpx 28rpx 36rpx;
|
|
margin-bottom: 68rpx;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
.assess-top{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.left{
|
|
height: 98rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
.right{
|
|
display: flex;
|
|
position: relative;
|
|
height: 92rpx;
|
|
.u-rate{
|
|
position: absolute;
|
|
bottom: 12rpx;
|
|
right: 140rpx;
|
|
}
|
|
.rate-value{
|
|
font-family: D-DIN-DIN, D-DIN-DIN;
|
|
font-weight: bold;
|
|
font-size: 92rpx;
|
|
color: #FF480B;
|
|
line-height: 92rpx;
|
|
}
|
|
}
|
|
}
|
|
.assess-body{
|
|
width: 680rpx;
|
|
height: 108rpx;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: left;
|
|
.assess-item{
|
|
width: 160rpx;
|
|
height: 50rpx;
|
|
background: #F5F5F5;
|
|
border-radius: 8rpx;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: rgba(34,34,34,0.6);
|
|
line-height: 34rpx;
|
|
text-align: center;
|
|
padding-top: 8rpx;
|
|
box-sizing: border-box;
|
|
margin-right: 8rpx;
|
|
}
|
|
}
|
|
|
|
}
|
|
.line{
|
|
width: 714rpx;
|
|
height: 0rpx;
|
|
border: 2rpx solid rgba(0,0,0,0.04);
|
|
margin: 12rpx 18rpx;
|
|
}
|
|
.title{
|
|
font-weight: 600;
|
|
font-size: 36rpx;
|
|
color: #222222;
|
|
line-height: 50rpx;
|
|
>text{
|
|
color: #2388FF;
|
|
}
|
|
}
|
|
.title-add{
|
|
font-weight: 400;
|
|
font-size: 26rpx;
|
|
color: rgba(0,0,0,0.5);
|
|
line-height: 36rpx;
|
|
}
|
|
}
|
|
|
|
</style> |