From 016f60676915a4cf29f37ff080f706857172de0b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=91=E8=BD=BB=E7=8B=82?= <1677568218@qq.com>
Date: Mon, 14 Aug 2023 23:27:19 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E6=A0=BC=E5=BC=8F=E5=8C=96=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Bilibili.vue              |  43 +++---
 components/Download.vue              |  14 +-
 components/Parallax.vue              | 187 ++++++++++++++-------------
 components/PostItem.vue              | 110 +++++++++-------
 components/PostList.vue              | 121 ++++++++++-------
 components/RenderJupyterNotebook.vue |  70 ++++++++--
 components/pdf.vue                   |  14 +-
 7 files changed, 327 insertions(+), 232 deletions(-)

diff --git a/components/Bilibili.vue b/components/Bilibili.vue
index e9fa068..a19860a 100644
--- a/components/Bilibili.vue
+++ b/components/Bilibili.vue
@@ -1,25 +1,32 @@
 <template>
-  <iframe :src="`//player.bilibili.com/player.html?bvid=${bvid}&autoplay=false`" scrolling="no" border="0" frameborder="no"
-    framespacing="0" allowfullscreen="true" class="bili_iframe"/>
+  <iframe
+    :src="`//player.bilibili.com/player.html?bvid=${bvid}&autoplay=false`"
+    scrolling="no"
+    border="0"
+    frameborder="no"
+    framespacing="0"
+    allowfullscreen="true"
+    class="bili_iframe"
+  />
 </template>
 
 <script setup>
-  import { defineProps } from 'vue'
-  const { bvid } = defineProps({
-    bvid: {
-      type: String,
-      default: 'BV1GJ411x7h7',
-      required: true,
-      validator: (value) => {
-        return value.trim() !== ''
-      }
-    }
-  })
+import { defineProps } from "vue";
+const { bvid } = defineProps({
+  bvid: {
+    type: String,
+    default: "BV1GJ411x7h7",
+    required: true,
+    validator: (value) => {
+      return value.trim() !== "";
+    },
+  },
+});
 </script>
 
 <style scoped>
-  .bili_iframe {
-    width: 100%;
-    height: 23rem;
-  }
-</style>
\ No newline at end of file
+.bili_iframe {
+  width: 100%;
+  height: 23rem;
+}
+</style>
diff --git a/components/Download.vue b/components/Download.vue
index 2e163be..33cee75 100644
--- a/components/Download.vue
+++ b/components/Download.vue
@@ -1,20 +1,20 @@
 <template>
   <div class="download">
-    <button @click='download()'>📎下载附件代码</button>
+    <button @click="download()">📎下载附件代码</button>
   </div>
 </template>
 
 <script setup>
-import { defineProps } from 'vue'
+import { defineProps } from "vue";
 const url = defineProps({
   url: {
     type: String,
-    default: ''
-  }
-})
+    default: "",
+  },
+});
 const download = () => {
-  window.open(url.url)
-}
+  window.open(url.url);
+};
 </script>
 
 <style scoped>
diff --git a/components/Parallax.vue b/components/Parallax.vue
index 4f135e3..50b5c6e 100644
--- a/components/Parallax.vue
+++ b/components/Parallax.vue
@@ -1,99 +1,105 @@
 <script setup lang="ts">
-import { computed, reactive, ref } from 'vue'
-import type { CSSProperties } from 'vue'
-import { useMounted, useParallax } from '@vueuse/core'
-const target = ref(null)
+import { computed, reactive, ref } from "vue";
+import type { CSSProperties } from "vue";
+import { useMounted, useParallax } from "@vueuse/core";
+const target = ref(null);
 
