From 7f02e50911f1ada407c359a30983efcfd390a8b2 Mon Sep 17 00:00:00 2001
From: yujialong <479214531@qq.com>
Date: Tue, 7 Nov 2023 15:24:55 +0800
Subject: [PATCH] =?UTF-8?q?=E5=85=B3=E4=BA=8E=E6=88=91=E4=BB=AC=E9=95=BF?=
 =?UTF-8?q?=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/footer/index.vue   |   3 -
 src/pages/aboutUs/index.vue    | 295 ++++++++++++++++++++-------------
 src/pages/index/list/index.vue |  26 +--
 3 files changed, 192 insertions(+), 132 deletions(-)

diff --git a/src/layouts/footer/index.vue b/src/layouts/footer/index.vue
index b2a6a2f..892ce73 100644
--- a/src/layouts/footer/index.vue
+++ b/src/layouts/footer/index.vue
@@ -46,9 +46,6 @@
       <div class="relative">
         <div class="info">
           <div class="leftBox">
-            <img class="m-b-20"
-                 src="@/assets/images/iasf.png"
-                 alt="">
             <p class="meta">Copyright ©2002- 2021</p>
             <p class="meta">Institute of Advanced Science Facilities, ShenzhenIASF</p>
             <p class="meta">Tel：400-0010-998</p>
diff --git a/src/pages/aboutUs/index.vue b/src/pages/aboutUs/index.vue
index 7aa0cdb..7098347 100644
--- a/src/pages/aboutUs/index.vue
+++ b/src/pages/aboutUs/index.vue
@@ -1,14 +1,61 @@
 <template>
   <div class="wrap index">
-    <div class="banner">
+    <el-carousel v-if="modules[0].list.length && modules[0].list.filter(e => e.isEnable).length"
+                 class="carousel"
+                 :interval="6000"
+                 height="480px"
+                 :arrow="(modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'"
+                 :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
+      <template v-for="(item, i) in modules[0].list">
+        <el-carousel-item v-if="item.pic && item.isEnable"
+                          :key="i">
+          <div v-if="isImg(item.mediaType)"
+               class="pic"
+               :style="{backgroundImage: 'url(' + item.pic + ')'}"></div>
+          <video v-else
+                 class="pic"
+                 width="100%"
+                 height="100%"
+                 autoplay
+                 muted
+                 loop>
+            <source :src="item.pic"
+                    type="video/mp4">
+            您的浏览器不支持 video 标签。
+          </video>
+          <div class="text-wrap">
+            <div class="text"
+                 v-html="item.des"></div>
+            <div v-if="!GTA"
+                 class="qrcodes">
+              <div class="qrcode">
+                <img width="103"
+                     :src="item.weixinPic1"
+                     alt="">
+                <p class="text">{{ item.weixinText1 }}</p>
+              </div>
+              <div class="qrcode m-l-30">
+                <img width="103"
+                     :src="item.weixinPic2"
+                     alt="">
+                <p class="text">{{ item.weixinText2 }}</p>
+              </div>
+            </div>
+          </div>
+        </el-carousel-item>
+      </template>
+    </el-carousel>
+
+    <div v-else
+         class="banner">
       <img class="texts"
-           src="@/assets/images/about/banner-text.png"
+           src="https://huorantech.com/images/about/banner-text.png"
            alt="">
       <div v-if="!GTA"
            class="qrcodes">
         <div class="qrcode">
           <img width="103"
-               src="@/assets/images/about/qrcode.jpg"
+               src="https://huorantech.com/images/about/qrcode.jpg"
                alt="">
           <p class="text">扫一扫，关注公众号</p>
         </div>
@@ -20,56 +67,47 @@
         </div>
       </div>
     </div>
+
     <div class="intro">
       <div class="inner">
         <div class="pics">
           <div class="text">
             <div class="title-wrap">
