web-student/src/views/index.vue

<template lang="html">
  <div id="index">
    <el-row style="margin:0 0 40px 0;">
      <el-col class="top">
        <el-col class="topLeft">
          <el-col class="topLeftTit">求职中心</el-col>
          <el-col class="topLeftTxt">
            <ul>
              <li>
                <span class="number number_s">3</span>
                <p>我的投递</p>
              </li>
              <li>
                <span class="number number_s">0</span>
                <p>我的面试</p>
              </li>
              <li>
                <span class="number number_s">0</span>
                <p>我的关注</p>
              </li>
              <li>
                <span class="number number_s">0</span>
                <p>我的培训</p>
              </li>
              <li>
                <span class="number number_s">0</span>
                <p>我的问卷</p>
              </li>
            </ul>
          </el-col>
        </el-col>
        <el-col class="topRight">
          <el-col class="topLeftTit">工作机会</el-col>
          <el-col class="topLeftTxt">
            <ul>
              <li>
                <span class="number number_s">_ _</span>
                <p>职位职能推荐</p>
              </li>
              <li>
                <span class="number number_s">0</span>
                <p>企业邀约</p>
              </li>
            </ul>
          </el-col>
        </el-col>
      </el-col>
      <el-col class="main">
        <el-col class="line">求职招聘</el-col>
        <el-col class="newest">
          <el-tabs type="border-card">
            <el-tab-pane label="最新消息">
              <ul class="newestMess">
                <li v-for="(tag, index) in tags" :key="index" :type="tag.type">
                  <el-link>{{ tag.name }}</el-link>
                </li>
              </ul>
            </el-tab-pane>
            <el-tab-pane label="最近浏览">
              <ul class="newestMess">
                <li v-for="(tag, index) in tagsBro" :key="index" :type="tag.type">
                  <el-link>{{ tag.name }}</el-link>
                </li>
              </ul>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-col>
      <el-col class="mainTable">
        <el-col class="table comMajor">
          <el-table :data="tableDataMaj" style="width: 100%">
            <el-table-column prop="date" label="同专业关注排行榜(本月)" width="214"> </el-table-column>
            <el-table-column prop="name" label="" width="100"> </el-table-column>
          </el-table>
        </el-col>
        <el-col class="table colCol">
          <el-table :data="tableDataCol" style="width: 100%">
            <el-table-column prop="date" label="同学院关注排行榜(本月)" width="214"> </el-table-column>
            <el-table-column prop="name" label="" width="100"> </el-table-column>
          </el-table>
        </el-col>
        <el-col class="table colSch">
          <el-table :data="tableDataSch" style="width: 100%">
            <el-table-column prop="date" label="同学校关注排行榜" width="190"> </el-table-column>
            <el-table-column prop="name" label="" width="100"> </el-table-column>
          </el-table>
        </el-col>
        <el-col class="table sign">
          <el-table :data="tableDataSign" style="width: 100%">
            <el-table-column prop="date" label="本专业毕业生签约单位(前十)" width="540"> </el-table-column>
            <el-table-column prop="name" label="人数" width="100"> </el-table-column>
          </el-table>
        </el-col>
        <el-col class="table where">
          <el-table :data="tableDataWhe" style="width: 100%">
            <el-table-column prop="date" label="本专业毕业生去向" width="190"> </el-table-column>
            <el-table-column prop="name" label="人数" width="100"> </el-table-column>
          </el-table>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import formItem from '@/components/form-item.vue';
export default {
  name: 'index',
  props: {},
  components: {},
  data: () => ({
    tags: [
      { name: '长春大学2020届毕业生专业设置及毕业生人数统计表' },
      { name: '长春大学2020届毕业生专业设置及毕业生人数统计表' },
      { name: '长春大学2020届毕业生专业设置及毕业生人数统计表' },
      { name: '长春大学2020届毕业生专业设置及毕业生人数统计表' },
      { name: '长春大学2020届毕业生专业设置及毕业生人数统计表' },
    ],
    tagsBro: [{ name: '宣讲会：辽宁鸿文教育科技有限公司' }, { name: '宣讲会：皇明太阳能股份有限公司' }, { name: '职位：部门助理' }],
    tableDataMaj: [],
    tableDataCol: [],
    tableDataSch: [],
    tableDataSign: [],
    tableDataWhe: [],
  }),
  created() {},
  computed: {},
  methods: {},
};
</script>

<style lang="less" scoped>
ul {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
  margin: 0;
  padding: 0;
}
p {
  margin: 0;
  padding: 0;
}
.top {
  width: 100%;
  height: 115px;
  margin-top: 20px;
}
.topLeft {
  width: 70%;
  height: 100px;
  text-align: center;
  display: inline-block;
  background-color: #60d295;
  border: 1px solid #60d295;
  color: #fff;
  margin-bottom: 15px;
  margin-right: 18px;
}
.topLeftTit {
  height: 32px;
  line-height: 32px;
  color: #fff;
  font-size: 20px;
}
.topLeftTxt {
  height: 56px;
}
.topLeftTxt ul li {
  float: left;
  width: 129px;
  height: 56px;
  text-align: center;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
}
.topLeftTxt ul li .number {
  font-size: 28px;
  color: #fff;
}
.topLeftTxt ul li p {
  font-size: 14px;
  color: #fff;
}
.topRight {
  width: 28%;
  height: 100px;
  text-align: center;
  display: inline-block;
  background-color: #7cbae5;
  border: 1px solid #6eb0dd;
  color: #fff;
}
.main {
  width: 100%;
  min-height: 300px;
}
.line {
  text-align: center;
  font-size: 18px;
  position: relative;
  margin: 15px 0px;
}
.line:before,
.line:after {
  content: '';
  width: 40%;
  height: 1px;
  background: #bbb;
  display: inline-block;
  position: absolute;
  left: 0%;
  top: 15px;
}
.line:after {
  left: 60%;
}
.newest {
  width: 100%;
}
.newestMess li {
  height: 23px;
  padding: 8px;
  border-bottom: 1px dashed #ccc;
}
.newestMess li:hover {
  background: #f6f6f6;
}
/deep/.el-tabs--border-card > .el-tabs__content {
  min-height: 230px;
}
.mainTable {
  width: 100%;
  height: 200px;
  margin: 20px 0;
}
.table {
  margin-bottom: 19px;
  min-height: 110px;
  border: 1px solid #e7e6eb;
}
.comMajor {
  width: 316px;
  margin-right: 10px;
}
.colCol {
  width: 316px;
  margin-right: 10px;
}
.colSch {
  width: 294px;
}
.sign {
  width: 642px;
  margin-right: 10px;
}
.where {
  width: 294px;
}
</style>