修改样式

pagesHome/team/info.vue

@@ -18,45 +18,48 @@
 				</button>
 			</view>
 		</view>
-		<view class="two">
-			<view class="two_1">
-				创建活动，还可以微信、短信通知队员报名
-			</view>
-			<view class="two_2">
-				<button type="warn" size="mini" @tap="toSave">创建</button>
-			</view>
-			<view class="two_3">
-				<uni-icons type="list" size="18"></uni-icons>
-				<text>查看全部活动</text>
-			</view>
-		</view>
-		<view class="thr">
-			<view class="thr_1">
-				<view class="list" v-for="(item, index) in menuList" :key="index" @tap="toInfo(item)">
-					<uni-icons custom-prefix="iconfont" :type="item.icon" size="25" :color="item.color"></uni-icons>
-					<view class="name">{{item.name}}</view>
+		<view class="position">
+			<view class="two">
+				<view class="two_1">
+					创建活动，还可以微信、短信通知队员报名
 				</view>
-			</view>
-			<view class="thr_2">
-				<view class="fraction">
-					<view class="top">{{info.score||0}}</view>
-					<view class="bottom">总比赛</view>
+				<view class="two_2">
+					<button type="warn" size="mini" @tap="toSave">创建</button>
 				</view>
-				<view class="circle">
-					<circle :pro="16/100" :border_back_color="'#f1f1f1'" :border_color="'#FF0000'" content="16">
-					</circle>
-					<text>胜</text>
+				<view class="two_3">
+					<uni-icons type="list" size="18"></uni-icons>
+					<text>查看全部活动</text>
 				</view>
-				<view class="circle">
-					<circle :pro="5/100" :border_back_color="'#f1f1f1'" :border_color="'#35BD7B'" content="5"></circle>
-					<text>平</text>
+			</view>
+			<view class="thr">
+				<view class="thr_1">
+					<view class="list" v-for="(item, index) in menuList" :key="index" @tap="toInfo(item)">
+						<uni-icons custom-prefix="iconfont" :type="item.icon" size="25" :color="item.color"></uni-icons>
+						<view class="name">{{item.name}}</view>
+					</view>
 				</view>
-				<view class="circle">
-					<circle :pro="17/100" :border_back_color="'#f1f1f1'" :border_color="'#FFA500'" content="17">
-					</circle>
-					<text>负</text>
+				<view class="thr_2">
+					<view class="fraction">
+						<view class="top">{{info.score||0}}</view>
+						<view class="bottom">总比赛</view>
+					</view>
+					<view class="circle">
+						<circle :pro="16/100" :border_back_color="'#f1f1f1'" :border_color="'#FF0000'" content="16">
+						</circle>
+						<text>胜</text>
+					</view>
+					<view class="circle">
+						<circle :pro="5/100" :border_back_color="'#f1f1f1'" :border_color="'#35BD7B'" content="5">
+						</circle>
+						<text>平</text>
+					</view>
+					<view class="circle">
+						<circle :pro="17/100" :border_back_color="'#f1f1f1'" :border_color="'#FFA500'" content="17">
+						</circle>
+						<text>负</text>
+					</view>
+					<uni-icons type="forward" size="25" color="#858585"></uni-icons>
 				</view>
-				<uni-icons type="forward" size="25" color="#858585"></uni-icons>
 			</view>
 		</view>
 	</view>
@@ -150,103 +153,104 @@
 			}
 		}
 
