189 lines
7.4 KiB
Vue
189 lines
7.4 KiB
Vue
<template>
|
||
<div class="two-r-box">
|
||
<div class="title">
|
||
<span>健康打卡数据</span>
|
||
<!-- <span class="look-view">查看详情</span>-->
|
||
</div>
|
||
<div class="content">
|
||
<div class="content-item">
|
||
<div class="content-item-info">
|
||
<div class="content-item-name" style="font-size: 16px">
|
||
<div class="content-item-img">
|
||
<img :src="WeightPng" alt="" />
|
||
</div>
|
||
减重打卡
|
||
</div>
|
||
<div class="content-item-clock">
|
||
<div>
|
||
<span class="clock-text">今日打卡人数：</span>
|
||
<span class="clock-num1">86人</span>
|
||
</div>
|
||
<div>
|
||
<span class="clock-text">异常人数：</span>
|
||
<span class="clock-num2">86人</span>
|
||
</div>
|
||
</div>
|
||
<div class="content-item-clock" style="margin-bottom: 0">
|
||
<div>
|
||
<span class="clock-text">今日打卡人数：</span>
|
||
<span class="clock-num1">86人</span>
|
||
</div>
|
||
<div>
|
||
<span class="clock-text">异常人数：</span>
|
||
<span class="clock-num2">86人</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="content-item">
|
||
<div class="content-item-info">
|
||
<div class="content-item-name" style="font-size: 16px">
|
||
<div class="content-item-img">
|
||
<img :src="WeightPng" alt="" />
|
||
</div>
|
||
减重打卡
|
||
</div>
|
||
<div class="content-item-clock">
|
||
<div>
|
||
<span class="clock-text">今日打卡人数：</span>
|
||
<span class="clock-num1">86人</span>
|
||
</div>
|
||
<div>
|
||
<span class="clock-text">异常人数：</span>
|
||
<span class="clock-num2">86人</span>
|
||
</div>
|
||
</div>
|
||
<div class="content-item-clock" style="margin-bottom: 0">
|
||
<div>
|
||
<span class="clock-text">今日打卡人数：</span>
|
||
<span class="clock-num1">86人</span>
|
||
</div>
|
||
<div>
|
||
<span class="clock-text">异常人数：</span>
|
||
<span class="clock-num2">86人</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="content-item" style="margin-bottom: 0">
|
||
<div class="content-item-info">
|
||
<div class="content-item-name" style="font-size: 16px">
|
||
<div class="content-item-img">
|
||
<img :src="WeightPng" alt="" />
|
||
</div>
|
||
减重打卡
|
||
</div>
|
||
<div class="content-item-clock">
|
||
<div>
|
||
<span class="clock-text">今日打卡人数：</span>
|
||
<span class="clock-num1">12386人</span>
|
||
</div>
|
||
<div>
|
||
<span class="clock-text">异常人数：</span>
|
||
<span class="clock-num2">86人</span>
|
||
</div>
|
||
</div>
|
||
<div class="content-item-clock" style="margin-bottom: 0">
|
||
<div>
|
||
<span class="clock-text">今日打卡人数：</span>
|
||
<span class="clock-num1">86人</span>
|
||
</div>
|
||
<div>
|
||
<span class="clock-text">异常人数：</span>
|
||
<span class="clock-num2">86人</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script setup lang="ts">
|
||
import WeightPng from '/@/assets/indexSun/weightClock.png';
|
||
import FatPng from '/@/assets/indexSun/fatClock.png';
|
||
import BloodPng from '/@/assets/indexSun/bloodClock.png';
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.two-r-box {
|
||
background: rgba(8, 75, 100, 0.2);
|
||
display: flex;
|
||
flex-direction: column;
|
||
letter-spacing: 0;
|
||
.title {
|
||
height: 40px;
|
||
border-radius: 14px 14px 0 0;
|
||
font-weight: bold;
|
||
font-size: 20px;
|
||
letter-spacing: 2px;
|
||
color: #ffffff;
|
||
line-height: 40px;
|
||
padding: 0 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
background: linear-gradient(to right, rgba(8, 75, 100, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
|
||
.look-view {
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
.content {
|
||
height: calc(100% - 40px);
|
||
padding: 10px 30px 10px 15px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
.content-item {
|
||
flex: 1;
|
||
margin-bottom: 5px;
|
||
display: flex;
|
||
.content-item-img {
|
||
margin-right: 10px;
|
||
img {
|
||
width: 32px;
|
||
margin-top: -3px;
|
||
}
|
||
}
|
||
.content-item-info {
|
||
flex: 1;
|
||
color: #fff;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-around;
|
||
font-size: 14px;
|
||
.content-item-name,
|
||
.content-item-clock {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.content-item-clock {
|
||
padding-left: 42px;
|
||
justify-content: space-between;
|
||
> div {
|
||
width: 49%;
|
||
padding-bottom: 2px;
|
||
margin-bottom: 5px;
|
||
> span {
|
||
border-bottom: 1px dashed #fff;
|
||
}
|
||
}
|
||
.clock-text {
|
||
padding-bottom: 1px;
|
||
}
|
||
.clock-num1,
|
||
.clock-num2 {
|
||
font-size: 16px;
|
||
}
|
||
.clock-num1 {
|
||
color: #22e8ff;
|
||
}
|
||
.clock-num2 {
|
||
color: #f24439;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|