From 5e551daa195aaa5310e61d09e09c284c2336945d Mon Sep 17 00:00:00 2001
From: yujialong <479214531@qq.com>
Date: Tue, 11 Jun 2024 18:48:59 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A1=B5=E8=84=9A=E9=85=8D=E7=BD=AE=E8=81=94?=
 =?UTF-8?q?=E8=B0=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/index.js               |   1 +
 src/layouts/footer/index.vue   | 230 +++++++++++++++++++++++++--------
 src/pages/aboutUs/index.vue    | 153 +---------------------
 src/pages/index/list/index.vue |  15 +--
 4 files changed, 181 insertions(+), 218 deletions(-)

diff --git a/src/api/index.js b/src/api/index.js
index 39d4b3d..eef7cc9 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -23,6 +23,7 @@ export default {
   queryArticlesByColumnType: `/iasf/sysColumn/queryArticlesByColumnType`,
   seoList: `/iasf/seo/list`,
   columnDisplayFloatingBar: `/iasf/SysFloatingColumnSchemeService/SysFloatingColumnScheme/columnDisplayFloatingBar`,
+  showTheFooterAccordingToTheColumn: `/iasf/SysFooterSetupService/SysFooterSetup/showTheFooterAccordingToTheColumn`,
 
   listMarketing: `/nakadai/nakadai/mall/marketing/promotion/pagingQueryList`,
   // 产品中心
diff --git a/src/layouts/footer/index.vue b/src/layouts/footer/index.vue
index 37cf6d2..7e98924 100644
--- a/src/layouts/footer/index.vue
+++ b/src/layouts/footer/index.vue
@@ -1,49 +1,122 @@
 <template>
   <div>
     <div v-if="showDefaultPath.includes($route.path)" :class="['footer', { iasf: isIasf }]">
-      <template v-if="isIasf">
-        <div class="mask"></div>
-        <ul v-if="isIasf" class="entry">
-          <li :class="{ 'cursor-pointer': isLink(modules[13].form.link.linkName) }" @click="openLink(modules[14].form)">
-            <img class="icon" :src="modules[14].form.pic" alt="">
-            <p class="text">{{ modules[14].form.title }}</p>
-          </li>
-          <li :class="{ 'cursor-pointer': isLink(modules[14].form.link.linkName) }" @click="openLink(modules[15].form)">
-            <img class="icon" :src="modules[15].form.pic" alt="">
-            <p class="text">{{ modules[15].form.title }}</p>
-          </li>
-          <li :class="{ 'cursor-pointer': isLink(modules[15].form.link.linkName) }" @click="openLink(modules[16].form)">
-            <img class="icon" :src="modules[16].form.pic" alt="">
-            <p class="text">{{ modules[16].form.title }}</p>
-          </li>
-          <li :class="{ 'cursor-pointer': isLink(modules[16].form.link.linkName) }" @click="openLink(modules[17].form)">
-            <img class="icon" :src="modules[17].form.pic" alt="">
-            <p class="text">{{ modules[17].form.title }}</p>
-          </li>
-          <li :class="{ 'cursor-pointer': isLink(modules[17].form.link.linkName) }" @click="openLink(modules[18].form)">
-            <img class="icon" :src="modules[18].form.pic" alt="">
-            <p class="text">{{ modules[18].form.title }}</p>
-          </li>
-        </ul>
-      </template>
-      <div class="relative text-center">
-        <img src="https://huorantech.com/images/about/logo.png" alt="">
-        <div class="flex j-center a-center m-t-20">
-          <div class="flex">
-            <div v-for="(item, i) in columns" :key="i" class="column">
-              <h6 @click="columnTo(item)">{{ item.columnName }}</h6>
-              <ul v-if="item.children.length" class="children">
-                <li v-for="(column, j) in item.children" :key="j" @click="columnTo(column)">{{ column.columnName }}</li>
-              </ul>
+      <div class="mask"></div>
+      <ul v-if="isIasf" class="entry">
+        <li :class="{ 'cursor-pointer': isLink(modules[13].form.link.linkName) }" @click="openLink(modules[14].form)">
+          <img class="icon" :src="modules[14].form.pic" alt="">
+          <p class="text">{{ modules[14].form.title }}</p>
+        </li>
+        <li :class="{ 'cursor-pointer': isLink(modules[14].form.link.linkName) }" @click="openLink(modules[15].form)">
+          <img class="icon" :src="modules[15].form.pic" alt="">
+          <p class="text">{{ modules[15].form.title }}</p>
+        </li>
+        <li :class="{ 'cursor-pointer': isLink(modules[15].form.link.linkName) }" @click="openLink(modules[16].form)">
+          <img class="icon" :src="modules[16].form.pic" alt="">
+          <p class="text">{{ modules[16].form.title }}</p>
+        </li>
+        <li :class="{ 'cursor-pointer': isLink(modules[16].form.link.linkName) }" @click="openLink(modules[17].form)">
+          <img class="icon" :src="modules[17].form.pic" alt="">
+          <p class="text">{{ modules[17].form.title }}</p>
+        </li>
+        <li :class="{ 'cursor-pointer': isLink(modules[17].form.link.linkName) }" @click="openLink(modules[18].form)">
+          <img class="icon" :src="modules[18].form.pic" alt="">
+          <p class="text">{{ modules[18].form.title }}</p>
+        </li>
+      </ul>
+    </div>
+
+    <!-- 这里需要读取后台的页脚设置，有3种样式 -->
+    <template v-if="footers.length">
+      <!-- 常规样式 -->
+      <div v-if="styleId === 1" class="contact">
+        <div class="inner">
+          <div class="title">
+            <h6>{{ footers[0].form.title }}</h6>
+            <p class="text">{{ footers[0].form.des }}</p>
+          </div>
+          <div class="region">
+            <img class="dot" src="https://huorantech.com/images/about/dot.png" alt="">
+            <p class="name">{{ footers[0].form.area }}</p>
+          </div>
+          <div class="info">
+            <img class="logo" :src="footers[1].form.pic" alt="">
+            <div class="texts">
+              <div class="item">
+                <div class="line">
+                  <img class="icon" src="https://huorantech.com/images/about/site.png" alt="">
+                  {{ footers[1].form.siteName }}
+                </div>
+                <div class="line">
+                  <img class="icon" src="https://huorantech.com/images/about/address.png" alt="">
+                  {{ footers[1].form.address }}
+                </div>
+              </div>
+              <div class="item">
+                <div class="line">
+                  <img class="icon" src="https://huorantech.com/images/about/phone.png" alt="">
+                  {{ footers[1].form.phone }}
+                </div>
+                <div class="line">
+                  <img class="icon" src="https://huorantech.com/images/about/mail.png" alt="">
+                  {{ footers[1].form.mail }}
+                </div>contact
+              </div>
+              <div class="qrcode">
+                <img width="103" :src="footers[2].form.pic" alt="">
+                <p class="text">{{ footers[2].form.title }}</p>
+              </div>
+              <div class="qrcode">
+                <img width="103" :src="footers[3].form.pic" alt="">
+                <p class="text">{{ footers[3].form.title }}</p>
+              </div>
             </div>
           </div>
         </div>
-        <div class="text-center">
-          <p class="meta">广东省深圳市龙华区民治街道红山社区龙光玖钻商务中心南期A座2311</p>
-          <a class="copyright" href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20072679号</a>
+      </div>
+
+      <!-- 含网站导航 -->
+      <div v-else-if="styleId === 2" class="footer">
+        <div class="relative text-center">
+          <img :src="footers[0].form.pic" alt="">
+          <div class="flex j-center a-center m-t-20">
+            <div class="flex">
+              <div v-for="(item, i) in columns" :key="i" class="column">
+                <h6 @click="columnTo(item)">{{ item.columnName }}</h6>
+                <ul v-if="item.children.length" class="children">
+                  <li v-for="(column, j) in item.children" :key="j" @click="columnTo(column)">{{ column.columnName }}
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+          <div v-html="footers[0].form.info"></div>
         </div>
       </div>
-    </div>
+
+
+      <!-- 英文字母 -->
+      <div v-else-if="styleId === 3" class="footer3">
+        <div class="inner">
+          <div class="flex j-between">
+            <div v-html="footers[0].form.info"></div>
+            <div class="flex text-center">
+              <div class="qrcode">
+                <p class="title">{{ footers[1].form.title }}</p>
+                <img width="103" :src="footers[1].form.pic" alt="">
+                <p class="text">{{ footers[1].form.des }}</p>
+              </div>
+              <div class="qrcode m-l-30">
+                <p class="title">{{ footers[2].form.title }}</p>
+                <img width="103" :src="footers[2].form.pic" alt="">
+                <p class="text">{{ footers[2].form.des }}</p>
+              </div>
+            </div>
+          </div>
+          <div v-html="footers[3].form.info"></div>
+        </div>
+      </div>
+    </template>
 
     <div v-if="showContactPath.includes($route.path)" class="contact">
       <div class="inner">
@@ -103,11 +176,13 @@ export default {
   data () {
     return {
       isIasf: false,
-      showDefaultPath: ['/home', '/iasf'], // 展示默认页脚的页面
+      showDefaultPath: ['/iasf'], // 展示默认页脚的页面
       showContactPath: ['/news', '/sfel', '/talent', '/careers', '/edu', '/news'], // 展示联系我们页脚的页面
       columns: [],
       modules: [],
       floatings: [],
+      footers: [],
+      styleId: 1,
     };
   },
   computed: {
@@ -121,6 +196,7 @@ export default {
     '$route': {
       handler () {
         this.getFloating()
+        this.getFooter()
         if (this.$route.path === '/iasf') {
           this.isIasf = true
           this.getInfo()
@@ -132,7 +208,6 @@ export default {
   },
   mounted () {
     this.getColumn()
-
   },
   methods: {
     // 资讯
@@ -167,7 +242,23 @@ export default {
       if (id) {
         const { data } = await this.$post(`${this.api.columnDisplayFloatingBar}?columnId=${id}`)
         this.floatings = data
-        console.log("🚀 ~ getFloating ~ this.floatings:", this.floatings)
+      } else {
+        this.floatings = []
+      }
+    },
+    // 查询页脚
+    async getFooter () {
+      const { id } = this.$route.query
+      if (id) {
+        const { data } = await this.$post(`${this.api.showTheFooterAccordingToTheColumn}?columnId=${id}`)
+        if (data.length) {
+          this.styleId = data[0].floatingBarStyle
+          this.footers = data[0].footerContent ? JSON.parse(data[0].footerContent) : []
+        } else {
+          this.footers = []
+        }
+      } else {
+        this.footers = []
       }
     },
     // 置顶
@@ -335,35 +426,29 @@ export default {
 
 .contact {
   position: relative;
-  padding: 0 0 73px 0;
-  background: url(../../assets/images/map.png) 0 0 / cover no-repeat;
+  padding: 0 0 106px 0;
+  background: url(https://huorantech.com/images/about/map.png) 0 0 / cover no-repeat;
 
   .inner {
-    width: 1082px;
+    width: 1200px;
     margin: 0 auto;
   }
 
   .title {
     width: 419px;
-    height: 263px;
-    padding: 147px 0 0 40px;
+    height: 258px;
+    padding: 113px 0 0 43px;
     background-color: #0854fe;
 
     h6 {
-      z-index: 2;
-      position: relative;
       margin-bottom: 20px;
-      font-size: 45px;
-      font-family: PingFangSC-Semibold, PingFang SC;
-      font-weight: 600;
+      font-size: 46px;
       color: #fff;
     }
 
     .text {
-      margin-top: -65px;
-      font-size: 48px;
-      -webkit-text-fill-color: transparent;
-      -webkit-text-stroke: 1px #4073e5;
+      font-size: 28px;
+      color: #fff;
     }
   }
 
@@ -382,7 +467,7 @@ export default {
   }
 
   .info {
-    margin: 55px 0 0 8px;
+    margin: 86px 0 0 44px;
 
     .texts {
       display: flex;
@@ -391,7 +476,7 @@ export default {
     }
 
     .item {
-      margin-right: 75px;
+      margin-right: 70px;
     }
 
     .line {
@@ -410,10 +495,41 @@ export default {
   .qrcode {
     text-align: center;
 
+    &:last-child {
+      margin-left: 30px;
+    }
+
     .text {
       margin-top: 10px;
       font-size: 12px;
       color: #fff;
+      white-space: nowrap;
+    }
+  }
+}
+
+.footer3 {
+  padding: 30px 0;
+  background-color: #303246;
+
+  .inner {
+    width: 1200px;
+    margin: 0 auto;
+  }
+
+  .qrcode {
+    color: #fff;
+
+    img {
+      margin: 10px 0;
+    }
+
+    .title {
+      font-size: 14px;
+    }
+
+    .text {
+      font-size: 12px;
     }
   }
 }
diff --git a/src/pages/aboutUs/index.vue b/src/pages/aboutUs/index.vue
index 0bc57a1..b9c1d7b 100644
--- a/src/pages/aboutUs/index.vue
+++ b/src/pages/aboutUs/index.vue
@@ -139,52 +139,6 @@
         </scroll>
       </div>
     </div>
-
-    <div class="contact">
-      <div class="inner">
-        <div class="title">
-          <h6>{{ modules[10].form.title }}</h6>
-          <p class="text">{{ modules[10].form.des }}</p>
-        </div>
-        <div class="region">
-          <img class="dot" src="https://huorantech.com/images/about/dot.png" alt="">
-          <p class="name">深圳</p>
-        </div>
-        <div class="info">
-          <img class="logo" :src="modules[11].form.pic" alt="">
-          <div class="texts">
-            <div class="item">
-              <div class="line">
-                <img class="icon" src="https://huorantech.com/images/about/site.png" alt="">
-                {{ modules[11].form.siteName }}
-              </div>
-              <div class="line">
-                <img class="icon" src="https://huorantech.com/images/about/address.png" alt="">
-                {{ modules[11].form.address }}
-              </div>
-            </div>
-            <div class="item">
-              <div class="line">
-                <img class="icon" src="https://huorantech.com/images/about/phone.png" alt="">
-                {{ modules[11].form.phone }}
-              </div>
-              <div class="line">
-                <img class="icon" src="https://huorantech.com/images/about/mail.png" alt="">
-                {{ modules[11].form.mail }}
-              </div>contact
-            </div>
-            <div class="qrcode">
-              <img width="103" :src="modules[12].form.pic" alt="">
-              <p class="text">{{ modules[12].form.title }}</p>
-            </div>
-            <div class="qrcode">
-              <img width="103" :src="modules[13].form.pic" alt="">
-              <p class="text">{{ modules[13].form.title }}</p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
   </div>
 </template>
 
@@ -207,7 +161,7 @@ export default {
     scroll
   },
   mounted () {
-    
+
   },
   methods: {
     // 初始化动画
@@ -599,78 +553,6 @@ export default {
     }
   }
 
-  .contact {
-    position: relative;
-    padding: 0 0 106px 0;
-    background: url(https://huorantech.com/images/about/map.png) 0 0 / cover no-repeat;
-
-    .inner {
-      padding: 0;
-    }
-
-    .title {
-      width: 419px;
-      height: 258px;
-      padding: 113px 0 0 43px;
-      background-color: #0854fe;
-
-      h6 {
-        margin-bottom: 20px;
-        font-size: 46px;
-        color: #fff;
-      }
-
-      .text {
-        font-size: 28px;
-        color: #fff;
-      }
-    }
-
-    .region {
-      position: absolute;
-      top: 152px;
-      left: 70%;
-      display: flex;
-      align-items: center;
-      font-size: 20px;
-      color: #fff;
-
-      img {
-        margin-right: 20px;
-      }
-    }
-
-    .info {
-      margin: 86px 0 0 44px;
-
-      .texts {
-        display: flex;
-        align-items: center;
-        margin-top: 24px;
-      }
-
-      .item {
-        margin-right: 75px;
-      }
-
-      .line {
-        display: flex;
-        align-items: center;
-        margin-bottom: 20px;
-        font-size: 16px;
-        color: #fff;
-
-        img {
-          margin-right: 8px;
-        }
-      }
-    }
-
-    .qrcode:last-child {
-      margin-left: 30px;
-    }
-  }
-
   .about {
     padding: 130px 0 200px;
     background: url(https://huorantech.com/images/index/about2.png) (bottom right) / auto no-repeat,
@@ -1287,25 +1169,6 @@ export default {
     .clients {
       width: 100%;
     }
-
-    .contact {
-      .info {
-        margin-left: 0;
-
-        .texts {
-          flex-direction: column;
-          align-items: flex-start;
-        }
-
-        .item {
-          margin: 0 0 30px 0;
-        }
-      }
-
-      .qrcode:last-child {
-        margin: 20px 0 0 0;
-      }
-    }
   }
 }
 
@@ -1325,20 +1188,6 @@ export default {
         max-width: 100%;
       }
     }
-
-    .contact {
-      .inner {
-        width: 100%;
-      }
-
-      .title {
-        width: 100%;
-      }
-
-      .info {
-        padding: 0 5%;
-      }
-    }
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/index/list/index.vue b/src/pages/index/list/index.vue
index eff997a..8499adf 100644
--- a/src/pages/index/list/index.vue
+++ b/src/pages/index/list/index.vue
@@ -23,8 +23,8 @@
     <div class="inner">
       <ul class="intro">
         <template v-for="(item, i) in modules[1].list">
-          <li v-if="item.isEnable" :key="i" :class="[{ 'cursor-pointer': isLink(item.link.linkName) }, 'fadeInDown' + i]"
-            @click="openLink(item)">
+          <li v-if="item.isEnable" :key="i"
+            :class="[{ 'cursor-pointer': isLink(item.link.linkName) }, 'fadeInDown' + i]" @click="openLink(item)">
             <img :src="item.pic" alt="">
             <div class="text">
               <h6>{{ item.title }}</h6>
@@ -61,7 +61,8 @@
               <dt>学科类别</dt>
               <div class="vals">
                 <dd :class="{ active: categoryId === '' }" @click="categoryClick({ id: '' }, 1)">全部</dd>
-                <dd :class="{ active: categoryId === 1 }" style="margin-right: 20px" @click="categoryClick({ id: 1 }, 1)">不限
+                <dd :class="{ active: categoryId === 1 }" style="margin-right: 20px"
+                  @click="categoryClick({ id: 1 }, 1)">不限
                 </dd>
                 <dd v-for="(item, i) in category" :key="i" :class="{ active: categoryId === item.id }"
                   @click="categoryClick(item, 1)">{{ item.name }}</dd>
@@ -72,7 +73,8 @@
               <div class="vals">
                 <dd :class="{ active: professionalCategoryId === '' }" @click="categoryClick({ id: '' }, 2)">全部</dd>
                 <dd v-for="(item, i) in professionalClasses" :key="i"
-                  :class="{ active: professionalCategoryId === item.id }" @click="categoryClick(item, 2)">{{ item.name }}
+                  :class="{ active: professionalCategoryId === item.id }" @click="categoryClick(item, 2)">{{ item.name
+                  }}
                 </dd>
               </div>
             </dl>
@@ -174,11 +176,6 @@
         </div>
       </div>
     </div>
-
-    <div class="copyright">
-      <!-- <span>© Copyright 2021 Occupation Lab 职站</span> -->
-      <a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20072679号</a>
-    </div>
   </div>
 </template>