jiangyinzhi
139 lines
2.7 KiB
Vue
139 lines
2.7 KiB
Vue
<template>
|
|
<div class="anchor-point">
|
|
<div class="border"></div>
|
|
<div class="anchor-content">
|
|
<div
|
|
v-for="item in anchorList"
|
|
:key="item.id"
|
|
:class="item.body == anchor ? 'checked' : 'dischecked'"
|
|
@click="handleClick(item.body)"
|
|
>
|
|
<span :id="item.id">{{ item.value }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
anchor: '.device',
|
|
anchorList: [
|
|
{
|
|
id: '0',
|
|
body: '.device',
|
|
value: '空调系统'
|
|
},
|
|
{
|
|
id: '1',
|
|
body: '.heating-system',
|
|
value: '采暖系统'
|
|
},
|
|
{
|
|
id: '2',
|
|
body: '.lighting-system',
|
|
value: '照明系统'
|
|
},
|
|
{
|
|
id: '3',
|
|
body: '.distributing-system',
|
|
value: '配电系统'
|
|
},
|
|
{
|
|
id: '4',
|
|
body: '.hotwator-system',
|
|
value: '生活热水系统'
|
|
}
|
|
// {
|
|
// id: "5",
|
|
// body: ".cleanenerg",
|
|
// value: "清洁能源利用"
|
|
// },
|
|
// {
|
|
// id: "6",
|
|
// body: ".tarnsform",
|
|
// value: "节能改造措施"
|
|
// }
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
handleClick(e) {
|
|
this.anchor = e
|
|
document.querySelector(e).scrollIntoView({
|
|
behavior: 'smooth',
|
|
block: 'start',
|
|
inline: 'nearest'
|
|
})
|
|
},
|
|
checkoutAnchor(e) {
|
|
this.anchor = e
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.anchor-point {
|
|
width: 100%;
|
|
height: 100%;
|
|
text-align: center;
|
|
position: relative;
|
|
.border {
|
|
position: absolute;
|
|
// width:100%;
|
|
height: 40%;
|
|
top: 30%;
|
|
left: 50%;
|
|
border-left: 1px dashed #0660af;
|
|
z-index: 900;
|
|
}
|
|
.anchor-content {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
.checked {
|
|
cursor: pointer;
|
|
margin: 10px 0;
|
|
width: 40px;
|
|
height: 40px;
|
|
padding: 1px;
|
|
border: 1px solid #4db99f;
|
|
border-radius: 50%;
|
|
background-color: #4db99f;
|
|
z-index: 999;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
span {
|
|
font-size: 11px;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
.dischecked {
|
|
cursor: pointer;
|
|
margin: 10px 0;
|
|
width: 40px;
|
|
height: 40px;
|
|
padding: 1px;
|
|
border: 1px solid #d4d4d4;
|
|
border-radius: 50%;
|
|
background-color: #d4d4d4;
|
|
z-index: 999;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
span {
|
|
font-size: 11px;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|