renkang/xj-screen
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update: 新疆大屏

Browse Source
This commit is contained in:
xf
2025-07-06 15:04:39 +08:00
parent 22c5b89f90
commit 86ed8341e2
30 changed files with 984 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/indexSun/twoR.vue
+188
View File
@@ -0,0 +1,188 @@
<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>