产品 更改

src/assets/theme/phone.less

@@ -64,7 +64,7 @@
         font-size: 24px;
         color: white;
         line-height: 60px;
-        margin: 0 0.84rem;
+        margin: 0 0;
 
         &.icondianhua {
           font-size: 18px;
@@ -99,6 +99,7 @@
             height: 28px;
             margin-left: 0;
             padding-top: 0;
+            width: 100%!important;
           }
         }
 

src/layouts/default.vue

@@ -3,7 +3,7 @@
     <div class="header-div">
       <div class="header" :class="{ home: '/' == $nuxt.$route.path && top }">
         <div class="nav">
-          <a class="logo" href="/"><img width="160px" src="/image/index/logo.png" alt="" /></a>
+          <a class="logo" href="/"><img width="160px" src="/image/index/logo.png" alt="" /></a><!-- logo图-->
           <Icon
             class="phone"
             type="md-menu"
@@ -18,6 +18,7 @@
             ref="test"
             v-if="menuShow"
           />
+          <!-- icon是app端 是右上的关闭和菜单页面导航树 -->
           <div class="menu" v-show="menuShow">
             <nuxt-link to="/" :class="{ cur: '/' == $nuxt.$route.path }"
               >首页</nuxt-link
@@ -27,7 +28,7 @@
              <a
               class="an"
               style="border: none;"
-              :class="{ cur: $nuxt.$route.path.indexOf('/product') === 0 }"
+              :class="{ cur: $nuxt.$route.path.indexOf('/p1') === 0 }"
               @mouseover="hover()"
               @click="cpclick"
               >行业解决方案
@@ -51,7 +52,7 @@
                       <nuxt-link
                         :to="{ path: '/p1/'+item.id,  }"
                         :class="{
-                          cur: $nuxt.$route.path.indexOf('/product/mes') === 0,
+                          cur: $nuxt.$route.path.indexOf('/p1') === 0,
                         }"
                         v-for="(item, index) in items"
                         :key="index"
@@ -68,14 +69,15 @@
           <div class="menu" v-show="menuShow">
             <nuxt-link
               to="/case"
-              :class="{ cur: $nuxt.$route.path.indexOf('/case') === 0 }"
-              >产品</nuxt-link
+              :class="{ cur: $nuxt.$route.path.indexOf('/product') === 0 }"
+              >产品
+              </nuxt-link
             >
           </div>
           <div class="menu" v-show="menuShow">
             <nuxt-link
               to="/news"
-              :class="{ cur: $nuxt.$route.path.indexOf('/service') === 0 }"
+              :class="{ cur: $nuxt.$route.path.indexOf('/news') === 0 }"
               >服务支持</nuxt-link
             >
           </div>
