From f805ef513e0dfa59d08f82924822f3ff2f084a2c Mon Sep 17 00:00:00 2001
From: taoxu <2622874537@qq.com>
Date: Fri, 8 Dec 2023 22:57:06 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B8=B2=E6=9F=93=20=E9=A1=B5=E9=9D=A2=20?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=A4=84=E7=90=86=20=E7=BB=93=E6=9E=84?=
 =?UTF-8?q?=E8=A7=A3=E6=9E=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/Mystudent/addclassforwork.vue           |    2 +-
 .../pages_add/add_studentsforwork.vue         |    3 +-
 .../teacher_teachers/components/compose.vue   |  279 +--
 .../teacher_teachers/teacher_addOperation.vue | 1089 ++++++-----
 .../teacher_teachers/teacher_writeadd.vue     | 1595 +++++++++++------
 5 files changed, 1875 insertions(+), 1093 deletions(-)

diff --git a/pages/Mystudent/addclassforwork.vue b/pages/Mystudent/addclassforwork.vue
index 50e8a14..24c840f 100644
--- a/pages/Mystudent/addclassforwork.vue
+++ b/pages/Mystudent/addclassforwork.vue
@@ -5,7 +5,7 @@
 				  :background="bgc"
 				  title-color='#2E4975'
 				  title-size='36'
-				  height='36'></u-navbar>
+				  height='36' :custom-back="addclassinfo"></u-navbar>
 		<view class="serchbox">
 			<view class="serchimg">
 				<image src="https://file.langsi.online/yasiimg/web/static/uVMACkynkipOxuTYDqm0">
diff --git a/pages_teacher/pages_add/add_studentsforwork.vue b/pages_teacher/pages_add/add_studentsforwork.vue
index 6ced2bc..43e338f 100644
--- a/pages_teacher/pages_add/add_studentsforwork.vue
+++ b/pages_teacher/pages_add/add_studentsforwork.vue
@@ -1,7 +1,7 @@
 <template>
 	<view class="searchpage">
 		<u-navbar title="添加学生" :border-bottom="false" :background="bgc" title-color='#2E4975' title-size='36'
-			height='36'></u-navbar>
+			height='36'  :custom-back="addstu"></u-navbar>
 			<u-toast ref="uToast" />
 		<view class="serchbox">
 			<view class="serchimg">
