能效诊断

2024-07-10 10:25:32 +08:00
parent b7aa6f87f1
commit 04f0606430
262 changed files with 58693 additions and 1 deletions
@@ -0,0 +1,138 @@
+<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>