//部分样式代码未上传
JS部分;
$(function () {
// 点Xtop消失逻辑代码
$(".iconfont").on("click", function () {
$(".top").css({
"display": "none"
})
});
// 1鼠标移入
$(".unshow0").css({
"display": "none"
})
$(".hoverchange1").on("mouseover", function () {
$(".unshow0").css({
"display": "block"
})
$(".firbox").css({
"display": "block",
"background-color": "#fff"
})
})
// 第一部分隐藏区域鼠标移入显示
$(".firbox").on("mouseover", function () {
$(".unshow0").css({
"display": "block"
})
$(".hoverchange1").css({
"background-color": "#fff"
})
$(".firbox").css({
"display": "block",
"background-color": "#fff"
})
})
// 第一部分隐藏区域鼠标移出显示
$(".firbox").on("mouseout", function () {
$(".hoverchange1").css({
"background-color": "#e3e4e5",
})
$(".unshow0").css({
"display": "none"
})
})
// 1鼠标移出
$(".hoverchange1").on("mouseout", function () {
$(".firbox").css({
"display": "none"
})
$(".unshow0").css({
"display": "none"
})
$(".zero").css({
"display": "block"
})
})
// 2鼠标移入
$(".hoverchange2").on("mouseover", function () {
$(".unshow0").css({
"display": "block"
})
$(".secbox").css({
"display": "block",
"background-color": "#fff"
}).siblings().css({
"display": "none"
})
})
// 第二部分隐藏区域鼠标移入显示
$(".secbox").on("mouseover", function () {
$(".unshow0").css({
"display": "block"
})
$(".hoverchange2").css({
"background-color": "#fff"
})
$(".secbox").css({
"display": "block",
"background-color": "#fff"
})
})
// 第二部分隐藏区域鼠标移出显示
$(".secbox").on("mouseout", function () {
$(".hoverchange2").css({
"background-color": "#e3e4e5",
})
})
// 2鼠标移出
$(".hoverchange2").on("mouseout", function () {
$(".secbox").css({
"display": "none"
})
$(".unshow0").css({
"display": "none"
})
})
// 3鼠标移入
$(".hoverchange3").on("mouseover", function () {
$(".unshow0").css({
"display": "block"
})
$(".thibox").css({
"display": "block",
"background-color": "#fff"
}).siblings().css({
"display": "none",
})
})
// 第三部分隐藏区域鼠标移入显示
$(".thibox").on("mouseover", function () {
$(".unshow0").css({
"display": "block"
})
$(".hoverchange3").css({
"background-color": "#fff"
})
$(".thibox").css({
"display": "block",
"background-color": "#fff"
})
})
// 第三部分隐藏区域鼠标移出显示
$(".thibox").on("mouseout", function () {
$(".hoverchange3").css({
"background-color": "#e3e4e5",
})
})
// 3鼠标移出
$(".hoverchange3").on("mouseout", function () {
$(".thibox").css({
"display": "none"
})
$(".unshow0").css({
"display": "none"
})
})
// 4鼠标移入
$(".hoverchange4").on("mouseover", function () {
$(".unshow0").css({
"display": "block"
})
$(".foubox").css({
"display": "block",
"background-color": "#fff"
}).siblings().css({
"display": "none",
})
})
// 第四部分隐藏区域鼠标移入显示
$(".foubox").on("mouseover", function () {
$(".unshow0").css({
"display": "block"
})
$(".hoverchange4").css({
"background-color": "#fff"
})
$(".foubox").css({
"display": "block",
"background-color": "#fff"
})
})
// 第四部分隐藏区域鼠标移出显示
$(".foubox").on("mouseout", function () {
$(".hoverchange4").css({
"background-color": "#e3e4e5",
})
})
// 4鼠标移出
$(".hoverchange4").on("mouseout", function () {
$(".foubox").css({
"display": "none"
})
$(".unshow0").css({
// "display": "none"
})
})
})
//asideleft鼠标悬停出现隐藏页
var leftlength = document.getElementsByClassName("li");
$(".asideleft li").on("mouseover", function () {
$(".mouseoverappera").css("display", "block");
var index = $(this).index();
$(leftlength).eq(index).css({
"display": "block"
}).siblings().css({
"display": "none"
})
$(this).on("mouseout", function () {
$(".mouseoverappera").css("display", "none");
$(leftlength).eq(index).css({
"display": "none"
})
})
})
// aside部分主要为12宫格逻辑部分
// redline移动逻辑
$(".moveline1").on("mouseover", function () {
$(".redline").animate({
"margin-left": 12
}, 350);
$(".list2").css("display", "none");
$(".list1").css("display", "block");
})
$(".moveline2").on("mouseover", function () {
$(".redline").animate({
"margin-left": 72
}, 350);
$(".list1").css("display", "none");
$(".list2").css("display", "block");
})
//12宫格鼠标悬停变红逻辑
var li1 = document.getElementsByClassName('li1');
var i1 = document.getElementsByClassName("i1");
for (let i = 0; i < li1.length; i++) {
li1[i].onmouseover = function () {
var ind = $(this).data("index");
$(this).children("a").css("color", "#f00");
$(i1).eq(ind).css("color", "#f00");
// 离开变回原来的逻辑
$(this).on("mouseout", function () {
var ind1 = $(this).data("index");
$(this).children("a").css("color", "#bea68d");
$(i1).eq(ind).css("color", "#bea68d");
})
}
}
// 九宫格前四个鼠标移动向上移动逻辑
var li2 = document.getElementsByClassName("li2");
var redlinex = document.getElementsByClassName("redline5");
// 鼠标悬停在话费机票酒店游戏时切换不同盒子的逻辑
var changeboxx = document.getElementsByClassName("changebox5");
for (var i = 0; i < li2.length; i++) {
li2[i].onmouseover = function () {
var ind = $(this).data("index");
$(this).children("a").css("color", "#f00");
$(changeboxx).eq(ind).css("display", "block").siblings(".changebox5").css("display", "none");
$(i1).eq(ind).css("color", "#f00");
$(".right_box2_3").animate({
"top": "235"
}, 100, function () {
for (let i = 0; i < 4; i++) {
i1[i].style.display = "none";
}
})
// 12宫格前四个底部红色线出现
$(this).on("mouseover", function () {
$(this).css({
"border-bottom": "2px solid #f00"
}).siblings().css({
"border-bottom": "none"
})
})
$(".close").css("display", "block");
$(".close").animate({
"bottom": "150"
})
// 12宫格前四个底部内容框出现
$(".changebox").animate({
"bottom": "-35"
}, 300)
// 离开变回原来的逻辑
$(this).on("mouseout", function () {
var ind1 = $(this).data("index");
$(this).children("a").css("color", "#bea68d");
$(i1).eq(ind).css("color", "#bea68d");
})
}
}
// 话费充值等鼠标悬停出现不同div盒子逻辑
var huafeiul = document.getElementsByClassName("huafei_00");
var changeboxa = document.getElementsByClassName("changeboxa");
for (let i = 0; i < changeboxa.length; i++) {
changeboxa[i].onmouseover = function () {
var icount = i;
$(huafeiul).eq(icount).css("display", "block").siblings().css("display", "none");
$(".changeboxa1").css("display", "inline-block")
}
}
// 点击关闭图标,12宫格变回原来的样式逻辑
$(".close").on("click", function () {
$(".close").css("display", "none");
$(changeboxx).css("display", "none");
$(".right_box2_3").animate({
"top": "270"
}, 50, function () {
for (let i = 0; i < 4; i++) {
i1[i].style.display = "block";
}
})
// 12宫格回归原位的时候,1-4宫格的底部的红线消失
$(li2).css("border-bottom", "none");
})
lunbo.js部分:
var left = document.getElementById("left");
var right = document.getElementById("right");
var img = document.getElementsByClassName("img1");
// console.log(img);
var li = document.getElementsByClassName("changecolor1");
// console.log(li);
// 默认的索引为0;
var index = 0;
// 默认改变的索引也为0;
var changeindex = 0;
var changeindex1 = 0;
// 左侧点击事件
left.onclick = function () {
// 1.0根据索引获取到当前对象
for (var i = 0; i < 8; i++) {
// 当索引等于遍历的值的时候
if (i == index) {
// 原先的索引加1
changeindex = index - 1;
// 这是跟着图片改变下面的圆圈的样式
$(li).eq(changeindex).addClass("changecolor");
$(li).eq(index).removeClass("changecolor");
// 当前索引小于0的时候,要进行改变,将当前索引变成最后一个图片的索引
if (changeindex < 0) {
changeindex = 7;
$("img").eq(index).css("display", "none");
$("img").eq(changeindex).css("display", "block");
}
// 原先样式隐藏
$("img").eq(index).css("display", "none");
// 加1以之后的索引的样式显示
$("img").eq(changeindex).css("display", "block");
}
}
// 将增加后的索引赋值给index,作为后来再次右侧点击事件的时候索引;
index = changeindex;
}
// 右侧点击事件
right.onclick = function () {
// 调用右侧点击事件
move();
}
// 鼠标点击圆圈引发的图片改变逻辑,点击那张图片就到那张图片的
// for (let i = 0; i < li.length; i++) {
// li[i].onclick = function () {
// // 点击当前索引变成i
// index = i;
// // 当前索引对应的图片显示,其他隐藏
// $("img").eq(i).css("display", "block").siblings("img").css("display", "none");
// // 将所有圆圈的样式移除
// $("#ul3 li").removeClass("changecolor");
// // 让点击的圆圈样式显示
// $("#ul3 li").eq(index).addClass("changecolor");
// }
// }
// ie8时点击圆点出现相对的页面则使用这个这段代码
function b(i) {
return function c() {
// 点击当前索引变成i
index = i;
// 当前索引对应的图片显示,其他隐藏
$("img").eq(i).css("display", "block").siblings("img").css("display", "none");
// 将所有圆圈的样式移除
$(li).removeClass("changecolor");
// 让点击的圆圈样式显示
$(li).eq(index).addClass("changecolor");
}
}
for (var i = 0; i < li.length; i++) {
li[i].onclick = b(i);
}
// 封装右侧点击事件
function move() {
// 1.0根据索引获取到当前对象
for (var i = 0; i < 8; i++) {
// 当索引等于遍历的值的时候
if (i == index) {
// 原先的索引加1
changeindex1 = index + 1;
// 原先样式隐藏
// 这是跟着图片改变下面的圆圈的样式
$(li).eq(changeindex1).addClass("changecolor");
$(li).eq(index).removeClass("changecolor");
$("img").eq(index).css("display", "none");
// 加1以之后的索引的样式显示
$("img").eq(changeindex1).css("display", "block");
// 进行判断,如果index超过4的时候,索引要变成0;重新开始
if (changeindex1 > 7) {
$("img").eq(index).css("display", "none");
$("img").eq(changeindex1).css("display", "block");
changeindex1 = 0;
$(li).eq(changeindex1).addClass("changecolor");
}
}
}
// 将增加后的索引赋值给index,作为后来再次右侧点击事件的时候索引;
index = changeindex1;
}
// 定时器,隔几秒就图片变化一次(调用move())
setInterval(function () {
move();
}, 2000);
// IE浏览器上要使用上面这种格式,我去
// setInterval(()=>{
// move();
// },2000);
CSS样式:
第一部分:
#box {
width: 600px;
height: 480px;
/* border: 1px solid #f00; */
text-align: center;
margin: 0 auto;
float: left;
overflow: hidden;
position: relative;
}
/* 图片 */
.lunbo #box ul li img {
float: left;
/* width: 100%; */
/* display: none; */
width: 590px;
height: 480px;
/* padding: 10px 10px 0 10px!important; */
z-index:4;
}
#box ul li img:first-child {
display: block;
}
#littlecircle {
width: 150px;
height: 30px;
line-height: 30px;
/* border: 1px solid #f00; */
position: absolute;
bottom: 10px;
left: 16%;
margin-left: -50px;
}
#littlecircle #ul3 {
overflow: hidden;
width: 150px;
height: 30px;
line-height: 30px;
/* z-index:4; */
}
.ul3 li {
/*这里记住设置的时候不要前面使用id,不然会在修改样式的时候要用到important,不好修改,而且这里在IE8兼容的时候就是因为(#littlecircle #ul li)这样使用的导致在IE8浏览器的时候,后来添加的样式addClass(changecolor)添加样式border-radius添加失效 */
width: 12px;
height: 12px;
cursor: pointer;
border-radius: 50%;
behavior: url(./PIE.htc);
position: relative;
/*支持IE8圆角 不行就加 position:relative;再不行就加z-index: 10 */
/* background: #f00; */
float: left;
border-radius: 50%;
margin-left: 4px;
margin-top: 5px;
overflow: hidden;
border: 3px solid #AEA8B2;
opacity: 1;
text-shadow: 1px 1px #fff;
}
/* 默认的样式 */
.changecolor {
width: 15px !important;
height: 15px !important;
cursor: pointer;
background: #fff;
float: left;
margin-left: 4px;
margin-top: 4px!important;
z-index: 4;
border: 3px solid #E2B5E6 !important;
}
#left {
width: 40px;
height: 70px;
background: url("./img/arrow/arr.png") 0px 0px no-repeat;
position: absolute;
left: 15px;
top: 50%;
margin-top: -35px;
}
#right {
width: 40px;
height: 70px;
background: url("./img/arrow/arr.png") -44px 0px no-repeat;
position: absolute;
right: 415px;
top: 50%;
margin-top: -35px;
}
CSS部分:
第二部分:
@font-face {
font-family: 'iconfont';
src: url('./font/iconfont.eot');
src:
url('./font/iconfont.eot?#iefix') format('embedded-opentype'),
url('./font/iconfont.woff') format('woff'),
url('./font/123456iconfont.ttf') format('truetype'),
url('./font/iconfont.svg#iconfont') format('svg');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
* {
padding: 0;
margin: 0 auto;
list-style: none;
box-sizing: border-box;
}
.app {
width: 100%;
background: #e3e4e5;
}
.top {
width: 100%;
height: 80px;
background: #000;
z-index: 0;
}
.top .top_box {
width: 1190px;
height: 80px;
overflow: hidden;
}
.top_box_box1 {
width: 190px;
height: 78px;
float: left;
}
.top_box_box2 {
width: 1000px;
height: 78px;
float: left;
position: relative;
}
.top_box_box2 i {
position: absolute;
top: 0;
right: 0;
font-size: 20px;
font-weight: 400;
color: #666;
}
.nav {
width: 100%;
height: 30px;
background: #e3e4e5;
position: relative;
z-index: 0;
}
.nav_box {
width: 1190px;
height: 30px;
position: relative;
overflow: hidden;
}
.nav_box_box1 {
width: 258px;
height: 30px;
line-height: 30px;
float: left;
overflow: hidden;
position: relative;
}
.nav_box_box1 i {
display: block;
float: right;
color: #f00;
position: absolute;
right: 32px;
top: 6px;
}
.nav_box_box1 p {
height: 30px;
line-height: 30px;
float: right;
font-size: 12px;
}
.nav_box_box2 {
width: 932px;
height: 30px;
float: right;
}
.nav_box_box2 ul {
padding-left: 224px;
overflow: hidden;
}
.nav_box_box2 ul li:first-child {
width: 148px;
height: 30px;
}
.nav_box_box2 ul li {
width: 80px;
float: left;
font-size: 14px;
line-height: 30px;
text-align: center;
}
.nav_box_box2 ul .sanjiao {
position: relative;
}
.nav_box_box2 ul .sanjiao span {
position: absolute;
bottom: 0;
left: 40px;
width: 0;
height: 0;
border: 5px solid transparent;
border-bottom: 5px solid white;
display: inline-block;
}
.nav_box_box2 ul li i {
color: #999;
margin-top: 2px;
}
.iconfont {
font-size: 14px;
cursor: pointer;
}
.line:after {
content: "";
height: 12px;
width: 1px;
background: #ccc;
display: block;
position: absolute;
top: 10px;
}
.nav_box_box2 ul li a {
text-decoration: none;
font-size: 12px;
color: #999;
}
.hoverchange a:hover {
color: #f00;
}
.nav_box_box2 ul li a:nth-child(2) {
color: #f00;
}
.unshow0 {
width: 1190px;
height: 150px;
position: absolute;
margin: 0 auto;
z-index: 4;
}
.zero {
width: 190px;
height: 170px;
float: left;
position: absolute;
top: -29px;
left: 0;
z-index: 4;
background: #fff;
}
.zero img {
display: block !important;
}
/* 第一隐藏部分样式 */
.firbox {
width: 294px;
height: 150px;
border: 1px solid #f00;
margin-left: 672px;
float: left;
z-index: 4;
background: #fff;
display: none;
overflow: hidden;
}
.firbox_0 {
width: 100%;
height: 100px;
border-bottom: 1px solid #eee;
}
.firbox_1 {
width: 100%;
height: 50px;
}
.firbox_one,
.firbox_two {
width: 50%;
float: left;
height: 100px;
padding-left: 10px;
padding-top: 15px;
}
.firbox_1_box1,
.firbox_1_box2 {
width: 50%;
float: left;
height: 50px;
padding-left: 10px;
}
.firbox_one ul li a {
font-size: 12px;
text-decoration: none;
color: #999;
}
.firbox_one ul li a:hover {
color: #f00;
}
.firbox_two ul li a {
font-size: 12px;
text-decoration: none;
color: #999;
}
.firbox_two ul li a:hover {
color: #f00;
}
.firbox_1_box1 ul li a {
font-size: 12px;
text-decoration: none;
color: #999;
}
.firbox_1_box1 ul li a:hover {
color: #f00;
}
.firbox_1_box2 ul li a {
font-size: 12px;
text-decoration: none;
color: #999;
}
.firbox_1_box2 ul li a:hover {
color: #f00;
}
/* 第二部分隐藏样式 */
.secbox {
width: 156px;
height: 70px;
border: 1px solid #f00;
float: left;
margin-left: 844px;
z-index: 4;
background: #fff;
display: none;
}
.secbox_0 {
width: 100%;
height: 70px;
}
.secbox_one,
.secbox_two {
width: 50%;
float: left;
height: 70px;
padding-left: 10px;
padding-top: 15px;
}
.secbox_one ul li a {
font-size: 12px;
text-decoration: none;
color: #999;
}
.secbox_one ul li a:hover {
color: #f00;
}
.secbox_two ul li a {
font-size: 12px;
text-decoration: none;
color: #999;
}
.secbox_two ul li a:hover {
color: #f00;
}
.thibox {
width: 173px;
height: 240px;
border: 1px solid #f00;
float: left;
margin-left: 844px;
z-index: 4;
background: #fff;
display: none;
}
.thibox .firbox_0 {
height: 130px;
}
.thibox .firbox_0 .firbox_one {
padding-top: 0;
height: 72px;
}
.thibox .firbox_0 .firbox_two {
padding-top: 0;
height: 72px;
}
.thibox .firbox_0 {
padding-top: 15px;
}
.thibox .firbox_0 p {
padding-left: 10px;
}
.thibox .firbox_1 {
height: 110px;
}
.thibox .firbox_1 p {
padding-top: 15px;
padding-left: 10px;
}
.foubox {
width: 1190px;
height: 180px;
float: left;
display: none;
z-index: 4;
margin-left: -1px;
background: #fff;
border: 1px solid #f00;
}
.foubox .linebox {
width: 340px;
float: left;
border-right: 1px solid #eee;
height: 180px;
overflow: hidden;
}
.foubox .linebox1 {
width: 282px;
}
.foubox .foubox_box0 {
width: 100%;
height: 180px;
border: none;
padding-top: 0px;
}
.foubox .foubox_box0 p {
padding-left: 10px;
padding-top: 15px;
}
.foubox .foubox_box {
width: 100%;
float: left;
height: 150px;
padding-left: 10px;
padding-top: 15px;
overflow: hidden;
}
.foubox .foubox_box ul {
width: 25%;
float: left;
padding-right: 10px;
}
.foubox .foubox_box ul li a {
font-size: 12px;
color: #999;
}
.foubox .foubox_box ul li a:hover {
color: #f00;
}
.linebox1 .foubox_box ul {
width: 33.3%;
}
/* 导购部分 */
.content {
width: 1190px;
height: 142px;
z-index: 1;
background: #f0f3ef;
position: relative;
}
.content .search {
width: 550px;
height: 35px;
position: absolute;
top: 20px;
left: 316px;
z-index: 3;
border: none;
}
.content .search input {
width: 500px;
height: 35px;
position: relative;
border: none;
text-indent: 8px;
}
.search_box1 {
width: 500px;
height: 35px;
margin: 0;
float: left;
}
.search .search_box1 .iconfont {
position: absolute;
top: 7px;
right: 61px;
font-size: 22px;
font-weight: 400;
}
.camera:hover {
color: #f00;
}
.search_box2 {
width: 50px;
height: 35px;
border: 1px solid #f00;
float: left;
background: #f00;
position: relative;
}
.search_box2 i {
color: #fff;
position: absolute;
top: 2px;
left: 12px;
font-size: 28px;
}
.content .shopcar {
width: 190px;
height: 35px;
padding-top: 5px;
position: absolute;
top: 20px;
left: 894px;
z-index: 3;
text-align: center;
border: 1px solid #f00;
background: #fff;
}
.content .shopcar i {
color: #f00;
font-size: 18px;
}
.content .shopcar a {
text-decoration: none;
font-size: 12px;
color: #f00;
cursor: pointer;
}
.shopcar .circle {
width: 15px;
height: 15px;
border-radius: 50%;
display: inline-block;
font-size: 12px;
color: #fff;
background: #f00;
position: absolute;
top: 4px;
right: 34px;
}
.content .ewm {
width: 68px;
height: 68px;
line-height: 68px;
position: absolute;
top: 0px;
left: 1122px;
z-index: 3;
text-align: center;
border: 1px solid #ccc;
background: #f0f3ef;
}
.content .ewm img {
width: 60px;
height: 60px;
margin-top: 3px;
display: block !important;
}
.content .inpbottext {
position: absolute;
top: 60px;
left: 316px;
}
.content .inpbottext1 {
position: absolute;
top: 110px;
left: 204px;
}
.content .inpbottext ul {
overflow: hidden;
}
.inpbottext ul li {
width: 62px;
height: 20px;
line-height: 20px;
float: left;
text-align: center;
}
.inpbottext1 ul li {
width: 77px;
height: 20px;
line-height: 20px;
float: left;
text-align: center;
}
.inpbottext ul li:first-child {
width: 68px;
height: 20px;
line-height: 20px;
overflow: hidden;
}
.inpbottext ul li:first-child a {
color: #f00;
}
.inpbottext_a1 {
animation: ani 8s infinite;
}
.inpbottext ul li a {
font-size: 12px;
color: #999;
text-decoration: none;
}
.inpbottext1 ul li a {
font-size: 14px;
color: #333;
text-decoration: none;
}
.inpbottext1 ul li .line:after {
top: 7px;
height: 10px;
}
.inpbottext ul li a:hover {
color: #f00;
}
.inpbottext1 ul li a:hover {
color: #f00;
}
@keyframes ani {
0% {
margin-left: 0px;
}
50% {
margin-left: -68px;
}
100% {
margin-left: 0px;
}
}
/* 正式内容部分 */
.realcontent {
width: 1190px;
height: 480px;
overflow: hidden;
}
.realcontent .asideleft {
width: 190px;
height: 480px;
float: left;
background: #fff;
padding-top: 10px;
}
.realcontent .asideleft li {
overflow: hidden;
width: 190px;
height: 26px;
line-height: 26px;
padding-left: 10px;
}
.realcontent .asideleft li:hover {
background: #d9d9d9;
}
.realcontent .asideleft li a {
color: #626262;
font-size: 14px;
text-decoration: none;
}
.asideleft li a:hover {
color: #f00;
}
.realcontent .asideleft li span {
line-height: 16px;
font-weight: 300;
font-size: 12px;
}
.realcontent .middle {
width: 1000px;
height: 480px;
float: left;
overflow: hidden;
position: relative;
background: #f0f3ef;
}
.middle .mouseoverappera {
width: 1000px;
height: 480px;
display: none;
z-index: 4;
}
.middle .mouseoverappera ul {
overflow: hidden;
}
.middle .mouseoverappera ul li {
width: 1000px;
height: 480px;
float: left;
display: none;
background: #fff;
}
/* 轮播图部分 */
.middle .lunbo {
width: 600px;
height: 480px;
float: left;
}
.lunbo img {
width: 590px;
height: 480px;
padding: 10px 10px 0 10px;
}
.asideright {
width: 400px;
height: 480px;
float: left;
z-index: 0;
background: #f0f3ef;
}
/* asideright右边 */
.right_box1 {
width: 190px;
height: 480px;
float: left;
}
.right_box1 img {
margin-top: 3px;
}
.right_box1 img:first-child {
margin-top: 9px;
}
.right_box2 {
width: 190px;
height: 480px;
float: left;
margin-left: 18px;
margin-top: 9px;
position: relative;
background: #fff;
}
.right_box2_1 {
width: 190px;
height: 150px;
}
.right_box2 .inimg {
width: 60px;
height: 60px;
border-radius: 50%;
position: absolute;
top: -10px;
left: 35%;
text-align: center;
background: #e3e1df;
box-shadow: 3px 6px 25px #c3c3c3;
}
.right_box2 img {
width: 50px;
height: 50px;
border-radius: 50%;
margin-top: 4px;
}
.right_box2_1 {
width: 190px;
height: 90px;
position: absolute;
left: 0;
top: 60px;
text-align: center;
}
.right_box2_1 p {
font-size: 12px;
color: #888;
}
.right_box2_1 span a {
color: #666;
font-size: 12px;
text-decoration: none;
}
.right_box2_1 span a:hover {
color: #f00;
}
.right_box2_1_text {
width: 190px;
height: 52px;
}
.right_box2_1_text button {
width: 70px;
height: 25px;
border: none;
margin-top: 16px;
border-radius: 13px;
box-shadow: 6px 8px 20px rgba(45, 45, 45, .15)
}
.right_box2_1_text .btntxt1 {
background: #fff;
color: #f00;
}
.right_box2_1_text .btntxt1:hover {
color: #fff;
background: #f00;
}
.right_box2_1_text .btntxt2 {
background: #363634;
color: #e5d790;
}
.right_box2_1_text .btntxt2:hover {
color: #fff;
background: #f00;
}
.right_box2_2 {
width: 190px;
height: 130px;
margin-top: 149px;
position: absolute;
top: 0;
left: 0;
z-index: 5;
}
.rtxt {
width: 190px;
height: 26px;
position: relative;
}
.rtxt a {
color: #333;
font-size: 12px;
text-decoration: none;
padding: 0 15px;
}
.rtxt .more {
text-align: right;
padding-left: 30px;
}
.rtxt .line:after {
left: 57px;
top: 7px;
height: 15px;
}
.rtxt .more:hover {
color: #f00;
}
.redline {
width: 30px;
height: 2px;
margin: 0;
margin-left: 12px;
border: 1px solid #f00;
}
.right_box2_2 .list1 {
width: 165px;
height: 96px;
margin-top: 5px;
border-bottom: 1px solid #ccc;
z-index: 5;
}
.right_box2_2 .list2 {
width: 165px;
height: 96px;
margin-top: 5px;
display: none;
position: absolute;
top: 28px;
left: 12px;
border-bottom: 1px solid #ccc;
z-index: 5;
}
.list2 ul li {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.list1 ul li a {
color: #666;
font-size: 12px;
text-decoration: none;
}
.list2 ul li a {
color: #666;
font-size: 12px;
text-decoration: none;
}
.list1 ul li a:hover {
color: #f00;
}
.list2 ul li a:hover {
color: #f00;
}
.right_box2_3 {
width: 190px;
height: 235px;
padding-top: 17px;
position: absolute;
top: 278px;
left: 0;
overflow: hidden;
z-index: 4;
background: #fff;
}
.right_box2_3 ul {
overflow: hidden;
padding-left: 11px;
z-index: 5;
}
.right_box2_3 .right_box2_3_ul li {
width: 42px;
height: 50px;
float: left;
text-align: center;
padding-top: 5px;
position: relative;
margin-bottom: 13px;
}
.right_box2_3 .right_box2_3_ul li a {
color: #bea68d;
font-size: 12px;
text-decoration: none;
}
.right_box2_3 .right_box2_3_ul li span {
font-size: 12px;
height: 14px;
line-height: 14px;
background: #f00;
color: #fff;
position: absolute;
top: 0;
left: 28px;
text-align: center;
}
.icon {
width: 20px;
height: 20px;
}
.icon i {
font-size: 19px;
color: #bea68d;
font-weight: 200;
}
.icon .icon1 {
font-size: 12px;
}
.icon .icon2 {
font-size: 16px;
}
.right_box2_3 .close {
position: absolute;
bottom: 0;
right: 4px;
color: #666;
display: none;
}
.right_box2_3 .changebox {
display: block;
width: 190px;
height: 190px;
margin-left: 0;
position: absolute;
bottom: -190px;
left: 0;
z-index: 999;
background: #fff;
}
.right_box2_3 .changebox1 {
display: none;
}
.right_box2_3 .changebox2 {
display: none;
}
.right_box2_3 .changebox3 {
display: none;
}
.right_box2_3 .changebox1 .changeboxa00 {
width: 65px;
}
.right_box2_3 .changebox1 .changeboxa0 {
width: 50px;
}
.right_box2_3 .changebox {
overflow: hidden;
}
.right_box2_3 .changebox li {
width: 56px;
height: 21px;
float: left;
}
.changebox li a {
color: #666;
font-size: 12px;
text-decoration: none;
}
.changebox li a:hover {
color: #f00;
}
.huafei_1,
.huafei_3,
.huafei_5 {
width: 160px;
height: 133px;
display: none;
}
.huafei_1 {
display: block;
}
.huafei_1 ul {
width: 160px;
height: 133px;
padding-left: 0;
}
.huafei_3 ul {
width: 160px;
height: 133px;
padding-left: 0;
}
.huafei_5 ul {
width: 160px;
height: 133px;
padding-left: 0;
}
.changebox .huafei_1 ul li {
width: 160px;
height: 25px;
line-height: 25px;
}
.changebox .huafei_3 ul li {
width: 160px;
height: 25px;
line-height: 25px;
}
.changebox .huafei_5 ul li {
width: 160px;
height: 25px;
line-height: 25px;
}
.huafei_1 ul li span {
font-size: 12px;
margin-right: 5px;
color: #666;
}
.huafei_3 ul li span {
font-size: 12px;
margin-right: 5px;
color: #666;
}
.huafei_5 ul li span {
font-size: 12px;
margin-right: 5px;
color: #666;
}
.changebox .huafei_1 ul li input {
width: 124px;
height: 20px;
text-indent: 10px;
}
.changebox1 .huafei_1 .lucheng input {
width: 12px;
height: 20px;
line-height: 20px;
font-size: 12px;
text-align: left;
vertical-align: middle;
}
.changebox1 .changeboxa01 {
text-align: center;
}
.changebox1 .huafei_6 {
overflow: hidden;
}
.changebox1 .huafei_5 .huafei_6 li {
width: 75px;
height: 96px;
float: left;
margin-top: 10px;
border: none;
}
.huafei_6 li img {
border-radius: 0;
width: 75px;
height: 96px;
display: block;
margin: 0;
}
.changebox1 .huafei_3 .lucheng input {
width: 12px;
height: 20px;
line-height: 20px;
font-size: 12px;
text-align: left;
vertical-align: middle;
}
.changebox1 .huafei_1 .lucheng span {
display: inline-block;
height: 20px;
padding-bottom: 2px;
}
.changebox1 .huafei_1 .citychange input {
text-indent: 45px;
}
.changebox .huafei_3 ul li input {
width: 124px;
height: 20px;
line-height: 20px;
text-indent: 10px;
}
.changebox .huafei_5 ul li input {
width: 124px;
height: 20px;
font-size: 12px;
text-indent: 10px;
}
.huafei_1 ul li select {
width: 124px;
height: 20px;
line-height: 20px;
}
.huafei_3 ul li select {
width: 59px;
height: 20px;
line-height: 20px;
font-size: 12px;
}
.huafei_5 ul li select {
width: 124px;
height: 20px;
line-height: 20px;
font-size: 12px;
}
.huafei_1 li .huafeiprice {
color: #f00 !important;
}
.huafei_3 li .huafeiprice {
color: #f00 !important;
}
.huafei_5 li .huafeiprice {
color: #f00 !important;
}
.huafei_1 button {
width: 59px;
height: 25px;
line-height: 25px;
border: none;
border-radius: 13px;
color: #fff;
background: #f00;
display: inline-block;
vertical-align: middle;
font-size: 12px;
}
.huafei_3 button {
width: 57px;
height: 25px;
line-height: 25px;
border: none;
border-radius: 13px;
color: #fff;
font-size: 12px;
background: #f00;
display: inline-block;
vertical-align: middle;
}
.huafei_5 button {
width: 60px;
height: 25px;
line-height: 25px;
border: none;
border-radius: 13px;
color: #fff;
background: #f00;
display: inline-block;
font-size: 12px;
vertical-align: middle;
}
.huafei_1 button:hover {
cursor: pointer;
}
.huafei_3 button:hover {
cursor: pointer;
}
.huafei_5 button:hover {
cursor: pointer;
}
.huafei_1 ul li a {
color: #5476db;
}
.huafei_3 ul li a {
color: #5476db;
}
.changeboxa1 {
width: auto;
height: auto;
display: block !important;
}
.changebox2 .huafei_1 .luchneg input {
width: 114px;
}
.changebox2 .huafei_1 .citychange input {
width: 102px;
}
.changebox2 .huafei_6 {
overflow: hidden;
}
.changebox2 .huafei_3 .huafei_6 li {
width: 75px;
height: 96px;
float: left;
margin-top: 10px;
border: none;
}
.changebox2 .huafei_6 li img {
border-radius: 0;
width: 75px;
height: 96px;
display: block;
margin: 0;
}
.changebox3 .huafei_1 ul li {
width: 160px;
}
#lucheng input {
width: 12px;
height: 20px;
line-height: 20px;
font-size: 12px;
text-align: left;
vertical-align: middle;
}
#lucheng1 input {
width: 12px;
height: 20px;
line-height: 20px;
font-size: 12px;
text-align: left;
vertical-align: middle;
}
#lucheng2 input {
width: 12px;
height: 20px;
line-height: 20px;
font-size: 12px;
text-align: left;
vertical-align: middle;
}
//font部分自行到阿里巴巴矢量图官网下载素材使用