Skip to content

html / bdideal

Go to a project
Commit f66e079a by hank
Options

首页移动端

parent 3c4bd8a4
Showing with 1314 additions and 275 deletions
html/index.html
......@@ -43,23 +43,24 @@
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</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 class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="link-active"><a id="nav-index" href="./index.html">首页</a></li>
<li><a id="nav-about" href="./about.html">关于我们</a></li>
<li><a id="nav-products" href="./products.html">
我们的产品
<ul class="dropdown-menu">
我们的产品
<ul class="dropdown-menu">
<li>
<object data="" type=""><a href="./products.html">智慧城市可视化管控平台</a></object>
</li>
<li>
<object data="" type=""><a href="./products2.html">企业智慧可视化管控平台</a></object>
</li>
</ul>
</a></li>
</ul>
</a></li>
<li><a id="nav-solution" href="./solution.html">解决方案</a></li>
<li><a href="./dynamic.html" id="nav-dynamic">行业动态</a>
</li>
......@@ -72,65 +73,67 @@
</div>
</div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide banner1">
<div class="container ">
<div class="word-box">
<p class="line1"></p>
<p class="btworden animated bounceInRight" style="animation-delay: 1s;">ART AND TECHNOLOGY INTEGRATION</p>
<p class="btword animated bounceInRight " style="animation-delay: 0.7s;">技术创造艺术的大数据可视化团队</p>
<p class="conword animated bounceInRight" style="animation-delay: 0.4s;">我们坚持用科技创造艺术的理想，不断走在视觉艺术的最前沿。</p>
<p class="line2"></p>
</div>
</div>
<div class="swiper-wrapper">
<div class="swiper-slide banner1">
<div class="container ">
<div class="word-box">
<p class="line1"></p>
<p class="btworden animated bounceInRight" style="animation-delay: 1s;">ART AND TECHNOLOGY INTEGRATION</p>
<p class="btword animated bounceInRight " style="animation-delay: 0.7s;">技术创造艺术的大数据可视化团队</p>
<p class="conword animated bounceInRight" style="animation-delay: 0.4s;">我们坚持用科技创造艺术的理想，不断走在视觉艺术的最前沿。</p>
<p class="line2"></p>
</div>
</div>
<div class="swiper-slide banner2">
<div class="container ">
<div class="word-box">
<p class="line1"></p>
<p class="btworden animated bounceInRight" style="animation-delay: 1s;">具备前沿技术与科技未来的</p>
<p class="btword animated bounceInRight " style="animation-delay: 0.7s;">智慧城市可视化管控平台、企业智慧可视化管控平台</p>
<p class="conword animated bounceInRight" style="animation-delay: 0.4s;">商业智能利器，你身边的数据分析与数据表现专家。</p>
<p class="line2"></p>
</div>
</div>
</div>
<div class="swiper-slide banner2">
<div class="container ">
<div class="word-box">
<p class="line1"></p>
<p class="btworden animated bounceInRight" style="animation-delay: 1s;">具备前沿技术与科技未来的</p>
<p class="btword animated bounceInRight " style="animation-delay: 0.7s;">智慧城市可视化管控平台、企业智慧可视化管控平台</p>
<p class="conword animated bounceInRight" style="animation-delay: 0.4s;">商业智能利器，你身边的数据分析与数据表现专家。</p>
<p class="line2"></p>
</div>
</div>
<div class="swiper-slide banner3">
<div class="container ">
<div class="word-box">
<p class="line1"></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="conword animated bounceInRight" style="animation-delay: 0.4s;">每天，我们处理超过10,000,000万条数据，累计服务用户480，348,355人次</p>
<p class="line2"></p>
</div>
</div>
</div>
<div class="swiper-slide banner3">
<div class="container ">
<div class="word-box">
<p class="line1"></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="conword animated bounceInRight" style="animation-delay: 0.4s;">
每天，我们处理超过10,000,000万条数据，累计服务用户480，348,355人次</p>
<p class="line2"></p>
</div>
</div>
<div class="swiper-slide banner4">
<div class="container ">
<div class="word-box">
<p class="line1"></p>
<p class="btworden animated bounceInRight" style="animation-delay: 1s;">百万级可视化云服务平台</p>
<p class="btword animated bounceInRight " style="animation-delay: 0.7s;">让一切数据可感可知可触碰</p>
<p class="conword animated bounceInRight" style="animation-delay: 0.4s;">对海量数据自由计算、极速响应，驱动大数据行业变革</p>
<p class="line2"></p>
</div>
</div>
</div>
<div class="swiper-slide banner4">
<div class="container ">
<div class="word-box">
<p class="line1"></p>
<p class="btworden animated bounceInRight" style="animation-delay: 1s;">百万级可视化云服务平台</p>
<p class="btword animated bounceInRight " style="animation-delay: 0.7s;">让一切数据可感可知可触碰</p>
<p class="conword animated bounceInRight" style="animation-delay: 0.4s;">对海量数据自由计算、极速响应，驱动大数据行业变革</p>
<p class="line2"></p>
</div>
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<!-- <div class="swiper-button-prev"></div>
<!-- 如果需要导航按钮 -->
<!-- <div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div> -->
<!-- 如果需要滚动条 -->
</div>
<!-- 如果需要滚动条 -->
</div>
<!-- <div id="banner" class="" style="height: 552px;
visibility: visible;
animation-delay: 0.3s;
......@@ -162,34 +165,34 @@
<div class="one animated fadeInUp left-item" style="animation-delay: 0.2s;">
<!-- <img src="../img/02_01.png" alt=""> -->
<div class="introduce">
<div class="top">
<div class="line1"></div>
<div class="name">智慧城市可视化管控平台</div>
<div class="en">Smart City Visualization Platform</div>
<div class="line2"></div>
</div>
<div class="bottom">
<p>> 毫秒级数据采集，全类型数据汇聚</p>
<p>> 探索全量企业数据，充分发挥大数据价值</p>
<p>> 实时分布式计算平台，构建大数据算力</p>
</div>
<div class="top">
<div class="line1"></div>
<div class="name">智慧城市可视化管控平台</div>
<div class="en">Smart City Visualization Platform</div>
<div class="line2"></div>
</div>
<div class="bottom">
<p>> 毫秒级数据采集，全类型数据汇聚</p>
<p>> 探索全量企业数据，充分发挥大数据价值</p>
<p>> 实时分布式计算平台，构建大数据算力</p>
</div>
</div>
<a href="./products.html">进入详情</a>
</div>
<div class="two animated fadeInUp left-item" style="animation-delay: 0.5s;">
<!-- <img src="../img/02_02.png" alt=""> -->
<div class="introduce">
<div class="top">
<div class="line1"></div>
<div class="name">企业智慧可视化管控平台</div>
<div class="en">Enterprise Intelligence Visualization Control Platform</div>
<div class="line2"></div>
</div>
<div class="bottom">
<p>> 兼容各种数据源类型，支持海量数据</p>
<p>> 多平台数据可视化展现</p>
<p>> 运营决策分析，规避企业风险</p>
</div>
<div class="top">
<div class="line1"></div>
<div class="name">企业智慧可视化管控平台</div>
<div class="en">Enterprise Intelligence Visualization Control Platform</div>
<div class="line2"></div>
</div>
<div class="bottom">
<p>> 兼容各种数据源类型，支持海量数据</p>
<p>> 多平台数据可视化展现</p>
<p>> 运营决策分析，规避企业风险</p>
</div>
</div>
<a href="./products2.html">进入详情</a>
</div>
......@@ -210,105 +213,44 @@
</div>
<div class="list">
<div id="dashuju" class="list-item">
<div class="item">
<a href=""> <img src="http://bdideal.com/asset/img/homepro8.jpg" alt=""></a>
<div class="item-title">隆基泰和大数据分析决策系统</div>
</div>
<div class="item">
<a href=""> <img src="http://bdideal.com/asset/img/homepro7.jpg" alt=""></a>
<div class="item-title">隆基泰和大数据分析决策系统</div>
</div>
<div class="item">
<a href=""> <img src="http://bdideal.com/asset/img/homepro6.jpg" alt=""></a>
<div class="item-title">隆基泰和大数据分析决策系统</div>
</div>
<div class="item">
<a href=""> <img src="http://bdideal.com/asset/img/homepro5.jpg" alt=""></a>
<div class="item-title">隆基泰和大数据分析决策系统</div>
</div>
<div class="item">
<a href=""> <img src="http://bdideal.com/asset/img/homepro4.jpg" alt=""></a>
<div class="item-title">隆基泰和大数据分析决策系统</div>
</div>
<div class="item">
<a href=""> <img src="http://bdideal.com/asset/img/homepro3.jpg" alt=""></a>
<div class="item-title">隆基泰和大数据分析决策系统</div>
</div>
<div class="item">
<a href=""> <img src="http://bdideal.com/asset/img/homepro8.jpg" alt=""></a>
<div class="item-title">隆基泰和大数据分析决策系统</div>
</div>
<div class="item">
<a href=""> <img src="http://bdideal.com/asset/img/homepro7.jpg" alt=""></a>
<div class="item-title">隆基泰和大数据分析决策系统</div>
</div>
<div class="item">
<a href=""> <img src="http://bdideal.com/asset/img/homepro6.jpg" alt=""></a>
<div class="item-title">隆基泰和大数据分析决策系统</div>
</div>
<div class="item">
<a href=""> <img src="http://bdideal.com/asset/img/homepro5.jpg" alt=""></a>
<div class="item-title">隆基泰和大数据分析决策系统</div>
</div>
<div class="item">
<a href=""> <img src="http://bdideal.com/asset/img/homepro4.jpg" alt=""></a>
<div class="item-title">隆基泰和大数据分析决策系统</div>
</div>
<div class="item">
<a href=""> <img src="http://bdideal.com/asset/img/homepro3.jpg" alt=""></a>
<div class="item-title">隆基泰和大数据分析决策系统</div>
</div>
</div>
</div>
</div>
</div>
<div class="industry-dynamics">
<div class="container">
<div class="list" >
<div class="list-item">
<div class="item">
<a href="">
<div class="img-container">
<img src="../img/dynamics1.png" alt="">
</div>
<div class="item-title">
数字理想作为优秀被投企业受邀参加哈工创投三周年庆典
</div>
<div class="bottom-word">
<span class="name">大数据</span>
<span class="date"><img src="../img/time.png" alt=""> 2019.01.21</span>
</div>
</a>
</div>
<div class="item">
<a href="">
<div class="img-container">
<img src="../img/dynamics2.png" alt="">
</div>
<div class="item-title">
数字理想用120个昼夜在潼湖实现了一个小目标
</div>
<div class="bottom-word">
<span class="name">大数据</span>
<span class="date"><img src="../img/time.png" alt="">2018.11.29</span>
</div>
</a>
</div>
<div class="item">
<a href="">
<div class="img-container">
<img src="../img/dynamics3.png" alt="">
</div>
<div class="item-title">
可视化百人谈丨彭群生：可视化应成为辅助思维的有力工具
</div>
<div class="bottom-word">
<span class="name">数据可视化</span>
<span class="date"><img src="../img/time.png" alt="">2019.02.15</span>
</div>
</a>
</div>
<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+1》大数据里，我们过了怎样的年？
</div>
<div class="bottom-word">
<span class="name">大数据</span>
<span class="date"><img src="../img/time.png" alt="">2019.01.21</span>
</div>
</a>
</div>
</div>
</div>
<div class="right-menu">
<div class="menu-title text-right">
<img src="../img/title3.png" alt="">
......@@ -319,8 +261,74 @@
<div class="menu-item">数字互动解决方案</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 class="list">
<div class="list-item">
<div class="item">
<a href="">
<div class="img-container">
<img src="../img/dynamics1.png" alt="">
</div>
<div class="item-title">
数字理想作为优秀被投企业受邀参加哈工创投三周年庆典
</div>
<div class="bottom-word">
<span class="name">大数据</span>
<span class="date"><img src="../img/time.png" alt=""> 2019.01.21</span>
</div>
</a>
</div>
<div class="item">
<a href="">
<div class="img-container">
<img src="../img/dynamics2.png" alt="">
</div>
<div class="item-title">
数字理想用120个昼夜在潼湖实现了一个小目标
</div>
<div class="bottom-word">
<span class="name">大数据</span>
<span class="date"><img src="../img/time.png" alt="">2018.11.29</span>
</div>
</a>
</div>
<div class="item">
<a href="">
<div class="img-container">
<img src="../img/dynamics3.png" alt="">
</div>
<div class="item-title">
可视化百人谈丨彭群生：可视化应成为辅助思维的有力工具
</div>
<div class="bottom-word">
<span class="name">数据可视化</span>
<span class="date"><img src="../img/time.png" alt="">2019.02.15</span>
</div>
</a>
</div>
<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+1》大数据里，我们过了怎样的年？
</div>
<div class="bottom-word">
<span class="name">大数据</span>
<span class="date"><img src="../img/time.png" alt="">2019.01.21</span>
</div>
</a>
</div>
</div>
</div>
<div class="more text-center">
<a class="hidden-xs" href="dynamic.html" style="color: black;"><span>MORE</span> <span
class="jiantou">》</span></a>
<a class="visible-xs" href="dynamic.html" style="color: black;"><span>MORE</span> </a>
</div>
</div>
</div>
......@@ -356,8 +364,11 @@
<p class="weixin-img">
<img src="/img//weixin.png" alt="">
<object data="" type="">
<div>扫一扫获取更多资讯</div>
</object>
</p>
<div>扫一扫获取更多资讯</div>
</div>
</div>
</div>
......@@ -380,7 +391,7 @@
<script src="https://cdn.bootcss.com/particles.js/2.0.0/particles.min.js
"></script>
<script src="../js/partticles.js"></script>
<script src="../js/rem.js"></script>
</body>
<script>
$(document).ready(function () {
......@@ -389,49 +400,49 @@
var active2 = $('.views-content .one');
var active1 = $('.views-content .two');
ideal.ajax("case").done(function (res) {
console.log(JSON.parse(res))
var res = JSON.parse(res);
ideal.produtsList = res.data;
var html = ""
res.data.forEach(function (item, index) {
if (index == 0) {
html += '<div class="menu-item active">' + item.catname + '</div>'
} else {
html += '<div class="menu-item">' + item.catname + '</div>'
}
})
$(".left-menu .menu-list").html(html)
// update(createHtml(res.data[0].news))
$('#dashuju').html(createSolutionHtml(ideal.produtsList[0].news));
tab();
console.log(JSON.parse(res))
var res = JSON.parse(res);
ideal.produtsList = res.data;
var html = ""
res.data.forEach(function (item, index) {
if (index == 0) {
html += '<div class="menu-item active">' + item.catname + '</div>'
} else {
html += '<div class="menu-item">' + item.catname + '</div>'
}
})
$(".left-menu .menu-list").html(html)
// update(createHtml(res.data[0].news))
$('#dashuju').html(createSolutionHtml(ideal.produtsList[0].news));
tab();
})
ideal.ajax("news").done(function (res) {
console.log(JSON.parse(res))
var res = JSON.parse(res);
ideal.dynamicList = res.data;
var html = ""
res.data.forEach(function (item, index) {
if (index == 0) {
html += '<div class="menu-item active">' + item.catname + '</div>'
} else {
html += '<div class="menu-item">' + item.catname + '</div>'
}
})
$(".right-menu .menu-list").html(html)
// update(createHtml(res.data[0].news))
$('.industry-dynamics .list-item').eq(0).html(createDynamicHtml(ideal.dynamicList[0].news))
tab2();
console.log(JSON.parse(res))
var res = JSON.parse(res);
ideal.dynamicList = res.data;
var html = ""
res.data.forEach(function (item, index) {
if (index == 0) {
html += '<div class="menu-item active">' + item.catname + '</div>'
} else {
html += '<div class="menu-item">' + item.catname + '</div>'
}
})
$(".right-menu .menu-list").html(html)
// update(createHtml(res.data[0].news))
$('.industry-dynamics .list-item').eq(0).html(createDynamicHtml(ideal.dynamicList[0].news))
tab2();
})
active2.mouseenter(function (param) {
active2.mouseenter(function (param) {
active1.addClass("active1")
active2.addClass("active2")
})
active1.mouseenter(function (param) {
})
active1.mouseenter(function (param) {
active1.removeClass("active1")
active2.removeClass("active2")
// active1.addClass("active1")
......@@ -457,83 +468,83 @@
// },
});
// 生成解方案html
function createSolutionHtml(data) {
data= data.slice(0, sliceNum);
console.log(data)
var html = "";
data.forEach(function (item) {
html +=
'<div class="item">' +
'<a href="./productDetail.html?id='+item.id +'" target="_blank"> '+
' <img src="'+ item.thumb+'" alt=""></a>'+
'<div class="item-title">'+item.title+'</div>'+
'</div>'
});
return html;
}
function createDynamicHtml(data) {
data= data.slice(0, sliceNum2);
var html = "";
data.forEach(function (item) {
html +=
'<div class="item"> ' +
'<a href="./dynamicDetail.html?id='+ item.id+'" target="_blank"> ' +
'<div class="img-container">' +
'<img src="' +
item.thumb +
'" alt="">' +
'</div>' +
'<div class="item-title item-title2"> ' +
item.title +
'</div>' +
'<div class="bottom-word">' +
'<span class="name">'+ item.tags[0] +'</span> '+
'<span class="date"><img src="../img/time.png" alt="">'+ item.inputtime +'</span> '+
' </div>' +
'</a></div>';
});
console.log(html)
return html;
}
// $('#dashuju').html(createSolutionHtml(ideal.produtsList));
// $('.industry-dynamics .list-item').eq(0).html(createDynamicHtml(ideal.dynamicList))
function createSolutionHtml(data) {
data = data.slice(0, sliceNum);
console.log(data)
var html = "";
data.forEach(function (item) {
html +=
'<div class="item">' +
'<a href="./productDetail.html?id=' + item.id + '" target="_blank"> ' +
' <img src="' + item.thumb + '" alt=""></a>' +
'<div class="item-title">' + item.title + '</div>' +
'</div>'
});
return html;
}
function createDynamicHtml(data) {
data = data.slice(0, sliceNum2);
var html = "";
data.forEach(function (item) {
html +=
'<div class="item"> ' +
'<a href="./dynamicDetail.html?id=' + item.id + '" target="_blank"> ' +
'<div class="img-container">' +
'<img src="' +
item.thumb +
'" alt="">' +
'</div>' +
'<div class="item-title item-title2"> ' +
item.title +
'</div>' +
'<div class="bottom-word">' +
'<span class="name">' + item.tags[0] + '</span> ' +
'<span class="date"><img src="../img/time.png" alt="">' + item.inputtime + '</span> ' +
' </div>' +
'</a></div>';
});
console.log(html)
return html;
}
// $('#dashuju').html(createSolutionHtml(ideal.produtsList));
// $('.industry-dynamics .list-item').eq(0).html(createDynamicHtml(ideal.dynamicList))
// 生成活动html
// 左侧菜单切换
function tab(container) {
console.log('tab1')
$('.left-menu .menu-item').click(function(e) {
$(this).parent().children().removeClass('active');
$(this).addClass('active');
var index= $(this).index();
// $(this).parent().parent().parent().children().find('.list');
$('#dashuju').html(createSolutionHtml(ideal.produtsList[index].news));
// var list_item = $(this).parent().parent().parent().find('.list').children();
// list_item.hide();
// list_item.eq(index).show();
$('.left-menu .menu-item').click(function (e) {
$(this).parent().children().removeClass('active');
$(this).addClass('active');
var index = $(this).index();
// $(this).parent().parent().parent().children().find('.list');
$('#dashuju').html(createSolutionHtml(ideal.produtsList[index].news));
// var list_item = $(this).parent().parent().parent().find('.list').children();
// list_item.hide();
// list_item.eq(index).show();
})
}
// 右侧菜单切换
function tab2(container) {
console.log('tab2')
$('.right-menu .menu-item').click(function(e) {
$(this).parent().children().removeClass('active');
$(this).addClass('active');
var index= $(this).index();
// $(this).parent().parent().parent().children().find('.list');
$('.industry-dynamics .list-item').eq(0).html(createDynamicHtml(ideal.dynamicList[index].news))
// var list_item = $(this).parent().parent().parent().find('.list').children();
// list_item.hide();
// list_item.eq(index).show();
$('.right-menu .menu-item').click(function (e) {
$(this).parent().children().removeClass('active');
$(this).addClass('active');
var index = $(this).index();
// $(this).parent().parent().parent().children().find('.list');
$('.industry-dynamics .list-item').eq(0).html(createDynamicHtml(ideal.dynamicList[index].news))
// var list_item = $(this).parent().parent().parent().find('.list').children();
// list_item.hide();
// list_item.eq(index).show();
})
}
// tab()
});
</script>
</script>
</html>
\ No newline at end of file
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 {
/* max-width:1900px; */
margin: 0 auto;
width: 100%;
font-size: 14px ;
}
body {
......
style/index.css
......@@ -971,3 +971,456 @@ ul {
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 {
.jobs .block .detail{width: 95%;}
.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