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

fix: 使用Qoder统一功能修改完善。

Browse Source
This commit is contained in:
tianyongbao
2025-11-04 01:21:56 +08:00
parent 7b8de99652
commit 96e217948b
12 changed files with 476 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
package-lock.json generated
View File

@@ -11,7 +11,6 @@
"jsonp": "^0.2.1", "jsonp": "^0.2.1",
"vue": "^2.7.15", "vue": "^2.7.15",
"vue-carousel": "^0.18.0", "vue-carousel": "^0.18.0",
"vue-droplist": "^1.0.6",
"vue-router": "^3.0.1", "vue-router": "^3.0.1",
"vue-template-compiler": "^2.7.15", "vue-template-compiler": "^2.7.15",
"vuex": "^3.3.0" "vuex": "^3.3.0"
@@ -13833,11 +13832,6 @@
"resolved": "http://npm.ezbim.cn:3038/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz", "resolved": "http://npm.ezbim.cn:3038/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
"integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg==" "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
}, },
"node_modules/vue-droplist": {
"version": "1.0.6",
"resolved": "http://npm.ezbim.cn:3038/vue-droplist/-/vue-droplist-1.0.6.tgz",
"integrity": "sha512-IkGBKHyOepVOe9nyoIZ521Bi94FF1jmSPUtEDsV/3+WaJSPD+xcq+6m4GCndA0Oke2XLlAAzq9uT4KXNHIOvsQ=="
},
"node_modules/vue-hot-reload-api": { "node_modules/vue-hot-reload-api": {
"version": "2.3.4", "version": "2.3.4",
"resolved": "http://npm.ezbim.cn:3038/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz", "resolved": "http://npm.ezbim.cn:3038/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
@@ -26312,11 +26306,6 @@
} }
} }
}, },
"vue-droplist": {
"version": "1.0.6",
"resolved": "http://npm.ezbim.cn:3038/vue-droplist/-/vue-droplist-1.0.6.tgz",
"integrity": "sha512-IkGBKHyOepVOe9nyoIZ521Bi94FF1jmSPUtEDsV/3+WaJSPD+xcq+6m4GCndA0Oke2XLlAAzq9uT4KXNHIOvsQ=="
},
"vue-hot-reload-api": { "vue-hot-reload-api": {
"version": "2.3.4", "version": "2.3.4",
"resolved": "http://npm.ezbim.cn:3038/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz", "resolved": "http://npm.ezbim.cn:3038/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",

1
package.json
View File

@@ -13,7 +13,6 @@
"jsonp": "^0.2.1", "jsonp": "^0.2.1",
"vue": "^2.7.15", "vue": "^2.7.15",
"vue-carousel": "^0.18.0", "vue-carousel": "^0.18.0",
"vue-droplist": "^1.0.6",
"vue-router": "^3.0.1", "vue-router": "^3.0.1",
"vue-template-compiler": "^2.7.15", "vue-template-compiler": "^2.7.15",
"vuex": "^3.3.0" "vuex": "^3.3.0"

10
src/components/Footer.vue
View File

@@ -1,14 +1,14 @@
<template> <template>
<footer class="zui-footer"> <footer class="zui-footer">
<div style="display: flex;justify-content: center; align-items: center;"> <div class="footer-content">
<img src ="../assets/img/qrcode.png" width="270" height="155"> <div class="footer-qrcode">
<img src="../assets/img/qrcode.png" width="270" height="155" alt="客服二维码">
</div> </div>
<div class="links"> <div class="links">
<a href="https://beian.miit.gov.cn/" target="_blank">鲁ICP备2024118666号-1</a> <a href="https://beian.miit.gov.cn/" target="_blank">鲁ICP备2024118666号-1</a>
<img src ="./img/gongan.png" width="18" height="20">&nbsp;<a href="https://beian.mps.gov.cn/#/query/webSearch?code=37021202001661" rel="noreferrer" target="_blank">鲁公网安备37021202001661</a> <img src="./img/gongan.png" width="18" height="20" alt="公安图标">&nbsp;<a href="https://beian.mps.gov.cn/#/query/webSearch?code=37021202001661" rel="noreferrer" target="_blank">鲁公网安备37021202001661</a>
</div>
</div> </div>
<p class="copy-right"> <p class="copy-right">
Copyright 2025 智聪网络科技 .All rights reserved Copyright 2025 智聪网络科技 .All rights reserved
<br> <br>

3
src/components/Page.vue
View File

@@ -24,8 +24,7 @@
}, },
computed: { computed: {
cls () { cls () {
const cls = (Util.os.android || Util.os.iPhone || Util.os.wechat || Util.os.wechat|| Util.os.mobile) ? '' : 'min-1200' return 'zui-page'
return 'zui-page ' + cls
}, },
toastText () { toastText () {
return this.$store.state.toastText return this.$store.state.toastText

17
src/components/less/button.less
View File

@@ -4,8 +4,21 @@
color: #fff; color: #fff;
font-size: 14px; font-size: 14px;
line-height: 50px; line-height: 50px;
border-radius: 6px; border-radius: 10px;
background: #F7931E; background: linear-gradient(135deg, #00b8ff, #007bff);
border: none;
min-width: 190px; min-width: 190px;
box-shadow: 0 0 0 rgba(0, 212, 255, 0);
transition: all .2s ease;
.cursor(); .cursor();
} }
.@{prefix}-button:hover{
background: linear-gradient(135deg, #00c2ff, #0088ff);
box-shadow: 0 0 12px rgba(0, 212, 255, 0.5);
}
.@{prefix}-button:active{
background: linear-gradient(135deg, #00a8f0, #006fe6);
transform: translateY(1px);
}

29
src/components/less/footer.less
View File

@@ -5,6 +5,7 @@
min-height: 125px; min-height: 125px;
background: #646464; background: #646464;
padding: 40px 0 0 0; padding: 40px 0 0 0;
border-top: 1px solid rgba(255,255,255,0.25);
.links { .links {
color: #fff; color: #fff;
font-size: 16px; font-size: 16px;
@@ -36,6 +37,19 @@
margin: 8px 0 0 0; margin: 8px 0 0 0;
padding-bottom: 10px; padding-bottom: 10px;
} }
.footer-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 12px;
padding: 0 16px;
}
.footer-qrcode img {
display: block;
max-width: 270px;
height: auto;
}
} }
@media (max-width: 420px) { @media (max-width: 420px) {
@@ -52,5 +66,20 @@
display: block; display: block;
} }
} }
.footer-content {
flex-direction: column;
gap: 12px;
}
.footer-qrcode img {
width: 180px !important;
height: auto !important;
margin-bottom: 8px;
}
.links a {
display: inline-block;
padding: 4px 6px;
line-height: 1.6;
border-radius: 4px;
}
} }
} }

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

