|
|
@@ -3,7 +3,7 @@
|
|
|
* @Author: 空白格
|
|
|
* @Date: 2022-08-10 11:26:40
|
|
|
* @LastEditors: 空白格
|
|
|
- * @LastEditTime: 2022-08-30 10:57:11
|
|
|
+ * @LastEditTime: 2022-08-30 16:04:52
|
|
|
* @FilePath: \veterans_client_web\src\views\Home\HomeIndex.vue
|
|
|
* @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
|
|
|
-->
|
|
|
@@ -29,220 +29,10 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="home-main-box">
|
|
|
- <div class="home-main-news-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
|
|
|
- @click="
|
|
|
- jumpPage('newsdetails', {
|
|
|
- id: item.artId,
|
|
|
- type: 'news',
|
|
|
- })
|
|
|
- "
|
|
|
- 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"
|
|
|
- @click="
|
|
|
- jumpPage('newsdetails', {
|
|
|
- id: item.artId,
|
|
|
- type: 'news',
|
|
|
- })
|
|
|
- "
|
|
|
- >
|
|
|
- {{ 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
|
|
|
- @click="
|
|
|
- jumpPage('newsdetails', {
|
|
|
- id: item.artId,
|
|
|
- type: 'news',
|
|
|
- })
|
|
|
- "
|
|
|
- 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
|
|
|
- @click="jumpPage('noticedetails', { id: item.id })"
|
|
|
- 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>
|
|
|
- </div>
|
|
|
- <div class="home-main-policy-box">
|
|
|
- <!-- 政策资讯部分 -->
|
|
|
- <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"
|
|
|
- @click="
|
|
|
- jumpPage('/policyadvice/bannerdetails', {
|
|
|
- id: item.id,
|
|
|
- type: 2,
|
|
|
- })
|
|
|
- "
|
|
|
- >
|
|
|
- <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
|
|
|
- @click="
|
|
|
- jumpPage('newsdetails', {
|
|
|
- id: item.artId,
|
|
|
- type: 'policy',
|
|
|
- })
|
|
|
- "
|
|
|
- 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 class="more-btn" @click="jumpPage('/policyadvice')">
|
|
|
- 更多
|
|
|
- </div>
|
|
|
- </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"
|
|
|
- @click="jumpPage('/policyadvice')"
|
|
|
- ></div>
|
|
|
- <div
|
|
|
- class="hmpc-right-list-btn hmpc-right-list-btn-2"
|
|
|
- @click="jumpPage('/recruitmentemployment')"
|
|
|
- ></div>
|
|
|
- <div
|
|
|
- class="hmpc-right-list-btn hmpc-right-list-btn-3"
|
|
|
- @click="jumpPage('/skilltraining')"
|
|
|
- ></div>
|
|
|
- <div
|
|
|
- class="hmpc-right-list-btn hmpc-right-list-btn-4"
|
|
|
- @click="jumpPage('/educationpromote')"
|
|
|
- ></div>
|
|
|
- <div
|
|
|
- class="hmpc-right-list-btn hmpc-right-list-btn-5"
|
|
|
- @click="jumpPage('/workguide')"
|
|
|
- ></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
+ <!-- 新闻通知 -->
|
|
|
+ <news-notice @getLastNews="getLastNews" />
|
|
|
+ <!-- 政策资讯 -->
|
|
|
+ <policy-information />
|
|
|
<!-- 院校合作 -->
|
|
|
<institutional-cooperation />
|
|
|
<!-- 企业合作 -->
|
|
|
@@ -264,18 +54,21 @@
|
|
|
<el-image
|
|
|
class="image"
|
|
|
:src="require('@/assets/images/email-icon.svg')"
|
|
|
+ @click="openWechatCode('email')"
|
|
|
></el-image>
|
|
|
</div>
|
|
|
<div class="home-operation-fixed-item">
|
|
|
<el-image
|
|
|
class="image"
|
|
|
:src="require('@/assets/images/telephone-icon.svg')"
|
|
|
+ @click="openWechatCode('phone')"
|
|
|
></el-image>
|
|
|
</div>
|
|
|
<div class="home-operation-fixed-item">
|
|
|
<el-image
|
|
|
class="image"
|
|
|
:src="require('@/assets/images/weixin-icon.svg')"
|
|
|
+ @click="openWechatCode('wechat')"
|
|
|
></el-image>
|
|
|
</div>
|
|
|
<div
|
|
|
@@ -289,29 +82,47 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <!-- 微信二维码 -->
|
|
|
+ <el-dialog
|
|
|
+ class="wechat-dialog"
|
|
|
+ :title="dialogObj.title"
|
|
|
+ :visible.sync="dialogObj.open"
|
|
|
+ width="300px"
|
|
|
+ :before-close="handleCloseWechat"
|
|
|
+ >
|
|
|
+ <template v-if="dialogObj.type === 'wechat'">
|
|
|
+ <div class="wechat-qrcode" ref="qrcode"></div>
|
|
|
+ </template>
|
|
|
+ <template v-if="dialogObj.type === 'phone'">
|
|
|
+ <div class="phone-number">联系方式：{{ dialogObj.phone }}</div>
|
|
|
+ </template>
|
|
|
+ <template v-if="dialogObj.type === 'email'">
|
|
|
+ <div class="phone-number">联系邮箱：{{ dialogObj.email }}</div>
|
|
|
+ </template>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="handleCloseWechat">取 消</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
</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 NewsNotice from "./components/NewsNotice.vue";
|
|
|
+import PolicyInformation from "./components/PolicyInformation";
|
|
|
import InstitutionalCooperation from "./components/InstitutionalCooperation";
|
|
|
import EnterpriseCooperation from "./components/EnterpriseCooperation";
|
|
|
import FriendshipLink from "./components/FriendshipLink";
|
|
|
+import { getDictData } from "@/api/Dict";
|
|
|
+import QRCode from "qrcodejs2";
|
|
|
export default {
|
|
|
name: "HomeIndex",
|
|
|
components: {
|
|
|
HeaderBanner,
|
|
|
MenuNavigation,
|
|
|
+ NewsNotice,
|
|
|
+ PolicyInformation,
|
|
|
InstitutionalCooperation,
|
|
|
EnterpriseCooperation,
|
|
|
FriendshipLink,
|
|
|
@@ -319,22 +130,19 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
latestNews: {},
|
|
|
- newsList: [],
|
|
|
- noticeList: [],
|
|
|
- activeName: "first",
|
|
|
- parseTime: parseTime,
|
|
|
scrollTop: 0,
|
|
|
- policyObj: {
|
|
|
- loading: false,
|
|
|
- tabCur: "",
|
|
|
- policyTypeList: [],
|
|
|
- bannerList: [],
|
|
|
- policyList: [],
|
|
|
+ dialogObj: {
|
|
|
+ open: false,
|
|
|
+ title: "",
|
|
|
+ url: "",
|
|
|
+ phone: "",
|
|
|
+ email: "",
|
|
|
+ type: "wechat",
|
|
|
},
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
|
- this.initData();
|
|
|
+ this.getDict();
|
|
|
},
|
|
|
mounted() {
|
|
|
const that = this;
|
|
|
@@ -347,114 +155,26 @@ export default {
|
|
|
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 ?? [];
|
|
|
+ getDictData({ key: "gateway_home_function" }).then((res) => {
|
|
|
+ res.data.length > 0 ? this.dialogObj.url = res.data[0].text : '';
|
|
|
+ res.data.length > 1 ? this.dialogObj.phone = res.data[1].text : '';
|
|
|
+ res.data.length > 2 ? this.dialogObj.email = res.data[2].text : '';
|
|
|
});
|
|
|
},
|
|
|
/**
|
|
|
- * tab点击事件
|
|
|
- * @date 2022-08-10
|
|
|
- * @param {any} tab
|
|
|
+ * 最新一条新闻
|
|
|
+ * @date 2022-08-30
|
|
|
+ * @param {any} obj
|
|
|
* @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();
|
|
|
+ getLastNews(obj) {
|
|
|
+ this.latestNews = obj;
|
|
|
},
|
|
|
/**
|
|
|
* 跳转到指定页面
|
|
|
@@ -462,9 +182,9 @@ export default {
|
|
|
* @param {any} path
|
|
|
* @returns {any}
|
|
|
*/
|
|
|
- jumpPage(path, param) {
|
|
|
+ jumpPage(path, query) {
|
|
|
if (path) {
|
|
|
- this.$router.push({ path: path, query: param });
|
|
|
+ this.$router.push({ path, query });
|
|
|
}
|
|
|
},
|
|
|
/**
|
|
|
@@ -487,6 +207,49 @@ export default {
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
+ /**
|
|
|
+ * 打开微信二维码
|
|
|
+ * @date 2022-08-30
|
|
|
+ * @returns {any}
|
|
|
+ */
|
|
|
+ openWechatCode(type) {
|
|
|
+ this.dialogObj.open = true;
|
|
|
+ this.dialogObj.type = type;
|
|
|
+ switch (type) {
|
|
|
+ case "email":
|
|
|
+ this.dialogObj.title = "邮箱";
|
|
|
+ break;
|
|
|
+ case "phone":
|
|
|
+ this.dialogObj.title = "联系方式";
|
|
|
+ break;
|
|
|
+ case "wechat":
|
|
|
+ this.dialogObj.title = "移动端二维码";
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ if (this.dialogObj.type === "wechat") {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ new QRCode(this.$refs.qrcode, {
|
|
|
+ text: this.dialogObj.url, // url地址 文本等需要转换为二维码的内容
|
|
|
+ width: 200,
|
|
|
+ height: 200,
|
|
|
+ colorDark: "#333333", // 二维码颜色
|
|
|
+ colorLight: "#ffffff", // 二维码背景色
|
|
|
+ correctLevel: QRCode.CorrectLevel.L, // 容错率，L/M/H
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 关闭微信弹框
|
|
|
+ * @date 2022-08-30
|
|
|
+ * @returns {any}
|
|
|
+ */
|
|
|
+ handleCloseWechat() {
|
|
|
+ if (this.dialogObj.type === "wechat") {
|
|
|
+ this.$refs.qrcode.innerHTML = "";
|
|
|
+ }
|
|
|
+ this.dialogObj.open = false;
|
|
|
+ },
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
@@ -527,316 +290,6 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- &-news-box {
|
|
|
- background-color: #f4f4f4;
|
|
|
- }
|
|
|
- &-news {
|
|
|
- width: 70%;
|
|
|
- margin: 0 auto;
|
|
|
- min-width: 600px;
|
|
|
- padding: 47px 0;
|
|
|
- border-radius: 5px;
|
|
|
- margin-top: 14px;
|
|
|
- &-left {
|
|
|
- margin-right: 30px;
|
|
|
- .image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- border-radius: 2px;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- .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;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- :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-box {
|
|
|
- background: #f7f7f7;
|
|
|
- }
|
|
|
- &-policy {
|
|
|
- width: 70%;
|
|
|
- margin: 0 auto;
|
|
|
- min-width: 600px;
|
|
|
- padding: 40px 0;
|
|
|
- &-carousel {
|
|
|
- cursor: pointer;
|
|
|
- :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;
|
|
|
- position: relative;
|
|
|
- :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;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .more-btn {
|
|
|
- position: absolute;
|
|
|
- right: 0;
|
|
|
- top: 12px;
|
|
|
- color: #727272;
|
|
|
- font-size: 14px;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- }
|
|
|
- .hmpc-right {
|
|
|
- margin-bottom: 20px;
|
|
|
- &-title {
|
|
|
- font-size: 20px;
|
|
|
- color: #163da5;
|
|
|
- margin-bottom: 10px;
|
|
|
- }
|
|
|
- &-list {
|
|
|
- &-btn {
|
|
|
- width: 100%;
|
|
|
- text-align: center;
|
|
|
- height: 47px;
|
|
|
- line-height: 47px;
|
|
|
- border-radius: 5px;
|
|
|
- cursor: pointer;
|
|
|
- font-size: 14px;
|
|
|
- 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;
|
|
|
@@ -878,5 +331,12 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .wechat-qrcode {
|
|
|
+ width: 200px;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ .wechat-dialog:deep(.el-dialog__footer) {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
