kubbo/dvcp_v2_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

郫都大屏

Browse Source
This commit is contained in:
yanran200730
2022-08-10 14:54:14 +08:00
parent bd228bcd91
commit 1c41f96f04
1 changed files with 31 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
project/dv/apps/components/PdGrid.vue
View File

@@ -17,20 +17,23 @@
<p>微网格</p>
</div>
</div>
<div class="grid-dialog" v-show="isShowGrid1">
<div class="mask"></div>
<div class="grid-container">
<h2>已选择的网格</h2>
<div class="grid-list">
<div
:class="[currIndex1 === index ? 'grid-active' : '']"
v-for="(item, index) in 20"
:key="index">
幸福郫都微网实格架构
<transition name="fade">
<div class="grid-dialog" v-show="isShowGrid1">
<div class="mask"></div>
<div class="grid-container">
<h2>已选择的网格</h2>
<div class="grid-list">
<div
:class="[currIndex1 === index ? 'grid-active' : '']"
v-for="(item, index) in 20"
:key="index"
@click.stop="currIndex1 = index">
幸福郫都微网实格架构
</div>
</div>
</div>
</div>
</div>
</div>
</transition>
</div>
</template>
@@ -40,7 +43,8 @@
data () {
return {
isShowGrid1: false
isShowGrid1: false,
currIndex1: 0
}
}
}
@@ -56,6 +60,13 @@
background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/middle-bg.png) no-repeat center;
background-size: contain;
.fade-enter-active, .fade-leave-active {
transition: opacity .3s ease-in-out;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
* {
box-sizing: border-box;
}
@@ -186,12 +197,19 @@
text-align: center;
color: #FFFFFF;
font-size: 27px;
transition: all ease 0.3s;
&.grid-active {
background: linear-gradient(270deg, rgba(0,48,124,0) 0%, #00307C 16%, rgba(0,99,255,0.9100) 50%, rgba(0,48,124,0.8200) 87%, rgba(0,48,124,0) 100%);
box-shadow: inset 0px -1px 0px 0px rgba(16,34,54,1);
text-shadow: 0px 3px 5px rgba(0,0,0,0.5000);
}
&:hover {
background: linear-gradient(270deg, rgba(0,48,124,0) 0%, #00307C 16%, rgba(0,99,255,0.9100) 50%, rgba(0,48,124,0.8200) 87%, rgba(0,48,124,0) 100%);
box-shadow: inset 0px -1px 0px 0px rgba(16,34,54,1);
text-shadow: 0px 3px 5px rgba(0,0,0,0.5000);
}
}
}
}