<template>
	<view>
		<view class="page-title">校友圈</view>
		<view class="content-top">


			<!-- <u-navbar :is-back="false" title="" :border-bottom="false">
				<view class="slot-wrap">
					<u-search :input-style="searchStyle" placeholder="搜索资讯或需求" search-icon="search" :show-action="true"
						action-text="搜索" v-model="Title" @custom="onSearch">
					</u-search>
				</view>
			</u-navbar> -->
			<drag-button :isDock="true" :current='current' :existTabBar="true" @reload='reload' />
			<!-- <u-tabs-swiper ref="uTabs" :list="navList" :current="current" :is-scroll="false"
			:active-item-style="{ color: '#3CB5FB', fontSize: '0.15rem' }" :bar-style="{ background: '#3CB5FB' }"
			@change="tabsChange"></u-tabs-swiper> -->
			<view class="tabs-wrap">

				<view class="tabs-box">
					<view class="tabs-item" :class="{ 'tabs-item-active': current == item.type }"
						v-for="(item, index) in navList" :key="index" @click="tabsChange(item.type)">
						<text>{{ item.name }}</text>
					</view>
				</view>
				<view class="search-box" @click="searchClick">
					<image src="/static/common/img/search.svg" style="width: 40rpx;height: 40rpx;"></image>
				</view>
				<view class="search-box" @click="btnClick"
					v-if="(current == 0 && vuex_user.isAttestationGLY && vuex_user.isAttestationJZG && (vuex_user.isAttestationXY || true)) || (current == 1 && (vuex_user.isAttestationXY || true))">
					<image src="/static/common/img/add.svg" style="width: 50rpx;height: 50rpx;"></image>
				</view>
			</view>
			<view class="flex-row section_5" :class="{ NavShow: NavShow }" v-if="current == 1">
				<text :class="{ 'text_3': currentIdx === index }" v-for="(item, index) in sysList" :key="index"
					@click="oncurrent(index, item)">{{ item }}</text>
			</view>
		</view>

		<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish"
			style="height: calc(100vh - 410rpx); width: 100%">
			<swiper-item class="swiper-item" v-for="(item, index) in navList" :key="index"
				style="height: calc(100vh - 410rpx); width: 100%">
				<scroll-view scroll-y="true" style=" width: 100%"
					:style="{ height: vuex_iPhone ? 'calc(100vh - 410rpx)' : 'calc(100vh - 1.5rem)' }"
					@scrolltolower="onreachBottom" scroll-with-animation='true'
					:scroll-top='index == 0 ? isScroll : isScroll2' @scroll='scroll' :data-index='index'>
					<view class="flex-col group" v-if="index == 0">
						<view class="flex-col" v-if="(state === false) && false">
							<view class="flex-col group_1"> </view>
							<view class="flex-col group_2">
								<view class="flex-col section_4">
									<view class="flex-row section_5">
										<text class="text_3">待认证，请先完成认证~</text>
										<text class="text_4" @click="onAuto">去认证 >></text>
									</view>
								</view>
								<view class="flex-col group_3">
									<view class="flex-col">
										<image src="/static/common/img/16535374500948048054.png" class="image_1" />
									</view>
									<text class="text_5">暂无数据，请尽快认证补充资料~</text>
								</view>
							</view>
						</view>
						<template v-if="(state === true) && true">
							<!-- <view class="flex-col xyzz" v-if='Alumn.length'>
								<view class="flex-col group_3">
									<view class="flex-col">
										<view class="flex-row group_4">
											<view>
												<image src="/static/common/img/16486275579950463634.png"
													class="image_2" />
												<text class="text_3">校友找找</text>
											</view>
											<text style='float:right;' @click='toAlumni()'>更多</text>
										</view>
										<view class="group_23">
											<view class="flex-row horiz-list">
												<view class="flex-col items-center list-item_2" :key="idx"
													v-for="(item, idx) in Alumn" v-if='idx < 5'
													@click='toDetil(item.userId)'>
													<u-avatar :src="$u.http.config.imgUrl + item.imageUrl"
														class="image_3"></u-avatar>
													<text class="text_4">{{ handleStr(item) }}</text>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view> -->
							<!-- <view class="info-item"> -->

							<information @clickImg="clickImg" @onStar="onStar" :list="shoolList" type="0"
								:bottom="bottomState2" :borderRadius="true"></information>
							<!-- </view> -->
						</template>
					</view>
					<view class="flex-col group" v-if="index == 1">
						<view class="flex-col" v-if="(state === false) && false">
							<view class="flex-col group_1"> </view>
							<view class="flex-col group_2">
								<view class="flex-col section_4">
									<view class="flex-row section_5">
										<text class="text_3">待认证，请先完成认证~</text>
										<text class="text_4" @click="onAuto">去认证 >></text>
									</view>
								</view>
								<view class="flex-col group_3">
									<view class="flex-col">
										<image src="/static/common/img/16535374500948048054.png" class="image_1" />
									</view>
									<text class="text_5">暂无数据，请尽快认证补充资料~</text>
								</view>
							</view>
						</view>
						<template v-if="(state === true) && true">
							<view class="flex-col group_18">
								<view class="flex-col group_17">
									<u-sticky offset-top="85" @fixed="onFixed"> </u-sticky>
									<u-sticky offset-top="84" @unfixed="onFixed"> </u-sticky>

									<!-- <view class="info-item"> -->

									<information @onStar="onStar" @clickImg="clickImg" :list="helpList" type="1"
										:bottom="bottomState" @onSign="onSign" :borderRadius="true">
									</information>

									<!-- </view> -->
								</view>
							</view>
						</template>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<u-toast ref="uToast" />
		<u-tabbar :list="vuex_tabbar" :class="{ phone: vuex_iPhone }" :active-color="vuex_tabbar_config.activeColor"
			:inactive-color="vuex_tabbar_config.inactiveColor"></u-tabbar>

		<!-- <u-back-top :scroll-top="scrollTop"></u-back-top> -->
	</view>
