mirror of
https://github.com/BTMuli/TeyvatGuide.git
synced 2025-12-15 09:48:14 +08:00
💄 调整链接组件样式
This commit is contained in:
@@ -1,14 +1,13 @@
|
|||||||
<template>
|
<template>
|
||||||
<div
|
<span
|
||||||
v-if="mode == 'link'"
|
v-if="mode == 'link'"
|
||||||
class="tp-text-link"
|
class="tp-text-link"
|
||||||
@click="toLink()"
|
@click="toLink()"
|
||||||
:title="props.data.attributes?.link"
|
:title="props.data.attributes?.link"
|
||||||
:style="getTextStyle()"
|
:style="getTextStyle()"
|
||||||
>
|
>
|
||||||
<v-icon size="small" v-if="!props.data.insert.startsWith('>>')">mdi-link-variant</v-icon>
|
{{ props.data.insert }}
|
||||||
<span>{{ props.data.insert }}</span>
|
</span>
|
||||||
</div>
|
|
||||||
<span v-else-if="mode == 'emoji'" class="tp-text-emoji">
|
<span v-else-if="mode == 'emoji'" class="tp-text-emoji">
|
||||||
<img :src="getEmojiUrl()" :alt="getEmojiName()" :title="getEmojiName()" />
|
<img :src="getEmojiUrl()" :alt="getEmojiName()" :title="getEmojiName()" />
|
||||||
</span>
|
</span>
|
||||||
@@ -18,9 +17,7 @@
|
|||||||
:data="emoji"
|
:data="emoji"
|
||||||
:key="indexE"
|
:key="indexE"
|
||||||
/>
|
/>
|
||||||
<span v-else :style="getTextStyle()">
|
<span v-else :style="getTextStyle()">{{ props.data.insert }}</span>
|
||||||
{{ props.data.insert }}
|
|
||||||
</span>
|
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { onMounted, ref, StyleValue, toRaw } from "vue";
|
import { onMounted, ref, StyleValue, toRaw } from "vue";
|
||||||
@@ -157,11 +154,10 @@ function getEmojiName() {
|
|||||||
</script>
|
</script>
|
||||||
<style lang="css" scoped>
|
<style lang="css" scoped>
|
||||||
.tp-text-link {
|
.tp-text-link {
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
color: #00c3ff;
|
color: #00c3ff;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
text-decoration: underline solid #00c3ff;
|
||||||
|
text-underline-position: under;
|
||||||
transform: translateY(2px);
|
transform: translateY(2px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user