|
@@ -8,10 +8,12 @@
|
|
<div class="flex-grow" :class="`list__wrapper_${type}`">
|
|
<div class="flex-grow" :class="`list__wrapper_${type}`">
|
|
<div v-for="(item, i) in listConfig" :key="`customlist${i}`" class="flex items-center" :class="`list-item_${type}`">
|
|
<div v-for="(item, i) in listConfig" :key="`customlist${i}`" class="flex items-center" :class="`list-item_${type}`">
|
|
<!-- 列表项前面的图标 -->
|
|
<!-- 列表项前面的图标 -->
|
|
- <div :class="`list-item__icon_${type}`"></div>
|
|
|
|
|
|
+ <div v-if="type === 'I'" :class="`list-item__icon list-item__icon_${type}`" :style="{ backgroundImage: `url(${getIconPath(item)})` }"> </div>
|
|
|
|
+ <div v-else-if="type === 'H'" :class="`list-item__icon list-item__icon_${type}`" :style="{ backgroundImage: `url(${getIconPath1(item)})` }">
|
|
|
|
+ </div>
|
|
<!-- 列表项的具体内容填充剩余宽度 -->
|
|
<!-- 列表项的具体内容填充剩余宽度 -->
|
|
<div class="flex-grow" :class="`list-item__content_${type}`">
|
|
<div class="flex-grow" :class="`list-item__content_${type}`">
|
|
- <div class="list-item__label">{{ item.label }}</div>
|
|
|
|
|
|
+ <div class="list-item__label" v-if="type !== 'I'">{{ item.label }}</div>
|
|
<div class="list-item__info" :class="`list-item__info_${item.color}`">{{ item.info }}</div>
|
|
<div class="list-item__info" :class="`list-item__info_${item.color}`">{{ item.info }}</div>
|
|
<div class="list-item__value" :class="`list-item__value_${item.color} list-item__value_${type}`">{{ item.value }}</div>
|
|
<div class="list-item__value" :class="`list-item__value_${item.color} list-item__value_${type}`">{{ item.value }}</div>
|
|
</div>
|
|
</div>
|
|
@@ -36,7 +38,29 @@ withDefaults(
|
|
type: 'A',
|
|
type: 'A',
|
|
}
|
|
}
|
|
);
|
|
);
|
|
-
|
|
|
|
|
|
+// function getIconPath(item) {
|
|
|
|
+// // 根据item.iconType返回对应图标路径
|
|
|
|
+// return require(`@/assets/images/fireNew/${item.label}.svg`);
|
|
|
|
+// }
|
|
|
|
+function getIconPath(item) {
|
|
|
|
+ return new URL(`/src/assets/images/fireNew/${item.label}.png`, import.meta.url).href;
|
|
|
|
+}
|
|
|
|
+function getIconPath1(item) {
|
|
|
|
+ switch (item.label) {
|
|
|
|
+ case '光纤预警':
|
|
|
|
+ return new URL('/src/assets/images/fireNew/9-3.png', import.meta.url).href;
|
|
|
|
+ case '温度预警':
|
|
|
|
+ return new URL('/src/assets/images/fireNew/9-3.png', import.meta.url).href;
|
|
|
|
+ case '一氧化碳预警':
|
|
|
|
+ return new URL('/src/assets/images/fireNew/9-4.png', import.meta.url).href;
|
|
|
|
+ case '烟雾预警':
|
|
|
|
+ return new URL('/src/assets/images/fireNew/9-5.png', import.meta.url).href;
|
|
|
|
+ case '火焰预警':
|
|
|
|
+ return new URL('/src/assets/images/fireNew/9-6.png', import.meta.url).href;
|
|
|
|
+ default:
|
|
|
|
+ return new URL('', import.meta.url).href;
|
|
|
|
+ }
|
|
|
|
+}
|
|
// defineEmits(['click']);
|
|
// defineEmits(['click']);
|
|
</script>
|
|
</script>
|
|
<style lang="less" scoped>
|
|
<style lang="less" scoped>
|
|
@@ -57,7 +81,8 @@ withDefaults(
|
|
--image-list: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/list.png);
|
|
--image-list: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/list.png);
|
|
--image-list_bg_h: url('/@/assets/images/fireNew/9-1.png');
|
|
--image-list_bg_h: url('/@/assets/images/fireNew/9-1.png');
|
|
--image-list_bg_h1: url('/@/assets/images/fireNew/9-2.png');
|
|
--image-list_bg_h1: url('/@/assets/images/fireNew/9-2.png');
|
|
- --image-list_bg_i: url('/@/assets/images/themify/deepblue/home-container/configurable/list_bg_i.png');
|
|
|
|
|
|
+ --image-list_bg_i: url('/@/assets/images/fireNew/10-1.png');
|
|
|
|
+ --image-list_bg_i1: url('/@/assets/images/fireNew/10-2.png');
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
@@ -73,7 +98,8 @@ withDefaults(
|
|
--image-list: url(/@/assets/images/home-container/configurable/firehome/list.png);
|
|
--image-list: url(/@/assets/images/home-container/configurable/firehome/list.png);
|
|
--image-list_bg_h: url('/@/assets/images/fireNew/9-1.png');
|
|
--image-list_bg_h: url('/@/assets/images/fireNew/9-1.png');
|
|
--image-list_bg_h1: url('/@/assets/images/fireNew/9-2.png');
|
|
--image-list_bg_h1: url('/@/assets/images/fireNew/9-2.png');
|
|
- --image-list_bg_i: url('/@/assets/images/home-container/configurable/list_bg_i.png');
|
|
|
|
|
|
+ --image-list_bg_i: url('/@/assets/images/fireNew/10-1.png');
|
|
|
|
+ --image-list_bg_i1: url('/@/assets/images/fireNew/10-2.png');
|
|
--image-list_bg_j: url('/@/assets/images/home-container/configurable/list_bg_j.png');
|
|
--image-list_bg_j: url('/@/assets/images/home-container/configurable/list_bg_j.png');
|
|
--image-linear-gradient-3: linear-gradient(to right, #39deff15, #3977e500);
|
|
--image-linear-gradient-3: linear-gradient(to right, #39deff15, #3977e500);
|
|
padding: 5px 20px;
|
|
padding: 5px 20px;
|
|
@@ -263,8 +289,14 @@ withDefaults(
|
|
color: aliceblue;
|
|
color: aliceblue;
|
|
}
|
|
}
|
|
.list_H {
|
|
.list_H {
|
|
- margin-bottom: 20px;
|
|
|
|
background: none;
|
|
background: none;
|
|
|
|
+ padding-bottom: 60px;
|
|
|
|
+}
|
|
|
|
+.list-item__icon_H {
|
|
|
|
+ width: 15px;
|
|
|
|
+ height: 15px;
|
|
|
|
+ margin-left: 12px;
|
|
|
|
+ background-size: 100% 100%;
|
|
}
|
|
}
|
|
.list-item_H {
|
|
.list-item_H {
|
|
align-items: center;
|
|
align-items: center;
|
|
@@ -273,12 +305,12 @@ withDefaults(
|
|
&:nth-child(2n) {
|
|
&:nth-child(2n) {
|
|
background-repeat: no-repeat;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
background-size: 100% 100%;
|
|
- background-image: var(--image-list_bg_h1);
|
|
|
|
|
|
+ background-image: var(--image-list_bg_h);
|
|
}
|
|
}
|
|
&:nth-child(2n + 1) {
|
|
&:nth-child(2n + 1) {
|
|
background-repeat: no-repeat;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
background-size: 100% 100%;
|
|
- background-image: var(--image-list_bg_h);
|
|
|
|
|
|
+ background-image: var(--image-list_bg_h1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.list-item__content_H {
|
|
.list-item__content_H {
|
|
@@ -293,7 +325,6 @@ withDefaults(
|
|
}
|
|
}
|
|
.list-item__content_H > .list-item__label {
|
|
.list-item__content_H > .list-item__label {
|
|
flex-basis: 33%;
|
|
flex-basis: 33%;
|
|
- margin-left: 20px;
|
|
|
|
}
|
|
}
|
|
.list-item__content_H > .list-item__info {
|
|
.list-item__content_H > .list-item__info {
|
|
flex-basis: 22%;
|
|
flex-basis: 22%;
|
|
@@ -357,43 +388,54 @@ withDefaults(
|
|
.list__wrapper_I {
|
|
.list__wrapper_I {
|
|
display: flex;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
- justify-content: flex-start;
|
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+}
|
|
|
|
+.list-item__icon_I {
|
|
|
|
+ background-repeat: no-repeat;
|
|
|
|
+ width: 50px;
|
|
|
|
+ height: 20px;
|
|
|
|
+ margin-left: 6px;
|
|
}
|
|
}
|
|
.list-item_I {
|
|
.list-item_I {
|
|
- width: 160px;
|
|
|
|
- height: 63px;
|
|
|
|
|
|
+ width: 230px;
|
|
|
|
+ height: 35px;
|
|
align-items: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
text-align: center;
|
|
- background-image: var(--image-list_bg_i);
|
|
|
|
- background-repeat: no-repeat;
|
|
|
|
- background-size: auto 100%;
|
|
|
|
- margin: 5px 10px;
|
|
|
|
|
|
+ margin: 15px 20px;
|
|
|
|
+ /* 背景组合A(1,4,5,8) */
|
|
|
|
+ &:nth-child(1),
|
|
|
|
+ &:nth-child(4),
|
|
|
|
+ &:nth-child(5),
|
|
|
|
+ &:nth-child(8) {
|
|
|
|
+ background-image: var(--image-list_bg_i1);
|
|
|
|
+ background-repeat: no-repeat;
|
|
|
|
+ background-size: 100% 100%;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ /* 背景组合B(2,3,6,7) */
|
|
|
|
+ &:nth-child(2),
|
|
|
|
+ &:nth-child(3),
|
|
|
|
+ &:nth-child(6),
|
|
|
|
+ &:nth-child(7) {
|
|
|
|
+ background-image: var(--image-list_bg_i);
|
|
|
|
+ background-repeat: no-repeat;
|
|
|
|
+ background-size: 100% 100%;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
.list-item__content_I {
|
|
.list-item__content_I {
|
|
- position: relative;
|
|
|
|
width: 100%;
|
|
width: 100%;
|
|
- height: 100%;
|
|
|
|
-}
|
|
|
|
-.list-item__content_I > .list-item__label {
|
|
|
|
- width: 60px;
|
|
|
|
- height: 100%;
|
|
|
|
- left: 0;
|
|
|
|
- position: absolute;
|
|
|
|
- font-size: 20px;
|
|
|
|
- line-height: 63px;
|
|
|
|
- color: #009bff;
|
|
|
|
|
|
+ display: flex;
|
|
}
|
|
}
|
|
.list-item__content_I > .list-item__info {
|
|
.list-item__content_I > .list-item__info {
|
|
- height: 50%;
|
|
|
|
- left: 70px;
|
|
|
|
- position: absolute;
|
|
|
|
|
|
+ font-size: 15px;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ color: #ddd;
|
|
|
|
+ flex-basis: 60%;
|
|
}
|
|
}
|
|
.list-item__content_I > .list-item__value {
|
|
.list-item__content_I > .list-item__value {
|
|
- top: 50%;
|
|
|
|
- height: 50%;
|
|
|
|
- left: 70px;
|
|
|
|
- position: absolute;
|
|
|
|
- font-size: 18px;
|
|
|
|
|
|
+ font-size: 15px;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ flex-basis: 30%;
|
|
}
|
|
}
|
|
.list_J {
|
|
.list_J {
|
|
background: unset;
|
|
background: unset;
|