Compare commits
No commits in common. "86a1a27cfe8381cf2f7f45435745a489c2b13e9f" and "7e75022a1b61f07f8eba1849ccdec46b933d095b" have entirely different histories.
86a1a27cfe
...
7e75022a1b
|
|
@ -48,7 +48,6 @@ 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.
|
Before Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 50 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 636 B |
Binary file not shown.
|
Before Width: | Height: | Size: 672 B |
Binary file not shown.
|
Before Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 643 B |
|
|
@ -24,15 +24,10 @@ 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')
|
||||||
}
|
},
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -1,573 +0,0 @@
|
||||||
<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,8 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<!-- 左边的内容 -->
|
<!-- 左边的内容 -->
|
||||||
<transition name="left">
|
<div class="left-content">
|
||||||
<div class="left-content" v-show="menuShow">
|
|
||||||
<!-- 营业临厅时长 -->
|
<!-- 营业临厅时长 -->
|
||||||
<div class="business-hall">
|
<div class="business-hall">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
|
|
@ -86,10 +85,8 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</transition>
|
|
||||||
<!-- 右边的内容 -->
|
<!-- 右边的内容 -->
|
||||||
<transition name="right">
|
<div class="right-content">
|
||||||
<div class="right-content" v-show="menuShow">
|
|
||||||
<!-- 缴费情况 -->
|
<!-- 缴费情况 -->
|
||||||
<div class="payment">
|
<div class="payment">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
|
|
@ -196,7 +193,6 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</transition>
|
|
||||||
<div class="middle-content">
|
<div class="middle-content">
|
||||||
<!-- 内容头部 -->
|
<!-- 内容头部 -->
|
||||||
<div class="middleTop">
|
<div class="middleTop">
|
||||||
|
|
@ -208,29 +204,25 @@
|
||||||
</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)">
|
|
||||||
<img :src="menuAc != index ? item.icon : item.iconAc"/>
|
<div class="menuBtn" :class="{ 'menuBtn1': menuAc == index }" v-for="(item, index) in menu" :key="index"
|
||||||
</div>
|
@click="handelBtn(index)">
|
||||||
</div>
|
<img :src="item.icon" />
|
||||||
<div class="middleBottomIcon">
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<equipment-assets ref="equimentAssets" class="equimentAssets" v-show="equimentAssetsShow"/>
|
<div class="middleBottomIcon">
|
||||||
<smartPage ref="smartPage" class="smartPage" v-show="smartPageShow"/>
|
|
||||||
|
</div>
|
||||||
</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: "平均办理时长",
|
||||||
|
|
@ -361,41 +353,37 @@ 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() {
|
||||||
|
|
@ -405,59 +393,26 @@ 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")
|
||||||
if (this.equimentAssetsShow == true) {
|
this.menu[1].icon = require("@/assets/images/zhihui.png")
|
||||||
this.$refs.equimentAssets.menuHandel();
|
this.menu[2].icon = require("@/assets/images/shebei.png")
|
||||||
window.setTimeout(() => {
|
|
||||||
that.equimentAssetsShow = false;
|
|
||||||
that.menuShow = true;
|
|
||||||
}, 1500);
|
|
||||||
} else if (this.smartPageShow == true) {
|
|
||||||
this.$refs.smartPage.menuShow1();
|
|
||||||
window.setTimeout(() => {
|
|
||||||
that.smartPageShow = false;
|
|
||||||
that.menuShow = true;
|
|
||||||
}, 1500);
|
|
||||||
}
|
|
||||||
} else if (index == 1) {
|
} else if (index == 1) {
|
||||||
if (this.menuShow == true) {
|
this.menu[0].icon = require("@/assets/images/zongti.png")
|
||||||
this.menuShow = false;
|
this.menu[1].icon = require("@/assets/images/zhihuiAc.png")
|
||||||
window.setTimeout(() => {
|
this.menu[2].icon = require("@/assets/images/shebei.png")
|
||||||
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) {
|
} else if (index == 2) {
|
||||||
if (this.menuShow == true) {
|
this.menu[0].icon = require("@/assets/images/zongti.png")
|
||||||
this.menuShow = false;
|
this.menu[1].icon = require("@/assets/images/zhihui.png")
|
||||||
window.setTimeout(() => {
|
this.menu[2].icon = require("@/assets/images/shebeiAc.png")
|
||||||
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);
|
||||||
|
|
@ -558,7 +513,7 @@ export default {
|
||||||
show: true, //开启显示
|
show: true, //开启显示
|
||||||
color: "#d8d4d7",
|
color: "#d8d4d7",
|
||||||
position: "top", //在上方显示
|
position: "top", //在上方显示
|
||||||
formatter: function (res) {},
|
formatter: function (res) { },
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
@ -684,7 +639,7 @@ export default {
|
||||||
show: true, //开启显示
|
show: true, //开启显示
|
||||||
color: "#d8d4d7",
|
color: "#d8d4d7",
|
||||||
position: "top", //在上方显示
|
position: "top", //在上方显示
|
||||||
formatter: function (res) {},
|
formatter: function (res) { },
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
@ -1638,10 +1593,6 @@ export default {
|
||||||
this.serviceTypeActive = index;
|
this.serviceTypeActive = index;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
components: {
|
|
||||||
equipmentAssets,
|
|
||||||
smartPage,
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
@ -1652,7 +1603,6 @@ 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,
|
||||||
|
|
@ -1684,12 +1634,12 @@ export default {
|
||||||
|
|
||||||
.menuBtn {
|
.menuBtn {
|
||||||
width: 142px;
|
width: 142px;
|
||||||
height: 52px;
|
height: 52px
|
||||||
}
|
}
|
||||||
|
|
||||||
.menuBtn1 {
|
.menuBtn1 {
|
||||||
width: 188px;
|
width: 188px;
|
||||||
height: 74px;
|
height: 74px
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1697,7 +1647,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;
|
||||||
|
|
@ -1705,8 +1655,8 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 内容板块背景 */
|
/* 内容板块背景 */
|
||||||
.left-content > div,
|
.left-content>div,
|
||||||
.right-content > div {
|
.right-content>div {
|
||||||
background-image: url(../assets/images/border.png);
|
background-image: url(../assets/images/border.png);
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
|
|
@ -1740,6 +1690,7 @@ export default {
|
||||||
width: 102px;
|
width: 102px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.span0 {
|
.span0 {
|
||||||
|
|
@ -1771,7 +1722,10 @@ export default {
|
||||||
height: 16px;
|
height: 16px;
|
||||||
margin-left: 7px;
|
margin-left: 7px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.chart-title {
|
.chart-title {
|
||||||
|
|
@ -1797,13 +1751,10 @@ 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(
|
-webkit-mask: linear-gradient(to top, rgba(163, 227, 245, 0.7), transparent);
|
||||||
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%;
|
||||||
|
|
@ -1821,7 +1772,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;
|
||||||
|
|
@ -1840,8 +1791,8 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 标题的样式 */
|
/* 标题的样式 */
|
||||||
.left-content > div > .title,
|
.left-content>div>.title,
|
||||||
.right-content > div > .title {
|
.right-content>div>.title {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-image: url(../assets/images/border-title.png);
|
background-image: url(../assets/images/border-title.png);
|
||||||
height: 30px;
|
height: 30px;
|
||||||
|
|
@ -1850,7 +1801,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;
|
||||||
|
|
@ -1866,6 +1817,7 @@ export default {
|
||||||
|
|
||||||
.left-content .business-hall {
|
.left-content .business-hall {
|
||||||
height: 38.2%;
|
height: 38.2%;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.left-content .passenger-flow {
|
.left-content .passenger-flow {
|
||||||
|
|
@ -1904,8 +1856,12 @@ export default {
|
||||||
font-size: 25px;
|
font-size: 25px;
|
||||||
color: #4bbfde;
|
color: #4bbfde;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.flow-right {
|
.flow-right {
|
||||||
width: 56%;
|
width: 56%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
@ -1968,6 +1924,8 @@ 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) {
|
||||||
|
|
@ -1975,6 +1933,7 @@ export default {
|
||||||
color: #c0c0c4;
|
color: #c0c0c4;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1989,11 +1948,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;
|
||||||
|
|
@ -2011,18 +1970,20 @@ 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;
|
||||||
|
|
@ -2030,6 +1991,7 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.right-content .payment {
|
.right-content .payment {
|
||||||
height: 38.3%;
|
height: 38.3%;
|
||||||
|
|
||||||
|
|
@ -2267,7 +2229,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 {
|
||||||
|
|
@ -2275,7 +2237,7 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.item-value4 {
|
.item-value4 {
|
||||||
color: #2c6e43;
|
color: #2c6e43
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2299,52 +2261,4 @@ 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,7 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<transition name="left">
|
<div class="left-content">
|
||||||
<div class="left-content" v-if="!menuShow">
|
|
||||||
<!-- 排班管理 -->
|
<!-- 排班管理 -->
|
||||||
<div class="work-force">
|
<div class="work-force">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
|
|
@ -58,7 +57,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%;width:100%" />
|
<dv-scroll-board :config="config" style="height:100%" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 学习资料 -->
|
<!-- 学习资料 -->
|
||||||
|
|
@ -70,13 +69,11 @@
|
||||||
</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%;width:100%" />
|
<dv-scroll-board :config="studyData" style="height:100%" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</transition>
|
<div class="right-content">
|
||||||
<transition name="right">
|
|
||||||
<div class="right-content" v-if="!menuShow">
|
|
||||||
<!-- 任务通知 -->
|
<!-- 任务通知 -->
|
||||||
<div class="notice">
|
<div class="notice">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
|
|
@ -153,7 +150,6 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</transition>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -164,7 +160,6 @@ export default {
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
menuShow:true,
|
|
||||||
// 服务画面
|
// 服务画面
|
||||||
serviceFrame: [
|
serviceFrame: [
|
||||||
{
|
{
|
||||||
|
|
@ -266,16 +261,6 @@ export default {
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
|
||||||
mounted(){
|
|
||||||
},
|
|
||||||
methods:{
|
|
||||||
handleShow(){
|
|
||||||
this.menuShow = false
|
|
||||||
},
|
|
||||||
menuShow1(){
|
|
||||||
this.menuShow = true
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -302,6 +287,7 @@ export default {
|
||||||
color: #40accd;
|
color: #40accd;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
@ -570,46 +556,4 @@ 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