From ade67e4411af01e658efcbdcb18a314c3d7d8ccf Mon Sep 17 00:00:00 2001
From: qingfeng1121 <lmg162543@163.com>
Date: Wed, 24 Sep 2025 17:33:09 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=94=A8=E6=88=B7=E5=92=8C?=
 =?UTF-8?q?=E4=BB=93=E5=BA=93=E9=85=8D=E7=BD=AE=E6=96=87=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/index.css     | 341 +++++++++++++++++++++++++++++++++++++++
 src/index.vue            |  65 +++++---
 src/main.js              |   1 +
 src/router/Router.js     |   4 +
 src/views/leftmodlue.vue |   7 +-
 user.rmail               |  27 ++++
 6 files changed, 426 insertions(+), 19 deletions(-)
 create mode 100644 src/assets/index.css
 create mode 100644 user.rmail

diff --git a/src/assets/index.css b/src/assets/index.css
new file mode 100644
index 0000000..c0b9ea2
--- /dev/null
+++ b/src/assets/index.css
@@ -0,0 +1,341 @@
+:root {
+  /* 页面通用间距和圆角 */
+  --main-padding: 100px 10%;
+  /* 内容区内边距 */
+  --main-radius: 10px;
+  /* 内容区圆角 */
+
+  /* 首页 hero 区域高度和间距 */
+  --hero-height: 600px;
+  /* hero 默认高度 */
+  --hero-height-small: 200px;
+  /* hero 收缩后高度 */
+  --hero-margin-top: 5%;
+  /* hero 顶部外边距 */
+
+  /* 标题样式 */
+  --title-font-size: 3.5rem;
+  /* hero 主标题字号 */
+  --title-margin-bottom: 20px;
+  /* hero 主标题下边距 */
+
+  /* 内容区宽度和外边距 */
+  --content-width: 80%;
+  /* 主内容区宽度 */
+  --content-margin: 0 5%;
+  /* 主内容区左右外边距 */
+
+  /* 左侧状态栏宽度 */
+  --leftmodlue-width: 20%;
+  /* 左侧模块宽度 */
+
+  /* 疯言疯语标题区样式 */
+  --nonsense-title-width: 76.5%;
+  /* 疯言疯语标题区宽度 */
+  --nonsense-title-padding: 20px;
+  /* 疯言疯语标题区内边距 */
+  --nonsense-title-radius: 20px;
+  /* 疯言疯语标题区圆角 */
+  --nonsense-title-margin-bottom: 50px;
+  /* 疯言疯语标题区下边距 */
+  --nonsense-titleconst-padding: 1.5rem;
+  /* 疯言疯语标题内容区内边距 */
+  --nonsenset-margin-top: 130px;
+  /* 疯言疯语内容区顶部外边距 */
+
+  /* 分页背景色 */
+  --pagination-bg: aqua;
+  /* 分页区背景色 */
+
+  /* 导航栏样式 */
+  --nav-padding: 20px 40px;
+  /* 导航栏默认内边距 */
+  --nav-padding-small: 15px 40px;
+  /* 导航栏收缩后内边距 */
+  --nav-bg: rgba(145, 196, 238, 0.85);
+  /* 导航栏背景色 */
+  --nav-bg-transparent: transparent;
+  /* 导航栏透明背景 */
+  --nav-bg-hide: rgba(145, 196, 238, 0);
+  /* 导航栏隐藏时背景 */
+  --nav-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
+  /* 导航栏阴影 */
+
+  /* 字体颜色和菜单样式 */
+  --font-color-title: #32325d;
+  /* 标题字体颜色 */
+  --font-size-menu: 20px;
+  /* 菜单字体大小 */
+  --font-weight-menu: bold;
+  /* 菜单字体加粗 */
+}
+
+/* 页面背景设置 */
+body {
+  background-size: 120% 120%;
+  /* 背景图片缩放比例 */
+  background-repeat: no-repeat;
+  /* 背景不重复 */
+  background-position: center;
+  /* 背景居中 */
+  background-attachment: fixed;
+  /* 背景固定 */
+}
+
+/* 标题通用样式 */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: inherit;
+  font-weight: 400;
+  line-height: 1.5;
+  margin-bottom: .5rem;
+  color: var(--font-color-title);
+}
+
+/* 段落通用样式 */
+p {
+  font-size: 1rem;
+  font-weight: 300;
+  line-height: 1.7;
+}
+
+/* 顶部导航栏样式 */
+.elrow-top {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  padding: var(--nav-padding);
+  z-index: 1000;
+  transition: all 0.4s ease;
+  font-size: inherit;
+  /* display: flex; */
+  justify-content: space-between;
+  align-items: center;
+}
+
+/* 导航栏透明状态 */
+.elrow-top.transparent {
+  background-color: var(--nav-bg-transparent);
+}
+
+/* 导航栏滚动后变色状态 */
+.elrow-top.solid {
+  background-color: var(--nav-bg);
+  padding: var(--nav-padding-small);
+  box-shadow: var(--nav-shadow);
+}
+
+/* 导航栏隐藏状态 */
+.elrow-top.hide {
+  background-color: var(--nav-bg-hide);
+  box-shadow: var(--nav-shadow);
+  top: -100px;
+  transition: all 0.8s ease;
+}
+
+.grid-content.ep-bg-purple-dark {
+  align-items: center;
+
+}
+
+/* 菜单样式 */
+.el-menu--horizontal,
+.el-menu-demo {
+  background: transparent;
+  font-weight: var(--font-weight-menu);
+  font-size: var(--font-size-menu);
+  left: 18%;
+  border-bottom: 0;
+}
+
+.el-menu-demo .el-menu-item {
+  margin-left: 10px;
+  font-size: inherit;
+}
+
+/* 菜单项悬停和激活状态 */
+.el-menu-item:hover,
+.el-menu-item.is-active {
+  background-color: transparent;
+}
+
+/* 去除菜单项悬停和激活时的背景色 */
+.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
+.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
+  background-color: transparent;
+}
+
+/* 去除导航底部线条 */
+.el-menu--horizontal.el-menu {
+  border-bottom: 0;
+}
+
+.el-menu {
+  display: flex;
+  border-right: 0;
+}
+
+/* 内容区样式 */
+#content-section {
+  min-height: 100vh;
+  padding: var(--main-padding);
+  opacity: 0;
+  transform: translateY(50px);
+  transition: all 0.8s ease-out;
+  border-radius: var(--main-radius);
+  display: flex;
+}
+
+/* 内容区可见状态 */
+#content-section.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* 主内容区样式 */
+.RouterViewpage {
+  width: var(--content-width);
+  margin: var(--content-margin);
+}
+
+/* 分页区样式 */
+.Pagination {
+  align-self: center;
+  background-color: var(--pagination-bg);
+}
+
+/* 左侧状态栏样式 */
+.leftmodluepage {
+  width: var(--leftmodlue-width);
+}
+
+/* 首页 hero 区域样式 */
+.hero {
+  height: var(--hero-height);
+  margin-top: var(--hero-margin-top);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  color: white;
+  transition: height 0.3s ease;
+}
+
+/* hero 收缩状态 */
+.hero.newhero {
+  height: var(--hero-height-small);
+}
+
+/* hero 主标题样式 */
+.hero h1 {
+  font-size: var(--title-font-size);
+  margin-bottom: var(--title-margin-bottom);
+}
+
+/* hero 副标题样式 */
+.hero p {
+  font-size: 1.5rem;
+  max-width: 700px;
+  margin: 0 auto 30px;
+}
+
+/* 疯言疯语标题区样式 */
+.nonsensetitle {
+  text-align: center;
+  position: absolute;
+  top: 0;
+  width: var(--nonsense-title-width);
+  padding: var(--nonsense-title-padding);
+  margin-bottom: var(--nonsense-title-margin-bottom);
+  background: rgba(255, 255, 255, 0.1) !important;
+  backdrop-filter: blur(10px);
+  border-radius: var(--nonsense-title-radius);
+}
+
+/* 疯言疯语标题内容区样式 */
+.nonsensetitleconst {
+  padding: var(--nonsense-titleconst-padding);
+  box-sizing: border-box;
+}
+
+.nonsensetitleconst p {
+  font-size: 1rem;
+}
+
+/* 疯言疯语内容区顶部外边距 */
+.nonsensetmargintop {
+  margin-top: var(--nonsenset-margin-top);
+}
+
+/* 移动端适配：屏幕宽度小于768px时生效 */
+@media (max-width: 768px) {
+  :root {
+    --main-padding: 40px 5%;
+    --hero-height-small: 120px;
+    --title-font-size: 2rem;
+    --content-width: 100%;
+    --content-margin: 0;
+    --leftmodlue-width: 100%;
+    --nonsense-title-width: 95%;
+  }
+
+  .elrow-top {
+    padding: 10px 10px;
+    flex-direction: column;
+    font-size: 16px;
+  }
+
+  .el-menu--horizontal,
+  .el-menu-demo {
+    left: 0;
+  }
+
+  .el-menu-item {
+    padding: 0;
+    padding-left: 10px;
+  }
+
+  .el-row.is-justify-center {
+    justify-content: left;
+  }
+
+  .el-col-14 {
+    flex: 0 0 0;
+    max-width: 100%;
+  }
+
+  .grid-content {
+    display: flex;
+    justify-content: center;
+    /* 水平居中 */
+    align-items: center;
+    /* 垂直居中 */
+  }
+
+  .el-menu--vertical:not(.el-menu--collapse):not(.el-menu--popup-container) .el-menu-item,
+  .el-menu--vertical:not(.el-menu--collapse):not(.el-menu--popup-container) .el-menu-item-group__title,
+  .el-menu--vertical:not(.el-menu--collapse):not(.el-menu--popup-container) .el-sub-menu__title {
+    padding: 0 5px;
+  }
+
+  #content-section {
+    flex-direction: column;
+    padding: var(--main-padding);
+  }
+
+  .RouterViewpage {
+    width: 100%;
+    margin: 5% 0 0 0;
+  }
+
+  .nonsensetitle {
+    width: var(--nonsense-title-width);
+    padding: 10px;
+    font-size: 1rem;
+  }
+}
\ No newline at end of file
diff --git a/src/index.vue b/src/index.vue
index 57f9320..a81b7db 100644
--- a/src/index.vue
+++ b/src/index.vue
@@ -1,15 +1,16 @@
 <template>
   <div class="elrow-top" :class="elrowtop">
     <el-row justify="center">
