布局适应移动端

src/pages/main.vue

@@ -23,7 +23,13 @@
             </uni-list>
         </view>
         <view class = 'click head'><uni-list><uni-list-chat></uni-list-chat></uni-list></view>
-        <Pics></Pics>
+        <Pics
+            :style = "{
+                '--maxsize' : `${size.width > size.height ? size.width / 2 : size.width / 1.2}px`,
+                '--minsize' : `${size.width / 2}px`,
+                '--height' : `${size.width > size.height ? 10 : 25}%`,
+            }"
+        ></Pics>
         <transition name = 'move_right'>
             <uni-card
                 class = 'click'
@@ -32,7 +38,7 @@
                 :title = 'Mycard.username'
                 :sub-title = 'Mycard.email'
                 :thumbnail = 'Mycard.avatar'
-                :style = "{ '--size' : `${size.width / 2}px` }"
+                :style = "{ '--size' : `${size.width > size.height ? size.width / 2 : size.width / 1.2}px` }"
             >
             <view v-show = 'Mycard.id >= 0'><h2>{{ Mycard.id }}</h2></view>
             <hr v-show = 'Mycard.id >= 0'>
@@ -98,7 +104,7 @@
         <transition name = 'switch'>
             <view
                 id = 'body'
-                :style = "{ '--size' : `${size.width > size.height ? size.width / 2 : size.width / 1.2}px` }"
+                :style = "{ '--size' : `${size.width > size.height ? size.width / 2 : size.width}px` }"
             >
                 <transition name = 'switch'>
                     <uni-list

src/pages/pics.vue

@@ -4,6 +4,9 @@
             <uni-card
                 v-show = 'deck.participant'
                 :title = "`${deck.participant?.name ?? '...'} 的卡组`"
+                id = 'main'
+                :spacing = '0'
+                :padding = '0'
             >
                 <!-- <view
                     class = 'button'
@@ -12,11 +15,11 @@
                 >
                     <uni-icons type = 'download'></uni-icons>
                 </view> -->
-                <uni-card :title = "deck.main.length > 0 ? '主卡组' : '暂无主卡组'">
-                    <image class = 'deck_cards' v-for = '(i, v) in deck.main' :src = 'getImg(i)' mode = 'aspectFit' @error = 'changeImg.main(v)'></image>
+                <uni-card class = 'deck' :title = "deck.main.length > 0 ? '主卡组' : '暂无主卡组'">
+                    <cover-image class = 'deck_cards' v-for = '(i, v) in deck.main' :src = 'getImg(i)' @error = 'changeImg.main(v)'></cover-image>
                 </uni-card>
-                <uni-card :title = "deck.side.length > 0 ? '副卡组' : '暂无副卡组'">
-                    <image class = 'deck_cards' v-for = '(i, v) in deck.side' :src = 'getImg(i)' mode = 'aspectFit' @error = 'changeImg.main(v)'></image>
+                <uni-card class = 'deck' :title = "deck.side.length > 0 ? '副卡组' : '暂无副卡组'">
+                    <cover-image class = 'deck_cards' v-for = '(i, v) in deck.side' :src = 'getImg(i)' @error = 'changeImg.main(v)'></cover-image>
                 </uni-card>
             </uni-card>
         </transition>

src/style/page.scss

@@ -37,7 +37,6 @@
         right: 2%;
         z-index: 2;
         max-width: var(--size);
-        width: 20%;
         .user {
             &:hover {
                 cursor: pointer;
@@ -94,15 +93,17 @@
         top : 70px;
         z-index: 2;
         right: 2%;
-        width: 50%;
-        :deep(.uni-card) {
-            // display: flex;
-            .deck_cards {
-                width: 10%;
-                height: 11.52vh;
-                aspect-ratio: 1 / 1.43;
-                display: inline-block;
-                vertical-align: top;
+        max-width: var(--maxsize);
+        min-width: var(--minsize);
+        :deep(#main) {
+            overflow-y: auto;
+            max-height: 90vh;
+            .deck {
+                .deck_cards {
+                    width: var(--height);
+                    display: inline-block;
+                    vertical-align: top;
+                }
             }
         }
     }