HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="temp.css" type="text/css">
<link rel="stylesheet" href="assets/iconfont/iconfont.css">
</head>
<body>
<script>
const photos = (["assets/q.jpg", "assets/cen1.jpg", "assets/cen2.jpg", "assets/cen3.jpg", "assets/cen4.jpg"])
var temp = 0;
const changephotos = () => {
temp++;
var photoChange = document.getElementById("content-cen");
if (temp < photos.length && photoChange != null) {
photoChange.src = photos[temp]
}
if (temp == photos.length && photoChange != null) {
temp = 0;
photoChange.src = photos[temp]
}
console.log("temp:" + temp)
}
var timer;
timer = setInterval(changephotos, 3000)
const stopChange = () => {
clearInterval(timer);
console.log("stopChange")
}
const startChange = () => {
timer = setInterval(changephotos, 3000)
console.log("startChange")
}
const toLeft = () => {
if (temp != 0) {
temp = temp - 2;
} else {
temp = 3;
}
changephotos()
}
const toRight = () => {
changephotos()
}
//页面滚动
window.addEventListener('scroll', function () {
var headerShow = document.getElementById("headertop");
console.log("headertop:" + headerShow.style.top)
if (headerShow != null) {
headerShow.style.top = document.documentElement.scrollTop >= 650 ? '0px' : '-80px';
}
})
//倒计时
const showTime = () => {
var spans = document.getElementsByClassName("time");
var endTime = new Date('2023-7-22 12:00:00').getTime();
var newTime = new Date().getTime();
var diffTime = Math.floor((endTime - newTime) / 1000);
var hour = Math.floor(diffTime / 60 / 60);
var minut = Math.floor(diffTime / 60 % 60);
var second = Math.floor(diffTime % 60);
spans[0].innerHTML = hour;
spans[1].innerHTML = minut;
spans[2].innerHTML = second;
}
setInterval(showTime, 1000);
var showChange = 0;
var outTemp = 0;
const inChange = (showChange) => {
if (outTemp > 0) {
var focusIn1 = document.getElementsByClassName("focusIn")[outTemp - 1];
focusIn1.style.backgroundColor = "#fefefe";
var right_bot = document.getElementsByClassName("right-bot")[outTemp - 1];
right_bot.style.visibility = "hidden";
}
outTemp = showChange;
var focusInT = document.getElementsByClassName("right-tot")[0];
focusInT.style.visibility = "hidden";
console.log("outTemp:" + outTemp)
var focusIn2 = document.getElementsByClassName("focusIn")[showChange - 1];
focusIn2.style.backgroundColor = "#cdc6c6";
var right_bot = document.getElementsByClassName("right-bot")[showChange - 1];
right_bot.style.visibility = "visible";
}
const leaveChange = () => {
var focusIn = document.getElementsByClassName("focusIn");
var focusInB = document.getElementsByClassName("right-bot");
for (let i = 0; i < focusIn.length; i++) {
focusIn[i].style.backgroundColor = "#fefefe";
focusInB[i].style.visibility = "hidden";
}
var focusInT = document.getElementsByClassName("right-tot")[0];
focusInT.style.visibility = "visible";
}
</script>
<div class="total">
<div class="top_1">
<div class="top_1_inner">
<div class="top_inner_left">
<span class="iconfont icon-dingweixiao" style="color:#f10215;margin-right: 5px;"></span>
<span>北京</span>
</div>
<div class="top_inner_right">
<div class="right-1">你好，请登录 免...</div>
<div class="li"></div>
<div class="right-1">我的订单</div>
<div class="li"></div>
<div class="right-1">我的京东</div>
<div class="li"></div>
<div class="right-1">企业采购</div>
<div class="li"></div>
<div class="right-1">商家服务</div>
<div class="li"></div>
<div class="right-1">网站导航</div>
<div class="li"></div>
<div class="right-1">手机京东</div>
<div class="li"></div>
<div class="right-1">网站无障碍</div>
<div></div>
</div>
</div>
</div>
<div id="headertop">
<img src="../assets/jd.png" style="width: 125px;height: 40px;">
<div class="inputTotal">
<input type="text" class="input-t">
<div class="input-b">
<span class="iconfont icon-zhaoxiangji"></span>
</div>
<div class="search">
<span class="iconfont icon-fangdajing" style="color: #ffffff;"></span>
</div>
</div>
<div class="myBuy">
<span class="iconfont icon-gouwuche" style="color: #E1251B;margin-right: 8px;"></span>
<span>我的购物车</span>
</div>
</div>
<div class="header">
<div class="w">
<img src="../assets/d0e4fdc2f126cbf5.png" style="width:190px ;height: 120px;">
<div class="w-right">
<div class="w-right-t">
<div class="w-right-t-1">
<div class="w-right-t-2">
<div class="inputTotal">
<input type="text" class="input-t">
<div class="input-b">
<span class="iconfont icon-zhaoxiangji"></span>
</div>
<div class="search">
<span class="iconfont icon-fangdajing" style="color: #ffffff;"></span>
</div>
</div>
<div class="input-t-t">
<span>装修早知道</span>
<span>免费设计</span>
<span>健康消暑</span>
<span>荣耀上新</span>
<span>OPPO</span>
<span>京东装修</span>
<span>iPhone 14</span>
</div>
</div>
<div class="myBuy">
<span class="iconfont icon-gouwuche" style="color: #E1251B;margin-right: 8px;"></span>
<span>我的购物车</span>
</div>
<img src="">
</div>
</div>
<div class="w-right-b">
<span>京东超市</span>
<span>京东家电</span>
<span>秒杀</span>
<span>京东生鲜</span>
<span>PLUS会员</span>
<span>电脑数码</span>
<span>便宜包邮</span>
<span>拍卖</span>
</div>
</div>
</div>
</div>
<div class="content">
<div class="content-total" onmouseleave="leaveChange()">
<div class="content-left">
<div onmouseenter="inChange(1)" class="focusIn">
<span>家用电器</span>
</div>
<div onmouseenter="inChange(2)" class="focusIn">
<span>手机</span>/
<span>运营商</span>/
<span>数码</span>
</div>
<div>
<span>电脑</span>/
<span>办公</span>
</div>
<div>
<span>家居</span>/
<span>家具</span>/
<span>家装</span>/
<span>厨具</span>
</div>
<div>
<span>男装</span>/
<span>女装</span>/
<span>童装</span>/
<span>内衣</span>
</div>
<div>
<span>美妆</span>/
<span>个人清洁</span>/
<span>宠物</span>
</div>
<div>
<span>女鞋</span>/
<span>箱包</span>/
<span>钟表</span>/
<span>珠宝</span>
</div>
<div>
<span>男鞋</span>/
<span>运动</span>/
<span>户外</span>
</div>
<div>
<span>房产</span>/
<span>汽车</span>/
<span>汽车用品</span>
</div>
<div>
<span>母婴</span>/
<span>玩具乐器</span>
</div>
<div>
<span>食品</span>/
<span>酒类</span>/
<span>生鲜</span>/
<span>特产</span>
</div>
<div>
<span>艺术</span>/
<span>礼品鲜花</span>/
<span>农牧园艺</span>
</div>
<div>
<span>医疗保健</span>/
<span>计生情趣</span>
</div>
<div>
<span>图书</span>/
<span>文娱</span>/
<span>教育</span>/
<span>电子书</span>
</div>
<div>
<span>机票</span>/
<span>酒店</span>/
<span>旅游</span>/
<span>生活</span>
</div>
<div>
<span>支付</span>/
<span>白条</span>/
<span>保险</span>/
<span>企业金融</span>
</div>
<div>
<span>安装</span>/
<span>维修</span>/
<span>清洗</span>/
<span>二手</span>
</div>
<div>
<span>工业品</span>/
<span>元器件</span>
</div>
</div>
<div class="right-tot">
<div class="content-all" onmouseenter="stopChange()" onmouseleave="startChange()">
<img alt="content-cen" id="content-cen" src="assets/q.jpg" style="width: 590px; height: 470px;">
<span id="iconfont-left" class="iconfont icon-iconfontzhizuobiaozhun023126" style="color:#fff"
onclick="toLeft()"></span>
<span id="iconfont-right" class="iconfont icon-jiantouyou" style="color:#fff"
onclick="toRight()"></span>
</div>
<div class="content-right">
<div class="content-right-t">
<div class="content-right-t-t">
<img src="../assets/下载.png" style="height: 40px;width: 40px;border-radius: 20px;">
<div class="HiTotal">
<span>Hi~欢迎逛京东！</span>
<div>
<span>登录</span>|
<span>注册</span>
</div>
</div>
</div>
<div class="content-right-t-b">
<div>新人福利</div>
<div style="color: #e5d790;background-color: #363634;">PLUS会员</div>
</div>
</div>
<div class="content-right-c">
<div class="news-tit">
<span style="font-size: 14px;color: #333;font-weight: 600;">京东快报</span>
<span style="font-size: 12px;">更多</span>
</div>
<div>
<span class="news">热评</span>
<span class="news-b" truncated>解锁男性力量，BECHI萨瓦尔男人</span>
</div>
<div>
<span class="news">热评</span>
<span class="news-b" truncated>0难度苏打小甜品，夏日必学哦!</span>
</div>
<div>
<span class="news">HOT</span>
<span class="news-b" truncated>骑行girl的养生局，不爱喝白开水就爱</span>
</div>
<div>
<span class="news">HOT</span>
<span class="news-b" truncated>做菜我不会，做苏打饮料No.1!</span>
</div>
</div>
<div class="content-right-b">
<div>
<img src="../assets/a1.png">
<span>企业购</span>
</div>
<div>
<img src="../assets/a2.png">
<span>礼品卡</span>
</div>
<div>
<img src="../assets/a3.png">
<span>话费</span>
</div>
<div>
<img src="../assets/a5.png">
<span>白条</span>
</div>
<div>
<img src="../assets/a4.png">
<span>加油卡</span>
</div>
<div>
<img src="../assets/a6.png">
<span>火车票</span>
</div>
<div>
<img src="../assets/a7.png">
<span>游戏</span>
</div>
<div>
<img src="../assets/a8.png">
<span>五金城</span>
</div>
<div>
<img src="../assets/a9.png">
<span>机票</span>
</div>
<div>
<img src="../assets/a10.png">
<span>云建站</span>
</div>
<div>
<img src="../assets/a11.png">
<span>电影票</span>
</div>
<div>
<img src="../assets/a12.png">
<span>酒店</span>
</div>
</div>
</div>
</div>
<div class="right-bot" onmouseleave="leaveChange()">
<div class="focusChange">
<div class="homeTech">
<span>家电馆</span>
<span>开店设备一站购</span>
</div>
<div class="allTech">
<div class="allTech-l">
<span>电视</span>
</div>
<div class="allTech-r">
<span>游戏电视</span>
<span>游戏电视</span>
<span>游戏电视</span>
<span>游戏电视</span>
<span>游戏电视</span>
<span>游戏电视</span>
<span>游戏电视</span>
<span>游戏电视</span>
<span>游戏电视</span>
<span>游戏电视</span>
<span>游戏电视</span>
<span>游戏电视</span>
</div>
</div>
<div class="allTech">
<div class="allTech-l">
<span>空调</span>
</div>
<div class="allTech-r">
<span>新风空调</span>
<span>新一级能效</span>
<span>新风空调</span>
<span>新一级能效</span>
<span>新风空调</span>
<span>新一级能效</span>
<span>新风空调</span>
<span>新一级能效</span>
<span>新风空调</span>
<span>新一级能效</span>
</div>
</div>
<div class="allTech">
<div class="allTech-l">
<span>洗衣机</span>
</div>
<div class="allTech-r">
<span>滚筒洗衣机</span>
<span>烘干一体机</span>
<span>波轮洗衣机</span>
<span>游戏电视</span>
<span>游戏电视</span>
</div>
</div>
<div class="allTech">
<div class="allTech-l">
<span>冰箱</span>
</div>
<div class="allTech-r">
<span>新风空调</span>
<span>新一级能效</span>
<span>新风空调</span>
<span>新一级能效</span>
<span>新风空调</span>
<span>新一级能效</span>
</div>
</div>
<div class="allTech">
<div class="allTech-l">
<span>电视</span>
</div>
<div class="allTech-r">
<span>游戏电视</span>
<span>游戏电视</span>
<span>游戏电视</span>
<span>游戏电视</span>
<span>游戏电视</span>
<span>游戏电视</span>
<span>游戏电视</span>
<span>游戏电视</span>
<span>游戏电视</span>
<span>游戏电视</span>
<span>游戏电视</span>
<span>游戏电视</span>
</div>
</div>
<div class="allTech">
<div class="allTech-l">
<span>空调</span>
</div>
<div class="allTech-r">
<span>新风空调</span>
<span>新一级能效</span>
<span>新风空调</span>
<span>新一级能效</span>
<span>新风空调</span>
<span>新一级能效</span>
<span>新风空调</span>
<span>新一级能效</span>
<span>新风空调</span>
<span>新一级能效</span>
</div>
</div>
<div class="allTech">
<div class="allTech-l">
<span>洗衣机</span>
</div>
<div class="allTech-r">
<span>滚筒洗衣机</span>
<span>烘干一体机</span>
<span>波轮洗衣机</span>
<span>游戏电视</span>
<span>游戏电视</span>
</div>
</div>
<div class="allTech">
<div class="allTech-l">
<span>冰箱</span>
</div>
<div class="allTech-r">
<span>新风空调</span>
<span>新一级能效</span>
<span>新风空调</span>
<span>新一级能效</span>
<span>新风空调</span>
<span>新一级能效</span>
</div>
</div>
</div>
<div class="focusChange-r">
</div>
</div>
<div class="right-bot" onmouseleave="leaveChange()">
<div class="focusChange">
<div class="homeTech">
<span>手机频道</span>
<span>网上营业厅</span>
<span>配件频道</span>
</div>
<div class="allTech">
<div class="allTech-l">
<span>手机通讯</span>
</div>
<div class="allTech-r">
<span>手机</span>
<span>手机游戏</span>
<span>5G手机</span>
<span>拍照手机</span>
<span>全面屏手机</span>
<span>学习手机</span>
<span>对讲机</span>
<span>以旧换新</span>
<span>手机维修</span>
</div>
</div>
<div class="allTech">
<div class="allTech-l">
<span>运营商</span>
</div>
<div class="allTech-r">
<span>合约机</span>
<span>手机卡</span>
<span>宽带</span>
<span>手机费/流量</span>
<span>中国电信</span>
<span>中国移动</span>
<span>中国联通</span>
<span>京东通信</span>
<span>挑靓号</span>
</div>
</div>
<div class="allTech">
<div class="allTech-l">
<span>洗衣机</span>
</div>
<div class="allTech-r">
<span>滚筒洗衣机</span>
<span>烘干一体机</span>
<span>波轮洗衣机</span>
<span>游戏电视</span>
<span>游戏电视</span>
</div>
</div>
<div class="allTech">
<div class="allTech-l">
<span>冰箱</span>
</div>
<div class="allTech-r">
<span>新风空调</span>
<span>新一级能效</span>
<span>新风空调</span>
<span>新一级能效</span>
<span>新风空调</span>
<span>新一级能效</span>
</div>
</div>
<div class="allTech">
<div class="allTech-l">
<span>电视</span>
</div>
<div class="allTech-r">
<span>游戏电视</span>
<span>游戏电视</span>
<span>游戏电视</span>
<span>游戏电视</span>
<span>游戏电视</span>
<span>游戏电视</span>
<span>游戏电视</span>
<span>游戏电视</span>
<span>游戏电视</span>
<span>游戏电视</span>
<span>游戏电视</span>
<span>游戏电视</span>
</div>
</div>
<div class="allTech">
<div class="allTech-l">
<span>空调</span>
</div>
<div class="allTech-r">
<span>新风空调</span>
<span>新一级能效</span>
<span>新风空调</span>
<span>新一级能效</span>
<span>新风空调</span>
<span>新一级能效</span>
<span>新风空调</span>
<span>新一级能效</span>
<span>新风空调</span>
<span>新一级能效</span>
</div>
</div>
<div class="allTech">
<div class="allTech-l">
<span>洗衣机</span>
</div>
<div class="allTech-r">
<span>滚筒洗衣机</span>
<span>烘干一体机</span>
<span>波轮洗衣机</span>
<span>游戏电视</span>
<span>游戏电视</span>
</div>
</div>
<div class="allTech">
<div class="allTech-l">
<span>冰箱</span>
</div>
<div class="allTech-r">
<span>新风空调</span>
<span>新一级能效</span>
<span>新风空调</span>
<span>新一级能效</span>
<span>新风空调</span>
<span>新一级能效</span>
</div>
</div>
</div>
<div class="focusChange-r">
</div>
</div>
</div>
</div>
<div class="line"></div>
<div class="squareTot">
<div class="square">
<div class="square-t">
<div class="square-left">
<div class="square-left-t">京东秒杀</div>
<div class="square-left-b">
<div class="timeOver">
<span style="font-size: 18px;">16:00</span>
<span>点场 距结束</span>
</div>
<div class="lostTime">
<div class="time">0</div>
<div class="maohao">:</div>
<div class="time">0</div>
<div class="maohao">:</div>
<div class="time">0</div>
</div>
</div>
</div>
<div class="square-cen">
<img src="../assets/square2.jpg" style="width: 140px;height: 140px;">
<span style="color: #333;font-weight: normal;" truncated>可心柔V9婴儿柔纸巾宝宝抽纸儿童面巾</span>
<span>99</span>
</div>
<div class="square-cen">
<img src="../assets/square3.jpg" style="width: 140px;height: 140px;">
<span style="color: #333;font-weight: normal;" truncated>柴火大院 有机五常大米 5kg（原粮稻花）</span>
<span>119.9</span>
</div>
<div class="square-cen">
<img src="../assets/square4.jpg" style="width: 140px;height: 140px;">
<span style="color: #333;font-weight: normal;" truncated>海福盛 家常海鲜粥 营养早餐速食粥</span>
<span>99</span>
</div>
<div class="square-right"></div>
</div>
</div>
<div class="floor-tit">
<img src="../assets/sprite-retina2x.png" style="height: 20px;width: 50px;">
<span>频道广场</span>
<img src="../assets/sprite-retina2x.png" style="height: 20px;width: 50px;">
</div>
<div class="floor-tot">
<img src="../assets/floor1.png" style="width: 230px;height: 296px;">
<img src="../assets/floor2.jpg" style="width: 230px;height: 296px;">
<div class="all-right">
<div class="floor-all">
<div class="all-t">
<span class="all-left">家用电器</span>
<span>买家电 上京东</span>
</div>
<div>
<img src="../assets/floor3.jpg" style="height: 75px;width: 75px;">
<img src="../assets/floor4.jpg" style="height: 75px;width: 75px;">
</div>
</div>
<div class="floor-all">
<div class="all-t">
<span class="all-left">京东工品购</span>
<span>PLUS专享福利</span>
</div>
<div>
<img src="../assets/floor5.jpg" style="height: 75px;width: 75px;">
<img src="../assets/floor6.jpg" style="height: 75px;width: 75px;">
</div>
</div>
<div class="floor-all">
<div class="all-t">
<span class="all-left">京东京造</span>
<span>京东自有品牌</span>
</div>
<div>
<img src="../assets/floor7.jpg" style="height: 75px;width: 75px;">
<img src="../assets/floor8.jpg" style="height: 75px;width: 75px;">
</div>
</div>
<div class="floor-all">
<div class="all-t">
<span class="all-left">户外运动</span>
<span>生命在于运动</span>
</div>
<div>
<img src="../assets/floor9.jpg" style="height: 75px;width: 75px;">
<img src="../assets/floor10.jpg" style="height: 75px;width: 75px;">
</div>
</div>
</div>
<div class="floor-all">
<div class="all-t">
<span class="all-left">京东图书</span>
<span>专注优质好书</span>
</div>
<div>
<img src="../assets/floor11.jpg" style="height: 75px;width: 75px;">
<img src="../assets/floor12.jpg" style="height: 75px;width: 75px;">
</div>
</div>
<div class="floor-all">
<div class="all-t">
<span class="all-left">京东五金城</span>
<span>工业品一站式采购</span>
</div>
<div>
<img src="../assets/floor13.jpg" style="height: 75px;width: 75px;">
<img src="../assets/floor14.jpg" style="height: 75px;width: 75px;">
</div>
</div>
<div class="floor-all">
<div class="all-t">
<span class="all-left">大药房</span>
<span>购买正品 免费换新</span>
</div>
<div>
<img src="../assets/floor15.jpg" style="height: 75px;width: 75px;">
<img src="../assets/floor16.jpg" style="height: 75px;width: 75px;">
</div>
</div>
<div class="floor-all">
<div class="all-t">
<span class="all-left">拍拍二手</span>
<span>大牌1元抢</span>
</div>
<div>
<img src="../assets/floor17.jpg" style="height: 75px;width: 75px;">
<img src="../assets/floor18.jpg" style="height: 75px;width: 75px;">
</div>
</div>
</div>
<div class="floor-tit">
<img src="../assets/sprite-retina2x.png" style="height: 20px;width: 50px;">
<span>为你推荐</span>
<img src="../assets/sprite-retina2x.png" style="height: 20px;width: 50px;">
</div>
</div>
</div>
</body>
</html>css
.total {
width: 100vw;
display: flex;
flex-direction: column;
align-items: center;
}
.top_1 {
width: 100%;
height: 30px;
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
background-color: #E3E4E5;
display: flex;
justify-content: center;
}
.top_1_inner {
width: 990px;
height: 30px;
display: flex;
line-height: 30px;
justify-content: space-between;
}
.top_inner_left {
display: flex;
align-items: center;
}
.top_inner_right {
height: 30px;
width: 702.33px;
display: flex;
justify-content: space-between;
}
.right-1 {
height: 30px;
margin-right: 5px;
}
.right-1:hover {
color: #ff0000;
}
.li {
overflow: hidden;
margin: 11px 5px 0;
width: 1px;
height: 10px;
background-color: #ccc;
}
#headertop {
position: fixed;
left: 0;
top: -80px;
width: 100%;
height: 48px;
display: flex;
justify-content: space-evenly;
align-items: center;
border-bottom: 2px solid #e2231a;
background-color: #fff;
}
.htop {
position: fixed;
left: 0;
width: 100%;
height: 48px;
display: flex;
justify-content: space-evenly;
align-items: center;
border-bottom: 2px solid #e2231a;
top: 0px !important;
background-color: #fff;
}
.header {
width: 100%;
height: 140.67px;
display: flex;
justify-content: center;
color: #666666;
}
.w {
width: 990px;
height: 140px;
display: flex;
justify-content: space-between;
align-items: center;
}
.w-right {
width: 787px;
height: 140px;
flex-direction: column;
justify-content: space-between;
}
.w-right-t {
width: 100%;
height: 80px;
display: flex;
}
.w-right-t-1 {
width: 100%;
height: 80px;
display: flex;
align-items: center;
}
.w-right-t-2 {
width: 490px;
height: 80px;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: start;
}
.inputTotal {
width: 490px;
height: 36px;
display: flex;
}
input {
border: 0px;
outline: none;
}
.input-t {
width: 400px;
height: 32px;
border: 2px solid #e2231a;
border-right: 0px;
background: #fff;
line-height: 26px;
font-size: 12px;
}
.input-b {
width: 29.33px;
height: 34px;
border: 2px solid #e2231a;
border-left: 0px;
background: #fff;
line-height: 32px;
display: flex;
align-items: center;
}
.search {
border-radius: 0;
right: 0;
width: 58px;
height: 34px;
line-height: 32px;
border: 2px solid #e2231a;
background-color: #e1251b;
font-size: 20px;
font-weight: 700;
color: #fff;
display: flex;
justify-content: center;
}
.input-t-t {
height: 20px;
width: 450px;
margin-top: 5px;
display: flex;
justify-content: space-between;
}
.input-t-t>span {
white-space: nowrap;
color: #999;
font-size: 12px;
}
.myBuy {
width: 130px;
height: 34px;
margin-left: 20px;
margin-bottom: 6px;
background-color: #fff;
text-align: center;
line-height: 34px;
color: #e1251b;
font-size: 12px;
border: 1px solid #e3e4e5;
border-color: #eee;
}
.w-right-b {
width: 787px;
height: 60px;
line-height: 40px;
padding-top: 20px;
display: flex;
}
.w-right-b>span {
margin: 0px 11px;
height: 40px;
}
.content {
width: 100%;
background-color: #ececec;
display: flex;
flex-direction: column;
align-items: center;
}
.content-total {
width: 990px;
height: 100%;
padding: 0px 16px;
margin-top: 10px;
color: #636363;
display: flex;
position: relative;
justify-content: space-between;
}
.content-all {
width: 590px;
height: 470px;
display: flex;
position: relative;
}
#iconfont-left {
display: flex;
position: absolute;
top: 50%;
z-index: 999;
left: 10px;
}
#iconfont-right {
display: flex;
position: absolute;
top: 50%;
right: 10px;
z-index: 999;
}
.content-left {
width: 190px;
height: 450px;
background-color: #fefefe;
padding: 10px 0px;
display: flex;
font-size: 14px;
flex-direction: column;
justify-content: space-between;
}
.right-tot {
width: 800px;
height: 450px;
display: flex;
font-size: 12px;
justify-content: space-evenly;
visibility: visible;
position: absolute;
top: 0px;
left: 210px;
}
.right-bot {
width: 800px;
height: 470px;
background-color: #fefefe;
display: flex;
font-size: 12px;
box-shadow: 2px 2px 2px #ada6a6, -1px -1px 1px #ada6a6;
visibility: hidden;
position: absolute;
top: 0px;
left: 190px;
}
.focusChange {
width: 570px;
padding: 15px;
height: 440px;
display: flex;
flex-direction: column;
}
.homeTech {
width: 100%;
height: 20px;
margin-bottom: 8px;
display: flex;
}
.homeTech>span {
display: inline-block;
height: 20px;
line-height: 20px;
background-color: black;
padding: 0px 8px;
display: flex;
font-size: 14px;
margin-right: 12px;
color: #fdfcfc;
}
.allTech {
width: 100%;
margin-top: 12px;
display: flex;
}
.allTech-l {
width: 58px;
display: flex;
justify-content: flex-end;
align-items: start;
}
.allTech-l>span {
display: inline-block;
font-weight: 600;
color: black;
}
.allTech-r {
width: 511px;
display: flex;
flex-wrap: wrap;
}
.allTech-r>span {
display: inline-block;
margin-bottom: 8px;
margin-left: 16px;
}
.focusChange-r {
width: 200px;
height: 470px;
display: flex;
flex-direction: column;
}
.content-left>div {
width: 172px;
height: 25px;
line-height: 25px;
padding-left: 18px;
}
.focusIn {
background-color: #fefefe;
}
.content-right {
width: 190px;
height: 470px;
background-color: #fefefe;
display: flex;
align-items: center;
flex-direction: column;
}
.content-right-t {
width: 190px;
height: 102px;
display: flex;
flex-direction: column;
align-items: center;
}
.content-right-t-t {
height: 67px;
width: 144px;
display: flex;
justify-content: center;
align-items: center;
}
.HiTotal {
width: 96px;
height: 40px;
font-size: 12px;
margin-left: 8px;
display: flex;
flex-direction: column;
justify-content: center;
}
.content-right-t-b {
width: 190px;
height: 35px;
display: flex;
justify-content: center;
}
.content-right-t-b>div {
margin: 0 5px;
width: 70px;
height: 25px;
line-height: 25px;
font-size: 12px;
text-align: center;
color: #fff;
border-radius: 13px;
background: #e1251b;
}
.content-right-c {
width: 160px;
height: 130px;
margin: 0px 15px;
font-size: 12px;
display: flex;
flex-direction: column;
align-items: start;
}
.content-right-c>div {
display: flex;
}
.news-tit {
width: 160px;
height: 20px;
padding-top: 10px;
margin-bottom: 8px;
line-height: 20px;
display: flex;
justify-content: space-between;
}
.news {
font-size: 12px;
height: 16px;
width: 35px;
display: inline-block;
line-height: 16px;
text-align: center;
vertical-align: 0;
color: #e1251b;
background-color: rgba(225, 37, 27, .08);
margin-right: 6px;
}
.news-b {
width: 120px;
display: inline-block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.content-right-b {
padding-top: 10px;
height: 225px;
width: 189px;
display: flex;
flex-wrap: wrap;
}
.content-right-b>div {
width: 63px;
height: 55px;
display: flex;
font-size: 12px;
color: #333;
flex-direction: column;
align-items: center;
justify-content: center;
}
.content-right-b>div>img {
width: 28px;
height: 28px;
}
.line {
width: 100%;
height: 30px;
background-color: #ececec;
}
.squareTot {
width: 100%;
background-color: #ececec;
display: flex;
flex-direction: column;
align-items: center;
}
.square {
width: 990px;
display: flex;
flex-direction: column;
align-items: center;
}
.square-t {
width: 990px;
height: 260px;
display: flex;
}
.square-left {
width: 190px;
height: 260px;
background-image: url("../assets/square-left.png");
background-size: 190px 260px;
}
.square-left-t {
width: 100%;
text-align: center;
font-size: 30px;
font-weight: 700;
margin-top: 31px;
color: #fff;
}
.square-left-b {
margin-top: 90px;
width: 100%;
font-size: 14px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.timeOver>span {
display: inline-block;
}
.timeOver {
width: 190px;
height: 26px;
line-height: 26px;
color: #fff
}
.lostTime {
margin-top: 12px;
width: 130px;
height: 30px;
display: flex;
}
.time {
width: 30px;
height: 30px;
text-align: center;
background-color: #2f3430;
color: white;
font-size: 20px;
}
.maohao {
font-weight: bolder;
font-size: 18px;
color: white;
width: 20px;
height: 30px;
}
span:hover {
color: #e1251b;
}
.square-cen {
width: 202.33px;
height: 260px;
font-size: 12px;
background-color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.square-cen>span {
width: 160px;
margin-top: 8px;
text-align: center;
display: inline-block;
overflow: hidden;
color: #e1251b;
font-size: 12px;
font-weight: 700;
white-space: nowrap;
text-overflow: ellipsis;
}
.square-right {
width: 190px;
height: 260px;
background-image: url("../assets/square-right.png");
background-size: 190px 260px;
}
.floor-tit {
width: 990px;
height: 45px;
padding: 20px 0px;
display: flex;
justify-content: center;
align-items: center;
}
.floor-tit>span {
width: 150px;
height: 45px;
font-size: 28px;
font-weight: 700;
text-align: center;
line-height: 45px;
padding: 0 30px;
overflow: hidden;
color: #333;
}
.floor-tot {
width: 1000px;
height: 474px;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.all-right {
width: 480px;
height: 296px;
display: flex;
flex-wrap: wrap;
}
.floor-all {
width: 230px;
height: 138px;
background-color: #fff;
margin-right: 10px;
margin-bottom: 10px;
font-size: 12px;
color: #999;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.floor-tot>img {
margin-right: 10px;
margin-bottom: 10px;
}
.all-left {
font-size: 18px;
font-weight: 700;
margin-right: 5px;
color: #333;
}
.floor-all>div>img {
margin-left: 20px;
}
.all-t {
margin-bottom: 8px;
}assets
小白，不喜勿喷
342
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
