完善移动端适配

src/pages/events/all-events.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref } from "vue";
+const emit = defineEmits(['clickItem'])
 const props = defineProps({
 	list: {
 		type: Array,
@@ -27,10 +28,10 @@ defineExpose({})
 							{{ item?.brief }}
 						</p>
 					</div>
-					<a href="#" class="read-more" target="_blank">
+					<div class="read-more" @click="$emit('clickItem', item)">
 						Read More
 						<span class="iconfont icon-direction-right"></span>
-					</a>
+					</div>
 				</div>
 			</div>
 		</div>
@@ -44,17 +45,29 @@ defineExpose({})
 			margin: 0 auto;
 			padding: 40px 0px 40px 0px;
 			max-width: 1120px;
+			@media (max-width: 1000px) {
+				padding: 40px 10px;
+				width: 100%;
+			}
 			> h2{
 				text-align: center;
 				margin-bottom: 50px;
 				font-size: 40px;
 				color: #222222;
 				font-family: "Poppins", Sans-serif;
+				@media (max-width: 1000px) {
+					font-size: 28px;
+					margin-bottom: 40px;
+				}
 			}
 			> .all-events{
 			    display: grid;
 				grid-template-columns: repeat(3, minmax(100px, 1fr));
 				grid-gap: 20px 30px;
+				@media (max-width: 1000px) {
+					grid-template-columns: repeat(1, minmax(100px, 1fr));
+					grid-gap: 30px;
+				}
 				> .img-item{
 					&:hover{
 						> .img-box{
@@ -105,6 +118,9 @@ defineExpose({})
 						font-weight: 600;
 						line-height: 1;
 						margin-bottom: 10px;
+						@media (max-width: 1000px) {
+							font-size: 18px;
+						}
 						&:hover{
 							color: #626262;
 						}
@@ -121,6 +137,9 @@ defineExpose({})
 						overflow: hidden;
 						text-overflow: ellipsis;
 						word-break: break-word; 
+						@media (max-width: 1000px) {
+							font-size: 14px;
+						}
 					}
 					.read-more{
 						color: #9A2125;
@@ -128,6 +147,8 @@ defineExpose({})
 						font-size: 14px;
 						text-decoration: none;
 						position: relative;
+						width: min-content;
+						white-space: nowrap;
 						&:hover{
 							&::after{
 								left: 0;