丰都

src/project/fengdu/AppCircle/Add.vue

@@ -1,15 +1,59 @@
 <template>
   <div class="Add">
-    <AiLogin ref="login"/>
+    <div class="add-content">
+      <div class="top">
+        <!-- <image src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-edit.png" /> -->
+        <textarea placeholder="发布内容" :maxlength="500"></textarea>
+        <div class="bottom">
+          <div></div>
+          <div>
+            <i>6</i>
+            <span>/500</span>
+          </div>
+        </div>
+      </div>
+      <div class="bottom">
+        <h2>最多上传9张</h2>
+        <div class="img">
+          <AiUploader v-model="form.images" :limit="9" multiple/>
+        </div>
+        <div class="topic">
+          <h3 @click="isShow = true">#绑定话题</h3>
+          <div class="choosed">
+            <span>#闲置物品交易</span>
+          </div>
+          <p>绑定一个与您发布内容相关很高的话题，会被更多人看到哦。</p>
+        </div>
+      </div>
+    </div>
+    <div class="bottom">
+      <h2>仅本社区可见</h2>
+      <switch color="#2D7DFF" checked></switch>
+    </div>
+    <div class="btn-wrapper">
+      <div class="btn" hover-class="text-hover" @click="submit">发布服务</div>
+    </div>
+    <u-popup v-model="isShow" mode="bottom" hidden height="700rpx" border-radius="30">
+			<div class="popup">
+        <h2>请选择</h2>
+        <scroll-view class="popup-list" scroll-y>
+          <div v-for="(item, index) in 20" :key="index">#闲置物品交易</div>
+        </scroll-view>
+      </div>
+		</u-popup>
   </div>
 </template>
 <script>
   export default {
     name: 'Add',
-    appName: '发帖',
+    appName: '发新贴',
 
     data () {
       return {
+        form: {
+          images: []
+        },
+        isShow: false
       }
     },
 
@@ -22,12 +66,131 @@
 </script>
 
 <style scoped lang="scss">
-  .Topic {
+  .Add {
-    padding-top: 120px;
+    padding: 24px 0 130px;
-    padding-bottom: 40px;
+
+    & > div {
+      background: #fff;
+    }
+
+    .popup {
+      height: 700px;
+      border-radius: 20px 20px 0 0;
+
+      h2 {
+        height: 98px;
+        line-height: 98px;
+        text-align: center;
+        color: #333333;
+        font-size: 34px;
+        font-weight: 600;
+      }
+
+      .popup-list {
+        height: calc(100% - 98px);
+
+        div {
+          padding: 20px 48px;
+          color: #333333;
+          font-size: 30px;
+        }
+      }
+    }
 
     div {
       box-sizing: border-box;
     }
+
+    .add-content {
+      margin-bottom: 24px;
+
+      & > .top {
+        padding: 32px;
+        border-bottom: 1px solid #eee;
+
+        textarea {
+          width: 100%;
+          height: 300px;
+        }
+
+        .bottom {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          margin-top: 14px;
+
+          div {
+            display: flex;
+            align-items: center;
+          }
+
+          i {
+            font-size: 24px;
+            color: #666666;
+          }
+
+          span {
+            font-size: 24px;
+            color: #999999;
+          }
+        }
+      }
+
+      & > .bottom {
+        padding: 32px 32px;
+
+        h2 {
+          margin-bottom: 16px;
+          font-size: 24px;
+          color: #999;
+        }
+
+        .topic {
+          h3 {
+            width: 134px;
+            height: 52px;
+            line-height: 52px;
+            margin-bottom: 12px;
+            text-align: center;
+            border: 1px solid #999;
+            border-radius: 26px;
+            color: #666;
+            font-size: 22px;
+          }
+
+          p {
+            font-size: 20px;
+            color: #999999;
+          }
+
+          .choosed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 52px;
+            padding: 0 16px;
+            width: fit-content;
+            margin-bottom: 12px;
+            border: 1px solid #2D7DFF;
+            border-radius: 26px;
+            font-size: 22px;
+            color: #2D7DFF;
+          }
+        }
+      }
+    }
+
+    & > .bottom {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 98px;
+      padding: 0 32px;
+
+      h2 {
+        font-size: 28px;
+        color: #333333;
+      }
+    }
   }
 </style>

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" @click="$linkTo('./Detail')">
+      <div class="item" v-for="(item, index) in 10" :key="index" @click="$linkTo('./Detail')" hover-class="bg-hover">
         <div class="item-top">
           <image src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-fangwuchuzu.png" />
           <div class="right">
@@ -55,7 +55,7 @@
         </div>
       </div>
     </div>
-    <div class="add" hover-class="text-hover">
+    <div class="add" hover-class="text-hover" @click="$linkTo('./Add')">
       <image src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-fatie.png" />
     </div>
     <AiLogin ref="login"/>
@@ -149,7 +149,7 @@
 
     .AppCircle-list {
       .item {
-        margin: 0 24px 24px;
+        margin: 0 32px 24px;
         padding: 24px 24px 0;
         background: #ffffff;
         border-radius: 16px;

src/project/fengdu/AppCircle/Detail.vue

@@ -35,6 +35,7 @@
     </div>
     <div class="comment">
       <h2>评论</h2>
+      <div class="comment-wrapper">
         <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">
@@ -47,6 +48,11 @@
           </div>
         </div>
       </div>
+    </div>
+    <div class="footer">
+      <input placeholder="请输入">
+      <div>发送</div>
+    </div>
     <AiLogin ref="login"/>
   </div>
 </template>
@@ -71,16 +77,53 @@
 <style scoped lang="scss">
   .Detail {
     padding-top: 24px;
+    padding-bottom: 100px;
 
     div {
       box-sizing: border-box;
     }
 
+    .footer {
+      display: flex;
+      align-items: center;
+      position: fixed;
+      left: 0;
+      bottom: 0;
+      z-index: 111;
+      width: 100%;
+      padding: 14px 32px;
+      background: #fff;
+
+      input {
+        flex: 1;
+        height: 60px;
+        margin-right: 16px;
+        padding: 0 24px;
+        border-radius: 30px;
+        font-size: 26px;
+        color: #333;
+        box-sizing: border-box;
+        background: #eeeeeeff;
+      }
+
+      div {
+        width: 100px;
+        height: 60px;
+        line-height: 60px;
+        text-align: center;
+        font-size: 26px;
+        color: #fff;
+        border-radius: 30px;
+        background: #2d7dffff;
+      }
+    }
+
     .comment {
       margin-top: 24px;
       padding: 32px 32px 0;
       background: #fff;
 
+      .comment-wrapper {
         .comment-item {
           display: flex;
           padding: 26px 0;
@@ -131,6 +174,15 @@
               }
             }
           }
+
+          &:last-child {
+            padding-bottom: 0;
+
+            .right {
+              border-bottom: none;
+            }
+          }
+        }
       }
 
       & > h2 {