首页

src/components/menu.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="box flex justify-between items-center md:py-1 h-[50px]" ref="menuH">
+  <div class="boxxx flex justify-between items-center md:py-1 h-[50px]" ref="menuH">
     <div class="md:hidden flex items-center">
       <div class="logo ml-8 mr-20 flex items-center" @click="toHome">
         <img class="rounded-full" src="@/assets/柚子娘.jpg" width="40" alt="">
@@ -21,7 +21,9 @@
       <div v-else class="uinfo flex items-center">
         <n-dropdown :options="userOp" @select="handleSelect" :show-arrow="true">
           <div class="uinfo mx-8 text-white flex items-center">
-            <n-avatar round size="small" :src="userinfo.avaUrl" />
+            <div class="ava flex items-center justify-center">
+              <n-avatar round size="medium" :src="userinfo.avaUrl" />
+            </div>
             <div class="ml-2"></div>
             <n-button text class="userinfo">
               {{ userinfo.nickname }}
@@ -156,6 +158,16 @@ function goConsole() {
 </script>
 
 <style scoped lang="less">
+.boxxx {
+  background: transparent url("../assets/cstyle/花边.png") no-repeat center center/100% 100% !important;
+}
+.ava {
+  // background-color: red ;
+  background: transparent url("../assets/cstyle/中秋节中国风边框3.png") no-repeat center center/100% 100% !important;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+}
 .login {
   :deep(.n-button) {
     background-color: @purple;

src/views/HomeView.vue

@@ -1,14 +1,14 @@
 <template>
-  <n-layout style="">
-    <n-layout-header ref="nav">
+  <div class="boxx" style="">
+    <div ref="nav">
       <navH />
-    </n-layout-header>
+    </div>
     <n-scrollbar :style="cH">
       <router>
         <router-view />
       </router>
     </n-scrollbar>
-  </n-layout>
+  </div>
 </template>
 
 <script setup>
@@ -23,17 +23,21 @@ onMounted(() => {
   getH();
 });
 function getH() {
-  contH.value = nav.value.$el.clientHeight;
+  contH.value = nav.value.clientHeight;
   cH.value = {
     height: document.documentElement.clientHeight - contH.value + "px",
-    backgroundColor:"#f1f2f3"
+    // backgroundColor:"#f1f2f3"
   };
   // console.log(4, contH.value);
 }
 </script>
 
 <style scoped lang="less">
-:deep(.n-layout-header) {
-  background-color: @dp;
+.boxx {
+  background: transparent url('../assets/bg/06.jpeg') no-repeat center center !important;
 }
+
+// :deep(.n-layout-header) {
+//   background-color: @dp;
+// }
 </style>

src/views/gallery/xPic.vue

@@ -2,7 +2,7 @@
   <div class="box flex justify-center" ref="curcomp">
     <falls :fileList="fileList" :count="acount" :bot="bottomLen" pathname="filepath" v-slot="{ file }">
       <div class="img" @mouseenter="movein(file)" @mouseleave="moveout(file)">
-        <n-image width="200px" :imgW="pivW" :src="file.filepath" object-fit="cover" :img-props="{ loading: 'lazy' }" />
+        <n-image width="200px" :imgW="pivW" :src="file.filepath" object-fit="cover"  />
         <div class="title" v-if="!ismobile && file.ishow">
           <n-ellipsis :style="{maxWidth: pivW+'px'}" :line-clamp="1">{{ file.filename }}</n-ellipsis>
         </div>

src/views/home/index.vue

@@ -42,9 +42,7 @@ onMounted(async () => {
 </script>
 
 <style scoped>
-.boxx{
-  background: transparent url("../../assets/bg/06.jpeg") no-repeat center center !important;
-}
+
 :deep(.n-layout){
   background: unset !important;
 }

src/views/home/navMenu.vue

@@ -102,6 +102,7 @@ onMounted(async () => {
 <style scoped lang="less">
 .box {
   align-items: start;
+  
 }
 
 
@@ -135,11 +136,11 @@ onMounted(async () => {
   /* 播放名为bounce的动画，循环无限次，每次动画时长1秒 */
 }
 .btn {
-  transition: all .5s ease-in-out;
+  transition: transform .5s ease-in-out;
   /* 指定过渡属性，持续时长，过渡曲线，何时开始 */
   &:hover {
     transform: translateX(10px);
-    background: @jb;
+    background: linear-gradient(to right,  #7FC6E7, #4CAF50);
   };
 }
 .extra_collapse {
@@ -149,6 +150,7 @@ onMounted(async () => {
   transform: rotate(90deg);
 }
 :deep(.n-card) {
-  background-color: #ffffff70;
+  padding: 30px;
+  background: #f1f2f370;
 }
 </style>

src/views/home/search.vue

@@ -1,13 +1,13 @@
 <template>
-  <div ref="searhBox" class="py-10 px-40 md:px-4 search-box " round>
+  <div ref="searhBox" class="py-10 px-8 md:px-4 search-box " >
     <!-- <img class="h-[50px] mb-4 mx-auto" height="30" :src="img" alt=""> -->
     <div class="relative">
       <!-- <n-select size="large" round class="w-[13%] md:w-[40%]" @change="updateEngine" v-model:value="engine" :options="selectOptions" /> -->
-      <n-input size="large" placeholder="探索世界吧！" ref="input" round class="w-full" v-model:value="searchValue" clearable
+      <n-input size="large" placeholder="探索世界吧！" ref="input"  class="w-full" v-model:value="searchValue" clearable
         @keyup.enter="toSearch(0)" @focus="inputFocus" @blur="inputBlur" @keydown.arrow-down.prevent="select" />
       <!-- <n-button size="large" round class="w-[15%] md:w-[30%]" type="primary" @click="toSearch">搜索</n-button> -->
       <ul ref="mos" v-show="smodel" tabindex="2" @blur="ulBlur"
-        class="absolute left-0 bg-[#FAEEFB] z-50 !rounded-2xl overflow-hidden py-2">
+        class="absolute left-0 bg-[#FAEEFB] z-50 !rounded-sm overflow-hidden py-2">
         <li ref="item" tabindex="1" v-for="(s, i) in selectOptions" class="sop" @keyup.enter="toSearch(i)"
           @blur="itemBlur" @keydown.arrow-down.prevent="downSelect(i)" @keydown.arrow-up.prevent="upSelect(i)"
           @click="toSearch(i)">

src/views/home/side.vue

@@ -52,7 +52,7 @@
       </div>
     </div>
 
-    <div class="lianxi w-[80%] ml-[10%] mt-4 mb-4 p-2">
+    <div class="lianxi w-[80%] ml-[10%] mt-4 mb-4">
       <div class="t">
         <n-divider title-placement="center">
           <div class="flex items-center font-bold text-xl">
@@ -197,6 +197,8 @@ const gotonews = (url) => {
   justify-content: space-between;
   align-items: center;
   border-radius: 4px;
+  padding: 20px;
+  background: #f1f2f370 url("../../assets/cstyle/画卷.png") no-repeat center center/100% 100% !important;
 
   .left {
     width: 60%;
@@ -215,8 +217,10 @@ const gotonews = (url) => {
 }
 
 .mid {
+  padding: 20px 30px;
   box-shadow: @ps;
   border-radius: 6px;
+  background: #f1f2f370 url("../../assets/cstyle/花边.png") no-repeat center center/100% 100% !important;
 
   img {
     width: 100%;
@@ -231,7 +235,10 @@ const gotonews = (url) => {
   word-break: break-all;
   white-space: nowrap;
 }
-
+.lianxi {
+  padding: 20px !important;
+  background: #f1f2f370 url("../../assets/cstyle/花边.png") no-repeat center center/100% 100% !important;
+}
 @font-face {
   font-family: 'yejing';
   src: url('@/assets/font/LCDML.woff2');