-
-const parallax = reactive(useParallax(target))
+const parallax = reactive(useParallax(target));
 
 const targetStyle: CSSProperties = {
-  display: 'flex',
-  flexDirection: 'column',
-  justifyContent: 'center',
-  userSelect: 'none',
-  transition: '.3s ease-out all',
-}
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  userSelect: "none",
+  transition: ".3s ease-out all",
+};
 const cardWindowStyle: CSSProperties = {
-  overflow: 'hidden',
-  fontSize: '6rem',
-  position: 'absolute',
-  top: 'calc(50% - 1em)',
-  left: 'calc(50% - 1em)',
-  height: '2em',
-  width: '2em',
-  margin: 'auto',
-}
+  overflow: "hidden",
+  fontSize: "6rem",
+  position: "absolute",
+  top: "calc(50% - 1em)",
+  left: "calc(50% - 1em)",
+  height: "2em",
+  width: "2em",
+  margin: "auto",
+};
 const layerBase: CSSProperties = {
-  position: 'absolute',
-  userSelect: 'none',
+  position: "absolute",
+  userSelect: "none",
   "-webkit-user-drag": "none",
-  height: '100%',
-  width: '100%',
-  transition: '.3s ease-out all',
-}
+  height: "100%",
+  width: "100%",
+  transition: ".3s ease-out all",
+};
 const containerStyle: CSSProperties = {
-  margin: '3em auto',
-  perspective: '300px',
-}
+  margin: "3em auto",
+  perspective: "300px",
+};
 
 const layer0 = computed(() => ({
   ...layerBase,
-  content:'url(https://cdn.xyxsw.site/hdu-cs-wiki_main.png)',
-  transform: `translateX(${parallax.tilt * 10}px) translateY(${parallax.roll * 10
-    }px) scale(1)`,
-}))
+  content: "url(https://cdn.xyxsw.site/hdu-cs-wiki_main.png)",
+  transform: `translateX(${parallax.tilt * 10}px) translateY(${
+    parallax.roll * 10
+  }px) scale(1)`,
+}));
 
 const layer1 = computed(() => ({
-  content:'url(https://cdn.xyxsw.site/sparkles.gif)',
-  userSelect: 'none',
+  content: "url(https://cdn.xyxsw.site/sparkles.gif)",
+  userSelect: "none",
   "-webkit-user-drag": "none",
-  transform: `translateX(${parallax.tilt * 20}px) translateY(${parallax.roll * 20
-    }px) scale(1.33)`,
-  'background-blend-mode': 'overlay',
-  filter: 'brightness(1) contrast(1)',
-  'mix-blend-mode': 'color-dodge',
-  opacity: '1',
-  position: 'absolute',
-}))
+  transform: `translateX(${parallax.tilt * 20}px) translateY(${
+    parallax.roll * 20
+  }px) scale(1.33)`,
+  "background-blend-mode": "overlay",
+  filter: "brightness(1) contrast(1)",
+  "mix-blend-mode": "color-dodge",
+  opacity: "1",
+  position: "absolute",
+}));
 
 const layer2 = computed(() => ({
-  transform: `translateX(${parallax.tilt * 30}px) translateY(${parallax.roll * 30
-    }px) scale(1.33)`,
-  'background-image': 'linear-gradient(115deg,transparent 0%,#ec9bb6 25%,transparent 47%,transparent 53%,#ccac6f 75%,transparent 100%)',
-  opacity: '.18',
-  filter: 'brightness(.5) contrast(1)',
-  width: '100%',
-  height: '100%',
-  position: 'absolute',
-}))
+  transform: `translateX(${parallax.tilt * 30}px) translateY(${
+    parallax.roll * 30
+  }px) scale(1.33)`,
+  "background-image":
+    "linear-gradient(115deg,transparent 0%,#ec9bb6 25%,transparent 47%,transparent 53%,#ccac6f 75%,transparent 100%)",
+  opacity: ".18",
+  filter: "brightness(.5) contrast(1)",
+  width: "100%",
+  height: "100%",
+  position: "absolute",
+}));
 
 const layer3 = computed(() => ({
   ...layerBase,
-  transform: `translateX(${parallax.tilt * 40}px) translateY(${parallax.roll * 40
-    }px) scale(1.33)`,
-}))
+  transform: `translateX(${parallax.tilt * 40}px) translateY(${
+    parallax.roll * 40
+  }px) scale(1.33)`,
+}));
 
