|
|
@@ -1,414 +0,0 @@
|
|
|
-<!--
|
|
|
- * @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>
|
