├── README.md ├── _PHP端 └── index.php ├── _效果图 ├── code.jpg ├── 说明书.html ├── 页1.jpg ├── 页2.jpg └── 页3.jpg ├── _说明书.html ├── app.js ├── app.json ├── app.wxss ├── code.jpg ├── pages ├── cha │ ├── cha.js │ ├── cha.json │ ├── cha.wxml │ └── cha.wxss ├── des │ ├── des.js │ ├── des.json │ ├── des.wxml │ └── des.wxss ├── index │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss └── xun │ ├── xun.js │ ├── xun.json │ ├── xun.wxml │ └── xun.wxss ├── source ├── icon │ ├── stop-selected.png │ └── stop.png └── weui.wxss └── weui.wxss /README.md: -------------------------------------------------------------------------------- 1 | # 域名信息查询小程序完整源码 2 | 域名信息查询小工具 - 完整源码(小程序+php) 主要功能：域名解析记录查询 3 | A记录：将域名指向一个IPv4地址（例如：10.10.10.10），需要增加A记录 4 | CNAME记录：如果将域名指向一个域名，实现与被指向域名相同的访问效果，需要增加CNAME记录 5 | MX记录：建立电子邮箱服务，将指向邮件服务器地址，需要设置MX记录 6 | NS记录：域名解析服务器记录，如果要将子域名指定某个域名服务器来解析，需要设置NS记录 7 | TXT记录：可任意填写（可为空），通常用做SPF记录（反垃圾邮件）使用 8 | AAAA记录：将主机名（或域名）指向一个IPv6地址（例如：ff03:0:0:0:0:0:0:c1），需要添加AAAA记录 9 | SRV记录：记录了哪台计算机提供了哪个服务。格式为：服务的名字.协议的类型（例如：_example-server._tcp） -------------------------------------------------------------------------------- /_PHP端/index.php: -------------------------------------------------------------------------------- 1 | $v) { 17 | if(!is_array($v)) { 18 | $ii++; 19 | $jsjs[$ii]["name"] = $k; 20 | $jsjs[$ii]["value"] = $v; 21 | }else{ 22 | $ss++; 23 | $jsjs["name"] = $k; 24 | if(is_array($v)) { 25 | $jsjs["list"][$ss] = lijson($v); 26 | } 27 | } 28 | } 29 | return $jsjs; 30 | } 31 | 32 | $t=isset($_GET['t'])?$_GET['t']:"er"; 33 | $t = strtolower(trim($t)); 34 | //$tips = tishi("10001", $temes, "参数t缺失(类型)"); 35 | //if($t=="er" || $t=="") exit($tips); 36 | 37 | $query=isset($_GET['d'])?$_GET['d']:"er"; 38 | $query=strtolower(trim($query)); 39 | 40 | if($t=="er" && $t==""){ 41 | $tips = tishi("10002", $temes, "参数d缺失(域名)"); 42 | if($query=="er" || $query=="") exit($tips); 43 | } 44 | 45 | /* 46 | A记录：将域名指向一个IPv4地址（例如：10.10.10.10），需要增加A记录 47 | CNAME记录：如果将域名指向一个域名，实现与被指向域名相同的访问效果，需要增加CNAME记录 48 | MX记录：建立电子邮箱服务，将指向邮件服务器地址，需要设置MX记录 49 | NS记录：域名解析服务器记录，如果要将子域名指定某个域名服务器来解析，需要设置NS记录 50 | TXT记录：可任意填写（可为空），通常用做SPF记录（反垃圾邮件）使用 51 | AAAA记录：将主机名（或域名）指向一个IPv6地址（例如：ff03:0:0:0:0:0:0:c1），需要添加AAAA记录 52 | SRV记录：记录了哪台计算机提供了哪个服务。格式为：服务的名字.协议的类型（例如：_example-server._tcp） 53 | */ 54 | 55 | switch($t){ 56 | 57 | case 'ns': //=== NS记录 ===// 58 | /* 59 | $CACHE["status"] = "10000"; 60 | $CACHE["msg"] = "ok"; 61 | $CACHE["times"] = $temes; 62 | $CACHE["types"] = "NS记录：域名解析服务器记录"; 63 | */ 64 | 65 | $CACHE = dns_get_record($query, DNS_NS); 66 | if($CACHE){ 67 | echo json_encode(lijson($CACHE)); 68 | }else{ 69 | $tips = tishi("10002", $temes, "未查询到结果"); 70 | exit($tips); 71 | } 72 | break; 73 | 74 | case 'a': //=== A记录 ===// 75 | $CACHE = dns_get_record($query, DNS_A); 76 | if($CACHE){ 77 | echo json_encode(lijson($CACHE)); 78 | }else{ 79 | $tips = tishi("10002", $temes, "未查询到结果"); 80 | exit($tips); 81 | } 82 | break; 83 | 84 | case 'aaaa'://=== AAAA记录 ===// 85 | $CACHE = dns_get_record($query, DNS_AAAA); 86 | if($CACHE){ 87 | echo json_encode(lijson($CACHE)); 88 | }else{ 89 | $tips = tishi("10002", $temes, "未查询到结果"); 90 | exit($tips); 91 | } 92 | break; 93 | 94 | case 'mx'://=== MX记录 ===// 95 | $CACHE = dns_get_record($query, DNS_MX); 96 | if($CACHE){ 97 | echo json_encode(lijson($CACHE)); 98 | }else{ 99 | $tips = tishi("10002", $temes, "未查询到结果"); 100 | exit($tips); 101 | } 102 | break; 103 | 104 | case 'cname'://=== CNAME记录 ===// 105 | $CACHE = dns_get_record($query, DNS_CNAME); 106 | if($CACHE){ 107 | echo json_encode(lijson($CACHE)); 108 | }else{ 109 | $tips = tishi("10002", $temes, "未查询到结果"); 110 | exit($tips); 111 | } 112 | break; 113 | 114 | case 'txt'://=== TXT记录 ===// 115 | $CACHE = dns_get_record($query, DNS_TXT); 116 | if($CACHE){ 117 | echo json_encode(lijson($CACHE)); 118 | }else{ 119 | $tips = tishi("10002", $temes, "未查询到结果"); 120 | exit($tips); 121 | } 122 | break; 123 | 124 | case 'srv'://=== SRV记录 ===// 125 | $CACHE = dns_get_record($query, DNS_SRV); 126 | if($CACHE){ 127 | echo json_encode(lijson($CACHE)); 128 | }else{ 129 | $tips = tishi("10002", $temes, "未查询到结果"); 130 | exit($tips); 131 | } 132 | break; 133 | 134 | /*更多查询请自行添加*/ 135 | 136 | default: 137 | $CACHE["status"] = "10000"; 138 | $CACHE["msg"] = "ok"; 139 | $CACHE["times"] = $temes; 140 | $CACHE["types"] = "列出查询"; 141 | 142 | $CACHE["item"]["1"]["types"] = "a"; 143 | $CACHE["item"]["1"]["nrong"] = "A记录"; 144 | $CACHE["item"]["2"]["types"] = "aaaa"; 145 | $CACHE["item"]["2"]["nrong"] = "AAAA记录"; 146 | $CACHE["item"]["3"]["types"] = "cname"; 147 | $CACHE["item"]["3"]["nrong"] = "CNAME记录"; 148 | $CACHE["item"]["4"]["types"] = "mx"; 149 | $CACHE["item"]["4"]["nrong"] = "MX记录"; 150 | $CACHE["item"]["5"]["types"] = "txt"; 151 | $CACHE["item"]["5"]["nrong"] = "TXT记录"; 152 | $CACHE["item"]["6"]["types"] = "ns"; 153 | $CACHE["item"]["6"]["nrong"] = "NS记录"; 154 | $CACHE["item"]["7"]["types"] = "srv"; 155 | $CACHE["item"]["7"]["nrong"] = "SRV记录"; 156 | $tips = json_encode($CACHE); 157 | exit($tips); 158 | break; 159 | } 160 | 161 | ?> -------------------------------------------------------------------------------- /_效果图/code.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/echafen/DomainCha/e18d1e56dbb5929fe9692c55f285e2c86ddcd8d7/_效果图/code.jpg -------------------------------------------------------------------------------- /_效果图/说明书.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/echafen/DomainCha/e18d1e56dbb5929fe9692c55f285e2c86ddcd8d7/_效果图/说明书.html -------------------------------------------------------------------------------- /_效果图/页1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/echafen/DomainCha/e18d1e56dbb5929fe9692c55f285e2c86ddcd8d7/_效果图/页1.jpg -------------------------------------------------------------------------------- /_效果图/页2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/echafen/DomainCha/e18d1e56dbb5929fe9692c55f285e2c86ddcd8d7/_效果图/页2.jpg -------------------------------------------------------------------------------- /_效果图/页3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/echafen/DomainCha/e18d1e56dbb5929fe9692c55f285e2c86ddcd8d7/_效果图/页3.jpg -------------------------------------------------------------------------------- /_说明书.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/echafen/DomainCha/e18d1e56dbb5929fe9692c55f285e2c86ddcd8d7/_说明书.html -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | 2 | App({ 3 | 4 | onLaunch: function(options) {}, 5 | 6 | onShow: function(options) {}, 7 | 8 | onHide: function() {}, 9 | 10 | onError: function(msg) { 11 | console.log(msg); 12 | }, 13 | 14 | }); 15 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": [ 3 | "pages/index/index", 4 | "pages/cha/cha", 5 | "pages/xun/xun", 6 | "pages/des/des" 7 | ], 8 | 9 | "window": { 10 | "navigationBarBackgroundColor": "#0099ff", 11 | "navigationBarTextStyle": "white", 12 | "backgroundColor": "#f8f8f8", 13 | "navigationBarTitleText": "查询标题!" 14 | }, 15 | 16 | "tabBar": { 17 | "list": [{ 18 | "pagePath": "pages/index/index", 19 | "text": "解析查询", 20 | "iconPath": "/source/icon/stop.png", 21 | "selectedIconPath": "/source/icon/stop-selected.png" 22 | }, { 23 | "pagePath": "pages/des/des", 24 | "text": "关于我们", 25 | "iconPath": "/source/icon/stop.png", 26 | "selectedIconPath": "/source/icon/stop-selected.png" 27 | }], 28 | "selectedColor": "#0099ff", 29 | "borderStyle": "black" 30 | }, 31 | 32 | "networkTimeout": { 33 | "request": 5000 34 | }, 35 | 36 | "debug": false 37 | 38 | } -------------------------------------------------------------------------------- /app.wxss: -------------------------------------------------------------------------------- 1 | @import 'weui.wxss'; 2 | 3 | page { 4 | background-color: #f8f8f8; 5 | font-size: 16px; 6 | font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif; 7 | } 8 | .page__hd { 9 | padding: 40px; 10 | background-color: #0099FF; 11 | color: #FFFFFF; 12 | } 13 | .page__bd { 14 | padding-bottom: 40px; 15 | } 16 | .page__bd_spacing { 17 | padding-left: 15px; 18 | padding-right: 15px; 19 | } 20 | 21 | .page__bd_padding-top { 22 | padding-top: 15px; 23 | } 24 | 25 | .page__ft{ 26 | padding-bottom: 10px; 27 | text-align: center; 28 | } 29 | 30 | .page__title { 31 | text-align: left; 32 | font-size: 20px; 33 | font-weight: 400; 34 | } 35 | 36 | .page__desc { 37 | margin-top: 5px; 38 | color: #FFFFFF; 39 | text-align: left; 40 | font-size: 14px; 41 | } 42 | 43 | button[type="primary"] { 44 | color: #FFFFFF; 45 | background-color: #0099FF; 46 | } 47 | 48 | .button-hover[type="primary"] { 49 | color: rgba(255, 255, 255,0.6); 50 | background-color: #006699; 51 | } 52 | 53 | image.banner { 54 | width: 100%; 55 | height: 198px; 56 | } 57 | 58 | .page__hd_homepage { 59 | padding: 40px; 60 | } 61 | 62 | .page__desc_homepage { 63 | margin-top: 5px; 64 | color: #888888; 65 | text-align: left; 66 | font-size: 14px; 67 | } 68 | 69 | .wrap { 70 | padding-top: 7px; 71 | padding-bottom: 8px; 72 | } 73 | 74 | .text-primary { 75 | color: #1AAD19; 76 | } 77 | 78 | .text-error { 79 | color: #E64340; 80 | } 81 | 82 | .hidden { 83 | display: none; 84 | } -------------------------------------------------------------------------------- /code.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/echafen/DomainCha/e18d1e56dbb5929fe9692c55f285e2c86ddcd8d7/code.jpg -------------------------------------------------------------------------------- /pages/cha/cha.js: -------------------------------------------------------------------------------- 1 | 2 | Page({ 3 | 4 | data: { 5 | tiaojian: null 6 | }, 7 | 8 | onLoad: function (options) { 9 | var instance = this; 10 | instance.loadtiaojian(options.id); 11 | }, 12 | 13 | onReady: function() {}, 14 | 15 | onShow: function (options) { 16 | //var instance = this; 17 | //instance.loadtiaojian(options.id); 18 | }, 19 | 20 | onHide: function() {}, 21 | 22 | onUnload: function() {}, 23 | 24 | onReachBottom: function() {}, 25 | 26 | onShareAppMessage: function() {}, 27 | 28 | formSubmit: function (e) { 29 | //var value = e.detail.value; 30 | var formData = e.detail.value; 31 | console.log("参数", formData) 32 | var link = '/pages/xun/xun?t=' + formData.t + '&d=' + formData.d; 33 | wx.navigateTo({ url: link }); 34 | }, 35 | 36 | loadtiaojian: function(id) { 37 | var instance = this; 38 | var names = id; 39 | instance.setData({ type: names }); 40 | } 41 | 42 | }); -------------------------------------------------------------------------------- /pages/cha/cha.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "查询页面-域名信息查询小工具" 3 | } -------------------------------------------------------------------------------- /pages/cha/cha.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 域名{{type}}记录查询 7 | 查询该域名的{{type}}解析记录。 8 | 9 | 10 | 11 |
12 | 输入域名查询 13 | 14 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /pages/cha/cha.wxss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/echafen/DomainCha/e18d1e56dbb5929fe9692c55f285e2c86ddcd8d7/pages/cha/cha.wxss -------------------------------------------------------------------------------- /pages/des/des.js: -------------------------------------------------------------------------------- 1 | 2 | Page({ 3 | 4 | onReachBottom: function() {}, 5 | 6 | onShareAppMessage: function() {} 7 | 8 | }); -------------------------------------------------------------------------------- /pages/des/des.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "关于我们-域名信息查询小工具" 3 | } -------------------------------------------------------------------------------- /pages/des/des.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 域名信息查询小工具 V1.3 7 | 可以实时查询域名解析记录情况。包括A记录MX,CNAME,TXT等七八个功能。 8 | 9 | 10 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /pages/des/des.wxss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/echafen/DomainCha/e18d1e56dbb5929fe9692c55f285e2c86ddcd8d7/pages/des/des.wxss -------------------------------------------------------------------------------- /pages/index/index.js: -------------------------------------------------------------------------------- 1 | 2 | Page({ 3 | 4 | data: { 5 | Chaxun: null 6 | }, 7 | 8 | onLoad: function(options) {}, 9 | 10 | onReady: function() {}, 11 | 12 | onShow: function() { 13 | this.loadChaxun(); 14 | }, 15 | 16 | onHide: function() {}, 17 | 18 | onUnload: function() {}, 19 | 20 | onPullDownRefresh: function () { 21 | wx.showToast({ 22 | title: 'loading...', 23 | icon: 'loading' 24 | }) 25 | console.log('onPullDownRefresh', new Date()) 26 | }, 27 | stopPullDownRefresh: function () { 28 | wx.stopPullDownRefresh({ 29 | complete: function (res) { 30 | wx.hideToast() 31 | console.log(res, new Date()) 32 | } 33 | }) 34 | }, 35 | 36 | onReachBottom: function() {}, 37 | 38 | onShareAppMessage: function() {}, 39 | 40 | loadChaxun: function() { 41 | var instance = this; 42 | wx.showLoading({ 43 | title: '查询列表', 44 | mask: false 45 | }); 46 | wx.request({ 47 | url: 'https://api.mabida.com/doma/?t=x', 48 | method: 'GET', 49 | success: function(res) { 50 | instance.setData({ Chaxun: res.data.item}); 51 | }, 52 | fail: function() { 53 | wx.showModal({ 54 | title: '请求超时', 55 | content: '网络不太好，或者服务端出现了故障', 56 | confirmText: '重新加载', 57 | cancelText: '取消', 58 | success: function(res) { 59 | if (res.confirm) { 60 | instance.loadChaxun(); 61 | } 62 | } 63 | }); 64 | }, 65 | complete: function() { 66 | wx.hideLoading(); 67 | } 68 | }); 69 | } 70 | 71 | }); -------------------------------------------------------------------------------- /pages/index/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "首页-域名信息查询小工具" 3 | } -------------------------------------------------------------------------------- /pages/index/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 功能列表 7 | 可以查询域名的以下信息。 8 | 9 | 10 | 11 | 选择查询类型 12 | 13 | 14 | 15 | {{chaxun.nrong}} 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /pages/index/index.wxss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/echafen/DomainCha/e18d1e56dbb5929fe9692c55f285e2c86ddcd8d7/pages/index/index.wxss -------------------------------------------------------------------------------- /pages/xun/xun.js: -------------------------------------------------------------------------------- 1 | 2 | Page({ 3 | 4 | //data: {}, 5 | 6 | onLoad: function(options) { 7 | wx.showLoading({ 8 | title: 'Loading', 9 | mask: true 10 | }); 11 | var instance = this; 12 | var dd = options.d; 13 | var tt = options.t; 14 | 15 | 16 | wx.request({ 17 | url: 'https://api.mabida.com/doma/?t=' + tt + '&d=' + dd , 18 | method: 'GET', 19 | success: function(res) { 20 | instance.setData({ 21 | dd: dd, 22 | tt: tt, 23 | info: res.data.msg, 24 | list: res.data.list, 25 | }); 26 | wx.hideLoading(); 27 | } 28 | }); 29 | }, 30 | 31 | onReady: function() {}, 32 | 33 | onShow: function() {}, 34 | 35 | onHide: function() {}, 36 | 37 | onUnload: function() {}, 38 | 39 | onPullDownRefresh: function () { 40 | wx.showToast({ 41 | title: 'loading...', 42 | icon: 'loading' 43 | }) 44 | console.log('onPullDownRefresh', new Date()) 45 | }, 46 | stopPullDownRefresh: function () { 47 | wx.stopPullDownRefresh({ 48 | complete: function (res) { 49 | wx.hideToast() 50 | console.log(res, new Date()) 51 | } 52 | }) 53 | }, 54 | 55 | onReachBottom: function() {}, 56 | 57 | onShareAppMessage: function() {} 58 | 59 | }); -------------------------------------------------------------------------------- /pages/xun/xun.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "查询结果-域名信息查询小工具" 3 | } -------------------------------------------------------------------------------- /pages/xun/xun.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 查询结果 7 | 域名{{dd}}的{{tt}}记录查询结果 8 | 9 | 10 | 11 | 12 | 结果 13 | 14 | 15 | 16 | {{list.name}} 17 | {{list.value}} 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 未查询到结果 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /pages/xun/xun.wxss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/echafen/DomainCha/e18d1e56dbb5929fe9692c55f285e2c86ddcd8d7/pages/xun/xun.wxss -------------------------------------------------------------------------------- /source/icon/stop-selected.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/echafen/DomainCha/e18d1e56dbb5929fe9692c55f285e2c86ddcd8d7/source/icon/stop-selected.png -------------------------------------------------------------------------------- /source/icon/stop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/echafen/DomainCha/e18d1e56dbb5929fe9692c55f285e2c86ddcd8d7/source/icon/stop.png -------------------------------------------------------------------------------- /source/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 | -------------------------------------------------------------------------------- /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 | --------------------------------------------------------------------------------