提交

src/components/detail/breadcrumb.vue

@@ -62,7 +62,7 @@
                             转发
                         </span>
                         <transmit-btn v-if="data.data['info']" :qrcode="data.data['qrcode']"
-                            :title="data.data.info['subject']"></transmit-btn>
+                            :title="data.data.info['subject']" type="housing"></transmit-btn>
                     </div>
                 </div>
             </div>

src/components/public/phoneQRcode.vue

@@ -54,13 +54,13 @@ const props = defineProps({
             background-color: rgba(255, 255, 255, 1);
             border-radius: 50%;
             overflow: hidden;
-            // -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);
+            -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);
-            // -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);
+            -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);
-            // box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);
+            box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);
             margin-bottom: 33px;
 
             .QRcode-img {
-                width: 110px;
+                width: 120px;
                 // height: 110px;
             }
         }

src/components/public/transmitBtn.vue

@@ -1,10 +1,13 @@
 <template>
-    <el-popover placement="bottom-end" :teleported="false" :width="674" trigger="click" popper-style="padding:0;border-radius: 10px;right: 0;">
+    <el-popover placement="bottom-end" :width="674" trigger="click" v-bind:popper-options="popperOptions"
+        popper-style="padding:0;border-radius: 10px;">
         <template #reference>
-            <div class="btn" @click="transmit"></div>
+            <div ref="btn" class="btn" @click="transmit"></div>
         </template>
 
         <div class="transmit-unfold-box">
+            <!-- <div v-if="props['concatType']" class="arrow" style="right: 300px;"></div>
+            <div v-else class="arrow" :style="{ right: type == 'apartment' ? '182px' : '75px' }"></div> -->
             <div class="transmit-item">
                 <div class="transmit-head">转发网页版</div>
                 <div class="transmit-box transmit-webpage-box">
@@ -27,18 +30,52 @@
 </template>
 
 <script setup>
-import { defineProps } from 'vue';
+import { defineProps, nextTick, ref, watch } from 'vue';
 import { copyToClipboard } from '@/utils/util.js'
 import { ElMessage } from 'element-plus'
 
 const props = defineProps({
     title: String,
     qrcode: String,
-    type: String
+    type: String, // housing  housingTop  apartment
+    concatType: Boolean,
 })
 
+const popperOptions = ref({
+    modifiers: [
+        {
+            name: 'offset',
+            options: {
+                offset: [38, 0] // 设置左偏移为20px，右偏移为0px
+            }
+        }
+    ]
+});
+
+watch(() => props.concatType, (newValue, oldValue) => {
+
+    nextTick(() => {
+        if (newValue && props['type'] != 'apartment') popperOptions.value['modifiers'][0]['options']['offset'][0] = 235
+        else if (props['type'] != 'apartment') popperOptions.value['modifiers'][0]['options']['offset'][0] = 38
+        else popperOptions.value['modifiers'][0]['options']['offset'][0] = 14
+    })
+
+});
+
+
+// popperOptions.value['modifiers'][0]['options']['offset'][0] = 235
+
+// popperOptions.value['modifiers'][0]['options']['offset'][0] = 14
+
 let url = location.href
 
+let popover = ref(null)
+let btn = ref(null)
+
+
+setTimeout(() => {
+    console.log(popover, "popover");
+}, 3000)
 
 const copy = () => {
     copyToClipboard(`${props['title']} - ${url}`).then(() => {
@@ -46,18 +83,20 @@ const copy = () => {
     })
 }
 
-
-
 </script>
 
 <style lang="less" scoped>
+.el-popper__arrow {
+    left: 200px;
+}
+
 .btn {
     // background-color: antiquewhite;
-    width: 100%;
+    width: 100px;
-    height: 100%;
+    height: 40px;
     position: absolute;
-    top: 0;
+    // top: 0;
-    left: 0;
+    // left: 0;
 }
 
 .transmit-unfold-box,
@@ -171,4 +210,28 @@ const copy = () => {
     cursor: pointer;
     color: #000;
 }
+
+.arrow {
+    width: 10px;
+    height: 10px;
+    z-index: -1;
+    position: absolute;
+    top: -4px;
+    right: 75px;
+
+    &::before {
+        content: "";
+        border: 1px solid #e4e7ed;
+        border-bottom-color: transparent !important;
+        border-right-color: transparent !important;
+        position: absolute;
+        width: 10px;
+        height: 10px;
+        background-color: #fff;
+        // z-index: -1;
+        transform: rotate(45deg);
+        // background: red;
+        box-sizing: border-box;
+    }
+}
 </style>

src/views/apartmentDetail.vue

@@ -1076,7 +1076,7 @@ const publicJump = path => router.push(path)
                     border: 1px solid rgba(235, 235, 235, 1);
                     color: #333333;
                     margin-right: 10px;
-                    position: relative;
+                    // position: relative;
 
                     .transmit-icon {
                         width: 20px;

src/views/detail.vue

@@ -67,14 +67,14 @@
                                                     </span>
                                                 </div>
                                                 <div class="line" style="margin:0 20px;"></div>
-                                                <div class="dis-f al-item" style="position: relative;">
+                                                <div class="dis-f al-item">
                                                     <img src="../assets/img/detail/forward.png" class="tool-icon" alt="">
                                                     <span>
                                                         转发
                                                     </span>
-                                                    <transmit-btn v-if="housingInfo.data"
+                                                    <transmit-btn v-if="housingInfo.data" :concatType="concatType" 
                                                         :qrcode="housingInfo.data['qrcode']"
-                                                        :title="housingInfo.data.info['subject']"></transmit-btn>
+                                                        :title="housingInfo.data.info['subject']" type="housingTop"></transmit-btn>
                                                 </div>
                                             </div>
                                             <div class="concat-btn-box" :class="{ 'concat-btn-show': concatType }">

src/views/user.vue

@@ -371,7 +371,7 @@ onUnmounted(() => {
 
     .info-box {
         height: 160px;
-        border-bottom: 2px solid #ddeeff;
+        border-bottom: 1px solid #ddeeff;
 
         .info-left {
             padding-left: 40px;