天府星

src/project/tianfuxing/AppSquare/AppSquare.vue

@@ -1,5 +1,16 @@
 <template>
-  <div class="Square"></div>
+  <div class="AppSquare">
+    <div class="item" v-for="(item, index) in 10" :key="index">
+      <image src="https://jisheng-xiaochengxu.oss-cn-hangzhou.aliyuncs.com/admin/5bad9165-fa6e-4c81-894d-2beae426260b.png" />
+      <div class="item-bottom">
+        <div class="left">
+          <image src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/avatar.png" />
+          <span>张三</span>
+        </div>
+        <p>2022-11-05 17:45</p>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -9,6 +20,51 @@
   }
 </script>
 
-<style>
+<style scoped lang="scss">
+  .AppSquare {
+    margin: 0 32px;
+    padding: 20px 0;
 
+    .item {
+      margin-bottom: 24px;
+      padding: 24px 24px 0;
+      background: #FFFFFF;
+      box-shadow: 0 0 8px 0 rgba(0,0,0,0.02);
+      border-radius: 16px;
+
+      & > image {
+        width: 100%;
+        height: 360px;
+      }
+
+      .item-bottom {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 96px;
+
+        .left {
+          display: flex;
+          align-items: center;
+
+          image {
+            width: 48px;
+            height: 48px;
+            margin-right: 16px;
+            border-radius: 50%;
+          }
+
+          span {
+            font-size: 28px;
+            color: #333333;
+          }
+        }
+
+        p {
+          color: #999999;
+          font-size: 28px;
+        }
+      }
+    }
+  }
 </style>