From 93fb0c1c98ece2f6eb52c128ea994790d7b44c5e Mon Sep 17 00:00:00 2001
From: A1300399510 <A1300399510>
Date: Thu, 6 Jul 2023 20:09:13 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/edit/about-pop.vue |  15 +-
 src/components/edit/map.vue       |   4 +-
 src/components/public/head.vue    |   6 +-
 src/utils/axios.js                |   7 +-
 src/views/edit.vue                | 395 ++++++++++++++++++++++--------
 5 files changed, 321 insertions(+), 106 deletions(-)

diff --git a/src/components/edit/about-pop.vue b/src/components/edit/about-pop.vue
index a931597..06d67b4 100644
--- a/src/components/edit/about-pop.vue
+++ b/src/components/edit/about-pop.vue
@@ -38,7 +38,7 @@ export default {
         };
 
         const tab = ref("person"); // person intermediary more
-        
+
         computed(() => {
             if (props['intermediary'] == 1) tab = "intermediary"
             else tab = "person"
@@ -152,6 +152,19 @@ export default {
             .about-list-item {
                 padding: 30px 0;
 
+                position: relative;
+
+                &::after {
+                    content: "";
+                    position: absolute;
+                    top: 40px;
+                    left: -22px;
+                    width: 8px;
+                    height: 8px;
+                    border-radius: 50%;
+                    background: rgba(80, 227, 194, 1);
+                }
+
                 &:not(:last-of-type) {
                     border-bottom: 1px dashed #ebebeb;
                 }
diff --git a/src/components/edit/map.vue b/src/components/edit/map.vue
index 4792ccd..0b86324 100644
--- a/src/components/edit/map.vue
+++ b/src/components/edit/map.vue
@@ -47,7 +47,9 @@ export default {
         let that = this
         let info = this.info
 
-        if (!info['latitude']) {
+        console.log("info['latitude']", info['latitude']);
+
+        if (info['latitude']) {
             this.latlng = {
                 longitude: info['longitude'],
                 latitude: info['latitude'],
diff --git a/src/components/public/head.vue b/src/components/public/head.vue
index 2a7d015..363e94b 100644
--- a/src/components/public/head.vue
+++ b/src/components/public/head.vue
@@ -48,6 +48,7 @@ export default {
 
     .container-header-bj {
         width: 100vw;
+        min-width: 1200px;
         height: 260px;
         background-image: url('@/assets/img/edit/bj-img1920.png');
         background-repeat: no-repeat;
@@ -62,6 +63,7 @@ export default {
             left: 50%;
             transform: translateX(-50%);
             width: 100vw;
+            min-width: 1200px;
             max-width: 1920px;
             height: 100%;
             background-color: rgba(0, 0, 0, 0.698039215686274);
@@ -70,7 +72,7 @@ export default {
 
     .header-nav {
         height: 46px;
-        max-width: 1200px;
+        width: 1200px;
         justify-content: flex-end;
         margin: 0 auto;
         position: relative;
@@ -112,7 +114,7 @@ export default {
     .logo-box {
         position: relative;
         margin: 21px auto 0;
-        max-width: 1200px;
+        width: 1200px;
         z-index: 1;
 
         .logo-icon {
diff --git a/src/utils/axios.js b/src/utils/axios.js
index c88e0fb..d61715f 100644
--- a/src/utils/axios.js
+++ b/src/utils/axios.js
@@ -6,13 +6,17 @@ import router from '../router/index'
 //  let host = window.location.host; //主机
 //  axios.defaults.baseURL = protocol + "//" + host;
 axios.defaults.baseURL = 'https://app.gter.net'
+// axios.defaults.emulateJSON = true
+// axios.defaults.withCredentials = true
 
 axios.interceptors.request.use( //响应拦截
     async config => {
         // 每次发送请求之前判断vuex中是否存在token        
         // 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况
         // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断 
-        config.headers.token = sessionStorage.getItem('token')
+        // config.headers.withCredentials = true
+        // config.headers['Content-Type'] = 'multipart/form-data'     
+
         if (process.env.NODE_ENV == "development") config['headers']['authorization'] = "x2mmnl9grt51bpplj2k6ioiuummzhnw3"
         return config;
     },
@@ -22,6 +26,7 @@ axios.interceptors.request.use( //响应拦截
 // 响应拦截器
 axios.interceptors.response.use(
     response => {
+        console.log("response", response);
         if (response.status === 200) return Promise.resolve(response); //进行中        
         else return Promise.reject(response); //失败       
 
diff --git a/src/views/edit.vue b/src/views/edit.vue
index 7af4249..4416edf 100644
--- a/src/views/edit.vue
+++ b/src/views/edit.vue
@@ -98,22 +98,27 @@
                     </div>
 
                     <!-- 出租时长 -->
-                    <div v-if="item.field === 'rentalduration'" ref="rentalduration"
-                        class="form-option modeFour flexacenter" :class="{ 'pitch': info.rentalduration }">
-                        <el-select class="modeFour-select flex1 " v-model="info.rentalduration" placeholder="请选择">
-                            <el-option v-for="item in item.choices" :key="item.key" :label="item.value"
-                                :value="item.key"></el-option>
-                        </el-select>
-                        <img class="modeFour-arrows" src="@/assets/img/edit/arrows.svg">
+                    <div v-if="item.field === 'rentalduration'" class="form-option modeTwo flexacenter">
+                        <div class="modeTwo-item flexcenter" :class="{ 'pitch': info['rentalduration'] == 0 }"
+                            ref="rentalduration" @click="setValue('rentalduration', 0)">随时</div>
+                        <div class="modeTwo-item flexacenter" :class="{ 'pitch': info['rentalduration'] }"
+                            ref="rentalduration">
+                            <el-select class="flex1 modeTwo-select" v-model="info.rentalduration" placeholder="请选择">
+                                <el-option :key="0" label="请选择" :value="0" v-show="false"></el-option>
+                                <el-option v-for="item in item.choices" :key="item.key" :label="item.value"
+                                    :value="item.key"></el-option>
+                            </el-select>
+                            <img class="arrows-icon" src="@/assets/img/edit/arrows.svg" />
+                            <img class="arrows-icon-pitch" src="@/assets/img/edit/blue-arrow.svg" />
+                        </div>
                     </div>
 
                     <!-- 起租日期 -->
                     <div v-if="item.field === 'leasetime'" class="form-option modeTwo flexacenter">
                         <div class="modeTwo-item flexcenter" :class="{ 'pitch': info['leasetime'] == 0 }" ref="leasetime"
                             @click="setValue('leasetime', 0)">随时</div>
-                        <div class="modeTwo-item flexacenter" :class="{ 'pitch': info['leasetime'] }">
+                        <div class="modeTwo-item flexacenter" :class="{ 'pitch': info['leasetime'] }" ref="leasetime">
                             <el-date-picker v-model="info.leasetime" type="date" placeholder="选择日期"></el-date-picker>
-
                             <img class="arrows-icon" src="@/assets/img/edit/arrows.svg" />
                             <img class="arrows-icon-pitch" src="@/assets/img/edit/blue-arrow.svg" />
                         </div>
@@ -293,14 +298,14 @@
                 </div>
                 <div class="halving-line"></div>
                 <div class="form-item" v-for="item in fieldinfoAddress" :key="item.type">
-                    <div class="form-title flexacenter">{{ item.title }}
+                    <div class="form-title flexacenter"
+                        v-if="item.field != 'address' || (item.field == 'address' && info['location'])">{{ item.title }}
                         <div class="asterisk" v-if="item.required === 1">*</div>
                     </div>
 
-                    <div class="form-option modeOne flexacenter" v-if="intermediary != 6">
-                        <!-- 所在区域 -->
-                        <div v-if="item.field == 'location' && intermediary != 6" ref="location"
-                            class="modeOne-item flexacenter"
+                    <!-- 所在区域 -->
+                    <div class="form-option modeOne flexacenter" v-if="intermediary != 6 && item.field == 'location'">
+                        <div ref="location" class="modeOne-item flexacenter"
                             :class="{ 'pitch': info['location'], 'disabled': verified == 1 }"
                             style="width: 640px;border-color: rgba(170, 170, 170, 1);"
                             @click="verified == 1 ? '' : areaPopState = true">
@@ -315,10 +320,9 @@
                             <img class="arrows-icon" src="@/assets/img/edit/arrows.svg" />
                             <img class="arrows-icon arrows-disabled-icon" src="@/assets/img/edit/disabled-icon.svg" />
                             <img class="arrows-icon-pitch" src="@/assets/img/edit/blue-arrow.svg" />
-
+                            <!-- 弹窗 -->
                             <div class="pop area-pop-box radius16" style="position: absolute;top: 58px;height: 614px;"
                                 v-if="areaPopState">
-                                <!-- <div class="area-pop-header">所在区域</div> -->
                                 <div class="area-box flexflex" style="height: 100%;">
                                     <div class="area-left">
                                         <div class="area-item flexacenter" :class="{ 'pitchpitch': index == locationValue }"
@@ -329,7 +333,8 @@
                                         </div>
                                     </div>
                                     <div class="area-right flex1">
-                                        <div class="area-item flexacenter" :class="{ 'pitchpitch': info['location'] == index }"
+                                        <div class="area-item flexacenter"
+                                            :class="{ 'pitchpitch': info['location'] == index }"
                                             v-for="(item, index) in locationData[locationValue].data" :key="index"
                                             @click.stop="handleArea(index, item)">
                                             <div class="area-item-name">{{ item }}</div>
@@ -339,11 +344,14 @@
                                 </div>
                             </div>
                         </div>
+                    </div>
 
-                        <!-- 地址 -->
-                        <div v-if="item.field == 'address' && info['location']" class="modeOne-item flexacenter"
-                            style="width: 640px;border-color: rgba(170, 170, 170, 1);" @click="handleLocationData">
-                            <div class="modeOne-text flexacenter" style="color: #AAAAAA;">请选择</div>
+                    <!-- 地址 -->
+                    <div class="form-option modeOne flexacenter"
+                        v-if="intermediary != 6 && (item.field == 'address' && info['location'])">
+                        <div class="modeOne-item flexacenter" style="width: 640px;border-color: rgba(170, 170, 170, 1);"
+                            @click="handleLocationData">
+                            <div class="modeOne-text flexacenter" style="color: #AAAAAA;">{{ info['address'] ? info['address'] : "请选择"}}</div>
                             <img class="arrows-icon" src="@/assets/img/edit/arrows.svg" />
                             <img class="arrows-icon-pitch" src="@/assets/img/edit/blue-arrow.svg" />
                         </div>
@@ -369,8 +377,41 @@
                         <div class="modification-btn flexcenter" @click="targetAreaState = true">重选</div>
                     </div>
 
+                </div>
+
+                <!-- 所属小区 -->
+                <div class="form-item" v-if="info['address']">
+                    <div class="form-title flexacenter">所属小区
+                    </div>
+                    <div class="form-option modeOne flexacenter">
+                        <div v-if="info['communityid'] != null" ref="communityname" class="modeOne-item flexacenter"
+                            :class="{ 'pitch': info['communityname'], 'disabled': verified == 1 }"
+                            style="width: 640px;border-color: rgb(170, 170, 170);" @click="handleResidentialArea()">
+                            <div class="modeOne-text flexacenter" v-if="info['communityname']">
+                                {{ info.communityname }}
+                            </div>
+                            <div class="modeOne-text flexacenter" style="color: #AAAAAA;" v-else>请选择</div>
+                            <img class="arrows-icon" src="@/assets/img/edit/arrows.svg" />
+                            <img class="arrows-icon arrows-disabled-icon" src="@/assets/img/edit/disabled-icon.svg" />
+                            <img class="arrows-icon-pitch" src="@/assets/img/edit/blue-arrow.svg" />
+                        </div>
+                        <div v-else ref="communityname" class="modeOne-item flexacenter"
+                            :class="{ 'pitch': info['communityname'], 'disabled': verified == 1 }"
+                            style="width: 640px;border-color: rgb(170, 170, 170);">
+                            <input class="communityname-input" v-model="info.communityname" placeholder="请填写" />
+                        </div>
+                        <div class="residential-area" v-if="residentialAreaState">
+                            <div class="residential-item flexacenter" v-for="item in communityList" :key="item.id"
+                                @click="clickResidentialArea(item.id, item.name)">
+                                <div class="residential-dot"></div>
+                                <div class="residential-text flex1 flexacenter" :class="{ 'pitchpitch': item.id == info['communityid'] }">{{ item.name }}</div>
+                            </div>
+                        </div>
+                    </div>
 
                 </div>
+
+
                 <div class="halving-line"></div>
                 <div class="form-item" v-for="(item, index) in fieldinfoIdentity" :key="index">
                     <template v-if="item.field != 'intermediary' && judgeGenderCohabitantsShow(item.field)">
@@ -401,38 +442,46 @@
                     <div class="form-item" v-for="(item) in  fieldinfoUpload" :key="item.field">
                         <div class="form-title flexacenter">{{ item.title }} ({{ item.placeholder }})</div>
 
+                        <!-- 视频 -->
                         <div class="media-box flexflex" v-if="item.field == 'video'">
                             <div class="media-item flexcenter" v-for="(item, index) in info.video" :key="index">
                                 <img class="media-cross-icon" @click.stop="deleteMedia('video', index)"
                                     src="@/assets/img/edit/cross-icon.png">
-                                <div class="flexcenter"
-                                    style="width: 100px;height: 100px;overflow: hidden;border-radius: 10px;">
-                                    <video class="media-img" preload="metadata" :src="item.image" :autoplay="false"></video>
+                                <div class="media-item-box flexcenter">
+                                    <video class="media-img" :src="item.image" :autoplay="false"></video>
+                                    <!-- <video class="media-img" preload="metadata" :src="item.image" :autoplay="false"></video> -->
                                 </div>
                                 <img class="media-play-icon" src="@/assets/img/edit/play-icon.svg" />
                             </div>
                             <div class="media-item flexcenter" style="position: relative;"
                                 v-if="info.video.length < videoConfig.maxcount">
-                                <img class="media-add-icon" src="@/assets/img/edit/media-add.svg" />
-                                <input class="input-file" type="file" accept="video/*"
-                                    @change="validateVideoFileType($event, 'video')" multiple />
+                                <div class="media-item-box flexcenter">
+                                    <img class="media-add-icon" src="@/assets/img/edit/media-add.svg" />
+                                    <input class="input-file" type="file" accept="video/*"
+                                        @change="validateVideoFileType($event, 'video')" multiple />
+                                </div>
                             </div>
                         </div>
 
+                        <!-- 照片 -->
                         <div class="media-box flexflex" v-if="item.field == 'images'">
-                            <div class="media-item flexcenter" v-for="(item, index) in info.images" :key="index">
-                                <img class="media-cross-icon" @click.stop="deleteMedia('image', index)"
-                                    src="@/assets/img/edit/cross-icon.png">
-                                <div class="flexcenter"
-                                    style="width: 100px;height: 100px;overflow: hidden;border-radius: 10px;">
+                            <div class="media-item flexcenter" :class="{ 'pitch': item['aid'] == info['aid'] }"
+                                v-for="(item, index) in info.images" :key="index">
+                                <div class="media-item-box flexcenter">
+                                    <img class="media-cross-icon" @click.stop="deleteMedia('image', index)"
+                                        src="@/assets/img/edit/cross-icon.png">
                                     <img class="media-img" :src="item.image" />
                                 </div>
+                                <div class="media-cover-bnt flexcenter" v-if="info.images.length != 1"
+                                    @click="info['aid'] = item['aid']">选为封面</div>
                             </div>
                             <div class="media-item flexcenter" style="position: relative;"
                                 v-if="info.images.length < imagesConfig.maxcount">
-                                <img class="media-add-icon" src="@/assets/img/edit/media-add.svg" />
-                                <input class="input-file" type="file" accept="image/*"
-                                    @change="validateVideoFileType($event, 'image')" multiple />
+                                <div class="media-item-box flexcenter">
+                                    <img class="media-add-icon" src="@/assets/img/edit/media-add.svg" />
+                                    <input class="input-file" type="file" accept="image/*"
+                                        @change="validateVideoFileType($event, 'image')" multiple />
+                                </div>
                             </div>
                         </div>
 
@@ -514,45 +563,6 @@
         </div>
     </div>
 
-    <!-- 弹窗区域 -->
-    <!-- 类型弹窗 -->
-    <!-- <div class="flexcenter pop-mask" @click="typePopState = false" v-if="typePopState">
-        <div class="pop type-pop-box radius16">
-            <div class="type-pop-title">{{ typeData[typeValue].name }}</div>
-            <div class="type-pop-list flexflex">
-                <div class="type-pop-item flexcenter" :class="{ 'pitch': item.key == info.type }"
-                    v-for="(item, index) in typeData[typeValue].data" :key="index"
-                    @click.stop="handleType(item.key, item.value)">{{
-                        item.value }}
-                </div>
-            </div>
-        </div>
-    </div> -->
-
-    <!-- 所在区域 -->
-    <!-- <div class="flexcenter pop-mask" @click="areaPopState = false" v-if="areaPopState">
-        <div class="pop area-pop-box radius16">
-            <div class="area-pop-header">所在区域</div>
-            <div class="area-box flexflex">
-                <div class="area-left">
-                    <div class="area-item flexacenter" :class="{ 'pitch': index == locationValue }"
-                        v-for="(item, index) in locationData" :key="index" @click.stop="handleArea(index)">
-                        <div class="dot"></div>
-                        {{ item.name }}
-                    </div>
-                </div>
-                <div class="area-right flex1">
-                    <div class="area-item flexacenter" :class="{ 'pitch': info['location'] == index }"
-                        v-for="(item, index) in locationData[locationValue].data" :key="index"
-                        @click.stop="handleArea(index, item)">
-                        <div class="area-item-name">{{ item }}</div>
-                        <img class="area-item-pitch" src="@/assets/img/edit/blue-tick.svg" />
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div> -->
-
     <!-- 目标区域 - 弹窗 -->
     <div class="flexcenter pop-mask" @click="targetAreaState = false" v-if="targetAreaState">
         <div class="pop area-pop-box radius16 target-area">
@@ -769,6 +779,9 @@ export default {
             offshelftime: "",
             offshelftime: "",
             updatetime: "",
+            residentialAreaState: false, // 所属小区的弹窗的状态
+            isResidentialAreaUpdate: true, // 所属小区的数据是否需要更新
+            communityList: [], // 所属小区的列表
 
             stateObj: {
                 1: "已上架",
@@ -888,6 +901,9 @@ export default {
 
                 let info = data.info
 
+                console.log("info", info);
+                // info['rentalduration'] = 999
+
                 // info['type'] = 1.1
                 // info['leasetime'] = ""
                 // info['rent'] = 100
@@ -897,7 +913,8 @@ export default {
                 // info['sunshinearea'] = 1
                 // info['acreage'] = 200
                 // info.location = "1.5"
-
+                // communityid: ""
+                // communityname: ""
 
                 if (!info['leasetime']) info['leasetime'] = null
 
@@ -1077,6 +1094,7 @@ export default {
                 return
             }
 
+
             let allowedExtensions = ['mp4', 'webm', 'ogg'];
             type == 'image' ? allowedExtensions = ['svg', 'jpg', 'jpeg', 'png', 'bmp', 'webp'] : ''
 
@@ -1118,7 +1136,9 @@ export default {
             formData.append('name', target.name); // 文件名
             formData.append('type', type); // 文件名
 
-            this.$post('/tenement/forum/upload', formData).then(res => {
+            this.$axios.post('/tenement/forum/upload', formData).then(res => {
+                res = res['data']
+
                 if (res.code != 200) {
                     this.$message.error(res.message);
                     this.mediaUploadIndex += 1
@@ -1203,16 +1223,37 @@ export default {
                     this.$message.error(res.message);
 
                     // 获取 myRef 元素的位置信息
-                    let targetElement = this.$refs[data.field][0]
+                    let targetElement = this.$refs[data.field]
                     if (!targetElement) return
-                    targetElement.style.borderColor = "rgba(249, 93, 93, 1)";
-                    const top = targetElement.offsetTop - 150 || 300;
+
+                    console.log("targetElement", this.$refs[data.field]);
+                    if (Array.isArray(targetElement)) {
+                        targetElement.forEach(element => {
+                            console.log("element", element);
+                            element.style.borderColor = "rgba(249, 93, 93, 1)";
+                        })
+                    } else targetElement.style.borderColor = "rgba(249, 93, 93, 1)";
+
+                    // targetElement.style.borderColor = "rgba(249, 93, 93, 1)";
+
 
                     this.$watch(`info.${data.field}`, (newVal, oldVal) => {
-                        if (newVal != null && newVal != undefined) targetElement.style.borderColor = "#aaaaaa";
+                        if (newVal != null && newVal != undefined) {
+                            if (Array.isArray(targetElement)) {
+                                targetElement.forEach(element => {
+                                    console.log("element", element);
+                                    element.style.borderColor = "#aaaaaa";
+                                })
+                            } else targetElement.style.borderColor = "#aaaaaa";
+                            // targetElement.style.borderColor = "#aaaaaa";
+                        }
                     })
 
                     // 设置滚动距离
+                    const top = targetElement.offsetTop - 150 || 300;
+                    if (Array.isArray(targetElement)) targetElement[0].offsetTop - 150 || 300;
+                    else targetElement.offsetTop - 150 || 300;
+
                     document.body.scrollTop = document.documentElement.scrollTop = top;
 
                     return
@@ -1307,8 +1348,56 @@ export default {
 
         // 选择地点后
         choosingLocation(value) {
-            console.log(value);
-            // this.mapComponentState = false
+            let info = this.info
+            info['address'] = value['poiname']
+            info['latitude'] = value['latlng']['lat']
+            info['longitude'] = value['latlng']['lng']
+
+            this.mapComponentState = false
+            this.isResidentialAreaUpdate = true
+        },
+
+        // 处理所属小区判断，并获取数据
+        handleResidentialArea() {
+            // communityList
+
+            if (this.isResidentialAreaUpdate) {
+
+                let info = this.info
+                let location = `${info['longitude'] || 114.160151},${info['latitu1de'] || 22.247117}`
+                this.$post("/tenement/forum/placeAround", {
+                    location
+                }).then(res => {
+                    if (res.code != 200) return
+                    console.log(res, "res");
+                    let data = res.data
+                    data.push({
+                        name: "以上都不是"
+                    })
+                    this.communityList = data
+                    this.residentialAreaState = true
+                    this.isResidentialAreaUpdate = false
+
+                })
+            } else this.residentialAreaState = true
+
+        },
+
+        // 点击所属小区选项
+        clickResidentialArea(id, name) {
+            let info = this.info
+
+            if (!id) {
+                info['communityid'] = null
+                info['communityname'] = null
+            } else {
+                info['communityid'] = id
+                info['communityname'] = name
+            }
+
+            this.info = info
+            this.residentialAreaState = false
+
         },
 
 
@@ -1650,11 +1739,16 @@ export default {
                                 content: "";
                             }
 
+                            .modeTwo-select {
+                                height: 100%;
+                            }
+
                             /deep/ .el-input {
                                 flex: 1;
                                 width: 100%;
                                 height: 100%;
 
+                                .el-input__wrapper,
                                 .el-input__inner {
                                     height: 100%;
                                     border: none;
@@ -1662,13 +1756,9 @@ export default {
                                     color: #555;
                                     padding-left: 0;
 
-                                    /* 修改 Webkit 内核浏览器的输入框提示文本样式 */
-                                    &::-webkit-input-placeholder {
-                                        color: #555;
-                                    }
-
                                     /* 修改 FireFox 内核浏览器的输入框提示文本样式 */
-                                    &:-moz-placeholder {
+                                    &:-moz-placeholder,
+                                    &::-webkit-input-placeholder {
                                         color: #555;
                                     }
 
@@ -1793,14 +1883,12 @@ export default {
                     }
 
                     &.modeSix {
-
                         .modeSix-select {
                             border: 1px solid rgba(170, 170, 170, 1);
                             border-radius: 10px;
                             overflow: hidden;
                             width: 269px;
                             height: 50px;
-
                             position: relative;
 
                             .el-select {
@@ -1968,8 +2056,6 @@ export default {
                                 margin-left: 20px;
                                 cursor: pointer;
                             }
-
-
                         }
                     }
 
@@ -1988,6 +2074,79 @@ export default {
                         }
                     }
 
+                    .communityname-input {
+                        width: 100%;
+                        height: 100%;
+                        color: #62B1FF;
+                        border: none;
+                        outline: none;
+                        font-size: 16px;
+                    }
+
+                    .residential-area {
+                        position: absolute;
+                        top: 58px;
+                        width: 640px;
+                        height: 500px;
+                        background-color: rgba(255, 255, 255, 1);
+                        box-sizing: border-box;
+                        border: 1px solid rgba(235, 235, 235, 1);
+                        border-radius: 16px;
+                        -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
+                        -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
+                        box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
+                        z-index: 1;
+                        padding: 10px 30px;
+                        overflow: auto;
+
+                        /*滚动条样式*/
+                        &::-webkit-scrollbar {
+                            width: 8px;
+                        }
+
+                        &::-webkit-scrollbar-thumb {
+                            border-radius: 10px;
+                            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0);
+                            background: rgba(242, 242, 242, 1);
+                        }
+
+                        &::-webkit-scrollbar-track {
+                            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0);
+                            border-radius: 0;
+                            background: transparent;
+                        }
+
+                        .residential-item {
+                            height: 60px;
+                            cursor: pointer;
+
+                            .residential-dot {
+                                width: 6px;
+                                height: 6px;
+                                background: #62b1ff;
+                                border-radius: 50%;
+                                margin-right: 47px;
+
+                            }
+
+                            .residential-text {
+                                height: 100%;
+                                color: #555;
+                                font-size: 16px;
+
+                                &.pitchpitch {
+                                    color: #62b1ff;
+
+                                }
+                            }
+
+                            &:not(:last-of-type) {
+                                border-bottom: 1px solid rgba(242, 242, 242, 1);
+                            }
+
+                        }
+                    }
+
                 }
 
                 .form-arrows {
@@ -2003,21 +2162,47 @@ export default {
                 .media-box {
                     flex-wrap: wrap;
                     width: 640px;
+                    align-items: flex-start;
 
                     .media-item {
                         width: 100px;
-                        height: 100px;
-                        border-radius: 10px;
-                        background-color: rgba(246, 246, 246, 1);
-                        border: 1px solid rgba(235, 235, 235, 1);
                         position: relative;
                         cursor: pointer;
+                        flex-direction: column;
+
+                        &:not(:nth-last-child(-n+5)) {
+                            margin-bottom: 30px;
+                        }
+
+                        &.pitch {
+                            .media-cover-bnt {
+                                background: rgba(80, 227, 194, 1);
+                                border: none;
+                                color: #fff;
+                            }
+
+                            .media-item-box {
+                                border: 1px solid rgba(80, 227, 194, 1);
+                            }
+                        }
+
+                        .media-item-box {
+                            width: 100px;
+                            height: 100px;
+                            overflow: hidden;
+                            border-radius: 10px;
+                            margin-bottom: 10px;
+                            height: 100px;
+                            border-radius: 10px;
+                            background-color: rgba(246, 246, 246, 1);
+                            border: 1px solid rgba(235, 235, 235, 1);
+                        }
 
                         &:not(:nth-of-type(5n)) {
                             margin-right: 35px;
                         }
 
-                        margin-bottom: 30px;
+                        // margin-bottom: 20px;
 
                         .input-file {
                             position: absolute;
@@ -2045,18 +2230,26 @@ export default {
 
                         .media-img {
                             width: 100px;
-                            // max-width: 100px;
-                            // max-height: 100px;
                             position: relative;
                             filter: brightness(0.5);
+                        }
 
+                        .media-cover-bnt {
+                            width: 100px;
+                            height: 30px;
+                            border-radius: 8px;
+                            font-size: 14px;
+                            border: 1px solid rgba(215, 215, 215, 1);
+                            color: #aaa;
+                            font-weight: 400;
                         }
 
                         .media-play-icon {
                             width: 20px;
                             height: 20px;
                             position: absolute;
-                            top: 50%;
+                            // top: 50%;
+                            top: calc(50% - 5px);
                             left: 50%;
                             transform: translate(-50%, -50%);
                         }
@@ -2128,7 +2321,6 @@ export default {
                 margin-left: 48px;
                 margin-bottom: 60px;
 
-
                 .hint-icon {
                     width: 20px;
                     height: 20px;
@@ -2482,6 +2674,7 @@ export default {
         -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.349019607843137);
         box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.349019607843137);
         overflow: hidden;
+        z-index: 101;
 
         .area-pop-header {
             font-weight: 650;