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-27 18:51:49 +08:00
parent 0f699118e3
commit 4130c2746f
12 changed files with 101 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/img/intcIot.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 149 KiB

8
src/components/Logo.vue
View File

@@ -7,9 +7,11 @@
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: {
@@ -43,6 +45,12 @@
if (this.type === 'mplus') {
return mplusLogo
}
if (this.type === 'iot') {
return iotLogo
}
if (this.type === 'miot') {
return miotLogo
}
}
},
methods: {

BIN
src/components/img/hr-logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 64 KiB

After

Width:  |  Height:  |  Size: 66 KiB

BIN
src/components/img/iot-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 61 KiB

BIN
src/components/img/logo--.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 92 KiB

BIN
src/components/img/m-hr-logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 55 KiB

After

Width:  |  Height:  |  Size: 57 KiB

BIN
src/components/img/m-iot-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 55 KiB

BIN
src/components/img/m-logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 54 KiB

After

Width:  |  Height:  |  Size: 56 KiB

BIN
src/components/img/plus-logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 58 KiB

After

Width:  |  Height:  |  Size: 54 KiB

BIN
src/components/img/zlogo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 60 KiB

After

Width:  |  Height:  |  Size: 60 KiB

64
src/views/HomePage.vue
View File

@@ -18,38 +18,49 @@
<br>
<h1 class="vivify popIn">
<span class="br"></span>茅台预约&nbsp;&nbsp;解放双手
</h1><br>
<h1 class="vivify popIn">
<span class="br"></span>智聪物联&nbsp;&nbsp;万物互联
</h1>
<h3 class="vivify popIn">技术引领&nbsp;&nbsp;服务为基础&nbsp;&nbsp;用户为核心&nbsp;&nbsp;需求为导向</h3>
</div>
<div class="nav clear">
<a class="zhichou vivify popIn">
<div class="watermark blue">记账</div>
<logo type="zhongtai"></logo>
<logo class="mobile" type="mzhichou"></logo>
<a class="health vivify popIn delay-200">
<div class="watermark green">记账</div>
<logo type="hr"></logo>
<logo class="mobile" type="mhr"></logo>
<h3>解决个人记账难题</h3>
<h4>好用&nbsp;&nbsp;易用&nbsp;&nbsp;免费</h4>
</a>
<a class="hr vivify popIn delay-200">
<div class="watermark green">服务</div>
<logo type="hr"></logo>
<logo class="mobile" type="mhr"></logo>
<a class="zhichou vivify popIn">
<div class="watermark blue">服务</div>
<logo type="zhongtai"></logo>
<logo class="mobile" type="mzhichou"></logo>
<h3>健康档案管理专家</h3>
<h4>专业&nbsp;&nbsp;准确&nbsp;&nbsp;高效</h4>
</a>
<a class="plus vivify popIn delay-400">
<div class="watermark blue">预约</div>
<a class="imaotai vivify popIn delay-400">
<div class="watermark purple">预约</div>
<logo type="plus"></logo>
<logo class="mobile" type="mplus"></logo>
<h3>茅台预约得力助手</h3>
<h4>自动预约&nbsp;&nbsp;后顾无忧</h4>
</a>
<a class="iot vivify popIn delay-600">
<div class="watermark orange">物联</div>
<logo type="iot"></logo>
<logo class="mobile" type="miot"></logo>
<h3>智聪物联万物互联</h3>
<h4>互联万物&nbsp;&nbsp;智慧生活</h4>
</a>
</div>
<div class="service">
<h1>
记账专家、健康帮手、预约助手
记账专家、健康帮手、预约助手、物联万物
</h1>
<h3>
满足您的记账需求、健康记录、茅台预约
满足您的记账需求、健康记录、茅台预约、物联平台
</h3>
<h4 style="color: red;">
无需下载，永久免费！
@@ -58,31 +69,31 @@
<div class="features">
<ul class="zui-card-list">
<li class="zui-card">
<div class="zui-card__media"><img :src="feature1" alt="记账管理" loading="lazy" decoding="async" width="96" height="96"></div>
<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>
<p class="zui-card__desc">最专业的个人记账服务</p>
</div>
</li>
<li class="zui-card">
<div class="zui-card__media"><img :src="feature2" alt="健康档案" loading="lazy" decoding="async" width="96" height="96"></div>
<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>
<p class="zui-card__desc">满足健康档案记录需求</p>
</div>
</li>
<li class="zui-card">
<div class="zui-card__media"><img :src="feature3" alt="茅台预约" loading="lazy" decoding="async" width="96" height="96"></div>
<div class="zui-card__media"><img :src="imaotai" alt="茅台预约" loading="lazy" decoding="async" width="96" height="96"></div>
<div class="zui-card__body">
<h4 class="zui-card__title">茅台预约</h4>
<p class="zui-card__desc">提供安全高效自动预约。</p>
<p class="zui-card__desc">提供安全高效自动预约</p>
</div>
</li>
<li class="zui-card">
<div class="zui-card__media"><img :src="feature4" alt="产品服务" loading="lazy" decoding="async" width="96" height="96"></div>
<div class="zui-card__media"><img :src="intcIot" alt="产品服务" loading="lazy" decoding="async" width="96" height="96"></div>
<div class="zui-card__body">
<h4 class="zui-card__title">产品服务</h4>
<p class="zui-card__desc">全天尽享服务贴心之旅‌‌。</p>
<h4 class="zui-card__title">智聪物联</h4>
<p class="zui-card__desc">打造万物互联的统一平台</p>
</div>
</li>
</ul>
@@ -96,7 +107,7 @@
智聪网络科技 技术领先 想您所想
</h2>
<h4>
提供个人资产记账、健康档案管理、i茅台预约服务
提供个人资产记账、健康档案管理、i茅台预约服务、物联平台服务
</h4>
</div>
<zui-footer/>
@@ -113,6 +124,11 @@
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},
@@ -122,6 +138,10 @@
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
}
},

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

