725 lines
25 KiB
HTML
725 lines
25 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>宠物详情 - 卡片仪表盘式 V5</title>
|
||
<link rel="stylesheet" href="assets/css/common.css">
|
||
<style>
|
||
/* 卡片仪表盘式 V5 - 基本信息卡片化，统计数据仪表盘化 */
|
||
.dashboard-v5-container {
|
||
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
||
min-height: 100vh;
|
||
}
|
||
|
||
/* 基本信息卡片区域 */
|
||
.pet-info-card {
|
||
background: white;
|
||
border-radius: var(--radius-xl);
|
||
padding: var(--spacing-xl);
|
||
margin: var(--spacing-md);
|
||
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
||
border: 1px solid rgba(255,255,255,0.8);
|
||
}
|
||
|
||
.pet-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--spacing-lg);
|
||
margin-bottom: var(--spacing-lg);
|
||
padding-bottom: var(--spacing-lg);
|
||
border-bottom: 2px solid #F8F9FA;
|
||
}
|
||
|
||
.pet-avatar-v5 {
|
||
width: 100px;
|
||
height: 100px;
|
||
border-radius: var(--radius-xl);
|
||
border: 4px solid var(--pet-primary);
|
||
box-shadow: 0 8px 25px rgba(255, 138, 128, 0.3);
|
||
position: relative;
|
||
}
|
||
|
||
.pet-avatar-v5::after {
|
||
content: '❤️';
|
||
position: absolute;
|
||
bottom: -5px;
|
||
right: -5px;
|
||
background: white;
|
||
width: 25px;
|
||
height: 25px;
|
||
border-radius: var(--radius-round);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 12px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
|
||
}
|
||
|
||
.pet-basic-info {
|
||
flex: 1;
|
||
}
|
||
|
||
.pet-name-v5 {
|
||
font-size: 26px;
|
||
font-weight: bold;
|
||
color: var(--text-primary);
|
||
margin-bottom: var(--spacing-xs);
|
||
}
|
||
|
||
.pet-breed-info {
|
||
color: var(--text-secondary);
|
||
font-size: 16px;
|
||
margin-bottom: var(--spacing-sm);
|
||
}
|
||
|
||
.pet-tags {
|
||
display: flex;
|
||
gap: var(--spacing-sm);
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.pet-tag {
|
||
background: linear-gradient(135deg, var(--pet-accent), var(--pet-secondary));
|
||
color: white;
|
||
padding: 4px 10px;
|
||
border-radius: 15px;
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.info-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: var(--spacing-lg);
|
||
}
|
||
|
||
.info-item-v5 {
|
||
background: #F8F9FA;
|
||
padding: var(--spacing-md);
|
||
border-radius: var(--radius-md);
|
||
border-left: 4px solid var(--pet-primary);
|
||
}
|
||
|
||
.info-label-v5 {
|
||
font-size: 12px;
|
||
color: var(--text-light);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
margin-bottom: var(--spacing-xs);
|
||
}
|
||
|
||
.info-value-v5 {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
/* 统计数据仪表盘区域 */
|
||
.dashboard-section-v5 {
|
||
margin: var(--spacing-md);
|
||
}
|
||
|
||
.section-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--spacing-sm);
|
||
margin-bottom: var(--spacing-lg);
|
||
padding-left: var(--spacing-sm);
|
||
}
|
||
|
||
.section-icon {
|
||
font-size: 24px;
|
||
}
|
||
|
||
.section-title-v5 {
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.dashboard-grid-v5 {
|
||
background: white;
|
||
border-radius: var(--radius-xl);
|
||
padding: var(--spacing-xl);
|
||
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
||
border: 1px solid rgba(255,255,255,0.8);
|
||
}
|
||
|
||
.metrics-overview {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: var(--spacing-lg);
|
||
margin-bottom: var(--spacing-xl);
|
||
}
|
||
|
||
.metric-gauge {
|
||
text-align: center;
|
||
position: relative;
|
||
}
|
||
|
||
.gauge-container {
|
||
width: 120px;
|
||
height: 120px;
|
||
margin: 0 auto var(--spacing-md);
|
||
position: relative;
|
||
}
|
||
|
||
.gauge-bg {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: var(--radius-round);
|
||
background: conic-gradient(#E5E7EB 0deg, #E5E7EB 360deg);
|
||
position: relative;
|
||
}
|
||
|
||
.gauge-fill {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: var(--radius-round);
|
||
transition: all 1.5s ease;
|
||
}
|
||
|
||
.gauge-weight {
|
||
background: conic-gradient(var(--pet-primary) 0deg, var(--pet-primary) 302deg, transparent 302deg);
|
||
}
|
||
|
||
.gauge-activity {
|
||
background: conic-gradient(var(--pet-secondary) 0deg, var(--pet-secondary) 281deg, transparent 281deg);
|
||
}
|
||
|
||
.gauge-food {
|
||
background: conic-gradient(var(--pet-accent) 0deg, var(--pet-accent) 331deg, transparent 331deg);
|
||
}
|
||
|
||
.gauge-sleep {
|
||
background: conic-gradient(var(--pet-warning) 0deg, var(--pet-warning) 313deg, transparent 313deg);
|
||
}
|
||
|
||
.gauge-center {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 80px;
|
||
height: 80px;
|
||
background: white;
|
||
border-radius: var(--radius-round);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.gauge-value {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.gauge-unit {
|
||
font-size: 10px;
|
||
color: var(--text-light);
|
||
}
|
||
|
||
.gauge-label {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
margin-bottom: var(--spacing-xs);
|
||
}
|
||
|
||
.gauge-status {
|
||
font-size: 12px;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.health-dashboard {
|
||
background: #F8F9FA;
|
||
border-radius: var(--radius-lg);
|
||
padding: var(--spacing-lg);
|
||
margin-top: var(--spacing-xl);
|
||
}
|
||
|
||
.dashboard-title {
|
||
text-align: center;
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
color: var(--text-primary);
|
||
margin-bottom: var(--spacing-lg);
|
||
}
|
||
|
||
.health-score-display {
|
||
text-align: center;
|
||
margin-bottom: var(--spacing-lg);
|
||
}
|
||
|
||
.health-score-circle {
|
||
width: 100px;
|
||
height: 100px;
|
||
border-radius: var(--radius-round);
|
||
background: conic-gradient(var(--pet-primary) 0deg, var(--pet-primary) 306deg, #E5E7EB 306deg);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 0 auto var(--spacing-md);
|
||
position: relative;
|
||
}
|
||
|
||
.health-score-circle::before {
|
||
content: '';
|
||
width: 70px;
|
||
height: 70px;
|
||
background: white;
|
||
border-radius: var(--radius-round);
|
||
position: absolute;
|
||
}
|
||
|
||
.health-score-number {
|
||
position: relative;
|
||
z-index: 2;
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.health-score-text {
|
||
color: var(--text-secondary);
|
||
font-size: 14px;
|
||
}
|
||
|
||
.health-indicators-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: var(--spacing-md);
|
||
}
|
||
|
||
.health-indicator-v5 {
|
||
text-align: center;
|
||
padding: var(--spacing-md);
|
||
background: white;
|
||
border-radius: var(--radius-md);
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
|
||
}
|
||
|
||
.indicator-icon-v5 {
|
||
font-size: 20px;
|
||
margin-bottom: var(--spacing-sm);
|
||
}
|
||
|
||
.indicator-status {
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
margin-bottom: var(--spacing-xs);
|
||
}
|
||
|
||
.status-good {
|
||
color: var(--pet-secondary);
|
||
}
|
||
|
||
.status-warning {
|
||
color: var(--pet-warning);
|
||
}
|
||
|
||
.indicator-name {
|
||
font-size: 10px;
|
||
color: var(--text-light);
|
||
}
|
||
|
||
/* 最近记录卡片 */
|
||
.recent-records-card {
|
||
background: white;
|
||
border-radius: var(--radius-xl);
|
||
padding: var(--spacing-xl);
|
||
margin: var(--spacing-md);
|
||
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
||
border: 1px solid rgba(255,255,255,0.8);
|
||
}
|
||
|
||
.records-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: var(--spacing-lg);
|
||
}
|
||
|
||
.records-title {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.view-all-btn {
|
||
color: var(--pet-primary);
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.record-item-v5 {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--spacing-md);
|
||
padding: var(--spacing-md);
|
||
background: #F8F9FA;
|
||
border-radius: var(--radius-md);
|
||
margin-bottom: var(--spacing-sm);
|
||
border-left: 4px solid var(--pet-accent);
|
||
}
|
||
|
||
.record-icon-v5 {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: var(--radius-md);
|
||
background: var(--pet-accent);
|
||
color: white;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.record-content-v5 {
|
||
flex: 1;
|
||
}
|
||
|
||
.record-title-v5 {
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
.record-desc-v5 {
|
||
font-size: 14px;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.record-time-v5 {
|
||
font-size: 12px;
|
||
color: var(--text-light);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* 操作按钮卡片 */
|
||
.actions-card {
|
||
background: white;
|
||
border-radius: var(--radius-xl);
|
||
padding: var(--spacing-lg);
|
||
margin: var(--spacing-md);
|
||
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
||
border: 1px solid rgba(255,255,255,0.8);
|
||
}
|
||
|
||
.actions-grid-v5 {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: var(--spacing-md);
|
||
}
|
||
|
||
.action-btn-v5 {
|
||
background: #F8F9FA;
|
||
border: 2px solid transparent;
|
||
border-radius: var(--radius-lg);
|
||
padding: var(--spacing-lg);
|
||
text-align: center;
|
||
transition: all 0.3s ease;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.action-btn-v5:hover {
|
||
border-color: var(--pet-primary);
|
||
background: white;
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 8px 25px rgba(255, 138, 128, 0.2);
|
||
}
|
||
|
||
.action-icon-v5 {
|
||
font-size: 28px;
|
||
margin-bottom: var(--spacing-md);
|
||
}
|
||
|
||
.action-text-v5 {
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container dashboard-v5-container">
|
||
<!-- 基本信息卡片 -->
|
||
<div class="pet-info-card">
|
||
<div class="pet-header">
|
||
<div class="pet-avatar-v5">
|
||
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiByeD0iNTAiIGZpbGw9IiNGRjhBODAiLz4KPHRleHQgeD0iNTAiIHk9IjU1IiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMzAiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj7wn5GBPC90ZXh0Pgo8L3N2Zz4K"
|
||
alt="小橘" style="width: 100%; height: 100%; object-fit: cover; border-radius: 16px;">
|
||
</div>
|
||
<div class="pet-basic-info">
|
||
<h1 class="pet-name-v5">小橘</h1>
|
||
<p class="pet-breed-info">橘猫 · 公 · 2岁3个月</p>
|
||
<div class="pet-tags">
|
||
<span class="pet-tag">活泼</span>
|
||
<span class="pet-tag">粘人</span>
|
||
<span class="pet-tag">健康</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="info-grid">
|
||
<div class="info-item-v5">
|
||
<div class="info-label-v5">生日</div>
|
||
<div class="info-value-v5">2022年3月15日</div>
|
||
</div>
|
||
<div class="info-item-v5">
|
||
<div class="info-label-v5">到家日期</div>
|
||
<div class="info-value-v5">2022年4月20日</div>
|
||
</div>
|
||
<div class="info-item-v5">
|
||
<div class="info-label-v5">陪伴天数</div>
|
||
<div class="info-value-v5">645天</div>
|
||
</div>
|
||
<div class="info-item-v5">
|
||
<div class="info-label-v5">当前体重</div>
|
||
<div class="info-value-v5">4.2kg</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 统计数据仪表盘 -->
|
||
<div class="dashboard-section-v5">
|
||
<div class="section-header">
|
||
<span class="section-icon">📊</span>
|
||
<h2 class="section-title-v5">健康数据仪表盘</h2>
|
||
</div>
|
||
|
||
<div class="dashboard-grid-v5">
|
||
<div class="metrics-overview">
|
||
<!-- 体重仪表 -->
|
||
<div class="metric-gauge">
|
||
<div class="gauge-container">
|
||
<div class="gauge-bg">
|
||
<div class="gauge-fill gauge-weight"></div>
|
||
<div class="gauge-center">
|
||
<div class="gauge-value">4.2</div>
|
||
<div class="gauge-unit">kg</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="gauge-label">体重监测</div>
|
||
<div class="gauge-status">健康范围 84%</div>
|
||
</div>
|
||
|
||
<!-- 活动仪表 -->
|
||
<div class="metric-gauge">
|
||
<div class="gauge-container">
|
||
<div class="gauge-bg">
|
||
<div class="gauge-fill gauge-activity"></div>
|
||
<div class="gauge-center">
|
||
<div class="gauge-value">78</div>
|
||
<div class="gauge-unit">%</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="gauge-label">活动指数</div>
|
||
<div class="gauge-status">活跃状态</div>
|
||
</div>
|
||
|
||
<!-- 食欲仪表 -->
|
||
<div class="metric-gauge">
|
||
<div class="gauge-container">
|
||
<div class="gauge-bg">
|
||
<div class="gauge-fill gauge-food"></div>
|
||
<div class="gauge-center">
|
||
<div class="gauge-value">92</div>
|
||
<div class="gauge-unit">%</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="gauge-label">食欲状态</div>
|
||
<div class="gauge-status">食欲旺盛</div>
|
||
</div>
|
||
|
||
<!-- 睡眠仪表 -->
|
||
<div class="metric-gauge">
|
||
<div class="gauge-container">
|
||
<div class="gauge-bg">
|
||
<div class="gauge-fill gauge-sleep"></div>
|
||
<div class="gauge-center">
|
||
<div class="gauge-value">14</div>
|
||
<div class="gauge-unit">h</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="gauge-label">睡眠时长</div>
|
||
<div class="gauge-status">睡眠充足</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 健康总览仪表盘 -->
|
||
<div class="health-dashboard">
|
||
<h3 class="dashboard-title">综合健康评估</h3>
|
||
|
||
<div class="health-score-display">
|
||
<div class="health-score-circle">
|
||
<div class="health-score-number">85</div>
|
||
</div>
|
||
<div class="health-score-text">健康状态良好</div>
|
||
</div>
|
||
|
||
<div class="health-indicators-grid">
|
||
<div class="health-indicator-v5">
|
||
<div class="indicator-icon-v5">💉</div>
|
||
<div class="indicator-status status-good">完成</div>
|
||
<div class="indicator-name">疫苗</div>
|
||
</div>
|
||
<div class="health-indicator-v5">
|
||
<div class="indicator-icon-v5">🐛</div>
|
||
<div class="indicator-status status-warning">需要</div>
|
||
<div class="indicator-name">驱虫</div>
|
||
</div>
|
||
<div class="health-indicator-v5">
|
||
<div class="indicator-icon-v5">🦷</div>
|
||
<div class="indicator-status status-good">良好</div>
|
||
<div class="indicator-name">牙齿</div>
|
||
</div>
|
||
<div class="health-indicator-v5">
|
||
<div class="indicator-icon-v5">👁️</div>
|
||
<div class="indicator-status status-good">正常</div>
|
||
<div class="indicator-name">眼部</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 最近记录卡片 -->
|
||
<div class="recent-records-card">
|
||
<div class="records-header">
|
||
<h3 class="records-title">最近记录</h3>
|
||
<a href="#" class="view-all-btn" onclick="interactions.handleButtonClick('viewRecords')">查看全部</a>
|
||
</div>
|
||
|
||
<div class="record-item-v5">
|
||
<div class="record-icon-v5">⚖️</div>
|
||
<div class="record-content-v5">
|
||
<div class="record-title-v5">体重记录</div>
|
||
<div class="record-desc-v5">今天体重4.2kg，比上周增加了0.1kg</div>
|
||
</div>
|
||
<div class="record-time-v5">2小时前</div>
|
||
</div>
|
||
|
||
<div class="record-item-v5">
|
||
<div class="record-icon-v5" style="background: var(--pet-secondary);">💉</div>
|
||
<div class="record-content-v5">
|
||
<div class="record-title-v5">疫苗接种</div>
|
||
<div class="record-desc-v5">完成了狂犬疫苗第二针接种</div>
|
||
</div>
|
||
<div class="record-time-v5">1天前</div>
|
||
</div>
|
||
|
||
<div class="record-item-v5">
|
||
<div class="record-icon-v5" style="background: var(--pet-warning);">🛁</div>
|
||
<div class="record-content-v5">
|
||
<div class="record-title-v5">洗澡护理</div>
|
||
<div class="record-desc-v5">给小橘洗了澡，全程很乖没有挣扎</div>
|
||
</div>
|
||
<div class="record-time-v5">3天前</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 操作按钮卡片 -->
|
||
<div class="actions-card">
|
||
<div class="actions-grid-v5">
|
||
<div class="action-btn-v5" onclick="interactions.handleButtonClick('addRecord')">
|
||
<div class="action-icon-v5">📝</div>
|
||
<div class="action-text-v5">添加记录</div>
|
||
</div>
|
||
<div class="action-btn-v5" onclick="interactions.handleButtonClick('aiChat')">
|
||
<div class="action-icon-v5">💬</div>
|
||
<div class="action-text-v5">AI助手</div>
|
||
</div>
|
||
<div class="action-btn-v5" onclick="interactions.handleButtonClick('healthChart')">
|
||
<div class="action-icon-v5">📊</div>
|
||
<div class="action-text-v5">健康报告</div>
|
||
</div>
|
||
<div class="action-btn-v5" onclick="interactions.handleButtonClick('timeline')">
|
||
<div class="action-icon-v5">⏰</div>
|
||
<div class="action-text-v5">成长时光</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="assets/js/common.js"></script>
|
||
<script>
|
||
// 卡片仪表盘式 V5 特有交互
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 卡片入场动画
|
||
const cards = document.querySelectorAll('.pet-info-card, .dashboard-grid-v5, .recent-records-card, .actions-card');
|
||
cards.forEach((card, index) => {
|
||
card.style.opacity = '0';
|
||
card.style.transform = 'translateY(30px)';
|
||
|
||
setTimeout(() => {
|
||
card.style.transition = 'all 0.6s ease';
|
||
card.style.opacity = '1';
|
||
card.style.transform = 'translateY(0)';
|
||
}, index * 200);
|
||
});
|
||
|
||
// 仪表盘动画
|
||
setTimeout(() => {
|
||
const gauges = document.querySelectorAll('.gauge-fill');
|
||
gauges.forEach((gauge, index) => {
|
||
setTimeout(() => {
|
||
gauge.style.animation = 'gaugeRotate 2s ease forwards';
|
||
}, index * 300);
|
||
});
|
||
}, 800);
|
||
|
||
// 健康评分动画
|
||
setTimeout(() => {
|
||
const healthScore = document.querySelector('.health-score-circle');
|
||
healthScore.style.animation = 'scoreAppear 1.5s ease forwards';
|
||
}, 1500);
|
||
|
||
console.log('卡片仪表盘式 V5 原型已加载');
|
||
});
|
||
|
||
// 添加动画样式
|
||
const style = document.createElement('style');
|
||
style.textContent = `
|
||
@keyframes gaugeRotate {
|
||
from {
|
||
transform: rotate(-90deg);
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
transform: rotate(0deg);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@keyframes scoreAppear {
|
||
0% {
|
||
transform: scale(0.5);
|
||
opacity: 0;
|
||
}
|
||
50% {
|
||
transform: scale(1.1);
|
||
opacity: 0.8;
|
||
}
|
||
100% {
|
||
transform: scale(1);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
`;
|
||
document.head.appendChild(style);
|
||
</script>
|
||
</body>
|
||
</html>
|