ahyd_DIB/pages/commercialBI/components/format/bandNumber.vue

<template>
  <div class="main">
      <div class="dataItem" v-for="(item,index) in dataList" :key="index">
          <image class="bgIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/bg_icon.svg"></image>
          <div class="left">
              <image class="icon" :src="item.Brand_ICO?item.Brand_ICO:'/static/images/revenue/home.png'"></image>
          </div>
        <div class="typePic">
          <image class="typeImg" :src="item.type===1?'https://eshangtech.com/ShopICO/ahyd-BID/commercial/success.svg':item.type===2?'https://eshangtech.com/ShopICO/ahyd-BID/commercial/punish.svg':''"></image>
        </div>
          <div class="right">
              <p class="title">{{item.Brand_Name}}</p>
              <div class="company">
                  <image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/shop.svg"></image>
                  <p class="text">{{item.Bussiness_Name}}</p>
              </div>
              <div class="time" v-if="item.Bussiness_Time">
                  <image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/time.svg"></image>
                  <p class="text">{{item.Bussiness_Time}}</p>
              </div>
              <div class="label">
<!--                  <div class="labelItem" v-for="(item,index) in item.label" :key="index">{{item}}</div>-->
                  <div class="labelItem">{{item.Business_Trade}}</div>
              </div>
              <div class="box">
                  <div class="boxItem">
                      <p class="mark">{{9}}<text class="unit">分</text></p>
                      <p class="type">吸引力指数</p>
                  </div>
                  <div class="boxItem">
                      <p class="mark">{{9}}<text class="unit">分</text></p>
                      <p class="type">业绩评分</p>
                  </div>
                  <div class="boxItem">
                      <p class="mark">{{9}}<text class="unit">分</text></p>
                      <p class="type">坪效指数</p>
                  </div>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
export default {
    name: "bandNumber",
    data() {
        return {
            dataList:[]
        }
    },
    props: {
        data: {
            type: Array,
            default: () => []
        }
    },
    watch: {
        data: {
            handler(value) {
                console.log('carDatawatch', value)
                this.dataList = value
            },
            immediate: true
        }
    },
}
</script>

<style scoped lang="scss">
.main{
    width: 100%;
    margin-top: 12px;
    .dataItem{
        width: calc(100% - 32px );
        background: #F8F9F9;
        border-radius: 8px;
        margin: 0 auto 12px;
        display: flex;
        padding: 12px;
        position: relative;
        .bgIcon{
            width: 96px;
            height: 96px;
            position: absolute;
            right: -5px;top: 0;
        }
      .typePic{
        width: 25px;
        height: 25px;
        position: absolute;
        top: 16px;
        right: 16px;
        z-index:9;
        .typeImg{
          width: 100%;
          height: 100%;
          z-index:9;
        }
      }
        .left{
            width: 60px;
            height: 60px;
            overflow: hidden;
            border-radius: 5px;
            margin-right: 12px;
            .icon{
                width: 100%;
                height: 100%;
            }
        }
        .right{
            .title{
                font-size: 17px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #160002;
                line-height: 24px;
                margin-bottom: 2px;
            }
            .company,.time{
                display: flex;
                margin-bottom: 2px;
                .img{
                    width: 16px;
                    height: 16px;
                    line-height: 18px;
                    margin-right: 4px;
                }
                .text{
                    font-size: 12px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #786B6C;
                    line-height: 18px;
                    flex-flow: wrap;
                }
            }
            .label{
                margin-top: 8px;
                width: 100%;
                display: flex;
                flex-flow: wrap;
                .labelItem{
                    font-size: 12px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #786B6C;
                    line-height: 18px;
                    padding: 0 4px;
                    background: #EDF0F4;
                    margin-right: 4px;
                    border-radius: 2px;
                }
            }
            .box{
                margin-top: 22px;
                display: flex;
                .boxItem{
                    margin-right: 22px;
                    box-sizing: border-box;
                    padding-left: 5px;
                    .mark{
                        font-size: 18px;
                        font-family: DINAlternate-Bold, DINAlternate;
                        font-weight: bold;
                        color: #160002;
                        line-height: 22px;
                        margin-bottom: 4px;
                        .unit{
                            font-size: 12px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #A69E9F;
                            line-height: 18px;
                            margin-left: 4px;
                        }
                    }
                    .type{
                        font-size: 12px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #786B6C;
                        line-height: 18px;
                    }
                }
            }
        }
  }
}
</style>