-const layer4 = layerBase
+const layer4 = layerBase;
 
 const cardStyle = computed(() => ({
-  background: '',
-  height: '14rem',
-  width: '20rem',
-  borderRadius: '20px',
-  border: '1px solid #000000',
-  overflow: 'hidden',
-  transition: '.3s ease-out all',
-  boxShadow: '-20px -20px 30px -25px #11e8da, 20px 20px 30px -25px #1ea5e6, -7px -7px 10px -5px #11e8da, 7px 7px 10px -5px #1ea5e6, 0 0 13px 4px rgba(255,255,255,0.3),0 55px 35px -20px rgba(0, 0, 0, 0.5)',
-  transform: `rotateX(${parallax.roll * 20}deg) rotateY(${parallax.tilt * 20
-    }deg)`,
-}))
+  background: "",
+  height: "14rem",
+  width: "20rem",
+  borderRadius: "20px",
+  border: "1px solid #000000",
+  overflow: "hidden",
+  transition: ".3s ease-out all",
+  boxShadow:
+    "-20px -20px 30px -25px #11e8da, 20px 20px 30px -25px #1ea5e6, -7px -7px 10px -5px #11e8da, 7px 7px 10px -5px #1ea5e6, 0 0 13px 4px rgba(255,255,255,0.3),0 55px 35px -20px rgba(0, 0, 0, 0.5)",
+  transform: `rotateX(${parallax.roll * 20}deg) rotateY(${
+    parallax.tilt * 20
+  }deg)`,
+}));
 </script>
 
 <script lang="ts">
 export default {
-  inheritAttrs: false
-}
+  inheritAttrs: false,
+};
 </script>
 
 <template>
@@ -103,10 +109,9 @@ export default {
         <div :style="cardStyle">
           <div id="kirakira"></div>
           <div :style="layer2"></div>
-          <img :style="layer1"
-            class="image">
+          <img :style="layer1" class="image" />
           <div :style="cardWindowStyle">
-            <img :style="layer0" class="image">
+            <img :style="layer0" class="image" />
           </div>
         </div>
       </div>
@@ -122,58 +127,60 @@ export default {
   top: 0;
   left: 0;
   z-index: 1;
-  transition: .3s ease-out;
+  transition: 0.3s ease-out;
 }
 
 #kirakira:hover {
-  background-image: linear-gradient(110deg,
-      transparent 25%,
-      #ec9bb6 48%,
-      #ccac6f 52%,
-      transparent 75%);
+  background-image: linear-gradient(
+    110deg,
+    transparent 25%,
+    #ec9bb6 48%,
+    #ccac6f 52%,
+    transparent 75%
+  );
   background-position: 50% 50%;
   background-size: 250% 250%;
-  opacity: .18;
-  filter: brightness(.66) contrast(1.33);
+  opacity: 0.18;
+  filter: brightness(0.66) contrast(1.33);
   transition: none;
   background-repeat: no-repeat;
   mix-blend-mode: color-dodge;
-  transition: all .33s ease;
-  animation: holoGradient 12s ease 0s 1,
+  transition: all 0.33s ease;
+  animation: holoGradient 12s ease 0s 1;
 }
 
 @keyframes holoGradient {
-
   0%,
   100% {
     opacity: 0.3;
     background-position: 50% 50%;
-    filter: brightness(.5) contrast(1);
+    filter: brightness(0.5) contrast(1);
   }
 
   5%,
   9% {
     background-position: 100% 100%;
     opacity: 0.1;
-    filter: brightness(.75) contrast(1.25);
+    filter: brightness(0.75) contrast(1.25);
   }
 
   13%,
   17% {
     background-position: 0% 0%;
-    opacity: .18;
+    opacity: 0.18;
   }
 
   35%,
   39% {
     background-position: 100% 100%;
     opacity: 0.2;
-    filter: brightness(.5) contrast(1);
+    filter: brightness(0.5) contrast(1);
   }
 
   55% {
     background-position: 0% 0%;
     opacity: 0.3;
-    filter: brightness(.75) contrast(1.25);
+    filter: brightness(0.75) contrast(1.25);
   }
-}</style>
\ No newline at end of file
+}
+</style>
diff --git a/components/PostItem.vue b/components/PostItem.vue
index e04c1c5..fa52819 100644
--- a/components/PostItem.vue
+++ b/components/PostItem.vue
@@ -8,9 +8,16 @@
           {{ Content }}
         </div>
         <div class="badge-list" v-if="!inMobile">
-          <a class="split" v-if="Author" :href="withBase(AuthorURL)" @click.stop target="_blank">{{ Author }}</a>
+          <a
+            class="split"
+            v-if="Author"
+            :href="withBase(AuthorURL)"
+            @click.stop
+            target="_blank"
+            >{{ Author }}</a
+          >
           <span class="split">{{ showTime }}</span>
-          <span class="split" v-if="tag?.length">{{ tag.join(' · ') }}</span>
+          <span class="split" v-if="tag?.length">{{ tag.join(" · ") }}</span>
         </div>
       </div>
       <div
@@ -20,40 +27,47 @@
       ></div>
     </div>
     <div class="badge-list" v-if="inMobile">
