|
|
@@ -237,34 +237,35 @@ export default {
|
|
|
this.canvasImageUrl = imageUrl;
|
|
|
|
|
|
// 图片加载完成后设置滚动容器高度
|
|
|
- const img = new Image();
|
|
|
- img.onload = () => {
|
|
|
- const scrollContainer = this.$refs.html2canvas.querySelector('.scroll-container');
|
|
|
- // 根据图片实际高度设置容器高度(增加20px缓冲)
|
|
|
- // 根据设备像素比调整图片高度
|
|
|
- // 使用实际渲染高度而非原始图片高度
|
|
|
- const imgHeight = img.offsetHeight + 20;
|
|
|
- // 设置容器最小高度保证内容显示,同时允许自动扩展
|
|
|
- scrollContainer.style.minHeight = `${imgHeight}px`;
|
|
|
- // 保持父容器为可见滚动
|
|
|
- scrollContainer.parentElement.style.overflow = 'visible';
|
|
|
- // 强制浏览器重排
|
|
|
- // scrollContainer.style.display = 'none';
|
|
|
- // scrollContainer.offsetHeight; // 触发重排
|
|
|
- // scrollContainer.style.display = 'block';
|
|
|
+ // const img = new Image();
|
|
|
+ // img.onload = () => {
|
|
|
+ // const scrollContainer = this.$refs.html2canvas.querySelector('.scroll-container');
|
|
|
+ // // 根据图片实际高度设置容器高度(增加20px缓冲)
|
|
|
+ // // 根据设备像素比调整图片高度
|
|
|
+ // // 使用实际渲染高度而非原始图片高度
|
|
|
+ // const imgHeight = img.offsetHeight + 20;
|
|
|
+ // // 设置容器最小高度保证内容显示,同时允许自动扩展
|
|
|
+ // scrollContainer.style.minHeight = `${imgHeight}px`;
|
|
|
+ // // 保持父容器为可见滚动
|
|
|
+ // scrollContainer.parentElement.style.overflow = 'visible';
|
|
|
+ // // 强制浏览器重排
|
|
|
+ // scrollContainer.style.display = 'none';
|
|
|
+ // scrollContainer.offsetHeight; // 触发重排
|
|
|
+ // scrollContainer.style.display = 'block';
|
|
|
|
|
|
- // 添加移动端滚动优化
|
|
|
- // requestAnimationFrame(() => {
|
|
|
- // scrollContainer.style.overflow = 'auto';
|
|
|
- // scrollContainer.style.overflowScrolling = 'touch';
|
|
|
- // scrollContainer.style.webkitOverflowScrolling = 'touch';
|
|
|
- // scrollContainer.style.overscrollBehavior = 'contain';
|
|
|
- // scrollContainer.style.touchAction = 'pan-y';
|
|
|
- // });
|
|
|
- };
|
|
|
- img.src = imageUrl;
|
|
|
+ // // 添加移动端滚动优化
|
|
|
+ // requestAnimationFrame(() => {
|
|
|
+ // scrollContainer.style.overflow = 'auto';
|
|
|
+ // scrollContainer.style.overflowScrolling = 'touch';
|
|
|
+ // scrollContainer.style.webkitOverflowScrolling = 'touch';
|
|
|
+ // scrollContainer.style.overscrollBehavior = 'contain';
|
|
|
+ // scrollContainer.style.touchAction = 'pan-y';
|
|
|
+ // });
|
|
|
+ // };
|
|
|
+ // img.src = imageUrl;
|
|
|
this.zIndex = 9;
|
|
|
this.$emit('setShareImg', true);
|
|
|
+ this.$emit('setDailyDetailsBox', false);
|
|
|
})
|
|
|
.catch((error) => {
|
|
|
this.toastLoading().clear();
|
|
|
@@ -274,14 +275,14 @@ export default {
|
|
|
},
|
|
|
creatQrCode() {
|
|
|
// let proText = 'https://suishenbang.nipponpaint.com.cn';
|
|
|
- let path = '/dailyHistoricalDetails&source=share&reportId=' + this.reportId || '';
|
|
|
+ let path = 'http://1.npz.cn/2/' + this.reportId || '';
|
|
|
var qrcode = new QRCode(this.$refs.QRcodes, {
|
|
|
- text: process.env.VUE_APP_SSB_LINK + '/homeIndex?path=' + path,
|
|
|
+ text: path,
|
|
|
colorDark: '#000000',
|
|
|
colorLight: 'rgba(255,255,255,0)', // 完全透明背景
|
|
|
correctLevel: QRCode.CorrectLevel.H,
|
|
|
- width: 140, // 固定尺寸保证安卓一致性
|
|
|
- height: 140,
|
|
|
+ width: 100, // 固定尺寸保证安卓一致性
|
|
|
+ height: 100,
|
|
|
margin: 2,
|
|
|
render: 'canvas',
|
|
|
onRenderingEnd: () => {
|
|
|
@@ -309,6 +310,7 @@ export default {
|
|
|
closeShare() {
|
|
|
this.canvasImageUrl = '';
|
|
|
this.$emit('setShareImg', false);
|
|
|
+ this.$emit('setDailyDetailsBox', true);
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
@@ -548,21 +550,24 @@ export default {
|
|
|
<style lang="scss">
|
|
|
.share {
|
|
|
.QRcodes {
|
|
|
- width: 140px; /* 固定像素尺寸 */
|
|
|
- height: 140px;
|
|
|
+ width: 104px; /* 固定像素尺寸 */
|
|
|
+ height: 104px;
|
|
|
margin-right: 12px;
|
|
|
position: relative;
|
|
|
background: #ffffff;
|
|
|
image-rendering: crisp-edges;
|
|
|
image-rendering: -webkit-optimize-contrast; /* 安卓浏览器兼容 */
|
|
|
// padding: 2px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
.logo {
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
left: 50%;
|
|
|
transform: translate(-50%, -50%);
|
|
|
- width: 40px;
|
|
|
- height: 40px;
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
img {
|
|
|
width: 100% !important;
|
|
|
height: 100% !important;
|