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 {
.productt {
width: 100%;
height: 1000px;
// height: 1000px;
// border: 1px solid #000;
}
.productt .productt-content {
width: 1200px;
width: 1400px;
max-width: 1400px;
min-width: 1100px;
width: 80%;
margin: 0 auto;
}
@media (max-width:1280px) {
.productt{
height: 800px;
}
.productt .productt-content {
width: 1000px;
}
// .productt{
// height: 800px;
// }
// .productt .productt-content {
// width: 1000px;
// }
}
.productt .productt-content .productt-title {
text-align: center;
......@@ -1632,10 +1635,14 @@ a.news {
background: #64D8F7;
margin: 0 auto;
}
.productt .productt-content .pg-1{
display: flex;
justify-content: space-between;
margin-bottom:120px ;
}
.productt .productt-content .pg-1 li {
display: inline-block;
float: left;
// float: left;
margin-right: 60px;
padding-bottom: 80px;
// width: 392px;
......@@ -1658,27 +1665,83 @@ a.news {
.productt .productt-content .pg-1 li a {
display: inline-block;
width: 360px;
height:320px;
max-width: 400px;
min-width: 320px;
width: 25rem;
max-height: 320px;
min-height: 240px;
height: 20rem;
text-align: center;
position: relative;
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 {
display: inline-block;
width: 300px;
height:240px;
text-align: center;
position: relative;
top: 32px;
top:22px;
}
}
@media (max-width:1125px ) and (min-width:1100px) {
.productt .productt-content .pg-1 li a {
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 {
position: absolute;
bottom: -7px;
bottom: -23px;
left: 0px;
text-align: center;
-webkit-transform: rotateX(-90deg);
......@@ -1717,8 +1780,14 @@ a.news {
height: 100%;
line-height: 26px;
width: 100%;
padding: 73px 82px;
// padding: 73px 82px;
color: #fff;
.mask-occupy{
// height: 100px;
max-height: 100px;
min-height: 80px;
height: 6.25rem;
}
h5{
font-size: 24px;
font-family: Microsoft YaHei;
......@@ -1729,6 +1798,7 @@ a.news {
}
div{
margin: auto;
width: 196px;
height: 76px;
font-size: 14px;
......@@ -1740,11 +1810,11 @@ a.news {
}
}
@media (max-width:1280px) {
.productt .productt-content .pg-1 .mask>.mask-content{
padding: 55px 50px;
}
}
// @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 {
......@@ -1762,22 +1832,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;
width: 400px;
max-width: 400px;
min-width: 320px;
width: 25rem;
height: 320px;
max-height: 320px;
min-width: 240px;
height: 20rem;
background: #294982;
opacity: 0.6;
}
@media (max-width:1280px) {
@media (max-width:1220px) {
.productt .productt-content .pg-1 .mask .mask-cover{
width: 300px;
height: 240px;
width: 320px;
height: 255.91px;
}
}
......
src/pages/index.vue
View file @ 1be4f77e
......@@ -67,83 +67,6 @@
<h2 >产品服务</h2>
<div class="line"></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">
<li
class="ourproducts li1"
......@@ -153,8 +76,8 @@
>
<div class="mask">
<div class="mask-cover"></div>
<!-- <img src="/image/mask1.png" alt="" /> -->
<div class="mask-content">
<div class="mask-occupy"></div>
<h5>3DEXPERIENCE</h5>
<div>将人员、想法、数据和解决方案连接到一起， 使企业能够以全新的方式 进行创新的一个协作环境</div>
......@@ -172,6 +95,7 @@
<div class="mask">
<div class="mask-cover"></div>
<div class="mask-content">
<div class="mask-occupy"></div>
<h5>CATIA</h5>
<div>高端的CAD的软件，CATIA以其强大的曲面设计能力而在飞机、汽
车、等领域享有很高的声誉</div>
......@@ -187,8 +111,8 @@
<nuxt-link to="/product/delmia">
<div class="mask">
<div class="mask-cover"></div>
<!-- <img src="/image/mask1.png" alt="" /> -->
<div class="mask-content">
<div class="mask-occupy"></div>
<h5>
DELMIA
</h5>
......@@ -210,8 +134,8 @@
>
<div class="mask">
<div class="mask-cover"></div>
<!-- <img src="/image/mask1.png" alt="" /> -->
<div class="mask-content">
<div class="mask-occupy"></div>
<h5>ENOVIA</h5>
<div>
消除企业内部的信息孤岛，以数字方式将价值网络中的所有用户连接起来，以实现可持续的创新
......@@ -229,6 +153,7 @@
<div class="mask">
<div class="mask-cover"></div>
<div class="mask-content">
<div class="mask-occupy"></div>
<h5>SIMULIA</h5>
<div>
......@@ -247,6 +172,7 @@
<div class="mask">
<div class="mask-cover"></div>
<div class="mask-content">
<div class="mask-occupy"></div>
<h5>3DVIA</h5>
<div>
利用3DVIA Composer,非CAD用户可直接从3DCAD数据创建相关的2D和3D产品文档。
......@@ -257,78 +183,8 @@
</nuxt-link>
</li>
</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>
</section>
<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