修改首页

src/layout/index.vue

@@ -3,7 +3,7 @@
  * @Author: 空白格
  * @Date: 2022-08-10 11:30:36
  * @LastEditors: 空白格
- * @LastEditTime: 2022-08-15 12:44:50
+ * @LastEditTime: 2022-08-16 16:40:48
  * @FilePath: \veterans_client_web\src\layout\index.vue
  * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
 -->
@@ -12,7 +12,12 @@
     <div class="header" height="73px">
       <div class="header-box">
         <div class="header-box-left">
-          <router-link to="/">贵州退役军人教育培训</router-link>
+          <router-link to="/">
+            <template v-if="currentPath === '/'">
+              {{ nowDate }}
+            </template>
+            <template v-else>贵州退役军人教育培训</template>
+          </router-link>
         </div>
         <div class="header-box-right">
           <div class="header-box-right-search">
@@ -57,11 +62,14 @@
 
 <script>
 import { mapState } from "vuex";
+import { parseTime } from "@/utils/utils";
 export default {
   name: "Layout",
   data() {
     return {
       searchValue: "",
+      currentPath: '/',
+      nowDate: ''
     };
   },
   computed: {
@@ -70,7 +78,16 @@ export default {
       isLogin: (state) => state.user.isLogin,
     }),
   },
-  created() {},
+  watch: {
+    '$route'(val) {
+      if (val.path) {
+        this.currentPath = val.path
+      }
+    }
+  },
+  created() {
+    this.nowDate = parseTime(new Date(), '{y}年{m}月{d}日 星期{a}')
+  }
 };
 </script>
 

src/router/index.js

