manHourHousekeeper/fhKeeper/formulahousekeeper/customerBuler-crm-h5/src/pages/tabbar/home/component/dataAnalysis.vue

<template>
  <div class="dataAnalysis">
    <!-- 销售简报 -->
    <SalesBriefings />

    <!-- 数据汇总 -->
    <DataSummary />

    <!-- 商机阶段 -->
    <BusinessEcharts />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useLifecycle } from '@hooks/useCommon.js';
import requests from "@common/requests"

import SalesBriefings from './salesBriefings.vue';
import DataSummary from './dataSummary.vue';
import BusinessEcharts from './businessEcharts.vue'

useLifecycle({
  load: () => {
    // 添加加载逻辑
  },
  init: () => {
  }
});
</script>

<style lang='scss'>
/* 样式代码 */
.dataAnalysis {
  // margin: 20px 0 16px 0;
  // padding: 0 16px;

  .transitionEffect {
    transition: all .5s ease-in-out;
  }

  .salesKit {
    .content {
      width: 100%;

      .item {
        width: 50%;
        display: flex;
        margin-top: 20px;

        .item-img {
          width: 54px;
          height: 54px;
          margin-right: 6px;
        }
      }
    }
  }

  .dataSummary {
    .data-item {
      padding: 15px;
      border-radius: 6px;
      margin-top: 16px;

      .kehu-img {
        width: 21px;
        height: 22px;
        margin-right: 12.5px;
      }

      .businessOpportunity-img {
        width: 23px;
        height: 23px;
        margin-right: 12px;
      }

      .xiansuo-img {
        width: 23px;
        height: 23px;
        margin-right: 12px;
      }
    }
  }

  .businessOpportunityStage {}

  .box {
    background: #fff;
    border-radius: 10px;
    padding: 6px 16px 6px 16px;

    .box-title {
      height: 40px;
      border-bottom: 1px solid #E5E4EE;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;

      .box-title-left {
        padding-left: 10px;
        color: #0E1012;

        &::after {
          content: '';
          width: 2px;
          border-radius: 10px;
          background: #0859d6;
          height: 18px;
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
        }
      }

      .box-title-right {
        color: #747474;
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>