Skip to content

html / bdideal

Go to a project
Commit 4afc3b34 by hank
Options

首页样式修改

parent dc28bce9
Showing with 163 additions and 106 deletions
html/about.html
......@@ -274,7 +274,7 @@
var content =
'<div style="margin:0;line-height:20px;padding:2px;background:white;">' +
'<img src="../img/weixin.png" alt="" style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>' +
'地址：北京市海淀区知春路甲48号<br/>电话：(010)58732488<br/>' +
'地址：北京市海淀区知春路甲48号<br/>电话：010-58060808<br/>' +
'</div>';
//创建检索信息窗口对象
......
html/index.html
......@@ -554,6 +554,19 @@
$(document).ready(function () {
var sliceNum = 6; // 展示数量
var sliceNum2 = 4; // 展示数量
var active2 = $('.views-content .one');
var active1 = $('.views-content .two');
active2.mouseenter(function (param) {
active1.addClass("active1")
active2.addClass("active2")
})
active1.mouseenter(function (param) {
active1.removeClass("active1")
active2.removeClass("active2")
// active1.addClass("active1")
// active2.addClass("active2")
})
var mySwiper = new Swiper('.swiper-container', {
direction: 'horizontal', // 垂直切换选项
loop: true, // 循环模式选项
......
html/products.html
......@@ -529,10 +529,12 @@
'<div class="img-container">' +
'<img src="' +
item.imagesUrl +
// item.thumb +
'" alt="">' +
'</div>' +
'<div class="item-title"> ' +
item.proName +
// item.title +
'</div>' +
'<ul class="tag-list">' +
(function (a) {
......@@ -566,7 +568,33 @@
// // 如果需要分页器
// pagination: '.swiper-pagination'
});
update();
// update();
$.ajax({
type: 'get',
url: "http://bdideal-cms.iyunfish.com/index.php?m=api&c=news&a=index&type=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>'
}
})
// $(".menu-list").html(html)
// update(createHtml(res.data[0].news))
// tab();
})
update()
function update(html) {
$('#swiper1')
.children()
......@@ -594,11 +622,12 @@
.removeClass('active');
$(this).addClass('active');
var index = $(this).index();
update();
mySwiper.slideTo(0, 1000, false);
// mySwiper.slideTo(0, 1000, false);
// update(createHtml(ideal.produtsList[index].news));
});
}
tab();
tab()
function computeMasking(swiper) {
......
style/index.css
......@@ -356,49 +356,6 @@ ul {
border: 1px solid #A7A7A7;
cursor: pointer;
}
.our-products .views-content .left-item:hover .introduce {
background: url('../img/index_02bgpink.png') no-repeat top center;
background-size: cover;
}
.our-products .views-content .left-item:hover .introduce .top {
padding-top: 60px;
}
.our-products .views-content .left-item:hover .introduce .top .line1 {
width: 169px;
height: 1px;
background: #fff;
}
.our-products .views-content .left-item:hover .introduce .top .line2 {
width: 33px;
height: 1px;
background: #fff;
}
.our-products .views-content .left-item:hover .introduce .top .name {
font-size: 24px;
font-weight: 400;
color: #fff;
line-height: 1;
padding-top: 17px;
padding-bottom: 9px;
}
.our-products .views-content .left-item:hover .introduce .top .en {
font-size: 12px;
font-weight: 300;
line-height: 1;
color: #fff;
padding-bottom: 18px;
}
.our-products .views-content .left-item:hover .introduce .bottom {
padding-top: 40px;
color: #fff;
font-size: 14px;
line-height: 30px;
}
.our-products .views-content .left-item:hover a {
display: inline-block;
color: #fff;
border: 1px solid #ffffff;
}
.our-products .views-content .introduce {
width: 340px;
height: 411px;
......@@ -515,27 +472,27 @@ ul {
color: #fff;
border: 1px solid #ffffff;
}
.our-products .views-content .two:hover .introduce {
.our-products .views-content .active1 .introduce {
width: 340px;
height: 411px;
background: url('../img/mapbg.png') no-repeat top center;
background-size: cover;
padding-left: 34px;
}
.our-products .views-content .two:hover .introduce .top {
.our-products .views-content .active1 .introduce .top {
padding-top: 60px;
}
.our-products .views-content .two:hover .introduce .top .line1 {
.our-products .views-content .active1 .introduce .top .line1 {
width: 169px;
height: 1px;
background: #c70151;
}
.our-products .views-content .two:hover .introduce .top .line2 {
.our-products .views-content .active1 .introduce .top .line2 {
width: 33px;
height: 1px;
background: #c70151;
}
.our-products .views-content .two:hover .introduce .top .name {
.our-products .views-content .active1 .introduce .top .name {
font-size: 24px;
font-weight: 400;
color: #c70151;
......@@ -543,25 +500,68 @@ ul {
padding-top: 17px;
padding-bottom: 9px;
}
.our-products .views-content .two:hover .introduce .top .en {
.our-products .views-content .active1 .introduce .top .en {
font-size: 12px;
font-weight: 300;
line-height: 1;
color: #c70151;
padding-bottom: 18px;
}
.our-products .views-content .two:hover .introduce .bottom {
.our-products .views-content .active1 .introduce .bottom {
padding-top: 40px;
color: #979797;
font-size: 14px;
line-height: 30px;
}
.our-products .views-content .two:hover a {
.our-products .views-content .active1 a {
display: inline-block;
color: #A7A7A7;
border: 1px solid #A7A7A7;
cursor: pointer;
}
.our-products .views-content .active2 .introduce {
background: url('../img/index_02bgpink.png') no-repeat top center;
background-size: cover;
}
.our-products .views-content .active2 .introduce .top {
padding-top: 60px;
}
.our-products .views-content .active2 .introduce .top .line1 {
width: 169px;
height: 1px;
background: #fff;
}
.our-products .views-content .active2 .introduce .top .line2 {
width: 33px;
height: 1px;
background: #fff;
}
.our-products .views-content .active2 .introduce .top .name {
font-size: 24px;
font-weight: 400;
color: #fff;
line-height: 1;
padding-top: 17px;
padding-bottom: 9px;
}
.our-products .views-content .active2 .introduce .top .en {
font-size: 12px;
font-weight: 300;
line-height: 1;
color: #fff;
padding-bottom: 18px;
}
.our-products .views-content .active2 .introduce .bottom {
padding-top: 40px;
color: #fff;
font-size: 14px;
line-height: 30px;
}
.our-products .views-content .active2 a {
display: inline-block;
color: #fff;
border: 1px solid #ffffff;
}
.left-menu {
display: inline-block;
background: url('/img/bg3.png') top center no-repeat;
......
style/index.less
......@@ -380,54 +380,6 @@ ul {
color: #A7A7A7;
border:1px solid #A7A7A7;
cursor: pointer;
}
&:hover {
.introduce {
// background-image: url('') !important;
background: url('../img/index_02bgpink.png') no-repeat top center;
background-size: cover;
.top {
padding-top: 60px;
.line1 {
width:169px;
height:1px;
// background:rgba(199,1,81,1);
background: #fff;
}
.line2 {
width:33px;
height:1px;
background: #fff; }
.name{
font-size:24px;
font-weight:400;
color: #fff;
line-height: 1;
padding-top: 17px;
padding-bottom: 9px;
}
.en {
font-size:12px;
font-weight:300;
line-height: 1;
color:#fff;
padding-bottom: 18px;
}
}
.bottom {
padding-top: 40px;
color: #fff;
font-size: 14px;
line-height: 30px;
}
}
a {
display: inline-block;
color: #fff;
border:1px solid #ffffff;
}
}
}
.introduce {
......@@ -548,7 +500,10 @@ ul {
color: #fff;
border:1px solid #ffffff;
}
&:hover {
}
.active1 {
.introduce {
width:340px;
height: 411px;
......@@ -597,9 +552,55 @@ ul {
cursor: pointer;
}
}
.active2{
.introduce {
// background-image: url('') !important;
background: url('../img/index_02bgpink.png') no-repeat top center;
background-size: cover;
.top {
padding-top: 60px;
.line1 {
width:169px;
height:1px;
// background:rgba(199,1,81,1);
background: #fff;
}
.line2 {
width:33px;
height:1px;
background: #fff; }
.name{
font-size:24px;
font-weight:400;
color: #fff;
line-height: 1;
padding-top: 17px;
padding-bottom: 9px;
}
.en {
font-size:12px;
font-weight:300;
line-height: 1;
color:#fff;
padding-bottom: 18px;
}
}
.bottom {
padding-top: 40px;
color: #fff;
font-size: 14px;
line-height: 30px;
}
}
a {
display: inline-block;
color: #fff;
border:1px solid #ffffff;
}
}
}
}
}
// 解决方案
.left-menu {
......
style/solution.css
......@@ -581,6 +581,13 @@ ul {
color: #999999;
line-height: 22px;
font-size: 14px;
-webkit-transition: all 1s;
transition: all 1s;
}
.jobs .detail:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
z-index: 999;
}
.jobs h3 {
text-align: center;
......
style/solution.less
......@@ -621,6 +621,13 @@ ul {
color: #999999;
line-height: 22px;
font-size:14px;
-webkit-transition: all 1s;
transition: all 1s;
&:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
z-index: 999;
}
}
h3 {
text-align: center;
......
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