mirror of
https://github.com/BTMuli/TeyvatGuide.git
synced 2025-12-12 09:18:14 +08:00
💄 调整UI
This commit is contained in:
@@ -125,8 +125,9 @@ defineExpose({ displayBox });
|
||||
|
||||
.loading-container {
|
||||
display: flex;
|
||||
min-width: 800px;
|
||||
width: 800px;
|
||||
min-height: 300px;
|
||||
box-sizing: border-box;
|
||||
padding: 15px;
|
||||
border-radius: 15px;
|
||||
background: rgb(255 255 255 / 5%);
|
||||
@@ -136,7 +137,7 @@ defineExpose({ displayBox });
|
||||
.loading-box {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
box-sizing: content-box;
|
||||
box-sizing: border-box;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@@ -1,16 +1,11 @@
|
||||
<template>
|
||||
<div class="tp-emo-box" title="自定义表情">
|
||||
<div class="tp-emo-box" title="自定义表情" @click="download()">
|
||||
<TMiImg
|
||||
:src="props.data.insert.custom_emoticon.url"
|
||||
:alt="props.data.insert.custom_emoticon.hash"
|
||||
:ori="true"
|
||||
/>
|
||||
<div
|
||||
class="tp-emo-info"
|
||||
v-if="props.data.insert.custom_emoticon.size.width > 100"
|
||||
@click="download()"
|
||||
title="点击下载到本地"
|
||||
>
|
||||
<div class="tp-emo-info" v-if="props.data.insert.custom_emoticon.size.width > 100">
|
||||
自定义表情
|
||||
</div>
|
||||
</div>
|
||||
@@ -59,7 +54,7 @@ async function download(): Promise<void> {
|
||||
showSnackbar.success(`已保存${title}.${format}到本地,大小为${bytesToSize(size)}`);
|
||||
}
|
||||
</script>
|
||||
<style lang="css" scoped>
|
||||
<style lang="scss" scoped>
|
||||
.tp-emo-box {
|
||||
position: relative;
|
||||
display: flex;
|
||||
@@ -67,6 +62,7 @@ async function download(): Promise<void> {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 10px auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tp-emo-box img {
|
||||
@@ -89,16 +85,7 @@ async function download(): Promise<void> {
|
||||
border-bottom-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
box-shadow: -1px 1px 3px var(--common-shadow-2);
|
||||
cursor: pointer;
|
||||
font-family: var(--font-title);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.tp-emo-load {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 10px auto;
|
||||
column-gap: 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -226,28 +226,17 @@ async function getStackBarOptions(uid: string, gachaType?: string): Promise<ECha
|
||||
temp3.push(star3);
|
||||
}
|
||||
const series: BarSeriesOption = [
|
||||
{ data: temp5, type: "bar", stack: "a", name: "五星数量", barWidth: "10px" },
|
||||
{ data: temp4, type: "bar", stack: "a", name: "四星数量", barWidth: "10px" },
|
||||
{ data: temp3, type: "bar", stack: "a", name: "三星数量", barWidth: "10px" },
|
||||
{ data: temp5, type: "bar", stack: "a", name: "五星数量" },
|
||||
{ data: temp4, type: "bar", stack: "a", name: "四星数量" },
|
||||
{ data: temp3, type: "bar", stack: "a", name: "三星数量" },
|
||||
];
|
||||
return {
|
||||
title: { text: "祈愿记录" },
|
||||
tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
|
||||
toolbox: { show: true, feature: { restore: {}, saveAsImage: {} } },
|
||||
legend: { data: ["三星数量", "四星数量", "五星数量"] },
|
||||
xAxis,
|
||||
yAxis: { type: "value" },
|
||||
series,
|
||||
dataZoom: [
|
||||
{
|
||||
type: "inside",
|
||||
show: true,
|
||||
xAxisIndex: [0],
|
||||
start: 0,
|
||||
end: 100,
|
||||
zoomOnMouseWheel: true,
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user