This commit is contained in:
Weilanwl
2019-03-28 23:54:51 +08:00
parent d4c5eec751
commit 2e6fa65afa
16 changed files with 403 additions and 380 deletions
@@ -2,8 +2,8 @@
<view>
<view class="cu-custom" :style="[{height:CustomBar + 'px'}]">
<view class="cu-bar fixed" :style="style" :class="[bgImage!=''?'none-bg text-white bg-img':'',bgColor]">
<view class='action' @tap="BackPage" v-if="isBack">
<text class='icon-back'></text>
<view class="action" @tap="BackPage" v-if="isBack">
<text class="icon-back"></text>
<slot name="backText"></slot>
</view>
<view class="content" :style="[{top:StatusBar + 'px'}]">
+94 -82
View File
@@ -1,5 +1,5 @@
/*
ColorUi for uniApp v2.1.0 | by 文晓港 2019年3月24日18:23:51
ColorUi for uniApp v2.1.2 | by 文晓港 2019年3月27日18:23:51
仅供学习交流,如作它用所承受的法律责任一概与作者无关
使用ColorUi开发扩展与插件时,请注明基于ColorUi开发
@@ -13,7 +13,7 @@
body {
background-color: #f1f1f1;
font-size: 28upx;
color: 333;
color: #333;
font-family: Helvetica Neue, Helvetica, sans-serif;
/* Color 可以自定义相关配色 */
--red: #e54d42;
@@ -28,9 +28,9 @@ body {
--pink: #e03997;
--brown: #a5673f;
--grey: #8799a3;
--gray: #aaa;
--black: #333;
--white: #fff;
--gray: #aaaaaa;
--black: #333333;
--white: #ffffff;
--gradualRed: linear-gradient(45deg, #f43f3b, #ec008c);
--gradualOrange: linear-gradient(45deg, #ff9700, #ed1c24);
--gradualGreen: linear-gradient(45deg, #39b54a, #8dc63f);
@@ -119,7 +119,7 @@ switch::before {
font-family: "cuIcon";
content: "\e645";
position: absolute;
color: #fff !important;
color: var(--white) !important;
top: 0%;
left: 0upx;
font-size: 26upx;
@@ -154,7 +154,7 @@ checkbox::before {
font-family: "cuIcon";
content: "\e645";
position: absolute;
color: #fff !important;
color: var(--white) !important;
top: 50%;
margin-top: -8px;
right: 5px;
@@ -261,11 +261,11 @@ radio.radio .uni-radio-input-checked::after {
margin: auto;
border-radius: 200upx;
/* #ifndef MP */
border: 7px solid #fff !important;
border: 7px solid var(--white) !important;
/* #endif */
/* #ifdef MP */
border: 8px solid #fff !important;
border: 8px solid var(--white) !important;
/* #endif */
}
@@ -424,7 +424,7 @@ radio.white[checked] .wx-radio-input,
switch.white.checked .uni-switch-input,
checkbox.white.checked .uni-checkbox-input,
radio.white.checked .uni-radio-input {
border-color: #fff !important;
border-color: var(--white) !important;
}
switch.red[checked] .wx-switch-input.wx-switch-input-checked,
@@ -434,7 +434,7 @@ switch.red.checked .uni-switch-input.uni-switch-input-checked,
checkbox.red.checked .uni-checkbox-input,
radio.red.checked .uni-radio-input {
background-color: var(--red) !important;
color: #fff !important;
color: var(--white) !important;
}
switch.orange[checked] .wx-switch-input,
@@ -444,7 +444,7 @@ switch.orange.checked .uni-switch-input,
checkbox.orange.checked .uni-checkbox-input,
radio.orange.checked .uni-radio-input {
background-color: var(--orange) !important;
color: #fff !important;
color: var(--white) !important;
}
switch.yellow[checked] .wx-switch-input,
@@ -464,7 +464,7 @@ switch.olive.checked .uni-switch-input,
checkbox.olive.checked .uni-checkbox-input,
radio.olive.checked .uni-radio-input {
background-color: var(--olive) !important;
color: #fff !important;
color: var(--white) !important;
}
switch.green[checked] .wx-switch-input,
@@ -480,7 +480,7 @@ checkbox.checked .uni-checkbox-input,
radio.green.checked .uni-radio-input,
radio.checked .uni-radio-input {
background-color: var(--green) !important;
color: #fff !important;
color: var(--white) !important;
}
switch.cyan[checked] .wx-switch-input,
@@ -490,7 +490,7 @@ switch.cyan.checked .uni-switch-input,
checkbox.cyan.checked .uni-checkbox-input,
radio.cyan.checked .uni-radio-input {
background-color: var(--cyan) !important;
color: #fff !important;
color: var(--white) !important;
}
switch.blue[checked] .wx-switch-input,
@@ -500,7 +500,7 @@ switch.blue.checked .uni-switch-input,
checkbox.blue.checked .uni-checkbox-input,
radio.blue.checked .uni-radio-input {
background-color: var(--blue) !important;
color: #fff !important;
color: var(--white) !important;
}
switch.purple[checked] .wx-switch-input,
@@ -510,7 +510,7 @@ switch.purple.checked .uni-switch-input,
checkbox.purple.checked .uni-checkbox-input,
radio.purple.checked .uni-radio-input {
background-color: var(--purple) !important;
color: #fff !important;
color: var(--white) !important;
}
switch.mauve[checked] .wx-switch-input,
@@ -520,7 +520,7 @@ switch.mauve.checked .uni-switch-input,
checkbox.mauve.checked .uni-checkbox-input,
radio.mauve.checked .uni-radio-input {
background-color: var(--mauve) !important;
color: #fff !important;
color: var(--white) !important;
}
switch.pink[checked] .wx-switch-input,
@@ -530,7 +530,7 @@ switch.pink.checked .uni-switch-input,
checkbox.pink.checked .uni-checkbox-input,
radio.pink.checked .uni-radio-input {
background-color: var(--pink) !important;
color: #fff !important;
color: var(--white) !important;
}
switch.brown[checked] .wx-switch-input,
@@ -540,7 +540,7 @@ switch.brown.checked .uni-switch-input,
checkbox.brown.checked .uni-checkbox-input,
radio.brown.checked .uni-radio-input {
background-color: var(--brown) !important;
color: #fff !important;
color: var(--white) !important;
}
switch.grey[checked] .wx-switch-input,
@@ -550,7 +550,7 @@ switch.grey.checked .uni-switch-input,
checkbox.grey.checked .uni-checkbox-input,
radio.grey.checked .uni-radio-input {
background-color: var(--grey) !important;
color: #fff !important;
color: var(--white) !important;
}
switch.gray[checked] .wx-switch-input,
@@ -570,7 +570,7 @@ switch.black.checked .uni-switch-input,
checkbox.black.checked .uni-checkbox-input,
radio.black.checked .uni-radio-input {
background-color: var(--black) !important;
color: #fff !important;
color: var(--white) !important;
}
switch.white[checked] .wx-switch-input,
@@ -579,7 +579,7 @@ radio.white[checked] .wx-radio-input,
switch.white.checked .uni-switch-input,
checkbox.white.checked .uni-checkbox-input,
radio.white.checked .uni-radio-input {
background-color: #fff !important;
background-color: var(--white) !important;
color: #666 !important;
}
@@ -865,7 +865,7 @@ button.icon.lg {
.cu-btn[disabled] {
opacity: 0.6;
color: #fff;
color: var(--white);
}
/* ==================
@@ -981,7 +981,7 @@ button.icon.lg {
font-size: 20upx;
padding: 0upx 10upx;
height: 28upx;
color: #fff;
color: var(--white);
}
.cu-tag.badge:not([class*="bg-"]) {
@@ -1016,7 +1016,7 @@ button.icon.lg {
justify-content: center;
align-items: center;
background-color: #ccc;
color: #fff;
color: var(--white);
white-space: nowrap;
position: relative;
width: 64upx;
@@ -1101,7 +1101,7 @@ button.icon.lg {
justify-items: flex-end;
justify-content: space-around;
font-size: 20upx;
color: #fff;
color: var(--white);
transition: width 0.6s ease;
}
@@ -1198,7 +1198,7 @@ button.icon.lg {
margin: auto;
width: 260upx;
height: 260upx;
background-color: #fff;
background-color: var(--white);
border-radius: 10upx;
box-shadow: 0 0 0upx 2000upx rgba(0, 0, 0, 0.5);
display: flex;
@@ -1222,7 +1222,7 @@ button.icon.lg {
.cu-load.load-modal::after {
content: "";
position: absolute;
background-color: #fff;
background-color: var(--white);
border-radius: 50%;
width: 200upx;
height: 200upx;
@@ -1339,12 +1339,16 @@ button.icon.lg {
align-items: center
}
.cu-list.menu-avatar {
overflow: hidden;
}
.cu-list.menu-avatar>.cu-item {
position: relative;
display: flex;
padding-right: 30upx;
padding-right: 10upx;
height: 140upx;
background-color: #fff;
background-color: var(--white);
justify-content: flex-end;
align-items: center
}
@@ -1365,6 +1369,10 @@ button.icon.lg {
line-height: 1.6em;
}
.cu-list.menu-avatar>.cu-item .content.flex-sub {
width: calc(100% - 96upx - 60upx - 20upx);
}
.cu-list.menu-avatar>.cu-item .content>view:first-child {
font-size: 30upx;
display: flex;
@@ -1388,16 +1396,15 @@ button.icon.lg {
margin-top: 10upx
}
.cu-list.menu-avatar.comment>.cu-item .content{
.cu-list.menu-avatar.comment>.cu-item .content {
position: relative;
left: 0;
width: auto;
flex: 1;
}
.cu-list.menu-avatar.comment>.cu-item {
padding-top: 30upx;
padding-bottom: 30upx;
padding-left: 120upx;
padding: 30upx 30upx 30upx 120upx;
height: auto
}
@@ -1410,7 +1417,7 @@ button.icon.lg {
display: flex;
padding: 0 30upx;
min-height: 100upx;
background-color: #fff;
background-color: var(--white);
justify-content: space-between;
align-items: center
}
@@ -1474,7 +1481,7 @@ button.icon.lg {
}
.cu-list.menu>.cu-item .cu-avatar-group .cu-avatar {
border-color: #fff
border-color: var(--white)
}
.cu-list.menu>.cu-item .content>view:first-child {
@@ -1572,7 +1579,7 @@ button.icon.lg {
}
.cu-list.grid {
background-color: #fff;
background-color: var(--white);
text-align: center
}
@@ -1801,13 +1808,13 @@ button.icon.lg {
.cu-bar.tabbar {
padding: 0;
height: calc(100rpx + env(safe-area-inset-bottom) / 2);
height: calc(100upx + env(safe-area-inset-bottom) / 2);
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
}
.cu-tabbar-height {
min-height: 100rpx;
height: calc(100rpx + env(safe-area-inset-bottom) / 2);
min-height: 100upx;
height: calc(100upx + env(safe-area-inset-bottom) / 2);
}
.cu-bar.tabbar.shadow {
@@ -1951,7 +1958,7 @@ button.icon.lg {
.cu-bar.input {
padding-right: 20upx;
background-color: #fff;
background-color: var(--white);
}
.cu-bar.input input {
@@ -1990,6 +1997,11 @@ button.icon.lg {
width: calc(100% - 440upx);
}
.cu-custom .cu-bar .content image {
height: 60upx;
width: 240upx;
}
.cu-custom .cu-bar {
min-height: 0px;
/* #ifdef MP */
@@ -2018,7 +2030,7 @@ button.icon.lg {
transform-origin: 0 0;
pointer-events: none;
box-sizing: border-box;
border: 1upx solid #fff;
border: 1upx solid var(--white);
opacity: 0.5;
}
@@ -2036,7 +2048,7 @@ button.icon.lg {
pointer-events: none;
box-sizing: border-box;
opacity: 0.6;
background-color: #fff;
background-color: var(--white);
}
.cu-custom .cu-bar .border-custom text {
@@ -2077,7 +2089,7 @@ button.icon.lg {
.cu-timeline {
display: block;
background-color: #fff;
background-color: var(--white);
}
.cu-timeline .cu-time {
@@ -2118,7 +2130,7 @@ button.icon.lg {
position: absolute;
top: 36upx;
z-index: 9;
background-color: #fff;
background-color: var(--white);
width: 50upx;
height: 50upx;
text-align: center;
@@ -2132,7 +2144,7 @@ button.icon.lg {
}
.cu-timeline>.cu-item[class*="icon"]::before {
background-color: #fff;
background-color: var(--white);
width: 50upx;
height: 50upx;
text-align: center;
@@ -2202,7 +2214,7 @@ button.icon.lg {
}
.cu-chat .cu-item>.main .content:not([class*="bg-"]) {
background-color: #fff;
background-color: var(--white);
color: #666;
}
@@ -2280,7 +2292,7 @@ button.icon.lg {
padding: 8upx 12upx;
background-color: rgba(0, 0, 0, 0.2);
border-radius: 6upx;
color: #fff;
color: var(--white);
max-width: 400upx;
line-height: 1.4;
}
@@ -2296,7 +2308,7 @@ button.icon.lg {
.cu-card>.cu-item {
display: block;
background-color: #fff;
background-color: var(--white);
overflow: hidden;
border-radius: 10upx;
margin: 30upx;
@@ -2349,7 +2361,7 @@ button.icon.lg {
.cu-card.dynamic>.cu-item {
display: block;
background-color: #fff;
background-color: var(--white);
overflow: hidden;
}
@@ -2427,7 +2439,7 @@ button.icon.lg {
==================== */
.cu-form-group {
background-color: #fff;
background-color: var(--white);
padding: 1upx 30upx;
display: flex;
align-items: center;
@@ -2639,7 +2651,7 @@ button.icon.lg {
swiper.square-dot .wx-swiper-dot,
swiper.square-dot .uni-swiper-dot {
background-color: #fff;
background-color: var(--white);
opacity: 0.4;
width: 10upx;
height: 10upx;
@@ -2673,7 +2685,7 @@ swiper.round-dot .uni-swiper-dot.uni-swiper-dot-active::after {
right: 0;
bottom: 0;
margin: auto;
background-color: #fff;
background-color: var(--white);
border-radius: 20upx;
}
@@ -2873,19 +2885,19 @@ scroll-view.cu-steps .cu-item {
.cu-steps .cu-item[class*="text-"] .num::before {
transform: translateY(-40upx);
color: #fff;
color: var(--white);
}
.cu-steps .cu-item .num::after {
transform: translateY(40upx);
color: #fff;
color: var(--white);
transition: all 0.3s ease-in-out 0s;
}
.cu-steps .cu-item[class*="text-"] .num::after {
content: "\e645";
font-family: 'cuIcon';
color: #fff;
color: var(--white);
transform: translateY(0upx);
}
@@ -3015,7 +3027,7 @@ scroll-view.cu-steps .cu-item {
right: 0;
top: 0;
border-bottom-left-radius: 6upx;
padding: 6rpx 12rpx;
padding: 6upx 12upx;
height: auto;
background-color: rgba(0, 0, 0, 0.5);
}
@@ -3511,17 +3523,17 @@ scroll-view.cu-steps .cu-item {
.line-white::after,
.lines-white::after {
border-color: #fff;
border-color: var(--white);
}
.bg-red {
background-color: var(--red);
color: #fff;
color: var(--white);
}
.bg-orange {
background-color: var(--orange);
color: #fff;
color: var(--white);
}
.bg-yellow {
@@ -3531,47 +3543,47 @@ scroll-view.cu-steps .cu-item {
.bg-olive {
background-color: var(--olive);
color: #fff;
color: var(--white);
}
.bg-green {
background-color: var(--green);
color: #fff;
color: var(--white);
}
.bg-cyan {
background-color: var(--cyan);
color: #fff;
color: var(--white);
}
.bg-blue {
background-color: var(--blue);
color: #fff;
color: var(--white);
}
.bg-purple {
background-color: var(--purple);
color: #fff;
color: var(--white);
}
.bg-mauve {
background-color: var(--mauve);
color: #fff;
color: var(--white);
}
.bg-pink {
background-color: var(--pink);
color: #fff;
color: var(--white);
}
.bg-brown {
background-color: var(--brown);
color: #fff;
color: var(--white);
}
.bg-grey {
background-color: var(--grey);
color: #fff;
color: var(--white);
}
.bg-gray {
@@ -3581,22 +3593,22 @@ scroll-view.cu-steps .cu-item {
.bg-black {
background-color: var(--black);
color: #fff;
color: var(--white);
}
.bg-white {
background-color: #fff;
background-color: var(--white);
color: #666;
}
.bg-shadeTop {
background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.01));
color: #fff;
color: var(--white);
}
.bg-shadeBottom {
background-image: linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 1));
color: #fff;
color: var(--white);
}
.bg-red.light {
@@ -3671,32 +3683,32 @@ scroll-view.cu-steps .cu-item {
.bg-gradual-red {
background-image: var(--gradualRed);
color: #fff;
color: var(--white);
}
.bg-gradual-orange {
background-image: var(--gradualOrange);
color: #fff;
color: var(--white);
}
.bg-gradual-green {
background-image: var(--gradualGreen);
color: #fff;
color: var(--white);
}
.bg-gradual-purple {
background-image: var(--gradualPurple);
color: #fff;
color: var(--white);
}
.bg-gradual-pink {
background-image: var(--gradualPink);
color: #fff;
color: var(--white);
}
.bg-gradual-blue {
background-image: var(--gradualBlue);
color: #fff;
color: var(--white);
}
.shadow[class*="-red"] {
@@ -3969,9 +3981,9 @@ scroll-view.cu-steps .cu-item {
.text-white,
.line-white,
.lines-white {
color: #fff;
color: var(--white);
}
.text-shadow {
text-shadow: 2rpx 4rpx 6rpx rgba(0, 0, 0, 0.4);
text-shadow: 2upx 4upx 6upx rgba(0, 0, 0, 0.4);
}