zh_order_food_xcx/pages-school/school-circle.vue

<template>
	<view class="school-circle iPhone-bottom box-border-box">
		<view class="circle-add flex-direction align-items-center flex-justify-center" @click="add()">
			<image class="ft-img mb-12" src="/pages-school/static/ft.png" mode=""></image>
			<view class="fs-24 fc-f fw-b">
				发帖
			</view>
		</view>
		<view class="bg-box"></view>
		<Nav :leftShow='false' :customNav='true' :bgckgroundBox='bgckgroundBox'>
			<template>
				<view slot="custom" class="align-items-center flex-justify-center navCustom">
					<view class="align-items-center nav-left" @click="toBack()">
						<uni-icons type="left" size="20"></uni-icons>
						<!-- 						<view class="fs-34">
							返回
						</view> -->
					</view>
					<view class="nav-title w-390 text-overflow-ellipsis-one text-align-center fs-36 fw-400">
						{{schoolData.school_name}}
					</view>
				</view>
			</template>
		</Nav>
		<view class="top-box">
			<view class="plr-30 mb-12 box-border-box">
				<uni-swiper-dot :info="bannerList" mode="dot" :dotsStyles="dotStyle" :current="current">
					<swiper class="swiper" @change="change" :autoplay='true' :circular='true' interval="4000">
						<swiper-item v-for="(item,i) in bannerList" :key="i">
							<image class="swiper-item" :src="item.image" mode="" @click="bannerClock(item)">
							</image>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
			</view>
			<view class="plr-30 box-border-box">
				<view class="ts-box align-items-center box-border-box plr-12">
					<image class="tz-img" src="/pages-school/static/tz.png" mode=""></image>
					<view class="fs-24 fw-400 fc-0">{{alumni_str}}</view>
				</view>
			</view>
		</view>
		<view class="select-box" :style="[{'top': BarH + 'px'}]">
			<scroll-view class="nav-box view-nowrap box-border-box bgc-f" scroll-x="true">
				<view class="nav-item" @click="selectTopicId(item.id)" v-for="(item,i) in classList" :key="i">
					<image class="nav-icon" :src="item.image" mode=""></image>
					<view class="fs-24" :class="fromData.topic_id==item.id?'fw-600 fw-400':''">{{item.name}}</view>
				</view>
			</scroll-view>
			<view class="flex-justify-space align-items-center type-box box-border-box">
				<view class="display-flex">
					<view @click="selectOrderBuy(1)" class="box-1" :class="fromData.orderBy == 1?'box-s':''">最新</view>
					<view @click="selectOrderBuy(2)" class="box-1" :class="fromData.orderBy == 2?'box-s':''">最热<text
							class="ml-8" :class="fromData.orderBy == 2?'fc-F6ABAC':''">↑</text></view>
					<view @click="selectOrderBuy(3)" class="box-1" :class="fromData.orderBy == 3?'box-s':''">评论<text
							class="ml-8" :class="fromData.orderBy == 3?'fc-F6ABAC':''">↑</text></view>
				</view>
				<view class="box-2 fs-24 fc-F6ABAC" @click="toSelectSchool()">逛其他学校<text class="ml-8 fc-FB4845">></text>
				</view>
			</view>
		</view>

		<view v-if="list.length === 0" class="scroll-view-css">
			<EnBlank :customSrc='true'>
				<template v-slot:blankImg>
					<image class="black-custom-img" src="@/static/img/common/no-order.png" mode=""></image>
				</template>
			</EnBlank>
		</view>

		<!-- <scroll-view v-else scroll-y="true" class="scroll-view-css pl-24 pr-24 box-border-box bgc-F5F4F9" @scrolltolower="scrolltolower"> -->
		<view class="box-border-box bgc-f">
			<view class="card-box box-border-box bgc-f" v-for="(item,i) in list" :key="i" @click.stop="toDet(item)">
				<view class="align-items-center mb-32">
					<image class="card-head flex-shrink0" :src="item.head_img" mode="scaleToFill"></image>
					<view class="">
						<view class="w-400 fs-28 fw-b mb-16">{{item.nickname}}</view>
						<view class="fs-24 fc-a">{{item.created_date}}</view>
					</view>
				</view>
				<view class="flex-1">
					<view class="card-2 fs-30 mb-16">
						{{item.content}}
					</view>
					<view class="card-3 flex-wrap-wrap mb-32" style="width: 560rpx;">
						<image class="card-3-img" :src="item" v-for="(item,i) in item.image" mode="aspectFill"></image>
					</view>
					<view class="align-items-center mb-40">
						<view class="label-box mr-14 b-rad-200 bgc-EDF6FF fc-4495FD fs-24">
							{{item.school_name}}
						</view>
						<view class="label-box b-rad-200 bgc-FCEDED fc-FC4642 fs-24">
							{{item.topic_name}}
						</view>
					</view>

					<view class="card-5 align-items-center flex-justify-end">
						<view class="align-items-center mr-50" @click.stop="handUp(1,item)">
							<uni-icons type="hand-up" size="22" :color="item.is_like==1?'#FD5C02':'#999'"></uni-icons>
							<view class="fs-24 " :class="item.is_like==1?'fc-FD5C02':'fc-9'">{{item.like}}</view>
						</view>
						<view class="align-items-center mr-50">
							<image class="info-img" src="@/static/img/school/info.png" mode=""></image>
							<view class="fs-24 fc-9">{{item.remark}}</view>
						</view>
						<image @click.stop="openRepot(item)" class="info-img" src="@/static/img/school/dian.png"
							mode=""></image>
					</view>
				</view>
			</view>
		</view>

		<!-- </scroll-view> -->

		<uni-popup ref="popup" type="bottom">
			<view class="pop-box pop-h-30 box-border-box p-24">
				<view class="head-pop flex-justify-space align-items-center mb-24">
					<uni-icons @click.stop="closePop(1)" type="closeempty" size="24"></uni-icons>
					<view class="fs-36 fc-0 fw-600">请输入举报内容</view>
					<view class="fs-28 fw-600 fc-41ABF5" @click.stop="closePop(2)">确定</view>
				</view>
				<view class="scroll-view-css">
					<textarea style="height: 100%;" v-model="reportData.content" class=" fs-24" :maxlength='50'
						placeholder='请输入举报内容'></textarea>
				</view>
				<!-- <view class="b-bottom text-align-center fs-32 fw-600 fc-f">确认举报</view> -->
			</view>
		</uni-popup>

		<uni-popup ref="popmsg" type="bottom">
			<view class="pop-box pop-msg box-border-box p-24">
				<!-- 输入框 -->
				<view class="pop-input" v-if="isShowIpnut">
					<view class="head-pop flex-justify-space align-items-center mb-24 box-border-box p-24">
						<view class="fs-28 fw-600 fc-41ABF5"></view>
						<view class="fs-36 fc-0 fw-600">评论</view>
						<uni-icons @click.stop="closeInput()" type="closeempty" size="24"></uni-icons>
					</view>
					<view class="scroll-view-css">
						<view class="bgc-f box-border-box p-32">
							<view class="fs-34 fw-600 mb-20">评论</view>
							<textarea v-model="msgData.content" maxlength="100" class=" fs-24"
								placeholder='友善评论，文明发言'></textarea>
						</view>
					</view>
					<view class="box-border-box p-24">
						<view class="save-box" @click.stop="save()">评论</view>
					</view>

				</view>
				<view class="head-pop flex-justify-space align-items-center mb-24">
					<view class=""></view>
					<view class="align-items-center">
						<view class="fs-36 fc-0 fw-600 mr-4">
							评论
						</view>
						<view class="fs-24 fc-9">
							({{remarkData.list.length}})
						</view>
					</view>
					<uni-icons @click.stop="closeMsg()" type="closeempty" size="24"></uni-icons>
				</view>

				<view v-if="remarkData.list.length === 0" class="scroll-view-css">
					<EnBlank :customSrc='true'>
						<template v-slot:blankImg>
							<image class="black-custom-img" src="@/static/img/common/no-order.png" mode=""></image>
						</template>
					</EnBlank>
				</view>

				<view v-else class="scroll-view-css box-border-box plr-24">
					<view class="list-box flex-justify-space" v-for="(item,i) in remarkData.list" :key="i">
						<image class="list-box-img" :src="item.head_img" mode="scaleToFill"></image>
						<view class="flex-1 p-b-20">
							<view class=" flex-justify-space">
								<view class=" b-b-F9F9F9 mr-20">
									<view class="fs-28 fw-400 fc-9 mb-8 align-items-center">
										{{item.nickname}}
										<span v-if="item.is_author == 1"
											class='only-box text-align-center fs-24 fc-41ABF5 ml-10'>作者</span>
										<span v-if="item.is_self == 1" class="fs-28 fc-6 ml-10">我</span>
									</view>
									<view class="fs-30 fw-400 mb-8" @click.stop="openInput(1,item)">
										{{item.content}}
									</view>
									<view class="display-flex mb-8">
										<view class="fs-24 fw-400 fc-9 mr-6">{{item.created_date}}</view>
										<uni-icons v-if="item.is_self == 1" @click="delInfo(item)" type="trash"
											size="16"></uni-icons>
									</view>
								</view>
								<view class="display-flex" @click.stop="handUp(2,item)">
									<uni-icons class="mr-8" type="hand-up" size="20"
										:color="item.is_like==1?'#FD5C02':'#999'"></uni-icons>
									<view class="fs-24 fw-400 mt-5" :class="item.is_like==1?'fc-FD5C02':'fc-9'">
										{{item.like}}
									</view>
								</view>
							</view>
							<view v-if="item.isOpen" class="fs-24 fc-6 text-align-center mb-12"
								@click="openReply(1,item)">展开更多评论</view>
							<!-- 回复 -->
							<view class="mb-16" v-if="item.replyList.length > 0">
								<view class="list-box flex-justify-space" v-for="(info,index) in item.replyList"
									:key="index">
									<image class="list-box-img" :src="info.head_img" mode="scaleToFill"></image>
									<view class="flex-1">
										<view class=" flex-justify-space">
											<view class=" b-b-F9F9F9 mr-20">
												<view class="fs-28 fw-400 fc-9 mb-8 align-items-center">
													{{info.nickname}}
													<span v-if="info.is_author == 1"
														class='only-box text-align-center fs-24 fc-41ABF5 ml-10'>作者</span>
													<span v-if="info.is_self == 1" class="fs-28 fc-6 ml-10">我</span>
												</view>
												<view class="fs-30 fw-400 mb-8" @click.stop="openInput(2,info)">
													{{info.content}}
												</view>
												<view class="display-flex mb-8">
													<view class="fs-24 fw-400 fc-9 mr-6">{{info.created_date}}</view>
													<uni-icons class="fs-24" v-if="info.is_self == 1"
														@click="delInfo(item)" type="trash"></uni-icons>
												</view>
											</view>
											<view class="display-flex" @click.stop="handUp(2,info)">
												<uni-icons type="hand-up" size="20"
													:color="info.is_like==1?'#FD5C02':'#999'"></uni-icons>
												<view class="fs-24 fw-400 mt-5"
													:class="info.is_like==1?'fc-FD5C02':'fc-9'">{{info.like}}</view>
											</view>
										</view>
									</view>
								</view>
								<view v-if="item.replyList.length < item.count"
									class="fs-24 fc-6 text-align-center mb-12" @click="openReply(2,item)">展开更多评论</view>
							</view>

						</view>
					</view>
					<view v-if="remarkData.list.length < remarkData.total" class="text-align-center fs-26"
						@click="scrolltolowerList">加载更多评论</view>
				</view>

				<view class="input-box text-align-left fs-28 fc-9 box-border-box plr-24" @click.stop="openInput(0,'')">
					友善评论，文明发言</view>
			</view>

		</uni-popup>
	</view>
