1

src/components/pages/dataBoard/index.vue

@@ -1,6 +1,13 @@
 <template>
   <div class="body">
     <div class="db_header">
+      <div class="logoTop">Logo</div>
+      <div class="db_header_title">
+        <div v-if="type == 1">综合数据中心</div>
+        <div v-if="type == 2">课程数据中心</div>
+        <div v-if="type == 3">学生数据中心</div>
+        <div v-if="type == 4">教师数据中心</div>
+      </div>
       <div class="db_check">
         <div :class="{ active: type == 1 }" @click="setType(1)">综合数据</div>
         <div :class="{ active: type == 2 }" @click="setType(2)">课程数据</div>
@@ -18,10 +25,10 @@
 </template>
 
 <script>
-import school from './school'
-import course from './course'
-import student from './student'
-import teacher from './teacher'
+import school from "./school";
+import course from "./course";
+import student from "./student";
+import teacher from "./teacher";
 export default {
   components: {
     school,
@@ -33,14 +40,14 @@ export default {
     return {
       type: 1,
       oid: this.$route.query.oid,
-    }
+    };
   },
   methods: {
     setType(type) {
-      this.type = type
-    }
+      this.type = type;
+    },
   },
-}
+};
 </script>
 
 <style scoped>
@@ -61,27 +68,62 @@ export default {
   align-items: center;
 }
 
+.logoTop {
+  position: absolute;
+  left: 30px;
+}
+
+.db_header_title {
+  font-weight: bold;
+  font-size: 20px;
+}
+.db_header_title > div {
+  position: relative;
+  z-index: 9;
+}
+.db_header_title > div:after {
+  content: "";
+  position: absolute;
+  width: 250px;
+  height: 10px;
+  bottom: -30px;
+  left: -85px;
+  border-top: 20px solid #fff;
+  border-left: 20px solid transparent;
+  border-right: 20px solid transparent;
+  -webkit-transform: skew(20deg);
+  transform: skew(359deg);
+  z-index: 1;
+}
+
 .db_check {
   display: flex;
   align-items: center;
+  position: absolute;
+  right: 30px;
+  height: 100%;
 }
 
-.db_check>div {
-  color: #a8a8a8;
-  padding: 8px 20px;
-  border-radius: 4px;
+.db_check > div {
+  padding: 14px 20px;
   cursor: pointer;
 }
 
-.db_check>div.active {
+.db_check > div:hover {
+  background: #edf4ff;
+}
+
+.db_check > div.active {
   font-weight: 700;
-  color: #000;
-  background: rgb(231, 242, 252);
+  color: #297bff;
+  background: #edf4ff;
+  border-top: 2px solid #297bff;
+  box-sizing: border-box;
 }
 
-.db_check>div+div {
+/* .db_check > div + div {
   margin-left: 30px;
-}
+} */
 
 .db_body {
   height: calc(100% - 50px);