-              <p class="title">或然科技有限公司</p>
-              <p class="brief">职站商城，让您一站式采购无忧</p>
-              <p class="en">HUORAN TECH</p>
+              <p class="title">{{ modules[1].form.title }}</p>
+              <p class="brief">{{ modules[1].form.subTitle1 }}</p>
+              <p class="en">{{ modules[1].form.subTitle2 }}</p>
             </div>
-            <p class="desc wow fadeInLeft"
-               data-wow-delay="0.7s">深圳或然科技，教育数字化产业的推动者，为教育IT创业者赋能的首选合作伙伴。我们是一家拥有丰富IT互联网背景的科技企业，致力于为教育软件销售代理人提供专业而全面的产品供应链服务。</p>
+            <div class="desc wow fadeInLeft"
+                 data-wow-delay="0.7s"
+                 v-html="modules[1].form.des"></div>
           </div>
           <img class="bg"
-               src="@/assets/images/about/about1.png"
+               :src="modules[1].form.pic"
                alt="">
         </div>
       </div>
     </div>
     <div class="service-intro">
       <div class="inner">
-        <h6>随时、随地、贴心为您提供全方位服务</h6>
-        <p class="text">At anytime,anywhere,intimate to provide you with a full range of services</p>
+        <h6>{{ modules[2].form.title }}</h6>
+        <p class="text">{{ modules[2].form.des }}</p>
       </div>
     </div>
     <div class="culture">
       <div class="inner">
-        <h6 class="i-title wow fadeInDown">企业文化</h6>
-        <p class="en">CORPORATE CULTURE</p>
+        <h6 class="i-title wow fadeInDown">{{ modules[3].form.title }}</h6>
+        <p class="en">{{ modules[3].form.des }}</p>
         <ul class="list">
-          <li class="wow fadeInDown"
-              data-wow-delay="0.5s">
-            <img src="@/assets/images/about/about4.png"
-                 alt="">
-            <h6>使命</h6>
-            <p class="text">成就百万教育产业数字化的创业者</p>
-          </li>
-          <li class="wow fadeInRight"
-              data-wow-delay="0.8s">
-            <img src="@/assets/images/about/about5.png"
-                 alt="">
-            <h6>愿景</h6>
-            <p class="text">成为教育产业数字化的共创平台</p>
-          </li>
-          <li class="wow fadeInUp"
-              data-wow-delay="1.1s">
-            <img src="@/assets/images/about/about6.png"
-                 alt="">
-            <h6>核心价值观</h6>
-            <p class="text">公正、诚信、创新、实干</p>
-          </li>
+          <template v-for="(item, i) in modules[4].list">
+            <li v-if="item.isEnable"
+                :key="i">
+              <img :src="item.pic"
+                   alt="">
+              <h6>{{ item.title }}</h6>
+              <div class="text"
+                   v-html="item.des"></div>
+            </li>
+          </template>
         </ul>
       </div>
     </div>
@@ -78,55 +116,45 @@
     <div class="adv"
          id="part2">
       <div class="inner">
-        <h6 class="i-title wow fadeInDown">为什么选择我们</h6>
-        <p class="en">WHY CHOOSE US</p>
-        <p class="title-des wow fadeInDown">专业、全面、高效</p>
+        <h6 class="i-title wow fadeInDown">{{ modules[5].form.title }}</h6>
+        <p class="en">{{ modules[5].form.subTitle }}</p>
+        <p class="title-des wow fadeInDown">{{ modules[5].form.des }}</p>
 
         <ul class="list">
