├── lib ├── toast │ ├── toast.json │ ├── toast.wxml │ ├── toast.wxss │ └── toast.js ├── usercenter_item │ ├── userCenterItem.json │ ├── userCenterItem.js │ ├── userCenterItem.wxml │ └── userCenterItem.wxss └── weui.wxss ├── pages ├── video │ ├── video.json │ ├── video.wxml │ ├── video.js │ └── video.wxss ├── comic-reader │ ├── comicReader.json │ ├── comicReader.wxss │ ├── comicReader.wxml │ └── comicReader.js ├── comic_detail │ ├── comicDetail.json │ ├── comicDetail.js │ ├── comicDetail.wxml │ └── comicDetail.wxss ├── logs │ ├── logs.json │ ├── logs.wxss │ ├── logs.wxml │ └── logs.js ├── comic │ ├── comic.json │ ├── comic.js │ ├── comic.wxml │ └── comic.wxss ├── video_play │ ├── videoPlay.json │ ├── videoPlay.wxml │ ├── videoPlay.wxss │ └── videoPlay.js └── ucenter │ ├── ucenter.json │ ├── ucenter.wxss │ ├── ucenter.js │ └── ucenter.wxml ├── static └── images │ ├── go.png │ ├── me_buy.png │ ├── me_vip.png │ ├── me_date.png │ ├── me_gift.png │ ├── me_night.png │ ├── me_theme.png │ ├── me_action.png │ ├── me_comment.png │ ├── me_coupon.png │ ├── me_favorite.png │ ├── me_feedback.png │ ├── me_record.png │ ├── me_setting.png │ ├── me_wallet.png │ ├── play_video.png │ ├── tab_mine_n.png │ ├── tab_mine_p.png │ ├── tab_comic_home_n.png │ ├── tab_comic_home_p.png │ ├── tab_video_home_n.png │ ├── tab_video_home_p.png │ ├── comic_block_header.png │ ├── detail_bottom_read.png │ ├── placeholder_avatar.png │ ├── comic_update_today_left.png │ ├── comic_update_today_header.png │ └── comic_recommend_everyday_header.png ├── sitemap.json ├── config └── api.js ├── data ├── comic_detail.js ├── home_video.js ├── comic_detail_tab1.js ├── comic_detail_tab2.js ├── home_comic.js ├── comic_detail_tab3.js └── comic_reader_image.js ├── app.wxss ├── project.config.json ├── README.md ├── app.js ├── app.json └── utils └── util.js /lib/toast/toast.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true 3 | } -------------------------------------------------------------------------------- /pages/video/video.json: -------------------------------------------------------------------------------- 1 | { 2 | "backgroundColor": "#e1e1e1" 3 | } -------------------------------------------------------------------------------- /lib/usercenter_item/userCenterItem.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true 3 | } -------------------------------------------------------------------------------- /pages/comic-reader/comicReader.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {} 3 | } -------------------------------------------------------------------------------- /pages/comic_detail/comicDetail.json: -------------------------------------------------------------------------------- 1 | { 2 | "enablePullDownRefresh": false 3 | } -------------------------------------------------------------------------------- /pages/logs/logs.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "查看启动日志", 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /static/images/go.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZDfordream/comic-wx/HEAD/static/images/go.png -------------------------------------------------------------------------------- /static/images/me_buy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZDfordream/comic-wx/HEAD/static/images/me_buy.png -------------------------------------------------------------------------------- /static/images/me_vip.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZDfordream/comic-wx/HEAD/static/images/me_vip.png -------------------------------------------------------------------------------- /pages/comic/comic.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "腾讯动漫", 3 | "enablePullDownRefresh": true 4 | } -------------------------------------------------------------------------------- /static/images/me_date.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZDfordream/comic-wx/HEAD/static/images/me_date.png -------------------------------------------------------------------------------- /static/images/me_gift.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZDfordream/comic-wx/HEAD/static/images/me_gift.png -------------------------------------------------------------------------------- /static/images/me_night.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZDfordream/comic-wx/HEAD/static/images/me_night.png -------------------------------------------------------------------------------- /static/images/me_theme.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZDfordream/comic-wx/HEAD/static/images/me_theme.png -------------------------------------------------------------------------------- /pages/video_play/videoPlay.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | "toast": "/lib/toast/toast" 4 | } 5 | } -------------------------------------------------------------------------------- /static/images/me_action.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZDfordream/comic-wx/HEAD/static/images/me_action.png -------------------------------------------------------------------------------- /static/images/me_comment.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZDfordream/comic-wx/HEAD/static/images/me_comment.png -------------------------------------------------------------------------------- /static/images/me_coupon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZDfordream/comic-wx/HEAD/static/images/me_coupon.png -------------------------------------------------------------------------------- /static/images/me_favorite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZDfordream/comic-wx/HEAD/static/images/me_favorite.png -------------------------------------------------------------------------------- /static/images/me_feedback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZDfordream/comic-wx/HEAD/static/images/me_feedback.png -------------------------------------------------------------------------------- /static/images/me_record.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZDfordream/comic-wx/HEAD/static/images/me_record.png -------------------------------------------------------------------------------- /static/images/me_setting.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZDfordream/comic-wx/HEAD/static/images/me_setting.png -------------------------------------------------------------------------------- /static/images/me_wallet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZDfordream/comic-wx/HEAD/static/images/me_wallet.png -------------------------------------------------------------------------------- /static/images/play_video.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZDfordream/comic-wx/HEAD/static/images/play_video.png -------------------------------------------------------------------------------- /static/images/tab_mine_n.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZDfordream/comic-wx/HEAD/static/images/tab_mine_n.png -------------------------------------------------------------------------------- /static/images/tab_mine_p.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZDfordream/comic-wx/HEAD/static/images/tab_mine_p.png -------------------------------------------------------------------------------- /static/images/tab_comic_home_n.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZDfordream/comic-wx/HEAD/static/images/tab_comic_home_n.png -------------------------------------------------------------------------------- /static/images/tab_comic_home_p.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZDfordream/comic-wx/HEAD/static/images/tab_comic_home_p.png -------------------------------------------------------------------------------- /static/images/tab_video_home_n.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZDfordream/comic-wx/HEAD/static/images/tab_video_home_n.png -------------------------------------------------------------------------------- /static/images/tab_video_home_p.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZDfordream/comic-wx/HEAD/static/images/tab_video_home_p.png -------------------------------------------------------------------------------- /static/images/comic_block_header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZDfordream/comic-wx/HEAD/static/images/comic_block_header.png -------------------------------------------------------------------------------- /static/images/detail_bottom_read.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZDfordream/comic-wx/HEAD/static/images/detail_bottom_read.png -------------------------------------------------------------------------------- /static/images/placeholder_avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZDfordream/comic-wx/HEAD/static/images/placeholder_avatar.png -------------------------------------------------------------------------------- /sitemap.json: -------------------------------------------------------------------------------- 1 | { 2 | "desc": "仿腾讯动漫", 3 | "rules": [ 4 | { 5 | "action": "allow", 6 | "page": "*" 7 | } 8 | ] 9 | } -------------------------------------------------------------------------------- /static/images/comic_update_today_left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZDfordream/comic-wx/HEAD/static/images/comic_update_today_left.png -------------------------------------------------------------------------------- /static/images/comic_update_today_header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZDfordream/comic-wx/HEAD/static/images/comic_update_today_header.png -------------------------------------------------------------------------------- /static/images/comic_recommend_everyday_header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ZDfordream/comic-wx/HEAD/static/images/comic_recommend_everyday_header.png -------------------------------------------------------------------------------- /pages/logs/logs.wxss: -------------------------------------------------------------------------------- 1 | .log-list { 2 | display: flex; 3 | flex-direction: column; 4 | padding: 40rpx; 5 | } 6 | .log-item { 7 | margin: 10rpx; 8 | } 9 | -------------------------------------------------------------------------------- /pages/ucenter/ucenter.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | "usercenter-item": "/lib/usercenter_item/userCenterItem", 4 | "toast": "/lib/toast/toast" 5 | } 6 | } -------------------------------------------------------------------------------- /config/api.js: -------------------------------------------------------------------------------- 1 | // 以下是业务服务器API地址 2 | var WxApiRoot = 'http://192.168.0.100:8080'; 3 | 4 | module.exports = { 5 | homeComic: WxApiRoot + '/get_home_page/section_data', //首页数据接口 6 | }; -------------------------------------------------------------------------------- /pages/comic-reader/comicReader.wxss: -------------------------------------------------------------------------------- 1 | /* pages/comic-reader/comicReader.wxss */ 2 | .reader{ 3 | display: flex; 4 | flex-direction: column; 5 | } 6 | 7 | .reader image{ 8 | width: 750rpx; 9 | } -------------------------------------------------------------------------------- /lib/toast/toast.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | {{ content }} 4 | 5 | -------------------------------------------------------------------------------- /pages/comic-reader/comicReader.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /pages/logs/logs.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{index + 1}}. {{log}} 5 | 6 | 7 | -------------------------------------------------------------------------------- /data/comic_detail.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "cover": "https://manhua.qpic.cn/vertical/0/14_14_39_a8416912650dcf09b8d878b46f618f8a_1534228745125.jpg/210", 3 | "title": "国民男神缠上身", 4 | "score": "8.9", 5 | "tag": "标签：恋爱都市", 6 | "author": "作者：哔次元漫画", 7 | "popularity": "3.4亿", 8 | "monthTicket": "51" 9 | } -------------------------------------------------------------------------------- /lib/usercenter_item/userCenterItem.js: -------------------------------------------------------------------------------- 1 | Component({ 2 | properties: { 3 | // 这里定义了imageUrl属性，属性值可以在组件使用时指定 4 | imageUrl: { 5 | type: String, 6 | value: 'default value', 7 | }, 8 | textContent: { 9 | type: String, 10 | value: 'default value', 11 | } 12 | } 13 | }) -------------------------------------------------------------------------------- /pages/logs/logs.js: -------------------------------------------------------------------------------- 1 | //logs.js 2 | const util = require('../../utils/util.js') 3 | 4 | Page({ 5 | data: { 6 | logs: [] 7 | }, 8 | onLoad: function () { 9 | this.setData({ 10 | logs: (wx.getStorageSync('logs') || []).map(log => { 11 | return util.formatTime(new Date(log)) 12 | }) 13 | }) 14 | } 15 | }) 16 | -------------------------------------------------------------------------------- /lib/toast/toast.wxss: -------------------------------------------------------------------------------- 1 | .wx-toast-box{ 2 | display: flex; 3 | width: 100%; 4 | justify-content: center; 5 | position: fixed; 6 | z-index: 999; 7 | bottom:80rpx; 8 | opacity: 0; 9 | } 10 | .wx-toast-content{ 11 | max-width: 80%; 12 | border-radius:15rpx; 13 | padding: 15rpx 30rpx; 14 | background: rgba(0, 0, 0, 0.6); 15 | } 16 | .wx-toast-toast{ 17 | height: 100%; 18 | width: 100%; 19 | color: #fff; 20 | font-size: 24rpx; 21 | text-align: center; 22 | } 23 | -------------------------------------------------------------------------------- /lib/usercenter_item/userCenterItem.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {{textContent}} 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /app.wxss: -------------------------------------------------------------------------------- 1 | /**app.wxss**/ 2 | .container { 3 | box-sizing: border-box; 4 | background-color: #ffffff; 5 | font-family: PingFangSC-Light, helvetica, 'Heiti SC'; 6 | } 7 | 8 | view, image, text, navigator { 9 | box-sizing: border-box; 10 | padding: 0; 11 | margin: 0; 12 | } 13 | 14 | view, text { 15 | font-family: PingFangSC-Light, helvetica, 'Heiti SC'; 16 | font-size: 29rpx; 17 | color: #333; 18 | } 19 | 20 | 21 | /*隐藏滚动条*/ 22 | ::-webkit-scrollbar { 23 | width: 0; 24 | height: 0; 25 | color: transparent; 26 | } 27 | -------------------------------------------------------------------------------- /pages/video_play/videoPlay.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 弹幕内容: 7 | 8 | 9 | 发送弹幕 10 | 11 | 12 | -------------------------------------------------------------------------------- /pages/video/video.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #味里故乡#王晓晨 匡牧野山东篇：红瓦绿树间的文艺味道,红瓦绿树间的文艺味道 7 | 8 | 9 | 10 | 1.3万 11 | 次播放 12 | 13 | 1305赞 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /project.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "项目配置文件", 3 | "packOptions": { 4 | "ignore": [] 5 | }, 6 | "setting": { 7 | "urlCheck": false, 8 | "es6": true, 9 | "postcss": true, 10 | "minified": true, 11 | "newFeature": true, 12 | "autoAudits": false, 13 | "checkInvalidKey": true 14 | }, 15 | "compileType": "miniprogram", 16 | "libVersion": "2.7.0", 17 | "appid": "wx1bae8e807206ddf7", 18 | "projectname": "comic-wx", 19 | "debugOptions": { 20 | "hidedInDevtools": [] 21 | }, 22 | "isGameTourist": false, 23 | "simulatorType": "wechat", 24 | "simulatorPluginLibVersion": {}, 25 | "condition": { 26 | "search": { 27 | "current": -1, 28 | "list": [] 29 | }, 30 | "conversation": { 31 | "current": -1, 32 | "list": [] 33 | }, 34 | "game": { 35 | "currentL": -1, 36 | "list": [] 37 | }, 38 | "miniprogram": { 39 | "current": -1, 40 | "list": [] 41 | } 42 | } 43 | } -------------------------------------------------------------------------------- /lib/toast/toast.js: -------------------------------------------------------------------------------- 1 | Component({ 2 | options: { 3 | multipleSlots: true // 在组件定义时的选项中启用多slot支持 4 | }, 5 | /** 6 | * 私有数据,组件的初始数据 7 | * 可用于模版渲染 8 | */ 9 | data: { // 弹窗显示控制 10 | animationData: {}, 11 | content: '提示内容' 12 | }, 13 | /** 14 | * 组件的方法列表 15 | */ 16 | methods: { 17 | /** 18 | * 显示toast，定义动画 19 | */ 20 | showToast(val) { 21 | var animation = wx.createAnimation({ 22 | duration: 300, 23 | timingFunction: 'ease', 24 | }) 25 | this.animation = animation 26 | animation.opacity(1).step() 27 | this.setData({ 28 | animationData: animation.export(), 29 | content: val 30 | }) 31 | /** 32 | * 延时消失 33 | */ 34 | setTimeout(function () { 35 | animation.opacity(0).step() 36 | this.setData({ 37 | animationData: animation.export() 38 | }) 39 | }.bind(this), 1500) 40 | } 41 | } 42 | }) -------------------------------------------------------------------------------- /lib/usercenter_item/userCenterItem.wxss: -------------------------------------------------------------------------------- 1 | /* lib/usercenter_item/userCenterItem.wxss */ 2 | 3 | .user-center-item { 4 | display: flex; 5 | flex-direction: column; 6 | } 7 | 8 | .item-content { 9 | width: 750tpx; 10 | height: 90rpx; 11 | } 12 | 13 | .left-item { 14 | display: flex; 15 | height: 90rpx; 16 | flex-direction: row; 17 | align-items: center; 18 | float: left; 19 | margin-left: 30rpx; 20 | } 21 | 22 | .left-image { 23 | width: 35rpx; 24 | height: 35rpx; 25 | } 26 | 27 | .content-text { 28 | color: #666; 29 | font-size: 32rpx !important; 30 | line-height: 90rpx; 31 | text-align: center; 32 | margin-left: 30rpx; 33 | } 34 | 35 | .right-item { 36 | display: flex; 37 | align-items: center; 38 | height: 90rpx; 39 | float: right; 40 | margin-right: 30rpx; 41 | } 42 | 43 | .right-image { 44 | width: 30rpx; 45 | height: 30rpx; 46 | } 47 | 48 | .usercenter-divider { 49 | border-top: 1px solid #f2f4f7; 50 | margin-left: 95rpx; 51 | } 52 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## 微信小程序-仿腾讯动漫 2 | 另有[Flutter版本](https://github.com/ZDfordream/FlutterTianYue)(功能超全，值得一看) 3 | [Vue版本](https://github.com/ZDfordream/comic-vue) 4 | 5 | ## screenshot 6 | 7 | 8 | 9 | 10 | 11 | # **如果您觉得还可以的话，给个Star白~** 12 | 13 | # 默认条约 14 | 15 | 此项目仅供大家交流沟通使用，不得用于任何商业以及利益活动。 16 | 17 | ### LICENSE 18 | ``` 19 | licensed under the Apache License 2.0 20 | 21 | A permissive license whose main conditions require preservation of copyright and license notices. 22 | Contributors provide an express grant of patent rights. 23 | Licensed works, modifications, and larger works may be distributed under different terms and without source code. 24 | ``` 25 | 26 | -------------------------------------------------------------------------------- /pages/ucenter/ucenter.wxss: -------------------------------------------------------------------------------- 1 | /* pages/ucenter/ucenter.wxss */ 2 | 3 | .user-center { 4 | display: flex; 5 | flex-direction: column; 6 | } 7 | 8 | .user-info { 9 | display: flex; 10 | flex-direction: row; 11 | align-items: center; 12 | margin-top: 20rpx; 13 | margin-bottom: 20rpx; 14 | } 15 | 16 | .user-avatrar { 17 | height: 140rpx; 18 | width: 140rpx; 19 | margin-left: 30rpx; 20 | border-radius: 70px; 21 | overflow: hidden; 22 | } 23 | 24 | .user-right-info { 25 | display: flex; 26 | flex-direction: column; 27 | margin-left: 50rpx; 28 | justify-content: center; 29 | } 30 | 31 | .user-login { 32 | color: #666; 33 | font-size: 36rpx; 34 | } 35 | 36 | .user-assets { 37 | display: flex; 38 | flex-direction: row; 39 | align-items: center; 40 | } 41 | 42 | .assets-item { 43 | display: flex; 44 | flex-direction: column; 45 | margin-top: 10rpx; 46 | margin-right: 90rpx; 47 | } 48 | 49 | .assets-item .count { 50 | color: #333; 51 | font-size: 32rpx; 52 | font-weight: 600; 53 | } 54 | 55 | .assets-item .name { 56 | color: #999; 57 | font-size: 22rpx; 58 | } 59 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | //app.js 2 | App({ 3 | onLaunch: function () { 4 | // 展示本地存储能力 5 | var logs = wx.getStorageSync('logs') || [] 6 | logs.unshift(Date.now()) 7 | wx.setStorageSync('logs', logs) 8 | 9 | // 登录 10 | wx.login({ 11 | success: res => { 12 | // 发送 res.code 到后台换取 openId, sessionKey, unionId 13 | } 14 | }) 15 | // 获取用户信息 16 | wx.getSetting({ 17 | success: res => { 18 | if (res.authSetting['scope.userInfo']) { 19 | // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框 20 | wx.getUserInfo({ 21 | success: res => { 22 | // 可以将 res 发送给后台解码出 unionId 23 | this.globalData.userInfo = res.userInfo 24 | 25 | // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回 26 | // 所以此处加入 callback 以防止这种情况 27 | if (this.userInfoReadyCallback) { 28 | this.userInfoReadyCallback(res) 29 | } 30 | } 31 | }) 32 | } 33 | } 34 | }) 35 | }, 36 | globalData: { 37 | userInfo: null, 38 | encryptedData: null, 39 | iv: null 40 | } 41 | }) -------------------------------------------------------------------------------- /pages/comic-reader/comicReader.js: -------------------------------------------------------------------------------- 1 | // pages/comic-reader/comicReader.js 2 | var readerImage = require("../../data/comic_reader_image.js") 3 | 4 | Page({ 5 | 6 | /** 7 | * 页面的初始数据 8 | */ 9 | data: { 10 | imageList:[], 11 | }, 12 | 13 | /** 14 | * 生命周期函数--监听页面加载 15 | */ 16 | onLoad: function (options) { 17 | this.setData({ 18 | imageList: readerImage.comicPictureList, 19 | }) 20 | }, 21 | 22 | /** 23 | * 生命周期函数--监听页面初次渲染完成 24 | */ 25 | onReady: function () { 26 | 27 | }, 28 | 29 | /** 30 | * 生命周期函数--监听页面显示 31 | */ 32 | onShow: function () { 33 | 34 | }, 35 | 36 | /** 37 | * 生命周期函数--监听页面隐藏 38 | */ 39 | onHide: function () { 40 | 41 | }, 42 | 43 | /** 44 | * 生命周期函数--监听页面卸载 45 | */ 46 | onUnload: function () { 47 | 48 | }, 49 | 50 | /** 51 | * 页面相关事件处理函数--监听用户下拉动作 52 | */ 53 | onPullDownRefresh: function () { 54 | 55 | }, 56 | 57 | /** 58 | * 页面上拉触底事件的处理函数 59 | */ 60 | onReachBottom: function () { 61 | 62 | }, 63 | 64 | /** 65 | * 用户点击右上角分享 66 | */ 67 | onShareAppMessage: function () { 68 | 69 | } 70 | }) -------------------------------------------------------------------------------- /pages/ucenter/ucenter.js: -------------------------------------------------------------------------------- 1 | // pages/ucenter/ucenter.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | 9 | }, 10 | 11 | /** 12 | * 生命周期函数--监听页面加载 13 | */ 14 | onLoad: function(options) { 15 | wx.setNavigationBarTitle({ 16 | title: '我的(待完善)' 17 | }) 18 | }, 19 | 20 | /** 21 | * 生命周期函数--监听页面初次渲染完成 22 | */ 23 | onReady: function() { 24 | this.toast = this.selectComponent("#toast"); 25 | }, 26 | 27 | /** 28 | * 生命周期函数--监听页面显示 29 | */ 30 | onShow: function() { 31 | 32 | }, 33 | 34 | /** 35 | * 生命周期函数--监听页面隐藏 36 | */ 37 | onHide: function() { 38 | 39 | }, 40 | 41 | /** 42 | * 生命周期函数--监听页面卸载 43 | */ 44 | onUnload: function() { 45 | 46 | }, 47 | 48 | /** 49 | * 页面相关事件处理函数--监听用户下拉动作 50 | */ 51 | onPullDownRefresh: function() { 52 | 53 | }, 54 | 55 | /** 56 | * 页面上拉触底事件的处理函数 57 | */ 58 | onReachBottom: function() { 59 | 60 | }, 61 | 62 | /** 63 | * 用户点击右上角分享 64 | */ 65 | onShareAppMessage: function() { 66 | 67 | }, 68 | 69 | bindItemClick() { 70 | this.toast.showToast('暂未开放'); 71 | } 72 | }) -------------------------------------------------------------------------------- /pages/video/video.js: -------------------------------------------------------------------------------- 1 | // pages/video/video.js 2 | 3 | var videoImage = require("../../data/home_video.js") 4 | 5 | Page({ 6 | 7 | /** 8 | * 页面的初始数据 9 | */ 10 | data: { 11 | imageList: [], 12 | }, 13 | 14 | /** 15 | * 生命周期函数--监听页面加载 16 | */ 17 | onLoad: function (options) { 18 | this.setData({ 19 | imageList: videoImage.videoImgaeList, 20 | }); 21 | wx.setNavigationBarTitle({ 22 | title: '短视频' 23 | }) 24 | }, 25 | 26 | /** 27 | * 生命周期函数--监听页面初次渲染完成 28 | */ 29 | onReady: function () { 30 | 31 | }, 32 | 33 | /** 34 | * 生命周期函数--监听页面显示 35 | */ 36 | onShow: function () { 37 | 38 | }, 39 | 40 | /** 41 | * 生命周期函数--监听页面隐藏 42 | */ 43 | onHide: function () { 44 | 45 | }, 46 | 47 | /** 48 | * 生命周期函数--监听页面卸载 49 | */ 50 | onUnload: function () { 51 | 52 | }, 53 | 54 | /** 55 | * 页面相关事件处理函数--监听用户下拉动作 56 | */ 57 | onPullDownRefresh: function () { 58 | 59 | }, 60 | 61 | /** 62 | * 页面上拉触底事件的处理函数 63 | */ 64 | onReachBottom: function () { 65 | 66 | }, 67 | 68 | /** 69 | * 用户点击右上角分享 70 | */ 71 | onShareAppMessage: function () { 72 | 73 | } 74 | }) -------------------------------------------------------------------------------- /data/home_video.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "videoImgaeList": [ 3 | 'https://wx3.sinaimg.cn/crop.0.0.604.339.360/006QmDx6ly1g2ia60z17lj30gs0b8q5u.jpg', 4 | 'https://wx4.sinaimg.cn/crop.0.0.604.339.360/006QmDx6ly1g2bhtbu3s3j30gs0b8wh9.jpg', 5 | 'https://wx4.sinaimg.cn/crop.0.0.1920.1080.360/6e348924ly1g2is9g114lj21hc0u0hdt.jpg', 6 | 'https://wx3.sinaimg.cn/crop.0.0.1920.1080.360/76e1e855ly1g2jn1ubnm8j21hc0u0gxh.jpg', 7 | 'https://wx1.sinaimg.cn/crop.0.40.960.540.360/006UjVSbly1g2g7t2o5uqj30qo0gon9l.jpg', 8 | 'https://wx4.sinaimg.cn/crop.0.0.1920.1080.360/50214f26ly1g2cqv4vnzrj21hc0u0b29.jpg', 9 | 'https://wx1.sinaimg.cn/crop.0.0.1600.900.360/007mU3qOly1g0n2wq3k2rj318g0p07vp.jpg', 10 | 'https://wx2.sinaimg.cn/crop.0.0.1600.900.360/007mU3qOly1g0eo03wasuj318g0p01kx.jpg', 11 | 'https://wx3.sinaimg.cn/crop.0.0.1600.900.360/007mU3qOly1g06ddkzjgyj318g0p0e81.jpg', 12 | 'https://wx3.sinaimg.cn/crop.0.0.1600.900.360/007mU3qOly1fzydecaeslj318g0p01kx.jpg', 13 | 'https://wx4.sinaimg.cn/crop.0.0.1920.1080.360/76e1e855ly1g13lvk5imsj21hc0u0hdt.jpg', 14 | 'https://wx3.sinaimg.cn/crop.0.0.1920.1080.360/76e1e855ly1g0qxcn13mij21hc0u01kx.jpg', 15 | 'https://wx2.sinaimg.cn/crop.0.139.1053.592.360/006qdyzsly1g1g349c25lj30t90o9tia.jpg', 16 | 'https://wx4.sinaimg.cn/crop.0.75.918.516.360/006qdyzsly1g186z2ch9bj30pi0ilncz.jpg', 17 | ] 18 | } -------------------------------------------------------------------------------- /pages/video_play/videoPlay.wxss: -------------------------------------------------------------------------------- 1 | @import "../../lib/weui.wxss"; 2 | 3 | .weui-cells { 4 | margin-top: 80rpx; 5 | text-align: left; 6 | } 7 | 8 | .weui-label { 9 | width: 5em; 10 | } 11 | 12 | .video-play { 13 | display: flex; 14 | flex-direction: column; 15 | } 16 | 17 | .video-play video { 18 | width: 100%; 19 | } 20 | 21 | .danmu { 22 | display: flex; 23 | flex-flow: column; 24 | } 25 | 26 | .danmu-text { 27 | display: flex; 28 | flex-direction: row; 29 | margin-top: 40rpx; 30 | align-items: center; 31 | } 32 | 33 | .danmu-left-tip { 34 | font-size: 18sp; 35 | margin-left: 20rpx; 36 | color: #ff9a6a; 37 | } 38 | 39 | .danmu-right-input { 40 | width: 550rpx; 41 | margin-left: 15rpx; 42 | margin-top: 5rpx; 43 | color: #333; 44 | } 45 | 46 | .placeholder { 47 | color: #999; 48 | font-size: 18sp; 49 | } 50 | 51 | .send-danmu-normal { 52 | border-radius: 15rpx; 53 | background: #ff9a6a; 54 | margin-top: 50rpx; 55 | margin-left: 75rpx; 56 | height: 80rpx; 57 | width: 600rpx; 58 | line-height: 80rpx; 59 | text-align: center; 60 | font-size: 30rpx; 61 | color: #fff; 62 | } 63 | 64 | .send-danmu-presss { 65 | border-radius: 15rpx; 66 | background: #f48f18 !important; 67 | margin-top: 50rpx; 68 | margin-left: 75rpx; 69 | height: 80rpx; 70 | width: 600rpx; 71 | line-height: 80rpx; 72 | text-align: center; 73 | font-size: 30rpx; 74 | color: #fff; 75 | } 76 | -------------------------------------------------------------------------------- /data/comic_detail_tab1.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "detail": "被同事设计，她闯进总裁办公室，非要给总裁某部位上药。 惹得某大总裁暴怒，身体力行地向她证明他到底行不行。 更悲催的是，还被总裁五岁儿子抓个现行。 小包子扑进她怀里：爹地，漂亮姐姐是你给我找的专属模特吗？ 龙熠旸淡定地提起小包子扔到一边：乖，这是你妈咪，爹地专属！ 顾若汐：……", 3 | "recommendList": [ 4 | { 5 | "cover": "https://manhua.qpic.cn/vertical/0/15_17_37_a38b626ce39a1d1d491de60348fdffec_1516009027614.jpg/210", 6 | "title": "我的王还未成年", 7 | "description": "少女养成称霸宇宙的龙族" 8 | }, 9 | { 10 | "cover": "https://manhua.qpic.cn/vertical/0/10_18_36_663c08d4a0d4672d53f8fe7fede78431_1531218989517.jpg/210", 11 | "title": "琅寰书院", 12 | "description": "玩世不恭却武力暴表的修仙校长" 13 | }, 14 | { 15 | "cover": "https://manhua.qpic.cn/vertical/0/16_14_30_087fdc71c515386453d86e3546d1bdab_1516084234856.jpg/210", 16 | "title": "爱神巧克力进行时", 17 | "description": "爱情不仅需要巧克力" 18 | }, 19 | { 20 | "cover": "https://manhua.qpic.cn/vertical/0/12_10_56_3d885ab7c6fe98dd640b6b2dc7bf8aa0_1515725818201.jpg/210", 21 | "title": "西行纪", 22 | "description": "西天取经藏惊天阴谋" 23 | }, 24 | { 25 | "cover": "https://manhua.qpic.cn/vertical/0/21_17_29_23f3fefe9af6461d1b62af4475967c15_1550741391029.jpg/210", 26 | "title": "我才不是恶毒女配", 27 | "description": "“献身”恶趣味影帝" 28 | }, 29 | { 30 | "cover": "https://manhua.qpic.cn/vertical/0/17_10_17_f18bde9e112b13c4b6858a82d8f2a5ef_1508206662525.jpg/210", 31 | "title": "抱紧我的小白龙", 32 | "description": "穿梭万年的思恋" 33 | } 34 | ] 35 | } -------------------------------------------------------------------------------- /data/comic_detail_tab2.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "updateTime": "2019-04-23 更新到87话", 3 | "categoryList": [ 4 | "87", 5 | "86", 6 | "85", 7 | "84", 8 | "83", 9 | "82", 10 | "81", 11 | "80", 12 | "79" 13 | ], 14 | "actionName": "大人，查看更多目录", 15 | "recommendList": [ 16 | { 17 | "cover": "https://manhua.qpic.cn/vertical/0/12_10_56_3d885ab7c6fe98dd640b6b2dc7bf8aa0_1515725818201.jpg/210", 18 | "title": "西行纪", 19 | "description": "西天取经藏惊天阴谋" 20 | }, 21 | { 22 | "cover": "https://manhua.qpic.cn/vertical/0/21_17_29_23f3fefe9af6461d1b62af4475967c15_1550741391029.jpg/210", 23 | "title": "我才不是恶毒女配", 24 | "description": "“献身”恶趣味影帝" 25 | }, 26 | { 27 | "cover": "https://manhua.qpic.cn/vertical/0/17_10_17_f18bde9e112b13c4b6858a82d8f2a5ef_1508206662525.jpg/210", 28 | "title": "抱紧我的小白龙", 29 | "description": "穿梭万年的思恋" 30 | }, 31 | { 32 | "cover": "https://manhua.qpic.cn/vertical/0/15_17_37_a38b626ce39a1d1d491de60348fdffec_1516009027614.jpg/210", 33 | "title": "我的王还未成年", 34 | "description": "少女养成称霸宇宙的龙族" 35 | }, 36 | { 37 | "cover": "https://manhua.qpic.cn/vertical/0/10_18_36_663c08d4a0d4672d53f8fe7fede78431_1531218989517.jpg/210", 38 | "title": "琅寰书院", 39 | "description": "玩世不恭却武力暴表的修仙校长" 40 | }, 41 | { 42 | "cover": "https://manhua.qpic.cn/vertical/0/16_14_30_087fdc71c515386453d86e3546d1bdab_1516084234856.jpg/210", 43 | "title": "爱神巧克力进行时", 44 | "description": "爱情不仅需要巧克力" 45 | } 46 | ] 47 | } -------------------------------------------------------------------------------- /pages/video/video.wxss: -------------------------------------------------------------------------------- 1 | /* pages/video/video.wxss */ 2 | 3 | .video { 4 | display: flex; 5 | flex-wrap: wrap; 6 | flex-direction: row; 7 | padding-left: 20rpx; 8 | padding-right: 20rpx; 9 | justify-content: space-between; 10 | align-items: center; 11 | overflow: hidden; 12 | background: #f8f8f8; 13 | } 14 | 15 | .video-items { 16 | width: 345rpx; 17 | height: 315rpx; 18 | background: #fff; 19 | border-radius: 20rpx; 20 | margin-top: 10rpx; 21 | margin-bottom: 10rpx; 22 | overflow: hidden; 23 | display: flex; 24 | flex-direction: column; 25 | } 26 | 27 | .video-image { 28 | width: 345rpx; 29 | height: 200rpx; 30 | } 31 | 32 | .video-title { 33 | display: -webkit-box; 34 | word-break: break-all; 35 | margin-left: 6rpx; 36 | margin-right: 6rpx; 37 | margin-top: 4rpx; 38 | font-size: 24rpx; 39 | color: #333; 40 | text-overflow: ellipsis; 41 | overflow: hidden; 42 | -webkit-box-orient: vertical; 43 | -webkit-line-clamp: 2; 44 | } 45 | 46 | .video-play-info { 47 | width: 345rpx; 48 | margin-top: 6rpx; 49 | padding-left: 6rpx; 50 | padding-right: 6rpx; 51 | } 52 | 53 | .video-left{ 54 | display: flex; 55 | align-items: center; 56 | float: left; 57 | } 58 | 59 | .video-play-icon { 60 | width: 30rpx; 61 | height: 30rpx; 62 | } 63 | 64 | .play-count { 65 | color: #ff9a6a; 66 | font-size: 24rpx; 67 | margin-left: 4rpx; 68 | } 69 | 70 | .play-text { 71 | color: #999; 72 | font-size: 24rpx; 73 | } 74 | 75 | .play-star { 76 | color: #999; 77 | font-size: 24rpx; 78 | float: right; 79 | } 80 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": [ 3 | "pages/comic/comic", 4 | "pages/ucenter/ucenter", 5 | "pages/logs/logs", 6 | "pages/video/video", 7 | "pages/comic_detail/comicDetail", 8 | "pages/comic-reader/comicReader", 9 | "pages/video_play/videoPlay" 10 | ], 11 | "window": { 12 | "navigationBarBackgroundColor": "#FFFFFF", 13 | "navigationBarTextStyle": "black", 14 | "enablePullDownRefresh": false, 15 | "backgroundColor": "#FFFFFF", 16 | "backgroundTextStyle": "dark" 17 | }, 18 | "tabBar": { 19 | "backgroundColor": "#ffffff", 20 | "borderStyle": "white", 21 | "selectedColor": "#ff9a6a", 22 | "color": "#999", 23 | "list": [ 24 | { 25 | "pagePath": "pages/comic/comic", 26 | "iconPath": "static/images/tab_comic_home_n.png", 27 | "selectedIconPath": "static/images/tab_comic_home_p.png", 28 | "text": "首页" 29 | }, 30 | { 31 | "pagePath": "pages/video/video", 32 | "iconPath": "static/images/tab_video_home_n.png", 33 | "selectedIconPath": "static/images/tab_video_home_p.png", 34 | "text": "短视频" 35 | }, 36 | { 37 | "pagePath": "pages/ucenter/ucenter", 38 | "iconPath": "static/images/tab_mine_n.png", 39 | "selectedIconPath": "static/images/tab_mine_p.png", 40 | "text": "我的" 41 | } 42 | ] 43 | }, 44 | "networkTimeout": { 45 | "request": 10000, 46 | "connectSocket": 10000, 47 | "uploadFile": 10000, 48 | "downloadFile": 10000 49 | }, 50 | "debug": true, 51 | "sitemapLocation": "sitemap.json" 52 | } -------------------------------------------------------------------------------- /pages/comic/comic.js: -------------------------------------------------------------------------------- 1 | const localData = require("../../data/home_comic.js") 2 | const util = require('../../utils/util.js'); 3 | const api = require('../../config/api.js'); 4 | //获取应用实例 5 | const app = getApp() 6 | 7 | Page({ 8 | data: { 9 | banner: [], 10 | blockList: [], 11 | recommendEveryDay: {}, 12 | updateTodayList: [], 13 | }, 14 | 15 | onPullDownRefresh() { 16 | wx.showLoading({ 17 | title: '正在加载中', 18 | }); //在标题栏中显示加载 19 | setTimeout(() => { 20 | this.getHomeComicData(); 21 | wx.hideLoading(); //完成停止加载 22 | wx.stopPullDownRefresh() //停止下拉刷新 23 | }, 2000); 24 | 25 | }, 26 | 27 | onLoad: function() { 28 | this.getHomeComicData(); 29 | wx.setNavigationBarTitle({ 30 | title: '仿腾讯动漫' 31 | }); 32 | }, 33 | 34 | getHomeComicData: function() { 35 | // 无网络，为了展示，用本地数据 36 | this.setData({ 37 | banner: localData.banner, 38 | blockList: localData.blockList, 39 | recommendEveryDay: localData.recommendEveryDay, 40 | updateTodayList: localData.updateTodayList, 41 | }) 42 | 43 | // 网络请求 44 | // util.request(api.homeComic).then((res) => { 45 | // this.setData({ 46 | // banner: res.banner, 47 | // blockList: res.blockList, 48 | // recommendEveryDay: res.recommendEveryDay, 49 | // updateTodayList: res.updateTodayList, 50 | // }); 51 | // }); 52 | }, 53 | 54 | 55 | // 页面分享 56 | onShareAppMessage: function() { 57 | let that = this; 58 | return { 59 | title: '仿腾讯动漫', 60 | desc: '唯爱与美食不可辜负', 61 | path: '/pages/comic/comic' 62 | } 63 | }, 64 | }) -------------------------------------------------------------------------------- /utils/util.js: -------------------------------------------------------------------------------- 1 | const formatTime = date => { 2 | const year = date.getFullYear() 3 | const month = date.getMonth() + 1 4 | const day = date.getDate() 5 | const hour = date.getHours() 6 | const minute = date.getMinutes() 7 | const second = date.getSeconds() 8 | 9 | return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':') 10 | } 11 | 12 | const formatNumber = n => { 13 | n = n.toString() 14 | return n[1] ? n : '0' + n 15 | } 16 | 17 | /** 18 | * 封装微信的的request 19 | */ 20 | function request(url, data = {}, method = "GET") { 21 | return new Promise((resolve, reject) => { 22 | wx.request({ 23 | url: url, 24 | data: data, 25 | method: method, 26 | header: { 27 | 'Content-Type': 'application/json', 28 | 'X-token': wx.getStorageSync('token') 29 | }, 30 | success: function(res) { 31 | if (res.statusCode == 200) { 32 | if (res.data.errno == 501) { 33 | // 清除登录相关内容 34 | try { 35 | wx.removeStorageSync('userInfo'); 36 | wx.removeStorageSync('token'); 37 | } catch (e) { 38 | // Do something when catch error 39 | } 40 | // 切换到登录页面 41 | wx.navigateTo({ 42 | url: '/pages/login/login' 43 | }); 44 | } else { 45 | resolve(res.data); 46 | } 47 | } else { 48 | reject(res.errMsg); 49 | } 50 | }, 51 | fail: function(err) { 52 | reject(err) 53 | } 54 | }) 55 | }); 56 | } 57 | 58 | module.exports = { 59 | formatTime, 60 | request 61 | } -------------------------------------------------------------------------------- /pages/video_play/videoPlay.js: -------------------------------------------------------------------------------- 1 | function getRandomColor() { 2 | const rgb = [] 3 | for (let i = 0; i < 3; ++i) { 4 | let color = Math.floor(Math.random() * 256).toString(16) 5 | color = color.length === 1 ? '0' + color : color 6 | rgb.push(color) 7 | } 8 | return '#' + rgb.join('') 9 | } 10 | 11 | Page({ 12 | onShareAppMessage() { 13 | return { 14 | title: 'video', 15 | path: 'page/component/pages/video/video', 16 | } 17 | }, 18 | 19 | onLoad: function(options) { 20 | wx.setNavigationBarTitle({ 21 | title: '三人行钢琴曲' 22 | }) 23 | }, 24 | 25 | onReady() { 26 | this.videoContext = wx.createVideoContext('myVideo') 27 | this.toast = this.selectComponent("#toast"); 28 | }, 29 | 30 | data: { 31 | coverImage: "https://image1.pearvideo.com/main/20190517/12719568-133605-1.png", 32 | videoUrl: "https://video.pearvideo.com/mp4/third/20190517/cont-1555570-12719568-133553-hd.mp4", 33 | danmuList: [{ 34 | text: '第 1s 出现的弹幕', 35 | color: '#ff0000', 36 | time: 1 37 | }, { 38 | text: '第 3s 出现的弹幕', 39 | color: '#ff00ff', 40 | time: 3 41 | }], 42 | initText: '' 43 | }, 44 | 45 | bindInputBlur(e) { 46 | this.inputValue = e.detail.value 47 | }, 48 | 49 | bindButtonTap() { 50 | const that = this 51 | wx.chooseVideo({ 52 | sourceType: ['album', 'camera'], 53 | maxDuration: 60, 54 | camera: ['front', 'back'], 55 | success(res) { 56 | that.setData({ 57 | src: res.tempFilePath 58 | }) 59 | } 60 | }) 61 | }, 62 | 63 | bindSendDanmu() { 64 | if (this.inputValue == null || this.inputValue == '') { 65 | this.toast.showToast('弹幕不能为空哟'); 66 | return 67 | } 68 | this.videoContext.sendDanmu({ 69 | text: this.inputValue, 70 | color: getRandomColor() 71 | }) 72 | this.setData({ 73 | initText: '' 74 | }) 75 | this.inputValue = '' 76 | this.toast.showToast('弹幕发送成功'); 77 | }, 78 | 79 | videoErrorCallback(e) { 80 | console.log('视频错误信息:') 81 | console.log(e.detail.errMsg) 82 | } 83 | }) -------------------------------------------------------------------------------- /pages/ucenter/ucenter.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 0.0 10 | 书豆余额 11 | 12 | 13 | 0 14 | 书券（张） 15 | 16 | 17 | 0 18 | 月票 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /pages/comic_detail/comicDetail.js: -------------------------------------------------------------------------------- 1 | // pages/comic_detail/comicDetail.js 2 | var localOverView = require("../../data/comic_detail.js") 3 | var localDetailTab1 = require("../../data/comic_detail_tab1.js") 4 | var localDetailTab2 = require("../../data/comic_detail_tab2.js") 5 | var localDetailTab3 = require("../../data/comic_detail_tab3.js") 6 | //获取应用实例 7 | const app = getApp() 8 | 9 | Page({ 10 | 11 | /** 12 | * 页面的初始数据 13 | */ 14 | data: { 15 | id: 0, 16 | overView: {}, 17 | detailTab1: {}, 18 | detailTab2: {}, 19 | detailTab3: {}, 20 | // 这里改变当前显示第几个tab 21 | currentTab: 1, 22 | }, 23 | 24 | // tab滑动 25 | bindChange(e) { 26 | this.setData({ 27 | currentTab: e.detail.current 28 | }) 29 | }, 30 | // 左 31 | onLeft() { 32 | this.setData({ 33 | currentTab: 0 34 | }) 35 | }, 36 | // 、中 37 | onMiddle() { 38 | this.setData({ 39 | currentTab: 1 40 | }) 41 | }, 42 | // 右 43 | onRight() { 44 | this.setData({ 45 | currentTab: 2 46 | }) 47 | }, 48 | 49 | /** 50 | * 生命周期函数--监听页面加载 51 | */ 52 | onLoad: function(options) { 53 | // 页面初始化 options为页面跳转所带来的参数 54 | if (options.id) { 55 | this.setData({ 56 | id: parseInt(options.id) 57 | }); 58 | } 59 | this.setData({ 60 | overView: localOverView, 61 | detailTab1: localDetailTab1, 62 | detailTab2: localDetailTab2, 63 | detailTab3: localDetailTab3, 64 | }) 65 | console.log(this.data.detailTab1) 66 | wx.setNavigationBarTitle({ 67 | title: localOverView.title 68 | }) 69 | }, 70 | 71 | /** 72 | * 生命周期函数--监听页面初次渲染完成 73 | */ 74 | onReady: function() {}, 75 | 76 | /** 77 | * 生命周期函数--监听页面显示 78 | */ 79 | onShow: function() {}, 80 | 81 | /** 82 | * 生命周期函数--监听页面隐藏 83 | */ 84 | onHide: function() { 85 | 86 | }, 87 | 88 | /** 89 | * 生命周期函数--监听页面卸载 90 | */ 91 | onUnload: function() {}, 92 | 93 | /** 94 | * 页面相关事件处理函数--监听用户下拉动作 95 | */ 96 | onPullDownRefresh: function() {}, 97 | 98 | /** 99 | * 页面上拉触底事件的处理函数 100 | */ 101 | onReachBottom: function() {}, 102 | 103 | /** 104 | * 用户点击右上角分享 105 | */ 106 | onShareAppMessage: function() {} 107 | }) -------------------------------------------------------------------------------- /pages/comic/comic.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 10 | 11 | 12 | 13 | 14 | 15 | {{item.title}} 16 | {{item.description}} 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | {{recommendEveryDay.title}} 26 | {{recommendEveryDay.author}} 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | {{item.title}} 39 | {{item.author}} 40 | {{item.newUpdate}} 41 | 42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /data/home_comic.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "banner": [ 3 | "https://manhua.qpic.cn/operation/0/19_23_51_3fa71e4fd07f0f370af0465faa6ccdb5_1555689063579.jpg/0", 4 | "https://manhua.qpic.cn/operation/0/19_23_51_898a3baa00cba550d9fe64a372bee24a_1555689101098.jpg/0", 5 | "https://manhua.qpic.cn/operation/0/19_23_52_6234abed1062e3601cd639fd376760a3_1555689133306.jpg/0", 6 | "https://manhua.qpic.cn/operation/0/19_23_52_c0343c40a42861d776eb2b265015bef2_1555689169278.jpg/0", 7 | "https://manhua.qpic.cn/operation/0/19_23_53_8968d75fb1619aa30adfaf271a271642_1555689199834.jpg/0" 8 | ], 9 | "blockList": [{ 10 | "cover": "https://manhua.qpic.cn/vertical/0/31_18_48_9cc9207ef30ff63eb5760b08db398bd2_1522493317646.jpg/210", 11 | "title": "脱团大作战", 12 | "description": "变成妹子开后宫" 13 | }, 14 | { 15 | "cover": "https://manhua.qpic.cn/vertical/0/17_17_14_15c6ee8113c862daddf4b886a12b24cd.jpg/210", 16 | "title": "火戟特工", 17 | "description": "接单除妖，特工参上" 18 | }, 19 | { 20 | "cover": "https://manhua.qpic.cn/vertical/0/05_08_42_9e04bd6448969ddae05caf617334ae86_1501893743108.jpg/210", 21 | "title": "天神纠错组", 22 | "description": "我的老板是天神~！" 23 | }, 24 | { 25 | "cover": "https://manhua.qpic.cn/vertical/0/17_16_12_e255333f25db437c2b3f7465634e84d6.jpg/210", 26 | "title": "白泽异闻录", 27 | "description": "白泽，行走的美男计" 28 | }, 29 | { 30 | "cover": "https://manhua.qpic.cn/vertical/0/17_17_09_e1117593631cf3e911bcfd4eab872518.jpg/210", 31 | "title": "整容医师", 32 | "description": "整形医生的明争暗斗" 33 | }, 34 | { 35 | "cover": "https://manhua.qpic.cn/vertical/0/11_15_46_46946230d0e6c8a6fb2131bc534f8514_1536652000382.jpg/210", 36 | "title": "阿多尼斯", 37 | "description": "重生女主征服世界" 38 | } 39 | ], 40 | "recommendEveryDay": { 41 | "cover": "https://manhua.qpic.cn/operation/0/12_21_47_fb128483361b6c3de7a96b56411d0573_1534081656643.jpg/0", 42 | "title": "狐妖小红娘", 43 | "author": "作者：小新" 44 | }, 45 | "updateTodayList": [{ 46 | "cover": "https://manhua.qpic.cn/vertical/0/17_17_12_5341946e0a496194d17575df7b0d23cf.jpg/210", 47 | "title": "神俑降临", 48 | "author": "作者：莒小暗", 49 | "newUpdate": "更新到271话" 50 | }, 51 | { 52 | "cover": "https://manhua.qpic.cn/vertical/0/27_15_28_3ddec3acc01cc021306e187360a97570_1535354882004.jpg/210", 53 | "title": "我的男友风净尘", 54 | "author": "作者：极光动漫", 55 | "newUpdate": "更新到412话" 56 | }, 57 | { 58 | "cover": "https://manhua.qpic.cn/vertical/0/26_11_06_35bd4ea1ac2dda5e1ffb3bc09add9086_1543201615335.jpg/210", 59 | "title": "传武", 60 | "author": "作者：GK工坊", 61 | "newUpdate": "更新到115话" 62 | } 63 | ] 64 | } 65 | -------------------------------------------------------------------------------- /pages/comic/comic.wxss: -------------------------------------------------------------------------------- 1 | .container { 2 | box-sizing: border-box; 3 | background-color: #f5f5ee; 4 | font-family: PingFangSC-Light, helvetica, 'Heiti SC'; 5 | } 6 | 7 | .banner { 8 | width: 750rpx; 9 | height: 417rpx; 10 | } 11 | 12 | .banner image { 13 | width: 100%; 14 | height: 430rpx; 15 | } 16 | 17 | .block-header { 18 | width: 100%; 19 | height: 90rpx; 20 | display: flex; 21 | flex-direction: column; 22 | } 23 | 24 | .m-block { 25 | display: flex; 26 | flex-wrap: wrap; 27 | flex-direction: row; 28 | justify-content: space-around; 29 | align-items: center; 30 | overflow: hidden; 31 | } 32 | 33 | .m-block .item { 34 | width: 230rpx; 35 | height: 410rpx; 36 | background: #fff; 37 | border-radius: 15rpx; 38 | overflow: hidden; 39 | margin: 10rpx; 40 | } 41 | 42 | .m-block .item image { 43 | width: 230rpx; 44 | height: 330rpx; 45 | } 46 | 47 | .m-block .block-title { 48 | display: block; 49 | height: 30rpx; 50 | width: 100%; 51 | color: #999; 52 | font-size: 24rpx; 53 | white-space: nowrap; 54 | overflow: hidden; 55 | text-overflow: ellipsis; 56 | text-align: center; 57 | } 58 | 59 | .m-block .block-dec { 60 | display: block; 61 | height: 30rpx; 62 | width: 100%; 63 | color: #999; 64 | font-size: 24rpx; 65 | white-space: nowrap; 66 | overflow: hidden; 67 | text-overflow: ellipsis; 68 | text-align: center; 69 | } 70 | 71 | .recommend-every-day-item { 72 | width: 750rpx; 73 | height: auto; 74 | background-color: #fff; 75 | overflow: hidden; 76 | padding-bottom: 10rpx; 77 | margin-bottom: 15rpx; 78 | } 79 | 80 | .recommend-every-day-item .recommend-image { 81 | width: 750rpx; 82 | height: 375rpx; 83 | } 84 | 85 | .recommend-every-day-item .recommend-title { 86 | float: left; 87 | margin-left: 15rpx; 88 | } 89 | 90 | .recommend-every-day-item .recommend-author { 91 | float: right; 92 | margin-right: 15rpx; 93 | } 94 | 95 | .update_today-item { 96 | width: 100%; 97 | height: auto; 98 | background-color: #fff; 99 | overflow: hidden; 100 | } 101 | 102 | .update_today-item .update_today-left-image { 103 | width: 250rpx; 104 | height: 750rpx; 105 | float: left; 106 | } 107 | 108 | .update_today-item .right-view { 109 | width: 500rpx; 110 | height: 750rpx; 111 | float: right; 112 | display: flex; 113 | flex-wrap: wrap; 114 | flex-direction: column; 115 | justify-content: space-around; 116 | } 117 | 118 | .update_today-item .right-item { 119 | width: 500rpx; 120 | height: 220rpx; 121 | display: flex; 122 | flex-wrap: wrap; 123 | flex-direction: row; 124 | } 125 | 126 | .update_today-item .right-item .right-image { 127 | width: 140rpx; 128 | height: 210rpx; 129 | float: left; 130 | } 131 | 132 | .update_today-item .right-item .text { 133 | width: 260rpx; 134 | height: 220rpx; 135 | display: flex; 136 | margin-left: 35rpx; 137 | flex-direction: column; 138 | justify-content: center; 139 | } 140 | -------------------------------------------------------------------------------- /data/comic_detail_tab3.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "commentList": [{ 3 | "avatar": "https://thirdqq.qlogo.cn/g?b=sdk&k=5pfxibWnCgg3N0bJIpV1CKg&s=640&t=1528625662", 4 | "userName": "风之姬", 5 | "time": "2019年4月5日", 6 | "content": "男主好渣啊" 7 | }, 8 | { 9 | "avatar": "https://thirdqq.qlogo.cn/g?b=sdk&k=fPM7avejogdOPYw75G74icA&s=640&t=1517994133", 10 | "userName": "澄澈", 11 | "time": "2019年4月2日", 12 | "content": "议员hhhhhh" 13 | }, 14 | { 15 | "avatar": "https://thirdqq.qlogo.cn/g?b=sdk&k=ZvE7Xdhhal2cia9J6PGagWQ&s=640&t=1519134404", 16 | "userName": "老王", 17 | "time": "2019年3月18日", 18 | "content": "有免费的何必花钱?顺便说一句:快更awa" 19 | }, 20 | { 21 | "avatar": "https://thirdqq.qlogo.cn/g?b=sdk&k=5uoRcibAmzSbBFU9vxy7DPw&s=640&t=1550934707", 22 | "userName": "linda", 23 | "time": "2019年2月28日", 24 | "content": "作者大大别收费" 25 | }, 26 | { 27 | "avatar": "https://thirdqq.qlogo.cn/g?b=sdk&k=naYoBPKyTowJictOoFeR4VQ&s=640&t=1483964286", 28 | "userName": "贱得闪闪发光", 29 | "time": "2019年2月17日", 30 | "content": "毕竟当年是当小黄书来看的" 31 | }, 32 | { 33 | "avatar": "https://thirdqq.qlogo.cn/g?b=sdk&k=ZporC9H1vricZ7czGgLvjXQ&s=640&t=1549534152", 34 | "userName": "怀念过去", 35 | "time": "2019年2月11日", 36 | "content": "这么黄不下架么" 37 | }, 38 | { 39 | "avatar": "https://thirdqq.qlogo.cn/g?b=sdk&k=ibPA3vtQJHeWXbNpDVvqVVg&s=640&t=1540005767", 40 | "userName": "小笼包", 41 | "time": "2019年1月20日", 42 | "content": "。" 43 | }, 44 | { 45 | "avatar": "https://thirdqq.qlogo.cn/g?b=sdk&k=WrP9bW9OKEh4VMlR5pyx6A&s=640&t=1517565054", 46 | "userName": "滑稽卡", 47 | "time": "2019年1月16日", 48 | "content": "合同有问题!对我们的福利太多了" 49 | }, 50 | { 51 | "avatar": "https://thirdqq.qlogo.cn/g?b=sdk&k=WrP9bW9OKEh4VMlR5pyx6A&s=640&t=1517565054", 52 | "userName": "滑稽卡", 53 | "time": "2019年1月16日", 54 | "content": "HD版无所畏惧" 55 | }, 56 | { 57 | "avatar": "https://thirdqq.qlogo.cn/g?b=sdk&k=8Fiat8zwaPDFZ1gqkGy2EHA&s=640&t=1498900776", 58 | "userName": "作哥", 59 | "time": "2019年1月12日", 60 | "content": "我有钱 想看就看,但是,小编收费过多" 61 | }, 62 | { 63 | "avatar": "https://thirdqq.qlogo.cn/g?b=sdk&k=5pfxibWnCgg3N0bJIpV1CKg&s=640&t=1528625662", 64 | "userName": "风之姬", 65 | "time": "2019年4月5日", 66 | "content": "男主好渣啊" 67 | }, 68 | { 69 | "avatar": "https://thirdqq.qlogo.cn/g?b=sdk&k=fPM7avejogdOPYw75G74icA&s=640&t=1517994133", 70 | "userName": "澄澈", 71 | "time": "2019年4月2日", 72 | "content": "议员hhhhhh" 73 | }, 74 | { 75 | "avatar": "https://thirdqq.qlogo.cn/g?b=sdk&k=ZvE7Xdhhal2cia9J6PGagWQ&s=640&t=1519134404", 76 | "userName": "老王", 77 | "time": "2019年3月18日", 78 | "content": "有免费的何必花钱?顺便说一句:快更awa" 79 | }, 80 | { 81 | "avatar": "https://thirdqq.qlogo.cn/g?b=sdk&k=5uoRcibAmzSbBFU9vxy7DPw&s=640&t=1550934707", 82 | "userName": "linda", 83 | "time": "2019年2月28日", 84 | "content": "作者大大别收费" 85 | }, 86 | { 87 | "avatar": "https://thirdqq.qlogo.cn/g?b=sdk&k=naYoBPKyTowJictOoFeR4VQ&s=640&t=1483964286", 88 | "userName": "贱得闪闪发光", 89 | "time": "2019年2月17日", 90 | "content": "毕竟当年是当小黄书来看的" 91 | }, 92 | { 93 | "avatar": "https://thirdqq.qlogo.cn/g?b=sdk&k=ZporC9H1vricZ7czGgLvjXQ&s=640&t=1549534152", 94 | "userName": "怀念过去", 95 | "time": "2019年2月11日", 96 | "content": "这么黄不下架么" 97 | }, 98 | { 99 | "avatar": "https://thirdqq.qlogo.cn/g?b=sdk&k=ibPA3vtQJHeWXbNpDVvqVVg&s=640&t=1540005767", 100 | "userName": "小笼包", 101 | "time": "2019年1月20日", 102 | "content": "。" 103 | }, 104 | { 105 | "avatar": "https://thirdqq.qlogo.cn/g?b=sdk&k=WrP9bW9OKEh4VMlR5pyx6A&s=640&t=1517565054", 106 | "userName": "滑稽卡", 107 | "time": "2019年1月16日", 108 | "content": "合同有问题!对我们的福利太多了" 109 | }, 110 | { 111 | "avatar": "https://thirdqq.qlogo.cn/g?b=sdk&k=WrP9bW9OKEh4VMlR5pyx6A&s=640&t=1517565054", 112 | "userName": "滑稽卡", 113 | "time": "2019年1月16日", 114 | "content": "HD版无所畏惧" 115 | }, 116 | { 117 | "avatar": "https://thirdqq.qlogo.cn/g?b=sdk&k=8Fiat8zwaPDFZ1gqkGy2EHA&s=640&t=1498900776", 118 | "userName": "作哥", 119 | "time": "2019年1月12日", 120 | "content": "我有钱 想看就看,但是,小编收费过多" 121 | } 122 | ] 123 | } -------------------------------------------------------------------------------- /pages/comic_detail/comicDetail.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | {{overView.title}} 9 | {{overView.score}} 10 | 11 | {{overView.tag}} 12 | {{overView.author}} 13 | 人气：{{overView.popularity}} 14 | 月票：{{overView.monthTicket}} 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 详情 23 | 24 | 25 | 26 | 27 | 28 | 目录 29 | 30 | 31 | 32 | 33 | 34 | 评论 35 | 36 | 37 | 38 | 39 | 40 | 41 | {{detailTab1.detail}} 42 | 骚年们都在看 43 | 44 | 45 | 46 | 47 | {{item.title}} 48 | {{item.description}} 49 | 50 | 51 | 52 | 53 | 54 | 55 | {{detailTab2.updateTime}} 56 | 57 | 58 | 59 | {{item}} 60 | 61 | 62 | 63 | {{detailTab2.actionName}} 64 | 骚年们都在看 65 | 66 | 67 | 68 | 69 | {{item.title}} 70 | {{item.description}} 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | {{item.userName}} 83 | {{item.time}} 84 | 85 | 86 | {{item.content}} 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 开始阅读 100 | 101 | -------------------------------------------------------------------------------- /pages/comic_detail/comicDetail.wxss: -------------------------------------------------------------------------------- 1 | /* pages/comic_detail/comicDetail.wxss */ 2 | 3 | .scroll-view-detail { 4 | width: 100%; 5 | height: auto; 6 | margin-bottom: 100rpx; 7 | } 8 | 9 | .top-overiew { 10 | margin: 0 auto; 11 | display: flex; 12 | justify-content: center; 13 | } 14 | 15 | .top-overview-image-left { 16 | width: 200rpx; 17 | height: 300rpx; 18 | } 19 | 20 | .overview-right { 21 | margin-left: 70rpx; 22 | display: flex; 23 | flex-direction: column; 24 | justify-content: center; 25 | } 26 | 27 | .view-score { 28 | display: flex; 29 | align-items: center; 30 | } 31 | 32 | .overview-book-name { 33 | color: #666; 34 | font-size: 40rpx; 35 | } 36 | 37 | .overview-score { 38 | display: inline-block; 39 | border-radius: 25rpx; 40 | margin-left: 10rpx; 41 | height: 50rpx; 42 | width: 50rpx; 43 | line-height: 50rpx; 44 | background: #ff9a6a; 45 | color: #fff; 46 | text-align: center; 47 | align-items: center; 48 | } 49 | 50 | .overview-title { 51 | display: block; 52 | color: #666; 53 | font-size: 30rpx; 54 | } 55 | 56 | .comic_tab { 57 | width: 100%; 58 | height: 84rpx; 59 | font-size: 32rpx; 60 | color: #4a4a4a; 61 | display: flex; 62 | border-bottom: 1px solid #f2f4f7; 63 | margin-top: 10rpx; 64 | } 65 | 66 | .comic_tabb { 67 | width: 33.33%; 68 | text-align: center; 69 | line-height: 70rpx; 70 | } 71 | 72 | .comic_tabb>view.active { 73 | color: #ff9a6a; 74 | } 75 | 76 | .comic_border { 77 | width: 64rpx; 78 | height: 4rpx; 79 | border-radius: 2rpx; 80 | background: #ff9a6a; 81 | margin: -4rpx auto 0; 82 | } 83 | 84 | .comic_title { 85 | font-size: 32rpx; 86 | color: #333; 87 | margin: 40rpx 0 28rpx; 88 | } 89 | 90 | .detail-tab { 91 | display: flex; 92 | flex-direction: column; 93 | } 94 | 95 | .tab-decription { 96 | display: block; 97 | margin: 20rpx; 98 | } 99 | 100 | .tab1-title { 101 | font-size: 18sp; 102 | margin-left: 20rpx; 103 | margin-top: 20rpx; 104 | color: #ff9a6a; 105 | } 106 | 107 | .tab-block { 108 | display: flex; 109 | flex-wrap: wrap; 110 | flex-direction: row; 111 | margin-top: 20rpx; 112 | justify-content: space-around; 113 | align-items: center; 114 | overflow: hidden; 115 | } 116 | 117 | .tab1-item { 118 | width: 220rpx; 119 | height: 400rpx; 120 | background: #fff; 121 | } 122 | 123 | .tab1-item image { 124 | width: 220rpx; 125 | height: 310rpx; 126 | } 127 | 128 | .tab1-item .block-title { 129 | display: block; 130 | height: 30rpx; 131 | width: 100%; 132 | color: #999; 133 | font-size: 24rpx; 134 | white-space: nowrap; 135 | overflow: hidden; 136 | text-overflow: ellipsis; 137 | text-align: center; 138 | } 139 | 140 | .tab1-item .block-dec { 141 | display: block; 142 | height: 30rpx; 143 | width: 100%; 144 | color: #999; 145 | font-size: 24rpx; 146 | white-space: nowrap; 147 | overflow: hidden; 148 | text-overflow: ellipsis; 149 | text-align: center; 150 | } 151 | 152 | .tab2-block { 153 | display: flex; 154 | flex-wrap: wrap; 155 | flex-direction: row; 156 | margin-left: 20rpx; 157 | margin-right: 20rpx; 158 | justify-content: space-between; 159 | align-items: center; 160 | overflow: hidden; 161 | } 162 | 163 | .tab2-chapter { 164 | width: 205rpx; 165 | height: 100rpx; 166 | margin-top: 20rpx; 167 | border: 1rpx solid #e5e5e5; 168 | border-radius: 8rpx; 169 | line-height: 100rpx; 170 | text-align: center; 171 | } 172 | 173 | .tab2-more-chapter { 174 | width: auto; 175 | margin-left: 20rpx; 176 | margin-right: 20rpx; 177 | height: 100rpx; 178 | margin-top: 20rpx; 179 | border: 1px solid #e5e5e5; 180 | border-radius: 8rpx; 181 | line-height: 100rpx; 182 | text-align: center; 183 | } 184 | 185 | .bottom-view { 186 | position: fixed; 187 | left: 0; 188 | bottom: 0; 189 | z-index: 10; 190 | width: 750rpx; 191 | height: 100rpx; 192 | display: flex; 193 | background: #fff; 194 | border-top: 1px solid #f4f4f4; 195 | padding-left: 70rpx; 196 | align-items: center; 197 | } 198 | 199 | .tab-block-comment { 200 | display: flex; 201 | flex-direction: column; 202 | justify-content: center; 203 | } 204 | 205 | .tab3-item { 206 | display: flex; 207 | flex-direction: column; 208 | } 209 | 210 | .comment-top { 211 | display: flex; 212 | align-items: center; 213 | margin-top: 10rpx; 214 | } 215 | 216 | .tab3-item .avatar { 217 | height: 60rpx; 218 | width: 60rpx; 219 | margin-left: 20rpx; 220 | border-radius: 50%; 221 | } 222 | 223 | .tab3-item .comment-userinfo { 224 | display: flex; 225 | flex-direction: column; 226 | margin-left: 20rpx; 227 | } 228 | 229 | .comment-username { 230 | display: block; 231 | width: 100%; 232 | color: #ff9a6a; 233 | font-size: 24rpx; 234 | white-space: nowrap; 235 | overflow: hidden; 236 | text-overflow: ellipsis; 237 | } 238 | 239 | .comment-time { 240 | display: block; 241 | width: 100%; 242 | color: #999; 243 | font-size: 24rpx; 244 | white-space: nowrap; 245 | overflow: hidden; 246 | text-overflow: ellipsis; 247 | } 248 | 249 | .comment-content { 250 | display: block; 251 | width: 100%; 252 | color: #333; 253 | font-size: 30rpx; 254 | margin-left: 100rpx; 255 | margin-top: 10rpx; 256 | margin-bottom: 10rpx; 257 | white-space: nowrap; 258 | overflow: hidden; 259 | text-overflow: ellipsis; 260 | } 261 | 262 | .comment-divider { 263 | border-top: 1px solid #f2f4f7; 264 | margin-left: 50rpx; 265 | } 266 | 267 | .bottom-view .download { 268 | height: 70rpx; 269 | width: 280rpx; 270 | } 271 | 272 | .bottom-view .begin-read-normal { 273 | border-radius: 2rpx; 274 | background: #ff9a6a; 275 | margin-left: 50rpx; 276 | height: 70rpx; 277 | width: 300rpx; 278 | line-height: 70rpx; 279 | text-align: center; 280 | font-size: 30rpx; 281 | color: #fff; 282 | } 283 | 284 | .begin-read-presss { 285 | border-radius: 2rpx; 286 | background: #f48f18 !important; 287 | margin-left: 50rpx; 288 | height: 70rpx; 289 | width: 300rpx; 290 | line-height: 70rpx; 291 | text-align: center; 292 | font-size: 30rpx; 293 | color: #fff; 294 | } 295 | -------------------------------------------------------------------------------- /data/comic_reader_image.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "comicPictureList": [ 3 | "https://manhua.qpic.cn/manhua_detail/0/31_10_57_00330238f2aaf7bc2e8a375a907f929f_25082.jpg/800", 4 | "https://manhua.qpic.cn/manhua_detail/0/31_10_57_93b275a2a3f30d4426aa5a6abdb0474c_25083.jpg/800", 5 | "https://manhua.qpic.cn/manhua_detail/0/31_10_57_fb0a6f40eb441a0c57df234708486551_25084.jpg/800", 6 | "https://manhua.qpic.cn/manhua_detail/0/31_10_57_c72cd8942f9b71a3f4abfdcac431c8d7_25085.jpg/800", 7 | "https://manhua.qpic.cn/manhua_detail/0/31_10_57_85bc456ecc696eb369528a594205f018_25086.jpg/800", 8 | "https://manhua.qpic.cn/manhua_detail/0/31_10_57_e9d3bc216531ee7ea55f5eb5b86b24dd_25087.jpg/800", 9 | "https://manhua.qpic.cn/manhua_detail/0/31_10_57_f2dd1f0a9f7f8f2cdf5c8ff190401ff0_25088.jpg/800", 10 | "https://manhua.qpic.cn/manhua_detail/0/31_10_57_30d07c0e5c3cbe0aac91a16d4b3eb006_25089.jpg/800", 11 | "https://manhua.qpic.cn/manhua_detail/0/31_10_57_dff5f5cef74bcc57b97b1e99559fcc81_25090.jpg/800", 12 | "https://manhua.qpic.cn/manhua_detail/0/31_10_57_12acb8f5794956a6142de8707ed26872_25091.jpg/800", 13 | "https://manhua.qpic.cn/manhua_detail/0/31_10_57_42e620877f22b3d6d577bf1d72e3492d_25092.jpg/800", 14 | "https://manhua.qpic.cn/manhua_detail/0/31_10_57_2020657efa8abf0d1bd51c44b0412d8b_25093.jpg/800", 15 | "https://manhua.qpic.cn/manhua_detail/0/31_10_57_040260eb3308d2cbcca9cc80814b594d_25094.jpg/800", 16 | "https://manhua.qpic.cn/manhua_detail/0/31_10_57_bf91b39fdb232d92cc68a587735ad962_25095.jpg/800", 17 | "https://manhua.qpic.cn/manhua_detail/0/31_10_57_7074dbd99254f1503325b14721816f6c_25096.jpg/800", 18 | "https://manhua.qpic.cn/manhua_detail/0/31_10_57_50772b654f0202a63844601bd3dc773c_25097.jpg/800", 19 | "https://manhua.qpic.cn/manhua_detail/0/31_10_57_11d5adc0cbcd02daac755b746ddf47e7_25098.jpg/800", 20 | "https://manhua.qpic.cn/manhua_detail/0/31_10_57_52031dc50c2e25cbad69eb354e940f7d_25099.jpg/800", 21 | "https://manhua.qpic.cn/manhua_detail/0/31_10_57_ee507aa7b4a548526f53298385a7ceb4_25100.jpg/800", 22 | "https://manhua.qpic.cn/manhua_detail/0/31_10_57_f3049f8ad3054114beec3cf3553dc999_25101.jpg/800", 23 | "https://manhua.qpic.cn/manhua_detail/0/31_10_57_a78149b6e091ae884cba05b5e0dc70ce_25102.jpg/800", 24 | "https://manhua.qpic.cn/manhua_detail/0/31_10_57_4f09129e54f6c0b788256d991fb53637_25103.jpg/800", 25 | "https://manhua.qpic.cn/manhua_detail/0/31_10_57_3afaee9412eb9ac12dc2b33f4e00eeba_25104.jpg/800", 26 | "https://manhua.qpic.cn/manhua_detail/0/31_10_57_8f295516cd36d02f01680dc8059d9133_25105.jpg/800", 27 | "https://manhua.qpic.cn/manhua_detail/0/31_10_57_521bf11bf907b4ba6d00cedcb1197c8c_25106.jpg/800", 28 | "https://manhua.qpic.cn/manhua_detail/0/31_10_57_726be8234eef800d860a6491307c9d9c_25107.jpg/800", 29 | "https://manhua.qpic.cn/manhua_detail/0/31_10_58_5991a818f2fb13cc22627edb826b61e0_25108.jpg/800", 30 | "https://manhua.qpic.cn/manhua_detail/0/31_10_58_bacb6a8ec041ea6414b303777e11164b_25109.jpg/800", 31 | "https://manhua.qpic.cn/manhua_detail/0/31_10_58_27b2641d7e6903b862e503b43c22964e_25110.jpg/800", 32 | "https://manhua.qpic.cn/manhua_detail/0/31_10_58_e06dca1f7227e25130e00e4c17a8ed06_25111.jpg/800", 33 | "https://manhua.qpic.cn/manhua_detail/0/31_10_57_c2c6cfd561ff64c9b8543369ad09b5b0_25112.jpg/800", 34 | "https://manhua.qpic.cn/manhua_detail/0/31_10_57_82135cd3b94ed091f245dd25f01f8e51_25113.jpg/800", 35 | "https://manhua.qpic.cn/manhua_detail/0/31_10_58_a50887afd2f8c4bf3573b51eef8da7cc_25114.jpg/800", 36 | "https://manhua.qpic.cn/manhua_detail/0/31_10_57_f260b16e9e324c042cf5f810895f35ae_25115.jpg/800", 37 | "https://manhua.qpic.cn/manhua_detail/0/31_10_58_4d9de5d178965cbf65f9051100e6ea20_25116.jpg/800", 38 | "https://manhua.qpic.cn/manhua_detail/0/31_10_58_75dc65b926884fa94537e79afbb5d1f6_25117.jpg/800", 39 | "https://manhua.qpic.cn/manhua_detail/0/31_10_58_9d349b8ec3eab84200f237b902bf2ca4_25118.jpg/800", 40 | "https://manhua.qpic.cn/manhua_detail/0/07_13_35_48063dab0618f8ec37d579f587b5d9de_25137.jpg/800", 41 | "https://manhua.qpic.cn/manhua_detail/0/07_13_35_fc8207b8d123be53a070c292ec01cbb2_25138.jpg/800", 42 | "https://manhua.qpic.cn/manhua_detail/0/07_13_35_929740d91e152a88dc666bb42f70d84a_25139.jpg/800", 43 | "https://manhua.qpic.cn/manhua_detail/0/07_13_36_c288137079dd9f6c5210887caf1949a0_25140.jpg/800", 44 | "https://manhua.qpic.cn/manhua_detail/0/07_13_36_09d874d7b70e9ce93012f6d13001cc40_25141.jpg/800", 45 | "https://manhua.qpic.cn/manhua_detail/0/07_13_36_22de4f322ca0d32d41da677bcc834a91_25142.jpg/800", 46 | "https://manhua.qpic.cn/manhua_detail/0/07_13_36_34c80bc8a2bf235202bf567bf519b9ee_25143.jpg/800", 47 | "https://manhua.qpic.cn/manhua_detail/0/07_13_36_3ad92b06c1c6d687ef076cf8c61224b1_25144.jpg/800", 48 | "https://manhua.qpic.cn/manhua_detail/0/07_13_36_143eb56b8747375fc035a80ab317f44a_25145.jpg/800", 49 | "https://manhua.qpic.cn/manhua_detail/0/07_13_36_938fcc0ad94f88102dd5f2a00482e3b5_25146.jpg/800", 50 | "https://manhua.qpic.cn/manhua_detail/0/07_13_36_dbf3759b4fe349edefa957de162f60b4_25147.jpg/800", 51 | "https://manhua.qpic.cn/manhua_detail/0/07_13_36_724c3aef72b0e149da540cc969a654ea_25148.jpg/800", 52 | "https://manhua.qpic.cn/manhua_detail/0/07_13_36_0c5c0e7260810b0830818b21b6be71e5_25149.jpg/800", 53 | "https://manhua.qpic.cn/manhua_detail/0/07_13_36_0dfd5a89d94fd520719194bdde79a8c7_25150.jpg/800", 54 | "https://manhua.qpic.cn/manhua_detail/0/07_13_36_27558f2c444f3b4322347c127625dd64_25151.jpg/800", 55 | "https://manhua.qpic.cn/manhua_detail/0/07_13_36_f05b468a541167c6c7c8e6f50fd845b2_25152.jpg/800", 56 | "https://manhua.qpic.cn/manhua_detail/0/07_13_36_23f038e3a42a202423b6c1da8ec85a98_25153.jpg/800", 57 | "https://manhua.qpic.cn/manhua_detail/0/07_13_36_ce71b208d858a2214ed6dc43a7c9d961_25154.jpg/800", 58 | "https://manhua.qpic.cn/manhua_detail/0/07_13_36_bb05b24780265f08bc1eee7d36dac770_25155.jpg/800", 59 | "https://manhua.qpic.cn/manhua_detail/0/07_13_36_26ddec0788322da7ce108c75cfa58c08_25156.jpg/800", 60 | "https://manhua.qpic.cn/manhua_detail/0/07_13_36_451028ce3a32a33c2abc5b620d675174_25157.jpg/800", 61 | "https://manhua.qpic.cn/manhua_detail/0/07_13_36_ebe0b271d103e825c8b819def831d656_25158.jpg/800", 62 | "https://manhua.qpic.cn/manhua_detail/0/07_13_36_c29b3971b878c1f52bff1cbaa5c01104_25159.jpg/800", 63 | "https://manhua.qpic.cn/manhua_detail/0/07_13_36_c272706dca92fee78238c2384d2e4eac_25160.jpg/800", 64 | "https://manhua.qpic.cn/manhua_detail/0/07_13_36_ff9c5db3f710cada320e19e9059ca884_25161.jpg/800", 65 | "https://manhua.qpic.cn/manhua_detail/0/07_13_37_d967bdff4152e64c3d6afd7afa599092_25162.jpg/800", 66 | "https://manhua.qpic.cn/manhua_detail/0/07_13_36_acbdde87fdf3bcefc2968e3dab438a79_25163.jpg/800", 67 | "https://manhua.qpic.cn/manhua_detail/0/07_13_37_9a56da91bb2e85f463a08a0679ac88f6_25164.jpg/800", 68 | "https://manhua.qpic.cn/manhua_detail/0/07_13_36_fd085add6b8f7ff1712767dbf1921f21_25165.jpg/800", 69 | "https://manhua.qpic.cn/manhua_detail/0/07_13_36_6be7166bff497386df67e940259dd046_25166.jpg/800", 70 | "https://manhua.qpic.cn/manhua_detail/0/07_13_36_2683460a21ef2219880f3b6266cfff54_25167.jpg/800", 71 | "https://manhua.qpic.cn/manhua_detail/0/07_13_36_704640e4fe2a533636f0aef3ecf964be_25168.jpg/800", 72 | "https://manhua.qpic.cn/manhua_detail/0/07_13_37_53da73ae24a38fb5e754bbdfc0b48c1b_25169.jpg/800", 73 | "https://manhua.qpic.cn/manhua_detail/0/07_13_37_00dcfae537dd4be8e1f473ed69d68fdf_25170.jpg/800", 74 | "https://manhua.qpic.cn/manhua_detail/0/07_13_38_8dbeaffeb8f8bfc8fa22cb6ca2dc38bd_25171.jpg/800", 75 | "https://manhua.qpic.cn/manhua_detail/0/07_13_38_1d1ed2f2f514fca440d339fe50c3da42_25172.jpg/800", 76 | "https://manhua.qpic.cn/manhua_detail/0/07_13_38_3a76e0d7bdd68f4c49cb8c47b4e09fd2_25173.jpg/800", 77 | "https://manhua.qpic.cn/manhua_detail/0/07_13_38_6324ae25d953285303a3c9f49266889d_25174.jpg/800", 78 | "https://manhua.qpic.cn/manhua_detail/0/07_13_38_bae2ead6752f63dac4c9c12d6673215c_25175.jpg/800", 79 | "https://manhua.qpic.cn/manhua_detail/0/07_13_38_6f05090bed51af32cc1f66aa79a02130_25176.jpg/800", 80 | "https://manhua.qpic.cn/manhua_detail/0/07_13_38_a043e6a96c57a6b71872afbfc524c7d2_25177.jpg/800", 81 | "https://manhua.qpic.cn/manhua_detail/0/07_13_38_550d70a73e710f27616eb72c44405ef3_25178.jpg/800", 82 | "https://manhua.qpic.cn/manhua_detail/0/07_13_38_5dc60275e01de5ad875bb95e5ff00584_25179.jpg/800", 83 | "https://manhua.qpic.cn/manhua_detail/0/07_13_38_609a858828d635185b508d22491f8acb_25180.jpg/800", 84 | "https://manhua.qpic.cn/manhua_detail/0/07_13_38_cf4b0157992d1a6c5f66a195e0dac669_25181.jpg/800", 85 | "https://manhua.qpic.cn/manhua_detail/0/20_17_34_0c72f12a58bc96de3f8e7d81f6436078_27594.jpg/800", 86 | "https://manhua.qpic.cn/manhua_detail/0/07_13_38_c695f4d0276bd95b5abd95ae24b98e95_25183.jpg/800", 87 | "https://manhua.qpic.cn/manhua_detail/0/07_13_38_a01d0eb6a495f54b10dada6687a978e3_25184.jpg/800", 88 | "https://manhua.qpic.cn/manhua_detail/0/07_13_38_56cca04ca57a85148c01fca38ff441c3_25185.jpg/800", 89 | "https://manhua.qpic.cn/manhua_detail/0/07_13_38_2551ca53f3fbbc4a884fba839306cd75_25186.jpg/800", 90 | "https://manhua.qpic.cn/manhua_detail/0/07_13_38_24ccc05af1ecda01e0664113e2297278_25187.jpg/800", 91 | "https://manhua.qpic.cn/manhua_detail/0/07_13_38_9fc0e76ea83d552a556659ad84380750_25188.jpg/800", 92 | "https://manhua.qpic.cn/manhua_detail/0/07_13_38_56ddbe27e8338d517cae1b7b80087712_25189.jpg/800", 93 | "https://manhua.qpic.cn/manhua_detail/0/07_13_38_5607fc934acfb7746c670a86dec6ab2b_25190.jpg/800", 94 | "https://manhua.qpic.cn/manhua_detail/0/07_13_38_e37ce770f89291ef794a462c29cbf9c8_25191.jpg/800", 95 | "https://manhua.qpic.cn/manhua_detail/0/07_13_39_dc79d8da61698deef8966858337d1d2b_25192.jpg/800", 96 | "https://manhua.qpic.cn/manhua_detail/0/07_13_39_a70a1bc569280554a54bf887603ab97e_25193.jpg/800", 97 | "https://manhua.qpic.cn/manhua_detail/0/07_13_39_2fd1ee4ec0b5d61d7da05aef2656059b_25194.jpg/800", 98 | "https://manhua.qpic.cn/manhua_detail/0/20_17_34_303d05c59b4328ac832e3ad33a915cff_27595.jpg/800", 99 | "https://manhua.qpic.cn/manhua_detail/0/07_13_39_da7f8971ca2544fe4fa27b2ed52342bd_25196.jpg/800", 100 | "https://manhua.qpic.cn/manhua_detail/0/07_13_39_c67077a63659b2bc40f1df784e5c4ed8_25197.jpg/800", 101 | "https://manhua.qpic.cn/manhua_detail/0/07_13_39_7532fe49eafabcf5f7e85c16c871bcbd_25198.jpg/800", 102 | "https://manhua.qpic.cn/manhua_detail/0/07_13_39_0805c18af3e618d5e12907e658144be2_25199.jpg/800", 103 | "https://manhua.qpic.cn/manhua_detail/0/07_13_39_fabd2e70eab4037ad2586a859bc8a229_25200.jpg/800", 104 | "https://manhua.qpic.cn/manhua_detail/0/07_13_39_2db13bfaae1c6c03858480e8a223ba10_25201.jpg/800", 105 | "https://manhua.qpic.cn/manhua_detail/0/07_13_39_292baca185302ac5834589005b1ea792_25202.jpg/800", 106 | "https://manhua.qpic.cn/manhua_detail/0/07_13_39_0142f35a57185c404924b5badd3b245a_25203.jpg/800", 107 | "https://manhua.qpic.cn/manhua_detail/0/07_13_39_c4a5c9499d0c94bd2bf37ef52f18a6ac_25204.jpg/800", 108 | "https://manhua.qpic.cn/manhua_detail/0/07_13_39_ce7a7010ca16feb7f1fa7dc98be135da_25205.jpg/800" 109 | ] 110 | } -------------------------------------------------------------------------------- /lib/weui.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * weui.js v1.1.0 (https://github.com/weui/weui-wxss) 3 | * Copyright 2016, wechat ui team 4 | * MIT license 5 | */ 6 | page { 7 | line-height: 1.6; 8 | font-family: -apple-system-font, "Helvetica Neue", sans-serif; 9 | } 10 | icon { 11 | vertical-align: middle; 12 | } 13 | .weui-cells { 14 | position: relative; 15 | margin-top: 1.17647059em; 16 | background-color: #FFFFFF; 17 | line-height: 1.41176471; 18 | font-size: 17px; 19 | } 20 | .weui-cells:before { 21 | content: " "; 22 | position: absolute; 23 | left: 0; 24 | top: 0; 25 | right: 0; 26 | height: 1px; 27 | border-top: 1rpx solid #D9D9D9; 28 | color: #D9D9D9; 29 | } 30 | .weui-cells:after { 31 | content: " "; 32 | position: absolute; 33 | left: 0; 34 | bottom: 0; 35 | right: 0; 36 | height: 1px; 37 | border-bottom: 1rpx solid #D9D9D9; 38 | color: #D9D9D9; 39 | } 40 | .weui-cells__title { 41 | margin-top: .77em; 42 | margin-bottom: .3em; 43 | padding-left: 15px; 44 | padding-right: 15px; 45 | color: #999999; 46 | font-size: 14px; 47 | } 48 | .weui-cells_after-title { 49 | margin-top: 0; 50 | } 51 | .weui-cells__tips { 52 | margin-top: .3em; 53 | color: #999999; 54 | padding-left: 15px; 55 | padding-right: 15px; 56 | font-size: 14px; 57 | } 58 | .weui-cell { 59 | padding: 10px 15px; 60 | position: relative; 61 | display: -webkit-box; 62 | display: -webkit-flex; 63 | display: flex; 64 | -webkit-box-align: center; 65 | -webkit-align-items: center; 66 | align-items: center; 67 | } 68 | .weui-cell:before { 69 | content: " "; 70 | position: absolute; 71 | left: 0; 72 | top: 0; 73 | right: 0; 74 | height: 1px; 75 | border-top: 1rpx solid #D9D9D9; 76 | color: #D9D9D9; 77 | left: 15px; 78 | } 79 | .weui-cell:first-child:before { 80 | display: none; 81 | } 82 | .weui-cell_active { 83 | background-color: #ECECEC; 84 | } 85 | .weui-cell_primary { 86 | -webkit-box-align: start; 87 | -webkit-align-items: flex-start; 88 | align-items: flex-start; 89 | } 90 | .weui-cell__bd { 91 | -webkit-box-flex: 1; 92 | -webkit-flex: 1; 93 | flex: 1; 94 | } 95 | .weui-cell__ft { 96 | text-align: right; 97 | color: #999999; 98 | } 99 | .weui-cell_access { 100 | color: inherit; 101 | } 102 | .weui-cell__ft_in-access { 103 | padding-right: 13px; 104 | position: relative; 105 | } 106 | .weui-cell__ft_in-access:after { 107 | content: " "; 108 | display: inline-block; 109 | height: 6px; 110 | width: 6px; 111 | border-width: 2px 2px 0 0; 112 | border-color: #C8C8CD; 113 | border-style: solid; 114 | -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0); 115 | transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0); 116 | position: relative; 117 | top: -2px; 118 | position: absolute; 119 | top: 50%; 120 | margin-top: -4px; 121 | right: 2px; 122 | } 123 | .weui-cell_link { 124 | color: #586C94; 125 | font-size: 14px; 126 | } 127 | .weui-cell_link:active { 128 | background-color: #ECECEC; 129 | } 130 | .weui-cell_link:first-child:before { 131 | display: block; 132 | } 133 | .weui-icon-radio { 134 | margin-left: 3.2px; 135 | margin-right: 3.2px; 136 | } 137 | .weui-icon-checkbox_circle, 138 | .weui-icon-checkbox_success { 139 | margin-left: 4.6px; 140 | margin-right: 4.6px; 141 | } 142 | .weui-check__label:active { 143 | background-color: #ECECEC; 144 | } 145 | .weui-check { 146 | position: absolute; 147 | left: -9999px; 148 | } 149 | .weui-check__hd_in-checkbox { 150 | padding-right: 0.35em; 151 | } 152 | .weui-cell__ft_in-radio { 153 | padding-left: 0.35em; 154 | } 155 | .weui-cell_input { 156 | padding-top: 0; 157 | padding-bottom: 0; 158 | } 159 | .weui-label { 160 | width: 105px; 161 | word-wrap: break-word; 162 | word-break: break-all; 163 | } 164 | .weui-input { 165 | height: 2.58823529em; 166 | min-height: 2.58823529em; 167 | line-height: 2.58823529em; 168 | } 169 | .weui-toptips { 170 | position: fixed; 171 | -webkit-transform: translateZ(0); 172 | transform: translateZ(0); 173 | top: 0; 174 | left: 0; 175 | right: 0; 176 | padding: 5px; 177 | font-size: 14px; 178 | text-align: center; 179 | color: #FFFFFF; 180 | z-index: 5000; 181 | word-wrap: break-word; 182 | word-break: break-all; 183 | } 184 | .weui-toptips_warn { 185 | background-color: #E64340; 186 | } 187 | .weui-textarea { 188 | display: block; 189 | width: 100%; 190 | } 191 | .weui-textarea-counter { 192 | color: #B2B2B2; 193 | text-align: right; 194 | } 195 | .weui-textarea-counter_warn { 196 | color: #E64340; 197 | } 198 | .weui-cell_warn { 199 | color: #E64340; 200 | } 201 | .weui-form-preview { 202 | position: relative; 203 | background-color: #FFFFFF; 204 | } 205 | .weui-form-preview:before { 206 | content: " "; 207 | position: absolute; 208 | left: 0; 209 | top: 0; 210 | right: 0; 211 | height: 1px; 212 | border-top: 1rpx solid #D9D9D9; 213 | color: #D9D9D9; 214 | } 215 | .weui-form-preview:after { 216 | content: " "; 217 | position: absolute; 218 | left: 0; 219 | bottom: 0; 220 | right: 0; 221 | height: 1px; 222 | border-bottom: 1rpx solid #D9D9D9; 223 | color: #D9D9D9; 224 | } 225 | .weui-form-preview__value { 226 | font-size: 14px; 227 | } 228 | .weui-form-preview__value_in-hd { 229 | font-size: 26px; 230 | } 231 | .weui-form-preview__hd { 232 | position: relative; 233 | padding: 10px 15px; 234 | text-align: right; 235 | line-height: 2.5em; 236 | } 237 | .weui-form-preview__hd:after { 238 | content: " "; 239 | position: absolute; 240 | left: 0; 241 | bottom: 0; 242 | right: 0; 243 | height: 1px; 244 | border-bottom: 1rpx solid #D9D9D9; 245 | color: #D9D9D9; 246 | left: 15px; 247 | } 248 | .weui-form-preview__bd { 249 | padding: 10px 15px; 250 | font-size: .9em; 251 | text-align: right; 252 | color: #999999; 253 | line-height: 2; 254 | } 255 | .weui-form-preview__ft { 256 | position: relative; 257 | line-height: 50px; 258 | display: -webkit-box; 259 | display: -webkit-flex; 260 | display: flex; 261 | } 262 | .weui-form-preview__ft:after { 263 | content: " "; 264 | position: absolute; 265 | left: 0; 266 | top: 0; 267 | right: 0; 268 | height: 1px; 269 | border-top: 1rpx solid #D5D5D6; 270 | color: #D5D5D6; 271 | } 272 | .weui-form-preview__item { 273 | overflow: hidden; 274 | } 275 | .weui-form-preview__label { 276 | float: left; 277 | margin-right: 1em; 278 | min-width: 4em; 279 | color: #999999; 280 | text-align: justify; 281 | text-align-last: justify; 282 | } 283 | .weui-form-preview__value { 284 | display: block; 285 | overflow: hidden; 286 | word-break: normal; 287 | word-wrap: break-word; 288 | } 289 | .weui-form-preview__btn { 290 | position: relative; 291 | display: block; 292 | -webkit-box-flex: 1; 293 | -webkit-flex: 1; 294 | flex: 1; 295 | color: #3CC51F; 296 | text-align: center; 297 | } 298 | .weui-form-preview__btn:after { 299 | content: " "; 300 | position: absolute; 301 | left: 0; 302 | top: 0; 303 | width: 1px; 304 | bottom: 0; 305 | border-left: 1rpx solid #D5D5D6; 306 | color: #D5D5D6; 307 | } 308 | .weui-form-preview__btn:first-child:after { 309 | display: none; 310 | } 311 | .weui-form-preview__btn_active { 312 | background-color: #EEEEEE; 313 | } 314 | .weui-form-preview__btn_default { 315 | color: #999999; 316 | } 317 | .weui-form-preview__btn_primary { 318 | color: #0BB20C; 319 | } 320 | .weui-cell_select { 321 | padding: 0; 322 | } 323 | .weui-select { 324 | position: relative; 325 | padding-left: 15px; 326 | padding-right: 30px; 327 | height: 2.58823529em; 328 | min-height: 2.58823529em; 329 | line-height: 2.58823529em; 330 | border-right: 1rpx solid #D9D9D9; 331 | } 332 | .weui-select:before { 333 | content: " "; 334 | display: inline-block; 335 | height: 6px; 336 | width: 6px; 337 | border-width: 2px 2px 0 0; 338 | border-color: #C8C8CD; 339 | border-style: solid; 340 | -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0); 341 | transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0); 342 | position: relative; 343 | top: -2px; 344 | position: absolute; 345 | top: 50%; 346 | right: 15px; 347 | margin-top: -4px; 348 | } 349 | .weui-select_in-select-after { 350 | padding-left: 0; 351 | } 352 | .weui-cell__hd_in-select-after, 353 | .weui-cell__bd_in-select-before { 354 | padding-left: 15px; 355 | } 356 | .weui-cell_vcode { 357 | padding-right: 0; 358 | } 359 | .weui-vcode-img { 360 | margin-left: 5px; 361 | height: 2.58823529em; 362 | vertical-align: middle; 363 | } 364 | .weui-vcode-btn { 365 | display: inline-block; 366 | height: 2.58823529em; 367 | margin-left: 5px; 368 | padding: 0 0.6em 0 0.7em; 369 | border-left: 1px solid #E5E5E5; 370 | line-height: 2.58823529em; 371 | vertical-align: middle; 372 | font-size: 17px; 373 | color: #3CC51F; 374 | white-space: nowrap; 375 | } 376 | .weui-vcode-btn:active { 377 | color: #52a341; 378 | } 379 | .weui-cell_switch { 380 | padding-top: 6px; 381 | padding-bottom: 6px; 382 | } 383 | .weui-uploader__hd { 384 | display: -webkit-box; 385 | display: -webkit-flex; 386 | display: flex; 387 | padding-bottom: 10px; 388 | -webkit-box-align: center; 389 | -webkit-align-items: center; 390 | align-items: center; 391 | } 392 | .weui-uploader__title { 393 | -webkit-box-flex: 1; 394 | -webkit-flex: 1; 395 | flex: 1; 396 | } 397 | .weui-uploader__info { 398 | color: #B2B2B2; 399 | } 400 | .weui-uploader__bd { 401 | margin-bottom: -4px; 402 | margin-right: -9px; 403 | overflow: hidden; 404 | } 405 | .weui-uploader__file { 406 | float: left; 407 | margin-right: 9px; 408 | margin-bottom: 9px; 409 | } 410 | .weui-uploader__img { 411 | display: block; 412 | width: 79px; 413 | height: 79px; 414 | } 415 | .weui-uploader__file_status { 416 | position: relative; 417 | } 418 | .weui-uploader__file_status:before { 419 | content: " "; 420 | position: absolute; 421 | top: 0; 422 | right: 0; 423 | bottom: 0; 424 | left: 0; 425 | background-color: rgba(0, 0, 0, 0.5); 426 | } 427 | .weui-uploader__file-content { 428 | position: absolute; 429 | top: 50%; 430 | left: 50%; 431 | -webkit-transform: translate(-50%, -50%); 432 | transform: translate(-50%, -50%); 433 | color: #FFFFFF; 434 | } 435 | .weui-uploader__input-box { 436 | float: left; 437 | position: relative; 438 | margin-right: 9px; 439 | margin-bottom: 9px; 440 | width: 77px; 441 | height: 77px; 442 | border: 1px solid #D9D9D9; 443 | } 444 | .weui-uploader__input-box:before, 445 | .weui-uploader__input-box:after { 446 | content: " "; 447 | position: absolute; 448 | top: 50%; 449 | left: 50%; 450 | -webkit-transform: translate(-50%, -50%); 451 | transform: translate(-50%, -50%); 452 | background-color: #D9D9D9; 453 | } 454 | .weui-uploader__input-box:before { 455 | width: 2px; 456 | height: 39.5px; 457 | } 458 | .weui-uploader__input-box:after { 459 | width: 39.5px; 460 | height: 2px; 461 | } 462 | .weui-uploader__input-box:active { 463 | border-color: #999999; 464 | } 465 | .weui-uploader__input-box:active:before, 466 | .weui-uploader__input-box:active:after { 467 | background-color: #999999; 468 | } 469 | .weui-uploader__input { 470 | position: absolute; 471 | z-index: 1; 472 | top: 0; 473 | left: 0; 474 | width: 100%; 475 | height: 100%; 476 | opacity: 0; 477 | } 478 | .weui-article { 479 | padding: 20px 15px; 480 | font-size: 15px; 481 | } 482 | .weui-article__section { 483 | margin-bottom: 1.5em; 484 | } 485 | .weui-article__h1 { 486 | font-size: 18px; 487 | font-weight: 400; 488 | margin-bottom: .9em; 489 | } 490 | .weui-article__h2 { 491 | font-size: 16px; 492 | font-weight: 400; 493 | margin-bottom: .34em; 494 | } 495 | .weui-article__h3 { 496 | font-weight: 400; 497 | font-size: 15px; 498 | margin-bottom: .34em; 499 | } 500 | .weui-article__p { 501 | margin: 0 0 .8em; 502 | } 503 | .weui-msg { 504 | padding-top: 36px; 505 | text-align: center; 506 | } 507 | .weui-msg__link { 508 | display: inline; 509 | color: #586C94; 510 | } 511 | .weui-msg__icon-area { 512 | margin-bottom: 30px; 513 | } 514 | .weui-msg__text-area { 515 | margin-bottom: 25px; 516 | padding: 0 20px; 517 | } 518 | .weui-msg__title { 519 | margin-bottom: 5px; 520 | font-weight: 400; 521 | font-size: 20px; 522 | } 523 | .weui-msg__desc { 524 | font-size: 14px; 525 | color: #999999; 526 | } 527 | .weui-msg__opr-area { 528 | margin-bottom: 25px; 529 | } 530 | .weui-msg__extra-area { 531 | margin-bottom: 15px; 532 | font-size: 14px; 533 | color: #999999; 534 | } 535 | @media screen and (min-height: 438px) { 536 | .weui-msg__extra-area { 537 | position: fixed; 538 | left: 0; 539 | bottom: 0; 540 | width: 100%; 541 | text-align: center; 542 | } 543 | } 544 | .weui-flex { 545 | display: -webkit-box; 546 | display: -webkit-flex; 547 | display: flex; 548 | } 549 | .weui-flex__item { 550 | -webkit-box-flex: 1; 551 | -webkit-flex: 1; 552 | flex: 1; 553 | } 554 | .weui-btn { 555 | margin-top: 15px; 556 | } 557 | .weui-btn:first-child { 558 | margin-top: 0; 559 | } 560 | .weui-btn-area { 561 | margin: 1.17647059em 15px 0.3em; 562 | } 563 | .weui-agree { 564 | display: block; 565 | padding: .5em 15px; 566 | font-size: 13px; 567 | } 568 | .weui-agree__text { 569 | color: #999999; 570 | } 571 | .weui-agree__link { 572 | display: inline; 573 | color: #586C94; 574 | } 575 | .weui-agree__checkbox { 576 | position: absolute; 577 | left: -9999px; 578 | } 579 | .weui-agree__checkbox-icon { 580 | position: relative; 581 | top: 2px; 582 | display: inline-block; 583 | border: 1px solid #D1D1D1; 584 | background-color: #FFFFFF; 585 | border-radius: 3px; 586 | width: 11px; 587 | height: 11px; 588 | } 589 | .weui-agree__checkbox-icon-check { 590 | position: absolute; 591 | top: 1px; 592 | left: 1px; 593 | } 594 | .weui-footer { 595 | color: #999999; 596 | font-size: 14px; 597 | text-align: center; 598 | } 599 | .weui-footer_fixed-bottom { 600 | position: fixed; 601 | bottom: .52em; 602 | left: 0; 603 | right: 0; 604 | } 605 | .weui-footer__links { 606 | font-size: 0; 607 | } 608 | .weui-footer__link { 609 | display: inline-block; 610 | vertical-align: top; 611 | margin: 0 .62em; 612 | position: relative; 613 | font-size: 14px; 614 | color: #586C94; 615 | } 616 | .weui-footer__link:before { 617 | content: " "; 618 | position: absolute; 619 | left: 0; 620 | top: 0; 621 | width: 1px; 622 | bottom: 0; 623 | border-left: 1rpx solid #C7C7C7; 624 | color: #C7C7C7; 625 | left: -0.65em; 626 | top: .36em; 627 | bottom: .36em; 628 | } 629 | .weui-footer__link:first-child:before { 630 | display: none; 631 | } 632 | .weui-footer__text { 633 | padding: 0 .34em; 634 | font-size: 12px; 635 | } 636 | .weui-grids { 637 | border-top: 1rpx solid #D9D9D9; 638 | border-left: 1rpx solid #D9D9D9; 639 | overflow: hidden; 640 | } 641 | .weui-grid { 642 | position: relative; 643 | float: left; 644 | padding: 20px 10px; 645 | width: 33.33333333%; 646 | box-sizing: border-box; 647 | border-right: 1rpx solid #D9D9D9; 648 | border-bottom: 1rpx solid #D9D9D9; 649 | } 650 | .weui-grid_active { 651 | background-color: #ECECEC; 652 | } 653 | .weui-grid__icon { 654 | display: block; 655 | width: 28px; 656 | height: 28px; 657 | margin: 0 auto; 658 | } 659 | .weui-grid__label { 660 | margin-top: 5px; 661 | display: block; 662 | text-align: center; 663 | color: #000000; 664 | font-size: 14px; 665 | white-space: nowrap; 666 | text-overflow: ellipsis; 667 | overflow: hidden; 668 | } 669 | .weui-loading { 670 | margin: 0 5px; 671 | width: 20px; 672 | height: 20px; 673 | display: inline-block; 674 | vertical-align: middle; 675 | -webkit-animation: weuiLoading 1s steps(12, end) infinite; 676 | animation: weuiLoading 1s steps(12, end) infinite; 677 | background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat; 678 | background-size: 100%; 679 | } 680 | @-webkit-keyframes weuiLoading { 681 | 0% { 682 | -webkit-transform: rotate3d(0, 0, 1, 0deg); 683 | transform: rotate3d(0, 0, 1, 0deg); 684 | } 685 | 100% { 686 | -webkit-transform: rotate3d(0, 0, 1, 360deg); 687 | transform: rotate3d(0, 0, 1, 360deg); 688 | } 689 | } 690 | @keyframes weuiLoading { 691 | 0% { 692 | -webkit-transform: rotate3d(0, 0, 1, 0deg); 693 | transform: rotate3d(0, 0, 1, 0deg); 694 | } 695 | 100% { 696 | -webkit-transform: rotate3d(0, 0, 1, 360deg); 697 | transform: rotate3d(0, 0, 1, 360deg); 698 | } 699 | } 700 | .weui-badge { 701 | display: inline-block; 702 | padding: .15em .4em; 703 | min-width: 8px; 704 | border-radius: 18px; 705 | background-color: #F43530; 706 | color: #FFFFFF; 707 | line-height: 1.2; 708 | text-align: center; 709 | font-size: 12px; 710 | vertical-align: middle; 711 | } 712 | .weui-badge_dot { 713 | padding: .4em; 714 | min-width: 0; 715 | } 716 | .weui-loadmore { 717 | width: 65%; 718 | margin: 1.5em auto; 719 | line-height: 1.6em; 720 | font-size: 14px; 721 | text-align: center; 722 | } 723 | .weui-loadmore__tips { 724 | display: inline-block; 725 | vertical-align: middle; 726 | } 727 | .weui-loadmore_line { 728 | border-top: 1px solid #E5E5E5; 729 | margin-top: 2.4em; 730 | } 731 | .weui-loadmore__tips_in-line { 732 | position: relative; 733 | top: -0.9em; 734 | padding: 0 .55em; 735 | background-color: #FFFFFF; 736 | color: #999999; 737 | } 738 | .weui-loadmore__tips_in-dot { 739 | position: relative; 740 | padding: 0 .16em; 741 | width: 4px; 742 | height: 1.6em; 743 | } 744 | .weui-loadmore__tips_in-dot:before { 745 | content: " "; 746 | position: absolute; 747 | top: 50%; 748 | left: 50%; 749 | margin-top: -1px; 750 | margin-left: -2px; 751 | width: 4px; 752 | height: 4px; 753 | border-radius: 50%; 754 | background-color: #E5E5E5; 755 | } 756 | .weui-panel { 757 | background-color: #FFFFFF; 758 | margin-top: 10px; 759 | position: relative; 760 | overflow: hidden; 761 | } 762 | .weui-panel:first-child { 763 | margin-top: 0; 764 | } 765 | .weui-panel:before { 766 | content: " "; 767 | position: absolute; 768 | left: 0; 769 | top: 0; 770 | right: 0; 771 | height: 1px; 772 | border-top: 1rpx solid #E5E5E5; 773 | color: #E5E5E5; 774 | } 775 | .weui-panel:after { 776 | content: " "; 777 | position: absolute; 778 | left: 0; 779 | bottom: 0; 780 | right: 0; 781 | height: 1px; 782 | border-bottom: 1rpx solid #E5E5E5; 783 | color: #E5E5E5; 784 | } 785 | .weui-panel__hd { 786 | padding: 14px 15px 10px; 787 | color: #999999; 788 | font-size: 13px; 789 | position: relative; 790 | } 791 | .weui-panel__hd:after { 792 | content: " "; 793 | position: absolute; 794 | left: 0; 795 | bottom: 0; 796 | right: 0; 797 | height: 1px; 798 | border-bottom: 1rpx solid #E5E5E5; 799 | color: #E5E5E5; 800 | left: 15px; 801 | } 802 | .weui-media-box { 803 | padding: 15px; 804 | position: relative; 805 | } 806 | .weui-media-box:before { 807 | content: " "; 808 | position: absolute; 809 | left: 0; 810 | top: 0; 811 | right: 0; 812 | height: 1px; 813 | border-top: 1rpx solid #E5E5E5; 814 | color: #E5E5E5; 815 | left: 15px; 816 | } 817 | .weui-media-box:first-child:before { 818 | display: none; 819 | } 820 | .weui-media-box__title { 821 | font-weight: 400; 822 | font-size: 17px; 823 | width: auto; 824 | overflow: hidden; 825 | text-overflow: ellipsis; 826 | white-space: nowrap; 827 | word-wrap: normal; 828 | word-wrap: break-word; 829 | word-break: break-all; 830 | } 831 | .weui-media-box__desc { 832 | color: #999999; 833 | font-size: 13px; 834 | line-height: 1.2; 835 | overflow: hidden; 836 | text-overflow: ellipsis; 837 | display: -webkit-box; 838 | -webkit-box-orient: vertical; 839 | -webkit-line-clamp: 2; 840 | } 841 | .weui-media-box__info { 842 | margin-top: 15px; 843 | padding-bottom: 5px; 844 | font-size: 13px; 845 | color: #CECECE; 846 | line-height: 1em; 847 | list-style: none; 848 | overflow: hidden; 849 | } 850 | .weui-media-box__info__meta { 851 | float: left; 852 | padding-right: 1em; 853 | } 854 | .weui-media-box__info__meta_extra { 855 | padding-left: 1em; 856 | border-left: 1px solid #CECECE; 857 | } 858 | .weui-media-box__title_in-text { 859 | margin-bottom: 8px; 860 | } 861 | .weui-media-box_appmsg { 862 | display: -webkit-box; 863 | display: -webkit-flex; 864 | display: flex; 865 | -webkit-box-align: center; 866 | -webkit-align-items: center; 867 | align-items: center; 868 | } 869 | .weui-media-box__thumb { 870 | width: 100%; 871 | height: 100%; 872 | vertical-align: top; 873 | } 874 | .weui-media-box__hd_in-appmsg { 875 | margin-right: .8em; 876 | width: 60px; 877 | height: 60px; 878 | line-height: 60px; 879 | text-align: center; 880 | } 881 | .weui-media-box__bd_in-appmsg { 882 | -webkit-box-flex: 1; 883 | -webkit-flex: 1; 884 | flex: 1; 885 | min-width: 0; 886 | } 887 | .weui-media-box_small-appmsg { 888 | padding: 0; 889 | } 890 | .weui-cells_in-small-appmsg { 891 | margin-top: 0; 892 | } 893 | .weui-cells_in-small-appmsg:before { 894 | display: none; 895 | } 896 | .weui-progress { 897 | display: -webkit-box; 898 | display: -webkit-flex; 899 | display: flex; 900 | -webkit-box-align: center; 901 | -webkit-align-items: center; 902 | align-items: center; 903 | } 904 | .weui-progress__bar { 905 | -webkit-box-flex: 1; 906 | -webkit-flex: 1; 907 | flex: 1; 908 | } 909 | .weui-progress__opr { 910 | margin-left: 15px; 911 | font-size: 0; 912 | } 913 | .weui-navbar { 914 | display: -webkit-box; 915 | display: -webkit-flex; 916 | display: flex; 917 | position: absolute; 918 | z-index: 500; 919 | top: 0; 920 | width: 100%; 921 | border-bottom: 1rpx solid #CCCCCC; 922 | } 923 | .weui-navbar__item { 924 | position: relative; 925 | display: block; 926 | -webkit-box-flex: 1; 927 | -webkit-flex: 1; 928 | flex: 1; 929 | padding: 13px 0; 930 | text-align: center; 931 | font-size: 0; 932 | } 933 | .weui-navbar__item.weui-bar__item_on { 934 | color: #1AAD19; 935 | } 936 | .weui-navbar__slider { 937 | position: absolute; 938 | content: " "; 939 | left: 0; 940 | bottom: 0; 941 | width: 6em; 942 | height: 3px; 943 | background-color: #1AAD19; 944 | -webkit-transition: -webkit-transform .3s; 945 | transition: -webkit-transform .3s; 946 | transition: transform .3s; 947 | transition: transform .3s, -webkit-transform .3s; 948 | } 949 | .weui-navbar__title { 950 | display: inline-block; 951 | font-size: 15px; 952 | max-width: 8em; 953 | width: auto; 954 | overflow: hidden; 955 | text-overflow: ellipsis; 956 | white-space: nowrap; 957 | word-wrap: normal; 958 | } 959 | .weui-tab { 960 | position: relative; 961 | height: 100%; 962 | } 963 | .weui-tab__panel { 964 | box-sizing: border-box; 965 | height: 100%; 966 | padding-top: 50px; 967 | overflow: auto; 968 | -webkit-overflow-scrolling: touch; 969 | } 970 | .weui-search-bar { 971 | position: relative; 972 | padding: 8px 10px; 973 | display: -webkit-box; 974 | display: -webkit-flex; 975 | display: flex; 976 | box-sizing: border-box; 977 | background-color: #EFEFF4; 978 | border-top: 1rpx solid #D7D6DC; 979 | border-bottom: 1rpx solid #D7D6DC; 980 | } 981 | .weui-icon-search { 982 | margin-right: 8px; 983 | font-size: inherit; 984 | } 985 | .weui-icon-search_in-box { 986 | position: absolute; 987 | left: 10px; 988 | top: 7px; 989 | } 990 | .weui-search-bar__text { 991 | display: inline-block; 992 | font-size: 14px; 993 | vertical-align: middle; 994 | } 995 | .weui-search-bar__form { 996 | position: relative; 997 | -webkit-box-flex: 1; 998 | -webkit-flex: auto; 999 | flex: auto; 1000 | border-radius: 5px; 1001 | background: #FFFFFF; 1002 | border: 1rpx solid #E6E6EA; 1003 | } 1004 | .weui-search-bar__box { 1005 | position: relative; 1006 | padding-left: 30px; 1007 | padding-right: 30px; 1008 | width: 100%; 1009 | box-sizing: border-box; 1010 | z-index: 1; 1011 | } 1012 | .weui-search-bar__input { 1013 | height: 28px; 1014 | line-height: 28px; 1015 | font-size: 14px; 1016 | } 1017 | .weui-icon-clear { 1018 | position: absolute; 1019 | top: 0; 1020 | right: 0; 1021 | padding: 7px 8px; 1022 | font-size: 0; 1023 | } 1024 | .weui-search-bar__label { 1025 | position: absolute; 1026 | top: 0; 1027 | right: 0; 1028 | bottom: 0; 1029 | left: 0; 1030 | z-index: 2; 1031 | border-radius: 3px; 1032 | text-align: center; 1033 | color: #9B9B9B; 1034 | background: #FFFFFF; 1035 | line-height: 28px; 1036 | } 1037 | .weui-search-bar__cancel-btn { 1038 | margin-left: 10px; 1039 | line-height: 28px; 1040 | color: #09BB07; 1041 | white-space: nowrap; 1042 | } 1043 | --------------------------------------------------------------------------------