排版+修复

assets/css/style.css

@@ -793,7 +793,7 @@
             
             header .mainmenu-area .main-menu .menu-items ul li {
                 display: inline-block;
-                margin: 0px 100px 0 0;
+                margin: 0px 44px 0 0;
                 position: static;
                 cursor: pointer;
             }
@@ -3141,6 +3141,44 @@
             .solution-section .solution-btn:hover {
                 color: #639BFF;
                 border: #639BFF 1px solid;
+            }
+            .solutionItem{
+                padding:40px;
+            }
+            .solution-section .container{
+                /* border:1px solid red; */
+                padding: 35px 70px;
+                /* box-shadow: 0px 2px 17px 4px rgb(158 158 158 / 15%); */
+                box-shadow:0px 0px 13px 0px rgb(158 158 158 / 26%);
+                position:relative;
+                background:#fff;
+                cursor:pointer
+            }
+            .solution-section .container:hover{
+                box-shadow:0px 0px 13px 0px rgb(158 158 158 / 80%);
+            }
+            .solution-section .solutionTitle{
+                font-size:20px;
+                font-weight:bold;
+                height: 49px;
+                line-height: 49px;
+                color:#fff;
+                background: url(http://usky.cn/assets/v1/images/h1_bg.png) no-repeat;
+                position:absolute;
+                left:0;
+                top:35px;
+                width:70%;
+                padding-left:70px;
+            }
+            .solution-section .solutionInner{
+                padding-top:60px;
+            }
+            .solution-section .solutionInner p{
+                font-size:16px;
+                font-weight:bold;
+                /* padding-top:30px; */
+               
+
             }
             /*===========================
     Core Product
@@ -6366,6 +6404,23 @@
                         display:block
                     }
 
+                }
+                .contactQr{
+                    position:relative;
+                    
+                }
+                .contactQr div{
+                    width:140px;
+                    display:none;
+                    position:absolute;
+                    right:60px;
+                    top:-30px
+                }
+                .contactQr:hover{
+                    div{
+                        display:block
+                    }
+
                 }
                 .contactInner{
                     display:none;
@@ -6420,9 +6475,13 @@
                     line-height:36px;
                     padding:0;
                  
-                    /* border:1px solid #DCDFE6; */
+                    border:1px solid #DCDFE6;
+                    margin-bottom:5px;
                     /* border-radius:4px; */
                 }
