css

wushuo894 · Dec 3, 2024 · 2f6e6a8 · 2f6e6a8
1 parent 8678f2f
commit 2f6e6a8
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 13 deletions.
diff --git a/ui/src/home/App.vue b/ui/src/home/App.vue
@@ -43,7 +43,7 @@
             <el-icon :class="elIconClass()">
               <Plus/>
             </el-icon>
-            <template v-if="isMobile()">
+            <template v-if="isNotMobile()">
               添加
             </template>
           </el-button>
@@ -55,7 +55,7 @@
                 <el-icon :class="elIconClass()">
                   <Refresh/>
                 </el-icon>
-                <template v-if="isMobile()">
+                <template v-if="isNotMobile()">
                   刷新
                 </template>
               </el-button>
@@ -67,7 +67,7 @@
             <el-icon :class="elIconClass()">
               <Fold/>
             </el-icon>
-            <template v-if="isMobile()">
+            <template v-if="isNotMobile()">
               管理
             </template>
           </el-button>
@@ -78,7 +78,7 @@
               <el-icon :class="elIconClass()">
                 <Setting/>
               </el-icon>
-              <template v-if="isMobile()">
+              <template v-if="isNotMobile()">
                 设置
               </template>
             </el-button>
@@ -89,7 +89,7 @@
             <el-icon :class="elIconClass()">
               <Tickets/>
             </el-icon>
-            <template v-if="isMobile()">
+            <template v-if="isNotMobile()">
               日志
             </template>
           </el-button>
@@ -163,7 +163,7 @@ onMounted(() => {
 })
 
 let elIconClass = () => {
-  return isMobile() ? 'el-icon--left' : '';
+  return isNotMobile() ? 'el-icon--left' : '';
 }
 
 const about = ref({
@@ -191,7 +191,7 @@ let download = () => {
       })
 }
 
-let isMobile = () => {
+let isNotMobile = () => {
   return width.value > 800;
 }
 

diff --git a/ui/src/home/List.vue b/ui/src/home/List.vue
@@ -71,7 +71,7 @@
                         display: grid;
                         grid-gap: 4px;
                         "
-                             :class="itemsPerRow > 1 ? 'gtc3' : 'gtc2'"
+                             :class="isNotMobile() ? 'gtc3' : 'gtc2'"
                         >
                           <el-tag>
                             第 {{ item.season }} 季
@@ -82,7 +82,7 @@
                           <el-tag type="info" v-else>
                             未启用
                           </el-tag>
-                          <el-tag type="info" v-if="itemsPerRow > 1">
+                          <el-tag type="info" v-if="isNotMobile()">
                             {{ item['subgroup'] ? item['subgroup'] : '未知' }}
                           </el-tag>
                           <el-tag type="info" v-else>
@@ -133,7 +133,7 @@
         <div style="height: 80px;"></div>
       </div>
     </el-scrollbar>
-    <el-affix position="bottom">
+    <el-affix position="bottom" :style="`width: ${width}px`">
       <div style="width: 100%;
                                                       background: linear-gradient(to bottom,rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.01) );
                                                       backdrop-filter: blur(2px);padding-top: 10px;z-index: 99999"
@@ -146,7 +146,7 @@
                   <el-icon :class="elIconClass()">
                     <Back/>
                   </el-icon>
-                  <template v-if="itemsPerRow > 1">
+                  <template v-if="isNotMobile()">
                     退出登录
                   </template>
                 </el-button>
@@ -169,6 +169,7 @@ import Popconfirm from "../other/Popconfirm.vue";
 import PlayList from "../play/PlayList.vue";
 import Cover from "./Cover.vue";
 import Del from "./Del.vue";
+import {useWindowSize} from "@vueuse/core";
 
 const defaultWeekList = [
   {
@@ -293,7 +294,7 @@ let logout = () => {
 }
 
 let elIconClass = () => {
-  return itemsPerRow.value > 1 ? 'el-icon--left' : '';
+  return isNotMobile() ? 'el-icon--left' : '';
 }
 
 let yearMonth = () => {
@@ -312,6 +313,12 @@ let openBgmUrl = (it) => {
   }
 }
 
+let isNotMobile = () => {
+  return width.value > 800;
+}
+
+const {width, height} = useWindowSize()
+
 defineExpose({
   getList, yearMonth
 })
@@ -322,7 +329,7 @@ let props = defineProps(['title', 'filter'])
 
 <style>
 .grid-container {
-  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
 }
 
 .gtc3 {