简柏林 / 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>
@@ -126,15 +126,15 @@ @@ -126,15 +126,15 @@
126 <div class="flex flex-col w-full h-full min-w-3 min-h-3"> 126 <div class="flex flex-col w-full h-full min-w-3 min-h-3">
127 <div :id="getControlsWidgetId()" class="widget-charts w-full h-full flex-auto"></div> 127 <div :id="getControlsWidgetId()" class="widget-charts w-full h-full flex-auto"></div>
128 <div> 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 <div 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 <Tooltip 136 <Tooltip
137 - placement="topLeft" 137 + placement="top"
138 :title="dateUtil(props?.value?.updateTime || new Date()).format(DEFAULT_DATE_FORMAT)" 138 :title="dateUtil(props?.value?.updateTime || new Date()).format(DEFAULT_DATE_FORMAT)"
139 > 139 >
140 <span class="mr-2">更新时间:</span> 140 <span class="mr-2">更新时间:</span>
@@ -64,6 +64,11 @@ @@ -64,6 +64,11 @@
64 changeValue.value = newValue; 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 onMounted(() => { 72 onMounted(() => {
68 if (props.random) 73 if (props.random)
69 timeout = setInterval(handleRandom, DEFAULT_ANIMATION_INTERVAL) as unknown as number; 74 timeout = setInterval(handleRandom, DEFAULT_ANIMATION_INTERVAL) as unknown as number;
@@ -79,33 +84,64 @@ @@ -79,33 +84,64 @@
79 <section class="w-full h-full"> 84 <section class="w-full h-full">
80 <div class="flex flex-col w-full h-full"> 85 <div class="flex flex-col w-full h-full">
81 <div class="flex-1 flex justify-center items-center"> 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 <div 97 <div
85 v-for="number in integerPart" 98 v-for="number in integerPart"
86 :key="number" 99 :key="number"
87 - class="border border-gray-400 p-2" 100 + class="digital-wrapper__int"
88 :style="{ 101 :style="{
89 color: getPropsValue.fontColor, 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 </div> 108 </div>
95 </Space> 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 <div 124 <div
98 v-for="number in decimalPart" 125 v-for="number in decimalPart"
99 :key="number" 126 :key="number"
100 - class="border border-gray-400 p-1" 127 + class="digital-wrapper__float"
101 :style="{ 128 :style="{
102 color: getPropsValue.fontColor, 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 </div> 137 </div>
108 </Space> 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 </div> 145 </div>
110 </div> 146 </div>
111 147
@@ -114,14 +150,13 @@ @@ -114,14 +150,13 @@
114 :style="{ fontSize: fontSize({ radio: getRadio, basic: 18 }) }" 150 :style="{ fontSize: fontSize({ radio: getRadio, basic: 18 }) }"
115 > 151 >
116 <span>{{ props.value.name || '电表' }}</span> 152 <span>{{ props.value.name || '电表' }}</span>
117 - <span class="px-1">({{ getPropsValue.unit }})</span>  
118 </div> 153 </div>
119 <div 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 <Tooltip 158 <Tooltip
124 - placement="topLeft" 159 + placement="top"
125 :title="dateUtil(props?.value?.updateTime || new Date()).format(DEFAULT_DATE_FORMAT)" 160 :title="dateUtil(props?.value?.updateTime || new Date()).format(DEFAULT_DATE_FORMAT)"
126 > 161 >
127 <span class="mr-1">更新时间:</span> 162 <span class="mr-1">更新时间:</span>
@@ -134,3 +169,35 @@ @@ -134,3 +169,35 @@
134 <div></div> 169 <div></div>
135 </section> 170 </section>
136 </template> 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,7 +26,7 @@
26 26
27 const getWidth = computed(() => { 27 const getWidth = computed(() => {
28 const marign = 5; 28 const marign = 5;
29 - const { width = 180 } = props.radio || {}; 29 + const { width = 140 } = props.radio || {};
30 return width - marign; 30 return width - marign;
31 }); 31 });
32 </script> 32 </script>
@@ -37,11 +37,11 @@ @@ -37,11 +37,11 @@
37 > 37 >
38 <Image :width="getWidth" :src="props?.value?.value || ''" :fallback="fallback" /> 38 <Image :width="getWidth" :src="props?.value?.value || ''" :fallback="fallback" />
39 <div 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 <Tooltip 43 <Tooltip
44 - placement="topLeft" 44 + placement="top"
45 :title="props?.value?.updateTime || dateUtil().format(DEFAULT_DATE_FORMAT)" 45 :title="props?.value?.updateTime || dateUtil().format(DEFAULT_DATE_FORMAT)"
46 > 46 >
47 <span>更新时间:</span> 47 <span>更新时间:</span>
@@ -71,30 +71,33 @@ @@ -71,30 +71,33 @@
71 }" 71 }"
72 /> 72 />
73 </div> 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 </div> 91 </div>
78 </div> 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 </div> 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 <Tooltip 95 <Tooltip
93 - placement="topLeft" 96 + placement="top"
94 :title="dateUtil(props?.value?.updateTime || new Date()).format(DEFAULT_DATE_FORMAT)" 97 :title="dateUtil(props?.value?.updateTime || new Date()).format(DEFAULT_DATE_FORMAT)"
95 > 98 >
96 <div 99 <div
97 - :style="{ fontSize: fontSize({ radio: getRadio, basic: 12, max: 16 }) }" 100 + :style="{ fontSize: fontSize({ radio: getRadio, basic: 12, max: 14 }) }"
98 class="truncate" 101 class="truncate"
99 > 102 >
100 <span class="mr-1">更新时间:</span> 103 <span class="mr-1">更新时间:</span>
@@ -64,7 +64,7 @@ export const TextComponentDefaultConfig: Partial<ComponentInfo> = { @@ -64,7 +64,7 @@ export const TextComponentDefaultConfig: Partial<ComponentInfo> = {
64 64
65 export const textComponentConfig: TextComponentDefault[] = [ 65 export const textComponentConfig: TextComponentDefault[] = [
66 TextComponent1Config, 66 TextComponent1Config,
67 - TextComponent2Config, 67 + // TextComponent2Config,
68 TextComponent3Config, 68 TextComponent3Config,
69 TextComponent4Config, 69 TextComponent4Config,
70 TextComponent5Config, 70 TextComponent5Config,
@@ -54,7 +54,7 @@ @@ -54,7 +54,7 @@
54 </script> 54 </script>
55 55
56 <template> 56 <template>
57 - <div class="flex justify-between w-full"> 57 + <div class="flex justify-between w-full p-5">
58 <div class="flex" :style="{ width: `calc(100% - 60px)` }"> 58 <div class="flex" :style="{ width: `calc(100% - 60px)` }">
59 <div 59 <div
60 v-for="(item, index) in props.record" 60 v-for="(item, index) in props.record"
@@ -62,15 +62,15 @@ @@ -62,15 +62,15 @@
62 :style="{ width: `${100 / props.record.length}%` }" 62 :style="{ width: `${100 / props.record.length}%` }"
63 :key="index" 63 :key="index"
64 > 64 >
65 - <Tooltip :title="item.deviceName" placement="topLeft"> 65 + <Tooltip :title="item.deviceName" placement="top">
66 <span> 66 <span>
67 - <SvgIcon name="" prefix="iconfont" class="!fill-emerald-400" /> 67 + <!-- <SvgIcon name="" prefix="iconfont" class="!fill-emerald-400" /> -->
68 <span>{{ item.deviceRename || item.deviceName }}</span> 68 <span>{{ item.deviceRename || item.deviceName }}</span>
69 </span> 69 </span>
70 </Tooltip> 70 </Tooltip>
71 </div> 71 </div>
72 </div> 72 </div>
73 - <div class="flex items-center w-10"> 73 + <div class="flex items-center gap-5">
74 <slot name="moreAction"></slot> 74 <slot name="moreAction"></slot>
75 <Dropdown 75 <Dropdown
76 v-if="dropMenuList.length" 76 v-if="dropMenuList.length"
@@ -79,7 +79,10 @@ @@ -79,7 +79,10 @@
79 @menu-event="handleMenuEvent" 79 @menu-event="handleMenuEvent"
80 > 80 >
81 <Tooltip title="更多"> 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 </Tooltip> 86 </Tooltip>
84 </Dropdown> 87 </Dropdown>
85 </div> 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,6 +59,8 @@
59 flex-direction: column; 59 flex-direction: column;
60 width: 100%; 60 width: 100%;
61 height: 100%; 61 height: 100%;
  62 + background-color: #fff;
  63 + border-radius: 3px;
62 } 64 }
63 .widget-content { 65 .widget-content {
64 display: flex; 66 display: flex;
@@ -8,8 +8,8 @@ export interface RadioRecord { @@ -8,8 +8,8 @@ export interface RadioRecord {
8 export const DEFAULT_ANIMATION_INTERVAL = 2000; 8 export const DEFAULT_ANIMATION_INTERVAL = 2000;
9 9
10 export const DEFAULT_RADIO_RECORD: RadioRecord = { 10 export const DEFAULT_RADIO_RECORD: RadioRecord = {
11 - width: 300,  
12 - height: 300, 11 + width: 200,
  12 + height: 140,
13 isLess: false, 13 isLess: false,
14 radio: 1, 14 radio: 1,
15 }; 15 };
@@ -39,6 +39,7 @@ @@ -39,6 +39,7 @@
39 import { useSocketConnect } from '../hook/useSocketConnect'; 39 import { useSocketConnect } from '../hook/useSocketConnect';
40 import { buildUUID } from '/@/utils/uuid'; 40 import { buildUUID } from '/@/utils/uuid';
41 import HistoryTrendModal from './components/HistoryTrendModal.vue'; 41 import HistoryTrendModal from './components/HistoryTrendModal.vue';
  42 + import trendIcon from '/@/assets/svg/trend.svg';
42 43
43 const ROUTE = useRoute(); 44 const ROUTE = useRoute();
44 45
@@ -71,7 +72,7 @@ @@ -71,7 +72,7 @@
71 const resizable = ref(!unref(getIsSharePage)); 72 const resizable = ref(!unref(getIsSharePage));
72 73
73 const GirdLayoutColNum = 24; 74 const GirdLayoutColNum = 24;
74 - const GridLayoutMargin = 10; 75 + const GridLayoutMargin = 20;
75 76
76 const handleBack = () => { 77 const handleBack = () => {
77 if (unref(getIsSharePage)) return; 78 if (unref(getIsSharePage)) return;
@@ -366,12 +367,12 @@ @@ -366,12 +367,12 @@
366 </script> 367 </script>
367 368
368 <template> 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 <PageHeader> 371 <PageHeader>
371 <template #title> 372 <template #title>
372 <div class="flex items-center"> 373 <div class="flex items-center">
373 <RollbackOutlined v-if="!getIsSharePage" class="mr-3" @click="handleBack" /> 374 <RollbackOutlined v-if="!getIsSharePage" class="mr-3" @click="handleBack" />
374 - <span>{{ getDataBoardName }}</span> 375 + <span class="text-lg" color="#333">{{ getDataBoardName }}</span>
375 </div> 376 </div>
376 </template> 377 </template>
377 <template #extra> 378 <template #extra>
@@ -382,7 +383,7 @@ @@ -382,7 +383,7 @@
382 </Authority> 383 </Authority>
383 </template> 384 </template>
384 <div> 385 <div>
385 - <span class="mr-3 text-gray-400">已创建组件:</span> 386 + <span class="mr-3 text-sm" style="color: #666">已创建组件:</span>
386 <span style="color: #409eff"> {{ dataBoardList.length }}个</span> 387 <span style="color: #409eff"> {{ dataBoardList.length }}个</span>
387 </div> 388 </div>
388 </PageHeader> 389 </PageHeader>
@@ -429,10 +430,16 @@ @@ -429,10 +430,16 @@
429 > 430 >
430 <template #moreAction> 431 <template #moreAction>
431 <Tooltip title="趋势"> 432 <Tooltip title="趋势">
432 - <LineChartOutlined 433 + <!-- <LineChartOutlined
433 v-if="!getIsSharePage" 434 v-if="!getIsSharePage"
434 class="cursor-pointer mx-1" 435 class="cursor-pointer mx-1"
435 @click="handleOpenHistroyDataModal(item.record.dataSource)" 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 </Tooltip> 444 </Tooltip>
438 </template> 445 </template>
@@ -464,10 +471,11 @@ @@ -464,10 +471,11 @@
464 </section> 471 </section>
465 </template> 472 </template>
466 473
467 -<style> 474 +<style lang="less" scoped>
468 .vue-grid-item:not(.vue-grid-placeholder) { 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 .vue-grid-item .resizing { 480 .vue-grid-item .resizing {
473 opacity: 0.9; 481 opacity: 0.9;
@@ -513,15 +521,35 @@ @@ -513,15 +521,35 @@
513 cursor: pointer; 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 .grid-item-layout { 530 .grid-item-layout {
523 overflow: hidden; 531 overflow: hidden;
524 border: 1px solid #eee !important; 532 border: 1px solid #eee !important;
525 background-color: #fcfcfc !important; 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 </style> 555 </style>