|
Before Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 3.0 KiB |
|
Before Width: | Height: | Size: 4.7 KiB |
|
Before Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 5.4 KiB |
|
Before Width: | Height: | Size: 5.5 KiB |
|
Before Width: | Height: | Size: 4.7 KiB |
|
Before Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 204 KiB |
|
Before Width: | Height: | Size: 308 KiB |
|
Before Width: | Height: | Size: 1.2 MiB |
|
Before Width: | Height: | Size: 104 KiB |
|
Before Width: | Height: | Size: 108 KiB |
|
Before Width: | Height: | Size: 296 KiB |
|
Before Width: | Height: | Size: 385 KiB |
|
Before Width: | Height: | Size: 526 KiB |
|
Before Width: | Height: | Size: 340 KiB |
|
Before Width: | Height: | Size: 21 KiB |
@ -1,5 +1,3 @@
|
||||
{
|
||||
"navigationBarBackgroundColor":"#fff",
|
||||
"navigationBarTitleText":"音乐",
|
||||
"navigationBarTextStyle":"black"
|
||||
"usingComponents": {}
|
||||
}
|
||||
@ -1,103 +1,12 @@
|
||||
<!--index.wxml-->
|
||||
<!-- 标签页标题 -->
|
||||
<view class="tab">
|
||||
<view class="tab-item {{tab==0?'active':''}}" bindtap="changeItem" data-item="0">音乐推荐</view>
|
||||
<view class="tab-item {{tab==1?'active':''}}" bindtap="changeItem" data-item="1">播放器</view>
|
||||
<view class="tab-item {{tab==2?'active':''}}" bindtap="changeItem" data-item="2">播放列表</view>
|
||||
</view>
|
||||
<!-- 内容区域 -->
|
||||
<view class="content">
|
||||
<swiper current="{{item}}" bindchange="changeTab">
|
||||
<swiper-item>
|
||||
<!-- 内容滚动区域 -->
|
||||
<scroll-view class="content-info" scroll-y>
|
||||
<!-- 轮播图 -->
|
||||
<swiper class="content-info-slide" indicator-color="rgba(255,255,255,.5)" indicator-active-color="#fff" indicator-dots circular autoplay>
|
||||
<swiper-item>
|
||||
<image src="/images/banner.jpeg" />
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<image src="/images/8(53_1S((UY0C`N81)%VKNY.png" />
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<image src="/images/_~S3@H]A){GCA7XWPA6WVB6.png" />
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<!-- 功能按钮 -->
|
||||
<view class="content-info-portal">
|
||||
<view>
|
||||
<image src="/images/04.png" />
|
||||
<text>私人FM</text>
|
||||
</view>
|
||||
<view>
|
||||
<image src="/images/05.png" />
|
||||
<text>每日歌曲推荐</text>
|
||||
</view>
|
||||
<view>
|
||||
<image src="/images/06.png" />
|
||||
<text>云音乐新歌榜</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 热门音乐 -->
|
||||
<view class="content-info-list">
|
||||
<view class="list-title">推荐歌曲</view>
|
||||
<view class="list-inner">
|
||||
<view class="list-item">
|
||||
<image src="/images/cover1.jpg" />
|
||||
<view>汇电音之经典领电音之奥妙
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-item">
|
||||
<image src="/images/cover2.jpg" />
|
||||
<view>[周杰伦]每首歌曲，都是顶级文案
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-item">
|
||||
<image src="/images/cover3.jpg" />
|
||||
<view>伤感情歌|不眠夜里的孤单心事
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-item">
|
||||
<image src="/images/cover4.jpg" />
|
||||
<view>[经典]听这些怀旧的歌，体会经典的旋律
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-item">
|
||||
<image src="/images/cover5.jpg" />
|
||||
<view>[粤语经典]漫漫人生路、每到离别总是伤
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-item">
|
||||
<image src="/images/cover6.jpg" />
|
||||
<view>[流行华语]向我们即将逝去的青春致敬</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<!-- 播放器页面 -->
|
||||
<include src="play.wxml" />
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<include src="playlist.wxml" />
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
<!-- 底部播放器 -->
|
||||
<view class="player">
|
||||
<image class="player-cover" src="{{play.coverImgUrl}}" />
|
||||
<view class="player-info">
|
||||
<view class="player-info-title">{{play.title}}</view>
|
||||
<view class="player-info-singer">{{play.singer}}</view>
|
||||
</view>
|
||||
<view class="player-controls">
|
||||
<!-- 切换到播放列表 -->
|
||||
<image src="/images/01.png" bindtap="changePage" data-page="2" />
|
||||
<!-- 播放或暂停 -->
|
||||
<image wx:if="{{state=='paused'}}" src="/images/02.png" bindtap="play" />
|
||||
<image wx:else src="/images/02stop.png" bindtap="pause" />
|
||||
<!-- 下一曲 -->
|
||||
<image src="/images/03.png" bindtap="next" />
|
||||
</view>
|
||||
<view class="info"> 城市编码：{{adcode}}</view>
|
||||
<view class="info"> 所在省份：{{province}}</view>
|
||||
<view class="info"> 城市：{{city}}</view>
|
||||
<view class="info">天气现象：{{weather}}</view>
|
||||
<view class="info"> 实时气温：{{temperature}}℃</view>
|
||||
<view class="info"> 风向：{{winddirection}}</view>
|
||||
<view class="info"> 风力：{{windpower}}</view>
|
||||
<view class="info"> 空气湿度：{{humidity}}%</view>
|
||||
<view class="info"> 发布时间：{{reporttime}}</view>
|
||||
</view>
|
||||
|
||||
@ -1,236 +1,4 @@
|
||||
page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #17181a;
|
||||
color: #ccc;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.tab {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
flex: 1;
|
||||
font-size: 10pt;
|
||||
text-align: center;
|
||||
line-height: 72rpx;
|
||||
border-bottom: 6rpx solid #eee;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.content > swiper {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.player {
|
||||
background: #222;
|
||||
border-top: 1px solid #252525;
|
||||
height: 112rpx;
|
||||
}
|
||||
|
||||
.tab-item.active {
|
||||
color: #c25b5b;
|
||||
border-bottom-color: #c25b5b;
|
||||
}
|
||||
|
||||
.content-info {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
/* 轮播图 */
|
||||
|
||||
.content-info-slide {
|
||||
height: 302rpx;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.content-info-slide image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 功能按钮 */
|
||||
|
||||
.content-info-portal {
|
||||
display: flex;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.content-info-portal > view {
|
||||
flex: 1;
|
||||
font-size: 11pt;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.content-info-portal image {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
display: block;
|
||||
margin: 20rpx auto;
|
||||
}
|
||||
|
||||
/* 热门音乐 */
|
||||
|
||||
.content-info-list {
|
||||
font-size: 11pt;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.content-info-list > .list-title {
|
||||
margin: 20rpx 35rpx;
|
||||
}
|
||||
|
||||
.content-info-list > .list-inner {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 20rpx;
|
||||
}
|
||||
|
||||
.content-info-list > .list-inner > .list-item {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.content-info-list > .list-inner > .list-item > image {
|
||||
display: block;
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
margin: 0 auto;
|
||||
border-radius: 10rpx;
|
||||
border: 1rpx solid #555;
|
||||
}
|
||||
|
||||
.content-info-list > .list-inner > .list-item > view {
|
||||
width: 200rpx;
|
||||
margin: 10rpx auto;
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
/* 播放器 */
|
||||
|
||||
.content-play {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.content-play-info > view {
|
||||
color: #888;
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
||||
/* 底部播放器 */
|
||||
|
||||
.player {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #222;
|
||||
border-top: 1px solid #252525;
|
||||
height: 112rpx;
|
||||
}
|
||||
|
||||
.player-cover {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
margin-left: 15rpx;
|
||||
border-radius: 8rpx;
|
||||
border: 1px solid #333;
|
||||
}
|
||||
|
||||
.player-info {
|
||||
flex: 1;
|
||||
font-size: 10pt;
|
||||
line-height: 38rpx;
|
||||
margin-left: 20rpx;
|
||||
padding-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.player-info-singer {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.player-controls image {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
|
||||
/* 显示专辑页面样式 */
|
||||
|
||||
.content-play-cover image {
|
||||
animation: rotateImage 10s linear infinite;
|
||||
width: 400rpx;
|
||||
height: 400rpx;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #333;
|
||||
}
|
||||
|
||||
@keyframes rotateImage {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* 播放进度和时间 */
|
||||
|
||||
.content-play-progress {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 35rpx;
|
||||
font-size: 9pt;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.content-play-progress > view {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* 播放列表 */
|
||||
|
||||
.playlist-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1rpx solid #333;
|
||||
height: 112rpx;
|
||||
}
|
||||
|
||||
.playlist-cover {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
margin-left: 15rpx;
|
||||
border-radius: 8rpx;
|
||||
border: 1px solid #333;
|
||||
}
|
||||
|
||||
.playlist-info {
|
||||
flex: 1;
|
||||
font-size: 10pt;
|
||||
line-height: 38rpx;
|
||||
margin-left: 20rpx;
|
||||
padding-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.playlist-info-singer {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.playlist-controls {
|
||||
font-size: 10pt;
|
||||
margin-right: 20rpx;
|
||||
color: #c25b5b;
|
||||
.content{
|
||||
background-color:antiquewhite;
|
||||
text-align: center;
|
||||
}
|
||||
@ -1,61 +0,0 @@
|
||||
<!-- 内容滚动区域 -->
|
||||
<scroll-view class="content-info" scroll-y>
|
||||
<!-- 轮播图 -->
|
||||
<swiper class="content-info-slide" indicator-color="rgba(255,255,255,.5)" indicator-active-color="#fff" indicator-dots circular autoplay>
|
||||
<swiper-item>
|
||||
<image src="/images/banner.jpg" />
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<image src="/images/banner.jpg" />
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<image src="/images/banner.jpg" />
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<!-- 功能按钮 -->
|
||||
<view class="content-info-portal">
|
||||
<view>
|
||||
<image src="/images/04.png" />
|
||||
<text>私人FM</text>
|
||||
</view>
|
||||
<view>
|
||||
<image src="/images/05.png" />
|
||||
<text>每日歌曲推荐</text>
|
||||
</view>
|
||||
<view>
|
||||
<image src="/images/06.png" />
|
||||
<text>云音乐新歌榜</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 热门音乐 -->
|
||||
<view class="content-info-list">
|
||||
<view class="list-title">推荐歌曲</view>
|
||||
<view class="list-inner">
|
||||
<view class="list-item">
|
||||
<image src="/images/cover.jpg" />
|
||||
<view>汇电音之经典领电音之奥妙
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-item">
|
||||
<image src="/images/cover.jpg" />
|
||||
<view>周杰伦]每首歌曲，都是顶级文案</view>
|
||||
</view>
|
||||
<view class="list-item">
|
||||
<image src="/images/cover.jpg" />
|
||||
<view>伤感情歌|不眠夜里的孤单心事</view>
|
||||
</view>
|
||||
<view class="list-item">
|
||||
<image src="/images/cover.jpg" />
|
||||
<view>经典]听这些怀旧的歌，体会经典的旋律</view>
|
||||
</view>
|
||||
<view class="list-item">
|
||||
<image src="/images/cover.jpg" />
|
||||
<view>[粤语经典]漫漫人生路、每到离别总是伤</view>
|
||||
</view>
|
||||
<view class="list-item">
|
||||
<image src="/images/cover.jpg" />
|
||||
<view>[流行华语]向我们即将逝去的青春致敬</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
@ -1,20 +0,0 @@
|
||||
<!-- 播放器 -->
|
||||
<view class="content-play">
|
||||
<!-- 显示音乐信息 -->
|
||||
<view class="content-play-info">
|
||||
<text>{{play.title}}</text>
|
||||
<view>—— {{play.singer}} ——</view>
|
||||
</view>
|
||||
<!-- 显示专辑封面 -->
|
||||
<view class="content-play-cover">
|
||||
<image src="{{play.coverImgUrl}}" style="animation-play-state:{{state}}" />
|
||||
</view>
|
||||
<!-- 显示播放进度和时间 -->
|
||||
<view class="content-play-progress">
|
||||
<text>{{play.currentTime}}</text>
|
||||
<view>
|
||||
<slider bindchange="sliderChange" activeColor="#d33a31" block-size="12" backgroundColor="#dadada" value="{{play.percent}}" />
|
||||
</view>
|
||||
<text>{{play.duration}}</text>
|
||||
</view>
|
||||
</view>
|
||||
@ -1,12 +0,0 @@
|
||||
<scroll-view class="content-playlist" scroll-y>
|
||||
<view class="playlist-item" wx:for="{{playlist}}" wx:key="id" bindtap="change" data-index="{{index}}">
|
||||
<image class="playlist-cover" src="{{item.coverImgUrl}}" />
|
||||
<view class="playlist-info">
|
||||
<view class="playlist-info-title">{{item.title}}</view>
|
||||
<view class="playlist-info-singer">{{item.singer}}</view>
|
||||
</view>
|
||||
<view class="playlist-controls">
|
||||
<text wx:if="{{index==playIndex}}">正在播放</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
@ -0,0 +1,66 @@
|
||||
// pages/logs/logs.js
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad(options) {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage() {
|
||||
|
||||
}
|
||||
})
|
||||
@ -0,0 +1,2 @@
|
||||
<!--pages/logs/logs.wxml-->
|
||||
<text>pages/logs/logs.wxml</text>
|
||||