|
|
@@ -3,149 +3,181 @@
|
|
|
<el-row>
|
|
|
<el-col :span="24" class="style">
|
|
|
<el-col :span="24" class="top">
|
|
|
- <div class="w_1200">
|
|
|
- <top></top>
|
|
|
+ <div class="w_1270">
|
|
|
+ <el-col :span="24" class="top">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="19">
|
|
|
+ 您好，欢迎访问吉林省高等学校毕业生就业信息网!
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-col>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
<el-col :span="24" class="banner">
|
|
|
- <banner :bannerlist="bannerlist"></banner>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24" v-for="(item, index) in bannerlist" :key="index">
|
|
|
+ <el-image :src="item.png" style="width: 100%; height: 300px;"></el-image>
|
|
|
+ </el-col>
|
|
|
+ <el-col>
|
|
|
+ <p class="title">吉林省高等学校毕业生就业信息网</p>
|
|
|
+ </el-col>
|
|
|
+ <el-col>
|
|
|
+ <p class="english">Employment Information Network for graduates of Jilin Province colleges and universities.</p>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
</el-col>
|
|
|
<el-col :span="24" class="menu">
|
|
|
- <menuInfo></menuInfo>
|
|
|
+ <div id="menuInfo">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24" style="background-color: rgb(4, 87, 199);">
|
|
|
+ <div class="w_1200">
|
|
|
+ <el-menu default-active="activeIndex" class="el-menu-demo">
|
|
|
+ <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-item index="9">加入我们</el-menu-item>
|
|
|
+ </el-menu>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
</el-col>
|
|
|
<el-col :span="24" class="main">
|
|
|
- <div class="w_1200">
|
|
|
+ <div class="w_1270">
|
|
|
<el-col :span="24" class="mainOne">
|
|
|
- <mainOne :carouselList="carouselList" :noticeList="noticeList" :newsList="newsList"></mainOne>
|
|
|
+ <el-col :span="11" class="lunbo">
|
|
|
+ <el-col :span="24" style="height: 304px;">
|
|
|
+ <div class="block">
|
|
|
+ <el-carousel height="300px">
|
|
|
+ <el-carousel-item v-for="(i, index) in carouselList" :key="index">
|
|
|
+ <el-image :src="i.png" style="height: 304px;"></el-image>
|
|
|
+ <p class="carouselTitle textOver">{{ i.title }}</p>
|
|
|
+ </el-carousel-item>
|
|
|
+ </el-carousel>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="9" class="noticeNews">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24" style="width: 460px; height: 304px;">
|
|
|
+ <el-col :span="24" class="top">
|
|
|
+ <el-col :span="20" class="topTit">
|
|
|
+ <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="list" v-for="(item, index) in noticeList" :key="index">
|
|
|
+ <el-col :span="19" class="title">
|
|
|
+ <el-col :span="19" class="textOver">
|
|
|
+ {{ item.title }}
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="5" class="date">
|
|
|
+ {{ item.data }}
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4" class="kuaisu">
|
|
|
+ <div id="kuaisu">
|
|
|
+ <el-row>
|
|
|
+ <el-col class="24">
|
|
|
+ <el-col :span="24" class="login">
|
|
|
+ <button class="el-button">
|
|
|
+ <span>企业登录</span>
|
|
|
+ </button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="info">
|
|
|
+ <span>就业信息填报</span>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
</el-col>
|
|
|
<el-col :span="24" class="mainTwo">
|
|
|
- <mainTwo :noticeList1="noticeList1"></mainTwo>
|
|
|
+ <el-col :span="11" class="zhidao">
|
|
|
+ <div id="zhidao">
|
|
|
+ <el-row style="width: 540px; height: 369px;">
|
|
|
+ <el-col :span="24" class="top">
|
|
|
+ <el-col :span="20" class="topTit">
|
|
|
+ <span>就业动态</span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4" class="topLink">
|
|
|
+ <span>more</span>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="info">
|
|
|
+ <el-col :span="24" class="list">
|
|
|
+ <el-col :span="19" class="title">
|
|
|
+ <p class="textOver">
|
|
|
+ {{ item.title }}
|
|
|
+ </p>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="5" class="date">
|
|
|
+ {{ item.date }}
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
</el-col>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
- <el-col :span="24" class="foot">
|
|
|
- 头部
|
|
|
- </el-col>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</div>
|
|
|
</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';
|
|
|
+// import { component } from 'vue/types/umd';
|
|
|
export default {
|
|
|
name: 'index',
|
|
|
props: {},
|
|
|
- components: {
|
|
|
- top,
|
|
|
- banner,
|
|
|
- menuInfo,
|
|
|
- mainOne,
|
|
|
- mainTwo,
|
|
|
- },
|
|
|
+ components: {},
|
|
|
data: function() {
|
|
|
return {
|
|
|
- // banner
|
|
|
+ activeIndex: '1',
|
|
|
+ //banner
|
|
|
+ // eslint-disable-next-line vue/no-dupe-keys
|
|
|
bannerlist: [
|
|
|
{
|
|
|
- pic: require('@a/banner.png'),
|
|
|
- },
|
|
|
- {
|
|
|
- pic: require('@a/banner.png'),
|
|
|
+ png: require('@a/banner.png'),
|
|
|
},
|
|
|
],
|
|
|
- // 轮播
|
|
|
+ // eslint-disable-next-line vue/no-dupe-keys
|
|
|
carouselList: [
|
|
|
{
|
|
|
pic: require('@a/lunbo.jpg'),
|
|
|
- title: '测试标题',
|
|
|
+ title: '标题',
|
|
|
},
|
|
|
{
|
|
|
pic: require('@a/lunbo.jpg'),
|
|
|
- title: '测试标题',
|
|
|
+ title: '标题',
|
|
|
},
|
|
|
{
|
|
|
pic: require('@a/lunbo.jpg'),
|
|
|
- title: '测试标题',
|
|
|
+ title: '标题',
|
|
|
},
|
|
|
{
|
|
|
pic: require('@a/lunbo.jpg'),
|
|
|
- title: '测试标题',
|
|
|
- },
|
|
|
- ],
|
|
|
- // 通知公告
|
|
|
- noticeList: [
|
|
|
- {
|
|
|
- title: '8888888测试标题测试标题测试标题测试标题测试标题测试标题测试标题测试标题测试标题测试标题',
|
|
|
- date: '2020-10-10',
|
|
|
- },
|
|
|
- {
|
|
|
- title: '888测试标题',
|
|
|
- date: '2020-10-10',
|
|
|
- },
|
|
|
- {
|
|
|
- title: '888测试标题',
|
|
|
- date: '2020-10-10',
|
|
|
- },
|
|
|
- {
|
|
|
- title: '888测试标题',
|
|
|
- date: '2020-10-10',
|
|
|
- },
|
|
|
- ],
|
|
|
- // eslint-disable-next-line vue/no-dupe-keys
|
|
|
- noticeList1: [
|
|
|
- {
|
|
|
- title: '55555555测试标题测试标题测试标题测试标题测试标题测试标题测试标题测试标题测试标题测试标题',
|
|
|
- date: '2020-10-10',
|
|
|
- },
|
|
|
- {
|
|
|
- title: '55555555测试标题',
|
|
|
- date: '2020-10-10',
|
|
|
- },
|
|
|
- {
|
|
|
- title: '55555555测试标题',
|
|
|
- date: '2020-10-10',
|
|
|
- },
|
|
|
- {
|
|
|
- title: '55555555测试标题',
|
|
|
- date: '2020-10-10',
|
|
|
- },
|
|
|
- ],
|
|
|
- // eslint-disable-next-line vue/no-dupe-keys
|
|
|
- newsList: [
|
|
|
- {
|
|
|
- title: '哈哈测试标题测试标题测试标题测试标题测试标题测试标题测试标题测试标题测试标题测试标题',
|
|
|
- },
|
|
|
- {
|
|
|
- title: '哈哈测试标题',
|
|
|
- },
|
|
|
- {
|
|
|
- title: '哈哈测试标题',
|
|
|
- },
|
|
|
- {
|
|
|
- title: '测试标题',
|
|
|
- },
|
|
|
- ],
|
|
|
- // eslint-disable-next-line vue/no-dupe-keys
|
|
|
- newsList1: [
|
|
|
- {
|
|
|
- title: '添加标题测试标题测试标题测试标题测试标题测试标题测试标题测试标题测试标题测试标题',
|
|
|
- },
|
|
|
- {
|
|
|
- title: '添加测试标题',
|
|
|
- },
|
|
|
- {
|
|
|
- title: '添加测试标题',
|
|
|
- },
|
|
|
- {
|
|
|
- title: '添加测试标题',
|
|
|
+ title: '标题',
|
|
|
},
|
|
|
],
|
|
|
+ noticeList: [],
|
|
|
+ item: {},
|
|
|
};
|
|
|
},
|
|
|
created() {},
|
|
|
@@ -164,7 +196,7 @@ export default {
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
.w_1200 {
|
|
|
- width: 1200px;
|
|
|
+ width: 1270px;
|
|
|
margin: 0 auto;
|
|
|
}
|
|
|
.style {
|
|
|
@@ -174,21 +206,134 @@ 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;
|
|
|
- // }
|
|
|
- .main {
|
|
|
- margin: 10px 0 0 0;
|
|
|
- border-bottom: 1px solid red;
|
|
|
- .mainOne {
|
|
|
- margin: 0 0 10px 0;
|
|
|
+ .menu {
|
|
|
+ background-color: rgb(4, 87, 199);
|
|
|
+ }
|
|
|
+ /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;
|
|
|
+ }
|
|
|
+ .mainOne {
|
|
|
+ height: 304px;
|
|
|
+ }
|
|
|
+ .carouselTitle {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ width: 96%;
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ padding: 0 10px;
|
|
|
+ color: #fff;
|
|
|
+ background: rgba(0, 0, 0, 0.4);
|
|
|
+ }
|
|
|
+ .noticeNews {
|
|
|
+ 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;
|
|
|
+ .list {
|
|
|
+ height: 43px;
|
|
|
+ line-height: 43px;
|
|
|
+ .title {
|
|
|
+ font-size: 16px;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ .date {
|
|
|
+ font-size: 16px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list:hover {
|
|
|
+ cursor: pointer;
|
|
|
+ .title {
|
|
|
+ color: #176ebb;
|
|
|
+ }
|
|
|
+ .date {
|
|
|
+ color: #176ebb;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- .foot {
|
|
|
- border-bottom: 1px solid red;
|
|
|
+ .mainTwo {
|
|
|
+ height: 369px;
|
|
|
+ }
|
|
|
+ .zhidao {
|
|
|
+ height: 369px;
|
|
|
+ line-height: 30px;
|
|
|
+ padding: 0 10px;
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
+ .top {
|
|
|
+ height: 39px;
|
|
|
+ line-height: 39px;
|
|
|
+ border-bottom: 1px solid #176ebb;
|
|
|
+ .topTit {
|
|
|
+ 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;
|
|
|
+ .list {
|
|
|
+ height: 43px;
|
|
|
+ line-height: 43px;
|
|
|
+ .title {
|
|
|
+ font-size: 16px;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ .date {
|
|
|
+ font-size: 16px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list:hover {
|
|
|
+ cursor: pointer;
|
|
|
+ .title {
|
|
|
+ color: #176ebb;
|
|
|
+ }
|
|
|
+ .date {
|
|
|
+ color: #176ebb;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|
