107 lines
2.3 KiB
Vue
107 lines
2.3 KiB
Vue
<template>
|
|
<div class="md-cashier-channel-item">
|
|
<div class="item-icon" :class="data.icon" v-if="data.icon">
|
|
<md-icon :name="data.icon" size="lg"></md-icon>
|
|
</div>
|
|
<div class="item-image" v-else-if="data.img">
|
|
<img :src="data.img">
|
|
</div>
|
|
<div class="item-label">
|
|
<p class="title">
|
|
<span v-html="data.text || data"></span>
|
|
<span
|
|
v-if="data.action"
|
|
class="title-active"
|
|
v-html="data.action.text"
|
|
@click.stop="data.action.handler"
|
|
></span>
|
|
</p>
|
|
<p
|
|
class="desc"
|
|
v-if="data.desc"
|
|
v-html="data.desc"
|
|
></p>
|
|
</div>
|
|
<div class="item-check-icon">
|
|
<md-icon
|
|
v-if="data.disabled"
|
|
name="check-disabled"
|
|
></md-icon>
|
|
<md-icon
|
|
v-else-if="active"
|
|
name="checked"
|
|
></md-icon>
|
|
<md-icon
|
|
v-else
|
|
name="check"
|
|
></md-icon>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Icon from '../icon'
|
|
export default {
|
|
name: 'md-cashier-channel-item',
|
|
|
|
components: {
|
|
[Icon.name]: Icon,
|
|
},
|
|
|
|
props: {
|
|
data: {
|
|
type: Object,
|
|
default() {
|
|
/* istanbul ignore next */
|
|
return {}
|
|
},
|
|
},
|
|
active: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
},
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="stylus">
|
|
.md-cashier-channel-item
|
|
block()
|
|
position relative
|
|
padding 20px 40px 20px 0
|
|
box-sizing border-box
|
|
// display flex
|
|
// align-items center
|
|
.item-icon, .item-image
|
|
position relative
|
|
float left
|
|
width 32px
|
|
height 32px
|
|
margin 6px 0
|
|
.item-image img
|
|
block()
|
|
.item-label
|
|
float left
|
|
margin-left h-gap-sm
|
|
.title
|
|
font-size cashier-choose-channel-title-font-size
|
|
color cashier-choose-channel-title-color
|
|
.title-active
|
|
padding-left h-gap-sm
|
|
font-size cashier-choose-channel-title-action-font-size
|
|
color cashier-choose-channel-title-action-color
|
|
.desc
|
|
margin-top v-gap-xs
|
|
font-size cashier-choose-channel-desc-font-size
|
|
color cashier-choose-channel-desc-color
|
|
.item-check-icon
|
|
position absolute
|
|
top 50%
|
|
right 0
|
|
transform translateY(-50%)
|
|
.md-icon
|
|
display flex
|
|
color color-text-placeholder
|
|
&.md-icon-checked
|
|
color cashier-choose-channel-icon-color
|
|
</style>
|