-      <el-col :span="4">
+      <el-col :span="4" v-if="windowwidth">
         <div class="grid-content ep-bg-purple-dark">
           <!-- <div><img src="../public/favicon.ico" alt=""></div> -->
           <div>清疯不颠</div>
         </div>
       </el-col>
-      <el-col :span="14">
+      <el-col :span="14" justify="center">
         <div class="grid-content ep-bg-purple-dark">
-          <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
+          <el-menu :default-active="activeIndex" class="el-menu-demo" :collapse="false"
+            @select="handleSelect">
             <el-menu-item index="/:type">
               首页
             </el-menu-item>
@@ -28,23 +29,23 @@
           </el-menu>
         </div>
       </el-col>
-      <el-col :span="2" class="search-container">
+      <el-col :span="2" class="search-container" v-if="windowwidth">
 
       </el-col>
     </el-row>
   </div>
-  <div class="hero" :class="{ 'newhero': classhero }">
+  <div class="hero" :class="{ 'newhero': classhero }" v-if="windowwidth">
     <h1>如果感到累了撸一管就好了</h1>
   </div>
 
   <div id="content-section" :class="{ 'visible': isconts }">
     <div class="nonsensetitle" v-if="classnonsenset">
-      <div class="nonsensetitleconst">
+      <div class="nonsensetitleconst" v-if="windowwidth">
         <h1>发癫中QAQ</h1>
       </div>
     </div>
     <!-- 状态模块 -->
