修改校园特色

src/views/kanBan/components/AschoolFeature.vue

@@ -88,7 +88,7 @@
 				</div>
 			</div>
 
-			<div class="Topbri">
+			<div class="TopbriKl">
 				{{
 					Alldata.admin.CampusF ? Alldata.admin.CampusF.GroupBri : "暂无简介"
 				}}
@@ -131,8 +131,14 @@
 							:src="i.icon"
 							alt=""
 						/>
-						<div class="featureConTit">{{ i.name }}</div>
-
+						<el-tooltip
+							class="item"
+							effect="dark"
+							:content="i.name"
+							placement="bottom"
+						>
+							<div class="featureConTit">{{ i.name }}</div>
+						</el-tooltip>
 						<el-tooltip
 							class="item"
 							effect="dark"
@@ -170,31 +176,32 @@
 					/>
 				</div>
 			</div>
-			<div class="Topbri">
-				<el-tooltip
-					class="item"
-					effect="dark"
-					:content="
-						Alldata.admin.CampusF
-							? Alldata.admin.CampusF.teacherN.teaBri
-							: '暂无数据'
-					"
-					placement="bottom"
-				>
-					<span>
-						{{
-							Alldata.admin.CampusF
-								? Alldata.admin.CampusF.teacherN.teaBri
-								: "暂无简介"
-						}}
-					</span>
-				</el-tooltip>
+			<div class="TopbriKl">
+				{{
+					Alldata.admin.CampusF
+						? Alldata.admin.CampusF.teacherN.teaBri
+						: "暂无简介"
+				}}
 			</div>
 
 			<div class="featureAll" v-if="teaData.length">
 				<div class="featureCon2" v-for="(i, index) in teaData" :key="index">
-					<div class="featureConTit2">{{ i.bri }}</div>
-					<div class="Topbri">{{ i.name }}</div>
+					<el-tooltip
+						class="item"
+						effect="dark"
+						:content="i.bri"
+						placement="bottom"
+					>
+						<div class="featureConTit2">{{ i.bri }}</div>
+					</el-tooltip>
+					<el-tooltip
+						class="item"
+						effect="dark"
+						:content="i.bri"
+						placement="bottom"
+					>
+						<div class="Topbri">{{ i.name }}</div>
+					</el-tooltip>
 				</div>
 			</div>
 			<div v-else>暂无数据</div>
@@ -214,6 +221,7 @@
 					></div>
 				</div>
 			</div>
+
             <div
                 style="display: flex;flex-direction: column;gap: 10px;"
                 v-for="(item, index) in CampusF.appList"
@@ -226,6 +234,7 @@
                             display: flex;
                             justify-content: space-between;
                             gap: 10px;
+							align-items: center;
                         "
                     >
                         <img
@@ -245,17 +254,21 @@
 
                 <div>
                     <div style="display: flex;justify-content: space-between;gap: 30px;">
+						<!-- 左边区域 -->
                         <div class="diaFea" @click="openNewWindow(item)" style="height: 122px;width: 30%;min-width: 200px;max-width: 300px;cursor: pointer;">
-                            <img v-if="editIndex == index" style="border:1px #0663fe solid;padding: 3px;box-sizing: border-box;" class="diaFeaImgT" @click="uploadisBtn(3,index)" :src="item.setIcon ? item.setIcon : item.json.icon" alt="">
+                            <img v-if="editIndex == index" style="border:1px #0663fe solid;padding: 3px;box-sizing: border-box;" class="diaFeaImgT" 
+							@click="uploadisBtn(3,index)" :src="item.setIcon ? item.setIcon : item.json.icon" alt="">
                             <img v-else class="diaFeaImgT"  :src="item.setIcon ? item.setIcon : item.json.icon" alt="">
                             
 							<div class="AppStoreConTit">{{ item.name }}</div>
                         </div>
 
+						<!-- 右边区域 -->
                         <div style="flex: 1;">
                             <div class="AppStoreConBri" v-if="item.detailWri">
                                 <el-input
 									v-if="editIndex == index"
