data-marketing-platform/src/views/home/echarts/visitor-overview.vue

<template>
  <div class="visitor-overview">
    <div class="overview-list">
      <Item :num="-100">
        <span>
          <i>0</i> 访问次数, <i>0</i> 独立访客
        </span>
      </Item>
      <Item :num="100">
        <span>
          <i>0秒</i> 平均停留时间 
        </span>
      </Item>
      <Item :num="0">
        <span>
          <i>0%</i> 跳出次数 (查看一个页面后就离开) 
        </span>
      </Item>
      <Item :num="-100">
        <span>
          <i>0</i> 每个访客行为数 (查看页面、下载、离站链接和内部搜索) 
        </span>
      </Item>
      <Item :num="100">
        <span>
          <i>0</i> 单次访问的最大活动量 
        </span>
      </Item>
      <Item :num="0">
        <span>
          <i>0</i> 页面访问次数, <i>0</i> 唯一页面浏览量 
        </span>
      </Item>
      <Item :num="100">
        <span>
          <i>0</i> 站内搜索数, <i>0</i> 关键词数量 
        </span>
      </Item>
      <Item :num="-100">
        <span>
          <i>0</i> 下载次数, <i>0</i> 唯一下载次数 
        </span>
      </Item>
      <Item :num="100">
        <span>
          <i>0</i> 离站链接数量, <i>0</i> 唯一离站链接数量
        </span>
      </Item>
    </div>
    <div style="position: absolute;top: 20px;right: 0;">
      <el-select v-model="value" style="width: 84px;">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineAsyncComponent } from 'vue';
const Item = defineAsyncComponent(() => import('./visitor-overview-item.vue'));

const value = ref('7');
const options = [
  {
    value: '7',
    label: '7天',
    selected: true,
  },
  {
    value: '30',
    label: '30天',
  },
]
</script>
<style lang="scss">
.visitor-overview {
  position: relative;
  padding-top: 70px;
  .overview-list {
    span {
      line-height: 20px;
      font-size: 14px;
      color: rgba(100, 100, 100, 1);
    }
    i {
      font-family: Source Han Sans SC;
      font-weight: 900;
      font-style: normal;
      color: rgba(18, 18, 18, 1);
    }
  }

  /* 下拉框整体样式 */
  .el-select__wrapper {
    border: 1px solid rgba(22, 122, 240, 1);
  }

  .el-select__selected-item {
    color: rgba(22, 122, 240, 1); /* 文字颜色 */
  }

  .el-select__caret {
    color: rgba(22, 122, 240, 1); /* 三角形颜色 */
  }
}
</style>