Compare commits
3 Commits
7e75022a1b
...
86a1a27cfe
| Author | SHA1 | Date |
|---|---|---|
 lixiaobang
|
86a1a27cfe | |
|
lixiaobang
|
2bde3d8cc1 | |
|
lixiaobang
|
b873ad0b97 |
|
|
@ -48,6 +48,7 @@ export default {
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
/* text-align: center; */
|
/* text-align: center; */
|
||||||
background: #040f26;
|
background: #040f26;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
body{
|
body{
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 636 B |
Binary file not shown.
|
After Width: | Height: | Size: 672 B |
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 643 B |
|
|
@ -24,10 +24,15 @@ export default new Router({
|
||||||
name: 'index',
|
name: 'index',
|
||||||
component: () => import ('./view/index.vue')
|
component: () => import ('./view/index.vue')
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/equipmentAssets',
|
||||||
|
name: 'equipmentAssets',
|
||||||
|
component: () => import ('./view/equipmentAssets.vue')
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/smartPage',
|
path: '/smartPage',
|
||||||
name: 'smartPage',
|
name: 'smartPage',
|
||||||
component: () => import ('./view/smartPage.vue')
|
component: () => import ('./view/smartPage.vue')
|
||||||
},
|
}
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,573 @@
|
||||||
|
<template>
|
||||||
|
<div class="equipmentAssets">
|
||||||
|
<transition name="left">
|
||||||
|
<div class="assetsLeft" v-show="menuShow">
|
||||||
|
<div class="btnLeft">
|
||||||
|
<div
|
||||||
|
v-for="(item, index) in menusArr"
|
||||||
|
:key="index"
|
||||||
|
:style="{
|
||||||
|
backgroundImage:
|
||||||
|
btnAc != index
|
||||||
|
? 'url(' + btnBG.pic + ')'
|
||||||
|
: 'url(' + btnBG.actPic + ')',
|
||||||
|
marginLeft: btnAc == index ? '15px' : '0px',
|
||||||
|
}"
|
||||||
|
class="btnList"
|
||||||
|
@click="handelBtn(index)"
|
||||||
|
>
|
||||||
|
<div class="textArr">
|
||||||
|
<p :text="item.text">{{ item.text }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<img
|
||||||
|
src="../assets/images/shebeijiantou.png"
|
||||||
|
class="jiantou"
|
||||||
|
@click="menuHandel"
|
||||||
|
v-show="arrow"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
|
<transition name="right">
|
||||||
|
<div class="assetsRight" v-show="menuShow">
|
||||||
|
<div class="rightOne" v-if="btnAc == 0">
|
||||||
|
<div class="assetsTitle">
|
||||||
|
<p text="设备名称" style="font-family: 'maleGod'">设备名称</p>
|
||||||
|
</div>
|
||||||
|
<div class="asstesContent1">
|
||||||
|
<div class="models">
|
||||||
|
<div class="assetsStatus">
|
||||||
|
<p style="margin-left: 15px">正常</p>
|
||||||
|
</div>
|
||||||
|
<div class="modelsImg">
|
||||||
|
<img src="@/assets/images/shebeimoxing.png" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="modelIntroduction">
|
||||||
|
{{ modelIntroduction }}
|
||||||
|
</div>
|
||||||
|
<div class="assetsList">
|
||||||
|
<div
|
||||||
|
v-for="(item, index) in assetsList"
|
||||||
|
:key="index"
|
||||||
|
class="assetsArr"
|
||||||
|
>
|
||||||
|
<div class="listContent">
|
||||||
|
<div>{{ item.name }}</div>
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
font-family: 'maleGod';
|
||||||
|
color: rgb(76, 181, 209);
|
||||||
|
font-size: 20px;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
{{ item.count }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rightOne" v-if="btnAc == 1">
|
||||||
|
<div class="assetsTitle">
|
||||||
|
<p text="设备名称" style="font-family: 'maleGod'">设备名称二</p>
|
||||||
|
</div>
|
||||||
|
<div class="asstesContent1">
|
||||||
|
<div class="models">
|
||||||
|
<div class="assetsStatus">
|
||||||
|
<p style="margin-left: 15px">正常</p>
|
||||||
|
</div>
|
||||||
|
<div class="modelsImg">
|
||||||
|
<img src="@/assets/images/shebeimoxing.png" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="modelIntroduction">
|
||||||
|
{{ modelIntroduction }}
|
||||||
|
</div>
|
||||||
|
<div class="assetsList">
|
||||||
|
<div
|
||||||
|
v-for="(item, index) in assetsList"
|
||||||
|
:key="index"
|
||||||
|
class="assetsArr"
|
||||||
|
>
|
||||||
|
<div class="listContent">
|
||||||
|
<div>{{ item.name }}</div>
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
font-family: 'maleGod';
|
||||||
|
color: rgb(76, 181, 209);
|
||||||
|
font-size: 20px;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
{{ item.count }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rightOne" v-if="btnAc == 2">
|
||||||
|
<div class="assetsTitle">
|
||||||
|
<p text="设备名称" style="font-family: 'maleGod'">设备名称三</p>
|
||||||
|
</div>
|
||||||
|
<div class="asstesContent1">
|
||||||
|
<div class="models">
|
||||||
|
<div class="assetsStatus">
|
||||||
|
<p style="margin-left: 15px">正常</p>
|
||||||
|
</div>
|
||||||
|
<div class="modelsImg">
|
||||||
|
<img src="@/assets/images/shebeimoxing.png" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="modelIntroduction">
|
||||||
|
{{ modelIntroduction }}
|
||||||
|
</div>
|
||||||
|
<div class="assetsList">
|
||||||
|
<div
|
||||||
|
v-for="(item, index) in assetsList"
|
||||||
|
:key="index"
|
||||||
|
class="assetsArr"
|
||||||
|
>
|
||||||
|
<div class="listContent">
|
||||||
|
<div>{{ item.name }}</div>
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
font-family: 'maleGod';
|
||||||
|
color: rgb(76, 181, 209);
|
||||||
|
font-size: 20px;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
{{ item.count }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rightOne" v-if="btnAc == 3">
|
||||||
|
<div class="assetsTitle">
|
||||||
|
<p text="设备名称" style="font-family: 'maleGod'">设备名称四</p>
|
||||||
|
</div>
|
||||||
|
<div class="asstesContent1">
|
||||||
|
<div class="models">
|
||||||
|
<div class="assetsStatus">
|
||||||
|
<p style="margin-left: 15px">正常</p>
|
||||||
|
</div>
|
||||||
|
<div class="modelsImg">
|
||||||
|
<img src="@/assets/images/shebeimoxing.png" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="modelIntroduction">
|
||||||
|
{{ modelIntroduction }}
|
||||||
|
</div>
|
||||||
|
<div class="assetsList">
|
||||||
|
<div
|
||||||
|
v-for="(item, index) in assetsList"
|
||||||
|
:key="index"
|
||||||
|
class="assetsArr"
|
||||||
|
>
|
||||||
|
<div class="listContent">
|
||||||
|
<div>{{ item.name }}</div>
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
font-family: 'maleGod';
|
||||||
|
color: rgb(76, 181, 209);
|
||||||
|
font-size: 20px;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
{{ item.count }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rightOne" v-if="btnAc == 4">
|
||||||
|
<div class="assetsTitle">
|
||||||
|
<p text="设备名称" style="font-family: 'maleGod'">设备名称五</p>
|
||||||
|
</div>
|
||||||
|
<div class="asstesContent1">
|
||||||
|
<div class="models">
|
||||||
|
<div class="assetsStatus">
|
||||||
|
<p style="margin-left: 15px">正常</p>
|
||||||
|
</div>
|
||||||
|
<div class="modelsImg">
|
||||||
|
<img src="@/assets/images/shebeimoxing.png" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="modelIntroduction">
|
||||||
|
{{ modelIntroduction }}
|
||||||
|
</div>
|
||||||
|
<div class="assetsList">
|
||||||
|
<div
|
||||||
|
v-for="(item, index) in assetsList"
|
||||||
|
:key="index"
|
||||||
|
class="assetsArr"
|
||||||
|
>
|
||||||
|
<div class="listContent">
|
||||||
|
<div>{{ item.name }}</div>
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
font-family: 'maleGod';
|
||||||
|
color: rgb(76, 181, 209);
|
||||||
|
font-size: 20px;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
{{ item.count }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rightOne" v-if="btnAc == 5">
|
||||||
|
<div class="assetsTitle">
|
||||||
|
<p text="设备名称" style="font-family: 'maleGod'">设备名称六</p>
|
||||||
|
</div>
|
||||||
|
<div class="asstesContent1">
|
||||||
|
<div class="models">
|
||||||
|
<div class="assetsStatus">
|
||||||
|
<p style="margin-left: 15px">正常</p>
|
||||||
|
</div>
|
||||||
|
<div class="modelsImg">
|
||||||
|
<img src="@/assets/images/shebeimoxing.png" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="modelIntroduction">
|
||||||
|
{{ modelIntroduction }}
|
||||||
|
</div>
|
||||||
|
<div class="assetsList">
|
||||||
|
<div
|
||||||
|
v-for="(item, index) in assetsList"
|
||||||
|
:key="index"
|
||||||
|
class="assetsArr"
|
||||||
|
>
|
||||||
|
<div class="listContent">
|
||||||
|
<div>{{ item.name }}</div>
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
font-family: 'maleGod';
|
||||||
|
color: rgb(76, 181, 209);
|
||||||
|
font-size: 20px;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
{{ item.count }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
|
<img
|
||||||
|
src="../assets/images/shebeijiantoufan.png"
|
||||||
|
class="jiantoufan"
|
||||||
|
@click="menuHandelShow"
|
||||||
|
v-show="!arrow"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// import index from "./index.vue";
|
||||||
|
export default {
|
||||||
|
// components: { index },
|
||||||
|
name: "equipmentAssets",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
arrow: false, //箭头隐藏
|
||||||
|
menuShow: false, //菜单隐藏动画
|
||||||
|
modelIntroduction: `具有自助交电费、查询账单、
|
||||||
|
打印发票以及智能管理功能，具备24小时无人值守的自助服务特性，
|
||||||
|
最大限度拓宽业务办理渠道、业务场所及最大限度拓宽业务办理渠道、业务场所及最大程度
|
||||||
|
的人性化服务。`, //模型介绍
|
||||||
|
btnAc: 0,
|
||||||
|
btnBG: {
|
||||||
|
pic: require("@/assets/images/assetsBtn.png"),
|
||||||
|
actPic: require("@/assets/images/assetsBtnAc.png"),
|
||||||
|
},
|
||||||
|
menusArr: [
|
||||||
|
{
|
||||||
|
text: "设备名称一",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: "设备名称二",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: "设备名称三",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: "设备名称四",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: "设备名称五",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: "设备名称六",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
assetsList: [
|
||||||
|
{
|
||||||
|
name: "当日业务量(个)：",
|
||||||
|
count: "24",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "当日平均办理时间(分钟)：",
|
||||||
|
count: "26",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "当日最长办理时间(分钟)：",
|
||||||
|
count: "68",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "当日最长等待时间(分钟)：",
|
||||||
|
count: "23",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "平均等待时间(分钟)：",
|
||||||
|
count: "17",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handelBtn(index) {
|
||||||
|
this.btnAc = index;
|
||||||
|
},
|
||||||
|
//隐藏菜单按钮
|
||||||
|
menuHandel() {
|
||||||
|
let that = this;
|
||||||
|
this.menuShow = false;
|
||||||
|
window.setTimeout(() => {
|
||||||
|
that.arrow = false;
|
||||||
|
}, 1000);
|
||||||
|
},
|
||||||
|
//显示菜单按钮
|
||||||
|
menuHandelShow() {
|
||||||
|
this.arrow = true;
|
||||||
|
this.menuShow = true;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.equipmentAssets {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
.assetsLeft {
|
||||||
|
width: 15.5%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
background: url("../assets/images/assetsLeft.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
.btnLeft {
|
||||||
|
height: 60%;
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 18%;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
.btnList {
|
||||||
|
width: 224px;
|
||||||
|
height: 50px;
|
||||||
|
.textArr {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
.textArr ::before {
|
||||||
|
content: attr(text);
|
||||||
|
position: absolute;
|
||||||
|
z-index: 10;
|
||||||
|
// bottom: 0;
|
||||||
|
color: rgb(163, 227, 245);
|
||||||
|
-webkit-mask: linear-gradient(
|
||||||
|
to top,
|
||||||
|
rgba(163, 227, 245, 0.7),
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.jiantou {
|
||||||
|
position: absolute;
|
||||||
|
width: 14px;
|
||||||
|
height: 29px;
|
||||||
|
top: 48%;
|
||||||
|
right: 3%;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.assetsRight {
|
||||||
|
width: 20.6%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
.rightOne {
|
||||||
|
position: absolute;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
background: url("../assets/images/assetsRight.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
.assetsTitle {
|
||||||
|
color: #ffffff;
|
||||||
|
height: 5.5%;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
padding-left: 10%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.assetsTitle ::before {
|
||||||
|
content: attr(text);
|
||||||
|
position: absolute;
|
||||||
|
z-index: 10;
|
||||||
|
color: rgb(135, 216, 238);
|
||||||
|
-webkit-mask: linear-gradient(
|
||||||
|
to top,
|
||||||
|
rgba(163, 227, 245, 0.7),
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
}
|
||||||
|
.asstesContent1 {
|
||||||
|
height: calc(100% - 5.5%);
|
||||||
|
width: 100%;
|
||||||
|
padding: 0% 3%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
.models {
|
||||||
|
width: 100%;
|
||||||
|
height: 50.5%;
|
||||||
|
background: url("../assets/images/assets1.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
.assetsStatus {
|
||||||
|
width: 81px;
|
||||||
|
height: 31px;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
background: url("../assets/images/zhuangtaikuang.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
color: chartreuse;
|
||||||
|
font-size: 15px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.modelsImg {
|
||||||
|
width: 41%;
|
||||||
|
height: 90%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.modelIntroduction {
|
||||||
|
height: 18%;
|
||||||
|
color: #ffffff;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
text-align: justify;
|
||||||
|
text-indent: 30px;
|
||||||
|
margin-top: 10px;
|
||||||
|
line-height: 30px;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
.modelIntroduction::-webkit-scrollbar {
|
||||||
|
width: 0 !important;
|
||||||
|
}
|
||||||
|
.assetsList {
|
||||||
|
height: calc(100% - 70.5%);
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-content: space-between;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
overflow-y: auto;
|
||||||
|
.assetsArr {
|
||||||
|
background: url("../assets/images/assetsArr.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
width: 100%;
|
||||||
|
height: 16%;
|
||||||
|
.listContent {
|
||||||
|
margin-left: 10%;
|
||||||
|
width: 80%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.assetsList::-webkit-scrollbar {
|
||||||
|
width: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//箭头
|
||||||
|
.jiantoufan {
|
||||||
|
position: absolute;
|
||||||
|
width: 14px;
|
||||||
|
height: 29px;
|
||||||
|
top: 48%;
|
||||||
|
left: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//left动画
|
||||||
|
@keyframes donghua1 {
|
||||||
|
from {
|
||||||
|
transform: translateX(0%);
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
transform: translateX(-100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.left-leave,
|
||||||
|
.left-leave-active,
|
||||||
|
.left-leave-to {
|
||||||
|
animation: donghua1 1s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-enter,
|
||||||
|
.left-enter-active,
|
||||||
|
.left-enter-to {
|
||||||
|
animation: donghua1 1s linear reverse;
|
||||||
|
}
|
||||||
|
//right动画
|
||||||
|
@keyframes donghua2 {
|
||||||
|
from {
|
||||||
|
transform: translateX(0%);
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
transform: translateX(100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.right-leave,
|
||||||
|
.right-leave-active,
|
||||||
|
.right-leave-to {
|
||||||
|
animation: donghua2 1s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-enter,
|
||||||
|
.right-enter-active,
|
||||||
|
.right-enter-to {
|
||||||
|
animation: donghua2 1s linear reverse;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,7 +1,8 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<!-- 左边的内容 -->
|
<!-- 左边的内容 -->
|
||||||
<div class="left-content">
|
<transition name="left">
|
||||||
|
<div class="left-content" v-show="menuShow">
|
||||||
<!-- 营业临厅时长 -->
|
<!-- 营业临厅时长 -->
|
||||||
<div class="business-hall">
|
<div class="business-hall">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
|
|
@ -85,8 +86,10 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</transition>
|
||||||
<!-- 右边的内容 -->
|
<!-- 右边的内容 -->
|
||||||
<div class="right-content">
|
<transition name="right">
|
||||||
|
<div class="right-content" v-show="menuShow">
|
||||||
<!-- 缴费情况 -->
|
<!-- 缴费情况 -->
|
||||||
<div class="payment">
|
<div class="payment">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
|
|
@ -193,6 +196,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</transition>
|
||||||
<div class="middle-content">
|
<div class="middle-content">
|
||||||
<!-- 内容头部 -->
|
<!-- 内容头部 -->
|
||||||
<div class="middleTop">
|
<div class="middleTop">
|
||||||
|
|
@ -204,25 +208,29 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="middleBottom">
|
<div class="middleBottom">
|
||||||
|
<div class="menuBtn" :class="{'menuBtn1' : menuAc == index}" v-for="(item,index) in menu" :key="index" @click="handelBtn(index)">
|
||||||
<div class="menuBtn" :class="{ 'menuBtn1': menuAc == index }" v-for="(item, index) in menu" :key="index"
|
<img :src="menuAc != index ? item.icon : item.iconAc"/>
|
||||||
@click="handelBtn(index)">
|
|
||||||
<img :src="item.icon" />
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="middleBottomIcon">
|
<div class="middleBottomIcon">
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<equipment-assets ref="equimentAssets" class="equimentAssets" v-show="equimentAssetsShow"/>
|
||||||
|
<smartPage ref="smartPage" class="smartPage" v-show="smartPageShow"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import equipmentAssets from "./equipmentAssets.vue";
|
||||||
|
import smartPage from "./smartPage.vue";
|
||||||
export default {
|
export default {
|
||||||
name: "index",
|
name: "index",
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
menuShow: true, //菜单显示
|
||||||
|
equimentAssetsShow: false, //设备资产
|
||||||
|
smartPageShow: false, //智慧
|
||||||
hallList: [
|
hallList: [
|
||||||
{
|
{
|
||||||
font: "平均办理时长",
|
font: "平均办理时长",
|
||||||
|
|
@ -353,37 +361,41 @@ export default {
|
||||||
// 内容头部
|
// 内容头部
|
||||||
middleTopList: [
|
middleTopList: [
|
||||||
{
|
{
|
||||||
name: '工单总数',
|
name: "工单总数",
|
||||||
num: 1311
|
num: 1311,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '已归档',
|
name: "已归档",
|
||||||
num: 1076
|
num: 1076,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '代办工单',
|
name: "代办工单",
|
||||||
num: 24
|
num: 24,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '预受理信息预警',
|
name: "预受理信息预警",
|
||||||
num: 0
|
num: 0,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '柜台状态',
|
name: "柜台状态",
|
||||||
num: '在线'
|
num: "在线",
|
||||||
}
|
},
|
||||||
],
|
],
|
||||||
menu: [
|
menu: [
|
||||||
{
|
{
|
||||||
icon: require("@/assets/images/zongti.png")
|
icon: require("@/assets/images/zongti.png"),
|
||||||
|
iconAc: require("@/assets/images/zongtiAc.png"),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: require("@/assets/images/zhihui.png")
|
icon: require("@/assets/images/zhihui.png"),
|
||||||
|
iconAc: require("@/assets/images/zhihuiAc.png"),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: require("@/assets/images/shebei.png")
|
icon: require("@/assets/images/shebei.png"),
|
||||||
}
|
iconAc: require("@/assets/images/shebeiAc.png"),
|
||||||
]
|
},
|
||||||
|
],
|
||||||
|
menuAc: 0,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
|
@ -393,26 +405,59 @@ export default {
|
||||||
|
|
||||||
this.drawHallChart();
|
this.drawHallChart();
|
||||||
this.drawFlowChart();
|
this.drawFlowChart();
|
||||||
this.handelBtn(0)
|
this.handelBtn(0);
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
//菜单切换
|
//菜单切换
|
||||||
handelBtn(index) {
|
handelBtn(index) {
|
||||||
this.menuAc = index
|
this.menuAc = index;
|
||||||
|
let that = this;
|
||||||
if (index == 0) {
|
if (index == 0) {
|
||||||
this.menu[0].icon = require("@/assets/images/zongtiAc.png")
|
//如果当前页面为设备资产
|
||||||
this.menu[1].icon = require("@/assets/images/zhihui.png")
|
if (this.equimentAssetsShow == true) {
|
||||||
this.menu[2].icon = require("@/assets/images/shebei.png")
|
this.$refs.equimentAssets.menuHandel();
|
||||||
} else if (index == 1) {
|
window.setTimeout(() => {
|
||||||
this.menu[0].icon = require("@/assets/images/zongti.png")
|
that.equimentAssetsShow = false;
|
||||||
this.menu[1].icon = require("@/assets/images/zhihuiAc.png")
|
that.menuShow = true;
|
||||||
this.menu[2].icon = require("@/assets/images/shebei.png")
|
}, 1500);
|
||||||
} else if (index == 2) {
|
} else if (this.smartPageShow == true) {
|
||||||
this.menu[0].icon = require("@/assets/images/zongti.png")
|
this.$refs.smartPage.menuShow1();
|
||||||
this.menu[1].icon = require("@/assets/images/zhihui.png")
|
window.setTimeout(() => {
|
||||||
this.menu[2].icon = require("@/assets/images/shebeiAc.png")
|
that.smartPageShow = false;
|
||||||
|
that.menuShow = true;
|
||||||
|
}, 1500);
|
||||||
|
}
|
||||||
|
} else if (index == 1) {
|
||||||
|
if (this.menuShow == true) {
|
||||||
|
this.menuShow = false;
|
||||||
|
window.setTimeout(() => {
|
||||||
|
that.smartPageShow = true;
|
||||||
|
that.$refs.smartPage.handleShow();
|
||||||
|
}, 1500);
|
||||||
|
} else if (this.equimentAssetsShow == true) {
|
||||||
|
this.$refs.equimentAssets.menuHandel();
|
||||||
|
window.setTimeout(() => {
|
||||||
|
that.equimentAssetsShow = false;
|
||||||
|
that.smartPageShow = true;
|
||||||
|
this.$refs.smartPage.handleShow();
|
||||||
|
}, 1500);
|
||||||
|
}
|
||||||
|
} else if (index == 2) {
|
||||||
|
if (this.menuShow == true) {
|
||||||
|
this.menuShow = false;
|
||||||
|
window.setTimeout(() => {
|
||||||
|
that.equimentAssetsShow = true;
|
||||||
|
that.$refs.equimentAssets.menuHandelShow();
|
||||||
|
}, 1500);
|
||||||
|
} else if (this.smartPageShow == true) {
|
||||||
|
this.$refs.smartPage.menuShow1();
|
||||||
|
window.setTimeout(() => {
|
||||||
|
that.smartPageShow = false;
|
||||||
|
that.equimentAssetsShow = true;
|
||||||
|
that.$refs.equimentAssets.menuHandelShow();
|
||||||
|
}, 1500);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
drawHallChart() {
|
drawHallChart() {
|
||||||
let myChart = this.$echarts.getInstanceByDom(this.$refs.hallChart);
|
let myChart = this.$echarts.getInstanceByDom(this.$refs.hallChart);
|
||||||
|
|
@ -1593,6 +1638,10 @@ export default {
|
||||||
this.serviceTypeActive = index;
|
this.serviceTypeActive = index;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
components: {
|
||||||
|
equipmentAssets,
|
||||||
|
smartPage,
|
||||||
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
@ -1603,6 +1652,7 @@ export default {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
|
z-index: 100;
|
||||||
}
|
}
|
||||||
|
|
||||||
.left-content,
|
.left-content,
|
||||||
|
|
@ -1634,12 +1684,12 @@ export default {
|
||||||
|
|
||||||
.menuBtn {
|
.menuBtn {
|
||||||
width: 142px;
|
width: 142px;
|
||||||
height: 52px
|
height: 52px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menuBtn1 {
|
.menuBtn1 {
|
||||||
width: 188px;
|
width: 188px;
|
||||||
height: 74px
|
height: 74px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1647,7 +1697,7 @@ export default {
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
width: 1115px;
|
width: 1115px;
|
||||||
height: 57px;
|
height: 57px;
|
||||||
background: url('../assets/images/menubottom.png') no-repeat;
|
background: url("../assets/images/menubottom.png") no-repeat;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: -37px;
|
bottom: -37px;
|
||||||
|
|
@ -1690,7 +1740,6 @@ export default {
|
||||||
width: 102px;
|
width: 102px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.span0 {
|
.span0 {
|
||||||
|
|
@ -1722,10 +1771,7 @@ export default {
|
||||||
height: 16px;
|
height: 16px;
|
||||||
margin-left: 7px;
|
margin-left: 7px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.chart-title {
|
.chart-title {
|
||||||
|
|
@ -1751,10 +1797,13 @@ export default {
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
color: rgb(163, 227, 245);
|
color: rgb(163, 227, 245);
|
||||||
-webkit-mask: linear-gradient(to top, rgba(163, 227, 245, 0.7), transparent);
|
-webkit-mask: linear-gradient(
|
||||||
|
to top,
|
||||||
|
rgba(163, 227, 245, 0.7),
|
||||||
|
transparent
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.hall-box .item {
|
.hall-box .item {
|
||||||
width: 48.5%;
|
width: 48.5%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
@ -1772,7 +1821,7 @@ export default {
|
||||||
|
|
||||||
.hall-time1,
|
.hall-time1,
|
||||||
.hall-time0 {
|
.hall-time0 {
|
||||||
font-family: 'maleGod';
|
font-family: "maleGod";
|
||||||
font-size: 25px;
|
font-size: 25px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -1801,7 +1850,7 @@ export default {
|
||||||
padding-left: 8%;
|
padding-left: 8%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-family: 'maleGod';
|
font-family: "maleGod";
|
||||||
align-items: center;
|
align-items: center;
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
|
|
@ -1817,7 +1866,6 @@ export default {
|
||||||
|
|
||||||
.left-content .business-hall {
|
.left-content .business-hall {
|
||||||
height: 38.2%;
|
height: 38.2%;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.left-content .passenger-flow {
|
.left-content .passenger-flow {
|
||||||
|
|
@ -1856,12 +1904,8 @@ export default {
|
||||||
font-size: 25px;
|
font-size: 25px;
|
||||||
color: #4bbfde;
|
color: #4bbfde;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.flow-right {
|
.flow-right {
|
||||||
width: 56%;
|
width: 56%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
@ -1924,8 +1968,6 @@ export default {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.flow-item span:nth-child(2) {
|
.flow-item span:nth-child(2) {
|
||||||
|
|
@ -1933,7 +1975,6 @@ export default {
|
||||||
color: #c0c0c4;
|
color: #c0c0c4;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1948,11 +1989,11 @@ export default {
|
||||||
width: 33%;
|
width: 33%;
|
||||||
|
|
||||||
.img2 {
|
.img2 {
|
||||||
background-image: url(../assets/images/people-icon.png)
|
background-image: url(../assets/images/people-icon.png);
|
||||||
}
|
}
|
||||||
|
|
||||||
.img1 {
|
.img1 {
|
||||||
background-image: url(../assets/images/paizi.png)
|
background-image: url(../assets/images/paizi.png);
|
||||||
}
|
}
|
||||||
|
|
||||||
// display: flex;
|
// display: flex;
|
||||||
|
|
@ -1970,20 +2011,18 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-num {
|
.stat-num {
|
||||||
font-family: 'maleGod';
|
font-family: "maleGod";
|
||||||
color: #4bbfde !important;
|
color: #4bbfde !important;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-height: 980px) {
|
@media screen and (min-height: 980px) {
|
||||||
.stat-num {
|
.stat-num {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
font-family: 'maleGod';
|
font-family: "maleGod";
|
||||||
// display: inline-block;
|
// display: inline-block;
|
||||||
margin: 4px;
|
margin: 4px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -1991,7 +2030,6 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.right-content .payment {
|
.right-content .payment {
|
||||||
height: 38.3%;
|
height: 38.3%;
|
||||||
|
|
||||||
|
|
@ -2229,7 +2267,7 @@ export default {
|
||||||
font-size: 25px;
|
font-size: 25px;
|
||||||
font-family: maleGod;
|
font-family: maleGod;
|
||||||
margin-top: 7px;
|
margin-top: 7px;
|
||||||
color: #4bbfde
|
color: #4bbfde;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item-value3 {
|
.item-value3 {
|
||||||
|
|
@ -2237,7 +2275,7 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.item-value4 {
|
.item-value4 {
|
||||||
color: #2c6e43
|
color: #2c6e43;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2261,4 +2299,52 @@ export default {
|
||||||
background-image: url(../assets/images/content-icon5.png);
|
background-image: url(../assets/images/content-icon5.png);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
//left动画
|
||||||
|
@keyframes donghua1 {
|
||||||
|
from {
|
||||||
|
transform: translateX(0%);
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
transform: translateX(-100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.left-leave,
|
||||||
|
.left-leave-active,
|
||||||
|
.left-leave-to {
|
||||||
|
animation: donghua1 1s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-enter,
|
||||||
|
.left-enter-active,
|
||||||
|
.left-enter-to {
|
||||||
|
animation: donghua1 1s linear reverse;
|
||||||
|
}
|
||||||
|
//right动画
|
||||||
|
@keyframes donghua2 {
|
||||||
|
from {
|
||||||
|
transform: translateX(0%);
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
transform: translateX(100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.right-leave,
|
||||||
|
.right-leave-active,
|
||||||
|
.right-leave-to {
|
||||||
|
animation: donghua2 1s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-enter,
|
||||||
|
.right-enter-active,
|
||||||
|
.right-enter-to {
|
||||||
|
animation: donghua2 1s linear reverse;
|
||||||
|
}
|
||||||
|
.equimentAssets {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
.smartPage {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="left-content">
|
<transition name="left">
|
||||||
|
<div class="left-content" v-if="!menuShow">
|
||||||
<!-- 排班管理 -->
|
<!-- 排班管理 -->
|
||||||
<div class="work-force">
|
<div class="work-force">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
|
|
@ -57,7 +58,7 @@
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div style="width: 100%;height:calc(100% - 40px)">
|
<div style="width: 100%;height:calc(100% - 40px)">
|
||||||
<dv-scroll-board :config="config" style="height:100%" />
|
<dv-scroll-board :config="config" style="height:100%;width:100%" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 学习资料 -->
|
<!-- 学习资料 -->
|
||||||
|
|
@ -69,11 +70,13 @@
|
||||||
</div>
|
</div>
|
||||||
<div style="width: 100%;height:calc(100% - 40px)">
|
<div style="width: 100%;height:calc(100% - 40px)">
|
||||||
|
|
||||||
<dv-scroll-board :config="studyData" style="height:100%" />
|
<dv-scroll-board :config="studyData" style="height:100%;width:100%" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="right-content">
|
</transition>
|
||||||
|
<transition name="right">
|
||||||
|
<div class="right-content" v-if="!menuShow">
|
||||||
<!-- 任务通知 -->
|
<!-- 任务通知 -->
|
||||||
<div class="notice">
|
<div class="notice">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
|
|
@ -150,6 +153,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
</transition>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -160,6 +164,7 @@ export default {
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
menuShow:true,
|
||||||
// 服务画面
|
// 服务画面
|
||||||
serviceFrame: [
|
serviceFrame: [
|
||||||
{
|
{
|
||||||
|
|
@ -261,6 +266,16 @@ export default {
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
mounted(){
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
handleShow(){
|
||||||
|
this.menuShow = false
|
||||||
|
},
|
||||||
|
menuShow1(){
|
||||||
|
this.menuShow = true
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -287,7 +302,6 @@ export default {
|
||||||
color: #40accd;
|
color: #40accd;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
@ -556,4 +570,46 @@ export default {
|
||||||
color: rgb(163, 227, 245);
|
color: rgb(163, 227, 245);
|
||||||
-webkit-mask: linear-gradient(to top, rgb(163, 227, 245), transparent);
|
-webkit-mask: linear-gradient(to top, rgb(163, 227, 245), transparent);
|
||||||
}
|
}
|
||||||
|
//left动画
|
||||||
|
@keyframes donghua1 {
|
||||||
|
from {
|
||||||
|
transform: translateX(0%);
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
transform: translateX(-100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.left-leave,
|
||||||
|
.left-leave-active,
|
||||||
|
.left-leave-to {
|
||||||
|
animation: donghua1 1s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-enter,
|
||||||
|
.left-enter-active,
|
||||||
|
.left-enter-to {
|
||||||
|
animation: donghua1 1s linear reverse;
|
||||||
|
}
|
||||||
|
//right动画
|
||||||
|
@keyframes donghua2 {
|
||||||
|
from {
|
||||||
|
transform: translateX(0%);
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
transform: translateX(100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.right-leave,
|
||||||
|
.right-leave-active,
|
||||||
|
.right-leave-to {
|
||||||
|
animation: donghua2 1s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-enter,
|
||||||
|
.right-enter-active,
|
||||||
|
.right-enter-to {
|
||||||
|
animation: donghua2 1s linear reverse;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
Loading…
Reference in New Issue