src/router/index.js

@@ -1,20 +1,10 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
-
 import MyLayout from "@/components/MyLayout";
-// import notFound from "@/components/404";
 
 Vue.use(VueRouter);
 
 const routes = [
-  // {
-  //   //这里列举的是 Home 页也是“处理中心”的列表页，用 redirect 重定向到配置“处理中心”的 path 上去
-  //   path: "/",
-  //   name: "Home",
-  //   meta: { hidden: true },
-  //   redirect: "/dealCenter",
-  // },
-
   //因为导航到的每个页面，都包含了导航栏、头部、底部、主体部分（统一到MyLayout组件中）
   //所以我每个菜单都会让根菜单component: MyLayout，再用 redirect 找到原本component的主体页面。（有多个子菜单的 redirect 可以省略）
   {
@@ -22,158 +12,14 @@ const routes = [
     component: MyLayout,
     redirect: '/ordinaryPage',
     children: [
-      {
-        path: "home",
-        meta: { title: "处理中心列表" },
-        component: () => import("@/views/dealCenter/list.vue"),
-      },
       {
         path: "ordinaryPage",
-        component: () => import("@/views/ordinaryPage"),
-        meta: {
-          title: "普通模式",
-          hidden: false,
-          leaf: false,
-        },
-      },
-    
-      {
-        path: "originPage",
-        component: () => import("@/views/originPage/list.vue"),
-        meta: {
-          title: "远程模式",
-          hidden: false,
-          leaf: false,
-        },
-      },
-      {
-        path: "squarePage",
-        component: () => import("@/views/squarePage/list.vue"),
-        meta: {
-          title: "九宫格模式",
-          hidden: false,
-          leaf: false,
-        },
-      },
-      {
-        path: "task1",
-        component: () => import("@/views/task1/list.vue"),
-        meta: {
-          title: "任务1",
-          hidden: false,
-          leaf: false,
-        },
-      },
-      {
-        path: "task2",
-        component: () => import("@/views/task2/list.vue"),
-        meta: {
-          title: "任务2",
-          hidden: false,
-          leaf: false,
-        },
-      },
-    ],
-  },
-
- 
-  // {
-  //   path: "/myWorkbench",
-  //   name: "myWorkbench",
-  //   component: MyLayout,
-  //   redirect: "/myWorkbench/workbenchOne",
-  //   meta: {
-  //     title: "我的工作台",
-  //     hidden: false,
-  //     leaf: false,
-  //   },
-  //   children: [
-  //     {
-  //       path: "workbenchOne",
-  //       name: "workbench_one",
-  //       meta: { title: "工作台一" },
-  //       component: () => import("@/views/myWorkbench/workbenchOne.vue"),
-  //     },
-  //     {
-  //       path: "workbenchTwo",
-  //       name: "workbench_two",
-  //       meta: { title: "工作台二" },
-  //       component: () => import("@/views/myWorkbench/workbenchTwo.vue"),
-  //     },
-  //     {
-  //       path: "workbenchThr",
-  //       name: "workbench_thr",
-  //       meta: { title: "工作台三" },
-  //       component: () => import("@/views/myWorkbench/workbenchThr.vue"),
-  //     },
-  //   ],
-  // },
-
-  // {
-  //   path: "/infoCenter",
-  //   name: "infoCenter",
-  //   component: MyLayout,
-  //   redirect: "/infoCenter/infoOne",
-  //   meta: {
-  //     title: "消息中心",
-  //     hidden: false,
-  //     leaf: false,
-  //   },
-  //   children: [
-  //     {
-  //       path: "infoOne",
-  //       name: "info_one",
-  //       meta: { title: "消息一" },
-  //       component: () => import("@/views/infoCenter/infoOne.vue"),
-  //     },
-  //     {
-  //       path: "infoTwo",
-  //       name: "info_two",
-  //       meta: { title: "消息二" },
-  //       component: () => import("@/views/infoCenter/infoTwo.vue"),
-  //     },
-  //     {
-  //       path: "infoThr",
-  //       name: "info_thr",
-  //       meta: { title: "消息三" },
-  //       component: () => import("@/views/infoCenter/infoThr.vue"),
-  //     },
-  //   ],
-  // },
-
-  // {
-  //   path: "/orderManage",
-  //   name: "orderManage",
-  //   component: MyLayout,
-  //   redirect: "/orderManage/list",
-  //   meta: {
-  //     title: "订单管理",
-  //     hidden: false,
-  //     leaf: true,
-  //   },
-  //   children: [
-  //     {
-  //       path: "list",
-  //       name: "orderManage_list",
-  //       meta: { title: "订单管理列表" },
-  //       component: () => import("@/views/orderManage/list.vue"),
-  //     },
-  //   ],
-  // },
-  // {
-  //   //404页面的配置通常放到最末尾，具体查看上面链接
-  //   path: "*",
-  //   name: "notFound",
-  //   meta: { hidden: true },
-  //   component: notFound,
-  // },
+        component: () => import("@/views/ordinaryPage")
+      }
+    ]
+  }
 ];
 
