<template>
  <div class="large-screen">
    <!-- <i class="el-icon-back" @click="$router.go(-1)"></i> -->
    <div class="icon-end" @click="endLive" v-if="showLiveEndBtn">
      <img
        :src="require('@/assets/images/largeScreen/live_end_btn.png')"
        alt=""
      />结束直播
    </div>
    <h1 class="title">
      <span>{{ viewData.title }}</span>
    </h1>
    <div class="content">
      <div class="left">
        <div class="user-share">
          <h3 class="show-title">用户占比</h3>
          <div class="user-share-content">
            <div class="user-data">
              <div>
                <h6>
                  {{ userShareData.newProportion | numberFormat("0.00%") }}
                </h6>
                <p>新用户人数：{{ userShareData.newNum }}</p>
              </div>
              <div>
                <h6>
                  {{ userShareData.oldProportion | numberFormat("0.00%") }}
                </h6>
                <p>老用户人数：{{ userShareData.oldNum }}</p>
              </div>
            </div>
            <el-progress
              :show-text="false"
              :stroke-width="15"
              :percentage="getPercen"
              :define-back-color="getBackColor"
              color="#0389FC"
            ></el-progress>
            <!-- <div class="user-share-echarts" ref="useShareRef"></div> -->
          </div>
        </div>
        <div class="user-source">
          <h3 class="show-title">观众来源</h3>
          <div class="user-source-content">
            <div class="user-source-echarts" ref="userSourceRef"></div>
          </div>
        </div>
        <div class="dhbd">
          <h3 class="show-title">带货榜单</h3>
          <div class="product-list">
            <div class="body">
              <div>
                <div></div>
                <div class="header ">产品名称</div>
                <div class="header">成交量</div>
                <div class="header">成交金额</div>
              </div>
              <div
                class="item"
                v-for="(item, index) in productData"
                :key="index"
              >
                <div class="index">
                  <template v-if="index < 3">
                    <img
                      :src="
                        require(`@/assets/images/largeScreen/gold_${index +
                          1}.png`)
                      "
                      alt=""
                    />
                  </template>
                  <template v-else>{{ index + 1 }}</template>
                </div>
                <div class="pro-name">
                  <template
                    v-if="
                      !item.productName ||
                        (item.productName && item.productName.length < 8)
                    "
                    >{{ item.productName }}</template
                  >
                  <el-tooltip
                    v-else
                    :content="item.productName"
                    placement="top"
                  >
                    <div>
                      {{
                        item.productName
                          ? item.productName.length > 8
                            ? item.productName.slice(0, 8) + "..."
                            : item.productName
                          : ""
                      }}
                    </div>
                  </el-tooltip>
                </div>
                <div>{{ item.saleCount }}</div>
                <div>
                  {{
                    item.saleAmount != null
                      ? (item.saleAmount / 100).toFixed(2)
                      : ""
                  }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="center">
        <div class="live-info">
          <div>
            <!-- :class="{ dis_status: viewData || viewData.liveStatus != 1 }" -->
            <i v-if="viewData.liveStatus != 2">{{ getLiveStatusText }}</i>
          </div>
          <p>直播时间：{{ viewData.startTime || "--" }}</p>
          <span
            >直播时长：{{
              viewData.hours != null ? viewData.hours : "--"
            }}</span
          >
        </div>
        <div class="live-data">
          <img
            class="left-top-line"
            :src="require('@/assets/images/largeScreen/left_top_line.png')"
            alt=""
          />
          <img
            class="right-top-line"
            :src="require('@/assets/images/largeScreen/right_top_line.png')"
            alt=""
          />
          <img
            class="left-bottom-line"
            :src="require('@/assets/images/largeScreen/left_bottom_line.png')"
            alt=""
          />
          <img
            class="right-bottom-line"
            :src="require('@/assets/images/largeScreen/right_bottom_line.png')"
            alt=""
          />

          <h3>
            <img
              :src="require('@/assets/images/largeScreen/live-count-icon.png')"
              alt=""
            />实时在线人数
          </h3>
          <h2>{{ viewData.onlineNum | numberFormat("0,0") }}</h2>

          <div class="data-table">
            <div v-for="(item, index) in liveBoardData" :key="index">
              <p>{{ item.name }}</p>
              <span>{{ item.data != null ? item.data : "--" }}</span>
            </div>
          </div>
        </div>
        <div class="live-map">
          <div class="live-map-content">
            <div class="top5-data">
              <h4>省份（Top5）</h4>
              <div
                class="progress-item"
                v-for="(item, index) in top5Data"
                :key="index"
              >
                <p>{{ index + 1 }}.{{ item.provinceName }}</p>
                <el-progress
                  :percentage="item.proportion ? item.proportion * 100 : 0"
                  :show-text="false"
                ></el-progress>
                <div>
                  {{ item.num }}人({{
                    item.proportion | numberFormat("0.00%")
                  }})
                </div>
              </div>
            </div>
            <div class="live-map-echarts" ref="liveMapRef"></div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="online-people">
          <h3 class="show-title">在线人数</h3>
          <div class="online-people-content">
            <div class="online-people-echarts" ref="onlinePeopleRef"></div>
          </div>
        </div>
        <div class="volume-transaction">
          <h3 class="show-title">成交金额</h3>
          <div class="volume-transaction-content">
            <div
              class="volume-transaction-echarts"
              ref="volumeTransactionRef"
            ></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "amfe-flexible";
import "./style/normalize.scss";
import * as echarts from "echarts";
import "echarts/map/js/china.js";
import {
  userShare,
  userChannel,
  productSale,
  dataOverview,
  nowTrend,
  productSaleLine,
  userProvince,
  liveScreen
} from "@/api/largeScreen";
import { uVideoControl, infoGet, queryUserClientType } from "@/api/videoLive";
import {
  userShareConfig,
  userSourceConfig,
  onlinePeopleConfig,
  volumeTransactionConfig,
  // liveMapConfig,
  getLiveMapConfig,
  showFields
} from "./config";
import { clientTypeObj } from "@/utils/options";
export default {
  data() {
    return {
      videoId: null,
      // 用户占比数据
      userShareData: {},
      userShareChart: null,
      // 用户来源
      userSourceChart: null,
      // 带货榜单
      productData: [],
      // 在线人数
      onlinePeopleChart: null,
      volumeTransactionChart: null,
      // 数据统计
      viewData: {},
      liveBoardData: showFields.map(item => {
        return {
          ...item,
          data: null
        };
      }),
      // 用户省份分布
      userProvinceData: [],
      liveMapChart: null,
      timer: null,
      detail: {},
      allData: {}
    };
  },
  async mounted() {
    // if (!localStorage.getItem('pageOpened')) {
    // // 页面未打开，设置标志位
    // localStorage.setItem('pageOpened', 'true');
    // window.onbeforeunload = function() {
    //   // 页面卸载时清除标志位
    //   localStorage.removeItem('pageOpened');
    // };
    // } else {
    //   // 页面已打开，可以弹窗提示用户
    //   alert('该页面已在浏览器中打开！');

    //   window.close(); // 可选：关闭当前页面
    // }
    this.videoId = this.$route.query.videoId;
    const ret = await this.getDetail();
    if (!ret) return;
    window.addEventListener("resize", this.resizeFn);
    this.initData();
    //观众来源写死
    this.setUserSource();
    this.timer = setInterval(() => {
      this.initData();
    }, 10000);
  },
  computed: {
    getBackColor() {
      if (this.userShareData && this.userShareData.oldProportion)
        return "#f0a610";
      return "#dcdcdc";
    },
    getPercen() {
      if (this.userShareData && this.userShareData.newProportion) {
        return this.userShareData.newProportion * 100;
      }
      return 0;
    },
    showLiveEndBtn() {
      return (
        this.viewData.liveStatus &&
        (this.viewData.liveStatus == 1 || this.viewData.liveStatus == 3)
      );
    },
    top5Data() {
      return this.userProvinceData.slice(0, 5);
    },
    getLiveStatusText() {
      if (this.viewData) {
        switch (this.viewData.liveStatus) {
          case 1:
            return "直播中";
          case 2:
            return "未开始";
          case 3:
            return "暂停中";
          case 4:
            if (this.timer) clearInterval(this.timer);
            return "已结束";
        }
      }
      return "";
    }
  },
  methods: {
    async getDetail() {
      const res = await infoGet({ id: this.videoId });
      if (res && res.code === 0) {
        this.detail = res.data;
        if (
          this.detail.advisorBasic.deptName !==
            this.$store.state.user.user.user.deptName &&
          this.$store.state.user.user.user.deptId !== "1"
        ) {
          // 不是一个部门的不让查看 总部的可以查看所有
          this.$alert("暂无查看权限！", "", {
            confirmButtonText: "确定",
            callback: action => {
              window.close();
            }
          });
          return false;
        }
        return true;
      }
      return false;
    },
    resizeFn() {
      this.$nextTick(() => {
        this.userSourceChart && this.userSourceChart.resize();
        this.liveMapChart && this.liveMapChart.resize();
        this.userShareChart && this.userShareChart.resize();
        this.onlinePeopleChart && this.onlinePeopleChart.resize();
        this.volumeTransactionChart && this.volumeTransactionChart.resize();
      });
    },
    async initData() {
      const { code, data } = await liveScreen({ videoId: this.videoId });
      if (code == 0 && data) {
        this.allData = data;
        this.setUserShare();
        // this.setUserSource();
        this.getProductSaleList();
        this.getDataOverview();
        this.setOnlinePeople();
        this.setVolumeTransaction();
        this.setLiveMap();
      }
    },
    // 用户占比
    async setUserShare() {
      // if (!this.userShareChart) {
      //   this.userShareChart = echarts.init(this.$refs["useShareRef"]);
      // }
      // const config = userShareConfig;
      // let { code, data } = await userShare({ videoId: this.videoId });
      if (this.allData.videoLiveUserAgeVO) {
        this.userShareData = this.allData.videoLiveUserAgeVO;
        // config.title.show = false;
        // userShareConfig.series[0].data = [newProportion];
        // userShareConfig.series[1].data = [oldProportion];
        // if (data.newNum != 0 && data.oldNum == 0) {
        //   userShareConfig.series[0].itemStyle.barBorderRadius = [
        //     12,
        //     12,
        //     12,
        //     12
        //   ];
        // } else if (data.oldNum != 0 && data.newNum == 0) {
        //   userShareConfig.series[1].itemStyle.barBorderRadius = [
        //     12,
        //     12,
        //     12,
        //     12
        //   ];
        // } else {
        //   userShareConfig.series[0].itemStyle.barBorderRadius = [12, 0, 0, 12];
        //   userShareConfig.series[1].itemStyle.barBorderRadius = [0, 12, 12, 0];
        // }
      } else {
        // userShareConfig.series[0].data = [];
        // userShareConfig.series[1].data = [];
        // config.title.show = true;
        this.userShareData = {};
      }
      // console.log("config", config);
      // this.userShareChart.setOption(config);
    },
    // 观众来源
    async setUserSource() {
      if (!this.userSourceChart) {
        this.userSourceChart = echarts.init(this.$refs["userSourceRef"]);
      }
      const config = userSourceConfig;
      const { code, data } = await queryUserClientType({
        videoId: this.$route.query.videoId
      });

      if (code == 0 && data) {
        config.title.show = false;
        let allNum = 0;
        const seriesData = data.map(item => {
          allNum += item.count;
          return {
            value: item.count,
            name: clientTypeObj[item.clientType]
          };
        });
        config.formatter = function(name) {
          let v;
          seriesData.forEach(item => {
            if (item.name === name) {
              v = item.value;
            }
          });
          return `{name|${echarts.format.truncateText(
            name,
            80,
            "",
            "…",
            {}
          )}}{v|${parseFloat((v / allNum) * 100).toFixed(2)}%}`;
        };
        config.series[0].data = seriesData;
      } else {
        config.series[0].data = [];
        config.title.show = true;
      }
      this.userSourceChart.setOption(config);
    },
    // 带货榜单
    async getProductSaleList() {
      // const { code, data } = await productSale({ videoId: this.videoId });
      if (this.allData.videoLiveProductSaleVOS) {
        this.productData = this.allData.videoLiveProductSaleVOS.slice(0, 5);
        const len = this.productData.length;
        if (len < 5) {
          for (let i = 0; i < 5 - len; i++) this.productData.push({});
        }
      }
    },
    // 视频直播数据概况
    async getDataOverview() {
      // const { code, data } = await dataOverview({
      //   videoId: this.videoId
      // });

      if (this.allData.videoLiveOverviewVO) {
        this.liveBoardData = showFields.map(item => {
          return {
            ...item,
            data: this.allData.videoLiveOverviewVO[item.field]
          };
        });

        this.viewData = this.allData.videoLiveOverviewVO;
      }
    },
    // 在线人数
    async setOnlinePeople() {
      if (!this.onlinePeopleChart) {
        this.onlinePeopleChart = echarts.init(this.$refs["onlinePeopleRef"]);
      }
      const config = onlinePeopleConfig;
      // let { code, data } = await nowTrend({ videoId: this.videoId });
      if (this.allData.videoLiveTrendVOS) {
        config.title.show = false;
        const xData = this.allData.videoLiveTrendVOS.map(
          item => item.time.split(" ")[1]
        );
        config.xAxis.axisLabel.interval = parseInt(
          xData.length / (xData.length % 2 == 0 ? 2 : 3)
        );
        config.xAxis.data = xData.map((item, index) => {
          return {
            value: item,
            textStyle: {
              align:
                index === 0
                  ? "left"
                  : index === xData.length - 1
                  ? "right"
                  : "center"
            }
          };
        });
        config.series[0].data = this.allData.videoLiveTrendVOS.map(
          item => item.onlineNum
        );
        config.series[1].data = this.allData.videoLiveTrendVOS.map(
          item => item.attendNum
        );
        config.series[2].data = this.allData.videoLiveTrendVOS.map(
          item => item.leaveNum
        );
      } else {
        config.title.show = true;
        config.series[0].data = [];
        config.series[1].data = [];
        config.series[2].data = [];
        config.xAxis.data = [];
      }

      this.onlinePeopleChart.setOption(config);
    },
    // 成交金额
    async setVolumeTransaction() {
      if (!this.volumeTransactionChart) {
        this.volumeTransactionChart = echarts.init(
          this.$refs["volumeTransactionRef"]
        );
        const config = volumeTransactionConfig;
        // const { code, data } = await productSaleLine({
        //   videoId: this.videoId
        // });
        this.allData.videoProductSaleLineVOS = this.allData.videoProductSaleLineVOS.sort(
          (x, y) => {
            return new Date(x.time).getTime() - new Date(y.time).getTime();
          }
        );
        if (this.allData.videoProductSaleLineVOS) {
          const xData = this.allData.videoProductSaleLineVOS.map(
            item => item.time
          );
          config.title.show = false;
          config.series[0].data = this.allData.videoProductSaleLineVOS.map(
            item => item.amount / 100
          );
          config.xAxis.data = xData.map((item, index) => {
            return {
              value: item,
              textStyle: {
                align:
                  index === 0
                    ? "left"
                    : index === xData.length - 1
                    ? "right"
                    : "center"
              }
            };
          });
          config.xAxis.axisLabel.interval =
            xData.length <= 4
              ? 0
              : parseInt(xData.length / (xData.length % 2 == 0 ? 2 : 3));
        } else {
          config.title.show = true;
          config.series[0].data = [];
          config.xAxis.data = [];
        }

        this.volumeTransactionChart.setOption(config);
      }
    },
    async setLiveMap() {
      console.log("map=>", echarts.getMap("china").geoJson.features);
      if (!this.liveMapChart) {
        this.liveMapChart = echarts.init(this.$refs["liveMapRef"]);
      }

      // const { code, data } = await userProvince({ videoId: this.videoId });
      if (this.allData.videoUserProvinceVOS) {
        this.userProvinceData = this.allData.videoUserProvinceVOS.sort(
          (x, y) => y.num - x.num
        );
        const seriesData = this.allData.videoUserProvinceVOS.map(item => {
          return {
            name: item.provinceName.replace(/市|省/, ""),
            value: item.num,
            proportion: item.proportion
          };
        });
        console.log("seriesData", seriesData);
        this.liveMapChart.setOption(
          getLiveMapConfig(seriesData, seriesData.slice(0, 10))
        );
      } else {
        this.liveMapChart.setOption(getLiveMapConfig([], []));
      }
    },
    endLive() {
      this.$confirm(`您确定结束直播?`, {
        confirmButtonText: "提交",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          console.log("thenthenthen");
          uVideoControl({ id: this.videoId, option: 2 }).then(res => {
            if (res.code === 0) {
              this.$message({
                type: "success",
                message: "结束直播成功!"
              });
              if (this.timer) clearInterval(this.timer);
              this.initData();
            }
          });
        })
        .catch(() => {});
    }
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resizeFn);
    if (this.timer) clearInterval(this.timer);
  }
  // destroyed() {  //进行监听销毁
  //   localStorage.removeItem('pageOpened'); // 确保标志位被清除
  // },
};
</script>

<style scoped lang="scss">
* {
  box-sizing: border-box;
}
.el-icon-back {
  cursor: pointer;
  position: absolute;
  top: 5%;
  left: 2%;
  position: absolute;
  color: #fff;
  font-size: 30px;
}
.icon-end {
  cursor: pointer;
  position: absolute;
  display: flex;
  align-items: center;
  top: 5%;
  right: 4%;
  position: absolute;
  color: #fff;
  font-size: 18px;
  padding: 4px;
  border: 1px solid #42d0ff;
  color: #42d0ff;
  img {
    width: 20px;
    height: 20px;
    margin-right: 5px;
  }
}
h1 {
  margin: 0;
  padding: 0;
  height: 8%;
}
.large-screen {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  // background: url("~@/assets/images/largeScreen/ls-bg.png") no-repeat;
  background: #101d4a;
  background-size: 100% 100%;
  overflow: hidden;
  .title {
    font-weight: 700;
    font-size: 34px;
    line-height: 34px;
    background-clip: text;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(
      to right,
      #ffffff,
      #9de8ff
    ); /* 定义渐变背景 */
    -webkit-background-clip: text; /* 将背景裁剪到文字形状 */
    color: transparent; /* 隐藏文字的实际颜色 */
    padding-top: 20px;
    // overflow: hidden;
    width: 100%;
    height: 55px;
    span {
      width: 27%;
      text-align: center;
      word-break: break-all;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .content {
    display: flex;
    padding: 20px 20px 0 20px;
    height: 92%;
    margin-top: -2%;
    .left,
    .right {
      box-sizing: border-box;
      padding: 0 0 20px;
      width: 25%;
    }
    .show-title {
      font-size: 28px;
      font-weight: 700px;
      padding-left: 60px;
      padding-bottom: 20px;
      color: #fff;
      text-align: left;
      background: url("~@/assets/images/largeScreen/title-bg.png");
      background-size: 100% 100%;
    }
    .left {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding-top: 40px;
      padding-bottom: 20px;
      box-sizing: border-box;
      > div {
        flex: 1;
        box-sizing: border-box;
        // background-color: #0389fc;
      }
      > div:first-of-type {
        flex: 0.5;
      }

      .user-source {
        display: flex;
        flex-direction: column;
        .user-source-content {
          flex: 1;
          .user-source-echarts {
            width: 100%;
            height: 100%;
            min-height: 200px;
            overflow-x: hidden;
          }
        }
      }
      .user-share-content {
        margin-bottom: 20px;
        .user-share-echarts {
          width: 100%;
          height: 50px;
        }
        .user-data {
          display: flex;
          width: 100%;
          justify-content: space-between;
          padding: 15px 0;
          h6 {
            font-size: 46px;
            font-weight: 700;
          }
          p {
            font-size: 18px;
            font-weight: 400;
            margin-top: 20px;
          }
          div:first-of-type {
            color: #0389fc;
          }
          div:last-of-type {
            color: #f0a610;
          }
        }
      }

      .dhbd {
        display: flex;
        flex-direction: column;
        padding: 20px 0 10px;
        box-sizing: border-box;
        .product-list {
          box-sizing: border-box;
          height: 100%;
          flex: 1;
          display: flex;
          flex-direction: column;

          // margin-top: 20px;
          .body {
            height: 100%;
            display: flex;
            flex-direction: column;
          }
          .header,
          .body > div {
            &:first-of-type {
              max-height: 38px;
            }
            display: flex;
            flex-shrink: 0;
            flex: 1;
            > div {
              flex: 1;
              display: flex;
              align-items: center;
              justify-content: center;
            }
            > div:last-of-type {
              flex-shrink: 0;
            }
            > div:first-child {
              width: 60px;
              flex: none;
            }
          }
          .header {
            color: #8798d3;
            font-size: 20px;
          }

          .pro-name {
            font-size: 18px;
            cursor: pointer;
          }

          .item {
            display: flex;
            flex-shrink: 0;
            min-height: 40px;
            color: #fff;
            font-size: 20px;
            text-align: center;
            .index {
              width: 60px;
              flex: none;
              color: #cbd6fc;
              font-size: 16px;
              font-weight: 700;
              text-align: center;
              img {
                // width: 60%;
                // height: 100%;
                width: 50px;
                height: 50px;
                text-align: center;
              }
            }
            &:nth-of-type(2n + 1) {
              background: rgba($color: #0490fd1a, $alpha: 0.1);
            }
          }
        }
      }
    }
    .right {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding-top: 40px;
      padding-bottom: 20px;
      > div {
        // flex: 1;
        height: 50%;
      }
      .online-people,
      .volume-transaction {
        display: flex;
        flex-direction: column;
        .online-people-content,
        .volume-transaction-content {
          flex: 1;
          height: 100%;
          .online-people-echarts,
          .volume-transaction-echarts {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .center {
      width: 50%;
      display: flex;
      flex-direction: column;
      padding: 60px 30px 5px;
      .live-info {
        display: flex;
        justify-content: space-evenly;
        height: 5%;
        font-size: 14px;
        color: #fff;
        i {
          display: inline-block;
          width: 58px;
          height: 25px;
          line-height: 25px;
          box-sizing: border-box;
          background-color: #0085ff;
          text-align: center;
          border-radius: 2px;
          font-size: 14px;
        }
        .dis_status {
          background-color: #c8c9cc;
        }
      }
      .live-data {
        position: relative;
        width: 100%;
        height: 330px;
        color: #fff;
        padding: 20px 0 10px;
        background: rgba($color: #0490fd1a, $alpha: 0.2);
        .left-top-line {
          position: absolute;
          left: 0;
          top: 0;
        }
        .right-top-line {
          position: absolute;
          right: 0;
          top: 0;
        }
        .left-bottom-line {
          position: absolute;
          left: 0;
          bottom: 0;
        }
        .right-bottom-line {
          position: absolute;
          right: 0;
          bottom: 0;
        }

        h3 {
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 24px;
          color: #fff;
          text-align: center;
          img {
            margin: 0;
            margin-right: 10px;
          }
        }

        h2 {
          text-align: center;
          font-weight: 700;
          font-size: 70px;
          padding: 20px 0;
        }

        .data-table {
          display: flex;
          flex-wrap: wrap;
          > div {
            text-align: center;
            width: 25%;
            margin-bottom: 5%;

            p {
              color: #8798d3;
              font-size: 13px;
              margin-bottom: 10px;
            }
            span {
              font-size: 24px;
            }
          }
        }
      }

      .live-map {
        width: 100%;
        flex: 1;

        .live-map-content {
          position: relative;
          width: 100%;
          height: 100%;
          .live-map-echarts {
            width: 100%;
            height: 100%;
            > div {
              z-index: -1;
              // width: 100%;
              // height: 100% !important;
            }
          }
          .top5-data {
            position: absolute;
            width: 40%;
            height: 40%;
            // background: pink;
            // bottom: -10%;
            bottom: -20px;
            z-index: 100;
            color: #fff;
            font-size: 12px;
            p {
              width: 50px;
            }
            h4 {
              font-size: 16px;
            }
            .progress-item {
              display: flex;
              align-items: center;
              margin-top: 15px;
              .el-progress {
                flex: 1;
                margin: 0 10px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
