|
|
@@ -0,0 +1,476 @@
|
|
|
+<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">
|
|
|
+ <live-foot></live-foot>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import liveFoot from '@/layout/live/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: {
|
|
|
+ liveFoot,
|
|
|
+ },
|
|
|
+ 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('@/assets/emotion/touxiang.png'),
|
|
|
+ // 发言内容
|
|
|
+ text: '',
|
|
|
+ per: require('@/assets/personal.jpg'),
|
|
|
+ // 招聘信息
|
|
|
+ zpxxList: zpxx,
|
|
|
+ // 正式岗位
|
|
|
+ zsgwList: zsgw,
|
|
|
+ // 实习岗位
|
|
|
+ sx: require('@/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('~@/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>
|
guhongwei
