|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <view
|
|
|
+ <div
|
|
|
:class="[
|
|
|
'card ',
|
|
|
{
|
|
@@ -26,36 +26,36 @@
|
|
|
{ 'background-color': backgroundColor ? backgroundColor : '#fff' },
|
|
|
]"
|
|
|
>
|
|
|
- <view v-if="type == 'image-text-card'">
|
|
|
- <view class="image-text-card__title">
|
|
|
- <view class="image-text-card__title__left">
|
|
|
- <view class="image-text-card__title__left__title">
|
|
|
+ <div v-if="type == 'image-text-card'">
|
|
|
+ <div class="image-text-card__title">
|
|
|
+ <div class="image-text-card__title__left">
|
|
|
+ <div class="image-text-card__title__left__title">
|
|
|
{{ title }}
|
|
|
- </view>
|
|
|
- <view class="image-text-card__title__left__icon">
|
|
|
- <view class="image-text-card__title__left__icon__item">
|
|
|
+ </div>
|
|
|
+ <div class="image-text-card__title__left__icon">
|
|
|
+ <div class="image-text-card__title__left__icon__item">
|
|
|
<k-icon
|
|
|
class="image-text-card__title__left__icon__item__icon"
|
|
|
:name="leftIcon.name"
|
|
|
:size="leftIcon.size"
|
|
|
:color="leftIcon.color"
|
|
|
></k-icon>
|
|
|
- <view
|
|
|
+ <div
|
|
|
class="image-text-card__title__left__icon__item__label"
|
|
|
:style="{
|
|
|
'font-size': leftIcon.labelSize ? leftIcon.labelSize : '16px',
|
|
|
}"
|
|
|
- >{{ leftIcon.label }}</view
|
|
|
+ >{{ leftIcon.label }}</div
|
|
|
>
|
|
|
- </view>
|
|
|
- <view class="image-text-card__title__left__icon__item">
|
|
|
+ </div>
|
|
|
+ <div class="image-text-card__title__left__icon__item">
|
|
|
<k-icon
|
|
|
class="image-text-card__title__left__icon__item__icon"
|
|
|
:name="rightIcon.name"
|
|
|
:size="rightIcon.size"
|
|
|
:color="rightIcon.color"
|
|
|
></k-icon>
|
|
|
- <view
|
|
|
+ <div
|
|
|
class="image-text-card__title__left__icon__item__label"
|
|
|
:style="{
|
|
|
'font-size': rightIcon.labelSize
|
|
@@ -63,35 +63,35 @@
|
|
|
: '16px',
|
|
|
}"
|
|
|
>
|
|
|
- {{ rightIcon.label }}</view
|
|
|
+ {{ rightIcon.label }}</div
|
|
|
>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view v-if="imageSrc" class="image-text-card__title__right">
|
|
|
- <image :src="imageSrc" />
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="image-text-card__content" v-if="contentListData">
|
|
|
- <view
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="imageSrc" class="image-text-card__title__right">
|
|
|
+ <img :src="imageSrc" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="image-text-card__content" v-if="contentListData">
|
|
|
+ <div
|
|
|
class="image-text-card__content__item"
|
|
|
v-for="(item, index) in contentListData"
|
|
|
:key="index"
|
|
|
>
|
|
|
- <view class="image-text-card__content__item__left">
|
|
|
+ <div class="image-text-card__content__item__left">
|
|
|
{{ item.label }}
|
|
|
- </view>
|
|
|
- <view class="image-text-card__content__item__right">
|
|
|
- <view :class="item.ellipsis ? ' kui-ellipsis' : ''">
|
|
|
+ </div>
|
|
|
+ <div class="image-text-card__content__item__right">
|
|
|
+ <div :class="item.ellipsis ? ' kui-ellipsis' : ''">
|
|
|
{{ item.content }}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view v-else-if="type == 'text-btn-card'">
|
|
|
- <view class="text-btn-card-border__header">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div v-else-if="type == 'text-btn-card'">
|
|
|
+ <div class="text-btn-card-border__header">
|
|
|
<k-tag
|
|
|
commercial
|
|
|
v-if="tagText"
|
|
@@ -100,33 +100,33 @@
|
|
|
>
|
|
|
{{ tagText }}</k-tag
|
|
|
>
|
|
|
- <view class="text-btn-card-border__header__content">{{
|
|
|
+ <div class="text-btn-card-border__header__content">{{
|
|
|
headerContent
|
|
|
- }}</view>
|
|
|
- <view class="text-btn-card-border__header__status">{{
|
|
|
+ }}</div>
|
|
|
+ <div class="text-btn-card-border__header__status">{{
|
|
|
headerStatus
|
|
|
- }}</view>
|
|
|
- </view>
|
|
|
- <view
|
|
|
+ }}</div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
:class="[
|
|
|
'text-btn-card-border__title ',
|
|
|
{ 'text-btn-card-border__title-bold': titleFontBold },
|
|
|
]"
|
|
|
>
|
|
|
{{ title }}
|
|
|
- </view>
|
|
|
- <view class="text-btn-card-border__content-list" v-if="contentListData">
|
|
|
- <view v-for="(item, index) in contentListData" :key="index">
|
|
|
- <view
|
|
|
+ </div>
|
|
|
+ <div class="text-btn-card-border__content-list" v-if="contentListData">
|
|
|
+ <div v-for="(item, index) in contentListData" :key="index">
|
|
|
+ <div
|
|
|
class="left-icon__content text-btn-card-border__content-list__item"
|
|
|
>
|
|
|
- <view
|
|
|
+ <div
|
|
|
class="text-btn-card-border__content-list__item__left"
|
|
|
:style="{ width: item.labelWidth ? item.labelWidth : '80px' }"
|
|
|
>
|
|
|
{{ item.label }}
|
|
|
- </view>
|
|
|
- <view
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
class="text-btn-card-border__content-list__item__right"
|
|
|
:style="{
|
|
|
width: item.labelWidth
|
|
@@ -134,22 +134,22 @@
|
|
|
: 'calc(100% - 80px)',
|
|
|
}"
|
|
|
>
|
|
|
- <view :class="item.ellipsis ? 'kui-ellipsis' : ''">
|
|
|
+ <div :class="item.ellipsis ? 'kui-ellipsis' : ''">
|
|
|
{{ item.content }}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
v-if="contentVertical"
|
|
|
class="text-btn-card-border__content-vertical"
|
|
|
>
|
|
|
{{ contentVertical }}
|
|
|
- </view>
|
|
|
- <view v-if="contentBottom" class="text-btn-card-border__content-bottom">
|
|
|
+ </div>
|
|
|
+ <div v-if="contentBottom" class="text-btn-card-border__content-bottom">
|
|
|
{{ contentBottom }}
|
|
|
- </view>
|
|
|
+ </div>
|
|
|
<k-button
|
|
|
:class="
|
|
|
'text-btn-card-border__btn ' +
|
|
@@ -167,62 +167,62 @@
|
|
|
size="middle"
|
|
|
>
|
|
|
</k-button>
|
|
|
- </view>
|
|
|
+ </div>
|
|
|
|
|
|
- <view
|
|
|
+ <div
|
|
|
v-else-if="type == 'function-card' && functionCardData.length > 0"
|
|
|
class="function-card"
|
|
|
>
|
|
|
- <view
|
|
|
+ <div
|
|
|
class="function-card__item"
|
|
|
v-for="(item, index) in functionCardData"
|
|
|
v-bind:key="index"
|
|
|
@click="clickIcon(item)"
|
|
|
>
|
|
|
- <view
|
|
|
+ <div
|
|
|
class="function-card__item__icon"
|
|
|
:style="{ width: iconSize + 'px' }"
|
|
|
>
|
|
|
<k-icon :name="item.icon" :size="iconSize" color="#666"></k-icon>
|
|
|
- </view>
|
|
|
- <view class="function-card__item__label">{{ item.label }}</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view v-else-if="type == 'location-card'">
|
|
|
- <view class="location-card__left">
|
|
|
+ </div>
|
|
|
+ <div class="function-card__item__label">{{ item.label }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-else-if="type == 'location-card'">
|
|
|
+ <div class="location-card__left">
|
|
|
<p class="location-card__left__title">{{ title }}</p>
|
|
|
<p class="location-card__left__description">{{ description }}</p>
|
|
|
<!-- <k-tag commercial v-if="!bgFull" size="small" class="location-card__tag">{{tagText}}</k-tag> -->
|
|
|
- <view
|
|
|
+ <div
|
|
|
:class="
|
|
|
'location-card__tag ' +
|
|
|
(bgFull ? 'location-card__tag-white' : 'location-card__tag-theme')
|
|
|
"
|
|
|
>
|
|
|
- {{ tagText }}</view
|
|
|
+ {{ tagText }}</div
|
|
|
>
|
|
|
- </view>
|
|
|
- <view class="location-card__right">
|
|
|
- <view
|
|
|
+ </div>
|
|
|
+ <div class="location-card__right">
|
|
|
+ <div
|
|
|
v-if="commonText"
|
|
|
class="location-card__right__common"
|
|
|
:class="bgFull ? 'location-card__right__common-full' : ''"
|
|
|
- >{{ commonText }}</view
|
|
|
+ >{{ commonText }}</div
|
|
|
>
|
|
|
- <view class="location-card__right__text">
|
|
|
+ <div class="location-card__right__text">
|
|
|
{{ detail }}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <view
|
|
|
+ <div
|
|
|
v-else-if="type == 'gap-card'"
|
|
|
class="order ext-class"
|
|
|
@click.stop="toDetail"
|
|
|
>
|
|
|
- <view class="order-info">
|
|
|
- <view class="space-name kui-ellipsis">{{ title }}</view>
|
|
|
- <view
|
|
|
+ <div class="order-info">
|
|
|
+ <div class="space-name kui-ellipsis">{{ title }}</div>
|
|
|
+ <div
|
|
|
class="left-icon"
|
|
|
v-for="(item, index) in gapCardIconList"
|
|
|
:key="index"
|
|
@@ -234,18 +234,18 @@
|
|
|
"
|
|
|
>{{ item.content }}</text
|
|
|
>
|
|
|
- </view>
|
|
|
+ </div>
|
|
|
|
|
|
- <view class="status ext-status-class" v-if="tagText">{{
|
|
|
+ <div class="status ext-status-class" v-if="tagText">{{
|
|
|
tagText
|
|
|
- }}</view>
|
|
|
- </view>
|
|
|
- <view class="deliver"></view>
|
|
|
- <view class="btn-group">
|
|
|
+ }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="deliver"></div>
|
|
|
+ <div class="btn-group">
|
|
|
<slot />
|
|
|
- </view>
|
|
|
- <view class="action-group">
|
|
|
- <view
|
|
|
+ </div>
|
|
|
+ <div class="action-group">
|
|
|
+ <div
|
|
|
:class="[
|
|
|
'text-button',
|
|
|
{
|
|
@@ -253,11 +253,11 @@
|
|
|
},
|
|
|
]"
|
|
|
@click.stop="clickLeftBtn"
|
|
|
- >{{ leftBtnText }}</view
|
|
|
+ >{{ leftBtnText }}</div
|
|
|
>
|
|
|
<block>
|
|
|
- <view class="divider" />
|
|
|
- <view
|
|
|
+ <div class="divider" />
|
|
|
+ <div
|
|
|
:class="[
|
|
|
'text-button',
|
|
|
{
|
|
@@ -265,23 +265,23 @@
|
|
|
},
|
|
|
]"
|
|
|
@click.stop="clickRightBtn"
|
|
|
- >{{ rightBtnText }}</view
|
|
|
+ >{{ rightBtnText }}</div
|
|
|
>
|
|
|
</block>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- <view v-if="type == 'opacity-card' && themeColor" class="card-opacity-bg-opacity"></view> -->
|
|
|
- <view
|
|
|
+ <!-- <div v-if="type == 'opacity-card' && themeColor" class="card-opacity-bg-opacity"></div> -->
|
|
|
+ <div
|
|
|
v-else
|
|
|
:class="
|
|
|
type == 'opacity-card' && themeColor ? 'card-opacity-bg-opacity' : ''
|
|
|
"
|
|
|
>
|
|
|
- <view>
|
|
|
+ <div>
|
|
|
<p class="card-opacity__title">{{ title }}</p>
|
|
|
<p class="card-opacity__description">{{ description }}{{ ' >' }}</p>
|
|
|
- <view class="card-opacity__btn">
|
|
|
+ <div class="card-opacity__btn">
|
|
|
<k-button
|
|
|
@click="clickBtn"
|
|
|
:title="btnText"
|
|
@@ -293,88 +293,27 @@
|
|
|
:bgColor="themeColor"
|
|
|
>
|
|
|
</k-button>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- <view v-else>
|
|
|
+ <!-- <div v-else>
|
|
|
<p class="card-opacity__title">{{ title }}</p>
|
|
|
<p class="card-opacity__description">{{ description }}{{ ' >' }}</p>
|
|
|
- <view class="card-opacity__btn">
|
|
|
+ <div class="card-opacity__btn">
|
|
|
<k-button @click="clickBtn" :title="btnText" width="121px" height="33px" fontSize="10px" size="middle"
|
|
|
:borderColor="themeColor" :bgColor="themeColor">
|
|
|
</k-button>
|
|
|
- </view>
|
|
|
- </view> -->
|
|
|
- </view>
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
-<script lang="ts">
|
|
|
+<script>
|
|
|
import Vue, { VueConstructor } from 'vue';
|
|
|
import props from './props';
|
|
|
-type PropType = {
|
|
|
- type:
|
|
|
- | 'image-text-card'
|
|
|
- | 'text-btn-card'
|
|
|
- | 'function-card'
|
|
|
- | 'location-card'
|
|
|
- | 'gap-card'
|
|
|
- | 'opacity-card';
|
|
|
- btnType: 'default' | 'default' | 'outline' | 'plain' | 'text';
|
|
|
- bgFull: boolean;
|
|
|
- title: string;
|
|
|
- description: string;
|
|
|
- tagText: string;
|
|
|
- btnText: string;
|
|
|
- detail: string;
|
|
|
- headerContent: string;
|
|
|
- headerStatus: string;
|
|
|
- contentVertical: string;
|
|
|
- contentBottom: string;
|
|
|
- imageSrc: string;
|
|
|
- leftIcon: {
|
|
|
- name: string;
|
|
|
- color: string;
|
|
|
- size: number;
|
|
|
- label: string;
|
|
|
- labelSize: string;
|
|
|
- };
|
|
|
- rightIcon: {
|
|
|
- name: string;
|
|
|
- color: string;
|
|
|
- size: number;
|
|
|
- label: string;
|
|
|
- labelSize: string;
|
|
|
- };
|
|
|
- titleFontBold: boolean;
|
|
|
- isCircle: boolean;
|
|
|
- isBorder: boolean;
|
|
|
- isShadow: boolean;
|
|
|
- themeColor: string;
|
|
|
- backgroundColor: string;
|
|
|
- functionCardData: Array<{ icon: string; label: string; url: string }>;
|
|
|
- leftBtnText: string;
|
|
|
- rightBtnText: string;
|
|
|
- leftBtnDisabled: boolean;
|
|
|
- rightBtnDisabled: boolean;
|
|
|
- gapCardIconList: Array<{
|
|
|
- icon: string;
|
|
|
- size: number;
|
|
|
- content: string;
|
|
|
- ellipsis: boolean;
|
|
|
- }>;
|
|
|
- iconSize: number;
|
|
|
- contentListData: Array<{
|
|
|
- icon: string;
|
|
|
- size: number;
|
|
|
- label: string;
|
|
|
- content: string;
|
|
|
- ellipsis: boolean;
|
|
|
- labelWidth: string;
|
|
|
- }>;
|
|
|
- commonText: string;
|
|
|
-};
|
|
|
-export default (Vue as VueConstructor<Vue & PropType>).extend({
|
|
|
+
|
|
|
+export default {
|
|
|
name: 'k-card',
|
|
|
mixins: [props],
|
|
|
data() {
|
|
@@ -385,10 +324,10 @@ export default (Vue as VueConstructor<Vue & PropType>).extend({
|
|
|
// eslint-disable-next-line no-console
|
|
|
console.log('90909090');
|
|
|
},
|
|
|
- clickIcon(inData: { icon: string; label: string; url: string }) {
|
|
|
+ clickIcon(inData) {
|
|
|
this.$emit('click', inData);
|
|
|
},
|
|
|
- clickBtn(inData: any) {
|
|
|
+ clickBtn(inData) {
|
|
|
this.$emit('click', inData);
|
|
|
},
|
|
|
clickLeftBtn() {
|
|
@@ -402,7 +341,7 @@ export default (Vue as VueConstructor<Vue & PropType>).extend({
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
-});
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
@@ -871,7 +810,7 @@ export default (Vue as VueConstructor<Vue & PropType>).extend({
|
|
|
top: 0;
|
|
|
right: 0;
|
|
|
|
|
|
- image {
|
|
|
+ img {
|
|
|
width: 100%;
|
|
|
height: 100px;
|
|
|
}
|