@@ -3,6 +3,12 @@
.@{prefix}-header { .@{prefix}-header {
width: 100%; width: 100%;
height: 100px; height: 100px;
background: rgba(255,255,255,0.75);
backdrop-filter: saturate(180%) blur(8px);
box-shadow: 0 4px 14px rgba(16,24,40,0.08);
position: sticky;
top: 0;
z-index: 100;
.float-clear; .float-clear;
.@{prefix}-logo{ .@{prefix}-logo{
width: 135px; width: 135px;
@@ -20,13 +26,21 @@
text-align: center; text-align: center;
margin: 0 0 0 0px; margin: 0 0 0 0px;
} }
.@{prefix}-logo-text a{
color: var(--color-text);
text-decoration: none;
margin: 0 8px;
font-weight: 600;
}
.@{prefix}-logo-text a:hover{
color: var(--color-accent);
text-decoration: underline;
}
.@{prefix}-button{ .@{prefix}-button{
float: right; float: right;
line-height: 40px; line-height: 40px;
background: #236579;
margin: 30px 30px 0 0; margin: 30px 30px 0 0;
min-width: 100px; min-width: 100px;
border-radius: 10px;
} }
.@{prefix}-rightcol{ .@{prefix}-rightcol{
display: none; display: none;

88
src/components/less/page.less
View File

@@ -1,20 +1,104 @@
@import './reset.less'; @import './reset.less';
:root {
--color-bg: #edf7f7;
--color-text: #1f2a37;
--color-accent: #35A3BA;
--color-accent-strong: #0ea5b7;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--radius-1: 10px;
--radius-2: 16px;
--shadow-1: 0 2px 8px rgba(16,24,40,.06);
--shadow-2: 0 8px 24px rgba(16,24,40,.08);
--transition-fast: 180ms;
}
.zui-page { .zui-page {
width: 100%; width: 100%;
min-height: 100%; min-height: 100%;
margin: 0 auto; margin: 0 auto;
font-family: "微软雅黑", "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "微软雅黑", "Helvetica Neue", Helvetica, Arial, sans-serif;
&.min-1200 { background: var(--color-bg);
min-width: 1200px; color: var(--color-text);
a {
text-decoration: none;
} }
a:hover { a:hover {
color: #35A3BA; color: #35A3BA;
text-decoration: underline; text-decoration: underline;
} }
.zui-nav-link {
text-decoration: none;
color: inherit;
margin-left: 12px;
}
.zui-nav-link:hover {
text-decoration: underline;
color: #35A3BA;
}
.zui-nav-link--mobile {
font-size: 12px;
}
.clear:after { .clear:after {
content: ''; content: '';
display: table; display: table;
clear: both; clear: both;
} }
} }
/* Drawer menu */
.zui-drawer-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.45);
z-index: 999;
}
.zui-drawer {
position: fixed;
top: 0;
right: 0;
width: 70%;
max-width: 300px;
height: 100%;
background: #fff;
box-shadow: -2px 0 8px rgba(0, 0, 0, 0.06);
z-index: 1000;
padding: 16px;
}
.zui-drawer__header {
font-size: 16px;
font-weight: bold;
margin-bottom: 12px;
color: #333;
}
.zui-drawer__list {
list-style: none;
margin: 0;
padding: 0;
}
.zui-drawer__list li {
padding: 12px 8px;
border-bottom: 1px solid #f0f0f0;
}
.zui-drawer__list li:hover {
background: #f6f8fa;
cursor: pointer;
}
@media (min-width: 1200px) {
.zui-drawer,
.zui-drawer-overlay {
display: none;
}
}
@media (min-width: 1200px) {
.zui-page {
min-width: 1200px;
}
}

173
src/views/HomePage.vue
View File

@@ -3,17 +3,16 @@
<zui-header> <zui-header>
<logo type="xiaoyanyun" href="/"></logo> <logo type="xiaoyanyun" href="/"></logo>
<h4 v-show="webShow" class="zui-logo-text"> <h4 v-show="webShow" class="zui-logo-text">
<a style="text-decoration: none;" href="http://152.136.151.187:88/login" target="_blank">&nbsp;&nbsp;记账平台</a> <a class="zui-nav-link" href="http://152.136.151.187:88/login" target="_blank">&nbsp;&nbsp;记账平台</a>
<a style="text-decoration: none;" href="http://152.136.151.187:81/hrms/login" target="_blank">&nbsp;&nbsp;健康档案</a> <a class="zui-nav-link" href="http://152.136.151.187:81/hrms/login" target="_blank">&nbsp;&nbsp;健康档案</a>
<a style="text-decoration: none;" href="http://152.136.151.187:8081/imaotai/" target="_blank">&nbsp;&nbsp;茅台预约</a> <a class="zui-nav-link" href="http://152.136.151.187:8081/imaotai/" target="_blank">&nbsp;&nbsp;茅台预约</a>
</h4> </h4>
<div v-show="mobileShow" class="rightcol" @click="openMenu" style="color: #0b8ba5;font-size: 14px;">◄目录►</div> <div v-show="mobileShow" class="zui-rightcol" @click="openMenu">◄目录►</div>
<div v-show="mobileShow" class="rightcol"> <div v-show="mobileShow" class="zui-rightcol">
<a style="text-decoration: none;font-size: 12px;" href="http://152.136.151.187:86/#/" target="_blank">&nbsp;&nbsp;记账平台</a> <a class="zui-nav-link zui-nav-link--mobile" href="http://152.136.151.187:86/#/" target="_blank">&nbsp;&nbsp;记账平台</a>
<a style="text-decoration: none;font-size: 12px;" href="http://152.136.151.187:89/#/" target="_blank">&nbsp;&nbsp;健康档案</a> <a class="zui-nav-link zui-nav-link--mobile" href="http://152.136.151.187:89/#/" target="_blank">&nbsp;&nbsp;健康档案</a>
<a style="text-decoration: none;font-size: 12px;" href="http://152.136.151.187:90/#/" target="_blank">&nbsp;&nbsp;茅台预约</a> <a class="zui-nav-link zui-nav-link--mobile" href="http://152.136.151.187:90/#/" target="_blank">&nbsp;&nbsp;茅台预约</a>
</div> </div>
<drop-list :config="configData" ref="droplist"></drop-list>
<div v-show="webShow"> <div v-show="webShow">
<zui-button @click="onButtonClick('callus')">联系我们</zui-button> <zui-button @click="onButtonClick('callus')">联系我们</zui-button>
<zui-button @click="onButtonClick('resource')">资料下载</zui-button> <zui-button @click="onButtonClick('resource')">资料下载</zui-button>
@@ -23,6 +22,15 @@
<zui-button @click="onButtonClick('home')">首页</zui-button> <zui-button @click="onButtonClick('home')">首页</zui-button>
</div> </div>
</zui-header> </zui-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>
<ul class="zui-drawer__list">
<li @click="gohome">首页</li>
<li @click="goresource">资料下载</li>
<li @click="gocallus">联系我们</li>
</ul>
</div>
<div class="banner vivify fadeIn"> <div class="banner vivify fadeIn">
<h1 class="vivify popIn"> <h1 class="vivify popIn">
<span class="br"></span>科学记账&nbsp;&nbsp;量入为出 <span class="br"></span>科学记账&nbsp;&nbsp;量入为出
@@ -72,26 +80,34 @@
</h4> </h4>
</div> </div>
<div class="features"> <div class="features">
<ul> <ul class="zui-card-list">
<li> <li class="zui-card">
<img :src="feature1"/> <div class="zui-card__media"><img :src="feature1" alt="记账管理" loading="lazy" decoding="async" width="96" height="96"></div>
<h4>记账管理</h4> <div class="zui-card__body">
<p>最专业的个人记账服务。</p> <h4 class="zui-card__title">记账管理</h4>
<p class="zui-card__desc">最专业的个人记账服务。</p>
</div>
</li> </li>
<li> <li class="zui-card">
<img :src="feature2"/> <div class="zui-card__media"><img :src="feature2" alt="健康档案" loading="lazy" decoding="async" width="96" height="96"></div>
<h4>健康档案</h4> <div class="zui-card__body">
<p>满足健康档案记录需求。</p> <h4 class="zui-card__title">健康档案</h4>
<p class="zui-card__desc">满足健康档案记录需求。</p>
</div>
</li> </li>
<li> <li class="zui-card">
<img :src="feature3"/> <div class="zui-card__media"><img :src="feature3" alt="茅台预约" loading="lazy" decoding="async" width="96" height="96"></div>
<h4>茅台预约</h4> <div class="zui-card__body">
<p>提供安全高效自动预约。</p> <h4 class="zui-card__title">茅台预约</h4>
<p class="zui-card__desc">提供安全高效自动预约。</p>
</div>
</li> </li>
<li> <li class="zui-card">
<img :src="feature4"/> <div class="zui-card__media"><img :src="feature4" alt="产品服务" loading="lazy" decoding="async" width="96" height="96"></div>
<h4>产品服务</h4> <div class="zui-card__body">
<p>全天尽享服务贴心之旅‌‌。</p> <h4 class="zui-card__title">产品服务</h4>
<p class="zui-card__desc">全天尽享服务贴心之旅‌‌。</p>
</div>
</li> </li>
</ul> </ul>
</div> </div>
@@ -122,9 +138,8 @@
import feature3 from '../assets/img/feature3.png' import feature3 from '../assets/img/feature3.png'
import feature4 from '../assets/img/feature4.png' import feature4 from '../assets/img/feature4.png'
import Util from '../Util' import Util from '../Util'
import DropList from 'vue-droplist'
export default{ export default{
components: {Page, Logo, ZuiHeader, ZuiFooter,ZuiButton,DropList}, components: {Page, Logo, ZuiHeader, ZuiFooter,ZuiButton},
data () { data () {
return { return {
feature1: feature1, feature1: feature1,
@@ -133,24 +148,8 @@
feature4: feature4, feature4: feature4,
mobileShow: false, mobileShow: false,
webShow: true, webShow: true,
carouselPerPage: (Util.os.android || Util.os.iPhone|| Util.os.mobile|| Util.os.isapp|| Util.os.harmonyOS) ? 1 : 2, drawerVisible: false,
configData : { carouselPerPage: (Util.os.android || Util.os.iPhone|| Util.os.mobile|| Util.os.isapp|| Util.os.harmonyOS) ? 1 : 2
position: { // 设置显示位置，position
top: '60px',
right: '15px',
bottom: '',
left: ''
},
width: '40%', // 设置宽度
list: [ // 设置下拉列表数据和对应的点击事件
{text: '首页', action: this.gohome},
// {text: '记账平台', action: this.goinvest},
// {text: '健康档案', action: this.gohealth},
// {text: '茅台预约', action: this.goimaotai},
{text: '资料下载', action: this.goresource},
{text: '联系我们', action: this.gocallus}
]
}
} }
}, },
created() { created() {
@@ -174,7 +173,7 @@
} }
}, },
openMenu: function () { openMenu: function () {
this.$refs.droplist.show() this.drawerVisible = true
}, },
gohome: function () { gohome: function () {
this.$router.push({path:'/'}) this.$router.push({path:'/'})
@@ -194,6 +193,9 @@
gohealth: function () { gohealth: function () {
window.open("http://152.136.151.187:89/#/", '_blank'); window.open("http://152.136.151.187:89/#/", '_blank');
}, },
closeMenu: function () {
this.drawerVisible = false
},
init: function () { init: function () {
if((Util.os.android || Util.os.iPhone|| Util.os.mobile|| Util.os.isapp|| Util.os.harmonyOS)){ if((Util.os.android || Util.os.iPhone|| Util.os.mobile|| Util.os.isapp|| Util.os.harmonyOS)){
this.webShow=false this.webShow=false
@@ -206,16 +208,77 @@
}, },
} }
} };
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.rightcol{ .features {
background: linear-gradient(180deg, #def0ef 0%, #f5fbfc 100%);
padding: 50px 0;
.zui-card-list {
list-style: none;
margin: 0 auto;
padding: 0;
display: grid;
grid-template-columns: repeat(4, minmax(220px, 1fr));
gap: 24px;
max-width: 1200px;
}
.zui-card {
display: flex; display: flex;
float: right; flex-direction: column;
line-height: 30px; align-items: center;
margin: 15px 10px 0 0; text-align: center;
min-width: 50px; padding: 20px;
font-weight: bold; border: 1px solid rgba(255,255,255,0.45);
color: #32adc6; border-radius: 16px;
background: rgba(255,255,255,0.75);
box-shadow: var(--shadow-1);
min-height: 240px;
/* override legacy list item rules */
padding-left: 0 !important;
position: relative !important;
backdrop-filter: saturate(180%) blur(8px);
transition: transform var(--transition-fast) ease, box-shadow var(--transition-fast) ease;
}
.zui-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-2);
}
.zui-card__media {
width: 96px;
height: 96px;
margin-bottom: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.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));
}
.zui-card__title {
margin: 10px 0 6px 0;
font-size: 16px;
color: var(--color-text);
}
.zui-card__desc {
font-size: 13px;
color: #666;
}
}
@media (max-width: 1024px) {
.features .zui-card-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.features .zui-card-list { grid-template-columns: 1fr; }
.features .zui-card__media img { width: 80px; }
} }
</style> </style>

