zd_wechatApp/pages/enginproject/enginproject.vue

	<template>
		<view>
			<view class="background">
				<view class="uni-list">
					<view class="container">
						<view>
							工程类型
						</view>
						<view v-if="this.isEmpty(this.projectType.dictValue)" style="margin-top: 10;"
							@click="pickerShow('gclx',0)">
							<span style="color: darkgray;">请选择工程类型</span>
						</view>
						<view v-else class="uni-list-cell-db" style="margin-top: 10;" @click="pickerShow('gclx',0)">
							<span style="color: black;">{{projectType.dictLabel}}</span>
						</view>
					</view>
				</view>
				<view class="uni-list">
					<view class="container">

						<text>工程名称</text>
						<input class="uni-input" type="text" v-model="projectName" placeholder="请填写工程名称" maxlength="100"
							style="margin-left: 10px;text-align: right;"></input>
					</view>
				</view>
				<view class="uni-list">
					<view class="container">

						<text>建设单位</text>
						<input class="uni-input" type="text" v-model="jsdwValue" placeholder="请填写建设单位" maxlength="100"
							style="margin-left: 10px;text-align: right;"></input>
					</view>
				</view>
				<view class="uni-list">
					<view class="container">

						<text>项目负责人</text>
						<input class="uni-input" type="text" v-model="xmfzrValue" placeholder="请填写项目负责人" maxlength="16"
							style="margin-left: 10px;text-align: right;"></input>
					</view>
				</view>
				<view class="uni-list">
					<view class="container">

						<text>现场负责人</text>
						<input class="uni-input" type="text" v-model="xcfzrValue" placeholder="请填写现场负责人" maxlength="16"
							style="margin-left: 10px;text-align: right;"></input>
					</view>
				</view>
				<view class="uni-list">
					<view class="container">

						<text>设计单位</text>
						<input class="uni-input" type="text" v-model="sjdwValue" placeholder="请填写设计单位" maxlength="100"
							style="margin-left: 10px;text-align: right;"></input>
					</view>
				</view>
				<view class="uni-list">
					<view class="container">

						<text>设计负责人</text>
						<input class="uni-input" type="text" v-model="sjfzrValue" placeholder="请填写设计负责人" maxlength="16"
							style="margin-left: 10px;text-align: right;"></input>
					</view>
				</view>
				<view class="uni-list">
					<view class="container">

						<text>设计联系电话</text>
						<input class="uni-input" type="number" v-model="sjPhoneValue" placeholder="请填写设计联系电话"
							maxlength="11" style="margin-left: 10px;text-align: right;"></input>
					</view>
				</view>
				<view class="uni-list">
					<view class="container">

						<text>监理单位</text>
						<input class="uni-input" type="text" v-model="jldwValue" placeholder="请填写监理单位" maxlength="100"
							style="margin-left: 10px;text-align: right;"></input>
					</view>
				</view>
				<view class="uni-list">
					<view class="container">

						<text>监理负责人</text>
						<input class="uni-input" type="text" v-model="jlfzrValue" placeholder="请填写监理负责人" maxlength="16"
							style="margin-left: 10px;text-align: right;"></input>
					</view>
				</view>
				<view class="uni-list">
					<view class="container">

						<text>监理联系电话</text>
						<input class="uni-input" type="number" v-model="jlPhoneValue" placeholder="请填写监理联系电话"
							maxlength="11" style="margin-left: 10px;text-align: right;"></input>
					</view>
				</view>
				<view class="uni-list">
					<view class="align-items" style="margin-bottom: 20px;">
						<view class="container" style="color: gainsboro;">*请上传文件</view>
						<view class="" style="display: flex; flex-wrap: wrap;margin-top: 10px; margin-left: 10px;">
							<image src="/static/images/chooseimg.png" mode=""
								style="width: 100rpx; height: 100rpx; margin: 0 12rpx;; " @click="chooseFile()"></image>
							<view v-for="(item,index) in fileArr" :key="index" style="position: relative;">
								<view style="width: 100rpx; height: 100rpx; margin: 0 12rpx;">{{item.name}}
									<!-- <image :src="item" mode="" style="width: 100rpx; height: 100rpx; margin: 0 12rpx;">
									</image> -->

								</view>

								<view @click="removeFile(index)"
									style="position: absolute; top: 0; right: 14rpx; border-radius: 50%;">
									<uni-icons type="close" color="darkgray" size="18"></uni-icons>
								</view>
							</view>
						</view>
					</view>
				</view>




				<SelectPicker :list="selectList" @change="changeSelect" v-if="open" @close="close" titleKey="name"
					subtitleKey="id" v-model="name"></SelectPicker>


				<SelectPicker :list="dictOptions" @change="changeSelectDict" v-if="openDict" @close="closeDict"
					titleKey="dictLabel" subtitleKey="dictValue" v-model="dictLabel"></SelectPicker>
			</view>

			<view class="background">
				<view>
					<view class="uni-list">
						<view style="font-size: 16px;margin-left: 10px;margin-top: 10px;">
							{{objValue.value}}

							<span
								style="color: blue;font-size: 14px;  display: flex;justify-content:flex-end; margin-right: 15px;"
								@click="history">历史</span>
						</view>
						<view class="container">

							<view>
								施工时间
							</view>
							<view style="margin-top: 10;" @click="openDatetimePicker()">
								<span style="color: black;">{{time}}</span>
							</view>
						</view>




						<view v-for="(a,index) in czggslList" :key="index">
							<view class="container">
								<view>
									材质
								</view>
								<view class="uni-list-cell-db" style="margin-top: 10;" @click="pickerShow('cz',index)">
									<span style="color: black;">{{a.cz.id==''?'请选择材质':a.cz.name}}</span>
								</view>

							</view>
							<view class="container">

								<view>
									规格
								</view>

								<view class="uni-list-cell-db" style="margin-top: 10;" @click="pickerShow('gg',index)">
									<span style="color: black;">{{a.gg.id==''?'请选择规格':a.gg.name}}</span>
								</view>
							</view>
							<view class="container">

								<text>数量</text>
								<input class="uni-input" type="number" v-model="a.sl" placeholder="请填写数量" maxlength="11"
									style="margin-left: 10px;text-align: right;"></input>
							</view>
							<button v-if="index!=0" @click="this.czggslList.splice(index,1)">删除</button>
						</view>
						<button
							@click="this.czggslList.push({cz:{id: '',name: ''},gg:{id: '',name: ''},sl:''})">添加</button>

					</view>

					<view class="align-items" style="margin-top: 20px;margin-bottom: 20px;">
						<view class="container" style="color: gainsboro;">*请上传照片</view>
						<view class="" style="display: flex; flex-wrap: wrap;margin-top: 10px; margin-left: 10px;">
							<image src="/static/images/chooseimg.png" mode=""
								style="width: 100rpx; height: 100rpx; margin: 0 12rpx;; " @click="choose()"></image>
							<view v-for="(item,index) in imgArr" :key="index" style="position: relative;">
								<view
									v-if="item.substring(item.length - 3) == 'png' || item.substring(item.length - 3) == 'jpg' ">
									<image :src="item" mode="" style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"
										@click="showPhoto(index)">
									</image>
								</view>
								<view v-else>
									<video :src="item" style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"></video>
								</view>
								<view @click="remove(index)"
									style="position: absolute; top: 0; right: 14rpx; border-radius: 50%;">
									<uni-icons type="close" color="darkgray" size="18"></uni-icons>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="action-btn">
				<button @click="submit" class="btn cu-btn block bg-blue lg round">确认上传</button>
			</view>

			<bottom-sheet ref="refShare" :data="historyList"></bottom-sheet>
			<yt-dateTimePicker ref="myPicker" @submit="handleSubmit" :start-year="2024" :end-year="2099"
				:time-hide="[true, true, true, true, true, true]" :time-label="['年', '月', '日', '时', '分', '秒']" />
		</view>
	</template>



	<script>
		import SelectPicker from '../../components/selectPicker/select_picker.vue'
		import bottomSheet from '../../components/bottomSheet/bottomSheet.vue'

		import uniIcons from '../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue'
		import {
			getDicts
		} from "@/api/system/dict/data";
		import {
			getEnginMaterialQualityList,
			getEnginSpecificationsList,
			getRoomProjectList,
			getRoomProjectId,
			Submitengineering,
		} from '@/api/common'
		import {
			getToken
		} from '../../utils/auth';

		import {
			getUserProfile
		} from "@/api/system/user"

		export default {
			components: {
				SelectPicker,
				uniIcons,
				bottomSheet,
			},
			data() {


				return {
					zEngineeringMaterialBo: [], //给后台传的值  用料列表
					czggslList: [{
						cz: {
							id: '',
							name: ''
						},
						gg: {
							id: '',
							name: ''
						},
						sl: ''
					}, ],
					conLists: [],
					headers: {
						Authorization: "Bearer " + getToken()
					},
					time: '', //施工时间
					user: {
						nickName: "",
						phonenumber: "",
						email: "",
						sex: ""
					},
					loading: false,
					loadingFile: false,
					projectType: {}, //工程类型
					open: false,
					objValue: '', //上一页面传过来的值  新增接口用
					openDict: false,
					specificationValue: {}, //规格
					projectContent: '', //施工内容
					materialValue: {}, //材质
					selectList: [],
					dictOptions: [],
					imgArr: [],
					fileArr: [],
					fileNameArr: [],
					type: '',
					jlPhoneValue: '', //监理电话
					jlfzrValue: '', //监理负责人
					jldwValue: '', //监理单位
					sjPhoneValue: '', //设计电话
					sjfzrValue: '', //设计负责人
					sjdwValue: '', //设计单位
					xcfzrValue: '', //现场负责人
					xmfzrValue: '', //项目负责人
					jsdwValue: '', //建设单位
					projectName: '', //工程名称
					SelectIndex: '', //选择的索引值

				}
			},

			created() {
				this.getUser();
				this.time = this.traversalTime(new Date().getTime()) //在data里定义变量-nowTime
				console.log(this.time)
			},

			onLoad(options) {
				if ('params' in options) {
					this.objValue = JSON.parse(decodeURIComponent(options.params));
					if (this.objValue.enginType == `old_renovation`) {
						this.title = '旧改工程-庭院'

					} else if (this.objValue.enginType == `new_built`) {
						this.title = '新建工程-庭院'
					}

					uni.setNavigationBarTitle({
						title: this.title
					})
				}


			},
			methods: {
				//判断是否选择

				isEmpty(str) {

					return (!str || 0 === str.length);

				},

				handleSubmit(e) {

					this.time = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:${e.second}`;

				},

				//获取当前时间
				traversalTime(timestamp) {
					//timestamp(时间戳)是整数，否则要parseInt转换
					let time = new Date(timestamp);
					let y = time.getFullYear();
					let m = time.getMonth() + 1;
					let d = time.getDate();
					let h = time.getHours();
					let mm = time.getMinutes();
					let s = time.getSeconds();
					return y + '-' + this.addTimes(m) + '-' + this.addTimes(d) + ' ' + this.addTimes(h) + ':' + this.addTimes(
						mm) + ':' + this.addTimes(s);


				},
				addTimes(m) {
					return m < 10 ? '0' + m : m
				},
				// 打开picker
				openDatetimePicker() {
					this.$refs.myPicker.show();
				},

				// 关闭picker
				closeDatetimePicker() {
					this.$refs.myPicker.hide();
				},
				getUser() {
					getUserProfile().then(response => {
						this.user = response.data.user
					})
				},
				pickerShow(e, index) {
					this.SelectIndex = index;
					this.type = e; //赋值类型
					if (e == 'cz') { //材质
						this.open = true;
						getEnginMaterialQualityList("民用工程").then(response => {
							this.selectList = response.data;
						});

					} else if (e == 'gg') { //规格
						if (this.isEmpty(this.czggslList[index].cz.id)) {
							this.$modal.msg('请选择材质')
							//	this.czggslList[index].cz = this.materialValue.id
						} else {
							this.open = true;
							this.selectList = this.materialList;

						}

					} else if (e == 'gclx') { //工程类型
						this.openDict = true;
						getDicts("industry_engin_type").then(response => {
							this.dictOptions = response.data;
						});
					}



				},

				chooseFile() {
					let _this = this;
					console.log('文件')
					uni.chooseMessageFile({
						// sizeType: ['album', 'camera'],
						type: 'all',
						success(resp) {
							resp.tempFiles.forEach((item, index) => {
								const task = uni.uploadFile({
									url: _this.$HTTP + `/obs`,
									filePath: item.path,
									name: 'file',
									formData: {},
									header: _this.headers,

									success: res => {
										// 判断是否json字符串，将其转为json格式
										console.log("结果", res)
										// let data = _this.$u.test.jsonString(res
										// 	.data) ? JSON.parse(res.data) : res.data;
										let data = JSON.parse(res.data);
										if (![200].includes(data.code)) {
											// this.uploadError(index, data);
											_this.$modal.msg(data.msg)
										} else {
											if (_this.progress === 100) {
												console.log('_this.progress', _this.progress)
												//console.log('data----', data)data
												console.log('res--', res)
												_this.fileArr.push({
													'name': item.name,
													'url': data.data.url
												})
												_this.fileNameArr.push(item.name)
												console.log('fileArr', _this.fileArr)
												_this.$modal.msg('上传成功！')
											}
										}
									},
									fail: e => {
										console.log(e)
										_this.$modal.msg('上传失败！')
										//_this.uploadError(index, e);
									},
									complete: res => {
										uni.hideLoading();
										_this.uploading = false;

									}
								});
								task.onProgressUpdate(res => {
									_this.progress = res.progress;
									console.log('onProgressUpdate', res)
									console.log('task.onProgressUpdate', _this.progress)
									uni.showLoading({
										title: '上传中'
									})
									if (_this.progress != 100) {
										_this.loading = false
										console.log('_this.loading false', _this.loading)
									} else {
										_this.loading = true
										console.log('_this.loading true', _this.loading)
									}
								});

							})

						},
					})
				},
				showPhoto(index) {
					uni.previewImage({
						current: index,
						urls: this.imgArr,
					})

				},
				removeFile(index) {
					uni.showModal({
						title: '提示',
						content: '是否删除该文件？',
						success: (res) => {
							if (res.confirm) {
								this.fileArr.splice(index, 1)
								this.fileNameArr.splice(index, 1)
								console.log('this.fileArr', this.fileArr)

							}
						}
					})
				},
				remove(index) {
					uni.showModal({
						title: '提示',
						content: '是否删除该图片或视频？',
						success: (res) => {
							if (res.confirm) {
								this.imgArr.splice(index, 1)
								console.log('this.imgarr', this.imgArr)
								// if (this.imgArr.length <= 0) {
								// 	this.photo = true;
								// }
							}
						}
					})
				},
				choose() {
					let _this = this;
					uni.showActionSheet({
						title: '上传',
						itemList: ['图片', '视频'],
						success: (res) => {
							console.log(res)
							if (res.tapIndex == 0) {
								this.chooseimage()
							} else {
								this.choosevideo()
							}
						}
					})
				},
				chooseimage() {

					let _this = this;
					console.log('图片', _this.headers)
					uni.chooseImage({
						sizeType: ['album', 'camera'],
						success(resp) {
							resp.tempFiles.forEach((item, index) => {
								const task = uni.uploadFile({
									url: _this.$HTTP + `/obs`,
									filePath: item.path,
									name: 'file',
									formData: {},
									header: _this.headers,

									success: res => {
										// 判断是否json字符串，将其转为json格式
										console.log("结果", res)
										// let data = _this.$u.test.jsonString(res
										// 	.data) ? JSON.parse(res.data) : res.data;
										let data = JSON.parse(res.data);
										if (![200].includes(data.code)) {
											// this.uploadError(index, data);
											_this.$modal.msg(data.msg)
										} else {
											if (_this.progress === 100) {
												console.log('_this.progress', _this.progress)
												//console.log('data----', data)data
												console.log('res--', res)
												_this.imgArr.push(data.data.url)
												console.log('imgArr', _this.imgArr)
												_this.$modal.msg('上传成功！')
												//_this.photo = false;
											}
										}
									},
									fail: e => {
										console.log(e)
										_this.$modal.msg('上传失败！')
										//_this.uploadError(index, e);
									},
									complete: res => {
										uni.hideLoading();
										_this.uploading = false;

									}
								});
								task.onProgressUpdate(res => {
									_this.progress = res.progress;
									console.log('onProgressUpdate', res)
									console.log('task.onProgressUpdate', _this.progress)
									uni.showLoading({
										title: '上传中'
									})
									if (_this.progress != 100) {
										_this.loading = false
										console.log('_this.loading false', _this.loading)
									} else {
										_this.loading = true
										console.log('_this.loading true', _this.loading)
									}
								});

							})

						},
					})
				},

				choosevideo() {
					let _this = this;
					console.log('视频')
					uni.chooseVideo({
						sourceType: ['album', 'camera'],
						maxDuration: 30,
						success(resp) {
							const task = uni.uploadFile({
								url: _this.$HTTP + `/obs`,
								filePath: resp.tempFilePath,
								name: 'file',
								formData: {},
								header: _this.headers,
								success: res => {
									// 判断是否json字符串，将其转为json格式
									let data = JSON.parse(res.data);
									if (![200].includes(res.statusCode)) {
										this.uploadError(index, data);
									} else {
										//上传成功
										if (_this.progress === 100) {
											console.log('_this.progress', _this.progress)
											_this.imgArr.push(data.data.url)
											console.log('imgArr', _this.imgArr)
											_this.$modal.msg('上传成功！')
											//_this.photo = false;
										}
									}
								},
								fail: e => {
									_this.$modal.msg('上传失败！')
									this.uploadError(index, e);
								},
								complete: res => {
									uni.hideLoading();
									_this.uploading = false;
								}
							});
							task.onProgressUpdate(res => {
								_this.progress = res.progress;
								console.log('onProgressUpdate', res)
								uni.showLoading({
									title: '上传中'
								})
								if (_this.progress != 100) {
									_this.loadingFile = false
									console.log('_this.loading false', _this.loading)
								} else {
									_this.loadingFile = true
									console.log('_this.loading true', _this.loading)
								}
							});

						},
					})
				},

				changeSelectDict(item, index) {
					this.openDict = false;
					this.projectType = item

				},
				changeSelect(item, index) {
					// this.index = index;
					// this.address = item.communityName;
					this.open = false;

					if (this.type == 'cz') {
						this.materialValue = item;
						this.specificationValue = ''; //重置规格
						//根据材质ID 获取规格数据
						getEnginSpecificationsList(item.id).then(res => {
							this.materialList = res.data
							this.czggslList[this.SelectIndex].cz.id = this.materialValue.id
							this.czggslList[this.SelectIndex].cz.name = this.materialValue.name
						})
					} else if (this.type == 'gg') {
						this.specificationValue = item;
						this.czggslList[this.SelectIndex].gg.id = this.specificationValue.id
						this.czggslList[this.SelectIndex].gg.name = this.specificationValue.name
					} else if (this.type == 'gclx') {
						this.projectType = item
					}
				},
				//关闭弹窗
				close(e) {
					this.open = false
				},
				//关闭弹窗
				closeDict(e) {
					this.openDict = false
				},




				submit() {

					console.log("文件", this.fileArr)
					if (this.isEmpty(this.projectType.dictValue)) {
						this.$modal.msg('请选择工程类型')
						return
					}
					if (this.isEmpty(this.projectName)) {
						this.$modal.msg('工程名称不能为空')
						return
					}
					if (this.isEmpty(this.jsdwValue)) {
						this.$modal.msg('建设单位不能为空')
						return
					}
					if (this.isEmpty(this.xmfzrValue)) {
						this.$modal.msg('项目负责人不能为空')
						return
					}
					if (this.isEmpty(this.xcfzrValue)) {
						this.$modal.msg('现场负责人不能为空')
						return
					}
					if (this.isEmpty(this.sjdwValue)) {
						this.$modal.msg('设计单位不能为空')
						return
					}
					if (this.isEmpty(this.sjfzrValue)) {
						this.$modal.msg('设计负责人不能为空')
						return
					}
					if (this.isEmpty(this.sjPhoneValue)) {
						this.$modal.msg('设计联系电话不能为空')
						return
					}
					if (!this.$validation.mobile(this.sjPhoneValue)) {
						this.$modal.msg('设计联系电话格式错误')
						return
					}
					if (this.isEmpty(this.jldwValue)) {
						this.$modal.msg('监理单位不能为空')
						return
					}
					if (this.isEmpty(this.jlfzrValue)) {
						this.$modal.msg('监理负责人不能为空')
						return
					}
					if (this.isEmpty(this.jlPhoneValue)) {
						this.$modal.msg('监理联系电话不能为空')
						return
					}
					if (!this.$validation.mobile(this.jlPhoneValue)) {
						this.$modal.msg('监理联系电话格式错误')
						return
					}

					if (this.fileArr.length <= 0) {
						this.$modal.msg('请上传文件')
					} else if (this.loadingFile == false) {
						this.$modal.msg('文件未上传完毕，无法提交！')
					}

					try {
						//console.log("刚开始", this.czggslList);
						this.czggslList.forEach((list) => {
							if (this.isEmpty(list.cz.id)) {
								this.$modal.msg('材质不能为空')


								throw new Error('End Loop')

							}
							if (this.isEmpty(list.gg.id)) {
								this.$modal.msg('规格不能为空')
								throw new Error('End Loop')

							}
							if (this.isEmpty(list.sl)) {
								this.$modal.msg('数量不能为空')

								throw new Error('End Loop')

							}



						})
					} catch (e) {
						if (e.message === 'End Loop') throw e
					}

					if (this.imgArr.length <= 0) {
						this.$modal.msg('请上传照片或视频')
						return
					}
					if (this.loading == false) {
						this.$modal.msg('照片或视频未上传完毕，无法提交！')
						return
					}

					this.czggslList.forEach((list) => {
							this.zEngineeringMaterialBo.push({
								materialQuality: list.cz.id,
								specifications: list.gg.id,
								number: list.sl
							})
						}),

						console.log("数据", this.zEngineeringMaterialBo)

					let param = {
						files: this.fileArr, //文件
						type: '1', // 用来区分工业工程=1、市政工程=2
						enginName: this.projectName, //工程名称
						enginType: this.projectType.dictValue, // 工程类型
						constructUnit: this.jsdwValue, // 建筑单位
						projectHead: this.xmfzrValue, // 项目负责人
						sceneHead: this.xcfzrValue, // 现场负责人
						designUnit: this.sjdwValue, // 设计单位
						designHead: this.sjfzrValue, // 设计负责人
						designPhone: this.sjPhoneValue, // 设计联系电话
						supervisionUnit: this.jldwValue, // 监理单位
						supervisionHead: this.jlfzrValue, // 监理负责人
						supervisionPhone: this.jlPhoneValue, // 监理联系电话
						enginClassification: this.objValue.value, // 工程分类  上一页面传过来的
						zEngineeringNodeBo: {
							type: '工业工程', // 写死
							zEngineeringInfoBo: {
								zEngiineeringPhotoBoList: this.imgArr, //照片集合
								zEngineeringMaterialBo: this.zEngineeringMaterialBo // 用料对象
							}
						}

					}
					Submitengineering(param).then(res => {
						if (res.code == '200') {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								//显示持续时间为 3秒
								duration: 2000
							});
							setTimeout(function() {
								uni.navigateBack();
							}, 1000)

						}
					})

				}


			}
		}
	</script>

	<style>
		.container {
			display: flex;
			margin-left: 10px;
			margin-top: 10px;
			margin-right: 10px;
			align-items: flex-start;
			justify-content: space-between;
		}

		.text {
			font-size: 16px;
			color: #333;
		}

		.background {
			border: 15px solid hsla(0, 0%, 100%, .5);
			background: white;
			background-clip: padding-box;
			/*从padding开始往外面裁剪背景*/

		}

		.btn {
			margin-top: 40px;
			margin-right: 20px;
			margin-bottom: 120px;
			margin-left: 20px;
			height: 45px;
		}

		.number {
			display: flex;
			/* 水平居中显示子元素 */
			align-items: flex-start;
			/* 垂直居中显示子元素 */
			justify-content: space-between;
			/* 左右间距等于间距大小 */
			padding: 10px;
			/* 设置padding以提高视觉效果 */
		}

		.textarea {
			margin-top: 10upx;
			width: 100%;
			border: 1rpx solid red;
			min-height: 100upx;
			line-height: 20px;
		}

		page {
			background: #f2f2f2;
		}

		.flex-x {
			display: flex;
			align-items: center;
		}

		.template_title,
		.template_title1,
		.template_title_list {
			height: 90rpx;
			background: #fff;
			justify-content: space-between;
			padding: 0 30rpx;
			box-sizing: border-box;
		}

		.template_title1 {
			background: none;
		}

		.template_title_list {
			margin-bottom: 4rpx;
		}

		.template_title>view,
		.template_title1>view {
			font-size: 32rpx;
			color: #8f8f8f;
			flex-shrink: 0;
			margin-right: 20rpx;
		}

		.template_title>input {
			font-size: 28rpx;
			color: #808080;
			text-align: right;
			flex-grow: 1;
		}

		/* 添加内容 */

		.add_con>text {
			font-size: 40rpx;
			color: #f16765;
			display: block;
			margin-right: 20rpx;
			margin-left: 10rpx;
			line-height: 44rpx;
		}

		.add_con>view {
			font-size: 32rpx;
			color: #7885cb;
		}

		/* 删除内容 */

		.del {
			font-size: 32rpx;
			color: #f16765;
			margin-right: 14rpx;
			padding: 20rpx;
		}

		input {
			flex-grow: 1;
			font-size: 28rpx;
			color: #808080;
		}

		.btn {
			margin-top: 100rpx;
		}
	</style>