</template>

<script>
	import EnBlank from "@/components/en-utils/en-blank/en-blank";
	import {
		getAlumniList,
		setAlumniLike,
		getRemarkList,
		alumniReport,
		setCreateRemark,
		setRemarkLike,
		delRemark,
		alumniBanner
	} from '@/api/alumni.js';
	import {
		getCommonText
	} from '@/api/common.js'
	import {
		getTopic
	} from '@/api/category.js';
	import tools from '@/service/tools';

	export default {
		components: {
			EnBlank
		},
		data() {
			return {
				bgckgroundBox: '',
				BarH: 0,
				bannerList: [],
				dotStyle: {
					width: 6,
					bottom: 6,
					backgroundColor: 'rgba(51, 51, 51,0.3)',
					border: '1px rgba(0,0,0,0) solid',
					color: '#fff',
					selectedBackgroundColor: 'rgba(79, 179, 239,0.9)',
					selectedBorder: '1px rgba(0,0,0,0) solid'
				},
				current: 0,
				isShowIpnut: false,
				classList: [],
				total: 0,
				list: [],
				fromData: {
					topic_id: 0,
					orderBy: 1, //1最新 2最热 3最多评论
					school_id: '',
					page: 1,
				},
				isAJAX: false,
				schoolData: {
					school_name: '',
				},
				// 举报
				reportData: {
					news_id: '',
					content: '',
				},
				// 一级评论
				remarkData: {
					remark_id: '',
					news_id: '',
					total: 0,
					list: [],
					page: 1,
				},
				// 发起评论
				msgData: {
					news_id: '',
					remark_id: '',
					content: '',
					reply_id: '',
				},
				// 回复评论
				replyData: {
					page: 1,
				},
				isAjax: false,
				alumni_str: '' // 校友圈提示
			}
		},
		onShow() {
			uni.$once('operateType', type => {
				if (type) {
					let circleSchoolId = uni.getStorageSync('circleSchoolId');
					let schoolName = uni.getStorageSync('school_name');
					let circleSchoolName = uni.getStorageSync('circleSchoolName');
					this.schoolData.school_name = circleSchoolId ? circleSchoolName : schoolName;
					this.classList = [];
					this.getTopic();
					this.list = [];
					this.fromData.page = 1;
					this.getList();
					this.getCommonText()
				}
			})
		},
		onPageScroll(e) {
			if (e.scrollTop > 1) {
				this.bgckgroundBox = '#fff';
			} else {
				this.bgckgroundBox = 'transparent';
			}
		},
		created() {
			uni.getSystemInfo({
				success: (e) => {
					let statusBarH = e.statusBarHeight + 10
					let custom = 0;
					custom = wx.getMenuButtonBoundingClientRect()
					let customBarH = custom.height;
					this.BarH = statusBarH + customBarH;
				}
			})
		},
		mounted() {
			uni.$on('circleDataUp', (data) => {
				console.log(data, '*********************');
				this.list.forEach((v, k) => {
					if (v.news_id == data.news_id) {
						v.like = data.like
						v.remark = data.remark
						v.heat = data.heat
						v.is_like = data.is_like
					}
				})
				this.$forceUpdate()
			})
			let circleSchoolId = uni.getStorageSync('circleSchoolId');
			let schoolName = uni.getStorageSync('school_name');
			let circleSchoolName = uni.getStorageSync('circleSchoolName');
			this.schoolData.school_name = circleSchoolId ? circleSchoolName : schoolName;
			this.classList = [];
			this.getTopic();
			this.list = [];
			this.fromData.page = 1;
			this.getList();
			this.alumniBanner()
			this.getCommonText()
		},
		methods: {
			bannerClock(item) {},
			alumniBanner() {
				alumniBanner().then((res) => {
					if (res.code === 1) {
						this.bannerList = res.data
					}
				})
			},
			change(e) {
				this.current = e.detail.current
			},
			getCommonText() {
				getCommonText().then((res) => {
					if (res.code == 1) {
						this.alumni_str = res.data.alumni_str
					}
				})
			},
			toBack() {
				tools.leftClick()
			},
			toSelectSchool() {
				// uni.navigateTo({
				// 	url: '/pages-address/select-school?type=2'
				// })
			},
			getTopic() {
				getTopic().then((res) => {
					if (res.code === 1) {
						this.classList = res.data;
						this.classList.unshift({
							image: require('@/static/img/school/icon.png'),
							name: '全部贴子',
							id: 0
						});
					}
				})
			},

			selectOrderBuy(type) {
				if (this.fromData.orderBy != type) {
					this.fromData.orderBy = type;
					this.list = [];
					this.fromData.page = 1;
					this.getList();
				}
			},
			selectTopicId(id) {
				if (this.fromData.topic_id != id) {
					this.fromData.topic_id = id;
					this.list = [];
					this.fromData.page = 1;
					this.getList();
				}
			},

			getList() {
				let circleSchoolId = uni.getStorageSync('circleSchoolId');
				let school_id = uni.getStorageSync('school_id');
				this.fromData.alumni_school_id = circleSchoolId ? circleSchoolId : school_id
				if (this.isAjax) {
					return
				}
				this.isAjax = true
				getAlumniList(this.fromData).then((res) => {
					if (res.code === 1) {
						this.list = [...this.list, ...res.data.items];
						this.total = res.data.total;
					}
					this.isAjax = false
				})
			},

			scrolltolower() {
				if (this.list.length < this.total) {
					this.fromData.page += 1;
					this.getList();
				}
			},

			// 点赞
			handUp(type, item) {
				if (this.isAJAX) {
					return
				}
				this.isAJAX = true;
				let is_like = item.is_like == 1 ? 0 : 1;
				if (type == 1) {
					// 点赞贴子
					setAlumniLike({
						news_id: item.news_id,
						is_like: is_like
					}).then((res) => {
						this.handUpFun(res, item, is_like)
					})
				} else {
					// 点赞评论
					setRemarkLike({
						news_id: item.news_id,
						is_like: is_like,
						remark_id: item.id
					}).then((res) => {
						this.handUpFun(res, item, is_like)
					})
				}
			},
			// 点赞公共回复
			handUpFun(res, item, is_like) {
				if (res.code === 1) {
					item.is_like = is_like;
					if (is_like == 0) {
						item.like -= 1
					} else {
						item.like += 1
					}
					this.isAJAX = false;
					tools.success(res.msg, 1000);
				} else {
					this.isAJAX = false;
					tools.error(res.msg, 1000);
				}
			},
			// 获取回复列表
			openReply(type, item) {
				// type 1获取其他 2加载更多
				if (this.isAJAX) {
					return
				}
				this.isAJAX = true;
				if (type == 1) {
					item.replyList = [];
					this.replyData.page = 1;
				} else {
					this.replyData.page += 1;
				}

				getRemarkList({
					news_id: item.news_id,
					remark_id: item.id,
					page: this.replyData.page
				}).then((res) => {
					if (res.code === 1) {
						this.isAJAX = false;
						item.replyList = [...item.replyList, ...res.data.items];
						item.isOpen = false;
					} else {
						this.isAJAX = false;
						tools.error(res.msg)
					}
				})
			},
			// 打开评论
			openMsg(item) {
				this.remarkData.news_id = item.news_id;
				this.msgData.news_id = item.news_id;
				this.remarkData.remark_id = 0;
				this.getMsg();
			},
			// 获取评论
			getMsg() {
				if (this.isAJAX) {
					return
				}
				this.isAJAX = true;
				getRemarkList({
					news_id: this.remarkData.news_id,
					remark_id: this.remarkData.remark_id,
					page: this.remarkData.page
				}).then((res) => {
					if (res.code === 1) {
						this.isAJAX = false;
						this.remarkData.list = [...this.remarkData.list, ...res.data.items];
						this.remarkData.total = res.data.total;
						this.remarkData.list.forEach((v) => {
							v.replyList = [];
							if (v.count > 0) {
								v.isOpen = true;
							}
						})
						this.$refs.popmsg.open();
					} else {
						this.isAJAX = false;
						tools.error(res.msg)
					}
				})
			},
			// 加载更多评论
			scrolltolowerList() {
				if (this.remarkData.list.length < this.remarkData.total) {
					this.remarkData.page += 1;
					this.getMsg();
				}
			},
			// 关闭评论
			closeMsg() {
				this.$refs.popmsg.close();
				this.remarkData.list = [];
				this.remarkData.page = 1;
				this.msgData.news_id = '';
				this.remarkData.remark_id = '';
			},
			openInput(type, item) {
				if (type == 0) {
					this.msgData.remark_id = 0;
				} else if (type == 1) {
					this.msgData.remark_id = item.id;
					this.msgData.reply_id = item.m_id;
				} else {
					this.msgData.remark_id = item.remark_id;
					this.msgData.reply_id = item.m_id;
				}
				this.isShowIpnut = true;
			},
			closeInput() {
				this.isShowIpnut = false;
				this.msgData.remark_id = '';
				this.msgData.content = '';
				this.msgData.reply_id = '';
			},
			save() {
				if (this.isAJAX) {
					return
				}
				this.isAJAX = true;
				setCreateRemark(this.msgData).then((res) => {
					if (res.code == 1) {
						tools.success('评论成功', 1000)
						setTimeout(() => {
							this.isAJAX = false;
							this.closeInput()
							if (this.msgData.remark_id == 0) {
								this.remarkData.list = [];
								this.remarkData.page = 1;
								this.getMsg();
								this.list = [];
								this.fromData.page = 1;
								this.getList();
							} else {
								this.remarkData.list = [];
								this.remarkData.page = 1;
								this.getMsg();
							}
						}, 1500)
					} else {
						this.isAJAX = false;
						tools.error(res.msg)
					}
				})
			},

			delInfo(item) {
				if (this.isAJAX) {
					return
				}
				this.isAJAX = true;
				delRemark({
					remark_id: item.id
				}).then((res) => {
					if (res.code === 1) {
						tools.success('删除成功', 1000)
						setTimeout(() => {
							this.isAJAX = false;
							this.remarkData.list = [];
							this.remarkData.page = 1;
							this.getMsg();
							this.list = [];
							this.fromData.page = 1;
							this.getList();
						}, 1500)
					} else {
						this.isAJAX = false;
						tools.error(res.msg)
					}
				})
			},

			// 添加贴子
			add() {
				uni.navigateTo({
					url: "/pages-school/add-circle"
				})
			},
			// 打开举报
			openRepot(item) {
				this.reportData.news_id = item.news_id;
				this.$refs.popup.open();
			},
			// 举报
			closePop(type) {
				if (type === 1) {
					this.reportData.news_id = '';
					this.reportData.content = '';
					this.$refs.popup.close();
				} else {
					if (this.isAJAX) {
						return
					}
					this.isAJAX = true;
					alumniReport(this.reportData).then((res) => {
						if (res.code === 1) {
							tools.success(res.msg, 1000)
							setTimeout(() => {
								this.isAJAX = false;
								this.closePop(1);
							}, 1000)
						} else {
							tools.error(res.msg);
							this.isAJAX = false;;
						}
					})
				}
			},
			toDet(item) {
				uni.navigateTo({
					url: "/pages-school/circle-info?news_id=" + item.news_id
				})
			},
		},
	}
