From da2dea1199c7c1b0635f48bf994e510998b7e87c Mon Sep 17 00:00:00 2001
From: "yezhichao@hwasmart.com" <yezhichao@hwasmart.com>
Date: Mon, 6 Dec 2021 05:48:23 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=9E=E7=8E=B0decoration1=E7=9A=84=E6=B8=B2?=
 =?UTF-8?q?=E6=9F=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/render/components/CenterCmp.vue          |   1 -
 src/render/components/Layout/Decoration1.vue | 381 ++++++++++++++++---
 2 files changed, 324 insertions(+), 58 deletions(-)

diff --git a/src/render/components/CenterCmp.vue b/src/render/components/CenterCmp.vue
index 23f9271..8d66b7d 100644
--- a/src/render/components/CenterCmp.vue
+++ b/src/render/components/CenterCmp.vue
@@ -44,7 +44,6 @@
 <script lang="ts" setup>
 import Ring from './Ring.vue'
 import Decoration1 from './Layout/Decoration1.vue'
-import Decoration5 from './Layout/Decoration5.vue'
 
 import { ref, computed } from 'vue'
 
diff --git a/src/render/components/Layout/Decoration1.vue b/src/render/components/Layout/Decoration1.vue
index dac3310..4fe4fe3 100644
--- a/src/render/components/Layout/Decoration1.vue
+++ b/src/render/components/Layout/Decoration1.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="dv-decoration-1" ref="dom">
-    <svg :width="`${svgWH[0]}px`" :height="`${svgWH[1]}px`" :style="`transform:scale(${svgScale[0]},${svgScale[1]});`">
-
+    <svg :width="`${svgWH[0]}px`" :height="`${svgWH[1]}px`">
       <template
         v-for="(point, i) in points"
       >
@@ -85,67 +84,335 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, reactive } from 'vue'
-
-
-const dom    = ref(null)
-const width  = ref(0)
-const height = ref(0)
-
 const svgWH        = [200, 50]
-const rowNum       = 4
-const rowPoints    = 20
 const defaultColor = ['#fff', '#0de7c2']
 
 const pointSideLength     = 2.5
 const halfPointSideLength = pointSideLength / 2
 
