|
|
@@ -3,38 +3,16 @@
|
|
|
* @Author: 空白格
|
|
|
* @Date: 2022-08-10 11:26:40
|
|
|
* @LastEditors: 空白格
|
|
|
- * @LastEditTime: 2022-08-17 17:49:33
|
|
|
+ * @LastEditTime: 2022-08-22 10:22:23
|
|
|
* @FilePath: \veterans_client_web\src\views\Home\HomeIndex.vue
|
|
|
* @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
|
|
|
-->
|
|
|
<template>
|
|
|
<div class="home app-main">
|
|
|
- <!-- 轮播图 -->
|
|
|
- <div class="home-carousel">
|
|
|
- <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="contain">
|
|
|
- <div slot="placeholder" class="image-slot">
|
|
|
- 加载图片中<span class="dot">...</span>
|
|
|
- </div>
|
|
|
- </el-image>
|
|
|
- </el-carousel-item>
|
|
|
- </el-carousel>
|
|
|
- </div>
|
|
|
- <!-- 菜单 -->
|
|
|
- <div class="home-menu" :class="{ 'home-menu-fixed': scrollTop > 473 }">
|
|
|
- <div class="home-menu-list">
|
|
|
- <div
|
|
|
- class="home-menu-list-item"
|
|
|
- :class="{ active: index === 0 }"
|
|
|
- v-for="(item, index) in menuList"
|
|
|
- :key="index"
|
|
|
- @click="jumpPage(item.path)"
|
|
|
- >
|
|
|
- {{ item.name }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <!-- 顶部轮播 -->
|
|
|
+ <header-banner />
|
|
|
+ <!-- 菜单导航 -->
|
|
|
+ <menu-navigation :scrollTop="scrollTop" />
|
|
|
<div class="home-main" :class="{ 'home-main-top': scrollTop > 473 }">
|
|
|
<!-- 新闻最新一条 -->
|
|
|
<div class="home-main-latest">
|
|
|
@@ -111,6 +89,7 @@
|
|
|
</ul>
|
|
|
</el-tab-pane>
|
|
|
</el-tabs>
|
|
|
+ <div class="more-btn" @click="jumpPage('/newscenter')">更多</div>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
@@ -217,7 +196,45 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 友情链接 -->
|
|
|
- <friendship-link/>
|
|
|
+ <friendship-link />
|
|
|
+ <!-- 右侧操作 -->
|
|
|
+ <div class="home-operation">
|
|
|
+ <div class="home-operation-fixed">
|
|
|
+ <div class="home-operation-fixed-item home-operation-fixed-item-1">
|
|
|
+ <el-image
|
|
|
+ class="image"
|
|
|
+ :src="require('@/assets/images/search-icon.svg')"
|
|
|
+ ></el-image>
|
|
|
+ </div>
|
|
|
+ <div class="home-operation-fixed-item">
|
|
|
+ <el-image
|
|
|
+ class="image"
|
|
|
+ :src="require('@/assets/images/email-icon.svg')"
|
|
|
+ ></el-image>
|
|
|
+ </div>
|
|
|
+ <div class="home-operation-fixed-item">
|
|
|
+ <el-image
|
|
|
+ class="image"
|
|
|
+ :src="require('@/assets/images/telephone-icon.svg')"
|
|
|
+ ></el-image>
|
|
|
+ </div>
|
|
|
+ <div class="home-operation-fixed-item">
|
|
|
+ <el-image
|
|
|
+ class="image"
|
|
|
+ :src="require('@/assets/images/weixin-icon.svg')"
|
|
|
+ ></el-image>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="home-operation-fixed-item home-operation-fixed-item-last"
|
|
|
+ @click="backToTop"
|
|
|
+ >
|
|
|
+ <el-image
|
|
|
+ class="image"
|
|
|
+ :src="require('@/assets/images/top-icon.svg')"
|
|
|
+ ></el-image>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -231,65 +248,22 @@ import {
|
|
|
} from "@/api/Home";
|
|
|
import { getDictData } from "@/api/Dict";
|
|
|
import { getPolicyData } from "@/api/PolicyAdvice";
|
|
|
+import HeaderBanner from "./components/HeaderBanner";
|
|
|
+import MenuNavigation from "./components/MenuNavigation";
|
|
|
import InstitutionalCooperation from "./components/InstitutionalCooperation";
|
|
|
import EnterpriseCooperation from "./components/EnterpriseCooperation";
|
|
|
import FriendshipLink from "./components/FriendshipLink";
|
|
|
export default {
|
|
|
name: "HomeIndex",
|
|
|
components: {
|
|
|
+ HeaderBanner,
|
|
|
+ MenuNavigation,
|
|
|
InstitutionalCooperation,
|
|
|
EnterpriseCooperation,
|
|
|
- FriendshipLink
|
|
|
+ FriendshipLink,
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- bannerList: [],
|
|
|
- menuList: [
|
|
|
- {
|
|
|
- name: "首页",
|
|
|
- icon: require("@/assets/images/home-menu-icon/home-menu-icon-1.svg"),
|
|
|
- },
|
|
|
- {
|
|
|
- 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",
|
|
|
- },
|
|
|
- ],
|
|
|
latestNews: {},
|
|
|
newsList: [],
|
|
|
noticeList: [],
|
|
|
@@ -321,7 +295,6 @@ export default {
|
|
|
},
|
|
|
initData() {
|
|
|
this.getDict();
|
|
|
- this.getBanner();
|
|
|
this.getNews();
|
|
|
this.getNotice();
|
|
|
this.getPolicyBannerList();
|
|
|
@@ -339,16 +312,6 @@ export default {
|
|
|
this.getPolicyList();
|
|
|
});
|
|
|
},
|
|
|
- /**
|
|
|
- * 获取轮播图
|
|
|
- * @date 2022-08-10
|
|
|
- * @returns {any}
|
|
|
- */
|
|
|
- getBanner() {
|
|
|
- getBannerList({ type: 0 }).then((res) => {
|
|
|
- this.bannerList = res.data;
|
|
|
- });
|
|
|
- },
|
|
|
/**
|
|
|
* 获取新闻
|
|
|
* @date 2022-08-10
|
|
|
@@ -450,69 +413,32 @@ export default {
|
|
|
this.$router.push(path);
|
|
|
}
|
|
|
},
|
|
|
+ /**
|
|
|
+ * 返回顶部
|
|
|
+ * @date 2022-08-22
|
|
|
+ * @returns {any}
|
|
|
+ */
|
|
|
+ backToTop() {
|
|
|
+ cancelAnimationFrame(this.timer);
|
|
|
+ const self = this;
|
|
|
+ self.timer = requestAnimationFrame(function fn() {
|
|
|
+ const oTop =
|
|
|
+ document.body.scrollTop || document.documentElement.scrollTop;
|
|
|
+ if (oTop > 0) {
|
|
|
+ document.body.scrollTop = document.documentElement.scrollTop =
|
|
|
+ oTop - 50;
|
|
|
+ self.timer = requestAnimationFrame(fn);
|
|
|
+ } else {
|
|
|
+ cancelAnimationFrame(self.timer);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.home {
|
|
|
- &-carousel {
|
|
|
- .image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- .image-slot {
|
|
|
- line-height: 400px;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- :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;
|
|
|
- }
|
|
|
- }
|
|
|
- &-menu {
|
|
|
- background-color: #416050;
|
|
|
- width: 100%;
|
|
|
- line-height: 104px;
|
|
|
- &-list {
|
|
|
- width: 70%;
|
|
|
- min-width: 600px;
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- // justify-content: space-between;
|
|
|
- margin: 0 auto;
|
|
|
- &-item {
|
|
|
- color: #fff;
|
|
|
- font-size: 22px;
|
|
|
- padding: 0 30px;
|
|
|
- cursor: pointer;
|
|
|
- &:hover {
|
|
|
- background-color: #478364;
|
|
|
- }
|
|
|
- }
|
|
|
- .active {
|
|
|
- background-color: #478364;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .home-menu-fixed {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- z-index: 111;
|
|
|
- }
|
|
|
&-main {
|
|
|
&-latest {
|
|
|
background-color: #fff;
|
|
|
@@ -600,6 +526,7 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
&-right {
|
|
|
+ position: relative;
|
|
|
:deep(.el-tabs__item) {
|
|
|
font-size: 20px;
|
|
|
font-weight: 500;
|
|
|
@@ -643,6 +570,14 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .more-btn {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 12px;
|
|
|
+ color: #727272;
|
|
|
+ font-size: 14px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
&-policy {
|
|
|
@@ -833,5 +768,42 @@ export default {
|
|
|
.home-main-top {
|
|
|
margin-top: 104px;
|
|
|
}
|
|
|
+ &-operation {
|
|
|
+ position: fixed;
|
|
|
+ top: 50%;
|
|
|
+ right: 0;
|
|
|
+ margin-top: -214px;
|
|
|
+ z-index: 1000;
|
|
|
+ &-fixed {
|
|
|
+ &-item {
|
|
|
+ width: 95px;
|
|
|
+ height: 95px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ background: #416050;
|
|
|
+ margin-bottom: 2px;
|
|
|
+ cursor: pointer;
|
|
|
+ &:nth-last-child(2) {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+ &:first-child,
|
|
|
+ &:last-child {
|
|
|
+ background: #73aa8d;
|
|
|
+ }
|
|
|
+ .image {
|
|
|
+ width: 48px;
|
|
|
+ height: 48px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &-item-last {
|
|
|
+ height: 42px;
|
|
|
+ .image {
|
|
|
+ width: 26px;
|
|
|
+ height: 26px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
