T

addons/theme/stv1/_static_w3g/css/common.css

@@ -67,6 +67,12 @@ div::-webkit-scrollbar {
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
+}
+
+.layout_h_round {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-around;
 }
 
 .weight_full {
@@ -171,6 +177,14 @@ div::-webkit-scrollbar {
 	color:rgba(51,51,51,1);
 }
 
+.element_bg {
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+}
+
 .class_item {
 	padding: 0.75rem;
 }
@@ -799,4 +813,18 @@ div::-webkit-scrollbar {
 	padding-left: 0.5rem;
 	padding-right: 0.5rem;
 	width: 2.4375rem;
+}
+
+.vip_buy_price_frame {
+	position: relative;
+	height:56px;
+	border-radius:8px;
+	border:1px solid rgba(204,204,204,1);
+}
+
+.vip_buy_price_frame_none {
+	position: relative;
+	height:58px;
+	border-radius:8px;
+	border: none;
 }
\ No newline at end of file

apps/home/Tpl/default/User/recharge_w3g.html

@@ -29,6 +29,17 @@
 				<span class="text_16_600 color_333333 self_center" style="margin-left: 0.5rem;">选择时长</span>
 			</div>
 		</div>
+		
+		<div class="home_list_part layout_h_b" style="margin-top: 0.75rem;">
+			<div @click="isYear = false" :class="monthFrame" class="layout_center">
+				<van-image height="100%" width="100%" v-if="!isYear" class="element_bg" src="__THEME__/img/KK@3x.png" ></van-image>
+				<span class="text_16_600" :class="isYear ? 'color_999999' : 'color_primary'">{{monthPrice}}</span>
+			</div>
+			<div @click="isYear = true" :class="yearFrame" class="layout_center">
+				<van-image height="100%" width="100%" v-if="!isYear" class="element_bg" src="__THEME__/img/KK@3x.png" ></van-image>
+				<span class="text_16_600" :class="isYear ? 'color_primary' : 'color_999999'">{{yearPrice}}</span>
+			</div>
+		</div>
 	</div>
 </div>
 
@@ -156,9 +167,18 @@
 		data: function() {
 			return {
 				type: 1,
+				isYear: false,
 				vips: []
 			}
 		},
+		computed: {
+			monthFrame: function() {
+				return !this.isYear ? 'vip_buy_price_frame_none' : 'vip_buy_price_frame'
+			},
+			yearFrame: function() {
+				return this.isYear ? 'vip_buy_price_frame_none' : 'vip_buy_price_frame'
+			}
+		},
 		created:function(){
 			this.vips = {:json_encode($user_vip)};
 			this.vips.forEach( r => {