feat: 添加components-diy\diy-webview.vue
This commit is contained in:
499
components-diy/diy-webview.vue
Normal file
499
components-diy/diy-webview.vue
Normal file
@@ -0,0 +1,499 @@
|
|||||||
|
<template>
|
||||||
|
<view data-component-name="diy-webview" class="diy-webview" :style="containerStyle" @tap="handleTap">
|
||||||
|
<template v-if="src">
|
||||||
|
<!-- #ifdef H5 -->
|
||||||
|
<iframe
|
||||||
|
v-if="!lazyPending"
|
||||||
|
class="diy-webview-iframe"
|
||||||
|
:src="src"
|
||||||
|
:scrolling="scrollMode"
|
||||||
|
referrerpolicy="no-referrer"
|
||||||
|
frameborder="0"
|
||||||
|
allow="fullscreen"
|
||||||
|
loading="lazy"
|
||||||
|
@load="handleIframeLoad"
|
||||||
|
@error="handleIframeError"
|
||||||
|
></iframe>
|
||||||
|
<!-- 后台配置的占位图 / 懒加载未进入视口时的展示 -->
|
||||||
|
<image
|
||||||
|
v-if="placeholderUrl && (lazyPending || !loaded)"
|
||||||
|
class="diy-webview-placeholder"
|
||||||
|
:src="placeholderUrl"
|
||||||
|
mode="aspectFill"
|
||||||
|
></image>
|
||||||
|
<!-- 加载中遮罩：iframe 触发 load 前展示，避免白屏观感 -->
|
||||||
|
<view v-if="!loaded && !loadError && !lazyPending" class="webview-loading" :style="errorStyle">
|
||||||
|
<view class="webview-loading-spinner"></view>
|
||||||
|
<text class="webview-loading-text">网页加载中...</text>
|
||||||
|
</view>
|
||||||
|
<!-- H5 下 iframe 内部点击不会冒泡到父容器，提供角标按钮保证"点击跳转"可用 -->
|
||||||
|
<view class="webview-open-chip" @tap.stop="mpGo">
|
||||||
|
<text class="iconfont icon-fuzhilianjie"></text>
|
||||||
|
<text class="webview-open-chip-text">{{ mpGoText }}</text>
|
||||||
|
</view>
|
||||||
|
<!-- #endif -->
|
||||||
|
|
||||||
|
<!-- #ifndef H5 -->
|
||||||
|
<!-- 小程序/APP：内嵌 web-view 会整页覆盖原生层，改为卡片展示 + 点击跳转 -->
|
||||||
|
<view class='webview-mp-go' :style='mpGoStyle' @tap.stop='mpGo'>
|
||||||
|
<text class='iconfont icon-fuzhilianjie'></text>
|
||||||
|
<text class='webview-mp-go-text'>{{ mpGoText }}</text>
|
||||||
|
</view>
|
||||||
|
<!-- #endif -->
|
||||||
|
|
||||||
|
<!-- 加载失败兜底（如目标站禁止被嵌入/内核过旧加载失败）：可点击直接打开 -->
|
||||||
|
<view v-if="loadError" class="webview-error" :style="errorStyle" @tap.stop="mpGo">
|
||||||
|
<text class="iconfont icon-fuzhilianjie"></text>
|
||||||
|
<text class="error-text">{{ errorText }}</text>
|
||||||
|
<text class="error-open">点击此处打开网页</text>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<view v-else class="webview-empty" :style="emptyStyle">
|
||||||
|
<text class="iconfont icon-fuzhilianjie"></text>
|
||||||
|
<text class="empty-text">请配置网页链接</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// 网页/WebView 组件：后台配置 URL 后嵌入展示，H5 使用 iframe，小程序/APP 使用原生 web-view
|
||||||
|
import DiyMinx from './minx.js'
|
||||||
|
export default {
|
||||||
|
name: 'diy-webview',
|
||||||
|
props: {
|
||||||
|
value: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
src: '',
|
||||||
|
loaded: false,
|
||||||
|
loadError: false,
|
||||||
|
// 后台开启"懒加载"时，iframe 需等容器滚动进入视口后才真正渲染
|
||||||
|
lazyPending: false
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mixins: [DiyMinx],
|
||||||
|
created() {
|
||||||
|
this.initWebview();
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this._mountedFlag = true;
|
||||||
|
// #ifdef H5
|
||||||
|
if (this.lazyPending) this._setupLazyObserver();
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
if (this._observer) {
|
||||||
|
try { this._observer.disconnect(); } catch (e) {}
|
||||||
|
this._observer = null;
|
||||||
|
}
|
||||||
|
this._clearLoadTimer();
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
value: {
|
||||||
|
immediate: true,
|
||||||
|
deep: true,
|
||||||
|
handler(newVal) {
|
||||||
|
if (newVal) {
|
||||||
|
this.initWebview();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
containerStyle() {
|
||||||
|
let style = '';
|
||||||
|
// 后台高度为 px 值，与项目其他组件一致 ×2 转 rpx（diy-horz-blank 同款换算）
|
||||||
|
const height = Number(this.value?.height) || 300;
|
||||||
|
style += `height:${height * 2}rpx;`;
|
||||||
|
// 组件角度 round 时按后台圆角值渲染（×2 rpx）
|
||||||
|
if (this.value?.componentAngle === 'round') {
|
||||||
|
const topR = Number(this.value?.topAroundRadius) || 0;
|
||||||
|
const bottomR = Number(this.value?.bottomAroundRadius) || 0;
|
||||||
|
style += `border-radius:${topR * 2}rpx ${topR * 2}rpx ${bottomR * 2}rpx ${bottomR * 2}rpx;`;
|
||||||
|
}
|
||||||
|
if (this.value?.bgColor) {
|
||||||
|
style += `background:${this.value.bgColor};`;
|
||||||
|
}
|
||||||
|
if (this.value?.marginTop) {
|
||||||
|
style += `margin-top:${this.value.marginTop}rpx;`;
|
||||||
|
}
|
||||||
|
if (this.value?.marginBottom) {
|
||||||
|
style += `margin-bottom:${this.value.marginBottom}rpx;`;
|
||||||
|
}
|
||||||
|
if (this.value?.padding) {
|
||||||
|
style += `padding:${this.value.padding}rpx;`;
|
||||||
|
}
|
||||||
|
return style;
|
||||||
|
},
|
||||||
|
emptyStyle() {
|
||||||
|
let style = '';
|
||||||
|
if (this.value?.bgColor) {
|
||||||
|
style += `background:${this.value.bgColor};`;
|
||||||
|
}
|
||||||
|
return style;
|
||||||
|
},
|
||||||
|
errorStyle() {
|
||||||
|
let style = '';
|
||||||
|
if (this.value?.bgColor) {
|
||||||
|
style += `background:${this.value.bgColor};`;
|
||||||
|
}
|
||||||
|
return style;
|
||||||
|
},
|
||||||
|
mpGoText() {
|
||||||
|
// 注意：this.$lang(key) 在 key 不存在时返回 key 字符串本身，不能仅靠 this.$lang 是否存在判断。
|
||||||
|
// 取到 key 与传入 key 不同才视为命中语言包，否则用 fallback。
|
||||||
|
const t = this.$lang && this.$lang('components-diy.diy-webview.mpGo');
|
||||||
|
return (t && t !== 'components-diy.diy-webview.mpGo') ? t : '点击查看网页内容';
|
||||||
|
},
|
||||||
|
mpGoStyle() {
|
||||||
|
let style = '';
|
||||||
|
if (this.value && this.value.bgColor) {
|
||||||
|
style += 'background:' + this.value.bgColor + ';';
|
||||||
|
}
|
||||||
|
return style;
|
||||||
|
},
|
||||||
|
errorText() {
|
||||||
|
const t = this.$lang && this.$lang('components-diy.diy-webview.loadError');
|
||||||
|
return (t && t !== 'components-diy.diy-webview.loadError') ? t : '网页加载失败，请检查链接';
|
||||||
|
},
|
||||||
|
// iframe 滚动条开关（后台"滚动"配置：true 显示 / false 隐藏）
|
||||||
|
scrollMode() {
|
||||||
|
const s = this.value?.scrolling;
|
||||||
|
return (s === false || s === 'false' || s === 0) ? 'no' : 'yes';
|
||||||
|
},
|
||||||
|
// 占位图（后台 imageUrl，iframe 加载完成前展示）
|
||||||
|
placeholderUrl() {
|
||||||
|
const url = this.value?.imageUrl;
|
||||||
|
return url ? (this.$util.img ? this.$util.img(url) : url) : '';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initWebview() {
|
||||||
|
const config = this.value || {};
|
||||||
|
this.loadError = false;
|
||||||
|
this.loaded = false;
|
||||||
|
// 调试用：把后台下发的完整 value 对象打印到控制台，方便定位 URL 字段名
|
||||||
|
console.log('[diy-webview] value:', JSON.stringify(config));
|
||||||
|
// 兼容后台可能使用的多种链接字段名/嵌套结构
|
||||||
|
const url = this.extractUrl(config);
|
||||||
|
// 懒加载：开启时等容器进入视口再渲染 iframe
|
||||||
|
this.lazyPending = !!(config.lazyRender || config.lazyLoad);
|
||||||
|
// #ifdef H5
|
||||||
|
// 数据热更新时（后台重新保存）若尚未进入过视口，需重建观察器（仅在挂载后才可建立）
|
||||||
|
if (this.lazyPending && this._mountedFlag) this._setupLazyObserver();
|
||||||
|
// #endif
|
||||||
|
// 优先使用后台直接下发的 url；若配置的是接口来源(source=api)，则通过接口拉取
|
||||||
|
if (config.source === 'api' && config.apiUrl) {
|
||||||
|
this.loadUrlFromApi(config.apiUrl);
|
||||||
|
} else if (url) {
|
||||||
|
this.src = this.buildSrc(url);
|
||||||
|
console.log('[diy-webview] src:', this.src);
|
||||||
|
this._startLoadTimer();
|
||||||
|
} else {
|
||||||
|
this.src = '';
|
||||||
|
console.warn('[diy-webview] 未找到有效链接字段');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 在格式化后的 URL 基础上，拼接后台配置的"附加参数"与"携带登录态"(token / member_id)
|
||||||
|
buildSrc(url) {
|
||||||
|
let src = this.formatUrl(url);
|
||||||
|
const config = this.value || {};
|
||||||
|
const extra = [];
|
||||||
|
// 附加参数（后台 urlParams 字段，格式 "a=1&b=2"，多组参数用 & 连接）
|
||||||
|
const rawExtra = config.urlParams || config.extraParams || config.appendParams || config.additionalParams || config.params;
|
||||||
|
if (rawExtra && typeof rawExtra === 'string') {
|
||||||
|
extra.push(rawExtra.replace(/^[?&]+/, ''));
|
||||||
|
}
|
||||||
|
// 携带登录态（后台 carryToken 字段：none 不携带 / token / member_id）
|
||||||
|
const loginState = config.carryToken || config.loginState || config.login_state;
|
||||||
|
if (loginState === 'token') {
|
||||||
|
const token = (this.$store && this.$store.state && this.$store.state.token) || '';
|
||||||
|
if (token) extra.push('token=' + encodeURIComponent(token));
|
||||||
|
} else if (loginState === 'member_id') {
|
||||||
|
const memberInfo = (this.$store && this.$store.state && this.$store.state.memberInfo) || {};
|
||||||
|
const memberId = memberInfo.member_id || memberInfo.memberId || '';
|
||||||
|
if (memberId) extra.push('member_id=' + memberId);
|
||||||
|
}
|
||||||
|
if (extra.length) {
|
||||||
|
src += (src.indexOf('?') !== -1 ? '&' : '?') + extra.filter(Boolean).join('&');
|
||||||
|
}
|
||||||
|
return src;
|
||||||
|
},
|
||||||
|
// #ifdef H5
|
||||||
|
// 懒加载：容器滚动进入视口（含预加载缓冲 200px）后才渲染 iframe
|
||||||
|
_setupLazyObserver() {
|
||||||
|
try {
|
||||||
|
if (this._observer) {
|
||||||
|
this._observer.disconnect();
|
||||||
|
this._observer = null;
|
||||||
|
}
|
||||||
|
this._observer = uni.createIntersectionObserver(this, { thresholds: [0] });
|
||||||
|
this._observer.relativeToViewport({ bottom: 200 }).observe('.diy-webview', () => {
|
||||||
|
this.lazyPending = false;
|
||||||
|
if (this._observer) {
|
||||||
|
this._observer.disconnect();
|
||||||
|
this._observer = null;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} catch (e) {
|
||||||
|
// 观察器异常时直接渲染，避免内容永远空白
|
||||||
|
this.lazyPending = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// #endif
|
||||||
|
extractUrl(config) {
|
||||||
|
if (!config || typeof config !== 'object') return '';
|
||||||
|
// 优先读取常见字段名（兼容后台不同命名习惯）
|
||||||
|
let direct = config.url || config.link || config.linkUrl || config.pageUrl || config.webUrl || config.web_url || config.externalUrl || config.targetUrl || config.src || config.href || config.path || config.address;
|
||||||
|
// 兼容装修链接选择器下发的对象形态：link = { wap_url / url / h5_url ... }
|
||||||
|
if (direct && typeof direct === 'object') {
|
||||||
|
direct = direct.wap_url || direct.h5_url || direct.url || direct.app_url || direct.link || '';
|
||||||
|
}
|
||||||
|
if (direct && typeof direct === 'string') return direct.trim();
|
||||||
|
// 兼容嵌套结构：如 value.value.url / value.config.url / value.data.url
|
||||||
|
for (const key of ['value', 'config', 'data', 'content', 'params']) {
|
||||||
|
if (config[key] && typeof config[key] === 'object') {
|
||||||
|
const nested = this.extractUrl(config[key]);
|
||||||
|
if (nested) return nested;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return '';
|
||||||
|
},
|
||||||
|
formatUrl(url) {
|
||||||
|
if (!url || typeof url !== 'string') return '';
|
||||||
|
let formatted = url.trim();
|
||||||
|
// 如果后台把 URL 编码存储，做一次解码
|
||||||
|
if (formatted.indexOf('%') !== -1) {
|
||||||
|
try { formatted = decodeURIComponent(formatted); } catch (e) {}
|
||||||
|
}
|
||||||
|
// 支持以 http:// 或 https:// 开头的完整地址
|
||||||
|
if (/^https?:\/\//i.test(formatted)) return formatted;
|
||||||
|
// 支持相对路径或站点内链接，自动补全
|
||||||
|
return this.$util.img ? this.$util.img(formatted) : formatted;
|
||||||
|
},
|
||||||
|
loadUrlFromApi(apiUrl) {
|
||||||
|
this.$api.sendRequest({
|
||||||
|
url: apiUrl,
|
||||||
|
success: res => {
|
||||||
|
if (res.code == 0 && res.data) {
|
||||||
|
const data = typeof res.data === 'string' ? { url: res.data } : res.data;
|
||||||
|
this.src = this.formatUrl(data.url || data.link || '');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fail: () => {
|
||||||
|
this.src = '';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
updateNavbarTitle(e) {
|
||||||
|
// 参照 pages-tool/webview.vue：当 web-view 页面标题更新时，可同步设置导航栏标题
|
||||||
|
const title = e?.detail?.title || e?.title || '';
|
||||||
|
if (title) {
|
||||||
|
uni.setNavigationBarTitle({ title });
|
||||||
|
}
|
||||||
|
this.$emit('titleUpdate', e);
|
||||||
|
},
|
||||||
|
// 点击网页容器整体 → 跳转到配置的链接（走统一 diyRedirectTo，外链自动进 web-view / 新窗口）
|
||||||
|
handleTap() {
|
||||||
|
if (this.src) this.mpGo();
|
||||||
|
},
|
||||||
|
mpGo() {
|
||||||
|
if (!this.src) return;
|
||||||
|
if (this.$util && this.$util.diyRedirectTo) {
|
||||||
|
this.$util.diyRedirectTo({
|
||||||
|
wap_url: this.src,
|
||||||
|
title: (this.value && this.value.title) || (this.value && this.value.name) || '网页',
|
||||||
|
name: (this.value && this.value.name) ? this.value.name : '网页'
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
uni.navigateTo({ url: '/pages_tool/webview/webview?src=' + encodeURIComponent(this.src) });
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 注意：方法名不能叫 onLoad/onError —— uni-app 会把组件里的 onLoad 当页面
|
||||||
|
// 生命周期提升出 methods，导致 @load="onLoad" 渲染时报 handler undefined。
|
||||||
|
handleIframeLoad(e) {
|
||||||
|
this.loaded = true;
|
||||||
|
this.loadError = false;
|
||||||
|
this._clearLoadTimer();
|
||||||
|
this.$emit('load', e);
|
||||||
|
},
|
||||||
|
handleIframeError(e) {
|
||||||
|
this.loadError = true;
|
||||||
|
this.loaded = true;
|
||||||
|
this._clearLoadTimer();
|
||||||
|
console.error('[diy-webview] 加载失败:', this.src, e);
|
||||||
|
this.$emit('error', e);
|
||||||
|
},
|
||||||
|
// 加载超时兜底：部分浏览器内核(如 HBuilderX 内置浏览器的老 CEF 内核)对跨域 iframe
|
||||||
|
// 请求失败时不会触发 error 事件，用定时器兜住，避免容器一直白屏
|
||||||
|
_startLoadTimer() {
|
||||||
|
this._clearLoadTimer();
|
||||||
|
// #ifdef H5
|
||||||
|
this._loadTimer = setTimeout(() => {
|
||||||
|
if (!this.loaded) {
|
||||||
|
this.loadError = true;
|
||||||
|
console.warn('[diy-webview] 加载超时(10s)，显示兜底内容:', this.src);
|
||||||
|
}
|
||||||
|
}, 10000);
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
_clearLoadTimer() {
|
||||||
|
if (this._loadTimer) {
|
||||||
|
clearTimeout(this._loadTimer);
|
||||||
|
this._loadTimer = null;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onMessage(e) {
|
||||||
|
// 接收 web-view / iframe 发来的消息，可用于与后台数据交互
|
||||||
|
this.$emit('message', e);
|
||||||
|
// 同时通过事件总线广播，方便页面级监听
|
||||||
|
this.__$emitEvent({
|
||||||
|
eventName: 'diy-webview-message',
|
||||||
|
data: {
|
||||||
|
componentName: this.value?.componentName,
|
||||||
|
moduleIndex: this.value?.moduleIndex,
|
||||||
|
message: e?.detail?.data || e?.data
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.diy-webview {
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.diy-webview-iframe,
|
||||||
|
.diy-webview-native {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: block;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 占位图 / 懒加载未进入视口时的展示 */
|
||||||
|
.diy-webview-placeholder {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* H5 角标跳转按钮：iframe 内部点击不冒泡，用它兜底"点击跳转" */
|
||||||
|
.webview-open-chip {
|
||||||
|
position: absolute;
|
||||||
|
right: 16rpx;
|
||||||
|
bottom: 16rpx;
|
||||||
|
z-index: 3;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 8rpx 20rpx;
|
||||||
|
border-radius: 999rpx;
|
||||||
|
background: rgba(0, 0, 0, 0.55);
|
||||||
|
color: #fff;
|
||||||
|
font-size: 22rpx;
|
||||||
|
line-height: 1;
|
||||||
|
|
||||||
|
.iconfont {
|
||||||
|
font-size: 24rpx;
|
||||||
|
margin-right: 6rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 加载中遮罩 */
|
||||||
|
.webview-loading {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 2;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: #f7f8fa;
|
||||||
|
color: #999;
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.webview-loading-spinner {
|
||||||
|
width: 44rpx;
|
||||||
|
height: 44rpx;
|
||||||
|
border: 4rpx solid #e5e6eb;
|
||||||
|
border-top-color: #576b95;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-bottom: 16rpx;
|
||||||
|
animation: webview-spin 0.8s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes webview-spin {
|
||||||
|
to {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.webview-empty,
|
||||||
|
.webview-mp-go {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: #f5f5f5;
|
||||||
|
color: #576B95;
|
||||||
|
font-size: 26rpx;
|
||||||
|
|
||||||
|
.iconfont {
|
||||||
|
font-size: 48rpx;
|
||||||
|
margin-bottom: 12rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.webview-error {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: #f5f5f5;
|
||||||
|
color: #999;
|
||||||
|
font-size: 26rpx;
|
||||||
|
|
||||||
|
.iconfont {
|
||||||
|
font-size: 48rpx;
|
||||||
|
margin-bottom: 12rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.webview-error {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 2;
|
||||||
|
background: rgba(255, 255, 255, 0.96);
|
||||||
|
color: #ff6b35;
|
||||||
|
|
||||||
|
.error-open {
|
||||||
|
margin-top: 16rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #576b95;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user