This commit is contained in:
A1300399510 2023-08-03 17:25:16 +08:00
parent 80f047fe9d
commit d64eec5ea4
6 changed files with 83 additions and 20 deletions

View File

@ -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>

View File

@ -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);
// -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);
// 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);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);
margin-bottom: 33px;
.QRcode-img {
width: 110px;
width: 120px;
// height: 110px;
}
}

View File

@ -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] // 20px0px
}
}
]
});
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%;
height: 100%;
width: 100px;
height: 40px;
position: absolute;
top: 0;
left: 0;
// top: 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>

View File

@ -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;

View File

@ -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 }">

View File

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