fix: 修改样式，增加物联平台。

src/components/Logo.vue

@@ -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: {

src/views/HomePage.vue

@@ -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">
+       <a class="health vivify popIn delay-200">
-        <div class="watermark blue">记账</div>
+        <div class="watermark green">记账</div>
-        <logo type="zhongtai"></logo>
+        <logo type="hr"></logo>
-        <logo class="mobile" type="mzhichou"></logo>
+        <logo class="mobile" type="mhr"></logo>
         <h3>解决个人记账难题</h3>
         <h4>好用&nbsp;&nbsp;易用&nbsp;&nbsp;免费</h4>
       </a>
-      <a class="hr vivify popIn delay-200">
+      <a class="zhichou vivify popIn">
-        <div class="watermark green">服务</div>
+        <div class="watermark blue">服务</div>
-        <logo type="hr"></logo>
+        <logo type="zhongtai"></logo>
-        <logo class="mobile" type="mhr"></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>
+            <h4 class="zui-card__title">智聪物联</h4>
-            <p class="zui-card__desc">全天尽享服务贴心之旅‌‌。</p>
+            <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
       }
     },

src/views/less/home-page.less

@@ -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 {
+      &.health {
-        color: #fff;
+        color: #6AC2B5;
-        background: #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;