zhuchaowe/maxkb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 优化下载进度条

Browse Source
This commit is contained in:
wangdan-fit2cloud 2024-03-26 15:25:56 +08:00
parent b891d0612f
commit 7a63e18ab1
1 changed files with 17 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
ui/src/views/template/component/ModelCard.vue
View File

@ -29,12 +29,18 @@
</div> </div>
<!-- progress --> <!-- progress -->
<div class="progress-mask" v-if="currentModel.status === 'DOWNLOAD'"> <div class="progress-mask" v-if="currentModel.status === 'DOWNLOAD'">
<el-progress type="dashboard" :percentage="progress" class="percentage"> <el-progress
type="circle"
:width="56"
color="#3370ff"
:percentage="progress"
class="percentage"
>
<template #default="{ percentage }"> <template #default="{ percentage }">
<span class="percentage-value">{{ percentage }}%</span> <span class="percentage-value">{{ percentage }}%</span>
<span class="percentage-label">正在下载 <span class="dotting"></span></span>
</template> </template>
</el-progress> </el-progress>
<span class="percentage-label">正在下载 <span class="dotting"></span></span>
</div> </div>
<template #mouseEnter> <template #mouseEnter>
@ -144,10 +150,7 @@ const initInterval = () => {
downModel.value = ok.data downModel.value = ok.data
}) })
} else { } else {
if (downModel.value) { downModel.value = undefined
props.updateModelById(props.model.id, downModel.value)
downModel.value = undefined
}
} }
}, 6000) }, 6000)
} }
@ -185,28 +188,27 @@ onBeforeUnmount(() => {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
background-color: rgba(122, 122, 122, 0.8); background-color: rgba(255, 255, 255, 0.9);
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 111; z-index: 99;
text-align: center; text-align: center;
.percentage { .percentage {
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-65%);
margin-top: 5px;
} }
.percentage-value { .percentage-value {
display: block; display: block;
margin-top: 10px; font-size: 12px;
font-size: 28px; color: var(--el-color-primary);
color: #ffffff;
} }
.percentage-label { .percentage-label {
display: block; display: block;
margin-top: 10px; margin-top: 45px;
margin-left: 10px;
font-size: 12px; font-size: 12px;
color: #ffffff; color: var(--el-color-primary);
} }
} }
} }