feat: 公共样式

src/app.wpy

-<style>
+<style lang="less">
+  @import "./style/common.less";
   page {
     font-family: 'PingFangSC-Regular',monospace;
     width:100%;
     height:100%;
-    background-color:#F1F1F1;
+    background-color:@greyback;
+    color:@fontcolor;
   }
 </style>
 <script>

src/components/custom/network.wpy

@@ -3,7 +3,7 @@
     <div class="network-wrapper">
       <span class="network-text">网络状况不佳，请刷新重试</span>
       <van-button custom-class="network-button" round type="info" @tap="setIsConnected">刷新</van-button>
-    </div>	
+    </div>
   </div>
 </template>
 <script>
@@ -25,6 +25,7 @@
   });
 </script>
 <style lang="less">
+  @import "../../style/common";
   .network-container {
   	position: fixed;
   	width: 100%;
@@ -40,17 +41,17 @@
   	  align-items: center;
   	  flex-direction: column;
   	  .network-text {
-  	  	color: #AAA;
-  	  	font-size: 24rpx;
+  	  	color: @darkgrey;
+  	  	font-size: @font-normal;
   	  }
   	  .network-button {
   	  	margin-top: 20rpx;
   	  	width: 180rpx;
-  	  	font-size: 24rpx;
+  	  	font-size: @font-normal;
     		height: 56rpx;
     		line-height: 56rpx;
-    		background: #FF6600;
-        border-color: #FF6600;
+    		background: @maincolor;
+        border-color: @maincolor;
   	  }
   	}
   }

src/components/custom/openAnimation.wpy

@@ -105,6 +105,7 @@
   });
 </script>
 <style lang="less">
+  @import "../../style/common";
   .open-container {
     position: fixed;
     width: 100%;
@@ -184,7 +185,7 @@
           width: 500rpx;
           height: 500rpx;
           border-radius: 20rpx;
-          color: #fff;
+          color: @whitecolor;
           background: linear-gradient(#FF5D15 5%, #FDA13E 60%, rgba(255, 255, 255, 0.8) 100%),
           ;
           padding: 39rpx 40rpx 0rpx 40rpx;
@@ -299,7 +300,7 @@
               white-space: nowrap;
               overflow: hidden;
               text-overflow: ellipsis;
-              font-size: 24rpx;
+              font-size: @font-normal;
               text-align: center;
             }
           }
@@ -311,11 +312,11 @@
             height: 158rpx;
             z-index: 11;
             .btn {
-              font-size: 24rpx;
+              font-size: @font-normal;
               width: 160rpx;
               height: 70rpx;
               line-height: 70rpx;
-              border: 1rpx solid #FF5D15;
+              border: 1rpx solid @maincolor;
               z-index: 11;
               border-radius: 10rpx;
               &:after {
@@ -323,11 +324,11 @@
               };
               &:nth-child(1) {
                 background: #fff;
-                color: #FF5D15;
+                color: @maincolor;
               }
 
               &:nth-child(2) {
-                background: #FF5D15;
+                background: @maincolor;
                 color: #fff;
               }
             }
@@ -439,7 +440,7 @@
             bottom:160rpx;
             left:0rpx;
             content:"";
-            background:#fff;
+            background:@whiteback;
             border-left:#e59c00 2rpx solid;
             border-right:#e59c00 2rpx solid;
             box-sizing:border-box;
@@ -448,7 +449,7 @@
             position: relative;
             z-index: 2;
             text-align: center;
