update 完成中部

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

@@ -31,11 +31,11 @@ export default {
 
 <style scoped lang="scss">
 .base-info {
-    display: flex;
+  display: flex;
-    gap: 16px;
+  gap: 16px;
-    position: absolute;
+  // position: absolute;
-    top: 80px;
+  // top: 80px;
-    left: 50%;
+  // left: 50%;
-    transform: translateX(-50%);
+  // transform: translateX(-50%);
 }
 </style>

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

@@ -0,0 +1,65 @@
+<!-- 
+    filename: index.vue
+    author: liubin
+    date: 2023-09-08 16:13:14
+    description: 
+-->
+
+<template>
+  <div class="yx-dark-runtime-info">
+    <template v-for="ch in pressInfo">
+      <YxDarkRuntimeContainer
+        v-if="!isDot(ch)"
+        :key="ch"
+        :value="ch"
+        :class="{ digit: isDigit(ch) }"
+      />
+      <span class="dot" v-else>.</span>
+    </template>
+  </div>
+</template>
+
+<script>
+import YxDarkRuntimeContainer from "./runtimeContainer.vue";
+export default {
+  name: "YxDarkRuntimeInfo",
+  components: { YxDarkRuntimeContainer },
+  props: {},
+  data() {
+    return {
+      days: 122,
+    };
+  },
+  computed: {
+    pressInfo() {
+      return ["运", "行", ...(this.days + ""), "天"];
+    },
+  },
+  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-runtime-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/runtimeInfo/runtimeContainer.vue

@@ -0,0 +1,38 @@
+<!-- 
+    filename: pressContainer.vue
+    author: liubin
+    date: 2023-09-08 16:10:43
+    description: 
+-->
+
+<template>
+  <div class="yx-dark-runtime-container">
+    {{ value }}
+  </div>
+</template>
+
+<script>
+export default {
+  name: "YxDarkRuntimeContainer",
+  components: {},
+  props: ["value"],
+  data() {
+    return {};
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.yx-dark-runtime-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,18 +7,20 @@
 
 <template>
   <div class="main-area">
-    <BaseInfo />
     <PressInfo />
+    <BaseInfo />
+    <RuntimeInfo />
   </div>
 </template>
 
 <script>
 import BaseInfo from "@/components/yx-dark/widget/baseInfo/index.vue";
 import PressInfo from "@/components/yx-dark/widget/pressInfo/index.vue";
+import RuntimeInfo from "@/components/yx-dark/widget/runtimeInfo/index.vue";
 
 export default {
   name: "MainArea",
-  components: { BaseInfo, PressInfo },
+  components: { BaseInfo, PressInfo, RuntimeInfo },
   props: {},
   data() {
     return {};
@@ -31,6 +33,10 @@ export default {
 <style scoped lang="scss">
 .main-area {
   position: relative;
-  background: url("../assets/main-area-bg.png") 35% 98% / 95% no-repeat;
+  background: url("../assets/main-area-bg.png") 40% 98% / 97% no-repeat;
+  display: flex;
+  justify-content: center;
+  gap: 240px;
+  padding-top: 96px;
 }
 </style>