简柏林 / thingskit-front · Commits

Commit 2cf2e197862bacd86a9b3de27be6d10d13b78f7c

Authored by ww
1 parent 3788b004

perf: update data board detail UI style

Inline Side-by-side
Showing 13 changed files with 178 additions and 1238 deletions
src/assets/images/digital-wrapper-bg-int.png renamed from src/assets/images/digital-wrapper-bg.png

1.48 KB
  1 +<?xml version="1.0" encoding="UTF-8"?>
  2 +<svg width="18px" height="20px" viewBox="0 0 18 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  3 + <title>趋势</title>
  4 + <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
  5 + <g id="看板详情" transform="translate(-749.000000, -288.000000)" fill="#9D9D9E" fill-rule="nonzero">
  6 + <g id="1" transform="translate(302.000000, 266.000000)">
  7 + <g id="趋势" transform="translate(447.000000, 21.428571)">
  8 + <path d="M1.42498406,15.6605947 C1.06725816,15.6605947 0.777264031,15.3706006 0.777264031,15.0128747 L0.777264031,10.7877471 C0.777264031,10.4300212 1.06725816,10.1400271 1.42498406,10.1400271 C1.78270995,10.1400271 2.07270408,10.4300212 2.07270408,10.7877471 L2.07270408,15.0128747 C2.07270408,15.3706006 1.78270995,15.6605947 1.42498406,15.6605947 L1.42498406,15.6605947 Z M6.34765625,15.6605947 C5.98993036,15.6605947 5.69993622,15.3706006 5.69993622,15.0128747 L5.69993622,8.88504464 C5.69993622,8.52731875 5.98993036,8.23732462 6.34765625,8.23732462 C6.70538214,8.23732462 6.99537628,8.52731875 6.99537628,8.88504464 L6.99537628,15.0128747 C6.99537628,15.3706006 6.70538214,15.6605947 6.34765625,15.6605947 Z M11.2703284,15.6605947 C10.9126026,15.6605947 10.6226084,15.3706006 10.6226084,15.0128747 L10.6226084,10.7357302 C10.6226084,10.3780043 10.9126026,10.0880102 11.2703284,10.0880102 C11.6280543,10.0880102 11.9180485,10.3780043 11.9180485,10.7357302 L11.9180485,15.0128747 C11.9180485,15.3706006 11.6280543,15.6605947 11.2703284,15.6605947 Z M16.1930006,15.6605947 C15.8352747,15.6605947 15.5452806,15.3706006 15.5452806,15.0128747 L15.5452806,7.99756856 C15.5452806,7.63984267 15.8352747,7.34984853 16.1930006,7.34984853 C16.5507265,7.34984853 16.8407207,7.63984267 16.8407207,7.99756856 L16.8407207,15.0128747 C16.8407207,15.3706006 16.5507265,15.6605947 16.1930006,15.6605947 L16.1930006,15.6605947 Z M1.42558195,7.79249068 C1.14131205,7.79273594 0.890103495,7.60760136 0.806175765,7.33600317 C0.722248035,7.06440498 0.825217689,6.76982427 1.06006856,6.60965402 L6.29563935,3.03902264 C6.53586252,2.87501724 6.85596642,2.89131996 7.07828444,3.07888233 L10.1126036,5.63907047 L15.6612723,1.15186543 C15.8543438,0.995657909 16.119732,0.963597347 16.3444479,1.06933353 C16.5691638,1.17506971 16.7136371,1.39998352 16.7163584,1.64831792 L16.7506802,4.73883929 C16.7526044,4.91060989 16.6862357,5.0761226 16.5661395,5.19894737 C16.4460434,5.32177213 16.2820632,5.39184191 16.1102918,5.39373406 L16.1033163,5.39373406 C15.7484514,5.39364664 15.4597264,5.10803197 15.4557956,4.75318878 L15.4358658,2.99936224 L10.5112006,6.98274075 C10.269667,7.17802156 9.92353022,7.17442642 9.68610491,6.97417092 L6.61910077,4.38647959 L1.78989955,7.6798868 C1.68260289,7.75331921 1.55560074,7.79257315 1.42558195,7.79249068 Z" id="形状"></path>
  9 + <path d="M16.0686384,2.30321269 L12.7309869,2.30321269 C12.373261,2.30321269 12.0832669,2.01321856 12.0832669,1.65549267 C12.0832669,1.29776677 12.373261,1.00777264 12.7309869,1.00777264 L16.0686384,1.00777264 C16.4263643,1.00777264 16.7163584,1.29776677 16.7163584,1.65549267 C16.7163584,2.01321856 16.4263643,2.30321269 16.0686384,2.30321269 L16.0686384,2.30321269 Z M17.1083785,18.0434072 L0.652901786,18.0434072 C0.295175893,18.0434072 0.0051817602,17.7534131 0.0051817602,17.3956872 C0.0051817602,17.0379613 0.295175893,16.7479672 0.652901786,16.7479672 L17.1083785,16.7479672 C17.4661044,16.7479672 17.7560985,17.0379613 17.7560985,17.3956872 C17.7560985,17.7534131 17.4661044,18.0434072 17.1083785,18.0434072 Z" id="形状"></path>
  10 + </g>
  11 + </g>
  12 + </g>
  13 + </g>
  14 +</svg>
\ No newline at end of file
... ...
... ... @@ -126,15 +126,15 @@
126 126 <div class="flex flex-col w-full h-full min-w-3 min-h-3">
127 127 <div :id="getControlsWidgetId()" class="widget-charts w-full h-full flex-auto"></div>
128 128 <div>
129   - <div class="text-center" :style="{ fontSize: fontSize({ radio: getRadio, basic: 16 }) }">{{
130   - props.value.name
131   - }}</div>
  129 + <div class="text-center" :style="{ fontSize: fontSize({ radio: getRadio, basic: 16 }) }">
  130 + {{ props.value.name }}
  131 + </div>
132 132 <div
133   - class="text-xs text-center text-gray-400 truncate"
134   - :style="{ fontSize: fontSize({ radio: getRadio, basic: 12, max: 16 }) }"
  133 + class="text-xs text-center truncate p-5"
  134 + :style="{ fontSize: fontSize({ radio: getRadio, basic: 12, max: 16 }), color: '#999' }"
135 135 >
136 136 <Tooltip
137   - placement="topLeft"
  137 + placement="top"
138 138 :title="dateUtil(props?.value?.updateTime || new Date()).format(DEFAULT_DATE_FORMAT)"
139 139 >
140 140 <span class="mr-2">更新时间:</span>
... ...
... ... @@ -64,6 +64,11 @@
64 64 changeValue.value = newValue;
65 65 };
66 66
  67 + const getScale = computed(() => {
  68 + const { width } = props.radio || DEFAULT_RADIO_RECORD;
  69 + return width / 360 > 1 ? 1 : width / 360;
  70 + });
  71 +