-          <li class="wow fadeInDown"
-              data-wow-delay="0.5s">
-            <img src="@/assets/images/index/index3.png"
-                 alt="">
-            <h6>产品优势</h6>
-            <p class="text">整合好不同的教育信息化解决方案所需的软件和硬件产品，通过教育产业互联网平台和反向供应链，提供利润合适，交付便捷，质量有保障的体系化产品。</p>
-          </li>
-          <li class="wow fadeInRight"
-              data-wow-delay="0.8s">
-            <img src="@/assets/images/index/index4.png"
-                 alt="">
-            <h6>服务优势</h6>
-            <p class="text">专业的培训和服务团队，提供教育信息化产业的创业辅导和专业培训。帮助打造一支专业化的商务支持、客户成功和售后运营服务的支撑型团队。</p>
-          </li>
-          <li class="wow fadeInUp"
-              data-wow-delay="1.1s">
-            <img src="@/assets/images/index/index5.png"
-                 alt="">
-            <h6>生态优势</h6>
-            <p class="text">我们拥有强大可靠的渠道、产品的生态联盟，可共享、调用生态内的多方资源，背靠联盟携手共创新奇迹。</p>
-          </li>
+          <template v-for="(item, i) in modules[6].list">
+            <li v-if="item.isEnable"
+                :key="i">
+              <img :src="item.pic"
+                   alt="">
+              <h6>{{ item.title }}</h6>
+              <div class="text"
+                   v-html="item.des"></div>
+            </li>
+          </template>
         </ul>
       </div>
     </div>
     <!-- 合作客户 -->
     <div class="client">
       <div class="inner">
-        <h6 class="i-title wow fadeInDown">合作院校</h6>
-        <p class="en">PARTNERSHIP</p>
-        <p class="title-des wow fadeInDown">助力100+所院校客户实现数字化升级</p>
+        <h6 class="i-title wow fadeInDown">{{ modules[7].form.title }}</h6>
+        <p class="en">{{ modules[7].form.subTitle }}</p>
+        <p class="title-des wow fadeInDown">{{ modules[7].form.des }}</p>
         <div class="client-pic">
           <img class="bg"
-               src="@/assets/images/index/index0.png"
+               :src="modules[8].form.pic"
                alt="">
           <div class="text">
             <div class="c-title1">
-              <img src="@/assets/images/index/comma1.png"
+              <img src="https://huorantech.com/images/index/comma1.png"
                    alt="">
-              他们说
+              {{ modules[8].form.title }}
             </div>
-            <div class="text">平台功能丰富，操作简单，自动判分功能，能更高效的批改作业给学生更好的指导。</div>
+            <div class="text"
+                 v-html="modules[8].form.des"></div>
             <div class="c-title2">
-              —— 河海大学老师
-              <img src="@/assets/images/index/comma2.png"
+              {{ modules[8].form.subTitle }}
+              <img src="https://huorantech.com/images/index/comma2.png"
                    alt="">
             </div>
           </div>
@@ -136,9 +164,9 @@
                 :class-option="{limitMoveNum: 2, direction: 2}">
           <ul class="client-list"
               ref="client">
-            <li v-for="i in clients"
-                :key="i">
-              <img :src="require('@/assets/images/index/school' + i + '.png')"
+            <li v-for="item in modules[9].list"
+                :key="item">
+              <img :src="item.pic"
                    alt="">
             </li>
           </ul>
@@ -149,59 +177,59 @@
     <div class="contact">
       <div class="inner">
         <div class="title">
-          <h6>联系我们</h6>
-          <p class="text">CONTACT US</p>
+          <h6>{{ modules[10].form.title }}</h6>
+          <p class="text">{{ modules[10].form.des }}</p>
         </div>
         <div class="region">
           <img class="dot"
-               src="@/assets/images/about/dot.png"
+               src="https://huorantech.com/images/about/dot.png"
                alt="">
           <p class="name">深圳</p>
         </div>
         <div class="info">
           <img class="logo"
-               src="@/assets/images/about/logo.png"
+               :src="modules[11].form.pic"
                alt="">
           <div class="texts">
             <div class="item">
               <div class="line">
                 <img class="icon"
-                     src="@/assets/images/about/site.png"
+                     src="https://huorantech.com/images/about/site.png"
                      alt="">
-                公司官网：www.huorantech.com
+                {{ modules[11].form.site }}
               </div>
               <div class="line">
                 <img class="icon"
