|
|
@@ -5,793 +5,979 @@
|
|
|
<!-- 部分类型的列表需要加一张图片 -->
|
|
|
<div :class="`list__image_${type}`"></div>
|
|
|
<!-- 剩下的部分填充剩余宽度 -->
|
|
|
- <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 class="flex-grow h-full" :class="`list__wrapper_${type}`">
|
|
|
+ <div v-for="(item, i) in listConfig" :key="`vvhccdcl${i}`" :class="`list-item_${type}`">
|
|
|
<!-- 列表项前面的图标 -->
|
|
|
- <div :class="`list-item__icon_${type}`"></div>
|
|
|
+ <div :class="`list-item__title_${type}`">{{ item.title }}</div>
|
|
|
<!-- 列表项的具体内容填充剩余宽度 -->
|
|
|
- <div class="flex-grow" :class="`list-item__content_${type}`">
|
|
|
- <div class="list-item__label">{{ item.label }}</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 v-for="(ctx, j) in item.contents" :key="`vvhccdclc${j}`" :class="`list-item__content_${type}`">
|
|
|
+ <div class="list-item__label">{{ ctx.label }}</div>
|
|
|
+ <div class="list-item__info" :class="`list-item__info_${ctx.color}`">{{ ctx.info }}</div>
|
|
|
+ <div class="list-item__value" :class="`list-item__value_${ctx.color} list-item__value_${type}`">{{ ctx.value }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script lang="ts" setup>
|
|
|
-const props = withDefaults(
|
|
|
- defineProps<{
|
|
|
- listConfig: {
|
|
|
- value: string;
|
|
|
- color: string;
|
|
|
- label: string;
|
|
|
- info: string;
|
|
|
- }[];
|
|
|
- /** A B C D E F G */
|
|
|
- type: string;
|
|
|
- }>(),
|
|
|
- {
|
|
|
- listConfig: () => [],
|
|
|
- type: 'A',
|
|
|
- }
|
|
|
-);
|
|
|
-// defineEmits(['click']);
|
|
|
+ withDefaults(
|
|
|
+ defineProps<{
|
|
|
+ listConfig: {
|
|
|
+ title: string;
|
|
|
+ contents: {
|
|
|
+ value: string;
|
|
|
+ color: string;
|
|
|
+ label: string;
|
|
|
+ info: string;
|
|
|
+ }[];
|
|
|
+ }[];
|
|
|
+ /** A B */
|
|
|
+ type: string;
|
|
|
+ }>(),
|
|
|
+ {
|
|
|
+ listConfig: () => [],
|
|
|
+ type: 'A',
|
|
|
+ }
|
|
|
+ );
|
|
|
+
|
|
|
+ // defineEmits(['click']);
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
-@import '/@/design/theme.less';
|
|
|
-@import '/@/design/theme.less';
|
|
|
-/* Timeline 相关的样式 */
|
|
|
-@{theme-green} {
|
|
|
- .list {
|
|
|
- // --image-list_bg_default: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_default.png);
|
|
|
- // --image-triangle_icon: url(/@/assets/images/themify/deepblue/home-container/configurable/triangle_icon.png);
|
|
|
- // --image-list_bg_b: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_b.png);
|
|
|
- // --image-deco_1: url(/@/assets/images/themify/deepblue/home-container/configurable/deco_1.png);
|
|
|
- // --image-list_bg_c: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_c.png);
|
|
|
- // --image-list_bg_defflip: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_defflip.png);
|
|
|
- // --image-list_bg_d: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_d.png);
|
|
|
- // --image-list_bg_s: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_s.png);
|
|
|
- // --image-list_bg_e: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_e.png);
|
|
|
- --image-list: url(/@/assets/images/themify/green/home-container/configurable/list_bg_f.png);
|
|
|
- --image-list_bg_h: url(/@/assets/images/themify/green/home-container/configurable/list_bg_h.png);
|
|
|
- --image-list_bg_i: url(/@/assets/images/themify/green/home-container/configurable/list_bg_i.png);
|
|
|
- // --image-list_bg_r: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_r.png);
|
|
|
- }
|
|
|
-}
|
|
|
-@{theme-deepblue} {
|
|
|
- .list {
|
|
|
- --image-list_bg_default: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_default.png);
|
|
|
- --image-triangle_icon: url(/@/assets/images/themify/deepblue/home-container/configurable/triangle_icon.png);
|
|
|
- --image-list_bg_b: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_b.png);
|
|
|
- --image-deco_1: url(/@/assets/images/themify/deepblue/home-container/configurable/deco_1.png);
|
|
|
- --image-list_bg_c: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_c.png);
|
|
|
- --image-list_bg_defflip: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_defflip.png);
|
|
|
- --image-list_bg_d: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_d.png);
|
|
|
- --image-list_bg_s: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_s.png);
|
|
|
- --image-list_bg_e: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_e.png);
|
|
|
- --image-list: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/list.png);
|
|
|
- --image-list_bg_h: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_h.png);
|
|
|
- --image-list_bg_i: url('/@/assets/images/themify/deepblue/home-container/configurable/list_bg_i.png');
|
|
|
- --image-list_bg_r: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_r.png);
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.list {
|
|
|
- --image-list_bg_default: url(/@/assets/images/home-container/configurable/list_bg_default.png);
|
|
|
- --image-triangle_icon: url(/@/assets/images/home-container/configurable/triangle_icon.png);
|
|
|
- --image-list_bg_b: url(/@/assets/images/home-container/configurable/list_bg_b.png);
|
|
|
- --image-deco_1: url(/@/assets/images/home-container/configurable/deco_1.png);
|
|
|
- --image-list_bg_c: url(/@/assets/images/home-container/configurable/list_bg_c.png);
|
|
|
- --image-list_bg_defflip: url(/@/assets/images/home-container/configurable/list_bg_defflip.png);
|
|
|
- --image-list_bg_d: url(/@/assets/images/home-container/configurable/list_bg_d.png);
|
|
|
- --image-list_bg_s: url(/@/assets/images/home-container/configurable/list_bg_s.png);
|
|
|
- --image-list_bg_e: url(/@/assets/images/home-container/configurable/list_bg_e.png);
|
|
|
- --image-list: url(/@/assets/images/home-container/configurable/firehome/list.png);
|
|
|
- --image-list_bg_h: url(/@/assets/images/home-container/configurable/list_bg_h.png);
|
|
|
- --image-list_bg_r: url(/@/assets/images/home-container/configurable/list_bg_r.png);
|
|
|
- --image-list_bg_r_icon1: url(/@/assets/images/home-container/configurable/list_bg_r_icon1.png);
|
|
|
- --image-list_bg_r_icon2: url(/@/assets/images/home-container/configurable/list_bg_r_icon2.png);
|
|
|
- --image-list_bg_i: url('/@/assets/images/home-container/configurable/list_bg_i.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-list_icon_l1: url('/@/assets/images/home-container/configurable/minehome/list-icon-wd.png');
|
|
|
- --image-list_icon_l2: url('/@/assets/images/home-container/configurable/minehome/list-icon-CO.png');
|
|
|
- --image-list_icon_l3: url('/@/assets/images/home-container/configurable/minehome/list-icon-yw.png');
|
|
|
- --image-list_icon_l4: url('/@/assets/images/home-container/configurable/minehome/list-icon-hy.png');
|
|
|
- --image-list_icon_m1: url('/@/assets/images/home-container/configurable/minehome/list-icon-co1.png');
|
|
|
- --image-list_icon_m2: url('/@/assets/images/home-container/configurable/minehome/list-icon-co2.png');
|
|
|
- --image-list_icon_m3: url('/@/assets/images/home-container/configurable/minehome/list-icon-ch4.png');
|
|
|
- --image-list_icon_m4: url('/@/assets/images/home-container/configurable/minehome/list-icon-c2h2.png');
|
|
|
- --image-list_icon_m5: url('/@/assets/images/home-container/configurable/minehome/list-icon-o2.png');
|
|
|
- --image-list_icon_m6: url('/@/assets/images/home-container/configurable/minehome/list-icon-c2h4.png');
|
|
|
- --image-list_icon_m7: url('/@/assets/images/home-container/configurable/minehome/list-icon-n2.png');
|
|
|
- --image-list_icon_m8: url('/@/assets/images/home-container/configurable/minehome/list-icon-h2.png');
|
|
|
- --image-list_bg_l1: url('/@/assets/images/home-container/configurable/minehome/list-bg-l1.png');
|
|
|
- --image-list_bg_l2: url('/@/assets/images/home-container/configurable/minehome/list-bg-l2.png');
|
|
|
- --image-list_bg_m1: url('/@/assets/images/home-container/configurable/minehome/list-bg-m1.png');
|
|
|
- --image-list_bg_m2: url('/@/assets/images/home-container/configurable/minehome/list-bg-m2.png');
|
|
|
- --image-list_bg_n1: url('/@/assets/images/home-container/configurable/minehome/list-bg-n1.png');
|
|
|
- --image-list_bg_n2: url('/@/assets/images/home-container/configurable/minehome/list-bg-n2.png');
|
|
|
- --image-list_bg_n3: url('/@/assets/images/home-container/configurable/minehome/list-bg-n3.png');
|
|
|
- --image-list_bg_n4: url('/@/assets/images/home-container/configurable/minehome/list-bg-n4.png');
|
|
|
- --image-list_bg_o1: url('/@/assets/images/beltFire/listO1.png');
|
|
|
- --image-list_bg_o2: url('/@/assets/images/beltFire/listO2.png');
|
|
|
- --image-list_icon_o1: url('/@/assets/images/beltFire/listO1.svg');
|
|
|
- --image-list_icon_o2: url('/@/assets/images/beltFire/listO2.svg');
|
|
|
- padding: 5px 20px;
|
|
|
- position: relative;
|
|
|
- background-repeat: no-repeat;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background-size: 100% 100%;
|
|
|
- background-image: var(--image-list_bg_default);
|
|
|
-}
|
|
|
-
|
|
|
-.list_A {
|
|
|
- padding-left: 5px;
|
|
|
-}
|
|
|
-.list-item__content_A {
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-image: @vent-gas-list-item-bg-img;
|
|
|
- // padding: 5px 10px;
|
|
|
- display: flex;
|
|
|
-}
|
|
|
-.list-item__icon_A {
|
|
|
- background-repeat: no-repeat;
|
|
|
- width: 25px;
|
|
|
- height: 29px;
|
|
|
- background-image: var(--image-triangle_icon);
|
|
|
-}
|
|
|
-
|
|
|
-.list-item__content_B {
|
|
|
- background-repeat: no-repeat;
|
|
|
- padding: 5px 10px 10px 10px;
|
|
|
- display: flex;
|
|
|
- background-position: left bottom;
|
|
|
- background-size: 100% auto;
|
|
|
- background-image: var(--image-list_bg_b);
|
|
|
-}
|
|
|
-.list__image_B {
|
|
|
- width: 77px;
|
|
|
- height: 77px;
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-image: var(--image-deco_1);
|
|
|
- background-size: auto;
|
|
|
- margin-right: 20px;
|
|
|
-}
|
|
|
-
|
|
|
-.list_C {
|
|
|
- background: none;
|
|
|
-}
|
|
|
-.list-item__content_C {
|
|
|
- height: 60px;
|
|
|
- background-repeat: no-repeat;
|
|
|
- padding: 25px 50px 0 50px;
|
|
|
- display: flex;
|
|
|
- background-position: center;
|
|
|
- background-size: 100% 100%;
|
|
|
- background-image: var(--image-list_bg_c);
|
|
|
- margin-bottom: 10px;
|
|
|
- text-align: center;
|
|
|
-}
|
|
|
-.list-item__content_C > div {
|
|
|
- flex-basis: 33.3%;
|
|
|
-}
|
|
|
-
|
|
|
-.list_D {
|
|
|
- background-image: var(--image-list_bg_defflip);
|
|
|
-}
|
|
|
-.list__wrapper_D {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
-}
|
|
|
-.list-item__icon_D {
|
|
|
- display: none;
|
|
|
-}
|
|
|
-.list-item_D {
|
|
|
- flex-basis: 25%;
|
|
|
- height: 60px;
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-position: center;
|
|
|
- background-size: auto 100%;
|
|
|
- background-image: var(--image-list_bg_d);
|
|
|
- text-align: center;
|
|
|
- margin-bottom: 10px;
|
|
|
-}
|
|
|
-
|
|
|
-.list-item__content_D {
|
|
|
- line-height: 30px;
|
|
|
-}
|
|
|
-.list-item__value_D {
|
|
|
- font-weight: bold;
|
|
|
-}
|
|
|
-
|
|
|
-.list_S {
|
|
|
- background: none;
|
|
|
-}
|
|
|
-.list__wrapper_S {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: repeat(2, 1fr); /* 2列均等 */
|
|
|
- gap: 10px;
|
|
|
-}
|
|
|
-.list-item_S {
|
|
|
- height: 45px;
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-position: center;
|
|
|
- background-size: 100% 100%;
|
|
|
- background-image: var(--image-list_bg_s);
|
|
|
- text-align: center;
|
|
|
- padding: 0 7px;
|
|
|
-}
|
|
|
-.list-item__content_S {
|
|
|
- display: flex;
|
|
|
-}
|
|
|
-.list-item__value_S {
|
|
|
- font-family: 'douyuFont';
|
|
|
- font-size: 13px;
|
|
|
- color: @vent-gas-primary-text;
|
|
|
- padding-top: 3px;
|
|
|
-}
|
|
|
-.list_E {
|
|
|
- background-image: var(--image-list_bg_defflip);
|
|
|
-}
|
|
|
-.list__wrapper_E {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
-}
|
|
|
-.list-item__icon_E {
|
|
|
- display: none;
|
|
|
-}
|
|
|
-.list-item_E {
|
|
|
- flex-basis: 25%;
|
|
|
- height: 70px;
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-position: center;
|
|
|
- background-size: auto 100%;
|
|
|
- background-image: var(--image-list_bg_e);
|
|
|
- text-align: center;
|
|
|
- margin: 5px 0px;
|
|
|
- padding-top: 32px;
|
|
|
- font-size: 12px;
|
|
|
-}
|
|
|
-
|
|
|
-.list_F {
|
|
|
- background: none;
|
|
|
-}
|
|
|
-.list-item__content_F {
|
|
|
- height: 40px;
|
|
|
- background-repeat: no-repeat;
|
|
|
- padding: 0 50px 0 50px;
|
|
|
- display: flex;
|
|
|
- background-position: center;
|
|
|
- background-size: 100% auto;
|
|
|
- background-image: var(--image-list);
|
|
|
- margin-top: 10px;
|
|
|
- text-align: center;
|
|
|
-}
|
|
|
-.list-item__content_F > div {
|
|
|
- flex-basis: 33.3%;
|
|
|
-}
|
|
|
-
|
|
|
-.list_G {
|
|
|
- background: none;
|
|
|
-}
|
|
|
-.list__wrapper_G {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- justify-content: space-between;
|
|
|
-}
|
|
|
-.list-item_G {
|
|
|
- width: 130px;
|
|
|
- height: 80px;
|
|
|
- align-items: center;
|
|
|
- text-align: center;
|
|
|
- border: 1px solid rgba(25, 237, 255, 0.4);
|
|
|
- box-shadow: inset 0 0 10px rgba(0, 197, 255, 0.6);
|
|
|
- background: rgba(0, 0, 0, 0.1);
|
|
|
- margin: 5px 10px;
|
|
|
-}
|
|
|
-.list-item__content_G {
|
|
|
- position: relative;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
-}
|
|
|
-.list-item__content_G > .list-item__label {
|
|
|
- width: 60px;
|
|
|
- height: 100%;
|
|
|
- left: 0;
|
|
|
- position: absolute;
|
|
|
- font-size: 20px;
|
|
|
- line-height: 80px;
|
|
|
-}
|
|
|
-.list-item__content_G > .list-item__info {
|
|
|
- width: 70px;
|
|
|
- height: 30px;
|
|
|
- line-height: 30px;
|
|
|
- right: 0;
|
|
|
- position: absolute;
|
|
|
-}
|
|
|
-.list-item__content_G > .list-item__value {
|
|
|
- width: 70px;
|
|
|
- height: 50px;
|
|
|
- line-height: 50px;
|
|
|
- top: 30px;
|
|
|
- right: 0;
|
|
|
- position: absolute;
|
|
|
- text-shadow: 0 0 25px #00fbfe;
|
|
|
- background: linear-gradient(0deg, #45d3fd, #45d3fd, #61ddb1, #61ddb1);
|
|
|
- font-style: normal;
|
|
|
- background-size: cover;
|
|
|
- font-family: electronicFont;
|
|
|
- font-size: 30px;
|
|
|
- -webkit-background-clip: text;
|
|
|
- background-clip: text;
|
|
|
- -webkit-text-fill-color: transparent;
|
|
|
- font-family: Arial, Helvetica, sans-serif;
|
|
|
- font-size: 18px;
|
|
|
- color: aliceblue;
|
|
|
-}
|
|
|
-
|
|
|
-.list_H {
|
|
|
- background: none;
|
|
|
-}
|
|
|
-.list-item__content_H {
|
|
|
- height: 50px;
|
|
|
- background-repeat: no-repeat;
|
|
|
- padding: 20px 50px 0 50px;
|
|
|
- display: flex;
|
|
|
- background-position: bottom;
|
|
|
- background-size: 100% auto;
|
|
|
- background-image: var(--image-list_bg_h);
|
|
|
- margin-bottom: 10px;
|
|
|
- text-align: center;
|
|
|
-}
|
|
|
-.list-item__content_H > div {
|
|
|
- flex-basis: 33.3%;
|
|
|
-}
|
|
|
-
|
|
|
-.list-item__icon_R {
|
|
|
- width: 24px;
|
|
|
- height: 25px;
|
|
|
- background-image: var(--image-list_bg_r_icon1);
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-position: center;
|
|
|
- background-size: contain;
|
|
|
- margin-bottom: 5px;
|
|
|
- position: absolute;
|
|
|
- left: 35px;
|
|
|
-}
|
|
|
-.list-item_R:last-of-type .list-item__icon_R {
|
|
|
- background-image: var(--image-list_bg_r_icon2);
|
|
|
-}
|
|
|
-.list_R {
|
|
|
- background: none;
|
|
|
-}
|
|
|
-.list-item__content_R {
|
|
|
- height: 52px;
|
|
|
- background-repeat: no-repeat;
|
|
|
- padding: 0 30px;
|
|
|
- display: flex;
|
|
|
- background-position: bottom;
|
|
|
- background-size: 100% 100%;
|
|
|
- background-image: var(--image-list_bg_r);
|
|
|
- text-align: center;
|
|
|
- align-items: center;
|
|
|
- .list-item__label {
|
|
|
- font-size: 15px;
|
|
|
- }
|
|
|
- .list-item__value_R {
|
|
|
- font-family: 'douyuFont';
|
|
|
- font-size: 15px;
|
|
|
- padding-top: 5px;
|
|
|
- color: #00bfff;
|
|
|
- }
|
|
|
-}
|
|
|
-.list-item__content_R > div {
|
|
|
- flex-basis: 33.3%;
|
|
|
-}
|
|
|
-
|
|
|
-.list_fireList {
|
|
|
- background: none;
|
|
|
-}
|
|
|
-.list__wrapper_fireList {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- justify-content: flex-start;
|
|
|
- margin-left: 86px;
|
|
|
-}
|
|
|
-.list-item_fireList {
|
|
|
- width: 167px;
|
|
|
- height: 58px;
|
|
|
- align-items: center;
|
|
|
- text-align: center;
|
|
|
- background-image: var(--image-list_bg_i);
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-size: auto 100%;
|
|
|
- margin: 5px 10px;
|
|
|
-}
|
|
|
-.list-item__content_fireList {
|
|
|
- position: relative;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
-}
|
|
|
-.list-item__content_fireList > .list-item__label {
|
|
|
- width: 60px;
|
|
|
- height: 100%;
|
|
|
- left: 0;
|
|
|
- position: absolute;
|
|
|
- font-size: 20px;
|
|
|
- line-height: 63px;
|
|
|
- color: #009bff;
|
|
|
-}
|
|
|
-.list-item__content_fireList > .list-item__info {
|
|
|
- height: 50%;
|
|
|
- left: 70px;
|
|
|
- position: absolute;
|
|
|
-}
|
|
|
-.list-item__content_fireList > .list-item__value {
|
|
|
- top: 50%;
|
|
|
- height: 50%;
|
|
|
- left: 70px;
|
|
|
- position: absolute;
|
|
|
- font-size: 18px;
|
|
|
-}
|
|
|
-.list_I {
|
|
|
- background: none;
|
|
|
-}
|
|
|
-.list__wrapper_I {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- justify-content: flex-start;
|
|
|
-}
|
|
|
-.list-item_I {
|
|
|
- width: 160px;
|
|
|
- height: 63px;
|
|
|
- align-items: center;
|
|
|
- text-align: center;
|
|
|
- background-image: var(--image-list_bg_i);
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-size: auto 100%;
|
|
|
- margin: 5px 10px;
|
|
|
-}
|
|
|
-.list-item__content_I {
|
|
|
- position: relative;
|
|
|
- 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;
|
|
|
-}
|
|
|
-.list-item__content_I > .list-item__info {
|
|
|
- height: 50%;
|
|
|
- left: 70px;
|
|
|
- position: absolute;
|
|
|
-}
|
|
|
-.list-item__content_I > .list-item__value {
|
|
|
- top: 50%;
|
|
|
- height: 50%;
|
|
|
- left: 70px;
|
|
|
- position: absolute;
|
|
|
- font-size: 18px;
|
|
|
-}
|
|
|
-.list_J {
|
|
|
- background: unset;
|
|
|
- padding: 0 5px 0 10px;
|
|
|
-}
|
|
|
-.list-item_J {
|
|
|
- width: 312px;
|
|
|
- height: 57px;
|
|
|
- align-items: center;
|
|
|
- text-align: center;
|
|
|
- background-image: var(--image-list_bg_j);
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-size: auto 100%;
|
|
|
- margin: 5px 10px;
|
|
|
-}
|
|
|
-.list-item__content_J {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- padding: 0 20px 0 15px;
|
|
|
-}
|
|
|
-.list_K {
|
|
|
- background: unset;
|
|
|
- padding: 0 5px 0 10px;
|
|
|
-}
|
|
|
-.list__wrapper_K {
|
|
|
- height: 100%;
|
|
|
-}
|
|
|
-.list-item__content_K {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- padding: 5px;
|
|
|
- margin: 4px 0;
|
|
|
- background-image: var(--image-linear-gradient-3);
|
|
|
-
|
|
|
- .list-item__value {
|
|
|
- flex-basis: unset;
|
|
|
+ @import '@/design/theme.less';
|
|
|
+ @import '@/design/theme.less';
|
|
|
+ /* Timeline 相关的样式 */
|
|
|
+
|
|
|
+ @{theme-green} {
|
|
|
+ .list {
|
|
|
+ --image-list: url(/@/assets/images/themify/green/home-container/configurable/list_bg_f.png);
|
|
|
+ --image-list_bg_h: url(/@/assets/images/themify/green/home-container/configurable/list_bg_h.png);
|
|
|
+ --image-list_bg_i: url(/@/assets/images/themify/green/home-container/configurable/list_bg_i.png);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ @{theme-deepblue} {
|
|
|
+ .list {
|
|
|
+ --image-img-3: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/img-3.png);
|
|
|
+ --image-img-7: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/img-7.png);
|
|
|
+ --image-img-8: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/img-8.png);
|
|
|
+ --image-img-9: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/img-9.png);
|
|
|
+ --image-list_bg_1: url(/@/assets/images/themify/deepblue/home-container/configurable/dusthome/list_bg_1.png);
|
|
|
+ --image-list_bg_default: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_default.png);
|
|
|
+ --image-triangle_icon: url(/@/assets/images/themify/deepblue/home-container/configurable/triangle_icon.png);
|
|
|
+ --image-list_bg_b: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_b.png);
|
|
|
+ --image-deco_1: url(/@/assets/images/themify/deepblue/home-container/configurable/deco_1.png);
|
|
|
+ --image-list_bg_c: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_c.png);
|
|
|
+ --image-list_bg_defflip: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_defflip.png);
|
|
|
+ --image-list_bg_d: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_d.png);
|
|
|
+ --image-list_bg_s: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_s.png);
|
|
|
+ --image-list_bg_e: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_e.png);
|
|
|
+ --image-list: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/list.png);
|
|
|
+ --image-list_bg_h: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_h.png);
|
|
|
+ --image-list_bg_i: url('/@/assets/images/themify/deepblue/home-container/configurable/list_bg_i.png');
|
|
|
+ --image-list_bg_r: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_r.png);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .list {
|
|
|
+ --image-img-3: url(/@/assets/images/home-container/configurable/firehome/img-3.png);
|
|
|
+ --image-img-7: url(/@/assets/images/home-container/configurable/firehome/img-7.png);
|
|
|
+ --image-img-8: url(/@/assets/images/home-container/configurable/firehome/img-8.png);
|
|
|
+ --image-img-9: url(/@/assets/images/home-container/configurable/firehome/img-9.png);
|
|
|
+ --image-list_bg_1: url(/@/assets/images/home-container/configurable/dusthome/list_bg_1.png);
|
|
|
+ --image-linear-gradient-1: linear-gradient(to right, #39a3ff50, #39a3ff00);
|
|
|
+ --image-linear-gradient-2: linear-gradient(to right, #3df6ff40, #3df6ff00);
|
|
|
+ --image-linear-gradient-3: linear-gradient(to right, #39deff15, #3977e500);
|
|
|
+ --image-list_bg_default: url(/@/assets/images/home-container/configurable/list_bg_default.png);
|
|
|
+ --image-triangle_icon: url(/@/assets/images/home-container/configurable/triangle_icon.png);
|
|
|
+ --image-list_bg_b: url(/@/assets/images/home-container/configurable/list_bg_b.png);
|
|
|
+ --image-deco_1: url(/@/assets/images/home-container/configurable/deco_1.png);
|
|
|
+ --image-list_bg_c: url(/@/assets/images/home-container/configurable/list_bg_c.png);
|
|
|
+ --image-list_bg_defflip: url(/@/assets/images/home-container/configurable/list_bg_defflip.png);
|
|
|
+ --image-list_bg_d: url(/@/assets/images/home-container/configurable/list_bg_d.png);
|
|
|
+ --image-list_bg_s: url(/@/assets/images/home-container/configurable/list_bg_s.png);
|
|
|
+ --image-list_bg_e: url(/@/assets/images/home-container/configurable/list_bg_e.png);
|
|
|
+ --image-list: url(/@/assets/images/home-container/configurable/firehome/list.png);
|
|
|
+ --image-list_bg_h: url(/@/assets/images/home-container/configurable/list_bg_h.png);
|
|
|
+ --image-list_bg_r: url(/@/assets/images/home-container/configurable/list_bg_r.png);
|
|
|
+ --image-list_bg_r_icon1: url(/@/assets/images/home-container/configurable/list_bg_r_icon1.png);
|
|
|
+ --image-list_bg_r_icon2: url(/@/assets/images/home-container/configurable/list_bg_r_icon2.png);
|
|
|
+ --image-list_bg_i: url('/@/assets/images/home-container/configurable/list_bg_i.png');
|
|
|
+ --image-list_bg_j: url('/@/assets/images/home-container/configurable/list_bg_j.png');
|
|
|
+ --image-list_icon_l1: url('/@/assets/images/home-container/configurable/minehome/list-icon-wd.png');
|
|
|
+ --image-list_icon_l2: url('/@/assets/images/home-container/configurable/minehome/list-icon-CO.png');
|
|
|
+ --image-list_icon_l3: url('/@/assets/images/home-container/configurable/minehome/list-icon-yw.png');
|
|
|
+ --image-list_icon_l4: url('/@/assets/images/home-container/configurable/minehome/list-icon-hy.png');
|
|
|
+ --image-list_icon_m1: url('/@/assets/images/home-container/configurable/minehome/list-icon-co1.png');
|
|
|
+ --image-list_icon_m2: url('/@/assets/images/home-container/configurable/minehome/list-icon-co2.png');
|
|
|
+ --image-list_icon_m3: url('/@/assets/images/home-container/configurable/minehome/list-icon-ch4.png');
|
|
|
+ --image-list_icon_m4: url('/@/assets/images/home-container/configurable/minehome/list-icon-c2h2.png');
|
|
|
+ --image-list_icon_m5: url('/@/assets/images/home-container/configurable/minehome/list-icon-o2.png');
|
|
|
+ --image-list_icon_m6: url('/@/assets/images/home-container/configurable/minehome/list-icon-c2h4.png');
|
|
|
+ --image-list_icon_m7: url('/@/assets/images/home-container/configurable/minehome/list-icon-n2.png');
|
|
|
+ --image-list_icon_m8: url('/@/assets/images/home-container/configurable/minehome/list-icon-h2.png');
|
|
|
+ --image-list_bg_l1: url('/@/assets/images/home-container/configurable/minehome/list-bg-l1.png');
|
|
|
+ --image-list_bg_l2: url('/@/assets/images/home-container/configurable/minehome/list-bg-l2.png');
|
|
|
+ --image-list_bg_m1: url('/@/assets/images/home-container/configurable/minehome/list-bg-m1.png');
|
|
|
+ --image-list_bg_m2: url('/@/assets/images/home-container/configurable/minehome/list-bg-m2.png');
|
|
|
+ --image-list_bg_n1: url('/@/assets/images/home-container/configurable/minehome/list-bg-n1.png');
|
|
|
+ --image-list_bg_n2: url('/@/assets/images/home-container/configurable/minehome/list-bg-n2.png');
|
|
|
+ --image-list_bg_n3: url('/@/assets/images/home-container/configurable/minehome/list-bg-n3.png');
|
|
|
+ --image-list_bg_n4: url('/@/assets/images/home-container/configurable/minehome/list-bg-n4.png');
|
|
|
+ --image-list_bg_o1: url('/@/assets/images/beltFire/listO1.png');
|
|
|
+ --image-list_bg_o2: url('/@/assets/images/beltFire/listO2.png');
|
|
|
+ --image-list_icon_o1: url('/@/assets/images/beltFire/listO1.svg');
|
|
|
+ --image-list_icon_o2: url('/@/assets/images/beltFire/listO2.svg');
|
|
|
+ padding: 5px 20px;
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .list-item_A {
|
|
|
+ position: relative;
|
|
|
+ height: 140px;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-image: var(--image-img-3);
|
|
|
+ background-size: auto 100%;
|
|
|
+ background-position: center;
|
|
|
+ }
|
|
|
+ .list-item__title_A {
|
|
|
+ position: absolute;
|
|
|
+ left: 41%;
|
|
|
+ // font-size: 14px;
|
|
|
+ top: 15px;
|
|
|
+ }
|
|
|
+ // .list-item__content_A {
|
|
|
+ // position: absolute;
|
|
|
+ // left: 35%;
|
|
|
+ // top: 55px;
|
|
|
+ // display: flex;
|
|
|
+ // justify-content: space-evenly;
|
|
|
+ // }
|
|
|
+ .list-item__content_A:nth-of-type(2) {
|
|
|
+ position: absolute;
|
|
|
+ top: 15px;
|
|
|
+ left: 14%;
|
|
|
+ width: 22%;
|
|
|
+ text-align: center;
|
|
|
+ display: block;
|
|
|
+
|
|
|
+ .list-item__label {
|
|
|
+ font-size: 18px;
|
|
|
+ margin-bottom: 25px;
|
|
|
+ }
|
|
|
+ .list-item__info {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .list-item__value {
|
|
|
+ font-size: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-item__content_A:nth-of-type(3) {
|
|
|
+ position: absolute;
|
|
|
+ left: 41%;
|
|
|
+ top: 55px;
|
|
|
+
|
|
|
+ .list-item__info {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .list-item__value {
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-item__content_A:nth-of-type(4) {
|
|
|
+ position: absolute;
|
|
|
+ left: 66%;
|
|
|
+ top: 55px;
|
|
|
+
|
|
|
+ .list-item__info {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .list-item__value {
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-item__content_A:nth-of-type(5) {
|
|
|
+ position: absolute;
|
|
|
+ left: 35%;
|
|
|
+ bottom: 10px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .list-item__info {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .list-item__value {
|
|
|
+ font-size: 20px;
|
|
|
+ margin-left: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .list-item_B {
|
|
|
+ // height: 155px;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ // background-size: 100% 100%;
|
|
|
+ // background-size: auto 100%;
|
|
|
+ background-size: 87% auto;
|
|
|
+ background-position: center;
|
|
|
+ background-image: var(--image-img-7);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ text-align: center;
|
|
|
+ padding: 0 10%;
|
|
|
+ margin-top: 5px;
|
|
|
+ height: 33px;
|
|
|
+
|
|
|
+ .list-item__label {
|
|
|
+ font-size: 11px;
|
|
|
+ }
|
|
|
+ .list-item__value {
|
|
|
+ font-size: 18px;
|
|
|
+ margin-left: 5px;
|
|
|
+ }
|
|
|
+ .list-item__content_B {
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-basis: 100px;
|
|
|
+ flex-grow: 1;
|
|
|
+ }
|
|
|
+ .list-item__title_B {
|
|
|
+ width: 40px;
|
|
|
+ text-align: center;
|
|
|
+ margin-right: 50px
|
|
|
+ // height: 30px;
|
|
|
+ // background-size: auto 80%;
|
|
|
+ // background-position: center;
|
|
|
+ // background-repeat: no-repeat;
|
|
|
+ }
|
|
|
+ .list-item__info {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .list_C {
|
|
|
+ padding: 5px 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .list__wrapper_C {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ .list-item_C {
|
|
|
+ position: relative;
|
|
|
+ height: 140px;
|
|
|
+ width: 200px;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-image: var(--image-img-8);
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-position: left center;
|
|
|
+ }
|
|
|
+ .list-item__title_C {
|
|
|
+ position: absolute;
|
|
|
+ left: 99px;
|
|
|
+ // font-size: 14px;
|
|
|
+ top: 15px;
|
|
|
+ }
|
|
|
+ .list-item__content_C:nth-of-type(2) {
|
|
|
+ position: absolute;
|
|
|
+ top: 15px;
|
|
|
+ left: 19px;
|
|
|
+ width: 30%;
|
|
|
+ text-align: center;
|
|
|
+ display: block;
|
|
|
+
|
|
|
+ .list-item__label {
|
|
|
+ // font-size: 18px;
|
|
|
+ margin-bottom: 25px;
|
|
|
+ }
|
|
|
+ .list-item__info {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .list-item__value {
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-item__content_C:nth-of-type(3) {
|
|
|
+ position: absolute;
|
|
|
+ left: 99px;
|
|
|
+ top: 55px;
|
|
|
+
|
|
|
+ .list-item__info {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .list-item__value {
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .list_D {
|
|
|
+ padding: 5px 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .list__wrapper_D {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ .list-item_D {
|
|
|
+ position: relative;
|
|
|
+ height: 110px;
|
|
|
+ width: 200px;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-image: var(--image-img-9);
|
|
|
+ background-size: 100% auto;
|
|
|
+ background-position: center top;
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ .list-item__title_D {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ bottom: 0;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .list-item__content_D:nth-of-type(2) {
|
|
|
+ position: absolute;
|
|
|
+ top: 10%;
|
|
|
+ left: 10%;
|
|
|
+ width: 30%;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ .list-item__info {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .list-item__value {
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-item__content_D:nth-of-type(3) {
|
|
|
+ position: absolute;
|
|
|
+ top: 10%;
|
|
|
+ right: 10%;
|
|
|
+ width: 30%;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ .list-item__info {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .list-item__value {
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .list_E {
|
|
|
+ padding: 5px 10px;
|
|
|
}
|
|
|
- .list-item__label {
|
|
|
- flex-basis: unset;
|
|
|
+
|
|
|
+ .list__wrapper_E {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ padding: 0 10px;
|
|
|
}
|
|
|
- .list-item__info {
|
|
|
- display: none;
|
|
|
+
|
|
|
+ .list-item_E {
|
|
|
+ position: relative;
|
|
|
+ height: 104px;
|
|
|
+ width: 188px;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-image: var(--image-list_bg_1);
|
|
|
+ background-size: 100% auto;
|
|
|
+ background-position: center top;
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 20px;
|
|
|
}
|
|
|
-}
|
|
|
-
|
|
|
-.list_L {
|
|
|
- background: none;
|
|
|
- padding: 5px 10px;
|
|
|
-}
|
|
|
-.list-item_L {
|
|
|
- width: 100%;
|
|
|
- height: 37px;
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-size: auto 100%;
|
|
|
- margin-bottom: 8px;
|
|
|
-}
|
|
|
-/* 奇数项背景图 */
|
|
|
-.list-item_L:nth-child(odd) {
|
|
|
- background-image: var(--image-list_bg_l1);
|
|
|
-}
|
|
|
-
|
|
|
-/* 偶数项背景图 */
|
|
|
-.list-item_L:nth-child(even) {
|
|
|
- background-image: var(--image-list_bg_l2);
|
|
|
-}
|
|
|
-.list-item__icon_L {
|
|
|
- background-repeat: no-repeat;
|
|
|
- width: 16px;
|
|
|
- height: 20px;
|
|
|
- margin-left: 15px;
|
|
|
- background-position: center;
|
|
|
- background-size: contain;
|
|
|
-}
|
|
|
-/* 四个图标样式 */
|
|
|
-.list-item_L:nth-child(1) .list-item__icon_L {
|
|
|
- background-image: var(--image-list_icon_l1);
|
|
|
-}
|
|
|
-
|
|
|
-.list-item_L:nth-child(2) .list-item__icon_L {
|
|
|
- background-image: var(--image-list_icon_l2);
|
|
|
-}
|
|
|
-
|
|
|
-.list-item_L:nth-child(3) .list-item__icon_L {
|
|
|
- background-image: var(--image-list_icon_l3);
|
|
|
-}
|
|
|
-
|
|
|
-.list-item_L:nth-child(4) .list-item__icon_L {
|
|
|
- background-image: var(--image-list_icon_l4);
|
|
|
-}
|
|
|
-.list-item__content_L {
|
|
|
- display: flex;
|
|
|
- text-align: center;
|
|
|
- align-items: center;
|
|
|
- .list-item__value_L {
|
|
|
- font-family: 'douyuFont';
|
|
|
+ .list-item__title_E {
|
|
|
+ // position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ // top: 0;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-top: 10px;
|
|
|
}
|
|
|
-}
|
|
|
-.list-item__content_L > div {
|
|
|
- flex-basis: 33.3%;
|
|
|
-}
|
|
|
-
|
|
|
-.list_M {
|
|
|
- background: none;
|
|
|
- padding: 0;
|
|
|
-}
|
|
|
-.list__wrapper_M {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: 1fr 1fr; /* 两列均等 */
|
|
|
- gap: 18px; /* 统一间距 */
|
|
|
-}
|
|
|
-.list-item_M {
|
|
|
- height: 37px;
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
-}
|
|
|
-.list-item_M:nth-child(1),
|
|
|
-.list-item_M:nth-child(4),
|
|
|
-.list-item_M:nth-child(5),
|
|
|
-.list-item_M:nth-child(8) {
|
|
|
- background-image: var(--image-list_bg_m1);
|
|
|
-}
|
|
|
-
|
|
|
-.list-item_M:nth-child(2),
|
|
|
-.list-item_M:nth-child(3),
|
|
|
-.list-item_M:nth-child(6),
|
|
|
-.list-item_M:nth-child(7) {
|
|
|
- background-image: var(--image-list_bg_m2);
|
|
|
-}
|
|
|
-.list-item_M:nth-child(7),
|
|
|
-.list-item_M:nth-child(8) {
|
|
|
- margin-bottom: 0;
|
|
|
-}
|
|
|
-.list-item__icon_M {
|
|
|
- background-repeat: no-repeat;
|
|
|
- height: 16px;
|
|
|
- margin-left: 5px;
|
|
|
- background-position: center;
|
|
|
- background-size: auto 100%;
|
|
|
- display: inline-block;
|
|
|
- width: 40px;
|
|
|
-}
|
|
|
-/* 八个图标样式 */
|
|
|
-.list-item_M:nth-child(1) .list-item__icon_M {
|
|
|
- background-image: var(--image-list_icon_m1);
|
|
|
-}
|
|
|
-.list-item_M:nth-child(2) .list-item__icon_M {
|
|
|
- background-image: var(--image-list_icon_m2);
|
|
|
-}
|
|
|
-.list-item_M:nth-child(3) .list-item__icon_M {
|
|
|
- background-image: var(--image-list_icon_m3);
|
|
|
-}
|
|
|
-.list-item_M:nth-child(4) .list-item__icon_M {
|
|
|
- background-image: var(--image-list_icon_m4);
|
|
|
-}
|
|
|
-.list-item_M:nth-child(5) .list-item__icon_M {
|
|
|
- background-image: var(--image-list_icon_m5);
|
|
|
-}
|
|
|
-.list-item_M:nth-child(6) .list-item__icon_M {
|
|
|
- background-image: var(--image-list_icon_m6);
|
|
|
-}
|
|
|
-.list-item_M:nth-child(7) .list-item__icon_M {
|
|
|
- background-image: var(--image-list_icon_m7);
|
|
|
-}
|
|
|
-.list-item_M:nth-child(8) .list-item__icon_M {
|
|
|
- background-image: var(--image-list_icon_m8);
|
|
|
-}
|
|
|
-
|
|
|
-.list-item__content_M {
|
|
|
- display: flex;
|
|
|
- text-align: center;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .list-item__value_M {
|
|
|
- font-family: 'douyuFont';
|
|
|
- font-size: 12px;
|
|
|
+ .list-item__content_E:nth-of-type(2) {
|
|
|
+ position: absolute;
|
|
|
+ top: 40%;
|
|
|
+ left: 5%;
|
|
|
+ text-align: left;
|
|
|
+
|
|
|
+ .list-item__info {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .list-item__value {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
-.list_N {
|
|
|
- background: none;
|
|
|
- padding: 5px 10px;
|
|
|
-}
|
|
|
-.list-item_N {
|
|
|
- width: 100%;
|
|
|
- height: 42px;
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- margin-bottom: 15px;
|
|
|
-}
|
|
|
-/* 四个背景样式 */
|
|
|
-.list-item_N:nth-child(1) {
|
|
|
- background-image: var(--image-list_bg_n1);
|
|
|
-}
|
|
|
-
|
|
|
-.list-item_N:nth-child(2) {
|
|
|
- background-image: var(--image-list_bg_n2);
|
|
|
- .list-item__value_N {
|
|
|
- color: #27cab7;
|
|
|
+ .list-item__content_E:nth-of-type(3) {
|
|
|
+ position: absolute;
|
|
|
+ top: 40%;
|
|
|
+ right: 5%;
|
|
|
+ text-align: right;
|
|
|
+
|
|
|
+ .list-item__info {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .list-item__value {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-.list-item_N:nth-child(3) {
|
|
|
- background-image: var(--image-list_bg_n3);
|
|
|
-}
|
|
|
+ .list-item_F {
|
|
|
+ // height: 155px;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ // background-size: auto 100%;
|
|
|
+ background-position: center;
|
|
|
+ background-image: @vent-gas-list-item-bg-img;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ // justify-content: space-between;
|
|
|
+ // text-align: center;
|
|
|
+ padding: 0 5%;
|
|
|
+ margin-top: 5px;
|
|
|
+ height: 50px;
|
|
|
|
|
|
-.list-item_N:nth-child(4) {
|
|
|
- background-image: var(--image-list_bg_n4);
|
|
|
- .list-item__value_N {
|
|
|
- color: #27cab7;
|
|
|
+ .list-item__title_F {
|
|
|
+ flex-basis: 25%;
|
|
|
+ }
|
|
|
+ .list-item__content_F {
|
|
|
+ flex-basis: 25%;
|
|
|
+ }
|
|
|
+ .list-item__label::after {
|
|
|
+ content: '：';
|
|
|
+ }
|
|
|
+ .list-item__value {
|
|
|
+ font-size: 18px;
|
|
|
+ margin-left: 5px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .list-item__content_F {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .list-item__info {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
-.list-item__content_N {
|
|
|
- display: flex;
|
|
|
- text-align: center;
|
|
|
- align-items: center;
|
|
|
- .list-item__value_N {
|
|
|
- font-family: 'douyuFont';
|
|
|
+
|
|
|
+ .list-item_G {
|
|
|
+ // height: 155px;
|
|
|
+ // background-repeat: no-repeat;
|
|
|
+ // background-size: 100% 100%;
|
|
|
+ // background-position: center;
|
|
|
+ // justify-content: space-between;
|
|
|
+ // text-align: center;
|
|
|
+ margin-top: 5px;
|
|
|
+
|
|
|
+ .list-item__title_G {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 16px;
|
|
|
+ margin-top: 10px;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ padding-left: 8px;
|
|
|
+ top: -2px;
|
|
|
+ background-image: var(--image-linear-gradient-1);
|
|
|
+ &::before{
|
|
|
+ position: absolute;
|
|
|
+ content: '';
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ top: 4px;
|
|
|
+ left: 0;
|
|
|
+ background-image: var(--image-linear-gradient-2);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-item__content_G {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 4px;
|
|
|
+ margin: 8px 0;
|
|
|
+ background-image: var(--image-linear-gradient-3);
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
-.list-item__content_N > div:last-child {
|
|
|
- flex-basis: 60%;
|
|
|
-}
|
|
|
-
|
|
|
-.list_U {
|
|
|
- background: none;
|
|
|
- padding: 0px 20px;
|
|
|
-}
|
|
|
-.list__wrapper_U {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- gap: 10px;
|
|
|
-}
|
|
|
-.list-item_U {
|
|
|
- width: 80%;
|
|
|
- height: 42px;
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-
|
|
|
-/* 左右两个背景图（你可以自己换图） */
|
|
|
-.list-item_U:nth-child(odd) {
|
|
|
- background: var(--image-list_bg_o1);
|
|
|
- background-size: 100% 100%;
|
|
|
- background-repeat: no-repeat;
|
|
|
-}
|
|
|
-.list-item_U:nth-child(even) {
|
|
|
- background: var(--image-list_bg_o2);
|
|
|
- background-size: 100% 100%;
|
|
|
- background-repeat: no-repeat;
|
|
|
-}
|
|
|
-
|
|
|
-.list-item__icon_U {
|
|
|
- width: 24px;
|
|
|
- height: 24px;
|
|
|
- margin-left: 12px;
|
|
|
- background-position: center;
|
|
|
- background-size: contain;
|
|
|
- background-repeat: no-repeat;
|
|
|
-}
|
|
|
-
|
|
|
-.list-item_U:nth-child(1) .list-item__icon_U {
|
|
|
- background-image: var(--image-list_icon_o1);
|
|
|
-}
|
|
|
-.list-item_U:nth-child(2) .list-item__icon_U {
|
|
|
- background-image: var(--image-list_icon_o2);
|
|
|
-}
|
|
|
-.list-item__content_U {
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- padding: 0 50px 0 15px;
|
|
|
-}
|
|
|
-.list-item__content_U > .list-item__label {
|
|
|
- font-weight: bold;
|
|
|
- margin-left: 20px;
|
|
|
-}
|
|
|
-.list-item__value_U {
|
|
|
- font-family: 'douyuFont';
|
|
|
- color: #ffffff;
|
|
|
-}
|
|
|
-
|
|
|
-.list-item__label {
|
|
|
- flex-basis: 55%;
|
|
|
-}
|
|
|
-.list-item__info {
|
|
|
- flex-grow: 1;
|
|
|
-}
|
|
|
-.list-item__value {
|
|
|
- flex-basis: 30%;
|
|
|
-}
|
|
|
-.list-item__value_red {
|
|
|
- color: red;
|
|
|
-}
|
|
|
-.list-item__value_orange {
|
|
|
- color: orange;
|
|
|
-}
|
|
|
-.list-item__value_yellow {
|
|
|
- color: yellow;
|
|
|
-}
|
|
|
-.list-item__value_green {
|
|
|
- color: yellowgreen;
|
|
|
-}
|
|
|
-.list-item__value_blue {
|
|
|
- color: @vent-table-action-link;
|
|
|
-}
|
|
|
-.list-item__value_white {
|
|
|
- color: white;
|
|
|
-}
|
|
|
-.gallery-item__value_lightblue {
|
|
|
- color: @vent-configurable-home-light-border;
|
|
|
-}
|
|
|
+
|
|
|
+ // .list-item__title_B_O2 {
|
|
|
+ // background-image: url(/@/assets/images/home-container/configurable/firehome/O₂.png);
|
|
|
+ // }
|
|
|
+ // .list-item__title_B_CH4 {
|
|
|
+ // background-image: url(/@/assets/images/home-container/configurable/firehome/CH₄.png);
|
|
|
+ // }
|
|
|
+ // .list-item__title_B_CO {
|
|
|
+ // background-image: url(/@/assets/images/home-container/configurable/firehome/CO.png);
|
|
|
+ // }
|
|
|
+ // .list-item__title_B_CO2 {
|
|
|
+ // background-image: url(/@/assets/images/home-container/configurable/firehome/CO₂.png);
|
|
|
+ // }
|
|
|
+
|
|
|
+ // .list-item__label {
|
|
|
+ // flex-basis: 55%;
|
|
|
+ // }
|
|
|
+ // .list-item__info {
|
|
|
+ // flex-grow: 1;
|
|
|
+ // }
|
|
|
+ // .list-item__value {
|
|
|
+ // flex-basis: 30%;
|
|
|
+ // }
|
|
|
+ /* ===== 后续新增的类型样式 (H, I, J, K, L, M, N, S, R, U, fireList) ===== */
|
|
|
+ .list_S {
|
|
|
+ background: none;
|
|
|
+ }
|
|
|
+ .list__wrapper_S {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(2, 1fr); /* 2列均等 */
|
|
|
+ gap: 10px;
|
|
|
+ }
|
|
|
+ .list-item_S {
|
|
|
+ height: 45px;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-image: var(--image-list_bg_s);
|
|
|
+ text-align: center;
|
|
|
+ padding: 0 7px;
|
|
|
+ }
|
|
|
+ .list-item__content_S {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ .list-item__value_S {
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ font-size: 13px;
|
|
|
+ color: @vent-gas-primary-text;
|
|
|
+ padding-top: 3px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .list_H {
|
|
|
+ background: none;
|
|
|
+ }
|
|
|
+ .list-item__content_H {
|
|
|
+ height: 50px;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ padding: 20px 50px 0 50px;
|
|
|
+ display: flex;
|
|
|
+ background-position: bottom;
|
|
|
+ background-size: 100% auto;
|
|
|
+ background-image: var(--image-list_bg_h);
|
|
|
+ margin-bottom: 10px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .list-item__content_H > div {
|
|
|
+ flex-basis: 33.3%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .list_R {
|
|
|
+ background: none;
|
|
|
+ }
|
|
|
+ .list-item__icon_R {
|
|
|
+ width: 24px;
|
|
|
+ height: 25px;
|
|
|
+ background-image: var(--image-list_bg_r_icon1);
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center;
|
|
|
+ background-size: contain;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ position: absolute;
|
|
|
+ left: 35px;
|
|
|
+ }
|
|
|
+ .list-item_R:last-of-type .list-item__icon_R {
|
|
|
+ background-image: var(--image-list_bg_r_icon2);
|
|
|
+ }
|
|
|
+ .list-item__content_R {
|
|
|
+ height: 52px;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ padding: 0 30px;
|
|
|
+ display: flex;
|
|
|
+ background-position: bottom;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-image: var(--image-list_bg_r);
|
|
|
+ text-align: center;
|
|
|
+ align-items: center;
|
|
|
+ .list-item__label {
|
|
|
+ font-size: 15px;
|
|
|
+ }
|
|
|
+ .list-item__value_R {
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ font-size: 15px;
|
|
|
+ padding-top: 5px;
|
|
|
+ color: #00bfff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-item__content_R > div {
|
|
|
+ flex-basis: 33.3%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .list_fireList {
|
|
|
+ background: none;
|
|
|
+ }
|
|
|
+ .list__wrapper_fireList {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: flex-start;
|
|
|
+ margin-left: 86px;
|
|
|
+ }
|
|
|
+ .list-item_fireList {
|
|
|
+ width: 167px;
|
|
|
+ height: 58px;
|
|
|
+ align-items: center;
|
|
|
+ text-align: center;
|
|
|
+ background-image: var(--image-list_bg_i);
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: auto 100%;
|
|
|
+ margin: 5px 10px;
|
|
|
+ }
|
|
|
+ .list-item__content_fireList {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .list-item__content_fireList > .list-item__label {
|
|
|
+ width: 60px;
|
|
|
+ height: 100%;
|
|
|
+ left: 0;
|
|
|
+ position: absolute;
|
|
|
+ font-size: 20px;
|
|
|
+ line-height: 63px;
|
|
|
+ color: #009bff;
|
|
|
+ }
|
|
|
+ .list-item__content_fireList > .list-item__info {
|
|
|
+ height: 50%;
|
|
|
+ left: 70px;
|
|
|
+ position: absolute;
|
|
|
+ }
|
|
|
+ .list-item__content_fireList > .list-item__value {
|
|
|
+ top: 50%;
|
|
|
+ height: 50%;
|
|
|
+ left: 70px;
|
|
|
+ position: absolute;
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .list_I {
|
|
|
+ background: none;
|
|
|
+ }
|
|
|
+ .list__wrapper_I {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: flex-start;
|
|
|
+ }
|
|
|
+ .list-item_I {
|
|
|
+ width: 160px;
|
|
|
+ height: 63px;
|
|
|
+ align-items: center;
|
|
|
+ text-align: center;
|
|
|
+ background-image: var(--image-list_bg_i);
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: auto 100%;
|
|
|
+ margin: 5px 10px;
|
|
|
+ }
|
|
|
+ .list-item__content_I {
|
|
|
+ position: relative;
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ .list-item__content_I > .list-item__info {
|
|
|
+ height: 50%;
|
|
|
+ left: 70px;
|
|
|
+ position: absolute;
|
|
|
+ }
|
|
|
+ .list-item__content_I > .list-item__value {
|
|
|
+ top: 50%;
|
|
|
+ height: 50%;
|
|
|
+ left: 70px;
|
|
|
+ position: absolute;
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .list_J {
|
|
|
+ background: unset;
|
|
|
+ padding: 0 5px 0 10px;
|
|
|
+ }
|
|
|
+ .list-item_J {
|
|
|
+ width: 312px;
|
|
|
+ height: 57px;
|
|
|
+ align-items: center;
|
|
|
+ text-align: center;
|
|
|
+ background-image: var(--image-list_bg_j);
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: auto 100%;
|
|
|
+ margin: 5px 10px;
|
|
|
+ }
|
|
|
+ .list-item__content_J {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 20px 0 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .list_K {
|
|
|
+ background: unset;
|
|
|
+ padding: 0 5px 0 10px;
|
|
|
+ }
|
|
|
+ .list__wrapper_K {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .list-item__content_K {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 5px;
|
|
|
+ margin: 4px 0;
|
|
|
+ background-image: var(--image-linear-gradient-3);
|
|
|
+
|
|
|
+ .list-item__value {
|
|
|
+ flex-basis: unset;
|
|
|
+ }
|
|
|
+ .list-item__label {
|
|
|
+ flex-basis: unset;
|
|
|
+ }
|
|
|
+ .list-item__info {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .list_L {
|
|
|
+ background: none;
|
|
|
+ padding: 5px 10px;
|
|
|
+ }
|
|
|
+ .list-item_L {
|
|
|
+ width: 100%;
|
|
|
+ height: 37px;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: auto 100%;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ }
|
|
|
+ /* 奇数项背景图 */
|
|
|
+ .list-item_L:nth-child(odd) {
|
|
|
+ background-image: var(--image-list_bg_l1);
|
|
|
+ }
|
|
|
+ /* 偶数项背景图 */
|
|
|
+ .list-item_L:nth-child(even) {
|
|
|
+ background-image: var(--image-list_bg_l2);
|
|
|
+ }
|
|
|
+ .list-item__icon_L {
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ width: 16px;
|
|
|
+ height: 20px;
|
|
|
+ margin-left: 15px;
|
|
|
+ background-position: center;
|
|
|
+ background-size: contain;
|
|
|
+ }
|
|
|
+ /* 四个图标样式 */
|
|
|
+ .list-item_L:nth-child(1) .list-item__icon_L {
|
|
|
+ background-image: var(--image-list_icon_l1);
|
|
|
+ }
|
|
|
+ .list-item_L:nth-child(2) .list-item__icon_L {
|
|
|
+ background-image: var(--image-list_icon_l2);
|
|
|
+ }
|
|
|
+ .list-item_L:nth-child(3) .list-item__icon_L {
|
|
|
+ background-image: var(--image-list_icon_l3);
|
|
|
+ }
|
|
|
+ .list-item_L:nth-child(4) .list-item__icon_L {
|
|
|
+ background-image: var(--image-list_icon_l4);
|
|
|
+ }
|
|
|
+ .list-item__content_L {
|
|
|
+ display: flex;
|
|
|
+ text-align: center;
|
|
|
+ align-items: center;
|
|
|
+ .list-item__value_L {
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-item__content_L > div {
|
|
|
+ flex-basis: 33.3%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .list_M {
|
|
|
+ background: none;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ .list__wrapper_M {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 1fr 1fr; /* 两列均等 */
|
|
|
+ gap: 18px; /* 统一间距 */
|
|
|
+ }
|
|
|
+ .list-item_M {
|
|
|
+ height: 37px;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ .list-item_M:nth-child(1),
|
|
|
+ .list-item_M:nth-child(4),
|
|
|
+ .list-item_M:nth-child(5),
|
|
|
+ .list-item_M:nth-child(8) {
|
|
|
+ background-image: var(--image-list_bg_m1);
|
|
|
+ }
|
|
|
+ .list-item_M:nth-child(2),
|
|
|
+ .list-item_M:nth-child(3),
|
|
|
+ .list-item_M:nth-child(6),
|
|
|
+ .list-item_M:nth-child(7) {
|
|
|
+ background-image: var(--image-list_bg_m2);
|
|
|
+ }
|
|
|
+ .list-item_M:nth-child(7),
|
|
|
+ .list-item_M:nth-child(8) {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+ .list-item__icon_M {
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ height: 16px;
|
|
|
+ margin-left: 5px;
|
|
|
+ background-position: center;
|
|
|
+ background-size: auto 100%;
|
|
|
+ display: inline-block;
|
|
|
+ width: 40px;
|
|
|
+ }
|
|
|
+ /* 八个图标样式 */
|
|
|
+ .list-item_M:nth-child(1) .list-item__icon_M { background-image: var(--image-list_icon_m1); }
|
|
|
+ .list-item_M:nth-child(2) .list-item__icon_M { background-image: var(--image-list_icon_m2); }
|
|
|
+ .list-item_M:nth-child(3) .list-item__icon_M { background-image: var(--image-list_icon_m3); }
|
|
|
+ .list-item_M:nth-child(4) .list-item__icon_M { background-image: var(--image-list_icon_m4); }
|
|
|
+ .list-item_M:nth-child(5) .list-item__icon_M { background-image: var(--image-list_icon_m5); }
|
|
|
+ .list-item_M:nth-child(6) .list-item__icon_M { background-image: var(--image-list_icon_m6); }
|
|
|
+ .list-item_M:nth-child(7) .list-item__icon_M { background-image: var(--image-list_icon_m7); }
|
|
|
+ .list-item_M:nth-child(8) .list-item__icon_M { background-image: var(--image-list_icon_m8); }
|
|
|
+ .list-item__content_M {
|
|
|
+ display: flex;
|
|
|
+ text-align: center;
|
|
|
+ align-items: center;
|
|
|
+ .list-item__value_M {
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .list_N {
|
|
|
+ background: none;
|
|
|
+ padding: 5px 10px;
|
|
|
+ }
|
|
|
+ .list-item_N {
|
|
|
+ width: 100%;
|
|
|
+ height: 42px;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+ /* 四个背景样式 */
|
|
|
+ .list-item_N:nth-child(1) {
|
|
|
+ background-image: var(--image-list_bg_n1);
|
|
|
+ }
|
|
|
+ .list-item_N:nth-child(2) {
|
|
|
+ background-image: var(--image-list_bg_n2);
|
|
|
+ .list-item__value_N { color: #27cab7; }
|
|
|
+ }
|
|
|
+ .list-item_N:nth-child(3) {
|
|
|
+ background-image: var(--image-list_bg_n3);
|
|
|
+ }
|
|
|
+ .list-item_N:nth-child(4) {
|
|
|
+ background-image: var(--image-list_bg_n4);
|
|
|
+ .list-item__value_N { color: #27cab7; }
|
|
|
+ }
|
|
|
+ .list-item__content_N {
|
|
|
+ display: flex;
|
|
|
+ text-align: center;
|
|
|
+ align-items: center;
|
|
|
+ .list-item__value_N { font-family: 'douyuFont'; }
|
|
|
+ }
|
|
|
+ .list-item__content_N > div:last-child {
|
|
|
+ flex-basis: 60%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .list_U {
|
|
|
+ background: none;
|
|
|
+ padding: 0px 20px;
|
|
|
+ }
|
|
|
+ .list__wrapper_U {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ gap: 10px;
|
|
|
+ }
|
|
|
+ .list-item_U {
|
|
|
+ width: 80%;
|
|
|
+ height: 42px;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .list-item_U:nth-child(odd) {
|
|
|
+ background: var(--image-list_bg_o1);
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ }
|
|
|
+ .list-item_U:nth-child(even) {
|
|
|
+ background: var(--image-list_bg_o2);
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ }
|
|
|
+ .list-item__icon_U {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ margin-left: 12px;
|
|
|
+ background-position: center;
|
|
|
+ background-size: contain;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ }
|
|
|
+ .list-item_U:nth-child(1) .list-item__icon_U { background-image: var(--image-list_icon_o1); }
|
|
|
+ .list-item_U:nth-child(2) .list-item__icon_U { background-image: var(--image-list_icon_o2); }
|
|
|
+ .list-item__content_U {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 50px 0 15px;
|
|
|
+ }
|
|
|
+ .list-item__content_U > .list-item__label {
|
|
|
+ font-weight: bold;
|
|
|
+ margin-left: 20px;
|
|
|
+ }
|
|
|
+ .list-item__value_U {
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ /* ===== 通用布局 ===== */
|
|
|
+ .list-item__label {
|
|
|
+ flex-basis: 55%;
|
|
|
+ }
|
|
|
+ .list-item__info {
|
|
|
+ flex-grow: 1;
|
|
|
+ }
|
|
|
+ .list-item__value {
|
|
|
+ flex-basis: 30%;
|
|
|
+ }
|
|
|
+ /* ===== 颜色类 ===== */
|
|
|
+ .list-item__value_red {
|
|
|
+ color: red;
|
|
|
+ }
|
|
|
+ .list-item__value_orange {
|
|
|
+ color: orange;
|
|
|
+ }
|
|
|
+ .list-item__value_yellow {
|
|
|
+ color: yellow;
|
|
|
+ }
|
|
|
+ .list-item__value_green {
|
|
|
+ color: yellowgreen;
|
|
|
+ }
|
|
|
+ .list-item__value_blue {
|
|
|
+ color: @vent-table-action-link;
|
|
|
+ }
|
|
|
+ .list-item__value_white {
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+ .gallery-item__value_lightblue {
|
|
|
+ color: @vent-configurable-home-light-border;
|
|
|
+ }
|
|
|
</style>
|