-
-
-let rects    = reactive([])
-let points   = reactive([])
-let svgScale = reactive([1, 1])
-
-const calcPointsPosition = () => {
-  const [w, h] = svgWH
-  const horizontalGap = w / (rowPoints + 1)
-  const verticalGap   = h / (rowNum + 1)
-
-  let pointArr = new Array(rowNum).fill(0).map((foo, i) =>
-    new Array(rowPoints).fill(0).map((foo, j) => [
-      horizontalGap * (j + 1), verticalGap * (i + 1)
-    ])
-  )
-
-  points = pointArr.reduce((all, item) => [...all, ...item], [])
-}
-
-
-const calcRectsPosition = () => {
-  const rect1 = points[rowPoints * 2 - 1]
-  const rect2 = points[rowPoints * 2 - 3]
-
-  rects = [rect1, rect2]
-}
-
-const calcSVGData = () => {
-  calcPointsPosition()
-  calcRectsPosition()
-  calcScale()
-}
-
-const calcScale = () => {
-  const [w, h] = svgWH
-
-  svgScale = [width.value / w, height.value / h]
-}
-
-onMounted(() => {
-	width.value  = dom.value.clientWidth
-	height.value = dom.value.clientHeight
-
-  calcSVGData()
-})
+const rects    = [[190.47619047619048, 20], [171.42857142857142, 20]]
+const points   = [
+    [
+        9.523809523809524,
+        10
+    ],
+    [
+        19.047619047619047,
+        10
+    ],
+    [
+        28.57142857142857,
+        10
+    ],
+    [
+        38.095238095238095,
+        10
+    ],
+    [
+        47.61904761904762,
+        10
+    ],
+    [
+        57.14285714285714,
+        10
+    ],
+    [
+        66.66666666666667,
+        10
+    ],
+    [
+        76.19047619047619,
+        10
+    ],
+    [
+        85.71428571428571,
+        10
+    ],
+    [
+        95.23809523809524,
+        10
+    ],
+    [
+        104.76190476190476,
+        10
+    ],
+    [
+        114.28571428571428,
+        10
+    ],
+    [
+        123.80952380952381,
+        10
+    ],
+    [
+        133.33333333333334,
+        10
+    ],
+    [
+        142.85714285714286,
+        10
+    ],
+    [
+        152.38095238095238,
+        10
+    ],
+    [
+        161.9047619047619,
+        10
+    ],
+    [
+        171.42857142857142,
+        10
+    ],
+    [
+        180.95238095238096,
+        10
+    ],
+    [
+        190.47619047619048,
+        10
+    ],
+    [
+        9.523809523809524,
+        20
+    ],
+    [
+        19.047619047619047,
+        20
+    ],
+    [
+        28.57142857142857,
+        20
+    ],
+    [
+        38.095238095238095,
+        20
+    ],
+    [
+        47.61904761904762,
+        20
+    ],
+    [
+        57.14285714285714,
+        20
+    ],
+    [
+        66.66666666666667,
+        20
+    ],
+    [
+        76.19047619047619,
+        20
+    ],
+    [
+        85.71428571428571,
+        20
+    ],
+    [
+        95.23809523809524,
+        20
+    ],
+    [
+        104.76190476190476,
+        20
+    ],
+    [
+        114.28571428571428,
+        20
+    ],
+    [
+        123.80952380952381,
+        20
+    ],
+    [
+        133.33333333333334,
+        20
+    ],
+    [
+        142.85714285714286,
+        20
+    ],
+    [
+        152.38095238095238,
+        20
+    ],
+    [
+        161.9047619047619,
+        20
+    ],
+    [
+        171.42857142857142,
+        20
+    ],
+    [
+        180.95238095238096,
+        20
+    ],
+    [
+        190.47619047619048,
+        20
+    ],
+    [
+        9.523809523809524,
+        30
+    ],
+    [
+        19.047619047619047,
+        30
+    ],
+    [
+        28.57142857142857,
+        30
+    ],
+    [
+        38.095238095238095,
+        30
+    ],
+    [
+        47.61904761904762,
+        30
+    ],
+    [
+        57.14285714285714,
+        30
+    ],
+    [
+        66.66666666666667,
+        30
+    ],
+    [
+        76.19047619047619,
+        30
+    ],
+    [
+        85.71428571428571,
+        30
+    ],
+    [
+        95.23809523809524,
+        30
+    ],
+    [
+        104.76190476190476,
+        30
+    ],
+    [
+        114.28571428571428,
+        30
+    ],
+    [
+        123.80952380952381,
+        30
+    ],
+    [
+        133.33333333333334,
+        30
+    ],
+    [
+        142.85714285714286,
+        30
+    ],
+    [
+        152.38095238095238,
+        30
+    ],
+    [
+        161.9047619047619,
+        30
+    ],
+    [
+        171.42857142857142,
+        30
+    ],
+    [
+        180.95238095238096,
+        30
+    ],
+    [
+        190.47619047619048,
+        30
+    ],
+    [
+        9.523809523809524,
+        40
+    ],
+    [
+        19.047619047619047,
+        40
+    ],
+    [
+        28.57142857142857,
+        40
+    ],
+    [
+        38.095238095238095,
+        40
+    ],
+    [
+        47.61904761904762,
+        40
+    ],
+    [
+        57.14285714285714,
+        40
+    ],
+    [
+        66.66666666666667,
+        40
+    ],
+    [
+        76.19047619047619,
+        40
+    ],
+    [
+        85.71428571428571,
+        40
+    ],
+    [
+        95.23809523809524,
+        40
+    ],
+    [
+        104.76190476190476,
+        40
+    ],
+    [
+        114.28571428571428,
+        40
+    ],
+    [
+        123.80952380952381,
+        40
+    ],
+    [
+        133.33333333333334,
+        40
+    ],
+    [
+        142.85714285714286,
+        40
+    ],
+    [
+        152.38095238095238,
+        40
+    ],
+    [
+        161.9047619047619,
+        40
+    ],
+    [
+        171.42857142857142,
+        40
+    ],
+    [
+        180.95238095238096,
+        40
+    ],
+    [
+        190.47619047619048,
+        40
+    ]
+]
 </script>
 
 <style>