-// const routerPush = VueRouter.prototype.push;
-// VueRouter.prototype.push = function (location) {
-//   return routerPush.call(this, location).catch((error) => error);
-// };
-
 const router = new VueRouter({
   mode: "history",
   base: process.env.BASE_URL,

src/views/dealCenter/list.vue

@@ -1,100 +0,0 @@
-<template>
-  <div class="container">
-    <SearchBarMain/>
-    <div class="vr-bg" id="vr-bg-container"></div>
-    <div
-      id="player"
-      style="width: 100%; height: 100%"
-    >
-  </div>
-  <bench-detail :is-detail-visible="isDetailVisible" :is-remote-btn-visible="isRemoteBtnVisible" :closeDetail="closeDetail" :bench="currentBench">
-  </bench-detail>
-  </div>
-</template>
-
-<script>
-import { FBXLoader } from "../../FBXLoader.js";
-import { uwbMain } from "../../uwb-sample";
-import BenchDetail from '../../components/BenchDetail'
-import { mapState } from "vuex"
-import SearchBarMain from '../../components/SearchBarMain'
-export default {
-  components: {BenchDetail, SearchBarMain},
-  data() {
-    return {
-      isDetailVisible: false,
-      isRemoteBtnVisible: false,
-      isOpen: false,
-      currentBench: {
-        name: "Bench 2",
-        Market: "Project B",
-        Platform: "Carline B",
-        Project: "Market B",
-        Cluster: "SW 2",
-        AED_SW: "Carline B",
-        MU_SW: "Market B",
-        Repository: "SW 2",
-        Variant: "SW 2",
-        status: "Status B",
-        slave:[
-          {
-            status:"Status B",
-            ip:"Status B",
-            mac:"Status B",
-          },
-          {},
-          {},
-        ]
-      },
-    };
-  },
-  computed: {
-    tabClass(){
-        return this.currentBench.type == 2 ? 'short': 'long'
-    },
-    ...mapState({
-        benchList: state => {
-            return state.benchList.benchList;
-        },
-        issueList: state => state.issueList.issueList
-    })
-  },
-  created() {
-    console.log("Alex13 created")
-    window.handleListClick = this.handleListClick;
-    uwbMain(window.innerWidth, window.innerHeight, "panorama");
-    this.$store.dispatch('benchList/fetchBenchList');
-    this.$store.dispatch('issueList/fetchIssueList', {
-        "bench_id": "219",
-        "page_num": 1,
-        "page_size": 10,
-        "processor": 0,
-        "ticket_status": 0,
-        "ticket_type": 0
-    })
-  },
-  mounted() {
-    
-  },
-  methods: {
-    closeDetail() {
-      this.isDetailVisible = false;
-      this.isRemoteBtnVisible = false;
-      setTimeout(
-        function () {
-          let player = document.getElementById('player')
-          player.style.display="block";
-        },
-        5
-      );
-        
-    },
-    handleListClick(benchId, showRemoteButton) {
-      this.currentBench = this.benchList.find(b => b.id == benchId);
-      this.isRemoteBtnVisible = showRemoteButton;
-      this.isDetailVisible = true;
-    }
-  },
-};
-</script>
-

src/views/originPage/components/DropDown/index.vue

@@ -1,45 +0,0 @@
-<!-- Dropdown.vue -->
-<template>
-  <transition name="slide">
-    <div class="dropdown" v-if="isOpen">
-      <slot name="table"></slot>
-    </div>
-  </transition>
-</template>
-
-<script>
-export default {
-  props: {
-    isOpen: Boolean
-  },
-};
-</script>
-
-<style>
-.dropdown {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border-top: none;
-    z-index: 3;
-    border-radius: 30px;
-    background: rgba(0,0,0,.2);
-    backdrop-filter: blur(5px);
-}
-
-
-
-
-.slide-enter-active,
-.slide-leave-active {
-  transition: all 0.3s;
-}
-
-.slide-enter,
-.slide-leave-to {
-  transform: translateY(-120%);
-  opacity: 0;
-}
-</style>

src/views/originPage/components/ImageList/index.vue

@@ -1,142 +0,0 @@
-<template>
-  <div class="image-box">
-    <button @click="prevPage" class="slide-right"><div class="triangle"></div></button>
-    <transition-group name="slide" mode="out-in" class="image-list">
-      <div v-for="(image, index) in paginatedImages" :key="index" class="image-item" @click="handleImageClick(index)">
-        <img :src="image.url" :alt="image.alt">
-      </div>
-    </transition-group>
-    <!-- <span>{{ currentPage }}</span> -->
-    <button @click="nextPage" class="slide-left"><div style="transform: rotate(180deg)" class="triangle"></div></button>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    images: {
-      type: Array,
-      required: true
-    },
-    pageSize: {
-      type: Number,
-      required: true
-    },
-    currentPage: {
-      type: Number,
-      required: true
-    }
-  },
-  computed: {
-    paginatedImages() {
-      const startIndex = (this.currentPage - 1) * this.pageSize;
-      const endIndex = startIndex + this.pageSize;
-      return this.images.slice(startIndex, endIndex);
-    }
-  },
-  methods: {
-    handleImageClick(index) {
-      this.$emit("handleImageClick", index);
-    },
-    prevPage() {
-      this.$emit("prev-page");
-    },
-    nextPage() {
-      this.$emit("next-page");
-    }
-  }
-};
-</script>
-
-<style>
-.image-box{
-  display: flex;
-}
-.slide-right,.slide-left{
-  width: 3.95vw;
-  height: 100%;
-
-
-
-}
-.triangle {
-  position: relative;
-  width: 0;
-  height: 0;
-  border-top: 15px solid transparent;
-  border-bottom: 15px solid transparent;
-  border-right: 15px solid #CCCCCC;
-  background: linear-gradient(to left, #FFFFFF, #CCCCCC);
-}
-
-.triangle::before {
-  content: "";
-  position: absolute;
-  top: -15px;
-  left: 15px;
-  width: 0;
-  height: 0;
-  border-top: 15px solid transparent;
-  border-bottom: 15px solid transparent;
-  border-right: 15px solid #FFFFFF;
-  transform: translateX(-100%);
-}
-.image-list {
-  height: 100%;
-  flex: 1;
-  display: flex;
-  justify-content: center;
-}
-
-.image-item {
-  margin-right: 1.04vw;
-  cursor: pointer;
-  width: 9.79vw;
-  height: 100%;
-  border-radius: 0.78vw;
-}
-
-.image-item img {
-  max-width: 100%;
-  height: auto;
-}
-
-.slide-enter-active,
-.slide-leave-active {
-  transition: transform 0.3s;
-}
-
-.slide-enter {
-  transform: translateX(100%);
-}
-
-.slide-leave-to {
-  transform: translateX(-100%);
-}
-
-.slide-right-enter-active,
-.slide-right-leave-active {
-  transition: transform 0.3s;
-}
-
-.slide-right-enter {
-  transform: translateX(-100%);
-}
-
-.slide-right-leave-to {
-  transform: translateX(100%);
-}
-
-.slide-left-enter-active,
-.slide-left-leave-active {
-  transition: transform 0.3s;
-}
-
-.slide-left-enter {
-  transform: translateX(100%);
-}
-
-.slide-left-leave-to {
-  transform: translateX(-100%);
-}
-</style>

src/views/originPage/components/TableComponent/index.vue

@@ -1,69 +0,0 @@
-<template>
-  <div class="table-box">
-    <el-table :data="data" :row-class-name="rowClassName"  style="background-color: transparent;">
-      <el-table-column label="Bench Name" prop="name"></el-table-column>
-      <el-table-column label="Project" prop="Project" :filters="filters"></el-table-column>
-      <el-table-column label="Carline" prop="Carline" :filters="filters"></el-table-column>
-      <el-table-column label="Market" prop="Market" :filters="filters"></el-table-column>
-      <el-table-column label="SW" prop="MU_SW"></el-table-column>
-      <el-table-column label="Status" prop="status" :filters="filters"></el-table-column>
-      <el-table-column label="Action">
-        <template slot-scope="scope">
-          <el-button type="primary" circle></el-button>
-          <el-button type="success" circle></el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    data: {
-      type: Array,
-      required: true
-    },
-    filters: {
-      type: Array,
-      required: true
-    },
-    rowClassName: {
-      type: Function,
-      required: true
-    },
-  }
-};
-</script>
-<style>
-.el-table__header-wrapper,.el-table__body-wrapper,.el-table__cell,tr {
-  background-color: transparent !important;
-}
-.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
-  border-bottom: 1px solid #707070!important;
-}
-.el-table--border::after, .el-table--group::after, .el-table::before{
-  background-color: transparent;
-}
-
-.table-box{
-    padding: 10px;
-    background: rgba(0,0,0,0.5);
-    border-radius: 30px;
-    border: 1px solid #707070;
-    color: #DFDFDF;
-}
-.table-box:before{
-  background: linear-gradient(322deg, rgba(255,255,255,0.63) 0%, rgba(255,255,255,0) 73%, rgba(84,84,84,0) 100%);
-  border-radius: 30px;
-  opacity: 0.55;
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: -1;
-}
-
-</style>

src/views/originPage/index.less

@@ -1,201 +0,0 @@
-.origin-container {
-  display: flex;
-  // float:right;
-  justify-content: flex-end;
-  height: 100%;
-  .origin-left {
-    display: flex;
-    width: 63.48vw;
-    justify-content: center;
-    flex-wrap: wrap;
-    .search-container {
-      width: 44.9vw;
-      margin-top: 11.29vh;
-      margin-bottom: 2.13vh;
-    }
-    .origin-map {
-      position: relative;
-      width: 63.34vw;
-      height: 52.63vh;
-      border-radius: 40px;
-      overflow: hidden;
-      background-color: rgba(117, 117, 117, 0.8);
-      // img {
-      //   width: 100%;
-      //   height: 102%;
-      // }
-    }
-    .image-container {
-      width: 100%;
-      height: 11.66vh;
-      margin-top: 6.38vh;
-    }
-
-    .bench-button {
-      width: 41.14vw;
-      height: 6.67vh;
-      line-height: 6.67vh;
-      background: linear-gradient(
-        358deg,
-        rgba(255, 255, 255, 0.63) 0%,
-        rgba(255, 255, 255, 0) 66%,
-        rgba(84, 84, 84, 0) 100%
-      );
-      border-radius: 79px 79px 79px 79px;
-      position: relative;
-      top: -20.37vh;
-      z-index: 3;
-      color: #fff;
-      display: flex;
-      align-items: center;
-      .btn-item {
-        height: 100%;
-        img {
-          cursor: pointer;
-          width: 2.23vw;
-        }
-      }
-      i {
-        font-size: 30px;
-      }
-    }
-    .bench-button:before {
-      background: linear-gradient(
-        179deg,
-        rgba(255, 255, 255, 0.36) 0%,
-        rgba(255, 255, 255, 0) 100%
-      );
-      border-radius: 79px 79px 79px 79px;
-      opacity: 1;
-      content: "";
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      z-index: -1;
-      backdrop-filter: blur(2px);
-    }
-  }
-
-  .origin-right {
-    // margin-top: 11.29vh;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    padding: 0 20px;
-  }
-
-  .origin-basic {
-    height: 130px;
-    margin-bottom: 1.85vh;
-    // background: rgba(0, 0, 0, 0.49);
-    border-radius: 2.08vw;
-    // border: 1px solid #707070;
-    margin-left: 1.56vw;
-    
-  }
-  .origin-list {
-    width: 26.36vw;
-    // height: 60.92vh;
-    margin-left: 1.56vw;
-  }
-  .origin-list {
-    .item-box {
-      width: 100%;
-      padding: 1.04vw 1.66vh 1.04vw;
-      background: rgba(0, 0, 0, 0.2);
-      border-radius: 20px 20px 20px 20px;
-      opacity: 1;
-      display: flex;
-      justify-content: space-between;
-      .item-right {
-        width: 12vw;
-      }
-      .item-title {
-        height: 4.17vh;
-        font-size: 28px;
-        font-family: PingFang SC-Bold, PingFang SC;
-        font-weight: 400;
-        color: #fbfbfb;
-        line-height: 4.17vh;
-      }
-      .item-description {
-        margin-top: 0.37vh;
-        height: 2.31vh;
-        font-size: 16px;
-        font-family: PingFang SC-Regular, PingFang SC;
-        font-weight: 400;
-        color: #dfdfdf;
-        line-height: 2.31vh;
-      }
-      .item-tag {
-        display: flex;
-        margin-top: 0vh;
-        width: 10vw;
-        .tag {
-          margin-bottom: 0.2vh;
-          //width: 3.13vw;
-          font-size: xx-small;
-          text-align: center;
-          background-color: #5d9a6d;
-          border-radius: 10px;
-          color: #f2f2f2;
-          margin-right: 0.2vw;
-          padding: 5px 10px;
-        }
-      }
-    }
-  }
-}
-
-// .ready {
-//   color: #65c94c !important;
-//   font-size: 30px;
-// }
-// .occupied {
-//   color: #478bc3 !important;
-//   font-size: 30px;
-// }
-// .offline {
-//   color: #cdd0cf !important;
-//   font-size: 30px;
-// }
-// .offline {
-//   color: red !important;
-//   font-size: 30px;
-// }
-
-.item-image {
-  width: 7.29vw;
-  height: 7.29vw;
-  border-radius: 15px;
-  border: 2px solid #dfdfdf;
-  img {
-    width: 100%;
-    height: 100%;
-    border-radius: 15px;
-  }
-}
-
-
-*::-webkit-scrollbar {
-  /*滚动条整体样式*/
-  width: 6px;
-  /*高宽分别对应横竖滚动条的尺寸*/
-  height: 1px;
-}
-
-*::-webkit-scrollbar-thumb {
-  /*滚动条里面小方块*/
-  border-radius: 5px;
-  box-shadow: inset 0 0 5px rgba(180, 180, 180, 0.5);
-  background: rgba(180, 180, 180, 0.2);
-}
-
-*::-webkit-scrollbar-track {
-  /*滚动条里面轨道*/
-  /* box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); */
-  border-radius: 10px;
-  background: transparent;
-}

