803 lines
18 KiB
Vue
803 lines
18 KiB
Vue
<template>
|
|
<view class="content">
|
|
<view class="date">{{depthInfo.user_data.record_time}}</view>
|
|
<view class="header">
|
|
<view class="top">
|
|
<view class="left">
|
|
<image :src="depthInfo.user_data.head_pic"></image>
|
|
<view>
|
|
<text class="bold size14 name">{{depthInfo.user_data.nickname}}</text>
|
|
<text>性别:{{depthInfo.user_data.gender==2?'女':'男'}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="info">
|
|
<view class="text_l">
|
|
<text>年龄</text>
|
|
<text class="size20 bold">{{depthInfo.user_data.age}}</text>
|
|
</view>
|
|
<view class="line text_c">
|
|
<text>身高</text>
|
|
<text class="size20 bold">{{depthInfo.user_data.height}}</text>
|
|
</view>
|
|
<view class="text_r">
|
|
<text class="text_c">体重</text>
|
|
<text class="size20 bold">{{depthInfo.user_data.weight}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="right">
|
|
<view class="rightChart">
|
|
<view class="charts-box" v-if="depthInfo.user_data.score">
|
|
<qiun-data-charts type="arcbar" :opts="opts2" canvasId="rightChart209" :chartData="chartData2"
|
|
:canvas2d="true" />
|
|
</view>
|
|
<view class="score">
|
|
<text>{{depthInfo.user_data.score}}</text>
|
|
健康评分
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 心脏健康 -->
|
|
<view v-if="depthInfo.heart_rate&&depthInfo.heart_rate.value">
|
|
<view class="title">
|
|
<image :src="depthInfo.heart_rate.icon"></image>
|
|
{{depthInfo.heart_rate.title_name}}
|
|
</view>
|
|
<view class="heartRate bgfff ">
|
|
<view class="stand">
|
|
<view><text>{{depthInfo.heart_rate.value}}</text>{{depthInfo.heart_rate.unit}}</view>
|
|
<view class="bold size16" :style="{'color':depthInfo.heart_rate.standard_color}">
|
|
{{depthInfo.heart_rate.standard}}
|
|
</view>
|
|
</view>
|
|
<image src="/static/31.png" mode="widthFix"></image>
|
|
<view class="report" style="margin-top: -45px;">
|
|
<view class="Xitem myinfoPage">
|
|
<view class="box">
|
|
<view class="desc desc2">
|
|
<view class="statuevue">
|
|
<view class="bi">
|
|
<view :style="'left:'+depthInfo.heart_rate.offset+'%'" class="peobox">
|
|
<view class="xx"></view>
|
|
</view>
|
|
<view class="item" v-for="(ite,ind) in depthInfo.heart_rate.standard_list"
|
|
:key="ind" :style="{backgroundColor:ite.color}">
|
|
<view class="span1">{{ite.text}}</view>
|
|
<view class="span" v-if="ind<depthInfo.heart_rate.standard_list.length-1">
|
|
{{ite.max_val}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 身体成分分析 -->
|
|
<view v-if="depthInfo.body_data&&depthInfo.body_data.title_name">
|
|
<view class="title">
|
|
<image :src="depthInfo.body_data.icon"></image>
|
|
{{depthInfo.body_data.title_name}}
|
|
</view>
|
|
<view class="info bgfff">
|
|
<view class="infoTitle">
|
|
<text class="size16 bold">{{depthInfo.body_data.title}}</text>
|
|
<text class="size12 c999">{{depthInfo.body_data.description}}</text>
|
|
</view>
|
|
<view class="Qlist">
|
|
<view class="QItem" v-for="(ite,ind) in depthInfo.body_data.list">
|
|
<view class="left">
|
|
<view class="yuan" :style="{'backgroundColor':ite.color}"></view>
|
|
<view class="name">
|
|
<text class="bold">{{ite.name}}</text>
|
|
<text class="size12 c999">{{ite.scope}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="size16 bold value">{{ite.value}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="huan">
|
|
<qiun-data-charts type="ring" :opts="opts" canvasId="foodCharts209" :chartData="chartData"
|
|
:canvas2d="true" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 肌肉脂肪分析 -->
|
|
<view v-if="depthInfo.muscle_fat&&depthInfo.muscle_fat.list">
|
|
<view class="title">
|
|
<image :src="depthInfo.muscle_fat.icon"></image>
|
|
{{depthInfo.muscle_fat.title_name}}
|
|
</view>
|
|
<view class="table bgfff report">
|
|
<view class="Xitem myinfoPage">
|
|
<view class="box" v-for="(item,index) in depthInfo.muscle_fat.list">
|
|
<view class="data data2">
|
|
<view class="name bold">
|
|
{{item.name}}
|
|
</view>
|
|
<view class="val">{{item.value?item.value:'0'}}{{item.unit}}</view>
|
|
<view class="level">
|
|
<view class="btnf"
|
|
:style="{backgroundColor:(item.standard=='异常'?'#FFF':item.standard_color)}"
|
|
:class="[item.standard=='异常'?'btnC':'']">
|
|
{{item.standard=='异常'?'-':item.standard}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="desc">
|
|
<view v-if="item.description" class="ming size12">{{item.description}}</view>
|
|
<view :class="[item.list.length?'statuevue':'']" v-if="item.list">
|
|
<view class="bi">
|
|
<view :style="'left:'+item.offset+'%'" class="peobox">
|
|
<view class="xx"></view>
|
|
</view>
|
|
<view class="item" v-for="(ite , ind) in item.list" :key="ind"
|
|
:style="{backgroundColor:ite.color}">
|
|
<view class="span1">{{ite.text}}</view>
|
|
<view class="span" v-if="ind<item.list.length-1">{{ite.max_val}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 节段脂肪分析 -->
|
|
<view v-if="depthInfo.segment_fat&&depthInfo.segment_fat.list" class="w100">
|
|
<view class="title">
|
|
<image :src="depthInfo.segment_fat.icon"></image>
|
|
{{depthInfo.segment_fat.title_name}}
|
|
</view>
|
|
<view class="bodyimg bgfff">
|
|
<image :src="depthInfo.segment_fat.bg_img"></image>
|
|
<view class="L1" v-for="(ite,ind) in depthInfo.segment_fat.list">
|
|
{{ite.name}}{{ite.value}}{{ite.unit}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!--肌肉平衡 -->
|
|
<view v-if="depthInfo.segment_muscle&&depthInfo.segment_muscle.list" class="w100">
|
|
<view class="title">
|
|
<image :src="depthInfo.segment_muscle.icon"></image>
|
|
{{depthInfo.segment_muscle.title_name}}
|
|
</view>
|
|
<view class="bodyimg bgfff">
|
|
<image :src="depthInfo.segment_muscle.bg_img"></image>
|
|
<view class="L1" v-for="(ite,ind) in depthInfo.segment_muscle.list">
|
|
{{ite.name}}{{ite.value}}{{ite.unit}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 肥胖分析 -->
|
|
<view v-if="depthInfo.fat_analysis">
|
|
<view class="title">
|
|
<image :src="depthInfo.fat_analysis.icon"></image>
|
|
{{depthInfo.fat_analysis.title_name}}
|
|
</view>
|
|
<view class="table bgfff report">
|
|
<view class="Xitem myinfoPage">
|
|
<view class="box" v-for="(item,index) in depthInfo.fat_analysis.list">
|
|
<view class="data data2">
|
|
<view class="name bold">
|
|
{{item.name}}
|
|
</view>
|
|
<view class="val">{{item.value?item.value:'0'}}{{item.unit}}</view>
|
|
<view class="level">
|
|
<view class="btnf"
|
|
:style="{backgroundColor:(item.standard=='异常'?'#FFF':item.standard_color)}"
|
|
:class="[item.standard=='异常'?'btnC':'']">
|
|
{{item.standard=='异常'?'-':item.standard}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="desc">
|
|
<view v-if="item.description" class="ming size12">{{item.description}}</view>
|
|
<view :class="[item.list.length?'statuevue':'']" v-if="item.list">
|
|
<view class="bi">
|
|
<view :style="'left:'+item.offset+'%'" class="peobox">
|
|
<view class="xx"></view>
|
|
</view>
|
|
<view class="item" v-for="(ite , ind) in item.list" :key="ind"
|
|
:style="{backgroundColor:ite.color}">
|
|
<view class="span1">{{ite.text}}</view>
|
|
<view class="span" v-if="ind<item.list.length-1">{{ite.max_val}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 体重控制 -->
|
|
<view v-if="depthInfo.weight_controller" class="w100">
|
|
<view class="title">
|
|
<image :src="depthInfo.weight_controller.icon"></image>
|
|
{{depthInfo.weight_controller.title_name}}
|
|
</view>
|
|
<view class="table2 bgfff">
|
|
<view class="Xlist" v-for="(ite,ind) in depthInfo.weight_controller.list">
|
|
<view class="name">{{ite.name}}</view>
|
|
<view>{{ite.value}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 身体类型 -->
|
|
<view v-if="depthInfo.body_type" class="w100">
|
|
<view class="title">
|
|
<image :src="depthInfo.body_type.icon"></image>
|
|
{{depthInfo.body_type.title_name}}
|
|
</view>
|
|
<view class="type">
|
|
<view class="typeItem">
|
|
<view class="bold">{{depthInfo.body_type.l_line_color.name}} </view>
|
|
<view class="Tlist">
|
|
<view class="line line1"
|
|
:style="{ backgroundImage: 'linear-gradient(to bottom, '+depthInfo.body_type.l_line_color.standard_list[2].color+','+depthInfo.body_type.l_line_color.standard_list[2].color+','+depthInfo.body_type.l_line_color.standard_list[0].color+')' }">
|
|
</view>
|
|
<view class="ge">
|
|
<view v-for="(ite,ind) in depthInfo.body_type.box_list"
|
|
:class="[depthInfo.body_type.value==ite?'active':'']">{{ite}}</view>
|
|
</view>
|
|
<view class="line line2"
|
|
:style="{ backgroundImage: 'linear-gradient(to right, '+depthInfo.body_type.r_line_color.standard_list[0].color+','+depthInfo.body_type.r_line_color.standard_list[1].color+','+depthInfo.body_type.r_line_color.standard_list[2].color+')' }">
|
|
</view>
|
|
</view>
|
|
<view class="bold text_r">{{depthInfo.body_type.r_line_color.name}} </view>
|
|
</view>
|
|
<view class="Tinfo">
|
|
<view class="bold">{{depthInfo.body_type.r_line_color.name}}:</view>
|
|
<view v-for="(ite,ind) in depthInfo.body_type.r_line_color.standard_list" class="TinfoList">
|
|
<text :style="{'backgroundColor':ite.color}"></text>{{ite.name}}
|
|
</view>
|
|
</view>
|
|
<view class="Tinfo">
|
|
<view class="bold">{{depthInfo.body_type.l_line_color.name}}:</view>
|
|
<view v-for="(ite,ind) in depthInfo.body_type.l_line_color.standard_list" class="TinfoList">
|
|
<text :style="{'backgroundColor':ite.color}"></text>{{ite.name}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 其他指标 -->
|
|
<view v-if="depthInfo.other_data" class="w100">
|
|
<view class="title">
|
|
<image :src="depthInfo.other_data.icon"></image>
|
|
{{depthInfo.other_data.title_name}}
|
|
</view>
|
|
<view class="table2 bgfff">
|
|
<view class="Xlist" v-for="(ite,ind) in depthInfo.other_data.list">
|
|
<view class="name">{{ite.name}}</view>
|
|
<view>{{ite.value}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
mapState
|
|
} from "vuex";
|
|
import qiunDataCharts from '@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue';
|
|
export default {
|
|
data() {
|
|
return {
|
|
opts2: {
|
|
color: ["#54d87c"],
|
|
title: {
|
|
name: "",
|
|
},
|
|
extra: {
|
|
arcbar: {
|
|
type: "default",
|
|
width: 12,
|
|
backgroundColor: "#d0ffde",
|
|
startAngle: 0.95,
|
|
endAngle: 0.05,
|
|
gap: 2,
|
|
linearType: "none"
|
|
}
|
|
}
|
|
},
|
|
opts: {
|
|
color: [],
|
|
title: {
|
|
name: "",
|
|
},
|
|
subtitle: {
|
|
name: "体重(kg)"
|
|
}
|
|
},
|
|
chartData: {},
|
|
chartData2: {},
|
|
depthInfo: {
|
|
body_data: {},
|
|
body_type: {},
|
|
fat_analysis: {},
|
|
muscle_fat: {},
|
|
other_data: {},
|
|
segment_fat: {},
|
|
segment_muscle: {},
|
|
user_data: {},
|
|
weight_controller: {}
|
|
}
|
|
}
|
|
},
|
|
components: {
|
|
qiunDataCharts,
|
|
},
|
|
computed: {
|
|
...mapState(["user"]),
|
|
info() {
|
|
return this.user
|
|
},
|
|
},
|
|
onLoad() {
|
|
this.handleLabelList()
|
|
},
|
|
methods: {
|
|
handleLabelList() {
|
|
let that = this
|
|
that.$model.getResultDepth({
|
|
aud_id: that.user.aud_id
|
|
}).then(res => {
|
|
console.log("深度报告", res)
|
|
if (res.code == 0) {
|
|
that.depthInfo = res.data
|
|
let chart_data = []
|
|
let list = that.depthInfo.body_data.list
|
|
that.opts.color = []
|
|
for (let i = 0; i < list.length; ++i) {
|
|
this.opts.color.push(list[i].color)
|
|
chart_data.push({
|
|
name: list[i].name,
|
|
value: Number(list[i].offset),
|
|
})
|
|
}
|
|
this.opts.title.name = that.depthInfo.body_data.value
|
|
this.chartData = JSON.parse(JSON.stringify({
|
|
series: [{
|
|
data: chart_data
|
|
}]
|
|
}));
|
|
|
|
this.chartData2 = JSON.parse(JSON.stringify({
|
|
series: [{
|
|
name: "健康评分",
|
|
data: Number(that.depthInfo.user_data.score) / 100
|
|
}]
|
|
}));
|
|
}
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "@/scss/body.scss";
|
|
|
|
.content {
|
|
padding: 0 10px 20px;
|
|
}
|
|
|
|
.size12 {
|
|
font-size: 12px !important;
|
|
}
|
|
|
|
.w100 {
|
|
width: 100%;
|
|
}
|
|
|
|
.desc2 {
|
|
width: 100% !important;
|
|
padding: 0 !important;
|
|
background: inherit !important;
|
|
}
|
|
|
|
.date {
|
|
width: 100%;
|
|
font-weight: bold;
|
|
font-size: 16px;
|
|
margin: 15px 0;
|
|
}
|
|
|
|
.title {
|
|
display: flex;
|
|
width: 100%;
|
|
margin: 10px 0;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
align-items: center;
|
|
|
|
image {
|
|
width: 20px;
|
|
height: 30px;
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
|
|
.header {
|
|
background: #fff;
|
|
padding: 10px;
|
|
margin-top: 15PX;
|
|
width: calc(100% - 20px);
|
|
border-radius: 10px;
|
|
position: relative;
|
|
|
|
.top {
|
|
display: flex;
|
|
height: 55px;
|
|
|
|
.left {
|
|
width: 100%;
|
|
display: flex;
|
|
|
|
image {
|
|
width: 50px;
|
|
height: 50px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
view {
|
|
width: calc(100% - 60px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.right {
|
|
width: 160px;
|
|
position: absolute;
|
|
right: 5px;
|
|
top: -30px;
|
|
height: 100px;
|
|
overflow: hidden;
|
|
z-index: 999;
|
|
|
|
.rightChart {
|
|
width: 140px;
|
|
height: 140px;
|
|
background: #fff;
|
|
border-radius: 50%;
|
|
padding: 10px;
|
|
}
|
|
|
|
.charts-box {
|
|
width: 140px;
|
|
height: 140px;
|
|
margin-top: 0px;
|
|
}
|
|
|
|
.score {
|
|
position: absolute;
|
|
width: 140px;
|
|
height: 100px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
top: -5px;
|
|
|
|
text {
|
|
color: $maincolor;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
.info {
|
|
display: flex;
|
|
text-align: center;
|
|
justify-content: space-between;
|
|
margin-top: 10px;
|
|
|
|
view {
|
|
width: 28%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.line {
|
|
width: 40%;
|
|
position: relative;
|
|
}
|
|
|
|
.line::after,
|
|
.line::before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 3px;
|
|
height: 30px;
|
|
background: #b6fdcc;
|
|
border-radius: 10px;
|
|
top: 10px;
|
|
}
|
|
|
|
.line::before {
|
|
left: 0;
|
|
}
|
|
|
|
.line::after {
|
|
right: 0px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.heartRate {
|
|
width: calc(100% - 20px);
|
|
padding: 10px;
|
|
border-radius: 10px;
|
|
|
|
.stand {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 10px;
|
|
|
|
text {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
margin: 0 5px;
|
|
color: $maincolor;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.info {
|
|
padding: 10px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
border-radius: 10px;
|
|
width: calc(100% - 20px);
|
|
justify-content: space-between;
|
|
|
|
.infoTitle {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.Qlist {
|
|
width: calc(100% - 140px);
|
|
margin-top: 10px;
|
|
|
|
.QItem {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 40px;
|
|
border-radius: 10px;
|
|
padding-left: 5px;
|
|
margin-bottom: 5px;
|
|
|
|
.left {
|
|
width: calc(100% - 60px);
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.yuan {
|
|
background-color: #3E7AF6;
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.name {
|
|
display: flex;
|
|
flex-direction: column;
|
|
line-height: 15px;
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
|
|
.value {
|
|
width: 60px;
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
.QItem:nth-child(even) {
|
|
background-color: #f7f7f7;
|
|
}
|
|
}
|
|
|
|
.huan {
|
|
width: 160px;
|
|
height: 160px;
|
|
position: absolute;
|
|
right: 0px;
|
|
margin-top: 50px;
|
|
}
|
|
|
|
}
|
|
|
|
.bodyimg {
|
|
padding: 20px 30px;
|
|
width: calc(100% - 60px);
|
|
text-align: center;
|
|
border-radius: 10px;
|
|
position: relative;
|
|
|
|
image {
|
|
width: 13.75rem;
|
|
height: 13.2rem;
|
|
}
|
|
|
|
view {
|
|
font-size: 15px;
|
|
font-weight: bold;
|
|
position: absolute;
|
|
}
|
|
|
|
.L1:nth-child(2) {
|
|
left: 26px;
|
|
top: 35px;
|
|
}
|
|
|
|
.L1:nth-child(3) {
|
|
right: 25px;
|
|
top: 35px;
|
|
}
|
|
|
|
.L1:nth-child(4) {
|
|
left: 25px;
|
|
top: 95px;
|
|
}
|
|
|
|
.L1:nth-child(5) {
|
|
left: 25px;
|
|
bottom: 50px;
|
|
}
|
|
|
|
.L1:nth-child(6) {
|
|
right: 25px;
|
|
bottom: 50px;
|
|
}
|
|
}
|
|
|
|
.report {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.table,
|
|
.table2 {
|
|
width: calc(100% - 20px);
|
|
padding: 10px;
|
|
|
|
.Xlist {
|
|
display: flex;
|
|
line-height: 40px;
|
|
|
|
view {
|
|
width: 50%;
|
|
text-align: center;
|
|
position: relative;
|
|
}
|
|
|
|
.name::after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 40px;
|
|
background: #f7f7f7;
|
|
top: 0px;
|
|
right: 0;
|
|
}
|
|
}
|
|
|
|
.Xlist:nth-child(odd) {
|
|
background-color: #dfdfdf;
|
|
}
|
|
|
|
.Xlist:nth-child(1) {
|
|
font-size: 16px;
|
|
color: #fff;
|
|
border-radius: 10px 10px 0 0;
|
|
background-color: $maincolor !important;
|
|
}
|
|
}
|
|
|
|
.table2 {
|
|
width: 100%;
|
|
padding: 0;
|
|
}
|
|
|
|
.type {
|
|
width: calc(100% - 20px);
|
|
padding: 10px;
|
|
background: #fff;
|
|
border-radius: 10px;
|
|
|
|
.Tlist {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 10px;
|
|
margin-bottom: 5px;
|
|
width: 100%;
|
|
position: relative;
|
|
height: 235px;
|
|
|
|
.line {
|
|
position: absolute;
|
|
width: 5px;
|
|
height: 92%;
|
|
background: #dfdfdf;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.line1 {
|
|
top: 0;
|
|
left: 5px;
|
|
}
|
|
|
|
.line2 {
|
|
width: 92%;
|
|
height: 5px;
|
|
bottom: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.ge {
|
|
width: calc(100% - 25px);
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
position: absolute;
|
|
left: 25px;
|
|
|
|
view {
|
|
width: 30%;
|
|
height: 60px;
|
|
line-height: 60px;
|
|
text-align: center;
|
|
background: #f7f7f7;
|
|
border: 1px solid $maincolor;
|
|
border-radius: 10px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.active {
|
|
color: #fff;
|
|
background: $maincolor;
|
|
}
|
|
}
|
|
}
|
|
|
|
.Tinfo {
|
|
display: flex;
|
|
padding: 5px 0;
|
|
|
|
.TinfoList {
|
|
color: #666;
|
|
display: flex;
|
|
align-items: center;
|
|
width: 15%;
|
|
margin-left: 15px;
|
|
}
|
|
|
|
text {
|
|
width: 7px;
|
|
height: 7px;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
}
|
|
</style> |