去除 position:fixed 抖动的方法

本文介绍了作者在项目中遇到的Header抖动问题及其解决方案。通过调整CSS属性,特别是使用-webkit-transform:translateZ(0);可以有效解决该问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在做项目的时候发现header莫名抖动,刚开始打开网页没什么问题,多滑动几次触发几次网页中的交互就发现header在蜜汁抖动,寻找一个下午终于发现position:fixed 这个元凶,累到吐血,刚开始我还以为是动画效果或者过度效果对header有影响,万万没想到是这东西。


经过查阅资料,总结出以下几种方法解决:

一.给fiexd加上如下CSS样式:

-webkit-transform: translateZ(0);

二.设置body CSS

 body {height:100%;overflow:auto;margin: 0;}

这种方式可能会影响到页面的整体效果,不建议使用

三.在fiexd内设置position:absolute,如下:

<div style="position:fiexd;bottom:0px;">

  <div style="position:absolute;">

----

</div>

</div>

第一种最为简单快捷,其余几种没有一一验证。

控制按钮在视频上,可是由于设置了position:absolute,导致切换移动端时,按钮直接不见了,如以下代码;<template> <el-carousel class="box" ref="carouselRef"> <el-carousel-item v-for="(videoSrc,index) in videoList" :key="index"> <div class="contain"> <!--目的:按钮始终准确定位在视频区域的右下角,单靠.box无法固定,因为用的不是html的原生组件--> <video class="toy_video" autoplay loop muted playsinline @click=""> <!--playsinline允许网页内联播放--> <source :src="videoSrc" type="video/mp4" /> Your browser does not support the video tag. </video> </div> <!--buy按钮叠加在视频上--> <el-button class="buy" :style="{backgroundImage:`url(${buyImg})`}" ></el-button> </el-carousel-item> </el-carousel> </template> <style scoped lang="scss"> .box{ position: relative; /* 相对定位 */ border-radius: 25px; overflow: hidden; height: 100%; /* 用于调试布局高度 background: rgba(0,0,255,0.1);*/ margin-top: 0; line-height: 0; // 清除行高空隙 font-size: 0; // 防止文本撑开 } .contain{ position: relative; height: 100%; border-radius: 25px; } /* 设置.el-carousel 的每一层样式,用于清楚一些其自带的默认样式 */ ::v-deep .el-carousel { height: 100%; border-radius: 25px; margin: 0 !important; padding: 0 !important; } ::v-deep .el-carousel__container { height: 100%; border-radius: 25px; margin: 0 !important; padding: 0 !important; } ::v-deep .el-carousel__item { height: 100%; border-radius: 25px; margin: 0 !important; padding: 0 !important; line-height: 0; } /* 注意:必须确保整个布局链条上高度是明确传递下来的,否则<el-carousel class="box"> 的高度 不会受到 .left, .videos, .select 中 flex 样式的控制*/ .toy_video{ width: 100%; height: 100%; object-fit: contain; /* 视频覆盖满 */ z-index: 2; margin: 0; padding: 0; display: block; } .buy{ /* 直接写在css里不一定生效 background-image: url('@/assets/buy_new.png');*/ background-size: cover; /* 图片覆盖整个按钮 */ background-position: center; width: 198px; height: 96px; z-index: 6; /*确保按钮在视频上方*/ position: absolute; /* 绝对定位 */ right: 132px; bottom: 65px; /* 无效,因为绝对定位 (position: absolute) 的元素,不再受 margin 的正常流影响 margin-left: 6px; margin-bottom: 6px;*/ /* 用于调试布局高度 */ background: rgba(0,0,255,0.1); // background: rgba(0,0,0,0); // 清除按钮的默认底色:白色 border-radius: 30px; /*background-color: red; 临时测试 */ outline: none; /*去除焦点状态的轮廓线 */ border: none; /*去除按钮默认的边框 */ background-repeat: no-repeat; /* 防止重复 */ } </style>
08-05
<template> <div class="tug-of-war-container"> <!-- 背景图片铺满全屏 --> <img :src="background" class="background-image" alt="背景"/> <!-- 问题图片 --> <div class="question-container"> <img :src='questionImg' class="question-image" alt="图片不存在"/> </div> <el-select v-model="questionValue" placeholder="请选择" class="select-question"> <el-option v-for="item in allQuestions" :key="item.id" :label="item.questionNumber" :value="item.id" @click="handleClick(item)"> </el-option> </el-select> <Edit/> <!-- 移动图片(按比例放大) --> <div class="move-container"> <img :src="character" class="move-image" :style="{ transform: `translateX(${imagePosition}px)` }" alt="移动对象" /> </div> <!-- 选项按钮 --> <div class="options-container"> <button class="option-btn left-option" :disabled="answered" @click="checkAnswer(question.resultLeft,'left')" > {{ question.optionOne }} </button> <button class="option-btn right-option" :disabled="answered" @click="checkAnswer(question.resultRight,'right')" > {{ question.optionTwo }} </button> </div> <!-- 提示图片 --> <transition name="fade"> <img v-show="showCorrectLeft" :src="correctImg" class="feedback-image correct-feedback-left" alt="正确提示" /> </transition> <transition name="fade"> <img v-show="showCorrectRight" :src="correctImg" class="feedback-image correct-feedback-right" alt="正确提示" /> </transition> <transition name="fade"> <img v-show="showIncorrectLeft" :src="incorrectImg" class="feedback-image incorrect-feedback-left" alt="错误提示" /> </transition> <transition name="fade"> <img v-show="showIncorrectRight" :src="incorrectImg" class="feedback-image incorrect-feedback-right" alt="错误提示" /> </transition> </div> </template> <script setup lang="ts"> import {onMounted, onUnmounted, ref} from 'vue'; import {getQuestionAll, getQuestionImg} from '@/api/modules/tug.of.war' import Edit from './Edit.vue'; // 导入所有需要的图片 import questionImgOld from '@/image/1.jpg'; import background from '@/image/background.jpg' import character from '@/image/character.png' import correctImg from '@/image/correct.png'; import incorrectImg from '@/image/incorrect.png'; import {TugOfWar} from "@/types/api/tugOfWar"; // 定义选项 const questionImg = ref<string>(); questionImg.value = questionImgOld // 定义奖项配置 const question = ref( {optionOne: "", optionTwo: "", resultLeft: 1, resultRight: 0} ) //所有问题 const allQuestions = ref<TugOfWar[]>([]); const questionValue = ref<string>(); // 图片位置状态 const imagePosition = ref<number>(0); const initialPosition = ref<number>(0); // 答题状态 const answered = ref<boolean>(false); const showCorrectLeft = ref<boolean>(false); const showCorrectRight = ref<boolean>(false); const showIncorrectLeft = ref<boolean>(false); const showIncorrectRight = ref<boolean>(false); // 检查答案 const checkAnswer = (optionIndex: number, direction: String) => { if (answered.value) return; answered.value = true; if (optionIndex === 1) { if ("left" === direction) { showCorrectLeft.value = true; // 向左移动图片 imagePosition.value = -250; } if ("right" === direction) { showCorrectRight.value = true; imagePosition.value = 250; } } if (optionIndex === 0) { if ("left" === direction) { showIncorrectLeft.value = true; // 向右移动图片 imagePosition.value = 250; } if ("right" === direction) { showIncorrectRight.value = true; imagePosition.value = -250; } } // 3秒后重置状态 setTimeout(resetGame, 3000); }; // 重置游戏状态 const resetGame = () => { answered.value = false; showCorrectLeft.value = false; showCorrectRight.value = false; showIncorrectLeft.value = false; showIncorrectRight.value = false; imagePosition.value = 0; }; // 响应式调整布局 const handleResize = () => { // 在实际应用中,这里可以添加响应式布局调整逻辑 }; // 定义响应类型 interface ApiResponse { data: ArrayBuffer headers: { 'content-type': "image/jpeg" } } const handleClick = async (questionOne: TugOfWar) => { try { console.log(questionOne.id); const response = await getQuestionImg({id: questionOne.id}); console.log(response); // 转换为 Blob(指定 MIME 类型) const blob = new Blob([response], {type: "image/jpeg"}); console.log(blob); // 创建 Blob 对象 // 创建临时 URL questionImg.value = URL.createObjectURL(blob); // 生成临时 URL } catch (error) { console.error('Error loading image:', error) // 可以在此处添加错误处理逻辑 questionImg.value = questionImgOld } question.value.optionOne = questionOne.optionOne; question.value.optionTwo = questionOne.optionTwo; question.value.resultRight = questionOne.resultRight question.value.resultLeft = questionOne.resultLeft } onMounted(async () => { window.addEventListener('resize', handleResize); allQuestions.value = await getQuestionAll() console.log(allQuestions.value) }); onUnmounted(() => { window.removeEventListener('resize', handleResize); }); </script> <style scoped> /* 基础样式重置 */ * { margin: 0; padding: 0; box-sizing: border-box; } .tug-of-war-container { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c); } /* 背景图片铺满全屏 */ .background-image { position: absolute; top: 0; left: 56px; width: 93%; height: 100%; object-fit: cover; z-index: 1; opacity: 0.8; } /* 问题容器 */ .question-container { position: relative; z-index: 2; display: flex; justify-content: center; padding-top: 0px; } .question-image { width: 80%; max-width: 400px; height: 180px; object-fit: contain; border: 4px solid #ffd700; border-radius: 15px; background: rgba(255, 255, 255, 0.9); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5); } /* 移动图片容器 */ .move-container { position: relative; z-index: 3; display: flex; left: 52px; justify-content: center; align-items: center; height: 300px; margin: 20px 0; } .move-image { width: 1200px; /* 放大移动图片 */ height: 1200px; object-fit: contain; transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.5)); z-index: 4; } /* 选项按钮容器 */ .options-container { position: relative; z-index: 5; display: flex; justify-content: space-between; padding: 0 30%; margin-bottom: 30px; } .option-btn { padding: 20px 50px; font-size: 24px; font-weight: bold; border: none; border-radius: 60px; cursor: pointer; transition: all 0.4s ease; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); position: relative; overflow: hidden; z-index: 6; } .left-option { background: linear-gradient(145deg, #ff416c, #ff4b2b); color: white; } .right-option { background: linear-gradient(145deg, #38ef7d, #11998e); color: white; } .option-btn:hover:not(:disabled) { transform: translateY(-8px) scale(1.05); box-shadow: 0 12px 25px rgba(0, 0, 0, 0.4); } .option-btn:active:not(:disabled) { transform: translateY(2px); } .option-btn:disabled { opacity: 0.7; cursor: not-allowed; } /* 添加发光效果 */ .option-btn::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.1); border-radius: 60px; transform: scale(0); transition: transform 0.5s ease; } .option-btn:hover:not(:disabled)::after { transform: scale(1.5); opacity: 0; } /* 反馈图片样式 */ .feedback-image { position: absolute; transform: translate(-50%, -50%); width: 250px; height: 250px; object-fit: contain; z-index: 10; } .correct-feedback-left { top: 85%; left: 20%; animation: popIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .correct-feedback-right { top: 85%; left: 80%; animation: popIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .incorrect-feedback-left { top: 85%; left: 20%; animation: shake 0.8s cubic-bezier(0.36, 0.07, 0.19, 0.97); } .incorrect-feedback-right { top: 85%; left: 80%; animation: shake 0.8s cubic-bezier(0.36, 0.07, 0.19, 0.97); } /* 动画效果 */ @keyframes popIn { 0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; } 70% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1); } } @keyframes shake { 0%, 100% { transform: translate(-50%, -50%); } 10%, 30%, 50%, 70%, 90% { transform: translate(-52%, -50%); } 20%, 40%, 60%, 80% { transform: translate(-48%, -50%); } } .fade-enter-active, .fade-leave-active { transition: opacity 0.5s; } .fade-enter-from, .fade-leave-to { opacity: 0; } /* 响应式设计 */ @media (max-width: 768px) { .question-image { width: 90%; height: 150px; } .move-image { width: 120px; height: 120px; } .option-btn { padding: 15px 30px; font-size: 18px; } } @media (max-width: 480px) { .question-container { padding-top: 20px; } .question-image { height: 120px; } .move-image { width: 100px; height: 100px; } .option-btn { padding: 12px 25px; font-size: 16px; } .feedback-image { width: 180px; height: 180px; } .example-showcase .el-dropdown + .el-dropdown { margin-left: 15px; } .example-showcase .el-dropdown-link { cursor: pointer; color: var(--el-color-primary); display: flex; align-items: center; } } .select-question{ width: 100px; padding-left: 0px; } </style> 调整合适的比例放在一个页面上展示
最新发布
08-14
<template> <view class="webview-container"> <cover-view class="webview-wrapper"> <web-view :src="webviewPath" id="targetWebview" allow-same-origin sandbox="allow-same-origin allow-scripts" ref="webviewRef"></web-view> </cover-view> <cover-view class="bottom-action-area"> <cover-view class="capture-btn" @click="captureWebview"> <cover-view class="btn-text">立即取证</cover-view> </cover-view> </cover-view> <!-- 预览组件 --> <cover-view v-if="showPreview" class="custom-preview"> <cover-view class="preview-header"> <cover-view class="title-container"> <cover-view class="preview-title">预览界面</cover-view> </cover-view> </cover-view> <cover-image :src="screenshotPath" class="preview-image" mode="aspectFit" @error="handleImageError" ></cover-image > <cover-view class="action-buttons"> <cover-view class="action-btn cancel-btn" @click="handleAction('放弃')">放弃</cover-view> <cover-view class="action-btn confirm-btn" @click="handleAction('固化')">固化</cover-view> </cover-view> <cover-view> </cover-view> </cover-view> </view> </template> <script setup lang="ts" > import { onLoad, onReady } from '@dcloudio/uni-app'; import html2canvas from 'html2canvas'; import { nextTick, ref } from 'vue'; declare const plus: any; const webviewPath = ref(''); const ws = ref<any>(null); const screenshotPath = ref(''); const showPreview = ref(false); const platform = ref(''); const originalWebviewHeight = ref('auto'); const screenshotFilePath = ref(''); const screenshot = ref(''); const iframeLoaded = ref(false); onLoad((options: any) => { if (options.url) { webviewPath.value = decodeURIComponent(options.url); } // 获取当前平台 const systemInfo = uni.getSystemInfoSync(); platform.value = systemInfo.platform; }); onReady(() => { // #ifdef APP-PLUS const pages = getCurrentPages(); const currentPage = pages[pages.length - 1]; const currentWebview = currentPage.$getAppWebview(); setTimeout(() => { if (currentWebview.children().length > 0) { const wv = currentWebview.children()[0]; ws.value = wv; // originalWebviewHeight.value = wv.getStyle().height || 'auto'; wv.setStyle({ height: 'auto' }); } }, 1000); // #endif // #ifdef H5 const iframe = document.getElementById('targetWebview'); console.log(iframe) if (!iframe) { console.warn('未找到 iframe 元素'); return; } // 设置加载监听 // #endif }); const captureWebview = async () => { uni.showLoading({ title: '正在取证中' }) // #ifdef APP-PLUS if (!ws.value) { uni.showToast({ title: '网页未加载完成', icon: 'none' }); return; } const bitmap = new plus.nativeObj.Bitmap('screenshot') const rand = Math.floor(Math.random() * 10000) const saveUrl = '_doc/' + rand + 'order.jpg' // 绘制页面截图 ws.value.draw(bitmap, () => { // 保存图片 bitmap.save( saveUrl, { format: 'jpg', quality: 90 }, (res:any) => { // 将本地路径转换为可以展示的路径 const previewPath = plus.io.convertLocalFileSystemURL(res.target) screenshotPath.value = previewPath screenshotFilePath.value = res.target; // 保存文件路径 console.log('截图保存成功,预览路径:', previewPath) // 延迟展示,确保加载完成 setTimeout(() => { showPreview.value = true uni.hideLoading() }, 300) bitmap.clear() // 清理 bitmap 占用资源 }, (err:any) => { console.error('保存失败:', err) uni.hideLoading() uni.showToast({ title: '保存失败: ' + err.message, icon: 'none', }) bitmap.clear() } ) }, (err:any) => { console.error('截图失败:', err) uni.showToast({ title: '截图失败: ' + err.message, icon: 'none', }) uni.hideLoading() }) // #endif // #ifdef H5 const iframe = document.querySelector<HTMLIFrameElement>('#targetWebview'); console.log(iframe) if (!iframe) { throw new Error("未找到 iframe 元素"); } if (iframe.contentDocument.readyState !== 'complete') { uni.showToast({ title: '网页未加载完成', icon: 'none' }); uni.hideLoading(); return; } const iframeDoc = iframe.contentDocument || iframe.contentWindow.document; console.log(iframeDoc) const height = Math.max( iframeDoc.body.scrollHeight, iframeDoc.documentElement.scrollHeight, iframeDoc.body.offsetHeight, iframeDoc.documentElement.offsetHeight, iframeDoc.body.clientHeight, iframeDoc.documentElement.clientHeight ); html2canvas(iframeDoc.body, { width: iframe.scrollWidth, // 使用滚动宽度 height: iframe.scrollHeight, // 使用滚动高度 scrollX: -iframe.scrollLeft, // 修正滚动偏移 scrollY: -iframe.scrollTop, // 修正滚动偏移 useCORS: true, // 启用跨域支持 allowTaint: true, // 允许污染画布 logging: true, // 开启调试日志 backgroundColor: null }).then((canvas)=>{ let base64 = canvas.toDataURL('image/png'); screenshotPath.value = base64; // console.log(screenshotPath.value) // 这里就按照chrome等新版浏览器来处理 // const a = document.createElement('a'); // a.href = base64; // a.setAttribute('download', 'pigeons-download'); // a.click(); setTimeout(() => { showPreview.value = true uni.hideLoading() }, 300) }).catch((err)=>{ console.error('截屏失败:', err); uni.showToast({ title: '截屏失败,请重试', icon: 'none' }); uni.hideLoading(); }) // #endif } const closePreview = () => { showPreview.value = false; } //上传 const uploadEvidence = () => { // #ifdef APP-PLUS // APP环境上传 plus.io.resolveLocalFileSystemURL(screenshotFilePath.value, (entry:any) => { console.log('文件存在,开始上传:', entry.name); // 继续执行上传逻辑 uni.showLoading({ title: '上传证据中...', mask: true }); // 获取文件系统路径 const filePath = entry.toLocalURL(); uni.uploadFile({ url: 'http://192.168.1.80:1592/api/upload', filePath: filePath, name: 'file', type: 'image', formData: { 'timestamp': Date.now() }, success: (uploadRes) => { uni.hideLoading(); try { const data = JSON.parse(uploadRes.data); if (data.success) { uni.showToast({ title: '证据上传成功', icon: 'none' }) } else { uni.showToast({ title: '上传失败', icon: 'none' }) console.log('上传失败') } } catch (e) { uni.showToast({ title: '解析响应失败', icon: 'none' }) } // 3秒后关闭状态提示 setTimeout(() => { closePreview(); }, 3000); }, fail: (err) => { uni.hideLoading(); console.error('上传错误详情:', err); uni.showToast({ title: '网络错误'+ err.errMsg, icon: 'none' }) setTimeout(() => { }, 3000); } }); }, (err:any) => { console.error('文件不存在或路径错误:', err); uni.showToast({ title: '文件路径无效', icon: 'none' }); } ); uni.showLoading({ title: '上传证据中...', mask: true }); // #endif // #ifdef APP-H5 // H5环境上传 // if (!screenshotFilePath.value) { // uni.hideLoading(); // uni.showToast({ title: '文件路径无效', icon: 'none' }); // return; // } // 获取文件对象 // fetch(screenshotFilePath.value) // .then(res => res.blob()) // .then(blob => { // const formData = new FormData(); // formData.append('evidence', blob, `evidence-${Date.now()}.jpg`); // formData.append('timestamp', Date.now().toString()); // return fetch('http://192.168.1.80:1592/api/upload', { // method: 'POST', // body: formData // }); // }) // .then(response => response.json()) // .then(data => { // uni.hideLoading(); // if (data.success) { // uni.showToast({ title: '证据上传成功', icon: 'none' }); // } else { // uni.showToast({ title: '上传失败'+ data.message, icon: 'none' }); // } // setTimeout(() => { // closePreview(); // }, 3000); // }) // .catch(err => { // uni.hideLoading(); // uni.showToast({ title: '上传失败'+ err.message, icon: 'none' }) // setTimeout(() => { // }, 3000); // }); // #endif } const handleAction = (action: string) => { switch(action) { case '放弃': closePreview(); break; case '固化': // #ifdef APP-PLUS uni.saveImageToPhotosAlbum({ filePath: screenshotPath.value, success: () => { uni.showToast({ title: '证据已固化保存' }); // 调用上传函数 uploadEvidence(); }, fail: (err) => { uni.showToast({ title: '保存失败: ' + err.errMsg, icon: 'none' }); } }); // #endif // #ifdef APP-H5 // #endif break; } } const handleImageError = (e: any) => { console.error('图片加载错误:', e); uni.showToast({ title: '图片加载错误', icon: 'none' }); } </script> <style> .web-view { height: 100% !important; width: 100% !important; display: block !important; } .webview-container { position: relative; width: 100%; height: 100vh; overflow: hidden; } .webview-wrapper { height: calc(100vh - 120rpx); width: auto !important; overflow: visible !important; } .bottom-action-area { position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; background-color: #007aff; padding: 30rpx; padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); display: flex; justify-content: center; align-items: center; } .capture-btn { width: 100%; height: 90rpx; background-color: #007aff; border-radius: 45rpx; box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.2); display: flex; align-items: center; justify-content: center; } .btn-text { color: #ffffff; font-size: 32rpx; font-weight: 500; } /* 优化预览组件 */ .custom-preview { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; background-color: rgba(0, 0, 0, 0.9); display: flex; flex-direction: column; /* 垂直排列子元素 */ align-items: center; /* 关键修改:去掉顶部内边距,只保留底部内边距 */ padding: 0 0 40rpx 0; box-sizing: border-box; } .preview-header { width: 100%; height: 250rpx; /* 增加高度 */ background-color: #007aff; color: #ffffff; font-size: 34rpx; /* 增大字体 */ font-weight: bold; display: flex; align-items: center; justify-content: center; /* 添加圆角效果 */ border-top-left-radius: 16rpx; border-top-right-radius: 16rpx; } .preview-title { color: #ffffff; /* 白色字体 */ font-size: 28rpx; /* 字体大小适配40rpx高度 */ font-weight: bold; line-height: 40rpx; /* 与容器高度一致,实现垂直居中 */ width: 100%; text-align: center; } .preview-image { width: 100%; height: 100%; object-fit: contain; border: 1rpx solid rgba(255, 255, 255, 0.1); border-radius: 8rpx; background-color: #f5f5f5; box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.3); } .action-buttons { display: flex; width: 100%; /* 充满整个宽度 */ justify-content: space-between; padding: 30rpx 5%; /* 左右留5%间隙,上下30rpx内边距扩展背景区域 */ margin-top: auto; /* 借助flex布局推到最底部 */ background-color: #353336; /* 底部模块背景色 */ box-sizing: border-box; /* 确保padding不影响宽度计算 */ } .action-btn { flex: 1; height: 90rpx; border-radius: 12rpx; display: flex; align-items: center; justify-content: center; padding: 0; margin: 0 15rpx; border: none; color: #ffffff; /* 文字色适配深色背景 */ font-size: 34rpx; font-weight: 500; line-height: 1; } .cancel-btn { color: #ffffff; /* 文字颜色 */ font-size: 34rpx; font-weight: 500; /* 确保文字本身无偏移 */ line-height: 1; /* 清除行高影响 */ text-align: center; /* 辅助居中(冗余保障) */ background-color: #353336; } .confirm-btn { color: #ffffff; /* 文字颜色 */ font-size: 34rpx; font-weight: 500; /* 确保文字本身无偏移 */ line-height: 1; /* 清除行高影响 */ text-align: center; /* 辅助居中(冗余保障) */ background-color: #353336; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .bottom-action-img{ position: fixed; top: 100; left: 0; right: 0; z-index: 100; background-color: #007aff; padding: 30rpx; display: flex; justify-content: center; align-items: center; } .action-img{ width: 100%; height: 90rpx; background-color: #007aff; display: flex; } </style> 怎样将app内截图截取可视改为全部内容
08-07
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值