fix: 页面优化样式。
This commit is contained in:
tianyongbao
BIN
src/assets/img/wxgzh.jpg
Normal file
BIN
src/assets/img/wxgzh.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
BIN
src/assets/img/zckj.jpg
Normal file
BIN
src/assets/img/zckj.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 95 KiB |
@@ -1,29 +1,47 @@
|
||||
@import "./mixin";
|
||||
|
||||
.@{prefix}-button{
|
||||
position: relative;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
line-height: 40px;
|
||||
height: 40px;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(135deg, #35A3BA 0%, #0ea5b7 100%);
|
||||
border-radius: 10px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border: none;
|
||||
min-width: 100px;
|
||||
padding: 0 20px;
|
||||
box-shadow: 0 2px 8px rgba(53, 163, 186, 0.25);
|
||||
transition: all .2s ease;
|
||||
padding: 0 24px;
|
||||
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
overflow: hidden;
|
||||
.cursor();
|
||||
|
||||
// 光晕效果
|
||||
&::before {
|
||||
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::before {
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.@{prefix}-button:hover{
|
||||
background: linear-gradient(135deg, #3db0c8 0%, #12b0c3 100%);
|
||||
box-shadow: 0 4px 12px rgba(53, 163, 186, 0.35);
|
||||
transform: translateY(-1px);
|
||||
background: linear-gradient(135deg, #7689f0 0%, #8558b0 100%);
|
||||
box-shadow: 0 6px 25px rgba(102, 126, 234, 0.4);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.@{prefix}-button:active{
|
||||
background: linear-gradient(135deg, #2d96aa 0%, #0c98a8 100%);
|
||||
box-shadow: 0 2px 6px rgba(53, 163, 186, 0.3);
|
||||
background: linear-gradient(135deg, #5a6fd9 0%, #684094 100%);
|
||||
box-shadow: 0 2px 10px rgba(102, 126, 234, 0.35);
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
@@ -3,9 +3,27 @@
|
||||
.@{prefix}-footer {
|
||||
width: 100%;
|
||||
min-height: 125px;
|
||||
background: #646464;
|
||||
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #7e22ce 100%);
|
||||
padding: 40px 0 0 0;
|
||||
border-top: 1px solid rgba(255,255,255,0.25);
|
||||
border-top: 1px solid rgba(255,255,255,0.1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
// 动态网格背景
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image:
|
||||
linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
|
||||
background-size: 40px 40px;
|
||||
animation: gridMove 20s linear infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
.links {
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
@@ -44,6 +62,8 @@
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 0 16px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.footer-qrcode img {
|
||||
display: block;
|
||||
@@ -52,6 +72,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes gridMove {
|
||||
0% { transform: translate(0, 0); }
|
||||
100% { transform: translate(40px, 40px); }
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.@{prefix}-footer {
|
||||
padding: 25px 15px 15px 15px;
|
||||
|
||||
@@ -118,18 +118,26 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 12px;
|
||||
gap: 8px;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scrollbar-width: none;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
a {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 6px 12px;
|
||||
font-size: 12px;
|
||||
padding: 6px 10px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: var(--color-text);
|
||||
background: rgba(53, 163, 186, 0.08);
|
||||
border-radius: 6px;
|
||||
transition: all 0.2s ease;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
a:hover, a:active {
|
||||
background: rgba(53, 163, 186, 0.15);
|
||||
|
||||
@@ -57,39 +57,59 @@
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
background: rgba(0, 0, 0, 0.65);
|
||||
backdrop-filter: blur(4px);
|
||||
z-index: 99998;
|
||||
animation: fadeIn 0.2s ease;
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
.zui-drawer {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 75%;
|
||||
max-width: 280px;
|
||||
max-width: 300px;
|
||||
height: 100vh;
|
||||
background: #fff;
|
||||
box-shadow: -4px 0 20px rgba(0, 0, 0, 0.2);
|
||||
background: linear-gradient(180deg, #ffffff 0%, #f8f9fc 100%);
|
||||
box-shadow: -8px 0 30px rgba(102, 126, 234, 0.15);
|
||||
z-index: 99999;
|
||||
padding: 20px;
|
||||
animation: slideInRight 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
padding: 24px 20px;
|
||||
animation: slideInRight 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
overflow-y: auto;
|
||||
border-left: 3px solid transparent;
|
||||
border-image: linear-gradient(180deg, #667eea, #764ba2) 1;
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
@keyframes slideInRight {
|
||||
from { transform: translateX(100%); }
|
||||
to { transform: translateX(0); }
|
||||
from {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.zui-drawer__header {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 2px solid #35A3BA;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 25px;
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 3px solid transparent;
|
||||
border-image: linear-gradient(90deg, #667eea, #764ba2) 1;
|
||||
color: #1f2a37;
|
||||
letter-spacing: 0.5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
&::before {
|
||||
content: '☰';
|
||||
font-size: 22px;
|
||||
color: #667eea;
|
||||
}
|
||||
}
|
||||
.zui-drawer__list {
|
||||
list-style: none;
|
||||
@@ -97,23 +117,43 @@
|
||||
padding: 0;
|
||||
}
|
||||
.zui-drawer__list li {
|
||||
padding: 14px 12px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
position: relative;
|
||||
padding: 15px 16px;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: #1f2a37;
|
||||
transition: all 0.2s ease;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 4px;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border-radius: 12px;
|
||||
margin-bottom: 8px;
|
||||
cursor: pointer;
|
||||
background: rgba(102, 126, 234, 0.03);
|
||||
border: 1px solid transparent;
|
||||
|
||||
&::before {
|
||||
content: '▸';
|
||||
position: absolute;
|
||||
left: -5px;
|
||||
opacity: 0;
|
||||
color: #667eea;
|
||||
font-size: 12px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
.zui-drawer__list li:hover {
|
||||
background: linear-gradient(135deg, #35A3BA 0%, #0ea5b7 100%);
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
transform: translateX(-2px);
|
||||
border-bottom: 1px solid transparent;
|
||||
transform: translateX(5px);
|
||||
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
|
||||
border-color: transparent;
|
||||
|
||||
&::before {
|
||||
left: 8px;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.zui-drawer__list li:active {
|
||||
transform: scale(0.98);
|
||||
transform: translateX(5px) scale(0.98);
|
||||
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.25);
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.zui-page {
|
||||
|
||||
@@ -8,46 +8,41 @@
|
||||
</template>
|
||||
</zui-header>
|
||||
<div class="banner vivify fadeIn">
|
||||
<h1 class="vivify popIn">
|
||||
<span class="br"></span>科学记账 量入为出
|
||||
</h1>
|
||||
<br>
|
||||
<h1 class="vivify popIn">
|
||||
<span class="br"></span>健康档案 守护未来
|
||||
</h1>
|
||||
<br>
|
||||
<h1 class="vivify popIn">
|
||||
<span class="br"></span>茅台预约 解放双手
|
||||
</h1><br>
|
||||
<h1 class="vivify popIn">
|
||||
<span class="br"></span>智聪物联 万物互联
|
||||
</h1>
|
||||
<h3 class="vivify popIn">技术引领 服务为基础 用户为核心 需求为导向</h3>
|
||||
<div class="banner-overlay"></div>
|
||||
<div class="banner-content">
|
||||
<!-- <h1 class="vivify popIn">智聪网络科技</h1> -->
|
||||
<div class="banner-slogans">
|
||||
<h2 class="vivify popIn delay-100">科学记账 量入为出</h2>
|
||||
<h2 class="vivify popIn delay-200">健康档案 守护未来</h2>
|
||||
<h2 class="vivify popIn delay-300">茅台预约 解放双手</h2>
|
||||
<h2 class="vivify popIn delay-400">智聪物联 万物互联</h2>
|
||||
</div>
|
||||
<p class="banner-subtitle vivify popIn delay-500">技术引领 服务为基础 用户为核心 需求为导向</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav clear">
|
||||
<a class="health vivify popIn delay-200">
|
||||
<div class="watermark green">记账</div>
|
||||
<logo type="hr"></logo>
|
||||
<logo class="mobile" type="mhr"></logo>
|
||||
<a class="zhichou vivify popIn" @click="goToService('accounting')">
|
||||
<div class="watermark blue">记账</div>
|
||||
<logo type="zhongtai"></logo>
|
||||
<logo class="mobile" type="mzhichou"></logo>
|
||||
<h3>解决个人记账难题</h3>
|
||||
<h4>好用 易用 免费</h4>
|
||||
</a>
|
||||
<a class="zhichou vivify popIn">
|
||||
<div class="watermark blue">服务</div>
|
||||
<logo type="zhongtai"></logo>
|
||||
<logo class="mobile" type="mzhichou"></logo>
|
||||
<a class="health vivify popIn delay-200" @click="goToService('health')">
|
||||
<div class="watermark green">健康</div>
|
||||
<logo type="hr"></logo>
|
||||
<logo class="mobile" type="mhr"></logo>
|
||||
<h3>健康档案管理专家</h3>
|
||||
<h4>专业 准确 高效</h4>
|
||||
</a>
|
||||
|
||||
<a class="imaotai vivify popIn delay-400">
|
||||
<a class="imaotai vivify popIn delay-400" @click="goToService('imaotai')">
|
||||
<div class="watermark purple">预约</div>
|
||||
<logo type="plus"></logo>
|
||||
<logo class="mobile" type="mplus"></logo>
|
||||
<h3>茅台预约得力助手</h3>
|
||||
<h4>自动预约 后顾无忧</h4>
|
||||
</a>
|
||||
<a class="iot vivify popIn delay-600">
|
||||
<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>
|
||||
@@ -56,40 +51,43 @@
|
||||
</a>
|
||||
</div>
|
||||
<div class="service">
|
||||
<h1>
|
||||
记账专家、健康帮手、预约助手、物联万物
|
||||
</h1>
|
||||
<h3>
|
||||
满足您的记账需求、健康记录、茅台预约、物联平台
|
||||
</h3>
|
||||
<h4 style="color: red;">
|
||||
无需下载，永久免费！
|
||||
</h4>
|
||||
<div class="service-content">
|
||||
<h1>记账专家 健康帮手 预约助手 万物互联</h1>
|
||||
<h3>满足您的记账需求 健康记录 茅台预约 物联网建设</h3>
|
||||
<div class="service-highlight">
|
||||
<span class="highlight-icon">✨</span>
|
||||
<span class="highlight-text">无需下载，永久免费！</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="features">
|
||||
<div class="features-header">
|
||||
<h2>核心功能</h2>
|
||||
<p>专业、高效、易用的服务平台</p>
|
||||
</div>
|
||||
<ul class="zui-card-list">
|
||||
<li class="zui-card">
|
||||
<li class="zui-card" @click="goToService('accounting')">
|
||||
<div class="zui-card__media"><img :src="Invest" 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 class="zui-card">
|
||||
<li class="zui-card" @click="goToService('health')">
|
||||
<div class="zui-card__media"><img :src="Health" 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 class="zui-card">
|
||||
<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 class="zui-card">
|
||||
<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">
|
||||
<h4 class="zui-card__title">智聪物联</h4>
|
||||
@@ -103,12 +101,25 @@
|
||||
<img class="mobile" :src="mcompanyLogo"/>
|
||||
</div> -->
|
||||
<div class="apply-hr">
|
||||
<div class="apply-hr-content">
|
||||
<h2>
|
||||
智聪网络科技 技术领先 想您所想
|
||||
<!-- <span class="apply-title">智聪网络科技</span> -->
|
||||
<span class="apply-tag">技术领先</span>
|
||||
<span class="apply-tag">想您所想</span>
|
||||
</h2>
|
||||
<h4>
|
||||
提供个人资产记账、健康档案管理、i茅台预约服务、物联平台服务
|
||||
提供个人资产记账服务
|
||||
</h4>
|
||||
<h4>
|
||||
健康档案管理服务
|
||||
</h4>
|
||||
<h4>
|
||||
i茅台预约服务
|
||||
</h4>
|
||||
<h4>
|
||||
物联网平台建设服务
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
<zui-footer/>
|
||||
</page>
|
||||
@@ -154,6 +165,22 @@
|
||||
}else{
|
||||
this.$router.push({path:'/'})
|
||||
}
|
||||
},
|
||||
goToService: function(type) {
|
||||
const links = {
|
||||
accounting: this.isMobile ? 'http://investh5.qdintc.com' : 'http://invest.qdintc.com',
|
||||
health: this.isMobile ? 'http://healthh5.qdintc.com' : 'http://health.qdintc.com',
|
||||
imaotai: this.isMobile ? 'http://imaotaih5.qdintc.com' : 'http://imaotai.qdintc.com',
|
||||
iot: '#' // 物联平台链接，暂时未开放
|
||||
}
|
||||
if(links[type] && links[type] !== '#') {
|
||||
window.open(links[type], '_blank')
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isMobile() {
|
||||
return Util.os.android || Util.os.iPhone || Util.os.mobile || Util.os.isapp || Util.os.harmonyOS
|
||||
}
|
||||
}
|
||||
|
||||
@@ -161,100 +188,181 @@
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.features {
|
||||
background: linear-gradient(180deg, #def0ef 0%, #f5fbfc 100%);
|
||||
padding: 50px 0;
|
||||
background: linear-gradient(180deg, #f8fffe 0%, #edf7f7 100%);
|
||||
padding: 50px 20px 60px;
|
||||
|
||||
.features-header {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
|
||||
h2 {
|
||||
font-size: 42px;
|
||||
color: #35A3BA;
|
||||
margin: 0 0 15px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 18px;
|
||||
color: #666;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.zui-card-list {
|
||||
list-style: none;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(220px, 1fr));
|
||||
gap: 24px;
|
||||
grid-template-columns: repeat(4, minmax(200px, 250px));
|
||||
gap: 25px;
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.zui-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
border: 1px solid rgba(255,255,255,0.45);
|
||||
padding: 28px 18px;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 16px;
|
||||
background: rgba(255,255,255,0.75);
|
||||
box-shadow: var(--shadow-1);
|
||||
background: #fff;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
|
||||
min-height: 240px;
|
||||
/* override legacy list item rules */
|
||||
padding-left: 0 !important;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
/* 移除遮盖 */
|
||||
padding-left: 18px !important;
|
||||
position: relative !important;
|
||||
backdrop-filter: saturate(180%) blur(8px);
|
||||
transition: transform var(--transition-fast) ease, box-shadow var(--transition-fast) ease;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, #35A3BA, #6AC2B5);
|
||||
transform: scaleX(0);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
.zui-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-2);
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-6px);
|
||||
box-shadow: 0 12px 35px rgba(53, 163, 186, 0.18);
|
||||
border-color: rgba(53, 163, 186, 0.3);
|
||||
|
||||
&::before {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
.zui-card__media img {
|
||||
transform: scale(1.08) rotate(3deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.zui-card__media {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
margin-bottom: 12px;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
margin-bottom: 18px;
|
||||
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;
|
||||
}
|
||||
|
||||
.zui-card__media img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
/* override legacy absolute positioning */
|
||||
position: static !important;
|
||||
top: auto !important;
|
||||
left: auto !important;
|
||||
object-fit: cover;
|
||||
border-radius: 14px;
|
||||
filter: drop-shadow(0 6px 12px rgba(0,0,0,0.15));
|
||||
object-fit: contain;
|
||||
border-radius: 16px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.zui-card__title {
|
||||
margin: 10px 0 6px 0;
|
||||
font-size: 16px;
|
||||
color: var(--color-text);
|
||||
margin: 12px 0 8px;
|
||||
font-size: 18px;
|
||||
color: #1f2a37;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.zui-card__desc {
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.features .zui-card-list {
|
||||
.features {
|
||||
.features-header h2 {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.zui-card-list {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
padding: 0 20px;
|
||||
gap: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.features {
|
||||
padding: 30px 15px !important;
|
||||
padding: 40px 15px 50px !important;
|
||||
|
||||
.features-header {
|
||||
margin-bottom: 30px;
|
||||
|
||||
h2 {
|
||||
font-size: 28px;
|
||||
}
|
||||
.features .zui-card-list {
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.zui-card-list {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 16px;
|
||||
gap: 20px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.features .zui-card {
|
||||
min-height: 200px;
|
||||
padding: 16px !important;
|
||||
|
||||
.zui-card {
|
||||
min-height: 240px;
|
||||
padding: 25px 20px !important;
|
||||
}
|
||||
.features .zui-card__media {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
|
||||
.zui-card__media {
|
||||
width: 130px;
|
||||
height: 130px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.features .zui-card__media img {
|
||||
width: 70px !important;
|
||||
height: 70px !important;
|
||||
|
||||
.zui-card__media img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.features .zui-card__title {
|
||||
font-size: 15px !important;
|
||||
|
||||
.zui-card__title {
|
||||
font-size: 18px !important;
|
||||
}
|
||||
|
||||
.zui-card__desc {
|
||||
font-size: 13px !important;
|
||||
}
|
||||
.features .zui-card__desc {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -7,40 +7,65 @@
|
||||
<zui-button @click="onButtonClick('home')">首页</zui-button>
|
||||
</template>
|
||||
</zui-header>
|
||||
<div class="service">
|
||||
<h1>
|
||||
联系我们->注册账号->免费使用
|
||||
</h1>
|
||||
<h3>
|
||||
满足您的记账需求、健康记录、茅台预约
|
||||
</h3>
|
||||
|
||||
<div class="contact-banner">
|
||||
<div class="banner-overlay"></div>
|
||||
<div class="banner-content">
|
||||
<h1 class="vivify popIn">联系我们</h1>
|
||||
<p class="banner-subtitle vivify popIn delay-100">随时为您提供专业的咨询服务</p>
|
||||
</div>
|
||||
<div class="features">
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<img :src="feature1"/>
|
||||
<h4>微信公众号</h4>
|
||||
</br>
|
||||
<p>intc126 智聪PL</p>
|
||||
</li>
|
||||
<li>
|
||||
<img :src="feature2"/>
|
||||
<h4>智聪网络科技客服</h4></br>
|
||||
<p>客服电话：17753252359</p>
|
||||
<p>智聪网络科技微信：intcqd</p>
|
||||
<p>智聪记账客服微信：qdintc126</p>
|
||||
<p>智聪健康客服微信：intchealth</p>
|
||||
</li>
|
||||
<li>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
<!-- <div style="display: flex;justify-content: center; align-items: center;margin-top:-210px;margin-left:320px;">
|
||||
<img src ="../assets/img/qrcode.png" width="270" height="155">
|
||||
</div> -->
|
||||
|
||||
</div>
|
||||
|
||||
<div class="contact-flow">
|
||||
<div class="flow-content">
|
||||
<div class="flow-item vivify popIn">
|
||||
<div class="flow-number">1</div>
|
||||
<h3>联系我们</h3>
|
||||
</div>
|
||||
<div class="flow-arrow">→</div>
|
||||
<div class="flow-item vivify popIn delay-100">
|
||||
<div class="flow-number">2</div>
|
||||
<h3>注册账号</h3>
|
||||
</div>
|
||||
<div class="flow-arrow">→</div>
|
||||
<div class="flow-item vivify popIn delay-200">
|
||||
<div class="flow-number">3</div>
|
||||
<h3>免费使用</h3>
|
||||
</div>
|
||||
</div>
|
||||
<p class="flow-desc">满足您的记账需求、健康记录、茅台预约、物联网建设</p>
|
||||
</div>
|
||||
|
||||
<div class="contact-cards">
|
||||
<div class="contact-card vivify popIn">
|
||||
<h3>微信公众号</h3>
|
||||
<div class="card-divider"></div>
|
||||
<div class="qrcode-section single">
|
||||
<div class="qrcode-item">
|
||||
<div class="qrcode-image">
|
||||
<img :src="wxgzh" alt="公众号二维码"/>
|
||||
</div>
|
||||
<p>智聪PL</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-tip">扫码关注，获取更多资讯</div>
|
||||
</div>
|
||||
|
||||
<div class="contact-card vivify popIn delay-100">
|
||||
<h3>联系方式</h3>
|
||||
<div class="card-divider"></div>
|
||||
<div class="qrcode-section single">
|
||||
<div class="qrcode-item">
|
||||
<div class="qrcode-image">
|
||||
<img :src="zckj" alt="客服微信二维码"/>
|
||||
</div>
|
||||
<p>客服微信</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-tip">客服电话：17753252359</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<zui-footer/>
|
||||
</page>
|
||||
</template>
|
||||
@@ -55,6 +80,8 @@
|
||||
import feature2 from '../assets/img/feature2.png'
|
||||
import feature3 from '../assets/img/feature3.png'
|
||||
import feature4 from '../assets/img/feature4.png'
|
||||
import wxgzh from '../assets/img/wxgzh.jpg'
|
||||
import zckj from '../assets/img/zckj.jpg'
|
||||
import Util from '../Util'
|
||||
export default{
|
||||
components: {Page, Logo, ZuiHeader, ZuiFooter,ZuiButton},
|
||||
@@ -64,6 +91,8 @@
|
||||
feature2: feature2,
|
||||
feature3: feature3,
|
||||
feature4: feature4,
|
||||
wxgzh: wxgzh,
|
||||
zckj: zckj,
|
||||
carouselPerPage: (Util.os.android || Util.os.iPhone|| Util.os.wechat|| Util.os.mobile|| Util.os.isapp|| Util.os.harmonyOS) ? 1 : 2
|
||||
}
|
||||
},
|
||||
@@ -82,38 +111,388 @@
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
@media (max-width: 600px) {
|
||||
.service {
|
||||
padding: 30px 15px !important;
|
||||
// 联系我们 Banner
|
||||
.contact-banner {
|
||||
position: relative;
|
||||
min-height: 300px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
|
||||
.banner-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image:
|
||||
linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
|
||||
background-size: 40px 40px;
|
||||
animation: gridMove 15s linear infinite;
|
||||
}
|
||||
.service h1 {
|
||||
font-size: 20px !important;
|
||||
line-height: 28px !important;
|
||||
|
||||
.banner-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
|
||||
h1 {
|
||||
font-size: 48px;
|
||||
font-weight: 700;
|
||||
margin: 0 0 20px;
|
||||
text-shadow: 0 4px 20px rgba(0,0,0,0.3);
|
||||
letter-spacing: 4px;
|
||||
}
|
||||
.service h3 {
|
||||
font-size: 15px !important;
|
||||
line-height: 22px !important;
|
||||
|
||||
.banner-subtitle {
|
||||
font-size: 20px;
|
||||
opacity: 0.95;
|
||||
margin: 0;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
.features {
|
||||
padding: 25px 15px !important;
|
||||
}
|
||||
.features ul {
|
||||
max-width: 100% !important;
|
||||
padding: 0 10px !important;
|
||||
}
|
||||
.features ul li {
|
||||
margin-top: 20px !important;
|
||||
padding-left: 50px !important;
|
||||
|
||||
// 流程区域
|
||||
.contact-flow {
|
||||
padding: 60px 20px;
|
||||
background: linear-gradient(180deg, #f8fffe 0%, #fff 100%);
|
||||
|
||||
.flow-content {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 30px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.flow-item {
|
||||
text-align: center;
|
||||
|
||||
.flow-number {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin: 0 auto 15px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 12px 30px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 20px;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.flow-arrow {
|
||||
font-size: 30px;
|
||||
color: #667eea;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.flow-desc {
|
||||
text-align: center;
|
||||
margin-top: 40px;
|
||||
font-size: 18px;
|
||||
color: #666;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
// 联系卡片
|
||||
.contact-cards {
|
||||
padding: 60px 20px 80px;
|
||||
background: #f8f9fa;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 40px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.contact-card {
|
||||
width: 100%;
|
||||
max-width: 450px;
|
||||
background: #fff;
|
||||
border-radius: 20px;
|
||||
padding: 40px 30px;
|
||||
box-shadow: 0 10px 40px rgba(0,0,0,0.08);
|
||||
transition: all 0.3s ease;
|
||||
border: 2px solid transparent;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 15px 50px rgba(102, 126, 234, 0.15);
|
||||
border-color: rgba(102, 126, 234, 0.2);
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 0 auto 25px;
|
||||
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
|
||||
border-radius: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
color: #333;
|
||||
margin: 0 0 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.card-divider {
|
||||
width: 60px;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, #667eea, #764ba2);
|
||||
margin: 0 auto 25px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.card-info {
|
||||
p {
|
||||
font-size: 16px;
|
||||
line-height: 2;
|
||||
margin: 10px 0;
|
||||
color: #555;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
|
||||
.label {
|
||||
color: #667eea;
|
||||
font-weight: 600;
|
||||
min-width: 100px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.qrcode-section {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 25px;
|
||||
margin: 25px 0;
|
||||
padding: 20px 0;
|
||||
border-top: 1px dashed rgba(102, 126, 234, 0.2);
|
||||
|
||||
// 单个二维码样式
|
||||
&.single .qrcode-item .qrcode-placeholder {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
}
|
||||
|
||||
&.single .qrcode-item .qrcode-image {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
.qrcode-item {
|
||||
flex: 0 0 auto;
|
||||
text-align: center;
|
||||
|
||||
.qrcode-placeholder {
|
||||
width: 130px;
|
||||
height: 130px;
|
||||
margin: 0 auto 10px;
|
||||
background: linear-gradient(135deg, rgba(102, 126, 234, 0.05), rgba(118, 75, 162, 0.05));
|
||||
border: 2px dashed rgba(102, 126, 234, 0.3);
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
span {
|
||||
color: #667eea;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
padding: 8px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(135deg, rgba(102, 126, 234, 0.08), rgba(118, 75, 162, 0.08));
|
||||
border-color: rgba(102, 126, 234, 0.5);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
.qrcode-image {
|
||||
width: 130px;
|
||||
height: 130px;
|
||||
margin: 0 auto 10px;
|
||||
padding: 8px;
|
||||
background: #fff;
|
||||
border: 2px solid rgba(102, 126, 234, 0.2);
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: rgba(102, 126, 234, 0.5);
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
color: #667eea;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-tip {
|
||||
margin-top: 25px;
|
||||
padding: 12px 20px;
|
||||
background: linear-gradient(135deg, rgba(102, 126, 234, 0.08), rgba(118, 75, 162, 0.08));
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
color: #667eea;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes gridMove {
|
||||
0% { transform: translate(0, 0); }
|
||||
100% { transform: translate(40px, 40px); }
|
||||
}
|
||||
|
||||
// 响应式优化
|
||||
@media (max-width: 768px) {
|
||||
.contact-banner {
|
||||
min-height: 250px;
|
||||
|
||||
.banner-content h1 {
|
||||
font-size: 36px;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.banner-content .banner-subtitle {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-flow {
|
||||
padding: 40px 15px;
|
||||
|
||||
.flow-content {
|
||||
gap: 20px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.flow-item .flow-number {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.flow-item h3 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.flow-arrow {
|
||||
font-size: 28px;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.flow-desc {
|
||||
font-size: 15px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-cards {
|
||||
padding: 40px 15px 60px;
|
||||
gap: 25px;
|
||||
|
||||
.contact-card {
|
||||
max-width: 100%;
|
||||
padding: 30px 20px;
|
||||
|
||||
.card-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
|
||||
img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.card-info p {
|
||||
font-size: 14px;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
.label {
|
||||
min-width: auto;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.qrcode-section {
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
|
||||
.qrcode-item .qrcode-placeholder {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
|
||||
span {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.features ul li img {
|
||||
width: 40px !important;
|
||||
}
|
||||
.features ul li h4 {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
.features ul li p {
|
||||
font-size: 13px !important;
|
||||
line-height: 1.6 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,38 +2,82 @@
|
||||
overflow-x: hidden;
|
||||
.banner {
|
||||
text-align: center;
|
||||
padding: 180px 20px;
|
||||
padding: 200px 20px 180px;
|
||||
background: url('../img/zhichou-banner.jpg') center no-repeat;
|
||||
background-size: cover;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
&:before {
|
||||
content: '';
|
||||
min-height: 500px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
// 增强的渐变遮罩
|
||||
.banner-overlay {
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background: linear-gradient(180deg, rgba(13,38,56,0.00) 0%, rgba(13,38,56,0.35) 100%);
|
||||
background: linear-gradient(135deg,
|
||||
rgba(13,38,56,0.75) 0%,
|
||||
rgba(53,163,186,0.6) 50%,
|
||||
rgba(13,38,56,0.75) 100%);
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
img {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
|
||||
.banner-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
position: absolute;
|
||||
}
|
||||
padding: 40px 30px;
|
||||
background: rgba(13, 38, 56, 0.4);
|
||||
border-radius: 20px;
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
|
||||
h1 {
|
||||
color: #fff;
|
||||
font-size: 42px;
|
||||
margin: 0;
|
||||
text-shadow: 0 2px 12px rgba(0,0,0,0.25);
|
||||
font-size: 56px;
|
||||
font-weight: 700;
|
||||
margin: 0 0 40px;
|
||||
text-shadow: 0 4px 20px rgba(0,0,0,0.4);
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
h3 {
|
||||
|
||||
.banner-slogans {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
gap: 15px;
|
||||
margin: 30px 0;
|
||||
|
||||
h2 {
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
margin-top: 28px;
|
||||
text-shadow: 0 1px 6px rgba(0,0,0,0.2);
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
padding: 12px 20px;
|
||||
background: rgba(255,255,255,0.15);
|
||||
border-radius: 8px;
|
||||
backdrop-filter: blur(10px);
|
||||
text-shadow: 0 2px 8px rgba(0,0,0,0.3);
|
||||
transition: all 0.3s ease;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255,255,255,0.25);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.banner-subtitle {
|
||||
color: rgba(255,255,255,0.95);
|
||||
font-size: 18px;
|
||||
margin-top: 40px;
|
||||
text-shadow: 0 2px 10px rgba(0,0,0,0.3);
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav {
|
||||
@@ -53,8 +97,14 @@
|
||||
padding: 60px 0 40px 0;
|
||||
border: 1px solid #32ADC6;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border-radius: 12px;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
|
||||
.watermark {
|
||||
color: #fff !important;
|
||||
}
|
||||
@@ -147,40 +197,212 @@
|
||||
margin: 30px 0 165px 0;
|
||||
}
|
||||
.service {
|
||||
padding: 72px 0;
|
||||
padding: 50px 20px 40px;
|
||||
text-align: center;
|
||||
background: linear-gradient(180deg, #f8fffe 0%, #fff 100%);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
// 背景装饰
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 800px;
|
||||
height: 800px;
|
||||
background: radial-gradient(circle, rgba(53, 163, 186, 0.03) 0%, transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.service-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #6AC2B5;
|
||||
font-size: 52px;
|
||||
line-height: 70px;
|
||||
color: #35A3BA;
|
||||
font-size: 38px;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: #000;
|
||||
font-size: 40px;
|
||||
margin-top: 15px;
|
||||
color: #666;
|
||||
font-size: 20px;
|
||||
margin-top: 20px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
h4 {
|
||||
font-size: 29px;
|
||||
line-height: 32px;
|
||||
font-weight: normal;
|
||||
|
||||
.service-highlight {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-top: 40px;
|
||||
padding: 16px 32px;
|
||||
background: linear-gradient(135deg, #FF6B35 0%, #FF8C61 100%);
|
||||
border-radius: 50px;
|
||||
box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
.highlight-icon {
|
||||
font-size: 24px;
|
||||
animation: sparkle 2s infinite;
|
||||
}
|
||||
|
||||
.highlight-text {
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sparkle {
|
||||
0%, 100% { transform: scale(1); opacity: 1; }
|
||||
50% { transform: scale(1.2); opacity: 0.8; }
|
||||
}
|
||||
|
||||
.apply-hr {
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
background: #6AC2B5;
|
||||
padding: 49px 0 50px 0;
|
||||
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #7e22ce 100%);
|
||||
padding: 60px 20px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
// 动态网格背景
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image:
|
||||
linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
|
||||
background-size: 50px 50px;
|
||||
animation: gridMove 20s linear infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// 发光圆圈装饰
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, transparent 70%);
|
||||
border-radius: 50%;
|
||||
animation: pulse 4s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.apply-hr-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 39px;
|
||||
font-size: 42px;
|
||||
margin: 0;
|
||||
line-height: 1.6;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
|
||||
.apply-title {
|
||||
font-weight: 700;
|
||||
letter-spacing: 3px;
|
||||
text-shadow: 0 0 20px rgba(139, 92, 246, 0.5), 0 0 40px rgba(139, 92, 246, 0.3);
|
||||
background: linear-gradient(90deg, #fff 0%, #e0e7ff 50%, #fff 100%);
|
||||
background-size: 200% auto;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
animation: shimmer 3s linear infinite;
|
||||
}
|
||||
|
||||
.apply-tag {
|
||||
display: inline-block;
|
||||
padding: 8px 24px;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border-radius: 25px;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(139, 92, 246, 0.4);
|
||||
box-shadow: 0 4px 15px rgba(139, 92, 246, 0.2),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
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 {
|
||||
background: rgba(139, 92, 246, 0.25);
|
||||
border-color: rgba(139, 92, 246, 0.6);
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
||||
|
||||
&::before {
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 29px;
|
||||
font-weight: normal;
|
||||
margin-top: 20px;
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
margin-top: 25px;
|
||||
opacity: 0.9;
|
||||
letter-spacing: 1.5px;
|
||||
line-height: 1.8;
|
||||
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes gridMove {
|
||||
0% { transform: translate(0, 0); }
|
||||
100% { transform: translate(50px, 50px); }
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
|
||||
50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.8; }
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% { background-position: 0% center; }
|
||||
100% { background-position: 200% center; }
|
||||
}
|
||||
.features {
|
||||
background: #DEF0EF;
|
||||
padding: 50px 0;
|
||||
@@ -216,18 +438,33 @@
|
||||
overflow-x: hidden;
|
||||
width: 100%;
|
||||
.banner {
|
||||
padding: 60px 15px;
|
||||
padding: 80px 15px 60px;
|
||||
min-height: 400px;
|
||||
|
||||
.banner-content {
|
||||
padding: 30px 20px;
|
||||
margin: 0 10px;
|
||||
|
||||
h1 {
|
||||
font-size: 20px;
|
||||
line-height: 1.4;
|
||||
.br {
|
||||
display: block;
|
||||
font-size: 32px;
|
||||
margin: 0 0 25px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.banner-slogans {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
|
||||
h2 {
|
||||
font-size: 18px;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
}
|
||||
h3 {
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
margin-top: 15px;
|
||||
|
||||
.banner-subtitle {
|
||||
font-size: 14px;
|
||||
margin-top: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav {
|
||||
@@ -279,19 +516,29 @@
|
||||
margin: 0 0 30px 0;
|
||||
}
|
||||
.service{
|
||||
padding: 30px 15px;
|
||||
padding: 40px 15px;
|
||||
|
||||
h1{
|
||||
font-size: 22px;
|
||||
line-height: 32px;
|
||||
font-size: 20px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
h3{
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font-size: 15px;
|
||||
line-height: 1.5;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.service-highlight {
|
||||
margin-top: 30px;
|
||||
padding: 12px 24px;
|
||||
|
||||
.highlight-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.highlight-text {
|
||||
font-size: 16px;
|
||||
}
|
||||
h4{
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
.features{
|
||||
@@ -316,15 +563,28 @@
|
||||
}
|
||||
|
||||
.apply-hr{
|
||||
padding: 25px 15px;
|
||||
padding: 45px 15px;
|
||||
|
||||
h2{
|
||||
font-size: 18px;
|
||||
line-height: 26px;
|
||||
font-size: 24px;
|
||||
line-height: 1.6;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
|
||||
.apply-title {
|
||||
letter-spacing: 2px;
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.apply-tag {
|
||||
font-size: 16px;
|
||||
padding: 6px 20px;
|
||||
}
|
||||
}
|
||||
h4{
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
margin-top: 10px;
|
||||
line-height: 1.8;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
.apply-hr-form{
|
||||
|
||||
@@ -7,47 +7,91 @@
|
||||
<zui-button @click="onButtonClick('home')">首页</zui-button>
|
||||
</template>
|
||||
</zui-header>
|
||||
<div class="service">
|
||||
<h1>
|
||||
安卓APP下载->系统介绍->使用手册
|
||||
</h1>
|
||||
<h3>
|
||||
满足您的记账需求、健康记录、茅台预约
|
||||
</h3>
|
||||
|
||||
<!-- 添加顶部Banner -->
|
||||
<div class="resource-banner">
|
||||
<div class="banner-overlay"></div>
|
||||
<div class="banner-content">
|
||||
<h1>资料下载中心</h1>
|
||||
<p class="banner-subtitle">提供安卓APP、系统介绍、使用手册等完整资料</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="service">
|
||||
<h2>下载专区</h2>
|
||||
<p class="service-desc">满足您的记账需求、健康记录、茅台预约</p>
|
||||
</div>
|
||||
|
||||
<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="zui-card__body">
|
||||
<h4 class="zui-card__title">记账管理平台</h4>
|
||||
<p class="card-desc">专业的个人记账服务平台</p>
|
||||
</div>
|
||||
<div class="zui-card__body">
|
||||
<div class="zui-card__actions">
|
||||
<a class="zui-button-link zui-button-link--primary" href="/static/download/invest/intcInvest-V1.0.apk" target="_blank">安卓APP下载</a>
|
||||
<a class="zui-button-link" href="/static/download/invest/intcInvest-Introduction.pdf" target="_blank">系统介绍</a>
|
||||
<a class="zui-button-link" href="/static/download/invest/intcInvest-Manual.pdf" target="_blank">使用手册</a>
|
||||
<!-- <a class="zui-button-link" href="/static/download/invest/intcInvestH5-Manual.pdf" target="_blank">H5手册</a> -->
|
||||
<a class="zui-button-link zui-button-link--primary" href="/static/download/invest/intcInvest-V1.0.apk" target="_blank">
|
||||
<span class="btn-icon">📱</span>
|
||||
<span>安卓APP下载</span>
|
||||
</a>
|
||||
<a class="zui-button-link" href="/static/download/invest/intcInvest-Introduction.pdf" target="_blank">
|
||||
<span class="btn-icon">📄</span>
|
||||
<span>系统介绍</span>
|
||||
</a>
|
||||
<a class="zui-button-link" href="/static/download/invest/intcInvest-Manual.pdf" target="_blank">
|
||||
<span class="btn-icon">📖</span>
|
||||
<span>使用手册</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</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="zui-card__body">
|
||||
<h4 class="zui-card__title">健康管理平台</h4>
|
||||
<p class="card-desc">健康档案管理专家</p>
|
||||
</div>
|
||||
<div class="zui-card__body">
|
||||
<div class="zui-card__actions">
|
||||
<a class="zui-button-link zui-button-link--primary" href="/static/download/health/intcHealth-V1.0.apk" target="_blank">安卓APP下载</a>
|
||||
<a class="zui-button-link" href="/static/download/health/intcHealth-Introduction.pdf" target="_blank">系统介绍</a>
|
||||
<a class="zui-button-link" href="/static/download/health/intcHealth-Manual.pdf" target="_blank">使用手册</a>
|
||||
<a class="zui-button-link zui-button-link--primary" href="/static/download/health/intcHealth-V1.0.apk" target="_blank">
|
||||
<span class="btn-icon">📱</span>
|
||||
<span>安卓APP下载</span>
|
||||
</a>
|
||||
<a class="zui-button-link" href="/static/download/health/intcHealth-Introduction.pdf" target="_blank">
|
||||
<span class="btn-icon">📄</span>
|
||||
<span>系统介绍</span>
|
||||
</a>
|
||||
<a class="zui-button-link" href="/static/download/health/intcHealth-Manual.pdf" target="_blank">
|
||||
<span class="btn-icon">📖</span>
|
||||
<span>使用手册</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</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="zui-card__body">
|
||||
<h4 class="zui-card__title">茅台预约平台</h4>
|
||||
<p class="card-desc">茅台预约得力助手</p>
|
||||
</div>
|
||||
<div class="zui-card__body">
|
||||
<div class="zui-card__actions">
|
||||
<a class="zui-button-link zui-button-link--primary" href="/static/download/imaotai/intcImaotai-V1.0.apk" target="_blank">安卓APP下载</a>
|
||||
<a class="zui-button-link" href="/static/download/imaotai/intcImaotai-Introduction.pdf" target="_blank">系统介绍</a>
|
||||
<a class="zui-button-link" href="/static/download/imaotai/intcImaotai-Manual.pdf" target="_blank">使用手册</a>
|
||||
<a class="zui-button-link zui-button-link--primary" href="/static/download/imaotai/intcImaotai-V1.0.apk" target="_blank">
|
||||
<span class="btn-icon">📱</span>
|
||||
<span>安卓APP下载</span>
|
||||
</a>
|
||||
<a class="zui-button-link" href="/static/download/imaotai/intcImaotai-Introduction.pdf" target="_blank">
|
||||
<span class="btn-icon">📄</span>
|
||||
<span>系统介绍</span>
|
||||
</a>
|
||||
<a class="zui-button-link" href="/static/download/imaotai/intcImaotai-Manual.pdf" target="_blank">
|
||||
<span class="btn-icon">📖</span>
|
||||
<span>使用手册</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
@@ -138,154 +182,327 @@ download(type) {
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
// Banner区域
|
||||
.resource-banner {
|
||||
position: relative;
|
||||
min-height: 280px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
|
||||
.banner-overlay {
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background-image:
|
||||
linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
|
||||
background-size: 40px 40px;
|
||||
animation: gridMove 15s linear infinite;
|
||||
}
|
||||
|
||||
.banner-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
padding: 40px 20px;
|
||||
|
||||
h1 {
|
||||
font-size: 42px;
|
||||
font-weight: 700;
|
||||
margin: 0 0 15px;
|
||||
text-shadow: 0 4px 20px rgba(0,0,0,0.3);
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
|
||||
.banner-subtitle {
|
||||
font-size: 18px;
|
||||
opacity: 0.95;
|
||||
margin: 0;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes gridMove {
|
||||
0% { transform: translate(0, 0); }
|
||||
100% { transform: translate(40px, 40px); }
|
||||
}
|
||||
|
||||
// Service区域
|
||||
.service {
|
||||
padding: 50px 20px 30px;
|
||||
text-align: center;
|
||||
background: linear-gradient(180deg, #f8fffe 0%, #fff 100%);
|
||||
|
||||
h2 {
|
||||
font-size: 36px;
|
||||
color: #35A3BA;
|
||||
margin: 0 0 15px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.service-desc {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Features区域
|
||||
.features {
|
||||
background: linear-gradient(180deg, #def0ef 0%, #f5fbfc 100%);
|
||||
padding: 50px 0;
|
||||
background: linear-gradient(180deg, #f8fffe 0%, #edf7f7 100%);
|
||||
padding: 40px 20px 60px;
|
||||
|
||||
.zui-card-list {
|
||||
list-style: none;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(280px, 1fr));
|
||||
gap: 24px;
|
||||
max-width: 1200px;
|
||||
grid-template-columns: repeat(3, minmax(300px, 380px));
|
||||
gap: 30px;
|
||||
max-width: 1300px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.zui-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 8px 30px rgba(0,0,0,0.08);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border: 2px solid transparent;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, #35A3BA, #6AC2B5);
|
||||
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);
|
||||
|
||||
&::before {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
.zui-card__media {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.zui-button-link--primary {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 4px 20px rgba(0, 136, 255, 0.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
padding: 35px 25px 25px;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
border: 1px solid rgba(255,255,255,0.45);
|
||||
border-radius: 16px;
|
||||
background: rgba(255,255,255,0.75);
|
||||
box-shadow: var(--shadow-1);
|
||||
backdrop-filter: saturate(180%) blur(8px);
|
||||
min-height: 260px;
|
||||
padding-left: 0 !important;
|
||||
position: relative !important;
|
||||
transition: transform var(--transition-fast) ease, box-shadow var(--transition-fast) ease;
|
||||
background: linear-gradient(180deg, rgba(53, 163, 186, 0.03) 0%, transparent 100%);
|
||||
}
|
||||
.zui-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-2);
|
||||
}
|
||||
.zui-card__media img {
|
||||
|
||||
.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));
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
transition: transform 0.3s ease;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
position: static !important;
|
||||
top: auto !important;
|
||||
left: auto !important;
|
||||
object-fit: cover;
|
||||
object-fit: contain;
|
||||
border-radius: 16px;
|
||||
filter: drop-shadow(0 6px 12px rgba(0,0,0,0.15));
|
||||
filter: drop-shadow(0 4px 10px rgba(0,0,0,0.1));
|
||||
}
|
||||
.zui-card__media {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
margin-right: 0;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.zui-card__title {
|
||||
margin: 0 0 10px;
|
||||
font-size: 20px;
|
||||
color: #1f2a37;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.zui-card__body {
|
||||
padding: 20px 25px 30px;
|
||||
}
|
||||
|
||||
.zui-card__actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.zui-button-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.zui-card__body {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
.zui-card__title {
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
}
|
||||
.zui-card__actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.zui-button-link {
|
||||
display: inline-block;
|
||||
padding: 6px 12px;
|
||||
font-size: 12px;
|
||||
gap: 8px;
|
||||
padding: 12px 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #656b79;
|
||||
background: #f6f8fa;
|
||||
border: 1px solid #c8c8cd;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #e1e4e8;
|
||||
border-radius: 10px;
|
||||
text-decoration: none;
|
||||
min-width: 96px;
|
||||
text-align: center;
|
||||
}
|
||||
.zui-card__title {
|
||||
margin: 10px 0 6px 0;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
.btn-icon {
|
||||
font-size: 18px;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #eef1f4;
|
||||
border-color: #d0d4d9;
|
||||
transform: translateX(3px);
|
||||
}
|
||||
}
|
||||
|
||||
.zui-button-link--primary {
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, #00c2ff, #0088ff);
|
||||
border-color: #0088ff;
|
||||
box-shadow: 0 0 10px rgba(0, 212, 255, .35);
|
||||
}
|
||||
.zui-button-link--primary:hover {
|
||||
border: none;
|
||||
box-shadow: 0 4px 15px rgba(0, 136, 255, 0.25);
|
||||
font-weight: 600;
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(135deg, #00b8ff, #007bff);
|
||||
border-color: #007bff;
|
||||
}
|
||||
|
||||
transform: translateX(3px) scale(1.02);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式设计
|
||||
@media (max-width: 1024px) {
|
||||
.features .zui-card-list {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-columns: repeat(2, minmax(280px, 1fr));
|
||||
padding: 0 20px;
|
||||
gap: 25px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.resource-banner {
|
||||
min-height: 220px;
|
||||
|
||||
.banner-content {
|
||||
padding: 30px 15px;
|
||||
|
||||
h1 {
|
||||
font-size: 28px;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.banner-subtitle {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.service {
|
||||
padding: 30px 15px !important;
|
||||
padding: 40px 15px 25px;
|
||||
|
||||
h2 {
|
||||
font-size: 26px;
|
||||
}
|
||||
.service h1 {
|
||||
font-size: 20px !important;
|
||||
line-height: 28px !important;
|
||||
|
||||
.service-desc {
|
||||
font-size: 14px;
|
||||
}
|
||||
.service h3 {
|
||||
font-size: 15px !important;
|
||||
line-height: 22px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.resource-banner {
|
||||
min-height: 200px;
|
||||
|
||||
.banner-content h1 {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.service {
|
||||
padding: 30px 15px 20px;
|
||||
|
||||
h2 {
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.features {
|
||||
padding: 30px 15px !important;
|
||||
}
|
||||
.features .zui-card-list {
|
||||
padding: 30px 15px 40px;
|
||||
|
||||
.zui-card-list {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 20px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.features .zui-card {
|
||||
min-height: auto;
|
||||
padding: 16px !important;
|
||||
|
||||
.zui-card {
|
||||
border-radius: 16px;
|
||||
}
|
||||
.features .zui-card__media {
|
||||
width: 90px !important;
|
||||
height: 90px !important;
|
||||
|
||||
.card-header {
|
||||
padding: 25px 20px 20px;
|
||||
}
|
||||
.features .zui-card__media img {
|
||||
width: 90px !important;
|
||||
height: 90px !important;
|
||||
|
||||
.zui-card__media {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.features .zui-card__title {
|
||||
font-size: 16px !important;
|
||||
|
||||
.zui-card__title {
|
||||
font-size: 18px;
|
||||
}
|
||||
.features .zui-card__actions {
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
.features .zui-button-link {
|
||||
width: 100%;
|
||||
min-width: auto;
|
||||
padding: 8px 12px;
|
||||
|
||||
.card-desc {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.zui-card__body {
|
||||
padding: 15px 20px 25px;
|
||||
}
|
||||
|
||||
.zui-card__actions {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.zui-button-link {
|
||||
padding: 10px 16px;
|
||||
font-size: 13px;
|
||||
|
||||
.btn-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user