Commit 9e3463aee1c4a4b1e906c28153a3f4669cfede26
Merge branch 'sqy_dev' into 'main'
'feat:地图搜索完善,fix:OEM调整,实时数据支持模糊查询,动态修改标题' See merge request huang/yun-teng-iot-front!116
Showing
17 changed files
with
105 additions
and
90 deletions
1 | -<!-- | |
2 | - * @Author: Vben | |
3 | - * @Description: logo component | |
4 | ---> | |
5 | - | |
6 | 1 | <template> |
7 | - <div class="application" :class="getAppLogoClass"> | |
2 | + <div class="anticon" :class="getAppLogoClass" @click="goHome"> | |
8 | 3 | <img v-if="getLogo" :src="getLogo" /> |
9 | 4 | <img v-else src="/src/assets/images/logo.png" /> |
10 | - <span | |
11 | - class="ml-2 md:opacity-100" | |
12 | - :class="getTitleClass" | |
13 | - v-show="showTitle" | |
14 | - style="white-space: nowrap; font-size: small; color: #f3f4fb" | |
15 | - > | |
5 | + <div class="ml-2 truncate md:opacity-100" :class="getTitleClass" v-show="showTitle"> | |
16 | 6 | {{ getTitle }} |
17 | - </span> | |
7 | + </div> | |
18 | 8 | </div> |
19 | 9 | </template> |
20 | 10 | <script lang="ts" setup> |
... | ... | @@ -96,6 +86,7 @@ |
96 | 86 | font-size: 16px; |
97 | 87 | font-weight: 700; |
98 | 88 | transition: all 0.5s; |
89 | + line-height: normal; | |
99 | 90 | } |
100 | 91 | } |
101 | 92 | </style> | ... | ... |
... | ... | @@ -3,7 +3,7 @@ import { useI18n } from '/@/hooks/web/useI18n'; |
3 | 3 | import { useTitle as usePageTitle } from '@vueuse/core'; |
4 | 4 | import { useGlobSetting } from '/@/hooks/setting'; |
5 | 5 | import { useRouter } from 'vue-router'; |
6 | - | |
6 | +import { createLocalStorage } from '/@/utils/cache/index'; | |
7 | 7 | import { REDIRECT_NAME } from '/@/router/constant'; |
8 | 8 | |
9 | 9 | export function useTitle() { |
... | ... | @@ -12,7 +12,7 @@ export function useTitle() { |
12 | 12 | const { currentRoute } = useRouter(); |
13 | 13 | |
14 | 14 | const pageTitle = usePageTitle(); |
15 | - | |
15 | + const storage = createLocalStorage(); | |
16 | 16 | watch( |
17 | 17 | () => currentRoute.value.path, |
18 | 18 | () => { |
... | ... | @@ -22,7 +22,9 @@ export function useTitle() { |
22 | 22 | } |
23 | 23 | |
24 | 24 | const tTitle = t(route?.meta?.title as string); |
25 | - pageTitle.value = tTitle ? ` ${tTitle} - ${title} ` : `${title}`; | |
25 | + pageTitle.value = tTitle | |
26 | + ? ` ${tTitle} - ${storage.get('platInfo').name ?? title} ` | |
27 | + : `${title}`; | |
26 | 28 | }, |
27 | 29 | { immediate: true } |
28 | 30 | ); | ... | ... |
... | ... | @@ -42,7 +42,7 @@ export const emailRule: Rule[] = [ |
42 | 42 | { |
43 | 43 | validator: (_, value: string) => { |
44 | 44 | const reg = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/; |
45 | - if (value === '') { | |
45 | + if (!value) { | |
46 | 46 | return Promise.resolve(); |
47 | 47 | } else if (!reg.test(value)) { |
48 | 48 | return Promise.reject('电子邮箱格式不正确'); | ... | ... |
... | ... | @@ -43,7 +43,12 @@ |
43 | 43 | </Card> |
44 | 44 | <Card title="联系我们" :bordered="false" v-bind="$attrs" :headStyle="{ padding: 0 }"> |
45 | 45 | <template #cover> |
46 | - <img :src="getQrCode" alt="" style="width: 150px; height: 150px; margin: 50px auto" /> | |
46 | + <img | |
47 | + :src="getQrCode" | |
48 | + v-if="getQrCode" | |
49 | + style="width: 150px; height: 150px; margin: 50px auto" | |
50 | + /> | |
51 | + <Empty v-else :image="Empty.PRESENTED_IMAGE_SIMPLE" /> | |
47 | 52 | </template> |
48 | 53 | <CardMeta> |
49 | 54 | <template #description> |
... | ... | @@ -161,6 +166,7 @@ |
161 | 166 | Progress, |
162 | 167 | Skeleton, |
163 | 168 | Tooltip, |
169 | + Empty, | |
164 | 170 | } from 'ant-design-vue'; |
165 | 171 | import { useUserStore } from '/@/store/modules/user'; |
166 | 172 | import { getEnterPriseDetail } from '/@/api/oem'; |
... | ... | @@ -186,6 +192,7 @@ |
186 | 192 | Progress, |
187 | 193 | Skeleton, |
188 | 194 | Tooltip, |
195 | + Empty, | |
189 | 196 | }, |
190 | 197 | props: { |
191 | 198 | role: { |
... | ... | @@ -288,6 +295,7 @@ |
288 | 295 | go, |
289 | 296 | registerTable, |
290 | 297 | isAdmin, |
298 | + Empty, | |
291 | 299 | }; |
292 | 300 | }, |
293 | 301 | }); | ... | ... |
1 | 1 | <template> |
2 | 2 | <div> |
3 | 3 | <div ref="chartRef" :style="{ height, width }" v-show="alarmList.length"></div> |
4 | - <div v-show="!alarmList.length"><Empty /></div> | |
4 | + <div v-show="!alarmList.length"><Empty :image="Empty.PRESENTED_IMAGE_SIMPLE" /></div> | |
5 | 5 | </div> |
6 | 6 | </template> |
7 | 7 | <script lang="ts" setup> | ... | ... |
1 | 1 | <template> |
2 | 2 | <div> |
3 | 3 | <div ref="chartRef" :style="{ height, width }" v-show="dataPointList.length"></div> |
4 | - <div v-show="!dataPointList.length"><Empty /></div> | |
4 | + <div v-show="!dataPointList.length"><Empty :image="Empty.PRESENTED_IMAGE_SIMPLE" /></div> | |
5 | 5 | </div> |
6 | 6 | </template> |
7 | 7 | <script lang="ts" setup> | ... | ... |
... | ... | @@ -127,6 +127,9 @@ |
127 | 127 | } |
128 | 128 | // 验证成功 --调-- 新增或者编辑接口 |
129 | 129 | const msg = computed(() => (unref(stepState).id ? '更新设备成功' : '新增设备成功')); |
130 | + // 此处需要删除地图的属性,否则会报堆栈溢出的错误 Uncaught RangeError: Maximum call stack size exceeded | |
131 | + Reflect.deleteProperty(DeviceStep1Ref.value.positionState, 'map'); | |
132 | + Reflect.deleteProperty(DeviceStep1Ref.value.positionState, 'marker'); | |
130 | 133 | if (unref(stepState).id) { |
131 | 134 | const editData = { |
132 | 135 | ...unref(stepState), |
... | ... | @@ -135,6 +138,7 @@ |
135 | 138 | ...DeviceStep1Ref.value?.positionState, |
136 | 139 | }, |
137 | 140 | }; |
141 | + | |
138 | 142 | await createOrEditDevice(editData); |
139 | 143 | } else { |
140 | 144 | const createData = { | ... | ... |
... | ... | @@ -44,10 +44,10 @@ |
44 | 44 | centered |
45 | 45 | > |
46 | 46 | <div> |
47 | - <a-form :label-col="labelCol" :colon="false"> | |
48 | - <a-row :gutter="20" class="mt-4"> | |
49 | - <a-col :span="20"> | |
50 | - <a-form-item label="搜索位置"> | |
47 | + <Form :label-col="labelCol" :colon="false"> | |
48 | + <Row :gutter="20" class="mt-4"> | |
49 | + <Col :span="20"> | |
50 | + <FormItem label="搜索位置"> | |
51 | 51 | <AutoComplete |
52 | 52 | v-model:value="positionState.address" |
53 | 53 | :options="dataSource" |
... | ... | @@ -57,22 +57,22 @@ |
57 | 57 | @select="handleSelect" |
58 | 58 | backfill |
59 | 59 | /> |
60 | - </a-form-item> | |
61 | - </a-col> | |
62 | - </a-row> | |
63 | - <a-row :gutter="20" class=""> | |
64 | - <a-col :span="10"> | |
65 | - <a-form-item label="经度"> | |
60 | + </FormItem> | |
61 | + </Col> | |
62 | + </Row> | |
63 | + <Row :gutter="20" class=""> | |
64 | + <Col :span="10"> | |
65 | + <FormItem label="经度"> | |
66 | 66 | <Input v-model:value="positionState.longitude" disabled /> |
67 | - </a-form-item> | |
68 | - </a-col> | |
69 | - <a-col :span="10"> | |
70 | - <a-form-item label="纬度"> | |
67 | + </FormItem> | |
68 | + </Col> | |
69 | + <Col :span="10"> | |
70 | + <FormItem label="纬度"> | |
71 | 71 | <Input v-model:value="positionState.latitude" disabled /> |
72 | - </a-form-item> | |
73 | - </a-col> | |
74 | - </a-row> | |
75 | - </a-form> | |
72 | + </FormItem> | |
73 | + </Col> | |
74 | + </Row> | |
75 | + </Form> | |
76 | 76 | <div ref="wrapRef" style="height: 300px; width: 90%" class="ml-6"></div> |
77 | 77 | </div> |
78 | 78 | </Modal> |
... | ... | @@ -88,6 +88,7 @@ |
88 | 88 | import { upload } from '/@/api/oss/ossFileUploader'; |
89 | 89 | import { FileItem } from '/@/components/Upload/src/typing'; |
90 | 90 | import { BAI_DU_MAP_URL } from '/@/utils/fnUtils'; |
91 | + | |
91 | 92 | import icon from '/@/assets/images/wz.png'; |
92 | 93 | import { useDebounceFn } from '@vueuse/core'; |
93 | 94 | export default defineComponent({ |
... | ... | @@ -95,15 +96,14 @@ |
95 | 96 | BasicForm, |
96 | 97 | Input, |
97 | 98 | AutoComplete, |
98 | - [Input.Group.name]: Input.Group, | |
99 | 99 | Upload, |
100 | 100 | EnvironmentTwoTone, |
101 | 101 | PlusOutlined, |
102 | 102 | Modal, |
103 | - [Form.name]: Form, | |
104 | - [Form.Item.name]: Form.Item, | |
105 | - [Row.name]: Row, | |
106 | - [Col.name]: Col, | |
103 | + Form, | |
104 | + FormItem: Form.Item, | |
105 | + Row, | |
106 | + Col, | |
107 | 107 | }, |
108 | 108 | props: { |
109 | 109 | deviceInfo: { |
... | ... | @@ -209,6 +209,7 @@ |
209 | 209 | const wrapRef = ref<HTMLDivElement | null>(null); |
210 | 210 | const { toPromise } = useScript({ src: BAI_DU_MAP_URL }); |
211 | 211 | |
212 | + // 初始化地图 | |
212 | 213 | async function initMap(longitude, latitude) { |
213 | 214 | await toPromise(); |
214 | 215 | await nextTick(); |
... | ... | @@ -243,7 +244,6 @@ |
243 | 244 | }); |
244 | 245 | } |
245 | 246 | const dataSource = ref<any[]>([]); |
246 | - | |
247 | 247 | const onSearch = (searchText: string) => { |
248 | 248 | if (!searchText) { |
249 | 249 | dataSource.value = []; |
... | ... | @@ -256,7 +256,6 @@ |
256 | 256 | const searchArr = []; |
257 | 257 | for (let i = 0; i < res.getCurrentNumPois(); i++) { |
258 | 258 | const item = res.getPoi(i); |
259 | - console.log(item); | |
260 | 259 | searchArr.push({ |
261 | 260 | label: item.address + item.title, |
262 | 261 | value: item.address + item.title, |
... | ... | @@ -268,13 +267,12 @@ |
268 | 267 | }, |
269 | 268 | }); //调用search方法,根据检索词searchText发起检索 |
270 | 269 | local.search(searchText); |
271 | - console.log(dataSource); | |
272 | 270 | }; |
273 | 271 | // 防抖函数包装一下,防止频繁执行 |
274 | 272 | const debounceSearch = useDebounceFn(onSearch, 500); |
275 | 273 | function handleSelect(value, option) { |
276 | 274 | dataSource.value = []; |
277 | - console.log(option); | |
275 | + | |
278 | 276 | positionState.address = option.value; //记录详细地址,含建筑物名 |
279 | 277 | const { lat, lng } = option.point; |
280 | 278 | positionState.latitude = lat; //记录当前选中地址坐标 |
... | ... | @@ -299,11 +297,9 @@ |
299 | 297 | // 取消选择位置 |
300 | 298 | const handleCancel = () => { |
301 | 299 | dataSource.value = []; |
302 | - | |
303 | 300 | for (let key in positionState) { |
304 | 301 | positionState[key] = ''; |
305 | 302 | } |
306 | - console.log(positionState); | |
307 | 303 | }; |
308 | 304 | // 父组件调用更新字段值的方法 |
309 | 305 | function parentSetFieldsValue(data) { | ... | ... |
... | ... | @@ -77,17 +77,17 @@ |
77 | 77 | setTableData(state.recordList); |
78 | 78 | return; |
79 | 79 | } |
80 | - const newRecordList = state.recordList.find((item) => { | |
81 | - if (item.key === key) return item; | |
82 | - console.log('--------------------------', item); | |
83 | - if (item.value === key) return item; | |
84 | - }); | |
85 | - console.log(newRecordList); | |
86 | - if (!newRecordList) { | |
87 | - setTableData([]); | |
88 | - } else { | |
89 | - setTableData([newRecordList]); | |
80 | + let newRecordList = []; | |
81 | + let len = state.recordList.length; | |
82 | + for (let i = 0; i < len; i++) { | |
83 | + if ( | |
84 | + state.recordList[i].key.indexOf(key) >= 0 || | |
85 | + state.recordList[i].value.indexOf(key) >= 0 | |
86 | + ) { | |
87 | + newRecordList.push(state.recordList[i]); | |
88 | + } | |
90 | 89 | } |
90 | + setTableData(newRecordList); | |
91 | 91 | }, |
92 | 92 | resetFunc() { |
93 | 93 | setTableData(state.recordList); | ... | ... |
... | ... | @@ -15,13 +15,13 @@ |
15 | 15 | <img v-if="logoPic" :src="logoPic" /> |
16 | 16 | <div v-else> |
17 | 17 | <div style="margin-top: 30px"> |
18 | - <PlusOutlined style="font-size: 30px" /> | |
18 | + <PlusOutlined style="font-size: 50px" /> | |
19 | 19 | </div> |
20 | 20 | <div |
21 | 21 | class="ant-upload-text flex" |
22 | - style="width: 180px; height: 130px; align-items: center" | |
22 | + style="width: 180px; height: 100px; align-items: center; font-size: 9px" | |
23 | 23 | > |
24 | - 支持.PNG、.JPG、.SVG格式,建议尺寸32px × 32px,大小不超过500KB。</div | |
24 | + 支持.PNG、.JPG格式,建议尺寸为32*32px,大小不超过500KB</div | |
25 | 25 | > |
26 | 26 | </div> |
27 | 27 | </Upload> |
... | ... | @@ -38,13 +38,13 @@ |
38 | 38 | <img v-if="bgPic" :src="bgPic" alt="avatar" /> |
39 | 39 | <div v-else> |
40 | 40 | <div style="margin-top: 30px"> |
41 | - <PlusOutlined style="font-size: 30px" /> | |
41 | + <PlusOutlined style="font-size: 50px" /> | |
42 | 42 | </div> |
43 | 43 | <div |
44 | 44 | class="ant-upload-text flex" |
45 | - style="width: 280px; height: 130px; align-items: center" | |
45 | + style="width: 280px; height: 100px; align-items: center; font-size: 9px" | |
46 | 46 | > |
47 | - 支持.PNG、.JPG、.SVG格式,建议尺寸为1250px × 730px(及以上),大小不超过5M。</div | |
47 | + 支持.PNG、.JPG格式,建议尺寸为1080*1620px,大小不超过5M</div | |
48 | 48 | > |
49 | 49 | </div> |
50 | 50 | </Upload> |
... | ... | @@ -64,8 +64,14 @@ |
64 | 64 | :before-upload="beforeUploadHomeSwiper" |
65 | 65 | > |
66 | 66 | <div v-if="fileList.length < 5"> |
67 | - <plus-outlined /> | |
68 | - <div class="ant-upload-text">Upload</div> | |
67 | + <div style="margin-top: 30px"> | |
68 | + <PlusOutlined style="font-size: 50px" /> | |
69 | + </div> | |
70 | + <div | |
71 | + class="ant-upload-text flex" | |
72 | + style="width: 150px; height: 70px; align-items: center; font-size: 9px" | |
73 | + >支持.PNG、.JPG格式,建议尺寸为800*600px,大小不超过3M</div | |
74 | + > | |
69 | 75 | </div> |
70 | 76 | </Upload> |
71 | 77 | <Modal :visible="previewVisible" :footer="null" @cancel="handleCancel"> |
... | ... | @@ -252,7 +258,7 @@ |
252 | 258 | |
253 | 259 | onMounted(async () => { |
254 | 260 | const res = await getAppDesign(); |
255 | - const rotation = res.rotation.split(','); | |
261 | + const rotation = res.rotation ? res.rotation.split(',') : []; | |
256 | 262 | const arr: any[] = []; |
257 | 263 | for (let item of rotation) { |
258 | 264 | arr.push({ |
... | ... | @@ -265,7 +271,7 @@ |
265 | 271 | setFieldsValue(res); |
266 | 272 | logoPic.value = res.logo; |
267 | 273 | bgPic.value = res.background; |
268 | - if (arr[0].url === '') return; | |
274 | + if (arr[0]?.url === '') return; | |
269 | 275 | fileList.value = arr; |
270 | 276 | }); |
271 | 277 | return { | ... | ... |
... | ... | @@ -14,13 +14,13 @@ |
14 | 14 | <img v-if="logoPic" :src="logoPic" /> |
15 | 15 | <div v-else> |
16 | 16 | <div style="margin-top: 30px"> |
17 | - <PlusOutlined style="font-size: 30px" /> | |
17 | + <PlusOutlined style="font-size: 50px" /> | |
18 | 18 | </div> |
19 | 19 | <div |
20 | 20 | class="ant-upload-text flex" |
21 | - style="width: 180px; height: 130px; align-items: center" | |
21 | + style="width: 180px; height: 100px; align-items: center; font-size: 9px" | |
22 | 22 | > |
23 | - 支持.PNG、.JPG、.SVG格式,建议尺寸32px × 32px,大小不超过500KB。</div | |
23 | + 支持.PNG、.JPG格式,建议尺寸为32*32px,大小不超过500KB</div | |
24 | 24 | > |
25 | 25 | </div> |
26 | 26 | </Upload> |
... | ... | @@ -39,7 +39,15 @@ |
39 | 39 | <div style="background-color: #ccc; margin-top: 20px">重新上传</div> |
40 | 40 | </div> |
41 | 41 | <div v-else> |
42 | - <PlusOutlined style="font-size: 30px" /> | |
42 | + <div style="margin-top: 20px"> | |
43 | + <PlusOutlined style="font-size: 30px" /> | |
44 | + </div> | |
45 | + <div | |
46 | + class="ant-upload-text flex" | |
47 | + style="width: 130px; height: 70px; align-items: center; font-size: 9px" | |
48 | + > | |
49 | + 支持.ICON格式,建议尺寸为16*16px</div | |
50 | + > | |
43 | 51 | </div> |
44 | 52 | </Upload> |
45 | 53 | </template> |
... | ... | @@ -55,13 +63,13 @@ |
55 | 63 | <img v-if="bgPic" :src="bgPic" alt="avatar" /> |
56 | 64 | <div v-else> |
57 | 65 | <div style="margin-top: 30px"> |
58 | - <PlusOutlined style="font-size: 30px" /> | |
66 | + <PlusOutlined style="font-size: 50px" /> | |
59 | 67 | </div> |
60 | 68 | <div |
61 | 69 | class="ant-upload-text flex" |
62 | - style="width: 280px; height: 130px; align-items: center" | |
70 | + style="width: 280px; height: 130px; align-items: center; font-size: 9px" | |
63 | 71 | > |
64 | - 支持.PNG、.JPG、.SVG格式,建议尺寸为1250px × 730px(及以上),大小不超过5M。</div | |
72 | + 支持.PNG、.JPG格式,建议尺寸为1920*1080px以上,大小不超过5M</div | |
65 | 73 | > |
66 | 74 | </div> |
67 | 75 | </Upload> |
... | ... | @@ -97,6 +105,8 @@ |
97 | 105 | import { PlusOutlined } from '@ant-design/icons-vue'; |
98 | 106 | import { useUserStore } from '/@/store/modules/user'; |
99 | 107 | import { createLocalStorage } from '/@/utils/cache/index'; |
108 | + import { useTitle } from '@vueuse/core'; | |
109 | + import { useGlobSetting } from '/@/hooks/setting'; | |
100 | 110 | export default defineComponent({ |
101 | 111 | components: { |
102 | 112 | BasicForm, |
... | ... | @@ -221,6 +231,8 @@ |
221 | 231 | userStore.setPlatInfo(newFieldValue); |
222 | 232 | // 保存本地缓存 |
223 | 233 | storage.set('platInfo', newFieldValue); |
234 | + const { title } = useGlobSetting(); | |
235 | + useTitle(`OEM定制 - ${newFieldValue.name === '' ? title : newFieldValue.name}`); | |
224 | 236 | } |
225 | 237 | |
226 | 238 | onMounted(async () => { | ... | ... |
... | ... | @@ -14,13 +14,13 @@ |
14 | 14 | <img v-if="qrcodePic" :src="qrcodePic" alt="avatar" /> |
15 | 15 | <div v-else> |
16 | 16 | <div style="margin-top: 30px"> |
17 | - <PlusOutlined style="font-size: 30px" /> | |
17 | + <PlusOutlined style="font-size: 50px" /> | |
18 | 18 | </div> |
19 | 19 | <div |
20 | 20 | class="ant-upload-text flex" |
21 | - style="width: 280px; height: 130px; align-items: center" | |
21 | + style="width: 180px; height: 100px; align-items: center; font-size: 9px" | |
22 | 22 | > |
23 | - 支持.PNG、.JPG、.SVG格式,建议尺寸为300px × 300px(及以上),大小不超过2M。</div | |
23 | + 支持.PNG、.JPG格式,建议尺寸为300*300px,大小不超过2M</div | |
24 | 24 | > |
25 | 25 | </div> |
26 | 26 | </Upload> | ... | ... |
... | ... | @@ -9,7 +9,7 @@ |
9 | 9 | </Card> |
10 | 10 | |
11 | 11 | <div style="width: 100%"> |
12 | - <div class="title">{{ activeKey }}</div> | |
12 | + <Card class="card" :title="activeKey" :bordered="false" :bodyStyle="{ display: 'none' }" /> | |
13 | 13 | <EnterpriseInfo v-if="activeKey === '企业信息'" /> |
14 | 14 | <CVIDraw v-else-if="activeKey === '平台定制'" /> |
15 | 15 | <AppDraw v-else /> |
... | ... | @@ -23,6 +23,7 @@ |
23 | 23 | import EnterpriseInfo from './cpns/EnterpriseInfo.vue'; |
24 | 24 | import CVIDraw from './cpns/CVIDraw.vue'; |
25 | 25 | import AppDraw from './cpns/AppDraw.vue'; |
26 | + | |
26 | 27 | const activeKey = ref('企业信息'); |
27 | 28 | </script> |
28 | 29 | |
... | ... | @@ -30,18 +31,16 @@ |
30 | 31 | .title { |
31 | 32 | width: 97.4%; |
32 | 33 | height: 50px; |
33 | - margin: 20px; | |
34 | + margin: 1rem; | |
34 | 35 | line-height: 50px; |
35 | 36 | font-size: 18px; |
36 | - | |
37 | - background-color: #fff; | |
38 | 37 | padding-left: 10px; |
38 | + background-color: #fff; | |
39 | 39 | } |
40 | 40 | .tab-card { |
41 | - margin: 20px 0 20px 20px; | |
41 | + margin: 1rem 0 1rem 1rem; | |
42 | 42 | } |
43 | 43 | .card { |
44 | - margin: 20px; | |
45 | - border-radius: 8px; | |
44 | + margin: 1rem; | |
46 | 45 | } |
47 | 46 | </style> | ... | ... |