Leadfyy.co
/
uniapp-shikongwang
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

完成商品详情页UI

master
LAPTOP-D7TKRI82\邓 4 years ago
parent
66bcded632
commit
723e8652ad
3 changed files with 204 additions and 7 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      common/styles/common.css
  2. 3
      pages.json
  3. 200
      pages/goodsDetail/goodsDetail.vue

8
common/styles/common.css
View File

@ -280,11 +280,11 @@ radio:not([disabled]) .wx-radio-input:hover checkbox:not([disabled]) .wx-checkbo
} }
.lf-color-primary { .lf-color-primary {
color: #FA4427 !important;
color: #FE9903 !important;
} }
.lf-bg-primary { .lf-bg-primary {
background: #FA4427 !important;
background: #FE9903 !important;
} }
.lf-color-secondary { .lf-color-secondary {
@ -312,11 +312,11 @@ radio:not([disabled]) .wx-radio-input:hover checkbox:not([disabled]) .wx-checkbo
} }
.lf-color-gray { .lf-color-gray {
color: #656565 !important;
color: #777777 !important;
} }
.lf-bg-gray { .lf-bg-gray {
background: #656565 !important;
background: #777777 !important;
} }
.lf-color-999{ .lf-color-999{

3
pages.json
View File

@ -25,7 +25,8 @@
{ {
"path": "pages/goodsDetail/goodsDetail", "path": "pages/goodsDetail/goodsDetail",
"style": { "style": {
"navigationBarTitleText": "商品详情"
"navigationBarTitleText": "商品详情",
"backgroundColor": "#F5F5F5"
} }
} }
], ],

200
pages/goodsDetail/goodsDetail.vue
View File

