7 changed files with 524 additions and 62 deletions
-
14common/styles/common.css
-
19pages.json
-
162pages/center/index.vue
-
74pages/collect/index.vue
-
71pages/contactService/index.vue
-
25pages/goodsDetail/goodsDetail.vue
-
221pages/goodsDetail/index.vue
@ -0,0 +1,74 @@ |
|||
<template> |
|||
<view> |
|||
<view class="list-box"> |
|||
<view class="lf-row-between list-item" v-for="(item, index) in list" :key="index" hover-class="lf-opacity"> |
|||
<image class="goods-img"></image> |
|||
<view style="width: 480rpx;"> |
|||
<view class="lf-font-32 lf-line-1">网红辣椒棒魔鬼辣椒挑战全网第</view> |
|||
<view class="lf-row-between lf-m-t-20"> |
|||
<view class="lf-flex"> |
|||
<image class="shop-img"></image> |
|||
<view class="lf-m-l-10 lf-font-28 lf-line-1 shop-name">李大叔家的店</view> |
|||
</view> |
|||
<view> |
|||
<u-icon name="heart-fill" color="#ff0f00"></u-icon> |
|||
</view> |
|||
</view> |
|||
<view class="lf-m-t-20 lf-font-24 lf-color-gray">收藏时间 2021-6-17 12:37:54</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- 加载 --> |
|||
<view class="loading-more"> |
|||
<text v-if="list.length" :class="{'loading-more-text': loadingClass}">{{ loadingText }}</text> |
|||
<my-nocontent v-else></my-nocontent> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data(){ |
|||
return { |
|||
list: [1, 2], |
|||
loadingClass: false, |
|||
loadingText: '已显示全部数据~' |
|||
} |
|||
}, |
|||
onLoad(){ |
|||
|
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped="scoped"> |
|||
.list-box{ |
|||
width: 750rpx; |
|||
height: auto; |
|||
padding: 0 32rpx; |
|||
box-sizing: border-box; |
|||
.list-item{ |
|||
border-bottom: 1rpx solid #EEEEEE; |
|||
padding: 30rpx 0; |
|||
.goods-img{ |
|||
width: 180rpx; |
|||
height: 180rpx; |
|||
border-radius: 20rpx; |
|||
background-color: #EEEEEE; |
|||
} |
|||
.shop-img{ |
|||
width: 60rpx; |
|||
height: 60rpx; |
|||
border-radius: 10rpx; |
|||
background-color: #EEEEEE; |
|||
} |
|||
.shop-name{ |
|||
width: 340rpx; |
|||
color: #555555; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,71 @@ |
|||
<template> |
|||
<view class="content"> |
|||
<view class="lf-row-between item"> |
|||
<view class="lf-color-gray">在线客服</view> |
|||
<button class="btn" open-type="contact">在线联系</button> |
|||
</view> |
|||
<view class="lf-row-between item"> |
|||
<view class="lf-color-gray">服务时间</view> |
|||
<view>10:00～20:00</view> |
|||
</view> |
|||
<view class="lf-row-between item"> |
|||
<view class="lf-color-gray">客服电话</view> |
|||
<view>13278683790</view> |
|||
</view> |
|||
<view class="lf-row-between item"> |
|||
<view class="lf-color-gray">联系地址</view> |
|||
<view>南宁市青秀区汇东国际F座6楼</view> |
|||
</view> |
|||
<view class="lf-row-between item"> |
|||
<view class="lf-color-gray">客服微信</view> |
|||
<view> |
|||
<text>whhu8798</text> |
|||
<text class="lf-m-l-20 lf-color-primary">复制</text> |
|||
</view> |
|||
</view> |
|||
<view class="lf-row-between item"> |
|||
<view class="lf-color-gray">当前版本</view> |
|||
<view>1.0.1</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data(){ |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
onLoad(){ |
|||
|
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped="scoped"> |
|||
.content{ |
|||
width: 750rpx; |
|||
height: auto; |
|||
padding: 0 32rpx; |
|||
box-sizing: border-box; |
|||
.item{ |
|||
width: 100%; |
|||
height: 104rpx; |
|||
border-bottom: 1rpx solid #EEEEEE; |
|||
.btn{ |
|||
margin: 0; |
|||
width: 176rpx; |
|||
height: 60rpx; |
|||
background: #FE9903; |
|||
border-radius: 30rpx; |
|||
color: #FFFFFF; |
|||
font-size: 28rpx; |
|||
line-height: 60rpx; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,25 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data(){ |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
onLoad(){ |
|||
|
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped="scoped"> |
|||
|
|||
</style> |
|||
@ -0,0 +1,221 @@ |
|||
<template> |
|||
<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> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data(){ |
|||
return { |
|||
current: 0 // 轮播下标 |
|||
} |
|||
}, |
|||
onLoad(){ |
|||
|
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
page{ |
|||
background-color: #f5f5f5; |
|||
overflow-x: hidden; |
|||
} |
|||
</style> |
|||
<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> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue