844 lines
20 KiB
Vue
844 lines
20 KiB
Vue
<template>
|
||
<view class="page">
|
||
<u-navbar :is-back="false" title="小鹿骑行" :border-bottom="false" back-icon-color="000" :background="bgc" title-color='#000' title-size='36'
|
||
height='44' id="navbar">
|
||
</u-navbar>
|
||
<view class="gonggao" @click="btntopgg">
|
||
<u-icon name="volume-fill" color="#fff" style="position: absolute;left: 20rpx;" size="32"></u-icon>
|
||
<view class="container">
|
||
<view class="scroll-text">
|
||
<view class="scroll-item">
|
||
{{announcements.noticeTitle == null ? '暂无最新公告！！！' : announcements.noticeTitle}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<u-icon name="arrow-right" color="#fff" style="position: absolute;right: 10rpx;" size="32"></u-icon>
|
||
</view>
|
||
<!-- 公告弹窗 -->
|
||
<view class="noticetc" v-if="gonggaoflag">
|
||
<view class="name">
|
||
公告
|
||
</view>
|
||
<view class="biaoti">
|
||
{{gonggaoxq.noticeTitle}}
|
||
</view>
|
||
<!-- <view class="cont" v-html="gonggaoxq.noticeContent"></view> -->
|
||
<u-parse :html="gonggaoxq.noticeContent" style="width: 100%;height: 620rpx;background-color: #efefef;padding: 10rpx;box-sizing: border-box;margin-top: 20rpx;"></u-parse>
|
||
<view class="btn" @click="btnggtc">
|
||
我知道了
|
||
</view>
|
||
</view>
|
||
<view class="mask" v-if="gonggaoflag"></view>
|
||
<!-- 地图 -->
|
||
<view class="ditu">
|
||
<map class='map' id="map" :latitude="latitude" :longitude="longitude" :show-location="true" @click="btnzk"/>
|
||
<image @click="btnzk" src="https://api.ccttiot.com/smartmeter/img/static/up0OxngKxP5JZ3hRLvCv" class="zk" mode=""></image>
|
||
<view class="caozuo">
|
||
<image @click="btnpage(1)" src="https://api.ccttiot.com/smartmeter/img/static/uAGgpuC9wi9lFXZFO35G" mode=""></image> <!-- 门店 -->
|
||
<image @click="btnpage(2)" src="https://api.ccttiot.com/smartmeter/img/static/u4DUUUKIRR5HcB8uIkl4" mode=""></image> <!-- 订单 -->
|
||
<image @click="btnpage(3)" src="https://api.ccttiot.com/smartmeter/img/static/unPEUv14mgsytgeis4Fx" mode=""></image> <!-- 车辆 -->
|
||
<image @click="btnpage(4)" style="width: 150rpx;" src="https://api.ccttiot.com/smartmeter/img/static/uJPhQOQ3y97HIdcQVdGG" mode=""></image> <!-- 编码开锁 -->
|
||
</view>
|
||
</view>
|
||
<view class="kuaijie">
|
||
<image @click="btntiao(1)" src="https://api.ccttiot.com/smartmeter/img/static/uv1enMcgcD1PXvai0NLr" mode=""></image> <!-- 用车地图 -->
|
||
<image @click="btntiao(2)" src="https://api.ccttiot.com/smartmeter/img/static/uPl5nHh3fRWmUSe5ii8J" mode=""></image> <!-- 使用帮助 -->
|
||
<image @click="btntiao(3)" src="https://api.ccttiot.com/smartmeter/img/static/uoBQqFmav3wEjTWUYOyH" mode=""></image> <!-- 车辆故障 -->
|
||
<image @click="btntiao(4)" src="https://api.ccttiot.com/smartmeter/img/static/ukIxiM6jWFYN9uvWKbDW" mode=""></image> <!-- 意见反馈 -->
|
||
<image @click="btnkf" src="https://api.ccttiot.com/smartmeter/img/static/uCTFhZc3b7Jq0spcD0EC" mode=""></image> <!-- 客服 -->
|
||
</view>
|
||
<view class="guanggao">
|
||
<!-- <image src="https://api.ccttiot.com/smartmeter/img/static/uTZBBRuyRexKd6c4VE9d" mode="aspectFill"></image> -->
|
||
<u-swiper :list="lists" @click="btnshangjia"></u-swiper>
|
||
<!-- <image src="https://api.ccttiot.com/smartmeter/img/static/uEMuO2M40WcExJVSprIy" class="kefu" mode=""></image> -->
|
||
</view>
|
||
<view class="fujin">
|
||
<view class="names">
|
||
附近门店
|
||
</view>
|
||
<view class="list">
|
||
<view class="list_item" v-if="false" v-for="(item,index) in 2" :key="index" @click="btnxq">
|
||
<view class="top">
|
||
<view class="name">
|
||
云行租车（汇丰公寓）
|
||
</view>
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uebBGQwgvIO4BgJB5nd0" @click.stop="btntel" mode=""></image>
|
||
</view>
|
||
<view class="dizhi">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uxTxqrn1kIVJEHCS57YU" mode=""></image> 2.3km | 天目山路134号
|
||
</view>
|
||
<view class="bot">
|
||
<view class="lt">
|
||
<view class="yytime">
|
||
<text>营业时间 | </text>06:00-23:00
|
||
</view>
|
||
<view class="songqu">
|
||
免费送取车
|
||
</view>
|
||
</view>
|
||
<view class="rt">
|
||
<view class="rizu">
|
||
<view class="price">
|
||
日均￥<text>69</text>起
|
||
</view>
|
||
<view class="qizu">
|
||
3辆车可租
|
||
</view>
|
||
</view>
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uXOW5yZvS1fBGH7xz77A" mode=""></image>
|
||
</view>
|
||
</view>
|
||
<view class="cheliang">
|
||
<view class="quanxin" v-for="(item,index) in 2" :key="index">
|
||
<view class="qxlt">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uK5bAmrXLEHVxbH6FcFD" mode=""></image>
|
||
</view>
|
||
<view class="qxrt">
|
||
<view class="name">
|
||
全新车网红...
|
||
</view>
|
||
<view class="junjia">
|
||
日均￥69
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="dibutishi">
|
||
<!-- <text>当前附近没有更多门店咯...</text> -->
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/usBtiESbpV8GIY3k4ukv" mode=""></image>
|
||
</view>
|
||
</view>
|
||
</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">
|
||
<view class="" style="max-height: 280rpx;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 class="wz">
|
||
工作时间：{{item.startTime}}~{{item.endTime}}
|
||
</view>
|
||
</view>
|
||
<view class="boda" @click.stop="btnptkf(item.contact)">
|
||
<u-icon name="phone-fill" color="#4297F3" size="28"></u-icon>
|
||
<text>拨打</text>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="top">
|
||
<view class="dianhua">
|
||
平台官方客服：13774775741
|
||
</view>
|
||
<view class="boda" @click.stop="btnptkf">
|
||
<u-icon name="phone-fill" color="#4297F3" size="28"></u-icon>
|
||
<text>拨打</text>
|
||
</view>
|
||
</view> -->
|
||
</view>
|
||
<view class="bot">
|
||
<!-- <view class="wz">
|
||
客服工作时间
|
||
</view> -->
|
||
|
||
<view class="wzs">
|
||
客服电话高峰期可能遇忙，请耐心等待
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="mask" v-if="kefuflag"></view>
|
||
<tab-bar :indexs='0'></tab-bar>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
var xBlufi = require("@/components/blufi/xBlufi.js")
|
||
export default {
|
||
data() {
|
||
return {
|
||
bgc: {
|
||
backgroundColor: "#F4FCFF",
|
||
},
|
||
latitude:'',
|
||
longitude:'',
|
||
covers:[],
|
||
kefuflag:false,
|
||
gonggaoxq:{},
|
||
gonggaoflag:false,
|
||
announcements: {},
|
||
kefulist:[],
|
||
lists: [],
|
||
info:{},
|
||
tiaozhuanlist:[]
|
||
}
|
||
},
|
||
onLoad() {
|
||
|
||
},
|
||
// 分享到好友（会话）
|
||
onShareAppMessage: function() {
|
||
return {
|
||
title: '小鹿骑行',
|
||
path: '/pages/index/index'
|
||
}
|
||
},
|
||
// 分享到朋友圈
|
||
onShareTimeline: function() {
|
||
return {
|
||
title: '小鹿骑行',
|
||
query: '',
|
||
path: '/pages/index/index'
|
||
}
|
||
},
|
||
onShow() {
|
||
this.getinfo()
|
||
this.getlunbo()
|
||
},
|
||
methods: {
|
||
// 点击跳转轮播图跳转
|
||
btnshangjia(e){
|
||
console.log(e,'1212121',this.tiaozhuanlist[e].urlType);
|
||
if(this.tiaozhuanlist[e].urlType == 1){
|
||
uni.navigateTo({
|
||
url: '/page_fenbao/webview?url=' + this.tiaozhuanlist[e].url
|
||
})
|
||
}else{
|
||
uni.navigateTo({
|
||
url: '/' + this.tiaozhuanlist[e].url
|
||
})
|
||
// uni.navigateTo({
|
||
// url:'/page_user/zhaoshang'
|
||
// })
|
||
}
|
||
},
|
||
// 点击显示客服
|
||
btnkf(){
|
||
if(this.kefulist.length > 0){
|
||
this.kefuflag = true
|
||
}else{
|
||
uni.showToast({
|
||
title: '当前暂无客服',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
}
|
||
},
|
||
// 获取客服
|
||
getkefu(){
|
||
this.$u.get(`/app/customerService/list?pageNum=1&pageSize=999&areaId=${this.info.areaId}`).then(res => {
|
||
if(res.code == 200){
|
||
if(res.rows.length > 0){
|
||
this.kefulist = res.rows
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 获取广告轮播图
|
||
getlunbo(){
|
||
this.$u.get("/app/ad").then(res => {
|
||
if(res.code == 200){
|
||
this.lists = []
|
||
this.tiaozhuanlist = res.data
|
||
if(res.data.length > 0 && res.data[0] != null){
|
||
res.data.forEach(item =>{
|
||
this.lists.push({
|
||
image:item.picture,
|
||
title: item.adId
|
||
})
|
||
})
|
||
}else{
|
||
this.lists.push({
|
||
image:"https://api.ccttiot.com/smartmeter/img/static/uTZBBRuyRexKd6c4VE9d",
|
||
title: ""
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
// 获取个人用户信息
|
||
getinfo(){
|
||
this.$u.get("/getInfo").then(res => {
|
||
if(res.code == 200){
|
||
this.info = res.user
|
||
this.getMyLocation()
|
||
this.getgonggao()
|
||
this.getkefu()
|
||
}else if(res.code == 401){
|
||
this.getlogo()
|
||
}
|
||
})
|
||
},
|
||
// 静默登录
|
||
getlogo(){
|
||
let taht = this
|
||
wx.login({
|
||
success(res) {
|
||
if (res.code) {
|
||
let data = {
|
||
loginCode: res.code,
|
||
appId:taht.$store.state.appid
|
||
}
|
||
taht.$u.post('/wxLogin', data).then(res => {
|
||
if (res.code == 200) {
|
||
uni.setStorageSync('token', res.token)
|
||
taht.getinfo()
|
||
that.getlunbo()
|
||
}else{
|
||
taht.getinfo()
|
||
}
|
||
})
|
||
}
|
||
},
|
||
})
|
||
},
|
||
// 请求客服
|
||
// getkefu(){
|
||
// this.$u.get(`/app/customerService/list?pageNum=1&pageSize=999`).then(res =>{
|
||
// if(res.code == 200){
|
||
// this.kefulist = res.rows
|
||
// }
|
||
// })
|
||
// },
|
||
// 点击头部滚动通知
|
||
btntopgg(){
|
||
this.$u.get(`/app/notice/${this.announcements.noticeId}`).then(resp =>{
|
||
if(resp.code == 200){
|
||
this.gonggaoxq = resp.data
|
||
this.gonggaoflag = true
|
||
}
|
||
})
|
||
},
|
||
// 点击公告我知道了
|
||
btnggtc(){
|
||
this.gonggaoflag = false
|
||
uni.setStorageSync('noticeId', this.announcements.noticeId)
|
||
},
|
||
// 获取最新公告
|
||
getgonggao(){
|
||
this.$u.get("/app/notice/new?noticeType=1").then(res =>{
|
||
if(res.code == 200){
|
||
this.announcements = res.data
|
||
this.$u.get(`/app/notice/${res.data.noticeId}`).then(resp =>{
|
||
if(resp.code == 200){
|
||
this.gonggaoxq = resp.data
|
||
if(resp.data.noticeId != uni.getStorageSync('noticeId')){
|
||
this.gonggaoflag = true
|
||
}
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
|
||
// 点击拨打平台客服电话
|
||
btnptkf(tel){
|
||
uni.makePhoneCall({
|
||
phoneNumber: tel,
|
||
success: function(res) {
|
||
console.log('拨打电话成功', res)
|
||
},
|
||
fail: function(err) {
|
||
console.error('拨打电话失败', err)
|
||
}
|
||
})
|
||
},
|
||
// 点击进行跳转页面
|
||
btntiao(num){
|
||
if(num == 1){ //跳转到地图页
|
||
uni.switchTab({
|
||
url:'/pages/nearbystores/index'
|
||
})
|
||
}else if(num == 2){ //跳转到使用帮助页
|
||
uni.navigateTo({
|
||
url:'/page_user/bangzhu'
|
||
})
|
||
}else if(num == 3){ //跳转到车辆故障上报
|
||
uni.navigateTo({
|
||
url:'/page_user/guzhang/index'
|
||
})
|
||
}else{ //跳转到意见反馈页
|
||
uni.navigateTo({
|
||
url:'/page_user/yijian'
|
||
})
|
||
}
|
||
},
|
||
// 点击附近门店跳转到门店详情页
|
||
btnxq(){
|
||
uni.navigateTo({
|
||
url:'/page_fenbao/storedlist/index'
|
||
})
|
||
},
|
||
// 点击门店拨打电话
|
||
btntel() {
|
||
uni.makePhoneCall({
|
||
phoneNumber: '18888888888',
|
||
success: function(res) {
|
||
console.log('拨打电话成功', res)
|
||
},
|
||
fail: function(err) {
|
||
console.error('拨打电话失败', err)
|
||
}
|
||
})
|
||
},
|
||
// 点击跳转
|
||
btnpage(num){
|
||
if(num == 1){ //跳转到附近门店页面
|
||
uni.navigateTo({
|
||
url:'/page_fenbao/storedlist/fujinshop'
|
||
})
|
||
}else if(num == 2){ //跳转到我的订单页面
|
||
uni.navigateTo({
|
||
url:'/pages/myorder/index'
|
||
})
|
||
}else if(num == 3){ //跳转到租借车辆页面
|
||
uni.switchTab({
|
||
url:'/pages/myorder/returned/index'
|
||
})
|
||
}else{
|
||
uni.navigateTo({
|
||
url:'/page_fenbao/index'
|
||
})
|
||
}
|
||
},
|
||
// 点击跳转到地图页
|
||
btnzk(){
|
||
uni.switchTab({
|
||
url:'/pages/nearbystores/index'
|
||
})
|
||
},
|
||
// 获取自身位置
|
||
getMyLocation() {
|
||
uni.getLocation({
|
||
type: 'wgs84',
|
||
success: (res) => {
|
||
this.latitude = Number(res.latitude.toFixed(5)) - 0.005
|
||
this.longitude = Number(res.longitude.toFixed(5)) + 0.005
|
||
this.setMapScale()
|
||
},
|
||
fail: (err) => {
|
||
console.error('获取位置失败：', err)
|
||
}
|
||
})
|
||
},
|
||
// 回到地图中心点
|
||
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)
|
||
}
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
/deep/ wx-swiper{
|
||
height: 286rpx !important;
|
||
}
|
||
.gonggao{
|
||
width: 680rpx;
|
||
height: 60rpx;
|
||
position: fixed;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
z-index: 99;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 10rpx;
|
||
background-color: rgba(0, 0, 0, 0.2);
|
||
margin: auto;
|
||
margin-top: 30rpx;
|
||
}
|
||
.container {
|
||
width: 560rpx;
|
||
height: 60rpx; /* 根据需要调整高度 */
|
||
display: flex;
|
||
align-items: center;
|
||
margin: auto;
|
||
overflow: hidden;
|
||
position: relative;
|
||
color: #fff;
|
||
box-sizing: border-box;
|
||
}
|
||
.scroll-text {
|
||
width: 100%;
|
||
overflow: hidden;
|
||
box-sizing: border-box;
|
||
display: inline-block;
|
||
white-space: nowrap;
|
||
animation: scroll 8s linear infinite;
|
||
}
|
||
.scroll-item {
|
||
display: inline-block;
|
||
padding: 0 10px;
|
||
font-size: 16px;
|
||
}
|
||
@keyframes scroll {
|
||
0% {
|
||
transform: translateX(100%);
|
||
}
|
||
100% {
|
||
transform: translateX(-100%);
|
||
}
|
||
}
|
||
.noticetc{
|
||
width: 680rpx;
|
||
height: 950rpx;
|
||
background-color: #fff;
|
||
border-radius: 20rpx;
|
||
padding: 0 20rpx;
|
||
box-sizing: border-box;
|
||
position: fixed;
|
||
top: 340rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
z-index: 10;
|
||
.btn{
|
||
width: 600rpx;
|
||
height: 100rpx;
|
||
line-height: 100rpx;
|
||
text-align: center;
|
||
border-radius: 50rpx;
|
||
background-color: #4297F3;
|
||
color: #fff;
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
margin: auto;
|
||
margin-top: 30rpx;
|
||
}
|
||
.name{
|
||
width: 100%;
|
||
text-align: center;
|
||
font-size: 36rpx;
|
||
font-weight: 600;
|
||
margin-top: 30rpx;
|
||
}
|
||
.biaoti{
|
||
font-size: 32rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
.cont{
|
||
width: 100%;
|
||
height: 620rpx;
|
||
overflow: scroll;
|
||
background-color: #ececec;
|
||
margin-top: 20rpx;
|
||
padding: 20rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
|
||
|
||
/deep/ .u-title{
|
||
padding-bottom: 12rpx !important;
|
||
}
|
||
@keyframes fadeIn {
|
||
from {
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
.kefutc{
|
||
animation: fadeIn 0.5s ease-in-out forwards;
|
||
position: fixed;
|
||
top: 660rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
z-index: 10;
|
||
.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;
|
||
margin-top: 20rpx;
|
||
.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;
|
||
}
|
||
}
|
||
.mask{
|
||
width: 100%;
|
||
height: 100vh;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
background-color: rgba(0,0,0,0.3);
|
||
z-index: 9;
|
||
}
|
||
.fujin{
|
||
margin-top: 28rpx;
|
||
padding: 0 26rpx;
|
||
box-sizing: border-box;
|
||
.list{
|
||
padding-bottom: 230rpx;
|
||
box-sizing: border-box;
|
||
.dibutishi{
|
||
width: 100%;
|
||
text-align: center;
|
||
margin-top: 24rpx;
|
||
color: #ccc;
|
||
image{
|
||
width: 480rpx;
|
||
height: 400rpx;
|
||
}
|
||
}
|
||
.list_item{
|
||
width: 670rpx;
|
||
height: 340rpx;
|
||
background: #FFFFFF;
|
||
box-shadow: 0rpx 2rpx 18rpx 0rpx rgba(0,0,0,0.1);
|
||
border-radius: 22rpx 22rpx 22rpx 22rpx;
|
||
padding: 24rpx;
|
||
box-sizing: border-box;
|
||
margin: auto;
|
||
margin-top: 24rpx;
|
||
.cheliang{
|
||
border-top: 1rpx solid #D8D8D8;
|
||
margin-top: 22rpx;
|
||
display: flex;
|
||
.quanxin:nth-child(1){
|
||
border-right: 1px solid #D8D8D8;
|
||
margin-right: 24rpx;
|
||
}
|
||
.quanxin{
|
||
display: flex;
|
||
width: 50%;
|
||
margin-top: 16rpx;
|
||
.qxrt{
|
||
.junjia{
|
||
font-size: 24rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
.name{
|
||
font-weight: 600;
|
||
font-size: 28rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
}
|
||
.qxlt{
|
||
margin-right: 24rpx;
|
||
image{
|
||
width: 100rpx;
|
||
height: 76rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.bot{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.rt{
|
||
display: flex;
|
||
align-items: center;
|
||
image{
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
margin-left: 16rpx;
|
||
}
|
||
.rizu{
|
||
.qizu{
|
||
font-size: 28rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
.price{
|
||
font-size: 24rpx;
|
||
color: #FF1C1C;
|
||
text{
|
||
font-size: 36rpx;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.lt{
|
||
.songqu{
|
||
margin-top: 12rpx;
|
||
max-width: 140rpx;
|
||
text-align: center;
|
||
font-size: 24rpx;
|
||
color: #4297F3;
|
||
height: 38rpx;
|
||
line-height: 38rpx;
|
||
background: #DCEDFF;
|
||
border-radius: 6rpx 6rpx 6rpx 6rpx;
|
||
}
|
||
.yytime{
|
||
font-size: 24rpx;
|
||
color: #3D3D3D;
|
||
margin-top: 8rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
text{
|
||
font-weight: 600;
|
||
margin-right: 4rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.dizhi{
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 24rpx;
|
||
color: #3D3D3D;
|
||
margin-top: 12rpx;
|
||
image{
|
||
width: 22rpx;
|
||
height: 22rpx;
|
||
margin-right: 4rpx;
|
||
}
|
||
}
|
||
.top{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.name{
|
||
font-weight: 600;
|
||
font-size: 36rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
image{
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.names{
|
||
width: 142rpx;
|
||
height: 52rpx;
|
||
background: #4297F3;
|
||
border-radius: 0 30rpx 0 30rpx;
|
||
font-weight: 600;
|
||
font-size: 26rpx;
|
||
color: #fff;
|
||
text-align: center;
|
||
line-height: 52rpx;
|
||
}
|
||
}
|
||
.guanggao{
|
||
width: 700rpx;
|
||
height: 286rpx;
|
||
margin: auto;
|
||
margin-top: 34rpx;
|
||
position: relative;
|
||
.kefu{
|
||
width: 108rpx;
|
||
height: 146rpx;
|
||
position: absolute;
|
||
bottom: -80rpx;
|
||
right: 10rpx;
|
||
}
|
||
/deep/ .u-swiper-image{
|
||
width: 700rpx !important;
|
||
height: 286rpx !important;
|
||
border-radius: 10rpx;
|
||
}
|
||
}
|
||
.kuaijie{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 0 26rpx;
|
||
box-sizing: border-box;
|
||
margin-top: 32rpx;
|
||
image{
|
||
width: 96rpx;
|
||
height: 118rpx;
|
||
}
|
||
}
|
||
.ditu{
|
||
width: 700rpx;
|
||
height: 512rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 20rpx;
|
||
overflow: hidden;
|
||
margin: auto;
|
||
margin-top: 22rpx;
|
||
position: relative;
|
||
.caozuo{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding-top: 38rpx;
|
||
padding-left: 40rpx;
|
||
padding-right: 40rpx;
|
||
box-sizing: border-box;
|
||
image{
|
||
width: 96rpx;
|
||
height: 40rpx;
|
||
}
|
||
}
|
||
.zk{
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
position: absolute;
|
||
right: 8rpx;
|
||
bottom: 112rpx;
|
||
}
|
||
map{
|
||
width: 700rpx;
|
||
height: 412rpx;
|
||
}
|
||
}
|
||
</style> |