mirror of
https://gitee.com/blackfox/geekai.git
synced 2025-12-07 09:18:27 +08:00
keling 头像和轮询
This commit is contained in:
lqins
parent
3958e99e4d
commit
e1b1c195f6
@ -203,6 +203,7 @@
|
||||
.img-inline {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
|
||||
.img-uploader {
|
||||
text-align: center;
|
||||
|
||||
@ -208,7 +208,14 @@
|
||||
|
||||
<div v-else class="image2video">
|
||||
<div class="image-upload img-inline">
|
||||
<div class="upload-box img-uploader">
|
||||
<div class="upload-box img-uploader video-img-box">
|
||||
<el-icon
|
||||
v-if="params.image"
|
||||
@click="remove('start', params.image)"
|
||||
class="removeimg"
|
||||
><CircleCloseFilled
|
||||
/></el-icon>
|
||||
|
||||
<h4>起始帧</h4>
|
||||
<el-upload
|
||||
class="uploader img-uploader"
|
||||
@ -222,10 +229,20 @@
|
||||
:src="params.image"
|
||||
class="preview"
|
||||
/>
|
||||
|
||||
<el-icon v-else class="upload-icon"><Plus /></el-icon>
|
||||
</el-upload>
|
||||
</div>
|
||||
<div class="upload-box img-uploader">
|
||||
<div class="btn-swap" v-if="params.image && params.image_tail">
|
||||
<i class="iconfont icon-exchange" @click="switchReverse"></i>
|
||||
</div>
|
||||
<div class="upload-box img-uploader video-img-box">
|
||||
<el-icon
|
||||
v-if="params.image_tail"
|
||||
@click="remove('end', params.image_tail)"
|
||||
class="removeimg"
|
||||
><CircleCloseFilled
|
||||
/></el-icon>
|
||||
<h4>结束帧</h4>
|
||||
<el-upload
|
||||
class="uploader"
|
||||
@ -317,13 +334,13 @@
|
||||
<!-- 任务列表区域 -->
|
||||
<div class="task-list job-list-box">
|
||||
<!-- 任务类型筛选 -->
|
||||
<div class="type-btn-group">
|
||||
<!-- <div class="type-btn-group">
|
||||
<el-radio-group v-model="taskFilter" @change="fetchTasks">
|
||||
<el-radio-button label="all">全部</el-radio-button>
|
||||
<el-radio-button label="text2video">文生视频</el-radio-button>
|
||||
<el-radio-button label="image2video">图生视频</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<h2 class="text-xl pt">任务列表</h2>
|
||||
|
||||
@ -335,38 +352,50 @@
|
||||
<v3-waterfall
|
||||
:key="waterfallKey"
|
||||
:list="finishedTasks"
|
||||
@scrollReachBottom="fetchTasks"
|
||||
:gap="20"
|
||||
:bottomGap="20"
|
||||
:colWidth="300"
|
||||
@scrollReachBottom="handleScroll"
|
||||
:gap="8"
|
||||
:bottomGap="8"
|
||||
:colWidth="400"
|
||||
:distanceToScroll="100"
|
||||
:isLoading="loading"
|
||||
:isOver="isOver"
|
||||
class="task-waterfall"
|
||||
>
|
||||
<template #default="slotProp">
|
||||
<div
|
||||
class="job-item-box"
|
||||
:class="{
|
||||
processing: slotProp.item.progress < 100,
|
||||
error: slotProp.item.progress === 101
|
||||
}"
|
||||
>
|
||||
<!-- 视频成功渲染部分 -->
|
||||
<div class="job-item-box">
|
||||
<video
|
||||
v-if="slotProp.item.progress === 100"
|
||||
v-if="
|
||||
slotProp.item.progress >= 100 && slotProp.item.video_url
|
||||
"
|
||||
class="preview"
|
||||
:src="slotProp.item.video_url"
|
||||
@click="previewVideo(slotProp.item)"
|
||||
controls
|
||||
:style="{
|
||||
width: '100%',
|
||||
height: `${slotProp.item.height || 400}px`
|
||||
}"
|
||||
></video>
|
||||
|
||||
<div v-else class="status-overlay">
|
||||
<!-- 失败/无图状态 -->
|
||||
<div
|
||||
v-if="slotProp.item.progress === 101"
|
||||
v-else
|
||||
class="error-container"
|
||||
:style="{
|
||||
width: '100%',
|
||||
height: `${slotProp.item.height || 300}px`,
|
||||
objectFit: 'cover'
|
||||
}"
|
||||
>
|
||||
<div
|
||||
v-if="
|
||||
slotProp.item.progress >= 100 &&
|
||||
!slotProp.item.video_url
|
||||
"
|
||||
class="error-status"
|
||||
>
|
||||
<el-icon><CloseBold /></el-icon>
|
||||
任务失败
|
||||
<img :src="failed" />
|
||||
生成失败
|
||||
</div>
|
||||
<div v-else class="processing-status">
|
||||
<el-progress
|
||||
@ -377,20 +406,64 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tools-box">
|
||||
<div class="tools">
|
||||
<el-button
|
||||
v-if="slotProp.item.progress === 100"
|
||||
type="primary"
|
||||
v-if="
|
||||
slotProp.item.progress >= 100 &&
|
||||
slotProp.item.video_url
|
||||
"
|
||||
@click="downloadVideo(slotProp.item)"
|
||||
>
|
||||
<el-icon><Download /></el-icon>
|
||||
</el-button>
|
||||
<el-button type="danger" @click="deleteTask(slotProp.item)">
|
||||
|
||||
<div
|
||||
class="show-prompt"
|
||||
v-if="
|
||||
slotProp.item.progress >= 100 &&
|
||||
!slotProp.item.video_url &&
|
||||
slotProp.item.err_msg
|
||||
"
|
||||
>
|
||||
<el-popover
|
||||
placement="left"
|
||||
:width="240"
|
||||
trigger="hover"
|
||||
>
|
||||
<template #reference>
|
||||
<el-icon class="chromefilled error-txt"
|
||||
><WarnTriangleFilled
|
||||
/></el-icon>
|
||||
</template>
|
||||
|
||||
<template #default>
|
||||
<div class="top-tips">
|
||||
<span>错误详细信息</span
|
||||
><el-icon
|
||||
class="copy-prompt-kl"
|
||||
:data-clipboard-text="slotProp.item.err_msg"
|
||||
>
|
||||
<DocumentCopy />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="mj-list-item-prompt">
|
||||
<span>{{ slotProp.item.err_msg }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-popover>
|
||||
</div>
|
||||
|
||||
<el-button
|
||||
type="danger"
|
||||
@click="deleteTask(slotProp.item)"
|
||||
>
|
||||
<el-icon><Delete /></el-icon>
|
||||
</el-button>
|
||||
<div class="show-prompt">
|
||||
<el-popover
|
||||
placement="left"
|
||||
title="提示词"
|
||||
:width="240"
|
||||
trigger="hover"
|
||||
>
|
||||
@ -401,20 +474,24 @@
|
||||
</template>
|
||||
|
||||
<template #default>
|
||||
<div class="mj-list-item-prompt">
|
||||
<span>{{ slotProp.item.prompt }}</span>
|
||||
<el-icon
|
||||
class="copy-prompt-mj"
|
||||
<div class="top-tips">
|
||||
<span>提示词</span
|
||||
><el-icon
|
||||
class="copy-prompt-kl"
|
||||
:data-clipboard-text="slotProp.item.prompt"
|
||||
>
|
||||
<DocumentCopy />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="mj-list-item-prompt">
|
||||
<span>{{ slotProp.item.prompt }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-popover>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
<div class="no-more-data">
|
||||
@ -441,6 +518,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import failed from "@/assets/img/failed.png";
|
||||
import TaskList from "@/components/TaskList.vue";
|
||||
import { ref, reactive, onMounted, onUnmounted, watch } from "vue";
|
||||
import {
|
||||
@ -450,11 +528,13 @@ import {
|
||||
ChromeFilled,
|
||||
DocumentCopy,
|
||||
Download,
|
||||
CloseBold
|
||||
WarnTriangleFilled,
|
||||
CircleCloseFilled
|
||||
} from "@element-plus/icons-vue";
|
||||
import { httpGet, httpPost, httpDownload } from "@/utils/http";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import { checkSession } from "@/store/cache";
|
||||
import { getClientId, checkSession } from "@/store/cache";
|
||||
import Clipboard from "clipboard";
|
||||
|
||||
import {
|
||||
closeLoading,
|
||||
@ -466,6 +546,7 @@ import { replaceImg } from "@/utils/libs";
|
||||
|
||||
// 参数设置
|
||||
const params = reactive({
|
||||
// client_id: getClientId(),
|
||||
task_type: "text2video",
|
||||
model: "default",
|
||||
prompt: "",
|
||||
@ -511,6 +592,7 @@ const changeRate = (item) => {
|
||||
};
|
||||
|
||||
// 状态变量
|
||||
let pollTimer = null;
|
||||
const generating = ref(false);
|
||||
const isGenerating = ref(false);
|
||||
const powerCost = ref(10);
|
||||
@ -519,12 +601,13 @@ const taskFilter = ref("all");
|
||||
const runningTasks = ref([]);
|
||||
const finishedTasks = ref([]);
|
||||
const total = ref(0);
|
||||
const pageSize = ref(15);
|
||||
const pageSize = ref(4);
|
||||
const currentPage = ref(1);
|
||||
const previewVisible = ref(false);
|
||||
const currentVideo = ref("");
|
||||
const isOver = ref(false);
|
||||
const pullTask = ref(true);
|
||||
const waterfallKey = ref(Date.now());
|
||||
|
||||
// 方法定义
|
||||
|
||||
@ -539,6 +622,7 @@ const uploadStartImage = async (file) => {
|
||||
showLoading("图片上传中...");
|
||||
const res = await httpPost("/api/upload", formData);
|
||||
params.image = res.data.url;
|
||||
console.log("------", params);
|
||||
ElMessage.success("上传成功");
|
||||
closeLoading();
|
||||
} catch (e) {
|
||||
@ -546,7 +630,18 @@ const uploadStartImage = async (file) => {
|
||||
closeLoading();
|
||||
}
|
||||
};
|
||||
const remove = (type, img) => {
|
||||
if (type === "start") {
|
||||
params.image = "";
|
||||
} else if (type === "end") {
|
||||
params.image_tail = "";
|
||||
}
|
||||
};
|
||||
|
||||
const switchReverse = () => {
|
||||
//params.image 和 params.image_tail 交换值
|
||||
[params.image, params.image_tail] = [params.image_tail, params.image];
|
||||
};
|
||||
const uploadEndImage = async (file) => {
|
||||
const formData = new FormData();
|
||||
formData.append("file", file.file);
|
||||
@ -575,6 +670,9 @@ const generatePrompt = async () => {
|
||||
};
|
||||
|
||||
const generate = async () => {
|
||||
//增加防抖
|
||||
if (generating.value) return;
|
||||
|
||||
if (!params.prompt?.trim()) {
|
||||
return ElMessage.error("请输入视频描述");
|
||||
}
|
||||
@ -593,10 +691,14 @@ const generate = async () => {
|
||||
try {
|
||||
await httpPost("/api/video/keling/create", params);
|
||||
showMessageOK("任务创建成功");
|
||||
// 新增重置
|
||||
currentPage.value = 1;
|
||||
runningTasks.value = [];
|
||||
finishedTasks.value = [];
|
||||
pullTask.value = true; //新增开始轮询
|
||||
isOver.value = false;
|
||||
// 立即获取最新数据
|
||||
await fetchTasks();
|
||||
// 开启任务轮询
|
||||
pullTask.value = true;
|
||||
} catch (e) {
|
||||
showMessageError("创建失败: " + e.message);
|
||||
} finally {
|
||||
@ -605,67 +707,87 @@ const generate = async () => {
|
||||
};
|
||||
const loading = ref(false);
|
||||
const isLogin = ref(false);
|
||||
|
||||
const fetchTasks = async () => {
|
||||
console.log("fetchTasks", !isLogin.value || isOver.value || loading.value);
|
||||
|
||||
if (!isLogin.value || isOver.value || loading.value) return;
|
||||
|
||||
loading.value = true;
|
||||
try {
|
||||
const runningPage = ref(1);
|
||||
const taskfunction = async (running) => {
|
||||
const res = await httpGet("/api/video/list", {
|
||||
page: currentPage.value,
|
||||
page_size: pageSize.value,
|
||||
page: running ? runningPage.value : currentPage.value,
|
||||
page_size: running ? 100000 : pageSize.value,
|
||||
type: "keling",
|
||||
task_type: taskFilter.value === "all" ? "" : taskFilter.value
|
||||
});
|
||||
|
||||
// 精确任务过滤逻辑
|
||||
return res;
|
||||
};
|
||||
//滚动 瀑布流
|
||||
const handleScroll = async () => {
|
||||
if (!isLogin.value || loading.value || isOver.value) return;
|
||||
try {
|
||||
loading.value = true;
|
||||
const res = await taskfunction(false);
|
||||
const data = res.data || {};
|
||||
const newRunning = data.items.filter(
|
||||
(task) => task.progress < 100 && task.progress !== 101
|
||||
);
|
||||
runningTasks.value = [...runningTasks.value, ...newRunning];
|
||||
// 如果运行中的任务为零，则停止轮询
|
||||
if (newRunning.length === 0) {
|
||||
pullTask.value = false;
|
||||
}
|
||||
|
||||
const newFinished = data.items.filter((task) => task.progress >= 100);
|
||||
finishedTasks.value = [...finishedTasks.value, ...newFinished];
|
||||
// 去重合并新数据
|
||||
const newItems = data.items
|
||||
.filter(
|
||||
(task) =>
|
||||
task.progress >= 100 &&
|
||||
!finishedTasks.value.some((t) => t.id === task.id)
|
||||
)
|
||||
.map((item) => ({
|
||||
...item,
|
||||
height: 300 * (Math.random() * 0.3 + 0.6) //生成300~420px随机高度
|
||||
}));
|
||||
finishedTasks.value = [...finishedTasks.value, ...newItems];
|
||||
|
||||
// // 强制刷新瀑布流
|
||||
waterfallKey.value = Date.now();
|
||||
total.value = data.total;
|
||||
|
||||
const shouldLoadNextPage =
|
||||
runningTasks.value.length > 0 ||
|
||||
(runningTasks.value.length === 0 &&
|
||||
finishedTasks.value.length < total.value);
|
||||
|
||||
if (shouldLoadNextPage) {
|
||||
// 分页逻辑
|
||||
if (
|
||||
currentPage.value >= data.total_page ||
|
||||
data.total <= finishedTasks.value.length
|
||||
) {
|
||||
isOver.value = true;
|
||||
} else {
|
||||
currentPage.value++;
|
||||
}
|
||||
|
||||
// 优化加载完成判断
|
||||
const loadedCount = runningTasks.value.length + finishedTasks.value.length;
|
||||
isOver.value = loadedCount >= total.value;
|
||||
|
||||
console.log("[Pagination] isOver:", isOver.value, {
|
||||
running: runningTasks.value.length,
|
||||
finished: finishedTasks.value.length,
|
||||
total: total.value
|
||||
});
|
||||
|
||||
waterfallKey.value = Date.now();
|
||||
} catch (e) {
|
||||
showMessageError("获取任务列表失败: " + e.message);
|
||||
} catch (error) {
|
||||
console.error("Error:", error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
console.log("finishedTasks.value", finishedTasks.value);
|
||||
}
|
||||
};
|
||||
|
||||
const waterfallKey = ref(Date.now());
|
||||
//任务中 轮询
|
||||
const fetchTasks = async () => {
|
||||
console.log("开始轮询=====", !isLogin.value || isOver.value || loading.value);
|
||||
|
||||
// if (!isLogin.value || isOver.value || loading.value) return;
|
||||
if (!isLogin.value) return;
|
||||
|
||||
// loading.value = true;
|
||||
try {
|
||||
const res = await taskfunction(true);
|
||||
runningPage.value++;
|
||||
// 精确任务过滤逻辑
|
||||
const data = res.data || {};
|
||||
// 拿到任务中
|
||||
runningTasks.value = data.items.filter((task) => task.progress < 100);
|
||||
if (data.items.length === 0) {
|
||||
pullTask.value = false; //新增停止轮询,下方重新请求一次
|
||||
currentPage.value = 1;
|
||||
runningTasks.value = [];
|
||||
finishedTasks.value = [];
|
||||
pullTask.value = true; //新增开始轮询
|
||||
isOver.value = false;
|
||||
// 立即获取最新数据
|
||||
await handleScroll();
|
||||
} else {
|
||||
pullTask.value = true;
|
||||
}
|
||||
} catch (e) {
|
||||
showMessageError("获取任务列表失败: " + e.message);
|
||||
} finally {
|
||||
// loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 检测任务状态
|
||||
const checkAllCompleted = () => {
|
||||
@ -704,6 +826,7 @@ const deleteTask = async (task) => {
|
||||
}
|
||||
};
|
||||
|
||||
const clipboard = ref(null);
|
||||
// 生命周期钩子
|
||||
onMounted(async () => {
|
||||
checkSession()
|
||||
@ -712,33 +835,90 @@ onMounted(async () => {
|
||||
console.log("mounted-isLogin-可以继续", isLogin.value);
|
||||
|
||||
await fetchTasks();
|
||||
setInterval(() => {
|
||||
if (pullTask.value) {
|
||||
fetchTasks();
|
||||
}
|
||||
}, 5000)
|
||||
await handleScroll();
|
||||
|
||||
pullTask.value = true;
|
||||
// pollTimer = setInterval(() => {
|
||||
// if (pullTask.value) {
|
||||
// fetchTasks();
|
||||
// }
|
||||
// }, 5000);
|
||||
})
|
||||
.catch(() => {
|
||||
.catch(() => {});
|
||||
//复制
|
||||
clipboard.value = new Clipboard(".copy-prompt-kl");
|
||||
clipboard.value.on("success", () => {
|
||||
ElMessage.success("复制成功！");
|
||||
});
|
||||
|
||||
clipboard.value.on("error", () => {
|
||||
ElMessage.error("复制失败！");
|
||||
});
|
||||
});
|
||||
onUnmounted(() => {
|
||||
clearInterval(pollTimer);
|
||||
clipboard.value.destroy();
|
||||
});
|
||||
// 监听任务状态变化
|
||||
watch([runningTasks, finishedTasks], () => {
|
||||
if (checkAllCompleted()) {
|
||||
console.log("所有任务已完成");
|
||||
watch(
|
||||
() => [...runningTasks.value, ...finishedTasks.value],
|
||||
() => {
|
||||
waterfallKey.value = Date.now();
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
//监听 pullTask true 的时候定时器触发，否则清除定时器
|
||||
watch(
|
||||
() => pullTask.value,
|
||||
(newVal) => {
|
||||
if (pullTask.value == true) {
|
||||
pollTimer = setInterval(() => {
|
||||
fetchTasks();
|
||||
}, 5000);
|
||||
} else {
|
||||
clearInterval(pollTimer);
|
||||
}
|
||||
});
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import "@/assets/css/image-keling.styl"
|
||||
@import "@/assets/css/custom-scroll.styl"
|
||||
.video-img-box{
|
||||
position: relative;
|
||||
.removeimg{
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
color: #545454;
|
||||
right: -6px;
|
||||
top: 13px;
|
||||
z-index: 1;
|
||||
|
||||
}
|
||||
&:hover.img-mask{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.copy-prompt-kl{
|
||||
cursor pointer
|
||||
}
|
||||
.top-tips{
|
||||
height: 30px
|
||||
font-size: 18px
|
||||
line-height: 30px
|
||||
display: flex
|
||||
align-items: center;
|
||||
span{
|
||||
margin-right: 10px
|
||||
color:#000
|
||||
}
|
||||
}
|
||||
.mj-list-item-prompt{
|
||||
max-height: 600px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
:deep(.running-job-box .image-slot){
|
||||
display: flex
|
||||
align-items: center
|
||||
@ -752,12 +932,10 @@ watch([runningTasks, finishedTasks], () => {
|
||||
text-align: center
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
|
||||
.iconfont{
|
||||
font-size: 45px
|
||||
font-size: 45px;
|
||||
|
||||
}
|
||||
|
||||
span{
|
||||
font-size: 15px
|
||||
}
|
||||
@ -766,74 +944,86 @@ watch([runningTasks, finishedTasks], () => {
|
||||
|
||||
.record-title
|
||||
padding:1rem 0
|
||||
|
||||
.type-btn-group
|
||||
margin-bottom: 20px
|
||||
|
||||
.task-waterfall
|
||||
margin: 0 -10px
|
||||
transition: opacity 0.3s ease
|
||||
|
||||
.job-item-box
|
||||
position: relative
|
||||
transition: transform 0.3s ease
|
||||
background: #f5f5f5;
|
||||
transition: height 0.3s ease;
|
||||
overflow: hidden
|
||||
margin: 10px
|
||||
border: 1px solid #666;
|
||||
padding: 6px;
|
||||
// margin: 10px
|
||||
// border: 1px solid #666;
|
||||
// padding: 6px;
|
||||
border-radius: 6px;
|
||||
break-inside: avoid
|
||||
|
||||
video
|
||||
min-height: 200px;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
|
||||
.chromefilled
|
||||
font-size: 24px;
|
||||
|
||||
color: #fff;
|
||||
&.error-txt{
|
||||
color: #ffff54;
|
||||
cursor:pointer;
|
||||
}
|
||||
.show-prompt
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:hover
|
||||
transform: translateY(-3px)
|
||||
// transform: translateY(-3px)
|
||||
.tools-box{
|
||||
display:block
|
||||
background:rgba(0, 0, 0, 0.3)
|
||||
width : 100%;
|
||||
}
|
||||
|
||||
.status-overlay
|
||||
position: absolute
|
||||
top: 0
|
||||
left: 0
|
||||
right: 0
|
||||
bottom: 0
|
||||
background: rgba(0, 0, 0, 0.7)
|
||||
.error-container
|
||||
position: relative
|
||||
background: var(--bg-deep-color)
|
||||
display: flex
|
||||
align-items: center
|
||||
justify-content: center
|
||||
img{
|
||||
width: 66%;
|
||||
height: 66%;
|
||||
object-fit: cover;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.error-status
|
||||
color: #ff4d4f
|
||||
color: #c2c6cc
|
||||
text-align: center
|
||||
|
||||
.el-icon
|
||||
font-size: 24px
|
||||
display: block
|
||||
margin-bottom: 8px
|
||||
|
||||
|
||||
.processing-status
|
||||
width: 80%
|
||||
|
||||
.el-progress
|
||||
margin: 0 auto
|
||||
|
||||
.tools-box{
|
||||
display:none
|
||||
position:absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
.tools
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
display: flex
|
||||
gap: 8px
|
||||
margin: 5px 0 0
|
||||
gap: 5px
|
||||
margin: 5px 5px 5px 0;
|
||||
|
||||
|
||||
.el-button+.el-button
|
||||
margin-left: 0px;
|
||||
|
||||
.el-button
|
||||
padding: 6px
|
||||
padding: 3px
|
||||
border-radius: 50%
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user