1056 lines
35 KiB
HTML
1056 lines
35 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>软件下载完成 - 小蚂蚁云</title>
|
||
<style>
|
||
/* 基础样式重置 */
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Segoe UI', 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||
line-height: 1.6;
|
||
color: #333;
|
||
background-color: #f8fafc;
|
||
padding: 20px 0;
|
||
}
|
||
|
||
/* 主容器 */
|
||
.email-container {
|
||
max-width: 600px;
|
||
margin: 0 auto;
|
||
background-color: #fff;
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
|
||
}
|
||
|
||
/* 邮件头部 */
|
||
.email-header {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: white;
|
||
padding: 40px 40px 30px;
|
||
text-align: center;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.email-header::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -50%;
|
||
left: -50%;
|
||
width: 200%;
|
||
height: 200%;
|
||
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
|
||
transform: rotate(30deg);
|
||
}
|
||
|
||
.logo-container {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.company-name {
|
||
font-size: 42px;
|
||
font-weight: 700;
|
||
color: white;
|
||
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
|
||
letter-spacing: 2px;
|
||
margin: 0;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.header-text {
|
||
font-size: 18px;
|
||
font-weight: 300;
|
||
margin: 0;
|
||
opacity: 0.9;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
/* 内容区域 */
|
||
.email-content {
|
||
padding: 40px;
|
||
}
|
||
|
||
.content-title {
|
||
font-size: 26px;
|
||
font-weight: 600;
|
||
margin-bottom: 20px;
|
||
color: #2c3e50;
|
||
position: relative;
|
||
padding-bottom: 12px;
|
||
text-align: center;
|
||
}
|
||
|
||
.content-title::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 80px;
|
||
height: 4px;
|
||
background: linear-gradient(to right, #667eea, #764ba2);
|
||
border-radius: 2px;
|
||
}
|
||
|
||
.content-text {
|
||
font-size: 16px;
|
||
margin-bottom: 20px;
|
||
color: #555;
|
||
line-height: 1.7;
|
||
}
|
||
|
||
/* 图标样式 */
|
||
.icon-circle {
|
||
display: inline-block;
|
||
width: 100px;
|
||
height: 100px;
|
||
border-radius: 50%;
|
||
position: relative;
|
||
margin-bottom: 20px;
|
||
box-shadow: 0 8px 25px rgba(33, 150, 243, 0.3);
|
||
}
|
||
|
||
.icon-circle::after {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
font-size: 48px;
|
||
}
|
||
|
||
/* 下载图标 */
|
||
.download-icon {
|
||
background: linear-gradient(135deg, #2196F3, #1976D2);
|
||
}
|
||
|
||
.download-icon::after {
|
||
content: '📥';
|
||
color: white;
|
||
}
|
||
|
||
/* 信息卡片样式 */
|
||
.info-card {
|
||
border-radius: 12px;
|
||
padding: 30px;
|
||
margin: 30px 0;
|
||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
|
||
border-left: 5px solid;
|
||
background: #fff;
|
||
}
|
||
|
||
.info-card-title {
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
margin-bottom: 25px;
|
||
color: #2c3e50;
|
||
display: flex;
|
||
align-items: center;
|
||
padding-bottom: 12px;
|
||
border-bottom: 2px solid #f0f0f0;
|
||
}
|
||
|
||
.info-card-title::before {
|
||
margin-right: 12px;
|
||
font-size: 24px;
|
||
}
|
||
|
||
.info-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 18px;
|
||
}
|
||
|
||
.info-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 16px 18px;
|
||
background: #f8fafc;
|
||
border-radius: 10px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
|
||
border-left: 3px solid #2196F3;
|
||
}
|
||
|
||
.info-label {
|
||
font-size: 14px;
|
||
color: #666;
|
||
margin-bottom: 6px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.info-value {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: #333;
|
||
}
|
||
|
||
/* 产品详情 */
|
||
.product-details {
|
||
background: linear-gradient(to right, #f0f8ff, #e6f2ff);
|
||
border-left-color: #2196F3;
|
||
}
|
||
|
||
.product-details-title::before {
|
||
content: '📦';
|
||
}
|
||
|
||
/* 产品信息 */
|
||
.product-info {
|
||
display: flex;
|
||
margin-bottom: 25px;
|
||
align-items: center;
|
||
background: white;
|
||
padding: 25px;
|
||
border-radius: 12px;
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
|
||
}
|
||
|
||
.product-image {
|
||
width: 90px;
|
||
height: 90px;
|
||
background: linear-gradient(135deg, #2196F3, #1976D2);
|
||
border-radius: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 25px;
|
||
color: white;
|
||
font-size: 36px;
|
||
box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
|
||
}
|
||
|
||
.product-text {
|
||
flex: 1;
|
||
}
|
||
|
||
.product-name {
|
||
font-size: 22px;
|
||
font-weight: 700;
|
||
margin-bottom: 8px;
|
||
color: #2c3e50;
|
||
}
|
||
|
||
.product-description {
|
||
font-size: 15px;
|
||
color: #666;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.product-version {
|
||
display: inline-block;
|
||
background: #e3f2fd;
|
||
color: #1976D2;
|
||
padding: 4px 12px;
|
||
border-radius: 20px;
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
/* 下载信息 */
|
||
.download-info {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||
gap: 18px;
|
||
margin-top: 25px;
|
||
}
|
||
|
||
.download-info-item {
|
||
background: white;
|
||
padding: 18px;
|
||
border-radius: 10px;
|
||
text-align: center;
|
||
box-shadow: 0 3px 10px rgba(0,0,0,0.05);
|
||
border: 1px solid #f0f0f0;
|
||
transition: transform 0.2s ease;
|
||
}
|
||
|
||
.download-info-item:hover {
|
||
transform: translateY(-3px);
|
||
}
|
||
|
||
.download-info-label {
|
||
font-size: 14px;
|
||
color: #666;
|
||
margin-bottom: 8px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.download-info-value {
|
||
font-size: 17px;
|
||
font-weight: 700;
|
||
color: #2196F3;
|
||
}
|
||
|
||
/* 安装指南样式 - 优化手机端兼容性 */
|
||
.installation-guide {
|
||
background: linear-gradient(to right, #f8f9ff, #f0f2ff);
|
||
border-radius: 12px;
|
||
padding: 30px;
|
||
margin: 30px 0;
|
||
border-left: 5px solid #4CAF50;
|
||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
|
||
}
|
||
|
||
.installation-title {
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
margin-bottom: 25px;
|
||
color: #2c3e50;
|
||
display: flex;
|
||
align-items: center;
|
||
padding-bottom: 12px;
|
||
border-bottom: 2px solid #e8f5e9;
|
||
}
|
||
|
||
.installation-title::before {
|
||
content: '🔧';
|
||
margin-right: 12px;
|
||
font-size: 24px;
|
||
}
|
||
|
||
.installation-steps {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 20px;
|
||
}
|
||
|
||
.installation-step {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
background: white;
|
||
padding: 22px;
|
||
border-radius: 10px;
|
||
box-shadow: 0 3px 12px rgba(0,0,0,0.06);
|
||
border: 1px solid #e8f5e9;
|
||
transition: all 0.3s ease;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.installation-step:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.installation-step::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
height: 100%;
|
||
width: 4px;
|
||
background: linear-gradient(to bottom, #4CAF50, #45a049);
|
||
}
|
||
|
||
.step-indicator {
|
||
background: linear-gradient(135deg, #4CAF50, #45a049);
|
||
color: white;
|
||
width: 36px;
|
||
height: 36px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
margin-right: 18px;
|
||
flex-shrink: 0;
|
||
box-shadow: 0 4px 10px rgba(76, 175, 80, 0.3);
|
||
}
|
||
|
||
.step-content {
|
||
flex: 1;
|
||
min-width: 0; /* 防止内容溢出 */
|
||
}
|
||
|
||
.step-heading {
|
||
font-size: 17px;
|
||
font-weight: 600;
|
||
margin-bottom: 8px;
|
||
color: #2c3e50;
|
||
display: flex;
|
||
align-items: center;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.step-icon {
|
||
margin-right: 8px;
|
||
font-size: 18px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.step-description {
|
||
font-size: 15px;
|
||
color: #555;
|
||
line-height: 1.6;
|
||
margin-bottom: 0;
|
||
word-wrap: break-word;
|
||
overflow-wrap: break-word;
|
||
}
|
||
|
||
.step-description code {
|
||
background: #f1f1f1;
|
||
padding: 2px 6px;
|
||
border-radius: 4px;
|
||
font-family: 'Courier New', monospace;
|
||
font-size: 14px;
|
||
color: #e83e8c;
|
||
word-break: break-all;
|
||
}
|
||
|
||
.step-tip {
|
||
background: #e8f5e9;
|
||
padding: 10px 14px;
|
||
border-radius: 8px;
|
||
margin-top: 10px;
|
||
font-size: 14px;
|
||
color: #2e7d32;
|
||
border-left: 3px solid #4CAF50;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.step-tip strong {
|
||
color: #1b5e20;
|
||
}
|
||
|
||
/* 系统要求 */
|
||
.system-requirements {
|
||
background: linear-gradient(to right, #fff3e0, #ffe0b2);
|
||
border-radius: 10px;
|
||
padding: 20px;
|
||
margin: 20px 0;
|
||
border-left: 4px solid #FF9800;
|
||
}
|
||
|
||
.requirements-title {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
margin-bottom: 12px;
|
||
color: #FF9800;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.requirements-title::before {
|
||
content: '💻';
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.requirements-list {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 12px;
|
||
}
|
||
|
||
.requirement-item {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 14px;
|
||
color: #555;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.requirement-item::before {
|
||
content: '✓';
|
||
color: #4CAF50;
|
||
font-weight: bold;
|
||
margin-right: 8px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* 按钮样式 */
|
||
.button {
|
||
display: inline-block;
|
||
color: white;
|
||
text-decoration: none;
|
||
padding: 16px 40px;
|
||
border-radius: 8px;
|
||
font-weight: 600;
|
||
margin: 30px 0;
|
||
transition: all 0.3s ease;
|
||
box-shadow: 0 6px 20px rgba(33, 150, 243, 0.4);
|
||
border: none;
|
||
cursor: pointer;
|
||
font-size: 17px;
|
||
text-align: center;
|
||
letter-spacing: 0.5px;
|
||
-webkit-tap-highlight-color: transparent;
|
||
}
|
||
|
||
.button:hover {
|
||
transform: translateY(-3px);
|
||
box-shadow: 0 8px 25px rgba(33, 150, 243, 0.5);
|
||
}
|
||
|
||
.button-download {
|
||
background: linear-gradient(to right, #2196F3, #1976D2);
|
||
}
|
||
|
||
.button-container {
|
||
text-align: center;
|
||
}
|
||
|
||
/* 标签样式 */
|
||
.email-tag {
|
||
display: inline-block;
|
||
color: white;
|
||
padding: 8px 20px;
|
||
border-radius: 20px;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
margin-bottom: 20px;
|
||
letter-spacing: 0.5px;
|
||
box-shadow: 0 3px 8px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.email-tag-download {
|
||
background: linear-gradient(to right, #2196F3, #1976D2);
|
||
}
|
||
|
||
/* 邮件底部 */
|
||
.email-footer {
|
||
background-color: #f8f9fa;
|
||
padding: 40px 40px 30px;
|
||
text-align: center;
|
||
border-top: 1px solid #eaeaea;
|
||
}
|
||
|
||
.qrcode-section {
|
||
margin-bottom: 30px;
|
||
padding: 25px;
|
||
background-color: white;
|
||
border-radius: 12px;
|
||
display: inline-block;
|
||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
|
||
border: 1px solid #eaeaea;
|
||
}
|
||
|
||
.qrcode {
|
||
max-width: 140px;
|
||
height: auto;
|
||
margin-bottom: 12px;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.qrcode-text {
|
||
font-size: 15px;
|
||
color: #666;
|
||
margin: 8px 0;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.footer-links {
|
||
margin: 30px 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.footer-link {
|
||
color: #666;
|
||
text-decoration: none;
|
||
font-size: 14px;
|
||
margin: 0 15px;
|
||
transition: color 0.3s ease;
|
||
position: relative;
|
||
font-weight: 500;
|
||
-webkit-tap-highlight-color: transparent;
|
||
}
|
||
|
||
.footer-link:hover {
|
||
color: #2196F3;
|
||
}
|
||
|
||
.footer-link:not(:last-child)::after {
|
||
content: '|';
|
||
position: absolute;
|
||
right: -16px;
|
||
color: #ddd;
|
||
}
|
||
|
||
.copyright {
|
||
font-size: 13px;
|
||
color: #999;
|
||
margin-top: 25px;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* 安全提示 */
|
||
.security-tip {
|
||
background: linear-gradient(to right, #fff8e1, #ffecb3);
|
||
border-radius: 10px;
|
||
padding: 20px;
|
||
margin: 25px 0;
|
||
border-left: 4px solid #FF9800;
|
||
}
|
||
|
||
.security-tip-title {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
margin-bottom: 10px;
|
||
color: #FF9800;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.security-tip-title::before {
|
||
content: '🔒';
|
||
margin-right: 10px;
|
||
}
|
||
|
||
/* 响应式调整 - 手机端优化 */
|
||
@media screen and (max-width: 600px) {
|
||
.email-header, .email-content, .email-footer {
|
||
padding: 25px 20px;
|
||
}
|
||
|
||
.company-name {
|
||
font-size: 32px;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
.header-text {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.content-title {
|
||
font-size: 22px;
|
||
padding-bottom: 10px;
|
||
}
|
||
|
||
.content-title::after {
|
||
width: 60px;
|
||
height: 3px;
|
||
}
|
||
|
||
.button {
|
||
display: block;
|
||
text-align: center;
|
||
padding: 18px;
|
||
width: 100%;
|
||
margin: 20px 0;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.info-grid, .download-info, .requirements-list {
|
||
grid-template-columns: 1fr;
|
||
gap: 12px;
|
||
}
|
||
|
||
.product-info {
|
||
flex-direction: column;
|
||
text-align: center;
|
||
padding: 20px;
|
||
}
|
||
|
||
.product-image {
|
||
margin-right: 0;
|
||
margin-bottom: 20px;
|
||
width: 70px;
|
||
height: 70px;
|
||
font-size: 28px;
|
||
}
|
||
|
||
.product-name {
|
||
font-size: 20px;
|
||
}
|
||
|
||
.footer-links {
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
|
||
.footer-link {
|
||
margin: 0;
|
||
}
|
||
|
||
.footer-link:not(:last-child)::after {
|
||
display: none;
|
||
}
|
||
|
||
.icon-circle {
|
||
width: 80px;
|
||
height: 80px;
|
||
}
|
||
|
||
.icon-circle::after {
|
||
font-size: 36px;
|
||
}
|
||
|
||
/* 安装指南手机端优化 */
|
||
.installation-guide {
|
||
padding: 20px;
|
||
margin: 25px 0;
|
||
}
|
||
|
||
.installation-title {
|
||
font-size: 18px;
|
||
margin-bottom: 20px;
|
||
padding-bottom: 10px;
|
||
}
|
||
|
||
.installation-steps {
|
||
gap: 16px;
|
||
}
|
||
|
||
.installation-step {
|
||
padding: 18px 16px;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.step-indicator {
|
||
width: 32px;
|
||
height: 32px;
|
||
font-size: 14px;
|
||
margin-right: 0;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.step-heading {
|
||
font-size: 16px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.step-description {
|
||
font-size: 14px;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.step-tip {
|
||
font-size: 13px;
|
||
padding: 8px 12px;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.info-card {
|
||
padding: 20px;
|
||
margin: 25px 0;
|
||
}
|
||
|
||
.info-card-title {
|
||
font-size: 18px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.info-item {
|
||
padding: 14px 16px;
|
||
}
|
||
|
||
.system-requirements {
|
||
padding: 16px;
|
||
}
|
||
|
||
.security-tip {
|
||
padding: 16px;
|
||
}
|
||
|
||
.qrcode-section {
|
||
padding: 20px;
|
||
}
|
||
|
||
.qrcode {
|
||
max-width: 120px;
|
||
}
|
||
}
|
||
|
||
/* 超小屏幕优化 */
|
||
@media screen and (max-width: 375px) {
|
||
.email-header, .email-content, .email-footer {
|
||
padding: 20px 15px;
|
||
}
|
||
|
||
.company-name {
|
||
font-size: 28px;
|
||
}
|
||
|
||
.content-title {
|
||
font-size: 20px;
|
||
}
|
||
|
||
.installation-step {
|
||
padding: 16px 14px;
|
||
}
|
||
|
||
.step-heading {
|
||
font-size: 15px;
|
||
}
|
||
|
||
.step-description {
|
||
font-size: 13px;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="email-container">
|
||
<!-- 邮件头部 -->
|
||
<div class="email-header">
|
||
<div class="logo-container">
|
||
<h1 class="company-name">小蚂蚁云</h1>
|
||
</div>
|
||
<p class="header-text">专业软件服务,助力您的数字未来</p>
|
||
</div>
|
||
|
||
<!-- 下载成功模板 -->
|
||
<div class="email-content">
|
||
<span class="email-tag email-tag-download">软件产品</span>
|
||
<h2 class="content-title">软件下载完成通知</h2>
|
||
|
||
<div class="download-ready-icon" style="text-align: center; margin: 25px 0;">
|
||
<div class="icon-circle download-icon"></div>
|
||
<h3 style="color: #2196F3; margin-bottom: 12px; font-size: 22px;">软件下载已完成</h3>
|
||
<p style="color: #666; font-size: 16px;">您的软件产品已准备就绪,可以开始安装使用</p>
|
||
</div>
|
||
|
||
<p class="content-text">尊敬的 <strong style="color: #2196F3;">王先生</strong>,</p>
|
||
<p class="content-text">感谢您选择小蚂蚁云的产品!您购买的软件已成功下载完成,我们已为您准备好完整的安装包和相关资源。</p>
|
||
|
||
<div class="info-card product-details">
|
||
<div class="info-card-title product-details-title">产品信息</div>
|
||
|
||
<div class="product-info">
|
||
<div class="product-image">🚀</div>
|
||
<div class="product-text">
|
||
<div class="product-name">小蚂蚁云 专业设计套件 v3.0</div>
|
||
<div class="product-description">全面的设计解决方案,包含高级设计工具、专业模板库、素材资源和协作功能,助力您的创意工作流程。</div>
|
||
<span class="product-version">最新版本 3.0.1</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="download-info">
|
||
<div class="download-info-item">
|
||
<span class="download-info-label">文件大小</span>
|
||
<span class="download-info-value">1.2 GB</span>
|
||
</div>
|
||
<div class="download-info-item">
|
||
<span class="download-info-label">下载次数</span>
|
||
<span class="download-info-value">3次(剩余2次)</span>
|
||
</div>
|
||
<div class="download-info-item">
|
||
<span class="download-info-label">文件格式</span>
|
||
<span class="download-info-value">ZIP压缩包</span>
|
||
</div>
|
||
<div class="download-info-item">
|
||
<span class="download-info-label">授权有效期</span>
|
||
<span class="download-info-value">2024-12-15</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 系统要求 -->
|
||
<div class="system-requirements">
|
||
<div class="requirements-title">系统要求</div>
|
||
<div class="requirements-list">
|
||
<div class="requirement-item">Windows 10 或更高版本</div>
|
||
<div class="requirement-item">8 GB 内存(推荐16 GB)</div>
|
||
<div class="requirement-item">2 GB 可用磁盘空间</div>
|
||
<div class="requirement-item">支持 OpenGL 3.3 的显卡</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="button-container">
|
||
<a href="#" class="button button-download">立即安装软件</a>
|
||
</div>
|
||
|
||
<!-- 优化后的安装指南 - 手机端兼容 -->
|
||
<div class="installation-guide">
|
||
<div class="installation-title">安装指南</div>
|
||
|
||
<div class="installation-steps">
|
||
<div class="installation-step">
|
||
<div class="step-indicator">1</div>
|
||
<div class="step-content">
|
||
<div class="step-heading">
|
||
<span class="step-icon">📁</span>
|
||
准备安装环境
|
||
</div>
|
||
<p class="step-description">请确保您的计算机满足系统要求,关闭所有正在运行的应用程序,特别是杀毒软件和安全防护程序,以避免安装过程中出现冲突。</p>
|
||
<div class="step-tip">
|
||
<strong>建议:</strong> 在安装前创建系统还原点,以便在需要时恢复到安装前的状态
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="installation-step">
|
||
<div class="step-indicator">2</div>
|
||
<div class="step-content">
|
||
<div class="step-heading">
|
||
<span class="step-icon">⚙️</span>
|
||
解压安装文件
|
||
</div>
|
||
<p class="step-description">找到下载的 ZIP 压缩包,使用系统自带的解压功能或第三方解压软件(如 WinRAR、7-Zip)将其解压到指定目录。</p>
|
||
<div class="step-tip">
|
||
<strong>路径建议:</strong> 建议解压到 C:\Program Files\小蚂蚁云\ 或 D:\Applications\小蚂蚁云\
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="installation-step">
|
||
<div class="step-indicator">3</div>
|
||
<div class="step-content">
|
||
<div class="step-heading">
|
||
<span class="step-icon">☕</span>
|
||
部署Java开发环境
|
||
</div>
|
||
<p class="step-description">
|
||
安装JDK 8或更高版本,配置JAVA_HOME环境变量。验证安装:在命令行中输入 <code>java -version</code> 和 <code>javac -version</code> 确认版本信息。
|
||
</p>
|
||
<div class="step-tip">
|
||
<strong>版本建议:</strong> 推荐使用 JDK 11 LTS 版本,确保与项目兼容性
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="installation-step">
|
||
<div class="step-indicator">4</div>
|
||
<div class="step-content">
|
||
<div class="step-heading">
|
||
<span class="step-icon">🗄️</span>
|
||
安装配置MySQL数据库
|
||
</div>
|
||
<p class="step-description">
|
||
下载并安装MySQL 8.0,设置root密码。创建项目数据库,导入提供的SQL脚本文件。配置数据库连接参数。
|
||
</p>
|
||
<div class="step-tip">
|
||
<strong>配置要点:</strong> 字符集设置为utf8mb4,排序规则为utf8mb4_unicode_ci
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="installation-step">
|
||
<div class="step-indicator">5</div>
|
||
<div class="step-content">
|
||
<div class="step-heading">
|
||
<span class="step-icon">💻</span>
|
||
IDEA导入项目
|
||
</div>
|
||
<p class="step-description">
|
||
使用IntelliJ IDEA打开项目根目录,等待项目索引完成。配置项目SDK为已安装的JDK版本。
|
||
</p>
|
||
<div class="step-tip">
|
||
<strong>导入提示:</strong> 选择"Open"而非"Import Project",IDEA会自动识别Maven项目
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="installation-step">
|
||
<div class="step-indicator">6</div>
|
||
<div class="step-content">
|
||
<div class="step-heading">
|
||
<span class="step-icon">📦</span>
|
||
安装Maven依赖
|
||
</div>
|
||
<p class="step-description">
|
||
在IDEA中打开Maven工具窗口,点击"Reload All Maven Projects"图标。等待所有依赖下载完成。
|
||
</p>
|
||
<div class="step-tip">
|
||
<strong>网络配置:</strong> 如遇下载缓慢,可配置阿里云Maven镜像源加速下载
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="installation-step">
|
||
<div class="step-indicator">7</div>
|
||
<div class="step-content">
|
||
<div class="step-heading">
|
||
<span class="step-icon">⚙️</span>
|
||
配置项目参数
|
||
</div>
|
||
<p class="step-description">
|
||
修改application.yml/properties文件中的数据库连接信息、服务器端口等配置参数。确保与本地环境匹配。
|
||
</p>
|
||
<div class="step-tip">
|
||
<strong>配置检查:</strong> 数据库URL、用户名、密码必须与MySQL安装时设置的一致
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="installation-step">
|
||
<div class="step-indicator">8</div>
|
||
<div class="step-content">
|
||
<div class="step-heading">
|
||
<span class="step-icon">🚀</span>
|
||
启动项目服务
|
||
</div>
|
||
<p class="step-description">
|
||
找到主启动类,右键选择"Run"启动项目。观察控制台日志,确认无错误信息,服务正常启动。
|
||
</p>
|
||
<div class="step-tip">
|
||
<strong>启动验证:</strong> 访问 http://localhost:8080 查看应用是否正常响应
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="installation-step">
|
||
<div class="step-indicator">9</div>
|
||
<div class="step-content">
|
||
<div class="step-heading">
|
||
<span class="step-icon">✅</span>
|
||
环境验证测试
|
||
</div>
|
||
<p class="step-description">
|
||
运行项目单元测试,验证各模块功能正常。访问Swagger文档界面,测试API接口连通性。
|
||
</p>
|
||
<div class="step-tip">
|
||
<strong>完整测试:</strong> 确保数据库连接、业务逻辑、API接口全部正常工作
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="security-tip">
|
||
<div class="security-tip-title">重要安全提示</div>
|
||
<p class="content-text" style="margin-bottom: 10px;">
|
||
• 请确保从官方渠道下载软件,避免使用未经授权的版本<br>
|
||
• 安装过程中如遇安全软件提示,请选择"允许"或"信任此程序"<br>
|
||
• 请勿将产品密钥分享给他人,每个密钥都有唯一设备绑定<br>
|
||
• 定期检查软件更新,确保获得最新的功能和安全补丁
|
||
</p>
|
||
</div>
|
||
|
||
<p class="content-text">如有任何技术问题或需要帮助,请查看我们的<a href="#" style="color: #2196F3; font-weight: 600;">在线帮助文档</a>或联系技术支持团队。</p>
|
||
|
||
<p class="content-text" style="text-align: left; margin-top: 30px; font-weight: 500;">
|
||
祝您使用愉快!<br>
|
||
<strong>小蚂蚁云 软件团队</strong><br>
|
||
<span style="font-size: 14px; color: #666;">专业服务,值得信赖</span>
|
||
</p>
|
||
</div>
|
||
|
||
<!-- 邮件底部 -->
|
||
<div class="email-footer">
|
||
<div class="qrcode-section">
|
||
<img src="./image.png" alt="微信公众号二维码" class="qrcode">
|
||
<p class="qrcode-text">关注官方微信公众号</p>
|
||
<p class="qrcode-text">获取最新产品资讯和技术支持</p>
|
||
</div>
|
||
|
||
<div class="footer-links">
|
||
<a href="#" class="footer-link">官方网站</a>
|
||
<a href="#" class="footer-link">用户协议</a>
|
||
<a href="#" class="footer-link">隐私政策</a>
|
||
<a href="#" class="footer-link">联系我们</a>
|
||
<a href="#" class="footer-link">帮助中心</a>
|
||
</div>
|
||
|
||
<p class="copyright">© 2026 小蚂蚁云 科技有限公司 版权所有</p>
|
||
<p class="copyright">本邮件为系统自动发送,请勿直接回复。如有疑问请联系客服。</p>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html> |