Skip to content

肖康 / H5_2.0

Go to a project
Commit f4c955f7 by 肖康
Options

详情页

parent b3eec796
Inline Side-by-side
Showing with 426 additions and 1 deletions
assets/css/detail/detail.scss
.detailpage{
padding-top: 88rpx;
padding-bottom: 274rpx;
.detailhead{
height:88rpx;
width:100%;
......@@ -20,5 +21,301 @@
font-size: 44rpx;
}
}
.detailinfo{
background: linear-gradient(90deg, #93CDFF 0%, #1969F9 100%);
.cons{
border-radius: 10rpx 10rpx 0px 0px;
background: linear-gradient(180deg, #F0F6FF 0%, #FFFFFF 100%);
.tits{
height:112rpx;
margin: auto 24rpx;
border-bottom: 1rpx solid #F0F0F2;
.goodsName{
max-width: 450rpx;
font-size: 34rpx;
font-weight: 600;
color: $uni-color333;
text-align: center;
}
.actag{
height: 28rpx;
padding: 0 10rpx;
line-height: 28rpx;
background: #FF3700;
border-radius: 0px 14rpx 14rpx 0px;
color:#fff;
font-size: 20rpx;
margin-left: 16rpx;
}
.tdbox{
width: 120rpx;
height: 40rpx;
background: #E0EDFF;
border-radius: 20rpx;
font-size: 22rpx;
color:$uni-coloract;
.round{
width:40rpx;
height:40rpx;
border-radius: 40rpx;
background:$uni-coloract;
color:#fff;
font-size: 32rpx;
font-weight: normal;
margin-right: 8rpx;
}
}
}
.attrbox{
padding:27rpx 24rpx;
.atl{
font-size: 24rpx;
color: $uni-color999;
line-height: 33rpx;
.item{
margin-bottom: 10rpx;
text{
color:$uni-color666;width:358rpx;line-height: 33rpx;
&.stock{color:$uni-coloract;}
}
}
}
.atr{
image{
width: 220rpx;
height: 220rpx;
margin-bottom: 24rpx;
}
a{
width: 220rpx;
height: 48rpx;
background: #F0F6FF;
border-radius: 6rpx;
color:$uni-coloract;
font-size: 22rpx;
.icon{
font-size: 32rpx;
margin-right: 4rpx;
}
}
}
}
.pricebox{
.headprice{
height: 73rpx;
background: #F0F6FF;
border-radius: 10px 10px 0px 0px;
font-size: 24rpx;
font-weight: 600;
color: $uni-color666;
}
.ptiem{flex:3;box-sizing: border-box;padding:0 24rpx;}
.ptiemone{flex:2}
.bodyprice{
padding-top: 10px;
padding-bottom: 24rpx;
border-bottom: 1rpx solid #F0F0F2;
.pricegroup{
color: $uni-color999;
font-size: 24rpx;
height: 41rpx;
line-height: 41rpx;
&.act{
background: #FFF8F2;
font-weight: 600;
color:$uni-colorwarning;
}
}
}
.morebtn{
height:81rpx;
margin:0 auto;
width:190rpx;
font-size: 24rpx;
color:$uni-coloract;
.icon{margin-left: 12rpx;font-size: 32rpx;}
}
.noprice{
font-size: 24rpx;
color:$uni-color999;
padding-top:46rpx;
padding-bottom: 46rpx;
text-align: center;
.icon{
color:#C2C4CC;
font-size: 36rpx;
margin-right: 6rpx;
position: relative;
top:5rpx;
}
}
}
}
}
.seoattr{
padding:24rpx;
padding-top:0rpx;
margin-top: 16px;
background: #FFFFFF;
border-radius: 10px 10px 0px 0px;
padding-bottom: 32rpx;
.tio{
font-size: 28rpx;
font-weight: 500;
color: $uni-color333;
height:88rpx;
.icon{
font-size: 40rpx;
color:$uni-color999;
}
}
.cons{
border: 1rpx solid #C6C7CC;
.groups{
font-size: 24rpx;
color: $uni-color999;
border-bottom: 1rpx solid #C6C7CC;
&:last-child{border:0rpx;}
text{
padding:10rpx 20rpx;
flex:2;
line-height: 33rpx;
&.one1{
flex:1;
border-right:1rpx solid #C6C7CC;
}
}
}
}
}
.pagebot{
height: 62rpx;
line-height: 62rpx;
background: #F5F5F7;
font-size: 22rpx;
text-align: center;
color:#C6C7CC;
}
.detailfoot{
width: 100%;
height: 274rpx;
background: #FFFFFF;
box-shadow: 0px -4px 20px 0px rgba(198,199,204,0.1);
border-radius: 10px 10px 0px 0px;
position: fixed;
z-index: 1;
bottom:0rpx;
left:0rpx;
box-sizing: border-box;
padding:0 24rpx;
font-size: 24rpx;
font-weight: 400;
color:$uni-color666;
.foo1{
height:88rpx;
border-bottom: 1rpx solid #F0F0F2;
.hqitem{
margin-right: 18rpx;
}
.checkbox{
display: inline-block;
width:32rpx;
height:32rpx;
background: #fff;
border-radius: 32rpx;
border:2rpx solid #c2c4cc;
margin-right: 8rpx;
margin-left: 48rpx;
.icon{display: none;color:$uni-coloract;}
&.checked{
border:0rpx;
line-height: 32rpx;
.icon{display: inline;}
}
}
}
.foo2{
height:88rpx;
border-bottom: 1rpx solid #F0F0F2;
.f9{color:$uni-color999;}
.ml24{margin-left: 24rpx;}
.pr{
width: 222rpx;
height: 56rpx;
margin-right: 40rpx;
background: #FFFFFF;
border-radius:8rpx;
border: 2rpx solid $uni-coloract;
color:$uni-color666;
text{
color:$uni-coloract;
height:54rpx;
text-align: center;
line-height: 50rpx;
width:56rpx;
font-weight: bold;
font-size: 40rpx;
}
input{
font-size: 24rpx;
width:110rpx;
height:54rpx;
text-align: center;
line-height: 54rpx;
border-left:1rpx solid $uni-coloract;
border-right:1rpx solid $uni-coloract;
}
}
}
.btnbox{
height:88rpx;
margin-top: 7rpx;
.totalpricebox{
height:88rpx;
.hej{
height: 68rpx;
line-height: 68rpx;
font-size: 24rpx;
.tje{
color:$uni-colorwarning;
font-size: 32rpx;
font-weight: 600;
}
}
.addcarbtn{
width: 300rpx;
height: 68rpx;
line-height: 68rpx;
text-align: center;
background: $uni-coloract;
border-radius: 10rpx;
font-size: 28rpx;
color:#fff;
}
}
.kfbtn{
margin-top: 19rpx;
display: block;
height: 68rpx;
line-height: 50rpx;
background: #FFFFFF;
border-radius: 10rpx;
border: 1rpx solid $uni-coloract;
color:$uni-coloract;
text-align: center;
.icon{font-size: 44rpx;margin-right: 12rpx;position: relative;top:5rpx;}
}
}
}
}
\ No newline at end of file
pages/detail/detail.vue
......@@ -7,7 +7,134 @@
<text class="icon iconfont icon-car"></text>
</navigator>
</view>
da
<view class="detailinfo">
<view class="cons">
<view class="tits row verCenter bothSide">
<view class="row verCenter">
<text class="goodsName elep">lm358asda</text>
<text class="actag">91折</text>
</view>
<view class="tdbox row verCenter">
<view class="round row verCenter rowCenter"><text class="icon iconfont icon-tdzty"></text></view>
<text>可替代</text>
</view>
</view>
<view class="attrbox row">
<view class="atl">
<view class="item row">品牌：<text class="">Rice Lake Weighing</text></view>
<view class="item row">供应商：<text class="">Rice Lake Weighing</text></view>
<view class="item row">封装：<text class="">Rice Lake Weighing</text></view>
<view class="item row">包装：<text class="">Rice Lake Weighing</text></view>
<view class="item row">ECCN：<text class="">Rice Lake Weighing</text></view>
<view class="item row">库存：<text class="stock">500</text></view>
<view class="item row">类别：<text class="">Rice Lake Weighing</text></view>
</view>
<view class="atr">
<image src="https://img.ichunt.com/images/cms/202304/07/9ecd831432bc35dcd9bac28a0136e57d.png"></image>
<a href="" target="_blank" class="row rowCenter verCenter">
<text class="icon iconfont icon-down"></text>
<text>下载数据手册</text>
</a>
</view>
</view>
<view class="pricebox">
<view class="headprice row verCenter">
<view class="ptiem ptiemone">阶梯</view>
<view class="ptiem">大陆交货(含税)</view>
<view class="ptiem">香港交货</view>
</view>
<view class="bodyprice">
<view class="pricegroup row">
<view class="ptiem ptiemone">5000+：</view>
<view class="ptiem">￥140.425</view>
<view class="ptiem">$17.2125</view>
</view>
<view class="pricegroup row">
<view class="ptiem ptiemone">5000+：</view>
<view class="ptiem">￥140.425</view>
<view class="ptiem">$17.2125</view>
</view>
<view class="pricegroup row act">
<view class="ptiem ptiemone">5000+：</view>
<view class="ptiem">￥140.425</view>
<view class="ptiem">$17.2125</view>
</view>
<view class="pricegroup row">
<view class="ptiem ptiemone">5000+：</view>
<view class="ptiem">￥140.425</view>
<view class="ptiem">$17.2125</view>
</view>
</view>
<view class="morebtn row verCenter">
<text>更少阶梯价格</text>
<text class="icon iconfont icon-arrtop"></text>
</view>
<view class="noprice" style="display:none;">
<text class="icon iconfont icon-sanjiaoji"></text>
暂无阶梯价格
</view>
</view>
</view>
</view>
<view class="seoattr">
<view class="tio row bothSide verCenter">
<text>参数</text>
<text class="icon iconfont icon-arrtop"></text>
</view>
<view class="cons">
<view class="groups row">
<text class="one1">封装规格：</text>
<text>0603</text>
</view>
<view class="groups row">
<text class="one1">封装规格：</text>
<text>0603</text>
</view>
<view class="groups row">
<text class="one1">封装规格：</text>
<text>0603</text>
</view>
<view class="groups row">
<text class="one1">介绍：</text>
<text>ad上帝发誓法师法师地方上帝发誓法师法师地方上帝发誓法师法师地方上帝发誓法师法师地方上帝发誓法师法师地方上帝发誓法师法师地方上帝发誓法师法师地方</text>
</view>
</view>
</view>
<view class="pagebot">—— 已经到底了 ——</view>
<view class="detailfoot">
<view class="foo1 row bothSide verCenter">
<view>交期：</view>
<view class="row">
<view class="row hqitem">
<text class="checkbox checked"><text class="icon iconfont icon-xzs"></text></text>
<text>大陆3-5日</text>
</view>
<view class="row hqitem">
<text class="checkbox"></text>
<text>香港3-5日</text>
</view>
</view>
</view>
<view class="foo2 row bothSide verCenter">
<view>数量：<text class="f9">(起订量:</text>400 <text class="f9 ml24">递增量:</text>1<text class="f9">)</text></view>
<view class="pr row " >
<text>-</text>
<input type="number" value="1"/>
<text>+</text>
</view>
</view>
<view class="btnbox">
<view class="totalpricebox row bothSide verCenter" >
<view class="hej">合计：<text class="tje">¥3235.6856</text></view>
<view class="addcarbtn">加入购物车</view>
</view>
<a class="kfbtn" style="display:none">
<text class="icon iconfont icon-qq"></text>
联系客服
</a>
</view>
</view>
</view>
</template>
......
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 sign in to comment