+									:style="{border: editIndex == index ? '1px dashed #9747FF' :''}"
 									resize="none"
 									style="border-radius: 10px;height: 100%;"
 									type="textarea"
@@ -265,6 +278,7 @@
 								</el-input>
 								<div v-else style="font-weight: 600">{{ item.detailWri }}</div>
                             </div>
+
                             <div class="AppStoreConBri" v-else>
                                 <el-input
 									v-if="editIndex == index"
@@ -280,20 +294,21 @@
                             </div>
                         </div>
                     </div>
+
                     <div
                         class="diaBtn"
                         style="padding: 0"
                         v-if="editIndex == index"
                     >
-                        <span style="color: #000;" @click="feaClo(index)">取消</span>
-                        <span
+                        <div style="color: #000;" @click="feaClo(index)">取消</div>
+                        <div
                             style="
                                 background: #fff;
                             "
 							:style="{border: editBtnType==1 ? '1px #9747FF solid':'1px #0663fe solid',
 							color: editBtnType==1 ? '#9747FF' : '#0663fe'}"
                             @click="setJsonL(index)"
-                            >保存</span
+                            >保存</div
                         >
                     </div>
                 </div>
@@ -371,11 +386,12 @@
 					>
 						<div
 							class="diaFea"
-							:style="{border: editIndex == index ? '1px dashed #3681FC' :''}"
+							:style="{border: editIndex == index ? editBtnType == 1 ? '2px dashed #9747FF' :'2px dashed #3681FC' :''}"
 							v-for="(i, index) in CampusF.feature"
 							:key="index + 'b'"
 						>
-							<div style="display: flex; justify-content: space-between">
+							<!-- 办学特色顶部 -->
+							<div style="display: flex; justify-content: space-between;gap: 16px;height: 28px;">
 								<el-input
 									v-if="editIndex == index"
 									resize="none"
@@ -384,18 +400,23 @@
 									v-model="i.name"
 								>
 								</el-input>
-								<div v-else style="font-weight: 600">{{ i.name }}</div>
+								<div v-else class="itemTit">{{ i.name }}</div>
 
+								<!-- 编辑与删除 -->
 								<div
 									style="
+										flex-shrink: 0;
 										display: flex;
 										justify-content: space-between;
-										gap: 10px;
+										gap: 16px;
+										align-items: center;
+
 									"
 								>
 									<img
 										@click="editFea(index)"
 										class="topTitEdit"
+										v-if="!(editBtnType == 2 && editIndex == index)"
 										:src="editIndex == index ? editBtnType == 1? require('../../../assets/kanban/bz.svg') : require('../../../assets/kanban/lj.svg') : require('../../../assets/kanban/feaB.svg')"
 										alt=""
 									/>
@@ -407,12 +428,18 @@
 									/>
 								</div>
 							</div>
-							<div>
-								<div v-if="!i.icon"
-								class="djjC"
-								@click="uploadisBtn(isBtn, index)">
-									<img src="../../../assets/kanban/djj.svg" alt="">
+
+							<!-- 图标 -->
+							<div 
+							class="djjC"
+							:style="{border: editIndex == index ? editBtnType == 1 ? '1px dashed #9747FF' :'1px dashed #3681FC' :'1px solid #9747FF',
+								cursor: editIndex == index ? 'pointer' :'',
+								background: editIndex == index ? '#F2F2F2' : '' 
+							}">
+								<div class="jiaBoc" @click="uploadisBtn(isBtn, index)" v-if="!i.icon">
+									<img  src="../../../assets/kanban/djj.svg" alt="">
 								</div>
+
 								<img
 									style="cursor: pointer"
 									v-else-if="editIndex == index"
@@ -423,32 +450,37 @@
 								/>
 								<img v-else class="diaFeaImg" :src="i.icon" alt="" />
 							</div>
+
+
 							<div>
 								<el-input
 									:disabled="editIndex != index"
 									resize="none"
