|
@@ -3,7 +3,7 @@
|
|
|
* @Author: 空白格
|
|
|
* @Date: 2022-08-10 11:26:40
|
|
|
* @LastEditors: 空白格
|
|
|
- * @LastEditTime: 2022-08-16 17:30:29
|
|
|
+ * @LastEditTime: 2022-08-17 16:55:45
|
|
|
* @FilePath: \veterans_client_web\src\views\Home\HomeIndex.vue
|
|
|
* @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
|
|
|
-->
|
|
@@ -13,7 +13,7 @@
|
|
|
<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">
|
|
|
+ <el-image class="image" :src="item.bannerUrl" fit="cover">
|
|
|
<div slot="placeholder" class="image-slot">
|
|
|
加载图片中<span class="dot">...</span>
|
|
|
</div>
|
|
@@ -26,39 +26,29 @@
|
|
|
<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>
|
|
|
<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-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 :interval="5000" arrow="never" height="395px">
|
|
|
<el-carousel-item
|
|
|
v-for="(item, index) in newsList"
|
|
|
:key="index"
|
|
@@ -69,7 +59,7 @@
|
|
|
item.artImage ||
|
|
|
require('@/assets/images/default-news.jpg')
|
|
|
"
|
|
|
- fit="fill"
|
|
|
+ fit="cover"
|
|
|
>
|
|
|
<div slot="placeholder" class="image-slot">
|
|
|
加载图片中<span class="dot">...</span>
|
|
@@ -124,16 +114,133 @@
|
|
|
</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>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { parseTime } from "@/utils/utils";
|
|
|
-import { getBannerList, getNewsList, getNoticeList } from "@/api/Home";
|
|
|
+import {
|
|
|
+ getBannerList,
|
|
|
+ getNewsList,
|
|
|
+ getNoticeList,
|
|
|
+ getNewsData,
|
|
|
+} from "@/api/Home";
|
|
|
+import { getDictData } from "@/api/Dict";
|
|
|
+import { getPolicyData } from "@/api/PolicyAdvice";
|
|
|
+import InstitutionalCooperation from "./components/InstitutionalCooperation";
|
|
|
+import EnterpriseCooperation from "./components/EnterpriseCooperation";
|
|
|
+import FriendshipLink from "./components/FriendshipLink";
|
|
|
export default {
|
|
|
name: "HomeIndex",
|
|
|
+ components: {
|
|
|
+ InstitutionalCooperation,
|
|
|
+ EnterpriseCooperation,
|
|
|
+ FriendshipLink
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
bannerList: [],
|
|
@@ -141,7 +248,6 @@ export default {
|
|
|
{
|
|
|
name: "首页",
|
|
|
icon: require("@/assets/images/home-menu-icon/home-menu-icon-1.svg"),
|
|
|
- path: "/",
|
|
|
},
|
|
|
{
|
|
|
name: "政策咨询",
|
|
@@ -184,11 +290,19 @@ export default {
|
|
|
path: "/workguide",
|
|
|
},
|
|
|
],
|
|
|
+ latestNews: {},
|
|
|
newsList: [],
|
|
|
noticeList: [],
|
|
|
activeName: "first",
|
|
|
parseTime: parseTime,
|
|
|
scrollTop: 0,
|
|
|
+ policyObj: {
|
|
|
+ loading: false,
|
|
|
+ tabCur: "",
|
|
|
+ policyTypeList: [],
|
|
|
+ bannerList: [],
|
|
|
+ policyList: [],
|
|
|
+ },
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
@@ -199,16 +313,31 @@ export default {
|
|
|
window.addEventListener("scroll", that.scrollHander);
|
|
|
},
|
|
|
destroyed() {
|
|
|
- window.removeEventListener('scroll', this.scrollHander)
|
|
|
+ window.removeEventListener("scroll", this.scrollHander);
|
|
|
},
|
|
|
methods: {
|
|
|
scrollHander(e) {
|
|
|
this.scrollTop = e.srcElement.scrollingElement.scrollTop;
|
|
|
},
|
|
|
initData() {
|
|
|
+ this.getDict();
|
|
|
this.getBanner();
|
|
|
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();
|
|
|
+ });
|
|
|
},
|
|
|
/**
|
|
|
* 获取轮播图
|
|
@@ -229,9 +358,23 @@ export default {
|
|
|
getNewsList({
|
|
|
artCategoryId: 2,
|
|
|
pageNum: 1,
|
|
|
- pageSize: 5,
|
|
|
+ pageSize: 10,
|
|
|
}).then((res) => {
|
|
|
- this.newsList = res.rows;
|
|
|
+ this.newsList = res?.rows ?? [];
|
|
|
+ if (this.newsList.length) {
|
|
|
+ this.getNewsInfo(this.newsList[1].artId);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 获取新闻详情
|
|
|
+ * @date 2022-08-17
|
|
|
+ * @param {any} id
|
|
|
+ * @returns {any}
|
|
|
+ */
|
|
|
+ getNewsInfo(id) {
|
|
|
+ getNewsData({ id }).then((res) => {
|
|
|
+ this.latestNews = res?.data ?? [];
|
|
|
});
|
|
|
},
|
|
|
/**
|
|
@@ -241,7 +384,7 @@ export default {
|
|
|
*/
|
|
|
getNotice() {
|
|
|
getNoticeList().then((res) => {
|
|
|
- this.noticeList = res.data;
|
|
|
+ this.noticeList = res?.data ?? [];
|
|
|
});
|
|
|
},
|
|
|
/**
|
|
@@ -260,6 +403,42 @@ export default {
|
|
|
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
|
|
@@ -267,7 +446,9 @@ export default {
|
|
|
* @returns {any}
|
|
|
*/
|
|
|
jumpPage(path) {
|
|
|
- this.$router.push(path);
|
|
|
+ if (path) {
|
|
|
+ this.$router.push(path);
|
|
|
+ }
|
|
|
},
|
|
|
},
|
|
|
};
|
|
@@ -284,10 +465,6 @@ export default {
|
|
|
line-height: 400px;
|
|
|
text-align: center;
|
|
|
}
|
|
|
- :deep(.el-carousel__indicators) {
|
|
|
- // 指示器
|
|
|
- bottom: 84px;
|
|
|
- }
|
|
|
:deep(.el-carousel__arrow) {
|
|
|
border: solid 1px rgba($color: #fff, $alpha: 0.7);
|
|
|
}
|
|
@@ -308,23 +485,26 @@ export default {
|
|
|
&-menu {
|
|
|
background-color: #416050;
|
|
|
width: 100%;
|
|
|
- height: 104px;
|
|
|
line-height: 104px;
|
|
|
&-list {
|
|
|
width: 70%;
|
|
|
min-width: 600px;
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ // justify-content: space-between;
|
|
|
margin: 0 auto;
|
|
|
&-item {
|
|
|
color: #fff;
|
|
|
font-size: 22px;
|
|
|
- padding: 0 15px;
|
|
|
+ padding: 0 30px;
|
|
|
cursor: pointer;
|
|
|
&:hover {
|
|
|
background-color: #478364;
|
|
|
}
|
|
|
}
|
|
|
+ .active {
|
|
|
+ background-color: #478364;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.home-menu-fixed {
|
|
@@ -334,41 +514,46 @@ export default {
|
|
|
z-index: 111;
|
|
|
}
|
|
|
&-main {
|
|
|
- width: 70%;
|
|
|
- min-height: 100vh;
|
|
|
- margin: 0 auto;
|
|
|
- min-width: 600px;
|
|
|
- position: relative;
|
|
|
- &-box {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- &-menu {
|
|
|
- width: 100%;
|
|
|
+ &-latest {
|
|
|
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;
|
|
|
+ &-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;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- &-name {
|
|
|
- text-align: center;
|
|
|
- margin-top: 15px;
|
|
|
- }
|
|
|
+ }
|
|
|
+ &-box {
|
|
|
+ width: 70%;
|
|
|
+ margin: 0 auto;
|
|
|
+ min-width: 600px;
|
|
|
}
|
|
|
&-news {
|
|
|
width: 100%;
|
|
|
- background-color: #fff;
|
|
|
- padding: 39px 50px;
|
|
|
+ padding: 47px 0;
|
|
|
border-radius: 5px;
|
|
|
margin-top: 14px;
|
|
|
&-left {
|
|
@@ -460,6 +645,190 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ &-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;
|