diff --git a/colorui/main.scss b/colorui/main.scss
index 9ea58f6..82df367 100644
--- a/colorui/main.scss
+++ b/colorui/main.scss
@@ -11,9 +11,9 @@
         初始化
  ==================== */
 body {
-  background-color: #f1f1f1;
-  font-size: 28upx;
-  color: #333333;
+  background-color: $ghostWhite;
+  font-size: $uni-font-size-base;
+  color: $black;
   font-family: Helvetica Neue, Helvetica, sans-serif;
 }
 
@@ -50,7 +50,7 @@ image {
 
 image.loading::before {
   content: '';
-  background-color: #f5f5f5;
+  background-color: $greyLight;
   display: block;
   position: absolute;
   width: 100%;
@@ -97,7 +97,7 @@ switch::before {
   font-family: 'cuIcon';
   content: '\e645';
   position: absolute;
-  color: #ffffff !important;
+  color: $white !important;
   top: 0%;
   left: 0upx;
   font-size: 26upx;
@@ -136,7 +136,7 @@ checkbox::before {
   font-family: 'cuIcon';
   content: '\e645';
   position: absolute;
-  color: #ffffff !important;
+  color: $white !important;
   top: 50%;
   margin-top: -8px;
   right: 5px;
@@ -180,7 +180,7 @@ switch .uni-switch-input {
 
 switch .wx-switch-input:not([class*='bg-']),
 switch .uni-switch-input:not([class*='bg-']) {
-  background: #8799a3 !important;
+  background: $grey !important;
 }
 
 switch .wx-switch-input::after,
@@ -245,11 +245,11 @@ radio.radio .uni-radio-input-checked::after {
   margin: auto;
   border-radius: 200upx;
   /* #ifndef MP */
-  border: 7px solid #ffffff !important;
+  border: 7px solid $white !important;
   /* #endif */
 
   /* #ifdef MP */
-  border: 8px solid #ffffff !important;
+  border: 8px solid $white !important;
   /* #endif */
 }
 
@@ -263,14 +263,14 @@ radio.radio .uni-radio-input-checked::after {
 
 .switch-sex .wx-switch-input,
 .switch-sex .uni-switch-input {
-  background: #e54d42 !important;
-  border-color: #e54d42 !important;
+  background: $red !important;
+  border-color: $red !important;
 }
 
 .switch-sex[checked] .wx-switch-input,
 .switch-sex.checked .uni-switch-input {
-  background: #0081ff !important;
-  border-color: #0081ff !important;
+  background: $blue !important;
+  border-color: $blue !important;
 }
 
 switch.red[checked] .wx-switch-input.wx-switch-input-checked,
@@ -279,9 +279,9 @@ radio.red[checked] .wx-radio-input,
 switch.red.checked .uni-switch-input.uni-switch-input-checked,
 checkbox.red.checked .uni-checkbox-input,
 radio.red.checked .uni-radio-input {
-  background-color: #e54d42 !important;
-  border-color: #e54d42 !important;
-  color: #ffffff !important;
+  background-color: $red !important;
+  border-color: $red !important;
+  color: $white !important;
 }
 
 switch.orange[checked] .wx-switch-input,
@@ -290,9 +290,9 @@ radio.orange[checked] .wx-radio-input,
 switch.orange.checked .uni-switch-input,
 checkbox.orange.checked .uni-checkbox-input,
 radio.orange.checked .uni-radio-input {
-  background-color: #f37b1d !important;
-  border-color: #f37b1d !important;
-  color: #ffffff !important;
+  background-color: $orange !important;
+  border-color: $orange !important;
+  color: $white !important;
 }
 
 switch.yellow[checked] .wx-switch-input,
@@ -301,9 +301,9 @@ radio.yellow[checked] .wx-radio-input,
 switch.yellow.checked .uni-switch-input,
 checkbox.yellow.checked .uni-checkbox-input,
 radio.yellow.checked .uni-radio-input {
-  background-color: #fbbd08 !important;
-  border-color: #fbbd08 !important;
-  color: #333333 !important;
+  background-color: $yellow !important;
+  border-color: $yellow !important;
+  color: $black !important;
 }
 
 switch.olive[checked] .wx-switch-input,
@@ -312,9 +312,9 @@ radio.olive[checked] .wx-radio-input,
 switch.olive.checked .uni-switch-input,
 checkbox.olive.checked .uni-checkbox-input,
 radio.olive.checked .uni-radio-input {
-  background-color: #8dc63f !important;
-  border-color: #8dc63f !important;
-  color: #ffffff !important;
+  background-color: $olive !important;
+  border-color: $olive !important;
+  color: $white !important;
 }
 
 switch.green[checked] .wx-switch-input,
@@ -329,10 +329,10 @@ checkbox.green.checked .uni-checkbox-input,
 checkbox.checked .uni-checkbox-input,
 radio.green.checked .uni-radio-input,
 radio.checked .uni-radio-input {
-  background-color: #39b54a !important;
-  border-color: #39b54a !important;
-  color: #ffffff !important;
-  border-color: #39b54a !important;
+  background-color: $green !important;
+  border-color: $green !important;
+  color: $white !important;
+  border-color: $green !important;
 }
 
 switch.cyan[checked] .wx-switch-input,
@@ -343,7 +343,7 @@ checkbox.cyan.checked .uni-checkbox-input,
 radio.cyan.checked .uni-radio-input {
   background-color: #1cbbb4 !important;
   border-color: #1cbbb4 !important;
-  color: #ffffff !important;
+  color: $white !important;
 }
 
 switch.blue[checked] .wx-switch-input,
@@ -352,9 +352,9 @@ radio.blue[checked] .wx-radio-input,
 switch.blue.checked .uni-switch-input,
 checkbox.blue.checked .uni-checkbox-input,
 radio.blue.checked .uni-radio-input {
-  background-color: #0081ff !important;
-  border-color: #0081ff !important;
-  color: #ffffff !important;
+  background-color: $blue !important;
+  border-color: $blue !important;
+  color: $white !important;
 }
 
 switch.purple[checked] .wx-switch-input,
@@ -363,9 +363,9 @@ radio.purple[checked] .wx-radio-input,
 switch.purple.checked .uni-switch-input,
 checkbox.purple.checked .uni-checkbox-input,
 radio.purple.checked .uni-radio-input {
-  background-color: #6739b6 !important;
-  border-color: #6739b6 !important;
-  color: #ffffff !important;
+  background-color: $purple !important;
+  border-color: $purple !important;
+  color: $white !important;
 }
 
 switch.mauve[checked] .wx-switch-input,
@@ -374,9 +374,9 @@ radio.mauve[checked] .wx-radio-input,
 switch.mauve.checked .uni-switch-input,
 checkbox.mauve.checked .uni-checkbox-input,
 radio.mauve.checked .uni-radio-input {
-  background-color: #9c26b0 !important;
-  border-color: #9c26b0 !important;
-  color: #ffffff !important;
+  background-color: $mauve !important;
+  border-color: $mauve !important;
+  color: $white !important;
 }
 
 switch.pink[checked] .wx-switch-input,
@@ -385,9 +385,9 @@ radio.pink[checked] .wx-radio-input,
 switch.pink.checked .uni-switch-input,
 checkbox.pink.checked .uni-checkbox-input,
 radio.pink.checked .uni-radio-input {
-  background-color: #e03997 !important;
-  border-color: #e03997 !important;
-  color: #ffffff !important;
+  background-color: $pink !important;
+  border-color: $pink !important;
+  color: $white !important;
 }
 
 switch.brown[checked] .wx-switch-input,
@@ -396,9 +396,9 @@ radio.brown[checked] .wx-radio-input,
 switch.brown.checked .uni-switch-input,
 checkbox.brown.checked .uni-checkbox-input,
 radio.brown.checked .uni-radio-input {
-  background-color: #a5673f !important;
-  border-color: #a5673f !important;
-  color: #ffffff !important;
+  background-color: $brown !important;
+  border-color: $brown !important;
+  color: $white !important;
 }
 
 switch.grey[checked] .wx-switch-input,
@@ -407,9 +407,9 @@ radio.grey[checked] .wx-radio-input,
 switch.grey.checked .uni-switch-input,
 checkbox.grey.checked .uni-checkbox-input,
 radio.grey.checked .uni-radio-input {
-  background-color: #8799a3 !important;
-  border-color: #8799a3 !important;
-  color: #ffffff !important;
+  background-color: $grey !important;
+  border-color: $grey !important;
+  color: $white !important;
 }
 
 switch.gray[checked] .wx-switch-input,
@@ -418,9 +418,9 @@ radio.gray[checked] .wx-radio-input,
 switch.gray.checked .uni-switch-input,
 checkbox.gray.checked .uni-checkbox-input,
 radio.gray.checked .uni-radio-input {
-  background-color: #f0f0f0 !important;
-  border-color: #f0f0f0 !important;
-  color: #333333 !important;
+  background-color: $gray !important;
+  border-color: $gray !important;
+  color: $black !important;
 }
 
 switch.black[checked] .wx-switch-input,
@@ -429,9 +429,9 @@ radio.black[checked] .wx-radio-input,
 switch.black.checked .uni-switch-input,
 checkbox.black.checked .uni-checkbox-input,
 radio.black.checked .uni-radio-input {
-  background-color: #333333 !important;
-  border-color: #333333 !important;
-  color: #ffffff !important;
+  background-color: $black !important;
+  border-color: $black !important;
+  color: $white !important;
 }
 
 switch.white[checked] .wx-switch-input,
@@ -440,9 +440,9 @@ 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: #ffffff !important;
-  border-color: #ffffff !important;
-  color: #333333 !important;
+  background-color: $white !important;
+  border-color: $white !important;
+  color: $black !important;
 }
 
 /* ==================
@@ -642,7 +642,7 @@ radio.white.checked .uni-radio-input {
 }
 
 .cu-btn:not([class*='bg-']) {
-  background-color: #f0f0f0;
+  background-color: $gray;
 }
 
 .cu-btn[class*='line'] {
@@ -728,7 +728,7 @@ button.cuIcon.lg {
 
 .cu-btn[disabled] {
   opacity: 0.6;
-  color: #ffffff;
+  color: $white;
 }
 
 /* ==================
@@ -750,7 +750,7 @@ button.cuIcon.lg {
 }
 
 .cu-tag:not([class*='bg']):not([class*='line']) {
-  background-color: #f1f1f1;
+  background-color: $ghostWhite;
 }
 
 .cu-tag[class*='line-']::after {
@@ -844,7 +844,7 @@ button.cuIcon.lg {
   font-size: 20upx;
   padding: 0upx 10upx;
   height: 28upx;
-  color: #ffffff;
+  color: $white;
 }
 
 .cu-tag.badge:not([class*='bg-']) {
@@ -879,7 +879,7 @@ button.cuIcon.lg {
   justify-content: center;
   align-items: center;
   background-color: #ccc;
-  color: #ffffff;
+  color: $white;
   white-space: nowrap;
   position: relative;
   width: 64upx;
@@ -921,13 +921,13 @@ button.cuIcon.lg {
 
 .cu-avatar-group .cu-avatar {
   margin-left: -30upx;
-  border: 4upx solid #f1f1f1;
+  border: 4upx solid $ghostWhite;
   vertical-align: middle;
 }
 
 .cu-avatar-group .cu-avatar.sm {
   margin-left: -20upx;
-  border: 1upx solid #f1f1f1;
+  border: 1upx solid $ghostWhite;
 }
 
 /* ==================
@@ -964,7 +964,7 @@ button.cuIcon.lg {
   justify-items: flex-end;
   justify-content: space-around;
   font-size: 20upx;
-  color: #ffffff;
+  color: $white;
   transition: width 0.6s ease;
 }
 
@@ -972,7 +972,7 @@ button.cuIcon.lg {
   align-items: center;
   display: flex;
   font-size: 20upx;
-  color: #333333;
+  color: $black;
   text-indent: 10upx;
 }
 
@@ -1070,7 +1070,7 @@ button.cuIcon.lg {
   margin: auto;
   width: 260upx;
   height: 260upx;
-  background-color: #ffffff;
+  background-color: $white;
   border-radius: 10upx;
   box-shadow: 0 0 0upx 2000upx rgba(0, 0, 0, 0.5);
   display: flex;
@@ -1094,7 +1094,7 @@ button.cuIcon.lg {
 .cu-load.load-modal::after {
   content: '';
   position: absolute;
-  background-color: #ffffff;
+  background-color: $white;
   border-radius: 50%;
   width: 200upx;
   height: 200upx;
@@ -1102,7 +1102,7 @@ button.cuIcon.lg {
   border-top: 6upx solid rgba(0, 0, 0, 0.05);
   border-right: 6upx solid rgba(0, 0, 0, 0.05);
   border-bottom: 6upx solid rgba(0, 0, 0, 0.05);
-  border-left: 6upx solid #f37b1d;
+  border-left: 6upx solid $orange;
   animation: cuIcon-spin 1s infinite linear;
   z-index: -1;
 }
@@ -1220,7 +1220,7 @@ button.cuIcon.lg {
   display: flex;
   padding-right: 10upx;
   height: 140upx;
-  background-color: #ffffff;
+  background-color: $white;
   justify-content: flex-end;
   align-items: center;
 }
@@ -1287,9 +1287,9 @@ button.cuIcon.lg {
 .cu-list.menu > .cu-item {
   position: relative;
   display: flex;
-  padding: 0 30upx;
+  padding: 30upx 10upx;
   min-height: 100upx;
-  background-color: #ffffff;
+  background-color: $white;
   justify-content: space-between;
   align-items: center;
 }
@@ -1315,7 +1315,7 @@ button.cuIcon.lg {
 }
 
 .cu-list.menu > .cu-item.grayscale {
-  background-color: #f5f5f5;
+  background-color: $greyLight;
 }
 
 .cu-list.menu > .cu-item.cur {
@@ -1335,7 +1335,7 @@ button.cuIcon.lg {
   margin: auto;
   width: 30upx;
   height: 30upx;
-  color: #8799a3;
+  color: $grey;
   content: '\e6a3';
   text-align: center;
   font-size: 34upx;
@@ -1354,7 +1354,7 @@ button.cuIcon.lg {
 }
 
 .cu-list.menu > .cu-item .cu-avatar-group .cu-avatar {
-  border-color: #ffffff;
+  border-color: $white;
 }
 
 .cu-list.menu > .cu-item .content > view:first-child {
@@ -1452,7 +1452,7 @@ button.cuIcon.lg {
 }
 
 .cu-list.grid {
-  background-color: #ffffff;
+  background-color: $white;
   text-align: center;
 }
 
@@ -1630,11 +1630,11 @@ button.cuIcon.lg {
 }
 
 .cu-bar .search-form {
-  background-color: #f5f5f5;
+  background-color: $greyLight;
   line-height: 64upx;
   height: 64upx;
   font-size: 24upx;
-  color: #333333;
+  color: $black;
   flex: 1;
   display: flex;
   align-items: center;
@@ -1831,7 +1831,7 @@ button.cuIcon.lg {
 
 .cu-bar.input {
   padding-right: 20upx;
-  background-color: #ffffff;
+  background-color: $white;
 }
 
 .cu-bar.input input {
@@ -1913,7 +1913,7 @@ button.cuIcon.lg {
   transform-origin: 0 0;
   pointer-events: none;
   box-sizing: border-box;
-  border: 1upx solid #ffffff;
+  border: 1upx solid $white;
   opacity: 0.5;
 }
 
@@ -1931,7 +1931,7 @@ button.cuIcon.lg {
   pointer-events: none;
   box-sizing: border-box;
   opacity: 0.6;
-  background-color: #ffffff;
+  background-color: $white;
 }
 
 .cu-custom .cu-bar .border-custom text {
@@ -1972,7 +1972,7 @@ button.cuIcon.lg {
 
 .cu-timeline {
   display: block;
-  background-color: #ffffff;
+  background-color: $white;
 }
 
 .cu-timeline .cu-time {
@@ -2013,7 +2013,7 @@ button.cuIcon.lg {
   position: absolute;
   top: 36upx;
   z-index: 9;
-  background-color: #ffffff;
+  background-color: $white;
   width: 50upx;
   height: 50upx;
   text-align: center;
@@ -2027,7 +2027,7 @@ button.cuIcon.lg {
 }
 
 .cu-timeline > .cu-item[class*='cuIcon-']::before {
-  background-color: #ffffff;
+  background-color: $white;
   width: 50upx;
   height: 50upx;
   text-align: center;
@@ -2044,8 +2044,8 @@ button.cuIcon.lg {
 }
 
 .cu-timeline > .cu-item > .content:not([class*='bg-']) {
-  background-color: #f1f1f1;
-  color: #333333;
+  background-color: $ghostWhite;
+  color: $black;
 }
 
 .cu-timeline > .cu-item > .content + .content {
@@ -2097,14 +2097,14 @@ button.cuIcon.lg {
 }
 
 .cu-chat .cu-item > .main .content:not([class*='bg-']) {
-  background-color: #ffffff;
-  color: #333333;
+  background-color: $white;
+  color: $black;
 }
 
 .cu-chat .cu-item .date {
   position: absolute;
   font-size: 24upx;
-  color: #8799a3;
+  color: $grey;
   width: calc(100% - 320upx);
   bottom: 20upx;
   left: 160upx;
@@ -2154,7 +2154,7 @@ button.cuIcon.lg {
 }
 
 .cu-chat .cu-item > .main .content:not([class*='bg-'])::before {
-  background-color: #333333;
+  background-color: $black;
   opacity: 0.1;
 }
 
@@ -2175,7 +2175,7 @@ button.cuIcon.lg {
   padding: 8upx 12upx;
   background-color: rgba(0, 0, 0, 0.2);
   border-radius: 6upx;
-  color: #ffffff;
+  color: $white;
   max-width: 400upx;
   line-height: 1.4;
 }
@@ -2191,7 +2191,7 @@ button.cuIcon.lg {
 
 .cu-card > .cu-item {
   display: block;
-  background-color: #ffffff;
+  background-color: $white;
   overflow: hidden;
   border-radius: 10upx;
   margin: 30upx;
@@ -2244,7 +2244,7 @@ button.cuIcon.lg {
 
 .cu-card.dynamic > .cu-item {
   display: block;
-  background-color: #ffffff;
+  background-color: $white;
   overflow: hidden;
 }
 
@@ -2270,7 +2270,7 @@ button.cuIcon.lg {
 
 /* card.dynamic>.cu-item .comment {
   padding: 20upx;
-  background-color: #f1f1f1;
+  background-color: $ghostWhite;
   margin: 0 30upx 30upx;
   border-radius: 6upx;
 } */
@@ -2286,7 +2286,7 @@ button.cuIcon.lg {
 .cu-card.article > .cu-item .title {
   font-size: 30upx;
   font-weight: 900;
-  color: #333333;
+  color: $black;
   line-height: 100upx;
   padding: 0 30upx;
 }
@@ -2322,7 +2322,7 @@ button.cuIcon.lg {
  ==================== */
 
 .cu-form-group {
-  background-color: #ffffff;
+  background-color: $white;
   padding: 1upx 30upx;
   display: flex;
   align-items: center;
@@ -2395,7 +2395,7 @@ button.cuIcon.lg {
   content: '\e6a3';
   position: absolute;
   font-size: 34upx;
-  color: #8799a3;
+  color: $grey;
   line-height: 100upx;
   width: 60upx;
   text-align: center;
@@ -2533,7 +2533,7 @@ swiper[class*='-dot'] .uni-swiper-dots {
 swiper.square-dot .wx-swiper-dot,
 swiper.square-dot .a-swiper-dot,
 swiper.square-dot .uni-swiper-dot {
-  background-color: #ffffff;
+  background-color: $white;
   opacity: 0.4;
   width: 10upx;
   height: 10upx;
@@ -2569,7 +2569,7 @@ swiper.round-dot .uni-swiper-dot.uni-swiper-dot-active::after {
   right: 0;
   bottom: 0;
   margin: auto;
-  background-color: #ffffff;
+  background-color: $white;
   border-radius: 20upx;
 }
 
@@ -2677,7 +2677,7 @@ scroll-view.cu-steps .cu-item {
 }
 
 .cu-steps .cu-item:not([class*='text-']) {
-  color: #8799a3;
+  color: $grey;
 }
 
 .cu-steps .cu-item [class*='cuIcon-'],
@@ -2768,19 +2768,19 @@ scroll-view.cu-steps .cu-item {
 
 .cu-steps .cu-item[class*='text-'] .num::before {
   transform: translateY(-40upx);
-  color: #ffffff;
+  color: $white;
 }
 
 .cu-steps .cu-item .num::after {
   transform: translateY(40upx);
-  color: #ffffff;
+  color: $white;
   transition: all 0.3s ease-in-out 0s;
 }
 
 .cu-steps .cu-item[class*='text-'] .num::after {
   content: '\e645';
   font-family: 'cuIcon';
-  color: #ffffff;
+  color: $white;
   transform: translateY(0upx);
 }
 
@@ -2918,7 +2918,7 @@ scroll-view.cu-steps .cu-item {
 .grid.grid-square > view > text[class*='cuIcon-'] {
   font-size: 52upx;
   position: absolute;
-  color: #8799a3;
+  color: $grey;
   margin: auto;
   top: 0;
   bottom: 0;
@@ -3410,368 +3410,368 @@ scroll-view.cu-steps .cu-item {
 
 .bg-red {
 	background-color: $red;
-	color: #ffffff;
+	color: $white;
 }
 
 .bg-orange {
 	background-color: $orange;
-	color: #ffffff;
+	color: $white;
 }
 
 .bg-yellow {
 	background-color: $yellow;
-	color: #333333;
+	color: $black;
 }
 
 .bg-olive {
 	background-color: $olive;
-	color: #ffffff;
+	color: $white;
 }
 
 .bg-green {
 	background-color: $green;
-	color: #ffffff;
+	color: $white;
 }
 
 .bg-cyan {
 	background-color: $cyan;
-	color: #ffffff;
+	color: $white;
 }
 
 .bg-blue {
 	background-color: $blue;
-	color: #ffffff;
+	color: $white;
 }
 
 .bg-purple {
 	background-color: $purple;
-	color: #ffffff;
+	color: $white;
 }
 
 .bg-mauve {
 	background-color: $mauve;
-	color: #ffffff;
+	color: $white;
 }
 
 .bg-pink {
 	background-color: $pink;
-	color: #ffffff;
+	color: $white;
 }
 
 .bg-brown {
 	background-color: $brown;
-	color: #ffffff;
+	color: $white;
 }
 
 .bg-grey {
 	background-color: $grey;
-	color: #ffffff;
+	color: $white;
 }
 
 .bg-gray {
 	background-color: $gray;
-	color: #333333;
+	color: $black;
 }
 
 .bg-black {
 	background-color: $black;
-	color: #ffffff;
+	color: $white;
 }
 
 .bg-white {
 	background-color: $white;
-	color: #666666;
+	color: $darkGray;
 }
 
 .bg-red {
-  background-color: #e54d42;
-  color: #ffffff;
+  background-color: $red;
+  color: $white;
 }
 
 .bg-orange {
-  background-color: #f37b1d;
-  color: #ffffff;
+  background-color: $orange;
+  color: $white;
 }
 
 .bg-yellow {
-  background-color: #fbbd08;
-  color: #333333;
+  background-color: $yellow;
+  color: $black;
 }
 
 .bg-olive {
-  background-color: #8dc63f;
-  color: #ffffff;
+  background-color: $olive;
+  color: $white;
 }
 
 .bg-green {
-  background-color: #39b54a;
-  color: #ffffff;
+  background-color: $green;
+  color: $white;
 }
 
 .bg-cyan {
-  background-color: #1cbbb4;
-  color: #ffffff;
+  background-color: $cyan;
+  color: $white;
 }
 
 .bg-blue {
-  background-color: #0081ff;
-  color: #ffffff;
+  background-color: $blue;
+  color: $white;
 }
 
 .bg-purple {
-  background-color: #6739b6;
-  color: #ffffff;
+  background-color: $purple;
+  color: $white;
 }
 
 .bg-mauve {
-  background-color: #9c26b0;
-  color: #ffffff;
+  background-color: $mauve;
+  color: $white;
 }
 
 .bg-pink {
-  background-color: #e03997;
-  color: #ffffff;
+  background-color: $pink;
+  color: $white;
 }
 
 .bg-brown {
-  background-color: #a5673f;
-  color: #ffffff;
+  background-color: $brown;
+  color: $white;
 }
 
 .bg-grey {
-  background-color: #8799a3;
-  color: #ffffff;
+  background-color: $grey;
+  color: $white;
 }
 
 .bg-gray {
-  background-color: #f0f0f0;
-  color: #333333;
+  background-color: $gray;
+  color: $black;
 }
 
 .bg-black {
-  background-color: #333333;
-  color: #ffffff;
+  background-color: $black;
+  color: $white;
 }
 
 .bg-white {
-  background-color: #ffffff;
-  color: #666666;
+  background-color: $white;
+  color: $darkGray;
 }
 
 .bg-shadeTop {
   background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.01));
-  color: #ffffff;
+  color: $white;
 }
 
 .bg-shadeBottom {
   background-image: linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 1));
-  color: #ffffff;
+  color: $white;
 }
 
 .bg-red.light {
-  color: #e54d42;
-  background-color: #fadbd9;
+  color: $red;
+  background-color: $redLight;
 }
 
 .bg-orange.light {
-  color: #f37b1d;
-  background-color: #fde6d2;
+  color: $orange;
+  background-color: $orangeLight;
 }
 
 .bg-yellow.light {
-  color: #fbbd08;
-  background-color: #fef2ced2;
+  color: $yellow;
+  background-color: $yellowLight;
 }
 
 .bg-olive.light {
-  color: #8dc63f;
-  background-color: #e8f4d9;
+  color: $olive;
+  background-color: $oliveLight;
 }
 
 .bg-green.light {
-  color: #39b54a;
-  background-color: #d7f0dbff;
+  color: $green;
+  background-color: $greenLight;
 }
 
 .bg-cyan.light {
-  color: #1cbbb4;
-  background-color: #d2f1f0;
+  color: $cyan;
+  background-color: $cyanLight;
 }
 
 .bg-blue.light {
-  color: #0081ff;
-  background-color: #cce6ff;
+  color: $blue;
+  background-color: $blueLight;
 }
 
 .bg-purple.light {
-  color: #6739b6;
-  background-color: #e1d7f0;
+  color: $purple;
+  background-color: $purpleLight;
 }
 
 .bg-mauve.light {
-  color: #9c26b0;
-  background-color: #ebd4ef;
+  color: $mauve;
+  background-color: $mauveLight;
 }
 
 .bg-pink.light {
-  color: #e03997;
-  background-color: #f9d7ea;
+  color: $pink;
+  background-color: $pinkLight;
 }
 
 .bg-brown.light {
-  color: #a5673f;
-  background-color: #ede1d9;
+  color: $brown;
+  background-color: $brownLight;
 }
 
 .bg-grey.light {
-  color: #8799a3;
-  background-color: #e7ebed;
+  color: $grey;
+  background-color: $greyLight;
 }
 
 .bg-gradual-red {
-  background-image: linear-gradient(45deg, #f43f3b, #ec008c);
-  color: #ffffff;
+  background-image: $gradualRed;
+  color: $white;
 }
 
 .bg-gradual-orange {
-  background-image: linear-gradient(45deg, #ff9700, #ed1c24);
-  color: #ffffff;
+  background-image: $gradualOrange;
+  color: $white;
 }
 
 .bg-gradual-green {
-  background-image: linear-gradient(45deg, #39b54a, #8dc63f);
-  color: #ffffff;
+  background-image: $gradualGreen;
+  color: $white;
 }
 
 .bg-gradual-purple {
-  background-image: linear-gradient(45deg, #9000ff, #5e00ff);
-  color: #ffffff;
+  background-image: $gradualPurple;
+  color: $white;
 }
 
 .bg-gradual-pink {
-  background-image: linear-gradient(45deg, #ec008c, #6739b6);
-  color: #ffffff;
+  background-image: $gradualPink;
+  color: $white;
 }
 
 .bg-gradual-blue {
-  background-image: linear-gradient(45deg, #0081ff, #1cbbb4);
-  color: #ffffff;
+  background-image: $gradualBlue;
+  color: $white;
 }
 
 .shadow[class*='-red'] {
-  box-shadow: 6upx 6upx 8upx rgba(204, 69, 59, 0.2);
+  box-shadow: $ShadowSize $redShadow;
 }
 
 .shadow[class*='-orange'] {
-  box-shadow: 6upx 6upx 8upx rgba(217, 109, 26, 0.2);
+  box-shadow: $ShadowSize $orangeShadow;
 }
 
 .shadow[class*='-yellow'] {
-  box-shadow: 6upx 6upx 8upx rgba(224, 170, 7, 0.2);
+  box-shadow: $ShadowSize $yellowShadow;
 }
 
 .shadow[class*='-olive'] {
-  box-shadow: 6upx 6upx 8upx rgba(124, 173, 55, 0.2);
+  box-shadow: $ShadowSize $oliveShadow;
 }
 
 .shadow[class*='-green'] {
-  box-shadow: 6upx 6upx 8upx rgba(48, 156, 63, 0.2);
+  box-shadow: $ShadowSize $greenShadow;
 }
 
 .shadow[class*='-cyan'] {
-  box-shadow: 6upx 6upx 8upx rgba(28, 187, 180, 0.2);
+  box-shadow: $ShadowSize $cyanShadow;
 }
 
 .shadow[class*='-blue'] {
-  box-shadow: 6upx 6upx 8upx rgba(0, 102, 204, 0.2);
+  box-shadow: $ShadowSize $blueShadow;
 }
 
 .shadow[class*='-purple'] {
-  box-shadow: 6upx 6upx 8upx rgba(88, 48, 156, 0.2);
+  box-shadow: $ShadowSize $blueShadow;
 }
 
 .shadow[class*='-mauve'] {
-  box-shadow: 6upx 6upx 8upx rgba(133, 33, 150, 0.2);
+  box-shadow: $ShadowSize $mauveShadow;
 }
 
 .shadow[class*='-pink'] {
-  box-shadow: 6upx 6upx 8upx rgba(199, 50, 134, 0.2);
+  box-shadow: $ShadowSize $pinkShadow;
 }
 
 .shadow[class*='-brown'] {
-  box-shadow: 6upx 6upx 8upx rgba(140, 88, 53, 0.2);
+  box-shadow: $ShadowSize $brownShadow;
 }
 
 .shadow[class*='-grey'] {
-  box-shadow: 6upx 6upx 8upx rgba(114, 130, 138, 0.2);
+  box-shadow: $ShadowSize $greyShadow;
 }
 
 .shadow[class*='-gray'] {
-  box-shadow: 6upx 6upx 8upx rgba(114, 130, 138, 0.2);
+  box-shadow: $ShadowSize $grayShadow;
 }
 
 .shadow[class*='-black'] {
-  box-shadow: 6upx 6upx 8upx rgba(26, 26, 26, 0.2);
+  box-shadow: $ShadowSize $blackShadow;
 }
 
 .shadow[class*='-white'] {
-  box-shadow: 6upx 6upx 8upx rgba(26, 26, 26, 0.2);
+  box-shadow: $ShadowSize $blackShadow;
 }
 
 .text-shadow[class*='-red'] {
-  text-shadow: 6upx 6upx 8upx rgba(204, 69, 59, 0.2);
+  text-shadow: $ShadowSize $redShadow;
 }
 
 .text-shadow[class*='-orange'] {
-  text-shadow: 6upx 6upx 8upx rgba(217, 109, 26, 0.2);
+  text-shadow: $ShadowSize $orangeShadow;
 }
 
 .text-shadow[class*='-yellow'] {
-  text-shadow: 6upx 6upx 8upx rgba(224, 170, 7, 0.2);
+  text-shadow: $ShadowSize $yellowShadow;
 }
 
 .text-shadow[class*='-olive'] {
-  text-shadow: 6upx 6upx 8upx rgba(124, 173, 55, 0.2);
+  text-shadow: $ShadowSize $oliveShadow;
 }
 
 .text-shadow[class*='-green'] {
-  text-shadow: 6upx 6upx 8upx rgba(48, 156, 63, 0.2);
+  text-shadow: $ShadowSize $greenShadow;
 }
 
 .text-shadow[class*='-cyan'] {
-  text-shadow: 6upx 6upx 8upx rgba(28, 187, 180, 0.2);
+  text-shadow: $ShadowSize $cyanShadow;
 }
 
 .text-shadow[class*='-blue'] {
-  text-shadow: 6upx 6upx 8upx rgba(0, 102, 204, 0.2);
+  text-shadow: $ShadowSize $blueShadow;
 }
 
 .text-shadow[class*='-purple'] {
-  text-shadow: 6upx 6upx 8upx rgba(88, 48, 156, 0.2);
+  text-shadow: $ShadowSize $blueShadow;
 }
 
 .text-shadow[class*='-mauve'] {
-  text-shadow: 6upx 6upx 8upx rgba(133, 33, 150, 0.2);
+  text-shadow: $ShadowSize $mauveShadow;
 }
 
 .text-shadow[class*='-pink'] {
-  text-shadow: 6upx 6upx 8upx rgba(199, 50, 134, 0.2);
+  text-shadow: $ShadowSize $pinkShadow;
 }
 
 .text-shadow[class*='-brown'] {
-  text-shadow: 6upx 6upx 8upx rgba(140, 88, 53, 0.2);
+  text-shadow: $ShadowSize $brownShadow;
 }
 
 .text-shadow[class*='-grey'] {
-  text-shadow: 6upx 6upx 8upx rgba(114, 130, 138, 0.2);
+  text-shadow: $ShadowSize $greyShadow;
 }
 
 .text-shadow[class*='-gray'] {
-  text-shadow: 6upx 6upx 8upx rgba(114, 130, 138, 0.2);
+  text-shadow: $ShadowSize $grayShadow;
 }
 
 .text-shadow[class*='-black'] {
-  text-shadow: 6upx 6upx 8upx rgba(26, 26, 26, 0.2);
+  text-shadow: $ShadowSize $blackShadow;
 }
 
 .bg-img {
@@ -3781,7 +3781,7 @@ scroll-view.cu-steps .cu-item {
 }
 
 .bg-mask {
-  background-color: #333333;
+  background-color: $black;
   position: relative;
 }
 
@@ -3904,89 +3904,89 @@ scroll-view.cu-steps .cu-item {
 .text-red,
 .line-red,
 .lines-red {
-  color: #e54d42 !important;
+  color: $red !important;
 }
 
 .text-orange,
 .line-orange,
 .lines-orange {
-  color: #f37b1d !important;
+  color: $orange !important;
 }
 
 .text-yellow,
 .line-yellow,
 .lines-yellow {
-  color: #fbbd08 !important;
+  color: $yellow !important;
 }
 
 .text-olive,
 .line-olive,
 .lines-olive {
-  color: #8dc63f !important;
+  color: $olive !important;
 }
 
 .text-green,
 .line-green,
 .lines-green {
-  color: #39b54a !important;
+  color: $green !important;
 }
 
 .text-cyan,
 .line-cyan,
 .lines-cyan {
-  color: #1cbbb4 !important;
+  color: $cyan !important;
 }
 
 .text-blue,
 .line-blue,
 .lines-blue {
-  color: #0081ff !important;
+  color: $blue !important;
 }
 
 .text-purple,
 .line-purple,
 .lines-purple {
-  color: #6739b6 !important;
+  color: $purple !important;
 }
 
 .text-mauve,
 .line-mauve,
 .lines-mauve {
-  color: #9c26b0 !important;
+  color: $mauve !important;
 }
 
 .text-pink,
 .line-pink,
 .lines-pink {
-  color: #e03997;
+  color: $pink;
 }
 
 .text-brown,
 .line-brown,
 .lines-brown {
-  color: #a5673f !important;
+  color: $brown !important;
 }
 
 .text-grey,
 .line-grey,
 .lines-grey {
-  color: #8799a3 !important;
+  color: $grey !important;
 }
 
 .text-gray,
 .line-gray,
 .lines-gray {
-  color: #aaaaaa !important;
+  color: $gray !important;
 }
 
 .text-black,
 .line-black,
 .lines-black {
-  color: #333333 !important;
+  color: $black !important;
 }
 
 .text-white,
 .line-white,
 .lines-white {
-  color: #ffffff !important;
+  color: $white !important;
 }
diff --git a/pages/index/components/home.vue b/pages/index/components/home.vue
index da67d8b..d771d66 100644
--- a/pages/index/components/home.vue
+++ b/pages/index/components/home.vue
@@ -58,7 +58,7 @@ export default {
 	name: 'Home',
 	data() {
 		return {
-			coad: false,
+			coad: true,
 		}
 	}
 };
diff --git a/pages/index/components/mine.vue b/pages/index/components/mine.vue
index 74ec854..4deaeea 100644
--- a/pages/index/components/mine.vue
+++ b/pages/index/components/mine.vue
@@ -1,9 +1,68 @@
 <template>
-  <div>user1</div>
+	<view>
+		<!-- 头部 -->
+		<view class="cu-card flex bg-white">
+			<view class="flex flex-sub align-center padding-xl">
+				<view class="round xl cu-avatar portrait">
+					<image class="xl cu-avatar" :src="userInfo.avatarUrl"></image>
+				</view>
+				<view class="flex-sub padding-left">
+					<view class="text-xl">{{ userInfo.nickName }}</view>
+					<view class="text-df padding-top-xs description">{{ userInfo.classes }}</view>
+				</view>
+				<view :style="{'color':userInfo.healthyCodeColor}" class="iconfont icon-qrcode healthy-coad"></view>
+			</view>
+		</view>
+		<!-- 列表 -->
+		<view class="bg-white margin-top">
+			<view class="cu-list menu margin-lr">
+			  <view class="cu-item">
+				<view class="text-lg">个人信息</view>
+				<view class="iconfont icon-right more"></view>
+			  </view>
+			  <view class="cu-item">
+				<view class="text-lg">我的健康打卡</view>
+				<view class="iconfont icon-right more"></view>
+			  </view>
+			  <view class="cu-item">
+				<view class="text-lg">我的行程</view>
+				<view class="iconfont icon-right more"></view>
+			  </view>
+			  <view class="cu-item">
+				<view class="text-lg">我的校园打卡</view>
+				<view class="iconfont icon-right more"></view>
+			  </view>
+			</view>
+		</view>
+	</view>
+  
 </template>
 
 <script>
 export default {
   name: 'Mine',
+  data() {
+    return {
+      userInfo: {
+        avatarUrl: '../../../static/head-portrait.jpg',
+        nickName: '丁菲菲',
+        classes: '计算机19级软工二班',
+		healthyCodeColor: '#11A20D'
+      },
+    };
+  },
 };
 </script>
+
+<style lang="scss" scoped>
+	.portrait{
+		overflow: hidden;
+	}
+	.healthy-coad{
+		font-size: 40px;
+	}
+	.more{
+		font-size: 18px;
+		color: $grey;
+	}
+</style>
\ No newline at end of file
diff --git a/static/head-portrait.jpg b/static/head-portrait.jpg
new file mode 100644
index 0000000..7b6c644
Binary files /dev/null and b/static/head-portrait.jpg differ
diff --git a/uni.scss b/uni.scss
index cd3e689..a5f27b5 100644
--- a/uni.scss
+++ b/uni.scss
@@ -1,11 +1,11 @@
 /* 颜色变量 */
 /* Color 可以自定义相关配色 */
 /* 标准色 */
-$red: #FF0000;
+$red: #e54d42;
 $orange: #f37b1d;
 $yellow: #fbbd08;
-$olive: #76AC96; // 健康打卡 绿
-$green: #11A20D;
+$olive: #76AC96;
+$green: #11A20D; // 健康打卡 绿
 $cyan: #0897C7; // 按钮蓝
 $blue: #0A97C6;
 $darkBlue: #0076FF;
@@ -13,7 +13,7 @@ $purple: #677DBF; // 校园打卡 青
 $mauve: #9c26b0;
 $pink: #e03997;
 $brown: #a5673f;
-$grey: #BFBFBF;
+$grey: #CDCDCD;
 $black: #333333;
 $darkGray: #666666;
 $gray: #101010;
@@ -32,7 +32,7 @@ $purpleLight: #e1d7f0;
 $mauveLight: #ebd4ef;
 $pinkLight: #f9d7ea;
 $brownLight: #ede1d9;
-$greyLight: #F8F8F8;
+$greyLight: #F5f5f5;
 
 /* 渐变色 */
 $gradualRed: linear-gradient(45deg, #f43f3b, #ec008c);
@@ -90,9 +90,14 @@ $uni-border-color: #c8c7cc;
 /* 尺寸变量 */
 
 /* 文字尺寸 */
+$uni-font-size: 20rpx;
 $uni-font-size-sm: 24rpx;
 $uni-font-size-base: 28rpx;
 $uni-font-size-lg: 32rpx;
+$uni-font-size-xl: 36rpx;
+$uni-font-size-xxl: 44rpx;
+$uni-font-size-sl: 80rpx;
+$uni-font-size-xsl: 120rpx;
 
 /* 图片尺寸 */
 $uni-img-size-sm: 40rpx;