114 lines
2.4 KiB
Vue
114 lines
2.4 KiB
Vue
|
<template>
|
||
|
|
<view class="view-page">
|
||
|
|
<view class="image">
|
||
|
|
<img src="/static/image/task/rule.png" alt="" />
|
||
|
|
</view>
|
||
|
|
<view class="dec-view" style="background-color: transparent !important;">
|
||
|
|
<web-view :style="{ backgroundColor: 'transparent' }" :webview-styles="webviewStyles"
|
||
|
|
:src="`${httpUrl}/api/Page/page_show?id=17`"></web-view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import config from '@/until/config.js';
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
httpUrl: null,
|
||
|
|
// 关键配置：设置 WebView 样式
|
||
|
|
webviewStyles: {
|
||
|
|
progress: {
|
||
|
|
color: 'transparent' // 隐藏进度条
|
||
|
|
},
|
||
|
|
// 安卓专用配置
|
||
|
|
android: {
|
||
|
|
hardwareAccelerated: true, // 开启硬件加速
|
||
|
|
backgroundColor: 'transparent'
|
||
|
|
},
|
||
|
|
// iOS 专用配置
|
||
|
|
ios: {
|
||
|
|
allowsInlineMediaPlayback: true,
|
||
|
|
backgroundColor: 'transparent'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad() {
|
||
|
|
this.httpUrl = config.BASE_URL
|
||
|
|
},
|
||
|
|
onReady() {
|
||
|
|
|
||
|
|
// #ifdef APP-PLUS
|
||
|
|
// 获取 WebView 实例进行原生设置
|
||
|
|
const pages = getCurrentPages();
|
||
|
|
const page = pages[pages.length - 1];
|
||
|
|
const currentWebview = page.$getAppWebview();
|
||
|
|
|
||
|
|
setTimeout(() => {
|
||
|
|
const webview = currentWebview.children()[0];
|
||
|
|
|
||
|
|
// 安卓原生设置
|
||
|
|
// #ifdef APP-ANDROID
|
||
|
|
webview.setStyle({
|
||
|
|
background: 'transparent'
|
||
|
|
});
|
||
|
|
// #endif
|
||
|
|
|
||
|
|
// iOS 原生设置
|
||
|
|
// #ifdef APP-IOS
|
||
|
|
webview.setStyle({
|
||
|
|
opaque: false
|
||
|
|
});
|
||
|
|
// #endif
|
||
|
|
}, 300); // 延迟确保 WebView 加载完成
|
||
|
|
// #endif
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
::-webkit-scrollbar {
|
||
|
|
display: none !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 重要：设置页面背景透明 */
|
||
|
|
page {
|
||
|
|
background-color: transparent !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 隐藏 WebView 默认容器背景 */
|
||
|
|
uni-web-view>div {
|
||
|
|
background-color: transparent !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.view-page {
|
||
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
|
|
min-width: calc(100% - 40rpx);
|
||
|
|
padding: 0 20rpx;
|
||
|
|
height: 100vh;
|
||
|
|
overflow: hidden;
|
||
|
|
background-color: transparent !important;
|
||
|
|
margin: 0 auto;
|
||
|
|
position: relative;
|
||
|
|
|
||
|
|
.image {
|
||
|
|
width: calc(100% - 40rpx);
|
||
|
|
// min-height: 100vh;
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 20rpx;
|
||
|
|
right: 20rpx;
|
||
|
|
// bottom: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dec-view {
|
||
|
|
width: calc(100% - 40rpx - 48rpx);
|
||
|
|
min-height: calc(60% - 48rpx);
|
||
|
|
position: absolute;
|
||
|
|
top: 33%;
|
||
|
|
border-radius: 16rpx;
|
||
|
|
padding: 24rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|