<template>
|
<div class="app-container" style="width:100%; height: 100%;">
|
<!-- 回到顶部 -->
|
<el-backtop :bottom="150" :right="30">
|
<el-button type="primary" circle class="el-icon-top"></el-button>
|
</el-backtop>
|
|
<!-- 标题 -->
|
<h1 style="font-size:21px;padding-top:30px;display: flex;">
|
<span>直播</span>
|
<div class="button-container"></div>
|
<div style="display: flex; align-items: center;">
|
<el-button size="mini" type="text" v-hasPermi="['person:information:memo']" style="margin-left: 200px">
|
<div class="form" @click="newRequest"><el-icon style="padding-right:100px;"></el-icon>
|
<span class="text" style="width: 69px;height: 26px;font-size: 16px;
|
font-family: Microsoft YaHei-Regular, Microsoft YaHei; color: #EBA4AA;">直播申请</span>
|
</div>
|
</el-button>
|
</div>
|
</h1>
|
|
<hr>
|
|
<!-- 搜索 -->
|
<el-form :model="queryParams1">
|
<el-row>
|
<el-form-item label="" prop="people">
|
<el-input v-model="queryParams1.people" placeholder="请输入搜索内容" clearable style="width: 300px;
|
height: 35px;
|
text-align: left;
|
border-radius: 16px 16px 16px 16px;
|
opacity: 0.5;" @keyup.enter.native="handleQuery">
|
<i slot="prefix" class="el-input__icon el-icon-search"></i>
|
</el-input>
|
</el-form-item>
|
</el-row>
|
</el-form>
|
|
<el-row :gutter="0">
|
<el-col :span="4">
|
<div class="module">
|
<div class="video">
|
66666666
|
</div>
|
<span class="span1">中秋家庭会议</span>
|
<div class="tubiao"><i class="el-icon-view">10000</i></div>
|
<p class="author">发起者</p>
|
</div>
|
</el-col>
|
<el-col :span="4">
|
<div class="module">
|
<div class="video">
|
66666666
|
</div>
|
<span class="span1">中秋家庭会议</span>
|
<div class="tubiao"><i class="el-icon-view">10000</i></div>
|
<p class="author">发起者</p>
|
</div>
|
</el-col>
|
<el-col :span="4">
|
<div class="module">
|
<div class="video">
|
66666666
|
</div>
|
<span class="span1">中秋家庭会议</span>
|
<div class="tubiao"><i class="el-icon-view">10000</i></div>
|
<p class="author">发起者</p>
|
</div>
|
</el-col>
|
<el-col :span="4">
|
<div class="module">
|
<div class="video">
|
66666666
|
</div>
|
<span class="span1">中秋家庭会议</span>
|
<div class="tubiao"><i class="el-icon-view">10000</i></div>
|
<p class="author">发起者</p>
|
</div>
|
</el-col>
|
<el-col :span="4">
|
<div class="module">
|
<div class="video">
|
|
</div>
|
<span class="span1">中秋家庭会议</span>
|
<div class="tubiao"><i class="el-icon-view">10000</i></div>
|
<p class="author">发起者</p>
|
</div>
|
</el-col>
|
<el-col :span="4">
|
<div class="module">
|
<div class="video">
|
66666666
|
</div>
|
<span class="span1">中秋家庭会议</span>
|
<div class="tubiao"><i class="el-icon-view">10000</i></div>
|
<p class="author">发起者</p>
|
</div>
|
</el-col>
|
<el-col :span="4">
|
<div class="module">
|
<div class="video">
|
66666666
|
</div>
|
<span class="span1">中秋家庭会议</span>
|
<div class="tubiao"><i class="el-icon-view">10000</i></div>
|
<p class="author">发起者</p>
|
</div>
|
</el-col>
|
<el-col :span="4">
|
<div class="module">
|
<div class="video">
|
66666666
|
</div>
|
<span class="span1">中秋家庭会议</span>
|
<div class="tubiao"><i class="el-icon-view">10000</i></div>
|
<p class="author">发起者</p>
|
</div>
|
</el-col>
|
<el-col :span="4">
|
<div class="module">
|
<div class="video">
|
66666666
|
</div>
|
<span class="span1">中秋家庭会议</span>
|
<div class="tubiao"><i class="el-icon-view">10000</i></div>
|
<p class="author">发起者</p>
|
</div>
|
</el-col>
|
</el-row>
|
|
|
<!-- 直播申请对话框 -->
|
<el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
|
<el-form ref="elForm" :model="formDat" :rules="rules" size="medium" label-width="100px">
|
<!-- <el-form-item label="获得时间" prop="happenTime">-->
|
<!-- <el-input v-model="formDat.happenTime" placeholder="请输入获得时间" clearable :style="{width: '100%'}" ></el-input>-->
|
<!-- </el-form-item>-->
|
<!-- <el-form-item label="开始时间" prop="happenTime">
|
</el-form-item> -->
|
<el-form-item label="时间" prop="timeSpan">
|
<el-date-picker v-model="formDat.timeSpan" type="datetimerange" range-separator="至" start-placeholder="开始日期"
|
end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss">
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item label="会议标题" prop="meetingTitle">
|
<el-input v-model="formDat.meetingTitle" placeholder="请输入会议标题" clearable :style="{width: '100%'}">
|
</el-input>
|
</el-form-item>
|
<el-form-item label="会议地点" prop="address">
|
<el-input v-model="formDat.address" placeholder="请输入会议地点" clearable :style="{width: '100%'}">
|
</el-input>
|
</el-form-item>
|
<el-form-item label="会议室代码" prop="meetingID">
|
<el-input v-model="formDat.meetingID" placeholder="请输入会议室代码" clearable :style="{width: '100%'}">
|
</el-input>
|
</el-form-item>
|
<el-form-item label="可容纳人数" prop="capacity">
|
<el-input v-model="formDat.capacity" placeholder="请输入可容纳人数" clearable :style="{width: '100%'}">
|
</el-input>
|
</el-form-item>
|
<el-form-item label="参与人数" prop="attendance">
|
<el-input v-model="formDat.attendance" placeholder="请输入参与人数" clearable :style="{width: '100%'}">
|
</el-input>
|
</el-form-item>
|
<el-form-item label="申请人" prop="applicant">
|
<el-input v-model="formDat.applicant" placeholder="请输入申请人" clearable :style="{width: '100%'}">
|
</el-input>
|
</el-form-item>
|
<el-form-item label="申请家庭或部门" prop="familyName">
|
<el-input v-model="formDat.familyName" placeholder="请输入申请家庭或部门" clearable :style="{width: '100%'}">
|
</el-input>
|
</el-form-item>
|
<el-form-item label="联系人" prop="name">
|
<el-input v-model="formDat.name" placeholder="请输入联系人" clearable :style="{width: '100%'}">
|
</el-input>
|
</el-form-item>
|
<el-form-item label="联系电话" prop="phone">
|
<el-input v-model="formDat.phone" placeholder="请输入联系电话" clearable :style="{width: '100%'}"></el-input>
|
</el-form-item>
|
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button type="primary" @click="submitDataScope">保 存</el-button>
|
<el-button @click="cancel">取 消</el-button>
|
</div>
|
</el-dialog>
|
|
|
</div>
|
</template>
|
<script>
|
export default {
|
data() {
|
return {
|
queryParams1: [],
|
// 弹出层标题
|
title: "",
|
// 是否显示弹出层
|
open: false,
|
formDat: {
|
id: undefined,
|
happenTime: undefined,
|
endTime: undefined,
|
timeSpan: undefined,
|
meetingTitle: undefined,
|
address: undefined,
|
meetingID: undefined,
|
capacity: undefined,
|
attendance: undefined,
|
applicant: undefined,
|
familyName: undefined,
|
name: undefined,
|
phone: undefined,
|
url: "",
|
|
|
},
|
|
}
|
},
|
methods: {
|
newRequest() {
|
// this.reset();
|
this.open = true;
|
this.title = "直播申请";
|
},
|
cancel() {
|
this.open = false;
|
// this.reset();
|
},
|
submitDataScope() {
|
console.log(this.formDat.timeSpan)
|
}
|
|
}
|
}
|
</script>
|
<style scoped="">
|
.video {
|
background-color: black;
|
width: 90%;
|
margin-top: 5%;
|
margin-left: 5%;
|
height: 70%;
|
position: absolute;
|
}
|
|
.app-container {
|
background-color: #FEF7FC;
|
/* width: 2000px;
|
height: 1500px; */
|
}
|
|
.button-container {
|
text-align: right;
|
display: flex;
|
justify-content: flex-end;
|
align-items: center;
|
flex-grow: 1;
|
}
|
|
.el-table {
|
border-radius: 14px 14px 14px 14px;
|
}
|
|
.el-col {
|
border-radius: 4px;
|
}
|
|
.module {
|
width: 250px;
|
height: 250px;
|
background-color: rgb(255, 255, 255);
|
border-color: red;
|
border-radius: 6%;
|
margin-top: 20px;
|
margin-bottom: 20px;
|
/* margin-left: 5px;
|
margin-right: 5px; */
|
position: relative;
|
}
|
|
.grid-content {
|
border-radius: 4px;
|
min-height: 36px;
|
}
|
|
.span1 {
|
float: left;
|
font-size: 15px;
|
position: absolute;
|
bottom: 40px;
|
left: 80px;
|
}
|
|
.tubiao {
|
position: absolute;
|
bottom: 20px;
|
right: 10px;
|
}
|
|
.author {
|
position: absolute;
|
bottom: 10px;
|
left: 80px;
|
}
|
|
.form {
|
background: center/11% no-repeat url('../../assets/icons/add1.png');
|
|
}
|
</style>
|
