简柏林 / thingskit-view · Commits

Commit 8b2124be4a8be876ad22d7e13f792d26fee05640

Authored by fengwotao
1 parent ccc68f80

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

Inline Side-by-side
Showing 3 changed files with 94 additions and 67 deletions
... ... @@ -7,33 +7,14 @@ import { chartInitConfig } from '@/settings/designSetting'
7 7 export const option = {
8 8 dataset: '我是标题',
9 9 attribute: {
10   - linearColors: [
11   - '#0C4370',
12   - '#0557A0',
13   - '#2AFFFF',
14   - '#2AFFFF',
15   - '#2AFFFF',
16   - '#2AFFFF',
17   - '#ffcc33',
18   - '#ffcc33',
19   - '#25e4ea',
20   - '#73faff',
21   - '#73faff',
22   - '#2affff',
23   - '#2affff',
24   - '#2affff',
25   - '#2affff',
26   - '#2affff',
27   - '#2affff',
28   - '#2affff',
29   - '#2affff',
30   - '#2affff',
31   - '#2affff',
32   - '#2affff',
33   - '#2affff',
34   - '#2affff',
35   - '#009696'
36   - ],
  10 + bgColor1:'#0C4370',
  11 + bgColor2:'#0557A0',
  12 + bgColor3:'#2AFFFF',
  13 + bgColor4:'#ffcc33',
  14 + bgColor5:'#25e4ea',
  15 + bgColor6:'#73faff',
  16 + bgColor7:'#2affff',
  17 + bgColor8:'#009696',
37 18 fontSize: 20,
38 19 fontPos: {
39 20 x: 0,
... ...
... ... @@ -20,22 +20,68 @@
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   - >
28   - <SettingItem name="颜色">
29   - <n-color-picker
30   - size="small"
31   - :modes="['hex']"
32   - v-model:value="optionData.attribute.linearColors[index]"
33   - ></n-color-picker>
34   - </SettingItem>
35   - <SettingItem>
36   - <n-button size="small" @click="optionData.attribute.linearColors[index] = option.attribute.linearColors[index]">
37   - 恢复默认
38   - </n-button>
  23 + <SettingItemBox :name="`左边装饰`">
  24 + <SettingItem name="颜色">
  25 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor1"></n-color-picker>
  26 + </SettingItem>
  27 + <SettingItem>
  28 + <n-button size="small" @click="optionData.attribute.bgColor1 = '#0C4370'"> 恢复默认 </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 = '#0557A0'"> 恢复默认 </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>
  45 + </SettingItem>
  46 + </SettingItemBox>
  47 + <SettingItemBox :name="`圆形装饰`">
  48 + <SettingItem name="颜色">
  49 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor4"></n-color-picker>
  50 + </SettingItem>
  51 + <SettingItem>
  52 + <n-button size="small" @click="optionData.attribute.bgColor4 = '#ffcc33'"> 恢复默认 </n-button>
  53 + </SettingItem>
  54 + </SettingItemBox>
  55 + <SettingItemBox :name="`圆形装饰`">
  56 + <SettingItem name="颜色">
  57 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor5"></n-color-picker>
  58 + </SettingItem>
  59 + <SettingItem>
  60 + <n-button size="small" @click="optionData.attribute.bgColor5 = '#25e4ea'"> 恢复默认 </n-button>
  61 + </SettingItem>
  62 + </SettingItemBox>
  63 + <SettingItemBox :name="`圆形装饰`">
  64 + <SettingItem name="颜色">
  65 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor6"></n-color-picker>
  66 + </SettingItem>
  67 + <SettingItem>
  68 + <n-button size="small" @click="optionData.attribute.bgColor6 = '#73faff'"> 恢复默认 </n-button>
  69 + </SettingItem>
  70 + </SettingItemBox>
  71 + <SettingItemBox :name="`其他装饰1`">
  72 + <SettingItem name="颜色">
  73 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor7"></n-color-picker>
  74 + </SettingItem>
  75 + <SettingItem>
  76 + <n-button size="small" @click="optionData.attribute.bgColor7 = '#2affff'"> 恢复默认 </n-button>
  77 + </SettingItem>
  78 + </SettingItemBox>
  79 + <SettingItemBox :name="`其他装饰2`">
  80 + <SettingItem name="颜色">
  81 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor8"></n-color-picker>
  82 + </SettingItem>
  83 + <SettingItem>
  84 + <n-button size="small" @click="optionData.attribute.bgColor8= '#009696'"> 恢复默认 </n-button>
39 85 </SettingItem>
40 86 </SettingItemBox>
41 87 </CollapseItem>
... ...
... ... @@ -9,16 +9,16 @@
9 9 >
10 10 <defs>
11 11 <linearGradient id="subtitle6_linear_0" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
12   - <stop offset="0" :stop-color="attribute.linearColors[0]" stop-opacity="1" />
13   - <stop offset="1" :stop-color="attribute.linearColors[1]" stop-opacity="0" />
  12 + <stop offset="0" :stop-color="attribute.bgColor1" stop-opacity="1" />
  13 + <stop offset="1" :stop-color="attribute.bgColor2" stop-opacity="0" />
14 14 </linearGradient>
15 15 <linearGradient id="subtitle6_linear_1" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
16   - <stop offset="0" :stop-color="attribute.linearColors[2]" stop-opacity="1" />
17   - <stop offset="0.9988" :stop-color="attribute.linearColors[3]" stop-opacity="0" />
  16 + <stop offset="0" :stop-color="attribute.bgColor3" stop-opacity="1" />
  17 + <stop offset="0.9988" :stop-color="attribute.bgColor3" stop-opacity="0" />
18 18 </linearGradient>
19 19 <linearGradient id="subtitle6_linear_2" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
20   - <stop offset="0" :stop-color="attribute.linearColors[4]" stop-opacity="1" />
21   - <stop offset="0.9988" :stop-color="attribute.linearColors[5]" stop-opacity="0" />
  20 + <stop offset="0" :stop-color="attribute.bgColor3" stop-opacity="1" />
  21 + <stop offset="0.9988" :stop-color="attribute.bgColor3" stop-opacity="0" />
22 22 </linearGradient>
23 23 </defs>
24 24 <g opacity="1" transform="translate(0 0) rotate(0 246 15)">
... ... @@ -66,46 +66,46 @@
66 66 <path
67 67 id="圆形 18"
68 68 fill-rule="evenodd"
69   - :style="{ fill: attribute.linearColors[6] }"
  69 + :style="{ fill: attribute.bgColor4 }"
70 70 transform="translate(6 6) rotate(0 3 3)"
71 71 opacity="1"
72 72 d="M3,0C1.34,0 0,1.34 0,3C0,4.66 1.34,6 3,6C4.66,6 6,4.66 6,3C6,1.34 4.66,0 3,0Z "
73 73 />
74 74 <path
75 75 id="圆形 18"
76   - :style="{ stroke: attribute.linearColors[7], strokeWidth: 1, strokeOpacity: 1 }"
  76 + :style="{ stroke: attribute.bgColor4, strokeWidth: 1, strokeOpacity: 1 }"
77 77 transform="translate(3 3) rotate(0 6 6)"
78 78 d="M6,0C2.69,0 0,2.69 0,6C0,9.31 2.69,12 6,12C9.31,12 12,9.31 12,6C12,2.69 9.31,0 6,0Z "
79 79 />
80 80 <path
81 81 id="圆形 18"
82   - :style="{ stroke: attribute.linearColors[8], strokeWidth: 1, strokeOpacity: 0.18 }"
  82 + :style="{ stroke: attribute.bgColor5, strokeWidth: 1, strokeOpacity: 0.18 }"
83 83 transform="translate(0 0) rotate(0 9 9)"
84 84 d="M9,0C4.03,0 0,4.03 0,9C0,13.97 4.03,18 9,18C13.97,18 18,13.97 18,9C18,4.03 13.97,0 9,0Z "
85 85 />
86 86 <path
87 87 id="圆形 18"
88   - :style="{ stroke: attribute.linearColors[9], strokeWidth: 1, strokeOpacity: 1 }"
  88 + :style="{ stroke: attribute.bgColor6, strokeWidth: 1, strokeOpacity: 1 }"
89 89 transform="translate(0 0) rotate(0 4.5 4.5)"
90 90 d="M9,0C4.03,0 0,4.03 0,9 "
91 91 />
92 92 <path
93 93 id="圆形 18"
94   - :style="{ stroke: attribute.linearColors[10], strokeWidth: 1, strokeOpacity: 1 }"
  94 + :style="{ stroke: attribute.bgColor6, strokeWidth: 1, strokeOpacity: 1 }"
95 95 transform="translate(9 9) rotate(180 4.5 4.5)"
96 96 d="M9,0C4.03,0 0,4.03 0,9 "
97 97 />
98 98 </g>
99 99 <path
100 100 id="路径 14"
101   - :style="{ stroke: attribute.linearColors[11], strokeWidth: 0.5, strokeOpacity: 1 }"
  101 + :style="{ stroke: attribute.bgColor7, strokeWidth: 0.5, strokeOpacity: 1 }"
102 102 :transform="`translate(28 ${h / 2 - 8 / 2 + 8}) rotate(0 230.25 4)`"
103 103 :d="`M0,3 L7.49,8 L321.99,8 L332.25,0 L396.37,0 L401.44,4 L460.5,4 `"
104 104 />
105 105 <path
106 106 id="并集"
107 107 fill-rule="evenodd"
108   - :style="{ fill: attribute.linearColors[12] }"
  108 + :style="{ fill: attribute.bgColor7 }"
109 109 :transform="`translate(375 ${h / 2 - 3 / 2 + 10}) rotate(0 1.5 1.5)`"
110 110 opacity="0.5"
111 111 d="M1 1L1 0L2 0L2 1L3 1L3 2L2 2L2 3L1 3L1 2L0 2L0 1L1 1Z "
... ... @@ -113,7 +113,7 @@
113 113 <path
114 114 id="并集"
115 115 fill-rule="evenodd"
116   - :style="{ fill: attribute.linearColors[13] }"
  116 + :style="{ fill: attribute.bgColor7 }"
117 117 :transform="`translate(380 ${h / 2 - 3 / 2 + 10}) rotate(0 1.5 1.5)`"
118 118 opacity="0.5"
119 119 d="M1 1L1 0L2 0L2 1L3 1L3 2L2 2L2 3L1 3L1 2L0 2L0 1L1 1Z "
... ... @@ -121,7 +121,7 @@
121 121 <path
122 122 id="并集"
123 123 fill-rule="evenodd"
124   - :style="{ fill: attribute.linearColors[14] }"
  124 + :style="{ fill: attribute.bgColor7 }"
125 125 :transform="`translate(385 ${h / 2 - 3 / 2 + 10}) rotate(0 1.5 1.5)`"
126 126 opacity="0.5"
127 127 d="M1 1L1 0L2 0L2 1L3 1L3 2L2 2L2 3L1 3L1 2L0 2L0 1L1 1Z "
... ... @@ -129,7 +129,7 @@
129 129 <path
130 130 id="并集"
131 131 fill-rule="evenodd"
132   - :style="{ fill: attribute.linearColors[15] }"
  132 + :style="{ fill: attribute.bgColor7 }"
133 133 :transform="`translate(390 ${h / 2 - 3 / 2 + 10}) rotate(0 1.5 1.5)`"
134 134 opacity="0.5"
135 135 d="M1 1L1 0L2 0L2 1L3 1L3 2L2 2L2 3L1 3L1 2L0 2L0 1L1 1Z "
... ... @@ -137,7 +137,7 @@
137 137 <path
138 138 id="并集"
139 139 fill-rule="evenodd"
140   - :style="{ fill: attribute.linearColors[16] }"
  140 + :style="{ fill: attribute.bgColor7 }"
141 141 :transform="`translate(395 ${h / 2 - 3 / 2 + 10}) rotate(0 1.5 1.5)`"
142 142 opacity="0.5"
143 143 d="M1 1L1 0L2 0L2 1L3 1L3 2L2 2L2 3L1 3L1 2L0 2L0 1L1 1Z "
... ... @@ -145,7 +145,7 @@
145 145 <path
146 146 id="并集"
147 147 fill-rule="evenodd"
148   - :style="{ fill: attribute.linearColors[17] }"
  148 + :style="{ fill: attribute.bgColor7}"
149 149 :transform="`translate(400 ${h / 2 - 3 / 2 + 10}) rotate(0 1.5 1.5)`"
150 150 opacity="0.5"
151 151 d="M1 1L1 0L2 0L2 1L3 1L3 2L2 2L2 3L1 3L1 2L0 2L0 1L1 1Z "
... ... @@ -153,7 +153,7 @@
153 153 <path
154 154 id="并集"
155 155 fill-rule="evenodd"
156   - :style="{ fill: attribute.linearColors[18] }"
  156 + :style="{ fill: attribute.bgColor7 }"
157 157 :transform="`translate(405 ${h / 2 - 3 / 2 + 10}) rotate(0 1.5 1.5)`"
158 158 opacity="0.5"
159 159 d="M1 1L1 0L2 0L2 1L3 1L3 2L2 2L2 3L1 3L1 2L0 2L0 1L1 1Z "
... ... @@ -161,7 +161,7 @@
161 161 <path
162 162 id="矩形 47"
163 163 fill-rule="evenodd"
164   - :style="{ fill: attribute.linearColors[19] }"
  164 + :style="{ fill: attribute.bgColor7 }"
165 165 :transform="`translate(346 ${h / 2 - 7 / 2 + 7.5}) rotate(0 5.5 3.5)`"
166 166 opacity="1"
167 167 d="M0,7L2,7L11,0L9,0L0,7Z "
... ... @@ -169,7 +169,7 @@
169 169 <path
170 170 id="矩形 47"
171 171 fill-rule="evenodd"
172   - :style="{ fill: attribute.linearColors[20] }"
  172 + :style="{ fill: attribute.bgColor7 }"
173 173 :transform="`translate(342 ${h / 2 - 7 / 2 + 7.5}) rotate(0 5.5 3.5)`"
174 174 opacity="0.8"
175 175 d="M0,7L2,7L11,0L9,0L0,7Z "
... ... @@ -177,7 +177,7 @@
177 177 <path
178 178 id="矩形 47"
179 179 fill-rule="evenodd"
180   - :style="{ fill: attribute.linearColors[21] }"
  180 + :style="{ fill: attribute.bgColor7 }"
181 181 :transform="`translate(338 ${h / 2 - 7 / 2 + 7.5}) rotate(0 5.5 3.5)`"
182 182 opacity="0.6"
183 183 d="M0,7L2,7L11,0L9,0L0,7Z "
... ... @@ -185,14 +185,14 @@
185 185 <path
186 186 id="矩形 47"
187 187 fill-rule="evenodd"
188   - :style="{ fill: attribute.linearColors[22] }"
  188 + :style="{ fill: attribute.bgColor7 }"
189 189 :transform="`translate(334 ${h / 2 - 7 / 2 + 7.5}) rotate(0 5.5 3.5)`"
190 190 opacity="0.4"
191 191 d="M0,7L2,7L11,0L9,0L0,7Z "
192 192 />
193 193 <path
194 194 id="路径 15"
195   - :style="{ stroke: attribute.linearColors[23], strokeWidth: 1, strokeOpacity: 1 }"
  195 + :style="{ stroke: attribute.bgColor8, strokeWidth: 1, strokeOpacity: 1 }"
196 196 :transform="`translate(426 ${h / 2 - 4 / 2 + 3.5}) rotate(0 30.999999999999993 2)`"
197 197 d="M0,4L25,4L33.5,0L62,0 "
198 198 />
... ...