@@ -39,12 +39,14 @@
.nav {
padding-left: 0;
list-style: none;
max-width: 1065px;
max-width: 1400px;
margin: 20px auto 0 auto;
display: flex;
justify-content: center;
flex-wrap: wrap;
a {
float: left;
margin: 17px;
width: 320px;
width: 280px;
color: #32ADC6;
text-align: center;
display: block;
@@ -63,17 +65,41 @@
display: block;
}
}
&.zhichou {
color: #35A3BA;
border-color: #35A3BA;
}
&.zhichou:hover {
color: #fff;
background: #35A3BA;
background: linear-gradient(135deg, #35A3BA 0%, #2891A6 100%);
border-color: #35A3BA;
}
&.hr:hover {
color: #fff;
background: #6AC2B5;
&.health {
color: #6AC2B5;
border-color: #6AC2B5;
}
&.plus:hover {
&.health:hover {
color: #fff;
background: #35A3BA;
background: linear-gradient(135deg, #6AC2B5 0%, #4FAD9E 100%);
border-color: #6AC2B5;
}
&.imaotai {
color: #9B59B6;
border-color: #9B59B6;
}
&.imaotai:hover {
color: #fff;
background: linear-gradient(135deg, #9B59B6 0%, #8E44AD 100%);
border-color: #9B59B6;
}
&.iot {
color: #FF6B35;
border-color: #FF6B35;
}
&.iot:hover {
color: #fff;
background: linear-gradient(135deg, #FF6B35 0%, #E85A2A 100%);
border-color: #FF6B35;
}
.watermark {
top: 0;
@@ -86,7 +112,13 @@
color: #35A3BA;
}
&.green {
color: #00d6b2;
color: #6AC2B5;
}
&.purple {
color: #9B59B6;
}
&.orange {
color: #FF6B35;
}
}
.zui-logo {
@@ -104,14 +136,6 @@
font-size: 18px;
margin-top: 14px;
}
&.hr {
color: #6AC2B5;
border-bolor: #6AC2B5;
}
&.plus {
color: #35A3BA;
border-color: #35A3BA;
}
}
}
.join-zhichou {
@@ -217,15 +241,19 @@
padding: 25px 15px;
&.zhichou {
color: #fff;
background: #32ADC6;
background: linear-gradient(135deg, #35A3BA 0%, #2891A6 100%);
}
&.hr {
&.health {
color: #fff;
background: #6AC2B5;
background: linear-gradient(135deg, #6AC2B5 0%, #4FAD9E 100%);
}
&.plus {
&.imaotai {
color: #fff;
background: #236579;
background: linear-gradient(135deg, #9B59B6 0%, #8E44AD 100%);
}
&.iot {
color: #fff;
background: linear-gradient(135deg, #FF6B35 0%, #E85A2A 100%);
}
.watermark {
color: #fff !important;