提交一下

1

src/views/index/blocks/banner.vue

@@ -1,25 +1,13 @@
 <template>
   <header class="banner">
-    <div class="content width1200">
-      <!-- <div>
-        <img class="animate__animated animate__fadeInDown"
-             src="../images/topTitle.png"
-             width="959"
-             alt="">
-      </div>
-      <div>
-        <img class="animate__animated animate__fadeInDown delay-300ms"
-             src="../images/bottomTitle.png"
-             width="628"
-             alt="">
-      </div> -->
-      <!-- <div class="buttonWrap">
-        <div class="animate__animated animate__fadeInDown delay-600ms button join "
-             @click="joinIn">立即入驻</div>
-        <div class="animate__animated animate__fadeInDown delay-600ms button goinBox"
-             @click="gotoDetail">考生指引</div>
-      </div> -->
+    <img src="../images/banner.png" width="100%" alt="" />
+    <div class="width1200 bannerWrap">
+      <img class="font" src="../images/font.png" width="100%" alt="" />
     </div>
+
+    <img src="../images/banner.png" width="100%" alt="" />
+    <img src="../images/banner.png" width="100%" alt="" />
+    <img src="../images/banner.png" width="100%" alt="" />
   </header>
 </template>
 <style lang="less" scoped>
@@ -30,10 +18,24 @@
   animation-delay: 0.6s;
 }
 .banner {
-  background: url("../images/banner.png") no-repeat center;
-  background-color: #2a2c41;
-  background-size: cover;
-  height: 763px;
+  position: relative;
+  // width: 100%;
+  // background: url("../images/banner.png") no-repeat center;
+  // background-color: #2a2c41;
+  // background-size: 100% 100%;
+  // height: 763px;
+  .bannerWrap {
+    position: absolute;
+    left: 50%;
+    margin-left: -590px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    .font {
+      width: 35%;
+    }
+  }
+
   .content {
     height: 100%;
     display: flex;
@@ -96,16 +98,16 @@
 }
 </style>
 <script>
-import Bus from './eventBus'
+import Bus from "./eventBus";
 export default {
-  name: 'banner',
+  name: "banner",
   methods: {
-    joinIn () {
+    joinIn() {
       Bus.$emit("joinIn", true);
     },
-    gotoDetail () {
-      Bus.$emit('gotoDetail')
-    }
-  }
-}
+    gotoDetail() {
+      Bus.$emit("gotoDetail");
+    },
+  },
+};
 </script>

src/views/index/blocks/recommend.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="recommend">
     <img class="bg" src="../images/helpBg.png" alt="" />
-    <div class="recommendDetail">
+    <div class="recommendDetail width1200">
       <el-tabs v-model="activeName" stretch>
-        <el-tab-pane label="长笛" name="1"> </el-tab-pane>
+        <el-tab-pane label="长笛" name="1"></el-tab-pane>
       </el-tabs>
     </div>
   </div>
@@ -41,5 +41,8 @@ export default {
   /deep/.el-tabs__active-bar {
     background-color: #01c1b5;
   }
+  .recommendDetail {
+
+  }
 }
 </style>