WenWuGuanJia/pages/shouhu/shouhu.vue

<template>
	<view class="box">
		<u-navbar title="守护" :placeholder="true" bgColor="rgba(255,255,255,0)" :leftIconSize="0" titleStyle="font-weight:bold;color:#000000"></u-navbar>
		<!-- 审核中的志愿者信息 -->
		<view class="" v-if="volunteerDetails.status == '0' || volunteerDetails.status == '-1'">
			<view class="bohui">
				<view class="" style="margin-top: 50rpx">
					<image style="border: 4rpx #ce956d solid; width: 160rpx; height: 200rpx" src="https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/toux.png"></image>
				</view>
				<view style="margin-top: 30rpx; position: relative; line-height: 65rpx; margin-left: 20rpx">
					<view class="">姓名：{{ volunteerDetails.name }}</view>
					<view class="fg"></view>
					<view class="">手机：{{ volunteerDetails.mobile }}</view>
					<view class="fg"></view>
					<view class="">地址：{{ volunteerDetails.address }}</view>
					<view class="fg"></view>
					<view class="">单位：{{ volunteerDetails.unit_name }}</view>
					<view class="fg"></view>
					<view class="">身份证：{{ volunteerDetails.id_card }}</view>
					<view class="fg"></view>
					<view class="">志愿者状态：{{ volunteerDetails.status_text }}</view>
					<view class="fg"></view>
					<view class="" @click="crDetailsBtn(volunteerDetails.cr_list[0].id)">认领的文物：{{ volunteerDetails.cr_list[0].title || '暂无' }}</view>
					<view class="fg"></view>
					<view class="">认领描述：{{ volunteerDetails.cr_list[0].desc ? volunteerDetails.cr_list[0].desc : '' }}</view>
					<view class="fg"></view>
					<view v-if="volunteerDetails.status == '-1'" class="">反馈信息：{{ volunteerDetails.feedback ? volunteerDetails.feedback : '' }}</view>
					<view v-if="volunteerDetails.status == '-1'" class="fg"></view>
					<view v-if="volunteerDetails.status == '-1'" class="item_xg" @click="modifyBtn">
						<image style="width: 40rpx; height: 40rpx" src="https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/zyz_xg.png"></image>
						<view>去修改</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 志愿者 -->
		<view v-else>
			<view class="" style="position: relative">
				<view class="sh_rw">
					<view class="item_rw" @click="guardBtn">
						<view>我的守护</view>
						<image style="width: 40rpx; height: 40rpx" src="/static/img/more.png"></image>
					</view>
				</view>
			</view>
			<!-- 轮播图 -->
			<view class="swiper_box">
				<u-swiper keyName="image" showTitle :autoplay="true" :height="160" :list="list2" @click="swiperBtn" circular radius="5" bgColor="transparent"></u-swiper>
			</view>
			<!-- 预警处理 -->
			<!-- 		<view class="xwgg">预警处理</view>
			<view class="gg_box">
				<view style="font-size: 32rpx; color: #444444">
					您有
					<text style="color: #ff542d">3</text>
					条预警事件待处理
				</view>
				<view @click="earlyWarning" class="gg_item" v-for="item in 2" :key="item">
					<view class="" style="display: flex; align-items: center">
						<image
							src="https://feicheng.16fw.cn:1443/uploads/20230425/suo34008e6935b8f2e920d95d58f8039a71.jpg"
							style="margin-right: 30rpx; width: 80rpx; height: 80rpx"
						></image>
						<view class="">
							<view>疑似明火</view>
							<view style="font-size: 24rpx; color: rgba(68, 68, 68, 0.4)">发生时间 2024-2-1 14:24:30</view>
						</view>
					</view>
					<view style="display: flex; align-items: center">
						<text>去处理</text>
						<image style="width: 40rpx; height: 40rpx" src="/static/img/more.png"></image>
					</view>
				</view>
			</view> -->
			<!-- 巡查 -->

			<!-- 		<view v-if="patrolList.length > 0" class="gg_box" style="padding: 0 20rpx 20rpx 20rpx">
				<view @click="patrolBtn(item)" class="gg_item" v-for="item in patrolList" :key="item.id">
					<image :src="item.image" style="margin-right: 30rpx; width: 128rpx; height: 128rpx"></image>
					<view style="display: flex; align-items: center">
						<view>
							<view style="width: 330rpx">{{ item.desc }}</view>
							<view style="font-size: 24rpx; color: #81acb0">{{ item.title }}</view>
						</view>
					</view>
					<view style="display: flex; align-items: center">
						<text>去执行</text>
						<image style="width: 40rpx; height: 40rpx" src="/static/img/more.png"></image>
					</view>
				</view>
			</view> -->
			<!-- 是志愿者在显示内容 -->
			<!-- 修改不是志愿者也显示该页面 暂时注释 -->

			<view>
				<view class="map_tit" style="margin-left: 90rpx; margin-bottom: 30rpx">
					<image style="width: 211rpx; height: 52rpx" src="/static/img/right_img.png"></image>
					<view class="">巡查任务</view>
					<image style="width: 211rpx; height: 52rpx" src="/static/img/left_img.png"></image>
				</view>

				<view class="" style="width: 92%; display: flex; justify-content: center; margin: auto">
					<u-tabs
						keyName="title"
						:list="updatedList"
						@click="tabsClick"
						lineWidth="30"
						lineColor="#f56c6c"
						:activeStyle="{
							color: '#303133',
							fontWeight: 'bold',
							transform: 'scale(1.05)'
						}"
						:inactiveStyle="{
							color: '#606266',
							transform: 'scale(1)'
						}"
						itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
					></u-tabs>
				</view>
				<view class="gg_box2">
					<view class="gg_item2" v-for="(item, index) in 3" :key="item.index">
						<view class="sytxt">
							{{ syVal }}
						</view>
						<view @click="patrolBtn(index + 1)" v-if="index == 0">
							<view class="rwbg">上半月</view>
							<view class="rwbg">每月1号至15号</view>
							<button class="rwbg2" style="padding: 0" :style="{ color: getTextColor(index + 1) }">
								{{ (index + 1) | completedBtn }}
							</button>
						</view>

						<view @click="patrolBtn(index + 1)" v-if="index == 1">
							<view class="rwbg">下半月</view>
							<view class="rwbg">每月16号至31号</view>
							<button class="rwbg2" style="padding: 0" :style="{ color: getTextColor(index + 1) }">{{ (index + 1) | completedBtn }}</button>
						</view>

						<view class="rwbg" @click="patrolBtn(index + 1)" v-if="index == 2">
							<view class="rwbg">额外巡查</view>
							<view class="rwbg">任意时间</view>
							<!-- <view class="" style="display: flex"> -->
							<button class="rwbg2" style="padding: 0" :style="{ color: getTextColor(index + 1) }">
								{{ (index + 1) | completedBtn }}
							</button>
							<!-- <button style="height: 96rpx; font-size: 28rpx; line-height: 50rpx" class="rwbg2" :style="{ color: getTextColor(index + 1) }">线上</button> -->
							<!-- </view> -->
						</view>
					</view>
				</view>

				<!-- 投稿 -->
				<view class="map_tit" style="margin-left: 125rpx">
					<image style="width: 211rpx; height: 52rpx" src="/static/img/right_img.png"></image>
					<view class="">投稿</view>
					<image style="width: 211rpx; height: 52rpx" src="/static/img/left_img.png"></image>
				</view>
				<view class="gg_box">
					<view class="gg_item" @click="touGaoBtn">
						<view class="" style="display: flex; align-items: center">
							<view class="" style="width: 128rpx; margin-right: 30rpx">
								<u-swiper keyName="image" :autoplay="true" :height="64" :list="list2" circular radius="5" bgColor="transparent"></u-swiper>
							</view>
							<view class="">
								<view>
									<view class="rw_tit1">发布我与文物的故事</view>
									<view class="rw_tit2">发布文物最新动态</view>
									<view class="rw_tit3">积分奖励</view>
								</view>
							</view>
						</view>
						<view class="yaoqing">
							<view class="">去投稿</view>
							<image style="width: 40rpx; height: 40rpx" src="/static/img/more.png"></image>
						</view>
					</view>
				</view>
				<view class="map_tit" style="margin-left: 125rpx">
					<image style="width: 211rpx; height: 52rpx" src="/static/img/right_img.png"></image>
					<view class="">闯关</view>
					<image style="width: 211rpx; height: 52rpx" src="/static/img/left_img.png"></image>
				</view>
				<view class="xxrw_box">
					<view class="xuexi" @click="xueXiBtn">
						<image src="/static/img/xx.png" class="img"></image>
					</view>
					<view class="">
						<view class="dati" @click="daTiBtn">
							<image src="/static/img/cg.png" class="img"></image>
						</view>
						<view @click="chuTiBtn" class="dati" style="margin-top: 20rpx">
							<image src="/static/img/ct.png" class="img"></image>
						</view>
					</view>
					<view class="xuexi" @click="show = true">
						<image src="/static/img/dk.png" class="img"></image>
					</view>
				</view>
			</view>
		</view>

		<u-popup :show="show" @close="close" mode="center" :round="10" bgColor="#fdf8ed">
			<view style="width: 600rpx; height: 300rpx; font-size: 36rpx; text-align: center; line-height: 300rpx">每日登录即可自动打卡</view>
		</u-popup>
		<!-- 去报名弹层 -->
		<u-popup bgColor="#f2c8a2" :show="volhow" @close="close" mode="center" customStyle="width:600rpx;padding: 30rpx;" round="20rpx">
			<view style="text-align: center; font-size: 30rpx">您当前还不是志愿者</view>
			<view style="margin-top: 20rpx"></view>
			<view class="bt_box">
				<view class="bt1" @click="volhow = false">取消</view>
				<view @click="goSignUp" class="bt2">去报名</view>
			</view>
		</u-popup>
		<view class="box-guanzhu3" v-if="loginShow">
				<view class="guanzhu-1" @click="loginPopUp()">点击登录，获取更多资讯</view>
			</view>
	</view>
