From e6459d826c1a719c0cc352c5681c5e45616b6a9c Mon Sep 17 00:00:00 2001
From: wuyx <wuyx@dongwu-inc.com>
Date: Thu, 27 Oct 2022 15:33:07 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E5=88=9B=E5=BB=BA=E5=8D=95=E5=B1=82?=
 =?UTF-8?q?=E9=A1=B9=E7=9B=AE=E9=83=A8=E5=88=86=E6=95=B0=E6=8D=AE=E6=8E=A5?=
 =?UTF-8?q?=E5=85=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/index.js                       |   62 +-
 src/views/projectcenter/ProjectAdd.vue | 1156 +++++++++++++-----------
 2 files changed, 669 insertions(+), 549 deletions(-)

diff --git a/src/api/index.js b/src/api/index.js
index 1297c5d5..acd6f5c5 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -1,5 +1,5 @@
 import http from "./config";
-import qs from 'qs';
+// import qs from 'qs';
 
 
 /**
@@ -37,39 +37,27 @@ import qs from 'qs';
 
 // 接口-请求
 
-// 根据投票ID获取题干信息
-export const getStemInfo = (stemId) => http.post('/vote/queryStemByStemId', qs.stringify({ stemId: stemId }));
-
-// 测试方法
-// import * as api from '../../api/index'
-// api.getStemInfo(4).then(res => {
-// 	console.log(res)
-// }).catch(err => {
-// 	console.log(err)
-// })
-
-// 获取字典列表
-export const getList = (pageno, pagesize) => http.post('/dict/getList', {
-	"dictCode": "",
-	"pageNo": pageno,
-	"pageSize": pagesize
-})
-
-// 测试方法
-// import * as api from '../../api/index'
-// api.getList(0,0).then(res => {
-// 	console.log(res)
-// }).catch(err => {
-// 	console.log(err)
-// })
-
-// 根据活动ID获取活动信息接口
-export const getActivityList = (activityId) => http.get('/activity', { params: { "activityId": activityId } })
-
-// 测试方法
-// import * as api from '../../api/index'
-// api.getActivityList(4).then(res => {
-// 	console.log(res)
-// }).catch(err => {
-// 	console.log(err)
-// })
\ No newline at end of file
+// 创建编辑单层项目
+export const createProject = (obj) => http.post('/admin/project/edit', {
+	"attach": obj.attach,
+	"beginTime": obj.beginTime,
+	"boeFlag": obj.boeFlag,
+	"category": obj.category,
+	"courseSyncFlag": obj.courseSyncFlag,
+	"endTime": obj.endTime,
+	"level": obj.level,
+	"manager": obj.manager,
+	"managerId": obj.managerId,
+	"name": obj.name,
+	"notice": obj.notice,
+	"noticeFlag": obj.noticeFlag,
+	"parentId": obj.parentId,
+	"picUrl": obj.picUrl,
+	"projectId": obj.projectId,
+	"remark": obj.remark,
+	"sourceBelongId": obj.sourceBelongId,
+	"status": obj.status,
+	"systemId": obj.systemId,
+	"templateId": obj.templateId,
+	"type": obj.type
+})
\ No newline at end of file
diff --git a/src/views/projectcenter/ProjectAdd.vue b/src/views/projectcenter/ProjectAdd.vue
index 26a58d10..49d3a85e 100644
--- a/src/views/projectcenter/ProjectAdd.vue
+++ b/src/views/projectcenter/ProjectAdd.vue
@@ -1,537 +1,669 @@
 <!---- 创建项目页面 --->
 <template>
-  <div class="projectAdd">
-    <div class="header">
-      <span class="title">创建/编辑单层项目</span>
-      <router-link to="/projectmanage" class="goback">
-        <span class="return"></span
-        ><span class="returntext">返回</span></router-link
-      >
-    </div>
-    <div class="content">
-      <div class="main">
-        <div class="name">
-          <div class="namebox">
-            <img
-              class="nameimg"
-              src="../../assets/images/basicinfo/asterisk.png"
-            />
-            <div class="inname">项目名称</div>
-          </div>
-          <div class="in">
-            <a-input v-model:value="valueE" placeholder="请输入项目名称" show-count
-                :maxlength="30"/>
-          </div>
-        </div>
-        <div class="name">
-          <div class="namebox">
-            <img
-              class="nameimg"
-              src="../../assets/images/basicinfo/asterisk.png"
-            />
-            <div class="inname">分类</div>
-          </div>
-          <div class="in select">
-            <a-select
-              :value="classifySelect"
-              placeholder="四个养成"
-              style="width: 100%"
-              :options="classifyList"
-              allowClear
-              showSearch
-            ></a-select>
-          </div>
-        </div>
-        <div class="name">
-          <div class="namebox">
-            <img
-              class="nameimg"
-              src="../../assets/images/basicinfo/asterisk.png"
-            />
-            <div class="inname">封面图</div>
-          </div>
-          <div
-            class="box"
-            style="
+	<div class="projectAdd">
+		<div class="header">
+			<span class="title">创建/编辑单层项目</span>
+			<router-link to="/projectmanage" class="goback">
+				<span class="return"></span><span class="returntext">返回</span>
+			</router-link>
+		</div>
+		<div class="content">
+			<div class="main">
+				<div class="name">
+					<div class="namebox">
+						<img class="nameimg" src="../../assets/images/basicinfo/asterisk.png" />
+						<div class="inname">项目名称</div>
+					</div>
+					<div class="in">
+						<a-input v-model:value="projectName" placeholder="请输入项目名称" show-count :maxlength="30" />
+					</div>
+				</div>
+				<div class="name">
+					<div class="namebox">
+						<img class="nameimg" src="../../assets/images/basicinfo/asterisk.png" />
+						<div class="inname">分类</div>
+					</div>
+					<div class="in select">
+						<a-select :getPopupContainer="triggerNode => {
+							return triggerNode.parentNode || document.body
+						}" v-model:value="classifySelect" placeholder="四个养成" style="width: 100%" :options="classifyList"
+							@change="classificationChange" allowClear showSearch>
+						</a-select>
+					</div>
+				</div>
+				<div class="name">
+					<div class="namebox">
+						<img class="nameimg" src="../../assets/images/basicinfo/asterisk.png" />
+						<div class="inname">封面图</div>
+					</div>
+					<div class="box" style="
               width: 100px;
               height: 100px;
               border: 1px solid rgba(78, 166, 255, 1);
               border-radius: 5px;
               cursor: pointer;
-            "
-          >
-            <div class="box1"></div>
-            <div class="box2"></div>
-          </div>
-        </div>
-        <div class="name">
-          <div class="namebox">
-            <img
-              class="nameimg"
-              src="../../assets/images/basicinfo/asterisk.png"
-            />
-            <div class="inname">项目时间</div>
-          </div>
+							overflow: hidden;
+            ">
+						<a-upload v-model:file-list="fileList" name="file" list-type="picture-card" class="avatar-uploader"
+							:show-upload-list="false" action="/api/file/upload" :before-upload="beforeUpload" @change="handleChange">
+							<img style="width: 100px;height: 100px;margin-bottom: 4px;margin-right: 4px;" v-if="imageUrl"
+								:src="imageUrl" alt="avatar" />
+							<div v-else>
+								<!-- <loading-outlined v-if="loading"></loading-outlined> -->
+								<!-- <plus-outlined v-else></plus-outlined> -->
+								<div class="box1"></div>
+								<div class="box2"></div>
+								<!-- <div class="ant-upload-text"></div> -->
+							</div>
+						</a-upload>
+					</div>
+				</div>
+				<div class="name">
+					<div class="namebox">
+						<img class="nameimg" src="../../assets/images/basicinfo/asterisk.png" />
+						<div class="inname">项目时间</div>
+					</div>
 
-          <div class="in">
-            <a-range-picker
-              separator="至"
-              :placeholder="['      开始时间', '        结束时间']"
-              style="width: 100%; height: 40px; border-radius: 5px"
-              show-time
-            />
-          </div>
-        </div>
-        <div class="name">
-          <div class="namebox">
-            <img
-              class="nameimg"
-              src="../../assets/images/basicinfo/asterisk.png"
-            />
-            <div class="inname">项目经理</div>
-          </div>
-          <div class="in select">
-            <a-select
-              :value="classifySelect"
-              placeholder="请选择项目经理"
-              style="width: 100%"
-              :options="classifyList"
-              allowClear
-              showSearch
-            ></a-select>
-          </div>
-        </div>
-        <div class="name">
-          <div class="namebox">
-            <img
-              class="nameimg"
-              src="../../assets/images/basicinfo/asterisk.png"
-            />
-            <div class="inname">资源归属</div>
-          </div>
+					<div class="in">
+						<a-range-picker separator="至" :placeholder="['      开始时间', '        结束时间']"
+							style="width: 100%; height: 40px; border-radius: 5px" show-time @change="onRangeChange" />
+					</div>
+				</div>
+				<div class="name">
+					<div class="namebox">
+						<img class="nameimg" src="../../assets/images/basicinfo/asterisk.png" />
+						<div class="inname">项目经理</div>
+					</div>
+					<div class="in select">
+						<a-select :getPopupContainer="triggerNode => {
+							return triggerNode.parentNode || document.body
+						}" :value="classifySelect1" placeholder="请选择项目经理" style="width: 100%" :options="classifyList1" allowClear
+							showSearch>
+						</a-select>
+					</div>
+				</div>
+				<div class="name">
+					<div class="namebox">
+						<img class="nameimg" src="../../assets/images/basicinfo/asterisk.png" />
+						<div class="inname">资源归属</div>
+					</div>
 
-          <div class="in">
-            <a-input v-model:value="valueE" placeholder="自动带出 可修改" />
-          </div>
-        </div>
-        <div class="name name2">
-          <div class="namebox">
-            <div class="inname" style="margin-top: 13px">项目说明</div>
-          </div>
-          <div class="in">
-            <a-textarea
-              v-model:value="valuei"
-              style="height: 80px"
-              placeholder="请输入说明"
-              show-count :maxlength="200"
-            />
-          </div>
-        </div>
-        <div class="name name2">
-          <div class="namebox">
-            <div class="inname">同步学习记录</div>
-          </div>
-          <div class="in">
-            <a-radio v-model:checked="checked"
-              ><span
-                style="
+					<div class="in">
+						<a-input v-model:value="valueE" placeholder="自动带出 可修改" />
+					</div>
+				</div>
+				<div class="name name2">
+					<div class="namebox">
+						<div class="inname" style="margin-top: 13px">项目说明</div>
+					</div>
+					<div class="in">
+						<a-textarea v-model:value="remark" style="height: 80px" placeholder="请输入说明" show-count :maxlength="200" />
+					</div>
+				</div>
+				<div class="name name2">
+					<div class="namebox">
+						<div class="inname">同步学习记录</div>
+					</div>
+					<div class="in">
+						<a-radio @click="changeChecked" v-model:checked="checked"><span style="
                   width: 100%;
                   color: rgba(109, 117, 132, 1);
                   font-size: 14px;
-                "
-                >同步课程学习记录（如学员在课程库中拥有课程的学习记录，自动免修该课程）</span
-              ></a-radio
-            >
-          </div>
-        </div>
-        <div class="name">
-          <div class="namebox">
-            <img
-              class="nameimg"
-              src="../../assets/images/basicinfo/asterisk.png"
-            />
-            <div class="inname">项目级别</div>
-          </div>
-          <div class="in">
-            <a-input
-              v-model:value="valueE"
-              placeholder="集团级/组织级/现地级/部门级"
-            />
-          </div>
-        </div>
-        <div class="name">
-          <div class="namebox">
-            <img
-              class="nameimg"
-              src="../../assets/images/basicinfo/asterisk.png"
-            />
-            <div class="inname">培训体系</div>
-          </div>
-          <div class="in">
-            <a-input
-              v-model:value="valueE"
-              placeholder="集团级/组织级/现地级/部门级"
-            />
-          </div>
-        </div>
-        <div class="name">
-          <div class="namebox">
-            <img
-              class="nameimg"
-              src="../../assets/images/basicinfo/asterisk.png"
-            />
-            <div class="inname">是否BOEU实施</div>
-          </div>
-          <div class="in">
-            <a-radio v-model:checked="checked"
-              ><span
-                style="
+                ">同步课程学习记录（如学员在课程库中拥有课程的学习记录，自动免修该课程）</span></a-radio>
+					</div>
+				</div>
+				<div class="name">
+					<div class="namebox">
+						<img class="nameimg" src="../../assets/images/basicinfo/asterisk.png" />
+						<div class="inname">项目级别</div>
+					</div>
+					<div class="in">
+						<a-input v-model:value="valueE" placeholder="集团级/组织级/现地级/部门级" />
+					</div>
+				</div>
+				<div class="name">
+					<div class="namebox">
+						<img class="nameimg" src="../../assets/images/basicinfo/asterisk.png" />
+						<div class="inname">培训体系</div>
+					</div>
+					<div class="in">
+						<a-input v-model:value="valueE" placeholder="集团级/组织级/现地级/部门级" />
+					</div>
+				</div>
+				<div class="name">
+					<div class="namebox">
+						<img class="nameimg" src="../../assets/images/basicinfo/asterisk.png" />
+						<div class="inname">是否BOEU实施</div>
+					</div>
+					<div class="in">
+						<a-radio @click="changeChecked1" v-model:checked="checked1"><span style="
                   width: 100%;
                   color: rgba(109, 117, 132, 1);
                   font-size: 14px;
-                "
-                >BOEU实施</span
-              ></a-radio
-            >
-          </div>
-        </div>
-        <div class="name name2">
-          <div class="namebox" style="margin-top: 8px">
-            <img
-              class="nameimg"
-              src="../../assets/images/basicinfo/asterisk.png"
-            />
-            <div class="inname">附件</div>
-          </div>
-          <div class="filebox">
-            <div>
-              <img
-                class="fileimg"
-                src="../../assets/images/projectadd/enclosure.png"
-              />
-              <span class="filetext">上传附件</span>
-            </div>
-            <div class="support">
-              支持.pdf,.ppt,.pptx,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif,.zip
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="template">
-        <div class="name">
-          <div class="inname" style="width: 50px">模板</div>
-          <div class="in select" style="margin-left: 2px">
-            <a-select
-              v-model:value="value1"
-              placeholder="请选择模板"
-              :size="size"
-              style="width: 100%"
-              :options="options"
-            ></a-select>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="footer">
-      <div class="btn">
-        <router-link to="/taskpage"
-          type="primary"
-          class="btn1"
-          >确定</router-link
-        >
-        <a-button
-          class="btn2"
-          >取消</a-button
-        >
-      </div>
-    </div>
-  </div>
+                ">BOEU实施</span></a-radio>
+					</div>
+				</div>
+				<div class="name name2">
+					<div class="namebox" style="margin-top: 8px">
+						<img class="nameimg" src="../../assets/images/basicinfo/asterisk.png" />
+						<div class="inname">附件</div>
+					</div>
+					<div class="filebox">
+						<div>
+							<img class="fileimg" src="../../assets/images/projectadd/enclosure.png" />
+							<a-upload v-model:file-list="fileList1" name="file" action="/api/file/upload" :headers="headers"
+								@change="handleChange1">
+								<!-- <a-button> -->
+								<!-- <upload-outlined></upload-outlined> -->
+								<span class="filetext">上传附件</span>
+								<!-- </a-button> -->
+							</a-upload>
+						</div>
+						<div class="support">
+							支持.pdf,.ppt,.pptx,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif,.zip
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="template">
+				<div class="name">
+					<div class="inname" style="width: 50px">模板</div>
+					<div class="in select" style="margin-left: 2px">
+						<a-select v-model:value="value1" placeholder="请选择模板" :size="size" style="width: 100%" :options="options">
+						</a-select>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="footer">
+			<div class="btn">
+				<a-button v-on:click="createProject" type="primary" class="btn1">确定</a-button>
+				<a-button class="btn2">取消</a-button>
+			</div>
+		</div>
+	</div>
 </template>
 <script>
-import { reactive, toRefs } from "vue";
+import { reactive, toRefs, ref } from "vue";
+import { message } from 'ant-design-vue';
+import * as api from "../../api/index";
+
 export default {
-  name: "projectAdd",
-  setup() {
-    const state = reactive({
-      classifyList: [
-        {
-          id: 1,
-          name: "分类一",
-          label: "分类一",
-        },
-        {
-          id: 2,
-          name: "分类二",
-          label: "分类二",
-        },
-        {
-          id: 3,
-          name: "分类三",
-          label: "分类三",
-        },
-        {
-          id: 4,
-          name: "分类四",
-          label: "分类四",
-        },
-      ],
-      classifySelect: null,
-      classifySelectId: null,
-    });
-    return {
-      ...toRefs(state),
-    };
-  },
+	name: "projectAdd",
+	setup() {
+		const state = reactive({
+			classifySelect: null,
+			classifySelectId: null,
+			checked: false,
+			checked1: false
+		});
+
+		const projectName = ref('');
+
+		const classifyList = ref([
+			{ value: 1, label: '管理者' },
+			{ value: 2, label: '领军者' },
+			{ value: 3, label: '产业人' },
+		]);
+
+		let projectType = "";
+
+		const classificationChange = (value) => {
+			console.log(`selected ${value}`);
+			projectType = value;
+		};
+
+		function getBase64(img, callback) {
+			const reader = new FileReader();
+			reader.addEventListener('load', () => callback(reader.result));
+			reader.readAsDataURL(img);
+		}
+
+		const fileList = ref([]);
+		const fileList1 = ref([]);
+		const loading = ref(false);
+		const imageUrl = ref('');
+
+		const handleChange = (info) => {
+			if (info.file.status === 'uploading') {
+				loading.value = true;
+				return;
+			}
+			if (info.file.status === 'done') {
+				console.log('上传图片返回的信息 %o', info)
+				// Get this url from response in real world.
+				getBase64(info.file.originFileObj, (base64Url) => {
+					imageUrl.value = base64Url;
+					loading.value = false;
+				});
+			}
+			if (info.file.status === 'error') {
+				loading.value = false;
+				message.error('upload error');
+			}
+		};
+
+		const handleChange1 = (info) => {
+			if (info.file.status === 'uploading') {
+				loading.value = true;
+				return;
+			}
+			if (info.file.status === 'done') {
+				console.log('上传附件返回的信息 %o', info)
+
+			}
+			if (info.file.status === 'error') {
+				loading.value = false;
+				message.error('upload error');
+			}
+		};
+
+		const beforeUpload = (file) => {
+			const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
+			if (!isJpgOrPng) {
+				message.error('You can only upload JPG file!');
+			}
+			const isLt2M = file.size / 1024 / 1024 < 1;
+			if (!isLt2M) {
+				message.error('Image must smaller than 1MB!');
+			}
+			return isJpgOrPng && isLt2M;
+		};
+
+		const onRangeChange = (value, dateString) => {
+			console.log('Selected Time: ', value);
+			// 项目时间选择函数
+			console.log('Formatted Selected Time: ', dateString);
+		};
+
+		// 项目经理 后续接口调用
+		const classifyList1 = ref([
+			{ value: 1, label: '李俊国' },
+			{ value: 2, label: '将小米' },
+			{ value: 3, label: '刘孟君' },
+		]);
+
+		// 资源归属 sourceBelongId 后续给接口
+
+		// 项目说明
+		const remark = ref('');
+
+
+		const changeChecked = () => {
+			console.log(state.checked)
+			state.checked ? state.checked = false : state.checked = true;
+		}
+
+		const changeChecked1 = () => {
+			console.log(state.checked1)
+			state.checked1 ? state.checked1 = false : state.checked1 = true;
+		}
+
+		const errorMsgs = {
+			"name": "请输入项目名称",
+			"type": "请选择项目分类",
+			"picUrl": "请上传项目封面图",
+			"beginTime": "请选择项目开始时间",
+			"endTime": "请选择项目结束时间",
+			"manager": "请选择项目经理",
+			"managerId": "请选择项目经理",
+			"sourceBelongId": "请选择资源归属",
+			"level": "请填写项目级别",
+			"systemId": "请填写项目培训体系",
+			"boeFlag": "请选择是否BOE实施",
+			"attach": "请上传附件"
+		}
+
+		const createProject = () => {
+			let obj = {
+				"attach": "1",
+				"beginTime": 0,
+				"boeFlag": 0,
+				"category": 0,
+				"courseSyncFlag": 0,
+				"endTime": 0,
+				"level": 0,
+				"manager": "",
+				"managerId": "",
+				"name": projectName["value"],
+				"notice": "",
+				"noticeFlag": 0,
+				"parentId": 0,
+				"picUrl": "",
+				"projectId": 0,
+				"remark": remark["value"],
+				"sourceBelongId": 0,
+				"status": 0,
+				"systemId": 0,
+				"templateId": 0,
+				"type": projectType
+			}
+			console.log('提交的数据格式 %o', obj)
+
+			for (let i in obj) {
+				console.log(obj[i])
+				if (obj[i] === "") {
+					message.destroy()
+					message.info(errorMsgs[i])
+					return
+				}
+			}
+
+			api.createProject(obj).then(res => {
+				console.log(res)
+			}).catch(err => {
+				console.log(err)
+			})
+		};
+
+		return {
+			...toRefs(state),
+			projectName,
+			classifyList,
+			classificationChange,
+			fileList,
+			fileList1,
+			loading,
+			imageUrl,
+			handleChange,
+			handleChange1,
+			beforeUpload,
+			onRangeChange,
+			classifyList1,
+			remark,
+			changeChecked,
+			changeChecked1,
+			createProject
+		};
+	}
 };
 </script>
 <style lang="scss">
 .projectAdd {
-  width: 100%;
-  // height: inherit;
-  // flex: 1;
-  // flex-shrink: 0;
-  // overflow-y: scroll;
+	width: 100%;
+	// height: inherit;
+	// flex: 1;
+	// flex-shrink: 0;
+	// overflow-y: scroll;
 
-  .header {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    .title {
-      color: #000000;
-      font-size: 18px;
-      //line-height: 36px;
-      padding-top: 30px;
-      padding-left: 37px;
-      //font-weight: 500;
-    }
-    .goback {
-      padding-right: 70px;
-      //padding-top: 37px;
-      position: relative;
-      .return {
-        display: inline-block;
-        width: 42px;
-        height: 42px;
-        margin-top: 17px;
-        margin-right: 10px;
-        background-image: url("../../assets/images/projectadd/return.png");
-      }
-      .returntext {
-        display: inline-block;
-        position: absolute;
-        top: 27px;
-        color: #4ea6ff;
-        font-size: 14px;
-      }
-    }
-  }
-  .content {
-    display: flex;
-    .main {
-      width: 50%;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      //justify-content: center;
-      float: left;
-      border-right: 1px solid rgba(153, 155, 163, 0.3);
-      .name {
-        width: 78%;
-        // background-color: lightcoral;
-        display: flex;
-        margin-top: 20px;
-        align-items: center;
-        //height: 40px;
-        // border: 1px solid black;
-        .namebox {
-          width: 120px;
-          display: flex;
-          align-items: center;
-          justify-content: flex-end;
-          flex-shrink: 0;
-          .nameimg {
-            width: 10px;
-            height: 10px;
-          }
-        }
-        .d {
-          margin-top: 8px;
-          font-size: 25px;
-          color: #ff4e4e;
-        }
-        .box {
-          position: relative;
-          margin-left: 14px;
-          .box1 {
-            position: absolute;
-            left: 50%;
-            top: 50%;
-            width: 50px;
-            margin-left: -25px;
-            margin-top: -5px;
-            border-top: 2px solid rgba(78, 166, 255, 1);
-          }
-          .box2 {
-            position: absolute;
-            left: 50%;
-            top: 50%;
-            height: 50px;
-            //margin-left: -5px;
-            margin-top: -25px;
-            border-left: 2px solid rgba(78, 166, 255, 1);
-          }
-        }
-        .inname {
-          color: #6f6f6f;
-          font-size: 14px;
-          margin-left: 7px;
-        }
-        .in {
-          margin-left: 14px;
-          flex: 1;
-          // .ant-radio-wrapper {
-          // }
-          .ant-input-textarea-show-count {
-              position: relative;
-              height: 88px;
-            }
-            .ant-input-textarea-show-count::after {
-              position: absolute;
-              right: 10px;
-              bottom: 0px;
-            } 
-          .ant-input {
-            border-radius: 8px;
-            // height: 120%;
-            width: 100%;
-            height: 40px;
-          }
-          .ant-input-affix-wrapper {
-            padding: 0 11px;
-            border-radius: 8px;
-          }
-          .ant-select-selector {
-            border-radius: 5px;
-            // height: 120%;
-            width: 100%;
-            height: 40px;
-          }
-        }
-        .filebox {
-          margin-left: 14px;
-          flex: 1;
-          .fileimg {
-            width: 15px;
-            height: 15px;
-            margin-right: 6px;
-          }
-          .filetext {
-            font-size: 14px;
-            font-weight: 400;
-            color: #4ea6ff;
-            line-height: 36px;
-          }
-          .support {
-            font-size: 14px;
-            font-weight: 400;
-            color: #999ba3;
-            line-height: 36px;
-            margin-top: 8px;
-            word-break: break-all;
-          }
-        }
-      }
-      .name2 {
-        display: flex;
-        align-items: flex-start;
-        .ant-input-textarea {
-            .ant-input {
-                height: 88px;
-            }
-        }
-      }
-    }
-    .template {
-      width: 50%;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      //justify-content: center;
-      float: right;
-      .name {
-        width: 78%;
-        // background-color: lightcoral;
-        display: flex;
-        margin-top: 20px;
-        align-items: center;
-        height: 40px;
-        // border: 1px solid black;
-        .d {
-          margin-top: 8px;
-          font-size: 25px;
-          color: #ff4e4e;
-        }
-        .inname {
-          color: #6f6f6f;
-          font-size: 14px;
-          margin-left: 7px;
-          width: 65px;
-        }
-        .in {
-          margin-left: 14px;
-          width: 81%;
-          .ant-input {
-            border-radius: 5px;
-            // height: 120%;
-            width: 100%;
-            height: 40px;
-          }
-          .ant-select-selector {
-            border-radius: 5px;
-            // height: 120%;
-            width: 100%;
-            height: 40px;
-          }
-        }
-      }
-    }
-  }
-  .footer {
-    width: 100%;
-    margin-top: 31px;
-    margin-bottom: 14px;
-    padding-bottom: 20px;
-    .btn {
-      display: flex;
-      justify-content: center;
-      .btn1 {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 100px; 
-        height: 40px; 
-        border-radius: 8px;
-        background: #409EFF;
-        color:#FFFFFF;
-        margin-right: 14px;
-      }
-      .btn2 {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 100px; 
-        height: 40px; 
-        border-radius: 8px;
-        border: 1px solid #409EFF;
-        background: #FFFFFF;
-        color:#409EFF;
-      }
-    }
-    .text {
-      color: rgba(153, 155, 163, 1);
-      font-size: 14px;
-      margin-left: 223px;
-    }
-  }
+	.header {
+		width: 100%;
+		display: flex;
+		justify-content: space-between;
+
+		.title {
+			color: #000000;
+			font-size: 18px;
+			//line-height: 36px;
+			padding-top: 30px;
+			padding-left: 37px;
+			//font-weight: 500;
+		}
+
+		.goback {
+			padding-right: 70px;
+			//padding-top: 37px;
+			position: relative;
+
+			.return {
+				display: inline-block;
+				width: 42px;
+				height: 42px;
+				margin-top: 17px;
+				margin-right: 10px;
+				background-image: url("../../assets/images/projectadd/return.png");
+			}
+
+			.returntext {
+				display: inline-block;
+				position: absolute;
+				top: 27px;
+				color: #4ea6ff;
+				font-size: 14px;
+			}
+		}
+	}
+
+	.content {
+		display: flex;
+
+		.main {
+			width: 50%;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			//justify-content: center;
+			float: left;
+			border-right: 1px solid rgba(153, 155, 163, 0.3);
+
+			.name {
+				width: 78%;
+				// background-color: lightcoral;
+				display: flex;
+				margin-top: 20px;
+				align-items: center;
+
+				//height: 40px;
+				// border: 1px solid black;
+				.namebox {
+					width: 120px;
+					display: flex;
+					align-items: center;
+					justify-content: flex-end;
+					flex-shrink: 0;
+
+					.nameimg {
+						width: 10px;
+						height: 10px;
+					}
+				}
+
+				.d {
+					margin-top: 8px;
+					font-size: 25px;
+					color: #ff4e4e;
+				}
+
+				.box {
+					position: relative;
+					margin-left: 14px;
+
+					.box1 {
+						position: absolute;
+						left: 50%;
+						top: 50%;
+						width: 50px;
+						margin-left: -25px;
+						margin-top: -5px;
+						border-top: 2px solid rgba(78, 166, 255, 1);
+					}
+
+					.box2 {
+						position: absolute;
+						left: 50%;
+						top: 50%;
+						height: 50px;
+						//margin-left: -5px;
+						margin-top: -25px;
+						border-left: 2px solid rgba(78, 166, 255, 1);
+					}
+				}
+
+				.inname {
+					color: #6f6f6f;
+					font-size: 14px;
+					margin-left: 7px;
+				}
+
+				.in {
+					margin-left: 14px;
+					flex: 1;
+
+					// .ant-radio-wrapper {
+					// }
+					.ant-input-textarea-show-count {
+						position: relative;
+						height: 88px;
+					}
+
+					.ant-input-textarea-show-count::after {
+						position: absolute;
+						right: 10px;
+						bottom: 0px;
+					}
+
+					.ant-input {
+						border-radius: 8px;
+						// height: 120%;
+						width: 100%;
+						height: 40px;
+					}
+
+					.ant-input-affix-wrapper {
+						padding: 0 11px;
+						border-radius: 8px;
+					}
+
+					.ant-select-selector {
+						border-radius: 5px;
+						// height: 120%;
+						width: 100%;
+						height: 40px;
+					}
+				}
+
+				.filebox {
+					margin-left: 14px;
+					flex: 1;
+
+					.fileimg {
+						width: 15px;
+						height: 15px;
+						margin-right: 6px;
+					}
+
+					.filetext {
+						font-size: 14px;
+						font-weight: 400;
+						color: #4ea6ff;
+						line-height: 36px;
+					}
+
+					.support {
+						font-size: 14px;
+						font-weight: 400;
+						color: #999ba3;
+						line-height: 36px;
+						margin-top: 8px;
+						word-break: break-all;
+					}
+				}
+			}
+
+			.name2 {
+				display: flex;
+				align-items: flex-start;
+
+				.ant-input-textarea {
+					.ant-input {
+						height: 88px;
+					}
+				}
+			}
+		}
+
+		.template {
+			width: 50%;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			//justify-content: center;
+			float: right;
+
+			.name {
+				width: 78%;
+				// background-color: lightcoral;
+				display: flex;
+				margin-top: 20px;
+				align-items: center;
+				height: 40px;
+
+				// border: 1px solid black;
+				.d {
+					margin-top: 8px;
+					font-size: 25px;
+					color: #ff4e4e;
+				}
+
+				.inname {
+					color: #6f6f6f;
+					font-size: 14px;
+					margin-left: 7px;
+					width: 65px;
+				}
+
+				.in {
+					margin-left: 14px;
+					width: 81%;
+
+					.ant-input {
+						border-radius: 5px;
+						// height: 120%;
+						width: 100%;
+						height: 40px;
+					}
+
+					.ant-select-selector {
+						border-radius: 5px;
+						// height: 120%;
+						width: 100%;
+						height: 40px;
+					}
+				}
+			}
+		}
+	}
+
+	.footer {
+		width: 100%;
+		margin-top: 31px;
+		margin-bottom: 14px;
+		padding-bottom: 20px;
+
+		.btn {
+			display: flex;
+			justify-content: center;
+
+			.btn1 {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				width: 100px;
+				height: 40px;
+				border-radius: 8px;
+				background: #409EFF;
+				color: #FFFFFF;
+				margin-right: 14px;
+			}
+
+			.btn2 {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				width: 100px;
+				height: 40px;
+				border-radius: 8px;
+				border: 1px solid #409EFF;
+				background: #FFFFFF;
+				color: #409EFF;
+			}
+		}
+
+		.text {
+			color: rgba(153, 155, 163, 1);
+			font-size: 14px;
+			margin-left: 223px;
+		}
+	}
 }
 </style>