web-mobile/src/pages/index/views/home.vue

<template>
  <div id="home">
    <!-- <nut-navbar>
      &nbsp;
      <template v-slot:left>
        关闭
      </template>
      <template v-slot:right> </template>
      <template v-slot:more-icon>
        &nbsp;
      </template>
    </nut-navbar> -->
    <test-user></test-user>
    <el-image style="width: 100%; height: 10rem" :src="url"></el-image>
    <el-row type="flex" align="middle" class="menu_list">
      <!-- drawerTalk = true" -->
      <el-col :span="6" class="list_border" @click.native="toHtml('/talkList.html#/')">
        <el-col :span="24"><div class="el-icon-school icon_zoom"></div></el-col>
        <el-col :span="24">
          <el-link type="info" :underline="false">宣讲会</el-link>
        </el-col>
        <!-- <el-drawer :visible.sync="drawerTalk" direction="btt">
          <template #title>
            <el-row>
              <el-col :span="20">选择查看类型</el-col>
            </el-row>
          </template>
          <el-row class="drawer__row">
            <el-col :span="24" @click.native="toHtml('/talkList.html#/?type=in')">
              <el-button type="text">校内宣讲会</el-button>
            </el-col>
            <el-col :span="24" @click.native="toHtml('/talkList.html#/?type=out')">
              <el-button type="text">校外宣讲会</el-button>
            </el-col>
          </el-row>
        </el-drawer> -->
      </el-col>
      <!-- drawerJobfair = true -->
      <el-col :span="6" class="list_border" @click.native="toHtml('/jobfairList.html#/')">
        <el-col :span="24"><div class="el-icon-s-custom icon_zoom"></div></el-col>
        <el-col :span="24">
          <el-link type="info" :underline="false">招聘会</el-link>
        </el-col>
        <el-drawer :visible.sync="drawerJobfair" direction="btt">
          <template #title>
            <el-row>
              <el-col :span="20">选择查看类型</el-col>
            </el-row>
          </template>
          <el-row class="drawer__row">
            <el-col :span="24" @click.native="toHtml('/jobfairList.html#/?type=in')">
              <el-button type="text">校内招聘会</el-button>
            </el-col>
            <el-col :span="24" @click.native="toHtml('/jobfairList.html#/?type=out')">
              <el-button type="text">校外招聘会</el-button>
            </el-col>
          </el-row>
        </el-drawer>
      </el-col>
      <el-col :span="6" class="list_border">
        <el-col :span="24"><div class="el-icon-s-platform icon_zoom"></div></el-col>
        <el-col :span="24"><el-link type="info" :underline="false" href="/jobinfoList.html">在线招聘</el-link></el-col>
      </el-col>
      <el-col :span="6" class="list_border" @click.native="toHtml('', 'check')">
        <el-col :span="24"><div class="el-icon-user icon_zoom"></div></el-col>
        <el-col :span="24"><el-link type="info" :underline="false">个人中心</el-link></el-col>
      </el-col>
      <!-- <el-drawer :visible.sync="drawerCenter" direction="btt">
        <template #title>
          <el-row>
            <el-col :span="20">选择类型</el-col>
          </el-row>
        </template>
        <el-row class="drawer__row">
          <el-col :span="24" >
            <el-button type="text">学生个人中心</el-button>
          </el-col>
          <el-col :span="24" @click.native="toHtml('', 'check')">
            <el-button type="text">企业中心</el-button>
          </el-col>
        </el-row>
      </el-drawer> -->
    </el-row>
    <!-- list部分 -->
    <div class="list">
      <el-row class="tip" type="flex">
        <el-col :span="16"> test<b class="tip_en">TEST</b> </el-col>
        <el-col :span="8" class="more">
          查看更多
        </el-col>
      </el-row>
      <el-row type="flex" v-for="(item, index) in list" :key="index" class="data_list">
        <el-col :span="6"> 【{{ item.type === 1 ? '测试1' : '其他类型' }}】 </el-col>
        <el-col :span="18">{{ item.title }}</el-col>
      </el-row>
    </div>
    <div class="list">
      <el-row class="tip" type="flex">
        <el-col :span="16"> test1<b class="tip_en">TEST1</b> </el-col>
        <el-col :span="8" class="more">
          查看更多
        </el-col>
      </el-row>
      <el-row type="flex" v-for="(item, index) in list" :key="index" class="data_list">
        <el-col :span="6"> 【{{ item.type === 1 ? '测试1' : '招聘' }}】 </el-col>
        <el-col :span="18">{{ item.title }}</el-col>
      </el-row>
    </div>
    <div class="list">
      <el-row class="tip" type="flex">
        <el-col :span="24"> 联系我们<b class="tip_en">CONTACT</b> </el-col>
      </el-row>
      <el-row style="font-size: 0.85rem;padding: 0 0.6rem;">
        <el-col :span="24">联系地址: 吉林省长春市朝阳区卫星路6543号，综合楼C区203室 </el-col>
        <el-col :span="24">邮政编码: 130000</el-col>
        <el-col :span="24">服务热线: 0431-88888888</el-col>
      </el-row>
    </div>
    <div class="list">
      <el-row class="tip" type="flex">
        <el-col :span="24"> 关注我们<b class="tip_en">WECHAT</b> </el-col>
      </el-row>
      qrcode
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex';
import testUser from '@/components/test-user.vue';
export default {
  name: 'home',
  props: {},
  components: {
    testUser,
  },
  data: () => ({
    url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    list: [
      { type: '1', title: '测试标题1' },
      { type: '1', title: '测试标题2' },
      { type: '1', title: '测试标题3' },
      { type: '1', title: '测试标题4' },
      { type: '1', title: '测试标题5' },
    ],
    drawerTalk: false,
    drawerJobfair: false,
    drawerCenter: false,
  }),
  created() {},
  computed: {
    ...mapState({
      user: state => state.user.user,
    }),
  },
  methods: {
    toHtml(uri, type) {
      if (type) {
        let url = '';
        if (typeof this.user === 'object') {
          this.user.corpid === undefined ? (url = '/student.html#/') : (url = 'http://hr.smart.jilinjobswx.cn/mobile');
        } else {
          url = '/register.html#/';
        }
        window.location.href = url;
      } else {
        window.location.href = uri;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.title {
  height: 3rem;
}
.menu_list {
  padding: 0 1rem;
}
.list_border {
  border: 0.0625rem solid #ebeced;
  height: 3.5rem;
  text-align: center;
  padding: 0.3rem 0;
}
.icon_zoom {
  zoom: 1.5;
}
.list_word {
  // line-height: 5rem;
  font-size: 0.625rem;
}
.list {
  margin-bottom: 0.7rem;
}
.tip {
  border-left: 0.1875rem solid #25b6ed;
  color: #000;
  font-size: 1.2rem;
  margin-bottom: 0.6rem;
  padding: 0.5rem 0 0.5rem 0.8rem;
}
.tip_en {
  margin-left: 0.5rem;
  color: #ccc;
  font-size: 1rem;
  font-style: italic;
}
.more {
  text-align: right;
  margin-right: 0.5rem;
  color: #ccc;
  font-size: 1rem;
}
.data_list {
  font-size: 0.85rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.drawer__row {
  .el-col {
    border-bottom: 0.0625rem solid #eee;
    text-align: center;
  }
}
</style>