</template>

<script>
let that;
export default {
	data() {
		return {
			syVal: '',
			cr_id: '',
			updatedList: [],
			tabsList: [],
			volunteer_id: '',
			volhow: false /* 非志愿者弹层 */,
			volunteerShow: false /* 是否是志愿者控制页面去报名弹层 */,
			Tab: 0,
			loginShow:false,
			show: false,
			latitudeAndLongitude: {
				latitude: '',
				longitude: ''
			},
			volunteerDetails: {} /* 志愿者详情 */,
			patrolList: [],
			// 连线
			// polylines: [
			// 	{
			// 		points: [
			// 			{ latitude: 24.51947, longitude: 118.19673 },
			// 			{ latitude: 24.54995, longitude: 118.10997 }
			// 		],
			// 		color: '#000',
			// 		width: 2
			// 	},
			// 	{
			// 		points: [
			// 			{ latitude: 24.54995, longitude: 118.10997 },
			// 			{ latitude: 24.531, longitude: 118.1918 },
			// 			{ latitude: 24.51947, longitude: 118.19673 }
			// 			// 更多点...
			// 		],
			// 		color: '#FF0000',
			// 		width: 2
			// 	}
			// ],

			list2: [
				{
					image: 'https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/zyz_gr.png'
				},

				{
					image: 'https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/gj_zyjz.jpg'
				}
			]
		};
	},
	onLoad() {
		that = this;
		
	},

	onShow() {
		
		this.loadGlobalFont();
		this.user = this.$common.userInfo();
		if (this.user === 'undefined' || this.user === '' || this.user === [] || this.user === null || this.user === false) {
			/* 跳转到登录页 */
			this.loginShow=true;
			// this.$common.toLogin();
		} else {
			// console.log(this.user);
			// 如果登录自动打卡
			this.loginShow=false;
			this.details();
		}
	},
	filters: {
		completedBtn(t) {
			let s = that.getitem(t);
			return s.progress_text;
		}
	},
	beforeCreate() {
		that = this;
	},
	methods: {
		// 根据任务状态控制字体颜色
		getTextColor(index) {
			const item = this.getitem(index);
			if (item.progress_text === '通过') {
				return '#5ac725';
			} else if (item.progress_text === '待审核') {
				return '#3c9cff ';
			} else if (item.progress_text === '待提交') {
				return '#f1a532';
			} else if (item.progress_text === '驳回') {
				return '#e45656';
			} else if (item.progress_text === '已过期') {
				return '#909399';
			} else {
				return '#c87d5a'; // 默认或其他状态的文字颜色
			}
		},

		loginPopUp(){
			this.$common.toLogin();
		},
		// 已完成
		getitem(t) {
			let s = {
				id: '',
				cr_id: '',
				cr_code: '',
				progress_text: '未派发'
			};
			if (t == 1) {
				this.patrolList.forEach((item, index) => {
					const date = new Date(item.created_at.replace(' ', 'T'));
					let time = date.getDate();
					if (time < 15 && item.type == 1) {
						s = item;
					}
				});
			}
			if (t == 2) {
				this.patrolList.forEach((item, index) => {
					const date = new Date(item.created_at.replace(' ', 'T'));
					let time = date.getDate();
					if (time > 15 && item.type == 1) {
						s = item;
					}
				});
			}
			if (t == 3) {
				s.id = 'new';
				s.cr_id = this.cr_id;
				s.progress_text = '去巡查';
				this.patrolList.forEach((item, index) => {
					const date = new Date(item.created_at.replace(' ', 'T'));
					let time = date.getDate();

					if (item.type == 2 && s.id == 'new') {
						s = item;
					}
				});
			}
			return s;
		},
		// 巡查
		patrolBtn(t) {
			if (this.volunteerShow) {
				that.volhow = true;
			} else {
				let item = this.getitem(t);
				if (item.progress_text == '未派发') {
					this.$common.errorToShow('当前任务还未派发');
				} else if (item.progress_text == '已过期') {
					this.$common.errorToShow('当前任务已过期');
				} else if (item.progress_text == '通过') {
					this.$common.errorToShow('当前任务已完成');
				} else {
					//判断 额外为巡查任务并且已完成则获取新任务
					// console.log(item, 'itemoee');
					if (item.type == 2 && item.progress == 3) {
						item.id = 'new';
					}
					console.log(item, 7878);
					uni.navigateTo({
						url: '/shouhu_fenbao/xunCha/xunCha?id=' + item.id + '&cr_id=' + item.cr_id + '&cr_code=' + item.cr_code
					});
				}
			}
		},
		// 志愿者详情判断是否为志愿者
		details() {
			this.$api.details({ main_body_id: 1 }, function (res) {
				if (res.code == 1) {
					if (res.data != false && res.data.id != undefined) {
						that.volunteerDetails = res.data;

						// console.log(that.volunteerDetails.cr_list, '是志愿者');
						// 剔除认领未审核通过的文物
						that.updatedList = that.volunteerDetails.cr_list.filter((item) => item.status == 1);
						that.cr_id = that.updatedList[0].id;
						// console.log(that.volunteerDetails, '是志愿者');
						if (that.syVal === '') {
							that.syVal = that.volunteerDetails.cr_list[0].title;
						}
						//获取syVal当前文物名的文物数据
						let getPatrolTaskCr = that.updatedList.filter((item) => item.title === that.syVal);
						that.getPatrolTask(getPatrolTaskCr[0]);
						that.volhow = false;
						that.volunteerShow = false;
						if (res.data.cr_list.length > 0) {
							// 剔除认领但未审核通过的文物
							that.list2 = res.data.cr_list.filter((item) => item.status == 1);
						}
					} else {
						// 控制非志愿者弹层
						that.volhow = true;
						that.volunteerShow = true;
						// console.log(that.volunteerShow, '非志愿者点击11');
						// console.log(res, '非志愿者');
					}
				} else {
					console.log(res);
				}
			});
		},
		goSignUp() {
			uni.navigateTo({
				url: '/index_fenbao/fuWu/baoMing/renLing'
			});
		},
		tabsClick(i) {
			this.getPatrolTask(i);
			this.syVal = i.title;
			this.cr_id = i.id;
		},
		// 志愿者任务列表
		getPatrolTask(i) {
			// console.log(i, 888);
			this.$api.getPatrolTask({ created_at: 'month', main_body_id: 1, volunteer_id: this.volunteerDetails.id }, function (res) {
				if (res.code === 1) {
					// 剔除审核通过和待审核的任务&& item.progress != 3 && item.progress != 2
					that.patrolList = res.data.filter((item) => item.cr_title === i.title);
					// console.log(that.patrolList, '任务9999');
					// 首先计算badge的value
					let badgeValue = that.patrolList.length;
					// 然后遍历updatedList中的每个对象，并添加badge属性
					that.updatedList.forEach(function (item) {
						// 每次循环都重新计算与当前item相关的patrolList
						let matchingPatrolList = res.data.filter(function (patrolItem) {
							// 已通过和待审核的不计徽标数
							return patrolItem.cr_title === item.title && patrolItem.progress != 3 && patrolItem.progress != 2 && patrolItem.progress != -2;
						});

						// 计算badge的value
						let badgeValue = matchingPatrolList.length;

						// 添加badge属性
						item.badge = {
							value: badgeValue
						};
					});
				} else {
					// console.log(res, '任务');
				}
			});
		},

		// 我的守护
		guardBtn() {
			if (this.volunteerShow) {
				// console.log(this.volunteerShow, '非志愿者点击22');
				// 不是志愿者打开去报名弹层
				that.volhow = true;
			} else {
				// console.log(this.volunteerShow, '非志愿者点击33');
				uni.navigateTo({
					url: '/shouhu_fenbao/shouHu/woDe'
				});
			}
		},
		// 预警
		// earlyWarning() {
		// 	uni.navigateTo({
		// 		url: '/shouhu_fenbao/yuJing/yuJing'
		// 	});
		// },

		// 驳回修改资料
		modifyBtn() {
			uni.navigateTo({
				url: '/index_fenbao/fuWu/baoMing/baoMing?volunteer_id=' + this.volunteerDetails.id + '&modifyId=' + this.volunteerDetails.cr_list[0].id
			});
		},
		// 投稿
		touGaoBtn() {
			if (this.volunteerShow) {
				that.volhow = true;
			} else {
				uni.navigateTo({
					url: '/shouhu_fenbao/shouHu/touGao'
				});
			}
		},

		// 答题
		daTiBtn() {
			if (this.volunteerShow) {
				that.volhow = true;
			} else {
				uni.navigateTo({
					url: '/answer_pages/home/dashboard'
				});
			}
		},
		xueXiBtn() {
			if (this.volunteerShow) {
				that.volhow = true;
			} else {
				uni.navigateTo({
					url: '/xueYuan_fenbao/keCheng/keCheng'
				});
			}
		},
		chuTiBtn() {
			if (this.volunteerShow) {
				that.volhow = true;
			} else {
				uni.navigateTo({
					url: '/shouhu_fenbao/chuangGuan/chuTi'
				});
			}
		},
		swiperBtn(i) {
			if (this.volunteerShow) {
				that.volhow = true;
			} else {
				uni.navigateTo({
					url: '/index_fenbao/GuanLi/XiangQing?id=' + this.list2[i].id
				});
			}
		},
		crDetailsBtn(id) {
			if (this.volunteerShow) {
				that.volhow = true;
			} else {
				uni.navigateTo({
					url: '/index_fenbao/GuanLi/XiangQing?id=' + id
				});
			}
		},
		close() {
			this.show = false;
			this.volhow = false;
		},
		// 加载字体
		loadGlobalFont() {
			try {
				uni.loadFontFace({
					family: 'MyGlobalFont', // 自定义字体名
					source: 'url("https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/songTi.ttf")',
					success() {
						console.log('全局字体加载成功');
					}
				});
			} catch (error) {
				console.error('全局字体加载异常', error);
			}
		}
	}
};
</script>

