<template>
|
<div class="main">
|
<div class="banner">
|
<img src="../../img/successBanner.png" alt="" class="m_hide">
|
<img src="../../img/an1.png" alt="" class="p_hide">
|
</div>
|
<div style="background-color: #f9f9f9;" class="m_hide">
|
<div class="wrapper">
|
<div class="content_title">
|
<span>案例详情</span>
|
</div>
|
<div class="content">
|
<div class="left_border">仓储物流</div>
|
<div class="contnt-describe">
|
<div class="left" style="float: left;padding-top: 0.1rem;">
|
<ul>
|
<router-link to="/successCaseIndex" style="padding: 0;">
|
<li><img src="../../img/s1.png" alt=""></li>
|
</router-link>
|
<router-link to="/successCaseIndex" style="padding: 0;">
|
<li><img src="../../img/s2.png" alt=""></li>
|
</router-link>
|
<router-link to="/successCaseIndex" style="padding: 0;">
|
<li><img src="../../img/s3.png" alt=""></li>
|
</router-link>
|
<router-link to="/successCaseIndex" style="padding: 0;">
|
<li><img src="../../img/s4.png" alt=""></li>
|
</router-link>
|
</ul>
|
</div>
|
<div class="right" style="position: relative;">
|
<img src="../../img/s5.png" alt="" >
|
<span v-if="isShow1" class="txt">明科为中石油实施了物资条码管理系统，实现了需求部门在线计划报批、供应商协同送货、项目现场收、发、盘、存等功能。系统采用了互联网、无线技术条码技术相结合的方案进行实施，为中石油节省大量人力、物力。</span>
|
</div>
|
</div>
|
|
<div class="left_border" style="float: right;margin-top: 0.5rem;">智能制造</div>
|
<div class="contnt-describe" style="margin-bottom: 1.48rem;">
|
<div class="left">
|
<ul style="margin-left: 1rem;">
|
<router-link to="/successCaseIndex" style="padding: 0;">
|
<li><img src="../../img/s7.png" alt=""></li>
|
</router-link>
|
<router-link to="/successCaseIndex" style="padding: 0;">
|
<li><img src="../../img/s8.png" alt=""></li>
|
</router-link>
|
<router-link to="/successCaseIndex" style="padding: 0;">
|
<li><img src="../../img/s9.png" alt=""></li>
|
</router-link>
|
<router-link to="/successCaseIndex" style="padding: 0;">
|
<li><img src="../../img/s10.png" alt=""></li>
|
</router-link>
|
</ul>
|
</div>
|
<div class="right" style="position: relative;">
|
<img src="../../img/s6.png" alt="">
|
<span v-if="isShow2" class="txt">明科为中广核实施了物资条码追溯系统，该系统基于明科可配置平台K9 1.0实施，从来料验收开始，经过销售出库、生产装配等环节，完成追溯数据的采集并提供产品生命周期的数据追溯查询</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 移动端样式 -->
|
<div class="webapp p_hide">
|
<h3 class="content_title2 fadeInUp zoomIn animated"><span>案例详情</span></h3>
|
<div class="project" style="padding: 0.2rem 0 0.3rem;">
|
<h3 class="content_title3"><span>仓储物流</span></h3>
|
<div class="img_box"><img src="../../img/an2.png" alt=""></div>
|
<div class="three_box">
|
<router-link tag="div" to="/successCaseIndex">
|
<img src="../../img/an3.png" alt="">
|
</router-link>
|
<router-link tag="div" to="/successCaseIndex">
|
<img src="../../img/an4.png" alt="">
|
</router-link>
|
<router-link tag="div" to="/successCaseIndex">
|
<img src="../../img/an5.png" alt="">
|
</router-link>
|
<router-link tag="div" to="/successCaseIndex">
|
<img src="../../img/an6.png" alt="">
|
</router-link>
|
</div>
|
</div>
|
<div class="project" style="padding: 0.2rem 0 0.3rem;margin-bottom: 0.8rem;">
|
<h3 class="content_title3"><span>智能制造</span></h3>
|
<div class="img_box"><img src="../../img/an7.png" alt=""></div>
|
<div class="three_box">
|
<router-link tag="div" to="/successCaseIndex">
|
<img src="../../img/an8.png" alt="">
|
</router-link>
|
<router-link tag="div" to="/successCaseIndex">
|
<img src="../../img/an9.png" alt="">
|
</router-link>
|
<router-link tag="div" to="/successCaseIndex">
|
<img src="../../img/an10.png" alt="">
|
</router-link>
|
<router-link tag="div" to="/successCaseIndex">
|
<img src="../../img/an11.png" alt="">
|
</router-link>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data(){
|
return{
|
isShow1:false,
|
isShow2:false,
|
}
|
},
|
mounted(){
|
document.body.scrollTop = 0
|
document.documentElement.scrollTop = 0
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
|
.content_title{
|
padding: 0.94rem 0 1.03rem;
|
p{
|
color: #838383;
|
font-size: .16rem;
|
text-align: center;
|
margin-top: .26rem;
|
}
|
}
|
h3{
|
font-family:MicrosoftYaHei;
|
font-weight:400;
|
font-size: .3rem;
|
color:rgba(58,58,60,1);
|
text-align: left;
|
margin:.2rem 4%;
|
}
|
.contnt-describe{
|
width: 100%;
|
height: auto;
|
margin: 0 auto;
|
padding: 0.1rem 0.3rem 0.3rem;
|
border: 1px solid gainsboro;
|
// background: #f9f9f9;
|
p{
|
width: 92%;
|
margin: 0 auto;
|
text-align-last: left;
|
font-size: .16rem;
|
margin-bottom: .2rem;
|
}
|
}
|
.content:nth-child(2){
|
text-align: center;
|
a{
|
color:#3B3B3C;
|
padding: 0.06rem 0.2rem;
|
display: inline-block;
|
font-size: 0.16rem;
|
margin: 0.21rem 0.1rem;
|
}
|
}
|
@media (min-width: 751px) {
|
.contnt-describe{
|
float: left;
|
margin-bottom: .2rem;
|
|
.left{
|
float: left;
|
width: 50%;
|
|
span{
|
display: inline-block;
|
padding-top: .3rem;
|
}
|
}
|
.right{
|
float: right;
|
width: 50%;
|
}
|
}
|
h3{
|
font-size: .3rem;
|
}
|
.contnt-describe {
|
.right{
|
margin-top: .3rem;
|
float: right;
|
// width: 3.85rem;
|
// height: 2.38rem;
|
background: url(../../img/shiyou.png);
|
background-size: 100% 100%;
|
position: relative;
|
.txt{
|
position: absolute;
|
left: 0.12rem;
|
top: 2.65rem;
|
width:545px;
|
height:67px;
|
font-size:16px;
|
font-family:MicrosoftYaHei;
|
font-weight:400;
|
color:rgba(255,255,255,1);
|
line-height:25px;
|
text-align: left;
|
}
|
p{
|
font-size: .08rem;
|
color:#fff;
|
position: absolute;;
|
bottom: -.1rem;
|
}
|
}
|
.left{
|
float: left;
|
|
ul{
|
width: 100%;
|
display: flex;
|
flex-wrap: wrap;
|
padding: 0.4rem 0.1rem;
|
li{
|
width: 2rem;
|
height: 1rem;
|
padding: .2rem;
|
margin-top: 0.15rem;
|
}
|
}
|
}
|
}
|
.contnt-describe:nth-child(2n){
|
.right{
|
float: left;
|
}
|
.left{
|
float: right;
|
span{
|
text-align: right;
|
float: right;
|
}
|
}
|
}
|
.left_border{
|
display: inline-block;
|
width: 1rem;
|
text-align: left;
|
position: relative;
|
padding-left: .2rem;
|
margin-bottom: 0.3rem;
|
float: left;
|
}
|
.left_border::after{
|
content: '';
|
position: absolute;
|
left: 0;
|
top: .02rem;
|
width: 0.04rem;
|
height: 80%;
|
background: #0070c0;
|
}
|
}
|
@media (max-width: 750px) and (min-width: 0){
|
.webapp{
|
width: 94%;
|
margin: 0 auto;
|
.content_title3{
|
font-size: 0.16rem;
|
color: #3A3A3C;
|
padding-left: .06rem;
|
margin-top: 0.2rem;
|
position: relative;
|
|
span{
|
font-size: 0.36rem;
|
margin-left: 0.18rem;
|
margin-top: 0.02rem;
|
display: inline-block;
|
}
|
}
|
.content_title3::after{
|
content: '';
|
width:0.09rem;
|
height:0.45rem;
|
background:rgba(0,112,192,1);
|
position: absolute;
|
top: 0.05rem;
|
left: 0;
|
}
|
|
.content_title2{
|
font-size:0.36rem;
|
font-family:PingFang-SC-Bold;
|
font-weight:bold;
|
color:rgba(59,59,60,1);
|
padding: 0.55rem 0 0.25rem;
|
position: relative;
|
text-align: center;
|
span{
|
border: 0;
|
}
|
}
|
.content_title2:before {
|
content: '';
|
position: absolute;
|
left: 0.9rem;
|
top: 0.82rem;
|
width: 1.4rem;
|
height: 0.02rem;
|
background: #999999;
|
}
|
.content_title2:after {
|
content: '';
|
position: absolute;
|
right: 0.9rem;
|
top: 0.82rem;
|
width: 1.4rem;
|
height: 0.02rem;
|
background: #999999;
|
}
|
|
.img_box{
|
margin: 0.3rem 0.3rem 0.4rem;
|
}
|
|
.project{
|
background: #f9f9f9;
|
box-sizing: border-box;
|
margin: .4rem auto;
|
padding: .1rem 0;
|
.program{
|
width: 100%;
|
height: auto;
|
display: flex;
|
padding: .34rem 0;
|
dl{
|
width: 25%;
|
dt{
|
width: .94rem;
|
height: .94rem;
|
margin: 0 auto;
|
}
|
dd{
|
text-align: center;
|
padding-top: .07rem;
|
}
|
}
|
}
|
|
.three_box{
|
margin: 0.4rem 0.3rem 0;
|
display: flex;
|
|
div{
|
flex: 1;
|
padding-right: 0.3rem;
|
}
|
div:last-child{
|
padding-right: 0;
|
}
|
}
|
}
|
}
|
|
|
|
.header{
|
padding: 0 2%;
|
}
|
.wrapper{
|
width: 100%;
|
}
|
.content_title > span::after ,.content_title > span::before {
|
display: none;
|
}
|
.content_title{
|
text-align: center;
|
}
|
.content_title >span{
|
display: inline-block;
|
border-bottom: 1px solid #3B3B3C;
|
}
|
.contnt-describe{
|
width: 100%;
|
.left, .right{
|
width: 100%;
|
}
|
}
|
.contnt-describe img{
|
display: inline-block;
|
margin: .6rem 1.6rem;
|
width: 3.85rem;
|
height: 2.38rem;
|
border:1px solid #000;
|
}
|
}
|
</style>
|
