主播端首页

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "px2vw.width": 390
+}

projects/live-app/src/app/components/call-modal/call-modal.component.scss

@@ -11,7 +11,7 @@
   width: 100%;
   height: 100%;
   .animation-loading {
-    height: 150px;
+    height: 38.4615vw;
     width: 100%;
     position: relative;
   }
@@ -20,8 +20,8 @@
     top: 50%;
     left: 50%;
     border-radius: 50%;
-    height: 96px;
-    width: 96px;
+    height: 24.6154vw;
+    width: 24.6154vw;
     animation: rotate_3922 1.2s linear infinite;
     background-color: #9b59b6;
     background-image: linear-gradient(#9b59b6, #84cdfa, #5ad1cd);
@@ -37,30 +37,30 @@
   }
 
   .container span:nth-of-type(1) {
-    filter: blur(5px);
+    filter: blur(1.2821vw);
   }
 
   .container span:nth-of-type(2) {
-    filter: blur(10px);
+    filter: blur(2.5641vw);
   }
 
   .container span:nth-of-type(3) {
-    filter: blur(25px);
+    filter: blur(6.4103vw);
   }
 
   .container span:nth-of-type(4) {
-    filter: blur(50px);
+    filter: blur(12.8205vw);
   }
 
   .container::after {
     content: "";
     position: absolute;
-    top: 10px;
-    left: 10px;
-    right: 10px;
-    bottom: 10px;
+    top: 2.5641vw;
+    left: 2.5641vw;
+    right: 2.5641vw;
+    bottom: 2.5641vw;
     background-color: #2dd55b;
-    border: solid 5px #ffffff;
+    border: solid 1.2821vw #ffffff;
     border-radius: 50%;
   }
 
@@ -74,12 +74,12 @@
     }
   }
   .close {
-    margin-top: 150px;
-    font-size: 14px;
+    margin-top: 38.4615vw;
+    font-size: 3.5897vw;
     color: #004acd;
     /* background: white; */
-    padding: 4px 20px;
-    border-radius: 6px;
-    border: 1px solid;
+    padding: 1.0256vw 5.1282vw;
+    border-radius: 1.5385vw;
+    border: 0.2564vw solid;
   }
 }

projects/live-app/src/app/components/flutter-comp/flutter-comp.component.scss

@@ -1,6 +1,6 @@
 .flutter-container {
   width: 100%;
-  height: 200px;
+  height: 51.2821vw;
   position: fixed;
   top: 0;
   left: 0;
@@ -21,38 +21,38 @@
   }
 
   .user-region {
-    // backdrop-filter: saturate(180%) blur(20px);
+    // backdrop-filter: saturate(180%) blur(5.1282vw);
     // background: rgb(81 81 81 / 80%);
     background: linear-gradient(to bottom, rgba(0, 0, 0, 0.51), rgba(0, 0, 0, 0.24), rgba(47, 47, 47, 0.03));
     color: #ffffff;
-    // margin: 10px auto;
+    // margin: 2.5641vw auto;
     // background: #fb475ec7;
-    padding: 10px 20px;
+    padding: 2.5641vw 5.1282vw;
     width: 80%;
     text-align: center;
     display: flex;
     align-items: center;
     justify-content: center;
     .avatar {
-      width: 40px;
-      height: 40px;
+      width: 10.2564vw;
+      height: 10.2564vw;
       border-radius: 50%;
     }
     .user-nickname {
-      margin-left: 10px;
+      margin-left: 2.5641vw;
     }
     .gift-name {
-      font-size: 20px;
+      font-size: 5.1282vw;
       font-weight: bold;
       font-family: '微软雅黑';
       background: #d32d2d;
       color: #fff;
       text-align: center;
-      margin: 0 6px;
-      text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85,
-        -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, 0 -80px 70px #f38e1c; /*设置文字阴影*/
+      margin: 0 1.5385vw;
+      text-shadow: 0 0 5.1282vw #fefcc9, 2.5641vw -2.5641vw 7.6923vw #feec85,
+        -5.1282vw -5.1282vw 10.2564vw #ffae34, 5.1282vw -10.2564vw 12.8205vw #ec760c, 0 -20.5128vw 17.9487vw #f38e1c; /*设置文字阴影*/
       animation: fontAmt 2s infinite; /*设置动画*/
-      padding: 0px 10px;
+      padding: 0vw 2.5641vw;
     }
   }
   .gift-container {
@@ -64,8 +64,8 @@
     .gift-img {
       position: absolute;
       top: 0;
-      width: 100px;
-      height: 100px;
+      width: 25.641vw;
+      height: 25.641vw;
       animation: scaleUp 3s ease-in-out infinite; /* 使用scaleUp动画，持续3秒 */
     }
   }
@@ -76,54 +76,54 @@
     right: 0;
   }
   // 30% {
-  //   right: 150px;
+  //   right: 38.4615vw;
   // }
   20% {
-    right: 180px;
+    right: 46.1538vw;
   }
   30% {
-    right: 150px;
+    right: 38.4615vw;
   }
   40% {
-    right: 150px;
+    right: 38.4615vw;
     transform: rotateZ(300deg);
   }
   50% {
-    right: 150px;
+    right: 38.4615vw;
     transform: rotateZ(0deg);
   }
   60% {
-    right: 150px;
+    right: 38.4615vw;
     transform: rotateZ(360deg);
   }
   70% {
-    right: 150px;
+    right: 38.4615vw;
     transform: rotateZ(0deg);
   }
   // 90% {
-  //   right:150px
+  //   right:38.4615vw
   // }
   100% {
-    right: 390px;
+    right: 100vw;
   }
 }
 
 @keyframes fontAmt {
   /*创建动画*/
   0% {
-    text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85,
-      -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, 0 -80px 70px #f38e1c;
+    text-shadow: 0 0 5.1282vw #fefcc9, 2.5641vw -2.5641vw 7.6923vw #feec85,
+      -5.1282vw -5.1282vw 10.2564vw #ffae34, 5.1282vw -10.2564vw 12.8205vw #ec760c, 0 -20.5128vw 17.9487vw #f38e1c;
   }
   30% {
-    text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85,
-      -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, 10px -90px 80px #f38e1c;
+    text-shadow: 0 0 5.1282vw #fefcc9, 2.5641vw -2.5641vw 7.6923vw #feec85,
+      -5.1282vw -5.1282vw 10.2564vw #ffae34, 5.1282vw -10.2564vw 12.8205vw #ec760c, 2.5641vw -23.0769vw 20.5128vw #f38e1c;
   }
   60% {
-    text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85,
-      -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, 0px -80px 100px #f38e1c;
+    text-shadow: 0 0 5.1282vw #fefcc9, 2.5641vw -2.5641vw 7.6923vw #feec85,
+      -5.1282vw -5.1282vw 10.2564vw #ffae34, 5.1282vw -10.2564vw 12.8205vw #ec760c, 0vw -20.5128vw 25.641vw #f38e1c;
   }
   100% {
-    text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85,
-      -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, 0 -80px 70px #f38e1c;
+    text-shadow: 0 0 5.1282vw #fefcc9, 2.5641vw -2.5641vw 7.6923vw #feec85,
+      -5.1282vw -5.1282vw 10.2564vw #ffae34, 5.1282vw -10.2564vw 12.8205vw #ec760c, 0 -20.5128vw 17.9487vw #f38e1c;
   }
 }

projects/live-app/src/app/components/gift-modal/gift-modal.component.scss