-                     src="@/assets/images/about/address.png"
+                     src="https://huorantech.com/images/about/address.png"
                      alt="">
-                地址：广东省深圳市南山区粤海街道海天二路盈峰中心2101
+                {{ modules[11].form.address }}
               </div>
             </div>
             <div class="item">
               <div class="line">
                 <img class="icon"
-                     src="@/assets/images/about/phone.png"
+                     src="https://huorantech.com/images/about/phone.png"
                      alt="">
-                合作咨询：郭经理 17671782660
+                {{ modules[11].form.phone }}
               </div>
               <div class="line">
                 <img class="icon"
-                     src="@/assets/images/about/mail.png"
+                     src="https://huorantech.com/images/about/mail.png"
                      alt="">
-                客户建议：service@huorantech.cn
+                {{ modules[11].form.mail }}
               </div>
             </div>
             <div class="qrcode">
               <img width="103"
-                   src="@/assets/images/about/qrcode.jpg"
+                   :src=" modules[12].form.pic"
                    alt="">
-              <p class="text">扫一扫，关注公众号</p>
+              <p class="text">{{ modules[12].form.title }}</p>
             </div>
             <div class="qrcode m-l-30">
               <img width="103"
-                   src="@/assets/images/mini-program-sm.jpg"
+                   :src=" modules[13].form.pic"
                    alt="">
-              <p class="text">扫一扫，登录职站商城</p>
+              <p class="text">{{ modules[13].form.title }}</p>
             </div>
           </div>
         </div>
@@ -214,7 +242,7 @@
         <p class="tips">微信扫码添加职站售前咨询</p>
         <p class="des">提供付费咨询及解决方案</p>
         <img width="150"
-             src="@/assets/images/index/customer.png"
+             src="https://huorantech.com/images/index/customer.png"
              alt="">
       </div>
       <div class="item tel"></div>
@@ -223,7 +251,7 @@
           <div class="line">
             <div>
               <img class="icon"
-                   src="@/assets/images/index/tel-2.png"
+                   src="https://huorantech.com/images/index/tel-2.png"
                    alt="">
             </div>
             <div class="text">
@@ -236,7 +264,7 @@
           <div class="line">
             <div>
               <img class="icon"
-                   src="@/assets/images/index/sug.png"
+                   src="https://huorantech.com/images/index/sug.png"
                    alt="">
             </div>
             <div class="text">
@@ -254,11 +282,16 @@
 </template>
 
 <script>
