用户登录流程开发接口对接
This commit is contained in:
唐明明
264
pages/goods/details.vue
Normal file
264
pages/goods/details.vue
Normal file
@@ -0,0 +1,264 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<!-- 轮播主图 -->
|
||||
<view class="goods-covers">
|
||||
<swiper class="swiper">
|
||||
<swiper-item>
|
||||
<image class="swiper-item" src="https://yanxuan-item.nosdn.127.net/b3cc0eadfe8581b8bc86f428b18a5ea8.png" mode="aspectFill"/>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<image class="swiper-item" src="https://yanxuan-item.nosdn.127.net/a7f8652eeecb2c0e1915120b1d986510.png" mode="aspectFill"/>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<image class="swiper-item" src="https://yanxuan-item.nosdn.127.net/afb05e6fc75e7476729146214450f0ae.png" mode="aspectFill"/>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
<!-- 产品详情 -->
|
||||
<view class="goods-content">
|
||||
<view class="header">
|
||||
<view class="title">谷风一木3层软抽面巾纸 6包/提</view>
|
||||
<view class="sub-title">进口原木浆 和风高颜值</view>
|
||||
<view class="flex-box">
|
||||
<view class="price"><text>￥</text>100.00</view>
|
||||
<view class="sales">累计易货10次</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 商家信息 -->
|
||||
<view class="store">
|
||||
<view class="title">宜家哈尔滨旗舰店</view>
|
||||
<image class="logo" src="@/static/dev/good_cover_06.jpg" mode="aspectFill"></image>
|
||||
<view class="rate">
|
||||
<uni-rate
|
||||
:readonly="true"
|
||||
color="#ddd"
|
||||
active-color="#c82626"
|
||||
:value="2.5"
|
||||
:size="14"
|
||||
/>
|
||||
</view>
|
||||
<view class="openbtn">进店</view>
|
||||
</view>
|
||||
<!-- 产品规格 -->
|
||||
<view class="size">
|
||||
<view class="size-item nowrap">
|
||||
<label class="title">产品规格</label>
|
||||
17个功能分区，理性展现
|
||||
</view>
|
||||
<view class="size-item nowrap">
|
||||
<label class="title">限制</label>
|
||||
特价商品不可与优惠券叠加使用
|
||||
</view>
|
||||
<view class="size-item nowrap">
|
||||
<label class="title">服务</label>
|
||||
易货严选自营･30天无忧退换･不可用券･国内部分地区不可配送
|
||||
</view>
|
||||
</view>
|
||||
<!-- 产品详情 -->
|
||||
<view class="product">
|
||||
<image src="https://yanxuan-item.nosdn.127.net/15b6eb17fd2dfc10824d19262d579115.jpg" mode="widthFix"></image>
|
||||
<image src="https://yanxuan-item.nosdn.127.net/64bba3712d2de3afbd01209ddc8a144c.jpg" mode="widthFix"></image>
|
||||
<image src="https://yanxuan-item.nosdn.127.net/e361196cfdc93e697214cb8b73715d7b.jpg" mode="widthFix"></image>
|
||||
<image src="https://yanxuan-item.nosdn.127.net/b508dcfc9b597e0563fb9703084df968.jpg" mode="widthFix"></image>
|
||||
<image src="https://yanxuan-item.nosdn.127.net/47aea2602cdc2d74f7c1470845b10228.jpg" mode="widthFix"></image>
|
||||
<image src="https://yanxuan-item.nosdn.127.net/47aea2602cdc2d74f7c1470845b10228.jpg" mode="widthFix"></image>
|
||||
<image src="https://yanxuan-item.nosdn.127.net/a93ea06bab7212b3d09b58a4ef6ef992.jpg" mode="widthFix"></image>
|
||||
<image src="https://yanxuan-item.nosdn.127.net/48062fd41ab8345e4d89dcc9ae882a83.jpg" mode="widthFix"></image>
|
||||
<image src="https://yanxuan-item.nosdn.127.net/c6144d9afbfa23dae5127d71b27f9286.jpg" mode="widthFix"></image>
|
||||
<image src="https://yanxuan-item.nosdn.127.net/d36cbe3e7a3a51ad5809ace03a2ec11a.jpg" mode="widthFix"></image>
|
||||
<image src="https://yanxuan-item.nosdn.127.net/55152a8961ac3e4315bf0e9078c201de.jpg" mode="widthFix"></image>
|
||||
<image src="https://yanxuan-item.nosdn.127.net/e1daf70033b4a560ea3a163b7b2901ba.jpg" mode="widthFix"></image>
|
||||
<image src="https://yanxuan-item.nosdn.127.net/86a0fa00f375e4b266a528d2c4cc35fd.jpg" mode="widthFix"></image>
|
||||
<image src="https://yanxuan-item.nosdn.127.net/71bac1bfd70aeb8d6b97eae4f4d4af67.jpg" mode="widthFix"></image>
|
||||
<image src="https://yanxuan-item.nosdn.127.net/2a536f0650b2a2cbb53373e758f0439e.jpg" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
<!-- footer -->
|
||||
<view class="footer">
|
||||
<button class="btn" size="default">立即购买</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content{
|
||||
position: relative;
|
||||
padding-top: 100%;
|
||||
|
||||
}
|
||||
// 轮播图
|
||||
.goods-covers{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
background: #3F536E;
|
||||
width: 100%;
|
||||
padding-top: 100%;
|
||||
.swiper{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.swiper-item{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 商品详情
|
||||
.goods-content{
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
background-color: white;
|
||||
margin-top: -$margin;
|
||||
border-radius: $radius $radius 0 0;
|
||||
padding-bottom: calc((#{$padding} * 2) + (env(safe-area-inset-bottom) / 2) + 90rpx);
|
||||
padding-bottom: calc((#{$padding} * 2) + (constant(safe-area-inset-bottom) / 2) + 90rpx);
|
||||
// 详情
|
||||
.header{
|
||||
padding: ($padding*2) $padding $padding;
|
||||
.title{
|
||||
font-size: $title-size;
|
||||
font-weight: bold;
|
||||
line-height: 50rpx;
|
||||
}
|
||||
.sub-title{
|
||||
line-height: 40rpx;
|
||||
font-size: $title-size-sm;
|
||||
color: $text-gray;
|
||||
padding-bottom: $padding/3;
|
||||
}
|
||||
.flex-box{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
line-height: 90rpx;
|
||||
.price{
|
||||
font-weight: bold;
|
||||
color: $text-price;
|
||||
font-size: $title-size + 14;
|
||||
text{
|
||||
font-size: 70%;
|
||||
}
|
||||
width: calc(60% - #{$padding});
|
||||
}
|
||||
.sales{
|
||||
font-size: $title-size-sm;
|
||||
color: $text-gray;
|
||||
width: 40%;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 店铺
|
||||
.store{
|
||||
position: relative;
|
||||
margin: 0 $margin;
|
||||
background: #F8F8F8;
|
||||
border-radius: $radius/2;
|
||||
padding: $padding 200rpx $padding (118rpx + $padding);
|
||||
min-height: 98rpx;
|
||||
.logo{
|
||||
position: absolute;
|
||||
left: $margin;
|
||||
top: $margin;
|
||||
width: 98rpx;
|
||||
height: 98rpx;
|
||||
border-radius: $radius/2;
|
||||
}
|
||||
.title{
|
||||
font-size: $title-size-lg;
|
||||
font-weight: bold;
|
||||
line-height: 60rpx;
|
||||
color: $text-color;
|
||||
}
|
||||
// rate
|
||||
.openbtn{
|
||||
width: 140rpx;
|
||||
position: absolute;
|
||||
right: $margin;
|
||||
top: 50%;
|
||||
background: $text-price;
|
||||
color: white;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
text-align: center;
|
||||
font-size: $title-size-m;
|
||||
margin-top: -30rpx;
|
||||
}
|
||||
}
|
||||
// 产品规格
|
||||
.size{
|
||||
margin-top: $margin;
|
||||
border-top: solid 20rpx #F8F8F8;
|
||||
border-bottom: solid 20rpx #F8F8F8;
|
||||
.size-item{
|
||||
position: relative;
|
||||
padding: 0 $padding 0 ($padding + 150);
|
||||
line-height: 90rpx;
|
||||
font-size: $title-size-m;
|
||||
&::after{
|
||||
position: absolute;
|
||||
left: $margin;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
content: " ";
|
||||
height: 1rpx;
|
||||
background-color: $border-color;
|
||||
}
|
||||
&:last-child::after{
|
||||
display: none;
|
||||
}
|
||||
.title{
|
||||
position: absolute;
|
||||
left: $margin;
|
||||
top: 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 产品详情
|
||||
.product{
|
||||
image{
|
||||
vertical-align: top;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 立即购买
|
||||
.footer{
|
||||
padding: $padding;
|
||||
background: white;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 99;
|
||||
box-sizing: border-box;
|
||||
.btn[size='default']{
|
||||
width: 100%;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
box-sizing: border-box;
|
||||
background: $text-price;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
font-size: $title-size;
|
||||
margin-bottom: calc(env(safe-area-inset-bottom) / 2);
|
||||
margin-bottom: calc(constant(safe-area-inset-bottom) / 2);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user