326 lines
7.0 KiB
Vue
326 lines
7.0 KiB
Vue
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 8 6 140 7 254 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||
<template>
|
||
<view class="fui-card__wrap"
|
||
:class="{'fui-card__full':full,'fui-card__border':showBorder,'fui-card__border-radius':showBorder && !isNvue && !full}"
|
||
:style="{marginTop:margin[0] || 0,marginRight:full?0: (margin[1] || 0),marginBottom:margin[2] || margin[0] || 0,marginLeft:full?0:(margin[3] || margin[1] || 0),background:background,borderRadius:full?0:radius,'box-shadow':showBorder?'none':shadow,borderColor:isNvue?borderColor:'transparent'}"
|
||
@tap="handleClick">
|
||
<view class="fui-card__header" v-if="tag || title || src" :class="{'fui-card__header-line':headerLine}"
|
||
:style="{'border-top-left-radius':full?0:radius,'border-top-right-radius':full?0:radius,'border-bottom-color':isNvue && headerLine?lineColor:'transparent',paddingTop:padding[0] || 0,paddingRight:padding[1]||0,paddingBottom:padding[2] || padding[0] || 0,paddingLeft:padding[3] || padding[1] || 0,background:headerBackground}">
|
||
<view class="fui-card__header-left">
|
||
<image :src="src" class="fui-card__header-thumb" v-if="src"
|
||
:style="{height:height+'rpx',width:width+'rpx',borderRadius:imageRadius}"></image>
|
||
<text class="fui-card__header-title" :style="{fontSize:size+'rpx',color:color}"
|
||
v-if="title">{{title}}</text>
|
||
</view>
|
||
<view class="fui-card__header-right" v-if="tag">
|
||
<text :style="{fontSize:tagSize+'rpx',color:tagColor}">{{tag}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="fui-card__body" :class="{'fui-card__header-line':footerLine}">
|
||
<slot></slot>
|
||
</view>
|
||
<view class="fui-card__footer"
|
||
:style="{'border-bottom-left-radius':full?0:radius,'border-bottom-right-radius':full?0:radius}">
|
||
<slot name="footer"></slot>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "fui-card",
|
||
emits: ['click'],
|
||
props: {
|
||
//card margin值：[上、右、下、左]
|
||
margin: {
|
||
type: Array,
|
||
default () {
|
||
return ['0', '32rpx']
|
||
}
|
||
},
|
||
//是否通栏，为true时margin-left，margin-right失效
|
||
full: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
//card 背景色
|
||
background: {
|
||
type: String,
|
||
default: '#fff'
|
||
},
|
||
//card 圆角，非nvue下showBorder为false时生效
|
||
radius: {
|
||
type: String,
|
||
default: '16rpx'
|
||
},
|
||
//阴影：nvue下
|
||
shadow: {
|
||
type: String,
|
||
default: '0 2rpx 4rpx 0 rgba(2, 4, 38, 0.05)'
|
||
},
|
||
//是否显示card 边框，为true时box-shadow失效
|
||
showBorder: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
//边框颜色，仅nvue下生效
|
||
borderColor: {
|
||
type: String,
|
||
default: 'red'
|
||
},
|
||
headerBackground: {
|
||
type: String,
|
||
default: '#fff'
|
||
},
|
||
//是否需要header底部线条
|
||
headerLine: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
//是否需要内容与footer之间线条
|
||
footerLine: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
//header 底部线条颜色，仅nvue有效，非nvue改变颜色使用css变量
|
||
lineColor: {
|
||
type: String,
|
||
default: '#EEEEEE'
|
||
},
|
||
//header padding值：[上、右、下、左]
|
||
padding: {
|
||
type: Array,
|
||
default () {
|
||
return ['20rpx', '20rpx']
|
||
}
|
||
},
|
||
//头像，图标图片地址
|
||
src: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
//图片宽度，单位rpx
|
||
width: {
|
||
type: [Number, String],
|
||
default: 64
|
||
},
|
||
//图片高度，单位rpx
|
||
height: {
|
||
type: [Number, String],
|
||
default: 64
|
||
},
|
||
//图片圆角
|
||
imageRadius: {
|
||
type: String,
|
||
default: '8rpx'
|
||
},
|
||
title: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
size: {
|
||
type: [Number, String],
|
||
default: 30
|
||
},
|
||
color: {
|
||
type: String,
|
||
default: '#7F7F7F'
|
||
},
|
||
tag: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
tagSize: {
|
||
type: [Number, String],
|
||
default: 24
|
||
},
|
||
tagColor: {
|
||
type: String,
|
||
default: '#b2b2b2'
|
||
},
|
||
index: {
|
||
type: Number,
|
||
default: 0
|
||
}
|
||
},
|
||
data() {
|
||
let isNvue = false;
|
||
// #ifdef APP-NVUE
|
||
isNvue = true;
|
||
// #endif
|
||
return {
|
||
isNvue
|
||
};
|
||
},
|
||
methods: {
|
||
handleClick() {
|
||
this.$emit('click', {
|
||
index: this.index
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.fui-card__wrap {
|
||
/* #ifndef APP-NVUE */
|
||
flex: 1;
|
||
box-sizing: border-box;
|
||
/* #endif */
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* #ifndef APP-NVUE */
|
||
.fui-card__full {
|
||
margin-left: 0 !important;
|
||
margin-right: 0 !important;
|
||
border-radius: 0 !important;
|
||
}
|
||
|
||
/* #endif */
|
||
|
||
/* #ifndef APP-NVUE */
|
||
.fui-card__full::after {
|
||
border-radius: 0 !important;
|
||
}
|
||
|
||
/* #endif */
|
||
|
||
.fui-card__border {
|
||
position: relative;
|
||
box-shadow: none !important;
|
||
/* #ifdef APP-NVUE */
|
||
border-width: 0.5px;
|
||
border-style: solid;
|
||
/* #endif */
|
||
}
|
||
|
||
/* #ifndef APP-NVUE */
|
||
.fui-card__border-radius {
|
||
border-radius: 16rpx !important;
|
||
}
|
||
|
||
.fui-card__border::after {
|
||
content: ' ';
|
||
position: absolute;
|
||
height: 200%;
|
||
width: 200%;
|
||
border: 1px solid var(--fui-color-border, #EEEEEE);
|
||
transform-origin: 0 0;
|
||
-webkit-transform-origin: 0 0;
|
||
-webkit-transform: scale(0.5);
|
||
transform: scale(0.5);
|
||
left: 0;
|
||
top: 0;
|
||
border-radius: 32rpx;
|
||
box-sizing: border-box;
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* #endif */
|
||
|
||
.fui-card__header {
|
||
/* #ifndef APP-NVUE */
|
||
width: 100%;
|
||
display: flex;
|
||
box-sizing: border-box;
|
||
overflow: hidden;
|
||
/* #endif */
|
||
/* #ifdef APP-NVUE */
|
||
flex: 1;
|
||
/* #endif */
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
position: relative;
|
||
}
|
||
|
||
.fui-card__header-left {
|
||
/* #ifndef APP-NVUE */
|
||
display: flex;
|
||
white-space: nowrap;
|
||
/* #endif */
|
||
flex-direction: row;
|
||
align-items: center;
|
||
}
|
||
|
||
.fui-card__header-line {
|
||
position: relative;
|
||
/* #ifdef APP-NVUE */
|
||
border-bottom-width: 0.5px;
|
||
border-bottom-style: solid;
|
||
border-bottom-color: #EEEEEE;
|
||
/* #endif */
|
||
}
|
||
|
||
/* #ifndef APP-NVUE */
|
||
.fui-card__header-line::after {
|
||
content: '';
|
||
position: absolute;
|
||
border-bottom: 1px solid var(--fui-color-border, #EEEEEE);
|
||
-webkit-transform: scaleY(0.5);
|
||
transform: scaleY(0.5);
|
||
transform-origin: 0 100%;
|
||
bottom: 0;
|
||
right: 0;
|
||
left: 0;
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* #endif */
|
||
|
||
.fui-card__header-thumb {
|
||
/* #ifndef APP-NVUE */
|
||
vertical-align: middle;
|
||
/* #endif */
|
||
margin-right: 20rpx;
|
||
/* #ifndef APP-NVUE */
|
||
flex-shrink: 0;
|
||
/* #endif */
|
||
}
|
||
|
||
.fui-card__header-title {
|
||
/* #ifndef APP-NVUE */
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
max-width: 380rpx;
|
||
/* #endif */
|
||
/* #ifndef APP-NVUE */
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
/* #endif */
|
||
|
||
/* #ifdef APP-NVUE */
|
||
lines: 1;
|
||
/* #endif */
|
||
}
|
||
|
||
.fui-card__header-right {
|
||
text-align: right;
|
||
/* #ifndef APP-NVUE */
|
||
flex-shrink: 0;
|
||
/* #endif */
|
||
}
|
||
|
||
.fui-card__body {
|
||
/* #ifdef APP-NVUE */
|
||
flex: 1;
|
||
/* #endif */
|
||
/* #ifndef APP-NVUE */
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
/* #endif */
|
||
}
|
||
|
||
.fui-card__footer {
|
||
/* #ifdef APP-NVUE */
|
||
flex: 1;
|
||
/* #endif */
|
||
/* #ifndef APP-NVUE */
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
/* #endif */
|
||
}
|
||
</style> |