84 行
2.0 KiB
Plaintext
84 行
2.0 KiB
Plaintext
<script setup lang="uts">
|
|
import { darkModeClass } from '@/composables/useDark.uts'
|
|
|
|
const props = defineProps({
|
|
content: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
})
|
|
|
|
const expanded = ref(false)
|
|
|
|
const toggle = () => {
|
|
expanded.value = !expanded.value
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<view class="page-intro" :class="darkModeClass" @click="toggle">
|
|
<view class="page-intro-header">
|
|
<text class="page-intro-label">页面介绍</text>
|
|
<text class="page-intro-arrow">{{ expanded ? '▲' : '▼' }}</text>
|
|
</view>
|
|
<view v-if="expanded" class="page-intro-body">
|
|
<text class="page-intro-content">{{ content }}</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<style>
|
|
.page-intro.theme-light {
|
|
--page-intro-border-color: #91caff;
|
|
--page-intro-bg-color: #e6f4ff;
|
|
--page-intro-title-color: #0958d9;
|
|
--page-intro-divider-color: #91caff;
|
|
--page-intro-content-color: #1d39c4;
|
|
}
|
|
|
|
.page-intro.theme-dark {
|
|
--page-intro-border-color: #1d39c4;
|
|
--page-intro-bg-color: #0b1b3a;
|
|
--page-intro-title-color: #91caff;
|
|
--page-intro-divider-color: rgba(145, 202, 255, 0.35);
|
|
--page-intro-content-color: rgba(145, 202, 255, 0.9);
|
|
}
|
|
|
|
.page-intro {
|
|
margin: 10px;
|
|
border-radius: 4px;
|
|
border-left: 4px solid var(--page-intro-border-color, #91caff);
|
|
background-color: var(--page-intro-bg-color, #e6f4ff);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.page-intro-header {
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 9px 12px;
|
|
}
|
|
|
|
.page-intro-label {
|
|
font-size: 13px;
|
|
color: var(--page-intro-title-color, #0958d9);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.page-intro-arrow {
|
|
font-size: 11px;
|
|
color: var(--page-intro-title-color, #0958d9);
|
|
}
|
|
|
|
.page-intro-body {
|
|
padding: 12px 10px;
|
|
border-top: 1px solid var(--page-intro-divider-color, #91caff);
|
|
}
|
|
|
|
.page-intro-content {
|
|
font-size: 13px;
|
|
color: var(--page-intro-content-color, #1d39c4);
|
|
line-height: 22px;
|
|
}
|
|
</style>
|