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.
779 lines
29 KiB
779 lines
29 KiB
<template>
|
|
<el-card shadow="never"
|
|
class="aui-card--fill">
|
|
<div class="mod-news__news}">
|
|
<el-form :inline="true"
|
|
:rules="dataRule"
|
|
:model="dataForm"
|
|
ref="dataForm"
|
|
:label-width="$i18n.locale === 'en-US' ? '120px' : '120px'">
|
|
<el-row>
|
|
<el-form-item label="活动头图："
|
|
v-loading="loading"
|
|
prop="headPic">
|
|
<el-upload class="avatar-uploader"
|
|
:action="uploadUrl"
|
|
:show-file-list="false"
|
|
:on-success="handleAvatarActSuccess"
|
|
:on-error="handelError"
|
|
:before-upload="beforeAvatarUpload">
|
|
<img v-if="dataForm.headPic"
|
|
:src="dataForm.headPic"
|
|
class="avatar">
|
|
<i v-else
|
|
class="el-icon-plus avatar-uploader-icon"></i>
|
|
<div slot="tip"
|
|
class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
|
|
</el-upload>
|
|
</el-form-item>
|
|
</el-row>
|
|
<el-row>
|
|
<el-form-item label="活动标题："
|
|
prop="title">
|
|
<el-input v-model="dataForm.title"
|
|
type="text"
|
|
maxlength="40"
|
|
show-word-limit
|
|
placeholder="请输入标题，40字以内"
|
|
clearable
|
|
style="width:500px">
|
|
</el-input>
|
|
</el-form-item>
|
|
</el-row>
|
|
<el-row>
|
|
<el-form-item label="所属类别："
|
|
prop="categoryCode">
|
|
<el-select v-model="dataForm.categoryCode"
|
|
placeholder="所属类别" style="width: 100%">
|
|
<el-option v-for="item in options"
|
|
:key="item.code"
|
|
:label="item.name"
|
|
:value="item.code">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-row>
|
|
<el-row>
|
|
<el-form-item label="报名要求："
|
|
prop="requirement">
|
|
<el-input v-model="dataForm.requirement"
|
|
placeholder="请输入报名要求，200字以内"
|
|
type="textarea"
|
|
style="width:500px"
|
|
maxlength="200"
|
|
clearable>
|
|
</el-input>
|
|
</el-form-item>
|
|
</el-row>
|
|
<el-row>
|
|
<el-form-item label="报名时间："
|
|
prop="signUpStartTime">
|
|
<el-date-picker v-model="dataForm.signUpStartTime"
|
|
type="datetime"
|
|
value-format="yyyy-MM-dd HH:mm"
|
|
format="yyyy-MM-dd HH:mm"
|
|
placeholder="选择日期时间">
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
<el-form-item label="至"
|
|
label-width="40px"
|
|
prop="signUpEndTime">
|
|
<el-date-picker v-model="dataForm.signUpEndTime"
|
|
type="datetime"
|
|
value-format="yyyy-MM-dd HH:mm"
|
|
format="yyyy-MM-dd HH:mm"
|
|
:picker-options="issignUpEndTime"
|
|
placeholder="选择日期时间">
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
</el-row>
|
|
<el-row>
|
|
<el-form-item label="活动名额："
|
|
prop="actQuota">
|
|
<template>
|
|
<el-radio v-model="dataForm.actQuotaFlag"
|
|
label="1">固定名额</el-radio>  
|
|
<el-input-number v-enter-number
|
|
type="number"
|
|
:min="1"
|
|
v-model="dataForm.actQuota"
|
|
placeholder="固定名额"
|
|
style="width:150px"></el-input-number>  人  
|
|
<el-radio v-model="dataForm.actQuotaFlag"
|
|
label="0">不限名额</el-radio>
|
|
</template>
|
|
</el-form-item>
|
|
</el-row>
|
|
<el-row>
|
|
<el-form-item label="活动时间："
|
|
prop="actStartTime">
|
|
<el-date-picker v-model="dataForm.actStartTime"
|
|
type="datetime"
|
|
value-format="yyyy-MM-dd HH:mm"
|
|
format="yyyy-MM-dd HH:mm"
|
|
placeholder="选择日期时间">
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
<el-form-item label="至"
|
|
label-width="40px"
|
|
prop="actEndTime">
|
|
<el-date-picker v-model="dataForm.actEndTime"
|
|
type="datetime"
|
|
value-format="yyyy-MM-dd HH:mm"
|
|
format="yyyy-MM-dd HH:mm"
|
|
placeholder="选择日期时间">
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
</el-row>
|
|
<el-row>
|
|
<el-form-item label="活动地点："
|
|
prop="actAddress">
|
|
<el-input v-model="dataForm.actAddress"
|
|
:disabled="dataForm.actAddress === ''"
|
|
type="text"
|
|
clearable
|
|
style="width:400px">
|
|
</el-input> 
|
|
<el-button type="primary"
|
|
@click="mapSelectHandle(1)">地图选择</el-button>
|
|
</el-form-item>
|
|
</el-row>
|
|
<el-row>
|
|
<el-form-item label="联系人："
|
|
prop="contacts">
|
|
<el-input v-model="dataForm.contacts"
|
|
maxlength="5"
|
|
style="width:150px"></el-input>
|
|
</el-form-item>
|
|
</el-row>
|
|
<el-row>
|
|
<el-form-item label="联系电话："
|
|
prop="tel">
|
|
<el-input v-model="dataForm.tel"
|
|
maxlength="20"
|
|
style="width:200px"></el-input>
|
|
</el-form-item>
|
|
</el-row>
|
|
<el-row>
|
|
<el-form-item label="活动主办方："
|
|
prop="sponsor">
|
|
<el-input v-model="dataForm.sponsor"
|
|
type="text"
|
|
maxlength="30"
|
|
show-word-limit
|
|
placeholder="请输入主办方，30字以内"
|
|
clearable
|
|
style="width:500px">
|
|
</el-input>
|
|
</el-form-item>
|
|
</el-row>
|
|
<el-row>
|
|
<el-form-item prop="actContent"
|
|
label="活动内容：">
|
|
<div style="width:1000px">
|
|
<!-- 富文本编辑器, 容器 -->
|
|
<div id="J_quillEditor" class="ql-editor"></div>
|
|
<!-- 自定义上传图片功能 (使用element upload组件) -->
|
|
<el-upload :action="uploadUrl"
|
|
:show-file-list="false"
|
|
:before-upload="uploadBeforeUploadHandle"
|
|
:on-success="uploadSuccessHandle"
|
|
style="display: none;">
|
|
<el-button ref="uploadBtn"
|
|
type="primary"
|
|
size="small">{{ $t('upload.button') }}</el-button>
|
|
</el-upload>
|
|
</div>
|
|
</el-form-item>
|
|
</el-row>
|
|
<el-row>
|
|
<el-form-item label="活动发布状态" prop="actStatus">
|
|
<el-radio-group v-model="dataForm.actStatus">
|
|
<el-radio :label="'1'">上架</el-radio>
|
|
<el-radio :label="'0'">下架</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
</el-row>
|
|
<el-row>
|
|
<el-form-item label="活动发布时间："
|
|
prop="publishTime">
|
|
<el-date-picker v-model="dataForm.publishTime"
|
|
type="datetime"
|
|
value-format="yyyy-MM-dd HH:mm"
|
|
format="yyyy-MM-dd HH:mm"
|
|
placeholder="选择日期时间">
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
</el-row>
|
|
<!-- <el-row>-->
|
|
<!-- <el-form-item label="已报名人数" prop="signUpNum">-->
|
|
<!-- <el-input v-model="dataForm.signUpNum" disabled placeholder="已报名人数"></el-input>-->
|
|
<!-- </el-form-item>-->
|
|
<!-- </el-row>-->
|
|
<!-- <el-row>-->
|
|
<!-- <el-form-item label="活动下架原因" prop="cancelReason">-->
|
|
<!-- <el-input v-model="dataForm.cancelReason"-->
|
|
<!-- placeholder="活动下架原因，1000字以内"-->
|
|
<!-- type="textarea"-->
|
|
<!-- style="width:500px"-->
|
|
<!-- maxlength="1000"-->
|
|
<!-- :rows="4"-->
|
|
<!-- clearable>-->
|
|
<!-- </el-input>-->
|
|
<!-- </el-form-item>-->
|
|
<!-- </el-row>-->
|
|
<el-row>
|
|
<el-form-item label-width="500px">
|
|
<el-button type="primary"
|
|
:disabled="isAble"
|
|
@click="dataFormSubmitHandle()">{{$t("confirm")}}</el-button>
|
|
<el-button @click="backToActList">返回</el-button>
|
|
</el-form-item>
|
|
</el-row>
|
|
</el-form>
|
|
<map-select v-if="mapSelectVisible"
|
|
ref="mapSelect"
|
|
v-on:position="position"></map-select>
|
|
</div>
|
|
</el-card>
|
|
</template>
|
|
<script>
|
|
import Cookies from 'js-cookie'
|
|
import MapSelect from './map-select'
|
|
import debounce from 'lodash/debounce'
|
|
import 'quill/dist/quill.snow.css'
|
|
import Quill from 'quill'
|
|
export default {
|
|
name: 'ActInfoAdd',
|
|
data () {
|
|
return {
|
|
visible: false,
|
|
dataForm: {
|
|
id: '',
|
|
title: '',
|
|
headPic: '',
|
|
signUpStartTime: '',
|
|
signUpEndTime: '',
|
|
actQuotaFlag: '1',
|
|
actStartTime: '',
|
|
actEndTime: '',
|
|
actAddress: '',
|
|
actLongitude: '',
|
|
actLatitude: '',
|
|
clockRadius: 200,
|
|
actQuota: '',
|
|
contacts: '',
|
|
tel: '',
|
|
requirement: '',
|
|
actContent: '',
|
|
actStatus: '1',
|
|
publishTime: '',
|
|
sponsor: '',
|
|
deptId: '',
|
|
punishmentPoints: '',
|
|
reward: '',
|
|
isBanner: '1',
|
|
actUserDefaultState: '1',
|
|
bannerUrl: '',
|
|
cancelReason: '',
|
|
signUpNum: 0,
|
|
sectionCode: '',
|
|
categoryCode: '',
|
|
categoryName: ''
|
|
},
|
|
options: [],
|
|
issignUpEndTime: {
|
|
disabledDate (time) {
|
|
return time < Date.now() - 8.64e7 // 8.64e7=1000*60*60*24一天
|
|
}
|
|
},
|
|
isImgRequired: true,
|
|
mapSelectVisible: false,
|
|
signInIsAble: true,
|
|
isAble: false,
|
|
loading: false,
|
|
// 富文本
|
|
quillEditor: null,
|
|
quillEditorToolbarOptions: [
|
|
['bold', 'italic', 'underline', 'strike'],
|
|
['blockquote', 'code-block', 'image'],
|
|
[{ 'header': 1 }, { 'header': 2 }],
|
|
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
|
|
[{ 'script': 'sub' }, { 'script': 'super' }],
|
|
[{ 'indent': '-1' }, { 'indent': '+1' }],
|
|
[{ 'direction': 'rtl' }],
|
|
[{ 'size': ['small', false, 'large', 'huge'] }],
|
|
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
|
|
[{ 'color': [] }, { 'background': [] }],
|
|
[{ 'font': [] }],
|
|
[{ 'align': [] }],
|
|
['clean']
|
|
],
|
|
uploadUrl: '',
|
|
pickerBeginDateBefore: {
|
|
disabledDate: (time) => {
|
|
let beginDateVal = this.dataForm.actStartTime
|
|
if (beginDateVal) {
|
|
return time.getTime() > new Date(beginDateVal).getTime()
|
|
}
|
|
}
|
|
},
|
|
pickerBeginDateAfter: {
|
|
disabledDate: (time) => {
|
|
let EndDateVal = this.dataForm.actEndTime
|
|
if (EndDateVal) {
|
|
return time.getTime() < new Date(EndDateVal).getTime()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
created () {
|
|
this.visible = true
|
|
this.$nextTick(() => {
|
|
// 富文本
|
|
this.hideUpload = false
|
|
this.uploadUrl = `${window.SITE_CONFIG['apiURL']}/oss/file/upload?token=${Cookies.get('token')}`
|
|
if (this.quillEditor) {
|
|
this.quillEditor.deleteText(0, this.quillEditor.getLength())
|
|
} else {
|
|
this.quillEditorHandle()
|
|
}
|
|
// 富文本end
|
|
})
|
|
},
|
|
mounted () {
|
|
this.getOptions()
|
|
},
|
|
computed: {
|
|
dataRule () {
|
|
return {
|
|
title: [
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|
],
|
|
headPic: [
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|
],
|
|
signUpStartTime: [
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|
],
|
|
signUpEndTime: [
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|
],
|
|
actStartTime: [
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|
],
|
|
actEndTime: [
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|
],
|
|
actAddress: [
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|
],
|
|
actLongitude: [
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|
],
|
|
actLatitude: [
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|
],
|
|
clockRadius: [
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|
],
|
|
actQuotaFlag: [
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|
],
|
|
actQuota: [
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|
],
|
|
clockNum: [
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|
],
|
|
actShareNum: [
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|
],
|
|
actBrowseNum: [
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|
],
|
|
contacts: [
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|
],
|
|
tel: [
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|
],
|
|
requirement: [
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|
],
|
|
actContent: [
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|
],
|
|
actStatus: [
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|
],
|
|
publishTime: [
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|
],
|
|
sponsor: [
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|
],
|
|
deptId: [
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|
],
|
|
categoryCode: [
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|
],
|
|
punishmentPoints: [
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|
],
|
|
reward: [
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|
],
|
|
revision: [
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|
],
|
|
createdBy: [
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|
],
|
|
createdTime: [
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|
],
|
|
updatedBy: [
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|
],
|
|
updatedTime: [
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|
],
|
|
bannerUrl: [
|
|
{ required: this.isImgRequired, message: this.$t('validate.required'), trigger: 'blur' }
|
|
]
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
getOptions () {
|
|
this.$http
|
|
.get(`/property/sectioncategory/list`, { params: { sectionCode: 'community_forum' } }).then(({ data: res }) => {
|
|
if (res.code !== 0) {
|
|
return this.$message.error(res.msg)
|
|
}
|
|
this.options = res.data
|
|
})
|
|
.catch(() => { })
|
|
},
|
|
changeHandler (value) {
|
|
if (value === 1) {
|
|
this.isImgRequired = true
|
|
} else {
|
|
this.isImgRequired = false
|
|
}
|
|
},
|
|
backToActList () {
|
|
this.$emit('refreshDataList')
|
|
this.$parent.selectComponent = 'ActInfoList'
|
|
this.$router.push({ path: '/activity-actinfo' })
|
|
},
|
|
init () {
|
|
this.visible = true
|
|
this.$nextTick(() => {
|
|
this.$refs['dataForm'].resetFields()
|
|
if (this.dataForm.id) {
|
|
this.getInfo()
|
|
}
|
|
})
|
|
},
|
|
position (position) {
|
|
if (position.type === 1) {
|
|
this.dataForm.actAddress = position.address
|
|
this.dataForm.actLatitude = position.latitude
|
|
this.dataForm.actLongitude = position.longitude
|
|
}
|
|
},
|
|
// 富文本编辑器
|
|
quillEditorHandle () {
|
|
this.quillEditor = new Quill('#J_quillEditor', {
|
|
modules: {
|
|
toolbar: this.quillEditorToolbarOptions
|
|
},
|
|
theme: 'snow'
|
|
})
|
|
this.quillEditor.container.style.height = `${300}px`
|
|
// // 自定义上传图片功能 (使用element upload组件)
|
|
this.quillEditor.getModule('toolbar').addHandler('image', () => {
|
|
this.$refs.uploadBtn.$el.click()
|
|
})
|
|
// 监听内容变化，动态赋值
|
|
this.quillEditor.on('text-change', () => {
|
|
this.dataForm.actContent = this.quillEditor.root.innerHTML
|
|
if ((this.dataForm.actContent).length > 10000) {
|
|
return this.$message.error('您输入的的内容已超过字数')
|
|
}
|
|
})
|
|
},
|
|
// 上传图片之前 (富文本)
|
|
uploadBeforeUploadHandle (file) {
|
|
if (file.type !== 'image/jpg' && file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
|
|
this.$message.error(this.$t('upload.tip', { 'format': 'jpg、png、gif' }))
|
|
return false
|
|
}
|
|
},
|
|
// 上传图片成功 (富文本)
|
|
uploadSuccessHandle (res, file, fileList) {
|
|
if (res.code !== 0) {
|
|
return this.$message.error(res.msg)
|
|
}
|
|
this.quillEditor.insertEmbed(this.quillEditor.getSelection().index, 'image', res.data.url)
|
|
},
|
|
setRegistTime () {
|
|
this.dataForm.newsReleaseStartTime = this.time[0]
|
|
this.dataForm.newsReleaseEndTime = this.time[1]
|
|
},
|
|
// 上传图片ends
|
|
// 获取信息
|
|
getInfo () {
|
|
this.$http.get(`/property/activityinfo/${this.dataForm.id}`).then(({ data: res }) => {
|
|
if (res.code !== 0) {
|
|
return this.$message.error(res.msg)
|
|
}
|
|
this.dataForm = {
|
|
...this.dataForm,
|
|
...res.data
|
|
}
|
|
}).catch(() => { })
|
|
},
|
|
// 表单提交
|
|
dataFormSubmitHandle: debounce(function () {
|
|
if (new Date() >= new Date(this.dataForm.signUpEndTime)) {
|
|
return this.$message.error('报名截止时间必须大于当前时间')
|
|
}
|
|
if (this.dataForm.actStartTime >= this.dataForm.actEndTime) {
|
|
return this.$message.error('活动结束时间必须大于活动开始时间')
|
|
}
|
|
if (this.dataForm.actStartTime <= this.dataForm.signUpEndTime) {
|
|
return this.$message.error('活动开始时间必须大于报名截止时间')
|
|
}
|
|
if ((this.dataForm.actContent).length > 10000) {
|
|
return this.$message.error('您输入的的内容已超过字数')
|
|
}
|
|
if (this.dataForm.isActQuota === 0) {
|
|
this.dataForm.actQuota = 0
|
|
}
|
|
this.$refs['dataForm'].validate((valid) => {
|
|
if (!valid) {
|
|
return false
|
|
}
|
|
var signUpEndTime = new Date(Date.parse(this.dataForm.signUpEndTime))
|
|
var actStarTime = new Date(Date.parse(this.dataForm.actStartTime))
|
|
var actEndTime = new Date(Date.parse(this.dataForm.actEndTime))
|
|
if (signUpEndTime > actStarTime) {
|
|
return this.$message.error('活动开始时间必须大于报名截止时间.')
|
|
}
|
|
if (actEndTime < actStarTime) {
|
|
return this.$message.error('活动结束时间必须大于活动开始时间.')
|
|
}
|
|
this.isAble = true
|
|
this.$http[!this.dataForm.id ? 'post' : 'put']('/property/activityinfo/', this.dataForm).then(({ data: res }) => {
|
|
this.isAble = false
|
|
if (res.code !== 0) {
|
|
return this.$message.error(res.msg)
|
|
}
|
|
this.$message({
|
|
message: this.$t('prompt.success'),
|
|
type: 'success',
|
|
duration: 500,
|
|
onClose: () => {
|
|
this.visible = false
|
|
this.$emit('refreshDataList')
|
|
}
|
|
})
|
|
this.$parent.selectComponent = 'ActInfoList'
|
|
this.$router.push({
|
|
path: '/activity-actinfo'
|
|
})
|
|
}).catch(() => { })
|
|
})
|
|
}, 1000, { 'leading': true, 'trailing': false }),
|
|
handleAvatarActSuccess (res, file) {
|
|
this.loading = false
|
|
this.dataForm.headPic = res.data.url
|
|
},
|
|
handleAvatarBannerSuccess (res, file) {
|
|
this.loading = false
|
|
this.dataForm.bannerUrl = res.data.url
|
|
},
|
|
beforeAvatarUpload (file) {
|
|
this.loading = true
|
|
},
|
|
handelError () {
|
|
this.loading = false
|
|
},
|
|
mapSelectHandle (type) {
|
|
this.mapSelectVisible = true
|
|
this.$nextTick(() => {
|
|
this.$refs.mapSelect.init(type, this.dataForm.clockRadius)
|
|
})
|
|
}
|
|
},
|
|
components: {
|
|
MapSelect
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.avatar-uploader .el-upload {
|
|
border: 1px dashed #d9d9d9;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.avatar-uploader .el-upload:hover {
|
|
border-color: #409eff;
|
|
}
|
|
.avatar-uploader-icon {
|
|
font-size: 28px;
|
|
color: #8c939d;
|
|
width: 178px;
|
|
height: 178px;
|
|
line-height: 178px;
|
|
text-align: center;
|
|
}
|
|
.avatar {
|
|
width: 178px;
|
|
height: 178px;
|
|
display: block;
|
|
}
|
|
</style>
|
|
<style lang="scss">
|
|
.project-handle {
|
|
.el-timeline {
|
|
padding-left: 9px;
|
|
font-size: 13px;
|
|
}
|
|
.el-textarea {
|
|
width: 600px !important;
|
|
}
|
|
.el-input {
|
|
width: 600px !important;
|
|
}
|
|
}
|
|
.el-form-item__label {
|
|
font-weight: bold;
|
|
}
|
|
</style>
|
|
|
|
<style lang="scss" scoped>
|
|
.project-handle {
|
|
width: 100%;
|
|
height: calc(100vh - 120px);
|
|
background: #ffffff;
|
|
box-sizing: border-box;
|
|
padding: 10px;
|
|
.project-detail {
|
|
width: 100%;
|
|
height: 49%;
|
|
border: 2px solid #ccc;
|
|
box-sizing: border-box;
|
|
padding: 10px;
|
|
padding-top: 20px;
|
|
float: left;
|
|
margin-bottom: 1%;
|
|
position: relative;
|
|
.project-detail-tip {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 80px;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
color: #ffffff;
|
|
background: #4ac38b;
|
|
text-align: center;
|
|
}
|
|
.el-form {
|
|
width: 58%;
|
|
height: 100%;
|
|
float: left;
|
|
overflow-y: auto;
|
|
&::-webkit-scrollbar {
|
|
width: 5px;
|
|
height: 1px;
|
|
}
|
|
&::-webkit-scrollbar-thumb {
|
|
border-radius: 5px;
|
|
background: #ccc;
|
|
}
|
|
&::-webkit-scrollbar-track {
|
|
border-radius: 10px;
|
|
background: #fff;
|
|
}
|
|
}
|
|
.container {
|
|
width: 40%;
|
|
height: 100%;
|
|
float: right;
|
|
.location {
|
|
height: 30px;
|
|
line-height: 30px;
|
|
}
|
|
#map {
|
|
width: 100%;
|
|
height: calc(100% - 30px);
|
|
}
|
|
}
|
|
}
|
|
.project-progress {
|
|
width: 20%;
|
|
height: 100%;
|
|
float: right;
|
|
border: 2px solid #ccc;
|
|
box-sizing: border-box;
|
|
margin-left: 1%;
|
|
padding-top: 20px;
|
|
overflow-y: auto;
|
|
&::-webkit-scrollbar {
|
|
width: 5px;
|
|
height: 1px;
|
|
}
|
|
&::-webkit-scrollbar-thumb {
|
|
border-radius: 5px;
|
|
background: #aaa;
|
|
}
|
|
&::-webkit-scrollbar-track {
|
|
border-radius: 10px;
|
|
background: #ccc;
|
|
}
|
|
}
|
|
.handle-operation {
|
|
padding-top: 30px;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
height: 49%;
|
|
box-sizing: border-box;
|
|
border: 2px solid #ccc;
|
|
float: left;
|
|
position: relative;
|
|
overflow-y: auto;
|
|
&::-webkit-scrollbar {
|
|
width: 5px;
|
|
height: 1px;
|
|
}
|
|
&::-webkit-scrollbar-thumb {
|
|
border-radius: 5px;
|
|
background: #aaa;
|
|
}
|
|
&::-webkit-scrollbar-track {
|
|
border-radius: 10px;
|
|
background: #ccc;
|
|
}
|
|
.handle-operation-tip {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 80px;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
color: #ffffff;
|
|
background: #ff7600;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|