67 72 onMounted(() => {
68 73 if (props.random)
69 74 timeout = setInterval(handleRandom, DEFAULT_ANIMATION_INTERVAL) as unknown as number;
... ... @@ -79,33 +84,64 @@
79 84 <section class="w-full h-full">
80 85 <div class="flex flex-col w-full h-full">
81 86 <div class="flex-1 flex justify-center items-center">
82   - <div class="flex flex-col">
83   - <Space justify="end" class="justify-end" :size="getRadio * 15">
  87 + <div class="flex px-4 items-center" :style="{ transform: `scale(${getScale})` }">
  88 + <Space
  89 + justify="end"
  90 + class="justify-end"
  91 + :size="4"
  92 + :style="{
  93 + backgroundColor: '#585357',
  94 + padding: fontSize({ radio: getRadio, basic: 10 }),
  95 + }"
  96 + >
84 97 <div
85 98 v-for="number in integerPart"
86 99 :key="number"
87   - class="border border-gray-400 p-2"
  100 + class="digital-wrapper__int"
88 101 :style="{
89 102 color: getPropsValue.fontColor,
90   - fontSize: fontSize({ radio: getRadio, basic: 20 }),
  103 + fontSize: fontSize({ radio: getRadio, basic: 20, max: 20 }),
  104 + padding: fontSize({ radio: getRadio, basic: 5 }),
91 105 }"
92 106 >
93   - {{ number }}
  107 + <div class="digital-text__int p-1 text-light-50"> {{ number }}</div>
94 108 </div>
95 109 </Space>
96   - <Space justify="end" class="justify-end mt-2" :size="getRadio * 15">
  110 + <div
  111 + class="m-0.5 rounded-1/2"
  112 + style="background-color: #333; width: 6px; height: 6px; align-self: flex-end"
  113 + >
  114 + </div>
  115 + <Space
  116 + justify="end"
  117 + class="justify-end"
  118 + :size="4"
  119 + :style="{
  120 + backgroundColor: '#b74940',
  121 + padding: fontSize({ radio: getRadio, basic: 10 }),
  122 + }"
  123 + >
97 124 <div
98 125 v-for="number in decimalPart"
99 126 :key="number"
100   - class="border border-gray-400 p-1"
  127 + class="digital-wrapper__float"
101 128 :style="{
102 129 color: getPropsValue.fontColor,
103   - fontSize: fontSize({ radio: getRadio, basic: 18 }),
  130 + fontSize: fontSize({ radio: getRadio, basic: 20, max: 20 }),
  131 + padding: fontSize({ radio: getRadio, basic: 5 }),
104 132 }"
105 133 >
106   - {{ number }}
  134 + <div class="digital-text__float p-1 text-light-50">
  135 + {{ number }}
  136 + </div>
107 137 </div>
108 138 </Space>
  139 + <div
  140 + class="px-1"
  141 + :style="{ fontSize: fontSize({ radio: getRadio, basic: 18, max: 18 }) }"
  142 + >
  143 + {{ getPropsValue.unit }}
  144 + </div>
109 145 </div>
110 146 </div>
111 147
... ... @@ -114,14 +150,13 @@
114 150 :style="{ fontSize: fontSize({ radio: getRadio, basic: 18 }) }"
115 151 >
116 152 <span>{{ props.value.name || '电表' }}</span>
117   - <span class="px-1">({{ getPropsValue.unit }})</span>
118 153 </div>
119 154 <div
120   - class="text-center mt-1 text-gray-400 text-xs truncate"
121   - :style="{ fontSize: fontSize({ radio: getRadio, basic: 12, max: 16 }) }"
  155 + class="text-center text-xs truncate p-5"
  156 + :style="{ fontSize: fontSize({ radio: getRadio, basic: 12, max: 16 }), color: '#999' }"
122 157 >
123 158 <Tooltip
124   - placement="topLeft"
  159 + placement="top"
125 160 :title="dateUtil(props?.value?.updateTime || new Date()).format(DEFAULT_DATE_FORMAT)"
126 161 >
127 162 <span class="mr-1">更新时间:</span>
... ... @@ -134,3 +169,35 @@
134 169 <div></div>
135 170 </section>
136 171 </template>
  172 +
  173 +<style scoped lang="less">
  174 + .digital-wrapper__int {
  175 + border-radius: 1px;
  176 + box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.7);
  177 + background: url('/@/assets/images/digital-wrapper-bg-int.png') 0px -1px no-repeat;
  178 + padding: 5px;
  179 + background-size: 100% 100%;
  180 + }
  181 + .digital-text_int {
  182 + display: inline-block;
  183 + overflow-wrap: break-word;
  184 + color: rgba(255, 255, 255, 1);
  185 + white-space: nowrap;
  186 + text-align: center;
  187 + }
  188 +
  189 + .digital-wrapper__float {
  190 + border-radius: 1px;
  191 + box-shadow: inset 0px 1px 3px 0px rgba(112, 22, 15, 1);
  192 + background: url('/@/assets/images/digital-wrapper-bg-float.png') 0px -1px no-repeat;
  193 + padding: 5px;
  194 + background-size: 100% 100%;
  195 + }
  196 + .digital-text_float {
  197 + display: inline-block;
  198 + overflow-wrap: break-word;
  199 + color: rgba(255, 255, 255, 1);
  200 + white-space: nowrap;
  201 + text-align: center;
  202 + }
  203 +</style>
... ...
... ... @@ -26,7 +26,7 @@
26 26
27 27 const getWidth = computed(() => {
28 28 const marign = 5;
29   - const { width = 180 } = props.radio || {};
  29 + const { width = 140 } = props.radio || {};
30 30 return width - marign;
31 31 });
32 32 </script>
... ... @@ -37,11 +37,11 @@
37 37 >
38 38 <Image :width="getWidth" :src="props?.value?.value || ''" :fallback="fallback" />
39 39 <div
40   - class="w-full text-center text-gray-400 truncate"
41   - :style="{ fontSize: fontSize({ radio: getRadio, basic: 12, max: 16 }) }"
  40 + class="w-full text-center truncate p-5"
  41 + :style="{ fontSize: fontSize({ radio: getRadio, basic: 12, max: 16 }), color: '#999' }"
42 42 >
43 43 <Tooltip
44   - placement="topLeft"
  44 + placement="top"
45 45 :title="props?.value?.updateTime || dateUtil().format(DEFAULT_DATE_FORMAT)"
46 46 >
47 47 <span>更新时间:</span>
... ...
... ... @@ -71,30 +71,33 @@
71 71 }"
72 72 />
73 73 </div>
74   - <div class="truncate" :style="{ fontSize: fontSize({ radio: getRadio, basic: 16 }) }">{{
75   - props.value.name
76   - }}</div>
  74 + <div class="flex justify-center">
  75 + <Statistic
  76 + :value="props.value.value || 0"
  77 + class="truncate"
  78 + :value-style="{
  79 + fontSize: fontSize({ radio: getRadio, basic: 24, min: 16 }),
  80 + color: props.value.fontColor,
  81 + }"
  82 + />
  83 + </div>
  84 + <div :style="{ color: '#666', fontSize: fontSize({ radio: getRadio, basic: 16 }) }">
  85 + <!-- {{ getShowUnit ? props.value.unit : '' }} -->
  86 + {{ props.value.name }}
  87 + </div>
  88 + <!-- <div class="truncate" :style="{ fontSize: fontSize({ radio: getRadio, basic: 16 }) }">
  89 + {{ props.value.name }}
  90 + </div> -->
