thzxcx/FirstUI-vue
1
0
Fork 0
Code Pull Requests Packages Releases Activity

chore: 修改preview ；增加tag插槽 ；修改标题样式

Browse Source
This commit is contained in:
Hefeng
2023-08-23 19:22:49 +08:00
parent 368ad96929
commit 3b2f5c50c4
1 changed files with 549 additions and 510 deletions
Download Patch File Download Diff File Expand all files Collapse all files

453
components/firstui/fui-preview/fui-preview.vue
View File

@ -1,213 +1,153 @@
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：18 6 14 072 5 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。--> <!-- 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：18 6 14 072 5 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。 -->
<template>
<view class="fui-preview__wrap" :class="{'fui-preview__unlined':!isBorder,'fui-preview__background':!background}"
:style="{'border-top-color':borderColor,'border-bottom-color':borderColor,marginTop:marginTop+'rpx',marginBottom:marginBottom+'rpx',background:background}">
<view class="fui-preview__hd" :style="{paddingLeft:padding+'rpx',paddingRight:padding+'rpx'}"
v-if="pvd[label] || pvd[value]">
<view class="fui-preview__item">
<text class="fui-preview__label" :class="{'fui-preview__gray':!labelColor}"
:style="{color:labelColor,fontSize:hdLabelSize+'rpx',width:hdLabelWidth>0?hdLabelWidth+'rpx':'auto',marginRight:labelRight+'rpx'}">{{pvd[label] || ''}}</text>
<text class="fui-preview__value-hd" :class="{'fui-preview__color':!hdValColor}"
:style="{color:hdValColor,fontSize:hdValSize+'rpx',textAlign:bdAlign}">{{pvd[value] || ''}}</text>
</view>
<view :style="{background:borderColor,left:hdLeft+'rpx',right:hdRight+'rpx'}" class="fui-preview__border"
:class="{'fui-preview__border-color':!borderColor}"></view>
</view>
<view class="fui-preview__bd" v-if="pvd[list] && pvd[list].length>0"
:style="{paddingLeft:padding+'rpx',paddingRight:padding+'rpx'}">
<view class="fui-preview__item" v-for="(item,index) in pvd[list]" :key="index">
<text class="fui-preview__label"
:class="[!labelColor && !item[lColor]?'fui-preview__gray':'','fui-preview__label-'+labelAlign]"
:style="{color:item[lColor] || labelColor,fontSize:bdSize+'rpx',width:labelWidth>0?labelWidth+'rpx':'auto',marginRight:labelRight+'rpx'}">{{item[label]}}</text>
<!-- #ifndef APP-NVUE -->
<text class="fui-preview__value" :class="{'fui-preview__color':!bdColor && !item[valueColor]}"
:style="{color:item[valueColor] || bdColor,fontSize:bdSize+'rpx',textAlign:bdAlign}"
@tap="itemClick(index)">{{item[value]}}</text>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<view class="fui-preview__value-wrap">
<text class="fui-preview__value" :class="{'fui-preview__color':!bdColor && !item[valueColor]}"
:style="{color:item[valueColor] || bdColor,fontSize:bdSize+'rpx',textAlign:bdAlign}"
@tap="itemClick(index)">{{item[value]}}</text>
</view>
<!-- #endif -->
</view>
</view>
<slot></slot>
<view class="fui-preview__ft" :style="{'border-top-color':borderColor}"
v-if="pvd[buttons] && pvd[buttons].length>0">
<view :style="{'border-right-color':idx!==pvd[buttons].length-1?borderColor : 'transparent'}"
:class="[highlight?'fui-preview__hover-weex':'',idx!==pvd[buttons].length-1?'fui-preview__btn-def':'fui-preview__btn']"
:hover-class="highlight?'fui-preview_hover':''" :hover-stay-time="150" v-for="(btn,idx) in pvd[buttons]"
:key="idx" @tap="handleClick(idx)">
<text :style="{fontSize:btnSize+'rpx',color:btn[color] || '#465CFF'}"
:class="{'fui-preview__link':!btn[color]}">{{btn[text]}}</text>
</view>
</view>
</view>
</template>
<script> <script>
export default { export default {
name: "fui-preview", name: 'FuiPreview',
emits: ['click', 'valueClick'],
props: { props: {
previewData: { previewData: {
type: Object, type: Object,
default () { default() {
return {} return {}
} },
}, },
fields: { fields: {
type: Object, type: Object,
default () { default() {
return {} return {}
} },
}, },
// #ifdef APP-NVUE // #ifdef APP-NVUE
background: { background: {
type: String, type: String,
default: '#fff' default: '#fff',
}, },
// #endif // #endif
// #ifndef APP-NVUE // #ifndef APP-NVUE
background: { background: {
type: String, type: String,
default: '' default: '',
}, },
// #endif // #endif
marginTop: { marginTop: {
type: [Number, String], type: [Number, String],
default: 0 default: 0,
}, },
marginBottom: { marginBottom: {
type: [Number, String], type: [Number, String],
default: 0 default: 0,
}, },
//左右间距 // 左右间距
padding: { padding: {
type: [Number, String], type: [Number, String],
default: 32 default: 32,
}, },
labelWidth: { labelWidth: {
type: [Number, String], type: [Number, String],
default: 0 default: 0,
}, },
//left / right / justify // left / right / justify
labelAlign: { labelAlign: {
type: String, type: String,
default: 'left' default: 'left',
}, },
// #ifdef APP-NVUE // #ifdef APP-NVUE
labelColor: { labelColor: {
type: String, type: String,
default: '#7F7F7F' default: '#7F7F7F',
}, },
// #endif // #endif
// #ifndef APP-NVUE // #ifndef APP-NVUE
labelColor: { labelColor: {
type: String, type: String,
default: '' default: '',
}, },
// #endif // #endif
//V1.9.9+ // V1.9.9+
labelRight: { labelRight: {
type: [Number, String], type: [Number, String],
default: 32 default: 32,
}, },
//V1.9.9+ // V1.9.9+
hdLabelWidth: { hdLabelWidth: {
type: [Number, String], type: [Number, String],
default: 0 default: 0,
}, },
hdLabelSize: { hdLabelSize: {
type: [Number, String], type: [Number, String],
default: 32 default: 32,
}, },
hdValSize: { hdValSize: {
type: [Number, String], type: [Number, String],
default: 36 default: 36,
}, },
// #ifdef APP-NVUE // #ifdef APP-NVUE
hdValColor: { hdValColor: {
type: String, type: String,
default: '#181818' default: '#181818',
}, },
// #endif // #endif
// #ifndef APP-NVUE // #ifndef APP-NVUE
hdValColor: { hdValColor: {
type: String, type: String,
default: '' default: '',
}, },
// #endif // #endif
bdSize: { bdSize: {
type: [Number, String], type: [Number, String],
default: 28 default: 28,
}, },
// #ifdef APP-NVUE // #ifdef APP-NVUE
bdColor: { bdColor: {
type: String, type: String,
default: '#181818' default: '#181818',
}, },
// #endif // #endif
// #ifndef APP-NVUE // #ifndef APP-NVUE
bdColor: { bdColor: {
type: String, type: String,
default: '' default: '',
}, },
// #endif // #endif
//V1.9.9+ 内容对齐方式：left、right // V1.9.9+ 内容对齐方式：left、right
bdAlign: { bdAlign: {
type: String, type: String,
default: 'right' default: 'right',
}, },
btnSize: { btnSize: {
type: [Number, String], type: [Number, String],
default: 32 default: 32,
}, },
//按钮是否有点击效果 // 按钮是否有点击效果
highlight: { highlight: {
type: Boolean, type: Boolean,
default: true default: true,
}, },
hdLeft: { hdLeft: {
type: [Number, String], type: [Number, String],
default: 32 default: 32,
}, },
hdRight: { hdRight: {
type: [Number, String], type: [Number, String],
default: 0 default: 0,
}, },
// #ifdef APP-NVUE // #ifdef APP-NVUE
borderColor: { borderColor: {
type: String, type: String,
default: '#eee' default: '#eee',
}, },
// #endif // #endif
// #ifndef APP-NVUE // #ifndef APP-NVUE
borderColor: { borderColor: {
type: String, type: String,
default: '' default: '',
}, },
// #endif // #endif
//是否需要preview外层上下线条 // 是否需要preview外层上下线条
isBorder: { isBorder: {
type: Boolean, type: Boolean,
default: true default: true,
}
}, },
watch: {
previewData(val) {
this.initData(val)
},
//未做深度监听
fields(val) {
this.handleFileds()
}
},
created() {
this.initData(this.previewData)
}, },
emits: ['click', 'valueClick'],
data() { data() {
return { return {
pvd: {}, pvd: {},
@ -218,40 +158,52 @@
valueColor: 'valueColor', valueColor: 'valueColor',
buttons: 'buttons', buttons: 'buttons',
text: 'text', text: 'text',
color: 'color' color: 'color',
}; }
},
watch: {
previewData(val) {
this.initData(val)
},
// 未做深度监听
fields(val) {
this.handleFileds()
},
},
created() {
this.initData(this.previewData)
}, },
methods: { methods: {
handleFileds() { handleFileds() {
if (this.fields && typeof this.fields === 'object') { if (this.fields && typeof this.fields === 'object') {
this.label = this.fields.label || 'label'; this.label = this.fields.label || 'label'
this.value = this.fields.value || 'value'; this.value = this.fields.value || 'value'
this.list = this.fields.list || 'list'; this.list = this.fields.list || 'list'
this.lColor = this.fields.labelColor || 'labelColor'; this.lColor = this.fields.labelColor || 'labelColor'
this.valueColor = this.fields.valueColor || 'valueColor'; this.valueColor = this.fields.valueColor || 'valueColor'
this.buttons = this.fields.buttons || 'buttons'; this.buttons = this.fields.buttons || 'buttons'
this.text = this.fields.text || 'text'; this.text = this.fields.text || 'text'
this.color = this.fields.color || 'color'; this.color = this.fields.color || 'color'
} }
}, },
initData(val) { initData(val) {
this.handleFileds() this.handleFileds()
val = val || {}; val = val || {}
val[this.list] = val[this.list] || []; val[this.list] = val[this.list] || []
val[this.buttons] = val[this.buttons] || []; val[this.buttons] = val[this.buttons] || []
this.pvd = val; this.pvd = val
}, },
handleClick(idx) { handleClick(idx) {
let params = this.pvd[this.buttons][idx] || {} const params = this.pvd[this.buttons][idx] || {}
this.$emit('click', { this.$emit('click', {
index: idx, index: idx,
...params ...params,
}) })
}, },
itemClick(index) { itemClick(index) {
this.$emit('valueClick', { this.$emit('valueClick', {
index, index,
item: this.pvd[this.list][index] item: this.pvd[this.list][index],
}) })
}, },
setValue(index, value) { setValue(index, value) {
@ -259,16 +211,104 @@
if (idx || idx === 0) { if (idx || idx === 0) {
const data = JSON.parse(JSON.stringify(this.pvd)) const data = JSON.parse(JSON.stringify(this.pvd))
const item = data[this.list][idx] const item = data[this.list][idx]
item[this.value] = value; item[this.value] = value
this.pvd = data this.pvd = data
} }
} },
} },
} }
</script> </script>
<template>
<view
class="fui-preview__wrap" :class="{ 'fui-preview__unlined': !isBorder, 'fui-preview__background': !background }"
:style="{ 'border-top-color': borderColor, 'border-bottom-color': borderColor, 'marginTop': `${marginTop}rpx`, 'marginBottom': `${marginBottom}rpx`, 'background': background }"
>
<view
v-if="pvd[label] || pvd[value]" class="fui-preview__hd"
:style="{ paddingLeft: `${padding}rpx`, paddingRight: `${padding}rpx` }"
>
<view class="fui-preview__item">
<text
class="fui-preview__label" style="color: #333;font-weight:600"
:style="{ color: labelColor, fontSize: `${hdLabelSize}rpx`, width: hdLabelWidth > 0 ? `${hdLabelWidth}rpx` : 'auto', marginRight: `${labelRight}rpx` }"
>
{{ pvd[label] || '' }}
</text>
<text
class="fui-preview__value-hd" :class="{ 'fui-preview__color': !hdValColor }"
:style="{ color: hdValColor, fontSize: `${hdValSize}rpx`, textAlign: bdAlign }"
>
{{ pvd[value] || '' }}
</text>
</view>
<view
:style="{ background: borderColor, left: `${hdLeft}rpx`, right: `${hdRight}rpx` }" class="fui-preview__border"
:class="{ 'fui-preview__border-color': !borderColor }"
/>
</view>
<view :style="{ paddingLeft: `${padding}rpx`, paddingRight: `${padding}rpx` }">
<slot name="tag" />
</view>
<view
v-if="pvd[list] && pvd[list].length > 0" class="fui-preview__bd"
:style="{ paddingLeft: `${padding}rpx`, paddingRight: `${padding}rpx` }"
>
<view v-for="(item, index) in pvd[list]" :key="index" class="fui-preview__item">
<text
class="fui-preview__label"
:class="[!labelColor && !item[lColor] ? 'fui-preview__gray' : '', `fui-preview__label-${labelAlign}`]"
:style="{ color: item[lColor] || labelColor, fontSize: `${bdSize}rpx`, width: labelWidth > 0 ? `${labelWidth}rpx` : 'auto', marginRight: `${labelRight}rpx` }"
>
{{ item[label] }}
</text>
<!-- #ifndef APP-NVUE -->
<text
class="fui-preview__value" :class="{ 'fui-preview__color': !bdColor && !item[valueColor] }"
:style="{ color: item[valueColor] || bdColor, fontSize: `${bdSize}rpx`, textAlign: bdAlign }"
@tap="itemClick(index)"
>
{{ item[value] }}
</text>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<view class="fui-preview__value-wrap">
<text
class="fui-preview__value" :class="{ 'fui-preview__color': !bdColor && !item[valueColor] }"
:style="{ color: item[valueColor] || bdColor, fontSize: `${bdSize}rpx`, textAlign: bdAlign }"
@tap="itemClick(index)"
>
{{ item[value] }}
</text>
</view>
<!-- #endif -->
</view>
</view>
<slot />
<view
v-if="pvd[buttons] && pvd[buttons].length > 0" class="fui-preview__ft"
:style="{ 'border-top-color': borderColor }"
>
<view
v-for="(btn, idx) in pvd[buttons]" :key="idx"
:style="{ 'border-right-color': idx !== pvd[buttons].length - 1 ? borderColor : 'transparent' }"
:class="[highlight ? 'fui-preview__hover-weex' : '', idx !== pvd[buttons].length - 1 ? 'fui-preview__btn-def' : 'fui-preview__btn']"
:hover-class="highlight ? 'fui-preview_hover' : ''" :hover-stay-time="150" @tap="handleClick(idx)"
>
<text
:style="{ fontSize: `${btnSize}rpx`, color: btn[color] || '#465CFF' }"
:class="{ 'fui-preview__link': !btn[color] }"
>
{{ btn[text] }}
</text>
</view>
</view>
</view>
</template>
<style scoped> <style scoped>
.fui-preview__wrap { .fui-preview__wrap {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
width: 100%; width: 100%;
border-top-width: 0; border-top-width: 0;
@ -284,77 +324,77 @@
border-bottom-width: 0.5px; border-bottom-width: 0.5px;
border-bottom-style: solid; border-bottom-style: solid;
/* #endif */ /* #endif */
} }
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
.fui-preview__background { .fui-preview__background {
background: var(--fui-bg-color, #FFFFFF) !important; background: var(--fui-bg-color, #FFFFFF) !important;
} }
/* #endif */ /* #endif */
.fui-preview__unlined { .fui-preview__unlined {
border-top-width: 0 !important; border-top-width: 0 !important;
border-bottom-width: 0 !important; border-bottom-width: 0 !important;
} }
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
.fui-preview__wrap::before { .fui-preview__wrap::before {
top: 0; top: 0;
border-top: 1px solid var(--fui-color-border, #EEEEEE); border-top: 1px solid var(--fui-color-border, #EEEEEE);
-webkit-transform-origin: 0 0; -webkit-transform-origin: 0 0;
transform-origin: 0 0; transform-origin: 0 0;
-webkit-transform: scaleY(.5); -webkit-transform: scaleY(.5);
transform: scaleY(.5) transform: scaleY(.5)
} }
.fui-preview__wrap::after { .fui-preview__wrap::after {
content: " "; content: " ";
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
height: 1px; height: 1px;
} }
.fui-preview__wrap::before { .fui-preview__wrap::before {
content: " "; content: " ";
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
height: 1px; height: 1px;
} }
.fui-preview__wrap::after { .fui-preview__wrap::after {
bottom: 0; bottom: 0;
border-bottom: 1px solid var(--fui-color-border, #EEEEEE); border-bottom: 1px solid var(--fui-color-border, #EEEEEE);
-webkit-transform-origin: 0 100%; -webkit-transform-origin: 0 100%;
transform-origin: 0 100%; transform-origin: 0 100%;
-webkit-transform: scaleY(.5); -webkit-transform: scaleY(.5);
transform: scaleY(.5) transform: scaleY(.5)
} }
.fui-preview__unlined::before { .fui-preview__unlined::before {
border-top-width: 0 !important; border-top-width: 0 !important;
border-bottom-width: 0 !important; border-bottom-width: 0 !important;
} }
.fui-preview__unlined::after { .fui-preview__unlined::after {
border-top-width: 0 !important; border-top-width: 0 !important;
border-bottom-width: 0 !important; border-bottom-width: 0 !important;
} }
/* #endif */ /* #endif */
.fui-preview__hd { .fui-preview__hd {
position: relative; position: relative;
padding-top: 32rpx; padding-top: 32rpx;
padding-bottom: 32rpx; padding-bottom: 8rpx;
text-align: right; text-align: right;
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
box-sizing: border-box; box-sizing: border-box;
/* #endif */ /* #endif */
line-height: 56rpx; line-height: 56rpx;
} }
.fui-preview__border { .fui-preview__border {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
/* #ifdef APP-NVUE */ /* #ifdef APP-NVUE */
@ -368,22 +408,22 @@
transform-origin: 0 100%; transform-origin: 0 100%;
z-index: 1; z-index: 1;
/* #endif */ /* #endif */
} }
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
.fui-preview__border-color { .fui-preview__border-color {
background: var(--fui-color-border, #EEEEEE) !important; background: var(--fui-color-border, #EEEEEE) !important;
} }
/* #endif */ /* #endif */
/* #ifdef APP-NVUE */ /* #ifdef APP-NVUE */
.fui-preview__value-wrap { .fui-preview__value-wrap {
flex: 1; flex: 1;
} }
/* #endif */ /* #endif */
.fui-preview__value { .fui-preview__value {
text-align: right; text-align: right;
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
flex: 1; flex: 1;
@ -391,22 +431,22 @@
word-break: break-all; word-break: break-all;
word-wrap: break-word; word-wrap: break-word;
/* #endif */ /* #endif */
} }
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
.fui-preview__color { .fui-preview__color {
color: var(--fui-color-title, #181818) !important; color: var(--fui-color-title, #181818) !important;
} }
/* #endif */ /* #endif */
.fui-preview__value-hd { .fui-preview__value-hd {
font-style: normal; font-style: normal;
font-size: 36rpx; font-size: 36rpx;
flex: 1; flex: 1;
} }
.fui-preview__bd { .fui-preview__bd {
flex: 1; flex: 1;
padding-top: 32rpx; padding-top: 32rpx;
padding-bottom: 32rpx; padding-bottom: 32rpx;
@ -414,10 +454,9 @@
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
box-sizing: border-box box-sizing: border-box
/* #endif */ /* #endif */
} }
.fui-preview__ft {
.fui-preview__ft {
/* #ifdef APP-NVUE */ /* #ifdef APP-NVUE */
flex: 1; flex: 1;
/* #endif */ /* #endif */
@ -432,10 +471,10 @@
border-top-width: 0; border-top-width: 0;
/* #endif */ /* #endif */
flex-direction: row; flex-direction: row;
} }
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
.fui-preview__ft::before { .fui-preview__ft::before {
content: " "; content: " ";
position: absolute; position: absolute;
left: 0; left: 0;
@ -445,11 +484,11 @@
border-top: 1px solid var(--fui-color-border, #EEEEEE); border-top: 1px solid var(--fui-color-border, #EEEEEE);
transform-origin: 0 0; transform-origin: 0 0;
transform: scaleY(.5) transform: scaleY(.5)
} }
/* #endif */ /* #endif */
.fui-preview__item { .fui-preview__item {
padding: 8rpx 0; padding: 8rpx 0;
overflow: hidden; overflow: hidden;
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
@ -460,37 +499,37 @@
/* #ifdef APP-NVUE */ /* #ifdef APP-NVUE */
align-items: flex-start; align-items: flex-start;
/* #endif */ /* #endif */
} }
.fui-preview__label { .fui-preview__label {
margin-right: 32rpx; margin-right: 32rpx;
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
min-width: 112rpx; min-width: 112rpx;
text-align: justify; text-align: justify;
flex-shrink: 0; flex-shrink: 0;
/* #endif */ /* #endif */
} }
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
.fui-preview__label-right { .fui-preview__label-right {
text-align-last: right; text-align-last: right;
} }
.fui-preview__label-justify { .fui-preview__label-justify {
text-align-last: justify; text-align-last: justify;
} }
/* #endif */ /* #endif */
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
.fui-preview__gray { .fui-preview__gray {
color: var(--fui-color-subtitle, #7F7F7F) !important; color: var(--fui-color-subtitle, #7F7F7F) !important;
} }
/* #endif */ /* #endif */
.fui-preview__btn, .fui-preview__btn,
.fui-preview__btn-def { .fui-preview__btn-def {
flex: 1; flex: 1;
text-align: center; text-align: center;
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
@ -502,27 +541,27 @@
/* #ifdef H5 */ /* #ifdef H5 */
cursor: pointer; cursor: pointer;
/* #endif */ /* #endif */
} }
.fui-preview__btn-def { .fui-preview__btn-def {
position: relative; position: relative;
/* #ifdef APP-NVUE */ /* #ifdef APP-NVUE */
border-right-width: 0.5px; border-right-width: 0.5px;
border-right-style: solid; border-right-style: solid;
/* #endif */ /* #endif */
} }
.fui-preview__link { .fui-preview__link {
/* #ifdef APP-NVUE */ /* #ifdef APP-NVUE */
color: #465CFF !important; color: #465CFF !important;
/* #endif */ /* #endif */
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
color: var(--fui-color-link, #465CFF) !important; color: var(--fui-color-link, #465CFF) !important;
/* #endif */ /* #endif */
} }
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
.fui-preview__btn-def::after { .fui-preview__btn-def::after {
content: " "; content: " ";
position: absolute; position: absolute;
right: 0; right: 0;
@ -532,21 +571,21 @@
border-right: 1px solid var(--fui-color-border, #eee); border-right: 1px solid var(--fui-color-border, #eee);
transform-origin: 100% 0; transform-origin: 100% 0;
transform: scaleX(.5) transform: scaleX(.5)
} }
/* #endif */ /* #endif */
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
.fui-preview_hover { .fui-preview_hover {
background-color: var(--fui-bg-color-hover, rgba(0, 0, 0, 0.2)) !important; background-color: var(--fui-bg-color-hover, rgba(0, 0, 0, 0.2)) !important;
} }
/* #endif */ /* #endif */
/* #ifdef APP-NVUE */ /* #ifdef APP-NVUE */
.fui-preview__hover-weex:active { .fui-preview__hover-weex:active {
background-color: rgba(0, 0, 0, 0.2) !important; background-color: rgba(0, 0, 0, 0.2) !important;
} }
/* #endif */ /* #endif */
</style> </style>