qimall/addons/SmartForm/backend/views/form/add.php

<?php

use common\helpers\ComponentHelper;
use common\helpers\AddonHelper;

ComponentHelper::loadComponentView('form-diy-menus', AddonHelper::getAddonRootPath('SmartForm') . 'backend/views/components/formDiy');
ComponentHelper::loadComponentView('form-diy-tool', AddonHelper::getAddonRootPath('SmartForm') . 'backend/views/components/formDiy');
ComponentHelper::loadComponentView('form-diy-data', AddonHelper::getAddonRootPath('SmartForm') . 'backend/views/components/formDiy');
ComponentHelper::loadComponentView('form-diy-model', AddonHelper::getAddonRootPath('SmartForm') . 'backend/views/components/formDiy');

?>
<div id="app" class="u_box">
	<div class="nav">表单管理</div>
	<div style="height: 10px;"></div>
	<div class="body_box">
		<div class="diy_box">
			<form-diy-menus :list="menusList" @add-prev-item="addTool"></form-diy-menus>
			<div class="tool_yu_nbox">
				<div class="diy_tool_center_box">
					<form-diy-tool :tool-list="toolList" :tool-index="toolIndex" @change="diyToolChange"></form-diy-tool>
				</div>
				<!-- 	<div class="diy_tool_box">
					<div class="diy-phone">
						<div class="phone-body">
							<form-diy-tool :tool-list="toolList" :tool-index="toolIndex" @change="diyToolChange"></form-diy-tool>
						</div>
					</div>
				</div> -->

			</div>
			<form-diy-data :active-item="toolItem" @update="updateData"></form-diy-data>
		</div>
		<div class="dorm_diy_btn_box">
			<el-button size="small" @click="$historyGo(-1)">取消</el-button>
			<el-button size="small" style="margin-left: 30px;" type="primary" @click="save">保存</el-button>
		</div>
	</div>
	<el-dialog :visible.sync="saveModel" width="980px">
		<div class="phone_save_box">
			<div class="phone_model_w_box">
				<img src="resources/img/decorate/phone.png" class="pjone_bg_box">
				<div class="phone_form_body_box">
					<div class="phone_form_title_box">
						{{form.title || '自定义标题'}}
					</div>
					<div class="phone_form_body_mdg_box">
						<div class="phone_s_img_box" v-if="form.show_heard">
							<img :src="form.first_img" class="img_h_bx" />
						</div>
						<form-diy-model :tool-list="toolList"></form-diy-model>
					</div>
					<el-button class="phone_sub_btn">提 交</el-button>
				</div>
			</div>
			<div class="phone_form_data_box">
				<el-form :model="form" label-position="right" label-width="100">
					<div class="form_data_label_box">
						<div class="line_form_box"></div>
						<span class="form_data_label_text">基本信息</span>
					</div>
					<el-form-item label="表单标题:">
						<el-col :span="15">
							<el-input v-model="form.title" placeholder="请输入标题" size="small" :maxlength="10"></el-input>
						</el-col>
					</el-form-item>
					<el-form-item label="头部背景：">
						<div class="form_hearder_bg_box">
							<el-switch v-model="form.show_heard" :active-value="1" :inactive-value="0"></el-switch>
							<div class="form_upload_img_box" v-if="form.show_heard">
								<com-attachment :multiple="false" :max="1" type="images" @selected="coverPic">
									<div class="card-upload" v-if="!form.first_img">
										<i class="el-icon-plus"></i>
									</div>
									<img v-if="form.first_img" :src="form.first_img" class="avatar">
								</com-attachment>
								<p class="form_upload_img_p">图片大小不能超过2M</p>
							</div>
						</div>
					</el-form-item>
                    <el-form-item label="可重复填写：">
                        <div class="form_hearder_bg_box">
                            <el-switch v-model="form.is_repeat" :active-value="1" :inactive-value="0"></el-switch>
                        </div>
                        <p style="color: red">仅限于在商品详情页面点击立即购买填变动完后且下单完成的情况</p>
                    </el-form-item>
					<el-form-item label="截止日期:">
						<span>表单截止后，用户打开表单会提示此表单已结束哦</span>
						<div class="form_time_chose_box">
							<el-radio-group v-model="form.time_type">
								<el-radio :label="1">永久有效</el-radio>
								<el-radio :label="0">自定义时间</el-radio>
							</el-radio-group>
							<div v-if="form.time_type == 0">
								<el-date-picker v-model="form.date" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss" size="small">
								</el-date-picker>
							</div>
						</div>
					</el-form-item>
					<div class="form_data_label_box">
						<div class="line_form_box"></div>
						<span class="form_data_label_text">表单填写后跳转设置</span>
						<el-switch v-model="form.link_status" :active-value="1" :inactive-value="0" style="margin-left: 10px;"></el-switch>
					</div>
					<el-form-item v-if="form.link_status">
						<el-radio-group v-model="form.jump_type">
							<el-radio :label="0">跳转链接</el-radio>
							<el-radio :label="1">跳转二维码</el-radio>
							<el-radio :label="2">原路返回</el-radio>
						</el-radio-group>
						<p>{{form.jump_type==2 ? '客户提交表单成功后原路返回':'客户提交表单成功后跳转此链接'}}</p>
					</el-form-item>
					<el-form-item v-if="form.link_status && !form.jump_type" style="margin-top: -20px;">
						<el-col :span="15">
							<el-input type="text" placeholder="请输入以http/https开头的网址" v-model="form.link" maxlength="100" show-word-limit size="small">
						</el-col>
					</el-form-item>
					<el-form-item v-if="form.link_status && form.jump_type ==1" style="margin-top: -20px;" label="上传二维码:">
						<div class="up_qcard_img_box">
							<com-attachment :multiple="false" :max="1" type="images" @selected="coverQcard">
								<div class="card-upload" v-if="!form.qcard_img">
									<i class="el-icon-plus"></i>
								</div>
								<img v-if="form.qcard_img" :src="form.qcard_img" class="avatar">
							</com-attachment>
							<p class="form_upload_img_p">二维码大小不能超过2M</p>
						</div>
					</el-form-item>
				</el-form>
			</div>

		</div>
		<span slot="footer" class="dialog-footer">
			<el-button @click="saveModel = false">取 消</el-button>
			<el-button type="primary" @click="submit">确 定</el-button>
		</span>
	</el-dialog>
