小程序--商品详情

<!--index.wxml-->
<import src="../../template/baseNavigationBar.wxml"/>
<template is="navigationBar" data="{{...item}}"></template>
<swiper
        indicator-dots="true"
        autoplay="true"
        interval="2000"
        duration="500"
        indicator-color="rgba(0,0,0,0.5)"
        indicator-active-color="red"
        circular="true"
>
    <block wx:for="{{imgUrls}}">
        <swiper-item>
            <image src="{{item}}" class="slide-image" style="width: 100%;height: 562rpx"/>
        </swiper-item>
    </block>
</swiper>
<!--商品详情-->
<view class="goods_content">
    <view class="content">
        <view class="goods_title">日系风格黄麻底拖鞋</view>
        <view class="goods_brief">天然黄麻做中底，吸湿透气好，清爽、不干燥，耐磨耐穿、男女同款</view>
        <view class="goods_price">￥49</view>
    </view>
    <view class="share">
        <text class="iconfont icon-fenxiang"></text>
        <view class="fenxiang">分享</view>
    </view>
</view>
<view class="message">
    <view class="goods_message">
        <view>商品评价</view>
        <view><text class="iconfont icon-arrowright"></text></view>
    </view>
    <view class="goods_message">
        <view>购买须知</view>
        <view><text class="iconfont icon-arrowright"></text></view>
    </view>
    <view class="goods_message">
        <view>商品规格</view>
        <view><text class="iconfont icon-arrowright"></text></view>
    </view>
</view>

<!--图文详情-->
<view class="image_text">
    <view class="image_text_title">图文详情</view>
    <view>
        lalalallal
    </view>
</view>

<!--底部导航-->
<view class="footer_nav">
    <view class="nav_list">
        <text class="iconfont icon-store_refund"></text>
        <view class="nav_name">首页</view>
    </view>
    <view class="nav_list">
        <text class="iconfont icon-star"></text>
        <view class="nav_name">收藏</view>
    </view>
    <view class="nav_list">
        <text class="iconfont icon-toolbar_cart_normal"></text>
        <view class="nav_name">购物车</view>
    </view>
    <view class="add_cart goods_buy">加入购物车</view>
    <view class="now_buy goods_buy" bindtap="bindnowbuy">立即购买</view>
</view>

@import "../../lib/style/iconfont.wxss";
@import "../../lib/style/base.wxss";
@import "../../lib/style/baseNavigationBar.wxss";
page {
    background-color: #f3f3f3;
}
swiper {
    display:block;
    height:562rpx;
    margin-top: 140rpx;
}
.goods_content {
    display: flex;
    justify-content: space-between;
    background: white;
    padding: 30rpx 30rpx 0 30rpx;
}
.content {
    width: 79%;
    line-height: 1.6;
}
.goods_title {
    font-size: 34rpx;
}
.goods_brief {
    font-size: 24rpx;
    color: #7f7f7f;
}
.goods_price {
    font-size: 40rpx;
    color: #c13431;
    /*font-weight: bold;*/
}
.share {
    flex-shrink: 0;
    text-align: center;
    margin-top: 20rpx;
}
.icon-fenxiang {
    color: #585858;

}
.fenxiang {
    color: #585858;
    font-size: 24rpx;
}
.message {
    background: white;
    padding: 0 20rpx;
    margin-top: 20rpx;
}
.goods_message {
    padding: 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2rpx solid #f3f3f3;
}
.image_text {
    background: white;
    padding: 20rpx;
    margin-top: 20rpx;
}
.image_text_title {
    text-align: center;

}
/*底部导航*/
.footer_nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    height: 96rpx;
    background: white;
    border-top: 2rpx solid #f3f3f3;
}
.nav_list {
    width: 14%;
    text-align: center;
    height: 90rpx;
    line-height: 1.4;
    margin-top: 4rpx;
}
.nav_list .iconfont {
    font-size: 40rpx;
}
.nav_name {
    font-size: 24rpx;
    color: #7d7d7d;
}
.goods_buy {
    width: 29%;
    text-align: center;
    height: 96rpx;
    line-height: 96rpx;
    color: white;
    font-size: 30rpx;
}
.add_cart {
    background: #222222;
}
.now_buy {
    background: #ad0e12;
}