首页更新

f/web-kboss/src/views/homePage/indexLast.vue

@@ -7,72 +7,78 @@
     </div>
     <!--    footer-->
     <div class="footer">
-      <div class="left-box">
+      <div class="footer-main">
-        <ul class="bigUl">
+        <div class="footer-brand-col">
-          <li class="bigLi footer-service">
+          <img
-            <span class="title">产品服务</span>
+            v-if="hasLogoInfo"
-            <ul class="smallUl footer-service-list">
+            :src="footerHomeInfo.logoImg"
+            alt="logo"
+            class="footer-brand-logo"
+          >
+        </div>
+
+        <div class="footer-link-cols">
+          
+
+          <div class="footer-link-col">
+            <h4 class="footer-col-title">产品服务</h4>
+            <ul class="footer-link-list">
               <li
                 v-for="item in footerProductServices"
                 :key="item.label"
-                class="smallLi"
+                class="footer-link-item"
+                :class="{ clickable: !!item.path }"
                 @click="goFooterService(item.path)"
               >
                 {{ item.label }}
               </li>
             </ul>
-          </li>
+          </div>
-        </ul>
-        <div class="footer-brand">
-          <img v-if="JSON.stringify(logoInfoNew)!=='{}'"
-               :src="logoInfoNew.home.logoImg" alt=""
-               class="img">
-          <div class="content-main">
-            <ul class="info">
-              <li>地址：<span v-if="JSON.stringify(logoInfoNew)!=='{}'">{{ logoInfoNew.home.adress }}</span>
-              </li>
-              <li v-if="JSON.stringify(logoInfoNew)!=='{}'"> 邮箱：{{logoInfoNew.home.email}}</li>
-              <!-- <li v-if="JSON.stringify(logoInfoNew)!=='{}'">电话： <span class="tel">{{logoInfoNew.home.mobile}}</span> -->
-                <!-- </li> -->
-
-              <li>
-                <!-- <a href="" rel="noreferrer" target="_blank"></a> -->
-              </li>
-            </ul>
           
+        <div class="footer-contact-col">
+          <h4 class="footer-col-title">联系我们</h4>
+          <ul class="footer-contact-list">
+            <li>地址：<span>{{ footerHomeInfo.adress }}</span></li>
+            <li>邮箱：<span>{{ footerHomeInfo.email }}</span></li>
+            <li>电话：<span>{{ footerHomeInfo.mobile }}</span></li>
+          </ul>
+          <div v-if="showFooterQrcode" class="footer-qrcode-row">
+            <div class="qr-box">
+              <div class="qr-code">
+                <img src="./img/img.png" alt="">
+              </div>
+              <span class="qr-content">微信客服</span>
+            </div>
+            <div class="qr-box">
+              <div class="qr-code">
+                <img src="./img/kefu.jpg" alt="">
+              </div>
+              <span class="qr-content">关注公众号</span>
+            </div>
+            <div class="qr-box">
+              <div class="qr-code">
+                <img src="./img/img.png" alt="">
+              </div>
+              <span class="qr-content">视频号</span>
+            </div>
           </div>
         </div>
-       
-        <div v-if="JSON.stringify(logoInfoNew)!=='{}'&&logoInfoNew.home.bannerTitle!=='开元数智'" class="right-box">
-          <div class="qr-box">
-            <div class="qr-code">
-              <img src="./img/img.png" alt="">
-
-            </div>
-            <span class="qr-content">微信客服</span>
-          </div>
-          <div class="qr-box">
-            <div class="qr-code">
-              <img src="./img/kefu.jpg" style="padding: 0.08rem" alt="">
-
-            </div>
-            <span class="qr-content">关注公众号</span>
-          </div>
         </div>
+
       </div>
       <div class="footer-record">
