index.wxml
<view class='root'>
<view class='tabs'>
<view class='item active'>
<text>个性推荐</text>
</view>
<view class='item'>
<text>歌单</text>
</view>
<view class='item'>
<text>主播电台</text>
</view>
<view class='item'>
<text>排行版</text>
</view>
</view>
<scroll-view class='content' scroll-y>
<view class='slide'>
<swiper
indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}"
interval="{{interval}}"
duration="{{duration}}"
>
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="slide-image" width="355" height="150" />
</swiper-item>
</block>
</swiper>
</view>
<view class='portals'>
<view class='item'>
<image src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1549516721&di=03e05e894ada2dd7a58c8d1eca69ea41&imgtype=jpg&er=1&src=http%3A%2F%2Fimg4q.duitang.com%2Fuploads%2Fitem%2F201401%2F25%2F20140125184011_tzUmP.jpeg'></image>
<text>私人FM</text>
</view>
<view class='item'>
<image src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1549516721&di=03e05e894ada2dd7a58c8d1eca69ea41&imgtype=jpg&er=1&src=http%3A%2F%2Fimg4q.duitang.com%2Fuploads%2Fitem%2F201401%2F25%2F20140125184011_tzUmP.jpeg'></image>
<text>每日歌曲推荐</text>
</view>
<view class='item'>
<image src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1549516721&di=03e05e894ada2dd7a58c8d1eca69ea41&imgtype=jpg&er=1&src=http%3A%2F%2Fimg4q.duitang.com%2Fuploads%2Fitem%2F201401%2F25%2F20140125184011_tzUmP.jpeg'></image>
<text>云音乐新歌榜</text>
</view>
</view>
<view class='list'>
<view class='title'>
<text>推荐歌单</text>
</view>
<view class='inner'>
<view class='item'>
<navigator url='../news/news'><image src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1548920344022&di=7c81b3613951c6c141804fcbd8d9cc16&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201509%2F25%2F20150925223027_x5iRt.jpeg'></image></navigator>
<text>五月天</text>
</view>
<view class='item'>
<image src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1548920344022&di=7c81b3613951c6c141804fcbd8d9cc16&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201509%2F25%2F20150925223027_x5iRt.jpeg'></image>
<text>五月天</text>
</view>
<view class='item'>
<image src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1548920344022&di=7c81b3613951c6c141804fcbd8d9cc16&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201509%2F25%2F20150925223027_x5iRt.jpeg'></image>
<text>五月天</text>
</view>
<view class='item'>
<image src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1548920344022&di=7c81b3613951c6c141804fcbd8d9cc16&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201509%2F25%2F20150925223027_x5iRt.jpeg'></image>
<text>五月天</text>
</view>
<view class='item'>
<image src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1548920344022&di=7c81b3613951c6c141804fcbd8d9cc16&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201509%2F25%2F20150925223027_x5iRt.jpeg'></image>
<text>五月天</text>
</view>
<view class='item'>
<image src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1548920344022&di=7c81b3613951c6c141804fcbd8d9cc16&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201509%2F25%2F20150925223027_x5iRt.jpeg'></image>
<text>五月天</text>
</view>
</view>
</view>
</scroll-view>
<view class='player'>
<view class='poster'>
<image src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1549516721&di=03e05e894ada2dd7a58c8d1eca69ea41&imgtype=jpg&er=1&src=http%3A%2F%2Fimg4q.duitang.com%2Fuploads%2Fitem%2F201401%2F25%2F20140125184011_tzUmP.jpeg'></image>
</view>
<view class='controls'>
<view class='info'>
<text class='title'>顽固</text>
<text class='artist'>五月天</text>
</view>
<image src=''></image>
<image src=''></image>
<image src=''></image>
</view>
</view>
</view>
index.wxss
page{
height: 100%;
}
.root{
display:flex;
flex-direction: column;
height: 100%;
background-color: grey;
}
.tabs{
display:flex;
background-color: pink;
}
.tabs .item{
padding: 12rpx 0;
flex: 1;
background-color: #222;
color: #ccc;
text-align: center;
font-size: 28rpx;
}
.tabs .item.active{
color: #fff;
border-bottom: 5rpx solid #e9232c;
}
.content {
flex: 1;
background-color: rgba(24, 2, 2, 0.404);
display: flex;
flex-direction: column;
overflow: hidden;
}
.slide image{
height: 260rpx;
background-color: gray;
width: 100%;
}
.portals .item{
flex: 1;
}
.portals .item image{
width:160rpx;
height: 160rpx;
background-color: green;
display: block;
margin: 20rpx auto;
}
.portals .item text{
font-size: 24rpx;
text-align: center;
display: block;
}
.portals{
display: flex;
width: 100%;
}
.player{
display: flex;
height: 95rpx;
background: white;
flex-direction: row;
}
.info {
flex: 1;
color: rgb(24, 2, 2);
font-size: 28rpx;
}
.info .title{
display: block;
font-size: 28rpx;
}
.controls image{
width: 80rpx;
height: 80rpx;
background-color: blue;
margin: 2rpx;
}
.poster image{
width: 80rpx;
height: 80rpx;
background-color: black;
margin: 10rpx;
}
.controls{
display: flex;
flex: 1;
margin-top: 10rpx;
}
.list .title{
margin: 10rpx 20rpx;
font-size: 28rpx;
}
.list .inner{
display: flex;
flex-wrap: wrap;
}
.list .inner .item{
width:33.33%
}
.list .inner .item image{
width:240rpx;
height: 240rpx;
display: block;
margin: 0 auto;
}
.list .inner .item text{
font-size: 30rpx;
text-align: center;
display: block;
margin:15rpx;
color: whitesmoke;
}