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

fix:界面优化

Browse Source
This commit is contained in:
tianyongbao
2025-12-10 22:56:08 +08:00
parent 96e217948b
commit 0d2e125059
11 changed files with 312 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/assets/img/feature1.svg Normal file
View File

@@ -0,0 +1,20 @@
<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#4CAF50;stop-opacity:1" />
<stop offset="100%" style="stop-color:#45a049;stop-opacity:1" />
</linearGradient>
</defs>
<circle cx="48" cy="48" r="44" fill="url(#grad1)" opacity="0.1"/>
<circle cx="48" cy="48" r="40" fill="none" stroke="url(#grad1)" stroke-width="3"/>
<!-- 钱包图标 -->
<path d="M 28 35 L 68 35 C 70.2 35 72 36.8 72 39 L 72 61 C 72 63.2 70.2 65 68 65 L 28 65 C 25.8 65 24 63.2 24 61 L 24 39 C 24 36.8 25.8 35 28 35 Z" fill="url(#grad1)" opacity="0.8"/>
<!-- 钱币符号 ¥ -->
<text x="48" y="56" font-family="Arial, sans-serif" font-size="24" font-weight="bold" fill="#ffffff" text-anchor="middle">¥</text>
<!-- 账本线条 -->
<line x1="32" y1="42" x2="44" y2="42" stroke="#ffffff" stroke-width="2" opacity="0.6"/>
<line x1="32" y1="48" x2="40" y2="48" stroke="#ffffff" stroke-width="2" opacity="0.6"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

20
src/assets/img/feature2.svg Normal file
View File

@@ -0,0 +1,20 @@
<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96">
<defs>
<linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#E91E63;stop-opacity:1" />
<stop offset="100%" style="stop-color:#C2185B;stop-opacity:1" />
</linearGradient>
</defs>
<circle cx="48" cy="48" r="44" fill="url(#grad2)" opacity="0.1"/>
<circle cx="48" cy="48" r="40" fill="none" stroke="url(#grad2)" stroke-width="3"/>
<!-- 心电图/健康图标 -->
<path d="M 28 50 L 35 50 L 38 42 L 42 58 L 46 38 L 50 50 L 68 50" fill="none" stroke="url(#grad2)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
<!-- 心形 -->
<path d="M 48 62 C 48 62 38 54 38 46 C 38 42 40 40 43 40 C 45 40 47 41 48 43 C 49 41 51 40 53 40 C 56 40 58 42 58 46 C 58 54 48 62 48 62 Z" fill="url(#grad2)" opacity="0.8"/>
<!-- 十字符号 -->
<rect x="45" y="26" width="6" height="10" rx="1" fill="url(#grad2)"/>
<rect x="42" y="29" width="12" height="4" rx="1" fill="url(#grad2)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

27
src/assets/img/feature3.svg Normal file
View File

@@ -0,0 +1,27 @@
<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96">
<defs>
<linearGradient id="grad3" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#FF9800;stop-opacity:1" />
<stop offset="100%" style="stop-color:#F57C00;stop-opacity:1" />
</linearGradient>
</defs>
<circle cx="48" cy="48" r="44" fill="url(#grad3)" opacity="0.1"/>
<circle cx="48" cy="48" r="40" fill="none" stroke="url(#grad3)" stroke-width="3"/>
<!-- 酒瓶轮廓 -->
<path d="M 42 28 L 54 28 L 54 32 L 52 32 L 52 36 C 56 38 58 42 58 48 L 58 64 C 58 66 56 68 54 68 L 42 68 C 40 68 38 66 38 64 L 38 48 C 38 42 40 38 44 36 L 44 32 L 42 32 Z" fill="url(#grad3)" opacity="0.8"/>
<!-- 瓶盖 -->
<rect x="44" y="24" width="8" height="4" rx="1" fill="url(#grad3)"/>
<!-- 酒标签 -->
<ellipse cx="48" cy="52" rx="8" ry="10" fill="#ffffff" opacity="0.3"/>
<!-- 日历/预约符号 -->
<rect x="60" y="26" width="10" height="12" rx="1" fill="url(#grad3)" opacity="0.9"/>
<line x1="62" y1="28" x2="68" y2="28" stroke="#ffffff" stroke-width="1.5"/>
<circle cx="63" cy="32" r="1" fill="#ffffff"/>
<circle cx="67" cy="32" r="1" fill="#ffffff"/>
<circle cx="63" cy="35" r="1" fill="#ffffff"/>
<circle cx="67" cy="35" r="1" fill="#ffffff"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

