veterans_client_web/src/views/Home/HomeIndex.vue

<!--
 * @Description: 首页
 * @Author: 空白格
 * @Date: 2022-08-10 11:26:40
 * @LastEditors: 空白格
 * @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">
    <!-- 顶部轮播 -->
    <header-banner />
    <!-- 菜单导航 -->
    <menu-navigation :scrollTop="scrollTop" />
    <div class="home-main" :class="{ 'home-main-top': scrollTop > 473 }">
      <!-- 新闻最新一条 -->
      <div class="home-main-latest">
        <div class="home-main-latest-content">
          <div class="hmlc-title">{{ latestNews.artTitle }}</div>
          <div class="hmlc-content" v-html="latestNews.artContent"></div>
        </div>
      </div>
      <div class="home-main-box">
        <!-- 新闻部分 -->
        <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="395px">
                <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="cover"
                  >
                    <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 class="more-btn" @click="jumpPage('/newscenter')">更多</div>
            </div>
          </el-col>
        </el-row>
        <!-- 政策咨询部分 -->
        <el-row :gutter="0" class="home-main-policy">
          <el-col :span="24" class="home-main-policy-carousel">
            <el-carousel :interval="5000" arrow="never" height="140px">
              <el-carousel-item
                v-for="(item, index) in policyObj.bannerList"
                :key="index"
              >
                <el-image
                  class="image"
                  :src="
                    item.bannerUrl ||
                    require('@/assets/images/default-news.jpg')
                  "
                  fit="cover"
                >
                  <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="cover"
                    ></el-image>
                  </div>
                </el-image>
                <div class="title">
                  {{ item.artTitle || "" }}
                </div>
              </el-carousel-item>
            </el-carousel>
          </el-col>
          <el-col
            :span="24"
            class="home-main-policy-content"
            v-loading="policyObj.loading"
          >
            <el-row :gutter="54">
              <el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
                <div class="hmpc-left">
                  <el-tabs
                    v-model="policyObj.tabCur"
                    @tab-click="handlePolicyClick"
                  >
                    <el-tab-pane
                      v-for="(item, index) in policyObj.policyTypeList"
                      :key="index"
                      :label="item.label"
                      :name="item.text"
                    >
                      <div
                        class="hmpc-left-list"
                        v-if="policyObj.policyList.length"
                      >
                        <div
                          class="hmpc-left-list-item"
                          v-for="(item, index) in policyObj.policyList"
                          :key="index"
                        >
                          <div class="title">{{ item.artTitle }}</div>
                          <div class="date">
                            {{ parseTime(item.artPostTime, "{y}-{m}-{d}") }}
                          </div>
                        </div>
                      </div>
                      <el-empty description="列表为空" v-else></el-empty>
                    </el-tab-pane>
                  </el-tabs>
                </div>
              </el-col>
              <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                <div class="hmpc-right">
                  <div class="hmpc-right-title">退役军人服务</div>
                  <div class="hmpc-right-list">
                    <div
                      class="hmpc-right-list-btn hmpc-right-list-btn-1"
                    ></div>
                    <div
                      class="hmpc-right-list-btn hmpc-right-list-btn-2"
                    ></div>
                    <div
                      class="hmpc-right-list-btn hmpc-right-list-btn-3"
                    ></div>
                    <div
                      class="hmpc-right-list-btn hmpc-right-list-btn-4"
                    ></div>
                    <div
                      class="hmpc-right-list-btn hmpc-right-list-btn-5"
                    ></div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <!-- 院校合作 -->
        <institutional-cooperation />
        <!-- 企业合作 -->
        <enterprise-cooperation />
      </div>
    </div>
    <!-- 友情链接 -->
    <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>

