更新

src/components/index.vue

@@ -0,0 +1,72 @@
+<template>
+  <div id="index">
+    <el-row>
+      <el-col :sapn="24" class="top">
+        <top :info="info"></top>
+      </el-col>
+      <el-col :sapn="24" class="banner">
+        <banner :info="info"></banner>
+      </el-col>
+      <el-col :sapn="24" class="menu">
+        <menuInfo></menuInfo>
+      </el-col>
+      <el-col :sapn="24" class="main">
+        主題
+      </el-col>
+      <el-col :sapn="24" class="down">
+        <down :info="info"></down>
+      </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 down from "@/layout/index/down.vue";
+export default {
+  name: "index",
+  props: {
+    info: null //站点信息
+  },
+  components: {
+    top, //头部
+    banner, //banner
+    menuInfo, //菜单
+    down //底部
+  },
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {}
+};
+</script>
+
+<style lang="less" scoped>
+.w_1270 {
+  width: 1270px;
+  margin: 0 auto;
+}
+.top {
+  height: 40px;
+  overflow: hidden;
+}
+.banner {
+  height: 300px;
+  overflow: hidden;
+}
+.menu {
+  height: 50px;
+  overflow: hidden;
+  border-bottom: 1px solid #ccc;
+}
+.main {
+  min-height: 1000px;
+  background: #f6f6f6;
+}
+.down {
+  height: 135px;
+  overflow: hidden;
+}
+</style>

src/layout/index/banner.vue

@@ -0,0 +1,67 @@
+<template>
+  <div id="banner">
+    <el-row>
+      <el-col :span="24">
+        <el-image :src="info.banner" style="height:300px;" fit="fit"></el-image>
+        <div class="w_1270">
+          <el-col :span="24" class="info">
+            <el-col :span="2">
+              <el-image
+                style="width:112px;height:112px;"
+                :src="info.logo"
+              ></el-image>
+            </el-col>
+            <el-col :span="22" style="padding:18px 10px;">
+              <p class="title">{{ info.title }}</p>
+              <p class="english">{{ info.english }}</p>
+            </el-col>
+          </el-col>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "banner",
+  props: {
+    info: null
+  },
+  components: {},
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {}
+};
+</script>
+
+<style lang="less" scoped>
+.w_1270 {
+  width: 1270px;
+  margin: 0 auto;
+}
+p {
+  padding: 0;
+  margin: 0;
+}
+.info {
+  position: absolute;
+  top: 20%;
+  left: 5%;
+}
+.info .title {
+  font-size: 42px;
+  color: #1770c4;
+  font-family: cursive;
+  text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
+  font-weight: 600;
+}
+.info .english {
+  font-size: 24px;
+  color: #1770c4;
+  font-family: cursive;
+  text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
+  font-weight: 600;
+}
+</style>

src/layout/index/down.vue

@@ -0,0 +1,53 @@
+<template>
+  <div id="down">
+    <el-row>
+      <el-col :span="24" class="down">
+        <div class="w_1270">
+          <p class="textOver">{{ info.copyright }}</p>
+          <el-link
+            href="http://bszs.conac.cn/sitename?method=show&id=275F0728763C767CE053022819ACA2F2"
+            :underline="false"
+            ><el-image :src="footUrl"></el-image
+          ></el-link>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "down",
+  props: {
+    info: null
+  },
+  components: {},
+  data: () => ({
+    footUrl: require("@/assets/bule.png")
+  }),
+  created() {},
+  computed: {},
+  methods: {}
+};
+</script>
+
+<style lang="less" scoped>
+.w_1270 {
+  width: 1270px;
+  margin: 0 auto;
+}
+p {
+  padding: 0;
+  margin: 0;
+}
+.down {
+  height: 135px;
+  background: #0457c7;
+  text-align: center;
+}
+.down p {
+  color: #fff;
+  font-size: 14px;
+  padding: 15px 0;
+}
+</style>

