fix: 去掉茅台预约功能,优化部分样式。

This commit is contained in:
tianyongbao
2026-01-01 16:52:18 +08:00
parent 142fe7abce
commit 24d21d8910
5 changed files with 107 additions and 93 deletions

View File

@@ -5,7 +5,7 @@
<h4 class="zui-logo-text">
<a class="zui-nav-link" :href="currentLinks.accounting" target="_blank">&nbsp;&nbsp;记账平台</a>
<a class="zui-nav-link" :href="currentLinks.health" target="_blank">&nbsp;&nbsp;健康档案</a>
<a class="zui-nav-link" :href="currentLinks.imaotai" target="_blank">&nbsp;&nbsp;茅台预约</a>
<!-- <a class="zui-nav-link" :href="currentLinks.imaotai" target="_blank">&nbsp;&nbsp;茅台预约</a> -->
<a class="zui-nav-link" :href="currentLinks.iot" target="_blank">&nbsp;&nbsp;智聪物联</a>
</h4>
<div v-show="mobileShow" class="zui-rightcol" @click="openMenu">目录</div>

View File

@@ -27,25 +27,29 @@
margin: 0;
display: flex;
align-items: center;
gap: 8px;
gap: 12px;
}
.@{prefix}-logo-text a{
color: var(--color-text);
text-decoration: none;
margin: 0;
padding: 10px 18px;
padding: 12px 22px;
font-size: 15px;
font-weight: 600;
background: rgba(53, 163, 186, 0.06);
border-radius: 8px;
transition: all 0.2s ease;
background: rgba(102, 126, 234, 0.08);
border-radius: 10px;
transition: all 0.3s ease;
display: inline-block;
line-height: 1.4;
border: 1px solid transparent;
}
.@{prefix}-logo-text a:hover{
color: #35A3BA;
background: rgba(53, 163, 186, 0.12);
color: #667eea;
background: rgba(102, 126, 234, 0.15);
border-color: rgba(102, 126, 234, 0.2);
text-decoration: none;
transform: translateY(-1px);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
}
.@{prefix}-button{
float: right;
@@ -118,7 +122,7 @@
display: flex;
align-items: center;
justify-content: flex-start;
gap: 8px;
gap: 10px;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
@@ -129,19 +133,21 @@
a {
display: inline-block;
margin: 0;
padding: 6px 10px;
font-size: 11px;
font-weight: 500;
padding: 7px 14px;
font-size: 12px;
font-weight: 600;
color: var(--color-text);
background: rgba(53, 163, 186, 0.08);
border-radius: 6px;
background: rgba(102, 126, 234, 0.1);
border-radius: 8px;
transition: all 0.2s ease;
white-space: nowrap;
flex-shrink: 0;
border: 1px solid rgba(102, 126, 234, 0.15);
}
a:hover, a:active {
background: rgba(53, 163, 186, 0.15);
color: #35A3BA;
background: rgba(102, 126, 234, 0.2);
color: #667eea;
border-color: rgba(102, 126, 234, 0.3);
text-decoration: none;
transform: translateY(-1px);
}
@@ -153,25 +159,49 @@
display: flex !important;
align-items: center;
justify-content: center;
font-size: 12px;
height: 36px;
line-height: 36px;
font-size: 13px;
height: 38px;
line-height: 38px;
margin: 5px 12px 0 auto;
min-width: 50px;
padding: 0 10px;
font-weight: 500;
color: #35A3BA;
background: rgba(53, 163, 186, 0.1);
border: 1.5px solid rgba(53, 163, 186, 0.3);
border-radius: 8px;
min-width: 70px;
padding: 0 16px;
font-weight: 600;
color: #fff;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: none;
border-radius: 10px;
cursor: pointer;
transition: all 0.2s ease;
transition: all 0.3s ease;
order: 2;
box-shadow: 0 3px 12px rgba(102, 126, 234, 0.3);
position: relative;
overflow: hidden;
&::before {
content: '\2630'; // 汉堡菜单图标
margin-right: 6px;
font-size: 16px;
}
&::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
&:hover::after {
left: 100%;
}
}
.@{prefix}-rightcol:active {
background: rgba(53, 163, 186, 0.18);
border-color: rgba(53, 163, 186, 0.4);
transform: scale(0.98);
background: linear-gradient(135deg, #5a6fd9 0%, #684094 100%);
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.35);
transform: scale(0.96);
}
.@{prefix}-logo-line {
display: none;

View File

@@ -14,10 +14,10 @@
<div class="banner-slogans">
<h2 class="vivify popIn delay-100">科学记账&nbsp;&nbsp;量入为出</h2>
<h2 class="vivify popIn delay-200">健康档案&nbsp;&nbsp;守护未来</h2>
<h2 class="vivify popIn delay-300">茅台预约&nbsp;&nbsp;解放双手</h2>
<!-- <h2 class="vivify popIn delay-300">茅台预约&nbsp;&nbsp;解放双手</h2> -->
<h2 class="vivify popIn delay-400">智聪物联&nbsp;&nbsp;万物互联</h2>
</div>
<p class="banner-subtitle vivify popIn delay-500">技术引领&nbsp;&nbsp;服务为基础&nbsp;&nbsp;用户核心&nbsp;&nbsp;需求导向</p>
<p class="banner-subtitle vivify popIn delay-500">技术引领&nbsp;&nbsp;服务一流&nbsp;&nbsp;用户核心&nbsp;&nbsp;需求导向</p>
</div>
</div>
<div class="nav clear">
@@ -36,24 +36,24 @@
<h4>专业&nbsp;&nbsp;准确&nbsp;&nbsp;高效</h4>
</a>
<a class="imaotai vivify popIn delay-400" @click="goToService('imaotai')">
<div class="watermark purple">预约</div>
<div class="watermark purple">物联</div>
<logo type="plus"></logo>
<logo class="mobile" type="mplus"></logo>
<h3>茅台预约得力助手</h3>
<h4>自动预约&nbsp;&nbsp;后顾无忧</h4>
<h3>智聪物联万物互联</h3>
<h4>互联万物&nbsp;&nbsp;智慧生活</h4>
</a>
<a class="iot vivify popIn delay-600" @click="goToService('iot')">
<!-- <a class="iot vivify popIn delay-600" @click="goToService('iot')">
<div class="watermark orange">物联</div>
<logo type="iot"></logo>
<logo class="mobile" type="miot"></logo>
<h3>智聪物联万物互联</h3>
<h4>互联万物&nbsp;&nbsp;智慧生活</h4>
</a>
</a> -->
</div>
<div class="service">
<div class="service-content">
<h1>记账专家&nbsp;健康帮手&nbsp;预约助手&nbsp;万物互联</h1>
<h3>满足您的记账需求&nbsp;健康记录&nbsp;茅台预约&nbsp;物联网建设</h3>
<h1>记账专家&nbsp;健康帮手&nbsp;万物互联</h1>
<h3>满足您的记账需求&nbsp;健康记录&nbsp;物联网建设</h3>
<div class="service-highlight">
<span class="highlight-icon"></span>
<span class="highlight-text">无需下载永久免费</span>
@@ -80,13 +80,13 @@
<p class="zui-card__desc">满足健康档案记录需求</p>
</div>
</li>
<li class="zui-card" @click="goToService('imaotai')">
<!-- <li class="zui-card" @click="goToService('imaotai')">
<div class="zui-card__media"><img :src="imaotai" alt="茅台预约" loading="lazy" decoding="async" width="96" height="96"></div>
<div class="zui-card__body">
<h4 class="zui-card__title">茅台预约</h4>
<p class="zui-card__desc">提供安全高效自动预约</p>
</div>
</li>
</li> -->
<li class="zui-card" @click="goToService('iot')">
<div class="zui-card__media"><img :src="intcIot" alt="产品服务" loading="lazy" decoding="async" width="96" height="96"></div>
<div class="zui-card__body">
@@ -113,9 +113,9 @@
<h4>
健康档案管理服务
</h4>
<h4>
<!-- <h4>
i茅台预约服务
</h4>
</h4> -->
<h4>
物联网平台建设服务
</h4>
@@ -214,9 +214,10 @@
margin: 0 auto;
padding: 0;
display: grid;
grid-template-columns: repeat(4, minmax(200px, 250px));
gap: 25px;
max-width: 1200px;
grid-template-columns: repeat(3, minmax(240px, 300px));
gap: 30px;
max-width: 1100px;
justify-content: center;
}
.zui-card {
@@ -224,19 +225,19 @@
flex-direction: column;
align-items: center;
text-align: center;
padding: 28px 18px;
padding: 35px 25px;
border: 2px solid transparent;
border-radius: 16px;
border-radius: 18px;
background: #fff;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
min-height: 240px;
box-shadow: 0 6px 25px rgba(0,0,0,0.08);
min-height: 280px;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
/* 移除遮盖 */
padding-left: 18px !important;
padding-left: 25px !important;
position: relative !important;
&::before {
@@ -245,15 +246,15 @@
top: 0;
left: 0;
right: 0;
height: 3px;
height: 4px;
background: linear-gradient(90deg, #35A3BA, #6AC2B5);
transform: scaleX(0);
transition: transform 0.3s ease;
}
&:hover {
transform: translateY(-6px);
box-shadow: 0 12px 35px rgba(53, 163, 186, 0.18);
transform: translateY(-8px);
box-shadow: 0 15px 40px rgba(53, 163, 186, 0.2);
border-color: rgba(53, 163, 186, 0.3);
&::before {
@@ -267,15 +268,15 @@
}
.zui-card__media {
width: 120px;
height: 120px;
margin-bottom: 18px;
width: 140px;
height: 140px;
margin-bottom: 22px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(53, 163, 186, 0.05), rgba(106, 194, 181, 0.05));
border-radius: 18px;
padding: 8px;
border-radius: 20px;
padding: 10px;
}
.zui-card__media img {
@@ -286,21 +287,21 @@
top: auto !important;
left: auto !important;
object-fit: contain;
border-radius: 16px;
border-radius: 18px;
transition: all 0.3s ease;
}
.zui-card__title {
margin: 12px 0 8px;
font-size: 18px;
margin: 12px 0 10px;
font-size: 20px;
color: #1f2a37;
font-weight: 600;
font-weight: 700;
}
.zui-card__desc {
font-size: 13px;
font-size: 14px;
color: #666;
line-height: 1.5;
line-height: 1.6;
}
}

View File

@@ -33,7 +33,7 @@
<h3>免费使用</h3>
</div>
</div>
<p class="flow-desc">满足您的记账需求健康记录茅台预约物联网建设</p>
<p class="flow-desc">满足您的记账需求健康记录物联网建设</p>
</div>
<div class="contact-cards">

View File

@@ -19,7 +19,7 @@
<div class="service">
<h2>下载专区</h2>
<p class="service-desc">满足您的记账需求健康记录茅台预约</p>
<p class="service-desc">满足您的记账需求健康记录</p>
</div>
<div class="features">
@@ -73,31 +73,6 @@
</div>
</div>
</li>
<li class="zui-card">
<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 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" download>
<span class="btn-icon">📱</span>
<span>安卓APP下载</span>
</a>
<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" download>
<span class="btn-icon">📖</span>
<span>使用手册</span>
</a>
</div>
</div>
</li>
</ul>
</div>
<zui-footer/>
@@ -468,11 +443,14 @@ download(type) {
.card-icon-wrapper {
flex: 0 0 auto;
width: 100%;
padding: 25px;
border-radius: 20px 20px 0 0;
}
.card-content {
padding: 25px 20px;
border-radius: 0 0 20px 20px;
}
.zui-card__title {
@@ -519,16 +497,21 @@ download(type) {
}
.card-icon-wrapper {
width: 100%;
padding: 20px;
border-radius: 16px 16px 0 0;
text-align: center;
}
.zui-card__media {
width: 90px;
height: 90px;
margin: 0 auto;
}
.card-content {
padding: 20px 15px;
border-radius: 0 0 16px 16px;
}
.zui-card__title {