@ -0,0 +1,19 @@
|
|||||||
|
// app.js
|
||||||
|
App({
|
||||||
|
onLaunch() {
|
||||||
|
// 展示本地存储能力
|
||||||
|
const logs = wx.getStorageSync('logs') || []
|
||||||
|
logs.unshift(Date.now())
|
||||||
|
wx.setStorageSync('logs', logs)
|
||||||
|
|
||||||
|
// 登录
|
||||||
|
wx.login({
|
||||||
|
success: res => {
|
||||||
|
// 发送 res.code 到后台换取 openId, sessionKey, unionId
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
globalData: {
|
||||||
|
userInfo: null
|
||||||
|
}
|
||||||
|
})
|
@ -0,0 +1,12 @@
|
|||||||
|
{
|
||||||
|
"pages":[
|
||||||
|
"pages/index/index",
|
||||||
|
"pages/test/test"
|
||||||
|
],
|
||||||
|
"window":{
|
||||||
|
"backgroundTextStyle":"light",
|
||||||
|
"navigationBarBackgroundColor": "#fff",
|
||||||
|
"navigationBarTitleText": "音乐",
|
||||||
|
"navigationBarTextStyle":"black"
|
||||||
|
}
|
||||||
|
}
|
After Width: | Height: | Size: 1.6 KiB |
After Width: | Height: | Size: 3.0 KiB |
After Width: | Height: | Size: 4.7 KiB |
After Width: | Height: | Size: 1.7 KiB |
After Width: | Height: | Size: 5.4 KiB |
After Width: | Height: | Size: 5.5 KiB |
After Width: | Height: | Size: 4.7 KiB |
After Width: | Height: | Size: 65 KiB |
After Width: | Height: | Size: 49 KiB |
After Width: | Height: | Size: 49 KiB |
@ -0,0 +1,118 @@
|
|||||||
|
// pages/index/index.js
|
||||||
|
Page({
|
||||||
|
data: {
|
||||||
|
item: 0,
|
||||||
|
tab: 0,
|
||||||
|
playlist: [{
|
||||||
|
id: 1,
|
||||||
|
title: '钢琴演奏曲',
|
||||||
|
singer: '肖邦',
|
||||||
|
src: 'http://localhost:3000/1.mp3',
|
||||||
|
coverImgUrl: '/image/cover.jpg'
|
||||||
|
}, {
|
||||||
|
id: 2,
|
||||||
|
title: '奏鸣曲',
|
||||||
|
singer: '莫扎特',
|
||||||
|
src: 'http://localhost:3000/2.mp3',
|
||||||
|
coverImgUrl: '/image/cover.jpg'
|
||||||
|
}, {
|
||||||
|
id: 3,
|
||||||
|
title: '欢乐颂',
|
||||||
|
singer: '贝多芬',
|
||||||
|
src: 'http://localhost:3000/1.mp3',
|
||||||
|
coverImgUrl: '/image/cover.jpg'
|
||||||
|
}, {
|
||||||
|
id: 4,
|
||||||
|
title: '爱之梦',
|
||||||
|
singer: '李斯特',
|
||||||
|
src: 'http://localhost:3000/1.mp3',
|
||||||
|
coverImgUrl: '/image/cover.jpg'
|
||||||
|
}],
|
||||||
|
state: 'paused',
|
||||||
|
playIndex: 0,
|
||||||
|
play: {
|
||||||
|
currentTime: '00:00',
|
||||||
|
duration: '00:00',
|
||||||
|
percent: 0,
|
||||||
|
title: '',
|
||||||
|
singer: '',
|
||||||
|
coverImgUrl: '/image/cover.jpg'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
changeItem(e) {
|
||||||
|
this.setData({
|
||||||
|
item: e.target.dataset.item
|
||||||
|
})
|
||||||
|
},
|
||||||
|
changeTab(e) {
|
||||||
|
this.setData({
|
||||||
|
tab: e.detail.current
|
||||||
|
})
|
||||||
|
},
|
||||||
|
audioCtx: null,
|
||||||
|
onReady() {
|
||||||
|
this.audioCtx = wx.createInnerAudioContext()
|
||||||
|
var that = this
|
||||||
|
this.audioCtx.onError(function () {
|
||||||
|
console.log('播放失败' + that.audioCtx.src)
|
||||||
|
})
|
||||||
|
this.audioCtx.onEnded(function () {
|
||||||
|
that.next()
|
||||||
|
})
|
||||||
|
this.audioCtx.onPlay(function () {})
|
||||||
|
this.audioCtx.onTimeUpdate(function () {
|
||||||
|
that.setData({
|
||||||
|
'play.duration': fromatTime(that.audioCtx.duration),
|
||||||
|
'play.currentTime': fromatTime(that.audioCtx.currentTime),
|
||||||
|
'play.percent': that.audioCtx.currentTime / that.audioCtx.duration * 100
|
||||||
|
})
|
||||||
|
})
|
||||||
|
this.setMusic(0)
|
||||||
|
|
||||||
|
function fromatTime(time) {
|
||||||
|
var minute = Math.floor(time / 60) % 60;
|
||||||
|
var second = Math.floor(time) % 60;
|
||||||
|
return (minute < 10 ? '0' + minute : minute) + ':' + (second < 10 ? '0' + second : second)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
setMusic(index) {
|
||||||
|
var music = this.data.playlist[index]
|
||||||
|
this.audioCtx.src = music.src
|
||||||
|
this.setData({
|
||||||
|
playIndex: index,
|
||||||
|
'play.title': music.title,
|
||||||
|
'play.singer': music.singer,
|
||||||
|
'play.coverImgUrl': music.coverImgUrl,
|
||||||
|
'play.currentTime': '00:00',
|
||||||
|
'play.duration': '00:00',
|
||||||
|
'play.percent': 0
|
||||||
|
})
|
||||||
|
},
|
||||||
|
play() {
|
||||||
|
this.audioCtx.play()
|
||||||
|
this.setData({
|
||||||
|
state: 'running'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
pause() {
|
||||||
|
this.audioCtx.pause()
|
||||||
|
this.setData({
|
||||||
|
state: 'paused'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
next() {
|
||||||
|
var index = this.data.playIndex >= this.data.playlist.length - 1 ? 0 : this.data.playIndex + 1
|
||||||
|
this.setMusic(index)
|
||||||
|
if (this.data.state === 'running') {
|
||||||
|
this.play()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
sliderChange(e) {
|
||||||
|
var second = e.detail.value * this.audioCtx.duration / 100
|
||||||
|
this.audioCtx.seek(second)
|
||||||
|
},
|
||||||
|
change(e) {
|
||||||
|
this.setMusic(e.currentTarget.dataset.index)
|
||||||
|
this.play()
|
||||||
|
}
|
||||||
|
})
|
@ -0,0 +1,33 @@
|
|||||||
|
<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>
|
||||||
|
<include src="info.wxml" />
|
||||||
|
</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="/image/01.png" bindtap="changePage" data-page="2" />
|
||||||
|
<image wx:if="{{state=='paused'}}" src="/image/02.png" bindtap="play" />
|
||||||
|
<image wx:else src="/image/02stop.png" bindtap="pause" />
|
||||||
|
<image src="/image/03.png" bindtap="next" />
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
@ -0,0 +1,217 @@
|
|||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-item.active {
|
||||||
|
color: #c25b5b;
|
||||||
|
border-bottom: #c25b5b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content>swiper {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player {
|
||||||
|
background: #222;
|
||||||
|
border-top: 1px solid #252525;
|
||||||
|
height: 112rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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: 20px 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: 1px solid #555;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-info-list>.list-inner>.list-item>view {
|
||||||
|
width: 200rpx;
|
||||||
|
margin: 10rpx auto;
|
||||||
|
font-size: 10pt;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #222;
|
||||||
|
border-top: 1px solid #252525;
|
||||||
|
height: 112rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-cover {
|
||||||
|
width: 80rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
margin-left: 20rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
border: 1px solid #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-info {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 10pt;
|
||||||
|
line-height: 38rpx;
|
||||||
|
margin-left: 20rpx;
|
||||||
|
padding-bottom: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-controls image {
|
||||||
|
width: 80rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
margin-right: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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: 122rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
@ -0,0 +1,56 @@
|
|||||||
|
<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="/image/banner.jpg" />
|
||||||
|
</swiper-item>
|
||||||
|
<swiper-item>
|
||||||
|
<image src="/image/banner.jpg" />
|
||||||
|
</swiper-item>
|
||||||
|
<swiper-item>
|
||||||
|
<image src="/image/banner.jpg" />
|
||||||
|
</swiper-item>
|
||||||
|
</swiper>
|
||||||
|
<view class="content-info-portal">
|
||||||
|
<view>
|
||||||
|
<image src="/image/04.png" />
|
||||||
|
<text>私人FM</text>
|
||||||
|
</view>
|
||||||
|
<view>
|
||||||
|
<image src="/image/05.png" />
|
||||||
|
<text>每日歌曲推荐</text>
|
||||||
|
</view>
|
||||||
|
<view>
|
||||||
|
<image src="/image/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="/image/cover.jpg" />
|
||||||
|
<view>紫罗兰</view>
|
||||||
|
</view>
|
||||||
|
<view class="list-item">
|
||||||
|
<image src="/image/cover.jpg" />
|
||||||
|
<view>五月之歌</view>
|
||||||
|
</view>
|
||||||
|
<view class="list-item">
|
||||||
|
<image src="/image/cover.jpg" />
|
||||||
|
<view>菩提树</view>
|
||||||
|
</view>
|
||||||
|
<view class="list-item">
|
||||||
|
<image src="/image/cover.jpg" />
|
||||||
|
<view>欢乐颂</view>
|
||||||
|
</view>
|
||||||
|
<view class="list-item">
|
||||||
|
<image src="/image/cover.jpg" />
|
||||||
|
<view>安魂曲</view>
|
||||||
|
</view>
|
||||||
|
<view class="list-item">
|
||||||
|
<image src="/image/cover.jpg" />
|
||||||
|
<view>摇篮曲</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
@ -0,0 +1,16 @@
|
|||||||
|
<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="#d333a31" block-size="12" backgroundColor="#dadada" value="{{play.percent}}" />
|
||||||
|
</view>
|
||||||
|
<text>{{play.duration}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
@ -0,0 +1,14 @@
|
|||||||
|
<!-- <view style="background: #eee;color: #000;height: 100%;"> -->
|
||||||
|
<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>
|
||||||
|
<view class="playlist-controls">
|
||||||
|
<text wx:if="{{index==playIndex}}">正在播放</text>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
<!-- </view> -->
|
@ -0,0 +1,7 @@
|
|||||||
|
// pages/test/test.js
|
||||||
|
Page({
|
||||||
|
scroll(e)
|
||||||
|
{
|
||||||
|
console.log(e.detail)
|
||||||
|
},
|
||||||
|
})
|
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"usingComponents": {}
|
||||||
|
}
|
@ -0,0 +1,7 @@
|
|||||||
|
<scroll-view scroll-x scorll-y style="height: 200px;" bindscroll="scroll">
|
||||||
|
<view style="width: 200%;height: 400px;background: #ccc;"></view>
|
||||||
|
</scroll-view>
|
||||||
|
<view>缩放模式测试</view>
|
||||||
|
<image style="width: 200px;height: 200px;background: #eee;" mode="scaleToFill" src="/image/test.png"></image>
|
||||||
|
<view>裁剪模式测试</view>
|
||||||
|
<image style="width: 200px;height: 200px;background: #eee;" mode="top" src="/image/test.png"></image>
|
@ -0,0 +1 @@
|
|||||||
|
/* pages/test/test.wxss */
|
@ -0,0 +1,52 @@
|
|||||||
|
{
|
||||||
|
"description": "项目配置文件",
|
||||||
|
"packOptions": {
|
||||||
|
"ignore": [],
|
||||||
|
"include": []
|
||||||
|
},
|
||||||
|
"setting": {
|
||||||
|
"bundle": false,
|
||||||
|
"userConfirmedBundleSwitch": false,
|
||||||
|
"urlCheck": true,
|
||||||
|
"scopeDataCheck": false,
|
||||||
|
"coverView": true,
|
||||||
|
"es6": true,
|
||||||
|
"postcss": true,
|
||||||
|
"compileHotReLoad": false,
|
||||||
|
"lazyloadPlaceholderEnable": false,
|
||||||
|
"preloadBackgroundData": false,
|
||||||
|
"minified": true,
|
||||||
|
"autoAudits": false,
|
||||||
|
"newFeature": false,
|
||||||
|
"uglifyFileName": false,
|
||||||
|
"uploadWithSourceMap": true,
|
||||||
|
"useIsolateContext": true,
|
||||||
|
"nodeModules": false,
|
||||||
|
"enhance": true,
|
||||||
|
"useMultiFrameRuntime": true,
|
||||||
|
"useApiHook": true,
|
||||||
|
"useApiHostProcess": true,
|
||||||
|
"showShadowRootInWxmlPanel": true,
|
||||||
|
"packNpmManually": false,
|
||||||
|
"enableEngineNative": false,
|
||||||
|
"packNpmRelationList": [],
|
||||||
|
"minifyWXSS": true,
|
||||||
|
"showES6CompileOption": false,
|
||||||
|
"minifyWXML": true,
|
||||||
|
"babelSetting": {
|
||||||
|
"ignore": [],
|
||||||
|
"disablePlugins": [],
|
||||||
|
"outputPath": ""
|
||||||
|
},
|
||||||
|
"condition": false
|
||||||
|
},
|
||||||
|
"compileType": "miniprogram",
|
||||||
|
"libVersion": "2.19.4",
|
||||||
|
"appid": "wx5815e4d0b33a2993",
|
||||||
|
"projectname": "miniprogram-92",
|
||||||
|
"condition": {},
|
||||||
|
"editorSetting": {
|
||||||
|
"tabIndent": "insertSpaces",
|
||||||
|
"tabSize": 2
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"desc": "关于本文件的更多信息,请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
|
||||||
|
"rules": [{
|
||||||
|
"action": "allow",
|
||||||
|
"page": "*"
|
||||||
|
}]
|
||||||
|
}
|