Skip to content

D
DTBPcompnay
Commit 521f39d7 authored by 陈毅's avatar 陈毅
Browse files
Options

自适应

parent ae7ad5ad
Show whitespace changes
Inline Side-by-side
Showing with 1195 additions and 609 deletions
src/assets/theme/layout.less
View file @ 521f39d7
......@@ -122,8 +122,8 @@ a.an:hover{
}
.nav {
width: 1200px;
width: 1200px;
margin: 0 auto;
justify-content: space-between;
display: flex;
......@@ -281,6 +281,11 @@ a.an:hover{
}
}
}
@media (max-width:1280px) {
.nav{
width: 1000px;
}
}
}
}
......@@ -499,6 +504,11 @@ h3 {
width: 100%;
margin: 0 auto;
}
@media (max-width:1280px) {
.main{
width: 1000px;
}
}
.ivu-carousel-dots {
li {
......@@ -1424,30 +1434,35 @@ a.news {
// }
.about {
width: 100%;
height: 760px;
// height: 760px;
height: 690px;
background: #EEEEEE;
@media screen and (max-width:1200px) {
@media screen and (max-width:1000px) {
display: flex;
.about-content{
width: auto !important;
.about-right {
display: none;
}
}
}
}
.about .about-content {
max-width: 1200px;
width: 1200px;
margin: 0 auto;
height: 100%;
// border: 1px solid #021d8b;
}
.about .about-content .about-right {
float: right;
margin-top: 156px;
width: 650px;
}
.about .about-content .about-left {
......@@ -1555,6 +1570,8 @@ a.news {
// box-shadow: 5px 5px 30px #0880e2;
// }
.productt {
width: 100%;
height: 1000px;
......@@ -1565,7 +1582,14 @@ a.news {
width: 1200px;
margin: 0 auto;
}
@media (max-width:1280px) {
.productt{
height: 800px;
}
.productt .productt-content {
width: 1000px;
}
}
.productt .productt-content .productt-title {
text-align: center;
padding-top: 72px;
......@@ -1607,6 +1631,12 @@ a.news {
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
}
@media (max-width:1280px) {
.productt .productt-content .pg-1 li {
margin-right: 50px;
padding-bottom: 70px;
}
}
.productt .productt-content .pg-1 li:nth-child(3) {
margin-right: 0px;
......@@ -1621,6 +1651,16 @@ a.news {
top:21px;
}
@media (max-width:1280px) {
.productt .productt-content .pg-1 li a {
display: inline-block;
width: 300px;
height:240px;
text-align: center;
position: relative;
top: 32px;
}
}
.productt .productt-content ul .mask {
position: absolute;
......@@ -1686,6 +1726,11 @@ a.news {
}
}
@media (max-width:1280px) {
.productt .productt-content .pg-1 .mask>.mask-content{
padding: 55px 50px;
}
}
.productt .productt-content .pg-2 .mask>p,
.productt .productt-content .pg-3 .mask>p {
......@@ -1703,12 +1748,24 @@ a.news {
width: 360px;
height: 288px;
}
@media (max-width:1280px) {
.productt .productt-content .pg-1 .mask img{
width: 300px;
height: 240px;
}
}
.productt .productt-content .pg-1 .mask .mask-cover{
width: 360px;
height: 288px;
background: #294982;
opacity: 0.6;
}
@media (max-width:1280px) {
.productt .productt-content .pg-1 .mask .mask-cover{
width: 300px;
height: 240px;
}
}
.productt .productt-content .pg-1 .mask .more {
position: absolute;
......@@ -1864,7 +1921,8 @@ a.news {
.customer .customer-content .customer-title {
text-align: center;
padding-top: 50px;
width: 1000px;
margin: auto;
}
.customer .customer-content .customer-title>h2 {
......@@ -1926,7 +1984,15 @@ opacity: 1;
justify-content: space-around;
}
}
@media (max-width:1280px) {
.logo_div{
width: 1000px;
margin: auto;
img{
margin: 0 32px 50px;
}
}
}
.imghover {
box-shadow: -10px 0px 40px rgba(9, 126, 222, 0.1),
10px 0 40px rgba(9, 126, 222, 0.1),
......@@ -2157,12 +2223,20 @@ line-height: 48px;
width: 480px;
height: 474px;
img {
margin-top: 80px;
height: 172px;
margin-top: 90px;
// height: 172px;
width: 70%;
margin-left: 15%;
}
p{
margin-top: 30px;
font-size: 19px;
font-weight: 600;
text-align: center;
}
div {
text-align: center;
padding-top: 75px;
padding-top: 95px;
height: 47px;
font-size: 30px;
font-family: Alibaba Sans;
......@@ -2199,17 +2273,25 @@ line-height: 48px;
z-index: 1;
}
}
// 右侧
// 右侧 /simulia
.pc1-right {
width: 480px;
height: 474px;
img {
margin-top: 80px;
height: 172px;
// height: 172px;
width: 70%;
margin-left: 15%;
}
p{
font-size: 19px;
font-weight: 600;
text-align: center;
margin-top: 30px;
}
div {
text-align: center;
padding-top: 75px;
padding-top: 95px;
height: 47px;
font-size: 30px;
font-family: Alibaba Sans;
......@@ -2309,13 +2391,15 @@ line-height: 48px;
margin-top: 40px;
padding-left: 30px;
width: 100%;
height: 43px;
font-size: 14px;
font-size: 20px;
font-family: Microsoft YaHei;
font-weight: 400;
line-height: 24px;
line-height: 30px;
color: #232323;
opacity: 1;
p{
padding-bottom: 5px;
}
}
}
.pc1-advert {
......@@ -3061,176 +3145,7 @@ line-height: 48px;
}
}
}
@media (max-width:1400px) {
.pc1{
width: 1200px;
// 首屏导航
.pc1-top{
display: flex;
.pc1-left{
width: 65%;
height: auto;
margin-right: 87px;
}
.pc1-right{
img{
margin-top: 80px;
}
div{
padding-top: 64px;
height: auto;
}
}
}
// 产品简介
// 背景图
.pc1-advert{
img{
width: 1200px;
}
div{
top:106px;
}
}
//应对问题
.pc1-problems{
.pc1-problems-border{
.pc1-problems-module{
.pc1-problems-box {
div{
height: 232px;
img{
left: 30px;
width: 36%;
}
}
}
}
}
}
// 功能模块
.pc1-function{
.pc1-function-border{
padding-left: 0;
padding-right: 0;
}
}
// 应用场景
// 5
.pc1-scene{
.pc1-scene-lication{
.pc1-scene-lt{
.pc1-scene-back1{
width: 395px;
height: 340px;
img{
width: 395px;
height: 340px;
}
div{
width: 100%;
}
}
.pc1-scene-back2{
height: 340px;
width: 374px;
img{
width: 374px;
height: 340px;
}
div{
width: 100%;
}
}
.pc1-scene-back3{
width: 374px;
height: 340px;
img{
width: 374px;
height: 340px;
}
div{
width: 100%;
}
}
.pc1-scene-catia1{
width: 612px;
height: 340px;
img{
width: 100%;
height: 100%;
}
div{
width: 100%;
}
}
.pc1-scene-catia2{
width: 552px;
height: 340px;
img{
width: 100%;
height: 100%;
}
div{
width: 100%;
}
}
}
.pc1-scene-lb{
.pc1-scene-tail1{
width: 510px;
height: 340px;
img{
width: 100%;
height: 100%;
}
div{
width: 100%;
}
}
.pc1-scene-tail2{
width: 654px;
height: 340px;
img{
width: 100%;
height: 100%;
}
div{
width: 100%;
}
}
}
}
}
}
}
//应用价值
.pc1-lication{
.pc1-lication-layout{
display: flex;
margin-bottom: 21px;
h4{
display: flex;
flex-direction: column-reverse;
padding-left: 14px;
height: 50px;
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #232323;
opacity: 1;
}
}
.pc1-lication-layout:nth-child(2n-1){
padding-left: 540px;
}
.pc1-lication-layout:nth-child(2n){
padding-left: 440px;
}
}
.card1{
width: 220px;
......@@ -3281,8 +3196,8 @@ line-height: 48px;
}
h4 {
text-align: center;
padding: 0px 30px;
height: 60px;
// padding: 0px 30px;
height: 50px;
font-size: 20px;
font-family: Microsoft YaHei;
font-weight: bold;
......@@ -3302,12 +3217,13 @@ line-height: 48px;
text-align: justify;
}
}
.card3 {
.card3 {//expe页面核心要素
width: 220px;
background: #ffffff;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.16);
opacity: 1;
border-radius: 10px;
padding: 0 16px;
.card3-url{
height: 100px !important;
display: flex;
......@@ -3325,7 +3241,6 @@ line-height: 48px;
// margin: auto 30px;
}
.card3-content {
text-align: center;
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
......@@ -3357,6 +3272,624 @@ line-height: 48px;
}
// p1
.pc11{
width: 100%;
.research-top{//头部导航
max-width: 1400px;
min-width: 1100px;
width: 80%;
margin:100px auto 80px;
.research-right{
height: 100%;
padding-left: 10%;
.research-top1{
height: 120px;
max-height: 120px;
min-height: 94px;
height: 7.5rem;
}
h4{
font-size: 30px;
text-align: center;
padding-bottom: 20px;
}
.research-bottom1{
font-size: 23px;
line-height: 25px;
padding-left: 30px;
}
}
}
.mauto-1{
max-width: 1100px;
min-width: 1000px;
width: 80%;
.mauto-url{
position: relative;
padding-bottom: 150px;
.mauto-image1-1{
display: flex;
flex-direction: row-reverse;
img{
width: 70%;
}
}
.mauto-image1-2{
position: absolute;
bottom: 0;
left: 0;
img{
width: 80%;
}
}
}
.mauto-size{
height: 48px;
font-size: 18px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #232323;
opacity: 1;
}
}
.research-1{//上下布局
max-width: 1100px;
min-width: 1000px;
margin: auto;
width: 80%;
img{
width: 100%;
}
div{
font-size: 20px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #232323;
opacity: 1;
}
}
.research-2{
max-width: 1100px;
min-width: 1000px;
margin: auto;
width: 80%;
img{
width: 100%;
}
.research-ul{
.research-li{
font-size: 20px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #232323;
opacity: 1;
line-height: 30px;
}
}
}
// 骨架
.skeleton-top{
max-width: 1400px;
min-width: 1100px;
margin: 100px auto 80px;
.skeleton-right{
text-align: center;
.skeleton-top1{
max-height: 120px;
min-height: 94px;
height: 7.5rem;
}
h4{
font-size: 30px;
text-align: center;
padding-bottom: 40px;
}
.skeleton-bottom1{
font-size: 23px;
line-height: 25px;
padding-left: 30px;
}
}
}
.skeleton-2{
max-width: 1100px;
min-width: 1000px;
width: 80%;
img{
width: 100%;
}
.skeleton-ol{
display: flex;
justify-content: space-evenly;
div{
font-size: 18px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #232323;
opacity: 1;
}
}
}
}
// product
.pc11{
width: 100%;
.pc1-top1-2{//顶部
display: flex;
justify-content: space-between;
width: 80%;
min-width: 1100px;
max-width: 1400px;
max-height: 474px;
height: 29.625rem;
min-height: 372px;
margin:100px auto 80px;
// padding-bottom: 5rem;
.pc1-left1-2{
width: 62%;
flex-shrink:0;
img{
width: 100%;
}
}
.back-ground{//simulia
width: 65%;
position: relative;
.back-bottom{
width: 100%;
height: 280px;
position: absolute;
bottom: 0;
display: flex;
justify-content: space-between;
}
img{
width: 100%;
}
.back-ground1{
position: absolute;
top: 0;
left: 20%;
z-index: 1;
width: 24.75rem;
max-width: 396px;
min-width: 311px;
// height: 15.75rem;
// max-height: 252px;
// min-height: 198px;
}
.back-ground2{
padding-right: 10px;
width: 30.0625rem;
max-width: 481px;
min-width: 377px;
// height: 17.5rem;
// max-height: 280px;
// min-height: 220px;
display: flex;
flex-direction: column-reverse;
}
.back-ground3{
max-width: 411px;
min-width: 322px;
width: 25.6875rem;
// max-height: 194px;
// min-height: 152px;
// height: 12.125rem;
display: flex;
flex-direction: column-reverse;
}
}
.pc1-right1-2{
width: 35%;
img{
width: 70%;
margin-top: 80px;
margin-left: 15%;
}
p{
margin-top: 30px;
font-size: 19px;
font-weight: 600;
text-align: center;
}
div{
text-align: center;
padding-top: 95px;
height: 47px;
line-height: 40px;
font-size: 30px;
font-family: Alibaba Sans;
font-weight: 900;
color: #232323;
opacity: 1;
}
}
}
.pc1-head1-2{//指示
width: 80%;
max-width: 1400px;
min-width: 1100px;
margin: auto ;
align-items: center;
height: auto;
// padding-bottom: 3.75rem;
.pc1-head-left1{
width: 100%;
height: 2px;
background: linear-gradient(297deg, #294982 0%, rgba(255, 255, 255, 0) 100%);
opacity: 1;
border-radius: 0px;
}
h4{
width: 100%;
font-size: 32px;
text-align: center;
}
.pc1-head-right1{
width: 100%;
height: 2px;
background: linear-gradient(63deg, #294982 0%, rgba(255, 255, 255, 0) 100%);
opacity: 1;
border-radius: 0px;
}
}
.pc1-product1-2{//产品简介
width: 80%;
max-width: 1400px;
min-width: 1100px;
margin: auto;
padding-bottom: 80px;
.instructions{
margin-bottom: 40px;
}
.pc1-pr-content{
p{
text-indent: 40px;
max-width: 1400px;
width: 100%;
height: auto;
font-size: 20px;
font-family: Microsoft YaHei;
font-weight: 400;
line-height: 35px;
color: #232323;
opacity: 1;
}
}
}
.pc1-advert1-2{//背景图
width: 80%;
max-width: 1400px;
min-width: 1100px;
margin:auto;
img{
width: 100%;
}
}
.pc1-advert1-3{//背景图expe
width: 80%;
max-width: 1400px;
min-width: 1100px;
margin: auto;
position: relative;
img{
width: 100%;
}
div{
position: absolute;
top: 0;
margin: auto 0;
left: 200px;
right: 0;
bottom: 0;
width: 275px;
height: 71px;
font-size: 24px;
font-family: Microsoft YaHei;
font-weight: 400;
line-height: 40px;
color: #FFFFFF;
opacity: 1;
span{
font-weight: 600;
}
}
}
.pc1-core1-2{//核心要素
width: 80%;
max-width: 1400px;
min-width: 1100px;
margin: auto;
.pc1-core-border{
display: flex;
justify-content: space-evenly;
.pc1-core-box{
width: 220px;
height: 300px;
}
}
}
.pc1-problems{//应对问题
width: 80%;
max-width: 1400px;
min-width: 1100px;
margin: auto;
.pc1-problems-border{
position: relative;
.pc1-problems-module{
position: absolute;
top: 0;
width: 100%;
display: flex;
justify-content: space-evenly;
.pc1-problems-box{
height: 100%;
display: flex;
flex-direction: column;
.empty{
max-height:192px ;
height: 11.5rem;
min-height: 137px;
}
.img-size{
max-width: 50px;
width: 3.125rem;
min-width: 35px;
margin: auto ;
padding-bottom: 10px;
img{
width: 100%;
}
}
h4{
display: flex;
flex-direction: column;
width: 96px;
height: 42px;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #232323;
opacity: 1;
text-align: center;
}
}
}
}
.pc1-problems-border1{
.pc1-problems-module{
display: flex;
justify-content: space-evenly;
.pc1-problems-box{
width: 200px;
.img-size2{
max-width: 56px;
min-width: 40px;
width: 3.5rem;
margin:auto;
img{
width: 100%;
}
}
h4{
width: 100%;
text-align: center;
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #232323;
opacity: 1;
}
}
}
}
}
.pc1-function{//功能模块
width: 80%;
max-width: 1400px;
min-width: 1100px;
margin: auto;
.pc1-function-border{
display: flex;
justify-content: space-around;
.pc1-function-box1{
min-width: 200px;
min-height: 290px;
width: 12.5rem;
max-width: 220px;
max-height: 300px;
}
}
}
.pc1-function1{//demlia页面
width: 80%;
max-width: 1400px;
min-width: 1100px;
margin: auto;
.pc1-function-border1{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
.empty{
height: 60px;
}
.function-top{
display: flex;
justify-content: space-around;
.function-border{
width: 220px;
height: 240px;
background: #FFFFFF;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.16);
opacity: 1;
border-radius: 10px;
.function-url{
height: 100px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
img{
width: auto;
height: auto;
}
}
h4{
text-align: center;
font-size: 20px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #294982;
opacity: 1;
}
.function-p{
padding-top: 34px;
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #232323;
opacity: 1;
text-align: center;
}
}
}
}
}
//应用价值
.pc1-lication{
width: 80%;
max-width: 1400px;
min-width: 1100px;
margin: auto;
.pc1-lication-layout{
display: flex;
margin-bottom: 21px;
h4{
width: 430px;
display: flex;
flex-direction: column-reverse;
padding-left: 14px;
height: 50px;
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #232323;
opacity: 1;
}
}
.pc1-lication-layout:nth-child(2n-1){
.layout-left{
width: 38%;
max-width: 540px;
min-width: 418px;
}
}
.pc1-lication-layout:nth-child(2n){
.layout-left{
width: 31%;
max-width: 440px;
min-width: 341px;
}
}
}
.pc1-scene{//应用场景 4
width: 80%;
max-width: 1400px;
min-width: 1100px;
margin: auto;
padding-bottom: 80px;
.pc1-scene-lication{//4
display: flex;
flex-direction: column;
.pc1-scene-top{
display: flex;
justify-content: space-between;
margin-bottom: 30px;
.pc1-scene-top-pr1{
margin-right: 30px
}
.op-b{
position: relative;
div{
position: absolute;
bottom: 0;
width: 100%;
height: 45px;
background: rgba(41, 73, 130, 0.5);
// opacity: 0.5;
border-radius: 0px;
text-align: center;
line-height: 45px;
span{
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: bold;
line-height: 0px;
color: #FFFFFF;
opacity: 1;
}
}
}
}
.pc1-scene-bottom{
display: flex;
justify-content: space-between;
.pc1-scene-top-pr3{
margin-right: 30px;
}
.op-b{
position: relative;
div{
position: absolute;
bottom: 0;
width: 100%;
height: 45px;
background: rgba(41, 73, 130, 0.5);
// opacity: 0.5;
border-radius: 0px;
text-align: center;
line-height: 45px;
span{
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: bold;
line-height: 0px;
color: #FFFFFF;
opacity: 1;
}
}
}
}
}
}
.instructions{
margin-top:80px;
margin-bottom: 60px
}
}
@import url("./phone");
@import url("./extra");
......
src/assets/theme/product.less
View file @ 521f39d7
......@@ -626,6 +626,17 @@
}
}
}
@media (max-width:1280px) {
.home-news{
width: 1000px;
.home-news-right{
width: 440px;
.see-more{
margin: 60px 0 0 385px;
}
}
}
}
.details-news{
width: 1200px;
margin: 65px auto 100px;
......
src/pages/index.vue
View file @ 521f39d7
......@@ -53,7 +53,7 @@
</div>
</div>
<div class="about-right">
<img src="/image/index/0102.png" width="680px" alt="" />
<img src="/image/index/0102.png" width="100%" alt="" />
</div>
</div>
</section>
......@@ -388,7 +388,7 @@
</Carousel>
</div>
</div>
<div class="home-news" style="width:1200px;margin:50px auto">
<div class="home-news">
<img src="/image/index/0113.png" alt="" />
<div class="home-news-right">
<h5>信息动态
......
src/pages/p1/electromechanical.vue
View file @ 521f39d7
<template>
<div class="pc1">
<div class="pc11">
<div class="research-top">
<Row>
<Col span="14">
......@@ -7,8 +7,9 @@
</Col>
<Col span="10">
<div class="research-right">
<div class="research-top"></div>
<h4>{{ product.title1 }}</h4>
<div>{{ product.title2 }}</div>
<div class="research-bottom">{{ product.title2 }}</div>
</div>
</Col>
</Row>
......
src/pages/product/catia.vue
View file @ 521f39d7
<template>
<div>
<div class="pc1">
<div class="pc1-top mt">
<div class="pc1-left" style="position:relative">
<img :src="product[i].url1" width="125%" alt="" />
</div>
<div class="pc1-right" style="width:35%;position:relative;">
<img :src="product[i].url2" width="100%" alt="" />
<div class="pc11">
<div class="pc1-top mt pc1-top1-2">
<div class="pc1-left pc1-left1-2" style="position:relative">
<img :src="product[i].url1" alt="" />
</div>
<div class="pc1-right pc1-right1-2">
<img :src="product[i].url2" alt="" />
<p>
SHAPE THE WPRLD WE LIVE IN
</p>
<div>
{{ product[i].title }}
</div>
</div>
</div>
<div class="pc1-head">
<div class="pc1-head-left"></div>
<div class="pc1-head1-2 pc1-head">
<Row align="middle" class-name="row">
<Col span="7"><div class="pc1-head-left1"></div></Col>
<Col span="10"><h4 >{{ product[i].top }}</h4></Col>
<Col span="7"><div class="pc1-head-right1"></div></Col>
</Row>
<!-- <div class="pc1-head-left"></div>
<h4 id="pc1-head-middle">{{ product[i].top }}</h4>
<div class="pc1-head-right"></div>
<div class="pc1-head-right"></div> -->
</div>
<!-- 产品简介 -->
<div class="pc1-product">
<div class="pc1-product1-2 pc1-product">
<div class="instructions">
<h4>产品简介</h4>
<p class="beijng">INTRODUCTION</p>
......@@ -29,11 +37,11 @@
</div>
</div>
<!-- 背景图 -->
<div class="pc1-advert">
<div class="pc1-advert1-2 pc1-advert">
<img :src="product[i].advert.img" alt="" />
</div>
<!-- 核心要素 -->
<div class="pc1-core">
<div class="pc1-core1-2 pc1-core">
<div class=" instructions">
<h4>核心要素</h4>
<p>CORE ELEMENTS</p>
......@@ -64,7 +72,8 @@
v-for="(item, index) in product[i].problems.catia"
:key="index"
>
<div>
<div class="empty"></div>
<div class="img-size">
<img :src="item.url" alt="" />
</div>
<h4>{{ item.title }}</h4>
......@@ -96,53 +105,26 @@
<h4>应用场景</h4>
<p>ADAPTATION SCENARIOS</p>
</div>
<div class="pc1-scene-lication">
<div class="pc1-scene-lt">
<div class="pc1-scene-catia1 pl">
<img
width="720px"
height="400px"
:src="product[i].icon.catia.url1"
alt=""
/>
<div>
<span>{{ product[i].icon.catia.title1 }}</span>
</div>
<div class="pc1-scene-top">
<div class="pc1-scene-top-pr1 op-b">
<img :src="product[i].icon.catia.url1" width="100%" height="100%" alt="">
<div><span>{{ product[i].icon.catia.title1 }}</span></div>
</div>
<div class="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 class="op-b">
<img :src="product[i].icon.catia.url2" width="100%" height="100%" alt="">
<div><span>{{ product[i].icon.catia.title2 }}</span></div>
</div>
</div>
<div class="pc1-scene-bottom">
<div class="pc1-scene-top-pr3 op-b">
<img :src="product[i].icon.catia.url3" width="100%" height="100%" alt="">
<div><span>{{ product[i].icon.catia.title3 }}</span></div>
</div>
<div class="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 class="op-b">
<img :src="product[i].icon.catia.url4" width="100%" height="100%" alt="">
<div><span>{{ product[i].icon.catia.title4 }}</span></div>
</div>
</div>
</div>
......
src/pages/product/delmia.vue
View file @ 521f39d7
<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 class="pc11">
<div class="pc1-top mt pc1-top1-2">
<div class="pc1-left pc1-left1-2">
<img :src="product[i].url1" height="100%" alt="" />
</div>
<div class="pc1-right pc1-right1-2">
<img :src="product[i].url2" alt="" />
<p>MAKE IT HAPPEN</p>
<div style="padding-top:71px;line-height:47px">数字化企业的互动<br> 制造应用软件</div>
</div>
</div>
<div class="pc1-head">
<div class="pc1-head-left"></div>
<h4 id="pc1-head-middle">{{ product[i].top }}</h4>
<div class="pc1-head-right"></div>
<div class="pc1-head pc1-head1-2">
<Row align="middle" class-name="row">
<Col span="7"><div class="pc1-head-left1"></div></Col>
<Col span="10"><h4 >{{ product[i].top }}</h4></Col>
<Col span="7"><div class="pc1-head-right1"></div></Col>
</Row>
</div>
<!-- 产品简介 -->
<div class="pc1-product">
<div class="pc1-product pc1-product1-2">
<div class="instructions">
<h4>产品简介</h4>
<p class="beijng">INTRODUCTION</p>
......@@ -29,11 +31,11 @@
</div>
</div>
<!-- 背景图 -->
<div class="pc1-advert">
<div class="pc1-advert pc1-advert1-2">
<img :src="product[i].advert.img" alt="" />
</div>
<!-- 核心要素 && 关键步骤 -->
<div class="pc1-core">
<div class="pc1-core pc1-core1-2">
<div class=" instructions">
<h4>关键步骤</h4>
<p>COMMITTED STEP</p>
......@@ -56,8 +58,7 @@
<h4>应对问题</h4>
<p>COPING WITH PROBLEMS</p>
</div>
<div class="pc1-problems-border" style="height:500px">
<!--height临时使用-->
<div class="pc1-problems-border">
<img :src="product[i].problems.url" width="100%" alt="" />
<div class="pc1-problems-module">
<div
......@@ -65,7 +66,8 @@
v-for="(item, index) in product[i].problems.catia"
:key="index"
>
<div>
<div class="empty"></div>
<div class="img-size">
<img :src="item.url" alt="" />
</div>
<h4>{{ item.title }}</h4>
......@@ -74,23 +76,31 @@
</div>
</div>
<!-- 功能模块 -->
<div class="pc1-function">
<div class="pc1-function1">
<div class="instructions">
<h4>功能模块</h4>
<p>FUNCTION MODUL</p>
</div>
<div class="pc1-function-border window">
<div
class="frame pc1-function-frame"
v-for="(item, index) in product[i].function"
:key="index"
>
<div class="pc1-function-box card3">
<div class="card3-url">
<div class="pc1-function-border1 ">
<div class="function-top">
<div v-for="(item,index) in product[i].function1" :key="index" class="function-border">
<div class="function-url">
<img :src="item.url" alt="" />
</div>
<h4>{{ item.title }}</h4>
<div class="card3-content">{{item.content}}</div>
<div class="function-p">{{ item.content }}</div>
</div>
</div>
<div class="empty">
</div>
<div class="function-top">
<div v-for="(item,index) in product[i].function2" :key="index" class="function-border">
<div class="function-url">
<img :src="item.url" alt="" />
</div>
<h4>{{ item.title }}</h4>
<div class="function-p">{{ item.content }}</div>
</div>
</div>
</div>
......@@ -103,8 +113,10 @@
</div>
<div class=" mt mb">
<div class="pc1-lication-layout" v-for="(item,index) in product[i].lication" :key="index">
<div class="layout-left"></div>
<img :src="item.url" alt="">
<h4>{{item.content}}</h4>
<div class="layout-right"></div>
</div>
</div>
</div>
......@@ -177,7 +189,7 @@ export default {
]
},
//功能模块
function: [
function1:[
{
url: "/image/delmia/0441.png",
title: "DPE",
......@@ -193,6 +205,9 @@ export default {
title: "PDM",
content: "面向装配过程分析"
},
],
function2: [
{
url: "/image/delmia/0444.png",
title: "Human",
......@@ -213,24 +228,29 @@ export default {
lication: [
{
url:"/image/delmia/0451.png",
content: "可以根据工厂实际情况，定制自己的工艺层次结构和资源库"
content: "可以根据工厂实际情况，定制自己的工艺层次结构和资源库",
span:"",
},
{
url:"/image/delmia/0452.png",
content:
"进行详细的工业工程时间和成本的预先分析，计算出最佳经济方案"
"进行详细的工业工程时间和成本的预先分析，计算出最佳经济方案",
span:"",
},
{
url:"/image/delmia/0453.png",
content: "减少工艺设计和工业工程管理中的重复工作，提高了重用率"
content: "减少工艺设计和工业工程管理中的重复工作，提高了重用率",
span:"",
},
{
url:"/image/delmia/0454.png",
content: "减少工艺规划时间，提高规划质量"
content: "减少工艺规划时间，提高规划质量",
span:"",
},
{
url:"/image/delmia/0455.png",
content: "预见并减少规划风险，减少工程更改成本"
content: "预见并减少规划风险，减少工程更改成本",
span:"",
}
]
}
......@@ -248,22 +268,4 @@ export default {
};
</script>
<style lang="less" scope>
.pc1-head{
.pc1-head-left{
width: 430px;
}
.pc1-head-right{
width: 430px;
}
}
@media (max-width:1400px ) {
.pc1-head{
.pc1-head-left{
width: 340px;
}
.pc1-head-right{
width: 340px;
}
}
}
</style>
src/pages/product/dvia.vue
View file @ 521f39d7
<template>
<div>
<div class="pc1">
<div class="pc1-top mt">
<div class="pc1-left">
<div class="pc11">
<div class="pc1-top mt pc1-top1-2">
<div class="pc1-left pc1-left1-2">
<img :src="product[i].url1" width="100%" height="100%" alt="" />
</div>
<div class="pc1-right">
<img :src="product[i].url2" width="100%" height="50%" alt="" />
<div class="pc1-right pc1-right1-2">
<img :src="product[i].url2" alt="" />
<P>PLAN YOUR DEFINITION OF SUCCESS</P>
<div style="padding-top:71px;line-height:47px">智能3D空间规划<br> 解决方案</div>
</div>
</div>
<div class="pc1-head" ref="demo">
<div class="pc1-head-left" ></div>
<h4 id="pc1-head-middle">{{ product[i].top }}</h4>
<div class="pc1-head-right"></div>
<div class="pc1-head pc1-head1-2">
<Row align="middle" class-name="row">
<Col span="7"><div class="pc1-head-left1"></div></Col>
<Col span="10"><h4 >{{ product[i].top }}</h4></Col>
<Col span="7"><div class="pc1-head-right1"></div></Col>
</Row>
</div>
<!-- 产品简介 -->
<div class="pc1-product">
<div class="pc1-product pc1-product1-2">
<div class="instructions">
<h4>产品简介</h4>
<p class="beijng">INTRODUCTION</p>
......@@ -27,7 +30,7 @@
</div>
</div>
<!-- 背景图 -->
<div class="pc1-advert">
<div class="pc1-advert pc1-advert1-2">
<img :src="product[i].advert.img" alt="" />
</div>
......@@ -39,11 +42,11 @@
</div>
<div class="pc1-function-border">
<div
class="pc1-function-box card2"
class="pc1-function-box1 card2"
v-for="(item, index) in product[i].function"
:key="index"
>
<img :src="item.url" alt="" />
<img width="50px" height="50px" :src="item.url" alt="" />
<h4>{{ item.title }}</h4>
<div>{{ item.content }}</div>
</div>
......@@ -56,33 +59,33 @@
<p>APPLICATION SCEMARIOS</p>
</div>
<div class="pc1-scene-lication">
<div class="pc1-scene-lt">
<div class="pc1-scene-back1">
<img width="460px" height="400px" :src="product[i].icon.catia.url1" alt="" />
<div><span>高科技</span></div>
<div class="pc1-scene-top">
<div class="pc1-scene-top-pr1 op-b">
<img :src="product[i].icon.catia.url1" width="100%" height="100%" alt="">
<div><span>{{ product[i].icon.catia.title1 }}</span></div>
</div>
<div class="pc1-scene-back2">
<img width="440px" height="400px" :src="product[i].icon.catia.url2" alt="" />
<div><span>航空航天与国防</span></div>
<div class="op-b pc1-scene-top-pr1">
<img :src="product[i].icon.catia.url2" width="100%" height="100%" alt="">
<div><span>{{ product[i].icon.catia.title2 }}</span></div>
</div>
<div class="pc1-scene-back3">
<img width="440px" height="400px" :src="product[i].icon.catia.url3" alt="" />
<div><span>工业设备</span></div>
<div class="op-b">
<img :src="product[i].icon.catia.url3" width="100%" height="100%" alt="">
<div><span>{{ product[i].icon.catia.title3 }}</span></div>
</div>
</div>
<div class="pc1-scene-lb">
<div class="pc1-scene-tail1">
<img width="600px" height="400px" :src="product[i].icon.catia.url4" alt="" />
<div><span>建筑工程与施工</span></div>
<div class="pc1-scene-bottom">
<div class="pc1-scene-top-pr3 op-b">
<img :src="product[i].icon.catia.url4" width="100%" height="100%" alt="">
<div><span>{{ product[i].icon.catia.title4 }}</span></div>
</div>
<div class="pc1-scene-tail2">
<img width="770px" height="400px" :src="product[i].icon.catia.url5" alt="" />
<div><span>汽车与交通运输</span></div>
<div class="op-b">
<img :src="product[i].icon.catia.url5" width="100%" height="100%" alt="">
<div><span>{{ product[i].icon.catia.title5 }}</span></div>
</div>
</div>
</div>
</div>
</div>c </div>
</div> </div>
</template>
<script>
......@@ -179,22 +182,4 @@ export default {
};
</script>
<style lang="less" scoped>
.pc1-head{
.pc1-head-left{
width: 430px;
}
.pc1-head-right{
width: 430px;
}
}
@media (max-width:1400px ) {
.pc1-head{
.pc1-head-left{
width: 340px;
}
.pc1-head-right{
width: 340px;
}
}
}
</style>
src/pages/product/enovia.vue
View file @ 521f39d7
<template>
<div>
<div class="pc1">
<div class="pc1-top mt">
<div class="pc1-left">
<div class="pc11">
<div class="pc1-top mt pc1-top1-2">
<div class="pc1-left pc1-left1-2">
<img :src="product[i].url1" width="100%" height="100%" alt="" />
</div>
<div class="pc1-right">
<img :src="product[i].url2" width="100%" height="50%" alt="" />
<div class="pc1-right pc1-right1-2">
<img :src="product[i].url2" alt="" />
<P>PLAN YOUR EDFINITION OF SUCCESS</P>
<div>
{{ product[i].title }}
</div>
</div>
</div>
<div class="pc1-head">
<div class="pc1-head-left"></div>
<h4 id="pc1-head-middle">{{ product[i].top }}</h4>
<div class="pc1-head-right"></div>
<div class="pc1-head pc1-head1-2">
<Row align="middle" class-name="row">
<Col span="7"><div class="pc1-head-left1"></div></Col>
<Col span="10"><h4 >{{ product[i].top }}</h4></Col>
<Col span="7"><div class="pc1-head-right1"></div></Col>
</Row>
</div>
<!-- 产品简介 -->
<div class="pc1-product">
<div class="pc1-product pc1-product1-2">
<div class="instructions">
<h4>产品简介</h4>
<p class="beijng">INTRODUCTION</p>
......@@ -29,22 +32,22 @@
</div>
</div>
<!-- 背景图 -->
<div class="pc1-advert">
<div class="pc1-advert pc1-advert1-2">
<img :src="product[i].advert.img" alt="" />
</div>
<!-- 核心要素 -->
<div class="pc1-core">
<div class="pc1-core pc1-function">
<div class=" instructions">
<h4>核心要素</h4>
<p>CORE ELEMENTS</p>
</div>
<div class="pc1-core-border">
<div class="pc1-function-border" style="display:flex;justify-content: space-around;">
<div
class="pc1-core-box card2"
class="pc1-function-box1 card2"
v-for="(item, index) in product[i].core"
:key="index"
>
<img width="50px" height="50px" :src="item.url" alt="" />
<img :src="item.url" alt="" />
<h4>{{ item.title }}</h4>
<div>{{ item.content }}</div>
</div>
......@@ -58,13 +61,15 @@
</div>
<div class="pc1-problems-border1">
<img :src="product[i].problems.url" width="100%" alt="" />
<div class="enovia">
<div class="pc1-problems-module">
<div
v-for="(item, index) in product[i].problems.catia"
:key="index"
class="enovia-card"
class="pc1-problems-box"
>
<div class="img-size2">
<img :src="item.url" alt="" />
</div>
<h4>
<span v-for="(val, index) in item.title" :key="index"
>{{ val }}<br
......@@ -82,12 +87,12 @@
</div>
<div class="pc1-function-border">
<div
class="pc1-function-box card2"
class="pc1-function-box1 card2"
v-for="(item, index) in product[i].function"
:key="index"
>
<img width="50px" height="50px" :src="item.url" alt="" />
<h4>{{ item.title }}</h4>
<h4 style="margin:0 20px;">{{ item.title }}</h4>
<div>{{ item.content }}</div>
</div>
</div>
......@@ -99,44 +104,24 @@
<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 class="pc1-scene-top">
<div class="pc1-scene-top-pr1 op-b">
<img :src="product[i].icon.catia.url1" width="100%" height="100%" alt="">
<div><span>{{ product[i].icon.catia.title1 }}</span></div>
</div>
<div class="op-b">
<img :src="product[i].icon.catia.url2" width="100%" height="100%" alt="">
<div><span>{{ product[i].icon.catia.title2 }}</span></div>
</div>
</div>
<div class="pc1-scene-bottom">
<div class="pc1-scene-top-pr3 op-b">
<img :src="product[i].icon.catia.url3" width="100%" height="100%" alt="">
<div><span>{{ product[i].icon.catia.title3 }}</span></div>
</div>
<div class="op-b">
<img :src="product[i].icon.catia.url4" width="100%" height="100%" alt="">
<div><span>{{ product[i].icon.catia.title4 }}</span></div>
</div>
</div>
</div>
......@@ -274,46 +259,12 @@ export default {
};
},
created(){
// this.length()
},
methods: {
length(){
// 获取pc1-head长度
this.clientWidth = document.getElementById("pc1-head-middle").clientWidth
this.left = (1400 - this.clientWidth)/2
}
},
mounted() {
// 获取pc1-head长度
this.clientWidth = document.getElementById("pc1-head-middle").clientWidth
this.left = (1400 - this.clientWidth-50)/2 -120
// 数据筛选
this.product.forEach((item, index) => {
if (item.flag == this.i) {
return this.i;
}
});
this.duct = this.product[this.i];
}
};
</script>
<style lang="less" scope>
.pc1-head{
.pc1-head-left{
width: 440px;
}
.pc1-head-right{
width: 440px;
}
}
@media (max-width:1400px ) {
.pc1-head{
.pc1-head-left{
width: 340px;
}
.pc1-head-right{
width: 340px;
}
}
}
</style>
src/pages/product/expe.vue
View file @ 521f39d7
<template>
<div>
<div class="pc1">
<div class="pc1-top mt">
<div class="pc1-left">
<div class="pc11">
<div class="pc1-top mt pc1-top1-2">
<div class="pc1-left pc1-left1-2">
<img :src="product[i].url1" width="100%" alt="" />
</div>
<div class="pc1-right">
<img :src="product[i].url2" width="100%" height="50%" alt="" />
<div class="pc1-right pc1-right1-2">
<span><img :src="product[i].url2" alt="" /></span>
<p>ENGINEER THE EXCITEMENT</p>
<div>{{ product[i].title }}</div>
</div>
</div>
<div class="pc1-head">
<div class="pc1-head-left"></div>
<h4 id="pc1-head-middle">{{ product[i].top }}</h4>
<div class="pc1-head-right"></div>
<div class="pc1-head pc1-head1-2">
<Row align="middle" class-name="row">
<Col span="9"><div class="pc1-head-left1"></div></Col>
<Col span="5"><h4 >{{ product[i].top }}</h4></Col>
<Col span="9"><div class="pc1-head-right1"></div></Col>
</Row>
</div>
<!-- 产品简介 -->
<div class="pc1-product">
<div class="pc1-product pc1-product1-2">
<div class="instructions">
<h4>产品简介</h4>
<p class="beijng">INTRODUCTION</p>
......@@ -27,7 +30,7 @@
</div>
</div>
<!-- 背景图 -->
<div class="pc1-advert">
<div class="pc1-advert pc1-advert1-3">
<img :src="product[i].advert.img" alt="" />
<div>
拥有<span>无限可能性</span>的<br />
......@@ -36,7 +39,7 @@
</div>
</div>
<!-- 核心要素 -->
<div class="pc1-core">
<div class="pc1-core pc1-core1-2">
<div class=" instructions">
<h4>核心要素</h4>
<p>CORE ELEMENTS</p>
......@@ -63,12 +66,12 @@
</div>
<div class="pc1-function-border">
<div
class="pc1-function-box card2"
class="pc1-function-box1 card2"
v-for="(item, index) in product[i].function"
:key="index"
>
<img :src="item.url" alt="" />
<h4>{{ item.title }}</h4>
<h4 >{{ item.title }}</h4>
<div>{{ item.content }}</div>
</div>
</div>
......@@ -80,28 +83,28 @@
<p>APPLICATION SCEMARIOS</p>
</div>
<div class="pc1-scene-lication">
<div class="pc1-scene-lt">
<div class="pc1-scene-back1">
<img width="460px" height="400px" :src="product[i].icon.catia.url1" alt="" />
<div><span>高科技</span></div>
<div class="pc1-scene-top">
<div class="pc1-scene-top-pr1 op-b">
<img :src="product[i].icon.catia.url1" width="100%" height="100%" alt="">
<div><span>{{ product[i].icon.catia.title1 }}</span></div>
</div>
<div class="pc1-scene-back2">
<img width="440px" height="400px" :src="product[i].icon.catia.url2" alt="" />
<div><span>航空航天与国防</span></div>
<div class="op-b pc1-scene-top-pr1">
<img :src="product[i].icon.catia.url2" width="100%" height="100%" alt="">
<div><span>{{ product[i].icon.catia.title2 }}</span></div>
</div>
<div class="pc1-scene-back3">
<img width="440px" height="400px" :src="product[i].icon.catia.url3" alt="" />
<div><span>工业设备</span></div>
<div class="op-b">
<img :src="product[i].icon.catia.url3" width="100%" height="100%" alt="">
<div><span>{{ product[i].icon.catia.title3 }}</span></div>
</div>
</div>
<div class="pc1-scene-lb">
<div class="pc1-scene-tail1">
<img width="600px" height="400px" :src="product[i].icon.catia.url4" alt="" />
<div><span>建筑工程与施工</span></div>
<div class="pc1-scene-bottom">
<div class="pc1-scene-top-pr3 op-b">
<img :src="product[i].icon.catia.url4" width="100%" height="100%" alt="">
<div><span>{{ product[i].icon.catia.title4 }}</span></div>
</div>
<div class="pc1-scene-tail2">
<img width="770px" height="400px" :src="product[i].icon.catia.url5" alt="" />
<div><span>汽车与交通运输</span></div>
<div class="op-b">
<img :src="product[i].icon.catia.url5" width="100%" height="100%" alt="">
<div><span>{{ product[i].icon.catia.title5 }}</span></div>
</div>
</div>
</div>
......@@ -218,29 +221,9 @@ export default {
};
},
mounted() {
// 获取pc1-head长度
this.clientWidth = document.getElementById("pc1-head-middle").clientWidth;
this.left = ((1400 - this.clientWidth) / 2)-120;
}
};
</script>
<style lang="less" scoped>
.pc1-head {
.pc1-head-left {
width: 590px;
}
.pc1-head-right {
width: 590px;
}
}
@media (max-width: 1400px) {
.pc1-head {
.pc1-head-left {
width: 500px;
}
.pc1-head-right {
width: 500px;
}
}
}
</style>
src/pages/product/fabric.vue
View file @ 521f39d7
<template>
<div class="pc1 xx1">
<img src="/image/0001.png" alt="">
<div>
<div class="pc11">
<div class="pc1-top mt pc1-top1-2">
<div class="pc1-left pc1-left1-2">
<img :src="product[i].url1" width="100%" height="100%" alt="" />
</div>
<div class="pc1-right pc1-right1-2">
<img :src="product[i].url2" alt="" />
<P>PLAN YOUR DEFINITION OF SUCCESS</P>
<div style="padding-top:71px;line-height:47px">智能3D空间规划<br> 解决方案</div>
</div>
</div>
<div class="pc1-head pc1-head1-2">
<Row align="middle" class-name="row">
<Col span="7"><div class="pc1-head-left1"></div></Col>
<Col span="10"><h4 >{{ product[i].top }}</h4></Col>
<Col span="7"><div class="pc1-head-right1"></div></Col>
</Row>
</div>
<!-- 产品简介 -->
<div class="pc1-product pc1-product1-2">
<div class="instructions">
<h4>产品简介</h4>
<p class="beijng">INTRODUCTION</p>
</div>
<div class="pc1-pr-content">
<p>{{ product[i].product.p1 }}</p>
<p>{{ product[i].product.p2 }}</p>
</div>
</div>
<!-- 背景图 -->
<div class="pc1-advert pc1-advert1-2">
<img :src="product[i].advert.img" alt="" />
</div>
<!-- 功能模块 -->
<div class="pc1-function">
<div class="instructions">
<h4>功能模块</h4>
<p>FUNCTION MODULE</p>
</div>
<div class="pc1-function-border">
<div
class="pc1-function-box1 card2"
v-for="(item, index) in product[i].function"
:key="index"
>
<img width="50px" height="50px" :src="item.url" alt="" />
<h4>{{ item.title }}</h4>
<div>{{ item.content }}</div>
</div>
</div>
</div>
<!-- 应用场景 -->
<div class="pc1-scene">
<div class="instructions">
<h4>应用场景</h4>
<p>APPLICATION SCEMARIOS</p>
</div>
<div class="pc1-scene-lication">
<div class="pc1-scene-top">
<div class="pc1-scene-top-pr1 op-b">
<img :src="product[i].icon.catia.url1" width="100%" height="100%" alt="">
<div><span>{{ product[i].icon.catia.title1 }}</span></div>
</div>
<div class="op-b pc1-scene-top-pr1">
<img :src="product[i].icon.catia.url2" width="100%" height="100%" alt="">
<div><span>{{ product[i].icon.catia.title2 }}</span></div>
</div>
<div class="op-b">
<img :src="product[i].icon.catia.url3" width="100%" height="100%" alt="">
<div><span>{{ product[i].icon.catia.title3 }}</span></div>
</div>
</div>
<div class="pc1-scene-bottom">
<div class="pc1-scene-top-pr3 op-b">
<img :src="product[i].icon.catia.url4" width="100%" height="100%" alt="">
<div><span>{{ product[i].icon.catia.title4 }}</span></div>
</div>
<div class="op-b">
<img :src="product[i].icon.catia.url5" width="100%" height="100%" alt="">
<div><span>{{ product[i].icon.catia.title5 }}</span></div>
</div>
</div>
</div>
</div>
</div> </div>
</template>
<script>
export default {
export default {
name: "",
head: {
title: "德天博城-------3DVIA"
},
data() {
return {
i: 0,
duct: {},
product:[
{
header: "EXPE",
flag: 0,
top: "为实现卓越运营的数字解决方案",
url1: "/image/3dvia/0801.png",
url2: "/image/3dvia/0802.png",
title: "智能3D空间规划解决方案",
//产品简介
product: {
p1: "3DVIA 为企业和消费者提供了智能 3D 空间规划解决方案，该方案提供了参与、思考和做出最佳选择的新方法。",
},
// 背景图
advert: {
img: "/image/3dvia/0810.jpg",
},
}
</script>
<style lang="less" scoped>
.xx1{
background: rgb(124, 121, 121);
img{
z-index: 99999999999999999999;
width: 1000px;
position: absolute;
top: 120px;
border: 1px solid #000;
//功能模块
function: [
{
url: "/image/3dvia/0821.png",
title: "自动化",
content:
"自动化专业包括允许用户开发、存储、管理、部署、共享和重放仿真驱动型设计的标准方法的功能"
},
{
url: "/image/3dvia/0822.png",
title: "电磁",
content:
"电磁仿真专业包括电磁波传播仿真技术以及与通信和检测设备的设计和定位相关的信号强度"
},
{
url: "/image/3dvia/0823.png",
title: "流体",
content:
"流体专业包括使用计算流体力学技术的围绕和穿过实体和结构的稳态和瞬态内部和外部流"
},
{
url: "/image/3dvia/0824.png",
title: "结构",
content:
"包括使用适用于实体和结构的 Abaqus 的有限元分析(FEA)，以为线性和非线性静态、热、 动态和冲击效应建模"
},
{
url: "/image/3dvia/0825.png",
title: "优化",
content:
"提供使用不同参数自动运行和重新运行仿真方法的功能，从而允许使用 Isight 技术进行设计空间探索和优化"
}
],
icon: {
//应用场景
url: "",
catia: {
url1: "/image/expe/0220.png",
title1: "高科技",
url2: "/image/expe/0221.png",
title2: "航空航天与国防",
url3: "/image/expe/0222.png",
title3: "工业设备",
url4: "/image/expe/0223.png",
title4: "建筑工程与施工",
url5: "/image/expe/0224.png",
title5: "汽车与交通运输"
}
}
},
],
clientWidth:"",//div长度
left:"",//计算左右边框长度
};
},
created(){
},
mounted() {
},
};
</script>
<style lang="less" scoped>
</style>
src/pages/product/simulia.vue
View file @ 521f39d7
<template>
<div>
<div class="pc1" ref="pc1">
<div class=" mt back-top">
<div class=" back-ground">
<div class="pc11">
<div class=" mt back-top pc1-top1-2">
<div class=" back-ground ">
<div class="back-ground1">
<img class="back-ground1" :src="product[i].url1.url1" alt="" />
<img class="back-ground2" :src="product[i].url1.url2" alt="" />
<img class="back-ground3" :src="product[i].url1.url3" alt="" />
</div>
<div class="pc1-right">
<img :src="product[i].url2" width="100%" height="50%" alt="" />
<div class=" back-bottom">
<div class="back-ground2">
<img :src="product[i].url1.url2" alt="" />
</div>
<div class="back-ground3">
<img :src="product[i].url1.url3" alt="" />
</div>
</div>
</div>
<div class="pc1-right pc1-right1-2">
<img :src="product[i].url2" alt="" />
<p>REVEAL THE WORLD WE LIVE IN</p>
<div>{{ product[i].title }}</div>
</div>
</div>
<div class="pc1-head">
<div class="pc1-head-left"></div>
<h4 id="pc1-head-middle">{{ product[i].top }}</h4>
<div class="pc1-head-right"></div>
<div class="pc1-head pc1-head1-2">
<Row align="middle" class-name="row">
<Col span="7"><div class="pc1-head-left1"></div></Col>
<Col span="10"><h4 >{{ product[i].top }}</h4></Col>
<Col span="7"><div class="pc1-head-right1"></div></Col>
</Row>
</div>
<!-- 产品简介 -->
<div class="pc1-product">
<div class="pc1-product pc1-product1-2">
<div class="instructions">
<h4>产品简介</h4>
<p class="beijng">INTRODUCTION</p>
......@@ -29,7 +40,7 @@
</div>
</div>
<!-- 背景图 -->
<div class="pc1-advert">
<div class="pc1-advert pc1-advert1-2">
<img :src="product[i].advert.img" alt="" />
</div>
......@@ -41,11 +52,11 @@
</div>
<div class="pc1-function-border">
<div
class="pc1-function-box card2"
class="pc1-function-box1 card2"
v-for="(item, index) in product[i].function"
:key="index"
>
<img :src="item.url" alt="" />
<img width="50px" height="50px" :src="item.url" alt="" />
<h4>{{ item.title }}</h4>
<div>{{ item.content }}</div>
</div>
......@@ -58,33 +69,33 @@
<p>APPLICATION SCEMARIOS</p>
</div>
<div class="pc1-scene-lication">
<div class="pc1-scene-lt">
<div class="pc1-scene-back1">
<img width="460px" height="400px" :src="product[i].icon.catia.url1" alt="" />
<div><span>高科技</span></div>
<div class="pc1-scene-top">
<div class="pc1-scene-top-pr1 op-b">
<img :src="product[i].icon.catia.url1" width="100%" height="100%" alt="">
<div><span>{{ product[i].icon.catia.title1 }}</span></div>
</div>
<div class="pc1-scene-back2">
<img width="440px" height="400px" :src="product[i].icon.catia.url2" alt="" />
<div><span>航空航天与国防</span></div>
<div class="op-b pc1-scene-top-pr1">
<img :src="product[i].icon.catia.url2" width="100%" height="100%" alt="">
<div><span>{{ product[i].icon.catia.title2 }}</span></div>
</div>
<div class="pc1-scene-back3">
<img width="440px" height="400px" :src="product[i].icon.catia.url3" alt="" />
<div><span>工业设备</span></div>
<div class="op-b">
<img :src="product[i].icon.catia.url3" width="100%" height="100%" alt="">
<div><span>{{ product[i].icon.catia.title3 }}</span></div>
</div>
</div>
<div class="pc1-scene-lb">
<div class="pc1-scene-tail1">
<img width="600px" height="400px" :src="product[i].icon.catia.url4" alt="" />
<div><span>建筑工程与施工</span></div>
<div class="pc1-scene-bottom">
<div class="pc1-scene-top-pr3 op-b">
<img :src="product[i].icon.catia.url4" width="100%" height="100%" alt="">
<div><span>{{ product[i].icon.catia.title4 }}</span></div>
</div>
<div class="pc1-scene-tail2">
<img width="770px" height="400px" :src="product[i].icon.catia.url5" alt="" />
<div><span>汽车与交通运输</span></div>
<div class="op-b">
<img :src="product[i].icon.catia.url5" width="100%" height="100%" alt="">
<div><span>{{ product[i].icon.catia.title5 }}</span></div>
</div>
</div>
</div>
</div>
</div>c </div>
</div> </div>
</template>
<script>
......@@ -173,50 +184,16 @@ export default {
}
],
clientWidth:"",//div长度
left:"",//计算左右边框长度
};
},
created(){
},
mounted() {
// 获取pc1-head长度
this.length()
},
methods:{
length(){
console.log(this.$refs.pc1.clientWidth)
if(this.$refs.pc1.clientWidth >=1400){
this.clientWidth = document.getElementById("pc1-head-middle").clientWidth;
this.left = (1400 - this.clientWidth-50) / 2 ;
console.log(111)
}else{
this.clientWidth = document.getElementById("pc1-head-middle").clientWidth;
this.left = (1400 - this.clientWidth-50) / 2 -120;
console.log(0)
}
}
}
};
</script>
<style lang="less" scoped>
.pc1-head{
.pc1-head-left{
width: 430px;
}
.pc1-head-right{
width: 430px;
}
}
@media (max-width:1400px ) {
.pc1-head{
.pc1-head-left{
width: 340px;
}
.pc1-head-right{
width: 340px;
}
}
}
</style>
src/static/image/3dvia/0802.png
View replaced file @ ae7ad5ad View file @ 521f39d7
src/static/image/3dvia/0802.png

18.8 KB | W: | H:

src/static/image/3dvia/0802.png

35 KB | W: | H:

src/static/image/3dvia/0802.png
src/static/image/3dvia/0802.png
src/static/image/3dvia/0802.png
src/static/image/3dvia/0802.png
  • 2-up
  • Swipe
  • Onion skin
src/static/image/catia/0301.png
View replaced file @ ae7ad5ad View file @ 521f39d7
src/static/image/catia/0301.png

195 KB | W: | H:

src/static/image/catia/0301.png

154 KB | W: | H:

src/static/image/catia/0301.png
src/static/image/catia/0301.png
src/static/image/catia/0301.png
src/static/image/catia/0301.png
  • 2-up
  • Swipe
  • Onion skin
src/static/image/catia/0302.png
View replaced file @ ae7ad5ad View file @ 521f39d7
src/static/image/catia/0302.png

32.6 KB | W: | H:

src/static/image/catia/0302.png

6.5 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/delmia/0402.png
View replaced file @ ae7ad5ad View file @ 521f39d7
src/static/image/delmia/0402.png

23 KB | W: | H:

src/static/image/delmia/0402.png

7.45 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/0502.png
View replaced file @ ae7ad5ad View file @ 521f39d7
src/static/image/enovia/0502.png

24.6 KB | W: | H:

src/static/image/enovia/0502.png

8.37 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/expe/0202.png
View replaced file @ ae7ad5ad View file @ 521f39d7
src/static/image/expe/0202.png

25.4 KB | W: | H:

src/static/image/expe/0202.png

14.4 KB | W: | H:

src/static/image/expe/0202.png
src/static/image/expe/0202.png
src/static/image/expe/0202.png
src/static/image/expe/0202.png
  • 2-up
  • Swipe
  • Onion skin
src/static/image/index/0109.png
View replaced file @ ae7ad5ad View file @ 521f39d7
src/static/image/index/0109.png

34.9 KB | W: | H:

src/static/image/index/0109.png

160 KB | W: | H:

src/static/image/index/0109.png
src/static/image/index/0109.png
src/static/image/index/0109.png
src/static/image/index/0109.png
  • 2-up
  • Swipe
  • Onion skin
src/static/image/simulia/0702.png
View replaced file @ ae7ad5ad View file @ 521f39d7
src/static/image/simulia/0702.png

24.2 KB | W: | H:

src/static/image/simulia/0702.png

48 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
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