<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>
			<!-- 搜索 -->
			<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>
			</view>
			<!-- 轮播图 -->
			<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="pull_down">
									<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>
							</view>
						</view>
						<!-- 口语主体 -->
						<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>
								<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>
						<!-- 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 ref="compose"></compose>
				</swiper-item>
				<!--听力  -->
				<swiper-item>
					<audiology  ref="audiology"></audiology>
				</swiper-item>
				<!-- 阅读 -->
				<swiper-item>
					<reading  ref="reading"></reading>
				</swiper-item>
			</swiper>
		</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>

<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
			},
			slanderpart1: [],
			originslanderpart1: [],
			slanderpart2: [],
			originslanderpart2: [],
			slanderpart3: [],
			originslanderpart3: [],
			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'
			}
			],
			totalLength: 0,
			searchKeyword: '',
			userId: null,
			selectspeak: [],
			selectwrite: [],
			selectlisten: [],
			selectread: []
		}
	},
	components: {
		audiology,
		reading,
		compose
	},
	onShow() {
		this.getList()
	},
	onLoad(option) {
		
		 const dataToSave =JSON.parse(decodeURIComponent(option.dataToSave))
		
			this.selectspeak=dataToSave.selectspeak
			this.selectwrite=dataToSave.selectwrite
			this.selectlisten=dataToSave.selectlisten
			this.selectread=dataToSave.selectread
			
			this.$refs.compose.updatawrite(this.selectwrite)
			this.$refs.audiology.updatawrite(this.selectlisten)
			this.$refs.reading.updatawrite(this.selectread)
			this.calculateTotalLength()
	},
	methods: {
		updatawrite(data){
			this.selectwrite=data
			console.log(this.selectwrite, ' this.selectwrite this.selectwrite');
			this.calculateTotalLength()
		},
		updataread(data){
			this.selectread=data
			console.log(this.selectread, ' this.selectwrite this.selectwrite');
			this.calculateTotalLength()
		},
		updatalisten(data){
			this.selectlisten=data
			console.log(this.selectlisten, ' 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%);
}

.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;
	}

	.input {
		margin: 0 auto;
		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;

	}
}

.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;
		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;
	}



}

.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);
	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;
}
</style>