话题

src/project/fengdu/AppCircle/Topic.vue

@@ -1,5 +1,9 @@
 <template>
   <div class="Topic">
+    <div class="Topic-item" v-for="(item, index) in 10" :key="index">
+      <h2>#闲置物品交易</h2>
+      <span>去看看</span>
+    </div>
     <AiLogin ref="login"/>
   </div>
 </template>
@@ -8,7 +12,7 @@
 
   export default {
     name: 'Topic',
-    appName: '全部话题',
+    appName: '更多话题',
 
     data () {
       return {
@@ -30,11 +34,37 @@
 
 <style scoped lang="scss">
   .Topic {
-    padding-top: 120px;
+    min-height: 100vh;
+    background: #fff;
     padding-bottom: 40px;
+    border-top: 24px solid #f4f6fa;
+    box-sizing: border-box;
 
     div {
       box-sizing: border-box;
     }
+
+    .Topic-item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 40px 32px;
+
+      h2 {
+        font-size: 30px;
+        color: #333333;
+      }
+
+      span {
+        width: 126px;
+        height: 52px;
+        line-height: 52px;
+        text-align: center;
+        border-radius: 26px;
+        border: 2px solid #2d7dffff;
+        font-size: 24px;
+        color: #2D7DFF;
+      }
+    }
   }
 </style>