+                .el-radio-button:first-child .el-radio-button__inner,.el-radio-button:last-child .el-radio-button__inner{
+                    border-radius:0
+                }
                 /* .el-radio-button__inner:last-child{
                     margin-right:0px;
     
@@ -6436,6 +6495,9 @@
                 }
 
             }
+            .feedBackDialog .el-radio-group label{
+                margin-right:10px
+            }
 
 
             .solutionType .solutionTypeOne{

assets/js/commonVue.js

@@ -21,7 +21,13 @@ var app = new Vue({
 
     //公共
     id: null,
-    columnList: [],
+    columnList: [
+      {categoryName:'首页',sname:'/index.html',id:1},
+      {categoryName:'解决方案',sname:'/solution.html',id:2},
+      {categoryName:'产品服务',sname:'/product.html',id:3},
+      {categoryName:'新闻动态',sname:'/news.html',id:4},
+      {categoryName:'关于永天',sname:'/about.html',id:5},
+    ],
     currentPath: '',
     articalArray: [], //详情数组
     articalArrayRelated: [], //相关新闻
@@ -156,7 +162,10 @@ var app = new Vue({
           if (res.data[i].categoryName == '产品服务' && window.location.pathname == '/product/read.html') {
             _this.currentPath = '/product/index.html' //产品详情时栏目高亮
             
-           
+          }
+          if (res.data[i].categoryName == '解决方案' && window.location.pathname == '/solution/read.html') {
+            _this.currentPath = '/solution/index.html' //产品详情时栏目高亮
+            
           }
           if (res.data[i].categoryName == '解决方案') {
             _this.dialogDataArray=(res.data[i].children)
@@ -271,7 +280,7 @@ var app = new Vue({
          bb=res.data.records
         }else{
           aa= res.data.records;
-          aa.sort(_this.compare("lmtitle"))
+          // aa.sort(_this.compare("lmtitle"))
           _this.articalArray = aa;
         }
 

assets/js/main.js

@@ -1,6 +1,22 @@
 var onitirDoc;
 
 (function($) {
+
+
+    // 返回顶部显示与隐藏
+    var $back_to_up = $('#scroll-up');
+    $back_to_up.css({'visibility': 'hidden','opacity':'0'});
+
+    $(window).scroll(function(){
+        var scroH = $(window).scrollTop();
+        if (scroH > 700){
+            $back_to_up.css({'visibility': 'visible','opacity':'1'});
+        }else{
+            $back_to_up.css({'visibility': 'hidden','opacity':'0'});
+        }
+    });
+
+
     'use strict';
     onitirDoc = {
         init: function() {
@@ -68,3 +84,5 @@ function toNews() {
 
 
 
+
+

index.html

@@ -22,9 +22,9 @@
     <!--====== animate css ======-->
     <link rel="stylesheet" href="https://animate.style/animate.min.css" />
     <!--====== Style css ======-->
-    <link rel="stylesheet" href="assets/css/style.css"/>
+    <link rel="stylesheet" href="assets/css/style.css" />
     <!--====== home css ====== -->
-    <link rel="stylesheet" href="assets/css/home.css"/>
+    <link rel="stylesheet" href="assets/css/home.css" />
     <link rel="stylesheet" href="assets/fonts/iconfont/iconfont.css">
 </head>
 
@@ -34,10 +34,10 @@
   <![endif]-->
 
 
-  <div id="app2">
+    <div id="app2">
 
-    
-  </div>
+
+    </div>
 
     <div id="app">
 
@@ -56,23 +56,27 @@
                     <li>
                         <span> 传真：</span>
                         <span>021-65376655-8588</span>
-    
-    
                     </li>
                 </ul>
             </div>
-            <!-- <div>
-                <img src="assets/img/home/f_feed.png" alt="">
-            </div> -->
-            <div @click="scrollToTop">
+            <div class="contactQr">
+                <!-- 二维码 -->
+                <img src="assets/img/home/f_code.png" alt="">
+                <div class="">
+                    <img src="assets/img/qr_codeF.png" alt="">
+                </div>
+            </div>
+            <div @click="scrollToTop" id="scroll-up">
                 <img src="assets/img/home/f_top.png" alt="">
             </div>
         </div>
-        <el-dialog title="项目咨询" style="display:none" :style="{display:(centerDialogVisible?'block':'none')}"  :visible.sync="centerDialogVisible" width="700px" center class="feedBackDialog" :lock-scroll="false">
+        <el-dialog title="项目咨询" style="display:none" :style="{display:(centerDialogVisible?'block':'none')}"
+            :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="platName" style="">
-                    <el-radio-group v-model="ruleForm.platName"> 
-                        <el-radio-button :label="item.categoryName"  v-for="item in dialogDataArray" :key="item.id"></el-radio-button>
+                    <el-radio-group v-model="ruleForm.platName">
+                        <el-radio-button :label="item.categoryName" v-for="item in dialogDataArray" :key="item.id">
+                        </el-radio-button>
                     </el-radio-group>
                 </el-form-item>
                 <el-row :gutter="20">
@@ -101,15 +105,15 @@
                     <el-input type="textarea" v-model="ruleForm.consultContent"></el-input>
                 </el-form-item>
             </el-form>
-    
+
             <!-- <span>需要注意的是内容是默认不居中的</span> -->
-            <span slot="footer" class="dialog-footer" >
+            <span slot="footer" class="dialog-footer">
                 <el-button @click="resetForm('ruleForm')">取 消</el-button>
                 <el-button type="primary" @click="submitForm('ruleForm')">提 交</el-button>
             </span>
         </el-dialog>
         <!-- DIALOG END -->
-        
+
         <!--====== HEADER START ======-->
         <header class="header-absolute sticky-header">
             <div class="custom-container-one">
@@ -119,21 +123,24 @@
                     </div>
                     <div class="d-flex align-items-center ">
                         <nav class="main-menu">
-                           
+
                             <div class="menu-items">
-                                <ul v-if="columnList" >
-                                    <li  v-for="item in columnList" :key="item.id"  :class="
-                                    currentPath==item.sname? 'active':''" >
+                                <ul v-if="columnList">
+                                    <li v-for="item in columnList" :key="item.id" :class="
+                                    currentPath==item.sname? 'active':''">
                                         <a :href="`${item.sname}?id=${item.id}&isUrlId=0`">{{item.categoryName}}</a>
-                                        <ul class="submenu" >
-                                            <li v-if="item.children" v-for="aa in item.children" :key="aa.id"><a :href="`${item.sname}?id=${aa.id}&isUrlId=1`"> <span style="font-weight:bold;margin-right:10px">·</span>   {{aa.sname}}</a></li>
+                                        <ul class="submenu">
+                                            <li v-if="item.children" v-for="aa in item.children" :key="aa.id"><a
+                                                    :href="`${item.sname}?id=${aa.id}&isUrlId=1`"> <span
+                                                        style="font-weight:bold;margin-right:10px">·</span>
+                                                    {{aa.sname}}</a></li>
                                         </ul>
                                     </li>
-                                  
+
                                 </ul>
                             </div>
                         </nav>
-                        <div class="apply-expre" v-if="columnList.length>0" @click="centerDialogVisible=true" >申请体验</div>
+                        <div class="apply-expre" v-if="columnList.length>0" @click="centerDialogVisible=true">申请体验</div>
                     </div>
                 </div>
                 <div>
@@ -146,14 +153,16 @@
         <div class="video-section">
             <video autoplay loop muted style="width:100%;height:100%;object-fit:fill;"
                 poster="assets/img/banner/111.png">
-                <source src="assets/video/111.mp4" type="video/mp4">
+                <source src="assets/video/112.mp4" type="video/mp4">
             </video>
             <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">20年</span>，围绕行业细分，累计服务超过 <span class="num1">5000</span> 家企业，近<span class="num1"> 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">
+                <div class="des2 desCom animate__animated  animate__flipInX"
+                    style="top:43%; left:0;width:100%;text-align:center">
                     <p>核心价值观</p>
                     <span>一起梦想，一起成长，一起分享</span>
 
@@ -323,10 +332,12 @@
                         </div>
                         <div class="footerNone" style="width:15% !important;" v-for="item in columnList" :key="item.id">
                             <div class="widget nav-widget d-flex justify-content-center ">
-                                <div >
-                                    <h5 class="widget-title"><a :href="`${item.sname}?id=${item.id}&isUrlId=0`">{{item.categoryName}}</a></h5>
+                                <div>
+                                    <h5 class="widget-title"><a
+                                            :href="`${item.sname}?id=${item.id}&isUrlId=0`">{{item.categoryName}}</a>
+                                    </h5>
                                     <ul>
-                                        <li  v-if="item.children"  v-for="r in item.children" :key="r.id">
+                                        <li v-if="item.children" v-for="r in item.children" :key="r.id">
                                             <a :href="`${item.sname}?id=${r.id}&isUrlId=1`"> {{r.sname}}</a>
                                         </li>
                                     </ul>
@@ -351,12 +362,12 @@
         <!--====== FOOTER PART END ======-->
 
 
-        
 
-        
+
+
 
     </div>
-  
+
 
 
     <!--====== jquery js ======-->
@@ -385,9 +396,31 @@
     <script src="assets/js/commonVue.js "></script>
 
     <script>
-     
-
-            
+        // 返回顶部样式显示隐藏
+        var $back_to_up = $('#scroll-up');
+        //鏄剧ず杩斿洖椤堕儴瀹瑰櫒
+        $(window).scroll(function () {
+            var scroH = $(window).scrollTop();
+            if (scroH > 240) {
+                $back_to_up.css({
+                    'visibility': 'visible',
+                    'opacity': '1'
+                });
+            } else {
+                $back_to_up.css({
+                    'visibility': 'hidden',
+                    'opacity': '0'
+                });
+            }
+        });
+
+        //下箭头点击事件
+        var $wh = $(window).height();
+        $('.go_down').click(function (e) {
+            $('html,body').animate({
+                scrollTop: $wh
+            }, 700);
+        });
     </script>
 </body>
 

solution/index.html

@@ -133,8 +133,32 @@
         <!--====== SOLUTION TYPE END ======-->
 
         <!--====== SOLUTION SECTION START ======-->
-        <section class="solution-section pt-40">
-            <div class="container pt-40 pt-40" v-for="arr in articalArray">
+        <section class="solution-section">
+
+            <div class="solutionItem"  v-for="(item,index) in articalArray" :key="item.id" :style="{background:(index % 2 == 1?'#F4F8FD':'#fff')}" >
+                <div class="container"  @click="oneInnerBox(item)">
+                    <div class="solutionTitle">
+                        {{item.title}}
+                    </div>
+                    <div class="row solutionInner">
+                        <div class="col-md-7">
+                            <p v-html="item.lmtitle"></p>
+                            <div class="pt-40">{{item.zhaiyao}}</div>
+                        </div>
+                        <div class="col-md-5 text-center">
+                            <img :src="item.image" alt="">
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+
+     
+
+           
+            
+
+            <div class="container pt-40 pt-40" v-for="arr in articalArray"  style="display:none">
                 <div class="section-title both-border mb-20">
                     <span class="title-tag2">{{arr.title}}</span>
                 </div>
@@ -150,11 +174,9 @@
                 </div>
 
             </div>
-            <br>
-            <br>
-
+  
 
-            <div class="container pt-40" v-for="arr in array" style="display:none">
+            <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>

solution/read.html

@@ -0,0 +1,221 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="ie=edge" />
+    <meta name="description" content="" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <link rel="icon" href="../assets/img/favicon.ico">
+
+    <title>产品详情</title>
+
+    <link rel="stylesheet" href="../assets/css/bootstrap.min.css" />
+    <!--====== Mean Menu ======-->
+    <link rel="stylesheet" href="../assets/css/meanmenu.min.css" />
+    <!--====== Default css ======-->
+    <link rel="stylesheet" href="../assets/css/default.css" />
+    <!--====== Style css ======-->
+    <link rel="stylesheet" href="../assets/css/style.css" />
+    <!--====== Animation css =======-->
+    <link rel="stylesheet" href="../assets/css/animation.css" />
+    <!--====== element css ====== -->
+    <link rel="stylesheet" href="../assets/css/element.css">
+    <!--====== home css ====== -->
+    <link rel="stylesheet" href="../assets/css/home.css" />
+</head>
+
+<body>
+    <!--[if lte IE 9]>
+	<p class="browserupgrade">请使用chrome，IE11等现代浏览器，浏览本网站.</p>
+  <![endif]-->
+    <div id="app">
+     
+        <!-- DIALOG START-->
+        <el-dialog title="项目咨询" style="display:none" :style="{display:(centerDialogVisible?'block':'none')}"  :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="platName" style="">
+                    <el-radio-group v-model="ruleForm.platName"> 
+                        <el-radio-button :label="item.categoryName"  v-for="item in dialogDataArray" :key="item.id"></el-radio-button>
+                    </el-radio-group>
+                </el-form-item>
+                <el-row :gutter="20">
+                    <el-col :span="12">
+                        <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="consultPhone">
+                            <el-input v-model="ruleForm.consultPhone"></el-input>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <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-input v-model="ruleForm.company"></el-input>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-form-item label="需求描述" prop="consultContent">
+                    <el-input type="textarea" v-model="ruleForm.consultContent"></el-input>
+                </el-form-item>
+            </el-form>
+    
+            <!-- <span>需要注意的是内容是默认不居中的</span> -->
+            <span slot="footer" class="dialog-footer" >
+                <el-button @click="resetForm('ruleForm')">取 消</el-button>
+                <el-button type="primary" @click="submitForm('ruleForm')">提 交</el-button>
+            </span>
+        </el-dialog>
+        <!-- DIALOG END -->
+        
+        <!--====== HEADER START ======-->
+        <header class="header-absolute sticky-header">
+            <div class="custom-container-one">
+                <div class="mainmenu-area container d-flex align-items-center justify-content-center">
+                    <div class="logo">
+                        <a href="/index.html"><img src="../assets/img/logo-white.png" alt="uskylogo"></a>
+                    </div>
+                    <div class="d-flex align-items-center ">
+                        <nav class="main-menu">
+                           
+                            <div class="menu-items">
+                                <ul v-if="columnList" >
+                                    <li  v-for="item in columnList" :key="item.id"  :class="
+                                    currentPath==item.sname? 'active':''" >
+                                        <a :href="`${item.sname}?id=${item.id}&isUrlId=0`">{{item.categoryName}}</a>
+                                        <ul class="submenu" >
+                                            <li v-if="item.children" v-for="aa in item.children" :key="aa.id"><a :href="`${item.sname}?id=${aa.id}&isUrlId=1`"> <span style="font-weight:bold;margin-right:10px">·</span>   {{aa.sname}}</a></li>
+                                        </ul>
+                                    </li>
+                                  
+                                </ul>
+                            </div>
+                        </nav>
+                        <div class="apply-expre" v-if="columnList.length>0" @click="centerDialogVisible=true" >申请体验</div>
+                    </div>
+                </div>
+                <div>
+                    <div class="mobile-menu"></div>
+                </div>
+            </div>
+        </header>
+        <!--====== HEADER END ======-->
+
+        <!--====== PRODUCT BREADCRUMB START ======-->
+        <section class="common-bradcrumb-section">
+            <img src="../assets/img/product/bg.jpg" alt="">
+        </section>
+        
+
+        <!--====== PRODUCT CONTENT START ======-->
+        <section class="product-content-section pt-60">
+            <div class="container">
+                <div class="row">
+                    <div class="col-lg-12 col-md-12 content">
+                        <div v-if="loading" class="pt-60 pb-60">
+                            <div class="loadEffect">
+                                <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
+                            </div>
+                        </div>
+                        <div v-if="!loading" class="read_content pb-100">
+                            <div class="section-title text-center both-border mb-80 d-flex justify-content-between">
+                                <span class="title-tag2" >内容详情</span>
+                                <a href="./index.html"><img src="../assets/img/product/close.png" alt=""></a>
+                            </div>
+                
+                            <div class="row">
+                                
+                                 <div class=" col-lg-12 col-md-12  " >
+                                    <div class="title-tag2 mb-40 text-center" style="font-size:20px">{{articalArray[0].title}}</div>
+                                    <div  v-html="articalArray[0].content"></div>
+                                 </div>
+                            </div>
+                       
+                           
+                        </div>
+                     
+
+                        <!--  -->
+                        <div v-if="!loading" class="read-page d-flex justify-content-between">
+                            
+                           
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!--====== PRODUCT CONTENT END ======-->
+
+        <!--====== FOOTER PART START ======-->
+        <footer>
+            <!-- widgets -->
+            <div class="footer-widget-area">
+                <div class="container">
+                    <div class="row footerOne">
+                        <div class="col-lg-2 col-md-6 col-sm-6 footerWidth">
+                            <div class="copyrigt-or-code d-flex flex-column align-items-center ">
+                                <img width="130 " height="130 " src="https://aiot.usky.cn/uskyq/assets/img/qr_code.png">
+                                <span style="text-align: left;color:#fff;margin-top:10px ">微信公众号</span>
+                            </div>
+                        </div>
+                        <div class="footerNone" style="width:15% !important;" v-for="item in columnList" :key="item.id">
+                            <div class="widget nav-widget d-flex justify-content-center ">
+                                <div >
+                                    <h5 class="widget-title"><a :href="`${item.sname}?id=${item.id}&isUrlId=0`">{{item.categoryName}}</a></h5>
+                                    <ul>
+                                        <li  v-if="item.children"  v-for="r in item.children" :key="r.id">
+                                            <a :href="`${item.sname}?id=${r.id}&isUrlId=1`"> {{r.sname}}</a>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- copyright -->
+            <div class="copy-right-area ">
+                <div class="container ">
+                    <div class="row copyrigt-text ">
+                        <div class="col-lg-12 ">
+                            <p>Copyright © 2001- 2022 Usky. All Rights Reserved. 永天股份 版权所有</p>
+                            <p>增值电信业务经营许可证（IDC、ISP）编号B2-20080010</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </footer>
+        <!--====== FOOTER PART END ======-->
+
+    </div>
+
+    <script src="../assets/js/vendor/modernizr-3.6.0.min.js"></script>
+    <script src="../assets/js/vendor/jquery-1.12.4.min.js"></script>
+    <!--====== Bootstrap js ======-->
+    <script src="../assets/js/bootstrap.min.js"></script>
+    <script src="../assets/js/popper.min.js"></script>
+    <!--====== Mean Menu ======-->
+    <script src="../assets/js/jquery.meanmenu.min.js"></script>
+    <script src="../assets/css/font_mun4q5ltrbp/iconfont.js"></script>
+    <!--====== Main js ======-->
+    <script src="../assets/js/main.js"></script>
+    <!--====== Setting Info js=======-->
+    <script src="../assets/js/settinginfo.js"></script>
+    <!--====== Vue Developer js ======-->
+    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
+    <!--====== Vue  js ======-->
+    <script src="../assets/js/vue.min.js"></script>
+    <script src="../assets/js/element/index.js"></script>
+    <script src="../assets/js/commonVue.js "></script>
+
+   
+</body>
+
+</html>