src/views/squarePage/index.less

@@ -1,171 +0,0 @@
-.square-container {
-  display: flex;
-  float: right;
-
-  .square-left {
-    display: flex;
-    width: 63.48vw;
-    flex-direction: column;
-    align-items: center;
-    .search-container {
-      height: 7.4vh;
-      width: 44.9vw;
-      margin-top: 11.29vh;
-      margin-bottom: 2vh;
-    }
-
-    .square-map {
-      overflow-y: auto;
-      position: relative;
-      width: 63.34vw;
-      height: 67.79vh;
-      // margin-top: -30vh;
-
-      .grid-item-close {
-        margin-left: 16.69vw;
-        margin-top: -21.94vh;
-        margin-bottom: 14.5vh;
-
-      }
-
-      .grid-item {
-        width: 18.6vw;
-        height: 16.74vh;
-        margin-right: 1.39vw;
-        margin-bottom: 1.94vh;
-
-        img {
-          width: 100%;
-          height: 100%;
-        }
-      }
-    }
-  }
-
-  .square-right {
-    margin-right: 2.29vw;
-    height: 100vh;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    padding: 0 20px;
-  }
-
-  .square-count {
-    height: 15.38vh;
-    margin-bottom: 1.85vh;
-    // background: rgba(0, 0, 0, 0.49);
-    border-radius: 2.08vw;
-    // border: 1px solid #707070;
-    // margin-left: 1.56vw;
-    // margin-top: 11.29vh;
-    padding: 1.75vh 2.08vw;
-    color: #dfdfdf;
-    font-size: 16px;
-  }
-
-  // .origin-basic {
-  //   height: 22.38vh;
-  //   margin-top: 11.29vh;
-  //   ;
-  //   margin-bottom: 1.85vh;
-  //   background: rgba(0, 0, 0, 0.49);
-  //   border-radius: 2.08vw;
-  //   border: 1px solid #707070;
-  //   margin-left: 1.56vw;
-
-  // }
-
-  .square-list {
-    width: 26.36vw;
-    //height: 49.27vh;
-    margin-left: 1.56vw;
-  }
-
-  .square-list {
-    .item-image {
-      width: 7.29vw;
-      height: 7.29vw;
-      border-radius: 15px;
-      border: 2px solid #dfdfdf;
-
-      img {
-        width: 100%;
-        height: 100%;
-        border-radius: 15px;
-      }
-    }
-
-    .item-box {
-      width: 100%;
-      padding: 1.04vw 1.66vh 1.04vw;
-      background: rgba(0, 0, 0, 0.2);
-      border-radius: 20px 20px 20px 20px;
-      opacity: 1;
-      display: flex;
-
-      .item-text {
-        margin-left: 1.2vw;
-
-        .item-title {
-          height: 4.17vh;
-          font-size: 28px;
-          font-family: PingFang SC-Bold, PingFang SC;
-          font-weight: 400;
-          color: #fbfbfb;
-          line-height: 4.17vh;
-        }
-
-        .item-description {
-          margin-top: 0.37vh;
-          height: 2.31vh;
-          font-size: 16px;
-          font-family: PingFang SC-Regular, PingFang SC;
-          font-weight: 400;
-          color: #dfdfdf;
-          line-height: 2.31vh;
-        }
-
-        .item-tag {
-          display: flex;
-          margin-top: 0vh;
-          width: 10vw;
-
-          .tag {
-            margin-bottom: 0.2vh;
-            //width: 3.13vw;
-            height: 1.96vh;
-            font-size: xx-small;
-            line-height: 1.96vh;
-            text-align: center;
-            background-color: #5d9a6d;
-            border-radius: 10px;
-            color: #f2f2f2;
-            margin-right: 0.2vw;
-          }
-        }
-      }
-    }
-  }
-}
-
-*::-webkit-scrollbar {
-  /*滚动条整体样式*/
-  width: 6px;
-  /*高宽分别对应横竖滚动条的尺寸*/
-  height: 1px;
-}
-
-*::-webkit-scrollbar-thumb {
-  /*滚动条里面小方块*/
-  border-radius: 5px;
-  box-shadow: inset 0 0 5px rgba(180, 180, 180, 0.5);
-  background: rgba(180, 180, 180, 0.2);
-}
-
-*::-webkit-scrollbar-track {
-  /*滚动条里面轨道*/
-  /* box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); */
-  border-radius: 10px;
-  background: transparent;
-}

src/views/squarePage/list.vue

