90 lines
2.0 KiB
Vue
90 lines
2.0 KiB
Vue
<template>
|
|
<view class="home-advertisement-panel">
|
|
<view class="home-advertisement-panel__grid">
|
|
<button
|
|
v-for="advertisement in advertisements"
|
|
:key="advertisement.image"
|
|
class="home-advertisement-panel__card"
|
|
:aria-label="`${advertisement.title}，查看更多内容`"
|
|
@click="emit('open')"
|
|
>
|
|
<image :src="advertisement.image" mode="aspectFill" />
|
|
</button>
|
|
</view>
|
|
<button class="home-advertisement-panel__more" @click="emit('open')">
|
|
点击查看更多内容
|
|
</button>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
const emit = defineEmits(["open"]);
|
|
|
|
const advertisements = Object.freeze([
|
|
{
|
|
title: "寻根问祖",
|
|
image: "/static/assets/modules/genealogy/opaque/home-ad-heritage-hall.png",
|
|
},
|
|
{
|
|
title: "家族传承",
|
|
image: "/static/assets/modules/genealogy/opaque/home-ad-family-tree.png",
|
|
},
|
|
]);
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.home-advertisement-panel {
|
|
min-height: 176rpx;
|
|
padding: 10rpx 8rpx 4rpx;
|
|
border-top: 1rpx solid rgba(154, 111, 56, 0.34);
|
|
background: rgba(255, 253, 249, 0.96);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.home-advertisement-panel__grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 12rpx;
|
|
}
|
|
|
|
.home-advertisement-panel__card,
|
|
.home-advertisement-panel__more {
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
background: transparent;
|
|
}
|
|
|
|
.home-advertisement-panel__card::after,
|
|
.home-advertisement-panel__more::after {
|
|
border: 0;
|
|
}
|
|
|
|
.home-advertisement-panel__card {
|
|
height: 112rpx;
|
|
overflow: hidden;
|
|
border: 1rpx solid rgba(142, 96, 44, 0.3);
|
|
border-radius: 10rpx;
|
|
background: #f1ece2;
|
|
line-height: normal;
|
|
}
|
|
|
|
.home-advertisement-panel__card image {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.home-advertisement-panel__more {
|
|
display: block;
|
|
width: 100%;
|
|
height: 40rpx;
|
|
color: $brand-red;
|
|
font-family: "STKaiti", "KaiTi", serif;
|
|
font-size: clamp(13px, 22rpx, 16px);
|
|
font-weight: 700;
|
|
line-height: 40rpx;
|
|
text-align: center;
|
|
}
|
|
</style>
|