web-live/src/views/twoweb/personalLive/index.vue

<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main">
        <div class="w_1200">
          <el-col :span="24" class="one">
            <el-col :span="24" class="top">
              <p>人才招聘展会模板</p>
              <p>主办方：吉林省计算中心</p>
            </el-col>
            <el-col :span="24" class="down">
              <p v-for="(item, index) in numList" :key="index">
                <span>{{ item.name }}</span>
                <span>{{ item.num }}人</span>
              </p>
            </el-col>
          </el-col>
          <el-col :span="24" class="two">
            <el-col :span="12" class="left">
              <el-col :span="24" class="top">
                <span style="color:#409eff">人才视频</span>
                <span>直播</span>
              </el-col>
              <el-col :span="24" class="down">
                视频播放框
              </el-col>
            </el-col>
            <el-col :span="12" class="right">
              <el-col :span="24" class="top">
                公共聊天
              </el-col>
              <el-col :span="24" class="down">
                <el-col :span="24" class="list">
                  <el-col :span="24" class="chatList" v-for="(item, index) in chatList" :key="index">
                    <el-col :span="2" class="image">
                      <el-image :src="touxiang" style="width:30px;height:30px"></el-image>
                    </el-col>
                    <el-col :span="22" class="other">
                      <el-col :span="24" class="otherone">
                        <span>{{ item.name }}</span>
                        <span>{{ item.date }}</span>
                      </el-col>
                      <el-col :span="24" class="othertwo">
                        <p class="remark">{{ item.content }}</p>
                      </el-col>
                    </el-col>
                  </el-col>
                </el-col>
                <el-col :span="24" class="chat">
                  <el-col :span="21" class="input">
                    <el-input v-model="text" placeholder="请输入聊天内容"></el-input>
                  </el-col>
                  <el-col :span="3" class="btn">
                    <el-button type="primary" size="mini">发送</el-button>
                  </el-col>
                </el-col>
              </el-col>
            </el-col>
          </el-col>
          <el-col :span="24" class="three">
            <el-image :src="per"></el-image>
          </el-col>
          <el-col :span="24" class="four">
            <el-tabs type="border-card">
              <el-tab-pane label="招聘信息">
                <el-col :span="24" class="fourone">
                  <el-col :span="24" class="zpxxList" v-for="(item, index) in zpxxList" :key="index">
                    <el-col :span="16" class="name textOver">
                      {{ item.name }}
                    </el-col>
                    <el-col :span="4" class="type textOver"> 类型：{{ item.type }} </el-col>
                    <el-col :span="4" class="date textOver">
                      {{ item.date }}
                    </el-col>
                    <el-col :span="24" class="content">
                      {{ item.content }}
                    </el-col>
                  </el-col>
                </el-col>
              </el-tab-pane>
              <el-tab-pane label="正式岗位">
                <el-col :span="24" class="fourtwo">
                  <el-col :span="12" class="zsgwList" v-for="(item, index) in zsgwList" :key="index">
                    <el-col :span="20" class="name textOver">
                      {{ item.name }}
                    </el-col>
                    <el-col :span="4" class="date textOver">
                      {{ item.date }}
                    </el-col>
                    <el-col :span="24" class="other">
                      <span class="textOver">需求人数：{{ item.num }}</span>
                      <span class="textOver" style="color:#ff0000;">薪资：{{ item.xz }}</span>
                    </el-col>
                    <el-col :span="24" class="other">
                      <span class="textOver">福利待遇：{{ item.fldy }}</span>
                      <span class="textOver">职位诱惑：{{ item.zwyh }}</span>
                    </el-col>
                  </el-col>
                </el-col>
              </el-tab-pane>
              <el-tab-pane label="实习岗位">
                <el-col :span="24" class="fourthree">
                  <el-col :span="6" class="sxList" v-for="(item, index) in sxList" :key="index">
                    <el-image :src="sx" class="image"></el-image>
                    <el-col :span="24" class="name textOver">
                      {{ item.name }}
                    </el-col>
                    <el-col :span="24" class="other">
                      <span class="textOver"><i class="el-icon-coin"></i>{{ item.xz }}</span>
                      <span class="textOver"><i class="el-icon-location"></i>{{ item.address }}</span>
                    </el-col>
                    <el-col :span="24" class="fldy textOver">
                      <span>福利待遇：{{ item.fldy }}</span>
                    </el-col>
                  </el-col>
                </el-col>
              </el-tab-pane>
            </el-tabs>
          </el-col>
        </div>
        <div class="pz_down">
          <foot></foot>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import foot from '@common/src/components/common/foot.vue';
