2023-10-17

pages/index/information.vue

@@ -1,61 +1,56 @@
 <template>
 	<view class="content">
-		<view class="list" @click="navigator">
-			<image class="img" src="../../static/img/zixun1.png" mode=""></image>
+		<view class="list flex" @click="nav('/pages/introduce/introduce')">
+			<image class="img" src="../../static/img/zixun1.png" mode="scaleToFill"></image>
 			<view class="text">
 				{{$t('homeinformation.m1')}}
 			</view>
 		</view>
-		<view class="">xian</view>
-		<view class="list" @click="navigatorT"> 
-			<image class="img" src="../../static/img/zixun2.png" mode=""></image>
+		<view class="list flex" @click="nav('/pages/introduce/promotion')">
+			<image class="img" src="../../static/img/zixun2.png" mode="scaleToFill"></image>
 			<view class="text">
 				{{$t('homeinformation.m0')}}
 			</view>
 		</view>
-		<view class="">xian</view>
-		<view class="list" @click="navigatorY">
-			<image class="img" src="../../static/img/zixun3.png" mode=""></image>
+		<view class="list flex" @click="nav('/pages/introduce/game')">
+			<image class="img" src="../../static/img/zixun3.png" mode="scaleToFill"></image>
 			<view class="text">
 				{{$t('homeinformation.m2')}}
 			</view>
 		</view>
-		<view class="">xian</view>
-		<view class="list" @click="navigatorH">
-			<image class="img" src="../../static/img/zixun4.png" mode=""></image>
+		<view class="list flex" @click="navigatorH">
+			<image class="img" src="../../static/img/zixun4.png" mode="scaleToFill"></image>
 			<view class="text">
 				{{$t('login.a0')}}
 			</view>
 		</view>
-		<view class="">xian</view>
-		
-		<view class="tit">
+		<view class="tit padding-t-30 margin-t-20">
 			{{$t('homeinformation.m4')}}
 		</view>
-		
-		<view class="pro">
+
+		<view class="pro flex">
 			<view class="im">
-				<image class="image" src="../../static/img/zixun7.png" mode=""></image>
-				<view class="wen">{{$t('homeinformation.m5')}}</view>
+				<image class="image" src="../../static/img/zixun7.png" mode="heightFix"></image>
+				<view class="wen flex">{{$t('homeinformation.m5')}}</view>
 			</view>
 			<view class="im">
-				<image class="image" src="../../static/img/zixun8.png" mode=""></image>
-				<view class="wen">{{$t('homeinformation.m6')}}</view>
+				<image class="image" src="../../static/img/zixun8.png" mode="heightFix"></image>
+				<view class="wen flex">{{$t('homeinformation.m6')}}</view>
 			</view>
 		</view>
-		
+
 		<view class="infor flex">
 			<view class="im">
-				<image class="image" src="../../static/img/zixun10.png" mode=""></image>
-				<view class="wen">{{$t('homeinformation.m7')}}</view>
+				<image class="image" src="../../static/img/zixun10.png" mode="heightFix"></image>
+				<view class="wen flex">{{$t('homeinformation.m7')}}</view>
 			</view>
 			<view class="im">
-				<image class="image" src="../../static/img/zixun6.png" mode=""></image>
-				<view class="wen">{{$t('homeinformation.m8')}}</view>
+				<image class="image" src="../../static/img/zixun6.png" mode="heightFix"></image>
+				<view class="wen flex">{{$t('homeinformation.m8')}}</view>
 			</view>
 			<view class="im">
-				<image class="image" src="../../static/img/zixun9.png" mode=""></image>
-				<view class="wen">{{$t('homeinformation.m9')}}</view>
+				<image class="image" src="../../static/img/zixun9.png" mode="heightFix"></image>
+				<view class="wen flex">{{$t('homeinformation.m9')}}</view>
 			</view>
 		</view>
 		<taber tab='information'></taber>
@@ -72,19 +67,9 @@
 			return {};
 		},
 		methods: {
-			navigator() {
-				uni.navigateTo({
-					url: '/pages/introduce/introduce'
-				})
-			},
-			navigatorT() {
+			nav(url) {
 				uni.navigateTo({
-					url: '/pages/introduce/promotion'
-				})
-			},
-			navigatorY() {
-				uni.navigateTo({
-					url: '/pages/introduce/game'
+					url
 				})
 			},
 			navigatorH() {
@@ -97,76 +82,75 @@
 </script>
 
 <style lang="scss">
-.content{
-	width: 750rpx;
-	height: 1800rpx;
-	background-color: $page-color-base;
-	padding-top: var(--status-bar-height);
-}
+	.content {
+		width: 750rpx;
+		background-color: $page-color-base;
+		padding-top: var(--status-bar-height);
+		padding-bottom: 30rpx;
+	}
 
-.list {
-	height: 180rpx;
-	display: flex;
-	justify-content: start;
-	.img {
-		margin-left: 30rpx;
-		margin-top: 20rpx;
-		width: 200rpx;
-		height: 160rpx;
+	.list {
+		margin: 0 30rpx;
+		align-items: flex-start;
+		padding: 30rpx 0;
+		border-bottom: 1px solid rgba(255,255,255,0.3);
+		.img {
+			width: 200rpx;
+			height: 160rpx;
+		}
+
+		.text {
+			padding: 10rpx 0;
+			padding-left: 20rpx;
+			
+			font-size: 30rpx;
+			font-weight: bold;
+			color: #FFFFFF;
+			flex-grow: 1;
+		}
 	}
-	.text {
-		margin-left: 15rpx;
+
+
+	.infor {
 		margin-top: 30rpx;
-		height: 29rpx;
-		font-size: 30rpx;
+		justify-content: space-around;
+		padding: 0 20rpx;
+	}
+	.pro {
+		padding: 0 155rpx;
+		padding-top: 50rpx;
+		
+	}
+	.im {
+		width: 200rpx;
+		background-color: #191a1f;
+		text-align: center;
+		padding: 0 10rpx;
+		padding-top: 30rpx;
 		font-weight: bold;
-		color: #FFFFFF;
-		line-height: 39rpx;
+		border-radius: 20rpx;
+		.image {
+			height: 100rpx;
+		}
+		.wen {
+			justify-content: center;
+			height: 100rpx;
+			color: #FFFFFF;
+			font-size: 20rpx;
+			text-align: center;
+		}
 	}
-}
-.pro {
-	margin-top: 30rpx;
-	display: flex;
-	justify-content: center;
-}
-.im {
-	margin-left: 30rpx;
-	margin-right: 30rpx;
-	width: 200rpx;
-	height: 260rpx;
-	// height: 100%;
-	background-color: #191a1f;
-}	
-.image {
-	margin-top: 20rpx;
-	margin-left: 30rpx;
-	width: 100rpx;
-	height: 120rpx;
-}
-.wen {
-	color: #FFFFFF;
-	font-size: 20rpx;
-	text-align: center;
-	// height: 100%;
-}
-.infor {
-	margin-top: 30rpx;
-}
 
-.tit {
-	margin-top: 40rpx;
-	text-align: center;
-	height: 46rpx;
-	font-size: 49rpx;
-	font-weight: 500;
-	color: #FFFFFF;
-	line-height: 21rpx;
-}
+	
+
+	
+
 
-.img {
-	margin-top: 26rpx;
-	margin-left: 11rpx;
-	width: 728rpx;
-	height: 538rpx;
-}
-</style>
+
+	.tit {
+		text-align: center;
+		font-size: 49rpx;
+		font-weight: 500;
+		color: #FFFFFF;
+	}
+</style>