@@ -71,6 +71,7 @@
 		},
 		methods: {
 			addstu() {
+				console.log('调用了');
 				uni.setStorageSync('selectedStuInfo', this.selectedIds);
 							
 				// Navigate back to the previous page
diff --git a/pages_teacher/teacher_teachers/components/compose.vue b/pages_teacher/teacher_teachers/components/compose.vue
index 4e33ba1..0bcbe65 100644
--- a/pages_teacher/teacher_teachers/components/compose.vue
+++ b/pages_teacher/teacher_teachers/components/compose.vue
@@ -1,153 +1,210 @@
 <template>
 	<!-- 外层循环 -->
 	<view>
-		<view v-for="(item,index) in transformedData" :key="index">
+		<view v-for="(item, index) in transformedData"
+			  :key="index">
 			<!-- 剑18循环 -->
 			<view>
 				<view class="view_bages">
-					<view>{{item.examName}}</view>
+					<view>{{ item.examName }}</view>
 				</view>
 			</view>
 			<!-- 渲染Text -->
 			<view class="substance">
-				<text v-for="text in textArr" :key="text" @click="textClick(item,text)" :class="{active: item.active == text}">{{text}}</text>
+				<text v-for="text in textArr"
+					  :key="text"
+					  @click="textClick(item, text)"
+					  :class="{ active: item.active == text }">{{ text }}</text>
 			</view>
 			<!-- 内容 -->
 			<view class="compose_bodys">
-				<view v-for="text in textArr" :key="text" class="zz">
-					<view class="compose_body" v-for="Task in taskArr" :key="Task" v-if="item.active == text">
+				<view v-for="text in textArr"
+					  :key="text"
+					  class="zz">
+					<view class="compose_body"
+						  v-for="Task in taskArr"
+						  :key="Task"
+						  v-if="item.active == text">
 						<view class="compose_left">
-							<view>{{Task}}</view>
+							<view>{{ Task }}</view>
 							<view>
-								<text class="fickle">{{item[text][Task].caption}}</text>
-								<text class="fickle2">{{item[text][Task].themeCaption}}</text>
+								<text class="fickle">{{ item[text][Task].caption }}</text>
+								<text class="fickle2">{{ item[text][Task].themeCaption }}</text>
 							</view>
 						</view>
 
 						<view>
-							<u-checkbox @change="checkboxChange(item[text][Task].id,$event)" v-model="item[text][Task].subsetArr">{{item.name}}</u-checkbox>
+							<u-checkbox @change="checkboxChange(item, text, Task, $event)"
+										v-model="item[text][Task].subsetArr">{{ item.name }}</u-checkbox>
 						</view>
 					</view>
 				</view>
 			</view>
 		</view>
 	</view>
-
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				transformedData: [],
-				// 复选框
-				subsetArr:[],
-				textArr:['test1','test2','test3','test4'],
-				taskArr:['task1','task2'],
-				// 接口参数
-				comsapi: {
-					"key": "",
-					"mode": "home",
-					"exam": "",
-					"caption": "0",
-					"themeCaption": "",
-					"type": "",
-					"isStudy": 0,
-					"isEval": 0
-				},
+export default {
+	data() {
+		return {
+			transformedData: [],
+			// 复选框
+			subsetArr: [],
+			textArr: ['test1', 'test2', 'test3', 'test4'],
+			taskArr: ['task1', 'task2'],
+			// 接口参数
+			comsapi: {
+				"key": "",
+				"mode": "home",
+				"exam": "",
+				"caption": "0",
+				"themeCaption": "",
+				"type": "",
+				"isStudy": 0,
+				"isEval": 0
+			},
+			orgtransformedData: [],
+			selectwrite: [],
+		}
+	},
+	created() {
+		this.getCompose()
+	},
+	methods: {
+		//写作接口	
+		getCompose() {
+			this.$u.post('https://api.admin-v2.langsi.online/admin-api/writing/all/search', this.comsapi).then(res => {
+				let arr = res.data
+				for (let a of arr) {
+					a.active = 'test1'
+				}
+				this.transformedData = arr
+				this.orgtransformedData = JSON.parse(JSON.stringify(arr));
+				// let json = JSON.stringify(this.transformedData)
+				console.log(this.transformedData, 'this.transformedData');
+			})
+		},
+		textClick(item, text) {
+			item.active = text
+			this.$forceUpdate()
+		},
+		checkboxChange(item, text, Task, event) {
+			const examName = item.examName;
+			const test = text; // text 就是 test 字段的内容
+			const taskId = Task; // Task 就是 task 字段的内容
+			const id = String(item[test][taskId].id);
+
+			// 构建对象
+			const newObject = {
+				examName: examName,
+				test: test,
+				task: taskId,
+				id: id,
+			};
+
+			// 查找数组中是否已存在相应的对象
+			const existingObjectIndex = this.findIndexByFields(this.selectwrite, newObject);
+
+			if (existingObjectIndex === -1) {
+				// 如果不存在，添加到数组
+				this.selectwrite.push(newObject);
+			} else {
+				// 如果存在，根据索引删除对象
+				this.selectwrite.splice(existingObjectIndex, 1);
 			}
+			
+			this.$parent.updatawrite(this.selectwrite)
+			// 更新其他状态...
 		},
-		created() {
-			this.getCompose()
-		},
-		methods: {
-			//写作接口	
-			getCompose() {
-				this.$u.post('https://api.admin-v2.langsi.online/admin-api/writing/all/search', this.comsapi).then(res => {
-					let arr =  res.data
-					for(let a of arr) {
-						a.active = 'test1'
-					}
-					this.transformedData =arr
-				})
-			},
-			textClick(item, text) {
-				item.active = text
-				this.$forceUpdate()
-			},
-			checkboxChange(e,id){
-				if(id.value) {
-					this.subsetArr.push(e)
-				}else {
-				let  index=this.subsetArr.indexOf(e);
-					if(e!==-1) {
-						this.subsetArr.splice(index, 1);
+		findIndexByFields(array, fields) {
+			// 根据指定字段值查找对象在数组中的索引
+			for (let i = 0; i < array.length; i++) {
+				let isEqual = true;
+				for (const key in fields) {
+					if (fields[key] !== array[i][key]) {
+						isEqual = false;
+						break;
 					}
 				}
-				console.log(this.subsetArr)
+				if (isEqual) {
+					return i;
+				}
 			}
-		}
+			return -1;
+		},
 	}
+}
 </script>
 
 <style lang="scss" scoped>
-	.view_bages {
-		font-size: 40rpx;
-		font-weight: 400;
-		color: #2E4975;
-	}
-	.substance {
-		margin: 20rpx 0;
-		text {
-			padding: 10rpx 30rpx;
-			margin-right: 20rpx;
-			background: #FFFFFF;
-			border-radius: 12rpx 12rpx 12rpx 12rpx;
-		}
-	}
-.compose_bodys{
-	margin: 30rpx 0;
+.view_bages {
+	font-size: 40rpx;
+	font-weight: 400;
+	color: #2E4975;
 }
-	.compose_body {
-		display: flex;
+
+.substance {
+	margin: 20rpx 0;
+
+	text {
+		padding: 10rpx 30rpx;
+		margin-right: 20rpx;
 		background: #FFFFFF;
-		align-items: center;
-		justify-content: space-between;
-		margin: 0rpx 20rpx;
-		border-bottom: 2rpx solid #F2F2F2;
-	}
-	.compose_body:last-child {
-		border: none;
-	}
-	.zz{
-		background: #ffff;
 		border-radius: 12rpx 12rpx 12rpx 12rpx;
 	}
-	.compose_left {
-		display: flex;
-		padding: 24rpx 0;
-		margin: 0 24rpx;
-	}
-	.fickle {
-		padding: 4rpx 22rpx;
-		font-size: 20rpx;
-		font-weight: 500;
-		color: #2D7CE6;
-		margin-left: 12rpx;
-		background: #E1EEFF;
-		border-radius: 8rpx 8rpx 8rpx 8rpx;
-	}
-	.fickle2 {
-		padding: 4rpx 32rpx;
-		font-size: 20rpx;
-		font-weight: 500;
-		color: #FB9734;
-		margin-left: 12rpx;
-		background: #FFEBD7;
-		border-radius: 8rpx 8rpx 8rpx 8rpx;
-	}
-	.active {
-		color: #fff;
-		background: #007AFF !important;
-	}
+}
+
+.compose_bodys {
+	margin: 30rpx 0;
+}
+
+.compose_body {
+	display: flex;
+	background: #FFFFFF;
+	align-items: center;
+	justify-content: space-between;
+	margin: 0rpx 20rpx;
+	border-bottom: 2rpx solid #F2F2F2;
+}
+
+.compose_body:last-child {
+	border: none;
+}
+
+.zz {
+	background: #ffff;
+	border-radius: 12rpx 12rpx 12rpx 12rpx;
+}
+
+.compose_left {
+	display: flex;
+	padding: 24rpx 0;
+	margin: 0 24rpx;
+}
+
+.fickle {
+	padding: 4rpx 22rpx;
+	font-size: 20rpx;
+	font-weight: 500;
+	color: #2D7CE6;
+	margin-left: 12rpx;
+	background: #E1EEFF;
+	border-radius: 8rpx 8rpx 8rpx 8rpx;
+}
+
+.fickle2 {
+	padding: 4rpx 32rpx;
+	font-size: 20rpx;
+	font-weight: 500;
+	color: #FB9734;
+	margin-left: 12rpx;
+	background: #FFEBD7;
+	border-radius: 8rpx 8rpx 8rpx 8rpx;
+}
+
+.active {
+	color: #fff;
+	background: #007AFF !important;
+}
 </style>
diff --git a/pages_teacher/teacher_teachers/teacher_addOperation.vue b/pages_teacher/teacher_teachers/teacher_addOperation.vue
index 69e9398..8ed530b 100644
--- a/pages_teacher/teacher_teachers/teacher_addOperation.vue
+++ b/pages_teacher/teacher_teachers/teacher_addOperation.vue
@@ -1,13 +1,21 @@
 <template>
 	<view class="concent">
 		<view class="view_body">
-			<u-navbar :is-back="true" title='添加作业' title-color="#000" :border-bottom="false" :background="bgc" id="navbar">
+			<u-navbar :is-back="true"
+					  title='添加作业'
+					  title-color="#000"
+					  :border-bottom="false"
+					  :background="bgc"
+					  id="navbar">
 			</u-navbar>
 			<view class="view_header">
 				<view class="view_title">标题</view>
 				<view class="view_input">
 					<u-form-item prop="value">
-						<u-input v-model="worktit" :type="type" :border="border" placeholder="输入作业标题" />
+						<u-input v-model="worktit"
+								 :type="type"
+								 :border="border"
+								 placeholder="输入作业标题" />
 					</u-form-item>
 				</view>
 			</view>
@@ -15,33 +23,45 @@
 			<view>
 				<view class="view_tubiao">
 					<view class="view_title">班级安排</view>
-					<view class="view_tb" @click="addclass()">
+					<view class="view_tb"
+						  @click="addclass()">
 						+
 					</view>
 				</view>
-				<view class="noting" v-if="classinfo.length<=0">
-					<image src="https://file.langsi.online/yasiimg/web/static/ulqScWZvBYd22CW5uV0H" ></image>
+				<view class="noting"
+					  v-if="classinfo.length <= 0">
+					<image src="https://file.langsi.online/yasiimg/web/static/ulqScWZvBYd22CW5uV0H"></image>
 					<view class="text1">
 						暂未安排哦！
 					</view>
-					<view class="text2"  @click="addclass()">
+					<view class="text2"
+						  @click="addclass()">
 						去安排
 					</view>
 				</view>
 				<view class="class_bj">
-					
-					<view class="class_images" >
-						<view class="class_ys" v-for="(item,index) in classinfo" :key="index" style="position: relative;">
-							<view class="close" style="position: absolute;top: 0rpx;right: 8rpx;width: 20rpx;height: 20rpx;" @click="delcls(item.id)">
-								<image src="https://file.langsi.online/yasiimg/web/static/ueH3qwYazyVXmiYoVPJE" mode=""></image>
+
+					<view class="class_images">
+						<view class="class_ys"
+							  v-for="(item, index) in classinfo"
+							  :key="index"
+							  style="position: relative;">
+							<view class="close"
+								  style="position: absolute;top: 0rpx;right: 8rpx;width: 20rpx;height: 20rpx;"
+								  @click="delcls(item.id)">
+								<image src="https://file.langsi.online/yasiimg/web/static/ueH3qwYazyVXmiYoVPJE"
+									   mode="">
+								</image>
 							</view>
 							<view class="class_tp">
-								<image src="https://file.langsi.online/yasiimg/web/static/u4T48EWFfk5p6yrV3gOw" mode=""></image>
+								<image src="https://file.langsi.online/yasiimg/web/static/u4T48EWFfk5p6yrV3gOw"
+									   mode="">
+								</image>
 							</view>
-							<view class="class_wz">{{item.name}}</view>
+							<view class="class_wz">{{ item.name }}</view>
 						</view>
-						
-						
+
+
 					</view>
 				</view>
 			</view>
@@ -49,35 +69,46 @@
 			<view>
 				<view class="view_tubiao">
 					<view class="view_title">学员安排</view>
-					<view class="view_tb" @click="toaddstu()">
+					<view class="view_tb"
+						  @click="toaddstu()">
 
 						+
 					</view>
 				</view>
-				<view class="noting" v-if="stuinfo.length<=0">
-					<image src="https://file.langsi.online/yasiimg/web/static/ulqScWZvBYd22CW5uV0H" ></image>
+				<view class="noting"
+					  v-if="stuinfo.length <= 0">
+					<image src="https://file.langsi.online/yasiimg/web/static/ulqScWZvBYd22CW5uV0H"></image>
 					<view class="text1">
 						暂未安排哦！
 					</view>
-					<view class="text2"  @click="toaddstu()">
+					<view class="text2"
+						  @click="toaddstu()">
 						去安排
 					</view>
 				</view>
-				<view class="class_bj" >
+				<view class="class_bj">
 					<view class="class_images">
-						<view class="class_ys"  v-for="(item,index) in stuinfo" :key="index" style="position: relative;">
-							<view class="close" style="position: absolute;top: 0rpx;right: 8rpx;width: 20rpx;height: 20rpx;" @click="delstu(item.id)">
-								<image src="https://file.langsi.online/yasiimg/web/static/ueH3qwYazyVXmiYoVPJE" mode=""></image>
+						<view class="class_ys"
+							  v-for="(item, index) in stuinfo"
+							  :key="index"
+							  style="position: relative;">
+							<view class="close"
+								  style="position: absolute;top: 0rpx;right: 8rpx;width: 20rpx;height: 20rpx;"
+								  @click="delstu(item.id)">
+								<image src="https://file.langsi.online/yasiimg/web/static/ueH3qwYazyVXmiYoVPJE"
+									   mode="">
+								</image>
 							</view>
 							<view class="class_tp">
-								<image :src="item.avatar" mode=""></image>
+								<image :src="item.avatar"
+									   mode=""></image>
 							</view>
-							<view class="class_wz">{{item.name}}</view>
+							<view class="class_wz">{{ item.name }}</view>
 						</view>
-						
+
 					</view>
-					
-				
+
+
 				</view>
 			</view>
 			<!-- 作业安排 -->
@@ -89,17 +120,18 @@
 						</view>
 						<view>
 							<view class="Ielts">IELTS 18</view>
-							<view style="background-color: #fff; padding: 32rpx 40rpx;">
+							<view
+								  style="background-color: #fff; padding: 32rpx 40rpx; border-radius: 20rpx 20rpx 20rpx 20rpx;">
 								<u-time-line>
 									<u-time-line-item nodeTop="2">
 										<template v-slot:content>
 											<view>
 												<view style="display: flex;">
-																		
+
 													<view class="Test">Test 2</view>
-																		
+
 													<view class="greener">听力</view>
-																		
+
 												</view>
 												<view class="u-order-desc">
 													<text>Part 1：多选题</text>
@@ -107,114 +139,105 @@
 											</view>
 										</template>
 									</u-time-line-item>
-								<u-time-line-item nodeTop="2">
-									<template v-slot:content>
-										<view>
-											<view style="display: flex;">
-																	
-												<view class="Test">Test 2</view>
-																	
-												<view class="greener">听力</view>
-																	
+									<u-time-line-item nodeTop="2">
+										<template v-slot:content>
+											<view>
+												<view style="display: flex;">
+
+													<view class="Test">Test 2</view>
+
+													<view class="greener">听力</view>
+
+												</view>
+												<view class="u-order-desc">
+													<text>Part 1：多选题</text>
+												</view>
 											</view>
-											<view class="u-order-desc">
-												<text>Part 1：多选题</text>
+										</template>
+									</u-time-line-item>
+									<u-time-line-item nodeTop="2">
+										<template v-slot:content>
+											<view>
+												<view style="display: flex;">
+
+													<view class="Test">Test 2</view>
+
+													<view class="greener">听力</view>
+
+												</view>
+												<view class="u-order-desc">
+													<text>Part 1：多选题</text>
+												</view>
 											</view>
-										</view>
-									</template>
-								</u-time-line-item>
-								<u-time-line-item nodeTop="2">
-									<template v-slot:content>
-										<view>
-											<view style="display: flex;">
-																	
-												<view class="Test">Test 2</view>
-																	
-												<view class="greener">听力</view>
-																	
-											</view>
-											<view class="u-order-desc">
-												<text>Part 1：多选题</text>
-											</view>
-										</view>
-									</template>
-								</u-time-line-item>
+										</template>
+									</u-time-line-item>
 								</u-time-line>
 							</view>
 						</view>
 					</view>
-					<view>
-							<view class="Ielts">IELTS 18</view>
-							<view style="background-color: #fff; padding: 32rpx 40rpx;">
-								<view style="display: flex; align-items: center;">
-										<view class="yuandi"></view>
-										<view class="Test">Test 2</view>
-										<view class="ellipses">听力</view>
-								</view>
-								<view class="u-order-desc">
-									<text>Part 1：多选题</text>
-								</view>
+					<view v-for="(item,index) in selectwritelist" :key="index">
+						<view class="Ielts">{{item.examName}}</view>
+						<view style="background-color: #fff; padding: 32rpx 40rpx;border-radius: 20rpx 20rpx 20rpx 20rpx;" v-for="(items,indexs) in item.message" :key="indexs">
+							<view style="display: flex; align-items: center;">
+								<view class="yuandi"></view>
+								<view class="Test">{{items.test}}</view>
+								<view class="ellipses">写作</view>
 							</view>
+							<view class="u-order-desc">
+								<text>{{items.task}}</text>
+							</view>
+						</view>
 					</view>
 					<view>
 						<view>
-							<view class="Ielts">IELTS 18</view>
-							<view style="background-color: #fff; padding: 32rpx 40rpx;">
+							<view class="Ielts"></view>
+							<view
+								  style="background-color: #fff; padding: 32rpx 40rpx;border-radius: 20rpx 20rpx 20rpx 20rpx;">
 								<u-time-line>
-									<u-time-line-item nodeTop="2">
+									<u-time-line-item nodeTop="2"
+													  v-for="(item, index) in selectspeak"
+													  :key="index">
 										<template v-slot:content>
 											<view>
-												<view style="display: flex;">
-																		
-													<view class="Test">Test 2</view>
-																		
-													<view class="erotic">听力</view>
-																		
+												<view style="display: flex;flex-wrap: nowrap;">
+
+													<view class="Test"
+														  style="width: 80%;">{{ item.part }}-{{ item.introduction }}</view>
+
+													<view class="erotic">口语</view>
+
 												</view>
 												<view class="u-order-desc">
-													<text>Part 1：多选题</text>
+													<view style="display: inline;">
+														<view class="txt">{{ item.topicEn }}:</view>
+														<view v-for="(items, indexs) in item.speakingType"
+															  :key="indexs"
+															  class="type"
+															  style="display: inline;">
+															<view v-if="items == 1">串题</view>
+															<view v-else-if="items == 2">跟读</view>
+															<view v-else-if="items == 3">模考</view>
+														</view>
+													</view>
 												</view>
 											</view>
 										</template>
 									</u-time-line-item>
-									<u-time-line-item nodeTop="2">
-						
-										<template v-slot:content>
-						
-											<view>
-						
-											<view style="display: flex;">
-																	
-												<view class="Test">Test 2</view>
-																	
-												<view class="erotic">听力</view>
-																	
-											</view>
-						
-												<view class="u-order-desc">
-						
-													<text>Part 1：多选题</text>
-						
-												</view>
-						
-											</view>
-						
-										</template>
-						
-									</u-time-line-item>
+
 								</u-time-line>
 							</view>
 						</view>
 					</view>
-						<!--按钮 -->
-					<view style="display: flex; justify-content: center; margin-top: 32rpx;">
-							<view class="increase">
-								<u-icon name="plus"></u-icon>
-									添加
-								</view>
+					<!--按钮 -->
+					<view style="display: flex; justify-content: center; margin-top: 32rpx;"
+						  @click="addwork()">
+						<view class="increase">
+							<u-icon name="plus"></u-icon>
+							添加
+						</view>
 					</view>
 				</view>
-				
+
 			</view>
 			<!-- 截止时间 -->
 			<view>
@@ -223,9 +246,17 @@
 				</view>
 				<view>
 					<view class="view_form">
-						<u-picker mode="time" v-model="show" :params="params" @confirm="printValue"></u-picker>
+						<u-picker mode="time"
+								  v-model="show"
+								  :params="params"
+								  @confirm="printValue"></u-picker>
 						<u-form-item prop="times">
-							<u-input v-model="form.times" :type="type" :border="border" placeholder="选择作业截止的时间" @click="show = true"  placeholder-style="color: rgba(46,73,117,0.4);font-size: 24rpx;"/>
+							<u-input v-model="times"
+									 :type="type"
+									 :border="border"
+									 placeholder="选择作业截止的时间"
+									 @click="show = true"
+									 placeholder-style="color: rgba(46,73,117,0.4);font-size: 24rpx;" />
 						</u-form-item>
 
 
@@ -238,353 +269,515 @@
 					<view class="view_title">描述</view>
 				</view>
 				<view class="view_textrea">
-					<textarea value="" placeholder="输入你的描述... "placeholder-style="color: rgba(46,73,117,0.4);font-size: 24rpx;"/>
-					</view>
-			</view>	
-	</view>
-	
-<!-- 按钮 -->
-			<view class="view_footer" @click="submit">
-				<view class="view_button" >确认添加 </view>
-				
+					<textarea value=""
+							  placeholder="输入你的描述... "
+							  placeholder-style="color: rgba(46,73,117,0.4);font-size: 24rpx;" />
+				</view>
 			</view>
+		</view>
+
+		<!-- 按钮 -->
+		<view class="zhanwei"
+			  style="width: 100%;height: 230rpx;">
+
+		</view>
+		<view class="botbtn">
+			<view class="btn"
+				  @click="addclassinfo()">
+				确定添加
+			</view>
+		</view>
 
 	</view>
 </template>
 <script>
-	export default {
-		data() {
-			return {
-				bgc: {
-					backgroundColor: "#F6F9FC",
-				},
-				// prick 时间选择框数据
-				params: {
-					year: true,
-					month: true,
-					day: true,
-					hour: true,
-					minute: false,
-					second: false
-				},
-				show: false,
-				radio: '',
-				switchVal: false,
-				classinfo:[],
-				stuinfo:[],
-				worktit:'',
-				times:'',
-				
-			}
-		},
-		onLoad(option) {
-			 uni.removeStorageSync('selectedClassInfo');
-			  uni.removeStorageSync('selectedStuInfo');
-			// this.classinfo=JSON.parse(decodeURIComponent(option.classinfo))
-			let classinofs=[
-				{
-					name:'阅读5班',
-					avatar:'Excepteur',
-					id:15,
-					
+export default {
+	data() {
+		return {
+			bgc: {
+				backgroundColor: "#F6F9FC",
+			},
+			// prick 时间选择框数据
+			params: {
+				year: true,
+				month: true,
+				day: true,
+				hour: true,
+				minute: false,
+				second: false
+			},
+			show: false,
+			radio: '',
+			switchVal: false,
+			classinfo: [],
+			stuinfo: [],
+			worktit: '',
+			times: '',
+			selectspeak: [],
+			selectwrite: [],
+			selectlisten: [],
+			selectread: [],
+			selectwritelist: []
+
+		}
+	},
+	onLoad(option) {
+		uni.removeStorageSync('selectedClassInfo');
+		uni.removeStorageSync('selectedStuInfo');
+		// this.classinfo=JSON.parse(decodeURIComponent(option.classinfo))
+		let classinofs = [{
+			name: '阅读5班',
+			avatar: 'Excepteur',
+			id: 15,
+
+		}]
+		this.classinfo = classinofs
+
+	},
+	onShow() {
+		// Read selectedClassInfo data
+		const selectedClassInfo = uni.getStorageSync('selectedClassInfo');
+
+		if (selectedClassInfo && selectedClassInfo.length > 0) {
+			this.classinfo = selectedClassInfo
+			// Remove duplicates from this.classinfo
+			//     this.classinfo = this.classinfo.filter(item => !selectedClassInfo.some(selectedItem => selectedItem.id === item.id));
+
+			//     // Add non-duplicate items from selectedClassInfo to this.classinfo
+			//     this.classinfo = this.classinfo.concat(selectedClassInfo);
+
+		}
+		const selectedstuInfo = uni.getStorageSync('selectedStuInfo');
+
+		if (selectedstuInfo && selectedstuInfo.length > 0) {
+			this.stuinfo = selectedstuInfo
+			// Remove duplicates from this.classinfo
+			// this.stuinfo = this.stuinfo.filter(item => !selectedstuInfo.some(selectedItem => selectedItem.id === item.id));
+
+			// // Add non-duplicate items from selectedClassInfo to this.classinfo
+			// this.stuinfo = this.stuinfo.concat(selectedstuInfo);
+
+		}
+		const selectforwork = uni.getStorageSync('selectforwork');
+		console.log(selectforwork, 'selectedClassInfoselectedClassInfo');
+		if (selectforwork) {
+			this.selectspeak = selectforwork.selectspeak
+			this.selectwrite = selectforwork.selectwrite
+			this.selectlisten = selectforwork.selectlisten
+			this.selectread = selectforwork.selectread
+			this.selectwrite = selectforwork.selectwrite;
+
+			const groupedItems = {};
+
+			this.selectwrite.forEach(item => {
+				const examName = item.examName;
+
+				if (!groupedItems[examName]) {
+					groupedItems[examName] = {
+						examName: examName,
+						message: []
+					};
 				}
-			]
-			this.classinfo=classinofs
-			
-		},
-		onShow() {
-		  // Read selectedClassInfo data
-		  const selectedClassInfo = uni.getStorageSync('selectedClassInfo');
-		  console.log(selectedClassInfo,'selectedClassInfoselectedClassInfo');
-		  if (selectedClassInfo && selectedClassInfo.length > 0) {
-			  this.classinfo=selectedClassInfo
-		    // Remove duplicates from this.classinfo
-		//     this.classinfo = this.classinfo.filter(item => !selectedClassInfo.some(selectedItem => selectedItem.id === item.id));
-		
-		//     // Add non-duplicate items from selectedClassInfo to this.classinfo
-		//     this.classinfo = this.classinfo.concat(selectedClassInfo);
-			
-		  }
-		  const selectedstuInfo = uni.getStorageSync('selectedStuInfo');
-		  
-		  if (selectedstuInfo && selectedstuInfo.length > 0) {
-			   this.stuinfo=selectedstuInfo
-		    // Remove duplicates from this.classinfo
-		    // this.stuinfo = this.stuinfo.filter(item => !selectedstuInfo.some(selectedItem => selectedItem.id === item.id));
-		  		
-		    // // Add non-duplicate items from selectedClassInfo to this.classinfo
-		    // this.stuinfo = this.stuinfo.concat(selectedstuInfo);
-		  	
-		  }
-		},
-		methods:{
-			delcls(id){
-				 this.classinfo = this.classinfo.filter(item => item.id !== id);
-			},
-			delstu(id){
-				 this.stuinfo = this.stuinfo.filter(item => item.id !== id);
-			},
-			toaddstu(){
-				uni.navigateTo({
-				 url: "/pages_teacher/pages_add/add_studentsforwork?stuinfo=" + encodeURIComponent(JSON.stringify(this.stuinfo))
-				 
-				}).then(res => {
-				 
-				}).catch(err => { 
-				
+
+				groupedItems[examName].message.push({
+					test: item.test,
+					task: item.task,
+					id: item.id
 				});
-			},
-			addclass(){
-				uni.navigateTo({
-				 url: "/pages/Mystudent/addclassforwork?classinfo=" + encodeURIComponent(JSON.stringify(this.classinfo))
-				}).then(res => {
-				 
-				}).catch(err => { 
-				
-				});
-			},
-			
-			// 获取截止时间
-			 printValue(e){
-				 this.times=`${e.year}-${e.month}-${e.day}`
-			 },
-			 submit() {
-			 			
-			}
+			});
+
+			// Convert groupedItems object to an array
+			this.selectwritelist = Object.values(groupedItems);
+
+			console.log(this.selectwritelist, 'selectwritelist');
+			// Remove duplicates from this.classinfo
+			// this.stuinfo = this.stuinfo.filter(item => !selectedstuInfo.some(selectedItem => selectedItem.id === item.id));
+
+			// // Add non-duplicate items from selectedClassInfo to this.classinfo
+			// this.stuinfo = this.stuinfo.concat(selectedstuInfo);
+
+		}
+
+	},
+	methods: {
+		mergeObjectsByExamName(existingArray, newArray) {
+			const mergedArray = [];
+
+			newArray.forEach(newObj => {
+				const existingObjIndex = existingArray.findIndex(existingObj => existingObj.examName === newObj.examName);
+
+				if (existingObjIndex !== -1) {
+					// 如果存在相同的 examName，则合并对象
+					const existingObj = existingArray[existingObjIndex];
+					existingObj.message.push({
+						test: newObj.test,
+						task: newObj.task,
+						id: newObj.id,
+						// 其他属性...
+					});
+
+					// 更新数组中的对象
+					existingArray[existingObjIndex] = existingObj;
+				} else {
+					// 如果不存在相同的 examName，则直接添加新对象
+					mergedArray.push({
+						examName: newObj.examName,
+						message: [{
+							test: newObj.test,
+							task: newObj.task,
+							id: newObj.id,
+							// 其他属性...
+						}],
+						// 其他属性...
+					});
+				}
+			});
+
+			// 添加 existingArray 中未处理的对象
+			existingArray.forEach(existingObj => {
+				const existingObjIndex = mergedArray.findIndex(obj => obj.examName === existingObj.examName);
+				if (existingObjIndex === -1) {
+					mergedArray.push(existingObj);
+				}
+			});
+
+			return mergedArray;
+		},
+		addwork() {
+			uni.navigateTo({
+				url: "/pages_teacher/teacher_teachers/teacher_writeadd?classinfo=" + encodeURIComponent(JSON.stringify(this.classinfo))
+			}).then(res => {
+
+			}).catch(err => {
+
+			});
+		},
+		delcls(id) {
+			this.classinfo = this.classinfo.filter(item => item.id !== id);
+		},
+		delstu(id) {
+			this.stuinfo = this.stuinfo.filter(item => item.id !== id);
+		},
+		toaddstu() {
+			uni.navigateTo({
+				url: "/pages_teacher/pages_add/add_studentsforwork?stuinfo=" + encodeURIComponent(JSON.stringify(this.stuinfo))
+
+			}).then(res => {
+
+			}).catch(err => {
+
+			});
+		},
+		addclass() {
+			uni.navigateTo({
+				url: "/pages/Mystudent/addclassforwork?classinfo=" + encodeURIComponent(JSON.stringify(this
+					.classinfo))
+			}).then(res => {
+
+			}).catch(err => {
+
+			});
+		},
+
+		// 获取截止时间
+		printValue(e) {
+			this.times = `${e.year}-${e.month}-${e.day}`
+		},
+		submit() {
+
 		}
 	}
+}
 </script>
 <style lang="scss" scoped>
-	// 样式穿透
-	::v-deep .u-dot {
-	   background: #2D7CE6 !important;
-	}  
-	.concent {
-		width: 100vw;
-		background: linear-gradient(183deg, #F0F6FF 0%, #FAFAFA 100%);
-	}
+.botbtn {
+	padding: 32rpx 32rpx 0 32rpx;
+	// margin-left: -32rpx;
+	position: fixed;
+	bottom: 0;
+	width: 750rpx;
+	height: 200rpx;
+	background: #FFFFFF;
+	box-shadow: 0rpx -10rpx 16rpx 0rpx rgba(202, 202, 202, 0.25);
+	border-radius: 40rpx 40rpx 0rpx 0rpx;
+	z-index: 999;
 
-	.view_body {
-		width: 91.3%;
-		margin: 0 auto;
-	}
-
-	.view_title {
+	.btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
 		font-size: 28rpx;
-		font-family: 'PingFang';
+		font-family: 'PingFang', 'PingFang';
 		font-weight: 800;
-		color: #2E4975;
-	}
-
-	.view_input {
-		line-height: 70rpx;
-		background: #FFFFFF;
-		border-radius: 20rpx 20rpx 20rpx 20rpx;
-		margin-top: 16rpx;
-		padding: 0 24rpx;
-	}
-
-	.view_tubiao {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		margin-top: 46rpx;
-		.view_tb{
-			display: flex;
-			padding-left: 24rpx;
-			// align-items: center;
-			// padding: 11rpx  24rpx 11rpx 24rpx;
-			width: 120rpx;
-			height: 52rpx;
-			background: #FFFFFF;
-			border-radius: 26rpx 26rpx 26rpx 26rpx;
-			
-			border: 2rpx solid #F1F1F1;
-			
-			color: #F18F21 ;
-			font-size: 30rpx;
-		}
-	}
-	.noting{
-		display: flex;
-		flex-wrap: nowrap;
-		align-items: center;
-		justify-content: center;
-		margin-top: 16rpx;
+		color: #FFFFFF;
 		width: 686rpx;
-		height: 124rpx;
-		background: #FFFFFF;
-		border-radius: 20rpx 20rpx 20rpx 20rpx;
-		image{
-			width: 58.19rpx;
-			height: 60rpx;
-		}
-		.text1{
-			margin-left: 12rpx;
-			font-size: 24rpx;
-			font-family: PingFang SC, PingFang SC;
-			font-weight: 500;
-			color: #627698;
-		}
-		.text2{
-			margin-left: 12rpx;
-			font-size: 24rpx;
-			font-family: PingFang SC, PingFang SC;
-			font-weight: 500;
-			color: #2D7CE6;
-			border-bottom: 2px solid #2D7CE6;
-		}
-	}
-	.class_bj {
-		margin-top: 16rpx;
-	}
-
-	.class_images {
-		display: flex;
-		flex-wrap: wrap;
-		// justify-content: space-between;
-		// margin-top: 20rpx;
-	}
-
-	.class_tp {
-		width: 56rpx;
-		height: 56rpx;
-		margin-right: 12rpx;
-	}
-	.Ielts{
-		font-size: 40rpx;
-		font-weight: 400;
-		color: #2E4975;
-		margin: 20rpx 0;
-	}
-	.class_ys:nth-child(3n) {
-		margin-right: 0;
-	}
-	.class_ys {
-		margin-top: 20rpx;
-		margin-right: 20rpx;
-		width: 215rpx;
-		height: 96rpx;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		padding: 20rpx;
-		// width: 215rpx;
-		height: 96rpx;
-		background: #FFFFFF;
-		border-radius: 20rpx 20rpx 20rpx 20rpx;
-	}
-	
-
-	.class_wz {
-	  width: 125rpx;
-	  font-size: 28rpx;
-	  font-family: 'PingFang';
-	  font-weight: 500;
-	  color: #072F5A;
-	  overflow: hidden;
-	  white-space: nowrap;
-	  text-overflow: ellipsis;
-	}
-	.view_form{
-		padding: 0rpx 32rpx;
-		background: #FFFFFF;
-		margin-top: 16rpx;
-		border-radius: 20rpx 20rpx 20rpx 20rpx;
-	}
-	.view_textrea{
-		height: 260rpx;
-		background: #FFFFFF;
-		border-radius: 20rpx 20rpx 20rpx 20rpx;;
-		margin-top:16rpx;
-		padding: 28rpx 32rpx;
-	}
-	.view_button{
-		width: 93.1%;
-		margin:auto;
-		text-align: center;
-		line-height: 80rpx;
+		height: 80rpx;
 		background: linear-gradient(180deg, #74AFFF 0%, #2D7CE6 100%);
 		border-radius: 104rpx 104rpx 104rpx 104rpx;
-		color: #FFFFFF;
 	}
-	.view_footer{
-		width: 100%;
-		padding: 0 16rpx;
-		height: 144rpx;
-		border-radius: 40rpx 40rpx 0rpx 0rpx;
-		padding: 32rpx 0rpx;
-		background-color: #fff;
-		box-shadow: 0rpx -10rpx 16rpx 0rpx rgba(202,202,202,0.25);
-		margin-top: 8rpx;
+}
+
+// 样式穿透
+::v-deep .u-dot {
+	background: #2D7CE6 !important;
+}
+
+.concent {
+	width: 100vw;
+	background: linear-gradient(183deg, #F0F6FF 0%, #FAFAFA 100%);
+}
+
+.view_body {
+	width: 91.3%;
+	margin: 0 auto;
+}
+
+.view_title {
+	font-size: 28rpx;
+	font-family: 'PingFang';
+	font-weight: 800;
+	color: #2E4975;
+}
+
+.view_input {
+	line-height: 70rpx;
+	background: #FFFFFF;
+	border-radius: 20rpx 20rpx 20rpx 20rpx;
+	margin-top: 16rpx;
+	padding: 0 24rpx;
+}
+
+.view_tubiao {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-top: 46rpx;
+
+	.view_tb {
+		display: flex;
+		padding-left: 24rpx;
+		// align-items: center;
+		// padding: 11rpx  24rpx 11rpx 24rpx;
+		width: 120rpx;
+		height: 52rpx;
+		background: #FFFFFF;
+		border-radius: 26rpx 26rpx 26rpx 26rpx;
+
+		border: 2rpx solid #F1F1F1;
+
+		color: #F18F21;
+		font-size: 30rpx;
 	}
-	.u-node {
-			width: 44rpx;
-			height: 44rpx;
-			border-radius: 100rpx;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			background: #d0d0d0;
-		}
-		.u-order-desc {
-			padding: 20rpx;
-			background: #F9F9F9;
-			border-radius: 20rpx 20rpx 20rpx 20rpx;
-			margin: 12rpx 0rpx;
-			text {
-				font-size: 24rpx;
-				font-weight: 500;
-				color: #2E4975;
-			}
-		}
-		
-		.u-order-time {
-			color: rgb(200, 200, 200);
-			font-size: 26rpx;
-		}
-		.yuandi{
-			width: 18rpx;
-			height: 18rpx;
-			background: #2D7CE6;
-			border-radius: 24rpx 24rpx 24rpx 24rpx;
-		}
-		.Test{
-			font-size: 28rpx;
-			font-weight: 800;
-			color: #2E4975;
-			margin-left: 12rpx;
-		}
-		.ellipses{
-			font-size: 20rpx;
-		background: rgba(242,170,2,0.2);
-			margin-left: 12rpx;
-			padding: 8rpx 20rpx;
-			color: #F2AA02;
-			border-radius: 20rpx 20rpx 20rpx 20rpx;
-		}
-		.erotic{
-			font-size: 20rpx;
-		background: rgba(242,63,170,0.1);
-				margin-left: 12rpx;
-				padding: 8rpx 20rpx;
-				color: #F23FEB;
-				border-radius: 20rpx 20rpx 20rpx 20rpx;
-		}
-		.greener{
-			font-size: 20rpx;
-		background: rgba(27,225,178,0.1);
-					margin-left: 12rpx;
-					padding: 8rpx 20rpx;
-					color: #1BE1B2;
-					border-radius: 20rpx 20rpx 20rpx 20rpx;
-		}
-		.increase{
-			padding: 26rpx 125rpx;
-			color: #FFFFFF;
-			background-color: #F39852;
-			border-radius: 20rpx 20rpx 20rpx 20rpx;
-			text-align: center;
-		}
-		
-</style>
+}
+
+.noting {
+	display: flex;
+	flex-wrap: nowrap;
+	align-items: center;
+	justify-content: center;
+	margin-top: 16rpx;
+	width: 686rpx;
+	height: 124rpx;
+	background: #FFFFFF;
+	border-radius: 20rpx 20rpx 20rpx 20rpx;
+
+	image {
+		width: 58.19rpx;
+		height: 60rpx;
+	}
+
+	.text1 {
+		margin-left: 12rpx;
+		font-size: 24rpx;
+		font-family: PingFang SC, PingFang SC;
+		font-weight: 500;
+		color: #627698;
+	}
+
+	.text2 {
+		margin-left: 12rpx;
+		font-size: 24rpx;
+		font-family: PingFang SC, PingFang SC;
+		font-weight: 500;
+		color: #2D7CE6;
+		border-bottom: 2px solid #2D7CE6;
+	}
+}
+
+.class_bj {
+	margin-top: 16rpx;
+}
+
+.class_images {
+	display: flex;
+	flex-wrap: wrap;
+	// justify-content: space-between;
+	// margin-top: 20rpx;
+}
+
+.class_tp {
+	width: 56rpx;
+	height: 56rpx;
+	margin-right: 12rpx;
+}
+
+.Ielts {
+	font-size: 40rpx;
+	font-weight: 400;
+	color: #2E4975;
+	margin: 20rpx 0;
+}
+
+.class_ys:nth-child(3n) {
+	margin-right: 0;
+}
+
+.class_ys {
+	margin-top: 20rpx;
+	margin-right: 20rpx;
+	width: 215rpx;
+	height: 96rpx;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	padding: 20rpx;
+	// width: 215rpx;
+	height: 96rpx;
+	background: #FFFFFF;
+	border-radius: 20rpx 20rpx 20rpx 20rpx;
+}
+
+
+.class_wz {
+	width: 125rpx;
+	font-size: 28rpx;
+	font-family: 'PingFang';
+	font-weight: 500;
+	color: #072F5A;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+
+.view_form {
+	padding: 0rpx 32rpx;
+	background: #FFFFFF;
+	margin-top: 16rpx;
+	border-radius: 20rpx 20rpx 20rpx 20rpx;
+}
+
+.view_textrea {
+	height: 260rpx;
+	background: #FFFFFF;
+	border-radius: 20rpx 20rpx 20rpx 20rpx;
+	;
+	margin-top: 16rpx;
+	padding: 28rpx 32rpx;
+}
+
+.view_button {
+	width: 93.1%;
+	margin: auto;
+	text-align: center;
+	line-height: 80rpx;
+	background: linear-gradient(180deg, #74AFFF 0%, #2D7CE6 100%);
+	border-radius: 104rpx 104rpx 104rpx 104rpx;
+	color: #FFFFFF;
+}
+
+.view_footer {
+	width: 100%;
+	padding: 0 16rpx;
+	height: 144rpx;
+	border-radius: 40rpx 40rpx 0rpx 0rpx;
+	padding: 32rpx 0rpx;
+	background-color: #fff;
+	box-shadow: 0rpx -10rpx 16rpx 0rpx rgba(202, 202, 202, 0.25);
+	margin-top: 8rpx;
+}
+
+.u-node {
+	width: 44rpx;
+	height: 44rpx;
+	border-radius: 100rpx;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	background: #d0d0d0;
+}
+
+.u-order-desc {
+	display: block;
+	// flex-wrap: nowrap;
+	padding: 20rpx;
+	background: #F9F9F9;
+	border-radius: 20rpx 20rpx 20rpx 20rpx;
+	margin: 12rpx 0rpx;
+
+	.txt {
+
+		font-size: 24rpx;
+		font-weight: 500;
+		color: #2E4975;
+	}
+}
+
+.u-order-time {
+	color: rgb(200, 200, 200);
+	font-size: 26rpx;
+}
+
+.yuandi {
+	width: 18rpx;
+	height: 18rpx;
+	background: #2D7CE6;
+	border-radius: 24rpx 24rpx 24rpx 24rpx;
+}
+
+.Test {
+	font-size: 28rpx;
+	font-weight: 800;
+	color: #2E4975;
+	margin-left: 12rpx;
+}
+
+.ellipses {
+	font-size: 20rpx;
+	background: rgba(242, 170, 2, 0.2);
+	margin-left: 12rpx;
+	padding: 8rpx 20rpx;
+	color: #F2AA02;
+	border-radius: 20rpx 20rpx 20rpx 20rpx;
+}
+
+.erotic {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 80rpx;
+	height: 36rpx;
+	font-size: 20rpx;
+	background: rgba(242, 63, 170, 0.1);
+	margin-left: 12rpx;
+	// padding: 8rpx 20rpx;
+	color: #F23FEB;
+	border-radius: 20rpx 20rpx 20rpx 20rpx;
+}
+
+.greener {
+	font-size: 20rpx;
+	background: rgba(27, 225, 178, 0.1);
+	margin-left: 12rpx;
+	padding: 8rpx 20rpx;
+	color: #1BE1B2;
+	border-radius: 20rpx 20rpx 20rpx 20rpx;
+}
+
+.increase {
+	padding: 26rpx 125rpx;
+	color: #FFFFFF;
+	background-color: #F39852;
+	border-radius: 20rpx 20rpx 20rpx 20rpx;
+	text-align: center;
+}
+</style>
\ No newline at end of file
diff --git a/pages_teacher/teacher_teachers/teacher_writeadd.vue b/pages_teacher/teacher_teachers/teacher_writeadd.vue
index eef2e3e..95eb75c 100644
--- a/pages_teacher/teacher_teachers/teacher_writeadd.vue
+++ b/pages_teacher/teacher_teachers/teacher_writeadd.vue
@@ -1,72 +1,231 @@
 <template>
 	<view class="view_template">
 		<view class="view_body">
-			<u-navbar :is-back="true" title='添加作业' title-color="#000" :border-bottom="false" :background="true" id="navbar">
+			<u-navbar :is-back="true"
+					  title='添加作业'
+					  title-color="#000"
+					  :border-bottom="false"
+					  :background="true"
+					  id="navbar">
 			</u-navbar>
 			<!-- 搜索 -->
-			<view class="view_search" v-if="search">
-				<u-search :show-action="false" :animation="true" bg-color="#fff" placeholder="搜索相关内容..." color="#3E97FF"></u-search>
+			<view class="view_search"
+				  v-if="search">
+				<u-search v-model="searchKeyword"
+						  :show-action="false"
+						  :animation="true"
+						  bg-color="#fff"
+						  placeholder="搜索相关内容..."
+						  color="#3E97FF"
+						  @input="searchs()"></u-search>
 			</view>
+			<!-- <view class="serchbox">
+				<view class="serchimg">
+					<image src="https://file.langsi.online/yasiimg/web/static/uVMACkynkipOxuTYDqm0">
+
+					</image>
+				</view>
+				<input type="text"
+					   v-model="searchKeyword"
+					   placeholder="搜索相关内容..."
+					   class="input"
+					   placeholder-style="color:#C7CDD3"
+					   @input="search()">
+			</view> -->
 			<!--导航栏 -->
 			<view class="view_tabs">
-				<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" active-color="#2D7CE6" bg-color="0"></u-tabs>
+				<u-tabs :list="list"
+						:is-scroll="false"
+						:current="current"
+						@change="change"
+						active-color="#2D7CE6"
+						bg-color="0"></u-tabs>
 			</view>
 			<!-- 轮播图 -->
-			<swiper :interval="5000" :duration="1000" is-scroll="true" :current="current" @change="updateCurrent" class="swiper">
+			<swiper :interval="5000"
+					:duration="1000"
+					is-scroll="true"
+					:current="current"
+					@change="updateCurrent"
+					class="swiper">
 				<!-- 口语 -->
 				<swiper-item style="height: 300rpx;">
 					<view>
 						<view class="view_left">
-							<view class="view_left_pd" @click="arrow_xl">
+							<view class="view_left_pd"
+								  @click="arrow_xl">
 								<view class="pull_down">
-									<view>{{selectedOption}}</view>
-									<u-icon name="arrow-down" size="22"></u-icon>
+									<view>{{ selectedOption }}</view>
+									<u-icon name="arrow-down"
+											size="22"></u-icon>
 								</view>
-								<view class="pull_Down" v-if="arrow">
-									<view v-for="(item,index) in options" :key="index" @click="arrow_options(item.id)">{{item.name}}</view>
+								<view class="pull_Down"
+									  v-if="arrow">
+									<view v-for="(item, index) in options"
+										  :key="index"
+										  @click="arrow_options(item.id)">{{ item.name }}</view>
 								</view>
 							</view>
 						</view>
 						<!-- 口语主体 -->
-						<view v-for="(item,index) in slander" :key="index">
+						<view v-for="(item, index) in slanderpart1" v-if="selectedOption=='Part1'"
+							  :key="index">
 							<view class="view_inuygs">
 								<view class="header_part">
-									<view class="unite">{{item.label}}</view>
+									<view class="unite">{{ item.label }}</view>
 								</view>
-								<view class="bottom_one" v-if="part2">
-											<view :class="{'active': item.active === '串题'}" @click="clicking(item, '串题')">串题</view>
-									        <view :class="{'active': item.active === '跟读'}" @click="clicking(item, '跟读')">跟读</view>
-									        <view :class="{'active': item.active === '模考'}" @click="clicking(item, '模考')">模考</view>
+								<view class="bottom_one"
+									  v-if="item.list.length <= 1"
+									  v-for="(items, indexs) in item.list"
+									  :key='indexs'>
+									<view :class="{ 'active': items.ischuanti === true }"
+										  @click="updateSelectspeak(items, 'ischuanti', indexs)">串题</view>
+									<view :class="{ 'active': items.isgendu === true }"
+										  @click="updateSelectspeak(items, 'isgendu', indexs)">跟读</view>
+									<view :class="{ 'active': items.ismk === true }"
+										  @click="updateSelectspeak(items, 'ismk', indexs)">模考</view>
 								</view>
 							</view>
-						
-								<!-- part1-->
-								<view class="slander_for"  v-if="grizzly">
-									<view class="slander_of" v-for="(items,indexs) in item.list" :key='indexs'>
-										<view class="textual">
-											{{items.topicEn}}
-										</view>
-										<view class="bottom_one">
-											<view :class="{'active': items.active === '串题'}" @click="clicking(items, '串题')">串题</view>
-											<view :class="{'active': items.active === '跟读'}" @click="clicking(items, '跟读')">跟读</view>
-											<view :class="{'active': items.active === '模考'}" @click="clicking(items, '模考')">模考</view>
-										</view>
+
+							<!-- part1-->
+							<view class="slander_for"
+								  v-if="item.list.length > 1">
+								<view class="slander_of"
+									  v-for="(items, indexs) in item.list"
+									  :key='indexs'>
+									<view class="textual" v-html="highlightSearch( items.topicEn)">
+										
+									</view>
+									<view class="bottom_one">
+										<view :class="{ 'active': items.ischuanti === true }"
+											  @click="updateSelectspeak(items, 'ischuanti', indexs)">串题</view>
+										<view :class="{ 'active': items.isgendu === true }"
+											  @click="updateSelectspeak(items, 'isgendu', indexs)">跟读</view>
+										<view :class="{ 'active': items.ismk === true }"
+											  @click="updateSelectspeak(items, 'ismk', indexs)">模考</view>
 									</view>
 								</view>
-								<!-- part2-->
-								<view class="slander_for" v-if="part2">
-									<view class="slander_of" v-for="(items,indexs) in item.list" :key='indexs'>
-										<view class="textual2">
-											{{items.topicEn}}
-										</view>
+							</view>
+							<!-- part2-->
+							<view class="slander_for"
+								  v-if="item.list.length <= 1">
+								<view class="slander_of"
+									  v-for="(items, indexs) in item.list"
+									  :key='indexs'>
+									<view class="textual2" v-html="highlightSearch( items.topicEn)">
+										
 									</view>
 								</view>
+							</view>
+						</view>
+						<!-- part2 -->
+						<view v-for="(item, index) in slanderpart2" v-if="selectedOption=='Part2'"
+							  :key="index">
+							<view class="view_inuygs">
+								<view class="header_part">
+									<view class="unite">{{ item.label }}</view>
+								</view>
+								<view class="bottom_one"
+									  v-if="item.list.length <= 1"
+									  v-for="(items, indexs) in item.list"
+									  :key='indexs'>
+									<view :class="{ 'active': items.ischuanti === true }"
+										  @click="updateSelectspeak(items, 'ischuanti', indexs)">串题</view>
+									<view :class="{ 'active': items.isgendu === true }"
+										  @click="updateSelectspeak(items, 'isgendu', indexs)">跟读</view>
+									<view :class="{ 'active': items.ismk === true }"
+										  @click="updateSelectspeak(items, 'ismk', indexs)">模考</view>
+								</view>
+							</view>
+
+							<!-- part1-->
+							<view class="slander_for"
+								  v-if="item.list.length > 1">
+								<view class="slander_of"
+									  v-for="(items, indexs) in item.list"
+									  :key='indexs'>
+									<view class="textual" v-html="highlightSearch( items.topicEn)">
+										
+									</view>
+									<view class="bottom_one">
+										<view :class="{ 'active': items.ischuanti === true }"
+											  @click="updateSelectspeak(items, 'ischuanti', indexs)">串题</view>
+										<view :class="{ 'active': items.isgendu === true }"
+											  @click="updateSelectspeak(items, 'isgendu', indexs)">跟读</view>
+										<view :class="{ 'active': items.ismk === true }"
+											  @click="updateSelectspeak(items, 'ismk', indexs)">模考</view>
+									</view>
+								</view>
+							</view>
+							<!-- part2-->
+							<view class="slander_for"
+								  v-if="item.list.length <= 1">
+								<view class="slander_of"
+									  v-for="(items, indexs) in item.list"
+									  :key='indexs'>
+									<view class="textual2" v-html="highlightSearch( items.topicEn)">
+										
+									</view>
+								</view>
+							</view>
+						</view>
+						<!-- part3 -->
+						<view v-for="(item, index) in slanderpart3" v-if="selectedOption=='Part3'"
+							  :key="index">
+							<view class="view_inuygs">
+								<view class="header_part">
+									<view class="unite">{{ item.label }}</view>
+								</view>
+								<view class="bottom_one"
+									  v-if="item.list.length <= 1"
+									  v-for="(items, indexs) in item.list"
+									  :key='indexs'>
+									<view :class="{ 'active': items.ischuanti === true }"
+										  @click="updateSelectspeak(items, 'ischuanti', indexs)">串题</view>
+									<view :class="{ 'active': items.isgendu === true }"
+										  @click="updateSelectspeak(items, 'isgendu', indexs)">跟读</view>
+									<view :class="{ 'active': items.ismk === true }"
+										  @click="updateSelectspeak(items, 'ismk', indexs)">模考</view>
+								</view>
+							</view>
+
+							<!-- part1-->
+							<view class="slander_for"
+								  v-if="item.list.length > 1">
+								<view class="slander_of"
+									  v-for="(items, indexs) in item.list"
+									  :key='indexs'>
+									<view class="textual" v-html="highlightSearch( items.topicEn)">
+										
+									</view>
+									<view class="bottom_one">
+										<view :class="{ 'active': items.ischuanti === true }"
+											  @click="updateSelectspeak(items, 'ischuanti', indexs)">串题</view>
+										<view :class="{ 'active': items.isgendu === true }"
+											  @click="updateSelectspeak(items, 'isgendu', indexs)">跟读</view>
+										<view :class="{ 'active': items.ismk === true }"
+											  @click="updateSelectspeak(items, 'ismk', indexs)">模考</view>
+									</view>
+								</view>
+							</view>
+							<!-- part2-->
+							<view class="slander_for"
+								  v-if="item.list.length <= 1">
+								<view class="slander_of"
+									  v-for="(items, indexs) in item.list"
+									  :key='indexs'>
+									<view class="textual2" v-html="highlightSearch( items.topicEn)">
+										
+									</view>
+								</view>
+							</view>
 						</view>
 					</view>
 				</swiper-item>
+				
 				<!-- 写作 -->
 				<swiper-item>
-					
+
 					<compose></compose>
 				</swiper-item>
 				<!--听力  -->
@@ -80,531 +239,724 @@
 			</swiper>
 		</view>
 		<!-- 底部按钮 -->
-		<view :class="search== true ?  'footer2' : 'footer'">
-			<view class="footer_button">
-				<view :class="search==true  ? 'button_andadd' :'button_show'">确定添加（4）</view>
-				<view class="footer_button_right" v-if="search">口语模考</view>
+		<view :class="search == true ? 'footer2' : 'footer'"
+			  v-if="totalLength != 0">
+			<view class="footer_button" @click="submessage()">
+				<view :class="search == true ? 'button_andadd' : 'button_show'">确定添加（{{ totalLength }}）</view>
+				<view class="footer_button_right"
+					  v-if="search">口语模考</view>
 			</view>
 		</view>
 	</view>
-	</view>
-</template>
+</view></template>
 
 <script>
-	import audiology from './components/audiology.vue'
-	import reading from './components/reading.vue'
-	import slander from './components/slander.vue'
-	import compose from './components/compose.vue'
-	export default {
-		data() {
-			return {
-				// 导航栏
-				list: [{
-						name: '口语'
-					},
-					{
-						name: '写作'
-					},
-					{
-						name: '听力'
-					},
-					{
-						name: '阅读'
-					}
-				],
-				radio: [{
-					name: '1',
-					disabled: false
-				}],
-				// 写作
-				Compose: [],
-				num:0,
-				// 下拉框的v-if布尔值
-				radioValue: '',
-				part1: true,
-				current: 0,
-				search: true,
-				listType: [],
-				idList: [],
-				// 口语
-				postdata: {
-					"key": "",
-					"pageNum": 0,
-					"mode": "home",
-					"part": "part1",
-					"order": "0",
-					"type": "",
-					"isStudy": 0,
-					"isFavorite": 0,
-					"isEvlua": 0,
-					"isFun": 0,
-					"level": 0,
-					"isNew": 0
-				},
-				slander: [],
-				part2:false,
-				grizzly:true,
-				categorize: '分类',
-				// 下拉框的v-if布尔值
-				selectedOption: 'Part1',
-				arrow: false,
-				arrowDown: false,
-				options: [{
-						id: 1,
-						name: 'Part1'
-					},
-					{
-						id: 2,
-						name: 'Part2'
-					},
-					{
-						id: 3,
-						name: 'Part3'
-					}
-				],
-				userId:null
+import audiology from './components/audiology.vue'
+import reading from './components/reading.vue'
+import slander from './components/slander.vue'
+import compose from './components/compose.vue'
+export default {
+	data() {
+		return {
+			// 导航栏
+			list: [{
+				name: '口语'
+			},
+			{
+				name: '写作'
+			},
+			{
+				name: '听力'
+			},
+			{
+				name: '阅读'
 			}
-		},
-		components:{
-			audiology,
-			reading,
-			compose
-		},
-		created() {
-			this.getList()
-		},
-		methods: {
-			upType(index, num) {
-				this.listType.splice(index, 1, num)
+			],
+			radio: [{
+				name: '1',
+				disabled: false
+			}],
+			// 写作
+			Compose: [],
+			num: 0,
+			// 下拉框的v-if布尔值
+			radioValue: '',
+			part1: true,
+			current: 1,
+			search: true,
+			listType: [],
+			idList: [],
+			// 口语
+			postdata: {
+				"key": "",
+				"pageNum": 0,
+				"mode": "home",
+				"part": "part1",
+				"order": "0",
+				"type": "",
+				"isStudy": 0,
+				"isFavorite": 0,
+				"isEvlua": 0,
+				"isFun": 0,
+				"level": 0,
+				"isNew": 0
 			},
-			change(index) {
-				this.current = index;
+			slanderpart1: [],
+			originslanderpart1: [],
+			slanderpart2: [],
+			originslanderpart2: [],
+			slanderpart3: [],
+			originslanderpart3: [],
+			part2: false,
+			grizzly: true,
+			categorize: '分类',
+			// 下拉框的v-if布尔值
+			selectedOption: 'Part1',
+			arrow: false,
+			arrowDown: false,
+			options: [{
+				id: 1,
+				name: 'Part1'
 			},
-			// 选中某个单选框时，由radio时触发
-			radioCheck(index) {
-				if (this.radioValue == this.list2[index].id) {
-					this.radioValue = null
-				} else {
-					this.radioValue = this.list2[index].id
-				}
+			{
+				id: 2,
+				name: 'Part2'
 			},
-			//轮播图滑动和tabs保持一致
-			updateCurrent(current, source) {
-				this.current = current.detail.current
-				if (this.current == 0) {
-					this.search = true
-				} else {
-					this.search = false
-				}
-			},
-			getList() {
-				this.$u.post('https://api.admin-v2.langsi.online/admin-api/speaking/topic/home/list', this.postdata).then(res => {
-					let keyArr = Object.keys(res.data)
-					let valueArr = Object.values(res.data)
-					this.slander = keyArr.map((item, index) => {
-						return {
-							label: item,
-							list: valueArr[index]
-						}
-					})
-				})
-			},
-			//下拉显示下拉框
-			arrow_xl() {
-				this.arrow = !this.arrow
-			},
-			arrow_xl2() {
-				this.arrowDown = !this.arrowDown
-			},
-			arrow_options(id) {
-				this.options.forEach(item => {
-					if (item.id == id) {
-						this.selectedOption = item.name
-			
-					} else if (id == 2) {
-						this.postdata.part = "part2"
-						this.part2=true
-						this.grizzly = false
-						this.getList()
-					} 
-					else if (id == 3) {
-						this.postdata.part = "part3"
-				this.part2=true
-				this.grizzly = false
-					this.getList()
-					}else {
-						this.postdata.part = "part1"
-						this.part2= false
-						this.grizzly = true
-						this.getList()
-					}
-				})
-			},
-			   clicking(target, type) {
-			      if (target.active === type) {
-			        this.$set(target, 'active', null);
-			      } else {
-			        this.$set(target, 'active', type);
-			      }
-			    },
-			radioGroupChange() {
+			{
+				id: 3,
+				name: 'Part3'
+			}
+			],
+			totalLength: 0,
+			searchKeyword: '',
+			userId: null,
+			selectspeak: [],
+			selectwrite: [],
+			selectlisten: [],
+			selectread: []
+		}
+	},
+	components: {
+		audiology,
+		reading,
+		compose
+	},
+	created() {
+		this.getList()
+	},
 
+	methods: {
+		updatawrite(data){
+			this.selectwrite=data
+			console.log(this.selectwrite, ' this.selectwrite this.selectwrite');
+			this.calculateTotalLength()
+		},
+		submessage(){
+			const dataToSave = {
+ 			  selectspeak: this.selectspeak,
+ 			  selectwrite: this.selectwrite,
+ 			  selectlisten: this.selectlisten,
+ 			  selectread: this.selectread
+ 			};
+
+ 			// 将数据保存在本地缓存中
+ 			uni.setStorageSync('selectforwork', dataToSave);
+			 uni.navigateBack({
+				delta: 1, // Number of pages to go back
+				success(res) {
+					console.log(res);
+				},
+				fail(err) {
+					console.error(err);
+				}
+				});
+		},
+		fuwei() {
+
+			// this.slander = JSON.parse(JSON.stringify(this.originslanderpart1));
+			// this.selectedIds.forEach(selectedItem => {
+			// 	const index = this.stulist.findIndex(item => item.id === selectedItem.id);
+			// 	if (index !== -1) {
+			// 		this.$set(this.stulist, index, { ...this.stulist[index], isSelected: true });
+			// 	}
+			// });
+		},
+		searchs() {
+			if(this.selectedOption=='Part1'){
+				const filteredSlander = [];
+
+			// 将搜索关键字转换为小写，使搜索不区分大小写
+			const searchKeywordLowerCase = this.searchKeyword.toLowerCase();
+
+			// 遍历原始数据
+			for (const item of this.originslanderpart1) {
+				const filteredList = item.list.filter(subItem => {
+					// 将目标字符串转换为小写，使匹配不区分大小写
+					const introductionLowerCase = subItem.introduction.toLowerCase();
+					const topicEnLowerCase = subItem.topicEn.toLowerCase();
+
+					// 检查 introduction 或 topicEn 是否包含小写的 searchKeyword
+					return (
+						introductionLowerCase.includes(searchKeywordLowerCase) ||
+						topicEnLowerCase.includes(searchKeywordLowerCase)
+					);
+				});
+
+				// 如果有匹配项，添加到 filteredSlander 中
+				if (filteredList.length > 0) {
+					filteredSlander.push({
+						label: item.label,
+						list: filteredList
+					});
+				}
 			}
+
+			// 更新 this.slander
+			this.slanderpart1 = filteredSlander;
+			}else if(this.selectedOption=='Part2'){
+				const filteredSlander = [];
+
+			// 将搜索关键字转换为小写，使搜索不区分大小写
+			const searchKeywordLowerCase = this.searchKeyword.toLowerCase();
+
+			// 遍历原始数据
+			for (const item of this.originslanderpart2) {
+				const filteredList = item.list.filter(subItem => {
+					// 将目标字符串转换为小写，使匹配不区分大小写
+					const introductionLowerCase = subItem.introduction.toLowerCase();
+					const topicEnLowerCase = subItem.topicEn.toLowerCase();
+
+					// 检查 introduction 或 topicEn 是否包含小写的 searchKeyword
+					return (
+						introductionLowerCase.includes(searchKeywordLowerCase) ||
+						topicEnLowerCase.includes(searchKeywordLowerCase)
+					);
+				});
+
+				// 如果有匹配项，添加到 filteredSlander 中
+				if (filteredList.length > 0) {
+					filteredSlander.push({
+						label: item.label,
+						list: filteredList
+					});
+				}
+			}
+
+			// 更新 this.slander
+			this.slanderpart2 = filteredSlander;
+			}else if(this.selectedOption=='Part3'){
+				const filteredSlander = [];
+
+			// 将搜索关键字转换为小写，使搜索不区分大小写
+			const searchKeywordLowerCase = this.searchKeyword.toLowerCase();
+
+			// 遍历原始数据
+			for (const item of this.originslanderpart3) {
+				const filteredList = item.list.filter(subItem => {
+					// 将目标字符串转换为小写，使匹配不区分大小写
+					const introductionLowerCase = subItem.introduction.toLowerCase();
+					const topicEnLowerCase = subItem.topicEn.toLowerCase();
+
+					// 检查 introduction 或 topicEn 是否包含小写的 searchKeyword
+					return (
+						introductionLowerCase.includes(searchKeywordLowerCase) ||
+						topicEnLowerCase.includes(searchKeywordLowerCase)
+					);
+				});
+
+				// 如果有匹配项，添加到 filteredSlander 中
+				if (filteredList.length > 0) {
+					filteredSlander.push({
+						label: item.label,
+						list: filteredList
+					});
+				}
+			}
+
+			// 更新 this.slander
+			this.slanderpart3 = filteredSlander;
+			}
+			
+			
+		},
+		highlightSearch(name) {
+			    // 使用正则表达式替换匹配到的 searchKeyword 为带有颜色的文字
+			    if (this.searchKeyword) {
+			      const regex = new RegExp(this.searchKeyword, 'gi');
+			      return name.replace(regex, match => `<span style="color: #2D7CE6 ;">${match}</span>`);
+			    }
+			    return name;
+			  },
+		calculateTotalLength() {
+			this.totalLength = this.selectspeak.length + this.selectwrite.length + this.selectlisten.length + this.selectread.length;
+
+		},
+		calculateTotal(array) {
+			return array.reduce((total, item) => {
+				// 假设每个元素都有一个名为value的属性
+				return total + (item.value || 0); // 如果value为undefined，将其视为0
+			}, 0);
+		},
+		updateSelectspeak(items, type, indexs) {
+			// 切换slander数组中的值
+			items[type] = !items[type];
+
+			// 获取对应的speakingType值
+			const speakingTypeValue = this.getSpeakingTypeValue(type);
+
+			// 检查selectspeak数组中是否已存在对应的对象
+			const existingSelectspeak = this.selectspeak.find(select => select.id === items.id);
+
+			if (existingSelectspeak) {
+				// 如果已存在，在speakingType中添加新的值或移除对应的值
+				if (items[type]) {
+					// 如果选中了该项，请添加speakingType
+					if (!existingSelectspeak.speakingType.includes(speakingTypeValue)) {
+						existingSelectspeak.speakingType.push(speakingTypeValue);
+					}
+				} else {
+					// 如果取消选中该项，请删除speakingType
+					existingSelectspeak.speakingType = existingSelectspeak.speakingType
+						.filter(value => value !== speakingTypeValue);
+
+					// 如果speakingType为空，则清除selectspeak项
+					if (existingSelectspeak.speakingType.length === 0) {
+						const indexToRemove = this.selectspeak.indexOf(existingSelectspeak);
+						this.selectspeak.splice(indexToRemove, 1);
+					}
+				}
+			} else {
+				// 如果不存在，创建新的对象并添加到selectspeak数组中
+				if (items[type]) {
+					this.selectspeak.push({
+						// part: indexs,
+						part: items.part,
+						topicEn: items.topicEn,
+						id: items.id,
+						introduction: items.introduction,
+						speakingType: [speakingTypeValue]
+					});
+				}
+			}
+			this.calculateTotalLength()
+			console.log(this.selectspeak, 'selectspeakselectspeak');
+		},
+		getSpeakingTypeValue(type) {
+			// 返回对应的数字值
+			switch (type) {
+				case 'ischuanti':
+					return '1';
+				case 'isgendu':
+					return '2';
+				case 'ismk':
+					return '3';
+				default:
+					return '';
+			}
+		},
+		upType(index, num) {
+			this.listType.splice(index, 1, num)
+		},
+		change(index) {
+			this.current = index;
+		},
+		// 选中某个单选框时，由radio时触发
+		radioCheck(index) {
+			if (this.radioValue == this.list2[index].id) {
+				this.radioValue = null
+			} else {
+				this.radioValue = this.list2[index].id
+			}
+		},
+		//轮播图滑动和tabs保持一致
+		updateCurrent(current, source) {
+			this.current = current.detail.current
+			if (this.current == 0) {
+				this.search = true
+			} else {
+				this.search = false
+			}
+		},
+		getList() {
+			let	postdata= {
+				"key": "",
+				"pageNum": 0,
+				"mode": "home",
+				"part": "part1",
+				"order": "0",
+				"type": "",
+				"isStudy": 0,
+				"isFavorite": 0,
+				"isEvlua": 0,
+				"isFun": 0,
+				"level": 0,
+				"isNew": 0
+			}
+			this.$u.post('https://api.admin-v2.langsi.online/admin-api/speaking/topic/home/list', postdata).then(res => {
+				if(res.code==0){
+					this.getpart2()
+				}
+				let keyArr = Object.keys(res.data)
+				let valueArr = Object.values(res.data)
+				this.slanderpart1 = keyArr.map((item, index) => {
+					return {
+						label: item,
+						list: valueArr[index]
+					}
+				})
+				this.originslanderpart1 = keyArr.map((item, index) => {
+					return {
+						label: item,
+						list: valueArr[index]
+					}
+				})
+				this.originslanderpart1part1 = JSON.parse(JSON.stringify(this.originslanderpart1part1));
+				let json = JSON.stringify(res.data)
+				// console.log(json);
+			})
+
+		
+
+			
+		},
+		getpart2(){
+			let	postdata1= {
+				"key": "",
+				"pageNum": 0,
+				"mode": "home",
+				"part": "part2",
+				"order": "0",
+				"type": "",
+				"isStudy": 0,
+				"isFavorite": 0,
+				"isEvlua": 0,
+				"isFun": 0,
+				"level": 0,
+				"isNew": 0
+			}
+			this.$u.post('https://api.admin-v2.langsi.online/admin-api/speaking/topic/home/list', postdata1).then(res => {
+				if(res.code==0){
+					this.getpart3()
+				}
+				let keyArr = Object.keys(res.data)
+				let valueArr = Object.values(res.data)
+				this.slanderpart2 = keyArr.map((item, index) => {
+					return {
+						label: item,
+						list: valueArr[index]
+					}
+				})
+				this.originslanderpart2 = keyArr.map((item, index) => {
+					return {
+						label: item,
+						list: valueArr[index]
+					}
+				})
+				this.originslanderpart2 = JSON.parse(JSON.stringify(this.originslanderpart2));
+				// let json = JSON.stringify(res.data)
+				
+			})
+		},
+		getpart3(){
+			let	postdata2= {
+				"key": "",
+				"pageNum": 0,
+				"mode": "home",
+				"part": "part3",
+				"order": "0",
+				"type": "",
+				"isStudy": 0,
+				"isFavorite": 0,
+				"isEvlua": 0,
+				"isFun": 0,
+				"level": 0,
+				"isNew": 0
+			}
+			this.$u.post('https://api.admin-v2.langsi.online/admin-api/speaking/topic/home/list', postdata2).then(res => {
+				let keyArr = Object.keys(res.data)
+				let valueArr = Object.values(res.data)
+				this.slanderpart3 = keyArr.map((item, index) => {
+					return {
+						label: item,
+						list: valueArr[index]
+					}
+				})
+				this.originslanderpart3 = keyArr.map((item, index) => {
+					return {
+						label: item,
+						list: valueArr[index]
+					}
+				})
+				this.originslanderpart3 = JSON.parse(JSON.stringify(this.originslanderpart3));
+				let json = JSON.stringify(res.data)
+				// console.log(json);
+			})
+		},
+		//下拉显示下拉框
+		arrow_xl() {
+			this.arrow = !this.arrow
+		},
+		arrow_xl2() {
+			this.arrowDown = !this.arrowDown
+		},
+		arrow_options(id) {
+			this.options.forEach(item => {
+				if (item.id == id) {
+					this.selectedOption = item.name
+
+				} else if (id == 2) {
+					this.postdata.part = "part2"
+					this.part2 = true
+					this.grizzly = false
+					
+				}
+				else if (id == 3) {
+					this.postdata.part = "part3"
+					this.part2 = true
+					this.grizzly = false
+				
+				} else {
+					this.postdata.part = "part1"
+					this.part2 = false
+					this.grizzly = true
+					
+				}
+			})
+		},
+		clicking(target, type) {
+
+		},
+		radioGroupChange() {
+
 		}
 	}
+}
 </script>
 
 <style lang="scss" scoped>
-	.view_template {
-		width: 100%;
-		background: linear-gradient(183deg, #F0F6FF 0%, #FAFAFA 100%);
+.view_template {
+	width: 100%;
+	background: linear-gradient(183deg, #F0F6FF 0%, #FAFAFA 100%);
+}
+
+.serchbox {
+	padding: 0 32rpx;
+	display: flex;
+	flex-wrap: nowrap;
+	margin-top: 30rpx;
+	align-items: center;
+	width: 686rpx;
+	height: 88rpx;
+	background: #FFFFFF;
+	border-radius: 20rpx 20rpx 20rpx 20rpx;
+
+	.serchimg {
+		width: 30.51rpx;
+		height: 32rpx;
+		margin-right: 24rpx;
 	}
 
-	.view_body {
-		height: 89vh;
-		width: 91.3%;
+	.input {
 		margin: 0 auto;
-		border-radius: 0rpx 0rpx 0rpx 0rpx;
-
-		// padding: 32rpx;
-		.view_search {
-			height: 88rpx;
-			margin: 0 auto;
-			line-height: 88rpx;
-			background: #FFFFFF;
-			border-radius: 20rpx 20rpx 20rpx 20rpx;
-
-		}
-		.view_button {
-			border-radius: 12rpx 12rpx 12rpx 12rpx;
-			padding: 12rpx 24rpx;
-			font-size: 20rpx;
-			font-weight: 500;
-			color: rgba(101, 116, 140, 0.8);
-		}
-
-		.view_buttons {
-			background: #2D7CE6;
-			border-radius: 12rpx 12rpx 12rpx 12rpx;
-			padding: 12rpx 24rpx;
-			font-size: 20rpx;
-			font-weight: 500;
-			color: #FFFFFF;
-		}
-
-		.view_fff {
-			background: #FFFFFF;
-			border-radius: 20rpx 20rpx 20rpx 20rpx;
-		}
-
-		.view_Do {
-			display: flex;
-			justify-content: space-between;
-			padding: 28rpx 0rpx;
-			margin: 0 28rpx;
-			border-bottom: 2rpx solid #F2F2F2;
-		}
-
-		.view_pushbutton {
-			display: flex;
-		}
-
-		.grizzly {
-			background: #E1EEFF;
-			border-radius: 8rpx 8rpx 8rpx 8rpx;
-			font-size: 20rpx;
-			font-weight: 500;
-			color: #2D7CE6;
-			padding: 6rpx 18rpx;
-			margin-left: 12rpx;
-		}
-
-		.yellow {
-			background: #FFEBD7;
-			border-radius: 8rpx 8rpx 8rpx 8rpx;
-			font-size: 20rpx;
-			font-weight: 500;
-			color: #FB9734;
-			padding: 6rpx 18rpx;
-			margin-left: 12rpx;
-		}
-
-		.view_English {
-			display: flex;
-			font-size: 24rpx;
-			font-weight: 500;
-			color: #2E4975;
-		}
-
-		 .active {
-			z-index: 9;
-			background:#2D7CE6;
-			color: #fff;
-		}
-
-		.slander {
-			height: 352rpx;
-			background: #FFFFFF;
-			border-radius: 20rpx 20rpx 20rpx 20rpx;
-		}
-
-		.slander_behavior {
-			display: flex;
-			justify-content: space-between;
-			padding: 20rpx 0rpx;
-			border-bottom: 2rpx solid #F2F2F2;
-		}
-
-		.slander_for {
-			background: #FFFFFF;
-			border-radius: 20rpx 20rpx 20rpx 20rpx;
-			padding: 0 30rpx;
-		}
-
-		.unite {
-			width: 270rpx;
-			font-size: 28rpx;
-			font-family: 'PingFang';
-			font-weight: 800;
-			color: #2E4975;
-			margin: 26rpx 0rpx;
-		}
-
-		.slander_an {
-			background: #F4F4F4;
-			border-radius: 12rpx 12rpx 12rpx 12rpx;
-			font-size: 20rpx;
-			font-family: 'PingFang';
-			font-weight: 500;
-			color: rgba(101, 116, 140, 0.8);
-			padding: 10rpx;
-			margin-right: 15rpx;
-		}
-
-		.pd_icon {
-			margin-left: 8rpx;
-		}
-
-		.highlighted {
-			
-			background: rgba(45, 124, 230, 0.1);
-			border-radius: 12rpx 12rpx 12rpx 12rpx;
-			color: #2D7CE6;
-		}
-
-		.part {
-			font-size: 28rpx;
-			font-family: 'PingFang';
-			font-weight: 500;
-			color: #2E4975;
-
-		}
-
-		.part2 {
-			font-size: 28rpx;
-			font-family: 'PingFang';
-			font-weight: 500;
-			color: #2E4975;
-			margin-left: 20rpx;
-
-		}
-
-		.swiper {
-			height: 80%;
-		}
-
-		swiper-item {
-			overflow: scroll;
-		}
-		.slander_left {
-			width: 328rpx;
-			text-overflow: ellipsis;
-			white-space: nowrap;
-			overflow: hidden
-		}
-		.view_left {
-			display: flex;
-			justify-content: left;
-			margin-top: 20rpx;
-		}
-		
-		.view_inuygs {
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-		}
-		
-		.view_left_pd {
-			position: relative;
-			padding: 12rpx 32rpx;
-			background: #FFFFFF;
-			border-radius: 20rpx 20rpx 20rpx 20rpx;
-			margin-right: 15rpx;
-			font-size: 24rpx;
-			color: #072F5A;
-		}
-		
-		.unite {
-			width: 290rpx;
-			display: -webkit-box;
-			-webkit-box-orient: vertical;
-			overflow: hidden;
-			-webkit-line-clamp: 1;
-			font-size: 28rpx;
-			font-family: 'PingFang';
-			font-weight: 800;
-			color: #2E4975;
-		
-			margin-right: 20rpx;
-		}
-		
-		.pull_Down {
-			position: absolute;
-			bottom: -184rpx;
-			left: 50%;
-			margin-left: -79rpx;
-			box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.25);
-			border-radius: 20rpx 20rpx 20rpx 20rpx;
-			background: #FFFFFF;
-			border-bottom: 2rpx solid #F2F2F2;
-		
-			view {
-				padding: 15rpx 50rpx;
-				border-bottom: 2rpx solid #F2F2F2;
-			}
-		}
-		
-		.pull_Down view:last-child {
-			border: none;
-		}
-		
-		.header_part {
-			display: flex;
-			align-items: center;
-			margin: 26rpx 0rpx;
-		}
-		
-		.slander_an {
-			padding: 6rpx 18rpx;
-			background: #fff;
-			border-radius: 12rpx 12rpx 12rpx 12rpx;
-			margin-left: 12rpx;
-			color: #65748C;
-		}
-		
-		.slander_for {
-			background-color: #fff;
-			border-radius: 20rpx 20rpx 20rpx 20rpx;
-			
-		}
-		
-		.slander_of {
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-			padding: 24rpx 0;
-			margin: 0 20rpx;
-			border-bottom: 2rpx solid #F2F2F2;
-			
-		}
-		
-		.textual {
-			width: 290rpx;
-			display: -webkit-box;
-			-webkit-box-orient: vertical;
-			overflow: hidden;
-			-webkit-line-clamp: 2;
-		}
-		
-		.bottom_one {
-			display: flex;
-			view {
-				padding: 6rpx 18rpx;
-				background: #F4F4F4;
-				border-radius: 12rpx 12rpx 12rpx 12rpx;
-				font-size: 20rpx;
-				font-weight: 500;
-				color: rgba(101,116,140,0.8);
-				margin-left: 15rpx;
-			}	
-			.active {
-				background: rgba(45, 124, 230, 0.1);
-				color: #2D7CE6;
-			}
-		}
-		.pull_down{
-			display: flex;
-			justify-content: space-between;
-			width: 100rpx;
-			font-size: 24rpx;
-		}
-		
-
+		width: 568rpx;
+		height: 88rpx;
+		border-radius: 30rpx;
+		// background-color: #f5f8fc;
+		// display: flex;
+		// justify-content: center;
+		// align-items: center;
+		// text-align: center;
+		font-size: 28rpx;
+		font-family: Source Han Sans CN, Source Han Sans CN-Light;
+		font-weight: 300;
+		text-align: left;
+		color: #a7b9cd;
+		letter-spacing: 1.2rpx;
+		line-height: 36rpx;
+		// padding: 0 100rpx;
+		// padding-right: 135rpx;
+		box-sizing: border-box;
 
 	}
+}
 
-	.footer {
-		position: fixed;
-		bottom: 0;
-		width: 100%;
+.view_body {
+	height: 89vh;
+	width: 91.3%;
+	margin: 0 auto;
+	border-radius: 0rpx 0rpx 0rpx 0rpx;
+
+	// padding: 32rpx;
+	.view_search {
+		height: 88rpx;
+		margin: 0 auto;
+		line-height: 88rpx;
 		background: #FFFFFF;
-		box-shadow: 0rpx -6rpx 14rpx 0rpx rgba(177, 177, 177, 0.25);
-		padding: 30rpx 32rpx;
-	}
-	.footer2{
-		position: fixed;
-		bottom: 0;
-		width: 100%;
-		background: #FFFFFF;
-		box-shadow: 0rpx -6rpx 14rpx 0rpx rgba(177, 177, 177, 0.25);
-		padding: 30rpx 32rpx;
-		margin-top: 25rpx;
+		border-radius: 20rpx 20rpx 20rpx 20rpx;
+
 	}
 
-	.footer_button {
+	.view_button {
+		border-radius: 12rpx 12rpx 12rpx 12rpx;
+		padding: 12rpx 24rpx;
+		font-size: 20rpx;
+		font-weight: 500;
+		color: rgba(101, 116, 140, 0.8);
+	}
+
+	.view_buttons {
+		background: #2D7CE6;
+		border-radius: 12rpx 12rpx 12rpx 12rpx;
+		padding: 12rpx 24rpx;
+		font-size: 20rpx;
+		font-weight: 500;
+		color: #FFFFFF;
+	}
+
+	.view_fff {
+		background: #FFFFFF;
+		border-radius: 20rpx 20rpx 20rpx 20rpx;
+	}
+
+	.view_Do {
 		display: flex;
 		justify-content: space-between;
+		padding: 28rpx 0rpx;
+		margin: 0 28rpx;
+		border-bottom: 2rpx solid #F2F2F2;
 	}
 
-	.button_ky {
-		padding: 24rpx 52rpx;
-		border-radius: 104rpx 104rpx 104rpx 104rpx;
-		color: #2E4975;
-		background-color: #FAFAFA;
+	.view_pushbutton {
+		display: flex;
 	}
 
-	.button_andadd {
-		background: linear-gradient(180deg, #74AFFF 0%, #2D7CE6 100%);
-		border-radius: 104rpx 104rpx 104rpx 104rpx;
-		padding: 26rpx 125rpx;
-		color: #fff;
+	.grizzly {
+		background: #E1EEFF;
+		border-radius: 8rpx 8rpx 8rpx 8rpx;
+		font-size: 20rpx;
+		font-weight: 500;
+		color: #2D7CE6;
+		padding: 6rpx 18rpx;
+		margin-left: 12rpx;
 	}
 
-	.button_show {
-		width: 100%;
-		background: linear-gradient(180deg, #74AFFF 0%, #2D7CE6 100%);
-		border-radius: 104rpx 104rpx 104rpx 104rpx;
-		padding: 26rpx 125rpx;
-		color: #fff;
-		text-align: center;
+	.yellow {
+		background: #FFEBD7;
+		border-radius: 8rpx 8rpx 8rpx 8rpx;
+		font-size: 20rpx;
+		font-weight: 500;
+		color: #FB9734;
+		padding: 6rpx 18rpx;
+		margin-left: 12rpx;
 	}
 
-	.view_fff_bottom {
-		margin-bottom: 54rpx;
-	}
-
-	.Task {
+	.view_English {
+		display: flex;
 		font-size: 24rpx;
 		font-weight: 500;
 		color: #2E4975;
 	}
 
+	.active {
+		z-index: 9;
+		background: #2D7CE6;
+		color: #fff;
+	}
+
+	.slander {
+		height: 352rpx;
+		background: #FFFFFF;
+		border-radius: 20rpx 20rpx 20rpx 20rpx;
+	}
+
+	.slander_behavior {
+		display: flex;
+		justify-content: space-between;
+		padding: 20rpx 0rpx;
+		border-bottom: 2rpx solid #F2F2F2;
+	}
+
+	.slander_for {
+		background: #FFFFFF;
+		border-radius: 20rpx 20rpx 20rpx 20rpx;
+		padding: 0 30rpx;
+	}
+
+	.unite {
+		width: 270rpx;
+		font-size: 28rpx;
+		font-family: 'PingFang';
+		font-weight: 800;
+		color: #2E4975;
+		margin: 26rpx 0rpx;
+	}
+
+	.slander_an {
+		background: #F4F4F4;
+		border-radius: 12rpx 12rpx 12rpx 12rpx;
+		font-size: 20rpx;
+		font-family: 'PingFang';
+		font-weight: 500;
+		color: rgba(101, 116, 140, 0.8);
+		padding: 10rpx;
+		margin-right: 15rpx;
+	}
+
+	.pd_icon {
+		margin-left: 8rpx;
+	}
+
+	.highlighted {
+
+		background: rgba(45, 124, 230, 0.1);
+		border-radius: 12rpx 12rpx 12rpx 12rpx;
+		color: #2D7CE6;
+	}
+
+	.part {
+		font-size: 28rpx;
+		font-family: 'PingFang';
+		font-weight: 500;
+		color: #2E4975;
+
+	}
+
+	.part2 {
+		font-size: 28rpx;
+		font-family: 'PingFang';
+		font-weight: 500;
+		color: #2E4975;
+		margin-left: 20rpx;
+
+	}
+
+	.swiper {
+		height: 80%;
+	}
+
+	swiper-item {
+		overflow: scroll;
+	}
+
+	.slander_left {
+		width: 328rpx;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		overflow: hidden
+	}
+
 	.view_left {
 		display: flex;
 		justify-content: left;
 		margin-top: 20rpx;
 	}
 
+	.view_inuygs {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+
 	.view_left_pd {
 		position: relative;
 		padding: 12rpx 32rpx;
@@ -612,51 +964,230 @@
 		border-radius: 20rpx 20rpx 20rpx 20rpx;
 		margin-right: 15rpx;
 		font-size: 24rpx;
+		color: #072F5A;
+	}
+
+	.unite {
+		width: 290rpx;
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		overflow: hidden;
+		-webkit-line-clamp: 1;
+		font-size: 28rpx;
+		font-family: 'PingFang';
+		font-weight: 800;
+		color: #2E4975;
+
+		margin-right: 20rpx;
 	}
 
 	.pull_Down {
 		position: absolute;
-		bottom: -130rpx;
+		bottom: -184rpx;
 		left: 50%;
 		margin-left: -79rpx;
-		box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0,0,0,0.25);
+		box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.25);
 		border-radius: 20rpx 20rpx 20rpx 20rpx;
 		background: #FFFFFF;
 		border-bottom: 2rpx solid #F2F2F2;
+
 		view {
 			padding: 15rpx 50rpx;
 			border-bottom: 2rpx solid #F2F2F2;
 		}
 	}
-	.pull_DownTow{
+
+	.pull_Down view:last-child {
+		border: none;
+	}
+
+	.header_part {
+		display: flex;
+		align-items: center;
+		margin: 26rpx 0rpx;
+	}
+
+	.slander_an {
+		padding: 6rpx 18rpx;
+		background: #fff;
+		border-radius: 12rpx 12rpx 12rpx 12rpx;
+		margin-left: 12rpx;
+		color: #65748C;
+	}
+
+	.slander_for {
+		background-color: #fff;
+		border-radius: 20rpx 20rpx 20rpx 20rpx;
+
+	}
+
+	.slander_of {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 24rpx 0;
+		margin: 0 20rpx;
+		border-bottom: 2rpx solid #F2F2F2;
+
+	}
+
+	.textual {
+		width: 290rpx;
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		overflow: hidden;
+		-webkit-line-clamp: 2;
+	}
+
+	.bottom_one {
+		display: flex;
+
+		view {
+			padding: 6rpx 18rpx;
+			background: #F4F4F4;
+			border-radius: 12rpx 12rpx 12rpx 12rpx;
+			font-size: 20rpx;
+			font-weight: 500;
+			color: rgba(101, 116, 140, 0.8);
+			margin-left: 15rpx;
+		}
+
+		.active {
+			background: rgba(45, 124, 230, 0.1);
+			color: #2D7CE6;
+		}
+	}
+
+	.pull_down {
+		display: flex;
+		justify-content: space-between;
+		width: 100rpx;
+		font-size: 24rpx;
+	}
+
+
+
+}
+
+.footer {
+	position: fixed;
+	bottom: 0;
+	width: 100%;
+	background: #FFFFFF;
+	box-shadow: 0rpx -6rpx 14rpx 0rpx rgba(177, 177, 177, 0.25);
+	padding: 30rpx 32rpx;
+}
+
+.footer2 {
+	position: fixed;
+	bottom: 0;
+	width: 100%;
+	background: #FFFFFF;
+	box-shadow: 0rpx -6rpx 14rpx 0rpx rgba(177, 177, 177, 0.25);
+	padding: 30rpx 32rpx;
+	margin-top: 25rpx;
+}
+
+.footer_button {
+	display: flex;
+	justify-content: space-between;
+}
+
+.button_ky {
+	padding: 24rpx 52rpx;
+	border-radius: 104rpx 104rpx 104rpx 104rpx;
+	color: #2E4975;
+	background-color: #FAFAFA;
+}
+
+.button_andadd {
+	background: linear-gradient(180deg, #74AFFF 0%, #2D7CE6 100%);
+	border-radius: 104rpx 104rpx 104rpx 104rpx;
+	padding: 26rpx 125rpx;
+	color: #fff;
+}
+
+.button_show {
+	width: 100%;
+	background: linear-gradient(180deg, #74AFFF 0%, #2D7CE6 100%);
+	border-radius: 104rpx 104rpx 104rpx 104rpx;
+	padding: 26rpx 125rpx;
+	color: #fff;
+	text-align: center;
+}
+
+.view_fff_bottom {
+	margin-bottom: 54rpx;
+}
+
+.Task {
+	font-size: 24rpx;
+	font-weight: 500;
+	color: #2E4975;
+}
+
+.view_left {
+	display: flex;
+	justify-content: left;
+	margin-top: 20rpx;
+}
+
+.view_left_pd {
+	position: relative;
+	padding: 12rpx 32rpx;
+	background: #FFFFFF;
+	border-radius: 20rpx 20rpx 20rpx 20rpx;
+	margin-right: 15rpx;
+	font-size: 24rpx;
+}
+
+.pull_Down {
+	position: absolute;
+	bottom: -130rpx;
+	left: 50%;
+	margin-left: -79rpx;
+	box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.25);
+	border-radius: 20rpx 20rpx 20rpx 20rpx;
+	background: #FFFFFF;
+	border-bottom: 2rpx solid #F2F2F2;
+
+	view {
+		padding: 15rpx 50rpx;
+		border-bottom: 2rpx solid #F2F2F2;
+	}
+}
+
+.pull_DownTow {
 	width: 150rpx;
 	position: absolute;
 	bottom: -133rpx;
 	left: 50%;
 	margin-left: -72rpx;
-	box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0,0,0,0.25);
+	box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.25);
 	border-radius: 20rpx 20rpx 20rpx 20rpx;
 	background: #FFFFFF;
 	border-bottom: 2rpx solid #F2F2F2;
 	text-align: center;
+
 	view {
 		padding: 15rpx 0rpx;
 		border-bottom: 2rpx solid #F2F2F2;
 	}
-		
-	}
-	.pull_Down view:last-child {
-		border: none;
-	}
 
-	.sl_body {
-		background-color: #fff;
-	}
+}
 
-	.footer_button_right {
-		padding: 24rpx 62rpx;
-		border: 1px solid #2D7CE6;
-		border-radius: 104rpx 104rpx 104rpx 104rpx;
-		color: #2D7CE6;
-	}
+.pull_Down view:last-child {
+	border: none;
+}
+
+.sl_body {
+	background-color: #fff;
+}
+
+.footer_button_right {
+	padding: 24rpx 62rpx;
+	border: 1px solid #2D7CE6;
+	border-radius: 104rpx 104rpx 104rpx 104rpx;
+	color: #2D7CE6;
+}
 </style>