src/layout/index/menuInfo.vue

@@ -0,0 +1,74 @@
+<template>
+  <div id="menuInfo">
+    <el-row>
+      <el-col :sapn="24" class="menu">
+        <div class="w_1270">
+          <el-menu
+            :default-active="activeIndex"
+            class="el-menu-demo"
+            mode="horizontal"
+            @select="handleSelect"
+            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-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "menuInfo",
+  props: {},
+  components: {},
+  data: () => ({
+    activeIndex: "1"
+  }),
+  created() {},
+  computed: {},
+  methods: {
+    handleSelect(key, keyPath) {
+      // eslint-disable-next-line no-console
+      console.log(key, keyPath);
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.w_1270 {
+  width: 1270px;
+  margin: 0 auto;
+}
+.menu {
+  height: 50px;
+  line-height: 50px;
+  background: #0457c7;
+}
+/deep/.el-menu--horizontal > .el-menu-item {
+  height: 50px;
+  line-height: 50px;
+}
+/deep/.el-menu--horizontal > .el-submenu .el-submenu__title {
+  height: 50px;
+  line-height: 50px;
+}
+/deep/.el-menu--horizontal > .el-menu-item {
+  border-bottom: none;
+}
+/deep/.el-menu--horizontal > .el-menu-item.is-active {
+  border-bottom: none;
+  background-color: #1b6edd5f !important;
+}
+</style>

src/layout/index/top.vue

@@ -0,0 +1,74 @@
+<template>
+  <div id="top">
+    <el-row>
+      <el-col :span="24" class="top">
+        <div class="w_1270">
+          <el-col :span="19" class="title">
+            您好，欢迎访问{{ info.title }}!
+          </el-col>
+          <!-- <el-col :span="4" class="fenxiang">
+            <el-col :span="12" class="weibo">
+              <el-link :underline="false">
+                <el-image :src="weibo"></el-image>
+                <span>官方微博</span>
+              </el-link>
+            </el-col>
+            <el-col :span="12" class="weibo">
+              <el-link :underline="false">
+                <el-image :src="weixin"></el-image>
+                <span>官方微信</span>
+              </el-link>
+            </el-col>
+          </el-col> -->
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "top",
+  props: {
+    info: null
+  },
+  components: {},
+  data: () => ({
+    weibo: require("@/assets/微博.png"),
+    weixin: require("@/assets/微信.png")
+  }),
+  created() {},
+  computed: {},
+  methods: {}
+};
+</script>
+
+<style lang="less" scoped>
+.w_1270 {
+  width: 1270px;
+  margin: 0 auto;
+}
+.top {
+  height: 40px;
+  overflow: hidden;
+  background: #f5f5f5;
+}
+.top .title {
+  height: 40px;
+  line-height: 40px;
+  color: #535362;
+  font-size: 16px;
+}
+.weibo {
+  height: 40px;
+}
+.weibo .el-image {
+  float: left;
+  padding: 4px;
+}
+.weibo span {
+  float: left;
+  height: 40px;
+  line-height: 40px;
+}
+</style>

src/views/index.vue

@@ -1,15 +1,27 @@
 <template>
   <div id="index">
-    <p>index</p>
+    <index-detail :info="info"></index-detail>
   </div>
 </template>
 
 <script>
+import indexDetail from "@/components/index.vue";
 export default {
   name: "index",
   props: {},
-  components: {},
-  data: () => ({}),
+  components: {
+    indexDetail
+  },
+  data: () => ({
+    info: {
+      title: "吉林省高等学校毕业生就业信息网",
+      english: "Jilin University Graduate Employment Guidance Center",
+      banner: require("@/assets/banner.jpg"),
+      logo: require("@/assets/logo.png"),
+      copyright:
+        "吉ICP备09006292号-1 Copyright 2019 版权所有 吉林省高等学校毕业生就业指导中心 All Rights Reserved"
+    }
+  }),
   created() {},
   computed: {},
   methods: {}