zm/tougao_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

提交

Browse Source
This commit is contained in:
始于初见
2026-04-03 09:58:39 +08:00
parent dd07a03d7b
commit 36f6c02376
1 changed files with 197 additions and 381 deletions
Download Patch File Download Diff File Expand all files Collapse all files

578
src/components/page/crawlTaskMonitor.vue
View File

@@ -1,7 +1,5 @@
<template>
<div class="monitor-container">
<div class="control-panel">
<div class="panel-left">
<el-radio-group v-model="filterStatus" size="small" class="status-group" @change="handleFilter">
@@ -9,6 +7,7 @@
<el-radio-button label="0">{{ $t('crawlTask.enabled') }}</el-radio-button>
<el-radio-button label="1">{{ $t('crawlTask.disabled') }}</el-radio-button>
</el-radio-group>
<el-input
v-model="searchText"
:placeholder="$t('crawlTask.searchPlaceholder')"
@@ -16,129 +15,95 @@
size="small"
class="search-box"
clearable
@input="handleFilter"
@keyup.enter.native="handleFilter"
/>
<el-button
type="primary"
size="small"
icon="el-icon-search"
@click="handleSearchClick"
>
<el-button type="primary" size="small" icon="el-icon-search" @click="handleSearchClick">
{{ $t('crawlTask.searchBtn') }}
</el-button>
</div>
<div class="panel-right">
<el-button type="primary" size="small" icon="el-icon-plus" @click="openAddDialog">{{ $t('crawlTask.addKeyword') }}</el-button>
<el-button type="primary" size="small" icon="el-icon-plus" @click="openAddDialog">
{{ $t('crawlTask.addKeyword') }}
</el-button>
</div>
</div>
<el-dialog
:title="$t('crawlTask.addKeyword')"
:visible.sync="addDialogVisible"
width="500px"
:close-on-click-modal="false"
@closed="resetAddForm"
>
<el-form label-width="120px" size="small">
<el-form-item :label="$t('crawlTask.keyword')">
<el-input
v-model="addForm.field"
:placeholder="$t('crawlTask.keywordPlaceholder')"
clearable
/>
</el-form-item>
<el-form-item :label="$t('crawlTask.runOnce')">
<el-switch
v-model="addForm.runNow"
:active-text="$t('crawlTask.yes')"
:inactive-text="$t('crawlTask.no')"
/>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="addDialogVisible = false">{{ $t('crawlTask.cancel') }}</el-button>
<el-button type="primary" size="small" :loading="addLoading" @click="submitAddKeyword">
{{ $t('crawlTask.confirm') }}
</el-button>
</span>
</el-dialog>
<div v-loading="loading" class="task-list">
<el-empty v-if="list.length === 0" :description="$t('crawlTask.emptyResult')" />
<div v-for="item in list" :key="item.id" class="task-row" :class="'status-' + item.stateClass">
<div
v-for="item in list"
:key="item.id"
class="task-row"
:class="item.state === 'running' ? 'is-active' : 'is-paused'"
>
<div class="col-base">
<div class="status-dot"></div>
<div class="id-info">
<span class="task-id">#{{ item.id}}</span>
<span class="task-name">{{ item.task_name }}</span>
<div class="status-indicator">
<div class="status-dot"></div>
</div>
<div class="info-content">
<div class="task-name-row">
<span class="task-id">#{{ item.id }}</span>
<span class="task-name">{{ item.task_name }}</span>
</div>
<div class="task-meta">
<el-tag size="mini" effect="plain" type="info">{{ item.source }}</el-tag>
<span class="time-label"><i class="el-icon-time"></i> {{ item.create_time }}</span>
</div>
</div>
</div>
<div class="col-metrics">
<div class="metric-item">
<span class="m-label">{{ $t('crawlTask.source') }}</span>
<span class="m-value mini-text">{{ item.source }}</span>
<div class="metric-block main">
<span class="m-label">{{ $t('crawlTask.metricExperts') }}</span>
<span class="m-value expert-count">{{ item.expert_count }}</span>
</div>
<div class="metric-item highlight">
<span class="m-label">{{ $t('crawlTask.totalPages') }}</span>
<span class="m-value">{{ item.total_pages }}</span>
<div class="divider"></div>
<div class="metric-block">
<span class="m-label">{{ $t('crawlTask.metricPages') }}</span>
<span class="m-value">{{ item.last_page }} <small>/ {{ item.total_pages }}</small></span>
</div>
<div class="metric-item highlight">
<span class="m-label">{{ $t('crawlTask.crawledPages') }}</span>
<span class="m-value">{{ item.last_page }}</span>
</div>
<div class="metric-item highlight">
<span class="m-label">{{ $t('crawlTask.expertCountLabel') }}</span>
<span class="m-value expert-num">{{ item.expert_count }}</span>
</div>
</div>
<div class="col-timeline">
<div class="time-block">
<i class="el-icon-time"></i>
<div class="time-detail">
<span>{{ $t('crawlTask.created') }}: {{ item.create_time }}</span>
<span :class="item.state === 'done' ? 'success-text' : ''">
{{ item.state === 'done' ? $t('crawlTask.completed') : $t('crawlTask.updated') }}: {{ item.update_time }}
</span>
</div>
</div>
<div class="duration-tag" v-if="item.duration">
<i class="el-icon-odometer"></i> {{ item.duration }}
<div class="col-progress">
<div class="prog-text">
<span>{{ $t('crawlTask.progress') }}</span>
<span class="percent">{{ item.progress }}%</span>
</div>
<el-progress
:percentage="item.progress"
:show-text="false"
:stroke-width="6"
:color="progressStrokeColor(item)"
/>
</div>
<div class="col-action">
<div class="prog-box">
<span class="prog-num">{{ item.progress }}%</span>
<el-progress
:percentage="item.progress"
:show-text="false"
:stroke-width="4"
:status="item.state === 'error' ? 'exception' : (item.state === 'done' ? 'success' : '')"
<div class="switch-wrapper">
<span class="state-text" :class="item.state">{{
item.state === 'running' ? $t('crawlTask.stateRunning') : $t('crawlTask.stateStopped')
}}</span>
<el-switch
v-model="item.state"
active-value="running"
inactive-value="paused"
active-color="#13ce66"
inactive-color="#c0c4cc"
@change="handleToggleTask(item)"
/>
</div>
<div class="btn-group">
<div class="crawl-once-frame">
<el-button
type="text"
:icon="runOnceLoadingId === item.id ? 'el-icon-loading' : 'el-icon-finished'"
class="op-run-once"
:disabled="runOnceLoadingId === item.id"
@click="handleRunOnce(item)"
>{{ runOnceLoadingId === item.id ? $t('crawlTask.runOnceLoading') : $t('crawlTask.runOnceBtn') }}</el-button>
</div>
<el-button
type="text"
:icon="item.state === 'running' ? 'el-icon-video-pause' : 'el-icon-video-play'"
:class="['toggle-btn', item.state === 'running' ? 'op-pause' : 'op-resume']"
@click="handleToggleTask(item)"
>{{ item.state === 'running' ? $t('crawlTask.disabled') : $t('crawlTask.enabled') }}</el-button>
</div>
<el-button
type="primary"
size="mini"
plain
icon="el-icon-refresh-right"
:loading="runOnceLoadingId === item.id"
@click="handleRunOnce(item)"
>
{{ $t('crawlTask.runOnceBtn') }}
</el-button>
</div>
</div>
</div>
@@ -149,12 +114,27 @@
layout="total, sizes, prev, pager, next, jumper"
:current-page.sync="currentPage"
:page-size="pageSize"
:page-sizes="[5, 10, 20, 50]"
:page-sizes="[10, 20, 50, 100]"
:total="total"
@size-change="handleSizeChange"
@current-change="handlePageChange"
/>
</div>
<el-dialog :title="$t('crawlTask.addKeyword')" :visible.sync="addDialogVisible" width="460px" @closed="resetAddForm">
<el-form label-width="100px" size="small">
<el-form-item :label="$t('crawlTask.keyword')">
<el-input v-model="addForm.field" :placeholder="$t('crawlTask.keywordPlaceholder')" clearable />
</el-form-item>
<el-form-item :label="$t('crawlTask.runOnce')">
<el-switch v-model="addForm.runNow" />
</el-form-item>
</el-form>
<div slot="footer">
<el-button size="small" @click="addDialogVisible = false">{{ $t('crawlTask.cancel') }}</el-button>
<el-button type="primary" size="small" :loading="addLoading" @click="submitAddKeyword">{{ $t('crawlTask.confirm') }}</el-button>
</div>
</el-dialog>
</div>
</template>
@@ -171,212 +151,107 @@ export default {
list: [],
addDialogVisible: false,
addLoading: false,
runOnceLoading: false,
runOnceLoadingId: null,
addForm: {
field: '',
runNow: false
}
addForm: { field: '', runNow: false }
};
},
created() {
this.fetchList();
},
methods: {
calcProgress(lastPage, totalPages) {
const current = Number(lastPage || 0);
const total = Number(totalPages || 0);
if (total <= 0) return 0;
let percent = (current / total) * 100;
if (percent > 100) percent = 100;
return Number(percent.toFixed(2));
/** 停止态用灰条，避免 exception 大红；运行中未满用蓝，满格用绿 */
progressStrokeColor(item) {
if (item.state !== 'running') return '#c0c4cc';
if (item.progress >= 100) return '#67c23a';
return '#409eff';
},
// 数据标准化逻辑
normalizeItem(item) {
const totalPages = Number(item.total_pages || 0);
const lastPage = Number(item.last_page || 0);
const percent = this.calcProgress(lastPage, totalPages);
const stateNum = Number(item.state);
const stateClass = stateNum === 0 ? 'running' : 'paused';
const source = (item.source || '').toUpperCase() === 'PUBMED' ? 'PubMed' : (item.source || '-');
const total = Number(item.total_pages || 0);
const current = Number(item.last_page || 0);
let progress = total > 0 ? (current / total) * 100 : 0;
return {
id: item.expert_fetch_id || item.id || 0,
field: item.field || '',
id: item.expert_fetch_id || item.id,
task_name: item.field || '-',
source: (item.source || 'PubMed'),
expert_count: item.expert_count || 0,
task_name: item.field ? `${item.field}`:'-',
source,
state: stateClass,
stateClass,
progress: percent,
create_time: item.ctime_text || '-',
update_time: item.last_time_text || '-',
duration: '',
total_pages: Number(item.total_pages || 0),
last_page: Number(item.last_page || 0),
duplicates: 0,
failed: 0
total_pages: total,
last_page: current,
progress: Number(progress.toFixed(1)),
state: Number(item.state) === 0 ? 'running' : 'paused',
create_time: item.ctime_text || '-'
};
},
async fetchList() {
this.loading = true;
try {
const params = {
keyword: this.searchText || '',
keyword: this.searchText,
pageIndex: this.currentPage,
pageSize: this.pageSize
pageSize: this.pageSize,
state: this.filterStatus !== '' ? this.filterStatus : undefined
};
if (this.filterStatus !== '') {
params.state = this.filterStatus;
}
const res = await this.$api.post('api/expert_manage/getFetchList', params);
if (res && res.code === 0 && res.data) {
const rows = res.data.list || [];
this.list = rows.map(this.normalizeItem);
this.total = Number(res.data.total || rows.length || 0);
} else {
this.list = [];
this.total = 0;
if (res.code === 0) {
this.list = res.data.list.map(this.normalizeItem);
this.total = res.data.total;
}
} catch (e) {
this.list = [];
this.total = 0;
} finally {
this.loading = false;
}
},
handleFilter() {
this.currentPage = 1;
this.fetchList();
},
handleSearchClick() {
this.handleFilter();
},
handleSizeChange(val) {
this.pageSize = val;
this.currentPage = 1;
this.fetchList();
},
handlePageChange(val) {
this.currentPage = val;
this.fetchList();
window.scrollTo({ top: 0, behavior: 'smooth' });
},
resetQuery() {
this.searchText = '';
this.filterStatus = '';
this.currentPage = 1;
this.fetchList();
},
openAddDialog() {
this.addDialogVisible = true;
},
resetAddForm() {
this.addLoading = false;
this.runOnceLoading = false;
this.addForm = {
field: '',
runNow: false
};
},
async submitAddKeyword() {
const field = (this.addForm.field || '').trim();
if (!field) {
this.$message.warning(this.$t('crawlTask.enterKeyword'));
return;
}
const runNow = !!this.addForm.runNow;
this.addLoading = true;
try {
const addRes = await this.$api.post('api/expert_manage/addFetchField', { field });
if (!addRes || addRes.code !== 0) {
this.$message.error((addRes && addRes.msg) || this.$t('crawlTask.addKeywordFailed'));
return;
}
this.$message.success(this.$t('crawlTask.addKeywordSuccess'));
this.addDialogVisible = false;
this.currentPage = 1;
await this.fetchList();
if (runNow) {
// 勾选“单次抓取”时，在列表对应行按钮上显示 loading
const lowerField = field.toLowerCase();
const target = this.list.find(
(row) => ((row.field || '').trim().toLowerCase() === lowerField)
);
this.runOnceLoading = true;
this.runOnceLoadingId = target ? target.id : null;
const runRes = await this.$api.post('api/expert_finder/fetchOneField', { field });
if (!runRes || runRes.code !== 0) {
this.$message.warning((runRes && runRes.msg) || this.$t('crawlTask.runOnceFailed'));
} else {
this.$message.success(this.$t('crawlTask.runOnceSuccess'));
}
await this.fetchList();
}
} catch (e) {
this.$message.error(this.$t('crawlTask.operationRetry'));
} finally {
this.addLoading = false;
this.runOnceLoading = false;
this.runOnceLoadingId = null;
this.loading = false;
}
},
async handleToggleTask(item) {
const isRunning = item.state === 'running';
const newState = isRunning ? '1' : '0';
const isNowRunning = item.state === 'running';
const newState = isNowRunning ? '0' : '1';
try {
this.loading = true;
const res = await this.$api.post('api/expert_manage/editFetchField', {
expert_fetch_id: item.id,
state: newState
});
if (res && res.code === 0) {
item.state = isRunning ? 'paused' : 'running';
item.stateClass = item.state;
this.$message.success(isRunning ? this.$t('crawlTask.disabledMsg') : this.$t('crawlTask.enabledMsg'));
if (res.code === 0) {
this.$message.success(isNowRunning ? this.$t('crawlTask.taskRunningMsg') : this.$t('crawlTask.taskStoppedMsg'));
} else {
this.$message.error((res && res.msg) || (isRunning ? this.$t('crawlTask.pauseFailed') : this.$t('crawlTask.resumeFailed')));
item.state = isNowRunning ? 'paused' : 'running';
this.$message.error(res.msg || this.$t('crawlTask.operationFail'));
}
} catch (e) {
this.$message.error(isRunning ? this.$t('crawlTask.pauseFailed') : this.$t('crawlTask.resumeFailed'));
} finally {
this.loading = false;
item.state = isNowRunning ? 'paused' : 'running';
}
},
handleRestart(item) {
item.state = 'running';
item.stateClass = 'running';
item.progress = 0;
this.$message.success(this.$t('crawlTask.restartSuccess'));
},
async handleRunOnce(item) {
const field = (item.field || item.task_name || '').trim();
if (!field) {
this.$message.warning(this.$t('crawlTask.missingKeyword'));
return;
}
this.runOnceLoadingId = item.id;
try {
const res = await this.$api.post('/api/expert_finder/fetchOneField', { field });
if (res && res.code === 0) {
this.$message.success(this.$t('crawlTask.runOnceSuccess'));
await this.fetchList();
} else {
this.$message.error((res && res.msg) || this.$t('crawlTask.runOnceFailed'));
const res = await this.$api.post('/api/expert_finder/fetchOneField', { field: item.task_name });
if (res.code === 0) {
this.$message.success(this.$t('crawlTask.runOnceQueued'));
this.fetchList();
}
} catch (e) {
this.$message.error(this.$t('crawlTask.runOnceFailed'));
} finally {
this.runOnceLoadingId = null;
}
},
handleAction(msg, item) {
if (msg === 'logs') {
this.$message.info(`${this.$t('crawlTask.viewLogs')}: #${item.id}`);
return;
}
this.$message.info(msg);
// 其余分页/弹窗逻辑
handleFilter() { this.currentPage = 1; this.fetchList(); },
handleSearchClick() { this.handleFilter(); },
handleSizeChange(val) { this.pageSize = val; this.fetchList(); },
handlePageChange(val) { this.currentPage = val; this.fetchList(); },
openAddDialog() { this.addDialogVisible = true; },
resetAddForm() { this.addForm = { field: '', runNow: false }; this.addLoading = false; },
async submitAddKeyword() {
if (!this.addForm.field.trim()) return this.$message.warning(this.$t('crawlTask.enterKeyword'));
this.addLoading = true;
try {
const res = await this.$api.post('api/expert_manage/addFetchField', { field: this.addForm.field });
if (res.code === 0) {
this.$message.success(this.$t('crawlTask.addKeywordSuccess'));
if (this.addForm.runNow) {
await this.$api.post('api/expert_finder/fetchOneField', { field: this.addForm.field });
}
this.addDialogVisible = false;
this.fetchList();
}
} finally { this.addLoading = false; }
}
}
};
@@ -384,145 +259,86 @@ export default {
<style scoped>
.monitor-container {
padding:0px 20px;
background: #f4f7f9;
min-height: 100vh;
color: #334155;
padding: 20px;
background: #f5f7fa;
min-height: calc(100vh - 100px);
}
/* 统计卡片 */
.stat-overview { display: flex; gap: 16px; margin-bottom: 24px; }
.stat-card {
background: #fff;
padding: 16px 20px;
border-radius: 8px;
flex: 1;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
border-top: 3px solid #0a3088; /* 呼应你偏好的深蓝色 */
}
.stat-val { font-size: 22px; font-weight: bold; color: #0a3088; display: block; }
.stat-label { font-size: 12px; color: #64748b; margin-top: 4px; }
/* 过滤工具栏 */
/* 控制面板 */
.control-panel {
background: #fff;
padding: 12px 20px;
border-radius: 8px;
display: flex;
justify-content: space-between;
margin-bottom: 16px;
background: #fff;
padding: 12px;
border-radius: 8px;
align-items: center;
margin-bottom: 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}
.panel-left { display: flex; align-items: center; gap: 12px; }
.search-box { width: 200px; }
.date-picker { width: 240px !important; }
.panel-left { display: flex; gap: 15px; }
.search-box { width: 220px; }
/* 任务行核心样式 */
.task-list { min-height: 400px; }
/* 任务行卡片设计 */
.task-row {
background: #fff;
margin-bottom: 8px;
border-radius: 6px;
margin-bottom: 12px;
padding: 4px 15px;
border-radius: 10px;
display: flex;
align-items: center;
padding: 12px 20px;
transition: all 0.2s;
border: 1px solid transparent;
}
.status-paused {
background: #f3f4f6;
transition: all 0.3s;
border-left: 5px solid #dcdfe6;
}
.task-row:hover {
border-color: #cbd5e1;
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.task-row.is-active { border-left-color: #409eff; }
.task-row.is-paused { background: #fbfbfc; border-left-color: #909399; opacity: 0.9; }
/* 列定义 */
.col-base { flex: 1.5; display: flex; align-items: center; gap: 15px; }
.col-metrics { flex: 2; display: flex; justify-content: space-around; border-left: 1px solid #f1f5f9; border-right: 1px solid #f1f5f9; }
.col-timeline { flex: 1.1; padding: 0 25px; display: flex; align-items: center; justify-content: space-between; }
.col-action { flex:1.8; display: flex; align-items: center; gap: 15px; }
/* 1. 基础信息列 */
.col-base { flex: 1.5; display: flex; align-items: flex-start; gap: 15px; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: #909399; margin-top: 6px; }
.is-active .status-dot { background: #13ce66; box-shadow: 0 0 8px #13ce66; animation: pulse 2s infinite; }
/* 状态点 */
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; position: relative; }
.status-dot { width: 10px; height: 10px; }
.status-running .status-dot { background: #3b82f6; }
.status-running .status-dot::after {
content: ''; position: absolute; width: 100%; height: 100%; background: inherit;
border-radius: 50%; animation: pulse 1.5s infinite;
.task-id { font-family: monospace; color: #909399; font-size: 12px; margin-right: 8px; }
.task-name { font-size: 14px; font-weight: bold; color: #303133; }
.task-meta { margin-top: 6px; display: flex; align-items: center; gap: 12px; font-size: 12px; color: #909399; }
/* 2. 指标展示列 */
.col-metrics { flex: 1.2; display: flex; align-items: center; justify-content: space-around; }
.metric-block { text-align: center; }
.m-label { font-size: 12px; color: #909399; display: block; margin-bottom: 4px; }
.m-value { font-size: 18px; font-weight: 600; color: #606266; }
.m-value small { font-weight: normal; font-size: 12px; color: #888; }
.expert-count { color: #006699; font-size: 16px; } /* 专家数高亮 */
.divider { width: 1px; height: 35px; background: #ebeef5; }
/* 3. 进度条列 */
.col-progress { flex: 1.2; padding: 0 30px; }
.prog-text { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 6px; color: #606266; }
.percent { font-weight: bold; color: #409eff; }
/* 4. 操作列 */
.col-action { flex: 1.1; display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.switch-wrapper {
text-align: center;
display: flex;
flex-direction: column;
gap: 4px;
margin-right: 6px;
transform: translateX(-6px);
}
.status-done .status-dot { background: #10b981; }
.status-paused .status-dot { background: #ef4444; }
.status-error .status-dot { background: #ef4444; }
.state-text { font-size: 11px; font-weight: bold; }
.state-text.running { color: #13ce66; }
.state-text.paused { color: #909399; }
/* 文字样式 */
.task-id { font-family: monospace; color: #94a3b8; font-size: 12px; display: block; }
.task-name { font-weight: 600; font-size: 14px; color: #1e293b; }
.metric-item { text-align: center; }
.m-label { font-size: 11px; color: #94a3b8; display: block; margin-bottom: 2px; }
.m-value { font-size: 16px; font-weight: bold; color: #475569; }
.m-value.mini-text { font-size: 12px; font-weight: normal; }
.m-value.expert-num { color: #006699; }
.success-text { color: #10b981; }
.danger { color: #ef4444; }
/* 时间线样式 */
.time-block { display: flex; align-items: center; gap: 10px; color: #64748b; font-size: 12px; }
.time-block i { font-size: 16px; }
.time-detail span { display: block; line-height: 1.4; }
.duration-tag { background: #f1f5f9; padding: 2px 8px; border-radius: 4px; font-size: 11px; color: #475569; }
/* 进度与分页 */
.prog-box { flex: 1; }
.prog-num { font-size: 12px; font-weight: bold; display: block; text-align: right; margin-bottom: 4px; min-width: 56px; }
.pagination-container { margin-top: 20px; display: flex; justify-content: flex-end; padding: 10px; }
.btn-group {
display: inline-flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
/* 单次抓取按钮单独线框（与右侧启停区分） */
.crawl-once-frame {
display: inline-flex;
align-items: center;
padding: 2px 10px;
border: 1px solid #006699;
border-radius: 6px;
background: #fff;
line-height: 1;
box-sizing: border-box;
}
.crawl-once-frame .op-run-once {
margin-left: 0;
margin-right: 0;
}
.btn-group .el-button.op-pause,
.btn-group .el-button.op-pause i { color: #fc4d4d !important; }
.btn-group .el-button.op-resume,
.btn-group .el-button.op-resume i { color: #67c23a !important; }
.btn-group .el-button.op-restart,
.btn-group .el-button.op-restart i { color: #409eff !important; }
.btn-group .el-button.op-run-once,
.btn-group .el-button.op-run-once i { color: #006699 !important; }
.btn-group .el-button {
font-size: 20px;
padding: 6px;
}
.btn-group .el-button.op-run-once {
font-size: 13px;
padding: 4px 6px;
}
.btn-group .el-button.toggle-btn {
font-size: 13px;
padding: 4px 6px;
}
/* 分页 */
.pagination-container { margin-top: 25px; text-align: right; }
@keyframes pulse {
0% { transform: scale(1); opacity: 0.8; }
100% { transform: scale(2.5); opacity: 0; }
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}
</style>