diff --git a/public/favicon.ico b/public/favicon.ico
index e263760..1cf32e6 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/src/assets/images/about-step-bg.png b/src/assets/images/about-step-bg.png
new file mode 100644
index 0000000..d7fd1fa
Binary files /dev/null and b/src/assets/images/about-step-bg.png differ
diff --git a/src/assets/styles/v-global.scss b/src/assets/styles/v-global.scss
index 89267f3..d177a77 100644
--- a/src/assets/styles/v-global.scss
+++ b/src/assets/styles/v-global.scss
@@ -219,3 +219,4 @@ a:not([href]):not([class]):hover{color:inherit;text-decoration:none}
 .m-t-normal{margin-top: 16px;}
 .m-t-large{margin-top: 100px;}
 .m-b-large{margin-bottom: 100px;}
+.m-b-base{margin-bottom: 20px;}
diff --git a/src/assets/styles/v-vision.scss b/src/assets/styles/v-vision.scss
index d19bacc..754888d 100644
--- a/src/assets/styles/v-vision.scss
+++ b/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
     }
@@ -53,7 +62,7 @@ img {
     width: 100% !important;
   }
 }
-
+.m-t-100{margin-top: 100px}
 .cjy-pages {
   background: #fafafa !important;
 }
@@ -111,9 +120,12 @@ img {
         -webkit-line-clamp: 3;
         -webkit-box-orient: vertical;
       }
