1067 lines
26 KiB
Vue
1067 lines
26 KiB
Vue
<template>
|
|
<view class="">
|
|
<u-navbar :title="' '" :safeAreaInsetTop="true" bgColor="rgba(0,0,0,0)">
|
|
<view slot="left">
|
|
<u-icon name="arrow-left" size="19" @click="navBackFn('back')"></u-icon>
|
|
<!-- <u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
|
|
<u-icon name="home" size="20" @click="navBackFn('tabbar')"></u-icon> -->
|
|
</view>
|
|
<view slot="right">
|
|
<view class="flex collect-share" style="margin-right: 0;">
|
|
<image v-if="!commodityDeta.userIsCollect" @click="getIntegralOrderProductFn"
|
|
src="@/static/images/app/serve/coupons_xingxing.png" mode=""></image>
|
|
<image v-else @click="getIntegralOrderProductFn"
|
|
src="@/static/images/app/serve/coupons_xingxing_end.png" alt=""></image>
|
|
<image @click="shareFn(commodityDeta)" src="@/static/images/app/serve/coupons_fenxiang.png" mode="">
|
|
</image>
|
|
</view>
|
|
</view>
|
|
</u-navbar>
|
|
<!-- 轮播图 -->
|
|
<u-swiper height="750rpx" :radius="0" keyName="image" @change="e => currentNum = e.current" :list="branner"
|
|
indicator :indicatorStyle="{bottom:'32rpx',right:'24rpx'}">
|
|
<view slot="indicator" class="indicator-num">
|
|
<text class="indicator-num__text">{{ currentNum + 1 }}/{{ branner.length }}</text>
|
|
</view>
|
|
</u-swiper>
|
|
<view class="info-introduce">
|
|
<view class="flex justify-between">
|
|
<view class="title-info">
|
|
<u--text :lines="2" bold size="18" :text="commodityDeta.title"></u--text>
|
|
</view>
|
|
<view class="btns-box flex align-center" @click="parameterShow = true">
|
|
参数
|
|
<u-icon name="arrow-right" size="10"></u-icon>
|
|
</view>
|
|
</view>
|
|
<view class="flex align-center shop-price">
|
|
{{commodityDeta.carDrive}} | {{commodityDeta.modelName}}
|
|
|{{commodityDeta.powerType==1?'油电':commodityDeta.powerType==2?'油':'纯电'}}
|
|
</view>
|
|
</view>
|
|
<view v-if=""></view>
|
|
<z-paging use-page-scroll ref="paging" v-model="carList" @query="queryList">
|
|
<view class="store-list" v-for="(item,index) in carList">
|
|
<view class="store-item">
|
|
<view class="store-title-box flex align-center justify-between">
|
|
<view class="store-title flex align-center">
|
|
{{item.carDealerName}}
|
|
<u-icon name="arrow-right" size="12"></u-icon>
|
|
</view>
|
|
<view class="flex align-center">
|
|
<text
|
|
class="star">{{item.countResponse.replyChance?item.countResponse.replyChance:5.0}}</text>
|
|
<text class="reply">{{item.countResponse.sumCount}}条评论</text>
|
|
</view>
|
|
</view>
|
|
<view class="store-tags">
|
|
<text>{{item.carAge}}年车龄</text>
|
|
<text v-for="tag in item.tags">{{tag.name}}</text>
|
|
</view>
|
|
<!-- <view class="store-info">
|
|
{{item.carDealerAddress}}
|
|
</view> -->
|
|
<view class="store-btns flex align-center justify-between">
|
|
<view class="store-btns-left">
|
|
<text class="price">{{item.rentalPrice}}</text>
|
|
<text>/月</text>
|
|
</view>
|
|
<view class="store-tags-right flex align-center">
|
|
<text>租期 {{item.monthRent}}个月</text>
|
|
<view class="btn-item">
|
|
<u-button @click="promptlyCarFn(item)"
|
|
:customStyle="{width: '152rpx', height: '60rpx', fontSize: '28rpx', padding: 0}"
|
|
color="#13AFA8" shape="circle">立即订车</u-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</z-paging>
|
|
<!-- 规格选择 -->
|
|
<u-popup :show="parameterShow" round="16" @close="parameterShow = false" closeable>
|
|
<view class="popup-box">
|
|
<view class="popup-title popup-tabs-box">
|
|
{{commodityDeta.title}}
|
|
</view>
|
|
<view class="popup-content">
|
|
<view class="popup-srcoll ">
|
|
<view class="popup-srcoll-title">
|
|
基本信息
|
|
</view>
|
|
<view class="flex justify-around">
|
|
<view class="popup-srcoll-cont">
|
|
<view class="popup-srcoll-list">
|
|
<text>车型：</text>
|
|
{{commodityDeta.modelName}}
|
|
</view>
|
|
<view class="popup-srcoll-list">
|
|
<text>挡位：</text>
|
|
{{commodityDeta.gearPosition=='voluntarily'?'自动挡':commodityDeta.gearPosition=='hand_movement'?'手动':'手自一体'}}
|
|
</view>
|
|
<view class="popup-srcoll-list">
|
|
<text>续航：</text>
|
|
{{commodityDeta.enduranceKilometer}}Km
|
|
</view>
|
|
</view>
|
|
<view class="popup-srcoll-cont">
|
|
<view class="popup-srcoll-list">
|
|
<text>车门：</text>
|
|
{{commodityDeta.carDoor}}㎡
|
|
</view>
|
|
<view class="popup-srcoll-list">
|
|
<text>动力：</text>
|
|
{{commodityDeta.powerType==1?'油电':commodityDeta.powerType==2?'油':'纯电'}}
|
|
</view>
|
|
<view class="popup-srcoll-list">
|
|
<text>驱动：</text>
|
|
{{commodityDeta.carDrive}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view style="height: 68rpx;" />
|
|
</view>
|
|
</u-popup>
|
|
<!-- 车商详情 :round="!scrollState && 16" -->
|
|
<u-popup :show="storeShow" :round="16" @close="storeShow = false">
|
|
<view class="popup-box">
|
|
<!-- class:scrollState && 'popup-title-active' -->
|
|
<view :class="['popup-title', 'rel']">
|
|
{{carDealerData.title}}
|
|
<!-- v-if="scrollState" -->
|
|
<image @click="closeStorePopup" class="abs" src="@/static/images/icon/x_3.png" mode=""></image>
|
|
</view>
|
|
<view class="popup-tabs-box">
|
|
<u-tabs lineColor="#555" lineHeight="4rpx" lineWidth="58rpx" :scrollable="false"
|
|
:activeStyle="{color: '#000'}" :itemStyle="{height: '60rpx'}" :list="storeInfoTabs"
|
|
@click="tabChange"></u-tabs>
|
|
</view>
|
|
<scroll-view scroll-y scroll-with-animation class="scroll-view" :style="`height: calc(${scrollHeight})`"
|
|
upper-threshold="0" @scroll="scrollView" @scrolltoupper="scrolltoupper" :scroll-into-view="viewId">
|
|
<view class="comment-scroll-box">
|
|
<view class="popup-car-list" id="detail">
|
|
<view class="popup-car-title">
|
|
{{carDealerData.title}}
|
|
</view>
|
|
<view class="popup-tags-list">
|
|
<text>{{carDealerData.carAge}}年车龄</text>
|
|
</view>
|
|
<view class="store-info line-five">
|
|
{{carDealerData.event}}
|
|
</view>
|
|
<view class="popup-car-box" v-if="brannerTwo.length">
|
|
<view class="car-list">
|
|
<view class="car-item" v-for="(item, index) in brannerTwo" :key="index">
|
|
<image :src="item" mode="" @click="examineFn(brannerTwo,index)"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="comment-box" id="comment">
|
|
<view class="comment-title flex align-center justify-between">
|
|
<view class="">
|
|
<text class="">用户评价</text>
|
|
<text
|
|
class="num">{{carDealerData.countResponse.replyChance?carDealerData.countResponse.replyChance:5}}分</text>
|
|
</view>
|
|
<view class="comrel flex align-center" @click="navEvaluateFn(carDealerData)">
|
|
评价({{carDealerData.countResponse.sumCount}})
|
|
<u-icon name="arrow-right" size="12" color="#999999"></u-icon>
|
|
</view>
|
|
</view>
|
|
<view class="comment-content-item" v-if="carDealerData.countResponse.sumCount">
|
|
<view class="user-info flex align-center justify-between">
|
|
<view class="right flex align-center">
|
|
<image :src="carDealerData.replyResponse.avatar" mode=""></image>
|
|
<view class="user-detail flex-column justify-between">
|
|
<view class="name">
|
|
{{carDealerData.replyResponse.nickname}}
|
|
</view>
|
|
<view class="flex align-center">
|
|
<view class="flex align-center">
|
|
<u-icon v-for="(item, index) in carDealerData.replyResponse.star"
|
|
name="star-fill"
|
|
:color="carDealerData.replyResponse.star>index ? '#F68D1F' : '#D9D9D9'"></u-icon>
|
|
</view>
|
|
<!-- <u-rate disabled activeColor="#F68D1F" inactiveColor="#D9D9D9" :count="count" v-model="value"></u-rate> -->
|
|
<text class="fen">{{carDealerData.replyResponse.star}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="">
|
|
{{carDealerData.replyResponse.createTime}}
|
|
</view>
|
|
</view>
|
|
<view class="comment-text">
|
|
{{carDealerData.replyResponse.comment}}
|
|
</view>
|
|
<view class="comment-image flex-wrap align-center">
|
|
<image :style="index%3==2&&'marginRight: 0'"
|
|
v-for="(item, index) in carDealerData.replyResponse.pics" :key="index"
|
|
:src="item" mode="" @click="examineFn(carDealerData.replyResponse.pics,index)">
|
|
</image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="must-read" id="read">
|
|
<view class="popup-read-title">
|
|
订前必读
|
|
</view>
|
|
<view class="popup-read-content">
|
|
<!-- <view class="read-new-title">
|
|
订车规则
|
|
</view> -->
|
|
<view class="">
|
|
<image v-for="(rules,index) in carDealerData.rulesImage" class="guize" :src="rules"
|
|
:key="index" mode="widthFix">
|
|
</image>
|
|
<!-- <image class="guize" src="@/static/images/app/welfare/invite_btn.png" mode="">
|
|
</image> -->
|
|
</view>
|
|
</view>
|
|
<!-- <view class="popup-read-content">
|
|
<view class="read-new-title">
|
|
订车流程
|
|
</view>
|
|
<view class="read-images flex align-center justify-between">
|
|
<image v-for="(process, index) in carDealerData.processImage" :key="index"
|
|
class="liucheng" :src="process" mode="widthFix"
|
|
></image>
|
|
</view>
|
|
</view> -->
|
|
</view>
|
|
<view class="must-read" id="problem">
|
|
<view class="popup-read-title">
|
|
常见问题
|
|
</view>
|
|
<view class="popup-read-content">
|
|
<view class="problem-tabs">
|
|
<view class="problem-tabs-box flex align-center">
|
|
<text
|
|
:class="['problem-tabs-item', categoryId == index && 'problem-active-item']"
|
|
@click="actcategoryFn(index)" v-for="(item,index) in problemType"
|
|
:key="index">
|
|
{{item.title}}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
<view class="problem-image">
|
|
<rich-text :nodes="problemTypeContent" :tagStyle="parseStyle" :preview="false" :image-menu-prevent="false"></rich-text>
|
|
<!-- <u-parse :showImgMenu="false" :content="problemTypeContent" :tagStyle="parseStyle" :previewImg="false"></u-parse> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- <view style="height: 140rpx;"></view> -->
|
|
</scroll-view>
|
|
<view class="comment-btns fixed-bottom">
|
|
<view class="comment-btn flex align-center justify-between">
|
|
<view class="contact-icon flex align-center">
|
|
<view class="contact-icon-view flex flex-column align-center justify-between">
|
|
<image @click="callPhone(carDealerData.carDealerPhone)"
|
|
src="@/static/images/app/icon/phone.png" mode="heightFix">
|
|
</image>
|
|
<view class=" c222">电话</view>
|
|
</view>
|
|
<view class="contact-icon-view flex flex-column align-center justify-between">
|
|
<image @click="Navto('/pages/driver/message/message_Chat/message_Chat',)"
|
|
src="@/static/images/app/icon/message.png" mode="heightFix"></image>
|
|
<view class="c222">咨询</view>
|
|
</view>
|
|
</view>
|
|
<view class="right-btn flex align-center">
|
|
<view class="right-price flex-column align-end justify-between">
|
|
<view class="">
|
|
￥{{carDealerData.rentalPrice}} <text class="yue">/月</text>
|
|
</view>
|
|
<view class="right-mouth">
|
|
可租{{carDealerData.monthRent}}个月
|
|
</view>
|
|
</view>
|
|
<view class="right-btn-box">
|
|
<u-button @click="navEndOrderFn"
|
|
:customStyle="{width: '232rpx', height: '96rpx', fontSize: '34rpx',marign:0}"
|
|
color="#13AFA8" shape="circle">立即订车</u-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view style="height: 24rpx;" />
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
shareApi
|
|
} from "@/utils/index.js"
|
|
import {
|
|
getNoteShare
|
|
} from "@/api/discover/discover.js"
|
|
import {
|
|
SendMmsg
|
|
} from '@/api/message/index.js';
|
|
import {
|
|
configGetuniq
|
|
} from "@/api/system/config.js"
|
|
import {
|
|
storeInfoTabs
|
|
} from '@/data/tabsData'
|
|
import {
|
|
getProductInfoDealer,
|
|
informationDealerList,
|
|
getInformationInfo,
|
|
getProductInfoCollectAdd,
|
|
getProductInfoCollectCancel,
|
|
getproblemList
|
|
} from "@/api/showroom/showroom.js"
|
|
export default {
|
|
data() {
|
|
return {
|
|
carList: [],
|
|
//规格弹出
|
|
parameterShow: false,
|
|
storeShow: false,
|
|
scrollState: false,
|
|
count: 5,
|
|
value: 3,
|
|
scrollTop: 0,
|
|
categoryId: 0,
|
|
viewId: 'detail',
|
|
scrollHeight: '1252rpx',
|
|
storeInfoTabs, // 弹窗tab栏
|
|
problemType: [],
|
|
config: getApp().globalData.config,
|
|
//商品详情
|
|
commodityDeta: {},
|
|
details: '<h1>商品详情</h1>',
|
|
commodityNum: 1,
|
|
branner: [], // 轮播图列表
|
|
brannerTwo:[],
|
|
currentNum: 0,
|
|
actArr: [],
|
|
specTabArr: [],
|
|
//车商商品信息
|
|
carDealerData: {
|
|
countResponse: {},
|
|
replyResponse: {}
|
|
},
|
|
//订单id
|
|
orderId: '',
|
|
//常见问题详情
|
|
problemTypeContent: '',
|
|
parseStyle: {
|
|
img: 'width:654rpx;',
|
|
image:'width:654rpx;'
|
|
},
|
|
};
|
|
},
|
|
methods: {
|
|
//点击常见列表
|
|
actcategoryFn(index) {
|
|
this.categoryId = index
|
|
this.problemTypeContent = this.problemType[index].content
|
|
},
|
|
//分享
|
|
shareFn(item) {
|
|
let shareData = {
|
|
imageUrl: item.image ,
|
|
content: item.title
|
|
}
|
|
shareApi('WXSceneSession', shareData,`pages/showroom/carRental/index?id=${item.id}`).then(res => {
|
|
getNoteShare(item.id).then(res => {
|
|
console.log(res, '分享成功');
|
|
})
|
|
})
|
|
},
|
|
//跳转消息
|
|
Navto(url, item, i) {
|
|
console.log('消息',this.carDealerData);
|
|
let charSn = this.carDealerData.charSn ? JSON.stringify(encodeURIComponent(this.carDealerData.charSn)) : ''
|
|
this.$u.route(url, {
|
|
charSn: charSn,
|
|
toUidNickname: this.carDealerData.carDealerName,
|
|
toUid: this.carDealerData.carDealerUid,
|
|
index: null
|
|
});
|
|
},
|
|
//查看
|
|
examineFn(arr, index) {
|
|
uni.previewImage({
|
|
current: index,
|
|
urls: arr
|
|
})
|
|
},
|
|
//车商发布列表
|
|
//请求列表
|
|
queryList(page, limit) {
|
|
informationDealerList({
|
|
page: page,
|
|
limit: limit,
|
|
id: this.orderId
|
|
}).then(res => {
|
|
console.log('列表', res.data);
|
|
this.$refs.paging.complete(res.data.carRentalProduct);
|
|
this.commodityDeta = res.data
|
|
if(res.data.sliderImage){
|
|
this.branner = res.data.sliderImage.split(',')
|
|
}
|
|
|
|
})
|
|
},
|
|
//确认订单 pages/driver/showroom/confirmOrder/confirmOrder
|
|
navEndOrderFn() {
|
|
this.$store.dispatch('Cardmoney', null)
|
|
uni.navigateTo({
|
|
url: `/pages/driver/showroom/confirmOrder/confirmOrder?type=2`,
|
|
success: res => {
|
|
console.log(this.carDealerData);
|
|
// 通过eventChannel向被打开页面传送数据
|
|
res.eventChannel.emit('form', {
|
|
...this.carDealerData
|
|
})
|
|
}
|
|
})
|
|
},
|
|
//立即订车 获取详情
|
|
promptlyCarFn(item) {
|
|
this.storeShow = true;
|
|
getInformationInfo(item.id).then(res => {
|
|
console.log(res.data);
|
|
this.carDealerData = res.data
|
|
//订车规则
|
|
this.carDealerData.rulesImage = res.data.rulesImage.split(',')
|
|
//订车流程
|
|
this.carDealerData.processImage = res.data.processImage.split(',')
|
|
if (res.data.replyResponse.pics) {
|
|
this.carDealerData.replyResponse.pics = this.carDealerData.replyResponse.pics.split(',')
|
|
}
|
|
//弹出层轮播图
|
|
if(res.data.productImage){
|
|
this.brannerTwo=res.data.productImage.split(',')
|
|
}
|
|
})
|
|
},
|
|
//拨打电话
|
|
callPhone(phone) {
|
|
uni.makePhoneCall({
|
|
phoneNumber: phone //仅为示例
|
|
})
|
|
},
|
|
closeStorePopup() {
|
|
this.storeShow = false
|
|
this.scrollState = false
|
|
this.scrollHeight = '1252rpx'
|
|
},
|
|
// 弹窗tab栏点击
|
|
tabChange(e) {
|
|
// console.log(e);
|
|
this.viewId = e.value
|
|
},
|
|
// 触顶
|
|
scrolltoupper() {
|
|
// console.log('触发');
|
|
this.scrollHeight = '1252rpx'
|
|
this.scrollState = false
|
|
},
|
|
scrollView(e) {
|
|
// console.log(this.scrollTop<e.detail.scrollTop);
|
|
if (this.scrollTop < e.detail.scrollTop) {
|
|
// this.scrollHeight = '100vh - 188rpx'
|
|
this.scrollHeight = '1252rpx'
|
|
this.scrollState = true
|
|
}
|
|
this.scrollTop = e.detail.scrollTop
|
|
},
|
|
|
|
//立即购买
|
|
buyImmediatelyFn() {
|
|
this.specificationShow = true
|
|
},
|
|
//选择规格
|
|
actSpecFn(item, index, index2) {
|
|
// console.log(item, index, index2);
|
|
this.$set(this.actArr, index, index2)
|
|
},
|
|
//弹出层确认
|
|
endSpecificationFn() {
|
|
this.specificationClose()
|
|
let id = this.commodityDeta.id
|
|
let commodityNum = this.commodityNum
|
|
uni.navigateTo({
|
|
url: `/pages/driver/welfare/rightsInterests/confirm_order?id=${id}&commodityNum=${commodityNum}`
|
|
})
|
|
},
|
|
//弹出层
|
|
specificationClose() {
|
|
this.specificationShow = false
|
|
},
|
|
//返回
|
|
navBackFn(type) {
|
|
if (type == 'tabbar') {
|
|
uni.switchTab({
|
|
url: '/pages/driver/home/home'
|
|
})
|
|
} else {
|
|
uni.navigateBack()
|
|
}
|
|
},
|
|
//商品详情
|
|
getProductInfoDealerFn(id) {
|
|
getProductInfoDealer(id).then(res => {
|
|
console.log(res.data);
|
|
this.commodityDeta = res.data
|
|
this.branner = res.data.sliderImage.split(',')
|
|
})
|
|
},
|
|
// 添加收藏接口;取消收藏
|
|
getIntegralOrderProductFn() {
|
|
console.log(this.commodityDeta.userIsCollect);
|
|
if (this.commodityDeta.userIsCollect) {
|
|
getProductInfoCollectCancel(this.commodityDeta.id).then(res => {
|
|
console.log(res, '取消收藏');
|
|
this.$refs.paging.refresh();
|
|
})
|
|
} else {
|
|
getProductInfoCollectAdd(this.commodityDeta.id).then(res => {
|
|
console.log(res, '添加收藏');
|
|
this.$refs.paging.refresh();
|
|
})
|
|
}
|
|
},
|
|
//去评论列表
|
|
navEvaluateFn(item) {
|
|
uni.navigateTo({
|
|
url: `/pages/driver/mine/my_order/evaluate_order/evaluate_list?id=${item.id}`
|
|
})
|
|
},
|
|
},
|
|
onLoad(options) {
|
|
this.orderId = options.id
|
|
//常见问题
|
|
getproblemList().then(res => {
|
|
this.problemType = res.data
|
|
this.problemTypeContent = res.data[0].content
|
|
console.log('常见问题', res);
|
|
})
|
|
},
|
|
onShow() {},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background: #f5f5f5;
|
|
}
|
|
|
|
.collect-share {
|
|
margin-right: 140rpx;
|
|
|
|
image {
|
|
width: 56rpx;
|
|
height: 56rpx;
|
|
}
|
|
}
|
|
|
|
.info-introduce {
|
|
padding: 40rpx 24rpx 32rpx 24rpx;
|
|
background: #FFFFFF;
|
|
|
|
.title-info {
|
|
width: 572rpx;
|
|
}
|
|
|
|
.btns-box {
|
|
height: 49rpx;
|
|
font-size: 24rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
line-height: 36rpx;
|
|
}
|
|
|
|
.shop-price {
|
|
font-size: 30rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #666666;
|
|
margin-top: 32rpx;
|
|
}
|
|
}
|
|
|
|
.store-list {
|
|
padding: 0 24rpx;
|
|
margin-top: 24rpx;
|
|
|
|
.store-item {
|
|
padding: 24rpx;
|
|
width: 702rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 8rpx;
|
|
|
|
.store-title-box {
|
|
.store-title {
|
|
font-size: 32rpx;
|
|
color: #111111;
|
|
line-height: 44rpx;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.star {
|
|
margin-right: 12rpx;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #13AFA8;
|
|
}
|
|
|
|
.reply {
|
|
font-size: 24rpx;
|
|
color: #666666;
|
|
}
|
|
|
|
}
|
|
|
|
.store-tags {
|
|
line-height: 60rpx;
|
|
|
|
text {
|
|
border-radius: 8rpx;
|
|
margin-right: 16rpx;
|
|
padding: 6rpx 16rpx;
|
|
background-color: #f5f5f5;
|
|
line-height: 42rpx;
|
|
}
|
|
}
|
|
|
|
.store-info {
|
|
font-size: 28rpx;
|
|
color: #555555;
|
|
margin-top: 24rpx;
|
|
}
|
|
|
|
.store-btns {
|
|
margin-top: 24rpx;
|
|
|
|
.store-btns-left {
|
|
font-size: 26rpx;
|
|
color: #666666;
|
|
line-height: 28rpx;
|
|
|
|
.price {
|
|
font-size: 34rpx;
|
|
font-family: Roboto, Roboto;
|
|
font-weight: 600;
|
|
color: #F20808;
|
|
}
|
|
}
|
|
|
|
.store-tags-right {
|
|
font-size: 26rpx;
|
|
color: #999999;
|
|
|
|
.btn-item {
|
|
margin-left: 16rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.u-nav-slot {
|
|
width: 174rpx;
|
|
height: 64rpx;
|
|
border-radius: 32rpx;
|
|
border: 1rpx solid rgba(0, 0, 0, 0.2);
|
|
background: #FFFFFF;
|
|
padding: 0 20rpx;
|
|
}
|
|
|
|
.indicator {
|
|
@include flex(row);
|
|
justify-content: center;
|
|
|
|
&__dot {
|
|
height: 6px;
|
|
width: 6px;
|
|
border-radius: 100px;
|
|
background-color: rgba(255, 255, 255, 0.35);
|
|
margin: 0 5px;
|
|
transition: background-color 0.3s;
|
|
|
|
&--active {
|
|
background-color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.indicator-num {
|
|
padding: 2px 0;
|
|
background-color: rgba(0, 0, 0, 0.35);
|
|
border-radius: 100px;
|
|
width: 35px;
|
|
@include flex;
|
|
justify-content: center;
|
|
|
|
&__text {
|
|
color: #FFFFFF;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
.popup-box {
|
|
.popup-title {
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
color: #222222;
|
|
line-height: 128rpx;
|
|
text-align: center;
|
|
|
|
image {
|
|
top: 50%;
|
|
left: 16rpx;
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
}
|
|
}
|
|
|
|
.popup-title-active {
|
|
padding-top: 62rpx;
|
|
line-height: 66rpx;
|
|
}
|
|
|
|
.popup-tabs-box {
|
|
border-bottom: 1rpx solid #ededed;
|
|
}
|
|
|
|
.scroll-view {
|
|
height: 1252rpx;
|
|
transition: height 0.5s;
|
|
}
|
|
|
|
.comment-scroll-box {
|
|
// overflow-y: auto;
|
|
background-color: #F5F5F5;
|
|
padding-bottom: 220rpx;
|
|
}
|
|
|
|
.popup-car-list {
|
|
padding: 24rpx 0 24rpx 24rpx;
|
|
background-color: #fff;
|
|
|
|
.popup-car-title {
|
|
font-size: 36rpx;
|
|
color: #111111;
|
|
line-height: 50rpx;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.store-info {
|
|
font-size: 28rpx;
|
|
color: #555555;
|
|
margin-top: 16rpx;
|
|
}
|
|
|
|
.popup-tags-list {
|
|
margin-top: 16rpx;
|
|
|
|
text {
|
|
margin-right: 16rpx;
|
|
padding: 0 16rpx;
|
|
background: #f5f5f5;
|
|
font-size: 24rpx;
|
|
color: #444444;
|
|
line-height: 42rpx;
|
|
}
|
|
}
|
|
|
|
.popup-car-box {
|
|
margin-top: 32rpx;
|
|
height: 155rpx;
|
|
overflow-x: auto;
|
|
|
|
.car-list {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
height: 155rpx;
|
|
|
|
.car-item {
|
|
margin-right: 24rpx;
|
|
width: 202rpx;
|
|
height: 152rpx;
|
|
|
|
image {
|
|
width: 202rpx;
|
|
height: 150rpx;
|
|
background: #F2F2F2;
|
|
border-radius: 8rpx;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.must-read {
|
|
padding: 0 24rpx;
|
|
|
|
.popup-read-title {
|
|
font-size: 36rpx;
|
|
color: #111111;
|
|
line-height: 100rpx;
|
|
// margin-top: 24rpx;
|
|
}
|
|
|
|
.popup-read-content {
|
|
// margin-top: 24rpx;
|
|
padding: 24rpx;
|
|
background-color: #fff;
|
|
border-radius: 8rpx;
|
|
font-size: 28rpx;
|
|
color: #000000;
|
|
|
|
.read-new-title {
|
|
font-size: 32rpx;
|
|
color: #111111;
|
|
}
|
|
|
|
.read-images {
|
|
margin-top: 32rpx;
|
|
}
|
|
|
|
.guize {
|
|
margin-top: 32rpx;
|
|
width: 654rpx;
|
|
}
|
|
|
|
.liucheng {
|
|
width: 654rpx;
|
|
}
|
|
|
|
.problem-tabs {
|
|
margin-bottom: 32rpx;
|
|
overflow-x: auto;
|
|
|
|
.problem-tabs-box {
|
|
.problem-tabs-item {
|
|
margin-right: 24rpx;
|
|
padding: 0 32rpx;
|
|
white-space: nowrap;
|
|
background: #F5F5F5;
|
|
border-radius: 4rpx;
|
|
line-height: 52rpx;
|
|
font-size: 26rpx;
|
|
color: #444444;
|
|
}
|
|
|
|
.problem-active-item {
|
|
background-color: #13AFA8;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.problem-image {
|
|
width: 654rpx;
|
|
border-radius: 8rpx;
|
|
}
|
|
.problem-image img {
|
|
display: block;
|
|
margin: 0 auto;
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
.comment-box {
|
|
background-color: #F5F5F5;
|
|
|
|
.comment-title {
|
|
padding: 0 24rpx;
|
|
line-height: 100rpx;
|
|
font-size: 36rpx;
|
|
color: #111111;
|
|
|
|
.num {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: #F78D1F;
|
|
margin-left: 12rpx;
|
|
}
|
|
|
|
.comrel {
|
|
font-size: 28rpx;
|
|
color: #999999;
|
|
}
|
|
}
|
|
|
|
.comment-content-item {
|
|
margin: 0 auto;
|
|
padding: 32rpx 24rpx;
|
|
width: 702rpx;
|
|
border-radius: 8rpx;
|
|
background-color: #ffffff;
|
|
|
|
.user-info {
|
|
.right {
|
|
.user-detail {
|
|
height: 72rpx;
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
color: #000000;
|
|
|
|
.name {
|
|
padding-left: 12rpx;
|
|
}
|
|
|
|
.fen {
|
|
color: #F68D1F;
|
|
}
|
|
}
|
|
|
|
image {
|
|
width: 72rpx;
|
|
height: 72rpx;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.comment-text {
|
|
margin-top: 32rpx;
|
|
font-size: 28rpx;
|
|
color: #000000;
|
|
}
|
|
|
|
.comment-image {
|
|
margin-top: 24rpx;
|
|
|
|
image {
|
|
margin-right: 24rpx;
|
|
margin-bottom: 24rpx;
|
|
width: 202rpx;
|
|
height: 202rpx;
|
|
border-radius: 8rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.comment-btns {
|
|
width: 750rpx;
|
|
background-color: #fff;
|
|
border-top: 2rpx solid #eeeeee;
|
|
|
|
.comment-btn {
|
|
padding: 16rpx 24rpx 8rpx 24rpx;
|
|
|
|
.right-btn {
|
|
.right-price {
|
|
margin-right: 24rpx;
|
|
height: 80rpx;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #111111;
|
|
|
|
.yue {
|
|
font-weight: 400;
|
|
}
|
|
|
|
.right-mouth {
|
|
// width: 112rpx;
|
|
height: 24rpx;
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
}
|
|
}
|
|
|
|
.right-btn-box {
|
|
height: 96rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.contact-icon {
|
|
font-size: 18rpx;
|
|
|
|
image {
|
|
height: 48rpx;
|
|
}
|
|
|
|
.contact-icon-view {
|
|
height: 80rpx;
|
|
margin-left: 36rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.popup-content {
|
|
margin: 0 auto;
|
|
width: 610rpx;
|
|
height: 456rpx;
|
|
overflow-y: auto;
|
|
|
|
.popup-srcoll {
|
|
|
|
.popup-srcoll-title {
|
|
margin-top: 32rpx;
|
|
font-size: 32rpx;
|
|
color: #111111;
|
|
line-height: 44rpx;
|
|
font-weight: 600;
|
|
|
|
}
|
|
|
|
.popup-srcoll-cont {
|
|
width: 337rpx;
|
|
|
|
.popup-srcoll-list {
|
|
margin-top: 24rpx;
|
|
font-size: 28rpx;
|
|
color: #111111;
|
|
font-weight: 600;
|
|
|
|
text {
|
|
font-weight: 500;
|
|
color: #666666;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.popup-phone-box {
|
|
.btn-item {
|
|
margin: 0 auto;
|
|
width: 686rpx;
|
|
height: 112rpx;
|
|
|
|
image {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
}
|
|
}
|
|
|
|
.btn-item-1 {
|
|
border-bottom: 1rpx solid #eee;
|
|
font-size: 34rpx;
|
|
color: #333333;
|
|
}
|
|
|
|
.btn-item-2 {
|
|
font-size: 34rpx;
|
|
color: rgba(153, 153, 153, 0.9);
|
|
}
|
|
}
|
|
.line-five {
|
|
white-space: pre-line;
|
|
line-height: 50rpx;
|
|
}
|
|
|
|
</style> |