钻石充值.

pages.json

@@ -377,6 +377,12 @@
 			"style": {
 				"navigationStyle": "custom"
 			}
+		},
+		{
+			"path": "pages/user/recharge-page",
+			"style": {
+				"navigationStyle": "custom"
+			}
 		}
 	],
 	"subPackages": [{

pages/user/recharge-page.vue

@@ -0,0 +1,120 @@
+<template>
+	<view class="content">
+
+		<uni-nav-bar left-icon="left" title="钻石充值" color="#000000" backgroundColor="transparent" :fixed="true"
+			:statusBar="true" :border="false" @clickLeft="$c.back"></uni-nav-bar>
+
+
+		<view class="center column" style="width: 100%; margin-top: 70rpx;">
+
+			<image :src="$img1('my/ic_diamond.png')" style="width: 167.25rpx; height: 213rpx;" mode=""></image>
+
+			<text style="color: black; font-size: 64rpx;">0</text>
+
+			<text style="color: #A6A6A6; font-size: 24rpx;">我的钻石</text>
+		</view>
+
+		<view class="justify-center" style="width: 100%; margin-top: 86rpx;">
+
+			<scroll-view scroll-y="true" style="width: 686rpx;">
+				<view class="grid-container">
+					<view class="grid-item" @click="goodsClick(index)" v-for="(item, index) in dataList" :key="index"
+						style="">
+						<image :src="currentIndex==index? $img1(item.goodUrlS):$img1(item.goodUrl)">
+						</image>
+					</view>
+				</view>
+			</scroll-view>
+
+		</view>
+		
+		<view class="" style="width: 100%; margin: 44rpx 32rpx;">
+			<image :src="$img1('my/ic_alipay.png')" style="width: 320rpx; height: 96rpx;" mode=""></image>
+		</view>
+		
+		<view class="center" style="width: 686rpx; height: 92rpx; margin: 46rpx auto 0; background-color: #333333; border-radius: 16rpx;">
+			<text style="color: #CDEF27; font-size: 24rpx;">确认支付</text>
+		</view>
+
+
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				currentIndex: 0,
+				dataList: [{
+					goodUrl: "my/ic_goods.png",
+					goodUrlS: "my/ic_goods_s.png",
+					price: "2百"
+				}, {
+					goodUrl: "my/ic_goods.png",
+					goodUrlS: "my/ic_goods_s.png",
+					price: "2百"
+				}, {
+					goodUrl: "my/ic_goods.png",
+					goodUrlS: "my/ic_goods_s.png",
+					price: "2百"
+				}, {
+					goodUrl: "my/ic_goods.png",
+					goodUrlS: "my/ic_goods_s.png",
+					price: "2百"
+				}, {
+					goodUrl: "my/ic_goods.png",
+					goodUrlS: "my/ic_goods_s.png",
+					price: "2百"
+				}, ]
+			}
+		},
+		methods: {
+
+
+			goodsClick(index) {
+				this.currentIndex = index;
+			}
+
+		}
+	}
+</script>
+
+<style lang="scss">
+	.content {
+		width: 100vw;
+		min-height: 100vh;
+		box-sizing: border-box;
+		background: linear-gradient(to bottom, #E5F9D7, #FFFFFF);
+
+	}
+
+	.grid-container {
+		margin: 0 auto 0;
+		display: grid;
+		grid-template-columns: repeat(3, 206rpx);
+		gap: 34rpx;
+	}
+
+	.grid-item {
+		width: 206rpx;
+		height: 290rpx;
+		position: relative;
+		animation: scaleIn 0.5s ease-out;
+		animation-fill-mode: both;
+		transition: transform 0.3s ease, box-shadow 0.3s ease;
+
+		&:active {
+			transform: scale(0.95);
+			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+		}
+
+		>image {
+			width: 100%;
+			height: 100%;
+			position: absolute;
+			transition: all 0.3s ease;
+		}
+
+
+	}
+</style>