20
src/assets/img/feature4.svg Normal file
View File

@@ -0,0 +1,20 @@
<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96">
<defs>
<linearGradient id="grad4" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#2196F3;stop-opacity:1" />
<stop offset="100%" style="stop-color:#1976D2;stop-opacity:1" />
</linearGradient>
</defs>
<circle cx="48" cy="48" r="44" fill="url(#grad4)" opacity="0.1"/>
<circle cx="48" cy="48" r="40" fill="none" stroke="url(#grad4)" stroke-width="3"/>
<!-- 客服耳机图标 -->
<path d="M 48 32 C 38 32 30 40 30 50 L 30 58 C 30 60 32 62 34 62 L 38 62 C 40 62 42 60 42 58 L 42 52 C 42 50 40 48 38 48 L 34 48 L 34 50 C 34 42 40 36 48 36 C 56 36 62 42 62 50 L 62 48 L 58 48 C 56 48 54 50 54 52 L 54 58 C 54 60 56 62 58 62 L 62 62 C 64 60 66 58 66 58 L 66 50 C 66 40 58 32 48 32 Z" fill="url(#grad4)" opacity="0.8"/>
<!-- 麦克风 -->
<rect x="45" y="62" width="6" height="8" rx="3" fill="url(#grad4)"/>
<line x1="42" y1="70" x2="54" y2="70" stroke="url(#grad4)" stroke-width="2" stroke-linecap="round"/>
<!-- 服务星标 -->
<path d="M 48 24 L 50 29 L 55 29 L 51 32 L 53 37 L 48 34 L 43 37 L 45 32 L 41 29 L 46 29 Z" fill="url(#grad4)" opacity="0.6"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

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

