提交

App.vue

@@ -848,6 +848,7 @@ export default {
 
 
 <style lang="scss">
+	@import "@/assets/css/theme.scss";
 	/*每个页面公共css */
 	// #ifdef VUE3
 	@import "@/uni_modules/uview-plus/index.scss";

assets/css/common.scss

@@ -37,319 +37,3 @@
   overflow: hidden;
   word-break: break-all;
 }
-// 字体
-@for $i from 20 through 100{
-    .fs#{$i} {
-			font-size: #{$i}rpx;
-    }
-}
-// 颜色
-@for $i from 0 through 9{
-    .color#{$i} {
-			color: #{$i}#{$i}#{$i};
-    }
-}
-// padding
-@for $i from 1 through 100{
-    .p#{$i} {
-			padding: #{$i}rpx;
-    }
-}
-@for $i from 1 through 100{
-    .ptb#{$i} {
-			padding-top: #{$i}rpx ;
-			padding-bottom: #{$i}rpx ;
-    }
-}
-@for $i from 1 through 100{
-    .plr#{$i} {
-			padding-left: #{$i}rpx;
-			padding-right: #{$i}rpx;
-    }
-}
-@for $i from 1 through 200{
-    .pt#{$i} {
-			padding-top: #{$i}rpx;
-    }
-}
-@for $i from 1 through 100{
-    .pl#{$i} {
-			padding-left: #{$i}rpx;
-    }
-}
-@for $i from 1 through 100{
-    .pr#{$i} {
-			padding-right: #{$i}rpx;
-    }
-}
-@for $i from 1 through 200{
-    .pb#{$i} {
-			padding-bottom: #{$i}rpx;
-    }
-}
-// margin
-@for $i from 1 through 100{
-    .m#{$i} {
-			margin: #{$i}rpx;
-    }
-}
-@for $i from 1 through 100{
-    .mtb#{$i} {
-			margin-top: #{$i}rpx ;
-			margin-bottom: #{$i}rpx ;
-    }
-}
-@for $i from 1 through 100{
-    .mlr#{$i} {
-			margin-left: #{$i}rpx;
-			margin-right: #{$i}rpx;
-    }
-}
-@for $i from 1 through 100{
-    .mt#{$i} {
-			margin-top: #{$i}rpx;
-    }
-}
-@for $i from 1 through 100{
-    .ml#{$i} {
-			margin-left: #{$i}rpx;
-    }
-}
-@for $i from 1 through 100{
-    .mr#{$i} {
-			margin-right: #{$i}rpx;
-    }
-}
-@for $i from 1 through 100{
-    .mb#{$i} {
-			margin-bottom: #{$i}rpx;
-    }
-}
-// 圆角
-@for $i from 0 through 100{
-    .radius#{$i} {
-			border-radius: #{$i}rpx;
-    }
-}
-// padding 左右+width自动计算
-@for $i from 10 through 60{
-    .w-calc-#{$i} {
-			width: calc(100% - #{$i*2}rpx);
-			padding-left:  #{$i}rpx;
-			padding-right:  #{$i}rpx;
-    }
-}
-
-// gap
-@for $i from 1 through 100{
-	.gap#{$i} {
-		gap: #{$i}rpx;
-	}
-}
-
-// 高
-@for $i from 1 through 900{
-	.h#{$i} {
-		height: #{$i}rpx;
-	}
-}
-// 宽
-@for $i from 1 through 900{
-	.w#{$i} {
-		width: #{$i}rpx;
-	}
-}
-// 宽
-@for $i from 1 through 900{
-	.lh#{$i} {
-		line-height: #{$i}rpx;
-	}
-}
-
-
-// font-weight
-$steps: 100 200 300 400 500 600 700 800 bold;
-@each $i in $steps {
-	.weight-#{$i} {
-		font-weight: $i;
-	}
-}
-
-.bold {
-	font-weight: bold;
-}
-.scrollx {
-	overflow-x: scroll;
-}
-
-.scrolly {
-	overflow-y: scroll;
-}
-.color9{
-	color: #999;
-}
-.color6{
-	color: #666;
-}
-.bgf{
-	background-color: #fff;
-}
-.base-color{
-	color: #018C39;
-}
-.colorf {
-			color: #fff;
-		}
-	
-		.bgf {
-			background: #fff;
-		}
-	
-		.fixed {
-			position: fixed;
-		}
-	
-		.absolute {
-			position: absolute;
-		}
-	
-		.relative {
-			position: relative;
-		}
-	
-		.w100 {
-			width: 100%;
-		}
-	
-		.h100 {
-			height: 100%;
-		}
-	
-		.card {
-			background: #fff;
-			border-radius: 15rpx;
-		}
-	
-		.cover-height {
-			height: 100%;
-			display: flex;
-			flex-direction: column;
-			box-sizing: border-box;
-		}
-	
-		.row {
-			display: flex;
-			flex-direction: row;
-		}
-	
-		.column {
-			display: flex;
-			flex-direction: column;
-		}
-	
-		.justify-start {
-			display: flex;
-			justify-content: flex-start;
-		}
-	
-		.justify-center {
-			display: flex;
-			justify-content: center;
-		}
-	
-		.justify-end {
-			display: flex;
-			justify-content: flex-end;
-		}
-	
-		.justify-around {
-			display: flex;
-			justify-content: space-around;
-		}
-		.justify-evenly {
-			display: flex;
-			justify-content: space-evenly;
-		}
-	
-		.justify-between {
-			display: flex;
-			justify-content: space-between;
-		}
-	
-		.align-start {
-			display: flex;
-			align-items: flex-start;
-		}
-	
-		.align-center {
-			display: flex;
-			align-items: center;
-		}
-	
-		.align-end {
-			display: flex;
-			align-items: flex-end;
-		}
-	
-		.center {
-			display: flex;
-			justify-content: center;
-			align-items: center;
-		}
-	
-		.centerV {
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			flex-direction: column;
-		}
-	
-		.wrap {
-			flex-wrap: wrap;
-		}
-	
-		.flex-1 {
-			flex: 1;
-		}
-	
-		.ellipsis {
-			overflow: hidden;
-			text-overflow: ellipsis;
-			display: -webkit-box;
-			-webkit-box-orient: vertical;
-			box-sizing: border-box;
-			width: 100%;
-			-webkit-line-clamp: 1;
-		}
-	
-		.lines-2 {
-			-webkit-line-clamp: 2 !important;
-		}
-	
-		.lines-3 {
-			-webkit-line-clamp: 3 !important;
-		}
-	
-		.bold {
-			font-weight: bold;
-		}
-	
-		.line-through {
-			text-decoration: line-through;
-		}
-	
-		.nowrap {
-			white-space: nowrap;
-		}
-	
-		.scrollx {
-			overflow-x: scroll;
-		}
-	
-		.scrolly {
-			overflow-y: scroll;
-		}
-	
-		.cvauto {
-			content-visibility: auto;
-		}