</div>

<script>
	new Vue({
		el: '#app',
		data() {
			return {
				menusList: [{
					title: '组件',
					toolList: []

				}],
				toolList: [],
				toolIndex: -1,
				toolItem: {},
				saveModel: false,
				id: null,
				form: {
					id: null,
					title: '',
					show_heard: 0,
					first_img: '',
					time_type: 1,
					date: '',
					link_status: 0,
					jump_type: 1,
					link: '',
					qcard_img: '',
                    is_repeat: 0,
				},
				is_export: 0,
				agree_on: 0,
				componentsText: {
					'single-link-text': '单行文本',
					'multi-text': '多行文本',
					'id-card': '身份证号码',
					'drow-box': '下拉框',
					'checked-tool': '多选框',
					'radio-tool': '单选框',
					'upload-photo': '图片',
					'date-tool': '日期',
					'date-range': '日期范围',
					'time-tool': '时间',
					'time-range': '时间范围',
					'city-chose': '城市',
				},
			}
		},
		created() {
			if (getQuery('template_id')) {
				this.id = getQuery('template_id');
				this.getEditInfo()
			}
			this.getToolMenus()
		},
		methods: {
			getSettingInfo() {
				request({
					params: {
						r: 'smart-form/setting/info'
					},
					method: 'GET',
				}).then(res => {
					console.log('oooooooppppppppppp')
					this.loading = false;

					if (res.data.code == 0) {
						if (res.data.data != null) {
							this.is_export = res.data.data.is_export
							this.agree_on = res.data.data.agree_on
						}
					} else {
						this.$message.error(res.data.msg);
					}
				})
			},
			async getEditInfo() {
				request({
					params: {
						r: 'smart-form/form/edit',
						template_id: this.id
					},
					method: 'GET',
				}).then(async e => {

					e.data.data.columns.forEach(item => {
						if (item.smart_form_components_code == "single-link-text") {
							this.toolList.push({
								type: 'single-link-text',
								title: item.title,
								placeholder: item.placeholder,
								required: item.required,
								tips: item.tips,
								components_id: item.smart_form_components_id,
								content_type: item.content_type,
								is_export: item.is_export
							})
						} else if (item.smart_form_components_code == "multi-text") {
							this.toolList.push({
								type: 'multi-text',
								title: item.title,
								placeholder: item.placeholder,
								required: item.required,
								tips: item.tips,
								components_id: item.smart_form_components_id
							})
						} else if (item.smart_form_components_code == "id-card") {
							this.toolList.push({
								type: 'id-card',
								title: item.title,
								required: item.required,
								tips: item.tips,
								components_id: item.smart_form_components_id
							})
						} else if (item.smart_form_components_code == "drow-box") {
							let option = []
							item.option.forEach(o => {
								option.push({
									title: o
								})
							})
							this.toolList.push({
								type: 'drow-box',
								title: item.title,
								required: item.required,
								chooseList: option,
								components_id: item.smart_form_components_id
							})
						} else if (item.smart_form_components_code == "checked-tool") {
							let option = []
							item.option.forEach(o => {
								option.push({
									title: o
								})
							})
							this.toolList.push({
								type: 'checked-tool',
								title: item.title,
								required: item.required,
								chooseList: option,
								components_id: item.smart_form_components_id
							})
						} else if (item.smart_form_components_code == "radio-tool") {
							let option = []
							item.option.forEach(o => {
								option.push({
									title: o
								})
							})
							this.toolList.push({
								type: 'radio-tool',
								title: item.title,
								required: item.required,
								chooseList: option,
								components_id: item.smart_form_components_id
							})
						} else if (item.smart_form_components_code == "upload-photo") {
							this.toolList.push({
								type: 'upload-photo',
								title: item.title,
								required: item.required,
								total: item.limit,
								components_id: item.smart_form_components_id
							})
						} else if (item.smart_form_components_code == "date-tool") {
							this.toolList.push({
								type: 'date-tool',
								title: item.title,
								required: item.required,
								date: item.default,
								show_now_day: item.show_now_start,
								is_show: item.show_default,
								tips: item.tips,
								components_id: item.smart_form_components_id
							})
						} else if (item.smart_form_components_code == "date-range") {
							this.toolList.push({
								type: 'date-range',
								title: item.title,
								startTitle: typeof item.tips == 'object' && item.tips.length ? item.tips[0] : '',
								endTitle: typeof item.tips == 'object' && item.tips.length && item.tips.length == 2 ? item.tips[1] : '',
								required: item.required,
								is_start_show: typeof item.show_default == 'object' && item.show_default.length ? item.show_default[0] : '',
								is_end_show: typeof item.show_default == 'object' && item.show_default.length && item.show_default.length == 2 ? item.show_default[1] : '',
								show_now_start: typeof item.show_now_start == 'object' && item.show_now_start.length ? item.show_now_start[0] : '',
								show_now_end: typeof item.show_now_start == 'object' && item.show_now_start.length && item.show_now_start.length == 2 ? item.show_now_start[1] : '',
								start_date: typeof item.default == 'object' && item.default.length ? item.default[0] : '',
								end_date: typeof item.default == 'object' && item.default.length && item.default.length == 2 ? item.default[1] : '',
								components_id: item.smart_form_components_id
							})
						} else if (item.smart_form_components_code == "time-tool") {
							this.toolList.push({
								type: 'time-tool',
								title: item.title,
								required: item.required,
								time: item.default,
								show_now_time: item.show_now_start,
								is_show: item.show_default,
								tips: item.tips,
								components_id: item.smart_form_components_id
							})
						} else if (item.smart_form_components_code == "time-range") {
							this.toolList.push({
								type: 'time-range',
								title: item.title,
								startTitle: typeof item.tips == 'object' && item.tips.length ? item.tips[0] : '',
								endTitle: typeof item.tips == 'object' && item.tips.length && item.tips.length == 2 ? item.tips[1] : '',
								required: item.required,
								is_start_show: typeof item.show_default == 'object' && item.show_default.length ? item.show_default[0] : '',
								is_end_show: typeof item.show_default == 'object' && item.show_default.length && item.show_default.length == 2 ? item.show_default[1] : '',
								show_now_start: typeof item.show_now_start == 'object' && item.show_now_start.length ? item.show_now_start[0] : '',
								show_now_end: typeof item.show_now_start == 'object' && item.show_now_start.length && item.show_now_start.length == 2 ? item.show_now_start[1] : '',
								start_time: typeof item.default == 'object' && item.default.length ? item.default[0] : '',
								end_time: typeof item.default == 'object' && item.default.length && item.default.length == 2 ? item.default[1] : '',
								components_id: item.smart_form_components_id
							})
						} else if (item.smart_form_components_code == "city-chose") {
							this.toolList.push({
								type: 'city-chose',
								title: item.title,
								required: item.required,
								city_type: item.default,
								components_id: item.smart_form_components_id
							})
						}
					})
					// console.log(e,1111111111111111)

					this.form.title = e.data.data.title
					this.form.first_img = e.data.data.header
					this.form.show_heard = e.data.data.show_header
					this.form.time_type = e.data.data.expire_time == -1 ? 1 : 0
					this.form.date = e.data.data.expire_time == -1 ? '' : await this.getDate(e.data.data.expire_time)
					// console.log( this.form.date,'date')
					this.form.jump_type = e.data.data.jump_type
					this.form.link_status = e.data.data.link_status
					this.form.qcard_img = e.data.data.jump_type == 0 ? '' : e.data.data.jump_link
					this.form.link = e.data.data.jump_type == 0 ? e.data.data.jump_link : ''
					this.form.id = e.data.data.id

				}).catch(e => {});
			},
			async getDate(time) {
				let date = new Date(time * 1000)
				let years = date.getFullYear()
				let mouth = (date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1)
				let day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
				let hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
				let secod = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
				let min = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()

				return years + '-' + mouth + '-' + day + ' ' + hours + ':' + secod + ':' + min
			},
			addTool(item) {
				console.log(item)
				switch (item.type) {
					case 'single-link-text':
						this.toolList.push({
							type: 'single-link-text',
							title: '',
							placeholder: '',
							required: 1,
							tips: '',
							components_id: item.components_id,
							is_export: 0,
							content_type: 0
						})
						if (this.toolList.length == 1) {

							this.toolIndex = 0
							this.toolItem = {
								type: 'single-link-text',
								title: '',
								placeholder: '',
								required: 1,
								tips: '',
								components_id: item.components_id,
								is_export: 0,
								content_type: 0
							}
						}
						this.scrollToBottom()
						break;
					case 'multi-text':
						this.toolList.push({
							type: 'multi-text',
							title: '',
							placeholder: '',
							required: 1,
							tips: '',
							components_id: item.components_id
						})
						if (this.toolList.length == 1) {

							this.toolIndex = 0
							this.toolItem = {
								type: 'multi-text',
								title: '',
								placeholder: '',
								required: 1,
								tips: '',
								components_id: item.components_id
							}
						}
						this.scrollToBottom()
						break;
					case 'id-card':
						this.toolList.push({
							type: 'id-card',
							title: '',
							required: 1,
							tips: '',
							components_id: item.components_id
						})
						if (this.toolList.length == 1) {
							this.toolItem = {
								type: 'id-card',
								title: '',
								required: 1,
								tips: '',
								components_id: item.components_id
							}
							this.toolIndex = 0
						}
						this.scrollToBottom()
						break;
					case 'drow-box':
						this.toolList.push({
							type: 'drow-box',
							title: '',
							required: 1,
							chooseList: [{
								title: '选项一'
							}, {
								title: '选项二'
							}],
							components_id: item.components_id
						})
						if (this.toolList.length == 1) {
							this.toolItem = {
								type: 'drow-box',
								title: '',
								required: 1,
								chooseList: [{
									title: '选项一'
								}, {
									title: '选项二'
								}],
								components_id: item.components_id
							}
							this.toolIndex = 0
						}
						this.scrollToBottom()
						break;
					case 'checked-tool':
						this.toolList.push({
							type: 'checked-tool',
							title: '',
							required: 1,
							chooseList: [{
								title: '选项一'
							}, {
								title: '选项二'
							}],
							components_id: item.components_id
						})
						if (this.toolList.length == 1) {
							this.toolItem = {
								type: 'checked-tool',
								title: '',
								required: 1,
								chooseList: [{
									title: '选项一'
								}, {
									title: '选项二'
								}],
								components_id: item.components_id
							}
							this.toolIndex = 0
						}
						this.scrollToBottom()
						break;
					case 'radio-tool':
						this.toolList.push({
							type: 'radio-tool',
							title: '',
							required: 1,
							chooseList: [{
								title: '选项一'
							}, {
								title: '选项二'
							}],
							components_id: item.components_id
						})
						if (this.toolList.length == 1) {
							this.toolItem = {
								type: 'radio-tool',
								title: '',
								required: 1,
								chooseList: [{
									title: '选项一'
								}, {
									title: '选项二'
								}],
								components_id: item.components_id
							}
							this.toolIndex = 0
						}
						this.scrollToBottom()
						break;
					case 'upload-photo':
						this.toolList.push({
							type: 'upload-photo',
							title: '',
							required: 1,
							total: 3,
							components_id: item.components_id
						})
						if (this.toolList.length == 1) {
							this.toolItem = {
								type: 'upload-photo',
								title: '',
								required: 1,
								total: 3,
								components_id: item.components_id
							}
							this.toolIndex = 0
						}
						this.scrollToBottom()
						break;
					case 'date-tool':
						this.toolList.push({
							type: 'date-tool',
							title: '',
							required: 1,
							tips: '',
							is_show: 1,
							date: '',
							show_now_day: 1,
							components_id: item.components_id,
                            extra_data: {
                                is_enable_sms_notice: 0,
                                sms_template_id: '',
                                sms_template_content: '',
                                sms_template_key: '',
                                sms_template_name: '',
                                send_at: '',
                                send_day: '',
                                vars: []
                            }
						})
						if (this.toolList.length == 1) {
							this.toolItem = {
								type: 'date-tool',
								title: '',
								required: 1,
								tips: '',
								is_show: 1,
								date: '',
								show_now_day: 1,
								components_id: item.components_id,
                                extra_data: {
                                    is_enable_sms_notice: 0,
                                    sms_template_id: '',
                                    sms_template_content: '',
                                    sms_template_key: '',
                                    sms_template_name: '',
                                    vars: []
                                }
							}
							this.toolIndex = 0
						}
						this.scrollToBottom()
						break;
					case 'date-range':
						this.toolList.push({
							type: 'date-range',
							title: '',
							startTitle: '',
							endTitle: '',
							required: 1,
							is_start_show: 1,
							is_end_show: 1,
							show_now_start: 1,
							show_now_end: 1,
							start_date: '',
							end_date: '',
							components_id: item.components_id
						})
						if (this.toolList.length == 1) {
							this.toolItem = {
								type: 'date-range',
								title: '',
								startTitle: '',
								endTitle: '',
								required: 1,
								is_start_show: 1,
								is_end_show: 1,
								show_now_start: 1,
								show_now_end: 1,
								start_date: '',
								end_date: '',
								components_id: item.components_id
							}
							this.toolIndex = 0
						}
						this.scrollToBottom()
						break;
					case 'time-tool':
						this.toolList.push({
							type: 'time-tool',
							title: '',
							required: 1,
							tips: '',
							is_show: 1,
							time: '',
							show_now_time: 1,
							components_id: item.components_id
						})
						if (this.toolList.length == 1) {
							this.toolItem = {
								type: 'time-tool',
								title: '',
								required: 1,
								tips: '',
								is_show: 1,
								time: '',
								show_now_time: 1,
								components_id: item.components_id
							}
							this.toolIndex = 0
						}
						this.scrollToBottom()
						break;
					case 'time-range':
						this.toolList.push({
							type: 'time-range',
							title: '',
							startTitle: '',
							endTitle: '',
							required: 1,
							is_start_show: 1,
							is_end_show: 1,
							start_time: '',
							show_now_start: 1,
							show_now_end: 1,
							end_time: '',
							components_id: item.components_id
						})
						if (this.toolList.length == 1) {
							this.toolItem = {
								type: 'time-range',
								title: '',
								startTitle: '',
								endTitle: '',
								required: 1,
								is_start_show: 1,
								is_end_show: 1,
								start_time: '',
								show_now_start: 1,
								show_now_end: 1,
								end_time: '',
								components_id: item.components_id
							}
							this.toolIndex = 0
						}
						this.scrollToBottom()
						break;
					case 'city-chose':
						this.toolList.push({
							type: 'city-chose',
							title: '',
							required: 1,
							city_type: 1,
							components_id: item.components_id
						})
						if (this.toolList.length == 1) {
							this.toolItem = {
								type: 'city-chose',
								title: '',
								required: 1,
								city_type: 1,
								components_id: item.components_id
							}
							this.toolIndex = 0
						}
						this.scrollToBottom()
						break;
				}
				console.log(this.toolList, 'this.toolList')
			},
			coverPic(e) {
				this.form.first_img = e[0].url

			},
			coverQcard(e) {
				this.form.qcard_img = e[0].url
			},
			getToolMenus() {
				let that = this
				request({
					params: {
						r: 'smart-form/components/index',
					},
					method: 'GET',
				}).then(res => {
					console.log(res, '9090000')
					res.data.data.list.forEach(item => {
						that.menusList[0].toolList.push({
							type: item.code,
							components_id: item.id,
							img: _diy_img_prefix + item.icon,
							title: item.title
						})
					})

				})
			},
			// changeIndex(index){
			// 	this.toolIndex = index

			// },
			//滚动到底部
			scrollToBottom() {
				this.$nextTick(() => {
					let box = this.$el.querySelector(".diy_tool_center_box")
					box.scrollTop = box.scrollHeight
				})
			},
			//
			diyToolChange(e) {
				switch (e.type) {
					case 'change-index':
						this.toolIndex = e.index
						this.toolItem = {
							...this.toolList[this.toolIndex]
						}
						break;
					case 'change-move':
						this.toolIndex = e.index
						this.toolList = e.list
						this.toolItem = {
							...this.toolList[this.toolIndex]
						}
						break;
					case 'delete':
						this.toolList.splice(e.index, 1)
						this.toolIndex = this.toolIndex - 1 > 0 ? this.toolIndex - 1 : 0
						this.toolItem = {
							...this.toolList[this.toolIndex]
						}
						break;
					case 'copy':
						this.toolList.splice(e.index, 0, e.item)
						break;
				}
			},
			updateData(e) {
				// console.log(JSON.stringify(this.toolList))
				this.toolItem = e
				this.toolList[this.toolIndex] = e
				this.toolList = JSON.parse(JSON.stringify((this.toolList)))
			},
			save() {
				console.log(this.toolList, 'hhhhhhhh');
				if (this.toolList.length <= 0) {
					this.$message.error(`请至少选择一个表单组件`);
					return;
				}
				for (let i = 0; i < this.toolList.length; i++) {
					if (this.toolList[i].title == '' || this.toolList[i].title == ' ') {
						this.$message.error(`请完善${this.componentsText[this.toolList[i].type]}组件的标题`);
						return;
					}
				}

				this.saveModel = true
			},
			submit() {

				let obj = {
					form: {
						...this.form,
					},
					toolList: this.toolList
				}

				obj.form.date = obj.form.time_type == 1 ? -1 : obj.form.date
				obj.form.time_type = obj.form.time_type == 1 ? -1 : 0
				request({
					params: {
						r: this.id ? 'smart-form/form/edit' : 'smart-form/form/add',
					},
					method: 'post',
					data: {
						...obj
					}
				}).then(res => {
					console.log(res)
					if (res.data.code == 0) {
						this.saveModel = false
						navigateTo({
							r: 'smart-form/form/index'
						})
					} else {
						this.$message.error(res.data.msg)
					}

				})

			}
		}
	})
	// 拦截页面卸载
	window.onbeforeunload = function(e) {
		var e = window.event || e;
		e.returnValue = ("确定离开当前页面吗？");
	}
