271 lines
6.2 KiB
Vue
271 lines
6.2 KiB
Vue
|
<template>
|
|||
|
|
<view class="uni-card" :class="{ 'uni-card--full': isFull, 'uni-card--shadow': isShadow,'uni-card--border':border}"
|
|||
|
|
:style="{'margin':isFull?0:margin,'padding':spacing,'box-shadow':isShadow?shadow:''}">
|
|||
|
|
<!-- 封面 -->
|
|||
|
|
<slot name="cover">
|
|||
|
|
<view v-if="cover" class="uni-card__cover">
|
|||
|
|
<image class="uni-card__cover-image" mode="widthFix" @click="onClick('cover')" :src="cover"></image>
|
|||
|
|
</view>
|
|||
|
|
</slot>
|
|||
|
|
<slot name="title">
|
|||
|
|
<view v-if="title || extra" class="uni-card__header">
|
|||
|
|
<!-- 卡片标题 -->
|
|||
|
|
<view class="uni-card__header-box" @click="onClick('title')">
|
|||
|
|
<view v-if="thumbnail" class="uni-card__header-avatar">
|
|||
|
|
<image class="uni-card__header-avatar-image" :src="thumbnail" mode="aspectFit" />
|
|||
|
|
</view>
|
|||
|
|
<view class="uni-card__header-content">
|
|||
|
|
<text class="uni-card__header-content-title uni-ellipsis">{{ title }}</text>
|
|||
|
|
<text v-if="title&&subTitle"
|
|||
|
|
class="uni-card__header-content-subtitle uni-ellipsis">{{ subTitle }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="uni-card__header-extra" @click="onClick('extra')">
|
|||
|
|
<text class="uni-card__header-extra-text">{{ extra }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</slot>
|
|||
|
|
<!-- 卡片内容 -->
|
|||
|
|
<view class="uni-card__content" :style="{padding:padding}" @click="onClick('content')">
|
|||
|
|
<slot></slot>
|
|||
|
|
</view>
|
|||
|
|
<view class="uni-card__actions" @click="onClick('actions')">
|
|||
|
|
<slot name="actions"></slot>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
/**
|
|||
|
|
* Card 卡片
|
|||
|
|
* @description 卡片视图组件
|
|||
|
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=22
|
|||
|
|
* @property {String} title 标题文字
|
|||
|
|
* @property {String} subTitle 副标题
|
|||
|
|
* @property {Number} padding 内容内边距
|
|||
|
|
* @property {Number} margin 卡片外边距
|
|||
|
|
* @property {Number} spacing 卡片内边距
|
|||
|
|
* @property {String} extra 标题额外信息
|
|||
|
|
* @property {String} cover 封面图（本地路径需要引入）
|
|||
|
|
* @property {String} thumbnail 标题左侧缩略图
|
|||
|
|
* @property {Boolean} is-full = [true | false] 卡片内容是否通栏，为 true 时将去除padding值
|
|||
|
|
* @property {Boolean} is-shadow = [true | false] 卡片内容是否开启阴影
|
|||
|
|
* @property {String} shadow 卡片阴影
|
|||
|
|
* @property {Boolean} border 卡片边框
|
|||
|
|
* @event {Function} click 点击 Card 触发事件
|
|||
|
|
*/
|
|||
|
|
export default {
|
|||
|
|
name: 'UniCard',
|
|||
|
|
emits: ['click'],
|
|||
|
|
props: {
|
|||
|
|
title: {
|
|||
|
|
type: String,
|
|||
|
|
default: ''
|
|||
|
|
},
|
|||
|
|
subTitle: {
|
|||
|
|
type: String,
|
|||
|
|
default: ''
|
|||
|
|
},
|
|||
|
|
padding: {
|
|||
|
|
type: String,
|
|||
|
|
default: '10px'
|
|||
|
|
},
|
|||
|
|
margin: {
|
|||
|
|
type: String,
|
|||
|
|
default: '15px'
|
|||
|
|
},
|
|||
|
|
spacing: {
|
|||
|
|
type: String,
|
|||
|
|
default: '0 10px'
|
|||
|
|
},
|
|||
|
|
extra: {
|
|||
|
|
type: String,
|
|||
|
|
default: ''
|
|||
|
|
},
|
|||
|
|
cover: {
|
|||
|
|
type: String,
|
|||
|
|
default: ''
|
|||
|
|
},
|
|||
|
|
thumbnail: {
|
|||
|
|
type: String,
|
|||
|
|
default: ''
|
|||
|
|
},
|
|||
|
|
isFull: {
|
|||
|
|
// 内容区域是否通栏
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
},
|
|||
|
|
isShadow: {
|
|||
|
|
// 是否开启阴影
|
|||
|
|
type: Boolean,
|
|||
|
|
default: true
|
|||
|
|
},
|
|||
|
|
shadow: {
|
|||
|
|
type: String,
|
|||
|
|
default: '0px 0px 3px 1px rgba(0, 0, 0, 0.08)'
|
|||
|
|
},
|
|||
|
|
border: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
onClick(type) {
|
|||
|
|
this.$emit('click', type)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
$uni-border-3: #EBEEF5 !default;
|
|||
|
|
$uni-shadow-base:0 0px 6px 1px rgba($color: #a5a5a5, $alpha: 0.2) !default;
|
|||
|
|
$uni-main-color: #3a3a3a !default;
|
|||
|
|
$uni-base-color: #6a6a6a !default;
|
|||
|
|
$uni-secondary-color: #909399 !default;
|
|||
|
|
$uni-spacing-sm: 8px !default;
|
|||
|
|
$uni-border-color:$uni-border-3;
|
|||
|
|
$uni-shadow: $uni-shadow-base;
|
|||
|
|
$uni-card-title: 15px;
|
|||
|
|
$uni-cart-title-color:$uni-main-color;
|
|||
|
|
$uni-card-subtitle: 12px;
|
|||
|
|
$uni-cart-subtitle-color:$uni-secondary-color;
|
|||
|
|
$uni-card-spacing: 10px;
|
|||
|
|
$uni-card-content-color: $uni-base-color;
|
|||
|
|
|
|||
|
|
.uni-card {
|
|||
|
|
margin: $uni-card-spacing;
|
|||
|
|
padding: 0 $uni-spacing-sm;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
|
|||
|
|
background-color: #fff;
|
|||
|
|
flex: 1;
|
|||
|
|
|
|||
|
|
.uni-card__cover {
|
|||
|
|
position: relative;
|
|||
|
|
margin-top: $uni-card-spacing;
|
|||
|
|
flex-direction: row;
|
|||
|
|
overflow: hidden;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
.uni-card__cover-image {
|
|||
|
|
flex: 1;
|
|||
|
|
// width: 100%;
|
|||
|
|
/* #ifndef APP-PLUS */
|
|||
|
|
vertical-align: middle;
|
|||
|
|
/* #endif */
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.uni-card__header {
|
|||
|
|
display: flex;
|
|||
|
|
border-bottom: 1px $uni-border-color solid;
|
|||
|
|
flex-direction: row;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: $uni-card-spacing;
|
|||
|
|
overflow: hidden;
|
|||
|
|
|
|||
|
|
.uni-card__header-box {
|
|||
|
|
/* #ifndef APP-NVUE */
|
|||
|
|
display: flex;
|
|||
|
|
/* #endif */
|
|||
|
|
flex: 1;
|
|||
|
|
flex-direction: row;
|
|||
|
|
align-items: center;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.uni-card__header-avatar {
|
|||
|
|
width: 40px;
|
|||
|
|
height: 40px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
margin-right: $uni-card-spacing;
|
|||
|
|
.uni-card__header-avatar-image {
|
|||
|
|
flex: 1;
|
|||
|
|
width: 40px;
|
|||
|
|
height: 40px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.uni-card__header-content {
|
|||
|
|
/* #ifndef APP-NVUE */
|
|||
|
|
display: flex;
|
|||
|
|
/* #endif */
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: center;
|
|||
|
|
flex: 1;
|
|||
|
|
// height: 40px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
|
|||
|
|
.uni-card__header-content-title {
|
|||
|
|
font-size: $uni-card-title;
|
|||
|
|
color: $uni-cart-title-color;
|
|||
|
|
// line-height: 22px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.uni-card__header-content-subtitle {
|
|||
|
|
font-size: $uni-card-subtitle;
|
|||
|
|
margin-top: 5px;
|
|||
|
|
color: $uni-cart-subtitle-color;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.uni-card__header-extra {
|
|||
|
|
line-height: 12px;
|
|||
|
|
|
|||
|
|
.uni-card__header-extra-text {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: $uni-cart-subtitle-color;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.uni-card__content {
|
|||
|
|
padding: $uni-card-spacing;
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: $uni-card-content-color;
|
|||
|
|
line-height: 22px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.uni-card__actions {
|
|||
|
|
font-size: 12px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.uni-card--border {
|
|||
|
|
border: 1px solid $uni-border-color;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.uni-card--shadow {
|
|||
|
|
position: relative;
|
|||
|
|
/* #ifndef APP-NVUE */
|
|||
|
|
box-shadow: $uni-shadow;
|
|||
|
|
/* #endif */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.uni-card--full {
|
|||
|
|
margin: 0;
|
|||
|
|
border-left-width: 0;
|
|||
|
|
border-left-width: 0;
|
|||
|
|
border-radius: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* #ifndef APP-NVUE */
|
|||
|
|
.uni-card--full:after {
|
|||
|
|
border-radius: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* #endif */
|
|||
|
|
.uni-ellipsis {
|
|||
|
|
/* #ifndef APP-NVUE */
|
|||
|
|
overflow: hidden;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
/* #endif */
|
|||
|
|
/* #ifdef APP-NVUE */
|
|||
|
|
lines: 1;
|
|||
|
|
/* #endif */
|
|||
|
|
}
|
|||
|
|
</style>
|