代码提交
This commit is contained in:
parent
bd7259b9f7
commit
b873ad0b97
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,5 +24,10 @@ export default new Router({
|
|||
name: 'index',
|
||||
component: () => import ('./view/index.vue')
|
||||
},
|
||||
{
|
||||
path: '/equipmentAssets',
|
||||
name: 'equipmentAssets',
|
||||
component: () => import ('./view/equipmentAssets.vue')
|
||||
},
|
||||
]
|
||||
})
|
||||
|
|
|
|||
|
|
@ -0,0 +1,574 @@
|
|||
<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() {
|
||||
this.menuHandelShow()
|
||||
},
|
||||
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>
|
||||
|
|
@ -205,11 +205,10 @@
|
|||
</div>
|
||||
<div class="middleBottom">
|
||||
<div class="menuBtn" :class="{'menuBtn1' : menuAc == index}" v-for="(item,index) in menu" :key="index" @click="handelBtn(index)">
|
||||
<img :src="item.icon"/>
|
||||
<img :src="menuAc != index ? item.icon : item.iconAc"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="middleBottomIcon">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -372,15 +371,19 @@ export default {
|
|||
],
|
||||
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() {
|
||||
|
|
@ -397,17 +400,11 @@ export default {
|
|||
handelBtn(index){
|
||||
this.menuAc = index
|
||||
if (index == 0) {
|
||||
this.menu[0].icon = require("@/assets/images/zongtiAc.png")
|
||||
this.menu[1].icon = require("@/assets/images/zhihui.png")
|
||||
this.menu[2].icon = require("@/assets/images/shebei.png")
|
||||
|
||||
}else if (index == 1) {
|
||||
this.menu[0].icon = require("@/assets/images/zongti.png")
|
||||
this.menu[1].icon = require("@/assets/images/zhihuiAc.png")
|
||||
this.menu[2].icon = require("@/assets/images/shebei.png")
|
||||
|
||||
}else if (index == 2) {
|
||||
this.menu[0].icon = require("@/assets/images/zongti.png")
|
||||
this.menu[1].icon = require("@/assets/images/zhihui.png")
|
||||
this.menu[2].icon = require("@/assets/images/shebeiAc.png")
|
||||
this.$router.push('./equipmentAssets')
|
||||
}
|
||||
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue