fengjie-datascreen/src/views/scenic/components/box-1.vue

<template>
  <div class="box-1">
    <div class="header">
      <div>
        <div class="label">今年总游客数</div>
        <countup v-for="item in count" :endVal="item" />
      </div>
      <div>
        <div>
          <div class="label">接待状态</div>
          <p class="value">安全</p>
        </div>
        <div>
          <div class="label">景区安全</div>
          <p class="value">安全</p>
        </div>
        <div>
          <div class="label">景区游玩舒适</div>
          <p class="value error">排队</p>
        </div>
        <div>
          <div class="label">通景交通</div>
          <p class="value">安全</p>
        </div>
        <div>
          <div class="label">停车场负荷度</div>
          <p class="value error">超负荷</p>
        </div>
      </div>
    </div>
    <div class="main"> </div>
    <div class="footer">
      <div class="flex">
        <div class="item">
          <progress1 :width="140" :height="70" />
          <div>
            <div class="bg">
              <span class="label">今日工单总条数：</span>
              <span class="value"> <countup :endVal="1234" /></span>
            </div>
            <div class="bg">
              <span class="label">工单完成数：</span>
              <span class="value"> <countup :endVal="1234" /></span>
            </div>
          </div>
        </div>
        <div class="item">
          <progress1 :width="140" :height="70" />
          <div>
            <div class="bg">
              <span class="label">今日工单总条数：</span>
              <span class="value"> <countup :endVal="1234" /></span>
            </div>
            <div class="bg">
              <span class="label">工单完成数：</span>
              <span class="value"> <countup :endVal="1234" /></span>
            </div>
          </div>
        </div>
      </div>
      <div class="flex align-center justify-between">
        <div>
          <div class="cell">
            <span class="tag tag--success">普通</span>
            <p class="content">
              工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
              工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
            </p>
          </div>
          <div class="cell">
            <span class="tag tag--error">普通</span>
            <p class="content">
              工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
              工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
            </p>
          </div>
          <div class="cell">
            <span class="tag tag--primary">普通</span>
            <p class="content">
              工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
              工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
            </p>
          </div>
        </div>
        <div class="more">查看更多</div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import countup from 'vue-countup-v3'
  import progress1 from './progress-1.vue'

  let count = ref('58459')
</script>

<style scoped lang="scss">
  .box-1 {
    margin-top: vh(120);
    width: vw(810);
    height: vh(950);
    padding: vw(10);
    box-sizing: border-box;
    background-image: url('@/assets/images/bg-3.png');
    background-size: 100% 100%;
    .header {
      display: flex;
      margin-top: vh(10);
      & > div:nth-child(1) {
        width: vw(300) !important;
      }
      & > div:nth-child(2) {
        flex: 1;
        display: flex;
        justify-content: space-between;
      }
      .label {
        font-weight: 400;
        font-size: vw(16);
        color: #ffffff;
      }
      .value {
        font-weight: bold;
        font-size: vw(28);
        color: #02f9fa;
        text-align: center;
        line-height: vh(60);
      }
      .error {
        color: #ff4400;
      }
      .countup-wrap {
        margin-top: vh(10);
        display: inline-block;
        width: vw(40);
        height: vh(40);
        margin-right: vw(4);
        border-radius: vw(4);
        color: #ffffff;
        font-size: vw(28);
        font-weight: bold;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(180deg, #00b7ff 0%, #0033ff 100%);
      }
    }
    .main {
      width: 100%;
      height: vh(600);
    }
    .footer {
      .item {
        flex: 1;
        height: vh(120);
        display: flex;
        align-items: center;
        background-image: url('@/assets/images/bg-3.png');
        background-size: 100% 100%;
        &:nth-child(1) {
          margin-right: vw(10);
        }
        .bg {
          padding-left: vw(20);
          width: vw(243);
          height: vh(40);
          display: flex;
          align-items: center;
          background: linear-gradient(90deg, rgba(0, 150, 255, 0.34) 0%, rgba(0, 150, 255, 0) 100%);
          &:nth-child(1) {
            margin-bottom: vh(4);
          }
          .label {
            font-weight: 400;
            font-size: vw(14);
            color: #fff;
          }
          .value {
            font-weight: bold;
            font-size: vw(28);
            color: #02f9fa;
          }
        }
      }
      .cell {
        display: flex;
        margin-left: vw(4);
        margin-top: vh(12);
        &:nth-last-child(1) {
          margin-bottom: 0;
        }
        .tag {
          padding: 0 vw(16);
          font-weight: bold;
          font-size: vw(14);
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: vw(2);
          &--success {
            color: #02f9fa;
            border: 1px solid #02f9fa;
            box-shadow: inset 0 0 vw(8) 0 #0be1ab;
          }
          &--error {
            color: #ee2c2c;
            border: 1px solid #ee2c2c;
            box-shadow: inset 0 0 vw(8) 0 #ee2c2c;
          }
          &--primary {
            color: #00aaff;
            border: 1px solid #00aaff;
            box-shadow: inset 0 0 vw(8) 0 #00aaff;
          }
        }
        .content {
          margin-left: vw(4);
          padding: 0 vw(10);
          width: vw(660);
          height: vh(24);
          line-height: vh(24);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-weight: 400;
          font-size: vw(14);
          color: #ffffff;
          border-radius: vw(2);
          background: rgba(0, 150, 255, 0.28);
        }
      }
      .more {
        cursor: pointer;
        margin-top: vh(12);
        width: vw(26);
        height: vh(98);
        font-weight: 400;
        font-size: vw(14);
        line-height: vh(10);
        color: #ffffff;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #034e99;
      }
    }
  }
</style>