update press

src/components/yx-dark/widget/baseInfo/baseInfoContainer.vue

@@ -84,18 +84,18 @@ export default {
 }
 
 .icon-1 {
-  background: url(../../../assets/icon-1.png) 100% / contain no-repeat;
+  background: url(../../../../assets/icon-1.png) 100% / contain no-repeat;
 }
 
 .icon-2 {
-  background: url(../../../assets/icon-2.png) 100% / contain no-repeat;
+  background: url(../../../../assets/icon-2.png) 100% / contain no-repeat;
 }
 
 .icon-3 {
-  background: url(../../../assets/icon-3.png) 100% / contain no-repeat;
+  background: url(../../../../assets/icon-3.png) 100% / contain no-repeat;
 }
 
 .icon-4 {
-  background: url(../../../assets/icon-4.png) 100% / contain no-repeat;
+  background: url(../../../../assets/icon-4.png) 100% / contain no-repeat;
 }
 </style>

src/components/yx-dark/widget/baseInfo/index.vue

@@ -0,0 +1,41 @@
+<!-- 
+    filename: index.vue
+    author: liubin
+    date: 2023-09-08 13:30:13
+    description: 放在这中间的小组件
+-->
+
+<template>
+  <div class="base-info">
+    <BaseInfoContainer icon="1" title="车间温度" value="27℃" />
+    <BaseInfoContainer icon="2" title="当前火向" value="东火" />
+    <BaseInfoContainer icon="3" title="换火时间" value="12:23:33" />
+    <BaseInfoContainer icon="4" title="剩余时间" value="6h" />
+  </div>
+</template>
+
+<script>
+import BaseInfoContainer from "@/components/yx-dark/widget/baseInfo/baseInfoContainer.vue";
+
+export default {
+  name: "BaseInfo",
+  components: { BaseInfoContainer },
+  props: {},
+  data() {
+    return {};
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.base-info {
+    display: flex;
+    gap: 16px;
+    position: absolute;
+    top: 80px;
+    left: 50%;
+    transform: translateX(-50%);
+}
+</style>

src/components/yx-dark/widget/index.vue

@@ -1,41 +0,0 @@
-<!-- 
-    filename: index.vue
-    author: liubin
-    date: 2023-09-08 13:30:13
-    description: 放在这中间的小组件
--->
-
-<template>
-  <div class="yx-dark-widget">
-    <YxDarkWidgetContainer icon="1" title="车间温度" value="27℃" />
-    <YxDarkWidgetContainer icon="2" title="当前火向" value="东火" />
-    <YxDarkWidgetContainer icon="3" title="换火时间" value="12:23:33" />
-    <YxDarkWidgetContainer icon="4" title="剩余时间" value="6h" />
-  </div>
-</template>
-
-<script>
-import YxDarkWidgetContainer from "@/components/yx-dark/widget/widgetContainer.vue";
-
-export default {
-  name: "YxDarkWidget",
-  components: { YxDarkWidgetContainer },
-  props: {},
-  data() {
-    return {};
-  },
-  computed: {},
-  methods: {},
-};
-</script>
-
-<style scoped lang="scss">
-.yx-dark-widget {
-    display: flex;
-    gap: 16px;
-    position: absolute;
-    top: 80px;
-    left: 50%;
-    transform: translateX(-50%);
-}
-</style>

src/components/yx-dark/widget/pressInfo/index.vue

@@ -0,0 +1,65 @@
+<!-- 
+    filename: index.vue
+    author: liubin
+    date: 2023-09-08 16:13:14
+    description: 
+-->
+
+<template>
+  <div class="yx-dark-press-info">
+    <template v-for="ch in pressInfo">
+      <YxDarkPressContainer
+        v-if="!isDot(ch)"
+        :key="ch"
+        :value="ch"
+        :class="{ digit: isDigit(ch) }"
+      />
+      <span class="dot" v-else>.</span>
+    </template>
+  </div>
+</template>
+
+<script>
+import YxDarkPressContainer from "./pressContainer.vue";
+export default {
+  name: "YxDarkPressInfo",
+  components: { YxDarkPressContainer },
+  props: {},
+  data() {
+    return {
+      press: 12.2,
+    };
+  },
+  computed: {
+    pressInfo() {
+      return ["压", "力", ...(this.press + ""), "Pa"];
+    },
+  },
+  methods: {
+    isDigit(ch) {
+      return ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"].includes(ch);
+    },
+    isDot(ch) {
+      return ch === ".";
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.yx-dark-press-info {
+  display: flex;
+  gap: 8px;
+}
+
+.dot {
+  font-size: 72px;
+  line-height: 90px;
+  font-family: "zcoolqingkehuangyouti-Regular", sans-serif;
+}
+
+.digit {
+  font-size: 80px;
+  line-height: 80px;
+}
+</style>

src/components/yx-dark/widget/pressInfo/pressContainer.vue

@@ -0,0 +1,38 @@
+<!-- 
+    filename: pressContainer.vue
+    author: liubin
+    date: 2023-09-08 16:10:43
+    description: 
+-->
+
+<template>
+  <div class="yx-dark-press-container">
+    {{ value }}
+  </div>
+</template>
+
+<script>
+export default {
+  name: "YxDarkPressContainer",
+  components: {},
+  props: ["value"],
+  data() {
+    return {};
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.yx-dark-press-container {
+  width: 60px;
+  height: 80px;
+  text-align: center;
+  padding-left: 6px;
+  font-size: 48px;
+  line-height: 90px;
+  font-family: "zcoolqingkehuangyouti-Regular", sans-serif;
+  background: url(../../../../assets/digit-bg.png) 100% / contain no-repeat;
+}
+</style>

src/views/MainArea.vue

@@ -7,16 +7,18 @@
 
 <template>
   <div class="main-area">
-    <YxDarkWidget />
+    <BaseInfo />
+    <PressInfo />
   </div>
 </template>
 
 <script>
-import YxDarkWidget from "@/components/yx-dark/widget/index.vue";
+import BaseInfo from "@/components/yx-dark/widget/baseInfo/index.vue";
+import PressInfo from "@/components/yx-dark/widget/pressInfo/index.vue";
 
 export default {
   name: "MainArea",
-  components: { YxDarkWidget },
+  components: { BaseInfo, PressInfo },
   props: {},
   data() {
     return {};