├── pages ├── live │ ├── live.json │ ├── live.wxss │ ├── live.js │ └── live.wxml ├── login │ ├── login.json │ ├── login.wxss │ ├── login.js │ └── login.wxml └── logs │ ├── logs.json │ ├── logs.wxss │ ├── logs.wxml │ └── logs.js ├── README.md ├── app.wxss ├── app.json ├── utils └── util.js ├── socket └── websocket.js ├── app.js └── style └── weui.wxss /pages/live/live.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /pages/login/login.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # littlecode 2 | 微信小程序demo，用户登陆、注册、直播页面和功能 3 | -------------------------------------------------------------------------------- /pages/logs/logs.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "查看启动日志" 3 | } -------------------------------------------------------------------------------- /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/logs/logs.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{index + 1}}. {{log}} 5 | 6 | 7 | -------------------------------------------------------------------------------- /app.wxss: -------------------------------------------------------------------------------- 1 | /**app.wxss**/ 2 | @import 'style/weui.wxss'; 3 | .container { 4 | height: 100%; 5 | display: flex; 6 | flex-direction: column; 7 | align-items: center; 8 | justify-content: space-between; 9 | padding: 200rpx 0; 10 | box-sizing: border-box; 11 | } 12 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": [ 3 | "pages/login/login", 4 | "pages/live/live", 5 | "pages/logs/logs" 6 | ], 7 | "window": { 8 | "backgroundTextStyle": "light", 9 | "navigationBarBackgroundColor": "#fff", 10 | "navigationBarTitleText": "猿代码", 11 | "navigationBarTextStyle": "black" 12 | } 13 | } -------------------------------------------------------------------------------- /pages/logs/logs.js: -------------------------------------------------------------------------------- 1 | //logs.js 2 | var util = require('../../utils/util.js') 3 | Page({ 4 | data: { 5 | logs: [] 6 | }, 7 | onLoad: function () { 8 | this.setData({ 9 | logs: (wx.getStorageSync('logs') || []).map(function (log) { 10 | return util.formatTime(new Date(log)) 11 | }) 12 | }) 13 | } 14 | }) 15 | -------------------------------------------------------------------------------- /pages/login/login.wxss: -------------------------------------------------------------------------------- 1 | /**index.wxss**/ 2 | .userinfo { 3 | display: flex; 4 | flex-direction: column; 5 | align-items: center; 6 | } 7 | .userinfo-avatar { 8 | width: 128rpx; 9 | height: 128rpx; 10 | margin: 20rpx; 11 | border-radius: 50%; 12 | } 13 | 14 | .userinfo-nickname { 15 | color: red; 16 | } 17 | 18 | .usermotto { 19 | margin-top: 200px; 20 | } -------------------------------------------------------------------------------- /utils/util.js: -------------------------------------------------------------------------------- 1 | function formatTime(date) { 2 | var year = date.getFullYear() 3 | var month = date.getMonth() + 1 4 | var day = date.getDate() 5 | 6 | var hour = date.getHours() 7 | var minute = date.getMinutes() 8 | var second = date.getSeconds() 9 | 10 | 11 | return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':') 12 | } 13 | 14 | function formatNumber(n) { 15 | n = n.toString() 16 | return n[1] ? n : '0' + n 17 | } 18 | 19 | module.exports = { 20 | formatTime: formatTime 21 | } 22 | -------------------------------------------------------------------------------- /pages/live/live.wxss: -------------------------------------------------------------------------------- 1 | .historycon{ 2 | height:90%;width:90%;margin:10px auto;flex-direction:column;display:flex;border : 1px solid #aaa ;background:#fff; 3 | } 4 | .history{ 5 | height: 200px;width:100%;margin-top:15px;font-size:14px;line-height:40px;word-break:break-all;padding:6px; 6 | } 7 | .send{ 8 | width : 20% ;height:40px;margin-top:-0px;font-size:16px;line-height: 40px;text-align: center 9 | } 10 | #message{width:100%;background:#fff;height:40px;padding-left:10px;} 11 | .sendmessage{display: flex;flex-direction:row;border:1px solid #aaa;background:#fff;height:40px;margin-bottom:10px;} -------------------------------------------------------------------------------- /socket/websocket.js: -------------------------------------------------------------------------------- 1 | 2 | var url = 'wss://wx.wxcms.cn'; 3 | function connect(nickName, avatarUrl) { 4 | wx.connectSocket({ 5 | url: url, 6 | header: { 7 | 'content-type': 'application/json' 8 | }, data: { 9 | type: 'message', 10 | nickName: nickName, 11 | avatarUrl: avatarUrl, 12 | }, 13 | success: function () { 14 | console.log('链接成功') 15 | }, 16 | fail: function () { 17 | console.log('链接失败') 18 | }, 19 | method: "GET" 20 | }); 21 | 22 | } 23 | 24 | function send (msg) { 25 | msg = JSON.stringify(msg); 26 | wx.sendSocketMessage({data:msg}); 27 | } 28 | 29 | 30 | module.exports = { 31 | connect: connect, 32 | send: send 33 | } -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | //app.js 2 | App({ 3 | onLaunch: function () { 4 | //调用API从本地缓存中获取数据 5 | var logs = wx.getStorageSync('logs') || [] 6 | logs.unshift(Date.now()) 7 | wx.setStorageSync('logs', logs) 8 | }, 9 | getUserInfo:function(cb){ 10 | var that = this 11 | if(this.globalData.userInfo){ 12 | typeof cb == "function" && cb(this.globalData.userInfo) 13 | }else{ 14 | //调用登录接口 15 | wx.login({ 16 | success: function () { 17 | wx.getUserInfo({ 18 | success: function (res) { 19 | that.globalData.userInfo = res.userInfo 20 | typeof cb == "function" && cb(that.globalData.userInfo) 21 | } 22 | }) 23 | } 24 | }) 25 | } 26 | }, 27 | globalData:{ 28 | userInfo:null 29 | } 30 | }) -------------------------------------------------------------------------------- /pages/login/login.js: -------------------------------------------------------------------------------- 1 | //获取应用实例 2 | 3 | var app = getApp() 4 | 5 | Page({ 6 | 7 | data: { 8 | user_name:'', 9 | user_password:'' 10 | }, 11 | 12 | // 跳转到注册页面 13 | toRegist: function () { 14 | wx.navigateTo({ 15 | url: '../regist/regist' 16 | }) 17 | }, 18 | 19 | //输入用户名 20 | userNameChange: function (e) { 21 | this.data.user_name = e.detail.value; 22 | }, 23 | //输入密码 24 | userPasswordChange: function (e) { 25 | this.data.user_password = e.detail.value; 26 | }, 27 | 28 | //跳转到直播 29 | showLive: function () { 30 | 31 | //登录验证 32 | // wx.request({ 33 | // url: 'https://sprogram.cjwme.com/login', //链接不是https 34 | // data: { 35 | // user_name: this.data.user_name, 36 | // user_password: this.data.user_password 37 | // }, 38 | // header: { 39 | // 'content-type': 'application/json' 40 | // }, 41 | // success: function (res) { 42 | // console.log(res.data) 43 | // } 44 | // }) 45 | 46 | //挑转到直播间 47 | wx.navigateTo({ 48 | url: "../live/live" 49 | }) 50 | } 51 | 52 | 53 | }) -------------------------------------------------------------------------------- /pages/login/login.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 错误提示 4 | 登录 5 | 6 | 7 | 8 | 用户名 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 密码 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 若无，请到猿代码平台注册，网址是http://www.ydma.cn 28 | 29 | -------------------------------------------------------------------------------- /pages/live/live.js: -------------------------------------------------------------------------------- 1 | //index.js 2 | //获取应用实例 3 | var app = getApp() 4 | var websocket = require('../../socket/websocket.js'); 5 | var currentnumber = '';//当前在线人数 6 | 7 | var text = '';//聊天室内容 8 | var user = {}; 9 | 10 | var sliderWidth = 96; // 需要设置slider的宽度，用于计算中间位置 11 | var page2; 12 | Page({ 13 | data: { 14 | src: '', 15 | tabs: ["学生交流区", "提问区", "老师简介"], 16 | activeIndex: "0", 17 | sliderOffset: 0, 18 | sliderLeft: 0, 19 | headerimg: 'http://www.itxdh.com/statics/images/img/the1.jpg', 20 | headermodel: 'center', 21 | text: '', 22 | content: '' 23 | }, 24 | // onReady 方法 25 | onReady: function (res) { 26 | page2 = this; 27 | this.videoContext = wx.createVideoContext('myVideo') 28 | }, 29 | // onLoad 方法 30 | onLoad: function () { 31 | var that = this; 32 | 33 | //调用应用实例的方法获取全局数据 34 | app.getUserInfo(function (userInfo) { 35 | user = userInfo; 36 | websocket.connect(user.nickName, user.avatarUrl); 37 | //监听WebSocket连接打开事件。 38 | wx.onSocketOpen(function (res) { 39 | var msg = { 40 | type: 'login', 41 | nickName: user.nickName, 42 | avatarUrl: user.avatarUrl, 43 | pattern: 'login', 44 | } 45 | websocket.send(msg); 46 | }) 47 | 48 | //监听服务返回 49 | wx.onSocketMessage(function (res) { 50 | var result = JSON.parse(res.data); 51 | //登录 52 | if (result.type == "login") { 53 | currentnumber = "欢迎" + result.data.nickName + "加入，当前人数有" + result.data.number; 54 | that.setData({ 55 | currentnumber: currentnumber 56 | }); 57 | } 58 | //发送消息 59 | if (result.type == "massage") { 60 | //老师或者学员 61 | text = result.data.nickName + ":" + result.data.data + "\n" + text; 62 | that.setData({ 63 | text: text 64 | }); 65 | } 66 | }) 67 | 68 | //监听socket关闭 69 | wx.onSocketClose(function () { 70 | websocket.connect(user.nickName, user.avatarUrl); 71 | }) 72 | }) 73 | }, 74 | tabClick: function (e) { 75 | this.setData({ 76 | sliderOffset: e.currentTarget.offsetLeft, 77 | activeIndex: e.currentTarget.id 78 | }); 79 | if (e.currentTarget.id == 1) { 80 | wx.showModal({ 81 | content: ' 您好 该功能待开通，敬请期待', 82 | showCancel: false, 83 | success: function (res) { 84 | if (res.confirm) { 85 | console.log('确定') 86 | } 87 | } 88 | }); 89 | } 90 | }, 91 | inputValue: '', 92 | //事件处理函数 93 | bindViewTap: function () { 94 | wx.navigateTo({ 95 | url: '../login/login' 96 | }) 97 | }, 98 | // 聊天文本框 99 | bindChange: function (e) { 100 | this.inputValue = e.detail.value; 101 | }, 102 | //事件处理函数 103 | add: function (e) { 104 | //发送数据 105 | if (this.inputValue != '') { 106 | websocket.send({ 107 | type: 'massage', 108 | data: this.inputValue, 109 | pattern: 'common', 110 | }); 111 | this.inputValue=''; 112 | } 113 | this.setData({ 114 | content: '' 115 | }) 116 | } 117 | 118 | }) 119 | 120 | 121 | 122 | -------------------------------------------------------------------------------- /pages/live/live.wxml: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | 7 | 8 | 9 | 10 | {{item}} 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 38 | 39 | 40 | 41 | 42 | 44 | 45 | 46 | 47 | 48 | 84 | 85 | -------------------------------------------------------------------------------- /style/weui.wxss: -------------------------------------------------------------------------------- 1 | page { 2 | line-height: 1.6; 3 | font-family: -apple-system-font, "Helvetica Neue", sans-serif; 4 | } 5 | icon { 6 | vertical-align: middle; 7 | } 8 | .weui-cells { 9 | position: relative; 10 | margin-top: 1.17647059em; 11 | background-color: #FFFFFF; 12 | line-height: 1.41176471; 13 | font-size: 17px; 14 | } 15 | .weui-cells:before { 16 | content: " "; 17 | position: absolute; 18 | left: 0; 19 | top: 0; 20 | right: 0; 21 | height: 1px; 22 | border-top: 1rpx solid #D9D9D9; 23 | color: #D9D9D9; 24 | } 25 | .weui-cells:after { 26 | content: " "; 27 | position: absolute; 28 | left: 0; 29 | bottom: 0; 30 | right: 0; 31 | height: 1px; 32 | border-bottom: 1rpx solid #D9D9D9; 33 | color: #D9D9D9; 34 | } 35 | .weui-cells__title { 36 | margin-top: .77em; 37 | margin-bottom: .3em; 38 | padding-left: 15px; 39 | padding-right: 15px; 40 | color: #999999; 41 | font-size: 14px; 42 | } 43 | .weui-cells_after-title { 44 | margin-top: 0; 45 | } 46 | .weui-cells__tips { 47 | margin-top: .3em; 48 | color: #999999; 49 | padding-left: 15px; 50 | padding-right: 15px; 51 | font-size: 14px; 52 | } 53 | .weui-cell { 54 | padding: 10px 15px; 55 | position: relative; 56 | display: -webkit-box; 57 | display: -webkit-flex; 58 | display: flex; 59 | -webkit-box-align: center; 60 | -webkit-align-items: center; 61 | align-items: center; 62 | } 63 | .weui-cell:before { 64 | content: " "; 65 | position: absolute; 66 | left: 0; 67 | top: 0; 68 | right: 0; 69 | height: 1px; 70 | border-top: 1rpx solid #D9D9D9; 71 | color: #D9D9D9; 72 | left: 15px; 73 | } 74 | .weui-cell:first-child:before { 75 | display: none; 76 | } 77 | .weui-cell_active { 78 | background-color: #ECECEC; 79 | } 80 | .weui-cell_primary { 81 | -webkit-box-align: start; 82 | -webkit-align-items: flex-start; 83 | align-items: flex-start; 84 | } 85 | .weui-cell__bd { 86 | -webkit-box-flex: 1; 87 | -webkit-flex: 1; 88 | flex: 1; 89 | } 90 | .weui-cell__ft { 91 | text-align: right; 92 | color: #999999; 93 | } 94 | .weui-cell_access { 95 | color: inherit; 96 | } 97 | .weui-cell__ft_in-access { 98 | padding-right: 13px; 99 | position: relative; 100 | } 101 | .weui-cell__ft_in-access:after { 102 | content: " "; 103 | display: inline-block; 104 | height: 6px; 105 | width: 6px; 106 | border-width: 2px 2px 0 0; 107 | border-color: #C8C8CD; 108 | border-style: solid; 109 | -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0); 110 | transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0); 111 | position: relative; 112 | top: -2px; 113 | position: absolute; 114 | top: 50%; 115 | margin-top: -4px; 116 | right: 2px; 117 | } 118 | .weui-cell_link { 119 | color: #586C94; 120 | font-size: 14px; 121 | } 122 | .weui-cell_link:active { 123 | background-color: #ECECEC; 124 | } 125 | .weui-cell_link:first-child:before { 126 | display: block; 127 | } 128 | .weui-icon-radio { 129 | margin-left: 3.2px; 130 | margin-right: 3.2px; 131 | } 132 | .weui-icon-checkbox_circle, 133 | .weui-icon-checkbox_success { 134 | margin-left: 4.6px; 135 | margin-right: 4.6px; 136 | } 137 | .weui-check__label:active { 138 | background-color: #ECECEC; 139 | } 140 | .weui-check { 141 | position: absolute; 142 | left: -9999px; 143 | } 144 | .weui-check__hd_in-checkbox { 145 | padding-right: 0.35em; 146 | } 147 | .weui-cell__ft_in-radio { 148 | padding-left: 0.35em; 149 | } 150 | .weui-cell_input { 151 | padding-top: 0; 152 | padding-bottom: 0; 153 | } 154 | .weui-label { 155 | width: 105px; 156 | word-wrap: break-word; 157 | word-break: break-all; 158 | } 159 | .weui-input { 160 | height: 2.58823529em; 161 | min-height: 2.58823529em; 162 | line-height: 2.58823529em; 163 | } 164 | .weui-toptips { 165 | position: fixed; 166 | -webkit-transform: translateZ(0); 167 | transform: translateZ(0); 168 | top: 0; 169 | left: 0; 170 | right: 0; 171 | padding: 5px; 172 | font-size: 14px; 173 | text-align: center; 174 | color: #FFFFFF; 175 | z-index: 5000; 176 | word-wrap: break-word; 177 | word-break: break-all; 178 | } 179 | .weui-toptips_warn { 180 | background-color: #E64340; 181 | } 182 | .weui-textarea { 183 | display: block; 184 | width: 100%; 185 | } 186 | .weui-textarea-counter { 187 | color: #B2B2B2; 188 | text-align: right; 189 | } 190 | .weui-textarea-counter_warn { 191 | color: #E64340; 192 | } 193 | .weui-cell_warn { 194 | color: #E64340; 195 | } 196 | .weui-form-preview { 197 | position: relative; 198 | background-color: #FFFFFF; 199 | } 200 | .weui-form-preview:before { 201 | content: " "; 202 | position: absolute; 203 | left: 0; 204 | top: 0; 205 | right: 0; 206 | height: 1px; 207 | border-top: 1rpx solid #D9D9D9; 208 | color: #D9D9D9; 209 | } 210 | .weui-form-preview:after { 211 | content: " "; 212 | position: absolute; 213 | left: 0; 214 | bottom: 0; 215 | right: 0; 216 | height: 1px; 217 | border-bottom: 1rpx solid #D9D9D9; 218 | color: #D9D9D9; 219 | } 220 | .weui-form-preview__value { 221 | font-size: 14px; 222 | } 223 | .weui-form-preview__value_in-hd { 224 | font-size: 26px; 225 | } 226 | .weui-form-preview__hd { 227 | position: relative; 228 | padding: 10px 15px; 229 | text-align: right; 230 | line-height: 2.5em; 231 | } 232 | .weui-form-preview__hd:after { 233 | content: " "; 234 | position: absolute; 235 | left: 0; 236 | bottom: 0; 237 | right: 0; 238 | height: 1px; 239 | border-bottom: 1rpx solid #D9D9D9; 240 | color: #D9D9D9; 241 | left: 15px; 242 | } 243 | .weui-form-preview__bd { 244 | padding: 10px 15px; 245 | font-size: .9em; 246 | text-align: right; 247 | color: #999999; 248 | line-height: 2; 249 | } 250 | .weui-form-preview__ft { 251 | position: relative; 252 | line-height: 50px; 253 | display: -webkit-box; 254 | display: -webkit-flex; 255 | display: flex; 256 | } 257 | .weui-form-preview__ft:after { 258 | content: " "; 259 | position: absolute; 260 | left: 0; 261 | top: 0; 262 | right: 0; 263 | height: 1px; 264 | border-top: 1rpx solid #D5D5D6; 265 | color: #D5D5D6; 266 | } 267 | .weui-form-preview__item { 268 | overflow: hidden; 269 | } 270 | .weui-form-preview__label { 271 | float: left; 272 | margin-right: 1em; 273 | min-width: 4em; 274 | color: #999999; 275 | text-align: justify; 276 | text-align-last: justify; 277 | } 278 | .weui-form-preview__value { 279 | display: block; 280 | overflow: hidden; 281 | word-break: normal; 282 | word-wrap: break-word; 283 | } 284 | .weui-form-preview__btn { 285 | position: relative; 286 | display: block; 287 | -webkit-box-flex: 1; 288 | -webkit-flex: 1; 289 | flex: 1; 290 | color: #3CC51F; 291 | text-align: center; 292 | } 293 | .weui-form-preview__btn:after { 294 | content: " "; 295 | position: absolute; 296 | left: 0; 297 | top: 0; 298 | width: 1px; 299 | bottom: 0; 300 | border-left: 1rpx solid #D5D5D6; 301 | color: #D5D5D6; 302 | } 303 | .weui-form-preview__btn:first-child:after { 304 | display: none; 305 | } 306 | .weui-form-preview__btn_active { 307 | background-color: #EEEEEE; 308 | } 309 | .weui-form-preview__btn_default { 310 | color: #999999; 311 | } 312 | .weui-form-preview__btn_primary { 313 | color: #0BB20C; 314 | } 315 | .weui-cell_select { 316 | padding: 0; 317 | } 318 | .weui-select { 319 | position: relative; 320 | padding-left: 15px; 321 | padding-right: 30px; 322 | height: 2.58823529em; 323 | min-height: 2.58823529em; 324 | line-height: 2.58823529em; 325 | border-right: 1rpx solid #D9D9D9; 326 | } 327 | .weui-select:before { 328 | content: " "; 329 | display: inline-block; 330 | height: 6px; 331 | width: 6px; 332 | border-width: 2px 2px 0 0; 333 | border-color: #C8C8CD; 334 | border-style: solid; 335 | -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0); 336 | transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0); 337 | position: relative; 338 | top: -2px; 339 | position: absolute; 340 | top: 50%; 341 | right: 15px; 342 | margin-top: -4px; 343 | } 344 | .weui-select_in-select-after { 345 | padding-left: 0; 346 | } 347 | .weui-cell__hd_in-select-after, 348 | .weui-cell__bd_in-select-before { 349 | padding-left: 15px; 350 | } 351 | .weui-cell_vcode { 352 | padding-right: 0; 353 | } 354 | .weui-vcode-img { 355 | margin-left: 5px; 356 | height: 2.58823529em; 357 | vertical-align: middle; 358 | } 359 | .weui-vcode-btn { 360 | display: inline-block; 361 | height: 2.58823529em; 362 | margin-left: 5px; 363 | padding: 0 0.6em 0 0.7em; 364 | border-left: 1px solid #E5E5E5; 365 | line-height: 2.58823529em; 366 | vertical-align: middle; 367 | font-size: 17px; 368 | color: #3CC51F; 369 | white-space: nowrap; 370 | } 371 | .weui-vcode-btn:active { 372 | color: #52a341; 373 | } 374 | .weui-cell_switch { 375 | padding-top: 6px; 376 | padding-bottom: 6px; 377 | } 378 | .weui-uploader__hd { 379 | display: -webkit-box; 380 | display: -webkit-flex; 381 | display: flex; 382 | padding-bottom: 10px; 383 | -webkit-box-align: center; 384 | -webkit-align-items: center; 385 | align-items: center; 386 | } 387 | .weui-uploader__title { 388 | -webkit-box-flex: 1; 389 | -webkit-flex: 1; 390 | flex: 1; 391 | } 392 | .weui-uploader__info { 393 | color: #B2B2B2; 394 | } 395 | .weui-uploader__bd { 396 | margin-bottom: -4px; 397 | margin-right: -9px; 398 | overflow: hidden; 399 | } 400 | .weui-uploader__file { 401 | float: left; 402 | margin-right: 9px; 403 | margin-bottom: 9px; 404 | } 405 | .weui-uploader__img { 406 | display: block; 407 | width: 79px; 408 | height: 79px; 409 | } 410 | .weui-uploader__file_status { 411 | position: relative; 412 | } 413 | .weui-uploader__file_status:before { 414 | content: " "; 415 | position: absolute; 416 | top: 0; 417 | right: 0; 418 | bottom: 0; 419 | left: 0; 420 | background-color: rgba(0, 0, 0, 0.5); 421 | } 422 | .weui-uploader__file-content { 423 | position: absolute; 424 | top: 50%; 425 | left: 50%; 426 | -webkit-transform: translate(-50%, -50%); 427 | transform: translate(-50%, -50%); 428 | color: #FFFFFF; 429 | } 430 | .weui-uploader__input-box { 431 | float: left; 432 | position: relative; 433 | margin-right: 9px; 434 | margin-bottom: 9px; 435 | width: 77px; 436 | height: 77px; 437 | border: 1px solid #D9D9D9; 438 | } 439 | .weui-uploader__input-box:before, 440 | .weui-uploader__input-box:after { 441 | content: " "; 442 | position: absolute; 443 | top: 50%; 444 | left: 50%; 445 | -webkit-transform: translate(-50%, -50%); 446 | transform: translate(-50%, -50%); 447 | background-color: #D9D9D9; 448 | } 449 | .weui-uploader__input-box:before { 450 | width: 2px; 451 | height: 39.5px; 452 | } 453 | .weui-uploader__input-box:after { 454 | width: 39.5px; 455 | height: 2px; 456 | } 457 | .weui-uploader__input-box:active { 458 | border-color: #999999; 459 | } 460 | .weui-uploader__input-box:active:before, 461 | .weui-uploader__input-box:active:after { 462 | background-color: #999999; 463 | } 464 | .weui-uploader__input { 465 | position: absolute; 466 | z-index: 1; 467 | top: 0; 468 | left: 0; 469 | width: 100%; 470 | height: 100%; 471 | opacity: 0; 472 | } 473 | .weui-article { 474 | padding: 20px 15px; 475 | font-size: 15px; 476 | } 477 | .weui-article__section { 478 | margin-bottom: 1.5em; 479 | } 480 | .weui-article__h1 { 481 | font-size: 18px; 482 | font-weight: 400; 483 | margin-bottom: .9em; 484 | } 485 | .weui-article__h2 { 486 | font-size: 16px; 487 | font-weight: 400; 488 | margin-bottom: .34em; 489 | } 490 | .weui-article__h3 { 491 | font-weight: 400; 492 | font-size: 15px; 493 | margin-bottom: .34em; 494 | } 495 | .weui-article__p { 496 | margin: 0 0 .8em; 497 | } 498 | .weui-msg { 499 | padding-top: 36px; 500 | text-align: center; 501 | } 502 | .weui-msg__link { 503 | display: inline; 504 | color: #586C94; 505 | } 506 | .weui-msg__icon-area { 507 | margin-bottom: 30px; 508 | } 509 | .weui-msg__text-area { 510 | margin-bottom: 25px; 511 | padding: 0 20px; 512 | } 513 | .weui-msg__title { 514 | margin-bottom: 5px; 515 | font-weight: 400; 516 | font-size: 20px; 517 | } 518 | .weui-msg__desc { 519 | font-size: 14px; 520 | color: #999999; 521 | } 522 | .weui-msg__opr-area { 523 | margin-bottom: 25px; 524 | } 525 | .weui-msg__extra-area { 526 | margin-bottom: 15px; 527 | font-size: 14px; 528 | color: #999999; 529 | } 530 | @media screen and (min-height: 438px) { 531 | .weui-msg__extra-area { 532 | position: fixed; 533 | left: 0; 534 | bottom: 0; 535 | width: 100%; 536 | text-align: center; 537 | } 538 | } 539 | .weui-flex { 540 | display: -webkit-box; 541 | display: -webkit-flex; 542 | display: flex; 543 | } 544 | .weui-flex__item { 545 | -webkit-box-flex: 1; 546 | -webkit-flex: 1; 547 | flex: 1; 548 | } 549 | .weui-btn { 550 | margin-top: 15px; 551 | } 552 | .weui-btn:first-child { 553 | margin-top: 0; 554 | } 555 | .weui-btn-area { 556 | margin: 1.17647059em 15px 0.3em; 557 | } 558 | .weui-agree { 559 | display: block; 560 | padding: .5em 15px; 561 | font-size: 13px; 562 | } 563 | .weui-agree__text { 564 | color: #999999; 565 | } 566 | .weui-agree__link { 567 | display: inline; 568 | color: #586C94; 569 | } 570 | .weui-agree__checkbox { 571 | position: absolute; 572 | left: -9999px; 573 | } 574 | .weui-agree__checkbox-icon { 575 | position: relative; 576 | top: 2px; 577 | display: inline-block; 578 | border: 1px solid #D1D1D1; 579 | background-color: #FFFFFF; 580 | border-radius: 3px; 581 | width: 11px; 582 | height: 11px; 583 | } 584 | .weui-agree__checkbox-icon-check { 585 | position: absolute; 586 | top: 1px; 587 | left: 1px; 588 | } 589 | .weui-footer { 590 | color: #999999; 591 | font-size: 14px; 592 | text-align: center; 593 | } 594 | .weui-footer_fixed-bottom { 595 | position: fixed; 596 | bottom: .52em; 597 | left: 0; 598 | right: 0; 599 | } 600 | .weui-footer__links { 601 | font-size: 0; 602 | } 603 | .weui-footer__link { 604 | display: inline-block; 605 | vertical-align: top; 606 | margin: 0 .62em; 607 | position: relative; 608 | font-size: 14px; 609 | color: #586C94; 610 | } 611 | .weui-footer__link:before { 612 | content: " "; 613 | position: absolute; 614 | left: 0; 615 | top: 0; 616 | width: 1px; 617 | bottom: 0; 618 | border-left: 1rpx solid #C7C7C7; 619 | color: #C7C7C7; 620 | left: -0.65em; 621 | top: .36em; 622 | bottom: .36em; 623 | } 624 | .weui-footer__link:first-child:before { 625 | display: none; 626 | } 627 | .weui-footer__text { 628 | padding: 0 .34em; 629 | font-size: 12px; 630 | } 631 | .weui-grids { 632 | border-top: 1rpx solid #D9D9D9; 633 | border-left: 1rpx solid #D9D9D9; 634 | overflow: hidden; 635 | } 636 | .weui-grid { 637 | position: relative; 638 | float: left; 639 | padding: 20px 10px; 640 | width: 33.33333333%; 641 | box-sizing: border-box; 642 | border-right: 1rpx solid #D9D9D9; 643 | border-bottom: 1rpx solid #D9D9D9; 644 | } 645 | .weui-grid_active { 646 | background-color: #ECECEC; 647 | } 648 | .weui-grid__icon { 649 | display: block; 650 | width: 28px; 651 | height: 28px; 652 | margin: 0 auto; 653 | } 654 | .weui-grid__label { 655 | margin-top: 5px; 656 | display: block; 657 | text-align: center; 658 | color: #000000; 659 | font-size: 14px; 660 | white-space: nowrap; 661 | text-overflow: ellipsis; 662 | overflow: hidden; 663 | } 664 | .weui-loading { 665 | margin: 0 5px; 666 | width: 20px; 667 | height: 20px; 668 | display: inline-block; 669 | vertical-align: middle; 670 | -webkit-animation: weuiLoading 1s steps(12, end) infinite; 671 | animation: weuiLoading 1s steps(12, end) infinite; 672 | background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat; 673 | background-size: 100%; 674 | } 675 | @-webkit-keyframes weuiLoading { 676 | 0% { 677 | -webkit-transform: rotate3d(0, 0, 1, 0deg); 678 | transform: rotate3d(0, 0, 1, 0deg); 679 | } 680 | 100% { 681 | -webkit-transform: rotate3d(0, 0, 1, 360deg); 682 | transform: rotate3d(0, 0, 1, 360deg); 683 | } 684 | } 685 | @keyframes weuiLoading { 686 | 0% { 687 | -webkit-transform: rotate3d(0, 0, 1, 0deg); 688 | transform: rotate3d(0, 0, 1, 0deg); 689 | } 690 | 100% { 691 | -webkit-transform: rotate3d(0, 0, 1, 360deg); 692 | transform: rotate3d(0, 0, 1, 360deg); 693 | } 694 | } 695 | .weui-badge { 696 | display: inline-block; 697 | padding: .15em .4em; 698 | min-width: 8px; 699 | border-radius: 18px; 700 | background-color: #F43530; 701 | color: #FFFFFF; 702 | line-height: 1.2; 703 | text-align: center; 704 | font-size: 12px; 705 | vertical-align: middle; 706 | } 707 | .weui-badge_dot { 708 | padding: .4em; 709 | min-width: 0; 710 | } 711 | .weui-loadmore { 712 | width: 65%; 713 | margin: 1.5em auto; 714 | line-height: 1.6em; 715 | font-size: 14px; 716 | text-align: center; 717 | } 718 | .weui-loadmore__tips { 719 | display: inline-block; 720 | vertical-align: middle; 721 | } 722 | .weui-loadmore_line { 723 | border-top: 1px solid #E5E5E5; 724 | margin-top: 2.4em; 725 | } 726 | .weui-loadmore__tips_in-line { 727 | position: relative; 728 | top: -0.9em; 729 | padding: 0 .55em; 730 | background-color: #FFFFFF; 731 | color: #999999; 732 | } 733 | .weui-loadmore__tips_in-dot { 734 | position: relative; 735 | padding: 0 .16em; 736 | width: 4px; 737 | height: 1.6em; 738 | } 739 | .weui-loadmore__tips_in-dot:before { 740 | content: " "; 741 | position: absolute; 742 | top: 50%; 743 | left: 50%; 744 | margin-top: -1px; 745 | margin-left: -2px; 746 | width: 4px; 747 | height: 4px; 748 | border-radius: 50%; 749 | background-color: #E5E5E5; 750 | } 751 | .weui-panel { 752 | background-color: #FFFFFF; 753 | margin-top: 10px; 754 | position: relative; 755 | overflow: hidden; 756 | } 757 | .weui-panel:first-child { 758 | margin-top: 0; 759 | } 760 | .weui-panel:before { 761 | content: " "; 762 | position: absolute; 763 | left: 0; 764 | top: 0; 765 | right: 0; 766 | height: 1px; 767 | border-top: 1rpx solid #E5E5E5; 768 | color: #E5E5E5; 769 | } 770 | .weui-panel:after { 771 | content: " "; 772 | position: absolute; 773 | left: 0; 774 | bottom: 0; 775 | right: 0; 776 | height: 1px; 777 | border-bottom: 1rpx solid #E5E5E5; 778 | color: #E5E5E5; 779 | } 780 | .weui-panel__hd { 781 | padding: 14px 15px 10px; 782 | color: #999999; 783 | font-size: 13px; 784 | position: relative; 785 | } 786 | .weui-panel__hd:after { 787 | content: " "; 788 | position: absolute; 789 | left: 0; 790 | bottom: 0; 791 | right: 0; 792 | height: 1px; 793 | border-bottom: 1rpx solid #E5E5E5; 794 | color: #E5E5E5; 795 | left: 15px; 796 | } 797 | .weui-media-box { 798 | padding: 15px; 799 | position: relative; 800 | } 801 | .weui-media-box:before { 802 | content: " "; 803 | position: absolute; 804 | left: 0; 805 | top: 0; 806 | right: 0; 807 | height: 1px; 808 | border-top: 1rpx solid #E5E5E5; 809 | color: #E5E5E5; 810 | left: 15px; 811 | } 812 | .weui-media-box:first-child:before { 813 | display: none; 814 | } 815 | .weui-media-box__title { 816 | font-weight: 400; 817 | font-size: 17px; 818 | width: auto; 819 | overflow: hidden; 820 | text-overflow: ellipsis; 821 | white-space: nowrap; 822 | word-wrap: normal; 823 | word-wrap: break-word; 824 | word-break: break-all; 825 | } 826 | .weui-media-box__desc { 827 | color: #999999; 828 | font-size: 13px; 829 | line-height: 1.2; 830 | overflow: hidden; 831 | text-overflow: ellipsis; 832 | display: -webkit-box; 833 | -webkit-box-orient: vertical; 834 | -webkit-line-clamp: 2; 835 | } 836 | .weui-media-box__info { 837 | margin-top: 15px; 838 | padding-bottom: 5px; 839 | font-size: 13px; 840 | color: #CECECE; 841 | line-height: 1em; 842 | list-style: none; 843 | overflow: hidden; 844 | } 845 | .weui-media-box__info__meta { 846 | float: left; 847 | padding-right: 1em; 848 | } 849 | .weui-media-box__info__meta_extra { 850 | padding-left: 1em; 851 | border-left: 1px solid #CECECE; 852 | } 853 | .weui-media-box__title_in-text { 854 | margin-bottom: 8px; 855 | } 856 | .weui-media-box_appmsg { 857 | display: -webkit-box; 858 | display: -webkit-flex; 859 | display: flex; 860 | -webkit-box-align: center; 861 | -webkit-align-items: center; 862 | align-items: center; 863 | } 864 | .weui-media-box__thumb { 865 | width: 100%; 866 | height: 100%; 867 | vertical-align: top; 868 | } 869 | .weui-media-box__hd_in-appmsg { 870 | margin-right: .8em; 871 | width: 60px; 872 | height: 60px; 873 | line-height: 60px; 874 | text-align: center; 875 | } 876 | .weui-media-box__bd_in-appmsg { 877 | -webkit-box-flex: 1; 878 | -webkit-flex: 1; 879 | flex: 1; 880 | min-width: 0; 881 | } 882 | .weui-media-box_small-appmsg { 883 | padding: 0; 884 | } 885 | .weui-cells_in-small-appmsg { 886 | margin-top: 0; 887 | } 888 | .weui-cells_in-small-appmsg:before { 889 | display: none; 890 | } 891 | .weui-progress { 892 | display: -webkit-box; 893 | display: -webkit-flex; 894 | display: flex; 895 | -webkit-box-align: center; 896 | -webkit-align-items: center; 897 | align-items: center; 898 | } 899 | .weui-progress__bar { 900 | -webkit-box-flex: 1; 901 | -webkit-flex: 1; 902 | flex: 1; 903 | } 904 | .weui-progress__opr { 905 | margin-left: 15px; 906 | font-size: 0; 907 | } 908 | .weui-navbar { 909 | display: -webkit-box; 910 | display: -webkit-flex; 911 | display: flex; 912 | position: absolute; 913 | z-index: 500; 914 | top: 0; 915 | width: 100%; 916 | border-bottom: 1rpx solid #CCCCCC; 917 | } 918 | .weui-navbar__item { 919 | position: relative; 920 | display: block; 921 | -webkit-box-flex: 1; 922 | -webkit-flex: 1; 923 | flex: 1; 924 | padding: 13px 0; 925 | text-align: center; 926 | font-size: 0; 927 | } 928 | .weui-navbar__item.weui-bar__item_on { 929 | color: #1AAD19; 930 | } 931 | .weui-navbar__slider { 932 | position: absolute; 933 | content: " "; 934 | left: 0; 935 | bottom: 0; 936 | width: 6em; 937 | height: 3px; 938 | background-color: #1AAD19; 939 | -webkit-transition: -webkit-transform .3s; 940 | transition: -webkit-transform .3s; 941 | transition: transform .3s; 942 | transition: transform .3s, -webkit-transform .3s; 943 | } 944 | .weui-navbar__title { 945 | display: inline-block; 946 | font-size: 15px; 947 | max-width: 8em; 948 | width: auto; 949 | overflow: hidden; 950 | text-overflow: ellipsis; 951 | white-space: nowrap; 952 | word-wrap: normal; 953 | } 954 | .weui-tab { 955 | position: relative; 956 | height: 100%; 957 | } 958 | .weui-tab__panel { 959 | box-sizing: border-box; 960 | height: 100%; 961 | padding-top: 50px; 962 | overflow: auto; 963 | -webkit-overflow-scrolling: touch; 964 | } 965 | .weui-search-bar { 966 | position: relative; 967 | padding: 8px 10px; 968 | display: -webkit-box; 969 | display: -webkit-flex; 970 | display: flex; 971 | box-sizing: border-box; 972 | background-color: #EFEFF4; 973 | border-top: 1rpx solid #D7D6DC; 974 | border-bottom: 1rpx solid #D7D6DC; 975 | } 976 | .weui-icon-search { 977 | margin-right: 8px; 978 | font-size: inherit; 979 | } 980 | .weui-icon-search_in-box { 981 | position: absolute; 982 | left: 10px; 983 | top: 7px; 984 | } 985 | .weui-search-bar__text { 986 | display: inline-block; 987 | font-size: 14px; 988 | vertical-align: middle; 989 | } 990 | .weui-search-bar__form { 991 | position: relative; 992 | -webkit-box-flex: 1; 993 | -webkit-flex: auto; 994 | flex: auto; 995 | border-radius: 5px; 996 | background: #FFFFFF; 997 | border: 1rpx solid #E6E6EA; 998 | } 999 | .weui-search-bar__box { 1000 | position: relative; 1001 | padding-left: 30px; 1002 | padding-right: 30px; 1003 | width: 100%; 1004 | box-sizing: border-box; 1005 | z-index: 1; 1006 | } 1007 | .weui-search-bar__input { 1008 | height: 28px; 1009 | line-height: 28px; 1010 | font-size: 14px; 1011 | } 1012 | .weui-icon-clear { 1013 | position: absolute; 1014 | top: 0; 1015 | right: 0; 1016 | padding: 7px 8px; 1017 | font-size: 0; 1018 | } 1019 | .weui-search-bar__label { 1020 | position: absolute; 1021 | top: 0; 1022 | right: 0; 1023 | bottom: 0; 1024 | left: 0; 1025 | z-index: 2; 1026 | border-radius: 3px; 1027 | text-align: center; 1028 | color: #9B9B9B; 1029 | background: #FFFFFF; 1030 | line-height: 28px; 1031 | } 1032 | .weui-search-bar__cancel-btn { 1033 | margin-left: 10px; 1034 | line-height: 28px; 1035 | color: #09BB07; 1036 | white-space: nowrap; 1037 | } 1038 | 1039 | weui-tabbar { 1040 | display: -webkit-box; 1041 | display: -webkit-flex; 1042 | display: flex; 1043 | position: absolute; 1044 | z-index: 500; 1045 | bottom: 0; 1046 | width: 100%; 1047 | background-color: #F7F7FA; 1048 | } 1049 | .weui-tabbar:before { 1050 | content: " "; 1051 | position: absolute; 1052 | left: 0; 1053 | top: 0; 1054 | right: 0; 1055 | height: 1px; 1056 | border-top: 1px solid #C0BFC4; 1057 | color: #C0BFC4; 1058 | -webkit-transform-origin: 0 0; 1059 | transform-origin: 0 0; 1060 | -webkit-transform: scaleY(0.5); 1061 | transform: scaleY(0.5); 1062 | } 1063 | .weui-tabbar__item { 1064 | display: block; 1065 | -webkit-box-flex: 1; 1066 | -webkit-flex: 1; 1067 | flex: 1; 1068 | padding: 5px 0 0; 1069 | font-size: 0; 1070 | color: #999999; 1071 | text-align: center; 1072 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 1073 | } 1074 | .weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon, 1075 | .weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon > i, 1076 | .weui-tabbar__item.weui-bar__item_on .weui-tabbar__label { 1077 | color: #09BB07; 1078 | } 1079 | .weui-tabbar__icon { 1080 | display: inline-block; 1081 | width: 27px; 1082 | height: 27px; 1083 | } 1084 | i.weui-tabbar__icon, 1085 | .weui-tabbar__icon > i { 1086 | font-size: 24px; 1087 | color: #999999; 1088 | } 1089 | .weui-tabbar__icon img { 1090 | width: 100%; 1091 | height: 100%; 1092 | } 1093 | .weui-tabbar__label { 1094 | text-align: center; 1095 | color: #999999; 1096 | font-size: 10px; 1097 | line-height: 1.8; 1098 | } --------------------------------------------------------------------------------