|
@@ -2,9 +2,10 @@
|
|
|
<div class="anchor-container">
|
|
|
<div
|
|
|
class="anchor-item"
|
|
|
- v-for="item in points"
|
|
|
+ :class="{ active: activeIndex === index }"
|
|
|
+ v-for="(item, index) in points"
|
|
|
:key="item.value"
|
|
|
- @click="go(item.value)"
|
|
|
+ @click="go(item.value, index)"
|
|
|
>
|
|
|
{{ item.label }}
|
|
|
</div>
|
|
@@ -14,6 +15,7 @@
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
+ activeIndex: 0,
|
|
|
points: [
|
|
|
{
|
|
|
label: "基本信息",
|
|
@@ -35,19 +37,46 @@ export default {
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
- go(value) {
|
|
|
+ go(value, index) {
|
|
|
+ this.activeIndex = index;
|
|
|
this.$emit("goAnchor", value);
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
+.anchor-container {
|
|
|
+ padding-left: 16px;
|
|
|
+ margin-top: 21px;
|
|
|
+ position: relative;
|
|
|
+ &::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ width: 2px;
|
|
|
+ height: 120px;
|
|
|
+ top: 4px;
|
|
|
+ background-color: #e4e6e7;
|
|
|
+ }
|
|
|
+}
|
|
|
.anchor-item {
|
|
|
margin: 16px 0 0 16px;
|
|
|
color: #8d9399;
|
|
|
cursor: pointer;
|
|
|
+ position: relative;
|
|
|
&:active {
|
|
|
color: #0091ff;
|
|
|
}
|
|
|
+ &.active {
|
|
|
+ color: #0091ff;
|
|
|
+ &::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ left: -16px;
|
|
|
+ top: 4px;
|
|
|
+ width: 2px;
|
|
|
+ height: 12px;
|
|
|
+ background-color: #0091ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|