77 91 </div>
78 92 </div>
79   - <div class="w-1/2 flex justify-center">
80   - <Statistic
81   - :value="props.value.value || 0"
82   - :suffix="getShowUnit ? props.value.unit : ''"
83   - class="truncate"
84   - :value-style="{
85   - fontSize: fontSize({ radio: getRadio, basic: 16 }),
86   - color: props.value.fontColor,
87   - }"
88   - />
89   - </div>
90 93 </div>
91   - <div v-if="getShowUpdate" class="text-center text-xs text-gray-400 truncate">
  94 + <div v-if="getShowUpdate" class="text-center text-xs truncate p-5" style="color: #999">
92 95 <Tooltip
93   - placement="topLeft"
  96 + placement="top"
94 97 :title="dateUtil(props?.value?.updateTime || new Date()).format(DEFAULT_DATE_FORMAT)"
95 98 >
96 99 <div
97   - :style="{ fontSize: fontSize({ radio: getRadio, basic: 12, max: 16 }) }"
  100 + :style="{ fontSize: fontSize({ radio: getRadio, basic: 12, max: 14 }) }"
98 101 class="truncate"
99 102 >
100 103 <span class="mr-1">更新时间:</span>
... ...
... ... @@ -64,7 +64,7 @@ export const TextComponentDefaultConfig: Partial<ComponentInfo> = {
64 64
65 65 export const textComponentConfig: TextComponentDefault[] = [
66 66 TextComponent1Config,
67   - TextComponent2Config,
  67 + // TextComponent2Config,
68 68 TextComponent3Config,
69 69 TextComponent4Config,
70 70 TextComponent5Config,
... ...
... ... @@ -54,7 +54,7 @@
54 54 </script>
55 55
56 56 <template>
57   - <div class="flex justify-between w-full">
  57 + <div class="flex justify-between w-full p-5">
58 58 <div class="flex" :style="{ width: `calc(100% - 60px)` }">
59 59 <div
60 60 v-for="(item, index) in props.record"
... ... @@ -62,15 +62,15 @@
62 62 :style="{ width: `${100 / props.record.length}%` }"
63 63 :key="index"
64 64 >
65   - <Tooltip :title="item.deviceName" placement="topLeft">
  65 + <Tooltip :title="item.deviceName" placement="top">
66 66 <span>
67   - <SvgIcon name="" prefix="iconfont" class="!fill-emerald-400" />
  67 + <!-- <SvgIcon name="" prefix="iconfont" class="!fill-emerald-400" /> -->
68 68 <span>{{ item.deviceRename || item.deviceName }}</span>
69 69 </span>
70 70 </Tooltip>
71 71 </div>
72 72 </div>
73   - <div class="flex items-center w-10">
  73 + <div class="flex items-center gap-5">
74 74 <slot name="moreAction"></slot>
75 75 <Dropdown
76 76 v-if="dropMenuList.length"
... ... @@ -79,7 +79,10 @@
79 79 @menu-event="handleMenuEvent"
80 80 >
81 81 <Tooltip title="更多">
82   - <MoreOutlined v-if="!getIsSharePage" class="transform rotate-90 cursor-pointer" />
  82 + <MoreOutlined
  83 + v-if="!getIsSharePage"
  84 + class="transform rotate-90 cursor-pointer w-4.5 h-4.5 text-lg"
  85 + />
83 86 </Tooltip>
84 87 </Dropdown>
85 88 </div>
... ...
1   -<!DOCTYPE html>
2   -<html lang="en">
3   - <head>
4   - <meta charset="UTF-8" />
5   - <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6   - <title>Document</title>
7   - <!-- <link rel="stylesheet" type="text/css" href="./common.css" />
8   - <link rel="stylesheet" type="text/css" href="./index.css" /> -->
9   - <style>
10   - body * {
11   - box-sizing: border-box;
12   - flex-shrink: 0;
13   - }
14   - body {
15   - font-family: PingFangSC-Regular, Roboto, Helvetica Neue, Helvetica, Tahoma, Arial,
16   - PingFang SC-Light, Microsoft YaHei;
17   - }
18   - input {
19   - background-color: transparent;
20   - border: 0;
21   - }
22   - button {
23   - margin: 0;
24   - padding: 0;
25   - border: 1px solid transparent;
26   - outline: none;
27   - background-color: transparent;
28   - }
29   -
30   - button:active {
31   - opacity: 0.6;
32   - }
33   - .flex-col {
34   - display: flex;
35   - flex-direction: column;
36   - }
37   - .flex-row {
38   - display: flex;
39   - flex-direction: row;
40   - }
41   - .justify-start {
42   - display: flex;
43   - justify-content: flex-start;
44   - }
45   - .justify-center {
46   - display: flex;
47   - justify-content: center;
48   - }
49   -
50   - .justify-end {
51   - display: flex;
52   - justify-content: flex-end;
53   - }
54   - .justify-evenly {
55   - display: flex;
56   - justify-content: space-evenly;
57   - }
58   - .justify-around {
59   - display: flex;
60   - justify-content: space-around;
61   - }
62   - .justify-between {
63   - display: flex;
64   - justify-content: space-between;
65   - }
66   - .align-start {
67   - display: flex;
68   - align-items: flex-start;
69   - }
70   - .align-center {
71   - display: flex;
72   - align-items: center;
73   - }
74   - .align-end {
75   - display: flex;
76   - align-items: flex-end;
77   - }
78   - </style>
79   - <style>
80   - .page {
81   - position: relative;
82   - width: 1920px;
83   - height: 1080px;
84   - overflow: hidden;
85   - }
86   -
87   - .image_1 {
88   - width: 1920px;
89   - height: 960px;
90   - }
91   -
92   - .section_1 {
93   - height: 972px;
94   - background-color: rgba(240, 242, 245, 1);
95   - width: 1638px;
96   - position: absolute;
97   - left: 282px;
98   - top: 108px;
99   - }
100   -
101   - .box_1 {
102   - width: 1598px;
103   - height: 796px;
104   - margin: 20px 0 0 20px;
105   - }
106   -
107   - .box_2 {
108   - height: 78px;
109   - border-radius: 3px;
110   - background-color: rgba(255, 255, 255, 1);
111   - width: 1598px;
112   - }
113   -
114   - .box_3 {
115   - width: 208px;
116   - height: 25px;
117   - margin: 27px 0 0 20px;
118   - }
119   -
120   - .thumbnail_1 {
121   - width: 20px;
122   - height: 19px;
123   - margin-top: 4px;
124   - }
125   -
126   - .text_1 {
127   - width: 80px;
128   - height: 25px;
129   - display: inline-block;
130   - overflow-wrap: break-word;
131   - color: rgba(51, 51, 51, 1);
132   - font-size: 18px;
133   - font-family: PingFangSC-Semibold;
134   - white-space: nowrap;
135   - line-height: 25px;
136   - text-align: left;
137   - margin-left: 12px;
138   - }
139   -
140   - .text_2 {
141   - width: 72px;
142   - height: 25px;
143   - display: inline-block;
144   - overflow-wrap: break-word;
145   - color: rgba(255, 255, 255, 1);
146   - font-size: 18px;
147   - font-family: PingFangSC-Regular;
148   - white-space: nowrap;
149   - line-height: 25px;
150   - text-align: left;
151   - margin-left: 24px;
152   - }
153   -
154   - .text-wrapper_1 {
155   - width: 107px;
156   - height: 20px;
157   - overflow-wrap: break-word;
158   - text-align: left;
159   - white-space: nowrap;
160   - margin-top: 20px;
161   - font-size: 0;
162   - }
163   -
164   - .text_3 {
165   - font-size: 14px;
166   - font-family: PingFangSC-Regular;
167   - color: rgba(102, 102, 102, 1);
168   - line-height: 20px;
169   - }
170   -
171   - .text_4 {
172   - font-size: 14px;
173   - font-family: PingFangSC-Regular;
174   - color: rgba(55, 125, 255, 1);
175   - line-height: 20px;
176   - }
177   -
178   - .box_4 {
179   - width: 1597px;
180   - height: 319px;
181   - margin-top: 20px;
182   - }
183   -
184   - .group_1 {
185   - height: 319px;
186   - border-radius: 3px;
187   - background-color: rgba(255, 255, 255, 1);
188   - width: 519px;
189   - position: relative;
190   - justify-content: flex-center;
191   - }
192   -
193   - .group_2 {
194   - width: 480px;
195   - height: 22px;
196   - margin: 20px 0 0 20px;
197   - }
198   -
199   - .text_5 {
200   - width: 116px;
201   - height: 22px;
202   - display: inline-block;
203   - overflow-wrap: break-word;
204   - color: rgba(51, 51, 51, 1);
205   - font-size: 16px;
206   - font-family: PingFangSC-Medium;
207   - white-space: nowrap;
208   - line-height: 22px;
209   - text-align: left;
210   - }
211   -
212   - .block_1 {
213   - width: 17px;
214   - height: 15px;
215   - background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng61e21a4ecb6a4c3e09659c9ed2eef4056c7aa9553190d0490d78d97726e898df) -1px
216   - 0px no-repeat;
217   - background-size: 17px 16px;
218   - margin: 3px 0 0 312px;
219   - }
220   -
221   - .block_2 {
222   - width: 4px;
223   - height: 4px;
224   - background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng7fbe2300f4a054a715c64dbc28a72022345b6e8c29d87ba5be6e58b9222e6888)
225   - 0px 0px no-repeat;
226   - background-size: 4px 4px;
227   - margin: 10px 0 0 20px;
228   - }
229   -
230   - .block_3 {
231   - width: 4px;
232   - height: 4px;
233   - background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng6bbeb27f239784515cbdbc576c0480e4f9218af9c9e465da945579af452e11a3)
234   - 0px 0px no-repeat;
235   - background-size: 4px 4px;
236   - margin: 10px 0 0 2px;
237   - }
238   -
239   - .block_4 {
240   - width: 4px;
241   - height: 4px;
242   - background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng788c665bd82de9347efef08b24329265e7db13cb2ec04e9b336304cb6383bab2) -1px
243   - 0px no-repeat;
244   - background-size: 4px 4px;
245   - margin: 10px 0 0 1px;
246   - }
247   -
248   - .group_3 {
249   - width: 50px;
250   - height: 50px;
251   - margin: 60px 0 0 235px;
252   - }
253   -
254   - .box_5 {
255   - width: 50px;
256   - height: 50px;
257   - background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng90c6d301b6ba3ed6900f8b58d1970285c1f71afde72e8b0306f787be649088ae)
258   - 0px 0px no-repeat;
259   - background-size: 51px 50px;
260   - }
261   -
262   - .text-wrapper_2 {
263   - width: 49px;
264   - height: 33px;
265   - margin: 12px 0 0 235px;
266   - }
267   -
268   - .text_6 {
269   - width: 49px;
270   - height: 33px;
271   - display: inline-block;
272   - overflow-wrap: break-word;
273   - color: rgba(51, 51, 51, 1);
274   - font-size: 24px;
275   - font-family: PingFangSC-Medium;
276   - white-space: nowrap;
277   - line-height: 33px;
278   - text-align: center;
279   - }
280   -
281   - .text-wrapper_3 {
282   - width: 32px;
283   - height: 22px;
284   - margin-left: 244px;
285   - }
286   -
287   - .text_7 {
288   - width: 32px;
289   - height: 22px;
290   - display: inline-block;
291   - overflow-wrap: break-word;
292   - color: rgba(102, 102, 102, 1);
293   - font-size: 16px;
294   - font-family: PingFangSC-Medium;
295   - white-space: nowrap;
296   - line-height: 22px;
297   - text-align: center;
298   - }
299   -
300   - .text-wrapper_4 {
301   - width: 213px;
302   - height: 20px;
303   - margin: 60px 0 20px 153px;
304   - }
305   -
306   - .text_8 {
307   - width: 213px;
308   - height: 20px;
309   - display: inline-block;
310   - overflow-wrap: break-word;
311   - color: rgba(153, 153, 153, 1);
312   - font-size: 14px;
313   - font-family: PingFangSC-Regular;
314   - white-space: nowrap;
315   - line-height: 20px;
316   - text-align: left;
317   - }
318   -
319   - .group_4 {
320   - position: absolute;
321   - left: 448px;
322   - top: 23px;
323   - width: 18px;
324   - height: 18px;
325   - background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng0cbcb409c7bbb5544db0b197f5910ab50a6e5df351202723fcde68db454dc5e6)
326   - 0px 0px no-repeat;
327   - background-size: 18px 18px;
328   - }
329   -
330   - .group_5 {
331   - height: 319px;
332   - border-radius: 3px;
333   - background-color: rgba(255, 255, 255, 1);
334   - margin-left: 20px;
335   - width: 519px;
336   - justify-content: flex-center;
337   - }
338   -
339   - .group_6 {
340   - width: 480px;
341   - height: 22px;
342   - margin: 20px 0 0 20px;
343   - }
344   -
345   - .text_9 {
346   - width: 118px;
347   - height: 22px;
348   - display: inline-block;
349   - overflow-wrap: break-word;
350   - color: rgba(51, 51, 51, 1);
351   - font-size: 16px;
352   - font-family: PingFangSC-Medium;
353   - white-space: nowrap;
354   - line-height: 22px;
355   - text-align: left;
356   - }
357   -
358   - .thumbnail_2 {
359   - width: 18px;
360   - height: 18px;
361   - margin: 3px 0 0 309px;
362   - }
363   -
364   - .block_5 {
365   - width: 4px;
366   - height: 4px;
367   - background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng7fbe2300f4a054a715c64dbc28a72022345b6e8c29d87ba5be6e58b9222e6888)
368   - 0px 0px no-repeat;
369   - background-size: 4px 4px;
370   - margin: 10px 0 0 20px;
371   - }
372   -
373   - .block_6 {
374   - width: 4px;
375   - height: 4px;
376   - background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng6bbeb27f239784515cbdbc576c0480e4f9218af9c9e465da945579af452e11a3)
377   - 0px 0px no-repeat;
378   - background-size: 4px 4px;
379   - margin: 10px 0 0 2px;
380   - }
381   -
382   - .block_7 {
383   - width: 4px;
384   - height: 4px;
385   - background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng788c665bd82de9347efef08b24329265e7db13cb2ec04e9b336304cb6383bab2) -1px
386   - 0px no-repeat;
387   - background-size: 4px 4px;
388   - margin: 10px 0 0 1px;
389   - }
390   -
391   - .image-wrapper_1 {
392   - width: 53px;
393   - height: 50px;
394   - margin: 60px 0 0 233px;
395   - }
396   -
397   - .image_2 {
398   - width: 53px;
399   - height: 50px;
400   - }
401   -
402   - .text-wrapper_5 {
403   - width: 53px;
404   - height: 33px;
405   - margin: 12px 0 0 233px;
406   - }
407   -
408   - .text_10 {
409   - width: 53px;
410   - height: 33px;
411   - display: inline-block;
412   - overflow-wrap: break-word;
413   - color: rgba(51, 51, 51, 1);
414   - font-size: 24px;
415   - font-family: PingFangSC-Medium;
416   - white-space: nowrap;
417   - line-height: 33px;
418   - text-align: center;
419   - }
420   -
421   - .text-wrapper_6 {
422   - width: 66px;
423   - height: 22px;
424   - margin-left: 227px;
425   - }
426   -
427   - .text_11 {
428   - width: 66px;
429   - height: 22px;
430   - display: inline-block;
431   - overflow-wrap: break-word;
432   - color: rgba(102, 102, 102, 1);
433   - font-size: 16px;
434   - font-family: PingFangSC-Medium;
435   - white-space: nowrap;
436   - line-height: 22px;
437   - text-align: center;
438   - }
439   -
440   - .text-wrapper_7 {
441   - width: 213px;
442   - height: 20px;
443   - margin: 60px 0 20px 153px;
444   - }
445   -
446   - .text_12 {
447   - width: 213px;
448   - height: 20px;
449   - display: inline-block;
450   - overflow-wrap: break-word;
451   - color: rgba(153, 153, 153, 1);
452   - font-size: 14px;
453   - font-family: PingFangSC-Regular;
454   - white-space: nowrap;
455   - line-height: 20px;
456   - text-align: left;
457   - }
458   -
459   - .group_7 {
460   - height: 319px;
461   - border-radius: 3px;
462   - background-color: rgba(255, 255, 255, 1);
463   - margin-left: 20px;
464   - width: 519px;
465   - justify-content: flex-center;
466   - }
467   -
468   - .group_8 {
469   - width: 480px;
470   - height: 22px;
471   - margin: 20px 0 0 20px;
472   - }
473   -
474   - .text_13 {
475   - width: 180px;
476   - height: 22px;
477   - display: inline-block;
478   - overflow-wrap: break-word;
479   - color: rgba(51, 51, 51, 1);
480   - font-size: 16px;
481   - font-family: PingFangSC-Medium;
482   - white-space: nowrap;
483   - line-height: 22px;
484   - text-align: left;
485   - }
486   -
487   - .thumbnail_3 {
488   - width: 18px;
489   - height: 18px;
490   - margin: 3px 0 0 247px;
491   - }
492   -
493   - .group_9 {
494   - width: 4px;
495   - height: 4px;
496   - background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng7fbe2300f4a054a715c64dbc28a72022345b6e8c29d87ba5be6e58b9222e6888)
497   - 0px 0px no-repeat;
498   - background-size: 4px 4px;
499   - margin: 10px 0 0 20px;
500   - }
501   -
502   - .group_10 {
503   - width: 4px;
504   - height: 4px;
505   - background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng6bbeb27f239784515cbdbc576c0480e4f9218af9c9e465da945579af452e11a3)
506   - 0px 0px no-repeat;
507   - background-size: 4px 4px;
508   - margin: 10px 0 0 2px;
509   - }
510   -
511   - .group_11 {
512   - width: 4px;
513   - height: 4px;
514   - background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng788c665bd82de9347efef08b24329265e7db13cb2ec04e9b336304cb6383bab2) -1px
515   - 0px no-repeat;
516   - background-size: 4px 4px;
517   - margin: 10px 0 0 1px;
518   - }
519   -
520   - .group_12 {
521   - width: 52px;
522   - height: 50px;
523   - margin: 60px 0 0 234px;
524   - }
525   -
526   - .group_13 {
527   - width: 52px;
528   - height: 50px;
529   - background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng2a8b4bc257a393d46c08a8d61148cae372cdba88e38494116f9a9f58e70b0bfd)
530   - 0px 0px no-repeat;
531   - background-size: 53px 50px;
532   - }
533   -
534   - .text-wrapper_8 {
535   - width: 29px;
536   - height: 33px;
537   - margin: 12px 0 0 245px;
538   - }
539   -
540   - .text_14 {
541   - width: 29px;
542   - height: 33px;
543   - display: inline-block;
544   - overflow-wrap: break-word;
545   - color: rgba(51, 51, 51, 1);
546   - font-size: 24px;
547   - font-family: PingFangSC-Medium;
548   - white-space: nowrap;
549   - line-height: 33px;
550   - text-align: center;
551   - }
552   -
553   - .text-wrapper_9 {
554   - width: 96px;
555   - height: 22px;
556   - margin-left: 212px;
557   - }
558   -
559   - .text_15 {
560   - width: 96px;
561   - height: 22px;
562   - display: inline-block;
563   - overflow-wrap: break-word;
564   - color: rgba(102, 102, 102, 1);
565   - font-size: 16px;
566   - font-family: PingFangSC-Medium;
567   - white-space: nowrap;
568   - line-height: 22px;
569   - text-align: center;
570   - }
571   -
572   - .text-wrapper_10 {
573   - width: 213px;
574   - height: 20px;
575   - margin: 60px 0 20px 153px;
576   - }
577   -
578   - .text_16 {
579   - width: 213px;
580   - height: 20px;
581   - display: inline-block;
582   - overflow-wrap: break-word;
583   - color: rgba(153, 153, 153, 1);
584   - font-size: 14px;
585   - font-family: PingFangSC-Regular;
586   - white-space: nowrap;
587   - line-height: 20px;
588   - text-align: left;
589   - }
590   -
591   - .box_6 {
592   - width: 1597px;
593   - height: 319px;
594   - margin-top: 20px;
595   - }
596   -
597   - .box_7 {
598   - height: 319px;
599   - border-radius: 3px;
600   - background-color: rgba(255, 255, 255, 1);
601   - width: 1058px;
602   - justify-content: flex-center;
603   - }
604   -
605   - .group_14 {
606   - width: 1019px;
607   - height: 22px;
608   - margin: 20px 0 0 20px;
609   - }
610   -
611   - .text_17 {
612   - width: 116px;
613   - height: 22px;
614   - display: inline-block;
615   - overflow-wrap: break-word;
616   - color: rgba(51, 51, 51, 1);
617   - font-size: 16px;
618   - font-family: PingFangSC-Medium;
619   - white-space: nowrap;
620   - line-height: 22px;
621   - text-align: left;
622   - }
623   -
624   - .text_18 {
625   - width: 118px;
626   - height: 22px;
627   - display: inline-block;
628   - overflow-wrap: break-word;
629   - color: rgba(51, 51, 51, 1);
630   - font-size: 16px;
631   - font-family: PingFangSC-Medium;
632   - white-space: nowrap;
633   - line-height: 22px;
634   - text-align: left;
635   - margin-left: 423px;
636   - }
637   -
638   - .thumbnail_4 {
639   - width: 18px;
640   - height: 18px;
641   - margin: 3px 0 0 309px;
642   - }
643   -
644   - .group_15 {
645   - width: 4px;
646   - height: 4px;
647   - background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng7fbe2300f4a054a715c64dbc28a72022345b6e8c29d87ba5be6e58b9222e6888)
648   - 0px 0px no-repeat;
649   - background-size: 4px 4px;
650   - margin: 10px 0 0 20px;
651   - }
652   -
653   - .group_16 {
654   - width: 4px;
655   - height: 4px;
656   - background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng6bbeb27f239784515cbdbc576c0480e4f9218af9c9e465da945579af452e11a3)
657   - 0px 0px no-repeat;
658   - background-size: 4px 4px;
659   - margin: 10px 0 0 2px;
660   - }
661   -
662   - .group_17 {
663   - width: 4px;
664   - height: 4px;
665   - background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng788c665bd82de9347efef08b24329265e7db13cb2ec04e9b336304cb6383bab2) -1px
666   - 0px no-repeat;
667   - background-size: 4px 4px;
668   - margin: 10px 0 0 1px;
669   - }
670   -
671   - .group_18 {
672   - width: 590px;
673   - height: 95px;
674   - margin: 60px 0 0 235px;
675   - }
676   -
677   - .group_18 {
678   - width: 590px;
679   - height: 95px;
680   - }
681   -
682   - .box_8 {
683   - width: 50px;
684   - height: 95px;
685   - }
686   -
687   - .box_8 {
688   - width: 50px;
689   - height: 95px;
690   - }
691   -
692   - .box_9 {
693   - width: 50px;
694   - height: 50px;
695   - background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng90c6d301b6ba3ed6900f8b58d1970285c1f71afde72e8b0306f787be649088ae)
696   - 0px 0px no-repeat;
697   - background-size: 51px 50px;
698   - }
699   -
700   - .text_19 {
701   - width: 49px;
702   - height: 33px;
703   - display: inline-block;
704   - overflow-wrap: break-word;
705   - color: rgba(51, 51, 51, 1);
706   - font-size: 24px;
707   - font-family: PingFangSC-Medium;
708   - white-space: nowrap;
709   - line-height: 33px;
710   - text-align: center;
711   - margin-top: 12px;
712   - }
713   -
714   - .box_10 {
715   - width: 53px;
716   - height: 95px;
717   - }
718   -
719   - .box_10 {
720   - width: 53px;
721   - height: 95px;
722   - }
723   -
724   - .image_3 {
725   - width: 53px;
726   - height: 50px;
727   - }
728   -
729   - .text_20 {
730   - width: 53px;
731   - height: 33px;
732   - display: inline-block;
733   - overflow-wrap: break-word;
734   - color: rgba(51, 51, 51, 1);
735   - font-size: 24px;
736   - font-family: PingFangSC-Medium;
737   - white-space: nowrap;
738   - line-height: 33px;
739   - text-align: center;
740   - margin-top: 12px;
741   - }
742   -
743   - .text-wrapper_11 {
744   - width: 588px;
745   - height: 22px;
746   - margin-left: 244px;
747   - }
748   -
749   - .text_21 {
750   - width: 32px;
751   - height: 22px;
752   - display: inline-block;
753   - overflow-wrap: break-word;
754   - color: rgba(102, 102, 102, 1);
755   - font-size: 16px;
756   - font-family: PingFangSC-Medium;
757   - white-space: nowrap;
758   - line-height: 22px;
759   - text-align: center;
760   - }
761   -
762   - .text_22 {
763   - width: 66px;
764   - height: 22px;
765   - display: inline-block;
766   - overflow-wrap: break-word;
767   - color: rgba(102, 102, 102, 1);
768   - font-size: 16px;
769   - font-family: PingFangSC-Medium;
770   - white-space: nowrap;
771   - line-height: 22px;
772   - text-align: center;
773   - }
774   -
775   - .text-wrapper_12 {
776   - width: 752px;
777   - height: 20px;
778   - margin: 60px 0 20px 153px;
779   - }
780   -
781   - .text_23 {
782   - width: 213px;
783   - height: 20px;
784   - display: inline-block;
785   - overflow-wrap: break-word;
786   - color: rgba(153, 153, 153, 1);
787   - font-size: 14px;
788   - font-family: PingFangSC-Regular;
789   - white-space: nowrap;
790   - line-height: 20px;
791   - text-align: left;
792   - }
793   -
794   - .text_24 {
795   - width: 213px;
796   - height: 20px;
797   - display: inline-block;
798   - overflow-wrap: break-word;
799   - color: rgba(153, 153, 153, 1);
800   - font-size: 14px;
801   - font-family: PingFangSC-Regular;
802   - white-space: nowrap;
803   - line-height: 20px;
804   - text-align: left;
805   - }
806   -
807   - .box_11 {
808   - height: 319px;
809   - border-radius: 3px;
810   - background-color: rgba(255, 255, 255, 1);
811   - width: 519px;
812   - justify-content: flex-center;
813   - }
814   -
815   - .section_2 {
816   - width: 480px;
817   - height: 22px;
818   - margin: 20px 0 0 20px;
819   - }
820   -
821   - .text_25 {
822   - width: 68px;
823   - height: 22px;
824   - display: inline-block;
825   - overflow-wrap: break-word;
826   - color: rgba(51, 51, 51, 1);
827   - font-size: 16px;
828   - font-family: PingFangSC-Medium;
829   - white-space: nowrap;
830   - line-height: 22px;
831   - text-align: left;
832   - }
833   -
834   - .thumbnail_5 {
835   - width: 18px;
836   - height: 18px;
837   - margin: 3px 0 0 359px;
838   - }
839   -
840   - .block_8 {
841   - width: 4px;
842   - height: 4px;
843   - background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng7fbe2300f4a054a715c64dbc28a72022345b6e8c29d87ba5be6e58b9222e6888)
844   - 0px 0px no-repeat;
845   - background-size: 4px 4px;
846   - margin: 10px 0 0 20px;
847   - }
848   -
849   - .block_9 {
850   - width: 4px;
851   - height: 4px;
852   - background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng6bbeb27f239784515cbdbc576c0480e4f9218af9c9e465da945579af452e11a3)
853   - 0px 0px no-repeat;
854   - background-size: 4px 4px;
855   - margin: 10px 0 0 2px;
856   - }
857   -
858   - .block_10 {
859   - width: 4px;
860   - height: 4px;
861   - background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng788c665bd82de9347efef08b24329265e7db13cb2ec04e9b336304cb6383bab2) -1px
862   - 0px no-repeat;
863   - background-size: 4px 4px;
864   - margin: 10px 0 0 1px;
865   - }
866   -
867   - .section_3 {
868   - width: 374px;
869   - height: 67px;
870   - margin: 58px 0 0 73px;
871   - }
872   -
873   - .box_12 {
874   - height: 67px;
875   - background-color: rgba(88, 83, 87, 1);
876   - width: 210px;
877   - }
878   -
879   - .box_13 {
880   - width: 186px;
881   - height: 50px;
882   - margin: 9px 0 0 12px;
883   - }
884   -
885   - .text-wrapper_13 {
886   - height: 50px;
887   - border-radius: 1px;
888   - box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.7);
889   - background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngeb43fd189a34f107a87016160a0bb4a06b7227a89dd0e8872666398c06e106f0)
890   - 0px -1px no-repeat;
891   - background-size: 35px 51px;
892   - width: 34px;
893   - }
894   -
895   - .text_26 {
896   - width: 21px;
897   - height: 48px;
898   - display: inline-block;
899   - overflow-wrap: break-word;
900   - color: rgba(255, 255, 255, 1);
901   - font-size: 34px;
902   - font-family: PingFangSC-Medium;
903   - white-space: nowrap;
904   - line-height: 48px;
905   - text-align: center;
906   - margin: 1px 0 0 6px;
907   - }
908   -
909   - .text-wrapper_14 {
910   - height: 50px;
911   - border-radius: 1px;
912   - box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.7);
913   - background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngeb43fd189a34f107a87016160a0bb4a06b7227a89dd0e8872666398c06e106f0)
914   - 0px -1px no-repeat;
915   - background-size: 35px 51px;
916   - margin-left: 4px;
917   - width: 34px;
918   - }
919   -
920   - .text_27 {
921   - width: 21px;
922   - height: 48px;
923   - display: inline-block;
924   - overflow-wrap: break-word;
925   - color: rgba(255, 255, 255, 1);
926   - font-size: 34px;
927   - font-family: PingFangSC-Medium;
928   - white-space: nowrap;
929   - line-height: 48px;
930   - text-align: center;
931   - margin: 1px 0 0 6px;
932   - }
933   -
934   - .text-wrapper_15 {
935   - height: 50px;
936   - border-radius: 1px;
937   - box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.7);
938   - background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng2d347ae288939c4a28ddfa3b9f27c8fc682791a470f3b2106c28f1bdb6ab4ace)
939   - 0px 0px no-repeat;
940   - background-size: 35px 51px;
941   - margin-left: 4px;
942   - width: 34px;
943   - }
944   -
945   - .text_28 {
946   - width: 21px;
947   - height: 48px;
948   - display: inline-block;
949   - overflow-wrap: break-word;
950   - color: rgba(255, 255, 255, 1);
951   - font-size: 34px;
952   - font-family: PingFangSC-Medium;
953   - white-space: nowrap;
954   - line-height: 48px;
955   - text-align: center;
956   - margin: 1px 0 0 6px;
957   - }
958   -
959   - .text-wrapper_16 {
960   - height: 50px;
961   - border-radius: 1px;
962   - box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.7);
963   - background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng2d347ae288939c4a28ddfa3b9f27c8fc682791a470f3b2106c28f1bdb6ab4ace)
964   - 0px 0px no-repeat;
965   - background-size: 35px 51px;
966   - margin-left: 4px;
967   - width: 34px;
968   - }
969   -
970   - .text_29 {
971   - width: 21px;
972   - height: 48px;
973   - display: inline-block;
974   - overflow-wrap: break-word;
975   - color: rgba(255, 255, 255, 1);
976   - font-size: 34px;
977   - font-family: PingFangSC-Medium;
978   - white-space: nowrap;
979   - line-height: 48px;
980   - text-align: center;
981   - margin: 1px 0 0 6px;
982   - }
983   -
984   - .text-wrapper_17 {
985   - height: 50px;
986   - border-radius: 1px;
987   - box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.7);
988   - background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng2d347ae288939c4a28ddfa3b9f27c8fc682791a470f3b2106c28f1bdb6ab4ace)
989   - 0px 0px no-repeat;
990   - background-size: 35px 51px;
991   - margin-left: 4px;
992   - width: 34px;
993   - }
994   -
995   - .text_30 {
996   - width: 21px;
997   - height: 48px;
998   - display: inline-block;
999   - overflow-wrap: break-word;
1000   - color: rgba(255, 255, 255, 1);
1001   - font-size: 34px;
1002   - font-family: PingFangSC-Medium;
1003   - white-space: nowrap;
1004   - line-height: 48px;
1005   - text-align: center;
1006   - margin: 1px 0 0 6px;
1007   - }
1008   -
1009   - .box_14 {
1010   - width: 6px;
1011   - height: 6px;
1012   - background-color: rgba(51, 51, 51, 1);
1013   - border-radius: 50%;
1014   - margin: 60px 0 0 2px;
1015   - }
1016   -
1017   - .box_15 {
1018   - height: 67px;
1019   - background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng82651a6dc918e308532b3fe2dc1839fae8d05c8efa7578d83cb239444ce9f549)
1020   - 0px 0px no-repeat;
1021   - background-size: 97px 67px;
1022   - margin-left: 2px;
1023   - width: 96px;
1024   - }
1025   -
1026   - .box_16 {
1027   - width: 72px;
1028   - height: 50px;
1029   - margin: 9px 0 0 12px;
1030   - }
1031   -
1032   - .text-wrapper_18 {
1033   - height: 50px;
1034   - border-radius: 1px;
1035   - box-shadow: inset 0px 1px 3px 0px rgba(112, 22, 15, 1);
1036   - background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng245035e9da82a72a23044b1c0c3b0bbb68a44b2232ab4d286959d67553e1f40c)
1037   - 0px -1px no-repeat;
1038   - background-size: 35px 51px;
1039   - width: 34px;
1040   - }
1041   -
1042   - .text_31 {
1043   - width: 21px;
1044   - height: 48px;
1045   - display: inline-block;
1046   - overflow-wrap: break-word;
1047   - color: rgba(255, 255, 255, 1);
1048   - font-size: 34px;
1049   - font-family: PingFangSC-Medium;
1050   - white-space: nowrap;
1051   - line-height: 48px;
1052   - text-align: center;
1053   - margin: 1px 0 0 6px;
1054   - }
1055   -
1056   - .text-wrapper_19 {
1057   - height: 50px;
1058   - border-radius: 1px;
1059   - box-shadow: inset 0px 1px 3px 0px rgba(112, 22, 15, 1);
1060   - background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng245035e9da82a72a23044b1c0c3b0bbb68a44b2232ab4d286959d67553e1f40c)
1061   - 0px -1px no-repeat;
1062   - background-size: 35px 51px;
1063   - width: 34px;
1064   - }
1065   -
1066   - .text_32 {
1067   - width: 21px;
1068   - height: 48px;
1069   - display: inline-block;
1070   - overflow-wrap: break-word;
1071   - color: rgba(255, 255, 255, 1);
1072   - font-size: 34px;
1073   - font-family: PingFangSC-Medium;
1074   - white-space: nowrap;
1075   - line-height: 48px;
1076   - text-align: center;
1077   - margin: 1px 0 0 6px;
1078   - }
1079   -
1080   - .text_33 {
1081   - width: 50px;
1082   - height: 37px;
1083   - display: inline-block;
1084   - overflow-wrap: break-word;
1085   - color: rgba(51, 51, 51, 1);
1086   - font-size: 26px;
1087   - font-family: PingFangSC-Medium;
1088   - white-space: nowrap;
1089   - line-height: 37px;
1090   - text-align: center;
1091   - margin: 15px 0 0 8px;
1092   - }
1093   -
1094   - .text-wrapper_20 {
1095   - width: 32px;
1096   - height: 22px;
1097   - margin: 30px 0 0 244px;
1098   - }
1099   -
1100   - .text_34 {
1101   - width: 32px;
1102   - height: 22px;
1103   - display: inline-block;
1104   - overflow-wrap: break-word;
1105   - color: rgba(102, 102, 102, 1);
1106   - font-size: 16px;
1107   - font-family: PingFangSC-Medium;
1108   - white-space: nowrap;
1109   - line-height: 22px;
1110   - text-align: center;
1111   - }
1112   -
1113   - .text-wrapper_21 {
1114   - width: 213px;
1115   - height: 20px;
1116   - margin: 60px 0 20px 153px;
1117   - }
1118   -
1119   - .text_35 {
1120   - width: 213px;
1121   - height: 20px;
1122   - display: inline-block;
1123   - overflow-wrap: break-word;
1124   - color: rgba(153, 153, 153, 1);
1125   - font-size: 14px;
1126   - font-family: PingFangSC-Regular;
1127   - white-space: nowrap;
1128   - line-height: 20px;
1129   - text-align: left;
1130   - }
1131   -
1132   - .section_4 {
1133   - position: absolute;
1134   - left: 0;
1135   - top: 875px;
1136   - width: 282px;
1137   - height: 205px;
1138   - background-color: rgba(255, 255, 255, 1);
1139   - }
1140   - </style>
1141   - </head>
1142   - <body>
1143   - <div class="section_3 flex-row">
1144   - <div class="box_12 flex-col">
1145   - <div class="box_13 flex-row justify-between">
1146   - <div class="text-wrapper_13 flex-col">
1147   - <span class="text_26">0</span>
1148   - </div>
1149   - <div class="text-wrapper_14 flex-col">
1150   - <span class="text_27">0</span>
1151   - </div>
1152   - <div class="text-wrapper_15 flex-col">
1153   - <span class="text_28">2</span>
1154   - </div>
1155   - <div class="text-wrapper_16 flex-col">
1156   - <span class="text_29">6</span>
1157   - </div>
1158   - <div class="text-wrapper_17 flex-col">
1159   - <span class="text_30">3</span>
1160   - </div>
1161   - </div>
1162   - </div>
1163   - <div class="box_14 flex-col"></div>
1164   - <div class="box_15 flex-col">
1165   - <div class="box_16 flex-row justify-between">
1166   - <div class="text-wrapper_18 flex-col">
1167   - <span class="text_31">0</span>
1168   - </div>
1169   - <div class="text-wrapper_19 flex-col">
1170   - <span class="text_32">5</span>
1171   - </div>
1172   - </div>
1173   - </div>
1174   - <span class="text_33">kwh</span>
1175   - </div>
1176   - </body>
1177   -</html>
... ... @@ -59,6 +59,8 @@
59 59 flex-direction: column;
60 60 width: 100%;
61 61 height: 100%;
  62 + background-color: #fff;
  63 + border-radius: 3px;