-        <span v-if="JSON.stringify(logoInfoNew)!=='{}'"
+        <span v-if="hasLogoInfo"
               class="footer-record__text"><span
           class="goStyle"
         @click="goOut('https://beian.miit.gov.cn/#/Integrated/index')">
            京ICP备{{
-            logoInfoNew.home.license
+            footerHomeInfo.license
           }}&nbsp;
        <span style="padding: 4px;"></span>
         </span> &nbsp;&nbsp;{{
-            logoInfoNew.home.footerTitle
+            footerHomeInfo.footerTitle
           }}&nbsp;{{
-            logoInfoNew.home.copyright
+            footerHomeInfo.copyright
           }}&nbsp; </span>
         <!--        IPC备案号:{{ ICP }} <span style="margin-left: 0.267rem">版权所有 @kaiyuanyun 2023</span>-->
         <!--        <img src="../../image/login/policeInsignia/policeInsignia.png" alt=""-->
@@ -91,7 +97,6 @@
 <script>
 import Vue from 'vue'
 import TopBox from "@/views/homePage/components/topBox/index.vue";
-import {reqNewHomeFestival} from "@/api/newHome";
 import {mapGetters, mapState} from "vuex";
 
 export default Vue.extend({
@@ -140,6 +145,30 @@ export default Vue.extend({
         { label: '智能体商店', path: '/homePage/agentStore' },
         { label: '供需广场', path: '/ncmatchHome/supplyAndDemandSquare' },
         { label: '文档中心', path: '/homePage/new' },
+      ],
+      footerAboutUs: [
+        { label: '关于我们', path: '/homePage/about' },
+        { label: '文件中心', path: '/homePage/new' },
+        { label: '联系我们', path: '/homePage/about' },
+        { label: '人才招聘', path: '' },
+        { label: '云作坊', path: '' },
+        { label: '友情链接', path: '' },
+      ],
+      footerSolutions: [
+        { label: '汽车行业', path: '/homePage/solve/hospital' },
+        { label: '金融行业', path: '' },
+        { label: '政务行业', path: '' },
+        { label: '工业行业', path: '' },
+        { label: '教育行业', path: '' },
+        { label: '医疗行业', path: '' },
+        { label: '互联网行业', path: '' },
+      ],
+      footerSupports: [
+        { label: '备案服务', path: '' },
+        { label: '服务咨询', path: '' },
+        { label: '建议与反馈', path: '/homePage/about' },
+        { label: '常见问题', path: '/homePage/new' },
+        { label: '帮助中心', path: '/homePage/new' },
       ]
     }
   },
@@ -160,6 +189,15 @@ export default Vue.extend({
       console.log("此时是:", orgType !== '2' && orgType !== '3' && userId !== null)
       return orgType !== '2' && orgType !== '3' && userId === null;
     },
+    hasLogoInfo() {
+      return this.logoInfoNew && JSON.stringify(this.logoInfoNew) !== '{}' && this.logoInfoNew.home
+    },
+    footerHomeInfo() {
+      return this.hasLogoInfo ? this.logoInfoNew.home : {}
+    },
+    showFooterQrcode() {
+      return this.hasLogoInfo && this.footerHomeInfo.bannerTitle !== '开元数智'
+    },
     username() {
       return sessionStorage.getItem('username') || '';
     },
@@ -258,62 +296,122 @@ export default Vue.extend({
 }
 
 .footer {
-  padding: 42px 0 22px;
+  padding: 38px 0 22px;
   width: 100%;
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
-  background-color: #fff;
+  background: #f1f3f7;
 }
 
-.left-box {
+.footer-main {
   width: 1400px;
-  min-height: 180px;
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
-  padding: 0 0 30px;
+  gap: 38px;
-  border-bottom: 1px solid rgba(122, 130, 160, 0.28);
+  padding: 0 0 32px;
+  border-bottom: 1px solid rgba(122, 130, 160, 0.22);
   box-sizing: border-box;
 }
 
-.footer-brand {
+.footer-brand-col {
-  width: 420px;
+  width: 150px;
-  display: flex;
+  padding-top: 2px;
-  flex-direction: column;
+}
 
-  .img {
+.footer-brand-logo {
-    width: 168px;
+  width: 180px;
-    height: 54px;
+  height: 50px;
-    object-fit: contain;
+  object-fit: contain;
-    object-position: left center;
+  object-position: left center;
-    margin-bottom: 14px;
+}
+
+.footer-link-cols {
+  flex: 1;
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  gap: 60px;
+}
+
+.footer-link-col {
+  min-width: 110px;
+}
+
+.footer-col-title {
+  margin: 0 0 14px;
+  color: #202634;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1.5;
+}
+
+.footer-link-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.footer-link-item {
+  margin-bottom: 9px;
+  color: #5d6477;
+  font-size: 14px;
+  line-height: 1.5;
+  white-space: nowrap;
+  transition: color .2s ease, transform .2s ease;
+}
+
+.footer-link-item:last-child {
+  margin-bottom: 0;
+}
+
+.footer-link-item.clickable {
+  cursor: pointer;
+}
+
+.footer-link-item.clickable:hover {
+  color: #1b5bff;
+  transform: translateX(3px);
+}
+
+.footer-contact-col {
+  // width: 360px;
+}
+
+.footer-contact-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  color: #5d6477;
+  font-size: 14px;
+  line-height: 1.6;
+
+  li {
+    margin-bottom: 5px;
   }
 }
 
-.right-box {
+.footer-qrcode-row {
-  min-width: 260px;
+  margin-top: 14px;
   display: flex;
-  justify-content: center;
   align-items: flex-start;
-  gap: 34px;
+  gap: 14px;
 }
 
-.content-main {
+.qr-box {
-  mix-blend-mode: normal;
+  display: flex;
-  color: #7A82A0;
+  flex-direction: column;
-  font-size: 14px;
+  align-items: center;
-  line-height: 1.8;
 }
 
 .qr-code {
-  width: 112px;
+  width: 84px;
-  height: 112px;
+  height: 84px;
-  padding: 6px;
+  padding: 4px;
-  border: 1px solid #edf1f7;
+  border: 1px solid #dde3ef;
-  border-radius: 12px;
-  box-sizing: border-box;
   background: #fff;
+  box-sizing: border-box;
 
   img {
     width: 100%;
@@ -323,102 +421,10 @@ export default Vue.extend({
 }
 
 .qr-content {
-  mix-blend-mode: normal;
+  margin-top: 8px;
-  color: #4b5563;
+  color: #5d6477;
-  font-family: PingFang SC, serif;
+  font-size: 13px;
-  font-weight: 600;
+  line-height: 1.4;
-  font-size: 14px;
-  margin-top: 10px;
-}
-
-.qr-box {
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  align-items: center;
-}
-
-.logo {
-  background-color: #32abfc;
-
-  img {
-    width: 100%;
-    height: 100%;
-  }
-}
-
-.bigUl {
-  margin: 0 80px 0 40px;
-  width: 260px;
-  display: flex;
-  justify-content: flex-start;
-  padding: 0;
-  list-style: none;
-
-  .bigLi {
-    margin: 0;
-  }
-
-  height: 100%;
-
-  .title {
-    color: #111827;
-    font-size: 18px;
-    line-height: 1.4;
-    font-weight: 700;
-  }
-
-  .smallUl {
-    padding: 0;
-    list-style: none;
-    font-size: 15px;
-    color: #7A82A0;
-
-    li {
-      margin: 10px 0;
-    }
-  }
-}
-
-.footer-service {
-  display: flex;
-  flex-direction: column;
-}
-
-.footer-service-list {
-  margin-top: 16px;
-
-  .smallLi {
-    line-height: 1.5;
-    white-space: nowrap;
-  }
-}
-
-.info {
-  font-size: 14px;
-  color: #7A82A0;
-  padding: 0;
-  margin: 0;
-  list-style: none;
-
-  li {
-    margin: 6px 0;
-  }
-}
-
-.tel {
-  color: #222F60;
-  font-size: 20px;
-}
-
-.smallLi {
-  transition: color .2s ease, transform .2s ease;
-
-  &:hover {
-    color: #1b5bff;
-    cursor: pointer;
-    transform: translateX(4px);
-  }
 }
 
 .footer-record {
@@ -434,8 +440,8 @@ export default Vue.extend({
   display: flex;
   justify-content: center;
   align-items: center;
-  color: #7A82A0;
+  color: #7a82a0;
-  font-size: 14px;
+  font-size: 13px;
 }
 
 .goStyle {