@@ -445,7 +447,7 @@ export default {
     };
   },
   created() {
-    console.log(this.menuShow);
+    // console.log(this.menuShow);
 
   },
   mounted() {
@@ -463,7 +465,7 @@ export default {
     window.addEventListener("scroll", (e) => {
       this.screenY = window.scrollY;
     });
-    this.watchSize();
+    // this.watchSize();
   },
   methods: {
     over1() {
@@ -603,7 +605,6 @@ export default {
   },
   computed: {
     top() {
-      console.log(this.screenY<200)
       return this.screenY < 200;
     },
   },
@@ -611,7 +612,7 @@ export default {
     $route() {
       if (this.isPhone()) {
         this.menuShow = false;
-        console.log(this.isPhone());
+        // console.log(this.isPhone());
       }
     },
   },

src/pages/index.vue

@@ -334,6 +334,7 @@
             v-model="value2"
             loop
             :autoplay-speed="50000"
+            trigger="hover"
             dots="outside"
           >
             <CarouselItem v-for="(item, index) in dataList" :key="index" height="537px">
@@ -370,7 +371,7 @@
                       </div>
                     </div>
                     <div class="ar">
-                        <a class="moreal" href="/case">查看更多</a>
+                        <a class="moreal" href="/case">了解更多</a>
                       </div>
                   </div>
                 </div>
@@ -421,14 +422,17 @@
               
             />
           </div>
+
+          <div class="center">
           <div class="more">
             <a href="/case">查看更多</a>
           </div>
+          </div>
         </div>
       </section>
     </div>
     <!-- 手机端更改 -->
-    <div class="phone">
+    <!-- <div class="phone">
       <div class="jwzz">
         <img src="/image/banner.jpg" alt="" />
         <h5>见微知著</h5>
@@ -476,7 +480,6 @@
           </div>
         </div>
         <nuxt-link to="about">查看更多</nuxt-link>
-        <!-- <a></a> -->
       </div>
       <div class="we">
         <h5>我们的产品</h5>
@@ -557,7 +560,7 @@
           </div>
         </div>
       </div>
-    </div>
+    </div> -->
   </div>
 </template>
 <script>

src/pages/product/dvia.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>
+        <div class="pc1-right">
+          <img :src="product[i].url2" width="100%" height="50%" alt="" />
+          <div>{{ product[i].title }}</div>
+        </div>
+      </div>
+      <div class="pc1-head">
+        <div class="pc1-head-left" :style="[{width:(left + 'px')}]"></div>
+        <h4 id="pc1-head-middle">{{ product[i].top }}</h4>
+        <div class="pc1-head-right" :style="[{width:(left + 'px')}]"></div>
+      </div>
+      <!-- 产品简介 -->
+      <div class="pc1-product">
+        <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">
+        <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-box card2"
+            v-for="(item, index) in product[i].function"
+            :key="index"
+          >
+            <img :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-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>
+            <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>
+</template>
+
+<script>
+export default {
+  name: "",
+  head: {
+    title: "德天博城-------3DEXPERIENCE"
+  },
+  data() {
+    return {
+      i: 0,
+      duct: {},
+      product:[
+         {
+          header: "EXPE",
+          flag: 0,
+          top: "为实现卓越运营的数字解决方案",
+          url1: "/image/3dvia/0801.png",
+          url2: "/image/3dvia/0802.png",
+          title: "分析仿真平台",
+          //产品简介
+          product: {
+            p1: "3DVIA 为企业和消费者提供了智能 3D 空间规划解决方案，该方案提供了参与、思考和做出最佳选择的新方法。",
+            },
+          // 背景图
+          advert: {
+            img: "/image/3dvia/0810.png",
+          },
+
+
+          //功能模块
+          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:"",//计算左右边框长度
+    };
+  },
+  mounted() {
+    // 获取pc1-head长度
+    this.clientWidth = document.getElementById("pc1-head-middle").clientWidth;
+    this.left = (1400 - this.clientWidth-50) / 2;  
+  }
+};
+</script>
+<style lang="less" scoped>
+
+</style>

src/plugins/view-ui.js

 import Vue from 'vue'
-import {Icon,Input,Carousel,Modal,Button,CarouselItem,FormItem,Form,BackTop,Message} from 'view-design'
+import {Icon,Input,Carousel,Modal,Button,CarouselItem,FormItem,Form,BackTop,Message,Menu,MenuItem,Select,Row,Col,InputNumber,Option,Dropdown,DropdownMenu,DropdownItem} from 'view-design'
 // import locale from 'view-design/dist/locale/en-US' // Change locale, check node_modules/view-design/dist/locale
 import '@/assets/icon/iconfont.css';
 import Request from '@/api/request';
@@ -23,6 +23,22 @@ Vue.component("CarouselItem",CarouselItem);
 Vue.component("Form",Form);
 Vue.component("FormItem",FormItem);
 Vue.component("BackTop",BackTop);
+Vue.component("Menu",Menu);
+Vue.component("MenuItem",MenuItem);
+//表单需要
+Vue.component("Select",Select);
+Vue.component("Row",Row);
+Vue.component("Col",Col);
+Vue.component("InputNumber",InputNumber)
+Vue.component("Option",Option)
+//下拉菜单
+Vue.component("Dropdown",Dropdown)
+Vue.component("DropdownMenu",DropdownMenu)
+Vue.component("DropdownItem",DropdownItem)
+
+
+
+
 // Vue.use(ViewUI)
 export default (({app,store})=>{
     Vue.prototype.$api=Request;