From cb8c39f89e9eded560122bc9fc449186f40c3fbf Mon Sep 17 00:00:00 2001
From: yanran200730 <yanran200830@163.com>
Date: Fri, 17 Mar 2023 09:35:55 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=B0=E9=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/project/fengdu/AppCircle/Add.vue       | 173 ++++++++++++++++++++-
 src/project/fengdu/AppCircle/AppCircle.vue |   6 +-
 src/project/fengdu/AppCircle/Detail.vue    | 146 +++++++++++------
 3 files changed, 270 insertions(+), 55 deletions(-)

diff --git a/src/project/fengdu/AppCircle/Add.vue b/src/project/fengdu/AppCircle/Add.vue
index c0a5d61..26e716c 100644
--- a/src/project/fengdu/AppCircle/Add.vue
+++ b/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>
diff --git a/src/project/fengdu/AppCircle/AppCircle.vue b/src/project/fengdu/AppCircle/AppCircle.vue
index c798926..ae3894b 100644
--- a/src/project/fengdu/AppCircle/AppCircle.vue
+++ b/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;
diff --git a/src/project/fengdu/AppCircle/Detail.vue b/src/project/fengdu/AppCircle/Detail.vue
index a396f28..64f8ea3 100644
--- a/src/project/fengdu/AppCircle/Detail.vue
+++ b/src/project/fengdu/AppCircle/Detail.vue
@@ -35,18 +35,24 @@
     </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 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">
+            <h3>清风</h3>
+            <p>联系方式呢</p>
+            <div class="bottom">
+              <span>2020-12-11 10:10</span>
+              <div>回复</div>
+            </div>
           </div>
         </div>
       </div>
     </div>
+    <div class="footer">
+      <input placeholder="请输入">
+      <div>发送</div>
+    </div>
     <AiLogin ref="login"/>
   </div>
 </template>
@@ -71,63 +77,109 @@
 <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-item {
-        display: flex;
-        padding: 26px 0;
+      .comment-wrapper {
+        .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;
+          &:first-child {
+            padding-top: 0;
           }
 
-          p {
-            line-height: 42px;
-            margin-bottom: 24px;
-            color: #333;
-            font-size: 28px;
+          & > image {
+            width: 72px;
+            height: 72px;
+            margin-right: 16px;
+            border-radius: 50%;
           }
 
-          .bottom {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
+          .right {
+            flex: 1;
+            padding-bottom: 32px;
+            border-bottom: 1px solid #EEEEEE;
 
-            span {
-              color: #999999;
-              font-size: 24px;
+            h3 {
+              line-height: 40px;
+              margin-bottom: 8px;
+              color: #666666;
+              font-size: 28px;
             }
 
-            div {
-              color: #687DA6;
-              font-size: 24px;
+            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;
+              }
+            }
+          }
+
+          &:last-child {
+            padding-bottom: 0;
+
+            .right {
+              border-bottom: none;
             }
           }
         }