时舟年
88 lines
3.5 KiB
Vue
88 lines
3.5 KiB
Vue
<template>
|
|
<view class="checkin-section">
|
|
<view class="checkin-section__inner">
|
|
<view class="checkin-section__header">
|
|
<view class="checkin-section__header-inner">
|
|
<text class="checkin-section__title">签到记录</text>
|
|
<view
|
|
class="checkin-section__link"
|
|
hover-class="mi-tap--hover"
|
|
:hover-stay-time="150"
|
|
@tap="$emit('view-all')"
|
|
>
|
|
<text class="checkin-section__view-all">查看全部</text>
|
|
<image
|
|
class="checkin-section__link-arrow"
|
|
src="/static/images/chevronright2.png"
|
|
mode="aspectFit"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="checkin-section__list">
|
|
<view class="checkin-section__list-inner">
|
|
<view
|
|
v-for="(item, index) in items"
|
|
:key="item.id"
|
|
class="checkin-section__row"
|
|
>
|
|
<view v-if="index > 0" class="checkin-section__divider"></view>
|
|
<view
|
|
class="checkin-section__item"
|
|
hover-class="mi-tap-row--hover"
|
|
:hover-stay-time="150"
|
|
@tap="$emit('item-tap', item)"
|
|
>
|
|
<view class="checkin-section__item-inner">
|
|
<view
|
|
class="checkin-section__dot"
|
|
:class="'checkin-section__dot--' + item.tagTheme"
|
|
></view>
|
|
<view class="checkin-section__content">
|
|
<view class="checkin-section__content-inner">
|
|
<text class="checkin-section__desc">{{ item.title }}</text>
|
|
<text class="checkin-section__text">{{ item.time }}</text>
|
|
</view>
|
|
</view>
|
|
<view
|
|
class="checkin-section__tag-badge"
|
|
:class="'checkin-section__tag-badge--' + item.tagTheme"
|
|
>
|
|
<text
|
|
class="checkin-section__tag-text"
|
|
:class="'checkin-section__tag-text--' + item.tagTheme"
|
|
>
|
|
{{ item.tag }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
options: {
|
|
virtualHost: false,
|
|
styleIsolation: 'apply-shared'
|
|
},
|
|
props: {
|
|
items: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
},
|
|
emits: ['view-all', 'item-tap']
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
@import '@/common/style/memberInfo/member-info-component-reset.css';
|
|
@import '@/common/style/memberInfo/member-info-check-in-list.css';
|
|
@import '@/common/style/memberInfo/member-info-tap.css';
|
|
</style>
|