丰都

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 {
-    padding-top: 120px;
-    padding-bottom: 40px;
+  .Add {
+    padding: 24px 0 130px;
+
+    & > 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>