xinyi/chuangte_bike_newxcx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
524d1ec193
chuangte_bike_newxcx/pages/nearbystores/index.vue

1015 lines
26 KiB
Vue
Raw Normal View History

新电动车
2025-04-01 21:35:30 +08:00
<template>
<view class="page">
<!-- 地图 -->
<image class="picimg" v-if="iconflag"
src="https://api.ccttiot.com/smartmeter/img/static/uEAmNMMt65U10qwijrsJ" mode=""></image>
<map class='map' id="map" :latitude="latitude" :longitude="longitude" :markers="covers" @markertap="handleMarkerClick" @regionchange="regionchange" :polygons="polyline" :show-location="true"/>
<!-- 左侧图标 -->
<view class="lticon">
<image src="https://api.ccttiot.com/smartmeter/img/static/u8WwVFtQy59eGWWQ9cfy" @click="btnbz" mode=""></image>
新版电动车
2025-04-10 08:57:21 +08:00
<!-- <image src="https://api.ccttiot.com/smartmeter/img/static/ulCxXq0nQDSfdDWg5Ttw" @click="kefuflag = true" mode=""></image> -->
新电动车
2025-04-01 21:35:30 +08:00
<image src="https://api.ccttiot.com/smartmeter/img/static/uDnm3dpbwMh9jLBRMeZw" @click="btnhuiz" mode=""></image>
</view>
<!-- 右侧图标 -->
<view class="rticon">
<image v-if="rtindex != 1" src="https://api.ccttiot.com/smartmeter/img/static/uyNPBYUMjYxybfRLHyu9" @click="btntap(1)" mode=""></image>
<image v-if="rtindex == 1" src="https://api.ccttiot.com/smartmeter/img/static/u8zXd0xYhLKD0BvgZDVv" @click="btntap(1)" mode=""></image>
<image v-if="rtindex != 2" src="https://api.ccttiot.com/smartmeter/img/static/unoWsjJjeFKVrivp7MMF" @click="btntap(2)" mode=""></image>
<image v-if="rtindex == 2" src="https://api.ccttiot.com/smartmeter/img/static/ukCjlSRsRoqMNNNxcFJ9" @click="btntap(2)" mode=""></image>
<image v-if="rtindex != 3" src="https://api.ccttiot.com/smartmeter/img/static/uwIWeuTVbjFLNmLTGPOh" @click="btntap(3)" mode=""></image>
<image v-if="rtindex == 3" src="https://api.ccttiot.com/smartmeter/img/static/uEWVQFGBf10XJn8aTlaZ" @click="btntap(3)" mode=""></image>
新版电动车
2025-04-10 08:57:21 +08:00
<image style="width: 80rpx;height: 80rpx;" @click="toggleIconAndCallout" src="https://api.ccttiot.com/smartmeter/img/static/uZT6o9OqOdZeXHLYszIg" mode=""></image>
新电动车
2025-04-01 21:35:30 +08:00
</view>
<!-- 点击地图门店弹窗 -->
<view class="shoptc" v-if="shoptcflag" @click="btnmendain">
<view class="top">
<view class="name">
云行租车（汇丰公寓）
</view>
<view class="zu">
1辆可租 <image src="https://api.ccttiot.com/smartmeter/img/static/uX3GfXzwzS4GY1J55raG" mode=""></image>
</view>
</view>
<view class="juli">
<view class="mi">
727m
</view>
<view class="dizhi">
福建省宁德市霞浦县六一七路402号台铃...
</view>
</view>
<view class="cont">
<image src="https://api.ccttiot.com/smartmeter/img/static/uK5bAmrXLEHVxbH6FcFD" mode=""></image>
<view class="shuoming">
<view class="name">
全新车网红泡泡50KM...
</view>
<view class="price">
日租￥<text>108</text>
</view>
</view>
</view>
</view>
<!-- 车辆弹窗 -->
<view class="biketc" v-if="taocanflag">
<view class="topfor">
<view class="biketop">
<image src="https://api.ccttiot.com/smartmeter/img/static/u6u6mWzrgiVCHICU1IWg" mode=""></image>
<view class="bianh">
<view class="bh">
车辆编号：{{cheobj.sn == null ? '--' : cheobj.sn}}
</view>
<view class="">
车牌号：{{cheobj.vehicleNum == null ? '--' : cheobj.vehicleNum}}
</view>
</view>
<view class="bikebeep" @click="btnxlxc">
响铃寻车
</view>
</view>
<view class="bikesy">
<view class="bikelt">
<view class="bikets">
剩余骑行
</view>
<view class="bikegongli">
<image src="https://api.ccttiot.com/smartmeter/img/static/uLybsyJqWL4siF7mXkXh" mode=""></image> {{cheobj.remainEndurance == null ? '--' : cheobj.remainEndurance}}公里
</view>
</view>
<view class="bikert">
<view class="bikets">
剩余电量
</view>
<view class="bikegongli">
<image src="https://api.ccttiot.com/smartmeter/img/static/u9y1tZIJBWLsO0DRoweT" mode=""></image> {{cheobj.remainingPower == null ? '--' : cheobj.remainingPower}}%
</view>
</view>
</view>
<!-- <view class="biketaocan">
<view :class="['bikelist',tcindex == index ? 'active' : '']" v-for="(item,index) in taocaolist" :key="index" @click="btntcxz(index)">
<view class="bike_item">
<image src="https://api.ccttiot.com/smartmeter/img/static/uGddSTtK7UhfNpLzQJDc" mode=""></image>
<view class="name">
{{item.name == null ? '--' : item.name}}
</view>
<view class="qibu">
<text>起步价</text> <text>{{item.ridingRule == null ? '--' : item.ridingRule}}元</text>(含免费骑行5分钟)
</view>
<view class="qibu">
<text>时长费</text> <text>1.0元/10分钟</text>
</view>
<view class="qibu">
<text>预存费</text> <text>10元</text>
</view>
<view class="ckxq">
查看详情
</view>
</view>
</view>
</view> -->
<view class="bikeyc" @click="btncheyc">
×
</view>
</view>
<view class="anniuks" @click="btndetaxq">
<text>去下单</text>
</view>
</view>
<view class="clmask" v-if="taocanflag"></view>
<!-- 平台客服弹窗 -->
<view class="kefutc" v-if="kefuflag">
<image src="https://api.ccttiot.com/smartmeter/img/static/umtjJg2CJLiOS6hfAEzo" mode="" @click="kefuflag = false"></image>
<view class="box">
新版电动车
2025-04-10 08:57:21 +08:00
<view class="" style="max-height: 170rpx;overflow: scroll;">
<view class="top" v-for="(item,index) in kefulist" :key="index">
<view class="dianhua">
{{item.name == null ? '--' : item.name}}：{{item.contact == null ? '--' : item.contact}}
</view>
<view class="boda" @click.stop="btnptkf(item.contact)">
<u-icon name="phone-fill" color="#4297F3" size="28"></u-icon>
<text>拨打</text>
</view>
新电动车
2025-04-01 21:35:30 +08:00
</view>
</view>
<view class="bot">
<view class="wz">
平台客服工作时间
</view>
<view class="wz">
08：00~20：00
</view>
<view class="wzs">
客服电话高峰期可能遇忙，请耐心等待
</view>
</view>
</view>
</view>
新版电动车
2025-04-10 08:57:21 +08:00
<view class="mask" v-if="kefuflag"></view>
新电动车
2025-04-01 21:35:30 +08:00
<tab-bar :indexs='1'></tab-bar>
</view>
</template>
<script>
export default {
data() {
return {
bgc: {
backgroundColor: "",
},
latitude:'',
longitude:'',
rtindex:2,
covers:[],
shoptcflag:false,
iconPath:'',
tcindex:0,
taocanflag:false,
kefuflag:false,
iconflag:false,
cheobj:{},
jingweidu:'',
taocaolist:[],
新版电动车
2025-04-10 08:57:21 +08:00
polyline:[],
kefulist:[]
新电动车
2025-04-01 21:35:30 +08:00
}
},
onLoad() {
},
onShow() {
this.getMyLocation()
新版电动车
2025-04-10 08:57:21 +08:00
this.getkefu()
this.polyline = []
新电动车
2025-04-01 21:35:30 +08:00
},
methods: {
新版电动车
2025-04-10 08:57:21 +08:00
// 请求客服
getkefu(){
this.$u.get(`/app/customerService/list?pageNum=1&pageSize=999`).then(res =>{
if(res.code == 200){
this.kefulist = res.rows
}
})
},
新电动车
2025-04-01 21:35:30 +08:00
// 点击去下单
btndetaxq(){
this.$u.get(`/getInfo`).then(res =>{
if(res.code == 200){
this.taocanflag = false
uni.navigateTo({
url:'/page_fenbao/storedlist/trueorder?modelId=' + this.cheobj.modelId + '&sn=' + this.cheobj.sn
})
}else if(res.code == 401){
uni.showModal({
title: '提示',
content: '您当前未登录，是否前去登录？',
showCancel: true,
success: function (res) {
if (res.confirm) {
uni.reLaunch({
url:'/pages/login/login'
})
} else if (res.cancel) {
}
}
})
}
})
},
// 点击响铃寻车
btnxlxc(){
this.$u.put(`/bst/device/iot/ring?id=${this.cheobj.id}`).then((res) => {
if (res.code == 200) {
uni.showToast({
title: '操作成功',
icon: 'success',
duration: 2000
})
}else if(res.code == 401){
uni.showModal({
title: '提示',
content: '您当前未登录，是否前去登录？',
showCancel: true,
success: function (res) {
if (res.confirm) {
uni.reLaunch({
url:'/pages/login/login'
})
} else if (res.cancel) {
}
}
})
} else{
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
})
}
})
},
// 点击隐藏车辆弹窗
btncheyc(){
this.taocanflag = false
this.getqingqiu()
},
// 拖动查询中心点的数据
regionchange(e) {
this.iconflag = true
if (e.type == 'end') {
if(this.rtindex == 2){
this.jingweidu = e.detail.centerLocation.longitude + ',' + e.detail.centerLocation.latitude
this.getqingqiu()
this.iconflag = false
}
}
},
// 点击选择骑行套餐
btntcxz(index){
this.tcindex = index
},
// 点击跳转到帮助中心
btnbz(){
uni.navigateTo({
url:'/page_user/bangzhu'
})
},
// 点击拨打平台客服电话
btnptkf(){
uni.makePhoneCall({
phoneNumber: '18888888888',
success: function(res) {
console.log('拨打电话成功', res)
},
fail: function(err) {
console.error('拨打电话失败', err)
}
})
},
// 点击跳转到租车门店
btnmendain(){
uni.navigateTo({
url:'/page_fenbao/storedlist/index'
})
},
// 点击右侧图标
btntap(num){
if(num == 3){
uni.showToast({
title: '导览暂未开放',
icon: 'none',
duration:2000
})
}else{
this.covers = []
this.rtindex = num
this.shoptcflag = false
this.getqingqiu()
}
},
// 点击调用回到地图中心点
btnhuiz(){
this.setMapScale()
},
// 回到地图中心点
async setMapScale(e, val) {
let mapContext = uni.createMapContext('map', this);
let setScale = () => {
return new Promise((resolve, reject) => {
mapContext.getScale({
success: r => {
resolve()
}
})
})
};
await setScale()
mapContext.moveToLocation({
success: (res) => {
const timer = setTimeout(() => {
clearTimeout(timer)
}, 500)
}
})
},
// 点击地图中的店铺操作
handleMarkerClick(e){
let id = String(e.detail.markerId)
if(id.slice(-1) == 1){
console.log('店铺')
this.covers.filter(item =>{
if(item.id == id){
item.iconPath = 'https://api.ccttiot.com/smartmeter/img/static/u8ONjRuMpydcZ4WuA6vP'
this.shoptcflag = true
}
})
}else if(id.slice(-1) == 2){
console.log('车辆')
this.covers.filter(item =>{
if(item.id == id){
item.iconPath = 'https://api.ccttiot.com/smartmeter/img/static/uCBNaRAdk9kcgQgrom2G'
this.taocanflag = true
this.$u.get(`/app/device/availableDetail?id=${id.slice(0, -1)}`).then((res) => {
if (res.code == 200) {
this.cheobj = res.data
this.getArea()
}
})
}
})
}else if(id.slice(-1) == 3){
console.log('导览')
}
},
// 请求附近车辆and门店
getqingqiu(){
if(this.rtindex == 1){
this.iconPath = 'https://api.ccttiot.com/smartmeter/img/static/upX2lLilhrRi4tttdHlo'
}else if(this.rtindex == 2){
this.iconPath = 'https://api.ccttiot.com/smartmeter/img/static/uX0FBv86yDIR5tIqjoe2'
this.iconPath = 'https://api.ccttiot.com/smartmeter/img/static/uX0FBv86yDIR5tIqjoe2'
this.$u.get(`/app/device/listNearBy?radius=10000&center=${this.jingweidu}`).then((res) => {
if (res.code == 200) {
this.covers = []
res.data.forEach(item =>{
const shopCover = {
// 门店后面拼接1，车辆拼接2，3是导览
id: this.rtindex == 1 ? parseInt(item.id + "1") : this.rtindex == 2 ? parseInt(item.id + "2") : parseInt(item.id + "3"),
latitude: item.latitude,
longitude:item.longitude,
width: 35,
height: 40,
iconPath:this.iconPath,
label: {
content: item.vehicleNum,
anchorX: this.calculateAnchorX(item.vehicleNum),
fontWeight: 700,
color: '#0D75E5',
borderColor: '#fff',
borderRadius: 5,
bgColor: '#fff',
padding:1,
}
}
this.covers.push(shopCover)
})
}
})
}else if(this.rtindex == 3){
this.iconPath = 'https://api.ccttiot.com/smartmeter/img/static/un7ecyEN8vsJhlEnXfD4'
}else{
this.iconPath = null
}
},
// 获取自身位置
getMyLocation() {
uni.getLocation({
type: 'wgs84',
success: (res) => {
this.latitude = Number(res.latitude) - 0.005
this.longitude = Number(res.longitude) + 0.005
this.jingweidu = this.longitude + ',' + this.latitude
this.setMapScale()
this.getqingqiu()
},
fail: (err) => {
console.error('获取位置失败：', err)
}
})
},
// 均衡地图文字居中
calculateAnchorX(name) {
let chineseLength = 0
let englishLength = 0
for (let i = 0; i < name.length; i++) {
const charCode = name.charCodeAt(i)
if (charCode >= 0x4e00 && charCode <= 0x9fa5) {
chineseLength++
} else if (/[a-zA-Z]/.test(name[i])) {
englishLength = englishLength + 1.2 // 英文长度加1，但视为两个中文字符长度
}
}
const totalLength = chineseLength + englishLength * 2;
return -totalLength * 6.5 // 假设每个中文字符对应的 anchorX 偏移是 -6.5
},
convertBoundaryToPolyline(boundary) {
if (!boundary) return null
const points = JSON.parse(boundary).map(coord => ({
latitude: coord[1],
longitude: coord[0]
}))
const polyline = {
points: points,
fillColor: "#55888840", //填充颜色
strokeColor: "#22FF00", //描边颜色
strokeWidth: 2, //描边宽度
zIndex: 1, //层级
}
return polyline
},
convertBoundaryToPolylines(boundaries, num) {
if (num == 1) {
console.log('判断')
return boundaries.map(boundary => {
if (!boundary) return null
let coords
try {
coords = JSON.parse(boundary)
} catch (error) {
console.error("Error parsing boundary JSON:", error)
return null
}
if (!Array.isArray(coords)) {
console.error("Parsed boundary is not an array:", coords)
return null
}
console.log(coords,'1111111');
const points = coords.map(coord => ({
latitude: coord[1],
longitude: coord[0]
}))
return {
points: points,
fillColor: "#3A7EDB40", //填充颜色
strokeColor: "#3A7EDB", //描边颜色
strokeWidth: 2, //描边宽度
zIndex: 1, //层级
新版电动车
2025-04-10 08:57:21 +08:00
}
}).filter(polyline => polyline !== null)
新电动车
2025-04-01 21:35:30 +08:00
} else if (num == 2) {
return boundaries.map(boundary => {
if (!boundary) return null
let coords
try {
coords = JSON.parse(boundary)
} catch (error) {
console.error("Error parsing boundary JSON:", error)
新版电动车
2025-04-10 08:57:21 +08:00
return null
新电动车
2025-04-01 21:35:30 +08:00
}
if (!Array.isArray(coords)) {
console.error("Parsed boundary is not an array:", coords)
新版电动车
2025-04-10 08:57:21 +08:00
return null
新电动车
2025-04-01 21:35:30 +08:00
}
新版电动车
2025-04-10 08:57:21 +08:00
console.log(coords,'2222222222222')
新电动车
2025-04-01 21:35:30 +08:00
const points = coords.map(coord => ({
latitude: coord[1],
longitude: coord[0]
}))
return {
points: points,
fillColor: "#FFF5D640", //填充颜色
strokeColor: "#FFC107", //描边颜色
strokeWidth: 2, //描边宽度
zIndex: 1, //层级
}
新版电动车
2025-04-10 08:57:21 +08:00
}).filter(polyline => polyline !== null)
新电动车
2025-04-01 21:35:30 +08:00
} else if (num == 3) {
return boundaries.map(boundary => {
if (!boundary) return null
let coords
try {
coords = JSON.parse(boundary)
} catch (error) {
console.error("Error parsing boundary JSON:", error)
return null
}
if (!Array.isArray(coords)) {
console.error("Parsed boundary is not an array:", coords)
return null
}
console.log(coords,'333333333333');
const points = coords.map(coord => ({
latitude: coord[1],
longitude: coord[0]
}));
return {
points: points,
fillColor: "#FFD1CF40", //填充颜色
strokeColor: "#FF473E", //描边颜色
strokeWidth: 2, //描边宽度
zIndex: 1, //层级
};
新版电动车
2025-04-10 08:57:21 +08:00
}).filter(polyline => polyline !== null)
新电动车
2025-04-01 21:35:30 +08:00
}
},
toggleIconAndCallout() {
if(this.cheobj == ''){
uni.showToast({
title: '请选选择车辆',
icon: 'none',
duration:2000
})
}else{
this.showIconAndCallout = !this.showIconAndCallout
if (this.showIconAndCallout) {
const newMarkers = []
this.parkingList.forEach(item => {
newMarkers.push({
id: parseFloat(item.id),
latitude: parseFloat(item.latitude),
longitude: parseFloat(item.longitude),
width: 20,
height: 28.95,
iconPath: item.type == 1 ?
'https://lxnapi.ccttiot.com/bike/img/static/up2xXqAgwCX5iER600k3' : item
.type == 2 ?
'https://lxnapi.ccttiot.com/bike/img/static/u53BAQcFIX3vxsCzEZ7t' :
' https://lxnapi.ccttiot.com/bike/img/static/uDNY5Q4zOiZTCBTA2Jdq',
callout: {
content: item.name,
color: '#ffffff',
fontSize: 14,
borderRadius: 10,
bgColor: item.type == 1 ? '#3A7EDB' : item.type == 2 ? '#FFC107' : '#FF473E',
padding: 6,
display: 'ALWAYS'
},
isCalloutVisible: true // 添加标记
})
})
this.$set(this, 'covers', [...this.covers, ...newMarkers])
} else {
// 过滤掉所有气泡显示的标记
this.$set(this, 'covers', this.covers.filter(marker => !marker.isCalloutVisible))
}
}
},
getParking() {
// 发送请求获取数据
this.$u.get(`/app/areaSub/listByArea?areaId=${this.cheobj.areaId}`).then((res) => {
if (res.code === 200) {
// 处理接口返回的数据
const type1Data = []
const type2Data = []
const type3Data = []
res.data.forEach(row => {
if (row.type == 1) {
type1Data.push(row)
} else if (row.type == 2) {
type2Data.push(row)
} else if (row.type == 3) {
type3Data.push(row)
}
})
const validBoundaries = type1Data.map(row => row.boundaryStr).filter(boundary =>
typeof boundary === 'string' && boundary.trim() !== '')
const polylines = this.convertBoundaryToPolylines(validBoundaries, 1)
const validBoundaries1 = type2Data.map(row => row.boundaryStr).filter(boundary =>
typeof boundary === 'string' && boundary.trim() !== '')
const polylines1 = this.convertBoundaryToPolylines(validBoundaries1, 2)
const validBoundaries2 = type3Data.map(row => row.boundaryStr).filter(boundary =>
typeof boundary === 'string' && boundary.trim() !== '')
const polylines2 = this.convertBoundaryToPolylines(validBoundaries2, 3)
// 将处理后的数据添加到 this.polyline 中
this.polyline = this.polyline.concat(polylines2)
this.polyline = this.polyline.concat(polylines1)
this.polyline = this.polyline.concat(polylines)
this.parkingList = res.data
}
})
},
新版电动车
2025-04-10 08:57:21 +08:00
// 请求运营区停车点，禁行区，
新电动车
2025-04-01 21:35:30 +08:00
getArea() {
this.$u.get(`/app/area/detail?id=${this.cheobj.areaId}`).then((res) => {
if (res.code == 200) {
const polylines = this.convertBoundaryToPolyline(res.data.boundaryStr)
this.polyline.push(polylines)
this.getParking()
}
})
},
}
}
</script>
<style lang="scss">
page {
background: #fff;
border-radius: 0rpx 0rpx 0rpx 0rpx;
}
.active{
image{
z-index: 99 !important;
}
.bike_item{
border: 1px solid #4297F3 !important;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.picimg {
width: 120rpx;
height: 120rpx;
position: fixed;
left: 50%;
transform: translateX(-50%);
top: 50%;
z-index: 99;
}
.kefutc{
animation: fadeIn 0.5s ease-in-out forwards;
position: fixed;
top: 660rpx;
left: 50%;
transform: translateX(-50%);
z-index: 99;
.bot{
margin-top: 30rpx;
.wz{
margin-top: 10rpx;
font-weight: 600;
font-size: 28rpx;
color: #3D3D3D;
}
.wzs{
margin-top: 10rpx;
font-size: 24rpx;
color: #7C7C7C;
}
}
.top{
width: 538rpx;
height: 122rpx;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0,0,0,0.1);
border-radius: 14rpx 14rpx 14rpx 14rpx;
display: flex;
justify-content: space-between;
align-items: center;
padding-right: 14rpx;
box-sizing: border-box;
新版电动车
2025-04-10 08:57:21 +08:00
margin-top: 20rpx;
新电动车
2025-04-01 21:35:30 +08:00
.dianhua{
font-weight: 600;
font-size: 28rpx;
color: #3D3D3D;
padding-left: 26rpx;
box-sizing: border-box;
}
.boda{
width: 94rpx;
height: 94rpx;
background: #DCEDFF;
border-radius: 8rpx 8rpx 8rpx 8rpx;
text-align: center;
padding-top: 8rpx;
box-sizing: border-box;
text{
display: block;
}
}
}
image{
position: absolute;
top: -280rpx;
z-index: -1;
left: 50%;
transform: translateX(-50%);
width: 614rpx;
height: 748rpx;
}
}
新版电动车
2025-04-10 08:57:21 +08:00
.mask{
width: 100%;
height: 100vh;
position: fixed;
z-index: 98;
background-color: rgba(0,0,0,0.08);
top: 0;
left: 0;
}
新电动车
2025-04-01 21:35:30 +08:00
.clmask{
width: 100%;
height: 100vh;
position: fixed;
z-index: 98;
background-color: rgba(0,0,0,0.08);
top: 0;
left: 0;
}
.biketc{
position: fixed;
left: 0;
bottom: 0;
z-index: 99;
.topfor{
width: 750rpx;
max-height: 664rpx;
background: #f9f9f9;
border-radius: 30rpx 30rpx 0 0;
padding: 44rpx 34rpx;
box-sizing: border-box;
position: relative;
.bikeyc{
position: absolute;
top: 20rpx;
right: 32rpx;
font-size: 70rpx;
font-weight: 600;
}
.biketaocan{
display: flex;
overflow: scroll;
.bikelist{
margin-right: 22rpx;
.bike_item{
border: 1px solid #fff;
margin-top: 36rpx;
padding-top: 16rpx;
padding-left: 24rpx;
padding-right: 24rpx;
box-sizing: border-box;
width: 368rpx;
height: 280rpx;
background: #FFFFFF;
box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0,0,0,0.08);
border-radius: 26rpx 26rpx 26rpx 26rpx;
position: relative;
overflow: hidden;
image{
width: 82rpx;
height: 50rpx;
position: absolute;
top: 0;
right: 0;
z-index: -1;
}
.name{
font-weight: 600;
font-size: 32rpx;
color: #3D3D3D;
}
.qibu{
display: flex;
justify-content: space-between;
font-size: 24rpx;
color: #3D3D3D;
margin-top: 16rpx;
}
.ckxq{
width: 368rpx;
height: 58rpx;
background: #4297F3;
font-weight: 600;
font-size: 28rpx;
color: #FFFFFF;
position: absolute;
left: 0;
bottom: 0;
text-align: center;
line-height: 58rpx;
}
}
}
}
.bikesy{
width: 100%;
border-top:1rpx solid #D8D8D8;
margin-top: 30rpx;
padding-top: 36rpx;
box-sizing: border-box;
display: flex;
.bikelt{
width: 50%;
text-align: center;
.bikegongli{
font-weight: 600;
font-size: 48rpx;
color: #3D3D3D;
}
.bikets{
font-size: 28rpx;
color: #808080;
margin-bottom: 28rpx;
}
image{
width: 48rpx;
height: 36rpx;
margin-right: 18rpx;
}
}
.bikert{
width: 50%;
text-align: center;
.bikegongli{
font-weight: 600;
font-size: 48rpx;
color: #3D3D3D;
}
.bikets{
font-size: 28rpx;
color: #808080;
margin-bottom: 28rpx;
}
image{
width: 22rpx;
height: 48rpx;
margin-right: 18rpx;
}
}
}
.biketop{
display: flex;
align-items: center;
.bikebeep{
width: 160rpx;
height: 60rpx;
border-radius: 10rpx 10rpx 10rpx 10rpx;
border: 2rpx solid #4C97E7;
font-weight: 600;
font-size: 28rpx;
color: #4C97E7;
text-align: center;
line-height: 60rpx;
margin-left: 80rpx;
}
.bianh{
view{
font-weight: 600;
font-size: 28rpx;
color: #3D3D3D;
}
}
image{
width: 56rpx;
height: 56rpx;
margin-right: 24rpx;
}
}
}
.anniuks{
width: 750rpx;
height: 184rpx;
background: #FFFFFF;
box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0,0,0,0.08);
border-radius: 0rpx 0rpx 0rpx 0rpx;
text-align: center;
line-height: 184rpx;
text{
display: inline-block;
width: 680rpx;
height: 90rpx;
background: #4C97E7;
border-radius: 54rpx 54rpx 54rpx 54rpx;
font-weight: 600;
font-size: 40rpx;
color: #FFFFFF;
text-align: center;
line-height: 90rpx;
}
}
}
.shoptc{
position: fixed;
width: 696rpx;
max-height: 312rpx;
background: #FFFFFF;
border-radius: 20rpx 20rpx 20rpx 20rpx;
bottom: 200rpx;
left: 50%;
transform: translateX(-50%);
padding: 28rpx 34rpx;
box-sizing: border-box;
.cont{
margin-top: 40rpx;
display: flex;
.shuoming{
.name{
font-size: 28rpx;
color: #3D3D3D;
}
.price{
font-size: 24rpx;
color: #FF1C1C;
margin-top: 20rpx;
text{
font-size: 44rpx;
}
}
}
image{
width: 166rpx;
height: 128rpx;
margin-right: 26rpx;
}
}
.juli{
display: flex;
align-items: center;
margin-top: 12rpx;
.mi{
padding: 0 10rpx;
box-sizing: border-box;
height: 38rpx;
line-height: 38rpx;
background: #DCEDFF;
border-radius: 4rpx 4rpx 4rpx 4rpx;
font-size: 24rpx;
color: #0D75E5;
margin-right: 20rpx;
}
.dizhi{
font-size: 28rpx;
color: #808080;
}
}
.top{
display: flex;
justify-content: space-between;
.name{
font-size: 32rpx;
color: #3D3D3D;
font-weight: 600;
}
.zu{
font-size: 24rpx;
color: #3D3D3D;
display: flex;
align-items: center;
image{
width: 22rpx;
height: 22rpx;
}
}
}
}
.rticon{
position: fixed;
right:28rpx;
top: 450rpx;
image{
width: 78rpx;
height: 96rpx;
display: block;
margin-top: 32rpx;
}
}
.lticon{
position: fixed;
left: 28rpx;
top: 538rpx;
image{
width: 88rpx;
height: 88rpx;
display: block;
margin-top: 32rpx;
}
}
.map{
width: 100%;
height: 100vh;
}
</style>
Reference in New Issue Copy Permalink