web-common/src/views/index.vue

<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="login">
        <div class="w_1200">
          <login></login>
        </div>
      </el-col>
      <el-col :span="24">
        <el-col :span="24" class="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">
            <slot name="native">
              <!-- <native></native> -->
            </slot>
          </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 :news="news"></news>
            </el-col>
            <el-col :span="7" class="notice">
              <notice :notice="notice"></notice>
            </el-col>
          </el-col>
          <el-col :span="24" class="mainData">
            <el-col :span="7" class="RiLi">
              <slot name="calendar"></slot>
              <!-- <calendar :calendar="calendar"></calendar> -->
            </el-col>
            <el-col :span="16" class="recruit">
              <recruit :talksList="talksList" :fairsList="fairsList" :talksoutList="talksoutList" :infoList="infoList"> </recruit>
            </el-col>
          </el-col>
          <el-col :span="24" class="mainQuick">
            <el-col :span="7" class="fast">
              <fast></fast>
            </el-col>
            <el-col :span="16" class="cause">
              <cause :enterList="enterList"></cause>
              <!-- :enterInfoList="enterInfoList" -->
            </el-col>
          </el-col>
          <el-col :span="24" class="mainWheel">
            <el-col :span="7" class="wheelLeft">
              <el-col :span="24" class="lunbo">
                <lunbo :lunboList="lunboList"></lunbo>
              </el-col>
              <el-col :span="24" class="content">
                <contact :site="topInfo"></contact>
              </el-col>
            </el-col>
            <el-col :span="16" class="wheelRight">
              <el-col :span="24" class="danwei">
                <danwei :danweiList="danweiList"></danwei>
              </el-col>
              <el-col :span="24" class="yizhanshi">
                <yizhanshi :yizhanList="yizhanList"></yizhanshi>
              </el-col>
            </el-col>
          </el-col>
          <el-col :span="24" class="mainLink">
            <friendLink :linkImgList="linkImgList"></friendLink>
          </el-col>
        </div>
      </el-col>
      <el-col :span="24" class="down">
        <div class="w_1200">
          <footDown :topInfo="topInfo"></footDown>
        </div>
      </el-col>
      <el-col :span="24" class="floating" v-if="floating.value">
        <el-button onClick="javascript:this.parentNode.style.display='none';">关闭</el-button>
        <floating :floating="floating"></floating>
      </el-col>
      <el-col :span="24" class="erweima">
        <erweima></erweima>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import top from '@publics/src/layout/index/top.vue';
// import native from '@publics/src/layout/index/native.vue';
import news from '@publics/src/layout/index/news.vue';
import notice from '@publics/src/layout/index/notice.vue';
import login from '@publics/src/layout/index/login.vue';
// import calendar from '@publics/src/layout/index/calendar.vue';
import recruit from '@publics/src/layout/index/recruit.vue';
import fast from '@publics/src/layout/index/fast.vue';
import cause from '@publics/src/layout/index/cause.vue';
import danwei from '@publics/src/layout/index/danwei.vue';
import yizhanshi from '@publics/src/layout/index/yizhanshi.vue';
import lunbo from '@publics/src/layout/index/lunbo.vue';
import contact from '@publics/src/layout/index/contact.vue';
import friendLink from '@publics/src/layout/index/friendLink.vue';
import footDown from '@publics/src/layout/index/foot.vue';
import floating from '@publics/src/layout/index/floating.vue';
import erweima from '@publics/src/layout/index/erweima.vue';

export default {
  name: 'index',
  props: {
    topInfo: null, //头部信息
    news: null, //新闻模块
    notice: null, //公告模块
    calendar: null, //日历(这里应该是凹槽,允许自定义组件放入)
    talksList: null, //校内宣讲会列表
    fairsList: null, //校内招聘会列表
    talksoutList: null, //校外宣讲会列表
    infoList: null, //招聘信息列表
    enterList: null, //吉林省事业单位
    danweiList: null, //事业单位
    lunboList: null, //轮播图
    yizhanList: null, //一站式招聘
    linkImgList: null, //友情链接
    downList: null, //底部
    floating: null, //浮窗内容
  },
  components: {
    top, //头部
    // native, //导航 slot
    news, //新闻
    notice, //通告
    login, //登录
    // calendar, //日历 slot
    recruit, //招聘
    fast, //快速链接
    cause, //吉林省事业单位/教师招聘
    danwei, //事业单位
    yizhanshi, //一站式
    lunbo, //轮播图
    contact, //联系
    friendLink, //友情链接
    footDown, //底部
    floating, //浮窗
    erweima, //二维码
  },
  data: () => ({
    backColor: '#850000',
  }),
  created() {},
  computed: {},
  methods: {},
};
</script>

<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;
}
.mainData {
  margin: 0 0 20px 0;
}
.mainData .RiLi {
  height: 340px;
  border: 1px solid #ccc;
}
.mainData .recruit {
  float: right;
  width: 830px;
  height: 340px;
  overflow: hidden;
  border: 1px solid #ccc;
}
.mainQuick {
  margin: 0 0 20px 0;
}
.mainQuick .fast {
  height: 250px;
}
.mainQuick .cause {
  float: right;
  width: 830px;
  height: 315px;
  overflow: hidden;
  border: 1px solid #ccc;
}
.mainWheel {
  margin: 0 0 20px 0;
}
.mainWheel .wheelLeft {
  height: 620px;
}
.mainWheel .wheelLeft .lunbo {
  height: 270px;
  margin: 0 0 40px 0;
  overflow: hidden;
}
.mainWheel .wheelLeft .content {
  height: 310px;
  overflow: hidden;
}
.mainWheel .wheelRight {
  float: right;
  width: 830px;
  height: 620px;
}
.mainWheel .wheelRight .danwei {
  height: 315px;
  margin: 0 0 20px 0;
  overflow: hidden;
  border: 1px solid #ccc;
}
.mainWheel .wheelRight .yizhanshi {
  height: 285px;
  border: 1px solid #ccc;
}
.mainLink {
  margin: 0 0 20px 0;
  height: 150px;
  border: 1px solid #ccc;
}
.down {
  height: 100px;
  background-color: #333;
}
.floating {
  position: fixed;
  top: 10%;
  right: 10%;
  width: 350px;
  height: 140px;
  color: blue;
  background: #fff;
  border: 2px solid red;
}
/deep/.floating .el-button {
  position: absolute;
  right: 0px;
  padding: 3px 5px;
  background: #ccc;
  color: #000;
  border-radius: 0;
  z-index: 1;
}
.erweima {
  position: fixed;
  top: 30%;
  right: 1%;
  z-index: 999;
  width: 60px;
  height: 120px;
}
.login {
  position: fixed;
  top: 0;
  z-index: 1000;
  height: 40px;
  line-height: 40px;
  background: #cccccc9f;
}
</style>