夜光序言:
爱恋是那么甜蜜,却也那么苦涩;但就算北风冷冽伤人,冬阳也教人心里温暖明亮
正文:
以道御术 / 以术识道
但是图片看起来有点奇怪嗯
<!-- <view>首页
<text class="iconfont icon-gouwuchekong"></text>
</view> -->
<view class="pyg_index">
<!-- 搜索框开始 -->
<SearchInput></SearchInput>
<!-- 搜索框结束 -->
<!-- 轮播图开始 -->
<view class="index_swiper">
<swiper class="Top" autoplay="true" circular="true" indicator-dots="true">
<swiper-item
wx:for="{{swiperList}}"
wx:key="goods_id"
>
<navigator>
<image class="pic1" src="{{item.image_src}}" mode="widthFix"></image>
</navigator>
</swiper-item>
</swiper>
</view>
<!-- 轮播图结束 -->
<!-- 导航页面开始 -->
<view class="index_cate">
<navigator
wx:for="{{cateList}}"
wx:key="name"
class="pic2"
>
<image mode="widthFix" src="{{item.image_src}}" class="pic3"></image>
</navigator>
</view>
<!-- 导航页面结束 -->
<!-- 楼层开始 -->
<view class="index_floor"
wx:for="{{floorList}}"
wx:for-item="item1"
wx:for-index="index1"
wx:key="floor_title"
>
<view class="floor_group">
<!-- 标题 -->
<view class="floor_title">
<image class="pic4" mode="widthFix" src="{{item1.floor_title.image_src}}"></image>
</view>
<!-- 内容 -->
<view class="floor_list">
<navigator
class="navigator_2"
wx:for="{{item1.product_list}}"
wx:for-item="item2"
wx:for-index="index2"
wx:key="name"
>
<image class="pic5" mode="{{index2===0?'widthFix':'scaleToFill'}}" src="{{item2.image_src}}"></image>
</navigator>
</view>
</view>
</view>
<!-- 楼层结束 -->
</view>
.index_swiper{
/* width: 100%; */
}
.Top{
width: 750rpx;
height: 340rpx;
}
.pic1{
width: 100%;
}
.index_cate{
display: flex;
}
.pic2{
flex: 1;
padding: 20rpx;
}
.pic3{
width: 100%
}
.index_floor navigator:nth-last-child(-n+4){
height: 27.72711207vw;
}
.floor_group navigator:nth-last-child(-n+4){
height: 27.72711207vw;
}
.floor_title{
}
.floor_list navigator:nth-last-child(-n+4){
height: 27.72711207vw;
}
.pic4{
width: 100%;
}
.pic5{
width: 100%;
height: 100%;
}
.navigator_2{
float: left;
width: 33.3%;
}
大家可以去搜索一下如何让webstorm加载less
.index_swiper{
swiper{
width: 750rpx;
height: 340rpx;
image{
width: 100%;
}
}
}
.index_cate
{
display:flex;
navigator{
padding:20rpx;
flex:1;
image{
width:100%;
}
}
}
.index_floor {
.floor_group {
.floor_title {
image {
width:100%;
}
}
.floor_list {
navigator {
float:left;
width:33.3%;
//后四个超链接
&:nth-last-child(-n+4){
//原图的宽度 232*386
//第一张图片效果如下~
height: 33.33vw * 386/ 232 /2;
}
image{
width:100%;
height: 100%;
}
}
}
}
}
.index_swiper swiper {
width: 750rpx;
height: 340rpx;
}
.index_swiper swiper image {
width: 100%;
}
.index_cate {
display: flex;
}
.index_cate navigator {
padding: 20rpx;
flex: 1;
}
.index_cate navigator image {
width: 100%;
}
.index_floor .floor_group .floor_title image {
width: 100%;
}
.index_floor .floor_group .floor_list navigator {
float: left;
width: 33.3%;
}
.index_floor .floor_group .floor_list navigator:nth-last-child(-n+4) {
height: 27.72711207vw;
}
.index_floor .floor_group .floor_list navigator image {
width: 100%;
height: 100%;
}