<style>
/deep/.u-swiper-indicator__wrapper__dot--active {
	width: 5px !important;
}

.fg {
	width: 80rpx;
	height: 5rpx;
	background-image: linear-gradient(to right, #e6c8af, #f7e4d0);
}
.box {
	height: auto;
	min-height: 100%;
	width: 100%;
	padding-bottom: 50rpx;
	background-image: url('https://huli-app.wenlvti.net/app_static/minnanhun/image/sh_bg.png');
	background-repeat: repeat-y;
	background-size: cover;
	/* overflow-x: hidden; */
}

.zwrw {
	border: 2rpx solid #eba869;
	width: 90%;
	margin: auto;
}
.img {
	height: 100%;
	width: 100%;
}
.ranking_item {
	display: inline-block;
	width: 200rpx;
	height: 62rpx;
}
.ranking_menu {
	width: 90%;
	margin: auto;
	margin-top: 40rpx;
	display: flex;
	justify-content: space-around;
	font-size: 28rpx;
	color: rgba(68, 68, 68, 0.6);
	text-align: center;
	line-height: 60rpx;
}
.map_box {
	width: 670rpx;
	height: 670rpx;
	margin: auto;
	margin-top: 40rpx;
	overflow: hidden;
	background: #fcfdfd;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	opacity: 1;
}
.map_tit {
	display: flex;
	align-items: center;
	margin-left: 50rpx;
	margin-top: 40rpx;
	font-size: 40rpx;
	font-weight: 900;
	line-height: 52rpx;
	color: #444444;
	font-family: 'MyGlobalFont';
}
.sh_rw {
	position: absolute;
	margin: auto;
	margin-top: 24rpx;
	justify-content: space-evenly;
	display: flex;
	align-items: center;
	z-index: 9;
	top: 0;
	right: 30rpx;
	background-color: #f1d1aa;
}
.item_rw {
	width: 176rpx;
	height: 56rpx;
	align-items: center;
	text-align: center;
	display: flex;
	justify-content: center;
	border: 2rpx #eba869 solid;
	font-family: 'MyGlobalFont';
}
.item_xg {
	position: absolute;
	right: -30rpx;
	top: 10rpx;
	width: 170rpx;
	height: 50rpx;
	align-items: center;
	text-align: center;
	display: flex;
	justify-content: center;
	border: 2rpx #90523c solid;
	border-radius: 15rpx;
	font-family: 'MyGlobalFont';
}
.swiper_box {
	width: 92%;
	margin: auto;
	margin-top: 28rpx;
}
/* /deep/.u-swiper__wrapper__item__wrapper__title.data-v-6b019429 {
	width: 220rpx !important;
	height: 40rpx !important;
	margin: auto !important;
	bottom: 10rpx !important;
	text-align: center !important;
	color: #fef3e1 !important;
	font-weight: 500 !important;
	font-size: 28rpx !important;
	background-image: url('/static/img/tab.png') !important;
	background-size: 100% 100% !important;
	background-color: transparent !important;
}
/deep/.u-swiper__wrapper__item__wrapper__title.data-v-d35034ce {
	width: 220rpx !important;
	height: 40rpx !important;
	margin: auto !important;
	bottom: 10rpx !important;
	text-align: center !important;
	color: #fef3e1 !important;
	font-weight: 500 !important;
	font-size: 28rpx !important;
	background-image: url('/static/img/tab.png') !important;
	background-size: 100% 100% !important;
	background-color: transparent !important;
} */
.xwgg {
	width: 170rpx;
	height: 89rpx;
	margin: auto;
	margin-top: 50rpx;
	margin-bottom: 20rpx;
	font-size: 32rpx;
	font-weight: 900;
	text-align: center;
	line-height: 89rpx;
	letter-spacing: 1px;
	color: #feece3;
	font-family: 'MyGlobalFont';
	background-image: url('/static/img/title2.png');
	background-size: 100% 100%;
}
.xwgg2 {
	background-image: url('/static/img/title.png') !important;
	background-size: 100% 100% !important;
}

.gg_box {
	width: 670rpx;
	margin: auto;
	margin-top: 20rpx;
	padding: 20rpx;
	border: 2rpx solid #ebc9a9;
}
.gg_item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 25rpx;
	width: 630rpx;
	/* height: 80rpx; */
}
.gg_box2 {
	display: flex;
	justify-content: space-between;
	width: 92%;
	margin: auto;
	padding: 10rpx;
	border: 2rpx solid #ebc9a9;
}
.sytxt {
	position: absolute;
	top: 30rpx;
	left: 10rpx;
	opacity: 0.3;
	font-size: 32rpx;
	color: #ffffff;
	transform: rotate(35deg);
}

