chore: blog 的若干微调

This commit is contained in:
camera-2018
2023-07-22 03:26:06 +08:00
parent 280929213f
commit 0cdd371276
5 changed files with 28 additions and 21 deletions

View File

@@ -2,6 +2,8 @@
title: Blogs title: Blogs
editLink: false editLink: false
aside: false aside: false
next: false
lastUpdated: false
--- ---
<script setup> <script setup>

View File

@@ -5,15 +5,15 @@ defineProps({
member: Object member: Object
}) })
const goUrl = (url)=> { const goUrl = (url) => {
window.open(url,"_blank") window.open(url, "_blank")
} }
</script> </script>
<template> <template>
<article class="VPTeamMembersItem" :class="[size ?? 'medium']"> <article class="VPTeamMembersItem" :class="[size ?? 'medium']">
<div class="profile"> <div class="profile" @click="goUrl(member.url)">
<figure class="avatar"> <figure class="avatar">
<img class="avatar-img" :src="member.avatar" :alt="member.name"> <img class="avatar-img" :src="member.avatar" :alt="member.name">
</figure> </figure>
@@ -29,10 +29,15 @@ const goUrl = (url)=> {
@ @
</span> </span>
</p> </p>
<p v-if="member.description" class="desc" v-html="member.description"/> <p v-if="member.description" class="desc" @click.stop>
{{ member.description }}
</p>
<div v-if="member.url" class="links"> <div v-if="member.url" class="links">
<svg v-if="member.rss" @click="goUrl(member.rss)" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="currentColor" d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm1.5 2.5c5.523 0 10 4.477 10 10a1 1 0 1 1-2 0a8 8 0 0 0-8-8a1 1 0 0 1 0-2zm0 4a6 6 0 0 1 6 6a1 1 0 1 1-2 0a4 4 0 0 0-4-4a1 1 0 0 1 0-2zm.5 7a1.5 1.5 0 1 1 0-3a1.5 1.5 0 0 1 0 3z"/></svg> <svg v-if="member.rss" @click="goUrl(member.rss)" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
<svg v-if="member.url" @click="goUrl(member.url)" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 1000 1000"><path fill="currentColor" d="M196.099.156C88.379.156.219 88.317.219 196.036v607.851c0 107.72 88.16 195.849 195.88 195.849H803.95c107.72 0 195.849-88.129 195.849-195.849V196.036C999.799 88.316 911.67.156 803.95.156H196.099zm338.012 186.777c94.026 7.596 148.647 68.316 155.146 145.948c5.05 39.953 3.637 69.6-2.127 91.418c53.633 1.773 116.39 25.822 120.388 113.098v85.911c-5.561 75.026-32.259 167.679-169.225 187.339c-30.84 4.427-65.452 1.464-110.345 1.157c-45.139-1.19-84.496-.975-118.917-.344c-138.941 2.545-215.468-58.535-216.185-189.28c-1.116-44.494.65-92.734.501-152.581c-.558-37.925-.768-77.544.094-114.381c.267-7.189-.671-15.069 1.22-22.807c5.98-84.295 73.682-133.698 152.706-144.665l186.745-.814zM377.963 304.192c-80.036 13.104-83.991 104.44 0 115.726h151.924c80.036-13.104 83.991-104.44 0-115.726H377.963zm-34.508 252.82c-82.395 12.791-83.607 116.536 2.941 127.271l279.1 1.001c81.695-12.682 81.454-116.322-2.941-127.302l-279.1-.97z"/></svg> viewBox="0 0 16 16">
<path fill="currentColor"
d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm1.5 2.5c5.523 0 10 4.477 10 10a1 1 0 1 1-2 0a8 8 0 0 0-8-8a1 1 0 0 1 0-2zm0 4a6 6 0 0 1 6 6a1 1 0 1 1-2 0a4 4 0 0 0-4-4a1 1 0 0 1 0-2zm.5 7a1.5 1.5 0 1 1 0-3a1.5 1.5 0 0 1 0 3z" />
</svg>
</div> </div>
</div> </div>
</div> </div>
@@ -153,12 +158,13 @@ const goUrl = (url)=> {
} }
.name { .name {
margin: 0; margin: 0;
font-weight: 600; font-weight: 600;
cursor: pointer;
} }
.affiliation { .affiliation {
margin: 0; margin: 0;
font-weight: 500; font-weight: 500;
color: var(--vp-c-text-2); color: var(--vp-c-text-2);
} }
@@ -201,8 +207,8 @@ const goUrl = (url)=> {
margin: 0 .5rem; margin: 0 .5rem;
} }
.links svg path:hover { .links :hover {
fill:aquamarine; fill: var(--vp-c-brand-lighter)
} }
.sp-link { .sp-link {
@@ -230,5 +236,4 @@ const goUrl = (url)=> {
width: 16px; width: 16px;
height: 16px; height: 16px;
fill: currentColor; fill: currentColor;
} }</style>
</style>

View File

@@ -132,13 +132,13 @@ const pageArraySm = computed(() => {
.paper-item:hover { .paper-item:hover {
background-color: #0099ff0d; background-color: #0099ff0d;
--un-text-opacity: 1; --un-text-opacity: 1;
color: #0099ff; color: var(--vp-c-brand-lighter);
} }
.paper-item.active { .paper-item.active {
background-color: #0099ff0d; background-color: #0099ff0d;
--un-text-opacity: 1; --un-text-opacity: 1;
color: #0099ff; color: var(--vp-c-brand-lighter);
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {

View File

@@ -1,20 +1,20 @@
<template> <template>
<p class="blog-item" > <p class="blog-item" @click="openBlog(PostURL)">
<!-- <i class="pin" v-if="!!pin"></i> --> <!-- <i class="pin" v-if="!!pin"></i> -->
<!-- 标题 --> <!-- 标题 -->
<p class="title" v-if="inMobile" @click="openBlog(PostURL)">{{ Title }}</p> <p class="title" v-if="inMobile">{{ Title }}</p>
<div class="info-container"> <div class="info-container">
<!-- 左侧信息 --> <!-- 左侧信息 -->
<div class="info-part"> <div class="info-part">
<!-- 标题 --> <!-- 标题 -->
<p class="title" v-if="!inMobile" @click="openBlog(PostURL)">{{ Title }}</p> <p class="title" v-if="!inMobile">{{ Title }}</p>
<!-- 简短描述 --> <!-- 简短描述 -->
<p class="description" v-if="!!Content" @click="openBlog(PostURL)"> <p class="description" v-if="!!Content">
{{ Content }} {{ Content }}
</p> </p>
<!-- 底部补充描述 --> <!-- 底部补充描述 -->
<div class="badge-list" v-if="!inMobile"> <div class="badge-list" v-if="!inMobile">
<a class="split" v-if="Author" :href="withBase(AuthorURL)">{{ 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>
@@ -28,7 +28,7 @@
</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)">{{ 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>

View File

@@ -107,7 +107,7 @@ const pluginLists = computed(() => {
.select-button.active { .select-button.active {
background-color: #0099ff0d; background-color: #0099ff0d;
--un-text-opacity: 1; --un-text-opacity: 1;
color: #0099ff; color: var(--vp-c-brand-lighter);
} }
.divider { .divider {