<view class="container"> <!-- 轮播图片 --> <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" class="banner"> <block wx:for="{{imgMsg}}"> <swiper-item> <image src="{{item.imgUrl}}"/> </swiper-item> </block> </swiper><!-- 轮播图片end --> <!-- 商品信息 --> <view class="proMsg"> <view class="proName"> Canmake缤纷糖果保湿唇彩 唇蜜 01经典粉色 </view> <text class="price">¥555.00</text> <view class="salse"> <view class="left">3人在卖</view> <view class="middle">已出售:2</view> <view class="right">运费:免运费</view> </view> </view><!-- 商品信息end --> <!-- 店家信息 --> <view class="shopMsg"> <view class="shopMsg_top"> <view class="shop_pho"> <image src="http://ojhq3mgil.bkt.clouddn.com/478/20161227/201612271616015049.jpg"></image> </view> <view class="shopMsg_right"> <view class="shopName"> <view>上善若水</view> <view class="shop_leve"><image src="../../images/member_bg02.png"></image><text>1</text></view> <view>☆</view> </view> <view class="shopLabel"> <image src="http://ojhq3mgil.bkt.clouddn.com/admin/20161028/201610281822325408.jpg"></image> </view> </view> </view> <view class="shopMsg_middle"> <view><view>38</view>商品数</view> <view class="fx_num"><view>20</view>分销会员</view> <view><view>13</view>关注数</view> </view> <view class="shopMsg_bottom"> <button plain="{{true}}"><image src="../../images/icon_follow.png"></image>关注店铺</button> <button plain="{{true}}"><image src="../../images/icon_shop.png"></image>进店逛逛</button> </view> </view> <!-- 店家信息end --> <!-- 热销产品 --> <view class="hot_product"> <view><image src="../../images/line.png"></image></view> <view>热销产品</view> <view><image src="../../images/line02.png"></image></view> </view> <!-- 图文详情 --> <view class="hot_product"> <view><image src="../../images/line.png"></image></view> <view>图文详情</view> <view><image src="../../images/line02.png"></image></view> </view> <view class="details_pic"> <view> <image mode="widthFix" src="http://ojhq3mgil.bkt.clouddn.com/web/497/20161230/201612301544571865.jpg"></image> </view> <view> <image mode="widthFix" src="http://ojhq3mgil.bkt.clouddn.com/web/497/20161230/201612301545018473.jpg"></image> </view> <view> <image mode="widthFix" src="http://ojhq3mgil.bkt.clouddn.com/web/497/20161230/201612301545049022.jpg"></image> </view> </view> <view class="bottom_item_wrap"> <view class="bottom_item"> <view class="icon_service"> <image src="../../images/icon_service.png"></image> </view> <view class="bottom_item_right"> <view class="btn" bindtap="isShow">加入购物车</view> <view class="buy_btn btn">立即购买</view> </view> </view> </view> <block wx:if="{{isShow}}"> <view class="add_item_show"> <view class="buy_cont"> <view class="shopcar"> <view class="shopcar_top"> <view class="pro_pic"> <image src="http://ojhq3mgil.bkt.clouddn.com/web/497/20161230/201612301544193344.jpg"></image> </view> <view class="kucun"> <view class="price">¥132.00</view> <view>库存120件</view> </view> <view class="close" bindtap="isClose">×</view> </view> <view class="num"> <view class="sl">数量:</view> <view class="buynum"> <view class="disnum" data-alpha-beta="0" bindtap="changeNum">-</view> <view class="nownum">{{buynum}}</view> <view class="addnum" data-alpha-beta="1" bindtap="changeNum">+</view> </view> </view> </view> <view class="true_btn">确认</view> </view> </view> </block> </view> |
.container{ margin-bottom: 65px; } .banner{ width: 100%; height: 600rpx; } .banner image{ width: 100%; height: 100%; } .proMsg{ background-color: white; } .proMsg .proName{ padding: 10rpx 20rpx; font-size: 28rpx; line-height: 30rpx; color: #333; } .proMsg .price{ color: #ff6662; font-size: 36rpx; margin-left: 20rpx; line-height: 80rpx; } .proMsg .salse{ display: flex; padding: 10rpx 20rpx; text-align: center; border: 1rpx solid #f3f3f3; font-size: 28rpx; color: #888888; line-height: 80rpx; } .proMsg .salse view{ width: 33.33%; } .proMsg .salse .middle{ border-left: 1rpx solid #f3f3f3; border-right: 1rpx solid #f3f3f3; } /*店铺信息*/ .shopMsg{ background-color: white; padding: 20rpx 20rpx; margin: 10rpx auto; } .shopMsg_top{ display: flex; } .shopMsg_top .shop_pho{ width: 100rpx; height: 100rpx; } .shopMsg_top .shop_pho image{ width: 100%; height: 100%; border-radius: 50%; } .shopMsg_right{ flex:1; padding:10rpx 0rpx 0 20rpx; } .shopMsg_right .shopName{ font-size: 24rpx; display: flex; } .shopMsg_right .shopName .shop_leve{ width: 60rpx; height: 30rpx; position: relative; margin: 0 10rpx; } .shopMsg_right .shopName .shop_leve text{ position: absolute; top: 0rpx; left: 38rpx; color: white; } .shopMsg_right .shopName .shop_leve image{ width: 100%; height: 100%; } .shopMsg_right .shopLabel{ width: 80rpx; height: 40rpx; margin-top: 10rpx; } .shopMsg_right .shopLabel image{ width: 100%; height: 100%; } .shopMsg_middle{ display: flex; text-align: center; line-height: 24px; font-size: 30rpx; color: #555555; padding: 20rpx; } .shopMsg_middle .fx_num{ border-right: 1px solid #f3f3f3; border-left: 1px solid #f3f3f3; } .shopMsg_middle>view{ width: 33.33%; } .shopMsg_bottom{ display: flex; } .shopMsg_bottom button{ border: 1px solid #9d9d9d; font-size: 14px; line-height: 36px; width: 40%; } .shopMsg_bottom button image{ width: 20px; height: 20px; vertical-align: text-bottom; } /*热销产品*/ .hot_product{ display: flex; text-align: center; background-color: #fff; height: 50px; line-height: 50px; font-size: 20px; } .hot_product>view{ width: 33.33%; } .hot_product image{ width: 100%; height: 50px; } .details_pic image{ width: 100%; all:initia; } /*底部购物车栏*/ .bottom_item_wrap{ position: fixed; bottom: 0; width: 100%; } .bottom_item{ display: flex; } .bottom_item>view{ background-color: #666; color: #fff; } .bottom_item .icon_service{ width: 50px; height: 50px; border-right: 1px solid #f3f3f3; padding: 5px; } .bottom_item .icon_service image{ width: 100%; height: 100%; } .bottom_item .bottom_item_right{ flex:1; font-size: 20px; line-height: 60px; text-align: center; display: flex; } .bottom_item .bottom_item_right>view{ width: 50%; } .bottom_item .bottom_item_right .buy_btn{ border-left: 1px solid #f3f3f3; background-color: #ff6662; } .add_item_show{ position: fixed; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(0,0,0,0.5); } .add_item_show .buy_cont{ background-color: #fff; position: absolute; bottom: 0; width: 100%; } .add_item_show .shopcar{ height: 120px; padding: 10px; } .add_item_show .shopcar>view{ height: 60px; } .add_item_show .shopcar_top{ position: relative; border-bottom: 1px solid #f3f3f3; } .add_item_show .shopcar_top>view{ float: left; } .add_item_show .pro_pic{ position: relative; top: -30px; width: 60px; height: 60px; } .add_item_show .pro_pic image{ width: 100%; height: 100%; } .add_item_show .shopcar_top .close{ position: absolute; width: 20px; height: 20px; text-align: center; line-height: 20px; color: #ccc; top: 0px; right: 0px; } .add_item_show .shopcar_top .kucun{ font-size: 28rpx; color: #333; } .add_item_show .shopcar_top .price{ font-size: 36rpx; color: #ff6662; } .add_item_show .shopcar .num{ font-size: 12px; color: #333; /*display: flex;*/ } .add_item_show .shopcar .num>view{ margin-top: 20px; } .add_item_show .shopcar .num .sl{ float: left; } .add_item_show .shopcar .num .buynum{ display: flex; height: 40rpx; width: 40%; text-align: center; line-height: 40rpx; border: 1rpx solid #f3f3f3; float: right; } .add_item_show .shopcar .num .buynum .nownum{ flex: 1; border-left: 1rpx solid #f3f3f3; border-right: 1rpx solid #f3f3f3; } .add_item_show .shopcar .num .disnum,.add_item_show .shopcar .num .addnum{ width: 40rpx; } .add_item_show .buy_cont .true_btn{ text-align: center; padding: 15px; font-size: 14px; background-color: #ff6662; color: #fff; } |
Page({ data: { imgMsg: [ {imgUrl:'http://ojhq3mgil.bkt.clouddn.com/442/20160822/201608221341146251.jpg', picDisc:'创意卡扣式手机支架托架办公室桌面可爱老人苹果小米通用手机座'}, {imgUrl:'http://ojhq3mgil.bkt.clouddn.com/447/20160908/201609081145371577.jpg', picDisc:'彩色杯子w'}, {imgUrl:'http://ojhq3mgil.bkt.clouddn.com/453/20160930/201609301548075198.jpg', picDisc:'女款黑色前胸字母绣花连帽卫衣'}, {imgUrl:'http://ojhq3mgil.bkt.clouddn.com/500/20161021/201610211626005082.jpg', picDisc:'七夕情人节金箔玫瑰礼品'} ], indicatorDots: true, autoplay: true, interval: 5000, duration: 1000, isShow:false, buynum:1 }, isShow:function () { this.setData({ isShow : true }) }, isClose:function () { this.setData({ isShow : false }) }, changeNum:function (e) { var that = this; if (e.target.dataset.alphaBeta == 0) { if (this.data.buynum <= 1) { buynum:1 }else{ this.setData({ buynum:this.data.buynum - 1 }) }; }else{ this.setData({ buynum:this.data.buynum + 1 }) }; } }) |
模板简介:该模板名称为【微信小程序红色风格带幻灯商品详情样式模板制作设计下载】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。