</template>

<script>
import dragButton from '../../../components/drag-button';
import information from "../../../components/Information.vue";
export default {
	data() {
		return {
			scrollTop: 0,
			isScroll: 0,
			isScroll2: 0,
			// 状态
			state: false,
			NavShow: false,
			searchStyle: {
				width: "100%",
			},
			sysList: ['全部', '企业招聘', '租房', '生活', '找工作', '其他'],
			tabbar: "",
			swiperCurrent: 0,
			current: 0,
			navList: [
				{
					name: "学校资讯",
					type: 0
				},
				{
					name: "校友帮帮",
					type: 1
				}
			],
			PageIndex: 1,
			PageSize: 10,
			PageIndex2: 1,
			PageSize2: 10,
			Keyword: "",
			DateBegin: "",
			DateEnd: "",
			SkipCount: "",
			helpList: [],
			shoolList: [],
			Alumn: [],
			total1: 0,
			total2: 0,
			currentIdx: 0,
			Keyword: '全部',
			Title: "",
			isonShow: true,
			isLoad: false,
			bottomState: false,
			bottomState2: false,
			isShool: '',
		};
	},
	watch: {
		isShool() {
			this.bottomState = false,
				this.bottomState2 = false,
				this.helpList = []
			this.shoolList = []
			this.getList();
		},
		current() {
			//改成切换就刷新
			//if ((this.helpList.length == 0 && this.current == 1) || (this.shoolList.length == 0 && this.current == 0)) {
			//}
			this.getList();
		},
		currentIdx() {
			this.getList();
		}
	},
	onLoad(e) {
		console.log('%c%s', 'color:red', 'onLoad--校友圈')
		this.getList();
		// this.getAlumnSearch();


	},
	onShow(e) {
		//从我的界面点击回来
		uni.$off('circle')
		uni.$on('circle', () => {
			console.log('circle')
			// 获取当前页面的路径
			let pages = getCurrentPages();
			let currentPage = pages[pages.length - 1];
			let url = '/' + currentPage.route;
			uni.reLaunch({ url: url, });
		})
		// console.log('%c%s', 'color:red', 'onShow--校友圈')
		// console.log(this.isonShow, 'this.isonShow--')
		if (this.isonShow) {
			if (uni.getStorageSync('Tag')) {
				const value = uni.getStorageSync('Tag');
				// this.current = 0
				// this.swiperCurrent = 0
				this.current = 1
				this.swiperCurrent = 1
				let arr = value.split(',')
				let i = this.sysList.indexOf(arr[0])
				this.oncurrent(i, arr[0])
				uni.removeStorageSync('Tag');
			} else {
				// this.getList()
			}
			this.$u.api.getUser()
			this.getList();
			this.getAlumnSearch()
			// this.getShoolList()
			//	this.state = this.vuex_user.isAttestationXY || this.vuex_user.isAttestationJZG;
			this.state = true;
		}

		//this.isShool = this.vuex_user.schoolId
		this.getSchool()
		uni.$on('helpAdd', () => {
			console.log('helpAdd回调')
			// this.gethelpList();
			this.reload();
		})
	},
	methods: {


		handleStr(item) {
			if (item.name?.length && item.name?.length > 3) {
				return item.name?.slice(0, 3) + "..."
			}
			return item.name
		},
		async getSchool() {
			const req = {
				userId: this.vuex_user.id,
			};
			const res = await this.$u.apiList.MyEducations(req);
			// console.log(res, 'res---');
			const findRow = res.find(x => x.isSelected === true)
			if (findRow) {
				this.isShool = findRow.schoolId
			}
			// console.log(this.isShool, 'this.isShool--')
		},
		// 刷新
		reload() {
			this.getList()
		},
		// 获取笑友找找
		getAlumnSearch() {
			this.$u.api.getAlumnSearch().then(res => {
				this.Alumn = res
			})
		},
		oncurrent(index, item) {
			if (this.Keyword != item) {
				this.helpList = []
				this.Keyword = item
				this.currentIdx = index
				this.Title = ""
				this.PageIndex = 1
				this.PageSize = 10
				// if (!uni.getStorageSync('Tag')) {
				// 	console.log('没有缓存')
				// 	this.gethelpList()
				// }
			}
		},
		onSearch(val) {
			this.Title = val
			if (this.current == 0) {
				this.shoolList = []
				this.getShoolList()
			} else {
				this.helpList = []
				this.gethelpList()
			}
		},
		scroll(e) {
			this.scrollTop = e.detail.scrollTop;
		},
		onFixed() {
			this.NavShow = !this.NavShow;
		},
		// 获取校友帮帮列表
		gethelpList() {
			this.isLoad = true
			const data = {
				PageIndex: this.PageIndex,
				PageSize: this.PageSize,
				Keyword: this.Keyword,
				// DateBegin:'',
				// DateEnd:'',
				// SkipCount:1,
				// key:,
			};
			if (this.Keyword != '全部') {
				data.Keyword = this.Keyword
			}
			if (this.Title) {
				// this.helpList = []
				data.Title = this.Title
			}

			this.$u.api.GetHelpList(data).then((res) => {
				console.log(res, 'res--帮帮列表')
				this.isLoad = false
				this.total2 = res.total
				if (this.helpList.length >= this.total2) {
					this.bottomState = true;
					return
				}
				if (this.total2 == res.items.length) {
					this.bottomState = true;
				}
				this.helpList.push(...res.items)

			});
		},
		// 获取学校资讯列表
		getShoolList() {
			const data = {
				PageIndex: this.PageIndex2,
				PageSize: this.PageSize2,
				// Keyword:this.Keyword,
				// DateBegin:'',
				// DateEnd:'',
				// SkipCount:1,
				// key:,
			};
			if (this.Title) {
				// this.shoolList = []
				data.Title = this.Title
			}
			this.$u.api.GetSchoolList(data).then((res) => {
				this.total1 = res.total
				if (this.shoolList.length >= this.total1) {
					this.bottomState2 = true;
					return
				}
				if (this.total1 == res.items.length) {
					this.bottomState2 = true;
				}
				this.shoolList.push(...res.items)
			});
		},
		getList() {
			if (this.current == 0) {
				this.shoolList = []
				this.PageIndex2 = 1
				this.PageSize2 = 10
				this.getShoolList();
			} else {
				this.helpList = []
				this.PageIndex = 1
				this.PageSize = 10
				if (!this.isLoad) {
					this.gethelpList();
				}
			}
		},
		// tabs通知swiper切换
		tabsChange(index) {
			this.swiperCurrent = index;
			this.current = index
			this.Title = ""
		},
		// swiper-item左右移动，通知tabs的滑块跟随移动
		transition(e) {
			let dx = e.detail.dx;
			// this.$refs.uTabs.setDx(dx);
		},
		// 由于swiper的内部机制问速切题，快换swiper不会触发dx的连续变化，需要在结束时重置状态
		// swiper滑动结束，分别设置tabs和swiper的状态
		animationfinish(e) {
			let current = e.detail.current;
			console.log(current, 'current--');

			// this.$refs.uTabs.setFinishCurrent(current);
			this.swiperCurrent = current;
			this.current = current;
		},
		// scroll-view到底部加载更多
		onreachBottom() {
			let num = this.PageIndex * this.PageSize
			let num1 = this.PageIndex2 * this.PageSize2
			if (this.current == 0) {
				if (num1 >= this.total1) {
					this.bottomState2 = true;
					return
				}
				this.PageIndex2++;
				this.getShoolList();
			} else {
				if (num >= this.total2) {
					this.bottomState = true;
					return
				}
				this.PageIndex++;
				this.gethelpList();
			}
		},
		onAuto() {
			this.$u.route({
				url: "/pages/my/ShoolList/ShoolList"
			})
		},
		toAlumni(data) {
			this.$u.route({
				url: "/pages/AlumniCircle/Alumni/Alumni",
			})
		},
		toDetil(id) {
			this.$u.route({
				url: '/pages/AlumniCircle/userDetail/userDetail?id=' + id
			})
		},
		//收藏
		async onStar(val) {
			console.log('收藏--');
			// 判断当前学校是否认证，未认证不可收藏
			const req = {
				userId: this.vuex_user.id,
			}
			const res = await this.$u.apiList.MyPage(req)
			console.log(JSON.parse(JSON.stringify(res)), 'res')
			const edcationList = res.edcationList
			if (!edcationList.length) {
				return this.$refs.uToast.show({
					title: '认证后可进行收藏操作',
					type: 'none',
				})
			}
			const findRow = edcationList.find(x => x.isSelected === true);
			if ([0, 2].includes(findRow.certifyStatus)) {
				return this.$refs.uToast.show({
					title: '认证后可进行收藏操作',
					type: 'none',
				})
			}
			const data = {
				id: val.id,
				type: val.type
			}
			this.$u.apiList.LikeCollect(data)
				.then((res) => {
					if (val.isCllect) {
						if (val.collectCount > 0) {
							val.isCllect = false
							val.collectCount--
							this.$refs.uToast.show({
								title: '取消收藏成功',
								type: 'success',
							})
						}
					} else {
						val.isCllect = true
						val.collectCount++
						this.$refs.uToast.show({
							title: '收藏成功',
							type: 'success',
						})
					}
				})
				.catch((err) => {
					this.$refs.uToast.show({
						title: '收藏失败',
						type: 'error',
					})
				})
		},
		//标签跳转
		onSign(v) {
			let i = this.sysList.indexOf(v)
			this.oncurrent(i, v)
		},
		// 搜索校友圈
		searchClick() {
			this.$u.route({
				url: "pages/AlumniCircle/searchAlumnus/searchAlumnus",
				params: {
					type: this.current, //0-学校咨询 1-校友帮帮
					class: this.Keyword, //分类：全部 企业招聘 租房等
				},
			})
		},
		//发布资讯文章
		async btnClick() {
			// 判断当前学校是否认证，未认证不可发布
			const req = {
				userId: this.vuex_user.id,
			}
			const res = await this.$u.apiList.MyPage(req)
			console.log(JSON.parse(JSON.stringify(res)), 'res')
			const edcationList = res.edcationList
			if (!edcationList.length) {
				return this.$refs.uToast.show({
					title: '认证后可进行发布操作',
					type: 'none',
				})
			}
			const findRow = edcationList.find(x => x.isSelected === true);
			if ([0, 2].includes(findRow.certifyStatus)) {
				return this.$refs.uToast.show({
					title: '认证后可进行发布操作',
					type: 'none',
				})
			}
			this.$u.route({
				url: "pages/AlumniCircle/release/release",
				params: {
					Id: this.isShool,
					type: this.current,
					url: true
				},
			})
		},
		//预览图片
		clickImg(item) {
			this.isonShow = false
			item = this.$u.http.config.imgUrl + item
			var images = [];
			images.push(item);
			uni.previewImage({ // 图片路径必须是一个数组 => ['']
				current: 0,
				urls: images,
			});
		}
	},
	components: {
		information: information,
		dragButton: dragButton
	},
};
</script>

