139 lines
4.5 KiB
Vue
139 lines
4.5 KiB
Vue
<template>
|
|
<view class="genealogy-card" :class="{ 'genealogy-card--current': selected }" @click="$emit('select', genealogy)">
|
|
<image class="row-frame" src="/static/assets/backgrounds/genealogy-list-slip-frame.png" mode="scaleToFill" />
|
|
<view class="surname-seal">
|
|
<image class="surname-seal-frame" src="/static/assets/icons/genealogy/seal-row-frame-v1.png" mode="scaleToFill" />
|
|
<view class="surname-seal-copy">
|
|
<text class="seal-title">家谱</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="card-copy">
|
|
<text class="card-name">{{ genealogy.name }}</text>
|
|
<view class="card-detail-row">
|
|
<view class="card-metas">
|
|
<view class="card-meta-item">
|
|
<image class="card-meta-icon" src="/static/assets/icons/common/location-v1.png" mode="aspectFit" />
|
|
<text class="card-meta">{{ genealogy.location }}</text>
|
|
</view>
|
|
<view class="card-meta-item">
|
|
<image class="card-meta-icon" src="/static/assets/icons/common/member-meta-v1.png" mode="aspectFit" />
|
|
<text class="card-meta">{{ genealogy.memberCount }} 位成员</text>
|
|
</view>
|
|
</view>
|
|
<view class="card-updated">
|
|
<text>更新于 {{ genealogy.updatedAt }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="card-side">
|
|
<text class="card-role">{{ role }}</text>
|
|
<image class="card-chevron" src="/static/assets/icons/common/chevron-right-v2.png" mode="aspectFit" />
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
genealogy: { type: Object, required: true },
|
|
role: { type: String, required: true },
|
|
selected: { type: Boolean, default: false }
|
|
})
|
|
defineEmits(['select'])
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.genealogy-card {
|
|
position: relative;
|
|
display: flex;
|
|
min-height: 160rpx;
|
|
align-items: center;
|
|
padding: 20rpx 24rpx;
|
|
box-sizing: border-box;
|
|
background: transparent;
|
|
}
|
|
|
|
.genealogy-card--current { background: transparent; }
|
|
|
|
.row-frame {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.surname-seal {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: flex;
|
|
width: 76rpx;
|
|
height: 118rpx;
|
|
flex: 0 0 auto;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 22rpx;
|
|
color: #fff5df;
|
|
}
|
|
|
|
.surname-seal-frame { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; width: 100%; height: 100%; }
|
|
.surname-seal-copy { position: relative; z-index: 1; display: flex; height: 82rpx; align-items: center; justify-content: center; }
|
|
.seal-title { color: #fff5df; font-family: 'STKaiti', 'KaiTi', serif; font-size: 30rpx; font-weight: 700; letter-spacing: 2rpx; line-height: 1; writing-mode: vertical-rl; }
|
|
.genealogy-card:not(.genealogy-card--current) .surname-seal-frame { opacity: .32; }
|
|
.genealogy-card:not(.genealogy-card--current) .seal-title { color: $ink-muted; }
|
|
|
|
.card-copy {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: flex;
|
|
min-width: 0;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.card-name,
|
|
.card-meta {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.card-name { color: $ink; font-family: 'STKaiti', 'KaiTi', serif; font-size: 37rpx; font-weight: 700; }
|
|
.card-detail-row { display: flex; min-width: 0; align-items: center; justify-content: space-between; margin-top: 12rpx; }
|
|
.card-metas { display: flex; min-width: 0; align-items: center; }
|
|
.card-meta-item { display: flex; min-width: 0; align-items: center; margin-right: 14rpx; }
|
|
.card-meta-icon { width: 24rpx; height: 24rpx; margin-right: 5rpx; }
|
|
.card-meta { color: $ink-muted; font-size: 22rpx; }
|
|
.card-updated { display: flex; flex: 0 0 auto; align-items: center; margin-left: 10rpx; color: $ink-muted; font-size: 20rpx; white-space: nowrap; }
|
|
|
|
.card-side {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: flex;
|
|
width: 124rpx;
|
|
flex: 0 0 auto;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
margin-left: 10rpx;
|
|
}
|
|
|
|
.card-role { color: $ink-muted; font-size: 24rpx; white-space: nowrap; }
|
|
.card-chevron { width: 34rpx; height: 34rpx; margin-left: 14rpx; }
|
|
|
|
@media screen and (max-width: 340px) {
|
|
.genealogy-card { min-height: 148rpx; padding-right: 18rpx; padding-left: 18rpx; }
|
|
.surname-seal { width: 68rpx; height: 106rpx; margin-right: 16rpx; }
|
|
.card-name { font-size: 32rpx; }
|
|
.card-meta { font-size: 20rpx; }
|
|
.card-updated { display: none; }
|
|
.card-side { width: 92rpx; margin-left: 8rpx; }
|
|
.card-chevron { width: 28rpx; height: 28rpx; margin-left: 8rpx; }
|
|
}
|
|
</style>
|