<template>
|
<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>
|
.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;
|
}
|
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>
|
