传送界面修改上传

pages/w3/tran.scss

@@ -75,13 +75,44 @@ page {
 			}
 		}
 		.itemRule {
-			display: flex;flex-direction: column;justify-content: flex-start;align-items: flex-start;
-			width: 690rpx;height: 234rpx;
+			display: flex;flex-direction: column;justify-content: flex-start;align-items: center;
+			width: 690rpx;height: 600rpx;
 			background: url('../../static/w3/tran/bg_desc.png');
-			background-size: 690rpx 234rpx;
-			font-weight: 400;padding:24rpx 32rpx;
-			font-size: 24rpx;
-			color: #999999;
+			background-size: 690rpx 560rpx;
+			font-weight: 400;
+			font-size: 22rpx;
+			color: #999999;
+			.ruleItem {
+				width:590rpx;height:56rpx;
+				
+				.line{
+					width: 590rpx;
+					height: 0rpx;
+					border-bottom: 3rpx dashed #FFFFFF;
+					opacity: 0.3;
+					margin-top: 12rpx;
+				}
+				.info{
+					display: flex;flex-direction: row;justify-content: space-between;align-items: center;
+					width:590rpx;
+					.left {
+						display: flex;flex-direction: column;justify-content: center;
+						// background: #ffffff;
+						align-items: center;
+						width:295rpx;
+						
+						
+					}
+					.right{
+						// background: #393939;
+						align-items: center;
+						width:295rpx;
+						display: flex;flex-direction: column;justify-content: center;
+
+
+					}
+				}
+			}
 		}
 	}
 }

pages/w3/tran.vue

@@ -51,7 +51,29 @@
 					<image class="iconId" mode="widthFix" src="../../static/w3/tran/tran_rule.png"></image>
 				</view>
 				<view class="itemRule">
-					<text>规则</text>
+					<view style="height: 74rpx;margin-top: 25rpx;" class="ruleItem">
+						<view  style="margin-top: 5rpx;" class = "info">
+							<view class = "left">
+								<text style= "font-size: 24rpx; color: #999999;">战队人数</text>
+							</view>
+							<view class = "right">
+								<text style= "font-size: 24rpx;color: #999999;">传送消耗</text>
+							</view>
+						</view>
+						<view style="margin-top: 25rpx;" class="line"></view>
+					</view>
+					<view class="ruleItem" v-for="(info,index) in ruleInfo" >
+						<view  class = "info">
+							<view  class = "left">
+								<text style= "font-size: 22rpx;color: white;">{{ info.reason }}</text>
+							</view>
+							<view style= "color: white;" class = "right">
+								<text style= "font-size: 22rpx;color: white;">{{ info.per }}</text>
+							</view>
+						</view>
+						<view class="line"></view>
+					</view>
+					<text style= "margin-top: 10rpx;font-size:22rpx;color: #999999;">注：按照用户战队人数来判定传送燃料消耗</text>
 				</view>
 			</view>
 		</view>
@@ -68,6 +90,36 @@
 				myinfo: {},
 				num: '',
 				mobile: '',
+				ruleInfo:[
+					{
+						reason:"0人",
+						per:"50%",
+					},
+					{
+						reason:"3人",
+						per:"40%",
+					},
+					{
+						reason:"5人",
+						per:"35%",
+					},
+					{
+						reason:"10人",
+						per:"30%",
+					},
+					{
+						reason:"15人",
+						per:"25%",
+					},
+					{
+						reason:"银河探索卡",
+						per:"20%",
+					},
+					{
+						reason:"星界探索卡",
+						per:"18%",
+					}
+				]
 			}
 		},
 		onLoad() {