@@ -1,642 +0,0 @@
-<template>
-  <div class="square-container" @click="onClickOutside">
-    <div class="square-left">
-      <SearchBar
-        class="search-container"
-        v-model="inputValue"
-        @focus="onFocus"
-        @input="onInput"
-        ref="searchbar"
-      />
-      <div class="square-map">
-        <el-row>
-          <el-col v-for="(item, index) in images" :key="item" :span="8">
-            <div
-              class="grid-item-background"
-              style="
-                background-color: black;
-                padding-top: 30px;
-                padding-bottom: 30px;
-                padding-left: 5px;
-                padding-right: 5px;
-                margin: 10px;
-                border-radius: 20px;
-              "
-            >
-              <div class="grid-item">
-                <img
-                  :src="item.url"
-                  @dblclick="handleDblClickImg(item.alt)"
-                  @click="handleClickImg(item.alt, index)"
-                />
-              </div>
-              <div class="grid-item-close">
-                <img
-                  width="30px"
-                  src="../../images/closeremotebench.png"
-                  @click="handleCloseImg(item.alt)"
-                />
-              </div>
-            </div>
-          </el-col>
-        </el-row>
-      </div>
-    </div>
-    <div class="square-right">
-      <!-- <div class="square-count backgroundBox" v-show="!currentBench.selected">
-        <status-bar
-          :ready="readyCount"
-          :occupied="occupiedCount"
-          :offline="offlineCount"
-        ></status-bar>
-      </div> -->
-      <!-- <div
-        class="origin-basic"
-        v-show="currentBench.selected"
-        @dblclick="handleInfoDblClick(currentBench.benchId)"
-      >
-        <div>
-          <span>Location:</span>
-          <span>Automation Lab-7E</span>
-        </div>
-        <div>
-          <span>MU_SW</span>
-          <span>{{ currentBench.MU_SW }}</span>
-        </div>
-        <div>
-          <span>Cluster</span>
-          <span>{{ currentBench.Cluster }}</span>
-        </div>
-        <div>
-          <span>Market</span>
-          <span>{{ currentBench.Market }}</span>
-        </div>
-        <div>
-          <span>Box IP</span>
-          <span>{{ currentBench.ip }}</span>
-        </div>
-        <div>
-          <span>Box Version</span>
-          <span>{{ currentBench.equipment?.version }}</span>
-        </div>
-      </div> -->
-      <div class="square-list">
-        <TabList
-          :tabs="tabs"
-          :itemRender="itemRender"
-          :tabClass="tabClass"
-          :readyCount="readyCount"
-          :occupiedCount="occupiedCount"
-          :offlineCount="offlineCount"
-        ></TabList>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import "./index.less";
-import StatusBar from "../../components/StatusBar";
-import TabList from "../../components/TabList";
-import SearchBar from "../../components/SearchBar";
-import { mapState } from "vuex";
-import webSocket from "../../service/ws";
-import bus from "../../service/bus";
-
-const ws = new webSocket();
-let wsArray = [];
-let wsArrayLength = 0;
-for (var iR = 0; iR < 20; iR++) {
-  const wsRemote = new webSocket();
-
-  wsRemote.open().then((res) => {
-    // console.log("res", res);
-  });
-  wsArray.push(wsRemote);
-}
-
-export default {
-  components: { StatusBar, TabList, SearchBar },
-  data() {
-    return {
-      currentBenchId: 0,
-      currentBench: {},
-      inputValue: "",
-      isOpen: false,
-      gridItems: [1, 2, 3, 4, 5, 6, 7, 8, 9],
-      readyCount: 10,
-      occupiedCount: 5,
-      offlineCount: 3,
-      previousSelectedBenchList: [],
-      selectedBenchList: [],
-      tabs: [
-        {
-          title: "Bench",
-          list: [
-            {
-              title: "Item 1",
-              description: "1111111",
-              image: "item1.jpg",
-              tag: "Tag 1",
-            },
-            {
-              title: "Item 2",
-              description: "32222",
-              image: "item2.jpg",
-              tag: "Tag 2",
-            },
-            {
-              title: "Item 3",
-              description: "1111111",
-              image: "item3.jpg",
-              tag: "Tag 3",
-            },
-          ],
-        },
-        {
-          title: "Task",
-          list: [
-            {
-              title: "Item 4",
-              description: "1111111",
-              image: "item4.jpg",
-              tag: "Tag 4",
-            },
-            {
-              title: "Item 5",
-              description: "1111111",
-              image: "item5.jpg",
-              tag: "Tag 5",
-            },
-            {
-              title: "Item 6",
-              description: "1111111",
-              image: "item6.jpg",
-              tag: "Tag 6",
-            },
-          ],
-        },
-        {
-          title: "Issue",
-          list: [
-            {
-              title: "Item 7",
-              image: "item7.jpg",
-              tag: "Tag 7",
-            },
-            {
-              title: "Item 8",
-              image: "item8.jpg",
-              tag: "Tag 8",
-            },
-            {
-              title: "Item 9",
-              image: "item9.jpg",
-              tag: "Tag 9",
-            },
-          ],
-        },
-      ],
-    };
-  },
-  computed: {
-    tabClass() {
-      return "square";
-    },
-    ...mapState({
-      images: (state) => state.benchList.benchImgList,
-    }),
-    ...mapState({
-      benchList: (state) => {
-        return state.benchList.benchList;
-      },
-    }),
-  },
-  created() {
-    ws.open().then((res) => {
-      // console.log("res", res);
-    });
-    window.handleListClick = this.handleListClick;
-    window.handleListDbClick = this.handleListDbClick;
-    window.handleDblClickImg = this.handleDblClickImg;
-    window.handleClickImg = this.handleClickImg;
-    window.selectBench = this.selectBench.bind(this);
-    let that = this;
-    that.$store.dispatch("benchList/fetchBenchList");
-  },
-  async mounted() {
-    this.tabs[0].list = this.benchList;
-
-    setTimeout(() => {
-      var readyCount = 0;
-      var occupiedCount = 0;
-      var offlineCount = 0;
-      console.log("this.benchList", this.benchList.length);
-      this.benchList.forEach((element) => {
-        //console.log('element',element);
-        if (element.status == "ready") {
-          readyCount++;
-        } else if (element.status == "error") {
-          offlineCount++;
-        } else if (element.status == "offline") {
-          offlineCount++;
-        } else {
-          occupiedCount++;
-        }
-      });
-
-      this.readyCount = readyCount;
-      this.offlineCount = offlineCount;
-      this.occupiedCount = occupiedCount;
-      let self = this;
-
-      var strRemoteBenchList = window.localStorage.getItem("remoteBenchList");
-      var objRBL = JSON.parse(strRemoteBenchList);
-      if (objRBL) {
-        console.log("objRBL", objRBL);
-        wsArrayLength = objRBL.length;
-        for (var iW = 0; iW < objRBL.length; iW++) {
-          var i = JSON.parse(JSON.stringify(iW));
-          let benchId = JSON.parse(JSON.stringify(objRBL[i]));
-          setTimeout(() => {
-            console.log("connect bench", benchId);
-            wsArray[i]
-              .connectBench({ bench_id: String(benchId) })
-              .then((res) => {
-                console.log("connect bench success", benchId);
-                self.getBenchImage(benchId, 1, wsArray[i], () => {});
-              })
-              .catch((err) => {
-                console.log("connect bench failed", benchId);
-                this.$message({
-                  message: "This bench is offline",
-                  // message: "",
-                  type: "warning",
-                });
-              });
-          }, iW * 2000);
-        }
-      }
-    }, 3000);
-  },
-  methods: {
-    //itemRender(item) {
-    //return `
-    //    <div class="item-box">
-    //    <div class="item-title">${item.title}</div>
-    //    <div class="item-tag">
-    //        <div class="tag">3b</div>
-    //        <div class="tag">CN</div>
-    //    </div>
-    //</div>`;
-    //},
-
-    sleep(delay) {
-      var start = new Date().getTime();
-      while (new Date().getTime() - start < delay) {
-        continue;
-      }
-    },
-    saveSelectedBenchToLs(benchId) {
-      var strRemoteBenchList = window.localStorage.getItem("remoteBenchList");
-      var objRBL = JSON.parse(strRemoteBenchList);
-      if (objRBL && objRBL.length > 0) {
-        var bExist = false;
-        for (var i = 0; i < objRBL.length; i++) {
-          if (objRBL[i] == benchId) {
-            bExist = true;
-          } else {
-          }
-        }
-        if (bExist == false) {
-          objRBL.push(benchId);
-          window.localStorage.setItem(
-            "remoteBenchList",
-            JSON.stringify(objRBL)
-          );
-        }
-      } else {
-        var rml = [];
-        rml.push(benchId);
-        window.localStorage.setItem("remoteBenchList", JSON.stringify(rml));
-      }
-    },
-    selectBench(benchId) {
-      this.saveSelectedBenchToLs(benchId);
-
-      var i = JSON.parse(JSON.stringify(wsArrayLength));
-      let self = this;
-      wsArrayLength++;
-      setTimeout(() => {
-        console.log("connect bench", benchId);
-        wsArray[i]
-          .connectBench({ bench_id: String(benchId) })
-          .then((res) => {
-            console.log("connect bench success", benchId);
-            self.getBenchImage(benchId, 1, wsArray[i], () => {});
-          })
-          .catch((err) => {
-            console.log("connect bench failed", benchId);
-            this.$message({
-              message: "This bench is offline",
-              // message: "",
-              type: "warning",
-            });
-          });
-      }, 200);
-      //let self = this;
-      //let bench = this.benchList.find(b => b.id == benchId);
-      //if (this.previousSelectedBenchList.length) {
-      //  this.selectedBenchList = JSON.parse(
-      //    JSON.stringify(this.previousSelectedBenchList)
-      //  );
-      //}
-      //this.previousSelectedBenchList = [];
-      //this.platform = null;
-      //this.benchList.forEach(b => b.selected = false)
-      //bench.selected = !bench.selected;
-      //if (bench.selected) {
-      //  this.currentBench = bench;
-      //  this.selectedBenchList.push(bench);
-      //  // this.images = this.selectedBenchList.map((s) => {
-      //  //   return {
-      //  //     url: "",
-      //  //     alt: s.name,
-      //  //   };
-      //  // });
-      //} else {
-      //  for (let i in this.selectedBenchList) {
-      //    if (this.selectedBenchList[i].id == bench.id) {
-      //      this.selectedBenchList.splice(i, 1);
-      //      // this.images = this.selectedBenchList.map((s) => {
-      //      //   return {
-      //      //     url: "",
-      //      //     alt: s.name,
-      //      //   };
-      //      // });
-      //      break;
-      //    }
-      //  }
-      //}
-      //if (this.selectedBenchList.length == 0) {
-      //  nextTick(() => {
-      //    self.initBmInfoNsChart();
-      //  });
-      //} else {
-      //  self.bmMapItemActivate();
-      //}
-    },
-    itemRender(item) {
-      if (item.benchType == 2) {
-        item.image = require("../../assets/mechine2.png");
-      } else {
-        item.image = require("../../assets/mechine.png");
-      }
-      return `
-            <div onDblClick="handleListDbClick(${item.id},${item.itemtype})" onClick="handleListClick(${item.id},${item.itemtype})" class="item-box">
-                <div class="item-image"><img src="${item.image}" alt="${item.title}"></div>
-                <div class="item-right">
-                    <div class="item-text">
-                        <div class="item-title">${item.id}
-                          <span onClick="selectBench(${item.id})" class="el-icon-s-platform ${item.status}"></span>
-                        </div>
-                        <div class="item-description">Automation Lab-7E</div>
-                        <div class="item-description">${item.name}</div>
-                        <div class="item-tag">
-                            <div class="tag">${item.Market}</div>
-                            <div class="tag">${item.Platform}</div>
-                            <div class="tag">${item.Project}</div>
-                            <div class="tag">${item.Carline}</div>
-                            <div class="tag">${item.Cluster}</div>
-                        </div>
-                        <div class="item-tag">
-                            <div class="tag">${item.MU_SW}</div>
-                            <div class="tag">${item.Variant}</div>
-                            <div class="tag">${item.ip}</div>
-                        </div>
-                    </div>
-                </div>
-            </div>`;
-    },
-    rowClassName() {
-      return "row-class";
-    },
-    onFocus() {
-      this.isOpen = true;
-    },
-    onInput(value) {
-      this.inputValue = value;
-    },
-    onClickOutside() {},
-    handleListClick(benchId, itemtype) {
-      if (itemtype == 2) {
-        return;
-      }
-      this.$nextTick(() => {
-        if (benchId == this.currentBench.benchId) {
-          benchId = 0;
-          let items = document.getElementsByClassName("grid-item-background");
-          for (var index = 0; index < items.length; index++) {
-            items[index].style.background = "#000000";
-          }
-          this.currentBench = {};
-          return;
-        }
-        let items = document.getElementsByClassName("grid-item-background");
-        for (var index = 0; index < items.length; index++) {
-          items[index].style.background = "#000000";
-          if (this.images[index].alt == benchId) {
-            console.log("equal");
-            items[index].style.background = "#ffffff";
-          }
-        }
-      });
-
-      //this.currentBench = this.benchList.find(b => b.id == benchId);
-      //this.isDetailVisible = true;
-      this.$nextTick(() => {
-        //this.$refs.benchdetail.init(benchId);
-        //this.benchList.forEach(element =>
-        //{
-        //  element.style = "{background: rgba(0, 0, 0, 1)}"
-        //});
-        if (
-          benchId == this.currentBench.id &&
-          this.currentBench.selected == true
-        ) {
-          this.currentBench.selected = false;
-          this.currentBench = {};
-          let items = document.getElementsByClassName("item-box");
-          for (var index = 0; index < items.length; index++) {
-            items[index].style.background = "#00000032";
-          }
-          return;
-        }
-        let items = document.getElementsByClassName("item-box");
-        for (var index = 0; index < items.length; index++) {
-          items[index].style.background = "#00000032";
-          let title = items[index].getElementsByClassName("item-title");
-          console.log("textContent", title[0].textContent);
-          let itemOther = this.benchList.find(
-            (b) => parseInt(b.id) == parseInt(title[0].textContent)
-          );
-          itemOther.selected = false;
-          if (parseInt(benchId) == parseInt(title[0].textContent)) {
-            items[index].style.background = "#000000C0";
-            this.currentBench = this.benchList.find((b) => b.id == benchId);
-            this.currentBench.selected = true;
-          }
-        }
-        // console.log('this.currentBench', this.currentBench);
-        bus.emit("benchInfoVisible", this.currentBench);
-      });
-    },
-    handleListDbClick(benchId, itemtype) {
-      if (itemtype == 2) {
-        window.location.href = "/task2?m=8b934420_ZJUb_b6f9";
-        return;
-      }
-
-      //this.currentBench = this.benchList.find(b => b.id == benchId);
-      //this.isDetailVisible = true;
-      this.$nextTick(() => {
-        //this.$refs.benchdetail.init(benchId);
-        //this.benchList.forEach(element =>
-        //{
-        //  element.style = "{background: rgba(0, 0, 0, 1)}"
-        //});
-        this.currentBench = this.benchList.find((b) => b.id == benchId);
-        //this.currentBench.style = "{background: rgba(0, 0, 0, 1)}"
-        console.log("current bench", this.currentBench);
-        this.isRemoteBtnVisible = true;
-        this.isDetailVisible = true;
-      });
-    },
-    getBenchImage(benchId, screenType, wsRemote, func) {
-      let self = this;
-      setTimeout(() => {
-        wsRemote.getImage(String(benchId), screenType).then((res) => {
-          console.log("getImageRes", res);
-          // let screen = screenType == 1 ? "upper" : "lower";
-          if (screenType == 1) {
-            //self.benchImgUpper = "data:image/png;base64," + res.data.data;
-          } else {
-            //self.benchImgLower = "data:image/png;base64," + res.data.data;
-          }
-          // let screen = res.data.screen_type;
-          //self.getBenchImage(benchId, screenType, wsRemote, func);
-          this.$store.dispatch("benchList/setBenchImgList", {
-            benchId,
-            img: res.data.data,
-          });
-        });
-      }, 500);
-    },
-    handleDblClickImg(benchId) {
-      window.location.href =
-        "/originPage?m=8b934420_ZJUb_b6f9&benchid=" + benchId;
-    },
-    handleClickImg(benchId, indexParam) {
-      this.$nextTick(() => {
-        if (benchId == this.currentBenchId) {
-          benchId = 0;
-          let items = document.getElementsByClassName("grid-item-background");
-          for (var index = 0; index < items.length; index++) {
-            items[index].style.background = "#000000";
-          }
-          return;
-        }
-        this.currentBenchId = benchId;
-        let items = document.getElementsByClassName("grid-item-background");
-        for (var index = 0; index < items.length; index++) {
-          items[index].style.background = "#000000";
-          if (index == indexParam) {
-            console.log("equal");
-            items[index].style.background = "#ffffff";
-          }
-        }
-      });
-      this.$nextTick(() => {
-        if (
-          benchId == this.currentBench.id &&
-          this.currentBench.selected == true
-        ) {
-          this.currentBench.selected = false;
-          this.currentBench.scale = 1;
-          this.currentBench = {};
-          let items = document.getElementsByClassName("item-box");
-          for (var index = 0; index < items.length; index++) {
-            items[index].style.background = "#00000032";
-          }
-          return;
-        }
-        let items = document.getElementsByClassName("item-box");
-        for (var index = 0; index < items.length; index++) {
-          items[index].style.background = "#00000032";
-          let title = items[index].getElementsByClassName("item-title");
-          console.log("textContent", title[0].textContent);
-          let itemOther = this.benchList.find(
-            (b) => parseInt(b.id) == parseInt(title[0].textContent)
-          );
-          itemOther.selected = false;
-          if (parseInt(benchId) == parseInt(title[0].textContent)) {
-            items[index].style.background = "#000000C0";
-            this.currentBench = this.benchList.find((b) => b.id == benchId);
-            this.currentBench.selected = true;
-          }
-        }
-      });
-    },
-    handleCloseImg(benchId) {
-      console.log("benchId", benchId);
-      var strRemoteBenchList = window.localStorage.getItem("remoteBenchList");
-      var objRBL = JSON.parse(strRemoteBenchList);
-      if (objRBL) {
-        for (var i = 0; i < objRBL.length; i++) {
-          if (parseInt(objRBL[i]) == parseInt(benchId)) {
-            console.log("images", this.images);
-
-            for (var ii = 0; ii < this.images.length; ii++) {
-              if (parseInt(this.images[ii].alt) == parseInt(benchId)) {
-                this.images.splice(ii, 1);
-                console.log("images", this.images);
-                break;
-              }
-            }
-            //delete objRBL[i];
-            objRBL.splice(i, 1);
-            console.log("objRBL", objRBL);
-            window.localStorage.setItem(
-              "remoteBenchList",
-              JSON.stringify(objRBL)
-            );
-
-            return;
-          }
-        }
-      }
-    },
-  },
-};
-</script>
-<style scoped>
-.origin-basic {
-  padding: 15px 20px;
-  color: #ccc;
-  font-size: 12px;
-}
-.origin-basic div {
-  margin-bottom: 10px;
-}
-.origin-basic div span {
-  margin-right: 12px;
-}
-.origin-basic h2 {
-  cursor: pointer;
-  font-size: 14px;
-  margin-bottom: 10px;
-}
-
-:deep() .square {
-  height: 47.79vh;
-}
-</style>