-
+      .date{
+        margin-top: 20px;
+        color: #999;
+        font-size: 14px;}
       .more {
-        margin-top: 30px;
+        margin-top: 20px;
         color: #0B51B2;
         font-size: 14px;
 
@@ -364,7 +376,7 @@ img {
       .item-box {
         transform: scale(1.05);
         transition: all .4s;
-        border-color: #0B51B2;
+
       }
 
       .item-content {
@@ -496,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 {
@@ -594,11 +607,11 @@ img {
 
   .list-item {
     display: flex;
-    padding: 10px 20px;
+    padding: 10px;
     height: 175px;
     border: 1px solid #EDEEF0;
     border-radius: 8px;
-    margin: 10px;
+    margin:10px 5px;
     overflow: hidden;
 
     .img {
@@ -628,7 +641,7 @@ img {
 }
 
 .cjy-about-step {
-  margin-bottom: 30px;
+  margin-top: 60px;
   padding-left: 30px;
 
   .step-item {
@@ -680,6 +693,7 @@ img {
 
 .cjy-about-step-date {
   width: 100%;
+  margin-top: 40px;
   height: 150px;
   overflow: hidden;
 
@@ -812,28 +826,28 @@ img {
     background-image: url("~@/assets/images/icon-culture01.svg");
     background-repeat: no-repeat;
     background-position: center;
-    background-size: 50%;
+    background-size: 35%;
   }
 
   .el-col-6:nth-child(2) .icon {
     background-image: url("~@/assets/images/icon-culture02.svg");
     background-repeat: no-repeat;
     background-position: center;
-    background-size: 50%;
+    background-size: 40%;
   }
 
   .el-col-6:nth-child(3) .icon {
     background-image: url("~@/assets/images/icon-culture03.svg");
     background-repeat: no-repeat;
     background-position: center;
-    background-size: 50%;
+    background-size: 40%;
   }
 
   .el-col-6:nth-child(4) .icon {
     background-image: url("~@/assets/images/icon-culture04.svg");
     background-repeat: no-repeat;
     background-position: center;
-    background-size: 50%;
+    background-size: 40%;
   }
 
   .title {
@@ -855,3 +869,947 @@ img {
 .culture-bot {
   margin-top: 50px;
 }
+/*!
+ * Quill Editor v1.3.7
+ * https://quilljs.com/
+ * Copyright (c) 2014, Jason Chen
+ * Copyright (c) 2013, salesforce.com
+ */
+.ql-container {
+  box-sizing: border-box;
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 13px;
+  height: 100%;
+  margin: 0px;
+  position: relative;
+}
+.ql-container.ql-disabled .ql-tooltip {
+  visibility: hidden;
+}
+.ql-container.ql-disabled .ql-editor ul[data-checked] > li::before {
+  pointer-events: none;
+}
+.ql-clipboard {
+  left: -100000px;
+  height: 1px;
+  overflow-y: hidden;
+  position: absolute;
+  top: 50%;
+}
+.ql-clipboard p {
+  margin: 0;
+  padding: 0;
+}
+.ql-editor {
+  box-sizing: border-box;
+  line-height: 1.42;
+  outline: none;
+  overflow-y: auto;
+  padding: 12px 15px;
+  tab-size: 4;
+  -moz-tab-size: 4;
+  text-align: left;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+.ql-editor > * {
+  cursor: text;
+}
+.ql-editor p,
+.ql-editor ol,
+.ql-editor ul,
+.ql-editor pre,
+.ql-editor blockquote,
+.ql-editor h1,
+.ql-editor h2,
+.ql-editor h3,
+.ql-editor h4,
+.ql-editor h5,
+.ql-editor h6 {
+  margin: 0;
+  padding: 0;
+  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+}
+.ql-editor ol,
+.ql-editor ul {
+  padding-left: 1.5em;
+}
+.ql-editor ol > li,
+.ql-editor ul > li {
+  list-style-type: none;
+}
+.ql-editor ul > li::before {
+  content: '\2022';
+}
+.ql-editor ul[data-checked=true],
+.ql-editor ul[data-checked=false] {
+  pointer-events: none;
+}
+.ql-editor ul[data-checked=true] > li *,
+.ql-editor ul[data-checked=false] > li * {
+  pointer-events: all;
+}
+.ql-editor ul[data-checked=true] > li::before,
+.ql-editor ul[data-checked=false] > li::before {
+  color: #777;
+  cursor: pointer;
+  pointer-events: all;
+}
+.ql-editor ul[data-checked=true] > li::before {
+  content: '\2611';
+}
+.ql-editor ul[data-checked=false] > li::before {
+  content: '\2610';
+}
+.ql-editor li::before {
+  display: inline-block;
+  white-space: nowrap;
+  width: 1.2em;
+}
+.ql-editor li:not(.ql-direction-rtl)::before {
+  margin-left: -1.5em;
+  margin-right: 0.3em;
+  text-align: right;
+}
+.ql-editor li.ql-direction-rtl::before {
+  margin-left: 0.3em;
+  margin-right: -1.5em;
+}
+.ql-editor ol li:not(.ql-direction-rtl),
+.ql-editor ul li:not(.ql-direction-rtl) {
+  padding-left: 1.5em;
+}
+.ql-editor ol li.ql-direction-rtl,
+.ql-editor ul li.ql-direction-rtl {
+  padding-right: 1.5em;
+}
+.ql-editor ol li {
+  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+  counter-increment: list-0;
+}
+.ql-editor ol li:before {
+  content: counter(list-0, decimal) '. ';
+}
+.ql-editor ol li.ql-indent-1 {
+  counter-increment: list-1;
+}
+.ql-editor ol li.ql-indent-1:before {
+  content: counter(list-1, lower-alpha) '. ';
+}
+.ql-editor ol li.ql-indent-1 {
+  counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-2 {
+  counter-increment: list-2;
+}
+.ql-editor ol li.ql-indent-2:before {
+  content: counter(list-2, lower-roman) '. ';
+}
+.ql-editor ol li.ql-indent-2 {
+  counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-3 {
+  counter-increment: list-3;
+}
+.ql-editor ol li.ql-indent-3:before {
+  content: counter(list-3, decimal) '. ';
+}
+.ql-editor ol li.ql-indent-3 {
+  counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-4 {
+  counter-increment: list-4;
+}
+.ql-editor ol li.ql-indent-4:before {
+  content: counter(list-4, lower-alpha) '. ';
+}
+.ql-editor ol li.ql-indent-4 {
+  counter-reset: list-5 list-6 list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-5 {
+  counter-increment: list-5;
+}
+.ql-editor ol li.ql-indent-5:before {
+  content: counter(list-5, lower-roman) '. ';
+}
+.ql-editor ol li.ql-indent-5 {
+  counter-reset: list-6 list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-6 {
+  counter-increment: list-6;
+}
+.ql-editor ol li.ql-indent-6:before {
+  content: counter(list-6, decimal) '. ';
+}
+.ql-editor ol li.ql-indent-6 {
+  counter-reset: list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-7 {
+  counter-increment: list-7;
+}
+.ql-editor ol li.ql-indent-7:before {
+  content: counter(list-7, lower-alpha) '. ';
+}
+.ql-editor ol li.ql-indent-7 {
+  counter-reset: list-8 list-9;
+}
+.ql-editor ol li.ql-indent-8 {
+  counter-increment: list-8;
+}
+.ql-editor ol li.ql-indent-8:before {
+  content: counter(list-8, lower-roman) '. ';
+}
+.ql-editor ol li.ql-indent-8 {
+  counter-reset: list-9;
+}
+.ql-editor ol li.ql-indent-9 {
+  counter-increment: list-9;
+}
+.ql-editor ol li.ql-indent-9:before {
+  content: counter(list-9, decimal) '. ';
+}
+.ql-editor .ql-indent-1:not(.ql-direction-rtl) {
+  padding-left: 3em;
+}
+.ql-editor li.ql-indent-1:not(.ql-direction-rtl) {
+  padding-left: 4.5em;
+}
+.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right {
+  padding-right: 3em;
+}
+.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right {
+  padding-right: 4.5em;
+}
+.ql-editor .ql-indent-2:not(.ql-direction-rtl) {
+  padding-left: 6em;
+}
+.ql-editor li.ql-indent-2:not(.ql-direction-rtl) {
+  padding-left: 7.5em;
+}
+.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right {
+  padding-right: 6em;
+}
+.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right {
+  padding-right: 7.5em;
+}
+.ql-editor .ql-indent-3:not(.ql-direction-rtl) {
+  padding-left: 9em;
+}
+.ql-editor li.ql-indent-3:not(.ql-direction-rtl) {
+  padding-left: 10.5em;
+}
+.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right {
+  padding-right: 9em;
+}
+.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right {
+  padding-right: 10.5em;
+}
+.ql-editor .ql-indent-4:not(.ql-direction-rtl) {
+  padding-left: 12em;
+}
+.ql-editor li.ql-indent-4:not(.ql-direction-rtl) {
+  padding-left: 13.5em;
+}
+.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right {
+  padding-right: 12em;
+}
+.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right {
+  padding-right: 13.5em;
+}
+.ql-editor .ql-indent-5:not(.ql-direction-rtl) {
+  padding-left: 15em;
+}
+.ql-editor li.ql-indent-5:not(.ql-direction-rtl) {
+  padding-left: 16.5em;
+}
+.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right {
+  padding-right: 15em;
+}
+.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right {
+  padding-right: 16.5em;
+}
+.ql-editor .ql-indent-6:not(.ql-direction-rtl) {
+  padding-left: 18em;
+}
+.ql-editor li.ql-indent-6:not(.ql-direction-rtl) {
+  padding-left: 19.5em;
+}
+.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right {
+  padding-right: 18em;
+}
+.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right {
+  padding-right: 19.5em;
+}
+.ql-editor .ql-indent-7:not(.ql-direction-rtl) {
+  padding-left: 21em;
+}
+.ql-editor li.ql-indent-7:not(.ql-direction-rtl) {
+  padding-left: 22.5em;
+}
+.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right {
+  padding-right: 21em;
+}
+.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right {
+  padding-right: 22.5em;
+}
+.ql-editor .ql-indent-8:not(.ql-direction-rtl) {
+  padding-left: 24em;
+}
+.ql-editor li.ql-indent-8:not(.ql-direction-rtl) {
+  padding-left: 25.5em;
+}
+.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right {
+  padding-right: 24em;
+}
+.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right {
+  padding-right: 25.5em;
+}
+.ql-editor .ql-indent-9:not(.ql-direction-rtl) {
+  padding-left: 27em;
+}
+.ql-editor li.ql-indent-9:not(.ql-direction-rtl) {
+  padding-left: 28.5em;
+}
+.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right {
+  padding-right: 27em;
+}
+.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right {
+  padding-right: 28.5em;
+}
+.ql-editor .ql-video {
+  display: block;
+  max-width: 100%;
+}
+.ql-editor .ql-video.ql-align-center {
+  margin: 0 auto;
+}
+.ql-editor .ql-video.ql-align-right {
+  margin: 0 0 0 auto;
+}
+.ql-editor .ql-bg-black {
+  background-color: #000;
+}
+.ql-editor .ql-bg-red {
+  background-color: #e60000;
+}
+.ql-editor .ql-bg-orange {
+  background-color: #f90;
+}
+.ql-editor .ql-bg-yellow {
+  background-color: #ff0;
+}
+.ql-editor .ql-bg-green {
+  background-color: #008a00;
+}
+.ql-editor .ql-bg-blue {
+  background-color: #06c;
+}
+.ql-editor .ql-bg-purple {
+  background-color: #93f;
+}
+.ql-editor .ql-color-white {
+  color: #fff;
+}
+.ql-editor .ql-color-red {
+  color: #e60000;
+}
+.ql-editor .ql-color-orange {
+  color: #f90;
+}
+.ql-editor .ql-color-yellow {
+  color: #ff0;
+}
+.ql-editor .ql-color-green {
+  color: #008a00;
+}
+.ql-editor .ql-color-blue {
+  color: #06c;
+}
+.ql-editor .ql-color-purple {
+  color: #93f;
+}
+.ql-editor .ql-font-serif {
+  font-family: Georgia, Times New Roman, serif;
+}
+.ql-editor .ql-font-monospace {
+  font-family: Monaco, Courier New, monospace;
+}
+.ql-editor .ql-size-small {
+  font-size: 14px;
+}
+.ql-editor .ql-size-large {
+  font-size: 16px;
+}
+.ql-editor .ql-size-huge {
+  font-size:32px;
+}
+.ql-editor .ql-direction-rtl {
+  direction: rtl;
+  text-align: inherit;
+}
+.ql-editor .ql-align-center {
+  text-align: center;
+}
+.ql-editor .ql-align-justify {
+  text-align: justify;
+}
+.ql-editor .ql-align-right {
+  text-align: right;
+}
+.ql-editor.ql-blank::before {
+  color: rgba(0,0,0,0.6);
+  content: attr(data-placeholder);
+  font-style: italic;
+  left: 15px;
+  pointer-events: none;
+  position: absolute;
+  right: 15px;
+}
+.ql-snow.ql-toolbar:after,
+.ql-snow .ql-toolbar:after {
+  clear: both;
+  content: '';
+  display: table;
+}
+.ql-snow.ql-toolbar button,
+.ql-snow .ql-toolbar button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: inline-block;
+  float: left;
+  height: 24px;
+  padding: 3px 5px;
+  width: 28px;
+}
+.ql-snow.ql-toolbar button svg,
+.ql-snow .ql-toolbar button svg {
+  float: left;
+  height: 100%;
+}
+.ql-snow.ql-toolbar button:active:hover,
+.ql-snow .ql-toolbar button:active:hover {
+  outline: none;
+}
+.ql-snow.ql-toolbar input.ql-image[type=file],
+.ql-snow .ql-toolbar input.ql-image[type=file] {
+  display: none;
+}
+.ql-snow.ql-toolbar button:hover,
+.ql-snow .ql-toolbar button:hover,
+.ql-snow.ql-toolbar button:focus,
+.ql-snow .ql-toolbar button:focus,
+.ql-snow.ql-toolbar button.ql-active,
+.ql-snow .ql-toolbar button.ql-active,
+.ql-snow.ql-toolbar .ql-picker-label:hover,
+.ql-snow .ql-toolbar .ql-picker-label:hover,
+.ql-snow.ql-toolbar .ql-picker-label.ql-active,
+.ql-snow .ql-toolbar .ql-picker-label.ql-active,
+.ql-snow.ql-toolbar .ql-picker-item:hover,
+.ql-snow .ql-toolbar .ql-picker-item:hover,
+.ql-snow.ql-toolbar .ql-picker-item.ql-selected,
+.ql-snow .ql-toolbar .ql-picker-item.ql-selected {
+  color: #06c;
+}
+.ql-snow.ql-toolbar button:hover .ql-fill,
+.ql-snow .ql-toolbar button:hover .ql-fill,
+.ql-snow.ql-toolbar button:focus .ql-fill,
+.ql-snow .ql-toolbar button:focus .ql-fill,
+.ql-snow.ql-toolbar button.ql-active .ql-fill,
+.ql-snow .ql-toolbar button.ql-active .ql-fill,
+.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,
+.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,
+.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
+.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,
+.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,
+.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,
+.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,
+.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,
+.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,
+.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,
+.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,
+.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,
+.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,
+.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,
+.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
+.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
+.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
+.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
+.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
+.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
+.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
+.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
+  fill: #06c;
+}
+.ql-snow.ql-toolbar button:hover .ql-stroke,
+.ql-snow .ql-toolbar button:hover .ql-stroke,
+.ql-snow.ql-toolbar button:focus .ql-stroke,
+.ql-snow .ql-toolbar button:focus .ql-stroke,
+.ql-snow.ql-toolbar button.ql-active .ql-stroke,
+.ql-snow .ql-toolbar button.ql-active .ql-stroke,
+.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
+.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
+.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
+.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
+.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
+.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
+.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
+.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
+.ql-snow.ql-toolbar button:hover .ql-stroke-miter,
+.ql-snow .ql-toolbar button:hover .ql-stroke-miter,
+.ql-snow.ql-toolbar button:focus .ql-stroke-miter,
+.ql-snow .ql-toolbar button:focus .ql-stroke-miter,
+.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
+.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,
+.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
+.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
+.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
+.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
+.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
+.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
+.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
+.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
+  stroke: #06c;
+}
+@media (pointer: coarse) {
+  .ql-snow.ql-toolbar button:hover:not(.ql-active),
+  .ql-snow .ql-toolbar button:hover:not(.ql-active) {
+    color: #444;
+  }
+  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,
+  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,
+  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,
+  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill {
+    fill: #444;
+  }
+  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,
+  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,
+  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,
+  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter {
+    stroke: #444;
+  }
+}
+.ql-snow {
+  box-sizing: border-box;
+}
+.ql-snow * {
+  box-sizing: border-box;
+}
+.ql-snow .ql-hidden {
+  display: none;
+}
+.ql-snow .ql-out-bottom,
+.ql-snow .ql-out-top {
+  visibility: hidden;
+}
+.ql-snow .ql-tooltip {
+  position: absolute;
+  transform: translateY(10px);
+}
+.ql-snow .ql-tooltip a {
+  cursor: pointer;
+  text-decoration: none;
+}
+.ql-snow .ql-tooltip.ql-flip {
+  transform: translateY(-10px);
+}
+.ql-snow .ql-formats {
+  display: inline-block;
+  vertical-align: middle;
+}
+.ql-snow .ql-formats:after {
+  clear: both;
+  content: '';
+  display: table;
+}
+.ql-snow .ql-stroke {
+  fill: none;
+  stroke: #444;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 2;
+}
+.ql-snow .ql-stroke-miter {
+  fill: none;
+  stroke: #444;
+  stroke-miterlimit: 10;
+  stroke-width: 2;
+}
+.ql-snow .ql-fill,
+.ql-snow .ql-stroke.ql-fill {
+  fill: #444;
+}
+.ql-snow .ql-empty {
+  fill: none;
+}
+.ql-snow .ql-even {
+  fill-rule: evenodd;
+}
+.ql-snow .ql-thin,
+.ql-snow .ql-stroke.ql-thin {
+  stroke-width: 1;
+}
+.ql-snow .ql-transparent {
+  opacity: 0.4;
+}
+.ql-snow .ql-direction svg:last-child {
+  display: none;
+}
+.ql-snow .ql-direction.ql-active svg:last-child {
+  display: inline;
+}
+.ql-snow .ql-direction.ql-active svg:first-child {
+  display: none;
+}
+.ql-snow .ql-editor h1 {
+  font-size: 2em;
+}
+.ql-snow .ql-editor h2 {
+  font-size: 1.5em;
+}
+.ql-snow .ql-editor h3 {
+  font-size: 1.17em;
+}
+.ql-snow .ql-editor h4 {
+  font-size: 1em;
+}
+.ql-snow .ql-editor h5 {
+  font-size: 0.83em;
+}
+.ql-snow .ql-editor h6 {
+  font-size: 0.67em;
+}
+.ql-snow .ql-editor a {
+  text-decoration: underline;
+}
+.ql-snow .ql-editor blockquote {
+  border-left: 4px solid #ccc;
+  margin-bottom: 5px;
+  margin-top: 5px;
+  padding-left: 16px;
+}
+.ql-snow .ql-editor code,
+.ql-snow .ql-editor pre {
+  background-color: #f0f0f0;
+  border-radius: 3px;
+}
+.ql-snow .ql-editor pre {
+  white-space: pre-wrap;
+  margin-bottom: 5px;
+  margin-top: 5px;
+  padding: 5px 10px;
+}
+.ql-snow .ql-editor code {
+  font-size: 85%;
+  padding: 2px 4px;
+}
+.ql-snow .ql-editor pre.ql-syntax {
+  background-color: #23241f;
+  color: #f8f8f2;
+  overflow: visible;
+}
+.ql-snow .ql-editor img {
+  max-width: 100%;
+}
+.ql-snow .ql-picker {
+  color: #444;
+  display: inline-block;
+  float: left;
+  font-size: 14px;
+  font-weight: 500;
+  height: 24px;
+  position: relative;
+  vertical-align: middle;
+}
+.ql-snow .ql-picker-label {
+  cursor: pointer;
+  display: inline-block;
+  height: 100%;
+  padding-left: 8px;
+  padding-right: 2px;
+  position: relative;
+  width: 100%;
+}
+.ql-snow .ql-picker-label::before {
+  display: inline-block;
+  line-height: 22px;
+}
+.ql-snow .ql-picker-options {
+  background-color: #fff;
+  display: none;
+  min-width: 100%;
+  padding: 4px 8px;
+  position: absolute;
+  white-space: nowrap;
+}
+.ql-snow .ql-picker-options .ql-picker-item {
+  cursor: pointer;
+  display: block;
+  padding-bottom: 5px;
+  padding-top: 5px;
+}
+.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+  color: #ccc;
+  z-index: 2;
+}
+.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+  fill: #ccc;
+}
+.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+  stroke: #ccc;
+}
+.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+  display: block;
+  margin-top: -1px;
+  top: 100%;
+  z-index: 1;
+}
+.ql-snow .ql-color-picker,
+.ql-snow .ql-icon-picker {
+  width: 28px;
+}
+.ql-snow .ql-color-picker .ql-picker-label,
+.ql-snow .ql-icon-picker .ql-picker-label {
+  padding: 2px 4px;
+}
+.ql-snow .ql-color-picker .ql-picker-label svg,
+.ql-snow .ql-icon-picker .ql-picker-label svg {
+  right: 4px;
+}
+.ql-snow .ql-icon-picker .ql-picker-options {
+  padding: 4px 0px;
+}
+.ql-snow .ql-icon-picker .ql-picker-item {
+  height: 24px;
+  width: 24px;
+  padding: 2px 4px;
+}
+.ql-snow .ql-color-picker .ql-picker-options {
+  padding: 3px 5px;
+  width: 152px;
+}
+.ql-snow .ql-color-picker .ql-picker-item {
+  border: 1px solid transparent;
+  float: left;
+  height: 16px;
+  margin: 2px;
+  padding: 0px;
+  width: 16px;
+}
+.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg {
+  position: absolute;
+  margin-top: -9px;
+  right: 0;
+  top: 50%;
+  width: 18px;
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before,
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before,
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before {
+  content: attr(data-label);
+}
+.ql-snow .ql-picker.ql-header {
+  width: 98px;
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item::before {
+  content: 'Normal';
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
+  content: 'Heading 1';
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
+  content: 'Heading 2';
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
+  content: 'Heading 3';
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
+  content: 'Heading 4';
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
+  content: 'Heading 5';
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
+  content: 'Heading 6';
+}
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
+  font-size: 2em;
+}
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
+  font-size: 1.5em;
+}
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
+  font-size: 1.17em;
+}
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
+  font-size: 1em;
+}
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
+  font-size: 0.83em;
+}
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
+  font-size: 0.67em;
+}
+.ql-snow .ql-picker.ql-font {
+  width: 108px;
+}
+.ql-snow .ql-picker.ql-font .ql-picker-label::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item::before {
+  content: 'Sans Serif';
+}
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
+  content: 'Serif';
+}
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
+  content: 'Monospace';
+}
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
+  font-family: Georgia, Times New Roman, serif;
+}
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
+  font-family: Monaco, Courier New, monospace;
+}
+.ql-snow .ql-picker.ql-size {
+  width: 98px;
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item::before {
+  content: 'Normal';
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
+  content: 'Small';
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
+  content: 'Large';
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
+  content: 'Huge';
+}
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
+  font-size: 10px;
+}
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
+  font-size: 18px;
+}
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
+  font-size: 32px;
+}
+.ql-snow .ql-color-picker.ql-background .ql-picker-item {
+  background-color: #fff;
+}
+.ql-snow .ql-color-picker.ql-color .ql-picker-item {
+  background-color: #000;
+}
+.ql-toolbar.ql-snow {
+  border: 1px solid #ccc;
+  box-sizing: border-box;
+  font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
+  padding: 8px;
+}
+.ql-toolbar.ql-snow .ql-formats {
+  margin-right: 15px;
+}
+.ql-toolbar.ql-snow .ql-picker-label {
+  border: 1px solid transparent;
+}
+.ql-toolbar.ql-snow .ql-picker-options {
+  border: 1px solid transparent;
+  box-shadow: rgba(0,0,0,0.2) 0 2px 8px;
+}
+.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+  border-color: #ccc;
+}
+.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+  border-color: #ccc;
+}
+.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,
+.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover {
+  border-color: #000;
+}
+.ql-toolbar.ql-snow + .ql-container.ql-snow {
+  border-top: 0px;
+}
+.ql-snow .ql-tooltip {
+  background-color: #fff;
+  border: 1px solid #ccc;
+  box-shadow: 0px 0px 5px #ddd;
+  color: #444;
+  padding: 5px 12px;
+  white-space: nowrap;
+}
+.ql-snow .ql-tooltip::before {
+  content: "Visit URL:";
+  line-height: 26px;
+  margin-right: 8px;
+}
+.ql-snow .ql-tooltip input[type=text] {
+  display: none;
+  border: 1px solid #ccc;
+  font-size: 13px;
+  height: 26px;
+  margin: 0px;
+  padding: 3px 5px;
+  width: 170px;
+}
+.ql-snow .ql-tooltip a.ql-preview {
+  display: inline-block;
+  max-width: 200px;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  vertical-align: top;
+}
+.ql-snow .ql-tooltip a.ql-action::after {
+  border-right: 1px solid #ccc;
+  content: 'Edit';
+  margin-left: 16px;
+  padding-right: 8px;
+}
+.ql-snow .ql-tooltip a.ql-remove::before {
+  content: 'Remove';
+  margin-left: 8px;
+}
+.ql-snow .ql-tooltip a {
+  line-height: 26px;
+}
+.ql-snow .ql-tooltip.ql-editing a.ql-preview,
+.ql-snow .ql-tooltip.ql-editing a.ql-remove {
+  display: none;
+}
+.ql-snow .ql-tooltip.ql-editing input[type=text] {
+  display: inline-block;
+}
+.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
+  border-right: 0px;
+  content: 'Save';
+  padding-right: 0px;
+}
+.ql-snow .ql-tooltip[data-mode=link]::before {
+  content: "Enter link:";
+}
+.ql-snow .ql-tooltip[data-mode=formula]::before {
+  content: "Enter formula:";
+}
+.ql-snow .ql-tooltip[data-mode=video]::before {
+  content: "Enter video:";
+}
+.ql-snow a {
+  color: #06c;
+}
+.ql-container.ql-snow {
+  border: 1px solid #ccc;
+}
diff --git a/src/layout/components/Sidebar/Logo.vue b/src/layout/components/Sidebar/Logo.vue
index 5a0cb5d..d337e68 100644
--- a/src/layout/components/Sidebar/Logo.vue
+++ b/src/layout/components/Sidebar/Logo.vue
@@ -35,7 +35,7 @@ export default {
   },
   data() {
     return {
-      title: '芋道管理系统',
+      title: '河北创巨圆科技发展有限公司',
       logo: logoImg
     }
   }
