话题

src/project/fengdu/AppCircle/AppCircle.vue

@@ -21,7 +21,7 @@
       </div>
     </div>
     <div class="AppCircle-list">
-      <div class="item" v-for="(item, index) in 10" :key="index">
+      <div class="item" v-for="(item, index) in 10" :key="index" @click="$linkTo('./Detail')">
         <div class="item-top">
           <image src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-fangwuchuzu.png" />
           <div class="right">

src/project/fengdu/AppCircle/Detail.vue

@@ -1,5 +1,52 @@
 <template>
   <div class="Detail">
+    <div class="top">
+      <div class="item-top">
+        <image src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-fangwuchuzu.png" />
+        <div class="right">
+          <h3>李在地</h3>
+          <span>清风街道</span>
+        </div>
+      </div>
+      <div class="item-content">
+        <span @click="$linkTo('./TopicDetail')">#【闲置物品交易】</span>
+        <text>社家用闲置柜子自用，原价212，现价80要的联系</text>
+      </div>
+      <div class="item-imgs">
+        <image src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/home-bg.png" />
+        <image src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/home-bg.png" />
+        <image src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/home-bg.png" />
+      </div>
+      <p>2020-12-11 10:10</p>
+      <div class="item-bottom">
+        <div>
+          <image src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-zhuanfa.png" />
+          <i>10</i>
+        </div>
+        <div>
+          <image src="https://cdn.cunwuyun.cn/wxmp/fengdu/zan.png" />
+          <i>10</i>
+        </div>
+        <div>
+          <image src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-pinglun.png" />
+          <i>10</i>
+        </div>
+      </div>
+    </div>
+    <div class="comment">
+      <h2>评论</h2>
+      <div class="comment-item" v-for="(item, index) in 10" :key="index">
+        <image src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-fangwuchuzu.png" />
+        <div class="right">
+          <h3>清风</h3>
+          <p>联系方式呢</p>
+          <div class="bottom">
+            <span>2020-12-11 10:10</span>
+            <div>回复</div>
+          </div>
+        </div>
+      </div>
+    </div>
     <AiLogin ref="login"/>
   </div>
 </template>
@@ -23,8 +70,167 @@
 
 <style scoped lang="scss">
   .Detail {
+    padding-top: 24px;
+
     div {
       box-sizing: border-box;
     }
+
+    .comment {
+      margin-top: 24px;
+      padding: 32px 32px 0;
+      background: #fff;
+
+      .comment-item {
+        display: flex;
+        padding: 26px 0;
+
+        &:first-child {
+          padding-top: 0;
+        }
+
+        & > image {
+          width: 72px;
+          height: 72px;
+          margin-right: 16px;
+          border-radius: 50%;
+        }
+
+        .right {
+          flex: 1;
+          padding-bottom: 32px;
+          border-bottom: 1px solid #EEEEEE;
+
+          h3 {
+            line-height: 40px;
+            margin-bottom: 8px;
+            color: #666666;
+            font-size: 28px;
+          }
+
+          p {
+            line-height: 42px;
+            margin-bottom: 24px;
+            color: #333;
+            font-size: 28px;
+          }
+
+          .bottom {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+
+            span {
+              color: #999999;
+              font-size: 24px;
+            }
+
+            div {
+              color: #687DA6;
+              font-size: 24px;
+            }
+          }
+        }
+      }
+
+      & > h2 {
+        margin-bottom: 32px;
+        color: #3d3d3d;
+        font-size: 38px;
+        font-weight: 600;
+      }
+    }
+
+    .top {
+      padding: 24px 24px 0;
+      background: #ffffff;
+
+      .item-top {
+        display: flex;
+        align-items: center;
+
+        image {
+          width: 96px;
+          height: 96px;
+          margin-right: 16px;
+          border-radius: 50%;
+        }
+
+        h3 {
+          margin-bottom: 12px;
+          color: #333333;
+          text-align: left;
+          font-size: 34px;
+          font-weight: 500;
+        }
+
+        span {
+          color: #999999;
+          font-size: 28px;
+        }
+      }
+
+      .item-imgs {
+        display: flex;
+        align-items: center;
+
+        image {
+          flex: 1;
+          height: 202px;
+          margin-right: 12px;
+
+          &:nth-of-type(3n) {
+            margin-right: 0;
+          }
+        }
+      }
+
+      & > p {
+        margin: 24px 0;
+        font-size: 28px;
+        color: #333333;
+      }
+
+      .item-bottom {
+        display: flex;
+        align-items: center;
+        height: 88px;
+        border-top: 1px solid #eeeeee;
+
+        div {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex: 1;
+
+          image {
+            width: 40px;
+            height: 40px;
+            margin: 16px;
+          }
+
+          i {
+            color: #687DA6;
+            font-size: 28px;
+          }
+        }
+      }
+
+      .item-content {
+        margin: 16px;
+        line-height: 1.3;
+        // text-align: justify;
+
+        span {
+          font-size: 28px;
+          color: #4181FF;
+        }
+
+        text {
+          font-size: 28px;
+          color: #333333;
+        }
+      }
+    }
   }
 </style>

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>