<template>
  <div class="dashboard-editor-container">
    <el-row :gutter="15">
      <el-col :span="16">
        <div class="header-top">
          <p class="p-title">
            {{ loginName }}，{{ timeString }}欢迎回来！您有
            <strong
              @click="jumpApproval('aa')"
              style="color: #f53e56; cursor: pointer"
              >{{ approvalData.length }}条</strong
            >
            待办信息需要处理哦！
          </p>
          <p class="p-text">
            <svg-icon
              icon-class="wd"
              class="wd"
              style="font-size: 30px"
            />当前库房温度：<strong style="padding-right: 20px"
              >{{ wsdForm.temperature }} ℃</strong
            >
            <svg-icon
              icon-class="sd"
              class="sd"
              style="font-size: 30px"
            />当前库房湿度：<strong>{{ wsdForm.humidity }} RH</strong>
          </p>
          <p class="p-text">增强档案意识，维护档案安全！</p>
        </div>
        <div class="task-contentc">
          <div class="task-c">
            <div class="task-item bg-orange" @click="jumpMenu(174)">
              <svg-icon icon-class="gj" />
              <span>全文检索</span>
            </div>
            <div class="task-item bg-blue" @click="jumpMenu(232)">
              <svg-icon icon-class="mlgl" />
              <span>档号设置</span>
            </div>
            <div class="task-item bg-green" @click="jumpMenu(153)">
              <svg-icon icon-class="wrkgl" />
              <span>未入库著录</span>
            </div>
            <div class="task-item bg-red" @click="jumpMenu(155)">
              <svg-icon icon-class="yrkgl" />
              <span>已入库</span>
            </div>
            <div class="task-item bg-reda" @click="jumpMenu(282)">
              <svg-icon icon-class="ywgl" />
              <span>长期保存库</span>
            </div>
            <div class="task-item bg-gre" @click="jumpMenu(276)">
              <svg-icon icon-class="sjdr" />
              <span>数据接收</span>
            </div>
          </div>
        </div>
        <div class="search-content">
          <div class="title">档案总数 共{{ sumNum }}件</div>
          <div class="search-c">
            <first-a-box ref="first" @sunAll="sunAll" />
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <!-- <div class="search-content">
          <div class="title">全文检索</div>
          <div class="search-c">
            <div class="condition">
              <el-select size="mini" style="width:100px" v-model="relation" placeholder="请选择"></el-select>
              <el-select size="mini" style="width:100px" v-model="relation" placeholder="请选择"></el-select>
              <el-select size="mini" style="width:100px" v-model="relation" placeholder="请选择"></el-select>
            </div>
            <div class="search-d">
              <el-input size="medium" placeholder="请输入内容" v-model="searchKeys" class="input-with-select">
                <el-button slot="append" icon="el-icon-search">搜索</el-button>
              </el-input>
            </div>
          </div>
        </div> -->
        <div class="approver-div">
          <div class="title">审批中心</div>
          <el-scrollbar wrap-class="scrollbar-wrapper">
            <template v-if="approvalData.length > 0">
              <ul class="approver-ul">
                <li
                  @click="jumpApproval(item)"
                  v-for="item in approvalData"
                  :key="item.id"
                >
                  <span class="tag"
                    ><el-tag type="success">{{ item.expressName }}</el-tag> |
                    <em style="font-size: 13px; color: #909399">
                      {{ JSON.parse(item.modifyValues).applyTime }}</em
                    ></span
                  >
                  <div class="info">
                    <span
                      >{{ JSON.parse(item.modifyValues).applyUserName }}
                    </span>
                    <span style="color: #409eff"
                      >&nbsp;&nbsp;&nbsp;&nbsp;查看详情>></span
                    >
                  </div>
                </li>
              </ul>
            </template>
            <template v-else>
              <div class="no-data">
                <svg-icon icon-class="nodata" />
                <p>暂无数据</p>
              </div>
            </template>
          </el-scrollbar>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="15">
      <el-col :span="8">
        <div class="charts-m">
          <div class="title">保管期限</div>
          <div class="charts-c">
            <two-box />
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <!-- 原文总数 -->
        <div class="charts-m">
          <div class="title">原文总数 共{{ numYW }}幅</div>
          <div class="charts-c">
            <first-b-box @sunYW="sunYW" />
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="charts-m">
          <div class="title">档案利用</div>
          <div class="charts-c">
            <twoBBox />
          </div>
        </div>
      </el-col>
    </el-row>
   
  </div>
