From 8755bc88034dc3c8a8ea7ca06989f5babf0562db Mon Sep 17 00:00:00 2001
From: whychw <858544502@qq.com>
Date: 星期四, 16 四月 2020 09:02:50 +0800
Subject: [PATCH] mmit
---
src/pages/equipment-monitor/index.vue | 4
/dev/null | 0
src/assets/images/right-triangle/tpt.png | 0
src/components/FiveSidesLine.vue | 197 +++++++++++++++++++++++++++++++++++++++++++++++--
src/assets/images/right-triangle/jlpd.png | 0
5 files changed, 191 insertions(+), 10 deletions(-)
diff --git a/src/assets/images/right-triangle/jlpd.png b/src/assets/images/right-triangle/jlpd.png
new file mode 100644
index 0000000..a21301b
--- /dev/null
+++ b/src/assets/images/right-triangle/jlpd.png
Binary files differ
diff --git a/src/assets/images/right-triangle/tpt.png b/src/assets/images/right-triangle/tpt.png
new file mode 100644
index 0000000..b5ee688
--- /dev/null
+++ b/src/assets/images/right-triangle/tpt.png
Binary files differ
diff --git "a/src/assets/images/right-triangle/\344\272\244\346\265\201\344\275\216\345\216\213\351\205\215\347\224\265\346\237\234.jpg" "b/src/assets/images/right-triangle/\344\272\244\346\265\201\344\275\216\345\216\213\351\205\215\347\224\265\346\237\234.jpg"
deleted file mode 100644
index 56dd2dd..0000000
--- "a/src/assets/images/right-triangle/\344\272\244\346\265\201\344\275\216\345\216\213\351\205\215\347\224\265\346\237\234.jpg"
+++ /dev/null
Binary files differ
diff --git a/src/components/FiveSidesLine.vue b/src/components/FiveSidesLine.vue
index 52008db..1aa0e5e 100644
--- a/src/components/FiveSidesLine.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/pages/equipment-monitor/index.vue b/src/pages/equipment-monitor/index.vue
index e7f3120..ebd0c2c 100644
--- a/src/pages/equipment-monitor/index.vue
+++ b/src/pages/equipment-monitor/index.vue
@@ -15,7 +15,9 @@
</script>
<style scoped>
-
+.equipment-monitor-index {
+ height: 100%;
+}
</style>
--
Gitblit v1.9.1