web-test/src/views/index.vue

<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="style">
        <el-col :span="24" class="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">
          <el-row>
            <el-col :span="24" v-for="(item, index) in bannerlist" :key="index">
              <el-image :src="item.pic" style="width: 100%; height: 300px;"></el-image>
              <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-col>
          </el-row>
        </el-col>
        <el-col :span="24" class="menu">
          <div id="menuInfo">
            <el-row>
              <el-col :span="24" style="background-color: rgb(4, 87, 199);">
                <div class="w_1200">
                  <div class="line"></div>
                  <el-menu
                    :default-active="activeIndex"
                    class="el-menu-demo"
                    mode="horizontal"
                    @select="handleSelect"
                    background-color="rgb(4, 87, 199)"
                    text-color="#fff"
                    active-text-color="#ffd04b"
                  >
                    <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 index="2-4">
                        <template slot="title">选项4</template>
                        <el-menu-item index="2-4-1">选项1</el-menu-item>
                        <el-menu-item index="2-4-2">选项2</el-menu-item>
                        <el-menu-item index="2-4-3">选项3</el-menu-item>
                      </el-submenu>
                    </el-submenu>
                    <el-submenu index="3">
                      <template slot="title">业务指南</template>
                      <el-menu-item index="3-1">就业派遣</el-menu-item>
                      <el-menu-item index="3-2">档案管理</el-menu-item>
                      <el-menu-item index="3-3">招聘信息</el-menu-item>
                      <el-submenu index="3-4">
                        <template slot="title">选项4</template>
                        <el-menu-item index="3-4-1">选项1</el-menu-item>
                        <el-menu-item index="3-4-2">选项2</el-menu-item>
                        <el-menu-item index="3-4-3">选项3</el-menu-item>
                      </el-submenu>
                    </el-submenu>
                    <el-submenu index="4">
                      <template slot="title">政策指南</template>
                      <el-menu-item index="4-1">就业派遣</el-menu-item>
                      <el-menu-item index="4-2">档案管理</el-menu-item>
                      <el-menu-item index="4-3">招聘信息</el-menu-item>
                      <el-submenu index="4-4">
                        <template slot="title">选项4</template>
                        <el-menu-item index="4-4-1">选项1</el-menu-item>
                        <el-menu-item index="4-4-2">选项2</el-menu-item>
                        <el-menu-item index="4-4-3">选项3</el-menu-item>
                      </el-submenu>
                    </el-submenu>
                    <el-submenu index="5">
                      <template slot="title">就业指导</template>
                      <el-menu-item index="5-1">就业派遣</el-menu-item>
                      <el-menu-item index="5-2">档案管理</el-menu-item>
                      <el-menu-item index="5-3">招聘信息</el-menu-item>
                      <el-submenu index="5-4">
                        <template slot="title">选项4</template>
                        <el-menu-item index="5-4-1">选项1</el-menu-item>
                        <el-menu-item index="5-4-2">选项2</el-menu-item>
                        <el-menu-item index="5-4-3">选项3</el-menu-item>
                      </el-submenu>
                    </el-submenu>
                    <el-submenu index="6">
                      <template slot="title">党员之家</template>
                      <el-menu-item index="6-1">就业派遣</el-menu-item>
                      <el-menu-item index="6-2">档案管理</el-menu-item>
                      <el-menu-item index="6-3">招聘信息</el-menu-item>
                      <el-submenu index="6-4">
                        <template slot="title">选项4</template>
                        <el-menu-item index="6-4-1">选项1</el-menu-item>
                        <el-menu-item index="6-4-2">选项2</el-menu-item>
                        <el-menu-item index="6-4-3">选项3</el-menu-item>
                      </el-submenu>
                    </el-submenu>
                    <el-submenu index="7">
                      <template slot="title">征兵宣传</template>
                      <el-menu-item index="7-1">就业派遣</el-menu-item>
                      <el-menu-item index="7-2">档案管理</el-menu-item>
                      <el-menu-item index="7-3">招聘信息</el-menu-item>
                      <el-submenu index="7-4">
                        <template slot="title">选项4</template>
                        <el-menu-item index="7-4-1">选项1</el-menu-item>
                        <el-menu-item index="7-4-2">选项2</el-menu-item>
                        <el-menu-item index="7-4-3">选项3</el-menu-item>
                      </el-submenu>
                    </el-submenu>
                    <el-submenu index="8">
                      <template slot="title">网络课程大赛</template>
                      <el-menu-item index="8-1">就业派遣</el-menu-item>
                      <el-menu-item index="8-2">档案管理</el-menu-item>
                      <el-menu-item index="8-3">招聘信息</el-menu-item>
                      <el-submenu index="8-4">
                        <template slot="title">选项4</template>
                        <el-menu-item index="8-4-1">选项1</el-menu-item>
                        <el-menu-item index="8-4-2">选项2</el-menu-item>
                        <el-menu-item index="8-4-3">选项3</el-menu-item>
                      </el-submenu>
                    </el-submenu>
                  </el-menu>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="24" class="main">
          <div class="w_1270">
            <el-col :span="24" class="mainOne">
              <el-col :span="11" class="lunbo">
                <el-col :span="24" style="height: 600px;">
                  <div class="block">
                    <el-carousel>
                      <el-carousel-item v-for="item in banners" :key="item">
                        <!-- <h3 class="small">{{ item }}</h3> -->
                        <el-image :src="item.pic" style="width: 100%; height: 300px;"></el-image>
                      </el-carousel-item>
                    </el-carousel>
                  </div>
                </el-col>
              </el-col>
              <el-col :span="9" class="noticeNews">
                <el-row>
                  <el-col :span="24" style="width: 760px; height: 500px;">
                    <el-col :span="24" class="top">
                      <el-col :span="20" class="topTit">
                        <el-col>
                          <span>通知公告</span>
                        </el-col>
                      </el-col>
                      <el-col :span="4" class="topLink">
                        <el-link :underline="false">more</el-link>
                      </el-col>
                      <el-col>
                        <el-col :span="19">
                          <p class="textOver">
                            <el-link href="https://element.eleme.io" target="_blank"
                              >关于印发《吉林省2020年农村义务教育阶段学校教师特设岗位计划实施方案》的通知</el-link
                            >
                            <el-divider></el-divider>
                            <el-link href="https://element.eleme.io" target="_blank"
                              >关于印发《吉林省2020年农村义务教育阶段学校教师特设岗位计划实施方案》的通知</el-link
                            >
                            <el-divider></el-divider>
                            <el-link href="https://element.eleme.io" target="_blank"
                              >关于印发《吉林省2020年农村义务教育阶段学校教师特设岗位计划实施方案》的通知</el-link
                            >
                          </p>
                        </el-col>
                      </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">
              <el-col :span="11" class="zhidao">
                <div id="zhidao">
                  <el-row style="width: 760px; height: 500px;">
                    <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="19">
                          <p class="textOver">
                            <el-link href="https://element.eleme.io" target="_blank"
                              >关于印发《吉林省2020年农村义务教育阶段学校教师特设岗位计划实施方案》的通知</el-link
                            >
                            <el-divider></el-divider>
                            <el-link href="https://element.eleme.io" target="_blank"
                              >关于印发《吉林省2020年农村义务教育阶段学校教师特设岗位计划实施方案》的通知</el-link
                            >
                            <el-divider></el-divider>
                            <el-link href="https://element.eleme.io" target="_blank"
                              >关于印发《吉林省2020年农村义务教育阶段学校教师特设岗位计划实施方案》的通知</el-link
                            >
                          </p>
                        </el-col>
                      </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>
    </el-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
