You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
980 lines
26 KiB
980 lines
26 KiB
<!--
|
|
* @Descripttion:
|
|
* @version:
|
|
* @Author: JC9527
|
|
* @Date: 2023-09-18 10:08:30
|
|
* @LastEditors: JC9527
|
|
* @LastEditTime: 2023-09-18 15:34:55
|
|
-->
|
|
<template>
|
|
<div class="plan-management" ref="plan">
|
|
<div class="titleInput" ref="titleInput">
|
|
<el-input
|
|
placeholder="请输入活动名称"
|
|
v-model="form.name"
|
|
class="input-with-select"
|
|
>
|
|
<el-button
|
|
slot="append"
|
|
icon="el-icon-search"
|
|
@click="search"
|
|
></el-button>
|
|
</el-input>
|
|
</div>
|
|
<div ref="elbtn">
|
|
<el-button type="primary" plain @click="addActivity">新增活动</el-button>
|
|
</div>
|
|
<div class="plan-bottomBox">
|
|
<div class="tables">
|
|
<el-table
|
|
:data="tableData"
|
|
:border="false"
|
|
:height="tableHeight"
|
|
ref="table"
|
|
v-loading="loading"
|
|
tooltip-effect="light"
|
|
:cell-style="cellStyle"
|
|
>
|
|
<!-- <el-table-column
|
|
:row-class-name="tableRowClassName"
|
|
label="序号"
|
|
type="index"
|
|
header-align="center"
|
|
width="70"
|
|
>
|
|
</el-table-column> -->
|
|
<el-table-column prop="index" label="序号" align="center" width="60">
|
|
</el-table-column>
|
|
<el-table-column prop="name" label="活动名称" align="center">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="address"
|
|
label="地址"
|
|
align="center"
|
|
show-overflow-tooltip
|
|
>
|
|
</el-table-column>
|
|
<el-table-column prop="endTime" label="活动状态" align="center">
|
|
<template slot-scope="scope">
|
|
<div
|
|
:class="
|
|
$moment().isAfter(scope.row.endTime) ? 'color1' : 'color2'
|
|
"
|
|
>
|
|
{{ $moment().isAfter(scope.row.endTime) ? "停止" : "进行中" }}
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" align="center">
|
|
<template slot-scope="scope">
|
|
<div class="tabs-btns">
|
|
<div class="look" @click="look(scope.row)">
|
|
<span>查看</span>
|
|
</div>
|
|
<div class="look" @click="update(scope.row)">
|
|
<span>修改</span>
|
|
</div>
|
|
<div class="look" @click="deleteA(scope.row)">
|
|
<span>删除</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<div class="pagination" ref="pagination">
|
|
<my-pagination
|
|
:total="total"
|
|
@pagesChange="pagesChange"
|
|
></my-pagination>
|
|
</div>
|
|
</div>
|
|
<detailDialog ref="detailDialog"></detailDialog>
|
|
<!-- 新增修改 -->
|
|
<el-dialog
|
|
:visible.sync="addShow"
|
|
width="50%"
|
|
@close="closeAdd"
|
|
:destroy-on-close="true"
|
|
>
|
|
<div slot="title">
|
|
<div class="titleText">{{ titleText }}</div>
|
|
</div>
|
|
<div class="center-content">
|
|
<!-- 活动信息 -->
|
|
<header>
|
|
<div class="icons"></div>
|
|
<span>活动信息</span>
|
|
</header>
|
|
<el-form
|
|
:model="ruleForm1"
|
|
:rules="rules1"
|
|
ref="ruleForm1"
|
|
label-width="90px"
|
|
class="demo-ruleForm"
|
|
>
|
|
<div class="inputBox">
|
|
<el-form-item label="活动名称:" prop="name">
|
|
<el-input
|
|
v-model="ruleForm1.name"
|
|
placeholder="请输入活动名称"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="活动地址:" prop="address">
|
|
<el-input
|
|
v-model="ruleForm1.address"
|
|
placeholder="请输入活动地址"
|
|
></el-input>
|
|
</el-form-item>
|
|
</div>
|
|
<div class="inputBox">
|
|
<el-form-item label="开始时间:" prop="activityTime">
|
|
<el-date-picker
|
|
v-model="ruleForm1.activityTime"
|
|
type="datetime"
|
|
placeholder="请选择活动开始时间"
|
|
default-time="12:00:00"
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
>
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
<el-form-item label="截止时间:" prop="endTime">
|
|
<el-date-picker
|
|
v-model="ruleForm1.endTime"
|
|
type="datetime"
|
|
placeholder="请选择活动截止时间"
|
|
default-time="12:00:00"
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
>
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
</div>
|
|
<el-form-item label="活动内容:" prop="content">
|
|
<el-input
|
|
v-model="ruleForm1.content"
|
|
placeholder="请输入内容"
|
|
type="textarea"
|
|
:autosize="{ minRows: 2 }"
|
|
resize="none"
|
|
></el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="活动举办方:" prop="publisher">
|
|
<el-input
|
|
v-model="ruleForm1.publisher"
|
|
placeholder="请输入活动举办方"
|
|
></el-input>
|
|
</el-form-item>
|
|
<!-- 人员要求信息 -->
|
|
<header>
|
|
<div class="icons icons1"></div>
|
|
<span>人员要求信息</span>
|
|
</header>
|
|
<div class="inputBox">
|
|
<el-form-item label="小区:" prop="housingRange">
|
|
<el-select
|
|
v-model="ruleForm1.housingRange"
|
|
placeholder="请选择小区"
|
|
multiple
|
|
>
|
|
<el-option
|
|
v-for="dict in dict.type.xioaqu_type"
|
|
:key="dict.value"
|
|
:label="dict.label"
|
|
:value="dict.label"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="文化程度:" prop="educationRange">
|
|
<el-select
|
|
v-model="ruleForm1.educationRange"
|
|
placeholder="请选择文化程度"
|
|
multiple
|
|
>
|
|
<el-option
|
|
v-for="dict in dict.type.education_range"
|
|
:key="dict.value"
|
|
:label="dict.label"
|
|
:value="dict.label"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</div>
|
|
<div class="inputBox">
|
|
<el-form-item label="兴趣爱好:" prop="interestRange">
|
|
<el-select
|
|
v-model="ruleForm1.interestRange"
|
|
placeholder="请选择兴趣爱好"
|
|
multiple
|
|
>
|
|
<el-option
|
|
v-for="dict in dict.type.hobby_type"
|
|
:key="dict.value"
|
|
:label="dict.label"
|
|
:value="dict.label"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="政治面貌:" prop="politicalRange">
|
|
<el-select
|
|
v-model="ruleForm1.politicalRange"
|
|
placeholder="请选择政治面貌"
|
|
multiple
|
|
>
|
|
<el-option
|
|
v-for="dict in dict.type.political_range"
|
|
:key="dict.value"
|
|
:label="dict.label"
|
|
:value="dict.label"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</div>
|
|
<div class="inputBox">
|
|
<el-form-item label="性别:" prop="sexRange">
|
|
<el-select v-model="ruleForm1.sexRange" placeholder="请选择性别">
|
|
<el-option
|
|
v-for="dict in dict.type.sex_range"
|
|
:key="dict.value"
|
|
:label="dict.label"
|
|
:value="dict.label"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="年龄:" prop="ageRange">
|
|
<el-select
|
|
v-model="ruleForm1.ageRange"
|
|
multiple
|
|
placeholder="请选择年龄"
|
|
>
|
|
<el-option
|
|
v-for="dict in dict.type.age_range"
|
|
:key="dict.value"
|
|
:label="dict.label"
|
|
:value="dict.label"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</div>
|
|
<div class="inputBox">
|
|
<el-form-item label="专业类型:" prop="professionalRange">
|
|
<el-select
|
|
v-model="ruleForm1.professionalRange"
|
|
multiple
|
|
placeholder="请选择专业类型"
|
|
>
|
|
<el-option
|
|
v-for="dict in dict.type.speciality_type"
|
|
:key="dict.value"
|
|
:label="dict.label"
|
|
:value="dict.label"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="行业类型:" prop="industryRange">
|
|
<el-select
|
|
v-model="ruleForm1.industryRange"
|
|
multiple
|
|
placeholder="请选择行业类型"
|
|
>
|
|
<el-option
|
|
v-for="dict in dict.type.industry_type"
|
|
:key="dict.value"
|
|
:label="dict.label"
|
|
:value="dict.label"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</div>
|
|
|
|
<div class="inputBox">
|
|
<el-form-item label="院校:" prop="schoolRange">
|
|
<el-select
|
|
v-model="ruleForm1.schoolRange"
|
|
multiple
|
|
placeholder="请选择院校"
|
|
>
|
|
<el-option
|
|
v-for="dict in dict.type.yuanxiao_type"
|
|
:key="dict.value"
|
|
:label="dict.label"
|
|
:value="dict.label"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="国籍:" prop="nationalityRange">
|
|
<el-select
|
|
v-model="ruleForm1.nationalityRange"
|
|
multiple
|
|
placeholder="请选择国籍"
|
|
>
|
|
<el-option
|
|
v-for="dict in dict.type.nationality_type"
|
|
:key="dict.value"
|
|
:label="dict.label"
|
|
:value="dict.label"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</div>
|
|
</el-form>
|
|
<div class="footBtn">
|
|
<el-button @click="submit">提交</el-button>
|
|
<el-button @click="closeAdd">取消</el-button>
|
|
</div>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import myPagination from "@/views/components/myPagination/index.vue";
|
|
import {
|
|
activityList,
|
|
activityAdd,
|
|
activityUpdate,
|
|
activityDelete,
|
|
activityGet,
|
|
} from "@/api/volunteer/hdgl";
|
|
import detailDialog from "../components/detailDialog.vue";
|
|
export default {
|
|
components: { myPagination, detailDialog },
|
|
dicts: [
|
|
"education_range",
|
|
"political_range",
|
|
"sex_range",
|
|
"age_range",
|
|
"xioaqu_type",
|
|
"hobby_type",
|
|
"speciality_type",
|
|
"industry_type",
|
|
"yuanxiao_type",
|
|
"nationality_type",
|
|
],
|
|
data() {
|
|
return {
|
|
form: {
|
|
name: "",
|
|
},
|
|
tableData: [],
|
|
input: "",
|
|
pages: {
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
},
|
|
total: 0,
|
|
loading: false,
|
|
//打开新增
|
|
addShow: false,
|
|
ruleForm1: {
|
|
//活动名称
|
|
name: "",
|
|
//活动时间
|
|
activityTime: "",
|
|
//活动内容
|
|
content: "",
|
|
//活动地址
|
|
address: "",
|
|
//活动举办方
|
|
publisher: "",
|
|
//小区
|
|
housingRange: "",
|
|
//文化程度
|
|
educationRange: "",
|
|
//兴趣爱好
|
|
interestRange: "",
|
|
//政治面貌
|
|
politicalRange: "",
|
|
//性别
|
|
sexRange: "",
|
|
//国籍
|
|
nationalityRange: "",
|
|
//专业类型
|
|
professionalRange: "",
|
|
//行业类型
|
|
industryRange: "",
|
|
//院校
|
|
schoolRange: "",
|
|
//年龄
|
|
ageRange: "",
|
|
//截止时间
|
|
endTime: "",
|
|
},
|
|
rules1: {
|
|
name: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
|
|
//活动开始时间
|
|
activityTime: [
|
|
{ required: true, message: "请选择活动开始时间", trigger: "blur" },
|
|
],
|
|
endTime: [
|
|
{ required: true, message: "请选择活动截至时间", trigger: "blur" },
|
|
],
|
|
//活动内容
|
|
content: [
|
|
{ required: true, message: "请输入活动内容", trigger: "blur" },
|
|
],
|
|
//活动地址
|
|
address: [
|
|
{ required: true, message: "请输入活动地址", trigger: "blur" },
|
|
],
|
|
//活动举办方
|
|
publisher: [
|
|
{ required: true, message: "请输入活动举办方", trigger: "blur" },
|
|
],
|
|
},
|
|
tableHeight: 0,
|
|
//新增修改标题
|
|
titleText: "",
|
|
};
|
|
},
|
|
created() {
|
|
this.getList();
|
|
},
|
|
methods: {
|
|
search() {
|
|
this.pages = { ...this.pages, ...this.form };
|
|
this.getList();
|
|
},
|
|
getList() {
|
|
this.loading = true;
|
|
activityList(this.pages).then((res) => {
|
|
this.total = res.total;
|
|
this.tableData = res.rows;
|
|
this.tableData.forEach((element, index) => {
|
|
element.index = index + 1;
|
|
});
|
|
this.loading = false;
|
|
});
|
|
},
|
|
//重置
|
|
reset() {
|
|
this.ruleForm1 = {
|
|
name: "",
|
|
activityTime: "",
|
|
content: "",
|
|
address: "",
|
|
publisher: "",
|
|
housingRange: "",
|
|
educationRange: "",
|
|
interestRange: "",
|
|
politicalRange: "",
|
|
sexRange: "",
|
|
nationalityRange: "",
|
|
professionalRange: "",
|
|
industryRange: "",
|
|
schoolRange: "",
|
|
ageRange: "",
|
|
endTime: "",
|
|
};
|
|
},
|
|
//新增
|
|
addActivity() {
|
|
this.titleText = "新增活动";
|
|
this.reset();
|
|
this.addShow = true;
|
|
},
|
|
//修改
|
|
update(e) {
|
|
this.reset();
|
|
this.titleText = "编辑信息";
|
|
activityGet(e.id).then((res) => {
|
|
let arr = [
|
|
"ageRange",
|
|
"politicalRange",
|
|
"educationRange",
|
|
"housingRange",
|
|
"industryRange",
|
|
"interestRange",
|
|
"professionalRange",
|
|
"schoolRange",
|
|
"nationalityRange",
|
|
];
|
|
arr.forEach((item) => {
|
|
for (let itemB in res.data) {
|
|
if (item == itemB) {
|
|
//多选后值是数组类型 =》string
|
|
if (res.data[itemB]) {
|
|
res.data[itemB] = res.data[itemB].split(",");
|
|
} else {
|
|
res.data[itemB] = [];
|
|
}
|
|
}
|
|
}
|
|
});
|
|
this.ruleForm1 = res.data;
|
|
this.addShow = true;
|
|
});
|
|
},
|
|
closeAdd() {
|
|
this.reset();
|
|
this.addShow = false;
|
|
},
|
|
look(e) {
|
|
this.$refs.detailDialog.open(e.id);
|
|
},
|
|
//删除
|
|
deleteA(e) {
|
|
this.$modal
|
|
.confirm("是否确认删除该活动?")
|
|
.then(function () {
|
|
return activityDelete(e.id);
|
|
})
|
|
.then(() => {
|
|
this.getList();
|
|
this.$modal.msgSuccess("删除成功");
|
|
})
|
|
.catch(() => {});
|
|
},
|
|
//确定新增或者修改
|
|
submit() {
|
|
this.$refs.ruleForm1.validate((valid) => {
|
|
if (valid) {
|
|
let arr = [
|
|
"ageRange",
|
|
"sexRange",
|
|
"politicalRange",
|
|
"educationRange",
|
|
"housingRange",
|
|
"industryRange",
|
|
"interestRange",
|
|
"professionalRange",
|
|
"schoolRange",
|
|
"nationalityRange",
|
|
];
|
|
let i = 0;
|
|
arr.forEach((item) => {
|
|
for (let itemB in this.ruleForm1) {
|
|
if (item == itemB) {
|
|
if (this.ruleForm1[itemB] != "") {
|
|
i++;
|
|
}
|
|
//多选后值是数组类型 =》string
|
|
this.ruleForm1[itemB] = this.ruleForm1[itemB].toString();
|
|
}
|
|
}
|
|
});
|
|
if (i < 3) {
|
|
this.$message.error("人员信息要求最低选择三条");
|
|
return;
|
|
}
|
|
if (this.ruleForm1.id != undefined) {
|
|
activityUpdate(this.ruleForm1).then((res) => {
|
|
this.$modal.msgSuccess("修改成功");
|
|
this.addShow = false;
|
|
this.getList();
|
|
});
|
|
} else {
|
|
activityAdd(this.ruleForm1).then((response) => {
|
|
this.$modal.msgSuccess("新增成功");
|
|
this.addShow = false;
|
|
this.getList();
|
|
});
|
|
}
|
|
}
|
|
});
|
|
},
|
|
// 页码，当前页切换事件
|
|
pagesChange(pages) {
|
|
this.pages.pageNum = pages.pageNum;
|
|
this.pages.pageSize = pages.pageSize;
|
|
this.getList();
|
|
},
|
|
// tabs不同行给不同class
|
|
tableRowClassName({ row, rowIndex }) {
|
|
if (rowIndex % 2 !== 0) {
|
|
return "success-row";
|
|
}
|
|
return "";
|
|
},
|
|
// 单元格的 style 的回调方法
|
|
cellStyle({ row, column, rowIndex, columnIndex }) {
|
|
if (columnIndex === 0) {
|
|
return `text-align:center`;
|
|
} else {
|
|
return "";
|
|
}
|
|
},
|
|
},
|
|
mounted() {
|
|
this.$nextTick(() => {
|
|
this.tableHeight =
|
|
this.$refs.plan.offsetHeight -
|
|
80 -
|
|
this.$refs.titleInput.offsetHeight -
|
|
this.$refs.elbtn.offsetHeight -
|
|
this.$refs.pagination.offsetHeight;
|
|
});
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.color1 {
|
|
color: #f71052;
|
|
}
|
|
.color2 {
|
|
color: #23b06c;
|
|
}
|
|
.titlePagin {
|
|
margin: 12px 0;
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
}
|
|
::v-deep .titlePagin .el-pagination {
|
|
padding: 0;
|
|
}
|
|
::v-deep .inputBox .el-date-editor {
|
|
width: 100%;
|
|
}
|
|
::v-deep .titleInput .el-input__inner {
|
|
border-right: none;
|
|
}
|
|
::v-deep .titleInput .el-input-group__append {
|
|
background: #f8414d;
|
|
border: none;
|
|
color: #fff;
|
|
}
|
|
.titleInput {
|
|
width: 30%;
|
|
margin-bottom: 10px;
|
|
}
|
|
.plan-management {
|
|
padding: 20px;
|
|
background-color: #fff;
|
|
height: 100%;
|
|
width: 100%;
|
|
border-radius: 10px 10px 0 0;
|
|
box-shadow: 0px 0px 15px 0px rgba(229, 212, 212, 0.58);
|
|
.plan-topBox {
|
|
padding: 20px 0 0 0;
|
|
}
|
|
.plan-bottomBox {
|
|
margin-top: 10px;
|
|
.tables {
|
|
::v-deep .el-table {
|
|
.success-row {
|
|
background-color: rgba(250, 247, 247, 0.5);
|
|
}
|
|
.activity {
|
|
div {
|
|
text-align: left;
|
|
&:nth-child(1) {
|
|
font-size: 14px;
|
|
font-family: "Alibaba-PuHuiTi-Regular";
|
|
|
|
font-weight: 400;
|
|
color: #4d4949;
|
|
}
|
|
&:nth-child(2) {
|
|
width: 180px;
|
|
font-size: 14px;
|
|
font-family: "Alibaba-PuHuiTi-Regular";
|
|
|
|
font-weight: 400;
|
|
color: #999191;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
}
|
|
td {
|
|
// height: 42px;
|
|
box-sizing: border-box;
|
|
// text-align: center;
|
|
font-size: 14px;
|
|
font-family: "Alibaba-PuHuiTi-Regular";
|
|
font-weight: 400;
|
|
color: #525966;
|
|
// padding: 2px 0;
|
|
}
|
|
th {
|
|
// height: 45px;
|
|
background-color: #f7f5f5;
|
|
font-size: 15px;
|
|
font-family: "Alibaba-PuHuiTi-Regular";
|
|
|
|
font-weight: bold;
|
|
color: #4d4949;
|
|
.el-checkbox {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
::v-deep .el-table::before {
|
|
height: 0;
|
|
}
|
|
.tabs-btns {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.look {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 10px;
|
|
// margin-right: 30px;
|
|
cursor: pointer;
|
|
// img {
|
|
// width: 20px;
|
|
// margin-right: 5px;
|
|
// }
|
|
span {
|
|
font-size: 15px;
|
|
font-family: "Alibaba-PuHuiTi-Regular";
|
|
font-weight: 400;
|
|
color: #045ffd;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.pagination {
|
|
margin-top: 20px;
|
|
}
|
|
}
|
|
}
|
|
.mainTag {
|
|
display: flex;
|
|
font-family: "Alibaba-PuHuiTi-Regular";
|
|
& > div {
|
|
margin-right: 5px;
|
|
background-color: rgba(248, 65, 77, 0.06);
|
|
padding: 3px 5px;
|
|
color: #e16a70;
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
::v-deep .el-dialog {
|
|
border-radius: 10px;
|
|
margin-bottom: 20px;
|
|
}
|
|
::v-deep .el-dialog__header {
|
|
padding: 10px;
|
|
padding-left: 15px;
|
|
background: #f7f5f5;
|
|
border-top-left-radius: 10px;
|
|
border-top-right-radius: 10px;
|
|
}
|
|
::v-deep .el-dialog__body {
|
|
padding: 0;
|
|
}
|
|
::v-deep .el-dialog__footer {
|
|
padding: 0;
|
|
}
|
|
::v-deep .el-dialog__headerbtn {
|
|
top: 12px;
|
|
}
|
|
.titleText {
|
|
font-family: "Alibaba-PuHuiTi-Regular";
|
|
font-weight: bold;
|
|
color: #4c4949;
|
|
padding-left: 15px;
|
|
font-size: 16px;
|
|
position: relative;
|
|
&::before {
|
|
position: absolute;
|
|
top: 3.8px;
|
|
left: 0;
|
|
content: "";
|
|
width: 5px;
|
|
height: 15px;
|
|
background: #f8414d;
|
|
}
|
|
}
|
|
.center-content {
|
|
padding: 20px 30px;
|
|
header {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 14px;
|
|
.icons {
|
|
height: 14px;
|
|
width: 14px;
|
|
background-image: url("../../../../assets/images/hdxx.png");
|
|
background-size: 100% 100%;
|
|
}
|
|
.icons1 {
|
|
background-image: url("../../../../assets/images/rypp.png");
|
|
}
|
|
.icons2 {
|
|
background-image: url("../../../../assets/images/baoming1.png");
|
|
}
|
|
span {
|
|
margin-left: 10px;
|
|
color: #4c4949;
|
|
font-weight: bold;
|
|
font-family: "Alibaba-PuHuiTi-Regular";
|
|
}
|
|
}
|
|
.mainsEvents {
|
|
// height: 35px;
|
|
display: flex;
|
|
align-items: center;
|
|
font-family: "Alibaba-PuHuiTi-Regular";
|
|
margin-bottom: 12px;
|
|
|
|
.itemE {
|
|
width: 50%;
|
|
display: flex;
|
|
& > div:nth-of-type(1) {
|
|
display: flex;
|
|
// align-items: center;
|
|
color: #4c4949;
|
|
width: 24%;
|
|
}
|
|
& > div:nth-last-of-type(2) {
|
|
color: #807a7a;
|
|
}
|
|
}
|
|
}
|
|
.mainsTitle {
|
|
margin-bottom: 12px;
|
|
display: flex;
|
|
font-family: "Alibaba-PuHuiTi-Regular";
|
|
& > div:nth-of-type(1) {
|
|
color: #807a7a;
|
|
width: 12%;
|
|
}
|
|
& > div:nth-of-type(2) {
|
|
width: 88%;
|
|
color: #606266;
|
|
}
|
|
}
|
|
.noneStyle {
|
|
height: 200px;
|
|
margin-bottom: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: "Alibaba-PuHuiTi-Medium.otf";
|
|
color: #606266;
|
|
font-size: 14px;
|
|
}
|
|
.mainPeople {
|
|
overflow: auto;
|
|
height: 200px;
|
|
box-sizing: border-box;
|
|
margin-bottom: 12px;
|
|
.subMan {
|
|
width: 100%;
|
|
height: 95px;
|
|
background: #fafafa;
|
|
border: 1px solid #f5edeb;
|
|
border-radius: 10px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
box-sizing: border-box;
|
|
padding: 15px;
|
|
margin-bottom: 10px;
|
|
.leftSub {
|
|
width: 84%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
.leftAvatar {
|
|
height: 65px;
|
|
width: 65px;
|
|
background-size: 100% 100%;
|
|
border-radius: 10px;
|
|
}
|
|
.leftName {
|
|
margin-left: 15px;
|
|
& > div:nth-of-type(1) {
|
|
font-family: "Alibaba-PuHuiTi-Medium.otf";
|
|
color: #4c4949;
|
|
font-size: 18px;
|
|
margin-bottom: 18px;
|
|
}
|
|
}
|
|
}
|
|
.rightSub {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
.numPercen {
|
|
display: flex;
|
|
// align-items: flex-end;
|
|
align-items: center;
|
|
& > span:nth-of-type(1) {
|
|
font-family: "Alibaba-PuHuiTi-Regular";
|
|
font-weight: 400;
|
|
color: #8a8585;
|
|
margin-right: 10px;
|
|
}
|
|
& > span:nth-of-type(2) {
|
|
font-family: "youshebiaotihei";
|
|
color: #49b28f;
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
.itemBtn {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.look {
|
|
background: #fff;
|
|
border-radius: 4px;
|
|
color: #188ffe;
|
|
font-family: "Alibaba-PuHuiTi-Regular";
|
|
padding: 5px 10px;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
.looks {
|
|
background: #fff;
|
|
border-radius: 4px;
|
|
color: #49b28f;
|
|
font-family: "Alibaba-PuHuiTi-Regular";
|
|
padding: 5px 10px;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
::-webkit-scrollbar {
|
|
width: 5px;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: #e5d3d4;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: #f4f1f1;
|
|
}
|
|
.inputBox {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
& > div {
|
|
width: 47%;
|
|
}
|
|
}
|
|
::v-deep .el-select {
|
|
width: 100%;
|
|
}
|
|
::v-deep .el-form-item__label {
|
|
font-size: 14px;
|
|
font-family: "Alibaba-PuHuiTi-Regular";
|
|
font-weight: 400;
|
|
color: #4c4949;
|
|
text-align: left;
|
|
padding-right: 0;
|
|
}
|
|
.footBtn {
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
}
|
|
::v-deep .footBtn .el-button {
|
|
margin-left: 10px;
|
|
font-family: "Alibaba-PuHuiTi-Regular";
|
|
}
|
|
</style>
|