-									:style="{border: editIndex == index ? '1px dashed #3681FC' :''}"
-									style="border-radius: 10px;overflow: hidden;"
+									:style="{border: editIndex == index ? editBtnType == 1 ? '1px dashed #9747FF' :'1px dashed #3681FC' :' 1px solid #969BA3'
+									}"
+									:class="editIndex == index ? 'tArea':''"
+									style="border-radius: 8px;overflow: hidden;"
 									type="textarea"
 									:rows="4"
 									placeholder="请输入内容"
 									v-model="i.bri"
 								>
 								</el-input>
+
 								<div
 									class="diaBtn"
 									style="padding: 0"
 									v-if="editIndex == index"
 								>
-									<span style="color: #000;" @click="feaClo(index)">取消</span>
-									<span
+									<div style="color: #000;" @click="feaClo(index)">取消</div>
+									<div
 										style="
 											background: #fff;
 										"
 										:style="{border: editBtnType==1 ? '1px #9747FF solid':'1px #0663fe solid',
 										color: editBtnType==1 ? '#9747FF' : '#0663fe'}"
 										@click="setJsonL(0)"
-										>保存</span
+										>保存</div
 									>
 								</div>
 							</div>
@@ -460,14 +492,19 @@
 						style="display: flex; flex-direction: column; gap: 10px"
 						v-if="isBtn === 2"
 					>
-                        <div class="diaFea" :style="{border: editIndex == 'bri' ? '1px dashed #3681FC' :''}">
-							<div style="display: flex; justify-content: space-between">
-                                <div></div>
+						<!-- 顶部简介区域 -->
+                        <div class="diaFea" 
+						:style="{border: editIndex == 'bri' ?  '2px dashed #9747FF' :''}"
+						>
+							<div style="display: flex; justify-content: space-between;">
+                                <div class="itemTit">简介</div>
 								<div
 									style="
 										display: flex;
 										justify-content: space-between;
 										gap: 10px;
+										align-items: center;
+
 									"
 								>
 									<img
@@ -485,7 +522,8 @@
 									style="border-radius: 10px;overflow: hidden;"
 									type="textarea"
 									:rows="4"
-									:style="{border: editIndex == 'bri' ? '1px dashed #3681FC' :''}"
+									:style="{border: editIndex == 'bri' ? editBtnType == 1 ? '1px dashed #9747FF' :'1px dashed #3681FC' :' 1px solid #969BA3'}"
+									:class="editIndex == 'bri' ? 'tArea':''"
 									placeholder="请输入内容"
 									v-model="CampusF.teacherN.teaBri"
 								>
@@ -495,26 +533,28 @@
 									style="padding: 0"
 									v-if="editIndex == 'bri'"
 								>
-									<span style="color: #000;" @click="feaClo()">取消</span>
-									<span
+									<div style="color: #000;" @click="feaClo()">取消</div>
+									<div
 										style="
 											background: #fff;
 										"
 										:style="{border: editBtnType==1 ? '1px #9747FF solid':'1px #0663fe solid',
 										color: editBtnType==1 ? '#9747FF' : '#0663fe'}"
 										@click="setJsonL(0)"
-										>保存</span
+										>保存</div
 									>
 								</div>
 							</div>
 						</div>
+
+
 						<div
 							class="diaFea"
-							:style="{border: editIndex == index ? '1px dashed #3681FC' :''}"
+							:style="{border: editIndex == index ? editBtnType == 1 ? '2px dashed #9747FF' :'2px dashed #3681FC' :''}"
 							v-for="(i, index) in CampusF.teacherN.list"
 							:key="index + 'b'"
 						>
-							<div style="display: flex; justify-content: space-between">
+							<div style="display: flex; justify-content: space-between;gap: 16px;height: 28px;">
 								<el-input
 									v-if="editIndex == index"
 									resize="none"
@@ -523,18 +563,20 @@
 									v-model="i.name"
 								>
 								</el-input>
-								<div v-else style="font-weight: 600">{{ i.name }}</div>
+								<div v-else class="itemTit">{{ i.name }}</div>
 
 								<div
 									style="
 										display: flex;
 										justify-content: space-between;
 										gap: 10px;
+										align-items: center;
 									"
 								>
 									<img
 										@click="editFea(index)"
 										class="topTitEdit"
