qdintc/intc-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 下载中心样式修改。

Browse Source
This commit is contained in:
tianyongbao
2025-12-28 23:20:00 +08:00
parent 32a9383245
commit 3837867079
1 changed files with 117 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

188
src/views/resource.vue
View File

@@ -25,22 +25,23 @@
<div class="features">
<ul class="zui-card-list">
<li class="zui-card">
<div class="card-header">
<div class="zui-card__media"><img :src="Invest" alt="记账管理平台" loading="lazy" decoding="async" width="120" height="120"></div>
<div class="card-icon-wrapper">
<div class="zui-card__media"><img :src="Invest" alt="记账管理平台" loading="lazy" decoding="async" width="110" height="110"></div>
</div>
<div class="card-content">
<h4 class="zui-card__title">记账管理平台</h4>
<p class="card-desc">专业的个人记账服务平台</p>
</div>
<div class="zui-card__body">
<div class="card-divider"></div>
<div class="zui-card__actions">
<a class="zui-button-link zui-button-link--primary" href="/static/download/invest/intcInvest-V1.0.apk" target="_blank">
<a class="zui-button-link zui-button-link--primary" href="/static/download/invest/intcInvest-V1.0.apk" download>
<span class="btn-icon">📱</span>
<span>安卓APP下载</span>
</a>
<a class="zui-button-link" href="/static/download/invest/intcInvest-Introduction.pdf" target="_blank">
<a class="zui-button-link" href="/static/download/invest/intcInvest-Introduction.pdf" download>
<span class="btn-icon">📄</span>
<span>系统介绍</span>
</a>
<a class="zui-button-link" href="/static/download/invest/intcInvest-Manual.pdf" target="_blank">
<a class="zui-button-link" href="/static/download/invest/intcInvest-Manual.pdf" download>
<span class="btn-icon">📖</span>
<span>使用手册</span>
</a>
@@ -49,22 +50,23 @@
</li>
<li class="zui-card">
<div class="card-header">
<div class="zui-card__media"><img :src="Health" alt="健康管理平台" loading="lazy" decoding="async" width="120" height="120"></div>
<div class="card-icon-wrapper">
<div class="zui-card__media"><img :src="Health" alt="健康管理平台" loading="lazy" decoding="async" width="110" height="110"></div>
</div>
<div class="card-content">
<h4 class="zui-card__title">健康管理平台</h4>
<p class="card-desc">健康档案管理专家</p>
</div>
<div class="zui-card__body">
<div class="card-divider"></div>
<div class="zui-card__actions">
<a class="zui-button-link zui-button-link--primary" href="/static/download/health/intcHealth-V1.0.apk" target="_blank">
<a class="zui-button-link zui-button-link--primary" href="/static/download/health/intcHealth-V1.0.apk" download>
<span class="btn-icon">📱</span>
<span>安卓APP下载</span>
</a>
<a class="zui-button-link" href="/static/download/health/intcHealth-Introduction.pdf" target="_blank">
<a class="zui-button-link" href="/static/download/health/intcHealth-Introduction.pdf" download>
<span class="btn-icon">📄</span>
<span>系统介绍</span>
</a>
<a class="zui-button-link" href="/static/download/health/intcHealth-Manual.pdf" target="_blank">
<a class="zui-button-link" href="/static/download/health/intcHealth-Manual.pdf" download>
<span class="btn-icon">📖</span>
<span>使用手册</span>
</a>
@@ -73,22 +75,23 @@
</li>
<li class="zui-card">
<div class="card-header">
<div class="zui-card__media"><img :src="imaotai" alt="茅台预约平台" loading="lazy" decoding="async" width="120" height="120"></div>
<div class="card-icon-wrapper">
<div class="zui-card__media"><img :src="imaotai" alt="茅台预约平台" loading="lazy" decoding="async" width="110" height="110"></div>
</div>
<div class="card-content">
<h4 class="zui-card__title">茅台预约平台</h4>
<p class="card-desc">茅台预约得力助手</p>
</div>
<div class="zui-card__body">
<div class="card-divider"></div>
<div class="zui-card__actions">
<a class="zui-button-link zui-button-link--primary" href="/static/download/imaotai/intcImaotai-V1.0.apk" target="_blank">
<a class="zui-button-link zui-button-link--primary" href="/static/download/imaotai/intcImaotai-V1.0.apk" download>
<span class="btn-icon">📱</span>
<span>安卓APP下载</span>
</a>
<a class="zui-button-link" href="/static/download/imaotai/intcImaotai-Introduction.pdf" target="_blank">
<a class="zui-button-link" href="/static/download/imaotai/intcImaotai-Introduction.pdf" download>
<span class="btn-icon">📄</span>
<span>系统介绍</span>
</a>
<a class="zui-button-link" href="/static/download/imaotai/intcImaotai-Manual.pdf" target="_blank">
<a class="zui-button-link" href="/static/download/imaotai/intcImaotai-Manual.pdf" download>
<span class="btn-icon">📖</span>
<span>使用手册</span>
</a>
@@ -260,16 +263,16 @@ download(type) {
list-style: none;
margin: 0 auto;
padding: 0;
display: grid;
grid-template-columns: repeat(3, minmax(300px, 380px));
gap: 30px;
max-width: 1300px;
justify-content: center;
display: flex;
flex-direction: column;
gap: 25px;
max-width: 900px;
}
.zui-card {
display: flex;
flex-direction: column;
flex-direction: row;
align-items: stretch;
background: #fff;
border-radius: 20px;
overflow: hidden;
@@ -283,47 +286,49 @@ download(type) {
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: linear-gradient(90deg, #35A3BA, #6AC2B5);
background: linear-gradient(90deg, #667eea, #764ba2);
transform: scaleX(0);
transition: transform 0.3s ease;
}
&:hover {
transform: translateY(-8px);
box-shadow: 0 15px 45px rgba(53, 163, 186, 0.2);
border-color: rgba(53, 163, 186, 0.3);
transform: translateY(-5px);
box-shadow: 0 15px 45px rgba(102, 126, 234, 0.2);
border-color: rgba(102, 126, 234, 0.3);
&::before {
transform: scaleX(1);
}
.zui-card__media {
transform: scale(1.05);
.zui-card__media img {
transform: scale(1.1) rotate(3deg);
}
.zui-button-link--primary {
transform: scale(1.05);
box-shadow: 0 4px 20px rgba(0, 136, 255, 0.4);
transform: translateY(-2px);
box-shadow: 0 6px 25px rgba(0, 136, 255, 0.45);
}
}
}
.card-header {
padding: 35px 25px 25px;
text-align: center;
background: linear-gradient(180deg, rgba(53, 163, 186, 0.03) 0%, transparent 100%);
.card-icon-wrapper {
flex: 0 0 180px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.05), rgba(118, 75, 162, 0.05));
padding: 30px;
}
.zui-card__media {
width: 110px;
height: 110px;
margin: 0 auto 20px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(53, 163, 186, 0.08), rgba(106, 194, 181, 0.08));
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
border-radius: 20px;
padding: 10px;
padding: 12px;
transition: transform 0.3s ease;
img {
@@ -332,40 +337,50 @@ download(type) {
object-fit: contain;
border-radius: 16px;
filter: drop-shadow(0 4px 10px rgba(0,0,0,0.1));
transition: all 0.3s ease;
}
}
.card-content {
flex: 1;
padding: 30px 35px;
display: flex;
flex-direction: column;
}
.zui-card__title {
margin: 0 0 10px;
font-size: 20px;
margin: 0 0 8px;
font-size: 22px;
color: #1f2a37;
font-weight: 600;
font-weight: 700;
}
.card-desc {
font-size: 14px;
color: #666;
margin: 0;
line-height: 1.5;
margin: 0 0 20px;
line-height: 1.6;
}
.zui-card__body {
padding: 20px 25px 30px;
.card-divider {
height: 1px;
background: linear-gradient(90deg, rgba(102, 126, 234, 0.2), transparent);
margin-bottom: 20px;
}
.zui-card__actions {
display: flex;
flex-direction: column;
gap: 12px;
flex-wrap: wrap;
}
.zui-button-link {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 20px;
font-size: 14px;
gap: 6px;
padding: 10px 18px;
font-size: 13px;
font-weight: 500;
color: #656b79;
background: #f6f8fa;
@@ -373,28 +388,31 @@ download(type) {
border-radius: 10px;
text-decoration: none;
transition: all 0.3s ease;
flex: 0 0 auto;
.btn-icon {
font-size: 18px;
font-size: 16px;
}
&:hover {
background: #eef1f4;
border-color: #d0d4d9;
transform: translateX(3px);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
}
.zui-button-link--primary {
color: #fff;
background: linear-gradient(135deg, #00c2ff, #0088ff);
background: linear-gradient(135deg, #667eea, #764ba2);
border: none;
box-shadow: 0 4px 15px rgba(0, 136, 255, 0.25);
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
font-weight: 600;
&:hover {
background: linear-gradient(135deg, #00b8ff, #007bff);
transform: translateX(3px) scale(1.02);
background: linear-gradient(135deg, #7689f0, #8558b0);
transform: translateY(-2px);
box-shadow: 0 6px 25px rgba(102, 126, 234, 0.45);
}
}
}
@@ -402,9 +420,7 @@ download(type) {
// 响应式设计
@media (max-width: 1024px) {
.features .zui-card-list {
grid-template-columns: repeat(2, minmax(280px, 1fr));
padding: 0 20px;
gap: 25px;
max-width: 800px;
}
}
@@ -437,6 +453,34 @@ download(type) {
font-size: 14px;
}
}
.features {
.zui-card {
flex-direction: column;
}
.card-icon-wrapper {
flex: 0 0 auto;
padding: 25px;
}
.card-content {
padding: 25px 20px;
}
.zui-card__title {
font-size: 20px;
}
.zui-card__actions {
flex-direction: column;
.zui-button-link {
width: 100%;
justify-content: center;
}
}
}
}
@media (max-width: 600px) {
@@ -460,8 +504,6 @@ download(type) {
padding: 30px 15px 40px;
.zui-card-list {
grid-template-columns: 1fr;
gap: 20px;
padding: 0 10px;
}
@@ -469,14 +511,17 @@ download(type) {
border-radius: 16px;
}
.card-header {
padding: 25px 20px 20px;
.card-icon-wrapper {
padding: 20px;
}
.zui-card__media {
width: 100px;
height: 100px;
margin-bottom: 15px;
width: 90px;
height: 90px;
}
.card-content {
padding: 20px 15px;
}
.zui-card__title {
@@ -485,10 +530,11 @@ download(type) {
.card-desc {
font-size: 13px;
margin-bottom: 15px;
}
.zui-card__body {
padding: 15px 20px 25px;
.card-divider {
margin-bottom: 15px;
}
.zui-card__actions {