[ { "path": "README.md", "content": "![](https://img.shields.io/badge/language-js-orange.svg)\r\n![](https://img.shields.io/badge/platform-wechat-lightgrey.svg)\r\n## 初窥\r\n![](https://github.com/MengZhaoFly/wechatApp-netease_cloudmusic/blob/master/results/all.gif)
\r\ntodo:\r\n- [ ] 添加音乐到收藏（最近）列表\r\n- [ ] 歌词滚动\r\n## 从一个hello world开始\r\n微信开发者工具生成 目录如下：\r\n```\r\n.\r\n|-- app.js\r\n|-- app.json\r\n|-- app.wxss\r\n|-- pages \r\n| |-- index # 主页\r\n| | |-- index.js\r\n| | |-- index.json\r\n| | |-- index.wxml\r\n| | `-- index.wxss\r\n| `-- log # 日志页面\r\n| | |-- log.js\r\n| | |-- log.json\r\n| | |-- log.wxml\r\n| | `-- log.wxss\r\n`-- utils # 工具\r\n `-- util.js\r\n```\r\n大体为:\r\n每一个page即是一个页面文件 ，每个页面有一个js/wxml/wxss/json文件 规定：**描述页面的这四个文件必须具有相同的路径与文件名。**
\r\n全局下同路，为公共的逻辑，样式，配置
\r\n与html不同:用`view text navigator` 代替 `div span a`\r\n\r\n## 开发者文档走马观花\r\n**app.json:** 注册pages window tabBar networkTimeout
\r\n[组件说明](https://mp.weixin.qq.com/debug/wxadoc/dev/component/)
\r\n***.js:** 作为逻辑层 与wxml交互 有着丰富的 \r\n网络，\r\n媒体，\r\n文件，\r\n数据缓存，\r\n位置，\r\n设备，\r\n界面...的api
\r\n[官方文档](https://mp.weixin.qq.com/debug/wxadoc/dev/api/)
\r\n***.wxml:** 数据驱动的视图层 + 微信提供了大量的组件 表单 导航 媒体 ...\r\n## 官方组件不够,weui来凑\r\nweui为小程序提供了 weui.wxcss 但大多是造官方组件的轮子
\r\n这里精选,也算是补充两个常用组件
\r\n**对于小程序没有DOM操作 不熟悉mvvm思想的同学 是个很好的入门**\r\n1. navbar
\r\n![navbar](https://github.com/MengZhaoFly/wechatApp-netease_cloudmusic/blob/master/results/tabbar.gif)\r\n```html\r\n\r\n\r\n \r\n \r\n \r\n {{item}}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n```\r\nblock渲染data里面的四个tabs,slider为激活tab选项时候的表现，panel为内容面板\r\n```js\r\n//js\r\nvar sliderWidth = 96; // 需要设置slider的宽度，用于计算中间位置\r\nPage({\r\n data: {\r\n tabs: [\"选项一\", \"选项二\", \"选项三\"],\r\n activeIndex: 1,\r\n sliderOffset: 0,\r\n sliderLeft: 0\r\n },\r\n onLoad: function () {\r\n var that = this;\r\n wx.getSystemInfo({\r\n success: function(res) {\r\n that.setData({\r\n sliderLeft: (res.windowWidth / that.data.tabs.length - sliderWidth) / 2,\r\n sliderOffset: res.windowWidth / that.data.tabs.length * that.data.activeIndex\r\n });\r\n }\r\n });\r\n },\r\n tabClick: function (e) {\r\n this.setData({\r\n sliderOffset: e.currentTarget.offsetLeft,\r\n activeIndex: e.currentTarget.id\r\n });\r\n }\r\n});\r\n```\r\n了解mvvm思想的同学不难看出 通过tabs数组渲染出来选项后每次点击获取id 然后通过设置hidden显示或隐藏\r\n\r\n2. searchbar
\r\n![searchbar](https://github.com/MengZhaoFly/wechatApp-netease_cloudmusic/blob/master/results/searchbar.gif)\r\n```html\r\n \r\n \r\n \r\n \r\n \r\n 0}}\" bindtap=\"clearInput\">\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n 0}}\">\r\n \r\n \r\n 实时搜索文本\r\n \r\n \r\n \r\n```\r\n一个input输入框+一个搜索label+一个清楚内容的icon + 取消按钮\r\n```js\r\nPage({\r\n data: {\r\n inputShowed: false,\r\n inputVal: \"\"\r\n },\r\n showInput: function () {\r\n this.setData({\r\n inputShowed: true\r\n });\r\n },\r\n hideInput: function () {\r\n this.setData({\r\n inputVal: \"\",\r\n inputShowed: false\r\n });\r\n },\r\n clearInput: function () {\r\n this.setData({\r\n inputVal: \"\"\r\n });\r\n },\r\n inputTyping: function (e) {\r\n this.setData({\r\n inputVal: e.detail.value\r\n });\r\n }\r\n});\r\n```\r\ninput上面有一层label 通过Page里面状态的改变而操作其wxml状态的改变
\r\n不难体会到：**小程序和Vue**的思想还是挺接近的\r\n## 站在巨人的肩膀上为大佬们提供云音乐api\r\n ---获取云音乐api\r\n>[巨人的源github项目](https://github.com/Binaryify/NeteaseCloudMusicApi)
\r\n\r\n在此我将他部署到leancloud上
\r\n即可在线访问，免去烦人的本地localhost启动,在线url
\r\nhttp://neteasemusic.leanapp.cn
\r\n调用例子:
\r\nhttp://neteasemusic.leanapp.cn/search?keywords=海阔天空
\r\nhttp://neteasemusic.leanapp.cn/lyric?id=347230
\r\n![搜索结果](https://github.com/MengZhaoFly/wechatApp-netease_cloudmusic/blob/master/results/searchresult.jpg)\r\n具体参考api
\r\n>[详细文档](https://binaryify.github.io/NeteaseCloudMusicApi/#/?id=neteasecloudmusicapi)
\r\n## 一切具备 只欠东风\r\n生成目录\r\n```\r\n.\r\n|-- app.js\r\n|-- app.json\r\n|-- app.wxss\r\n|-- common.js #公用js\r\n|-- images #存放项目图片\r\n|-- style\r\n|   |-- weui.wxss   # 引入weui样式  万一你自己不想写css样式呢\r\n|-- pages\r\n|   |-- find   # 发现音乐\r\n|   |   |-- index.js\r\n| | |-- index.json\r\n| | |-- index.wxml\r\n| | `-- index.wxss\r\n|   |--my   # 我的音乐\r\n|   |   |-- index.js\r\n| | |-- index.json\r\n| | |-- index.wxml\r\n| | `-- index.wxss\r\n|   |--now  # 正在播放\r\n|   |   |-- index.js\r\n| | |-- index.json\r\n| | |-- index.wxml\r\n| | `-- index.wxss\r\n|   |--account   # 账号\r\n|   |   |-- index.js\r\n| | |-- index.json\r\n| | |-- index.wxml\r\n| | `-- index.wxss\r\n| |-- index # 主页\r\n| | |-- index.js\r\n| | |-- index.json\r\n| | |-- index.wxml\r\n| | `-- index.wxss\r\n| `-- log # 日志页面\r\n`-- utils # 工具\r\n `-- util.js\r\n```\r\n请先在在app.json中注册页面，设置navigation，配置tabbar
\r\n```js\r\n{\r\n \"pages\":[\r\n \"pages/find/index\",\r\n \"pages/my/index\",\r\n \"pages/now/index\",\r\n \"pages/account/index\",\r\n \"pages/index/index\"\r\n ],\r\n \"window\":{\r\n \"backgroundTextStyle\":\"light\",\r\n \"navigationBarBackgroundColor\": \"#D43C33\",\r\n \"navigationBarTitleText\": \"网易云音乐\",\r\n \"navigationBarTextStyle\":\"white\",\r\n \"backgroundColor\": \"#FBFCFD\"\r\n },\r\n \"tabBar\": {\r\n \"backgroundColor\":\"#2A2C2E\",\r\n \"color\": \"#a7a7a7\",\r\n \"selectedColor\": \"#ffffff\",\r\n \"list\": [{\r\n \"iconPath\":\"./images/find.png\",\r\n \"selectedIconPath\":\"./images/find1.png\",\r\n \"pagePath\":\"pages/find/index\",\r\n \"text\": \"发现音乐\"\r\n }, {\r\n \"iconPath\":\"./images/my.png\",\r\n \"selectedIconPath\":\"./images/my1.png\",\r\n \"pagePath\": \"pages/my/index\",\r\n \"text\": \"我的音乐\"\r\n }, {\r\n \"iconPath\":\"./images/now.png\",\r\n \"selectedIconPath\":\"./images/now1.png\",\r\n \"pagePath\": \"pages/now/index\",\r\n \"text\": \"正在播放\"\r\n }, {\r\n \"iconPath\":\"./images/account.png\",\r\n \"selectedIconPath\":\"./images/account1.png\",\r\n \"pagePath\": \"pages/account/index\",\r\n \"text\": \"账号\"\r\n }]\r\n }\r\n}\r\n```\r\n\r\n- 发现音乐
\r\n![](https://github.com/MengZhaoFly/wechatApp-netease_cloudmusic/blob/master/results/mysong.jpg)
\r\n布局分为搜索框,navbar,swiper滑动，三列，以及两行三列构成
\r\ntips:小程序中`flex`布局基本无兼容性问题 ，可大胆使用
\r\n前三个可用上文提到的组件和小程序swiper组件快速完成，
\r\n对于搜索功能
\r\n我们在搜索input上绑定一个`inputTyping`事件，这样每次键入完毕都可以得到结果，然后我们直接请求api
\r\n\r\n```js\r\n //index.js\r\n//获取应用实例\r\n// 个人网易云音乐 ID 66919655\r\nvar app = getApp()\r\nPage({\r\n data: {\r\n searchReault: []\r\n },\r\n    //绑定事件\r\n    inputTyping: function (e) {\r\n let that = this\r\n console.log(e.detail)\r\n this.setData({\r\n inputVal: e.detail.value\r\n });\r\n wx.request({\r\n url: 'http://neteasemusic.leanapp.cn/search',\r\n data: {\r\n keywords: e.detail.value\r\n },\r\n method: 'GET',\r\n success: function (res) {\r\n let temp = []\r\n if(!res.data.result.songs){\r\n return ;\r\n }\r\n                //遍历数据\r\n                res.data.result.songs.forEach((song, index) => {\r\n temp.push({\r\n id: song.id,\r\n name: song.name,\r\n mp3Url: song.mp3Url,\r\n picUrl: song.album.picUrl,\r\n singer: song.artists[0].name\r\n })\r\n                    //设置数据\r\n                   that.setData({\r\n searchReault: temp\r\n })\r\n })\r\n // 存入搜索的结果进缓存\r\n wx.setStorage({\r\n key:\"searchReault\",\r\n data:temp\r\n })\r\n }\r\n })\r\n }\r\n});\r\n```\r\ndata里面的searchReault数组存入搜索结果，发起一个wx.request,用GET方式传入参数，组织好json后设置data，然后将搜索结果存入本地缓存
\r\n**wxml渲染searchReault:**
\r\n![](https://github.com/MengZhaoFly/wechatApp-netease_cloudmusic/blob/master/results/search.jpg)
\r\n并且自定义data属性，navigator的打开方式为tab切换`open-type=\"switchTab\"` ，绑定一个tonow事件bindtap=\"tonow\"\r\n```html\r\n\r\n \r\n \r\n {{item.name}}\r\n {{item.singer}}\r\n \r\n \r\n \r\n\r\n```\r\n在tonow事件中,获取当前的歌曲\r\n```\r\n tonow: function (event) {\r\n let songData = {\r\n id: event.currentTarget.dataset.id,\r\n name: event.currentTarget.dataset.name,\r\n mp3Url: event.currentTarget.dataset.songurl,\r\n picUrl: event.currentTarget.dataset.picurl,\r\n singer: event.currentTarget.dataset.singer\r\n }\r\n // 将当前点击的歌曲保存在缓存中\r\n wx.setStorageSync('clickdata', songData)\r\n wx.switchTab({\r\n url: '../now/index'\r\n })\r\n }\r\n```\r\n- 正在播放
\r\n![](https://github.com/MengZhaoFly/wechatApp-netease_cloudmusic/blob/master/results/nowplay.jpg)
\r\n**布局：**歌曲封面，滑动条上下为操作按钮，\r\n封面在采用圆角,rotate,transition既可以\r\n**滑动快进:**在滑动条上绑定事件 slider3change\r\n```js\r\n//滑动 歌曲快进\r\nfunction sliderToseek(e, cb) {\r\n wx.getBackgroundAudioPlayerState({\r\n success: function (res) {\r\n var dataUrl = res.dataUrl\r\n var duration = res.duration\r\n let val = e.detail.value\r\n let cal = val * duration / 100\r\n cb && cb(dataUrl, cal);\r\n }\r\n })\r\n}\r\n//分隔 在page中调用\r\n slider3change: function (e) {\r\n sliderToseek(e, function (dataUrl, cal) {\r\n wx.playBackgroundAudio({\r\n dataUrl: dataUrl\r\n })\r\n wx.seekBackgroundAudio({\r\n position: cal\r\n })\r\n })\r\n },\r\n```\r\n一个自定义的sliderToseek函数:
\r\n参数e 可以获取滑动的值，获取正在播放的音乐信息成功后执行`回调函数1->播放 回调函数2->跳到指定位置`;\r\n**拆分歌词：**\r\n在api中得到的歌词：\"[00:00.00] 作曲 : 黄家驹 [00:01.00] 作词 : 黄家驹 [00:18.580]今天我 寒夜里看雪飘过 [00:25.050]怀着冷却了的心窝漂远方 [00:30.990]风雨里追赶 \"\r\n在page外定义函数：
\r\n以`]`划分数组 第二部分就是歌词内容:`item.split(']')[1]` 第一部分即为对应的时间:`item.split(']')[0]`\r\n```js\r\n// 获取歌词\r\nfunction getlyric(id,cb) {\r\n console.log('id:',id)\r\n let url = `http://neteasemusic.leanapp.cn/lyric`\r\n wx.request({\r\n url: url,\r\n data: {\r\n id: id\r\n },\r\n method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT\r\n // header: {}, // 设置请求的 header\r\n success: function (res) {\r\n // success\r\n \r\n if (!res.data.lrc.lyric) return false;\r\n \r\n let lyric = res.data.lrc.lyric\r\n \r\n let timearr = lyric.split('[')\r\n let obj = {}\r\n let lyricArr=[]\r\n // seek 为键 歌词为value\r\n timearr.forEach((item) => {\r\n let key = parseInt(item.split(']')[0].split(':')[0]) * 60 + parseInt(item.split(']')[0].split(':')[1])\r\n let val = item.split(']')[1]\r\n \r\n obj[key] = val\r\n })\r\n for(let key in obj){\r\n // obj[key] = obj[key].split('\\n')[0]\r\n lyricArr.push(obj[key])\r\n }\r\n cb&&cb(obj,lyricArr)\r\n },\r\n fail: function (res) {\r\n // fail\r\n },\r\n complete: function (res) {\r\n // complete\r\n }\r\n })\r\n}\r\n```\r\n在page中调用:传入歌曲ID(上文我们已经存入缓存，在缓存中取出即可),和将其设置在data的回调\r\n```js\r\n getlyric(id,function(data, lyricArr){\r\n that.setData({\r\n lyricobj:data,\r\n lyricArr:lyricArr\r\n })\r\n })\r\n  ```\r\n wxml进行渲染：\r\n ```html\r\n \r\n\r\n```\r\n**添加歌曲：**
\r\n![](https://github.com/MengZhaoFly/wechatApp-netease_cloudmusic/blob/master/results/add.jpg)\r\n我的可以在本地缓存中添加两个key入对应的信息
\r\nlike:我的喜欢
\r\nrecent:最近
\r\n\r\n选择事件\r\n```js\r\n radioChange: function(e) {\r\n console.log('radio发生change事件，携带value值为：', e.detail.value)\r\n this.setData({\r\n percent:'100%'\r\n })\r\n },\r\n //radio发生change事件，携带value值为： like\r\n //radio发生change事件，携带value值为： recent\r\n ```\r\n点击添加按钮，向上呼出选项，将当前播放的歌曲设置到对应的数组即可
\r\n**进行当前歌曲的播放:**\r\n页面onshow的时候，获取本地缓存的信息，在success的回调中，设置到data,以供页面解析，而后在获取歌词的函数中也进行一次回调，设置歌词，\r\n播放本地音乐，播放成功之后，在success的回调中，获取正在播放的音乐信息，包括该歌曲的总时长，再进行设置。\r\n```\r\n onShow: function () {\r\n var that = this;\r\n console.log('正在播放 is on show')\r\n // 获取缓存\r\n wx.getStorage({\r\n key: 'clickdata',\r\n success: function (res) {\r\n var value = res.data\r\n var id = value.id\r\n if (value) {\r\n // 设置到data\r\n that.setData({\r\n id:id,\r\n name: value.name,\r\n src: value.mp3Url,\r\n poster: value.picUrl,\r\n author: value.singer\r\n })\r\n getlyric(id,function(data, lyricArr){\r\n that.setData({\r\n lyricobj:data,\r\n lyricArr:lyricArr\r\n })\r\n }) \r\n }\r\n let url = that.data.src || value.mp3Url;\r\n // 播放\r\n wx.playBackgroundAudio({\r\n dataUrl: value.mp3Url,\r\n title: value.name,\r\n coverImgUrl: value.picUrl,\r\n success: function () {\r\n wx.hideLoading()\r\n console.log('url',url)\r\n setTimeout(function(){\r\n wx.getBackgroundAudioPlayerState({\r\n success: function (res) {\r\n var tempduration = res.duration\r\n console.log('get bg success', tempduration, res)\r\n // 设置时长\r\n that.setData({\r\n sumduration: tempduration\r\n })\r\n },\r\n complete: function (res) {\r\n console.log(' get bg complete:', res)\r\n }\r\n })\r\n },1000)\r\n },\r\n complete:function(){\r\n // 获取正在播放的信息\r\n console.log('play',url)\r\n \r\n }\r\n })\r\n }\r\n })\r\n },\r\n ```\r\n这样我们不知不觉进入多个回调嵌套的问题\r\n## 代码优化，使用Promise,较为优雅地解决回调\r\n**小程序暂时不支持async await**
\r\n在 common.js 中为小程序提供的api上裹上一层Promise，并且通过`module.exports = operation`暴露出去
\r\n```js\r\nconst operation = {\r\n getMusicData: function () {\r\n return new Promise((resolve, reject) => {\r\n wx.getBackgroundAudioPlayerState({\r\n success: function (res) {\r\n resolve(res);\r\n },\r\n fail: function (err) {\r\n reject(err);\r\n }\r\n })\r\n })\r\n },\r\n // 播放音乐 参数:url title 图片url\r\n playMusic: function (url, title, pic) {\r\n return new Promise((resolve, reject) => {\r\n wx.playBackgroundAudio({\r\n dataUrl: url,\r\n title: title,\r\n coverImgUrl: pic,\r\n success: function () {\r\n resolve(true)\r\n },\r\n fail: function () {\r\n reject(new Error('播放错误'));\r\n }\r\n })\r\n })\r\n },\r\n asyncGetStorage: function (key) {\r\n return new Promise((resolve, reject) => {\r\n wx.getStorage({\r\n key: key,\r\n success: function (res) {\r\n resolve(res.data)\r\n },\r\n fail: function (err) {\r\n reject(err)\r\n }\r\n })\r\n })\r\n },\r\n getlyric: function (id) {\r\n return new Promise((resolve, reject) => {\r\n console.log('id:', id)\r\n let url = `http://neteasemusic.leanapp.cn/lyric`\r\n wx.request({\r\n url: url,\r\n data: {\r\n id: id\r\n },\r\n method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT\r\n // header: {}, // 设置请求的 header\r\n success: function (res) {\r\n // success\r\n if (!res.data.lrc.lyric) return false;\r\n let lyric = res.data.lrc.lyric\r\n let timearr = lyric.split('[')\r\n let obj = {}\r\n let lyricArr = []\r\n // seek 为键 歌词为value\r\n timearr.forEach((item) => {\r\n let key = parseInt(item.split(']')[0].split(':')[0]) * 60 + parseInt(item.split(']')[0].split(':')[1])\r\n let val = item.split(']')[1]\r\n obj[key] = val\r\n })\r\n for (let key in obj) {\r\n // obj[key] = obj[key].split('\\n')[0]\r\n lyricArr.push(obj[key])\r\n }\r\n // cb && cb(obj, lyricArr)\r\n resolve(lyricArr)\r\n },\r\n fail: function (err) {\r\n reject(err)\r\n },\r\n complete: function (res) {\r\n // complete\r\n }\r\n })\r\n })\r\n }\r\n}\r\nmodule.exports = operation\r\n```\r\n重写一下**当前歌曲播放事件**\r\n```js\r\n onShow: function () {\r\n let that = this;\r\n Common.asyncGetStorage('clickdata')//本地缓存\r\n .then(data => {\r\n // console.log(data)\r\n if (!data) return;\r\n that.setData({\r\n id: data.id,\r\n name: data.name,\r\n src: data.mp3Url,\r\n poster: data.picUrl,\r\n author: data.singer\r\n })\r\n return Common.playMusic(data.mp3Url, data.name, data.picUrl);\r\n })\r\n .then(status => {\r\n if(!status) return;\r\n wx.hideLoading();\r\n console.log('id,',that.data.id)\r\n return Common.getlyric(that.data.id)\r\n })\r\n .then((lyricArr) => {\r\n console.log('lyricArr',lyricArr)\r\n that.setData({\r\n lyricArr: lyricArr\r\n })\r\n return Common.getMusicData()\r\n })\r\n .then(data => {\r\n let tempduration = data.duration\r\n console.log('get bg success', tempduration, data)\r\n // 设置时长\r\n that.setData({\r\n sumduration: tempduration\r\n })\r\n })\r\n },\r\n ```\r\n  这样即可缩减部分代码.\r\n***\r\n## 有帮助可以Star\r\n18届小前端求职中`['html/html5', 'css/css3', 'js/es5/es6', 'node']`\r\n1424254461@qq.com\r\n\r\n\r\n\r\n" }, { "path": "app.js", "content": "//app.js\nApp({\n onLaunch: function () {\n //调用API从本地缓存中获取数据\n var logs = wx.getStorageSync('logs') || []\n logs.unshift(Date.now())\n wx.setStorageSync('logs', logs)\n wx.showLoading({\n title: '加载中',\n mask: true\n })\n },\n getUserInfo:function(cb){\n var that = this\n if(this.globalData.userInfo){\n typeof cb == \"function\" && cb(this.globalData.userInfo)\n }else{\n //调用登录接口\n wx.login({\n success: function () {\n wx.getUserInfo({\n success: function (res) {\n that.globalData.userInfo = res.userInfo\n typeof cb == \"function\" && cb(that.globalData.userInfo)\n }\n })\n }\n })\n }\n },\n globalData:{\n userInfo:null\n }\n})" }, { "path": "app.json", "content": "{\n \"pages\":[\n \"pages/find/index\",\n \"pages/my/index\",\n \"pages/now/index\",\n \"pages/account/index\",\n \"pages/index/index\"\n ],\n \"window\":{\n \"backgroundTextStyle\":\"light\",\n \"navigationBarBackgroundColor\": \"#D43C33\",\n \"navigationBarTitleText\": \"网易云音乐\",\n \"navigationBarTextStyle\":\"white\",\n \"backgroundColor\": \"#FBFCFD\"\n },\n \"tabBar\": {\n \"backgroundColor\":\"#2A2C2E\",\n \"color\": \"#a7a7a7\",\n \"selectedColor\": \"#ffffff\",\n \"list\": [{\n \"iconPath\":\"./images/find.png\",\n \"selectedIconPath\":\"./images/find1.png\",\n \"pagePath\":\"pages/find/index\",\n \"text\": \"发现音乐\"\n }, {\n \"iconPath\":\"./images/my.png\",\n \"selectedIconPath\":\"./images/my1.png\",\n \"pagePath\": \"pages/my/index\",\n \"text\": \"我的音乐\"\n }, {\n \"iconPath\":\"./images/now.png\",\n \"selectedIconPath\":\"./images/now1.png\",\n \"pagePath\": \"pages/now/index\",\n \"text\": \"正在播放\"\n }, {\n \"iconPath\":\"./images/account.png\",\n \"selectedIconPath\":\"./images/account1.png\",\n \"pagePath\": \"pages/account/index\",\n \"text\": \"账号\"\n }]\n }\n}\n" }, { "path": "app.wxss", "content": "/**app.wxss**/\n@import 'style/weui.wxss';\n.container {\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n font-size: 16px;\n font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;\n} \n.searchbar-result{\n position: fixed;\n left: 0;\n top: 26px;\n width: 100%;\n\n}\n.weui-navbar__item.weui-bar__item_on {\ncolor:#D43C33;\n\n}\n.weui-navbar__slider {\nbackground-color:#D43C33;\n\n}\nswiper image{\n width: 100%;\n}\n.three-circle .weui-grids navigator{\n background-color: #fff;\n border-right:none;\n\n}\n.weui-grid__label {\nfont-size:12px;\n\n\n}\n.weui-grid__icon {\nwidth:40px;\nheight:40px;\nmargin:0 auto;\n}\n.header{\n position: relative;\n background-color: #fff;\n}\n.header text{\n font-size:20px;\n font-weight:400;\n padding: 20px 0;\n}\n.header text:first-child{\n padding-left: 15px;\n \n}\n.header text:first-child::before{\n content: '';\n display: inline-block;\n width: 2px;\n height: 20px;\n vertical-align: middle;\n background-color: #D43C33;\n position: absolute;\n left: 0;\n top: 6px;\n}\n.header text:last-child{\n padding-left: 10px;\n}\n.lists-content{\n display: flex;\n justify-content: space-between;\n flex-wrap: wrap;\n \n}\n.lists-content navigator{\n width: calc((100% - 8px) / 3);\n margin-top: 12px;\n}\n.lists-content .image{\nwidth: 100%;\n height: 130px;\n margin: 0 auto;\n\n}\n.image{\n \n background-size: cover;\n}\n.lists-content navigator view:last-child{\n font-size: 14px;\n width: 100%;\n height: 44px;\n margin-top: 5px;\n display:block;white-space: normal; overflow: hidden; text-overflow:ellipsis;\n \n}\n.weui-cells::after {\nborder-bottom:none;\n\n\n}\n.weui-cell::before {\nleft:60px;\n\n}\n.weui-cell__bd{\n padding-left: 15px;\n}\n.listen-content .weui-cell::before {\nleft:80px;\n\n}\n.searchbar-result .weui-cell::before {\nleft: 0;\n\n}\n.searchbar-result .weui-cells{\n overflow-y: scroll;\n}\n.weui-search-bar__cancel-btn{\n color: #D43C33;\n}\n\n\n\n\n\n\n\n" }, { "path": "common.js", "content": "const operation = {\n getMusicData: function () {\n return new Promise((resolve, reject) => {\n wx.getBackgroundAudioPlayerState({\n success: function (res) {\n resolve(res);\n },\n fail: function (err) {\n reject(err);\n }\n })\n })\n },\n // 播放音乐 参数:url title 图片url\n playMusic: function (url, title, pic) {\n return new Promise((resolve, reject) => {\n wx.playBackgroundAudio({\n dataUrl: url,\n title: title,\n coverImgUrl: pic,\n success: function () {\n resolve(true)\n },\n fail: function () {\n reject(new Error('播放错误'));\n }\n })\n })\n },\n asyncGetStorage: function (key) {\n return new Promise((resolve, reject) => {\n wx.getStorage({\n key: key,\n success: function (res) {\n resolve(res.data)\n },\n fail: function (err) {\n reject(err)\n }\n })\n })\n },\n getlyric: function (id) {\n return new Promise((resolve, reject) => {\n console.log('id:', id)\n let url = `http://neteasemusic.leanapp.cn/lyric`\n wx.request({\n url: url,\n data: {\n id: id\n },\n method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT\n // header: {}, // 设置请求的 header\n success: function (res) {\n // success\n if (!res.data.lrc.lyric) return false;\n let lyric = res.data.lrc.lyric\n let timearr = lyric.split('[')\n let obj = {}\n let lyricArr = []\n // seek 为键 歌词为value\n timearr.forEach((item) => {\n let key = parseInt(item.split(']')[0].split(':')[0]) * 60 + parseInt(item.split(']')[0].split(':')[1])\n let val = item.split(']')[1]\n obj[key] = val\n })\n for (let key in obj) {\n // obj[key] = obj[key].split('\\n')[0]\n lyricArr.push(obj[key])\n }\n // cb && cb(obj, lyricArr)\n resolve(lyricArr)\n },\n fail: function (err) {\n reject(err)\n },\n complete: function (res) {\n // complete\n }\n })\n })\n }\n}\nmodule.exports = operation\n" }, { "path": "pages/account/index.js", "content": "//index.js\n//获取应用实例\nvar app = getApp()\nPage({\n data: {\n motto: 'Hello World',\n userInfo: {}\n },\n //事件处理函数\n bindViewTap: function() {\n wx.navigateTo({\n url: '../logs/logs'\n })\n },\n onLoad: function () {\n console.log('onLoad')\n var that = this\n //调用应用实例的方法获取全局数据\n app.getUserInfo(function(userInfo){\n //更新数据\n that.setData({\n userInfo:userInfo\n })\n }),\n wx.setNavigationBarTitle({\n title: '个人中心'\n })\n }\n})\n" }, { "path": "pages/account/index.json", "content": "{}" }, { "path": "pages/account/index.wxml", "content": "\n\n\n\n \n \n {{userInfo.nickName}}\n \n \n\n" }, { "path": "pages/account/index.wxss", "content": "/**index.wxss**/\n.userinfo {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.userinfo-avatar {\n width: 128rpx;\n height: 128rpx;\n margin: 20rpx;\n border-radius: 50%;\n}\n\n.userinfo-nickname {\n color: #aaa;\n}\n\n.usermotto {\n margin-top: 200px;\n}\n.flex-item{\n width: 100rpx;\n height: 100rpx;\n background-color: red; \n}\n\n\n" }, { "path": "pages/account/logs.js", "content": "// pages/account/logs.js\nPage({\n data:{},\n onLoad:function(options){\n // 页面初始化 options为页面跳转所带来的参数\n },\n onReady:function(){\n // 页面渲染完成\n },\n onShow:function(){\n // 页面显示\n },\n onHide:function(){\n // 页面隐藏\n },\n onUnload:function(){\n // 页面关闭\n }\n})" }, { "path": "pages/account/logs.json", "content": "{}" }, { "path": "pages/account/logs.wxml", "content": "\npages/account/logs.wxml\n" }, { "path": "pages/account/logs.wxss", "content": "/* pages/account/logs.wxss */" }, { "path": "pages/find/index.js", "content": "//index.js\n//获取应用实例\n// 个人网易云音乐 ID 66919655\nvar app = getApp()\nPage({\n data: {\n inputShowed: false,\n inputVal: \"\",\n tabs: [\"个性推荐\", \"歌单\", \"主播电台\", \"排行榜\"],\n activeIndex: 0,\n sliderOffset: 0,\n sliderLeft: 0,\n imgUrls: [\n 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',\n 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',\n 'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'\n ],\n indicatorDots: true,\n autoplay: true,\n interval: 2000,\n duration: 1000,\n circular: true,\n // 歌曲搜索的结果\n searchReault: []\n },\n showInput: function () {\n this.setData({\n inputShowed: true\n });\n },\n hideInput: function () {\n this.setData({\n inputVal: \"\",\n inputShowed: false\n });\n },\n clearInput: function () {\n this.setData({\n inputVal: \"\"\n });\n },\n inputTyping: function (e) {\n let that = this\n console.log(e.detail)\n this.setData({\n inputVal: e.detail.value\n });\n // let url = `http://localhost:3000/search?keywords=${e.detail.value}`\n wx.request({\n url: 'http://neteasemusic.leanapp.cn/search',\n data: {\n keywords: e.detail.value\n },\n method: 'GET',\n success: function (res) {\n let temp = []\n if(!res.data.result.songs){\n return ;\n }\n res.data.result.songs.forEach((song, index) => {\n\n temp.push({\n id: song.id,\n name: song.name,\n mp3Url: song.mp3Url,\n picUrl: song.album.picUrl,\n singer: song.artists[0].name\n })\n that.setData({\n searchReault: temp\n })\n\n\n })\n // 存入搜索的结果进缓存\n wx.setStorage({\n key:\"searchReault\",\n data:temp\n })\n },\n fail: function (res) {\n // fail\n },\n complete: function (res) {\n // complete\n\n }\n })\n },\n onShow: function(){\n wx.hideLoading()\n },\n onLoad: function () {\n var that = this;\n wx.getSystemInfo({\n success: function (res) {\n that.setData({\n sliderOffset: res.windowWidth / that.data.tabs.length * that.data.activeIndex\n });\n }\n });\n },\n tabClick: function (e) {\n this.setData({\n sliderOffset: e.currentTarget.offsetLeft,\n activeIndex: e.currentTarget.id\n });\n },\n tonow: function (event) {\n let songData = {\n id: event.currentTarget.dataset.id,\n name: event.currentTarget.dataset.name,\n mp3Url: event.currentTarget.dataset.songurl,\n picUrl: event.currentTarget.dataset.picurl,\n singer: event.currentTarget.dataset.singer\n }\n // 将当前点击的歌曲保存在缓存中\n wx.setStorageSync('clickdata', songData)\n wx.switchTab({\n url: '../now/index'\n })\n }\n});\n" }, { "path": "pages/find/index.json", "content": "{}" }, { "path": "pages/find/index.wxml", "content": "\n\n \n \n\n \n \n \n \n \n 0}}\" bindtap=\"clearInput\">\n \n \n \n \n \n \n \n \n \n \n 0}}\" style=\"overflow-y: scroll;\" >\n \n \n \n {{item.name}}\n {{item.singer}}\n \n \n \n \n \n \n \n \n \n \n \n \n \n\n" }, { "path": "pages/find/index.wxss", "content": "/**index.wxss**/\n.userinfo {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.userinfo-avatar {\n width: 128rpx;\n height: 128rpx;\n margin: 20rpx;\n border-radius: 50%;\n}\n\n.userinfo-nickname {\n color: #aaa;\n}\n\n.usermotto {\n margin-top: 200px;\n}\n.song-name{\n color: #507daf;\n font-size: 18px;\n}\n.song-singer{\n color: #888888;\n font-size: 12px;\n}" }, { "path": "pages/index/index.js", "content": "//index.js\n//获取应用实例\nvar app = getApp()\nPage({\n data: {\n motto: 'Hello World',\n userInfo: {}\n },\n //事件处理函数\n bindViewTap: function() {\n wx.navigateTo({\n url: '../logs/logs'\n })\n },\n onLoad: function () {\n console.log('onLoad')\n var that = this\n //调用应用实例的方法获取全局数据\n app.getUserInfo(function(userInfo){\n //更新数据\n that.setData({\n userInfo:userInfo\n })\n })\n wx.playBackgroundAudio({\n dataUrl: 'http://m2.music.126.net/Yev_vdcos-1_SX2qC9WUfw==/7856010580878729.mp3'\n })\n }\n})\n" }, { "path": "pages/index/index.json", "content": "{}" }, { "path": "pages/index/index.wxml", "content": "\n\n \n\n" }, { "path": "pages/index/index.wxss", "content": "/**app.wxss**/\n.container {\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n padding: 200rpx 0;\n box-sizing: border-box;\n} \n/**index.wxss**/\n.userinfo {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.userinfo-avatar {\n width: 128rpx;\n height: 128rpx;\n margin: 20rpx;\n border-radius: 50%;\n}\n\n.userinfo-nickname {\n color: #aaa;\n}\n\n.usermotto {\n margin-top: 200px;\n}\n.flex-item{\n width: 100rpx;\n height: 100rpx;\n background-color: red; \n}\n" }, { "path": "pages/logs/logs.js", "content": "//logs.js\nvar util = require('../../utils/util.js')\nPage({\n data: {\n logs: []\n },\n onLoad: function () {\n this.setData({\n logs: (wx.getStorageSync('logs') || []).map(function (log) {\n return util.formatTime(new Date(log))\n })\n })\n }\n})\n" }, { "path": "pages/logs/logs.json", "content": "{\n \"navigationBarTitleText\": \"查看启动日志\"\n}" }, { "path": "pages/logs/logs.wxml", "content": "\n\n \n {{index + 1}}. {{log}}\n \n\n" }, { "path": "pages/logs/logs.wxss", "content": ".log-list {\n display: flex;\n flex-direction: column;\n padding: 40rpx;\n}\n.log-item {\n margin: 10rpx;\n}\n" }, { "path": "pages/my/index.js", "content": "//index.js\n//获取应用实例\nvar app = getApp()\nPage({\n data: {\n motto: 'Hello World',\n userInfo: {}\n },\n //事件处理函数\n bindViewTap: function() {\n wx.navigateTo({\n url: '../logs/logs'\n })\n },\n redirect:function(){\n console.log('点击');\n wx.navigateTo({\n url: '../index/index',\n success: function(res){\n console.log(res)\n },\n fail: function(res) {\n // fail\n console.log(res)\n \n },\n complete: function(res) {\n // complete\n console.log(res)\n \n }\n })\n },\n onLoad: function () {\n console.log('onLoad')\n var that = this\n //调用应用实例的方法获取全局数据\n app.getUserInfo(function(userInfo){\n //更新数据\n that.setData({\n userInfo:userInfo\n })\n }),\n wx.setNavigationBarTitle({\n title: '我的音乐'\n })\n \n }\n})\n" }, { "path": "pages/my/index.json", "content": "{\n \"window\":{\n \"backgroundTextStyle\":\"light\",\n \"navigationBarBackgroundColor\": \"#D43C33\",\n \"navigationBarTitleText\": \"我的音乐\",\n \"navigationBarTextStyle\":\"white\",\n \"backgroundColor\": \"#FBFCFD\"\n }\n}" }, { "path": "pages/my/index.wxml", "content": "\n\n\n \n \n \n \n 本地播放\n 0\n \n \n \n 最近播放\n 100\n \n \n \n 我的电台\n 0\n \n \n \n 我的收藏\n 1\n \n \n 我的歌单\n \n \n \n \n \n \n 本地播放\n 41首\n \n \n\n \n \n \n 最近\n 13首\n \n \n \n\n \n \n\n" }, { "path": "pages/my/index.wxss", "content": "/**index.wxss**/\n.header{\n color: #888;\n}\n.listen-content .item{\n display: flex;\n padding: 10px;\n align-items: center;\n \n}\n.bg-img{\n width: 30px;\n height:30px;\n background-size: cover;\n background-repeat: no-repeat;\n}\n\n.count{\n color: #888888;\n}\n.listen-content .bg-img{\n width: 50px;\n height: 50px;\n}\n.header{\n padding-left: 15px;\n background-color: #eeeff0;\n}\n.listen-content .weui-cell:first-child{\n\n}\n.weui-cells::before {\nborder-top:none;\n\n\n}\n" }, { "path": "pages/now/index.js", "content": "//index.js\n//获取应用实例\nvar Common = require('../../common')\n\nvar app = getApp()\nPage({\n data: {\n id: 436514312,\n name: \"成都\",\n src: \"http://m2.music.126.net/7o5D4dA6271VktgawcbZFA==/18665309393829604.mp3\",\n poster: \"http://p1.music.126.net/34YW1QtKxJ_3YnX9ZzKhzw==/2946691234868155.jpg\",\n author: \"赵雷\",\n isplaying: true,\n islyric: false,\n sumduration: 0,\n lyricobj:{},\n lyricArr:[],\n isadd:false,\n items: [\n {name: 'recent', value: '最近'},\n {name: 'like', value: '我的收藏'}\n ],\n percent:'100%'\n },\n addsong:function(){\n this.setData({\n percent:'0'\n })\n },\n radioChange: function(e) {\n console.log('radio发生change事件，携带value值为：', e.detail.value)\n this.setData({\n percent:'100%'\n })\n },\n //事件处理函数\n bindViewTap: function () {\n wx.navigateTo({\n url: '../logs/logs'\n })\n },\n showCircle:function(){\n this.setData({\n islyric: true,\n percent:'100%'\n })\n },\n showlyric:function(){\n this.setData({\n islyric: false,\n percent:'100%'\n })\n },\n onLoad: function () {\n wx.showLoading({\n title: '加载中',\n mask: true\n })\n console.log('正在播放 onLoad')\n var that = this\n //调用应用实例的方法获取全局数据\n app.getUserInfo(function (userInfo) {\n //更新数据\n that.setData({\n userInfo: userInfo\n })\n }),\n wx.setNavigationBarTitle({\n title: '正在播放'\n })\n },\n onShow: function () {\n let that = this;\n Common.asyncGetStorage('clickdata')//本地缓存\n .then(data => {\n // console.log(data)\n if (!data) return;\n that.setData({\n id: data.id,\n name: data.name,\n src: data.mp3Url,\n poster: data.picUrl,\n author: data.singer\n })\n return Common.playMusic(data.mp3Url, data.name, data.picUrl);\n })\n .then(status => {\n if(!status) return;\n wx.hideLoading();\n console.log('id,',that.data.id)\n return Common.getlyric(that.data.id)\n })\n .then((lyricArr) => {\n console.log('lyricArr',lyricArr)\n that.setData({\n lyricArr: lyricArr\n })\n return Common.getMusicData()\n })\n .then(data => {\n let tempduration = data.duration\n console.log('get bg success', tempduration, data)\n // 设置时长\n that.setData({\n sumduration: tempduration\n })\n })\n },\n audioPlay: function () {\n //背景音乐信息\n\n wx.getBackgroundAudioPlayerState({\n success: function (res) {\n var status = res.status\n var dataUrl = res.dataUrl\n var currentPosition = res.currentPosition\n var duration = res.duration\n var downloadPercent = res.downloadPercent\n wx.playBackgroundAudio({\n dataUrl: dataUrl\n })\n wx.seekBackgroundAudio({\n position: currentPosition\n })\n\n }\n })\n this.setData({\n isplaying: true\n })\n },\n audioPause: function () {\n wx.pauseBackgroundAudio()\n this.setData({\n isplaying: false\n })\n },\n audio14: function () {\n\n },\n audioStart: function () {\n\n },\n slider3change: function (e) {\n sliderToseek(e, function (dataUrl, cal) {\n wx.playBackgroundAudio({\n dataUrl: dataUrl\n })\n wx.seekBackgroundAudio({\n position: cal\n })\n })\n\n },\n prev:function(){\n prevSong(this)\n }\n})\n// 上一曲\nfunction prevSong(that){\n let id = that.data.id\n console.log('id',id)\n wx.getStorage({\n key: 'searchReault',\n success: function(res) {\n console.log(res.data)\n let currentSongIndex = res.data.findIndex((item)=>{\n return item.id == id;\n })\n console.log(currentSongIndex)\n currentSongIndex -- ;\n console.log(res.data[currentSongIndex])\n wx.playBackgroundAudio({\n dataUrl: res.data[currentSongIndex].mp3Url\n })\n wx.switchTab({\n url: '../now/index'\n })\n \n } \n })\n}\n//滑动 歌曲快进\nfunction sliderToseek(e, cb) {\n wx.getBackgroundAudioPlayerState({\n success: function (res) {\n var dataUrl = res.dataUrl\n var duration = res.duration\n let val = e.detail.value\n let cal = val * duration / 100\n cb && cb(dataUrl, cal);\n }\n })\n}\n\n// 获取歌词\nfunction getlyric(id,cb) {\n console.log('id:',id)\n let url = `http://neteasemusic.leanapp.cn/lyric`\n wx.request({\n url: url,\n data: {\n id: id\n },\n method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT\n // header: {}, // 设置请求的 header\n success: function (res) {\n // success\n \n if (!res.data.lrc.lyric) return false;\n \n let lyric = res.data.lrc.lyric\n \n let timearr = lyric.split('[')\n let obj = {}\n let lyricArr=[]\n // seek 为键 歌词为value\n timearr.forEach((item) => {\n let key = parseInt(item.split(']')[0].split(':')[0]) * 60 + parseInt(item.split(']')[0].split(':')[1])\n let val = item.split(']')[1]\n \n obj[key] = val\n })\n for(let key in obj){\n // obj[key] = obj[key].split('\\n')[0]\n lyricArr.push(obj[key])\n }\n cb&&cb(obj,lyricArr)\n },\n fail: function (res) {\n // fail\n },\n complete: function (res) {\n // complete\n }\n })\n}\n// ----------------------------------------------------\n" }, { "path": "pages/now/index.json", "content": "{\n \n\n}" }, { "path": "pages/now/index.wxml", "content": "\n\n\n \n \n \n \n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n" }, { "path": "pages/now/index.wxss", "content": "/**index.wxss**/\npage{\n width: 100%;\n height: 100%;\n}\n.container {\n position: relative;\n overflow: hidden;\n}\n.container-content{\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n z-index: 1;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n}\n.userinfo {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.userinfo-avatar {\n width: 128rpx;\n height: 128rpx;\n margin: 20rpx;\n border-radius: 50%;\n}\n\n.userinfo-nickname {\n color: #aaa;\n}\n\n.usermotto {\n margin-top: 200px;\n}\n.cicle-infor{\n width: 230px;\n height: 230px;\n background-size: cover;\n background-repeat: no-repeat;\n background-position: center;\n border-radius: 50%;\n animation: rotate 10s linear infinite forwards;\n margin: 0 auto;\n \n\n}\n@keyframes rotate{\n 0%{\n transform: rotate(0deg)\n }100%{\n transform: rotate(360deg)\n }\n}\n.fengmian{\n flex: 1;\n display: flex;\n align-items: center;\n}\n.other-content{\n height: 170px;\n}\n.container{\n text-align: center;\n}\n.icon-choose{\n \n}\n.icon-choose, .operations{\n display: flex;\n justify-content: center;\n align-items: center;\n\n}\n.icon{\n width: 30px;\n height: 30px;\n background-size: cover;\n margin: 10px;\n}\n.like{\n background-image:url(http://op4j4esv2.bkt.clouddn.com/like.png) ;\n}\n.download{\n background-image:url(http://op4j4esv2.bkt.clouddn.com/download.png) ;\n \n}\n.add{\n background-image:url(http://op4j4esv2.bkt.clouddn.com/add.png) ;\n \n}\n.btn{\n width: 40px;\n height: 40px;\n background-size: cover;\n margin: 10px;\n}\n.prev{\n background-image:url(http://op4j4esv2.bkt.clouddn.com/pre.png) ;\n\n}\n.play, .pause{\n background-image:url(http://op4j4esv2.bkt.clouddn.com/play.png) ;\n width: 50px;\n height: 50px;\n\n}\n.pause{\n background-image:url(http://op4j4esv2.bkt.clouddn.com/pause.png) ;\n \n}\n.next{\n background-image:url(http://op4j4esv2.bkt.clouddn.com/next.png) ;\n\n}\n.active{\n color: #fff;\n}\n.lists{\n position: absolute;\n bottom: 0;\n opacity: .8;\n /*transform: translateY(170px);*/\n z-index: 3;\n background: linear-gradient(to top, transparent 0%, #D43C33 100%); \n width: 100%;\n transition: all .5s;\n \n}\n.lists radio-group{\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n height: 170px;\n overflow-y: scroll;\n}\n.lists radio-group label{\n padding: 5px 0 5px 20px;\n}" }, { "path": "style/weui.wxss", "content": "page {\n line-height: 1.6;\n font-family: -apple-system-font, \"Helvetica Neue\", sans-serif;\n}\nicon {\n vertical-align: middle;\n}\n.weui-cells {\n position: relative;\n margin-top: 1.17647059em;\n background-color: #FFFFFF;\n line-height: 1.41176471;\n font-size: 17px;\n}\n.weui-cells:before {\n content: \" \";\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n height: 1px;\n border-top: 1rpx solid #D9D9D9;\n color: #D9D9D9;\n}\n\n.weui-cells:after {\n content: \" \";\n position: absolute;\n left: 0;\n bottom: 0;\n right: 0;\n height: 1px;\n border-bottom: 1rpx solid #D9D9D9;\n color: #D9D9D9;\n}\n.weui-cells__title {\n margin-top: .77em;\n margin-bottom: .3em;\n padding-left: 15px;\n padding-right: 15px;\n color: #999999;\n font-size: 14px;\n}\n.weui-cells_after-title {\n margin-top: 0;\n}\n.weui-cells__tips {\n margin-top: .3em;\n color: #999999;\n padding-left: 15px;\n padding-right: 15px;\n font-size: 14px;\n}\n.weui-cell {\n padding: 10px 15px;\n position: relative;\n display: -webkit-box;\n display: -webkit-flex;\n display: flex;\n -webkit-box-align: center;\n -webkit-align-items: center;\n align-items: center;\n}\n.weui-cell:before {\n content: \" \";\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n height: 1px;\n border-top: 1rpx solid #D9D9D9;\n color: #D9D9D9;\n left: 15px;\n}\n.weui-cell:first-child:before {\n display: none;\n}\n.weui-cell_active {\n background-color: #ECECEC;\n}\n.weui-cell_primary {\n -webkit-box-align: start;\n -webkit-align-items: flex-start;\n align-items: flex-start;\n}\n.weui-cell__bd {\n -webkit-box-flex: 1;\n -webkit-flex: 1;\n flex: 1;\n}\n.weui-cell__ft {\n text-align: right;\n color: #999999;\n}\n.weui-cell_access {\n color: inherit;\n}\n.weui-cell__ft_in-access {\n padding-right: 13px;\n position: relative;\n}\n.weui-cell__ft_in-access:after {\n content: \" \";\n display: inline-block;\n height: 6px;\n width: 6px;\n border-width: 2px 2px 0 0;\n border-color: #C8C8CD;\n border-style: solid;\n -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);\n transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);\n position: relative;\n top: -2px;\n position: absolute;\n top: 50%;\n margin-top: -4px;\n right: 2px;\n}\n.weui-cell_link {\n color: #586C94;\n font-size: 14px;\n}\n.weui-cell_link:active {\n background-color: #ECECEC;\n}\n.weui-cell_link:first-child:before {\n display: block;\n}\n.weui-icon-radio {\n margin-left: 3.2px;\n margin-right: 3.2px;\n}\n.weui-icon-checkbox_circle,\n.weui-icon-checkbox_success {\n margin-left: 4.6px;\n margin-right: 4.6px;\n}\n.weui-check__label:active {\n background-color: #ECECEC;\n}\n.weui-check {\n position: absolute;\n left: -9999px;\n}\n.weui-check__hd_in-checkbox {\n padding-right: 0.35em;\n}\n.weui-cell__ft_in-radio {\n padding-left: 0.35em;\n}\n.weui-cell_input {\n padding-top: 0;\n padding-bottom: 0;\n}\n.weui-label {\n width: 105px;\n word-wrap: break-word;\n word-break: break-all;\n}\n.weui-input {\n height: 2.58823529em;\n min-height: 2.58823529em;\n line-height: 2.58823529em;\n}\n.weui-toptips {\n position: fixed;\n -webkit-transform: translateZ(0);\n transform: translateZ(0);\n top: 0;\n left: 0;\n right: 0;\n padding: 5px;\n font-size: 14px;\n text-align: center;\n color: #FFFFFF;\n z-index: 5000;\n word-wrap: break-word;\n word-break: break-all;\n}\n.weui-toptips_warn {\n background-color: #E64340;\n}\n.weui-textarea {\n display: block;\n width: 100%;\n}\n.weui-textarea-counter {\n color: #B2B2B2;\n text-align: right;\n}\n.weui-textarea-counter_warn {\n color: #E64340;\n}\n.weui-cell_warn {\n color: #E64340;\n}\n.weui-form-preview {\n position: relative;\n background-color: #FFFFFF;\n}\n.weui-form-preview:before {\n content: \" \";\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n height: 1px;\n border-top: 1rpx solid #D9D9D9;\n color: #D9D9D9;\n}\n.weui-form-preview:after {\n content: \" \";\n position: absolute;\n left: 0;\n bottom: 0;\n right: 0;\n height: 1px;\n border-bottom: 1rpx solid #D9D9D9;\n color: #D9D9D9;\n}\n.weui-form-preview__value {\n font-size: 14px;\n}\n.weui-form-preview__value_in-hd {\n font-size: 26px;\n}\n.weui-form-preview__hd {\n position: relative;\n padding: 10px 15px;\n text-align: right;\n line-height: 2.5em;\n}\n.weui-form-preview__hd:after {\n content: \" \";\n position: absolute;\n left: 0;\n bottom: 0;\n right: 0;\n height: 1px;\n border-bottom: 1rpx solid #D9D9D9;\n color: #D9D9D9;\n left: 15px;\n}\n.weui-form-preview__bd {\n padding: 10px 15px;\n font-size: .9em;\n text-align: right;\n color: #999999;\n line-height: 2;\n}\n.weui-form-preview__ft {\n position: relative;\n line-height: 50px;\n display: -webkit-box;\n display: -webkit-flex;\n display: flex;\n}\n.weui-form-preview__ft:after {\n content: \" \";\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n height: 1px;\n border-top: 1rpx solid #D5D5D6;\n color: #D5D5D6;\n}\n.weui-form-preview__item {\n overflow: hidden;\n}\n.weui-form-preview__label {\n float: left;\n margin-right: 1em;\n min-width: 4em;\n color: #999999;\n text-align: justify;\n text-align-last: justify;\n}\n.weui-form-preview__value {\n display: block;\n overflow: hidden;\n word-break: normal;\n word-wrap: break-word;\n}\n.weui-form-preview__btn {\n position: relative;\n display: block;\n -webkit-box-flex: 1;\n -webkit-flex: 1;\n flex: 1;\n color: #3CC51F;\n text-align: center;\n}\n.weui-form-preview__btn:after {\n content: \" \";\n position: absolute;\n left: 0;\n top: 0;\n width: 1px;\n bottom: 0;\n border-left: 1rpx solid #D5D5D6;\n color: #D5D5D6;\n}\n.weui-form-preview__btn:first-child:after {\n display: none;\n}\n.weui-form-preview__btn_active {\n background-color: #EEEEEE;\n}\n.weui-form-preview__btn_default {\n color: #999999;\n}\n.weui-form-preview__btn_primary {\n color: #0BB20C;\n}\n.weui-cell_select {\n padding: 0;\n}\n.weui-select {\n position: relative;\n padding-left: 15px;\n padding-right: 30px;\n height: 2.58823529em;\n min-height: 2.58823529em;\n line-height: 2.58823529em;\n border-right: 1rpx solid #D9D9D9;\n}\n.weui-select:before {\n content: \" \";\n display: inline-block;\n height: 6px;\n width: 6px;\n border-width: 2px 2px 0 0;\n border-color: #C8C8CD;\n border-style: solid;\n -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);\n transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);\n position: relative;\n top: -2px;\n position: absolute;\n top: 50%;\n right: 15px;\n margin-top: -4px;\n}\n.weui-select_in-select-after {\n padding-left: 0;\n}\n.weui-cell__hd_in-select-after,\n.weui-cell__bd_in-select-before {\n padding-left: 15px;\n}\n.weui-cell_vcode {\n padding-right: 0;\n}\n.weui-vcode-img {\n margin-left: 5px;\n height: 2.58823529em;\n vertical-align: middle;\n}\n.weui-vcode-btn {\n display: inline-block;\n height: 2.58823529em;\n margin-left: 5px;\n padding: 0 0.6em 0 0.7em;\n border-left: 1px solid #E5E5E5;\n line-height: 2.58823529em;\n vertical-align: middle;\n font-size: 17px;\n color: #3CC51F;\n white-space: nowrap;\n}\n.weui-vcode-btn:active {\n color: #52a341;\n}\n.weui-cell_switch {\n padding-top: 6px;\n padding-bottom: 6px;\n}\n.weui-uploader__hd {\n display: -webkit-box;\n display: -webkit-flex;\n display: flex;\n padding-bottom: 10px;\n -webkit-box-align: center;\n -webkit-align-items: center;\n align-items: center;\n}\n.weui-uploader__title {\n -webkit-box-flex: 1;\n -webkit-flex: 1;\n flex: 1;\n}\n.weui-uploader__info {\n color: #B2B2B2;\n}\n.weui-uploader__bd {\n margin-bottom: -4px;\n margin-right: -9px;\n overflow: hidden;\n}\n.weui-uploader__file {\n float: left;\n margin-right: 9px;\n margin-bottom: 9px;\n}\n.weui-uploader__img {\n display: block;\n width: 79px;\n height: 79px;\n}\n.weui-uploader__file_status {\n position: relative;\n}\n.weui-uploader__file_status:before {\n content: \" \";\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-color: rgba(0, 0, 0, 0.5);\n}\n.weui-uploader__file-content {\n position: absolute;\n top: 50%;\n left: 50%;\n -webkit-transform: translate(-50%, -50%);\n transform: translate(-50%, -50%);\n color: #FFFFFF;\n}\n.weui-uploader__input-box {\n float: left;\n position: relative;\n margin-right: 9px;\n margin-bottom: 9px;\n width: 77px;\n height: 77px;\n border: 1px solid #D9D9D9;\n}\n.weui-uploader__input-box:before,\n.weui-uploader__input-box:after {\n content: \" \";\n position: absolute;\n top: 50%;\n left: 50%;\n -webkit-transform: translate(-50%, -50%);\n transform: translate(-50%, -50%);\n background-color: #D9D9D9;\n}\n.weui-uploader__input-box:before {\n width: 2px;\n height: 39.5px;\n}\n.weui-uploader__input-box:after {\n width: 39.5px;\n height: 2px;\n}\n.weui-uploader__input-box:active {\n border-color: #999999;\n}\n.weui-uploader__input-box:active:before,\n.weui-uploader__input-box:active:after {\n background-color: #999999;\n}\n.weui-uploader__input {\n position: absolute;\n z-index: 1;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n}\n.weui-article {\n padding: 20px 15px;\n font-size: 15px;\n}\n.weui-article__section {\n margin-bottom: 1.5em;\n}\n.weui-article__h1 {\n font-size: 18px;\n font-weight: 400;\n margin-bottom: .9em;\n}\n.weui-article__h2 {\n font-size: 16px;\n font-weight: 400;\n margin-bottom: .34em;\n}\n.weui-article__h3 {\n font-weight: 400;\n font-size: 15px;\n margin-bottom: .34em;\n}\n.weui-article__p {\n margin: 0 0 .8em;\n}\n.weui-msg {\n padding-top: 36px;\n text-align: center;\n}\n.weui-msg__link {\n display: inline;\n color: #586C94;\n}\n.weui-msg__icon-area {\n margin-bottom: 30px;\n}\n.weui-msg__text-area {\n margin-bottom: 25px;\n padding: 0 20px;\n}\n.weui-msg__title {\n margin-bottom: 5px;\n font-weight: 400;\n font-size: 20px;\n}\n.weui-msg__desc {\n font-size: 14px;\n color: #999999;\n}\n.weui-msg__opr-area {\n margin-bottom: 25px;\n}\n.weui-msg__extra-area {\n margin-bottom: 15px;\n font-size: 14px;\n color: #999999;\n}\n@media screen and (min-height: 438px) {\n .weui-msg__extra-area {\n position: fixed;\n left: 0;\n bottom: 0;\n width: 100%;\n text-align: center;\n }\n}\n.weui-flex {\n display: -webkit-box;\n display: -webkit-flex;\n display: flex;\n}\n.weui-flex__item {\n -webkit-box-flex: 1;\n -webkit-flex: 1;\n flex: 1;\n}\n.weui-btn {\n margin-top: 15px;\n}\n.weui-btn:first-child {\n margin-top: 0;\n}\n.weui-btn-area {\n margin: 1.17647059em 15px 0.3em;\n}\n.weui-agree {\n display: block;\n padding: .5em 15px;\n font-size: 13px;\n}\n.weui-agree__text {\n color: #999999;\n}\n.weui-agree__link {\n display: inline;\n color: #586C94;\n}\n.weui-agree__checkbox {\n position: absolute;\n left: -9999px;\n}\n.weui-agree__checkbox-icon {\n position: relative;\n top: 2px;\n display: inline-block;\n border: 1px solid #D1D1D1;\n background-color: #FFFFFF;\n border-radius: 3px;\n width: 11px;\n height: 11px;\n}\n.weui-agree__checkbox-icon-check {\n position: absolute;\n top: 1px;\n left: 1px;\n}\n.weui-footer {\n color: #999999;\n font-size: 14px;\n text-align: center;\n}\n.weui-footer_fixed-bottom {\n position: fixed;\n bottom: .52em;\n left: 0;\n right: 0;\n}\n.weui-footer__links {\n font-size: 0;\n}\n.weui-footer__link {\n display: inline-block;\n vertical-align: top;\n margin: 0 .62em;\n position: relative;\n font-size: 14px;\n color: #586C94;\n}\n.weui-footer__link:before {\n content: \" \";\n position: absolute;\n left: 0;\n top: 0;\n width: 1px;\n bottom: 0;\n border-left: 1rpx solid #C7C7C7;\n color: #C7C7C7;\n left: -0.65em;\n top: .36em;\n bottom: .36em;\n}\n.weui-footer__link:first-child:before {\n display: none;\n}\n.weui-footer__text {\n padding: 0 .34em;\n font-size: 12px;\n}\n.weui-grids {\n border-top: 1rpx solid #D9D9D9;\n border-left: 1rpx solid #D9D9D9;\n overflow: hidden;\n}\n.weui-grid {\n position: relative;\n float: left;\n padding: 20px 10px;\n width: 33.33333333%;\n box-sizing: border-box;\n border-right: 1rpx solid #D9D9D9;\n border-bottom: 1rpx solid #D9D9D9;\n}\n.weui-grid_active {\n background-color: #ECECEC;\n}\n.weui-grid__icon {\n display: block;\n width: 28px;\n height: 28px;\n margin: 0 auto;\n}\n.weui-grid__label {\n margin-top: 5px;\n display: block;\n text-align: center;\n color: #000000;\n font-size: 14px;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n}\n.weui-loading {\n margin: 0 5px;\n width: 20px;\n height: 20px;\n display: inline-block;\n vertical-align: middle;\n -webkit-animation: weuiLoading 1s steps(12, end) infinite;\n animation: weuiLoading 1s steps(12, end) infinite;\n background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat;\n background-size: 100%;\n}\n.weui-loading.weui-loading_transparent {\n background-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Cpath fill='none' d='M0 0h100v100H0z'/%3E%3Crect xmlns='http://www.w3.org/2000/svg' width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.56)' rx='5' ry='5' transform='translate(0 -30)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.5)' rx='5' ry='5' transform='rotate(30 105.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.43)' rx='5' ry='5' transform='rotate(60 75.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.38)' rx='5' ry='5' transform='rotate(90 65 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.32)' rx='5' ry='5' transform='rotate(120 58.66 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.28)' rx='5' ry='5' transform='rotate(150 54.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.25)' rx='5' ry='5' transform='rotate(180 50 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.2)' rx='5' ry='5' transform='rotate(-150 45.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.17)' rx='5' ry='5' transform='rotate(-120 41.34 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.14)' rx='5' ry='5' transform='rotate(-90 35 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.1)' rx='5' ry='5' transform='rotate(-60 24.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.03)' rx='5' ry='5' transform='rotate(-30 -5.98 65)'/%3E%3C/svg%3E\");\n}\n@-webkit-keyframes weuiLoading {\n 0% {\n -webkit-transform: rotate3d(0, 0, 1, 0deg);\n transform: rotate3d(0, 0, 1, 0deg);\n }\n 100% {\n -webkit-transform: rotate3d(0, 0, 1, 360deg);\n transform: rotate3d(0, 0, 1, 360deg);\n }\n}\n@keyframes weuiLoading {\n 0% {\n -webkit-transform: rotate3d(0, 0, 1, 0deg);\n transform: rotate3d(0, 0, 1, 0deg);\n }\n 100% {\n -webkit-transform: rotate3d(0, 0, 1, 360deg);\n transform: rotate3d(0, 0, 1, 360deg);\n }\n}\n.weui-badge {\n display: inline-block;\n padding: .15em .4em;\n min-width: 8px;\n border-radius: 18px;\n background-color: #E64340;\n color: #FFFFFF;\n line-height: 1.2;\n text-align: center;\n font-size: 12px;\n vertical-align: middle;\n}\n.weui-badge_dot {\n padding: .4em;\n min-width: 0;\n}\n.weui-loadmore {\n width: 65%;\n margin: 1.5em auto;\n line-height: 1.6em;\n font-size: 14px;\n text-align: center;\n}\n.weui-loadmore__tips {\n display: inline-block;\n vertical-align: middle;\n}\n.weui-loadmore_line {\n border-top: 1px solid #E5E5E5;\n margin-top: 2.4em;\n}\n.weui-loadmore__tips_in-line {\n position: relative;\n top: -0.9em;\n padding: 0 .55em;\n background-color: #FFFFFF;\n color: #999999;\n}\n.weui-loadmore__tips_in-dot {\n position: relative;\n padding: 0 .16em;\n width: 4px;\n height: 1.6em;\n}\n.weui-loadmore__tips_in-dot:before {\n content: \" \";\n position: absolute;\n top: 50%;\n left: 50%;\n margin-top: -1px;\n margin-left: -2px;\n width: 4px;\n height: 4px;\n border-radius: 50%;\n background-color: #E5E5E5;\n}\n.weui-panel {\n background-color: #FFFFFF;\n margin-top: 10px;\n position: relative;\n overflow: hidden;\n}\n.weui-panel:first-child {\n margin-top: 0;\n}\n.weui-panel:before {\n content: \" \";\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n height: 1px;\n border-top: 1rpx solid #E5E5E5;\n color: #E5E5E5;\n}\n.weui-panel:after {\n content: \" \";\n position: absolute;\n left: 0;\n bottom: 0;\n right: 0;\n height: 1px;\n border-bottom: 1rpx solid #E5E5E5;\n color: #E5E5E5;\n}\n.weui-panel__hd {\n padding: 14px 15px 10px;\n color: #999999;\n font-size: 13px;\n position: relative;\n}\n.weui-panel__hd:after {\n content: \" \";\n position: absolute;\n left: 0;\n bottom: 0;\n right: 0;\n height: 1px;\n border-bottom: 1rpx solid #E5E5E5;\n color: #E5E5E5;\n left: 15px;\n}\n.weui-media-box {\n padding: 15px;\n position: relative;\n}\n.weui-media-box:before {\n content: \" \";\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n height: 1px;\n border-top: 1rpx solid #E5E5E5;\n color: #E5E5E5;\n left: 15px;\n}\n.weui-media-box:first-child:before {\n display: none;\n}\n.weui-media-box__title {\n font-weight: 400;\n font-size: 17px;\n width: auto;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n word-wrap: normal;\n word-wrap: break-word;\n word-break: break-all;\n}\n.weui-media-box__desc {\n color: #999999;\n font-size: 13px;\n line-height: 1.2;\n overflow: hidden;\n text-overflow: ellipsis;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n}\n.weui-media-box__info {\n margin-top: 15px;\n padding-bottom: 5px;\n font-size: 13px;\n color: #CECECE;\n line-height: 1em;\n list-style: none;\n overflow: hidden;\n}\n.weui-media-box__info__meta {\n float: left;\n padding-right: 1em;\n}\n.weui-media-box__info__meta_extra {\n padding-left: 1em;\n border-left: 1px solid #CECECE;\n}\n.weui-media-box__title_in-text {\n margin-bottom: 8px;\n}\n.weui-media-box_appmsg {\n display: -webkit-box;\n display: -webkit-flex;\n display: flex;\n -webkit-box-align: center;\n -webkit-align-items: center;\n align-items: center;\n}\n.weui-media-box__thumb {\n width: 100%;\n height: 100%;\n vertical-align: top;\n}\n.weui-media-box__hd_in-appmsg {\n margin-right: .8em;\n width: 60px;\n height: 60px;\n line-height: 60px;\n text-align: center;\n}\n.weui-media-box__bd_in-appmsg {\n -webkit-box-flex: 1;\n -webkit-flex: 1;\n flex: 1;\n min-width: 0;\n}\n.weui-media-box_small-appmsg {\n padding: 0;\n}\n.weui-cells_in-small-appmsg {\n margin-top: 0;\n}\n.weui-cells_in-small-appmsg:before {\n display: none;\n}\n.weui-progress {\n display: -webkit-box;\n display: -webkit-flex;\n display: flex;\n -webkit-box-align: center;\n -webkit-align-items: center;\n align-items: center;\n}\n.weui-progress__bar {\n -webkit-box-flex: 1;\n -webkit-flex: 1;\n flex: 1;\n}\n.weui-progress__opr {\n margin-left: 15px;\n font-size: 0;\n}\n.weui-navbar {\n display: -webkit-box;\n display: -webkit-flex;\n display: flex;\n position: absolute;\n z-index: 500;\n top: 0;\n width: 100%;\n border-bottom: 1rpx solid #CCCCCC;\n}\n.weui-navbar__item {\n position: relative;\n display: block;\n -webkit-box-flex: 1;\n -webkit-flex: 1;\n flex: 1;\n padding: 13px 0;\n text-align: center;\n font-size: 0;\n}\n.weui-navbar__item.weui-bar__item_on {\n color: #1AAD19;\n}\n.weui-navbar__slider {\n position: absolute;\n content: \" \";\n left: 0;\n bottom: 0;\n width: 6em;\n height: 3px;\n background-color: #1AAD19;\n -webkit-transition: -webkit-transform .3s;\n transition: -webkit-transform .3s;\n transition: transform .3s;\n transition: transform .3s, -webkit-transform .3s;\n}\n.weui-navbar__title {\n display: inline-block;\n font-size: 15px;\n max-width: 8em;\n width: auto;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n word-wrap: normal;\n}\n.weui-tab {\n position: relative;\n height: 100%;\n}\n.weui-tab__panel {\n box-sizing: border-box;\n height: 100%;\n padding-top: 50px;\n overflow: auto;\n -webkit-overflow-scrolling: touch;\n}\n.weui-search-bar {\n position: relative;\n padding: 8px 10px;\n display: -webkit-box;\n display: -webkit-flex;\n display: flex;\n box-sizing: border-box;\n background-color: #EFEFF4;\n border-top: 1rpx solid #D7D6DC;\n border-bottom: 1rpx solid #D7D6DC;\n}\n.weui-icon-search {\n margin-right: 8px;\n font-size: inherit;\n}\n.weui-icon-search_in-box {\n position: absolute;\n left: 10px;\n top: 7px;\n}\n.weui-search-bar__text {\n display: inline-block;\n font-size: 14px;\n vertical-align: middle;\n}\n.weui-search-bar__form {\n position: relative;\n -webkit-box-flex: 1;\n -webkit-flex: auto;\n flex: auto;\n border-radius: 5px;\n background: #FFFFFF;\n border: 1rpx solid #E6E6EA;\n}\n.weui-search-bar__box {\n position: relative;\n padding-left: 30px;\n padding-right: 30px;\n width: 100%;\n box-sizing: border-box;\n z-index: 1;\n}\n.weui-search-bar__input {\n height: 28px;\n line-height: 28px;\n font-size: 14px;\n}\n.weui-icon-clear {\n position: absolute;\n top: 0;\n right: 0;\n padding: 7px 8px;\n font-size: 0;\n}\n.weui-search-bar__label {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 2;\n border-radius: 3px;\n text-align: center;\n color: #9B9B9B;\n background: #FFFFFF;\n line-height: 28px;\n}\n.weui-search-bar__cancel-btn {\n margin-left: 10px;\n line-height: 28px;\n color: #09BB07;\n white-space: nowrap;\n}\n" }, { "path": "utils/util.js", "content": "function formatTime(date) {\n var year = date.getFullYear()\n var month = date.getMonth() + 1\n var day = date.getDate()\n\n var hour = date.getHours()\n var minute = date.getMinutes()\n var second = date.getSeconds()\n\n\n return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')\n}\n\nfunction formatNumber(n) {\n n = n.toString()\n return n[1] ? n : '0' + n\n}\n\nmodule.exports = {\n formatTime: formatTime\n}\n" } ]