mirror of
https://github.com/weilanwl/coloruicss.git
synced 2026-03-10 00:54:00 +08:00
v2.0.2 (单位全局使用rpx)
v2.0.2 (单位全局使用rpx)
This commit is contained in:
@@ -1,19 +1,20 @@
|
|||||||
@import "icon.wxss";
|
@import "icon.wxss";
|
||||||
@import "colorui.wxss";
|
@import "colorui-rpx.wxss";
|
||||||
|
@import "/pages/plugin/animation/animation.wxss";
|
||||||
|
|
||||||
.nav-list {
|
.nav-list {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
padding: 0px 20px 0px;
|
padding: 0px 40rpx 0px;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-li {
|
.nav-li {
|
||||||
color: #666;
|
color: #666;
|
||||||
padding: 15px;
|
padding: 30rpx;
|
||||||
border-radius: 6px;
|
border-radius: 12rpx;
|
||||||
width: 45%;
|
width: 45%;
|
||||||
margin: 0 2.5% 20px;
|
margin: 0 2.5% 40rpx;
|
||||||
background-image: url(https://image.weilanwl.com/color2.0/cardBg.png);
|
background-image: url(https://image.weilanwl.com/color2.0/cardBg.png);
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
@@ -30,7 +31,7 @@
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
left: 0;
|
left: 0;
|
||||||
bottom: -10%;
|
bottom: -10%;
|
||||||
border-radius: 5px;
|
border-radius: 10rpx;
|
||||||
opacity: 0.2;
|
opacity: 0.2;
|
||||||
transform: scale(0.9, 0.9);
|
transform: scale(0.9, 0.9);
|
||||||
}
|
}
|
||||||
@@ -38,23 +39,23 @@
|
|||||||
.nav-li.cur {
|
.nav-li.cur {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background: rgb(94, 185, 94);
|
background: rgb(94, 185, 94);
|
||||||
box-shadow: 2px 2px 3px rgba(94, 185, 94, 0.4);
|
box-shadow: 4rpx 4rpx 6rpx rgba(94, 185, 94, 0.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-title {
|
.nav-title {
|
||||||
font-size: 16px;
|
font-size: 32rpx;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-title::first-letter {
|
.nav-title::first-letter {
|
||||||
font-size: 20px;
|
font-size: 40rpx;
|
||||||
margin-right: 2px;
|
margin-right: 4rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-name {
|
.nav-name {
|
||||||
font-size: 14px;
|
font-size: 28rpx;
|
||||||
text-transform: Capitalize;
|
text-transform: Capitalize;
|
||||||
margin-top: 10px;
|
margin-top: 20rpx;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -62,8 +63,8 @@
|
|||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
display: block;
|
display: block;
|
||||||
width: 20px;
|
width: 40rpx;
|
||||||
height: 3px;
|
height: 6rpx;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
@@ -74,29 +75,29 @@
|
|||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
display: block;
|
display: block;
|
||||||
width: 50px;
|
width: 100rpx;
|
||||||
height: 1px;
|
height: 1px;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
right: 20px;
|
right: 40rpx;
|
||||||
opacity: 0.3;
|
opacity: 0.3;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-name::first-letter {
|
.nav-name::first-letter {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: 18px;
|
font-size: 36rpx;
|
||||||
margin-right: 1px;
|
margin-right: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-li icon {
|
.nav-li icon {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 15px;
|
right: 30rpx;
|
||||||
top: 15px;
|
top: 30rpx;
|
||||||
font-size: 26px;
|
font-size: 52rpx;
|
||||||
width: 30px;
|
width: 60rpx;
|
||||||
height: 30px;
|
height: 60rpx;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 30px;
|
line-height: 60rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-light {
|
.text-light {
|
||||||
@@ -109,7 +110,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
60% {
|
60% {
|
||||||
transform: translateY(20px);
|
transform: translateY(40rpx);
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
@@ -123,7 +124,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
60% {
|
60% {
|
||||||
transform: translateY(20px);
|
transform: translateY(40rpx);
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
/*
|
/*
|
||||||
Color UI v2.0.2 | by 文晓港
|
Color UI v2.0.2 | by 文晓港
|
||||||
|
单位为多种混合(px,rpx,vw,vh,em)
|
||||||
仅供学习交流,如作它用所承受的法律责任一概与作者无关
|
仅供学习交流,如作它用所承受的法律责任一概与作者无关
|
||||||
(QQ交流群:240787041)
|
(QQ交流群:240787041)
|
||||||
文档:http://www.color-ui.com/
|
文档:http://www.color-ui.com/
|
||||||
@@ -2414,6 +2415,7 @@ timeline>item>.content {
|
|||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
display: block;
|
display: block;
|
||||||
color: #666;
|
color: #666;
|
||||||
|
line-height: 1.6;
|
||||||
}
|
}
|
||||||
|
|
||||||
timeline>item>.content+.content {
|
timeline>item>.content+.content {
|
||||||
2968
demo/colorui-rpx.wxss
Normal file
2968
demo/colorui-rpx.wxss
Normal file
File diff suppressed because it is too large
Load Diff
@@ -615,7 +615,7 @@ switch, checkbox, radio {
|
|||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
switch::after ,switch::before{
|
switch::after, switch::before {
|
||||||
font-family: "iconfont" !important;
|
font-family: "iconfont" !important;
|
||||||
content: "\e645";
|
content: "\e645";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@@ -635,19 +635,18 @@ switch::after ,switch::before{
|
|||||||
switch::before {
|
switch::before {
|
||||||
content: "\e646";
|
content: "\e646";
|
||||||
right: 0;
|
right: 0;
|
||||||
|
|
||||||
transform: scale(1, 1);
|
transform: scale(1, 1);
|
||||||
left: auto;
|
left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
switch[checked]::after {
|
switch[checked]::after {
|
||||||
transform: scale(1, 1);
|
transform: scale(1, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
switch[checked]::before {
|
switch[checked]::before {
|
||||||
transform: scale(0, 0);
|
transform: scale(0, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
radio::before, checkbox::before {
|
radio::before, checkbox::before {
|
||||||
font-family: "iconfont" !important;
|
font-family: "iconfont" !important;
|
||||||
content: "\e645";
|
content: "\e645";
|
||||||
@@ -670,7 +669,7 @@ switch[checked]::before {
|
|||||||
|
|
||||||
switch .wx-switch-input {
|
switch .wx-switch-input {
|
||||||
background: #aaa !important;
|
background: #aaa !important;
|
||||||
border:none;
|
border: none;
|
||||||
padding: 0 60rpx;
|
padding: 0 60rpx;
|
||||||
height: 64rpx;
|
height: 64rpx;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
@@ -689,11 +688,13 @@ switch .wx-switch-input::after {
|
|||||||
transform: scale(0.9, 0.9) !important;
|
transform: scale(0.9, 0.9) !important;
|
||||||
transition: all 0.1s ease-in-out 0s;
|
transition: all 0.1s ease-in-out 0s;
|
||||||
}
|
}
|
||||||
|
|
||||||
switch .wx-switch-input-checked::after {
|
switch .wx-switch-input-checked::after {
|
||||||
margin: auto !important;
|
margin: auto !important;
|
||||||
left: 54rpx !important;
|
left: 54rpx !important;
|
||||||
box-shadow: none !important;
|
box-shadow: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
radio-group {
|
radio-group {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
@@ -708,8 +709,6 @@ checkbox.round .wx-checkbox-input {
|
|||||||
border-radius: 100rpx;
|
border-radius: 100rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
switch.radius .wx-switch-input::after, switch.radius .wx-switch-input,
|
switch.radius .wx-switch-input::after, switch.radius .wx-switch-input,
|
||||||
switch.radius .wx-switch-input::before {
|
switch.radius .wx-switch-input::before {
|
||||||
border-radius: 10rpx;
|
border-radius: 10rpx;
|
||||||
|
|||||||
Reference in New Issue
Block a user