537 lines
12 KiB
Vue
537 lines
12 KiB
Vue
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 86140 725 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||
<template>
|
||
<view class="fui-panel__wrap"
|
||
:style="{background:background,'border-top-color':borderColor,'border-bottom-color':borderColor,marginTop:marginTop+'rpx',marginBottom:marginBottom+'rpx'}"
|
||
:class="{'fui-panel__unlined':!isBorder,'fui-panel__background':!background}">
|
||
<view class="fui-panel__hd"
|
||
:style="{background:hdBackground,paddingLeft:padding+'rpx',paddingRight:padding+'rpx'}"
|
||
v-if="panelData[head]">
|
||
<text :class="{'fui-panel__title-color':!headColor}"
|
||
:style="{fontSize:headSize+'rpx',color:headColor+'rpx'}">{{panelData[head] || ''}}</text>
|
||
<view v-if="hdBorder" :style="{background:borderColor,left:hdLeft+'rpx',right:hdRight+'rpx'}"
|
||
class="fui-panel__border" :class="{'fui-panel__border-color':!borderColor}"></view>
|
||
</view>
|
||
<view class="fui-panel__mediabox" :style="{paddingLeft:padding+'rpx',paddingRight:padding+'rpx'}"
|
||
:class="{'fui-mediabox__center':!flexStart,'fui-panel__hover-weex':highlight}" v-for="(item,index) in listData"
|
||
:key="index" :hover-class="highlight?'fui-panel__hover':''" :hover-stay-time="150"
|
||
@tap="handleClick(index)">
|
||
<view class="fui-panel__mb-hd" v-if="item[src]" :style="{width:width+'rpx',height:height+'rpx'}">
|
||
<image class="fui-panel__mb-thumb" :src="item[src]" mode="widthFix"
|
||
:style="{width:width+'rpx',height:height+'rpx',borderRadius:radius+'rpx'}" />
|
||
</view>
|
||
<view class="fui-panel__mb-bd">
|
||
<text class="fui-panel__mb-title" v-if="item[title]" :class="{'fui-panel__title-color':!color}"
|
||
:style="{color:color,fontSize:size+'rpx',fontWeight:fontWeight}">{{item[title] || ''}}</text>
|
||
<text class="fui-panel__mb-desc" v-if="item[desc]" :class="{'fui-panel__sub-color':!descColor}"
|
||
:style="{color:descColor,fontSize:descSize+'rpx'}">{{item[desc] || ''}}</text>
|
||
<view class="fui-panel__mb-info" v-if="item[source] || item[time] || item[extra]">
|
||
<text class="fui-panel__info-meta" :class="{'fui-panel__info-color':!infoColor}"
|
||
:style="{color:infoColor,fontSize:infoSize+'rpx'}"
|
||
v-if="item[source]">{{item[source] || ''}}</text>
|
||
<text class="fui-panel__info-meta" :class="{'fui-panel__info-color':!infoColor}"
|
||
:style="{color:infoColor,fontSize:infoSize+'rpx'}" v-if="item[time]">{{item[time] || ''}}</text>
|
||
<text class="fui-panel__info-extra"
|
||
:class="{'fui-panel__info-color':!infoColor,'fui-panel__extra-bcolor':!infoColor}"
|
||
:style="{color:infoColor,fontSize:infoSize+'rpx','border-left-color':infoColor}"
|
||
v-if="item[extra]">{{item[extra] || ''}}</text>
|
||
</view>
|
||
</view>
|
||
<view v-if="bdBorder && index!==listData.length-1"
|
||
:style="{background:borderColor,left:bdLeft+'rpx',right:bdRight+'rpx'}" class="fui-panel__border"
|
||
:class="{'fui-panel__border-color':!borderColor}"></view>
|
||
</view>
|
||
<slot></slot>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "fui-panel",
|
||
emits: ['click'],
|
||
props: {
|
||
//面板数据，键名可通过 fields属性配置
|
||
panelData: {
|
||
type: Object,
|
||
default () {
|
||
return {}
|
||
}
|
||
},
|
||
//面板数据源键名（key）
|
||
fields: {
|
||
type: Object,
|
||
default () {
|
||
return {}
|
||
}
|
||
},
|
||
background: {
|
||
type: String,
|
||
// #ifdef APP-NVUE
|
||
default: '#fff'
|
||
// #endif
|
||
// #ifndef APP-NVUE
|
||
default: ''
|
||
// #endif
|
||
},
|
||
//是否有点击效果
|
||
highlight: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
flexStart: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
marginTop: {
|
||
type: [Number, String],
|
||
default: 0
|
||
},
|
||
marginBottom: {
|
||
type: [Number, String],
|
||
default: 0
|
||
},
|
||
//左右间距
|
||
padding: {
|
||
type: [Number, String],
|
||
default: 32
|
||
},
|
||
hdBorder: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
hdLeft: {
|
||
type: [Number, String],
|
||
default: 32
|
||
},
|
||
hdRight: {
|
||
type: [Number, String],
|
||
default: 0
|
||
},
|
||
hdBackground: {
|
||
type: String,
|
||
default: '#fff'
|
||
},
|
||
headSize: {
|
||
type: [Number, String],
|
||
default: 32
|
||
},
|
||
headColor: {
|
||
type: String,
|
||
// #ifdef APP-NVUE
|
||
default: '#181818'
|
||
// #endif
|
||
// #ifndef APP-NVUE
|
||
default: ''
|
||
// #endif
|
||
},
|
||
bdBorder: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
bdLeft: {
|
||
type: [Number, String],
|
||
default: 32
|
||
},
|
||
bdRight: {
|
||
type: [Number, String],
|
||
default: 0
|
||
},
|
||
//图片宽度
|
||
width: {
|
||
type: [Number, String],
|
||
default: 120
|
||
},
|
||
//图片高度
|
||
height: {
|
||
type: [Number, String],
|
||
default: 120
|
||
},
|
||
radius: {
|
||
type: [Number, String],
|
||
default: 0
|
||
},
|
||
size: {
|
||
type: [Number, String],
|
||
default: 32
|
||
},
|
||
color: {
|
||
type: String,
|
||
// #ifdef APP-NVUE
|
||
default: '#181818'
|
||
// #endif
|
||
// #ifndef APP-NVUE
|
||
default: ''
|
||
// #endif
|
||
},
|
||
fontWeight: {
|
||
type: [Number, String],
|
||
default: 'normal'
|
||
},
|
||
descSize: {
|
||
type: [Number, String],
|
||
default: 28
|
||
},
|
||
descColor: {
|
||
type: String,
|
||
// #ifdef APP-NVUE
|
||
default: '#7F7F7F'
|
||
// #endif
|
||
// #ifndef APP-NVUE
|
||
default: ''
|
||
// #endif
|
||
},
|
||
infoSize: {
|
||
type: [Number, String],
|
||
default: 24
|
||
},
|
||
infoColor: {
|
||
type: String,
|
||
// #ifdef APP-NVUE
|
||
default: '#b2b2b2'
|
||
// #endif
|
||
// #ifndef APP-NVUE
|
||
default: ''
|
||
// #endif
|
||
},
|
||
//是否需要panel外层上下线条
|
||
isBorder: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
borderColor: {
|
||
type: String,
|
||
// #ifdef APP-NVUE
|
||
default: '#eee'
|
||
// #endif
|
||
// #ifndef APP-NVUE
|
||
default: ''
|
||
// #endif
|
||
}
|
||
|
||
},
|
||
data() {
|
||
return {
|
||
listData: [],
|
||
head: 'head',
|
||
list: 'list',
|
||
src: 'src',
|
||
title: 'title',
|
||
desc: 'desc',
|
||
source: 'source',
|
||
time: 'time',
|
||
extra: 'extra'
|
||
};
|
||
},
|
||
watch: {
|
||
panelData: {
|
||
handler(val) {
|
||
this.initData(val)
|
||
},
|
||
deep: true
|
||
},
|
||
//未做深度监听
|
||
fields(val){
|
||
this.handleFileds()
|
||
}
|
||
},
|
||
created() {
|
||
this.initData(this.panelData)
|
||
},
|
||
methods: {
|
||
handleFileds() {
|
||
if (this.fields && typeof this.fields === 'object') {
|
||
this.head = this.fields.head || 'head';
|
||
this.list = this.fields.list || 'list';
|
||
this.src = this.fields.src || 'src';
|
||
this.title = this.fields.title || 'title';
|
||
this.desc = this.fields.desc || 'desc';
|
||
this.source = this.fields.source || 'source';
|
||
this.time = this.fields.time || 'time';
|
||
this.extra = this.fields.extra || 'extra';
|
||
}
|
||
},
|
||
initData(val) {
|
||
this.handleFileds()
|
||
val = val || {};
|
||
let list = val[this.list] && [...val[this.list]]
|
||
if (val[this.list] && Array.isArray(list)) {
|
||
this.listData = list;
|
||
} else {
|
||
this.listData = [val];
|
||
}
|
||
},
|
||
handleClick(index) {
|
||
this.$emit('click', {
|
||
index: index,
|
||
...this.listData[index]
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.fui-panel__wrap {
|
||
/* #ifndef APP-NVUE */
|
||
width: 100%;
|
||
border-top-width: 0;
|
||
border-bottom-width: 0;
|
||
/* #endif */
|
||
flex: 1;
|
||
position: relative;
|
||
overflow: hidden;
|
||
|
||
/* #ifdef APP-NVUE */
|
||
border-top-width: 0.5px;
|
||
border-top-style: solid;
|
||
border-bottom-width: 0.5px;
|
||
border-bottom-style: solid;
|
||
/* #endif */
|
||
}
|
||
|
||
/* #ifndef APP-NVUE */
|
||
.fui-panel__background {
|
||
background: var(--fui-bg-color, #FFFFFF);
|
||
}
|
||
|
||
/* #endif */
|
||
.fui-panel__unlined {
|
||
border-top-width: 0 !important;
|
||
border-bottom-width: 0 !important;
|
||
}
|
||
|
||
/* #ifndef APP-NVUE */
|
||
.fui-panel__wrap::before {
|
||
top: 0;
|
||
border-top: 1px solid var(--fui-color-border, #EEEEEE);
|
||
-webkit-transform-origin: 0 0;
|
||
transform-origin: 0 0;
|
||
-webkit-transform: scaleY(.5);
|
||
transform: scaleY(.5)
|
||
}
|
||
|
||
.fui-panel__wrap:after{
|
||
content: " ";
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
height: 1px;
|
||
}
|
||
.fui-panel__wrap::before {
|
||
content: " ";
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
height: 1px;
|
||
}
|
||
|
||
.fui-panel__wrap::after {
|
||
bottom: 0;
|
||
border-bottom: 1px solid var(--fui-color-border, #EEEEEE);
|
||
-webkit-transform-origin: 0 100%;
|
||
transform-origin: 0 100%;
|
||
-webkit-transform: scaleY(.5);
|
||
transform: scaleY(.5)
|
||
}
|
||
|
||
.fui-panel__unlined::before{
|
||
border-top-width: 0 !important;
|
||
border-bottom-width: 0 !important;
|
||
}
|
||
.fui-panel__unlined::after {
|
||
border-top-width: 0 !important;
|
||
border-bottom-width: 0 !important;
|
||
}
|
||
|
||
/* #endif */
|
||
|
||
.fui-panel__hd {
|
||
/* #ifndef APP-NVUE */
|
||
width: 100%;
|
||
display: flex;
|
||
word-break: break-all;
|
||
box-sizing: border-box;
|
||
/* #endif */
|
||
flex: 1;
|
||
padding-top: 26rpx;
|
||
padding-bottom: 26rpx;
|
||
font-weight: 700;
|
||
position: relative;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
}
|
||
|
||
.fui-panel__border {
|
||
position: absolute;
|
||
bottom: 0;
|
||
/* #ifdef APP-NVUE */
|
||
height: 0.5px;
|
||
z-index: -1;
|
||
/* #endif */
|
||
/* #ifndef APP-NVUE */
|
||
height: 1px;
|
||
-webkit-transform: scaleY(0.5);
|
||
transform: scaleY(0.5);
|
||
transform-origin: 0 100%;
|
||
z-index: 1;
|
||
/* #endif */
|
||
}
|
||
|
||
/* #ifndef APP-NVUE */
|
||
.fui-panel__border-color {
|
||
background: var(--fui-color-border, #EEEEEE) !important;
|
||
}
|
||
|
||
/* #endif */
|
||
|
||
.fui-panel__mediabox {
|
||
padding-top: 32rpx;
|
||
padding-bottom: 32rpx;
|
||
position: relative;
|
||
/* #ifndef APP-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
flex-direction: row;
|
||
}
|
||
|
||
.fui-mediabox__center {
|
||
align-items: center;
|
||
}
|
||
|
||
.fui-panel__mb-hd {
|
||
margin-right: 32rpx;
|
||
overflow: hidden;
|
||
/* #ifndef APP-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.fui-panel__mb-thumb {
|
||
/* #ifndef APP-NVUE */
|
||
display: block;
|
||
/* #endif */
|
||
}
|
||
|
||
.fui-panel__mb-bd {
|
||
flex: 1;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* 暂不使用 */
|
||
.fui-panel__mb-between {
|
||
/* #ifndef APP-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
/* 暂不使用 */
|
||
/* #ifndef APP-NVUE */
|
||
.fui-panel__bd-height {
|
||
min-height: var(--fui-img-base, 60px);
|
||
}
|
||
|
||
/* #endif */
|
||
|
||
.fui-panel__mb-title {
|
||
font-weight: normal;
|
||
/* #ifdef APP-NVUE */
|
||
lines: 1;
|
||
/* #endif */
|
||
|
||
/* #ifndef APP-NVUE */
|
||
white-space: nowrap;
|
||
line-height: 1.2;
|
||
display: block;
|
||
/* #endif */
|
||
}
|
||
|
||
/* #ifndef APP-NVUE */
|
||
.fui-panel__title-color {
|
||
color: var(--fui-color-title, #181818) !important;
|
||
}
|
||
|
||
/* #endif */
|
||
|
||
.fui-panel__mb-desc,
|
||
.fui-panel__mb-title {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.fui-panel__mb-desc {
|
||
padding-top: 12rpx;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
/* #ifndef APP-NVUE */
|
||
line-height: 1.4;
|
||
word-break: break-all;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
/* #endif */
|
||
|
||
/* #ifdef APP-NVUE */
|
||
lines: 2;
|
||
/* #endif */
|
||
}
|
||
|
||
/* #ifndef APP-NVUE */
|
||
.fui-panel__sub-color {
|
||
color: var(--fui-color-subtitle, #7F7F7F) !important;
|
||
}
|
||
|
||
/* #endif */
|
||
|
||
.fui-panel__mb-info {
|
||
/* #ifndef APP-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
align-items: center;
|
||
flex-direction: row;
|
||
margin-top: 32rpx;
|
||
padding-bottom: 8rpx;
|
||
font-weight: 400;
|
||
line-height: 1;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* #ifndef APP-NVUE */
|
||
.fui-panel__info-color {
|
||
color: var(--fui-color-label, #B2B2B2) !important;
|
||
}
|
||
|
||
/* #endif */
|
||
|
||
.fui-panel__info-meta {
|
||
padding-right: 32rpx;
|
||
}
|
||
|
||
.fui-panel__info-extra {
|
||
padding-left: 32rpx;
|
||
border-left-width: 1rpx;
|
||
border-left-style: solid;
|
||
}
|
||
|
||
/* #ifndef APP-NVUE */
|
||
.fui-panel__extra-bcolor {
|
||
border-left-color: var(--fui-color-label, #B2B2B2) !important;
|
||
}
|
||
|
||
/* #endif */
|
||
/* #ifndef APP-NVUE */
|
||
.fui-panel__hover {
|
||
background-color: var(--fui-bg-color-hover, rgba(0, 0, 0, 0.2)) !important;
|
||
}
|
||
|
||
/* #endif */
|
||
|
||
/* #ifdef APP-NVUE */
|
||
.fui-panel__hover-weex:active {
|
||
background: rgba(0, 0, 0, 0.2) !important;
|
||
}
|
||
|
||
/* #endif */
|
||
</style> |