@@ -1,43 +1,43 @@
 .gift-modal {
-  --height: 400px;
+  --height: 102.5641vw;
 }
 .gift-region {
   position: relative;
   .gift-tabs {
     display: flex;
-    font-size: 14px;
+    font-size: 3.5897vw;
     font-weight: bold;
-    padding: 0 10px;
+    padding: 0 2.5641vw;
     .tab {
-      margin-right: 10px;
+      margin-right: 2.5641vw;
     }
   }
   .gift-content {
     overflow-y: scroll;
-    padding-bottom: 100px;
-    height: 356px;
+    padding-bottom: 25.641vw;
+    height: 91.2821vw;
     .gift-list {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
-      grid-gap: 10px;
-      padding: 6px;
+      grid-gap: 2.5641vw;
+      padding: 1.5385vw;
       .gift-item {
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
-        border-radius: 10px;
-        border: 1px solid #fff;
-        font-size: 14px;
+        border-radius: 2.5641vw;
+        border: 0.2564vw solid #fff;
+        font-size: 3.5897vw;
         .img {
-          width: 40px;
-          height: 40px;
-          border-radius: 10px;
+          width: 10.2564vw;
+          height: 10.2564vw;
+          border-radius: 2.5641vw;
         }
         .info {
           text-align: center;
           .name {
-            margin: 6px 0;
+            margin: 1.5385vw 0;
           }
           .price {
             display: flex;
@@ -45,16 +45,16 @@
             justify-content: center;
             color: #6b6b6b;
             font-family: PingFang SC;
-            font-size: 12px;
+            font-size: 3.0769vw;
             .credit {
-              width: 10px;
-              height: 10px;
+              width: 2.5641vw;
+              height: 2.5641vw;
             }
           }
         }
       }
       .gift-item-acitve {
-        border: 1px solid #fc3651 !important;
+        border: 0.2564vw solid #fc3651 !important;
       }
     }
   }
@@ -65,9 +65,9 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    height: 80px;
-    padding: 20px;
-    padding-bottom: 20px;
+    height: 20.5128vw;
+    padding: 5.1282vw;
+    padding-bottom: 5.1282vw;
     background: linear-gradient(
       rgb(255 255 255 / 31%),
       rgb(255 255 255 / 86%),
@@ -78,32 +78,32 @@
     .left {
       display: flex;
       align-items: center;
-      font-size: 12px;
+      font-size: 3.0769vw;
       .credit {
-        width: 10px;
-        height: 10px;
-        margin-right: 6px;
+        width: 2.5641vw;
+        height: 2.5641vw;
+        margin-right: 1.5385vw;
       }
     }
     .btns {
       display: flex;
       align-items: flex-end;
       .chang-gift {
-        font-size: 12px;
+        font-size: 3.0769vw;
       }
       .input-num {
-        width: 50px;
-        height: 24px;
-        margin-right: 10px;
-        border-radius: 6px;
-        border: 1px solid #dcdcdc;
+        width: 12.8205vw;
+        height: 6.1538vw;
+        margin-right: 2.5641vw;
+        border-radius: 1.5385vw;
+        border: 0.2564vw solid #dcdcdc;
       }
       .btn-item {
         background-color: #fc3651;
         color: white;
-        padding: 4px 16px;
-        border-radius: 16px;
-        font-size: 14px;
+        padding: 1.0256vw 4.1026vw;
+        border-radius: 4.1026vw;
+        font-size: 3.5897vw;
       }
       .btn-disabled{
         background-color: #dcdcdc;
@@ -133,22 +133,22 @@
   }
   50%{
     transform: scale(0.1);
-    bottom: 400px;
+    bottom: 102.5641vw;
   }
   60% {
     transform: scale(0.8);
-    bottom: 400px;
+    bottom: 102.5641vw;
   }
   70% {
     transform: scale(0.2);
-    bottom: 400px;
+    bottom: 102.5641vw;
   }
   90%{
     transform: scale(1.2); /* 放大到原始大小 */
-    bottom: 400px;
+    bottom: 102.5641vw;
   }
   100% {
     transform: scale(1.2); /* 放大到原始大小 */
-    bottom: 400px;
+    bottom: 102.5641vw;
   }
 }

projects/live-app/src/app/components/live/live.component.scss

@@ -2,31 +2,31 @@
   background-color: #9d9d9d;
   width: 100%;
   height: 100vh;
-  // border-radius: 2px;
-  // border: 0.5px solid #a1a1a1;
+  // border-radius: 0.5128vw;
+  // border: 0.1282vw solid #a1a1a1;
   position: relative;
   .camera_box {
-    // margin-top: 10px;
+    // margin-top: 2.5641vw;
     // position: relative;
     .video {
-      // border-radius: 8px;
+      // border-radius: 2.0513vw;
       width: 100%;
       height: 100vh;
       color: white;
-      font-size: 14px;
+      font-size: 3.5897vw;
       display: flex;
       align-items: center;
       justify-content: center;
     }
     .vice-video {
-      width: 80px;
-      height: 140px;
+      width: 20.5128vw;
+      height: 35.8974vw;
       background: black;
       position: absolute;
-      top: 100px;
-      right: 10px;
+      top: 25.641vw;
+      right: 2.5641vw;
       color: white;
-      font-size: 14px;
+      font-size: 3.5897vw;
       display: flex;
       align-items: center;
       justify-content: center;

projects/live-app/src/app/components/pay-comp/pay-comp.component.scss

@@ -1,34 +1,34 @@
 ion-modal {
-  --height: 320px;
-  --width: 300px;
-  --border-radius: 16px;
-  --box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
-    0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --height: 82.0513vw;
+  --width: 76.9231vw;
+  --border-radius: 4.1026vw;
+  --box-shadow: 0 2.5641vw 3.8462vw -0.7692vw rgb(0 0 0 / 0.1),
+    0 1.0256vw 1.5385vw -1.0256vw rgb(0 0 0 / 0.1);
 }
 .pay-box {
   height: 100%;
   display: flex;
   flex-direction: column;
-  padding: 20px 10px 10px;
+  padding: 5.1282vw 2.5641vw 2.5641vw;
   position: relative;
   .close {
     position: absolute;
-    right: 10px;
-    top: 10px;
-    font-size: 20px;
+    right: 2.5641vw;
+    top: 2.5641vw;
+    font-size: 5.1282vw;
   }
   .pay-title {
     text-align: center;
   }
   .pay-num {
     text-align: center;
-    font-size: 20px;
+    font-size: 5.1282vw;
     color: #d50b15;
-    margin: 6px auto;
+    margin: 1.5385vw auto;
     font-weight: 700;
   }
   .options {
-    margin: 10px 0;
+    margin: 2.5641vw 0;
     .row {
       display: flex;
       align-items: center;
@@ -37,37 +37,37 @@ ion-modal {
         display: flex;
         align-items: center;
         img {
-          width: 30px;
-          height: 30px;
+          width: 7.6923vw;
+          height: 7.6923vw;
         }
         .text{
-          font-size: 14px;
-          margin-left: 6px;
+          font-size: 3.5897vw;
+          margin-left: 1.5385vw;
         }
       }
       .chekc {
-        border: 1px solid #dfdfdf;
+        border: 0.2564vw solid #dfdfdf;
         border-radius: 50%;
-        width: 20px;
-        height: 20px;
+        width: 5.1282vw;
+        height: 5.1282vw;
       }
       .check-active {
-        border: 1px solid #f66369 !important;
+        border: 0.2564vw solid #f66369 !important;
         display: flex;
         align-items: center;
         justify-content: center;
         .checkbox {
-          width: 16px;
-          height: 16px;
+          width: 4.1026vw;
+          height: 4.1026vw;
           border-radius: 50%;
           background: #f66369;
         }
       }
     }
     .bar {
-      margin: 10px 0;
-      height: 1px;
-      // width: calc(100% - 20px);
+      margin: 2.5641vw 0;
+      height: 0.2564vw;
+      // width: calc(100% - 5.1282vw);
       background: #dfdfdf;
     }
   }
@@ -77,19 +77,19 @@ ion-modal {
     justify-content: end;
     align-items: center;
     flex: 1;
-    padding-bottom: 10px;
+    padding-bottom: 2.5641vw;
     .order-num{
       color: #636363;
-      font-size: 12px;
-      margin-bottom: 4px;
+      font-size: 3.0769vw;
+      margin-bottom: 1.0256vw;
     }
     .pay-btn{
-      padding: 6px 0;
+      padding: 1.5385vw 0;
       width: 100%;
       color: white;
       text-align: center;
       background: #f96269;
-      border-radius: 4px;
+      border-radius: 1.0256vw;
     }
   }
 }

projects/live-app/src/app/components/upload/upload.component.scss

@@ -1,8 +1,8 @@
 .upload-file {
   display: grid;
-  // grid-template-columns: repeat(4, 86px);
-  grid-column-gap: 10px;
-  grid-row-gap: 10px;
+  // grid-template-columns: repeat(4, 22.0513vw);
+  grid-column-gap: 2.5641vw;
+  grid-row-gap: 2.5641vw;
   align-items: center;
   justify-content: space-evenly;
   margin: auto;
@@ -10,12 +10,12 @@
     position: relative;
     img{
       width: 100%;
-      // height: 86px;
+      // height: 22.0513vw;
       object-fit: cover;
     }
     .del{
       position: absolute;
-      top: 0px;
+      top: 0vw;
       right: 0;
       background: #ffffffa8;
       display: flex;
@@ -25,15 +25,15 @@
   }
   .up-bloak{
     width: 100%;
-    // height: 86px;
+    // height: 22.0513vw;
     position: relative;
     background: #f3f3f3;
     ion-icon{
       position: absolute;
-      // width: 40px;
-      // height: 40px;
-      top: 24px;
-      left: 24px;
+      // width: 10.2564vw;
+      // height: 10.2564vw;
+      top: 6.1538vw;
+      left: 6.1538vw;
     }
     input{
       width: 100%;
@@ -56,6 +56,6 @@
   background: rgb(0 0 0 / 80%);
   z-index: 9;
   img{
-    width: 300px;
+    width: 76.9231vw;
   }
 }

projects/live-app/src/modules/account/account-log/account-log.component.scss

@@ -7,9 +7,9 @@
   .log-item {
     display: flex;
     justify-content: space-between;
-		margin-bottom: 6px;
+		margin-bottom: 1.5385vw;
     .order-num {
-      font-size: 12px;
+      font-size: 3.0769vw;
       color: #7d7d7d;
     }
     .val {
@@ -19,7 +19,7 @@
       }
     }
     .time {
-      font-size: 12px;
+      font-size: 3.0769vw;
       color: #7d7d7d;
     }
   }

projects/live-app/src/modules/account/bankcard/bankcard.component.scss

@@ -16,16 +16,16 @@
 	}
 
 	.card_list {
-		margin-top: 16px;
+		margin-top: 4.1026vw;
 		width: 100%;
 		height: 94vh;
-		margin-bottom: 100px;
+		margin-bottom: 25.641vw;
 		overflow-y: auto;
 
 		.image {
-			margin: 50px 100px;
-			width: 175px;
-			height: 175px;
+			margin: 12.8205vw 25.641vw;
+			width: 44.8718vw;
+			height: 44.8718vw;
 			text-align: center;
 		}
 
@@ -39,19 +39,19 @@
 			width: 94%;
 			margin: 0 auto;
 			// background-color: #292B2A;
-			border-radius: 10px;
-			margin-bottom: 10px;
+			border-radius: 2.5641vw;
+			margin-bottom: 2.5641vw;
 			color: 000000;
-			border: 1px solid #000000;
+			border: 0.2564vw solid #000000;
 
 			.top {
 				width: 100%;
 				height: 60%;
-				padding: 10px;
+				padding: 2.5641vw;
 
 				.logo {
-					width: 60px;
-					height: 60px;
+					width: 15.3846vw;
+					height: 15.3846vw;
 					border-radius: 50%;
 				}
 			}
@@ -60,20 +60,20 @@
 				width: 100%;
 				height: 40%;
 				// background-color: #fff;
-				padding: 10px;
-				border-radius: 0 0 10px 10px;
+				padding: 2.5641vw;
+				border-radius: 0 0 2.5641vw 2.5641vw;
 
 				.card_no {
 					color: #000;
-					font-size: 16px;
-					margin-bottom: 4px;
+					font-size: 4.1026vw;
+					margin-bottom: 1.0256vw;
 					font-weight: 600;
 				}
 
 				.bank_name {
 					color: #444;
-					font-size: 12px;
-					margin-bottom: 4px;
+					font-size: 3.0769vw;
+					margin-bottom: 1.0256vw;
 				}
 			}
 		}
@@ -86,32 +86,32 @@
 		width: 80%;
 		left: 10vw;
 		--background: #92a1ff;
-		border-radius: 18px;
+		border-radius: 4.6154vw;
 	}
 
 
 }
 .model {
-	height: 300px;
+	height: 76.9231vw;
 	width: 100%;
-	// border: 1px solid #000000;
-	padding: 10px;
+	// border: 0.2564vw solid #000000;
+	padding: 2.5641vw;
 	input {
 		width: 100%;
 		height: 6vh;
 		height: 1;
-		border-radius: 6px;
+		border-radius: 1.5385vw;
 		border: none;
-		padding: 0 10px;
-		font-size: 14px;
+		padding: 0 2.5641vw;
+		font-size: 3.5897vw;
 		flex: 1;
 
 	}
 
 	.line {
-		margin: 4px 0;
+		margin: 1.0256vw 0;
 		width: 100%;
-		height: 1px;
+		height: 0.2564vw;
 		background-color: #a2a2a2;
 	}
 }

projects/live-app/src/modules/account/notice-log/notice-log.component.scss

@@ -2,14 +2,14 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 6px 10px;
-  border-bottom: 1px solid #f3f3f3;
-  font-size: 14px;
+  padding: 1.5385vw 2.5641vw;
+  border-bottom: 0.2564vw solid #f3f3f3;
+  font-size: 3.5897vw;
   .avatar {
-    width: 36px;
-    height: 36px;
+    width: 9.2308vw;
+    height: 9.2308vw;
     border-radius: 50%;
-    margin-right: 6px;
+    margin-right: 1.5385vw;
   }
   .item-col-right {
     display: flex;
@@ -17,7 +17,7 @@
     flex: 1;
     .time {
       color: #676767;
-      margin-top: 4px;
+      margin-top: 1.0256vw;
     }
     .row-btns {
       display: flex;
@@ -26,15 +26,15 @@
       align-items: center;
     }
     .tg {
-      border: 1px solid;
-      padding: 0px 6px;
+      border: 0.2564vw solid;
+      padding: 0vw 1.5385vw;
       // background: #0054e9;
       color: #0054e9;
-      border-radius: 4px;
+      border-radius: 1.0256vw;
     }
     .jj {
       color: #c5000f;
-      margin-top: 4px;
+      margin-top: 1.0256vw;
     }
     .other {
       color: #676767;

projects/live-app/src/modules/account/order/detail/detail.component.scss

@@ -3,36 +3,36 @@
 }
 .status-view {
   background-color: white;
-  padding: 20px;
+  padding: 5.1282vw;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   img {
-    width: 50px;
-    margin-bottom: 20px;
+    width: 12.8205vw;
+    margin-bottom: 5.1282vw;
   }
   .text {
-    font-size: 16px;
-    margin: 10px 0;
+    font-size: 4.1026vw;
+    margin: 2.5641vw 0;
   }
   .desc {
     color: #8b8b8b;
-    font-size: 12px;
+    font-size: 3.0769vw;
   }
 }
 .h3 {
-  padding: 10px;
+  padding: 2.5641vw;
 }
 .card-container {
   background: white;
-  padding: 10px;
+  padding: 2.5641vw;
   .row {
     display: flex;
-    margin-bottom: 10px;
-    font-size: 12px;
+    margin-bottom: 2.5641vw;
+    font-size: 3.0769vw;
     .label {
-      width: 120px;
+      width: 30.7692vw;
       color: #8b8b8b;
     }
   }

projects/live-app/src/modules/account/order/order.component.scss

@@ -2,19 +2,19 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 6px 10px;
-  border-bottom: 1px solid #f3f3f3;
-  font-size: 14px;
+  padding: 1.5385vw 2.5641vw;
+  border-bottom: 0.2564vw solid #f3f3f3;
+  font-size: 3.5897vw;
   .item-col {
     .title{
-      margin-bottom: 4px;
+      margin-bottom: 1.0256vw;
     }
   }
   .item-col-right {
     display: flex;
     align-items: center;
     .row {
-      margin-right: 6px;
+      margin-right: 1.5385vw;
       display: flex;
       flex-direction: column;
       align-items: flex-end;
@@ -28,11 +28,11 @@
     display: flex;
     align-items: center;
     .tag {
-      width: 6px;
-      height: 6px;
+      width: 1.5385vw;
+      height: 1.5385vw;
       background-color: #42d96b;
       border-radius: 50%;
-      margin-right: 6px;
+      margin-right: 1.5385vw;
     }
   }
 }

projects/live-app/src/modules/account/recharge/recharge.component.scss

@@ -4,93 +4,93 @@
   background-position: center top;
   background-size: 100% 100%;
   height: 100%;
-  padding-top: 10px;
+  padding-top: 2.5641vw;
   width: 100%;
   text-align: center;
   .options {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
-    grid-gap: 10px;
-    padding: 6px;
+    grid-gap: 2.5641vw;
+    padding: 1.5385vw;
 		background: white;
     .select {
       display: flex;
       flex-direction: column;
-      padding: 10px 0;
-      border: 1px solid #ebebeb;
-      border-radius: 4px;
-      font-size: 14px;
+      padding: 2.5641vw 0;
+      border: 0.2564vw solid #ebebeb;
+      border-radius: 1.0256vw;
+      font-size: 3.5897vw;
       span {
-        font-size: 12px;
+        font-size: 3.0769vw;
         color: #c5000f;
       }
     }
 		.select:active{
-      border: 1px solid #92a1ff;
+      border: 0.2564vw solid #92a1ff;
 		}
   }
   .h3 {
-    margin-top: 20px;
+    margin-top: 5.1282vw;
     text-align: left;
     padding: 2.6667vw;
     span {
       // color: #000000;
-      font-size: 12px;
+      font-size: 3.0769vw;
     }
   }
   .li {
 		background: white;
-    // border: 1px solid #000000;
+    // border: 0.2564vw solid #000000;
     padding: 2.6667vw;
-    width: 370px;
+    width: 94.8718vw;
     margin: 0 auto;
     border-radius: 2.6667vw;
     .int {
       display: flex;
       align-items: center;
-      // margin-top: 20px;
-      font-size: 14px;
+      // margin-top: 5.1282vw;
+      font-size: 3.5897vw;
       font-family: Source Han Sans CN;
       font-weight: 500;
       // color: #FFFFFF;
       // background: #353C4D;
       .input {
-				padding: 4px 6px;
-        margin-left: 10px;
+				padding: 1.0256vw 1.5385vw;
+        margin-left: 2.5641vw;
         border-radius: 1.6vw;
-        border: 1px solid #d3d3d3;
+        border: 0.2564vw solid #d3d3d3;
         // background: #353c4d;
         color: #c5000f;
-        font-size: 16px;
+        font-size: 4.1026vw;
         flex: 1;
-        width: 200px;
+        width: 51.2821vw;
         background: none;
 				outline: none;
       }
     }
 		.desc{
-			margin-top: 4px;
-			font-size: 12px;
+			margin-top: 1.0256vw;
+			font-size: 3.0769vw;
 			text-align: left;
 		}
   }
 
   .confirm {
-    width: 280px;
+    width: 71.7949vw;
     background: #92a1ff;
-    border-radius: 4px;
-    padding: 10px 0 10px 0;
+    border-radius: 1.0256vw;
+    padding: 2.5641vw 0 2.5641vw 0;
     margin: 0 auto;
-    margin-top: 70px;
+    margin-top: 17.9487vw;
     color: #fff;
   }
 
   modal {
-    margin-top: -100px;
+    margin-top: -25.641vw;
 
     .confirm {
-      margin-top: 10px;
-      margin-bottom: -10px;
+      margin-top: 2.5641vw;
+      margin-bottom: -2.5641vw;
       color: #fff;
       text-align: center;
       background: #d81e06;

projects/live-app/src/modules/account/wattle/wattle.component.scss

@@ -4,11 +4,11 @@
   background-position: center top;
   background-size: 100% 100%;
   height: 100%;
-  padding: 40px 0;
+  padding: 10.2564vw 0;
   width: 100%;
 
   .head {
-    padding: 15px 5px;
+    padding: 3.8462vw 1.2821vw;
     // background: #292B2A;
 
     .name {
@@ -19,15 +19,15 @@
 
   .box {
     text-align: center;
-    margin: 0 auto 16px ;
+    margin: 0 auto 4.1026vw ;
     // background: #292B2A;
-    border-radius: 9px;
+    border-radius: 2.3077vw;
     color: #000000;
-    padding: 20px;
+    padding: 5.1282vw;
     width: 92%;
     height: 28vh;
-    // margin-top: 20px;
-    border: 1px solid #000000;
+    // margin-top: 5.1282vw;
+    border: 0.2564vw solid #000000;
 
     .account_info {
       display: flex;
@@ -45,13 +45,13 @@
         height: 100%;
 
         .title {
-          font-size: 14px;
+          font-size: 3.5897vw;
         }
 
         .count {
-          font-size: 16px;
+          font-size: 4.1026vw;
           font-weight: 600;
-          margin-bottom: 6px;
+          margin-bottom: 1.5385vw;
         }
       }
     }
@@ -60,49 +60,49 @@
       display: flex;
 
       .recharge {
-        width: 150px;
+        width: 38.4615vw;
         background: #92a1ff;
-        border-radius: 18px;
-        padding: 10px 0 10px 0;
+        border-radius: 4.6154vw;
+        padding: 2.5641vw 0 2.5641vw 0;
         margin: 0 auto;
         color: #ffffff;
       }
 
       .recharges {
-        width: 150px;
-        border: 1px solid #000000;
-        border-radius: 18px;
-        padding: 10px 0 10px 0;
+        width: 38.4615vw;
+        border: 0.2564vw solid #000000;
+        border-radius: 4.6154vw;
+        padding: 2.5641vw 0 2.5641vw 0;
         margin: 0 auto;
         color: #000000;
-        margin-left: 20px;
+        margin-left: 5.1282vw;
       }
     }
   }
 
   .install {
     width: 92%;
-    margin: 10px auto;
-    border-radius: 9px;
-    padding: 10px 0;
+    margin: 2.5641vw auto;
+    border-radius: 2.3077vw;
+    padding: 2.5641vw 0;
     display: flex;
     justify-content: space-between;
-    border: 1px solid #000000;
+    border: 0.2564vw solid #000000;
 
     .install-to {
       display: flex;
-      padding-left: 10px;
+      padding-left: 2.5641vw;
 
       .name {
         color: #000000;
-        margin: auto 5px;
+        margin: auto 1.2821vw;
       }
     }
 
     .img {
-      width: 20px;
-      height: 20px;
-      margin: auto 10px;
+      width: 5.1282vw;
+      height: 5.1282vw;
+      margin: auto 2.5641vw;
     }
   }
 }

projects/live-app/src/modules/account/withdrawal/withdrawal.component.scss

@@ -13,27 +13,27 @@
   background-position: center top;
   background-size: 100% 100%;
   height: 100%;
-  padding-bottom: 40px;
+  padding-bottom: 10.2564vw;
   width: 100%;
 
   .way {
-    margin: 20px;
+    margin: 5.1282vw;
     display: flex;
     color: #5973ff;
 
     .icon {
       background: #5973ff;
-      width: 3px;
-      height: 20px;
-      margin-right: 5px;
+      width: 0.7692vw;
+      height: 5.1282vw;
+      margin-right: 1.2821vw;
     }
   }
 
   .choose {
-    margin: 20px;
-    border-radius: 9px;
-    border: 1px solid #000000;
-    padding: 10px;
+    margin: 5.1282vw;
+    border-radius: 2.3077vw;
+    border: 0.2564vw solid #000000;
+    padding: 2.5641vw;
 
     .type {
       // display: flex;
@@ -41,32 +41,32 @@
       .icon {
         background: #5973ff;
         margin: auto 0;
-        width: 15px;
-        height: 15px;
+        width: 3.8462vw;
+        height: 3.8462vw;
         // border: 1PX solid #000000;
         border-radius: 50%;
-        margin-right: 5px;
+        margin-right: 1.2821vw;
       }
 
       .input {
         background: none;
         // border: none;
-        border: 1px solid #cbcbcb;
-        border-radius: 4px;
-        padding: 2px 4px;
+        border: 0.2564vw solid #cbcbcb;
+        border-radius: 1.0256vw;
+        padding: 0.5128vw 1.0256vw;
       }
 
       .bank {
-        margin: 10px;
+        margin: 2.5641vw;
       }
     }
   }
 
   .chooses {
-    margin: 20px;
-    border-radius: 9px;
-    border: 1px solid #000000;
-    padding: 10px;
+    margin: 5.1282vw;
+    border-radius: 2.3077vw;
+    border: 0.2564vw solid #000000;
+    padding: 2.5641vw;
     display: flex;
 
     .input {
@@ -77,26 +77,26 @@
 
   .withdrawal {
     width: 60%;
-    margin: 50px auto;
+    margin: 12.8205vw auto;
     text-align: center;
     background: #5973ff;
-    border-radius: 18px;
+    border-radius: 4.6154vw;
     color: #ffffff;
-    padding: 10px 0;
+    padding: 2.5641vw 0;
   }
 
   .withdrawals {
     width: 60%;
-    margin: 50px auto;
+    margin: 12.8205vw auto;
     text-align: center;
     background: #676666;
-    border-radius: 18px;
+    border-radius: 4.6154vw;
     color: #ffffff;
-    padding: 10px 0;
+    padding: 2.5641vw 0;
   }
   .tips{
     text-align: center;
-    font-size: 12px;
+    font-size: 3.0769vw;
     color: #8f8f8f;
   }
 }

projects/live-app/src/modules/goods/vip/vip.component.scss

@@ -1,36 +1,36 @@
 .content {
   .combo_index {
     background-color: #f6f6f6;
-    padding-bottom: 100px;
+    padding-bottom: 25.641vw;
     .combo-info {
       width: 100%;
-      height: 180px;
+      height: 46.1538vw;
       display: flex;
       flex-direction: column;
       align-items: center;
-      padding: 10px;
+      padding: 2.5641vw;
       background: linear-gradient(#ffffff, #f96464);
-      border-radius: 0 0 14px 14px;
+      border-radius: 0 0 3.5897vw 3.5897vw;
       .img {
-        width: 70px;
-        height: 70px;
+        width: 17.9487vw;
+        height: 17.9487vw;
       }
 
       .name {
-        font-size: 14px;
+        font-size: 3.5897vw;
         // color: #ffffff;
         text-align: center;
-        margin-top: 10px;
+        margin-top: 2.5641vw;
       }
 
       .text-info {
-        width: 300px;
+        width: 76.9231vw;
         display: flex;
         flex-wrap: inherit;
         // color: white;
         flex-direction: column;
-        font-size: 12px;
-        margin: 10px auto 5px;
+        font-size: 3.0769vw;
+        margin: 2.5641vw auto 1.2821vw;
         // background-color: white;
         .text-top {
           display: flex;
@@ -39,13 +39,13 @@
             display: flex;
             align-items: center;
             img{
-              width: 20px;
-              height: 20px;
+              width: 5.1282vw;
+              height: 5.1282vw;
             }
           }
         }
         .text-bot {
-          font-size: 12px;
+          font-size: 3.0769vw;
           display: flex;
           justify-content: center;
           color: #e6e6e6;
@@ -54,55 +54,55 @@
       .alink{
         color: #737373;
         position: absolute;
-        right: 10px;
-        font-size: 14px;
-        border-bottom: 1px solid;
+        right: 2.5641vw;
+        font-size: 3.5897vw;
+        border-bottom: 0.2564vw solid;
       }
     }
 
     .combo_box1 {
-      width: 345px;
-      // height: 380px;
-      border: 1px solid #fff;
-      border-radius: 12px;
-      margin: 10px auto;
-      padding: 10px;
-      box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
+      width: 88.4615vw;
+      // height: 97.4359vw;
+      border: 0.2564vw solid #fff;
+      border-radius: 3.0769vw;
+      margin: 2.5641vw auto;
+      padding: 2.5641vw;
+      box-shadow: rgba(0, 0, 0, 0.1) 0vw 1.0256vw 3.0769vw;
       .title {
         display: flex;
         justify-content: space-between;
         align-items: center;
 
         .title-top {
-          font-size: 16px;
+          font-size: 4.1026vw;
           color: #222222;
           font-weight: 600;
-          // margin: 22px;
+          // margin: 5.641vw;
           display: flex;
           align-items: center;
           img {
-            margin-left: 2px;
-            width: 30px;
-            height: 30px;
+            margin-left: 0.5128vw;
+            width: 7.6923vw;
+            height: 7.6923vw;
           }
         }
 
         .price {
-          font-size: 22px;
+          font-size: 5.641vw;
           color: #d50b15;
           font-weight: 600;
           .duration {
             // color: #ffca22;
             font-weight: 500;
-            font-size: 18px;
+            font-size: 4.6154vw;
           }
         }
       }
       .title-info {
         .list {
           .label {
-            font-size: 12px;
-            margin-bottom: 4px;
+            font-size: 3.0769vw;
+            margin-bottom: 1.0256vw;
           }
         }
       }
@@ -115,44 +115,44 @@
     }
 
     .member-title {
-      font-size: 14px;
+      font-size: 3.5897vw;
       color: #222222;
       font-weight: bold;
-      width: 345px;
-      margin: 0px auto 10px;
+      width: 88.4615vw;
+      margin: 0vw auto 2.5641vw;
     }
 
     .member-text {
-      width: 345px;
-      margin: 0px auto 10px;
+      width: 88.4615vw;
+      margin: 0vw auto 2.5641vw;
       color: #222222;
-      line-height: 18px;
-      font-size: 12px;
+      line-height: 4.6154vw;
+      font-size: 3.0769vw;
     }
 
     .member-tab1 {
-      padding: 10px;
+      padding: 2.5641vw;
 
       .member-title1 {
-        font-size: 14px;
+        font-size: 3.5897vw;
         color: #ff5c64;
       }
     }
 
     .detail-title {
-      width: 345px;
+      width: 88.4615vw;
       background-color: #ff5c64;
-      margin: 10px auto;
-      font-size: 12px;
-      padding: 10px;
+      margin: 2.5641vw auto;
+      font-size: 3.0769vw;
+      padding: 2.5641vw;
     }
 
     .detail-text {
-      width: 345px;
-      margin: 1px auto;
+      width: 88.4615vw;
+      margin: 0.2564vw auto;
       color: #222222;
-      line-height: 18px;
-      font-size: 12px;
+      line-height: 4.6154vw;
+      font-size: 3.0769vw;
       span {
         color: #3f51b5;
       }
@@ -164,26 +164,26 @@
     display: flex;
     align-items: end;
     width: 100%;
-    // height: 48px;
-    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
+    // height: 12.3077vw;
+    box-shadow: rgba(0, 0, 0, 0.1) 0vw 1.0256vw 3.0769vw;
     overflow: hidden;
     background: white;
-    padding: 6px 2px;
+    padding: 1.5385vw 0.5128vw;
     .price-tab {
-      width: 250px;
-      // height: 48px;
+      width: 64.1026vw;
+      // height: 12.3077vw;
       display: flex;
       flex-direction: column;
       background-color: #ffffff;
       flex: 1;
-      padding:0 4px;
+      padding:0 1.0256vw;
       .agreement {
         // width: 84vw;
         /* height: 13.333vw; */
         display: flex;
         align-items: flex-start;
         // justify-content: center;
-        font-size: 14px;
+        font-size: 3.5897vw;
         font-weight: 400;
         color: #9f9f9f;
         span {
@@ -204,44 +204,44 @@
       .price-info-sum {
         display: flex;
         align-items: end;
-        margin: 4px 0;
+        margin: 1.0256vw 0;
         .text {
-          font-size: 16px;
-          // padding: 16px;
+          font-size: 4.1026vw;
+          // padding: 4.1026vw;
           color: #222222;
           font-weight: 500;
         }
 
         .price {
-          font-size: 18px;
+          font-size: 4.6154vw;
           color: #d50b15;
-          // padding-top: 18px;
+          // padding-top: 4.6154vw;
         }
         .vip-tag{
-          margin-left: 6px;
+          margin-left: 1.5385vw;
           display: flex;
-          font-size: 12px;
+          font-size: 3.0769vw;
           align-items: center;
           img{
-            width: 20px;
-            height: 20px;
+            width: 5.1282vw;
+            height: 5.1282vw;
           }
         }
       }
     }
 
     .price-btn {
-      width: 120px;
-      // height: 48px;
-      font-size: 16px;
+      width: 30.7692vw;
+      // height: 12.3077vw;
+      font-size: 4.1026vw;
       display: flex;
       justify-content: center;
       align-items: center;
       .open-pay{
         background-color: #ff5c64;
         color: #ffffff;
-        padding: 8px 16px;
-        border-radius: 4px;
+        padding: 2.0513vw 4.1026vw;
+        border-radius: 1.0256vw;
       }
     }
   }

projects/live-app/src/modules/live/call-log/call-log.component.scss

@@ -2,19 +2,19 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 6px 10px;
-  border-bottom: 1px solid #f3f3f3;
-  font-size: 14px;
+  padding: 1.5385vw 2.5641vw;
+  border-bottom: 0.2564vw solid #f3f3f3;
+  font-size: 3.5897vw;
   .item-col {
     .title{
-      margin-bottom: 4px;
+      margin-bottom: 1.0256vw;
     }
   }
   .item-col-right {
     display: flex;
     align-items: center;
     .row {
-      margin-right: 6px;
+      margin-right: 1.5385vw;
       display: flex;
       flex-direction: column;
       align-items: flex-end;
@@ -28,11 +28,11 @@
     display: flex;
     align-items: center;
     .tag {
-      width: 6px;
-      height: 6px;
+      width: 1.5385vw;
+      height: 1.5385vw;
       background-color: #42d96b;
       border-radius: 50%;
-      margin-right: 6px;
+      margin-right: 1.5385vw;
     }
   }
 }

projects/live-app/src/modules/live/call-log/detail/detail.component.scss

@@ -3,36 +3,36 @@
 }
 .status-view {
   background-color: white;
-  padding: 20px;
+  padding: 5.1282vw;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   img {
-    width: 50px;
-    margin-bottom: 20px;
+    width: 12.8205vw;
+    margin-bottom: 5.1282vw;
   }
   .text {
-    font-size: 16px;
-    margin: 10px 0;
+    font-size: 4.1026vw;
+    margin: 2.5641vw 0;
   }
   .desc {
     color: #8b8b8b;
-    font-size: 12px;
+    font-size: 3.0769vw;
   }
 }
 .h3 {
-  padding: 10px;
+  padding: 2.5641vw;
 }
 .card-container {
   background: white;
-  padding: 10px;
+  padding: 2.5641vw;
   .row {
     display: flex;
-    margin-bottom: 10px;
-    font-size: 12px;
+    margin-bottom: 2.5641vw;
+    font-size: 3.0769vw;
     .label {
-      width: 120px;
+      width: 30.7692vw;
       color: #8b8b8b;
     }
   }

projects/live-app/src/modules/live/chat/chat.component.scss

@@ -1,38 +1,38 @@
 .content {
-  // padding-bottom: 50px;
+  // padding-bottom: 12.8205vw;
   .scroll {
     overflow: hidden;
-    padding-bottom: 50px;
+    padding-bottom: 12.8205vw;
   }
   .avatar {
-    width: 40px;
-    height: 40px;
+    width: 10.2564vw;
+    height: 10.2564vw;
   }
   .message-box {
-    margin-bottom: 30px;
+    margin-bottom: 7.6923vw;
     .time-box {
       display: flex;
       align-items: center;
       justify-content: center;
-      height: 50px;
-      font-size: 12px;
+      height: 12.8205vw;
+      font-size: 3.0769vw;
       color: #fff;
       .time {
         background: rgba(0, 0, 0, 0.2);
-        border-radius: 4px;
-        padding: 0 10px;
+        border-radius: 1.0256vw;
+        padding: 0 2.5641vw;
       }
     }
     .text-item {
       position: relative;
       line-height: 1.5;
-      font-size: 16px;
-      padding: 10px;
-      max-width: 220px;
-      border-radius: 4px;
+      font-size: 4.1026vw;
+      padding: 2.5641vw;
+      max-width: 56.4103vw;
+      border-radius: 1.0256vw;
       word-wrap: break-word;
-      min-height: 40px;
-      min-width: 40px;
+      min-height: 10.2564vw;
+      min-width: 10.2564vw;
     }
     .msg-bloak {
       display: flex;
@@ -42,9 +42,9 @@
       .text-item_left::before {
         content: "";
         position: absolute;
-        left: -11px;
-        top: calc(20px - 6px);
-        border: 6px solid transparent;
+        left: -2.8205vw;
+        top: calc(5.1282vw - 1.5385vw);
+        border: 1.5385vw solid transparent;
         border-right-color: #f1f1f1;
         z-index: 20;
       }
@@ -54,9 +54,9 @@
       .text-item_right::before {
         content: "";
         position: absolute;
-        left: calc(100% - 1px);
-        top: calc(20px - 6px);
-        border: 6px solid transparent;
+        left: calc(100% - 0.2564vw);
+        top: calc(5.1282vw - 1.5385vw);
+        border: 1.5385vw solid transparent;
         border-left-color: #a2e65b;
       }
     }
@@ -67,11 +67,11 @@
       justify-content: start;
     }
     .text-item_status {
-      // height: 40px;
+      // height: 10.2564vw;
       display: flex;
       align-items: center;
-      // margin-right: 12px;
-      font-size: 12px;
+      // margin-right: 3.0769vw;
+      font-size: 3.0769vw;
       color: #888;
     }
 
@@ -84,73 +84,73 @@
     }
   }
   .img-item {
-    width: 140px;
-    height: 100px;
+    width: 35.8974vw;
+    height: 25.641vw;
     object-fit: contain;
   }
 }
 .footer-tool {
   .tools {
-    // width: 160px;
+    // width: 41.0256vw;
     display: flex;
     align-items: center;
     justify-content: space-between;
     flex-shrink: 0;
     ion-icon {
-      font-size: 30px;
+      font-size: 7.6923vw;
     }
     .splice {
-      margin: 0 2px;
+      margin: 0 0.5128vw;
     }
   }
   .tools-maxwid {
-    width: 160px;
+    width: 41.0256vw;
   }
 }
 .emoji-content {
   background: #fbfbfb;
-  height: 160px;
+  height: 41.0256vw;
   overflow-y: scroll;
   .emoji-box {
     display: flex;
     flex-wrap: wrap;
     width: 100%;
     .emoji-item {
-      width: 30px;
-      height: 30px;
+      width: 7.6923vw;
+      height: 7.6923vw;
       display: flex;
       justify-content: center;
       align-items: center;
       .emoji-img {
-        width: 20px;
-        height: 20px;
+        width: 5.1282vw;
+        height: 5.1282vw;
       }
     }
     .emoji-item__del {
-      width: 30px;
-      height: 30px;
+      width: 7.6923vw;
+      height: 7.6923vw;
       display: flex;
       justify-content: center;
       align-items: center;
       .emoji-img {
-        width: 20px;
-        height: 20px;
+        width: 5.1282vw;
+        height: 5.1282vw;
       }
     }
   }
 }
 ion-popover {
-  --width: 150px;
+  --width: 38.4615vw;
 }
 .clear {
-  font-size: 14px;
+  font-size: 3.5897vw;
 }
 .fl {
-  margin-right: 10px;
+  margin-right: 2.5641vw;
   float: left;
 }
 
 .fr {
   float: right;
-  margin-left: 10px;
+  margin-left: 2.5641vw;
 }

projects/live-app/src/modules/live/link-page/link-page.component.scss

@@ -1,50 +1,50 @@
 .content {
-  // --padding-bottom: 50px;
+  // --padding-bottom: 12.8205vw;
   --background: #fff;
   .nav-data {
     position: fixed;
-    top: 20px;
+    top: 5.1282vw;
     display: flex;
     justify-content: space-between;
     align-items: center;
     width: 100%;
-    padding: 10px;
+    padding: 2.5641vw;
     color: white;
     z-index: 1;
     .room-data {
       background-color: rgb(0 0 0 / 40%);
       display: flex;
-      width: 160px;
+      width: 41.0256vw;
       justify-content: space-between;
       align-items: center;
-      border-radius: 40px;
-      padding: 4px;
-      border: 1px solid rgb(255 255 255 / 30%);
+      border-radius: 10.2564vw;
+      padding: 1.0256vw;
+      border: 0.2564vw solid rgb(255 255 255 / 30%);
       .avatar {
-        width: 36px;
-        height: 36px;
+        width: 9.2308vw;
+        height: 9.2308vw;
       }
       .profile-title {
         display: flex;
         flex-direction: column;
         align-items: start;
         justify-content: space-around;
-        margin-left: 4px;
+        margin-left: 1.0256vw;
         flex: 1;
         .profile-name {
-          font-size: 14px;
+          font-size: 3.5897vw;
         }
         .level {
           background-color: #cc59de;
           text-align: center;
-          font-size: 12px;
-          border-radius: 20px;
-          padding: 0px 6px;
+          font-size: 3.0769vw;
+          border-radius: 5.1282vw;
+          padding: 0vw 1.5385vw;
         }
       }
       ion-icon {
-        margin-left: 10px;
-        font-size: 30px;
+        margin-left: 2.5641vw;
+        font-size: 7.6923vw;
       }
     }
     .report,
@@ -52,14 +52,14 @@
       background-color: rgb(0 0 0 / 40%);
       color: white;
       border-radius: 50%;
-      width: 36px;
-      height: 36px;
+      width: 9.2308vw;
+      height: 9.2308vw;
       display: flex;
       align-items: center;
       justify-content: center;
-      border: 1px solid rgb(255 255 255 / 30%);
+      border: 0.2564vw solid rgb(255 255 255 / 30%);
       ion-icon {
-        font-size: 26px;
+        font-size: 6.6667vw;
       }
     }
   }
@@ -68,9 +68,9 @@
     bottom: 0;
     left: 0;
     width: 100%;
-    padding: 10px;
+    padding: 2.5641vw;
     .swiper-wrapper {
-      // height: 280px;
+      // height: 71.7949vw;
       // justify-content: end;
     }
     .row {
@@ -83,31 +83,31 @@
         justify-content: center;
         flex-direction: column;
         color: #fff;
-        width: 100px;
-        margin-bottom: 6px;
+        width: 25.641vw;
+        margin-bottom: 1.5385vw;
         .label {
-          margin-top: 6px;
-          font-size: 14px;
+          margin-top: 1.5385vw;
+          font-size: 3.5897vw;
         }
         .icon-box {
           background-color: rgba(0, 0, 0, 0.4);
-          // border: 1px solid rgba(255, 255, 255, 0.3);
+          // border: 0.2564vw solid rgba(255, 255, 255, 0.3);
           border-radius: 50%;
-          padding: 4px;
+          padding: 1.0256vw;
           display: flex;
           align-items: center;
           justify-content: center;
           ion-icon {
             color: white;
-            font-size: 30px;
+            font-size: 7.6923vw;
           }
           .icon-tool {
-            width: 30px;
-            height: 30px;
+            width: 7.6923vw;
+            height: 7.6923vw;
           }
           img {
-            width: 50px;
-            height: 50px;
+            width: 12.8205vw;
+            height: 12.8205vw;
             background: white;
             border-radius: 50%;
             overflow: hidden;
@@ -122,11 +122,11 @@
       }
       .tips {
         background-color: rgba(0, 0, 0, 0.4);
-        border-radius: 20px;
+        border-radius: 5.1282vw;
         color: white;
-        padding: 6px;
-        margin-bottom: 10px;
-        font-size: 12px;
+        padding: 1.5385vw;
+        margin-bottom: 2.5641vw;
+        font-size: 3.0769vw;
         span {
           color: #ffc409;
         }
@@ -134,14 +134,14 @@
     }
   }
   .chat-template {
-    // height: 370px;
+    // height: 94.8718vw;
     display: flex;
     flex-direction: column;
     justify-content: end;
     background: linear-gradient(to top, #000, #fff0);
-    border-radius: 0 0 4px 4px;
+    border-radius: 0 0 1.0256vw 1.0256vw;
     .chat-list{
-      height: 160px;
+      height: 41.0256vw;
       color: #fff;
       overflow-y: scroll;
       .tips{
@@ -149,8 +149,8 @@
         text-align: center;
       }
       .message{
-        font-size: 12px;
-        margin-bottom: 4px;
+        font-size: 3.0769vw;
+        margin-bottom: 1.0256vw;
       }
       .slef_m{
         color: #ffc409;
@@ -159,55 +159,55 @@
     .footer-tool {
       display: flex;
       // background: white;
-      padding: 0 4px;
-      backdrop-filter: saturate(180%) blur(20px);
+      padding: 0 1.0256vw;
+      backdrop-filter: saturate(180%) blur(5.1282vw);
       background: rgb(255 255 255 / 0.8);
-      border-radius: 4px;
+      border-radius: 1.0256vw;
       .input-bar {
-        // width: 160px;
+        // width: 41.0256vw;
         display: flex;
         align-items: center;
         justify-content: space-between;
         flex-shrink: 0;
         ion-icon {
-          font-size: 30px;
+          font-size: 7.6923vw;
         }
         .splice {
-          margin: 0 2px;
+          margin: 0 0.5128vw;
         }
       }
       .tools-maxwid {
-        width: 160px;
+        width: 41.0256vw;
       }
     }
     .emoji-content {
       background: #fbfbfb;
-      height: 160px;
+      height: 41.0256vw;
       overflow-y: scroll;
       .emoji-box {
         display: flex;
         flex-wrap: wrap;
         width: 100%;
         .emoji-item {
-          width: 30px;
-          height: 30px;
+          width: 7.6923vw;
+          height: 7.6923vw;
           display: flex;
           justify-content: center;
           align-items: center;
           .emoji-img {
-            width: 20px;
-            height: 20px;
+            width: 5.1282vw;
+            height: 5.1282vw;
           }
         }
         .emoji-item__del {
-          width: 30px;
-          height: 30px;
+          width: 7.6923vw;
+          height: 7.6923vw;
           display: flex;
           justify-content: center;
           align-items: center;
           .emoji-img {
-            width: 20px;
-            height: 20px;
+            width: 5.1282vw;
+            height: 5.1282vw;
           }
         }
       }
@@ -215,5 +215,5 @@
   }
 }
 .langh{
-  height:200px !important;
+  height:51.2821vw !important;
 }

projects/live-app/src/modules/live/room-manage/room-manage.component.scss

@@ -7,33 +7,33 @@
 	background-size: 100% 100%;
   --background:#ffffff00;
 	.edit-room{
-		// padding: 10px;
-		width: 370px;
+		// padding: 2.5641vw;
+		width: 94.8718vw;
 		margin: 0 auto;
 		background: white;
-		border-radius: 6px;
-		margin-top: 10px;
+		border-radius: 1.5385vw;
+		margin-top: 2.5641vw;
 		.row{
-			padding: 6px;
-			margin-bottom: 4px;
+			padding: 1.5385vw;
+			margin-bottom: 1.0256vw;
 			.title{
 				color: black;
-				margin-bottom: 4px;
+				margin-bottom: 1.0256vw;
 			}
 			ion-input {
 				background-color: #f3f3f3;
-				--padding-end:4px;
-				--padding-start:4px;
+				--padding-end:1.0256vw;
+				--padding-start:1.0256vw;
 			}
 			ion-textarea{
 				background-color: #f3f3f3;
-				--padding-end:4px;
-				--padding-start:4px;
+				--padding-end:1.0256vw;
+				--padding-start:1.0256vw;
 			}
 			.input-num{
 				border: none;
 				background: #f3f3f3;
-				padding: 4px;
+				padding: 1.0256vw;
 				outline: none;
 			}
 		}
@@ -48,6 +48,6 @@
 	color: white;
 	margin: 0 10%;
 	background-color: #fe4d54;
-	border-radius: 10px;
+	border-radius: 2.5641vw;
 	z-index: 1;
 }

projects/live-app/src/modules/live/search/search.component.scss

@@ -37,78 +37,78 @@
   }
   .room-list {
     display: grid;
-    grid-template-columns: repeat(2, 180px);
-    // grid-column-gap: 10px;
-    grid-row-gap: 10px;
-    padding: 10px;
+    grid-template-columns: repeat(2, 46.1538vw);
+    // grid-column-gap: 2.5641vw;
+    grid-row-gap: 2.5641vw;
+    padding: 2.5641vw;
     justify-content: space-between;
-    font-size: 14px;
+    font-size: 3.5897vw;
     .list-row {
-      // width: 180px;
-      height: 250px;
+      // width: 46.1538vw;
+      height: 64.1026vw;
       background-size: 100% 100%;
       position: relative;
       color: white;
-      border-radius: 10px;
+      border-radius: 2.5641vw;
       .title-tag {
         background: linear-gradient(to bottom right, #9367fe, #d55bd9);
         position: absolute;
         top: 0;
         left: 0;
-        border-radius: 10px 0;
-        padding: 4px 8px;
+        border-radius: 2.5641vw 0;
+        padding: 1.0256vw 2.0513vw;
       }
       .live-tag {
         position: absolute;
-        top: 4px;
-        right: 10px;
-        border-radius: 20px;
-        padding: 4px 10px;
-        font-size: 10px;
+        top: 1.0256vw;
+        right: 2.5641vw;
+        border-radius: 5.1282vw;
+        padding: 1.0256vw 2.5641vw;
+        font-size: 2.5641vw;
         background: #1414147a;
         display: flex;
         align-items: center;
         justify-content: space-evenly;
         span {
-          height: 4px;
-          width: 4px;
+          height: 1.0256vw;
+          width: 1.0256vw;
           border-radius: 50%;
           background-color: #83f1dd;
-          margin-right: 4px;
+          margin-right: 1.0256vw;
         }
         img {
-          width: 12px;
-          height: 14px;
+          width: 3.0769vw;
+          height: 3.5897vw;
         }
       }
       .room-footer {
         position: absolute;
         bottom: 0;
         width: calc(100%);
-        padding: 4px 10px 10px;
-        max-height: 100px;
+        padding: 1.0256vw 2.5641vw 2.5641vw;
+        max-height: 25.641vw;
         background: linear-gradient(to bottom, #ffffff00, #434343);
-        border-radius: 0 0 10px 10px;
+        border-radius: 0 0 2.5641vw 2.5641vw;
         .user {
-          font-size: 16px;
+          font-size: 4.1026vw;
         }
         .desc {
-          margin: 4px 0;
+          margin: 1.0256vw 0;
         }
         .city-block {
           display: flex;
           background: linear-gradient(to right, #ff92e3f0, #ff6a93);
           display: inline-flex;
-          padding: 2px 6px;
-          border-radius: 20px;
+          padding: 0.5128vw 1.5385vw;
+          border-radius: 5.1282vw;
           align-items: center;
           .row-li {
             display: flex;
             align-content: center;
             img {
-              width: 12px;
-              height: 12px;
-              margin-right: 2px;
+              width: 3.0769vw;
+              height: 3.0769vw;
+              margin-right: 0.5128vw;
             }
           }
         }

projects/live-app/src/modules/login/login.component.scss

@@ -151,8 +151,8 @@ ion-content {
       margin-top: 8vw;
 
       .icon {
-        width: 32px;
-        height: 32px;
+        width: 8.2051vw;
+        height: 8.2051vw;
         transform: scale(0.5);
         margin-left: 1.333vw;
         img {

projects/live-app/src/modules/tabs/anthorhome/anthorhome.component.scss

@@ -1,10 +1,10 @@
 .content {
-  --padding-bottom: 100px;
+  --padding-bottom: 25.641vw;
   --background: #f8f8f8;
   .header {
-    padding: 20px 10px 10px;
-    height: 160px;
-    // border-radius: 0 0 50px 50px;
+    padding: 5.1282vw 2.5641vw 2.5641vw;
+    height: 41.0256vw;
+    // border-radius: 0 0 12.8205vw 12.8205vw;
     background-size: 100% 100%;
     .top {
       display: flex;
@@ -28,35 +28,35 @@
       //   display: none; /* Chrome Safari */
       // }
       // .more {
-      //   width: 100px;
-      //   margin: 0 10px;
+      //   width: 25.641vw;
+      //   margin: 0 2.5641vw;
       //   display: flex;
       //   align-items: center;
       //   justify-content: space-around;
       //   img {
-      //     width: 20px;
-      //     height: 20px;
+      //     width: 5.1282vw;
+      //     height: 5.1282vw;
       //   }
       // }
     }
   }
   .banner {
-    height: 180px;
-    // width: calc(100% - 20px);
-    padding: 10px;
-    margin-top: -80px;
+    height: 46.1538vw;
+    // width: calc(100% - 5.1282vw);
+    padding: 2.5641vw;
+    margin-top: -20.5128vw;
     img {
       width: 100%;
-      height: 150px;
+      height: 38.4615vw;
       object-fit: cover;
     }
   }
   .swiper {
     width: 100%;
-    height: 160px;
+    height: 41.0256vw;
     .swiper-slide {
       text-align: center;
-      font-size: 18px;
+      font-size: 4.6154vw;
       background: #fff;
       display: flex;
       justify-content: center;
@@ -73,24 +73,24 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    border-bottom: 1px solid #dbdbdb;
-    padding: 10px;
+    border-bottom: 0.2564vw solid #dbdbdb;
+    padding: 2.5641vw;
     .notice-icon {
-      width: 20px;
-      height: 20px;
+      width: 5.1282vw;
+      height: 5.1282vw;
     }
     .swiper-notice1 {
       width: 100%;
-      height: 20px;
+      height: 5.1282vw;
     }
     .swiper-wrapper {
       flex: 1;
-      height: 20px;
+      height: 5.1282vw;
       flex-shrink: 0;
       .notice-item {
         display: flex;
         justify-content: space-between;
-        font-size: 14px;
+        font-size: 3.5897vw;
         background: #ffffff00;
         .notice-item-title {
           display: flex;
@@ -103,7 +103,7 @@
             overflow: hidden; //溢出隐藏
             -webkit-box-orient: vertical; //设置伸缩盒子对象的子元素的排列方式
             -webkit-line-clamp: 1; //设置 块元素包含的文本行数
-            margin: 0 6px 0 0;
+            margin: 0 1.5385vw 0 0;
             text-align: left;
           }
         }
@@ -115,12 +115,12 @@
     }
   }
   .bar {
-    padding: 0 10px;
-    font-size: 14px;
+    padding: 0 2.5641vw;
+    font-size: 3.5897vw;
     display: flex;
     justify-content: space-between;
     ion-select {
-      width: 130px;
+      width: 33.3333vw;
     }
     label-text-wrapper {
       margin-right: 0 !important;
@@ -131,7 +131,7 @@
       align-items: center;
       justify-content: flex-end;
       .city {
-        margin-right: 10px;
+        margin-right: 2.5641vw;
         display: flex;
         align-items: center;
       }
@@ -142,13 +142,13 @@
       background-color: white;
       display: flex;
       align-items: center;
-      margin-bottom: 6px;
-      padding: 4px 6px;
+      margin-bottom: 1.5385vw;
+      padding: 1.0256vw 1.5385vw;
       .list-item-left {
         flex-shrink: 0;
         .avatar {
-          width: 40px;
-          height: 40px;
+          width: 10.2564vw;
+          height: 10.2564vw;
           border-radius: 50%;
         }
       }
@@ -156,25 +156,25 @@
         display: flex;
         align-items: center;
         justify-content: space-between;
-        margin-left: 10px;
+        margin-left: 2.5641vw;
         flex: 1;
         .user-detail {
           .user-name {
-            font-size: 14px;
+            font-size: 3.5897vw;
           }
           .user-tp {
             display: flex;
             align-items: center;
-            margin-top: 4px;
-            font-size: 12px;
+            margin-top: 1.0256vw;
+            font-size: 3.0769vw;
             color: #7d7d7d;
             span {
-              margin-left: 4px;
+              margin-left: 1.0256vw;
             }
           }
         }
         .user-btn {
-          font-size: 14px;
+          font-size: 3.5897vw;
           color: #0054e9;
           display: flex;
           align-items: center;
@@ -193,13 +193,13 @@ ion-picker {
 }
 
 .msg-modal {
-  padding: 20px 0;
+  padding: 5.1282vw 0;
   height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   .msg-modal-item {
-    margin-bottom: 14px;
+    margin-bottom: 3.5897vw;
     display: flex;
     align-items: center;
     color: #797979;

projects/live-app/src/modules/tabs/home/home.component.scss

@@ -1,10 +1,10 @@
 .content {
-  --padding-bottom: 100px;
+  --padding-bottom: 25.641vw;
   --background: #f8f8f8;
   .header {
-    padding: 20px 10px 10px;
-    height: 160px;
-    // border-radius: 0 0 50px 50px;
+    padding: 5.1282vw 2.5641vw 2.5641vw;
+    height: 41.0256vw;
+    // border-radius: 0 0 12.8205vw 12.8205vw;
     background-size: 100% 100%;
     .top {
       display: flex;
@@ -28,35 +28,35 @@
         display: none; /* Chrome Safari */
       }
       .more {
-        width: 100px;
-        margin: 0 10px;
+        width: 25.641vw;
+        margin: 0 2.5641vw;
         display: flex;
         align-items: center;
         justify-content: space-around;
         img {
-          width: 20px;
-          height: 20px;
+          width: 5.1282vw;
+          height: 5.1282vw;
         }
       }
     }
   }
   .banner {
-    height: 180px;
-    // width: calc(100% - 20px);
-    padding: 10px;
-    margin-top: -80px;
+    height: 46.1538vw;
+    // width: calc(100% - 5.1282vw);
+    padding: 2.5641vw;
+    margin-top: -20.5128vw;
     img {
       width: 100%;
-      height: 150px;
+      height: 38.4615vw;
       object-fit: cover;
     }
   }
   .swiper {
     width: 100%;
-    height: 160px;
+    height: 41.0256vw;
     .swiper-slide {
       text-align: center;
-      font-size: 18px;
+      font-size: 4.6154vw;
       background: #fff;
       display: flex;
       justify-content: center;
@@ -73,24 +73,24 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    border-bottom: 1px solid #dbdbdb;
-    padding: 10px;
+    border-bottom: 0.2564vw solid #dbdbdb;
+    padding: 2.5641vw;
     .notice-icon {
-      width: 20px;
-      height: 20px;
+      width: 5.1282vw;
+      height: 5.1282vw;
     }
     .swiper-notice {
       width: 100%;
-      height: 20px;
+      height: 5.1282vw;
     }
     .swiper-wrapper {
       flex: 1;
-      height: 20px;
+      height: 5.1282vw;
       flex-shrink: 0;
       .notice-item {
         display: flex;
         justify-content: space-between;
-        font-size: 14px;
+        font-size: 3.5897vw;
         background: #ffffff00;
         .notice-item-title {
           display: flex;
@@ -103,7 +103,7 @@
             overflow: hidden; //溢出隐藏
             -webkit-box-orient: vertical; //设置伸缩盒子对象的子元素的排列方式
             -webkit-line-clamp: 1; //设置 块元素包含的文本行数
-            margin: 0 6px 0 0;
+            margin: 0 1.5385vw 0 0;
             text-align: left;
           }
         }
@@ -115,12 +115,12 @@
     }
   }
   .bar {
-    padding: 0 10px;
-    font-size: 14px;
+    padding: 0 2.5641vw;
+    font-size: 3.5897vw;
     display: flex;
     justify-content: space-between;
     ion-select {
-      width: 130px;
+      width: 33.3333vw;
     }
     label-text-wrapper {
       margin-right: 0 !important;
@@ -131,7 +131,7 @@
       align-items: center;
       justify-content: flex-end;
       .city {
-        margin-right: 10px;
+        margin-right: 2.5641vw;
         display: flex;
         align-items: center;
       }
@@ -139,78 +139,78 @@
   }
   .room-list {
     display: grid;
-    grid-template-columns: repeat(2, 180px);
-    // grid-column-gap: 10px;
-    grid-row-gap: 10px;
-    padding: 10px;
+    grid-template-columns: repeat(2, 46.1538vw);
+    // grid-column-gap: 2.5641vw;
+    grid-row-gap: 2.5641vw;
+    padding: 2.5641vw;
     justify-content: space-between;
-    font-size: 14px;
+    font-size: 3.5897vw;
     .list-row {
-      // width: 180px;
-      height: 250px;
+      // width: 46.1538vw;
+      height: 64.1026vw;
       background-size: 100% 100%;
       position: relative;
       color: white;
-      border-radius: 10px;
+      border-radius: 2.5641vw;
       .title-tag {
         background: linear-gradient(to bottom right, #9367fe, #d55bd9);
         position: absolute;
         top: 0;
         left: 0;
-        border-radius: 10px 0;
-        padding: 4px 8px;
+        border-radius: 2.5641vw 0;
+        padding: 1.0256vw 2.0513vw;
       }
       .live-tag {
         position: absolute;
-        top: 4px;
-        right: 10px;
-        border-radius: 20px;
-        padding: 4px 10px;
-        font-size: 10px;
+        top: 1.0256vw;
+        right: 2.5641vw;
+        border-radius: 5.1282vw;
+        padding: 1.0256vw 2.5641vw;
+        font-size: 2.5641vw;
         background: #1414147a;
         display: flex;
         align-items: center;
         justify-content: space-evenly;
         span {
-          height: 4px;
-          width: 4px;
+          height: 1.0256vw;
+          width: 1.0256vw;
           border-radius: 50%;
           background-color: #83f1dd;
-          margin-right: 4px;
+          margin-right: 1.0256vw;
         }
         img {
-          width: 12px;
-          height: 14px;
+          width: 3.0769vw;
+          height: 3.5897vw;
         }
       }
       .room-footer {
         position: absolute;
         bottom: 0;
         width: calc(100%);
-        padding: 4px 10px 10px;
-        max-height: 100px;
+        padding: 1.0256vw 2.5641vw 2.5641vw;
+        max-height: 25.641vw;
         background: linear-gradient(to bottom, #ffffff00, #434343);
-        border-radius: 0 0 10px 10px;
+        border-radius: 0 0 2.5641vw 2.5641vw;
         .user {
-          font-size: 16px;
+          font-size: 4.1026vw;
         }
         .desc {
-          margin: 4px 0;
+          margin: 1.0256vw 0;
         }
         .city-block {
           display: flex;
           background: linear-gradient(to right, #ff92e3f0, #ff6a93);
           display: inline-flex;
-          padding: 2px 6px;
-          border-radius: 20px;
+          padding: 0.5128vw 1.5385vw;
+          border-radius: 5.1282vw;
           align-items: center;
           .row-li {
             display: flex;
             align-items: center;
             img {
-              width: 12px;
-              height: 12px;
-              margin-right: 2px;
+              width: 3.0769vw;
+              height: 3.0769vw;
+              margin-right: 0.5128vw;
             }
           }
         }
@@ -220,8 +220,8 @@
   .room-list-column {
     display: block;
     .list-row-column {
-      margin-bottom: 10px;
-      height: 300px;
+      margin-bottom: 2.5641vw;
+      height: 76.9231vw;
       background-size: cover;
       background-repeat: no-repeat;
       background-position: center;

projects/live-app/src/modules/tabs/live-review/live-review.component.scss

@@ -14,9 +14,9 @@
   .post-footer{
     position: absolute;
     bottom: 0;
-    height: 380px;
+    height: 97.4359vw;
     color: white;
-    padding: 50px 10px 120px;
+    padding: 12.8205vw 2.5641vw 30.7692vw;
     width: 100%;
     display: flex;
     flex-direction: column;
@@ -28,15 +28,15 @@
       flex-direction: column;
       align-items: center;
       .avatar{
-        width: 50px;
-        height: 50px;
+        width: 12.8205vw;
+        height: 12.8205vw;
         border-radius: 50%;
-        margin-bottom: 10px;
+        margin-bottom: 2.5641vw;
       }
       .btn{
-        padding: 10px;
-        border-radius: 30px;
-        border: 1px solid;
+        padding: 2.5641vw;
+        border-radius: 7.6923vw;
+        border: 0.2564vw solid;
         // margin:auto;
       }
     }
@@ -44,16 +44,16 @@
       width: 100%;
       .tag{
         background: #fc4942;
-        padding: 4px 6px;
-        border-radius: 4px;
+        padding: 1.0256vw 1.5385vw;
+        border-radius: 1.0256vw;
         display: inline-flex;
         align-items: center;
         img{
-          width: 20px;
+          width: 5.1282vw;
         }
       }
       .live-room{
-        margin: 6px auto;
+        margin: 1.5385vw auto;
         font-weight: 600;
       }
     }

projects/live-app/src/modules/tabs/my/my.component.scss

@@ -1,41 +1,41 @@
 .content {
-  --padding-bottom: 100px;
+  --padding-bottom: 25.641vw;
   --background: #f8f8f8;
   .header {
-    padding: 20px 10px 10px;
+    padding: 5.1282vw 2.5641vw 2.5641vw;
     background-size: 100% 100%;
-    height: 140px;
-    // border-radius: 0 0 50px 50px;
+    height: 35.8974vw;
+    // border-radius: 0 0 12.8205vw 12.8205vw;
     .user-dateil {
       display: flex;
       align-items: center;
       color: white;
-      font-size: 14px;
-      padding: 10px;
+      font-size: 3.5897vw;
+      padding: 2.5641vw;
       .user-right {
         flex: 1;
         .user-name {
           font-weight: 400;
-          font-size: 16px;
+          font-size: 4.1026vw;
         }
         .user-block {
           display: flex;
-          // padding: 0 20px 0 0;
+          // padding: 0 5.1282vw 0 0;
           justify-content: space-between;
-          margin: 6px 0;
-          font-size: 12px;
+          margin: 1.5385vw 0;
+          font-size: 3.0769vw;
           .tags {
             display: flex;
             align-items: center;
             .sex {
               border-radius: 50%;
-              width: 20px;
-              height: 20px;
+              width: 5.1282vw;
+              height: 5.1282vw;
               display: flex;
               align-items: center;
               justify-content: center;
-              box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px,
-                rgba(0, 0, 0, 0.05) 0px 5px 10px;
+              box-shadow: rgba(0, 0, 0, 0.15) 0vw 3.8462vw 6.4103vw,
+                rgba(0, 0, 0, 0.05) 0vw 1.2821vw 2.5641vw;
               background: linear-gradient(to right, #156bfd, #91baff);
             }
             .girl {
@@ -45,36 +45,36 @@
               background: linear-gradient(to right, #156bfd, #d3e4ff);
               display: flex;
               align-items: center;
-              height: 20px;
-              padding: 0 8px;
-              border-radius: 20px;
-              margin: 0 2px;
+              height: 5.1282vw;
+              padding: 0 2.0513vw;
+              border-radius: 5.1282vw;
+              margin: 0 0.5128vw;
               img {
-                width: 14px;
-                height: 14px;
-                margin-right: 4px;
+                width: 3.5897vw;
+                height: 3.5897vw;
+                margin-right: 1.0256vw;
               }
             }
             .id {
               background: linear-gradient(to right, #d76f12, #ffffff9c);
-              padding: 2px 8px;
-              border-radius: 20px;
-              // height: 20px;
+              padding: 0.5128vw 2.0513vw;
+              border-radius: 5.1282vw;
+              // height: 5.1282vw;
             }
           }
           .btn {
-            padding: 2px 10px;
+            padding: 0.5128vw 2.5641vw;
             background: white;
             color: #fd7f76;
-            border-radius: 20px;
-            font-size: 14px;
+            border-radius: 5.1282vw;
+            font-size: 3.5897vw;
           }
         }
         .user-footer {
-          padding: 0 20px 0 0;
+          padding: 0 5.1282vw 0 0;
           display: flex;
           justify-content: space-between;
-          font-size: 12px;
+          font-size: 3.0769vw;
         }
       }
     }
@@ -82,29 +82,29 @@
   .ad {
     display: flex;
     align-items: center;
-    padding: 6px 10px;
-    font-size: 12px;
-    border-radius: 2px;
-    margin: -4px auto 0;
+    padding: 1.5385vw 2.5641vw;
+    font-size: 3.0769vw;
+    border-radius: 0.5128vw;
+    margin: -1.0256vw auto 0;
     background-size: 100% 100%;
-    width: 360px;
+    width: 92.3077vw;
     .ad-left {
       display: flex;
       align-items: center;
       justify-content: space-around;
       .text {
         display: flex;
-        font-size: 14px;
+        font-size: 3.5897vw;
         font-weight: 600;
         span {
           background: linear-gradient(to left, #ff848a, rgb(255 199 202 / 71%));
           color: white;
-          padding: 0px 4px;
-          font-size: 12px;
-          border-radius: 4px;
-          height: 18px;
-          line-height: 18px;
-          margin: 0 4px;
+          padding: 0vw 1.0256vw;
+          font-size: 3.0769vw;
+          border-radius: 1.0256vw;
+          height: 4.6154vw;
+          line-height: 4.6154vw;
+          margin: 0 1.0256vw;
         }
       }
       p {
@@ -114,8 +114,8 @@
     .btn {
       background: white;
       color: #ed3f38;
-      padding: 2px 4px;
-      border-radius: 4px;
+      padding: 0.5128vw 1.0256vw;
+      border-radius: 1.0256vw;
     }
     .my-vip {
       display: flex;
@@ -125,9 +125,9 @@
         display: flex;
         align-items: center;
         img {
-          width: 20px;
-          height: 20px;
-          margin-left: 6px;
+          width: 5.1282vw;
+          height: 5.1282vw;
+          margin-left: 1.5385vw;
         }
       }
       .vip-date {
@@ -139,39 +139,39 @@
   }
   .tool {
     display: grid;
-    grid-template-columns: repeat(5, 60px);
+    grid-template-columns: repeat(5, 15.3846vw);
     align-items: center;
-    padding: 6px 10px;
-    font-size: 12px;
+    padding: 1.5385vw 2.5641vw;
+    font-size: 3.0769vw;
     justify-content: space-evenly;
-    border-radius: 2px;
+    border-radius: 0.5128vw;
     background: #fff;
-    width: 360px;
-    margin: 10px auto;
-    border-radius: 10px;
+    width: 92.3077vw;
+    margin: 2.5641vw auto;
+    border-radius: 2.5641vw;
     color: #808080;
     .tool-li {
       display: flex;
       flex-direction: column;
       align-items: center;
       img {
-        width: 30px;
-        height: 30px;
+        width: 7.6923vw;
+        height: 7.6923vw;
       }
     }
   }
   .order {
-    width: 360px;
-    margin: 10px auto;
+    width: 92.3077vw;
+    margin: 2.5641vw auto;
     background-size: 100% 100%;
-    height: 220px;
-    padding: 6px 30px;
-    border-radius: 20px;
+    height: 56.4103vw;
+    padding: 1.5385vw 7.6923vw;
+    border-radius: 5.1282vw;
     .ladder {
       position: relative;
-      height: 120px;
-      width: 200px;
-      margin: 10px auto;
+      height: 30.7692vw;
+      width: 51.2821vw;
+      margin: 2.5641vw auto;
       .top-block {
         display: flex;
         justify-content: space-evenly;
@@ -184,14 +184,14 @@
         .top1,
         .top2,
         .top3 {
-          // width: 60px;
+          // width: 15.3846vw;
           flex: 1;
           display: flex;
           align-items: center;
           justify-content: center;
           flex-direction: column;
           .user-detail {
-            font-size: 12px;
+            font-size: 3.0769vw;
             display: flex;
             flex-direction: column;
             justify-content: center;
@@ -205,17 +205,17 @@
             color: #ffb63f;
           }
           .user-block {
-            font-size: 10px;
-            margin-bottom: 10px;
+            font-size: 2.5641vw;
+            margin-bottom: 2.5641vw;
             .user-avatar {
-              width: 40px;
-              height: 40px;
+              width: 10.2564vw;
+              height: 10.2564vw;
               position: relative;
               .tag {
                 position: absolute;
-                right: -7px;
-                top: -6px;
-                width: 20px;
+                right: -1.7949vw;
+                top: -1.5385vw;
+                width: 5.1282vw;
               }
               .avatar {
                 width: 100%;
@@ -225,7 +225,7 @@
           }
         }
         .top1 {
-          // margin-bottom: 20px;
+          // margin-bottom: 5.1282vw;
           .num {
             color: #fd4800;
           }
@@ -233,21 +233,21 @@
         .user-detail2 {
           background: #f9bc66;
           width: 100%;
-          height: 40px;
-          border-radius: 4px 0 0 4px;
+          height: 10.2564vw;
+          border-radius: 1.0256vw 0 0 1.0256vw;
         }
         .user-detail1 {
           background: #ffc36f;
           width: 100%;
-          height: 50px;
-          border-radius: 4px 4px 0 0;
-          box-shadow: rgba(17, 12, 46, 0.15) 0px -15px 100px 0px;
+          height: 12.8205vw;
+          border-radius: 1.0256vw 1.0256vw 0 0;
+          box-shadow: rgba(17, 12, 46, 0.15) 0vw -3.8462vw 25.641vw 0vw;
         }
         .user-detail3 {
           background: #fdd7a2;
           width: 100%;
-          height: 30px;
-          border-radius: 0 4px 4px 0;
+          height: 7.6923vw;
+          border-radius: 0 1.0256vw 1.0256vw 0;
         }
       }
     }
@@ -257,23 +257,23 @@
       bottom: 0;
       left: 0;
       width: 100%;
-      height: 70px;
+      height: 17.9487vw;
       background-size: 100% 100%;
     }
     .row {
-      font-size: 12px;
+      font-size: 3.0769vw;
       display: flex;
       align-items: center;
       justify-content: space-between;
-      margin-top: 6px;
+      margin-top: 1.5385vw;
       color: #999999;
       .row-left {
         display: flex;
         align-items: center;
         .row-avatar {
-          width: 30px;
-          height: 30px;
-          margin: 0 4px;
+          width: 7.6923vw;
+          height: 7.6923vw;
+          margin: 0 1.0256vw;
         }
       }
       .row-right {
@@ -283,66 +283,66 @@
           display: flex;
           align-items: center;
           span {
-            width: 6px;
-            height: 6px;
+            width: 1.5385vw;
+            height: 1.5385vw;
             border-radius: 50%;
             background-color: #f7931e;
-            margin-left: 4px;
+            margin-left: 1.0256vw;
           }
         }
       }
     }
   }
   .setting {
-    width: 360px;
+    width: 92.3077vw;
     margin: 0 auto;
-    font-size: 14px;
+    font-size: 3.5897vw;
     .setting-tabs {
       background: white;
-      border-radius: 10px;
+      border-radius: 2.5641vw;
       .row {
         display: flex;
         align-items: center;
         justify-content: space-between;
-        padding: 4px 10px;
+        padding: 1.0256vw 2.5641vw;
         .tabs-left {
           display: flex;
           align-items: center;
           ion-icon {
-            font-size: 22px;
+            font-size: 5.641vw;
             color: #e7435c;
           }
         }
       }
       ion-toggle {
-        --handle-height: 14px;
-        --handle-width: 14px;
+        --handle-height: 3.5897vw;
+        --handle-width: 3.5897vw;
       }
     }
     .list {
       background: white;
-      border-radius: 10px;
-      padding: 4px 10px 10px;
-      margin: 10px auto;
+      border-radius: 2.5641vw;
+      padding: 1.0256vw 2.5641vw 2.5641vw;
+      margin: 2.5641vw auto;
       .li {
         display: flex;
         justify-content: space-between;
-        margin-top: 10px;
+        margin-top: 2.5641vw;
         .li-lable {
           display: flex;
           align-items: center;
           .icon {
-            width: 18px;
-            height: 16px;
-            margin-right: 10px;
+            width: 4.6154vw;
+            height: 4.1026vw;
+            margin-right: 2.5641vw;
           }
         }
         .li-val {
           display: flex;
           justify-content: space-between;
           flex: 1;
-          border-bottom: 1px solid #efefef;
-          padding-bottom: 4px;
+          border-bottom: 0.2564vw solid #efefef;
+          padding-bottom: 1.0256vw;
           ion-icon {
             color: #666666;
           }
@@ -353,7 +353,7 @@
 }
 ion-toggle::part(track),
 ion-toggle.toggle-checked::part(track) {
-  height: 20px;
-  width: 40px;
+  height: 5.1282vw;
+  width: 10.2564vw;
   overflow: visible;
 }

projects/live-app/src/modules/tabs/notice/notice.component.scss

@@ -1,6 +1,6 @@
 .header {
-  padding: 10px;
-  border-bottom: 1px solid #dfdfdf;
+  padding: 2.5641vw;
+  border-bottom: 0.2564vw solid #dfdfdf;
   background: white;
   .top {
     display: flex;
@@ -17,14 +17,14 @@
     //   --indicator-color: #fd6f6a;
     // }
     .more {
-      width: 50px;
-      margin: 0 10px;
+      width: 12.8205vw;
+      margin: 0 2.5641vw;
       display: flex;
       align-items: center;
       justify-content: space-around;
       img {
-        width: 20px;
-        height: 20px;
+        width: 5.1282vw;
+        height: 5.1282vw;
       }
       ion-button {
         --background: white;
@@ -37,7 +37,7 @@
   }
 }
 .content {
-  --padding-bottom: 100px;
+  --padding-bottom: 25.641vw;
   --background: #f8f8f8;
   ion-segment-content {
     display: flex;
@@ -49,49 +49,49 @@
     height: 100%;
     display: flex;
     flex-direction: column;
-    padding: 10px;
+    padding: 2.5641vw;
     .li {
       display: flex;
-      margin-bottom: 10px;
+      margin-bottom: 2.5641vw;
       .avatar{
-        margin-right: 10px;
+        margin-right: 2.5641vw;
         flex-shrink: 0;
-        width: 36px;
-        height: 36px;
+        width: 9.2308vw;
+        height: 9.2308vw;
       }
       .li-right {
         flex: 1;
         display: flex;
         flex-direction: column;
-        // border-bottom: 1px solid #e5e5e5;
-        // padding-bottom: 6px;
+        // border-bottom: 0.2564vw solid #e5e5e5;
+        // padding-bottom: 1.5385vw;
         .name {
           display: flex;
           justify-content: space-between;
           .time {
             color: #676767;
-            font-size: 12px;
+            font-size: 3.0769vw;
           }
         }
         .message-content {
           color: #676767;
-          margin-top: 6px;
+          margin-top: 1.5385vw;
         }
       }
     }
     ion-avatar {
-      margin-right: 10px;
+      margin-right: 2.5641vw;
       flex-shrink: 0;
     }
   }
 }
 ion-popover {
-  --width: 120px;
+  --width: 30.7692vw;
 }
 .clear {
-  // padding: 4px 10px;
+  // padding: 1.0256vw 2.5641vw;
   // text-align: center;
-  font-size: 14px;
+  font-size: 3.5897vw;
   color: #676767;
 }
 ion-modal {

projects/live-app/src/modules/tabs/ranking/ranking.component.scss

@@ -1,16 +1,16 @@
 .content{
   .order {
-    width: 360px;
-    margin: 10px auto;
+    width: 92.3077vw;
+    margin: 2.5641vw auto;
     background-size: 100% 100%;
-    height: 220px;
-    padding: 6px 30px;
-    border-radius: 20px;
+    height: 56.4103vw;
+    padding: 1.5385vw 7.6923vw;
+    border-radius: 5.1282vw;
     .ladder {
       position: relative;
-      height: 120px;
-      width: 200px;
-      margin: 10px auto;
+      height: 30.7692vw;
+      width: 51.2821vw;
+      margin: 2.5641vw auto;
       .top-block {
         display: flex;
         justify-content: space-evenly;
@@ -23,14 +23,14 @@
         .top1,
         .top2,
         .top3 {
-          // width: 60px;
+          // width: 15.3846vw;
           flex: 1;
           display: flex;
           align-items: center;
           justify-content: center;
           flex-direction: column;
           .user-detail {
-            font-size: 12px;
+            font-size: 3.0769vw;
             display: flex;
             flex-direction: column;
             justify-content: center;
@@ -44,17 +44,17 @@
             color: #ffb63f;
           }
           .user-block {
-            font-size: 10px;
-            margin-bottom: 10px;
+            font-size: 2.5641vw;
+            margin-bottom: 2.5641vw;
             .user-avatar {
-              width: 40px;
-              height: 40px;
+              width: 10.2564vw;
+              height: 10.2564vw;
               position: relative;
               .tag {
                 position: absolute;
-                right: -7px;
-                top: -6px;
-                width: 20px;
+                right: -1.7949vw;
+                top: -1.5385vw;
+                width: 5.1282vw;
               }
               .avatar {
                 width: 100%;
@@ -64,7 +64,7 @@
           }
         }
         .top1 {
-          // margin-bottom: 20px;
+          // margin-bottom: 5.1282vw;
           .num {
             color: #fd4800;
           }
@@ -72,21 +72,21 @@
         .user-detail2{
           background: #f9bc66;
           width: 100%;
-          height: 40px;
-          border-radius: 4px 0 0 4px;
+          height: 10.2564vw;
+          border-radius: 1.0256vw 0 0 1.0256vw;
         }
         .user-detail1{
           background: #ffc36f;
           width: 100%;
-          height: 50px;
-          border-radius: 4px 4px 0 0 ;
-          box-shadow: rgba(17, 12, 46, 0.15) 0px -15px 100px 0px;
+          height: 12.8205vw;
+          border-radius: 1.0256vw 1.0256vw 0 0 ;
+          box-shadow: rgba(17, 12, 46, 0.15) 0vw -3.8462vw 25.641vw 0vw;
         }
         .user-detail3{
           background: #fdd7a2;
           width: 100%;
-          height: 30px;
-          border-radius: 0 4px 4px 0 ;
+          height: 7.6923vw;
+          border-radius: 0 1.0256vw 1.0256vw 0 ;
         }
       }
     }
@@ -96,23 +96,23 @@
       bottom: 0;
       left: 0;
       width: 100%;
-      height: 70px;
+      height: 17.9487vw;
       background-size: 100% 100%;
     }
     .row {
-      font-size: 12px;
+      font-size: 3.0769vw;
       display: flex;
       align-items: center;
       justify-content: space-between;
-      margin-top: 6px;
+      margin-top: 1.5385vw;
       color: #999999;
       .row-left {
         display: flex;
         align-items: center;
         .row-avatar {
-          width: 30px;
-          height: 30px;
-          margin: 0 4px;
+          width: 7.6923vw;
+          height: 7.6923vw;
+          margin: 0 1.0256vw;
         }
       }
       .row-right {
@@ -122,11 +122,11 @@
           display: flex;
           align-items: center;
           span {
-            width: 6px;
-            height: 6px;
+            width: 1.5385vw;
+            height: 1.5385vw;
             border-radius: 50%;
             background-color: #f7931e;
-            margin-left: 4px;
+            margin-left: 1.0256vw;
           }
         }
       }

projects/live-app/src/modules/tabs/space/space.component.scss

@@ -1,6 +1,6 @@
 .header {
-  padding: 10px;
-  border-bottom: 1px solid #dfdfdf;
+  padding: 2.5641vw;
+  border-bottom: 0.2564vw solid #dfdfdf;
   background: white;
   .top {
     display: flex;
@@ -17,14 +17,14 @@
     //   --indicator-color: #fd6f6a;
     // }
     .more {
-      width: 50px;
-      margin: 0 10px;
+      width: 12.8205vw;
+      margin: 0 2.5641vw;
       display: flex;
       align-items: center;
       justify-content: space-around;
       img {
-        width: 20px;
-        height: 20px;
+        width: 5.1282vw;
+        height: 5.1282vw;
       }
       ion-button {
         --background: white;
@@ -37,28 +37,28 @@
   }
 }
 .content {
-  --padding-bottom: 100px;
+  --padding-bottom: 25.641vw;
   --background: #f8f8f8;
   .tab-content {
     .card {
       background-color: white;
-      margin-bottom: 10px;
-      padding: 10px;
+      margin-bottom: 2.5641vw;
+      padding: 2.5641vw;
       .user-data {
         display: flex;
         align-items: center;
-        padding-bottom: 4px;
-        border-bottom: 1px solid #dfdfdf;
+        padding-bottom: 1.0256vw;
+        border-bottom: 0.2564vw solid #dfdfdf;
         .pendant {
-          width: 40px;
-          height: 40px;
+          width: 10.2564vw;
+          height: 10.2564vw;
           display: flex;
           justify-content: center;
           align-items: center;
           background-size: 100% 100%;
           .avatar {
-            width: 30px;
-            height: 30px;
+            width: 7.6923vw;
+            height: 7.6923vw;
             border-radius: 50%;
           }
         }
@@ -71,23 +71,23 @@
             display: flex;
             align-items: center;
             .user-name {
-              margin-left: 10px;
+              margin-left: 2.5641vw;
             }
             .tag {
-              border: 1px solid;
-              padding: 0 4px;
-              margin-left: 10px;
-              border-radius: 4px;
-              font-size: 12px;
+              border: 0.2564vw solid;
+              padding: 0 1.0256vw;
+              margin-left: 2.5641vw;
+              border-radius: 1.0256vw;
+              font-size: 3.0769vw;
               color: #a3a3a3;
             }
             img {
-              width: 30px;
-              margin-left: 6px;
+              width: 7.6923vw;
+              margin-left: 1.5385vw;
             }
           }
           .time {
-            font-size: 12px;
+            font-size: 3.0769vw;
             color: #c5c5c5;
             display: flex;
             flex-direction: column;
@@ -99,35 +99,35 @@
         }
       }
       .post-dateil {
-        margin: 10px 0 10px 50px;
+        margin: 2.5641vw 0 2.5641vw 12.8205vw;
         .text-content {
-          font-size: 14px;
+          font-size: 3.5897vw;
         }
         .imgs {
           display: grid;
-          grid-template-columns: repeat(4, 70px);
+          grid-template-columns: repeat(4, 17.9487vw);
           justify-content: space-between;
           flex-wrap: wrap;
           img {
-            height: 70px;
-            width: 70px;
+            height: 17.9487vw;
+            width: 17.9487vw;
             object-fit: cover;
-            margin-top: 10px;
+            margin-top: 2.5641vw;
           }
         }
       }
       .tool {
-        margin-left: 50px;
-        margin-top: 20px;
+        margin-left: 12.8205vw;
+        margin-top: 5.1282vw;
         display: flex;
         justify-content: space-between;
         .tool-item {
           display: flex;
           align-items: center;
           color: #a3a3a3;
-          // margin-right: 30px;
+          // margin-right: 7.6923vw;
           ion-icon {
-            font-size: 30px;
+            font-size: 7.6923vw;
           }
         }
         .action-icon {
@@ -143,5 +143,5 @@
   }
 }
 ion-popover {
-  --width: 130px;
+  --width: 33.3333vw;
 }

projects/live-app/src/modules/tabs/tabs/tabs.component.scss

@@ -8,11 +8,11 @@
   justify-content : space-evenly;
   height          : 13.3333vw;
   // background-color: #fff;
-  backdrop-filter: saturate(180%) blur(20px);
+  backdrop-filter: saturate(180%) blur(5.1282vw);
   background: rgb(255 255 255 / .8);
   color           : #808080;
-  box-shadow: rgba(17, 17, 26, 0.1) 0px -1px 0px;
-  border-radius: 10px 10px 0 0;
+  box-shadow: rgba(17, 17, 26, 0.1) 0vw -0.2564vw 0vw;
+  border-radius: 2.5641vw 2.5641vw 0 0;
   .buttom {
     display        : flex;
     flex-direction : column;
@@ -32,8 +32,8 @@
     margin-top: -10.6667vw;
     z-index   : 99;
     // img{
-    //   width: 60px;
-    //   height: 52px;
+    //   width: 15.3846vw;
+    //   height: 13.3333vw;
     // }
     .box-icon {
       width : 16vw !important;
@@ -44,5 +44,5 @@
   }
 }
 ion-tab-button{
-  height: 0px;
+  height: 0vw;
 }

projects/live-app/src/modules/user/album/album.component.scss

@@ -4,7 +4,7 @@
   width: 80%;
   left: 10vw;
   background: #92a1ff;
-  border-radius: 18px;
+  border-radius: 4.6154vw;
 }
 .content {
   background-image: url("https://file-cloud.fmode.cn/Qje9D4bqol/20241220/b313ov054708770.png") !important;
@@ -13,6 +13,6 @@
 	background-size: 100% 100%;
   --background:#ffffff00;
   .upload {
-    margin: 10px auto;
+    margin: 2.5641vw auto;
   }
 }

projects/live-app/src/modules/user/anchor/anchor.component.scss

@@ -6,30 +6,30 @@
   background-position: center top;
   background-size: 100% 100%;
   --background: #ffffff00;
-  --padding-bottom: 100px;
+  --padding-bottom: 25.641vw;
   .edit-room {
-    // padding: 10px;
-    width: 370px;
+    // padding: 2.5641vw;
+    width: 94.8718vw;
     margin: 0 auto;
     background: white;
-    border-radius: 6px;
-    margin-top: 10px;
+    border-radius: 1.5385vw;
+    margin-top: 2.5641vw;
     .row {
-      padding: 6px;
-      margin-bottom: 4px;
+      padding: 1.5385vw;
+      margin-bottom: 1.0256vw;
       .title {
         color: black;
-        margin-bottom: 4px;
+        margin-bottom: 1.0256vw;
       }
       ion-input {
         background-color: #f3f3f3;
-        --padding-end: 4px;
-        --padding-start: 4px;
+        --padding-end: 1.0256vw;
+        --padding-start: 1.0256vw;
       }
       ion-textarea {
         background-color: #f3f3f3;
-        --padding-end: 4px;
-        --padding-start: 4px;
+        --padding-end: 1.0256vw;
+        --padding-start: 1.0256vw;
       }
     }
   }
@@ -40,7 +40,7 @@
   display: flex;
   align-items: flex-start;
   justify-content: center;
-  font-size: 14px;
+  font-size: 3.5897vw;
   font-weight: 400;
   color: #9f9f9f;
   margin: auto;
@@ -69,6 +69,6 @@
   margin: 0 10%;
   // background-color: #fe4d54;
   background: #0054e9;
-  border-radius: 10px;
+  border-radius: 2.5641vw;
   z-index: 2;
 }

projects/live-app/src/modules/user/browse/browse.component.scss

@@ -1,5 +1,5 @@
 .content {
-  padding-bottom: 50px;
+  padding-bottom: 12.8205vw;
   background-image: url("https://file-cloud.fmode.cn/Qje9D4bqol/20241220/b313ov054708770.png") !important;
   background-repeat: no-repeat;
   background-position: center top;
@@ -10,39 +10,39 @@
     // padding: 0 3.2vw;
     // position: sticky;
     // top: 0;
-    border-bottom: 1px solid #e5e5e5;
+    border-bottom: 0.2564vw solid #e5e5e5;
   }
   .list {
     .li {
       display: flex;
       justify-content: space-between;
-      padding: 4px 10px;
+      padding: 1.0256vw 2.5641vw;
       background: white;
-      border-bottom: 1px solid #e5e5e5;
+      border-bottom: 0.2564vw solid #e5e5e5;
       .li-left {
         flex-shrink: 0;
-        width: 40px;
+        width: 10.2564vw;
         .avatar {
-          width: 36px;
-          height: 36px;
+          width: 9.2308vw;
+          height: 9.2308vw;
           border-radius: 50%;
         }
       }
       .li-right {
         display: flex;
         flex: 1;
-        margin-left: 10px;
+        margin-left: 2.5641vw;
         justify-content: space-between;
         align-items: center;
         .li-right-user {
           display: flex;
           flex-direction: column;
           .user-name{
-            font-size: 14px;
-            margin-bottom: 6px;
+            font-size: 3.5897vw;
+            margin-bottom: 1.5385vw;
           }
           .time {
-            font-size: 12px;
+            font-size: 3.0769vw;
             color: #7d7d7d;
           }
         }

projects/live-app/src/modules/user/certification/certification.component.scss

@@ -23,17 +23,17 @@
 	background-size: 100% 100%;
   --background:#ffffff00;
   .hred {
-    width: 350px;
+    width: 89.7436vw;
     height: 42.6667vw;
     padding: 2.6667vw;
     background: #FFFFFF;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin: 10px auto;
-    border-radius: 6px;
+    margin: 2.5641vw auto;
+    border-radius: 1.5385vw;
     .hred-left {
-      font-size: 14px;
+      font-size: 3.5897vw;
       font-family: Source Han Sans CN;
       font-weight: 400;
       color: #bbbbbb;
@@ -86,7 +86,7 @@
     font-family: Source Han Sans CN;
     font-weight: 500;
     // color: #ffffff;
-    width: 350px;
+    width: 89.7436vw;
     padding: 2.6667vw;
     border-radius: 2.6667vw;
     background: #fff;
@@ -101,7 +101,7 @@
       // background: #353c4d;
       // color: #ffffff;
       padding: 0 5.3333vw;
-      font-size: 16px;
+      font-size: 4.1026vw;
       flex: 1;
     }
   }
@@ -110,7 +110,7 @@
     margin: 26.6667vw auto 5.3333vw;
     width: 69.3333vw;
     background: #0054e9;
-    border-radius: 10px;
+    border-radius: 2.5641vw;
     padding: 2.6667vw 0;
     text-align: center;
     font-size: 4.2667vw;
@@ -122,7 +122,7 @@
     display: flex;
     align-items: flex-start;
     justify-content: center;
-    font-size: 14px;
+    font-size: 3.5897vw;
     font-weight: 400;
     color: #9f9f9f;
     margin: auto;
@@ -143,7 +143,7 @@
   }
   .pflex{
     position: fixed;
-    bottom: 20px;
+    bottom: 5.1282vw;
     text-align: center;
     width: 100%;
   }

projects/live-app/src/modules/user/feedback/feedback.component.scss

@@ -1,5 +1,5 @@
 .content {
-  padding-bottom: 50px;
+  padding-bottom: 12.8205vw;
   background-image: url("https://file-cloud.fmode.cn/Qje9D4bqol/20241220/b313ov054708770.png") !important;
   background-repeat: no-repeat;
   background-position: center top;
@@ -13,7 +13,7 @@
 
   // 输入框
   .section {
-    width: 380px;
+    width: 97.4359vw;
     background: #eeeeee;
     border-radius: 0.24rem;
     margin: 0.3rem auto;
@@ -28,7 +28,7 @@
     span {
       width: 100%;
       text-align: right;
-      font-size: 12px;
+      font-size: 3.0769vw;
       font-family: Source Han Sans CN;
       font-weight: 400;
       color: #666666;
@@ -40,17 +40,17 @@
   }
 
   .title {
-    width: 380px;
-    font-size: 14px;
+    width: 97.4359vw;
+    font-size: 3.5897vw;
     font-family: Source Han Sans CN;
     font-weight: 600;
     color: #222222;
-    margin: 10px auto;
+    margin: 2.5641vw auto;
   }
 
   .upload {
-    width: 380px;
-    margin: 10px auto;
+    width: 97.4359vw;
+    margin: 2.5641vw auto;
     // background-color: #eeeeee;
   }
 }
@@ -60,5 +60,5 @@
   width: 80%;
   left: 10vw;
   --background: #92a1ff;
-  border-radius: 18px;
+  border-radius: 4.6154vw;
 }

projects/live-app/src/modules/user/profile/profile.component.scss

@@ -1,5 +1,5 @@
 .content {
-  --padding-bottom: 100px;
+  --padding-bottom: 25.641vw;
   // --background: #ffffff;
   background-image: url("https://file-cloud.fmode.cn/Qje9D4bqol/20241220/b313ov054708770.png") !important;
   background-repeat: no-repeat;
@@ -7,7 +7,7 @@
   background-size: 100% 100%;
   --background: #ffffff00;
   .bg {
-    height: 160px;
+    height: 41.0256vw;
     width: 100%;
     position: relative;
     img {
@@ -26,10 +26,10 @@
   }
   .header {
     width: 100%;
-    height: 100px;
-    padding: 6px 10px;
+    // height: 25.641vw;
+    padding: 1.5385vw 2.5641vw;
     // background: white;
-    // border-radius: 0 0 6px 6px;
+    // border-radius: 0 0 1.5385vw 1.5385vw;
     .user-dateil {
       width: 100%;
       display: flex;
@@ -39,16 +39,16 @@
           display: flex;
           align-items: self-end;
           .pendant {
-            margin-top: -38px;
-            width: 80px;
-            height: 80px;
+            margin-top: -9.7436vw;
+            width: 20.5128vw;
+            height: 20.5128vw;
             display: flex;
             justify-content: center;
             align-items: center;
             background-size: 100% 100%;
             .avatar {
-              width: 60px;
-              height: 60px;
+              width: 15.3846vw;
+              height: 15.3846vw;
               z-index: 1;
               border-radius: 50%;
             }
@@ -57,21 +57,21 @@
             display: flex;
             align-items: end;
             .top-left-title {
-              font-size: 20px;
+              font-size: 5.1282vw;
               font-weight: 500;
             }
             .sex {
               border-radius: 50%;
-              width: 20px;
-              height: 20px;
+              width: 5.1282vw;
+              height: 5.1282vw;
               display: flex;
               align-items: center;
               justify-content: center;
-              box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px,
-                rgba(0, 0, 0, 0.05) 0px 5px 10px;
+              box-shadow: rgba(0, 0, 0, 0.15) 0vw 3.8462vw 6.4103vw,
+                rgba(0, 0, 0, 0.05) 0vw 1.2821vw 2.5641vw;
               background: linear-gradient(to right, #156bfd, #91baff);
-              margin: 0 6px;
-              font-size: 12px;
+              margin: 0 1.5385vw;
+              font-size: 3.0769vw;
             }
             .girl {
               background: linear-gradient(to right, #fe454e, #f5a7ab);
@@ -80,15 +80,15 @@
               background: linear-gradient(to right, #156bfd, #d3e4ff);
               display: flex;
               align-items: center;
-              height: 20px;
-              padding: 0 8px;
-              border-radius: 20px;
-              margin: 0 2px;
+              height: 5.1282vw;
+              padding: 0 2.0513vw;
+              border-radius: 5.1282vw;
+              margin: 0 0.5128vw;
               color: white;
               img {
-                width: 14px;
-                height: 14px;
-                margin-right: 4px;
+                width: 3.5897vw;
+                height: 3.5897vw;
+                margin-right: 1.0256vw;
               }
             }
             .gril {
@@ -101,63 +101,63 @@
           }
         }
         .user-status {
-          margin: 10px 0;
+          margin: 2.5641vw 0;
           display: flex;
           align-items: center;
-          font-size: 12px;
+          font-size: 3.0769vw;
           .id {
             color: #1e1e1e;
           }
           .state {
             display: flex;
             align-items: center;
-            margin-left: 10px;
+            margin-left: 2.5641vw;
             .spot {
-              width: 8px;
-              height: 8px;
+              width: 2.0513vw;
+              height: 2.0513vw;
               border-radius: 50%;
               background: #f1ac16;
             }
             .tag {
               // color: white;
-              padding: 2px;
-              border-radius: 10px;
-              // margin-left: 10px;
+              padding: 0.5128vw;
+              border-radius: 2.5641vw;
+              // margin-left: 2.5641vw;
             }
           }
           .video-unit {
-            margin-left: 10px;
+            margin-left: 2.5641vw;
           }
         }
       }
       .user-right {
         flex-shrink: 0;
         ion-icon {
-          font-size: 40px;
+          font-size: 10.2564vw;
           // color: #fe454e;
         }
       }
     }
     .user-fans {
-      font-size: 14px;
+      font-size: 3.5897vw;
       span {
-        margin-right: 10px;
+        margin-right: 2.5641vw;
       }
     }
     .bar {
-      margin-top: 10px;
-      border-bottom: 1px solid #dbdbdb;
+      margin-top: 2.5641vw;
+      border-bottom: 0.2564vw solid #dbdbdb;
       width: 100%;
     }
   }
   .user-data {
     width: 100%;
-    padding: 6px 10px;
+    padding: 1.5385vw 2.5641vw;
     position: relative;
     .view-auth {
       position: absolute;
       left: 0;
-      top: 50px;
+      top: 12.8205vw;
       width: 100%;
       height: 100%;
       background: linear-gradient(
@@ -170,32 +170,32 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      min-height: 450px;
+      min-height: 115.3846vw;
     }
     .tabs {
       display: flex;
       justify-content: space-evenly;
-      margin: 10px auto;
+      margin: 2.5641vw auto;
     }
     .title-h2 {
-      font-size: 16px;
+      font-size: 4.1026vw;
       font-weight: bold;
-      // border-bottom: 1px solid #dbdbdb;
+      // border-bottom: 0.2564vw solid #dbdbdb;
       display: table-row-group;
     }
     .active::after {
       content: "";
       width: 60%;
-      height: 1px;
+      height: 0.2564vw;
       display: block;
       margin: 0 auto;
-      border-bottom: 2px solid rgb(0 0 0 / 98%);
-      border-radius: 10px;
+      border-bottom: 0.5128vw solid rgb(0 0 0 / 98%);
+      border-radius: 2.5641vw;
     }
     .data-row {
-      margin-top: 10px;
+      margin-top: 2.5641vw;
       .title-text {
-        font-size: 14px;
+        font-size: 3.5897vw;
         font-weight: bold;
       }
       .tags {
@@ -204,51 +204,51 @@
         .label {
           display: inline-block;
           background: #ff7378;
-          padding: 2px 10px;
-          border-radius: 20px;
-          font-size: 12px;
-          margin: 6px 6px 6px 0;
+          padding: 0.5128vw 2.5641vw;
+          border-radius: 5.1282vw;
+          font-size: 3.0769vw;
+          margin: 1.5385vw 1.5385vw 1.5385vw 0;
           color: white;
         }
         .tag {
           background: #ffffff;
-          border-radius: 4px;
-          border: 1px solid;
+          border-radius: 1.0256vw;
+          border: 0.2564vw solid;
           color: #7045ff;
         }
         .assess {
           background: #ffffff;
-          border-radius: 4px;
-          border: 1px solid;
+          border-radius: 1.0256vw;
+          border: 0.2564vw solid;
           color: #7045ff;
         }
       }
       .motto {
-        font-size: 12px;
+        font-size: 3.0769vw;
       }
       .gift {
         display: grid;
-        grid-template-columns: repeat(5, 70px);
+        grid-template-columns: repeat(5, 17.9487vw);
         justify-content: space-between;
         flex-wrap: wrap;
         img {
-          // width: 40px;
-          height: 70px;
+          // width: 10.2564vw;
+          height: 17.9487vw;
           border-radius: 50%;
           object-fit: cover;
-          margin-top: 10px;
+          margin-top: 2.5641vw;
         }
       }
       .album {
         display: grid;
-        grid-template-columns: repeat(5, 70px);
+        grid-template-columns: repeat(5, 17.9487vw);
         justify-content: space-between;
         flex-wrap: wrap;
         img {
-          // width: 40px;
-          height: 70px;
+          // width: 10.2564vw;
+          height: 17.9487vw;
           object-fit: cover;
-          margin-top: 10px;
+          margin-top: 2.5641vw;
         }
       }
     }
@@ -259,18 +259,18 @@
     display: flex;
     justify-content: space-evenly;
     .round {
-      border-radius: 20px;
+      border-radius: 5.1282vw;
       color: #156bfd;
-      font-size: 14px;
+      font-size: 3.5897vw;
       display: flex;
       align-items: center;
-      border: 1px solid #156bfd;
-      width: 120px;
-      height: 40px;
+      border: 0.2564vw solid #156bfd;
+      width: 30.7692vw;
+      height: 10.2564vw;
       justify-content: center;
       ion-icon {
-        font-size: 20px;
-        margin-right: 10px;
+        font-size: 5.1282vw;
+        margin-right: 2.5641vw;
       }
     }
     .gift {
@@ -278,22 +278,22 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      border: 1px solid;
-      width: 40px;
-      height: 40px;
+      border: 0.2564vw solid;
+      width: 10.2564vw;
+      height: 10.2564vw;
       color: #fe454e;
       ion-icon {
-        font-size: 30px;
+        font-size: 7.6923vw;
       }
     }
   }
 }
 ion-modal {
   --height: 50%;
-  --width: 350px;
-  --border-radius: 16px;
-  --box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
-    0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --width: 89.7436vw;
+  --border-radius: 4.1026vw;
+  --box-shadow: 0 2.5641vw 3.8462vw -0.7692vw rgb(0 0 0 / 0.1),
+    0 1.0256vw 1.5385vw -1.0256vw rgb(0 0 0 / 0.1);
 }
 .wrapper {
   height: 100%;

projects/live-app/src/modules/user/release/release.component.scss

@@ -1,5 +1,5 @@
 .content {
-  padding-bottom: 50px;
+  padding-bottom: 12.8205vw;
   background-image: url("https://file-cloud.fmode.cn/Qje9D4bqol/20241220/b313ov054708770.png") !important;
   background-repeat: no-repeat;
   background-position: center top;
@@ -14,7 +14,7 @@
     color: white;
     margin: 0 10%;
     background-color: #fe4d54;
-    border-radius: 10px;
+    border-radius: 2.5641vw;
   }
 }
 .feedback {
@@ -24,7 +24,7 @@
 
   // 输入框
   .section {
-    width: 380px;
+    width: 97.4359vw;
     background: #eeeeee;
     border-radius: 0.24rem;
     margin: 0.3rem auto;
@@ -39,7 +39,7 @@
     span {
       width: 100%;
       text-align: right;
-      font-size: 12px;
+      font-size: 3.0769vw;
       font-family: Source Han Sans CN;
       font-weight: 400;
       color: #666666;
@@ -51,17 +51,17 @@
   }
 
   .title {
-    width: 380px;
-    font-size: 14px;
+    width: 97.4359vw;
+    font-size: 3.5897vw;
     font-family: Source Han Sans CN;
     font-weight: 600;
     color: #222222;
-    margin: 10px auto;
+    margin: 2.5641vw auto;
   }
 
   .upload {
-    width: 380px;
-    margin: 10px auto;
+    width: 97.4359vw;
+    margin: 2.5641vw auto;
     // background-color: #eeeeee;
   }
 }
@@ -71,5 +71,5 @@
   width: 80%;
   left: 10vw;
   --background: #fe4d54;
-  border-radius: 18px;
+  border-radius: 4.6154vw;
 }

projects/live-app/src/modules/user/setting/setting.component.scss

@@ -43,21 +43,21 @@ ion-content {
       justify-content: flex-end;
     }
     .tags {
-      width: 250px;
+      width: 64.1026vw;
       flex-wrap: wrap;
       .tag {
-        margin-right: 14px;
+        margin-right: 3.5897vw;
         position: relative;
         .close {
-          font-size: 14px;
+          font-size: 3.5897vw;
           position: absolute;
           top: 0;
-          right: -10px;
+          right: -2.5641vw;
           color: #858585;
         }
       }
       .add {
-        font-size: 20px;
+        font-size: 5.1282vw;
         color: #0054e9;
       }
     }
@@ -83,23 +83,23 @@ ion-content {
     color: white;
     margin: 0 10%;
     background-color: #fe4d54;
-    border-radius: 10px;
+    border-radius: 2.5641vw;
   }
 }
 .tag-modal {
-  height: 400px;
-  padding: 20px 0;
+  height: 102.5641vw;
+  padding: 5.1282vw 0;
   .list {
     display: flex;
     flex-wrap: wrap;
-    padding: 4px 0 4px 4px;
+    padding: 1.0256vw 0 1.0256vw 1.0256vw;
     .li {
-      padding: 2px 6px;
-      border: 1px solid;
-      margin-right: 6px;
-      margin-bottom: 10px;
-      font-size: 14px;
-      border-radius: 4px;
+      padding: 0.5128vw 1.5385vw;
+      border: 0.2564vw solid;
+      margin-right: 1.5385vw;
+      margin-bottom: 2.5641vw;
+      font-size: 3.5897vw;
+      border-radius: 1.0256vw;
       color: #858585;
     }
     .active{

projects/live-app/src/modules/user/share/share.component.scss

@@ -5,32 +5,32 @@
 	background-repeat: no-repeat;
 	background-position: center top;
 	background-size: 100% 100%;
-  padding: 10px;
+  padding: 2.5641vw;
   .share {
     display: flex;
     flex-direction: column;
     align-items: center;
     .share-view {
-      min-height: 300px;
+      min-height: 76.9231vw;
       .canvas,
       .poster {
-        width: 300px;
-        height: 480px;
+        width: 76.9231vw;
+        height: 123.0769vw;
       }
     }
     .share-footre {
-      margin-top: 20px;
+      margin-top: 5.1282vw;
       display: flex;
       justify-content: space-evenly;
       width: 100%;
       user-select: none;
       .share-btn {
         cursor: pointer;
-        font-size: 16px;
+        font-size: 4.1026vw;
         display: flex;
         align-items: center;
         img {
-          margin-right: 4px;
+          margin-right: 1.0256vw;
         }
       }
       .share-btn:active {