 <template>
	<view class="page">
		<u-navbar title=" " :border-bottom="false" :background="bgc" back-icon-color="#fff" title-color='#262B37'
			title-size='36' height='36' id="navbar">
		</u-navbar>
        <u-swiper style="width: 750rpx;height: 588rpx;position: absolute;top: 0;left: 0;" class="topimg" :height="588" bg-color="#fff"  :list="lists"></u-swiper>
        <view class="bolang" style="z-index: 1;position: relative;">
        	<image src="https://api.ccttiot.com/smartmeter/img/static/u880GlN7vG5tJ1hVOlEl" mode=""></image>
        </view>
		<view class="box" style="position: relative;z-index: 1;">
			<view class="name">
				{{jdobj.name == undefined ? '--' : jdobj.name}}
			</view>
			<view class="pinjia">
				<view class="lt">
					<view class="fen">
						{{jdobj.rating == undefined ? '--' : jdobj.rating}}
					</view>
					<u-rate :count="count" active-color="#1EC28B" size="24" inactive-color="#b2b2b2" v-model="jdobj.rating - 1"></u-rate>
				</view>
				<view class="rt" @click="btndp">
					{{jdobj.commentCount == undefined ? '0' : jdobj.commentCount}}条评价 <u-icon name="arrow-right" color="#1EC28B" size="28"></u-icon>
				</view>
			</view>
			<!-- <view class="sheshi">
				<view class="tag">
					<view class="">
						有海景房
					</view>
				</view>
				<view class="xq">
					设施详情 <u-icon name="arrow-right" color="#606060" size="28"></u-icon>
				</view>
			</view> -->
			<view class="lianxi">
				<view class="lt">
					<view class="top">
						{{jdobj.address == undefined ? '--' : jdobj.address}} <u-icon style="margin-bottom: 0 !important;" name="arrow-right" color="#3D3D3D" size="28"></u-icon>
					</view>
					<view class="bot">
						据您驾车{{jdobj.distance == undefined ? '--' : jdobj.distance}}Km
					</view>
				</view>
				<view class="rt">
					<image @click="btndh" src="https://api.ccttiot.com/smartmeter/img/static/uf4SvI5019veMuRRJfgh" mode=""></image>
					<image @click="btntel" src="https://api.ccttiot.com/smartmeter/img/static/ueRINIDMob3VJtBXYFSo" mode=""></image>
				</view>
			</view>
			<view class="jiage">
				<view class="names">
					酒店价格区间
				</view>
				<view class="price">
					<view class="hei">
						所有房型的价格区间
					</view>
					<view class="hong">
					<text style="font-size: 28rpx;">￥</text>	{{jdobj.priceMin == undefined ? '--' : jdobj.priceMin}} <text style="font-size: 28rpx;">起</text> <text style="font-size: 28rpx;margin-left: 10rpx;margin-right: 10rpx;">至</text> <text style="font-size: 28rpx;">￥</text>{{jdobj.priceMax == undefined ? '--' : jdobj.priceMax}}
					</view>
				</view>
			</view>
			<view class="maidian">
				<view class="tit">
					<view class="one">卖点 · 设施</view>
					<!-- <view>查看全部 <u-icon name="arrow-right" color="#1EC28B" size="28"></u-icon> </view> -->
				</view>
				<view class="icons">
					<view class="" style="width: 25%;text-align: center;margin-top: 10rpx;" v-for="facility in displayedFacilities" :key="facility.id">
						<image
						    :src="facility.icon"
						    :alt="facility.name"
						    :style="{ width: facility.width, height: facility.height ,margin:auto}"
						    mode=""
						  ></image>
					</view>
				</view>
			</view>
			<image @click="btnaddpj" style="width: 120rpx;height: 126rpx;position: fixed;right: 30rpx;top: 50%;z-index: 99;" src="https://api.ccttiot.com/gR560ieYsn1o129725c14b972b2414473797127255c3.png" mode=""></image>
			<view class="zhence">
				<view class="tit" @click="togglePolicy">
					<view class="left-content">
						<view class="one">政策</view>
					</view>
					<view class="right-icon">
						<view class="tip-text" style="margin-right: 10rpx;">{{ policyExpanded ? '点击收起' : '点击展开' }}</view>
						<u-icon :name="policyExpanded ? 'arrow-up' : 'arrow-down'" size="28"></u-icon>
					</view>
				</view>
				<view class="zhencecont" v-show="policyExpanded">
					<view class="" v-html="jdobj.policy">
						
					</view>
					<!-- <view class="botwz">
						全部酒店政策 <u-icon name="arrow-right" color="#1EC28B" size="28"></u-icon>
					</view> -->
				</view>
			</view>
			<view class="pinlun">
				<view class="tit">
					<view class="one">评价（{{jdobj.commentCount == undefined ? '0' : jdobj.commentCount}}）</view>
					<view @click="btndp">更多评价 <u-icon name="arrow-right" color="#1EC28B" size="28"></u-icon> </view>
				</view>
				<view class="pinfen">
					<view class="top">
						<view class="lt">
							<view class="ltfen">
								{{jdobj.rating}}
							</view>
							<view class="ltbang">
								<text class="bang" v-if="jdobj.rating > 4">棒</text>
								<text class="bang" v-if="jdobj.rating > 3 && jdobj.rating < 4">不错</text>
								<text class="bang" v-if="jdobj.rating > 2 && jdobj.rating < 3">一般</text>
								<text class="bang" v-if="jdobj.rating < 2">差</text>
								<text v-if="jdobj.rating > 4.5">高于99%同类酒店</text>
								<text v-if="jdobj.rating > 3 && jdobj.rating < 4">高于91.8%同类酒店</text>
								<text v-if="jdobj.rating > 2 && jdobj.rating < 3">高于89.7%同类酒店</text>
								<text v-if="jdobj.rating < 2">高于82.9%同类酒店</text>
							</view>
						</view>
						<view class="rt">
							<view class="oen">
								<view class="fen">
									{{jdobj.locationRating == undefined ? '--' : jdobj.locationRating}}
								</view>
								<view class="">
									位置
								</view>
							</view>
							<view class="oen">
								<view class="fen">
									{{jdobj.facilityRating == undefined ? '--' : jdobj.facilityRating}}
								</view>
								<view class="">
									设施
								</view>
							</view>
							<view class="oen">
								<view class="fen">
									{{jdobj.serviceRating == undefined ? '--' : jdobj.serviceRating}}
								</view>
								<view class="">
									服务
								</view>
							</view>
							<view class="oen">
								<view class="fen">
									{{jdobj.hygieneRating == undefined ? '--' : jdobj.hygieneRating}}
								</view>
								<view class="">
									卫生
								</view>
							</view>
						</view>
					</view>
					<view class="tag">
						<view class="" v-for="(item,index) in bqlist" :key="index">
							{{item.name}} {{item.percent}}%
						</view>
					</view>
					<view class="yonghu" v-for="(item,index) in plarr" :key="index">
						<view class="top">
							<view class="lt">
								<image :src="item.userAvatar" mode="aspectFill"></image>
								<view class="info">
									<view class="name">
										{{item.nickName}}
									</view>
									<u-rate :count="count" active-color="#E7322C" size="24" inactive-color="#b2b2b2" v-model="rating"></u-rate>
								</view>
							</view>
							<view class="rts">
								{{item.createTime}}
							</view>
						</view>
						<view class="contxt">
							{{item.content}}
						</view>
						<view class="imglist" v-if="item.mediaUrl">
							<image v-for="(val,index) in item.mediaUrl.split(',')" :key="index" :src="val" mode="aspectFill"></image>
						</view>
						<view class="qb" @click="btndp">
							全部{{total}}条评论 <u-icon name="arrow-right" color="#3D3D3D" size="28"></u-icon>
						</view>
					</view>
				</view>
				<view class="wrap">
					<view class="title">
						周边景区
					</view>
					<view class="waterfall-container">
						<view class="waterfall-left">
							<view class="demo-warter" v-for="(item, index) in flowList.filter((_, i) => i % 2 === 0)" :key="index" @click="btngonglue(item)">
								<u-lazy-load threshold="-450" border-radius="10" :image="item.picture.split(',')[0]"
									:index="index"></u-lazy-load>
								<view class="dizhi">
									{{item.name && item.name.length > 10 ? item.name.slice(0,10) + '...' : item.name}}
								</view>
								<view class="cont">
									<image src="https://api.ccttiot.com/smartmeter/img/static/utLEbsdQEquhFgaY1awN" mode=""></image>
									{{item.address}}
								</view>
							</view>
						</view>
						<view class="waterfall-right">
							<view class="demo-warter" v-for="(item, index) in flowList.filter((_, i) => i % 2 === 1)" :key="index" @click="btngonglue(item)">
								<u-lazy-load threshold="-450" border-radius="10" :image="item.picture.split(',')[0]"
									:index="index"></u-lazy-load>
								<view class="dizhi">
									{{item.name && item.name.length > 10 ? item.name.slice(0,10) + '...' : item.name}}
								</view>
								<view class="cont">
									<image src="https://api.ccttiot.com/smartmeter/img/static/utLEbsdQEquhFgaY1awN" mode=""></image>
									{{item.address}}
								</view>
							</view>
						</view>
					</view>
				</view>
				
			</view>
		</view>
		<!-- 底部固定按钮 -->
		<view class="bottom-button" @click="viewHotelDetails">
			立即预定
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                bgc: {
                	backgroundColor: " ",
                },
				count:5,
				rating:4,
				flowList:[],
				jdobj:{},
				id:'',
				lists:[],
				lat:'',
				lng:'',
				plarr:[],
				total:0,
				bqlist:[],
				allFacilities: [
				  { id: '1', name: '接机服务免费', icon: 'https://api.ccttiot.com/smartmeter/img/static/uraStiw7P2QW6oE46QxM', width: '142rpx', height: '86rpx' },
				  { id: '2', name: '多功能厅', icon: 'https://api.ccttiot.com/smartmeter/img/static/u6PdfIcZqXbOTguIsaPR', width: '96rpx', height: '86rpx' },
				  { id: '3', name: '会议厅', icon: 'https://api.ccttiot.com/smartmeter/img/static/ulJCJZ2STI3sTjnvcUKY', width: '72rpx', height: '86rpx' },
				  { id: '4', name: '自行车租赁免费', icon: 'https://api.ccttiot.com/smartmeter/img/static/uSBtMguOv0iQqgoOUwLb', width: '166rpx', height: '86rpx' },
				  { id: '5', name: '行李寄存', icon: 'https://api.ccttiot.com/smartmeter/img/static/u15gCSmQmYD0oYwXzHrY', width: '96rpx', height: '86rpx' },
				  { id: '6', name: '租车服务', icon: 'https://api.ccttiot.com/smartmeter/img/static/ukJvnpU35VsOFnsnHk0j', width: '96rpx', height: '86rpx' },
				  { id: '7', name: '叫车服务', icon: 'https://api.ccttiot.com/smartmeter/img/static/uK1cWJINVyKO435IYWDb', width: '96rpx', height: '86rpx' },
				  { id: '8', name: '送餐服务', icon: 'https://api.ccttiot.com/smartmeter/img/static/ueyMpsB01Z2STbZnB2hu', width: '96rpx', height: '86rpx' },
				],
				facilities:[],
				policyExpanded: false
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getpinlun()
			this.getbiaoqian()
			uni.getLocation({
				type: 'gcj02',
				isHighAccuracy: true,
				accuracy: 'best',
				success: (res) => {
					this.lat = res.latitude
					this.lng = res.longitude
					this.getxq()
				},
				fail: (err) => {
					console.error('获取位置失败:', err)
					this.getxq()
				}
			})
		},
		 computed: {
		    displayedFacilities() {
		      return this.allFacilities.filter(facility => 
		        this.facilities.includes(facility.id)
		      );
		    }
		  },
		methods: {
			
			// 请求酒店标签
			getbiaoqian(){
				this.$u.get(`/app/comment/labelList?bstId=${this.id}&bstType=3`).then(res =>{
					if(res.code == 200){
						this.bqlist = res.data
					}
				})
			},
			// 点击写评价
			btnaddpj(){
				uni.navigateTo({
					url:'/page_fenbao/jiudian/addpj?id=' + this.id
				})
			},
			// 点击查看所有评论
			btndp(){
				uni.navigateTo({
					url:'/page_fenbao/jiudian/dianpin?id=' + this.id 
				})
			},
			// 点击拨打电话
			btntel(){
				uni.makePhoneCall({
					phoneNumber: this.jdobj.contactMobile,
					success: function(res) {
						console.log('拨打电话成功', res)
					},
					fail: function(err) {
						console.error('拨打电话失败', err)
					}
				})
			},
			// 点击跳转导航目的地
			btndh(){
				if (!this.jdobj.latitude || !this.jdobj.longitude) {
					uni.showToast({
						title: '当前暂无位置',
						icon: 'none',
						duration:3000
					})
					return
				}
				// 先申请位置权限
				uni.getSetting({
					success: (res) => {
						if (res.authSetting['scope.userLocation'] === false) {
							// 用户拒绝了位置权限，引导用户开启
							uni.showModal({
								title: '位置权限',
								content: '需要获取您的位置信息才能进行导航，请在设置中开启位置权限',
								confirmText: '去设置',
								success: (modalRes) => {
									if (modalRes.confirm) {
										uni.openSetting()
									}
								}
							})
							return
						}
						// 权限正常，打开地图
						this.openMap()
					}
				})
			},
			// 打开地图
			openMap() {
				uni.openLocation({
					latitude: parseFloat(this.jdobj.latitude), // 确保是数字类型
					longitude: parseFloat(this.jdobj.longitude), // 确保是数字类型
					name: this.jdobj.address || '目的地', // 地点名称
					success: function(res) {
						console.log('打开地图成功', res)
					},
					fail: function(err) {
						console.error('打开地图失败', err)
						uni.showToast({
							title: '打开地图失败: ' + (err.errMsg || '未知错误'),
							icon: 'none',
							duration: 3000
						})
					}
				})
			},
			// 请求酒店详情
			getxq(){
				this.$u.get(`/app/hotel/${this.id}?currLat=${this.lat}&currLon=${this.lng}`).then(res =>{
					if(res.code == 200){
						this.facilities = res.data.facilities
						this.jdobj = res.data
						res.data.nearbyAreas.forEach((item, index) => {
							this.flowList.push(item)
						})
						res.data.picture.split(',').forEach((item,index) =>{
							this.lists.push({
								image:item
							})
						})
					}
				})
			},
			// 请求酒店评论
			getpinlun(){
				this.$u.get(`/app/comment/list?bstId=${this.id}&bstTypes=3&pageNum=1&pageSize=1`).then(res =>{
					if(res.code == 200){
						this.plarr = res.rows
						this.total = res.total
					}
				})
			},
			// 点击周边推荐跳转到详情
			btngonglue(item){
				console.log(item);
				uni.navigateTo({
					url:'/page_fenbao/remenxq?id=' + item.id
				})
			},
			// 切换政策展开/收起
			togglePolicy(){
				this.policyExpanded = !this.policyExpanded
			},
			// 查看酒店详情
			viewHotelDetails(){
				if(this.jdobj.payType == 2){
					uni.navigateToMiniProgram({ //跳转到美团app预定酒店
					  appId: this.jdobj.jumpAppId, // 目标小程序的 AppID（必须正确）
					  path: this.jdobj.jumpUrl, // 跳转路径，空字符串表示首页
					  success(res) {
					    console.log('跳转成功', res);
					  },
					  fail(err) {
					    console.error('跳转失败', err);
					  }
					})
				}else{
					uni.showToast({
						title: '暂无酒店信息',
						icon: 'none',
						duration: 3000
					})
				}
			},
		}
	}
