rain
144 lines
3.3 KiB
Vue
144 lines
3.3 KiB
Vue
<!-- 页面编号：F-10；用途：家族视频待开放状态。 -->
|
||
<template>
|
||
<view class="video-status-page">
|
||
<ModulePageBackground module="family" />
|
||
<view class="video-status-header"><PageHeader title="家族视频" /></view>
|
||
|
||
<view class="video-status-content">
|
||
<view class="video-status-lead">
|
||
<image
|
||
src="/static/assets/modules/genealogy/transparent/section-divider.png"
|
||
mode="scaleToFill"
|
||
/>
|
||
<text>记录会动的家族记忆</text>
|
||
</view>
|
||
|
||
<view class="video-status-card">
|
||
<image
|
||
class="video-status-card__skin"
|
||
src="/static/assets/modules/family/transparent/module-content-frame.png"
|
||
mode="scaleToFill"
|
||
/>
|
||
<view class="video-status-card__body">
|
||
<text class="video-status-card__eyebrow">视频 · 服务说明</text>
|
||
<text class="video-status-card__title">视频服务暂未开放</text>
|
||
<text class="video-status-card__copy"
|
||
>开放后可在这里浏览家族影像与纪念视频</text
|
||
>
|
||
<view class="video-return-action" @click="returnToFamily">
|
||
<AppButton block label="返回家族首页" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import AppButton from "@/components/AppButton.vue";
|
||
import ModulePageBackground from "@/components/ModulePageBackground.vue";
|
||
import PageHeader from "@/components/PageHeader.vue";
|
||
|
||
const returnToFamily = () => {
|
||
uni.reLaunch({ url: "/pages/family/f01-family-feed" });
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.video-status-page {
|
||
position: relative;
|
||
min-height: 100vh;
|
||
overflow-x: hidden;
|
||
background: $paper;
|
||
}
|
||
.video-status-header,
|
||
.video-status-content {
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
.video-status-content {
|
||
padding: 16rpx 26rpx 56rpx;
|
||
}
|
||
.video-status-lead {
|
||
position: relative;
|
||
height: 56rpx;
|
||
margin: 0 12rpx 18rpx;
|
||
color: $ink-muted;
|
||
font-size: 23rpx;
|
||
text-align: center;
|
||
}
|
||
.video-status-lead image {
|
||
position: absolute;
|
||
inset: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.video-status-lead text {
|
||
position: relative;
|
||
z-index: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 100%;
|
||
}
|
||
.video-status-card {
|
||
position: relative;
|
||
width: 100%;
|
||
min-height: 330rpx;
|
||
text-align: center;
|
||
}
|
||
.video-status-card__skin {
|
||
position: absolute;
|
||
inset: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.video-status-card__body {
|
||
position: relative;
|
||
z-index: 1;
|
||
padding: 70rpx 60rpx 48rpx;
|
||
}
|
||
.video-status-card__eyebrow,
|
||
.video-status-card__title,
|
||
.video-status-card__copy {
|
||
display: block;
|
||
}
|
||
.video-status-card__eyebrow {
|
||
color: $brand-red;
|
||
font-size: 23rpx;
|
||
letter-spacing: 3rpx;
|
||
}
|
||
.video-status-card__title {
|
||
margin-top: 14rpx;
|
||
color: $ink;
|
||
font-family: STKaiti, KaiTi, serif;
|
||
font-size: 35rpx;
|
||
font-weight: 700;
|
||
}
|
||
.video-status-card__copy {
|
||
margin-top: 17rpx;
|
||
color: $ink-muted;
|
||
font-size: 24rpx;
|
||
line-height: 1.6;
|
||
}
|
||
.video-return-action {
|
||
margin: 28rpx auto 0;
|
||
}
|
||
@media (min-width: 400px) {
|
||
.video-status-content {
|
||
padding-right: 34rpx;
|
||
padding-left: 34rpx;
|
||
}
|
||
}
|
||
@media (max-width: 340px) {
|
||
.video-status-content {
|
||
padding-right: 20rpx;
|
||
padding-left: 20rpx;
|
||
}
|
||
.video-status-card__body {
|
||
padding-right: 44rpx;
|
||
padding-left: 44rpx;
|
||
}
|
||
}
|
||
</style>
|