简柏林 / thingskit-view · Commits

Commit e622770606fe62772e51a4cc9416c07996e8c4de

Authored by fengwotao
1 parent 43378e43

fix(src/packages/): 优化小组件下小标题3右边配置装饰

Inline Side-by-side
Showing 3 changed files with 34 additions and 39 deletions
... ... @@ -7,20 +7,9 @@ import { chartInitConfig } from '@/settings/designSetting'
7 7 export const option = {
8 8 dataset: '我是标题',
9 9 attribute: {
10   - linearColors: [
11   - '#21649C',
12   - '#060F1E',
13   - '#2AFFFF',
14   - '#2AFFFF',
15   - '#2AFFFF',
16   - '#2AFFFF',
17   - '#2affff',
18   - '#16d9d9',
19   - '#2affff',
20   - '#2affff',
21   - '#2affff',
22   - '#2affff'
23   - ],
  10 + bgColor1:'#21649C',
  11 + bgColor2:'#060F1E',
  12 + bgColor3:'#2AFFFF',
24 13 fontSize: 20,
25 14 fontPos: {
26 15 x: 0,
... ...
... ... @@ -20,22 +20,28 @@
20 20 <n-button size="small" @click="optionData.attribute.fontColor = '#2AFFFF'"> 恢复默认 </n-button>
21 21 </SettingItem>
22 22 </SettingItemBox>
23   - <SettingItemBox
24   - :name="`装饰颜色-${index + 1}`"
25   - v-for="(item, index) in optionData.attribute.linearColors"
26   - :key="index"
27   - >
  23 + <SettingItemBox :name="`左边装饰`">
28 24 <SettingItem name="颜色">
29   - <n-color-picker
30   - size="small"
31   - :modes="['hex']"
32   - v-model:value="optionData.attribute.linearColors[index]"
33   - ></n-color-picker>
  25 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor1"></n-color-picker>
34 26 </SettingItem>
35 27 <SettingItem>
36   - <n-button size="small" @click="optionData.attribute.linearColors[index] = option.attribute.linearColors[index]">
37   - 恢复默认
38   - </n-button>
  28 + <n-button size="small" @click="optionData.attribute.bgColor1 = '#21649C'"> 恢复默认 </n-button>
  29 + </SettingItem>
  30 + </SettingItemBox>
  31 + <SettingItemBox :name="`右边装饰`">
  32 + <SettingItem name="颜色">
  33 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor2"></n-color-picker>
  34 + </SettingItem>
  35 + <SettingItem>
  36 + <n-button size="small" @click="optionData.attribute.bgColor2 = '#060F1E'"> 恢复默认 </n-button>
  37 + </SettingItem>
  38 + </SettingItemBox>
  39 + <SettingItemBox :name="`其他装饰`">
  40 + <SettingItem name="颜色">
  41 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor3"></n-color-picker>
  42 + </SettingItem>
  43 + <SettingItem>
  44 + <n-button size="small" @click="optionData.attribute.bgColor3 = '#2AFFFF'"> 恢复默认 </n-button>
39 45 </SettingItem>
40 46 </SettingItemBox>
41 47 </CollapseItem>
... ...
... ... @@ -3,16 +3,16 @@
3 3 <svg :width="w" :height="h" fill="none">
4 4 <defs>
5 5 <linearGradient id="title3_0" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
6   - <stop offset="0" :stop-color="attribute.linearColors[0]" stop-opacity="1" />
7   - <stop offset="1" :stop-color="attribute.linearColors[1]" stop-opacity="1" />
  6 + <stop offset="0" :stop-color="attribute.bgColor1" stop-opacity="1" />
  7 + <stop offset="1" :stop-color="attribute.bgColor2" stop-opacity="1" />
8 8 </linearGradient>
9 9 <linearGradient id="title3_1" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
10   - <stop offset="0" :stop-color="attribute.linearColors[2]" stop-opacity="1" />
11   - <stop offset="1" :stop-color="attribute.linearColors[3]" stop-opacity="0" />
  10 + <stop offset="0" :stop-color="attribute.bgColor3" stop-opacity="1" />
  11 + <stop offset="1" :stop-color="attribute.bgColor3" stop-opacity="0" />
12 12 </linearGradient>
13 13 <linearGradient id="title3_2" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
14   - <stop offset="0" :stop-color="attribute.linearColors[4]" stop-opacity="1" />
15   - <stop offset="1" :stop-color="attribute.linearColors[5]" stop-opacity="0" />
  14 + <stop offset="0" :stop-color="attribute.bgColor3" stop-opacity="1" />
  15 + <stop offset="1" :stop-color="attribute.bgColor3" stop-opacity="0" />
16 16 </linearGradient>
17 17 </defs>
18 18 <g opacity="1" transform="translate(-6.249999273677531e-8 0.5) rotate(0 160.00000003125 15.000000000000005)">
... ... @@ -54,13 +54,13 @@
54 54 />
55 55 <path
56 56 id="路径 5"
57   - :style="{ stroke: attribute.linearColors[10], strokeWidth: 1, strokeOpacity: 1, strokeDasharray: 0 }"
  57 + :style="{ stroke: attribute.bgColor3, strokeWidth: 1, strokeOpacity: 1, strokeDasharray: 0 }"
58 58 transform="translate(0 0.0005) rotate(0 2.000000062499999 0)"
59 59 d="M0,0L4,0 "
60 60 />
61 61 <path
62 62 id="路径 5"
63   - :style="{ stroke: attribute.linearColors[11], strokeWidth: 1, strokeOpacity: 1, strokeDasharray: 0 }"
  63 + :style="{ stroke: attribute.bgColor3, strokeWidth: 1, strokeOpacity: 1, strokeDasharray: 0 }"
64 64 :transform="`translate(0 ${h - 1}) rotate(0 2.000000062499999 0)`"
65 65 d="M0,0 L4,0 "
66 66 />
... ... @@ -68,7 +68,7 @@
68 68 <path
69 69 id="三角形 1"
70 70 fill-rule="evenodd"
71   - :style="{ fill: attribute.linearColors[6] }"
  71 + :style="{ fill: attribute.bgColor3 }"
72 72 transform="translate(4 0) rotate(0 6.598076211353316 4.5)"
73 73 opacity="1"
74 74 d="M2.8,9L13.2,9L0,0L2.8,9Z "
... ... @@ -76,7 +76,7 @@
76 76 <path
77 77 id="三角形 1"
78 78 fill-rule="evenodd"
79   - :style="{ fill: attribute.linearColors[7] }"
  79 + :style="{ fill: attribute.bgColor3 }"
80 80 transform="translate(4 9) rotate(0 6.598076211353316 4.5)"
81 81 opacity="1"
82 82 d="M13.2,0L2.8,0L0,9L13.2,0Z "
... ... @@ -84,7 +84,7 @@
84 84 <path
85 85 id="圆形 7"
86 86 fill-rule="evenodd"
87   - :style="{ fill: attribute.linearColors[8] }"
  87 + :style="{ fill: attribute.bgColor3 }"
88 88 transform="translate(0 7) rotate(0 2 2)"
89 89 opacity="1"
90 90 d="M2,0C0.9,0 0,0.9 0,2C0,3.1 0.9,4 2,4C3.1,4 4,3.1 4,2C4,0.9 3.1,0 2,0Z "
... ... @@ -93,7 +93,7 @@
93 93 <path
94 94 id="矩形 17"
95 95 fill-rule="evenodd"
96   - :style="{ fill: attribute.linearColors[9] }"
  96 + :style="{ fill: attribute.bgColor3 }"
97 97 transform="translate(6.249999895402425e-8 2) rotate(0 0.5 13)"
98 98 opacity="1"
99 99 :d="`M0,${h - 5}L1,${h - 5}L1,0L0,0L0,${h - 5}Z`"
... ...