first commit
This commit is contained in:
commit
db553270ea
21
config/index.yaml
Normal file
21
config/index.yaml
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
# config/index.yaml
|
||||||
|
|
||||||
|
# 网站标题 - 显示在浏览器标签栏中
|
||||||
|
title: "个人介绍"
|
||||||
|
# 网站图标
|
||||||
|
ico: https://q2.qlogo.cn/g?b=qq&nk=2952458479&s=100
|
||||||
|
|
||||||
|
# 背景设置
|
||||||
|
# 参数支持:
|
||||||
|
# 图片: img
|
||||||
|
# 颜色: color
|
||||||
|
# 渐变颜色: color-cg
|
||||||
|
background:
|
||||||
|
# 背景类型
|
||||||
|
bgType: color
|
||||||
|
# 如果背景类型为 img，则填写图片路径
|
||||||
|
bgImg: https://www.dmoe.cc/random.php
|
||||||
|
# 如果背景类型为 color，则填写颜色值（例如：#ffffff）
|
||||||
|
bgColor: "#DDE3F1"
|
||||||
|
# 如果背景类型为 color-cg，则填写渐变颜色值（例如：linear-gradient(135deg, #f2c3fb 0%, #a65df0 100%)）
|
||||||
|
bgColorCg: "linear-gradient(135deg, #f2c3fb 0%, #a65df0 100%)"
|
||||||
219
css/index.bak.css
Normal file
219
css/index.bak.css
Normal file
@ -0,0 +1,219 @@
|
|||||||
|
/*
|
||||||
|
这个文件不生效，只是备份一些测试样式在这里罢了
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* v3 */
|
||||||
|
|
||||||
|
/* 通用样式，现在使用 Flexbox 而不是 Grid */
|
||||||
|
.grid-container {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap; /* 允许子项换行 */
|
||||||
|
gap: 1em; /* 格子之间的间距 */
|
||||||
|
/* width: 100%; */
|
||||||
|
height: auto; /* 如果需要，可以调整为 auto 或其他值 */
|
||||||
|
/* 为网格项提供一些空间以避免紧贴边缘 */
|
||||||
|
/* padding: 0.5em; */
|
||||||
|
justify-content: center; /* 或者 center，根据你的需要调整 */
|
||||||
|
align-items: center; /* flex-start 或者 stretch/center/flex-end，根据你的需要调整 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.box_width {
|
||||||
|
display: flex;
|
||||||
|
width: 90%;
|
||||||
|
|
||||||
|
margin: 1em auto;
|
||||||
|
min-height: 400px;
|
||||||
|
align-items: center; /* 垂直居中 */
|
||||||
|
justify-content: space-between; /* 水平分布 */
|
||||||
|
padding: 0.5em; /* 为盒子提供一些空间以避免紧贴边缘 */
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box_mini {
|
||||||
|
/* 盒子样式，主要是大小自适应的问题 */
|
||||||
|
background-color: #f0f0f0; /* 盒子背景色，可根据需要调整 */
|
||||||
|
padding: 0.5em;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
/* 使用百分比宽度，但设置 max-width 以限制最大宽度 */
|
||||||
|
/* 假设你想每行放 3 个 box，减去间隙 */
|
||||||
|
width: calc(33.333% - 1em);
|
||||||
|
max-width: 375px; /* 最大宽度限制 */
|
||||||
|
min-width: 300px; /* 最小宽度限制 */
|
||||||
|
min-height: 350px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 媒体查询示例，针对手机和小屏幕设备 */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.box_mini,.box_width {
|
||||||
|
/* 在小屏幕上，你可能想要每个 box 占据整行 */
|
||||||
|
width: calc(100% - 1em); /* 减去间隙 */
|
||||||
|
min-height: 300px; /* 可选：调整小屏幕上的最小高度 */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 对于更大的屏幕，你也可以添加媒体查询来进一步调整样式 */
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.box_width{
|
||||||
|
/* padding: 0.5em; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.box_mini {
|
||||||
|
/* 在大屏幕上的样式调整 */
|
||||||
|
/* padding: 0.5em; */
|
||||||
|
/* 注意：如果你在这里改变了 padding，可能也需要调整 width 的 calc 值 */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/** v2 **/
|
||||||
|
|
||||||
|
|
||||||
|
body, html {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
/* overflow: hidden; */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 应用背景 */
|
||||||
|
body {
|
||||||
|
background: var(--bg-color);
|
||||||
|
background-image: var(--bg-image);
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* 通用样式，现在使用 Flexbox 而不是 Grid */
|
||||||
|
.grid-container {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap; /* 允许子项换行 */
|
||||||
|
gap: 1em; /* 格子之间的间距 */
|
||||||
|
/* width: 100%; */
|
||||||
|
height:auto; /* 如果需要，可以调整为 auto 或其他值 */
|
||||||
|
padding: 0.5em; /* 为网格项提供一些空间以避免紧贴边缘 */
|
||||||
|
justify-content: center; /* 或者 center，根据你的需要调整 */
|
||||||
|
align-items: center; /* flex-star或者 stretch/center/flex-end，根据你的需要调整 */
|
||||||
|
}
|
||||||
|
.box_width{
|
||||||
|
display: flex;
|
||||||
|
width: 90%; /* 占据整个容器的宽度 */
|
||||||
|
margin: auto;
|
||||||
|
max-width: 1140px;
|
||||||
|
min-height: 400px;
|
||||||
|
align-items: center; /* 垂直居中 */
|
||||||
|
justify-content: space-between; /* 水平分布 */
|
||||||
|
padding: 0.5em; /* 为盒子提供一些空间以避免紧贴边缘 */
|
||||||
|
}
|
||||||
|
.box_mini {
|
||||||
|
/* 盒子样式，主要是大小自适应的问题 */
|
||||||
|
background-color: #f0f0f0; /* 盒子背景色，可根据需要调整 */
|
||||||
|
padding: 0.5em;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
/* 使用百分比宽度，但设置 max-width 以限制最大宽度 */
|
||||||
|
/* 假设你想每行放 3 个 box，减去间隙 */
|
||||||
|
width: calc(33.333% - 1em);
|
||||||
|
max-width: 375px; /* 最大宽度限制 */
|
||||||
|
min-width: 300px; /* 最小宽度限制 */
|
||||||
|
min-height: 350px;
|
||||||
|
|
||||||
|
/* 注意：这里使用 calc 来计算宽度时，需要考虑到 gap 的影响。
|
||||||
|
但是，由于 gap 是在项目之间添加的，并且不是项目本身的一部分，
|
||||||
|
所以上面的 calc 可能需要根据你的具体布局进行调整。
|
||||||
|
更简单的方法是直接设置 width 为百分比，并通过媒体查询来调整不同屏幕尺寸下的宽度。
|
||||||
|
*/
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 媒体查询示例，针对手机和小屏幕设备 */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.box_mini {
|
||||||
|
/* 在小屏幕上，你可能想要每个 box 占据整行 */
|
||||||
|
width: calc(100% - 1em); /* 减去间隙 */
|
||||||
|
min-height: 300px; /* 可选：调整小屏幕上的最小高度 */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 对于更大的屏幕，你也可以添加媒体查询来进一步调整样式 */
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
.box_mini {
|
||||||
|
/* 在大屏幕上的样式调整 */
|
||||||
|
padding: 0.5em;
|
||||||
|
/* 注意：如果你在这里改变了 padding，可能也需要调整 width 的 calc 值 */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*阴影效果*/
|
||||||
|
.shadow {
|
||||||
|
box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 水平和垂直偏移量，模糊半径，和颜色 */
|
||||||
|
}
|
||||||
|
/*背景模糊*/
|
||||||
|
.mh {
|
||||||
|
backdrop-filter: blur(10px); /* 模糊背后的内容 */
|
||||||
|
/* 为了看到模糊效果，可能需要设置背景透明 */
|
||||||
|
background-color: rgba(255, 255, 255, 0.5); /* 半透明背景 */
|
||||||
|
}
|
||||||
|
/*圆角效果*/
|
||||||
|
.round{
|
||||||
|
border-radius: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/** v1 **/
|
||||||
|
|
||||||
|
/* 通用样式 */
|
||||||
|
.grid-container {
|
||||||
|
display: grid;
|
||||||
|
/* 根据容器宽度自动填充列，每列至少200px宽 */
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(375, 1fr));
|
||||||
|
gap: 1em; /* 格子之间的间距 */
|
||||||
|
width: 100%;
|
||||||
|
height: 100%; /* 根据需要设置高度 */
|
||||||
|
min-height: 100%;
|
||||||
|
justify-content: center; /* 确保网格项居中 */
|
||||||
|
padding: 0.5em; /* 为网格项提供一些空间以避免紧贴边缘 */
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.box{
|
||||||
|
/*盒子样式 主要是大小自适应的问题*/
|
||||||
|
/*当存在多个盒子的时候，能以瀑布流进行排列*/
|
||||||
|
background-color: #f0f0f0; /* 盒子背景色，可根据需要调整 */
|
||||||
|
/* 其他样式如padding, margin等 */
|
||||||
|
/* margin: 1em auto; */
|
||||||
|
padding: 0.5em;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
width: 90%;
|
||||||
|
max-width: 375px;
|
||||||
|
min-width: 300px;
|
||||||
|
min-height: 350px;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 媒体查询示例，针对手机和小屏幕设备 */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.grid-container {
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(100%, 1fr)); /* 在小屏幕上，每行一个box */
|
||||||
|
}
|
||||||
|
.box {
|
||||||
|
/* 在小屏幕上调整样式，例如减少内边距或最小高度 */
|
||||||
|
padding: 0.5em;
|
||||||
|
min-height: 300px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 对于更大的屏幕，您也可以添加媒体查询来进一步调整样式 */
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
.box {
|
||||||
|
/* 在大屏幕上的样式调整 */
|
||||||
|
padding: 1.5em;
|
||||||
|
min-height: 350px;
|
||||||
|
}
|
||||||
|
}
|
||||||
112
css/index.css
Normal file
112
css/index.css
Normal file
@ -0,0 +1,112 @@
|
|||||||
|
body, html {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
/* overflow: hidden; */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 应用背景 */
|
||||||
|
body {
|
||||||
|
background: var(--bg-color);
|
||||||
|
background-image: var(--bg-image);
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* 阴影效果 */
|
||||||
|
.shadow {
|
||||||
|
box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 水平和垂直偏移量，模糊半径，和颜色 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 背景模糊 */
|
||||||
|
.mh {
|
||||||
|
backdrop-filter: blur(10px); /* 模糊背后的内容 */
|
||||||
|
/* 为了看到模糊效果，可能需要设置背景透明 */
|
||||||
|
background-color: rgba(255, 255, 255, 0.5); /* 半透明背景 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 圆角效果 */
|
||||||
|
.round {
|
||||||
|
border-radius: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container{
|
||||||
|
display: flex; /* 添加 Flex 容器 */
|
||||||
|
height: 100%;
|
||||||
|
min-height: 100vh;
|
||||||
|
flex-direction: column; /* 子元素垂直排列 */
|
||||||
|
justify-content: space-between; /* 顶部和底部的子元素之间留有足够的空间 */
|
||||||
|
}
|
||||||
|
/* 如果需要，可以为主要内容区域设置一个类名 */
|
||||||
|
.main-content {
|
||||||
|
flex-grow: 1; /* 使主要内容区域扩展以填充剩余的空间 */
|
||||||
|
}
|
||||||
|
.header{
|
||||||
|
width: 90%;
|
||||||
|
min-width: 350px;
|
||||||
|
/* 调整高度以适应剩余的空间 */
|
||||||
|
height: 50px;
|
||||||
|
margin: 16px auto;
|
||||||
|
padding: 0.5em;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.jianjie{
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.xiangmu,.wangzhan,.gongsi{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.jianjie,.xiangmu,.wangzhan,.gongsi{
|
||||||
|
width: 90%;
|
||||||
|
min-width: 350px;
|
||||||
|
/* 调整高度以适应剩余的空间 */
|
||||||
|
height: 85%;
|
||||||
|
margin: 16px auto;
|
||||||
|
padding: 0.5em;
|
||||||
|
box-sizing: border-box;
|
||||||
|
/* 添加以下样式以实现内部滚动条 */
|
||||||
|
overflow-y: auto; /* 当内容超过 div 高度时显示滚动条 */
|
||||||
|
}
|
||||||
|
footer {
|
||||||
|
width: 100%;
|
||||||
|
height: 2.5em;
|
||||||
|
padding: 0.5em;
|
||||||
|
font-size: 16px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
footer a{
|
||||||
|
outline: none;
|
||||||
|
color: black;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
footer a:hover{
|
||||||
|
color: rgb(62, 173, 238);
|
||||||
|
}
|
||||||
|
.box-profile{
|
||||||
|
display: flex;
|
||||||
|
/* margin: 1em auto; */
|
||||||
|
align-items: center; /* 垂直居中 */
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
.profile{
|
||||||
|
margin-left: 1em;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
border-radius: 50px;
|
||||||
|
}
|
||||||
|
.profile-about{
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.profile-name{
|
||||||
|
font-size:20px;
|
||||||
|
margin: 0;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.profile-text{
|
||||||
|
margin-left: 0.5em;
|
||||||
|
|
||||||
|
}
|
||||||
41
css/menu.css
Normal file
41
css/menu.css
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
.menu-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
.menu {
|
||||||
|
border-radius: 5px;
|
||||||
|
padding: 6px 10px;
|
||||||
|
/* border: 1px solid rgba(0, 0, 0, 0.5); */
|
||||||
|
color:white;
|
||||||
|
background-color: rgba(0, 0, 0, 0.8);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.menu:hover{
|
||||||
|
color:rgba(0, 0, 0, 0.8);
|
||||||
|
background-color: rgba(255, 255, 255, 0.8);
|
||||||
|
}
|
||||||
|
/* 响应式设计 - 当屏幕宽度小于等于 768px 时，隐藏菜单并显示折叠按钮 */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
/* .menu-container {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
|
.menu-icon {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-around;
|
||||||
|
width: 30px;
|
||||||
|
height: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* .menu-icon span {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 2px;
|
||||||
|
background-color: black;
|
||||||
|
} */
|
||||||
|
}
|
||||||
101
index.html
Normal file
101
index.html
Normal file
@ -0,0 +1,101 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Loading...</title>
|
||||||
|
<link rel="icon" type="image/png" href="default.png">
|
||||||
|
<script src="https://unpkg.com/js-yaml"></script>
|
||||||
|
<script src="/script/log.js"></script>
|
||||||
|
<script src="/script/bacggroundSetting.js"></script>
|
||||||
|
<link href="css/index.css" rel="stylesheet" type="text/css">
|
||||||
|
<script src="/script/IcoSetting.js"></script>
|
||||||
|
<link href="css/menu.css" rel="stylesheet" type="text/css">
|
||||||
|
<script src="/script/menu.js"></script>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="main-content">
|
||||||
|
<div class="header shadow mh round">
|
||||||
|
<!--
|
||||||
|
<div class="menu-icon" id="menu-icon">
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
</div>
|
||||||
|
-->
|
||||||
|
<nav class="menu-container">
|
||||||
|
<div class="menu" data-menu="简介">简 介</div>
|
||||||
|
<div class="menu" data-menu="项目">项 目</div>
|
||||||
|
<div class="menu" data-menu="网站">网 站</div>
|
||||||
|
<div class="menu" data-menu="公司">公 司</div>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="jianjie shadow mh round">
|
||||||
|
<div class="box-profile">
|
||||||
|
<div>
|
||||||
|
<img src="https://q2.qlogo.cn/g?b=qq&nk=2952458479&s=100" alt="" class="profile">
|
||||||
|
</div>
|
||||||
|
<div class="profile-text">
|
||||||
|
<p class="profile-name">萌狼蓝天</p>
|
||||||
|
<span class="profile-about"> 乖乖狼科技首席技术官</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="xiangmu shadow mh round">
|
||||||
|
2
|
||||||
|
</div>
|
||||||
|
<div class="wangzhan shadow mh round">
|
||||||
|
3
|
||||||
|
</div>
|
||||||
|
<div class="gongsi shadow mh round">
|
||||||
|
4
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="boxs">
|
||||||
|
<div class="box">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer class="shadow mh">
|
||||||
|
<a href="https://beian.miit.gov.cn/#/Integrated/index">渝ICP备2020015002号</a>
|
||||||
|
|
|
||||||
|
<a href="https://www.mllt.cc">乖乖狼科技</a>
|
||||||
|
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
<script>
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
fetch('config/index.yaml')
|
||||||
|
.then(response => response.text())
|
||||||
|
.then(text => {
|
||||||
|
log("开始加载配置...")
|
||||||
|
const config = jsyaml.load(text);
|
||||||
|
//设置标题
|
||||||
|
document.title = config.title;
|
||||||
|
//设置网站图标
|
||||||
|
setHTMLIco(config.ico)
|
||||||
|
//设置背景
|
||||||
|
setBodyBackground(config.background);
|
||||||
|
//读入内容配置
|
||||||
|
log("配置加载完毕","green","SUCESS")
|
||||||
|
})
|
||||||
|
.catch(error => console.error('Error:', error));
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</html>
|
||||||
7
script/IcoSetting.js
Normal file
7
script/IcoSetting.js
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
function setHTMLIco(url){
|
||||||
|
var link = document.createElement('link');
|
||||||
|
link.type = 'image/x-icon';
|
||||||
|
link.rel = 'icon';
|
||||||
|
link.href = url; // favicon的URL
|
||||||
|
document.getElementsByTagName('head')[0].appendChild(link);
|
||||||
|
}
|
||||||
23
script/bacggroundSetting.js
Normal file
23
script/bacggroundSetting.js
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
|
||||||
|
//读取配置文件中的网站背景图片设置并处理
|
||||||
|
function setBodyBackground(config) {
|
||||||
|
const bgType = config.bgType;
|
||||||
|
log("当前背景模式："+bgType)
|
||||||
|
switch (bgType) {
|
||||||
|
case 'color':
|
||||||
|
document.body.style.setProperty('--bg-color', config.bgColor);
|
||||||
|
log("设置背景颜色："+config.bgColor)
|
||||||
|
break;
|
||||||
|
case 'colorCg':
|
||||||
|
document.body.style.setProperty('--bg-color', config.bgColorCg);
|
||||||
|
//todo
|
||||||
|
//直接显示太突兀了 考虑下要不要增加模糊效果
|
||||||
|
break;
|
||||||
|
case 'img':
|
||||||
|
document.body.style.setProperty('--bg-image', `url(${config.bgImg})`);
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
log('未知的背景类型:'+ bgType);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
0
script/index.js
Normal file
0
script/index.js
Normal file
9
script/log.js
Normal file
9
script/log.js
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
function log(message, color = 'blue', type = 'INFO') {
|
||||||
|
const now = new Date();
|
||||||
|
const dateStr = `[${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}]`;
|
||||||
|
const timeStr = `[${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}]`;
|
||||||
|
const prefix = `${dateStr}${timeStr}[${type}] `;
|
||||||
|
const fullMessage = `${prefix}${message}`;
|
||||||
|
const style = `color: ${color}; font-weight: bold;`;
|
||||||
|
console.log(`%c${fullMessage}`, style);
|
||||||
|
}
|
||||||
58
script/menu.js
Normal file
58
script/menu.js
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
// document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
// const menuIcon = document.getElementById('menu-icon');
|
||||||
|
// const menuContainer = document.querySelector('.menu-container');
|
||||||
|
// const header = document.querySelector('.header');
|
||||||
|
// const menu = document.querySelector('.menu');
|
||||||
|
// menuIcon.addEventListener('click', function() {
|
||||||
|
// if (menuContainer.style.display === "none") {
|
||||||
|
// menuContainer.style.display = "flex";
|
||||||
|
// menuContainer.style.height="100px"
|
||||||
|
// header.style.height="100px"
|
||||||
|
// menu.style.width="100%"
|
||||||
|
// menuContainer.style.flexDirection = "column"
|
||||||
|
// } else {
|
||||||
|
// menuContainer.style.display = "none";
|
||||||
|
// header.style.height="50px"
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// });
|
||||||
|
|
||||||
|
// 获取所有的.menu元素
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
const menus = document.querySelectorAll('.menu');
|
||||||
|
|
||||||
|
// 遍历所有.menu元素并添加点击事件监听器
|
||||||
|
menus.forEach(menu => {
|
||||||
|
menu.addEventListener('click', function() {
|
||||||
|
// 获取被点击的菜单的数据属性值
|
||||||
|
const menuName = this.getAttribute('data-menu');
|
||||||
|
const menuText = this.textContent;
|
||||||
|
const jianjie= document.querySelector('.jianjie')
|
||||||
|
const xiangmu= document.querySelector('.xiangmu')
|
||||||
|
const wangzhan= document.querySelector('.wangzhan')
|
||||||
|
const gongsi= document.querySelector('.gongsi')
|
||||||
|
|
||||||
|
if(menuText==="简 介"){
|
||||||
|
jianjie.style.display="flex"
|
||||||
|
xiangmu.style.display="none"
|
||||||
|
wangzhan.style.display="none"
|
||||||
|
gongsi.style.display="none"
|
||||||
|
}else if(menuText==="项 目"){
|
||||||
|
jianjie.style.display="none"
|
||||||
|
xiangmu.style.display="flex"
|
||||||
|
wangzhan.style.display="none"
|
||||||
|
gongsi.style.display="none"
|
||||||
|
}else if(menuText==="网 站"){
|
||||||
|
jianjie.style.display="none"
|
||||||
|
xiangmu.style.display="none"
|
||||||
|
wangzhan.style.display="flex"
|
||||||
|
gongsi.style.display="none"
|
||||||
|
}else if(menuText==="公 司"){
|
||||||
|
jianjie.style.display="none"
|
||||||
|
xiangmu.style.display="none"
|
||||||
|
wangzhan.style.display="none"
|
||||||
|
gongsi.style.display="flex"
|
||||||
|
}
|
||||||
|
});
|
||||||
|
})
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue
Block a user