Skip to content

html / bdideal

Go to a project
Commit f66e079a by hank
Options

首页移动端

parent 3c4bd8a4
Showing with 571 additions and 28 deletions
html/index.html
......@@ -43,7 +43,8 @@
<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">
......@@ -102,9 +103,11 @@
<div class="word-box">
<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="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>
</div>
</div>
......@@ -248,7 +251,17 @@
</div>
<div class="industry-dynamics">
<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="item">
<a href="">
......@@ -309,17 +322,12 @@
</div>
</div>
<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 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 class="more text-center"> <a href="dynamic.html" style="color: black;"><span>MORE</span> <span class="jiantou">》</span></a> </div>
</div>
</div>
......@@ -356,8 +364,11 @@
<p class="weixin-img">
<img src="/img//weixin.png" alt="">
</p>
<object data="" type="">
<div>扫一扫获取更多资讯</div>
</object>
</p>
</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 () {
......@@ -458,27 +469,27 @@
});
// 生成解方案html
function createSolutionHtml(data) {
data= data.slice(0, sliceNum);
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>'+
'<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);
data = data.slice(0, sliceNum2);
var html = "";
data.forEach(function (item) {
html +=
'<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">' +
'<img src="' +
item.thumb +
......@@ -488,8 +499,8 @@
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> '+
'<span class="name">' + item.tags[0] + '</span> ' +
'<span class="date"><img src="../img/time.png" alt="">' + item.inputtime + '</span> ' +
' </div>' +
'</a></div>';
});
......@@ -503,10 +514,10 @@
// 左侧菜单切换
function tab(container) {
console.log('tab1')
$('.left-menu .menu-item').click(function(e) {
$('.left-menu .menu-item').click(function (e) {
$(this).parent().children().removeClass('active');
$(this).addClass('active');
var index= $(this).index();
var index = $(this).index();
// $(this).parent().parent().parent().children().find('.list');
$('#dashuju').html(createSolutionHtml(ideal.produtsList[index].news));
......@@ -519,10 +530,10 @@
function tab2(container) {
console.log('tab2')
$('.right-menu .menu-item').click(function(e) {
$('.right-menu .menu-item').click(function (e) {
$(this).parent().children().removeClass('active');
$(this).addClass('active');
var index= $(this).index();
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();
......
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 {
......
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