fix：维保页面调整

oms_web/oms_vue/src/views/manage/service/index.vue

@@ -2,6 +2,7 @@
   <div class="service-page">
     <header class="service-header">
       <div class="service-header__inner">
+        <img :src="h3cLogoSrc" alt="H3C" class="service-logo">
         <img :src="logoSrc" alt="紫光汇智" class="service-logo">
       </div>
     </header>
@@ -200,10 +201,19 @@
           </p>
         </div>
 
-        <div class="footer-follow">
+        <div class="footer-follow-group">
-          <h3 class="footer-follow__title">关注汇智</h3>
+          <div class="footer-follow">
-          <div class="footer-qr-card" aria-label="关注汇智二维码">
+            <h3 class="footer-follow__title">关注汇智</h3>
-            <img :src="qrCodeSrc" alt="关注汇智二维码" class="footer-qr-image">
+            <div class="footer-qr-card" aria-label="关注汇智二维码">
+              <img :src="qrCodeSrc" alt="关注汇智二维码" class="footer-qr-image">
+            </div>
+          </div>
+
+          <div class="footer-follow">
+            <h3 class="footer-follow__title">关注新华三</h3>
+            <div class="footer-qr-card" aria-label="关注新华三二维码">
+              <img :src="h3cQrCodeSrc" alt="关注新华三二维码" class="footer-qr-image">
+            </div>
           </div>
         </div>
       </div>
@@ -218,7 +228,9 @@
 <script>
 import { getProductInfo, getOrderInfo, getWarrantyInfo } from '@/api/manage/service'
 import logoImage from '@/assets/images/companyLogoHD.png'
+import h3cLogoImage from '@/assets/images/h3cLogo.png'
 import companyQrCodeImage from '@/assets/images/company-QR-code.png'
+import companyH3cQrCodeImage from '@/assets/images/H3C-QR-code.png'
 
 const statusItems = [
   {
@@ -260,8 +272,10 @@ export default {
   name: 'ServiceQuery',
   data() {
     return {
+      h3cLogoSrc: h3cLogoImage,
       logoSrc: logoImage,
       qrCodeSrc: companyQrCodeImage,
+      h3cQrCodeSrc: companyH3cQrCodeImage,
       queryMode: 'single',
       serialNumber: '',
       batchSerialNumbers: '',
@@ -527,11 +541,16 @@ export default {
 }
 
 .service-header__inner {
+  display: flex;
+  align-items: center;
+  gap: 20px;
   padding: 14px 24px;
 }
 
 .service-logo {
-  width: 124px;
+  height: 36px;
+  width: auto;
+  max-width: 100%;
   display: block;
 }
 
@@ -1024,43 +1043,63 @@ export default {
 }
 
 .service-footer {
-  background: #2f2c2c;
+  margin-top: 48px;
+  background: linear-gradient(180deg, #2f2c2c 0%, #252222 100%);
 }
 
 .service-footer__inner {
   display: grid;
-  grid-template-columns: minmax(0, 1.8fr) minmax(220px, 0.9fr);
+  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
-  gap: 44px;
+  gap: 34px 28px;
-  padding: 36px 24px 32px;
+  padding: 40px 24px 34px;
+  align-items: start;
 }
 
 .footer-brand {
-  max-width: 560px;
+  max-width: 620px;
 }
 
 .footer-logo {
-  width: 132px;
+  width: 142px;
   display: block;
   filter: brightness(0) invert(1);
 }
 
 .footer-brand__desc {
-  margin: 28px 0 0;
+  margin: 20px 0 0;
-  line-height: 1.95;
+  line-height: 1.9;
   font-size: 14px;
-  color: rgba(255, 255, 255, 0.68);
+  color: rgba(255, 255, 255, 0.72);
+}
+
+.footer-follow-group {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(128px, 1fr));
+  gap: 16px;
+}
+
+.footer-follow {
+  padding: 16px 14px 18px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.04);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 .footer-follow__title {
-  margin: 4px 0 28px;
+  margin: 0 0 14px;
-  font-size: 16px;
+  font-size: 14px;
-  font-weight: 700;
+  font-weight: 600;
   color: #ffffff;
 }
 
 .footer-qr-card {
-  width: 116px;
+  width: 112px;
-  height: 116px;
+  height: 112px;
+  padding: 5px;
+  border-radius: 10px;
   background: #ffffff;
 }
 
@@ -1134,11 +1173,11 @@ export default {
 }
 
 .service-footer__bottom {
-  padding: 16px 24px;
+  padding: 14px 24px 16px;
-  border-top: 1px solid rgba(255, 255, 255, 0.06);
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
   text-align: center;
   font-size: 12px;
-  color: rgba(255, 255, 255, 0.28);
+  color: rgba(255, 255, 255, 0.38);
 }
 
 @media (max-width: 900px) {
@@ -1210,7 +1249,7 @@ export default {
   }
 
   .service-footer__inner {
-    gap: 28px;
+    gap: 22px;
     padding: 30px 16px 24px;
   }
 
@@ -1218,10 +1257,14 @@ export default {
     margin-top: 20px;
   }
 
-  .footer-follow {
+  .footer-follow-group {
-    display: flex;
+    grid-template-columns: repeat(2, minmax(130px, 1fr));
-    flex-direction: column;
+  }
-    align-items: flex-start;
+}
+
+@media (max-width: 600px) {
+  .footer-follow-group {
+    grid-template-columns: 1fr;
   }
 }
 </style>