mmit

whychw

2020-04-16 8755bc88034dc3c8a8ea7ca06989f5babf0562db

mmit

动力设备监控页面修改

 src/assets/images/right-triangle/jlpd.png

 src/assets/images/right-triangle/tpt.png

 src/assets/images/right-triangle/½»Á÷µÍѹÅäµç¹ñ.jpg

Binary files differ

 src/components/FiveSidesLine.vue

@@ -1,23 +1,202 @@
<template>
    <div class="right-triangle">
        <router-link tag="span" to="/equipment-monitor/AcCab">交流配电柜</router-link>
    <div class="page_container">
        <!-- è¿™å—儿是内部 -->
        <div class="main">
            <img :src="tpt" alt="拓普图">
        </div>
        <!-- å³è¾¹äº”个按钮列表 -->
        <ul class="">
            <li v-for="(btn, idx) in btns" :key="idx"
                :class="{'active': idx == currentIndex}"
                @click="click(btn)">
                <div class="right-triangle">
                    <img class="img" :src="btn.img" alt="">
                    <span class="triangle-txt">{{btn.txt}}</span>
                </div>
                <i class="arrow"></i>
            </li>
        </ul>
    </div>
</template>

<script>
import tpt from '../assets/images/right-triangle/tpt.png'
import jlpd from '../assets/images/right-triangle/jlpd.png'
// import zlkg from '@/assets/images/right-triangle/zlkg.png'
// import zlpd from '@/assets/images/right-triangle/zlpd.png'
// import jzlpd from '@/assets/images/right-triangle/jzlpd.png'
// import xdcz from '@/assets/images/right-triangle/xdcz.png'
export default {
    
    name: 'FiveSidesLine',
    data() {
        return  {
            tpt: tpt,
            jlpd: jlpd,
            // zlkg: zlkg,
            // zlpd: zlpd,
            // jzlpd: jzlpd,
            // xdcz: xdcz,
            btns: [
                {
                    txt: '交流配电柜',
                    className: 'jlpd',
                    img: jlpd
                },
                {
                    txt: '高频直流开关柜',
                    className: 'zlkg',
                    img: jlpd
                    // img: zlkg
                },
                {
                    txt: '直流配电柜',
                    className: 'zlpd',
                    img: jlpd
                    // img: zlpd
                },
                {
                    txt: '交直流配电柜',
                    className: 'jzlpd',
                    img: jlpd
                    // img: jzlpd
                },
                {
                    txt: '蓄电池组',
                    className: 'xdcz',
                    img: jlpd
                    // img: xdcz
                }
            ],
            // å½“前active项的索引 é»˜è®¤ä¸º0
            currentIndex: 0
        }
    },
    methods: {
        click: function(){
            console.log('click');
        }
    }
}
</script>

<style scoped>
.right-triangle {
    display: inline-block;
.page_container {
    height: 100%;
}
ul {
    float: right;
    height: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: rgba(0,0,0,.4);
}
ul > li {
    position: absolute;
    right: .4rem;
    height: 0.8rem;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    background-image: linear-gradient(rgba(197,212,236, 0), rgba(197,212,236, 1));
    line-height: 0.8rem;
    -webkit-mask: linear-gradient(225deg, transparent 50%, #fff 50%),
                  linear-gradient(-45deg, transparent 50%, #fff 50%); 
    -webkit-mask-position-y: 0.4rem;
    padding-right: 1rem;
}
ul > li.active {
    background: #15e3f3;
}
ul > li > i {
    position: absolute;
    width: .4rem;
    top: 0;
    bottom: 0;
    left: 100%;
    overflow: hidden;
}
ul > li > i:after,
ul > li > i::after {
    content: '';
    position: absolute;
    top: 50%;
    bottom: 0;
    left: 0;
    width: 0.565686rem;
    height: 0.565686rem;
    z-index: -1;

    background-image: linear-gradient(135deg, rgba(197,212,236, 0), rgba(197,212,236, 1));
    transform: translate(-50%, -50%) rotate(45deg);
}
ul > li.active > i:after,
ul > li.active > i::after {
    background: #15e3f3;
}
ul > li:nth-child(1) {
    top: 16.66%;
}
ul > li:nth-child(2) {
    top: 33.33%;
}
ul > li:nth-child(3) {
    top: 50%;

}
ul > li:nth-child(4) {
    top: 66.67%;
}
ul > li:nth-child(5) {
    top: 83.34%;
}
ul > li:nth-child(1),
ul > li:nth-child(5) {
    -webkit-transform: translate(-1.2rem, -50%);
    -ms-transform: translate(-1.2rem, -50%);
    transform: translate(-1.2rem, -50%);
}
ul > li:nth-child(2),
ul > li:nth-child(4) {
    -webkit-transform: translate(-0.6rem, -50%);
    -ms-transform: translate(-0.6rem, -50%);
    transform: translate(-0.6rem, -50%);
}
i.img {
    width: 40px;
    height: 100%;
    margin-right: 20px;
    background: gray;
    float: left;
}
i.img.img_jlpd {
    background: gray url('../assets/images/right-triangle/jlpd.png') 0 0 no-repeat;
}
i.img.img_jlpd {
    background: gray url('../assets/images/right-triangle/jlpd.png') 0.2rem 50% / contain no-repeat;
}
.img {
    height: 80%;
    margin-right: .1rem;
    margin-left: .04rem;
    margin-top: .4rem;
    float: left;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.right-triangle {
    height: 100%;

}
.main {
    float: left;
    height: 100%;
}
.main img {
    position: absolute;
    left: .4rem;
    top: 50%;
    max-width: 60%;
    max-height: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
</style>

 src/pages/equipment-monitor/index.vue

@@ -15,7 +15,9 @@
</script>

<style scoped>

.equipment-monitor-index {
  height: 100%;
}
</style>