65
src/views/callus.vue
View File

@@ -3,17 +3,16 @@
<zui-header> <zui-header>
<logo type="xiaoyanyun" href="/"></logo> <logo type="xiaoyanyun" href="/"></logo>
<h4 v-show="webShow" class="zui-logo-text"> <h4 v-show="webShow" class="zui-logo-text">
<a style="text-decoration: none;" href="http://152.136.151.187:88/login" target="_blank">&nbsp;&nbsp;记账平台</a> <a class="zui-nav-link" href="http://152.136.151.187:88/login" target="_blank">&nbsp;&nbsp;记账平台</a>
<a style="text-decoration: none;" href="http://152.136.151.187:81/hrms/login" target="_blank">&nbsp;&nbsp;健康档案</a> <a class="zui-nav-link" href="http://152.136.151.187:81/hrms/login" target="_blank">&nbsp;&nbsp;健康档案</a>
<a style="text-decoration: none;" href="http://152.136.151.187:8081/imaotai/" target="_blank">&nbsp;&nbsp;茅台预约</a> <a class="zui-nav-link" href="http://152.136.151.187:8081/imaotai/" target="_blank">&nbsp;&nbsp;茅台预约</a>
</h4> </h4>
<div v-show="mobileShow" class="rightcol" @click="openMenu" style="color: #0b8ba5;font-size: 14px;">◄目录►</div> <div v-show="mobileShow" class="zui-rightcol" @click="openMenu">◄目录►</div>
<div v-show="mobileShow" class="rightcol"> <div v-show="mobileShow" class="zui-rightcol">
<a style="text-decoration: none;font-size: 12px;" href="http://152.136.151.187:86/#/" target="_blank">&nbsp;&nbsp;记账平台</a> <a class="zui-nav-link zui-nav-link--mobile" href="http://152.136.151.187:86/#/" target="_blank">&nbsp;&nbsp;记账平台</a>
<a style="text-decoration: none;font-size: 12px;" href="http://152.136.151.187:89/#/" target="_blank">&nbsp;&nbsp;健康档案</a> <a class="zui-nav-link zui-nav-link--mobile" href="http://152.136.151.187:89/#/" target="_blank">&nbsp;&nbsp;健康档案</a>
<a style="text-decoration: none;font-size: 12px;" href="http://152.136.151.187:90/#/" target="_blank">&nbsp;&nbsp;茅台预约</a> <a class="zui-nav-link zui-nav-link--mobile" href="http://152.136.151.187:90/#/" target="_blank">&nbsp;&nbsp;茅台预约</a>
</div> </div>
<drop-list :config="configData" ref="droplist"></drop-list>
<div v-show="webShow"> <div v-show="webShow">
<zui-button @click="onButtonClick('callus')">联系我们</zui-button> <zui-button @click="onButtonClick('callus')">联系我们</zui-button>
<zui-button @click="onButtonClick('resource')">资料下载</zui-button> <zui-button @click="onButtonClick('resource')">资料下载</zui-button>
@@ -23,6 +22,15 @@
<zui-button @click="onButtonClick('home')">首页</zui-button> <zui-button @click="onButtonClick('home')">首页</zui-button>
</div> </div>
</zui-header> </zui-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>
<ul class="zui-drawer__list">
<li @click="gohome">首页</li>
<li @click="goresource">资料下载</li>
<li @click="gocallus">联系我们</li>
</ul>
</div>
<div class="service"> <div class="service">
<h1> <h1>
联系我们->注册账号->免费使用 联系我们->注册账号->免费使用
@@ -72,9 +80,8 @@
import feature3 from '../assets/img/feature3.png' import feature3 from '../assets/img/feature3.png'
import feature4 from '../assets/img/feature4.png' import feature4 from '../assets/img/feature4.png'
import Util from '../Util' import Util from '../Util'
import DropList from 'vue-droplist'
export default{ export default{
components: {Page, Logo, ZuiHeader, ZuiFooter,ZuiButton,DropList}, components: {Page, Logo, ZuiHeader, ZuiFooter,ZuiButton},
data () { data () {
return { return {
feature1: feature1, feature1: feature1,
@@ -83,24 +90,8 @@
feature4: feature4, feature4: feature4,
mobileShow: false, mobileShow: false,
webShow: true, webShow: true,
carouselPerPage: (Util.os.android || Util.os.iPhone|| Util.os.wechat|| Util.os.mobile|| Util.os.isapp|| Util.os.harmonyOS) ? 1 : 2, drawerVisible: false,
configData : { carouselPerPage: (Util.os.android || Util.os.iPhone|| Util.os.wechat|| Util.os.mobile|| Util.os.isapp|| Util.os.harmonyOS) ? 1 : 2
position: { // 设置显示位置，position
top: '60px',
right: '15px',
bottom: '',
left: ''
},
width: '40%', // 设置宽度
list: [ // 设置下拉列表数据和对应的点击事件
{text: '首页', action: this.gohome},
// {text: '记账平台', action: this.goinvest},
// {text: '健康档案', action: this.gohealth},
// {text: '茅台预约', action: this.goimaotai},
{text: '资料下载', action: this.goresource},
{text: '联系我们', action: this.gocallus}
]
}
} }
}, },
created() { created() {
@@ -124,7 +115,7 @@
} }
}, },
openMenu: function () { openMenu: function () {
this.$refs.droplist.show() this.drawerVisible = true
}, },
gohome: function () { gohome: function () {
this.$router.push({path:'/'}) this.$router.push({path:'/'})
@@ -144,6 +135,9 @@
gohealth: function () { gohealth: function () {
window.open("http://152.136.151.187:89/#/", '_blank'); window.open("http://152.136.151.187:89/#/", '_blank');
}, },
closeMenu: function () {
this.drawerVisible = false
},
init: function () { init: function () {
if((Util.os.android || Util.os.iPhone|| Util.os.mobile|| Util.os.isapp|| Util.os.harmonyOS)){ if((Util.os.android || Util.os.iPhone|| Util.os.mobile|| Util.os.isapp|| Util.os.harmonyOS)){
this.webShow=false this.webShow=false
@@ -158,14 +152,3 @@
} }
</script> </script>
<style scoped lang="less">
.rightcol{
display: flex;
float: right;
line-height: 30px;
margin: 15px 10px 0 0;
min-width: 50px;
font-weight: bold;
color: #32adc6;
}
</style>

9
src/views/less/home-page.less
View File

@@ -6,6 +6,13 @@
background-size: cover; background-size: cover;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
&:before {
content: '';
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%);
pointer-events: none;
}
img { img {
top: 0; top: 0;
left: 0; left: 0;
@@ -19,11 +26,13 @@
color: #fff; color: #fff;
font-size: 42px; font-size: 42px;
margin: 0; margin: 0;
text-shadow: 0 2px 12px rgba(0,0,0,0.25);
} }
h3 { h3 {
color: #fff; color: #fff;
font-size: 24px; font-size: 24px;
margin-top: 28px; margin-top: 28px;
text-shadow: 0 1px 6px rgba(0,0,0,0.2);
} }
} }
.nav { .nav {

237
src/views/resource.vue
View File

@@ -3,17 +3,16 @@
<zui-header> <zui-header>
<logo type="xiaoyanyun" href="/"></logo> <logo type="xiaoyanyun" href="/"></logo>
<h4 v-show="webShow" class="zui-logo-text"> <h4 v-show="webShow" class="zui-logo-text">
<a style="text-decoration: none;" href="http://152.136.151.187:88/login">&nbsp;&nbsp;记账平台</a> <a class="zui-nav-link" href="http://152.136.151.187:88/login">&nbsp;&nbsp;记账平台</a>
<a style="text-decoration: none;" href="http://152.136.151.187:81/hrms/login" target="_blank">&nbsp;&nbsp;健康档案</a> <a class="zui-nav-link" href="http://152.136.151.187:81/hrms/login" target="_blank">&nbsp;&nbsp;健康档案</a>
<a style="text-decoration: none;" href="http://152.136.151.187:8081/imaotai/" target="_blank">&nbsp;&nbsp;茅台预约</a> <a class="zui-nav-link" href="http://152.136.151.187:8081/imaotai/" target="_blank">&nbsp;&nbsp;茅台预约</a>
</h4> </h4>
<div v-show="mobileShow" class="rightcol" @click="openMenu" style="color: #0b8ba5;font-size: 14px;">◄目录►</div> <div v-show="mobileShow" class="zui-rightcol" @click="openMenu">◄目录►</div>
<div v-show="mobileShow" class="rightcol"> <div v-show="mobileShow" class="zui-rightcol">
<a style="text-decoration: none;font-size: 12px;" href="http://152.136.151.187:86/#/" target="_blank">&nbsp;&nbsp;记账平台</a> <a class="zui-nav-link zui-nav-link--mobile" href="http://152.136.151.187:86/#/" target="_blank">&nbsp;&nbsp;记账平台</a>
<a style="text-decoration: none;font-size: 12px;" href="http://152.136.151.187:89/#/" target="_blank">&nbsp;&nbsp;健康档案</a> <a class="zui-nav-link zui-nav-link--mobile" href="http://152.136.151.187:89/#/" target="_blank">&nbsp;&nbsp;健康档案</a>
<a style="text-decoration: none;font-size: 12px;" href="http://152.136.151.187:90/#/" target="_blank">&nbsp;&nbsp;茅台预约</a> <a class="zui-nav-link zui-nav-link--mobile" href="http://152.136.151.187:90/#/" target="_blank">&nbsp;&nbsp;茅台预约</a>
</div> </div>
<drop-list :config="configData" ref="droplist"></drop-list>
<div v-show="webShow"> <div v-show="webShow">
<zui-button @click="onButtonClick('callus')">联系我们</zui-button> <zui-button @click="onButtonClick('callus')">联系我们</zui-button>
<zui-button @click="onButtonClick('resource')">资料下载</zui-button> <zui-button @click="onButtonClick('resource')">资料下载</zui-button>
@@ -23,6 +22,15 @@
<zui-button @click="onButtonClick('home')">首页</zui-button> <zui-button @click="onButtonClick('home')">首页</zui-button>
</div> </div>
</zui-header> </zui-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>
<ul class="zui-drawer__list">
<li @click="gohome">首页</li>
<li @click="goresource">资料下载</li>
<li @click="gocallus">联系我们</li>
</ul>
</div>
<div class="service"> <div class="service">
<h1> <h1>
安卓APP下载->系统介绍->使用手册 安卓APP下载->系统介绍->使用手册
@@ -32,39 +40,40 @@
</h3> </h3>
</div> </div>
<div class="features"> <div class="features">
<ul> <ul class="zui-card-list">
<li> <li class="zui-card">
<img :src="Invest"/> <div class="zui-card__media"><img :src="Invest" alt="记账管理平台" loading="lazy" decoding="async" width="120" height="120"></div>
<h4>记账管理平台&nbsp;&nbsp; <a href="/static/download/invest/intcInvest-V1.0.apk" target="_blank">安卓APP下载</a></h4> <div class="zui-card__body">
<h4 class="zui-card__title">记账管理平台</h4>
<p> <div class="zui-card__actions">
<a href="/static/download/invest/intcInvest-Introduction.pdf" target="_blank">系统介绍</a>&nbsp;&nbsp; <a class="zui-button-link zui-button-link--primary" href="/static/download/invest/intcInvest-V1.0.apk" target="_blank">安卓APP下载</a>
<a href="/static/download/invest/intcInvest-Manual.pdf" target="_blank" >PC手册</a>&nbsp;&nbsp; <a class="zui-button-link" href="/static/download/invest/intcInvest-Introduction.pdf" target="_blank">系统介绍</a>
<a href="/static/download/invest/intcInvestH5-Manual.pdf" target="_blank" >H5手册</a>&nbsp;&nbsp; <a class="zui-button-link" href="/static/download/invest/intcInvest-Manual.pdf" target="_blank">PC手册</a>
<!-- <a href="" @click="download(1);return false;">系统介绍</a>&nbsp;&nbsp; <a class="zui-button-link" href="/static/download/invest/intcInvestH5-Manual.pdf" target="_blank">H5手册</a>
<a href="" @click="download(2);return false;">PC手册</a>&nbsp;&nbsp; </div>
<a href="" @click="download(3);return false;" >H5手册</a>&nbsp;&nbsp; --> </div>
</p>
</li> </li>
<li> <li class="zui-card">
<img :src="Health"/> <div class="zui-card__media"><img :src="Health" alt="健康管理平台" loading="lazy" decoding="async" width="120" height="120"></div>
<h4>健康管理平台&nbsp;&nbsp; <a href="/static/download/health/intcHealth-V1.0.apk" target="_blank">安卓APP下载</a></h4> <div class="zui-card__body">
<p> <h4 class="zui-card__title">健康管理平台</h4>
<a href="/static/download/health/intcHealth-Introduction.pdf" target="_blank">系统介绍</a>&nbsp;&nbsp; <div class="zui-card__actions">
<a href="/static/download/health/intcHealth-Manual.pdf" target="_blank">使用手册</a>&nbsp;&nbsp; <a class="zui-button-link zui-button-link--primary" href="/static/download/health/intcHealth-V1.0.apk" target="_blank">安卓APP下载</a>
<!-- <a href="" @click="download(4);return false;">系统介绍</a>&nbsp;&nbsp; <a class="zui-button-link" href="/static/download/health/intcHealth-Introduction.pdf" target="_blank">系统介绍</a>
<a href="" @click="download(5);return false;">使用手册</a>&nbsp;&nbsp; --> <a class="zui-button-link" href="/static/download/health/intcHealth-Manual.pdf" target="_blank">使用手册</a>
</p> </div>
</div>
</li> </li>
<li> <li class="zui-card">
<img :src="imaotai"/> <div class="zui-card__media"><img :src="imaotai" alt="茅台预约平台" loading="lazy" decoding="async" width="120" height="120"></div>
<h4>茅台预约平台&nbsp;&nbsp; <a href="/static/download/imaotai/intcImaotai-V1.0.apk" target="_blank">安卓APP下载</a></h4> <div class="zui-card__body">
<p> <h4 class="zui-card__title">茅台预约平台</h4>
<a href="/static/download/imaotai/intcImaotai-Introduction.pdf" target="_blank">系统介绍</a>&nbsp;&nbsp; <div class="zui-card__actions">
<a href="/static/download/imaotai/intcImaotai-Manual.pdf" target="_blank">使用手册</a>&nbsp;&nbsp; <a class="zui-button-link zui-button-link--primary" href="/static/download/imaotai/intcImaotai-V1.0.apk" target="_blank">安卓APP下载</a>
<!-- <a href="" @click="download(6);return false;">系统介绍</a>&nbsp;&nbsp; <a class="zui-button-link" href="/static/download/imaotai/intcImaotai-Introduction.pdf" target="_blank">系统介绍</a>
<a href="" @click="download(7);return false;">使用手册</a>&nbsp;&nbsp; --> <a class="zui-button-link" href="/static/download/imaotai/intcImaotai-Manual.pdf" target="_blank">使用手册</a>
</p> </div>
</div>
</li> </li>
</ul> </ul>
</div> </div>
@@ -72,7 +81,6 @@
</page> </page>
</template> </template>
<script> <script>
import './less/home-page.less'
import Logo from '../components/Logo' import Logo from '../components/Logo'
import Page from '../components/Page' import Page from '../components/Page'
import ZuiHeader from '../components/Header' import ZuiHeader from '../components/Header'
@@ -86,9 +94,8 @@
import Health from '../assets/img/health.png' import Health from '../assets/img/health.png'
import imaotai from '../assets/img/imaotai.png' import imaotai from '../assets/img/imaotai.png'
import Util from '../Util' import Util from '../Util'
import DropList from 'vue-droplist'
export default{ export default{
components: {Page, Logo, ZuiHeader, ZuiFooter,ZuiButton,DropList}, components: {Page, Logo, ZuiHeader, ZuiFooter,ZuiButton},
data () { data () {
return { return {
feature1: feature1, feature1: feature1,
@@ -100,24 +107,8 @@
Invest: Invest, Invest: Invest,
mobileShow: false, mobileShow: false,
webShow: true, webShow: true,
carouselPerPage: (Util.os.android || Util.os.iPhone|| Util.os.wechat|| Util.os.mobile|| Util.os.isapp|| Util.os.harmonyOS) ? 1 : 2, drawerVisible: false,
configData : { carouselPerPage: (Util.os.android || Util.os.iPhone|| Util.os.wechat|| Util.os.mobile|| Util.os.isapp|| Util.os.harmonyOS) ? 1 : 2
position: { // 设置显示位置，position
top: '60px',
right: '15px',
bottom: '',
left: ''
},
width: '40%', // 设置宽度
list: [ // 设置下拉列表数据和对应的点击事件
{text: '首页', action: this.gohome},
// {text: '记账平台', action: this.goinvest},
// {text: '健康档案', action: this.gohealth},
// {text: '茅台预约', action: this.goimaotai},
{text: '资料下载', action: this.goresource},
{text: '联系我们', action: this.gocallus}
]
}
} }
}, },
created() { created() {
@@ -141,7 +132,7 @@
} }
}, },
openMenu: function () { openMenu: function () {
this.$refs.droplist.show() this.drawerVisible = true
}, },
gohome: function () { gohome: function () {
this.$router.push({path:'/'}) this.$router.push({path:'/'})
@@ -161,6 +152,9 @@
gohealth: function () { gohealth: function () {
window.open("http://152.136.151.187:89/#/", '_blank'); window.open("http://152.136.151.187:89/#/", '_blank');
}, },
closeMenu: function () {
this.drawerVisible = false
},
// 授权书下载 // 授权书下载
download(type) { download(type) {
@@ -215,13 +209,118 @@ download(type) {
} }
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.rightcol{ .features {
background: linear-gradient(180deg, #def0ef 0%, #f5fbfc 100%);
padding: 50px 0;
.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;
}
.zui-card {
display: flex; display: flex;
float: right; flex-direction: column;
line-height: 30px; align-items: center;
margin: 15px 10px 0 0; text-align: center;
min-width: 50px; padding: 20px;
font-weight: bold; border: 1px solid rgba(255,255,255,0.45);
color: #32adc6; 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;
}
.zui-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-2);
}
.zui-card__media img {
width: 100%;
height: 100%;
display: block;
position: static !important;
top: auto !important;
left: auto !important;
object-fit: cover;
border-radius: 16px;
filter: drop-shadow(0 6px 12px rgba(0,0,0,0.15));
}
.zui-card__media {
width: 120px;
height: 120px;
margin-right: 0;
margin-bottom: 12px;
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;
color: #656b79;
background: #f6f8fa;
border: 1px solid #c8c8cd;
border-radius: 6px;
text-decoration: none;
min-width: 96px;
text-align: center;
}
.zui-card__title {
margin: 10px 0 6px 0;
font-size: 18px;
color: var(--color-text);
}
.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 {
background: linear-gradient(135deg, #00b8ff, #007bff);
border-color: #007bff;
}
}
@media (max-width: 1024px) {
.features .zui-card-list {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.features .zui-card-list {
grid-template-columns: 1fr;
}
.features .zui-card {
align-items: flex-start;
}
.features .zui-card__media img {
width: 80px;
}
} }
</style> </style>