Commit ac9b01da7adf8ed964c810676771ea169f865660

Authored by fengwotao
1 parent c4cd1050

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

... ... @@ -7,16 +7,11 @@ import { chartInitConfig } from '@/settings/designSetting'
7 7 export const option = {
8 8 dataset: '我是标题',
9 9 attribute: {
10   - linearColors: [
11   - '#2AFFFF',
12   - '#2AFFFF',
13   - '#2AFFFF',
14   - '#2AFFFF',
15   - '#0084ff',
16   - '#0d4ea8',
17   - '#4592ff',
18   - '#ffcc33',
19   - ],
  10 + bgColor1:'#2AFFFF',
  11 + bgColor2:'#0084ff',
  12 + bgColor3:'#0d4ea8',
  13 + bgColor4:'#4592ff',
  14 + bgColor5:'#ffcc33',
20 15 fontSize: 20,
21 16 fontPos: {
22 17 x: 0,
... ...
... ... @@ -20,22 +20,44 @@
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 = '#2affff'"> 恢复默认 </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 = '#0084ff'"> 恢复默认 </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 = '#0d4ea8'"> 恢复默认 </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 = '#4592ff'"> 恢复默认 </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 = '#ffcc33'"> 恢复默认 </n-button>
39 61 </SettingItem>
40 62 </SettingItemBox>
41 63 </CollapseItem>
... ...
... ... @@ -9,12 +9,12 @@
9 9 >
10 10 <defs>
11 11 <linearGradient id="subtitle8_linear_0" x1="100%" y1="50%" x2="0%" y2="50%" gradientUnits="objectBoundingBox">
12   - <stop offset="0" :stop-color="attribute.linearColors[0]" stop-opacity="0.5" />
13   - <stop offset="1" :stop-color="attribute.linearColors[1]" stop-opacity="0" />
  12 + <stop offset="0" :stop-color="attribute.bgColor1" stop-opacity="0.5" />
  13 + <stop offset="1" :stop-color="attribute.bgColor1" stop-opacity="0" />
14 14 </linearGradient>
15 15 <linearGradient id="subtitle8_linear_1" x1="100%" y1="50%" x2="0%" y2="50%" gradientUnits="objectBoundingBox">
16   - <stop offset="0" :stop-color="attribute.linearColors[2]" stop-opacity="0.5" />
17   - <stop offset="1" :stop-color="attribute.linearColors[3]" stop-opacity="0" />
  16 + <stop offset="0" :stop-color="attribute.bgColor1" stop-opacity="0.5" />
  17 + <stop offset="1" :stop-color="attribute.bgColor1" stop-opacity="0" />
18 18 </linearGradient>
19 19 <filter
20 20 id="subtitle8_filter_14"
... ... @@ -55,7 +55,7 @@
55 55 <path
56 56 id="矩形 31"
57 57 fill-rule="evenodd"
58   - :style="{ fill: attribute.linearColors[4] }"
  58 + :style="{ fill: attribute.bgColor2 }"
59 59 transform="translate(17 1.9999999999999183) rotate(0 237.5 15)"
60 60 opacity="0.2"
61 61 :d="`M0,${h}L${w - 10},${h}L${w - 10},0L0,0L0,${h}Z `"
... ... @@ -79,7 +79,7 @@
79 79 <path
80 80 id="矩形 32"
81 81 fill-rule="evenodd"
82   - :style="{ fill: attribute.linearColors[5] }"
  82 + :style="{ fill: attribute.bgColor3 }"
83 83 :transform="`translate(4.979184719828627 ${
84 84 h / 2 - 34 / 2 + 6
85 85 }) rotate(-45 12.020815280171146 12.020815280171146)`"
... ... @@ -88,7 +88,7 @@
88 88 />
89 89 <rect
90 90 id="矩形 32"
91   - :style="{ stroke: attribute.linearColors[6], strokeWidth: 1, strokeOpacity: 1 }"
  91 + :style="{ stroke: attribute.bgColor4, strokeWidth: 1, strokeOpacity: 1 }"
92 92 :transform="`translate(4.979184719828627 ${
93 93 h / 2 - 34 / 2 + 6
94 94 }) rotate(-45 12.020815280171146 12.020815280171146)`"
... ... @@ -101,7 +101,7 @@
101 101 <path
102 102 id="圆形 10"
103 103 fill-rule="evenodd"
104   - :style="{ fill: attribute.linearColors[7] }"
  104 + :style="{ fill: attribute.bgColor5 }"
105 105 :transform="`translate(11.999999999999805 ${h / 2 - 34 / 2 + 12}) rotate(0 5 5)`"
106 106 opacity="1"
107 107 d="M5,0C2.24,0 0,2.24 0,5C0,7.76 2.24,10 5,10C7.76,10 10,7.76 10,5C10,2.24 7.76,0 5,0Z "
... ...