<style lang="scss" scoped>
::v-deep .u-tabs-scorll-flex {
	width: 56%;
}

::v-deep .slot-wrap {
	margin: 0 0.2rem;
}

::v-deep .u-slot-content {
	display: block;
}

.group {
	flex: 1 1 auto;
	overflow-y: auto;

	.group_1 {
		padding-bottom: 0.015rem;
		position: relative;

		.section_1 {
			background-color: rgb(255, 255, 255);

			.section_2 {
				padding: 0.13rem 0.23rem 0.085rem;
				background-color: rgb(255, 255, 255);
				box-shadow: 0.0002rem 0.005rem rgba(0, 0, 0, 0.03);

				.text_1 {
					color: rgb(2, 2, 2);
					font-size: 0.15rem;
					line-height: 0.14rem;
					white-space: nowrap;
				}

				.text_2 {
					margin-left: 0.47rem;
					color: rgb(160, 162, 172);
					font-size: 0.15rem;
					line-height: 0.14rem;
					white-space: nowrap;
				}
			}
		}

		.section_3 {
			background-color: rgb(46, 155, 255);
			border-radius: 0.015rem;
			height: 0.035rem;
			position: absolute;
			left: 0.35rem;
			right: 3.15rem;
			bottom: 0;
		}
	}

	.group_2 {
		padding-bottom: 1.03rem;

		.section_4 {
			padding: 0.33rem 0 0.34rem;
			background-color: rgb(255, 255, 255);

			.section_5 {
				margin-left: 0.18rem;
				margin-right: 0.24rem;
				padding: 0.2rem 0.18rem 0.18rem 0.24rem;
				background-color: rgb(246, 247, 250);

				.text_3 {
					color: rgb(160, 162, 172);
					font-size: 0.15rem;
					line-height: 0.15rem;
					letter-spacing: 0.015rem;
					white-space: nowrap;
				}

				.text_4 {
					margin-left: 0.05rem;
					color: rgb(46, 155, 255);
					font-size: 0.15rem;
					line-height: 0.15rem;
					white-space: nowrap;
					text-transform: uppercase;
				}
			}
		}

		.group_3 {
			margin-top: 0.76rem;
			padding-left: 0.8rem;
			padding-right: 0.69rem;
			color: rgb(163, 182, 202);
			font-size: 0.15rem;
			line-height: 0.15rem;
			white-space: nowrap;

			.text_5 {
				margin-left: 0.02rem;
				margin-top: 0.13rem;
			}

			.image_1 {
				margin-right: 0.14rem;
				width: 2.12rem;
				height: 1.89rem;
			}
		}
	}


	.info-item {
		padding: 24rpx;
	}
}

