Skip to content

html / bdideal

Go to a project
Commit f66e079a by hank
Options

首页移动端

parent 3c4bd8a4
Showing with 1066 additions and 28 deletions
html/index.html
...@@ -43,7 +43,8 @@ ...@@ -43,7 +43,8 @@
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</button> </button>
<a class="navbar-brand" href="index.html"><img src="../img/LOGOsmall.png" alt=""></a> <a class="navbar-brand" href="index.html"><img src="../img/LOGOsmall.png" alt="" class="hidden-xs"><img
src="../img/LOGOsmall2.png" alt="" class="visible-xs"></a>
</div> </div>
<div class="navbar-collapse collapse"> <div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right"> <ul class="nav navbar-nav navbar-right">
...@@ -102,9 +103,11 @@ ...@@ -102,9 +103,11 @@
<div class="word-box"> <div class="word-box">
<p class="line1"></p> <p class="line1"></p>
<p class="btworden animated bounceInRight" style="animation-delay: 1s;">案例遍布金融、地产、旅游、汽车、教育、科技等行业的500强客户</p> <p class="btworden animated bounceInRight" style="animation-delay: 1s;">案例遍布金融、地产、旅游、汽车、教育、科技等行业的500强客户
</p>
<p class="btword animated bounceInRight " style="animation-delay: 0.7s;">完整的数据可视化解决方案</p> <p class="btword animated bounceInRight " style="animation-delay: 0.7s;">完整的数据可视化解决方案</p>
<p class="conword animated bounceInRight" style="animation-delay: 0.4s;">每天，我们处理超过10,000,000万条数据，累计服务用户480，348,355人次</p> <p class="conword animated bounceInRight" style="animation-delay: 0.4s;">
每天，我们处理超过10,000,000万条数据，累计服务用户480，348,355人次</p>
<p class="line2"></p> <p class="line2"></p>
</div> </div>
</div> </div>
...@@ -248,7 +251,17 @@ ...@@ -248,7 +251,17 @@
</div> </div>
<div class="industry-dynamics"> <div class="industry-dynamics">
<div class="container"> <div class="container">
<div class="list" > <div class="right-menu">
<div class="menu-title text-right">
<img src="../img/title3.png" alt="">
</div>
<div class="menu-list">
<div class="menu-item active">大数据可视化平台</div>
<div class="menu-item">数字展厅</div>
<div class="menu-item">数字互动解决方案</div>
</div>
</div>
<div class="list">
<div class="list-item"> <div class="list-item">
<div class="item"> <div class="item">
<a href=""> <a href="">
...@@ -309,17 +322,12 @@ ...@@ -309,17 +322,12 @@
</div> </div>
</div> </div>
<div class="right-menu">
<div class="menu-title text-right"> <div class="more text-center">
<img src="../img/title3.png" alt=""> <a class="hidden-xs" href="dynamic.html" style="color: black;"><span>MORE</span> <span
</div> class="jiantou">》</span></a>
<div class="menu-list"> <a class="visible-xs" href="dynamic.html" style="color: black;"><span>MORE</span> </a>
<div class="menu-item active">大数据可视化平台</div>
<div class="menu-item">数字展厅</div>
<div class="menu-item">数字互动解决方案</div>
</div>
</div> </div>
<div class="more text-center"> <a href="dynamic.html" style="color: black;"><span>MORE</span> <span class="jiantou">》</span></a> </div>
</div> </div>
</div> </div>
...@@ -356,8 +364,11 @@ ...@@ -356,8 +364,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>
...@@ -380,7 +391,7 @@ ...@@ -380,7 +391,7 @@
<script src="https://cdn.bootcss.com/particles.js/2.0.0/particles.min.js <script src="https://cdn.bootcss.com/particles.js/2.0.0/particles.min.js
"></script> "></script>
<script src="../js/partticles.js"></script> <script src="../js/partticles.js"></script>
<script src="../js/rem.js"></script>
</body> </body>
<script> <script>
$(document).ready(function () { $(document).ready(function () {
...@@ -458,27 +469,27 @@ ...@@ -458,27 +469,27 @@
}); });
// 生成解方案html // 生成解方案html
function createSolutionHtml(data) { function createSolutionHtml(data) {
data= data.slice(0, sliceNum); data = data.slice(0, sliceNum);
console.log(data) console.log(data)
var html = ""; var html = "";
data.forEach(function (item) { data.forEach(function (item) {
html += html +=
'<div class="item">' + '<div class="item">' +
'<a href="./productDetail.html?id='+item.id +'" target="_blank"> '+ '<a href="./productDetail.html?id=' + item.id + '" target="_blank"> ' +
' <img src="'+ item.thumb+'" alt=""></a>'+ ' <img src="' + item.thumb + '" alt=""></a>' +
'<div class="item-title">'+item.title+'</div>'+ '<div class="item-title">' + item.title + '</div>' +
'</div>' '</div>'
}); });
return html; return html;
} }
function createDynamicHtml(data) { function createDynamicHtml(data) {
data= data.slice(0, sliceNum2); data = data.slice(0, sliceNum2);
var html = ""; var html = "";
data.forEach(function (item) { data.forEach(function (item) {
html += html +=
'<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 +
...@@ -488,8 +499,8 @@ ...@@ -488,8 +499,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>'; '</a></div>';
}); });
...@@ -503,10 +514,10 @@ ...@@ -503,10 +514,10 @@
// 左侧菜单切换 // 左侧菜单切换
function tab(container) { function tab(container) {
console.log('tab1') console.log('tab1')
$('.left-menu .menu-item').click(function(e) { $('.left-menu .menu-item').click(function (e) {
$(this).parent().children().removeClass('active'); $(this).parent().children().removeClass('active');
$(this).addClass('active'); $(this).addClass('active');
var index= $(this).index(); var index = $(this).index();
// $(this).parent().parent().parent().children().find('.list'); // $(this).parent().parent().parent().children().find('.list');
$('#dashuju').html(createSolutionHtml(ideal.produtsList[index].news)); $('#dashuju').html(createSolutionHtml(ideal.produtsList[index].news));
...@@ -519,10 +530,10 @@ ...@@ -519,10 +530,10 @@
function tab2(container) { function tab2(container) {
console.log('tab2') console.log('tab2')
$('.right-menu .menu-item').click(function(e) { $('.right-menu .menu-item').click(function (e) {
$(this).parent().children().removeClass('active'); $(this).parent().children().removeClass('active');
$(this).addClass('active'); $(this).addClass('active');
var index= $(this).index(); var index = $(this).index();
// $(this).parent().parent().parent().children().find('.list'); // $(this).parent().parent().parent().children().find('.list');
$('.industry-dynamics .list-item').eq(0).html(createDynamicHtml(ideal.dynamicList[index].news)) $('.industry-dynamics .list-item').eq(0).html(createDynamicHtml(ideal.dynamicList[index].news))
// var list_item = $(this).parent().parent().parent().find('.list').children(); // var list_item = $(this).parent().parent().parent().find('.list').children();
......
js/rem.js 0 → 100644
(function(designWidth, maxWidth) {
var doc = document,
win = window;
var docEl = doc.documentElement;
var metaEl,
metaElCon;
var styleText,
remStyle = document.createElement("style");
var tid;
function refreshRem() {
// var width = parseInt(window.screen.width); // uc有bug
var width = docEl.getBoundingClientRect().width;
if (!maxWidth) {
maxWidth = 540;
};
if (width > maxWidth) { // 淘宝做法：限制在540的屏幕下，这样100%就跟10rem不一样了
width = maxWidth;
}
var rem = width * 100 / designWidth;
// var rem = width / 10; // 如果要兼容vw的话分成10份 淘宝做法
//docEl.style.fontSize = rem + "px"; //旧的做法，在uc浏览器下面会有切换横竖屏时定义了font-size的标签不起作用的bug
remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
}
// 设置 viewport ，有的话修改 没有的话设置
metaEl = doc.querySelector('meta[name="viewport"]');
// 20171219修改：增加 viewport-fit=cover ，用于适配iphoneX
metaElCon = "width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=no,viewport-fit=cover";
if(metaEl) {
metaEl.setAttribute("content", metaElCon);
}else{
metaEl = doc.createElement("meta");
metaEl.setAttribute("name", "viewport");
metaEl.setAttribute("content", metaElCon);
if (docEl.firstElementChild) {
docEl.firstElementChild.appendChild(metaEl);
}else{
var wrap = doc.createElement("div");
wrap.appendChild(metaEl);
doc.write(wrap.innerHTML);
wrap = null;
}
}
//要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
refreshRem();
if (docEl.firstElementChild) {
docEl.firstElementChild.appendChild(remStyle);
} else {
var wrap = doc.createElement("div");
wrap.appendChild(remStyle);
doc.write(wrap.innerHTML);
wrap = null;
}
win.addEventListener("resize", function() {
clearTimeout(tid); //防止执行两次
tid = setTimeout(refreshRem, 300);
}, false);
win.addEventListener("pageshow", function(e) {
if (e.persisted) { // 浏览器后退的时候重新计算
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
}, false);
if (doc.readyState === "complete") {
doc.body.style.fontSize = "16px";
} else {
doc.addEventListener("DOMContentLoaded", function(e) {
doc.body.style.fontSize = "16px";
}, false);
}
})(750, 750);
\ No newline at end of file
style/common.css
...@@ -24,6 +24,7 @@ html, body { ...@@ -24,6 +24,7 @@ html, body {
/* max-width:1900px; */ /* max-width:1900px; */
margin: 0 auto; margin: 0 auto;
width: 100%; width: 100%;
font-size: 14px ;
} }
body { body {
......
style/index.css
...@@ -971,3 +971,456 @@ ul { ...@@ -971,3 +971,456 @@ ul {
padding-right: 0px; padding-right: 0px;
} }
} }
@media (max-width: 768px) {
.main-container {
height: 420px;
margin-top: 50px;
}
.main-container .nav-absolute-container {
max-width: 100vw;
position: fixed;
background: white;
z-index: 9999;
}
.main-container .swiper-container .word-box p.btword {
font-size: 28px;
}
.navbar-brand {
padding: 7px 15px;
}
.navbar-container {
position: relative;
}
.navbar-container a {
color: black !important;
font-size: 16px;
}
.navbar-inverse .navbar-toggle {
border-color: white;
}
.navbar-inverse .navbar-toggle .icon-bar {
background: #000;
}
.navbar-inverse .navbar-toggle:hover {
border-color: #333;
}
.navbar-inverse .navbar-toggle:hover .icon-bar {
background: #fff;
}
.main2-container {
background-size: auto;
}
.our-products {
background-size: cover;
height: 854px;
}
.our-products .our {
background: none;
background-size: 98%;
background-position: 0 100px;
height: 1000px;
}
.our-products .our .views-content {
top: 200px;
}
.our-products .word-right {
text-align: center;
position: absolute;
right: 0px;
left: 0;
top: 30px;
margin: 0 auto;
font-size: 14px;
color: #333333;
}
.our-products .word-right .title {
font-size: 38px;
font-family: PingFangSC-Regular;
font-weight: 400;
color: #000000;
margin-bottom: 30px;
position: relative;
}
.our-products .word-right .title:before {
content: "" attr(data) "";
position: absolute;
right: 0px;
left: 0;
margin: 0 auto;
top: 15px;
font-size: 38px;
color: rgba(0, 0, 0, 0.5);
opacity: 0.1;
letter-spacing: 1px;
}
.our-products .word-right p {
letter-spacing: 0;
}
.our-products .views-content {
position: absolute;
z-index: 999;
top: -40px;
left: 5%;
}
.our-products .views-content img {
width: 100%;
height: 100%;
}
.our-products .views-content a {
position: absolute;
bottom: 40px;
right: 40px;
text-align: center;
width: 107.2px;
height: 31.2px;
line-height: 31.2px;
font-size: 14.5px;
}
.our-products .views-content .left-item {
height: 316px !important;
margin-bottom: 30px;
}
.our-products .views-content .left-item a {
display: inline-block;
color: #A7A7A7;
border: 1px solid #A7A7A7;
cursor: pointer;
}
.our-products .views-content .introduce {
width: 340px;
height: 316px;
background: url('../img/mapbg.png') no-repeat top center;
background-size: cover;
padding-left: 34px;
}
.our-products .views-content .introduce .top {
padding-top: 20px !important;
}
.our-products .views-content .introduce .top .line1 {
width: 169px;
height: 1px;
background: #c70151;
}
.our-products .views-content .introduce .top .line2 {
width: 33px;
height: 1px;
background: #c70151;
}
.our-products .views-content .introduce .top .name {
font-size: 24px;
font-weight: 400;
color: #c70151;
line-height: 1;
padding-top: 17px;
padding-bottom: 9px;
}
.our-products .views-content .introduce .top .en {
font-size: 12px;
font-weight: 300;
line-height: 1;
color: #c70151;
padding-bottom: 18px;
}
.our-products .views-content .introduce .bottom {
padding-top: 20px !important;
color: #979797;
font-size: 14px;
line-height: 30px;
}
.left-menu {
display: inline-block;
background-position: 0 0;
width: 100%;
}
.left-menu .menu-title {
height: 167px;
margin-bottom: 0;
}
.left-menu .menu-title img {
width: auto;
height: 100%;
}
.left-menu .menu-list {
border-left: none;
border-bottom: 2px solid #cccccc;
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: auto;
padding-top: 47px;
display: flex;
width: 100%;
justify-content: space-between;
margin-bottom: 0.8rem;
}
.left-menu .menu-list .menu-item {
text-align: center;
height: 1.1rem;
padding-left: 0px;
padding-bottom: 0.48rem;
font-size: 0.33rem;
margin-bottom: 0px ;
color: #999999;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
cursor: pointer;
}
.left-menu .menu-list .active {
color: #000000;
}
.left-menu .menu-list .active::after {
content: "";
position: absolute;
width: 1.01rem;
height: 0.07rem;
bottom: -2px !important;
left: 0;
right: 0;
top: auto;
margin: 0 auto;
background: #000;
}
.right-menu {
display: inline-block;
background-position: 0 0;
width: 100%;
}
.right-menu .menu-title {
height: 167px;
margin-bottom: 0;
}
.right-menu .menu-title img {
width: auto;
height: 100%;
}
.right-menu .menu-list {
border: none;
border-bottom: 2px solid #cccccc;
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: auto;
padding-top: 47px;
display: flex;
width: 100%;
justify-content: space-between;
margin-bottom: 0.8rem;
}
.right-menu .menu-list .menu-item {
text-align: center;
height: 1.1rem;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0.48rem;
font-size: 0.33rem;
margin-bottom: 0px ;
color: #999999;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
cursor: pointer;
}
.right-menu .menu-list .active {
color: #000000;
}
.right-menu .menu-list .active::after {
content: "";
position: absolute;
width: 1.01rem;
height: 0.07rem;
bottom: -2px !important;
left: 0;
right: 0;
top: auto;
margin: 0 auto;
background: #000;
}
.solution .table-a {
margin-bottom: 20px;
}
.solution .list {
float: right;
width: 100%;
display: inline-block;
height: auto;
overflow: hidden;
}
.solution .list .list-item {
height: auto;
-webkit-transition: all 0.5s;
transition: all 0.5s;
padding-bottom: 1rem;
}
.solution .list .item {
width: 3.29rem;
height: 1.59rem;
margin: 0.08rem;
float: left;
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 {
width: 100%;
height: 100%;
}
.solution .list .item .item-title {
display: none;
position: absolute;
bottom: 6px;
padding-left: 20px;
color: #fff;
overflow: hidden;
font-size: 18px;
}
.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:hover .item-title {
display: block;
}
.solution .list .item::after {
content: '';
clear: both;
}
.industry-dynamics {
padding-top: 1rem;
}
.industry-dynamics .list {
width: 100%;
height: auto;
overflow: hidden;
display: inline-block;
}
.industry-dynamics .list .list-item {
width: 100%;
height: auto;
overflow: hidden;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.industry-dynamics .list .item {
width: 3.38rem;
height: 3.21rem;
background: #fff;
margin-right: 0;
margin-bottom: 0.15rem;
float: left;
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);
}
.industry-dynamics .list .item:nth-child(2n -1) {
margin-right: 0.12rem;
}
.industry-dynamics .list .item a {
display: inline-block;
height: 100%;
width: 100%;
text-decoration: none;
}
.industry-dynamics .list .item .img-container {
width: 3.38rem;
height: 1.61rem;
overflow: hidden;
}
.industry-dynamics .list .item .img-container img {
width: 100%;
height: auto;
}
.industry-dynamics .list .item .item-title {
padding-left: 0.2rem;
padding-top: 0.1rem;
line-height: 0.4rem;
width: 3rem;
font-size: 0.2rem;
color: #000;
}
.industry-dynamics .list .item .bottom-word {
padding-top: 0.1rem;
padding-left: 0.2rem;
font-size: 0.16rem;
}
.industry-dynamics .list .item .bottom-word .name {
display: inline-block;
vertical-align: bottom;
width: 1rem;
height: 0.26rem;
font-size: 0.16rem;
text-align: center;
line-height: 0.26rem;
background: #c70151;
color: #fff;
}
.industry-dynamics .list .item .bottom-word .date {
padding-left: 0.1rem;
color: #000000;
}
.industry-dynamics .list .item .bottom-word .date img {
display: inline-block;
height: 0.15rem ;
margin-right: 5px;
}
.industry-dynamics .list .item::after {
content: '';
clear: both;
}
.industry-dynamics .more {
font-size: 18px;
font-weight: 300;
color: rgba(0, 0, 0, 0.8);
line-height: 30px;
height: 30px;
margin-top: 0.8rem;
margin-bottom: 1rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.industry-dynamics .more a {
display: flex;
align-items: center;
justify-content: center;
width: 1.78rem;
height: 0.54rem;
line-height: 0.54rem;
border: 1px solid rgba(0, 0, 0, 0.8);
}
.industry-dynamics .more a .jiantou {
font-size: 11px;
height: 30px;
display: inline-block;
padding-left: 5px;
}
#footer .footer-content {
position: relative;
text-align: right;
padding-top: 0.8rem;
padding-bottom: 0.8rem;
font-size: 0.2rem;
}
#footer .footer-content a {
color: white;
}
#footer .footer-content .weixin-img {
position: absolute;
top: -3rem;
left: 15px;
text-align: center;
}
#footer .footer-content .weixin-img img {
max-width: 15rem;
height: auto;
display: inline-block;
margin-bottom: 10px;
}
}
style/index.less
...@@ -1044,3 +1044,497 @@ ul { ...@@ -1044,3 +1044,497 @@ 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) {
.main-container {
height: 420px;
margin-top: 50px;
.nav-absolute-container {
max-width: 100vw;
position: fixed;
background: white;
z-index: 9999;
}
.swiper-container .word-box {
p.btword {
font-size: 28px;
}
}
}
.navbar-brand {
padding: 7px 15px;
}
.navbar-container {
a {
color: black !important;
font-size: 16px;
}
// height: 51px;
.navbar {
// border-bottom: 1px solid #d2d2d2;
}
position: relative;
}
.navbar-inverse .navbar-toggle {
border-color: white;
.icon-bar {
background: #000;
}
&:hover {
border-color: #333;
.icon-bar {
background: #fff;
}
}
}
.main2-container {
background-size: auto;
}
.our-products {
background-size: cover;
height: 854px;
.our {
background: none;
background-size: 98%;
background-position: 0 100px;
height:1000px;
.views-content {
top: 200px;
}
}
.word-right {
text-align: center;
position: absolute;
right: 0px;
left: 0;
top: 30px;
margin: 0 auto;
font-size: 14px;
color: #333333;
.title {
font-size:38px;
font-family:PingFangSC-Regular;
font-weight:400;
color:rgba(0,0,0,1);
margin-bottom: 30px;
position: relative;
&:before {
content: "" attr(data) "";
position: absolute;
right: 0px;
left: 0;
margin: 0 auto;
top: 15px;
font-size: 38px;
color: rgba(0, 0, 0, 0.5);
opacity: 0.1;
letter-spacing: 1px;
}
}
p {
letter-spacing: 0;
}
}
.views-content {
position: absolute;
// overflow: hidden;
z-index: 999;
top: -40px;
left: 5%;
img {
width: 100%;
height: 100%;
}
a {
position: absolute;
bottom: 40px;
right: 40px;
text-align: center;
width:107.2px;
height:31.2px;
line-height: 31.2px;
font-size: 14.5px;
}
.left-item {
height:316px !important;
margin-bottom: 30px;
a {
display: inline-block;
color: #A7A7A7;
border:1px solid #A7A7A7;
cursor: pointer;
}
}
.introduce {
width:340px;
height:316px;
background: url('../img/mapbg.png') no-repeat top center;
background-size: cover;
padding-left: 34px;
.top {
padding-top: 20px !important;
.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 {
padding-top: 20px !important;
color: #979797;
font-size: 14px;
line-height: 30px;
}
}
}
}
.left-menu {
display: inline-block;
// background: url('/img/bg3.png') top center no-repeat;
background-position: 0 0;
width: 100%;
.menu-title {
height:167px;
img {
width: auto;
height: 100%;
}
margin-bottom: 0;
}
.menu-list {
border-left: none;
border-bottom: 2px solid rgba(204,204,204,1);
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: auto;
padding-top: 47px;
display: flex;
width: 100%;
justify-content: space-between;
margin-bottom: 0.8rem;
.menu-item {
text-align: center;
// line-height: 8rem;
height: 1.1rem;
padding-left: 0px;
padding-bottom: 0.48rem;
font-size: 0.33rem;
margin-bottom: 0px ;
color: #999999;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
cursor: pointer;
}
.active {
color: #000000;
// border-left: 6px solid #000000;
&::after {
content: "";
position: absolute;
width:1.01rem;
height:0.07rem;
bottom: -2px !important;
left: 0;
right: 0;
top: auto;
margin: 0 auto;
background: #000;
}
}
}
}
.right-menu {
display: inline-block;
// background: url('/img/bg3.png') top center no-repeat;
background-position: 0 0;
width: 100%;
.menu-title {
height:167px;
img {
width: auto;
height: 100%;
}
margin-bottom: 0;
}
.menu-list {
border: none;
border-bottom: 2px solid rgba(204,204,204,1);
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: auto;
padding-top: 47px;
display: flex;
width: 100%;
justify-content: space-between;
margin-bottom: 0.8rem;
.menu-item {
text-align: center;
// line-height: 8rem;
height: 1.1rem;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0.48rem;
font-size: 0.33rem;
margin-bottom: 0px ;
color: #999999;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
cursor: pointer;
}
.active {
color: #000000;
// border-left: 6px solid #000000;
&::after {
content: "";
position: absolute;
width:1.01rem;
height:0.07rem;
bottom: -2px !important;
left: 0;
right: 0;
top: auto;
margin: 0 auto;
background: #000;
}
}
}
}
.solution {
// padding-top: 50px;
.table-a {
margin-bottom: 20px;
}
.list {
float: right;
width: 100%;
display: inline-block;
height: auto;
overflow: hidden;
.list-item {
height: auto;
-webkit-transition: all 0.5s;
transition: all 0.5s;
padding-bottom: 1rem;
}
.item {
width: 3.29rem;
height: 1.59rem;
margin: 0.08rem;
float: left;
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 {
width: 100%;
height: 100%;
}
}
.item-title {
display: none;
position: absolute;
bottom: 6px;
padding-left: 20px;
color: #fff;
overflow: hidden;
font-size: 18px;
}
&:hover {
img {
-webkit-transform: scale(1.1);
transform: scale(1.1);
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.item-title {
display: block;
}
}
}
.item::after {
content: '';
clear: both;
}
}
}
.industry-dynamics {
padding-top: 1rem;
.list {
width: 100%;
height: auto;
overflow: hidden;
display: inline-block;
.list-item {
width: 100%;
height: auto;
overflow: hidden;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.item {
// width: 6.92rem;
// height: 6.1rem;
width: 3.38rem;
height:3.21rem;
background: #fff;
margin-right: 0;
margin-bottom: 0.15rem;
&:nth-child(2n -1) {
margin-right:0.12rem;
}
float: left;
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);
a {
display: inline-block;
height: 100%;
width: 100%;
text-decoration: none;
}
.img-container {
width: 3.38rem;
height:1.61rem;
overflow: hidden;
img {
width: 100%;
height: auto;
}
}
.item-title {
padding-left: 0.2rem;
padding-top: 0.1rem;
line-height: 0.4rem;
width: 3rem;
font-size: 0.2rem;
color: #000;
}
.bottom-word {
// text-align: right;
padding-top: 0.1rem;
padding-left: 0.2rem;
font-size: 0.16rem;
.name {
display: inline-block;
vertical-align: bottom;
width: 1rem;
height: 0.26rem;
font-size: 0.16rem;
text-align: center;
line-height: 0.26rem;
background:rgba(199,1,81,1);
color: #fff;
}
.date {
padding-left: 0.1rem;
color:rgba(0,0,0,6);
img {
display: inline-block;
height: 0.15rem ;
margin-right: 5px;
}
}
}
}
.item::after {
content: '';
clear: both;
}
}
.more {
font-size:18px;
font-weight:300;
color:rgba(0,0,0,0.8);
line-height: 30px;
height: 30px;
margin-top: 0.8rem;
margin-bottom: 1rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
a {
display: flex;
align-items: center;
justify-content: center;
// display: inline-block;
// line-height: 30px;
// height: 30px;
width:1.78rem;
height:0.54rem;
line-height: 0.54rem;
border: 1px solid rgba(0,0,0,0.8);
.jiantou {
font-size: 11px;
height: 30px;
display: inline-block;
padding-left: 5px;
}
}
}
}
#footer .footer-content {
position: relative;
text-align: right;
padding-top: 0.8rem;
padding-bottom: 0.8rem;
font-size:0.2rem;
a {
color: white;
}
.weixin-img {
position: absolute;
top: -3rem;
left: 15px;
text-align: center;
img {
max-width: 15rem;
height: auto;
display: inline-block;
margin-bottom: 10px;
}
}
}
}
\ 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