-            font-size: 22rpx;
+            font-size: @font-common;
             padding-bottom: 20rpx;
             .gift-image {
               width: 140rpx;
@@ -467,7 +468,7 @@
               height: 50rpx;
               line-height: 50rpx;
               border-radius: 6rpx;
-              font-size: 22rpx;
+              font-size: @font-common;
               &:active{
                 background-image: -webkit-gradient(linear, left top, left bottom, from(#f09902), to(#f09902));
               }

src/components/custom/popup.wpy

@@ -65,6 +65,7 @@
   });
 </script>
 <style lang="less">
+  @import "../../style/common";
 	.popup-container {
     position: fixed;
     width: 100%;
@@ -81,7 +82,7 @@
       position: absolute;
       left: 20rpx;
       top: 155rpx;
-      background: #fff;
+      background: @whiteback;
       border-radius: 10rpx;
       padding: 10rpx 19rpx;
       box-sizing: border-box;
@@ -108,8 +109,8 @@
           height: 50rpx;
         }
         .desc {
-          color: #FF5D15;
-          font-size: 20rpx;
+          color: @maincolor;
+          font-size: @font-small;
           margin-top: 9rpx
         }
       }

src/components/custom/sharedPopup.wpy

@@ -69,6 +69,7 @@
   });
 </script>
 <style lang="less">
+  @import "../../style/common";
 	.share-container {
     position: fixed;
     width: 100%;
@@ -83,7 +84,7 @@
       width: 530rpx;
       height: 530rpx;
       border-radius: 20rpx;
-      color: #fff;
+      color: @whitecolor;
       background: linear-gradient(#E6401F, #FDA13E),
       ;
       padding: 39rpx 40rpx 0rpx 40rpx;
@@ -227,7 +228,7 @@
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
-          font-size: 28rpx;
+          font-size: @font-middle;
           text-align: center;
         }
         .user {
@@ -261,14 +262,14 @@
         height: 120rpx;
         z-index: 11;
         .btn {
-          font-size: 30rpx;
+          font-size: @font-large;
           width: 200rpx;
           height: 70rpx;
           line-height: 70rpx;
           z-index: 11;
           border-radius: 10rpx;
-          background: #FF5D15;
-          color: #FFF;
+          background: @maincolor;
+          color: @whitecolor;
           &:before {
             content: '';
             width: 73rpx;

src/components/custom/sign.wpy

@@ -26,7 +26,7 @@
           <image class="share-image" :src="shareUrl"></image>
         </button>
         <span class="title">{{des}}</span>
-      </div>  
+      </div>
       <div v-if="type === 'lottery'" class="lottery">
         <button v-if="authmodal" open-type="getUserInfo" bindgetuserinfo="getUserInfo" plain="true" class="lottery-button">
           <image class="lottery-button-image" :src="lotteryUrl"></image>
@@ -176,6 +176,7 @@
   });
 </script>
 <style lang="less">
+  @import "../../style/common";
   .icon-container {
 
     .lottery {
@@ -202,11 +203,11 @@
         width: 100%;
         text-align: center;
         display: block;
-        color: #fff;
-        font-size: 22rpx;
+        color: @whitecolor;
+        font-size: @font-common;
       }
     }
-    
+
     .share {
       position: absolute;
       top: 635rpx;
@@ -225,8 +226,8 @@
         width: 100%;
         text-align: center;
         display: block;
-        color: #fff;
-        font-size: 22rpx;
+        color: @whitecolor;
+        font-size: @font-common;
       }
     }
 
@@ -265,7 +266,7 @@
         text-align: center;
         z-index: 3;
         border-radius: 50%;
-        transform: rotate(-50deg); 
+        transform: rotate(-50deg);
         animation: jump1 1.2s infinite ease;
         &::before {
           content: "";
@@ -296,8 +297,8 @@
         width: 100%;
         text-align: center;
         display: block;
-        color: #fff;
-        font-size: 22rpx;
+        color: @whitecolor;
+        font-size: @font-common;
       }
 
       @keyframes swift {
@@ -314,13 +315,13 @@
       }
       @keyframes shine1 {
         0% {
-          transform: translateX(40rpx); 
+          transform: translateX(40rpx);
         }
         50% {
-          transform: translateX(0); 
+          transform: translateX(0);
         }
         100% {
-          transform: translateX(40rpx); 
+          transform: translateX(40rpx);
         }
       }
     }
@@ -375,7 +376,7 @@
           animation:addGoldRotate .6s linear infinite;
         }
         .add-gold-num {
-          color: #fff;
+          color: @whitecolor;
           font-size: 16rpx;
           vertical-align: middle;
         }
