130 lines
3.1 KiB
Vue
130 lines
3.1 KiB
Vue
<template>
|
||
<!-- 主题卡片外壳：plain / elevated / ornament / canvas-frame，按 effect.card 切换 -->
|
||
<view
|
||
class="theme-card"
|
||
:class="['theme-card--' + mode]"
|
||
:style="cardStyle"
|
||
>
|
||
<view v-if="mode === 'canvas-frame' || mode === 'ornament'" class="theme-card__corners" aria-hidden="true">
|
||
<view class="c c-tl" :style="cornerStyle"></view>
|
||
<view class="c c-tr" :style="cornerStyle"></view>
|
||
<view class="c c-bl" :style="cornerStyle"></view>
|
||
<view class="c c-br" :style="cornerStyle"></view>
|
||
</view>
|
||
<view v-if="mode === 'canvas-frame'" class="theme-card__folio" :style="{ borderColor: accent }"></view>
|
||
<view class="theme-card__body">
|
||
<slot />
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { getActiveLayout, getActiveVars } from '@/utils/theme'
|
||
|
||
export default {
|
||
name: 'ThemeCardFrame',
|
||
props: {
|
||
/** 覆盖 effect.card；默认读当前主题 */
|
||
card: { type: String, default: '' },
|
||
},
|
||
computed: {
|
||
mode() {
|
||
if (this.card) return this.card
|
||
const effect = (getActiveLayout().effect) || {}
|
||
return effect.card || 'elevated'
|
||
},
|
||
vars() {
|
||
return getActiveVars()
|
||
},
|
||
accent() {
|
||
return this.vars['--color-primary'] || '#C9A227'
|
||
},
|
||
cardStyle() {
|
||
const v = this.vars
|
||
const base = {
|
||
background: v['--color-surface'] || '#fff',
|
||
color: v['--color-text'] || '#111',
|
||
borderRadius: v['--radius-md'] || '16rpx',
|
||
}
|
||
if (this.mode === 'plain') {
|
||
return {
|
||
...base,
|
||
border: `1rpx solid ${v['--color-border'] || '#eee'}`,
|
||
boxShadow: 'none',
|
||
}
|
||
}
|
||
if (this.mode === 'elevated') {
|
||
return {
|
||
...base,
|
||
border: `1rpx solid ${v['--color-border'] || '#eee'}`,
|
||
boxShadow: v['--shadow-md'] || '0 8rpx 24rpx rgba(0,0,0,0.06)',
|
||
}
|
||
}
|
||
// ornament / canvas-frame
|
||
return {
|
||
...base,
|
||
border: `1rpx solid ${this.accent}`,
|
||
boxShadow: this.mode === 'canvas-frame' ? 'none' : (v['--shadow-md'] || 'none'),
|
||
}
|
||
},
|
||
cornerStyle() {
|
||
return { borderColor: this.accent }
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.theme-card {
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.theme-card__body {
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
.theme-card__folio {
|
||
pointer-events: none;
|
||
position: absolute;
|
||
inset: 8rpx;
|
||
z-index: 0;
|
||
border: 1rpx solid;
|
||
opacity: 0.55;
|
||
}
|
||
.theme-card__corners .c {
|
||
position: absolute;
|
||
z-index: 2;
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
border-style: solid;
|
||
border-width: 0;
|
||
}
|
||
.theme-card__corners .c-tl {
|
||
top: 8rpx;
|
||
left: 8rpx;
|
||
border-top-width: 2rpx;
|
||
border-left-width: 2rpx;
|
||
}
|
||
.theme-card__corners .c-tr {
|
||
top: 8rpx;
|
||
right: 8rpx;
|
||
border-top-width: 2rpx;
|
||
border-right-width: 2rpx;
|
||
}
|
||
.theme-card__corners .c-bl {
|
||
bottom: 8rpx;
|
||
left: 8rpx;
|
||
border-bottom-width: 2rpx;
|
||
border-left-width: 2rpx;
|
||
}
|
||
.theme-card__corners .c-br {
|
||
right: 8rpx;
|
||
bottom: 8rpx;
|
||
border-right-width: 2rpx;
|
||
border-bottom-width: 2rpx;
|
||
}
|
||
.theme-card--ornament {
|
||
clip-path: polygon(0 0, calc(100% - 16rpx) 0, 100% 16rpx, 100% 100%, 16rpx 100%, 0 calc(100% - 16rpx));
|
||
}
|
||
</style>
|