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