.xyzz {
	margin-bottom: 0.05rem;

	.group_3 {
		padding: 0.1rem 0 0.1rem;
		overflow-x: hidden;
		background: #fff;
		// border-top: 1px solid #ccc;

		.group_4 {
			justify-content: space-between;
			width: 85%;
			margin: 0 auto;

			>text {
				color: #2e9bff;
				font-size: 0.15rem;
				line-height: 0.16rem;
				white-space: nowrap;
			}

			.image_2 {
				flex-shrink: 0;
				width: 0.17rem;
				height: 0.17rem;
				vertical-align: middle;
			}

			.text_3 {
				margin-left: 0.05rem;
				color: rgb(2, 2, 2);
				font-size: 0.15rem;
				line-height: 0.15rem;
				letter-spacing: 0.015rem;
				vertical-align: middle;
			}
		}

		.group_23 {
			width: 100vw;
			overflow-x: scroll;
			margin-top: 0.13rem;

			.horiz-list {
				overflow-x: auto;
				padding: 0 0.15rem;

				.list-item_2 {
					padding: 0.05rem 0 0.065rem;
					flex-shrink: 0;
					width: 20%;

					.image_3 {
						border-radius: 50%;
						width: 0.4rem;
						height: 0.4rem;
						box-shadow: 0 0 1px #6f6f6f;
					}

					.text_4 {
						margin-top: 0.15rem;
						color: rgb(2, 2, 2);
						font-size: 0.12rem;
						line-height: 0.12rem;
						letter-spacing: 0.012rem;
					}
				}
			}
		}
	}
}

