Skip to content

D
DTBPcompnay
Commit 9d034f91 authored by 陈毅's avatar 陈毅
Browse files
Options

产品 更改

parent 3a706aa4
Hide whitespace changes
Inline Side-by-side
Showing with 2392 additions and 2368 deletions
src/assets/theme/layout.less
View file @ 9d034f91
......@@ -1466,7 +1466,7 @@ a.news {
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: bold;
line-height: 1.1rem;
line-height: 18px;
color: #294982;
opacity: 1;
margin-top: .5rem;
......@@ -1909,8 +1909,8 @@ opacity: 1;
img {
width: 185px;
height: 126px;
margin: 0 50px 20px;
height: 125px;
margin: 0 50px 90px;
justify-content: space-around;
}
}
......@@ -1944,36 +1944,54 @@ opacity: 1;
margin-bottom: 18px;
}
.customer-content .center{
width: 100%;
display: flex;
justify-content: space-around;
margin-bottom: 50px;
}
.customer-content .more {
text-align: center;
// text-align: center;
width: 140px;
height: 48px;
background: #294982;
opacity: 1;
border-radius: 24px;
}
.customer .customer-content .more a {
display: inline-block;
width: 141px;
height: 36px;
line-height: 36px;
text-align: center;
border-radius: 36px;
font-size: 14px;
color: #fff;
background: linear-gradient(to right, rgba(138, 197, 255, 1), rgba(22, 79, 124, 0.7));
-webkit-background: linear-gradient(to right, rgba(138, 197, 255, 1), rgba(22, 79, 124, 0.7));
-moz-background: linear-gradient(to right, rgba(138, 197, 255, 1), rgba(22, 79, 124, 0.7));
-o-background: linear-gradient(to right, rgba(138, 197, 255, 1), rgba(22, 79, 124, 0.7));
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-ms-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
margin-top: 50px;
// display: inline-block;
// width: 141px;
// height: 36px;
// line-height: 36px;
// text-align: center;
// border-radius: 36px;
// font-size: 14px;
// color: #fff;
// background: linear-gradient(to right, rgba(138, 197, 255, 1), rgba(22, 79, 124, 0.7));
// -webkit-background: linear-gradient(to right, rgba(138, 197, 255, 1), rgba(22, 79, 124, 0.7));
// -moz-background: linear-gradient(to right, rgba(138, 197, 255, 1), rgba(22, 79, 124, 0.7));
// -o-background: linear-gradient(to right, rgba(138, 197, 255, 1), rgba(22, 79, 124, 0.7));
// -webkit-transition: all .4s ease;
// -moz-transition: all .4s ease;
// -ms-transition: all .4s ease;
// -o-transition: all .4s ease;
// transition: all .4s ease;
// margin-top: 50px;
margin-bottom: 50px;
font-size: 18px;
font-family: Microsoft YaHei;
font-weight: bold;
line-height: 18px;
color: #FFFFFF;
opacity: 1;
line-height: 48px;
}
.customer .customer-content .more a:hover {
box-shadow: 5px 5px 30px #0880e2;
// box-shadow: 5px 5px 30px #0880e2;
}
......@@ -2140,13 +2158,64 @@ opacity: 1;
}
}
}
// simulia左侧三张图
.back-top{
display: flex;
.back-ground{
position: relative;
width: 927px;
height: 474px;
.back-ground1{
position: absolute;
top: 0px;
left: 272px;
z-index: 2;
}
.back-ground2{
position: absolute;
bottom:0px;
left: 0;
z-index: 1;
}
.back-ground3{
position: absolute;
bottom: 0px;
right:0px;
z-index: 1;
}
}
// 右侧
.pc1-right {
width: 480px;
height: 474px;
img {
margin-top: 65px;
height: 172px;
}
div {
text-align: center;
padding-top: 75px;
height: 47px;
font-size: 30px;
font-family: Alibaba Sans;
font-weight: 900;
color: #232323;
opacity: 1;
}
}
}
.pc1-head {
//标题导语
display: flex;
justify-content: space-between;
align-items: center;
.pc1-head-left {
width: 560px;
height: 2px;
background: linear-gradient(
297deg,
......@@ -2157,6 +2226,48 @@ opacity: 1;
border-radius: 0px;
}
h4 {
.pc1-scene-tail1 {
white-space: nowrap;
height: 400px;
position: relative;
div {
position: absolute;
// width: 600px;
height: 45px;
background: rgba(41, 73, 130, 0.5);
bottom: 0;
text-align: center;
line-height: 45px;
span {
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #ffffff;
opacity: 1;
}
}
}
.pc1-scene-tail2 {
// width: 770px;
height: 400px;
position: relative;
div {
position: absolute;
// width: 770px;
height: 45px;
background: rgba(41, 73, 130, 0.5);
bottom: 0;
text-align: center;
line-height: 45px;
span {
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #ffffff;
opacity: 1;
}
}
}
height: 48px;
font-size: 36px;
font-family: Microsoft YaHei;
......@@ -2222,44 +2333,125 @@ opacity: 1;
.pc1-core-border {
margin-top: 60px;
margin-bottom: 80px;
padding-left: 80px;
padding-right: 80px;
// padding-left: 80px;
// padding-right: 80px;
display: flex;
justify-content: space-between;
justify-content: space-evenly;
align-items: center;
.pc1-core-box {
width: 220px;
height: 300px;
border-radius: 8px;
position: relative;
padding: 20px 36px 0px;
padding: 20px 20px 0px;
h4 {
white-space: nowrap;
}
div{
text-align: left;
}
}
}
}
//应对问题
.pc1-problems {
.pc1-problems-border {
// height: 500px;
position: relative;
margin-top: 60px;
margin-bottom: 80px;
img {
// opacity: 0.2;、
}
.pc1-problems-module {
position: absolute;
top: 0;
left: 0;
width: 1400px;
display: flex;
justify-content: space-evenly;
.pc1-problems-box {
width: 100px;
z-index: 1;
text-align: center;
div{
height: 273px;
position: relative;
img{
position: absolute;
bottom: 30px;
left: 25px;
}
}
h4 {
line-height: 21px;
font-size: 16px;
color: #000;
}
}
}
}
.pc1-problems-border1{//ENOVIA模板样式当i == 3 时
.enovia{
width: 1400px;
height: auto;
border: 1px solid #000;
display: flex;
justify-content: space-evenly;
margin-bottom: 90px;
.enovia-card{
width: 200px;
font-size: 15px;
display: flex;
flex-direction: column;
border: 1px solid #005385;
img{
width: 50px;
height: auto;
margin: 40px auto 20px;
}
h4{
text-align: center;
width: 100%;
padding: 0px auto 5px;
}
}
}
}
}
.pc1-function {
//功能模块
margin-bottom: 20px;
.pc1-function-border {
margin-top: 60px;
padding-left: 80px;
padding-right: 80px;
margin-bottom: 80px;
display: flex;
justify-content: space-between;
height: 420px;
flex-wrap: wrap;
justify-content: space-evenly;
.pc1-function-box {//正常情况下的功能模块
width: 220px;
border-radius: 8px;
// padding: 20px 16px 0px;
}
}
.window{//delmia6宫格卡片 样式 功能模块
margin-bottom:20px;
align-items: center;
.pc1-function-box {
width: 220px;
height: 300px;
border-radius: 8px;
padding: 20px 16px 0px;
position: relative;
.frame{
width: 33%;
height: 240px !important;
display: flex;
justify-content: space-evenly;
margin-bottom:60px ;
}
}
}
.pc1-scene {
//应用场景
//应用场景 5张图
padding-bottom: 20px;
.pc1-scene-lication {
height: 800px;
......@@ -2269,7 +2461,7 @@ opacity: 1;
margin-bottom: 30px;
display: flex;
justify-content: space-between;
.pc1-scene-back1{
.pc1-scene-back1{//5
width: 460px;
height: 400px;
position: relative;
......@@ -2290,7 +2482,7 @@ opacity: 1;
}
}
}
.pc1-scene-back2{
.pc1-scene-back2{//5
width: 440px;
height: 400px;
position: relative;
......@@ -2311,7 +2503,7 @@ opacity: 1;
}
}
}
.pc1-scene-back3{
.pc1-scene-back3{//5
width: 440px;
height: 400px;
position: relative;
......@@ -2332,6 +2524,48 @@ opacity: 1;
}
}
}
.pc1-scene-catia1 {//4
width: 720px;
height: 400px;
position: relative;
div {
position: absolute;
width: 720px;
height: 45px;
background: rgba(41, 73, 130, 0.5);
bottom: 0;
text-align: center;
line-height: 45px;
span {
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #ffffff;
opacity: 1;
}
}
}
.pc1-scene-catia2 {//4
width: 650px;
height: 400px;
position: relative;
div {
position: absolute;
width: 650px;
height: 45px;
background: rgba(41, 73, 130, 0.5);
bottom: 0;
text-align: center;
line-height: 45px;
span {
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #ffffff;
opacity: 1;
}
}
}
}
.pc1-scene-lb{
display: flex;
......@@ -2381,34 +2615,100 @@ opacity: 1;
}
}
}
//我们是谁 about页面
//加入我们 about页面
.join-us{
.join{
display: flex;
justify-content: center;
.join-layout{
width: 170px;
text-align: center;
.join-recruit{
h4{
margin-top: 40px;
font-size: 20px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #294982;
opacity: 1;
margin-bottom: 20px;
}
.join-recruit-flex{
margin-top: 20px;
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #294982;
opacity: 1;
display: flex;
justify-content: space-evenly;
.join-recruit-flex-left{
flex: 1;
text-align-last: justify;
text-align: justify;
text-justify: distribute-all-lines;
}
}
}
}
}
}
}
// 卡片布局 card1核心要素
.card1 {
//应用价值
.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){
padding-left: 540px;
}
.pc1-lication-layout:nth-child(2n-1){
padding-left: 440px;
}
}
.card1{
width: 220px;
height: 300px;
background: #ffffff;
background: #fff;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.16);
opacity: 1;
border-radius: 10px;
display: flex;
align-items: center;
flex-direction: column;
h4 {
position: absolute;
top: 120px;
img{
height: 120px;
display: flex;
justify-content: center;
align-items: center;
}
h4{
height: 80px;
font-size: 20px;
font-family: Microsoft YaHei;
font-weight: bold;
line-height: 0px;
color: #294982;
opacity: 1;
margin-bottom: 54px;
}
div {
position: absolute;
top: 200px;
width: 148px;
height: 57px;
div{
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
......@@ -2416,10 +2716,10 @@ opacity: 1;
opacity: 1;
}
}
// 核心要素2
// 核心要素2 正常使用222
.card2 {
width: 220px;
height: 300px;
height: 300px;
background: #ffffff;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.16);
opacity: 1;
......@@ -2427,21 +2727,20 @@ opacity: 1;
display: flex;
align-items: center;
flex-direction: column;
img{
margin: 30px auto 20px;
}
h4 {
position: absolute;
top: 100px;
text-align: center;
padding: 0px 30px;
height: 60px;
font-size: 20px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #294982;
opacity: 1;
text-align: center;
margin: auto 30px;
}
div {
position: absolute;
top: 160px;
width: 188px;
height: 133px;
font-size: 14px;
......@@ -2453,7 +2752,48 @@ opacity: 1;
margin: auto 16px;
}
}
.card3 {
width: 220px;
background: #ffffff;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.16);
opacity: 1;
border-radius: 10px;
.card3-url{
height: 100px !important;
display: flex;
justify-content: center;
align-items: center;
}
h4 {
height: 60px;
font-size: 20px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #294982;
opacity: 1;
text-align: center;
// margin: auto 30px;
}
.card3-content {
text-align: center;
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
line-height: 20px;
color: #232323;
opacity: 1;
}
}
// 通用
.mt{
margin-top: 60px
}
.mb{
margin-bottom: 80px
}
.mt4{
margin-bottom: 40px
}
@import url("./phone");
@import url("./extra");
@import url("./product");
......
src/assets/theme/phone.less
View file @ 9d034f91
......@@ -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
View file @ 9d034f91
......@@ -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/about/index.vue
View file @ 9d034f91
<template>
<div　class="compnay-info">
<div class="about-pc">
<!-- <div class="banner1">
<img src="/image/about/tt.png" alt="关于我们" />
</div> -->
<div class="about-div">
<div style="position:relative;">
<p>北京见著科技有限公司<br/>助力企业智能化升级</p>
<h4>JIAN&nbsp;&nbsp;ZHU</h4>
<div style="width: 53px;height: 4px;background: #4468D6;margin:67px 0 95px;"></div>
<span>北京见著科技有限公司,致力于为科研和制造业企业提供智能化解决方案。
公司依托对大数据、AI及IOT等技术的研究,<br/>
聚焦大数据智能应用和生产智能化领域,<br/>
为企业提供量身定制的高端产品解决方案,助力企业智能化升级。
</span>
<span style="color:#666;margin-top:36px;">
公司坚持自主研发与创新发展, 汇聚了企业管理、应用数学、计算机、<br/>
自动化和系统工程等领域的专业人才，并与众多科研院所和大学建立科研合作,<br/>
打造出了一系列技术领先、极具竞争力的产品,服务于广大客户。<br/>
公司总部在北京，在西安、无锡设有研发中心和分支机构。
</span>
<div class="pc1">
<div class="about1">
<img :src="product.url" alt="" />
<div>
<h4>{{ product.title }}</h4>
<p>{{ product.content }}</p>
</div>
<!-- <img src="/image/about/map.png" alt="" > -->
</div>
<img class="z3" src="/image/about/z3.png" alt="">
<div class="about-fz">
<img src="/image/about/fzbj.png" alt="">
<div class="title">
<p>我们的成长之路</p>
<span>The road to growth</span>
<div class="about-us">
<div class="instructions mt4">
<h4>我们是谁</h4>
<p class="beijng">ABOUT US</p>
</div>
<div class="years">
<div v-for="(item,index) in aboutData.listdata" :key="index+'a'" >
<div class="years-div" v-if="index%2==0" style="height:330px">
<p>{{item.year}}</p>
<div style="border-left:1px solid #fff;height:225px;">
<div class="div">{{item.btn}}</div>
<span v-html="item.en" style="font-weight:800;"></span>
<span v-html="item.cn"></span>
</div>
</div>
<div class="years-div" v-if="index%2!=0" style="height:450px">
<p>{{item.year}}</p>
<div style="border-left:1px solid #fff;height:345px;">
<div class="div">{{item.btn}}</div>
<span v-html="item.en" style="font-weight:800;"></span>
<span v-html="item.cn"></span>
</div>
</div>
<p class="about-us-p">{{ product.about.content }}</p>
<div class="about-us-flex">
<img :src="product.about.url1" alt="" />
<div>
<p v-for="(item, index) in product.about.content1" :key="index">
{{ item }}
</p>
</div>
</div>
</div>
</div>
<div class="phone-pro">
<div class="banner-div">
<img src="/image/about/banner.png" alt="">
</div>
<div class="title-about">
<p>北京见著科技有限公司</p>
<p>助力企业智能化升级</p>
<img src="/image/about/jianzhu.png" alt="">
</div>
<!-- <img src="/image/about/map.png" alt="" class="map"> -->
<p>北京见著科技有限公司,致力于为科研和制造业企业提供智能化解决方案。公司依托对大数据、AI及IOT等技术的研究,聚焦大数据智能应用和生产智能化领域,为企业提供量身定制的高端产品解决方案,助力企业智能化升级。</p>
<br/>
<p>
公司坚持自主研发与创新发展, 汇聚了企业管理、应用数学、计算机、
自动化和系统工程等领域的专业人才，并与众多科研院所和大学建立科研合作,打造出了一系列技术领先、极具竞争力的产品,服务于广大客户。
公司总部在北京，在西安、无锡设有研发中心和分支机构。
</p>
</div>
<div class="about-fz-p foot-show">
<img src="/image/about/cjzl-p.png" alt="">
<div class="title">
<p>我们的成长之路</p>
<span>The road to growth</span>
<div class="join-us">
<div class="instructions">
<h4>加入我们</h4>
<p class="beijng">JOIN US</p>
</div>
<div class="years-p">
<div v-for="(item,index) in yearData" :key="index+'a'" style="width:30%">
<div class="years-p-div">
<p>{{item.year}}</p>
<div style="border-left:1px solid #fff;height:100%;">
<div class="div">{{item.btn}}</div>
<span v-html="item.en"></span>
<span v-html="item.cn"></span>
<div class="join">
<div class="join-layout">
<div class="join-recruit">
<h4>人才招聘</h4>
<div class="join-recruit-flex">
<div>CATIA工程师</div>
<div>（济南/2人）</div>
</div>
<div class="join-recruit-flex">
<div>PLM实施顾问</div>
<div>(北京/2人）</div>
</div>
</div>
<div class="join-recruit mt">
<h4>联系我们</h4>
<div class="join-recruit-flex">
<div class="join-recruit-flex-left">服务热线</div>
<div>：</div>
<div>010-68661832</div>
</div>
<div class="join-recruit-flex">
<div class="join-recruit-flex-left">传真</div>
<div>：</div>
<div>010-88683070</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="yuan">
<div v-for="(item,index) in this.arr" :key="index" @click="gotoPage(index)" :class="{'current':currentIndex == index}"></div>
</div>
<div class="case-introduce" style="min-height:530px;">
<div class="title"><div class='line'></div><p>加入我们</p><div class='line'></div></div>
<div class="job">
<div class="job-title">
<div v-for="(it,ind) in jobarr" :key="ind+'b'" @click="gojob(ind)" :class='{ cur: pointIndex == ind }'>
{{it[0].type}}
</div>
</div>
<div v-for="(items,indexs) in listnow" :key="indexs+'c'">
<div class="job-card" @click="gojoball(indexs,items.id)">
<p>{{items.name}}</p>
<span>招聘人数：{{items.count}}</span>
<span>工作地点：{{items.address}}</span>
<Icon type="md-add" color='#326B9B' size='34' v-if="jobIndex != indexs"/>
<Icon type="md-close" color='#326B9B' size='34' v-if="jobIndex == indexs"/>
</div>
<div class="job-all" :class='{ jobcur: jobIndex == indexs }'>
<p>招聘人数：{{jobnow.count}}</p>
<p>工作地点：{{jobnow.address}}</p>
<p>工作描述：</p>
<!-- <p v-for="(itemss,indexss) in items.all1" :key="indexss+'d'">{{itemss}}</p> -->
<p v-html="jobnow.content"></p>
<p>任职要求：</p>
<!-- <p v-for="(itemss2,indexss2) in items.all2" :key='indexss2'>{{itemss2}}</p>
-->
<p v-html="jobnow.requst"></p>
<span>地址：北京朝阳区慧忠北路103号洛克时代中心A座7A02<br/>
电话：010-8646-1698<br/>
邮箱：hr@dotbroadtech.com<br/>
</span>
</div>
</div>
</div>
</div>
<div class="foot-show">
<div class="foot">
<h6>联系我们</h6>
<span>地址：{{content.place}}<br/>电话：{{content.fphone}}<br/>邮箱：{{content.email}}</span>
<div class="foot_three">
<div v-for="(item,index) in content.jzewm" :key='index'><p>{{item.name}}</p><img :src="apiurl+item.url" alt=""></div>
</div>
</div>
</div>
......@@ -145,297 +60,85 @@
</template>
<script>
import Config from '@/config';
export default {
head: {
title: "关于我们---德天博城",
},
data() {
let groupBy = (list, fn) => {
const groups = {};
list.forEach(function (o) {
const group = JSON.stringify(fn(o));
groups[group] = groups[group] || [];
groups[group].push(o);
});
return groups;
};
let list = groupBy(this.$store.state.jobs, (u) => {
return u.type;
});
console.warn(list, "vvvv,", this.$store.state.jobs);
return {
apiurl:Config.apiBaseUrl,
pointIndex: 0,
jobIndex: null,
list: list,
currentIndex: 0,
yearData: [],
arr: [],
aboutData: {
listdata: [
{
year: "1997",
btn: "DNC",
en: "",
cn: "异购型分布式数控<br/>机床网络科研课题",
},
{
year: "2001",
btn: "MDC",
en: "Machine data collection",
cn: "基于统一平台的数控机床<br/>实时数据采集系统",
},
{
year: "2004",
btn: "APS",
en: "Advanced Planning<br/> and Scheduling",
cn: "基于TOC约束理论的<br/>高级计划与调度系统",
},
{
year: "2010",
btn: "PLM/MES",
en: "Manufacturing<br/>Execution System",
cn: "产品全寿期管理<br/>制造执行系统",
},
{ year: "2016", btn: "BD", en: "Big Data", cn: "大数据技术行业应用" },
{ year: "2020", btn: "SaaSMES", en: "", cn: "云端智能制造执行系统" },
],
jobdata: [
{
title: "开发",
list: [
{
name: "web前端开发工程师",
number: "1",
place: "北京/西安",
all1: [
"1.参与公司项目前端的设计与开发；",
"2.与后端开发人员紧密配合，确认调用接口，保证功能的完整",
"3.负责互联网产品的单元测试，保证产品质量；",
"4.参与系统的部署.监控和维护，确保系统的正常运行；",
"5.参与对业务系统进行性能优化，提高系统的健壮性.",
],
all2: [
"1.具有3-5年以上前端工作经验；有成功上线产品。",
"2.精通html5.css3.JavaScript等新功能，熟悉页面架构和布局.模块分离设计经验；",
"3.熟练使用Vue+Vue-router+Vuex+axios，iviewui。有Gis工作经验者优先考虑；",
"4.熟悉前端工具构建流程，有相关开发实践经验；",
"5.对css/JavaScript性能优化.解决多浏览器兼容性问题有一定的经验；",
"6.良好的沟通能力和团队合作精神；",
"7.认真细致.责任心强，具有较强的执行力，能够承受较强的工作压力。前端框架采用Vue.ui采用iview；加分项ElementUI",
],
},
{
name: "java工程师",
number: "1",
place: "北京/西安",
all1: [
"1.根据软件需求说明书和软件设计文档实现软件产品;",
"2.从事具体的软件开发，核心模块代码编写;",
"3.开发和维护统一的软件开发架构，发现和解决存在的软件设计问题;",
"4.按软件工程流程编写和提交设计文件和相关文档;",
"5.能独立学习技术并解决问题;",
],
all2: [
"1.3年及以上相关工作经验；",
"2.熟悉Spring/Mybatis/Dubbo/SpringCloud等开源框架，对相关技术原理有较深入理解，从事过大型高并发架构设计者，SAAS模式开发经验者优先；",
"3.熟练应用Mysql/MongoDB等主流数据库；熟练应用Redis等;",
"4.有一定的业务抽象.逻辑分析能力;",
"5.有分布式系统开发经验优先；有大规模高并发系统开发经验优先；",
"6.良好的沟通能力和团队合作精神；",
"7.认真细致.责任心强，具有较强的执行力，能够承受较强的工作压力。",
],
},
],
},
{
title: "市场",
list: [
{
name: "新媒体运营",
number: "1",
place: "北京",
all1: [
"1.负责公司微信公众号的日常维护，包括文案撰写.图文编辑和发布；",
"2.负责公司对外宣传材料的制作；",
"3.公司网站内容的日常维护和更新；",
"4.协助公司线下活动的策划与执行；",
"5.其他有助于公司市场推广的工作。",
],
all2: [
"1.负责公司微信公众号的日常维护，包括文案撰写.图文编辑和发布；",
"2.负责公司对外宣传材料的制作；",
"3.公司网站内容的日常维护和更新；",
"4.协助公司线下活动的策划与执行；",
"5.其他有助于公司市场推广的工作。",
],
},
],
},
{
title: "销售",
list: [
{
name: "销售工程师",
number: "2",
place: "北京",
all1: [
"1.发掘潜在客户，跟进客户，促进项目成单；",
"2.熟悉产品，能够详细准确的做产品的PPT介绍；",
"3.完成公司给予的销售任务，全力以赴，达成销售目标。",
],
all2: [
"1.大专及以上学历，电子或计算机相关专业优先；",
"2.有过一年以上销售工作经验，做过软件行业销售优先；",
"3.勤奋.积极主动.乐于沟通，能够承担一定的工作强度和压力；",
"4.有较强的语言表达能力以及沟通技巧；",
"5.有工程.质量.数据类管理软件的销售经验优先。",
],
},
{
name: "电话销售(软件)",
number: "3",
place: "北京",
all1: [
"1.根据公司提供的客户资源，负责电话信息调研，补全客户基本信息。",
"2.完成公司既定的信息任务。",
"3.建立潜在客户档案。",
"4.维护老客户关系，反馈情况。",
"5.协助部门做好销售的辅助工作。",
],
all2: [
"1.学历大专以上，良好的沟通表达能力和应变能力。",
"2.有电话销售经验者优先。",
"3.良好的职业道德及责任心。",
],
},
],
},
],
},
jobarr: [],
listnow: [],
jobnow:{},
content:{}
};
},
components: {},
mounted(){
setTimeout(() => {
this.content=JSON.parse(sessionStorage.getItem('about'))
}, 1000);
},
methods: {
gojob(ind) {
this.pointIndex = ind;
this.listnow = this.jobarr[ind];
this.jobIndex = null;
},
gojoball(ind,id) {
if (this.jobIndex == ind) {
this.jobIndex = null;
} else {
this.jobIndex = ind;
console.log(id)
this.$api
.get("/pub/job/Get", {
// conditions: [
// {
// fieldName: "type",
// fieldValue: "开发",
// conditionalType: "Equal",
// },
// ],
id:id
})
.then((r) => {
if (r.success) {
this.jobnow=r.result
console.log(this.jobnow)
product: {
url: "/image/about/about1.png",
title: "公司简介",
content:
"不断提高服务内涵及服务水准是我们的愿景，为国内用户提供优质 优价和最有用的IT产品和服务，推动企业的e化进程是我们的追求。",
about: {
content:
"北京德天博诚科技有限公司成立于2008年，公司集中了制造业信息化领域的专业人才、领先技术和一流产品及服务等资源优势，公司集中了制造业信息化领域的专业人才、领先技术和一流产品及服务等资源优势，形成了具有鲜明特色的核心竞争力，是国内具有较强竞争力的的制造业信息化整体解决方案提供商。",
url1: "/image/about/about2.png",
content1: [
"公司逐步形成了三大核心业务——产品研发、代理销售、咨询服务，为制造业企业提供数字化设计和制造及数字化管理解决方案，通过缩短产品上市时间、减少错误发生等为企业节省大量开支，提升企业的竞争力。",
" 涵盖航天、航空、汽车、船舶、轨道交通、机械、电子等行业，德天公司致力于为大型国有企业、航空航天军工企业以及全球500强在华企业提供专业PLM/DNC/MES/CAPP/PDM解决方案。公司以“产品+集成+服务”的模式、以专业产品为点，为企业的研发设计部门提供功能强大的工具软件，以管理软件为线，为整个制造业企业提供先进的管理方式及理念。",
"德天科技一贯秉承“服务就是价值”的理念，推动企业的e化进程。作为数字化企业服务的提供者，德天科技将以数字化解决方案为核心，以全面客户导向为原则，满足 各种规模企业的需求，为其提供有针对性的IT产品解决方案和服务。"
]
}
});
}
},
gotoPage(index) {
this.currentIndex = index;
this.yearData = this.arr[this.currentIndex];
},
},
created() {
};
}
};
</script>
for (var i = 0; i < this.aboutData.listdata.length; i += 3) {
this.arr.push(this.aboutData.listdata.slice(i, i + 3));
<style lang="less" scoped>
.about1 {
position: relative;
width: 100%;
margin-bottom: 80px;
div {
position: absolute;
top: 140px;
left: 100px;
h4 {
font-size: 24px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #ffffff;
opacity: 1;
margin-bottom: 30px;
}
this.yearData = this.arr[this.currentIndex];
function groupBy(array, f) {
const groups = {};
array.forEach(function (o) {
//注意这里必须是forEach 大写
const group = JSON.stringify(f(o));
groups[group] = groups[group] || [];
groups[group].push(o);
});
return Object.keys(groups).map(function (group) {
return groups[group];
});
p {
width: 470px;
height: 42px;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 300;
color: #ffffff;
opacity: 1;
}
this.$api
.post("/pub/job/List", {
// conditions: [
// {
// fieldName: "type",
// fieldValue: "开发",
// conditionalType: "Equal",
// },
// ],
pageSize: 10,
isDesc: true,
})
.then((r) => {
if (r.success) {
console.log(r)
let items = groupBy(r.result, (u) => {
return u.type;
});
// console.warn(items);
this.jobarr = items;
console.log(this.jobarr);
this.listnow = this.jobarr[0];
}
});
},
};
</script>
<style lang='less' scoped>
@media screen and (max-width: 600px) {
.case-introduce {
display: flex !important;
margin-top: 0.01rem;
min-height: auto !important;
}
.body {
min-height: auto;
}
.about-us {
margin-bottom: 80px;
.about-us-p {
height: 97px;
text-indent: 24px;
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
line-height: 24px;
color: #232323;
opacity: 1;
}
.yuan {
display: flex;
width: 100%;
.about-us-flex {
display: flex;
justify-content: center;
align-items: center;
div {
width: 0.13rem;
height: 0.13rem;
background: #dcdcdc;
border: 1px solid #b0b0b0;
border-radius: 50%;
border: none;
margin: 0.2rem 0.09rem 0.2rem;
}
.current {
background: #4468d6;
padding-left: 60px;
p {
text-indent: 28px;
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
line-height: 30px;
color: #232323;
opacity: 1;
}
}
}
}
</style>
src/pages/index.vue
View file @ 9d034f91
......@@ -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/news/index.vue
View file @ 9d034f91
<template>
<div class="case-main">
<div class="banner1">
<img src="/image/case/tt.jpg" alt="关于我们" />
</div>
<div class="case-introduce">
<div class="title">
<div class="line"></div>
<p>
公司动态
<!-- {{async}} -->
</p>
<div class="line"></div>
</div>
<div class="case-introduce-news">
<div v-for="(item, index) in gslist" :key="index">
<nuxt-link target="_blank" :to="{ path: '/news/' + item.id }">
<img :src="apiurl + item.url" alt="" />
<p>{{ item.name }}</p>
<span>{{ item.note }}</span>
</nuxt-link>
</div>
</div>
<div class="title">
<div class="line"></div>
<p>行业动态</p>
<div class="line"></div>
</div>
<div class="case-introduce-news">
<div v-for="(item, index) in hylist" :key="index">
<nuxt-link target="_blank" :to="{ path: '/news/' + item.id }">
<img :src="apiurl + item.url" alt="" />
<p>{{ item.name }}</p>
<span>{{ item.note }}</span>
</nuxt-link>
<div class="pc1 mt" style="height:auto;">
<Menu
mode="horizontal"
style="z-index:0"
:theme="theme1"
active-name="1"
@on-select="change"
>
<MenuItem name="1" style="width:50%;text-align:center;">
在线咨询
</MenuItem>
<MenuItem name="2" style="width:50%">
下载支持
</MenuItem>
</Menu>
<div class="form-sub" v-if="flag1 == true">
<Form
ref="formValidate"
:model="formValidate"
:rules="ruleValidate"
:label-width="80"
>
<h4 class="form-title">咨询服务</h4>
<div class="form-content">
请填写以下表单信息，我们客服人员会尽快与您联系
</div>
</div>
<Row>
<Col flex="7">
<FormItem label="咨询类型" prop="consult">
<Select
v-model="formValidate.consult"
placeholder="问题咨询"
style="width:180px;"
>
<Option
v-for="(item, index) in consult"
:key="index"
value="item.value"
>{{ item.label }}</Option
>
</Select>
</FormItem>
</Col>
<Col flex="3" class="layout-level" >
<Dropdown trigger="click" style="width:100px;" prop="telephone" @on-click="xx">
<div class="layout-level-left">
联系方式
<Icon type="ios-arrow-down"></Icon>
</div>
<DropdownMenu slot="list">
<DropdownItem>联系方式</DropdownItem>
<DropdownItem>邮箱</DropdownItem>
</DropdownMenu>
</Dropdown>
<!-- <Select v-model="model1">
<Option v-for="(item,index) in model" :key="index" :value="item.value">
{{item.label}}
</Option>
</Select> -->
<Input
v-model="formValidate.telephone"
style="width:180px"
></Input>
</Col>
</Row>
<Input
v-model="formValidate.field"
type="textarea"
:autosize="{ minRows: 8, maxRows: 8 }"
placeholder="请输入"
></Input>
<Row>
<Col flex="7"></Col>
<Col flex="3" style="margin-top:20px;">
<FormItem label="预算">
<InputNumber
type="number"
:min="0"
v-model="formValidate.money"
placeholder="请输入您的预算"
style="width:180px;"
>
</InputNumber>
</FormItem>
</Col>
</Row>
<Row>
<Col flex="7">
<FormItem label="姓名" prop="name">
<Input
v-model="formValidate.name"
placeholder="请输入您的姓名"
style="width:180px"
></Input>
</FormItem>
</Col>
<Col flex="3">
<FormItem label="职位">
<Input
v-model="formValidate.mail"
placeholder="请输入您的职位"
style="width:180px"
></Input>
</FormItem>
</Col>
</Row>
<Row>
<Col flex="7">
<FormItem label="公司" prop="company">
<Input
v-model="formValidate.company"
placeholder="请输入您的公司"
style="width:180px"
></Input>
</FormItem>
</Col>
<Col flex="3">
<FormItem label="城市" prop="city">
<Input
v-model="formValidate.city"
placeholder="您所在的城市是"
style="width:180px"
></Input>
</FormItem>
</Col>
</Row>
<Row>
<Col span="24" style="text-align:center">
<Button type="primary" @click="handleSubmit('formValidate')"
>提交</Button
>
</Col>
</Row>
</Form>
</div>
<div class="phone-pro">
<div class="banner-div">
<img src="/image/case/banner.png" alt="" />
</div>
<div class="title">
<div class="line"></div>
<p>公司动态</p>
<div class="line"></div>
</div>
<div class="case-introduce-news">
<div v-for="(item, index) in gslist" :key="index">
<nuxt-link :to="{ path: '/news/' + item.id }">
<img :src="apiurl + item.url" alt="" />
<p>{{ item.name }}</p>
<span>{{ item.note }}</span>
</nuxt-link>
</div>
</div>
<div class="title">
<div class="line"></div>
<p>行业动态</p>
<div class="line"></div>
</div>
<div class="case-introduce-news" style="margin-bottom: 0.3rem">
<div v-for="(item, index) in hylist" :key="index">
<nuxt-link :to="{ path: '/news/' + item.id }">
<img :src="apiurl + item.url" alt="" />
<p>{{ item.name }}</p>
<span>{{ item.note }}</span>
</nuxt-link>
</div>
</div>
<div class="foot">
<p class="title">联系我们</p>
<span
>地址：北京市朝阳区慧忠北路103号洛克时代中心A座<br />电话：010-68661832<br />邮箱：sales@mes123.com</span
>
<div class="foot_three">
<div>
<p>见著科技公众号</p>
<img src="/image/zh.jpg" alt="" />
</div>
<div>
<p>见著科技公众号</p>
<img src="/image/zh.jpg" alt="" />
</div>
<div>
<p>见著科技公众号</p>
<img src="/image/zh.jpg" alt="" />
</div>
</div>
</div>
<div v-if="flag2 == true">
<div>111111</div>
</div>
</div>
</template>
<script>
import Config from "@/config";
export default {
head: {
title: "新闻---德天博城",
},
name: "",
async asyncData({ $axios }) {
const gsData = await $axios.$post(
"http://47.92.102.113:6006/pub/news/List",
{
conditions: [
data() {
return {
model1: "",
theme1: "light",
table: 2,
flag1: true,
flag2: false,
consult: [
{
label: "项目需求",
value: "项目需求"
},
{
label: "MBD数字化设计解决方案",
value: "MBD数字化设计解决方案"
},
{
label: "数字化仿真制造解决方案",
value: "数字化仿真制造解决方案"
},
{
label: "机电软研发协同解决方案",
value: "机电软研发协同解决方案"
}
],
method: [
{
value: "telephone",
label: "联系电话"
},
{
value: "wechat",
label: "微信"
}
],
formValidate: {
consult: "", //咨询类型
telephone: "", //联系电话
field: "", //文本域
money: 0, //预算
name: "", //姓名
position: "", //职位
company: "", //公司
city: "" //城市
},
ruleValidate: {
consult: [
{
fieldName: "type",
fieldValue: 0,
conditionalType: "Equal",
},
required: true,
message: "请选择咨询类型",
trigger: "blur"
}
],
telephone: [
{
fieldName: "status",
fieldValue: 0,
conditionalType: "Equal",
},
required: true,
message: "请输入你的手机号",
trigger: "blur"
}
],
pageSize: 6,
isDesc: true,
}
);
const hyData = await $axios.$post(
"http://47.92.102.113:6006/pub/news/List",
{
conditions: [
name: [
{
fieldName: "type",
fieldValue: 1,
conditionalType: "Equal",
},
required: true,
message: "请输入你的姓名",
trigger: "blur"
}
],
company: [
{
fieldName: "status",
fieldValue: 0,
conditionalType: "Equal",
},
required: true,
message: "请输入你的公司*必填",
trigger: "blur"
}
],
pageSize: 6,
isDesc: true,
city: [
{
required: true,
message: "必填项",
trigger: "blur"
}
]
}
);
return {
hylist: hyData.result,
gslist: gsData.result,
};
},
data() {
return {
apiurl: Config.apiBaseUrl,
list: [],
hylist: [],
gslist: [],
imgIndex: null,
};
},
mounted() {
// this.$api
// .post("/pub/news/List", {
// pageSize: 10,
// isDesc: true,
// })
// .then((r) => {
// if (r.success) {
// console.log(r.result);
// r.result.forEach((e) => {
// if (e.type == 1 && e.status==0) {
// this.hylist.push(e);
// }
// if (e.type == 0 && e.status==0){
// this.gslist.push(e);
// }
// });
// }
// });
// this.hylist.splice(6);
// this.gslist.splice(6);
},
created() {},
mounted() {},
methods: {
imgmouseover(index) {
this.imgIndex = index;
change(name) {
console.log(name);
if (name == 1) {
this.flag1 = true;
this.flag2 = false;
} else if (name == 2) {
this.flag1 = false;
this.flag2 = true;
}
},
imgmouseleave(inde) {
this.imgIndex = null;
handleSubmit(name) {
this.$refs[name].validate(valid => {
if (valid) {
this.$Message.success("成功!");
console.log(this.formValidate);
} else {
this.$Message.error("请确保您的信息填写完整在提交!");
}
});
},
},
xx(name ){
console.log(name)
}
}
};
</script>
<style scoped lang='less'>
.logo_div {
margin-top: 60px;
<style lang="less">
.pc1 {
margin-top: 100px;
min-height: 740px;
.c1 {
// border: 1px solid #f90;
}
}
h5 {
font-size: 26px;
font-family: Microsoft YaHei;
</style>
<style lang="less">
.ivu-menu-item {
width: 50%;
text-align: center;
font-size: 20px;
color: #294982;
font-weight: bold;
color: #333333;
line-height: 42px;
margin-top: 60px;
}
h6 {
.form-sub {
width: 840px;
margin: 40px auto 80px;
.form-title {
text-align: center;
font-size: 18px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #232323;
opacity: 1;
}
.form-content {
margin: 10px auto 40px;
text-align: center;
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #6a6a6a;
opacity: 1;
}
}
.ivu-form-item-label {
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #999999;
line-height: 25px;
font-family: PingFang SC;
font-weight: 500;
color: #232323;
opacity: 1;
}
@media screen and (max-width: 600px) {
.banner1 {
display: none;
}
.ivu-form-item-content {
display: flex;
}
.all {
margin-bottom: 0.35rem;
.layout-level{
display: flex;
}
.foot {
width: 115%;
.layout-level-left{
height: 32px;
display: flex;
justify-content: center;
line-height: 32px;
cursor:pointer;
i{
line-height: 32px;
}
}
</style>
src/pages/product/catia.vue
View file @ 9d034f91
......@@ -13,9 +13,9 @@
</div>
</div>
<div class="pc1-head">
<div class="pc1-head-left"></div>
<h4>{{ product[i].top }}</h4>
<div class="pc1-head-right"></div>
<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">
......@@ -40,7 +40,7 @@
</div>
<div class="pc1-core-border">
<div
class="pc1-core-box card1"
class="pc1-core-box card2"
v-for="(item, index) in product[i].core"
:key="index"
>
......@@ -63,8 +63,10 @@
class="pc1-problems-box "
v-for="(item, index) in product[i].problems.catia"
:key="index"
>
>
<div>
<img :src="item.url" alt="" />
</div>
<h4>{{ item.title }}</h4>
</div>
</div>
......@@ -78,7 +80,7 @@
</div>
<div class="pc1-function-border">
<div
class="pc1-function-box card1"
class="pc1-function-box1 card2"
v-for="(item, index) in product[i].function"
:key="index"
>
......@@ -96,22 +98,42 @@
</div>
<div class="pc1-scene-lication">
<div class="pc1-scene-lt">
<div class="pc1-scene-back1 pl">
<img width="720px" height="400px" :src="product[i].icon.catia.url1" alt="" />
<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>
<div class="pc1-scene-back2 pl">
<img width="650px" height="400px" :src="product[i].icon.catia.url2" alt="" />
<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="" />
<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="" />
<img
width="770px"
height="400px"
:src="product[i].icon.catia.url4"
alt=""
/>
<div><span>{{product[i].icon.catia.title4}}</span></div>
</div>
</div>
......@@ -125,12 +147,14 @@
export default {
name: "",
head: {
title: "德天博城3DEXPE"
title: "德天博城CATIA"
},
data() {
return {
i: 1,
duct: {},
clientWidth:"",
left:"",
product: [
{
flag: 0,
......@@ -209,7 +233,7 @@ export default {
{
flag: 1,
top: "基于数字化模型的产品设计",
url1: "/image/catia/03336.png",
url1: "/image/catia/0301.png",
url2: "/image/catia/0302.png",
title: "3D CAD设计和工程软件",
//产品简介
......@@ -221,29 +245,29 @@ export default {
},
// 背景图
advert: {
img: "/image/catia/03334.png" //汽车
img: "/image/catia/0310.png" //汽车
},
//核心要素
core: [
{
url: "/image/catia/0305.png",
url: "/image/catia/0321.png",
title: "变量和参数化建模",
content: "CATIA具有在整个产品周期内提供了变量驱动及后参数化能力。"
},
{
url: "/image/catia/0306.png",
url: "/image/catia/0322.png",
title: "模块的全相关性",
content:
"CATIA的各个模块基于统一的数据平台，三维模型的修改，能完全体现 在二维模型，模拟分析，模具和数控加工的程序中"
},
{
url: "/image/catia/0307.png",
url: "/image/catia/0323.png",
title: "并行工程的设计环境",
content:
"总体设计部门将基本的结构尺寸发放出去，各分系统的人员便可开始工作，既可协同工作，又不互相牵连。实现真正的并行工程设计环境"
},
{
url: "/image/catia/0308.png",
url: "/image/catia/0324.png",
title: "覆盖产品开发全过程",
content:
"从单个零件的设计到最终电子样机的建立,CATIA 提供了完备的设计能力"
......@@ -251,7 +275,7 @@ export default {
],
// 应对问题
problems: {
url: "/image/catia/03335.png",
url: "/image/catia/0330.png",
catia: [
{
url: "/image/catia/0331.png",
......@@ -275,29 +299,29 @@ export default {
//功能模块
function: [
{
url: "/image/catia/0311.png",
url: "/image/catia/0341.png",
title: "零件设计",
content: "在直观的环境下，用高效强大的造型特征设计复杂零件"
},
{
url: "/image/catia/0312.png",
url: "/image/catia/0342.png",
title: "钣金与创成式曲面",
content: "非常完整的曲线操作工具和最基础的曲线构造工具"
},
{
url: "/image/catia/0313.png",
url: "/image/catia/0343.png",
title: "装配设计",
content:
"高效率的工具如、碰撞和间隙检查、自动BOM表生成等可减少设计时间、提高了装配质量"
},
{
url: "/image/catia/0314.png",
url: "/image/catia/0344.png",
title: "模具设计",
content:
"模具设计产品允许快速、经济地创建注塑模具，可以使用标准目录库中已经预定义好的组件"
},
{
url: "/image/catia/0315.png",
url: "/image/catia/0345.png",
title: "电气系统设计",
content:
"可实现电器零件的设计装配、功能定义，电气线束的装配、生成和展平等内容"
......@@ -305,23 +329,35 @@ export default {
],
icon: {
url: "",
catia:{
url1:"/image/catia/03330.png",
title1:"航空航天与国防",
url2:"/image/catia/03331.png",
title2:"工业设备",
url3:"/image/catia/03332.png",
title3:"建筑工程与施工",
url4:"/image/catia/03333.png",
title4:"汽车与交通运输",
catia: {
url1: "/image/catia/0351.png",
title1: "航空航天与国防",
url2: "/image/catia/0352.png",
title2: "工业设备",
url3: "/image/catia/0353.png",
title3: "建筑工程与施工",
url4: "/image/catia/0354.png",
title4: "汽车与交通运输"
}
}
}
]
};
},
methods: {},
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
// 数据筛选
this.product.forEach((item, index) => {
if (item.flag == this.i) {
......@@ -332,308 +368,3 @@ export default {
}
};
</script>
<style lang="less" scoped>
// 头部指示
.instructions {
border-left: 10px solid #294982;
height: 60px;
padding-left: 15px;
h4 {
line-height: 60px;
font-size: 30px;
font-family: Alibaba Sans;
font-weight: 900;
color: #232323;
opacity: 1;
}
p {
font-size: 24px;
font-family: Microsoft YaHei;
font-weight: 400;
line-height: 0px;
color: #294982;
opacity: 0.2;
position: relative;
top: -10px;
}
}
.mt {
margin-bottom: 90px;
}
.pc1 {
width: 1400px;
height: auto;
border: 0px solid #f89;
margin: 100px auto 0px;
.pc1-top {
//顶部图片标题
display: flex;
.pc1-left {
width: 781px;
height: 474px;
margin-right: 103px;
}
.pc1-right {
width: 480px;
height: 474px;
img {
margin-top: 65px;
height: 172px;
}
div {
text-align: center;
padding-top: 75px;
height: 47px;
font-size: 30px;
font-family: Alibaba Sans;
font-weight: 900;
color: #232323;
opacity: 1;
}
}
}
.pc1-head {
//标题导语
display: flex;
justify-content: space-between;
align-items: center;
.pc1-head-left {
width: 480px;
height: 2px;
background: linear-gradient(
297deg,
#201da3 0%,
rgba(255, 255, 255, 0) 100%
);
opacity: 1;
border-radius: 0px;
}
h4 {
font-size: 34px;
}
.pc1-head-right {
width: 480px;
height: 2px;
background: linear-gradient(
63deg,
#201da3 0%,
rgba(255, 255, 255, 0) 100%
);
opacity: 1;
border-radius: 0px;
}
}
.pc1-product {
//产品简介
margin-top: 3.75rem;
margin-bottom: 3.75rem;
.pc1-pr-content {
margin-top: 40px;
padding-left: 30px;
}
}
.pc1-advert {
//背景图
width: 100%;
margin-bottom: 80px;
}
.pc1-core {
//核心要素
margin-bottom: 20px;
.pc1-core-border {
// height: 420px;
padding-left: 80px;
padding-right: 80px;
display: flex;
justify-content: space-between;
align-items: center;
.pc1-core-box {
width: 220px;
height: 300px;
border-radius: 8px;
}
}
}
// 应对问题
.pc1-problems {
.pc1-problems-border {
// height: 500px;
position: relative;
margin-top: 60px;
margin-bottom: 80px;
img {
opacity: .2;
}
.pc1-problems-module {
position: absolute;
top: 0;
left: 0;
width: 1400px;
height: 100%;
display: flex;
justify-content: space-evenly;
.pc1-problems-box {
width: 100px;
z-index: 1;
text-align: center;
img{
margin-top: 190px;
width: 50px;
height: 50px;
}
h4{
margin-top: 25px;
line-height: 21px;
font-size: 16px;
color: #000;
}
}
}
}
}
.pc1-function {
//功能模块
margin-bottom: 20px;
.pc1-function-border {
padding-left: 80px;
padding-right: 80px;
display: flex;
justify-content: space-between;
height: 420px;
align-items: center;
.pc1-function-box {
width: 220px;
height: 300px;
border-radius: 8px;
}
}
}
//应用场景
.pc1-scene {
//应用场景
padding-bottom: 20px;
.pc1-scene-lication {
height: 800px;
width: 100%;
margin: 60px auto;
.pc1-scene-lt{
margin-bottom: 30px;
display: flex;
justify-content: space-between;
.pc1-scene-back1{
width: 720px;
position: relative;
div{
position: absolute;
width: 720px;
height: 45px;
background: rgba(41, 73, 130, 0.5);
bottom: 0;
text-align: center;
line-height: 45px;
span{
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #FFFFFF;
opacity: 1;
}
}
}
.pc1-scene-back2{
width: 650px;
height: 400px;
position: relative;
div{
position: absolute;
width: 650px;
height: 45px;
background: rgba(41, 73, 130, 0.5);
bottom: 0;
text-align: center;
line-height: 45px;
span{
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #FFFFFF;
opacity: 1;
}
}
}
}
.pc1-scene-lb{
display: flex;
justify-content: space-between;
.pc1-scene-tail1{
width: 600px;
height: 400px;
position: relative;
div{
position: absolute;
width: 600px;
height: 45px;
background: rgba(41, 73, 130, 0.5);
bottom: 0;
text-align: center;
line-height: 45px;
span{
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #FFFFFF;
opacity: 1;
}
}
}
.pc1-scene-tail2{
width: 770px;
height: 400px;
position: relative;
div{
position: absolute;
width: 770px;
height: 45px;
background: rgba(41, 73, 130, 0.5);
bottom: 0;
text-align: center;
line-height: 45px;
span{
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #FFFFFF;
opacity: 1;
}
}
}
}
}
}
}
// 卡片布局
.card1 {
box-shadow: 0px 0px 10px 0px rgb(196, 195, 195);
img {
margin: 30px 85px;
text-align: center;
}
h4 {
font-size: 20px;
text-align: center;
height: 69px;
padding: 0px 20px;
color: #2c4b84;
}
div {
width: 100%;
padding: 0px 20px;
line-height: 15px;
color: #454545;
}
}
.card1:hover{
box-shadow: 0px 0px 20px 5px #c3c2c5;
}
</style>
src/pages/product/delmia.vue
View file @ 9d034f91
<template>
<div>
<div class="pc">
<div class="product-introduce">
<div class="propduct-back">
<div class="propduct-background1">
<img class="img1" src="/image/delmia/0401.png" alt="" />
</div>
<div class="propduct-background2">
<img src="/image/delmia/0402.png" alt="" />
<h4>数字化企业的互动制造应用软件</h4>
</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 style="width:991px;">
<div class="title" style="justify-content: center;">
<div class="line"></div>
<p>{{ product.title }}</p>
<div class="line"></div>
<div class="pc1-right">
<img :src="product[i].url2" width="100%" height="50%" alt="" />
<div>
{{ product[i].title }}
</div>
</div>
<h5 style="text-align:center">产品简介</h5>
<h6 style="text-align:center">Product introduction</h6>
<span
>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
product.jj1
}}</span
>
<div v-if="product.jj2 != ''" class="jj2-div" style="margin-bottom:30px">
<br />
<span
>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
product.jj2
}}</span
>
</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="advertisement">
<img style="width:1200px" src="/image/delmia/0404.png" alt="" />
<!-- 背景图 -->
<div class="pc1-advert">
<img :src="product[i].advert.img" alt="" />
</div>
<div class="product-merit">
<h5>核心要素</h5>
<h6>Core advantage</h6>
<product-functions3
:list="product.functions.list"
v-if="product.functions.style == false"
/>
<product-functions2
:list="product.functions.list"
v-if="product.functions.style == true"
/>
<!-- 核心要素 && 关键步骤 -->
<div class="pc1-core">
<div class=" instructions">
<h4>关键步骤</h4>
<p>COMMITTED STEP</p>
</div>
<div class="pc1-core-border">
<div
class="pc1-core-box card2"
v-for="(item, index) in product[i].core"
:key="index"
>
<img width="50px" height="50px" :src="item.url" alt="" />
<h4>{{ item.title }}</h4>
<div>{{ item.content }}</div>
</div>
</div>
</div>
<div class="ydwt">
<img class="ydwt-img" src="/image/delmia/0406.png" alt="">
<h5>应对问题</h5>
<h6>Coping with problems</h6>
<div class="ydwt-all">
<div v-for="(item,index) in product.ydwtlist" :key="index">
<img :src="item.url" alt="">
<p>{{item.p}}</p>
<!-- 应对问题 -->
<div class="pc1-problems">
<div class="instructions">
<h4>应对问题</h4>
<p>COPING WITH PROBLEMS</p>
</div>
<div class="pc1-problems-border" style="height:500px">
<!--height临时使用-->
<img :src="product[i].problems.url" alt="" />
<div class="pc1-problems-module">
<div
class="pc1-problems-box "
v-for="(item, index) in product[i].problems.catia"
:key="index"
>
<div>
<img :src="item.url" alt="" />
</div>
<h4>{{ item.title }}</h4>
</div>
</div>
</div>
</div>
</div>
<div class="product-merit" style="background-color: rgb(239, 246, 255);">
<div class="pd"></div>
<h5>功能模块</h5>
<h6>function modul</h6>
<product-functions2 :list="product.functions2.list" v-if="product.functions2.style==true"/>
<product-functions3 :list="product.functions2.list" v-if="product.functions2.style==false"/>
</div>
<div class="product-merit yyjz">
<h5>应用价值</h5>
<h6>Application vale</h6>
<div
style="display: flex;justify-content: space-evenly;width: 1200px;flex-wrap:wrap;margin-top:47px;"
>
<div v-for="(item,index) in product.functions3" :key="index">
<div style="width:301px;height:330px;background:url(/image/delmia/0407.png);background-size:100% 100%">
<div style="height:50%;display:flex"><img width="100px" style="margin:auto" height="100px" src="/image/0001.png" alt=""></div>
<div style="height:50%;padding:40px 50px;font-size:20px">
{{item.title}}
<!-- 功能模块 -->
<div class="pc1-function">
<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>
</div>
</div>
<h4>{{ item.title }}</h4>
<div class="card3-content">{{item.content}}</div>
</div>
</div>
</div>
</div>
<!-- 应用价值 -->
<div class="pc1-lication">
<div class="instructions">
<h4>应用价值</h4>
<p>APPLICATION VALE</p>
</div>
<div class=" mt mb">
<div class="pc1-lication-layout" v-for="(item,index) in product[i].lication" :key="index">
<img :src="item.url" alt="">
<h4>{{item.content}}</h4>
</div>
</div>
</div>
</div>
</div>
</template>
......@@ -98,316 +116,151 @@
export default {
name: "",
head: {
title: "SaaS MES云端协同---北京见著科技有限公司--MES系统"
title: "德天博城CATIA"
},
components: {},
data() {
return {
pointIndex: 0,
product: {
banner: "/image/phm/sm.png",
bannerphone: "/image/phm/smp.jpg",
title: "为实现卓越运营的数字解决方案",
jj1: "DELMIA向随需应变（on-demand）和准时生产（just-in-time）的制造流程提供完整的数字解决方案，令制造厂商缩短产品上市时间，同时降低生产成本、促进创新。",
jj2:
"是DELMIA数字制造解决方案可以使制造部门设计数字化产品的全部生产流程，在部署任何实际材料和机器之前进行虚拟演示。",
url: "/image/phm/t527.png",
f1: true,
f2: true,
spcj: {
title:
"PHM适用于是密集应用大数据的典型工业领域，是工业互联网的重要组成部分。PHM强调资产设备管理中的状态感知、数据监控与分析，通过监控设备健康状况、故障频发区域与周期，预测故障的发生，从而大幅度提高运维效率。",
url: [
"/image/delmia/0307.png",
"/image/delmia/0308.png",
"/image/delmia/0309.png",
"/image/delmia/0310.png",
]
},
functions: {
style: false,
list: [
i: 0,
duct: {},
clientWidth: "",
left: "",
product: [
{
header: "DELMIA",
flag: 2,
top: "为实现卓越运营的数字解决方案",
url1: "/image/delmia/0401.png",
url2: "/image/delmia/0402.png",
title: "数字化企业的互动制造应用软件",
//产品简介
product: {
p1:
"DELMIA向随需应变（on-demand）和准时生产（just-in-time）的制造流程提供完整的数字解决方案，令制造厂商缩短产品上市时间，同时降低生产成本、促进创新。",
p2:
"是DELMIA数字制造解决方案可以使制造部门设计数字化产品的全部生产流程，在部署任何实际材料和机器之前进行虚拟演示。"
},
// 背景图
advert: {
img: "/image/delmia/0410.png"
},
//关键步骤
core: [
{
url: "/image/delmia/0206.png",
url: "/image/delmia/0421.png",
title: "第一阶段",
content: ["建立资源库、工艺流程，定制工艺模板、关联产品工艺数据模型，建立三维工艺仿真和工艺流程规范"]
content:
"建立资源库、工艺流程、定制工艺模板、关联产品工艺数据模型，建立三维工艺仿真和工艺流程规范"
},
{
url: "/image/delmia/0207.png",
url: "/image/delmia/0422.png",
title: "第二阶段",
content: ["在前一阶段工作的基础上，利用DPE建立MHub进行装配工艺的详细设计和仿真，并生成工艺指令、相关工艺配套表和MBOM等"]
},
]
},
functions2: {
style: true,
list: [
content:
"在前一阶段工作的基础上，利用DEP建立MHub进行装配工艺的详细设计和仿真，并生成工艺指令、相关工艺配套表和MBOM等"
}
],
// 应对问题
problems: {
url: "/image/delmia/0430.png",
catia: [
{
url:"/image/phm/tc7.png",
title:"DPE",
content:["面向制造过程设计"],
},{
url:"/image/phm/tc7.png",
title:"QUEST",
content:["面向物流过程分析"],
},
{
url:"/image/phm/tc7.png",
title:"PDM",
content:["面向装配过程分析"],
},{
url:"/image/phm/tc7.png",
title:"Human",
content:["面向人机分析"],
},
{
url:"/image/phm/tc7.png",
title:"Robotics",
content:["面向机器人仿真"],
},
{
url:"/image/phm/tc7.png",
title:"VNC",
content:["面向虚拟数控加工方针"],
url: "/image/delmia/0431.png",
title: "工艺规划"
},
{
url: "/image/delmia/0432.png",
title: "资源建模和模拟"
},
{
url: "/image/delmia/0433.png",
title: "数字化制造基础"
}
]
},
// {
// url: "/image/phm/tc12.png",
// title: "参数管理",
// content: [
// "展示故障发生时间段的故障参数及参数曲线，提供参数历史数据订阅查询，提供参数库管理。"
// ]
// },
// {
// url: "/image/phm/tc13.png",
// title: "模型库",
// content: [
// "对设备进行管理和维护，根据不同用户设置权限限制，按建设模型的不同阶段展示不同的模型相关属性，并提供新建模型、升级版本、模型重用和展示模型效果等功能。"
// ]
// },
// {
// url: "/image/phm/tc14.png",
// title: "预警信息管理",
// content: [
// "展示所有实时预警信息和预警相关的统计图表，提供多维度的查询和导出功能,支持查看预警的相关实时参数和参数曲线，支持预警信息自动发送以及初步判断。"
// ]
// },
// {
// url: "/image/phm/tc15.png",
// title: "健康管理",
// content: [
// "根据既定规则对设备进行健康度评测，动态监控车辆的运行状态和健康状态，为潜在维修问题的发现和诊断，突发故障的高效处理，以及决策提供数据依据，从而提高维保效率和质量，保障设备更加安全可靠地运行。"
// ]
// }
//功能模块
function: [
{
url: "/image/delmia/0441.png",
title: "DPE",
content: "面向制造过程设计"
},
{
url: "/image/delmia/0442.png",
title: "QUEST",
content: "面向物流过程分析"
},
{
url: "/image/delmia/0443.png",
title: "PDM",
content: "面向装配过程分析"
},
{
url: "/image/delmia/0444.png",
title: "Human",
content: "面向人机分析"
},
{
url: "/image/delmia/0445.png",
title: "Robotics",
content: "面向机器人仿真"
},
{
url: "/image/delmia/0446.png",
title: "VNC",
content: "面向虚拟数控加工方针"
}
],
// 应用价值
lication: [
{
url:"/image/delmia/0451.png",
content: "可以根据工厂实际情况，定制自己的工艺层次结构和资源库"
},
{
url:"/image/delmia/0452.png",
content:
"进行详细的工业工程时间和成本的预先分析，计算出最佳经济方案"
},
{
url:"/image/delmia/0453.png",
content: "减少工艺设计和工业工程管理中的重复工作，提高了重用率"
},
{
url:"/image/delmia/0454.png",
content: "减少工艺规划时间，提高规划质量"
},
{
url:"/image/delmia/0455.png",
content: "预见并减少规划风险，减少工程更改成本"
}
]
},
functions3: [
{
url: "/image/phm/tc20.png",
title: "1、可以根据工厂实际情况，定制自己的工艺层次结构和资源库",
content: ["预知故障时间和位置，提高运行可靠性 "]
},
{
url: "/image/phm/tc21.png",
title: "2、进行详细的工业工程时间和成本的预先分析，计算出最佳经济方案",
content: ["提高可用时长，预测剩余使用寿命 "]
},
{
url: "/image/phm/tc22.png",
title: "3、 减少工艺设计和工业工程管理中的重复工作，提高了重用率",
content: ["提高维修准确性，降低维修成本 "]
},
{
url: "/image/phm/tc23.png",
title: "4、 减少工艺规划时间，提高规划质量",
content: ["辅助运维决策优化，提高运维价值"]
},
{
url: "/image/phm/tc23.png",
title: "5、预见并减少规划风险、减少工程更改成本",
content: ["辅助运维决策优化，提高运维价值"]
}
],
ydwtlist: [
{ url: "/image/phm/tc7.png", p: "工艺规划" },
{
url: "/image/phm/tc8.png",
p: "资源建模和模拟"
},
{
url: "/image/phm/tc9.png",
p: "数字化制造基础"
},
],
gnmb:[
{
url:"/image/phm/tc7.png",
title:"DPE",
content:"面向制造过程设计",
},{
url:"/image/phm/tc7.png",
title:"QUEST",
content:"面向制造过程设计",
},
{
url:"/image/phm/tc7.png",
title:"PDM",
content:"面向装配过程分析",
},{
url:"/image/phm/tc7.png",
title:"Human",
content:"面向人机分析",
},
{
url:"/image/phm/tc7.png",
title:"Robotics",
content:"面向机器人仿真",
},
{
url:"/image/phm/tc7.png",
title:"VNC",
content:"面向虚拟数控加工方针",
},
]
}
}
]
};
},
created() {
// this.length()
},
methods: {
hover(i) {
this.pointIndex = i;
},
watch() {}
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;
// 数据筛选
this.product.forEach((item, index) => {
if (item.flag == this.i) {
return this.i;
}
});
this.duct = this.product[this.i];
}
};
</script>
<style lang="less" scoped>
.propduct-back {
width: 100%;
height: 100%;
min-height: 800px;
display: flex;
justify-content: space-between;
.propduct-background1 {
flex: 0.6;
.img1{
width: 100%;
}
}
.propduct-background2 {
flex: 0.4;
display: flex;
flex-direction: column;
text-align: center;
img{
margin-top: 20%;
width: 100%;
}
h4 {
margin-top: 10%;
line-height: 30px;
font-size: 30px;
}
}
}
.pd {
position: absolute;
width: 100%;
}
.pd1 {
display: flex;
flex-direction: column;
align-items: center;
width: 1200px;
}
.cj {
margin-top: 0.3rem;
img {
width: 100%;
}
}
.foot {
width: 115%;
}
.advertisement{
width: 100%;
text-align: center;
.advertisementci{
display: inline-block;
font-size:32px ;
font-weight: bold;
color: #000;
position: relative;
top: -300px;
left: 30%;
line-height: 50px;
}
}
<style lang="less">
.gnmb{
width: 1200px;
text-align: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
.gnmb-all{
width: 280px;
height: 300px;
padding: 20px 10px;
margin-bottom: 20px;
background: #fff;
text-align: center;
font-size: 20px;
display: flex;
border: 5px solid rgb(148, 144, 144);
text-align: center;
img{
flex: .5;
}
h4{
flex: .15;
}
div{
margin: 0;
flex: .35;
width: 100%;
text-align: center;
}
}
}
.beijing{
align-items:center;
div{
flex-direction:row-reverse;
img:nth-child(3n){
position: relative;
bottom: 146px;
opacity: .6;
width: 568px;
}
img:nth-child(3n-2){
width: 568px;
height: 320px;
}
p{
width: 568px;
text-align: center;
line-height: 72px;
height: 72px;
position: relative;
bottom: 72px;
font-size: 20px;
font-weight: bold;
color: #fff;
}
}
}
.yyjz{
height: 900px;
}
.card-body{
justify-content: center;
}
</style>
src/pages/product/dvia.vue 0 → 100644
View file @ 9d034f91
<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/pages/product/enovia.vue
View file @ 9d034f91
<template>
<div>
<div class="pc">
<div class="product-introduce">
<div class="propduct-back">
<div class="propduct-background1">
<img class="img1" src="/image/enovia/0501.png" alt="" />
</div>
<div class="propduct-background2">
<img src="/image/enovia/0502.png" alt="" />
<h4>设计协同技术</h4>
<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 class="title">
<div class="line"></div>
<p>{{ product.title }}</p>
<div class="line"></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>
<h5>产品简介</h5>
<h6>Product introduction</h6>
<span
>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
product.jj1
}}</span
>
<div v-if="product.jj2 != ''" class="jj2-div">
<br />
<span
>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
product.jj2
}}</span
>
<div class="pc1-pr-content">
<p>{{ product[i].product.p1 }}</p>
<p>{{ product[i].product.p2 }}</p>
</div>
<!-- <img :src="product.url" alt="" style="margin-top:29px;" /> -->
</div>
<div class="advertisement">
<img style="width:1200px" src="/image/enovia/0504.png" alt="" />
<!-- 背景图 -->
<div class="pc1-advert">
<img :src="product[i].advert.img" alt="" />
</div>
<div class="product-merit">
<h5>核心要素</h5>
<h6>Core advantage</h6>
<product-functions3
:list="product.functions.list"
v-if="product.functions.style == false"
/>
<product-functions2
:list="product.functions.list"
v-if="product.functions.style == true"
/>
<!-- 核心要素 -->
<div class="pc1-core">
<div class=" instructions">
<h4>核心要素</h4>
<p>CORE ELEMENTS</p>
</div>
<div class="pc1-core-border">
<div
class="pc1-core-box card2"
v-for="(item, index) in product[i].core"
:key="index"
>
<img width="50px" height="50px" :src="item.url" alt="" />
<h4>{{ item.title }}</h4>
<div>{{ item.content }}</div>
</div>
</div>
</div>
<div class="ydwt">
<img class="ydwt-img" src="/image/enovia/0506.png" alt="">
<h5>应对问题</h5>
<h6>Coping with problems</h6>
<div class="ydwt-all">
<div v-for="(item,index) in product.ydwtlist" :key="index">
<img :src="item.url" alt="">
<p>{{item.p}}</p>
<!-- 应对问题 -->
<div class="pc1-problems">
<div class="instructions">
<h4>应对问题</h4>
<p>COPING WITH PROBLEMS</p>
</div>
<div class="pc1-problems-border1">
<img :src="product[i].problems.url" alt="" />
<div class="enovia">
<div
v-for="(item, index) in product[i].problems.catia"
:key="index"
class="enovia-card"
>
<img :src="item.url" alt="" />
<h4>
<span v-for="(val, index) in item.title" :key="index"
>{{ val }}<br
/></span>
</h4>
</div>
</div>
</div>
</div>
</div>
<div class="product-merit" style="background-color: rgb(239, 246, 255);">
<div class="pd"></div>
<h5>功能模块</h5>
<h6>function modul</h6>
<product-functions2 :list="product.functions2.list" v-if="product.functions2.style==true"/>
<product-functions3 :list="product.functions2.list" v-if="product.functions2.style==false"/>
</div>
<!-- <div class="ydwt" style="height:600px">
<img class="ydwt-img" style="height:600px" src="/image/enovia/0503.png" alt="" />
<h5>功能模块</h5>
<h6>function modul</h6>
<div class="ydwt-all gnmk">
<div class="ydwt-all-border gnmk-all" v-for="(item, index) in product.gnmk" :key="index">
<img :src="item.url" alt="" />
<!-- 功能模块 -->
<div class="pc1-function">
<div class="instructions">
<h4>功能模块</h4>
<p>FUNCTION MODUL</p>
</div>
<div class="pc1-function-border">
<div
class="pc1-function-box 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>{{ item.content }}</div>
</div>
</div>
</div> -->
<div class="product-merit">
<h5>应用场景</h5>
<h6>Adaptation scenarios</h6>
<div style="display: flex;width: 1200px;flex-wrap:wrap;margin-top:47px;
height:700px" class="gnmb">
<div class="gnmb-border" v-for="(item,index) in product.gnmb" :key="index">
<img class="img1" :src="item.url" alt="">
<div>{{item.title}}</div>
</div>
<!-- 应用场景 -->
<div class="pc1-scene">
<div class="instructions">
<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>
<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>
<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>
</div>
</div>
</template>
......@@ -103,338 +149,151 @@
export default {
name: "",
head: {
title: "SaaS MES云端协同---北京见著科技有限公司--MES系统"
title: "德天博城CATIA"
},
components: {},
data() {
return {
pointIndex: 0,
product: {
banner: "/image/phm/sm.png",
bannerphone: "/image/phm/smp.jpg",
title: "ENOVIA解决方案",
jj1: "ENOVIA同达索系统虚拟设计工具（CATIA）一起构建其PLM系统。使企业把人员、流程、内容和系统联系在一起，能够带给企业巨大的竞争优势。通过贯穿产品全生命周期统一和优化产品开发流程，ENOVIA在企业内部和外部帮助企业轻松地开展项目并节约成本。",
jj2:
"ENOVIA贯穿宽广的工业领域满足业务流程需要，用来管理简单或工程复杂性高的产品。 其部署可以从小型开发团队直到拥有数千名用户的扩展型企业，其中涵盖供货商和合作伙伴。",
url: "/image/phm/t527.png",
f1: true,
f2: true,
spcj: {
title:
"PHM适用于是密集应用大数据的典型工业领域，是工业互联网的重要组成部分。PHM强调资产设备管理中的状态感知、数据监控与分析，通过监控设备健康状况、故障频发区域与周期，预测故障的发生，从而大幅度提高运维效率。",
url: [
"/image/enovia/0507.png",
"/image/enovia/0508.png",
"/image/enovia/0509.png",
"/image/enovia/0510.png",
]
},
functions: {
style: false,
list: [
i: 0,
duct: {},
clientWidth:"",
left:"",
product: [
{
header: "ENOVIA",
flag: 3,
top: "为实现卓越运营的数字解决方案",
url1: "/image/enovia/0501.png",
url2: "/image/enovia/0502.png",
title: "设计协同技术",
//产品简介
product: {
p1:
"ENOVI同达索系统虚拟设计工具（CATIA）一起构建其PLM系统。使企业把人员、流程、内容和系统联系到一起，能够带给企业巨大的竞争优势，通过贯穿给企业巨大的生命周期统一和优化产品开发流程，ENOVIA在企业内部和外部帮助企业轻松得开展项目并节约成本",
p2:
"ENOVIA贯穿宽广的工业领域满足业务流程需要，用来管理简单或工程复杂性高的产品。其布署可以从小型开发团队直到拥有千名用户的拓展型企业，其中涵盖供货商和合作伙伴。"
},
// 背景图
advert: {
img: "/image/enovia/0510.png"
},
//核心要素
core: [
{
url: "/image/enovia/0206.png",
url: "/image/enovia/0521.png",
title: "业务逻辑架构",
content: ["对应产品研发业务过程进行细化，通过与SAP等ERP系统集成，支撑企业的产品研发与生产的全生命周期管理"]
content:
"应对产品研发业务过程进行细化，通过SAP等ERP系统集成，支撑企业的产品研发与生产的全生命周期管理"
},
{
url: "/image/enovia/0206.png",
url: "/image/enovia/0522.png",
title: "系统部署架构",
content: ["在企业的服务器（应用服务器、数据库服务器、文件服务器、license服务器）群的硬件支撑下实现达索系统软件的合理部署"]
content:
"在企业的服务器（应用服务器、数据库服务器、文件服务器、license服务器）群的硬件支撑下实现达索系统软件的合理部署"
},
{
url: "/image/enovia/0206.png",
url: "/image/enovia/0523.png",
title: "应用架构",
content: ["ENOVIA系统提供的核心功能包括：产品数据管理、项目管理、BOM管理、流程管理、配置管理、与CAD软件集成等"]
content:
"ENOVIA系统提供的核心功能包括：产品数据管理、项目管理、BOM管理、流程管理、配置管理、与CAD软件集成等"
},
{
url: "/image/enovia/0206.png",
url: "/image/enovia/0524.png",
title: "技术管理架构",
content: ["技术管理为三层架构，分别为：存储层、应用层和最终使用层"]
content: "技术管理为三层架构，分别为：存储层、应用层和最终使用层"
},
{
url: "/image/enovia/0206.png",
url: "/image/enovia/0525.png",
title: "数据仓库架构",
content: ["ENOVIA系统支持多数据仓库（Vault）管理，每个数据仓库之间的数据的物理隔离的，因为每个数据仓库对应数据库不同的实例"]
},
]
},
functions2: {
style: true,
list: [
content:
"ENOVIA系统支持多数据仓库（Valt）管理，每个数据仓库之间的数据的物理隔离的，因为每个数据仓库对应数据库不同的实例"
}
],
// 应对问题
problems: {
url: "/image/enovia/0530.png",
catia: [
{
url: "/image/enovia/0531.png",
title: ["计划/研制", "部门协同"]
},
{
url: "/image/enovia/0532.png",
title: [
"企业资源库、",
"配置管理、",
"项目管理、",
"质量系统集成"
]
},
{
url:"/image/phm/tc7.png",
title:"统一产品生命周期管理平台",
content:["与合作伙伴一同对产品业务开发流程进行优化，利用扩展企业来捕捉商业机遇"],
},{
url:"/image/phm/tc7.png",
title:"协同用户环境",
content:["针对地理位置分散的团队和价值链进行协作，与之形成单一、安全的数据共享环境"],
url: "/image/enovia/0533.png",
title: ["降低研制周期"]
},
{
url: "/image/enovia/0534.png",
title: ["增加产品产出"]
},
{
url: "/image/enovia/0535.png",
title: ["提高产品竞争力", "实现知识共享"]
}
]
},
// {
// url: "/image/phm/tc12.png",
// title: "参数管理",
// content: [
// "展示故障发生时间段的故障参数及参数曲线，提供参数历史数据订阅查询，提供参数库管理。"
// ]
// },
// {
// url: "/image/phm/tc13.png",
// title: "模型库",
// content: [
// "对设备进行管理和维护，根据不同用户设置权限限制，按建设模型的不同阶段展示不同的模型相关属性，并提供新建模型、升级版本、模型重用和展示模型效果等功能。"
// ]
// },
// {
// url: "/image/phm/tc14.png",
// title: "预警信息管理",
// content: [
// "展示所有实时预警信息和预警相关的统计图表，提供多维度的查询和导出功能,支持查看预警的相关实时参数和参数曲线，支持预警信息自动发送以及初步判断。"
// ]
// },
// {
// url: "/image/phm/tc15.png",
// title: "健康管理",
// content: [
// "根据既定规则对设备进行健康度评测，动态监控车辆的运行状态和健康状态，为潜在维修问题的发现和诊断，突发故障的高效处理，以及决策提供数据依据，从而提高维保效率和质量，保障设备更加安全可靠地运行。"
// ]
// }
]
//功能模块
function: [
{
url: "/image/enovia/0541.png",
title: "同意产品生命周期管理平添",
content:
"与合作伙伴一同对产品业务开发流程进行优化，利用扩展企业来捕捉商业机遇"
},
{
url: "/image/enovia/0542.png",
title: "协同用户环境",
content:
"针对地理位置分散的团队和价值链进行协作，与之形成单一、安全的数据共享环境"
}
],
icon: {
//应用场景
url: "",
catia: {
url1: "/image/enovia/0551.png",
title1: "航空航天与国防",
url2: "/image/enovia/0552.png",
title2: "工业设备",
url3: "/image/enovia/0553.png",
title3: "建筑工程与施工",
url4: "/image/enovia/0554.png",
title4: "汽车与交通运输"
}
}
},
functions3: [
{
url: "/image/enovia/tc20.png",
title: "1、可以根据工厂实际情况，定制自己的工艺层次结构和资源库",
content: ["预知故障时间和位置，提高运行可靠性 "]
},
{
url: "/image/enovia/tc21.png",
title: "2、进行详细的工业工程时间和成本的预先分析，计算出最佳经济方案",
content: ["提高可用时长，预测剩余使用寿命 "]
},
{
url: "/image/enovia/tc22.png",
title: "3、 减少工艺设计和工业工程管理中的重复工作，提高了重用率",
content: ["提高维修准确性，降低维修成本 "]
},
{
url: "/image/enovia/tc23.png",
title: "4、 减少工艺规划时间，提高规划质量",
content: ["辅助运维决策优化，提高运维价值"]
},
],
ydwtlist: [
{
url: "/image/phm/tc7.png",
p: "计划/研制部门协同"
},
{
url: "/image/phm/tc8.png",
p: "企业资源库、配置管理、项目管理、质量系统集成"
},
{
url: "/image/phm/tc8.png",
p: "降低研制周期"
},
{
url: "/image/phm/tc8.png",
p: "增加项目产出"
},
{
url: "/image/phm/tc9.png",
p: "提高产品竞争力、实现知识共享"
},
],
gnmb:[
{
url:"/image/enovia/0507.png",
title:"统一产品生命周期管理平台",
content:"与合作伙伴一同对产品业务开发流程进行优化，利用扩展企业来捕捉商业机遇",
},{
url:"/image/enovia/0508.png",
title:"协同用户环境",
content:"针对地理位置分散的团队和价值链进行协作，与之形成单一、安全的数据共享环境 ",
},
{
url:"/image/enovia/0509.png",
title:"统一产品生命周期管理平台",
content:"与合作伙伴一同对产品业务开发流程进行优化，利用扩展企业来捕捉商业机遇",
},{
url:"/image/enovia/0510.png",
title:"协同用户环境",
content:"针对地理位置分散的团队和价值链进行协作，与之形成单一、安全的数据共享环境 ",
},
],
gnmk:[
{
url:"/image/phm/tc7.png",
title:"统一产品生命周期管理平台",
content:"与合作伙伴一同对产品业务开发流程进行优化，利用扩展企业来捕捉商业机遇",
},{
url:"/image/phm/tc7.png",
title:"协同用户环境",
content:"针对地理位置分散的团队和价值链进行协作，与之形成单一、安全的数据共享环境 ",
},
]
}
]
};
},
created(){
// this.length()
},
methods: {
hover(i) {
this.pointIndex = i;
},
watch() {}
}
};
</script>
<style lang="less" scoped>
.propduct-back {
width: 100%;
height: 100%;
.propduct-background1 {
width: 90%;
.img1{
width: 100%;
length(){
// 获取pc1-head长度
this.clientWidth = document.getElementById("pc1-head-middle").clientWidth
this.left = (1400 - this.clientWidth)/2
}
}
.propduct-background2 {
width: 15%;
position: relative;
bottom: 100px;
left: 80%;
img{
width: 100%;
},
mounted() {
// 获取pc1-head长度
this.clientWidth = document.getElementById("pc1-head-middle").clientWidth
this.left = (1400 - this.clientWidth-50)/2
// 数据筛选
this.product.forEach((item, index) => {
if (item.flag == this.i) {
return this.i;
}
h4 {
text-align: center;
font-size: 30px;
}
});
this.duct = this.product[this.i];
}
}
.pd {
position: absolute;
width: 100%;
}
.pd1 {
display: flex;
flex-direction: column;
align-items: center;
width: 1200px;
}
.cj {
margin-top: 0.3rem;
img {
width: 100%;
}
}
.foot {
width: 115%;
}
.advertisement{
width: 100%;
text-align: center;
.advertisementci{
display: inline-block;
font-size:32px ;
font-weight: bold;
color: #000;
position: relative;
top: -300px;
left: 30%;
line-height: 50px;
}
}
.gnmk{
width: 1200px;
text-align: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
.gnmk-all{
width: 280px;
height: 300px;
padding: 20px 10px;
margin-bottom: 20px;
background: #fff;
text-align: center;
font-size: 20px;
display: flex;
border: 5px solid rgb(148, 144, 144);
text-align: center;
img{
flex: .5;
width: 100px;
height: 100px;
background-color: cadetblue;
}
h4{
flex: .15;
}
div{
margin: 0;
flex: .35;
width: 100%;
text-align: center;
}
}
}
.gnmb{
display: flex;
justify-content: space-between;
.gnmb-border{
width: 500px;
.img1{
width: 500px;
height: 300px;
}
div{
width: 500px;
height: 50px;
background: url(/image/enovia/0511.png);
line-height: 50px;
text-align: center;
position: relative;
bottom: 57px;
opacity: .8;
font-weight: bold;
color: #fff;
}
}
}
.beijing{
align-items:center;
div{
flex-direction:row-reverse;
img:nth-child(3n){
position: relative;
bottom: 146px;
opacity: .6;
width: 568px;
}
img:nth-child(3n-2){
width: 568px;
height: 320px;
}
p{
width: 568px;
text-align: center;
line-height: 72px;
height: 72px;
position: relative;
bottom: 72px;
font-size: 20px;
font-weight: bold;
color: #fff;
}
}
}
.yyjz{
height: 900px;
}
</style>
};
</script>
src/pages/product/expe.vue
View file @ 9d034f91
......@@ -3,17 +3,17 @@
<div class="pc1">
<div class="pc1-top mt">
<div class="pc1-left">
<img :src="product.url1" width="100%" height="100%" alt="" />
<img :src="product[i].url1" width="100%" height="100%" alt="" />
</div>
<div class="pc1-right">
<img :src="product.url2" width="100%" height="50%" alt="" />
<div>{{ product.title }}</div>
<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"></div>
<h4>{{ product.top }}</h4>
<div class="pc1-head-right"></div>
<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">
......@@ -22,13 +22,13 @@
<p class="beijng">INTRODUCTION</p>
</div>
<div class="pc1-pr-content">
<p>{{ product.product.p1 }}</p>
<p>{{ product.product.p2 }}</p>
<p>{{ product[i].product.p1 }}</p>
<p>{{ product[i].product.p2 }}</p>
</div>
</div>
<!-- 背景图 -->
<div class="pc1-advert">
<img :src="product.advert.img" alt="" />
<img :src="product[i].advert.img" alt="" />
<div>
拥有<span>无限可能性</span>的<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
......@@ -43,13 +43,15 @@
</div>
<div class="pc1-core-border">
<div
class="pc1-core-box card1"
v-for="(item, index) in product.core"
class="pc1-core-box card3"
v-for="(item, index) in product[i].core"
:key="index"
>
<img :src="item.url" alt="" />
<div class="card3-url">
<img :src="item.url" alt="" />
</div>
<h4>{{ item.title }}</h4>
<div>{{ item.content }}</div>
<div class="card3-content">{{ item.content }}</div>
</div>
</div>
</div>
......@@ -62,7 +64,7 @@
<div class="pc1-function-border">
<div
class="pc1-function-box card2"
v-for="(item, index) in product.function"
v-for="(item, index) in product[i].function"
:key="index"
>
<img :src="item.url" alt="" />
......@@ -80,32 +82,31 @@
<div class="pc1-scene-lication">
<div class="pc1-scene-lt">
<div class="pc1-scene-back1">
<img width="460px" height="400px" :src="product.icon.url1" alt="" />
<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.icon.url2" alt="" />
<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.icon.url3" alt="" />
<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.icon.url4" alt="" />
<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.icon.url5" alt="" />
<img width="770px" height="400px" :src="product[i].icon.catia.url5" alt="" />
<div><span>汽车与交通运输</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>c </div>
</template>
<script>
......@@ -118,88 +119,109 @@ export default {
return {
i: 0,
duct: {},
product: {
top: "3D体验平台",
url1: "/image/expe/0201.png",
url2: "/image/expe/0202.png",
title: "高端可视化3D软件",
//产品简介
product: {
p1: "从虚拟的3DEXPERIENCE孪生兄弟到惊人的营销内容。",
p2:
"3D体验平台（3DEXPERIENCE Platform）是达索最新一代的软件平台,集合了3D 设计、工程、3D CAD、建模、仿真、数据管理和流程管理功能的众多的品牌应程序"
},
// 背景图
advert: {
img: "/image/expe/0204.png",
title: "拥有无限可能性的 协作和交"
},
//核心要素
core: [
{
url: "/image/expe/0206.png",
title: "3D建模应用程序",
content: "以CATIA为代表的多款3D建模软件助力把构想变成现实。"
},
{
url: "/image/expe/0207.png",
title: "社交和协作应用程序",
content: "ENOVIA,3DEXCITE,3 DSWYM三个品牌应用"
},
{
url: "/image/expe/0208.png",
title: "仿真应用程序",
content: "DELMIA,SIMULIA,3D VIA三个品牌应用"
product:[
{
header: "EXPE",
flag: 0,
top: "3D体验平台",
url1: "/image/expe/0201.png",
url2: "/image/expe/0202.png",
title: "高端可视化3D软件",
//产品简介
product: {
p1: "从虚拟的3DEXPERIENCE孪生兄弟到惊人的营销内容。",
p2:
"3D体验平台（3DEXPERIENCE Platform）是达索最新一代的软件平台,集合了3D 设计、工程、3D CAD、建模、仿真、数据管理和流程管理功能的众多的品牌应程序"
},
{
url: "/image/expe/0209.png",
title: "信息智能应用",
content: "EXLEAD,NETVIBES两 个品牌应用"
}
],
//功能模块
function: [
{
url: "/image/expe/0213.png",
title: "一个模型掌握一切",
content:
"3DEXCITE利用CAD数据中的信息来支持功能完善的主模型,优化CAD以生产出营销内容的所有变体"
},
{
url: "/image/expe/0214.png",
title: "经销权体验",
content:
"我们的独特风格 3D 解决方案，促成吸引人的品牌和产品互动，最终展现出产品最好的一面"
},
{
url: "/image/expe/0215.png",
title: "移动设备和网页3D可视化",
content:
"完全交互式3D模型允许360度产品旋转及内外零部件的配置，,在线或移动设备上的3D配置器中组织和呈现的产品为终端用户提供了出色的体验"
// 背景图
advert: {
img: "/image/expe/0204.png",
title: "拥有无限可能性的 协作和交"
},
{
url: "/image/expe/0216.png",
title: "VR MR AR 附件",
content:
"虚拟孪生体验是基于数学模型和科学定律的对现实世界的表示，实现了虚拟和现实世界之间的闭环连接。利益相关者通过探索所有可能性和场景，不断实验、获取知识并对其进行优化。"
},
{
url: "/image/expe/0217.png",
title: "个人宣传活动",
content:
"用 3DEXCITE 个人宣传活动在客户之旅的所有阶段和所有接触点触及目标受众。通过全功能的销售点配置器来获得客户喜好，用于后续发送带有微站宣传册等的个性化邮件，营造了引人入胜的商店体验"
//核心要素
core: [
{
url: "/image/expe/0206.png",
title: "3D建模应用程序",
content: "以CATIA为代表的多款3D建模软件助力把构想变成现实。"
},
{
url: "/image/expe/0207.png",
title: "社交和协作应用程序",
content: "ENOVIA,3DEXCITE,3 DSWYM三个品牌应用"
},
{
url: "/image/expe/0208.png",
title: "仿真应用程序",
content: "DELMIA,SIMULIA,3D VIA三个品牌应用"
},
{
url: "/image/expe/0209.png",
title: "信息智能应用",
content: "EXLEAD,NETVIBES两 个品牌应用"
}
],
//功能模块
function: [
{
url: "/image/expe/0213.png",
title: "一个模型掌握一切",
content:
"3DEXCITE利用CAD数据中的信息来支持功能完善的主模型,优化CAD以生产出营销内容的所有变体"
},
{
url: "/image/expe/0214.png",
title: "经销权体验",
content:
"我们的独特风格 3D 解决方案，促成吸引人的品牌和产品互动，最终展现出产品最好的一面"
},
{
url: "/image/expe/0215.png",
title: "移动设备和网页3D可视化",
content:
"完全交互式3D模型允许360度产品旋转及内外零部件的配置，,在线或移动设备上的3D配置器中组织和呈现的产品为终端用户提供了出色的体验"
},
{
url: "/image/expe/0216.png",
title: "VR MR AR 附件",
content:
"虚拟孪生体验是基于数学模型和科学定律的对现实世界的表示，实现了虚拟和现实世界之间的闭环连接。利益相关者通过探索所有可能性和场景，不断实验、获取知识并对其进行优化。"
},
{
url: "/image/expe/0217.png",
title: "个人宣传活动",
content:
"用 3DEXCITE 个人宣传活动在客户之旅的所有阶段和所有接触点触及目标受众。通过全功能的销售点配置器来获得客户喜好，用于后续发送带有微站宣传册等的个性化邮件，营造了引人入胜的商店体验"
}
],
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: "汽车与交通运输"
}
}
],
icon: {
url1: "/image/expe/0220.png",
url2: "/image/expe/0221.png",
url3: "/image/expe/0222.png",
url4: "/image/expe/0223.png",
url5: "/image/expe/0224.png"
}
}
},
],
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>
......
src/pages/product/id.vue
View file @ 9d034f91
<template>
<div>
<div class="pc1">
<!-- 导航背景图 -->
<div class="pc1-top mt">
<div class="pc1-left">
<img :src="product[i].url1" width="100%" height="100%" alt="" />
......@@ -12,10 +13,11 @@
</div>
</div>
</div>
<!-- 头部 -->
<div class="pc1-head">
<div class="pc1-head-left"></div>
<h4>{{ product[i].top }}</h4>
<div class="pc1-head-right"></div>
<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">
......@@ -30,10 +32,10 @@
</div>
<!-- 背景图 -->
<div class="pc1-advert">
<img :src="product[i].advert.img" alt="" />
<img width="100%" :src="product[i].advert.img" alt="" />
</div>
<!-- 核心要素 -->
<div class="pc1-core">
<!-- 核心要素 关键步骤 DELMIA相似 -->
<div class="pc1-core" v-if="product[i].core != undefined">
<div class=" instructions">
<h4>核心要素</h4>
<p>CORE ELEMENTS</p>
......@@ -51,12 +53,13 @@
</div>
</div>
<!-- 应对问题 -->
<div class="pc1-problems">
<div class="pc1-problems" v-if="product[i].problems != undefined">
<div class="instructions">
<h4>应对问题</h4>
<p>COPING WITH PROBLEMS</p>
</div>
<div class="pc1-problems-border">
<div class="pc1-problems-border" v-if="i != '3'">
{{ i }}
<img :src="product[i].problems.url" width="100%" alt="" />
<div class="pc1-problems-module">
<div
......@@ -69,50 +72,177 @@
</div>
</div>
</div>
<div class="pc1-problems-border1" v-else>
<img :src="product[i].problems.url" alt="" />
<div class="enovia">
<div
v-for="(item, index) in product[i].problems.catia"
:key="index"
class="enovia-card"
>
<img :src="item.url" alt="" />
<h4>
<span v-for="(val, index) in item.title" :key="index"
>{{ val }}<br
/></span>
</h4>
</div>
</div>
</div>
</div>
<!-- 功能模块 -->
<div class="pc1-function">
<div class="pc1-function" v-if="product[i].function != undefined">
<div class="instructions">
<h4>功能模块</h4>
<p>FUNCTION MODUL</p>
</div>
<div class="pc1-function-border">
<div
class="pc1-function-box card1"
v-for="(item, index) in product[i].function"
:key="index"
:class="[{ c111: i == 2 }, { '': i != 2 }]"
>
<img width="50px" height="50px" :src="item.url" alt="" />
<h4>{{ item.title }}</h4>
<div>{{ item.content }}</div>
<div
:class="[
{ 'pc1-function-box1': i != 2 },
{ 'pc1-function-box2': i == 2 },
{ card1: index >= 0 }
]"
>
<img width="50px" height="50px" :src="item.url" alt="" />
<h4>{{ item.title }}</h4>
<div>{{ item.content }}{{ i }}</div>
</div>
</div>
</div>
</div>
<!-- 应用场景 -->
<div class="pc1-scene">
<div class="pc1-scene" v-if="iconflag == true">
<div class="instructions">
<h4>应用场景</h4>
<p>ADAPTATION SCENARIOS</p>
</div>
<div class="pc1-scene-lication">
<div class="pc1-scene-lication" v-if="url5flag == true">
<div class="pc1-scene-lt">
<div class="pc1-scene-back1">
<img
width="460px"
height="400px"
:src="product[i].icon.catia.url1"
alt=""
/>
<div>
<span>{{ product[i].icon.catia.title1 }}</span>
</div>
</div>
<div class="pc1-scene-back2">
<img
width="440px"
height="400px"
:src="product[i].icon.catia.url2"
alt=""
/>
<div>
<span>{{ product[i].icon.catia.title2 }}</span>
</div>
</div>
<div class="pc1-scene-back3">
<img
width="440px"
height="400px"
:src="product[i].icon.catia.url3"
alt=""
/>
<div>
<span>{{ product[i].icon.catia.title3 }}</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>{{ product[i].icon.catia.title4 }}</span>
</div>
</div>
<div class="pc1-scene-tail2">
<img
width="770px"
height="400px"
:src="product[i].icon.catia.url5"
alt=""
/>
<div>
<span>{{ product[i].icon.catia.title5 }}</span>
</div>
</div>
</div>
</div>
<div class="pc1-scene-lication" v-else>
<div class="pc1-scene-lt">
<div class="pc1-scene-back1 pl">
<img width="720px" height="400px" :src="product[i].icon.catia.url1" alt="" />
<div><span>{{product[i].icon.catia.title1}}</span></div>
<img
width="720px"
height="400px"
:src="product[i].icon.catia.url1"
alt=""
/>
<!-- <div><span>{{product[i].icon.catia.title1}}</span></div> -->
</div>
<div class="pc1-scene-back2 pl">
<img width="650px" height="400px" :src="product[i].icon.catia.url2" alt="" />
<div><span>{{product[i].icon.catia.title2}}</span></div>
<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>
<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>
<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 class="pc1-function" v-if="product[i].lication != undefined">
<div class="instructions">
<h4>应用价值</h4>
<p>APPLICATION VALE</p>
</div>
<div class="pc1-lication-border">
<div
class="pc1-lication-box"
v-for="(item, index) in product[i].lication"
:key="index"
>
<div>
<span></span>
<p>{{ item.content }}</p>
</div>
</div>
</div>
......@@ -124,19 +254,22 @@
<script>
export default {
name: "",
head: {
title: "德天博城3DEXPE"
head() {
return {
title: "德天博城-----" + this.product[this.i].header
};
},
data() {
return {
i: 1,
i:1,
duct: {},
product: [
{
header: "EXPE",
flag: 0,
top: "3D体验平台",
url1: "/image/expe/0202.png",
url2: "/image/expe/0203.png",
url1: "/image/expe/0201.png",
url2: "/image/expe/0202.png",
title: "高端可视化3D软件",
//产品简介
product: {
......@@ -146,69 +279,87 @@ export default {
},
// 背景图
advert: {
img: ""
img: "/image/expe/0204.png",
title: "拥有无限可能性的 协作和交"
},
//核心要素
core: [
{
url: "/image/aps/tc172.png",
url: "/image/expe/0206.png",
title: "3D建模应用程序",
content: "CATIA、SolidWorks、GEOVIA、BIOVIA四个品牌"
content: "以CATIA为代表的多款3D建模软件助力把构想变成现实。"
},
{
url: "/image/aps/tc173.png",
url: "/image/expe/0207.png",
title: "社交和协作应用程序",
content: "ENOVIA、3DEXCITE、3DSWYM三个品牌应用"
content: "ENOVIA,3DEXCITE,3 DSWYM三个品牌应用"
},
{
url: "/image/aps/tc174.png",
url: "/image/expe/0208.png",
title: "仿真应用程序",
content: "DELMIA、SIMULIA、3DVIA三个品牌应用"
content: "DELMIA,SIMULIA,3D VIA三个品牌应用"
},
{
url: "/image/aps/tc187.png",
url: "/image/expe/0209.png",
title: "信息智能应用",
content: "EXLEAD、NETVIBES两个品牌应用"
content: "EXLEAD,NETVIBES两 个品牌应用"
}
],
//功能模块
function: [
{
url: "/image/aps/tc188.png",
url: "/image/expe/0213.png",
title: "一个模型掌握一切",
content:
"3DEXCITE利用CAD数据中的信息来支持功能完善的主模型,优化CAD以生产出营销内容的所有变体"
},
{
url: "/image/big/tc1.png",
url: "/image/expe/0214.png",
title: "经销权体验",
content:
"我们的独特风格 3D 解决方案，促成吸引人的品牌和产品互动，最终展现出产品最好的一面"
},
{
url: "/image/big/tc5.png",
url: "/image/expe/0215.png",
title: "移动设备和网页3D可视化",
content:
"完全交互式3D模型允许360度产品旋转及内外零部件的配置，,在线或移动设备上的3D配置器中组织和呈现的产品为终端用户提供了出色的体验"
},
{
url: "/image/big/tc3.png",
title: "移动设备和网页3D 可视化",
url: "/image/expe/0216.png",
title: "VR MR AR 附件",
content:
"虚拟孪生体验是基于数学模型和科学定律的对现实世界的表示，实现了虚拟和现实世界之间的闭环连接。利益相关者通过探索所有可能性和场景，不断实验、获取知识并对其进行优化。"
},
{
url: "/image/big/tc4.png",
title: "VR MR AR 附件",
url: "/image/expe/0217.png",
title: "个人宣传活动",
content:
"用 3DEXCITE 个人宣传活动在客户之旅的所有阶段和所有接触点触及目标受众。通过全功能的销售点配置器来获得客户喜好，用于后续发送带有微站宣传册等的个性化邮件，营造了引人入胜的商店体验"
}
]
],
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: "汽车与交通运输"
}
}
},
{
header: "CATIA",
flag: 1,
top: "基于数字化模型的产品设计",
top: "基于数字化模型的产品设计", //头部导航
url1: "/image/catia/03336.png",
url2: "/image/catia/0302.png",
title: "3D CAD设计和工程软件",
......@@ -219,7 +370,7 @@ export default {
p2:
"是PLM协同解决方案的一个重要组成部分，支持从项目前阶段、具体的设计、分析、模拟、组装到维护在内的全部工业设计流程。从而借助PLM系统姜创意付诸于现实"
},
// 背景图
// 背景图 广告
advert: {
img: "/image/catia/03334.png" //汽车
},
......@@ -304,24 +455,320 @@ export default {
}
],
icon: {
//应用场景
url: "",
catia: {
url1: "/image/catia/03330.png",
title1: "航空航天与国防",
url2: "/image/catia/03331.png",
title2: "工业设备",
url3: "/image/catia/03332.png",
title3: "建筑工程与施工",
url4: "/image/catia/03333.png",
title4: "汽车与交通运输"
}
}
},
{
header: "DELMIA",
flag: 2,
top: "为实现卓越运营的数字解决方案",
url1: "/image/delmia/0401.png",
url2: "/image/delmia/0402.png",
title: "数字化企业的互动制造应用软件",
//产品简介
product: {
p1:
"DELMIA向随需应变（on-demand）和准时生产（just-in-time）的制造流程提供完整的数字解决方案，令制造厂商缩短产品上市时间，同时降低生产成本、促进创新。",
p2:
"是DELMIA数字制造解决方案可以使制造部门设计数字化产品的全部生产流程，在部署任何实际材料和机器之前进行虚拟演示。"
},
// 背景图
advert: {
img: "/image/delmia/0404.png"
},
//关键步骤
//html为添加
core: [
{
url: "/image/aps/tc172.png",
title: "第一阶段",
content:
"建立资源库、工艺流程、定制工艺模板、关联产品工艺数据模型，建立三维工艺仿真和工艺流程规范"
},
{
url: "/image/aps/tc173.png",
title: "第二阶段",
content:
"在前一阶段工作的基础上，利用DEP建立MHub进行装配工艺的详细设计和仿真，并生成工艺指令、相关工艺配套表和MBOM等"
}
],
// 应对问题
problems: {
url: "/image/catia/03335.png",
catia: [
{
url: "/image/catia/0331.png",
title: "工艺规划"
},
{
url: "/image/catia/0332.png",
title: "资源建模和模拟"
},
{
url: "/image/catia/0333.png",
title: "数字化制造基础"
}
]
},
//功能模块
function: [
{
url: "/image/aps/tc188.png",
title: "DPE",
content: "面向制造过程设计"
},
{
url: "/image/big/tc1.png",
title: "QUEST",
content: "面向物流过程分析"
},
{
url: "/image/big/tc5.png",
title: "PDM",
content: "面向装配过程分析"
},
{
url: "/image/big/tc5.png",
title: "Human",
content: "面向人机分析"
},
{
url: "/image/big/tc5.png",
title: "Robotics",
content: "面向机器人仿真"
},
{
url: "/image/big/tc5.png",
title: "VNC",
content: "面向虚拟数控加工方针"
}
],
// 应用价值
lication: [
{
content: "可以根据工厂实际情况，定制自己的工艺层次结构和资源库"
},
{
content:
"进行详细的工业工程时间和成本的预先分析，计算出最佳经济方案"
},
{
content: "减少工艺设计和工业工程管理中的重复工作，提高了重用率"
},
{
content: "减少工艺规划时间，提高规划质量"
},
{
content: "预见并减少规划风险，减少工程更改成本"
}
]
},
{
header: "ENOVIA",
flag: 3,
top: "为实现卓越运营的数字解决方案",
url1: "/image/enovia/00501.png",
url2: "/image/enovia/00502.png",
title: "设计协同技术",
//产品简介
product: {
p1:
"ENOVI同达索系统虚拟设计工具（CATIA）一起构建其PLM系统。使企业把人员、流程、内容和系统联系到一起，能够带给企业巨大的竞争优势，通过贯穿给企业巨大的生命周期统一和优化产品开发流程，ENOVIA在企业内部和外部帮助企业轻松得开展项目并节约成本",
p2:
"ENOVIA贯穿宽广的工业领域满足业务流程需要，用来管理简单或工程复杂性高的产品。其布署可以从小型开发团队直到拥有千名用户的拓展型企业，其中涵盖供货商和合作伙伴。"
},
// 背景图
advert: {
img: "/image/enovia/00521.png"
},
//核心要素
core: [
{
url: "/image/aps/tc172.png",
title: "业务逻辑架构",
content:
"应对产品研发业务过程进行细化，通过SAP等ERP系统集成，支撑企业的产品研发与生产的全生命周期管理"
},
{
url: "/image/aps/tc173.png",
title: "系统部署架构",
content:
"在企业的服务器（应用服务器、数据库服务器、文件服务器、license服务器）群的硬件支撑下实现达索系统软件的合理部署"
},
{
url: "/image/aps/tc173.png",
title: "应用架构",
content:
"ENOVIA系统提供的核心功能包括：产品数据管理、项目管理、BOM管理、流程管理、配置管理、与CAD软件集成等"
},
{
url: "/image/aps/tc173.png",
title: "技术管理架构",
content: "技术管理为三层架构，分别为：存储层、应用层和最终使用层"
},
{
url: "/image/aps/tc173.png",
title: "数据仓库架构",
content:
"ENOVIA系统支持多数据仓库（Valt）管理，每个数据仓库之间的数据的物理隔离的，因为每个数据仓库对应数据库不同的实例"
}
],
// 应对问题
problems: {
url: "/image/enovia/00531.png",
catia: [
{
url: "/image/catia/0331.png",
title: ["计划/研制", "部门协同"]
},
{
url: "/image/catia/0332.png",
title: [
"企业资源库、",
"配置管理、",
"项目管理、",
"质量系统集成"
]
},
{
url: "/image/catia/0333.png",
title: ["降低研制周期"]
},
{
url: "/image/catia/0334.png",
title: ["增加产品产出"]
},
{
url: "/image/catia/0334.png",
title: ["提高产品竞争力", "实现知识共享"]
}
]
},
//功能模块
function: [
{
url: "/image/aps/tc188.png",
title: "同意产品生命周期管理平添",
content:
"与合作伙伴一同对产品业务开发流程进行优化，利用扩展企业来捕捉商业机遇"
},
{
url: "/image/big/tc1.png",
title: "协同用户环境",
content:
"针对地理位置分散的团队和价值链进行协作，与之形成单一、安全的数据共享环境"
}
],
icon: {
//应用场景
url: "",
catia:{
url1:"/image/catia/03330.png",
title1:"航空航天与国防",
url2:"/image/catia/03331.png",
title2:"工业设备",
url3:"/image/catia/03332.png",
title3:"建筑工程与施工",
url4:"/image/catia/03333.png",
title4:"汽车与交通运输",
catia: {
url1: "/image/catia/03330.png",
title1: "航空航天与国防",
url2: "/image/catia/03331.png",
title2: "工业设备",
url3: "/image/catia/03332.png",
title3: "建筑工程与施工",
url4: "/image/catia/03333.png",
title4: "汽车与交通运输"
}
}
},
{
header: "SIMULIA",
flag: 4,
top: "为实现卓越运营的数字解决方案",
url1: "/image/simulia/00701.png",
url2: "/image/simulia/00702.png",
title: "分析仿真平台",
//产品简介
product: {
p1: "SIMULIA------模拟真实世界的仿真技术平台",
p2:
"SIMULIA是一个协同、开放、集成的多物理场仿真平台，真实世界的仿真是非线性的，SIMULIA将成为模拟真实世界仿真分析工具，他支持最前沿的仿真技术和最广泛的仿真领域，SIMULIA为真实世界的模拟提供了开放的，多物理场分析平台。SIMULIA将同CATIA，DELMIA一起，帮助用户在PLM中，实现设计，仿真和生产的协同工作。"
},
// 背景图
advert: {
img: "/image/simulia/00721.png"
},
//功能模块
function: [
{
url: "/image/simulia/00731.png",
title: "自动化",
content:
"自动化专业包括允许用户开发、存储、管理、部署、共享和重放仿真驱动型设计的标准方法和功能"
},
{
url: "/image/simulia/00732.png",
title: "电磁",
content:
"电磁仿真技术以及与通讯和检测设备的设计和定位相关的信号强度"
},
{
url: "/image/simulia/00733.png",
title: "流体",
content:
"流体专业包括使用计算流体力学技术的围绕和穿过实体和结构的稳态和瞬态内部和外部流"
},
{
url: "/image/simulia/00734.png",
title: "结构",
content:
"包括使用适用于实体和结构的Abaqus 的有限元分析（FEA），以为线性和非线性静态、热、动态和冲击效应建模"
},
{
url: "/image/simulia/00735.png",
title: "优化",
content:
"提供使用不同参数自动运动和重新运动仿真方法的功能，从而允许使用lsight技术进行设计空间探索和优化"
}
],
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: "汽车与交通运输"
}
}
}
]
],
iconflag: false,
url5flag: false,
clientWidth:"",
left:"",
};
},
methods: {},
created() {},
mounted() {
// 获取pc1-head长度
this.clientWidth = document.getElementById("pc1-head-middle").clientWidth
// console.log(this.clientWidth)
this.left = (1400 - this.clientWidth)/2
// console.log(this.left)
// 数据筛选
this.product.forEach((item, index) => {
if (item.flag == this.i) {
......@@ -329,6 +776,18 @@ export default {
}
});
this.duct = this.product[this.i];
if (this.product[this.i].icon == undefined) {
//应用场景
// 是否展示
this.iconflag = false;
} else {
this.iconflag = true;
if (this.product[this.i].icon.catia.url5 == undefined) {
this.url5flag = false;
} else {
this.url5flag = true;
}
}
}
};
</script>
......@@ -372,10 +831,12 @@ export default {
width: 781px;
height: 474px;
margin-right: 103px;
border: 1px solid #f00;
}
.pc1-right {
width: 480px;
height: 474px;
border: 1px solid #000;
img {
margin-top: 65px;
height: 172px;
......@@ -398,7 +859,7 @@ export default {
justify-content: space-between;
align-items: center;
.pc1-head-left {
width: 480px;
width: 460px;
height: 2px;
background: linear-gradient(
297deg,
......@@ -412,7 +873,7 @@ export default {
font-size: 34px;
}
.pc1-head-right {
width: 480px;
width: 460px;
height: 2px;
background: linear-gradient(
63deg,
......@@ -441,11 +902,12 @@ export default {
//核心要素
margin-bottom: 20px;
.pc1-core-border {
border: 1px solid #f90;
// height: 420px;
padding-left: 80px;
padding-right: 80px;
// padding-left: 80px;
// padding-right: 80px;
display: flex;
justify-content: space-between;
justify-content: space-evenly;
align-items: center;
.pc1-core-box {
width: 220px;
......@@ -462,7 +924,7 @@ export default {
margin-top: 60px;
margin-bottom: 80px;
img {
opacity: .2;
opacity: 0.2;
}
.pc1-problems-module {
position: absolute;
......@@ -476,12 +938,10 @@ export default {
width: 100px;
z-index: 1;
text-align: center;
img{
img {
margin-top: 190px;
width: 50px;
height: 50px;
}
h4{
h4 {
margin-top: 25px;
line-height: 21px;
font-size: 16px;
......@@ -498,10 +958,10 @@ export default {
padding-left: 80px;
padding-right: 80px;
display: flex;
justify-content: space-between;
height: 420px;
justify-content: space-evenly;
align-items: center;
.pc1-function-box {
.pc1-function-box1 {
margin-top: 60px;
width: 220px;
height: 300px;
border-radius: 8px;
......@@ -509,101 +969,98 @@ export default {
}
}
//应用场景
.pc1-scene {
.pc1-scene {
//应用场景
padding-bottom: 20px;
.pc1-scene-lication {
height: 800px;
width: 100%;
margin: 60px auto;
.pc1-scene-lt{
.pc1-scene-lt {
margin-bottom: 30px;
display: flex;
justify-content: space-between;
.pc1-scene-back1{
.pc1-scene-back1 {
width: 720px;
position: relative;
div{
div {
position: absolute;
width: 720px;
// width: 720px;
height: 45px;
background: rgba(41, 73, 130, 0.5);
bottom: 0;
text-align: center;
line-height: 45px;
span{
span {
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #FFFFFF;
color: #ffffff;
opacity: 1;
}
}
}
.pc1-scene-back2{
.pc1-scene-back2 {
width: 650px;
height: 400px;
position: relative;
div{
div {
position: absolute;
width: 650px;
height: 45px;
background: rgba(41, 73, 130, 0.5);
bottom: 0;
text-align: center;
line-height: 45px;
span{
span {
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #FFFFFF;
color: #ffffff;
opacity: 1;
}
}
}
}
.pc1-scene-lb{
.pc1-scene-lb {
display: flex;
justify-content: space-between;
.pc1-scene-tail1{
width: 600px;
justify-content: space-between;
.pc1-scene-tail1 {
height: 400px;
position: relative;
div{
div {
position: absolute;
width: 600px;
// width: 600px;
height: 45px;
background: rgba(41, 73, 130, 0.5);
bottom: 0;
text-align: center;
line-height: 45px;
span{
span {
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #FFFFFF;
color: #ffffff;
opacity: 1;
}
}
}
.pc1-scene-tail2{
.pc1-scene-tail2 {
width: 770px;
height: 400px;
position: relative;
div{
div {
position: absolute;
width: 770px;
// width: 770px;
height: 45px;
background: rgba(41, 73, 130, 0.5);
bottom: 0;
text-align: center;
line-height: 45px;
span{
span {
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #FFFFFF;
color: #ffffff;
opacity: 1;
}
}
......@@ -611,10 +1068,14 @@ export default {
}
}
}
// 应用价值
}
// 卡片布局
.card1 {
box-shadow: 0px 0px 10px 0px rgb(196, 195, 195);
border: 1px solid #c3c2c5;
padding: 20px 20px 5px;
img {
margin: 30px 85px;
text-align: center;
......@@ -622,18 +1083,18 @@ export default {
h4 {
font-size: 20px;
text-align: center;
height: 69px;
padding: 0px 20px;
// height: 40px;
margin-bottom: 16px;
color: #2c4b84;
}
div {
width: 100%;
padding: 0px 20px;
// padding: 0px 20px;
line-height: 15px;
color: #454545;
}
}
.card1:hover{
.card1:hover {
box-shadow: 0px 0px 20px 5px #c3c2c5;
}
</style>
src/pages/product/simulia.vue
View file @ 9d034f91
<template>
<div>
<div class="pc">
<div class="product-introduce">
<div class="propduct-back">
<div class="propduct-background1">
<img class="img1" src="/image/simulia/0702.png" alt="" />
<img class="img2" src="/image/simulia/0703.png" alt="">
</div>
<div class="propduct-background2">
<img src="/image/simulia/0701.png" alt="" />
<h4>分析仿真平台</h4>
<img src="/image/simulia/0704.png" alt="">
</div>
<div class="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>
<div class="title">
<div class="line"></div>
<p>{{ product.title }}</p>
<div class="line"></div>
<div class="pc1-right">
<img :src="product[i].url2" width="100%" height="50%" alt="" />
<div>{{ product[i].title }}</div>
</div>
<h5>产品简介</h5>
<h6>Product introduction</h6>
<span
>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
product.jj1
}}</span
>
<div v-if="product.jj2 != ''" class="jj2-div">
<br />
<span
>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
product.jj2
}}</span
>
</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>
<!-- <img :src="product.url" alt="" style="margin-top:29px;" /> -->
</div>
<div class="advertisement">
<img style="width:1200px" src="/image/simulia/0706.png" alt="" />
<!-- 背景图 -->
<div class="pc1-advert">
<img :src="product[i].advert.img" alt="" />
</div>
<div class="product-merit">
<h5>功能模块</h5>
<h6>function modul</h6>
<product-functions3
:list="product.functions.list"
v-if="product.functions.style == false"
/>
<product-functions2
:list="product.functions.list"
v-if="product.functions.style == true"
/>
<!-- 功能模块 -->
<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="product-merit" style="height:800px">
<h5>应用场景</h5>
<h6>Adaptation scenarios</h6>
<div style="display: flex;width: 1200px;flex-wrap:wrap;margin-top:47px;height:500px" class="gnmb">
<div class="gnmb-border">
<div>
<img :src="product.gnmb[0].url" alt="">
<div class="gnmb-border">{{product.gnmb[0].title}}</div>
</div>
<div>
<img :src="product.gnmb[1].url" alt="">
<div class="gnmb-border">{{product.gnmb[1].title}}</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="gnmb-border">
<div>
<img :src="product.gnmb[2].url" alt="">
<div class="gnmb-border">{{product.gnmb[2].title}}</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 class="gnmb-border">
<div>
<img :src="product.gnmb[3].url" alt="">
<div class="gnmb-border">{{product.gnmb[3].title}}</div>
</div>
<div>
<img :src="product.gnmb[4].url" alt="">
<div class="gnmb-border">{{product.gnmb[4].title}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>c </div>
</template>
<script>
export default {
name: "",
head: {
title: "SaaS MES云端协同---北京见著科技有限公司--MES系统"
title: "德天博城-------3DEXPERIENCE"
},
components: {},
data() {
return {
pointIndex: 0,
product: {
banner: "/image/phm/sm.png",
bannerphone: "/image/phm/smp.jpg",
title: "仿真模拟应用程序",
jj1: "SIMULIA——模拟真实世界的仿真技术平台",
jj2:
"SIMULIA是一个协同、开放、集成的多物理场仿真平台。 真实世界的仿真是非线性的,SIMULIA将成为模拟真实世界仿真分析工具,它支持最前沿的仿真技术和最广泛的仿真领域.SIMULIA为真实世界的模拟提供了开放的,多物理场分析平台。 SIMULIA将同CATIA ,DELMIA一起,帮助用户在PLM中,实现设计,仿真和生产的协同工作。",
url: "/image/phm/t527.png",
f1: true,
f2: true,
spcj: {
title:
"PHM适用于是密集应用大数据的典型工业领域，是工业互联网的重要组成部分。PHM强调资产设备管理中的状态感知、数据监控与分析，通过监控设备健康状况、故障频发区域与周期，预测故障的发生，从而大幅度提高运维效率。",
url: [
"/image/simulia/0507.png",
"/image/simulia/0508.png",
"/image/simulia/0509.png",
"/image/simulia/0510.png",
]
},
functions: {
style: false,
list: [
i: 0,
duct: {},
product:[
{
header: "SIMULIA",
flag: 4,
top: "为实现卓越运营的数字解决方案",
url1: {
url1:"/image/simulia/0701-1.png",
url2:"/image/simulia/0701-2.png",
url3:"/image/simulia/0701-3.png",
},
url2: "/image/simulia/0702.png",
title: "分析仿真平台",
//产品简介
product: {
p1: "SIMULIA------模拟真实世界的仿真技术平台",
p2:
"SIMULIA是一个协同、开放、集成的多物理场仿真平台，真实世界的仿真是非线性的，SIMULIA将成为模拟真实世界仿真分析工具，他支持最前沿的仿真技术和最广泛的仿真领域，SIMULIA为真实世界的模拟提供了开放的，多物理场分析平台。SIMULIA将同CATIA，DELMIA一起，帮助用户在PLM中，实现设计，仿真和生产的协同工作。"
},
// 背景图
advert: {
img: "/image/simulia/0710.png"
},
//功能模块
function: [
{
url: "/image/simulia/0206.png",
url: "/image/simulia/0721.png",
title: "自动化",
content: ["自动化专业包括允许用户开发、存储、管理、部署、共享和重放仿真驱动型设计的标准方法的功能"]
content:
"自动化专业包括允许用户开发、存储、管理、部署、共享和重放仿真驱动型设计的标准方法和功能"
},
{
url: "/image/simulia/0206.png",
url: "/image/simulia/0722.png",
title: "电磁",
content: ["电磁仿真专业包括电磁波传播仿真技术以及与通信和检测设备的设计和定位相关的信号强度"]
content:
"电磁仿真技术以及与通讯和检测设备的设计和定位相关的信号强度"
},
{
url: "/image/simulia/0206.png",
url: "/image/simulia/0723.png",
title: "流体",
content: ["s流体专业包括使用计算流体力学技术的围绕和穿过实体和结构的稳态和瞬态内部和外部流"]
content:
"流体专业包括使用计算流体力学技术的围绕和穿过实体和结构的稳态和瞬态内部和外部流"
},
{
url: "/image/simulia/0206.png",
url: "/image/simulia/0724.png",
title: "结构",
content: ["包括使用适用于实体和结构的 Abaqus 的有限元分析 (FEA)，以为线性和非线性静态、热、动态和冲击效应建模"]
content:
"包括使用适用于实体和结构的Abaqus 的有限元分析（FEA），以为线性和非线性静态、热、动态和冲击效应建模"
},
{
url: "/image/simulia/0206.png",
url: "/image/simulia/0725.png",
title: "优化",
content: ["提供使用不同参数自动运行和重新运行仿真方法的功能，从而允许使用 Isight 技术进行设计空间探索和优化"]
},
]
},
functions2: {
style: true,
list: [
{
url: "/image/phm/tc12.png",
title: "参数管理",
content: [
"展示故障发生时间段的故障参数及参数曲线，提供参数历史数据订阅查询，提供参数库管理。"
]
},
{
url: "/image/phm/tc13.png",
title: "模型库",
content: [
"对设备进行管理和维护，根据不同用户设置权限限制，按建设模型的不同阶段展示不同的模型相关属性，并提供新建模型、升级版本、模型重用和展示模型效果等功能。"
]
},
{
url: "/image/phm/tc14.png",
title: "预警信息管理",
content: [
"展示所有实时预警信息和预警相关的统计图表，提供多维度的查询和导出功能,支持查看预警的相关实时参数和参数曲线，支持预警信息自动发送以及初步判断。"
]
},
{
url: "/image/phm/tc15.png",
title: "健康管理",
content: [
"根据既定规则对设备进行健康度评测，动态监控车辆的运行状态和健康状态，为潜在维修问题的发现和诊断，突发故障的高效处理，以及决策提供数据依据，从而提高维保效率和质量，保障设备更加安全可靠地运行。"
]
content:
"提供使用不同参数自动运动和重新运动仿真方法的功能，从而允许使用lsight技术进行设计空间探索和优化"
}
]
},
functions3: [
{
url: "/image/simulia/tc20.png",
title: "1、可以根据工厂实际情况，定制自己的工艺层次结构和资源库",
content: ["预知故障时间和位置，提高运行可靠性 "]
},
{
url: "/image/simulia/tc21.png",
title: "2、进行详细的工业工程时间和成本的预先分析，计算出最佳经济方案",
content: ["提高可用时长，预测剩余使用寿命 "]
},
{
url: "/image/simulia/tc22.png",
title: "3、 减少工艺设计和工业工程管理中的重复工作，提高了重用率",
content: ["提高维修准确性，降低维修成本 "]
},
{
url: "/image/simulia/tc23.png",
title: "4、 减少工艺规划时间，提高规划质量",
content: ["辅助运维决策优化，提高运维价值"]
},
],
ydwtlist: [
{
url: "/image/phm/tc7.png",
p: "计划/研制部门协同"
},
{
url: "/image/phm/tc8.png",
p: "企业资源库、配置管理、项目管理、质量系统集成"
},
{
url: "/image/phm/tc8.png",
p: "降低研制周期"
},
{
url: "/image/phm/tc8.png",
p: "增加项目产出"
},
{
url: "/image/phm/tc9.png",
p: "提高产品竞争力、实现知识共享"
},
],
gnmb:[
{
url:"/image/simulia/0707.png",
title:"高科技",
},{
url:"/image/simulia/0708.png",
title:"汽车与交通运输",
},
{
url:"/image/simulia/0709.png",
title:"航空航天与国",
},
{
url:"/image/simulia/0710.png",
title:"工业设备",
},
{
url:"/image/simulia/0711.png",
title:"建筑工程与施工",
},
],
gnmk:[
{
url:"/image/phm/tc7.png",
title:"统一产品生命周期管理平台",
content:"与合作伙伴一同对产品业务开发流程进行优化，利用扩展企业来捕捉商业机遇",
},{
url:"/image/phm/tc7.png",
title:"协同用户环境",
content:"针对地理位置分散的团队和价值链进行协作，与之形成单一、安全的数据共享环境 ",
},
]
}
],
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:"",//计算左右边框长度
};
},
methods: {
hover(i) {
this.pointIndex = i;
},
watch() {}
mounted() {
// 获取pc1-head长度
this.clientWidth = document.getElementById("pc1-head-middle").clientWidth;
this.left = (1400 - this.clientWidth-50) / 2;
}
};
</script>
<style lang="less" scoped>
.propduct-back {
width: 100%;
height: 100%;
display: flex;
justify-content:center;
.propduct-background1 {
flex: 0.55 ;
border: 1px solid #f000;
.img1{
width: 60%;
position: relative;
left: 40%;
}
.img2{
width: 60%;
position: relative;
top: -10%;
}
}
.propduct-background2 {
flex: 0.4;
display: flex;
flex-direction: column;
text-align: center;
img{
width: 100%;
}
h4 {
font-size: 30px;
height: 30px;
}
}
}
.pd {
position: absolute;
width: 100%;
}
.pd1 {
display: flex;
flex-direction: column;
align-items: center;
width: 1200px;
}
.cj {
margin-top: 0.3rem;
img {
width: 100%;
}
}
.foot {
width: 115%;
}
.advertisement{
width: 100%;
text-align: center;
.advertisementci{
display: inline-block;
font-size:32px ;
font-weight: bold;
color: #000;
position: relative;
top: -300px;
left: 30%;
line-height: 50px;
}
}
.gnmk{
width: 1200px;
text-align: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
.gnmk-all{
width: 280px;
height: 300px;
padding: 20px 10px;
margin-bottom: 20px;
background: #fff;
text-align: center;
font-size: 20px;
display: flex;
border: 5px solid rgb(148, 144, 144);
text-align: center;
img{
flex: .5;
width: 100px;
height: 100px;
background-color: cadetblue;
}
h4{
flex: .15;
}
div{
margin: 0;
flex: .35;
width: 100%;
text-align: center;
}
}
}
.gnmb{
display: flex;
justify-content: space-between;
.gnmb-border{
width: 380px;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
div{
img{
width: 350px;
}
div{
background: url(/image/simulia/0712.png);
width: 350px;
text-align: center;
position: relative;
top: -30px;
left: 15px;
opacity: .8;
font-weight: bold;
color: #fff;
}
}
}
}
.beijing{
align-items:center;
div{
flex-direction:row-reverse;
img:nth-child(3n){
position: relative;
bottom: 146px;
opacity: .6;
width: 568px;
}
img:nth-child(3n-2){
width: 568px;
height: 320px;
}
p{
width: 568px;
text-align: center;
line-height: 72px;
height: 72px;
position: relative;
bottom: 72px;
font-size: 20px;
font-weight: bold;
color: #fff;
}
}
}
.yyjz{
height: 900px;
}
</style>
src/plugins/view-ui.js
View file @ 9d034f91
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;
......
src/static/image/catia/0302.png
View replaced file @ 3a706aa4 View file @ 9d034f91
src/static/image/catia/0302.png

13.5 KB | W: | H:

src/static/image/catia/0302.png

32.6 KB | W: | H:

src/static/image/catia/0302.png
src/static/image/catia/0302.png
src/static/image/catia/0302.png
src/static/image/catia/0302.png
  • 2-up
  • Swipe
  • Onion skin
src/static/image/catia/0331.png
View replaced file @ 3a706aa4 View file @ 9d034f91
src/static/image/catia/0331.png

2.47 KB | W: | H:

src/static/image/catia/0331.png

1.3 KB | W: | H:

src/static/image/catia/0331.png
src/static/image/catia/0331.png
src/static/image/catia/0331.png
src/static/image/catia/0331.png
  • 2-up
  • Swipe
  • Onion skin
src/static/image/catia/0332.png
View replaced file @ 3a706aa4 View file @ 9d034f91
src/static/image/catia/0332.png

1.87 KB | W: | H:

src/static/image/catia/0332.png

2.23 KB | W: | H:

src/static/image/catia/0332.png
src/static/image/catia/0332.png
src/static/image/catia/0332.png
src/static/image/catia/0332.png
  • 2-up
  • Swipe
  • Onion skin
src/static/image/catia/0333.png
View replaced file @ 3a706aa4 View file @ 9d034f91
src/static/image/catia/0333.png

2.39 KB | W: | H:

src/static/image/catia/0333.png

1.99 KB | W: | H:

src/static/image/catia/0333.png
src/static/image/catia/0333.png
src/static/image/catia/0333.png
src/static/image/catia/0333.png
  • 2-up
  • Swipe
  • Onion skin
src/static/image/catia/0334.png
View replaced file @ 3a706aa4 View file @ 9d034f91
src/static/image/catia/0334.png

3.28 KB | W: | H:

src/static/image/catia/0334.png

1.04 KB | W: | H:

src/static/image/catia/0334.png
src/static/image/catia/0334.png
src/static/image/catia/0334.png
src/static/image/catia/0334.png
  • 2-up
  • Swipe
  • Onion skin
src/static/image/delmia/0401.png
View replaced file @ 3a706aa4 View file @ 9d034f91
src/static/image/delmia/0401.png

1.5 MB | W: | H:

src/static/image/delmia/0401.png

690 KB | W: | H:

src/static/image/delmia/0401.png
src/static/image/delmia/0401.png
src/static/image/delmia/0401.png
src/static/image/delmia/0401.png
  • 2-up
  • Swipe
  • Onion skin
src/static/image/delmia/0402.png
View replaced file @ 3a706aa4 View file @ 9d034f91
src/static/image/delmia/0402.png

13.6 KB | W: | H:

src/static/image/delmia/0402.png

23 KB | W: | H:

src/static/image/delmia/0402.png
src/static/image/delmia/0402.png
src/static/image/delmia/0402.png
src/static/image/delmia/0402.png
  • 2-up
  • Swipe
  • Onion skin
src/static/image/enovia/0501.png
View replaced file @ 3a706aa4 View file @ 9d034f91
src/static/image/enovia/0501.png

472 KB | W: | H:

src/static/image/enovia/0501.png

278 KB | W: | H:

src/static/image/enovia/0501.png
src/static/image/enovia/0501.png
src/static/image/enovia/0501.png
src/static/image/enovia/0501.png
  • 2-up
  • Swipe
  • Onion skin
src/static/image/enovia/0502.png
View replaced file @ 3a706aa4 View file @ 9d034f91
src/static/image/enovia/0502.png

13.7 KB | W: | H:

src/static/image/enovia/0502.png

24.6 KB | W: | H:

src/static/image/enovia/0502.png
src/static/image/enovia/0502.png
src/static/image/enovia/0502.png
src/static/image/enovia/0502.png
  • 2-up
  • Swipe
  • Onion skin
src/static/image/enovia/0510.png
View replaced file @ 3a706aa4 View file @ 9d034f91
src/static/image/enovia/0510.png

156 KB | W: | H:

src/static/image/enovia/0510.png

545 KB | W: | H:

src/static/image/enovia/0510.png
src/static/image/enovia/0510.png
src/static/image/enovia/0510.png
src/static/image/enovia/0510.png
  • 2-up
  • Swipe
  • Onion skin
src/static/image/simulia/0702.png
View replaced file @ 3a706aa4 View file @ 9d034f91
src/static/image/simulia/0702.png

174 KB | W: | H:

src/static/image/simulia/0702.png

24.2 KB | W: | H:

src/static/image/simulia/0702.png
src/static/image/simulia/0702.png
src/static/image/simulia/0702.png
src/static/image/simulia/0702.png
  • 2-up
  • Swipe
  • Onion skin
src/static/image/simulia/0710.png
View replaced file @ 3a706aa4 View file @ 9d034f91
src/static/image/simulia/0710.png

230 KB | W: | H:

src/static/image/simulia/0710.png

1.9 MB | W: | H:

src/static/image/simulia/0710.png
src/static/image/simulia/0710.png
src/static/image/simulia/0710.png
src/static/image/simulia/0710.png
  • 2-up
  • Swipe
  • Onion skin
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment