简柏林 / thingskit-view · Commits

Commit c4cd1050115099d00ef97bc0ad474f9807d0d9d4

Authored by fengwotao
1 parent 8b2124be

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

Inline Side-by-side
Showing 3 changed files with 63 additions and 42 deletions
... ... @@ -7,21 +7,12 @@ import { chartInitConfig } from '@/settings/designSetting'
7 7 export const option = {
8 8 dataset: '我是标题',
9 9 attribute: {
10   - linearColors: [
11   - '#21649C',
12   - '#060F1E',
13   - '#2284D5',
14   - '#000F1B',
15   - '#2affff',
16   - '#2affff',
17   - '#2affff',
18   - '#2affff',
19   - '#2affff',
20   - '#2affff',
21   - '#ffcc33',
22   - '#ffcc33',
23   - '#ffcc33',
24   - ],
  10 + bgColor1:'#21649C',
  11 + bgColor2:'#060F1E',
  12 + bgColor3:'#2284D5',
  13 + bgColor4:'#000F1B',
  14 + bgColor5:'#2affff',
  15 + bgColor6:'#ffcc33',
25 16 fontSize: 20,
26 17 fontPos: {
27 18 x: 0,
... ...
... ... @@ -20,22 +20,52 @@
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>
  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 = '#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 = '#2284D5'"> 恢复默认 </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 = '#000F1B'"> 恢复默认 </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 = '#2affff'"> 恢复默认 </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>
34 66 </SettingItem>
35 67 <SettingItem>
36   - <n-button size="small" @click="optionData.attribute.linearColors[index] = option.attribute.linearColors[index]">
37   - 恢复默认
38   - </n-button>
  68 + <n-button size="small" @click="optionData.attribute.bgColor6 = '#ffcc33'"> 恢复默认 </n-button>
39 69 </SettingItem>
40 70 </SettingItemBox>
41 71 </CollapseItem>
... ...
... ... @@ -16,12 +16,12 @@
16 16 y2="50%"
17 17 gradientUnits="objectBoundingBox"
18 18 >
19   - <stop offset="0" :stop-color="attribute.linearColors[0]" stop-opacity="1" />
20   - <stop offset="1" :stop-color="attribute.linearColors[1]" stop-opacity="1" />
  19 + <stop offset="0" :stop-color="attribute.bgColor1" stop-opacity="1" />
  20 + <stop offset="1" :stop-color="attribute.bgColor2" stop-opacity="1" />
21 21 </linearGradient>
22 22 <linearGradient id="subtitle7_linear_1" x1="0%" y1="50%" x2="87.75%" y2="50%" gradientUnits="objectBoundingBox">
23   - <stop offset="0" :stop-color="attribute.linearColors[2]" stop-opacity="1" />
24   - <stop offset="1" :stop-color="attribute.linearColors[3]" stop-opacity="1" />
  23 + <stop offset="0" :stop-color="attribute.bgColor3" stop-opacity="1" />
  24 + <stop offset="1" :stop-color="attribute.bgColor3" stop-opacity="1" />
25 25 </linearGradient>
26 26 </defs>
27 27 <g opacity="1" transform="translate(0 0) rotate(0 246 15.000499999999972)">
... ... @@ -62,7 +62,7 @@
62 62 <g opacity="1" :transform="`translate(7 ${h / 2 - 17 / 2 - 4}) rotate(0 9 9)`">
63 63 <rect
64 64 id="矩形 13"
65   - :style="{ stroke: attribute.linearColors[4], strokeWidth: 1, strokeOpacity: 1 }"
  65 + :style="{ stroke: attribute.bgColor4, strokeWidth: 1, strokeOpacity: 1 }"
66 66 transform="translate(0 0) rotate(0 9 9)"
67 67 x="0.5"
68 68 y="0.5"
... ... @@ -72,20 +72,20 @@
72 72 />
73 73 <path
74 74 id="直线 1"
75   - :style="{ stroke: attribute.linearColors[5], strokeWidth: 1, strokeOpacity: 0.43 }"
  75 + :style="{ stroke: attribute.bgColor4, strokeWidth: 1, strokeOpacity: 0.43 }"
76 76 transform="translate(1 1) rotate(0 8 8)"
77 77 d="M0,0L16,16 "
78 78 />
79 79 <path
80 80 id="直线 1"
81   - :style="{ stroke: attribute.linearColors[6], strokeWidth: 1, strokeOpacity: 0.43 }"
  81 + :style="{ stroke: attribute.bgColor4, strokeWidth: 1, strokeOpacity: 0.43 }"
82 82 transform="translate(1 1) rotate(0 8 8)"
83 83 d="M16,0L0,16 "
84 84 />
85 85 <path
86 86 id="矩形 14"
87 87 fill-rule="evenodd"
88   - :style="{ fill: attribute.linearColors[7] }"
  88 + :style="{ fill: attribute.bgColor4 }"
89 89 transform="translate(5 5) rotate(0 4 4)"
90 90 opacity="1"
91 91 d="M0,8L8,8L8,0L0,0L0,8Z "
... ... @@ -93,20 +93,20 @@
93 93 </g>
94 94 <path
95 95 id="路径 4"
96   - :style="{ stroke: attribute.linearColors[8], strokeWidth: 1, strokeOpacity: 0.2 }"
  96 + :style="{ stroke: attribute.bgColor4, strokeWidth: 1, strokeOpacity: 0.2 }"
97 97 :transform="`translate(0 ${h - 10}) rotate(0 221.50000000000003 3.5)`"
98 98 d="M0,7L435.04,7L443,0 "
99 99 />
100 100 <path
101 101 id="路径 4"
102   - :style="{ stroke: attribute.linearColors[9], strokeWidth: 1, strokeOpacity: 1 }"
  102 + :style="{ stroke: attribute.bgColor4, strokeWidth: 1, strokeOpacity: 1 }"
103 103 :transform="`translate(0 ${h - 3}) rotate(0 17.5208019893046 0.0005)`"
104 104 d="M0,0L35.04,0 "
105 105 />
106 106 <path
107 107 id="矩形 15"
108 108 fill-rule="evenodd"
109   - :style="{ fill: attribute.linearColors[10] }"
  109 + :style="{ fill: attribute.bgColor6 }"
110 110 :transform="`translate(441 ${h - 10}) rotate(0 9.5 3.5)`"
111 111 opacity="0.2"
112 112 d="M0,7L12.09,7L19,0L6.91,0L0,7Z "
... ... @@ -114,7 +114,7 @@
114 114 <path
115 115 id="矩形 15"
116 116 fill-rule="evenodd"
117   - :style="{ fill: attribute.linearColors[11] }"
  117 + :style="{ fill: attribute.bgColor6 }"
118 118 :transform="`translate(457 ${h - 10}) rotate(0 9.5 3.5)`"
119 119 opacity="0.6"
120 120 d="M0,7L12.09,7L19,0L6.91,0L0,7Z "
... ... @@ -122,7 +122,7 @@
122 122 <path
123 123 id="矩形 15"
124 124 fill-rule="evenodd"
125   - :style="{ fill: attribute.linearColors[12] }"
  125 + :style="{ fill: attribute.bgColor6 }"
126 126 :transform="`translate(473 ${h - 10}) rotate(0 9.5 3.5)`"
127 127 opacity="1"
128 128 d="M0,7L12.09,7L19,0L6.91,0L0,7Z "
... ...