+import mixins from '@/mixins/page'
+import Setting from '@/setting'
+import Util from '@/libs/util'
 import WOW from 'wow.js'
 import scroll from 'vue-seamless-scroll'
 export default {
+  mixins: [mixins],
   data () {
     return {
+      isImg: Util.isImg,
       active: '',
       clients: [1, 2, 3, 4, 5]
     }
@@ -270,13 +303,19 @@ export default {
     new WOW().init()
   },
   methods: {
-    // 轮播图翻页
-    carouselSwitch (name, dir) {
-      dir ? this.$refs[name].next() : this.$refs[name].prev()
-    },
-    toPart (i) {
-      this.active = i
-      document.querySelector(`#part${i}`).scrollIntoView()
+    // 获取文章详情
+    getInfo () {
+      // 预览/详情
+      this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
+        if (data.length) {
+          // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
+          const json = JSON.parse(this.preview ?
+            data :
+            data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'])
+          this.modules = json
+          console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
+        }
+      }).catch(err => { })
     },
     // 置顶
     topping () {
@@ -299,8 +338,8 @@ export default {
     .banner {
         position: relative;
         height: 480px;
-        background: url(../../assets/images/about/banner1.png) 0 0 / auto no-repeat,
-            url(../../assets/images/about/banner2.png) (90% 37px) / auto no-repeat;
+        background: url(https://huorantech.com/images/about/banner1.png) 0 0 / auto no-repeat,
+            url(https://huorantech.com/images/about/banner2.png) (90% 37px) / auto no-repeat;
         background-color: #0f5bed;
         .texts {
             position: absolute;
@@ -314,6 +353,28 @@ export default {
             display: flex;
         }
     }
+    .carousel {
+        .pic {
+            height: 100%;
+            background-position: center center;
+            background-size: 100% 100%;
+            background-repeat: no-repeat;
+        }
+        /deep/.el-carousel__container {
+            height: 100%;
+        }
+        .text-wrap {
+            position: absolute;
+            top: 50%;
+            left: 165px;
+            color: #fff;
+            transform: translateY(-50%);
+        }
+        .qrcodes {
+            display: flex;
+            margin-top: 10px;
+        }
+    }
 
     .qrcode {
         text-align: center;
@@ -403,7 +464,7 @@ export default {
         height: 153px;
         margin-top: -240px;
         color: #fff;
-        background: url(../../assets/images/about/about2.png) 0 0 / cover no-repeat;
+        background: url(https://huorantech.com/images/about/about2.png) 0 0 / cover no-repeat;
         .inner {
             padding: 0;
         }
@@ -417,7 +478,7 @@ export default {
     }
     .culture {
         position: relative;
-        background: #fff url(../../assets/images/about/about3.png) 0 0/100% 100% no-repeat;
+        background: #fff url(https://huorantech.com/images/about/about3.png) 0 0/100% 100% no-repeat;
         .inner {
             padding-bottom: 112px;
         }
@@ -543,7 +604,7 @@ export default {
     .contact {
         position: relative;
         padding: 0 0 106px 0;
-        background: url(../../assets/images/about/map.png) 0 0 / cover no-repeat;
+        background: url(https://huorantech.com/images/about/map.png) 0 0 / cover no-repeat;
         .inner {
             padding: 0;
         }
@@ -599,8 +660,8 @@ export default {
 
     .about {
         padding: 130px 0 200px;
-        background: url(../../assets/images/index/about2.png) (bottom right) / auto no-repeat,
-            url(../../assets/images/index/about1.png) 0 0 / cover no-repeat;
+        background: url(https://huorantech.com/images/index/about2.png) (bottom right) / auto no-repeat,
+            url(https://huorantech.com/images/index/about1.png) 0 0 / cover no-repeat;
         .inner {
             padding: 0;
         }
@@ -641,7 +702,7 @@ export default {
     }
     .adv {
         position: relative;
-        background: #fff url(../../assets/images/index/index7.png) 0 0/100% 100% no-repeat;
+        background: #fff url(https://huorantech.com/images/index/index7.png) 0 0/100% 100% no-repeat;
         .list {
             display: flex;
             li {
@@ -685,7 +746,7 @@ export default {
     }
     .service {
         position: relative;
-        background: #0653ff url(../../assets/images/index/service4.png) 0 0/100% 100% no-repeat;
+        background: #0653ff url(https://huorantech.com/images/index/service4.png) 0 0/100% 100% no-repeat;
         .i-title {
             color: #fff;
         }
@@ -775,8 +836,8 @@ export default {
         }
     }
     .product {
-        background: url(../../assets/images/index/pro-bg1.png) (right 828px) / auto no-repeat,
-            url(../../assets/images/index/pro-bg8.png) (left bottom) / auto no-repeat;
+        background: url(https://huorantech.com/images/index/pro-bg1.png) (right 828px) / auto no-repeat,
+            url(https://huorantech.com/images/index/pro-bg8.png) (left bottom) / auto no-repeat;
         background-color: #fff;
         .list {
             display: flex;
@@ -831,10 +892,10 @@ export default {
             top: 157px;
             width: 21px;
             height: 21px;
-            background: url(../../assets/images/index/arrow.png) no-repeat;
+            background: url(https://huorantech.com/images/index/arrow.png) no-repeat;
             cursor: pointer;
             &:hover {
-                background-image: url(../../assets/images/index/arrow-active.png);
+                background-image: url(https://huorantech.com/images/index/arrow-active.png);
             }
         }
         .a-left {
@@ -910,7 +971,7 @@ export default {
         }
     }
     .parner {
-        background: #fff url(../../assets/images/index/parner.png) 0 0 / cover no-repeat;
+        background: #fff url(https://huorantech.com/images/index/parner.png) 0 0 / cover no-repeat;
         .i-title,
         .brief {
             color: #fff;
@@ -923,7 +984,7 @@ export default {
         height: 600px;
     }
     .client {
-        background: url(../../assets/images/index/client.png) 0 0 / cover no-repeat;
+        background: url(https://huorantech.com/images/index/client.png) 0 0 / cover no-repeat;
     }
     .client-pic {
         display: flex;
@@ -1041,9 +1102,9 @@ export default {
         cursor: pointer;
     }
     .wechat {
-        background: #fff url(../../assets/images/index/wechat.png) center center/auto no-repeat;
+        background: #fff url(https://huorantech.com/images/index/wechat.png) center center/auto no-repeat;
         &:hover {
-            background-image: url(../../assets/images/index/wechat-1.png);
+            background-image: url(https://huorantech.com/images/index/wechat-1.png);
             background-color: #006eff;
             & + .popup {
                 display: block;
@@ -1051,9 +1112,9 @@ export default {
         }
     }
     .tel {
-        background: #fff url(../../assets/images/index/tel.png) center center/auto no-repeat;
+        background: #fff url(https://huorantech.com/images/index/tel.png) center center/auto no-repeat;
         &:hover {
-            background-image: url(../../assets/images/index/tel-1.png);
+            background-image: url(https://huorantech.com/images/index/tel-1.png);
             background-color: #006eff;
             & + .popup {
                 display: block;
@@ -1061,9 +1122,9 @@ export default {
         }
     }
     .topping {
-        background: #fff url(../../assets/images/index/top.png) center center/auto no-repeat;
+        background: #fff url(https://huorantech.com/images/index/top.png) center center/auto no-repeat;
         &:hover {
-            background-image: url(../../assets/images/index/top-1.png);
+            background-image: url(https://huorantech.com/images/index/top-1.png);
             background-color: #006eff;
         }
     }
diff --git a/src/pages/index/list/index.vue b/src/pages/index/list/index.vue
index 392ae01..fdf85bf 100644
--- a/src/pages/index/list/index.vue
+++ b/src/pages/index/list/index.vue
@@ -10,11 +10,6 @@
                           :key="i">
           <div class="pic"
                :style="{backgroundImage: 'url(' + item.pic + ')'}"></div>
-          <!-- <img :class="[{'cursor-pointer': isLink(item.link.linkName)}]"
-               width="100%"
-               :src="item.pic"
-               alt=""
-               @click="openLink(item)"> -->
           <div class="text-wrap">
             <div v-if="!GTA && !i"
                  class="qrcode-wrap">
@@ -61,12 +56,14 @@
                    src="@/assets/images/type.png"
                    alt="">
             </div>
-            <ul class="tab">
-              <li v-for="(tab, i) in tabs"
-                  :key="i"
-                  :class="{active: curTab === tab.id}"
-                  @click="tabChange(tab)">{{ tab.name }}</li>
-            </ul>
+            <div class="tab-con">
+              <ul class="tab">
+                <li v-for="(tab, i) in tabs"
+                    :key="i"
+                    :class="{active: curTab === tab.id}"
+                    @click="tabChange(tab)">{{ tab.name }}</li>
+              </ul>
+            </div>
           </div>
           <div class="search">
             <img class="icon"
@@ -994,14 +991,19 @@ export default {
             }
         }
         .type-wrap {
+            .tab-con {
+                max-width: 100%;
+                margin-bottom: 10px;
+                overflow: auto;
+            }
             .tab {
-                flex-wrap: wrap;
                 li {
                     margin-bottom: 20px;
                 }
             }
         }
         .search {
+            width: 100%;
             margin-top: 0;
         }
         .courses {