62 64 }
63 65 .widget-content {
64 66 display: flex;
... ...
... ... @@ -8,8 +8,8 @@ export interface RadioRecord {
8 8 export const DEFAULT_ANIMATION_INTERVAL = 2000;
9 9
10 10 export const DEFAULT_RADIO_RECORD: RadioRecord = {
11   - width: 300,
12   - height: 300,
  11 + width: 200,
  12 + height: 140,
13 13 isLess: false,
14 14 radio: 1,
15 15 };
... ...
... ... @@ -39,6 +39,7 @@
39 39 import { useSocketConnect } from '../hook/useSocketConnect';
40 40 import { buildUUID } from '/@/utils/uuid';
41 41 import HistoryTrendModal from './components/HistoryTrendModal.vue';
  42 + import trendIcon from '/@/assets/svg/trend.svg';
42 43
43 44 const ROUTE = useRoute();
44 45
... ... @@ -71,7 +72,7 @@
71 72 const resizable = ref(!unref(getIsSharePage));
72 73
73 74 const GirdLayoutColNum = 24;
74   - const GridLayoutMargin = 10;
  75 + const GridLayoutMargin = 20;
75 76
76 77 const handleBack = () => {
77 78 if (unref(getIsSharePage)) return;
... ... @@ -366,12 +367,12 @@
366 367 </script>
367 368
368 369 <template>
369   - <section class="bg-light-50 flex flex-col overflow-hidden h-full w-full">
  370 + <section class="flex flex-col overflow-hidden h-full w-full board-detail">
370 371 <PageHeader>
371 372 <template #title>
372 373 <div class="flex items-center">
373 374 <RollbackOutlined v-if="!getIsSharePage" class="mr-3" @click="handleBack" />
374   - <span>{{ getDataBoardName }}</span>
  375 + <span class="text-lg" color="#333">{{ getDataBoardName }}</span>
375 376 </div>
376 377 </template>
377 378 <template #extra>
... ... @@ -382,7 +383,7 @@
382 383 </Authority>
383 384 </template>
384 385 <div>
385   - <span class="mr-3 text-gray-400">已创建组件:</span>
  386 + <span class="mr-3 text-sm" style="color: #666">已创建组件:</span>
386 387 <span style="color: #409eff"> {{ dataBoardList.length }}个</span>
387 388 </div>
388 389 </PageHeader>
... ... @@ -429,10 +430,16 @@
429 430 >
430 431 <template #moreAction>
431 432 <Tooltip title="趋势">
432   - <LineChartOutlined
  433 + <!-- <LineChartOutlined
433 434 v-if="!getIsSharePage"
434 435 class="cursor-pointer mx-1"
435 436 @click="handleOpenHistroyDataModal(item.record.dataSource)"
  437 + /> -->
  438 + <img
  439 + :src="trendIcon"
  440 + v-if="!getIsSharePage"
  441 + class="cursor-pointer w-4.5 h-4.5"
  442 + @click="handleOpenHistroyDataModal(item.record.dataSource)"
436 443 />
437 444 </Tooltip>
438 445 </template>
... ... @@ -464,10 +471,11 @@
464 471 </section>
465 472 </template>
466 473
467   -<style>
  474 +<style lang="less" scoped>
468 475 .vue-grid-item:not(.vue-grid-placeholder) {
469   - background: #fcfcfc;
470   - border: 1px solid black;
  476 + background: #fff;
  477 + border: none !important;
  478 + /* border: 1px solid black; */
471 479 }
472 480 .vue-grid-item .resizing {
473 481 opacity: 0.9;
... ... @@ -513,15 +521,35 @@
513 521 cursor: pointer;
514 522 }
515 523
516   - .container {
517   - display: grid;
518   - grid-template-columns: 3;
519   - grid-row: 3;
520   - }
  524 + // .container {
  525 + // display: grid;
  526 + // grid-template-columns: 3;
  527 + // grid-row: 3;
  528 + // }
521 529
522 530 .grid-item-layout {
523 531 overflow: hidden;
524 532 border: 1px solid #eee !important;
525 533 background-color: #fcfcfc !important;
526 534 }
  535 +
  536 + .board-detail:deep(.ant-page-header) {
  537 + padding: 20px 20px 0 20px;
  538 + }
  539 +
  540 + .board-detail:deep(.ant-page-header-heading) {
  541 + height: 78px;
  542 + padding: 0 20px 0 20px;
  543 + box-sizing: border-box;
  544 + background-color: #fff;
  545 + }
  546 +
  547 + .board-detail:deep(.ant-page-header-heading-extra) {
  548 + margin: 0;
  549 + line-height: 78px;
  550 + }
  551 +
  552 + .board-detail:deep(.ant-page-header-content) {
  553 + padding-top: 20px;
  554 + }
527 555 </style>
... ...