+										v-if="!(editBtnType == 2 && editIndex == index)"
 										:src="editIndex == index ? editBtnType == 1? require('../../../assets/kanban/bz.svg') : require('../../../assets/kanban/lj.svg') : require('../../../assets/kanban/feaB.svg')"
 										alt=""
 									/>
@@ -550,7 +592,8 @@
 								<el-input
 									:disabled="editIndex != index"
 									resize="none"
-									:style="{border: editIndex == index ? '1px dashed #3681FC' :''}"
+									:style="{border: editIndex == index ? editBtnType == 1 ? '1px dashed #9747FF' :'1px dashed #3681FC' :' 1px solid #969BA3'}"
+									:class="editIndex == index ? 'tArea':''"
 									style="border-radius: 10px;overflow: hidden;"
 									type="textarea"
 									:rows="4"
@@ -563,15 +606,15 @@
 									style="padding: 0"
 									v-if="editIndex == index"
 								>
-									<span style="color: #000;" @click="feaClo(index)">取消</span>
-									<span
+									<div style="color: #000;" @click="feaClo(index)">取消</div>
+									<div
 										style="
 											background: #fff;
 										"
 										:style="{border: editBtnType==1 ? '1px #9747FF solid':'1px #0663fe solid',
 										color: editBtnType==1 ? '#9747FF' : '#0663fe'}"
 										@click="setJsonL(0)"
-										>保存</span
+										>保存</div
 									>
 								</div>
 							</div>
@@ -593,13 +636,14 @@
 					<img src="../../../assets/kanban/feaJ.svg" alt="" />
 					<span style="color: #0560fd">添加</span>
 				</div>
-				<div class="diaBtn" style="padding-bottom: 10px !important;">
-					<span style="color: #000;" @click="handleClose"> {{isBtn === 0?'返 回':'取 消' }}</span>
-					<span
+				<div class="diaBtn" style="padding: 0 20px 10px !important;">
+					<div style="color: #000;" @click="handleClose"> {{isBtn === 0?'返 回':'取 消' }}</div>
+					<div
 						type="primary"
-						style="background: #0663fe; color: #fff"
+						:style="{background:editBtnType==0 ? '#0663fe' :'#969BA3', 
+						color:'#fff'}"
 						@click="setJson(1)"
-						>确 定</span
+						>确 定</div
 					>
 				</div>
 			</div>
@@ -634,13 +678,13 @@
                     </div>
                 </div>
             </div>
-            <div class="diaBtn" style="height: 5%;padding-bottom: 10px;">
-                <span @click="dialogVisible = false">取 消</span>
-                <span
+            <div class="diaBtn" style="padding: 0 20px 10px !important;">
+                <div @click="dialogVisible = false">取 消</div>
+                <div
                     type="primary"
                     style="background: #0663fe; color: #fff"
                     @click="updateUApplist"
-                    >确 定</span
+                    >确 定</div
                 >
             </div>
         </el-dialog>
