index.vue修改

src/views/index.vue

@@ -16,13 +16,13 @@
         <el-col :span="24" class="banner">
           <el-row>
             <el-col :span="24" v-for="(item, index) in bannerlist" :key="index">
-              <el-image :src="item.png" style="width: 100%; height: 300px;"></el-image>
-            </el-col>
-            <el-col>
-              <p class="title">吉林省高等学校毕业生就业信息网</p>
-            </el-col>
-            <el-col>
-              <p class="english">Employment Information Network for graduates of Jilin Province colleges and universities.</p>
+              <el-image :src="item.pic" style="width: 100%; height: 300px;"></el-image>
+              <el-col>
+                <p class="title">吉林省高等学校毕业生就业信息网</p>
+              </el-col>
+              <el-col>
+                <p class="english">Employment Information Network for graduates of Jilin Province colleges and universities.</p>
+              </el-col>
             </el-col>
           </el-row>
         </el-col>
@@ -31,16 +31,101 @@
             <el-row>
               <el-col :span="24" style="background-color: rgb(4, 87, 199);">
                 <div class="w_1200">
-                  <el-menu default-active="activeIndex" class="el-menu-demo">
-                    <el-menu-item index="1">网站首页</el-menu-item>
-                    <el-menu-item index="2">招聘信息</el-menu-item>
-                    <el-menu-item index="3">业务指南</el-menu-item>
-                    <el-menu-item index="4">政策法规</el-menu-item>
-                    <el-menu-item index="5">就业指导</el-menu-item>
-                    <el-menu-item index="6">党员之家</el-menu-item>
-                    <el-menu-item index="7">征兵宣传</el-menu-item>
-                    <el-menu-item index="8">网络课程大赛</el-menu-item>
-                    <el-menu-item index="9">加入我们</el-menu-item>
+                  <div class="line"></div>
+                  <el-menu
+                    :default-active="activeIndex"
+                    class="el-menu-demo"
+                    mode="horizontal"
+                    @select="handleSelect"
+                    background-color="rgb(4, 87, 199)"
+                    text-color="#fff"
+                    active-text-color="#ffd04b"
+                  >
+                    <el-menu-item index="1">首页</el-menu-item>
+                    <el-submenu index="2">
+                      <template slot="title">招聘信息</template>
+                      <el-menu-item index="2-1">宣讲会</el-menu-item>
+                      <el-menu-item index="2-2">招聘会</el-menu-item>
+                      <el-menu-item index="2-3">招聘信息</el-menu-item>
+                      <el-submenu index="2-4">
+                        <template slot="title">选项4</template>
+                        <el-menu-item index="2-4-1">选项1</el-menu-item>
+                        <el-menu-item index="2-4-2">选项2</el-menu-item>
+                        <el-menu-item index="2-4-3">选项3</el-menu-item>
+                      </el-submenu>
+                    </el-submenu>
+                    <el-submenu index="3">
+                      <template slot="title">业务指南</template>
+                      <el-menu-item index="3-1">就业派遣</el-menu-item>
+                      <el-menu-item index="3-2">档案管理</el-menu-item>
+                      <el-menu-item index="3-3">招聘信息</el-menu-item>
+                      <el-submenu index="3-4">
+                        <template slot="title">选项4</template>
+                        <el-menu-item index="3-4-1">选项1</el-menu-item>
+                        <el-menu-item index="3-4-2">选项2</el-menu-item>
+                        <el-menu-item index="3-4-3">选项3</el-menu-item>
+                      </el-submenu>
+                    </el-submenu>
+                    <el-submenu index="4">
+                      <template slot="title">政策指南</template>
+                      <el-menu-item index="4-1">就业派遣</el-menu-item>
+                      <el-menu-item index="4-2">档案管理</el-menu-item>
+                      <el-menu-item index="4-3">招聘信息</el-menu-item>
+                      <el-submenu index="4-4">
+                        <template slot="title">选项4</template>
+                        <el-menu-item index="4-4-1">选项1</el-menu-item>
+                        <el-menu-item index="4-4-2">选项2</el-menu-item>
+                        <el-menu-item index="4-4-3">选项3</el-menu-item>
+                      </el-submenu>
+                    </el-submenu>
+                    <el-submenu index="5">
+                      <template slot="title">就业指导</template>
+                      <el-menu-item index="5-1">就业派遣</el-menu-item>
+                      <el-menu-item index="5-2">档案管理</el-menu-item>
+                      <el-menu-item index="5-3">招聘信息</el-menu-item>
+                      <el-submenu index="5-4">
+                        <template slot="title">选项4</template>
+                        <el-menu-item index="5-4-1">选项1</el-menu-item>
+                        <el-menu-item index="5-4-2">选项2</el-menu-item>
+                        <el-menu-item index="5-4-3">选项3</el-menu-item>
+                      </el-submenu>
+                    </el-submenu>
+                    <el-submenu index="6">
+                      <template slot="title">党员之家</template>
+                      <el-menu-item index="6-1">就业派遣</el-menu-item>
+                      <el-menu-item index="6-2">档案管理</el-menu-item>
+                      <el-menu-item index="6-3">招聘信息</el-menu-item>
+                      <el-submenu index="6-4">
+                        <template slot="title">选项4</template>
+                        <el-menu-item index="6-4-1">选项1</el-menu-item>
+                        <el-menu-item index="6-4-2">选项2</el-menu-item>
+                        <el-menu-item index="6-4-3">选项3</el-menu-item>
+                      </el-submenu>
+                    </el-submenu>
+                    <el-submenu index="7">
+                      <template slot="title">征兵宣传</template>
+                      <el-menu-item index="7-1">就业派遣</el-menu-item>
+                      <el-menu-item index="7-2">档案管理</el-menu-item>
+                      <el-menu-item index="7-3">招聘信息</el-menu-item>
+                      <el-submenu index="7-4">
+                        <template slot="title">选项4</template>
+                        <el-menu-item index="7-4-1">选项1</el-menu-item>
+                        <el-menu-item index="7-4-2">选项2</el-menu-item>
+                        <el-menu-item index="7-4-3">选项3</el-menu-item>
+                      </el-submenu>
+                    </el-submenu>
+                    <el-submenu index="8">
+                      <template slot="title">网络课程大赛</template>
+                      <el-menu-item index="8-1">就业派遣</el-menu-item>
+                      <el-menu-item index="8-2">档案管理</el-menu-item>
+                      <el-menu-item index="8-3">招聘信息</el-menu-item>
+                      <el-submenu index="8-4">
+                        <template slot="title">选项4</template>
+                        <el-menu-item index="8-4-1">选项1</el-menu-item>
+                        <el-menu-item index="8-4-2">选项2</el-menu-item>
+                        <el-menu-item index="8-4-3">选项3</el-menu-item>
+                      </el-submenu>
+                    </el-submenu>
                   </el-menu>
                 </div>
               </el-col>
