自适应

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>