src/views/task1/index.less

@@ -1,180 +0,0 @@
-.task1-container {
-  height: 100vh;
-  display: flex;
-  width: 100%;
-  padding-left: 5vw;
-  justify-content: space-around;
-  align-items: center;
-  color: #fff;
-  .task-item {
-    width: 26.47vw;
-    height: 65.27vh;
-    background: rgba(0, 0, 0, 0.49);
-    padding: 2.31vh 1.82vw;
-    border-radius: 2.08vw;
-    position: relative;
-    font-size: 20px;
-    .task-title {
-      color: #72c5ff;
-      margin-top: 1.85vh;
-    }
-    .task-content {
-      margin-top: 0.925vh;
-      font-size: 14px;
-    }
-    .task-name,
-    .SW {
-      height: 4.25vh;
-      line-height: 4.25vh;
-      background: rgba(0, 0, 0, 0.14);
-      margin-bottom: 0.925vh;
-      border-radius: 2.76vw;
-      border: 1px solid #dfdfdf;
-      font-size: 14px;
-      padding: 0 0.925vh;
-    }
-    .task-name {
-      margin-top: 1.85vh;
-    }
-    .date-container {
-      display: flex;
-      .picker-container {
-        width: 11.4vw;
-        height: 4.25vh;
-        line-height: 4.25vh;
-        background-color: transparent;
-        border-radius: 2.76vw;
-        border: 1px solid #dfdfdf;
-        padding: 0 0.925vh;
-        input {
-          background-color: transparent;
-          height: 4.25vh;
-          line-height: 4.25vh;
-        }
-        .el-input__icon {
-          line-height: 4.25vh;
-        }
-      }
-      .spector {
-        padding: 5px;
-      }
-    }
-    .select-container {
-      height: 4.25vh;
-      line-height: 4.25vh;
-      background-color: transparent;
-      border-radius: 2.76vw;
-      border: 1px solid #dfdfdf;
-      padding: 0 0.925vh;
-      margin-bottom: 0.925vh;
-      input {
-        background-color: transparent;
-        height: 4.25vh;
-        line-height: 4.25vh;
-      }
-    }
-    .done-button {
-      width: 11.6vw;
-      height: 4.25vh;
-      line-height: 4.25vh;
-      background: linear-gradient(180deg, #83cbfb 0%, #2e74b2 100%);
-      border-radius: 67px 67px 67px 67px;
-      opacity: 1;
-      border: 1px solid rgba(255, 255, 255, 0.4);
-      color: #fff;
-      padding: 0;
-      position: absolute;
-      bottom: 1.75vh;
-      right: 0.93vw;
-    }
-    .cancel-button {
-      width: 11.6vw;
-      height: 4.25vh;
-      line-height: 4.25vh;
-      background: rgba(255, 255, 255, 0.5);
-      border-radius: 67px 67px 67px 67px;
-      opacity: 1;
-      border: 1px solid rgba(255, 255, 255, 0.4);
-      color: #fff;
-      padding: 0;
-      position: absolute;
-      bottom: 1.75vh;
-      left: 0.93vw;
-    }
-  }
-  .task-item:before {
-    background: linear-gradient(
-      273deg,
-      rgba(255, 255, 255, 0.63) 0%,
-      rgba(255, 255, 255, 0) 66%,
-      rgba(84, 84, 84, 0) 100%
-    );
-    border-radius: 2.08vw;
-    opacity: 1;
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: -1;
-  }
-
-  .task1-list {
-    .item-box {
-      width: 100%;
-      padding: 1.04vw 1.66vh 1.04vw;
-      background: rgba(0, 0, 0, 0.2);
-      border-radius: 20px 20px 20px 20px;
-      opacity: 1;
-      margin-bottom: 1.85vh;
-      .item-title {
-        height: 4.17vh;
-        font-size: 24px;
-        font-family: PingFang SC-Bold, PingFang SC;
-        font-weight: 400;
-        color: #fbfbfb;
-        line-height: 4.17vh;
-      }
-      .item-description {
-        margin-top: 0.37vh;
-        height: 2.31vh;
-        font-size: 14px;
-        font-family: PingFang SC-Regular, PingFang SC;
-        font-weight: 400;
-        color: #dfdfdf;
-        line-height: 2.31vh;
-      }
-      .item-tag {
-        display: flex;
-        margin-top: 0.92vh;
-        .tag {
-          padding: 0 1vw;
-          height: 2.96vh;
-          line-height: 2.96vh;
-          text-align: center;
-          background-color: #5d9a6d;
-          border-radius: 10px;
-          color: #f2f2f2;
-          margin-right: 1vw;
-        }
-      }
-    }
-  }
-}
-
-.item-tag {
-  display: flex;
-  margin-top: 0.92vh;
-  .tag {
-    // width: 3.13vw;
-    padding: 0 1vw;
-    height: 2.96vh;
-    line-height: 2.96vh;
-    text-align: center;
-    background-color: #5d9a6d;
-    border-radius: 10px;
-    color: #f2f2f2;
-    margin-right: 1vw;
-  }
-}

src/views/task1/list.vue

@@ -1,174 +0,0 @@
-<template>
-    <div class="task1-container">
-        <div class="case task-item">
-            <div>Case Name</div>
-            <div class="task-title">Prcondition</div>
-            <div class="task-content">Active</div>
-            <div class="task-title">Action</div>
-            <div class="task-content">
-                <div>1.Click Global Search App Fromapp Grid</div>
-                <div>2.tap global seaech search tif</div>
-                <div>3.switch to hwt mode and freehwr input character</div>
-                <div>4.tap delete button5.long press delete button</div>
-            </div>
-            <div class="task-title">expectation</div>
-            <div class="task-content">
-                <div>1.click global seaech app fromapp grid</div>
-                <div>2.tap global seaech search tif</div>
-                <div>3.switch to hwt mode and freehwr input character</div>
-                <div>4.tap delete button5.long press delete button</div>
-            </div>
-            <el-button class="done-button">Done</el-button>
-        </div>
-        <div class="task task-item">
-            <div>Add A Task</div>
-            <div class="task-name">Task Name</div>
-            <div class="SW">SW</div>
-            <div class="date-container">
-                <el-date-picker class="picker-container"
-                    type="date"
-                    placeholder="开始日期"
-                ></el-date-picker><div class="spector">-</div>
-                <el-date-picker  class="picker-container"
-                type="date"
-                placeholder="结束日期"
-                ></el-date-picker>
-            </div>
-            <div v-for="(item, index) in planList" :key="index" class="task1-list">
-                <div class="item-box">
-                    <div class="item-title">
-                        <span>{{item.name}}</span>
-                        <span class="el-icon-remove removeBtn"></span>
-                    </div>
-                    <div class="item-tag">
-                        <div class="tag">3b</div>
-                        <div class="tag">MHIS_AS_AU_E4235</div>
-                    </div>
-                </div>
-            </div>
-            <div class="addBtn">
-                <span class="el-icon-circle-plus"></span>
-            </div>
-            <el-button class="cancel-button">Cancel</el-button>
-            <el-button class="done-button">Done</el-button>
-        </div>
-        <div class="plan task-item">
-            <div class="el-icon-arrow-left"></div>
-            <div class="origin-list">
-                <PlanList :tabs="tabs" :itemRender="itemRender"></PlanList>
-            </div>
-            <el-button class="cancel-button">Cancel</el-button>
-            <el-button class="done-button">Done</el-button>
-        </div>
-    </div>
-</template>
-<script>
-    import './index.less'
-    import PlanList from '../../components/PlanList/index.vue'
-    import {mapState} from 'vuex'
-    export default {
-        components: {},
-        data() {
-            return {
-                tabs: [
-                    {
-                        title: "Add A Auto Plan",
-                        list: [
-                        ],
-                    },
-                    {
-                        title: "Add A Manual Plan",
-                        list: [
-                        ],
-                    },
-                ]
-            }
-            
-        },
-        components: {
-            PlanList
-        },
-        computed: {
-            ...mapState({
-                planList: state => state.planList.planList,
-                caseList: state => state.caseList.caseList,
-                autoPlanList: state => state.planList.autoPlanList
-            })
-        },
-        created() {
-            that.$store.dispatch("planList/clearPlanList")
-            this.$store.dispatch('planList/fetchPlanList', {
-                page_num: 1,
-                page_size: 100
-            })
-            this.$store.dispatch('planList/fetchAutoPlanList', {
-                page_num: 1,
-                page_size: 100
-            })
-        },
-        mounted() {
-            window.handleClickItem = this.handleClickItem.bind(this)
-            console.log(this.planList, 'plan-list')
-        },
-        methods: {
-            itemRender(item) {
-                return `<div class="item-box" style="display:flex;align-items: center;" onClick="handleClickItem('${item.uuid || item.id}')">
-                    <div class="left">
-                        <div class="item-title">${item.name}</div>
-                        <div class="item-tag">
-                            <div class="tag">3b</div>
-                            <div class="tag">MHIS_AS_AU_E4235</div>
-                        </div>
-                    </div>
-                    <div class="${item.checked ? 'el-icon-circle-check': 'uncheck'}"></div>
-                </div>`
-            },
-            selectRow(row) {
-                console.log(row, 'selectrowdata')
-                this.$store.dispatch('caseList/fetchCaseList',{
-                    uuid: row.uuid,
-                    page_num: 1,
-                    page_size: 100
-                })
-            },
-            handleClickItem(uuid) {
-                let plan = this.planList.find(p => p.uuid == uuid)
-                if (plan) {
-                    plan.checked = !plan.checked;
-                } else {
-                    plan = this.autoPlanList.find(p => p.id == uuid)
-                    if (plan) {
-                        plan.checked = !plan.checked;
-                    }
-                }
-            }
-        },
-        watch: {
-            planList(newVal, oldValue) {
-                this.tabs[1].list = newVal
-            },
-            autoPlanList(newVal, oldVal) {
-                this.tabs[0].list = newVal
-            }
-        }
-    }
-</script>
-
-<style scoped lang="less">
-    .addBtn {
-        display: flex;
-        justify-content: center;
-        font-size: 30px;
-        span {
-            color: #5da3da
-        }
-    }
-    .item-title {
-        display: flex;
-        justify-content: space-between;
-        .removeBtn {
-            font-size: 30px;
-            color: #e75d5e;
-        }
-    }
-</style>

src/views/task2/components/DropDown/index.vue

@@ -1,45 +0,0 @@
-<!-- Dropdown.vue -->
-<template>
-  <transition name="slide">
-    <div class="dropdown" v-if="isOpen">
-      <slot name="table"></slot>
-    </div>
-  </transition>
-</template>
-
-<script>
-export default {
-  props: {
-    isOpen: Boolean
-  },
-};
-</script>
-
-<style>
-.dropdown {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border-top: none;
-    z-index: 3;
-    border-radius: 30px;
-    background: rgba(0,0,0,.2);
-    backdrop-filter: blur(5px);
-}
-
-
-
-
-.slide-enter-active,
-.slide-leave-active {
-  transition: all 0.3s;
-}
-
-.slide-enter,
-.slide-leave-to {
-  transform: translateY(-120%);
-  opacity: 0;
-}
-</style>

src/views/task2/components/TableComponent/index.vue

@@ -1,206 +0,0 @@
-<template>
-  <div class="table-box benchList">
-    <div class="btn-box">
-      <el-select v-model="statusValue" placeholder="Status" @change="changeFilter('status')">
-        <el-option
-          v-for="item in statusOptions"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value">
-        </el-option>
-      </el-select>
-      <el-select v-model="projectValue" placeholder="Project" @change="changeFilter('project')">
-        <el-option
-          v-for="item in projectOptions"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value">
-        </el-option>
-      </el-select>
-      <el-select v-model="carlineValue" placeholder="Carline" @change="changeFilter('carline')">
-        <el-option
-          v-for="item in carlineOptions"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value">
-        </el-option>
-      </el-select>
-      <el-select v-model="variantValue" placeholder="Variant" @change="changeFilter('variant')">
-        <el-option
-          v-for="item in variantOptions"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value">
-        </el-option>
-      </el-select>
-      <el-select v-model="clusterValue" placeholder="Cluster" @change="changeFilter('cluster')">
-        <el-option
-          v-for="item in clusterOptions"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value">
-        </el-option>
-      </el-select>
-      <el-select v-model="marketValue" placeholder="Market" @change="changeFilter('market')">
-        <el-option
-          v-for="item in marketOptions"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value">
-        </el-option>
-      </el-select>
-    </div>
-    <el-table :data="data" :row-class-name="rowClassName"  style="background-color: transparent;margin-top: 20px;height: 512px; overflow: auto;">
-      <el-table-column label="Bench Name" prop="name"></el-table-column>
-      <el-table-column label="Project" prop="Project" :filters="filters"></el-table-column>
-      <el-table-column label="Carline" prop="Carline" :filters="filters"></el-table-column>
-      <el-table-column label="Market" prop="Market" :filters="filters"></el-table-column>
-      <el-table-column label="SW" prop="MU_SW"></el-table-column>
-      <el-table-column label="Status" prop="status" :filters="filters"></el-table-column>
-      <el-table-column label="Action">
-        <template slot-scope="scope">
-          <el-button type="primary" circle></el-button>
-          <el-button type="success" circle></el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-  </div>
-</template>
-
-<script>
-import { mapState } from "vuex"
-export default {
-  data() {
-    return {
-      statusValue: '',
-      projectValue: '',
-      carlineValue: '',
-      variantValue: '',
-      clusterValue: '',
-      marketValue: ''
-    }
-  },
-  computed: {
-    ...mapState({
-      statusOptions(state) {
-        return state.benchList.statusOptions
-      },
-      projectOptions(state) {
-        return state.benchList.projectOptions
-      },
-      carlineOptions(state) {
-        return state.benchList.carlineOptions
-      },
-      variantOptions(state) {
-        return state.benchList.variantOptions
-      },
-      clusterOptions(state) {
-        return state.benchList.clusterOptions
-      },
-      marketOptions(state) {
-        return state.benchList.marketOptions
-      },
-    })
-  },
-  props: {
-    data: {
-      type: Array,
-      required: true
-    },
-    filters: {
-      type: Array,
-      required: true
-    },
-    rowClassName: {
-      type: Function,
-      required: true
-    },
-  },
-  methods: {
-    changeFilter(type) {
-      let list = [];
-      if (this.statusValue) {
-        list.push({type: 'status', value: this.statusValue})
-      }
-      if (this.projectValue) {
-        list.push({type: 'project', value: this.projectValue})
-      }
-      if (this.carlineValue) {
-        list.push({type: 'carline', value: this.carlineValue})
-      }
-      if (this.variantValue) {
-        list.push({type: 'variant', value: this.variantValue})
-      }
-      if (this.clusterValue) {
-        list.push({type: 'cluster', value: this.clusterValue})
-      }
-      if (this.marketValue) {
-        list.push({type: 'market', value: this.marketValue})
-      }
-      this.$store.dispatch('benchList/filterBenchList', list);
-    }
-  }
-};
-</script>
-<style scoped>
-.el-table__header-wrapper,.el-table__body-wrapper,.el-table__cell,tr {
-  background-color: transparent !important;
-}
-.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
-  border-bottom: 1px solid #707070!important;
-}
-.el-table--border::after, .el-table--group::after, .el-table::before{
-  background-color: transparent;
-}
-
-.table-box{
-    padding: 10px;
-    /* background: rgba(0,0,0,0.3); */
-    border-radius: 30px;
-    border: 1px solid #707070;
-    color: #DFDFDF;
-}
-.table-box:before{
-  background: linear-gradient(322deg, rgba(255,255,255,0.63) 0%, rgba(255,255,255,0) 73%, rgba(84,84,84,0) 100%);
-  border-radius: 30px;
-  opacity: 0.55;
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: -1;
-}
-.el-select {
-  width: 15%;
-  margin-left: 1.66%;
-  border-radius: 30px;
-  border: 1px solid #fff;
-  height: 30px;
-}
-th .cell {
-  font-size: 14px;
-}
-</style>
-<style>
-.btn-box .el-select input.el-input__inner{
- border-radius: 30px !important;
- padding-left: 5px;
- background-color: transparent;
- height: 30px;
-  font-size: 12px;
-  color: #fff !important;
-}
-.el-select-dropdown__empty {
-  background-color: #000;
-  color: #fff;
-}
-.table-box.benchList .el-table .el-table__cell{
-  font-size: 16px;
-}
-.table-box .el-table__row.row-class {
-  height: 68px !important;
-  border-bottom: 1px solid #fff;
-}
-</style>

