Skip to content

html / bdideal

Go to a project
Commit b39a18ec by hank
Options

解决方案详情 新闻详情 解决方案

parent 9803f007
Showing with 656 additions and 220 deletions
html/dynamic.html
...@@ -13,10 +13,7 @@ ...@@ -13,10 +13,7 @@
<!-- Bootstrap --> <!-- Bootstrap -->
<link rel="stylesheet" href="../style/common.css"> <link rel="stylesheet" href="../style/common.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<link <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css" />
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css"
/>
<link rel="stylesheet" href="../style/animate.min.css"> <link rel="stylesheet" href="../style/animate.min.css">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 --> <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
...@@ -52,8 +49,8 @@ ...@@ -52,8 +49,8 @@
<div class="navbar-collapse collapse"> <div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right"> <ul class="nav navbar-nav navbar-right">
<li><a id="nav-index" href="./index.html">首页</a></li> <li><a id="nav-index" href="./index.html">首页</a></li>
<li ><a id="nav-about" href="./about.html">关于我们</a></li> <li><a id="nav-about" href="./about.html">关于我们</a></li>
<li > <li>
<a id="nav-products" href="./products.html"> <a id="nav-products" href="./products.html">
我们的产品 我们的产品
<ul class="dropdown-menu"> <ul class="dropdown-menu">
...@@ -66,7 +63,7 @@ ...@@ -66,7 +63,7 @@
</ul> </ul>
</a> </a>
</li> </li>
<li > <li>
<a id="nav-solution" href="./solution.html">解决方案</a> <a id="nav-solution" href="./solution.html">解决方案</a>
</li> </li>
<li class="link-active"> <li class="link-active">
...@@ -118,16 +115,20 @@ ...@@ -118,16 +115,20 @@
</div> </div>
<div class="text-right ctr"> <div class="text-right ctr">
<span class="spanbtn" id="slidePrev"> < </span> <span class="spanbtn" id="slidePrev">
<span class="spanbtn" id="slideNext"> > </span> < </span> <span class="spanbtn" id="slideNext"> >
</span>
</div> </div>
<div id="dashuju" class="list-item"> <div id="dashuju" class="list-item hidden-xs">
<div class="swiper-container swiper1" id="swiper1"> <div class="swiper-container swiper1" id="swiper1">
<div class="swiper-wrapper"> <div class="swiper-wrapper" style="width: 2000px;">
</div> </div>
</div> </div>
</div> </div>
<div class="list-item list-item-moblie visible-xs">
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -199,16 +200,16 @@ ...@@ -199,16 +200,16 @@
</body> </body>
<script> <script>
$(document).ready(function() { $(document).ready(function () {
var input = $(".search input"); var input = $(".search input");
var button = $(".search .button"); var button = $(".search .button");
var searchValue = "" var searchValue = ""
input.keyup(function(e) { input.keyup(function (e) {
searchValue = e.target.value searchValue = e.target.value
}) })
input.focusout(function (param) { input.focusout(function (param) {
setTimeout(function() { setTimeout(function () {
$(".search").css('width', '94px') $(".search").css('width', '94px')
input.hide() input.hide()
}, 500) }, 500)
...@@ -218,7 +219,7 @@ ...@@ -218,7 +219,7 @@
input.show(); input.show();
input.focus() input.focus()
}) })
if(navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE9.0") { if (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE9.0") {
function createSlider(swiper, data) { function createSlider(swiper, data) {
var html = ''; var html = '';
swiper.removeAllSlides(); //移除全部 swiper.removeAllSlides(); //移除全部
...@@ -226,7 +227,7 @@ ...@@ -226,7 +227,7 @@
var html = ''; var html = '';
html = html =
'<div class="item"> ' + '<div class="item"> ' +
'<a href="./dynamicDetail.html?id='+ item.id+'"> ' + '<a href="./dynamicDetail.html?id=' + item.id + '"> ' +
'<div class="img-container">' + '<div class="img-container">' +
'<img src="' + '<img src="' +
item.thumb + item.thumb +
...@@ -236,8 +237,8 @@ ...@@ -236,8 +237,8 @@
item.title + item.title +
'</div>' + '</div>' +
'<div class="bottom-word">' + '<div class="bottom-word">' +
'<span class="name">'+ item.type +'</span> '+ '<span class="name">' + item.type + '</span> ' +
'<span class="date"><img src="../img/time.png" alt="">'+ item.inputtime +'</span> '+ '<span class="date"><img src="../img/time.png" alt="">' + item.inputtime + '</span> ' +
' </div>' + ' </div>' +
'</a></div>'; '</a></div>';
...@@ -326,7 +327,7 @@ ...@@ -326,7 +327,7 @@
html += html +=
'<div class="swiper-slide">' + '<div class="swiper-slide">' +
'<div class="item"> ' + '<div class="item"> ' +
'<a href="./dynamicDetail.html?id='+ item.id+'" target="_blank"> ' + '<a href="./dynamicDetail.html?id=' + item.id + '" target="_blank"> ' +
'<div class="img-container">' + '<div class="img-container">' +
'<img src="' + '<img src="' +
item.thumb + item.thumb +
...@@ -336,8 +337,8 @@ ...@@ -336,8 +337,8 @@
item.title + item.title +
'</div>' + '</div>' +
'<div class="bottom-word">' + '<div class="bottom-word">' +
'<span class="name">'+ item.tags[0] +'</span> '+ '<span class="name">' + item.tags[0] + '</span> ' +
'<span class="date"><img src="../img/time.png" alt="">'+ item.inputtime +'</span> '+ '<span class="date"><img src="../img/time.png" alt="">' + item.inputtime + '</span> ' +
' </div>' + ' </div>' +
'</a></div></div>'; '</a></div></div>';
...@@ -348,7 +349,7 @@ ...@@ -348,7 +349,7 @@
modules: {}, modules: {},
slidesPerView: 'auto', slidesPerView: 'auto',
slidesPerColumn: 2, slidesPerColumn: 2,
onTransitionEnd: function(swiper) { onTransitionEnd: function (swiper) {
// alert('过渡结束'); // alert('过渡结束');
// console.log(swiper) // console.log(swiper)
computeMasking(swiper); computeMasking(swiper);
...@@ -363,7 +364,7 @@ ...@@ -363,7 +364,7 @@
}); });
button.click(function () { button.click(function () {
console.log(input.css('display')) console.log(input.css('display'))
if(1) { if (1) {
ideal.ajax("news", searchValue).done(function (res) { ideal.ajax("news", searchValue).done(function (res) {
console.log(JSON.parse(res)) console.log(JSON.parse(res))
var res = JSON.parse(res); var res = JSON.parse(res);
...@@ -396,25 +397,26 @@ ...@@ -396,25 +397,26 @@
function update(html) { function update(html) {
$('#swiper1') $('#swiper1')
.children() .children()
.html(html ? html : createHtml(ideal.dynamicList)); .html(html ? html : createHtml(ideal.produtsList));
$('.list-item-moblie').html(html ? html : createHtml(ideal.produtsList))
mySwiper.update(true); mySwiper.update(true);
computeMasking(mySwiper); computeMasking(mySwiper);
} }
update(); update();
$('#slidePrev').click(function() { $('#slidePrev').click(function () {
mySwiper.slidePrev( function(e) { mySwiper.slidePrev(function (e) {
console.log(e); console.log(e);
alert('slidePrev'); alert('slidePrev');
},200); }, 200);
}); });
$('#slideNext').click(function() { $('#slideNext').click(function () {
mySwiper.slideNext(function(e) { mySwiper.slideNext(function (e) {
console.log(e); console.log(e);
alert('slideNext'); alert('slideNext');
},200); }, 200);
}); });
function tab(container) { function tab(container) {
$('.menu-item').click(function(e) { $('.menu-item').click(function (e) {
$(this) $(this)
.parent() .parent()
.children() .children()
...@@ -433,7 +435,7 @@ ...@@ -433,7 +435,7 @@
var viewWidth = $('.list-item').width(); var viewWidth = $('.list-item').width();
var leftBtn = $('#slidePrev'); var leftBtn = $('#slidePrev');
var rightBtn = $('#slideNext'); var rightBtn = $('#slideNext');
console.log(totalWidth,getTranslate, viewWidth) console.log(totalWidth, getTranslate, viewWidth)
if (getTranslate == 0) { if (getTranslate == 0) {
leftBtn.css({ 'background': "none" }); leftBtn.css({ 'background': "none" });
} }
......
html/dynamicDetail.html
...@@ -185,8 +185,11 @@ ...@@ -185,8 +185,11 @@
<p class="weixin-img"> <p class="weixin-img">
<img src="/img//weixin.png" alt=""> <img src="/img//weixin.png" alt="">
</p> <object data="" type="">
<div>扫一扫获取更多资讯</div> <div>扫一扫获取更多资讯</div>
</object>
</p>
</div> </div>
</div> </div>
</div> </div>
......
html/productDetail.html
...@@ -27,6 +27,8 @@ ...@@ -27,6 +27,8 @@
<script src="https://cdn.bootcss.com/less.js/1.0.41/less-1.0.41.min.js"></script> --> <script src="https://cdn.bootcss.com/less.js/1.0.41/less-1.0.41.min.js"></script> -->
<script src="../js/tools.js"></script> <script src="../js/tools.js"></script>
<!-- <script src="https://cdn.bootcss.com/babel-polyfill/7.2.5/polyfill.min.js"></script> --> <!-- <script src="https://cdn.bootcss.com/babel-polyfill/7.2.5/polyfill.min.js"></script> -->
<script src="../js/rem.js"></script>
</head> </head>
<body> <body>
...@@ -158,8 +160,10 @@ ...@@ -158,8 +160,10 @@
<p class="weixin-img"> <p class="weixin-img">
<img src="/img//weixin.png" alt=""> <img src="/img//weixin.png" alt="">
</p> <object data="" type="">
<div>扫一扫获取更多资讯</div> <div>扫一扫获取更多资讯</div>
</object>
</p>
</div> </div>
</div> </div>
</div> </div>
......
html/products2.html
...@@ -276,13 +276,13 @@ ...@@ -276,13 +276,13 @@
'-ms-transform': 'rotate(0deg)' '-ms-transform': 'rotate(0deg)'
}); });
$('.one').html( $('.one').html(
'<div class="top">'+ '<div class="top">' +
'<div class="line1"></div>'+ '<div class="line1"></div>' +
'<div class="name">Service</div>'+ '<div class="name">Service</div>' +
'<div class="en">Visual Management and Control Platform for Enterprise Intelligence</div>'+ '<div class="en">Visual Management and Control Platform for Enterprise Intelligence</div>' +
' <div class="line2"></div>'+ ' <div class="line2"></div>' +
'</div>' + '</div>' +
'<div class="bottom">'+ '<div class="bottom">' +
'<p>' + '<p>' +
'企业智慧可视化管控平台是基于数据，提供数据整合、管理、分析、应用能力，挖掘数据的价值，帮助人们去查看企业并理解业务，助力企业信息化，降低企业经营风险，为商业领域带来变革。' + '企业智慧可视化管控平台是基于数据，提供数据整合、管理、分析、应用能力，挖掘数据的价值，帮助人们去查看企业并理解业务，助力企业信息化，降低企业经营风险，为商业领域带来变革。' +
' </p>' + ' </p>' +
...@@ -297,7 +297,7 @@ ...@@ -297,7 +297,7 @@
'<br />' + '<br />' +
'5、实时看板、总裁驾驶仓' + '5、实时看板、总裁驾驶仓' +
'</blockquote>' '</blockquote>'
+'</div>' + '</div>'
) )
}); });
$('.earth .right-btn').mouseenter(function () { $('.earth .right-btn').mouseenter(function () {
...@@ -308,13 +308,13 @@ ...@@ -308,13 +308,13 @@
}); });
$('.one').html( $('.one').html(
'<div class="top">'+ '<div class="top">' +
'<div class="line1"></div>'+ '<div class="line1"></div>' +
'<div class="name">Ability</div>'+ '<div class="name">Ability</div>' +
'<div class="en">Visual Management and Control Platform for Enterprise Intelligence</div>'+ '<div class="en">Visual Management and Control Platform for Enterprise Intelligence</div>' +
' <div class="line2"></div>'+ ' <div class="line2"></div>' +
'</div>' + '</div>' +
'<div class="bottom">'+ '<div class="bottom">' +
'<p>' + '<p>' +
'企业智慧可视化管控平台，基于前沿的大数据技术，为企业客户搭建一站式大数据应用、分析和展示平台。面向企业业务搭建数据仓库，建立数据分析模型，构建大数据业务解决方案，对各类业务数据进行分析计算及前瞻性预测，充分挖掘数据的价值，真正将企业数据转化为数据资产，助力企业信息化，实现数据驱动管理。' + '企业智慧可视化管控平台，基于前沿的大数据技术，为企业客户搭建一站式大数据应用、分析和展示平台。面向企业业务搭建数据仓库，建立数据分析模型，构建大数据业务解决方案，对各类业务数据进行分析计算及前瞻性预测，充分挖掘数据的价值，真正将企业数据转化为数据资产，助力企业信息化，实现数据驱动管理。' +
' </p>' + ' </p>' +
...@@ -329,7 +329,7 @@ ...@@ -329,7 +329,7 @@
'<br />' + '<br />' +
'5、实时响应' + '5、实时响应' +
'</blockquote>' '</blockquote>'
+'</div>' + '</div>'
) )
}); });
...@@ -488,15 +488,15 @@ ...@@ -488,15 +488,15 @@
// pagination: '.swiper-pagination' // pagination: '.swiper-pagination'
}); });
// update(); // update();
ideal.ajax("product_company").done(function(res){ ideal.ajax("product_company").done(function (res) {
console.log(JSON.parse(res)) console.log(JSON.parse(res))
var res = JSON.parse(res); var res = JSON.parse(res);
ideal.produtsList = res.data; ideal.produtsList = res.data;
var html= "" var html = ""
res.data.forEach( function (item,index) { res.data.forEach(function (item, index) {
if(index==0) { if (index == 0) {
html += '<div class="menu-item active">' + item.catname + '</div>' html += '<div class="menu-item active">' + item.catname + '</div>'
} else { } else {
html += '<div class="menu-item">' + item.catname + '</div>' html += '<div class="menu-item">' + item.catname + '</div>'
......
html/solution.html
...@@ -114,178 +114,15 @@ ...@@ -114,178 +114,15 @@
< </span> <span class="spanbtn" id="slideNext"> > < </span> <span class="spanbtn" id="slideNext"> >
</span> </span>
</div> </div>
<div id="dashuju" class="list-item"> <div id="dashuju" class="list-item hidden-xs">
<div class="swiper-container swiper1" id="swiper1"> <div class="swiper-container swiper1" id="swiper1">
<div class="swiper-wrapper"> <div class="swiper-wrapper" style="width: 2000px;">
<!-- <div class="swiper-slide" data-swiper-column="0" data-swiper-row="0">
<div class="item">
<a href="">
<div class="img-container">
<img src="http://bdideal.com/asset/img/homepro1.jpg" alt="">
</div> </div>
<div class="item-title">隆基泰和大数据分析决策系统0</div>
<ul class="tag-list">
<li>客群画像</li>
<li>视频直播</li>
<li>实时客流</li>
<li>·动线热力图</li>
</ul>
</a>
</div>
</div>
<div class="swiper-slide" data-swiper-column="0" data-swiper-row="1">
<div class="item">
<a href="">
<div class="img-container">
<img src="http://bdideal.com/asset/img/homepro2.jpg" alt="">
</div>
<div class="item-title">隆基泰和大数据分析决策系统1</div>
<ul class="tag-list">
<li>客群画像</li>
<li>视频直播</li>
<li>实时客流</li>
<li>·动线热力图</li>
</ul>
</a>
</div> </div>
</div> </div>
<div class="swiper-slide"> <div class="list-item list-item-moblie visible-xs">
<div class="item">
<a href="">
<div class="img-container">
<img src="http://bdideal.com/asset/img/homepro3.jpg" alt="">
</div>
<div class="item-title">隆基泰和大数据分析决策系统2</div>
<ul class="tag-list">
<li>客群画像</li>
<li>视频直播</li>
<li>实时客流</li>
<li>·动线热力图</li>
</ul>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="item">
<a href="">
<div class="img-container">
<img src="http://bdideal.com/asset/img/homepro4.jpg" alt="">
</div>
<div class="item-title">隆基泰和大数据分析决策系统3</div>
<ul class="tag-list">
<li>客群画像</li>
<li>视频直播</li>
<li>实时客流</li>
<li>·动线热力图</li>
</ul>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="item">
<a href="">
<div class="img-container">
<img src="http://bdideal.com/asset/img/homepro5.jpg" alt="">
</div>
<div class="item-title">隆基泰和大数据分析决策系统4</div>
<ul class="tag-list">
<li>客群画像</li>
<li>视频直播</li>
<li>实时客流</li>
<li>·动线热力图</li>
</ul>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="item">
<a href="">
<div class="img-container">
<img src="http://bdideal.com/asset/img/homepro6.jpg" alt="">
</div>
<div class="item-title">隆基泰和大数据分析决策系统5</div>
<ul class="tag-list">
<li>客群画像</li>
<li>视频直播</li>
<li>实时客流</li>
<li>·动线热力图</li>
</ul>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="item">
<a href="">
<div class="img-container">
<img src="http://bdideal.com/asset/img/homepro7.jpg" alt="">
</div>
<div class="item-title">隆基泰和大数据分析决策系统6</div>
<ul class="tag-list">
<li>客群画像</li>
<li>视频直播</li>
<li>实时客流</li>
<li>·动线热力图</li>
</ul>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="item">
<a href="">
<div class="img-container">
<img src="http://bdideal.com/asset/img/homepro8.jpg" alt="">
</div>
<div class="item-title">隆基泰和大数据分析决策系统7</div>
<ul class="tag-list">
<li>客群画像</li>
<li>视频直播</li>
<li>实时客流</li>
<li>·动线热力图</li>
</ul>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="item">
<a href="">
<div class="img-container">
<img src="http://bdideal.com/asset/img/homepro9.jpg" alt="">
</div>
<div class="item-title">隆基泰和大数据分析决策系统8</div>
<ul class="tag-list">
<li>客群画像</li>
<li>视频直播</li>
<li>实时客流</li>
<li>·动线热力图</li>
</ul>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="item">
<a href="">
<div class="img-container">
<img src="http://bdideal.com/asset/img/homepro7.jpg" alt="">
</div>
<div class="item-title">隆基泰和大数据分析决策系统9</div>
<ul class="tag-list">
<li>客群画像</li>
<li>视频直播</li>
<li>实时客流</li>
<li>·动线热力图</li>
</ul>
</a>
</div>
</div> -->
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -324,8 +161,10 @@ ...@@ -324,8 +161,10 @@
<p class="weixin-img"> <p class="weixin-img">
<img src="/img//weixin.png" alt=""> <img src="/img//weixin.png" alt="">
</p> <object data="0" type="">
<div>扫一扫获取更多资讯</div> <div>扫一扫获取更多资讯</div>
</object>
</p>
</div> </div>
</div> </div>
</div> </div>
...@@ -557,6 +396,7 @@ ...@@ -557,6 +396,7 @@
$('#swiper1') $('#swiper1')
.children() .children()
.html(html ? html : createHtml(ideal.produtsList)); .html(html ? html : createHtml(ideal.produtsList));
$('.list-item-moblie').html(html ? html : createHtml(ideal.produtsList))
mySwiper.update(true); mySwiper.update(true);
computeMasking(mySwiper); computeMasking(mySwiper);
} }
......
style/common.css
...@@ -1788,7 +1788,11 @@ margin-top: 0.1rem; ...@@ -1788,7 +1788,11 @@ margin-top: 0.1rem;
top: 0; top: 0;
} }
body .main-container .navbar-brand { body .main-container .navbar-brand {
padding: 7px 15px; padding: 10px 15px;
}
body .main-container .navbar-brand img {
width: 1.62rem;
/* height:1.04rem; */
} }
body .main-container .swiper-container .word-box p.btword { body .main-container .swiper-container .word-box p.btword {
font-size: 28px; font-size: 28px;
......
style/solution.css
...@@ -935,3 +935,279 @@ ul { ...@@ -935,3 +935,279 @@ ul {
padding-right: 0px; padding-right: 0px;
} }
} }
@media (max-width: 768px) {
body .main-container {
height: 240px;
margin-top: 50px;
}
body .main-container .word-box {
position: absolute;
padding-left: 20px;
padding-top: 10%;
z-index: 555;
width: 80%;
}
.solution {
padding-top: 1rem;
padding-bottom: 0;
}
.solution .table-a {
margin-bottom: 20px;
}
.solution .list {
float: none;
width: 100%;
display: inline-block;
height: auto;
overflow: hidden;
position: relative;
}
.solution .list .ctr {
display: none;
padding-top: 16px;
}
.solution .list .ctr span {
display: inline-block;
}
.solution .list .ctr .spanbtn {
cursor: pointer;
width: 38px;
height: 30px;
background: #000000;
line-height: 30px;
font-size: 18px;
color: white;
opacity: 0.8;
text-align: center;
}
.solution .list .list-item {
position: relative;
top: 0;
left: 0;
width: 100%;
height: auto;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.solution .list .list-item .swiper-slide {
position: relative;
width: auto;
height: auto;
float: left;
}
.solution .list .list-item .swiper-slide::after {
content: "";
background: rgba(0, 0, 0, 0.5);
width: 374px;
left: 0;
top: 0;
height: 281px ;
position: absolute;
opacity: 0;
-webkit-transition: all 1s;
transition: all 1s;
display: none;
}
.solution .list .list-item .swiper-slide:nth-child(2n-1) {
margin-right: 0.1rem;
}
.solution .list .list-item .show-mask::after {
opacity: 1;
display: none;
}
.solution .list .item {
width: 3.4rem;
height: 2.9rem;
margin-right: 0rem;
margin-bottom: 0.2rem;
position: relative;
-webkit-box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2);
}
.solution .list .item a {
display: inline-block;
height: 100%;
width: 100%;
overflow: hidden;
}
.solution .list .item a .img-container {
width: 3.4rem;
height: 2rem;
overflow: hidden;
}
.solution .list .item a img {
width: 100%;
height: 100%;
}
.solution .list .item a .tag-list {
list-style: circle;
overflow: hidden;
width: 100%;
padding-left: 0.45rem;
padding-top: 0.05rem;
}
.solution .list .item a .tag-list li {
list-style: disc;
float: left;
font-size: 12px;
padding-right: 22px;
color: rgba(0, 0, 0, 0.6);
}
.solution .list .item .item-title {
padding-left: 0.2rem;
padding-top: 0.1rem;
font-size: 0.2rem;
font-weight: 400;
color: #000000;
}
.solution .list .item:hover img {
-webkit-transform: scale(1.1);
transform: scale(1.1);
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.solution .list .item::after {
content: '';
clear: both;
}
.detail-container {
background: none;
min-height: 400px;
background-size: 95% ;
position: relative;
margin-top: 0.8rem;
padding-top: 0.7rem;
}
.detail-container .introduce {
margin-left: 0%;
width: 6.4rem;
min-height: 3.8rem;
background: url('../img/mapbg.png') no-repeat top center;
background-size: cover;
-webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
padding-left: 0.5rem;
}
.detail-container .introduce .top {
padding-top: 0.5rem;
}
.detail-container .introduce .top .line1 {
width: 169px;
height: 1px;
background: #c70151;
}
.detail-container .introduce .top .line2 {
width: 33px;
height: 1px;
background: #c70151;
}
.detail-container .introduce .top .name {
font-size: 24px;
font-weight: 400;
color: #c70151;
line-height: 1;
padding-top: 17px;
padding-bottom: 9px;
}
.detail-container .introduce .top .en {
font-size: 12px;
font-weight: 300;
line-height: 1;
color: #c70151;
padding-bottom: 18px;
}
.detail-container .introduce .bottom {
width: 5.6rem;
min-height: 1rem;
text-align: justify;
padding-top: 0.6rem;
padding-bottom: 0.3rem;
color: #979797;
font-size: 16px;
line-height: 26px;
}
.detail-container .list {
width: 5.8rem;
height: 3.3rem;
position: relative;
top: 1rem;
right: 70px;
display: inline-block;
}
.detail-container .list .ctr {
display: none;
}
.detail-container .list .list-item {
position: relative;
top: 0;
left: auto;
margin-left: 2.8rem;
right: 0;
width: 100%;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.detail-container .list .list-item .swiper-container {
width: 5.8rem;
height: 3.3rem;
margin-left: auto;
margin-right: auto;
display: block;
}
.detail-container .list .list-item .swiper-container .swiper-slide {
position: relative;
width: auto;
height: auto;
}
.detail-container .list .list-item .swiper-container .swiper-slide::after {
content: "";
background: rgba(0, 0, 0, 0.5);
width: 374px;
left: 0;
top: 0;
height: 310px ;
position: absolute;
opacity: 0;
-webkit-transition: all 1s;
transition: all 1s;
display: none;
}
.detail-container .list .list-item .swiper-container .show-mask::after {
opacity: 1;
display: block;
}
.detail-container .list .item {
width: 5.8rem;
height: 3.3rem;
margin-right: 26px;
margin-bottom: 27px;
position: relative;
-webkit-box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2);
}
.detail-container .list .item .img-container {
height: 100%;
width: 100%;
overflow: hidden;
}
.detail-container .list .item .img-container img {
width: 100%;
height: 100%;
}
.detail-container .list .item .img-container:hover img {
-webkit-transform: scale(1.1);
transform: scale(1.1);
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.detail-container .list .item::after {
content: '';
clear: both;
}
.dynamic-detail {
padding-top: 1rem;
}
.dynamic-detail .title {
font-size: 0.45rem;
}
}
style/solution.less
...@@ -995,3 +995,309 @@ ul { ...@@ -995,3 +995,309 @@ ul {
.jobs .block .detail{width: 95%;} .jobs .block .detail{width: 95%;}
.jobs .block .pdr24{padding-right: 0px;} .jobs .block .pdr24{padding-right: 0px;}
} }
@media (max-width: 768px) {
body .main-container {
height: 240px;
margin-top: 50px;
.word-box {
position: absolute;
padding-left: 20px;
padding-top: 10%;
z-index: 555;
width: 80%;
}
}
.solution {
padding-top: 1rem;
padding-bottom: 0;
.table-a {
margin-bottom: 20px;
}
.list {
float: none;
width: 100%;
display: inline-block;
// height: 654px;
height: auto;
overflow: hidden;
position: relative;
.ctr {
display: none;
padding-top: 16px;
span {
display: inline-block;
}
.spanbtn {
cursor: pointer;
width:38px;
height: 30px;
background:rgba(0,0,0,1);
line-height: 30px;
font-size: 18px;
color: white;
opacity:0.8;
text-align: center;
}
}
.list-item {
position: relative;
top: 0;
left: 0;
// width: calc(860px + (100vw - 1200px)/2);
width: 100%;
height: auto;
-webkit-transition: all 0.5s;
transition: all 0.5s;
.swiper-slide {
position: relative;
width: auto;
height: auto;
float: left;
&::after {
content: "";
background: rgba(0,0,0, 0.5);
width: 374px;
left: 0;
top: 0;
height:281px ;
position: absolute;
opacity: 0;
-webkit-transition: all 1s;
transition: all 1s;
display: none;
}
&:nth-child(2n-1) {
margin-right: 0.1rem;
}
}
.show-mask {
&::after {
opacity: 1;
display: none;
}
}
}
.item {
width: 3.4rem;
height: 2.9rem;
margin-right: 0rem;
margin-bottom: 0.2rem;
position: relative;
-webkit-box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2);
// background: url('/img/banner2.jpg') center no-repeat;
a {
display: inline-block;
height: 100%;
width: 100%;
overflow: hidden;
.img-container {
width: 3.4rem;
height:2rem;
overflow: hidden;
}
img {
width: 100%;
height: 100%;
}
.tag-list {
list-style: circle;
overflow: hidden;
width: 100%;
padding-left: 0.45rem;
padding-top: 0.05rem;
li {
list-style: disc;
float: left;
font-size: 12px;
padding-right: 22px;
color:rgba(0,0,0,0.6);
}
}
}
.item-title {
padding-left: 0.2rem;
padding-top: 0.1rem;
font-size: 0.2rem;
font-weight:400;
color:rgba(0,0,0,1);
}
&:hover {
img {
-webkit-transform: scale(1.1);
transform: scale(1.1);
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
}
}
.item::after {
content: '';
clear: both;
}
}
}
.detail-container {
background: none;
min-height: 400px;
background-size: 95% ;
position: relative;
margin-top: 0.8rem;
padding-top: 0.7rem;
.introduce {
margin-left:0%;
width: 6.4rem;
// height: 3.8rem;
min-height: 3.8rem;
background: url('../img/mapbg.png') no-repeat top center;
background-size: cover;
-webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
padding-left: 0.5rem;
.top {
padding-top:0.5rem;
.line1 {
width:169px;
height:1px;
background:rgba(199,1,81,1);
}
.line2 {
width:33px;
height:1px;
background:rgba(199,1,81,1);
}
.name{
font-size:24px;
font-weight:400;
color:rgba(199,1,81,1);
line-height: 1;
padding-top: 17px;
padding-bottom: 9px;
}
.en {
font-size:12px;
font-weight:300;
line-height: 1;
color:rgba(199,1,81,1);
padding-bottom: 18px;
}
}
.bottom {
width:5.6rem;
min-height: 1rem;
text-align: justify;
padding-top: 0.6rem;
padding-bottom: 0.3rem;
color: #979797;
font-size: 16px;
line-height: 26px;
}
}
.list {
width: 5.8rem;
height: 3.3rem;
position: relative;
top: 1rem;
right: 70px;
display: inline-block;
// height: 654px;
// overflow: hidden;
.ctr {
display: none;
}
.list-item {
position: relative;
top: 0;
left: auto;
margin-left: 2.8rem;
right: 0;
// width: calc(860px + (100vw - 1200px)/2);
width: 100%;
-webkit-transition: all 0.5s;
transition: all 0.5s;
.swiper-container {
width: 5.8rem;
height: 3.3rem;
margin-left: auto;
margin-right: auto;
display: block;
.swiper-slide {
position: relative;
width: auto;
height: auto;
&::after {
content: "";
background: rgba(0,0,0, 0.5);
width: 374px;
left: 0;
top: 0;
height:310px ;
position: absolute;
opacity: 0;
-webkit-transition: all 1s;
transition: all 1s;
display: none;
}
}
.show-mask {
&::after {
opacity: 1;
display: block;
}
}
}
}
.item {
width: 5.8rem;
height: 3.3rem;
margin-right: 26px;
margin-bottom: 27px;
position: relative;
-webkit-box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2);
// background: url('/img/banner2.jpg') center no-repeat;
.img-container {
height: 100%;
width: 100%;
overflow: hidden;
img {
width: 100%;
height: 100%;
}
&:hover {
img {
-webkit-transform: scale(1.1);
transform: scale(1.1);
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
}
}
}
.item::after {
content: '';
clear: both;
}
}
}
.dynamic-detail {
padding-top: 1rem;
.title {
font-size: 0.45rem;
}
}
}
\ No newline at end of file
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 sign in to comment