├── pages ├── my │ ├── my.json │ ├── my.wxss │ ├── my.wxml │ └── my.js ├── carts │ ├── carts.json │ ├── carts.wxss │ ├── carts.wxml │ └── carts.js ├── class │ ├── class.json │ ├── class.wxss │ ├── class.wxml │ └── class.js ├── advert │ ├── advert.json │ ├── advert.wxml │ ├── advert.wxss │ └── advert.js ├── index │ ├── index.json │ ├── index.wxss │ ├── index.js │ └── index.wxml ├── logs │ ├── logs.json │ ├── logs.wxss │ ├── logs.wxml │ └── logs.js └── authorize │ ├── authorize.json │ ├── authorize.wxml │ ├── authorize.wxss │ └── authorize.js ├── images ├── add.png ├── reg.png ├── advert.gif ├── carts.png ├── edit.png ├── help.png ├── logo.jpg ├── icon_carts.png ├── icon_me_line.png ├── icon_me_solid.png ├── icon_home_line.png ├── icon_home_solid.png ├── icon_monitor_line.png └── icon_monitor_solid.png ├── app.js ├── config └── api.js ├── README.md ├── project.config.json ├── app.wxss ├── app.json └── utils ├── common.wxss ├── iconfont.wxss ├── util.js └── weui.wxss /pages/my/my.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /pages/carts/carts.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /pages/class/class.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /pages/my/my.wxss: -------------------------------------------------------------------------------- 1 | /* pages/my/my.wxss */ -------------------------------------------------------------------------------- /pages/carts/carts.wxss: -------------------------------------------------------------------------------- 1 | /* pages/carts/carts.wxss */ -------------------------------------------------------------------------------- /pages/class/class.wxss: -------------------------------------------------------------------------------- 1 | /* pages/class/class.wxss */ -------------------------------------------------------------------------------- /pages/advert/advert.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {} 3 | } -------------------------------------------------------------------------------- /pages/index/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "enablePullDownRefresh": true 3 | } -------------------------------------------------------------------------------- /pages/logs/logs.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "查看启动日志" 3 | } -------------------------------------------------------------------------------- /images/add.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cuigeg/wxchat/HEAD/images/add.png -------------------------------------------------------------------------------- /images/reg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cuigeg/wxchat/HEAD/images/reg.png -------------------------------------------------------------------------------- /pages/authorize/authorize.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "授权登录" 3 | } -------------------------------------------------------------------------------- /pages/my/my.wxml: -------------------------------------------------------------------------------- 1 | 2 | pages/my/my.wxml 3 | -------------------------------------------------------------------------------- /images/advert.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cuigeg/wxchat/HEAD/images/advert.gif -------------------------------------------------------------------------------- /images/carts.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cuigeg/wxchat/HEAD/images/carts.png -------------------------------------------------------------------------------- /images/edit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cuigeg/wxchat/HEAD/images/edit.png -------------------------------------------------------------------------------- /images/help.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cuigeg/wxchat/HEAD/images/help.png -------------------------------------------------------------------------------- /images/logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cuigeg/wxchat/HEAD/images/logo.jpg -------------------------------------------------------------------------------- /images/icon_carts.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cuigeg/wxchat/HEAD/images/icon_carts.png -------------------------------------------------------------------------------- /images/icon_me_line.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cuigeg/wxchat/HEAD/images/icon_me_line.png -------------------------------------------------------------------------------- /images/icon_me_solid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cuigeg/wxchat/HEAD/images/icon_me_solid.png -------------------------------------------------------------------------------- /pages/carts/carts.wxml: -------------------------------------------------------------------------------- 1 | 2 | pages/carts/carts.wxml 3 | -------------------------------------------------------------------------------- /pages/class/class.wxml: -------------------------------------------------------------------------------- 1 | 2 | pages/class/class.wxml 3 | -------------------------------------------------------------------------------- /images/icon_home_line.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cuigeg/wxchat/HEAD/images/icon_home_line.png -------------------------------------------------------------------------------- /images/icon_home_solid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cuigeg/wxchat/HEAD/images/icon_home_solid.png -------------------------------------------------------------------------------- /images/icon_monitor_line.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cuigeg/wxchat/HEAD/images/icon_monitor_line.png -------------------------------------------------------------------------------- /images/icon_monitor_solid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cuigeg/wxchat/HEAD/images/icon_monitor_solid.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/logs/logs.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{index + 1}}. {{log}} 5 | 6 | 7 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | //app.js 2 | App({ 3 | onLaunch: function () { 4 | 5 | }, 6 | globalData: { 7 | userInfo: null, 8 | about: '此项目长期维护，如果有需要的可以在github自行下载，感觉还不错可以给作者star', 9 | openid:'' 10 | } 11 | }) -------------------------------------------------------------------------------- /config/api.js: -------------------------------------------------------------------------------- 1 | const urlPath = "http://127.0.0.1/api/"; 2 | 3 | module.exports = { 4 | UserAdd: urlPath + 'user/add', //保存用户信息 5 | AuthLogin: urlPath + 'auth/login', //微信登录 6 | AuthUserInfo: urlPath + 'user/userInfo', //微信登录 7 | 8 | } -------------------------------------------------------------------------------- /pages/advert/advert.wxml: -------------------------------------------------------------------------------- 1 | 2 | 7 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # wxchat 2 | 小程序模板 3 | 4 | ## 2018-08-03 更新first 5 | 小程序授权登录（button按钮）、app.json设置底部菜单栏、iconfont图库的引入、初步完成小程序框架 6 | 7 | ## 2019-05-27 更新two 8 | 1.完善小程序长期不更新，兼容问题 9 | 2.新增advert 进入首页前广告过度功能 10 | 3.使用new Promise() 封装wx.request 并解决安全认证Token值 11 | 4.请求接口独立存放在config/api.js文件中，方便管理 12 | 13 | #### 下次不定期更新，谢谢查看，不嫌弃的话，请留下您的star 14 | 15 | -------------------------------------------------------------------------------- /pages/authorize/authorize.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 申请获取以下权限 9 | 获得你的公开信息(昵称，头像等) 10 | 11 | 12 | 15 | 16 | 17 | 请升级微信版本 18 | 19 | 20 | -------------------------------------------------------------------------------- /pages/authorize/authorize.wxss: -------------------------------------------------------------------------------- 1 | .header { 2 | margin: 90rpx 0 90rpx 50rpx; 3 | text-align: center; 4 | width: 650rpx; 5 | height: 300rpx; 6 | line-height: 450rpx; 7 | } 8 | 9 | .header image { 10 | width: 200rpx; 11 | height: 200rpx; 12 | border-radius: 100rpx; 13 | } 14 | 15 | .content { 16 | margin-left: 50rpx; 17 | margin-bottom: 90rpx; 18 | } 19 | 20 | .content text { 21 | display: block; 22 | color: #9d9d9d; 23 | margin-top: 40rpx; 24 | } 25 | 26 | .bottom { 27 | border-radius: 80rpx; 28 | margin: 70rpx 50rpx; 29 | font-size: 35rpx; 30 | } 31 | -------------------------------------------------------------------------------- /pages/index/index.wxss: -------------------------------------------------------------------------------- 1 | @import "/utils/common.wxss"; 2 | 3 | .navigator-hover button { 4 | background-color: #dedede; 5 | } 6 | 7 | .other-navigator-hover button { 8 | background-color: #dedede; 9 | } 10 | 11 | .g-bda-userinfo { 12 | padding-top: 50rpx; 13 | display: flex; 14 | flex-direction: column; 15 | align-items: center; 16 | } 17 | 18 | .userinfo-avatar { 19 | width: 180rpx; 20 | height: 180rpx; 21 | margin: 20rpx; 22 | margin-bottom: 2rpx; 23 | border-radius: 50%; 24 | border: 2px solid #fff; 25 | } 26 | .i-header{ 27 | height: 350rpx; 28 | background-color: #3891f8; 29 | text-align: center; 30 | } 31 | .userinfo-nickname{ 32 | color: #fff; 33 | } -------------------------------------------------------------------------------- /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 | }, 13 | "compileType": "miniprogram", 14 | "libVersion": "2.0.4", 15 | "appid": "wx04e7043ae03f1675", 16 | "projectname": "wxChat", 17 | "isGameTourist": false, 18 | "condition": { 19 | "search": { 20 | "current": -1, 21 | "list": [] 22 | }, 23 | "conversation": { 24 | "current": -1, 25 | "list": [] 26 | }, 27 | "game": { 28 | "currentL": -1, 29 | "list": [] 30 | }, 31 | "miniprogram": { 32 | "current": -1, 33 | "list": [] 34 | } 35 | } 36 | } -------------------------------------------------------------------------------- /pages/advert/advert.wxss: -------------------------------------------------------------------------------- 1 | /* pages/advert/advert.wxss */ 2 | .advert { 3 | width: 100%; 4 | height: 100%; 5 | } 6 | .button-top-left { 7 | display: inline-block; 8 | position: absolute; 9 | background: white; 10 | left: 20rpx; 11 | top: 20rpx; 12 | width: 100rpx; 13 | height: 60rpx; 14 | border-radius: 30rpx; 15 | text-align: center; 16 | line-height: 30px; 17 | opacity: 0.5; 18 | font-size: 30rpx; 19 | } 20 | 21 | .button-top-right { 22 | display: inline-block; 23 | position: absolute; 24 | width: 120rpx; 25 | height: 60rpx; 26 | right: 20rpx; 27 | top:20rpx; 28 | line-height: 60rpx; 29 | background: white; 30 | border-radius: 30rpx; 31 | text-align: center; 32 | border: 1px solid #ccc; 33 | opacity: 0.5; 34 | font-size: 30rpx; 35 | } -------------------------------------------------------------------------------- /pages/my/my.js: -------------------------------------------------------------------------------- 1 | // pages/my/my.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | 9 | }, 10 | 11 | /** 12 | * 生命周期函数--监听页面加载 13 | */ 14 | onLoad: function (options) { 15 | 16 | }, 17 | 18 | /** 19 | * 生命周期函数--监听页面初次渲染完成 20 | */ 21 | onReady: function () { 22 | 23 | }, 24 | 25 | /** 26 | * 生命周期函数--监听页面显示 27 | */ 28 | onShow: function () { 29 | 30 | }, 31 | 32 | /** 33 | * 生命周期函数--监听页面隐藏 34 | */ 35 | onHide: function () { 36 | 37 | }, 38 | 39 | /** 40 | * 生命周期函数--监听页面卸载 41 | */ 42 | onUnload: function () { 43 | 44 | }, 45 | 46 | /** 47 | * 页面相关事件处理函数--监听用户下拉动作 48 | */ 49 | onPullDownRefresh: function () { 50 | 51 | }, 52 | 53 | /** 54 | * 页面上拉触底事件的处理函数 55 | */ 56 | onReachBottom: function () { 57 | 58 | }, 59 | 60 | /** 61 | * 用户点击右上角分享 62 | */ 63 | onShareAppMessage: function () { 64 | 65 | } 66 | }) -------------------------------------------------------------------------------- /pages/carts/carts.js: -------------------------------------------------------------------------------- 1 | // pages/carts/carts.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | 9 | }, 10 | 11 | /** 12 | * 生命周期函数--监听页面加载 13 | */ 14 | onLoad: function (options) { 15 | 16 | }, 17 | 18 | /** 19 | * 生命周期函数--监听页面初次渲染完成 20 | */ 21 | onReady: function () { 22 | 23 | }, 24 | 25 | /** 26 | * 生命周期函数--监听页面显示 27 | */ 28 | onShow: function () { 29 | 30 | }, 31 | 32 | /** 33 | * 生命周期函数--监听页面隐藏 34 | */ 35 | onHide: function () { 36 | 37 | }, 38 | 39 | /** 40 | * 生命周期函数--监听页面卸载 41 | */ 42 | onUnload: function () { 43 | 44 | }, 45 | 46 | /** 47 | * 页面相关事件处理函数--监听用户下拉动作 48 | */ 49 | onPullDownRefresh: function () { 50 | 51 | }, 52 | 53 | /** 54 | * 页面上拉触底事件的处理函数 55 | */ 56 | onReachBottom: function () { 57 | 58 | }, 59 | 60 | /** 61 | * 用户点击右上角分享 62 | */ 63 | onShareAppMessage: function () { 64 | 65 | } 66 | }) -------------------------------------------------------------------------------- /pages/class/class.js: -------------------------------------------------------------------------------- 1 | // pages/class/class.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | 9 | }, 10 | 11 | /** 12 | * 生命周期函数--监听页面加载 13 | */ 14 | onLoad: function (options) { 15 | 16 | }, 17 | 18 | /** 19 | * 生命周期函数--监听页面初次渲染完成 20 | */ 21 | onReady: function () { 22 | 23 | }, 24 | 25 | /** 26 | * 生命周期函数--监听页面显示 27 | */ 28 | onShow: function () { 29 | 30 | }, 31 | 32 | /** 33 | * 生命周期函数--监听页面隐藏 34 | */ 35 | onHide: function () { 36 | 37 | }, 38 | 39 | /** 40 | * 生命周期函数--监听页面卸载 41 | */ 42 | onUnload: function () { 43 | 44 | }, 45 | 46 | /** 47 | * 页面相关事件处理函数--监听用户下拉动作 48 | */ 49 | onPullDownRefresh: function () { 50 | 51 | }, 52 | 53 | /** 54 | * 页面上拉触底事件的处理函数 55 | */ 56 | onReachBottom: function () { 57 | 58 | }, 59 | 60 | /** 61 | * 用户点击右上角分享 62 | */ 63 | onShareAppMessage: function () { 64 | 65 | } 66 | }) -------------------------------------------------------------------------------- /app.wxss: -------------------------------------------------------------------------------- 1 | /**app.wxss**/ 2 | @import 'utils/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 | 13 | 14 | @font-face { 15 | font-family: 'iconfont'; /* project id 499403 */ 16 | src: url('//at.alicdn.com/t/font_499403_1qmnkg4mo7y.eot'); 17 | src: url('//at.alicdn.com/t/font_499403_1qmnkg4mo7y.eot?#iefix') format('embedded-opentype'), 18 | url('//at.alicdn.com/t/font_499403_1qmnkg4mo7y.woff') format('woff'), 19 | url('//at.alicdn.com/t/font_499403_1qmnkg4mo7y.ttf') format('truetype'), 20 | url('//at.alicdn.com/t/font_499403_1qmnkg4mo7y.svg#iconfont') format('svg'); 21 | } 22 | .iconfont { 23 | font-family:"iconfont" !important; 24 | font-size:16px; 25 | font-style:normal; 26 | -webkit-font-smoothing: antialiased; 27 | -moz-osx-font-smoothing: grayscale; 28 | } 29 | 30 | .icon-gouwuche:before { content: "\e61c"; } 31 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages":[ 3 | "pages/advert/advert", 4 | "pages/index/index", 5 | "pages/logs/logs", 6 | "pages/authorize/authorize", 7 | "pages/class/class", 8 | "pages/carts/carts", 9 | "pages/my/my" 10 | ], 11 | "window":{ 12 | "backgroundTextStyle":"light", 13 | "navigationBarBackgroundColor": "#3891f8", 14 | "navigationBarTitleText": "WeChat", 15 | "navigationBarTextStyle":"black" 16 | }, 17 | "tabBar": { 18 | "color": "#6e6d6b", 19 | "selectedColor": "#4a90e2", 20 | "borderStyle": "black", 21 | "backgroundColor": "#fff", 22 | "list": [ 23 | { 24 | "pagePath": "pages/index/index", 25 | "iconPath": "images/icon_home_line.png", 26 | "selectedIconPath": "images/icon_home_solid.png", 27 | "text": "首页" 28 | }, 29 | { 30 | "pagePath": "pages/class/class", 31 | "iconPath": "images/icon_monitor_line.png", 32 | "selectedIconPath": "images/icon_monitor_solid.png", 33 | "text": "分类" 34 | }, 35 | { 36 | "pagePath": "pages/carts/carts", 37 | "iconPath": "images/carts.png", 38 | "selectedIconPath": "images/icon_carts.png", 39 | "text": "购物车" 40 | }, 41 | { 42 | "pagePath": "pages/my/my", 43 | "iconPath": "images/icon_me_line.png", 44 | "selectedIconPath": "images/icon_me_solid.png", 45 | "text": "我的" 46 | } 47 | ] 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /pages/index/index.js: -------------------------------------------------------------------------------- 1 | 2 | const app = getApp(); 3 | var api = require('../../config/api.js'); 4 | var util = require('../../utils/util.js'); 5 | Page({ 6 | data: { 7 | userInfo: null, 8 | }, 9 | onLoad: function (options) { 10 | var that = this; 11 | var status = false; 12 | // 获取用户信息 13 | wx.getSetting({ 14 | success: res => { 15 | if (res.authSetting['scope.userInfo']) { 16 | // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框 17 | wx.getUserInfo({ 18 | success: res => { 19 | // 可以将 res 发送给后台解码出 unionId 20 | app.globalData.userInfo = res.rawData 21 | that.setData({ 22 | userInfo: res.rawData 23 | }); 24 | // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回 25 | // 所以此处加入 callback 以防止这种情况 26 | if (that.userInfoReadyCallback) { 27 | that.userInfoReadyCallback(res) 28 | } 29 | } 30 | }) 31 | } else { 32 | wx.reLaunch({ 33 | url: '/pages/authorize/authorize', 34 | }) 35 | } 36 | } 37 | }); 38 | 39 | }, 40 | onShow: function () { 41 | wx.setNavigationBarTitle({ 42 | title: '小柒商城' 43 | }); 44 | }, 45 | about: function (e) { 46 | wx.showModal({ 47 | title: '提示', 48 | content: app.globalData.about || '', 49 | showCancel: false 50 | }); 51 | }, 52 | //下拉刷新（仅仅为示例，不是真实逻辑） 53 | onPullDownRefresh() { 54 | let that = this; 55 | wx.showNavigationBarLoading()//在标题栏中显示加载 56 | //刷新数据，刷新完成加载下边两个事件 57 | util.request(api.AuthUserInfo, { openid: app.globalData.openid }).then(function (res) { 58 | if (res.code === 0) { 59 | that.setData({ 60 | userInfo : res.data 61 | }) 62 | app.globalData.userInfo = res.data; 63 | 64 | wx.hideNavigationBarLoading() //完成停止加载 65 | wx.stopPullDownRefresh() //停止下拉刷新 66 | } 67 | }) 68 | } 69 | }); 70 | -------------------------------------------------------------------------------- /utils/common.wxss: -------------------------------------------------------------------------------- 1 | .index-hd { 2 | padding: 80rpx; 3 | text-align: center; 4 | } 5 | .index-bd { 6 | padding: 0 30rpx 40rpx; 7 | } 8 | .index-ft { 9 | padding-bottom: 20rpx; 10 | text-align: center; 11 | } 12 | .index-logo { 13 | width: 86rpx; 14 | height: 86rpx; 15 | } 16 | .index-desc { 17 | margin-top: 20rpx; 18 | color: #888888; 19 | font-size: 28rpx; 20 | } 21 | 22 | 23 | .navigator-box { 24 | opacity: 0; 25 | position: relative; 26 | background-color: #FFFFFF; 27 | line-height: 1.41176471; 28 | font-size: 34rpx; 29 | 30 | transform: translateY(-50%); 31 | transition: .3s; 32 | } 33 | .navigator-box-show { 34 | opacity: 1; 35 | transform: translateY(0); 36 | } 37 | .navigator { 38 | padding: 20rpx 30rpx; 39 | position: relative; 40 | display: flex; 41 | align-items: center; 42 | } 43 | .navigator:before { 44 | content: " "; 45 | position: absolute; 46 | left: 30rpx; 47 | top: 0; 48 | right: 30rpx; 49 | height: 1px; 50 | border-top: 1rpx solid #D8D8D8; 51 | color: #D8D8D8; 52 | } 53 | .navigator:first-child:before { 54 | display: none; 55 | } 56 | .navigator-text { 57 | flex: 1; 58 | } 59 | .navigator-arrow { 60 | padding-right: 26rpx; 61 | position: relative; 62 | } 63 | .navigator-arrow:after { 64 | content: " "; 65 | display: inline-block; 66 | height: 18rpx; 67 | width: 18rpx; 68 | border-width: 2rpx 2rpx 0 0; 69 | border-color: #888888; 70 | border-style: solid; 71 | transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0); 72 | position: absolute; 73 | top: 50%; 74 | margin-top: -8rpx; 75 | right: 28rpx; 76 | } 77 | 78 | 79 | .kind-list-item { 80 | margin: 20rpx 0; 81 | background-color: #FFFFFF; 82 | border-radius: 4rpx; 83 | overflow: hidden; 84 | } 85 | .kind-list-item:first-child { 86 | margin-top: 0; 87 | } 88 | .kind-list-text{ 89 | flex: 1; 90 | } 91 | .kind-list-img { 92 | width: 60rpx; 93 | height: 60rpx; 94 | } 95 | .kind-list-item-hd { 96 | padding: 30rpx; 97 | display: flex; 98 | align-items: center; 99 | 100 | transition: opacity .3s; 101 | } 102 | .kind-list-item-hd-show { 103 | opacity: .2; 104 | } 105 | .kind-list-item-bd { 106 | height: 0; 107 | overflow: hidden; 108 | } 109 | .kind-list-item-bd-show { 110 | height: auto; 111 | } -------------------------------------------------------------------------------- /pages/authorize/authorize.js: -------------------------------------------------------------------------------- 1 | const app = getApp(); 2 | var api = require('../../config/api.js'); 3 | var util = require('../../utils/util.js'); 4 | Page({ 5 | data: { 6 | //判断小程序的API，回调，参数，组件等是否在当前版本可用。 7 | canIUse: wx.canIUse('button.open-type.getUserInfo') 8 | }, 9 | onLoad: function () { 10 | var that = this; 11 | // 查看是否授权 12 | wx.getSetting({ 13 | success: function (res) { 14 | if (res.authSetting['scope.userInfo']) { 15 | wx.getUserInfo({ 16 | success: function (res) { 17 | //从数据库获取用户信息 18 | that.queryUsreInfo(); 19 | //用户已经授权过 20 | wx.switchTab({ 21 | url: '/pages/index/index' 22 | }) 23 | } 24 | }); 25 | } 26 | } 27 | }) 28 | }, 29 | bindGetUserInfo: function (e) { 30 | if (e.detail.userInfo) { 31 | //用户按了允许授权按钮 32 | app.globalData.userInfo = e.detail.userInfo; 33 | 34 | //插入登录的用户的相关信息到数据库 35 | let that = this; 36 | that.insertUserInfo(e); 37 | 38 | } else { 39 | //用户按了拒绝按钮 40 | wx.showModal({ 41 | title: '警告', 42 | content: '您点击了拒绝授权，将无法进入小程序，请授权之后再进入!!!', 43 | showCancel: false, 44 | confirmText: '返回授权', 45 | success: function (res) { 46 | if (res.confirm) { 47 | console.log('用户点击了“返回授权”') 48 | } 49 | } 50 | }) 51 | } 52 | }, 53 | //保存用户信息 54 | insertUserInfo: function (res){ 55 | console.log(8888); 56 | var data = { 57 | openid: app.globalData.openid, 58 | nickName: res.detail.userInfo.nickName, 59 | avatarUrl: res.detail.userInfo.avatarUrl, 60 | province: res.detail.userInfo.province, 61 | city: res.detail.userInfo.city 62 | }; 63 | util.request(api.UserAdd, data, 'POST').then(function (res) { 64 | if (res.code === 0) { 65 | console.log("小程序登录用户信息成功！"); 66 | 67 | //授权成功后，跳转进入小程序首页(正式环境应该在这里) 68 | wx.switchTab({ 69 | url: '/pages/index/index' 70 | }) 71 | }else{ 72 | that.insertUserInfo(data); 73 | } 74 | }); 75 | //授权成功后，跳转进入小程序首页(展示效果用) 76 | wx.switchTab({ 77 | url: '/pages/index/index' 78 | }) 79 | }, 80 | //获取用户信息接口 81 | queryUsreInfo: function () { 82 | console.log(9999); 83 | util.request(api.AuthUserInfo, { openid: app.globalData.openid}).then(function (res) { 84 | if(res.code === 0){ 85 | app.globalData.userInfo = res.data; 86 | } 87 | }) 88 | }, 89 | 90 | }) 91 | -------------------------------------------------------------------------------- /utils/iconfont.wxss: -------------------------------------------------------------------------------- 1 | @font-face {font-family: "iconfont"; 2 | src: url('//at.alicdn.com/t/font_499403_1qmnkg4mo7y.eot?t=1533293081372'); /* IE9*/ 3 | src: url('//at.alicdn.com/t/font_499403_1qmnkg4mo7y.eot?t=1533293081372#iefix') format('embedded-opentype'), /* IE6-IE8 */ 4 | url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAVcAAsAAAAAB7gAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFZW7kgGY21hcAAAAYAAAABeAAABhpmoBr5nbHlmAAAB4AAAAYsAAAGgAO7thmhlYWQAAANsAAAALwAAADYSM+ooaGhlYQAAA5wAAAAcAAAAJAfeA4RobXR4AAADuAAAAAwAAAAMC+kAAGxvY2EAAAPEAAAACAAAAAgAdgDQbWF4cAAAA8wAAAAfAAAAIAESAF1uYW1lAAAD7AAAAUUAAAJtPlT+fXBvc3QAAAU0AAAAJQAAADbd5lfqeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2Bk/sE4gYGVgYOpk+kMAwNDP4RmfM1gxMjBwMDEwMrMgBUEpLmmMDgwVDyTYW7438AQw9zA0AAUZgTJAQAlcAyIeJzFkMENgDAMAy9t6QMxQgfgwUC8mKMTd41iQnkwQS05VhxLiQIsQBQPMYFdGA9OueZ+ZHU/eSZLjUBtpXf1nyqiWXYNKplpsHmr/9i87qPTV6iDOrGVl4QblV8L/wAAeJwdkDtv1EAUhe+dwWPvxo9dj1/jzT68jj2JkqyM7TgSEVkJ0SyKEFGqVBElBYhuG6I8JCSKFBRUKaNI+QMp06TPD6BF0FDS0WDwcnSl8x3pNOeCAvD3G72jAXBYhcfwHF4BIFvHsUn6GMlyQtbRjRTXd0wqYxmp8XhCn6I/Zo6XV2XqM5VZaOIAiyiv5IRI3Cp3yQ7mXh9R9MIDO1m26WdsB3LwsX5BrtAdxsvW7mY925g6+Yhrc922hW1faExRNEIeWSa+9b2W0mqz+lqxQvduuEaGqAsZ7h0ao579+lP5rp/4LcTTU+S9kXkz7Ybd5j6EHreF2jG0IDTiFQfnP5YCrvfT79CINlt/0nvyG1ZgE54AJGM1SptNPJKxW/hc9U10B5hX26Us2H8qU2WCZZV7DlvAdrFVFYtA6tCpH1yh4tfzP29eXp4820HNEZjNMmS/2MKzeo8LkQqBx1zoVO826YthTPH2fXFUz3F/aTVIsizpWFan8Vl2hot2Kpq3JQZtNwT/AHE2RDIAeJxjYGRgYADiift398Tz23xl4GZhAIHrXcGSCPr/QxYGZgkgl4OBCSQKADA+CesAeJxjYGRgYG7438AQw8IAAkCSkQEVMAMARwkCbAQAAAAD6QAABAAAAAAAAAAAdgDQeJxjYGRgYGBmCGRgZQABJiDmAkIGhv9gPgMAEPcBcAB4nGWPTU7DMBCFX/oHpBKqqGCH5AViASj9EatuWFRq911036ZOmyqJI8et1ANwHo7ACTgC3IA78EgnmzaWx9+8eWNPANzgBx6O3y33kT1cMjtyDRe4F65TfxBukF+Em2jjVbhF/U3YxzOmwm10YXmD17hi9oR3YQ8dfAjXcI1P4Tr1L+EG+Vu4iTv8CrfQ8erCPuZeV7iNRy/2x1YvnF6p5UHFockikzm/gple75KFrdLqnGtbxCZTg6BfSVOdaVvdU+zXQ+ciFVmTqgmrOkmMyq3Z6tAFG+fyUa8XiR6EJuVYY/62xgKOcQWFJQ6MMUIYZIjK6Og7VWb0r7FDwl57Vj3N53RbFNT/c4UBAvTPXFO6stJ5Ok+BPV8bUnV0K27LnpQ0kV7NSRKyQl7WtlRC6gE2ZVeOEXpc0Yk/KGdI/wAJWm7IAAAAeJxjYGKAAC4G7ICZkYmRmZGFgbGCIz2/tLw0OSOVgQEAH8MEBAAAAA==') format('woff'), 5 | url('//at.alicdn.com/t/font_499403_1qmnkg4mo7y.ttf?t=1533293081372') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ 6 | url('//at.alicdn.com/t/font_499403_1qmnkg4mo7y.svg?t=1533293081372#iconfont') format('svg'); /* iOS 4.1- */ 7 | } 8 | 9 | .iconfont { 10 | font-family:"iconfont" !important; 11 | font-size:16px; 12 | font-style:normal; 13 | -webkit-font-smoothing: antialiased; 14 | -moz-osx-font-smoothing: grayscale; 15 | } 16 | 17 | .icon-gouwuche:before { content: "\e61c"; } -------------------------------------------------------------------------------- /utils/util.js: -------------------------------------------------------------------------------- 1 | var api = require('../config/api.js'); 2 | const formatTime = date => { 3 | const year = date.getFullYear() 4 | const month = date.getMonth() + 1 5 | const day = date.getDate() 6 | const hour = date.getHours() 7 | const minute = date.getMinutes() 8 | const second = date.getSeconds() 9 | 10 | return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':') 11 | } 12 | 13 | const formatNumber = n => { 14 | n = n.toString() 15 | return n[1] ? n : '0' + n 16 | } 17 | 18 | /** 19 | * 封封微信的的request 20 | */ 21 | function request(url, data = {}, method = "GET") { 22 | return new Promise(function (resolve, reject) { 23 | wx.request({ 24 | url: url, 25 | data: data, 26 | method: method, 27 | header: { 28 | 'Content-Type': 'application/json', 29 | //请求头可以携带Token 30 | 'Authorization': wx.getStorageSync('token') 31 | }, 32 | success: function (res) { 33 | if (res.statusCode == 200) { 34 | resolve(res.data); 35 | } else if (res.statusCode == 401) { 36 | //需要登录后才可以操作 37 | let code = null; 38 | return login().then((res) => { 39 | code = res.code; 40 | return getUserInfo(); 41 | }).then((userInfo) => { 42 | //登录远程服务器 43 | request(api.AuthLoginByWeixin, { code: code, userInfo: userInfo }, 'POST').then(res => { 44 | if (res.err === 0) { 45 | //存储用户信息 46 | wx.setStorageSync('userInfo', res.data.userInfo); 47 | wx.setStorageSync('token', res.data.token); 48 | 49 | resolve(res); 50 | } else { 51 | reject(res); 52 | } 53 | }).catch((err) => { 54 | reject(err); 55 | }); 56 | }).catch((err) => { 57 | reject(err); 58 | }) 59 | }else{ 60 | reject(res.errMsg); 61 | } 62 | 63 | }, 64 | fail: function (err) { 65 | reject(err) 66 | console.log("failed") 67 | } 68 | }) 69 | }); 70 | } 71 | 72 | function get(url, data = {}) { 73 | return request(url, data, 'GET') 74 | } 75 | 76 | function post(url, data = {}) { 77 | return request(url, data, 'POST') 78 | } 79 | 80 | /** 81 | * 调用微信登录 82 | */ 83 | function login() { 84 | return new Promise(function (resolve, reject) { 85 | wx.login({ 86 | success: function (res) { 87 | if (res.code) { 88 | resolve(res.code); 89 | } else { 90 | reject(res); 91 | } 92 | }, 93 | fail: function (err) { 94 | reject(err); 95 | } 96 | }); 97 | }); 98 | } 99 | 100 | module.exports = { 101 | formatTime, 102 | request, 103 | get, 104 | post, 105 | } 106 | -------------------------------------------------------------------------------- /pages/index/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | {{userInfo.nickName}} 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 个人中心 18 | 19 | 20 | 21 | 23 | 24 | 25 | 26 | 27 | 我的订单 28 | 29 | 30 | 31 | 33 | 34 | 35 | 36 | 37 | 商品收藏 38 | 39 | 40 | 41 | 43 | 44 | 45 | 46 | 47 | 我的足迹 48 | 49 | 50 | 51 | 53 | 54 | 55 | 56 | 57 | 关于本程序 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /pages/advert/advert.js: -------------------------------------------------------------------------------- 1 | const app = getApp(); 2 | var api = require('../../config/api.js'); 3 | var util = require('../../utils/util.js'); 4 | // pages/advert/advert.js 5 | Page({ 6 | 7 | /** 8 | * 页面的初始数据 9 | */ 10 | data: { 11 | countdown: 5, 12 | time: '', 13 | status: 1 14 | }, 15 | 16 | /** 17 | * 生命周期函数--监听页面加载 18 | */ 19 | onLoad: function (options) { 20 | var that = this; 21 | // 登录 22 | wx.login({ 23 | success: res => { 24 | if (res.errMsg === 'login:ok') { 25 | wx.request({ 26 | //由于onLaunch事件加载比较早，所以此处不能使用api组件 27 | // 发送 res.code 到后台换取 openId, sessionKey, unionId 28 | url: api.AuthLogin, 29 | data: { 30 | js_code: res.code, 31 | }, 32 | method: 'POST', 33 | header: { 34 | 'content-type': 'application/json' 35 | }, 36 | success: function (res) { 37 | if (res.data.code == 0) { 38 | wx.setStorage({ 39 | key: "token", 40 | data: res.data.data.token, 41 | }); 42 | app.globalData.openid = res.data.data.openid; 43 | } 44 | } 45 | }); 46 | } else { 47 | //刷新页面 48 | that.onload(); 49 | } 50 | 51 | } 52 | }); 53 | // 获取用户信息 54 | wx.getSetting({ 55 | success: res => { 56 | if (res.authSetting['scope.userInfo']) { 57 | // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框 58 | wx.getUserInfo({ 59 | success: res => { 60 | // 可以将 res 发送给后台解码出 unionId 61 | app.globalData.userInfo = res.userInfo; 62 | that.setData({ 63 | status: 2 64 | }) 65 | } 66 | }) 67 | } else { 68 | that.setData({ 69 | status: 3 70 | }) 71 | } 72 | } 73 | }) 74 | }, 75 | 76 | /** 77 | * 生命周期函数--监听页面初次渲染完成 78 | */ 79 | onReady: function () { 80 | var that = this; 81 | var time1 = setInterval(function () { 82 | that.setData({ 83 | countdown: that.data.countdown - 1 84 | }) 85 | if (that.data.countdown == 0) { 86 | clearInterval(time1); 87 | if(that.data.status == 2){ 88 | wx.reLaunch({ 89 | url: '/pages/index/index', 90 | }) 91 | }else{ 92 | wx.reLaunch({ 93 | url: '/pages/authorize/authorize', 94 | }) 95 | } 96 | } 97 | },1000); 98 | that.setData({ 99 | time: time1 100 | }) 101 | }, 102 | 103 | // 跳过广告 104 | skip:function(e){ 105 | clearInterval(this.data.time); 106 | if (this.data.status == 2) { 107 | wx.reLaunch({ 108 | url: '/pages/index/index', 109 | }) 110 | } else { 111 | wx.reLaunch({ 112 | url: '/pages/authorize/authorize', 113 | }) 114 | } 115 | }, 116 | /** 117 | * 生命周期函数--监听页面显示 118 | */ 119 | onShow: function () { 120 | 121 | }, 122 | 123 | /** 124 | * 生命周期函数--监听页面隐藏 125 | */ 126 | onHide: function () { 127 | 128 | }, 129 | 130 | /** 131 | * 生命周期函数--监听页面卸载 132 | */ 133 | onUnload: function () { 134 | 135 | }, 136 | 137 | /** 138 | * 页面相关事件处理函数--监听用户下拉动作 139 | */ 140 | onPullDownRefresh: function () { 141 | 142 | }, 143 | 144 | /** 145 | * 页面上拉触底事件的处理函数 146 | */ 147 | onReachBottom: function () { 148 | 149 | }, 150 | 151 | /** 152 | * 用户点击右上角分享 153 | */ 154 | onShareAppMessage: function () { 155 | 156 | } 157 | }) -------------------------------------------------------------------------------- /utils/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 | .weui-loading.weui-loading_transparent { 676 | background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Cpath fill='none' d='M0 0h100v100H0z'/%3E%3Crect xmlns='http://www.w3.org/2000/svg' width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.56)' rx='5' ry='5' transform='translate(0 -30)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.5)' rx='5' ry='5' transform='rotate(30 105.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.43)' rx='5' ry='5' transform='rotate(60 75.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.38)' rx='5' ry='5' transform='rotate(90 65 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.32)' rx='5' ry='5' transform='rotate(120 58.66 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.28)' rx='5' ry='5' transform='rotate(150 54.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.25)' rx='5' ry='5' transform='rotate(180 50 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.2)' rx='5' ry='5' transform='rotate(-150 45.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.17)' rx='5' ry='5' transform='rotate(-120 41.34 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.14)' rx='5' ry='5' transform='rotate(-90 35 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.1)' rx='5' ry='5' transform='rotate(-60 24.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.03)' rx='5' ry='5' transform='rotate(-30 -5.98 65)'/%3E%3C/svg%3E"); 677 | } 678 | @-webkit-keyframes weuiLoading { 679 | 0% { 680 | -webkit-transform: rotate3d(0, 0, 1, 0deg); 681 | transform: rotate3d(0, 0, 1, 0deg); 682 | } 683 | 100% { 684 | -webkit-transform: rotate3d(0, 0, 1, 360deg); 685 | transform: rotate3d(0, 0, 1, 360deg); 686 | } 687 | } 688 | @keyframes weuiLoading { 689 | 0% { 690 | -webkit-transform: rotate3d(0, 0, 1, 0deg); 691 | transform: rotate3d(0, 0, 1, 0deg); 692 | } 693 | 100% { 694 | -webkit-transform: rotate3d(0, 0, 1, 360deg); 695 | transform: rotate3d(0, 0, 1, 360deg); 696 | } 697 | } 698 | .weui-badge { 699 | display: inline-block; 700 | padding: .15em .4em; 701 | min-width: 8px; 702 | border-radius: 18px; 703 | background-color: #E64340; 704 | color: #FFFFFF; 705 | line-height: 1.2; 706 | text-align: center; 707 | font-size: 12px; 708 | vertical-align: middle; 709 | } 710 | .weui-badge_dot { 711 | padding: .4em; 712 | min-width: 0; 713 | } 714 | .weui-loadmore { 715 | width: 65%; 716 | margin: 1.5em auto; 717 | line-height: 1.6em; 718 | font-size: 14px; 719 | text-align: center; 720 | } 721 | .weui-loadmore__tips { 722 | display: inline-block; 723 | vertical-align: middle; 724 | } 725 | .weui-loadmore_line { 726 | border-top: 1px solid #E5E5E5; 727 | margin-top: 2.4em; 728 | } 729 | .weui-loadmore__tips_in-line { 730 | position: relative; 731 | top: -0.9em; 732 | padding: 0 .55em; 733 | background-color: #FFFFFF; 734 | color: #999999; 735 | } 736 | .weui-loadmore__tips_in-dot { 737 | position: relative; 738 | padding: 0 .16em; 739 | width: 4px; 740 | height: 1.6em; 741 | } 742 | .weui-loadmore__tips_in-dot:before { 743 | content: " "; 744 | position: absolute; 745 | top: 50%; 746 | left: 50%; 747 | margin-top: -1px; 748 | margin-left: -2px; 749 | width: 4px; 750 | height: 4px; 751 | border-radius: 50%; 752 | background-color: #E5E5E5; 753 | } 754 | .weui-panel { 755 | background-color: #FFFFFF; 756 | margin-top: 10px; 757 | position: relative; 758 | overflow: hidden; 759 | } 760 | .weui-panel:first-child { 761 | margin-top: 0; 762 | } 763 | .weui-panel:before { 764 | content: " "; 765 | position: absolute; 766 | left: 0; 767 | top: 0; 768 | right: 0; 769 | height: 1px; 770 | border-top: 1rpx solid #E5E5E5; 771 | color: #E5E5E5; 772 | } 773 | .weui-panel:after { 774 | content: " "; 775 | position: absolute; 776 | left: 0; 777 | bottom: 0; 778 | right: 0; 779 | height: 1px; 780 | border-bottom: 1rpx solid #E5E5E5; 781 | color: #E5E5E5; 782 | } 783 | .weui-panel__hd { 784 | padding: 14px 15px 10px; 785 | color: #999999; 786 | font-size: 13px; 787 | position: relative; 788 | } 789 | .weui-panel__hd:after { 790 | content: " "; 791 | position: absolute; 792 | left: 0; 793 | bottom: 0; 794 | right: 0; 795 | height: 1px; 796 | border-bottom: 1rpx solid #E5E5E5; 797 | color: #E5E5E5; 798 | left: 15px; 799 | } 800 | .weui-media-box { 801 | padding: 15px; 802 | position: relative; 803 | } 804 | .weui-media-box:before { 805 | content: " "; 806 | position: absolute; 807 | left: 0; 808 | top: 0; 809 | right: 0; 810 | height: 1px; 811 | border-top: 1rpx solid #E5E5E5; 812 | color: #E5E5E5; 813 | left: 15px; 814 | } 815 | .weui-media-box:first-child:before { 816 | display: none; 817 | } 818 | .weui-media-box__title { 819 | font-weight: 400; 820 | font-size: 17px; 821 | width: auto; 822 | overflow: hidden; 823 | text-overflow: ellipsis; 824 | white-space: nowrap; 825 | word-wrap: normal; 826 | word-wrap: break-word; 827 | word-break: break-all; 828 | } 829 | .weui-media-box__desc { 830 | color: #999999; 831 | font-size: 13px; 832 | line-height: 1.2; 833 | overflow: hidden; 834 | text-overflow: ellipsis; 835 | display: -webkit-box; 836 | -webkit-box-orient: vertical; 837 | -webkit-line-clamp: 2; 838 | } 839 | .weui-media-box__info { 840 | margin-top: 15px; 841 | padding-bottom: 5px; 842 | font-size: 13px; 843 | color: #CECECE; 844 | line-height: 1em; 845 | list-style: none; 846 | overflow: hidden; 847 | } 848 | .weui-media-box__info__meta { 849 | float: left; 850 | padding-right: 1em; 851 | } 852 | .weui-media-box__info__meta_extra { 853 | padding-left: 1em; 854 | border-left: 1px solid #CECECE; 855 | } 856 | .weui-media-box__title_in-text { 857 | margin-bottom: 8px; 858 | } 859 | .weui-media-box_appmsg { 860 | display: -webkit-box; 861 | display: -webkit-flex; 862 | display: flex; 863 | -webkit-box-align: center; 864 | -webkit-align-items: center; 865 | align-items: center; 866 | } 867 | .weui-media-box__thumb { 868 | width: 100%; 869 | height: 100%; 870 | vertical-align: top; 871 | } 872 | .weui-media-box__hd_in-appmsg { 873 | margin-right: .8em; 874 | width: 60px; 875 | height: 60px; 876 | line-height: 60px; 877 | text-align: center; 878 | } 879 | .weui-media-box__bd_in-appmsg { 880 | -webkit-box-flex: 1; 881 | -webkit-flex: 1; 882 | flex: 1; 883 | min-width: 0; 884 | } 885 | .weui-media-box_small-appmsg { 886 | padding: 0; 887 | } 888 | .weui-cells_in-small-appmsg { 889 | margin-top: 0; 890 | } 891 | .weui-cells_in-small-appmsg:before { 892 | display: none; 893 | } 894 | .weui-progress { 895 | display: -webkit-box; 896 | display: -webkit-flex; 897 | display: flex; 898 | -webkit-box-align: center; 899 | -webkit-align-items: center; 900 | align-items: center; 901 | } 902 | .weui-progress__bar { 903 | -webkit-box-flex: 1; 904 | -webkit-flex: 1; 905 | flex: 1; 906 | } 907 | .weui-progress__opr { 908 | margin-left: 15px; 909 | font-size: 0; 910 | } 911 | .weui-navbar { 912 | display: -webkit-box; 913 | display: -webkit-flex; 914 | display: flex; 915 | position: absolute; 916 | z-index: 500; 917 | top: 0; 918 | width: 100%; 919 | border-bottom: 1rpx solid #CCCCCC; 920 | } 921 | .weui-navbar__item { 922 | position: relative; 923 | display: block; 924 | -webkit-box-flex: 1; 925 | -webkit-flex: 1; 926 | flex: 1; 927 | padding: 13px 0; 928 | text-align: center; 929 | font-size: 0; 930 | } 931 | .weui-navbar__item.weui-bar__item_on { 932 | color: #1AAD19; 933 | } 934 | .weui-navbar__slider { 935 | position: absolute; 936 | content: " "; 937 | left: 0; 938 | bottom: 0; 939 | width: 6em; 940 | height: 3px; 941 | background-color: #1AAD19; 942 | -webkit-transition: -webkit-transform .3s; 943 | transition: -webkit-transform .3s; 944 | transition: transform .3s; 945 | transition: transform .3s, -webkit-transform .3s; 946 | } 947 | .weui-navbar__title { 948 | display: inline-block; 949 | font-size: 15px; 950 | max-width: 8em; 951 | width: auto; 952 | overflow: hidden; 953 | text-overflow: ellipsis; 954 | white-space: nowrap; 955 | word-wrap: normal; 956 | } 957 | .weui-tab { 958 | position: relative; 959 | height: 100%; 960 | } 961 | .weui-tab__panel { 962 | box-sizing: border-box; 963 | height: 100%; 964 | padding-top: 50px; 965 | overflow: auto; 966 | -webkit-overflow-scrolling: touch; 967 | } 968 | .weui-search-bar { 969 | position: relative; 970 | padding: 8px 10px; 971 | display: -webkit-box; 972 | display: -webkit-flex; 973 | display: flex; 974 | box-sizing: border-box; 975 | background-color: #EFEFF4; 976 | border-top: 1rpx solid #D7D6DC; 977 | border-bottom: 1rpx solid #D7D6DC; 978 | } 979 | .weui-icon-search { 980 | margin-right: 8px; 981 | font-size: inherit; 982 | } 983 | .weui-icon-search_in-box { 984 | position: absolute; 985 | left: 10px; 986 | top: 7px; 987 | } 988 | .weui-search-bar__text { 989 | display: inline-block; 990 | font-size: 14px; 991 | vertical-align: middle; 992 | } 993 | .weui-search-bar__form { 994 | position: relative; 995 | -webkit-box-flex: 1; 996 | -webkit-flex: auto; 997 | flex: auto; 998 | border-radius: 5px; 999 | background: #FFFFFF; 1000 | border: 1rpx solid #E6E6EA; 1001 | } 1002 | .weui-search-bar__box { 1003 | position: relative; 1004 | padding-left: 30px; 1005 | padding-right: 30px; 1006 | width: 100%; 1007 | box-sizing: border-box; 1008 | z-index: 1; 1009 | } 1010 | .weui-search-bar__input { 1011 | height: 28px; 1012 | line-height: 28px; 1013 | font-size: 14px; 1014 | } 1015 | .weui-icon-clear { 1016 | position: absolute; 1017 | top: 0; 1018 | right: 0; 1019 | padding: 7px 8px; 1020 | font-size: 0; 1021 | } 1022 | .weui-search-bar__label { 1023 | position: absolute; 1024 | top: 0; 1025 | right: 0; 1026 | bottom: 0; 1027 | left: 0; 1028 | z-index: 2; 1029 | border-radius: 3px; 1030 | text-align: center; 1031 | color: #9B9B9B; 1032 | background: #FFFFFF; 1033 | line-height: 28px; 1034 | } 1035 | .weui-search-bar__cancel-btn { 1036 | margin-left: 10px; 1037 | line-height: 28px; 1038 | color: #09BB07; 1039 | white-space: nowrap; 1040 | } 1041 | --------------------------------------------------------------------------------