-		.two {
+		.position {
 			position: absolute;
 			top: 35vw;
-			width: 94vw;
-			margin: 0 3vw;
-			padding: 5vw 0 0 0;
-			border-radius: 1vw;
-			text-align: center;
-			background-color: var(--mainColor);
-
-			.two_1 {
-				font-size: var(--font16Size);
-				color: var(--f99Color);
-				padding: 2vw 0;
-			}
-
-			.two_2 {
-				padding: 4vw 0;
-
-				button {
-					padding: 0 10vw;
+			
+			.two {
+				width: 94vw;
+				margin: 0 3vw;
+				padding: 5vw 0 0 0;
+				border-radius: 1vw;
+				text-align: center;
+				background-color: var(--mainColor);
+			
+				.two_1 {
 					font-size: var(--font16Size);
+					color: var(--f99Color);
+					padding: 2vw 0;
 				}
-			}
-
-			.two_3 {
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				padding: 5vw 0;
-				font-size: var(--font14Size);
-				border-top: 1px solid var(--footColor);
-
-				text {
-					padding: 0 2vw;
+			
+				.two_2 {
+					padding: 4vw 0;
+			
+					button {
+						padding: 0 10vw;
+						font-size: var(--font16Size);
+					}
 				}
-			}
-		}
-
-		.thr {
-			position: absolute;
-			top: 88vw;
-			width: 94vw;
-			margin: 0 3vw;
-			padding: 2vw 0;
-			border-radius: 1vw;
-			background-color: var(--mainColor);
-
-			.thr_1 {
-				display: flex;
-				justify-content: space-around;
-				padding: 1vw 0 4vw 0;
-				border-bottom: 1px solid var(--footColor);
-
-				.list {
+			
+				.two_3 {
 					display: flex;
-					flex-direction: column;
 					align-items: center;
-
-					.name {
-						margin: 1vw 0 0 0;
-						color: var(--f33Color);
-						font-size: var(--font14Size);
+					justify-content: center;
+					padding: 5vw 0;
+					font-size: var(--font14Size);
+					border-top: 1px solid var(--footColor);
+			
+					text {
+						padding: 0 2vw;
 					}
 				}
 			}
-
-			.thr_2 {
-				display: flex;
-				justify-content: space-between;
-				align-items: center;
-				padding: 4vw 2vw;
-
-				.fraction {
+			
+			.thr {
+				width: 94vw;
+				margin: 3vw;
+				padding: 2vw 0;
+				border-radius: 1vw;
+				background-color: var(--mainColor);
+			
+				.thr_1 {
 					display: flex;
-					flex-direction: column;
-					align-items: center;
-
-					.top {
-						font-size: var(--font20Size);
-						font-weight: bold;
-					}
-
-					.bottom {
-						color: var(--f99Color);
-						font-size: var(--font14Size);
+					justify-content: space-around;
+					padding: 1vw 0 4vw 0;
+					border-bottom: 1px solid var(--footColor);
+			
+					.list {
+						display: flex;
+						flex-direction: column;
+						align-items: center;
+			
+						.name {
+							margin: 1vw 0 0 0;
+							color: var(--f33Color);
+							font-size: var(--font14Size);
+						}
 					}
 				}
-
-				.circle {
+			
+				.thr_2 {
 					display: flex;
+					justify-content: space-between;
 					align-items: center;
-					color: var(--f99Color);
-					font-size: var(--font14Size);
-
-					text {
-						padding: 0 1vw;
+					padding: 4vw 2vw;
+			
+					.fraction {
+						display: flex;
+						flex-direction: column;
+						align-items: center;
+			
+						.top {
+							font-size: var(--font20Size);
+							font-weight: bold;
+						}
+			
+						.bottom {
+							color: var(--f99Color);
+							font-size: var(--font14Size);
+						}
+					}
+			
+					.circle {
+						display: flex;
+						align-items: center;
+						color: var(--f99Color);
+						font-size: var(--font14Size);
+			
+						text {
+							padding: 0 1vw;
+						}
 					}
 				}
 			}

unpackage/dist/dev/mp-weixin/pagesHome/team/info.wxss

@@ -43,9 +43,11 @@
 .content .one .right text.data-v-b14ffc51 {
   font-size: var(--font14Size);
 }
-.content .two.data-v-b14ffc51 {
+.content .position.data-v-b14ffc51 {
   position: absolute;
   top: 35vw;
+}
+.content .position .two.data-v-b14ffc51 {
   width: 94vw;
   margin: 0 3vw;
   padding: 5vw 0 0 0;
@@ -53,19 +55,19 @@
   text-align: center;
   background-color: var(--mainColor);
 }
-.content .two .two_1.data-v-b14ffc51 {
+.content .position .two .two_1.data-v-b14ffc51 {
   font-size: var(--font16Size);
   color: var(--f99Color);
   padding: 2vw 0;
 }
-.content .two .two_2.data-v-b14ffc51 {
+.content .position .two .two_2.data-v-b14ffc51 {
   padding: 4vw 0;
 }
-.content .two .two_2 button.data-v-b14ffc51 {
+.content .position .two .two_2 button.data-v-b14ffc51 {
   padding: 0 10vw;
   font-size: var(--font16Size);
 }
-.content .two .two_3.data-v-b14ffc51 {
+.content .position .two .two_3.data-v-b14ffc51 {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -73,59 +75,57 @@
   font-size: var(--font14Size);
   border-top: 1px solid var(--footColor);
 }
-.content .two .two_3 text.data-v-b14ffc51 {
+.content .position .two .two_3 text.data-v-b14ffc51 {
   padding: 0 2vw;
 }
-.content .thr.data-v-b14ffc51 {
-  position: absolute;
-  top: 88vw;
+.content .position .thr.data-v-b14ffc51 {
   width: 94vw;
-  margin: 0 3vw;
+  margin: 3vw;
   padding: 2vw 0;
   border-radius: 1vw;
   background-color: var(--mainColor);
 }
-.content .thr .thr_1.data-v-b14ffc51 {
+.content .position .thr .thr_1.data-v-b14ffc51 {
   display: flex;
   justify-content: space-around;
   padding: 1vw 0 4vw 0;
   border-bottom: 1px solid var(--footColor);
 }
-.content .thr .thr_1 .list.data-v-b14ffc51 {
+.content .position .thr .thr_1 .list.data-v-b14ffc51 {
   display: flex;
   flex-direction: column;
   align-items: center;
 }
-.content .thr .thr_1 .list .name.data-v-b14ffc51 {
+.content .position .thr .thr_1 .list .name.data-v-b14ffc51 {
   margin: 1vw 0 0 0;
   color: var(--f33Color);
   font-size: var(--font14Size);
 }
-.content .thr .thr_2.data-v-b14ffc51 {
+.content .position .thr .thr_2.data-v-b14ffc51 {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 4vw 2vw;
 }
-.content .thr .thr_2 .fraction.data-v-b14ffc51 {
+.content .position .thr .thr_2 .fraction.data-v-b14ffc51 {
   display: flex;
   flex-direction: column;
   align-items: center;
 }
-.content .thr .thr_2 .fraction .top.data-v-b14ffc51 {
+.content .position .thr .thr_2 .fraction .top.data-v-b14ffc51 {
   font-size: var(--font20Size);
   font-weight: bold;
 }
-.content .thr .thr_2 .fraction .bottom.data-v-b14ffc51 {
+.content .position .thr .thr_2 .fraction .bottom.data-v-b14ffc51 {
   color: var(--f99Color);
   font-size: var(--font14Size);
 }
-.content .thr .thr_2 .circle.data-v-b14ffc51 {
+.content .position .thr .thr_2 .circle.data-v-b14ffc51 {
   display: flex;
   align-items: center;
   color: var(--f99Color);
   font-size: var(--font14Size);
 }
-.content .thr .thr_2 .circle text.data-v-b14ffc51 {
+.content .position .thr .thr_2 .circle text.data-v-b14ffc51 {
   padding: 0 1vw;
 }