<script>
import { parseTime } from "@/utils/utils";
import {
  getBannerList,
  getNewsList,
  getNoticeList,
  getNewsData,
} 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,
  },
  data() {
    return {
      latestNews: {},
      newsList: [],
      noticeList: [],
      activeName: "first",
      parseTime: parseTime,
      scrollTop: 0,
      policyObj: {
        loading: false,
        tabCur: "",
        policyTypeList: [],
        bannerList: [],
        policyList: [],
      },
    };
  },
  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.getDict();
      this.getNews();
      this.getNotice();
      this.getPolicyBannerList();
    },
    /**
     * 获取字典数据
     * @date 2022-08-17
     * @returns {any}
     */
    getDict() {
      getDictData({ key: "policy_type" }).then((res) => {
        this.policyObj.policyTypeList = res?.data;
        this.policyObj.policyTypeList.length &&
          (this.policyObj.tabCur = this.policyObj.policyTypeList[0].text) &&
          this.getPolicyList();
      });
    },
    /**
     * 获取新闻
     * @date 2022-08-10
     * @returns {any}
     */
    getNews() {
      getNewsList({
        artCategoryId: 2,
        pageNum: 1,
        pageSize: 10,
      }).then((res) => {
        this.newsList = res?.rows ?? [];
        if (this.newsList.length) {
          this.getNewsInfo(this.newsList[0].artId);
        }
      });
    },
    /**
     * 获取新闻详情
     * @date 2022-08-17
     * @param {any} id
     * @returns {any}
     */
    getNewsInfo(id) {
      getNewsData({ id }).then((res) => {
        this.latestNews = res?.data ?? [];
      });
    },
    /**
     * 获取公告
     * @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-17
     * @returns {any}
     */
    getPolicyBannerList() {
      getBannerList({ type: 2 }).then((res) => {
        this.policyObj.bannerList = res.data;
      });
    },
    /**
     * 获取咨询列表
     * @date 2022-08-17
     * @returns {any}
     */
    getPolicyList() {
      this.policyObj.loading = true;
      getPolicyData({
        pageNum: 1,
        pageSize: 10,
        artCategoryId: this.policyObj.tabCur,
      }).then((res) => {
        this.policyObj.policyList = res?.rows;
        this.policyObj.loading = false;
      });
    },
    /**
     * 政策咨询tab切换触发
     * @date 2022-08-17
     * @param {any} tab
     * @returns {any}
     */
    handlePolicyClick(tab) {
      this.policyObj.tabCur = tab.name;
      this.getPolicyList();
    },
    /**
     * 跳转到指定页面
     * @date 2022-08-11
     * @param {any} path
     * @returns {any}
     */
    jumpPage(path) {
      if (path) {
        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 {
  &-main {
    &-latest {
      background-color: #fff;
      &-content {
        width: 70%;
        margin: 0 auto;
        min-width: 600px;
        padding: 17px 0;
        .hmlc-title {
          font-size: 28px;
          color: #ff001a;
          text-align: center;
          margin-bottom: 10px;
        }
        .hmlc-content {
          font-size: 12px;
          line-height: 17px;
          overflow: hidden;
          text-overflow: ellipsis;
          text-overflow: -o-ellipsis-lastline;
          display: -webkit-box;
          -webkit-line-clamp: 2; /* 块元素显示的文本的行数 */
          line-clamp: 2;
          -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 ,盒子行数根据高度来计算 */
          overflow-wrap: break-word; /* 设置div换行 */
          p {
            img {
              display: none !important;
            }
          }
        }
      }
    }
    &-box {
      width: 70%;
      margin: 0 auto;
      min-width: 600px;
    }
    &-news {
      width: 100%;
      padding: 47px 0;
      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 {
        position: relative;
        :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;
            }
          }
        }
        .more-btn {
          position: absolute;
          right: 0;
          top: 12px;
          color: #727272;
          font-size: 14px;
          cursor: pointer;
        }
      }
    }
    &-policy {
      padding: 40px 0;
      &-carousel {
        :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;
        }
        .image {
          width: 100%;
          height: 100%;
        }
      }
      &-content {
        margin-top: 50px;
        .hmpc-left {
          margin-bottom: 20px;
          :deep(.el-tabs__item) {
            font-size: 20px;
            font-weight: 500;
            color: #666666;
          }
          :deep(.el-tabs__item:hover) {
            color: #163da5;
          }
          :deep(.el-tabs__item.is-active) {
            color: #163da5;
          }
          :deep(.el-tabs__active-bar) {
            background-color: #163da5;
          }
          &-list {
            padding: 10px 0;
            &-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;
              }
            }
          }
        }
        .hmpc-right {
          margin-bottom: 20px;
          &-title {
            font-size: 26px;
            color: #163da5;
            margin-bottom: 10px;
          }
          &-list {
            &-btn {
              width: 100%;
              text-align: center;
              height: 47px;
              line-height: 47px;
              border-radius: 5px;
              cursor: pointer;
              font-size: 18px;
              margin-bottom: 7px;
              position: relative;
              &:hover {
                opacity: 0.8;
              }
              &::before {
                content: "";
                display: inline-block;
                width: 25px;
                height: 25px;
                background-size: 100% 100%;
                background-repeat: no-repeat;
                background-position: center center;
                vertical-align: middle;
                position: absolute;
                left: calc(45% - 35px);
                top: 50%;
                margin-top: -12.5px;
              }
              &::after {
                position: absolute;
                left: 45%;
              }
            }
            &-btn-1 {
              background-image: linear-gradient(
                137deg,
                #c5fff6 0%,
                #5debd8 100%
              );
              color: #028170;
              &::before {
                background-image: url("./../../assets/images/zhengcezixun.svg");
              }
              &::after {
                content: "政策咨询";
              }
            }
            &-btn-2 {
              background-image: linear-gradient(
                137deg,
                #fff6e3 0%,
                #f7b6a3 100%
              );
              color: #ff6253;
              &::before {
                background-image: url("./../../assets/images/woyaojiuye.svg");
              }
              &::after {
                content: "我要就业";
              }
            }
            &-btn-3 {
              background-image: linear-gradient(
                137deg,
                #fff6e3 0%,
                #fae08a 100%
              );
              color: #ff8d34;
              &::before {
                background-image: url("./../../assets/images/woyaoxuejineng.svg");
              }
              &::after {
                content: "我要学技能";
              }
            }
            &-btn-4 {
              background-image: linear-gradient(
                137deg,
                #eee3ff 0%,
                #d3b9ff 100%
              );
              color: #8454d3;
              &::before {
                background-image: url("./../../assets/images/woxiangshengxueli.svg");
              }
              &::after {
                content: "我要升学历";
              }
            }
            &-btn-5 {
              background-image: linear-gradient(
                137deg,
                #c9e9ff 0%,
                #95d2fc 100%
              );
              color: #1b74b4;
              &::before {
                background-image: url("./../../assets/images/woxiangchuangye.svg");
              }
              &::after {
                content: "我想创业";
              }
            }
          }
        }
      }
    }
  }
  .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>