Skip to content

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

自适应更改

parent e91316e7
Hide whitespace changes
Inline Side-by-side
Showing with 318 additions and 155 deletions
src/assets/theme/layout.less
View file @ e7305175
......@@ -3083,7 +3083,7 @@ line-height: 48px;
.research-top{//头部导航
max-width: 1400px;
min-width: 1100px;
width: 80%;
width: 90%;
margin:100px auto 80px;
.research-right{
height: 100%;
......@@ -3323,10 +3323,10 @@ line-height: 48px;
.pc1-top1-2{//顶部
display: flex;
justify-content: space-between;
width: 80%;
width: 90%;
min-width: 1100px;
max-width: 1400px;
max-height: 474px;
max-height: 430px;
height: 29.625rem;
min-height: 372px;
margin:100px auto 80px;
......@@ -3338,55 +3338,42 @@ line-height: 48px;
width: 100%;
}
}
.back-ground{//simulia
width: 65%;
position: relative;
.back-bottom{
width: 100%;
height: 280px;
position: absolute;
bottom: 0;
.header-top{//simulia 导航名称
width: 70%;
.header-up{
display: flex;
justify-content: space-between;
.header-up-img{
width: 46%;
z-index: 1;
}
.srttop{
width: 27%;
}
}
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;
.header-lower{
margin-top: -6%;
display: flex;
flex-direction: column-reverse;
justify-content: space-between;
.header-img1{
width: 50%;
display: flex;
flex-direction: column-reverse;
}
.header-img2{
width: 45%;
display: flex;
flex-direction: column-reverse;
}
.settop1{
width: 5%;
}
}
.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;
img{
width: 100%;
}
}
.pc1-right1-2{
width: 35%;
img{
......@@ -3414,7 +3401,7 @@ line-height: 48px;
}
}
.pc1-head1-2{//指示
width: 80%;
width: 90%;
max-width: 1400px;
min-width: 1100px;
margin: auto ;
......@@ -3442,7 +3429,7 @@ line-height: 48px;
}
}
.pc1-product1-2{//产品简介
width: 80%;
width: 90%;
max-width: 1400px;
min-width: 1100px;
margin: auto;
......@@ -3466,7 +3453,7 @@ line-height: 48px;
}
}
.pc1-advert1-2{//背景图
width: 80%;
width: 90%;
max-width: 1400px;
min-width: 1100px;
margin:auto;
......@@ -3475,7 +3462,7 @@ line-height: 48px;
}
}
.pc1-advert1-3{//背景图expe
width: 80%;
width: 90%;
max-width: 1400px;
min-width: 1100px;
margin: auto;
......@@ -3504,7 +3491,7 @@ line-height: 48px;
}
}
.pc1-core1-2{//核心要素
width: 80%;
width: 90%;
max-width: 1400px;
min-width: 1100px;
margin: auto;
......@@ -3518,7 +3505,7 @@ line-height: 48px;
}
}
.pc1-problems{//应对问题
width: 80%;
width: 90%;
max-width: 1400px;
min-width: 1100px;
margin: auto;
......@@ -3593,7 +3580,7 @@ line-height: 48px;
}
}
.pc1-function{//功能模块
width: 80%;
width: 90%;
max-width: 1400px;
min-width: 1100px;
margin: auto;
......@@ -3610,7 +3597,7 @@ line-height: 48px;
}
}
.pc1-function1{//demlia页面
width: 80%;
width: 90%;
max-width: 1400px;
min-width: 1100px;
margin: auto;
......@@ -3667,7 +3654,7 @@ line-height: 48px;
}
//应用价值
.pc1-lication{
width: 80%;
width: 90%;
max-width: 1400px;
min-width: 1100px;
margin: auto;
......@@ -3707,7 +3694,7 @@ line-height: 48px;
}
.pc1-scene{//应用场景 4
width: 80%;
width: 90%;
max-width: 1400px;
min-width: 1100px;
margin: auto;
......@@ -3915,7 +3902,46 @@ line-height: 48px;
}
}
.pc11{
.expe-top{
margin-bottom: 80px;
display: flex;
justify-content: space-between;
.expe-left{
width: 63%;
}
.expe-right{
width: 35%;
display: flex;
flex-direction: column;
align-items: center;
.expe-logo{
width: 70%;
margin-top: 80px;
img{
width: 100%;
}
}
p{
margin-top: 30px;
font-size: 19px;
font-weight: 600;
text-align: center;
}
h4{
text-align: center;
margin-top: 95px;
// height: 47px;
line-height: 40px;
font-size: 30px;
font-family: Alibaba Sans;
font-weight: 900;
color: #232323;
opacity: 1;
}
}
}
}
@import url("./phone");
@import url("./extra");
@import url("./product");
......
src/pages/p1/skeletonDesign.vue
View file @ e7305175
......@@ -84,14 +84,5 @@ export default {
};
</script>
<style lang="less" scoped>
@media (max-width:1400px) {
.skeleton-top{
.guj-right{
padding-left: 100px;
}
}
}
</style>
src/pages/product/catia.vue
View file @ e7305175
<template>
<div>
<div class="pc11">
<div class="pc1-top mt pc1-top1-2">
<!-- <div class="pc1-top mt pc1-top1-2">
<div class="pc1-left pc1-left1-2" style="position:relative">
<img :src="product[i].url1" alt="" />
<img :src="product[i].url1" width="100%" alt="" />
</div>
<div class="pc1-right pc1-right1-2">
<img :src="product[i].url2" alt="" />
......@@ -14,6 +14,18 @@
{{ product[i].title }}
</div>
</div>
</div> -->
<div class="expe-top">
<div class="expe-left">
<img :src="product[i].url1" width="100%" alt="">
</div>
<div class="expe-right">
<div class="expe-logo">
<img :src="product[i].url2" alt="">
</div>
<p>ENGINEER THE EXCITEMENT</p>
<h4>{{ product[i].title }}</h4>
</div>
</div>
<div class="pc1-head1-2 pc1-head">
<Row align="middle" class-name="row">
......
src/pages/product/delmia.vue
View file @ e7305175
<template>
<div>
<div class="pc11">
<div class="pc1-top mt pc1-top1-2">
<!-- <div class="pc1-top mt pc1-top1-2">
<div class="pc1-left pc1-left1-2">
<img :src="product[i].url1" height="100%" alt="" />
<img :src="product[i].url1" width="100%" alt="" />
</div>
<div class="pc1-right pc1-right1-2">
<img :src="product[i].url2" alt="" />
......@@ -11,6 +11,18 @@
<div style="padding-top:71px;line-height:47px">数字化企业的互动<br> 制造应用软件</div>
</div>
</div> -->
<div class="expe-top">
<div class="expe-left">
<img :src="product[i].url1" width="100%" alt="">
</div>
<div class="expe-right">
<div class="expe-logo">
<img :src="product[i].url2" alt="">
</div>
<p>ENGINEER THE EXCITEMENT</p>
<h4>数字化企业的互动<br> 制造应用软件</h4>
</div>
</div>
<div class="pc1-head pc1-head1-2">
<Row align="middle" class-name="row">
......@@ -221,7 +233,7 @@ export default {
{
url: "/image/delmia/0446.png",
title: "VNC",
content: "面向虚拟数控加工方针"
content: "面向虚拟数控加工仿真"
}
],
// 应用价值
......
src/pages/product/dvia.vue
View file @ e7305175
<template>
<div>
<div class="pc11">
<div class="pc1-top mt pc1-top1-2">
<!-- <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="" />
<img :src="product[i].url1" 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="expe-top">
<div class="expe-left">
<img :src="product[i].url1" width="100%" height="100%" alt="">
</div>
<div class="expe-right">
<div class="expe-logo">
<img :src="product[i].url2" alt="">
</div>
<p>ENGINEER THE EXCITEMENT</p>
<h4>智能3D空间规划<br> 解决方案</h4>
</div>
</div>
<div class="pc1-head pc1-head1-2">
<Row align="middle" class-name="row">
......
src/pages/product/enovia.vue
View file @ e7305175
<template>
<div>
<div class="pc11">
<div class="pc1-top mt pc1-top1-2">
<!-- <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="" />
<img :src="product[i].url1" width="100%" alt="" />
</div>
<div class="pc1-right pc1-right1-2">
<img :src="product[i].url2" alt="" />
......@@ -12,6 +12,18 @@
{{ product[i].title }}
</div>
</div>
</div> -->
<div class="expe-top">
<div class="expe-left">
<img :src="product[i].url1" width="100%" alt="">
</div>
<div class="expe-right">
<div class="expe-logo">
<img :src="product[i].url2" alt="">
</div>
<p>ENGINEER THE EXCITEMENT</p>
<h4>{{ product[i].title }}</h4>
</div>
</div>
<div class="pc1-head pc1-head1-2">
<Row align="middle" class-name="row">
......
src/pages/product/expe.vue
View file @ e7305175
<template>
<div>
<div class="pc11">
<div class="pc1-top mt pc1-top1-2">
<!-- <div class="pc1-top mt pc1-top1-2">
<div class="pc1-left pc1-left1-2">
<img :src="product[i].url1" width="100%" alt="" />
</div>
......@@ -10,11 +10,25 @@
<p>ENGINEER THE EXCITEMENT</p>
<div>{{ product[i].title }}</div>
</div>
</div> -->
<div class="expe-top">
<div class="expe-left">
<img :src="product[i].url1" width="100%" alt="">
</div>
<div class="expe-right">
<div class="expe-logo">
<img :src="product[i].url2" alt="">
</div>
<p>ENGINEER THE EXCITEMENT</p>
<h4>{{ product[i].title }}</h4>
</div>
</div>
<div class="pc1-head pc1-head1-2">
<Row align="middle" class-name="row">
<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="5"
><h4>{{ product[i].top }}</h4></Col
>
<Col span="9"><div class="pc1-head-right1"></div></Col>
</Row>
</div>
......@@ -71,7 +85,7 @@
:key="index"
>
<img :src="item.url" alt="" />
<h4 >{{ item.title }}</h4>
<h4>{{ item.title }}</h4>
<div>{{ item.content }}</div>
</div>
</div>
......@@ -83,33 +97,69 @@
<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 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="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 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>
</div>
</div>
</template>
<script>
......@@ -122,8 +172,8 @@ export default {
return {
i: 0,
duct: {},
product:[
{
product: [
{
header: "EXPE",
flag: 0,
top: "3D体验平台",
......@@ -214,16 +264,13 @@ export default {
title5: "汽车与交通运输"
}
}
},
}
],
clientWidth:"",//div长度
left:"",//计算左右边框长度
clientWidth: "", //div长度
left: "" //计算左右边框长度
};
},
mounted() {
}
mounted() {}
};
</script>
<style lang="less" scoped>
</style>
<style lang="less" scoped></style>
src/pages/product/simulia.vue
View file @ e7305175
......@@ -2,7 +2,7 @@
<div>
<div class="pc11">
<div class=" mt back-top pc1-top1-2">
<div class=" back-ground ">
<!-- <div class=" back-ground ">
<div class="back-ground1">
<img class="back-ground1" :src="product[i].url1.url1" alt="" />
</div>
......@@ -14,17 +14,38 @@
<img :src="product[i].url1.url3" alt="" />
</div>
</div>
</div> -->
<div class="header-top">
<!--left-->
<div class="header-up">
<div class="settop"></div>
<div class="header-up-img">
<img :src="product[i].url1.url1" alt="" />
</div>
<div class="settop"></div>
</div>
<div class="header-lower">
<div class="header-img1">
<img :src="product[i].url1.url2" alt="" />
</div>
<div class="settop1"></div>
<div class="header-img2">
<img :src="product[i].url1.url3" alt="" />
</div>
</div>
</div>
<div class="pc1-right pc1-right1-2">
<img :src="product[i].url2" alt="" />
<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 pc1-head1-2">
<Row align="middle" class-name="row">
<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="10"
><h4>{{ product[i].top }}</h4></Col
>
<Col span="7"><div class="pc1-head-right1"></div></Col>
</Row>
</div>
......@@ -69,33 +90,69 @@
<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 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="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 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>
</div>
</div>
</template>
<script>
......@@ -108,15 +165,15 @@ export default {
return {
i: 0,
duct: {},
product:[
{
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",
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: "分析仿真平台",
......@@ -182,18 +239,12 @@ export default {
}
}
}
],
]
};
},
created(){
},
mounted() {
},
methods:{
}
created() {},
mounted() {},
methods: {}
};
</script>
<style lang="less" scoped>
</style>
<style lang="less" scoped></style>
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