1060 lines
20 KiB
Vue
1060 lines
20 KiB
Vue
<!-- 默认复制 -->
|
||
|
||
<template>
|
||
<view class="content">
|
||
<u-overlay :show="show" @click="show = false">
|
||
<view class="warp">
|
||
<view class="warp-top">
|
||
<image src="http://www.nuoyunr.com/lananRsc/detection/gold.png" mode=""></image>
|
||
</view>
|
||
<view class="bcai-title">店铺福利</view>
|
||
<view class="w-box">
|
||
<view class="war-box" v-for="(item,index) in couponlist" :key="index">
|
||
<view class="war-left">
|
||
<text>￥{{ item.discount / 100 }}</text>
|
||
</view>
|
||
<view class="war-right">
|
||
<text>{{ item.title }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="wrap-bott">
|
||
<image src="http://www.nuoyunr.com/lananRsc/detection/red.png" mode=""></image>
|
||
</view>
|
||
<view class="rect" @tap.stop="drawDownCoupon()">
|
||
<text>立即领取</text>
|
||
</view>
|
||
</view>
|
||
</u-overlay>
|
||
<view class="c-top">
|
||
<view class="" @click="getback()">
|
||
<uni-icons type="left" size="18"></uni-icons>
|
||
</view>
|
||
<view class="c-title">{{ obj.corpName }}</view>
|
||
<view class=""></view>
|
||
</view>
|
||
<view class="og">
|
||
<view class="o-top">
|
||
<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
|
||
:interval="interval" :duration="duration">
|
||
<swiper-item v-for="(item,index) in bannerlist " :key="index">
|
||
|
||
<image style="z-index: -11;" :src="baseUrl + item" mode=""></image>
|
||
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
<view class="o-cont">
|
||
<view class="dis">
|
||
<view class="o-zuo">
|
||
<view class="touxiang">
|
||
<view class="rei">
|
||
<image :src="baseUrl + obj.photo" mode=""></image>
|
||
</view>
|
||
<view class="reizi">{{ obj.averageScore }}</view>
|
||
<image src="http://www.nuoyunr.com/lananRsc/shopStar.png" mode=""></image>
|
||
</view>
|
||
</view>
|
||
<view class="o-you">
|
||
<view class="o-title">{{ obj.corpName }}</view>
|
||
<view class="time">{{ obj.workTime }}</view>
|
||
<view class="dis">
|
||
<view class="ying" v-if="obj.isWorking == 1">
|
||
<text>营业中</text>
|
||
</view>
|
||
<view class="fing" v-if="obj.isWorking == 0">
|
||
<text>休息中</text>
|
||
</view>
|
||
|
||
<view class="juli">距离{{ (obj.distance) || 0.0 }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="san">
|
||
<view class="dis">
|
||
<view class="o-icon">
|
||
<image src="http://www.nuoyunr.com/lananRsc/detection/sst.png" mode=""></image>
|
||
</view>
|
||
<view class="sb">优惠商品</view>
|
||
</view>
|
||
<view class="dis">
|
||
<view class="o-icon">
|
||
<image src="http://www.nuoyunr.com/lananRsc/j1.png" mode=""></image>
|
||
</view>
|
||
<view class="sb">上门取车</view>
|
||
</view>
|
||
<view class="dis">
|
||
<view class="o-icon">
|
||
<image src="http://www.nuoyunr.com/lananRsc/detection/xyy.png" mode=""></image>
|
||
</view>
|
||
<view class="sb">随时预约</view>
|
||
</view>
|
||
</view>
|
||
<view class="o-map">
|
||
<image class="sb-you" src="http://www.nuoyunr.com/lananRsc/detection/bjjjj.png" mode=""></image>
|
||
<view class="shang">
|
||
<!-- <view class="">{{obj.province}}{{obj.city}}{{obj.area}}</view> -->
|
||
<view class="">{{ obj.address }}</view>
|
||
</view>
|
||
<view class="dis">
|
||
<view class="qz" @click="gettel()">
|
||
<view class="d-img">
|
||
<uni-icons type="phone-filled" color="#ffffff" size="22"></uni-icons>
|
||
</view>
|
||
<view class="ss">电话</view>
|
||
</view>
|
||
<view class="qz">
|
||
<view class="d-img" @click="fang()">
|
||
<uni-icons type="paperplane-filled" color="#ffffff" size="22"></uni-icons>
|
||
</view>
|
||
<view class="ss">导航</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
<!-- 下列表 -->
|
||
<view class="ding-bottom">
|
||
<view class="ding-top">
|
||
<view class="zong-title">{{ obj.corpName }}收费公示</view>
|
||
|
||
</view>
|
||
<view class="roing">
|
||
<view class="rbox" v-for="(item,index) in shoplist " :key="index" @click="going(item)">
|
||
<view class="rb-top">
|
||
<view class="rb-title">
|
||
<view class="rb-biao">
|
||
<image :src="baseUrl+item.goodsImage" mode=""></image>
|
||
</view>
|
||
<text>{{ item.categoryName }}</text>
|
||
</view>
|
||
<!-- <view class="rb-lan">
|
||
<text>预约</text>
|
||
<uni-icons type="right" color="#0D2E8D" size="18"></uni-icons>
|
||
</view> -->
|
||
</view>
|
||
<view class="rb-bott">
|
||
<view class="rbbb" style="width: 55%;">
|
||
<view class="">
|
||
<text class="tb1">{{ item.skuList[item.skuList.length - 1].price / 100 }}￥</text>
|
||
<text class="xhui">/次</text>
|
||
</view>
|
||
<view class="xhui">
|
||
{{ item.skuList[item.skuList.length - 1].skuName }}
|
||
</view>
|
||
</view>
|
||
<view class="rb-lan">
|
||
<text class="tb1">去预约</text>
|
||
<uni-icons type="right" color="#0D2E8D" size="30"></uni-icons>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="xiab-box" v-if="plist != ''">
|
||
<view class="zxi">评论</view>
|
||
<view class="pinglun" v-for="(item,index) in plist" :key="index">
|
||
<view class="ptouxiang">
|
||
<image :src="baseUrl+item.userImg" mode=""></image>
|
||
</view>
|
||
<view class="pp-box">
|
||
<view class="p-bse">
|
||
<view class="plming">{{ item.realName }}
|
||
<uni-rate size="18" :value="item.commentStar" />
|
||
</view>
|
||
<view class="plshij">{{ item.commentTime }}</view>
|
||
</view>
|
||
<view class="plnr">
|
||
<view class="">{{ item.commentDesc || '' }}</view>
|
||
<view class="plshij" style="margin-top: 5px;">{{ item.goodsTitle }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import config from '@/config'
|
||
import request from '../../utils/request';
|
||
import {
|
||
getToken
|
||
} from '@/utils/auth'
|
||
import newRequest from "@/utils/newRequest";
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
id: '',
|
||
imgs: '',
|
||
show: false,
|
||
bannerlist: [],
|
||
shoplist: [],
|
||
longitude: "105.442024",
|
||
latitude: "28.871325",
|
||
indicatorDots: false,
|
||
autoplay: true,
|
||
interval: 2000,
|
||
duration: 500,
|
||
pageNum: 1, //第几页
|
||
pageSize: 5, //一页多少张
|
||
totalPages: 0, //总数
|
||
obj: {
|
||
partnerName: '检测店铺'
|
||
},
|
||
baseUrl: this.$baseImageUrl + '/',
|
||
couponlist: [],
|
||
plist: [],
|
||
total: 0
|
||
}
|
||
},
|
||
components: {},
|
||
onReachBottom() {
|
||
if (this.plist == '') {
|
||
return
|
||
}
|
||
console.log("分页")
|
||
if (this.pageSize > this.totalPages) {
|
||
uni.showToast({
|
||
title: '没有下一页了',
|
||
icon: 'none'
|
||
})
|
||
|
||
} else {
|
||
this.pageNum++
|
||
console.log(222)
|
||
this.getCommentOrderList()
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
this.id = option.id
|
||
// this.canLedCoupon()
|
||
this.getCommentOrderList()
|
||
this.getindex()
|
||
},
|
||
mounted() {
|
||
|
||
this.imgs = this.baseUrl
|
||
},
|
||
methods: {
|
||
|
||
async getCommentOrderList() {
|
||
if (!getToken()) {
|
||
return
|
||
}
|
||
uni.showLoading()
|
||
let data = {
|
||
tenantId: this.id,
|
||
pageSize: this.pageSize,
|
||
pageNum: this.pageNum,
|
||
|
||
}
|
||
let res = await newRequest({
|
||
url: '/app-api/partnerOwn/partner/getCommentOrderList',
|
||
method: 'get',
|
||
params: data
|
||
})
|
||
|
||
// this.plist = res.rows
|
||
if (this.pageNum != 1) {
|
||
uni.hideLoading();
|
||
this.plist = this.plist.concat(res.data.records)
|
||
} else {
|
||
uni.hideLoading();
|
||
this.plist = res.data.records
|
||
}
|
||
let total = res.total
|
||
this.totalPages = Math.ceil(total / this.pageSize);
|
||
},
|
||
async canLedCoupon() {
|
||
if (!getToken()) {
|
||
return
|
||
}
|
||
let data = {
|
||
tenantId: this.id,
|
||
|
||
}
|
||
let res = await request({
|
||
url: '/appInspection/goods/canLedCoupon',
|
||
method: 'get',
|
||
params: data
|
||
})
|
||
console.log(res);
|
||
this.couponlist = res.data.slice(0, 3);
|
||
if (res.data.length > 0) {
|
||
this.show = true
|
||
}
|
||
},
|
||
async drawDownCoupon() {
|
||
let data = {
|
||
tenantId: this.id
|
||
}
|
||
let res = await request({
|
||
url: '/appInspection/goods/drawDownCoupon',
|
||
method: 'post',
|
||
params: data
|
||
})
|
||
uni.showToast({
|
||
title: '领取成功'
|
||
})
|
||
this.show = false
|
||
},
|
||
gettel() {
|
||
uni.makePhoneCall({
|
||
phoneNumber: this.obj.contactNumber //仅为示例
|
||
});
|
||
},
|
||
getback() {
|
||
uni.navigateBack({
|
||
delta: 1,
|
||
})
|
||
},
|
||
|
||
//获取当前位置
|
||
getLocation() {
|
||
return new Promise((resolve, reject) => {
|
||
uni.getLocation({
|
||
type: 'gcj02',
|
||
success: (res) => {
|
||
resolve({
|
||
lat: res.latitude,
|
||
lng: res.longitude
|
||
});
|
||
},
|
||
fail: (err) => {
|
||
console.error('获取位置失败', err);
|
||
// 用户拒绝了位置授权
|
||
if (err.errMsg.includes('auth deny') || err.errMsg.includes(
|
||
'fail auth deny')) {
|
||
// this.showDistance = false;
|
||
// this.locationPermissionDenied = true;
|
||
}
|
||
reject(err);
|
||
}
|
||
});
|
||
});
|
||
},
|
||
// 计算两点间距离（单位：米）
|
||
calculateDistance(loc1, loc2) {
|
||
const {
|
||
latitude: lat1,
|
||
longitude: lng1
|
||
} = loc1;
|
||
const {
|
||
latitude: lat2,
|
||
longitude: lng2
|
||
} = loc2;
|
||
|
||
// 将经纬度转换为弧度
|
||
const rad = (d) => d * Math.PI / 180.0;
|
||
const radLat1 = rad(lat1);
|
||
const radLat2 = rad(lat2);
|
||
const a = radLat1 - radLat2;
|
||
const b = rad(lng1) - rad(lng2);
|
||
|
||
// 使用Haversine公式计算距离
|
||
const s = 2 * Math.asin(Math.sqrt(
|
||
Math.pow(Math.sin(a / 2), 2) +
|
||
Math.cos(radLat1) *
|
||
Math.cos(radLat2) *
|
||
Math.pow(Math.sin(b / 2), 2)
|
||
));
|
||
|
||
const EARTH_RADIUS = 6378.137; // 地球半径（千米）
|
||
const distance = s * EARTH_RADIUS;
|
||
|
||
// 小于1公里显示米，大于等于1公里显示千米
|
||
if (distance < 1) {
|
||
return (distance * 1000).toFixed(0) + '米';
|
||
} else {
|
||
return distance.toFixed(2) + '公里';
|
||
}
|
||
},
|
||
fang() {
|
||
console.log("1212")
|
||
uni.openLocation({
|
||
latitude: this.obj.lat,
|
||
longitude: this.obj.lgt,
|
||
success: function() {
|
||
console.log('success');
|
||
},
|
||
});
|
||
},
|
||
async getindex() {
|
||
// // 列表获取
|
||
// let that = this;
|
||
// uni.getLocation({
|
||
// type: 'wgs84',
|
||
// success: async function (res) {
|
||
// let data = {
|
||
// tenantId: that.id,
|
||
// longitude: res.longitude,
|
||
// latitude: res.latitude,
|
||
// };
|
||
// // 初始化
|
||
// // request({
|
||
// // url: '/appInspection/partner/shopDetail',
|
||
// // method: 'get',
|
||
// // params: data
|
||
// // }).then(res => {
|
||
// // that.obj = res.data
|
||
// // that.bannerlist = res.data.imageList
|
||
// // })
|
||
// },
|
||
// fail: function (e) {
|
||
// let data = {
|
||
// tenantId: that.id,
|
||
// longitude: that.longitude,
|
||
// latitude: that.latitude,
|
||
// };
|
||
// }
|
||
// });
|
||
|
||
try {
|
||
const res = await newRequest({
|
||
url: '/userClient/base/companySmallProgram/getCompanyByTenantId',
|
||
method: 'GET',
|
||
params: {
|
||
tenantId: this.id, // 这里应该是that.id而不是this.id
|
||
systemCode: 'jiance',
|
||
}
|
||
});
|
||
this.obj = res.data;
|
||
// 计算 距离
|
||
const userLocation = await this.getLocation();
|
||
if (userLocation.lat && userLocation.lng && this.obj.lat && this.obj.lgt) {
|
||
// if ( this.obj.lat && this.obj.lgt) {
|
||
const distance = this.calculateDistance({
|
||
latitude: userLocation.lat,
|
||
longitude: userLocation.lng
|
||
// latitude: '117.078709,',
|
||
// longitude: '36.747455'
|
||
}, {
|
||
latitude: parseFloat(this.obj.lat),
|
||
longitude: parseFloat(this.obj.lgt)
|
||
});
|
||
this.obj.distance = distance;
|
||
}
|
||
|
||
} catch (error) {
|
||
console.error(error);
|
||
}
|
||
|
||
let rex = await newRequest({
|
||
url: '/app-api/partnerOwn/partner/list?tenantId=' + this.id,
|
||
method: 'get',
|
||
});
|
||
this.shoplist = rex.data;
|
||
},
|
||
going(data) {
|
||
uni.navigateTo({
|
||
url: "/pages/detection/Merchantproducts?id=" + data.goodsId + "&tenantId=" + this.id
|
||
})
|
||
}
|
||
|
||
|
||
}
|
||
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.warp {
|
||
width: 275px;
|
||
height: 375px;
|
||
background: #FB4746;
|
||
border-radius: 10px;
|
||
margin: 0 auto;
|
||
margin-top: 200px;
|
||
box-sizing: border-box;
|
||
padding: 15px;
|
||
position: relative;
|
||
}
|
||
|
||
.warp-top {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 40px;
|
||
top: 0px;
|
||
left: 0px;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.bcai-title {
|
||
width: 100%;
|
||
text-align: center;
|
||
font-size: 16px;
|
||
color: white;
|
||
font-weight: bold;
|
||
color: #FFFFFF;
|
||
margin-bottom: 10px;
|
||
|
||
}
|
||
|
||
.w-box {
|
||
background: #cf2c2f;
|
||
width: 100%;
|
||
height: 300px;
|
||
border-radius: 10px;
|
||
box-sizing: border-box;
|
||
padding: 8px;
|
||
|
||
}
|
||
|
||
.war-left {
|
||
width: 40%;
|
||
border-right: 1px solid #EBC29D;
|
||
font-size: 26px;
|
||
text-align: center;
|
||
font-weight: bold;
|
||
color: #E0262C;
|
||
}
|
||
|
||
.war-right {
|
||
width: 60%;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
color: #7D592C;
|
||
box-sizing: border-box;
|
||
padding-left: 10px;
|
||
}
|
||
|
||
.wrap-bott {
|
||
position: absolute;
|
||
left: 0px;
|
||
bottom: 0px;
|
||
width: 100%;
|
||
height: 80px;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.war-box {
|
||
width: 100%;
|
||
height: 69px;
|
||
background: linear-gradient(90deg, #FFF1E4 0%, #FACEA6 100%);
|
||
border-radius: 6px 6px 6px 6px;
|
||
display: flex;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
padding: 10px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.rect {
|
||
width: 172px;
|
||
height: 36px;
|
||
background: linear-gradient(90deg, #FFF4CB 0%, #FDDC66 100%);
|
||
border-radius: 50px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
color: #E11E27;
|
||
position: absolute;
|
||
bottom: 20px;
|
||
transform: translate(-50%);
|
||
left: 50%;
|
||
z-index: 999;
|
||
}
|
||
|
||
.uni-margin-wrap {
|
||
width: 100%;
|
||
}
|
||
|
||
.swiper {
|
||
height: 150px;
|
||
z-index: -1;
|
||
}
|
||
|
||
.swiper-item {
|
||
display: block;
|
||
height: 150px;
|
||
text-align: center;
|
||
}
|
||
|
||
.swiper-list {
|
||
margin-top: 40rpx;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.uni-common-mt {
|
||
margin-top: 60rpx;
|
||
position: relative;
|
||
}
|
||
|
||
.info {
|
||
position: absolute;
|
||
right: 20rpx;
|
||
}
|
||
|
||
//
|
||
.xhui {
|
||
font-size: 15px;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
}
|
||
|
||
.tb1 {
|
||
font-size: 25px;
|
||
font-weight: 600;
|
||
color: #0D2E8D;
|
||
}
|
||
|
||
.content {
|
||
width: 100%;
|
||
// height: calc(100vh);
|
||
background-color: #F6F6F6;
|
||
box-sizing: border-box;
|
||
// padding-top: 45px;
|
||
}
|
||
|
||
.rb-title {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.rb-biao {
|
||
width: 20px;
|
||
height: 16px;
|
||
// overflow: hidden;
|
||
margin-right: 5px;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.rb-lan {
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #0D2E8D;
|
||
line-height: 14px;
|
||
}
|
||
|
||
.rb-top {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
padding-bottom: 10px;
|
||
border-bottom: 1px solid #EEEEEE;
|
||
}
|
||
|
||
.rb-bott {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.rbbb {
|
||
border-right: 1px solid #EEEEEE;
|
||
width: 33%;
|
||
text-align: left;
|
||
box-sizing: border-box;
|
||
padding-left: 10px;
|
||
}
|
||
|
||
.top-icon {
|
||
margin-bottom: 45px;
|
||
}
|
||
|
||
.c-top {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 15px;
|
||
padding-top: 55px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
background-color: white;
|
||
}
|
||
|
||
.c-title {
|
||
font-size: 18px;
|
||
font-weight: bold
|
||
}
|
||
|
||
.og {
|
||
background-color: #F6F6F6;
|
||
box-sizing: border-box;
|
||
padding: 10px;
|
||
}
|
||
|
||
.o-top {
|
||
width: 100%;
|
||
height: 150px;
|
||
border-radius: 6px;
|
||
margin-bottom: 10px;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.o-title {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
|
||
}
|
||
|
||
.ying {
|
||
width: 62px;
|
||
height: 22px;
|
||
background: #E4FFED;
|
||
border-radius: 2px;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #34CA66;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
}
|
||
|
||
.fing {
|
||
width: 62px;
|
||
height: 22px;
|
||
background: #e3e3e3;
|
||
border-radius: 2px;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #626262;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
}
|
||
|
||
.time {
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
margin: 5px 10px;
|
||
}
|
||
|
||
.juli {
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
margin-left: 5px;
|
||
}
|
||
|
||
.touxiang {
|
||
width: 80px;
|
||
height: 105px;
|
||
// background: #D9D9D9;
|
||
margin-right: 10px;
|
||
margin-top: -50px;
|
||
z-index: 99;
|
||
overflow: hidden;
|
||
position: relative;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
}
|
||
|
||
.rei {
|
||
|
||
z-index: 99999;
|
||
width: 60px;
|
||
height: 60px;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
background-color: whitesmoke;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
position: absolute;
|
||
top: 38px;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
|
||
.reizi {
|
||
font-size: 14px;
|
||
z-index: 99999;
|
||
color: white;
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
bottom: -5px;
|
||
}
|
||
|
||
.o-cont {
|
||
width: 100%;
|
||
// height: 210px;
|
||
z-index: 99;
|
||
border-radius: 8px;
|
||
box-sizing: border-box;
|
||
background-color: white;
|
||
padding: 10px;
|
||
}
|
||
|
||
.dis {
|
||
z-index: 9;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.san {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
margin: 10px auto;
|
||
}
|
||
|
||
.o-map {
|
||
overflow: hidden;
|
||
position: relative;
|
||
background: linear-gradient(90deg, #F7F8FB 0%, rgba(255, 255, 255, 0) 100%);
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
padding: 15px;
|
||
}
|
||
|
||
.d-img {
|
||
width: 30px;
|
||
height: 30px;
|
||
background: #0D2E8D;
|
||
border-radius: 50%;
|
||
text-align: center;
|
||
line-height: 30px;
|
||
}
|
||
|
||
.sb-you {
|
||
z-index: 0;
|
||
position: absolute;
|
||
right: 0px;
|
||
top: 0px;
|
||
}
|
||
|
||
.shang {
|
||
z-index: 9;
|
||
}
|
||
|
||
.ss {
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
}
|
||
|
||
.qz {
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.sb {
|
||
font-size: 15px;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
margin-left: 5px;
|
||
}
|
||
|
||
.o-icon {
|
||
width: 20px;
|
||
height: 20px;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.ding-bottom {
|
||
width: 100%;
|
||
background: linear-gradient(180deg, #FAC477 0%, rgba(250, 196, 119, 0) 30%, rgba(250, 196, 119, 0) 100%);
|
||
border-radius: 20px 20px 0px 0px;
|
||
box-sizing: border-box;
|
||
padding: 10px;
|
||
|
||
}
|
||
|
||
.ding-top {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.zong-title {
|
||
font-size: 16px;
|
||
font-weight: 400;
|
||
color: #69430C;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.bai-title {
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: rgba(255, 255, 255, 0.7);
|
||
}
|
||
|
||
.roing {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.rbox {
|
||
width: 100%;
|
||
height: 120px;
|
||
box-sizing: border-box;
|
||
padding: 10px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
border-radius: 8px;
|
||
background: white;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.guanjian {
|
||
width: 90%;
|
||
margin: 10px auto;
|
||
font-size: 16px;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
}
|
||
|
||
.anniu {
|
||
width: 66px;
|
||
height: 22px;
|
||
background: #0D2E8D;
|
||
border-radius: 11px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 12px;
|
||
font-weight: 400;
|
||
color: #FFFFFF;
|
||
|
||
}
|
||
|
||
.r-bottom {
|
||
width: 90%;
|
||
margin: 10px auto;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
}
|
||
|
||
.ju {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
color: #FF9600;
|
||
}
|
||
|
||
.r-img {
|
||
width: 100%;
|
||
height: 172px;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.xiab-box {
|
||
width: 100%;
|
||
margin: 0 auto;
|
||
box-sizing: border-box;
|
||
padding: 15px;
|
||
border-radius: 6px;
|
||
margin-bottom: 10px;
|
||
background-color: white
|
||
}
|
||
|
||
.pinglun {
|
||
box-sizing: border-box;
|
||
border-bottom: 1px solid #EEEEEE;
|
||
padding: 10px 0px;
|
||
width: 100%;
|
||
display: flex;
|
||
|
||
}
|
||
|
||
.huang {
|
||
font-size: 16px;
|
||
color: #FF9600;
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.plming {
|
||
font-size: 16px;
|
||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
}
|
||
|
||
.plshij {
|
||
font-size: 14px;
|
||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
}
|
||
|
||
.plnr {
|
||
font-size: 15px;
|
||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
margin-top: 5px;
|
||
}
|
||
|
||
.ptouxiang {
|
||
width: 35px;
|
||
height: 35px;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
margin-right: 10px;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.pp-box {
|
||
width: 80%;
|
||
}
|
||
|
||
.p-bse {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.p-nr {}
|
||
</style> |