pull/1/head
liudan
1 year ago
parent
2278135919
commit
25b9307e88
@ -0,0 +1,266 @@ |
||||
<template> |
||||
<view class="page" @click="isMore = false"> |
||||
|
||||
<!-- banner，标题 --> |
||||
<view class="banner-title"> |
||||
<!-- banner --> |
||||
<view class="banner"> |
||||
<swiper class="screen-swiper round-dot" indicator-dots="true" circular="true" autoplay="true" interval="5000" |
||||
duration="500"> |
||||
<swiper-item v-for="(item, index) in swiperList" :key="index"> |
||||
<image :src="item.url" mode="aspectFill"></image> |
||||
|
||||
</swiper-item> |
||||
</swiper> |
||||
</view> |
||||
<!-- 价格 --> |
||||
<view class="price-info"> |
||||
<view class="price"> |
||||
<text class="min">￥</text> |
||||
<text class="max">{{detailsObj.price}}</text> |
||||
</view> |
||||
<view class="person"> |
||||
藏品归属人：{{detailsObj.owner.nickname}} |
||||
</view> |
||||
</view> |
||||
|
||||
|
||||
</view> |
||||
|
||||
<!-- 标题 --> |
||||
<view class="goods-title"> |
||||
<text>{{detailsObj.name}}</text> |
||||
</view> |
||||
|
||||
|
||||
<!-- 商品介绍 --> |
||||
<view class="products-introduction" ref="products" style="text-align: center;" > |
||||
<view class="title"> |
||||
<text>图文详情</text> |
||||
</view> |
||||
<view class="parseContent"> |
||||
<u-parse :content="detailsObj.content"></u-parse> |
||||
</view> |
||||
</view> |
||||
<!-- 底部 --> |
||||
<view class="page-footer"> |
||||
立即抢购 |
||||
</view> |
||||
|
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import {getgoodsDetail} from '@/common/api.js' |
||||
export default { |
||||
data() { |
||||
return { |
||||
swiperList: [], |
||||
detailsObj:{ |
||||
content:"", |
||||
createtime:null, |
||||
goods_form:null, |
||||
goods_type:null, |
||||
id:null, |
||||
image:null, |
||||
name:null, |
||||
off_time:null, |
||||
on_time:null, |
||||
owner_id:null, |
||||
price:null, |
||||
status:null, |
||||
updatetime:null, |
||||
warehouse_id:null, |
||||
} |
||||
}; |
||||
}, |
||||
onLoad(params) { |
||||
this.getDetailsHandle(params.id) |
||||
}, |
||||
|
||||
methods: { |
||||
getDetailsHandle(id){ |
||||
getgoodsDetail({id:id}).then(res=>{ |
||||
console.log(res,"99") |
||||
this.swiperList.push({ |
||||
url: res.data.image |
||||
}) |
||||
this.detailsObj = Object.assign({},this.detailsObj,res.data) |
||||
}) |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
.page { |
||||
// position: absolute; |
||||
width: 100%; |
||||
// height: 100%; |
||||
background: #f6f6f6; |
||||
overflow-x: hidden; |
||||
padding-bottom: 120rpx; |
||||
// overflow-y: auto; |
||||
} |
||||
|
||||
|
||||
/* banner 标题 */ |
||||
.banner-title{ |
||||
background-color: #FFFFFF; |
||||
padding-bottom: 20rpx; |
||||
} |
||||
/* banner */ |
||||
.banner{ |
||||
width: 100%; |
||||
height: 750rpx; |
||||
.screen-swiper{ |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
} |
||||
/* 价格 */ |
||||
.price-info{ |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
padding: 0 4%; |
||||
margin-top:20rpx; |
||||
.price{ |
||||
display: flex; |
||||
align-items: center; |
||||
.min{ |
||||
color: $base; |
||||
font-size: 28rpx; |
||||
font-weight: bold; |
||||
} |
||||
.max{ |
||||
color: $base; |
||||
font-size: 48rpx; |
||||
font-weight: bold; |
||||
} |
||||
} |
||||
.person{ |
||||
font-size:24rpx; |
||||
color:#aaaaaa; |
||||
} |
||||
} |
||||
|
||||
|
||||
/* 标题 */ |
||||
.goods-title{ |
||||
padding: 20rpx 4%; |
||||
background-color: #fff; |
||||
margin-top:20rpx; |
||||
text{ |
||||
font-size: 28rpx; |
||||
color: #212121; |
||||
} |
||||
} |
||||
|
||||
/* 商品介绍 */ |
||||
.products-introduction{ |
||||
// padding: 0 4% 100rpx; |
||||
margin-top:20rpx; |
||||
.title{ |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
width: 100%; |
||||
height: 80rpx; |
||||
background: #fff; |
||||
margin-bottom:20rpx; |
||||
text{ |
||||
font-size: 28rpx; |
||||
color: #212121; |
||||
margin: 0 20rpx; |
||||
} |
||||
} |
||||
.title:before{ |
||||
content: ""; |
||||
width: 100rpx; |
||||
height: 2rpx; |
||||
background-color: #c0c0c0; |
||||
} |
||||
.title:after{ |
||||
content: ""; |
||||
width: 100rpx; |
||||
height: 2rpx; |
||||
background-color: #c0c0c0; |
||||
} |
||||
.parseContent{ |
||||
width: 100%; |
||||
background-color: #fff; |
||||
padding:50rpx 20rpx; |
||||
} |
||||
} |
||||
/* 底部 */ |
||||
.page-footer{ |
||||
position: fixed; |
||||
left: 0; |
||||
bottom: 10rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
width: calc(100% - 48rpx); |
||||
height: 80rpx; |
||||
background-color: #9f751F; |
||||
margin:0 24rpx; |
||||
border-radius: 10rpx; |
||||
color:#fff; |
||||
.footer-fn{ |
||||
display: flex; |
||||
align-items: center; |
||||
width: 40%; |
||||
height: 100%; |
||||
.list{ |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
align-items: center; |
||||
width: 50%; |
||||
height: 100%; |
||||
text{ |
||||
font-size: 24rpx; |
||||
color: #555555; |
||||
} |
||||
.iconfont{ |
||||
font-size: 42rpx; |
||||
color: #212121; |
||||
} |
||||
} |
||||
} |
||||
.footer-buy{ |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
width: 60%; |
||||
height: 100%; |
||||
.cart-add{ |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
width: 48%; |
||||
height: 70rpx; |
||||
background: #4d9a5e; |
||||
border-radius: 70rpx; |
||||
text{ |
||||
font-size: 26rpx; |
||||
color: #FFFFFF; |
||||
} |
||||
} |
||||
.buy-at{ |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
width: 48%; |
||||
height: 70rpx; |
||||
background: #4d9a5e; |
||||
border-radius: 70rpx; |
||||
text{ |
||||
font-size: 26rpx; |
||||
color: #FFFFFF; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,185 @@ |
||||
<template> |
||||
<view class="page"> |
||||
<u-sticky bgColor="#fff"> |
||||
<u-tabs |
||||
@click="getPage" |
||||
:activeStyle="{ |
||||
color: '#9F751F', |
||||
fontWeight: 'bold', |
||||
background:'#eaeaea', |
||||
transform: 'scale(1.05)' |
||||
}" |
||||
:inactiveStyle="{ |
||||
color: '#9F751F', |
||||
transform: 'scale(1)' |
||||
}" |
||||
:list="pagesList"></u-tabs> |
||||
|
||||
</u-sticky> |
||||
<view class="refresh" @click="refrenshHandle"> |
||||
刷新 |
||||
</view> |
||||
<view class="recommend-info"> |
||||
|
||||
<view class="goods-list"> |
||||
<view class="list" v-for="(item,index) in goodsList" @click="onSkip(item)" :key="index"> |
||||
<view class="pictrue"> |
||||
<image :src="item.image" mode="heightFix"></image> |
||||
</view> |
||||
<view class="title-tag"> |
||||
{{item.name}} |
||||
</view> |
||||
<view class="price-info"> |
||||
<view class="user-price"> |
||||
<text class="min">￥</text> |
||||
<text class="max">{{item.price}}</text> |
||||
</view> |
||||
|
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import {getGoodsList} from '@/common/api.js' |
||||
export default { |
||||
data(){ |
||||
return{ |
||||
goodsList:[], |
||||
total:0, |
||||
pagesList: [], |
||||
page:1, |
||||
limit:10, |
||||
} |
||||
}, |
||||
|
||||
methods:{ |
||||
refrenshHandle(){ |
||||
uni.redirectTo({ |
||||
url: '/pages/qianggou/productList?page='+this.page //写你的路径 |
||||
}); |
||||
}, |
||||
getGoodsList(){ |
||||
this.pagesList=[] |
||||
getGoodsList({page:this.page,limit:10}).then(res=>{ |
||||
this.goodsList = res.data.data; |
||||
this.total = res.data.total; |
||||
|
||||
for(let i=0;i<Math.ceil(this.total/10);i++){ |
||||
this.pagesList.push({ |
||||
name:`第${i+1}页` |
||||
}) |
||||
} |
||||
}) |
||||
}, |
||||
getPage(val){ |
||||
this.page=val.index+1; |
||||
this.getGoodsList() |
||||
|
||||
}, |
||||
onSkip(item){ |
||||
uni.navigateTo({ |
||||
url:'/pages/qianggou/productDetails?id='+item.id |
||||
}) |
||||
} |
||||
}, |
||||
onReady() { |
||||
|
||||
}, |
||||
onLoad() { |
||||
this.getGoodsList() |
||||
}, |
||||
onPageScroll(e){ |
||||
|
||||
}, |
||||
onReachBottom(){ |
||||
console.log(12333); |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
.page{ |
||||
padding-bottom: 100rpx; |
||||
position: relative; |
||||
} |
||||
// 9F751F |
||||
.refresh{ |
||||
color:rgb(77, 154, 94); |
||||
padding:20rpx; |
||||
text-align: right; |
||||
position: fixed; |
||||
top:90rpx; |
||||
right:0; |
||||
z-index:9999; |
||||
} |
||||
::v-deep .u-tabs{ |
||||
margin-right:100rpx; |
||||
} |
||||
::v-deep .u-tabs__wrapper__nav__line{ |
||||
display: none; |
||||
} |
||||
::v-deep .u-tabs__wrapper__nav__item__text{ |
||||
font-size: 15px; |
||||
height: 100%; |
||||
color: #606266; |
||||
display: flex; |
||||
align-items: center; |
||||
padding: 0 10px; |
||||
} |
||||
|
||||
.recommend-info{ |
||||
width: 100%; |
||||
background-color: #f2f2f2; |
||||
margin-top:20rpx; |
||||
.goods-list{ |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
justify-content: space-between; |
||||
padding: 0 30rpx; |
||||
.list{ |
||||
width: 49%; |
||||
height: 480rpx; |
||||
margin-bottom: 20rpx; |
||||
background-color: #FFFFFF; |
||||
border-radius: 10rpx; |
||||
overflow: hidden; |
||||
.pictrue{ |
||||
display: flex; |
||||
justify-content: center; |
||||
width: 100%; |
||||
image{ |
||||
height: 350rpx; |
||||
} |
||||
} |
||||
.title-tag{ |
||||
padding: 20rpx; |
||||
|
||||
} |
||||
.price-info{ |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
padding: 0 20rpx; |
||||
.user-price{ |
||||
display: flex; |
||||
align-items: center; |
||||
text{ |
||||
color: $price-clor; |
||||
} |
||||
.min{ |
||||
font-size: 24rpx; |
||||
} |
||||
.max{ |
||||
font-size: 32rpx; |
||||
} |
||||
} |
||||
|
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,195 @@ |
||||
<template> |
||||
<view class="qianggou"> |
||||
<view class="banner"> |
||||
<u-swiper :circular="true" :list="swiperList" :autoplay="true"></u-swiper> |
||||
|
||||
</view> |
||||
<view class="notice"> |
||||
<u-notice-bar :text="text1" :direction="'column'" @click="jump" :mode="'link'" bgColor="transparent" color="#4D9A5E"></u-notice-bar> |
||||
</view> |
||||
<view class="qgList"> |
||||
<view class="qgItem" v-for="(item,index) in list" :key="index"> |
||||
<image :src="baseUrl+item.image" class="bgPic" mode="aspectFill"></image> |
||||
<view class="qgInfo"> |
||||
<view class="conpany"> |
||||
<view class="line"></view> |
||||
<view class="text"> |
||||
{{item.title}} |
||||
</view> |
||||
<view class="line"></view> |
||||
</view> |
||||
<view class="time" @click="goProductList(item)"> |
||||
开放时间：{{item.status!='normal'?'待开放':item.start+'-'+item.end}} |
||||
</view> |
||||
</view> |
||||
|
||||
</view> |
||||
<view class="gobottom"> |
||||
--我也是有底线的-- |
||||
</view> |
||||
<u-toast ref="uToast"></u-toast> |
||||
</view> |
||||
<!-- tabbar --> |
||||
<TabBar :tabBarShow="1"></TabBar> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import {getWarehouseList} from '@/common/api.js' |
||||
import TabBar from '../../components/TabBar/TabBar.vue'; |
||||
export default{ |
||||
components:{ |
||||
TabBar, |
||||
|
||||
}, |
||||
data(){ |
||||
return{ |
||||
swiperList:[ |
||||
'/static/image/banner1.png', |
||||
'/static/image/banner2.png', |
||||
'/static/image/banner3.png' |
||||
], |
||||
text1:[ |
||||
'用户隐私协议','用户注册协议','委托托管协议','用户须知','C2C个人支付风险提示' |
||||
], |
||||
list:[] |
||||
} |
||||
}, |
||||
methods:{ |
||||
jump(val){ |
||||
console.log("7777",val) |
||||
let id=null; |
||||
switch (val){ |
||||
case 0: |
||||
id=2; |
||||
break; |
||||
case 1: |
||||
id=1; |
||||
break; |
||||
case 2: |
||||
id=4; |
||||
break; |
||||
case 3: |
||||
id=3; |
||||
break; |
||||
case 4: |
||||
id=5; |
||||
break; |
||||
} |
||||
uni.navigateTo({ |
||||
url:`/pages/my/richText?id=${id}` |
||||
}) |
||||
}, |
||||
getWarehouseList(){ |
||||
getWarehouseList().then(res=>{ |
||||
console.log(res,) |
||||
this.list = res.data; |
||||
}) |
||||
}, |
||||
goProductList(item){ |
||||
if(item.status=="normal"){ |
||||
if(item.is_allow_access==0){ |
||||
this.$refs.uToast.show({ |
||||
message:'未到抢购时间' |
||||
}) |
||||
}else{ |
||||
uni.navigateTo({ |
||||
url:'/pages/qianggou/productList' |
||||
}) |
||||
} |
||||
}else{ |
||||
this.$refs.uToast.show({ |
||||
message:item.title+'等待开放' |
||||
}) |
||||
return; |
||||
} |
||||
} |
||||
}, |
||||
onLoad(){ |
||||
this.getWarehouseList() |
||||
}, |
||||
onReady() { |
||||
uni.hideTabBar(); |
||||
// #ifdef MP |
||||
uni.setNavigationBarTitle({ |
||||
title: '首页', |
||||
}) |
||||
uni.setNavigationBarColor({ |
||||
frontColor: '#ffffff', |
||||
backgroundColor: 'rgb(221, 190, 127)', |
||||
}) |
||||
// #endif |
||||
}, |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.qianggou{ |
||||
padding:24rpx; |
||||
.banner{ |
||||
height: 260rpx; |
||||
margin-bottom: 10rpx; |
||||
// margin: -200rpx auto 20rpx; |
||||
border-radius: 10rpx; |
||||
overflow: hidden; |
||||
.u-swiper{ |
||||
background-color: #fff !important; |
||||
} |
||||
} |
||||
.qgList{ |
||||
.qgItem{ |
||||
height:286rpx; |
||||
width: 100%; |
||||
position: relative; |
||||
overflow: hidden; |
||||
margin-bottom:20rpx; |
||||
.bgPic{ |
||||
width:100%; |
||||
} |
||||
.qgInfo{ |
||||
position: absolute; |
||||
top: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
left: 0; |
||||
height: 100%; |
||||
width: 100%; |
||||
text-align: center; |
||||
background: rgba(0,0,0,.6); |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
justify-content: center; |
||||
z-index:99; |
||||
.conpany{ |
||||
display: flex; |
||||
align-items: center; |
||||
color: rgb(193, 193, 193);; |
||||
.line{ |
||||
height:4rpx; |
||||
width:100rpx; |
||||
background-color: rgb(193, 193, 193);; |
||||
} |
||||
.text{ |
||||
font-size: 30rpx; |
||||
color: rgb(193, 193, 193); |
||||
margin:0 10rpx; |
||||
} |
||||
} |
||||
.time{ |
||||
font-size: 38rpx; |
||||
color: #fff; |
||||
margin-top: 26px; |
||||
} |
||||
} |
||||
|
||||
} |
||||
} |
||||
} |
||||
.gobottom{ |
||||
color: rgba(165, 165, 165, 0.5); |
||||
font-size: 30rpx; |
||||
margin-top:20rpx; |
||||
text-align: center; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,380 @@ |
||||
<template> |
||||
<view class="page"> |
||||
<view class="head-back"> |
||||
<view class="back" @click="onBack"> |
||||
<text></text> |
||||
</view> |
||||
<view class="title"> |
||||
<text>我的订单</text> |
||||
</view> |
||||
<view class="more-icon"> |
||||
<view class="icon-list"> |
||||
<text class="iconfont icon-fadajing"></text> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<!-- 订单tab --> |
||||
<view class="order-tab"> |
||||
<view class="tab" :class="{'action':OrderType==0}" @click="onOrderTab(0)"> |
||||
<text>全部</text> |
||||
<text class="line"></text> |
||||
</view> |
||||
<view class="tab" :class="{'action':OrderType==1}" @click="onOrderTab(1)"> |
||||
<text>待付款</text> |
||||
<text class="line"></text> |
||||
</view> |
||||
<view class="tab" :class="{'action':OrderType==2}" @click="onOrderTab(2)"> |
||||
<text>待发货</text> |
||||
<text class="line"></text> |
||||
</view> |
||||
<view class="tab" :class="{'action':OrderType==3}" @click="onOrderTab(3)"> |
||||
<text>待收货</text> |
||||
<text class="line"></text> |
||||
</view> |
||||
<view class="tab" :class="{'action':OrderType==4}" @click="onOrderTab(4)"> |
||||
<text>待评价</text> |
||||
<text class="line"></text> |
||||
</view> |
||||
</view> |
||||
<!-- 订单列表 --> |
||||
<view class="order-list"> |
||||
<view class="list" v-for="(item,index) in 10" @click="onOrderList" :key="index"> |
||||
<view class="title-status"> |
||||
<view class="title"> |
||||
<text>下单时间：2020-12-12 18:56</text> |
||||
</view> |
||||
<view class="status"> |
||||
<text>待付款</text> |
||||
<text class="iconfont icon-laji del"></text> |
||||
</view> |
||||
</view> |
||||
<view class="goods-list"> |
||||
<view class="goods"> |
||||
<view class="thumb"> |
||||
<image :src="'/static/img/goods_thumb_0'+(index+1)+'.png'" mode=""></image> |
||||
</view> |
||||
<view class="item"> |
||||
<view class="goods-name"> |
||||
<text class="two-omit">薇妮(Viney)时尚包包女包牛皮单肩包女休闲百搭斜挎包韩版小方包潮(枪色)</text> |
||||
</view> |
||||
<view class="goods-price"> |
||||
<text class="min">￥</text> |
||||
<text class="max">299</text> |
||||
<text class="min">.00</text> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="status-btn"> |
||||
<view class="btn"> |
||||
<text>取消订单</text> |
||||
</view> |
||||
<view class="btn action" @click.stop="onEvaluate"> |
||||
<text>评价</text> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
OrderType: 0, |
||||
}; |
||||
}, |
||||
onLoad(params) { |
||||
console.log(params,"000") |
||||
this.OrderType = params.type; |
||||
}, |
||||
methods:{ |
||||
/** |
||||
* 返回点击 |
||||
*/ |
||||
onBack(){ |
||||
uni.navigateBack(); |
||||
}, |
||||
/** |
||||
* 订单tab点击 |
||||
*/ |
||||
onOrderTab(type){ |
||||
this.OrderType = type; |
||||
// #ifdef H5 |
||||
uni.redirectTo({ |
||||
url: '/pages/MyOrderList/MyOrderList?type=' + type, |
||||
}) |
||||
//#endif |
||||
}, |
||||
/** |
||||
* 订单列表点击 |
||||
*/ |
||||
onOrderList(){ |
||||
uni.navigateTo({ |
||||
url: '/pages/OrderDetails/OrderDetails', |
||||
}) |
||||
}, |
||||
/** |
||||
* 评价点击 |
||||
*/ |
||||
onEvaluate(){ |
||||
uni.navigateTo({ |
||||
url: '/pages/MyEvaluatePush/MyEvaluatePush' |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
.page{ |
||||
position: absolute; |
||||
left: 0; |
||||
top: 0; |
||||
width: 100%; |
||||
height: 100%; |
||||
background-color: #f6f6f6; |
||||
} |
||||
/* 顶部返回 */ |
||||
.head-back{ |
||||
position: fixed; |
||||
left: 0; |
||||
top: 0; |
||||
z-index: 10; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
width: 100%; |
||||
height: 100rpx; |
||||
background-color: #FFFFFF; |
||||
/* #ifdef APP-PLUS */ |
||||
height: calc(50rpx + var(--status-bar-height)); |
||||
padding-top: var(--status-bar-height); |
||||
/* #endif */ |
||||
/* #ifdef MP */ |
||||
height: 150rpx; |
||||
padding-top: 20rpx; |
||||
/* #endif */ |
||||
.back{ |
||||
position: absolute; |
||||
left: 0; |
||||
top: 0; |
||||
/* #ifdef APP-PLUS */ |
||||
padding-top: var(--status-bar-height); |
||||
/* #endif */ |
||||
/* #ifdef MP */ |
||||
padding-top: 20rpx; |
||||
/* #endif */ |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
width: 100rpx; |
||||
height: 100%; |
||||
text{ |
||||
width: 20rpx; |
||||
height: 20rpx; |
||||
border-left: 2rpx solid #555555; |
||||
border-bottom: 2rpx solid #555555; |
||||
transform: rotate(45deg); |
||||
} |
||||
} |
||||
.title{ |
||||
display: flex; |
||||
align-items: center; |
||||
text{ |
||||
font-size: 28rpx; |
||||
color: #222222; |
||||
} |
||||
} |
||||
.more-icon{ |
||||
position: absolute; |
||||
right: 0; |
||||
top: 0; |
||||
/* #ifdef APP-PLUS */ |
||||
right: 0rpx; |
||||
padding-top: var(--status-bar-height); |
||||
/* #endif */ |
||||
/* #ifdef MP */ |
||||
right: 220rpx; |
||||
padding-top: 20rpx; |
||||
/* #endif */ |
||||
display: flex; |
||||
align-items: center; |
||||
height: 100%; |
||||
.icon-list{ |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
width: 80rpx; |
||||
height: 100%; |
||||
text{ |
||||
font-size: 34rpx; |
||||
color: #222222; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
/* 订单tab */ |
||||
.order-tab{ |
||||
position: fixed; |
||||
left: 0; |
||||
top: 100rpx; |
||||
/* #ifdef APP-PLUS */ |
||||
top: calc(50rpx + var(--status-bar-height)); |
||||
/* #endif */ |
||||
z-index: 10; |
||||
display: flex; |
||||
align-items: center; |
||||
width: 100%; |
||||
height: 100rpx; |
||||
background-color: #FFFFFF; |
||||
.tab{ |
||||
position: relative; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
width: 20%; |
||||
height: 80%; |
||||
text{ |
||||
font-size: 26rpx; |
||||
color: #959595; |
||||
} |
||||
} |
||||
.action{ |
||||
text{ |
||||
color: #222222; |
||||
} |
||||
.line{ |
||||
position: absolute; |
||||
left: 50%; |
||||
bottom: 0; |
||||
width: 60rpx; |
||||
height: 6rpx; |
||||
background: linear-gradient(to right,$base,#f6f6f6); |
||||
transform: translate(-50%,0); |
||||
} |
||||
} |
||||
} |
||||
|
||||
/* 订单列表 */ |
||||
.order-list{ |
||||
width: 100%; |
||||
margin-top: 250rpx; |
||||
text-align: center; |
||||
/* #ifdef APP-PLUS */ |
||||
margin-top: calc(170rpx + var(--status-bar-height)); |
||||
/* #endif */ |
||||
.list{ |
||||
padding: 0 4%; |
||||
min-height: 400rpx; |
||||
background-color: #FFFFFF; |
||||
border-radius: 20rpx; |
||||
margin-bottom: 20rpx; |
||||
.title-status{ |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
width: 100%; |
||||
height: 100rpx; |
||||
.title{ |
||||
display: flex; |
||||
align-items: center; |
||||
text{ |
||||
font-size: 26rpx; |
||||
font-weight: bold; |
||||
color: #222222; |
||||
} |
||||
} |
||||
.status{ |
||||
display: flex; |
||||
align-items: center; |
||||
text{ |
||||
font-size: 26rpx; |
||||
color: $base; |
||||
} |
||||
.del{ |
||||
padding: 10rpx; |
||||
font-size: 34rpx; |
||||
color: #222222; |
||||
background-color: #f6f6f6; |
||||
border-radius: 100%; |
||||
margin-left: 20rpx; |
||||
} |
||||
} |
||||
} |
||||
.goods-list{ |
||||
width: 100%; |
||||
.goods{ |
||||
display: flex; |
||||
align-items: center; |
||||
width: 100%; |
||||
height: 200rpx; |
||||
.thumb{ |
||||
display: flex; |
||||
align-items: center; |
||||
width: 30%; |
||||
height: 100%; |
||||
image{ |
||||
width: 160rpx; |
||||
height: 160rpx; |
||||
border-radius: 10rpx; |
||||
} |
||||
} |
||||
.item{ |
||||
display: flex; |
||||
align-items: center; |
||||
width: 70%; |
||||
height: 100%; |
||||
.goods-name{ |
||||
width: 70%; |
||||
text{ |
||||
font-size: 26rpx; |
||||
color: #555555; |
||||
} |
||||
} |
||||
.goods-price{ |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: flex-end; |
||||
width: 30%; |
||||
text{ |
||||
color: #222222; |
||||
} |
||||
.min{ |
||||
font-size: 26rpx; |
||||
} |
||||
.max{ |
||||
font-size: 34rpx; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.status-btn{ |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: flex-end; |
||||
width: 100%; |
||||
height: 100rpx; |
||||
.btn{ |
||||
padding: 10rpx 30rpx; |
||||
border: 2rpx solid #EEEEEE; |
||||
border-radius: 100rpx; |
||||
margin-left: 20rpx; |
||||
text{ |
||||
font-size: 26rpx; |
||||
color: #555555; |
||||
} |
||||
} |
||||
.action{ |
||||
border: 2rpx solid $base; |
||||
text{ |
||||
color: $base; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
|
After Width: | Height: | Size: 49 KiB |
|
After Width: | Height: | Size: 60 KiB |
|
After Width: | Height: | Size: 58 KiB |
Loading…
Reference in new issue