初始化

src/assets/styles/v-vision.scss

@@ -22,28 +22,37 @@ img {
 .cjy-banner {
   position: relative;
 
+  &:before{
+    content: "";
+    position: absolute;
+    width: 800px;
+    height: 250px;
+    top: 40%;
+    left: 33%;
+    transform: translate(-50%, -40%);
+    background: url("~@/assets/images/title_bg.svg");
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: 0 bottom;
+  }
   .cjy-banner-text {
     position: absolute;
     width: 1220px;
     top: 40%;
     left: 50%;
     transform: translate(-50%, -40%);
-
     .title {
+
       height: 140px;
-      padding-left: 60px;
+
       font-weight: bold;
       font-size: 72px;
       color: #fff;
-      background: url("~@/assets/images/title_bg.svg");
+
-      background-size: contain;
-      background-repeat: no-repeat;
-      background-position: 0 bottom;
     }
 
     .subtitle {
       margin-top: -20px;
-      padding-left: 60px;
       font-size: 24px;
       color: #fff
     }
@@ -113,7 +122,7 @@ img {
       }
       .date{
         margin-top: 20px;
-        color: #475467;
+        color: #999;
         font-size: 14px;}
       .more {
         margin-top: 20px;
@@ -499,14 +508,15 @@ img {
 
 .cjy-tabs {
   .el-tabs__nav {
-    transform: translateX(50%) !important;
+    display: inline-block;
+    transform: translateX(-50%) !important;
     float: none;
-    margin-left: -285px;
+    left: 50%;
   }
 
   .el-tabs__nav-wrap::after {
     background-color: transparent;
-    border-bottom: 1px dotted #0B59B3;
+    border-bottom: 1px dotted rgba(#0B59B3,.5);
   }
 
   .el-tabs__item {
@@ -893,7 +903,6 @@ img {
 .ql-editor {
   box-sizing: border-box;
   line-height: 1.42;
-  height: 100%;
   outline: none;
   overflow-y: auto;
   padding: 12px 15px;
@@ -1232,7 +1241,7 @@ img {
   font-size: 16px;
 }
 .ql-editor .ql-size-huge {
-  font-size: 2.5em;
+  font-size:32px;
 }
 .ql-editor .ql-direction-rtl {
   direction: rtl;

src/views/pages/index.vue

@@ -7,11 +7,12 @@
         <div class="swiper-wrapper">
           <div class="swiper-slide" v-for="(banner, index) in formattedBanners" :key="index">
             <div class="banner" :style="{ backgroundImage: `url(${banner.logo})` }">
+              <div class=" v-container">
               <div class="text-box">
                 <h1 class="banner-title" v-html="banner.title ? banner.title : ''"></h1>
                 <p class="banner-description">{{ banner.subtitle || '' }}</p>
                 <router-link :to="banner.url ? banner.url : ''" class="learn-more">了解更多</router-link>
-              </div>
+              </div></div>
             </div>
           </div>
         </div>
@@ -37,12 +38,12 @@
           </div>
         </div>
         <div class="ciontent-text solve-plan-text">
-          <el-tabs class="pc-el-tabs" stretch v-model="activeName">
+          <el-tabs class="pc-el-tabs"  v-model="activeName">
             <el-tab-pane v-for="(product, index) in solvePlan" :key="index" :label="product.title"
                          :name="'第' + index + '个'">
               <div class="solve-plan-tabs-content">
                 <div class="solve-plan-tabs-content-left">
-                  <div class="solve-plan-tabs-content-left-html"
+                  <div class="ql-editor solve-plan-tabs-content-left-html"
                        v-html="product.introduction ? product.introduction : ''">
                   </div>
                   <div class="saw-detail" @click="gotoDetail(product.id,1)">查看详情&rarr;</div>
@@ -66,7 +67,7 @@
           </div>
         </div>
         <div class="ciontent-text solve-plan-text scence-plan-text">
-          <el-tabs class="pc-el-tabs-dark" stretch v-model="activeName1">
+          <el-tabs class="pc-el-tabs-dark" v-model="activeName1">
             <el-tab-pane v-for="(product, index) in scensePlan" :key="index" :label="product.title"
                          :name="'第' + index + '个'">
               <div class="solve-plan-tabs-content">
@@ -74,7 +75,7 @@
                   <img :src="product.logo ? product.logo : ''" alt="">
                 </div>
                 <div class="solve-plan-tabs-content-left">
-                  <div class="solve-plan-tabs-content-left-html"
+                  <div class="ql-editor solve-plan-tabs-content-left-html"
                        v-html="product.introduction ? product.introduction : ''">
                   </div>
                   <div class="saw-detail" @click="gotoDetail(product.id,1)">查看详情&rarr;</div>
@@ -102,7 +103,7 @@
           </div>
           <div class="classic-case-text-right">
             <div class="classic-case-text-right-top" v-if="formattedClassicAse[ativeindex]">
-              <div class="classic-case-text-right-content" v-html="formattedClassicAse[ativeindex].introduction"></div>
+              <div class="ql-editor classic-case-text-right-content" v-html="formattedClassicAse[ativeindex].introduction"></div>
               <div class="classic-case-text-right-top-images-box"
                    v-if="formattedClassicAse[ativeindex].images.length > 0">
                 <el-image class="classic-case-text-right-middle-images"
@@ -159,7 +160,7 @@
           </div>
         </div>
         <div class="ciontent-text news-text">
-          <el-tabs class="pc-el-tabs-dark short-tabs" stretch v-model="activeName2" @tab-click="handleClick">
+          <el-tabs class="cjy-tabs short-tabs" v-model="activeName2" @tab-click="handleClick">
             <el-tab-pane label="公司动态" name="first">
               <el-row class="news-row" :gutter="40">
                 <el-col v-for="(item, index) in newsList" class="news-col row" :span="12"
@@ -593,13 +594,13 @@ export default {
   .text-box {
     width: 1000px;
     height: 500px;
-    margin-left: 10%;
     padding: 10px;
   }
 }
 
 .banner-title {
   font-size: 68px;
+  line-height: 90px;
   /* 调整标题字体大小 */
   font-weight: bold;
   opacity: 0;
@@ -612,7 +613,7 @@ export default {
   text-align: left;
   font-size: 22px;
   /* 调整描述字体大小 */
-  margin: 10px 0;
+  margin: 30px 0 20px 0;
   /* 添加上下间距 */
 }
 
@@ -642,7 +643,7 @@ export default {
   border-radius: 5px;
   transition: all 0.3s ease-in-out;
   float: left;
-
+font-size: 16px;
   &:hover {
     background-color: rgba(255, 255, 255, 0.8);
     color: #333;
@@ -697,7 +698,7 @@ export default {
         font-family: PingFang SC;
         font-weight: bold;
         font-size: 30px;
-        color: #E5E5E5;
+        color: rgba(0,0,0,.05);
       }
 
       .saw-more-box {
@@ -769,10 +770,9 @@ export default {
 }
 
 .company-profile {
-  height: 745px;
+  height: 800px;
   scrollbar-width: none;
   overflow: hidden;
-  overflow-y: scroll;
 
   .company-profile-title {
     text-align: center;
@@ -783,7 +783,7 @@ export default {
   }
 
   .company-profile-text {
-    height: 515px;
+    height: 700px;
     scrollbar-width: none;
     overflow: hidden;
     overflow-y: hidden;
@@ -807,7 +807,7 @@ export default {
 
     &::after {
       content: 'GLOBAL TOURISM SOLUTION' !important;
-      color: #e5e5e537 !important;
+      color: rgba(255,255,255,.05) !important;
     }
   }
 
@@ -824,6 +824,7 @@ export default {
       .solve-plan-tabs-content-left-html {
         width: 100%;
         height: 370px;
+        line-height: 24px;
         padding-top: 20px;
         overflow: scroll;
         overflow-x: hidden;
@@ -982,11 +983,12 @@ export default {
 
     .classic-case-text-right {
       width: 895px;
-      height: 560px;
       padding: 40px 35px;
+      background-color: #fff;
+      border-radius: 12px;
 
       .classic-case-text-right-top {
-        height: 430px;
+        height: 350px;
         border-bottom: solid 1px #2a333d1b;
         transition: all ease 0.3s;
 
@@ -995,6 +997,7 @@ export default {
           overflow-y: scroll;
           scrollbar-width: none;
           margin-bottom: 25px;
+          line-height: 24px;
         }
 
         .classic-case-text-right-top-images-box {
@@ -1007,7 +1010,7 @@ export default {
           .classic-case-text-right-middle-images {
             width: 360px;
             height: 200px;
-
+.el-image__inner{height: auto!important;}
             &:not(:first-child) {
               margin-left: 10px;
             }
@@ -1221,8 +1224,8 @@ export default {
             .news-time {
               transition: all ease 0.3s;
 
-              font-size: 16px;
+              font-size: 14px;
-              color: #2A333D;
+              color: #999;
             }
 
             .more-jian {
@@ -1242,20 +1245,50 @@ export default {
 </style>
 <style lang="scss">
 .pc-el-tabs {
+  .el-tabs__nav {
+    display: inline-block;
+    transform: translateX(-50%) !important;
+    float: none;
+    left: 50%;
+  }
+
   .el-tabs__nav-wrap::after {
-    background-color: #c2deff5a;
+    background-color: transparent;
+    border-bottom: 1px dotted rgba(255,255,255,0.5);
+  }
+
+  .el-tabs__item {
+    font-size: 16px;
+    padding: 0 80px;
+  }
+
+  .el-tabs__item:hover {
+    color: #fff;
+    cursor: pointer;
+  }
+
+  .el-tabs__item.is-active {
+    color: #fff;
   }
 
   .el-tabs__active-bar {
     background-color: #fff;
   }
 
+  .el-tabs__nav-next {
+    display: none
+  }
+
+  .el-tabs__nav-prev {
+    display: none
+  }
+
   .el-tabs__item.is-active {
     color: #fff;
   }
 
   .el-tabs__item {
-    color: #E5F1FF;
+    color: #fff;
 
   }
 
@@ -1266,23 +1299,49 @@ export default {
 
 
 .pc-el-tabs-dark {
-  .el-tabs__active-bar {
+  .el-tabs__nav {
-    background-color: #0B59B3;
+    display: inline-block;
+    transform: translateX(-50%) !important;
+    float: none;
+    left: 50%;
   }
 
-  .el-tabs__item.is-active {
+  .el-tabs__nav-wrap::after {
-    color: #0B59B3;
+    background-color: transparent;
+    border-bottom: 1px dotted rgba(#0B59B3,.5);
+  }
+
+  .el-tabs__item {
+    font-size: 16px;
+    padding: 0 80px;
   }
 
   .el-tabs__item:hover {
     color: #0B59B3;
+    cursor: pointer;
+  }
+
+  .el-tabs__item.is-active {
+    color: #0B59B3;
+  }
+
+  .el-tabs__active-bar {
+    background-color: #0B59B3;
+  }
+
+  .el-tabs__nav-next {
+    display: none
+  }
+
+  .el-tabs__nav-prev {
+    display: none
   }
 }
 
 .short-tabs {
 
   .el-tabs__header {
-    width: 20%;
+    width: 30%;
     margin: 0 auto;
     margin-bottom: 45px;
   }

src/views/pages/news-list.vue

@@ -19,7 +19,7 @@
     </div>
     <!-- 新闻 列表 -->
     <div class="v-container cjy-news-list">
-      <el-tabs v-model="active"  class="cjy-tabs">
+      <el-tabs v-model="active"  class="cjy-tabs" @tab-click="handleClick">
         <el-tab-pane label="公司动态" name="first">
           <div class="list-item" v-for="(item,index) in news_list" :key="index">
             <div class="item-box row" @click="gotoPages(item.id)">
@@ -101,6 +101,9 @@ export default {
       let res = await Api.getColumnInfoList(this.queryParams)
       this.news_list = res.data.list
     },
+    handleClick() {
+      this.infoPages()
+    },
     // 跳转页面 函数
     gotoPages(val) {
       this.$router.push("/news-detail?id=" + val)

src/views/pages/theme/about-us.vue

@@ -38,7 +38,7 @@
               </div>
             </div>
           </el-col>
-          <el-col :span="12" class="info" v-html="company_info.content"></el-col>
+          <el-col :span="12" class="info" v-html="company_info.introduction"></el-col>
         </el-row>
       </div>
     </div>