.xyList {
	.list {
		margin-top: 0.055rem;
		padding-bottom: 0.06rem;

		.list-item_1 {
			padding: 0.19rem 0 0.07rem;
			background-color: rgb(255, 255, 255);
			margin-bottom: 0.1rem;

			.group_11 {
				padding: 0 0.16rem;

				.image_9 {
					margin-bottom: 0.015rem;
					width: 0.3rem;
					height: 0.3rem;
				}

				.group_23 {
					margin-left: 0.065rem;
					margin-top: 0.02rem;
					flex: 1 1 auto;

					.text_10 {
						color: rgb(2, 2, 2);
						font-size: 0.14rem;
						line-height: 0.13rem;
					}

					.text_11 {
						margin-top: 0.055rem;
						color: rgb(184, 184, 184);
						font-size: 0.12rem;
						line-height: 0.12rem;
					}
				}
			}

			.text_12 {
				margin-top: 0.17rem;
				align-self: center;
				color: rgb(55, 59, 72);
				font-size: 0.18rem;
				line-height: 0.17rem;
			}

			.text_13 {
				margin: 0.12rem 0.15rem 0 0.17rem;
				color: rgb(73, 76, 87);
				font-size: 0.15rem;
				line-height: 0.24rem;
			}

			.equal-division {
				margin-top: 0.035rem;
				padding: 0.05rem 0.15rem;

				.tool {
					margin-top: 0.3rem;

					.group_8 {
						padding-left: 0.26rem;
						padding-right: 0.24rem;
						flex: 1 1 1.11rem;

						.image_12 {
							width: 0.22rem;
							height: 0.21rem;
						}

						.text_17 {
							margin-left: 0.08rem;
							align-self: center;
							color: rgb(180, 182, 189);
							font-size: 0.14rem;
							line-height: 0.11rem;
						}
					}

					.group_9 {
						margin-left: 0.055rem;
						padding: 0 0.24rem;
						flex: 1 1 1.11rem;

						.image_14 {
							width: 0.18rem;
							height: 0.2rem;
						}

						.text_18 {
							margin-left: 0.08rem;
							align-self: center;
							color: rgb(180, 182, 189);
							font-size: 0.14rem;
							line-height: 0.11rem;
						}
					}

					.group_10 {
						margin-left: 0.05rem;
						padding: 0 0.23rem;
						flex: 1 1 1.11rem;
						width: 1.12rem;

						.image_16 {
							margin-left: 0.07rem;
							width: 0.2rem;
							height: 0.2rem;
						}

						.text_19 {
							align-self: center;
							color: rgb(180, 182, 189);
							font-size: 0.14rem;
							line-height: 0.11rem;
						}
					}
				}

				.image_10 {
					flex: 1 1 1.11rem;
					width: 1.11rem;
					height: 1.11rem;
				}

				.image_13 {
					margin-left: 0.055rem;
				}

				.image_15 {
					margin-left: 0.05rem;
				}
			}
		}
	}
}

