静态排版+对接

assets/css/style.css

@@ -6345,4 +6345,60 @@
 
             }
 
+
+            .solutionType .solutionTypeOne{
+                text-align:center;
+                padding:20px 0;
+                width:12.5%;
+                max-width: 12.5%;
+                cursor:pointer;
+                display:inline-block;
+
+            }
+            .solutionTypeOne p{
+                margin-top:10px;
+                color:#000
+            }
+            .solutionTypeOne img{
+               margin:0 auto;
+            }
+            .solutionTypeOne img.type-active{
+                display:none
+            }
+
+            /* 选中 */
+            .solutionTypeOne:hover ,.solutionTypeOne.active{
+ 
+                background:#639BFF
+            }
+            .solutionTypeOne:hover p,.solutionTypeOne.active p{
+                color:#fff
+            }
+
+            .solutionTypeOne.active img,.solutionTypeOne:hover img{
+               display:none;
+            }
+            .solutionTypeOne.active img.type-active,.solutionTypeOne:hover img.type-active{
+                display:block;
+             }
+
+
+             .newTypeBox{
+                text-align:center;
+               
+             }
+             .newTypeBox{
+                text-align:center;
+             }
+             .newTypeBox .titleOne{
+                height:60px;
+                line-height:60px;
+                cursor:pointer;
+             }
+             .newTypeBox .titleOne.active{
+                background:#639BFF;
+                color:#fff
+             }
+
+
             

assets/js/commonVue.js

@@ -0,0 +1,106 @@
+var app = new Vue({
+  el: '#app',
+  data: {
+    title123: 'sss',
+    backBanner: "",
+    solution: [],
+    solution_type: 1,
+    id: null,
+    array: [],
+    solutionTypes: [],
+    colin: '0'
+  },
+  computed: {
+
+  },
+  created: function () {
+    
+    this.solution_type = this.getQueryVariable('solution_type')
+    this.id = this.getQueryVariable('id')
+    
+    this.backBanner = '../assets/img/solution/solution-banner1.jpg'
+
+  },
+  mounted: function () {
+
+    console.log(this.solution_type)
+
+    this.getColumnData()
+
+    $.ajax({
+      type: 'POST',
+      dataType: 'json',
+      url: window.FQDN + 'Solution/index',
+      data: {
+        id: '1'
+      }
+    }).done(function (arr) {
+      _this.array = arr;
+    }).fail(function (err) {});
+
+
+
+
+
+  },
+  methods: {
+    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')
+         
+            
+
+            }
+          }
+        }
+
+
+        $.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) {});
+
+        
+      })
+    },
+
+
+
+
+
+    facilityClick(e, item) {
+      this.colin = e
+    },
+
+    getQueryVariable: function (variable) {
+      var query = window.location.search.substring(1);
+      var vars = query.split("&");
+      for (var i = 0; i < vars.length; i++) {
+        var pair = vars[i].split("=");
+        if (pair[0] == variable) {
+          return pair[1];
+        }
+      }
+      return (false);
+    }
+  }
+});

assets/js/main.js

@@ -62,4 +62,9 @@ function toTrade() {
 
 function toNews() {
     window.location.href = "../../news/index.html"
-}
+}
+
+
+
+
+

index.html

@@ -285,13 +285,13 @@
             </div>
         </div>
 
-        <el-dialog title="咨询反馈" :visible.sync="centerDialogVisible" width="700px" center class="feedBackDialog" :lock-scroll="false">
+        <el-dialog title="项目咨询" :visible.sync="centerDialogVisible" width="700px" center class="feedBackDialog" :lock-scroll="false">
 
 
 
             <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">
-                <el-form-item label="类型选择" prop="radio1">
-                    <el-radio-group v-model="ruleForm.radio1">
+                <el-form-item label="" prop="platName">
+                    <el-radio-group v-model="ruleForm.platName">
                         <el-radio-button label="智慧安防"></el-radio-button>
                         <el-radio-button label="智慧消防"></el-radio-button>
                         <el-radio-button label="智慧楼宇"></el-radio-button>
@@ -302,28 +302,28 @@
                 </el-form-item>
                 <el-row :gutter="20">
                     <el-col :span="12">
-                        <el-form-item label="姓名" prop="name">
-                            <el-input v-model="ruleForm.name"></el-input>
+                        <el-form-item label="姓名" prop="consultName">
+                            <el-input v-model="ruleForm.consultName"></el-input>
                         </el-form-item>
                     </el-col>
                     <el-col :span="12">
