chenrui
2 years ago
10 changed files with 318 additions and 31 deletions
@ -0,0 +1,193 @@ |
|||||
|
<template> |
||||
|
<div class="home app_content"> |
||||
|
<!-- 中间 --> |
||||
|
<!-- <div class="warp_body">--> |
||||
|
<!-- <div class="white-body">--> |
||||
|
<!-- <div class="tabs">--> |
||||
|
<!-- <ul>--> |
||||
|
<!-- <li v-for='(item,index) in data.list' @click='check(index)'--> |
||||
|
<!-- :class="{ active: index === data.TabId }">--> |
||||
|
<!-- <span v-if="index === 0"> {{item.title}}</span>--> |
||||
|
<!-- <span v-else-if="index === 1" class="warn-tab"> {{item.title}}</span>--> |
||||
|
<!-- </li>--> |
||||
|
<!-- </ul>--> |
||||
|
<!-- </div>--> |
||||
|
<!-- <div v-if="data.TabId == 0">--> |
||||
|
<!-- <enterpriseInspectionList isReg="0"></enterpriseInspectionList>--> |
||||
|
<!-- </div>--> |
||||
|
<!-- <div v-if="data.TabId == 1">--> |
||||
|
<!-- <enterpriseInspectionList isReg="1"></enterpriseInspectionList>--> |
||||
|
<!-- </div>--> |
||||
|
<!-- </div>--> |
||||
|
<!-- </div>--> |
||||
|
|
||||
|
<van-tabs v-model:active="active" sticky @click-tab="onClickTab"> |
||||
|
<van-tab v-for="(item, index) in data.list" :title="item.title"> |
||||
|
<div v-if="data.TabId == 0" style="height: calc(100vh - 1.5rem);"> |
||||
|
<appointmentList :isReg="0" /> |
||||
|
</div> |
||||
|
<div v-if="data.TabId == 1" style="height: calc(100vh - 1.5rem);"> |
||||
|
<appointmentList :isReg="1" /> |
||||
|
</div> |
||||
|
</van-tab> |
||||
|
</van-tabs> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup name="complaintBase"> |
||||
|
import appointmentList from '@/views/administrative/appointmentList.vue'; |
||||
|
|
||||
|
|
||||
|
const {useCommon} = $globalStore; |
||||
|
//路由参数 |
||||
|
const router = useRouter(); |
||||
|
const route = useRoute(); |
||||
|
//tab切换 |
||||
|
const active = ref(0); |
||||
|
const data = reactive({ |
||||
|
status: 0, |
||||
|
TabId: 0, |
||||
|
list: [ |
||||
|
{ |
||||
|
title: '实时检查预告', |
||||
|
value: '0' |
||||
|
}, |
||||
|
{ |
||||
|
title: '历史预告记录', |
||||
|
value: '1' |
||||
|
}, |
||||
|
], |
||||
|
}); |
||||
|
|
||||
|
const onClickTab = ({ title }) => { |
||||
|
if(title == '实时检查预告'){ |
||||
|
data.TabId = 0; |
||||
|
}else{ |
||||
|
data.TabId = 1; |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
|
||||
|
onMounted(() => { |
||||
|
|
||||
|
}) |
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<style lang="less" scoped> |
||||
|
.home { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
height: 100%; |
||||
|
overflow: hidden; |
||||
|
background-color: #ebf3fb; |
||||
|
|
||||
|
.warp_body { |
||||
|
position: relative; |
||||
|
background-image: linear-gradient(to bottom, #ebf3fb, transparent); |
||||
|
} |
||||
|
|
||||
|
.white-body { |
||||
|
margin: 0 3%; |
||||
|
width: 94%; |
||||
|
height: 99%; |
||||
|
background-color: #fff; |
||||
|
border-radius: 0.27rem; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.tohome { |
||||
|
position: absolute; |
||||
|
top: 1.25%; |
||||
|
right: 5%; |
||||
|
font-size: 0.5rem; |
||||
|
} |
||||
|
|
||||
|
.tabs { |
||||
|
padding: 3% 3% 0; |
||||
|
width: 94%; |
||||
|
height: 1.25rem; |
||||
|
box-sizing: content-box; |
||||
|
} |
||||
|
|
||||
|
.tabs ul { |
||||
|
display: flex; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
font-size: 0.4rem; |
||||
|
line-height: 1.25rem; |
||||
|
text-align: center; |
||||
|
align-content: center; |
||||
|
justify-items: center; |
||||
|
} |
||||
|
|
||||
|
.tabs ul li { |
||||
|
float: left; |
||||
|
width: 50%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
.tabs ul li span { |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
color: #4aa1f9; |
||||
|
background: url("src/assets/images/tab_bg1_1.png") no-repeat; |
||||
|
background-size: 100% 100%; |
||||
|
} |
||||
|
|
||||
|
.tabs ul li.active span { |
||||
|
background: url("src/assets/images/tab_bg1.png") no-repeat; |
||||
|
background-size: 100% 100%; |
||||
|
color: #fff; |
||||
|
} |
||||
|
|
||||
|
.tabs ul li span.warn-tab { |
||||
|
margin-left: -2%; |
||||
|
background: url("src/assets/images/tab_bg.png") no-repeat; |
||||
|
background-size: 100% 100%; |
||||
|
} |
||||
|
|
||||
|
.tabs ul li.active span.warn-tab { |
||||
|
background: url("src/assets/images/tab_bg_1.png") no-repeat; |
||||
|
background-size: 100% 100%; |
||||
|
color: #fff; |
||||
|
} |
||||
|
|
||||
|
.tabs ul li span.level1 { |
||||
|
background: url("src/assets/images/tab_shine_red.gif") no-repeat !important; |
||||
|
background-size: 100% 100% !important; |
||||
|
color: #fff !important; |
||||
|
} |
||||
|
|
||||
|
.tabs ul li span.level2 { |
||||
|
background: url("src/assets/images/tab_shine_org.gif") no-repeat !important; |
||||
|
background-size: 100% 100% !important; |
||||
|
color: #fff !important; |
||||
|
} |
||||
|
|
||||
|
.tabs ul li span.level3 { |
||||
|
background: url("src/assets/images/tab_shine_yel.gif") no-repeat !important; |
||||
|
background-size: 100% 100% !important; |
||||
|
color: #fff !important; |
||||
|
} |
||||
|
|
||||
|
.addinfo { |
||||
|
position: absolute; |
||||
|
bottom: 3%; |
||||
|
right: 2%; |
||||
|
z-index: 99999; |
||||
|
width: 1.5rem; |
||||
|
height: 1.5rem; |
||||
|
background-color: #1367fe; |
||||
|
border-radius: 50%; |
||||
|
box-shadow: 0 0 0.27rem #1367fe; |
||||
|
color: #fff; |
||||
|
font-size: 0.4rem; |
||||
|
text-align: center; |
||||
|
vertical-align: middle; |
||||
|
padding-top: 0.45rem; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
</style> |
||||
Loading…
Reference in new issue