Skip to content

U
uni-pdtravel
Commit 6269ea24 authored by 潘永坪's avatar 潘永坪
Browse files
Options

页面新增

parent 145d0540
Show whitespace changes
Inline Side-by-side
Showing with 962 additions and 36 deletions
App.vue
View file @ 6269ea24
...@@ -93,7 +93,7 @@ export default { ...@@ -93,7 +93,7 @@ export default {
font-size: 28rpx; font-size: 28rpx;
color: #333333; color: #333333;
background: #F7F7F7; background: #F7F7F7;
height: 100%; height:100vh;
} }
view, view,
......
pages.json
View file @ 6269ea24
...@@ -182,7 +182,16 @@ ...@@ -182,7 +182,16 @@
"path" : "pages/indexs/merchantListIndex/merchantListIndex", "path" : "pages/indexs/merchantListIndex/merchantListIndex",
"style" : "style" :
{ {
"navigationBarTitleText": "", "navigationBarTitleText":"商品列表",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/scenic/scenicChooseProduct/scenicChooseProduct",
"style" :
{
"navigationBarTitleText": "产品选择",
"enablePullDownRefresh": false "enablePullDownRefresh": false
} }
......
pages/indexs/hghgIndex/hghgIndex.vue
View file @ 6269ea24
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
<text> <text>
开放时间： 开放时间：
</text> </text>
09:00 - 18:00，闭馆前1小时（17:00）停止售票 09:00 - 18:30，闭馆前1小时（17:30）停止售票
</view> </view>
<view style="color: #D9A874;"> <view style="color: #D9A874;">
每周一“湖广填四川”移民博物馆、临展馆闭馆维护。 每周一“湖广填四川”移民博物馆、临展馆闭馆维护。
......
pages/indexs/merchantListIndex/merchantListIndex.vue
View file @ 6269ea24
<template> <template>
<!-- 商户列表首页 --> <!-- 商户列表首页 -->
<view> <view class="wrap">
<view class="banner"> <view class="banner">
<u-swiper :list="list" mode='number' height="350"></u-swiper> <u-swiper :list="list" mode="number" height="350" indicator-pos="topRight"></u-swiper>
</view> </view>
<view class="search"> <view class="search">
...@@ -13,15 +13,77 @@ ...@@ -13,15 +13,77 @@
</view> </view>
<view class="search-right"> <view class="search-right">
<input class="search-input" placeholder="景区/商品/关键词搜索"/> <input class="search-input" placeholder="景区/商品/关键词搜索" v-model="searchData" />
<text class="search-btn">搜索</text> <text class="search-btn" @click="initList(true)">搜索</text>
</view>
</view>
</view>
<view class="merchant-wrap">
<view>
<u-tabs-swiper ref="uTabs" :list="tabList" :current="current" @change="tabsChange" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
</view>
<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" class="swiper-box">
<swiper-item class="swiper-item">
<scroll-view scroll-y style="height:100%;width: 100%;">
<view class="merchant-list" v-for="(item,index) in scenicList" :key='index'>
<view class="list-left">
<image :src="item.imgUrl"></image>
</view>
<view class="list-right">
<view class="right1">
{{item.name}}
</view>
<view class="right2">
<view class="right2-left">
<text v-for="(items, index) of item.tag.slice(0, 3)" :key="index" v-if="items">{{items}}</text>
</view>
<view class="right2-right">
距您8km
</view> </view>
</view> </view>
<view class="right3">
<text class="right3-text" v-for="(items, index) of item.tag.slice(0, 3)" :key="index" v-if="items">
{{items}}
</text>
<text>
购买须知
<u-icon name="arrow-right"></u-icon>
</text>
</view> </view>
<view class="merchant-list"> <view class="right4">
<view class="right4-left">
已售10W+
</view>
<view class="right4-right">
<text class="right4-price1">¥{{parseFloat(item.originalPrice)}}</text>
<text class="right4-price2">
¥<text style="font-size: 40rpx;font-weight: bold;">{{parseFloat(item.sellingPrice)}}</text>
</text>
<text style="color: #ccc;">起</text>
</view>
</view>
</view>
</view>
<u-empty text="空空如也..." mode="list" v-if="scenicList.length==0"></u-empty>
</scroll-view>
</swiper-item>
<swiper-item class="swiper-item">
<u-empty text="空空如也..." mode="list"></u-empty>
</swiper-item>
<swiper-item class="swiper-item">
<u-empty text="空空如也..." mode="list"></u-empty>
</swiper-item>
</swiper>
</view> </view>
</view> </view>
</template> </template>
...@@ -30,7 +92,9 @@ ...@@ -30,7 +92,9 @@
export default { export default {
data() { data() {
return { return {
list: [{ scenicList:[],//景区数据
list: [
{
image: 'http://wx.pangdly.com/static/img/test7.6d14c2d.jpg', image: 'http://wx.pangdly.com/static/img/test7.6d14c2d.jpg',
title: '昨夜星辰昨夜风，画楼西畔桂堂东' title: '昨夜星辰昨夜风，画楼西畔桂堂东'
}, },
...@@ -43,45 +107,196 @@ export default { ...@@ -43,45 +107,196 @@ export default {
title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳' title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
} }
], ],
tabList: [{
name: '热门景点'
}, {
name: '本地必吃'
}, {
name: '特价酒店'
}],
// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
current: 0, // tabs组件的current值，表示当前活动的tab选项
swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
searchData:'',//搜索框的值
} }
}, },
onLoad(option) {
this.initList()
},
methods: { methods: {
//---tabs通知swiper切换
tabsChange(index) {
this.swiperCurrent = index
},
//---swiper-item左右移动，通知tabs的滑块跟随移动
transition(e) {
let dx = e.detail.dx
this.$refs.uTabs.setDx(dx)
},
//---由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
// swiper滑动结束，分别设置tabs和swiper的状态
animationfinish(e) {
let current = e.detail.current
this.$refs.uTabs.setFinishCurrent(current)
this.swiperCurrent = current
this.current = current
},
//---加载数据
initList(click){
let data = {
type: 1, //类型：1景区、2酒店、餐饮
pageIndex:1,//第几页
pageSize:20, //每页有多少条
}
if(click){
//如果是点击进行搜索
data.search=this.searchData
}
this.$request('scenic/user/merchant/findMerchantList', data).then(res => {
if (res.code == '00') {
this.scenicList=res.data.list||[]
this.scenicList.forEach((item, index) => {
item.tag = item.tag.split(',')
})
}else{
uni.showToast({
title: res.message,
icon: 'none'
})
}
})
}
} }
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.search{ .wrap{
height: 100%;
display: flex;
flex-direction: column;
background: #fff;
}
.search {
padding: 0 24rpx; padding: 0 24rpx;
position: relative; position: relative;
top: -40rpx; top: -40rpx;
} }
.search-wrap{ .search-wrap {
background: #fff; background: #fff;
border-radius: 44rpx; border-radius: 44rpx;
box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.08); box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.08);
display: flex; display: flex;
align-items: center; align-items: center;
height: 80rpx; height: 80rpx;
padding: 0 20rpx; padding: 0 20rpx;
} }
.search-left{ .search-left {
display: flex; display: flex;
} }
.line{ .line {
width: 2rpx; width: 2rpx;
background: #ccc; background: #ccc;
margin: 0 20rpx; margin: 0 20rpx;
} }
.search-right{ .search-right {
display: flex;
flex: 1;
align-items: center;
}
.search-input {
flex: 1;
padding-right: 40rpx;
}
.search-btn {
background: $blue;
color: #fff;
border-radius: 32rpx;
padding: 12rpx 24rpx;
}
.merchant-wrap{
display: flex; display: flex;
flex: 1; flex: 1;
flex-direction: column;
}
.swiper-box{
flex: 1;
}
.merchant-list{
padding: 0 24rpx;
margin-top: 32rpx;
display: flex;
font-size: 24rpx;
}
.list-left image{
width: 200rpx;
height: 200rpx;
border-radius: 16rpx;
margin-right: 20rpx;
} }
.search-input{ .list-right{
flex: 1; flex: 1;
width: 0;
}
.right1{
width: 100%;
color: #191919;
font-weight: bold;
font-size: 32rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.right2{
margin-top: 20rpx;
display: flex;
justify-content: space-between;
}
.right2-left text{
color: $blue;
border: 1px solid $blue;
font-size: 20rpx;
padding: 2rpx 4rpx;
border-radius: 2rpx;
width: 110rpx;
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.right2 text:not(:last-child){
margin-right: 10rpx;
}
.right2-right{
color: #999999;
}
.right3{
margin-top: 16rpx;
}
.right3-text::after{
display: inline-block;
content: "";
height: 20rpx;
width: 2rpx;
background: #ccc;
margin: 0 10rpx;
}
.right4{
display: flex;
margin-top: 10rpx;
justify-content: space-between;
align-items: center;
}
.right4-left{
color: $red;
}
.right4-price1{
color: #999;
text-decoration:line-through;
font-size: 28rpx;
} }
.search-btn{ .right4-price2{
background:$blue; color: $red;
margin: 0 10rpx;
} }
</style> </style>
pages/scenic/scenicChooseProduct/scenicChooseProduct.vue 0 → 100644
View file @ 6269ea24
<template>
<div class="wrap">
<div class="top">
<van-swipe class="my-swipe" :autoplay="3000" @change="swiperChange">
<van-swipe-item v-for="(item, index) of detailData.imgList" :key="index"> <van-image fit="cover" :src="item.url"></van-image> </van-swipe-item>
<template #indicator>
<div class="custom-indicator" v-if="detailData.imgList">{{ current + 1 }}/{{ detailData.imgList.length }}</div>
</template>
</van-swipe>
</div>
<div class="middle">
<div class="middle-top">
<div class="middle-top-top">
<p>{{ detailData.name }}</p>
<div class="middle-top-time">
<span>
<i>{{ openStatus }}</i>
<i> {{ detailData.businessStart ? detailData.businessStart.substr(0, 5) : '' }} ~{{ detailData.businessStart ? detailData.businessEnd.substr(0, 5) : '' }} </i>
</span>
<span @click="goIntroduce(merchantId)">
详情
<van-icon name="arrow" />
</span>
</div>
</div>
<div class="middle-top-middle">
<span>{{ detailData.score || 5 }}分</span> <span></span> <span>{{ detailData.comments ? detailData.comments.length : 0 }}条好评</span>
</div>
<div class="middle-top-bottom">
<div>
<p>{{ detailData.address }}</p>
<!-- <p>
距您{{$commonjs.computeDistance(detailData.longitude,detailData.latitude)||1}}km
</p> -->
</div>
<div style="flex-shrink: 0;padding-left: 0.1rem;">
<a @click="openLocation(detailData)"> <van-icon name="location" /> </a> <a> </a> <a :href="'tel:' + detailData.phone"> <van-icon name="phone" /> </a>
</div>
</div>
</div>
<!--单票部分-->
<div class="middle-single">
<p class="middle-single-title">预订门票</p>
<div class="middle-sinle-know">
<span>
<!-- <i>无需换票</i>
<i>无需取号</i>
<i>不可退</i> -->
</span>
<span>
<!-- 购票须知
<van-icon name="arrow" /> -->
</span>
</div>
<div class="middle-single-list">
<div v-for="(item, index) of singleProduct" :key="index">
<label class="single-ticket">
<div>
<input type="checkbox" v-model="chooseProducts[combiProduct.length]" :true-value="item" @change="inputChange(combiProduct.length, item, index, $event)" />
<i :class="{ on: chooseProducts.indexOf(item) != -1 }">{{ item.name }}</i>
</div>
<div class="single-ticket-price">
<span>¥{{ item.originalPrice | parseMoney }}</span> <span> <i>¥</i>{{ item.sellingPrice | parseMoney }}</span>
</div>
</label>
</div>
</div>
<van-empty description="空空如也..." v-if="singleProduct.length == 0" />
</div>
<!--组合票部分-->
<div class="middle-double" v-if="combiProduct.length > 0">
<p class="middle-double-title">组合票（周边）</p>
<div class="double-list" v-for="(item, index) of combiProduct" :key="index">
<div class="double-list-ticket">
<p class="list-titcket-title">{{ item.name }}</p>
<div class="middle-sinle-know" @click="goIntroduce(item.id)">
<span>
<i v-for="(item2, index) of item.tag.slice(0, 3)" :key="index">{{ item2 }}</i>
</span>
<span>
详情
<van-icon name="arrow" />
</span>
</div>
<div class="middle-single-list" style="padding: 0">
<div v-for="(item2, a) of item.productList" :key="a">
<label class="single-ticket">
<div>
<input type="checkbox" v-model="chooseProducts[index]" :true-value="item2" @change="inputChange(index, item2, a, $event)" />
<i :class="{ on: chooseProducts.indexOf(item2) != -1 }">{{ item2.name }}</i>
</div>
<div class="single-ticket-price">
<span>{{ item2.originalPrice | parseMoney }}</span> <span> <i>¥</i> {{ item2.sellingPrice | parseMoney }} </span>
</div>
</label>
</div>
</div>
</div>
</div>
</div>
<div class="middle-nearby"></div>
</div>
<div class="bottom">
<div class="bottom-left">
<span>¥{{ originalTotal }}</span> <span> <i>¥</i>{{ sellTotal }} </span>
</div>
<div class="bottom-right">
<!-- <van-icon name="chat-o" size="18" style="margin-right: 0.3rem;" /> -->
<a class="btn225" @click="next()">去预定</a>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
current: 0, //轮播图下标
merchantId: '', //商户Id
companyId: '', //公司Id
detailData: '', //详情数据
openStatus: '', //开园状态
singleProduct: [], //单产品列表
combiProduct: [], //组合产品列表
chooseProducts: [], //选择过的产品
chooseProduct: [], //选中的产品
originalTotal: 0, //原价总价
sellTotal: 0, //卖价总价
groupId: '', //组合Id
groupChannelId: '', //组合渠道Id
appId: 'wxe678d5240e98a7b8', //小程序Id
originalId: 'gh_c206efc7dc24', //微信小程序原始Id
environment: 1, //环境,1微信和渝快办，2支付宝，默认为微信
yukuai: false, //渝快办环境
cqQRCode: '' //是否是从胖丁小程序返回到渝快码小程序
}
},
created() {
let returnObj = this.$cqQRCode.getReferrerInfo()
if (returnObj.extraData) {
this.cqQRCode = returnObj.extraData.cqQRCode || ''
}
if (this.cqQRCode) {
//如果是从胖丁小程序返回，直接返回首页
this.$cqQRCode.toHome()
}
let env = this.$cqQRCode.getEnv()
if (env.isAlipayWebView) {
//支付宝
this.environment = 2
this.appId = '2021001194629244'
} else if (env.isWechatWebView) {
//微信
this.environment = 1
} else if (env.isYKBWebView) {
//渝快办app
this.environment = 1
this.yukuai = true
}
},
mounted() {
this.merchantId = this.$route.query.merchantId
this.companyId = this.$route.query.companyId
this.initDetails()
this.loadSingleProduct()
this.loadCombiProduct()
},
methods: {
//---轮播图变化
swiperChange(index) {
this.current = index
},
//---跳转景区介绍页面
goIntroduce(merchantId) {
this.$router.push({
path: '/scenicIntroduce',
query: {
merchantId
}
})
},
//---打开微信内置地图
openLocation(item) {
let longitude = String(item.longitude)
let latitude = String(item.latitude)
this.$cqQRCode.openLocation({
lon: longitude,
lat: latitude,
name: item.areaName,
address: item.address
})
},
//---多选框变化时的事件
inputChange(index, items, a, event) {
let el = event.currentTarget
this.chooseProduct = []
this.originalTotal = 0
this.sellTotal = 0
if (this.chooseProducts[index]) {
//选中产品时
if (items.productIds) {
//联票有重复产品时不能再选择
for (let b = 0; b < this.chooseProducts.length; b++) {
if (this.chooseProducts[b] && items.productIds == this.chooseProducts[b].productIds && items.id != this.chooseProducts[b].id) {
//当前productIds与之前选中的有重复时，清空当前产品,productIds相同，并且id不同，除去当前产品
if (this.chooseProducts[b].ticketType == 2 || items.ticketType == 2) {
//产品productIds相同时，并且里面有联票时，无法选中
this.chooseProducts[index] = ''
el.checked = false
this.$toast.fail('有重复产品')
}
}
}
}
}
this.chooseProducts.forEach(item => {
//获取选中的产品
if (item) {
this.chooseProduct.push(item)
}
})
this.chooseProduct.forEach(item => {
//通过选中的产品计算价格
this.originalTotal += item.originalPrice
this.sellTotal += item.sellingPrice
})
},
//---初始化详情
initDetails() {
let data = {
id: this.merchantId, //商户id
isDetail: 1 //商户详情
}
this.$request('scenic/user/merchant/findDetailInfo', data).then(res => {
if (res.code == '00') {
this.detailData = res.data
document
.querySelector('.detailBottomRight div:first-child a')
.setAttribute(
'href',
'http://api.map.baidu.com/marker?location=' +
this.detailData.latitude +
',' +
this.detailData.longitude +
'&title=' +
this.detailData.address +
'&content=所在位置的简介（可选）&output=html'
)
if (this.detailData.imgList.length > 5) {
this.detailData.imgList = this.detailData.imgList.slice(0, 5)
}
let start = ''
let end = ''
if (this.detailData.businessStart) {
start = parseInt(this.$commonjs.changeTime(this.detailData.businessStart.substr(0, 5)))
}
if (this.detailData.businessEnd) {
end = parseInt(this.$commonjs.changeTime(this.detailData.businessEnd.substr(0, 5)))
}
if (start < this.nowTime < end) {
this.openStatus = '开园中'
} else {
this.openStatus = '闭园中'
}
} else {
this.$toast.fail(res.message)
}
})
},
//---单产品加载
loadSingleProduct() {
this.singleProduct = []
let data = {
merchantId: this.merchantId, //商户id
type: 1 //类型：1景区、2酒店、3餐饮
}
this.$store.commit('showLoading')
this.$request('scenic/user/product/findProductList', data).then(res => {
this.$store.commit('hideLoading')
if (res.code == '00') {
let list = res.data.list
if (list.length > 0) {
list.forEach(item => {
if (item.channelType == 0) {
this.singleProduct.push(item)
}
})
} else {
// this.showProductList = true;
}
} else {
this.$toast.fail(res.message)
}
})
},
//---加载组合产品
loadCombiProduct() {
let data = {
merchantId: this.merchantId //商户id
}
this.$request('scenic/groupGood/getGroupProducts', data).then(res => {
if (res.code == '00') {
this.combiProduct = res.data.merchantList || []
this.groupId = res.data.groupId
this.groupChannelId = res.data.groupChannelId
if (this.combiProduct.length > 0) {
this.combiProduct.forEach(item => {
item.tag = item.tag.split(',')
})
}
} else {
this.$toast.fail(res.message)
}
})
},
//---跳转app
goApp(path, params) {
let data = {}
if (this.yukuai) {
//渝快办环境
data = {
originalId: this.originalId,
path,
env: this.environment, //1-微信，2-支付宝
params
}
} else {
data = {
appId: this.appId,
path,
env: this.environment, //1-微信，2-支付宝
params
}
}
this.$cqQRCode
.toMiniProgram(data)
.then(res => {})
.catch(err => {
this.$toast.fail(err.msg)
})
},
goSingleOrder() {
//选择的是一个产品时
let chooseGroupGoodList = this.chooseProduct.map(item => {
return {
productId: item.id,
merchantCode: item.merchantCode,
extendContent: '{"openid":' + '"' + this.$store.state.openId + '"' + '}'
}
})
let data = {
chooseGroupGoodList,
companyId: this.companyId
}
this.$request('scenic/groupGood/checkProductChangeList', data).then(res => {
if (res.code == '00') {
let jumpType = 999
if (res.data.length > 0) {
jumpType = res.data[0].jumpType
}
if (this.chooseProduct[0].ticketType == 2) {
//景区联票
if (jumpType == 0) {
var afterProductId = res.data[0].afterProductId
}
let params = {
ifyukuaiCode: 1, //是否是渝快码
orderSource: 0,
merchantId: this.chooseProduct[0].merchantId,
productId: afterProductId || this.chooseProduct[0].id,
companyId: this.companyId || ''
}
this.goApp('pages/scenic/scenicJointOrder/scenicJointOrder', params)
}
if (this.chooseProduct[0].ticketType != 2) {
//景区单票
if (jumpType == 0) {
//变产品id
var afterProductId = res.data[0].afterProductId
let params = {
ifyukuaiCode: 1, //是否是渝快码
orderSource: 0,
merchantId: this.chooseProduct[0].merchantId,
productId: afterProductId || this.chooseProduct[0].id,
companyId: this.companyId || ''
}
this.goApp('pages/scenic/scenicSingleOrder/scenicSingleOrder', params)
} else if (jumpType == 1) {
//跳H5
// window.location.href=res.data[0].jumpUrl
} else {
//不变
let params = {
ifyukuaiCode: 1, //是否是渝快码
orderSource: 0,
merchantId: this.chooseProduct[0].merchantId,
productId: this.chooseProduct[0].id,
companyId: this.companyId || ''
}
this.goApp('pages/scenic/scenicSingleOrder/scenicSingleOrder', params)
}
}
} else {
return this.$toast.fail(res.message)
}
})
},
//---下一步
next() {
if (this.chooseProduct.length == 0) {
this.$toast.fail('请选择至少一个产品')
return
} else if (this.chooseProduct.length == 1) {
this.goSingleOrder()
} else {
let chooseGroupGoodList = this.chooseProduct.map(item => {
return {
ifyukuaiCode: 1, //是否是渝快码
productId: item.id,
merchantCode: item.merchantCode,
extendContent: '{"openid":' + '"' + this.$store.state.openId + '"' + '}'
}
})
let data = {
chooseGroupGoodList,
companyId: this.companyId
}
this.$request('scenic/groupGood/checkProductChangeList', data).then(res => {
if (res.code == '00') {
var productIdList = []
if (res.data.length > 0) {
res.data.forEach(item => {
if (item.buyProductType == 1) {
//buyProductType==1是产品id变
productIdList.push(item.afterProductId)
} else {
productIdList.push(item.beforeProductId)
}
})
} else {
productIdList = this.chooseProduct.map(item => {
return item.id
})
}
let params = {
orderSource: 0,
productIdList: JSON.stringify(productIdList),
groupId: this.groupId,
groupChannelId: this.groupChannelId,
companyId: this.companyId || ''
}
this.goApp('pages/combination/combiOrder/combiOrder', params)
} else {
return this.$toast.fail(res.message)
}
})
}
}
}
}
</script>
<style scoped="scoped">
.top >>> .van-nav-bar {
background: none;
position: fixed;
top: 0;
z-index: 10;
width: 100%;
}
.top >>> .van-nav-bar .van-icon {
color: #ffffff;
font-size: 0.4rem;
}
.top >>> .van-hairline--bottom::after {
border-bottom: none;
}
.middle {
position: relative;
padding-bottom: 0.8rem;
top: -0.6rem;
}
/*中间上部分*/
.middle-top {
border-radius: 0.24rem 0.24rem 0 0;
background: #ffffff;
padding: 0.16rem 0.32rem;
}
.middle-top-top p:first-child {
font-size: 0.32rem;
font-weight: bold;
color: #191919;
}
.middle-top-time {
padding: 0.16rem 0;
border-bottom: 1px solid #e6e6e6;
display: flex;
justify-content: space-between;
}
.middle-top-time span:first-child i:first-child {
color: #3688ff;
margin-right: 0.2rem;
}
.middle-top-time span:last-child {
color: #999999;
}
.middle-top-middle {
padding: 0.16rem 0;
border-bottom: 1px solid #e6e6e6;
color: #999999;
}
.middle-top-middle span:first-child {
color: #fc6703;
font-weight: bold;
}
.middle-top-middle span:nth-child(2) {
width: 1px;
background: #999999;
display: inline-block;
margin: 0 0.1rem 0 0.14rem;
height: 0.24rem;
position: relative;
top: 0.02rem;
}
.middle-top-bottom {
display: flex;
justify-content: space-between;
padding: 0.18rem 0;
align-items: center;
}
.middle-top-bottom div:first-child p:first-child {
color: #666666;
}
.middle-top-bottom div:first-child p:nth-child(2) {
color: #999999;
font-size: 0.2rem;
margin-top: 0.1rem;
}
.middle-top-bottom a:first-child,
.middle-top-bottom a:last-child {
width: 0.4rem;
height: 0.4rem;
border-radius: 50%;
background: #3688ff;
display: inline-block;
text-align: center;
line-height: 0.4rem;
color: #ffffff;
}
.middle-top-bottom a:nth-child(2) {
display: inline-block;
height: 0.32rem;
width: 1px;
background: #cccccc;
margin: 0 0.14rem;
position: relative;
top: 0.06rem;
}
/*中间单票部分*/
.middle-single {
padding: 0.24rem 0.32rem;
background: #ffffff;
margin-top: 0.16rem;
}
.middle-single-title {
font-size: 0.32rem;
color: #191919;
font-weight: bold;
}
.middle-sinle-know {
display: flex;
justify-content: space-between;
margin-top: 0.1rem;
}
.middle-sinle-know span:first-child {
font-size: 0.2rem;
color: #fc6703;
}
.middle-sinle-know span:first-child i:not(:last-child) {
padding-right: 0.1rem;
border-right: 1px solid #cccccc;
height: 0.28rem;
display: inline-block;
line-height: 0.28rem;
}
.middle-sinle-know span:first-child i:not(:first-child) {
padding-left: 0.1rem;
}
.middle-sinle-know span:last-child {
color: #999999;
}
.middle-single-list {
background: rgba(245, 247, 249, 0.39);
border-radius: 0.08rem;
padding: 0.32rem 0.24rem;
margin-top: 0.16rem;
}
.middle-single-list > div:not(:first-child) {
margin-top: 0.25rem;
}
.single-ticket {
display: flex;
justify-content: space-between;
align-items: center;
}
.single-ticket div:first-child {
font-size: 0.28rem;
color: #666666;
}
.single-ticket div:first-child input {
margin-right: 0.1rem;
width: 14px;
height: 14px;
position: relative;
top: -1px;
}
.single-ticket div:first-child i.on {
color: #3688ff;
font-weight: bold;
}
.single-ticket-price {
flex-shrink: 0;
padding-left: 0.2rem;
}
.single-ticket-price span:first-child {
color: #cccccc;
font-size: 0.2rem;
text-decoration: line-through;
margin-right: 0.1rem;
}
.single-ticket-price span:last-child {
font-weight: bold;
color: #fc6703;
font-size: 0.28rem;
}
.single-ticket-price span:last-child i {
font-size: 0.2rem;
}
/*中间组合票部分*/
.middle-double {
padding: 0.24rem 0.32rem;
background: #ffffff;
margin-top: 0.16rem;
}
.middle-double-title {
font-size: 0.32rem;
color: #191919;
font-weight: bold;
margin-bottom: 0.16rem;
}
.double-list {
background: rgba(245, 247, 249, 0.39);
padding: 0 0.32rem;
}
.double-list-ticket {
padding: 0.24rem 0;
}
.list-titcket-title {
font-size: 0.32rem;
color: #191919;
}
.bottom {
position: fixed;
bottom: 0;
width: 100%;
height: 0.98rem;
background: #e6e6e6;
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.16);
z-index: 10;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 0.32rem;
}
.bottom-left span:first-child {
font-size: 0.2rem;
color: #999999;
text-decoration: line-through;
margin-right: 0.3rem;
}
.bottom-left span:nth-child(2) {
color: #fc6703;
font-weight: bold;
font-size: 0.36rem;
}
.bottom-left span:nth-child(2) i {
font-size: 0.24rem;
}
@media only screen and (max-width: 380px) {
.middle {
top: -1rem;
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment