【CSS】数据面板

最新推荐文章于 2023-12-16 17:19:42 发布

嘻嘻的妙妙屋

最新推荐文章于 2023-12-16 17:19:42 发布

阅读量596

点赞数

分类专栏：前端文章标签： css javascript 前端

本文链接：https://blog.csdn.net/Jessieeeeeee/article/details/126638922

版权

数据面板

效果

index.vue

<template>
  <div class="container">
    <div class="card">
      <div class="header">
        <div class="title">订单统计</div>
        <div class="detail">
          <el-tabs
            class="mid"
            v-model="currentDate"
            @tab-click="dateGroupChange"
          >
            <el-tab-pane
              v-for="item in Object.keys(dateMap)"
              :key="item"
              :label="dateMap[item]"
              :name="item"
            ></el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <div class="content">
        <div class="list">
          <div class="item">
            <div class="text1">
              充值订单数
              <el-tooltip
                class="tooltip"
                effect="dark"
                content="周期范围内有流向的订单数"
                placement="right"
              >
                <i class="icon-question"></i>
              </el-tooltip>
            </div>
            <p class="text2">
              {
  { orderCount }}
            </p>
            <CompareText
              :result="2"
              :unit="''"
              :target="dateMap[currentDate]"
            />
            <p class="unit">单位：个</p>
          </div>
          <div class="item">
            <div class="text1">
              订单流向金额
              <el-tooltip
                class="tooltip"
                effect="dark"
                content="周期范围内有订单流向的消费金额"
                placement="right"
              >
                <i class=