-                        <el-form-item label="联系电话" prop="phone">
-                            <el-input v-model="ruleForm.phone"></el-input>
+                        <el-form-item label="联系电话" prop="consultPhone">
+                            <el-input v-model="ruleForm.consultPhone"></el-input>
                         </el-form-item>
                     </el-col>
                     <el-col :span="12">
-                        <el-form-item label="邮箱" prop="email">
-                            <el-input v-model="ruleForm.email"></el-input>
+                        <el-form-item label="邮箱" prop="mail">
+                            <el-input v-model="ruleForm.mail"></el-input>
                         </el-form-item>
                     </el-col>
                     <el-col :span="12">
-                        <el-form-item label="公司名称" prop="company">
+                        <el-form-item label="公司" prop="company">
                             <el-input v-model="ruleForm.company"></el-input>
                         </el-form-item>
                     </el-col>
                 </el-row>
-                <el-form-item label="需求描述" prop="desc">
-                    <el-input type="textarea" v-model="ruleForm.desc"></el-input>
+                <el-form-item label="需求描述" prop="consultContent">
+                    <el-input type="textarea" v-model="ruleForm.consultContent"></el-input>
                 </el-form-item>
             </el-form>
 
@@ -396,25 +396,24 @@
 
 
                 ruleForm: {
-                    name: '',
-                    region: '',
-                    date1: '',
-                    date2: '',
-                    delivery: false,
-                    type: [],
-                    resource: '',
-                    desc: '',
-                    radio1: '智慧安防',
+                    platName: '智慧安防',
+                    consultName: '',
+                    consultPhone:'',
+                    mail:'',
+                    company:'',
+                    consultContent: "", //?
+
+                   
                 },
                 rules: {
-                    radio1: [{
+                    platName: [{
                             required: true,
                             message: '请选择类型',
                             trigger: 'change'
                         },
 
                     ],
-                    name: [{
+                    consultName: [{
                             required: true,
                             message: '请输入姓名',
                             trigger: 'blur'
@@ -426,13 +425,13 @@
                         //     trigger: 'blur'
                         // }
                     ],
-                    phone: [{
+                    consultPhone: [{
                         required: true,
                         message: '请输入正确的电话号码',
                         pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
                         trigger: 'change'
                     }],
-                    email: [{
+                    mail: [{
                         required: false,
                         type: "email",
                         message: "请输入正确的邮箱地址",
@@ -442,7 +441,7 @@
                         // { required: true, message: '请选择活动区域', trigger: 'change' }
                     ],
 
-                    desc: [
+                    consultContent: [
                         // { required: true, message: '请填写需求描述', trigger: 'blur' }
                     ]
                 }
@@ -474,9 +473,41 @@
             },
             methods: {
                 submitForm(formName) {
+                    _this=this
                     this.$refs[formName].validate((valid) => {
+                        
                         if (valid) {
-                            alert('submit!');
+                            console.log(_this.ruleForm)
+
+                            let param = JSON.stringify(_this.ruleForm)
+
+
+                            jQuery.ajax({
+                                type: 'POST',
+                                // dataType: 'json',
+                                contentType: 'application/json;charset=UTF-8',
+
+                                url: window.FQDN2 + 'siteReview',
+                                data: param
+                            }).done(function(res) {
+                                if (res.status === "SUCCESS") {
+                                    _this.$message({
+                                    message: '提交成功',
+                                    type: 'success'
+                                    });
+                                    _this.centerDialogVisible=false
+
+                                    _this.$refs[formName].resetFields(); //重置from校验
+                                }
+                               
+
+                             
+                               
+
+                            }).fail(function(err) {});
+
+
+                         
                         } else {
                             console.log('error submit!!');
                             return false;

news/index.html

@@ -67,19 +67,31 @@
         <!--====== NEWS BREADCRUMB END ======-->
 
         <!-- <section class="crumbs">
-        <div class="container">
-            <ul>
-                <li>首页 ></li>
-                <li class="active">新闻动态</li>
-            </ul>
-        </div>
-    </section> -->
+            <div class="container">
+                <ul>
+                    <li>首页 ></li>
+                    <li class="active">新闻动态</li>
+                </ul>
+            </div>
+        </section> -->
+        
+        <section style=" background:#F7F7F7">
+            <div class="container" >
+                <div class="row newTypeBox">
+                    <div class="col-lg-6 col-md-6 titleOne"v-for="(item,i) in newsTypes" :class="i == colin ? 'active' : ''" @click="facilityClick(i, item)" >{{item.title}}</div>
+                </div>
+            </div>
+        </section>
+
 
         <!--====== NEWS CONTENT START ======-->
         <section class="news-content-section pt-70">
             <div class="container">
-                <div class="row newBox">
-                    <!-- <div class="col-lg-12 col-md-12 menu-1">
+
+               
+
+                <!-- <div class="row newBox">
+                    <div class="col-lg-12 col-md-12 menu-1">
                     <ul>
                         <li class="active">
                             <a>公司新闻</a>
@@ -229,6 +241,13 @@
                 totalPageNum: 1,
                 totalPageSzie: 4,
                 loading: true,
+                tabPosition: '1',
+                colin:'0',
+                newsTypes:[
+                    {id:1,title:'公司新闻'},
+                    {id:2,title:'行业动态'},
+                   
+                ],
             },
             computed: {
                 hasNews: function() {
@@ -240,6 +259,9 @@
 
             },
             methods: {
+                facilityClick(e,item){
+                    this.colin = e
+                    },
                 journalism_display_Ajax() {
                     var _this = this;
                     jQuery.ajax({

solution/index.html

@@ -28,7 +28,8 @@
 
 <body>
 
-    <div id="app">
+
+    <div id="app" >
         <div class="erMenu">
             <div>
 
@@ -61,7 +62,7 @@
 
         <!--====== COMMON BREADCRUMB START ======-->
         <section class="common-bradcrumb-section inner-banner">
-            <img :src="backBanner" alt="">
+            <img src="../assets/img/solution/solution-banner1.jpg" alt="">
         </section>
         <!--====== COMMON BREADCRUMB END ======-->
 
@@ -70,20 +71,17 @@
 
 
         <!--====== SOLUTION TYPE START ======-->
-        <!-- <section style="background:#F4F8FD">
-            <div class="container">
-                <div class="row">
-                    <div class="col-md-2 " >
-                        <img src="../assets/img/solution/type1.png" alt="">
-                        <P>智慧商圈</P>
-                    </div>
+        <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">
+                    <P>{{item.categoryName}}</P>
                 </div>
-               
             </div>
-        </section> -->
+        </section>
         <!--====== SOLUTION TYPE END ======-->
 
-
         <section class="solution-section pt-40">
             <div class="container pt-40" v-for="arr in array">
                 <div class="section-title both-border mb-20">
@@ -204,6 +202,8 @@
     <script src="../assets/js/settinginfo.js"></script>
     <!--====== Vue js======-->
     <script src="../assets/js/vue.min.js "></script>
+    <!--====== Vue js======-->
+    <script src="../assets/js/commonVue.js "></script>
     <script>
         $(function() {
             $('#footer').load("../footer.html");
@@ -236,72 +236,7 @@
            
         })
 
-        var app = new Vue({
-            el: '#app',
-            data: {
-                backBanner: "",
-                solution: [],
-                solution_type: 1,
-                id:null,
-                array: []
-            },
-            computed: {
-
-            },
-            created: function() {
-
-                this.solution_type = this.getQueryVariable('solution_type')
-                this.id = this.getQueryVariable('id')
-                console.log(this.id)
-
-                // this.backBanner = '../assets/img/solution/solution-banner' + this.getQueryVariable('solution_type') + '.jpg';
-                this.backBanner = '../assets/img/solution/solution-banner1.jpg' 
-
-            },
-            mounted: function() {
-                console.log(this.solution_type)
-
-                // console.log(JSON.stringify(this.array))
-                var _this = this;
-                $.ajax({
-                    type: 'POST',
-                    dataType: 'json',
-                    url: window.FQDN + 'Solution/index',
-                    data: {
-                        id: this.id?this.id:1
-                    }
-                }).done(function(arr) {
-                    _this.array = arr;
-                }).fail(function(err) {});
-
-
-                $.ajax({
-                    type: 'GET',
-                    dataType: 'json',
-                    url: window.FQDN2 + 'siteArticle/siteArticleList',
-                    data: {
-                        categoryid: this.id?this.id:182
-                    }
-                }).done(function(arr) {
-                    // _this.array = arr;
-                }).fail(function(err) {});
-
-
-            },
-            methods: {
-                getQueryVariable: function(variable) {
-                    var query = window.location.search.substring(1);
-                    var vars = query.split("&");
-                    for (var i = 0; i < vars.length; i++) {
-                        var pair = vars[i].split("=");
-                        if (pair[0] == variable) {
-                            return pair[1];
-                        }
-                    }
-                    return (false);
-                }
-            }
-        });
+        
     </script>
 </body>