// import { component } from 'vue/types/umd';
export default {
  name: 'index',
  props: {},
  components: {},
  data: function() {
    return {
      activeIndex: '1',
      //banner
      // eslint-disable-next-line vue/no-dupe-keys
      banners: [
        {
          pic: require('@a/lunbo.jpg'),
        },
        {
          pic: require('@a/lunbo.jpg'),
        },
        {
          pic: require('@a/lunbo.jpg'),
        },
        {
          pic: require('@a/lunbo.jpg'),
        },
      ],
      bannerlist: [
        {
          pic: require('@a/banner.png'),
        },
      ],
      // eslint-disable-next-line vue/no-dupe-keys
      carouselList: [
        {
          pic: require('@a/lunbo.jpg'),
          title: '标题',
        },
        {
          pic: require('@a/lunbo.jpg'),
          title: '标题',
        },
        {
          pic: require('@a/lunbo.jpg'),
          title: '标题',
        },
        {
          pic: require('@a/lunbo.jpg'),
          title: '标题',
        },
      ],
      noticeList: [],
      item: {
        abc: '哈哈哈哈哈哈哈哈哈',
      },
    };
  },
  created() {},
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    computed: {
      ...mapState(['user']),
      // pageTitle() {
      //   return `${this.$route.meta.title}`;
      // },
    },
    metaInfo() {
      return { title: this.$route.meta.title };
    },
  },
};
</script>

<style lang="less" scoped>
.w_1200 {
  width: 1200px;
  margin: 0 auto;
}
.style {
  background-color: #f6f6f6;
  .top {
    height: 300px;
    line-height: 300px;
    background-color: hsla(0, 0%, 96.1%, 0.31);
  }
  .menu {
    height: 60px;
    width: 100%;
    margin: 0 auto;
    background-color: rgb(4, 87, 199);
    .el-breadcrumb-item {
      height: 80px;
      width: 100%;
    }
  }
  /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;
    .el-carousel__item h3 {
      color: #475669;
      height: 100%;
      width: 100%;
      font-size: 50px;
      margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
      background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n + 1) {
      background-color: #d3dce6;
    }
  }
  .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;
        }
        .textOver {
          font-size: 16px;
        }
      }
      .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;
        }
      }
    }
  }
  .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;
        }
      }
      .textOver {
        font-size: 16px;
      }
    }
    .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>