feat: 调整样式

frontend/src/styles/element-dark.scss

@@ -111,7 +111,7 @@ html.dark {
         }
     }
     .menu {
-			border-right: 1px solid var(--el-border-color-light);
+        border-right: 1px solid var(--el-border-color-light);
     }
     .el-menu {
         .el-menu-item {
@@ -267,4 +267,11 @@ html.dark {
             }
         }
     }
+
+    .infinite-list .infinite-list-item {
+        background: #212426;
+        &:hover {
+            background: #212426;
+        }
+    }
 }

frontend/src/views/app-store/apps/index.vue

@@ -46,15 +46,15 @@
         </template>
         <template #main>
             <el-row :gutter="5">
-                <el-col v-for="(app, index) in apps" :key="index" :span="8">
+                <el-col v-for="(app, index) in apps" :key="index" :xs="12" :sm="12" :md="8" :lg="8" :xl="8">
                     <div class="app-card">
                         <el-row :gutter="24">
-                            <el-col :span="5">
+                            <el-col :xs="5" :sm="5" :md="6" :lg="6" :xl="5">
                                 <div class="app-icon">
                                     <el-avatar shape="square" :size="60" :src="'data:image/png;base64,' + app.icon" />
                                 </div>
                             </el-col>
-                            <el-col :span="19">
+                            <el-col :xs="19" :sm="19" :md="18" :lg="18" :xl="19">
                                 <div class="app-content">
                                     <div class="app-header">
                                         <span class="app-title">{{ app.name }}</span>
@@ -179,7 +179,6 @@ onMounted(() => {
 }
 
 .app-card {
-    height: 120px;
     margin-top: 10px;
     cursor: pointer;
     padding: 5px;
@@ -208,13 +207,14 @@ onMounted(() => {
         }
 
         .app-desc {
-            margin-top: 10px;
+            margin-top: 5px;
             overflow: hidden;
             display: -webkit-box;
             -webkit-line-clamp: 2;
             -webkit-box-orient: vertical;
 
             text-overflow: ellipsis;
+            height: 45px;
 
             .desc {
                 font-size: 14px;

frontend/src/views/app-store/index.scss

@@ -1,12 +1,8 @@
 .install-card {
-    height: 140px;
     margin-top: 10px;
     cursor: pointer;
     padding: 10px;
 
-    .icon {
-        margin-left: 20px;
-    }
 
     .a-detail {
         height: 100%;
@@ -45,6 +41,7 @@
         }
         .d-button {
             margin-top: 10px;
+						min-width: 440px;
         }
     }
     &:hover {

frontend/src/views/app-store/installed/index.vue

@@ -56,10 +56,10 @@
                 </div>
             </div>
             <el-row :gutter="5">
-                <el-col v-for="(installed, index) in data" :key="index" :span="12">
+                <el-col v-for="(installed, index) in data" :key="index" :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                     <div class="install-card">
                         <el-row :gutter="24">
-                            <el-col :span="4">
+                            <el-col :xs="3" :sm="3" :md="3" :lg="4" :xl="4">
                                 <div class="icon">
                                     <el-avatar
                                         shape="square"
@@ -68,7 +68,7 @@
                                     />
                                 </div>
                             </el-col>
-                            <el-col :span="20">
+                            <el-col :xs="21" :sm="21" :md="21" :lg="20" :xl="20">
                                 <div class="a-detail">
                                     <div class="d-name">
                                         <span class="name">{{ installed.name }}</span>

frontend/src/views/cronjob/record/index.vue

@@ -542,18 +542,17 @@ defineExpose({
     margin: 10px;
     color: var(--el-color-primary);
     cursor: pointer;
+    &:hover {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 30px;
+        background: var(--el-color-primary-light-9);
+        margin: 10px;
+        font-weight: 500;
+        color: red;
+    }
 }
-.infinite-list .infinite-list-item:hover {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 30px;
-    background: var(--el-color-primary-light-9);
-    margin: 10px;
-    font-weight: 500;
-    color: red;
-}
-
 .a-card {
     font-size: 17px;
     .el-card {