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

style: add hover color

Browse Source
This commit is contained in:
少轻狂
2023-08-14 23:25:13 +08:00
parent 339db47517
commit a6c7295a24
1 changed files with 30 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
components/BloggerItem.vue
View File

@@ -1,22 +1,20 @@
<script setup > <script setup>
defineProps({ defineProps({
size: String, size: String,
member: Object, member: Object,
blank: Boolean blank: Boolean,
}) });
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" @click="goUrl(member.url)" v-if="!blank"> <div class="profile" @click="goUrl(member.url)" v-if="!blank">
<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>
<div class="data"> <div class="data">
<div class="author_name"> <div class="author_name">
@@ -26,18 +24,24 @@ const goUrl = (url) => {
<span v-if="member.title" class="title"> <span v-if="member.title" class="title">
{{ member.title }} {{ member.title }}
</span> </span>
<span v-if="member.title && member.org" class="at"> <span v-if="member.title && member.org" class="at"> @ </span>
@
</span>
</p> </p>
<p v-if="member.description" class="desc" @click.stop> <p v-if="member.description" class="desc" @click.stop>
{{ member.description }} {{ member.description }}
</p> </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" <svg
viewBox="0 0 16 16"> v-if="member.rss"
<path fill="currentColor" @click="goUrl(member.rss)"
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" /> 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>
</div> </div>
</div> </div>
@@ -160,16 +164,21 @@ const goUrl = (url) => {
object-fit: cover; object-fit: cover;
} }
.author_name,.more { .author_name,
.more {
margin: 0; margin: 0;
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
} }
.more{ .more {
color: var(--vp-c-text-2); color: var(--vp-c-text-2);
} }
.more:hover {
color: var(--vp-c-brand-lighter);
}
.affiliation { .affiliation {
margin: 0; margin: 0;
font-weight: 500; font-weight: 500;
@@ -211,11 +220,11 @@ const goUrl = (url) => {
} }
.links svg { .links svg {
margin: 0 .5rem; margin: 0 0.5rem;
} }
.links :hover { .links :hover {
fill: var(--vp-c-brand-lighter) fill: var(--vp-c-brand-lighter);
} }
.sp-link { .sp-link {
@@ -243,4 +252,5 @@ const goUrl = (url) => {
width: 16px; width: 16px;
height: 16px; height: 16px;
fill: currentColor; fill: currentColor;
}</style> }
</style>