</template>
<script>
import firstABox from "./components/firstA.vue";
import firstBBox from "./components/firstB.vue";
import firstCBox from "./components/firstC.vue";
import quanZong from "./components/quanzong.vue";
import twoBox from "./components/two.vue";
import twoBBox from "./components/twoB.vue";
import { getCurrentTime, message, getGreeting } from "@/utils/common";
import { getData } from "@/api/archiveUtilize/archivesRetrieval/authorizedElectronicRecords";
import {
  getHumidity,
  getDiskCapacityResidueRemind,
  temperatureAndHumidity,
} from "@/api/dashboard.js";
import { getData as getApprovalData } from "@/api/approvalManagement/approval.js";
export default {
  name: "DashboardEditor",
  components: {
    firstABox,
    firstBBox,
    firstCBox,
    twoBox,
    quanZong,
    twoBBox,
  },
  data() {
    return {
      isShowVisible: false,
      diskTipMessage: "", // 磁盘信息
      timeString: getGreeting(),
      loginName: sessionStorage.getItem("userCHname"),
      relation: "", // 保管期限
      searchKeys: "", // 查询字段
      tableData: [], // 审批中心
      borrowNum: null, // 借阅总数
      sumNum: null,
      numYW: null,
      title: "",
      newsList: [],
      numStatus: true,
      storage: "",
      radio1: "1",
      temperatureArr: [], // 温湿度数据
      option: [
        {
          name: "库房1",
          value: "1",
        },
        {
          name: "库房2",
          value: "2",
        },
      ],
      wsdFormSelect: "库房1",
      wsdForm: {
        humidity: "", // 湿度
        temperature: "", // 温度
      },
      newData: "",
      approvalData: [],
    };
  },
  computed: {
    optionLeft() {
      return {
        direction: 2,
        limitMoveNum: 1,
        step: 0.6,
        hoverStop: true,
      };
    },
    theme() {
      // 屏蔽掉背景颜色换色 card;
      //return this.$store.state.settings.theme;
    },
  },
  methods: {
    // 取消
    cancel() {
      this.isShowVisible = false;
    },
    // 点击开始按钮
    clickOpen() {
      this.isShowVisible = true;
    },
    // 获取温湿度接口
    temperatureAndHumidity() {
      temperatureAndHumidity()
        .then((res) => {
          let resultData = res.body || {};
          this.wsdForm.humidity = resultData.humidity;
          this.wsdForm.temperature = resultData.temperature;
        })
        .catch((error) => {});
    },
    jumpApproval(item) {
      if (item == "aa") {
        this.$router.push({ name: "approval" });
      } else {
        this.$router.push({ name: "approval", params: { id: item.id } });
      }
    },
    // 获取审批中心数据
    getApprovalData() {
      getApprovalData({
        limit: 5000,
        page: 1,
        userId: sessionStorage.getItem("userid"),
      }).then((res) => {
        if (res.code == 100) {
          this.approvalData = res.body.list;
        }
      });
    },
    jumpMenu(type) {
      let routerList = JSON.parse(sessionStorage.getItem("routerIdList"));
      let routerValue = []; // 存储路由对应的id
      for (let item in routerList) {
        routerValue.push(routerList[item]);
      }
      if (type == 232) {
        // 档号设置
        if (routerValue.includes(type)) {
          this.$router.push({ path: "/system-management/archiveNoSettings" });
        } else {
          this.$message({ type: "warning", message: "此用户无权限访问" });
        }
      } else if (type == 282) {
        // 长期保存库
        if (routerValue.includes(type)) {
          this.$router.push({
            path: "/archives-management/fileManagement/saveLibrary",
          });
        } else {
          this.$message({ type: "warning", message: "此用户无权限访问" });
        }
      } else if (type == 174) {
        // 全文检索
        if (routerValue.includes(type)) {
          this.$router.push({
            path: "/archiveUtilize/archivesRetrieval/fullTextSearch",
          });
        } else {
          this.$message({ type: "warning", message: "此用户无权限访问" });
        }
      } else if (type == 153) {
        // 未入库著录
        if (routerValue.includes(type)) {
          this.$router.push({
            path: "/archives-management/fileManagement/notStoredArchives",
          });
        } else {
          this.$message({ type: "warning", message: "此用户无权限访问" });
        }
      } else if (type == 155) {
        // 已入库数据浏览
        if (routerValue.includes(type)) {
          this.$router.push({
            path: "/archives-management/fileManagement/dataBrowsing",
          });
        } else {
          this.$message({ type: "warning", message: "此用户无权限访问" });
        }
      } else if (type == 276) {
        if (routerValue.includes(type)) {
          this.$router.push({
            path: "/archives-management/ungroupedManagement/information",
          });
        } else {
          this.$message({ type: "warning", message: "此用户无权限访问" });
        }
      }
    },
    // 硬盘容量剩余量提醒
    getDiskCapacityResidueRemind() {
      getDiskCapacityResidueRemind()
        .then((res) => {
          if (res.code == 101) {
            let message = res.msg;
            this.diskTipMessage = res.msg;
            this.$alert(
              message,
              "提示",
              {
                confirmButtonText: "取消",
              },
              4000
            );
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    sunAll(val) {
      this.sumNum = val;
    },
    sunYW(val) {
      this.numYW = val;
    },
    getTitle() {
      this.newData = getCurrentTime();
      this.newsList = [];
      let date = new Date();
      let year = date.getFullYear();
      let mouth = date.getMonth() + 1;
      let day = date.getDate();
      if (mouth < 10) {
        mouth = "0" + mouth;
      }
      if (day < 10) {
        day = "0" + day;
      }
      let str = "星期" + "日一二三四五六".charAt(new Date().getDay());
      this.title = "今日," + year + "年" + mouth + "月" + day + "日" + str;
      let obj = {
        title: this.title + " " + "   欢迎您使用典策综合档案管理系统。",
      };
      this.newsList.push(obj);
    },
    btnNumStatus() {
      this.numStatus = !this.numStatus;
    },
    changewsdForm(val) {
      if (val == 1) {
        this.wsdForm.humidity = 13;
        this.wsdForm.temperature = 23;
      } else {
        this.wsdForm.humidity = 15;
        this.wsdForm.temperature = 21;
      }
    },
    // 档案查询跳转
    jump() {
      this.$router.push({ name: "fullTextSearch" });
    },
    // 获取借阅总数
    getBorrowerTotal() {
      let params = {
        userId: sessionStorage.getItem("userid"),
      };
      if (params.userId == null) {
        return;
      }
      getData(params).then((res) => {
        this.borrowNum = res.body.total;
      });
    },
    // 获取温湿度数据
    getHumidity() {
      getHumidity()
        .then((res) => {
          let result = res.body.data || [];
          result.forEach((item) => {
            if (item.temperature >= 14 && item.temperature <= 24) {
              item.isHigh = true;
            } else {
              item.isHigh = false;
            }
            if (item.humidity >= 45 && item.humidity <= 60) {
              item.isHumidityStatus = true;
            } else {
              item.isHumidityStatus = false;
            }
          });
          this.temperatureArr = result;
        })
        .catch((error) => {
          message("warning", error, 3000);
        });
    },
  },
  mounted() {
    //this.changewsdForm(1);
    this.getHumidity();
    this.getApprovalData();
    this.temperatureAndHumidity();
    setTimeout(() => {
      this.getDiskCapacityResidueRemind();
    }, 3000);
  },
  created() {
    this.getTitle();
    this.getBorrowerTotal();
    this.storage = this.option[0].value;
  },
};
</script>
<style lang="scss" scoped>
::v-deep {
  .el-card__body {
    padding: 15px;
    height: 100%;
  }
  .t_content {
    width: 100%;
    height: auto;
    .t_content_ul {
      list-style: none;
      width: 100%;
      li {
        height: 30px;
        line-height: 30px;
        font-size: 16px;
        .t_span {
          padding-left: 10px;
          .span-high {
            color: #f60;
            font-weight: 600;
          }
        }
        .v_span {
          padding-left: 10px;
          .span-high {
            color: #f60;
            font-weight: 600;
          }
        }
      }
    }
    .center_time {
      font-size: 14px;
      letter-spacing: 1px;
      text-align: center;
      color: #a8d4f9;
    }
  }
}

.emptyGif {
  display: block;
  width: 45%;
  margin: 0 auto;
}

.dashboard-editor-container {
  //background-color: #2f406c;
  background-color: #f3f3f3;
  padding: 20px 10px;
  .header-top {
    width: 100%;
    //height:80px;
    border-radius: 8px;
    background-color: #e1eaf9;
    padding: 10px;
    margin-bottom: 10px;
    transition: all 0.3s ease;
    &:hover {
      -webkit-transform: translateY(-2px) scale(1.01);
      -moz-transform: translateY(-2px) scale(1.01);
      -ms-transform: translateY(-2px) scale(1.01);
      -o-transform: translateY(-2px) scale(1.01);
      transform: translateY(-2px) scale(1.01);
      -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
      box-shadow: 0 5px 10px #0003;
    }
    .p-title {
      color: #3f6ad8;
      line-height: 30px;
      margin: 0;
      font-size: 16px;
    }
    .p-text {
      color: #303133;
      font-size: 16px;
      margin: 0;
      line-height: 30px;
    }
  }
  .task-contentc {
    width: 100%;
    height: 80px;
    border-radius: 8px;
    margin-bottom: 10px;
    .task-c {
      width: 100%;
      height: 80px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .task-item {
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        flex-direction: column;
        border: 1px solid #ddd;
        width: 120px;
        border-radius: 10px;
        cursor: pointer;
        padding: 5px 0;
        transition: all 0.3s ease-in-out;
        flex: 1;
        margin-right: 10px;
        &:last-child {
          margin-right: 0;
        }
        &:hover {
          -webkit-transform: translateY(-2px) scale(1.01);
          -moz-transform: translateY(-2px) scale(1.01);
          -ms-transform: translateY(-2px) scale(1.01);
          -o-transform: translateY(-2px) scale(1.01);
          transform: translateY(-2px) scale(1.01);
          -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
          box-shadow: 0 5px 10px #0003;
          span {
            font-size: 16px;
          }
        }
        svg {
          font-size: 30px;
          fill: #fff;
        }
        span {
          font-size: 14px;
          color: #fff;
        }
      }
      .bg-red {
        background-color: #f53e56;
      }
      .bg-green {
        background-color: #9358e3;
      }
      .bg-blue {
        background-color: #125afb;
      }
      .bg-orange {
        background-color: #12c3b1;
      }
      .bg-gre {
        background-color: #80c342;
      }
      .bg-reda {
        background-color: #f7bb1e;
      }
    }
  }
  .task-content {
    width: 100%;
    height: 150px;
    border-radius: 8px;
    background-color: #fff;
    margin-bottom: 10px;
    transition: all 0.3s ease;
    &:hover {
      -webkit-transform: translateY(-2px) scale(1.01);
      -moz-transform: translateY(-2px) scale(1.01);
      -ms-transform: translateY(-2px) scale(1.01);
      -o-transform: translateY(-2px) scale(1.01);
      transform: translateY(-2px) scale(1.01);
      -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
      box-shadow: 0 5px 10px #0003;
    }
    .title {
      width: 100%;
      height: 50px;
      border-bottom: 1px solid #f2f6fc;
      padding: 10px 20px;
      color: #303133;
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }
    .task-c {
      width: 100%;
      height: 95px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding: 5px 10px 0;
      .task-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 80px;
        height: 80px;
        border: 1px solid #e1e1e1;
        border-radius: 8px;
        background-color: #fff;
        margin-right: 10px;
        cursor: pointer;
        &:hover {
          border-color: #409eff;
          background-color: #409eff;
          color: #fff;
          svg {
            fill: #fff;
          }
        }
        svg {
          font-size: 20px;
          fill: #303133;
        }
        span {
          font-size: 14px;
          padding-top: 10px;
        }
      }
    }
  }
  .search-content {
    width: 100%;
    // height: 300px;
    height: 290px;
    border-radius: 8px;
    background-color: #fff;
    margin-bottom: 10px;
    transition: all 0.3s ease;
    &:hover {
      -webkit-transform: translateY(-2px) scale(1.01);
      -moz-transform: translateY(-2px) scale(1.01);
      -ms-transform: translateY(-2px) scale(1.01);
      -o-transform: translateY(-2px) scale(1.01);
      transform: translateY(-2px) scale(1.01);
      -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
      box-shadow: 0 5px 10px #0003;
    }
    .title {
      width: 100%;
      height: 50px;
      border-bottom: 1px solid #f2f6fc;
      padding: 10px 20px;
      color: #303133;
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }
    .search-c {
      height: calc(100% - 50px);
      .condition {
        padding: 8px 0;
      }
      .search-d {
      }
    }
  }
  .approver-div {
    width: 100%;
    // height: 480px;
    height: 510px;
    border-radius: 8px;
    background-color: #fff;
    margin-bottom: 10px;
    transition: all 0.3s ease;
    &:hover {
      -webkit-transform: translateY(-2px) scale(1.01);
      -moz-transform: translateY(-2px) scale(1.01);
      -ms-transform: translateY(-2px) scale(1.01);
      -o-transform: translateY(-2px) scale(1.01);
      transform: translateY(-2px) scale(1.01);
      -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
      box-shadow: 0 5px 10px #0003;
    }
    .title {
      width: 100%;
      height: 50px;
      border-bottom: 1px solid #f2f6fc;
      padding: 10px 20px;
      color: #303133;
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }
    .approver-ul {
      padding: 10px 10px 0;
      margin: 0;
      height: 425px;
      li {
        display: flex;
        flex-direction: column;
        font-size: 14px;
        width: 100%;
        height: 75px;
        justify-content: space-between;
        border-radius: 8px;
        padding: 10px;
        background-color: #f5f7fa;
        margin-bottom: 10px;
        border: 1px solid #f5f7fa;
        cursor: pointer;
        &:hover {
          border: 1px solid #67c23a;
        }
        .info {
          color: #909399;
          font-size: 13px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
    .no-data {
      width: 100%;
      height: 100%;
      text-align: center;
      svg {
        width: 200px;
        height: 200px;
      }
      p {
        color: #e1e1e1;
        font-size: 20px;
      }
    }
  }
  .charts-m {
    width: 100%;
    height: 300px;
    border-radius: 8px;
    background-color: #fff;
    margin-bottom: 10px;
    transition: all 0.3s ease;
    &:hover {
      -webkit-transform: translateY(-2px) scale(1.01);
      -moz-transform: translateY(-2px) scale(1.01);
      -ms-transform: translateY(-2px) scale(1.01);
      -o-transform: translateY(-2px) scale(1.01);
      transform: translateY(-2px) scale(1.01);
      -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
      box-shadow: 0 5px 10px #0003;
    }
    .title {
      width: 100%;
      height: 50px;
      border-bottom: 1px solid #f2f6fc;
      padding: 10px 20px;
      color: #303133;
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }
    .charts-c {
      width: 100%;
      height: calc(100% - 50px);
      padding: 10px;
    }
  }
  .header {
    display: flex;
    justify-content: space-between;
    // background: red;
    height: 65px;

    .left {
      padding: 5px;

      .title {
        font-size: 19px;
        font-weight: 600;
        padding: 2px;
      }
    }
  }
  .header-button {
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
    ::v-deep {
      .el-button {
        border-width: 0;
        span {
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 20px;
          .icon_search {
            display: inline-block;
            width: 32px;
            height: 32px;
            background: url("../../../assets/img/t_01.png") no-repeat;
            background-position: center;
            background-size: cover;
          }
          .icon_d_t {
            display: inline-block;
            width: 32px;
            height: 32px;
            background: url("../../../assets/img/t_03.png") no-repeat;
            background-position: center;
            background-size: cover;
          }
          .icon_y_t {
            display: inline-block;
            width: 32px;
            height: 32px;
            background: url("../../../assets/img/t_04.png") no-repeat;
            background-position: center;
            background-size: cover;
          }
          .icon_j_t {
            display: inline-block;
            width: 32px;
            height: 32px;
            background: url("../../../assets/img/t_02.png") no-repeat;
            background-position: center;
            background-size: cover;
          }
          .span-text {
            display: inline-block;
            margin-left: 10px;
          }
        }
        .btn-info {
          display: flex;
          flex-direction: column;
          margin: 0 0 0 10px;
          padding: 0;
        }
      }
    }
    .p-linear {
      transition: all 0.3s ease;
      background: repeating-linear-gradient(to right, #4a92f7, #60b8f8);
      &:hover {
        -webkit-transform: translateY(-2px) scale(1.01);
        -moz-transform: translateY(-2px) scale(1.01);
        -ms-transform: translateY(-2px) scale(1.01);
        -o-transform: translateY(-2px) scale(1.01);
        transform: translateY(-2px) scale(1.01);
        -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        box-shadow: 0 5px 10px #0003;
      }
    }
    .w-linear {
      transition: all 0.3s ease;
      background: repeating-linear-gradient(to right, #e79582, #faac6a);
      &:hover {
        -webkit-transform: translateY(-2px) scale(1.01);
        -moz-transform: translateY(-2px) scale(1.01);
        -ms-transform: translateY(-2px) scale(1.01);
        -o-transform: translateY(-2px) scale(1.01);
        transform: translateY(-2px) scale(1.01);
        -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        box-shadow: 0 5px 10px #0003;
      }
    }
    .s-linear {
      transition: all 0.3s ease;
      background: repeating-linear-gradient(to right, #4ec7d4, #73cda3);
      &:hover {
        -webkit-transform: translateY(-2px) scale(1.01);
        -moz-transform: translateY(-2px) scale(1.01);
        -ms-transform: translateY(-2px) scale(1.01);
        -o-transform: translateY(-2px) scale(1.01);
        transform: translateY(-2px) scale(1.01);
        -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        box-shadow: 0 5px 10px #0003;
      }
    }
    .d-linear {
      transition: all 0.3s ease;
      background: repeating-linear-gradient(to right, #8a91e7, #c3b3fd);
      &:hover {
        -webkit-transform: translateY(-2px) scale(1.01);
        -moz-transform: translateY(-2px) scale(1.01);
        -ms-transform: translateY(-2px) scale(1.01);
        -o-transform: translateY(-2px) scale(1.01);
        transform: translateY(-2px) scale(1.01);
        -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        box-shadow: 0 5px 10px #0003;
      }
    }
  }

  .chart_box {
    padding: 30px 0 0;
    height: calc(100% - 23px);
  }

  .heard_title {
    display: flex;
    justify-content: space-between;

    .title-box {
      .title {
        height: 35px;
        font-size: 20px;
        padding: 2px 10px;
        letter-spacing: 3px;
      }
    }

    .heardBtns {
      border-radius: 15px;
      padding: 5px 10px;
    }

    .heardBtn {
      border-radius: 15px;
      background: #2ec7c9;
      color: #fff;
      padding: 5px 10px;
      border: none;
    }
  }

  .centerBox {
    height: 300px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;

    .card {
      background: rgb(252, 255, 255);
      width: 32.5%;
      transition: all 0.3s ease;
      &:hover {
        -webkit-transform: translateY(-2px) scale(1.01);
        -moz-transform: translateY(-2px) scale(1.01);
        -ms-transform: translateY(-2px) scale(1.01);
        -o-transform: translateY(-2px) scale(1.01);
        transform: translateY(-2px) scale(1.01);
        -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        box-shadow: 0 5px 10px #0003;
      }
    }

    .card_two {
      background: rgb(252, 255, 255);
      width: 65.5%;
    }
  }

  .centerBox_two {
    // height: 43%;
    height: 300px;
    display: flex;
    justify-content: space-between;

    .card {
      background: rgb(252, 255, 255);
      width: 49%;
    }

    .card_two {
      background: rgb(252, 255, 255);
      width: 32.5%;
      transition: all 0.3s ease;
      &:hover {
        -webkit-transform: translateY(-2px) scale(1.01);
        -moz-transform: translateY(-2px) scale(1.01);
        -ms-transform: translateY(-2px) scale(1.01);
        -o-transform: translateY(-2px) scale(1.01);
        transform: translateY(-2px) scale(1.01);
        -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        box-shadow: 0 5px 10px #0003;
      }
    }

    .center_two {
      // padding: 45px 20px 30px 20px;
      display: flex;
      justify-content: space-around;
      // height: calc((100vh - 300px)/2);
      height: 70%;

      /* .center_two_box:hover {
          box-shadow: gray;
          background: rgba(237, 255, 254, 0.6);
          // width: 40%;
        } */

      .center_two_box {
        padding: 10px 6px;
        //  background: rgb(253, 253, 253);
        border-radius: 5px;
        width: 49%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        color: #a8d4f9;

        .img_ws {
          width: 40%;
        }

        .wd {
          font-size: 55px;
        }

        .sd {
          font-size: 55px;
        }
      }
    }

    .center_time {
      //font-weight: 600;
      font-size: 14px;
      letter-spacing: 1px;
      text-align: center;
      color: #a8d4f9;

      // .center_time_title {
      //font-size: 14px;
      //letter-spacing: 4px;
      // }
    }
  }

  .centerBox_three {
    height: 250px;
    display: flex;
    justify-content: space-around;

    .card {
      width: 32%;

      .heard_title {
        display: flex;
        justify-content: space-between;

        .title-box {
          .title {
            height: 35px;
            font-size: 20px;
            padding: 2px 10px;
            letter-spacing: 3px;
          }
        }
      }
    }

    .card_two {
      width: 65.5%;
    }
  }

  // .el-card {
  //   background-color: #1e253f !important;
  //   border: none !important;
  //   color: #333 !important;
  // }
}

.seamless-warp2 {
  overflow: hidden;
  height: 32px;
  width: 680px;

  ul.item {
    width: 650px;
    list-style: none;
    display: flex;

    li {
      color: #ff0d0d;
      float: left;
      margin-right: 30px;
      // line-height: 32px;
      font-size: 15px;
      font-weight: 600;
      letter-spacing: 3px;
    }
  }
}
</style>
