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
2026-01-01 16:52:18 +08:00
parent 142fe7abce
commit 24d21d8910
5 changed files with 107 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Header.vue
View File

@@ -5,7 +5,7 @@
<h4 class="zui-logo-text"> <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.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.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> <a class="zui-nav-link" :href="currentLinks.iot" target="_blank">&nbsp;&nbsp;智聪物联</a>
</h4> </h4>
<div v-show="mobileShow" class="zui-rightcol" @click="openMenu">◄目录►</div> <div v-show="mobileShow" class="zui-rightcol" @click="openMenu">◄目录►</div>

90
src/components/less/header.less
View File

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

71
src/views/HomePage.vue
View File

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

2
src/views/callus.vue
View File

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

35
src/views/resource.vue
View File

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