添加用户和仓库配置文件

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> -->