@@ -91,7 +91,7 @@ const routes = [
         name: 'CourseVideoIndex',
         component: () => import('@/views/SkillTraining/CourseVideo/CourseVideoIndex.vue'),
         meta: {
-          title: '技能培训'
+          title: '课程详情'
         }
       },
       {

src/views/Home/HomeIndex copy.vue

@@ -0,0 +1,414 @@
+<!--
+ * @Description: 首页备份
+ * @Author: 空白格
+ * @Date: 2022-08-16 16:41:33
+ * @LastEditors: 空白格
+ * @LastEditTime: 2022-08-16 16:41:33
+ * @FilePath: \veterans_client_web\src\views\Home\HomeIndex copy.vue
+ * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
+-->
+
+<template>
+  <div class="home">
+    <!-- 轮播图 -->
+    <div class="home-carousel">
+      <el-carousel :interval="2000" arrow="always" height="645px">
+        <el-carousel-item v-for="(item, index) in bannerList" :key="index">
+          <el-image class="image" :src="item.bannerUrl" fit="fill">
+            <div slot="placeholder" class="image-slot">
+              加载图片中<span class="dot">...</span>
+            </div>
+          </el-image>
+        </el-carousel-item>
+      </el-carousel>
+    </div>
+    <div class="home-main">
+      <div class="home-main-box">
+        <!-- 菜单部分 -->
+        <el-row :gutter="0" class="home-main-menu">
+          <el-col
+            :xs="12"
+            :sm="8"
+            :md="6"
+            :lg="3"
+            :xl="3"
+            v-for="(menu, index) in menuList"
+            :key="index"
+          >
+            <div class="home-main-menu-item" @click="jumpPage(menu.path)">
+              <div class="home-main-menu-icon">
+                <el-image class="image" :src="menu.icon"></el-image>
+              </div>
+              <div class="home-main-menu-name">{{ menu.name }}</div>
+            </div>
+          </el-col>
+        </el-row>
+        <!-- 新闻部分 -->
+        <el-row :gutter="0" class="home-main-news">
+          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+            <div class="home-main-news-left">
+              <el-carousel :interval="5000" arrow="never" height="303px">
+                <el-carousel-item
+                  v-for="(item, index) in newsList"
+                  :key="index"
+                >
+                  <el-image
+                    class="image"
+                    :src="
+                      item.artImage ||
+                      require('@/assets/images/default-news.jpg')
+                    "
+                    fit="fill"
+                  >
+                    <div slot="placeholder" class="image-slot">
+                      加载图片中<span class="dot">...</span>
+                    </div>
+                    <div slot="error" class="image-slot">
+                      <el-image
+                        class="image"
+                        :src="require('@/assets/images/default-news.jpg')"
+                        fit="fill"
+                      ></el-image>
+                    </div>
+                  </el-image>
+                  <div class="title">
+                    {{ item.artTitle || "" }}
+                  </div>
+                </el-carousel-item>
+              </el-carousel>
+            </div>
+          </el-col>
+          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+            <div class="home-main-news-right">
+              <el-tabs v-model="activeName" @tab-click="handleClick">
+                <el-tab-pane label="新闻动态" name="first">
+                  <ul class="news-infomation">
+                    <li
+                      class="news-infomation-item"
+                      v-for="(item, index) in newsList"
+                      :key="index"
+                    >
+                      <div class="title">{{ item.artTitle }}</div>
+                      <div class="date">
+                        {{ parseTime(item.createTime, "{y}-{m}-{d}") }}
+                      </div>
+                    </li>
+                  </ul>
+                </el-tab-pane>
+                <el-tab-pane label="通知公告" name="second">
+                  <ul class="news-infomation">
+                    <li
+                      class="news-infomation-item"
+                      v-for="(item, index) in noticeList"
+                      :key="index"
+                    >
+                      <div class="title">{{ item.content }}</div>
+                      <div class="date">
+                        {{ parseTime(item.releasTime, "{y}-{m}-{d}") }}
+                      </div>
+                    </li>
+                  </ul>
+                </el-tab-pane>
+              </el-tabs>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { parseTime } from "@/utils/utils";
+import { getBannerList, getNewsList, getNoticeList } from "@/api/Home";
+export default {
+  name: "HomeIndex",
+  data() {
+    return {
+      bannerList: [],
+      menuList: [
+        {
+          name: "政策咨询",
+          icon: require("@/assets/images/home-menu-icon/home-menu-icon-1.svg"),
+          path: "/policyadvice",
+        },
+        {
+          name: "招聘就业",
+          icon: require("@/assets/images/home-menu-icon/home-menu-icon-2.svg"),
+          path: "/recruitmentemployment",
+        },
+        {
+          name: "合作企业",
+          icon: require("@/assets/images/home-menu-icon/home-menu-icon-3.svg"),
+          path: "/cooperativeenterprise",
+        },
+        {
+          name: "合作院校",
+          icon: require("@/assets/images/home-menu-icon/home-menu-icon-4.svg"),
+          path: "/cooperativecolleges",
+        },
+        {
+          name: "技能培训",
+          icon: require("@/assets/images/home-menu-icon/home-menu-icon-5.svg"),
+          path: "/skilltraining",
+        },
+        {
+          name: "适应性培训",
+          icon: require("@/assets/images/home-menu-icon/home-menu-icon-6.svg"),
+          path: '/adaptivetraining'
+        },
+        {
+          name: "学历提升",
+          icon: require("@/assets/images/home-menu-icon/home-menu-icon-7.svg"),
+          path: '/educationpromote'
+        },
+        {
+          name: "创业指引",
+          icon: require("@/assets/images/home-menu-icon/home-menu-icon-8.svg"),
+          path: '/workguide'
+        },
+      ],
+      newsList: [],
+      noticeList: [],
+      activeName: "first",
+      parseTime: parseTime,
+    };
+  },
+  created() {
+    this.initData();
+  },
+  methods: {
+    initData() {
+      this.getBanner();
+      this.getNews();
+      this.getNotice();
+    },
+    /**
+     * 获取轮播图
+     * @date 2022-08-10
+     * @returns {any}
+     */
+    getBanner() {
+      getBannerList({ type: 0 }).then((res) => {
+        this.bannerList = res.data;
+      });
+    },
+    /**
+     * 获取新闻
+     * @date 2022-08-10
+     * @returns {any}
+     */
+    getNews() {
+      getNewsList({
+        artCategoryId: 2,
+        pageNum: 1,
+        pageSize: 5,
+      }).then((res) => {
+        this.newsList = res.rows;
+      });
+    },
+    /**
+     * 获取公告
+     * @date 2022-08-10
+     * @returns {any}
+     */
+    getNotice() {
+      getNoticeList().then((res) => {
+        this.noticeList = res.data;
+      });
+    },
+    /**
+     * tab点击事件
+     * @date 2022-08-10
+     * @param {any} tab
+     * @returns {any}
+     */
+    handleClick(tab) {
+      switch (tab.name) {
+        case "first":
+          this.getNews();
+          break;
+        case "second":
+          this.getNotice();
+          break;
+      }
+    },
+    /**
+     * 跳转到指定页面
+     * @date 2022-08-11
+     * @param {any} path
+     * @returns {any}
+     */
+    jumpPage(path) {
+      this.$router.push(path);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.home {
+  height: 100%;
+  &-carousel {
+    .image {
+      width: 100%;
+      height: 100%;
+    }
+    .image-slot {
+      line-height: 645px;
+      text-align: center;
+    }
+    :deep(.el-carousel__indicators) {
+      // 指示器
+      bottom: 84px;
+    }
+    :deep(.el-carousel__arrow) {
+      border: solid 1px rgba($color: #fff, $alpha: 0.7);
+    }
+    :deep(.el-carousel__button) {
+      // 指示器按钮
+      width: 10px;
+      height: 10px;
+      border: none;
+      border-radius: 50%;
+      background-color: #fff;
+    }
+    :deep(.is-active .el-carousel__button) {
+      // 指示器激活按钮
+      width: 18px;
+      border-radius: 10px;
+    }
+  }
+  &-main {
+    width: 70%;
+    min-height: 100vh;
+    margin: 0 auto;
+    min-width: 600px;
+    position: relative;
+    &-box {
+      width: 100%;
+      position: absolute;
+      top: -53px;
+      z-index: 1000;
+    }
+    &-menu {
+      width: 100%;
+      background-color: #fff;
+      padding: 30px 50px 10px;
+      border-radius: 5px;
+      &-item {
+        cursor: pointer;
+        margin-bottom: 20px;
+      }
+      &-icon {
+        text-align: center;
+        .image {
+          width: 100%;
+          height: 100%;
+          max-width: 85px;
+          max-height: 85px;
+        }
+      }
+      &-name {
+        text-align: center;
+        margin-top: 15px;
+      }
+    }
+    &-news {
+      width: 100%;
+      background-color: #fff;
+      padding: 39px 50px;
+      border-radius: 5px;
+      margin-top: 14px;
+      &-left {
+        margin-right: 30px;
+        .image {
+          width: 100%;
+          height: 100%;
+          border-radius: 2px;
+        }
+        .title {
+          width: calc(100% - 26px);
+          height: 43px;
+          line-height: 43px;
+          padding: 0 13px;
+          background-color: rgba($color: #000000, $alpha: 0.6);
+          color: #fff;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          word-break: break-all;
+          position: absolute;
+          bottom: 0;
+          font-size: 14px;
+          font-weight: blod;
+        }
+        :deep(.el-carousel__indicators) {
+          // 指示器
+          left: auto;
+          right: -20px;
+        }
+        :deep(.el-carousel__button) {
+          // 指示器按钮
+          width: 7px;
+          height: 7px;
+          border: none;
+          border-radius: 50%;
+          background-color: #fff;
+        }
+        :deep(.is-active .el-carousel__button) {
+          // 指示器激活按钮
+          width: 16px;
+          border-radius: 10px;
+          background-color: #f00;
+        }
+      }
+      &-right {
+        :deep(.el-tabs__item) {
+          font-size: 20px;
+          font-weight: 500;
+          color: #000000;
+        }
+        :deep(.el-tabs__item:hover) {
+          color: #163da5;
+        }
+        :deep(.el-tabs__item.is-active) {
+          color: #163da5;
+        }
+        :deep(.el-tabs__active-bar) {
+          background-color: #163da5;
+        }
+        .news-infomation {
+          &-item {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 10px;
+            font-size: 14px;
+            color: #373737;
+            cursor: pointer;
+            &:hover {
+              text-decoration: underline;
+            }
+            .title {
+              width: 80%;
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              word-break: break-all;
+            }
+            .date {
+              width: 20%;
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              word-break: break-all;
+              text-align: right;
+              color: #797979;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/Home/HomeIndex.vue

@@ -3,17 +3,17 @@
  * @Author: 空白格
  * @Date: 2022-08-10 11:26:40
  * @LastEditors: 空白格
- * @LastEditTime: 2022-08-15 11:02:25
+ * @LastEditTime: 2022-08-16 17:30:29
  * @FilePath: \veterans_client_web\src\views\Home\HomeIndex.vue
  * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
 -->
 <template>
-  <div class="home">
+  <div class="home app-main">
     <!-- 轮播图 -->
     <div class="home-carousel">
-      <el-carousel :interval="2000" arrow="always" height="645px">
+      <el-carousel :interval="5000" arrow="always" height="400px">
         <el-carousel-item v-for="(item, index) in bannerList" :key="index">
-          <el-image class="image" :src="item.bannerUrl" fit="fill">
+          <el-image class="image" :src="item.bannerUrl" fit="contain">
             <div slot="placeholder" class="image-slot">
               加载图片中<span class="dot">...</span>
             </div>
@@ -21,7 +21,19 @@
         </el-carousel-item>
       </el-carousel>
     </div>
-    <div class="home-main">
+    <!-- 菜单 -->
+    <div class="home-menu" :class="{ 'home-menu-fixed': scrollTop > 473 }">
+      <div class="home-menu-list">
+        <div
+          class="home-menu-list-item"
+          v-for="(item, index) in menuList"
+          :key="index"
+        >
+          {{ item.name }}
+        </div>
+      </div>
+    </div>
+    <div class="home-main" :class="{ 'home-main-top': scrollTop > 473 }">
       <div class="home-main-box">
         <!-- 菜单部分 -->
         <el-row :gutter="0" class="home-main-menu">
@@ -126,6 +138,11 @@ export default {
     return {
       bannerList: [],
       menuList: [
+        {
+          name: "首页",
+          icon: require("@/assets/images/home-menu-icon/home-menu-icon-1.svg"),
+          path: "/",
+        },
         {
           name: "政策咨询",
           icon: require("@/assets/images/home-menu-icon/home-menu-icon-1.svg"),
@@ -154,29 +171,40 @@ export default {
         {
           name: "适应性培训",
           icon: require("@/assets/images/home-menu-icon/home-menu-icon-6.svg"),
-          path: '/adaptivetraining'
+          path: "/adaptivetraining",
         },
         {
           name: "学历提升",
           icon: require("@/assets/images/home-menu-icon/home-menu-icon-7.svg"),
-          path: '/educationpromote'
+          path: "/educationpromote",
         },
         {
           name: "创业指引",
           icon: require("@/assets/images/home-menu-icon/home-menu-icon-8.svg"),
-          path: '/workguide'
+          path: "/workguide",
         },
       ],
       newsList: [],
       noticeList: [],
       activeName: "first",
       parseTime: parseTime,
+      scrollTop: 0,
     };
   },
   created() {
     this.initData();
   },
+  mounted() {
+    const that = this;
+    window.addEventListener("scroll", that.scrollHander);
+  },
+  destroyed() {
+    window.removeEventListener('scroll', this.scrollHander)
+  },
   methods: {
+    scrollHander(e) {
+      this.scrollTop = e.srcElement.scrollingElement.scrollTop;
+    },
     initData() {
       this.getBanner();
       this.getNews();
@@ -247,14 +275,13 @@ export default {
 
 <style lang="scss" scoped>
 .home {
-  height: 100%;
   &-carousel {
     .image {
       width: 100%;
       height: 100%;
     }
     .image-slot {
-      line-height: 645px;
+      line-height: 400px;
       text-align: center;
     }
     :deep(.el-carousel__indicators) {
@@ -278,6 +305,34 @@ export default {
       border-radius: 10px;
     }
   }
+  &-menu {
+    background-color: #416050;
+    width: 100%;
+    height: 104px;
+    line-height: 104px;
+    &-list {
+      width: 70%;
+      min-width: 600px;
+      display: flex;
+      justify-content: space-between;
+      margin: 0 auto;
+      &-item {
+        color: #fff;
+        font-size: 22px;
+        padding: 0 15px;
+        cursor: pointer;
+        &:hover {
+          background-color: #478364;
+        }
+      }
+    }
+  }
+  .home-menu-fixed {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 111;
+  }
   &-main {
     width: 70%;
     min-height: 100vh;
@@ -286,9 +341,6 @@ export default {
     position: relative;
     &-box {
       width: 100%;
-      position: absolute;
-      top: -53px;
-      z-index: 1000;
     }
     &-menu {
       width: 100%;
@@ -409,5 +461,8 @@ export default {
       }
     }
   }
+  .home-main-top {
+    margin-top: 104px;
+  }
 }
 </style>

src/views/SkillTraining/CourseVideo/CourseVideoIndex.vue

@@ -3,10 +3,68 @@
  * @Author: 空白格
  * @Date: 2022-08-16 13:29:35
  * @LastEditors: 空白格
- * @LastEditTime: 2022-08-16 13:29:35
+ * @LastEditTime: 2022-08-16 16:19:52
  * @FilePath: \veterans_client_web\src\views\SkillTraining\CourseVideo\CourseVideoIndex.vue
  * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
 -->
 <template>
-  <div>课程视频</div>
+  <div class="app-main course-video">
+    <div class="course-video-breadcrumb">
+      <div class="app-main-box course-video-breadcrumb-box">
+        <el-breadcrumb separator-class="el-icon-arrow-right">
+          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+          <el-breadcrumb-item :to="{ path: '/skilltraining' }">技能培训</el-breadcrumb-item>
+          <el-breadcrumb-item>课程视频</el-breadcrumb-item>
+        </el-breadcrumb>
+      </div>
+    </div>
+    <div class="course-video-header">
+      <div class="app-main-box course-video-header-box">22222</div>
+    </div>
+  </div>
 </template>
+
+<script>
+export default {
+  name: "CourseVideoIndex",
+  data() {
+    return {};
+  },
+  created() {
+    console.log(this.$router);
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.course-video {
+  &-breadcrumb {
+    background-color: #43565f;
+    height: 57px;
+    &-box {
+      margin: 0 auto;
+      :deep(.el-breadcrumb) {
+        height: 57px;
+        line-height: 57px;
+      }
+      :deep(.el-breadcrumb__inner) {
+        color: #fff;
+        font-size: 20px;
+      }
+      :deep(.el-breadcrumb__separator) {
+        color: #fff;
+        font-size: 20px;
+      }
+      :deep(.el-breadcrumb__inner.is-link) {
+        font-weight: normal;
+      }
+    }
+  }
+  &-header {
+    background: #181c1e;
+    &-box {
+      margin: 0 auto;
+    }
+  }
+}
+</style>