.group_18 {
	.image_2 {
		margin: 0 auto;
		border-radius: 0.1rem;
		width: 3.45rem;
		height: 1.3rem;
	}

	.group_17 {
		margin-top: 0rem;

		

		.NavShow {
			position: fixed;
			top: 0;
			width: 100%;
			background: #fff;
			z-index: 999;
			border-top: 0.01rem solid #eee;
		}

		.section_6 {
			background-color: rgb(246, 247, 250);

			.list-item {
				padding: 0.18rem 0.1rem 0.21rem 0.16rem;
				background-color: rgb(255, 255, 255);

				.view {
					margin-right: 0.051rem;
				}

				.group_9 {
					margin-right: 0.13rem;
					margin-top: 0.17rem;

					.text_14 {
						align-self: flex-start;
						color: rgb(2, 2, 2);
						font-size: 0.18rem;
						font-family: Adobe Heiti Std;
						line-height: 0.17rem;
					}

					.text_15 {
						margin-top: 0.11rem;
						color: rgb(73, 76, 87);
						font-size: 0.15rem;
						font-family: Adobe Heiti Std;
						line-height: 0.24rem;
					}

					.text_16 {
						margin-left: 0.04rem;
						margin-top: 0.12rem;
						align-self: flex-start;
						color: rgb(44, 109, 255);
						font-size: 0.14rem;
						font-family: PingFang;
						line-height: 0.13rem;
					}
				}

				.group_21 {
					margin-left: 0.24rem;
					margin-top: 0.1rem;

					.group_20 {
						margin: 0.025rem 0;

						.image_6 {
							flex-shrink: 0;
							width: 0.22rem;
							height: 0.21rem;
						}

						.text_17 {
							margin-left: 0.08rem;
							margin-top: 0.065rem;
							color: rgb(180, 182, 189);
							font-size: 0.14rem;
							font-family: PingFang;
							line-height: 0.11rem;
						}
					}

					.group_10 {
						margin-left: 0.63rem;
						align-self: center;

						.image_7 {
							flex-shrink: 0;
							width: 0.18rem;
							height: 0.2rem;
						}

						.text_18 {
							margin-left: 0.08rem;
							margin-top: 0.06rem;
							color: rgb(180, 182, 189);
							font-size: 0.14rem;
							font-family: PingFang;
							line-height: 0.11rem;
						}
					}

					.equal-division-item_1 {
						margin-left: 0.33rem;
						padding: 0.03rem 0;
						width: 1.18rem;

						.image_8 {
							margin-left: 0.3rem;
							width: 0.2rem;
							height: 0.2rem;
						}

						.text_19 {
							margin-left: 0.095rem;
							margin-top: 0.06rem;
							color: rgb(180, 182, 189);
							font-size: 0.14rem;
							font-family: PingFang;
							line-height: 0.11rem;
						}
					}
				}
			}

			.list-item_1 {
				margin-top: 0.04rem;
				padding: 0.18rem 0.099rem 0.17rem;
				background-color: rgb(255, 255, 255);

				.group_13 {
					margin-left: 0.061rem;
					margin-right: 0.056rem;
				}

				.group_14 {
					margin: 0.17rem 0.12rem 0 0.071rem;

					.text_23 {
						align-self: flex-start;
						color: rgb(2, 2, 2);
						font-size: 0.18rem;
						font-family: Adobe Heiti Std;
						line-height: 0.17rem;
					}

					.text_24 {
						margin-top: 0.085rem;
						color: rgb(73, 76, 87);
						font-size: 0.15rem;
						font-family: Adobe Heiti Std;
						line-height: 0.24rem;
					}

					.text_25 {
						margin-left: 0.04rem;
						margin-top: 0.03rem;
						align-self: flex-start;
						color: rgb(44, 109, 255);
						font-size: 0.14rem;
						font-family: PingFang;
						line-height: 0.16rem;
					}
				}

				.equal-division {
					margin-top: 0.04rem;

					.equal-division-item_2 {
						flex: 1 1 1.18rem;
						padding: 0.029rem 0;

						.image_10 {
							width: 0.2rem;
							height: 0.2rem;
						}

						.text_26 {
							margin: 0.062rem 0 0 0.085rem;
							color: rgb(180, 182, 189);
							font-size: 0.14rem;
							font-family: PingFang;
							line-height: 0.11rem;
						}
					}
				}
			}

			.group_8 {
				height: 0.32rem;
				position: relative;

				.image_3 {
					width: 0.3rem;
					height: 0.3rem;
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
				}

				.text_8 {
					color: rgb(2, 2, 2);
					font-size: 0.14rem;
					font-family: PingFang;
					line-height: 0.13rem;
				}

				.text_43 {
					position: absolute;
					left: 0.37rem;
					top: 0.02rem;
				}

				.text_9 {
					color: rgb(184, 184, 184);
					font-size: 0.12rem;
					font-family: PingFang;
					line-height: 0.12rem;
					position: absolute;
					right: 0;
					top: 0.035rem;
				}

				.text_11 {
					color: rgb(184, 184, 184);
					font-size: 0.12rem;
					font-family: PingFang;
					line-height: 0.12rem;
					position: absolute;
					left: 0.37rem;
					bottom: 0;
				}

				.text_20 {
					position: absolute;
					left: 0.36rem;
					top: 0.02rem;
				}
			}
		}
	}
}

