moyin/fzu-product
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

style: 格式化代码

Browse Source
This commit is contained in:
少轻狂
2023-08-14 23:27:19 +08:00
parent e515ece5aa
commit 016f606769
7 changed files with 327 additions and 232 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
components/Bilibili.vue
View File

@@ -1,25 +1,32 @@
<template> <template>
<iframe :src="`//player.bilibili.com/player.html?bvid=${bvid}&autoplay=false`" scrolling="no" border="0" frameborder="no" <iframe
framespacing="0" allowfullscreen="true" class="bili_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> </template>
<script setup> <script setup>
import { defineProps } from 'vue' import { defineProps } from "vue";
const { bvid } = defineProps({ const { bvid } = defineProps({
bvid: { bvid: {
type: String, type: String,
default: 'BV1GJ411x7h7', default: "BV1GJ411x7h7",
required: true, required: true,
validator: (value) => { validator: (value) => {
return value.trim() !== '' return value.trim() !== "";
} },
} },
}) });
</script> </script>
<style scoped> <style scoped>
.bili_iframe { .bili_iframe {
width: 100%; width: 100%;
height: 23rem; height: 23rem;
} }
</style> </style>

14
components/Download.vue
View File

@@ -1,20 +1,20 @@
<template> <template>
<div class="download"> <div class="download">
<button @click='download()'>📎下载附件代码</button> <button @click="download()">📎下载附件代码</button>
</div> </div>
</template> </template>
<script setup> <script setup>
import { defineProps } from 'vue' import { defineProps } from "vue";
const url = defineProps({ const url = defineProps({
url: { url: {
type: String, type: String,
default: '' default: "",
} },
}) });
const download = () => { const download = () => {
window.open(url.url) window.open(url.url);
} };
</script> </script>
<style scoped> <style scoped>

187
components/Parallax.vue
View File

