1111

pages/index.vue

@@ -1,80 +1,96 @@
 <template>
-	<view class="content">
-		<!-- <image class="logo" src="@/static/logo.png"></image> -->
-		<view class="text-area1">
-			<image style="width: 50%;height: 50%;" src="../static/签到.png"></image>
-			<text style="color: #ed696f;font-size: 30px">每日签到</text>
-		</view>
-		<view class="text-area2">
-			<image style="width: 50%;height: 50%;" src="../static/线上答题2.png"></image>
-			<text style="color: #ed696f;font-size: 30px">每日答题</text>
-		</view>
-
-		<view class="text-area3">
-			<image style="width: 50%;height: 50%;" src="../static/main_100.png"></image>
-			<text style="color: #ed696f;font-size: 30px">百分挑战</text>
-		</view>
-	</view>
+  <view class="content">
+    <!-- <image class="logo" src="@/static/logo.png"></image> -->
+    <view class="text-area1" @tap="onArea1Click">
+      <image style="width: 50%; height: 50%;" src="../static/签到.png"></image>
+      <text style="color: #ed696f;font-size: 30px">每日签到</text>
+    </view>
+    <view class="text-area2" @tap="onArea2Click">
+      <image style="width: 50%; height: 50%;" src="../static/线上答题2.png"></image>
+      <text style="color: #ed696f;font-size: 30px">每日答题</text>
+    </view>
+    <view class="text-area3" @tap="onArea3Click">
+      <image style="width: 50%; height: 50%;" src="../static/main_100.png"></image>
+      <text style="color: #ed696f;font-size: 30px">百分挑战</text>
+    </view>
+  </view>
 </template>
 
 <script>
-	export default {
-		onLoad: function() {}
-	}
+export default {
+  methods: {
+    onArea1Click() {
+      // 假设跳转到签到页面
+     console.log("zhehsi 1")
+    },
+    onArea2Click() {
+      // 假设跳转到答题页面
+      uni.navigateTo({
+        url: '/pages/mine/answer/dailyanswer'
+      });
+    },
+    onArea3Click() {
+      // 假设跳转到百分挑战页面
+     console.log("zheshi 3")
+    }
+  }
+};
 </script>
 
 <style>
-	.content {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		background-image: url('../static/gradient_1080_1920 (1).png');
-	}
-
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-image: url('../static/gradient_1080_1920 (1).png');
+}
 
-	.text-area1 {
-		margin-top: 20%;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		border-radius: 10%;
-		justify-content: center;
-		background-color: white;
-		width: 200px;
-		height: 180px;
-		margin-bottom: 50px;
-	}
+.text-area1 {
+  margin-top: 20%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border-radius: 10%;
+  justify-content: center;
+  background-color: white;
+  width: 200px;
+  height: 180px;
+  margin-bottom: 50px;
+  cursor: pointer;
+}
 
-	.text-area2 {
-		display: flex;
-		justify-content: center;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		border-radius: 10%;
-		background-color: white;
-		width: 200px;
-		height: 180px;
-		margin-bottom: 50px;
-	}
+.text-area2 {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border-radius: 10%;
+  background-color: white;
+  width: 200px;
+  height: 180px;
+  margin-bottom: 50px;
+  cursor: pointer;
+}
 
-	.text-area3 {
-		display: flex;
-		justify-content: center;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		border-radius: 10%;
-		background-color: white;
-		width: 200px;
-		height: 180px;
-		margin-bottom: 40px;
-	}
+.text-area3 {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border-radius: 10%;
+  background-color: white;
+  width: 200px;
+  height: 180px;
+  margin-bottom: 40px;
+  cursor: pointer;
+}
 
-	.title {
-		font-size: 36rpx;
-		color: #8f8f94;
-	}
+.title {
+  font-size: 36rpx;
+  color: #8f8f94;
+}
 </style>