892 lines
23 KiB
Vue
892 lines
23 KiB
Vue
<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>
|