From ec50ad8a7b0acce6e05515bdfc55a809be9839aa Mon Sep 17 00:00:00 2001 From: Weilanwl <1273753708@qq.com> Date: Thu, 27 Dec 2018 23:59:12 +0800 Subject: [PATCH] =?UTF-8?q?v2.0.2=20(=E5=8D=95=E4=BD=8D=E5=85=A8=E5=B1=80?= =?UTF-8?q?=E4=BD=BF=E7=94=A8rpx)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit v2.0.2 (单位全局使用rpx) --- demo/pages/basics/home/home.js | 25 +- demo/pages/component/form/form.wxml | 2 +- demo/pages/component/swiper/swiper.js | 2 - demo/pages/include/custom/custom.js | 23 - demo/pages/include/custom/custom.json | 4 - demo/pages/include/custom/custom.wxml | 0 demo/pages/include/custom/custom.wxss | 1 - demo/pages/plugin/home/home.wxss | 30 +- demo/pages/test.js | 17 - demo/pages/test.json | 3 - demo/pages/test.wxml | 13 - demo/pages/test.wxss | 38 - template/app.wxss | 2 +- template/colorui-px.wxss | 2955 ++++++++++++++++++++++++ template/colorui-rpx.wxss | 2969 +++++++++++++++++++++++++ 15 files changed, 5965 insertions(+), 119 deletions(-) delete mode 100644 demo/pages/include/custom/custom.js delete mode 100644 demo/pages/include/custom/custom.json delete mode 100644 demo/pages/include/custom/custom.wxml delete mode 100644 demo/pages/include/custom/custom.wxss delete mode 100644 demo/pages/test.js delete mode 100644 demo/pages/test.json delete mode 100644 demo/pages/test.wxss create mode 100644 template/colorui-px.wxss create mode 100644 template/colorui-rpx.wxss diff --git a/demo/pages/basics/home/home.js b/demo/pages/basics/home/home.js index 1129d51..fdf3a4e 100644 --- a/demo/pages/basics/home/home.js +++ b/demo/pages/basics/home/home.js @@ -12,7 +12,30 @@ Page({ { title: '边框阴影', name: 'shadow', color: 'olive', icon: 'copy' }, { title: '加载', name: 'loading', color: 'green', icon: 'loading2' }, ], - }, + }, + onLoad() { + let that = this; + // 获取用户信息 + wx.getSetting({ + success: res => { + if (!res.authSetting['scope.userInfo']) { + wx.redirectTo({ + url: '/pages/auth/auth' + }) + } + } + }) + }, + showModal(e) { + this.setData({ + modalName: e.currentTarget.dataset.target + }) + }, + hideModal(e) { + this.setData({ + modalName: null + }) + }, onShareAppMessage(){ return { title: 'ColorUI-高颜值的小程序UI组件库', diff --git a/demo/pages/component/form/form.wxml b/demo/pages/component/form/form.wxml index ec68c64..1b92145 100644 --- a/demo/pages/component/form/form.wxml +++ b/demo/pages/component/form/form.wxml @@ -97,8 +97,8 @@ + 定义图标 - 方形开关 diff --git a/demo/pages/component/swiper/swiper.js b/demo/pages/component/swiper/swiper.js index 85964d0..fe22361 100644 --- a/demo/pages/component/swiper/swiper.js +++ b/demo/pages/component/swiper/swiper.js @@ -46,7 +46,6 @@ Page({ // 初始化towerSwiper towerSwiper(name) { let list = this.data[name]; - for (let i = 0; i < list.length; i++) { list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2)) list[i].mLeft = i - parseInt(list.length / 2) @@ -99,6 +98,5 @@ Page({ towerList: list }) } - console.log(list); }, }); \ No newline at end of file diff --git a/demo/pages/include/custom/custom.js b/demo/pages/include/custom/custom.js deleted file mode 100644 index 55f7710..0000000 --- a/demo/pages/include/custom/custom.js +++ /dev/null @@ -1,23 +0,0 @@ -// pages/include/custom/custom.js -Component({ - /** - * 组件的属性列表 - */ - properties: { - - }, - - /** - * 组件的初始数据 - */ - data: { - - }, - - /** - * 组件的方法列表 - */ - methods: { - - } -}) diff --git a/demo/pages/include/custom/custom.json b/demo/pages/include/custom/custom.json deleted file mode 100644 index e8cfaaf..0000000 --- a/demo/pages/include/custom/custom.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "component": true, - "usingComponents": {} -} \ No newline at end of file diff --git a/demo/pages/include/custom/custom.wxml b/demo/pages/include/custom/custom.wxml deleted file mode 100644 index e69de29..0000000 diff --git a/demo/pages/include/custom/custom.wxss b/demo/pages/include/custom/custom.wxss deleted file mode 100644 index 65f5bd3..0000000 --- a/demo/pages/include/custom/custom.wxss +++ /dev/null @@ -1 +0,0 @@ -@import "../../../app.wxss"; \ No newline at end of file diff --git a/demo/pages/plugin/home/home.wxss b/demo/pages/plugin/home/home.wxss index 49bbdc1..d870044 100644 --- a/demo/pages/plugin/home/home.wxss +++ b/demo/pages/plugin/home/home.wxss @@ -1,41 +1,41 @@ bar .content image{ - height: 30px; - width: 120px; + height: 60rpx; + width: 240rpx; } .cardTitle{ color: #fff; - padding: 45px 30px; - font-size: 20px; + padding: 90rpx 60rpx; + font-size: 40rpx; font-weight: 300; transform: skew(-10deg, 0deg); position: relative; - text-shadow: 0px 0px 3px rgba(0,0,0,0.3) + text-shadow: 0px 0px 6rpx rgba(0,0,0,0.3) } .cardTitle::before{ content: ""; position: absolute; - width: 30px; - height: 3px; - border-radius: 10px; + width: 60rpx; + height: 6rpx; + border-radius: 20rpx; background-color: #fff; display: block; - top: 30px; - left: 25px; + top: 60rpx; + left: 50rpx; transform: skew(10deg, 0deg); } .cardTitle::after{ content: ""; position: absolute; - width: 70px; - border-radius: 3px; - height: 12px; + width: 140rpx; + border-radius: 6rpx; + height: 24rpx; background-color: #fff; display: block; - bottom: 38px; - left: 45px; + bottom: 76rpx; + left: 90rpx; transform: skew(10deg, 0deg); opacity: 0.1; } \ No newline at end of file diff --git a/demo/pages/test.js b/demo/pages/test.js deleted file mode 100644 index 14837bf..0000000 --- a/demo/pages/test.js +++ /dev/null @@ -1,17 +0,0 @@ -const app = getApp(); -Page({ - data: { - StatusBar: app.globalData.StatusBar, - CustomBar: app.globalData.CustomBar, - ColorList: app.globalData.ColorList, - scrollLeft: 0, - TabCur: 0, - }, - tabSelect(e) { - console.log(e); - this.setData({ - TabCur: e.currentTarget.dataset.id, - scrollLeft: (e.currentTarget.dataset.id - 1) * 60 - }) - }, -}); diff --git a/demo/pages/test.json b/demo/pages/test.json deleted file mode 100644 index 8835af0..0000000 --- a/demo/pages/test.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "usingComponents": {} -} \ No newline at end of file diff --git a/demo/pages/test.wxml b/demo/pages/test.wxml index d0871f4..e69de29 100644 --- a/demo/pages/test.wxml +++ b/demo/pages/test.wxml @@ -1,13 +0,0 @@ - - - - 测试 - - - - - - - 测试页 - - diff --git a/demo/pages/test.wxss b/demo/pages/test.wxss deleted file mode 100644 index ed90687..0000000 --- a/demo/pages/test.wxss +++ /dev/null @@ -1,38 +0,0 @@ -.ABox { - color: #666; - padding: 15px; - border-radius: 6px; - width: 45%; - margin: 0 2.5% 20px; - background-image: url(https://image.weilanwl.com/color2.0/cardBg.png); - background-size: cover; - background-position: center; - position: relative; - z-index: 1; -} - -.ABox::after { - content: ""; - position: absolute; - z-index: -1; - background-color: inherit; - width: 100%; - height: 100%; - left: 0; - bottom: -10%; - border-radius: 5px; - opacity: 0.2; - transform: scale(0.9, 0.9); -} -.Box { - color: #666; - padding: 15px; - border-radius: 6px; - width: 45%; - margin: 0 2.5% 20px; - background-image: url(https://image.weilanwl.com/color2.0/cardBg.png); - background-size: cover; - background-position: center; - position: relative; - z-index: 1; -} \ No newline at end of file diff --git a/template/app.wxss b/template/app.wxss index d4433aa..00de099 100644 --- a/template/app.wxss +++ b/template/app.wxss @@ -1,2 +1,2 @@ @import "icon.wxss"; -@import "colorui.wxss"; +@import "colorui-rpx.wxss"; diff --git a/template/colorui-px.wxss b/template/colorui-px.wxss new file mode 100644 index 0000000..2fef154 --- /dev/null +++ b/template/colorui-px.wxss @@ -0,0 +1,2955 @@ +/* + Color UI v2.0.2 | by 文晓港 + 单位为多种混合(px,rpx,vw,vh,em) + 仅供学习交流，如作它用所承受的法律责任一概与作者无关 + （QQ交流群：240787041） + 文档：http://www.color-ui.com/ +*/ + +/* ================== + 初始化 + ==================== */ + +page { + background: #f1f1f1; + font-size: 14px; + color: #333; + line-height: 1; + font-family: Helvetica Neue, Helvetica, sans-serif; +} + +view, text, custom, tag, capsule, scroll-view, swiper, button, timeline, form, +form-group, info, bar, progress-bar, input, textarea, label, navigator, list, +item, chat, image { + box-sizing: border-box; +} + +/* ================== + 布局 + ==================== */ + +/* -- flex弹性布局 -- */ + +.flex { + display: flex; +} + +.basis-xs { + flex-basis: 20%; +} + +.basis-sm { + flex-basis: 40%; +} + +.basis-df { + flex-basis: 50%; +} + +.basis-lg { + flex-basis: 60%; +} + +.basis-xl { + flex-basis: 80%; +} + +.flex-sub { + flex: 1; +} + +.flex-twice { + flex: 2; +} + +.flex-treble { + flex: 3; +} + +.flex-direction { + flex-direction: column; +} + +.flex-wrap { + flex-wrap: wrap; +} + +.align-start { + align-items: flex-start; +} + +.align-end { + align-items: flex-end; +} + +.align-center { + align-items: center; +} + +.align-stretch { + align-items: stretch; +} + +.self-start { + align-self: flex-start; +} + +.self-center { + align-self: flex-center; +} + +.self-end { + align-self: flex-end; +} + +.self-stretch { + align-self: stretch; +} + +.align-stretch { + align-items: stretch; +} + +.justify-start { + justify-content: flex-start; +} + +.justify-end { + justify-content: flex-end; +} + +.justify-center { + justify-content: center; +} + +.justify-between { + justify-content: space-between; +} + +.justify-around { + justify-content: space-around; +} + +/* grid布局 */ + +.grid { + display: flex; + flex-wrap: wrap; +} + +.grid.grid-square { + margin-bottom: -10px; + overflow: hidden; +} + +.grid.grid-square tag { + position: absolute; + right: 0; + top: 0; + border-bottom-left-radius: 3px; +} + +.grid.grid-square view> icon, .grid.grid-square item> icon { + font-size: 26px; + position: absolute; + color: #aaa; + margin: auto; + top: 0; + bottom: 0; + left: 0; + right: 0; +} + +.grid.grid-square view, .grid.grid-square item { + margin-right: 10px; + margin-bottom: 10px; + border-radius: 3px; + position: relative; + overflow: hidden; +} + +.grid.col-1.grid-square view, .grid.col-1.grid-square item { + padding-bottom: 100%; + height: 0; + margin-right: 0; +} + +.grid.col-2.grid-square view, .grid.col-2.grid-square item { + padding-bottom: calc((100% - 10px)/2); + height: 0; + width: calc((100% - 10px)/2); +} + +.grid.col-2.grid-square view:nth-child(2n), +.grid.col-2.grid-square item:nth-child(2n) { + margin-right: 0; +} + +.grid.col-3.grid-square view, .grid.col-3.grid-square item { + padding-bottom: calc((100% - 20px)/3); + height: 0; + width: calc((100% - 20px)/3); +} + +.grid.col-3.grid-square view:nth-child(3n), +.grid.col-3.grid-square item:nth-child(3n) { + margin-right: 0; +} + +.grid.col-4.grid-square view, .grid.col-4.grid-square item { + padding-bottom: calc((100% - 30px)/4); + height: 0; + width: calc((100% - 30px)/4); +} + +.grid.col-4.grid-square view:nth-child(4n), +.grid.col-4.grid-square item:nth-child(4n) { + margin-right: 0; +} + +.grid.col-5.grid-square view, .grid.col-5.grid-square item { + padding-bottom: calc((100% - 40px)/5); + height: 0; + width: calc((100% - 40px)/5); +} + +.grid.col-1>item, .grid.col-1>view { + width: 100%; +} + +.grid.col-2>item, .grid.col-2>view { + width: 50%; +} + +.grid.col-3>item, .grid.col-3>view { + width: 33.33%; +} + +.grid.col-4>item, .grid.col-4>view { + width: 25%; +} + +.grid.col-5>item, .grid.col-5>view { + width: 20%; +} + +/* -- 内外边距 -- */ + +.margin-0 { + margin: 0 !important; +} + +.margin-xs { + margin: 5px; +} + +.margin-sm { + margin: 10px; +} + +.margin { + margin: 15px; +} + +.margin-lg { + margin: 20px; +} + +.margin-xl { + margin: 25px; +} + +.margin-top-xs { + margin-top: 5px; +} + +.margin-top-sm { + margin-top: 10px; +} + +.margin-top { + margin-top: 15px; +} + +.margin-top-lg { + margin-top: 20px; +} + +.margin-top-xl { + margin-top: 25px; +} + +.margin-right-xs { + margin-right: 5px; +} + +.margin-right-sm { + margin-right: 10px; +} + +.margin-right { + margin-right: 15px; +} + +.margin-right-lg { + margin-right: 20px; +} + +.margin-right-xl { + margin-right: 25px; +} + +.margin-bottom-xs { + margin-bottom: 5px; +} + +.margin-bottom-sm { + margin-bottom: 10px; +} + +.margin-bottom { + margin-bottom: 15px; +} + +.margin-bottom-lg { + margin-bottom: 20px; +} + +.margin-bottom-xl { + margin-bottom: 25px; +} + +.margin-left-xs { + margin-left: 5px; +} + +.margin-left-sm { + margin-left: 10px; +} + +.margin-left { + margin-left: 15px; +} + +.margin-left-lg { + margin-left: 20px; +} + +.margin-left-xl { + margin-left: 25px; +} + +.margin-lr-xs { + margin-left: 5px; + margin-right: 5px; +} + +.margin-lr-sm { + margin-left: 10px; + margin-right: 10px; +} + +.margin-lr { + margin-left: 15px; + margin-right: 15px; +} + +.margin-lr-lg { + margin-left: 20px; + margin-right: 20px; +} + +.margin-lr-xl { + margin-left: 25px; + margin-right: 25px; +} + +.margin-tb-xs { + margin-top: 5px; + margin-bottom: 5px; +} + +.margin-tb-sm { + margin-top: 10px; + margin-bottom: 10px; +} + +.margin-tb { + margin-top: 15px; + margin-bottom: 15px; +} + +.margin-tb-lg { + margin-top: 20px; + margin-bottom: 20px; +} + +.margin-tb-xl { + margin-top: 25px; + margin-bottom: 25px; +} + +.padding-0 { + padding: 0 !important; +} + +.padding-xs { + padding: 5px; +} + +.padding-sm { + padding: 10px; +} + +.padding { + padding: 15px; +} + +.padding-lg { + padding: 20px; +} + +.padding-xl { + padding: 25px; +} + +.padding-top-xs { + padding-top: 5px; +} + +.padding-top-sm { + padding-top: 10px; +} + +.padding-top { + padding-top: 15px; +} + +.padding-top-lg { + padding-top: 20px; +} + +.padding-top-xl { + padding-top: 25px; +} + +.padding-right-xs { + padding-right: 5px; +} + +.padding-right-sm { + padding-right: 10px; +} + +.padding-right { + padding-right: 15px; +} + +.padding-right-lg { + padding-right: 20px; +} + +.padding-right-xl { + padding-right: 25px; +} + +.padding-bottom-xs { + padding-bottom: 5px; +} + +.padding-bottom-sm { + padding-bottom: 10px; +} + +.padding-bottom { + padding-bottom: 15px; +} + +.padding-bottom-lg { + padding-bottom: 20px; +} + +.padding-bottom-xl { + padding-bottom: 25px; +} + +.padding-left-xs { + padding-left: 5px; +} + +.padding-left-sm { + padding-left: 10px; +} + +.padding-left { + padding-left: 15px; +} + +.padding-left-lg { + padding-left: 20px; +} + +.padding-left-xl { + padding-left: 25px; +} + +.padding-lr-xs { + padding-left: 5px; + padding-right: 5px; +} + +.padding-lr-sm { + padding-left: 10px; + padding-right: 10px; +} + +.padding-lr { + padding-left: 15px; + padding-right: 15px; +} + +.padding-lr-lg { + padding-left: 20px; + padding-right: 20px; +} + +.padding-lr-xl { + padding-left: 25px; + padding-right: 25px; +} + +.padding-tb-xs { + padding-top: 5px; + padding-bottom: 5px; +} + +.padding-tb-sm { + padding-top: 10px; + padding-bottom: 10px; +} + +.padding-tb { + padding-top: 15px; + padding-bottom: 15px; +} + +.padding-tb-lg { + padding-top: 20px; + padding-bottom: 20px; +} + +.padding-tb-xl { + padding-top: 25px; + padding-bottom: 25px; +} + +/* -- 浮动 -- */ + +.cf::after, .cf::before { + content: " "; + display: table; +} + +.cf::after { + clear: both; +} + +.fl { + float: left; +} + +.fr { + float: right; +} + +/* ================== + 图片 + ==================== */ + +image { + max-width: 100%; + display: inline-block; + position: relative; + z-index: 0; +} + +image.loading::before { + content: ""; + background: #f5f5f5; + display: block; + position: absolute; + width: 100%; + height: 100%; + z-index: -2; +} + +image.loading::after { + content: "\e7f1"; + font-family: "iconfont"; + position: absolute; + top: 0; + left: 0; + width: 16px; + height: 16px; + line-height: 16px; + right: 0; + bottom: 0; + z-index: -1; + font-size: 16px; + margin: auto; + color: #ccc; + -webkit-animation: icon-spin 2s infinite linear; + animation: icon-spin 2s infinite linear; + display: block; +} + +image.response { + width: 100%; +} + +/* ================== + 开关 + ==================== */ + +switch, checkbox, radio { + position: relative; +} + +switch::after { + font-family: "iconfont" !important; + content: "\e645"; + position: absolute; + color: #fff; + top: 50%; + margin-top: -8px; + left: 10px; + font-size: 16px; + line-height: 16px; + pointer-events: none; + transform: scale(0, 0); + transition: all 0.3s ease-in-out 0s; +} + +switch[checked]::after { + transform: scale(1, 1); +} + +switch::before { + font-family: "iconfont" !important; + content: "\e646"; + position: absolute; + color: #fff; + top: 50%; + margin-top: -8px; + right: 10px; + font-size: 16px; + line-height: 16px; + pointer-events: none; + transform: scale(1, 1); + transition: all 0.3s ease-in-out 0s; + z-index: 9; +} + +radio::before, checkbox::before { + font-family: "iconfont" !important; + content: "\e645"; + position: absolute; + color: #fff; + top: 50%; + margin-top: -8px; + right: 5px; + font-size: 16px; + line-height: 16px; + pointer-events: none; + transform: scale(1, 1); + transition: all 0.3s ease-in-out 0s; + z-index: 9; +} + +switch[checked]::before { + transform: scale(0, 0); +} + +switch .wx-switch-input { + background: #aaa !important; + border-color: #aaa; + padding: 0 30px; + margin: 0; +} + +radio-group { + display: inline-block; +} + +radio .wx-radio-input, checkbox .wx-checkbox-input { + margin: 0; + width: 24px; + height: 24px; +} + +checkbox.round .wx-checkbox-input { + border-radius: 50px; +} + +switch .wx-switch-input-checked::after { + margin-left: 10px; + box-shadow: none; +} + +switch.radius .wx-switch-input::after, switch.radius .wx-switch-input, +switch.radius .wx-switch-input::before { + border-radius: 5px; +} + +switch .wx-switch-input::before, radio.radio::before, +checkbox .wx-checkbox-input::before, radio .wx-radio-input::before { + display: none; +} + +radio.radio[checked]::after { + content: ""; + background: transparent; + display: block; + position: absolute; + width: 8px; + height: 8px; + z-index: 999; + top: 0px; + left: 0px; + right: 0; + bottom: 0; + margin: auto; + border-radius: 100px; + border: 8px solid #fff; +} + +switch.sm, checkbox.sm, radio.sm { + transform: scale(0.8); +} + +.switch-sex::after { + content: "\e71c"; +} + +.switch-sex::before { + content: "\e71a"; +} + +.switch-sex .wx-switch-input { + background: #e54d42 !important; + border-color: #e54d42; +} + +.switch-sex[checked] .wx-switch-input { + background: #0081ff !important; + border-color: #0081ff !important; +} + +/* ================== + 背景 + ==================== */ + +.line-red::after, .lines-red::after, switch.red[checked] .wx-switch-input, +checkbox.red[checked] .wx-checkbox-input, radio.red[checked] .wx-radio-input { + border-color: #e54d42 !important; +} + +.line-orange::after, .lines-orange::after, +switch.orange[checked] .wx-switch-input, +checkbox.orange[checked] .wx-checkbox-input, +radio.orange[checked] .wx-radio-input { + border-color: #f37b1d !important; +} + +.line-yellow::after, .lines-yellow::after, +switch.yellow[checked] .wx-switch-input, +checkbox.yellow[checked] .wx-checkbox-input, +radio.yellow[checked] .wx-radio-input { + border-color: #fbbd08 !important; +} + +.line-olive::after, .lines-olive::after, switch.olive[checked] .wx-switch-input, +checkbox.olive[checked] .wx-checkbox-input, radio.olive[checked] .wx-radio-input { + border-color: #8dc63f !important; +} + +.line-green::after, .lines-green::after, switch.green[checked] .wx-switch-input, +checkbox.green[checked] .wx-checkbox-input, checkbox[checked] .wx-checkbox-input, +radio.green[checked] .wx-radio-input { + border-color: #39b54a !important; +} + +.line-cyan::after, .lines-cyan::after, switch.cyan[checked] .wx-switch-input, +checkbox.cyan[checked] .wx-checkbox-input, radio.cyan[checked] .wx-radio-input { + border-color: #1cbbb4 !important; +} + +.line-blue::after, .lines-blue::after, switch.blue[checked] .wx-switch-input, +checkbox.blue[checked] .wx-checkbox-input, radio.blue[checked] .wx-radio-input { + border-color: #0081ff !important; +} + +.line-purple::after, .lines-purple::after, +switch.purple[checked] .wx-switch-input, +checkbox.purple[checked] .wx-checkbox-input, +radio.purple[checked] .wx-radio-input { + border-color: #6739b6 !important; +} + +.line-mauve::after, .lines-mauve::after, switch.mauve[checked] .wx-switch-input, +checkbox.mauve[checked] .wx-checkbox-input, radio.mauve[checked] .wx-radio-input { + border-color: #9c26b0 !important; +} + +.line-pink::after, .lines-pink::after, switch.pink[checked] .wx-switch-input, +checkbox.pink[checked] .wx-checkbox-input, radio.pink[checked] .wx-radio-input { + border-color: #e03997 !important; +} + +.line-brown::after, .lines-brown::after, switch.brown[checked] .wx-switch-input, +checkbox.brown[checked] .wx-checkbox-input, radio.brown[checked] .wx-radio-input { + border-color: #a5673f !important; +} + +.line-grey::after, .lines-grey::after, switch.grey[checked] .wx-switch-input, +checkbox.grey[checked] .wx-checkbox-input, radio.grey[checked] .wx-radio-input { + border-color: #8799a3 !important; +} + +.line-gray::after, .lines-gray::after, switch.gray[checked] .wx-switch-input, +checkbox.gray[checked] .wx-checkbox-input, radio.gray[checked] .wx-radio-input { + border-color: #aaa !important; +} + +.line-black::after, .lines-black::after, switch.black[checked] .wx-switch-input, +checkbox.black[checked] .wx-checkbox-input, radio.black[checked] .wx-radio-input { + border-color: #333 !important; +} + +.line-white::after, .lines-white::after, switch.white[checked] .wx-switch-input, +checkbox.white[checked] .wx-checkbox-input, radio.white[checked] .wx-radio-input { + border-color: #fff !important; +} + +.bg-red, switch.red[checked] .wx-switch-input, +checkbox.red[checked] .wx-checkbox-input, radio.red[checked] .wx-radio-input { + background-color: #e54d42 !important; + color: #fff !important; +} + +.bg-orange, switch.orange[checked] .wx-switch-input, +checkbox.orange[checked] .wx-checkbox-input, +radio.orange[checked] .wx-radio-input { + background-color: #f37b1d !important; + color: #fff !important; +} + +.bg-yellow, switch.yellow[checked] .wx-switch-input, +checkbox.yellow[checked] .wx-checkbox-input, +radio.yellow[checked] .wx-radio-input { + background-color: #fbbd08 !important; + color: #333 !important; +} + +.bg-olive, switch.olive[checked] .wx-switch-input, +checkbox.olive[checked] .wx-checkbox-input, radio.olive[checked] .wx-radio-input { + background-color: #8dc63f !important; + color: #fff !important; +} + +.bg-green, switch.green[checked] .wx-switch-input, +switch[checked] .wx-switch-input, checkbox.green[checked] .wx-checkbox-input, +checkbox[checked] .wx-checkbox-input, radio.green[checked] .wx-radio-input, +radio[checked] .wx-radio-input { + background-color: #39b54a !important; + color: #fff !important; +} + +.bg-cyan, switch.cyan[checked] .wx-switch-input, +checkbox.cyan[checked] .wx-checkbox-input, radio.cyan[checked] .wx-radio-input { + background-color: #1cbbb4 !important; + color: #fff !important; +} + +.bg-blue, switch.blue[checked] .wx-switch-input, +checkbox.blue[checked] .wx-checkbox-input, radio.blue[checked] .wx-radio-input { + background-color: #0081ff !important; + color: #fff !important; +} + +.bg-purple, switch.purple[checked] .wx-switch-input, +checkbox.purple[checked] .wx-checkbox-input, +radio.purple[checked] .wx-radio-input { + background-color: #6739b6 !important; + color: #fff !important; +} + +.bg-mauve, switch.mauve[checked] .wx-switch-input, +checkbox.mauve[checked] .wx-checkbox-input, radio.mauve[checked] .wx-radio-input { + background-color: #9c26b0 !important; + color: #fff !important; +} + +.bg-pink, switch.pink[checked] .wx-switch-input, +checkbox.pink[checked] .wx-checkbox-input, radio.pink[checked] .wx-radio-input { + background-color: #e03997 !important; + color: #fff !important; +} + +.bg-brown, switch.brown[checked] .wx-switch-input, +checkbox.brown[checked] .wx-checkbox-input, radio.brown[checked] .wx-radio-input { + background-color: #a5673f !important; + color: #fff !important; +} + +.bg-grey, switch.grey[checked] .wx-switch-input, +checkbox.grey[checked] .wx-checkbox-input, radio.grey[checked] .wx-radio-input { + background-color: #8799a3 !important; + color: #fff !important; +} + +.bg-gray, switch.gray[checked] .wx-switch-input, +checkbox.gray[checked] .wx-checkbox-input, radio.gray[checked] .wx-radio-input { + background-color: #f0f0f0 !important; + color: #666 !important; +} + +.bg-black, switch.black[checked] .wx-switch-input, +checkbox.black[checked] .wx-checkbox-input, radio.black[checked] .wx-radio-input { + background-color: #333 !important; + color: #fff !important; +} + +.bg-white, switch.white[checked] .wx-switch-input, +checkbox.white[checked] .wx-checkbox-input, radio.white[checked] .wx-radio-input { + background-color: #fff !important; + color: #666; +} + +.bg-shadeTop { + background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.01)); + color: #fff; +} + +.bg-shadeBottom { + background-image: linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 1)); + color: #fff; +} + +.none-bg, .line-white, .lines-white { + background-color: transparent !important; +} + +.bg-red.light { + color: #e54d42 !important; + background: #fadbd9 !important; +} + +.bg-orange.light { + color: #f37b1d !important; + background: #fde6d2 !important; +} + +.bg-yellow.light { + color: #fbbd08 !important; + background: #fef2ce !important; +} + +.bg-olive.light { + color: #8dc63f !important; + background: #e8f4d9 !important; +} + +.bg-green.light { + color: #39b54a !important; + background: #d7f0db !important; +} + +.bg-cyan.light { + color: #1cbbb4 !important; + background: #d2f1f0 !important; +} + +.bg-blue.light { + color: #0081ff !important; + background: #cce6ff !important; +} + +.bg-purple.light { + color: #6739b6 !important; + background: #e1d7f0 !important; +} + +.bg-mauve.light { + color: #9c26b0 !important; + background: #ebd4ef !important; +} + +.bg-pink.light { + color: #e03997 !important; + background: #f9d7ea !important; +} + +.bg-brown.light { + color: #a5673f !important; + background: #ede1d9 !important; +} + +.bg-grey.light { + color: #8799a3 !important; + background: #e7ebed !important; +} + +.bg-gray.light { + color: #666 !important; + background: #fadbd9 !important; +} + +.bg-gray.light { + color: #888 !important; + background: #f1f1f1 !important; +} + +.gradual-red { + background-image: linear-gradient(45deg, #f43f3b, #ec008c) !important; + color: #fff !important; +} + +.gradual-orange { + background-image: linear-gradient(45deg, #ff9700, #ed1c24) !important; + color: #fff !important; +} + +.gradual-green { + background-image: linear-gradient(45deg, #39b54a, #8dc63f) !important; + color: #fff !important; +} + +.gradual-purple { + background-image: linear-gradient(45deg, #9000ff, #5e00ff) !important; + color: #fff !important; +} + +.gradual-pink { + background-image: linear-gradient(45deg, #ec008c, #6739b6) !important; + color: #fff !important; +} + +.gradual-blue { + background-image: linear-gradient(45deg, #0081ff, #1cbbb4) !important; + color: #fff !important; +} + +button.shadow[class*="-red"] { + box-shadow: 3px 3px 4px rgba(204, 69, 59, 0.2) !important; +} + +button.shadow[class*="-orange"] { + box-shadow: 3px 3px 4px rgba(217, 109, 26, 0.2) !important; +} + +button.shadow[class*="-yellow"] { + box-shadow: 3px 3px 4px rgba(224, 170, 7, 0.2) !important; +} + +button.shadow[class*="-olive"] { + box-shadow: 3px 3px 4px rgba(124, 173, 55, 0.2) !important; +} + +button.shadow[class*="-green"] { + box-shadow: 3px 3px 4px rgba(48, 156, 63, 0.2) !important; +} + +button.shadow[class*="-cyan"] { + box-shadow: 3px 3px 4px rgba(28, 187, 180, 0.2) !important; +} + +button.shadow[class*="-blue"] { + box-shadow: 3px 3px 4px rgba(0, 102, 204, 0.2) !important; +} + +button.shadow[class*="-purple"] { + box-shadow: 3px 3px 4px rgba(88, 48, 156, 0.2) !important; +} + +button.shadow[class*="-mauve"] { + box-shadow: 3px 3px 4px rgba(133, 33, 150, 0.2) !important; +} + +button.shadow[class*="-pink"] { + box-shadow: 3px 3px 4px rgba(199, 50, 134, 0.2) !important; +} + +button.shadow[class*="-brown"] { + box-shadow: 3px 3px 4px rgba(140, 88, 53, 0.2) !important; +} + +button.shadow[class*="-grey"] { + box-shadow: 3px 3px 4px rgba(114, 130, 138, 0.2) !important; +} + +button.shadow[class*="-gray"] { + box-shadow: 3px 3px 4px rgba(114, 130, 138, 0.2) !important; +} + +button.shadow[class*="-black"] { + box-shadow: 3px 3px 4px rgba(26, 26, 26, 0.2) !important; +} + +.bg-img { + background-size: cover; + background-position: center; + background-repeat: no-repeat; +} + +.bg-mask { + background-color: #333; + position: relative; +} + +.bg-mask::after { + content: ""; + border-radius: inherit; + width: 100%; + height: 100%; + display: block; + background-color: rgba(0, 0, 0, 0.5); + position: absolute; + left: 0; + right: 0; + bottom: 0; + top: 0; +} + +.bg-mask view, .bg-mask cover-view { + z-index: 5; + position: relative; +} + +.bg-mask>cover-view { + background-color: rgba(0, 0, 0, 0.5); +} + +.bg-video { + position: relative; +} + +.bg-video video { + display: block; + height: 100%; + width: 100%; + -o-object-fit: cover; + object-fit: cover; + position: absolute; + top: 0; + z-index: 0; + pointer-events: none; +} + +/* ================== + 文本 + ==================== */ + +.text-xs { + font-size: 10px; +} + +.text-sm { + font-size: 12px; +} + +.text-df { + font-size: 14px; +} + +.text-lg { + font-size: 16px; +} + +.text-xl { + font-size: 18px; +} + +.text-xxl { + font-size: 22px; +} + +.text-sl { + font-size: 40px; +} + +.text-xsl { + font-size: 60px; +} + +.text-Abc { + text-transform: Capitalize; +} + +.text-ABC { + text-transform: Uppercase; +} + +.text-abc { + text-transform: Lowercase; +} + +.text-price::before { + content: "¥"; + font-size: 80%; + margin-right: 2px; +} + +.text-cut { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} + +.text-bold { + font-weight: bold; +} + +.text-center { + text-align: center; +} + +.text-content { + line-height: 1.6; +} + +.text-left { + text-align: left; +} + +.text-right { + text-align: right; +} + +.text-red, .line-red, .lines-red { + color: #e54d42 !important; +} + +.text-orange, .line-orange, .lines-orange { + color: #f37b1d !important; +} + +.text-yellow, .line-yellow, .lines-yellow { + color: #fbbd08 !important; +} + +.text-olive, .line-olive, .lines-olive { + color: #8dc63f !important; +} + +.text-green, .line-green, .lines-green { + color: #39b54a !important; +} + +.text-cyan, .line-cyan, .lines-cyan { + color: #1cbbb4 !important; +} + +.text-blue, .line-blue, .lines-blue { + color: #0081ff !important; +} + +.text-purple, .line-purple, .lines-purple { + color: #6739b6 !important; +} + +.text-mauve, .line-mauve, .lines-mauve { + color: #9c26b0 !important; +} + +.text-pink, .line-pink, .lines-pink { + color: #e03997 !important; +} + +.text-brown, .line-brown, .lines-brown { + color: #a5673f !important; +} + +.text-grey, .line-grey, .lines-grey { + color: #8799a3 !important; +} + +.text-gray, .line-gray, .lines-gray { + color: #aaa !important; +} + +.text-black, .line-black, .lines-black { + color: #333 !important; +} + +.text-white, .line-white, .lines-white { + color: #fff !important; +} + +/* ================== + 边框 + ==================== */ + +/* -- 实线 -- */ + +.solid, .solid-top, .solid-right, .solid-bottom, .solid-left, .solids, +.solids-top, .solids-right, .solids-bottom, .solids-left, .dashed, .dashed-top, +.dashed-right, .dashed-bottom, .dashed-left { + position: relative; +} + +.solid::after, .solid-top::after, .solid-right::after, .solid-bottom::after, +.solid-left::after, .solids::after, .solids-top::after, .solids-right::after, +.solids-bottom::after, .solids-left::after, .dashed::after, .dashed-top::after, +.dashed-right::after, .dashed-bottom::after, .dashed-left::after { + content: " "; + width: 200%; + height: 200%; + position: absolute; + top: 0; + left: 0; + border-radius: inherit; + transform: scale(0.5); + transform-origin: 0 0; + pointer-events: none; + box-sizing: border-box; +} + +.solid::after { + border: 1px solid rgba(0, 0, 0, 0.1); +} + +.solid-top::after { + border-top: 1px solid rgba(0, 0, 0, 0.1); +} + +.solid-right::after { + border-right: 1px solid rgba(0, 0, 0, 0.1); +} + +.solid-bottom::after { + border-bottom: 1px solid rgba(0, 0, 0, 0.1); +} + +.solid-left::after { + border-left: 1px solid rgba(0, 0, 0, 0.1); +} + +.solids::after { + border: 4rpx solid #eee; +} + +.solids-top::after { + border-top: 4rpx solid #eee; +} + +.solids-right::after { + border-right: 4rpx solid #eee; +} + +.solids-bottom::after { + border-bottom: 4rpx solid #eee; +} + +.solids-left::after { + border-left: 4rpx solid #eee; +} + +/* -- 虚线 -- */ + +.dashed::after { + border: 1px dashed #ddd; +} + +.dashed-top::after { + border-top: 1px dashed #ddd; +} + +.dashed-right::after { + border-right: 1px dashed #ddd; +} + +.dashed-bottom::after { + border-bottom: 1px dashed #ddd; +} + +.dashed-left::after { + border-left: 1px dashed #ddd; +} + +/* -- 阴影 -- */ + +.shadow { + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); +} + +.shadow-lg { + box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.07); +} + +.shadow-warp { + position: relative; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); +} + +.shadow-warp:before, .shadow-warp:after { + position: absolute; + content: ""; + top: 10px; + bottom: 15px; + left: 10px; + width: 50%; + box-shadow: 0 15px 10px rgba(0, 0, 0, 0.2); + transform: rotate(-3deg); + z-index: -1; +} + +.shadow-warp:after { + right: 10px; + left: auto; + transform: rotate(3deg); +} + +.shadow-blur { + position: relative; +} + +.shadow-blur::before { + content: ""; + display: block; + background: inherit; + filter: blur(5px); + position: absolute; + width: 100%; + height: 100%; + top: 5px; + left: 5px; + z-index: -1; + opacity: 0.4; + transform-origin: 0 0; + border-radius: inherit; + transform: scale(1, 1); +} + +/* ================== + 按钮 + ==================== */ + +.round, button.icon { + border-radius: 5000px !important; +} + +.radius { + border-radius: 3px !important; +} + +button { + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + padding: 10px 15px 8px; + font-size: 14px; + line-height: 1; + text-align: center; + text-decoration: none; + border-radius: 3px; + overflow: visible; + color: #666; + background-color: #fff !important; + margin-left: initial; + transform: translate(0px, 0px); + margin-right: initial; +} + +button::after, tag[class*="line-"]::after { + content: " "; + width: 200%; + height: 200%; + position: absolute; + top: 0; + left: 0; + border: 1rpx solid rgba(0, 0, 0, 0.2); + transform: scale(0.5); + transform-origin: 0 0; + box-sizing: border-box; + border-radius: inherit; + z-index: 1; + pointer-events: none; +} + +button[class*="line"]::after, tag.radius[class*="line"]::after { + border-radius: 6px; +} + +button.round[class*="line"]::after, tag.round[class*="line"]::after { + border-radius: 500px; +} + +button[class*="lines"]::after { + border: 3px solid rgba(0, 0, 0, 0.2); +} + +button[class*="bg-"]::after { + display: none; +} + +button.sm { + padding: 7px 10px 5px; + font-size: 12px; +} + +button.lg { + padding: 16px 20px 14px; + font-size: 16px; +} + +button.icon.sm { + width: 28px; + height: 28px; +} + +button.icon { + width: 35px; + height: 35px; + padding: 0; +} + +button.icon.lg { + width: 41px; + height: 41px; +} + +button.shadow-blur::before { + top: 2px; + left: 2px; + filter: blur(3px); + opacity: 0.6; +} + +button.button-hover { + transform: translate(1px, 1px); +} + +.block { + display: block; +} + +button.block { + display: flex; +} + +button[disabled] { + opacity: 0.6; + color: #fff; +} + +/* ================== + 徽章 + ==================== */ + +tag { + font-size: 12px; + color: #666; + vertical-align: middle; + position: relative; + display: inline-flex; + align-items: stretch; + justify-content: center; + box-sizing: border-box; + padding: 6px 7px 5px; + line-height: 1; + background: #fff; + font-family: Helvetica Neue, Helvetica, sans-serif; +} + +tag[class*="line-"]::after { + border-radius: 0; +} + +tag+tag { + margin-left: 5px; +} + +tag.sm { + font-size: 10px; + padding: 5px 6px 3px; +} + +capsule { + display: inline-flex; + vertical-align: middle; +} + +capsule + capsule { + margin-left: 5px; +} + +capsule tag { + margin: 0; +} + +capsule tag[class*="line-"]:last-child::after { + border-left: 0px solid transparent !important; +} + +capsule tag[class*="line-"]:first-child::after { + border-right: 0px solid transparent !important; +} + +capsule.radius tag:first-child { + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; +} + +capsule.radius tag:last-child::after, capsule.radius tag[class*="line-"] { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; +} + +capsule.round tag:first-child { + border-top-left-radius: 100px; + border-bottom-left-radius: 100px; + text-indent: 2px; +} + +capsule.round tag:last-child::after, capsule.round tag:last-child { + border-top-right-radius: 100px; + border-bottom-right-radius: 100px; + text-indent: -2px; +} + +tag.badge { + background: #dd514c; + border-radius: 100px; + position: absolute; + top: -5px; + right: -5px; + font-size: 10px; + padding: 3px 5px 2px; + color: #fff; +} + +tag:empty { + padding: 4px; + top: -2px; + right: -2px; +} + +/* ================== + 头像 + ==================== */ + +avatar { + font-variant: small-caps; + margin: 0; + padding: 0; + display: inline-block; + text-align: center; + background: #ccc; + color: #fff; + white-space: nowrap; + position: relative; + width: 32px; + height: 32px; + line-height: 32px; + background-size: cover; + background-position: center; + vertical-align: middle; +} + +avatar text { + position: absolute; + left: 50%; + display: inline-block; + transform-origin: 0 center; + transform: scale(0.75) translateX(-50%); +} + +avatar.sm { + width: 24px; + height: 24px; + line-height: 24px; +} + +avatar > icon { + position: absolute; + left: 50%; + top: 0; + bottom: 0; + margin: auto; + transform-origin: 0 center; + transform: scale(1.2) translateX(-50%); +} + +avatar.sm > icon { + transform: scale(0.75) translateX(-50%); +} + +avatar.lg > icon { + transform: scale(1.75) translateX(-50%); +} + +avatar.xl > icon { + transform: scale(2.2) translateX(-50%); +} + +avatar.lg { + width: 45px; + height: 45px; + line-height: 45px; +} + +avatar.xl { + width: 64px; + height: 64px; + line-height: 64px; +} + +avatar-group { + direction: rtl; + unicode-bidi: bidi-override; + padding: 0 5px 0 20px; + display: inline-block; +} + +avatar-group avatar { + margin-left: -15px; + border: 2px solid #f1f1f1; + vertical-align: middle; +} + +avatar-group avatar.sm { + margin-left: -10px; + border: 1px solid #f1f1f1; +} + +/* ================== + 进度条 + ==================== */ + +progress-bar { + overflow: hidden; + height: 14px; + background-color: #ebeef5; + display: inline-flex; + align-items: center; + width: 100%; +} + +progress-bar+view, progress-bar+text { + line-height: 1; +} + +progress-bar.xs { + height: 5px; +} + +progress-bar.sm { + height: 10px; +} + +progress-bar view { + width: 0; + height: 100%; + align-items: center; + display: flex; + justify-items: flex-end; + justify-content: space-around; + font-size: 10px; + color: #fff; + background: #0081ff; + transition: width 0.6s ease; +} + +progress-bar text { + align-items: center; + display: flex; + font-size: 10px; + color: #666; + text-indent: 5px; +} + +progress-bar.text-progress { + padding-right: 30px; +} + +progress-bar.striped view { + background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-size: 36px 36px; +} + +progress-bar.active view { + animation: progress-bar-stripes 2s linear infinite; +} + +@keyframes progress-bar-stripes { + from { + background-position: 36px 0; + } + + to { + background-position: 0 0; + } +} + +/* ================== + 加载 + ==================== */ + +load { + display: block; + line-height: 3em; + text-align: center; +} + +load::before { + font-family: "iconfont" !important; + display: inline-block; + margin-right: 3px; +} + +load.loading::before { + content: "\e67a"; + animation: icon-spin 2s infinite linear; +} + +load.loading::after { + content: "加载中..."; +} + +load.over::before { + content: "\e64a"; +} + +load.over::after { + content: "没有更多了"; +} + +load.erro::before { + content: "\e658"; +} + +load.erro::after { + content: "加载失败"; +} + +load.load-icon::before { + font-size: 16px; +} + +load.load-icon::after { + display: none; +} + +load.load-icon.over { + display: none; +} + +/* ================== + 列表 + ==================== */ + +.grayscale { + filter: grayscale(1); +} + +list.menu { + padding: 0 15px; + background: #fff; + display: block; +} + +list.menu.no-padding { + padding: 0; +} + +list.menu+list.menu { + margin-top: 15px; +} + +list+list { + margin-top: 15px; +} + +list.menu>item { + position: relative; + line-height: 18px; + font-size: 16px; + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid #eee; + min-height: 50px; +} + +list.menu>item.cur { + background-color: #fcf7e9; +} + +list.menu>item:last-child { + border: none; +} + +list.menu.no-padding>item { + padding: 15px; +} + +list.menu-avatar.no-padding>item { + padding-left: 70px; +} + +list.menu-avatar.no-padding>item avatar { + left: 15px; +} + +list.menu.no-padding>item.arrow { + padding-right: 33px; +} + +list.menu>item .content { + line-height: 1.6em; + flex: 1; +} + +list.menu>item button.content { + padding: 0; + justify-content: flex-start; + font-size: 16px; +} + +list.menu>item button.content::after { + display: none; +} + +list.menu>item .content>text[class*="icon"], list.menu>item .content>image, +list.menu>item .content>icon { + margin-right: 5px; + display: inline-block; + width: 1.4em; + height: 1.6em; + vertical-align: middle; + text-align: center; +} + +list.menu>item .action { + text-align: right; +} + +list>item.grayscale { + background-color: #f5f5f5; +} + +list.menu>item .action tag:empty { + right: 5px; +} + +list.menu>item.arrow { + padding-right: 18px; +} + +list.menu>item.arrow::after { + font-family: "iconfont" !important; + display: block; + content: "\e6a3"; + position: absolute; + font-size: 17px; + color: #aaa; + line-height: 15px; + height: 15px; + width: 15px; + text-align: center; + top: 1px; + bottom: 0; + right: 0; + margin: auto; +} + +list.menu.no-padding>item.arrow::after { + right: 15px; +} + +list.menu>item avatar-group avatar { + border-color: #fff; +} + +list.card-menu { + margin-left: 15px; + margin-right: 15px; + border-radius: 10px; + overflow: hidden; +} + +list.menu-avatar>item>avatar { + position: absolute; + left: 0; +} + +list.menu-avatar>item { + padding-left: 55px; + height: 70px; +} + +list.menu>item .content tag.sm { + font-size: 8px; + line-height: 80%; + padding: 4px 3px 2px; + margin-top: -3px; +} + +list.grid { + text-align: center; + background: #fff; +} + +list.grid>item { + display: flex; + flex-direction: column; + border-right: 1rpx solid #eee; + border-bottom: 1rpx solid #eee; + padding: 10px; +} + +list.grid>item icon { + display: block; + width: 100%; + position: relative; + font-size: 24px; + margin-top: 10px; +} + +list.grid>item text { + display: block; + color: #888; + margin-top: 5px; + line-height: 20px; + font-size: 13px; +} + +list.grid>item tag { + left: 50%; + right: auto; + margin-left: 10px; +} + +list.grid.col-3>item:nth-child(3n) { + border-right: 0px; +} + +list.grid.col-4>item:nth-child(4n) { + border-right: 0px; +} + +list.grid.col-5>item:nth-child(5n) { + border-right: 0px; +} + +list.grid.no-border { + padding: 10px 5px; +} + +list.grid.no-border>item { + border: none !important; + padding-top: 5px; + padding-bottom: 5px; +} + +list.menu-avatar.comment > item { + height: auto; + padding-top: 15px; + padding-bottom: 15px; + padding-left: 45px; +} + +list.menu-avatar.comment avatar { + align-self: flex-start; +} + +/* ================== + 操作条 + ==================== */ + +bar { + display: flex; + position: relative; + align-items: center; + background: #fff; + height: 50px; + justify-content: space-between; + font-size: 16px; +} + +bar .action { + display: flex; + align-items: center; + height: 100%; + justify-content: center; + max-width: 100%; +} + +bar .action:first-child { + margin-left: 15px; + font-size: 15px; +} + +bar .action:first-child text { + display: inline-block; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + text-align: left; + width: 100%; +} + +bar avatar:first-child { + margin-left: 10px; +} + +bar .action:first-child >icon[class*="icon"] { + margin-left: -0.5em; +} + +bar .action:last-child { + margin-right: 15px; +} + +bar .action>icon[class*="icon"] { + font-size: 18px; + height: 100%; + width: 1.4em; +} + +bar .action>icon[class*="icon"]+icon[class*="icon"] { + margin-left: 0.5em; +} + +bar .content { + position: absolute; + text-align: center; + width: 400rpx; + left: 0; + right: 0; + bottom: 8px; + margin: auto; + height: 30px; + font-size: 18px; + line-height: 30px; + cursor: none; + pointer-events: none; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} + +bar.btn-group { + justify-content: space-around; +} + +bar.btn-group button { + padding: 10px 16px; +} + +bar.btn-group button { + flex: 1; + margin: 0 10px; + max-width: 50%; +} + +bar .serach-form { + background: #f5f5f5; + line-height: 32px; + height: 32px; + font-size: 12px; + color: #666; + flex: 1; + display: flex; + align-items: center; + margin: 0 10px; +} + +bar .serach-form +.action { + margin-right: 10px; +} + +bar .serach-form +.action text+icon { + margin-right: -0.5em; +} + +bar .serach-form input { + flex: 1; + padding-right: 10px; + height: 32px; + line-height: 32px; + font-size: 13px; +} + +bar .serach-form [class*="icon"] { + width: 2em; + height: auto; +} + +bar .serach-form.round [class*="icon"] { + margin-left: 0.5em; +} + +bar .serach-form [class*="icon"]::before { + top: 0px; +} + +bar.fixed, .nav.fixed { + position: fixed; + width: 100%; + top: 0; + z-index: 1024; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); +} + +bar.foot { + position: fixed; + width: 100%; + bottom: 0; + z-index: 1024; + box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1); +} + +bar.shop { + padding: 0; +} + +bar.shop .action { + font-size: 12px; + position: relative; + flex: 1; + text-align: center; + padding: 0 10px; + display: block; + height: auto !important; + line-height: 1; + margin: 0 !important; +} + +bar.shop [class*="icon"] { + width: 50px !important; + position: relative; + display: block; + height: auto !important; + margin: 0 auto 5px !important; +} + +bar.shop .submit { + align-items: center; + display: flex; + justify-content: center; + text-align: center; + position: relative; + flex: 2; + height: 100%; +} + +bar.shop .submit:last-child { + flex: 2.6; +} + +bar.shop .submit+.submit { + flex: 2; +} + +bar.shop .submit button { + margin-left: 10px; +} + +bar.shop .submit:last-child button { + margin-left: 0px; +} + +bar.shop .submit+.submit button { + margin-left: 0px; + margin-right: 10px; +} + +bar.shop .action::after { + content: " "; + width: 200%; + height: 200%; + position: absolute; + top: 0; + left: 0; + transform: scale(0.5); + transform-origin: 0 0; + border-right: 1px solid rgba(0, 0, 0, 0.1); +} + +bar.input { + padding-right: 10px; +} + +bar.input input { + overflow: initial; + line-height: 32px; + height: 32px; + min-height: 32px; + flex: 1; + font-size: 15px; + margin: 0 10px; +} + +bar.input .action { + margin-left: 10px; +} + +bar.input .action [class*="icon"] { + font-size: 24px; +} + +bar.input input+.action { + margin-right: 10px; + margin-left: 0px; +} + +bar.input .action:first-child [class*="icon"] { + margin-left: 0px; +} + +custom { + display: block; + position: relative; +} + +custom bar { + padding-right: 110px; + box-shadow: 0px 0px 0px !important; +} + +/* ================== + 导航栏 + ==================== */ + +.nav { + white-space: nowrap; +} + +::-webkit-scrollbar { + display: none; +} + +.nav item { + height: 45px; + display: inline-block; + line-height: 45px; + margin: 0 5px; + padding: 0 10px; +} + +.nav item.cur { + border-bottom: 2px solid; +} + +/* ================== + 时间轴 + ==================== */ + +timeline { + display: block; + background: #fff; +} + +timeline time { + width: 60px; + text-align: center; + padding: 10px 0; + font-size: 13px; + color: #888; + display: block; +} + +timeline>item { + padding: 15px 15px 15px 60px; + position: relative; + display: block; + color: #ccc; + z-index: 0; +} + +timeline>item::after { + content: ""; + display: block; + position: absolute; + width: 1rpx; + background: #ddd; + left: 30px; + height: 100%; + top: 0; + z-index: 8; +} + +timeline>item::before { + font-family: "iconfont"; + content: "\e763"; + display: block; + position: absolute; + top: 18px; + z-index: 9; + background: #fff; + width: 25px; + height: 25px; + text-align: center; + border: none; + line-height: 25px; + left: 18px; +} + +timeline>item[class*="icon"]::before { + background: #fff; + width: 25px; + height: 25px; + text-align: center; + border: none; + line-height: 25px; + left: 18px; +} + +timeline>item>.content { + background: #f1f1f1; + padding: 15px; + border-radius: 3px; + display: block; + color: #666; + line-height: 1.6; +} + +timeline>item>.content+.content { + margin-top: 10px; +} + +/* ================== + 聊天 + ==================== */ + +chat { + display: flex; + flex-direction: column; +} + +chat item { + display: flex; + padding: 15px 15px 35px; + position: relative; +} + +chat item>avatar { + width: 40px; + height: 40px; +} + +chat item>.main { + max-width: calc(100% - 130px); + margin: 0 20px; + display: flex; + align-items: center; +} + +chat item>image { + height: 160px; +} + +chat item>.main .content { + background: #fff; + padding: 10px; + border-radius: 3px; + display: inline-flex; + max-width: 100%; + align-items: center; + color: #666; + font-size: 15px; + position: relative; + min-height: 40px; + line-height: 20px; + text-align: left; +} + +chat item .date { + position: absolute; + font-size: 12px; + color: #aaa; + width: calc(100% - 160px); + bottom: 10px; + left: 80px; +} + +chat item .action { + padding: 0 15px; + display: flex; + align-items: center; +} + +chat item>.main .content::after { + content: ""; + top: 12px; + transform: rotate(180deg); + position: absolute; + z-index: 100; + display: inline-block; + width: 0; + height: 0; + vertical-align: middle; + border-bottom: 8px solid transparent; + border-top: 8px solid transparent; + overflow: hidden; + border-right-color: #fff; + border-left: 8px solid #333; + border-right: 0 dotted; + border-left-color: #fff; + left: -7px; + right: initial; +} + +chat item.self { + justify-content: flex-end; + text-align: right; +} + +chat item.self>.main .content::after { + left: auto; + right: -7px; + border-right: 8px solid #fff; + border-left: 0 dotted; +} + +chat item.self>.main .bg-green.content::after { + border-right-color: #39b50a; +} + +chat info { + display: inline-block; + margin: 10px auto; + font-size: 12px; + padding: 4px 6px; + background-color: rgba(0, 0, 0, 0.2); + border-radius: 3px; + color: #fff; + max-width: 400rpx; + line-height: 1.4; +} + +/* ================== + 卡片 + ==================== */ + +card { + display: block; + overflow: hidden; +} + +card > item { + display: block; + background: #fff; + overflow: hidden; + border-radius: 5px; + margin: 15px; +} + +card > item.shadow-blur { + overflow: initial; +} + +card.no-card > item { + margin: 0px; + border-radius: 0px; +} + +card.case .image { + position: relative; +} + +card.case .image image { + width: 100%; +} + +card.case .image tag { + position: absolute; + right: 0; + top: 0; +} + +card.case .image bar { + position: absolute; + bottom: 0; + width: 100%; + background-color: transparent; + padding: 0px 15px; + word-wrap: normal; + text-overflow: ellipsis; + white-space: nowrap; +} + +card.case.no-card .image { + margin: 15px 15px 0; + overflow: hidden; + border-radius: 5px; +} + +card.dynamic { + display: block; +} + +card.dynamic>item { + display: block; + background-color: #fff; + overflow: hidden; +} + +card.dynamic>item > .text-content { + padding: 0 15px 0; + max-height: 6.4em; + overflow: hidden; + font-size: 15px; + margin-bottom: 10px; +} + +card.dynamic>item .square-img { + width: 100%; + height: 100px; + border-radius: 3px; +} + +card.dynamic>item .only-img { + width: 100%; + height: 160px; + border-radius: 3px; +} + +/* card.dynamic>item .comment { + padding: 10px; + background: #f1f1f1; + margin: 0 15px 15px; + border-radius: 3px; +} */ + +card.article { + display: block; +} + +card.article>item { + padding-bottom: 15px; +} + +card.article>item .title { + font-size: 15px; + font-weight: 900; + word-wrap: normal; + text-overflow: ellipsis; + white-space: nowrap; + color: #333; + line-height: 50px; + padding: 0 15px; +} + +card.article>item .content { + display: flex; + padding: 0 15px; +} + +card.article>item .content > image { + width: 120px; + height: 6.4em; + margin-right: 10px; + border-radius: 3px; +} + +card.article>item .content .desc { + flex: 1; + width: 500rpx; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +card.article>item .content .text-content { + font-size: 14px; + color: #888; + height: 4.8em; + overflow: hidden; +} + +/* ================== + 表单 + ==================== */ + +form-group { + background: #fff; + padding: 0 15px; + display: flex; + align-items: center; + min-height: 100rpx; + justify-content: space-between; +} + +form-group + form-group { + border-top: 1rpx solid #eee; +} + +form-group .title { + text-align: justify; + padding-right: 15px; + font-size: 15px; + position: relative; + height: 30px; + line-height: 30px; +} + +form-group.top { + align-items: baseline; +} + +form-group input { + flex: 1; + font-size: 15px; + color: #555; + padding-right: 10px; +} + +form-group > icon[class*="icon-"] { + font-size: 18px; + padding: 0; + box-sizing: border-box; +} + +form-group textarea, form-group textarea textarea { + margin: 16px 0 15px; + height: 4.8em; + width: 100%; + line-height: 1.2em; + flex: 1; + font-size: 14px; + padding: 0; + box-sizing: content-box; + display: inline-block; + vertical-align: top; +} + +form-group textarea::after { + content: "测试文字"; + opacity: 0; +} + +form-group .grid-square { + margin: 15px 0 0 !important; +} + +form-group picker { + flex: 1; + padding-right: 20px; + overflow: hidden; + position: relative; +} + +form-group picker .picker { + line-height: 50px; + font-size: 14px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + width: 100%; + text-align: right; +} + +form-group picker::after { + font-family: iconfont !important; + display: block; + content: "\e6a3"; + position: absolute; + font-size: 17px; + color: #aaa; + line-height: 50px; + width: 30px; + text-align: center; + top: 0; + bottom: 0; + right: -10px; + margin: auto; +} + +form-group textarea[disabled], form-group textarea[disabled] .placeholder { + color: transparent; +} + +/* ================== + 模态窗口 + ==================== */ + +modal-box { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1110; + opacity: 0; + outline: 0; + text-align: center; + -ms-transform: scale(1.185); + transform: scale(1.185); + backface-visibility: hidden; + perspective: 1000px; + background: rgba(0, 0, 0, 0.6); + transition: all 0.6s ease-in-out 0; + pointer-events: none; +} + +modal-box::before { + content: "\200B"; + display: inline-block; + height: 100%; + vertical-align: middle; +} + +modal-box.show { + opacity: 1; + transition-duration: 0.3s; + -ms-transform: scale(1); + transform: scale(1); + overflow-x: hidden; + overflow-y: auto; + pointer-events: auto; +} + +dialog { + position: relative; + display: inline-block; + vertical-align: middle; + margin-left: auto; + margin-right: auto; + width: 680rpx; + max-width: 100%; + background: #f8f8f8; + border-radius: 10rpx; + overflow: hidden; +} + +modal-box.bottom-modal::before { + vertical-align: bottom; +} + +modal-box.bottom-modal dialog { + width: 100%; + border-radius: 0; +} + +modal-box.bottom-modal { + margin-bottom: -500px; +} + +modal-box.bottom-modal.show { + margin-bottom: 0; +} + +/* ================== + 轮播 + ==================== */ + +swiper.square-dot .wx-swiper-dot { + background: #fff; + opacity: 0.4; + width: 5px !important; + height: 5px !important; + border-radius: 10px !important; + transition: all 0.3s ease-in-out 0s !important; +} + +swiper.square-dot .wx-swiper-dot.wx-swiper-dot-active { + opacity: 1; + width: 15px !important; +} + +swiper.round-dot .wx-swiper-dot { + /* background: #39b54a; */ + width: 5px !important; + height: 5px !important; + top: -2px !important; + transition: all 0.3s ease-in-out 0s !important; + position: relative; +} + +swiper.round-dot .wx-swiper-dot.wx-swiper-dot-active::after { + content: ""; + position: absolute; + width: 5px; + height: 5px; + top: 0px; + left: 0px; + right: 0; + bottom: 0; + margin: auto; + background: #fff; + border-radius: 10px; +} + +swiper.round-dot .wx-swiper-dot.wx-swiper-dot-active { + width: 9px !important; + height: 9px !important; + top: 0px !important; +} + +.screen-swiper { + min-height: 375rpx; +} + +.screen-swiper image { + width: 100%; + display: block; + height: 100%; + margin: 0; +} + +.card-swiper { + height: 420rpx; +} + +.card-swiper swiper-item { + width: 610rpx !important; + left: 70rpx !important; + box-sizing: border-box; + padding: 20px 0px 35px; + overflow: initial !important; +} + +.card-swiper swiper-item .bg-img { + width: 100%; + display: block; + height: 100%; + border-radius: 5px; + transform: scale(0.9); + transition: all 0.2s ease-in 0s; +} + +.card-swiper swiper-item.cur .bg-img { + transform: none; + transition: all 0.2s ease-in 0s; +} + +.tower-swiper { + height: 420rpx; + position: relative; +} + +.tower-swiper .tower-item { + position: absolute; + width: 300rpx; + height: 380rpx; + top: 0; + bottom: 0; + left:50%; + margin: auto; + transition: all 0.3s ease-in 0s; + opacity: 1; +} +.tower-swiper .tower-item.none { + opacity: 0; +} + +.tower-swiper .tower-item .bg-img { + width: 100%; + height: 100%; + border-radius: 3px; +} diff --git a/template/colorui-rpx.wxss b/template/colorui-rpx.wxss new file mode 100644 index 0000000..ef6c243 --- /dev/null +++ b/template/colorui-rpx.wxss @@ -0,0 +1,2969 @@ +/* + Color UI v2.0.2 | by 文晓港 + 单位为多种混合(rpx,vw,vh,em) + 仅供学习交流，如作它用所承受的法律责任一概与作者无关 + （QQ交流群：240787041） + 文档：http://www.color-ui.com/ +*/ + +/* ================== + 初始化 + ==================== */ + +page { + background: #f1f1f1; + font-size: 28rpx; + color: #333; + line-height: 1; + font-family: Helvetica Neue, Helvetica, sans-serif; +} + +view, text, custom, tag, capsule, scroll-view, swiper, button, timeline, form, +form-group, info, bar, progress-bar, input, textarea, label, navigator, list, +item, chat, image { + box-sizing: border-box; +} + +/* ================== + 布局 + ==================== */ + +/* -- flex弹性布局 -- */ + +.flex { + display: flex; +} + +.basis-xs { + flex-basis: 20%; +} + +.basis-sm { + flex-basis: 40%; +} + +.basis-df { + flex-basis: 50%; +} + +.basis-lg { + flex-basis: 60%; +} + +.basis-xl { + flex-basis: 80%; +} + +.flex-sub { + flex: 1; +} + +.flex-twice { + flex: 2; +} + +.flex-treble { + flex: 3; +} + +.flex-direction { + flex-direction: column; +} + +.flex-wrap { + flex-wrap: wrap; +} + +.align-start { + align-items: flex-start; +} + +.align-end { + align-items: flex-end; +} + +.align-center { + align-items: center; +} + +.align-stretch { + align-items: stretch; +} + +.self-start { + align-self: flex-start; +} + +.self-center { + align-self: flex-center; +} + +.self-end { + align-self: flex-end; +} + +.self-stretch { + align-self: stretch; +} + +.align-stretch { + align-items: stretch; +} + +.justify-start { + justify-content: flex-start; +} + +.justify-end { + justify-content: flex-end; +} + +.justify-center { + justify-content: center; +} + +.justify-between { + justify-content: space-between; +} + +.justify-around { + justify-content: space-around; +} + +/* grid布局 */ + +.grid { + display: flex; + flex-wrap: wrap; +} + +.grid.grid-square { + margin-bottom: -20rpx; + overflow: hidden; +} + +.grid.grid-square tag { + position: absolute; + right: 0; + top: 0; + border-bottom-left-radius: 6rpx; +} + +.grid.grid-square view> icon, .grid.grid-square item> icon { + font-size: 52rpx; + position: absolute; + color: #aaa; + margin: auto; + top: 0; + bottom: 0; + left: 0; + right: 0; +} + +.grid.grid-square view, .grid.grid-square item { + margin-right: 20rpx; + margin-bottom: 20rpx; + border-radius: 6rpx; + position: relative; + overflow: hidden; +} + +.grid.col-1.grid-square view, .grid.col-1.grid-square item { + padding-bottom: 100%; + height: 0; + margin-right: 0; +} + +.grid.col-2.grid-square view, .grid.col-2.grid-square item { + padding-bottom: calc((100% - 20rpx)/2); + height: 0; + width: calc((100% - 20rpx)/2); +} + +.grid.col-2.grid-square view:nth-child(2n), +.grid.col-2.grid-square item:nth-child(2n) { + margin-right: 0; +} + +.grid.col-3.grid-square view, .grid.col-3.grid-square item { + padding-bottom: calc((100% - 40rpx)/3); + height: 0; + width: calc((100% - 40rpx)/3); +} + +.grid.col-3.grid-square view:nth-child(3n), +.grid.col-3.grid-square item:nth-child(3n) { + margin-right: 0; +} + +.grid.col-4.grid-square view, .grid.col-4.grid-square item { + padding-bottom: calc((100% - 60rpx)/4); + height: 0; + width: calc((100% - 60rpx)/4); +} + +.grid.col-4.grid-square view:nth-child(4n), +.grid.col-4.grid-square item:nth-child(4n) { + margin-right: 0; +} + +.grid.col-5.grid-square view, .grid.col-5.grid-square item { + padding-bottom: calc((100% - 80rpx)/5); + height: 0; + width: calc((100% - 80rpx)/5); +} + +.grid.col-1>item, .grid.col-1>view { + width: 100%; +} + +.grid.col-2>item, .grid.col-2>view { + width: 50%; +} + +.grid.col-3>item, .grid.col-3>view { + width: 33.33%; +} + +.grid.col-4>item, .grid.col-4>view { + width: 25%; +} + +.grid.col-5>item, .grid.col-5>view { + width: 20%; +} + +/* -- 内外边距 -- */ + +.margin-0 { + margin: 0 !important; +} + +.margin-xs { + margin: 10rpx; +} + +.margin-sm { + margin: 20rpx; +} + +.margin { + margin: 30rpx; +} + +.margin-lg { + margin: 40rpx; +} + +.margin-xl { + margin: 50rpx; +} + +.margin-top-xs { + margin-top: 10rpx; +} + +.margin-top-sm { + margin-top: 20rpx; +} + +.margin-top { + margin-top: 30rpx; +} + +.margin-top-lg { + margin-top: 40rpx; +} + +.margin-top-xl { + margin-top: 50rpx; +} + +.margin-right-xs { + margin-right: 10rpx; +} + +.margin-right-sm { + margin-right: 20rpx; +} + +.margin-right { + margin-right: 30rpx; +} + +.margin-right-lg { + margin-right: 40rpx; +} + +.margin-right-xl { + margin-right: 50rpx; +} + +.margin-bottom-xs { + margin-bottom: 10rpx; +} + +.margin-bottom-sm { + margin-bottom: 20rpx; +} + +.margin-bottom { + margin-bottom: 30rpx; +} + +.margin-bottom-lg { + margin-bottom: 40rpx; +} + +.margin-bottom-xl { + margin-bottom: 50rpx; +} + +.margin-left-xs { + margin-left: 10rpx; +} + +.margin-left-sm { + margin-left: 20rpx; +} + +.margin-left { + margin-left: 30rpx; +} + +.margin-left-lg { + margin-left: 40rpx; +} + +.margin-left-xl { + margin-left: 50rpx; +} + +.margin-lr-xs { + margin-left: 10rpx; + margin-right: 10rpx; +} + +.margin-lr-sm { + margin-left: 20rpx; + margin-right: 20rpx; +} + +.margin-lr { + margin-left: 30rpx; + margin-right: 30rpx; +} + +.margin-lr-lg { + margin-left: 40rpx; + margin-right: 40rpx; +} + +.margin-lr-xl { + margin-left: 50rpx; + margin-right: 50rpx; +} + +.margin-tb-xs { + margin-top: 10rpx; + margin-bottom: 10rpx; +} + +.margin-tb-sm { + margin-top: 20rpx; + margin-bottom: 20rpx; +} + +.margin-tb { + margin-top: 30rpx; + margin-bottom: 30rpx; +} + +.margin-tb-lg { + margin-top: 40rpx; + margin-bottom: 40rpx; +} + +.margin-tb-xl { + margin-top: 50rpx; + margin-bottom: 50rpx; +} + +.padding-0 { + padding: 0 !important; +} + +.padding-xs { + padding: 10rpx; +} + +.padding-sm { + padding: 20rpx; +} + +.padding { + padding: 30rpx; +} + +.padding-lg { + padding: 40rpx; +} + +.padding-xl { + padding: 50rpx; +} + +.padding-top-xs { + padding-top: 10rpx; +} + +.padding-top-sm { + padding-top: 20rpx; +} + +.padding-top { + padding-top: 30rpx; +} + +.padding-top-lg { + padding-top: 40rpx; +} + +.padding-top-xl { + padding-top: 50rpx; +} + +.padding-right-xs { + padding-right: 10rpx; +} + +.padding-right-sm { + padding-right: 20rpx; +} + +.padding-right { + padding-right: 30rpx; +} + +.padding-right-lg { + padding-right: 40rpx; +} + +.padding-right-xl { + padding-right: 50rpx; +} + +.padding-bottom-xs { + padding-bottom: 10rpx; +} + +.padding-bottom-sm { + padding-bottom: 20rpx; +} + +.padding-bottom { + padding-bottom: 30rpx; +} + +.padding-bottom-lg { + padding-bottom: 40rpx; +} + +.padding-bottom-xl { + padding-bottom: 50rpx; +} + +.padding-left-xs { + padding-left: 10rpx; +} + +.padding-left-sm { + padding-left: 20rpx; +} + +.padding-left { + padding-left: 30rpx; +} + +.padding-left-lg { + padding-left: 40rpx; +} + +.padding-left-xl { + padding-left: 50rpx; +} + +.padding-lr-xs { + padding-left: 10rpx; + padding-right: 10rpx; +} + +.padding-lr-sm { + padding-left: 20rpx; + padding-right: 20rpx; +} + +.padding-lr { + padding-left: 30rpx; + padding-right: 30rpx; +} + +.padding-lr-lg { + padding-left: 40rpx; + padding-right: 40rpx; +} + +.padding-lr-xl { + padding-left: 50rpx; + padding-right: 50rpx; +} + +.padding-tb-xs { + padding-top: 10rpx; + padding-bottom: 10rpx; +} + +.padding-tb-sm { + padding-top: 20rpx; + padding-bottom: 20rpx; +} + +.padding-tb { + padding-top: 30rpx; + padding-bottom: 30rpx; +} + +.padding-tb-lg { + padding-top: 40rpx; + padding-bottom: 40rpx; +} + +.padding-tb-xl { + padding-top: 50rpx; + padding-bottom: 50rpx; +} + +/* -- 浮动 -- */ + +.cf::after, .cf::before { + content: " "; + display: table; +} + +.cf::after { + clear: both; +} + +.fl { + float: left; +} + +.fr { + float: right; +} + +/* ================== + 图片 + ==================== */ + +image { + max-width: 100%; + display: inline-block; + position: relative; + z-index: 0; +} + +image.loading::before { + content: ""; + background: #f5f5f5; + display: block; + position: absolute; + width: 100%; + height: 100%; + z-index: -2; +} + +image.loading::after { + content: "\e7f1"; + font-family: "iconfont"; + position: absolute; + top: 0; + left: 0; + width: 32rpx; + height: 32rpx; + line-height: 32rpx; + right: 0; + bottom: 0; + z-index: -1; + font-size: 32rpx; + margin: auto; + color: #ccc; + -webkit-animation: icon-spin 2s infinite linear; + animation: icon-spin 2s infinite linear; + display: block; +} + +image.response { + width: 100%; +} + +/* ================== + 开关 + ==================== */ + +switch, checkbox, radio { + position: relative; +} + +switch::after ,switch::before{ + font-family: "iconfont" !important; + content: "\e645"; + position: absolute; + color: #fff; + top: 0%; + left: 0rpx; + font-size: 32rpx; + line-height: 64rpx; + width: 64rpx; + text-align: center; + pointer-events: none; + transform: scale(0, 0); + transition: all 0.3s ease-in-out 0s; + z-index: 9; +} + +switch::before { + content: "\e646"; + right: 0; + + transform: scale(1, 1); + left: auto; +} +switch[checked]::after { + transform: scale(1, 1); +} +switch[checked]::before { + transform: scale(0, 0); +} + + + +radio::before, checkbox::before { + font-family: "iconfont" !important; + content: "\e645"; + position: absolute; + color: #fff; + top: 50%; + margin-top: -16rpx; + right: 10rpx; + font-size: 32rpx; + line-height: 32rpx; + pointer-events: none; + transform: scale(1, 1); + transition: all 0.3s ease-in-out 0s; + z-index: 9; +} + +switch[checked]::before { + transform: scale(0, 0); +} + +switch .wx-switch-input { + background: #aaa !important; + border:none; + padding: 0 60rpx; + height: 64rpx; + margin: 0; + border-radius: 100rpx; +} + +switch .wx-switch-input::after { + margin: auto !important; + width: 64rpx !important; + height: 64rpx !important; + border-radius: 100rpx; + left: 0rpx !important; + top: 0rpx !important; + bottom: 0rpx !important; + position: absolute; + transform: scale(0.9, 0.9) !important; + transition: all 0.1s ease-in-out 0s; +} +switch .wx-switch-input-checked::after { + margin: auto !important; + left: 54rpx !important; + box-shadow: none !important; +} +radio-group { + display: inline-block; +} + +radio .wx-radio-input, checkbox .wx-checkbox-input { + margin: 0; + width: 48rpx; + height: 48rpx; +} + +checkbox.round .wx-checkbox-input { + border-radius: 100rpx; +} + + + +switch.radius .wx-switch-input::after, switch.radius .wx-switch-input, +switch.radius .wx-switch-input::before { + border-radius: 10rpx; +} + +switch .wx-switch-input::before, radio.radio::before, +checkbox .wx-checkbox-input::before, radio .wx-radio-input::before { + display: none; +} + +radio.radio[checked]::after { + content: ""; + background: transparent; + display: block; + position: absolute; + width: 16rpx; + height: 16rpx; + z-index: 999; + top: 0rpx; + left: 0rpx; + right: 0; + bottom: 0; + margin: auto; + border-radius: 200rpx; + border: 16rpx solid #fff; +} + +switch.sm, checkbox.sm, radio.sm { + transform: scale(0.8); +} + +.switch-sex::after { + content: "\e71c"; +} + +.switch-sex::before { + content: "\e71a"; +} + +.switch-sex .wx-switch-input { + background: #e54d42 !important; + border-color: #e54d42; +} + +.switch-sex[checked] .wx-switch-input { + background: #0081ff !important; + border-color: #0081ff !important; +} + +/* ================== + 背景 + ==================== */ + +.line-red::after, .lines-red::after, switch.red[checked] .wx-switch-input, +checkbox.red[checked] .wx-checkbox-input, radio.red[checked] .wx-radio-input { + border-color: #e54d42 !important; +} + +.line-orange::after, .lines-orange::after, +switch.orange[checked] .wx-switch-input, +checkbox.orange[checked] .wx-checkbox-input, +radio.orange[checked] .wx-radio-input { + border-color: #f37b1d !important; +} + +.line-yellow::after, .lines-yellow::after, +switch.yellow[checked] .wx-switch-input, +checkbox.yellow[checked] .wx-checkbox-input, +radio.yellow[checked] .wx-radio-input { + border-color: #fbbd08 !important; +} + +.line-olive::after, .lines-olive::after, switch.olive[checked] .wx-switch-input, +checkbox.olive[checked] .wx-checkbox-input, radio.olive[checked] .wx-radio-input { + border-color: #8dc63f !important; +} + +.line-green::after, .lines-green::after, switch.green[checked] .wx-switch-input, +checkbox.green[checked] .wx-checkbox-input, checkbox[checked] .wx-checkbox-input, +radio.green[checked] .wx-radio-input { + border-color: #39b54a !important; +} + +.line-cyan::after, .lines-cyan::after, switch.cyan[checked] .wx-switch-input, +checkbox.cyan[checked] .wx-checkbox-input, radio.cyan[checked] .wx-radio-input { + border-color: #1cbbb4 !important; +} + +.line-blue::after, .lines-blue::after, switch.blue[checked] .wx-switch-input, +checkbox.blue[checked] .wx-checkbox-input, radio.blue[checked] .wx-radio-input { + border-color: #0081ff !important; +} + +.line-purple::after, .lines-purple::after, +switch.purple[checked] .wx-switch-input, +checkbox.purple[checked] .wx-checkbox-input, +radio.purple[checked] .wx-radio-input { + border-color: #6739b6 !important; +} + +.line-mauve::after, .lines-mauve::after, switch.mauve[checked] .wx-switch-input, +checkbox.mauve[checked] .wx-checkbox-input, radio.mauve[checked] .wx-radio-input { + border-color: #9c26b0 !important; +} + +.line-pink::after, .lines-pink::after, switch.pink[checked] .wx-switch-input, +checkbox.pink[checked] .wx-checkbox-input, radio.pink[checked] .wx-radio-input { + border-color: #e03997 !important; +} + +.line-brown::after, .lines-brown::after, switch.brown[checked] .wx-switch-input, +checkbox.brown[checked] .wx-checkbox-input, radio.brown[checked] .wx-radio-input { + border-color: #a5673f !important; +} + +.line-grey::after, .lines-grey::after, switch.grey[checked] .wx-switch-input, +checkbox.grey[checked] .wx-checkbox-input, radio.grey[checked] .wx-radio-input { + border-color: #8799a3 !important; +} + +.line-gray::after, .lines-gray::after, switch.gray[checked] .wx-switch-input, +checkbox.gray[checked] .wx-checkbox-input, radio.gray[checked] .wx-radio-input { + border-color: #aaa !important; +} + +.line-black::after, .lines-black::after, switch.black[checked] .wx-switch-input, +checkbox.black[checked] .wx-checkbox-input, radio.black[checked] .wx-radio-input { + border-color: #333 !important; +} + +.line-white::after, .lines-white::after, switch.white[checked] .wx-switch-input, +checkbox.white[checked] .wx-checkbox-input, radio.white[checked] .wx-radio-input { + border-color: #fff !important; +} + +.bg-red, switch.red[checked] .wx-switch-input, +checkbox.red[checked] .wx-checkbox-input, radio.red[checked] .wx-radio-input { + background-color: #e54d42 !important; + color: #fff !important; +} + +.bg-orange, switch.orange[checked] .wx-switch-input, +checkbox.orange[checked] .wx-checkbox-input, +radio.orange[checked] .wx-radio-input { + background-color: #f37b1d !important; + color: #fff !important; +} + +.bg-yellow, switch.yellow[checked] .wx-switch-input, +checkbox.yellow[checked] .wx-checkbox-input, +radio.yellow[checked] .wx-radio-input { + background-color: #fbbd08 !important; + color: #333 !important; +} + +.bg-olive, switch.olive[checked] .wx-switch-input, +checkbox.olive[checked] .wx-checkbox-input, radio.olive[checked] .wx-radio-input { + background-color: #8dc63f !important; + color: #fff !important; +} + +.bg-green, switch.green[checked] .wx-switch-input, +switch[checked] .wx-switch-input, checkbox.green[checked] .wx-checkbox-input, +checkbox[checked] .wx-checkbox-input, radio.green[checked] .wx-radio-input, +radio[checked] .wx-radio-input { + background-color: #39b54a !important; + color: #fff !important; +} + +.bg-cyan, switch.cyan[checked] .wx-switch-input, +checkbox.cyan[checked] .wx-checkbox-input, radio.cyan[checked] .wx-radio-input { + background-color: #1cbbb4 !important; + color: #fff !important; +} + +.bg-blue, switch.blue[checked] .wx-switch-input, +checkbox.blue[checked] .wx-checkbox-input, radio.blue[checked] .wx-radio-input { + background-color: #0081ff !important; + color: #fff !important; +} + +.bg-purple, switch.purple[checked] .wx-switch-input, +checkbox.purple[checked] .wx-checkbox-input, +radio.purple[checked] .wx-radio-input { + background-color: #6739b6 !important; + color: #fff !important; +} + +.bg-mauve, switch.mauve[checked] .wx-switch-input, +checkbox.mauve[checked] .wx-checkbox-input, radio.mauve[checked] .wx-radio-input { + background-color: #9c26b0 !important; + color: #fff !important; +} + +.bg-pink, switch.pink[checked] .wx-switch-input, +checkbox.pink[checked] .wx-checkbox-input, radio.pink[checked] .wx-radio-input { + background-color: #e03997 !important; + color: #fff !important; +} + +.bg-brown, switch.brown[checked] .wx-switch-input, +checkbox.brown[checked] .wx-checkbox-input, radio.brown[checked] .wx-radio-input { + background-color: #a5673f !important; + color: #fff !important; +} + +.bg-grey, switch.grey[checked] .wx-switch-input, +checkbox.grey[checked] .wx-checkbox-input, radio.grey[checked] .wx-radio-input { + background-color: #8799a3 !important; + color: #fff !important; +} + +.bg-gray, switch.gray[checked] .wx-switch-input, +checkbox.gray[checked] .wx-checkbox-input, radio.gray[checked] .wx-radio-input { + background-color: #f0f0f0 !important; + color: #666 !important; +} + +.bg-black, switch.black[checked] .wx-switch-input, +checkbox.black[checked] .wx-checkbox-input, radio.black[checked] .wx-radio-input { + background-color: #333 !important; + color: #fff !important; +} + +.bg-white, switch.white[checked] .wx-switch-input, +checkbox.white[checked] .wx-checkbox-input, radio.white[checked] .wx-radio-input { + background-color: #fff !important; + color: #666; +} + +.bg-shadeTop { + background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.01)); + color: #fff; +} + +.bg-shadeBottom { + background-image: linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 1)); + color: #fff; +} + +.none-bg, .line-white, .lines-white { + background-color: transparent !important; +} + +.bg-red.light { + color: #e54d42 !important; + background: #fadbd9 !important; +} + +.bg-orange.light { + color: #f37b1d !important; + background: #fde6d2 !important; +} + +.bg-yellow.light { + color: #fbbd08 !important; + background: #fef2ce !important; +} + +.bg-olive.light { + color: #8dc63f !important; + background: #e8f4d9 !important; +} + +.bg-green.light { + color: #39b54a !important; + background: #d7f0db !important; +} + +.bg-cyan.light { + color: #1cbbb4 !important; + background: #d2f1f0 !important; +} + +.bg-blue.light { + color: #0081ff !important; + background: #cce6ff !important; +} + +.bg-purple.light { + color: #6739b6 !important; + background: #e1d7f0 !important; +} + +.bg-mauve.light { + color: #9c26b0 !important; + background: #ebd4ef !important; +} + +.bg-pink.light { + color: #e03997 !important; + background: #f9d7ea !important; +} + +.bg-brown.light { + color: #a5673f !important; + background: #ede1d9 !important; +} + +.bg-grey.light { + color: #8799a3 !important; + background: #e7ebed !important; +} + +.bg-gray.light { + color: #666 !important; + background: #fadbd9 !important; +} + +.bg-gray.light { + color: #888 !important; + background: #f1f1f1 !important; +} + +.gradual-red { + background-image: linear-gradient(45deg, #f43f3b, #ec008c) !important; + color: #fff !important; +} + +.gradual-orange { + background-image: linear-gradient(45deg, #ff9700, #ed1c24) !important; + color: #fff !important; +} + +.gradual-green { + background-image: linear-gradient(45deg, #39b54a, #8dc63f) !important; + color: #fff !important; +} + +.gradual-purple { + background-image: linear-gradient(45deg, #9000ff, #5e00ff) !important; + color: #fff !important; +} + +.gradual-pink { + background-image: linear-gradient(45deg, #ec008c, #6739b6) !important; + color: #fff !important; +} + +.gradual-blue { + background-image: linear-gradient(45deg, #0081ff, #1cbbb4) !important; + color: #fff !important; +} + +button.shadow[class*="-red"] { + box-shadow: 6rpx 6rpx 8rpx rgba(204, 69, 59, 0.2) !important; +} + +button.shadow[class*="-orange"] { + box-shadow: 6rpx 6rpx 8rpx rgba(217, 109, 26, 0.2) !important; +} + +button.shadow[class*="-yellow"] { + box-shadow: 6rpx 6rpx 8rpx rgba(224, 170, 7, 0.2) !important; +} + +button.shadow[class*="-olive"] { + box-shadow: 6rpx 6rpx 8rpx rgba(124, 173, 55, 0.2) !important; +} + +button.shadow[class*="-green"] { + box-shadow: 6rpx 6rpx 8rpx rgba(48, 156, 63, 0.2) !important; +} + +button.shadow[class*="-cyan"] { + box-shadow: 6rpx 6rpx 8rpx rgba(28, 187, 180, 0.2) !important; +} + +button.shadow[class*="-blue"] { + box-shadow: 6rpx 6rpx 8rpx rgba(0, 102, 204, 0.2) !important; +} + +button.shadow[class*="-purple"] { + box-shadow: 6rpx 6rpx 8rpx rgba(88, 48, 156, 0.2) !important; +} + +button.shadow[class*="-mauve"] { + box-shadow: 6rpx 6rpx 8rpx rgba(133, 33, 150, 0.2) !important; +} + +button.shadow[class*="-pink"] { + box-shadow: 6rpx 6rpx 8rpx rgba(199, 50, 134, 0.2) !important; +} + +button.shadow[class*="-brown"] { + box-shadow: 6rpx 6rpx 8rpx rgba(140, 88, 53, 0.2) !important; +} + +button.shadow[class*="-grey"] { + box-shadow: 6rpx 6rpx 8rpx rgba(114, 130, 138, 0.2) !important; +} + +button.shadow[class*="-gray"] { + box-shadow: 6rpx 6rpx 8rpx rgba(114, 130, 138, 0.2) !important; +} + +button.shadow[class*="-black"] { + box-shadow: 6rpx 6rpx 8rpx rgba(26, 26, 26, 0.2) !important; +} + +.bg-img { + background-size: cover; + background-position: center; + background-repeat: no-repeat; +} + +.bg-mask { + background-color: #333; + position: relative; +} + +.bg-mask::after { + content: ""; + border-radius: inherit; + width: 100%; + height: 100%; + display: block; + background-color: rgba(0, 0, 0, 0.5); + position: absolute; + left: 0; + right: 0; + bottom: 0; + top: 0; +} + +.bg-mask view, .bg-mask cover-view { + z-index: 5; + position: relative; +} + +.bg-mask>cover-view { + background-color: rgba(0, 0, 0, 0.5); +} + +.bg-video { + position: relative; +} + +.bg-video video { + display: block; + height: 100%; + width: 100%; + -o-object-fit: cover; + object-fit: cover; + position: absolute; + top: 0; + z-index: 0; + pointer-events: none; +} + +/* ================== + 文本 + ==================== */ + +.text-xs { + font-size: 20rpx; +} + +.text-sm { + font-size: 24rpx; +} + +.text-df { + font-size: 28rpx; +} + +.text-lg { + font-size: 32rpx; +} + +.text-xl { + font-size: 36rpx; +} + +.text-xxl { + font-size: 44rpx; +} + +.text-sl { + font-size: 80rpx; +} + +.text-xsl { + font-size: 120rpx; +} + +.text-Abc { + text-transform: Capitalize; +} + +.text-ABC { + text-transform: Uppercase; +} + +.text-abc { + text-transform: Lowercase; +} + +.text-price::before { + content: "¥"; + font-size: 80%; + margin-right: 4rpx; +} + +.text-cut { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} + +.text-bold { + font-weight: bold; +} + +.text-center { + text-align: center; +} + +.text-content { + line-height: 1.6; +} + +.text-left { + text-align: left; +} + +.text-right { + text-align: right; +} + +.text-red, .line-red, .lines-red { + color: #e54d42 !important; +} + +.text-orange, .line-orange, .lines-orange { + color: #f37b1d !important; +} + +.text-yellow, .line-yellow, .lines-yellow { + color: #fbbd08 !important; +} + +.text-olive, .line-olive, .lines-olive { + color: #8dc63f !important; +} + +.text-green, .line-green, .lines-green { + color: #39b54a !important; +} + +.text-cyan, .line-cyan, .lines-cyan { + color: #1cbbb4 !important; +} + +.text-blue, .line-blue, .lines-blue { + color: #0081ff !important; +} + +.text-purple, .line-purple, .lines-purple { + color: #6739b6 !important; +} + +.text-mauve, .line-mauve, .lines-mauve { + color: #9c26b0 !important; +} + +.text-pink, .line-pink, .lines-pink { + color: #e03997 !important; +} + +.text-brown, .line-brown, .lines-brown { + color: #a5673f !important; +} + +.text-grey, .line-grey, .lines-grey { + color: #8799a3 !important; +} + +.text-gray, .line-gray, .lines-gray { + color: #aaa !important; +} + +.text-black, .line-black, .lines-black { + color: #333 !important; +} + +.text-white, .line-white, .lines-white { + color: #fff !important; +} + +/* ================== + 边框 + ==================== */ + +/* -- 实线 -- */ + +.solid, .solid-top, .solid-right, .solid-bottom, .solid-left, .solids, +.solids-top, .solids-right, .solids-bottom, .solids-left, .dashed, .dashed-top, +.dashed-right, .dashed-bottom, .dashed-left { + position: relative; +} + +.solid::after, .solid-top::after, .solid-right::after, .solid-bottom::after, +.solid-left::after, .solids::after, .solids-top::after, .solids-right::after, +.solids-bottom::after, .solids-left::after, .dashed::after, .dashed-top::after, +.dashed-right::after, .dashed-bottom::after, .dashed-left::after { + content: " "; + width: 200%; + height: 200%; + position: absolute; + top: 0; + left: 0; + border-radius: inherit; + transform: scale(0.5); + transform-origin: 0 0; + pointer-events: none; + box-sizing: border-box; +} + +.solid::after { + border: 1rpx solid rgba(0, 0, 0, 0.1); +} + +.solid-top::after { + border-top: 1rpx solid rgba(0, 0, 0, 0.1); +} + +.solid-right::after { + border-right: 1rpx solid rgba(0, 0, 0, 0.1); +} + +.solid-bottom::after { + border-bottom: 1rpx solid rgba(0, 0, 0, 0.1); +} + +.solid-left::after { + border-left: 1rpx solid rgba(0, 0, 0, 0.1); +} + +.solids::after { + border: 4rpx solid #eee; +} + +.solids-top::after { + border-top: 4rpx solid #eee; +} + +.solids-right::after { + border-right: 4rpx solid #eee; +} + +.solids-bottom::after { + border-bottom: 4rpx solid #eee; +} + +.solids-left::after { + border-left: 4rpx solid #eee; +} + +/* -- 虚线 -- */ + +.dashed::after { + border: 1rpx dashed #ddd; +} + +.dashed-top::after { + border-top: 1rpx dashed #ddd; +} + +.dashed-right::after { + border-right: 1rpx dashed #ddd; +} + +.dashed-bottom::after { + border-bottom: 1rpx dashed #ddd; +} + +.dashed-left::after { + border-left: 1rpx dashed #ddd; +} + +/* -- 阴影 -- */ + +.shadow { + box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.1); +} + +.shadow-lg { + box-shadow: 0rpx 40rpx 100rpx 0rpx rgba(0, 0, 0, 0.07); +} + +.shadow-warp { + position: relative; + box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1); +} + +.shadow-warp:before, .shadow-warp:after { + position: absolute; + content: ""; + top: 20rpx; + bottom: 30rpx; + left: 20rpx; + width: 50%; + box-shadow: 0 30rpx 20rpx rgba(0, 0, 0, 0.2); + transform: rotate(-3deg); + z-index: -1; +} + +.shadow-warp:after { + right: 20rpx; + left: auto; + transform: rotate(3deg); +} + +.shadow-blur { + position: relative; +} + +.shadow-blur::before { + content: ""; + display: block; + background: inherit; + filter: blur(10rpx); + position: absolute; + width: 100%; + height: 100%; + top: 10rpx; + left: 10rpx; + z-index: -1; + opacity: 0.4; + transform-origin: 0 0; + border-radius: inherit; + transform: scale(1, 1); +} + +/* ================== + 按钮 + ==================== */ + +.round, button.icon { + border-radius: 5000rpx !important; +} + +.radius { + border-radius: 6rpx !important; +} + +button { + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + padding: 20rpx 30rpx 16rpx; + font-size: 28rpx; + line-height: 1; + text-align: center; + text-decoration: none; + border-radius: 6rpx; + overflow: visible; + color: #666; + background-color: #fff !important; + margin-left: initial; + transform: translate(0rpx, 0rpx); + margin-right: initial; +} + +button::after, tag[class*="line-"]::after { + content: " "; + width: 200%; + height: 200%; + position: absolute; + top: 0; + left: 0; + border: 1rpx solid rgba(0, 0, 0, 0.2); + transform: scale(0.5); + transform-origin: 0 0; + box-sizing: border-box; + border-radius: inherit; + z-index: 1; + pointer-events: none; +} + +button[class*="line"]::after, tag.radius[class*="line"]::after { + border-radius: 12rpx; +} + +button.round[class*="line"]::after, tag.round[class*="line"]::after { + border-radius: 1000rpx; +} + +button[class*="lines"]::after { + border: 6rpx solid rgba(0, 0, 0, 0.2); +} + +button[class*="bg-"]::after { + display: none; +} + +button.sm { + padding: 14rpx 20rpx 10rpx; + font-size: 24rpx; +} + +button.lg { + padding: 32rpx 40rpx 28rpx; + font-size: 32rpx; +} + +button.icon.sm { + width: 56rpx; + height: 56rpx; +} + +button.icon { + width: 70rpx; + height: 70rpx; + padding: 0; +} + +button.icon.lg { + width: 80rpx; + height: 80rpx; +} + +button.shadow-blur::before { + top: 4rpx; + left: 4rpx; + filter: blur(6rpx); + opacity: 0.6; +} + +button.button-hover { + transform: translate(1rpx, 1rpx); +} + +.block { + display: block; +} + +button.block { + display: flex; +} + +button[disabled] { + opacity: 0.6; + color: #fff; +} + +/* ================== + 徽章 + ==================== */ + +tag { + font-size: 24rpx; + color: #666; + vertical-align: middle; + position: relative; + display: inline-flex; + align-items: stretch; + justify-content: center; + box-sizing: border-box; + padding: 12rpx 14rpx 10rpx; + line-height: 1; + background: #fff; + font-family: Helvetica Neue, Helvetica, sans-serif; +} + +tag[class*="line-"]::after { + border-radius: 0; +} + +tag+tag { + margin-left: 10rpx; +} + +tag.sm { + font-size: 20rpx; + padding: 10rpx 12rpx 6rpx; +} + +capsule { + display: inline-flex; + vertical-align: middle; +} + +capsule + capsule { + margin-left: 10rpx; +} + +capsule tag { + margin: 0; +} + +capsule tag[class*="line-"]:last-child::after { + border-left: 0rpx solid transparent !important; +} + +capsule tag[class*="line-"]:first-child::after { + border-right: 0rpx solid transparent !important; +} + +capsule.radius tag:first-child { + border-top-left-radius: 6rpx; + border-bottom-left-radius: 6rpx; +} + +capsule.radius tag:last-child::after, capsule.radius tag[class*="line-"] { + border-top-right-radius: 12rpx; + border-bottom-right-radius: 12rpx; +} + +capsule.round tag:first-child { + border-top-left-radius: 200rpx; + border-bottom-left-radius: 200rpx; + text-indent: 4rpx; +} + +capsule.round tag:last-child::after, capsule.round tag:last-child { + border-top-right-radius: 200rpx; + border-bottom-right-radius: 200rpx; + text-indent: -4rpx; +} + +tag.badge { + background: #dd514c; + border-radius: 200rpx; + position: absolute; + top: -10rpx; + right: -10rpx; + font-size: 20rpx; + padding: 6rpx 10rpx 4rpx; + color: #fff; +} + +tag:empty { + padding: 8rpx; + top: -4rpx; + right: -4rpx; +} + +/* ================== + 头像 + ==================== */ + +avatar { + font-variant: small-caps; + margin: 0; + padding: 0; + display: inline-block; + text-align: center; + background: #ccc; + color: #fff; + white-space: nowrap; + position: relative; + width: 64rpx; + height: 64rpx; + line-height: 64rpx; + background-size: cover; + background-position: center; + vertical-align: middle; +} + +avatar text { + position: absolute; + left: 50%; + display: inline-block; + transform-origin: 0 center; + transform: scale(0.75) translateX(-50%); +} + +avatar.sm { + width: 48rpx; + height: 48rpx; + line-height: 48rpx; +} + +avatar > icon { + position: absolute; + left: 50%; + top: 0; + bottom: 0; + margin: auto; + transform-origin: 0 center; + transform: scale(1.2) translateX(-50%); +} + +avatar.sm > icon { + transform: scale(0.75) translateX(-50%); +} + +avatar.lg > icon { + transform: scale(1.75) translateX(-50%); +} + +avatar.xl > icon { + transform: scale(2.2) translateX(-50%); +} + +avatar.lg { + width: 90rpx; + height: 90rpx; + line-height: 90rpx; +} + +avatar.xl { + width: 128rpx; + height: 128rpx; + line-height: 128rpx; +} + +avatar-group { + direction: rtl; + unicode-bidi: bidi-override; + padding: 0 10rpx 0 40rpx; + display: inline-block; +} + +avatar-group avatar { + margin-left: -30rpx; + border: 4rpx solid #f1f1f1; + vertical-align: middle; +} + +avatar-group avatar.sm { + margin-left: -20rpx; + border: 1rpx solid #f1f1f1; +} + +/* ================== + 进度条 + ==================== */ + +progress-bar { + overflow: hidden; + height: 28rpx; + background-color: #ebeef5; + display: inline-flex; + align-items: center; + width: 100%; +} + +progress-bar+view, progress-bar+text { + line-height: 1; +} + +progress-bar.xs { + height: 10rpx; +} + +progress-bar.sm { + height: 20rpx; +} + +progress-bar view { + width: 0; + height: 100%; + align-items: center; + display: flex; + justify-items: flex-end; + justify-content: space-around; + font-size: 20rpx; + color: #fff; + background: #0081ff; + transition: width 0.6s ease; +} + +progress-bar text { + align-items: center; + display: flex; + font-size: 20rpx; + color: #666; + text-indent: 10rpx; +} + +progress-bar.text-progress { + padding-right: 60rpx; +} + +progress-bar.striped view { + background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-size: 72rpx 72rpx; +} + +progress-bar.active view { + animation: progress-bar-stripes 2s linear infinite; +} + +@keyframes progress-bar-stripes { + from { + background-position: 72rpx 0; + } + + to { + background-position: 0 0; + } +} + +/* ================== + 加载 + ==================== */ + +load { + display: block; + line-height: 3em; + text-align: center; +} + +load::before { + font-family: "iconfont" !important; + display: inline-block; + margin-right: 6rpx; +} + +load.loading::before { + content: "\e67a"; + animation: icon-spin 2s infinite linear; +} + +load.loading::after { + content: "加载中..."; +} + +load.over::before { + content: "\e64a"; +} + +load.over::after { + content: "没有更多了"; +} + +load.erro::before { + content: "\e658"; +} + +load.erro::after { + content: "加载失败"; +} + +load.load-icon::before { + font-size: 32rpx; +} + +load.load-icon::after { + display: none; +} + +load.load-icon.over { + display: none; +} + +/* ================== + 列表 + ==================== */ + +.grayscale { + filter: grayscale(1); +} + +list.menu { + padding: 0 30rpx; + background: #fff; + display: block; +} + +list.menu.no-padding { + padding: 0; +} + +list.menu+list.menu { + margin-top: 30rpx; +} + +list+list { + margin-top: 30rpx; +} + +list.menu>item { + position: relative; + line-height: 36rpx; + font-size: 32rpx; + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1rpx solid #eee; + min-height: 100rpx; +} + +list.menu>item.cur { + background-color: #fcf7e9; +} + +list.menu>item:last-child { + border: none; +} + +list.menu.no-padding>item { + padding: 30rpx; +} + +list.menu-avatar.no-padding>item { + padding-left: 140rpx; +} + +list.menu-avatar.no-padding>item avatar { + left: 30rpx; +} + +list.menu.no-padding>item.arrow { + padding-right: 66rpx; +} + +list.menu>item .content { + line-height: 1.6em; + flex: 1; +} + +list.menu>item button.content { + padding: 0; + justify-content: flex-start; + font-size: 32rpx; +} + +list.menu>item button.content::after { + display: none; +} + +list.menu>item .content>text[class*="icon"], list.menu>item .content>image, +list.menu>item .content>icon { + margin-right: 10rpx; + display: inline-block; + width: 1.4em; + height: 1.6em; + vertical-align: middle; + text-align: center; +} + +list.menu>item .action { + text-align: right; +} + +list>item.grayscale { + background-color: #f5f5f5; +} + +list.menu>item .action tag:empty { + right: 10rpx; +} + +list.menu>item.arrow { + padding-right: 36rpx; +} + +list.menu>item.arrow::after { + font-family: "iconfont" !important; + display: block; + content: "\e6a3"; + position: absolute; + font-size: 34rpx; + color: #aaa; + line-height: 30rpx; + height: 30rpx; + width: 30rpx; + text-align: center; + top: 1rpx; + bottom: 0; + right: 0; + margin: auto; +} + +list.menu.no-padding>item.arrow::after { + right: 30rpx; +} + +list.menu>item avatar-group avatar { + border-color: #fff; +} + +list.card-menu { + margin-left: 30rpx; + margin-right: 30rpx; + border-radius: 20rpx; + overflow: hidden; +} + +list.menu-avatar>item>avatar { + position: absolute; + left: 0; +} + +list.menu-avatar>item { + padding-left: 110rpx; + height: 140rpx; +} + +list.menu>item .content tag.sm { + font-size: 16rpx; + line-height: 80%; + padding: 8rpx 6rpx 4rpx; + margin-top: -6rpx; +} + +list.grid { + text-align: center; + background: #fff; +} + +list.grid>item { + display: flex; + flex-direction: column; + border-right: 1rpx solid #eee; + border-bottom: 1rpx solid #eee; + padding: 20rpx; +} + +list.grid>item icon { + display: block; + width: 100%; + position: relative; + font-size: 48rpx; + margin-top: 20rpx; +} + +list.grid>item text { + display: block; + color: #888; + margin-top: 10rpx; + line-height: 40rpx; + font-size: 26rpx; +} + +list.grid>item tag { + left: 50%; + right: auto; + margin-left: 20rpx; +} + +list.grid.col-3>item:nth-child(3n) { + border-right: 0rpx; +} + +list.grid.col-4>item:nth-child(4n) { + border-right: 0rpx; +} + +list.grid.col-5>item:nth-child(5n) { + border-right: 0rpx; +} + +list.grid.no-border { + padding: 20rpx 10rpx; +} + +list.grid.no-border>item { + border: none !important; + padding-top: 10rpx; + padding-bottom: 10rpx; +} + +list.menu-avatar.comment > item { + height: auto; + padding-top: 30rpx; + padding-bottom: 30rpx; + padding-left: 90rpx; +} + +list.menu-avatar.comment avatar { + align-self: flex-start; +} + +/* ================== + 操作条 + ==================== */ + +bar { + display: flex; + position: relative; + align-items: center; + background: #fff; + height: 100rpx; + justify-content: space-between; + font-size: 32rpx; +} + +bar .action { + display: flex; + align-items: center; + height: 100%; + justify-content: center; + max-width: 100%; +} + +bar .action:first-child { + margin-left: 30rpx; + font-size: 30rpx; +} + +bar .action:first-child text { + display: inline-block; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + text-align: left; + width: 100%; +} + +bar avatar:first-child { + margin-left: 20rpx; +} + +bar .action:first-child >icon[class*="icon"] { + margin-left: -0.5em; +} + +bar .action:last-child { + margin-right: 30rpx; +} + +bar .action>icon[class*="icon"] { + font-size: 36rpx; + height: 100%; + width: 1.4em; +} + +bar .action>icon[class*="icon"]+icon[class*="icon"] { + margin-left: 0.5em; +} + +bar .content { + position: absolute; + text-align: center; + width: 400rpx; + left: 0; + right: 0; + bottom: 16rpx; + margin: auto; + height: 60rpx; + font-size: 36rpx; + line-height: 60rpx; + cursor: none; + pointer-events: none; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} + +bar.btn-group { + justify-content: space-around; +} + +bar.btn-group button { + padding: 20rpx 32rpx; +} + +bar.btn-group button { + flex: 1; + margin: 0 20rpx; + max-width: 50%; +} + +bar .serach-form { + background: #f5f5f5; + line-height: 64rpx; + height: 64rpx; + font-size: 24rpx; + color: #666; + flex: 1; + display: flex; + align-items: center; + margin: 0 20rpx; +} + +bar .serach-form +.action { + margin-right: 20rpx; +} + +bar .serach-form +.action text+icon { + margin-right: -0.5em; +} + +bar .serach-form input { + flex: 1; + padding-right: 20rpx; + height: 128rpx; + line-height: 128rpx; + font-size: 26rpx; +} + +bar .serach-form [class*="icon"] { + width: 2em; + height: auto; +} + +bar .serach-form.round [class*="icon"] { + margin-left: 0.5em; +} + +bar .serach-form [class*="icon"]::before { + top: 0rpx; +} + +bar.fixed, .nav.fixed { + position: fixed; + width: 100%; + top: 0; + z-index: 1024; + box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.1); +} + +bar.foot { + position: fixed; + width: 100%; + bottom: 0; + z-index: 1024; + box-shadow: 0 -1rpx 6rpx rgba(0, 0, 0, 0.1); +} + +bar.shop { + padding: 0; +} + +bar.shop .action { + font-size: 24rpx; + position: relative; + flex: 1; + text-align: center; + padding: 0 20rpx; + display: block; + height: auto !important; + line-height: 1; + margin: 0 !important; +} + +bar.shop [class*="icon"] { + width: 100rpx !important; + position: relative; + display: block; + height: auto !important; + margin: 0 auto 10rpx !important; +} + +bar.shop .submit { + align-items: center; + display: flex; + justify-content: center; + text-align: center; + position: relative; + flex: 2; + height: 100%; +} + +bar.shop .submit:last-child { + flex: 2.6; +} + +bar.shop .submit+.submit { + flex: 2; +} + +bar.shop .submit button { + margin-left: 20rpx; +} + +bar.shop .submit:last-child button { + margin-left: 0rpx; +} + +bar.shop .submit+.submit button { + margin-left: 0rpx; + margin-right: 20rpx; +} + +bar.shop .action::after { + content: " "; + width: 200%; + height: 200%; + position: absolute; + top: 0; + left: 0; + transform: scale(0.5); + transform-origin: 0 0; + border-right: 1rpx solid rgba(0, 0, 0, 0.1); +} + +bar.input { + padding-right: 20rpx; +} + +bar.input input { + overflow: initial; + line-height: 128rpx; + height: 128rpx; + min-height: 128rpx; + flex: 1; + font-size: 30rpx; + margin: 0 20rpx; +} + +bar.input .action { + margin-left: 20rpx; +} + +bar.input .action [class*="icon"] { + font-size: 48rpx; +} + +bar.input input+.action { + margin-right: 20rpx; + margin-left: 0rpx; +} + +bar.input .action:first-child [class*="icon"] { + margin-left: 0rpx; +} + +custom { + display: block; + position: relative; +} + +custom bar { + padding-right: 220rpx; + box-shadow: 0rpx 0rpx 0rpx !important; +} + +/* ================== + 导航栏 + ==================== */ + +.nav { + white-space: nowrap; +} + +::-webkit-scrollbar { + display: none; +} + +.nav item { + height: 90rpx; + display: inline-block; + line-height: 90rpx; + margin: 0 10rpx; + padding: 0 20rpx; +} + +.nav item.cur { + border-bottom: 4rpx solid; +} + +/* ================== + 时间轴 + ==================== */ + +timeline { + display: block; + background: #fff; +} + +timeline time { + width: 120rpx; + text-align: center; + padding: 20rpx 0; + font-size: 26rpx; + color: #888; + display: block; +} + +timeline>item { + padding: 30rpx 30rpx 30rpx 120rpx; + position: relative; + display: block; + color: #ccc; + z-index: 0; +} + +timeline>item::after { + content: ""; + display: block; + position: absolute; + width: 1rpx; + background: #ddd; + left: 60rpx; + height: 100%; + top: 0; + z-index: 8; +} + +timeline>item::before { + font-family: "iconfont"; + content: "\e763"; + display: block; + position: absolute; + top: 36rpx; + z-index: 9; + background: #fff; + width: 50rpx; + height: 50rpx; + text-align: center; + border: none; + line-height: 50rpx; + left: 36rpx; +} + +timeline>item[class*="icon"]::before { + background: #fff; + width: 50rpx; + height: 50rpx; + text-align: center; + border: none; + line-height: 50rpx; + left: 36rpx; +} + +timeline>item>.content { + background: #f1f1f1; + padding: 30rpx; + border-radius: 6rpx; + display: block; + color: #666; + line-height: 1.6; +} + +timeline>item>.content+.content { + margin-top: 20rpx; +} + +/* ================== + 聊天 + ==================== */ + +chat { + display: flex; + flex-direction: column; +} + +chat item { + display: flex; + padding: 30rpx 30rpx 70rpx; + position: relative; +} + +chat item>avatar { + width: 80rpx; + height: 80rpx; +} + +chat item>.main { + max-width: calc(100% - 260rpx); + margin: 0 40rpx; + display: flex; + align-items: center; +} + +chat item>image { + height: 320rpx; +} + +chat item>.main .content { + background: #fff; + padding: 20rpx; + border-radius: 6rpx; + display: inline-flex; + max-width: 100%; + align-items: center; + color: #666; + font-size: 30rpx; + position: relative; + min-height: 80rpx; + line-height: 40rpx; + text-align: left; +} + +chat item .date { + position: absolute; + font-size: 24rpx; + color: #aaa; + width: calc(100% - 320rpx); + bottom: 20rpx; + left: 160rpx; +} + +chat item .action { + padding: 0 30rpx; + display: flex; + align-items: center; +} + +chat item>.main .content::after { + content: ""; + top: 24rpx; + transform: rotate(180deg); + position: absolute; + z-index: 100; + display: inline-block; + width: 0; + height: 0; + vertical-align: middle; + border-bottom: 16rpx solid transparent; + border-top: 16rpx solid transparent; + overflow: hidden; + border-right-color: #fff; + border-left: 16rpx solid #333; + border-right: 0 dotted; + border-left-color: #fff; + left: -14rpx; + right: initial; +} + +chat item.self { + justify-content: flex-end; + text-align: right; +} + +chat item.self>.main .content::after { + left: auto; + right: -14rpx; + border-right: 16rpx solid #fff; + border-left: 0 dotted; +} + +chat item.self>.main .bg-green.content::after { + border-right-color: #39b50a; +} + +chat info { + display: inline-block; + margin: 20rpx auto; + font-size: 24rpx; + padding: 8rpx 12rpx; + background-color: rgba(0, 0, 0, 0.2); + border-radius: 6rpx; + color: #fff; + max-width: 400rpx; + line-height: 1.4; +} + +/* ================== + 卡片 + ==================== */ + +card { + display: block; + overflow: hidden; +} + +card > item { + display: block; + background: #fff; + overflow: hidden; + border-radius: 10rpx; + margin: 30rpx; +} + +card > item.shadow-blur { + overflow: initial; +} + +card.no-card > item { + margin: 0rpx; + border-radius: 0rpx; +} + +card.case .image { + position: relative; +} + +card.case .image image { + width: 100%; +} + +card.case .image tag { + position: absolute; + right: 0; + top: 0; +} + +card.case .image bar { + position: absolute; + bottom: 0; + width: 100%; + background-color: transparent; + padding: 0rpx 30rpx; + word-wrap: normal; + text-overflow: ellipsis; + white-space: nowrap; +} + +card.case.no-card .image { + margin: 30rpx 30rpx 0; + overflow: hidden; + border-radius: 10rpx; +} + +card.dynamic { + display: block; +} + +card.dynamic>item { + display: block; + background-color: #fff; + overflow: hidden; +} + +card.dynamic>item > .text-content { + padding: 0 30rpx 0; + max-height: 6.4em; + overflow: hidden; + font-size: 30rpx; + margin-bottom: 20rpx; +} + +card.dynamic>item .square-img { + width: 100%; + height: 200rpx; + border-radius: 6rpx; +} + +card.dynamic>item .only-img { + width: 100%; + height: 320rpx; + border-radius: 6rpx; +} + +/* card.dynamic>item .comment { + padding: 20rpx; + background: #f1f1f1; + margin: 0 30rpx 30rpx; + border-radius: 6rpx; +} */ + +card.article { + display: block; +} + +card.article>item { + padding-bottom: 30rpx; +} + +card.article>item .title { + font-size: 30rpx; + font-weight: 900; + word-wrap: normal; + text-overflow: ellipsis; + white-space: nowrap; + color: #333; + line-height: 100rpx; + padding: 0 30rpx; +} + +card.article>item .content { + display: flex; + padding: 0 30rpx; +} + +card.article>item .content > image { + width: 240rpx; + height: 6.4em; + margin-right: 20rpx; + border-radius: 6rpx; +} + +card.article>item .content .desc { + flex: 1; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +card.article>item .content .text-content { + font-size: 28rpx; + color: #888; + height: 4.8em; + overflow: hidden; +} + +/* ================== + 表单 + ==================== */ + +form-group { + background: #fff; + padding: 0 30rpx; + display: flex; + align-items: center; + min-height: 100rpx; + justify-content: space-between; +} + +form-group + form-group { + border-top: 1rpx solid #eee; +} + +form-group .title { + text-align: justify; + padding-right: 30rpx; + font-size: 30rpx; + position: relative; + height: 60rpx; + line-height: 60rpx; +} + +form-group.top { + align-items: baseline; +} + +form-group input { + flex: 1; + font-size: 30rpx; + color: #555; + padding-right: 20rpx; +} + +form-group > icon[class*="icon-"] { + font-size: 36rpx; + padding: 0; + box-sizing: border-box; +} + +form-group textarea, form-group textarea textarea { + margin: 32rpx 0 30rpx; + height: 4.8em; + width: 100%; + line-height: 1.2em; + flex: 1; + font-size: 28rpx; + padding: 0; + box-sizing: content-box; + display: inline-block; + vertical-align: top; +} + +form-group textarea::after { + content: "测试文字"; + opacity: 0; +} + +form-group .grid-square { + margin: 30rpx 0 0 !important; +} + +form-group picker { + flex: 1; + padding-right: 40rpx; + overflow: hidden; + position: relative; +} + +form-group picker .picker { + line-height: 100rpx; + font-size: 28rpx; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + width: 100%; + text-align: right; +} + +form-group picker::after { + font-family: iconfont !important; + display: block; + content: "\e6a3"; + position: absolute; + font-size: 34rpx; + color: #aaa; + line-height: 100rpx; + width: 60rpx; + text-align: center; + top: 0; + bottom: 0; + right: -20rpx; + margin: auto; +} + +form-group textarea[disabled], form-group textarea[disabled] .placeholder { + color: transparent; +} + +/* ================== + 模态窗口 + ==================== */ + +modal-box { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1110; + opacity: 0; + outline: 0; + text-align: center; + -ms-transform: scale(1.185); + transform: scale(1.185); + backface-visibility: hidden; + perspective: 2000rpx; + background: rgba(0, 0, 0, 0.6); + transition: all 0.6s ease-in-out 0; + pointer-events: none; +} + +modal-box::before { + content: "\200B"; + display: inline-block; + height: 100%; + vertical-align: middle; +} + +modal-box.show { + opacity: 1; + transition-duration: 0.3s; + -ms-transform: scale(1); + transform: scale(1); + overflow-x: hidden; + overflow-y: auto; + pointer-events: auto; +} + +dialog { + position: relative; + display: inline-block; + vertical-align: middle; + margin-left: auto; + margin-right: auto; + width: 680rpx; + max-width: 100%; + background: #f8f8f8; + border-radius: 10rpx; + overflow: hidden; +} + +modal-box.bottom-modal::before { + vertical-align: bottom; +} + +modal-box.bottom-modal dialog { + width: 100%; + border-radius: 0; +} + +modal-box.bottom-modal { + margin-bottom: -1000rpx; +} + +modal-box.bottom-modal.show { + margin-bottom: 0; +} + +/* ================== + 轮播 + ==================== */ + +swiper.square-dot .wx-swiper-dot { + background: #fff; + opacity: 0.4; + width: 10rpx !important; + height: 10rpx !important; + border-radius: 20rpx !important; + transition: all 0.3s ease-in-out 0s !important; +} + +swiper.square-dot .wx-swiper-dot.wx-swiper-dot-active { + opacity: 1; + width: 30rpx !important; +} + +swiper.round-dot .wx-swiper-dot { + /* background: #39b54a; */ + width: 10rpx !important; + height: 10rpx !important; + top: -4rpx !important; + transition: all 0.3s ease-in-out 0s !important; + position: relative; +} + +swiper.round-dot .wx-swiper-dot.wx-swiper-dot-active::after { + content: ""; + position: absolute; + width: 10rpx; + height: 10rpx; + top: 0rpx; + left: 0rpx; + right: 0; + bottom: 0; + margin: auto; + background: #fff; + border-radius: 20rpx; +} + +swiper.round-dot .wx-swiper-dot.wx-swiper-dot-active { + width: 18rpx !important; + height: 18rpx !important; + top: 0rpx !important; +} + +.screen-swiper { + min-height: 375rpx; +} + +.screen-swiper image { + width: 100%; + display: block; + height: 100%; + margin: 0; +} + +.card-swiper { + height: 420rpx; +} + +.card-swiper swiper-item { + width: 610rpx !important; + left: 70rpx !important; + box-sizing: border-box; + padding: 40rpx 0rpx 70rpx; + overflow: initial !important; +} + +.card-swiper swiper-item .bg-img { + width: 100%; + display: block; + height: 100%; + border-radius: 10rpx; + transform: scale(0.9); + transition: all 0.2s ease-in 0s; +} + +.card-swiper swiper-item.cur .bg-img { + transform: none; + transition: all 0.2s ease-in 0s; +} + +.tower-swiper { + height: 420rpx; + position: relative; +} + +.tower-swiper .tower-item { + position: absolute; + width: 300rpx; + height: 380rpx; + top: 0; + bottom: 0; + left: 50%; + margin: auto; + transition: all 0.3s ease-in 0s; + opacity: 1; +} + +.tower-swiper .tower-item.none { + opacity: 0; +} + +.tower-swiper .tower-item .bg-img { + width: 100%; + height: 100%; + border-radius: 6rpx; +}