夜光序言:
你名字就那么几笔,却深深刻进我心底。
正文:
以道御术 / 以术识道
/* 样式很重要,在这里书写 */
.container2{
display: flex;
flex-direction: column;
padding: 10rpx 20rpx;
height: 390px;
background-color:#576b95;
/* border-radius: 18rpx; */
}
swiper{
width: 100%;
height: 370rpx;
}
swiper image{
width: 100%;
border-radius: 16rpx;
}
/* 8个icon */
.sorts-wrap {
font-size: 28rpx;
/* text-align: center; */
margin: 15px 15px 15px 15px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
background-color: pink;
border-radius: 16rpx;
}
.sorts-wrap .flex-wrap {
/* display: flex;
flex-direction: column; */
margin-top: 20rpx;
}
.sorts-wrap navigator image {
width: 80rpx;
height: 80rpx;
}
/* 菜单,夜光 */
/* .nav{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
.nav .menu{
display: flex;
flex-direction: column;
width: 25%;
}
.menu image{
width: 120rpx;
height: 120rpx;
} */
/* 产品列表样式 */
.hot{
display: block;
text-align: center;
margin: 10rpx 0;
}
.wrap{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.wrap .product{
display: flex;
flex-direction: column;
width: 46%;
}
/* 样式很重要,在这里书写 */
.container2{
display: flex;
flex-direction: column;
padding: 10rpx 20rpx;
height: 390px;
background-color:#576b95;
/* border-radius: 18rpx; */
}
swiper{
width: 100%;
height: 370rpx;
}
swiper image{
width: 100%;
border-radius: 16rpx;
}
/* 8个icon */
.sorts-wrap {
font-size: 28rpx;
/* text-align: center; */
margin: 15px 15px 15px 15px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
background-color: gray;
border-radius: 16rpx;
}
.sorts-wrap .flex-wrap {
/* display: flex;
flex-direction: column; */
margin-top: 20rpx;
}
.sorts-wrap navigator image {
width: 80rpx;
height: 80rpx;
}
/* 菜单,夜光 */
/* .nav{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
.nav .menu{
display: flex;
flex-direction: column;
width: 25%;
}
.menu image{
width: 120rpx;
height: 120rpx;
} */
/* 产品列表样式 */
.hot{
display: block;
text-align: center;
margin: 10rpx 0;
}
.wrap{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.wrap .product{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 46%;
margin: 0 10rpx;
background-color: pink
}
.product image{
width: 100%;
}
.info{
display: flex;
flex-direction: row;
justify-content: space-between;
}
.info .price{
color: gray
}
<!--pages/milk/milk.wxml-->
<!-- <text>精彩呈现</text> -->
<!-- 首先 需要一个容器 夜光 -->
<view class="container2">
<!-- 学过前端都知道,这种一直变换的图片组件~~ 在微信小程序开发里面稍微轻松点-->
<swiper autoplay="true" circular indicator-dots>
<swiper-item>
<!-- 轮播,一般,我们都是放图片 -->
<image src="/images/temp/a.png" mode="widthFix"></image>
</swiper-item>
<swiper-item>
<!-- 轮播,一般,我们都是放图片 -->
<image src="/images/temp/b.jpg" mode="widthFix"></image>
</swiper-item>
<swiper-item>
<!-- 轮播,一般,我们都是放图片 -->
<image src="/images/temp/d.jpg" mode="widthFix"></image>
</swiper-item>
<swiper-item>
<!-- 轮播,一般,我们都是放图片 -->
<image src="/images/temp/c.png" mode="widthFix"></image>
</swiper-item>
</swiper>
<!-- 导航菜单-->
<view class='sorts-wrap'>
<view class='flex-wrap' wx:for='{{sortRows}}' wx:for-item='sortRow' wx:for-index='rowIndex' wx:key='unique'>
<view class='flex-item' wx:for='{{sortRow}}' wx:for-item='sortItem' wx:for-index='sortIndex' wx:key='unique'>
<navigator url='{{sortItem.jumpUrl}}' hover-class='none'>
<image src='{{sortItem.image}}'></image>
<text>{{sortItem.title}}</text>
</navigator>
</view>
</view>
</view>
</view>
<!-- 夜光: 下面再取一个容器 → 是产品列表 -->
<text class="hot">热门动漫周边</text>
<view class="wrap">
<view class="product">
<image src="/images/7.jpg" mode="widthFix"></image>
<view class="info">
<text class="name">动漫1</text>
<text class="price">外国</text>
</view>
</view>
<view class="product">
<image src="/images/9.jpg" mode="widthFix"></image>
<view class="info">
<text class="name">动漫2</text>
<text class="price">外国</text>
</view>
</view>
</view>
效果差不多出来了,么么哒
<!--pages/milk/milk.wxml-->
<!-- <text>精彩呈现</text> -->
<!-- 首先 需要一个容器 夜光 -->
<view class="container2">
<!-- 学过前端都知道,这种一直变换的图片组件~~ 在微信小程序开发里面稍微轻松点-->
<swiper autoplay="true" circular indicator-dots>
<swiper-item>
<!-- 轮播,一般,我们都是放图片 -->
<image src="/images/temp/a.png" mode="widthFix"></image>
</swiper-item>
<swiper-item>
<!-- 轮播,一般,我们都是放图片 -->
<image src="/images/temp/b.jpg" mode="widthFix"></image>
</swiper-item>
<swiper-item>
<!-- 轮播,一般,我们都是放图片 -->
<image src="/images/temp/d.jpg" mode="widthFix"></image>
</swiper-item>
<swiper-item>
<!-- 轮播,一般,我们都是放图片 -->
<image src="/images/temp/c.png" mode="widthFix"></image>
</swiper-item>
</swiper>
<!-- 导航菜单-->
<view class='sorts-wrap'>
<view class='flex-wrap' wx:for='{{sortRows}}' wx:for-item='sortRow' wx:for-index='rowIndex' wx:key='unique'>
<view class='flex-item' wx:for='{{sortRow}}' wx:for-item='sortItem' wx:for-index='sortIndex' wx:key='unique'>
<navigator url='{{sortItem.jumpUrl}}' hover-class='none'>
<image src='{{sortItem.image}}'></image>
<text>{{sortItem.title}}</text>
</navigator>
</view>
</view>
</view>
</view>
<!-- 夜光: 下面再取一个容器 → 是产品列表 -->
<text class="hot">热门动漫周边</text>
<view class="wrap">
<view class="product">
<image src="/images/7.jpg" mode="widthFix"></image>
<view class="info">
<text class="name">周边1</text>
<text class="price">外国</text>
</view>
</view>
<view class="product">
<image src="/images/9.jpg" mode="widthFix"></image>
<view class="info">
<text class="name">周边2</text>
<text class="price">外国</text>
</view>
</view>
<view class="product">
<image src="/images/8.png" mode="widthFix"></image>
<view class="info">
<text class="name">周边3</text>
<text class="price">外国</text>
</view>
</view>
<view class="product">
<image src="/images/10.jpg" mode="widthFix"></image>
<view class="info">
<text class="name">周边4</text>
<text class="price">外国</text>
</view>
</view>
<view class="product">
<image src="/images/11.jpg" mode="widthFix"></image>
<view class="info">
<text class="name">周边5</text>
<text class="price">外国</text>
</view>
</view>
<view class="product">
<image src="/images/12.jpg" mode="widthFix"></image>
<view class="info">
<text class="name">周边6</text>
<text class="price">外国</text>
</view>
</view>
</view>
/* 样式很重要,在这里书写 */
.container2{
display: flex;
flex-direction: column;
padding: 10rpx 20rpx;
height: 390px;
background-color:#576b95;
/* border-radius: 18rpx; */
}
swiper{
width: 100%;
height: 370rpx;
}
swiper image{
width: 100%;
border-radius: 16rpx;
}
/* 8个icon */
.sorts-wrap {
font-size: 28rpx;
/* text-align: center; */
margin: 15px 15px 15px 15px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
background-color: gray;
border-radius: 16rpx;
}
.sorts-wrap .flex-wrap {
/* display: flex;
flex-direction: column; */
margin-top: 20rpx;
}
.sorts-wrap navigator image {
width: 80rpx;
height: 80rpx;
}
/* 菜单,夜光 */
/* .nav{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
.nav .menu{
display: flex;
flex-direction: column;
width: 25%;
}
.menu image{
width: 120rpx;
height: 120rpx;
} */
/* 产品列表样式 */
.hot{
display: block;
text-align: center;
margin: 10rpx 0;
}
.wrap{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.wrap .product{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 46%;
margin: 6rpx 10rpx;
background-color: #666;
border-bottom-left-radius: 16rpx;
border-bottom-right-radius: 16rpx;
}
.product image{
border-top-left-radius: 16rpx;
border-top-right-radius: 16rpx;
width: 100%;
}
.info{
display: flex;
flex-direction: row;
justify-content: space-around;
}
.name{
color: white;
}
.info .price{
color: gray
}