fix:界面优化

src/assets/img/feature1.svg

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

src/assets/img/feature2.svg

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

src/assets/img/feature3.svg

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

src/assets/img/feature4.svg

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

src/components/less/footer.less

@@ -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;
+        display: inline-block;
-        font-size: 12px;
+        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 {
+    .copy-right {
-      flex-direction: column;
+      font-size: 11px;
-      gap: 12px;
+      padding: 10px 5px;
-    }
+      line-height: 1.5;
-    .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;
     }
   }
 }

src/components/less/header.less

@@ -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;
+      display: flex !important;
-      font-size: 10px;
+      align-items: center;
+      justify-content: center;
+      font-size: 14px;
       float: right;
-      line-height: 30px;
+      line-height: 35px;
-      margin: 15px 5px 0 0;
+      margin: 12px 10px 0 0;
-      min-width: 50px;
+      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;
+      display: none;
-      height: 30px;
+    }
-      background: #32adc6;
+  }
-      display: inline-block;
+}
-      position: relative;
+
-      top: 15px;
+@media (min-width: 769px) {
-      left: 5px;
+  .@{prefix}-header{
+    .@{prefix}-rightcol{
+      display: none !important;
     }
   }
 }

src/components/less/page.less

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

src/views/HomePage.vue

@@ -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 feature1 from '../assets/img/feature1.svg'
-  import feature2 from '../assets/img/feature2.png'
+  import feature2 from '../assets/img/feature2.svg'
-  import feature3 from '../assets/img/feature3.png'
+  import feature3 from '../assets/img/feature3.svg'
-  import feature4 from '../assets/img/feature4.png'
+  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 {
-  .features .zui-card__media img { width: 80px; }
+    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>

src/views/callus.vue

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

src/views/less/home-page.less

@@ -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;
+        width: 100%;
-        margin: 25px auto;
+        max-width: 300px;
-        padding: 32px 20px;
+        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;
+        font-size: 22px;
-        line-height: 35px;
+        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;
+          margin-top: 15px;
-          padding-left: 55px;
+          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;
     }
   }
 }

src/views/resource.vue

@@ -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/intcInvest-Manual.pdf" target="_blank">使用手册</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/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>