<!--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;
}