feat(header): 添加主题切换和商务合作热线功能

- 增加 header-light 主题样式
- 动态切换 logo 颜色
- 添加商务合作热线图标和信息
- 优化导航栏样式和布局

package.json

@@ -43,6 +43,7 @@
   "dependencies": {
     "@babel/parser": "7.18.4",
     "@riophae/vue-treeselect": "0.4.0",
+    "animate.css": "^4.1.1",
     "axios": "0.27.2",
     "benz-amr-recorder": "^1.1.5",
     "bpmn-js-token-simulation": "0.10.0",
@@ -63,8 +64,10 @@
     "quill": "1.3.7",
     "screenfull": "5.0.2",
     "sortablejs": "1.10.2",
+    "swiper": "9.4.1",
     "throttle-debounce": "2.1.0",
     "vue": "2.7.14",
+    "vue-awesome-swiper": "^5.0.1",
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.5.8",
     "vue-meta": "^2.4.0",

src/permission.js

@@ -9,7 +9,7 @@ import { isRelogin } from '@/utils/request'
 NProgress.configure({ showSpinner: false })
 
 // 增加三方登陆 update by 芋艿
-const whiteList = ['/login', '/social-login',  '/auth-redirect', '/bind', '/register', '/oauthLogin/gitee']
+const whiteList = ['/login', '/social-login',  '/auth-redirect', '/bind', '/register', '/oauthLogin/gitee','/home']
 
 router.beforeEach((to, from, next) => {
   NProgress.start()

src/views/components/v-header/index.vue

@@ -1,10 +1,22 @@
 <template>
-  <div class="cjy-header">
+  <div class="cjy-header" :class="theme">
     <div class="v-container cjy-header-box row flex-align-center">
-      <div class="cjy-header-logo"><img src="@/assets/images/logo_red.svg" class="img" /></div>
+      <div class="cjy-header-logo">
+        <img
+          :src="theme === 'header-light' ? require('@/assets/images/logo_red.svg') : require('@/assets/images/logo_white.svg')"
+          class="img" />
+      </div>
       <div class="cjy-header-nav row">
-        <div class="nav-item" v-for="(item, index) in nav_list" :key="index" @click="gotoPages(item.url)">{{ item.title
-          }}</div>
+        <div class="nav-item" v-for="(item, index) in nav_list" :key="index" @click="gotoPages(item.url)">{{
+          item.title}}</div>
+      </div>
+      <div class="call-box">
+        <div class="call-icon-box">
+          <i class="el-icon-phone"></i>
+        </div>
+        <div class="info-box">
+          商务合作热线：0311-87038668
+        </div>
       </div>
     </div>
   </div>
@@ -13,6 +25,11 @@
 <script>
   export default {
     name: "index",
+    props: {
+      theme: {
+        default: ''
+      }
+    },
     data() {
       return {
         nav_list: []
@@ -24,7 +41,7 @@
     methods: {
       getNavList() {
         this.nav_list = [
-          { title: "首页", url: "" },
+          { title: "首页", url: "/home" },
           { title: "解决方案", url: "" },
           { title: "经典案例", url: "/case-list" },
           { title: "新闻资讯", url: "/news-list" },
@@ -43,9 +60,18 @@
   .cjy-header {
     height: 100px;
     background-color: #fff;
-  .cjy-header-box{height: 100%}
+    transition: all 0.3s ease-in-out;
+
+    .cjy-header-box {
+      height: 100%
+    }
+
+    .cjy-header-logo {
+      .img {
+        width: 125px
+      }
+    }
 
-  .cjy-header-logo{.img{width: 125px}}
     .cjy-header-nav {
       margin-left: 40px;
 
@@ -77,5 +103,49 @@
         transform: translate(-50%, 0) scaleX(1);
       }
     }
+
+    .call-box {
+      display: flex;
+      margin-left: 100px;
+
+      .call-icon-box {
+        width: 26px;
+        height: 26px;
+        border-radius: 50%;
+        background-color: #0B59B3;
+        text-align: center;
+        line-height: 26px;
+
+        i {
+          color: #fff;
+          font-size: 14px;
+        }
+      }
+
+      .info-box {
+        font-family: PingFang SC;
+        font-weight: 500;
+        font-size: 18px;
+        color: #FFFFFF;
+        margin-left: 15px;
+      }
+    }
+  }
+
+  .header-light {
+    gap: 20px;
+    border-radius: 0px;
+    background-color: #fff !important;
+    backdrop-filter: blur(5px);
+    box-shadow: rgba(0, 0, 0, 0.1) 2px 8px 8px;
+
+    .nav-item,.info-box{
+      color: #2A333D !important;
+    }
+
+    .nav-item::before {
+      background-color: #0B59B3 !important;
+    }
+    
   }
 </style>

yarn.lock

@@ -1899,6 +1899,11 @@ alphanum-sort@^1.0.0:
   resolved "https://registry.npmmirror.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz"
   integrity sha512-0FcBfdcmaumGPQ0qPn7Q5qTgz/ooXgIyp1rf8ik5bGX8mpE2YHjC0P/eyQvxu1GURYQgq9ozf2mteQ5ZD9YiyQ==
 
+animate.css@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.npmmirror.com/animate.css/-/animate.css-4.1.1.tgz#614ec5a81131d7e4dc362a58143f7406abd68075"
+  integrity sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==
+
 ansi-colors@^3.0.0:
   version "3.2.4"
   resolved "https://registry.npmmirror.com/ansi-colors/-/ansi-colors-3.2.4.tgz"
@@ -3973,7 +3978,7 @@ ecc-jsbn@~0.1.1:
 
 echarts-wordcloud@^2.1.0:
   version "2.1.0"
-  resolved "https://registry.npmmirror.com/echarts-wordcloud/-/echarts-wordcloud-2.1.0.tgz#c3de6fe267044f6c3343e4ff0e05eedb01c05096"
+  resolved "https://registry.npmmirror.com/echarts-wordcloud/-/echarts-wordcloud-2.1.0.tgz"
   integrity sha512-Kt1JmbcROgb+3IMI48KZECK2AP5lG6bSsOEs+AsuwaWJxQom31RTNd6NFYI01E/YaI1PFZeueaupjlmzSQasjQ==
 
 echarts@5.4.0:
@@ -4011,7 +4016,7 @@ electron-to-chromium@^1.4.251:
 
 element-ui@2.15.14:
   version "2.15.14"
-  resolved "https://registry.npmmirror.com/element-ui/-/element-ui-2.15.14.tgz#3c34df79467636592812d720d2e6784e7a6ec2ea"
+  resolved "https://registry.npmmirror.com/element-ui/-/element-ui-2.15.14.tgz"
   integrity sha512-2v9fHL0ZGINotOlRIAJD5YuVB8V7WKxrE9Qy7dXhRipa035+kF7WuU/z+tEmLVPBcJ0zt8mOu1DKpWcVzBK8IA==
   dependencies:
     async-validator "~1.8.1"
@@ -9134,6 +9139,11 @@ sshpk@^1.7.0:
     safer-buffer "^2.0.2"
     tweetnacl "~0.14.0"
 
+ssr-window@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.npmmirror.com/ssr-window/-/ssr-window-4.0.2.tgz#dc6b3ee37be86ac0e3ddc60030f7b3bc9b8553be"
+  integrity sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ==
+
 ssri@^6.0.1:
   version "6.0.2"
   resolved "https://registry.npmmirror.com/ssri/-/ssri-6.0.2.tgz"
@@ -9459,6 +9469,13 @@ svgo@^1.0.0:
     unquote "~1.1.1"
     util.promisify "~1.0.0"
 
+swiper@9.4.1:
+  version "9.4.1"
+  resolved "https://registry.npmmirror.com/swiper/-/swiper-9.4.1.tgz#2f48bcd6ab4b4fcf4ae93eaee53980531d42fd42"
+  integrity sha512-1nT2T8EzUpZ0FagEqaN/YAhRj33F2x/lN6cyB0/xoYJDMf8KwTFT3hMOeoB8Tg4o3+P/CKqskP+WX0Df046fqA==
+  dependencies:
+    ssr-window "^4.0.2"
+
 table@^5.2.3:
   version "5.4.6"
   resolved "https://registry.npmmirror.com/table/-/table-5.4.6.tgz"
@@ -10122,6 +10139,11 @@ vm-browserify@^1.0.1:
   resolved "https://registry.npmmirror.com/vm-browserify/-/vm-browserify-1.1.2.tgz"
   integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
 
+vue-awesome-swiper@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.npmmirror.com/vue-awesome-swiper/-/vue-awesome-swiper-5.0.1.tgz"
+  integrity sha512-mWjFJzUqA4lG+DmsmibvMpoiBnl+IH2SSeiiQ3i5M0t1y9FknTxnGT0DsMb2YdJLgjYMEK3sYOWzqgLnZMH8Lg==
+
 vue-count-to@1.0.13:
   version "1.0.13"
   resolved "https://registry.npmmirror.com/vue-count-to/-/vue-count-to-1.0.13.tgz"