更改

.vscode/settings.json

 {
+    "nuxt.isNuxtApp": true
 }
\ No newline at end of file

src/assets/theme/layout.less

@@ -118,8 +118,10 @@ a.an {
     }
 
     .nav {
-      width: @page-width;
+      width: 85%;
+
       margin: 0 auto;
+      justify-content: space-between;
       display: flex;
 
       .wx-div {
@@ -136,7 +138,7 @@ a.an {
         line-height: 90px;
         margin-top: -30px;
         // padding-left: 15rem;
-        padding-left: 240px;
+        // padding-left: 240px;
         padding-top: 30px;
 
         >a {
@@ -590,12 +592,14 @@ h3 {
         // background-color: rgba(#232323, 0.7);
         display: flex;
         // align-items: center;
-        justify-content: center;
+        // justify-content: center;
         padding-top: 14.3rem;
 
         .kouhao {
-          text-align: center;
-          // width: 50%;
+          // text-align: center;
+          width: 60%;
+          justify-content: space-between;
+          padding-left: 20%;
           // background-color: red;
           color: white;
 
@@ -605,30 +609,33 @@ h3 {
           }
 
           .k1 {
-            font-size: 2.8rem;
+            font-size:30px;
             font-family: Microsoft YaHei;
-            font-weight: bold;
-            line-height: 4.75rem;
-            color: #FFFFFF;
-            // margin-top: 60px
+            font-weight: 600;
+            line-height: 2.75rem;
+            color: #000;
+            margin-bottom: 60px;
           }
 
           .k2 {
-            font-size: 1.5rem;
+            font-size: 30px;
             font-family: FZLanTingHeiS-EL-GB;
-            font-weight: 400;
+            font-weight: bold;
             line-height: 55px;
-            color: #FFFFFF;
+            color: #838080;
             line-height: 60px;
             margin-bottom: 0.5rem;
+            // display: inline-block;
+            padding: 10px 30px;
+            background-color: #fff;
           }
 
           .k3 {
-            margin-top: 0.5rem;
-            font-size: 14px;
+            margin-top: 60px;
+            font-size: 30px;
             font-family: Microsoft YaHei;
-            font-weight: 400;
-            color: #FFFFFF;
+            font-weight: 600;
+            color: #000;
           }
         }
       }
@@ -1407,7 +1414,7 @@ a.news {
 
 .productt {
   width: 100%;
-  height: 1300px;
+  height: 1200px;
 }
 
 .productt .productt-content {
@@ -1447,8 +1454,9 @@ a.news {
   display: inline-block;
   float: left;
   margin-right: 12px;
-  width: 392px;
-  height: 353px;
+  padding-bottom: 20px;
+  // width: 392px;
+  // height: 353px;
   box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
@@ -1710,8 +1718,8 @@ a.news {
 
 .logo {
   img {
-    margin-left: 10px;
-    padding-top: 25px;
+    // margin-left: 10px;
+    // padding-top: 25px;
   }
 }
 
@@ -1725,7 +1733,8 @@ a.news {
   img {
     width: 185px;
     height: 126px;
-    margin: 0 7px 20px;
+    margin: 0 50px 20px;
+    justify-content: space-around;
   }
 }
 
@@ -1829,6 +1838,7 @@ a.news {
       flex-grow: 1;
       overflow: hidden;
       display: flex;
+      justify-content: center;
 
       @media screen and (min-width:740px) {
         .card-item {

src/assets/theme/product.less

+.solution{
+  width: 1200px;
+  margin: 100px auto;
+}
 .product-banner {
   // height: 28rem;
   width: 100%;
@@ -299,6 +303,7 @@
     align-items: center;
     padding: 0 0.23rem;
     overflow: hidden;
+    
 
     .banner-div {
       // position: relative;

src/components/product-functions2.vue

@@ -110,6 +110,9 @@ export default {
   &.cur {
       box-shadow: 0px 9px 18px 0px rgba(8, 128, 226, 0.31);
     }
+    .card-body{
+      justify-content: center;
+    }
   
 }
 </style>

src/pages/about/index.vue

 <template>
   <div　class="compnay-info">
     <div class="about-pc">
-      <div class="banner1">
+      <!-- <div class="banner1">
       <img src="/image/about/tt.png" alt="关于我们" />
-    </div>
+    </div> -->
     <div class="about-div">
       <div style="position:relative;">
         <p>北京见著科技有限公司<br/>助力企业智能化升级</p>

src/pages/p1/_id.vue

@@ -231,7 +231,7 @@ export default {
       product: {
         banner: "/image/phm/sm.png",
         bannerphone: "/image/phm/smp.jpg",
-        title: "PHM健康管理",
+        title: "3D体验平台",
         jj1: "PHM预测与健康管理技术(Prognostics Health Management) 是综合利用现代化信息技术、人工智能技术的最新研究成果而提出的一种全新的管理健康状况的解决方案，其目的在于为设备运行保障、应急处置、维修活动提供决策支持，具备故障检测与隔离、故障诊断、故障预测、健康管理和部件寿命追踪等能力。",
         jj2: "见著科技大数据PHM利用见著科技数据中台服务，通过对接企业的信息化管理系统ERP、PLM、MES、BPM、SCE、KMS等，对产品数据进行采集、清洗、动态展示、建立模型、预测分析等处理，从而实现产品故障预测与健康管理。",
         url: "/image/phm/t527.png",
@@ -359,6 +359,7 @@ export default {
       },
       duct: {},
       hx: [],
+      
     };
   },
   asyncData(context) {
@@ -367,34 +368,39 @@ export default {
   },
   created() {
     this.id = this.$route.params.id;
+    console.log(this.$route.params)
     this.sub(this.id);
   },
   mounted() {
     this.content = JSON.parse(sessionStorage.getItem("about"));
+    
   },
   methods: {
     hover(i) {
       this.pointIndex = i;
     },
     sub(id) {
+      console.log(id)
       this.$api
         .get("/pub/product/Get", {
           id: id,
         })
         .then((r) => {
           if (r.success) {
+            console.log(r.result)
             this.duct = r.result;
-            this.duct.advantageList = JSON.parse(this.duct.advantageList);
-            this.duct.problemList = JSON.parse(this.duct.problemList);
-            this.duct.functionsList = JSON.parse(this.duct.functionsList);
-            this.duct.valueList = JSON.parse(this.duct.valueList);
+            this.duct.advantageList = JSON.parse(this.duct.advantageList);//核心优势数据
+            this.duct.problemList = JSON.parse(this.duct.problemList);//应对问题数据
+            this.duct.functionsList = JSON.parse(this.duct.functionsList);//主要功能 数据
+            this.duct.valueList = JSON.parse(this.duct.valueList);//应用价值数据
             console.log(this.duct);
           }
         });
+
     },
      send(msg) {
       this.$store.commit("openModalsy", msg);
-
+      console.log(msg)
     },
   },
   watch: {

src/pages/p1/jijia.vue

+<template>
+  <div class="solution">
+    <div>
+      <div class="flex-top border-margin">
+        <div class="flex-img">
+          <img src="/image/jijia/1001.png" alt="" />
+        </div>
+        <div class="zhong"></div>
+        <div class="flex-wenzi">
+          <h4>机加仿真</h4>
+          <div>
+            现阶段制造类大多企业在产品研发部门，基本上实现了3D
+            CAD产品设计；生产现场大量采用自动化设备（现场总线、PLC等）；但是，在时间消耗最长的生产规划部门，设计手段却较为落后。
+          </div>
+        </div>
+      </div>
+      <div class="flex-right border-margin">
+        <!-- <img class="img1" src="/image/jijia/1203.png" alt="">空 -->
+      </div>
+
+      <div class="fangan border-margin">
+        <div class="img-img">
+          <img src="/image/jijia/1003.png" alt="" />
+        </div>
+        <div class="zhong"></div>
+        <div class="fangan-card">
+          <h4 class="fangan-title">{{ product.fangan.title }}</h4>
+          <div
+            class="fangan-content"
+            v-for="(item, index) in product.fangan.fangan"
+            :key="index"
+          >
+            <h4>{{ item.title }}</h4>
+            <p>{{ item.content }}</p>
+          </div>
+        </div>
+      </div>
+      <div class="shishi">
+          <div class="shishi-title">
+              <h4>{{product.shishi.title}}</h4>
+              <div><img :src="product.shishi.banner" alt=""></div>
+          </div>
+          <div class="shishi-content">
+              <p v-for="(item,index) in product.shishi.content" :key="index">{{item}}</p>
+          </div>
+      </div>
+     
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "",
+  head: {
+    title: "SaaS MES云端协同---北京见著科技有限公司--MES系统"
+  },
+  components: {},
+  data() {
+    return {
+      pointIndex: 0,
+      product: {
+        banner: "/image/phm/sm.png",
+        bannerphone: "/image/phm/smp.jpg",
+        title:
+          "3DEXPERIENCE平台不仅实现机电软跨专业协同，而且三维体验平台融合了多专业的数据和模型，为设计/仿真/工艺一体化提供了基础。",
+        jj1:
+          "CATIA依托3DE平台结合VR虚拟现实技术重新定义产品开发，借助虚拟世界先进行仿真评估。",
+        jj2:
+          "是PLM协同解决方案的一个重要组成部分，支持从项目前阶段、具体的设计、分析、模拟、组装到维护在内的全部工业设计流程。而后借助PLM系统将创意付诸于现实。",
+        jijia1:
+          "结合产品设计流程运用主要线框控制元素对整个产品结构进行有效的总体控制形成类似树干状的产品设计结构，并建立有效的参数信息传递框架及流程的CATIA自上而下的协同设计方法。",
+        url: "/image/phm/t527.png",
+        f1: true,
+        f2: true,
+        fangan: {
+          title: "方案优势",
+          fangan: [
+            {
+              title: "1、实现产品、工艺和资源数据的集约化管理",
+              content:
+                "将企业的工程数据组织在一起，保持产品-工艺-资源数据之间紧密地逻辑关联关系，使得产品数据无需在多个系统中多次存储，并能为整个企业所共享使用。"
+            },
+            {
+              title: "2、实现3D工艺规划",
+              content:
+                "充分利用“数字样机”的三维数据，实现基于三维数据信息的3D工艺规划，进行零件的加工、装配等3D工艺及仿真、验证；而且，在进行各种工艺规划、仿真和验证的同时，可以生成3D图形化的工艺文档和过程演示视频，使工艺方案的评审更具有直观性和科学性。"
+            },
+            {
+              title: "3、实现对生产过程的真实反映",
+              content:
+                "建立一个完整的3D数字工厂（厂房）环境，并结合人机工程，将虚拟的人体模型放置到数字工厂环境当中，进行人机工效的评估。"
+            },
+            {
+              title: "4、支持并行工程",
+              content:
+                "制造部门的工作人员可以及早参与到产品的研发中去，与设计人员并行的开展工作，从而使得在设计过程中能够充分的考虑零件的工艺特性、部件的可装配性和产品的可维护性等因素。"
+            }
+          ]
+        },
+        spcj: {
+          title:
+            "PHM适用于是密集应用大数据的典型工业领域，是工业互联网的重要组成部分。PHM强调资产设备管理中的状态感知、数据监控与分析，通过监控设备健康状况、故障频发区域与周期，预测故障的发生，从而大幅度提高运维效率。",
+          url: [
+            "/image/catia/0307.png",
+            "/image/catia/0308.png",
+            "/image/catia/0309.png",
+            "/image/catia/0310.png"
+          ]
+        },
+        
+       
+        shishi:{
+            banner:"/image/jijia/1004.png",
+            title:"实施办法",
+            content:[
+                "1、从PDM系统获取产品结构数据（EBOM）",
+                "2、从工装工具、生产部门获取资源数据（由3D CAD系统生成），（目前大多企业只有少量或无资源3D数据，必须建立相应工装工具库）。",
+                "3、从工艺部门获取已有工艺信息；或在DPE中重新进行工艺设计",
+                "4、在DPE中产生总工艺计划、细节工艺计划、生产计划及产品、工艺、资源关联信息，进行工时分析等",
+                "5、进入DPM环境，用三维的方式进行工艺验证、人机任务仿真和分析，及工厂布局分析",
+                "6、按照客户的要求进行客户化，将分析、验证的结果输出（与工艺相关的质询单等）。或将数据传递到CAPP系统生产相应工艺文件",
+                "7、或到DPE中产生基于MBOM的工艺计划；并与PDM系统集成，形成PPR模型",
+                "8、产生相应工艺文档；或储存为DPE文档的附件。",
+                "9、按ERP、SCM、CRM、MES格式要求，输出相应生产、采购、招投标、维护、培训等信息",
+                "10、完成与企业其他系统集成"]
+        }
+      }
+    };
+  },
+  methods: {
+    hover(i) {
+      this.pointIndex = i;
+    },
+    watch() {}
+  }
+};
+</script>
+<style lang="less" scoped>
+.flex-top {
+  display: flex;
+  justify-content: space-around;
+  background: url(/image/jijia/1002.png);
+  background-size: 100% 100%;
+  .flex-img {
+    flex: 0.3;
+    // width: 60%;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .zhong {
+    flex: 0.2;
+  }
+  .flex-wenzi {
+    flex: 0.4;
+    display: flex;
+    flex-direction: column;
+
+    h4 {
+      display: flex;
+      align-items: center;
+      height: 50%;
+      font-size: 30px;
+      font-weight: 500;
+      margin: auto;
+      // color: #000;
+    }
+    div {
+      // padding-right: 20%;
+      height: 50%;
+      font-weight: 500;
+      font-size: 20px;
+      color: rgb(47, 46, 104);
+      display: flex;
+      flex-direction: row-reverse;
+    }
+  }
+}
+.flex-right {
+  width: 100%;
+  display: flex;
+  flex-direction: row-reverse;
+  .img1 {
+    flex: 0.4;
+    width: 40%;
+  }
+  .img2 {
+    flex: 0.7;
+    width: 70%;
+  }
+}
+
+.border-margin {
+  margin: 50px auto;
+}
+.neirong {
+  margin-top: 20px;
+  width: 60%;
+  font-size: 20px;
+  color: rgb(138, 135, 135);
+}
+
+.jiegou {
+  display: flex;
+  width: 100%;
+  .img1 {
+    img {
+      width: 100%;
+    }
+  }
+  h4 {
+    width: 100%;
+    display: flex;
+    align-items: center;
+  }
+}
+.zhouqi {
+  .zhouqi-ul {
+    display: flex;
+    flex-direction: row-reverse;
+    ul {
+      width: 70%;
+      font-size: 18px;
+      font-weight: 600;
+      color: #000;
+      li {
+        padding-top: 20px;
+      }
+    }
+  }
+}
+.jijia {
+  .jijia-flex {
+    display: flex;
+    .jijia-flex-font {
+      width: 40%;
+      display: flex;
+      align-items: center;
+      padding-left: 10%;
+    }
+    .zhong {
+      width: 10%;
+    }
+    .jijia-flex-img {
+      width: 50%;
+    }
+  }
+}
+.fangan {
+  display: flex;
+  .fangan-card {
+    width: 50%;
+    // padding-left:10%;
+    align-items: center;
+    .fangan-title {
+        padding-bottom: 10%;
+        color: rgb(124, 122, 122);
+    }
+    .fangan-content {
+        h4{
+            font-size: 18px;
+            font-weight: 600;
+            color: #000;
+        }
+      p {
+        font-size: 18px;
+        font-weight: 500;
+        color: rgb(124, 122, 122)
+      }
+    }
+  }
+  .zhong {
+    width: 5%;
+  }
+  .img-img {
+    width: 45%;
+    // padding-right: 5%;
+    img {
+      width: 100%;
+    }
+  }
+}
+.shishi{
+    width: 100%;
+    .shishi-title{
+        display: flex;
+        h4{
+            flex: .4;
+            display: flex;
+            align-items: center;
+            font-weight: 700;
+            
+        }
+        div{
+            flex: .6;
+            img{
+                width: 100%;
+            }
+        }
+    }
+    .shishi-content{
+        color: #000;
+        font-size: 18px;
+        font-weight: 600;
+    }
+}
+h4 {
+  font-size: 20px;
+}
+</style>

src/pages/p1/xiangmu.vue

+<template>
+  <div class="solution">
+    <div>
+        <div class="flex-top border-margin">
+        <div class="flex-img">
+          <img src="/image/xiangmu/1101.png" alt="" />
+        </div>
+        <div class="zhong"></div>
+        <div class="flex-wenzi">
+          <h4>项目管理</h4>
+          <div>{{product.title}}
+          </div>
+        </div>
+      </div>
+        <div class="flex-right border-margin">
+            <!-- <img class="img1" src="/image/xiangmu/1203.png" alt="">空 -->
+        </div>
+        <div class="strategy border-margin">
+            <h4>项目管理解决方案策略</h4>
+            <div class="strategy-flex">
+                <div class="img-left"><img src="/image/xiangmu/1103.png" alt=""></div>
+                <div class="zhong"></div>
+                <div class="card-right">
+                    <div :class="item.name"  v-for="(item,index) in product.celue" :key="index">
+                        <h4>{{item.title}}:</h4>
+                        <p v-for="(val,index) in item.content" :key="index">{{val}}</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+       <div class="liucheng border-margin">
+           <div class="liucheng-card" v-for="(item,index) in product.liucheng" :key="index">
+               <h4>{{item.title}}</h4>
+               <p v-for="(val,index) in item.content" :key="index">{{val}}</p>
+           </div>
+           <div class="zhong"></div>
+           <div class="img-img">
+               <img src="/image/xiangmu/1104.png" alt="">
+           </div>
+       </div>
+        
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "",
+  head: {
+    title: "SaaS MES云端协同---北京见著科技有限公司--MES系统"
+  },
+  components: {},
+  data() {
+    return {
+      pointIndex: 0,
+      product: {
+        banner: "/image/phm/sm.png",
+        bannerphone: "/image/phm/smp.jpg",
+        title: "排除没有附加值的任务，这样能有更多的时间来确保项目按时、在预算内完成。基于可交付成果的项目管理使团队成员能够专注于创造创新体验，按时并按预算交付项目。",
+        jj1: "CATIA依托3DE平台结合VR虚拟现实技术重新定义产品开发，借助虚拟世界先进行仿真评估。",
+        jj2:
+          "是PLM协同解决方案的一个重要组成部分，支持从项目前阶段、具体的设计、分析、模拟、组装到维护在内的全部工业设计流程。而后借助PLM系统将创意付诸于现实。",
+        url: "/image/phm/t527.png",
+        f1: true,
+        f2: true,
+        zhouqi:[
+            "研发平台支持机电设计一体化流程，并且对设计数据，衍生数据，IDF文档以及BOM都有嵌入式深度集成",
+            "集成直接与项目工作区贯通，设计人员可直接把设计数据按照项目交付物进行管理，紧贴研发项目审签流程。",
+            "所有数据最终以BOM为核心进行管理，BOM和相关设计数据在研发平台上关联",
+            "这样的数据结构有利于最终产品发布流程的统一管理，当BOM发布时，连带的所有设计数据必须也处于设计已交付状态，从而保证产品发布时数据的有效性，完整性。并方便设计人员打包推送数据到生产端。"
+        ],
+        liucheng:[
+            {
+                title:"实施流程",
+                content:["概念计划：承载系统的概念设计；系统/子系统设计规划书；设计需求；早期BOM","开发：承载系统的物理结构设计；设计协同；模型、CAD图纸、技术规范、研发文档","测试验证&生命周期：承载选装选配设计；Super BOM；生产及工艺数据"]
+            }
+        ],
+        celue:[
+            {
+                title:"高效的项目团队协同",
+                name:"w50",
+                content:["定义明确团队","建立项目环境","项目任务驱动","基于BOM协同"],
+            },{
+                title:"问题风险反馈及解决",
+                name:"w50",
+                content:["量化问题风险等级","系统化的问题风险汇报方式","问题全生命周期跟踪","项目风险趋势统计"],
+            },{
+                title:"“事实”项目进度",
+                name:"w100",
+                content:["进度-任务，基于任务的进度报交使得进度可以被细化，也可被实时统计汇总","任务-成果，基于任务成果的任务定义使项目任务完成与真实项目进展对应","成果-确认，对于交付物状态的确认来对任务完成情况进行复核，确保交付物的正确性及合规性","实时的进度仪表盘，提供一个实时的项目进度汇总信息，随时提供给项目管理者项目状态"],
+            },{
+                title:"高质量的评审",
+                name:"w50",
+                content:["评审会议定义","评审决策跟踪","基于事实数据的评审","评审驱动的转阶段"],
+            },{
+                title:"项目质量评价",
+                name:"w50",
+                content:["定义项目质量","项目成本归集可视化","工时VS计划"," "],
+            },
+        ]
+    
+        
+       
+      }
+    };
+  },
+  methods: {
+    hover(i) {
+      this.pointIndex = i;
+    },
+    watch() {}
+  }
+};
+</script>
+<style lang="less" scoped>
+.flex-top {
+  display: flex;
+  justify-content: space-around;
+  background: url(/image/jijia/1002.png);
+  background-size: 100% 100%;
+  .flex-img {
+    flex: 0.3;
+    // width: 60%;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .zhong {
+    flex: 0.2;
+  }
+  .flex-wenzi {
+    flex: 0.4;
+    display: flex;
+    flex-direction: column;
+
+    h4 {
+      display: flex;
+      align-items: center;
+      height: 50%;
+      font-size: 30px;
+      font-weight: 500;
+      margin: auto;
+      // color: #000;
+    }
+    div {
+      // padding-right: 20%;
+      height: 50%;
+      font-weight: 500;
+      font-size: 20px;
+      color: rgb(47, 46, 104);
+      display: flex;
+      flex-direction: row-reverse;
+    }
+  }
+}
+.flex-right{
+        width: 100%;
+        display: flex;
+        flex-direction: row-reverse;
+        .img1{
+            flex: .4;
+            width: 40%;
+        }
+        .img2{
+            flex: .7;
+            width: 70%;
+        }
+    }
+
+    .border-margin{
+        margin: 50px auto;
+    }
+    .neirong{
+        margin-top: 20px;
+        width: 60%;
+        font-size: 20px;
+        color: rgb(138, 135, 135);
+    }
+.liucheng{
+    display: flex;
+    .liucheng-card{
+        width: 60%;
+        padding-left:10%;
+        align-items: center;
+        h4{
+            width: 60%;
+            padding-top: 20%;
+            padding-bottom: 10%;
+        }
+        p{
+            width: 73%;
+        }
+    }
+    .zhong{
+        width: 10%;
+    }
+    .img-img{
+        width: 40%;
+        // padding-right: 5%;
+        img{
+            width: 100%;
+        }
+    }
+}
+.jiegou{
+    display: flex;
+    width: 100%;
+    .img1{
+        img{
+            width: 100%;
+        }
+    }
+    h4{
+        width: 100%;
+        display: flex;
+        align-items: center;
+    }
+}
+.zhouqi{
+    .zhouqi-ul{
+        display: flex;
+        flex-direction: row-reverse;
+        ul{
+            width: 70%; 
+            font-size: 18px;
+            font-weight: 600;
+            color: #000;
+            li{
+                padding-top: 20px;
+            }
+        }
+    }
+}
+.strategy{
+    h4{
+        padding-bottom: 10px ;
+    }
+    .strategy-flex{
+        width: 100%;
+        display: flex;
+        .img-left{
+            width: 40%;
+            img{
+                width: 100%;
+            }
+        }
+        .zhong{
+            width: 2%;
+        }
+        .card-right{
+            width: 58%;
+            .w50{
+                width: 50%;
+                line-height: 30px;
+                padding-bottom: 20px;
+                display: inline-grid;
+                height: 30%;
+            }
+            .w100{
+                width: 100%;
+                line-height: 30px;
+                padding-bottom: 20px;
+                height: 40%;
+            }
+        }
+    }
+}
+h4{
+    font-size: 24px;
+    font-weight: 600;
+    color: #000;
+}
+p{
+    font-size: 20px;
+    font-weight: 500;
+    color: rgb(146, 143, 143);
+}
+</style>