@@ -768,8 +812,11 @@ export default {
         },
         // 添加数据
 		additem() {
+
 			this.editBtnType = 2
 			if (this.isBtn == 1) {
+				if (this.hasEmptyData(this.CampusF.feature)) return this.$message.info("请填充空数据");
+
 				this.CampusF.feature.push({ bri: "", icon: "", name: "" });
 				this.editIndex = this.CampusF.feature.length - 1;
 				setTimeout(() => {
@@ -779,6 +826,7 @@ export default {
 					});
 				}, 0);
 			}else if (this.isBtn == 2) {
+				if (this.hasEmptyData2(this.CampusF.teacherN.list)) return this.$message.info("请填充空数据");
                 this.CampusF.teacherN.list.push({ bri: "", name: "" });
 				this.editIndex = this.CampusF.teacherN.list.length - 1;
 				setTimeout(() => {
@@ -814,33 +862,13 @@ export default {
 			this.isBtn = -1;
 			this.appList = [];
 			this.editIndex = null;
-
+			this.editBtnType = 0
 			this.dialogVisible = false
 			this.selectedItem = []
 			if (this.Alldata.admin.CampusF) {
 				this.CampusF = JSON.parse(JSON.stringify(this.Alldata.admin.CampusF));
 			}
 		},
-		// 上移
-		moveUp(index) {
-			if (index > 0) {
-				const list = this.CampusF.appList;
-				const temp = list[index];
-				this.$set(list, index, list[index - 1]);
-				this.$set(list, index - 1, temp);
-			}
-		},
-
-		// 下移
-		moveDown(index) {
-			const list = this.CampusF.appList;
-			if (index < list.length - 1) {
-				const temp = list[index];
-				this.$set(list, index, list[index + 1]);
-				this.$set(list, index + 1, temp);
-			}
-		},
-
 		// 删除
 		delFe(index) {
 			this.$confirm("确定要删除吗？", "提示", {
@@ -930,17 +958,18 @@ export default {
 		},
 		// 保存时添加判断
 		setJsonL(ind) {
+			// 办学特色
             if (this.isBtn == 1) {
                 if (this.hasEmptyData(this.CampusF.feature)) return this.$message.info("请填充空数据");
 
 			this.setJson(0);
-            }else if (this.isBtn == 2) {
+            }else if (this.isBtn == 2) {// 师资力量
                 if (!this.CampusF.teacherN.teaBri) return this.$message.info("请填充简介");
                 if (this.hasEmptyData2(this.CampusF.teacherN.list)) return this.$message.info("请填充空数据");
 
 			this.setJson(0);
-            }else if (this.isBtn == 3) {
-               if (this.CampusF.appList[ind].detailWri != 'undefined') {
+            }else if (this.isBtn == 3) {// 特色应用
+               if (!this.CampusF.appList[ind].detailWri) {
                     this.CampusF.appList[ind].detailWri = this.CampusF.appList[ind].detail
                }
 
@@ -962,12 +991,17 @@ export default {
 
 		// 提交
 		setJson(SetL) {
+			if (SetL == 1) {
+				if (this.editBtnType != 0) return this.$message.info("请保存修改数据");
+			}
+
 			if (this.isBtn == 1 && this.hasEmptyData(this.CampusF.feature))
 				return this.$message.info("请填充空数据");
 
 			this.editIndex = null;
 			this.diaLoad = true;
 			let _form = JSON.parse(JSON.stringify(this.Alldata));
+			console.log('CampusF',JSON.parse(JSON.stringify(this.CampusF)));
 
 			_form.desktop.list = _form.desktop.list.map((i) => i.id);
 
@@ -993,6 +1027,9 @@ export default {
 
 			_form.admin.CampusF = JSON.parse(JSON.stringify(this.CampusF));
 
+
+			// console.log('_form.admin.CampusF',JSON.parse(JSON.stringify(_form.admin.CampusF)));
+			
 			_form.admin.CampusF.appList = _form.admin.CampusF.appList.length
 				? _form.admin.CampusF.appList.map((i) => {return { id: i.id, setIcon: i.setIcon,detailWri: i.detailWri ? i.detailWri : ''  };})
 				: [];
@@ -1014,7 +1051,7 @@ export default {
 						this.$message.success("修改成功");
 
 						this.getSchFacility();
-
+						this.editBtnType = 0 
 						if (SetL) {
 							this.handleClose();
 						}
@@ -1313,15 +1350,29 @@ export default {
 }
 
 .topTitEdit {
+	width: 24px;
+	height: 24px;
 	cursor: pointer;
 }
-
+.TopbriKl{
+	font-family: PingFang SC;
+	font-weight: 400;
+	font-size: 14px;
+	line-height: 22px;
+	color: #000;
+}
 .Topbri {
 	font-family: PingFang SC;
 	font-weight: 400;
 	font-size: 14px;
 	line-height: 22px;
 	color: #000;
+	flex-shrink: 0;
+	display: -webkit-box;
+	-webkit-line-clamp: 1;
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 
 .Topbri2 {
@@ -1350,12 +1401,13 @@ export default {
 
 .featureCon {
 	background: #ffffff;
-	width: 100%;
 	height: 211px;
 	display: flex;
+	flex: 1;
+	flex-shrink: 0;
 	flex-direction: column;
-	justify-content: center;
-	border-radius: 12px;
+	/* justify-content: center; */
+	border-radius: 10px;
 	padding: 40px 20px;
 	align-items: center;
 	box-sizing: border-box;
@@ -1363,8 +1415,8 @@ export default {
 }
 
 .featureAll {
-	grid-template-columns: repeat(4, 1fr);
-	display: grid;
+	/* grid-template-columns: repeat(4, 1fr); */
+	display: flex;
 	gap: 20px;
 }
 
@@ -1375,7 +1427,7 @@ export default {
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
-	border-radius: 12px;
+	border-radius: 10px;
 	padding: 40px 20px;
 	align-items: center;
 	box-sizing: border-box;
@@ -1386,8 +1438,13 @@ export default {
 	font-family: PingFang SC;
 	font-weight: 600;
 	font-size: 18px;
-	line-height: 22px;
 	color: #000;
+	text-align: center;
+	display: -webkit-box;
+	-webkit-line-clamp: 1;
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 
 .featureConTit2 {
@@ -1396,6 +1453,12 @@ export default {
 	font-size: 20px;
 	line-height: 22px;
 	color: #0663fe;
+	flex-shrink: 0;
+	display: -webkit-box;
+	-webkit-line-clamp: 1;
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 
 .AppStoreList {
@@ -1466,17 +1529,18 @@ export default {
 	/* display: -webkit-box;
 	-webkit-line-clamp: 2;
 	-webkit-box-orient: vertical; */
-    white-space: wrap;
+    /* white-space: wrap;
 	overflow: hidden;
-	text-overflow: ellipsis;
+	text-overflow: ellipsis; */
 }
 .AppStoreConBri >>> .el-textarea{
 	height: 100%;
 }
 .AppStoreConBri >>> .el-textarea__inner {
 	border: none !important;
-	border-radius: 10px !important;
+	border-radius: 8px !important;
 	height: 100%;
+	background:#F2F2F2 !important;
 
 }
 .AppStoreBri {
@@ -1609,14 +1673,18 @@ export default {
 	gap: 10px;
 	/* height: 40px; */
 	align-items: center;
-	padding: 10px 20px 0 !important;
+	padding: 10px 0px 0 !important;
 	box-sizing: border-box;
 	/* min-height: 60px; */
 }
-.diaBtn > span {
+.diaBtn > div {
 	background: #e7e7e7;
 	border-radius: 25px;
-	padding: 5px 15px;
+	height: 24px;
+	width: 56px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
 	box-sizing: border-box;
 	font-family: PingFang SC;
 	font-weight: 400;
@@ -1672,19 +1740,27 @@ export default {
 	border-radius: 10px;
 }
 .diaFea >>> .el-input__inner {
-	height: 24px;
-	line-height: 24px;
+	height: 28px;
+	line-height: 28px;
+	border-radius: 10px;
+	border: none !important;
+	background: #F2F2F2;
+}
+.diaFea >>> .el-textarea__inner{
+	border: none !important;
+	border-radius: 10px;
+	background: #fff !important;
 }
 .diaFeaImgT{
 	width: 30px;height: 30px;object-fit: cover;border-radius: 50%;
 }
 
 .diaFeaImg {
-	height: 40px;
-	width: 40px;
+	height: 100%;
+	width: 100%;
 	object-fit: contain;
-	border-radius: 5px;
-	border: 1px solid #0663fe;
+	padding: 4px;
+	box-sizing: border-box;
 }
 .shadeC {
 	position: absolute;
@@ -1763,7 +1839,21 @@ export default {
 	height: 40px;
 	border-radius: 8px;
 	border-width: 1px;
-	cursor: pointer;
-	border: 1px dashed #3681FC;
+	overflow: hidden;
+}
+.jiaBoc{
+	width: 100%;
+	height: 100%;
+	display: flex;
+	background: #EEEEEE;
+	align-items: center;
+	justify-content: center;
+}
+.tArea >>> .el-textarea__inner{
+	background:#F2F2F2 !important;
+}
+.itemTit{
+	font-weight: 600;
+	color: #303133;
 }
 </style>