128 lines
2.4 KiB
Vue
128 lines
2.4 KiB
Vue
<template>
|
||
<view class="page-wrapper">
|
||
<!-- 背景装饰 - 与原始设计一致 -->
|
||
<view class="bg-decoration">
|
||
<view class="orb orb-1"></view>
|
||
<view class="orb orb-2"></view>
|
||
</view>
|
||
|
||
<!-- 顶部背景图（模糊处理） -->
|
||
<view class="page-bg">
|
||
<image class="bg-image" :src="coverUrl" mode="aspectFill" />
|
||
<view class="bg-mask"></view>
|
||
</view>
|
||
|
||
<!-- 主要内容区域 -->
|
||
<scroll-view class="main-scroll" scroll-y>
|
||
<!-- 头部插槽 -->
|
||
<slot name="header"></slot>
|
||
|
||
<!-- 主内容插槽 -->
|
||
<slot name="content"></slot>
|
||
<slot></slot>
|
||
|
||
<!-- 底部垫高 -->
|
||
<view :style="{ height: bottomPadding }"></view>
|
||
</scroll-view>
|
||
|
||
<!-- 底部操作栏插槽 -->
|
||
<slot name="footer"></slot>
|
||
|
||
<!-- 弹窗插槽 -->
|
||
<slot name="modals"></slot>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
defineProps({
|
||
coverUrl: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
bottomPadding: {
|
||
type: String,
|
||
default: '180rpx'
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
/* ============================================
|
||
页面框架 - 与原始设计完全一致
|
||
============================================ */
|
||
|
||
.page-wrapper {
|
||
min-height: 100vh;
|
||
background: $bg-page;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* 背景装饰 */
|
||
.bg-decoration {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 0;
|
||
pointer-events: none;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.orb {
|
||
position: absolute;
|
||
border-radius: 50%;
|
||
filter: blur(80rpx);
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.orb-1 {
|
||
width: 500rpx;
|
||
height: 500rpx;
|
||
background: radial-gradient(circle, rgba($brand-primary, 0.2) 0%, transparent 70%);
|
||
top: -100rpx;
|
||
left: -100rpx;
|
||
}
|
||
|
||
.orb-2 {
|
||
width: 600rpx;
|
||
height: 600rpx;
|
||
background: radial-gradient(circle, rgba($accent-gold, 0.15) 0%, transparent 70%);
|
||
bottom: -100rpx;
|
||
right: -100rpx;
|
||
}
|
||
|
||
/* 顶部背景 */
|
||
.page-bg {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 700rpx;
|
||
z-index: 1;
|
||
}
|
||
|
||
.bg-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
filter: blur(30rpx) brightness(0.9);
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
.bg-mask {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(180deg, rgba($bg-page, 0.2) 0%, $bg-page 90%, $bg-page 100%);
|
||
}
|
||
|
||
.main-scroll {
|
||
position: relative;
|
||
z-index: 2;
|
||
height: 100vh;
|
||
}
|
||
</style>
|