fix: 网站整体样式大改版。
This commit is contained in:
tianyongbao
BIN
src/assets/img/invest - 副本.png
Normal file
BIN
src/assets/img/invest - 副本.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 316 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 316 KiB After Width: | Height: | Size: 1.1 MiB |
@@ -1,41 +1,10 @@
|
||||
<template>
|
||||
<!-- <img alt="zhichou" class="zui-logo" :src="src" @click="onClick"/> -->
|
||||
<img alt="zhichou" class="zui-logo" :src="src" />
|
||||
<span class="zui-case-logo" @click="onClick">
|
||||
<i>{{ serial }}</i>
|
||||
<b>{{ label }}</b>
|
||||
</span>
|
||||
</template>
|
||||
<script>
|
||||
import './less/logo.less'
|
||||
import case1 from './img/case1.png'
|
||||
import case2 from './img/case2.png'
|
||||
import case3 from './img/case3.png'
|
||||
import case4 from './img/case4.png'
|
||||
import case5 from './img/case5.png'
|
||||
import case6 from './img/case6.png'
|
||||
import case7 from './img/case7.png'
|
||||
import case8 from './img/case8.png'
|
||||
import case9 from './img/case9.png'
|
||||
import case10 from './img/case10.png'
|
||||
import case11 from './img/case11.png'
|
||||
import case12 from './img/case12.png'
|
||||
import case13 from './img/case13.png'
|
||||
import case14 from './img/case14.png'
|
||||
import case15 from './img/case15.png'
|
||||
|
||||
import mcase1 from './img/mcase1.png'
|
||||
import mcase2 from './img/mcase2.png'
|
||||
import mcase3 from './img/mcase3.png'
|
||||
import mcase4 from './img/mcase4.png'
|
||||
import mcase5 from './img/mcase5.png'
|
||||
import mcase6 from './img/mcase6.png'
|
||||
import mcase7 from './img/mcase7.png'
|
||||
import mcase8 from './img/mcase8.png'
|
||||
import mcase9 from './img/mcase9.png'
|
||||
import mcase10 from './img/mcase10.png'
|
||||
import mcase11 from './img/mcase11.png'
|
||||
import mcase12 from './img/mcase12.png'
|
||||
import mcase13 from './img/mcase13.png'
|
||||
import mcase14 from './img/mcase14.png'
|
||||
import mcase15 from './img/mcase15.png'
|
||||
|
||||
export default {
|
||||
name: 'CaseLogo',
|
||||
props: {
|
||||
@@ -47,99 +16,12 @@
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
src: function () {
|
||||
if (this.type === 'case1') {
|
||||
return case1
|
||||
}
|
||||
if (this.type === 'case2') {
|
||||
return case2
|
||||
}
|
||||
if (this.type === 'case3') {
|
||||
return case3
|
||||
}
|
||||
if (this.type === 'case4') {
|
||||
return case4
|
||||
}
|
||||
if (this.type === 'case5') {
|
||||
return case5
|
||||
}
|
||||
if (this.type === 'case6') {
|
||||
return case6
|
||||
}
|
||||
if (this.type === 'case7') {
|
||||
return case7
|
||||
}
|
||||
if (this.type === 'case8') {
|
||||
return case8
|
||||
}
|
||||
if (this.type === 'case9') {
|
||||
return case9
|
||||
}
|
||||
if (this.type === 'case10') {
|
||||
return case10
|
||||
}
|
||||
if (this.type === 'case11') {
|
||||
return case11
|
||||
}
|
||||
if (this.type === 'case12') {
|
||||
return case12
|
||||
}
|
||||
if (this.type === 'case13') {
|
||||
return case13
|
||||
}
|
||||
if (this.type === 'case14') {
|
||||
return case14
|
||||
}
|
||||
if (this.type === 'case15') {
|
||||
return case15
|
||||
}
|
||||
|
||||
|
||||
if (this.type === 'mcase1') {
|
||||
return mcase1
|
||||
}
|
||||
if (this.type === 'mcase2') {
|
||||
return mcase2
|
||||
}
|
||||
if (this.type === 'mcase3') {
|
||||
return mcase3
|
||||
}
|
||||
if (this.type === 'mcase4') {
|
||||
return mcase4
|
||||
}
|
||||
if (this.type === 'mcase5') {
|
||||
return mcase5
|
||||
}
|
||||
if (this.type === 'mcase6') {
|
||||
return mcase6
|
||||
}
|
||||
if (this.type === 'mcase7') {
|
||||
return mcase7
|
||||
}
|
||||
if (this.type === 'mcase8') {
|
||||
return mcase8
|
||||
}
|
||||
if (this.type === 'mcase9') {
|
||||
return mcase9
|
||||
}
|
||||
if (this.type === 'mcase10') {
|
||||
return mcase10
|
||||
}
|
||||
if (this.type === 'mcase11') {
|
||||
return mcase11
|
||||
}
|
||||
if (this.type === 'mcase12') {
|
||||
return mcase12
|
||||
}
|
||||
if (this.type === 'mcase13') {
|
||||
return mcase13
|
||||
}
|
||||
if (this.type === 'mcase14') {
|
||||
return mcase14
|
||||
}
|
||||
if (this.type === 'mcase15') {
|
||||
return mcase15
|
||||
}
|
||||
serial: function () {
|
||||
const matched = String(this.type).match(/\d+/)
|
||||
return matched ? matched[0].padStart(2, '0') : '01'
|
||||
},
|
||||
label: function () {
|
||||
return '智聪案例'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -149,3 +31,62 @@
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.zui-case-logo {
|
||||
width: 132px;
|
||||
height: 48px;
|
||||
padding: 0 12px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
color: #eaffff;
|
||||
border: 1px solid rgba(107, 232, 255, .28);
|
||||
border-radius: 8px;
|
||||
background:
|
||||
linear-gradient(rgba(107, 232, 255, .08) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(107, 232, 255, .08) 1px, transparent 1px),
|
||||
rgba(4, 18, 34, .92);
|
||||
background-size: 14px 14px;
|
||||
cursor: pointer;
|
||||
box-shadow: inset 0 0 22px rgba(107, 232, 255, .08);
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -28px;
|
||||
top: 0;
|
||||
width: 44px;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(107, 232, 255, .24), transparent);
|
||||
transform: skewX(-18deg);
|
||||
}
|
||||
|
||||
i,
|
||||
b {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
i {
|
||||
width: 30px;
|
||||
height: 24px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #03111e;
|
||||
border-radius: 6px;
|
||||
background: linear-gradient(135deg, #6be8ff, #8effcf);
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
b {
|
||||
font-size: 13px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,23 +1,64 @@
|
||||
<template>
|
||||
<footer class="zui-footer">
|
||||
<div class="footer-content">
|
||||
<div class="footer-qrcode">
|
||||
<img src="../assets/img/qrcode.png" width="270" height="155" alt="客服二维码">
|
||||
</div>
|
||||
<div class="links">
|
||||
<a href="https://beian.miit.gov.cn/" target="_blank">鲁ICP备2024118666号-1</a>
|
||||
<img src="./img/gongan.png" width="18" height="20" alt="公安图标"> <a href="https://beian.mps.gov.cn/#/query/webSearch?code=37021202001661" rel="noreferrer" target="_blank">鲁公网安备37021202001661</a>
|
||||
<div class="footer-shell">
|
||||
<div class="footer-brand">
|
||||
<img class="footer-logo" src="./img/logo.png" alt="智聪网络科技">
|
||||
<p>专注资产管理、健康档案与物联网平台建设，用稳定易用的多端产品连接真实业务场景。</p>
|
||||
<div class="footer-tags">
|
||||
<span>数字资产</span>
|
||||
<span>健康档案</span>
|
||||
<span>智聪物联</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="copy-right">
|
||||
Copyright 2026 智聪网络科技 .All rights reserved
|
||||
<br>
|
||||
|
||||
</p>
|
||||
<div class="footer-column">
|
||||
<h3>产品矩阵</h3>
|
||||
<a href="http://invest.qdintc.com" target="_blank" rel="noreferrer">记账平台</a>
|
||||
<a href="http://health.qdintc.com" target="_blank" rel="noreferrer">健康档案</a>
|
||||
<a href="http://iot.qdintc.com" target="_blank" rel="noreferrer">智聪物联</a>
|
||||
</div>
|
||||
|
||||
<div class="footer-column">
|
||||
<h3>服务支持</h3>
|
||||
<router-link to="/resource">资料下载</router-link>
|
||||
<router-link to="/callus">联系我们</router-link>
|
||||
<span class="footer-phone">17753252359</span>
|
||||
</div>
|
||||
|
||||
<div class="footer-qr-panel">
|
||||
<h3>扫码连接</h3>
|
||||
<div class="qr-list">
|
||||
<div class="qr-item">
|
||||
<img src="../assets/img/wxgzh.jpg" alt="微信公众号二维码">
|
||||
<span>微信公众号</span>
|
||||
</div>
|
||||
<div class="qr-item">
|
||||
<img src="../assets/img/zckj.jpg" alt="客服微信二维码">
|
||||
<span>智聪客服</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-bottom">
|
||||
<span>Copyright {{ currentYear }} 智聪网络科技 .All rights reserved</span>
|
||||
<div class="record-links">
|
||||
<a href="https://beian.miit.gov.cn/" target="_blank" rel="noreferrer">鲁ICP备2024118666号-1</a>
|
||||
<a href="https://beian.mps.gov.cn/#/query/webSearch?code=37021202001661" target="_blank" rel="noreferrer">
|
||||
<img class="gongan-icon" src="./img/gongan.png" alt="公安备案图标">
|
||||
鲁公网安备37021202001661
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
<script>
|
||||
import './less/footer.less'
|
||||
export default {}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentYear: new Date().getFullYear()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,31 +1,47 @@
|
||||
<template>
|
||||
<div>
|
||||
<header class="zui-header">
|
||||
<div class="zui-header__inner">
|
||||
<div class="zui-brand-mark">
|
||||
<logo type="xiaoyanyun" href="/"></logo>
|
||||
<h4 class="zui-logo-text">
|
||||
<a class="zui-nav-link" :href="currentLinks.accounting" target="_blank"> 记账平台</a>
|
||||
<a class="zui-nav-link" :href="currentLinks.health" target="_blank"> 健康档案</a>
|
||||
<!-- <a class="zui-nav-link" :href="currentLinks.imaotai" target="_blank"> 茅台预约</a> -->
|
||||
<a class="zui-nav-link" :href="currentLinks.iot" target="_blank"> 智聪物联</a>
|
||||
</h4>
|
||||
<div v-show="mobileShow" class="zui-rightcol" @click="openMenu">◄目录►</div>
|
||||
<div v-show="webShow">
|
||||
</div>
|
||||
|
||||
<nav class="zui-logo-text" aria-label="产品导航">
|
||||
<a class="zui-nav-link" :href="currentLinks.accounting" target="_blank" rel="noreferrer">记账平台</a>
|
||||
<a class="zui-nav-link" :href="currentLinks.health" target="_blank" rel="noreferrer">健康档案</a>
|
||||
<a class="zui-nav-link" :href="currentLinks.iot" target="_blank" rel="noreferrer">智聪物联</a>
|
||||
</nav>
|
||||
|
||||
<button v-show="mobileShow" class="zui-rightcol" type="button" @click="openMenu">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
|
||||
<div v-show="webShow" class="zui-header__actions">
|
||||
<slot name="buttons"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 移动端抽屉菜单（移到header外面） -->
|
||||
<div v-show="drawerVisible" class="zui-drawer-overlay" @click="closeMenu"></div>
|
||||
<div v-show="drawerVisible" class="zui-drawer">
|
||||
<div class="zui-drawer__header">菜单</div>
|
||||
<aside v-show="drawerVisible" class="zui-drawer">
|
||||
<div class="zui-drawer__header">智聪科技</div>
|
||||
<ul class="zui-drawer__list">
|
||||
<li @click="navigateTo('/')">首页</li>
|
||||
<li @click="navigateTo('/resource')">资料下载</li>
|
||||
<li @click="navigateTo('/callus')">联系我们</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="zui-drawer__group">产品入口</div>
|
||||
<ul class="zui-drawer__list">
|
||||
<li @click="openService('accounting')">记账平台</li>
|
||||
<li @click="openService('health')">健康档案</li>
|
||||
<li @click="openService('iot')">智聪物联</li>
|
||||
</ul>
|
||||
</aside>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import './less/header.less'
|
||||
import Logo from './Logo'
|
||||
@@ -40,20 +56,18 @@
|
||||
components: {Logo},
|
||||
data () {
|
||||
return {
|
||||
// 统一管理的导航链接
|
||||
navLinks: {
|
||||
// Web端链接
|
||||
web: {
|
||||
accounting: 'http://invest.qdintc.com',
|
||||
health: 'http://health.qdintc.com',
|
||||
imaotai: 'http://imaotai.qdintc.com',
|
||||
iot: 'http://iot.qdintc.com'
|
||||
},
|
||||
// 移动端H5链接
|
||||
mobile: {
|
||||
accounting: 'http://investh5.qdintc.com',
|
||||
health: 'http://healthh5.qdintc.com',
|
||||
imaotai: 'http://imaotaih5.qdintc.com'
|
||||
imaotai: 'http://imaotaih5.qdintc.com',
|
||||
iot: 'http://iot.qdintc.com'
|
||||
}
|
||||
},
|
||||
mobileShow: false,
|
||||
@@ -66,23 +80,15 @@
|
||||
this.init()
|
||||
},
|
||||
computed: {
|
||||
// 根据设备类型返回对应的链接
|
||||
currentLinks () {
|
||||
return this.isMobile ? this.navLinks.mobile : this.navLinks.web
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init () {
|
||||
// 检测是否为移动端
|
||||
this.isMobile = Util.os.android || Util.os.iPhone || Util.os.mobile || Util.os.isapp || Util.os.harmonyOS
|
||||
|
||||
if (this.isMobile) {
|
||||
this.webShow = false
|
||||
this.mobileShow = true
|
||||
} else {
|
||||
this.webShow = true
|
||||
this.mobileShow = false
|
||||
}
|
||||
this.webShow = !this.isMobile
|
||||
this.mobileShow = this.isMobile
|
||||
},
|
||||
openMenu () {
|
||||
this.drawerVisible = true
|
||||
@@ -93,14 +99,19 @@
|
||||
this.$emit('menu-close')
|
||||
},
|
||||
navigateTo (path) {
|
||||
// 使用 Vue Router 的全局路由实例
|
||||
if (this.$router) {
|
||||
this.$router.push({path})
|
||||
} else {
|
||||
// 如果路由不可用，使用原生跳转
|
||||
window.location.href = path
|
||||
}
|
||||
this.closeMenu()
|
||||
},
|
||||
openService (type) {
|
||||
const link = this.currentLinks[type]
|
||||
if (link) {
|
||||
window.open(link, '_blank')
|
||||
}
|
||||
this.closeMenu()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,14 +4,6 @@
|
||||
<script>
|
||||
import './less/logo.less'
|
||||
import logo from './img/logo.png'
|
||||
import zlogo from './img/zlogo.png'
|
||||
import hrLogo from './img/hr-logo.png'
|
||||
import plusLogo from './img/plus-logo.png'
|
||||
import iotLogo from './img/iot-logo.png'
|
||||
import mlogo from './img/m-logo.png'
|
||||
import mhrLogo from './img/m-hr-logo.png'
|
||||
import mplusLogo from './img/m-plus-logo.png'
|
||||
import miotLogo from './img/m-iot-logo.png'
|
||||
export default {
|
||||
name: 'Logo',
|
||||
props: {
|
||||
@@ -24,34 +16,8 @@
|
||||
},
|
||||
computed: {
|
||||
src: function () {
|
||||
if (this.type === 'xiaoyanyun') {
|
||||
return logo
|
||||
}
|
||||
if (this.type === 'zhongtai') {
|
||||
return zlogo
|
||||
}
|
||||
if (this.type === 'mzhichou') {
|
||||
return mlogo
|
||||
}
|
||||
if (this.type === 'hr') {
|
||||
return hrLogo
|
||||
}
|
||||
if (this.type === 'mhr') {
|
||||
return mhrLogo
|
||||
}
|
||||
if (this.type === 'plus') {
|
||||
return plusLogo
|
||||
}
|
||||
if (this.type === 'mplus') {
|
||||
return mplusLogo
|
||||
}
|
||||
if (this.type === 'iot') {
|
||||
return iotLogo
|
||||
}
|
||||
if (this.type === 'miot') {
|
||||
return miotLogo
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onClick: function (e) {
|
||||
|
||||
@@ -2,46 +2,71 @@
|
||||
|
||||
.@{prefix}-button {
|
||||
position: relative;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 40px;
|
||||
min-width: 96px;
|
||||
height: 40px;
|
||||
border-radius: 10px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border: none;
|
||||
min-width: 100px;
|
||||
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);
|
||||
padding: 0 20px;
|
||||
overflow: hidden;
|
||||
color: #dffbff;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 38px;
|
||||
letter-spacing: .4px;
|
||||
border: 1px solid rgba(86, 226, 255, .34);
|
||||
border-radius: 8px;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(12, 43, 66, .78), rgba(6, 18, 36, .9)),
|
||||
linear-gradient(90deg, rgba(72, 225, 255, .18), rgba(130, 255, 209, .12));
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(255, 255, 255, .04) inset,
|
||||
0 12px 28px rgba(0, 0, 0, .24),
|
||||
0 0 22px rgba(55, 213, 255, .12);
|
||||
transition: color .24s ease, border-color .24s ease, box-shadow .24s ease, transform .24s ease, background .24s ease;
|
||||
.cursor();
|
||||
|
||||
// 光晕效果
|
||||
&::before {
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
left: -70%;
|
||||
width: 58%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
||||
transition: left 0.5s ease;
|
||||
background: linear-gradient(90deg, transparent, rgba(143, 242, 255, .32), transparent);
|
||||
transform: skewX(-18deg);
|
||||
transition: left .45s ease;
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
right: 12px;
|
||||
bottom: 5px;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, rgba(120, 240, 255, .72), transparent);
|
||||
opacity: .78;
|
||||
}
|
||||
|
||||
.@{prefix}-button:hover{
|
||||
background: linear-gradient(135deg, #7689f0 0%, #8558b0 100%);
|
||||
box-shadow: 0 6px 25px rgba(102, 126, 234, 0.4);
|
||||
&:hover {
|
||||
color: #ffffff;
|
||||
border-color: rgba(125, 242, 255, .72);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(18, 74, 100, .86), rgba(7, 28, 52, .95)),
|
||||
linear-gradient(90deg, rgba(72, 225, 255, .22), rgba(130, 255, 209, .18));
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(119, 238, 255, .1) inset,
|
||||
0 16px 34px rgba(0, 0, 0, .28),
|
||||
0 0 28px rgba(55, 213, 255, .24);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.@{prefix}-button:active{
|
||||
background: linear-gradient(135deg, #5a6fd9 0%, #684094 100%);
|
||||
box-shadow: 0 2px 10px rgba(102, 126, 234, 0.35);
|
||||
transform: translateY(0);
|
||||
&:hover:before {
|
||||
left: 115%;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(119, 238, 255, .08) inset,
|
||||
0 8px 18px rgba(0, 0, 0, .24);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,15 +2,15 @@
|
||||
|
||||
.@{prefix}-footer {
|
||||
width: 100%;
|
||||
min-height: 125px;
|
||||
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #7e22ce 100%);
|
||||
padding: 40px 0 0 0;
|
||||
border-top: 1px solid rgba(255,255,255,0.1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
color: #b9d7e4;
|
||||
background:
|
||||
radial-gradient(circle at 18% 0%, rgba(70, 219, 255, .12), transparent 28%),
|
||||
linear-gradient(180deg, #061321 0%, #020812 100%);
|
||||
border-top: 1px solid rgba(91, 226, 255, .18);
|
||||
|
||||
// 动态网格背景
|
||||
&::before {
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@@ -18,110 +18,245 @@
|
||||
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;
|
||||
linear-gradient(rgba(91, 226, 255, .028) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(91, 226, 255, .028) 1px, transparent 1px);
|
||||
background-size: 44px 44px;
|
||||
opacity: .75;
|
||||
}
|
||||
.links {
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
a {
|
||||
color: #fff;
|
||||
|
||||
&:after {
|
||||
content: '|';
|
||||
margin: 0 10px;
|
||||
}
|
||||
&:last-child:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, rgba(117, 240, 255, .78), transparent);
|
||||
}
|
||||
&:hover {
|
||||
color: #35A3BA;
|
||||
&:after {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
br {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.copy-right {
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
margin: 8px 0 0 0;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.footer-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 0 16px;
|
||||
|
||||
.footer-shell {
|
||||
width: calc(100% - 56px);
|
||||
max-width: 1240px;
|
||||
margin: 0 auto;
|
||||
padding: 58px 0 38px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(280px, 1.45fr) minmax(120px, .55fr) minmax(130px, .55fr) 300px;
|
||||
gap: 34px;
|
||||
align-items: start;
|
||||
}
|
||||
.footer-qrcode img {
|
||||
display: block;
|
||||
max-width: 270px;
|
||||
|
||||
.footer-brand {
|
||||
max-width: 430px;
|
||||
}
|
||||
|
||||
.footer-logo {
|
||||
width: 250px;
|
||||
height: auto;
|
||||
display: block;
|
||||
filter: brightness(0) invert(1) drop-shadow(0 0 14px rgba(113, 239, 255, .38));
|
||||
}
|
||||
|
||||
.footer-brand p {
|
||||
margin: 22px 0 0;
|
||||
color: #93acbc;
|
||||
font-size: 14px;
|
||||
line-height: 1.9;
|
||||
}
|
||||
|
||||
.footer-tags {
|
||||
margin-top: 22px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
|
||||
span {
|
||||
height: 30px;
|
||||
padding: 0 12px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
border: 1px solid rgba(91, 226, 255, .18);
|
||||
border-radius: 8px;
|
||||
color: #bff5ff;
|
||||
background: rgba(255, 255, 255, .04);
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes gridMove {
|
||||
0% { transform: translate(0, 0); }
|
||||
100% { transform: translate(40px, 40px); }
|
||||
.footer-column {
|
||||
padding-top: 10px;
|
||||
|
||||
h3 {
|
||||
margin: 0 0 18px;
|
||||
color: #f4feff;
|
||||
font-size: 16px;
|
||||
letter-spacing: .5px;
|
||||
}
|
||||
|
||||
a,
|
||||
.footer-phone {
|
||||
display: block;
|
||||
margin-top: 12px;
|
||||
color: #93acbc;
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
transition: color .2s ease, transform .2s ease;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #72eeff;
|
||||
transform: translateX(3px);
|
||||
}
|
||||
|
||||
.footer-phone {
|
||||
color: #d7f7ff;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-qr-panel {
|
||||
padding: 20px;
|
||||
border: 1px solid rgba(91, 226, 255, .16);
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(145deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .025));
|
||||
box-shadow: 0 18px 54px rgba(0, 0, 0, .22);
|
||||
|
||||
h3 {
|
||||
margin: 0 0 16px;
|
||||
color: #f4feff;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.qr-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.qr-item {
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
background: rgba(4, 13, 28, .7);
|
||||
border: 1px solid rgba(91, 226, 255, .12);
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
aspect-ratio: 1;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
border-radius: 6px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
margin-top: 9px;
|
||||
color: #c8edf6;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
width: calc(100% - 56px);
|
||||
max-width: 1240px;
|
||||
margin: 0 auto;
|
||||
padding: 18px 0 24px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 18px;
|
||||
border-top: 1px solid rgba(91, 226, 255, .12);
|
||||
color: #7897a8;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.record-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
|
||||
a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
color: #a8c8d6;
|
||||
text-decoration: none;
|
||||
transition: color .2s ease;
|
||||
|
||||
&:hover {
|
||||
color: #72eeff;
|
||||
}
|
||||
}
|
||||
|
||||
.gongan-icon {
|
||||
width: 18px;
|
||||
height: 20px;
|
||||
display: inline-block;
|
||||
flex: 0 0 auto;
|
||||
object-fit: contain;
|
||||
filter: drop-shadow(0 0 8px rgba(114, 238, 255, .22));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.@{prefix}-footer {
|
||||
.footer-shell {
|
||||
grid-template-columns: 1.2fr .8fr;
|
||||
}
|
||||
|
||||
.footer-qr-panel {
|
||||
grid-column: span 2;
|
||||
max-width: 360px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.@{prefix}-footer {
|
||||
padding: 25px 15px 15px 15px;
|
||||
.footer-content {
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
padding: 0;
|
||||
.footer-shell {
|
||||
width: calc(100% - 32px);
|
||||
padding: 44px 0 28px;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 28px;
|
||||
}
|
||||
.footer-qrcode {
|
||||
|
||||
.footer-brand {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.footer-logo {
|
||||
width: 220px;
|
||||
}
|
||||
|
||||
.footer-column {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.footer-qr-panel {
|
||||
grid-column: auto;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
width: calc(100% - 32px);
|
||||
flex-direction: column-reverse;
|
||||
align-items: flex-start;
|
||||
padding: 18px 0 22px;
|
||||
}
|
||||
|
||||
.record-links {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
.footer-qrcode img {
|
||||
width: 200px !important;
|
||||
max-width: 200px;
|
||||
height: auto !important;
|
||||
margin: 0 auto 10px;
|
||||
}
|
||||
.links {
|
||||
width: 100%;
|
||||
padding: 0 5px;
|
||||
a {
|
||||
display: inline-block;
|
||||
margin: 0 3px;
|
||||
padding: 4px 6px;
|
||||
font-size: 11px;
|
||||
line-height: 1.6;
|
||||
border-radius: 4px;
|
||||
&:after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
br {
|
||||
display: block;
|
||||
}
|
||||
img {
|
||||
width: 14px !important;
|
||||
height: 16px !important;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
.copy-right {
|
||||
font-size: 11px;
|
||||
padding: 10px 5px;
|
||||
line-height: 1.5;
|
||||
justify-content: flex-start;
|
||||
gap: 10px 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,208 +2,226 @@
|
||||
|
||||
.@{prefix}-header {
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
background: rgba(255,255,255,0.95);
|
||||
backdrop-filter: saturate(180%) blur(12px);
|
||||
box-shadow: 0 4px 14px rgba(16,24,40,0.08);
|
||||
height: 76px;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
.float-clear;
|
||||
.@{prefix}-logo{
|
||||
width: 300px;
|
||||
height: 70px;
|
||||
margin: 0 0 0 10px;
|
||||
float: left;
|
||||
color: #e8fbff;
|
||||
background:
|
||||
radial-gradient(circle at 18% 0%, rgba(70, 219, 255, .12), transparent 30%),
|
||||
linear-gradient(180deg, #061321 0%, #020812 100%);
|
||||
border-bottom: 1px solid rgba(91, 226, 255, .14);
|
||||
box-shadow: 0 16px 46px rgba(0, 0, 0, .28);
|
||||
backdrop-filter: blur(12px);
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, rgba(85, 228, 255, .82), transparent);
|
||||
opacity: .36;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
pointer-events: none;
|
||||
background-image:
|
||||
linear-gradient(rgba(91, 226, 255, .024) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(91, 226, 255, .024) 1px, transparent 1px);
|
||||
background-size: 44px 44px;
|
||||
opacity: .36;
|
||||
}
|
||||
|
||||
.@{prefix}-header__inner {
|
||||
width: calc(100% - 44px);
|
||||
max-width: 1240px;
|
||||
height: 76px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 28px;
|
||||
}
|
||||
|
||||
.@{prefix}-brand-mark {
|
||||
width: 232px;
|
||||
height: 62px;
|
||||
margin: 0;
|
||||
flex: 0 0 auto;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
transition: transform .24s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
}
|
||||
|
||||
.@{prefix}-logo {
|
||||
width: 232px;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
display: block;
|
||||
object-fit: contain;
|
||||
filter: brightness(0) invert(1) drop-shadow(0 0 14px rgba(113, 239, 255, .38));
|
||||
opacity: 1;
|
||||
transition: filter .24s ease, opacity .24s ease, transform .24s ease;
|
||||
|
||||
&:hover {
|
||||
filter: brightness(0) invert(1) drop-shadow(0 0 18px rgba(113, 239, 255, .52));
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
}
|
||||
|
||||
.@{prefix}-logo-text {
|
||||
float: left;
|
||||
height: 70px;
|
||||
color: #36A4BB;
|
||||
font-size: 16px;
|
||||
line-height: 70px;
|
||||
text-align: center;
|
||||
height: 44px;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
gap: 10px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.@{prefix}-logo-text a {
|
||||
color: var(--color-text);
|
||||
position: relative;
|
||||
height: 38px;
|
||||
padding: 0 16px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
color: #c7eef6;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 38px;
|
||||
text-decoration: none;
|
||||
margin: 0;
|
||||
padding: 12px 22px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
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;
|
||||
white-space: nowrap;
|
||||
border: 1px solid rgba(105, 226, 255, .26);
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(180deg, rgba(15, 49, 74, .64), rgba(5, 21, 39, .72));
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, .08),
|
||||
0 10px 24px rgba(0, 0, 0, .12);
|
||||
transition: color .22s ease, border-color .22s ease, background .22s ease, transform .22s ease, box-shadow .22s ease;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
margin-right: 8px;
|
||||
border-radius: 50%;
|
||||
background: #48e1ff;
|
||||
box-shadow: 0 0 12px rgba(72, 225, 255, .9);
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
right: 12px;
|
||||
bottom: 4px;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, rgba(122, 243, 255, .65), transparent);
|
||||
opacity: 0;
|
||||
transition: opacity .22s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.@{prefix}-logo-text a:hover {
|
||||
color: #667eea;
|
||||
background: rgba(102, 126, 234, 0.15);
|
||||
border-color: rgba(102, 126, 234, 0.2);
|
||||
color: #fff;
|
||||
border-color: rgba(122, 243, 255, .7);
|
||||
background: linear-gradient(180deg, rgba(20, 75, 105, .78), rgba(7, 33, 57, .88));
|
||||
text-decoration: none;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
|
||||
box-shadow: 0 12px 30px rgba(25, 187, 226, .14);
|
||||
|
||||
&:after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.@{prefix}-header__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.@{prefix}-button {
|
||||
float: right;
|
||||
line-height: 40px;
|
||||
height: 40px;
|
||||
margin: 15px 8px 0 0;
|
||||
min-width: 90px;
|
||||
margin: 0;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.@{prefix}-rightcol {
|
||||
width: 46px;
|
||||
height: 40px;
|
||||
margin-left: auto;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
border: 1px solid rgba(105, 226, 255, .36);
|
||||
border-radius: 8px;
|
||||
background: rgba(10, 36, 58, .78);
|
||||
box-shadow: 0 0 24px rgba(72, 225, 255, .16);
|
||||
cursor: pointer;
|
||||
|
||||
span {
|
||||
width: 20px;
|
||||
height: 2px;
|
||||
display: block;
|
||||
background: #dffbff;
|
||||
box-shadow: 0 0 10px rgba(72, 225, 255, .7);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1120px) {
|
||||
.@{prefix}-header {
|
||||
.@{prefix}-logo-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.@{prefix}-logo-line {
|
||||
width: 1px;
|
||||
height: 35px;
|
||||
top: 18px;
|
||||
left: 10px;
|
||||
float: left;
|
||||
position: relative;
|
||||
background: #32adc6;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) and (min-width: 769px) {
|
||||
.@{prefix}-header{
|
||||
.@{prefix}-logo-text{
|
||||
display: none !important;
|
||||
}
|
||||
.@{prefix}-rightcol {
|
||||
display: flex !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1025px) {
|
||||
.@{prefix}-header{
|
||||
.@{prefix}-rightcol{
|
||||
display: none !important;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.@{prefix}-header {
|
||||
height: 100px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
padding: 10px 0;
|
||||
background: rgba(255,255,255,0.98);
|
||||
box-shadow: 0 2px 12px rgba(16,24,40,0.1);
|
||||
.zui-logo{
|
||||
height: 45px;
|
||||
width: 200px;
|
||||
max-width: calc(100% - 100px);
|
||||
margin: 0 0 0 12px;
|
||||
order: 1;
|
||||
}
|
||||
.@{prefix}-logo-text{
|
||||
display: block !important;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
line-height: 20px;
|
||||
font-size: 12px;
|
||||
margin: 0;
|
||||
padding: 0 12px;
|
||||
order: 3;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 10px;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scrollbar-width: none;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
a {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 7px 14px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
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(102, 126, 234, 0.2);
|
||||
color: #667eea;
|
||||
border-color: rgba(102, 126, 234, 0.3);
|
||||
text-decoration: none;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
}
|
||||
.@{prefix}-button{
|
||||
display: none !important;
|
||||
}
|
||||
.@{prefix}-rightcol{
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 13px;
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
margin: 5px 12px 0 auto;
|
||||
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.3s ease;
|
||||
order: 2;
|
||||
box-shadow: 0 3px 12px rgba(102, 126, 234, 0.3);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: 88px;
|
||||
|
||||
&::before {
|
||||
content: '\2630'; // 汉堡菜单图标
|
||||
margin-right: 6px;
|
||||
font-size: 16px;
|
||||
.@{prefix}-header__inner {
|
||||
width: calc(100% - 28px);
|
||||
height: 88px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
&::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;
|
||||
.@{prefix}-brand-mark {
|
||||
width: 202px;
|
||||
height: 58px;
|
||||
}
|
||||
|
||||
&:hover::after {
|
||||
left: 100%;
|
||||
.@{prefix}-logo {
|
||||
width: 202px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.@{prefix}-rightcol:active {
|
||||
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 {
|
||||
|
||||
.@{prefix}-header__actions {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
.zui-logo {
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
@import './reset.less';
|
||||
|
||||
:root {
|
||||
--color-bg: #edf7f7;
|
||||
--color-text: #1f2a37;
|
||||
--color-bg: #030914;
|
||||
--color-text: #e8fbff;
|
||||
--color-accent: #35A3BA;
|
||||
--color-accent-strong: #0ea5b7;
|
||||
--space-1: 4px;
|
||||
@@ -20,7 +20,7 @@
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
margin: 0 auto;
|
||||
padding-top: 70px;
|
||||
padding-top: 76px;
|
||||
font-family: "微软雅黑", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
background: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
@@ -57,7 +57,7 @@
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.65);
|
||||
background: rgba(0, 0, 0, 0.72);
|
||||
backdrop-filter: blur(4px);
|
||||
z-index: 99998;
|
||||
animation: fadeIn 0.3s ease;
|
||||
@@ -66,17 +66,16 @@
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 75%;
|
||||
width: 78%;
|
||||
max-width: 300px;
|
||||
height: 100vh;
|
||||
background: linear-gradient(180deg, #ffffff 0%, #f8f9fc 100%);
|
||||
box-shadow: -8px 0 30px rgba(102, 126, 234, 0.15);
|
||||
background: linear-gradient(180deg, #071827 0%, #020812 100%);
|
||||
box-shadow: -12px 0 42px rgba(0, 0, 0, .38);
|
||||
z-index: 99999;
|
||||
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;
|
||||
border-left: 1px solid rgba(91, 226, 255, .28);
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
@@ -97,20 +96,29 @@
|
||||
font-weight: 700;
|
||||
margin-bottom: 25px;
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 3px solid transparent;
|
||||
border-image: linear-gradient(90deg, #667eea, #764ba2) 1;
|
||||
color: #1f2a37;
|
||||
border-bottom: 1px solid rgba(91, 226, 255, .22);
|
||||
color: #e8fbff;
|
||||
letter-spacing: 0.5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
&::before {
|
||||
content: '☰';
|
||||
font-size: 22px;
|
||||
color: #667eea;
|
||||
content: '';
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #48e1ff;
|
||||
box-shadow: 0 0 14px rgba(72, 225, 255, .8);
|
||||
}
|
||||
}
|
||||
.zui-drawer__group {
|
||||
margin: 22px 0 10px;
|
||||
color: #6bdff2;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
.zui-drawer__list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
@@ -121,30 +129,32 @@
|
||||
padding: 15px 16px;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: #1f2a37;
|
||||
color: #cdebf3;
|
||||
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;
|
||||
background: rgba(255, 255, 255, .04);
|
||||
border: 1px solid rgba(91, 226, 255, .12);
|
||||
|
||||
&::before {
|
||||
content: '▸';
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -5px;
|
||||
opacity: 0;
|
||||
color: #667eea;
|
||||
font-size: 12px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: #48e1ff;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
.zui-drawer__list li:hover {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
background: linear-gradient(135deg, rgba(11, 79, 105, .88), rgba(5, 45, 72, .96));
|
||||
color: #fff;
|
||||
transform: translateX(5px);
|
||||
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
|
||||
border-color: transparent;
|
||||
box-shadow: 0 8px 22px rgba(31, 194, 231, .18);
|
||||
border-color: rgba(91, 226, 255, .36);
|
||||
|
||||
&::before {
|
||||
left: 8px;
|
||||
@@ -158,7 +168,7 @@
|
||||
@media (max-width: 600px) {
|
||||
.zui-page {
|
||||
overflow-x: hidden;
|
||||
padding-top: 100px;
|
||||
padding-top: 88px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
|
||||
@@ -1,166 +1,263 @@
|
||||
<template>
|
||||
<page class="home-page">
|
||||
<page class="site-page home-page">
|
||||
<zui-header>
|
||||
<template #buttons>
|
||||
<zui-button @click="onButtonClick('callus')">联系我们</zui-button>
|
||||
<zui-button @click="onButtonClick('resource')">资料下载</zui-button>
|
||||
<zui-button @click="onButtonClick('home')">首页</zui-button>
|
||||
<zui-button @click="onButtonClick('resource')">资料下载</zui-button>
|
||||
<zui-button @click="onButtonClick('callus')">联系我们</zui-button>
|
||||
</template>
|
||||
</zui-header>
|
||||
<div class="banner vivify fadeIn">
|
||||
<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>
|
||||
|
||||
<section class="hero-section">
|
||||
<div class="tech-grid"></div>
|
||||
<div class="scan-line"></div>
|
||||
<div class="hero-shell">
|
||||
<div class="hero-copy">
|
||||
<div class="eyebrow">INTC DIGITAL INTELLIGENCE</div>
|
||||
<h1>智聪网络科技</h1>
|
||||
<p class="hero-lead">以资产数据、健康档案、物联网运营为核心，构建从个人生活到城市设备的数字化能力矩阵。</p>
|
||||
<div class="hero-actions">
|
||||
<button class="action-primary" type="button" @click="goToService('iot')">探索智聪物联</button>
|
||||
<button class="action-secondary" type="button" @click="onButtonClick('resource')">查看资料中心</button>
|
||||
</div>
|
||||
<p class="banner-subtitle vivify popIn delay-500">技术引领 服务一流 用户核心 需求导向</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav clear">
|
||||
<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="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" @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" @click="goToService('iot')">
|
||||
<div class="watermark orange">物联</div>
|
||||
<logo type="iot"></logo>
|
||||
<logo class="mobile" type="miot"></logo>
|
||||
<h3>智聪物联万物互联</h3>
|
||||
<h4>互联万物 智慧生活</h4>
|
||||
</a> -->
|
||||
</div>
|
||||
<div class="service">
|
||||
<div class="service-content">
|
||||
<h1>记账专家 健康帮手 万物互联</h1>
|
||||
<h3>满足您的记账需求 健康记录 物联网建设</h3>
|
||||
<div class="service-highlight">
|
||||
<span class="highlight-icon">✨</span>
|
||||
<span class="highlight-text">无需下载，永久免费！</span>
|
||||
<div class="metric-strip">
|
||||
<div v-for="item in metrics" :key="item.label">
|
||||
<strong>{{ item.value }}</strong>
|
||||
<span>{{ item.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="features">
|
||||
<div class="features-header">
|
||||
<h2>核心功能</h2>
|
||||
<p>专业、高效、易用的服务平台</p>
|
||||
|
||||
<div class="hero-console">
|
||||
<div class="console-frame">
|
||||
<div class="console-head">
|
||||
<span></span><span></span><span></span>
|
||||
<b>INTC OPS CENTER</b>
|
||||
</div>
|
||||
<ul class="zui-card-list">
|
||||
<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 class="command-layout">
|
||||
<div class="ops-map">
|
||||
<div class="ops-ring ring-one"></div>
|
||||
<div class="ops-ring ring-two"></div>
|
||||
<div class="ops-line line-one"></div>
|
||||
<div class="ops-line line-two"></div>
|
||||
<div class="ops-line line-three"></div>
|
||||
<div class="ops-core">
|
||||
<b>IoT</b>
|
||||
<span>智能物联中枢</span>
|
||||
</div>
|
||||
</li>
|
||||
<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 v-for="node in iotNodes" :key="node.label" class="ops-node" :class="node.className">
|
||||
<span>{{ node.label }}</span>
|
||||
<strong>{{ node.value }}</strong>
|
||||
</div>
|
||||
</li>
|
||||
<!-- <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" @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>
|
||||
<p class="zui-card__desc">打造万物互联的统一平台</p>
|
||||
|
||||
<div class="status-rail">
|
||||
<div v-for="item in consoleStatus" :key="item.label" class="status-tile">
|
||||
<span>{{ item.label }}</span>
|
||||
<strong>{{ item.value }}</strong>
|
||||
<i></i>
|
||||
</div>
|
||||
</li>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="telemetry-panel">
|
||||
<div class="telemetry-title">
|
||||
<span>实时数据流</span>
|
||||
<strong>DATA STREAM</strong>
|
||||
</div>
|
||||
<div class="signal-board">
|
||||
<div v-for="item in signalBars" :key="item" :style="{ height: item + '%' }"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="module-dock">
|
||||
<div v-for="item in moduleDock" :key="item.title">
|
||||
<span>{{ item.code }}</span>
|
||||
<strong>{{ item.title }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section-block service-block">
|
||||
<div class="section-title">
|
||||
<span>CORE MATRIX</span>
|
||||
<h2>三大业务引擎，统一智聪生态</h2>
|
||||
<p>让资产、健康与设备运营数据在同一品牌体验下持续沉淀、联动、增长。</p>
|
||||
</div>
|
||||
<div class="service-grid">
|
||||
<article v-for="item in capabilities" :key="item.type" class="tech-card" @click="goToService(item.type)">
|
||||
<div class="tech-card__media">
|
||||
<div class="service-orbit" :class="'service-orbit--' + item.type">
|
||||
<span class="orbit-halo orbit-halo--outer"></span>
|
||||
<span class="orbit-halo orbit-halo--inner"></span>
|
||||
<div class="service-glyph">
|
||||
<span class="glyph-mark">{{ item.glyph }}</span>
|
||||
<span class="glyph-line glyph-line--one"></span>
|
||||
<span class="glyph-line glyph-line--two"></span>
|
||||
<span class="glyph-line glyph-line--three"></span>
|
||||
<span class="glyph-node glyph-node--one"></span>
|
||||
<span class="glyph-node glyph-node--two"></span>
|
||||
<span class="glyph-node glyph-node--three"></span>
|
||||
</div>
|
||||
<span class="orbit-caption">{{ item.iconCode }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tech-card__body">
|
||||
<span>{{ item.code }}</span>
|
||||
<h3>{{ item.title }}</h3>
|
||||
<p>{{ item.desc }}</p>
|
||||
<ul>
|
||||
<li v-for="point in item.points" :key="point">{{ point }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- <div class="customer-case-logo">
|
||||
<img :src="companyLogo"/>
|
||||
<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>
|
||||
提供个人资产记账服务
|
||||
</h4>
|
||||
<h4>
|
||||
健康档案管理服务
|
||||
</h4>
|
||||
<!-- <h4>
|
||||
i茅台预约服务
|
||||
</h4> -->
|
||||
<h4>
|
||||
物联网平台建设服务
|
||||
</h4>
|
||||
<button type="button">{{ item.action }}</button>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="architecture-section">
|
||||
<div class="architecture-shell">
|
||||
<div class="architecture-copy">
|
||||
<span>ARCHITECTURE</span>
|
||||
<h2>云、端、屏一体化的数字底座</h2>
|
||||
<p>官网、管理后台、H5、小程序、物联 Web 与可视化大屏组成完整产品矩阵，前端体验统一，后端能力解耦。</p>
|
||||
<div class="architecture-list">
|
||||
<div v-for="item in platformHighlights" :key="item.title">
|
||||
<strong>{{ item.title }}</strong>
|
||||
<span>{{ item.desc }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="node-map">
|
||||
<div class="node-core">
|
||||
<b>INTC</b>
|
||||
<span>Smart Cloud</span>
|
||||
</div>
|
||||
<div v-for="node in architectureNodes" :key="node" class="node-item">{{ node }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section-block scene-block">
|
||||
<div class="section-title">
|
||||
<span>VALUE SCENARIOS</span>
|
||||
<h2>把复杂业务转化为可运营的数字现场</h2>
|
||||
</div>
|
||||
<div class="scene-grid">
|
||||
<div v-for="item in scenarios" :key="item.title" class="scene-card">
|
||||
<span>{{ item.no }}</span>
|
||||
<h3>{{ item.title }}</h3>
|
||||
<p>{{ item.desc }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="site-cta">
|
||||
<div>
|
||||
<span>READY FOR DIGITAL UPGRADE</span>
|
||||
<h2>让技术真正进入业务现场</h2>
|
||||
<p>智聪科技持续打磨稳定、易用、有扩展力的多端数字产品，服务资产管理、健康档案和物联网建设。</p>
|
||||
</div>
|
||||
<button type="button" @click="onButtonClick('callus')">联系智聪科技</button>
|
||||
</section>
|
||||
|
||||
<zui-footer/>
|
||||
</page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import './less/home-page.less'
|
||||
import Logo from '../components/Logo'
|
||||
import Page from '../components/Page'
|
||||
import ZuiHeader from '../components/Header'
|
||||
import ZuiFooter from '../components/Footer'
|
||||
import ZuiButton from '../components/Button'
|
||||
import feature1 from '../assets/img/feature1.svg'
|
||||
import feature2 from '../assets/img/feature2.svg'
|
||||
import feature3 from '../assets/img/feature3.svg'
|
||||
import feature4 from '../assets/img/feature4.svg'
|
||||
import Invest from '../assets/img/invest.png'
|
||||
import Health from '../assets/img/health.png'
|
||||
import imaotai from '../assets/img/imaotai.png'
|
||||
import intcIot from '../assets/img/intcIot.jpg'
|
||||
|
||||
import Util from '../Util'
|
||||
|
||||
export default {
|
||||
components: {Page, Logo, ZuiHeader, ZuiFooter,ZuiButton},
|
||||
components: {Page, ZuiHeader, ZuiFooter, ZuiButton},
|
||||
data () {
|
||||
return {
|
||||
feature1: feature1,
|
||||
feature2: feature2,
|
||||
feature3: feature3,
|
||||
feature4: feature4,
|
||||
imaotai: imaotai,
|
||||
Health: Health,
|
||||
Invest: Invest,
|
||||
intcIot: intcIot,
|
||||
carouselPerPage: (Util.os.android || Util.os.iPhone|| Util.os.mobile|| Util.os.isapp|| Util.os.harmonyOS) ? 1 : 2
|
||||
signalBars: [38, 64, 51, 82, 46, 90, 72, 58, 76, 43, 67, 84],
|
||||
consoleStatus: [
|
||||
{ label: '设备在线', value: '98.7%' },
|
||||
{ label: '数据链路', value: '稳定' },
|
||||
{ label: '告警闭环', value: '实时' }
|
||||
],
|
||||
iotNodes: [
|
||||
{ label: '照明', value: '12.8k', className: 'node-light' },
|
||||
{ label: '巡检', value: '286', className: 'node-inspect' },
|
||||
{ label: '能耗', value: '-18%', className: 'node-energy' },
|
||||
{ label: '告警', value: '32', className: 'node-alert' }
|
||||
],
|
||||
moduleDock: [
|
||||
{ code: 'A01', title: '设备接入' },
|
||||
{ code: 'B02', title: '工单联动' },
|
||||
{ code: 'C03', title: '大屏态势' }
|
||||
],
|
||||
metrics: [
|
||||
{ value: '3+', label: '核心业务域' },
|
||||
{ value: '6', label: '多端产品矩阵' },
|
||||
{ value: '24h', label: '持续服务响应' }
|
||||
],
|
||||
capabilities: [
|
||||
{
|
||||
type: 'accounting',
|
||||
code: 'ASSET ENGINE',
|
||||
glyph: '¥',
|
||||
iconCode: 'ASSET',
|
||||
title: '科学记账平台',
|
||||
desc: '覆盖账户、账单、投资、收益与净资产统计，让个人资产状态清晰可见。',
|
||||
points: ['多账户资产归集', '账单与收益统计', 'Web / H5 双端入口'],
|
||||
action: '进入记账'
|
||||
},
|
||||
{
|
||||
type: 'health',
|
||||
code: 'HEALTH ENGINE',
|
||||
glyph: '+',
|
||||
iconCode: 'HEALTH',
|
||||
title: '健康档案系统',
|
||||
desc: '沉淀体征、慢病、用药与就诊数据，形成长期连续的家庭健康档案。',
|
||||
points: ['慢病与体征记录', '用药计划追踪', '健康趋势分析'],
|
||||
action: '查看健康'
|
||||
},
|
||||
{
|
||||
type: 'iot',
|
||||
code: 'AIOT ENGINE',
|
||||
glyph: 'IoT',
|
||||
iconCode: 'AIOT',
|
||||
title: '智聪物联网平台',
|
||||
desc: '面向照明、设备、巡检、告警和能耗场景，打造统一物联运营底座。',
|
||||
points: ['设备统一接入', '告警工单闭环', '可视化大屏联动'],
|
||||
action: '了解物联'
|
||||
}
|
||||
],
|
||||
platformHighlights: [
|
||||
{ title: '多端一致', desc: '官网、后台、H5、小程序与大屏围绕同一业务域协同。' },
|
||||
{ title: '服务解耦', desc: '后端微服务承载资产、健康、物联、文件与系统能力。' },
|
||||
{ title: '数据可视', desc: '将运营、告警、资产与健康趋势转化为可读的决策视图。' }
|
||||
],
|
||||
architectureNodes: ['Website', 'Admin', 'H5', 'IoT Web', 'Big Screen', 'API Gateway'],
|
||||
scenarios: [
|
||||
{ no: '01', title: '个人资产管理', desc: '把账户、交易、账单、投资收益统一到一个长期可追踪的数据视图。' },
|
||||
{ no: '02', title: '家庭健康记录', desc: '面向日常健康、慢病、用药和就诊场景，形成连续健康档案。' },
|
||||
{ no: '03', title: '城市设备运营', desc: '对照明、楼宇、巡检、报修、告警和备件进行线上化闭环管理。' },
|
||||
{ no: '04', title: '企业数字入口', desc: '官网、工作台和管理端共同构成统一入口，降低业务触达成本。' }
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isMobile () {
|
||||
return Util.os.android || Util.os.iPhone || Util.os.mobile || Util.os.isapp || Util.os.harmonyOS
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onButtonClick: function (e) {
|
||||
if(e=="callus"){
|
||||
if (e === 'callus') {
|
||||
this.$router.push({path: '/callus'})
|
||||
}else if(e=="resource"){
|
||||
} else if (e === 'resource') {
|
||||
this.$router.push({path: '/resource'})
|
||||
} else {
|
||||
this.$router.push({path: '/'})
|
||||
@@ -170,200 +267,12 @@
|
||||
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: '#' // 物联平台链接，暂时未开放
|
||||
iot: 'http://iot.qdintc.com'
|
||||
}
|
||||
if(links[type] && links[type] !== '#') {
|
||||
if (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
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.features {
|
||||
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(3, minmax(240px, 300px));
|
||||
gap: 30px;
|
||||
max-width: 1100px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.zui-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 35px 25px;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 18px;
|
||||
background: #fff;
|
||||
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: 25px !important;
|
||||
position: relative !important;
|
||||
|
||||
&::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 40px rgba(53, 163, 186, 0.2);
|
||||
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: 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: 20px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.zui-card__media img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
position: static !important;
|
||||
top: auto !important;
|
||||
left: auto !important;
|
||||
object-fit: contain;
|
||||
border-radius: 18px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.zui-card__title {
|
||||
margin: 12px 0 10px;
|
||||
font-size: 20px;
|
||||
color: #1f2a37;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.zui-card__desc {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.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: 40px 15px 50px !important;
|
||||
|
||||
.features-header {
|
||||
margin-bottom: 30px;
|
||||
|
||||
h2 {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.zui-card-list {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 20px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.zui-card {
|
||||
min-height: 240px;
|
||||
padding: 25px 20px !important;
|
||||
}
|
||||
|
||||
.zui-card__media {
|
||||
width: 130px;
|
||||
height: 130px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.zui-card__media img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.zui-card__title {
|
||||
font-size: 18px !important;
|
||||
}
|
||||
|
||||
.zui-card__desc {
|
||||
font-size: 13px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,498 +1,110 @@
|
||||
<template>
|
||||
<page class="home-page">
|
||||
<page class="site-page contact-page">
|
||||
<zui-header>
|
||||
<template #buttons>
|
||||
<zui-button @click="onButtonClick('callus')">联系我们</zui-button>
|
||||
<zui-button @click="onButtonClick('resource')">资料下载</zui-button>
|
||||
<zui-button @click="onButtonClick('home')">首页</zui-button>
|
||||
<zui-button @click="onButtonClick('resource')">资料下载</zui-button>
|
||||
<zui-button @click="onButtonClick('callus')">联系我们</zui-button>
|
||||
</template>
|
||||
</zui-header>
|
||||
|
||||
<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>
|
||||
<section class="sub-hero contact-hero">
|
||||
<div class="tech-grid"></div>
|
||||
<div class="sub-hero__content">
|
||||
<span>CONTACT CENTER</span>
|
||||
<h1>联系我们</h1>
|
||||
<p>面向资产记账、健康档案、物联网平台建设，提供产品咨询、平台演示与服务支持。</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="contact-console">
|
||||
<div class="contact-flow-panel">
|
||||
<span class="panel-tag">SERVICE FLOW</span>
|
||||
<h2>三步接入智聪服务</h2>
|
||||
<div class="flow-grid">
|
||||
<div v-for="item in flowSteps" :key="item.no" class="flow-node">
|
||||
<b>{{ item.no }}</b>
|
||||
<strong>{{ item.title }}</strong>
|
||||
<span>{{ item.desc }}</span>
|
||||
</div>
|
||||
</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 class="contact-info-panel">
|
||||
<span class="panel-tag">ONLINE SUPPORT</span>
|
||||
<h2>服务连接通道</h2>
|
||||
<div class="contact-line">
|
||||
<span>电话</span>
|
||||
<strong>17753252359</strong>
|
||||
</div>
|
||||
<div class="flow-arrow">→</div>
|
||||
<div class="flow-item vivify popIn delay-100">
|
||||
<div class="flow-number">2</div>
|
||||
<h3>注册账号</h3>
|
||||
<div class="contact-line">
|
||||
<span>服务方向</span>
|
||||
<strong>记账 / 健康 / 物联</strong>
|
||||
</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>
|
||||
<button type="button" @click="copyPhone">复制电话</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="contact-cards">
|
||||
<div class="contact-card vivify popIn">
|
||||
<section class="qr-section">
|
||||
<article class="qr-card">
|
||||
<div class="qr-image"><img :src="wxgzh" alt="公众号二维码"></div>
|
||||
<div>
|
||||
<span>WECHAT ACCOUNT</span>
|
||||
<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>
|
||||
<p>关注智聪PL，获取产品动态与服务信息。</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="qr-card">
|
||||
<div class="qr-image"><img :src="zckj" alt="客服微信二维码"></div>
|
||||
<div>
|
||||
<span>SERVICE WECHAT</span>
|
||||
<h3>客服微信</h3>
|
||||
<p>扫码添加客服，沟通平台试用、资料获取与项目咨询。</p>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<zui-footer/>
|
||||
</page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import './less/home-page.less'
|
||||
import Logo from '../components/Logo'
|
||||
import Page from '../components/Page'
|
||||
import ZuiHeader from '../components/Header'
|
||||
import ZuiFooter from '../components/Footer'
|
||||
import ZuiButton from '../components/Button'
|
||||
import feature1 from '../assets/img/feature1.png'
|
||||
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},
|
||||
components: {Page, ZuiHeader, ZuiFooter, ZuiButton},
|
||||
data () {
|
||||
return {
|
||||
feature1: feature1,
|
||||
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
|
||||
flowSteps: [
|
||||
{ no: '01', title: '建立联系', desc: '确认服务方向与使用场景。' },
|
||||
{ no: '02', title: '开通体验', desc: '提供入口资料与账号指引。' },
|
||||
{ no: '03', title: '持续使用', desc: '围绕业务反馈持续优化。' }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onButtonClick: function (e) {
|
||||
if(e=="callus"){
|
||||
if (e === 'callus') {
|
||||
this.$router.push({path: '/callus'})
|
||||
}else if(e=="resource"){
|
||||
} else if (e === 'resource') {
|
||||
this.$router.push({path: '/resource'})
|
||||
} else {
|
||||
this.$router.push({path: '/'})
|
||||
}
|
||||
},
|
||||
copyPhone: function () {
|
||||
if (navigator.clipboard) {
|
||||
navigator.clipboard.writeText('17753252359')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
// 联系我们 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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.banner-subtitle {
|
||||
font-size: 20px;
|
||||
opacity: 0.95;
|
||||
margin: 0;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 流程区域
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,544 +1,134 @@
|
||||
<template>
|
||||
<page class="home-page">
|
||||
<page class="site-page resource-page">
|
||||
<zui-header>
|
||||
<template #buttons>
|
||||
<zui-button @click="onButtonClick('callus')">联系我们</zui-button>
|
||||
<zui-button @click="onButtonClick('resource')">资料下载</zui-button>
|
||||
<zui-button @click="onButtonClick('home')">首页</zui-button>
|
||||
<zui-button @click="onButtonClick('resource')">资料下载</zui-button>
|
||||
<zui-button @click="onButtonClick('callus')">联系我们</zui-button>
|
||||
</template>
|
||||
</zui-header>
|
||||
|
||||
<!-- 添加顶部Banner -->
|
||||
<div class="resource-banner">
|
||||
<div class="banner-overlay"></div>
|
||||
<div class="banner-content">
|
||||
<section class="sub-hero resource-hero">
|
||||
<div class="tech-grid"></div>
|
||||
<div class="sub-hero__content">
|
||||
<span>RESOURCE TERMINAL</span>
|
||||
<h1>资料下载中心</h1>
|
||||
<p class="banner-subtitle">提供安卓APP、系统介绍、使用手册等完整资料</p>
|
||||
<p>聚合应用安装包、系统介绍与用户手册，快速了解智聪产品能力。</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="resource-console">
|
||||
<div class="section-title">
|
||||
<span>DOWNLOAD CENTER</span>
|
||||
<h2>产品资料矩阵</h2>
|
||||
<p>选择对应产品，下载应用安装包、介绍文档或使用手册。</p>
|
||||
</div>
|
||||
|
||||
<div class="service">
|
||||
<h2>下载专区</h2>
|
||||
<p class="service-desc">满足您的记账需求、健康记录</p>
|
||||
<div class="download-grid">
|
||||
<article v-for="product in products" :key="product.name" class="download-card">
|
||||
<div class="download-card__media">
|
||||
<div class="download-symbol" :class="'download-symbol--' + product.type">
|
||||
<span class="download-symbol__corner download-symbol__corner--one"></span>
|
||||
<span class="download-symbol__corner download-symbol__corner--two"></span>
|
||||
<div class="download-glyph">
|
||||
<span class="glyph-mark">{{ product.glyph }}</span>
|
||||
<span class="glyph-line glyph-line--one"></span>
|
||||
<span class="glyph-line glyph-line--two"></span>
|
||||
<span class="glyph-line glyph-line--three"></span>
|
||||
<span class="glyph-node glyph-node--one"></span>
|
||||
<span class="glyph-node glyph-node--two"></span>
|
||||
<span class="glyph-node glyph-node--three"></span>
|
||||
</div>
|
||||
<span class="download-symbol__label">{{ product.iconCode }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="download-card__content">
|
||||
<span>{{ product.code }}</span>
|
||||
<h3>{{ product.name }}</h3>
|
||||
<p>{{ product.desc }}</p>
|
||||
<div class="download-actions">
|
||||
<a
|
||||
v-for="item in product.files"
|
||||
:key="item.label"
|
||||
class="download-link"
|
||||
:class="'download-link--' + item.type"
|
||||
:href="item.href"
|
||||
download
|
||||
>
|
||||
<i>{{ item.badge }}</i>
|
||||
<span>{{ item.label }}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="features">
|
||||
<ul class="zui-card-list">
|
||||
<li class="zui-card">
|
||||
<div class="card-icon-wrapper">
|
||||
<div class="zui-card__media"><img :src="Invest" alt="记账管理平台" loading="lazy" decoding="async" width="110" height="110"></div>
|
||||
<section class="resource-contact">
|
||||
<div>
|
||||
<span>NEED MORE MATERIALS</span>
|
||||
<h2>需要物联方案或定制资料？</h2>
|
||||
<p>可以直接联系智聪科技获取项目咨询、平台演示和更多产品资料。</p>
|
||||
</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/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" download>
|
||||
<span class="btn-icon">📄</span>
|
||||
<span>系统介绍</span>
|
||||
</a>
|
||||
<a class="zui-button-link" href="/static/download/invest/intcInvest-Manual.pdf" download>
|
||||
<span class="btn-icon">📖</span>
|
||||
<span>使用手册</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<button type="button" @click="onButtonClick('callus')">联系获取资料</button>
|
||||
</section>
|
||||
|
||||
<li class="zui-card">
|
||||
<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 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" download>
|
||||
<span class="btn-icon">📱</span>
|
||||
<span>安卓APP下载</span>
|
||||
</a>
|
||||
<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" download>
|
||||
<span class="btn-icon">📖</span>
|
||||
<span>使用手册</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<zui-footer/>
|
||||
</page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Logo from '../components/Logo'
|
||||
import './less/home-page.less'
|
||||
import Page from '../components/Page'
|
||||
import ZuiHeader from '../components/Header'
|
||||
import ZuiFooter from '../components/Footer'
|
||||
import ZuiButton from '../components/Button'
|
||||
import feature1 from '../assets/img/feature1.png'
|
||||
import feature2 from '../assets/img/feature2.png'
|
||||
import feature3 from '../assets/img/feature3.png'
|
||||
import feature4 from '../assets/img/feature4.png'
|
||||
import Invest from '../assets/img/invest.png'
|
||||
import Health from '../assets/img/health.png'
|
||||
import imaotai from '../assets/img/imaotai.png'
|
||||
import Util from '../Util'
|
||||
|
||||
export default {
|
||||
components: {Page, Logo, ZuiHeader, ZuiFooter,ZuiButton},
|
||||
components: {Page, ZuiHeader, ZuiFooter, ZuiButton},
|
||||
data () {
|
||||
return {
|
||||
feature1: feature1,
|
||||
feature2: feature2,
|
||||
feature3: feature3,
|
||||
feature4: feature4,
|
||||
imaotai: imaotai,
|
||||
Health: Health,
|
||||
Invest: Invest,
|
||||
carouselPerPage: (Util.os.android || Util.os.iPhone|| Util.os.wechat|| Util.os.mobile|| Util.os.isapp|| Util.os.harmonyOS) ? 1 : 2
|
||||
products: [
|
||||
{
|
||||
code: 'ASSET ENGINE',
|
||||
type: 'asset',
|
||||
glyph: '¥',
|
||||
iconCode: 'ASSET',
|
||||
name: '记账管理平台',
|
||||
desc: '个人资产、账单、交易与收益统计的一体化管理平台。',
|
||||
files: [
|
||||
{ label: '安卓APP下载', badge: 'APK', type: 'app', href: '/static/download/invest/intcInvest-V1.0.apk' },
|
||||
{ label: '系统介绍', badge: 'PDF', type: 'pdf', href: '/static/download/invest/intcInvest-Introduction.pdf' },
|
||||
{ label: '使用手册', badge: 'DOC', type: 'doc', href: '/static/download/invest/intcInvest-Manual.pdf' },
|
||||
{ label: 'H5使用手册', badge: 'H5', type: 'h5', href: '/static/download/invest/intcInvestH5-Manual.pdf' }
|
||||
]
|
||||
},
|
||||
{
|
||||
code: 'HEALTH ENGINE',
|
||||
type: 'health',
|
||||
glyph: '+',
|
||||
iconCode: 'HEALTH',
|
||||
name: '健康管理平台',
|
||||
desc: '面向健康档案、慢病记录、用药计划与健康趋势分析。',
|
||||
files: [
|
||||
{ label: '安卓APP下载', badge: 'APK', type: 'app', href: '/static/download/health/intcHealth-V1.0.apk' },
|
||||
{ label: '系统介绍', badge: 'PDF', type: 'pdf', href: '/static/download/health/intcHealth-Introduction.pdf' },
|
||||
{ label: '使用手册', badge: 'DOC', type: 'doc', href: '/static/download/health/intcHealth-Manual.pdf' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onButtonClick: function (e) {
|
||||
if(e=="callus"){
|
||||
if (e === 'callus') {
|
||||
this.$router.push({path: '/callus'})
|
||||
}else if(e=="resource"){
|
||||
} else if (e === 'resource') {
|
||||
this.$router.push({path: '/resource'})
|
||||
} else {
|
||||
this.$router.push({path: '/'})
|
||||
}
|
||||
},
|
||||
// 授权书下载
|
||||
download(type) {
|
||||
|
||||
// 通过a标签来实现下载
|
||||
var a = document.createElement("a") //创建一个<a></a>标签
|
||||
if(type===1){
|
||||
a.href = "/static/download/invest/intcInvest-Introduction.pdf"
|
||||
a.download = "智聪记账平台系统介绍.pdf"
|
||||
}
|
||||
if(type===2){
|
||||
a.href = "/static/download/invest/intcInvest-Manual.pdf"
|
||||
a.download = "智聪记账平台PC用户使用手册V1.0.pdf"
|
||||
}
|
||||
if(type===3){
|
||||
a.href = "/static/download/invest/intcInvestH5-Manual.pdf"
|
||||
a.download = "智聪记账平台H5用户使用手册V1.0.pdf"
|
||||
}
|
||||
if(type===4){
|
||||
a.href = "/static/download/health/intcHealth-Introduction.pdf"
|
||||
a.download = "智聪健康平台系统介绍.pdf"
|
||||
}
|
||||
if(type===5){
|
||||
a.href = "/static/download/health/intcHealth-Manual.pdf"
|
||||
a.download = "智聪健康平台用户使用手册V1.0.pdf"
|
||||
}
|
||||
if(type===6){
|
||||
a.href = "/static/download/imaotai/intcImaotai-Introduction.pdf"
|
||||
a.download = "智聪茅台预约平台系统介绍.pdf"
|
||||
}
|
||||
if(type===7){
|
||||
a.href = "/static/download/imaotai/intcImaotai-Manual.pdf"
|
||||
a.download = "智聪茅台预约平台用户使用手册V1.0.pdf"
|
||||
}
|
||||
a.style.display = "none" //隐藏a标签
|
||||
document.body.append("a") //将a标签追加到document.body中
|
||||
a.click() //模拟点击a标签，会触发a标签的href的读取，浏览器就会自动下载了
|
||||
a.remove() // 删除a标签（一次性的）
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</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, #f8fffe 0%, #edf7f7 100%);
|
||||
padding: 40px 20px 60px;
|
||||
|
||||
.zui-card-list {
|
||||
list-style: none;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 25px;
|
||||
max-width: 900px;
|
||||
}
|
||||
|
||||
.zui-card {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
background: #fff;
|
||||
border-radius: 20px;
|
||||
overflow: visible;
|
||||
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, #667eea, #764ba2);
|
||||
transform: scaleX(0);
|
||||
transition: transform 0.3s ease;
|
||||
border-radius: 20px 20px 0 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
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 img {
|
||||
transform: scale(1.1) rotate(3deg);
|
||||
}
|
||||
|
||||
.zui-button-link--primary {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 25px rgba(0, 136, 255, 0.45);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
border-radius: 20px 0 0 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.zui-card__media {
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
|
||||
border-radius: 20px;
|
||||
padding: 12px;
|
||||
transition: transform 0.3s ease;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
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;
|
||||
border-radius: 0 20px 20px 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.zui-card__title {
|
||||
margin: 0 0 8px;
|
||||
font-size: 22px;
|
||||
color: #1f2a37;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin: 0 0 20px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.card-divider {
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, rgba(102, 126, 234, 0.2), transparent);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.zui-card__actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.zui-button-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
padding: 10px 18px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #656b79;
|
||||
background: #f6f8fa;
|
||||
border: 1px solid #e1e4e8;
|
||||
border-radius: 10px;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
flex: 0 0 auto;
|
||||
|
||||
.btn-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #eef1f4;
|
||||
border-color: #d0d4d9;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
|
||||
}
|
||||
}
|
||||
|
||||
.zui-button-link--primary {
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||||
border: none;
|
||||
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
|
||||
font-weight: 600;
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(135deg, #7689f0, #8558b0);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 25px rgba(102, 126, 234, 0.45);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式设计
|
||||
@media (max-width: 1024px) {
|
||||
.features .zui-card-list {
|
||||
max-width: 800px;
|
||||
}
|
||||
}
|
||||
|
||||
@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: 40px 15px 25px;
|
||||
|
||||
h2 {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.service-desc {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.features {
|
||||
.zui-card {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.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 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.zui-card__actions {
|
||||
flex-direction: column;
|
||||
|
||||
.zui-button-link {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@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 40px;
|
||||
|
||||
.zui-card-list {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.zui-card {
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.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 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
font-size: 13px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.card-divider {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.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