简柏林 / thingskit-view · Commits

Commit ccc68f806bdd7bec5ce72506969f8be01c85523a

Authored by fengwotao
1 parent a3a4a3be

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

Inline Side-by-side
Showing 3 changed files with 39 additions and 49 deletions
... ... @@ -7,25 +7,9 @@ import { chartInitConfig } from '@/settings/designSetting'
7 7 export const option = {
8 8 dataset: '我是标题',
9 9 attribute: {
10   - linearColors: [
11   - '#060F1E',
12   - '#032E52',
13   - '#060F1E',
14   - '#2affff',
15   - '#2affff',
16   - '#2affff',
17   - '#2affff',
18   - '#2affff',
19   - '#2affff',
20   - '#2affff',
21   - '#2affff',
22   - '#2affff',
23   - '#2affff',
24   - '#2affff',
25   - '#2affff',
26   - '#2affff',
27   - '#2affff'
28   - ],
  10 + bgColor1:'#060F1E',
  11 + bgColor2:'#032E52',
  12 + bgColor3:'#2affff',
29 13 fontSize: 20,
30 14 fontPos: {
31 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 = '#060F1E'"> 恢复默认 </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 = '#032E52'"> 恢复默认 </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>
... ...
... ... @@ -9,27 +9,27 @@
9 9 >
10 10 <defs>
11 11 <linearGradient id="subtitle5_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="0.498" :stop-color="attribute.linearColors[1]" stop-opacity="1" />
14   - <stop offset="1" :stop-color="attribute.linearColors[2]" stop-opacity="1" />
  12 + <stop offset="0" :stop-color="attribute.bgColor1" stop-opacity="1" />
  13 + <stop offset="0.498" :stop-color="attribute.bgColor2" stop-opacity="1" />
  14 + <stop offset="1" :stop-color="attribute.bgColor1" stop-opacity="1" />
15 15 </linearGradient>
16 16 <linearGradient id="subtitle5_linear_1" x1="0%" y1="0%" x2="1%" y2="100%" gradientUnits="objectBoundingBox">
17   - <stop offset="0" :stop-color="attribute.linearColors[3]" stop-opacity="0" />
18   - <stop offset="0.5313" :stop-color="attribute.linearColors[4]" stop-opacity="1" />
19   - <stop offset="0.9988" :stop-color="attribute.linearColors[5]" stop-opacity="0" />
  17 + <stop offset="0" :stop-color="attribute.bgColor3" stop-opacity="0" />
  18 + <stop offset="0.5313" :stop-color="attribute.bgColor3" stop-opacity="1" />
  19 + <stop offset="0.9988" :stop-color="attribute.bgColor3" stop-opacity="0" />
20 20 </linearGradient>
21 21 <linearGradient id="subtitle5_linear_2" x1="0%" y1="0%" x2="1%" y2="100%" gradientUnits="objectBoundingBox">
22   - <stop offset="0" :stop-color="attribute.linearColors[6]" stop-opacity="0" />
23   - <stop offset="0.5313" :stop-color="attribute.linearColors[7]" stop-opacity="1" />
24   - <stop offset="0.9988" :stop-color="attribute.linearColors[8]" stop-opacity="0" />
  22 + <stop offset="0" :stop-color="attribute.bgColor3" stop-opacity="0" />
  23 + <stop offset="0.5313" :stop-color="attribute.bgColor3" stop-opacity="1" />
  24 + <stop offset="0.9988" :stop-color="attribute.bgColor3" stop-opacity="0" />
25 25 </linearGradient>
26 26 <linearGradient id="subtitle5_linear_3" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
27   - <stop offset="0" :stop-color="attribute.linearColors[9]" stop-opacity="1" />
28   - <stop offset="1" :stop-color="attribute.linearColors[10]" stop-opacity="0" />
  27 + <stop offset="0" :stop-color="attribute.bgColor3" stop-opacity="1" />
  28 + <stop offset="1" :stop-color="attribute.bgColor3" stop-opacity="0" />
29 29 </linearGradient>
30 30 <linearGradient id="subtitle5_linear_4" x1="100%" y1="50%" x2="0%" y2="50%" gradientUnits="objectBoundingBox">
31   - <stop offset="0" :stop-color="attribute.linearColors[11]" stop-opacity="1" />
32   - <stop offset="1" :stop-color="attribute.linearColors[12]" stop-opacity="0" />
  31 + <stop offset="0" :stop-color="attribute.bgColor3" stop-opacity="1" />
  32 + <stop offset="1" :stop-color="attribute.bgColor3" stop-opacity="0" />
33 33 </linearGradient>
34 34 </defs>
35 35 <g opacity="1" transform="translate(0 0) rotate(0 246 15)">
... ... @@ -89,14 +89,14 @@
89 89 />
90 90 <path
91 91 id="多边形 1"
92   - :style="{stroke: attribute.linearColors[13], strokeWidth: 1,strokeOpacity: 1}"
  92 + :style="{stroke: attribute.bgColor3, strokeWidth: 1,strokeOpacity: 1}"
93 93 transform="translate(2.348076211353317 2.3480762113533187) rotate(30 6.415063509461105 6.4150635094611035)"
94 94 d="M6.42,0L0.86,3.21L0.86,9.62L6.42,12.83L11.97,9.62L11.97,3.21L6.42,0Z "
95 95 />
96 96 <path
97 97 id="圆形 8"
98 98 fill-rule="evenodd"
99   - :style="{ fill: attribute.linearColors[14] }"
  99 + :style="{ fill: attribute.bgColor3 }"
100 100 transform="translate(6.763139720814309 6.763139720814425) rotate(0 2 2)"
101 101 opacity="1"
102 102 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 "
... ... @@ -118,14 +118,14 @@
118 118 />
119 119 <path
120 120 id="多边形 1"
121   - :style="{stroke: attribute.linearColors[15], strokeWidth: 1, strokeOpacity: 1}"
  121 + :style="{stroke: attribute.bgColor3, strokeWidth: 1, strokeOpacity: 1}"
122 122 transform="translate(28.07836663013154 2.3480762113533187) rotate(-30 6.415063509461105 6.4150635094611035)"
123 123 d="M0.86,9.62L6.42,12.83L11.97,9.62L11.97,3.21L6.42,0L0.86,3.21L0.86,9.62Z "
124 124 />
125 125 <path
126 126 id="圆形 8"
127 127 fill-rule="evenodd"
128   - :style="{ fill: attribute.linearColors[16] }"
  128 + :style="{ fill: attribute.bgColor3 }"
129 129 transform="translate(32.49343013959276 6.763139720814425) rotate(0 2 2)"
130 130 opacity="1"
131 131 d="M2,4C3.1,4 4,3.1 4,2C4,0.9 3.1,0 2,0C0.9,0 0,0.9 0,2C0,3.1 0.9,4 2,4Z "
... ...