|
|
@@ -1,6 +1,55 @@
|
|
|
<template>
|
|
|
<div id="personal">
|
|
|
- <p>personal</p>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24" class="main">
|
|
|
+ <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" v-for="(item, index) in chatList" :key="index">
|
|
|
+ {{ item.name }}
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="chat">
|
|
|
+ <el-col :span="20">
|
|
|
+ <el-input v-model="text" placeholder="请输入聊天内容"></el-input>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4">
|
|
|
+ <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-col>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -11,7 +60,20 @@ export default {
|
|
|
props: {},
|
|
|
components: {},
|
|
|
data: function() {
|
|
|
- return {};
|
|
|
+ return {
|
|
|
+ numList: [
|
|
|
+ { name: '同时在线', num: 1000 },
|
|
|
+ { name: '特邀嘉宾', num: 1000 },
|
|
|
+ { name: '洽谈合作', num: 1000 },
|
|
|
+ { name: '达成意向', num: 1000 },
|
|
|
+ { name: '对接成功', num: 1000 },
|
|
|
+ { name: '参展职位', num: 1000 },
|
|
|
+ ],
|
|
|
+ // 聊天列表
|
|
|
+ chatList: [{ name: '名字' }],
|
|
|
+ // 发言内容
|
|
|
+ text: '',
|
|
|
+ };
|
|
|
},
|
|
|
created() {},
|
|
|
methods: {},
|
|
|
@@ -24,4 +86,105 @@ export default {
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
-<style lang="less" scoped></style>
|
|
|
+<style lang="less" scoped>
|
|
|
+.main {
|
|
|
+ .one {
|
|
|
+ .top {
|
|
|
+ margin: 0 0 15px 0;
|
|
|
+ text-align: center;
|
|
|
+ p:nth-child(1) {
|
|
|
+ font-size: 40px;
|
|
|
+ }
|
|
|
+ p:nth-child(2) {
|
|
|
+ font-size: 18px;
|
|
|
+ padding: 15px 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .down {
|
|
|
+ margin: 0 0 15px 0;
|
|
|
+ p {
|
|
|
+ float: left;
|
|
|
+ width: 16%;
|
|
|
+ background: #cccccc5f;
|
|
|
+ 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;
|
|
|
+ .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 {
|
|
|
+ height: 450px;
|
|
|
+ border-top-left-radius: 5px;
|
|
|
+ border-bottom-left-radius: 5px;
|
|
|
+ overflow: hidden;
|
|
|
+ background: #f0ffff5f;
|
|
|
+ border-bottom: 1px solid #f1f1f1;
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ .chat {
|
|
|
+ height: 40px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
