snowykami/server-status-web
1
0
Fork 0
mirror of https://github.com/snowykami/server-status-web.git synced 2025-06-07 15:45:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

✨ 修复圆角问题

Browse Source
This commit is contained in:
远野千束 2024-10-05 05:56:10 +08:00
parent acf55f94a2
commit 3bff292a6d
2 changed files with 15 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/Disk.vue
View File

@ -1,26 +1,24 @@
<script setup lang="ts"> <script setup lang="ts">
import { format2Size, getBaseColor, getBlankColor } from '../api/utils.ts';
import {format2Size, getBaseColor, getBlankColor} from "../api/utils.ts";
const props = defineProps<{ const props = defineProps<{
mountpoint: string mountpoint: string;
device: string device: string;
used: number used: number;
total: number total: number;
fstype: string fstype: string;
}>() }>();
const colorUsed = getBaseColor(props.used / props.total * 100)
const colorBlank = getBlankColor(props.used / props.total * 100)
const colorUsed = getBaseColor(props.used / props.total * 100);
const colorBlank = getBlankColor(props.used / props.total * 100);
</script> </script>
<template> <template>
<div class="disk" :style="{backgroundColor: colorBlank}"> <div class="disk" :style="{ backgroundColor: colorBlank }">
<div class="disk-used" :style="{width: props.used / props.total * 100 + '%', backgroundColor: colorUsed}"></div> <div class="disk-used" :style="{ width: props.used / props.total * 100 + '%', backgroundColor: colorUsed }"></div>
<div class="hover-text"> <div class="hover-text">
<div class="left-text"> <div class="left-text">
<span class="disk-text">{{props.mountpoint}}</span> <span class="disk-text">{{ props.mountpoint }}</span>
</div> </div>
<div class="right-text"> <div class="right-text">
<span class="disk-text">{{ format2Size(props.used, props.total) }} [{{ props.fstype }}]</span> <span class="disk-text">{{ format2Size(props.used, props.total) }} [{{ props.fstype }}]</span>
@ -30,7 +28,6 @@ const colorBlank = getBlankColor(props.used / props.total * 100)
</template> </template>
<style scoped> <style scoped>
:host { :host {
--text-size: 2px; --text-size: 2px;
} }
@ -39,11 +36,12 @@ const colorBlank = getBlankColor(props.used / props.total * 100)
margin-top: 0.5rem; margin-top: 0.5rem;
height: 2rem; height: 2rem;
width: 100%; width: 100%;
border-radius: 100px; border-radius: 1rem;
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
overflow: hidden; /* Ensure the used part doesn't overflow */
} }
.disk-used { .disk-used {
@ -51,7 +49,7 @@ const colorBlank = getBlankColor(props.used / props.total * 100)
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
border-radius: 100px 0 0 100px; clip-path: inset(0 0 0 0 round var(--border-radius)); /* Apply border-radius using clip-path */
} }
.hover-text { .hover-text {

11
src/components/HostDisks.vue
View File

@ -1,11 +0,0 @@
<script setup lang="ts">
</script>
<template>
</template>
<style scoped>
</style>