v2.0.2 (单位全局使用rpx)

v2.0.2 (单位全局使用rpx)

demo/app.wxss

@@ -1,19 +1,20 @@
 @import "icon.wxss";
-@import "colorui.wxss";
+@import "colorui-rpx.wxss";
+@import "/pages/plugin/animation/animation.wxss";
 
 .nav-list {
   display: flex;
   flex-wrap: wrap;
-  padding: 0px 20px 0px;
+  padding: 0px 40rpx 0px;
   justify-content: space-between;
 }
 
 .nav-li {
   color: #666;
-  padding: 15px;
-  border-radius: 6px;
+  padding: 30rpx;
+  border-radius: 12rpx;
   width: 45%;
-  margin: 0 2.5% 20px;
+  margin: 0 2.5% 40rpx;
   background-image: url(https://image.weilanwl.com/color2.0/cardBg.png);
   background-size: cover;
   background-position: center;
@@ -30,7 +31,7 @@
   height: 100%;
   left: 0;
   bottom: -10%;
-  border-radius: 5px;
+  border-radius: 10rpx;
   opacity: 0.2;
   transform: scale(0.9, 0.9);
 }
@@ -38,23 +39,23 @@
 .nav-li.cur {
   color: #fff;
   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 {
-  font-size: 16px;
+  font-size: 32rpx;
   font-weight: 300;
 }
 
 .nav-title::first-letter {
-  font-size: 20px;
-  margin-right: 2px;
+  font-size: 40rpx;
+  margin-right: 4rpx;
 }
 
 .nav-name {
-  font-size: 14px;
+  font-size: 28rpx;
   text-transform: Capitalize;
-  margin-top: 10px;
+  margin-top: 20rpx;
   position: relative;
 }
 
@@ -62,8 +63,8 @@
   content: "";
   position: absolute;
   display: block;
-  width: 20px;
-  height: 3px;
+  width: 40rpx;
+  height: 6rpx;
   background: #fff;
   bottom: 0;
   right: 0;
@@ -74,29 +75,29 @@
   content: "";
   position: absolute;
   display: block;
-  width: 50px;
+  width: 100rpx;
   height: 1px;
   background: #fff;
   bottom: 0;
-  right: 20px;
+  right: 40rpx;
   opacity: 0.3;
 }
 
 .nav-name::first-letter {
   font-weight: bold;
-  font-size: 18px;
+  font-size: 36rpx;
   margin-right: 1px;
 }
 
 .nav-li icon {
   position: absolute;
-  right: 15px;
-  top: 15px;
-  font-size: 26px;
-  width: 30px;
-  height: 30px;
+  right: 30rpx;
+  top: 30rpx;
+  font-size: 52rpx;
+  width: 60rpx;
+  height: 60rpx;
   text-align: center;
-  line-height: 30px;
+  line-height: 60rpx;
 }
 
 .text-light {
@@ -109,7 +110,7 @@
   }
 
   60% {
-    transform: translateY(20px);
+    transform: translateY(40rpx);
   }
 
   100% {
@@ -123,7 +124,7 @@
   }
 
   60% {
-    transform: translateY(20px);
+    transform: translateY(40rpx);
   }
 
   100% {

demo/colorui-px.wxss

@@ -1,5 +1,6 @@
 /*
   Color UI v2.0.2 | by 文晓港 
+  单位为多种混合(px,rpx,vw,vh,em)
   仅供学习交流，如作它用所承受的法律责任一概与作者无关   
   （QQ交流群：240787041）
   文档：http://www.color-ui.com/
@@ -2414,6 +2415,7 @@ timeline>item>.content {
   border-radius: 3px;
   display: block;
   color: #666;
+  line-height: 1.6;
 }
 
 timeline>item>.content+.content {

template/colorui-rpx.wxss

@@ -615,7 +615,7 @@ switch, checkbox, radio {
   position: relative;
 }
 
-switch::after ,switch::before{
+switch::after, switch::before {
   font-family: "iconfont" !important;
   content: "\e645";
   position: absolute;
@@ -635,19 +635,18 @@ switch::after ,switch::before{
 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";
@@ -670,7 +669,7 @@ switch[checked]::before {
 
 switch .wx-switch-input {
   background: #aaa !important;
-  border:none;
+  border: none;
   padding: 0 60rpx;
   height: 64rpx;
   margin: 0;
@@ -689,11 +688,13 @@ switch .wx-switch-input::after {
   transform: scale(0.9, 0.9) !important;
   transition: all 0.1s ease-in-out 0s;
 }
-switch .wx-switch-input-checked::after {  
+
+switch .wx-switch-input-checked::after {
   margin: auto !important;
   left: 54rpx !important;
   box-shadow: none !important;
 }
+
 radio-group {
   display: inline-block;
 }
@@ -708,8 +709,6 @@ 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;