assets/css/theme.scss

@@ -0,0 +1,316 @@
+// 字体
+@for $i from 20 through 100{
+    .fs#{$i} {
+			font-size: #{$i}rpx;
+    }
+}
+// 颜色
+@for $i from 0 through 9{
+    .color#{$i} {
+			color: #{$i}#{$i}#{$i};
+    }
+}
+// padding
+@for $i from 1 through 100{
+    .p#{$i} {
+			padding: #{$i}rpx;
+    }
+}
+@for $i from 1 through 100{
+    .ptb#{$i} {
+			padding-top: #{$i}rpx ;
+			padding-bottom: #{$i}rpx ;
+    }
+}
+@for $i from 1 through 100{
+    .plr#{$i} {
+			padding-left: #{$i}rpx;
+			padding-right: #{$i}rpx;
+    }
+}
+@for $i from 1 through 200{
+    .pt#{$i} {
+			padding-top: #{$i}rpx;
+    }
+}
+@for $i from 1 through 100{
+    .pl#{$i} {
+			padding-left: #{$i}rpx;
+    }
+}
+@for $i from 1 through 100{
+    .pr#{$i} {
+			padding-right: #{$i}rpx;
+    }
+}
+@for $i from 1 through 200{
+    .pb#{$i} {
+			padding-bottom: #{$i}rpx;
+    }
+}
+// margin
+@for $i from 1 through 100{
+    .m#{$i} {
+			margin: #{$i}rpx;
+    }
+}
+@for $i from 1 through 100{
+    .mtb#{$i} {
+			margin-top: #{$i}rpx ;
+			margin-bottom: #{$i}rpx ;
+    }
+}
+@for $i from 1 through 100{
+    .mlr#{$i} {
+			margin-left: #{$i}rpx;
+			margin-right: #{$i}rpx;
+    }
+}
+@for $i from 1 through 100{
+    .mt#{$i} {
+			margin-top: #{$i}rpx;
+    }
+}
+@for $i from 1 through 100{
+    .ml#{$i} {
+			margin-left: #{$i}rpx;
+    }
+}
+@for $i from 1 through 100{
+    .mr#{$i} {
+			margin-right: #{$i}rpx;
+    }
+}
+@for $i from 1 through 100{
+    .mb#{$i} {
+			margin-bottom: #{$i}rpx;
+    }
+}
+// 圆角
+@for $i from 0 through 100{
+    .radius#{$i} {
+			border-radius: #{$i}rpx;
+    }
+}
+// padding 左右+width自动计算
+@for $i from 10 through 60{
+    .w-calc-#{$i} {
+			width: calc(100% - #{$i*2}rpx);
+			padding-left:  #{$i}rpx;
+			padding-right:  #{$i}rpx;
+    }
+}
+
+// gap
+@for $i from 1 through 100{
+	.gap#{$i} {
+		gap: #{$i}rpx;
+	}
+}
+
+// 高
+@for $i from 1 through 900{
+	.h#{$i} {
+		height: #{$i}rpx;
+	}
+}
+// 宽
+@for $i from 1 through 900{
+	.w#{$i} {
+		width: #{$i}rpx;
+	}
+}
+// 宽
+@for $i from 1 through 900{
+	.lh#{$i} {
+		line-height: #{$i}rpx;
+	}
+}
+
+
+// font-weight
+$steps: 100 200 300 400 500 600 700 800 bold;
+@each $i in $steps {
+	.weight-#{$i} {
+		font-weight: $i;
+	}
+}
+
+.bold {
+	font-weight: bold;
+}
+.scrollx {
+	overflow-x: scroll;
+}
+
+.scrolly {
+	overflow-y: scroll;
+}
+.color9{
+	color: #999;
+}
+.color6{
+	color: #666;
+}
+.bgf{
+	background-color: #fff;
+}
+.base-color{
+	color: #018C39;
+}
+.colorf {
+			color: #fff;
+		}
+	
+		.bgf {
+			background: #fff;
+		}
+	
+		.fixed {
+			position: fixed;
+		}
+	
+		.absolute {
+			position: absolute;
+		}
+	
+		.relative {
+			position: relative;
+		}
+	
+		.w100 {
+			width: 100%;
+		}
+	
+		.h100 {
+			height: 100%;
+		}
+	
+		.card {
+			background: #fff;
+			border-radius: 15rpx;
+		}
+	
+		.cover-height {
+			height: 100%;
+			display: flex;
+			flex-direction: column;
+			box-sizing: border-box;
+		}
+	
+		.row {
+			display: flex;
+			flex-direction: row;
+		}
+	
+		.column {
+			display: flex;
+			flex-direction: column;
+		}
+	
+		.justify-start {
+			display: flex;
+			justify-content: flex-start;
+		}
+	
+		.justify-center {
+			display: flex;
+			justify-content: center;
+		}
+	
+		.justify-end {
+			display: flex;
+			justify-content: flex-end;
+		}
+	
+		.justify-around {
+			display: flex;
+			justify-content: space-around;
+		}
+		.justify-evenly {
+			display: flex;
+			justify-content: space-evenly;
+		}
+	
+		.justify-between {
+			display: flex;
+			justify-content: space-between;
+		}
+	
+		.align-start {
+			display: flex;
+			align-items: flex-start;
+		}
+	
+		.align-center {
+			display: flex;
+			align-items: center;
+		}
+	
+		.align-end {
+			display: flex;
+			align-items: flex-end;
+		}
+	
+		.center {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+		}
+	
+		.centerV {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			flex-direction: column;
+		}
+	
+		.wrap {
+			flex-wrap: wrap;
+		}
+	
+		.flex-1 {
+			flex: 1;
+		}
+	
+		.ellipsis {
+			overflow: hidden;
+			text-overflow: ellipsis;
+			display: -webkit-box;
+			-webkit-box-orient: vertical;
+			box-sizing: border-box;
+			width: 100%;
+			-webkit-line-clamp: 1;
+		}
+	
+		.lines-2 {
+			-webkit-line-clamp: 2 !important;
+		}
+	
+		.lines-3 {
+			-webkit-line-clamp: 3 !important;
+		}
+	
+		.bold {
+			font-weight: bold;
+		}
+	
+		.line-through {
+			text-decoration: line-through;
+		}
+	
+		.nowrap {
+			white-space: nowrap;
+		}
+	
+		.scrollx {
+			overflow-x: scroll;
+		}
+	
+		.scrolly {
+			overflow-y: scroll;
+		}
+	
+		.cvauto {
+			content-visibility: auto;
+		}