随手拍调整无级网格

src/pages/home.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="page">
+  <div class="home">
     <div class="header-bg">
       <div class="header-info">
         <div class="wrap" @click="handleLogin()">
@@ -21,14 +21,13 @@
           </div>
         </div>
         <input class="codeText" v-model="search" placeholder="搜索要查找的应用"/>
-        <div class="appsPane flex">
-          <div v-for="app in appsList" :key="app.id" @tap="handleGotoApp(app)" class="appItem flex">
-            <b v-text="app.label"/>
-            (
-            <div v-text="app.name"/>
-            )
-          </div>
-        </div>
+      </div>
+    </div>
+    <div class="appsPane">
+      <div v-for="app in appsList" :key="app.id" @tap="handleGotoApp(app)" class="appItem flex">
+        <b v-text="app.label"/>
+        <u-tag v-if="app.project" :text="app.project" mode="dark" shape="circle" size="mini"/>
+        <div class="appName fill" v-text="app.name"/>
       </div>
     </div>
     <AiLogin ref="login" @success="getAuth()"/>
@@ -69,10 +68,15 @@ export default {
     },
     getApps() {
       this.$instance.post("/node/wechatapps/list", null, {
-        baseURL: "http://192.168.1.87:12525", params: {size: 999,type:'mp'}
+        baseURL: "http://192.168.1.87:12525", params: {size: 999, type: 'mp'}
       }).then(res => {
         if (res?.data) {
-          this.apps = res.data.records.map(e => ({...e, path: e.libPath}))
+          this.apps = res.data.records.map(e => {
+            if (/\/project\//.test(e.libPath)) {
+              e.project = e.libPath.replace(/.*project\/([^\/]+)\/.+/, '$1')
+            }
+            return {...e, path: e.libPath}
+          })
         }
       })
     },
@@ -89,8 +93,8 @@ export default {
 }
 </script>
 <style scoped lang="scss">
-.page {
-  width: 100%;
+.home {
+  width: 100vw;
   min-height: 100vh;
   background-color: #F3F6F9;
   position: relative;
@@ -101,7 +105,6 @@ export default {
 
     .header-info {
       width: 100vw;
-      height: 100vh;
       box-sizing: border-box;
       padding: 36px;
       display: flex;
@@ -184,20 +187,29 @@ export default {
   }
 
   .appsPane {
-    flex-wrap: wrap;
-    justify-content: center;
-    margin-top: 16px;
-    padding: 0 16px;
+    padding: 0 36px;
+    width: 100%;
+    box-sizing: border-box;
 
     .appItem {
-      cursor: pointer;
-      font-size: 24px;
-      background: $uni-color-primary;
-      color: #fff;
-      padding: 8px;
-      margin: 4px;
-      border-radius: 8px;
-      font-weight: normal;
+      width: 100%;
+      font-size: 28px;
+      padding: 0 16px;
+      height: 64px;
+
+      &:nth-of-type(2n) {
+        background: rgba(#26f, .05);
+      }
+
+      .appName {
+        text-align: right;
+      }
+
+      b {
+        cursor: pointer;
+        margin-right: 16px;
+        display: block;
+      }
     }
   }
 }