|
|
@@ -4,27 +4,85 @@
|
|
|
<el-col :span="24" class="style">
|
|
|
<el-col :span="24" class="top">
|
|
|
<div class="w_1200">
|
|
|
- <top></top>
|
|
|
+ 您好，欢迎访问吉林省高等学校毕业生就业信息网!
|
|
|
</div>
|
|
|
</el-col>
|
|
|
<el-col :span="24" class="banner">
|
|
|
- <banner :bannerlist="bannerlist"></banner>
|
|
|
+ <el-carousel height="300px">
|
|
|
+ <el-carousel-item v-for="(item, index) in bannerlist" :key="index">
|
|
|
+ <el-image :src="item.pic" style="width:100%;height:300px;"></el-image>
|
|
|
+ </el-carousel-item>
|
|
|
+ </el-carousel>
|
|
|
</el-col>
|
|
|
+
|
|
|
<el-col :span="24" class="menu">
|
|
|
- <menuInfo></menuInfo>
|
|
|
+ <div class="w_1200">
|
|
|
+ <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" background-color="#0457c7" text-color="#fff" active-text-color="#fff">
|
|
|
+ <el-menu-item index="1">首页</el-menu-item>
|
|
|
+ <el-menu-item index="2">测试页</el-menu-item>
|
|
|
+ <el-menu-item index="3">测试页</el-menu-item>
|
|
|
+ <el-menu-item index="4">测试页</el-menu-item>
|
|
|
+ <el-menu-item index="5">测试页</el-menu-item>
|
|
|
+ <el-menu-item index="6">测试页</el-menu-item>
|
|
|
+ <el-menu-item index="7">测试页</el-menu-item>
|
|
|
+ <el-menu-item index="8">测试页</el-menu-item>
|
|
|
+ </el-menu>
|
|
|
+ </div>
|
|
|
</el-col>
|
|
|
+
|
|
|
<el-col :span="24" class="main">
|
|
|
<div class="w_1200">
|
|
|
<el-col :span="24" class="mainOne">
|
|
|
- <mainOne :carouselList="carouselList" :noticeList="noticeList" :newsList="newsList"></mainOne>
|
|
|
- </el-col>
|
|
|
- <el-col :span="24" class="mainTwo">
|
|
|
- <mainTwo :noticeList1="noticeList1"></mainTwo>
|
|
|
+ <el-col :span="8" class="left animate__animated animate__fadeInUp">
|
|
|
+ <el-carousel height="300px">
|
|
|
+ <el-carousel-item v-for="(item, index) in carouselList" :key="index">
|
|
|
+ <el-image :src="item.pic" style="width:100%;height:300px;"></el-image>
|
|
|
+ <p class="carouselTitle textOver">{{ item.title }}</p>
|
|
|
+ </el-carousel-item>
|
|
|
+ </el-carousel>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="10" class="center animate__animated animate__fadeInUp">
|
|
|
+ <el-col :span="24" class="top">
|
|
|
+ <el-col :span="20" class="topTitle">
|
|
|
+ <span>测试标题</span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4" class="topLink">
|
|
|
+ <el-link :underline="false">MORE</el-link>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="info">
|
|
|
+ <el-col :span="24" class="infoList" v-for="(item, index) in noticeList" :key="index">
|
|
|
+ <el-col :span="19" class="title textOver">
|
|
|
+ {{ item.title }}
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="5" class="date">
|
|
|
+ {{ item.date }}
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6" class="right animate__animated animate__fadeInUp">
|
|
|
+ <el-col :span="24" class="top">
|
|
|
+ <el-col :span="20" class="topTitle">
|
|
|
+ <span>测试标题</span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4" class="topLink">
|
|
|
+ <el-link :underline="false">MORE</el-link>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="info">
|
|
|
+ <el-col :span="24" class="infoList" v-for="(item, index) in newsList" :key="index">
|
|
|
+ <el-col :span="24" class="title textOver">
|
|
|
+ {{ item.title }}
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
</el-col>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
<el-col :span="24" class="foot">
|
|
|
- 头部
|
|
|
+ 底部
|
|
|
</el-col>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
@@ -32,22 +90,11 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import top from '@/layout/index/top.vue';
|
|
|
-import banner from '@/layout/index/banner.vue';
|
|
|
-import menuInfo from '@/layout/index/menuInfo.vue';
|
|
|
-import mainOne from '@/layout/index/mainOne.vue';
|
|
|
-import mainTwo from '@/layout/index/mainTwo.vue';
|
|
|
import { mapState, createNamespacedHelpers } from 'vuex';
|
|
|
export default {
|
|
|
name: 'index',
|
|
|
props: {},
|
|
|
- components: {
|
|
|
- top,
|
|
|
- banner,
|
|
|
- menuInfo,
|
|
|
- mainOne,
|
|
|
- mainTwo,
|
|
|
- },
|
|
|
+ components: {},
|
|
|
data: function() {
|
|
|
return {
|
|
|
// banner
|
|
|
@@ -59,7 +106,8 @@ export default {
|
|
|
pic: require('@a/banner.png'),
|
|
|
},
|
|
|
],
|
|
|
- // 轮播
|
|
|
+ activeIndex: '1',
|
|
|
+ // // 轮播
|
|
|
carouselList: [
|
|
|
{
|
|
|
pic: require('@a/lunbo.jpg'),
|
|
|
@@ -174,21 +222,137 @@ export default {
|
|
|
line-height: 40px;
|
|
|
background-color: hsla(0, 0%, 96.1%, 0.31);
|
|
|
}
|
|
|
- // .banner {
|
|
|
- // border-bottom: 1px solid red;
|
|
|
- // }
|
|
|
- // .menu {
|
|
|
- // border-bottom: 1px solid red;
|
|
|
- // }
|
|
|
+ .menu {
|
|
|
+ background-color: rgb(4, 87, 199);
|
|
|
+ }
|
|
|
.main {
|
|
|
margin: 10px 0 0 0;
|
|
|
border-bottom: 1px solid red;
|
|
|
.mainOne {
|
|
|
margin: 0 0 10px 0;
|
|
|
+ height: 300px;
|
|
|
+ .carouselTitle {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ width: 96%;
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ padding: 0 10px;
|
|
|
+ color: #fff;
|
|
|
+ background: rgba(0, 0, 0, 0.4);
|
|
|
+ }
|
|
|
+ .center {
|
|
|
+ height: 300px;
|
|
|
+ background-color: #fff;
|
|
|
+ .top {
|
|
|
+ height: 39px;
|
|
|
+ line-height: 39px;
|
|
|
+ border-bottom: 1px solid #176ebb;
|
|
|
+ .topTitle {
|
|
|
+ span {
|
|
|
+ text-align: center;
|
|
|
+ display: inline-block;
|
|
|
+ width: 110px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 16px;
|
|
|
+ background-color: #176ebb;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .topLink {
|
|
|
+ .el-link {
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .info {
|
|
|
+ padding: 0 10px;
|
|
|
+ .infoList {
|
|
|
+ height: 43px;
|
|
|
+ line-height: 43px;
|
|
|
+ .title {
|
|
|
+ font-size: 16px;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ .date {
|
|
|
+ font-size: 16px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .infoList:hover {
|
|
|
+ cursor: pointer;
|
|
|
+ .title {
|
|
|
+ color: #176ebb;
|
|
|
+ }
|
|
|
+ .date {
|
|
|
+ color: #176ebb;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ height: 300px;
|
|
|
+ background-color: #fff;
|
|
|
+ .top {
|
|
|
+ height: 39px;
|
|
|
+ line-height: 39px;
|
|
|
+ border-bottom: 1px solid #176ebb;
|
|
|
+ .topTitle {
|
|
|
+ span {
|
|
|
+ text-align: center;
|
|
|
+ display: inline-block;
|
|
|
+ width: 110px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 16px;
|
|
|
+ background-color: #176ebb;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .topLink {
|
|
|
+ .el-link {
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .info {
|
|
|
+ padding: 0 10px;
|
|
|
+ .infoList {
|
|
|
+ height: 43px;
|
|
|
+ line-height: 43px;
|
|
|
+ .title {
|
|
|
+ font-size: 16px;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ .date {
|
|
|
+ font-size: 16px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .infoList:hover {
|
|
|
+ cursor: pointer;
|
|
|
+ .title {
|
|
|
+ color: #176ebb;
|
|
|
+ }
|
|
|
+ .date {
|
|
|
+ color: #176ebb;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.foot {
|
|
|
border-bottom: 1px solid red;
|
|
|
}
|
|
|
}
|
|
|
+/deep/.el-menu--horizontal > .el-menu-item.is-active {
|
|
|
+ background-color: #03469f !important;
|
|
|
+ border-bottom: none !important;
|
|
|
+}
|
|
|
+/deep/.el-menu--horizontal > .el-menu-item {
|
|
|
+ border-bottom: none;
|
|
|
+}
|
|
|
+/deep/.el-menu.el-menu--horizontal {
|
|
|
+ border-bottom: none;
|
|
|
+}
|
|
|
</style>
|
