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

接口

Browse Source
This commit is contained in:
zhaotiantian
2023-12-01 18:21:40 +08:00
parent 9ab26f4915
commit 2319af2203
13 changed files with 931 additions and 867 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/body-d-left/threeL.vue
+95 -84
View File
@@ -1,97 +1,108 @@
<template>
<div>
<public-title title="体检数据"/>
<public-title title="体检数据" />
<div class="inner">
<div class="type-time">
<span :class="selectIndex===index?'select':'unSelect'" v-for="(item,index) in typeTime" :key="index" @click="handleSelect(index)">{{item.name}}</span>
</div>
<div class="physical-container">
<div class="physical-item">
<span>10444人</span>
<span>兴隆圆医院</span>
<div class="type-time">
<span
:class="selectIndex === index ? 'select' : 'unSelect'"
v-for="(item, index) in typeTime"
:key="index"
@click="handleSelect(index)"
>{{ item.name }}</span
>
</div>
<div class="physical-item">
<span>144人</span>
<span>兴隆圆医院</span>
<div class="physical-container">
<div class="physical-item">
<span>10444人</span>
<span>兴隆圆医院</span>
</div>
<div class="physical-item">
<span>144人</span>
<span>兴隆圆医院</span>
</div>
<div class="physical-item">
<span>344人</span>
<span>兴隆圆医院</span>
</div>
<div class="physical-item">
<span>144人</span>
<span>兴隆圆医院</span>
</div>
<div class="physical-item">
<span>144人</span>
<span>兴隆圆医院</span>
</div>
<div class="physical-item">
<span>144人</span>
<span>延安</span>
</div>
</div>
<div class="physical-item">
<span>344人</span>
<span>兴隆圆医院</span>
</div>
<div class="physical-item">
<span>144人</span>
<span>兴隆圆医院</span>
</div>
<div class="physical-item">
<span>144人</span>
<span>兴隆圆医院</span>
</div>
<div class="physical-item">
<span>144人</span>
<span>延安</span>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import PublicTitle from "../publicTitle.vue";
const typeTime = ref([
{
name:'全部',
value:'all',
},{
name:'本年',
value:'year',
},
{
name:'本月',
value:'month',
},
{
name:'本周',
value:'week',
}
])
const physical = ref();
const selectIndex = ref(0)
function handleSelect(index:number){
selectIndex.value = index;
}
import { ref } from 'vue';
import PublicTitle from '../publicTitle.vue';
const typeTime = ref([
{
name: '全部',
value: 'all',
},
{
name: '本年',
value: 'year',
},
{
name: '本月',
value: 'month',
},
{
name: '本周',
value: 'week',
},
]);
const physical = ref();
const selectIndex = ref(0);
function handleSelect(index: number) {
selectIndex.value = index;
}
</script>
<style scoped lang="less">
.inner {
height: calc(100% - 40px);
.physical-container{
width: 96%;
height: 92%;
padding-top: 2%;
display: flex;
flex-wrap: wrap;
align-content: space-around;
.physical-item{
width: 33%;
height: 46%;
color: #FFFFFF;
display: flex;
flex-direction: column;
span:nth-child(1){
font-size: 22px;
font-weight: bold;
.inner {
height: calc(100% - 40px);
.physical-container {
width: 96%;
height: 92%;
padding-top: 2%;
display: flex;
flex-wrap: wrap;
align-content: space-around;
.physical-item {
width: 33%;
height: 46%;
color: #ffffff;
display: flex;
flex-direction: column;
span:nth-child(1) {
font-size: 22px;
font-weight: bold;
}
span:nth-child(2) {
font-size: 16px;
}
}
.physical-item:nth-child(1),
.physical-item:nth-child(2),
.physical-item:nth-child(3) {
background: url('../../assets/images/physical-top.png') no-repeat;
background-size: 100% 100%;
}
.physical-item:nth-child(4),
.physical-item:nth-child(5),
.physical-item:nth-child(6) {
background: url('../../assets/images/physical-bottom.png') no-repeat;
background-size: 100% 100%;
}
}
span:nth-child(2){
font-size: 16px;
}
}
.physical-item:nth-child(1),.physical-item:nth-child(2),.physical-item:nth-child(3){
background: url("../../assets/images/physical-top.png") no-repeat;
background-size: 100% 100%;
}
.physical-item:nth-child(4),.physical-item:nth-child(5),.physical-item:nth-child(6){
background: url("../../assets/images/physical-bottom.png") no-repeat;
background-size: 100% 100%;
}
}
}
</style>
</style>