diff --git a/src/views/cjy/columninfo/ColumnInfoForm.vue b/src/views/cjy/columninfo/ColumnInfoForm.vue
index a3c31ec..26e7fd4 100644
--- a/src/views/cjy/columninfo/ColumnInfoForm.vue
+++ b/src/views/cjy/columninfo/ColumnInfoForm.vue
@@ -40,7 +40,7 @@
           <ImageUpload :showPositionInput="formData.type==6" v-model="formData.image"/>
         </el-form-item>
         <el-form-item label="图库" v-if="formData.type==4">
-          <ImageUpload :limit="-1" v-model="formData.image"/>
+          <ImageUpload :limit="200" v-model="formData.image"/>
         </el-form-item>
         <el-form-item label="内容">
           <Editor v-model="formData.content" :min-height="192"/>
diff --git a/src/views/components/v-bottom/index.vue b/src/views/components/v-bottom/index.vue
index a271a9a..b7bfda8 100644
--- a/src/views/components/v-bottom/index.vue
+++ b/src/views/components/v-bottom/index.vue
@@ -30,7 +30,7 @@
         </div>
       </div>
       <div class="cjy-bottom-right">
-        <img :src="company_data.qrCode">
+        <img :src="company_data.qrCode" style="width: 120px">
         <div class="text">关注公众号<br />
           了解更多最新动态
         </div>
@@ -81,7 +81,7 @@
         }
         let res = await Apis.getColumnInfoList(params)
         this.solvePlan = res.data.list.slice(0, 6);
-        
+
       },
       //智慧景区解决方案
       async getCompanySolvePlan() {
@@ -91,7 +91,7 @@
         }
         let res = await Apis.getColumnInfoList(params)
         this.scensePlan = res.data.list.slice(0, 6);
-        
+
       },
       //经典案例
       async getClassicCase() {
@@ -100,7 +100,7 @@
         }
         let res = await Apis.getColumnInfoList(params)
         this.classicCase = res.data.list.slice(0, 6);
-        
+
       },
       getNavList() {
         this.nav_list = [
diff --git a/src/views/components/v-header/index.vue b/src/views/components/v-header/index.vue
index 1ef04c3..803e0cc 100644
--- a/src/views/components/v-header/index.vue
+++ b/src/views/components/v-header/index.vue
@@ -27,7 +27,7 @@
         <div class="list-box-left">
           <div class="min-title">全域旅游</div>
           <div class="nav-item-text-box">
-            <div class="nav-item-text" v-for="(item, index) in solvePlan" :key='index' @click="gotoPages1(item.id,1)">  
+            <div class="nav-item-text" v-for="(item, index) in solvePlan" :key='index' @click="gotoPages1(item.id,1)">
               {{ item.title }}
             </div>
           </div>
@@ -111,7 +111,7 @@
           title: '更多方案',
           id: this.solvePlan[0].id
         })
-        
+
       },
       //智慧景区解决方案
       async getCompanySolvePlan() {
@@ -125,7 +125,7 @@
           title: '更多方案',
           id: this.scensePlan[0].id
         })
