update techy-container icons

src/views/EquipmentManager/components/TechyContainer.vue

@@ -12,7 +12,7 @@
     </template>
 
     <div class="container-title-wrapper">
-      <span class="container-icon" v-html="icon" />
+      <span class="container-icon" v-html="computeIcon" />
       <span class="container-title">{{ title }}</span>
     </div>
 
@@ -21,6 +21,8 @@
 </template>
 
 <script>
+import { IconBanshou, IconTrend, IconMenuChilun, IconSafetyHat } from './icons'
+
 export default {
   name: 'TechyContainer',
   props: {
@@ -34,21 +36,35 @@ export default {
   data() {
     return {}
   },
+  computed: {
+    computeIcon() {
+      switch (this.icon) {
+        case '扳手螺丝刀':
+          return IconBanshou
+        case '趋势搜索':
+          return IconTrend
+        case '清单齿轮':
+          return IconMenuChilun
+        case '安全帽':
+          return IconSafetyHat
+        // more...
+      }
+    }
+  },
   mounted() {}
 }
 </script>
 
 <style scoped>
 .techy-container {
-  border: 2px solid #52fff1;
+  border: calc(2px * var(--beilv)) solid #52fff1;
   border-image: linear-gradient(90deg, rgba(82, 255, 241, 0.6), rgba(95, 190, 249, 0), rgba(82, 255, 241, 0.6)) 2 2;
   display: inline-block;
   position: relative;
-  /* padding: 24px; */
-  padding: calc(100vw / 1920 * 22);
+  padding: calc(24px * var(--beilv));
   width: 100%;
   height: 100%;
-  box-shadow: inset 0px 0px 20px 0px rgba(255,255,255,0.15);
+  box-shadow: inset 0px 0px 20px 0px rgba(255, 255, 255, 0.15);
 }
 
 .line {
@@ -57,58 +73,47 @@ export default {
 }
 
 .horizontal {
-  /* height: 4px;
-  width: 24px; */
-  /* height: 0.325vh;
-  width: 3vh; */
-  height: calc(100vw / 1920 * 4);
-  width: calc(100vw / 1920 * 30);
+  height: calc(4px * var(--beilv));
+  width: calc(26px * var(--beilv));
 }
 
 .vertical {
-  /* height: 24px;
-  width: 4px; */
-  /* height: 3vh;
-  width: 0.325vh; */
-  height: calc(100vw / 1920 * 30);
-  width: calc(100vw / 1920 * 4);
+  height: calc(26px * var(--beilv));
+  width: calc(4px * var(--beilv));
 }
 
 .top {
-  top: -3px;
+  top: calc(-3px * var(--beilv));
 }
 
 .left {
-  left: -3px;
+  left: calc(-3px * var(--beilv));
 }
 
 .right {
-  right: -3px;
+  right: calc(-3px * var(--beilv));
 }
 
 .bottom {
-  bottom: -3px;
+  bottom: calc(-3px * var(--beilv));
 }
 
 .container-title-wrapper {
   color: #52fff1;
   display: flex;
   align-items: center;
-  /* font-size: 18px;
+  font-size: calc(18px * var(--beilv));
   line-height: 1;
-  height: 24px;
-  margin-bottom: 8px; */
-  /* font-size: 1.25vh;
-  line-height: 1;
-  height: 1.5vh;
-  margin-bottom: 1.25vh; */
-  font-size: calc((100vw / 1920) * 16);
-  line-height: 1;
-  height: calc((100vw / 1920) * 20);
-  margin-bottom: 1.25vh;
+  margin-bottom: calc(8px * var(--beilv));
 }
 
 .container-title {
-  margin-left: 4px;
+  margin-left: calc(4px * var(--beilv));
+}
+
+.container-icon {
+  position: relative;
+  height: calc(24px * var(--beilv)) !important;
+  width: calc(24px * var(--beilv)) !important;
 }
 </style>