-    <leftmodlue class="leftmodluepage" :class="{ 'nonsensetmargintop': classnonsenset }" />
+    <leftmodlue class="leftmodluepage" :class="{ 'nonsensetmargintop': classnonsenset }" v-if="windowwidth" />
     <!-- 内容模块 -->
     <RouterView class="RouterViewpage" :class="{ 'nonsensetmargintop': classnonsenset }" />
   </div>
@@ -63,7 +64,7 @@ const isconts = ref(false); // 内容
 const isScrollingleftmodlue = ref(false);
 const elrowtop = ref(); // 导航
 const classnonsenset = ref(false) // 疯言疯语
-
+const windowwidth = ref(true) // 屏幕
 // 路由
 const router = useRouter()
 const handleSelect = (key: string) => {
@@ -76,9 +77,10 @@ const isclass = (url: any) => {
   classhero.value = url != '/:type';
   classnonsenset.value = url == '/nonsense'
 }
+
 // url监听
 // 使用router.beforeEach或router.afterEach全局守卫
-router.beforeEach((to, from) => {
+router.beforeEach((to) => {
   // console.log("从", from.path, "到", to.path);
   isclass(to.path)
   // 回到顶部
@@ -86,12 +88,7 @@ router.beforeEach((to, from) => {
     top: 0,
     behavior: 'smooth' // 平滑滚动
   });
-  if (to.path == '/:type') {
-    isconts.value = false;
-  } else {
-    isconts.value = false;
-    isconts.value = true;
-  }
+
 });
 // 滚动事件
 const handleScroll = () => {
@@ -100,6 +97,9 @@ const handleScroll = () => {
   if (location.pathname == '/:type') {
     isconts.value = window.scrollY > 200;
     isScrollingleftmodlue.value = window.scrollY > 600;
+  }else{
+    isconts.value = true;
+    isScrollingleftmodlue.value = true;
   }
   // 导航
   if (scrollYmo > 1200) {
@@ -108,7 +108,27 @@ const handleScroll = () => {
     elrowtop.value = window.scrollY > 100 ? 'solid' : 'transparent';
   }
 };
-window.addEventListener('scroll', handleScroll);
+const addScrollListener = () => {
+  window.addEventListener('scroll', handleScroll);
+};
+const removeScrollListener = () => {
+  window.removeEventListener('scroll', handleScroll);
+};
+
+const mediaquery = () => {
+  // 在这里处理屏幕大小变化
+  if (window.innerWidth < 768) {
+    removeScrollListener();
+    windowwidth.value = false
+    isScrollingleftmodlue.value = true
+    classnonsenset.value = false
+    isconts.value = true;
+  } else {
+    addScrollListener();
+    windowwidth.value = true
+  }
+};
+
 // 页面加载完成后执行
 const activeIndex = ref('/:type')
 const isactiveindex = () => {
@@ -117,11 +137,20 @@ const isactiveindex = () => {
   // 判断路径并设置hero值
   activeIndex.value = currentPath;
 }
+
+window.addEventListener('DOMContentLoaded', () => {
+  isactiveindex();
+  mediaquery();
+});
+
+window.addEventListener('resize', mediaquery);
+
 window.addEventListener('DOMContentLoaded', isactiveindex);
 // 输入框
 
 </script>
-<style>
+<style></style>
+<!-- <style>
 body {
   /* background-image: url(./img/8.21.1.jpg); */
   background-size: 120% 120%;
@@ -330,4 +359,4 @@ p {
 }
 
 /* 输入框 */
-</style>
\ No newline at end of file
+</style> -->
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index df50a78..1441449 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,6 +1,7 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import Router from './router/Router'
+import './assets/index.css'
 
 const app = createApp(App)
 app.use(Router)
diff --git a/src/router/Router.js b/src/router/Router.js
index dc2635a..132c692 100644
--- a/src/router/Router.js
+++ b/src/router/Router.js
@@ -6,6 +6,10 @@ import messageboard from '../views/messageboard.vue'
 import about from '../views/aboutme.vue'
 import articlecontents from '../views/articlecontents.vue'
 const routes = [
+  {
+    path: '/',
+    redirect: '/:type' // 默认跳转到首页
+  },
   {
     path: '/:type',
     // 如果type为空则是所有不为空查询相对应属性的文章
diff --git a/src/views/leftmodlue.vue b/src/views/leftmodlue.vue
index 2ae5003..bfcbc69 100644
--- a/src/views/leftmodlue.vue
+++ b/src/views/leftmodlue.vue
@@ -112,7 +112,12 @@ window.addEventListener('scroll', handleScroll);
     border-radius:0 0 10px 10px;
     background-color: rgba(215, 224, 218, 0.9);
 }
-
+#cont .cont2 .el-menu-vertical-demo{
+    display: inline;
+}
+#cont .cont2 .el-menu-vertical-demo .el-menu-item:hover {
+    background-color: rgb(255, 255, 255 , 0.7);
+}
 .el-menu-vertical-demo {
     background-color: rgb(0, 0, 0, 0);
     border-right: 0px;
diff --git a/user.rmail b/user.rmail
new file mode 100644
index 0000000..4f4ed11
--- /dev/null
+++ b/user.rmail
@@ -0,0 +1,27 @@
+file:E:/App/Git/etc/gitconfig	diff.astextplain.textconv=astextplain
+file:E:/App/Git/etc/gitconfig	filter.lfs.clean=git-lfs clean -- %f
+file:E:/App/Git/etc/gitconfig	filter.lfs.smudge=git-lfs smudge -- %f
+file:E:/App/Git/etc/gitconfig	filter.lfs.process=git-lfs filter-process
+file:E:/App/Git/etc/gitconfig	filter.lfs.required=true
+file:E:/App/Git/etc/gitconfig	http.sslbackend=openssl
+file:E:/App/Git/etc/gitconfig	http.sslcainfo=E:/App/Git/mingw64/etc/ssl/certs/ca-bundle.crt
+file:E:/App/Git/etc/gitconfig	core.autocrlf=true
+file:E:/App/Git/etc/gitconfig	core.fscache=true
+file:E:/App/Git/etc/gitconfig	core.symlinks=false
+file:E:/App/Git/etc/gitconfig	pull.rebase=false
+file:E:/App/Git/etc/gitconfig	credential.helper=manager
+file:E:/App/Git/etc/gitconfig	credential.https://dev.azure.com.usehttppath=true
+file:E:/App/Git/etc/gitconfig	init.defaultbranch=master
+file:C:/Users/30803/.gitconfig	user.name=qingfeng1121
+file:C:/Users/30803/.gitconfig	user.email=3080373706@qq.com
+file:C:/Users/30803/.gitconfig	core.editor="E:\Microsoft VS Code\bin\code" --wait
+file:.git/config	core.repositoryformatversion=0
+file:.git/config	core.filemode=false
+file:.git/config	core.bare=false
+file:.git/config	core.logallrefupdates=true
+file:.git/config	core.symlinks=false
+file:.git/config	core.ignorecase=true
+file:.git/config	remote.origin.url=https://github.com/qingfeng1121/MyfronyProject.git
+file:.git/config	remote.origin.fetch=+refs/heads/*:refs/remotes/origin/*
+file:.git/config	branch.main.remote=origin
+file:.git/config	branch.main.merge=refs/heads/main