抽头部组件

src/components/HeaderMain.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="header">
+    <div class="logo">
+      <img class="logo-img" src="" alt="">调研宝</div>
+    <div class="right">
+      <div class="operational-data">去“看板”查看测试运营数据</div>
+      <div class="userinfo">用户名 <i class="el-icon-caret-bottom"></i></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.header {
+  z-index: 1;
+  position: fixed;
+  top: 0px;
+  width: 100%;
+  height: 60px;
+  box-shadow: 0 2px 8px 0 rgba(62, 67, 116, 0.1);
+  border-bottom: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0px 50px;
+  .logo {
+    display: flex;
+    flex-direction: row;
+    line-height: 30px;
+    .logo-img {
+      width: 30px;
+      height: 30px;
+      background: red;
+      margin-right: 6px;
+      border-radius: 15px;
+    }
+  }
+  .right {
+    display: flex;
+    flex-direction: row;
+    .operational-data {
+      width: 240px;
+      height: 34px;
+      background: #e6edff;
+      border-radius: 17px;
+      font-size: 16px;
+      color: #4e5dff;
+      line-height: 34px;
+      text-align: center;
+      margin-right: 46px;
+    }
+    .userinfo {
+      width: 132px;
+      height: 34px;
+      line-height: 34px;
+      text-align: center;
+      margin-right: 22px;
+    }
+  }
+}
+</style>

src/views/myHistoryTest/myHistoryTest.html

@@ -1,13 +1,6 @@
 <div class="page">
   <!-- 头部 -->
-  <div class="header">
-    <div class="logo">
-      <img class="logo-img" src="" alt="">调研宝</div>
-    <div class="right">
-      <div class="operational-data">去“看板”查看测试运营数据</div>
-      <div class="userinfo">用户名 <i class="el-icon-caret-bottom"></i></div>
-    </div>
-  </div>
+  <HeaderMain></HeaderMain>
   <!-- 工具栏 -->
   <div class="history-tools">
     <div class="left">

src/views/myHistoryTest/myHistoryTest.js

@@ -1,4 +1,8 @@
+import HeaderMain from "../../components/HeaderMain";
 export default {
+  components: {
+    HeaderMain
+  },
   data() {
     return {
       cities: [{

src/views/myHistoryTest/myHistoryTest.scss

@@ -3,54 +3,6 @@
   width: 100%;
   background: rgba(237,239,247,1);
 }
-.header {
-  z-index: 1;
-  position:fixed;
-  top: 0px;
-  width: 100%;
-  height: 60px;
-  box-shadow: 0 2px 8px 0 rgba(62,67,116,0.10);
-  border-bottom: 0;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items:center;
-  padding: 0px 50px;
-  .logo{
-    display: flex;
-    flex-direction: row;
-    line-height: 30px;
-    .logo-img {
-      width: 30px;
-      height: 30px;
-      background: red;
-      margin-right: 6px;
-      border-radius: 15px;
-    }
-  }
-  .right{
-    display: flex;
-    flex-direction: row;
-    .operational-data {
-      width: 240px;
-      height: 34px;
-      background: #E6EDFF;
-      border-radius: 17px;
-      font-size: 16px;
-      color: #4E5DFF;
-      line-height: 34px;
-      text-align: center;
-      margin-right: 46px;
-    }
-    .userinfo {
-      width: 132px;
-      height: 34px;
-      line-height: 34px;
-      text-align: center;
-      margin-right: 22px;
-    }
-  }
-}
 
 .history-tools {
   width: 1180px;
@@ -124,7 +76,8 @@
     }
     .item-img {
       width: 100%;
-      height: 50%;
+      height:156px;
+      border-radius:6px 6px 0px 0px;
     }
     .title {
       flex-grow: 2;
@@ -145,7 +98,7 @@
     }
   }
   .item:hover{
-    box-shadow: 0 5px 11px 0 rgba(0,0,0,0.44);
+    box-shadow:0px 5px 11px 0px rgba(78,93,255,0.42);
     .tools {
       display: block;
     }