111222

pages/mine/answer/challenge.vue

@@ -1,22 +1,67 @@
 <template>
-	<view>
-		baifentiaozhan
+	<view class="content">
+	  <image class="background-image" src="/static/bg.png" mode="widthFix"></image>
+
+	  <view class="button-container">
+	    <button class="start-button">挑战开始</button>
+	  </view>
 	</view>
+
 </template>
 
+
 <script>
 	export default {
-		data() {
-			return {
-				
-			}
-		},
-		methods: {
-			
-		}
+		onLoad: function() {}
 	}
 </script>
 
+
 <style>
+	.content {
+	  position: relative;
+	  display: flex;
+	  flex-direction: column;
+	  align-items: center;
+	  justify-content: center;
+	}
+	
+	.background-image {
+	/*  position: absolute; */
+	  width: 100%;
+	  height: 100vh;
+	}
+	
+	
+	/* 注释 */
+	.button-container {
+	  margin-top: 20px;
+	}
+	
+	.start-button {
+	  background-color: rgb(247, 91, 39);
+	  color: white;
+	  border: none;
+	  border-radius: 25px;
+	  padding: 10px 20px;
+	  position: absolute;
+	  margin-top: -80%;
+	  margin-left: -13%;
+	  font-size: 16px;
+	  cursor: pointer;
+	}
+	
+	.start-button:hover {
+	  background-color: rgb(220, 80, 30);
+	}
+	
+	.start-button:active {
+	  background-color: rgb(200, 70, 25);
+	}
+	
+	.title {
+	  font-size: 36px;
+	  color: #8f8f94;
+	}
 
 </style>

pages/mine/answer/dailyanswer.vue

@@ -1,72 +1,67 @@
 <template>
 	<view class="content">
-		<!-- <image class="logo" src="@/static/logo.png"></image> -->
-		<view class="text-area1">
-			
-			<el-button>挑战开始1112</el-button>
-		</view>
-		
+	  <image class="background-image" src="/static/bg_day.png" mode="widthFix"></image>
+
+	  <view class="button-container">
+	    <button class="start-button">挑战开始</button>
+	  </view>
 	</view>
+
 </template>
 
+
 <script>
 	export default {
 		onLoad: function() {}
 	}
 </script>
 
+
 <style>
 	.content {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		background-image: url('@/static/bg.jpg');
+	  position: relative;
+	  display: flex;
+	  flex-direction: column;
+	  align-items: center;
+	  justify-content: center;
 	}
-
-
-	.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;
+	
+	.background-image {
+	/*  position: absolute; */
+	  width: 100%;
+	  height: 100vh;
 	}
-
-	.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;
+	
+	
+	
+	.button-container {
+	  margin-top: 20px;
 	}
-
-	.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;
+	
+	.start-button {
+	  background-color: rgb(247, 91, 39);
+	  color: white;
+	  border: none;
+	  border-radius: 25px;
+	  padding: 10px 20px;
+	  position: absolute;
+	  margin-top: -80%;
+	  margin-left: -15%;
+	  font-size: 16px;
+	  cursor: pointer;
 	}
-
+	
+	.start-button:hover {
+	  background-color: rgb(220, 80, 30);
+	}
+	
+	.start-button:active {
+	  background-color: rgb(200, 70, 25);
+	}
+	
 	.title {
-		font-size: 36rpx;
-		color: #8f8f94;
+	  font-size: 36px;
+	  color: #8f8f94;
 	}
-</style>
+
+</style>