自适应

src/assets/theme/layout.less

@@ -122,8 +122,8 @@ a.an:hover{
     }
 
     .nav {
+      
       width: 1200px;
-
       margin: 0 auto;
       justify-content: space-between;
       display: flex;
@@ -281,6 +281,11 @@ a.an:hover{
         }
       }
     }
+    @media (max-width:1280px) {
+        .nav{
+          width: 1000px;
+        } 
+    }
   }
 
 }
@@ -499,6 +504,11 @@ h3 {
   width: 100%;
   margin: 0 auto;
 }
+@media (max-width:1280px) {
+    .main{
+      width: 1000px;
+    }
+}
 
 .ivu-carousel-dots {
   li {
@@ -1424,30 +1434,35 @@ a.news {
 // }
 .about {
   width: 100%;
-  height: 760px;
+  // height: 760px;
+  height: 690px;
   background: #EEEEEE;
 
-  @media screen and (max-width:1200px) {
+  @media screen and (max-width:1000px) {
     display: flex;
-
-    .about-right {
+    .about-content{
+      width: auto !important;
+      .about-right {
       display: none;
     }
+    }
+    
   }
   
 }
 
+
 .about .about-content {
-  max-width: 1200px;
+  width: 1200px;
   margin: 0 auto;
   height: 100%;
   // border: 1px solid #021d8b;
   
 }
-
 .about .about-content .about-right {
   float: right;
   margin-top: 156px;
+  width: 650px;
 }
 
 .about .about-content .about-left {
@@ -1555,6 +1570,8 @@ a.news {
 //   box-shadow: 5px 5px 30px #0880e2;
 // }
 
+
+
 .productt {
   width: 100%;
   height: 1000px;
@@ -1565,7 +1582,14 @@ a.news {
   width: 1200px;
   margin: 0 auto;
 }
-
+@media (max-width:1280px) {
+  .productt{
+    height: 800px;
+  }
+  .productt .productt-content {
+    width: 1000px;
+  }
+}
 .productt .productt-content .productt-title {
   text-align: center;
   padding-top: 72px;
@@ -1607,6 +1631,12 @@ a.news {
   -moz-box-sizing: border-box;
   -o-box-sizing: border-box;
 }
+@media (max-width:1280px) {
+  .productt .productt-content .pg-1 li {
+    margin-right: 50px;
+    padding-bottom: 70px;
+  }
+}
 
 .productt .productt-content .pg-1 li:nth-child(3) {
   margin-right: 0px;
@@ -1621,6 +1651,16 @@ a.news {
   top:21px;
 }
 
+@media (max-width:1280px) {
+  .productt .productt-content .pg-1 li a {
+    display: inline-block;
+    width: 300px;
+    height:240px;
+    text-align: center;
+    position: relative;
+    top: 32px;
+  }
+}
 
 .productt .productt-content ul .mask {
   position: absolute;
@@ -1686,6 +1726,11 @@ a.news {
     
   }
 }
+@media (max-width:1280px) {
+  .productt .productt-content .pg-1 .mask>.mask-content{
+    padding: 55px 50px;
+  }
+}
 
 .productt .productt-content .pg-2 .mask>p,
 .productt .productt-content .pg-3 .mask>p {
@@ -1703,12 +1748,24 @@ a.news {
   width: 360px;
   height: 288px;
 }
+@media (max-width:1280px) {
+  .productt .productt-content .pg-1 .mask img{
+    width: 300px;
+    height: 240px;
+  }
+}
 .productt .productt-content .pg-1 .mask .mask-cover{
   width: 360px;
   height: 288px;
   background: #294982;
   opacity: 0.6;
 }
+@media (max-width:1280px) {
+  .productt .productt-content .pg-1 .mask .mask-cover{
+    width: 300px;
+    height: 240px;
+  }
+}
 
 .productt .productt-content .pg-1 .mask .more {
   position: absolute;
@@ -1864,7 +1921,8 @@ a.news {
 .customer .customer-content .customer-title {
   text-align: center;
   padding-top: 50px;
-
+  width: 1000px;
+  margin: auto;
 }
 
 .customer .customer-content .customer-title>h2 {
@@ -1926,7 +1984,15 @@ opacity: 1;
     justify-content: space-around;
   }
 }
-
+@media (max-width:1280px) {
+    .logo_div{
+      width: 1000px;
+      margin: auto;
+      img{
+        margin: 0 32px 50px;
+      }
+    }
+}
 .imghover {
   box-shadow: -10px 0px 40px rgba(9, 126, 222, 0.1),
     10px 0 40px rgba(9, 126, 222, 0.1),
@@ -2157,12 +2223,20 @@ line-height: 48px;
       width: 480px;
       height: 474px;
       img {
-        margin-top: 80px;
-        height: 172px;
+        margin-top: 90px;
+        // height: 172px;
+        width: 70%;
+        margin-left: 15%;
+      }
+      p{
+        margin-top: 30px;
+        font-size: 19px;
+        font-weight: 600;
+        text-align: center;
       }
       div {
         text-align: center;
-        padding-top: 75px;
+        padding-top: 95px;
         height: 47px;
         font-size: 30px;
         font-family: Alibaba Sans;
@@ -2198,18 +2272,26 @@ line-height: 48px;
         right:0px;
         z-index: 1;
       }
-    }
-    // 右侧
+    } 
+    // 右侧 /simulia
     .pc1-right {
       width: 480px;
       height: 474px;
       img {
         margin-top: 80px;
-        height: 172px;
+        // height: 172px;
+        width: 70%;
+        margin-left: 15%;
+      }
+      p{
+        font-size: 19px;
+        font-weight: 600;
+        text-align: center;
+        margin-top: 30px;
       }
       div {
         text-align: center;
-        padding-top: 75px;
+        padding-top: 95px;
         height: 47px;
         font-size: 30px;
         font-family: Alibaba Sans;
@@ -2309,13 +2391,15 @@ line-height: 48px;
       margin-top: 40px;
       padding-left: 30px;
       width: 100%;
-      height: 43px;
-      font-size: 14px;
+      font-size: 20px;
       font-family: Microsoft YaHei;
       font-weight: 400;
-      line-height: 24px;
+      line-height: 30px;
       color: #232323;
       opacity: 1;
+      p{
+        padding-bottom: 5px;
+      }
     }
   }
   .pc1-advert {
@@ -3061,176 +3145,7 @@ line-height: 48px;
     }
   }
 }
-@media  (max-width:1400px) {
-  .pc1{
-    width: 1200px;
-    // 首屏导航
-    .pc1-top{
-      display: flex;
-      .pc1-left{
-        width: 65%;
-        height: auto;
-        margin-right: 87px;
-      }
-      .pc1-right{
-        img{
-          margin-top: 80px;
-        }
-        div{
-          padding-top: 64px;
-          height: auto;
-        }
-      }
-    }
-    // 产品简介
-    // 背景图
-    .pc1-advert{
-      img{
-        width: 1200px;
-      }
-      div{
-        top:106px;
-      }
-    }
-    //应对问题
-    .pc1-problems{
-      .pc1-problems-border{
-        .pc1-problems-module{
-          .pc1-problems-box {
-            div{
-              height: 232px;
-              img{
-                left: 30px;
-                width: 36%;
 
-              }
-            }
-          }
-        }
-      }
-
-    }
-    // 功能模块
-    .pc1-function{
-      .pc1-function-border{
-        padding-left: 0;
-        padding-right: 0;
-      }
-    }
-    // 应用场景
-      // 5
-      .pc1-scene{
-        .pc1-scene-lication{
-          .pc1-scene-lt{
-            .pc1-scene-back1{
-            width: 395px;
-            height: 340px;
-            img{
-              width: 395px;
-              height: 340px;
-            }
-            div{
-              width: 100%;
-            }
-          }
-          .pc1-scene-back2{
-            height: 340px;
-            width: 374px;
-            img{
-              width: 374px;
-              height: 340px;
-            }
-            div{
-              width: 100%;
-            }
-          }
-          .pc1-scene-back3{
-            width: 374px;
-            height: 340px;
-            img{
-              width: 374px;
-              height: 340px;
-            }
-            div{
-              width: 100%;
-            }
-          }
-          .pc1-scene-catia1{
-            width: 612px;
-            height: 340px;
-            img{
-              width: 100%;
-              height: 100%;
-            }
-            div{
-              width: 100%;
-            }
-          }
-          .pc1-scene-catia2{
-            width: 552px;
-            height: 340px;
-            img{
-              width: 100%;
-              height: 100%;
-            }
-            div{
-              width: 100%;
-            }
-          }
-          }
-          .pc1-scene-lb{
-            .pc1-scene-tail1{
-              width: 510px;
-              height: 340px;
-              img{
-                width: 100%;
-                height: 100%;
-              }
-              div{
-                width: 100%;
-              }
-            }
-            .pc1-scene-tail2{
-              width: 654px;
-              height: 340px;
-              img{
-                width: 100%;
-                height: 100%;
-              }
-              div{
-                width: 100%;
-              }
-            }
-          }
-          
-        }
-      }
-  }
-}
-//应用价值  
-.pc1-lication{
-  .pc1-lication-layout{
-    display: flex;
-    margin-bottom: 21px;
-    h4{
-      display: flex;
-      flex-direction: column-reverse;
-      padding-left: 14px;
-      height: 50px;
-      font-size: 14px;
-      font-family: Microsoft YaHei;
-      font-weight: 400;
-      color: #232323;
-      opacity: 1;
-    }
-  }
-  .pc1-lication-layout:nth-child(2n-1){
-    padding-left: 540px;
-  }
-  .pc1-lication-layout:nth-child(2n){
-    padding-left: 440px;
-  }
-}
 
 .card1{
   width: 220px;
@@ -3281,8 +3196,8 @@ line-height: 48px;
   }
   h4 {
     text-align: center;
-    padding: 0px 30px;
-    height: 60px;
+    // padding: 0px 30px;
+    height: 50px;
     font-size: 20px;
     font-family: Microsoft YaHei;
     font-weight: bold;
@@ -3302,12 +3217,13 @@ line-height: 48px;
     text-align: justify;
   }
 }
-.card3 {
+.card3 {//expe页面核心要素
   width: 220px;
   background: #ffffff;
   box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.16);
   opacity: 1;
   border-radius: 10px;
+  padding: 0 16px;
   .card3-url{
     height: 100px !important;
     display: flex;
@@ -3325,7 +3241,6 @@ line-height: 48px;
     // margin: auto 30px;
   }
   .card3-content {
-    text-align: center;
     font-size: 14px;
     font-family: Microsoft YaHei;
     font-weight: 400;
@@ -3357,6 +3272,624 @@ line-height: 48px;
 }
 
 
+// p1
+.pc11{
+  width: 100%;
+  .research-top{//头部导航
+    max-width: 1400px;
+    min-width: 1100px;
+    width: 80%;
+    margin:100px auto 80px;
+    .research-right{
+      height: 100%;
+      padding-left: 10%;
+      .research-top1{
+        height: 120px;
+        max-height: 120px;
+        min-height: 94px;
+        height: 7.5rem;
+      }
+      h4{
+        font-size: 30px;
+        text-align: center;
+        padding-bottom: 20px;
+      }
+      .research-bottom1{
+        font-size: 23px;
+        line-height: 25px;
+        padding-left: 30px;
+      }
+    }
+  }
+  .mauto-1{
+    max-width: 1100px;
+    min-width: 1000px;
+    width: 80%;
+    .mauto-url{
+      position: relative;
+      padding-bottom: 150px;
+      .mauto-image1-1{
+        display: flex;
+        flex-direction: row-reverse;
+        img{
+          width: 70%;
+        }
+      }
+      .mauto-image1-2{
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        img{
+          width: 80%;
+        }
+      }
+    }
+    .mauto-size{
+      height: 48px;
+      font-size: 18px;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      color: #232323;
+      opacity: 1;
+    }
+  }
+
+  .research-1{//上下布局
+    max-width: 1100px;
+    min-width: 1000px;
+    margin: auto;
+    width: 80%;
+    img{
+      width: 100%;
+    }
+    div{
+      font-size: 20px;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      color: #232323;
+      opacity: 1;
+    }
+  }
+  .research-2{
+    max-width: 1100px;
+    min-width: 1000px;
+    margin: auto;
+    width: 80%;
+    img{
+      width: 100%;
+    }
+    .research-ul{
+        .research-li{
+          font-size: 20px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #232323;
+          opacity: 1;
+          line-height: 30px;
+        }
+    }
+  }
+  // 骨架
+  .skeleton-top{
+    max-width: 1400px;
+    min-width: 1100px;
+    margin: 100px auto 80px;
+    .skeleton-right{
+      text-align: center;
+      .skeleton-top1{
+        max-height: 120px;
+        min-height: 94px;
+        height: 7.5rem;
+      }
+      h4{
+        font-size: 30px;
+        text-align: center;
+        padding-bottom: 40px;
+      }
+      .skeleton-bottom1{
+        font-size: 23px;
+        line-height: 25px;
+        padding-left: 30px;
+      }
+    }
+  }
+
+  
+  .skeleton-2{
+    max-width: 1100px;
+    min-width: 1000px;
+    width: 80%;
+    img{
+      width: 100%;
+    }
+    .skeleton-ol{
+      display: flex;
+      justify-content: space-evenly;
+      div{
+        font-size: 18px;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        color: #232323;
+        opacity: 1;
+      }
+    }
+  }
+
+
+}
+
+
+
+
+
+
+// product
+.pc11{
+  width: 100%;
+  .pc1-top1-2{//顶部
+    display: flex;
+    justify-content: space-between;
+    width: 80%;
+    min-width: 1100px;
+    max-width: 1400px;
+    max-height: 474px;
+    height: 29.625rem;
+    min-height: 372px;
+    margin:100px auto 80px;
+    // padding-bottom: 5rem;
+    .pc1-left1-2{
+      width: 62%;
+      flex-shrink:0;
+      img{
+        width: 100%;
+      }
+    }
+    .back-ground{//simulia
+      width: 65%;
+      position: relative;
+      .back-bottom{
+        width: 100%;
+        height: 280px;
+        position: absolute;
+        bottom: 0;
+        display: flex;
+        justify-content: space-between;
+      }
+      img{
+        width: 100%;
+      }
+      .back-ground1{
+        position: absolute;
+        top: 0;
+        left: 20%;
+        z-index: 1;
+        width: 24.75rem;
+        max-width: 396px;
+        min-width: 311px;
+
+        // height: 15.75rem;
+        // max-height: 252px;
+        // min-height: 198px;
+      }
+      .back-ground2{
+        padding-right: 10px;
+        width: 30.0625rem;
+        max-width: 481px;
+        min-width: 377px;
+        // height: 17.5rem;
+        // max-height: 280px;
+        // min-height: 220px;
+        display: flex;
+        flex-direction: column-reverse;
+      }
+      .back-ground3{
+        max-width: 411px;
+        min-width: 322px;
+        width: 25.6875rem;
+        // max-height: 194px;
+        // min-height: 152px;
+        // height: 12.125rem;
+        display: flex;
+        flex-direction: column-reverse;
+      }
+    }
+    .pc1-right1-2{
+      width: 35%;
+      img{
+        width: 70%;
+        margin-top: 80px;
+        margin-left: 15%;
+      }
+      p{
+        margin-top: 30px;
+        font-size: 19px;
+        font-weight: 600;
+        text-align: center;
+      }
+      div{
+        text-align: center;
+        padding-top: 95px;
+        height: 47px;
+        line-height: 40px;
+        font-size: 30px;
+        font-family: Alibaba Sans;
+        font-weight: 900;
+        color: #232323;
+        opacity: 1;
+      }
+    }
+  }
+  .pc1-head1-2{//指示
+    width: 80%;
+    max-width: 1400px;
+    min-width: 1100px;
+    margin: auto ;
+    align-items: center;
+    height: auto;
+    // padding-bottom: 3.75rem;
+    .pc1-head-left1{
+      width: 100%;
+      height: 2px;
+      background: linear-gradient(297deg, #294982 0%, rgba(255, 255, 255, 0) 100%);
+      opacity: 1;
+      border-radius: 0px;
+    }
+    h4{
+      width: 100%;
+      font-size: 32px;
+      text-align: center;
+    }
+    .pc1-head-right1{
+      width: 100%;
+      height: 2px;
+      background: linear-gradient(63deg, #294982 0%, rgba(255, 255, 255, 0) 100%);
+      opacity: 1;
+      border-radius: 0px;
+    }
+  }
+  .pc1-product1-2{//产品简介
+    width: 80%;
+    max-width: 1400px;
+    min-width: 1100px;
+    margin: auto;
+    padding-bottom: 80px;
+    .instructions{
+      margin-bottom: 40px;
+    }
+    .pc1-pr-content{
+      p{
+        text-indent: 40px;
+        max-width: 1400px;
+        width: 100%;
+        height: auto;
+        font-size: 20px;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        line-height: 35px;
+        color: #232323;
+        opacity: 1;
+      }
+    }
+  }
+  .pc1-advert1-2{//背景图
+    width: 80%;
+    max-width: 1400px;
+    min-width: 1100px;
+    margin:auto;
+    img{
+      width: 100%;
+    } 
+  }
+  .pc1-advert1-3{//背景图expe
+    width: 80%;
+    max-width: 1400px;
+    min-width: 1100px;
+    margin: auto;
+    position: relative;
+    img{
+      width: 100%;
+    }
+    div{
+      position: absolute;
+      top: 0;
+      margin: auto 0;
+      left: 200px;
+      right: 0;
+      bottom: 0;
+      width: 275px;
+      height: 71px;
+      font-size: 24px;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      line-height: 40px;
+      color: #FFFFFF;
+      opacity: 1;
+      span{
+        font-weight: 600;
+      }
+    }
+  }
+  .pc1-core1-2{//核心要素
+    width: 80%;
+    max-width: 1400px;
+    min-width: 1100px;
+    margin: auto;
+    .pc1-core-border{
+      display: flex;
+      justify-content: space-evenly;
+      .pc1-core-box{
+        width: 220px;
+        height: 300px;
+      }
+    }
+  }
+  .pc1-problems{//应对问题
+    width: 80%;
+    max-width: 1400px;
+    min-width: 1100px;
+    margin: auto;
+    .pc1-problems-border{
+      position: relative;
+      .pc1-problems-module{
+        position: absolute;
+        top: 0;
+        width: 100%;
+        display: flex;
+        justify-content: space-evenly;
+        .pc1-problems-box{
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+          .empty{
+            max-height:192px ;
+            height: 11.5rem;
+            min-height: 137px;
+          }
+          .img-size{
+            max-width: 50px;
+            width: 3.125rem;
+            min-width: 35px;
+            margin: auto  ; 
+            padding-bottom: 10px;           
+            img{
+              width: 100%;
+            }
+          }
+          h4{
+            display: flex;
+            flex-direction: column;
+            width: 96px;
+            height: 42px;
+            font-size: 16px;
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            color: #232323;
+            opacity: 1;
+            text-align: center;
+          }
+        }
+      }
+    }
+    .pc1-problems-border1{
+      .pc1-problems-module{
+        display: flex;
+        justify-content: space-evenly;
+        .pc1-problems-box{
+          width: 200px;
+          .img-size2{
+            max-width: 56px;
+            min-width: 40px;
+            width: 3.5rem;
+            margin:auto;
+            img{
+              width: 100%;
+            }
+          }
+          h4{
+            width: 100%;
+            text-align: center;
+            font-size: 14px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #232323;
+            opacity: 1;
+          }
+        }
+      }
+    }
+  }
+  .pc1-function{//功能模块
+    width: 80%;
+    max-width: 1400px;
+    min-width: 1100px;
+    margin: auto;
+    .pc1-function-border{
+      display: flex;
+      justify-content: space-around;
+      .pc1-function-box1{
+        min-width: 200px;
+        min-height: 290px;
+        width: 12.5rem;
+        max-width: 220px;
+        max-height: 300px;
+      }
+    }
+  }
+  .pc1-function1{//demlia页面
+    width: 80%;
+    max-width: 1400px;
+    min-width: 1100px;
+    margin: auto;
+    .pc1-function-border1{
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      .empty{
+        height: 60px;
+      }
+      .function-top{
+        display: flex;
+        justify-content: space-around;
+        .function-border{
+          width: 220px;
+          height: 240px;
+          background: #FFFFFF;
+          box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.16);
+          opacity: 1;
+          border-radius: 10px;
+          .function-url{
+            height: 100px;
+            width: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            img{
+              width: auto;
+              height: auto;
+            }
+          }
+          h4{
+            text-align: center;
+            font-size: 20px;
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            color: #294982;
+            opacity: 1;
+          }
+          .function-p{
+            padding-top: 34px;
+            font-size: 14px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #232323;
+            opacity: 1;
+            text-align: center;
+          }
+        }
+      }
+    }
+
+  }
+  //应用价值  
+.pc1-lication{
+  width: 80%;
+  max-width: 1400px;
+  min-width: 1100px;
+  margin: auto;
+  .pc1-lication-layout{
+    display: flex;
+    margin-bottom: 21px;
+    h4{
+      width: 430px;
+      display: flex;
+      flex-direction: column-reverse;
+      padding-left: 14px;
+      height: 50px;
+      font-size: 14px;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      color: #232323;
+      opacity: 1;
+    }
+   
+  }
+  .pc1-lication-layout:nth-child(2n-1){
+    .layout-left{
+      width: 38%;
+      max-width: 540px;
+      min-width: 418px;
+      
+    }
+  }
+  
+  .pc1-lication-layout:nth-child(2n){
+    .layout-left{
+      width: 31%;
+      max-width: 440px;
+      min-width: 341px;
+    }
+  }
+}
+
+  .pc1-scene{//应用场景  4
+    width: 80%;
+    max-width: 1400px;
+    min-width: 1100px;
+    margin: auto;
+    padding-bottom: 80px;
+    .pc1-scene-lication{//4
+      display: flex;
+      flex-direction: column;
+      .pc1-scene-top{
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 30px;
+        .pc1-scene-top-pr1{
+          margin-right: 30px
+        }
+        .op-b{
+          position: relative;
+          div{
+            position: absolute;
+            bottom: 0;
+            width: 100%;
+            height: 45px;
+            background: rgba(41, 73, 130, 0.5);
+            // opacity: 0.5;
+            border-radius: 0px;
+            text-align: center;
+            line-height: 45px;
+            span{
+              font-size: 14px;
+              font-family: Microsoft YaHei;
+              font-weight: bold;
+              line-height: 0px;
+              color: #FFFFFF;
+              opacity: 1;
+            }
+          }
+
+        }
+      }
+      .pc1-scene-bottom{
+        display: flex;
+        justify-content: space-between;
+        .pc1-scene-top-pr3{
+          margin-right: 30px;
+        }
+        .op-b{
+          position: relative;
+          div{
+            position: absolute;
+            bottom: 0;
+            width: 100%;
+            height: 45px;
+            background: rgba(41, 73, 130, 0.5);
+            // opacity: 0.5;
+            border-radius: 0px;
+            text-align: center;
+            line-height: 45px;
+            span{
+              font-size: 14px;
+              font-family: Microsoft YaHei;
+              font-weight: bold;
+              line-height: 0px;
+              color: #FFFFFF;
+              opacity: 1;
+            }
+          }
+
+        }
+      }
+    }
+  }
+  .instructions{
+    margin-top:80px;
+    margin-bottom: 60px 
+  }
+}
+
 
 @import url("./phone");
 @import url("./extra");

src/assets/theme/product.less

@@ -626,6 +626,17 @@
     }
   }
 }
+@media (max-width:1280px) {
+    .home-news{
+      width: 1000px;
+      .home-news-right{
+        width: 440px;
+        .see-more{
+          margin: 60px 0 0 385px;
+        }
+      }
+    }
+}
 .details-news{
   width: 1200px;
   margin: 65px auto 100px;

src/pages/index.vue

@@ -53,7 +53,7 @@
             </div>  
           </div>
           <div class="about-right">
-            <img src="/image/index/0102.png" width="680px" alt="" />
+            <img src="/image/index/0102.png" width="100%" alt="" />
             </div>
         </div>
       </section>
@@ -388,7 +388,7 @@
           </Carousel>
         </div>
       </div>
-      <div class="home-news" style="width:1200px;margin:50px auto">
+      <div class="home-news">
             <img src="/image/index/0113.png" alt="" />
             <div class="home-news-right">
               <h5>信息动态

src/pages/p1/electromechanical.vue

 <template>
-  <div class="pc1">
+  <div class="pc11">
     <div class="research-top">
       <Row>
           <Col span="14">
@@ -7,8 +7,9 @@
           </Col>
           <Col span="10">  
           <div class="research-right">
+            <div class="research-top"></div>
             <h4>{{ product.title1 }}</h4>
-            <div>{{ product.title2 }}</div>
+            <div class="research-bottom">{{ product.title2 }}</div>
           </div>
           </Col>
       </Row>

src/pages/product/catia.vue

 <template>
   <div>
-    <div class="pc1">
-      <div class="pc1-top mt">
-        <div class="pc1-left" style="position:relative">
-          <img :src="product[i].url1" width="125%" alt="" />
+    <div class="pc11">
+      <div class="pc1-top mt pc1-top1-2">
+        <div class="pc1-left pc1-left1-2" style="position:relative">
+          <img :src="product[i].url1" alt="" />
         </div>
-        <div class="pc1-right" style="width:35%;position:relative;">
-          <img :src="product[i].url2" width="100%" alt="" />
+        <div class="pc1-right pc1-right1-2">
+          <img :src="product[i].url2" alt="" />
+          <p>
+            SHAPE THE WPRLD WE LIVE IN
+          </p>
           <div>
             {{ product[i].title }}
           </div>
         </div>
       </div>
-      <div class="pc1-head">
-        <div class="pc1-head-left"></div>
+      <div class="pc1-head1-2 pc1-head">
+         <Row  align="middle" class-name="row">
+          <Col span="7"><div class="pc1-head-left1"></div></Col>
+          <Col span="10"><h4 >{{ product[i].top }}</h4></Col>
+          <Col span="7"><div class="pc1-head-right1"></div></Col>
+        </Row>
+        <!-- <div class="pc1-head-left"></div>
         <h4 id="pc1-head-middle">{{ product[i].top }}</h4>
-        <div class="pc1-head-right"></div>
+        <div class="pc1-head-right"></div> -->
       </div>
       <!-- 产品简介 -->
-      <div class="pc1-product">
+      <div class="pc1-product1-2 pc1-product">
         <div class="instructions">
           <h4>产品简介</h4>
           <p class="beijng">INTRODUCTION</p>
@@ -29,11 +37,11 @@
         </div>
       </div>
       <!-- 背景图 -->
-      <div class="pc1-advert">
+      <div class="pc1-advert1-2 pc1-advert">
         <img :src="product[i].advert.img" alt="" />
       </div>
       <!-- 核心要素 -->
-      <div class="pc1-core">
+      <div class="pc1-core1-2 pc1-core">
         <div class=" instructions">
           <h4>核心要素</h4>
           <p>CORE ELEMENTS</p>
@@ -63,8 +71,9 @@
               class="pc1-problems-box "
               v-for="(item, index) in product[i].problems.catia"
               :key="index"
-            >
-              <div>
+            > 
+            <div class="empty"></div>
+              <div class="img-size">
                 <img :src="item.url" alt="" />
               </div>
               <h4>{{ item.title }}</h4>
@@ -96,55 +105,28 @@
           <h4>应用场景</h4>
           <p>ADAPTATION SCENARIOS</p>
         </div>
+
         <div class="pc1-scene-lication">
-          <div class="pc1-scene-lt">
-            <div class="pc1-scene-catia1 pl">
-              <img
-                width="720px"
-                height="400px"
-                :src="product[i].icon.catia.url1"
-                alt=""
-              />
-              <div>
-                <span>{{ product[i].icon.catia.title1 }}</span>
-              </div>
+            <div class="pc1-scene-top">
+                <div class="pc1-scene-top-pr1 op-b">
+                    <img :src="product[i].icon.catia.url1" width="100%" height="100%" alt="">
+                    <div><span>{{ product[i].icon.catia.title1 }}</span></div>
+                </div>
+                <div class="op-b">
+                    <img :src="product[i].icon.catia.url2" width="100%" height="100%" alt="">
+                    <div><span>{{ product[i].icon.catia.title2 }}</span></div>
+                </div>
             </div>
-            <div class="pc1-scene-catia2 pl">
-              <img
-                width="650px"
-                height="400px"
-                :src="product[i].icon.catia.url2"
-                alt=""
-              />
-              <div>
-                <span>{{ product[i].icon.catia.title2 }}</span>
-              </div>
+            <div class="pc1-scene-bottom">
+                <div class="pc1-scene-top-pr3 op-b">
+                    <img :src="product[i].icon.catia.url3" width="100%" height="100%" alt="">
+                    <div><span>{{ product[i].icon.catia.title3 }}</span></div>
+                </div>  
+                <div class="op-b">
+                    <img :src="product[i].icon.catia.url4" width="100%" height="100%" alt="">
+                    <div><span>{{ product[i].icon.catia.title4 }}</span></div>
+                </div>
             </div>
-          </div>
-          <div class="pc1-scene-lb">
-            <div class="pc1-scene-tail1">
-              <img
-                width="600px"
-                height="400px"
-                :src="product[i].icon.catia.url3"
-                alt=""
-              />
-              <div>
-                <span>{{ product[i].icon.catia.title3 }}</span>
-              </div>
-            </div>
-            <div class="pc1-scene-tail2">
-              <img
-                width="770px"
-                height="400px"
-                :src="product[i].icon.catia.url4"
-                alt=""
-              />
-              <div>
-                <span>{{ product[i].icon.catia.title4 }}</span>
-              </div>
-            </div>
-          </div>
         </div>
       </div>
     </div>

src/pages/product/delmia.vue

 <template>
   <div>
-    <div class="pc1">
-      <div class="pc1-top mt">
-        <div class="pc1-left">
-          <img :src="product[i].url1" width="100%" height="100%" alt="" />
+    <div class="pc11">
+      <div class="pc1-top mt pc1-top1-2">
+        <div class="pc1-left pc1-left1-2">
+          <img :src="product[i].url1" height="100%" alt="" />
         </div>
-        <div class="pc1-right">
-          <img :src="product[i].url2" width="100%" height="50%" alt="" />
-          <div>
-            {{ product[i].title }}
-          </div>
+        <div class="pc1-right pc1-right1-2">
+          <img :src="product[i].url2" alt="" />
+          <p>MAKE IT HAPPEN</p>
+          <div style="padding-top:71px;line-height:47px">数字化企业的互动<br> 制造应用软件</div>
+
         </div>
       </div>
-      <div class="pc1-head">
-        <div class="pc1-head-left"></div>
-        <h4 id="pc1-head-middle">{{ product[i].top }}</h4>
-        <div class="pc1-head-right"></div>
+      <div class="pc1-head pc1-head1-2">
+        <Row  align="middle" class-name="row">
+          <Col span="7"><div class="pc1-head-left1"></div></Col>
+          <Col span="10"><h4 >{{ product[i].top }}</h4></Col>
+          <Col span="7"><div class="pc1-head-right1"></div></Col>
+        </Row>
       </div>
       <!-- 产品简介 -->
-      <div class="pc1-product">
+      <div class="pc1-product pc1-product1-2">
         <div class="instructions">
           <h4>产品简介</h4>
           <p class="beijng">INTRODUCTION</p>
@@ -29,11 +31,11 @@
         </div>
       </div>
       <!-- 背景图 -->
-      <div class="pc1-advert">
+      <div class="pc1-advert pc1-advert1-2">
         <img :src="product[i].advert.img" alt="" />
       </div>
       <!-- 核心要素 && 关键步骤 -->
-      <div class="pc1-core">
+      <div class="pc1-core pc1-core1-2">
         <div class=" instructions">
           <h4>关键步骤</h4>
           <p>COMMITTED STEP</p>
@@ -56,16 +58,16 @@
           <h4>应对问题</h4>
           <p>COPING WITH PROBLEMS</p>
         </div>
-        <div class="pc1-problems-border" style="height:500px">
-          <!--height临时使用-->
+        <div class="pc1-problems-border">
           <img :src="product[i].problems.url" width="100%" alt="" />
           <div class="pc1-problems-module">
             <div
               class="pc1-problems-box "
               v-for="(item, index) in product[i].problems.catia"
               :key="index"
-            >
-              <div>
+            > 
+            <div class="empty"></div>
+              <div class="img-size">
                 <img :src="item.url" alt="" />
               </div>
               <h4>{{ item.title }}</h4>
@@ -74,24 +76,32 @@
         </div>
       </div>
       <!-- 功能模块 -->
-      <div class="pc1-function">
+      <div class="pc1-function1">
         <div class="instructions">
           <h4>功能模块</h4>
           <p>FUNCTION MODUL</p>
         </div>
-        <div class="pc1-function-border window">
-          <div
-            class="frame pc1-function-frame"
-            v-for="(item, index) in product[i].function"
-            :key="index"
-          >
-            <div class="pc1-function-box card3">
-              <div class="card3-url">
-                <img :src="item.url" alt="" />
+        <div class="pc1-function-border1 ">
+          <div class="function-top">
+              <div v-for="(item,index) in product[i].function1" :key="index" class="function-border">
+                <div class="function-url">
+                  <img  :src="item.url" alt="" />
+                </div>
+                <h4>{{ item.title }}</h4>
+                <div class="function-p">{{ item.content }}</div>
+              </div>
+          </div>
+          <div class="empty">
+
+          </div>
+          <div class="function-top">
+            <div v-for="(item,index) in product[i].function2" :key="index" class="function-border">
+                <div class="function-url">
+                  <img  :src="item.url" alt="" />
+                </div>
+                <h4>{{ item.title }}</h4>
+                <div class="function-p">{{ item.content }}</div>
               </div>
-              <h4>{{ item.title }}</h4>
-              <div class="card3-content">{{item.content}}</div>
-            </div>
           </div>
         </div>
       </div>
@@ -103,8 +113,10 @@
         </div>
         <div class=" mt mb">
           <div class="pc1-lication-layout" v-for="(item,index) in product[i].lication" :key="index">
+            <div class="layout-left"></div>
             <img :src="item.url" alt="">
             <h4>{{item.content}}</h4>
+            <div class="layout-right"></div>
         </div>
         </div>
       </div>
@@ -177,7 +189,7 @@ export default {
             ]
           },
           //功能模块
-          function: [
+          function1:[
             {
               url: "/image/delmia/0441.png",
               title: "DPE",
@@ -193,6 +205,9 @@ export default {
               title: "PDM",
               content: "面向装配过程分析"
             },
+          ],
+          function2: [
+            
             {
               url: "/image/delmia/0444.png",
               title: "Human",
@@ -211,26 +226,31 @@ export default {
           ],
           // 应用价值
           lication: [
-            {
+            { 
               url:"/image/delmia/0451.png",
-              content: "可以根据工厂实际情况，定制自己的工艺层次结构和资源库"
+              content: "可以根据工厂实际情况，定制自己的工艺层次结构和资源库",
+              span:"",
             },
             {
               url:"/image/delmia/0452.png",
               content:
-                "进行详细的工业工程时间和成本的预先分析，计算出最佳经济方案"
+                "进行详细的工业工程时间和成本的预先分析，计算出最佳经济方案",
+                span:"",
             },
             {
               url:"/image/delmia/0453.png",
-              content: "减少工艺设计和工业工程管理中的重复工作，提高了重用率"
+              content: "减少工艺设计和工业工程管理中的重复工作，提高了重用率",
+              span:"",
             },
             {
               url:"/image/delmia/0454.png",
-              content: "减少工艺规划时间，提高规划质量"
+              content: "减少工艺规划时间，提高规划质量",
+              span:"",
             },
             {
               url:"/image/delmia/0455.png",
-              content: "预见并减少规划风险，减少工程更改成本"
+              content: "预见并减少规划风险，减少工程更改成本",
+              span:"",
             }
           ]
         }
@@ -248,22 +268,4 @@ export default {
 };
 </script>
 <style lang="less" scope>
-.pc1-head{
-  .pc1-head-left{
-    width: 430px;
-  }
-  .pc1-head-right{
-    width: 430px;
-  }
-}
-@media (max-width:1400px ) {
-    .pc1-head{
-      .pc1-head-left{
-        width: 340px;
-      }
-      .pc1-head-right{
-        width: 340px;
-      }
-    }
-}
 </style>

src/pages/product/dvia.vue

 <template>
   <div>
-    <div class="pc1">
-      <div class="pc1-top mt">
-        <div class="pc1-left">
+    <div class="pc11">
+      <div class="pc1-top mt pc1-top1-2">
+        <div class="pc1-left pc1-left1-2">
           <img :src="product[i].url1" width="100%" height="100%" alt="" />
         </div>
-        <div class="pc1-right">
-          <img :src="product[i].url2" width="100%" height="50%" alt="" />
+        <div class="pc1-right pc1-right1-2">
+          <img :src="product[i].url2" alt="" />
+          <P>PLAN YOUR DEFINITION OF SUCCESS</P>
           <div style="padding-top:71px;line-height:47px">智能3D空间规划<br> 解决方案</div>
         </div>
       </div>
-      <div class="pc1-head" ref="demo">
-        <div class="pc1-head-left" ></div>
-        <h4 id="pc1-head-middle">{{ product[i].top }}</h4>
-        <div class="pc1-head-right"></div>
+      <div class="pc1-head pc1-head1-2">
+         <Row  align="middle" class-name="row">
+          <Col span="7"><div class="pc1-head-left1"></div></Col>
+          <Col span="10"><h4 >{{ product[i].top }}</h4></Col>
+          <Col span="7"><div class="pc1-head-right1"></div></Col>
+        </Row>
       </div>
       <!-- 产品简介 -->
-      <div class="pc1-product">
+      <div class="pc1-product pc1-product1-2">
         <div class="instructions">
           <h4>产品简介</h4>
           <p class="beijng">INTRODUCTION</p>
@@ -27,7 +30,7 @@
         </div>
       </div>
       <!-- 背景图 -->
-      <div class="pc1-advert">
+      <div class="pc1-advert pc1-advert1-2">
         <img :src="product[i].advert.img" alt="" />
       </div>
 
@@ -39,11 +42,11 @@
         </div>
         <div class="pc1-function-border">
           <div
-            class="pc1-function-box card2"
+            class="pc1-function-box1 card2"
             v-for="(item, index) in product[i].function"
             :key="index"
           >
-            <img :src="item.url" alt="" />
+            <img width="50px" height="50px" :src="item.url" alt="" />
             <h4>{{ item.title }}</h4>
             <div>{{ item.content }}</div>
           </div>
@@ -56,33 +59,33 @@
           <p>APPLICATION SCEMARIOS</p>
         </div>
         <div class="pc1-scene-lication">
-          <div class="pc1-scene-lt">
-            <div class="pc1-scene-back1">
-              <img width="460px" height="400px" :src="product[i].icon.catia.url1" alt="" />
-              <div><span>高科技</span></div>
+            <div class="pc1-scene-top">
+                <div class="pc1-scene-top-pr1 op-b">
+                    <img :src="product[i].icon.catia.url1" width="100%" height="100%" alt="">
+                    <div><span>{{ product[i].icon.catia.title1 }}</span></div>
+                </div>
+                <div class="op-b pc1-scene-top-pr1">
+                    <img :src="product[i].icon.catia.url2" width="100%" height="100%" alt="">
+                    <div><span>{{ product[i].icon.catia.title2 }}</span></div>
+                </div>
+                <div class="op-b">
+                    <img :src="product[i].icon.catia.url3" width="100%" height="100%" alt="">
+                    <div><span>{{ product[i].icon.catia.title3 }}</span></div>
+                </div>
             </div>
-            <div class="pc1-scene-back2">
-              <img width="440px" height="400px" :src="product[i].icon.catia.url2" alt="" />
-              <div><span>航空航天与国防</span></div>
+            <div class="pc1-scene-bottom">
+                <div class="pc1-scene-top-pr3 op-b">
+                    <img :src="product[i].icon.catia.url4" width="100%" height="100%" alt="">
+                    <div><span>{{ product[i].icon.catia.title4 }}</span></div>
+                </div>  
+                <div class="op-b">
+                    <img :src="product[i].icon.catia.url5" width="100%" height="100%" alt="">
+                    <div><span>{{ product[i].icon.catia.title5 }}</span></div>
+                </div>
             </div>
-            <div class="pc1-scene-back3">
-              <img width="440px" height="400px" :src="product[i].icon.catia.url3" alt="" />
-              <div><span>工业设备</span></div>
-            </div>
-          </div>
-          <div class="pc1-scene-lb">
-            <div class="pc1-scene-tail1">
-              <img width="600px" height="400px" :src="product[i].icon.catia.url4" alt="" />
-              <div><span>建筑工程与施工</span></div>
-            </div>
-            <div class="pc1-scene-tail2">
-              <img width="770px" height="400px" :src="product[i].icon.catia.url5" alt="" />
-              <div><span>汽车与交通运输</span></div>
-            </div>
-          </div>
         </div>
       </div>
-    </div>c  </div>
+    </div>  </div>
 </template>
 
 <script>
@@ -179,22 +182,4 @@ export default {
 };
 </script>
 <style lang="less" scoped>
-.pc1-head{
-  .pc1-head-left{
-    width: 430px;
-  }
-  .pc1-head-right{
-    width: 430px;
-  }
-}
-@media (max-width:1400px ) {
-    .pc1-head{
-      .pc1-head-left{
-        width: 340px;
-      }
-      .pc1-head-right{
-        width: 340px;
-      }
-    }
-}
 </style>

src/pages/product/enovia.vue

 <template>
   <div>
-    <div class="pc1">
-      <div class="pc1-top mt">
-        <div class="pc1-left">
+    <div class="pc11">
+      <div class="pc1-top mt pc1-top1-2">
+        <div class="pc1-left pc1-left1-2">
           <img :src="product[i].url1" width="100%" height="100%" alt="" />
         </div>
-        <div class="pc1-right">
-          <img :src="product[i].url2" width="100%" height="50%" alt="" />
+        <div class="pc1-right pc1-right1-2">
+          <img :src="product[i].url2" alt="" />
+          <P>PLAN YOUR EDFINITION OF SUCCESS</P>
           <div>
             {{ product[i].title }}
           </div>
         </div>
       </div>
-      <div class="pc1-head">
-        <div class="pc1-head-left"></div>
-        <h4 id="pc1-head-middle">{{ product[i].top }}</h4>
-        <div class="pc1-head-right"></div>
+      <div class="pc1-head pc1-head1-2">
+        <Row  align="middle" class-name="row">
+          <Col span="7"><div class="pc1-head-left1"></div></Col>
+          <Col span="10"><h4 >{{ product[i].top }}</h4></Col>
+          <Col span="7"><div class="pc1-head-right1"></div></Col>
+        </Row>
       </div>
       <!-- 产品简介 -->
-      <div class="pc1-product">
+      <div class="pc1-product pc1-product1-2">
         <div class="instructions">
           <h4>产品简介</h4>
           <p class="beijng">INTRODUCTION</p>
@@ -29,22 +32,22 @@
         </div>
       </div>
       <!-- 背景图 -->
-      <div class="pc1-advert">
+      <div class="pc1-advert pc1-advert1-2">
         <img :src="product[i].advert.img" alt="" />
       </div>
       <!-- 核心要素 -->
-      <div class="pc1-core">
+      <div class="pc1-core pc1-function">
         <div class=" instructions">
           <h4>核心要素</h4>
           <p>CORE ELEMENTS</p>
         </div>
-        <div class="pc1-core-border">
+        <div class="pc1-function-border" style="display:flex;justify-content: space-around;">
           <div
-            class="pc1-core-box card2"
+            class="pc1-function-box1 card2"
             v-for="(item, index) in product[i].core"
             :key="index"
           >
-            <img width="50px" height="50px" :src="item.url" alt="" />
+            <img  :src="item.url" alt="" />
             <h4>{{ item.title }}</h4>
             <div>{{ item.content }}</div>
           </div>
@@ -58,13 +61,15 @@
         </div>
        <div class="pc1-problems-border1">
           <img :src="product[i].problems.url" width="100%" alt="" />
-          <div class="enovia">
+          <div class="pc1-problems-module">
             <div
               v-for="(item, index) in product[i].problems.catia"
               :key="index"
-              class="enovia-card"
+              class="pc1-problems-box"
             >
+            <div class="img-size2">
               <img :src="item.url" alt="" />
+            </div>
               <h4>
                 <span v-for="(val, index) in item.title" :key="index"
                   >{{ val }}<br
@@ -82,12 +87,12 @@
         </div>
         <div class="pc1-function-border">
           <div
-            class="pc1-function-box card2"
+            class="pc1-function-box1 card2"
             v-for="(item, index) in product[i].function"
             :key="index"
           >
             <img width="50px" height="50px" :src="item.url" alt="" />
-            <h4>{{ item.title }}</h4>
+            <h4 style="margin:0 20px;">{{ item.title }}</h4>
             <div>{{ item.content }}</div>
           </div>
         </div>
@@ -99,46 +104,26 @@
           <p>ADAPTATION SCENARIOS</p>
         </div>
         <div class="pc1-scene-lication">
-          <div class="pc1-scene-lt">
-            <div class="pc1-scene-catia1 pl">
-              <img
-                width="720px"
-                height="400px"
-                :src="product[i].icon.catia.url1"
-                alt=""
-              />
-              <div><span>{{product[i].icon.catia.title1}}</span></div>
+            <div class="pc1-scene-top">
+                <div class="pc1-scene-top-pr1 op-b">
+                    <img :src="product[i].icon.catia.url1" width="100%" height="100%" alt="">
+                    <div><span>{{ product[i].icon.catia.title1 }}</span></div>
+                </div>
+                <div class="op-b">
+                    <img :src="product[i].icon.catia.url2" width="100%" height="100%" alt="">
+                    <div><span>{{ product[i].icon.catia.title2 }}</span></div>
+                </div>
             </div>
-            <div class="pc1-scene-catia2 pl">
-              <img
-                width="650px"
-                height="400px"
-                :src="product[i].icon.catia.url2"
-                alt=""
-              />
-              <div><span>{{product[i].icon.catia.title2}}</span></div>
-            </div>
-          </div>
-          <div class="pc1-scene-lb">
-            <div class="pc1-scene-tail1">
-              <img
-                width="600px"
-                height="400px"
-                :src="product[i].icon.catia.url3"
-                alt=""
-              />
-              <div><span>{{product[i].icon.catia.title3}}</span></div>
+            <div class="pc1-scene-bottom">
+                <div class="pc1-scene-top-pr3 op-b">
+                    <img :src="product[i].icon.catia.url3" width="100%" height="100%" alt="">
+                    <div><span>{{ product[i].icon.catia.title3 }}</span></div>
+                </div>  
+                <div class="op-b">
+                    <img :src="product[i].icon.catia.url4" width="100%" height="100%" alt="">
+                    <div><span>{{ product[i].icon.catia.title4 }}</span></div>
+                </div>
             </div>
-            <div class="pc1-scene-tail2">
-              <img
-                width="770px"
-                height="400px"
-                :src="product[i].icon.catia.url4"
-                alt=""
-              />
-              <div><span>{{product[i].icon.catia.title4}}</span></div>
-            </div>
-          </div>
         </div>
       </div>
     </div>
@@ -274,46 +259,12 @@ export default {
     };
   },
   created(){
-    // this.length()
   },
   methods: {
-    length(){
-      // 获取pc1-head长度
-      this.clientWidth = document.getElementById("pc1-head-middle").clientWidth
-      this.left = (1400 - this.clientWidth)/2
-    }
   },
   mounted() {
-    // 获取pc1-head长度
-      this.clientWidth = document.getElementById("pc1-head-middle").clientWidth
-      this.left = (1400 - this.clientWidth-50)/2 -120
-    // 数据筛选
-    this.product.forEach((item, index) => {
-      if (item.flag == this.i) {
-        return this.i;
-      }
-    });
-    this.duct = this.product[this.i];
   }
 };
 </script>
 <style lang="less" scope>
-  .pc1-head{
-  .pc1-head-left{
-    width: 440px;
-  }
-  .pc1-head-right{
-    width: 440px;
-  }
-}
-@media (max-width:1400px ) {
-    .pc1-head{
-      .pc1-head-left{
-        width: 340px;
-      }
-      .pc1-head-right{
-        width: 340px;
-      }
-    }
-}
 </style>

src/pages/product/expe.vue

 <template>
   <div>
-    <div class="pc1">
-      <div class="pc1-top mt">
-        <div class="pc1-left">
+    <div class="pc11">
+      <div class="pc1-top mt pc1-top1-2">
+        <div class="pc1-left pc1-left1-2">
           <img :src="product[i].url1" width="100%" alt="" />
         </div>
-        <div class="pc1-right">
-          <img :src="product[i].url2" width="100%" height="50%" alt="" />
+        <div class="pc1-right pc1-right1-2">
+          <span><img :src="product[i].url2" alt="" /></span>
+          <p>ENGINEER THE EXCITEMENT</p>
           <div>{{ product[i].title }}</div>
         </div>
       </div>
-      <div class="pc1-head">
-        <div class="pc1-head-left"></div>
-        <h4 id="pc1-head-middle">{{ product[i].top }}</h4>
-        <div class="pc1-head-right"></div>
+      <div class="pc1-head pc1-head1-2">
+        <Row  align="middle" class-name="row">
+          <Col span="9"><div class="pc1-head-left1"></div></Col>
+          <Col span="5"><h4 >{{ product[i].top }}</h4></Col>
+          <Col span="9"><div class="pc1-head-right1"></div></Col>
+        </Row>
       </div>
       <!-- 产品简介 -->
-      <div class="pc1-product">
+      <div class="pc1-product pc1-product1-2">
         <div class="instructions">
           <h4>产品简介</h4>
           <p class="beijng">INTRODUCTION</p>
@@ -27,7 +30,7 @@
         </div>
       </div>
       <!-- 背景图 -->
-      <div class="pc1-advert">
+      <div class="pc1-advert pc1-advert1-3">
         <img :src="product[i].advert.img" alt="" />
         <div>
           拥有<span>无限可能性</span>的<br />
@@ -36,7 +39,7 @@
         </div>
       </div>
       <!-- 核心要素 -->
-      <div class="pc1-core">
+      <div class="pc1-core pc1-core1-2">
         <div class=" instructions">
           <h4>核心要素</h4>
           <p>CORE ELEMENTS</p>
@@ -63,12 +66,12 @@
         </div>
         <div class="pc1-function-border">
           <div
-            class="pc1-function-box card2"
+            class="pc1-function-box1 card2"
             v-for="(item, index) in product[i].function"
             :key="index"
           >
             <img :src="item.url" alt="" />
-            <h4>{{ item.title }}</h4>
+            <h4 >{{ item.title }}</h4>
             <div>{{ item.content }}</div>
           </div>
         </div>
@@ -80,30 +83,30 @@
           <p>APPLICATION SCEMARIOS</p>
         </div>
         <div class="pc1-scene-lication">
-          <div class="pc1-scene-lt">
-            <div class="pc1-scene-back1">
-              <img width="460px" height="400px" :src="product[i].icon.catia.url1" alt="" />
-              <div><span>高科技</span></div>
-            </div>
-            <div class="pc1-scene-back2">
-              <img width="440px" height="400px" :src="product[i].icon.catia.url2" alt="" />
-              <div><span>航空航天与国防</span></div>
-            </div>
-            <div class="pc1-scene-back3">
-              <img width="440px" height="400px" :src="product[i].icon.catia.url3" alt="" />
-              <div><span>工业设备</span></div>
-            </div>
-          </div>
-          <div class="pc1-scene-lb">
-            <div class="pc1-scene-tail1">
-              <img width="600px" height="400px" :src="product[i].icon.catia.url4" alt="" />
-              <div><span>建筑工程与施工</span></div>
+            <div class="pc1-scene-top">
+                <div class="pc1-scene-top-pr1 op-b">
+                    <img :src="product[i].icon.catia.url1" width="100%" height="100%" alt="">
+                    <div><span>{{ product[i].icon.catia.title1 }}</span></div>
+                </div>
+                <div class="op-b pc1-scene-top-pr1">
+                    <img :src="product[i].icon.catia.url2" width="100%" height="100%" alt="">
+                    <div><span>{{ product[i].icon.catia.title2 }}</span></div>
+                </div>
+                <div class="op-b">
+                    <img :src="product[i].icon.catia.url3" width="100%" height="100%" alt="">
+                    <div><span>{{ product[i].icon.catia.title3 }}</span></div>
+                </div>
             </div>
-            <div class="pc1-scene-tail2">
-              <img width="770px" height="400px" :src="product[i].icon.catia.url5" alt="" />
-              <div><span>汽车与交通运输</span></div>
+            <div class="pc1-scene-bottom">
+                <div class="pc1-scene-top-pr3 op-b">
+                    <img :src="product[i].icon.catia.url4" width="100%" height="100%" alt="">
+                    <div><span>{{ product[i].icon.catia.title4 }}</span></div>
+                </div>  
+                <div class="op-b">
+                    <img :src="product[i].icon.catia.url5" width="100%" height="100%" alt="">
+                    <div><span>{{ product[i].icon.catia.title5 }}</span></div>
+                </div>
             </div>
-          </div>
         </div>
       </div>
     </div> </div>
@@ -217,30 +220,10 @@ export default {
       left:"",//计算左右边框长度
     };
   },
-  mounted() {
-    // 获取pc1-head长度
-    this.clientWidth = document.getElementById("pc1-head-middle").clientWidth;
-    this.left = ((1400 - this.clientWidth) / 2)-120;  
+  mounted() {  
   }
 };
 </script>
 <style lang="less" scoped>
-.pc1-head {
-  .pc1-head-left {
-    width: 590px;
-  }
-  .pc1-head-right {
-    width: 590px;
-  }
-}
-@media (max-width: 1400px) {
-  .pc1-head {
-    .pc1-head-left {
-      width: 500px;
-    }
-    .pc1-head-right {
-      width: 500px;
-    }
-  }
-}
+
 </style>

src/pages/product/fabric.vue

 <template>
-    <div class="pc1 xx1">
-        <img src="/image/0001.png" alt="">
-    </div>
+  <div>
+    <div class="pc11">
+      <div class="pc1-top mt pc1-top1-2">
+        <div class="pc1-left pc1-left1-2">
+          <img :src="product[i].url1" width="100%" height="100%" alt="" />
+        </div>
+        <div class="pc1-right pc1-right1-2">
+          <img :src="product[i].url2" alt="" />
+          <P>PLAN YOUR DEFINITION OF SUCCESS</P>
+          <div style="padding-top:71px;line-height:47px">智能3D空间规划<br> 解决方案</div>
+        </div>
+      </div>
+      <div class="pc1-head pc1-head1-2">
+         <Row  align="middle" class-name="row">
+          <Col span="7"><div class="pc1-head-left1"></div></Col>
+          <Col span="10"><h4 >{{ product[i].top }}</h4></Col>
+          <Col span="7"><div class="pc1-head-right1"></div></Col>
+        </Row>
+      </div>
+      <!-- 产品简介 -->
+      <div class="pc1-product pc1-product1-2">
+        <div class="instructions">
+          <h4>产品简介</h4>
+          <p class="beijng">INTRODUCTION</p>
+        </div>
+        <div class="pc1-pr-content">
+          <p>{{ product[i].product.p1 }}</p>
+          <p>{{ product[i].product.p2 }}</p>
+        </div>
+      </div>
+      <!-- 背景图 -->
+      <div class="pc1-advert pc1-advert1-2">
+        <img :src="product[i].advert.img" alt="" />
+      </div>
+
+      <!-- 功能模块 -->
+      <div class="pc1-function">
+        <div class="instructions">
+          <h4>功能模块</h4>
+          <p>FUNCTION MODULE</p>
+        </div>
+        <div class="pc1-function-border">
+          <div
+            class="pc1-function-box1 card2"
+            v-for="(item, index) in product[i].function"
+            :key="index"
+          >
+            <img width="50px" height="50px" :src="item.url" alt="" />
+            <h4>{{ item.title }}</h4>
+            <div>{{ item.content }}</div>
+          </div>
+        </div>
+      </div>
+      <!-- 应用场景 -->
+      <div class="pc1-scene">
+        <div class="instructions">
+          <h4>应用场景</h4>
+          <p>APPLICATION SCEMARIOS</p>
+        </div>
+        <div class="pc1-scene-lication">
+            <div class="pc1-scene-top">
+                <div class="pc1-scene-top-pr1 op-b">
+                    <img :src="product[i].icon.catia.url1" width="100%" height="100%" alt="">
+                    <div><span>{{ product[i].icon.catia.title1 }}</span></div>
+                </div>
+                <div class="op-b pc1-scene-top-pr1">
+                    <img :src="product[i].icon.catia.url2" width="100%" height="100%" alt="">
+                    <div><span>{{ product[i].icon.catia.title2 }}</span></div>
+                </div>
+                <div class="op-b">
+                    <img :src="product[i].icon.catia.url3" width="100%" height="100%" alt="">
+                    <div><span>{{ product[i].icon.catia.title3 }}</span></div>
+                </div>
+            </div>
+            <div class="pc1-scene-bottom">
+                <div class="pc1-scene-top-pr3 op-b">
+                    <img :src="product[i].icon.catia.url4" width="100%" height="100%" alt="">
+                    <div><span>{{ product[i].icon.catia.title4 }}</span></div>
+                </div>  
+                <div class="op-b">
+                    <img :src="product[i].icon.catia.url5" width="100%" height="100%" alt="">
+                    <div><span>{{ product[i].icon.catia.title5 }}</span></div>
+                </div>
+            </div>
+        </div>
+      </div>
+    </div>  </div>
 </template>
 
 <script>
-    export default {
-        
-    }
-</script>
+export default {
+  name: "",
+  head: {
+    title: "德天博城-------3DVIA"
+  },
+  data() {
+    return {
+      i: 0,
+      duct: {},
+      product:[
+         {
+          header: "EXPE",
+          flag: 0,
+          top: "为实现卓越运营的数字解决方案",
+          url1: "/image/3dvia/0801.png",
+          url2: "/image/3dvia/0802.png",
+          title: "智能3D空间规划解决方案",
+          //产品简介
+          product: {
+            p1: "3DVIA 为企业和消费者提供了智能 3D 空间规划解决方案，该方案提供了参与、思考和做出最佳选择的新方法。",
+            },
+          // 背景图
+          advert: {
+            img: "/image/3dvia/0810.jpg",
+          },
+
+
+          //功能模块
+          function: [
+            {
+              url: "/image/3dvia/0821.png",
+              title: "自动化",
+              content:
+                "自动化专业包括允许用户开发、存储、管理、部署、共享和重放仿真驱动型设计的标准方法的功能"
+            },
+            {
+              url: "/image/3dvia/0822.png",
+              title: "电磁",
+              content:
+                "电磁仿真专业包括电磁波传播仿真技术以及与通信和检测设备的设计和定位相关的信号强度"
+            },
+            {
+              url: "/image/3dvia/0823.png",
+              title: "流体",
+              content:
+                "流体专业包括使用计算流体力学技术的围绕和穿过实体和结构的稳态和瞬态内部和外部流"
+            },
+            {
+              url: "/image/3dvia/0824.png",
+              title: "结构",
+              content:
+                "包括使用适用于实体和结构的 Abaqus 的有限元分析(FEA)，以为线性和非线性静态、热、 动态和冲击效应建模"
+            },
+            {
+              url: "/image/3dvia/0825.png",
+              title: "优化",
+              content:
+                "提供使用不同参数自动运行和重新运行仿真方法的功能，从而允许使用 Isight 技术进行设计空间探索和优化"
+            }
+          ],
+          icon: {
+            //应用场景
+            url: "",
+            catia: {
+              url1: "/image/expe/0220.png",
+              title1: "高科技",
+              url2: "/image/expe/0221.png",
+              title2: "航空航天与国防",
+              url3: "/image/expe/0222.png",
+              title3: "工业设备",
+              url4: "/image/expe/0223.png",
+              title4: "建筑工程与施工",
+              url5: "/image/expe/0224.png",
+              title5: "汽车与交通运输"
+            }
+          }
+        }, 
+      ],
+      clientWidth:"",//div长度
+      left:"",//计算左右边框长度
+    };
+  },
+  created(){
+    
+  },
+  mounted() {
 
+  },
+
+
+};
+</script>
 <style lang="less" scoped>
-    .xx1{
-        background: rgb(124, 121, 121);
-        img{
-            z-index: 99999999999999999999;
-            width: 1000px;
-            position: absolute;
-            top: 120px;
-            border: 1px solid #000;
-        }
-    }
-</style>
\ No newline at end of file
+</style>

src/pages/product/simulia.vue

 <template>
   <div>
-    <div class="pc1" ref="pc1">
-      <div class=" mt back-top">
-        <div class=" back-ground">
-          <img class="back-ground1" :src="product[i].url1.url1" alt="" />
-          <img class="back-ground2" :src="product[i].url1.url2" alt="" />
-          <img class="back-ground3" :src="product[i].url1.url3" alt="" />
+    <div class="pc11">
+      <div class=" mt back-top pc1-top1-2">
+        <div class=" back-ground ">
+          <div class="back-ground1">
+            <img class="back-ground1" :src="product[i].url1.url1" alt="" />
+          </div>
+          <div class=" back-bottom">
+            <div class="back-ground2">
+              <img  :src="product[i].url1.url2" alt="" />
+            </div>
+            <div class="back-ground3">
+              <img :src="product[i].url1.url3" alt="" />
+            </div>
+          </div>
         </div>
-        <div class="pc1-right">
-          <img :src="product[i].url2" width="100%" height="50%" alt="" />
+        <div class="pc1-right pc1-right1-2">
+          <img :src="product[i].url2"  alt="" />
+          <p>REVEAL THE WORLD WE LIVE IN</p>
           <div>{{ product[i].title }}</div>
         </div>
       </div>
-      <div class="pc1-head">
-        <div class="pc1-head-left"></div>
-        <h4 id="pc1-head-middle">{{ product[i].top }}</h4>
-        <div class="pc1-head-right"></div>
+      <div class="pc1-head pc1-head1-2">
+        <Row  align="middle" class-name="row">
+          <Col span="7"><div class="pc1-head-left1"></div></Col>
+          <Col span="10"><h4 >{{ product[i].top }}</h4></Col>
+          <Col span="7"><div class="pc1-head-right1"></div></Col>
+        </Row>
       </div>
       <!-- 产品简介 -->
-      <div class="pc1-product">
+      <div class="pc1-product pc1-product1-2">
         <div class="instructions">
           <h4>产品简介</h4>
           <p class="beijng">INTRODUCTION</p>
@@ -29,7 +40,7 @@
         </div>
       </div>
       <!-- 背景图 -->
-      <div class="pc1-advert">
+      <div class="pc1-advert pc1-advert1-2">
         <img :src="product[i].advert.img" alt="" />
       </div>
 
@@ -41,11 +52,11 @@
         </div>
         <div class="pc1-function-border">
           <div
-            class="pc1-function-box card2"
+            class="pc1-function-box1 card2"
             v-for="(item, index) in product[i].function"
             :key="index"
           >
-            <img :src="item.url" alt="" />
+            <img width="50px" height="50px" :src="item.url" alt="" />
             <h4>{{ item.title }}</h4>
             <div>{{ item.content }}</div>
           </div>
@@ -58,33 +69,33 @@
           <p>APPLICATION SCEMARIOS</p>
         </div>
         <div class="pc1-scene-lication">
-          <div class="pc1-scene-lt">
-            <div class="pc1-scene-back1">
-              <img width="460px" height="400px" :src="product[i].icon.catia.url1" alt="" />
-              <div><span>高科技</span></div>
-            </div>
-            <div class="pc1-scene-back2">
-              <img width="440px" height="400px" :src="product[i].icon.catia.url2" alt="" />
-              <div><span>航空航天与国防</span></div>
+            <div class="pc1-scene-top">
+                <div class="pc1-scene-top-pr1 op-b">
+                    <img :src="product[i].icon.catia.url1" width="100%" height="100%" alt="">
+                    <div><span>{{ product[i].icon.catia.title1 }}</span></div>
+                </div>
+                <div class="op-b pc1-scene-top-pr1">
+                    <img :src="product[i].icon.catia.url2" width="100%" height="100%" alt="">
+                    <div><span>{{ product[i].icon.catia.title2 }}</span></div>
+                </div>
+                <div class="op-b">
+                    <img :src="product[i].icon.catia.url3" width="100%" height="100%" alt="">
+                    <div><span>{{ product[i].icon.catia.title3 }}</span></div>
+                </div>
             </div>
-            <div class="pc1-scene-back3">
-              <img width="440px" height="400px" :src="product[i].icon.catia.url3" alt="" />
-              <div><span>工业设备</span></div>
+            <div class="pc1-scene-bottom">
+                <div class="pc1-scene-top-pr3 op-b">
+                    <img :src="product[i].icon.catia.url4" width="100%" height="100%" alt="">
+                    <div><span>{{ product[i].icon.catia.title4 }}</span></div>
+                </div>  
+                <div class="op-b">
+                    <img :src="product[i].icon.catia.url5" width="100%" height="100%" alt="">
+                    <div><span>{{ product[i].icon.catia.title5 }}</span></div>
+                </div>
             </div>
-          </div>
-          <div class="pc1-scene-lb">
-            <div class="pc1-scene-tail1">
-              <img width="600px" height="400px" :src="product[i].icon.catia.url4" alt="" />
-              <div><span>建筑工程与施工</span></div>
-            </div>
-            <div class="pc1-scene-tail2">
-              <img width="770px" height="400px" :src="product[i].icon.catia.url5" alt="" />
-              <div><span>汽车与交通运输</span></div>
-            </div>
-          </div>
         </div>
       </div>
-    </div>c  </div>
+    </div>  </div>
 </template>
 
 <script>
@@ -173,50 +184,16 @@ export default {
         }
 
       ],
-      clientWidth:"",//div长度
-      left:"",//计算左右边框长度
     };
   },
   created(){
   },
   mounted() {
-    // 获取pc1-head长度
-    this.length()
     
   },
   methods:{
-    length(){
-    console.log(this.$refs.pc1.clientWidth)
-    if(this.$refs.pc1.clientWidth >=1400){
-      this.clientWidth = document.getElementById("pc1-head-middle").clientWidth;
-    this.left = (1400 - this.clientWidth-50) / 2 ; 
-    console.log(111)
-    }else{
-    this.clientWidth = document.getElementById("pc1-head-middle").clientWidth;
-    this.left = (1400 - this.clientWidth-50) / 2 -120; 
-    console.log(0)
-    } 
-    }
   }
 };
 </script>
 <style lang="less" scoped>
-.pc1-head{
-  .pc1-head-left{
-    width: 430px;
-  }
-  .pc1-head-right{
-    width: 430px;
-  }
-}
-@media (max-width:1400px ) {
-    .pc1-head{
-      .pc1-head-left{
-        width: 340px;
-      }
-      .pc1-head-right{
-        width: 340px;
-      }
-    }
-}
 </style>