提交
This commit is contained in:
parent
80f047fe9d
commit
d64eec5ea4
@ -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>
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
@ -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%;
|
||||
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>
|
@ -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;
|
||||
|
@ -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 }">
|
||||
|
@ -371,7 +371,7 @@ onUnmounted(() => {
|
||||
|
||||
.info-box {
|
||||
height: 160px;
|
||||
border-bottom: 2px solid #ddeeff;
|
||||
border-bottom: 1px solid #ddeeff;
|
||||
|
||||
.info-left {
|
||||
padding-left: 40px;
|
||||
|
Loading…
x
Reference in New Issue
Block a user