尚无忧租车系统/租车软件/汽车租赁系统/租车小程序线上租车源码
在线租车小程序定制开发的基本功能是什么？
1.租车自驾作用:当用户必须租车自驾时，能通过一个微信小程序在线发布有关的租车自驾要求，系统将依据客户需求提供相关车子。
2.归类作用:车辆有着不同的品牌和型号规格。在线租车微信小程序为消费者提供很多的车仅供参考，并针对不同的品牌汽车进行筛选，便捷客户迅速过虑。
3.收藏功能:用户可根据在线租车微信小程序线上搜索附近的租火车票，并且在线下时迅速找寻有关的汽车租凭。
4.支付功能:用户可根据汽车租赁服务微信小程序线上支付有关的汽车租赁费用。一般来说，用户可根据支付宝钱包和微信零钱付款。
伴随着整个社会飞速发展，很多人都会选择以车辆作为主要代步工具，但有些人却富有容积比较有限且没有足够的水平汽车购买，我们怎样才能更好的达到每一个人旅游要求？在移动互联网时代，汽车租赁服务小程序的发展趋势使用户可在线租车并且通过手机小程序把它偿还到不同的地方，这既方便又便捷
主要功能：
不同车型在线选车
添加用车人信息
智能推荐附近门店租车
租车指导+实名认证
申请加盟入住
商家端车辆管理 订单详情
技术框架：thinkphp 前端uniapp
<template>
<view class="content">
<swiper :circular="circular" :autoplay="autoplay" :interval="interval" :duration="duration">
<swiper-item v-for="item,index in bannerList" :key="index">
<image :src="baseUrl+item" mode="aspectFill"></image>
</swiper-item>
</swiper>
<view class="center">
<view>
<view class="car" style="width: 25%" @click="changeCity">
<text>取车城市</text>
<view>
<text>{{city}}</text>
<image src="@/static/img/shangjiantou@2x.png" mode="" alt="alt"></image>
</view>
</view>
<view class="car1" style="width: 60%" @click="location">
<text>取车地点</text>
<view>
<text>{{address_info}}</text>
<!-- <image src="../../static/img/dingwei@2x.png" mode=""></image>-->
</view>
</view>
<view style="width: 15%" @click.stop="toShopList">
<view class="btn text-sm">门店</view>
</view>
</view>
<view style="border-bottom: 1rpx solid #E9E9E9" class="padding-bottom-xl">
<view class="flex flex-direction align-start" @click="startTimePopup=true" v-if="start_time.day">
<text class="text-sm text-gray">取车时间</text>
<text class="text-bold margin-top-sm">{{start_time.day + ' ' + start_time.time}}</text>
<!-- <text>{{start_time.week}}{{start_time.time}}</text>-->
</view>
<view class="flex flex-direction align-center text-gray">
<text class="text-sm" v-if="days">{{days}}天</text>
<text>———</text>
</view>
<view class="flex flex-direction align-end" @click="endTimePopup=true" v-if="start_time.day">
<text class="text-sm text-gray">还车时间</text>
<text class="text-bold margin-top-sm">{{end_time.day + ' ' + end_time.time}}</text>
<!-- <text>{{end_time.week}}{{end_time.time}}</text>-->
</view>
</view>
<view class="text-gray text-sm margin-left-lg flex align-center">
<text>只看</text>
<radio-group @change="changeRadio" style="display: flex;">
<label style="display: flex;align-items: center;vertical-align: middle;margin-left: 20rpx;">
<checkbox :checked="true" value="1" style="transform: scale(0.6)" /><text>门店自取</text>
</label>
<label style="display: flex;align-items: center;vertical-align: middle;margin-left: 20rpx;">
<checkbox value="2" style="transform: scale(0.6)" /><text>送车上门</text>
</label>
<label style="display: flex;align-items: center;vertical-align: middle;margin-left: 20rpx;">
<checkbox value="3" style="transform: scale(0.6)" /><text>免押金</text>
</label>
</radio-group>
</view>
<button @click="carList">立即租车</button>
<view class="info margin-top-sm text-sm margin-left-lg flex align-center">
<u-icon name="https://cdnjson.com/images/2023/10/18/675614a9f42b3feab4dc071fb5ab654.jpg" size="28"></u-icon>
<text class="info_text margin-left-xs" style="color: #84ccfc">微信支付分</text>
<text class="margin-left-xs margin-right-xs">|</text>
<text>650分以上有机会享受免押租车</text>
</view>
</view>
<view class="domain grid grid-count-two">
<view class="domain_left" @click="toShopList"></view>
<view class="domain_right">
<view class="domain_right_top" @click="toBz"></view>
<view class="domain_right_bottom" @click="toZhiNan"></view>
</view>
</view>
<view class="bottom">
<view>
<text></text>
<text>为您推荐</text>
</view>
<view @click="carList">
<text>查看更多</text>
<image src="../../static/img/fanhui2.png" mode=""></image>
</view>
<view class="car_">
<view class="car_sel flex" @click="shop(item)" v-for="item in carsList" :key="item.id">
<view class="car_sel_left">
<image :src="baseUrl+item.car_image" mode="aspectFill"></image>
</view>
<view class="car_sel_right flex flex-direction justify-center">
<view class="car_sel_right_item">{{item.car_name}}</view>
<view class="car_sel_right_item text-sm text-gray">{{item.car_label}}</view>
<view class="car_sel_right_item text-sm">
<text>日租：</text>
<text class="text-red">￥{{item.car_price}}</text>
</view>
</view>
</view>
</view>
</view>
<!-- 门店弹窗 -->
<view class="carShop" v-if="none">
<view v-if="car" @click="createOrder(car)">
<image :src="baseUrl+car.car_image" mode="aspectFill"></image>
<view>
<view>{{car.car_name}}</view>
<view class="flex align-center">
<text class="margin-right">{{car.car_label}}</text>
<image style="width: 38rpx;height: 38rpx;" src="../../static/img/3@2x.png" mode=""></image>
</view>
</view>
<image src="../../static/img/guanbi.png" mode="aspectFill" @click.stop="shopNone"></image>
<!-- <view class="flex-sub">
<image style="width: 38rpx;height: 38rpx;margin-left: auto" src="../../static/img/guanbi.png" mode="aspectFill" @click="shopNone"></image>
<image style="width: 38rpx;height: 38rpx;" src="../../static/img/3@2x.png" mode=""></image>
</view>-->
</view>
<scroll-view scroll-y="true" style="height: 683rpx;" @scrolltolower="scrolltolower">
<view class="shop" @click="toSubOrder(item)" v-for="item in carsShopList" :key="item.id">
<view>
<image :src="baseUrl+item.shop_logo" mode="aspectFit"></image>
<view>
<text>{{item.shop_name}}</text>
<text>{{item.all_address}}</text>
</view>
<text>{{(item.distance/1000).toFixed(2)}}km</text>
</view>
<view>
<view>
<block v-for="ser,index in item.service_list" :key="index">
<text class="ziqu" v-if="ser==1">门店自取</text>
</block>
<block v-for="ser,index in item.service_list" :key="index">
<text class="shangmen" v-if="ser==2">送车上门</text>
</block>
<block v-for="ser,index in item.service_list" :key="index">
<text class="mianyajin" v-if="ser==3">免押金</text>
</block>
</view>
<view>
<text>¥{{item.car_price}}</text>
<text>/天</text>
<image src="../../static/img/3@2x.png" mode=""></image>
</view>
</view>
</view>
</scroll-view>
</view>
<view class="yinying1" v-if="none" @click="shopNone"></view>
<!-- 时间选择 -->
<bz-date-picker disabledCurrentMinute v-model="startTimePopup" title="请选择取车时间" days="100" minuteStep="15" @confirm="confirmStartTime"></bz-date-picker>
<bz-date-picker disabledCurrentMinute v-model="endTimePopup" :default-time="default_time" title="请选择还车时间" days="100" minuteStep="15" @confirm="confirmEndTime"></bz-date-picker>
<!-- 占位 -->
<view style="height: 130rpx;"></view>
<!-- 自定义tabbar -->
<tabbar currentPage="index"></tabbar>
</view>
</template>
<script>
import bzDatePicker from '@/components/bz-date-picker/bz-date-picker.vue'
import tabbar from '@/components/tabbar/tabbar.vue'
export default {
components:{
bzDatePicker,
tabbar
},
data() {
return {
// 轮播图参数
circular: true, //是否循环
indicatorDots: true, //是否显示底部圆点
autoplay: true, //是否自动播放
interval: 3000, //自动切换时长间隔
duration: 800, //滑动动画时长
// 选择门店显示隐藏
none: false,
default_time:'', //还车选择器默认显示时间
startTimeStamp:'', //开始时间戳计算一共多少天
endTimeStamp:'', //结束时间戳
startTimePopup:false, //取车时间选择器
endTimePopup:false, //还车时间选择器
bannerList:[], //轮播图
start_time:{}, //开始时间
end_time:{}, //结束时间
days:'', //天数
baseUrl:this.$api.baseUrl,
page:1, //推荐列表分页
limit:10, //推荐列表每页多少条
isnext:true, //是否有下一页
carsList:[], //推荐车辆列表数据
service:'1', //门店服务
carsShopList:[], //车辆门店列表
car:'', //车辆信息
car_id:'',// 点击的车辆id
brand_id:'', //点击的车辆品牌
model_id:'', //点击的车型id
carsShopPage:1,
carsShopLimit:10,
iscarsShopNext:true,
city:'', //城市
address_info:'', //具体位置
}
},
onLoad() {
//首页上方数据
this.getIndexUp()
},
onShow() {
this.page=1
this.isnext=true
this.carsList=[]
if(getApp().globalData.activeCity){
this.city=getApp().globalData.activeCity
this.address_info=getApp().globalData.activeSite
//获取车辆列表
this.getCarsList()
}else{
//获取地理位置
this.getUserLocation()
}
},
onReachBottom() {
if(this.isnext){
this.isnext=false
this.page++
this.getCarsList()
}
},
methods: {
//首页上方数据
getIndexUp(){
this.$api.reqIndexUp().then(res=>{
if(res.code==1){
this.bannerList=res.data.banner_list
this.start_time=res.data.start_time
this.startTimeStamp=(res.data.start_time.start_stamp)*1000
this.endTimeStamp=(res.data.end_time.end_stamp)*1000
this.end_time=res.data.end_time
this.days=res.data.days
uni.setStorageSync('startTimeStamp',this.startTimeStamp)
uni.setStorageSync('endTimeStamp',this.endTimeStamp)
}else{
uni.$showMsg(res.msg)
}
})
},
//推荐车辆列表
getCarsList(){
let data={
city:this.city,
page:this.page,
limit:this.limit
}
this.$api.reqHotList(data).then(res=>{
if(res.code==1){
if(res.data.length==this.limit){
this.isnext=true
}
this.carsList=[...this.carsList,...res.data]
}else{
uni.$showMsg(res.msg)
}
})
},
// 查看授权以及申请授权获取地理位置
getUserLocation() {
uni.getSetting({
success: (res) => {
if (!res.authSetting['scope.userLocation']) {
uni.authorize({
scope: 'scope.userLocation',
success: (res) => { //1.1 允许授权
this.geo();
},
fail:()=> { //1.2 拒绝授权
uni.showModal({
title:'提示',
content:'小程序需要获取您的定位为您提供服务',
success:(res)=>{
if(res.confirm){
uni.openSetting({
success: (res) => {
}
})
}else{
uni.$showMsg('您拒绝了定位授权')
}
}
})
}
})
} else {
this.geo();
}
}
})
},
// 获取位置信息
geo() {
var QQMapWX = require('@/common/qqmap/qqmap-wx-jssdk.min.js');
this.qqmapsdk = new QQMapWX({
key: '5VXBZ-JIWLQ-XEL5E-43THB-TZWD3-Y2FJ7' //自己的key秘钥 http://lbs.qq.com/console/mykey.html 在这个网址申请
});
uni.getLocation({
type: 'gcj02',
success: (res) => {
var latitude=res.latitude
var longitude=res.longitude
this.qqmapsdk.reverseGeocoder({
location: {
latitude: latitude,
longitude: longitude
},
get_poi:1,
poi_options: 'policy=2;radius=500;page_size=20;page_index=1',
success: (res,data) => {
let {city,district}=res.result.address_component
let title=res.result.pois[0].title
getApp().globalData.latitude=res.result.pois[0].location.lat
getApp().globalData.longitude=res.result.pois[0].location.lng
getApp().globalData.activeCity=city
getApp().globalData.activeSite=district+title
this.city=city
this.address_info=district+title
//推荐车辆列表
this.getCarsList()
},
fail: (res) => {
console.log(res);
},
complete: (res) => {
}
});
},
fail: (err) => {
console.log(err);
}
})
},
// 跳转位置页面
location() {
uni.navigateTo({
url: './city'
})
},
// 车辆列表
carList() {
if(this.days==0){
return uni.$showMsg('请选择还车时间')
}
let params={
city:this.city,
service:this.service
}
uni.navigateTo({
url: './carList?params='+JSON.stringify(params)
})
},
//选择门店自取和送车上门
changeRadio(e){
this.service=e.detail.value
},
// 选择城市
changeCity() {
uni.navigateTo({
url: './city'
})
},
// 门店弹窗显示隐藏
shop (item) {
this.car=item
this.car_id=item.car_id
this.brand_id=item.brand_id
this.model_id=item.model_id
this.carsShopPage=1
this.iscarsShopNext=true
this.carsShopList=[]
this.getShopList()
this.none = true
},
createOrder(item){
//判断用户是否登录
const token=uni.getStorageSync('token')
if(!token){
return uni.navigateTo({
url:'/pages/login/login'
})
}
//关闭弹出层
this.none = false
console.log('item',item)
//去往提交订单
let data={
merchant_car_id:item.id,
merchant_id: item.merchant_id,
start_time:uni.getStorageSync('startTimeStamp')/1000,
end_time:uni.getStorageSync('endTimeStamp')/1000
}
uni.navigateTo({
url: '/pages/shop/shopOrder?params='+JSON.stringify(data)
})
},
//获取门店列表
getShopList(id){
let data={
car_id:this.car_id,
latitude:getApp().globalData.latitude,
longitude:getApp().globalData.longitude,
page:this.carsShopPage,
limit:this.carsShopLimit,
brand_id:this.brand_id,
model_id:this.model_id,
city:this.city
}
this.$api.reqShopList(data).then(res=>{
if(res.code==1){
if(res.data.shop_list.length==this.carsShopLimit){
this.iscarsShopNext=true
}
this.carsShopList=[...this.carsShopList,...res.data.shop_list]
}else{
uni.$showMsg(res.msg)
}
})
},
//确定取车时间
confirmStartTime(e){
let date= new Date(e.replace(/\-/g, '/'))
let month=(date.getMonth()+1)<10?'0'+(date.getMonth()+1):(date.getMonth()+1)
let day=date.getDate()<10?'0'+date.getDate():date.getDate()
let weekday=date.getDay()
let week=this.getWeek(weekday)
let hour=date.getHours()<10?'0'+date.getHours():date.getHours()
let minute=date.getMinutes()<10?'0'+date.getMinutes():date.getMinutes()
//取车时间戳
this.startTimeStamp=date.getTime()
uni.setStorageSync('startTimeStamp',this.startTimeStamp)
uni.setStorageSync('endTimeStamp',this.startTimeStamp+172800000)
// 改变页面取车时间
this.start_time.day=`${month}月${day}日`
this.start_time.time=`${hour}:${minute}`
this.start_time.week=week
//还车时间默认推迟2天
let endDate=new Date(date.getTime()+172800000)
let end_year=endDate.getFullYear()
let end_month=(endDate.getMonth()+1)<10?'0'+(endDate.getMonth()+1):(endDate.getMonth()+1)
let end_day=endDate.getDate()<10?'0'+endDate.getDate():endDate.getDate()
let end_weekday=endDate.getDay()
let end_week=this.getWeek(end_weekday)
let end_hour=endDate.getHours()<10?'0'+endDate.getHours():endDate.getHours()
let end_minute=endDate.getMinutes()<10?'0'+endDate.getMinutes():endDate.getMinutes()
// 改变页面还车时间
this.end_time.day=`${end_month}月${end_day}日`
this.end_time.time=`${end_hour}:${end_minute}`
this.end_time.week=end_week
this.default_time=`${end_year}-${end_month}-${end_day} ${end_hour}:${end_minute}`
this.days=2
},
//确定还车时间
confirmEndTime(e){
let date= new Date(e.replace(/\-/g, '/'))
let month=(date.getMonth()+1)<10?'0'+(date.getMonth()+1):(date.getMonth()+1)
let day=date.getDate()<10?'0'+date.getDate():date.getDate()
let weekday=date.getDay()
let week=this.getWeek(weekday)
let hour=date.getHours()<10?'0'+date.getHours():date.getHours()
let minute=date.getMinutes()<10?'0'+date.getMinutes():date.getMinutes()
//计算一共多少天
let endTimeStamp= new Date(e.replace(/\-/g, '/')).getTime()
let timeDifference=endTimeStamp-this.startTimeStamp
if(timeDifference<=0){ //还车时间小于取车时间
// this.end_time.day=this.start_time.day
// this.end_time.time=this.start_time.time
// this.end_time.week=this.start_time.week
// this.days=0
// this.endTimeStamp=this.startTimeStamp
// uni.setStorageSync('endTimeStamp',endTimeStamp)
return uni.$showMsg('还车时间不能小于取车时间')
}else{
// 改变页面取车时间
this.end_time.day=`${month}月${day}日`
this.end_time.time=`${hour}:${minute}`
this.end_time.week=week
this.endTimeStamp=endTimeStamp
uni.setStorageSync('endTimeStamp',endTimeStamp)
let days=Math.ceil(timeDifference/(1000*3600*24))
this.days=days
}
},
//scrollview滚动到底事件
scrolltolower(){
if(this.iscarsShopNext){
this.iscarsShopNext=false
this.carsShopPage++
this.getShopList()
}
},
shopNone() {
this.none = false
},
// 门店详情
toSubOrder(item) {
//判断用户是否登录
const token=uni.getStorageSync('token')
if(!token){
return uni.navigateTo({
url:'/pages/login/login'
})
}
//关闭弹出层
this.none = false
//去往提交订单
let data={
merchant_car_id:item.merchant_car_id,
merchant_id:item.id,
start_time:uni.getStorageSync('startTimeStamp')/1000,
end_time:uni.getStorageSync('endTimeStamp')/1000
}
uni.navigateTo({
url: '/pages/shop/shopOrder?params='+JSON.stringify(data)
})
},
//获取星期几
getWeek(num){
let week=null
switch (num) {
case 0:
week = "周日";
break;
case 1:
week = "周一";
break;
case 2:
week = "周二"
break;
case 3:
week = "周三"
break;
case 4:
week = "周四"
break;
case 5:
week = "周五"
break;
case 6:
week = "周六"
break;
default:
break;
};
return week;
},
//分享给朋友
onShareAppMessage(){
return {}
},
//分享到朋友圈
onShareTimeline(){
return {}
},
//跳转门店列表
toShopList(){
uni.switchTab({
url: '/pages/shop/shop'
})
},
//指南
toZhiNan(){
uni.navigateTo({
url: '/pages/index/zhinan'
})
},
//保障
toBz(){
uni.navigateTo({
url: '/pages/index/bz'
})
},
}
}
</script>
<style>
swiper-item>image {
width: 100%;
height: 300rpx;
}
page{
min-height: 100%;
height: auto;
background-color: rgb(247, 247, 247);
}
.content {
min-height: 100%;
height: auto;
padding-bottom: 50rpx;
}
.center {
width: 92%;
padding-bottom: 20rpx;
background-color: white;
margin: 0 auto;
position: relative;
top: -60rpx;
border-radius: 20rpx;
box-shadow: 0px 6rpx 10rpx rgba(0, 0, 0, 0.1), 0px -15rpx 20rpx rgba(255,255,255,0.8);
}
.center>view:nth-child(1) {
width: 90%;
margin: 0 auto;
padding-top: 30rpx;
display: flex;
border-bottom: 1rpx solid #E9E9E9;
padding-bottom: 40rpx;
}
.center>view:nth-child(2) {
width: 92%;
height: 130rpx;
margin: 30rpx auto;
display: flex;
align-items: center;
justify-content: space-around;
}
.center>view:nth-child(2)>view:nth-child(1)>text:nth-child(1),
.center>view:nth-child(2)>view:nth-child(3)>text:nth-child(1) {
//font-size: 28rpx;
//font-family: PingFang SC;
//font-weight: 500;
//color: #101010;
}
.center>view:nth-child(2)>view:nth-child(1)>text:nth-child(2),
.center>view:nth-child(2)>view:nth-child(3)>text:nth-child(2) {
//font-size: 34rpx;
//font-family: PingFang SC;
//font-weight: bold;
//color: #101010;
}
.center>view:nth-child(2)>view:nth-child(2)>text:nth-child(1),
.center>view:nth-child(2)>view:nth-child(2)>text:nth-child(2) {
//font-size: 26rpx;
//font-family: PingFang SC;
//font-weight: 500;
//color: #13628C;
}
.car>text {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #BFBFBF;
}
.center .btn {
padding: 10rpx 0;
background-color: #13628c;
border-radius: 30rpx;
color: white;
display: grid;
place-items: center;
}
.car>view {
margin-top: 20rpx;
}
.car>view>image {
display: inline-block;
width: 18rpx;
height: 14rpx;
margin-top: -24rpx;
margin-left: 10rpx;
vertical-align: middle;
}
.car>view>text {
max-width: 120rpx;
font-size: 30rpx;
font-family: PingFang SC;
font-weight: 500;
color: #101010;
display: inline-block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.car1{
//margin-left: 50rpx;
}
.car1>text {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #BFBFBF;
}
.car1>view {
display: flex;
align-items: center;
margin-top: 20rpx;
}
.car1>view>image {
flex-shrink: 0;
display: inline-block;
width: 20rpx;
height: 24rpx;
margin-left: 10rpx;
}
.car1>view>text {
width: 420rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex-shrink: 0;
font-size: 30rpx;
font-family: PingFang SC;
font-weight: 500;
color: #101010;
}
button {
width: 90%;
background-color: #13628C;
color: white;
font-size: 30rpx;
border-radius: 50rpx;
margin-top: 20rpx;
}
.center>view:nth-child(4) {
display: flex;
align-items: center;
margin-top: 30rpx;
}
.center>view:nth-child(4)>text {
margin-left: 50rpx;
}
.center>view:nth-child(4)>text,
.center>view:nth-child(4)>label>text {
font-size: 26rpx;
font-family: PingFang SC;
font-weight: 500;
color: #989898;
}
.center>view:nth-child(4)>label {
margin-left: 40rpx;
}
.bottom>view:nth-child(1) {
display: flex;
}
.bottom>view:nth-child(1)>text:nth-child(1) {
display: inline-block;
width: 10rpx;
height: 40rpx;
border-radius: 50rpx;
background-color: #13628C;
margin-left: 30rpx;
}
.bottom>view:nth-child(1)>text:nth-child(2) {
font-size: 32rpx;
font-family: PingFang SC;
font-weight: bold;
color: #13628C;
margin-left: 20rpx;
}
.bottom>view:nth-child(2) {
display: flex;
align-items: center;
margin-top: 20rpx;
height: 50rpx;
line-height: 50rpx;
border-radius: 30rpx;
padding-left: 20rpx;
border: 3rpx solid #D5D5D5;
float: right;
margin-top: -46rpx;
margin-right: 30rpx;
}
.bottom>view:nth-child(2)>text:nth-child(1) {
font-size: 28rpx;
color: #989898;
}
.bottom>view:nth-child(2)>image:nth-child(2) {
display: block;
width: 8rpx;
height: 15rpx;
margin: 0 10rpx;
}
.car_ {
width: 100%;
margin: 0 auto;
padding: 20rpx;
//display: flex;
//flex-wrap: wrap;
}
.car_sel {
width: 100%;
//margin-left: 20rpx;
background-color: white;
border-radius: 20rpx;
}
.car_sel .car_sel_right .car_sel_right_item{
padding: 10rpx;
}
.car_sel image {
width: 400rpx;
height: 200rpx;
border-radius: 20rpx;
margin: 10rpx;
}
.car_sel>text:nth-child(2) {
text-overflow: -o-ellipsis-lastline;
overflow: hidden; //溢出内容隐藏
text-overflow: ellipsis; //文本溢出部分用省略号表示
display: -webkit-box; //特别显示模式
-webkit-line-clamp: 2; //行数
line-clamp: 2;
-webkit-box-orient: vertical; //盒子中内容竖直排列
font-size: 32rpx;
font-family: PingFang SC;
font-weight: 500;
color: #101010;
margin-top: 20rpx;
margin-left: 20rpx;
}
.car_sel>text:nth-child(3) {
font-size: 28rpx;
color: #989898;
margin-top: 20rpx;
margin-left: 20rpx;
}
.car_sel>view:nth-child(4) {
margin-top: 30rpx;
margin-bottom: 20rpx;
}
.car_sel>view:nth-child(4)>text:nth-child(1) {
width: 52rpx;
height: 23rpx;
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #101010;
margin-left: 20rpx;
}
.car_sel>view:nth-child(4)>text:nth-child(2) {
width: 67rpx;
height: 25rpx;
font-size: 32rpx;
font-family: DIN;
font-weight: 500;
color: #F87A1F;
}
.carShop {
width: 100%;
height: 900rpx;
background-color: white;
border-radius: 20rpx 20rpx 0 0;
position: fixed;
bottom: 0rpx;
z-index: 9999;
}
.carShop>view:nth-child(1) {
display: flex;
/* justify-content: space-between; */
width: 92%;
margin: auto;
margin-top: 30rpx;
border-bottom: 1rpx solid #E9E9E9;
padding-bottom: 30rpx;
}
.carShop>view:nth-child(1)>view{
margin-left: 20rpx;
display: flex;
flex-direction: column;
justify-content: center;
}
.carShop>view:nth-child(1)>view:nth-child(2)>text:nth-child(1){
font-size: 30rpx;
color: #101010;
}
.carShop>view:nth-child(1)>view:nth-child(2)>text:nth-child(2){
font-size: 24rpx;
color: #989898;
}
.carShop>view:nth-child(1)>image:nth-child(1) {
width: 200rpx;
height: 110rpx;
}
.carShop>view:nth-child(1)>image:nth-child(3) {
margin-left: auto;
width: 38rpx;
height: 38rpx;
}
.shop {
position: relative;
width: 92%;
margin: auto;
margin-top: 30rpx;
border-bottom: 1rpx solid #E9E9E9;
padding-bottom: 30rpx;
}
.shop>view:nth-child(1) {
display: flex;
}
.shop>view:nth-child(1)>image {
flex-shrink: 0;
width: 108rpx;
height: 108rpx;
border-radius: 6rpx;
}
.shop>view:nth-child(1)>view:nth-child(2) {
margin-left: 20rpx;
}
.shop>view:nth-child(1)>view:nth-child(2)>text:nth-child(1) {
display: block;
font-size: 30rpx;
font-family: PingFang SC;
font-weight: bold;
color: #101010;
margin-top: 6rpx;
}
.shop>view:nth-child(1)>view:nth-child(2)>text:nth-child(2) {
display: block;
font-size: 26rpx;
font-family: PingFang SC;
font-weight: 500;
color: #797876;
margin-top: 20rpx;
}
.shop>view:nth-child(1)>text:nth-child(3) {
position: absolute;
top: 6rpx;
right: 6rpx;
font-size: 26rpx;
font-family: PingFang SC;
font-weight: 500;
color: #797876;
}
.shop>view:nth-child(2) {
display: flex;
justify-content: space-between;
margin-top: 20rpx;
}
/* .shop>view:nth-child(2)>view:nth-child(1)>text:nth-child(1),
.shop>view:nth-child(2)>view:nth-child(1)>text:nth-child(2) {
width: 106rpx;
height: 30rpx;
line-height: 30rpx;
padding-left: 6rpx;
padding-right: 6rpx;
background: #E7F7FF;
border: 1rpx solid #13628C;
border-radius: 4rpx;
font-size: 22rpx;
font-family: PingFang SC;
font-weight: 500;
color: #13628C;
} */
.shangmen,
.ziqu{
width: 106rpx;
height: 30rpx;
line-height: 30rpx;
padding-left: 6rpx;
padding-right: 6rpx;
background: #E7F7FF;
border: 1rpx solid #13628C;
border-radius: 4rpx;
font-size: 22rpx;
font-family: PingFang SC;
font-weight: 500;
color: #13628C;
}
.shop>view:nth-child(2)>view:nth-child(1)>text:nth-child(2) {
margin-left: 20rpx;
}
/* .shop>view:nth-child(2)>view:nth-child(1)>text:nth-child(3) {
width: 86rpx;
height: 30rpx;
background: #FBEADA;
border-radius: 4rpx;
font-size: 22rpx;
font-family: PingFang SC;
font-weight: 500;
color: #6F4131;
margin-left: 20rpx;
} */
.mianyajin{
width: 86rpx;
height: 30rpx;
background: #FBEADA;
border-radius: 4rpx;
font-size: 22rpx;
font-family: PingFang SC;
font-weight: 500;
color: #6F4131;
margin-left: 10rpx;
}
.shop>view:nth-child(2)>view:nth-child(2) {
display: flex;
align-items: center;
}
.shop>view:nth-child(2)>view:nth-child(2)>text:nth-child(1) {
font-size: 32rpx;
font-family: PingFang SC;
font-weight: bold;
color: #F87A1F;
}
.shop>view:nth-child(2)>view:nth-child(2)>text:nth-child(2) {
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 500;
color: #797876;
margin-right: 20rpx;
}
.shop>view:nth-child(2)>view:nth-child(2)>image {
width: 40rpx;
height: 40rpx;
}
.yinying1 {
width: 100%;
height: 740rpx;
background-color: #101010;
opacity: 0.3;
position: fixed;
top: 0;
}
</style>
<style lang="less" scoped>
.domain {
position: relative;
top: -30rpx;
height: 260rpx;
margin: 0 25rpx;
column-gap: 15rpx;
.domain_left {
border-radius: 15rpx;
background: url("https://cdnjson.com/images/2023/10/18/659a04bc16c6cb6b3cc04bcd90feb49.jpg") no-repeat;
background-size: contain;
}
.domain_right {
display: grid;
grid-template-rows: repeat(2,1fr);
grid-gap: 15rpx; /* 设置行之间的间隔 */
.domain_right_top {
border-radius: 15rpx;
background: url("https://cdnjson.com/images/2023/10/18/10097c65e344c2506.jpg") no-repeat;
background-size: contain;
}
.domain_right_bottom {
border-radius: 15rpx;
background: url("https://cdnjson.com/images/2023/10/18/306f025bab2e90dbf.jpg") no-repeat;
background-size: contain;
}
}
}
</style>
