feat: 活动横板页面更新

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",

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>