完成第一屏幕页面基本布局以及TheHeader和DigitalFlop的UI界面

src/render/components/Layout/Decoration8.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="decoration-8" ref="dom">
+    <svg :width="width" :height="height">
+      <polyline
+        :stroke="stroke"
+        stroke-width="2"
+        fill="transparent"
+        :points="`${xPos(0)}, 0 ${xPos(30)}, ${height / 2}`"
+      />
+
+      <polyline
+        :stroke="stroke"
+        stroke-width="2"
+        fill="transparent"
+        :points="`${xPos(20)}, 0 ${xPos(50)}, ${height / 2} ${xPos(width)}, ${height / 2}`"
+      />
+
+      <polyline
+        :stroke="stroke"
+        fill="transparent"
+        stroke-width="3"
+        :points="`${xPos(0)}, ${height - 3}, ${xPos(200)}, ${height - 3}`"
+      />
+    </svg>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue'
+
+const stroke = '#3f96a5'
+
+const dom    = ref(null)
+const width  = ref(0)
+const height = ref(0)
+onMounted(() => {
+	width.value  = dom.value.clientWidth
+	height.value = dom.value.clientHeight
+})
+
+const props = defineProps({
+  reverse: Boolean
+})
+const xPos = (val: number) => props.reverse ? width.value - val : val
+</script>