更新

src/App.vue

@@ -19,4 +19,6 @@ body {
   margin: 0;
   overflow-x: hidden;
 }
+
+
 </style>

src/layout/index/calendar.vue

@@ -0,0 +1,34 @@
+<template>
+  <div id="calendar">
+    <el-row>
+      <el-col :span="24">
+        <el-calendar v-model="calendar">
+        </el-calendar>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'calendar',
+  props: {
+    calendar:null,
+  },
+  components: {},
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+/deep/.el-calendar__body{
+  padding:0;
+}
+/deep/.el-calendar-table .el-calendar-day{
+  height:39px;
+}
+</style>
+

src/layout/index/foot.vue

@@ -0,0 +1,43 @@
+<template>
+  <div id="foot">
+    <el-row>
+      <el-col :span="24" class="down">
+        <el-col :span="24">
+          <p class="text">{{downList.copyright}}</p>
+        </el-col>
+        <el-col :span="24">
+          <p class="text">域名备案信息：{{downList.domain}}</p>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'foot',
+  props: {
+    downList:null,
+  },
+  components: {},
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+p{
+  margin:0;
+  padding:0;
+}
+.down{
+  padding:10px 0;
+  text-align: center;
+  color:#fff;
+}
+.text{
+  padding:5px 0;
+}
+</style>

src/layout/index/login.vue

@@ -0,0 +1,84 @@
+<template>
+  <div id="login">
+    <el-row>
+      <el-col :span="24" class="login">
+        <el-col :span="6" class="common red">
+          <el-link :underline="false">
+            <span class="mainTwoIcon"><i class="el-icon-user"></i></span>
+            <span class="mainTwoTit">生源信息</span>
+          </el-link>
+        </el-col>
+        <el-col :span="6" class="common green">
+          <el-link :underline="false">
+            <span class="mainTwoIcon"><i class="el-icon-office-building"></i></span>
+            <span class="mainTwoTit">单位登录/注册</span>
+          </el-link>
+        </el-col>
+        <el-col :span="6" class="common blue">
+          <el-link :underline="false">
+            <span class="mainTwoIcon"><i class="el-icon-user"></i></span>
+            <span class="mainTwoTit">学生登录</span>
+          </el-link>
+        </el-col>
+        <el-col :span="6" class="common orange">
+          <el-link :underline="false">
+            <span class="mainTwoIcon"><i class="el-icon-user"></i></span>
+            <span class="mainTwoTit">管理员登录</span>
+          </el-link>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'login',
+  props: {},
+  components: {},
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.login{
+  padding:10px;
+}
+.login .common{
+  padding: 10px;
+  text-align:center;
+  border-radius: 17px;
+  margin: 0 10px 0 0;
+  width: 284px;
+}
+.mainTwoIcon{
+  display: inline-block;
+  width: 35px;
+  height: 35px;
+  border-radius: 90px;
+  background: #fff;
+  text-align: center;
+  line-height: 35px;
+  color: #333;
+}
+.mainTwoTit {
+  color: #fff;
+  font-weight: 700;
+  padding: 0 0 0 10px;
+}
+.red {
+  background-color: #d0122c;
+}
+.green {
+  background-color: #75d53a;
+}
+.blue {
+  background-color: #47c0ff;
+}
+.orange {
+  background-color: #ff9147;
+}
+</style>

src/layout/index/native.vue

