解决方案完善

assets/css/style.css

@@ -5610,8 +5610,8 @@
             /* solution */
             
             .solution-section p {
-                font-size: 18px;
-                margin-bottom: 40px
+                /* font-size: 18px;
+                margin-bottom: 40px */
             }
             
             .solution-img {
@@ -5662,9 +5662,9 @@
             }
             
             @media (min-width: 992px) {
-                .solution-section p {
+                /* .solution-section p {
                     width: 96%
-                }
+                } */
                 .solution-section.img-left p,
                 .solution-section.img-left .solution-list-tit {
                     margin-left: 4%
@@ -6360,27 +6360,25 @@
                 color:#000
             }
             .solutionTypeOne img{
-               margin:0 auto;
-            }
-            .solutionTypeOne img.type-active{
-                display:none
+                margin: 0 auto;
+                transform: translateX(40px);
+                filter: drop-shadow(#000 -40px 0px 0px);
+
             }
+            
 
             /* 选中 */
             .solutionTypeOne:hover ,.solutionTypeOne.active{
- 
-                background:#639BFF
+                background:#639BFF;
+                transition: all 1s ease;
             }
             .solutionTypeOne:hover p,.solutionTypeOne.active p{
-                color:#fff
+                color:#fff;
             }
-
             .solutionTypeOne.active img,.solutionTypeOne:hover img{
-               display:none;
+                filter: drop-shadow(#fff -40px 0px 0px);
             }
-            .solutionTypeOne.active img.type-active,.solutionTypeOne:hover img.type-active{
-                display:block;
-             }
+        
 
 
              .newTypeBox{

assets/js/commonVue.js

@@ -1,14 +1,14 @@
 var app = new Vue({
   el: '#app',
   data: {
-    title123: 'sss',
     backBanner: "",
     solution: [],
     solution_type: 1,
     id: null,
     array: [],
+    solutionArray:[],
     solutionTypes: [],
-    colin: '0'
+    colin: ''
   },
   computed: {
 
@@ -22,10 +22,9 @@ var app = new Vue({
 
   },
   mounted: function () {
-
-    console.log(this.solution_type)
-
+    _this=this
     this.getColumnData()
+    
 
     $.ajax({
       type: 'POST',
@@ -36,6 +35,7 @@ var app = new Vue({
       }
     }).done(function (arr) {
       _this.array = arr;
+      console.log(_this.array)
     }).fail(function (err) {});
 
 
@@ -44,51 +44,65 @@ var app = new Vue({
 
   },
   methods: {
+
+    //获取内容
+    getArticalData(param){
+      $.ajax({
+        type: 'GET',
+        dataType: 'json',
+        url: window.FQDN2 + 'siteArticle/siteArticleList',
+        data: {
+          categoryid: param
+        }
+      }).done(function (res) {
+        console.log(res);
+        var aa=res.data.records
+        aa.sort(_this.compare("lmtitle"))
+        _this.solutionArray=aa
+
+      }).fail(function (err) {});
+
+    },
+
+   
+
+    //获取栏目
     getColumnData() {
-      _this=this;
       $.ajax({
         type: 'get',
         dataType: 'json',
         url: window.FQDN2 + 'siteCategory/siteCategoryList',
       }).done(function (res) {
         for (let i = 0; i < res.data.length; i++) {
-          // console.log('存值')
           console.log(res.data[i].sname)
           console.log(window.location.pathname)
           if (res.data[i].children.length > 0) {
             if (res.data[i].categoryName == '解决方案') {
-              // console.log(res.data[i].children)
               _this.solutionTypes=res.data[i].children
-              _this.colin=_this.getQueryVariable('id')
-         
-            
-
+              _this.colin=_this.getQueryVariable('id')?_this.getQueryVariable('id'): _this.solutionTypes[0].id;
+              _this.getArticalData( _this.id ? _this.id : _this.solutionTypes[0].id)
             }
           }
         }
-
-
-        $.ajax({
-          type: 'GET',
-          dataType: 'json',
-          url: window.FQDN2 + 'siteArticle/siteArticleList',
-          data: {
-            categoryid: _this.id ? _this.id : _this.solutionTypes[0].id
-          }
-        }).done(function (arr) {
-          // _this.array = arr;
-        }).fail(function (err) {});
-
-        
       })
     },
 
 
 
+     // 排序
+     compare(property) {
+      return function (a, b) {
+        var value1 = a[property];
+        var value2 = b[property];
+        return value1 - value2;
+      }
+    },
 
-
+    //解决方案类型点击
     facilityClick(e, item) {
-      this.colin = e
+      this.colin = item.id
+      this.getArticalData(item.id)
+      console.log(item.id)
     },
 
     getQueryVariable: function (variable) {

index.html

@@ -72,7 +72,7 @@
             <div class="video-des">
                 <div class="des1">
                     <!-- <h1 class="animate__animated animate__bounce">An animated element</h1> -->
-                    <p class="animate__animated  animate__fadeInUp">围绕行业细分，累计服务超过 <span class="num1">5000</span> 家企业，近<span > 10万 </span>个用户，平台生态高效、健康</p>
+                    <p class="animate__animated  animate__fadeInUp">公司成立<span class="num1">20年</span>，围绕行业细分，累计服务超过 <span class="num1">5000</span> 家企业，近<span class="num1"> 10万 </span>个用户</p>
                 </div>
                 <div class="des2 desCom animate__animated  animate__flipInX" style="top:43%; left:0;width:100%;text-align:center">
                     <p>核心价值观</p>

solution/index.html

@@ -67,27 +67,78 @@
         <!--====== COMMON BREADCRUMB END ======-->
 
 
-        <!--====== SOLUTION SECTION START ======-->
 
 
         <!--====== SOLUTION TYPE START ======-->
         <section style="background:#F4F8FD" class="solutionType">
             <div class="container" style="text-align:center">
                 <div class=" solutionTypeOne" v-for="(item,i) in solutionTypes" :class="item.id == colin ? 'active' : ''" @click="facilityClick(i, item)">
-                    <img src="../assets/img/solution/type1.svg" alt="">
-                    <img src="../assets/img/solution/type1-active.svg" alt="" class="type-active">
+                    <div style="width:40px;height:40px;;overflow:hidden;margin:0 auto" >
+                        <img :src="item.imagePath" alt="">
+                    </div>
                     <P>{{item.categoryName}}</P>
                 </div>
             </div>
         </section>
         <!--====== SOLUTION TYPE END ======-->
 
+
         <section class="solution-section pt-40">
-            <div class="container pt-40" v-for="arr in array">
+            <div class="container pt-40 pt-40" v-for="arr in solutionArray">
+                <div class="section-title both-border mb-20">
+                    <span class="title-tag2">{{arr.title}}</span>
+                </div>
+
+                <!-- type1 背景  开始 -->
+                <div class="row align-items-center justify-content-center" v-if="arr.lmtitle === '1'">
+                    <div class="col-md-12 mb-20"  v-html="arr.content">
+                    </div>
+                </div>
+                <!-- 1 背景 结束 -->
+
+                <!-- 2 痛点与挑战  开始 -->
+                <div class="row align-items-center justify-content-center" v-if="arr.lmtitle === '2'">
+                    <div class="col-md-12 mb-20"  v-html="arr.content">
+                    </div>
+                </div>
+                <!-- 2 痛点与挑战 结束 -->
+
+                <!-- 3 方案概述  开始 -->
+                <div class="row align-items-center justify-content-center" v-if="arr.lmtitle === '3'">
+                    <div class="col-md-12 mb-20"  v-html="arr.content">
+                    </div>
+                </div>
+                <!-- 3 方案概述 结束 -->
+
+                <!-- 4 系统架构  开始 -->
+                <div class="row align-items-center justify-content-center" v-if="arr.lmtitle === '4'">
+                    <div class="pt-40 mb-40 col-md-12 solution-img" >
+                        <img :src="arr.image" alt="">
+                    </div>
+                </div>
+                <!-- 4 系统架构 结束 -->
+
+                <!-- 5 功能模块  开始 -->
+                <div class="row align-items-center justify-content-center" v-if="arr.lmtitle === '5'">
+                    <div class="col-md-12 mb-20"  v-html="arr.content">
+                    </div>
+                </div>
+                <!-- 5 功能模块 结束 -->
+
+
+                
+            </div>
+            <br>
+            <br>
+
+
+            <div class="container pt-40" v-for="arr in array" style="display:none">
                 <div class="section-title both-border mb-20">
                     <span class="title-tag2">{{arr.title}}</span>
                 </div>
 
+                
+
                 <!-- ordinary普通样式  开始 -->
                 <div class="row align-items-center justify-content-center" v-if="arr.cssType === 'ordinary'" v-for="cont in arr.content">
                     <div class="col-md-12 mb-20" v-if="cont.text_content != ''">
@@ -179,7 +230,16 @@
                 </div>
                 <!-- doubleTabs双重tabs切换样式 结束 -->
             </div>
+
+
+
         </section>
+
+
+
+
+        
+   
         <!--====== SOLUTION SECTION END ======-->
 
         <!--====== FOOTER PART START ======-->