<template>
|
<div class="main page-container">
|
<div class="dAndlSetSpeed">
|
<div class="dAndlSetSpeed-left">
|
<div class="dAndlSetSpeed-row">
|
<div class="dAndlSetSpeed-bg1">
|
<div class="title">%POWER</div>
|
<div class="circle RPM">
|
<div class="number">1200</div>
|
<div class="unit">RPM</div>
|
</div>
|
<scale-bar direction="left" :value="1200" :splitNum="200"></scale-bar>
|
<img src="../../assets/images/dAndlSetSpeed-img1.png" class="img">
|
<scale-bar direction="right" :value="0.12" :splitNum="0.02"></scale-bar>
|
<div class="circle NM">
|
<div class="number">0.12</div>
|
<div class="unit">N/M</div>
|
</div>
|
<electric-choice class="speedChoice" :choiceData="speedChoice" @active="speedChoiceActive">
|
</electric-choice>
|
<electric-choice class="stateChoice" :choiceData="stateChoice" @active="stateChoiceActive">
|
</electric-choice>
|
</div>
|
</div>
|
<div class="dAndlSetSpeed-row">
|
<div class="decorate"></div>
|
<div class="dAndlSetSpeed-bg2">
|
<div class="tipTitle">步骤提示</div>
|
<div class="textContent">
|
<div class="text">
|
电机处于<span>前进档位</span>
|
</div>
|
<div class="text">
|
电机状态为<span>电动状态</span>
|
</div>
|
<div class="text">
|
调节点击转速至<span>1800转</span>
|
</div>
|
<div class="text">
|
逐档增加负载控制条挡位，并依次记录数据
|
</div>
|
</div>
|
</div>
|
<div class="dAndlSetSpeed-bg3">
|
<div class="flexDiv">
|
<span v-for="(item,index) in operationData" :key="index" class="btn"
|
:class="{active:index==activeIndex }" @click="changeTab(index)">{{item}}</span>
|
</div>
|
<table class="customTable text-center">
|
<tr>
|
<th>转矩</th>
|
<th>转速</th>
|
<th>编辑</th>
|
</tr>
|
<tr>
|
<td>400</td>
|
<td>-0.2</td>
|
<td>
|
<el-button type="primary" icon="el-icon-edit" circle size="mini"></el-button>
|
</td>
|
</tr>
|
<tr>
|
<td>400</td>
|
<td>-0.2</td>
|
<td>
|
<el-button type="primary" icon="el-icon-edit" circle size="mini"></el-button>
|
</td>
|
</tr>
|
<tr>
|
<td>400</td>
|
<td>-0.2</td>
|
<td>
|
<el-button type="primary" icon="el-icon-edit" circle size="mini"></el-button>
|
</td>
|
</tr>
|
<tr>
|
<td>400</td>
|
<td>-0.2</td>
|
<td>
|
<el-button type="primary" icon="el-icon-edit" circle size="mini"></el-button>
|
</td>
|
</tr>
|
</table>
|
</div>
|
</div>
|
</div>
|
<div class="dAndlSetSpeed-right">
|
<div class="tipTitle">永磁同步电机-MOOEL</div>
|
<div class="imgCon"><img src="../../assets/images/dAndlSetSpeed-img2.png" class="img"></div>
|
<div class="sliderCon">
|
<span class="lable">电机转速：</span>
|
<el-slider v-model="motorSpeed" :max="1000" class="slider" tooltip-class="sliderTooltip"></el-slider>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import scaleBar from '@/components/smallModule/scaleBar.vue'
|
import ElectricChoice from '@/components/smallModule/electricChoice.vue';
|
export default {
|
components: {
|
scaleBar,
|
ElectricChoice
|
},
|
data() {
|
return {
|
activeIndex: 0,
|
operationData: ["记录数据", "编辑数据"],
|
speedChoice: {
|
lable: '电机转速',
|
choicceArr: ["前进", "停止", "反转", "故障"],
|
active: "前进",
|
activeColor: '#ffe329'
|
},
|
stateChoice: {
|
lable: '电机状态',
|
choicceArr: ["电动", "手动"],
|
active: "电动",
|
activeColor: '#ff97a4'
|
},
|
motorSpeed: 600
|
}
|
},
|
methods: {
|
changeTab(index) { //编辑数据点击操作
|
this.activeIndex = index;
|
},
|
speedChoiceActive(data) {
|
this.speedChoice.active = data;
|
},
|
stateChoiceActive(data) {
|
this.stateChoice.active = data;
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.main {
|
width: 100%;
|
height: 100%;
|
margin-bottom: 10px;
|
display: -webkit-flex;
|
display: flex;
|
padding: 0 0 28px 40px;/* no */
|
-webkit-box-sizing: border-box;
|
box-sizing: border-box;
|
background: linear-gradient(0, #9896B1 0, #9896B1 0) left 0 bottom 18px / 100% 1px, linear-gradient(0, #7f7d9e 0, #7f7d9e 0) left 24px top 0 / 1px 100%;/* no */
|
background-repeat: no-repeat;
|
}
|
.dAndlSetSpeed {
|
/*height: 100%;*/
|
flex: 1;
|
display: flex;
|
/*height: calc(100vh - 120px);*/
|
}
|
|
.dAndlSetSpeed-left {
|
flex: 1;
|
/*height: 100%;*/
|
margin-right: 16px;
|
display: -webkit-flex;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.dAndlSetSpeed-left .dAndlSetSpeed-bg1 {
|
flex: 1;
|
/*width: 100%;*/
|
/*height: 50%;*/
|
/*float: left;*/
|
padding: 0 92px;
|
background: /* 左上角 */radial-gradient(circle farthest-side, transparent 87%, #5282ee 87%, #5282ee 100%, transparent 50%) 15px 4px / 8px 8px
|
,linear-gradient(0, #5282ee 0, #5282ee 0) 22px 8px / 170px 1px
|
,linear-gradient(0, #171350 0, #171350 0) 0 4px / 190px 18px
|
,linear-gradient(145deg, #171350 50%, transparent 50%) 190px 4px / 28px 18px
|
/* 右上角 */
|
,radial-gradient(circle farthest-side, #5282ee 60%, #5282ee 100%, transparent 100%) right 160px top 1px / 6px 6px
|
,linear-gradient(0, #5282ee 0, #5282ee 0) right top 4px / 160px 1px
|
,linear-gradient(0, #5282ee 0, #5282ee 0) right top 4px / 1px 48px
|
/* 左下角 */
|
,radial-gradient(circle farthest-side, transparent 87%, #5282ee 87%, #5282ee 100%, transparent 50%) left bottom 12px / 8px 8px
|
,linear-gradient(45deg, transparent 49%, #5282ee 40%, #5282ee 51%, transparent 40%, transparent 100%) left 6px bottom 0 / 14px 14px
|
,linear-gradient(0, #5282ee 0, #5282ee 0) left 24px bottom 5px / 90px 1px
|
,radial-gradient(circle farthest-side, transparent 87%, #5282ee 87%, #5282ee 100%, transparent 50%) left 114px bottom 2px / 8px 8px
|
,linear-gradient(45deg, transparent 49%, #5282ee 40%, #5282ee 51%, transparent 40%, transparent 100%) left bottom 5px / 24px 24px
|
,linear-gradient(0, #5282ee 0, #5282ee 0) left 20px bottom / 210px 1px
|
,linear-gradient(45deg, #171350 50%, transparent 50%) left bottom / 38px 38px
|
,linear-gradient(0, #171350 0, #171350 0) left bottom / 240px 10px
|
,linear-gradient(45deg, #171350 50%, transparent 50%) left 240px bottom / 10px 10px
|
/* 左侧中间 */
|
,linear-gradient(45deg, #5282ee 50%, transparent 50%) left calc(50% - 71px) / 8px 8px
|
,linear-gradient(0, #5282ee 0, #5282ee 0) left 50% / 8px 134px
|
,linear-gradient(135deg, #5282ee 50%, transparent 50%) left calc(50% + 71px) / 8px 8px
|
,linear-gradient(45deg, #171350 50%, transparent 50%) left calc(50% - 73px) / 10px 10px
|
,linear-gradient(0, #171350 0, #171350 0) left 50% / 10px 136px
|
,linear-gradient(135deg, #171350 50%, transparent 50%) left calc(50% + 73px) / 10px 10px
|
/* 右侧中间 */
|
,linear-gradient(315deg, #5282ee 50%, transparent 50%) right calc(50% - 71px) / 8px 8px
|
,linear-gradient(0, #5282ee 0, #5282ee 0) right 50% / 8px 134px
|
,linear-gradient(225deg, #5282ee 50%, transparent 50%) right calc(50% + 71px) / 8px 8px
|
,linear-gradient(315deg, #171350 50%, transparent 50%) right calc(50% - 73px) / 10px 10px
|
,linear-gradient(0, #171350 0, #171350 0) right 50% / 10px 136px
|
,linear-gradient(225deg, #171350 50%, transparent 50%) right calc(50% + 73px) / 10px 10px
|
/* 底色 */
|
,radial-gradient(circle closest-side, #171350 100%, #232163 220%) left 0 top 4px / auto; /* no */
|
background-repeat: no-repeat;
|
position: relative;
|
display: flex;
|
justify-content: space-between;
|
padding-top: 38px;
|
}
|
|
.dAndlSetSpeed-left .dAndlSetSpeed-row {
|
flex: 1;
|
/*flex-shrink: 0;*/
|
display: -webkit-flex;
|
display: flex;
|
position: relative;
|
}
|
.dAndlSetSpeed-left .dAndlSetSpeed-row ~ .dAndlSetSpeed-row {
|
margin-top: 16px;
|
}
|
.dAndlSetSpeed-left .dAndlSetSpeed-bg1 .img {
|
width: 460px;
|
height: 284px;
|
}
|
|
.dAndlSetSpeed-left .dAndlSetSpeed-bg1 .title {
|
position: absolute;
|
top: 32px;
|
left: 100px;
|
font-size: 28px;
|
color: #556df3;
|
}
|
|
.dAndlSetSpeed-left .dAndlSetSpeed-bg2 {
|
/*width: 65%;
|
height: 50%;
|
float: left;*/
|
flex: 1.7;
|
background: /* 左上角 */
|
linear-gradient(145deg, #5282ee 50%, transparent 50%) 0 0 / 14px 14px
|
,linear-gradient(145deg, #171350 50%, transparent 50%) 0 0 / 16px 16px
|
/* 右上角 */
|
,radial-gradient(circle farthest-side, #5282ee 60%, #5282ee 100%, transparent 100%) right 1px top 32px / 6px 6px
|
,linear-gradient(0, #5282ee 0, #5282ee 0) right 4px top / 236px 1px
|
,linear-gradient(0, #5282ee 0, #5282ee 0) right 4px top / 1px 32px
|
/* 左下角 */
|
,radial-gradient(circle farthest-side, #5282ee 60%, #5282ee 100%, transparent 100%) left 182px bottom 1px / 6px 6px
|
,linear-gradient(0, #5282ee 0, #5282ee 0) left bottom 22px / 1px 56px
|
,linear-gradient(45deg, transparent 49%, #5282ee 40%, #5282ee 51%, transparent 40%, transparent 100%) left bottom 4px / 18px 18px
|
,linear-gradient(0, #5282ee 0, #5282ee 0) left 18px bottom 4px / 168px 1px
|
,linear-gradient(45deg, #171350 50%, transparent 50%) left bottom 4px / 18px 18px
|
/* 右下角 */
|
,radial-gradient(circle farthest-side, transparent 87%, #5282ee 87%, #5282ee 100%, transparent 50%) right 144px bottom 2px / 8px 8px
|
,linear-gradient(0, #5282ee 0, #5282ee 0) right 4px bottom 6px / 140px 1px
|
,linear-gradient(0, #171350 0, #171350 0) right 4px bottom 4px / 152px 12px
|
,linear-gradient(315deg, #171350 50%, transparent 50%) right 156px bottom 4px / 12px 12px
|
/* 左侧中间 */
|
,linear-gradient(45deg, #5282ee 50%, transparent 50%) left calc(50% - 44px) / 8px 8px
|
,linear-gradient(0, #5282ee 0, #5282ee 0) left 50% / 8px 80px
|
,linear-gradient(135deg, #5282ee 50%, transparent 50%) left calc(50% + 44px) / 8px 8px
|
,linear-gradient(45deg, #171350 50%, transparent 50%) left calc(50% - 46px) / 10px 10px
|
,linear-gradient(0, #171350 0, #171350 0) left 50% / 10px 82px
|
,linear-gradient(135deg, #171350 50%, transparent 50%) left calc(50% + 46px) / 10px 10px
|
/* 右侧中间 */
|
,linear-gradient(315deg, #5282ee 50%, transparent 50%) right 4px top calc(50% - 44px) / 8px 8px
|
,linear-gradient(0, #5282ee 0, #5282ee 0) right 4px top 50% / 8px 80px
|
,linear-gradient(225deg, #5282ee 50%, transparent 50%) right 4px top calc(50% + 44px) / 8px 8px
|
,linear-gradient(315deg, #171350 50%, transparent 50%) right 4px top calc(50% - 46px) / 10px 10px
|
,linear-gradient(0, #171350 0, #171350 0) right 4px top 50% / 10px 82px
|
,linear-gradient(225deg, #171350 50%, transparent 50%) right 4px top calc(50% + 46px) / 10px 10px
|
/* 底色 */
|
,radial-gradient(circle closest-side, #171350 100%, #232163 168%) right 4px bottom 4px / auto; /* no */
|
background-repeat: no-repeat;
|
position: relative;
|
padding: 105px 60px 50px 52px;
|
}
|
|
.dAndlSetSpeed-left .dAndlSetSpeed-bg3 {
|
/* width: 35%;
|
height: 50%;
|
float: left; */
|
margin-left: 16px;
|
flex: 1;
|
background: /* 左上角 */
|
radial-gradient(circle farthest-side, #5282ee 60%, #5282ee 100%, transparent 100%) left 1px top 32px / 6px 6px
|
,linear-gradient(0, #5282ee 0, #5282ee 0) left 4px top 0 / 236px 1px
|
,linear-gradient(0, #5282ee 0, #5282ee 0) left 4px top 0 / 1px 32px
|
/* 左下角 */
|
,radial-gradient(circle farthest-side, transparent 87%, #5282ee 87%, #5282ee 100%, transparent 50%) left 144px bottom 2px / 8px 8px
|
,linear-gradient(0, #5282ee 0, #5282ee 0) left 4px bottom 6px / 140px 1px
|
,linear-gradient(0, #171350 0, #171350 0) left 4px bottom 4px / 152px 12px
|
,linear-gradient(45deg, #171350 50%, transparent 50%) left 156px bottom 4px / 12px 12px
|
/* 左侧中间 */
|
,linear-gradient(45deg, #5282ee 50%, transparent 50%) left 4px top calc(50% - 44px) / 8px 8px
|
,linear-gradient(0, #5282ee 0, #5282ee 0) left 4px top 50% / 8px 80px
|
,linear-gradient(135deg, #5282ee 50%, transparent 50%) left 4px top calc(50% + 44px) / 8px 8px
|
,linear-gradient(45deg, #171350 50%, transparent 50%) left 4px top calc(50% - 46px) / 10px 10px
|
,linear-gradient(0, #171350 0, #171350 0) left 4px top 50% / 10px 82px
|
,linear-gradient(135deg, #171350 50%, transparent 50%) left 4px top calc(50% + 46px) / 10px 10px
|
/* 右侧中间 */
|
,linear-gradient(315deg, #5282ee 50%, transparent 50%) right 0 top calc(50% - 44px) / 8px 8px
|
,linear-gradient(0, #5282ee 0, #5282ee 0) right 0 top 50% / 8px 80px
|
,linear-gradient(225deg, #5282ee 50%, transparent 50%) right 0 top calc(50% + 44px) / 8px 8px
|
,linear-gradient(315deg, #171350 50%, transparent 50%) right 0 top calc(50% - 46px) / 10px 10px
|
,linear-gradient(0, #171350 0, #171350 0) right 0 top 50% / 10px 82px
|
,linear-gradient(225deg, #171350 50%, transparent 50%) right 0 top calc(50% + 46px) / 10px 10px
|
/* 底色 */
|
,radial-gradient(circle closest-side, #171350 50%, #232163 128%) left 4px bottom 4px / auto; /* no */
|
background-repeat: no-repeat;
|
padding: 50px 25px 50px 33px;
|
}
|
|
.dAndlSetSpeed-right {
|
width: 560px;
|
/*height: 100%;*/
|
background: /* 左上角 */
|
radial-gradient(circle farthest-side, transparent 87%, #5282ee 87%, #5282ee 100%, transparent 100%) 0 234px / 8px 8px
|
,linear-gradient(0, #5282ee 0, #5282ee 0) 4px 0 / 34px 1px
|
,linear-gradient(0, #5282ee 0, #5282ee 0) 4px 0 / 1px 234px
|
,linear-gradient(135deg, #5282ee 50%, transparent 50%) 14px 4px / 24px 24px
|
,linear-gradient(135deg, #171350 50%, transparent 50%) 0 0 / 46px 46px
|
,linear-gradient(0, #171350 0, #171350 0) 0 0 / 14px 240px
|
,linear-gradient(135deg, #171350 50%, transparent 50%) 0 240px / 14px 14px
|
/* 右上角 */
|
,radial-gradient(circle farthest-side, transparent 87%, #5282ee 87%, #5282ee 100%, transparent 100%) right 13px top / 8px 8px
|
,radial-gradient(circle farthest-side, transparent 80%, #5282ee 80%, #5282ee 100%, transparent 100%) right 3px top 88px / 6px 6px
|
,linear-gradient(45deg, transparent 49%, #5282ee 49%, #5282ee 51%, transparent 51%) right 1px top 6px / 14px 14px
|
,linear-gradient(45deg, transparent 49%, #5282ee 49%, #5282ee 51%, transparent 51%) right 5px top 0px / 25px 25px
|
,linear-gradient(0, #5282ee 0, #5282ee 0) right 5px top 24px / 1px 64px
|
,linear-gradient(0, #5282ee 0, #5282ee 0) right top 20px / 1px 80px
|
,linear-gradient(0, #171350 0, #171350 0) right top 0 / 10px 104px
|
,linear-gradient(-135deg, #171350 50%, transparent 50%) right top / 40px 40px
|
,linear-gradient(-135deg, #171350 50%, transparent 50%) right top 104px / 10px 10px
|
/* 左下角 */
|
,radial-gradient(circle farthest-side, transparent 87%, #5282ee 87%, #5282ee 100%, transparent 100%) left 13px bottom / 8px 8px
|
,radial-gradient(circle farthest-side, transparent 80%, #5282ee 80%, #5282ee 100%, transparent 100%) left 3px bottom 88px / 6px 6px
|
,linear-gradient(45deg, transparent 49%, #5282ee 49%, #5282ee 51%, transparent 51%) left 1px bottom 6px / 14px 14px
|
,linear-gradient(45deg, transparent 49%, #5282ee 49%, #5282ee 51%, transparent 51%) left 5px bottom 0px / 25px 25px
|
,linear-gradient(0, #5282ee 0, #5282ee 0) left 5px bottom 24px / 1px 64px
|
,linear-gradient(0, #5282ee 0, #5282ee 0) left bottom 20px / 1px 80px
|
,linear-gradient(0, #171350 0, #171350 0) left bottom 0 / 10px 104px
|
,linear-gradient(45deg, #171350 50%, transparent 50%) left bottom / 40px 40px
|
,linear-gradient(45deg, #171350 50%, transparent 50%) left bottom 104px / 10px 10px
|
/* 右下角 */
|
,radial-gradient(circle farthest-side, transparent 87%, #5282ee 87%, #5282ee 100%, transparent 100%) right 13px bottom / 8px 8px
|
,radial-gradient(circle farthest-side, transparent 87%, #5282ee 87%, #5282ee 100%, transparent 100%) right 2px bottom 111px / 8px 8px
|
,linear-gradient(-45deg, transparent 49%, #5282ee 49%, #5282ee 51%, transparent 51%) right 1px bottom 6px / 14px 14px
|
,linear-gradient(-45deg, transparent 49%, #5282ee 49%, #5282ee 51%, transparent 51%) right 5px bottom 0px / 25px 25px
|
,linear-gradient(0, #5282ee 0, #5282ee 0) right 5px bottom 24px / 1px 88px
|
,linear-gradient(0, #5282ee 0, #5282ee 0) right bottom 20px / 1px 256px
|
,linear-gradient(0, #171350 0, #171350 0) right bottom 0 / 10px 280px
|
,linear-gradient(-45deg, #171350 50%, transparent 50%) right bottom / 40px 40px
|
,linear-gradient(-45deg, #171350 50%, transparent 50%) right bottom 280px / 10px 10px
|
/* 底部中间 */
|
,linear-gradient(-45deg, #5282ee 50%, transparent 50%) left calc(50% - 95px) bottom / 8px 8px
|
,linear-gradient(0, #5282ee 0, #5282ee 0) left 50% bottom / 182px 8px
|
,linear-gradient(45deg, #5282ee 50%, transparent 50%) left calc(50% + 95px) bottom / 8px 8px
|
,linear-gradient(-45deg, #171350 50%, transparent 50%) left calc(50% - 97px) bottom / 10px 10px
|
,linear-gradient(0, #171350 0, #171350 0) left 50% bottom / 184px 10px
|
,linear-gradient(45deg, #171350 50%, transparent 50%) left calc(50% + 97px) bottom / 10px 10px
|
/* 底色 */
|
,radial-gradient(circle closest-side, #171350 50%, #232163 128%) 50% 50% / auto; /* no */
|
background-repeat: no-repeat;
|
padding: 40px 50px;
|
}
|
|
.dAndlSetSpeed-right .imgCon {
|
width: 100%;
|
display: flex;
|
justify-content: center;
|
}
|
|
.dAndlSetSpeed-right .imgCon .img {
|
width: 440px;
|
height: 360px;
|
margin-top: 80px;
|
margin-bottom: 70px;
|
}
|
|
.RPM {
|
left: 200px;
|
top: 90px;
|
}
|
|
.NM {
|
right: 180px;
|
top: 270px;
|
}
|
|
.circle .number,
|
.circle .unit {
|
width: 100%;
|
text-align: center;
|
}
|
|
.circle .number {
|
font-size: 33px;
|
font-weight: bold;
|
margin-top: 8px;
|
}
|
|
.dAndlSetSpeed-left .dAndlSetSpeed-bg2 .tipTitle {
|
position: absolute;
|
top: 44px;
|
left: 36px;
|
}
|
|
.dAndlSetSpeed-left .dAndlSetSpeed-bg2 .textContent {
|
width: 100%;
|
height: 100%;
|
background-color: #272e76;
|
padding: 18px;
|
}
|
|
.dAndlSetSpeed-left .dAndlSetSpeed-bg2 .textContent .text {
|
font-size: 18px;
|
color: #ffffff;
|
margin-bottom: 22px;
|
}
|
|
.dAndlSetSpeed-left .dAndlSetSpeed-bg2 .textContent .text>span {
|
color: #ffe329;
|
}
|
|
.dAndlSetSpeed-left .dAndlSetSpeed-bg3 .flexDiv {
|
display: flex;
|
justify-content: space-between;
|
margin-bottom: 18px;
|
}
|
|
.dAndlSetSpeed-left .dAndlSetSpeed-bg3 .flexDiv .btn {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
width: 120px;
|
height: 30px;
|
background-color: #5282ee;
|
color: #181654;
|
font-size: 16px;
|
cursor: pointer;
|
}
|
|
.dAndlSetSpeed-left .dAndlSetSpeed-bg3 .flexDiv .btn.active {
|
background-color: #57f8ff;
|
}
|
|
.dAndlSetSpeed-left .dAndlSetSpeed-bg3 .el-button--primary {
|
background-color: #57f8ff;
|
border-color: #57f8ff;
|
color: #181654;
|
padding: 2px;
|
}
|
|
.speedChoice {
|
position: absolute;
|
left: 92px;
|
top: 345px;
|
}
|
|
.stateChoice {
|
position: absolute;
|
left: 550px;
|
top: 345px;
|
}
|
|
.dAndlSetSpeed-right .sliderCon {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
margin-bottom: 20px;
|
}
|
|
.dAndlSetSpeed-right .sliderCon .lable {
|
font-size: 14px;
|
color: #ffffff;
|
margin-right: 5px;
|
}
|
|
.dAndlSetSpeed-right .sliderCon .slider {
|
flex: 1;
|
}
|
.decorate {
|
position: absolute;
|
right: 0;
|
bottom: 100%;
|
width: 52px;
|
height: 52px;
|
-webkit-transform: translateY(18px);
|
transform: translateY(18px);
|
overflow: hidden;
|
}
|
.decorate::before {
|
content: '';
|
position: absolute;
|
left: 0;
|
right: 0;
|
top: 0;
|
bottom: 0;
|
-webkit-transform: translateX(75%) rotate(45deg);
|
transform: translateX(75%) rotate(45deg);
|
background: #5282ee;
|
-webkit-box-shadow: inset 4px -4px 0px 0px #5282ee, inset 7px -7px 0 0 #171350, -2px 2px #171350;
|
box-shadow: inset 4px -4px 0px 0px #5282ee, inset 7px -7px 0 0 #171350, -2px 2px #171350;
|
}
|
</style>
|
<style>
|
.dAndlSetSpeed-right .sliderCon .slider .el-slider__runway {
|
margin: 0;
|
height: 12px;
|
background-color: #453c9e;
|
border-radius: 6px;
|
}
|
|
.dAndlSetSpeed-right .sliderCon .slider .el-slider__runway .el-slider__bar {
|
height: 11px;
|
border-radius: 6px;
|
background-color: #ffe329;
|
}
|
|
.dAndlSetSpeed-right .sliderCon .slider .el-slider__runway .el-slider__button-wrapper {
|
top: -13px;
|
}
|
|
.dAndlSetSpeed-right .sliderCon .slider .el-slider__runway .el-slider__button {
|
width: 18px;
|
height: 18px;
|
border-color: #dabc14;
|
}
|
|
.el-tooltip__popper.is-dark.sliderTooltip {
|
background-color: #ffe329;
|
color: #181654;
|
}
|
|
.el-tooltip__popper.is-dark.sliderTooltip .popper__arrow::after {
|
content: "";
|
display: block;
|
width: 0;
|
height: 0;
|
border-top: 6px solid #ffe329;
|
}
|
</style>
|
