Browse Source

项目信息管理样式修改

duxiangyu 3 years ago
parent
commit
d21c905eac

+ 32 - 3
src/components/project-manage/components/anchor.vue

@@ -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>

+ 2 - 1
src/components/project-manage/index.vue

@@ -45,13 +45,14 @@ export default {
 .container {
   width: 100%;
   display: flex;
+  background-color: #ffffff;
+
   .left {
     flex: 0 0 143px;
   }
   .right {
     width: 100%;
 
-    background-color: #ffffff;
     overflow-y: auto;
     .basic-container,
     .geo-container,