-      <a class="split" v-if="Author" :href="withBase(AuthorURL)" @click.stop target="_blank">{{ Author }}</a>
+      <a
+        class="split"
+        v-if="Author"
+        :href="withBase(AuthorURL)"
+        @click.stop
+        target="_blank"
+        >{{ Author }}</a
+      >
       <span class="split">{{ showTime }}</span>
-      <span class="split" v-if="tag?.length">{{ tag.join(' · ') }}</span>
+      <span class="split" v-if="tag?.length">{{ tag.join(" · ") }}</span>
     </div>
   </div>
 </template>
 
 <script setup>
-import { withBase } from 'vitepress'
-import { computed } from 'vue'
-import { useWindowSize } from '@vueuse/core'
+import { withBase } from "vitepress";
+import { computed } from "vue";
+import { useWindowSize } from "@vueuse/core";
 const openBlog = (url) => {
-  window.open(url, '_blank')
-}
-const { width } = useWindowSize()
-const inMobile = computed(() => width.value <= 500)
-function formatDate(d, fmt = 'yyyy-MM-dd hh:mm:ss') {
+  window.open(url, "_blank");
+};
+const { width } = useWindowSize();
+const inMobile = computed(() => width.value <= 500);
+function formatDate(d, fmt = "yyyy-MM-dd hh:mm:ss") {
   if (!(d instanceof Date)) {
-    d = new Date(d)
+    d = new Date(d);
   }
   const o = {
-    'M+': d.getMonth() + 1, // 月份
-    'd+': d.getDate(), // 日
-    'h+': d.getHours(), // 小时
-    'm+': d.getMinutes(), // 分
-    's+': d.getSeconds(), // 秒
-    'q+': Math.floor((d.getMonth() + 3) / 3), // 季度
-    S: d.getMilliseconds() // 毫秒
-  }
+    "M+": d.getMonth() + 1, // 月份
+    "d+": d.getDate(), // 日
+    "h+": d.getHours(), // 小时
+    "m+": d.getMinutes(), // 分
+    "s+": d.getSeconds(), // 秒
+    "q+": Math.floor((d.getMonth() + 3) / 3), // 季度
+    S: d.getMilliseconds(), // 毫秒
+  };
   if (/(y+)/.test(fmt)) {
     fmt = fmt.replace(
       RegExp.$1,
       `${d.getFullYear()}`.substr(4 - RegExp.$1.length)
-    )
+    );
   }
   // eslint-disable-next-line no-restricted-syntax
   for (const k in o) {
@@ -61,33 +75,33 @@ function formatDate(d, fmt = 'yyyy-MM-dd hh:mm:ss') {
       fmt = fmt.replace(
         RegExp.$1,
         RegExp.$1.length === 1 ? o[k] : `00${o[k]}`.substr(`${o[k]}`.length)
-      )
+      );
   }
-  return fmt
+  return fmt;
 }
 function formatShowDate(date) {
-  const source = date ? +new Date(date) : +new Date()
-  const now = +new Date()
-  const diff = now - source
-  const oneSeconds = 1000
-  const oneMinute = oneSeconds * 60
-  const oneHour = oneMinute * 60
-  const oneDay = oneHour * 24
-  const oneWeek = oneDay * 7
+  const source = date ? +new Date(date) : +new Date();
+  const now = +new Date();
+  const diff = now - source;
+  const oneSeconds = 1000;
+  const oneMinute = oneSeconds * 60;
+  const oneHour = oneMinute * 60;
+  const oneDay = oneHour * 24;
+  const oneWeek = oneDay * 7;
   if (diff < oneMinute) {
-    return `${Math.floor(diff / oneSeconds)}秒前`
+    return `${Math.floor(diff / oneSeconds)}秒前`;
   }
   if (diff < oneHour) {
-    return `${Math.floor(diff / oneMinute)}分钟前`
+    return `${Math.floor(diff / oneMinute)}分钟前`;
   }
   if (diff < oneDay) {
-    return `${Math.floor(diff / oneHour)}小时前`
+    return `${Math.floor(diff / oneHour)}小时前`;
   }
   if (diff < oneWeek) {
-    return `${Math.floor(diff / oneDay)}天前`
+    return `${Math.floor(diff / oneDay)}天前`;
   }
 
-  return formatDate(new Date(date), 'yyyy-MM-dd')
+  return formatDate(new Date(date), "yyyy-MM-dd");
 }
 
 const props = defineProps({
@@ -104,13 +118,12 @@ const props = defineProps({
     required: false,
   },
   PostURL: String,
-  AuthorURL: String
-})
+  AuthorURL: String,
+});
 
 const showTime = computed(() => {
-  return formatShowDate(props.Date)
-})
-
+  return formatShowDate(props.Date);
+});
 </script>
 
 <style scoped>