.gg_item2 {
	position: relative;
	width: 210rpx;
	height: 220rpx;
	text-align: center;
	border: 2rpx solid #eba869;
}
.rw_tit1 {
	font-size: 28rpx;
	color: #444444;
	line-height: 44rpx;
}
.rw_tit2 {
	font-size: 24rpx;
	color: rgba(68, 68, 68, 0.4);
	line-height: 40rpx;
}
.rw_tit3 {
	font-size: 28rpx;
	font-size: 24rpx;
	color: #81acb0;
}
.yaoqing {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 128rpx;
	height: 52rpx;
	color: #444444;
	font-size: 24rpx;
	border: 2rpx #eba869 solid;
}
.xxrw_box {
	display: flex;
	justify-content: space-between;
	width: 90%;
	margin: auto;
	margin-top: 40rpx;
}
.xuexi {
	width: 208rpx;
	height: 240rpx;
}
.dati {
	width: 208rpx;
	height: 108rpx;
}
.bohui {
	display: flex;
	justify-content: start;
	width: 100%;
	height: 920rpx;
	margin: auto;
	margin-top: 50rpx;
	padding: 60rpx 30rpx 20rpx 50rpx;
	color: #90523c;
	font-weight: 600;
	line-height: 50rpx;
	font-size: 30rpx;
	background-image: url('https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/bh_bg.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
.zhuxiao {
	width: 92%;
	margin: auto;
	margin-top: 50rpx;
	color: #90523c;
	font-weight: 600;
	line-height: 50rpx;
	text-align: center;
	font-size: 30rpx;
}
.modify_box {
	width: 660rpx;
	height: 1000rpx;
	overflow: scroll;
	padding: 20rpx;
	font-size: 36rpx;
	text-align: center;
}
.rwbg {
	height: 60rpx;
	background-color: #c87d5a;
	color: #ffffff;
}
.rwbg2 {
	/* height: 60rpx; */
	background-color: #ffffff;
	/* color: red; */
}
.bt_box {
	display: flex;
	margin-top: 50rpx;
	justify-content: space-around;
}
.bt1 {
	width: 244rpx;
	height: 78rpx;
	border: 1px solid #312520;
	border-radius: 39rpx;
	text-align: center;
	line-height: 78rpx;
	color: black;
}
.bt2 {
	width: 244rpx;
	height: 78rpx;
	background: #ca5642;
	border-radius: 39rpx;
	text-align: center;
	line-height: 78rpx;
	color: #ffffff;
}
.box-guanzhu3{
	background-image: linear-gradient(160deg, rgba(162, 255, 146, 1.0) 0, rgba(84, 218, 255, 1.0) 100%);
	border-radius: 52rpx;
	height: 55rpx;
	display: flex;
	flex-direction: row;
	justify-self: center;
	width: 80%;
	position: fixed;
	bottom: 95rpx;
	right: 66rpx;
	z-index: 992;
}
.guanzhu-1{
	flex-grow: 5;
	text-align: center;
	margin-top: 10rpx;
}
</style>