@@ -400,14 +401,14 @@
         flex-direction: column;
         .show-gold-image {
           width: 60rpx;
-          height: 60rpx; 
+          height: 60rpx;
           z-index: 2;
         }
         .show-gold-num {
           margin-top: -10rpx;
-          color: #fff;
-          font-size: 22rpx;
-        } 
+          color: @whitecolor;
+          font-size: @font-common;
+        }
       }
 
       .sunshine {

src/components/custom/videolist.wpy

 <style lang="less">
+  @import "../../style/common";
   .container,.video-swiper{
     width:100%;
     height:100%;
@@ -15,13 +16,13 @@
     width: 100%;
   }
   .rightcont {
-    font-size: 24rpx;
+    font-size: @font-normal;
     position: absolute;
     z-index: 9;
     bottom: 415rpx;
     width:30%;
     right: 30rpx;
-    color: #fff;
+    color: @whitecolor;
     .info {
       line-height: 40rpx;
     }
@@ -29,9 +30,9 @@
   .progress {
     width: 180rpx;
     height: 20rpx;
-    background-color: #fff;
+    background-color: @whiteback;
     margin-top: 10rpx;
-    color: #666;
+    color: @greycolor;
     position: relative;
     .text {
       position: absolute;
@@ -49,7 +50,7 @@
       width: 0;
       height:100%;
       transition:all .6s;
-      background-color: #FF5D15;
+      background-color: @maincolor;
     }
   }
   .images {

src/mixins/test.js

-
-export default {
-  data: {
-    mixin: 'MixinText'
-  },
-  methods: {
-    mixintap () {
-      this.mixin = 'MixinText' + (Math.random() + '').substring(3, 7);
-      console.log('mixin method tap');
-    },
-    tap () {
-      console.log('tap in mixin');
-    }
-  },
-  created () {
-    console.log('created in mixin');
-  }
-};

src/pages/help.wpy

 <style lang="less">
+  @import "../style/common.less";
   .help-cont {
     padding:30rpx;
     padding-top:0;
-    background-color: #fff;
+    background-color: @whiteback;
     .help-title{
-      font-size: 30rpx;
-      color:#333;
+      font-size: @font-large;
       font-weight:bold;
       padding-top:30rpx;
     }
     .help-info {
-      color:#666;
+      color:@greycolor;
       font-size: 26rpx;
       padding-left:20rpx;
       line-height: 40rpx;

src/pages/index.wpy

 <style lang="less">
+  @import "../style/common";
   page{
     height: 100%;
     background-color: #000;
@@ -54,7 +55,7 @@
     z-index: 9;
     bottom: 400rpx;
     width: 100%;
-    color: white;
+    color: @whitecolor;
     clear: both;
     &.anima {
       animation:fadeout 2s;
@@ -66,7 +67,7 @@
   .leftcont {
     width: 44%;
     float: left;
-    font-size: 24rpx;
+    font-size: @font-normal;
     margin-left: 30rpx;
   }
   .list-wrapper {
@@ -87,7 +88,7 @@
     vertical-align: middle;
     border-radius: 20rpx;
     display: inline-block;
-    font-size: 20rpx;
+    font-size: @font-small;
     box-sizing: border-box;
     padding:6rpx 15rpx;
     background-color:rgba(238, 238, 238, 0.2);
@@ -105,7 +106,7 @@
   .list-item{
     width:220rpx;
     /*height: 330rpx;*/
-    background-color:#fff;
+    background-color:@whiteback;
     border-radius: 10rpx;
     transform: scale(0.7,0.7) translateY(65rpx);
     transition: all 0.5s;
@@ -122,7 +123,7 @@
     border-radius: 10rpx;
   }
   .list-item .text {
-    font-size: 20rpx;
+    font-size: @font-small;
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-line-clamp: 2; //行数
@@ -132,13 +133,13 @@
     margin-top:10rpx;
   }
   .list-item .price{
-    color:#FF5D15;
-    font-size:22rpx;
+    color:@maincolor;
+    font-size:@font-common;
     margin-top:2rpx;
   }
   .list-item .buy{
     font-size: 16rpx;
-    color:#AAA;
+    color:@darkgrey;
   }
   .list-item.subright {
     transform: scale(0.85,0.85) translateY(26rpx) translateX(25rpx);
@@ -166,7 +167,7 @@
       position: relative;
       top:200px;
       padding: 50rpx 0;
-      background-color: #fff;
+      background-color: @whiteback;
       border-radius: 20rpx;
       .text {
         color:#333;

src/pages/myraffles.wpy

 <style lang="less">
+  @import "../style/common";
   .raffles-list{
     padding-bottom:30rpx;
   }
   .raffle-none{
-    font-size: 28rpx;
+    font-size: @font-middle;
     padding-top:300rpx;
     text-align: center;
   }
   .raffle-item{
-    background-color: #fff;
+    background-color: @whiteback;
     padding:30rpx 0 0 30rpx;
     overflow: hidden;
     .item-img{
@@ -33,8 +34,8 @@
       overflow: hidden;
     }
     .item-corn{
-      color:#FF5D15;
-      font-size: 28rpx;
+      color:@maincolor;
+      font-size: @font-middle;
       position: absolute;
       bottom:30rpx;
     }
@@ -42,22 +43,22 @@
       position: absolute;
       right:30rpx;
       top:30%;
-      font-size: 28rpx;
+      font-size: @font-middle;
     }
     .item-button{
       height:60rpx;
-      color:#fff;
-      background-color: #FF5D15;
+      color:@whitecolor;
+      background-color: @maincolor;
       border-radius: 10rpx;
       text-align: center;
       line-height: 60rpx;
-      font-size: 28rpx;
+      font-size: @font-middle;
     }
     .grey{
-      color:#999;
+      color:@lightgrey;
     }
     .red{
-      color:#FF1212
+      color:@redcolor;
     }
     .green{
       color:#097A00;

src/pages/prize.wpy

 <style lang="less">
+  @import "../style/common.less";
   .prize-top {
-    background-color: #fff;
+    background-color: @whiteback;
     padding:30rpx 50rpx;
     .img{
       display: block;
       margin:0 auto;
       width: 400rpx;
       .van-image {
-        box-shadow:0px 3rpx 13rpx 1rpx rgba(163,163,163,0.38);
+        box-shadow:0 3rpx 13rpx 1rpx rgba(163,163,163,0.38);
       }
     }
     .goodsname{
       padding:25rpx 0;
-      font-size: 28rpx;
-      color:#333;
+      font-size: @font-middle;
     }
     .prize-info{
-      color:#999;
+      color:@lightgrey;
       font-size: 26rpx;
       .red {
-        color:#FF1212;
+        color:@redcolor;
       }
     }
   }
@@ -27,7 +27,7 @@
     padding-top:50rpx;
     .address-title {
       font-size: 32rpx;
-      color: #666;
+      color: @greycolor;
       padding-left:30rpx;
     }
     .address-cont{
@@ -40,7 +40,7 @@
   .footer{
     width:100%;
     height: 110rpx;
-    background-color: #fff;
+    background-color: @whiteback;
     position: fixed;
     bottom:0;
     left:0;
@@ -48,18 +48,18 @@
       position: absolute;
       width:160rpx;
       height:70rpx;
-      color:#fff;
+      color:@whitecolor;
       border-radius: 10rpx;
-      background-color: #FF5D15;
+      background-color: @maincolor;
       right:30rpx;
       top:20rpx;
       line-height: 70rpx;
       text-align: center;
-      font-size: 30rpx;
+      font-size: @font-large;
     }
   }
   .van-picker .van-picker__cancel,.van-picker .van-picker__confirm{
-    color:#FF5D15;
+    color:@maincolor;
   }
 </style>
 <template>

src/pages/raffle.wpy

 <style lang="less">
+  @import "../style/common.less";
   .raffle-wrapper {
     width:100%;
     height:100%;
-    background-color:#F1F1F1;
+    background-color:@greyback;
     padding-top:40rpx;
     -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
     box-sizing: border-box;
   }
   .raffle-content {
-    background-color: #fff;
+    background-color: @whiteback;
     width: 94%;
     -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
     box-sizing: border-box;
     margin:0 auto;
     padding:50rpx 50rpx 40rpx 50rpx;
     border-radius: 10rpx;
-    box-shadow:0px 2rpx 20rpx 0px rgba(188,188,188,0.75);
+    box-shadow:0 2rpx 20rpx 0 rgba(188,188,188,0.75);
     .img .van-image {
-      box-shadow:0px 3rpx 13rpx 1rpx rgba(163,163,163,0.38);
+      box-shadow:0 3rpx 13rpx 1rpx rgba(163,163,163,0.38);
     }
   }
   .goodsinfo {
     margin-top:15rpx;
     overflow: hidden;
     .text {
-      font-size: 28rpx;
+      font-size: @font-middle;
       text-overflow: ellipsis;
       display: -webkit-box;
       -webkit-line-clamp: 2; //行数
@@ -40,48 +39,48 @@
     .money{
       float: right;
       width:30%;
-      color:#FF5D15;
-      font-size: 30rpx;
+      color:@maincolor;
+      font-size: @font-large;
       text-align: right;
       font-weight:bold;
     }
   }
   .raffle-chance {
-    font-size: 24rpx;
-    color:#666;
+    font-size: @font-normal;
+    color:@greycolor;
     margin-top:20rpx;
   }
   .raffle-progress {
-    font-size: 24rpx;
-    color:#666;
+    font-size: @font-normal;
+    color:@greycolor;
   }
   .progress {
     width: 298rpx;
     height:18rpx;
-    background-color:#fff;
-    border:1px solid #FF5D15;
+    background-color:@whiteback;
+    border:1px solid @maincolor;
     border-radius: 4rpx;
-    color:#666;
+    color:@greycolor;
     display: inline-block;
     position: relative;
     top:3rpx;
     .orange {
       height:100%;
       transition:all 1s;
-      background-color: #FF5D15;
+      background-color: @maincolor;
     }
   }
   .pronumber{
-    font-size: 20rpx;
-    color:#666;
+    font-size: @font-small;
+    color:@greycolor;
     margin-left:10rpx;
     position: relative;
     top:-3rpx;
   }
   .user-wish {
     padding-left:35rpx;
-    font-size: 24rpx;
-    color:#aaa;
+    font-size: @font-normal;
+    color:@darkgrey;
     margin-top:25rpx;
     height:50rpx;
     line-height: 50rpx;
@@ -94,8 +93,8 @@
       vertical-align: middle;
       position: relative;
       &.checked{
-        background-color: #FF5D15;
-        border:3rpx solid #FF5D15;
+        background-color: @maincolor;
+        border:3rpx solid @maincolor;
       }
     }
     .checkicon {
@@ -117,12 +116,12 @@
     width:380rpx;
     height:70rpx;
     line-height: 70rpx;
-    background-color: #FF5D15;
+    background-color: @maincolor;
     border-radius:10rpx;
     margin:0 auto;
     margin-top:80rpx;
     font-size: 34rpx;
-    color:#fff;
+    color:@whitecolor;
   }
 </style>
 <template>

src/style/common.less

+// 主颜色
+@maincolor: #ff5d15;
+@redcolor: #FF1212;
+
+//字体颜色
+@fontcolor:#333;
+@greycolor: #666;
+@lightgrey: #999;
+@whitecolor: #fff;
+@darkgrey: #aaa;
+
+//背景颜色
+@whiteback:#fff;
+@greyback: #f1f1f1;
+
+//字体大小
+@font-normal: 24rpx;
+@font-small:20rpx;
+@font-common:22rpx;
+@font-middle:28rpx;
+@font-large:30rpx;
+