data-marketing-platform/src/views/churn/behavior/index.vue

<template>
  <div class="behavior">
    <el-row :gutter="12" style="padding: 12px; row-gap: 12px;">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <el-card shadow="hover" style="padding: 10px 14px;">
          <div class="top-info">
            <div class="title">卸载洞察<svg width="14" height="14" viewBox="0 0 14 14" fill="none"
                xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M7 14C8.93298 14 10.683 13.2165 11.9497 11.9497C13.2165 10.683 14 8.93298 14 7C14 5.06702 13.2165 3.31702 11.9497 2.05025C10.683 0.783503 8.93298 0 7 0C5.06702 0 3.31702 0.783503 2.05025 2.05025C0.783503 3.31702 0 5.06702 0 7C0 8.93298 0.783503 10.683 2.05025 11.9497C3.31702 13.2165 5.06702 14 7 14Z"
                  fill="#1B4D88" fill-opacity="0.4" />
                <path
                  d="M4 4.702C4 4.40333 4.02333 4.09533 4.07 3.778C4.126 3.46067 4.21933 3.17133 4.35 2.91C4.49 2.64867 4.67667 2.434 4.91 2.266C5.14333 2.08867 5.45133 2 5.834 2H7.794C8.102 2 8.37267 2.06533 8.606 2.196C8.84867 2.31733 9.04467 2.476 9.194 2.672C9.35267 2.868 9.474 3.092 9.558 3.344C9.65133 3.596 9.70733 3.848 9.726 4.1C9.754 4.352 9.74467 4.59467 9.698 4.828C9.66067 5.06133 9.59533 5.26667 9.502 5.444L7.934 8.314V9.574H6.324V8.146L7.808 5.556C7.892 5.416 7.948 5.234 7.976 5.01C8.01333 4.786 8.01333 4.57133 7.976 4.366C7.948 4.15133 7.878 3.96933 7.766 3.82C7.66333 3.67067 7.514 3.596 7.318 3.596H6.408C6.24933 3.596 6.11867 3.624 6.016 3.68C5.91333 3.72667 5.82933 3.80133 5.764 3.904C5.708 3.99733 5.67067 4.114 5.652 4.254C5.63333 4.38467 5.624 4.534 5.624 4.702H4ZM7.976 12.15H6.324V10.512H7.976V12.15Z"
                  fill="white" />
              </svg>
            </div>
            <div class="data-source-status">数据源状态：Demo数据</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="12" style="padding: 0 12px 12px; row-gap: 12px;">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <el-card shadow="hover">
          <div class="active-situation">
            <div class="title">卸载设备活跃情况</div>
            <div class="content">

              <el-row :gutter="12" style="padding: 0; row-gap: 12px;">
                <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                  <div class="el-card" style="flex: 1; overflow: visible; padding: 24px 40px; height: 475px;">
                    <div class="description">
                      <p>安装至卸载存量时长分布</p>
                      <p>存量时长=最近卸载日期-最近卸载前的安装日期</p>
                      <p>用户卸载集中在安装App后：<span>90天以上</span></p>
                    </div>
                    <div class="content-item">
                      <PieChart />
                    </div>
                  </div>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                  <div class="el-card" style="flex: 1; overflow: visible; padding: 24px 40px; height: 475px;">
                    <div class="description">
                      <p>历史卸载次数分布</p>
                      <p>当前周的卸载设备，按当前是第几次卸载App进行分布</p>
                      <p>历史上<span>96.5%</span>卸载设备会反复卸载。</p>
                    </div>
                    <div class="content-item">
                      <BarChart />
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>

          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" name="churnBehavior" setup>
import PieChart from './echarts/PieChart.vue'
import BarChart from './echarts/BarChart.vue'
</script>
<style scoped lang="scss">
svg {
  vertical-align: middle;
  margin: 0 0 0 12px;
}

.behavior {
  font-family: Source Han Sans SC;

  .top-info {
    color: rgba(18, 18, 18, 1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    margin: -2.5px 0;

    .title {
      font-size: 16px;
      font-weight: 500;
      line-height: 20px;
      padding: 4px 0;
    }

    .data-source-status {
      font-weight: 400;
      font-size: 14px;
      line-height: 20px;
      color: rgba(18, 18, 18, 1);
      padding: 4px 0;
    }
  }

  .active-situation {
    padding: 10px 14px;

    .title {
      line-height: 19px;
      font-weight: 500;
      font-size: 16px;
      padding-left: 12px;
      position: relative;
      margin-bottom: 23px;

      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 14px;
        background: rgba(22, 122, 240, 1);
      }
    }

    .content {

      // display: flex;
      // gap: 20px;
      .description {
        margin-bottom: 35px;

        p:nth-child(1) {
          color: rgba(18, 18, 18, 1);
          font-weight: 500;
          font-size: 16px;
          margin-bottom: 8px;
        }

        p:nth-child(2) {
          font-weight: 400;
          font-size: 14px;
          color: rgba(100, 100, 100, 1);
          margin-bottom: 8px;
        }

        p:nth-child(3) {
          color: rgba(18, 18, 18, 1);
          font-weight: 400;
          font-size: 14px;
          line-height: 32px;

          span {
            font-weight: 400;
            font-size: 22px;
            color: rgba(22, 122, 240, 1);
            line-height: 32px;
            padding: 0 2px;
          }
        }
      }
    }
  }

}
</style>