-        
+
       },
       //案例
       async infoPages() {
@@ -221,9 +221,9 @@
         content: '';
         position: absolute;
         left: 50%;
-        bottom: 0;
+        bottom: -2px;
         width: 100%;
-        height: 2px;
+        height: 1px;
         background-color: #0B59B3;
         transform-origin: center;
         transform: translate(-50%, 0) scaleX(0);
@@ -372,7 +372,7 @@
             border-radius: 5px;
             cursor: pointer;
             transition: all ease-in-out 0.3s;
-            background: linear-gradient(to right, #33333328, #f6f6f600);
+            background: linear-gradient(to right, rgba(0,0,0,.1), #f6f6f600);
 
             &:hover {
               color: #0B59B3;
diff --git a/src/views/pages/case-detail.vue b/src/views/pages/case-detail.vue
index 0d77b2e..d980ccd 100644
--- a/src/views/pages/case-detail.vue
+++ b/src/views/pages/case-detail.vue
@@ -3,7 +3,7 @@
     <!-- 页面 头部 -->
     <VHeader></VHeader>
     <!-- 页面 广告条 -->
-    <div class="cjy-banner">
+    <div class="cjy-banner m-t-100">
       <div class="cjy-banner-text">
         <div class="title">{{ banner_data.title || '--' }}</div>
         <div class="subtitle">{{ banner_data.subtitle || '--' }}</div>
@@ -96,7 +96,7 @@
     watch: {
       '$route'(to, from) {
         console.log(to, from);
-        // 当路由变化时调用 infoPages 方法  
+        // 当路由变化时调用 infoPages 方法
         this.infoPages(to.query.id, to.query.type ? to.query.type : 2);
         this.case_id = to.query.id;
         this.type = to.query.type ? to.query.type : 2;
@@ -126,7 +126,7 @@
         }
         let res = await Api.getColumnInfoList(params)
         this.solvePlan = res.data.list.slice(0, 6);
-        
+
       },
       //智慧景区解决方案
       async getCompanySolvePlan() {
@@ -136,7 +136,7 @@
         }
         let res = await Api.getColumnInfoList(params)
         this.scensePlan = res.data.list.slice(0, 6);
-        
+
       },
       // 轮播图 函数
       async getBanner() {
diff --git a/src/views/pages/case-list.vue b/src/views/pages/case-list.vue
index 2c96860..45108a6 100644
--- a/src/views/pages/case-list.vue
+++ b/src/views/pages/case-list.vue
@@ -3,7 +3,7 @@
     <!-- 页面 头部 -->
     <VHeader></VHeader>
     <!-- 页面 广告条 -->
-    <div class="cjy-banner">
+    <div class="cjy-banner m-t-100">
       <div class="cjy-banner-text">
         <div class="title">{{ banner_data.title }}</div>
         <div class="subtitle">{{ banner_data.subtitle }}</div>
diff --git a/src/views/pages/index.vue b/src/views/pages/index.vue
index e1d17e8..dceb18f 100644
--- a/src/views/pages/index.vue
+++ b/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>
@@ -23,7 +24,8 @@
         <div class="content-title company-profile-title">
           <span>公司介绍</span>
         </div>
-        <div class="ciontent-text company-profile-text" v-html="companyProfile.content ? companyProfile.content : ''">
+        <div class="ciontent-text ql-editor company-profile-text"
+             v-html="companyProfile.content ? companyProfile.content : ''">
         </div>
       </div>
     </div>
@@ -36,13 +38,13 @@
           </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 + '个'" >
+                         :name="'第' + index + '个'">
               <div class="solve-plan-tabs-content">
                 <div class="solve-plan-tabs-content-left">
-                  <div class="solve-plan-tabs-content-left-html"
-                    v-html="product.introduction ? product.introduction : ''">
+                  <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>
                 </div>
@@ -61,20 +63,20 @@
         <div class="content-title scence-plan-title">
           <span>智慧景区解决方案</span>
           <div class="saw-more-box">
-            <div class="saw-more"  @click="gotoDetail(scensePlan[0].id,1)">全部产品</div>
+            <div class="saw-more" @click="gotoDetail(scensePlan[0].id,1)">全部产品</div>
           </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 + '个'">
+                         :name="'第' + index + '个'">
               <div class="solve-plan-tabs-content">
                 <div class="solve-plan-tabs-content-right">
                   <img :src="product.logo ? product.logo : ''" alt="">
                 </div>
                 <div class="solve-plan-tabs-content-left">
-                  <div class="solve-plan-tabs-content-left-html"
-                    v-html="product.introduction ? product.introduction : ''">
+                  <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>
                 </div>
@@ -95,17 +97,18 @@
         <div class="ciontent-text classic-case-text">
           <div class="classic-case-text-left">
             <div class="classic-case-left-item" v-for="(item, index) in formattedClassicAse" :key="index"
-              @click="ativeindex = index">
+                 @click="ativeindex = index">
               <span>{{ item.title }}</span><i class="el-icon-arrow-right"></i>
             </div>
           </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">
+                   v-if="formattedClassicAse[ativeindex].images.length > 0">
                 <el-image class="classic-case-text-right-middle-images"
-                  v-for="(image, index) in formattedClassicAse[ativeindex].images" :src="image" :key="index"></el-image>
+                          v-for="(image, index) in formattedClassicAse[ativeindex].images" :src="image"
+                          :key="index"></el-image>
               </div>
             </div>
             <div class="classic-case-text-right-bottom">
@@ -137,10 +140,11 @@
               的经营之道，持续改进 永续发展！
             </div>
           </div>
+
           <template v-if="partners && partners.images && partners.images.length > 0">
             <div v-for="(item, index) in partners.images" :key="index" class="partner-img-box"
-              :style="{ right: `${item.x}px`, top: `${item.y}px` }">
-              <el-image class="partner-img" :src="item.url" />
+                 :style="{ right: `${item.x}px`, top: `${item.y}px` }">
+              <el-image class="partner-img" :src="item.url"/>
             </div>
           </template>
 
@@ -156,14 +160,15 @@
           </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" :span="12" @click.native="gotoNews(item.id)">
+                <el-col v-for="(item, index) in newsList" class="news-col row" :span="12"
+                        @click.native="gotoNews(item.id)">
                   <div class="news-img-box">
-                    <el-image class="news-img" :src="item.logo" />
+                    <el-image class="news-img" :src="item.logo"/>
                   </div>
-                  <div class="news-col-text">
+                  <div class="news-col-text col overflow-hidden">
                     <div class="news-text-title">
                       {{ item.title || '--' }}
                     </div>
@@ -182,7 +187,7 @@
               <el-row class="news-row" :gutter="40">
                 <el-col v-for="(item, index) in newsList" class="news-col" :span="12" @click.native="gotoNews(item.id)">
                   <div class="news-img-box">
-                    <el-image class="news-img" :src="item.logo" />
+                    <el-image class="news-img" :src="item.logo"/>
                   </div>
                   <div class="news-col-text">
                     <div class="news-text-title">
@@ -209,1081 +214,1148 @@
 </template>
 
 <script>
-  import Swiper from 'swiper/swiper-bundle.js'; // 引入 Swiper
-  import 'swiper/swiper-bundle.css';
-  import 'animate.css';
-
-  import * as Api from "@/api/cjy/columninfo"
-  import { parse } from '@babel/parser';
-  export default {
-    name: "index",
-    data() {
-      return {
-        theme: 'header-default',
-        swiper: null,
-        right: 20,
-        top: 20,
-        scrollPosition: 0, // 添加滚动位置
-        activeName: '第0个',
-        activeName1: '第0个',
-        activeName2: 'first',
-        banners: [],
-        companyProfile: '',//公司介绍
-        solvePlan: [],
-        scensePlan: [],
-        classicCase: [],
-        ativeindex: 0,
-        partners: null,
-        newsList: []
-      };
-    },
-    watch: {
-      ativeindex: {
-        handler(oval, nval) {
-          if (oval != nval) {
-            document.querySelector('.classic-case-text-right').classList.add('animate__animated', 'animate__fadeInRight')
-            setTimeout(() => {
-              document.querySelector('.classic-case-text-right').classList.remove('animate__animated', 'animate__fadeInRight')
-            }, 1000)
-          }
+import Swiper from 'swiper/swiper-bundle.js'; // 引入 Swiper
+import 'swiper/swiper-bundle.css';
+import 'animate.css';
+
+import * as Api from "@/api/cjy/columninfo"
+import {parse} from '@babel/parser';
+
+export default {
+  name: "index",
+  data() {
+    return {
+      theme: 'header-default',
+      swiper: null,
+      right: 20,
+      top: 20,
+      scrollPosition: 0, // 添加滚动位置
+      activeName: '第0个',
+      activeName1: '第0个',
+      activeName2: 'first',
+      banners: [],
+      companyProfile: '',//公司介绍
+      solvePlan: [],
+      scensePlan: [],
+      classicCase: [],
+      ativeindex: 0,
+      partners: null,
+      newsList: []
+    };
+  },
+  watch: {
+    ativeindex: {
+      handler(oval, nval) {
+        if (oval != nval) {
+          document.querySelector('.classic-case-text-right').classList.add('animate__animated', 'animate__fadeInRight')
+          setTimeout(() => {
+            document.querySelector('.classic-case-text-right').classList.remove('animate__animated', 'animate__fadeInRight')
+          }, 1000)
         }
       }
+    }
+  },
+  computed: {
+    formattedBanners() {
+      return this.banners.map(banner => {
+        // 在第4到第9个字符之间插入换行符
+        let description = banner.title.replace(/\s+/g, '<br>');
+        // if (description.length > 9) {
+        //   description = description.slice(0, 4) + '<br>' + description.slice(4, 9) + '<br>' + description.slice(9, 16) + '<br>' + description.slice(16);
+        // }
+        return {
+          ...banner,
+          title: description
+        };
+      });
     },
-    computed: {
-      formattedBanners() {
-        return this.banners.map(banner => {
-          // 在第4到第9个字符之间插入换行符
-          let description = banner.title;
-          if (description.length > 9) {
-            description = description.slice(0, 4) + '<br>' + description.slice(4, 9) + '<br>' + description.slice(9, 16) + '<br>' + description.slice(16);
+    formattedClassicAse() {
+      return this.classicCase.map(caseItem => {
+        let images = [];
+        if (caseItem.image) {
+          if (caseItem.image.includes(',')) { // 修正了'inCludes'为'includes'
+            images = caseItem.image.split(',');
+          } else {
+            images = [caseItem.image];
           }
           return {
-            ...banner,
-            title: description
+            ...caseItem,
+            images: images
           };
-        });
-      },
-      formattedClassicAse() {
-        return this.classicCase.map(caseItem => {
-          let images = [];
-          if (caseItem.image) {
-            if (caseItem.image.includes(',')) { // 修正了'inCludes'为'includes'
-              images = caseItem.image.split(',');
-            } else {
-              images = [caseItem.image];
+        } else {
+          return {
+            ...caseItem,
+            images: []
+          };
+        }
+
+      });
+    },
+  },
+  mounted() {
+
+
+    // 添加滚动事件监听
+    window.addEventListener('scroll', this.handleScroll);
+
+    this.getBanner()
+    this.getCompany()
+    this.getCompanyAllArea()
+    this.getCompanySolvePlan()
+    this.getClassicCase()
+    this.getPartners()
+    this.getNews()
+  },
+  beforeDestroy() {
+    // 移除滚动事件监听
+    window.removeEventListener('scroll', this.handleScroll);
+  },
+  methods: {
+    //获取轮播图
+    async getBanner() {
+      const params = {
+        type: 1,
+      }
+      let res = await Api.getColumnInfoList(params)
+      this.banners = res.data.list
+
+      this.$nextTick(() => {
+        this.swiper = new Swiper('.swiper', {
+          speed: 400,
+          spaceBetween: 0, // 设置为0以消除间距
+          loop: true,
+          pagination: {
+            el: '.swiper-pagination',
+            clickable: true,
+          },
+          autoplay: {
+            delay: 5500,
+            disableOnInteraction: false,
+          },
+          on: {
+            init: () => {
+              this.reAddAnimateClasses();
+
+              const titleElement = document.querySelector('.banner-title');
+              const descriptionElement = document.querySelector('.banner-description');
+              const learnMoreElement = document.querySelector('.learn-more');
+
+              titleElement.classList.add('animate__animated', 'animate__bounceInLeft');
+              descriptionElement.classList.add('animate__animated', 'animate__bounceInRight');
+              learnMoreElement.classList.add('animate__animated', 'animate__fadeInDown');
+            },
+            slideChangeTransitionStart: () => {
+              this.removeAnimateClasses();
+            },
+            slideChangeTransitionEnd: () => {
+              this.reAddAnimateClasses();
             }
-            return {
-              ...caseItem,
-              images: images
-            };
-          } else {
-            return {
-              ...caseItem,
-              images: []
-            };
           }
-
         });
-      },
+      })
+
     },
-    mounted() {
+    //公司介绍
+    async getCompany() {
+      const params = {
+        type: 2,
+      }
+      let res = await Api.getColumnInfoList(params)
 
+      this.companyProfile = res.data.list[0]
+    },
+    //全域旅游解决方案
+    async getCompanyAllArea() {
+      const params = {
+        type: 3,
+        infoType: 1
+      }
+      let res = await Api.getColumnInfoList(params)
+      this.solvePlan = res.data.list.slice(0, 6);
 
-      // 添加滚动事件监听
-      window.addEventListener('scroll', this.handleScroll);
+    },
+    //智慧景区解决方案
+    async getCompanySolvePlan() {
+      const params = {
+        type: 3,
+        infoType: 2
+      }
+      let res = await Api.getColumnInfoList(params)
+      this.scensePlan = res.data.list.slice(0, 6);
 
-      this.getBanner()
-      this.getCompany()
-      this.getCompanyAllArea()
-      this.getCompanySolvePlan()
-      this.getClassicCase()
-      this.getPartners()
-      this.getNews()
     },
-    beforeDestroy() {
-      // 移除滚动事件监听
-      window.removeEventListener('scroll', this.handleScroll);
+    //经典案例
+    async getClassicCase() {
+      const params = {
+        type: 5,
+      }
+      let res = await Api.getColumnInfoList(params)
+      this.classicCase = res.data.list.slice(0, 6);
+
     },
-    methods: {
-      //获取轮播图
-      async getBanner() {
-        const params = {
-          type: 1,
-        }
-        let res = await Api.getColumnInfoList(params)
-        this.banners = res.data.list
-        
-        this.$nextTick(() => {
-          this.swiper = new Swiper('.swiper', {
-            speed: 400,
-            spaceBetween: 0, // 设置为0以消除间距
-            loop: true,
-            pagination: {
-              el: '.swiper-pagination',
-              clickable: true,
-            },
-            autoplay: {
-              delay: 5500,
-              disableOnInteraction: false,
-            },
-            on: {
-              init: () => {
-                this.reAddAnimateClasses();
-
-                const titleElement = document.querySelector('.banner-title');
-                const descriptionElement = document.querySelector('.banner-description');
-                const learnMoreElement = document.querySelector('.learn-more');
-
-                titleElement.classList.add('animate__animated', 'animate__bounceInLeft');
-                descriptionElement.classList.add('animate__animated', 'animate__bounceInRight');
-                learnMoreElement.classList.add('animate__animated', 'animate__fadeInDown');
-              },
-              slideChangeTransitionStart: () => {
-                this.removeAnimateClasses();
-              },
-              slideChangeTransitionEnd: () => {
-                this.reAddAnimateClasses();
-              }
-            }
-          });
-        })
-
-      },
-      //公司介绍
-      async getCompany() {
-        const params = {
-          type: 2,
-        }
-        let res = await Api.getColumnInfoList(params)
-        
-        this.companyProfile = res.data.list[0]
-      },
-      //全域旅游解决方案
-      async getCompanyAllArea() {
-        const params = {
-          type: 3,
-          infoType: 1
-        }
-        let res = await Api.getColumnInfoList(params)
-        this.solvePlan = res.data.list.slice(0, 6);
-        
-      },
-      //智慧景区解决方案
-      async getCompanySolvePlan() {
-        const params = {
-          type: 3,
-          infoType: 2
-        }
-        let res = await Api.getColumnInfoList(params)
-        this.scensePlan = res.data.list.slice(0, 6);
-        
-      },
-      //经典案例
-      async getClassicCase() {
-        const params = {
-          type: 5,
-        }
-        let res = await Api.getColumnInfoList(params)
-        this.classicCase = res.data.list.slice(0, 6);
-        
-      },
-      //合作伙伴
-      async getPartners() {
-        const params = {
-          type: 6,
-        }
-        let res = await Api.getColumnInfoList(params)
-        this.partners = res.data.list[0];
-        if (this.partners.image) {
-          this.partners.images = this.extractImageCoordinates(this.partners.image);
-        } else {
-          this.partners.images = []
-        }
-        
-      },
-      //过滤图片坐标信息
-      extractImageCoordinates(imageString) {
-        // 将图片字符串按逗号分割成数组
-        const imageUrls = imageString.includes(',') ? imageString.split(',') : [imageString];
-
-        // 使用map函数处理每个URL
-        const imagesWithCoords = imageUrls.map(url => {
-          // 创建URL对象以便解析查询参数
-          const urlObj = new URL(url);
-          // 使用URLSearchParams获取查询参数
-          const params = new URLSearchParams(urlObj.search);
-
-          // 提取x和y参数，并转换为数字
-          const x = parseInt(params.get('x'), 10);
-          const y = parseInt(params.get('y'), 10);
-
-          // 返回包含URL和坐标的新对象
-          return {
-            url: urlObj.href, // 只获取路径部分，去除查询参数
-            x,
-            y
-          };
-        });
+    //合作伙伴
+    async getPartners() {
+      const params = {
+        type: 6,
+      }
+      let res = await Api.getColumnInfoList(params)
+      this.partners = res.data.list[0];
+      if (this.partners.image) {
+        this.partners.images = this.extractImageCoordinates(this.partners.image);
+        console.log(this.partners.images)
+      } else {
+        this.partners.images = []
+      }
 
-        return imagesWithCoords;
-      },
-      async getNews(val) {
-        const params = {
-          type: 7,
-          infoType: val ? val : 1
-        }
-        let res = await Api.getColumnInfoList(params)
-        this.newsList = res.data.list.slice(0, 6);
-        
-      },
-      handleClick(tab, event) {
-        console.log(tab, event);
-        this.getNews(Number(tab.index) + 1)
-      },
-      handleScroll() {
-        this.scrollPosition = window.scrollY; // 获取当前滚动位置
-        if (this.scrollPosition > 100) {
-          this.theme = 'header-light'
-        }
-        if (this.scrollPosition <= 100) {
-          this.theme = 'header-default'
-        }
-        if (this.scrollPosition > 110) {
-          document.querySelector('.company-profile-title').classList.add('animate__animated', 'animate__fadeInUp');
-          document.querySelector('.company-profile-text').classList.add('animate__animated', 'animate__fadeInUp');
-        }
-        if (this.scrollPosition > 950) {
-          document.querySelector('.solve-plan-title').classList.add('animate__animated', 'animate__fadeInUp');
-          document.querySelector('.solve-plan-text').classList.add('animate__animated', 'animate__fadeInUp');
-        }
-        if (this.scrollPosition > 1875) {
-          document.querySelector('.scence-plan-title').classList.add('animate__animated', 'animate__fadeInUp')
-          document.querySelector('.scence-plan-text').classList.add('animate__animated', 'animate__fadeInUp')
-        }
-        if (this.scrollPosition > 2640) {
-          document.querySelector('.classic-case-title').classList.add('animate__animated', 'animate__fadeInUp')
-          document.querySelector('.classic-case-text').classList.add('animate__animated', 'animate__fadeInUp')
-        }
-        if (this.scrollPosition > 3650) {
-          document.querySelector('.partner-title').classList.add('animate__animated', 'animate__fadeInUp')
-          document.querySelector('.partner-text').classList.add('animate__animated', 'animate__fadeInUp')
-        }
-        if (this.scrollPosition > 4500) {
-          document.querySelector('.news-title').classList.add('animate__animated', 'animate__fadeInUp')
-          document.querySelector('.news-text').classList.add('animate__animated', 'animate__fadeInUp')
-        }
-      },
-      reAddAnimateClasses() {
-        // 获取当前激活的slide
-        if (this.swiper) {
-          const activeSlide = this.swiper.slides[this.swiper.activeIndex];
-
-          // 在当前激活的slide中查找对应的子元素
-          const titleElement = activeSlide.querySelector('.banner-title');
-          const descriptionElement = activeSlide.querySelector('.banner-description');
-          const learnMoreElement = activeSlide.querySelector('.learn-more');
-
-          // 添加新的动画类
-          titleElement.classList.add('animate__animated', 'animate__bounceInLeft');
-          descriptionElement.classList.add('animate__animated', 'animate__bounceInRight');
-          learnMoreElement.classList.add('animate__animated', 'animate__fadeInDown');
-        }
+    },
+    //过滤图片坐标信息
+    extractImageCoordinates(imageString) {
+      // 将图片字符串按逗号分割成数组
+      const imageUrls = imageString.includes(',') ? imageString.split(',') : [imageString];
+
+      // 使用map函数处理每个URL
+      const imagesWithCoords = imageUrls.map(url => {
+        // 创建URL对象以便解析查询参数
+        const urlObj = new URL(url);
+        // 使用URLSearchParams获取查询参数
+        const params = new URLSearchParams(urlObj.search);
+
+        // 提取x和y参数，并转换为数字
+        const x = parseInt(params.get('x'), 10);
+        const y = parseInt(params.get('y'), 10);
+
+        // 返回包含URL和坐标的新对象
+        return {
+          url: urlObj.href, // 只获取路径部分，去除查询参数
+          x,
+          y
+        };
+      });
+
+      return imagesWithCoords;
+    },
+    async getNews(val) {
+      const params = {
+        type: 7,
+        infoType: val ? val : 1
+      }
+      let res = await Api.getColumnInfoList(params)
+      this.newsList = res.data.list.slice(0, 6);
+
+    },
+    handleClick(tab, event) {
+      console.log(tab, event);
+      this.getNews(Number(tab.index) + 1)
+    },
+    handleScroll() {
+      this.scrollPosition = window.scrollY; // 获取当前滚动位置
+      if (this.scrollPosition > 100) {
+        this.theme = 'header-light'
+      }
+      if (this.scrollPosition <= 100) {
+        this.theme = 'header-default'
+      }
+      if (this.scrollPosition > 110) {
+        document.querySelector('.company-profile-title').classList.add('animate__animated', 'animate__fadeInUp');
+        document.querySelector('.company-profile-text').classList.add('animate__animated', 'animate__fadeInUp');
+      }
+      if (this.scrollPosition > 950) {
+        document.querySelector('.solve-plan-title').classList.add('animate__animated', 'animate__fadeInUp');
+        document.querySelector('.solve-plan-text').classList.add('animate__animated', 'animate__fadeInUp');
+      }
+      if (this.scrollPosition > 1875) {
+        document.querySelector('.scence-plan-title').classList.add('animate__animated', 'animate__fadeInUp')
+        document.querySelector('.scence-plan-text').classList.add('animate__animated', 'animate__fadeInUp')
+      }
+      if (this.scrollPosition > 2640) {
+        document.querySelector('.classic-case-title').classList.add('animate__animated', 'animate__fadeInUp')
+        document.querySelector('.classic-case-text').classList.add('animate__animated', 'animate__fadeInUp')
+      }
+      if (this.scrollPosition > 3650) {
+        document.querySelector('.partner-title').classList.add('animate__animated', 'animate__fadeInUp')
+        document.querySelector('.partner-text').classList.add('animate__animated', 'animate__fadeInUp')
+      }
+      if (this.scrollPosition > 4500) {
+        document.querySelector('.news-title').classList.add('animate__animated', 'animate__fadeInUp')
+        document.querySelector('.news-text').classList.add('animate__animated', 'animate__fadeInUp')
+      }
+    },
+    reAddAnimateClasses() {
+      // 获取当前激活的slide
+      if (this.swiper) {
+        const activeSlide = this.swiper.slides[this.swiper.activeIndex];
+
+        // 在当前激活的slide中查找对应的子元素
+        const titleElement = activeSlide.querySelector('.banner-title');
+        const descriptionElement = activeSlide.querySelector('.banner-description');
+        const learnMoreElement = activeSlide.querySelector('.learn-more');
+
+        // 添加新的动画类
+        titleElement.classList.add('animate__animated', 'animate__bounceInLeft');
+        descriptionElement.classList.add('animate__animated', 'animate__bounceInRight');
+        learnMoreElement.classList.add('animate__animated', 'animate__fadeInDown');
+      }
 
-      },
-      removeAnimateClasses() {
-        if (this.swiper) {
-          const activeSlide = this.swiper.slides[this.swiper.activeIndex];
+    },
+    removeAnimateClasses() {
+      if (this.swiper) {
+        const activeSlide = this.swiper.slides[this.swiper.activeIndex];
 
-          // 在当前激活的slide中查找对应的子元素
-          const titleElement = activeSlide.querySelector('.banner-title');
-          const descriptionElement = activeSlide.querySelector('.banner-description');
-          const learnMoreElement = activeSlide.querySelector('.learn-more');
+        // 在当前激活的slide中查找对应的子元素
+        const titleElement = activeSlide.querySelector('.banner-title');
+        const descriptionElement = activeSlide.querySelector('.banner-description');
+        const learnMoreElement = activeSlide.querySelector('.learn-more');
 
-          // 移除之前的动画类（如果有的话）
-          titleElement.classList.remove('animate__animated', 'animate__bounceInLeft');
-          descriptionElement.classList.remove('animate__animated', 'animate__bounceInRight');
-          learnMoreElement.classList.remove('animate__animated', 'animate__fadeInDown');
+        // 移除之前的动画类（如果有的话）
+        titleElement.classList.remove('animate__animated', 'animate__bounceInLeft');
+        descriptionElement.classList.remove('animate__animated', 'animate__bounceInRight');
+        learnMoreElement.classList.remove('animate__animated', 'animate__fadeInDown');
 
-        }
-      },
-      gotoNewsList(){
-        this.$router.push("/news-list")
-      },
-      //资讯详情
-      gotoNews(val) {
-        this.$router.push("/news-detail?id=" + val)
-      },
-      gotoClassicCaseList(){
-        this.$router.push("/case-list")
-      },
-      //方案案例详情
-      gotoDetail(val,type){
-        this.$router.push("/case-detail?id=" + val + "&type=" + type)
       }
+    },
+    gotoNewsList() {
+      this.$router.push("/news-list")
+    },
+    //资讯详情
+    gotoNews(val) {
+      this.$router.push("/news-detail?id=" + val)
+    },
+    gotoClassicCaseList() {
+      this.$router.push("/case-list")
+    },
+    //方案案例详情
+    gotoDetail(val, type) {
+      this.$router.push("/case-detail?id=" + val + "&type=" + type)
     }
   }
+}
 </script>
 <style lang="scss">
-  .page-header {
-    position: fixed;
-    top: 0;
-    z-index: 999;
-    width: 100%;
-    background-color: transparent !important;
-
-    .nav-item {
-      color: #fff !important;
-    }
 
-    .nav-item::before {
-      background-color: #fff !important;
-    }
+.page-header {
+  position: fixed;
+  top: 0;
+  z-index: 999;
+  width: 100%;
+  background-color: transparent !important;
 
-    .info-box {
-      color: #fff !important;
-    }
+  .nav-item {
+    color: #fff !important;
   }
-</style>
-<style scoped lang="scss">
 
-  .page-container {
-    background-color: #fafafa;
+  .nav-item::before {
+    background-color: #fff !important;
   }
 
-  .swiper {
-    width: 100%;
-    height: 90vh;
-    /* 设置为视口高度 */
+  .info-box {
+    color: #fff !important;
   }
+}
+</style>
+<style scoped lang="scss">
 
-  .swiper-wrapper {
-    display: flex;
-    /* 确保子元素横向排列 */
+.page-container {
+  background-color: #fafafa;
+}
+
+.swiper {
+  width: 100%;
+  height: 90vh;
+  /* 设置为视口高度 */
+}
+
+.swiper-wrapper {
+  display: flex;
+  /* 确保子元素横向排列 */
+}
+
+.swiper-slide {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  /* 使每个 slide 高度填满 */
+}
+
+.banner {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  /* 使 banner 高度填满 */
+  color: white;
+  text-align: center;
+  background-size: cover;
+  /* 背景图覆盖 */
+  background-position: center;
+  /* 背景图居中 */
+
+  .text-box {
+    width: 1000px;
+    height: 500px;
+    padding: 10px;
   }
-
-  .swiper-slide {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    /* 使每个 slide 高度填满 */
+}
+
+.banner-title {
+  font-size: 68px;
+  line-height: 90px;
+  /* 调整标题字体大小 */
+  font-weight: bold;
+  opacity: 0;
+  text-align: left;
+  /* 加粗标题 */
+}
+
+.banner-description {
+  opacity: 0;
+  text-align: left;
+  font-size: 22px;
+  /* 调整描述字体大小 */
+  margin: 30px 0 20px 0;
+  /* 添加上下间距 */
+}
+
+::v-deep .swiper-pagination {
+  .swiper-pagination-bullet {
+    background-color: #fff;
+    width: 28px;
+    height: 3px;
+    border-radius: 0;
+    opacity: 0.3;
   }
 
-  .banner {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-    /* 使 banner 高度填满 */
-    color: white;
-    text-align: center;
-    background-size: cover;
-    /* 背景图覆盖 */
-    background-position: center;
-    /* 背景图居中 */
-
-    .text-box {
-      width: 500px;
-      height: 500px;
-      margin-left: 10%;
-      padding: 10px;
-    }
+  .swiper-pagination-bullet-active {
+    background-color: #fff;
+    opacity: 1;
   }
-
-  .banner-title {
-    font-size: 68px;
-    /* 调整标题字体大小 */
-    font-weight: bold;
-    opacity: 0;
-    text-align: left;
-    /* 加粗标题 */
+}
+
+.learn-more {
+  opacity: 0;
+
+  margin-top: 20px;
+  padding: 10px 20px;
+  border: solid 1px rgba(255, 255, 255, 0.8);
+  color: #fff;
+  text-decoration: none;
+  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;
   }
+}
 
-  .banner-description {
-    opacity: 0;
-    text-align: left;
-    font-size: 22px;
-    /* 调整描述字体大小 */
-    margin: 10px 0;
-    /* 添加上下间距 */
-  }
+.animate__animated {
+  opacity: 1;
+}
 
-  ::v-deep .swiper-pagination {
-    .swiper-pagination-bullet {
-      background-color: #fff;
-      width: 28px;
-      height: 3px;
-      border-radius: 0;
-      opacity: 0.3;
-    }
 
-    .swiper-pagination-bullet-active {
-      background-color: #fff;
-      opacity: 1;
-    }
-  }
+.content-box-xl {
+  width: 100%;
+  height: fit-content;
+  background-color: #fafafa;
 
-  .learn-more {
-    opacity: 0;
+  .content-box-l {
+    max-width: 1220px;
+    margin: 0 auto;
+    overflow: hidden;
 
-    margin-top: 20px;
-    padding: 10px 20px;
-    border: solid 1px rgba(255, 255, 255, 0.8);
-    color: #fff;
-    text-decoration: none;
-    border-radius: 5px;
-    transition: all 0.3s ease-in-out;
-    float: left;
-
-    &:hover {
-      background-color: rgba(255, 255, 255, 0.8);
-      color: #333;
-    }
-  }
+    .content-title {
+      position: relative;
+      margin-top: 95px;
+      margin-bottom: 45px;
+      opacity: 0;
 
-  .animate__animated {
-    opacity: 1;
-  }
+      span {
+        display: block;
+        font-family: PingFang SC;
+        font-weight: 800;
+        font-size: 50px;
+        color: #1B1B1B;
+        position: relative;
+        z-index: 50;
+        width: fit-content;
+        margin: 0 auto;
+      }
 
 
-  .content-box-xl {
-    width: 100%;
-    height: fit-content;
-    background-color: #fafafa;
+      &::after {
+        letter-spacing: 10px;
+        content: '';
+        position: absolute;
+        width: 100% !important;
+        text-align: center;
+        height: 50%;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        z-index: 45;
+        font-family: PingFang SC;
+        font-weight: bold;
+        font-size: 30px;
+        color: rgba(0,0,0,.05);
+      }
 
-    .content-box-l {
-      max-width: 1220px;
-      margin: 0 auto;
-      overflow: hidden;
+      .saw-more-box {
+        position: absolute;
+        right: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        opacity: 1;
+        z-index: 999;
+      }
 
-      .content-title {
+      .saw-more {
+        width: 100px;
+        height: 40px;
+        line-height: 40px;
+        color: #fff;
         position: relative;
-        margin-top: 95px;
-        margin-bottom: 45px;
-        opacity: 0;
+        cursor: pointer;
+        opacity: 0.8;
+        transition: all 0.3s ease-in-out;
 
-        span {
-          display: block;
-          font-family: PingFang SC;
-          font-weight: 800;
-          font-size: 50px;
-          color: #1B1B1B;
-          position: relative;
-          z-index: 50;
-          width: fit-content;
-          margin: 0 auto;
-        }
+        &:hover {
+          opacity: 1;
 
+          &::after {
+            right: 0;
+          }
+        }
 
-        &::after {
-          letter-spacing: 10px;
+        &:before {
           content: '';
           position: absolute;
-          width: 100% !important;
-          text-align: center;
-          height: 50%;
-          left: 50%;
-          top: 50%;
-          transform: translate(-50%, -50%);
-          z-index: 45;
-          font-family: PingFang SC;
-          font-weight: bold;
-          font-size: 30px;
-          color: #E5E5E5;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          height: 2px;
+          background-color: #fff;
+          transform-origin: bottom right;
+          transform: scaleX(0);
+          transition: transform 0.5s ease;
         }
 
-        .saw-more-box {
+        &:hover::before {
+          transform-origin: bottom left;
+          transform: scaleX(1);
+        }
+
+        &::after {
+          content: '';
+          width: 24px;
+          height: 10px;
           position: absolute;
-          right: 0;
+          right: 10%;
           top: 50%;
           transform: translateY(-50%);
-          opacity: 1;
-          z-index: 999;
-        }
-
-        .saw-more {
-          width: 100px;
-          height: 40px;
-          line-height: 40px;
-          color: #fff;
-          position: relative;
-          cursor: pointer;
-          opacity: 0.8;
+          background-image: url('~@/assets/images/more-right.png');
+          background-repeat: no-repeat;
+          background-position: center;
+          background-size: contain;
           transition: all 0.3s ease-in-out;
-
-          &:hover {
-            opacity: 1;
-
-            &::after {
-              right: 0;
-            }
-          }
-
-          &:before {
-            content: '';
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            height: 2px;
-            background-color: #fff;
-            transform-origin: bottom right;
-            transform: scaleX(0);
-            transition: transform 0.5s ease;
-          }
-
-          &:hover::before {
-            transform-origin: bottom left;
-            transform: scaleX(1);
-          }
-
-          &::after {
-            content: '';
-            width: 24px;
-            height: 10px;
-            position: absolute;
-            right: 10%;
-            top: 50%;
-            transform: translateY(-50%);
-            background-image: url('~@/assets/images/more-right.png');
-            background-repeat: no-repeat;
-            background-position: center;
-            background-size: contain;
-            transition: all 0.3s ease-in-out;
-          }
         }
       }
+    }
 
-      .ciontent-text {
-        opacity: 0;
-      }
+    .ciontent-text {
+      opacity: 0;
     }
   }
+}
 
-  .company-profile {
-    height: 745px;
-    scrollbar-width: none;
-    overflow: hidden;
-    overflow-y: scroll;
+.company-profile {
+  height: 800px;
+  scrollbar-width: none;
+  overflow: hidden;
 
-    .company-profile-title {
-      text-align: center;
-    }
+  .company-profile-title {
+    text-align: center;
+  }
 
-    .company-profile-title::after {
-      content: 'COMPANY PROFILE' !important;
-    }
+  .company-profile-title::after {
+    content: 'COMPANY PROFILE' !important;
+  }
 
-    .company-profile-text {
-      height: 515px;
-      scrollbar-width: none;
-      overflow: hidden;
-      overflow-y: scroll;
-    }
+  .company-profile-text {
+    height: 700px;
+    scrollbar-width: none;
+    overflow: hidden;
+    overflow-y: hidden;
   }
+}
 
-  .solve-plan {
-    margin-top: 120px;
-    min-height: 888px;
-    background-image: url('~@/assets/images/solve-plan-bg.png');
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: cover;
+.solve-plan {
+  margin-top: 120px;
+  min-height: 888px;
+  background-image: url('~@/assets/images/solve-plan-bg.png');
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
 
-    .solve-plan-title {
-      opacity: 0;
+  .solve-plan-title {
+    opacity: 0;
 
-      span {
-        color: #fff !important;
-      }
+    span {
+      color: #fff !important;
+    }
 
-      &::after {
-        content: 'GLOBAL TOURISM SOLUTION' !important;
-        color: #e5e5e537 !important;
-      }
+    &::after {
+      content: 'GLOBAL TOURISM SOLUTION' !important;
+      color: rgba(255,255,255,.05) !important;
     }
+  }
 
-    .solve-plan-tabs-content {
-      margin-top: 90px;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
+  .solve-plan-tabs-content {
+    margin-top: 90px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
 
-      .solve-plan-tabs-content-left {
-        width: 450px;
-        height: 445px;
+    .solve-plan-tabs-content-left {
+      width: 450px;
+      height: 445px;
 
-        .solve-plan-tabs-content-left-html {
-          width: 100%;
-          height: 370px;
-          padding-top: 20px;
-          overflow: scroll;
-          overflow-x: hidden;
-          text-overflow: ellipsis;
-          scrollbar-width: none;
-          scrollbar-color: #418CFF rgba(65, 140, 255, 0.2);
-          margin-bottom: 30px;
-        }
+      .solve-plan-tabs-content-left-html {
+        width: 100%;
+        height: 370px;
+        line-height: 24px;
+        padding-top: 20px;
+        overflow: scroll;
+        overflow-x: hidden;
+        text-overflow: ellipsis;
+        scrollbar-width: none;
+        scrollbar-color: #418CFF rgba(65, 140, 255, 0.2);
+        margin-bottom: 30px;
+      }
 
-        .saw-detail {
-          background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
-          border-radius: 8px;
-          border: none;
-          width: 120px;
-          height: 40px;
-          line-height: 40px;
-          color: #fefefe;
-          text-align: center;
-          transition: all ease 0.3s;
-          cursor: pointer;
+      .saw-detail {
+        background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
+        border-radius: 8px;
+        border: none;
+        width: 120px;
+        height: 40px;
+        line-height: 40px;
+        color: #fefefe;
+        text-align: center;
+        transition: all ease 0.3s;
+        cursor: pointer;
 
-          &:hover {
-            background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.6) 100%);
-            color: #333;
-          }
+        &:hover {
+          background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.6) 100%);
+          color: #333;
         }
       }
+    }
 
-      .solve-plan-tabs-content-right {
-        width: 745px;
-        height: 445px;
+    .solve-plan-tabs-content-right {
+      width: 745px;
+      height: 445px;
 
-        img {
-          width: 100%;
-          height: 100%;
+      img {
+        width: 100%;
+        height: 100%;
 
-        }
       }
     }
-
   }
 
-  .scence-plan {
-    height: 895px;
-    background-image: none;
-    margin-top: 0;
+}
 
-    .scence-plan-title {
-      opacity: 0;
+.scence-plan {
+  height: 895px;
+  background-image: none;
+  margin-top: 0;
 
-      &::after {
-        content: 'SMART TOURISM SOLUTIONS' !important;
-        color: #E6E6E6 !important;
-      }
+  .scence-plan-title {
+    opacity: 0;
 
-      .saw-more {
-        color: #0B59B3 !important;
+    &::after {
+      content: 'SMART TOURISM SOLUTIONS' !important;
+      color: #E6E6E6 !important;
+    }
 
-        &::before {
-          background-color: #0B59B3 !important;
-        }
+    .saw-more {
+      color: #0B59B3 !important;
 
-        &::after {
-          background-image: url('~@/assets/images/more-right-blue.png') !important;
-        }
+      &::before {
+        background-color: #0B59B3 !important;
+      }
+
+      &::after {
+        background-image: url('~@/assets/images/more-right-blue.png') !important;
       }
     }
+  }
 
-    .scence-plan-text {
-      .saw-detail {
-        background: #0B59B3 !important;
-        border: solid 1px transparent !important;
+  .scence-plan-text {
+    .saw-detail {
+      background: #0B59B3 !important;
+      border: solid 1px transparent !important;
 
-        &:hover {
-          background-color: transparent !important;
-          border: solid 1px #0B59B3 !important;
-          color: #0B59B3 !important;
-        }
+      &:hover {
+        background-color: transparent !important;
+        border: solid 1px #0B59B3 !important;
+        color: #0B59B3 !important;
       }
     }
   }
+}
 
-  .classic-case {
-    background-image: url('~@/assets/images/classic-case-bg.png');
+.classic-case {
+  background-image: url('~@/assets/images/classic-case-bg.png');
 
-    .classic-case-title {
-      &::after {
-        content: 'CLASSIC CASES' !important;
-      }
+  .classic-case-title {
+    &::after {
+      content: 'CLASSIC CASES' !important;
     }
+  }
 
-    .classic-case-text {
+  .classic-case-text {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 60px;
+
+    .classic-case-text-left {
+      width: 315px;
+      height: fit-content;
+      border-radius: 12px;
+      border: none;
+      background-color: #fff;
+      max-height: 560px;
+      scrollbar-width: none;
+      overflow: scroll;
       display: flex;
-      justify-content: space-between;
-      margin-top: 60px;
+      flex-direction: column;
 
-      .classic-case-text-left {
-        width: 315px;
-        height: fit-content;
-        border-radius: 12px;
-        border: none;
-        background-color: #fff;
-        max-height: 560px;
-        scrollbar-width: none;
-        overflow: scroll;
+      .classic-case-left-item {
+        height: 79px;
+        line-height: 79px;
+        text-align: center;
+        font-family: PingFang SC;
+        font-weight: 500;
+        font-size: 20px;
+        color: #2A333D;
         display: flex;
-        flex-direction: column;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 20px 0 60px;
+        transition: all ease 0.3s;
+        cursor: pointer;
+        position: relative;
 
-        .classic-case-left-item {
-          height: 79px;
-          line-height: 79px;
-          text-align: center;
-          font-family: PingFang SC;
-          font-weight: 500;
-          font-size: 20px;
-          color: #2A333D;
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          padding: 0 20px 0 60px;
-          transition: all ease 0.3s;
-          cursor: pointer;
-          position: relative;
-
-          &::before {
-            content: '';
-            width: 24px;
-            height: 24px;
-            position: absolute;
-            left: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background-image: url('~@/assets/images/icon_project-events.svg');
-            background-repeat: no-repeat;
-            background-position: center;
-            background-size: contain;
-          }
+        &::before {
+          content: '';
+          width: 24px;
+          height: 24px;
+          position: absolute;
+          left: 20px;
+          top: 50%;
+          transform: translateY(-50%);
+          background-image: url('~@/assets/images/icon_project-events.svg');
+          background-repeat: no-repeat;
+          background-position: center;
+          background-size: contain;
+        }
 
-          &:hover {
-            box-shadow: inset 0 0 8px 2px #efefef;
-          }
+        &:hover {
+          box-shadow: inset 0 0 8px 2px #efefef;
+        }
 
-          span {
-            display: inline-block;
-            max-width: 80%;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-          }
+        span {
+          display: inline-block;
+          max-width: 80%;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
 
-          &:not(:last-child) {
-            border-bottom: solid 1px #2a333d26;
-            ;
-          }
+        &:not(:last-child) {
+          border-bottom: solid 1px #2a333d26;;
         }
       }
+    }
 
-      .classic-case-text-right {
-        width: 895px;
-        height: 560px;
-        padding: 40px 35px;
-
-        .classic-case-text-right-top {
-          height: 430px;
-          border-bottom: solid 1px #2a333d1b;
-          transition: all ease 0.3s;
+    .classic-case-text-right {
+      width: 895px;
+      padding: 40px 35px;
+      background-color: #fff;
+      border-radius: 12px;
 
-          .classic-case-text-right-content {
-            max-height: 180px;
-            overflow-y: scroll;
-            scrollbar-width: none;
-            margin-bottom: 25px;
-          }
+      .classic-case-text-right-top {
+        height: 350px;
+        border-bottom: solid 1px #2a333d1b;
+        transition: all ease 0.3s;
 
-          .classic-case-text-right-top-images-box {
-            width: 100%;
-            height: 200px;
-            overflow-x: scroll;
-            scrollbar-width: none;
-            display: flex;
+        .classic-case-text-right-content {
+          max-height: 180px;
+          overflow-y: scroll;
+          scrollbar-width: none;
+          margin-bottom: 25px;
+          line-height: 24px;
+        }
 
-            .classic-case-text-right-middle-images {
-              width: 360px;
-              height: 200px;
+        .classic-case-text-right-top-images-box {
+          width: 100%;
+          height: 200px;
+          overflow-x: scroll;
+          scrollbar-width: none;
+          display: flex;
 
-              &:not(:first-child) {
-                margin-left: 10px;
-              }
+          .classic-case-text-right-middle-images {
+            width: 360px;
+            height: 200px;
+.el-image__inner{height: auto!important;}
+            &:not(:first-child) {
+              margin-left: 10px;
             }
           }
         }
+      }
 
-        .classic-case-text-right-bottom {
-          display: flex;
-          justify-content: end;
-
-          .saw-detail {
-            margin-top: 25px;
-            cursor: pointer;
-            width: 70px;
-            height: 20px;
-            line-height: 20px;
-            color: #2A333D;
-            text-align: center;
-            transition: all ease 0.3s;
+      .classic-case-text-right-bottom {
+        display: flex;
+        justify-content: end;
 
-            &:hover {
-              color: #0B59B3;
-            }
+        .saw-detail {
+          margin-top: 25px;
+          cursor: pointer;
+          width: 70px;
+          height: 20px;
+          line-height: 20px;
+          color: #2A333D;
+          text-align: center;
+          transition: all ease 0.3s;
+
+          &:hover {
+            color: #0B59B3;
           }
         }
       }
     }
   }
+}
 
-  .partner-box {
-    height: 850px;
-    background-image: url('~@/assets/images/partner-bg.png');
+.partner-box {
+  height: 850px;
+  background-image: url('~@/assets/images/partner-bg.png');
 
-    .partner-box-l {
-      // overflow: unset!important;
-    }
+  .partner-box-l {
+    // overflow: unset!important;
+  }
 
-    .partner-title-fu {
-      font-weight: 400 !important;
-      font-size: 20px !important;
-      color: #2A333D !important;
-    }
+  .partner-title-fu {
+    font-weight: 400 !important;
+    font-size: 20px !important;
+    color: #2A333D !important;
+  }
 
-    .partner-text {
-      position: relative;
+  .partner-text {
+    position: relative;
 
-      .partne-text-left {
-        width: 40%;
-        text-align: left;
-        margin-top: 150px;
-        margin-left: 100px;
+    .partne-text-left {
+      width: 40%;
+      text-align: left;
+      margin-top: 150px;
+      margin-left: 100px;
 
-        .partne-text-left-title {
-          font-weight: 500;
-          font-size: 24px;
-          color: #000;
-          line-height: 36px;
+      .partne-text-left-title {
+        font-weight: 500;
+        font-size: 24px;
+        color: #000;
+        line-height: 36px;
 
-          span {
-            color: #F13537;
-          }
+        span {
+          color: #F13537;
         }
+      }
 
-        .partne-text-left-content {
-          font-weight: 800;
-          font-size: 28px;
-          color: #1B1B1B;
-          line-height: 46px;
-          margin: 48px 0;
-        }
+      .partne-text-left-content {
+        font-weight: 800;
+        font-size: 28px;
+        color: #1B1B1B;
+        line-height: 46px;
+        margin: 48px 0;
+      }
 
-        .partne-text-left-bottom {
-          font-weight: 400;
-          font-size: 24px;
-          color: #1B1B1B;
-          line-height: 36px;
-        }
+      .partne-text-left-bottom {
+        font-weight: 400;
+        font-size: 24px;
+        color: #1B1B1B;
+        line-height: 36px;
       }
+    }
 
-      .partner-img-box {
-        width: 140px;
-        height: 160px;
-        line-height: 160px;
-        background-image: url('~@/assets/images/parnter-img-bg.png');
-        background-position: center;
-        background-repeat: no-repeat;
-        background-size: contain;
-        position: absolute;
-        transition: all ease 0.3s;
-        text-align: center;
-        opacity: 0.7;
+    .partner-img-box {
+      width: 140px;
+      height: 160px;
+      line-height: 160px;
+      background-image: url('~@/assets/images/parnter-img-bg.png');
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: contain;
+      position: absolute;
+      transition: all ease 0.3s;
+      text-align: center;
+      opacity: 0.7;
 
-        &:hover {
-          scale: 1.03;
-          opacity: 1;
-        }
+      &:hover {
+        scale: 1.03;
+        opacity: 1;
+      }
 
-        .partner-img {
-          width: 70%;
-          margin: 0 auto;
-        }
+      .partner-img {
+        width: 70%;
+        margin: 0 auto;
       }
     }
   }
+}
 
-  .news {
-    background-image: none;
+.news {
+  background-image: none;
 
-    .news-title {
+  .news-title {
 
-      &::after {
-        content: 'NEWS AND UPDATES' !important;
-      }
+    &::after {
+      content: 'NEWS AND UPDATES' !important;
     }
+  }
 
-    .news-text {
+  .news-text {
 
-      .news-row {
+    .news-row {
 
-        .news-col {
-          margin-bottom: 28px;
-          display: flex;
-          cursor: pointer;
+      .news-col {
+        margin-bottom: 28px;
+        display: flex;
+        cursor: pointer;
 
-          &:hover {
-            .news-img-box {
-              box-shadow: 0 0 8px 2px #efefef;
-            }
+        &:hover {
+          .news-img-box {
+            box-shadow: 0 0 20px 5px rgba(0, 0, 0, .1);
+          }
 
-            .news-col-text {
-              box-shadow: 0 0 8px 2px #efefef;
+          .news-col-text {
+            box-shadow: 0 0 20px 2px rgba(0, 0, 0, .1);
 
-            }
+          }
 
-            .news-text-title {
-              color: #0B59B3 !important;
-            }
+          .news-text-title {
+            color: #0B59B3 !important;
+          }
 
-            .more-jian {
-              background-image: url('~@/assets/images/shang-you-lan-jian.png') !important;
-            }
+          .news-time {
+            color: #0B59B3 !important;
           }
 
+          .news-text-title-fu {
+            color: #0B59B3 !important;
+          }
 
-          .news-img-box {
-            width: 195px;
-            height: 155px;
-            transition: all ease 0.3s;
-            flex: none;
+          .more-jian {
+            background-image: url('~@/assets/images/shang-you-lan-jian.png') !important;
+          }
+        }
 
-            .news-img {
-              width: 100%;
-              height: 100%;
-            }
+
+        .news-img-box {
+          width: 195px;
+          height: 155px;
+          transition: all ease 0.3s;
+          flex: none;
+
+          .news-img {
+            width: 100%;
+            height: 100%;
           }
+        }
 
-          .news-col-text {
+        .news-col-text {
+          transition: all ease 0.3s;
+          flex: 1;
+          padding: 10px 15px;
+          background-color: #fff;
+
+          .news-text-title {
             transition: all ease 0.3s;
-            flex: 1;
-            padding: 10px 15px;
-            background-color: #fff;
 
-            .news-text-title {
-              transition: all ease 0.3s;
+            font-weight: bold;
+            font-size: 18px;
+            color: #1B1B1B;
+            line-height: 40px;
+            width: 100%;
+            max-width: 380px;
+            height: 40px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
 
-              font-weight: bold;
-              font-size: 18px;
-              color: #1B1B1B;
-              line-height: 40px;
-              width: 100%;
-              max-width: 380px;
-              height: 40px;
-              white-space: nowrap;
-              overflow: hidden;
-              text-overflow: ellipsis;
-            }
+          .news-text-title-fu {
+
+            width: 100%;
+            font-weight: 400;
+            font-size: 16px;
+            color: #2A333D;
+            line-height: 24px;
+            display: -webkit-box;
+            /* 使用-webkit-box布局模型 */
+            -webkit-box-orient: vertical;
+            /* 设置子元素的排列方向为垂直 */
+            -webkit-line-clamp: 2;
+            /* 限制在一个块元素显示的文本的行数为2行 */
+            overflow: hidden;
+            /* 超出部分隐藏 */
+            text-overflow: ellipsis;
+          }
+
+          .news-text-feet {
+            margin-top: 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            .news-time {
+              transition: all ease 0.3s;
 
-            .news-text-title-fu {
-
-              width: 100%;
-              font-weight: 400;
-              font-size: 16px;
-              color: #2A333D;
-              line-height: 24px;
-              display: -webkit-box;
-              /* 使用-webkit-box布局模型 */
-              -webkit-box-orient: vertical;
-              /* 设置子元素的排列方向为垂直 */
-              -webkit-line-clamp: 2;
-              /* 限制在一个块元素显示的文本的行数为2行 */
-              overflow: hidden;
-              /* 超出部分隐藏 */
-              text-overflow: ellipsis;
+              font-size: 14px;
+              color: #999;
             }
 
-            .news-text-feet {
-              margin-top: 20px;
-              display: flex;
-              justify-content: space-between;
-              align-items: center;
-
-              .news-time {
-                transition: all ease 0.3s;
-
-                font-size: 16px;
-                color: #2A333D;
-              }
-
-              .more-jian {
-                transition: all ease 0.3s;
-                width: 20px;
-                height: 20px;
-                background-image: url('~@/assets/images/moore-hui.png');
-                background-repeat: no-repeat;
-                background-size: contain;
-              }
+            .more-jian {
+              transition: all ease 0.3s;
+              width: 20px;
+              height: 20px;
+              background-image: url('~@/assets/images/moore-hui.png');
+              background-repeat: no-repeat;
+              background-size: contain;
             }
           }
         }
       }
     }
   }
+}
 </style>
 <style lang="scss">
-  .pc-el-tabs {
-    .el-tabs__nav-wrap::after {
-      background-color: #c2deff5a;
-    }
+.pc-el-tabs {
+  .el-tabs__nav {
+    display: inline-block;
+    transform: translateX(-50%) !important;
+    float: none;
+    left: 50%;
+  }
 
-    .el-tabs__active-bar {
-      background-color: #fff;
-    }
+  .el-tabs__nav-wrap::after {
+    background-color: transparent;
+    border-bottom: 1px dotted rgba(255,255,255,0.5);
+  }
 
-    .el-tabs__item.is-active {
-      color: #fff;
-    }
+  .el-tabs__item {
+    font-size: 16px;
+    padding: 0 80px;
+  }
 
-    .el-tabs__item {
-      color: #E5F1FF;
+  .el-tabs__item:hover {
+    color: #fff;
+    cursor: pointer;
+  }
 
-    }
+  .el-tabs__item.is-active {
+    color: #fff;
+  }
 
-    .el-tabs__item:hover {
-      color: #fff;
-    }
+  .el-tabs__active-bar {
+    background-color: #fff;
   }
 
+  .el-tabs__nav-next {
+    display: none
+  }
 
+  .el-tabs__nav-prev {
+    display: none
+  }
 
-  .pc-el-tabs-dark {
-    .el-tabs__active-bar {
-      background-color: #0B59B3;
-    }
+  .el-tabs__item.is-active {
+    color: #fff;
+  }
 
-    .el-tabs__item.is-active {
-      color: #0B59B3;
-    }
+  .el-tabs__item {
+    color: #fff;
 
-    .el-tabs__item:hover {
-      color: #0B59B3;
-    }
   }
 
-  .short-tabs {
+  .el-tabs__item:hover {
+    color: #fff;
+  }
+}
 
-    .el-tabs__header {
-      width: 20%;
-      margin: 0 auto;
-      margin-bottom: 45px;
-    }
 
-    .el-tabs__nav-wrap::after {
-      content: "";
-      position: absolute;
-      left: 0;
-      bottom: 0;
-      width: 100%;
-      height: 0 !important;
-      background: none !important;
-      border-bottom: 2px dotted #dfe4ed;
-      z-index: 1;
-    }
+.pc-el-tabs-dark {
+  .el-tabs__nav {
+    display: inline-block;
+    transform: translateX(-50%) !important;
+    float: none;
+    left: 50%;
+  }
+
+  .el-tabs__nav-wrap::after {
+    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: 30%;
+    margin: 0 auto;
+    margin-bottom: 45px;
+  }
+
+  .el-tabs__nav-wrap::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 0 !important;
+    background: none !important;
+    border-bottom: 2px dotted #dfe4ed;
+    z-index: 1;
   }
+}
 </style>
diff --git a/src/views/pages/news-detail.vue b/src/views/pages/news-detail.vue
index 8533f1e..c1acc02 100644
--- a/src/views/pages/news-detail.vue
+++ b/src/views/pages/news-detail.vue
@@ -3,7 +3,7 @@
     <!-- 页面 头部 -->
     <VHeader></VHeader>
     <!-- 页面 广告条 -->
-    <div class="cjy-banner">
+    <div class="cjy-banner m-t-100">
       <div class="cjy-banner-text">
         <div class="title">{{ banner_data.title }}</div>
         <div class="subtitle">{{ banner_data.subtitle }}</div>
diff --git a/src/views/pages/news-list.vue b/src/views/pages/news-list.vue
index 407e170..e62bb1e 100644
--- a/src/views/pages/news-list.vue
+++ b/src/views/pages/news-list.vue
@@ -3,7 +3,7 @@
     <!-- 页面 头部 -->
     <VHeader></VHeader>
     <!-- 页面 广告条 -->
-    <div class="cjy-banner">
+    <div class="cjy-banner m-t-100">
       <div class="cjy-banner-text">
         <div class="title">{{ banner_data.title }}</div>
         <div class="subtitle">{{ banner_data.subtitle }}</div>
@@ -19,7 +19,7 @@
     </div>
     <!-- 新闻 列表 -->
     <div class="v-container cjy-news-list">
-      <el-tabs v-model="active" @tab-click="getNewsList()" 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)">
@@ -27,7 +27,10 @@
               <div class="item-content">
                 <div class="title">{{ item.title }}</div>
                 <div class="info" v-html="item.introduction"></div>
-                <div class="more"><span class="text">查询详情</span></div>
+                <div class="row">
+                  <div class="more col"><span class="text">查询详情</span></div>
+                  <div class="date"><span class="text">{{ parseTime(item.createTime) }}</span></div>
+                </div>
               </div>
             </div>
           </div>
@@ -39,7 +42,10 @@
               <div class="item-content">
                 <div class="title">{{ item.title }}</div>
                 <div class="info" v-html="item.introduction"></div>
-                <div class="more"><span class="text">查询详情</span></div>
+                <div class="row">
+                  <div class="more col"><span class="text">查询详情</span></div>
+                  <div class="date"><span class="text">{{ parseTime(item.createTime) }}</span></div>
+                </div>
               </div>
             </div>
           </div>
@@ -95,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)
diff --git a/src/views/pages/theme/about-us.vue b/src/views/pages/theme/about-us.vue
index 45d768e..e20a92b 100644
--- a/src/views/pages/theme/about-us.vue
+++ b/src/views/pages/theme/about-us.vue
@@ -3,7 +3,7 @@
     <!-- 页面 头部 -->
     <VHeader></VHeader>
     <!-- 页面 广告条 -->
-    <div class="cjy-banner">
+    <div class="cjy-banner m-t-100">
       <div class="cjy-banner-text">
         <div class="title">{{ banner_data.title }}</div>
         <div class="subtitle">{{ banner_data.subtitle }}</div>
@@ -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>
@@ -77,7 +77,7 @@
       </div>
     </div>
     <div class="cjy-page-item3  m-t-large">
-      <div class="v-container">
+      <div>
         <div class="cjy-about-title">企业历程</div>
         <div class="cjy-about-step-info">投入资源提升技术，满足客户需求</div>
         <div class="cjy-about-step row">
@@ -98,13 +98,13 @@
     </div>
 
     <div class="v-container">
-      <div class="cjy-about-title text-center m-t-large">资质证书及相关软著</div>
+      <div class="cjy-about-title text-center m-t-large m-b-base">资质证书及相关软著</div>
       <el-carousel :interval="5000" arrow="always" class="certificate">
         <el-carousel-item v-for="group in groupedCertificates" :key="group">
           <div class="row cjy-about-certificate">
             <div class="col-77" v-for="(item, index) in group" :key="index">
               <div class="list-item flex-align-center">
-                <el-image class="img" :src="item.url" :preview-src-list="[item.url]">
+                <el-image class="img" :src="item" :preview-src-list="[item]">
                 </el-image>
               </div>
             </div>
@@ -220,25 +220,11 @@
             this.certificates = [res.data.image]
           }
         }
-        // this.certificates = [
-        //   {url: "https://www.lutongwulian.com/uploads/190506/1-1Z506153411551.jpg"},
-        //   {url: "https://www.lutongwulian.com/uploads/190506/1-1Z506153411551.jpg"},
-        //   {url: "https://www.lutongwulian.com/uploads/190506/1-1Z506153411551.jpg"},
-        //   {url: "https://www.lutongwulian.com/uploads/190506/1-1Z506153411551.jpg"},
-        //   {url: "https://www.lutongwulian.com/uploads/190506/1-1Z506153411551.jpg"},
-        //   {url: "https://www.lutongwulian.com/uploads/190506/1-1Z506153411551.jpg"},
-        //   {url: "https://www.lutongwulian.com/uploads/230324/1-230324141324Y9.png"},
-        //   {url: "https://www.lutongwulian.com/uploads/230324/1-230324141324Y9.png"},
-        //   {url: "https://www.lutongwulian.com/uploads/230324/1-230324141324Y9.png"},
-        //   {url: "https://www.lutongwulian.com/uploads/230324/1-230324141324Y9.png"},
-        //   {url: "https://www.lutongwulian.com/uploads/230324/1-230324141324Y9.png"},
-        //   {url: "https://www.lutongwulian.com/uploads/230324/1-230324141324Y9.png"},
-        //   {url: "https://www.lutongwulian.com/uploads/230324/1-230324141324Y9.png"},
-        //   {url: "https://www.lutongwulian.com/uploads/230324/1-230324141324Y9.png"},
-        // ]
+
         this.groupCertificates(); // 调用分组方法
       },
       groupCertificates() {
+
         if (this.certificates && this.certificates.length > 0) {
           for (let i = 0; i < this.certificates.length; i += 14) {
             this.groupedCertificates.push(this.certificates.slice(i, i + 14));
@@ -246,7 +232,7 @@
         } else {
           this.groupedCertificates = []
         }
-
+        console.log('adfs',this.groupedCertificates)
       },
       //获取企业风采 函数
       async getDemeanour() {
@@ -272,7 +258,9 @@
   }
 
   .cjy-page-item3 {
-    background: url("~@/assets/images/about-step-bg.jpg");
+    padding: 70px 50px 50px 380px;
+    height: 514px;
+    background: url("~@/assets/images/about-step-bg.png");
     background-size: contain;
     background-position: left;
     background-repeat: no-repeat;