@@ -0,0 +1,67 @@
+<template>
+  <div id="native">
+    <el-row>
+      <!-- <el-menu :default-active="activeIndex" mode="horizontal" background-color="#850000" text-color="#fff" active-text-color="#fff" :router="true">
+        <template v-for="(item, index) in menuList">
+          <el-submenu v-if="item.children.length > 0" :index="`${index}`" :key="index">
+            <template slot="title">
+              {{ item.name }}
+            </template>
+            <el-menu-item v-for="(sub, subIndex) in item.children" :key="subIndex" :index="sub.path">{{ sub.name }}</el-menu-item>
+          </el-submenu>
+          <el-menu-item v-else :index="item.path" :key="index">{{ item.name }}</el-menu-item>
+        </template>
+      </el-menu> -->
+      <el-menu
+        :default-active="activeIndex2"
+        class="el-menu-demo"
+        mode="horizontal"
+        @select="handleSelect"
+        background-color="#850000"
+        text-color="#fff"
+        active-text-color="#fff"
+        style="height:40px;"
+        >
+        <el-menu-item index="1">首页</el-menu-item>
+        <el-submenu index="2">
+          <template slot="title">招聘管理</template>
+          <el-menu-item index="2-1">宣讲会</el-menu-item>
+          <el-menu-item index="2-2">招聘会</el-menu-item>
+          <el-menu-item index="2-3">职位管理</el-menu-item>
+        </el-submenu>
+      </el-menu>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'native',
+  props: {
+    // menuList: null,
+  },
+  components: {},
+  data: () => ({
+    activeIndex2:'1'
+  }),
+  created() {},
+  computed: {},
+  methods: {
+    handleSelect(key, keyPath) {
+        // eslint-disable-next-line no-console
+        console.log(key, keyPath);
+      }
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.el-menu--horizontal>.el-menu-item{
+  height: 40px;
+  line-height:40px;
+}
+/deep/.el-menu--horizontal>.el-submenu .el-submenu__title{
+  height: 40px;
+  line-height:40px;
+}
+</style>

src/layout/index/news.vue

@@ -0,0 +1,100 @@
+<template>
+  <div id="news">
+    <el-row>
+      <el-col :span="24" class="news">
+        <el-col :span="24" class="topTit">
+          <el-col :span="20">
+            <span :style="`border-color:${borderColor}`">就业新闻</span>
+          </el-col>
+          <el-col :span="4" style="text-align:right;">
+            <el-link :underline="false" :style="`color:${Color}`">MORE<i class="el-icon-video-play"></i></el-link>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="newsMain">
+          <el-col :span="14" class="block">
+            <el-carousel ref="shubiao">
+              <el-carousel-item v-for="(item, index) in newsList" :key="index" :name="`${index}`">
+                <el-link :underline="false" ><img :src="item.picurl" class="newsList" /></el-link>
+              </el-carousel-item>
+            </el-carousel>
+          </el-col>
+          <el-col :span="10" class="newsLi">
+            <ul>
+              <li v-for="(tag, index) in newsList" :key="index" :type="tag.type" @mouseover="shuYi(index)" :class="newListActive(tag)">
+                <el-link :underline="false" class="newsListTit" >{{ tag.title }}</el-link>
+              </li>
+            </ul>         
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'news',
+  props: {
+    newsList:null,
+  },
+  components: {},
+  data: () => ({
+    borderColor:'#850000',
+    Color:'#850000'
+  }),
+  created() {},
+  computed: {},
+  methods: {
+    shuYi(index) {
+      this.$refs.shubiao.setActiveItem(`${index}`);
+    },
+    // eslint-disable-next-line no-unused-vars
+    newListActive(item) {},
+  },
+};
+</script>
+
+<style lang="less" scoped>
+ul {
+  margin: 0;
+  padding: 0;
+}
+li {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.news{
+  padding:10px;
+}
+.topTit{
+  border-bottom:1px solid #ccc;
+}
+.topTit span{
+  display: inline-block;
+  height: 30px;
+  border-bottom:1px solid transparent;
+}
+.newsMain{
+  padding:10px 0;
+}
+.block{
+  height:250px;
+}
+.newsList{
+  height:250px;
+}
+.newsLi ul li{
+  padding:9px;
+  border-bottom:1px dashed #ccc;
+}
+.newsListTit{
+  color:#606266;
+}
+/deep/.newsListTit .el-link--inner{
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width:315px;
+}
+</style>

src/layout/index/notice.vue

@@ -0,0 +1,84 @@
+<template>
+  <div id="notice">
+    <el-row>
+      <el-col :span="24" class="notice">
+        <el-col :span="24" class="topTit">
+          <el-col :span="20">
+           <span :style="`border-color:${borderColor}`">最新公告</span>
+          </el-col>
+          <el-col :span="4">
+            <el-link :underline="false" :style="`color:${Color}`">MORE<i class="el-icon-video-play"></i></el-link>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="noticeMain">
+          <el-col :span="24" class="noticeList" v-for="(item, index) in noticeList" :key="index" :name="`${index}`">
+            <el-col :span="4" class="time" >
+              {{item.time}}
+            </el-col>
+            <el-col :span="20" class="title">
+              <el-link :underline="false">
+                <p class="textOver"> {{item.title}}</p>
+              </el-link>
+            </el-col>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'notice',
+  props: {
+    noticeList:null,
+  },
+  components: {},
+  data: () => ({
+    borderColor:'#850000',
+    Color:'#850000'
+  }),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+p{
+  margin:0;
+  padding:0;
+}
+.textOver{
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.notice{
+  padding:10px;
+}
+.topTit{
+  border-bottom:1px solid #ccc;
+}
+.topTit span{
+  display: inline-block;
+  height: 30px;
+  border-bottom:1px solid transparent;
+}
+.noticeList{
+  padding: 7px 0;
+  border-bottom: 1px dashed #ccc;
+}
+.noticeList .time{
+  height: 38px;
+  line-height: 38px;
+  text-align: center;
+  background: #850000;
+  color: #fff;
+  font-size: 18px;
+}
+.noticeList .title p{
+  width: 290px;
+  padding: 10px;
+}
+</style>

src/layout/index/recruit.vue

@@ -0,0 +1,45 @@
+<template>
+  <div id="recruit">
+    <el-row>
+      <el-col :span="24">
+        <el-tabs v-model="activeName" @tab-click="handleClick">
+            <el-tab-pane label="校内宣讲" name="first">
+校内宣讲
+            </el-tab-pane>
+            <el-tab-pane label="双选会" name="second">
+双选会
+            </el-tab-pane>
+            <el-tab-pane label="校外宣讲" name="third">
+校外宣讲
+            </el-tab-pane>
+            <el-tab-pane label="招聘快讯" name="fourth">
+招聘快讯
+            </el-tab-pane>
+        </el-tabs>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'recruit',
+  props: {},
+  components: {},
+  data: () => ({
+    activeName:'first'
+  }),
+  created() {},
+  computed: {},
+  methods: {
+    handleClick(tab, event) {
+      // eslint-disable-next-line no-console
+      console.log(tab, event);
+    }
+  },
+};
+</script>
+
+<style lang="less" scoped>
+
+</style>

src/layout/index/top.vue

@@ -1,13 +1,17 @@
 <template>
   <div id="top">
     <el-row>
-      <el-col :span="24" v-for="(item, index) in newList" :key="index" :name="`${index}`">
-        <el-col :span="12">
-        {{item.title}}
-        </el-col>
-        <el-col :span="12">
-        {{item.time}}
-      </el-col>
+      <el-col :span="24" class="top" :style="'background: url(' + topInfo.logoBei + ');height:300px;'">
+        <div class="w_1200">
+          <el-col :span="2">
+            <el-image style="width:100px;height:100px" :src="topInfo.logo || ''"></el-image>
+          </el-col>
+          <el-col :span="22" class="topTit">
+            <el-link :underline="false">
+              {{ topInfo.title }}
+            </el-link>
+          </el-col>
+        </div>
       </el-col>
     </el-row>
   </div>
@@ -17,7 +21,7 @@
 export default {
   name: 'top',
   props: {
-    newList: null,
+    topInfo: null,
   },
   components: {},
   data: () => ({}),
@@ -27,4 +31,23 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="less" scoped>
+.w_1200{
+  width:1200px;
+  margin:0 auto;
+}
+.top{
+  padding: 80px 0;
+}
+.top .topTit{
+  height: 104px;
+  line-height: 104px;
+  padding: 0 10px;
+}
+.top .topTit .el-link.el-link--default {
+  font-size: 3em;
+  font-family: cursive;
+  color: #850000;
+  text-shadow: 2px 2px 0 #fff;
+}
+</style>

src/views/index/index.vue

@@ -2,10 +2,72 @@
   <div id="index">
     <el-row>
       <el-col :span="24">
-        <div class="w_1200">
           <el-col :span="24" class="top">
-            <top></top>
+            <top :topInfo="topInfo"></top>
+          </el-col>
+      </el-col>
+      <el-col :span="24">
+          <el-col :span="24" class="menu" :style="`background:${backColor}`">
+            <div class="w_1200">
+              <native></native>
+            </div>
+          </el-col>
+      </el-col>
+      <el-col :span="24" class="main">
+        <div class="w_1200">
+          <el-col :span="24" class="mainTop">
+            <el-col :span="16" class="news">
+            <news :newsList="newsList"></news>
+            </el-col>
+            <el-col :span="7" class="notice">
+              <notice :noticeList="noticeList"></notice>
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="mainLogin">
+            <login></login>
+          </el-col>
+          <el-col :span="24" class="mainData">
+            <el-col :span="7" class="RiLi">
+              <calendar :calendar="calendar"></calendar>
+            </el-col>
+            <el-col :span="16" class="recruit">
+              <recruit></recruit>
+            </el-col>
           </el-col>
+          <el-col :span="24" class="mainQuick">
+            <el-col :span="7" class="fast">
+              快速通道
+            </el-col>
+            <el-col :span="16" class="cause">
+              吉林省事业单位
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="mainWheel">
+            <el-col :span="7" class="wheelLeft">
+              <el-col :span="24" class="lunbo">
+                轮播
+              </el-col>
+              <el-col :span="24" class="content">
+                联系方式
+              </el-col>
+            </el-col>
+            <el-col :span="16" class="wheelRight">
+              <el-col :span="24" class="danwei">
+              事业单位
+              </el-col>
+              <el-col :span="24" class="yizhanshi">
+              一站式
+              </el-col>
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="mainLink">
+            友情链接
+          </el-col>
+        </div>
+      </el-col>
+      <el-col :span="24" class="down">
+        <div class="w_1200">
+        <footDown :downList="downList"></footDown>
         </div>
       </el-col>
     </el-row>
@@ -14,19 +76,141 @@
 
 <script>
 import top from '../../layout/index/top.vue';
+import native from '../../layout/index/native.vue';
+import news from '../../layout/index/news.vue';
+import notice from '../../layout/index/notice.vue';
+import login from '../../layout/index/login.vue';
+import calendar from '../../layout/index/calendar.vue';
+import recruit from '../../layout/index/recruit.vue';
+
+import footDown from '../../layout/index/foot.vue';
 export default {
   name: 'index',
   props: {
-    newList:null,
+    topInfo:null,
+    newsList:null,
+    noticeList:null,
+    calendar:null,
+    downList:null,
   },
   components: {
     top,
+    native,
+    news,
+    notice,
+    login,
+    calendar,
+    recruit,
+    footDown,
+
   },
-  data: () => ({}),
+  data: () => ({
+    backColor:'#850000',
+  }),
   created() {},
   computed: {},
   methods: {},
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="less" scoped>
+.w_1200{
+  width:1200px;
+  margin: 0 auto;
+}
+.top{
+  min-height:300px;
+}
+.menu{
+  height:40px;
+}
+.main{
+  margin:20px 0 0 0;
+}
+.mainTop{
+  margin:0 0 20px 0;
+}
+.mainTop .news{
+  height: 316px;
+  border:1px solid #ccc;
+  overflow:hidden;
+}
+.mainTop .notice{
+  float:right;
+  width:380px;
+  height: 316px;
+  border:1px solid #ccc;
+  overflow:hidden;
+}
+.mainLogin{
+  margin:0 0 20px 0;
+  height:80px;
+  border:1px solid #ccc;
+}
+.mainData{
+  margin:0 0 20px 0;
+}
+.mainData .RiLi{
+  height:340px;
+  border:1px solid #ccc;
+}
+.mainData .recruit{
+  float: right;
+  width:830px;
+  height:340px;
+  border:1px solid #ccc;
+}
+.mainQuick{
+  margin:0 0 20px 0;
+}
+.mainQuick .fast{
+  height:340px;
+  border:1px solid #ccc;
+}
+.mainQuick .cause{
+  float: right;
+  width:830px;
+  height:340px;
+  border:1px solid #ccc;
+}
+.mainWheel{
+  margin:0 0 20px 0;
+}
+.mainWheel .wheelLeft{
+  height:620px;
+  border:1px solid #ccc;
+}
+.mainWheel .wheelLeft .lunbo{
+  height:410px;
+  margin:0 0 20px 0;
+  border:1px solid #ccc;
+}
+.mainWheel .wheelLeft .content{
+  height:190px;
+  border:1px solid #ccc;
+}
+.mainWheel .wheelRight{
+  float:right;
+  width:830px;
+  height:620px;
+  border:1px solid #ccc;
+}
+.mainWheel .wheelRight .danwei{
+  height:300px;
+  margin:0 0 20px 0;
+  border:1px solid #ccc;
+}
+.mainWheel .wheelRight .yizhanshi{
+  height:300px;
+  border:1px solid #ccc;
+}
+.mainLink{
+  margin:0 0 20px 0;
+  height:150px;
+  border:1px solid #ccc;
+}
+.down {
+  height:100px;
+  background-color: #333;
+}
+</style>