Merge remote-tracking branch 'origin/master'

src/styles/variables.scss

@@ -54,6 +54,7 @@
   --fc-color-5: #333333;
   --fc-color-6: #666666;
   --fc-color-7: #3b7cff;
+  --fc-color-8: #EDEDED;
 
   --gray-bg-1: #F1F3F5;
 

src/views/main/components/header.vue

@@ -1,18 +1,24 @@
 <template>
   <div class="main-header">
     <div class="main-logo">
-      <img src="@/assets/logo.png" alt="">
+      <img src="@/assets/logo.png" alt="" />
       <span>维修检测平台</span>
     </div>
     <div class="main-user" ref="buttonRef" @click="onClickOutside">
       <span class="user-name">李明华</span>
-      <img src="@/assets/logo.png" alt="">
+      <img src="@/assets/logo.png" alt="" />
     </div>
+    <el-popover
+      :teleported="false"
+      ref="popoverRef"
+      :virtual-ref="buttonRef"
+      trigger="click"
+      title=""
+      virtual-triggering
+    >
+      <div class="loginOut" @click="loginOutFun">退出登录</div>
+    </el-popover>
   </div>
-
-  <el-popover ref="popoverRef" :virtual-ref="buttonRef" trigger="click" title="" virtual-triggering>
-    <div>退出登录</div>
-  </el-popover>
 </template>
 
 <script setup lang="ts">
@@ -24,6 +30,10 @@ const popoverRef = ref();
 const onClickOutside = () => {
   unref(popoverRef).popperRef?.delayHide?.();
 };
+const loginOutFun = () => {
+  alert("退出登录");
+  // window.location.href = "/login";
+};
 </script>
 
 <style scoped lang="scss">
@@ -36,6 +46,12 @@ const onClickOutside = () => {
   align-items: center;
   padding: 0 10px;
 
+  ::v-deep .el-popper {
+    .loginOut {
+      cursor: pointer;
+    }
+  }
+
   .main-logo {
     img {
       vertical-align: middle;

src/views/modules/home/home.vue

@@ -68,7 +68,9 @@
               <span class="item-gray">工程类型：</span
               >{{ item.engineeringType }}
             </div>
-            <div><span class="item-gray">版本：</span>1</div>
+            <div>
+              <span class="item-gray">版本：</span>{{ item.engineeringVersion }}
+            </div>
           </div>
           <div class="list-item-flex">
             <div>

src/views/modules/runTest/run-test.vue

@@ -1,5 +1,166 @@
 <script setup lang="ts"></script>
 
-<template><div>runtest</div></template>
+<template>
+  <div class="runtest">
+    <el-scrollbar>
+      <div class="content-A">
+        <el-scrollbar height="100%">
+          <div class="test-list">
+            <div
+              v-for="item in 50"
+              :key="item"
+              class="test-list-item"
+              :class="item === 2 ? 'active' : ''"
+            >
+              <div
+                class="body"
+                :class="['success', 'error', 'progress', 'wait']"
+              >
+                <div class="line"></div>
+                <div class="head">合格</div>
+                <div class="icon">图标</div>
+                <div class="name">增益测试</div>
+              </div>
+            </div>
+          </div>
+        </el-scrollbar>
+      </div>
+      <div class="content-B">
+        <div class="content-B-1"></div>
+        <div class="content-B-2"></div>
+        <div class="content-B-3"></div>
+        <div class="content-B-4"></div>
+      </div>
+      <div class="content-C"></div>
+    </el-scrollbar>
+  </div>
+</template>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.runtest {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  // border: 1px solid red;
+
+  .content-A {
+    width: 100%;
+    height: 300px;
+    background: linear-gradient(180deg, #404040 0%, #505050 100%);
+    border-radius: 0px 0px 0px 0px;
+    ::v-deep .el-scrollbar__view {
+      height: 100%;
+    }
+    .test-list {
+      display: flex;
+      height: 100%;
+    }
+    .test-list-item {
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 142px;
+      height: 100%;
+      text-align: center;
+      &.active {
+        background: linear-gradient(
+          180deg,
+          rgba(255, 255, 255, 0) 0%,
+          #ffffff 100%
+        );
+      }
+
+      .body {
+        background: linear-gradient(180deg, #707070 0%, #515151 100%);
+        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
+        border: 1px solid #7e7e7e;
+        border-radius: 5px;
+        margin: auto;
+        width: 108px;
+        height: 240px;
+        color: var(--hj-white-1);
+        cursor: pointer;
+        .line {
+          width: 100%;
+          height: 6px;
+          border-radius: 5px 5px 0px 0px;
+        }
+        .head {
+          margin: 0 14px;
+          color: var(--fc-color-8);
+          padding: 7px 0;
+          border-bottom: 1px solid #a8a8a8;
+        }
+        .icon {
+          margin: 0 auto;
+          width: 36px;
+          height: 36px;
+          margin-top: 50px;
+          margin-bottom: 50px;
+        }
+        .name {
+          font-weight: bold;
+          font-size: var(--hj-fs-14);
+        }
+      }
+      .body.success {
+        .line {
+          background-color: #8fe200;
+        }
+      }
+      .body.error {
+        .line {
+          background-color: #f83c64;
+        }
+      }
+      .body.progress {
+        .line {
+          background-color: #3cbaff;
+        }
+      }
+      .body.wait {
+        .line {
+          background-color: #ededed;
+        }
+      }
+    }
+  }
+  .content-B {
+    width: 100%;
+    height: 370px;
+    background-color: var(--hj-bg);
+    margin-bottom: 64px;
+    display: flex;
+    > div {
+      border: 1px solid red;
+    }
+    .content-B-1 {
+      flex: 0 0 19%;
+    }
+    .content-B-1 {
+      flex: 0 0 22%;
+    }
+    .content-B-1 {
+      flex: 0 0 19%;
+    }
+    .content-B-1 {
+      flex: 0 0 40%;
+    }
+  }
+  .content-C {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 64px;
+    background-color: yellow;
+  }
+  // background-color: #fff;
+}
+</style>