@@ -52,12 +52,34 @@
}
}
@media (max-width: 420px) {
@media (max-width: 768px) {
.@{prefix}-footer {
padding: 25px 15px 15px 15px;
.footer-content {
flex-direction: column;
gap: 15px;
padding: 0;
}
.footer-qrcode {
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 {
margin: 0 5px;
font-size: 12px;
display: inline-block;
margin: 0 3px;
padding: 4px 6px;
font-size: 11px;
line-height: 1.6;
border-radius: 4px;
&:after {
content: none;
}
@@ -65,21 +87,16 @@
br {
display: block;
}
img {
width: 14px !important;
height: 16px !important;
vertical-align: middle;
}
.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;
.copy-right {
font-size: 11px;
padding: 10px 5px;
line-height: 1.5;
}
}
}

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

@@ -58,7 +58,7 @@
}
}
@media (max-width: 420px) {
@media (max-width: 768px) {
.@{prefix}-header{
height: 60px;
.zui-logo{
@@ -67,31 +67,50 @@
margin: 0 0 0 10px;
}
.@{prefix}-logo-text{
padding-top: 14px;
font-size: 12px;
height: 60px;
line-height: 60px;
font-size: 10px;
margin: 0;
a {
margin: 0 4px;
font-size: 10px;
}
}
.@{prefix}-button{
display: none;
display: none !important;
}
.@{prefix}-rightcol{
display: flex;
font-size: 10px;
display: flex !important;
align-items: center;
justify-content: center;
font-size: 14px;
float: right;
line-height: 30px;
margin: 15px 5px 0 0;
min-width: 50px;
line-height: 35px;
margin: 12px 10px 0 0;
min-width: 60px;
padding: 0 12px;
font-weight: bold;
color: #32adc6;
color: #fff;
background: linear-gradient(135deg, #35A3BA, #0088ff);
border-radius: 6px;
cursor: pointer;
box-shadow: 0 2px 6px rgba(53, 163, 186, 0.3);
transition: all 0.2s ease;
}
.@{prefix}-rightcol:active {
transform: scale(0.96);
box-shadow: 0 1px 3px rgba(53, 163, 186, 0.4);
}
.@{prefix}-logo-line {
width: 1px;
height: 30px;
background: #32adc6;
display: inline-block;
position: relative;
top: 15px;
left: 5px;
display: none;
}
}
}
@media (min-width: 769px) {
.@{prefix}-header{
.@{prefix}-rightcol{
display: none !important;
}
}
}

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

@@ -90,6 +90,11 @@
background: #f6f8fa;
cursor: pointer;
}
@media (max-width: 600px) {
.zui-page {
overflow-x: hidden;
}
}
@media (min-width: 1200px) {
.zui-drawer,
.zui-drawer-overlay {

48
src/views/HomePage.vue
View File

@@ -2,17 +2,12 @@
<page class="home-page">
<zui-header>
<logo type="xiaoyanyun" href="/"></logo>
<h4 v-show="webShow" class="zui-logo-text">
<h4 class="zui-logo-text">
<a class="zui-nav-link" href="http://152.136.151.187:88/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 class="zui-nav-link" href="http://152.136.151.187:8081/imaotai/" target="_blank">&nbsp;&nbsp;茅台预约</a>
</h4>
<div v-show="mobileShow" class="zui-rightcol" @click="openMenu">◄目录►</div>
<div v-show="mobileShow" class="zui-rightcol">
<a class="zui-nav-link zui-nav-link--mobile" 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:89/#/" 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 v-show="webShow">
<zui-button @click="onButtonClick('callus')">联系我们</zui-button>
<zui-button @click="onButtonClick('resource')">资料下载</zui-button>
@@ -133,10 +128,10 @@
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 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 Util from '../Util'
export default{
components: {Page, Logo, ZuiHeader, ZuiFooter,ZuiButton},
@@ -275,10 +270,37 @@
}
}
@media (max-width: 1024px) {
.features .zui-card-list { grid-template-columns: repeat(2, 1fr); }
.features .zui-card-list {
grid-template-columns: repeat(2, 1fr);
padding: 0 20px;
}
}
@media (max-width: 600px) {
.features .zui-card-list { grid-template-columns: 1fr; }
.features .zui-card__media img { width: 80px; }
.features {
padding: 30px 15px !important;
}
.features .zui-card-list {
grid-template-columns: 1fr;
gap: 16px;
padding: 0 10px;
}
.features .zui-card {
min-height: 200px;
padding: 16px !important;
}
.features .zui-card__media {
width: 70px;
height: 70px;
}
.features .zui-card__media img {
width: 70px !important;
height: 70px !important;
}
.features .zui-card__title {
font-size: 15px !important;
}
.features .zui-card__desc {
font-size: 12px !important;
}
}
</style>

43
src/views/callus.vue
View File

@@ -2,17 +2,12 @@
<page class="home-page">
<zui-header>
<logo type="xiaoyanyun" href="/"></logo>
<h4 v-show="webShow" class="zui-logo-text">
<h4 class="zui-logo-text">
<a class="zui-nav-link" href="http://152.136.151.187:88/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 class="zui-nav-link" href="http://152.136.151.187:8081/imaotai/" target="_blank">&nbsp;&nbsp;茅台预约</a>
</h4>
<div v-show="mobileShow" class="zui-rightcol" @click="openMenu">◄目录►</div>
<div v-show="mobileShow" class="zui-rightcol">
<a class="zui-nav-link zui-nav-link--mobile" 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:89/#/" 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 v-show="webShow">
<zui-button @click="onButtonClick('callus')">联系我们</zui-button>
<zui-button @click="onButtonClick('resource')">资料下载</zui-button>
@@ -152,3 +147,39 @@
}
</script>
<style scoped lang="less">
@media (max-width: 600px) {
.service {
padding: 30px 15px !important;
}
.service h1 {
font-size: 20px !important;
line-height: 28px !important;
}
.service h3 {
font-size: 15px !important;
line-height: 22px !important;
}
.features {
padding: 25px 15px !important;
}
.features ul {
max-width: 100% !important;
padding: 0 10px !important;
}
.features ul li {
margin-top: 20px !important;
padding-left: 50px !important;
}
.features ul li img {
width: 40px !important;
}
.features ul li h4 {
font-size: 16px !important;
}
.features ul li p {
font-size: 13px !important;
line-height: 1.6 !important;
}
}
</style>

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

@@ -1,4 +1,5 @@
.home-page {
overflow-x: hidden;
.banner {
text-align: center;
padding: 180px 20px;
@@ -186,27 +187,34 @@
}
}
@media (max-width: 420px) {
@media (max-width: 768px) {
.home-page {
overflow-x: hidden;
width: 100%;
.banner {
padding: 80px 20px;
padding: 60px 15px;
h1 {
font-size: 24px;
font-size: 20px;
line-height: 1.4;
.br {
display: block;
}
}
h3 {
font-size: 12px;
line-height: 1.5;
margin-top: 15px;
}
}
.nav {
margin: 35px auto 0 auto;
margin: 20px auto 0 auto;
padding: 0 15px;
a {
float: none;
width: 270px;
margin: 25px auto;
padding: 32px 20px;
width: 100%;
max-width: 300px;
margin: 15px auto;
padding: 25px 15px;
&.zhichou {
color: #fff;
background: #32ADC6;
@@ -221,9 +229,10 @@
}
.watermark {
color: #fff !important;
font-size: 50px;
}
.zui-logo {
width: 110px;
width: 100px;
display: none;
}
.zui-logo.mobile {
@@ -242,52 +251,56 @@
margin: 0 0 30px 0;
}
.service{
padding: 36px 0;
padding: 30px 15px;
h1{
font-size: 24px;
line-height: 35px;
font-size: 22px;
line-height: 32px;
}
h3{
font-size: 18px;
font-size: 16px;
line-height: 24px;
}
h4{
font-size: 14px;
line-height: 24px;
line-height: 22px;
margin-top: 20px;
}
}
.features{
padding: 32px 0;
padding: 25px 15px;
ul{
max-width: 300px;
max-width: 100%;
padding: 0 10px;
li{
margin-top: 0;
padding-left: 55px;
margin-top: 15px;
padding-left: 50px;
img{
width: 35px;
width: 40px;
}
h4{
font-size: 18px;
font-size: 16px;
}
p{
font-size: 14px;
font-size: 13px;
}
}
}
}
.apply-hr{
padding: 25px 0;
padding: 25px 15px;
h2{
font-size: 20px;
font-size: 18px;
line-height: 26px;
}
h4{
font-size: 14px;
margin-top: 5px;
line-height: 20px;
margin-top: 10px;
}
}
.apply-hr-form{
padding: 20px 0;
padding: 20px 15px;
}
}
}

51
src/views/resource.vue
View File

@@ -2,17 +2,12 @@
<page class="home-page">
<zui-header>
<logo type="xiaoyanyun" href="/"></logo>
<h4 v-show="webShow" class="zui-logo-text">
<h4 class="zui-logo-text">
<a class="zui-nav-link" href="http://152.136.151.187:88/login">&nbsp;&nbsp;记账平台</a>
<a class="zui-nav-link" 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:8081/imaotai/" target="_blank">&nbsp;&nbsp;茅台预约</a>
</h4>
<div v-show="mobileShow" class="zui-rightcol" @click="openMenu">◄目录►</div>
<div v-show="mobileShow" class="zui-rightcol">
<a class="zui-nav-link zui-nav-link--mobile" 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:89/#/" 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 v-show="webShow">
<zui-button @click="onButtonClick('callus')">联系我们</zui-button>
<zui-button @click="onButtonClick('resource')">资料下载</zui-button>
@@ -48,8 +43,8 @@
<div class="zui-card__actions">
<a class="zui-button-link zui-button-link--primary" href="/static/download/invest/intcInvest-V1.0.apk" target="_blank">安卓APP下载</a>
<a class="zui-button-link" href="/static/download/invest/intcInvest-Introduction.pdf" target="_blank">系统介绍</a>
<a class="zui-button-link" href="/static/download/invest/intcInvest-Manual.pdf" target="_blank">PC手册</a>
<a class="zui-button-link" href="/static/download/invest/intcInvestH5-Manual.pdf" target="_blank">H5手册</a>
<a class="zui-button-link" href="/static/download/invest/intcInvest-Manual.pdf" target="_blank">使用手册</a>
<!-- <a class="zui-button-link" href="/static/download/invest/intcInvestH5-Manual.pdf" target="_blank">H5手册</a> -->
</div>
</div>
</li>
@@ -310,17 +305,53 @@ download(type) {
@media (max-width: 1024px) {
.features .zui-card-list {
grid-template-columns: repeat(2, 1fr);
padding: 0 20px;
}
}
@media (max-width: 600px) {
.service {
padding: 30px 15px !important;
}
.service h1 {
font-size: 20px !important;
line-height: 28px !important;
}
.service h3 {
font-size: 15px !important;
line-height: 22px !important;
}
.features {
padding: 30px 15px !important;
}
.features .zui-card-list {
grid-template-columns: 1fr;
gap: 20px;
padding: 0 10px;
}
.features .zui-card {
align-items: flex-start;
min-height: auto;
padding: 16px !important;
}
.features .zui-card__media {
width: 90px !important;
height: 90px !important;
}
.features .zui-card__media img {
width: 80px;
width: 90px !important;
height: 90px !important;
}
.features .zui-card__title {
font-size: 16px !important;
}
.features .zui-card__actions {
flex-direction: column;
gap: 8px;
}
.features .zui-button-link {
width: 100%;
min-width: auto;
padding: 8px 12px;
font-size: 13px;
}
}
</style>