</script>
<style lang="less">
	.box{
		padding-bottom: 120rpx;
		.wrap{
			margin-top: 34rpx;
			.title{
				font-weight: 600;
				font-size: 36rpx;
				color: #3D3D3D;
				margin-bottom: 30rpx;
			}
			.waterfall-container {
				display: flex;
				gap: 20rpx;
				.waterfall-left,
				.waterfall-right {
					flex: 1;
				}
			}
			.demo-warter {
				border-radius: 10rpx;
				margin-bottom: 20rpx;
				background-color: #ffffff;
				padding-bottom: 10rpx;
				position: relative;
				.shuju{
					display: flex;
					align-items: center;
					margin-top: 10rpx;
					justify-content: flex-end;
					view{
						font-size: 14rpx;
						color: #3D3D3D;
						margin-left: 32rpx;
						image{
							width: 20rpx;
							height: 20rpx;
							margin-right: 4rpx;
						}
						display: flex;
						align-items: center;
					}
				}
				.cont{
					font-size: 24rpx;
					color: #3D3D3D;
					padding-left: 18rpx;
					margin-top: 10rpx;
					image{
						width: 28rpx;
						height: 28rpx;
						margin-right: 8rpx;
					}
				}
				.dizhi{
					margin-top: 16rpx;
					padding-left: 18rpx;
					
					
					font-weight: 600;
					font-size: 28rpx;
					color: #3D3D3D;
				}
			}
		}
		.yonghu{
			margin-top: 32rpx;
			.qb{
				font-size: 28rpx;
				color: #3D3D3D;
				margin-top: 28rpx;
				width: 100%;
				text-align: center; 
			}
			.imglist{
				margin-top: 28rpx;
				display: flex;
				flex-wrap: wrap;
				gap: 10rpx;
				image{
					width: 210rpx;
					height: 210rpx;
					border-radius: 14rpx 14rpx 14rpx 14rpx;
				}
			}
			.contxt{
				font-size: 28rpx;
				color: #3D3D3D;
				margin-top: 22rpx;
				line-height: 1.6;
				word-wrap: break-word;
			}
			.top{
				display: flex;
				justify-content: space-between;
				.lt{
					display: flex;
					align-items: center;
					image{
						width: 68rpx;
						height: 68rpx;
						border-radius: 50%;
						margin-right: 14rpx;
					}
					.info{
						.name{
							font-weight: 600;
							font-size: 28rpx;
							color: #3D3D3D;
							padding-left: 0;
						}
					}
				}
				.rts{
					font-size: 28rpx;
					color: #606060;
				}
			}
		}
		.pinlun{
			width: 710rpx;
			margin: auto;
			margin-top: 28rpx;
			.tag{
				width: 100%;
				margin-top: 12rpx;
				display: flex;
				flex-wrap: wrap;
				gap: 12rpx;
				margin-top: 12rpx;
				view{
					font-size: 24rpx;
					color: #1EC28B;
					padding: 12rpx 20rpx;
					box-sizing: border-box;
					background-color: #f7f7f7;
					border-radius: 10rpx;
				}
			}
			.pinfen{
				width: 710rpx;
				background: #FFFFFF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				margin-top: 20rpx;
				padding: 12rpx 32rpx;
				box-sizing: border-box;
				.top{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.rt{
						display: flex;
						align-items: center;
						border-left: 1px solid #D8D8D8;
						.oen{
							margin-left: 42rpx;
							.fen{
								font-size: 32rpx;
								color: #1EC28B;
								margin-bottom: 4rpx;
							}
							font-size: 20rpx;
							color: #606060;
						}
					}
					.lt{
						display: flex;
						align-items: center;
						.ltfen{
							font-weight: 600;
							font-size: 64rpx;
							color: #1EC28B;
							margin-right: 14rpx;
						}
						.ltbang{
							text{
								font-size: 20rpx;
								color: #606060;
								display: block;
							}
							.bang{
								font-weight: 600;
								font-size: 32rpx;
								color: #1EC28B;
							}
						}
					}
				}
			}
			.tit{
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 24rpx;
				color: #1EC28B;
				margin-top: 36rpx;
				.one{
					font-weight: 600;
					font-size: 36rpx;
					color: #3D3D3D;
				}
			}
		}
		.zhence{
			width: 710rpx;
			margin: auto;
			margin-top: 28rpx;
			.zhencecont{
				width: 710rpx;
				max-height: 222600rpx;
				background: #FFFFFF;
				border-radius: 14rpx 14rpx 14rpx 14rpx;
				margin-top: 28rpx;
				padding: 24rpx 32rpx;
				box-sizing: border-box;
				.botwz{
					margin-top: 20rpx;
					font-size: 24rpx;
					color: #1EC28B;
					width: 100%;
					text-align: center;
				}
				.cu{
					font-weight: 600;
					font-size: 28rpx;
					color: #3D3D3D;
				}
				.xi{
					font-size: 24rpx;
					color: #3D3D3D;
					margin-top: 10rpx;
				}
			}
			.tit{
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: #FFFFFF;
				border-radius: 14rpx;
				padding: 24rpx 32rpx;
				box-sizing: border-box;
				cursor: pointer;
				transition: all 0.3s ease;
				box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
				.left-content{
					display: flex;
					align-items: center;
					flex: 1;
					.one{
						font-weight: 600;
						font-size: 36rpx;
						color: #3D3D3D;
						margin-right: 16rpx;
					}
					.tip-text{
						font-size: 24rpx;
						color: #1EC28B;
						opacity: 0.8;
					}
				}
				.right-icon{
					display: flex;
					align-items: center;
					transition: transform 0.3s ease;
				}
			}
		}
		.jiage{
			width: 710rpx;
			background: #FFFFFF;
			border-radius: 14rpx 14rpx 14rpx 14rpx;
			margin: auto;
			padding:10rpx 20rpx;
			padding-top: 16rpx;
			margin-top: 30rpx;
			.names{
				font-weight: 600;
				font-size: 30rpx;
				color: #3D3D3D;
			}
			.price{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.hei{
					font-size: 28rpx;
					color: #3D3D3D;
				}
				.hong{
					font-size: 38rpx;
					color: #E7322C;
				}
			}
		}
		.maidian{
			margin-top: 36rpx;
			padding: 0 22rpx;
			box-sizing: border-box;
			.icons{
				width: 710rpx;
				max-height: 244rpx;
				background: #FFFFFF;
				border-radius: 14rpx 14rpx 14rpx 14rpx;
				margin-top: 28rpx;
				padding: 24rpx;
				box-sizing: border-box;
				display: flex;
				// gap: 30rpx;
				// justify-content: end;
				flex-wrap: wrap;
				image{
					// margin-right: 20rpx;
				}
			}
			.tit{
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 24rpx;
				color: #1EC28B;
				margin-top: 36rpx;
				.one{
					font-weight: 600;
					font-size: 36rpx;
					color: #3D3D3D;
				}
			}
		}
		.lianxi{
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 710rpx;
			margin: auto;
			border-top: 1px solid #D8D8D8;
			margin-top: 24rpx;
			padding-top: 26rpx;
			.lt{
				.top{
					display: flex;
					align-items: center;
					font-size: 26rpx;
					color: #3D3D3D;
				}
				.bot{
					font-size: 26rpx;
					color: #808080;
					margin-top: 16rpx;
				}
			}
			.rt{
				display: flex;
				align-items: center;
				image{
					width: 48rpx;
					height: 80rpx;
					margin-left: 68rpx;
				}
			}
		}
		.sheshi{
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-top: 1px solid #D8D8D8;
			width: 710rpx;
			margin: auto;
			margin-top: 24rpx;
			padding-top: 26rpx;
			.tag{
				display: flex;
				align-items: center;
				view{
					background: #EBEBEB;
					border-radius: 6rpx 6rpx 6rpx 6rpx;
					font-size: 24rpx;
					color: #606060;
					padding:4rpx 18rpx;
					box-sizing: border-box;
				}
			}
		}
		.pinjia{
			padding-left: 20rpx;
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.rt{
				font-size: 24rpx;
				color: #1EC28B;
				padding-right: 20rpx;
			}
			.lt{
				width: 260rpx;
				height: 56rpx;
				background: #e6eae7;
				border-radius: 28rpx 28rpx 28rpx 28rpx;
				display: flex;
				align-items: center;
				border-radius: 50rpx;
				.fen{
					border-radius:50rpx 0 0 50rpx;
					text-align: center;
					font-weight: 600;
					font-size: 40rpx;
					color: #FFFFFF;
					background-color: #1EC28B;
					width: 90rpx;
					height: 56rpx;
					line-height: 56rpx;
					padding-left: 10rpx;
					box-sizing: border-box;
				}
			}
		}
		.name{
			font-weight: 600;
			font-size: 40rpx;
			color: #3D3D3D;
			padding-left: 22rpx;
			box-sizing: border-box;
		}
	}
	.bolang{
		width: 750rpx;
		height: 80rpx;
		margin-top: 320rpx;
		image{
			width: 750rpx;
			height: 80rpx;
		}
	}
	.box{
		background-color: #EFF5F9;
	}
	page {	
		background: #EFF5F9;
	}
	.bottom-button {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 100rpx;
		background-color: #1EC28B;
		color: #FFFFFF;
		font-size: 32rpx;
		padding-bottom: 10rpx;
		font-weight: 500;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 999;
		border-radius: 0;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
	}
</style>