@@ -53,10 +138,10 @@
               <el-col :span="11" class="lunbo">
                 <el-col :span="24" style="height: 304px;">
                   <div class="block">
-                    <el-carousel height="300px">
-                      <el-carousel-item v-for="(i, index) in carouselList" :key="index">
-                        <el-image :src="i.png" style="height: 304px;"></el-image>
-                        <p class="carouselTitle textOver">{{ i.title }}</p>
+                    <el-carousel>
+                      <el-carousel-item v-for="item in banners" :key="item">
+                        <!-- <h3 class="small">{{ item }}</h3> -->
+                        <el-image :src="item.pic" style="width: 100%; height: 300px;"></el-image>
                       </el-carousel-item>
                     </el-carousel>
                   </div>
@@ -152,9 +237,23 @@ export default {
       activeIndex: '1',
       //banner
       // eslint-disable-next-line vue/no-dupe-keys
+      banners: [
+        {
+          pic: require('@a/lunbo.jpg'),
+        },
+        {
+          pic: require('@a/lunbo.jpg'),
+        },
+        {
+          pic: require('@a/lunbo.jpg'),
+        },
+        {
+          pic: require('@a/lunbo.jpg'),
+        },
+      ],
       bannerlist: [
         {
-          png: require('@a/banner.png'),
+          pic: require('@a/banner.png'),
         },
       ],
       // eslint-disable-next-line vue/no-dupe-keys
@@ -177,37 +276,50 @@ export default {
         },
       ],
       noticeList: [],
-      item: {},
+      item: {
+        abc: '哈哈哈哈哈哈哈哈哈',
+      },
     };
   },
   created() {},
-  methods: {},
-  computed: {
-    ...mapState(['user']),
-    pageTitle() {
-      return `${this.$route.meta.title}`;
+  methods: {
+    handleSelect(key, keyPath) {
+      console.log(key, keyPath);
+    },
+    computed: {
+      ...mapState(['user']),
+      // pageTitle() {
+      //   return `${this.$route.meta.title}`;
+      // },
+    },
+    metaInfo() {
+      return { title: this.$route.meta.title };
     },
-  },
-  metaInfo() {
-    return { title: this.$route.meta.title };
   },
 };
 </script>
 
 <style lang="less" scoped>
 .w_1200 {
-  width: 1270px;
+  width: 1200px;
   margin: 0 auto;
 }
 .style {
   background-color: #f6f6f6;
   .top {
-    height: 40px;
-    line-height: 40px;
+    height: 300px;
+    line-height: 300px;
     background-color: hsla(0, 0%, 96.1%, 0.31);
   }
   .menu {
+    height: 60px;
+    width: 100%;
+    margin: 0 auto;
     background-color: rgb(4, 87, 199);
+    .el-breadcrumb-item {
+      height: 80px;
+      width: 100%;
+    }
   }
   /deep/.el-menu--horizontal > .el-menu-item.is-active {
     background-color: #03469f !important;
@@ -221,6 +333,21 @@ export default {
   }
   .mainOne {
     height: 304px;
+    .el-carousel__item h3 {
+      color: #475669;
+      height: 100%;
+      width: 100%;
+      font-size: 50px;
+      margin: 0;
+    }
+
+    .el-carousel__item:nth-child(2n) {
+      background-color: #99a9bf;
+    }
+
+    .el-carousel__item:nth-child(2n+1) {
+      background-color: #d3dce6;
+    }
   }
   .carouselTitle {
     position: absolute;