Skip to content

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

颜色更改，导航更改

parent 6974c42c
Hide whitespace changes
Inline Side-by-side
Showing with 257 additions and 514 deletions
src/assets/theme/layout.less
View file @ c6fa351a
......@@ -2157,7 +2157,7 @@ line-height: 48px;
width: 480px;
height: 474px;
img {
margin-top: 65px;
margin-top: 80px;
height: 172px;
}
div {
......@@ -2204,7 +2204,7 @@ line-height: 48px;
width: 480px;
height: 474px;
img {
margin-top: 65px;
margin-top: 80px;
height: 172px;
}
div {
......@@ -2291,7 +2291,6 @@ line-height: 48px;
opacity: 1;
}
.pc1-head-right {
width: 560px;
height: 2px;
background: linear-gradient(
63deg,
......@@ -2740,7 +2739,6 @@ line-height: 48px;
.assembling-right{
display: inline-block;
margin-top: 120px;
font-size: 30px;
font-family: Alibaba Sans;
color: #232323;
......@@ -2754,6 +2752,7 @@ line-height: 48px;
font-size: 23px;
font-weight: 300;
line-height: 30px;
text-indent: 46px;
}
}
}
......@@ -2783,7 +2782,7 @@ line-height: 48px;
.mbd-top{
.mbd-right{
div{
font-size: 23px !important;
font-size:1.5rem ;
text-indent: 2em;
}
}
......@@ -2839,6 +2838,7 @@ line-height: 48px;
text-align: center;
}
div {
text-align: justify;
text-indent: 2em;
font-size: 23px;
font-weight: 300;
......@@ -2903,6 +2903,7 @@ line-height: 48px;
font-weight: 300;
color: #232323;
opacity: 1;
padding-top: 20px;
}
}
}
......@@ -3073,7 +3074,7 @@ line-height: 48px;
}
.pc1-right{
img{
margin-top: 56px;
margin-top: 80px;
}
div{
padding-top: 64px;
......
src/pages/index.vue
View file @ c6fa351a
......@@ -586,9 +586,9 @@ export default {
title: "德天博城",
meta:[
{
hid:"description",
name:"description",
content:this.dataList.all
hid:"11111111111111111",
name:"11112222",
content:"1231231231"
}
]
}
......
src/pages/p1/assembling.vue
View file @ c6fa351a
<template>
<div class="pc1">
<div class="assembling-top">
<div class="assembling-left">
<img :src="product.url" alt="" />
</div>
<div class="assembling-right">
<h4>{{ product.title1 }}</h4>
<div>{{ product.title2 }}</div>
</div>
<Row>
<Col span="14">
<img :src="product.url" width="100%" alt="" />
</Col>
<Col span="10">
<div class="assembling-right" style="padding-left:86px">
<h4>{{ product.title1 }}</h4>
<div>{{ product.title2 }}</div>
</div>
</Col>
</Row>
</div>
<!-- <img src="/image/zhuangpei/1203.png" alt=""> -->
<div class="assembling-1 mauto">
......@@ -33,11 +37,6 @@
</div>
</div>
</div>
</template>
......@@ -82,116 +81,5 @@ export default {
};
</script>
<style lang="less" scoped>
.flex-top {
display: flex;
justify-content: space-around;
background: url(/image/zhuangpei/1202.png);
background-size: 100% 100%;
.flex-img {
flex: 0.4;
// width: 60%;
img {
width: 100%;
height: 100%;
}
}
.zhong {
flex: 0.2;
}
.flex-wenzi {
flex: 0.4;
display: flex;
flex-direction: column;
h4 {
display: flex;
align-items: center;
height: 50%;
font-size: 30px;
font-weight: 500;
margin: auto;
// color: #000;
}
div {
// padding-right: 20%;
height: 50%;
font-weight: 500;
font-size: 20px;
color: rgb(47, 46, 104);
display: flex;
flex-direction: row-reverse;
}
}
}
.flex-right{
width: 100%;
display: flex;
flex-direction: row-reverse;
.img1{
flex: .4;
width: 40%;
}
.img2{
flex: .7;
width: 70%;
}
}
.wenzi{
margin-top: 50px;
width:60%;
font-size: 20px;
font-weight: 500;
color: #000;
}
.flex-youshi{
display: flex;
h4{
width: 30%;
font-size: 24px;
font-weight: 500;
display: flex;
flex-direction: column-reverse;
text-align: center;
color: #000;
}
div{
width: 70%;
img{
width: 100%;
}
}
}
.border-margin{
margin: 50px auto;
}
.neirong{
margin-top: 20px;
width: 60%;
font-size: 20px;
color: rgb(138, 135, 135);
}
.liucheng{
img{
width: 55%;
}
div{
display: flex;
flex-direction: row-reverse;
.liucheng-wen{
width: 60%;
display: flex;
flex-direction: column;
h4{
font-size: 20px;
font-weight: bold;
}
div{
font-size: 20px;
color: rgb(138, 135, 135);
}
}
}
}
</style>
src/pages/p1/electromechanical.vue
View file @ c6fa351a
<template>
<div class="pc1">
<div class="research-top">
<div class="research-left">
<img :src="product.url" alt="" />
</div>
<div class="research-right">
<h4>{{ product.title1 }}</h4>
<div>{{ product.title2 }}</div>
</div>
<Row>
<Col span="14">
<img :src="product.url" width="100%" alt="" />
</Col>
<Col span="10">
<div class="research-right">
<h4>{{ product.title1 }}</h4>
<div>{{ product.title2 }}</div>
</div>
</Col>
</Row>
</div>
<div class="research-1 mauto">
<img :src="product.picture1" alt="" />
......@@ -74,4 +78,10 @@ export default {
}
};
</script>
<style lang="less" scoped></style>
<style lang="less" scoped>
@media (max-width:1400px) {
.research-right{
margin-left: 100px !important;
}
}
</style>
src/pages/p1/machining.vue
View file @ c6fa351a
<template>
<div class="pc1">
<div class="research-top">
<div class="research-left">
<img :src="product.url" alt="" />
</div>
<div class="research-right">
<h4>{{ product.title1 }}</h4>
<div>{{ product.title2 }}</div>
</div>
<Row>
<Col span="14">
<img :src="product.url" width="100%" alt="" />
</Col>
<Col span="10">
<div class="research-right">
<h4>{{ product.title1 }}</h4>
<div>{{ product.title2 }}</div>
</div>
</Col>
</Row>
</div>
<div class="machining-1 mauto">
<img width="100%" :src="product.fangan.picture" alt="" />
......@@ -98,177 +102,11 @@ export default {
}
};
</script>
<style lang="less" scoped>
.flex-top {
display: flex;
justify-content: space-around;
background: url(/image/jijia/1002.png);
background-size: 100% 100%;
.flex-img {
flex: 0.3;
// width: 60%;
img {
width: 100%;
height: 100%;
}
}
.zhong {
flex: 0.2;
}
.flex-wenzi {
flex: 0.4;
display: flex;
flex-direction: column;
h4 {
display: flex;
align-items: center;
height: 50%;
font-size: 30px;
font-weight: 500;
margin: auto;
// color: #000;
}
div {
// padding-right: 20%;
height: 50%;
font-weight: 500;
font-size: 20px;
color: rgb(47, 46, 104);
display: flex;
flex-direction: row-reverse;
}
}
}
.flex-right {
width: 100%;
display: flex;
flex-direction: row-reverse;
.img1 {
flex: 0.4;
width: 40%;
}
.img2 {
flex: 0.7;
width: 70%;
}
}
.border-margin {
margin: 50px auto;
}
.neirong {
margin-top: 20px;
width: 60%;
font-size: 20px;
color: rgb(138, 135, 135);
}
.jiegou {
display: flex;
width: 100%;
.img1 {
img {
width: 100%;
}
}
h4 {
width: 100%;
display: flex;
align-items: center;
}
}
.zhouqi {
.zhouqi-ul {
display: flex;
flex-direction: row-reverse;
ul {
width: 70%;
font-size: 18px;
font-weight: 600;
color: #000;
li {
padding-top: 20px;
}
}
}
}
.jijia {
.jijia-flex {
display: flex;
.jijia-flex-font {
width: 40%;
display: flex;
align-items: center;
padding-left: 10%;
}
.zhong {
width: 10%;
}
.jijia-flex-img {
width: 50%;
}
}
}
.fangan {
display: flex;
.fangan-card {
width: 50%;
// padding-left:10%;
align-items: center;
.fangan-title {
padding-bottom: 10%;
color: rgb(124, 122, 122);
}
.fangan-content {
h4{
font-size: 18px;
font-weight: 600;
color: #000;
}
p {
font-size: 18px;
font-weight: 500;
color: rgb(124, 122, 122)
<style lang="less" scope>
@media (max-width:1400px) {
.research-right{
margin-left: 100px !important;
margin-top: 80px !important;
}
}
}
.zhong {
width: 5%;
}
.img-img {
width: 45%;
// padding-right: 5%;
img {
width: 100%;
}
}
}
.shishi{
width: 100%;
.shishi-title{
display: flex;
h4{
flex: .4;
display: flex;
align-items: center;
font-weight: 700;
}
div{
flex: .6;
img{
width: 100%;
}
}
}
.shishi-content{
color: #000;
font-size: 18px;
font-weight: 600;
}
}
h4 {
font-size: 20px;
}
</style>
</style>
\ No newline at end of file
src/pages/p1/mbd.vue
View file @ c6fa351a
......@@ -2,15 +2,23 @@
<div>
<div class="pc1">
<div class="mbd-top research-top">
<div class="mbd-left research-left">
<img :src="product.url1" alt="" />
<Row>
<Col span="14">
<div class="mbd-left research-left">
<img :src="product.url1" width="100%" alt="" />
</div>
</Col>
<Col span="10">
<div class="mbd-right research-right">
<h4>{{ product.title1 }}</h4>
<div v-for="(item, index) in product.title2" :key="index">
{{ item }}
</div>
</div>
</Col>
</Row>
</div>
<div class="mbd-1 mauto">
<div class="mbd-image1">
......@@ -86,125 +94,17 @@ export default {
};
</script>
<style lang="less" scoped>
.flex-top {
display: flex;
justify-content: space-around;
background: url(/image/mbd/0602.png);
background-size: 100% 100%;
.flex-img {
flex: 0.4;
// width: 60%;
img {
width: 100%;
height: 100%;
}
}
.zhong {
flex: 0.2;
}
.flex-wenzi {
flex: 0.4;
display: flex;
flex-direction: column;
h4 {
display: flex;
align-items: center;
height: 50%;
font-size: 30px;
font-weight: 500;
margin: auto;
// color: #000;
}
div {
// padding-right: 20%;
height: 50%;
font-weight: 500;
font-size: 20px;
color: rgb(47, 46, 104);
display: flex;
flex-direction: row-reverse;
}
}
}
.flex-right {
width: 100%;
display: flex;
flex-direction: row-reverse;
.img1 {
flex: 0.4;
width: 40%;
}
.img2 {
flex: 0.7;
width: 70%;
}
}
.border-margin {
margin: 50px auto;
}
.neirong {
margin-top: 20px;
width: 60%;
font-size: 20px;
color: rgb(138, 135, 135);
}
.jiegou {
display: flex;
width: 100%;
.img1 {
img {
width: 100%;
}
}
h4 {
width: 100%;
display: flex;
align-items: center;
}
}
.zhouqi {
.zhouqi-ul {
display: flex;
flex-direction: row-reverse;
ul {
width: 70%;
font-size: 18px;
font-weight: 600;
color: #000;
li {
padding-top: 20px;
@media (max-width:1400px) {
.mbd-top{
.mbd-right{
div{
font-size: 20px;
}
}
}
}
.mbd {
.mbd-flex {
display: flex;
.mbd-flex-font {
width: 50%;
display: flex;
align-items: center;
padding-left: 9%;
}
.zhong {
width: 10%;
.research-right{
margin-top: 70px;
margin-left: 100px;
}
.mbd-flex-img {
width: 50%;
}
}
.mbd-img {
width: 30%;
position: relative;
left: 35%;
top: -100px;
opacity: 0.6;
}
}
h4 {
font-size: 20px;
}
</style>
src/pages/p1/skeletonDesign.vue
View file @ c6fa351a
......@@ -3,13 +3,17 @@
<div class="pc1">
<!-- 头部 -->
<div class="skeleton-top">
<div class="skeleton-left">
<img :src="product.url1" alt="" />
</div>
<div class="skeleton-right">
<h4>{{ product.title1 }}</h4>
<div>{{ product.title2 }}</div>
</div>
<Row>
<Col span="14">
<img :src="product.url1" width="100%" alt="" />
</Col>
<Col span="10">
<div class="skeleton-right guj-right">
<h4>{{ product.title1 }}</h4>
<div>{{ product.title2 }}</div>
</div>
</Col>
</Row>
</div>
<div class="skeleton-1 mauto">
<img :src="product.picture1" alt="" />
......@@ -79,7 +83,14 @@ 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 @ c6fa351a
......@@ -2,20 +2,20 @@
<div>
<div class="pc1">
<div class="pc1-top mt">
<div class="pc1-left">
<img :src="product[i].url1" width="100%" alt="" />
<div class="pc1-left" style="position:relative">
<img :src="product[i].url1" width="125%" alt="" />
</div>
<div class="pc1-right">
<img :src="product[i].url2" width="100%" alt="" />
<div class="pc1-right" style="width:35%;position:relative;">
<img :src="product[i].url2" width="100%" alt="" />
<div>
{{ product[i].title }}
</div>
</div>
</div>
<div class="pc1-head">
<div class="pc1-head-left" :style="[{width:(left + 'px')}]"></div>
<div class="pc1-head-left"></div>
<h4 id="pc1-head-middle">{{ product[i].top }}</h4>
<div class="pc1-head-right" :style="[{width:(left + 'px')}]"></div>
<div class="pc1-head-right"></div>
</div>
<!-- 产品简介 -->
<div class="pc1-product">
......@@ -63,10 +63,10 @@
class="pc1-problems-box "
v-for="(item, index) in product[i].problems.catia"
:key="index"
>
<div>
<img :src="item.url" alt="" />
</div>
>
<div>
<img :src="item.url" alt="" />
</div>
<h4>{{ item.title }}</h4>
</div>
</div>
......@@ -105,7 +105,9 @@
:src="product[i].icon.catia.url1"
alt=""
/>
<div><span>{{product[i].icon.catia.title1}}</span></div>
<div>
<span>{{ product[i].icon.catia.title1 }}</span>
</div>
</div>
<div class="pc1-scene-catia2 pl">
<img
......@@ -114,7 +116,9 @@
:src="product[i].icon.catia.url2"
alt=""
/>
<div><span>{{product[i].icon.catia.title2}}</span></div>
<div>
<span>{{ product[i].icon.catia.title2 }}</span>
</div>
</div>
</div>
<div class="pc1-scene-lb">
......@@ -125,7 +129,9 @@
:src="product[i].icon.catia.url3"
alt=""
/>
<div><span>{{product[i].icon.catia.title3}}</span></div>
<div>
<span>{{ product[i].icon.catia.title3 }}</span>
</div>
</div>
<div class="pc1-scene-tail2">
<img
......@@ -134,7 +140,9 @@
:src="product[i].icon.catia.url4"
alt=""
/>
<div><span>{{product[i].icon.catia.title4}}</span></div>
<div>
<span>{{ product[i].icon.catia.title4 }}</span>
</div>
</div>
</div>
</div>
......@@ -147,16 +155,15 @@
export default {
name: "",
head: {
title: "德天博城CATIA"
title: "德天博城-------CATIA"
},
data() {
return {
i: 0,
duct: {},
clientWidth:"",
left:"",
clientWidth: "",
left: "",
product: [
{
flag: 1,
top: "基于数字化模型的产品设计",
......@@ -271,7 +278,7 @@ export default {
]
};
},
created(){
created() {
// this.length()
},
methods: {
......@@ -282,16 +289,27 @@ export default {
// }
},
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: 470px;
}
.pc1-head-right {
width: 470px;
}
}
@media (max-width: 1400px) {
.pc1-head {
.pc1-head-left {
width: 375px;
}
.pc1-head-right {
width: 375px;
}
}
}
</style>
src/pages/product/delmia.vue
View file @ c6fa351a
......@@ -13,9 +13,9 @@
</div>
</div>
<div class="pc1-head">
<div class="pc1-head-left" :style="[{ width: left + 'px' }]"></div>
<div class="pc1-head-left"></div>
<h4 id="pc1-head-middle">{{ product[i].top }}</h4>
<div class="pc1-head-right" :style="[{ width: left + 'px' }]"></div>
<div class="pc1-head-right"></div>
</div>
<!-- 产品简介 -->
<div class="pc1-product">
......@@ -116,7 +116,7 @@
export default {
name: "",
head: {
title: "德天博城CATIA"
title: "德天博城-------DELMIA"
},
data() {
return {
......@@ -238,29 +238,32 @@ export default {
};
},
created() {
// this.length()
},
methods: {
// length() {
// // 获取pc1-head长度
// this.clientWidth = document.getElementById("pc1-head-middle").clientWidth;
// this.left = (1400 - this.clientWidth) / 2 -120;
// }
},
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">
<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 @ c6fa351a
......@@ -10,10 +10,10 @@
<div style="padding-top:71px;line-height:47px">智能3D空间规划<br> 解决方案</div>
</div>
</div>
<div class="pc1-head">
<div class="pc1-head-left" :style="[{width:(left + 'px')}]"></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" :style="[{width:(left + 'px')}]"></div>
<div class="pc1-head-right"></div>
</div>
<!-- 产品简介 -->
<div class="pc1-product">
......@@ -89,7 +89,7 @@
export default {
name: "",
head: {
title: "德天博城-------3DEXPERIENCE"
title: "德天博城-------3DVIA"
},
data() {
return {
......@@ -167,14 +167,34 @@ export default {
clientWidth:"",//div长度
left:"",//计算左右边框长度
};
},
created(){
},
mounted() {
// 获取pc1-head长度
this.clientWidth = document.getElementById("pc1-head-middle").clientWidth;
this.left = (1400 - this.clientWidth-50) / 2 -120;
}
},
};
</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 @ c6fa351a
......@@ -13,9 +13,9 @@
</div>
</div>
<div class="pc1-head">
<div class="pc1-head-left" :style="[{width:(left + 'px')}]"></div>
<div class="pc1-head-left"></div>
<h4 id="pc1-head-middle">{{ product[i].top }}</h4>
<div class="pc1-head-right" :style="[{width:(left + 'px')}]"></div>
<div class="pc1-head-right"></div>
</div>
<!-- 产品简介 -->
<div class="pc1-product">
......@@ -149,7 +149,7 @@
export default {
name: "",
head: {
title: "德天博城CATIA"
title: "德天博城-------ENOVIA"
},
data() {
return {
......@@ -297,3 +297,23 @@ export default {
}
};
</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 @ c6fa351a
......@@ -11,9 +11,9 @@
</div>
</div>
<div class="pc1-head">
<div class="pc1-head-left" :style="[{width:(left + 'px')}]"></div>
<div class="pc1-head-left"></div>
<h4 id="pc1-head-middle">{{ product[i].top }}</h4>
<div class="pc1-head-right" :style="[{width:(left + 'px')}]"></div>
<div class="pc1-head-right"></div>
</div>
<!-- 产品简介 -->
<div class="pc1-product">
......@@ -225,5 +225,22 @@ export default {
};
</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/simulia.vue
View file @ c6fa351a
......@@ -13,9 +13,9 @@
</div>
</div>
<div class="pc1-head">
<div class="pc1-head-left" :style="[{width:(left + 'px')}]"></div>
<div class="pc1-head-left"></div>
<h4 id="pc1-head-middle">{{ product[i].top }}</h4>
<div class="pc1-head-right" :style="[{width:(left + 'px')}]"></div>
<div class="pc1-head-right"></div>
</div>
<!-- 产品简介 -->
<div class="pc1-product">
......@@ -91,7 +91,7 @@
export default {
name: "",
head: {
title: "德天博城-------3DEXPERIENCE"
title: "德天博城-------SIMULIA"
},
data() {
return {
......@@ -201,5 +201,22 @@ 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>
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