From 9eb672a2f27c4db8549406f3c3d0b648a0aa2253 Mon Sep 17 00:00:00 2001
From: jiannibang <271381693@qq.com>
Date: Thu, 29 Dec 2022 13:55:25 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B4=BB=E5=8A=A8=E6=A8=AA=E6=9D=BF?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                     |  1 +
 src/components/ActivitiesList/ActivitiesList.vue | 16 +++++++++++++++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index e3ede33..e58c51c 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "@better-scroll/observe-image": "^2.4.2",
     "@better-scroll/scroll-bar": "^2.4.2",
+    "@vueuse/core": "^9.9.0",
     "animate.css": "^4.1.1",
     "axios": "^0.26.0",
     "core-js": "^3.8.3",
diff --git a/src/components/ActivitiesList/ActivitiesList.vue b/src/components/ActivitiesList/ActivitiesList.vue
index ac22ee7..0793cf7 100644
--- a/src/components/ActivitiesList/ActivitiesList.vue
+++ b/src/components/ActivitiesList/ActivitiesList.vue
@@ -1,5 +1,5 @@
 <template>
-  <ScrollView class="scroll" :list="list" scrollbar>
+  <ScrollView class="scroll" :list="list" :scrollX="isH" :scrollbar="!isH">
     <TransitionGroup name="zoom" tag="div" class="scroll-content">
       <div :class="['content-item', item === activity ? 'd' : '']" v-for="item of list" :key="item.activityId">
         <div class="front">
@@ -33,7 +33,9 @@ import ScrollView from '@/base/ScrollView/ScrollView.vue'
 import 'swiper/css'
 import 'swiper/css/pagination'
 import 'swiper/css/effect-coverflow'
+import { useMediaQuery } from '@vueuse/core'
 
+const isH = useMediaQuery('(min-aspect-ratio: 1/1)')
 defineProps({
   list: {
     type: Array,
@@ -222,4 +224,16 @@ const { config } = storeToRefs(store)
     }
   }
 }
+@media (min-aspect-ratio: 1/1) {
+  .scroll {
+    .scroll-content {
+      width: auto;
+      flex-direction: row;
+      padding: 100px 68px;
+    }
+    .content-item + .content-item {
+      margin-left: 32px;
+    }
+  }
+}
 </style>