@@ -127,7 +140,7 @@ const showTime = computed(() => {
   opacity: 1;
 }
 .blog-item .pin::before {
-  content: '';
+  content: "";
   position: absolute;
   width: 120%;
   height: 30px;
@@ -145,8 +158,8 @@ const showTime = computed(() => {
 
 .blog-item {
   position: relative;
-  border: 1px solid rgba(82, 82, 89, .32);
-  border-radius: .5rem;
+  border: 1px solid rgba(82, 82, 89, 0.32);
+  border-radius: 0.5rem;
   padding: 1.5rem;
   width: 100%;
   overflow: hidden;
@@ -154,11 +167,10 @@ const showTime = computed(() => {
   transition: all 0.3s;
   display: flex;
   flex-direction: column;
-  transition: border-color .25s;
+  transition: border-color 0.25s;
   cursor: pointer;
 }
 
-
 .blog-item:hover {
   border: 1px solid #09f;
 }
@@ -196,7 +208,7 @@ const showTime = computed(() => {
   margin-top: 8px;
 }
 .badge-list .split:not(:last-child)::after {
-  content: '';
+  content: "";
   display: inline-block;
   width: 1px;
   height: 8px;
@@ -219,4 +231,4 @@ const showTime = computed(() => {
     background-size: 100px 60px;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/components/PostList.vue b/components/PostList.vue
index 727dbb4..f60be3b 100644
--- a/components/PostList.vue
+++ b/components/PostList.vue
@@ -1,23 +1,31 @@
 <script setup>
-import { ref, computed } from 'vue';
-import Pagination from './Pagination.vue';
-import PostItem from './PostItem.vue';
-const props= {data:(await (await fetch("https://ghproxy.com/https://raw.githubusercontent.com/NX-Official/friends-link-plus/main/output/friends.json")).json()).posts}
-const pageSize = 10
+import { ref, computed } from "vue";
+import Pagination from "./Pagination.vue";
+import PostItem from "./PostItem.vue";
+const props = {
+  data: (
+    await (
+      await fetch(
+        "https://ghproxy.com/https://raw.githubusercontent.com/NX-Official/friends-link-plus/main/output/friends.json"
+      )
+    ).json()
+  ).posts,
+};
+const pageSize = 10;
 // const Date = ref('')
-const pageTotal = ref(Math.ceil(props.data.length / pageSize))
-const pageNum = ref(1)
+const pageTotal = ref(Math.ceil(props.data.length / pageSize));
+const pageNum = ref(1);
 // const searchText = ref('')
 // const onsearchText = ref('')
 const pluginLists = computed(() => {
-  let data_ = props.data//.filter(item => item.Date == Date.value)
+  let data_ = props.data; //.filter(item => item.Date == Date.value)
   // if (!!onsearchText.value) {
   //   data_ = data_.filter(item => item.name.indexOf(onsearchText.value) > -1)
   // }
-  pageTotal.value = Math.ceil(data_.length / pageSize)
-  data_ = data_.slice((pageNum.value - 1) * pageSize, pageNum.value * pageSize)
-  return data_
-})
+  pageTotal.value = Math.ceil(data_.length / pageSize);
+  data_ = data_.slice((pageNum.value - 1) * pageSize, pageNum.value * pageSize);
+  return data_;
+});
 // const setDate = (Date_) => {
 //   Date.value = Date_
 //   searchText.value = ""
@@ -59,43 +67,62 @@ const pluginLists = computed(() => {
       </div>
       <div class="divider" style="margin-bottom: 1rem;" />
     </div> -->
-    <Pagination :pageTotal="pageTotal" v-model="pageNum" style="width: 100%;padding: 1rem 0;" key="0" />
+    <Pagination
+      :pageTotal="pageTotal"
+      v-model="pageNum"
+      style="width: 100%; padding: 1rem 0"
+      key="0"
+    />
     <div class="card-list">
-      <PostItem v-for="(item, index) in pluginLists" :key="index" :Title="item.Title" :Content="item.Content"
-        :Date="item.Date" :Author="item.Author" :tag="item?.tag" :cover="item?.cover" :PostURL="item.PostURL" :AuthorURL="item.AuthorURL"/>
+      <PostItem
+        v-for="(item, index) in pluginLists"
+        :key="index"
+        :Title="item.Title"
+        :Content="item.Content"
+        :Date="item.Date"
+        :Author="item.Author"
+        :tag="item?.tag"
+        :cover="item?.cover"
+        :PostURL="item.PostURL"
+        :AuthorURL="item.AuthorURL"
+      />
     </div>
-    <Pagination :pageTotal="pageTotal" v-model="pageNum" style="width: 100%;padding: 1rem 0;" key="1" />
+    <Pagination
+      :pageTotal="pageTotal"
+      v-model="pageNum"
+      style="width: 100%; padding: 1rem 0"
+      key="1"
+    />
   </div>
 </template>
 
-
 <style scoped>
 .tab {
-  grid-row-gap: .5rem;
-  row-gap: .5rem;
+  grid-row-gap: 0.5rem;
+  row-gap: 0.5rem;
   margin-top: 2.5rem;
   grid-template-columns: 80px auto;
   display: grid;
 }
 
 .sm {
-  font-size: .875rem;
+  font-size: 0.875rem;
   line-height: 1.25rem;
 }
 
 .select-list {
-  grid-gap: .5rem;
-  gap: .5rem;
+  grid-gap: 0.5rem;
+  gap: 0.5rem;
   flex-wrap: wrap;
   display: flex;
-  margin-bottom: .5rem;
+  margin-bottom: 0.5rem;
 }
 
 .select-button {
-  border-radius: .25rem;
+  border-radius: 0.25rem;
   background-color: #9ca3af0d;
-  padding: .125rem .5rem;
-  font-size: .875rem;
+  padding: 0.125rem 0.5rem;
+  font-size: 0.875rem;
   line-height: 1.25rem;
 }
 
@@ -111,17 +138,17 @@ const pluginLists = computed(() => {
 }
 
 .divider {
-  background-color: rgba(60, 60, 67, .12);
+  background-color: rgba(60, 60, 67, 0.12);
   height: 1px;
 }
 
 .search {
-  padding: .5rem;
+  padding: 0.5rem;
   display: flex;
 }
 
 .icon {
-  margin-right: .5rem;
+  margin-right: 0.5rem;
 }
 
 .search-input {
@@ -138,12 +165,12 @@ const pluginLists = computed(() => {
 
 .card {
   display: block;
-  border: 1px solid rgba(82, 82, 89, .32);
-  border-radius: .5rem;
+  border: 1px solid rgba(82, 82, 89, 0.32);
+  border-radius: 0.5rem;
   padding: 1.5rem;
   width: 100%;
   height: 100%;
-  transition: border-color .25s;
+  transition: border-color 0.25s;
   cursor: pointer;
 }
 
@@ -173,24 +200,24 @@ const pluginLists = computed(() => {
 }
 
 .card-des {
-  color: #3C3C43;
-  opacity: .7;
-  font-size: .875rem;
+  color: #3c3c43;
+  opacity: 0.7;
+  font-size: 0.875rem;
   line-height: 1.25rem;
-  margin-top: .3rem;
+  margin-top: 0.3rem;
 }
 
 .card-tags {
   display: flex;
-  margin-top: .5rem;
-  margin-bottom: .5rem;
-  font-size: .875rem;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  font-size: 0.875rem;
   line-height: 1.25rem;
 }
 
 .card-tag {
-  margin: 0 .5rem;
-  padding: 0 .5rem;
+  margin: 0 0.5rem;
+  padding: 0 0.5rem;
   background-color: #9ca3af2b;
 }
 
@@ -200,12 +227,12 @@ const pluginLists = computed(() => {
 }
 
 .card-details {
-  margin: .8rem 0 .5rem 0;
+  margin: 0.8rem 0 0.5rem 0;
 }
 
 .card-text {
-  margin-left: .5rem;
-  font-size: .95rem;
+  margin-left: 0.5rem;
+  font-size: 0.95rem;
   line-height: 1.5rem;
 }
 
@@ -219,9 +246,9 @@ const pluginLists = computed(() => {
   justify-content: center;
   align-items: center;
   width: 100%;
-  padding: .4rem 1rem;
+  padding: 0.4rem 1rem;
   background-color: #f6f6f7;
-  border-radius: .5rem;
+  border-radius: 0.5rem;
   cursor: pointer;
 }
 
@@ -234,7 +261,6 @@ const pluginLists = computed(() => {
 }
 
 @media (prefers-color-scheme: dark) {
-
   .card-button {
     background-color: #9ca3af0d;
   }
@@ -242,6 +268,5 @@ const pluginLists = computed(() => {
   .card-des {
     color: #9ca3af;
   }
-
 }
 </style>
diff --git a/components/RenderJupyterNotebook.vue b/components/RenderJupyterNotebook.vue
index 7fb486f..2de5b3c 100644
--- a/components/RenderJupyterNotebook.vue
+++ b/components/RenderJupyterNotebook.vue
@@ -1,21 +1,65 @@
 <template>
   <div ref="NotebookFragment" class="notebook-fragment">
     <div ref="loading" id="loading">
-      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" id="loadingsvg">
-        <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2">
-          <path stroke-dasharray="2 4" stroke-dashoffset="6"
-            d="M12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3">
-            <animate attributeName="stroke-dashoffset" dur="0.6s" repeatCount="indefinite" values="6;0" />
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="32"
+        height="32"
+        viewBox="0 0 24 24"
+        id="loadingsvg"
+      >
+        <g
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-width="2"
+        >
+          <path
+            stroke-dasharray="2 4"
+            stroke-dashoffset="6"
+            d="M12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3"
+          >
+            <animate
+              attributeName="stroke-dashoffset"
+              dur="0.6s"
+              repeatCount="indefinite"
+              values="6;0"
+            />
           </path>
-          <path stroke-dasharray="30" stroke-dashoffset="30"
-            d="M12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21">
-            <animate fill="freeze" attributeName="stroke-dashoffset" begin="0.1s" dur="0.3s" values="30;0" />
+          <path
+            stroke-dasharray="30"
+            stroke-dashoffset="30"
+            d="M12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21"
+          >
+            <animate
+              fill="freeze"
+              attributeName="stroke-dashoffset"
+              begin="0.1s"
+              dur="0.3s"
+              values="30;0"
+            />
           </path>
           <path stroke-dasharray="10" stroke-dashoffset="10" d="M12 16v-7.5">
-            <animate fill="freeze" attributeName="stroke-dashoffset" begin="0.5s" dur="0.2s" values="10;0" />
+            <animate
+              fill="freeze"
+              attributeName="stroke-dashoffset"
+              begin="0.5s"
+              dur="0.2s"
+              values="10;0"
+            />
           </path>
-          <path stroke-dasharray="6" stroke-dashoffset="6" d="M12 8.5l3.5 3.5M12 8.5l-3.5 3.5">
-            <animate fill="freeze" attributeName="stroke-dashoffset" begin="0.7s" dur="0.2s" values="6;0" />
+          <path
+            stroke-dasharray="6"
+            stroke-dashoffset="6"
+            d="M12 8.5l3.5 3.5M12 8.5l-3.5 3.5"
+          >
+            <animate
+              fill="freeze"
+              attributeName="stroke-dashoffset"
+              begin="0.7s"
+              dur="0.2s"
+              values="6;0"
+            />
           </path>
         </g>
       </svg>
@@ -49,11 +93,11 @@ onMounted(async () => {
   flex-direction: column;
   align-items: center;
   gap: 2rem;
-  animation: rainbow 10s cubic-bezier(0.1, 0.7, 1.0, 0.1) infinite !important;
+  animation: rainbow 10s cubic-bezier(0.1, 0.7, 1, 0.1) infinite !important;
 }
 
 #loadingsvg {
   width: 5rem;
   height: 5rem;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/components/pdf.vue b/components/pdf.vue
index 0fb8746..ee1f778 100644
--- a/components/pdf.vue
+++ b/components/pdf.vue
@@ -1,20 +1,20 @@
 <template>
   <div class="pdf">
-    <button @click='open'>打开PDF</button>
+    <button @click="open">打开PDF</button>
   </div>
 </template>
 
 <script setup>
-import { defineProps } from 'vue'
+import { defineProps } from "vue";
 const url = defineProps({
   url: {
     type: String,
-    default: ''
-  }
-})
+    default: "",
+  },
+});
 const open = () => {
-  window.open(url.url)
-}
+  window.open(url.url);
+};
 </script>
 
 <style scoped>