src/views/task2/index.less

@@ -1,164 +0,0 @@
-.task2-container {
-  height: 100vh;
-  display: flex;
-  width: 100%;
-  padding-left: 5vw;
-  justify-content: space-around;
-  align-items: center;
-  color: #fff;
-  .task-item {
-    width: 26.47vw;
-    height: 65.27vh;
-    background: rgba(0, 0, 0, 0.49);
-    padding: 1.29vh 0.98vw;
-    border-radius: 2.08vw;
-    position: relative;
-    font-size: 20px;
-    &.case {
-      padding: 2.31vh 1.82vw;
-    }
-    .task-title {
-      color: #72c5ff;
-      margin-top: 0.85vh;
-    }
-    .task-content {
-      margin-top: 0.925vh;
-      font-size: 14px;
-    }
-    .select-container {
-      height: 4.25vh;
-      line-height: 4.25vh;
-      background-color: transparent;
-      border-radius: 2.76vw;
-      border: 1px solid #dfdfdf;
-      padding: 0 0.925vh;
-      margin-bottom: 0.925vh;
-      input {
-        background-color: transparent;
-        height: 4.25vh;
-        line-height: 4.25vh;
-      }
-    }
-    .area-container {
-      height: 33.14vh;
-      background: rgba(0, 0, 0, 0.2);
-      border-radius: 1.04vw;
-      opacity: 1;
-      el-textarea {
-        width: 100%;
-        height: 100%;
-      }
-    }
-    .done-button {
-      width: 11.6vw;
-      height: 4.25vh;
-      line-height: 4.25vh;
-      background: linear-gradient(180deg, #83cbfb 0%, #2e74b2 100%);
-      border-radius: 67px 67px 67px 67px;
-      opacity: 1;
-      border: 1px solid rgba(255, 255, 255, 0.4);
-      color: #fff;
-      padding: 0;
-      position: absolute;
-      bottom: 1.75vh;
-      right: 0.93vw;
-    }
-    .cancel-button {
-      width: 11.6vw;
-      height: 4.25vh;
-      line-height: 4.25vh;
-      background: rgba(255, 255, 255, 0.5);
-      border-radius: 67px 67px 67px 67px;
-      opacity: 1;
-      border: 1px solid rgba(255, 255, 255, 0.4);
-      color: #fff;
-      padding: 0;
-      position: absolute;
-      bottom: 1.75vh;
-      left: 0.93vw;
-    }
-  }
-  .task-item:before {
-    background: linear-gradient(
-      273deg,
-      rgba(255, 255, 255, 0.63) 0%,
-      rgba(255, 255, 255, 0) 66%,
-      rgba(84, 84, 84, 0) 100%
-    );
-    border-radius: 2.08vw;
-    opacity: 1;
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: -1;
-  }
-
-  .task2-list {
-    .item-box {
-      width: 100%;
-      padding: 1.04vw 1.66vh 1.04vw;
-      background: rgba(0, 0, 0, 0.2);
-      border-radius: 20px 20px 20px 20px;
-      opacity: 1;
-      margin-bottom: 1.85vh;
-      .item-title {
-        height: 4.17vh;
-        font-size: 24px;
-        font-family: PingFang SC-Bold, PingFang SC;
-        font-weight: 400;
-        color: #fbfbfb;
-        line-height: 4.17vh;
-      }
-      .item-description {
-        margin-top: 0.37vh;
-        height: 2.31vh;
-        font-size: 14px;
-        font-family: PingFang SC-Regular, PingFang SC;
-        font-weight: 400;
-        color: #dfdfdf;
-        line-height: 2.31vh;
-      }
-      .item-tag {
-        display: flex;
-        margin-top: 0.92vh;
-        .tag {
-          padding: 0 1vw;
-          height: 2.96vh;
-          line-height: 2.96vh;
-          text-align: center;
-          background-color: #5d9a6d;
-          border-radius: 10px;
-          color: #f2f2f2;
-          margin-right: 1vw;
-        }
-      }
-    }
-  }
-
-  .task-table {
-    background: rgba(0, 0, 0, 0.2);
-    border-radius: 1vw;
-    height: 55.66vh;
-    color: #dfdfdf;
-    .el-table__header-wrapper,
-    .el-table__body-wrapper,
-    .el-table__cell,
-    tr {
-      background-color: transparent !important;
-    }
-    .el-table td.el-table__cell,
-    .el-table th.el-table__cell.is-leaf {
-      border-bottom: 1px solid rgba(0, 0, 0, 0.2) !important;
-      color: #dfdfdf;
-      font-size: 14px;
-    }
-    .el-table--border::after,
-    .el-table--group::after,
-    .el-table::before {
-      background-color: transparent;
-    }
-  }
-}

src/views/task2/list.vue

@@ -1,308 +0,0 @@
-<template>
-    <div class="task2-container">
-        <div class="task task-item">
-            <div style="margin-bottom: 1.85vh" id="TaskHeaderName">< Plan Name</div>
-            <div class="task-table">
-                <el-table @row-click="selectRow" :data="planList" :row-class-name="rowClassName"  style="background-color: transparent;" >
-                    <el-table-column label="M-ID" prop="id"></el-table-column>
-                    <el-table-column label="Title" prop="name"></el-table-column>
-                    <el-table-column label="Avaliable Carline" prop="carline"></el-table-column>
-                    <el-table-column label="Avaliable Variant" prop="project"></el-table-column>
-                </el-table>
-            </div>
-        </div>
-        <div class="plan task-item">
-            <div style="margin-bottom: 1.85vh">< Case Name</div>
-            <el-row :gutter="20">
-                <el-col :span=12>
-                    <el-select v-model="projectValue" placeholder="Project" class="select-container" @change="changeFilter('project')">
-                        <el-option
-                        v-for="option in projectOptions"
-                        :key="option.value"
-                        :label="option.label"
-                        :value="option.value"
-                        ></el-option>
-                    </el-select>
-                </el-col>
-                <el-col :span=12>
-                    <el-select v-model="marketValue" placeholder="Market"  class="select-container" @change="changeFilter('market')">
-                        <el-option
-                        v-for="option in marketOptions"
-                        :key="option.value"
-                        :label="option.label"
-                        :value="option.value"
-                        ></el-option>
-                    </el-select>
-                </el-col>
-            </el-row>
-            <el-row :gutter="20">
-                <el-col :span=12>
-                    <el-select v-model="clusterValue" placeholder="Cluster" class="select-container" @change="changeFilter('cluster')">
-                        <el-option
-                        v-for="option in clusterOptions"
-                        :key="option.value"
-                        :label="option.label"
-                        :value="option.value"
-                        ></el-option>
-                    </el-select>
-                </el-col>
-                <el-col :span=12>
-                    <el-select v-model="carlineValue" placeholder="Carline"  class="select-container" @change="changeFilter('carline')">
-                        <el-option
-                        v-for="option in carlineOptions"
-                        :key="option.value"
-                        :label="option.label"
-                        :value="option.value"
-                        ></el-option>
-                    </el-select>
-                </el-col>
-            </el-row>
-            <el-row :gutter="20">
-                <el-col :span=12>
-                    <el-select v-model="priorityValue" placeholder="Priority" class="select-container" @change="changeFilter('priority')">
-                        <el-option
-                        v-for="option in priorityOptions"
-                        :key="option.value"
-                        :label="option.label"
-                        :value="option.value"
-                        ></el-option>
-                    </el-select>
-                </el-col>
-            </el-row>
-            <div class="area-container">
-                <div v-for="(item, index) in filterBenchList" :key="index" class="task1-list">
-                    <div class="item-box">
-                        <div class="item-title">
-                            <span>{{item.name}}</span>
-                            <span class="el-icon-remove removeBtn"></span>
-                        </div>
-                        <div class="item-tag">
-                            <div class="tag">3b</div>
-                            <div class="tag">MHIS_AS_AU_E4235</div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <el-button class="cancel-button">Cancel</el-button>
-            <el-button class="done-button">Done</el-button>
-        </div>
-        <div class="case task-item">
-            <div>Plan Name</div>
-            <div class="task-title">Project</div>
-            <div class="task-content">Active</div>
-            <div class="task-title">Function</div>
-            <div class="task-content">
-                <div>1.Click Global Search App Fromapp Grid</div>
-                <div>2.tap global seaech search tif</div>
-                <div>3.switch to hwt mode and freehwr input character</div>
-                <div>4.tap delete button5.long press delete button</div>
-            </div>
-            <div class="task-title">SubFunction</div>
-            <div class="task-content">
-                <div>1.click global seaech app fromapp grid</div>
-                <div>2.tap global seaech search tif</div>
-                <div>3.switch to hwt mode and freehwr input character</div>
-                <div>4.tap delete button5.long press delete button</div>
-            </div>
-            <div class="task-title">Market</div>
-            <div class="task-content">CN</div>
-            <div class="task-title">Langunage</div>
-            <div class="task-content">CN</div>
-            <el-button class="done-button">Done</el-button>
-        </div>
-    </div>
-</template>
-<script>
-    import './index.less'
-    import {mapState} from 'vuex'
-    export default {
-        components: {},
-        data() {
-            return {
-                taskData: [
-                    { mid: '40s_td 1', title: 'hwr', avaliableCarline: '111', avaliableVariant: '222', },
-                    { mid: '40s_td', title: 'hwr', avaliableCarline: '111', avaliableVariant: '222', },
-                    // ...
-                ],
-                selectedOption: '',
-                rowClassName: '',
-                options: [
-                    { label: '选项1', value: 'option1' },
-                    { label: '选项2', value: 'option2' },
-                    { label: '选项3', value: 'option3' }
-                ],
-                priorityOptions: [],
-                statusValue: '',
-                projectValue: '',
-                carlineValue: '',
-                variantValue: '',
-                clusterValue: '',
-                marketValue: '',
-                priorityValue: ''
-            }
-            
-        },
-        computed: {
-            ...mapState({
-                planList: state => state.planList.planList,
-                caseList: state => state.caseList.caseList,
-                statusOptions(state) {
-                    return state.benchList.statusOptions
-                },
-                projectOptions(state) {
-                    return state.benchList.projectOptions
-                },
-                carlineOptions(state) {
-                    return state.benchList.carlineOptions
-                },
-                variantOptions(state) {
-                    return state.benchList.variantOptions
-                },
-                clusterOptions(state) {
-                    return state.benchList.clusterOptions
-                },
-                marketOptions(state) {
-                    return state.benchList.marketOptions
-                },
-                filterBenchList: state => {
-                    return state.benchList.filterBenchList.sort((a, b) => {
-                    let i = 0;
-                    let j = 0;
-                    for(let m = 0; m < a.MU_SW.length; m++) {
-                        i+=a.MU_SW.charCodeAt(m);
-                    }
-                    for(let n = 0; n < b.MU_SW.length; n++) {
-                        j+=b.MU_SW.charCodeAt(n);
-                    }
-                    return i - j;
-                    })
-                }
-            })
-        },
-        created() {
-            let that = this;
-            setTimeout(() => {
-              let href = window.location.href;
-              that.$store.dispatch('benchList/fetchBenchList');
-                that.$store.dispatch('issueList/fetchIssueList', {
-                    "bench_id": "219",
-                    "page_num": 1,
-                    "page_size": 10,
-                    "processor": 0,
-                    "ticket_status": 0,
-                    "ticket_type": 0
-                })
-              if(href.indexOf('taskid=')!=-1)
-              {
-                let taskid = parseInt(href.substring(href.indexOf('taskid=')+7));
-                var taskHeader = document.getElementById('TaskHeaderName')
-                console.log('taskHeader',taskHeader)
-                taskHeader.innerHTML = "< "+taskid;
-                console.log('benchid',taskid);
-                that.$store.dispatch('planList/fetchPlanList', {
-                page_num: 1,
-                page_size: 100,
-                task_id: taskid
-                })
-                that.$store.dispatch('planList/fetchAutoPlanList', {
-                    page_num: 1,
-                    page_size: 100,
-                    task_id: taskid
-                })
-              }
-              else
-              {
-                that.$store.dispatch('planList/fetchPlanList', {
-                page_num: 1,
-                page_size: 100
-                })
-                that.$store.dispatch('planList/fetchAutoPlanList', {
-                    page_num: 1,
-                    page_size: 100
-                })
-              }
-            }, 200);
-        },
-        mounted() {
-            console.log(this.planList, 'plan-list')
-        },
-        methods: {
-            selectRow(row) {
-                console.log(row, 'selectrowdata')
-                this.$store.dispatch('caseList/fetchCaseList',{
-                    uuid: row.uuid,
-                    page_num: 1,
-                    page_size: 100
-                })
-            },
-            changeFilter(type) {
-                let list = [];
-                if (this.statusValue) {
-                    list.push({type: 'status', value: this.statusValue})
-                }
-                if (this.projectValue) {
-                    list.push({type: 'project', value: this.projectValue})
-                }
-                if (this.carlineValue) {
-                    list.push({type: 'carline', value: this.carlineValue})
-                }
-                if (this.variantValue) {
-                    list.push({type: 'variant', value: this.variantValue})
-                }
-                if (this.clusterValue) {
-                    list.push({type: 'cluster', value: this.clusterValue})
-                }
-                if (this.marketValue) {
-                    list.push({type: 'market', value: this.marketValue})
-                }
-                this.$store.dispatch('benchList/filterBenchList', list);
-            }
-        }
-    }
-</script>
-<style scoped lang="less">
-.area-container {
-    overflow: auto;
-}
-.task1-list {
-    .item-box {
-      width: 100%;
-      padding: 1.04vw 1.66vh 1.04vw;
-      background: rgba(0, 0, 0, 0.2);
-      border-radius: 20px 20px 20px 20px;
-      opacity: 1;
-      margin-bottom: 1.85vh;
-      .item-title {
-        height: 4.17vh;
-        font-size: 24px;
-        font-family: PingFang SC-Bold, PingFang SC;
-        font-weight: 400;
-        color: #fbfbfb;
-        line-height: 4.17vh;
-      }
-      .item-description {
-        margin-top: 0.37vh;
-        height: 2.31vh;
-        font-size: 14px;
-        font-family: PingFang SC-Regular, PingFang SC;
-        font-weight: 400;
-        color: #dfdfdf;
-        line-height: 2.31vh;
-      }
-      .item-tag {
-        display: flex;
-        margin-top: 0.92vh;
-        .tag {
-          padding: 0 1vw;
-          height: 2.96vh;
-          line-height: 2.96vh;
-          text-align: center;
-          background-color: #5d9a6d;
-          border-radius: 10px;
-          color: #f2f2f2;
-          margin-right: 1vw;
-        }
-      }
-    }
-  }
-</style>