.content-top {
	background: #fff;
	padding-bottom: 30rpx;
}

.tabs-wrap {
	display: flex;
	align-items: center;
}

.search-box {
	width: 88rpx;
	height: 88rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #F6F8F9;
	border-radius: 50%;
	margin-left: 20rpx;
}

.tabs-box {
	display: flex;
	width: 482rpx;
	justify-content: space-between;
	align-items: center;
	padding: 10rpx;
	background: #F6F8F9;
	border-radius: 200rpx;
	margin-left: 40rpx;

	.tabs-item {
		width: 218rpx;
		height: 72rpx;
		text-align: center;
		line-height: 72rpx;
	}

	.tabs-item-active {
		background: #FFFFFF;
		box-shadow: 0rpx 16rpx 8rpx -8rpx rgba(18, 18, 18, 0.08), inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.05);
		border-radius: 200rpx;
		border: 3rpx solid;
		border-image: linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1)) 3 3;
	}
}

.page-title {
	padding: 40rpx 40rpx 40rpx;
	color: #000;
	font-size: 36rpx;
	font-weight: 800;
	background: #fff;

}
.section_5 {
			justify-content: space-between;
			padding: 0.11rem 0.17rem 0rem;
			background-color: rgb(255, 255, 255);
			box-shadow: 0.00018rem 0.005rem rgba(0, 0, 0, 0.03);
			position: relative;
			font-size: 32rpx;

			.tab-text {
				// margin: 0 0.1rem;
			}

			.text_3 {
				margin-bottom: 0.02rem;
				// color: rgb(46, 155, 255);
				// font-size: 0.18rem;
				font-weight: 800;
				font-size: 36rpx;
				color: #000000;
				font-family: PingFang;
				line-height: 0.21rem;
				position: relative;
				z-index: 1;

				&::after {
					position: absolute;
					content: '';
					bottom: 2rpx;
					right: 0;
					width: 100%;
					height: 12rpx;
					background: linear-gradient(116deg, rgba(60, 181, 251, 0) 0%, #28C6FB 45%, #06E1FA 100%);
					border-radius: 2rpx;
					z-index: -1;
				}
			}

			.text_4 {
				margin: 0.025rem 0 0.015rem 0.34rem;
				color: rgb(160, 162, 172);
				font-size: 0.15rem;
				font-family: PingFang;
				line-height: 0.14rem;
			}

			.text_5 {
				margin-left: 0.26rem;
				margin-top: 0.015rem;
				color: rgb(160, 162, 172);
				font-size: 0.15rem;
				font-family: PingFang;
				line-height: 0.16rem;
			}

			.text_6 {
				margin-left: 0.29rem;
				margin-top: 0.02rem;
				color: rgb(160, 162, 172);
				font-size: 0.15rem;
				font-family: PingFang;
				line-height: 0.16rem;
			}

			.text_7 {
				margin-left: 0.35rem;
				margin-top: 0.015rem;
				color: rgb(160, 162, 172);
				font-size: 0.15rem;
				font-family: PingFang;
				line-height: 0.16rem;
			}
		}
</style>