import { zpxx } from './js/zpxxList.js';
import { zsgw } from './js/zsgwList.js';
import { sx } from './js/sxList.js';
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'index',
  props: {},
  components: {
    foot,
  },
  data: function() {
    return {
      numList: [
        { name: '同时在线', num: 1000 },
        { name: '特邀嘉宾', num: 1000 },
        { name: '洽谈合作', num: 1000 },
        { name: '达成意向', num: 1000 },
        { name: '对接成功', num: 1000 },
        { name: '参展职位', num: 1000 },
      ],
      // 聊天列表
      chatList: [
        { name: '顾红伟', date: '10:00', content: '信息内容' },
        { name: '顾红伟', date: '10:00', content: '信息内容' },
      ],
      touxiang: require('@common/src/assets/emotion/touxiang.png'),
      // 发言内容
      text: '',
      per: require('@common/src/assets/personalLive.jpg'),
      // 招聘信息
      zpxxList: zpxx,
      // 正式岗位
      zsgwList: zsgw,
      // 实习岗位
      sx: require('@common/src/assets/sx.png'),
      sxList: sx,
    };
  },
  created() {},
  methods: {},
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
.main {
  background: url('~@common/src/assets/bg1.jpg');
  background-repeat: no-repeat;
  background-size: 100%;
  .one {
    .top {
      margin: 50px 0;
      text-align: center;
      p:nth-child(1) {
        font-size: 70px;
        font-family: cursive;
        transform: scale(0.8);
        font-weight: bolder;
        -webkit-text-stroke: 1px #fff;
        -webkit-text-fill-color: #191970;
        letter-spacing: 3px;
      }
      p:nth-child(2) {
        font-size: 30px;
        padding: 20px 0;
        font-family: cursive;
        color: #fff;
      }
    }
    .down {
      margin: 0 0 15px 0;
      p {
        float: left;
        width: 16%;
        background: #ffffff5f;
        color: #000;
        height: 50px;
        line-height: 50px;
        border-radius: 30px;
        margin: 0 7px 0 0;
        span:first-child {
          display: inline-block;
          width: 56%;
          text-align: center;
          height: 50px;
          line-height: 50px;
          font-size: 16px;
          background: #76bdfe;
          border-radius: 30px;
          color: #fff;
          font-weight: 700;
        }
        span:last-child {
          display: inline-block;
          width: 42%;
          text-align: center;
          font-size: 15px;
          font-weight: 700;
        }
      }
    }
  }
  .two {
    height: 450px;
    margin: 0 0 15px 0;
    .left {
      height: 450px;
      overflow: hidden;
      border: 5px solid #000;
      background: #fff;
      border-radius: 5px;
      padding: 10px;
      margin: 0 15px 0 0;
      .top {
        height: 30px;
        line-height: 30px;
        font-weight: bold;
        font-size: 20px;
        margin: 0 0 5px 0;
      }
      .down {
        height: 385px;
        background-color: #000;
        color: #fff;
      }
    }
    .right {
      width: 48%;
      height: 450px;
      overflow: hidden;
      background: #f0ffff5f;
      box-shadow: 0 0 5px #409eff;
      border-radius: 5px;
      .top {
        height: 40px;
        line-height: 40px;
        padding: 0 10px;
        font-weight: bold;
        font-size: 18px;
        color: #fff;
        background-color: #409eff;
      }
      .down {
        height: 410px;
        overflow: hidden;
        padding: 0 0 0 10px;
        .list {
          height: 370px;
          overflow-y: auto;
          .chatList {
            padding: 10px 0;
            border-bottom: 1px dashed #409eff;
            .image {
              text-align: center;
            }
            .other {
              .otherone {
                span:nth-child(1) {
                  color: #000;
                  font-size: 16px;
                  font-weight: bold;
                }
                span:nth-child(2) {
                  display: inline-block;
                  margin: 0 0 0 15px;
                  color: #ccc;
                }
              }
              .othertwo {
                margin: 5px 0 0 0;
                color: #000;
                .remark {
                  min-height: 20px;
                  font-size: 15px;
                  padding: 5px;
                  border-radius: 5px;
                  background: #cccccc5f;
                }
              }
            }
          }
        }
        .chat {
          height: 40px;
          .input {
            /deep/.el-input__inner {
              height: 35px;
              line-height: 35px;
            }
          }
          .btn {
            /deep/.el-button--mini,
            .el-button--mini.is-round {
              padding: 10px 15px;
              width: 100%;
            }
          }
        }
      }
    }
  }
  .three {
    height: 120px;
    margin: 10px 0 15px 0;
    .el-image {
      width: 100%;
      height: 120px;
      border: 1px solid #f1f1f1;
      box-shadow: 0 0 10px #f1f1f1;
    }
  }
  .four {
    height: 494px;
    overflow: hidden;
    .el-tabs {
      height: 480px;
      overflow: hidden;
    }
    .el-tabs--border-card {
      background-color: #ffffff9f;
    }
    .fourone {
      height: 430px;
      overflow: hidden;
      .zpxxList {
        border-bottom: 1px dashed #ccc;
        margin: 0 0 10px 0;
        height: 100px;
        .name {
          font-size: 18px;
          font-weight: bold;
          padding: 0 0 5px 0;
        }
        .type {
          font-size: 16px;
          padding: 0 0 5px 0;
          text-align: left;
        }
        .date {
          font-size: 16px;
          padding: 0 0 5px 0;
          text-align: right;
        }
        .content {
          font-size: 16px;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 2;
          word-break: break-all;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          margin: 10px 0 0 0;
        }
      }
      .zpxxList:hover {
        cursor: pointer;
        .name {
          color: #409eff;
        }
      }
    }
    .fourtwo {
      height: 430px;
      overflow: hidden;
      .zsgwList {
        border: 1px solid #ccc;
        padding: 10px;
        margin: 0 0 5px 0;
        height: 100px;
        .name {
          font-size: 18px;
          font-weight: bold;
        }
        .date {
          text-align: right;
          font-size: 16px;
        }
        .other {
          padding: 2px 0 1px 0;
          font-size: 16px;
          span {
            display: inline-block;
            width: 50%;
          }
        }
      }
      .zsgwList:hover {
        cursor: pointer;
        .name {
          color: #409eff;
        }
      }
    }
    .fourthree {
      .sxList {
        padding: 15px;
        margin: 0 15px 10px 0;
        height: 205px;
        width: 24%;
        border-radius: 10px;
        box-shadow: 0 0px 5px #3333334f;
        .image {
          height: 100px;
          padding: 0 60px;
        }
        .name {
          font-size: 18px;
          text-align: center;
          font-weight: bold;
          padding: 5px 0 0 0;
        }
        .other {
          font-size: 16px;
          text-align: center;
          padding: 5px 0;
          span {
            display: inline-block;
            margin: 0 10px;
          }
          span:nth-child(1) {
            color: #ff0000;
          }
        }
        .fldy {
          font-size: 16px;
          text-align: center;
        }
      }
      .sxList:nth-child(4n) {
        margin: 0 0 10px 0;
      }
      .sxList:hover {
        cursor: pointer;
        .name {
          color: #409eff;
        }
      }
    }
  }
}
</style>