feat: 添加博客主题样式文件

src/components/menuH.vue

@@ -1,11 +1,11 @@
 <template>
   <div ref="nav" class="main-nav hidden lg:flex justify-between bg-white">
     <!-- 网站Logo -->
-    <div class="px-5 items-centerflex cursor-pointer" slot="brand" @click="goHome">
+    <div class="px-5 items-centerflex cursor-pointer w-1/5" slot="brand" @click="goHome">
       <img :src="logo" alt="柚子的网站" class="h-9 align-middle" />
     </div>
     <!-- 主导航菜单 -->
-    <div>
+    <div class="w-2/5">
       <n-menu :icon-size="12" v-model:value="activeKey" class="" mode="horizontal" :options="menuOptions" />
     </div>
     <!-- 用户区域 -->
@@ -22,7 +22,7 @@
       <span class="weather-info ml-4">{{ temp }}°C</span>
     </div>
 
-    <div class="flex items-center mr-8">
+    <div class="flex items-center justify-end mr-8 w-1/20">
       <n-dropdown class="cursor-pointer w-[100px]" v-if="userinfo" :options="oprOp" @select="handleSelect"
         trigger="hover">
         <div class="flex items-center">

src/main.ts

@@ -3,19 +3,20 @@ import { useConfig } from "@/config";
 import icon from "@/icon/index.ts";
 import { createPinia } from "pinia";
 import "virtual:uno.css";
-import 'vue-devui/tag/style.css';
+import "vue-devui/tag/style.css";
 import App from "./App.vue";
 import router from "./router";
-// 自定义主题配置 - 设置主色和二级色\
+// 自定义主题配置 - 设置主色和二级色
-import backTop from '@/components/backTop.vue';
+import backTop from "@/components/backTop.vue";
-import 'md-editor-v3/lib/style.css';
+import { formatTime } from "@/util";
+import "md-editor-v3/lib/style.css";
 import "vfonts/FiraCode.css";
-import Tag from 'vue-devui/tag';
+import Tag from "vue-devui/tag";
+
 
 
 const app = createApp(App);
-
+app.use(Tag);
-app.use(Tag)
 app.use(createPinia());
 app.use(router);
 // app.use(VMdPreview)
@@ -25,4 +26,4 @@ for (const key in icon) {
   app.component("icon-" + key, icon[key] as any);
 }
 app.component("back-top", backTop);
-app.mount("#app");
+app.mount("#app");

src/util/index.ts

@@ -98,7 +98,7 @@ export function deepclone<T>(obj: T): T {
  * @example
  * formatTimeBydate(new Date(), 'yyyy-MM-dd HH:mm:ss');
  */
-export function formatTimeBydate(this: Date, f: string): string | undefined {
+export function formatTimeBydate(this: string, f: string): string | undefined {
   return formatTime(this, f);
 }
 

src/views/Home.vue

@@ -635,7 +635,6 @@ function handdleMenuItem(type: number) {
 }
 const navHeight: any = ref(0)
 onMounted(() => {
-  console.log("&&&&&&&&&&&&&&", nav.navH);
   contentStyle.value = {
     height: `${window.innerHeight - nav.navH}px)`
   }

src/views/blog/[bid].vue

@@ -1,12 +1,12 @@
 <template>
   <div class="flex justify-between">
-    <div class="left w-[15%] shadow">
+    <div class="left w-[20%] shadow">
       <div class="fixed top-20 left-8">
         <div class="text-center text-3xl text-bold mb-2">目录</div>
-        <MdCatalog :editorId="blogData.aid" :scrollElement="scrollElement" />
+        <MdCatalog :editorId="blogData.aid" class="my-cata" :scrollElement="scrollElement" />
       </div>
     </div>
-    <div ref="" class="w-[85%]">
+    <div ref="" class="flex-1">
       <div class="w-full px-1/20 rounded-md">
         <div class="text-center text-[40px] text-[700] text-black` mt-10">{{ blogData.title }}</div>
         <div class="flex flex-wrap gap-4 justify-center mt-4">
@@ -15,13 +15,13 @@
             {{ item }}
           </div>
         </div>
-        <div class="flex gap-2 justify-end mt-4">
+        <div class="flex gap-2 justify-end my-4">
           <em class="text-primary">
             {{ blogData.nickname }}</em>
           <em class="time">{{ formatTime(blogData.updated_at, "YYYY年MM月DD日hh时") }}</em>
         </div>
-        <MdPreview ref="mdp" class="md relative !bg-[#FDFBFB]" :editorId="blogData.aid" previewTheme="default"
+        <MdPreview ref="mdp" theme="light" class="relative " :editorId="blogData.aid" previewTheme="my"
-          :modelValue="markdown" codeTheme="kimbie" />
+          :modelValue="markdown" />
       </div>
     </div>
   </div>
@@ -70,22 +70,75 @@ onMounted(() => {
 
 </script>
 
+<style lang="less">
+@import "@/assets/myblog.less";
+
+.my-cata {
+  * {
+    cursor: pointer;
+  }
+
+  .md-editor-catalog-indicator {
+    display: none;
+  }
+
+  .md-editor-catalog-active>span {
+    padding: 5px 15px !important;
+    border-radius: 30px;
+    color: white;
+    background-color: @primary;
+    position: relative;
+
+    &::after {
+      content: "✦";
+      position: static !important;
+      transform: none !important;
+      margin-left: 12px !important;
+      flex-shrink: 0;
+      display: inline-block !important;
+      line-height: 1;
+      font-size: 14px;
+      // font-family: Arial, sans-serif;
+      color: rgba(255, 255, 255, 0.9);
+      z-index: 10;
+      animation: outline-twinkle 1.5s infinite alternate;
+    }
+  }
+
+  .md-editor-catalog-link {
+    padding-block:1px !important;
+  }
+
+  .md-editor-catalog-wrapper span {
+    padding: 5px 15px !important;
+    transition: all 0.6s ease-in-out;
+
+
+    &:hover {
+      padding: 5px 15px !important;
+      border-radius: 30px;
+      color: white;
+      background-color: @primary;
+    }
+  }
+}
+</style>
+
 <style scoped lang="less">
 /* 文章页样式 */
-:deep(.md img) {
+// :deep(.md img) {
-  width: auto !important;
+//   width: auto !important;
-  height: 200px !important;
+//   height: 200px !important;
-}
+// }
 
-:deep(.md-editor-catalog-active>span) {
+// :deep(.md-editor-catalog-active>span) {
-  color: @primary;
+//   color: @primary;
-}
+// }
 
-:deep(.md-editor-catalog-indicator) {
+// :deep(.md-editor-catalog-indicator) {
-  background-color: @primary;
+//   background-color: @primary;
-}
+// }
 
-:deep(.md-editor-catalog-link span):hover {
+// :deep(.md-editor-catalog-link span):hover {
-  color: @primary;
+//   color: @primary;
-}
+// }</style>
-</style>