@ -1,6 +1,79 @@
<template> <template>
<view> <view>
<!-- 商品图片轮播 -->
<swiper :current="current" :indicator-dots="true" :circular="true" class="swiper-box">
<swiper-item>
<image src="../../static/tu.png" style="width: 100%; height: 100%;"></image>
</swiper-item>
<swiper-item>
<image src="../../static/tu.png" style="width: 100%; height: 100%;"></image>
</swiper-item>
</swiper>
<!-- 商品主要信息 -->
<view class="head-info">
<view class="lf-font-40">网红辣椒棒 魔鬼辣椒挑战全网第一辣 网红优惠季 网红优惠季 网红优惠季 </view>
<view class="lf-row-between lf-font-24 lf-m-t-30 lf-p-b-20">
<view class="lf-flex price">
<view>¥ 19.90</view>
<view>¥ 39.00</view>
<view>2.9折</view>
</view>
<view>
<view class="lf-color-gray">已售4.5万份</view>
<view class="lf-color-primary">库存仅剩98份</view>
</view>
</view>
<view class="label-box">
<view class="label-item">过期退</view>
<view class="label-item">满减优惠</view>
<view class="label-item">信用付</view>
</view>
</view>
<!-- 地址信息 -->
<view class="address-box">
<view class="lf-font-32 lf-font-bold">适用门店</view>
<view class="lf-m-t-20 lf-row-between">
<view class="lf-flex">
<image class="lf-fle shop-img" src="../../static/tu.png"></image>
<view class="lf-font-32 lf-m-l-20" style="max-width: 512rpx;">李大叔家的店的店的店的店的店</view>
</view>
<u-icon name="phone" color="#3A62FF" size="46"></u-icon>
</view>
<view class="lf-flex lf-m-t-20">
<u-icon name="map-fill" size="60"></u-icon>
<view class="lf-m-l-20 lf-font-32">南宁市青秀区 金湖广场 金浦路 地铁1号线A出口 右转200米</view>
</view>
</view>
<!-- 商品详情 -->
<view class="goods-detail">
<view class="lf-font-32 lf-font-bold lf-m-b-20">商品详情</view>
<image class="goods-img" src="../../static/tu.png"></image>
<image class="goods-img" src="../../static/tu.png"></image>
</view>
<!-- 修饰专用 -->
<view class="extra"></view>
<!-- 吸底操作按钮 -->
<view class="lf-row-between fixed-bottom">
<view class="lf-flex lf-p-t-10 lf-p-b-10">
<view class="lf-flex-column lf-row-center icon-item">
<u-icon name="home" size="50"></u-icon>
<view class="lf-m-t-1">首页</view>
</view>
<view class="lf-flex-column lf-row-center icon-item">
<u-icon name="server-fill" size="50"></u-icon>
<view class="lf-m-t-1">客服</view>
</view>
<view class="lf-flex-column lf-row-center icon-item">
<u-icon name="heart" size="50"></u-icon>
<view class="lf-m-t-1">收藏</view>
</view>
<view class="lf-flex-column lf-row-center icon-item">
<u-icon name="share" size="50"></u-icon>
<view class="lf-m-t-1">分享</view>
</view>
</view>
<button class="btn">立即抢购</button>
</view>
</view> </view>
</template> </template>
@ -8,7 +81,7 @@
export default { export default {
data(){ data(){
return { return {
current: 0 // 轮播下标
} }
}, },
onLoad(){ onLoad(){
@ -20,6 +93,129 @@
} }
</script> </script>
<style>
page{
background-color: #f5f5f5;
overflow-x: hidden;
}
</style>
<style lang="scss" scoped="scoped"> <style lang="scss" scoped="scoped">
.swiper-box{
width: 750rpx;
height: 520rpx;
background-color: #FFFFFF;
}
.head-info{
width: 750rpx;
height: auto;
box-sizing: border-box;
padding: 0 32rpx;
padding-top: 20rpx;
background-color: #FFFFFF;
.price>view:nth-of-type(1){
color: #FF0000;
font-size: 40rpx;
margin-right: 22rpx;
}
.price>view:nth-of-type(2){
text-decoration: line-through;
color: #777777;
margin-right: 22rpx;
}
.price>view:nth-of-type(3){
width: max-content;
padding: 0 18rpx;
height: 46rpx;
background-color: #FE9903;
border-radius: 10rpx;
display: flex;
justify-content: center;
align-items: center;
color: #FFFFFF;
}
.label-box{
min-height: 130rpx;
width: 100%;
border-top: 1rpx solid #E5E5E5;
display: flex;
flex-wrap: wrap;
padding: 30rpx 0 10rpx 0;
.label-item{
width: 156rpx;
height: 70rpx;
border-radius: 10rpx;
border: 2rpx solid #FE9903;
display: flex;
justify-content: center;
align-items: center;
font-size: 28rpx;
color: #FE9903;
margin-right: 20rpx;
margin-bottom: 20rpx;
}
}
}
.address-box{
width: 750rpx;
height: auto;
box-sizing: border-box;
background-color: #FFFFFF;
padding: 32rpx;
margin-top: 20rpx;
.shop-img{
width: 60rpx;
height: 60rpx;
border-radius: 10rpx;
}
}
.goods-detail{
width: 750rpx;
height: auto;
background-color: #FFFFFF;
padding: 32rpx;
box-sizing: border-box;
margin-top: 20rpx;
.goods-img{
width: 100%;
}
}
.extra{
width: 100%;
height: 120rpx;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
box-sizing: content-box;
}
.fixed-bottom{
position: fixed;
bottom: 0;
left: 0;
background-color: #FFFFFF;
width: 100%;
height: auto;
padding: 0 32rpx;
border-top: 1rpx solid #e5e5e5;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
.icon-item{
padding: 0 10rpx;
margin-right: 16rpx;
}
.btn{
margin: 0;
padding: 0;
width: 208rpx;
height: 80rpx;
background-color: #FE9903;
color: #FFFFFF;
line-height: 80rpx;
font-size: 32rpx;
border-radius: 42rpx;
}
}
</style> </style>
Write Preview
Loading…
Cancel
Save