@@ -1,99 +1,105 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, reactive, ref } from 'vue' import { computed, reactive, ref } from "vue";
import type { CSSProperties } from 'vue' import type { CSSProperties } from "vue";
import { useMounted, useParallax } from '@vueuse/core' import { useMounted, useParallax } from "@vueuse/core";
const target = ref(null) const target = ref(null);
const parallax = reactive(useParallax(target));
const parallax = reactive(useParallax(target))
const targetStyle: CSSProperties = { const targetStyle: CSSProperties = {
display: 'flex', display: "flex",
flexDirection: 'column', flexDirection: "column",
justifyContent: 'center', justifyContent: "center",
userSelect: 'none', userSelect: "none",
transition: '.3s ease-out all', transition: ".3s ease-out all",
} };
const cardWindowStyle: CSSProperties = { const cardWindowStyle: CSSProperties = {
overflow: 'hidden', overflow: "hidden",
fontSize: '6rem', fontSize: "6rem",
position: 'absolute', position: "absolute",
top: 'calc(50% - 1em)', top: "calc(50% - 1em)",
left: 'calc(50% - 1em)', left: "calc(50% - 1em)",
height: '2em', height: "2em",
width: '2em', width: "2em",
margin: 'auto', margin: "auto",
} };
const layerBase: CSSProperties = { const layerBase: CSSProperties = {
position: 'absolute', position: "absolute",
userSelect: 'none', userSelect: "none",
"-webkit-user-drag": "none", "-webkit-user-drag": "none",
height: '100%', height: "100%",
width: '100%', width: "100%",
transition: '.3s ease-out all', transition: ".3s ease-out all",
} };
const containerStyle: CSSProperties = { const containerStyle: CSSProperties = {
margin: '3em auto', margin: "3em auto",
perspective: '300px', perspective: "300px",
} };
const layer0 = computed(() => ({ const layer0 = computed(() => ({
...layerBase, ...layerBase,
content:'url(https://cdn.xyxsw.site/hdu-cs-wiki_main.png)', content: "url(https://cdn.xyxsw.site/hdu-cs-wiki_main.png)",
transform: `translateX(${parallax.tilt * 10}px) translateY(${parallax.roll * 10 transform: `translateX(${parallax.tilt * 10}px) translateY(${
}px) scale(1)`, parallax.roll * 10
})) }px) scale(1)`,
}));
const layer1 = computed(() => ({ const layer1 = computed(() => ({
content:'url(https://cdn.xyxsw.site/sparkles.gif)', content: "url(https://cdn.xyxsw.site/sparkles.gif)",
userSelect: 'none', userSelect: "none",
"-webkit-user-drag": "none", "-webkit-user-drag": "none",
transform: `translateX(${parallax.tilt * 20}px) translateY(${parallax.roll * 20 transform: `translateX(${parallax.tilt * 20}px) translateY(${
}px) scale(1.33)`, parallax.roll * 20
'background-blend-mode': 'overlay', }px) scale(1.33)`,
filter: 'brightness(1) contrast(1)', "background-blend-mode": "overlay",
'mix-blend-mode': 'color-dodge', filter: "brightness(1) contrast(1)",
opacity: '1', "mix-blend-mode": "color-dodge",
position: 'absolute', opacity: "1",
})) position: "absolute",
}));
const layer2 = computed(() => ({ const layer2 = computed(() => ({
transform: `translateX(${parallax.tilt * 30}px) translateY(${parallax.roll * 30 transform: `translateX(${parallax.tilt * 30}px) translateY(${
}px) scale(1.33)`, parallax.roll * 30
'background-image': 'linear-gradient(115deg,transparent 0%,#ec9bb6 25%,transparent 47%,transparent 53%,#ccac6f 75%,transparent 100%)', }px) scale(1.33)`,
opacity: '.18', "background-image":
filter: 'brightness(.5) contrast(1)', "linear-gradient(115deg,transparent 0%,#ec9bb6 25%,transparent 47%,transparent 53%,#ccac6f 75%,transparent 100%)",
width: '100%', opacity: ".18",
height: '100%', filter: "brightness(.5) contrast(1)",
position: 'absolute', width: "100%",
})) height: "100%",
position: "absolute",
}));
const layer3 = computed(() => ({ const layer3 = computed(() => ({
...layerBase, ...layerBase,
transform: `translateX(${parallax.tilt * 40}px) translateY(${parallax.roll * 40 transform: `translateX(${parallax.tilt * 40}px) translateY(${
}px) scale(1.33)`, parallax.roll * 40
})) }px) scale(1.33)`,
}));
const layer4 = layerBase const layer4 = layerBase;
const cardStyle = computed(() => ({ const cardStyle = computed(() => ({
background: '', background: "",
height: '14rem', height: "14rem",
width: '20rem', width: "20rem",
borderRadius: '20px', borderRadius: "20px",
border: '1px solid #000000', border: "1px solid #000000",
overflow: 'hidden', overflow: "hidden",
transition: '.3s ease-out all', 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)', boxShadow:
transform: `rotateX(${parallax.roll * 20}deg) rotateY(${parallax.tilt * 20 "-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)",
}deg)`, transform: `rotateX(${parallax.roll * 20}deg) rotateY(${
})) parallax.tilt * 20
}deg)`,
}));
</script> </script>
<script lang="ts"> <script lang="ts">
export default { export default {
inheritAttrs: false inheritAttrs: false,
} };
</script> </script>
<template> <template>
@@ -103,10 +109,9 @@ export default {
<div :style="cardStyle"> <div :style="cardStyle">
<div id="kirakira"></div> <div id="kirakira"></div>
<div :style="layer2"></div> <div :style="layer2"></div>
<img :style="layer1" <img :style="layer1" class="image" />
class="image">
<div :style="cardWindowStyle"> <div :style="cardWindowStyle">
<img :style="layer0" class="image"> <img :style="layer0" class="image" />
</div> </div>
</div> </div>
</div> </div>
@@ -122,58 +127,60 @@ export default {
top: 0; top: 0;
left: 0; left: 0;
z-index: 1; z-index: 1;
transition: .3s ease-out; transition: 0.3s ease-out;
} }
#kirakira:hover { #kirakira:hover {
background-image: linear-gradient(110deg, background-image: linear-gradient(
transparent 25%, 110deg,
#ec9bb6 48%, transparent 25%,
#ccac6f 52%, #ec9bb6 48%,
transparent 75%); #ccac6f 52%,
transparent 75%
);
background-position: 50% 50%; background-position: 50% 50%;
background-size: 250% 250%; background-size: 250% 250%;
opacity: .18; opacity: 0.18;
filter: brightness(.66) contrast(1.33); filter: brightness(0.66) contrast(1.33);
transition: none; transition: none;
background-repeat: no-repeat; background-repeat: no-repeat;
mix-blend-mode: color-dodge; mix-blend-mode: color-dodge;
transition: all .33s ease; transition: all 0.33s ease;
animation: holoGradient 12s ease 0s 1, animation: holoGradient 12s ease 0s 1;
} }
@keyframes holoGradient { @keyframes holoGradient {
0%, 0%,
100% { 100% {
opacity: 0.3; opacity: 0.3;
background-position: 50% 50%; background-position: 50% 50%;
filter: brightness(.5) contrast(1); filter: brightness(0.5) contrast(1);
} }
5%, 5%,
9% { 9% {
background-position: 100% 100%; background-position: 100% 100%;
opacity: 0.1; opacity: 0.1;
filter: brightness(.75) contrast(1.25); filter: brightness(0.75) contrast(1.25);
} }
13%, 13%,
17% { 17% {
background-position: 0% 0%; background-position: 0% 0%;
opacity: .18; opacity: 0.18;
} }
35%, 35%,
39% { 39% {
background-position: 100% 100%; background-position: 100% 100%;
opacity: 0.2; opacity: 0.2;
filter: brightness(.5) contrast(1); filter: brightness(0.5) contrast(1);
} }
55% { 55% {
background-position: 0% 0%; background-position: 0% 0%;
opacity: 0.3; opacity: 0.3;
filter: brightness(.75) contrast(1.25); filter: brightness(0.75) contrast(1.25);
} }
}</style> }
</style>

110
components/PostItem.vue
View File

@@ -8,9 +8,16 @@
{{ Content }} {{ Content }}
</div> </div>
<div class="badge-list" v-if="!inMobile"> <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">{{ 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> </div>
<div <div
@@ -20,40 +27,47 @@
></div> ></div>
</div> </div>
<div class="badge-list" v-if="inMobile"> <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">{{ 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> </div>
</template> </template>
<script setup> <script setup>
import { withBase } from 'vitepress' import { withBase } from "vitepress";
import { computed } from 'vue' import { computed } from "vue";
import { useWindowSize } from '@vueuse/core' import { useWindowSize } from "@vueuse/core";
const openBlog = (url) => { const openBlog = (url) => {
window.open(url, '_blank') window.open(url, "_blank");
} };
const { width } = useWindowSize() const { width } = useWindowSize();
const inMobile = computed(() => width.value <= 500) const inMobile = computed(() => width.value <= 500);
function formatDate(d, fmt = 'yyyy-MM-dd hh:mm:ss') { function formatDate(d, fmt = "yyyy-MM-dd hh:mm:ss") {
if (!(d instanceof Date)) { if (!(d instanceof Date)) {
d = new Date(d) d = new Date(d);
} }
const o = { const o = {
'M+': d.getMonth() + 1, // 月份 "M+": d.getMonth() + 1, // 月份
'd+': d.getDate(), // 日 "d+": d.getDate(), // 日
'h+': d.getHours(), // 小时 "h+": d.getHours(), // 小时
'm+': d.getMinutes(), // 分 "m+": d.getMinutes(), // 分
's+': d.getSeconds(), // 秒 "s+": d.getSeconds(), // 秒
'q+': Math.floor((d.getMonth() + 3) / 3), // 季度 "q+": Math.floor((d.getMonth() + 3) / 3), // 季度
S: d.getMilliseconds() // 毫秒 S: d.getMilliseconds(), // 毫秒
} };
if (/(y+)/.test(fmt)) { if (/(y+)/.test(fmt)) {
fmt = fmt.replace( fmt = fmt.replace(
RegExp.$1, RegExp.$1,
`${d.getFullYear()}`.substr(4 - RegExp.$1.length) `${d.getFullYear()}`.substr(4 - RegExp.$1.length)
) );
} }
// eslint-disable-next-line no-restricted-syntax // eslint-disable-next-line no-restricted-syntax
for (const k in o) { for (const k in o) {
@@ -61,33 +75,33 @@ function formatDate(d, fmt = 'yyyy-MM-dd hh:mm:ss') {
fmt = fmt.replace( fmt = fmt.replace(
RegExp.$1, RegExp.$1,
RegExp.$1.length === 1 ? o[k] : `00${o[k]}`.substr(`${o[k]}`.length) RegExp.$1.length === 1 ? o[k] : `00${o[k]}`.substr(`${o[k]}`.length)
) );
} }
return fmt return fmt;
} }
function formatShowDate(date) { function formatShowDate(date) {
const source = date ? +new Date(date) : +new Date() const source = date ? +new Date(date) : +new Date();
const now = +new Date() const now = +new Date();
const diff = now - source const diff = now - source;
const oneSeconds = 1000 const oneSeconds = 1000;
const oneMinute = oneSeconds * 60 const oneMinute = oneSeconds * 60;
const oneHour = oneMinute * 60 const oneHour = oneMinute * 60;
const oneDay = oneHour * 24 const oneDay = oneHour * 24;
const oneWeek = oneDay * 7 const oneWeek = oneDay * 7;
if (diff < oneMinute) { if (diff < oneMinute) {
return `${Math.floor(diff / oneSeconds)}秒前` return `${Math.floor(diff / oneSeconds)}秒前`;
} }
if (diff < oneHour) { if (diff < oneHour) {
return `${Math.floor(diff / oneMinute)}分钟前` return `${Math.floor(diff / oneMinute)}分钟前`;
} }
if (diff < oneDay) { if (diff < oneDay) {
return `${Math.floor(diff / oneHour)}小时前` return `${Math.floor(diff / oneHour)}小时前`;
} }
if (diff < oneWeek) { 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({ const props = defineProps({
@@ -104,13 +118,12 @@ const props = defineProps({
required: false, required: false,
}, },
PostURL: String, PostURL: String,
AuthorURL: String AuthorURL: String,
}) });
const showTime = computed(() => { const showTime = computed(() => {
return formatShowDate(props.Date) return formatShowDate(props.Date);
}) });
</script> </script>
<style scoped> <style scoped>
@@ -127,7 +140,7 @@ const showTime = computed(() => {
opacity: 1; opacity: 1;
} }
.blog-item .pin::before { .blog-item .pin::before {
content: ''; content: "";
position: absolute; position: absolute;
width: 120%; width: 120%;
height: 30px; height: 30px;
@@ -145,8 +158,8 @@ const showTime = computed(() => {
.blog-item { .blog-item {
position: relative; position: relative;
border: 1px solid rgba(82, 82, 89, .32); border: 1px solid rgba(82, 82, 89, 0.32);
border-radius: .5rem; border-radius: 0.5rem;
padding: 1.5rem; padding: 1.5rem;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
@@ -154,11 +167,10 @@ const showTime = computed(() => {
transition: all 0.3s; transition: all 0.3s;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
transition: border-color .25s; transition: border-color 0.25s;
cursor: pointer; cursor: pointer;
} }
.blog-item:hover { .blog-item:hover {
border: 1px solid #09f; border: 1px solid #09f;
} }
@@ -196,7 +208,7 @@ const showTime = computed(() => {
margin-top: 8px; margin-top: 8px;
} }
.badge-list .split:not(:last-child)::after { .badge-list .split:not(:last-child)::after {
content: ''; content: "";
display: inline-block; display: inline-block;
width: 1px; width: 1px;
height: 8px; height: 8px;
@@ -219,4 +231,4 @@ const showTime = computed(() => {
background-size: 100px 60px; background-size: 100px 60px;
} }
} }
</style> </style>

121
components/PostList.vue
View File

@@ -1,23 +1,31 @@
<script setup> <script setup>
import { ref, computed } from 'vue'; import { ref, computed } from "vue";
import Pagination from './Pagination.vue'; import Pagination from "./Pagination.vue";
import PostItem from './PostItem.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 props = {
const pageSize = 10 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 Date = ref('')
const pageTotal = ref(Math.ceil(props.data.length / pageSize)) const pageTotal = ref(Math.ceil(props.data.length / pageSize));
const pageNum = ref(1) const pageNum = ref(1);
// const searchText = ref('') // const searchText = ref('')
// const onsearchText = ref('') // const onsearchText = ref('')
const pluginLists = computed(() => { 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) { // if (!!onsearchText.value) {
// data_ = data_.filter(item => item.name.indexOf(onsearchText.value) > -1) // data_ = data_.filter(item => item.name.indexOf(onsearchText.value) > -1)
// } // }
pageTotal.value = Math.ceil(data_.length / pageSize) pageTotal.value = Math.ceil(data_.length / pageSize);
data_ = data_.slice((pageNum.value - 1) * pageSize, pageNum.value * pageSize) data_ = data_.slice((pageNum.value - 1) * pageSize, pageNum.value * pageSize);
return data_ return data_;
}) });
// const setDate = (Date_) => { // const setDate = (Date_) => {
// Date.value = Date_ // Date.value = Date_
// searchText.value = "" // searchText.value = ""
@@ -59,43 +67,62 @@ const pluginLists = computed(() => {
</div> </div>
<div class="divider" style="margin-bottom: 1rem;" /> <div class="divider" style="margin-bottom: 1rem;" />
</div> --> </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"> <div class="card-list">
<PostItem v-for="(item, index) in pluginLists" :key="index" :Title="item.Title" :Content="item.Content" <PostItem
:Date="item.Date" :Author="item.Author" :tag="item?.tag" :cover="item?.cover" :PostURL="item.PostURL" :AuthorURL="item.AuthorURL"/> 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> </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> </div>
</template> </template>
<style scoped> <style scoped>
.tab { .tab {
grid-row-gap: .5rem; grid-row-gap: 0.5rem;
row-gap: .5rem; row-gap: 0.5rem;
margin-top: 2.5rem; margin-top: 2.5rem;
grid-template-columns: 80px auto; grid-template-columns: 80px auto;
display: grid; display: grid;
} }
.sm { .sm {
font-size: .875rem; font-size: 0.875rem;
line-height: 1.25rem; line-height: 1.25rem;
} }
.select-list { .select-list {
grid-gap: .5rem; grid-gap: 0.5rem;
gap: .5rem; gap: 0.5rem;
flex-wrap: wrap; flex-wrap: wrap;
display: flex; display: flex;
margin-bottom: .5rem; margin-bottom: 0.5rem;
} }
.select-button { .select-button {
border-radius: .25rem; border-radius: 0.25rem;
background-color: #9ca3af0d; background-color: #9ca3af0d;
padding: .125rem .5rem; padding: 0.125rem 0.5rem;
font-size: .875rem; font-size: 0.875rem;
line-height: 1.25rem; line-height: 1.25rem;
} }
@@ -111,17 +138,17 @@ const pluginLists = computed(() => {
} }
.divider { .divider {
background-color: rgba(60, 60, 67, .12); background-color: rgba(60, 60, 67, 0.12);
height: 1px; height: 1px;
} }
.search { .search {
padding: .5rem; padding: 0.5rem;
display: flex; display: flex;
} }
.icon { .icon {
margin-right: .5rem; margin-right: 0.5rem;
} }
.search-input { .search-input {
@@ -138,12 +165,12 @@ const pluginLists = computed(() => {
.card { .card {
display: block; display: block;
border: 1px solid rgba(82, 82, 89, .32); border: 1px solid rgba(82, 82, 89, 0.32);
border-radius: .5rem; border-radius: 0.5rem;
padding: 1.5rem; padding: 1.5rem;
width: 100%; width: 100%;
height: 100%; height: 100%;
transition: border-color .25s; transition: border-color 0.25s;
cursor: pointer; cursor: pointer;
} }
@@ -173,24 +200,24 @@ const pluginLists = computed(() => {
} }
.card-des { .card-des {
color: #3C3C43; color: #3c3c43;
opacity: .7; opacity: 0.7;
font-size: .875rem; font-size: 0.875rem;
line-height: 1.25rem; line-height: 1.25rem;
margin-top: .3rem; margin-top: 0.3rem;
} }
.card-tags { .card-tags {
display: flex; display: flex;
margin-top: .5rem; margin-top: 0.5rem;
margin-bottom: .5rem; margin-bottom: 0.5rem;
font-size: .875rem; font-size: 0.875rem;
line-height: 1.25rem; line-height: 1.25rem;
} }
.card-tag { .card-tag {
margin: 0 .5rem; margin: 0 0.5rem;
padding: 0 .5rem; padding: 0 0.5rem;
background-color: #9ca3af2b; background-color: #9ca3af2b;
} }
@@ -200,12 +227,12 @@ const pluginLists = computed(() => {
} }
.card-details { .card-details {
margin: .8rem 0 .5rem 0; margin: 0.8rem 0 0.5rem 0;
} }
.card-text { .card-text {
margin-left: .5rem; margin-left: 0.5rem;
font-size: .95rem; font-size: 0.95rem;
line-height: 1.5rem; line-height: 1.5rem;
} }
@@ -219,9 +246,9 @@ const pluginLists = computed(() => {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 100%; width: 100%;
padding: .4rem 1rem; padding: 0.4rem 1rem;
background-color: #f6f6f7; background-color: #f6f6f7;
border-radius: .5rem; border-radius: 0.5rem;
cursor: pointer; cursor: pointer;
} }
@@ -234,7 +261,6 @@ const pluginLists = computed(() => {
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
.card-button { .card-button {
background-color: #9ca3af0d; background-color: #9ca3af0d;
} }
@@ -242,6 +268,5 @@ const pluginLists = computed(() => {
.card-des { .card-des {
color: #9ca3af; color: #9ca3af;
} }
} }
</style> </style>

70
components/RenderJupyterNotebook.vue
View File

@@ -1,21 +1,65 @@
<template> <template>
<div ref="NotebookFragment" class="notebook-fragment"> <div ref="NotebookFragment" class="notebook-fragment">
<div ref="loading" id="loading"> <div ref="loading" id="loading">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" id="loadingsvg"> <svg
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2"> xmlns="http://www.w3.org/2000/svg"
<path stroke-dasharray="2 4" stroke-dashoffset="6" width="32"
d="M12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3"> height="32"
<animate attributeName="stroke-dashoffset" dur="0.6s" repeatCount="indefinite" values="6;0" /> 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>
<path stroke-dasharray="30" stroke-dashoffset="30" <path
d="M12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21"> stroke-dasharray="30"
<animate fill="freeze" attributeName="stroke-dashoffset" begin="0.1s" dur="0.3s" values="30;0" /> 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>
<path stroke-dasharray="10" stroke-dashoffset="10" d="M12 16v-7.5"> <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>
<path stroke-dasharray="6" stroke-dashoffset="6" d="M12 8.5l3.5 3.5M12 8.5l-3.5 3.5"> <path
<animate fill="freeze" attributeName="stroke-dashoffset" begin="0.7s" dur="0.2s" values="6;0" /> 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> </path>
</g> </g>
</svg> </svg>
@@ -49,11 +93,11 @@ onMounted(async () => {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 2rem; 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 { #loadingsvg {
width: 5rem; width: 5rem;
height: 5rem; height: 5rem;
} }
</style> </style>

14
components/pdf.vue
View File

@@ -1,20 +1,20 @@
<template> <template>
<div class="pdf"> <div class="pdf">
<button @click='open'>打开PDF</button> <button @click="open">打开PDF</button>
</div> </div>
</template> </template>
<script setup> <script setup>
import { defineProps } from 'vue' import { defineProps } from "vue";
const url = defineProps({ const url = defineProps({
url: { url: {
type: String, type: String,
default: '' default: "",
} },
}) });
const open = () => { const open = () => {
window.open(url.url) window.open(url.url);
} };
</script> </script>
<style scoped> <style scoped>