</script>
<style scoped>
	.diy_tool_center_box {
		width: 100%;
		overflow-y: auto;
		height: 80vh;
	}

	.phone_sub_btn {
		border-radius: 0;
		width: 100%;
		height: 27px;
		font-size: 12px;
		color: #ffffff;
		background: #d9001b;
		line-height: 0.5;
		/* line-height: 27px; */
	}

	.phone_s_img_box {
		width: 100%;
		height: 144px;
		background: #aaa;
	}

	.img_h_bx {
		width: 100%;
		height: 100%;
	}

	.up_qcard_img_box {
		padding-top: 10px;
		box-sizing: border-box;
		display: flex;
		align-items: flex-start;
		flex-direction: column;
		justify-content: flex-start;
	}

	.form_time_chose_box {
		width: 100%;

	}

	.form_upload_img_p {
		font-size: 12px;
		color: #7f7f7f;
		margin-top: 20px;
	}

	.form_upload_img_box {
		padding-left: 60px;
		box-sizing: border-box;
		margin-top: 10px;
	}

	.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: 60px;
		height: 60px;
		line-height: 60px;
		text-align: center;
	}

	.avatar {
		width: 60px;
		height: 60px;
		display: block;
	}

	.form_hearder_bg_box {
		width: 100%;
		/* 	display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		flex-direction: column; */
	}

	.form_data_label_text {
		font-size: 14px;
		color: #333;
		margin-left: 10px;
	}

	.form_data_label_box {
		width: 100%;
		display: flex;
		align-items: center;
		margin-bottom: 20px;
	}

	.line_form_box {
		width: 2px;
		height: 25px;
		background: #d9001b;
	}

	.phone_form_data_box {
		flex: 1;
		padding-left: 30px;
		padding-top: 20px;
		box-sizing: border-box;
	}

	.phone_form_body_mdg_box {
		flex: 1;
		width: 100%;
		overflow-y: auto;
		background: #ffffff;
	}

	.phone_form_title_box {
		width: 100%;
		height: 24px;
		background: #ffffff;
		font-size: 12px;
		color: #000;
		display: flex;
		align-items: center;
		justify-content: center;

	}

	.phone_form_body_box {
		width: 230px;
		height: 412px;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		flex-direction: column;
		background: #f5f6f7;
		position: absolute;
		top: 59px;
		left: 15px;
	}

	.phone_save_box {
		width: 100%;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		padding: 10px 20px;
		box-sizing: border-box;

	}

	.phone_model_w_box {
		width: 262px;
		height: 533px;
		position: relative;
		/* background: url('resources/img/decorate/phone.png')no-repeat;
		background-size: 100%; */
	}

	.pjone_bg_box {
		width: 100%;
		height: 100%;
	}

	.dorm_diy_btn_box {
		width: 100%;
		height: 50px;
		display: flex;
		align-items: center;
		justify-content: center;

	}

	.u_box {
		width: 100%;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.nav {
		width: 100%;
		background: #ffffff;
		border-radius: 5px;
		padding: 26px 24px;
	}

	.body_box {
		width: 100%;
		flex: 1;
		/* margin-top: 5px; */
		background: #ffffff;
		overflow: hidden;
		overflow-y: auto;

	}

	.diy_box {
		width: 100%;
		display: flex;
		align-items: center;

	}

	.diy_tool_box {
		height: 100%;
		overflow-y: auto;
	}

	.tool_yu_nbox {
		flex: 1;
		/* 	display: flex;
		align-items: center;
		justify-content: center; */
		background: #fff;
		height: 80vh;
		overflow: hidden;

	}

	.diy-phone {
		width: 410px;

		border: 1px solid #bfbfbf;
		border-radius: 4px;
		background: #fafafa;
		padding: 20px 12px;

		position: relative;
	}

	.phone-body {
		min-height: 650px;
		width: 377px;
		border: 1px solid #bfbfbf;
		border-radius: 4px;
		background: #f5f6f7;
		position: relative;
	}
</style>