155 lines
3.6 KiB
Vue
155 lines
3.6 KiB
Vue
|
<template>
|
||
|
|
<div class="provider_list">
|
||
|
|
<div class="provider_title">
|
||
|
|
<div class="pro_title">
|
||
|
|
热门供应商
|
||
|
|
</div>
|
||
|
|
<div class="sub_title">
|
||
|
|
热门装备
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="provider_content">
|
||
|
|
<div class="provider_item" v-for="(item, index) in providerInfo.list" :key="index">
|
||
|
|
<div class="provider_item_left">
|
||
|
|
<div class="pro_item_icon" :class="{ 'inThree': item.v_index <= 3, 'afterThree': item.v_index > 3 }">
|
||
|
|
<img :src="`/src/assets/img/index${item.v_index <= 3 ? item.v_index : 4}.png`" alt=""
|
||
|
|
class="pro_item_icon_img">
|
||
|
|
</div>
|
||
|
|
<div class="pro_item_title overflow">
|
||
|
|
{{ item.v_name }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="device_count">
|
||
|
|
设备数:{{ item.v_device_count }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script setup lang="ts">
|
||
|
|
const providerInfo = reactive({
|
||
|
|
list: [
|
||
|
|
{
|
||
|
|
v_index: 1,
|
||
|
|
v_name: "xxxx公司1",
|
||
|
|
v_device_count: '123456'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
v_index: 2,
|
||
|
|
v_name: "xxxx公司xxxx公司2xxxx公司2xxxx公司22",
|
||
|
|
v_device_count: '123456'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
v_index: 3,
|
||
|
|
v_name: "xxxx公司3",
|
||
|
|
v_device_count: '123456'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
v_index: 4,
|
||
|
|
v_name: "xxxx公司4",
|
||
|
|
v_device_count: '123456'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
v_index: 4,
|
||
|
|
v_name: "xxxx公司5",
|
||
|
|
v_device_count: '123456'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
v_index: 5,
|
||
|
|
v_name: "xxxx公司1",
|
||
|
|
v_device_count: '123456'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
v_index: 6,
|
||
|
|
v_name: "xxxx公司xxxx公司2xxxx公司2xxxx公司22",
|
||
|
|
v_device_count: '123456'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
v_index: 7,
|
||
|
|
v_name: "xxxx公司3",
|
||
|
|
v_device_count: '123456'
|
||
|
|
},
|
||
|
|
|
||
|
|
]
|
||
|
|
})
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.provider_list {
|
||
|
|
width: 332px;
|
||
|
|
height: 456px;
|
||
|
|
background-color: rgba($color: #011B37, $alpha: 0.6);
|
||
|
|
padding: 0 22px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
.provider_title {
|
||
|
|
display: flex;
|
||
|
|
justify-content: flex-start;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
.pro_title {
|
||
|
|
font-size: 18px;
|
||
|
|
color: $main-color;
|
||
|
|
padding-top: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sub_title {
|
||
|
|
font-size: 12px;
|
||
|
|
color: $main-color;
|
||
|
|
padding-top: 24px;
|
||
|
|
padding-left: 26px;
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.provider_content {
|
||
|
|
padding-top: 12px;
|
||
|
|
|
||
|
|
.provider_item {
|
||
|
|
width: 303px;
|
||
|
|
height: 40px;
|
||
|
|
padding: 0 12px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
background: rgba(20, 50, 67, 0.7);
|
||
|
|
margin-bottom: 8px;
|
||
|
|
|
||
|
|
.provider_item_left {
|
||
|
|
display: flex;
|
||
|
|
justify-content: flex-start;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
.pro_item_icon {
|
||
|
|
width: 42px;
|
||
|
|
height: 42px;
|
||
|
|
margin-top: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.inThree {
|
||
|
|
margin-left: -6px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.afterThree {}
|
||
|
|
|
||
|
|
.pro_item_title {
|
||
|
|
font-size: 14px;
|
||
|
|
width: 147px;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.device_count {
|
||
|
|
color: rgba($color: #fff, $alpha: 0.7);
|
||
|
|
font-size: 12px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
</style>
|