</script>
<style>
	body {
		background: linear-gradient(to bottom, #F5F4F9, #fff padding-bottom: env(safe-area-inset-bottom));
	}
</style>
<style scoped lang="scss">
	.select-box{
		position: sticky;
		left: 0;
		z-index: 10;
	}
	.swiper {
		width: 100%;
		height: 260rpx;
		border-radius: 20rpx;
	}

	.swiper-item {
		width: 100%;
		height: 260rpx;
		border-radius: 20rpx;
	}

	.card-2 {
		word-wrap: break-word;
	}

	.navCustom {
		position: relative;
		width: 100%;
	}

	.nav-left {
		position: absolute;
		left: 0;
	}

	.nav-title {
		// position: absolute;
		// left: 50%;
		// top: 20rpx;
	}

	.label-box {
		padding: 0 18rpx;
		height: 48rpx;
		line-height: 48rpx;
	}

	.wz {
		width: 32rpx;
		height: 32rpx;
	}

	.input-box {
		width: 100%;
		height: 80rpx;
		background: #F2F2F2;
		border-radius: 200rpx;
		line-height: 80rpx;
	}

	.b-bottom {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		background: linear-gradient(105deg, #57CAFF 0%, #41ABF5 100%);
		border-radius: 200rpx;
	}

	.school-circle {
		// padding-left: 24rpx;
		// padding-right: 24rpx;
		position: relative;

		.pop-h-20 {
			height: 18vh !important;
		}

		.pop-h-30 {
			height: 30vh !important;
		}

		.pop-box {
			width: 100%;
			height: 60vh;
			background-color: #fff;
			border-radius: 24rpx 24rpx 0rpx 0rpx;
			display: flex;
			flex-direction: column;

			.item-box {
				width: 100%;
				height: 92rpx;

				border-radius: 200rpx;
				line-height: 92rpx;
				text-align: center;
				margin-bottom: 24rpx;
			}
		}

		.pop-msg {
			height: 80vh;
			position: relative;

			.pop-input {
				position: absolute;
				width: 100%;
				height: 80vh;
				background-color: #fff;
				bottom: 0;
				left: 0;
				border-top: 1rpx solid #ccc;
				border-radius: 20rpx 20rpx 0 0;
				display: flex;
				flex-direction: column;

				.save-box {
					text-align: center;
					line-height: 88rpx;
					font-weight: 600;
					font-size: 32rpx;
					color: #FFFFFF;
					width: 100%;
					height: 80rpx;
					border-radius: 200rpx;
					background: linear-gradient(105deg, #57CAFF 0%, #41ABF5 100%);
				}
			}

			.head-pop {
				padding-bottom: 34rpx !important;
				border-bottom: 1rpx solid #F2F2F2;
			}

			.list-box {
				.list-box-img {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					margin-right: 16rpx;
				}

				.only-box {
					padding: 4rpx 16rpx;
					background: rgba(65, 171, 245, 0.1);
					border-radius: 8rpx 8rpx 8rpx 8rpx;
				}

				.msg-img {
					width: 144rpx;
					height: 144rpx;
					border-radius: 12rpx;
					margin-right: 5rpx;
					margin-bottom: 5rpx;
				}

				.msg-img:nth-child(3n) {
					margin-right: 0rpx;
				}

				.msg-img-1 {
					width: 100rpx !important;
					height: 100rpx !important;
				}
			}
		}

		.ft-img {
			width: 30rpx;
			height: 32rpx;
		}

		.circle-add {
			background: linear-gradient(0deg, #55A7FF, #1561F6);
			border-radius: 50%;
			width: 100rpx;
			height: 100rpx;
			position: fixed;
			right: 38rpx;
			bottom: 126rpx;
			z-index: 2;
		}

		.w-400 {
			width: 400rpx;
		}

		.bg-box {
			width: 100%;
			height: 260rpx;
			filter: blur(80rpx);
			background: linear-gradient(to right, #E8E5F5, #E8EBF9, #D9EBFA);
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}

		.ts-box {
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #efefef;
		}

		.tz-img {
			width: 48rpx;
			height: 48rpx;
			margin-right: 14rpx;
		}

		.nav-box {
			width: 100%;
			padding: 27rpx 50rpx 47rpx;

			.nav-item {
				margin-right: 48rpx;
				width: 90rpx;
				display: inline-block;
				// height: auto;
				position: relative;

				.nav-icon {
					width: 90rpx;
					height: 90rpx;
					margin: 0 auto 24rpx;
				}
			}

			.nav-item:last-child {
				margin: 0;
			}
		}

		.type-box {
			padding: 25rpx 30rpx;
			background: #F2F3F7;

			.box-s {
				font-weight: 600 !important;
				color: #F6ABAC;
				box-sizing: border-box;
				border: 1rpx solid #F6ABAC;
			}

			.box-1 {
				padding: 9rpx 19rpx;
				margin-right: 48rpx;
				border-radius: 20rpx;
				font-size: 24rpx;
				font-weight: 400;
				box-sizing: border-box;
			}
		}

		.card-box {
			width: 100%;
			min-height: 100rpx;
			padding: 30rpx 30rpx 50rpx;
			border-bottom: 1rpx solid #EEEEEE;

			.card-head {
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}

			.hot-img {
				width: 40rpx;
				height: 40rpx;
				margin-left: auto;
			}

			.card-3 {
				.card-3-img {
					width: 182rpx;
					height: 182rpx;
					border-radius: 12rpx;
					margin-right: 6rpx;
					margin-bottom: 6rpx;
				}

				.card-3-img:nth-child(3n) {
					margin-right: 0rpx;
				}
			}

			.card-4 {
				view {
					padding: 4rpx 16rpx;
					background: #F2F2F2;
					border-radius: 200rpx;
					font-size: 24rpx;
					color: #999;
					margin-right: 20rpx;
					margin-bottom: 10rpx;
				}
			}

			.card-5 {
				.info-img {
					width: 40rpx;
					height: 40rpx;
					margin-right: 8rpx;
				}
			}
		}
	}
</style>