Skip to content

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

产品服务自适应

parent 075412d8
Hide whitespace changes
Inline Side-by-side
Showing with 117 additions and 189 deletions
src/assets/theme/layout.less
View file @ 1be4f77e
...@@ -1583,21 +1583,24 @@ a.news { ...@@ -1583,21 +1583,24 @@ a.news {
.productt { .productt {
width: 100%; width: 100%;
height: 1000px; // height: 1000px;
// border: 1px solid #000; // border: 1px solid #000;
} }
.productt .productt-content { .productt .productt-content {
width: 1200px; width: 1400px;
max-width: 1400px;
min-width: 1100px;
width: 80%;
margin: 0 auto; margin: 0 auto;
} }
@media (max-width:1280px) { @media (max-width:1280px) {
.productt{ // .productt{
height: 800px; // height: 800px;
} // }
.productt .productt-content { // .productt .productt-content {
width: 1000px; // width: 1000px;
} // }
} }
.productt .productt-content .productt-title { .productt .productt-content .productt-title {
text-align: center; text-align: center;
...@@ -1632,10 +1635,14 @@ a.news { ...@@ -1632,10 +1635,14 @@ a.news {
background: #64D8F7; background: #64D8F7;
margin: 0 auto; margin: 0 auto;
} }
.productt .productt-content .pg-1{
display: flex;
justify-content: space-between;
margin-bottom:120px ;
}
.productt .productt-content .pg-1 li { .productt .productt-content .pg-1 li {
display: inline-block; display: inline-block;
float: left; // float: left;
margin-right: 60px; margin-right: 60px;
padding-bottom: 80px; padding-bottom: 80px;
// width: 392px; // width: 392px;
...@@ -1658,27 +1665,83 @@ a.news { ...@@ -1658,27 +1665,83 @@ a.news {
.productt .productt-content .pg-1 li a { .productt .productt-content .pg-1 li a {
display: inline-block; display: inline-block;
width: 360px; max-width: 400px;
height:320px; min-width: 320px;
width: 25rem;
max-height: 320px;
min-height: 240px;
height: 20rem;
text-align: center; text-align: center;
position: relative; position: relative;
top:21px; top:21px;
} }
@media (max-width:1280px ) and (min-width:1210px) {
.productt .productt-content .pg-1 li a {
top:15px;
}
}
@media (max-width:1210px ) and (min-width:1200px) {
.productt .productt-content .pg-1 li a {
top:17px;
}
}
@media (max-width:1200px ) and (min-width:1196px) {
.productt .productt-content .pg-1 li a {
top:16px;
}
}
@media (max-width:1195px ) and (min-width:1190px) {
.productt .productt-content .pg-1 li a {
top:18px;
}
}
@media (max-width:1190px ) and (min-width:1180px) {
.productt .productt-content .pg-1 li a {
top:19px;
}
}
@media (width:1174px) {
.productt .productt-content .pg-1 li a {
top:18px;
}
}
@media (max-width:1280px) { @media (max-width:1155px ) and (min-width:1126px) {
.productt .productt-content .pg-1 li a { .productt .productt-content .pg-1 li a {
display: inline-block; top:22px;
width: 300px; }
height:240px; }
text-align: center; @media (max-width:1125px ) and (min-width:1100px) {
position: relative; .productt .productt-content .pg-1 li a {
top: 32px; top:23px;
} }
} }
@media (width:1134px ) {
.productt .productt-content .pg-1 li a {
top:23px;
}
}
@media (width:1134px ) {
.productt .productt-content .pg-1 li a {
top:24px;
}
}
@media (width:1139px ) {
.productt .productt-content .pg-1 li a {
top:24px;
}
}
@media (max-width:1100px) {
.productt .productt-content .pg-1 li a {
top:24px;
}
}
.productt .productt-content ul .mask { .productt .productt-content ul .mask {
position: absolute; position: absolute;
bottom: -7px; bottom: -23px;
left: 0px; left: 0px;
text-align: center; text-align: center;
-webkit-transform: rotateX(-90deg); -webkit-transform: rotateX(-90deg);
...@@ -1717,8 +1780,14 @@ a.news { ...@@ -1717,8 +1780,14 @@ a.news {
height: 100%; height: 100%;
line-height: 26px; line-height: 26px;
width: 100%; width: 100%;
padding: 73px 82px; // padding: 73px 82px;
color: #fff; color: #fff;
.mask-occupy{
// height: 100px;
max-height: 100px;
min-height: 80px;
height: 6.25rem;
}
h5{ h5{
font-size: 24px; font-size: 24px;
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
...@@ -1729,6 +1798,7 @@ a.news { ...@@ -1729,6 +1798,7 @@ a.news {
} }
div{ div{
margin: auto;
width: 196px; width: 196px;
height: 76px; height: 76px;
font-size: 14px; font-size: 14px;
...@@ -1740,11 +1810,11 @@ a.news { ...@@ -1740,11 +1810,11 @@ a.news {
} }
} }
@media (max-width:1280px) { // @media (max-width:1280px) {
.productt .productt-content .pg-1 .mask>.mask-content{ // .productt .productt-content .pg-1 .mask>.mask-content{
padding: 55px 50px; // padding: 55px 50px;
} // }
} // }
.productt .productt-content .pg-2 .mask>p, .productt .productt-content .pg-2 .mask>p,
.productt .productt-content .pg-3 .mask>p { .productt .productt-content .pg-3 .mask>p {
...@@ -1762,22 +1832,24 @@ a.news { ...@@ -1762,22 +1832,24 @@ a.news {
width: 360px; width: 360px;
height: 288px; 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{ .productt .productt-content .pg-1 .mask .mask-cover{
width: 360px; width: 400px;
height: 288px; max-width: 400px;
min-width: 320px;
width: 25rem;
height: 320px;
max-height: 320px;
min-width: 240px;
height: 20rem;
background: #294982; background: #294982;
opacity: 0.6; opacity: 0.6;
} }
@media (max-width:1280px) {
@media (max-width:1220px) {
.productt .productt-content .pg-1 .mask .mask-cover{ .productt .productt-content .pg-1 .mask .mask-cover{
width: 300px; width: 320px;
height: 240px; height: 255.91px;
} }
} }
......
src/pages/index.vue
View file @ 1be4f77e
...@@ -67,83 +67,6 @@ ...@@ -67,83 +67,6 @@
<h2 >产品服务</h2> <h2 >产品服务</h2>
<div class="line"></div> <div class="line"></div>
</div> </div>
<!-- <ul class="pg-1 clear-fix">
<li class="ourproducts">
<a href="/product/expe"><img src="/image/index/0104.png" alt=""></a>
</li>
<li class="ourproducts">
<a href="/product/catia"><img src="/image/index/0105.png" alt=""></a>
</li>
<li class="ourproducts">
<a href="/product/delmia"><img src="/image/index/0106.png" alt=""></a>
</li> -->
<!-- <li
class="ourproducts li1"
>
<a
href="/product/mes"
>
<div class="mask">
<img src="/image/mask1.png" alt="" />
<p>
MES控制和记录产品生产过程中的所有要素<br />（人机料法环测）的活动，将决策层......
</p>
<div class="more">查看更多</div>
</div>
<img class="icon" src="/image/p1-icon.png" alt="" />
<p class="p1">智能制造</p>
<p class="p2">MES智能化制造</p>
</a>
</li>
<li
class="ourproducts li2"
>
<a href="/product/saas">
<div class="mask">
<img src="/image/mask1.png" alt="" />
<p>
SaaS MES是一款基于 SaaS 模式的轻量 MES<br />专为中小型、离散型制造企业......
</p>
<div class="more">查看更多</div>
</div>
<img class="icon" src="/image/p2-icon.png" alt="" />
<p class="p1">智能制造</p>
<p class="p2">SaaS MES云端协同</p>
</a>
</li>
<li
class="ourproducts li3"
>
<a href="/product/aps">
<div class="mask">
<img src="/image/mask1.png" alt="" />
<p>
APS（Advanced Planning and Scheduling）<br />即高级计划与排产，运用数学模型......
</p>
<div class="more">查看更多</div>
</div>
<img class="icon" src="/image/p3-icon.png" alt="" />
<p class="p1">智能制造</p>
<p class="p2">APS高级排产</p>
</a>
</li> -->
<!-- </ul> -->
<!-- <ul class="pg-1 clear-fix">
<li>
<a href="/product/enovia"><img src="/image/index/0107.png" alt=""></a>
</li>
<li>
<a href="/product/simulia"><img src="/image/index/0108.png" alt=""></a>
</li>
<li>
<a href="/product/via"><img src="/image/index/0110.png" alt=""></a>
</li>
</ul> -->
<ul class="pg-1 clear-fix"> <ul class="pg-1 clear-fix">
<li <li
class="ourproducts li1" class="ourproducts li1"
...@@ -153,8 +76,8 @@ ...@@ -153,8 +76,8 @@
> >
<div class="mask"> <div class="mask">
<div class="mask-cover"></div> <div class="mask-cover"></div>
<!-- <img src="/image/mask1.png" alt="" /> -->
<div class="mask-content"> <div class="mask-content">
<div class="mask-occupy"></div>
<h5>3DEXPERIENCE</h5> <h5>3DEXPERIENCE</h5>
<div>将人员、想法、数据和解决方案连接到一起， 使企业能够以全新的方式 进行创新的一个协作环境</div> <div>将人员、想法、数据和解决方案连接到一起， 使企业能够以全新的方式 进行创新的一个协作环境</div>
...@@ -172,6 +95,7 @@ ...@@ -172,6 +95,7 @@
<div class="mask"> <div class="mask">
<div class="mask-cover"></div> <div class="mask-cover"></div>
<div class="mask-content"> <div class="mask-content">
<div class="mask-occupy"></div>
<h5>CATIA</h5> <h5>CATIA</h5>
<div>高端的CAD的软件，CATIA以其强大的曲面设计能力而在飞机、汽 <div>高端的CAD的软件，CATIA以其强大的曲面设计能力而在飞机、汽
车、等领域享有很高的声誉</div> 车、等领域享有很高的声誉</div>
...@@ -187,8 +111,8 @@ ...@@ -187,8 +111,8 @@
<nuxt-link to="/product/delmia"> <nuxt-link to="/product/delmia">
<div class="mask"> <div class="mask">
<div class="mask-cover"></div> <div class="mask-cover"></div>
<!-- <img src="/image/mask1.png" alt="" /> -->
<div class="mask-content"> <div class="mask-content">
<div class="mask-occupy"></div>
<h5> <h5>
DELMIA DELMIA
</h5> </h5>
...@@ -210,8 +134,8 @@ ...@@ -210,8 +134,8 @@
> >
<div class="mask"> <div class="mask">
<div class="mask-cover"></div> <div class="mask-cover"></div>
<!-- <img src="/image/mask1.png" alt="" /> -->
<div class="mask-content"> <div class="mask-content">
<div class="mask-occupy"></div>
<h5>ENOVIA</h5> <h5>ENOVIA</h5>
<div> <div>
消除企业内部的信息孤岛，以数字方式将价值网络中的所有用户连接起来，以实现可持续的创新 消除企业内部的信息孤岛，以数字方式将价值网络中的所有用户连接起来，以实现可持续的创新
...@@ -229,6 +153,7 @@ ...@@ -229,6 +153,7 @@
<div class="mask"> <div class="mask">
<div class="mask-cover"></div> <div class="mask-cover"></div>
<div class="mask-content"> <div class="mask-content">
<div class="mask-occupy"></div>
<h5>SIMULIA</h5> <h5>SIMULIA</h5>
<div> <div>
...@@ -247,6 +172,7 @@ ...@@ -247,6 +172,7 @@
<div class="mask"> <div class="mask">
<div class="mask-cover"></div> <div class="mask-cover"></div>
<div class="mask-content"> <div class="mask-content">
<div class="mask-occupy"></div>
<h5>3DVIA</h5> <h5>3DVIA</h5>
<div> <div>
利用3DVIA Composer,非CAD用户可直接从3DCAD数据创建相关的2D和3D产品文档。 利用3DVIA Composer,非CAD用户可直接从3DCAD数据创建相关的2D和3D产品文档。
...@@ -257,78 +183,8 @@ ...@@ -257,78 +183,8 @@
</nuxt-link> </nuxt-link>
</li> </li>
</ul> </ul>
<!-- <ul class="pg-2 clear-fix">
<li
class="ourproducts li4"
>
<a href="/product/bigdata">
<div class="mask">
<img src="/image/mask2.png" alt="" />
<p>
数据中台汇集企业内各类业务平台数据<br />通过数据接口获取各平台数据......
</p>
<div class="more">查看更多</div>
</div>
<img class="icon" src="/image/p4-icon.png" alt="" />
<p class="p1">大数据应用</p>
<p class="p2">数据中台</p>
</a>
</li>
<li
class="ourproducts li5"
>
<a href="/product/phm">
<div class="mask">
<img src="/image/mask2.png" alt="" />
<p>
PHM(Prognostics Health Management)<br />是综合利用现代化信息技术,人工智能......
</p>
<div class="more">查看更多</div>
</div>
<img class="icon" src="/image/p5-icon.png" alt="" />
<p class="p1">大数据应用</p>
<p class="p2">PHM健康管理</p>
</a>
</li>
</ul> -->
<!-- <ul class="pg-3 clear-fix">
<li
class="ourproducts li6"
>
<a href="/product/mdc">
<div class="mask">
<img src="/image/mask2.png" alt="" />
<p>
MDC系统通过TCP/IP或者其他协议<br />将数控设备接入到系统中......
</p>
<div class="more">查看更多</div>
</div>
<img class="icon" src="/image/p6-icon.png" alt="" />
<p class="p1">工业互联</p>
<p class="p2">MDC数据采集</p>
</a>
</li>
<li
class="ourproducts li7"
>
<a href="/product/dnc">
<div class="mask">
<img src="/image/mask2.png" alt="" />
<p>
DNC分布式数控，将企业数控设备的网络化<br />集中化管理，实现NC程序的系统化管理......
</p>
<div class="more">查看更多</div>
</div>
<img class="icon" src="/image/p7-icon.png" alt="" />
<p class="p1">工业互联</p>
<p class="p2">DNC数控联网</p>
</a>
</li>
</ul> -->
</div> </div>
</section> </section>
<div class="pt50"></div> <div class="pt50"></div>
......
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