更新

hdApp/src/admin/recharge/rechargeSetting.vue

@@ -5,45 +5,47 @@
 			<view class="section-card">
 				<!-- 充值是否成为VIP会员 -->
 				<view class="setting-block">
-					<view class="block-label">充值是否成为VIP会员</view>
-					<radio-group class="radio-row" @change="vipChange">
-						<label class="radio-label" for="vipYes">
-							<radio id="vipYes" value="1" style="transform:scale(0.875,0.875)" color="#049E2C" :checked="form.isVipMember == 1" />
-							<text class="radio-text">是</text>
+					<view class="setting-title">充值变成会员</view>
+					<radio-group class="option-group" @change="vipChange">
+						<label class="option-item" for="vipYes">
+							<radio id="vipYes" class="setting-radio" value="1" color="#09C567" :checked="form.isVipMember == 1" />
+							<text class="option-text">是</text>
 						</label>
-						<label class="radio-label" for="vipNo">
-							<radio id="vipNo" value="0" style="transform:scale(0.875,0.875)" color="#049E2C" :checked="form.isVipMember == 0" />
-							<text class="radio-text">否</text>
+						<label class="option-item" for="vipNo">
+							<radio id="vipNo" class="setting-radio" value="0" color="#09C567" :checked="form.isVipMember == 0" />
+							<text class="option-text">否</text>
 						</label>
 					</radio-group>
-					<view class="vip-amount-row" v-if="form.isVipMember == 1">
+					<view class="vip-amount-box" v-if="form.isVipMember == 1">
 						<text class="suffix-text">单笔充值 ≥</text>
 						<input
 							v-model="form.vipAmount"
 							type="digit"
 							class="inline-input"
 							placeholder="请输入金额"
-                            @focus="form.vipAmount = ''"
+							@focus="form.vipAmount = ''"
 						/>
 						<text class="suffix-text">元</text>
 					</view>
 				</view>
 
+				<view class="setting-split"></view>
+
 				<!-- 充值规则 -->
-				<view class="setting-block inline">
-					<view class="block-label inline">充值规则</view>
-					<radio-group class="radio-row" @change="ruleChange">
-						<label class="radio-label" for="ruleNone">
-							<radio id="ruleNone" value="0" style="transform:scale(0.875,0.875)" color="#049E2C" :checked="form.rechargeRule == 0" />
-							<text class="radio-text">无赠送</text>
+				<view class="setting-block">
+					<view class="setting-title">充值规则</view>
+					<radio-group class="option-group option-group--triple" @change="ruleChange">
+						<label class="option-item" for="ruleNone">
+							<radio id="ruleNone" class="setting-radio" value="0" color="#09C567" :checked="form.rechargeRule == 0" />
+							<text class="option-text">无赠送</text>
 						</label>
-						<label class="radio-label" for="ruleHb">
-							<radio id="ruleHb" value="2" style="transform:scale(0.875,0.875)" color="#049E2C" :checked="form.rechargeRule == 2" />
-							<text class="radio-text">送红包</text>
+						<label class="option-item" for="ruleHb">
+							<radio id="ruleHb" class="setting-radio" value="2" color="#09C567" :checked="form.rechargeRule == 2" />
+							<text class="option-text">送红包</text>
 						</label>
-						<label class="radio-label" for="ruleMoney">
-							<radio id="ruleMoney" value="1" style="transform:scale(0.875,0.875)" color="#049E2C" :checked="form.rechargeRule == 1" />
-							<text class="radio-text">送钱</text>
+						<label class="option-item" for="ruleMoney">
+							<radio id="ruleMoney" class="setting-radio" value="1" color="#09C567" :checked="form.rechargeRule == 1" />
+							<text class="option-text">送钱</text>
 						</label>
 					</radio-group>
 				</view>
@@ -454,7 +456,7 @@ export default {
 }
 
 .setting-block {
-	padding: 14upx 0;
+	padding: 8upx 4upx 12upx 4upx;
 
 	&.inline {
 		display: flex;
@@ -463,6 +465,77 @@ export default {
 	}
 }
 
+.setting-title {
+	font-size: 30upx;
+	font-weight: 700;
+	color: #1a1a1a;
+	line-height: 42upx;
+	margin-bottom: 18upx;
+}
+
+.setting-split {
+	height: 1upx;
+	margin: 24upx 0 8upx;
+	background: #f0f2f1;
+}
+
+.option-group {
+	display: flex;
+	flex-direction: row;
+	align-items: stretch;
+}
+
+.option-item {
+	flex: 1;
+	min-width: 0;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+	min-height: 72upx;
+	padding: 0 12upx;
+	background: #f7faf8;
+	border: 1upx solid #e3ebe6;
+	border-radius: 14upx;
+	box-sizing: border-box;
+}
+
+.option-item + .option-item {
+	margin-left: 16upx;
+}
+
+.option-group--triple .option-item {
+	padding: 0 8upx;
+}
+
+.setting-radio {
+	transform: scale(0.875);
+	flex-shrink: 0;
+}
+
+.option-text {
+	margin-left: 6upx;
+	font-size: 28upx;
+	color: #333;
+	line-height: 36upx;
+}
+
+.vip-amount-box {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	flex-wrap: wrap;
+	margin-top: 20upx;
+	padding: 20upx 24upx;
+	background: #f7faf8;
+	border-radius: 14upx;
+	border: 1upx solid #e3ebe6;
+
+	.suffix-text:first-child {
+		margin-left: 0;
+	}
+}
+
 /* ==== 单选组 ==== */
 .radio-row {
 	display: flex;
@@ -519,8 +592,8 @@ export default {
 
 .remark-textarea {
 	width: 100%;
-	height: 220upx;
-	min-height: 220upx;
+	height: 190upx;
+	min-height: 190upx;
 	box-sizing: border-box;
 	border: 1upx solid #ddd;
 	border-radius: 8upx;