添加用户和仓库配置文件

2025-09-24 17:33:09 +08:00
parent b1ac9b9c08
commit ade67e4411
6 changed files with 426 additions and 19 deletions
--- a/src/assets/index.css
+++ 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;
+  }
+}
--- 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>
+</style> -->
--- 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)
--- 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为空则是所有不为空查询相对应属性的文章
--- 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;