admin/zhgdyun
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

湖里大屏(数字工地)：新增切换 tab 逻辑

Browse Source
This commit is contained in:
Jack 2022-08-15 15:47:08 +08:00
parent 046e6218a6
commit f134a239d0
2 changed files with 13 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/views/projectAdmin/jlw/assets/images/digitalSite/bg-all.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.0 MiB

After

Width:  |  Height:  |  Size: 1.1 MiB

16
src/views/projectAdmin/jlw/digitalSite/centerTop.vue
View File

@ -1,8 +1,12 @@
<template> <template>
<Card :title="title"> <Card :title="title">
<div class="pane"></div> <div class="pane">
<div class="point "></div>
</div>
<div class="tabs"> <div class="tabs">
<div class="tab" :class="{ checked: tab === '全部' }" v-for="tab in tabs" :key="tab">{{ tab }}</div> <div class="tab" :class="{ checked: index === tabIndex }" v-for="(tab, index) in tabs" :key="index" @click="changeTab(index)">
{{ tab }}
</div>
</div> </div>
</Card> </Card>
</template> </template>
@ -20,8 +24,14 @@ export default {
}, },
data() { data() {
return { return {
tabIndex: 0,
tabs: ['全部', '塔机监测', '升降机监测', '视频监测', '环境监测', '人脸闸机'] tabs: ['全部', '塔机监测', '升降机监测', '视频监测', '环境监测', '人脸闸机']
} }
},
methods: {
changeTab(index) {
this.tabIndex = index
}
} }
} }
</script> </script>
@ -30,7 +40,7 @@ export default {
.pane { .pane {
margin: 0 20px; margin: 0 20px;
height: 80%; height: 80%;
background: url('~@/views/projectAdmin/dataBoard/projectHuScreen/assets/images/digitalSite/bg-all.png') no-repeat; background: url('~@/views/projectAdmin/jlw/assets/images/digitalSite/bg-all.png') no-repeat;
background-size: 100%; background-size: 100%;
} }
.tabs { .tabs {