<em>Mac</em>Book项目 2009年学校开始实施<em>Mac</em>Book项目,所有师生配备一本<em>Mac</em>Book,并同步更新了校园无线网络。学校每周进行电脑技术更新,每月发送技术支持资料,极大改变了教学及学习方式。因此2011
2021-06-01 09:32:01
Vue標尺外掛使用詳解
2022-02-27 19:00:25
本文為大家分享了Vue標尺外掛使用的具體程式碼，供大家參考，具體內容如下
可根據高和寬度自適應，主要傳值為寬度和距離零刻度的距離，程式碼和圖片如下。
<template>
<div class="demoRule">
<el-row class=" main">
<div class="rightBorder" v-if="duiData&&duiData.length>0"></div>
<div class="ruleF" v-for="(item,indexDui) in duiData" :key="indexDui" :style="{'height':(duiData&&duiData.length>0)?(100/duiData.length)+'%':'100%'}">
<div class="content" :style="{'border-top':(indexDui==0?'1.5px solid #9c9c9c':'')}">
<div class="faRe" v-for="(itemF,indexF) in item.faReData" :key="indexF" :style="{'right':itemF.right}"> (發熱)</div>
<div class="boxes" v-for="(itemDuo,indexDuo) in item.duoData" :key="indexDuo" :style="{'width':itemDuo.width,'right':itemDuo.right,'background':colorData[itemDuo.color],}">{{itemDuo.content}} </div>
</div>
<div v-for="(itemNum, indexNum) in 24 " :key="indexNum" class="ruleBody" :style="{'margin-right':(indexNum==0?'2%':'')}">
<div class="num" v-if="indexDui%2==0">{{itemNum*50}}</div>
</div>
</div>
</el-row>
</div>
</template>
<script>
export default {
data () {
return {
colorData: {
1: "#aad494",
2: "#aab6dc",
3: "#faf5b3",
4: "#c5acd3",
5: "#faa5a5",
6: "#faacc4",
},
duiData: [
{
duoData: [
{
width: "5%",
right: "0%",
color: "1",
content: "爽膚水",
},
{
width: "8%",
right: "26%",
color: "2",
content: "康師傅",
}, {
width: "6%",
right: "75%",
color: "3",
content: "電風扇",
}
],
faReData: [
{ right: "3%", },
{ right: "36%", },
{ right: "86%", }
],
},
{
duoData: [
{
width: "3%",
right: "25%",
color: "4",
content: "娃哈哈",
},
{
width: "7%",
right: "56%",
color: "5",
content: "集裝箱",
}, {
width: "7%",
right: "85%",
color: "6",
content: "義大利炮",
}
],
faReData: [
{ right: "5%", },
{ right: "66%", },
{ right: "76%", }
],
},
{
duoData: [
{
width: "5%",
right: "5%",
color: "1",
content: "爽膚水",
},
{
width: "8%",
right: "26%",
color: "2",
content: "康師傅",
}, {
width: "6%",
right: "75%",
color: "3",
content: "電風扇",
}
],
faReData: [
{ right: "3%", },
{ right: "36%", },
{ right: "86%", }
],
},
{
duoData: [
{
width: "3%",
right: "25%",
color: "4",
content: "娃哈哈",
},
{
width: "7%",
right: "56%",
color: "5",
content: "集裝箱",
}, {
width: "7%",
right: "85%",
color: "6",
content: "義大利炮",
}
],
faReData: [
{ right: "5%", },
{ right: "66%", },
{ right: "76%", }
],
},
{
duoData: [
{
width: "5%",
right: "5%",
color: "1",
content: "爽膚水",
},
{
width: "8%",
right: "26%",
color: "2",
content: "康師傅",
}, {
width: "6%",
right: "75%",
color: "3",
content: "電風扇",
}
],
faReData: [
{ right: "3%", },
{ right: "36%", },
{ right: "86%", }
],
},
{
duoData: [
{
width: "3%",
right: "25%",
color: "4",
content: "娃哈哈",
},
{
width: "7%",
right: "56%",
color: "5",
content: "集裝箱",
}, {
width: "7%",
right: "85%",
color: "6",
content: "義大利炮",
}
],
faReData: [
{ right: "5%", },
{ right: "66%", },
{ right: "76%", }
],
},
{
duoData: [
{
width: "5%",
right: "5%",
color: "1",
content: "爽膚水",
},
{
width: "8%",
right: "26%",
color: "2",
content: "康師傅",
}, {
width: "6%",
right: "75%",
color: "3",
content: "電風扇",
}
],
faReData: [
{ right: "3%", },
{ right: "36%", },
{ right: "86%", }
],
},
{
duoData: [
{
width: "3%",
right: "25%",
color: "4",
content: "娃哈哈",
},
{
width: "7%",
right: "56%",
color: "5",
content: "集裝箱",
}, {
width: "7%",
right: "85%",
color: "6",
content: "義大利炮",
}
],
faReData: [
{ right: "5%", },
{ right: "66%", },
{ right: "76%", }
],
},
],
};
},
watch: {},
created () {
},
mounted () {
// ruleF
},
methods: {}
};
</script>
<style lang="scss" scoped>
.demoRule {
width: calc(100% - 30px);
height: calc(100vh - 131px);
background: #f3f3f3;
padding: 15px;
}
.main {
width: 95%;
height: 95%;
margin: 0px auto;
margin-top: 1%;
padding: 10px;
border: 1px solid #eaeaea;
position: relative;
// background: white;
}
.rightBorder {
position: absolute;
width: 1.5px;
height: calc(100% - 20px);
background: #c3c3c3;
top: 10px;
right: calc(2% + 7px);
z-index: 100;
}
.ruleF {
width: 100%;
font-size: 12px;
color: #909399;
}
.content {
overflow: hidden;
position: relative;
width: 96%;
margin-left: 2%;
height: calc(100% - 30px);
border-left: 1.5px solid #777777;
background: #ffffff;
// border-right: 1.5px solid #777777;
}
.faRe {
z-index: 101;
position: absolute;
color: red;
top: 5px;
}
.boxes {
z-index: 1;
height: 100%;
position: absolute;
top: 0px;
color: #0a2731;
justify-content: center;
align-items: center;
text-align: center;
display: flex;
font-weight: bold;
}
.ruleBody {
width: 4%;
height: 30px;
background: url("../../assets/images/rule.png");
background-repeat: no-repeat;
background-size: 100% 100%;
float: right;
}
.num {
position: relative;
margin-left: -10px;
z-index: 100;
margin-top: 13px;
}
</style>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援it145.com。
相關文章
-
黑科技的輕簡出行，告別「電量焦慮症」：Anker氮化鎵超能充系列
综合看Anker超能充系列的性价比很高，并且与不仅和iPhone12/苹果<em>Mac</em>Book很配，而且适合多设备充电需求的日常使用或差旅场景，不管是安卓还是Switch同样也能用得上它，希望这次分享能给准备购入充电器的小伙伴们有所
2021-06-01 09:31:42
-
吳亦凡廠牌首秀，L4WUDU居然忘詞了，Rapper和明星比還是有差距！
除了L4WUDU与吴亦凡已经多次共事，成为了明面上的厂牌成员，吴亦凡还曾带领20XXCLUB全队参加2020年的一场音乐节，这也是20XXCLUB首次全员合照，王嗣尧Turbo、陈彦希Regi、<em>Mac</em> Ova Seas、林渝植等人全部出场。然而让
2021-06-01 09:31:34
-
IPFS、Chia、Bzz和ICP挖礦該怎麼選？哪一個更有優勢？
目前应用IPFS的机构：1 谷歌<em>浏览器</em>支持IPFS分布式协议 2 万维网 (历史档案博物馆)数据库 3 火狐<em>浏览器</em>支持 IPFS分布式协议 4 EOS 等数字货币数据存储 5 美国国会图书馆，历史资料永久保存在 IPFS 6 加
2021-06-01 09:31:24
-
有哪些事是買了雪佛蘭後才知道的？美事偷著樂，開拓者車主隨聊
开拓者的车机是兼容苹果和<em>安卓</em>，虽然我不怎么用，但确实兼顾了我家人的很多需求：副驾的门板还配有解锁开关，有的时候老婆开车，下车的时候偶尔会忘记解锁，我在副驾驶可以自己开门：第二排设计很好，不仅配置了一个很大的
2021-06-01 09:30:48
-
iPhone12在618最新定價，跌價幅度超過1400元，還等iPhone13嗎？
不仅是<em>安卓</em>手机，苹果手机的降价力度也是前所未有了，iPhone12也“跳水价”了，发布价是6799元，如今已经跌至5308元，降价幅度超过1400元，最新定价确认了。iPhone12是苹果首款5G手机，同时也是全球首款5nm芯片的智能机，它
2021-06-01 09:30:45