<!--
 * @Author: xw
 * @Date: 2021-10-11 18:42:58
 * @LastEditTime: 2021-10-12 10:38:41
 * @LastEditors: Please set LastEditors
 * @Description: 品牌数据
 * @FilePath: /data-show/src/views/BrandInsight/brandData/index.vue
-->

<template>
  <div class="bd-outter">
    <v-label-div title="品牌数据"></v-label-div>
    <div class="bd-inner">
         <div class="bd-o-d1">
             <div class="d1">
                 <img class="m1" src="../../../assets/images/BrandInsight/ic_cb.png"/>
                 <span class="s1">传播数据总量</span>
             </div>
             <span class="s2">74,073,195</span>
         </div>
         <div class="bd-o-d1" style="margin-top: 16px">
            <div class="d1">
                 <img class="m1" src="../../../assets/images/BrandInsight/ic_dx.png"/>
                 <span class="s1">舆情整体调性</span>
             </div>
             <span class="s2">
                <span class="s2-s1"></span>
                <span class="s2-s1" style="width: 104px;background: #54BF93;"></span>
                <span class="s2-s1" style="width: 68px; background: #CC9D12"></span>
             </span> 
         </div>
    </div>
   
  </div>
</template>

<script>
export default {
  name: "brandData",
 
};
</script>

<style lang="less" scoped>
.bd-outter {
  width: 620px;
  height: 272px;
  border: 2px solid #0f2a4d;
  border-radius: 2px;
}
.bd-inner {
  padding: 16px;
  .bd-o-d1 {
      width: 588px;
      height: 88px;
      border: 1px solid #0f2a4d;
      border-radius: 2px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .d1 {
          display: flex;
          height: 100%;
          justify-content: flex-start;
          align-items: center;
          .m1 {
              display: block;
              width: 64px;
              height: 64px;
              margin-left: 16px;
          }
          .s1 {
              display: block;
              color: #fff;
              font-size: 20px;
              margin-left: 12px;
          }
      }
      .s2 {
          display: block;
          color: #fff;
          font-size: 44px;
          font-family: Bebas;
          margin-right: 16px;
          display: flex;
          justify-content: flex-start;
          width: 276px;
          .s2-s1 {
              display: block;
              width: 102px;
              height: 36px;
              background: #3373CC;
              margin-right: 2px;
          }
      }
  }
}
</style>

