111 lines
1.9 KiB
Vue
111 lines
1.9 KiB
Vue
<script setup>
|
|
import { ref } from 'vue';
|
|
|
|
const showIntro = ref(false);
|
|
const showBlog = ref(false);
|
|
const showProjects = ref(false);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="container">
|
|
|
|
<div class="settings-item">
|
|
<label class="checkbox-label">
|
|
<input type="checkbox" v-model="showIntro" />
|
|
展示简介
|
|
</label>
|
|
</div>
|
|
|
|
<div class="settings-item">
|
|
<label class="checkbox-label">
|
|
<input type="checkbox" v-model="showBlog" />
|
|
展示个人博客
|
|
</label>
|
|
</div>
|
|
|
|
<div class="settings-item">
|
|
<label class="checkbox-label">
|
|
<input type="checkbox" v-model="showProjects" />
|
|
展示参与的项目
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.container {
|
|
width: 100%;
|
|
height: auto;
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
color: #f5f6f7;
|
|
padding: 20px 0;
|
|
transition: background-color 0.3s ease, color 0.3s ease;
|
|
animation: fadeIn 0.3s ease-in-out;
|
|
}
|
|
/* Settings Item Styles */
|
|
.settings-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-size: 18px;
|
|
width: 80%;
|
|
margin: 5px;
|
|
}
|
|
|
|
.checkbox-label input {
|
|
width: 20px;
|
|
height: 20px;
|
|
accent-color: #007bff;
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.checkbox-label input:checked {
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
/* Dark Mode Styles */
|
|
.selfpage-container {
|
|
color: #ddd;
|
|
}
|
|
|
|
.checkbox-label {
|
|
color: #fff;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.checkbox-label input {
|
|
border: 2px solid #333;
|
|
}
|
|
|
|
/* Light Mode Styles */
|
|
.theme-light .selfpage-container {
|
|
color: #333;
|
|
}
|
|
|
|
.theme-light .checkbox-label {
|
|
color: #333;
|
|
}
|
|
|
|
.theme-light .checkbox-label input {
|
|
accent-color: #ffb74d;
|
|
border: 2px solid #ddd;
|
|
}
|
|
|
|
.theme-light .checkbox-label input:checked {
|
|
border-color: #ffb74d;
|
|
}
|
|
|
|
/* Fade-in animation */
|
|
@keyframes fadeIn {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
</style>
|