<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>极果</title>
<meta name="description" content="极果全球好物消费推荐平台，新品首发试用、大牌折扣推荐、大神购物心得，1000万潮人的品质生活宝典。" />
<meta name="keywords" content="极果,试用,免费试用,体验,评测,报告,新品,折扣,精选,首发,众筹,jiguo" />
<link rel="icon" href="./image/极果icon.png" />
<link rel="stylesheet" href="./css/base.css" />
<link rel="stylesheet" href="./css/index.css" />
<link rel="stylesheet" href="./icon/iconfont.css">
<script src="./js/jquery-3.4.1.js"></script>
<script src="./js/index.js"></script>
<script src="./icon/iconfont.js"></script>
</head>
<body>
<!-- 头部导航 -->
<div class="header">
<div class="header_wrap wrap">
<div class="header_logo fl">
<a href="index.html">
<img src="./image/logonew.png" alt="" />
</a>
</div>
<div class="header_logo_right fr">
<a href="#">
<img src="./image/jgyp.png" alt="" />
<span>分销伙伴招募中！</span>
</a>
</div>
<div class="header_search fr">
<form>
<input type="text" />
<button class="btn_search">搜索</button>
<div class="btn_classify">全部分类</div>
</form>
</div>
</div>
<nav class="dis_nav">
<div class="nav_more">
<div class="nav_left">
<img src="./image/logonew.png" alt="">
<ul>
<li>
<a href="./index.html">首页</a>
</li>
<li>
<a href="javascript:;">试用</a>
</li>
<li>
<a href="javascript:;">新品</a>
</li>
<li>
<a href="javascript:;">折扣</a>
</li>
<li>
<a href="javascript:;">视频</a>
</li>
<li>
<a href="javascript:;">体验</a>
</li>
<li>
<a href="tiyanshi.html">体验师</a>
</li>
<li>
<a href="javascript:;">APP下载</a>
</li>
</ul>
</div>
<div class="nav_right">
<span>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-sousuoxiao"></use>
</svg>
</span>
<ul class="dlzc">
<li class="dl">登录</li>
<span>|</span>
<li><a href="register.html">注册</a></li>
</ul>
</div>
<div class="APP_code">
<img src="./image/footer-erweima-1-1.jpg" alt="">
<p>扫码下载极果客户端</p>
</div>
</div>
</nav>
<!-- 隐藏的菜单栏 -->
<div class="header_menu">
<div class="menu_wrap wrap clearfix">
<!-- 小箭头 -->
<div class="menu_arrow">
<i></i>
</div>
<!-- 左边菜单栏 -->
<div class="menu_left fl">
<ul>
<li class="left_li active">
<a href="#"> <i></i>数码家电</a>
</li>
<li class="left_li">
<a href="#"><i></i>运动户外</a>
</li>
<li class="left_li">
<a href="#"><i></i>穿戴箱包</a>
</li>
<li class="left_li">
<a href="#"><i></i>家居生活</a>
</li>
<li class="left_li">
<a href="#"><i></i>厨房饮食</a>
</li>
<li class="left_li">
<a href="#"><i></i>个护健康</a>
</li>
<li class="left_li">
<a href="#"><i></i>母婴用品</a>
</li>
<li class="left_li">
<a href="#"><i></i>办公用品</a>
</li>
<li class="left_li">
<a href="#"><i></i>模型酷玩</a>
</li>
<li class="left_li">
<a href="#"><i></i>交通出行</a>
</li>
</ul>
</div>
<!-- 右边菜单栏 -->
<div class="menu_right">
<div class="menu_right_list current">
<div class="right_list_option">
<div class="option_title">
<h6><a href="#">通讯</a></h6>
</div>
<div class="option_content">
<a href="#">手机</a>
<a href="#">手机配件</a>
<a href="#">移动电源</a>
<a href="#">对讲机</a>
</div>
</div>
<div class="right_list_option">
<div class="option_title">
<h6><a href="#">摄影摄像</a></h6>
</div>
<div class="option_content">
<a href="#">数码单反</a>
<a href="#">微单/单电</a>
<a href="#">卡片相机</a>
<a href="#">运动相机</a>
<a href="#">胶片相机</a>
<a href="#">拍立得</a>
<a href="#">创意相机</a>
<a href="#">摄像机</a>
<a href="#">相机支架</a>
<a href="#">相机包</a>
<a href="#">摄影配件</a>
</div>
</div>
<div class="right_list_option">
<div class="option_title">
<h6><a href="#">影音</a></h6>
</div>
<div class="option_content">
<a href="#">便携音箱</a>
<a href="#">底座音箱</a>
<a href="#">组合音箱</a>
<a href="#">耳塞式耳机</a>
<a href="#">头戴式耳机</a>
<a href="#">播放器</a>
<a href="#">投影仪</a>
<a href="#">电视盒子</a>
<a href="#">录音笔</a>
<a href="#">麦克风</a>
<a href="#">其他影音设备</a>
</div>
</div>
<div class="right_list_option">
<div class="option_title">
<h6><a href="#">电脑设备</a></h6>
</div>
<div class="option_content">
<a href="#">笔记本</a>
<a href="#">平板电脑</a>
<a href="#">台式机</a>
<a href="#">显示器</a>
<a href="#">键盘</a>
<a href="#">鼠标</a>
<a href="#">存储</a>
<a href="#">电脑硬件</a>
<a href="#">智能笔</a>
<a href="#">路由器</a>
<a href="#">配件线材</a>
</div>
</div>
<div class="right_list_option">
<div class="option_title">
<h6><a href="#">企业办公</a></h6>
</div>
<div class="option_content">
<a href="#">扫描仪</a>
</div>
</div>
<div class="right_list_option">
<div class="option_title">
<h6><a href="#">游戏机</a></h6>
</div>
<div class="option_content">
<a href="#">游戏主机</a>
<a href="#">体感设备</a>
<a href="#">游戏手柄</a>
<a href="#">游戏配件</a>
</div>
</div>
<div class="right_list_option">
<div class="option_title">
<h6><a href="#">大家电</a></h6>
</div>
<div class="option_content">
<a href="#">电视</a>
<a href="#">冰箱</a>
<a href="#">洗衣机</a>
<a href="#">空调</a>
</div>
</div>
<div class="right_list_option">
<div class="option_title">
<h6><a href="#">生活家电</a></h6>
</div>
<div class="option_content">
<a href="#">空气净化器</a>
<a href="#">电风扇</a>
<a href="#">吸尘器</a>
<a href="#">加湿器</a>
<a href="#">除湿机</a>
<a href="#">取暖器</a>
<a href="#">除螨器</a>
<a href="#">扫地机器人</a>
<a href="#">拖地机器人</a>
<a href="#">熨烫机</a>
</div>
</div>
<div class="right_list_option">
<div class="option_title">
<h6><a href="#">智能穿戴</a></h6>
</div>
<div class="option_content">
<a href="#">智能手表</a>
<a href="#">智能手环</a>
<a href="#">VR/AR眼镜</a>
<a href="#">智能眼镜</a>
<a href="#">智能服装</a>
<a href="#">其他穿戴设备</a>
</div>
</div>
<div class="right_list_option">
<div class="option_title">
<h6><a href="#">智能穿戴</a></h6>
</div>
<div class="option_content">
<a href="#">智能手表</a>
<a href="#">智能手环</a>
<a href="#">VR/AR眼镜</a>
<a href="#">智能眼镜</a>
<a href="#">智能服装</a>
<a href="#">其他穿戴设备</a>
</div>
</div>
</div>
<div class="menu_right_list">
<div class="right_list_option">
<div class="option_title">
<h6><a href="#">跑步</a></h6>
</div>
<div class="option_content">
<a href="#">跑鞋</a>
<a href="#">压缩衣</a>
<a href="#">跑步手表</a>
<a href="#">运动耳机</a>
<a href="#">运动内衣</a>
<a href="#">跑步配件</a>
</div>
</div>
<div class="right_list_option">
<div class="option_title">
<h6><a href="#">登山徒步</a></h6>
</div>
<div class="option_content">
<a href="#">冲锋衣</a>
<a href="#">户外鞋靴</a>
<a href="#">户外背包</a>
<a href="#">户外手表</a>
<a href="#">羽绒服</a>
<a href="#">帐篷</a>
<a href="#">睡袋</a>
<a href="#">灯具</a>
<a href="#">水具</a>
<a href="#">望远镜</a>
<a href="#">刀具/工具</a>
<a href="#">户外炊具</a>
<a href="#">户外餐具</a>
<a href="#">GPS</a>
</div>
</div>
<div class="right_list_option">
<div class="option_title">
<h6><a href="#">骑行</a></h6>
</div>
<div class="option_content">
<a href="#">自行车</a>
<a href="#">头盔</a>
<a href="#">骑行码表</a>
<a href="#">骑行服</a>
<a href="#">骑行眼镜</a>
<a href="#">自行车配件</a>
</div>
</div>
<div class="right_list_option">
<div class="option_title">
<h6><a href="#">滑雪</a></h6>
</div>
<div class="option_content">
<a href="#">滑雪头盔</a>
<a href="#">滑雪服</a>
<a href="#">滑雪眼镜</a>
<a href="#">滑雪板</a>
</div>
</div>
<div class="right_list_option">
<div class="option_title">
<h6><a href="#">游泳</a></h6>
</div>
<div class="option_content">
<a href="#">泳镜</a>
<a href="#">泳衣</a>
<a href="#">泳帽</a>
<a href="#">脚蹼</a>
<a href="#">救生设备</a>
</div>
</div>
<div class="right_list_option">
<div class="option_title">
<h6><a href="#">健身</a></h6>
</div>
<div class="option_content">
<a href="#">跑步机</a>
<a href="#">椭圆机</a>
<a href="#">健身车</a>
<a href="#">瑜伽用品</a>
<a href="#">其他健身器械</a>
</div>
</div>
<div class="right_list_option">
<div class="option_title">
<h6><a href="#">其他运动</a></h6>
</div>
<div class="option_content">
<a href="#">篮球</a>
<a href="#">足球</a>
<a href="#">高尔夫球</a>
<a href="#">网球</a>
<a href="#">羽毛球</a>
<a href="#">潜水</a>
<a href="#">极限运动</a>
<a href="#">其他运动</a>
</div>
</div>
</div>
<div class="menu_right_list">
<div class="right_list_option">
<div class="option_title">
<h6><a href="#">腕表</a></h6>
</div>
<div class="option_content">
<a href="#">机械表</a>
<a href="#">电子表</a>
<a href="#">智能表</a>
</div>
</div>
<div class="right_list_option">
<div class="option_title">
<h6><a href="#">服饰</a></h6>
</div>
<div class="option_content">
<a href="#">时装</a>
<a href="#">围巾</a>
<a href="#">帽子 </a>
<a href="#">袜子</a>
<a href="#">饰品 </a>
<a href="#">太阳伞 </a>
</div>
</div>
<div class="right_list_option">
<div class="option_title">
<h6><a href="#">箱包</a></h6>
</div>
<div class="option_content">
<a href="#">旅行箱</a>
<a href="#">双肩包</a>
<a href="#">单肩包</a>
<a href="#">电脑包</a>
<a href="#">钱包</a>
<a href="#">腰包</a>
<a href="#">证件收纳包</a>
</div>
</div>
<div class="right_list_option">
<div class="option_title">
<h6><a href="#">眼镜</a></h6>
</div>
<div class="option_content">
<a href="#">太阳镜</a>
<a href="#">防辐射镜</a>
<a href="#">近视镜</a>
<a href="#">镜框</a>
</div>
</div>
<div class="right_list_option">
<div class="option_title">
<h6><a href="#">鞋</a></h6>
</div>
<div class="option_content">
<a href="#">休闲鞋</a>
<a href="#">皮鞋</a>
<a href="#">高跟鞋</a>
<a href="#">靴子</a>
<a href="#">凉鞋</a>
</div>
</div>
</div>
<div class="menu_right_list">
<div class="right_list_option">
<div class="option_title">
<h6><a href="#">床上用品</a></h6>
</div>
<div class="option_content">
<a href="#">床垫</a>
<a href="#">枕头</a>
<a href="#">抱枕/靠枕 </a>
<a href="#">床</a>
</div>
</div>
<div class="right_list_option">
<div class="option_title">
<h6><a href="#">卫浴</a></h6>
</div>
<div class="option_content">
<a href="#">毛巾</a>
<a href="#">花洒</a>
<a href="#">浴霸</a>
<a href="#">热水器</a>
<a href="#">马桶</a>
<a href="#">清洁器</a>
</div>
</div>
<div class="right_list_option">
<div class="option_title">
<h6><a href="#">照明</a></h6>
</div>
<div class="option_content">
<a href="#">台灯</a>
<a href="#">灯泡</a>
<a href="#">创意灯具</a>
<a href="#">手电筒</a>
</div>
</div>
<div class="right_list_option">
<div class="option_title">
<h6><a href="#">家具</a></h6>
</div>
<div class="option_content">
<a href="#">桌子</a>
<a href="#">椅子/凳子</a>
<a href="#">沙发</a>
<a href="#">柜橱</a>
<a href="#">书架</a>
<a href="#">装饰摆件</a>
</div>
</div>
<div class="right_list_option">
<div class="option_title">
<h6><a href="#">工具</a></h6>
</div>
<div class="option_content">
<a href="#">手动工具</a>
<a href="#">电动工具</a>
<a href="#">工具箱</a>
</div>
</div>
<div class="right_list_option">
<div class="option_title">
<h6><a href="#">计时</a></h6>
</div>
<div class="option_content">
<a href="#">闹钟</a>
<a href="#">挂钟</a>
<a href="#">座钟</a>
</div>
</div>
<div class="right_list_option">
<div class="option_title">
<h6><a href="#">雨具</a></h6>
</div>
<div class="option_content">
<a href="#">雨伞</a>
<a href="#">雨衣</a>
<a href="#">雨靴</a>
<a href="#">防水器具</a>
</div>
</div>
<div class="right_list_option">
<div class="option_title">
<h6><a href="#">宠物</a></h6>
</div>
<div class="option_content">
<a href="#">宠物出行</a>
<a href="#">宠物饮食</a>
<a href="#">宠物健康</a>
<a href="#">宠物玩具</a>
</div>
</div>
</div>
<div class="menu_right_list">
<div class="right_list_option">
<div class="option_title">
<h6><a href="#">厨房电器</a></h6>
</div>
<div class="option_content">
<a href="#">微波炉</a>
<a href="#">电饭煲 </a>
<a href="#">电炖锅 </a>
<a href="#">电水壶 </a>
<a href="#">豆浆机 </a>
<a href="#">榨汁机 </a>
<a href="#">抽油烟机 </a>
<a href="#">消毒/洗碗机 </a>
<a href="#">电烤箱 </a>
<a href="#">电炸锅 </a>
<a href="#">电饼铛 </a>
<a href="#">净水器 </a>
<a href="#">料理机 </a>
<a href="#">垃圾处理机 </a>
<a href="#">其他厨房电器 </a>
</div>
</div>
<div class="right_list_option">
<div class="option_title">
<h6><a href="#">炊具餐具</a></h6>
</div>
<div class="option_content">
<a href="#">灶具 </a>
<a href="#">锅</a>
<a href="#">刀剪 </a>
<a href="#">盘子碗筷</a>
<a href="#">饭盒</a>
<a href="#">闷烧壶/杯</a>
<a href="#">保鲜盒</a>
<a href="#">烘焙烧烤</a>
<a href="#">小工具</a>
</div>
</div>
<div class="right_list_option">
<div class="option_title">
<h6><a href="#">酒水茶具</a></h6>
</div>
<div class="option_content">
<a href="#">酒具 </a>
<a href="#">茶具 </a>
<a href="#">水杯 </a>
<a href="#">滤水壶 </a>
<a href="#">水壶</a>
<a href="#">保温杯 </a>
<a href="#">饮料机 </a>
<a href="#">咖啡机 </a>
<a href="#">饮水机 </a>
<a href="#">冰淇淋机 </a>
<a href="#">其他 </a>
</div>
</div>
</div>
<div class="menu_right_list">
<div class="right_list_option">
<div class="option_title">
<h6><a href="#">身体护理</a></h6>
</div>
<div class="option_content">
<a href="#">按摩器</a>
<a href="#">按摩椅 </a>
<a href="#">足浴盆 </a>
<a href="#">保健器具 </a>
</div>
</div>
<div class="right_list_option">
<div class="option_title">
<h6><a href="#">炊具餐具</a></h6>
</div>
<div class="option_content">
<a href="#">灶具 </a>
<a href="#">锅</a>
<a href="#">刀剪 </a>
<a href="#">盘子碗筷</a>
<a href="#">饭盒</a>
<a href="#">闷烧壶/杯</a>
<a href="#">保鲜盒</a>
<a href="#">烘焙烧烤</a>
<a href="#">小工具</a>
</div>
</div>
<div class="right_list_option">
<div class="option_title">
<h6><a href="#">睡眠健康</a></h6>
</div>
<div class="option_content">
<a href="#">睡眠监测 </a>
<a href="#">睡眠辅助 </a>
</div>
</div>
</div>
<div class="menu_right_list">
<div class="right_list_option">
<div class="option_title">
<h6><a href="#">口鼻护理</a></h6>
</div>
<div class="option_content">
<a href="#">电动牙刷 </a>
<a href="#">洗牙器 </a>
<a href="#">洗鼻器 </a>
<a href="#">鼻毛修剪器 </a>
<a href="#">口罩 </a>
</div>
</div>
<div class="right_list_option">
<div class="option_title">
<h6><a href="#">面部护理</a></h6>
</div>
<div class="option_content">
<a href="#">剃须刀 </a>
<a href="#">洁面仪 </a>
<a href="#">蒸面器 </a>
<a href="#">美容器</a>
</div>
</div>
<div class="right_list_option">
<div class="option_title">
<h6><a href="#">头发护理</a></h6>
</div>
<div class="option_content">
<a href="#">理发器 </a>
<a href="#">美发器 </a>
<a href="#">电吹风 </a>
<a href="#">脱毛器 </a>
<a href="#">梳子</a>
</div>
</div>
</div>
<div class="menu_right_list">
<div class="right_list_option">
<div class="option_title">
<h6><a href="#">口鼻护理</a></h6>
</div>
<div class="option_content">
<a href="#">电动牙刷 </a>
<a href="#">洗牙器 </a>
<a href="#">洗鼻器 </a>
<a href="#">鼻毛修剪器 </a>
<a href="#">口罩 </a>
</div>
</div>
<div class="right_list_option">
<div class="option_title">
<h6><a href="#">面部护理</a></h6>
</div>
<div class="option_content">
<a href="#">剃须刀 </a>
<a href="#">洁面仪 </a>
<a href="#">蒸面器 </a>
<a href="#">美容器</a>
</div>
</div>
<div class="right_list_option">
<div class="option_title">
<h6><a href="#">头发护理</a></h6>
</div>
<div class="option_content">
<a href="#">理发器 </a>
<a href="#">美发器 </a>
<a href="#">电吹风 </a>
<a href="#">脱毛器 </a>
<a href="#">梳子</a>
</div>
</div>
</div>
<div class="menu_right_list">
<div class="right_list_option">
<div class="option_title">
<h6><a href="#">口鼻护理</a></h6>
</div>
<div class="option_content">
<a href="#">电动牙刷 </a>
<a href="#">洗牙器 </a>
<a href="#">洗鼻器 </a>
<a href="#">鼻毛修剪器 </a>
<a href="#">口罩 </a>
</div>
</div>
<div class="right_list_option">
<div class="option_title">
<h6><a href="#">面部护理</a></h6>
</div>
<div class="option_content">
<a href="#">剃须刀 </a>
<a href="#">洁面仪 </a>
<a href="#">蒸面器 </a>
<a href="#">美容器</a>
</div>
</div>
<div class="right_list_option">
<div class="option_title">
<h6><a href="#">头发护理</a></h6>
</div>
<div class="option_content">
<a href="#">理发器 </a>
<a href="#">美发器 </a>
<a href="#">电吹风 </a>
<a href="#">脱毛器 </a>
<a href="#">梳子</a>
</div>
</div>
</div>
<div class="menu_right_list">
<div class="right_list_option">
<div class="option_title">
<h6><a href="#">口鼻护理</a></h6>
</div>
<div class="option_content">
<a href="#">电动牙刷 </a>
<a href="#">洗牙器 </a>
<a href="#">洗鼻器 </a>
<a href="#">鼻毛修剪器 </a>
<a href="#">口罩 </a>
</div>
</div>
<div class="right_list_option">
<div class="option_title">
<h6><a href="#">面部护理</a></h6>
</div>
<div class="option_content">
<a href="#">剃须刀 </a>
<a href="#">洁面仪 </a>
<a href="#">蒸面器 </a>
<a href="#">美容器</a>
</div>
</div>
<div class="right_list_option">
<div class="option_title">
<h6><a href="#">头发护理</a></h6>
</div>
<div class="option_content">
<a href="#">理发器 </a>
<a href="#">美发器 </a>
<a href="#">电吹风 </a>
<a href="#">脱毛器 </a>
<a href="#">梳子</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 下面的列表导航 -->
<div class="header_nav">
<div class="nav_wrap wrap">
<div class="nav_menu fl">
<ul class="clearfix">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">试用</a></li>
<li><a href="#">新品</a></li>
<li><a href="#">资讯</a></li>
<li><a href="#">折扣</a></li>
<li><a href="#">视频</a></li>
<li><a href="#">体验</a></li>
<li><a href="tiyanshi.html">体验师</a></li>
<li class="APP">
<a href="#">APP下载</a>
<div class="clock">
<div class="code">
<img src="./image/ul_code.jpg" alt="" />
<div class="code_font">扫码下载极果客户端</div>
</div>
</div>
</li>
</ul>
</div>
<div class="nav_login fr">
<ul class="clearfix login">
<li><a href="#" class="dl1">登录</a></li>
<span>|</span>
<li><a href="register.html">注册</a></li>
</ul>
<ul class="clearfix user">
<li><a href="#" class="info">消息</a></li>
<span>|</span>
<li><a href="#" class="username"></a></li>
<div class="user-face">
<div class="header-user-down">
<div class="header-user-down-r">
<i class="icon-header-arrow"></i>
</div>
<dl class="header-user-down-list">
<dd><a href="#">撰写报告</a></dd>
<dd><a href="#">原创投稿</a></dd>
<dd><a href="#">优惠券</a></dd>
<dd><a href="#">我的试用</a></dd>
<dd><a href="#">我的文章</a></dd>
<dd><a href="#">个人设置</a></dd>
<dd><a href="#" class="exit">退出</a></dd>
</dl>
<div class="over"></div>
</div>
</div>
</ul>
</div>
</div>
</div>
<!-- 轮播图 -->
<div class="banner">
<div class="pic clearfix">
<img src="image/original (1).jpg" alt="" class="active" />
<img src="image/swiper2.jpg" alt="" />
<img src="image/swiper3.jpg" alt="" />
<img src="image/swiper4.jpg" alt="" />
</div>
<ul>
<li class="current"></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="left">
<img src="image/prev.png" alt="" />
</div>
<div class="right">
<img src="image/next.png" alt="" />
</div>
</div>
</div>
<!-- 热门试用 -->
<div class="hot">
<div class="wrap">
<div class="hot_wrap">
<div class="hot_title fl">
<a href="#">热门试用</a>
</div>
<div class="hot_news fr">
<ul class="Oul">
<li>
<a href="#">
<i></i>
<b>免费试用 </b>
中尉 抢到1台 讯飞双屏翻译机
</a>
</li>
<li>
<a href="#">
<i></i>
<b>免费试用 </b>
HenixS... 抢到1台 元萝卜AI下棋机器人
</a>
</li>
<li>
<a href="#">
<i></i>
<b>免费试用 </b>
扇子 抢到1台 碧云泉RT507 净水机萃取一体机
</a>
</li>
<li>
<a href="#">
<i></i>
<b>免费试用 </b>
Eurnd 抢到1台 西屋空气炸烤箱
</a>
</li>
<li>
<a href="#">
<i></i>
<b>免费试用 </b>
Max 抢到1条 碳纳米管智暖毯
</a>
</li>
</ul>
</div>
</div>
<div class="hot_box">
<div class="hot_list">
<ul class="clearfix data_list"></ul>
<div class="more">
<div class="more-shadow"></div>
<a href="javastript:;" class="hot_more">
<div class="hot_text">
<span>展开更多</span>
<img src="./image/down.png" alt="" />
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- 潮玩实验室 -->
<div class="hyperplay clearfix">
<div class="wrap">
<div class="hyperplay_title">
<a href="#">潮玩实验室</a>
<div class="hp_more fr">
<a href="#">
更多
<i></i>
</a>
</div>
</div>
<div class="hp_box">
<ul>
<div class="hp_list_div fl">
<div class="carousel">
<a href="#">
<img src="./image/640.jpg" alt="" />
<p>
暴走级笔记本效能试炼｜魔音环绕、极限暗光、内存拉爆三连后，谁封神了？
</p>
</a>
</div>
<div class="video2x">
<i></i>
</div>
</div>
<li>
<a href="#">
<img src="./image/640.png" alt="" />
<div class="video">
<i></i>
</div>
<p>极果首测：Leader美妆冰箱实现三大突破</p>
</a>
</li>
<li>
<a href="#">
<img src="./image/640 (1).jpg" alt="" />
<div class="video">
<i></i>
</div>
<p>华为“书房三宝”，带你解锁全家人的“梦中情桌”</p>
</a>
</li>
<li>
<a href="#">
<img src="./image/640 (2).jpg" alt="" />
<div class="video">
<i></i>
</div>
<p>"一平米"解锁家庭快乐 华为书房三宝</p>
</a>
</li>
<li>
<a href="#">
<img src="./image/640 (3).jpg" alt="" />
<div class="video">
<i></i>
</div>
<p>两大画质“顶流”脑洞PK</p>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- 极果研究室 -->
<div class="research clearfix">
<div class="wrap clearfix">
<div class="lab fl">
<div class="research_title">
<a href="#">极果研究室
<div class="research_more fr">
<a href="#">
更多
<i></i>
</a>
</a>
</div>
</div>
<ul class="research_list clearfix"></ul>
</div>
<div class="dev fr">
<div class="dev_title">
<a href="#"> 开箱测评
<div class="dev_more fr">
<a href="#">
更多
<i></i>
</a>
</a>
</div>
</div>
<ul class="dev_list">
<li class="curr">
<a href="#">
<img src="./image/640(4).jpg" alt="" />
<p>既有质感又有性能，一加Ace 2到底有多卷？</p>
<div class="mask">
<div class="video2x">
<i class="icon-video2x"></i>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img src="./image/640(5).jpg" alt="" />
<p>游戏手机秒变掌机还能玩大作？红魔8 Pro+上手体验</p>
<div class="mask">
<div class="video2x">
<i class="icon-video2x"></i>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img src="./image/640(6).jpg" alt="" />
<p>电竞手机终结者体验如何？Redmi红米K60Pro上手</p>
<div class="mask">
<div class="video2x">
<i class="icon-video2x"></i>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img src="./image/640(7).jpg" alt="" />
<p>流浪地球2里的多功能运输机器狗笨笨有多好玩？</p>
<div class="mask">
<div class="video2x">
<i class="icon-video2x"></i>
</div>
</div>
</a>
</li>
<div class="pointer clearfix">
<span class="on"></span>
<span class=""></span>
<span class=""></span>
<span class=""></span>
</div>
</ul>
</div>
</div>
</div>
<!-- 体验师内容 -->
<div class="experiencer">
<div class="wrap clearfix">
<div class="vip fl">
<div class="vip_title">
<a href="javascript:;">体验师内容精选</a>
<div class="vip_more fr">
<a href="#">更多 <i class="icon icon-arrow-right"></i></a>
</div>
</div>
<ul class="vip_list clearfix">
<li>
<a href="#">
<img src="./image/640(8).jpg" alt="" />
<p>史上ZUI萌评测？带你感受联想ThinkPad这块抗造天花板｜视频</p>
<div class="bottom">
<span class="fl">
<span class="avatar"><img src="./image/230(1).jpg" alt="" /></span>
<span class="username">大鱼吃小鱼</span>
</span>
<span class="vip_time fr">02-02</span>
</div>
</a>
</li>
<li>
<a href="#">
<img src="./image/640(9).jpg" alt="" />
<p>哈啰摩友春节自驾游指南｜骑旅S325高光时刻回顾</p>
<div class="bottom">
<span class="fl">
<span class="avatar"><img src="./image/230(2).jpg" alt="" /></span>
<span class="username">Giraffe</span>
</span>
<span class="vip_time fr">01-19</span>
</div>
</a>
</li>
<li>
<a href="#">
<img src="./image/640(10).jpg" alt="" />
<p>史上ZUI萌评测？带你感受联想ThinkPad这块抗造天花板</p>
<div class="bottom">
<span class="fl">
<span class="avatar"><img src="./image/230(3).jpg" alt="" /></span>
<span class="username">勤添Jacky</span>
</span>
<span class="vip_time fr">01-12</span>
</div>
</a>
</li>
<li>
<a href="#">
<img src="./image/640(11).jpg" alt="" />
<p>摄影师的宅家解放日志：健身看剧K歌一条龙，家庭轰趴馆开业！</p>
<div class="bottom">
<span class="fl">
<span class="avatar"><img src="./image/230(4).jpg" alt="" /></span>
<span class="username">大鱼吃小鱼</span>
</span>
<span class="vip_time fr">02-02</span>
</div>
</a>
</li>
</ul>
</div>
<div class="master fr">
<div class="master_title">
<a href="javascript:;">近期达人榜</a>
<div class=" master_more fr">
<a href="#">
更多
<i></i>
</a>
</div>
</div>
<ul class="master_list">
</ul>
</div>
</div>
</div>
<!-- 潮流推荐 -->
<div class="tidal">
<div class="wrap">
<div class="tidal_title clearfix ">
<a href="#" class="fl"> 潮流推荐
</a>
<div class="special-wrap fr clearfix">
<div class="fl">
<i class="special-icon"></i>
<i class="special-icon-text"></i>
</div>
<span class="dot"></span>
<ul class="special-list fl">
<li>
<a href="#">
<img src="image/halo.png" alt="">
</a>
</li>
<li>
<a href="#">
<img src="image/jd_year.png" alt="">
</a>
</li>
<li>
<a href="#">
<img src="image/icon-pingxuan2022.png" alt="">
</a>
</li>
<li>
<a href="#">
<img src="image/tlplay.gif" alt="">
</a>
</li>
</ul>
</div>
</div>
<div class="tidal_box">
<ul class="tidal_list clearfix">
</ul>
</div>
<div class="page-box clearfix">
<ul class="clearfix">
<li><a href="#" class="active">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="javascript:;">...</a></li>
<li><a href="#">下一页</a></li>
<li><a href="#">末页</a></li>
</ul>
</div>
</div>
</div>
<!-- 底部 -->
<iframe src="footer.html" width="100%" height="318px" frameborder="no" marginwidth="0" marginheight="0" scrolling="no"></iframe>
<!-- 固定导航 -->
<div class="fixed">
<a href="#">
<div class="fixed_list">
<i class="tel"></i>
<div class="list_text iphone">
<p class="ip">400-001-9217</p>
<p class="time">周一到周五 10:00-19:00</p>
</div>
</div>
</a>
<a href="#">
<div class="fixed_list">
<i class="wx"></i>
<div class="list_text weixin">
<img src="./image/jiguopp.png" alt="">
<p class="list_wx">极果平平微信：jiguopp</p>
</div>
</div>
</a>
<a href="#">
<div class="fixed_list">
<i class="yijian"></i>
</div>
</a>
<a href="javascript:;">
<div class="fixed_list">
<i class="back" ></i>
</div>
</a>
</div>
<!-- 登陆 -->
<div id="panel"></div>
<div id="login">
<ul>
<li>
<p>极果账号登录</p>
<div class="phoneNumber">
<input type="text" id="phone" maxlength="11" placeholder="手机号" required>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shouji"></use>
</svg>
</div>
<div class="password">
<input type="text" id="pass" placeholder="密码" required>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-mima"></use>
</svg>
</div>
<footer>
<input type="checkbox">
<span>下次自动登录</span>
<button id="login_dlBtn">登录</button>
</footer>
<small>
<em>注册新账号</em>
<em>忘记密码？</em>
</small>
</li>
<li>
<p>社交网络账号登录</p>
<div class="dl_code">
<img src="./image/微信二维码.png" alt="">
</div>
<div class="dl_more">
<div class="way">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-weibo"></use>
</svg>
<span class="weibo" style="margin-right:20px">微博</span>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-qq-copy-copy"></use>
</svg>
<span class="weibo">QQ</span>
</div>
</div>
</li>
<svg class="icon dl_down" aria-hidden="true">
<use xlink:href="#icon-guanbi"></use>
</svg>
</ul>
</div>
</body>
</html>less样式部分
.icon {
width: 14px;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
.header {
.header_wrap {
overflow: hidden;
.header_logo {
width: 180px;
margin: 15px 0;
a {
display: block;
height: 50px;
img {
height: 50px;
}
}
}
.header_search {
position: relative;
margin-top: 20px;
padding-right: 20px;
input {
width: 410px;
height: 35px;
outline: none;
border: 1px solid #fc584e;
box-sizing: border-box;
padding-left: 10px;
}
.btn_search {
position: absolute;
left: 320px;
width: 90px;
height: 35px;
background-color: #fc584e;
border: none;
color: #fff;
line-height: 35px;
cursor: pointer;
}
.btn_classify {
display: inline-block;
width: 80px;
height: 35px;
border: 1px solid #fc584e;
background: none;
color: #fc584e;
margin-left: 10px;
line-height: 35px;
text-align: center;
cursor: pointer;
vertical-align: bottom;
box-sizing: border-box;
font-size: 14px;
}
}
.header_logo_right {
position: relative;
margin: 12px 50px 0 0;
img {
width: 200px;
height: 50px;
}
span {
display: block;
width: 110px;
position: absolute;
top: 18px;
left: 102px;
font-size: 12px;
color: #827523;
}
}
}
nav {
width: 100%;
height: 60px;
background-color: #fff;
box-sizing: border-box;
border-bottom: 1px solid #eee;
position: fixed;
top: -75px;
z-index: 999;
transition: all 0.5s;
.nav_more {
width: 1346px;
display: flex;
justify-content: space-between;
margin: auto;
position: relative;
.nav_left {
width: 1046px;
height: 60px;
display: flex;
justify-content: space-between;
img {
width: 100px;
height: 40px;
margin-top: 10px;
cursor: pointer;
}
ul {
width: 700px;
display: flex;
justify-content: space-between;
margin-right: 165px;
li {
width: 80px;
line-height: 60px;
text-align: center;
cursor: pointer;
a {
display: block;
width: 80px;
height: 60px;
color: #000;
}
}
li a:hover {
color: #fc584e;
}
}
}
.nav_right {
width: 300px;
height: 60px;
span {
width: 30px;
height: 30px;
line-height: 30px;
margin-top: 15px;
text-align: center;
font-size: 14px;
float: left;
cursor: pointer;
}
span:nth-child(1) {
margin: 16px 0 0 40px;
}
ul {
width: 100px;
height: 60px;
line-height: 60px;
margin-left: 80px;
display: flex;
justify-content: space-between;
li {
cursor: pointer;
a {
color: #000;
}
}
}
}
// 下载APP二维码
.APP_code {
width: 215px;
height: 230px;
background-color: #fff;
position: absolute;
left: 740px;
top: 60px;
text-align: center;
box-shadow: 0 2px 5px rgb(0 0 0 / 20%);
display: none;
img {
width: 165px;
height: 165px;
margin-top: 20px;
}
p {
margin-top: 10px;
color: #b2b2b2;
font-size: 14px;
}
}
}
}
.header_menu {
border: 1px solid #fc584e;
background-color: #f5f5f5;
display: none;
border-bottom: none;
box-shadow: 2px 2px 2px #888888;
position: absolute;
width: 100%;
z-index: 1;
.menu_wrap {
z-index: 1;
position: relative;
.menu_arrow {
z-index: 1;
left: 760px;
top: -20px;
position: absolute;
border-width: 10px;
border-style: solid;
border-color: transparent;
border-bottom-color: #fc584e;
i {
z-index: 1;
left: -10px;
top: -9px;
position: absolute;
border-width: 10px;
border-style: solid;
border-color: transparent;
border-bottom-color: #ffffff;
}
}
.menu_left {
width: 130px;
line-height: 50px;
padding: 20px 0;
font-size: 14px;
box-sizing: border-box;
text-align: center;
li {
position: relative;
a {
display: block;
color: #b2b2b2;
i {
position: absolute;
display: none;
width: 2px;
height: 30px;
right: 0px;
top: 12px;
background-color: #fc584e;
}
}
&.active a {
color: #fc584e;
}
&.active i {
display: block;
}
}
}
.menu_right {
background-color: #fff;
padding: 20px 0 0 50px;
box-sizing: border-box;
margin-left: 130px;
.menu_right_list {
display: none;
&.current {
display: block;
}
}
.right_list_option {
display: inline-block;
margin-right: 50px;
width: 245px;
vertical-align: top;
margin-bottom: 50px;
.option_title a {
display: block;
font-size: 14px;
color: #4a4a4a;
}
.option_content {
margin-top: 5px;
line-height: 24px;
font-size: 13px;
a {
color: #808080;
display: inline-block;
width: 78px;
&:hover {
color: #fc584e;
}
}
}
}
}
}
}
.header_nav {
background-color: #fff;
height: 34px;
border-bottom: 1px solid #fc584e;
border-top: 1px solid #f5f5f5;
line-height: 34px;
z-index: 99;
li {
a {
color: #000;
&:hover {
color: #fc584e;
}
}
}
.nav_wrap {
li {
&.active a {
background-color: #fc584e;
color: #fff;
}
.clock {
position: absolute;
width: 160px;
height: 180px;
background-color: #fff;
padding: 20px;
display: none;
top: 115px;
z-index: 1;
.code img {
width: 100%;
}
.code_font {
font-size: 14px;
text-align: center;
color: #808080;
margin-top: -10px;
}
}
}
.nav_menu li {
width: 90px;
float: left;
font-size: 14px;
line-height: 35px;
a {
display: block;
text-align: center;
}
}
.nav_login li {
float: left;
font-size: 14px;
width: 40px;
line-height: 35px;
a {
display: block;
text-align: center;
}
}
.nav_login span {
float: left;
color: #e5e5e5;
}
.nav_login .user {
position: relative;
display: none;
.user-face {
display: none;
background: #fff;
position: absolute;
width: 150px;
line-height: 50px;
z-index: 2;
left: 3px;
box-shadow: 0 15px 30px rgb(0 0 0 / 20%);
border: 1px solid #f2f2f2;
top: 45px;
border-radius: 10px;
padding: 7px;
box-sizing: border-box;
.header-user-down {
line-height: 40px;
.header-user-down-r {
position: absolute;
top: -21px;
width: 0;
height: 0;
display: block;
border: 10px solid transparent;
border-bottom-color: #efefef;
left: 50%;
margin-left: -15px;
i {
position: absolute;
top: -10px;
border: 10px solid transparent;
border-bottom-color: #efefef;
left: 5px;
margin-left: -15px;
}
}
.header-user-down-list {
margin: 0 15px;
line-height: 50px;
dd {
border-bottom: 1px solid #f5f5f5;
position: relative;
text-align: left;
a {
font-size: 14px;
color: #595959;
&:hover {
color: #f66039;
}
}
}
}
.over {
position: absolute;
top: -20px;
width: 100%;
background: transparent;
z-index: 1;
height: 20px;
}
}
}
}
}
}
.banner {
width: 100%;
height: 322px;
overflow: hidden;
position: relative;
.pic img {
float: left;
width: 100%;
height: 322px;
display: none;
&.active {
display: block;
}
}
ul {
display: flex;
list-style: none;
width: 3%;
justify-content: space-between;
position: absolute;
left: 48%;
bottom: 5%;
li {
width: 7px;
height: 7px;
text-align: center;
border-radius: 50px;
background-color: #ccc;
color: aliceblue;
cursor: pointer;
&.current {
background-color: #fff;
}
}
}
.left {
position: absolute;
top: 38%;
width: 50px;
height: 80px;
line-height: 80px;
text-align: center;
background-color: rgba(0, 0, 0, 0.2);
cursor: pointer;
img {
width: 10px;
}
}
.right {
.left;
right: 0;
}
}
}
.hot {
background-color: #fff;
padding-bottom: 20px;
padding-top: 20px;
.hot_wrap {
height: 40px;
border-bottom: 1px solid #ededed;
margin: 0;
.hot_title {
a {
display: block;
width: 100px;
height: 40px;
font-size: 25px;
line-height: 40px;
font-weight: bold;
color: #000;
}
}
.hot_news {
height: 40px;
width: 330px;
overflow: hidden;
line-height: 40px;
font-size: 12px;
text-align: right;
ul {
height: 400px;
position: relative;
padding: 0px;
margin: 0px;
top: 0px;
li {
a {
color: #999;
i {
display: inline-block;
width: 9px;
height: 13px;
background: url(../image/notice.png) no-repeat center center;
-moz-background-size: 9px 13px;
background-size: 9px 13px;
vertical-align: middle;
position: relative;
top: -1px;
margin-right: 5px;
}
b {
color: #666;
font-weight: bold;
}
}
}
}
}
}
.hot_box {
border-top: none;
position: relative;
background-color: #fff;
height: 425px;
overflow: hidden;
.hot_list {
padding: 12px 12px 15px;
background: #fff;
ul {
width: 110%;
li {
width: 246px;
float: left;
cursor: pointer;
border: 1px solid #f0f0f0;
overflow: hidden;
margin: 0 26px 12px 0;
.sroll-cell {
height: 260px;
.hot_img {
position: relative;
img {
width: 246px;
height: 138px;
display: block;
}
span {
position: absolute;
left: 10px;
top: 10px;
border-radius: 15px;
color: #fff;
line-height: 18px;
padding: 1px 8px 0 8px;
background-color: #fe584d;
box-sizing: border-box;
font-size: 12px;
}
}
}
.hot_desc {
position: relative;
overflow: hidden;
transition: all 1s;
.hover_box {
padding: 12px 12px 15px;
width: 222px;
background: #fff;
border-top: none;
border-radius: 0 0 5px 5px;
.hot_details {
p {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #4c4c4c;
height: 20px;
margin-bottom: 14px;
line-height: 20px;
}
.tag_list {
height: 18px;
line-height: 20px;
padding: 0 6px;
display: inline-block;
vertical-align: middle;
border-radius: 18px;
font-size: 12px;
border: 1px solid #55468c;
color: #fe6541;
border-color: #fe6541;
margin-bottom: 14px;
}
}
.number {
span {
color: #4c4c4c;
font-size: 12px;
font {
font-size: 16px;
color: #fe584d;
}
}
}
.list_buy {
height: 32px;
padding-top: 10px;
margin-top: 21px;
border-top: 1px solid #f0f0f0;
color: #b2b2b2;
font-size: 12px;
}
}
}
&:hover .hot_desc {
transform: translateY(-60px);
}
}
}
.more {
width: 100%;
position: absolute;
bottom: 0;
z-index: 5;
.more-shadow {
height: 20px;
background: -webkit-gradient(
linear,
0 0,
0 bottom,
from(rgba(255, 255, 255, 0)),
to(#ffffff)
);
}
.hot_more {
width: 100%;
display: block;
text-align: center;
background: #fff;
line-height: 30px;
color: #3f3f3f;
padding-top: 10px;
.hot_text {
span {
font-size: 14px;
}
img {
display: block;
width: 15px;
height: 8px;
margin: 0 auto;
}
}
}
}
}
}
}
.hyperplay {
background-color: #fff;
padding-top: 20px;
.hyperplay_title {
line-height: 40px;
border-bottom: 1px solid #ededed;
a {
font-size: 22px;
color: #2c2c2c;
font-weight: bold;
}
.hp_more {
a {
font-size: 14px;
color: #808080;
}
i {
position: relative;
top: 3px;
display: inline-block;
width: 16px;
height: 16px;
background: url(../image/index-icon-arrow-right.png) no-repeat center
center / 8px 14px;
}
}
}
.hp_box {
ul {
width: 105%;
margin-top: 20px;
.hp_list_div {
position: relative;
width: 601px;
margin-right: 23px;
margin-bottom: 16px;
border-radius: 5px;
overflow: hidden;
.carousel {
a {
img {
width: 600px;
height: 340px;
vertical-align: middle;
}
p {
font-size: 16px;
font-weight: bold;
margin-top: 4px;
color: #2c2c2c;
}
}
}
.video2x {
width: 40px;
height: 40px;
position: absolute;
bottom: 10px;
top: 280px;
left: 20px;
i {
display: block;
width: 40px;
height: 40px;
background: url(../image/bofang2x.png);
background-size: 100% 100%;
}
}
}
li {
width: 216px;
float: left;
margin-right: 23px;
margin-bottom: 16px;
position: relative;
border-radius: 5px;
overflow: hidden;
a {
img {
width: 100%;
height: 121px;
vertical-align: middle;
}
p {
width: 216px;
color: #2c2c2c;
font-weight: bold;
font-size: 16px;
margin-top: 5px;
}
.video {
position: absolute;
bottom: 10px;
left: 10px;
width: 20px;
height: 20px;
top: 92px;
i {
display: block;
width: 20px;
height: 20px;
background: url(../image/bofang.png);
background-size: 100% 100%;
}
}
}
}
}
}
}
.research {
background-color: #fff;
padding-top: 20px;
.lab {
width: 804px;
.research_title {
line-height: 40px;
border-bottom: 1px solid #ededed;
a {
font-size: 22px;
color: #2c2c2c;
font-weight: bold;
}
.research_more {
a {
font-size: 14px;
color: #808080;
}
i {
position: relative;
top: 3px;
display: inline-block;
width: 16px;
height: 16px;
background: url(../image/index-icon-arrow-right.png) no-repeat center
center / 8px 14px;
}
}
}
ul {
margin-top: 20px;
li {
width: 248px;
float: left;
margin-right: 30px;
margin-bottom: 30px;
border-radius: 5px;
overflow: hidden;
position: relative;
a {
img {
width: 100%;
height: 140px;
}
p {
line-height: 22px;
height: 44px;
color: #2c2c2c;
font-weight: bold;
margin-top: 10px;
}
.lab_desc {
font-size: 12px;
color: #808080;
margin-top: 10px;
}
.video {
position: absolute;
bottom: 10px;
left: 10px;
width: 20px;
height: 20px;
top: 110px;
i {
display: block;
width: 20px;
height: 20px;
background: url(../image/bofang.png);
background-size: 100% 100%;
}
}
}
&:nth-child(3),
&:nth-child(6) {
margin-right: 0;
}
}
}
}
.dev {
width: 245px;
.dev_title {
line-height: 40px;
border-bottom: 1px solid #ededed;
a {
font-size: 22px;
color: #2c2c2c;
font-weight: bold;
}
.dev_more {
a {
font-size: 14px;
color: #808080;
}
i {
position: relative;
top: 3px;
display: inline-block;
width: 16px;
height: 16px;
background: url(../image/index-icon-arrow-right.png) no-repeat center
center / 8px 14px;
}
}
}
.dev_list {
height: 490px;
margin-top: 20px;
position: relative;
li {
position: absolute;
width: 100%;
top: 0;
left: 0;
display: none;
a {
img {
width: 100%;
height: 427px;
border-radius: 5px;
}
p {
color: #2c2c2c;
font-weight: bold;
margin-top: 5px;
}
.mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 427px;
background: rgba(0, 0, 0, 0.2);
border-radius: 5px;
.video2x {
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
i {
display: block;
width: 40px;
height: 40px;
background: url(../image/bofang2x.png);
background-size: 100% 100%;
}
}
}
}
&.curr {
display: block;
}
}
.pointer {
position: absolute;
width: 100%;
text-align: center;
left: 0;
top: 400px;
z-index: 999;
span {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
margin-right: 5px;
background-color: #c0c0c0;
cursor: pointer;
&.on {
background-color: #fff;
}
}
}
}
}
}
.experiencer {
.vip {
width: 805px;
.vip_title {
line-height: 40px;
border-bottom: 1px solid #ededed;
a {
font-size: 22px;
color: #2c2c2c;
font-weight: bold;
}
.vip_more {
a {
font-size: 14px;
color: #808080;
}
i {
position: relative;
top: 3px;
display: inline-block;
width: 16px;
height: 16px;
background: url(../image/index-icon-arrow-right.png) no-repeat center
center / 8px 14px;
}
}
}
.vip_list {
margin-top: 20px;
li {
float: left;
width: 248px;
margin-right: 30px;
margin-bottom: 30px;
border-radius: 5px;
overflow: hidden;
a {
color: #2c2c2c;
img {
width: 100%;
height: 140px;
border-radius: 5px;
}
p {
color: #2c2c2c;
font-weight: bold;
}
.bottom {
margin-top: 20px;
font-size: 12px;
.avatar {
img {
width: 26px;
height: 26px;
border-radius: 50%;
margin-right: 6px;
vertical-align: middle;
}
}
}
}
&:nth-child(3) {
margin-right: 0;
}
}
}
}
.master {
width: 245px;
.master_title {
line-height: 40px;
border-bottom: 1px solid #ededed;
a {
font-size: 22px;
color: #2c2c2c;
font-weight: bold;
}
.master_more {
a {
font-size: 14px;
color: #808080;
}
i {
position: relative;
top: 3px;
display: inline-block;
width: 16px;
height: 16px;
background: url(../image/index-icon-arrow-right.png) no-repeat center
center / 8px 14px;
}
}
}
ul {
margin-top: 20px;
li {
margin-bottom: 15px;
.level {
width: 15px;
height: 18px;
line-height: 15px;
font-size: 12px;
color: #fff;
text-align: center;
background: url(../image/icon-top-gray.png) no-repeat center top;
background-size: 15px 18px;
margin-right: 9px;
}
img {
width: 36px;
height: 36px;
border-radius: 50%;
margin-right: 14px;
}
.info {
width: 170px;
margin-top: -5px;
font-size: 12px;
color: #4c4c4c;
line-height: 20px;
.ellipsis {
.username {
margin-right: 8px;
font-size: 14px;
font-weight: bold;
}
}
.line {
margin: 0 5px;
position: relative;
top: -1px;
font-style: normal;
}
}
&:nth-child(1) .level {
background: url(../image/icon-top1.png) no-repeat center top;
}
&:nth-child(2) .level {
background: url(../image/icon-top2.png) no-repeat center top;
}
&:nth-child(3) .level {
background: url(../image/icon-top3.png) no-repeat center top;
}
}
}
}
}
.tidal {
padding-top: 20px;
background: #f5f5f5;
padding-bottom: 80px;
.tidal_title {
line-height: 40px;
border-bottom: 1px solid #ededed;
a {
font-size: 22px;
color: #2c2c2c;
font-weight: bold;
}
.special-wrap {
.dot {
background-color: #d8d8d8;
width: 4px;
height: 4px;
border-radius: 50%;
margin: 17px 14px 0;
float: left;
vertical-align: top;
}
.special-icon {
width: 23px;
height: 23px;
background: url(../image/tl-icon.gif) no-repeat center center;
background-size: auto 100%;
display: inline-block;
}
.special-icon-text {
vertical-align: middle;
width: 38px;
height: 16px;
background: url(../image/tl-icon2.gif) no-repeat center -1px;
background-size: auto 100%;
display: inline-block;
}
ul {
li {
display: inline-block;
margin-right: 20px;
a {
img {
vertical-align: middle;
}
}
&:nth-child(1) img {
height: 45px;
margin-top: -11px;
}
&:nth-child(2) img {
height: 35px;
margin-top: -11px;
}
&:nth-child(3) img {
height: 50px;
margin-top: -11px;
}
&:nth-child(4) img {
height: 16px;
margin-top: -6px;
}
}
}
}
}
.tidal_box {
ul {
width: 105%;
margin-top: 20px;
li {
width: 346px;
height: 305px;
margin: 0 21px 21px 0;
background-color: #fff;
position: relative;
float: left;
transition: all 0.5s;
a {
.tidal_img {
height: 195px;
font-size: 12px;
position: relative;
img {
width: 100%;
}
}
.tidal_text {
width: 314px;
height: 75px;
font-size: 16px;
font-weight: bold;
overflow: hidden;
text-overflow: ellipsis;
padding: 10px;
position: relative;
color: #2c2c2c;
.tl_number {
width: 314px;
position: absolute;
bottom: 0px;
left: 15px;
color: #b2b2b2;
span {
font-weight: none;
font-size: 12px;
}
}
}
.discount {
position: absolute;
left: 10px;
top: 10px;
border-radius: 15px;
color: #fff;
line-height: 18px;
padding: 1px 8px 0 8px;
background-color: rgba(0, 0, 0, 0.35);
font-size: 12px;
}
}
&:hover {
box-shadow: 0 0 3px 7px #ccc;
}
}
}
}
.page-box {
text-align: center;
display: block;
margin: 20px 0;
ul {
display: inline-block;
li {
margin-right: 5px;
float: left;
a {
color: #2c2c2c;
display: block;
padding: 0 5px;
border-right: none;
font-size: 14px;
border: 1px solid #ededed;
height: 27px;
line-height: 27px;
&.active {
color: #fff;
background-color: #f66039;
}
}
}
}
}
}
.fixed {
position: fixed;
width: 40px;
background-color: transparent;
bottom: 40px;
left: 90%;
z-index: 5;
display: none;
a {
.fixed_list {
border-bottom: none;
height: 40px;
background-color: #fff;
border: 1px solid #efefef;
position: relative;
i {
width: 40px;
height: 40px;
display: block;
}
.tel {
background: url(../image/tel.png) no-repeat center center;
background-size: 16px auto;
}
.wx {
background: url(../image/wx.png) no-repeat center center;
background-size: 20px auto;
}
.yijian {
background: url(../image/feedback.png) no-repeat center center;
background-size: 21px auto;
}
.back {
background: url(../image/top.png) no-repeat center center;
background-size: 14px auto;
}
.iphone {
position: absolute;
top: -1px;
left: -210px;
width: 200px;
height: 40px;
text-align: center;
background-color: #fff;
border: 1px solid #f0f0f0;
line-height: 20px;
display: none;
.ip {
color: #4d4d4d;
}
.time {
color: #b3b3b3;
font-size: 12px;
}
}
.weixin {
position: absolute;
top: -43px;
left: -130px;
width: 130px;
text-align: center;
background-color: #fff;
border: 1px solid #f0f0f0;
padding: 5px;
box-sizing: border-box;
display: none;
img {
width: 100px;
}
p {
color: #666;
font-weight: bold;
font-size: 12px;
}
}
}
}
}
#panel {
width: 100%;
height: 662%;
background-color: #000;
opacity: 0.4;
position: absolute;
left: 0;
top: 0;
display: none;
z-index: 9;
}
#login {
width: 800px;
height: 300px;
background: #fff;
border-radius: 5px;
position: fixed;
left: calc(50% - 200px);
top: 50%;
margin: -150px 0 0 -150px;
z-index: 99999;
display: none;
ul {
height: 250px;
margin-top: 25px;
display: flex;
justify-content: space-between;
position: relative;
}
ul li:nth-child(1) {
width: 520px;
box-sizing: border-box;
border-right: 1px solid #ccc;
position: relative;
p {
font-size: 18px;
text-indent: 3em;
}
div {
text-indent: 3em;
position: relative;
input {
width: 350px;
height: 50px;
border: none;
outline: none;
text-indent: 1.5em;
box-sizing: border-box;
border: 1px solid #ccc;
font-size: 18px;
}
svg {
font-size: 14px;
color: rgb(138, 125, 125);
position: absolute;
top: 16px;
left: 54px;
}
}
.phoneNumber {
margin-top: 20px;
}
.password {
margin-top: 10px;
svg {
color: rgb(138, 125, 125);
position: absolute;
top: 16px;
left: 54px;
}
}
footer {
font-size: 12px;
text-indent: 4em;
margin-top: 24px;
input {
position: relative;
top: 3px;
}
button {
width: 165px;
height: 40px;
border-radius: 40px;
margin-left: 100px;
border: none;
background-color: #fe584d;
color: #fff;
cursor: pointer;
}
button:hover {
background-color: #ec463b;
}
}
small {
width: 80%;
display: flex;
justify-content: space-between;
margin-left: 28px;
margin-top: 20px;
em {
font-style: normal;
cursor: pointer;
}
}
}
ul li:nth-child(2) {
width: 280px;
text-align: center;
.dl_code {
width: 180px;
height: 180px;
margin: 10px auto;
}
.dl_more {
height: 40px;
.way {
width: 200px;
height: 40px;
margin: auto;
font-size: 20px;
.weibo {
font-size: 20px;
cursor: pointer;
}
.QQ {
font-size: 20px;
cursor: pointer;
}
}
}
}
.dl_down {
position: absolute;
left: 768px;
top: -10px;
cursor: pointer;
}
}
js部分
window.onload = function () {
var btn = document.querySelector(".btn_classify");
var header_menu = document.querySelector(".header_menu");
var left_li = document.getElementsByClassName("left_li");
var right_list = document.getElementsByClassName("menu_right_list");
var clock = document.querySelector(".clock");
var app = document.querySelector(".APP");
var imgs = document.querySelectorAll(".pic>img");
var lis = document.querySelectorAll(".banner li");
var banner = document.querySelector(".banner");
var leftBtn = document.querySelector(".left");
var rightBtn = document.querySelector(".right");
var data_list = document.querySelector(".data_list");
var hot_more = document.querySelector(".hot_more");
var hot_box = document.querySelector(".hot_box");
var hot_span = document.querySelector(".hot_text>span");
var hot_img = document.querySelector(".hot_text>img");
var rsList = document.querySelector(".research_list");
var dev_list = document.querySelector(".dev_list");
var dev_li = dev_list.querySelectorAll("li");
var pointer_span = document.querySelectorAll(".pointer>span");
var master_list = document.querySelector(".master_list");
var tidal_list = document.querySelector(".tidal_list");
var tel = document.querySelector(".tel");
var wx = document.querySelector(".wx");
var back = document.querySelector(".back");
var iphone = document.querySelector(".iphone");
var weixin = document.querySelector(".weixin");
var fixed = document.querySelector(".fixed");
var dis_nav = document.querySelector(".dis_nav");
console.log(back);
// 上面的按钮控制隐藏菜单的显示隐藏
var flag = true;
btn.addEventListener("click", function () {
if (flag) {
header_menu.style.display = "block";
btn.innerHTML = "关闭";
flag = false;
} else {
header_menu.style.display = "none";
btn.innerHTML = "全部分类";
flag = true;
}
});
// 鼠标移入菜单切换
for (var i = 0; i < left_li.length; i++) {
left_li[i].setAttribute("index", i);
left_li[i].onmouseenter = function () {
var index = this.getAttribute("index");
// 左边菜单切换
for (var g = 0; g < left_li.length; g++) {
left_li[g].className = "left_li";
right_list[g].style.display = "none";
}
left_li[index].className = "left_li active";
right_list[index].style.display = "block";
};
}
// app下载移入显示二维码
app.addEventListener("mouseenter", function () {
clock.style.display = "block";
});
app.addEventListener("mouseleave", function () {
clock.style.display = "none";
});
// 轮播图
var t = setInterval(move, 5000);
var index = 0; //当前索引
// 鼠标移入banner定时器关闭
banner.addEventListener("mouseenter", function () {
clearInterval(t);
});
// 鼠标移出banner定时器开启
banner.addEventListener("mouseleave", function () {
t = setInterval(move, 5000);
});
function pblic() {
for (var i = 0; i < imgs.length; i++) {
imgs[i].className = "";
lis[i].className = "";
}
imgs[index].className = "active";
lis[index].className = "current";
}
// 移入指示点 显示当前指示点索引一致的图片 ，指示点变红
for (var j = 0; j < lis.length; j++) {
// 自定义属性 suoYin 将j存入
lis[j].suoYin = j;
lis[j].addEventListener("click", function () {
index = this.suoYin;
pblic();
});
}
//点左边的按钮 显示前一张
leftBtn.addEventListener("click", function () {
index--;
if (index < 0) {
index = imgs.length - 1;
}
pblic();
});
//点左边的按钮 显示后一张
rightBtn.addEventListener("click", function () {
index++;
if (index >= imgs.length) {
index = 0;
}
pblic();
});
function move() {
index++;
if (index >= imgs.length) {
index = 0;
}
pblic();
}
//向上滚动
var Oul = document.querySelector(".Oul");
// 克隆ul里的内容并添加到ul中
// console.log(hot_news);
Oul.innerHTML += Oul.innerHTML;
var ulH = Oul.clientHeight;
// console.log(ulH);
var mt = 0;
function play() {
mt -= 40;
if (Math.abs(mt) >= ulH) {
mt = 0;
}
Oul.style.top = mt + "px";
Oul.style.transition = "all 2s";
}
setInterval(play, 8000);
// 热门试用渲染数据
var arr = [
{
imgSrc: "./image/hot1.jpg",
name: "华为MatePad Pro 12.6英寸",
people: 2965,
baogaoCount: "报告数量:8",
freeTrial: "免费试用(8台)",
price: "￥4699",
},
{
imgSrc: "./image/hot2.jpg",
name: "大疆Osmo Mobile 6",
people: 2335,
baogaoCount: "暂无报告",
freeTrial: "免费试用(5台)",
price: "￥999",
},
{
imgSrc: "./image/hot3.jpg",
name: "讯飞翻译机4.0",
people: 2861,
baogaoCount: "报告数量:4",
freeTrial: "免费试用(5台)",
price: "￥3199",
},
{
imgSrc: "./image/hot4.jpg",
name: "POLY SYNC 10",
people: 1824,
baogaoCount: "报告数量:5",
freeTrial: "免费试用(5台)",
price: "￥999",
},
{
imgSrc: "./image/hot5.jpg",
name: "莱克天狼星S680&吉米维纳斯V7吸尘洗地机",
people: 2614,
baogaoCount: "报告数量:5",
freeTrial: "免费试用(10台)",
price: "￥4999",
},
{
imgSrc: "./image/hot6.jpg",
name: "创维电视元春品鉴会—北京站",
people: 693,
baogaoCount: "报告数量:10",
freeTrial: "线下活动(10台)",
price: "￥7999",
},
{
imgSrc: "./image/hot7.jpg",
name: "西屋洗拖一体机",
people: 1076,
baogaoCount: "报告数量:15",
freeTrial: "免费试用(15台)",
price: "￥2680",
},
{
imgSrc: "./image/hot8.jpg",
name: "创维电视新品品鉴会—成都站",
people: 682,
baogaoCount: "报告数量:10",
freeTrial: "免费试用(10台)",
price: "￥7999",
},
{
imgSrc: "./image/hot9.jpg",
name: "创维电视秋季品鉴会—青岛站",
people: 827,
baogaoCount: "报告数量:10",
freeTrial: "免费试用(10台)",
price: "￥7999",
},
{
imgSrc: "./image/hot10.jpg",
name: "碳纳米管智暖毯",
people: 3246,
baogaoCount: "报告数量:7",
freeTrial: "免费试用(10台)",
price: "￥1299",
},
{
imgSrc: "./image/hot11.jpg",
name: "飞利浦踢脚线取暖器",
people: 3167,
baogaoCount: "暂无报告",
freeTrial: "免费试用(8台)",
price: "￥2899",
},
{
imgSrc: "./image/hot12.jpg",
name: "飞利浦暖风机",
people: 2965,
baogaoCount: "暂无报告",
freeTrial: "免费试用(7台)",
price: "￥1599",
},
];
// 数据渲染内容
for (var i = 0; i < arr.length; i++) {
var newLi = document.createElement("li"); //创建行
// 添加行内的内容
newLi.innerHTML = `
<a href="#">
<div class="sroll-cell">
<div class="hot_img">
<span class="tag">首发</span>
<img src=${arr[i].imgSrc} alt="" />
</div>
<div class="hot_desc">
<div class="hover_box">
<div class="hot_details">
<p>${arr[i].name}</p>
<span class="tag_list">免费试用</span>
</div>
<div class="number">
<span>
<font>${arr[i].people}人</font>
参与
</span>
<span class="fr">
${arr[i].baogaoCount}
</span>
</div>
<div class="list_buy clearfix">
<div class="hide_ceil">
<span>${arr[i].freeTrial}</span>
<span class="fr">2965人申请</span>
</div>
<div class="hide_ceil">
<span>购买</span>
<span class="fr">${arr[i].price}</span>
</div>
</div>
</div>
</div>
</div>
</a>
`;
data_list.appendChild(newLi); //把li添加到页面
}
// 热门列表展开收起效果
var flag = true;
hot_more.onclick = function () {
if (flag) {
hot_box.style.height = "880px";
hot_box.style.transition = "all 2s";
hot_span.innerHTML = "收起";
hot_img.style.display = "none";
flag = false;
} else {
hot_box.style.height = "425px";
hot_box.style.transition = "all 2s";
hot_span.innerHTML = "展开更多";
hot_img.style.display = "block";
flag = true;
}
};
//极果研究室渲染数据
var arr1 = [
{
imgSrc: "./image/lab1.jpg",
text: "手机摄影敢称「夜拍之王」的就它了｜vivo X90 Pro+",
time: "02-03",
},
{
imgSrc: "./image/lab2.jpg",
text: "终于等来了最完美苹果本｜MacBook Pro 2023 首发上手",
time: "02-03",
},
{
imgSrc: "./image/lab3.jpg",
text: "Apple新春大片《过五关》！传统与科技的碰撞！太酷了！",
time: "02-22",
},
{
imgSrc: "./image/lab4.jpg",
text: "安卓平板做的烂！都怪华为和苹果？",
time: "02-13",
},
{
imgSrc: "./image/lab5.jpg",
text: "大疆最轻稳定器！是你需要的吗？ RS 3 Mini上手",
time: "01-14",
},
{
imgSrc: "./image/lab6.jpg",
text: "大疆最轻稳定器！是你需要的吗？ RS 3 Mini上手",
time: "12-31",
},
];
for (var m = 0; m < arr1.length; m++) {
var newLi1 = document.createElement("li"); //创建行
// 添加行内的内容
newLi1.innerHTML = `
<a href="#">
<img src=${arr1[m].imgSrc} alt="">
<p>${arr1[m].text}</p>
<div class="lab_desc fr">
<span>${arr1[m].time}</span>
</div>
<div class="video">
<i></i>
</div>
</a>
`;
rsList.appendChild(newLi1);
}
// 开箱测评切换li
var t1 = setInterval(move1, 5000);
var suoyin = 0; //当前索引
function pblic1() {
for (var i = 0; i < dev_li.length; i++) {
dev_li[i].className = "";
pointer_span[i].className = "";
}
dev_li[suoyin].className = "curr";
pointer_span[suoyin].className = "on";
}
function move1() {
suoyin++;
if (suoyin >= dev_li.length) {
suoyin = 0;
}
pblic1();
}
for (var j = 0; j < pointer_span.length; j++) {
// 自定义属性 suoYin 将j存入
pointer_span[j].suoYin = j;
pointer_span[j].addEventListener("click", function () {
suoyin = this.suoYin;
pblic1();
});
}
//达人榜渲染数据
var arr2 = [
{
imgSrc: "./image/230(1).jpg",
name: "Giraffe",
score: 5,
pingfen: 9.7,
id: 1,
},
{
imgSrc: "./image/230(2).jpg",
name: "大鱼吃小鱼",
score: 2,
pingfen: 7.8,
id: 2,
},
{
imgSrc: "./image/230(3).jpg",
name: "KUNATATA",
score: 1,
pingfen: 9.7,
id: 3,
},
{
imgSrc: "./image/230(4).jpg",
name: "我的小叽萝",
score: 1,
pingfen: 9.7,
id: 4,
},
{
imgSrc: "./image/230(5).jpg",
name: "虫虫",
score: 1,
pingfen: 9.7,
id: 5,
},
{
imgSrc: "./image/230(6).jpg",
name: "Lucas",
score: 1,
pingfen: 7.7,
id: 6,
},
{
imgSrc: "./image/230(7).jpg",
name: "勤添Jacky",
score: 1,
pingfen: 5.2,
id: 7,
},
{
imgSrc: "./image/230(8).jpg",
name: "Echo",
score: 1,
pingfen: 6.1,
id: 8,
},
{
imgSrc: "./image/230(9).jpg",
name: "萤小火",
score: 5,
pingfen: 3.7,
id: 9,
},
{
imgSrc: "./image/230(10).jpg",
name: "ROSE",
score: 1,
pingfen: 0,
id: 10,
},
];
for (var j = 0; j < arr2.length; j++) {
var newLi2 = document.createElement("li"); //创建行
// 添加行内的内容
newLi2.innerHTML = `
<a href="#">
<div class="level fl">${arr2[j].id}</div>
<img src=${arr2[j].imgSrc} alt="" class="fl">
<div class="info fl">
<div class="ellipsis">
<span class="username">${arr2[j].name}</span>
</div>
<div>
<span>
精选文章<span style="color: #fe584d;">${arr2[j].score}</span>篇
<i class="line">|</i> 最近好文<span style="color: #fe584d;">${arr2[j].pingfen}</span>分
</span>
</div>
</div>
</a>
`;
newLi2.className = "clearfix";
master_list.appendChild(newLi2);
}
// 潮流推荐渲染数据
var chaoliuArr = [
{
chaoliuSrc: "./image/潮流推荐01.jpg",
title: "史上ZUI萌评测?带你感受联想ThinkPad这块抗造天花板|视频",
name: "大鱼吃小鱼",
date: "02-02",
},
{
chaoliuSrc: "./image/潮流推荐02.png",
title:
"五菱造电动“吉姆尼” ? !内饰形似奔驰G级,还有连体悬浮式大屏...或今年亮相",
name: "交通出行 | 汽车 ",
date: "5分钟前",
},
{
chaoliuSrc: "./image/潮流推荐03.jpg",
title: "一加Ace 2正式发布!内存大性能强悍，首发多项“黑科技”...2799元起",
name: "数码家电 | 通讯 ",
date: "5分钟前",
},
{
chaoliuSrc: "./image/潮流推荐04.jpg",
title: "快来薅苹果羊毛!官方大降价,iPhone 14 Pro全系大跌700块…",
name: "其他 | 其他 ",
date: "8小时前",
},
{
chaoliuSrc: "./image/潮流推荐05.png",
title: "比亚迪海鸥出街被拍!续航400km带快充,或8万起售,网友：铁定要火",
name: "其他 | 其他",
date: "8小时前",
},
{
chaoliuSrc: "./image/潮流推荐06.jpg",
title:
"这就是华为折叠屏新旗舰Mate X3!首发第二代卫星通信，更轻薄单手握不累...价格更便宜",
name: "数码家电 | 通讯 ",
date: "23小时前",
},
{
chaoliuSrc: "./image/潮流推荐07.jpg",
title: "vivo X90新配色“告白”上手,蓝厂的颜值天花板来了！",
name: "数码家电 | 通讯 ",
date: "1天前",
},
{
chaoliuSrc: "./image/潮流推荐08.png",
title:
"三星新一代高端旗舰!独占高频版骁龙8 Gen2,2亿像素拍照无敌...5699元起",
name: "数码家电 | 通讯",
date: "02-02",
},
{
chaoliuSrc: "./image/潮流推荐09.jpg",
title: "史上ZUI萌评测?带你感受联想ThinkPad这块抗造天花板",
name: "大鱼吃小鱼",
date: "02-02",
},
{
chaoliuSrc: "./image/潮流推荐10.png",
title: "“极氪003”首露面!3秒级加速秒杀百万超跑,售价或超20万...",
name: "交通出行 | 汽车 ",
date: "02-01",
},
{
chaoliuSrc: "./image/潮流推荐11.jpg",
title: "奥迪全新纯电轿车曝光!与保时捷同平台打造,零百加速仅3秒...",
name: "其他 | 其他 ",
date: "02-01",
},
{
chaoliuSrc: "./image/潮流推荐12.jpg",
title:
"2月新机大爆发:三星机皇独占8G2芯片|realme 全球最快充电技术 ｜一加性能手机新标杆？",
name: "其他 | 其他",
date: "02-01",
},
{
chaoliuSrc: "./image/潮流推荐13.png",
title: "新一代游戏本将扎堆开卖!RTX 4090/4080 打头阵，雷神已率先出手...",
name: "数码家电 | 电脑设备 ",
date: "01-31",
},
{
chaoliuSrc: "./image/潮流推荐14.png",
title: "红旗L系新车长这样? !外观霸气,或匹配V12混动系统...明年量产",
name: "交通出行 | 汽车 ",
date: "01-31",
},
{
chaoliuSrc: "./image/潮流推荐15.png",
title: "苹果「秘密武器」或取代iPhone?内置“杀手级应用”，还可全天佩戴...",
name: "数码家电 | 通讯 ",
date: "01-31",
},
{
chaoliuSrc: "./image/潮流推荐16.jpg",
title: "华为P60 Pro再曝“黄金大眼”|史上最轻笔记本｜可口可乐联名手机来了…",
name: "其他 | 其他 ",
date: "01-31",
},
{
chaoliuSrc: "./image/潮流推荐17.png",
title:
"奥迪史上最酷轿跑能一键变皮卡？！列装黑科技，一个「眼神」就能操控，太神了...",
name: "交通出行 | 汽车 ",
date: "01-29",
},
{
chaoliuSrc: "./image/潮流推荐18.png",
title: "突飞猛进的华为，还需继续努力",
name: "交通出行 | 汽车 ",
date: "01-20",
},
{
chaoliuSrc: "./image/潮流推荐19.jpg",
title: "哈啰摩友春节自驾游指南|骑旅S325高光时刻回顾",
name: "Giraffe",
date: "01-19",
},
{
chaoliuSrc: "./image/潮流推荐20.png",
title: "强势回归！苹果发布新款 HomePod,换芯大降价，还能测温湿度...",
name: "其他 | 其他 ",
date: "01-19",
},
{
chaoliuSrc: "./image/潮流推荐21.png",
title: "特斯拉又放大招!改款Model 3今年就来,外观有变化、价格超低...",
name: "交通出行 | 汽车 ",
date: "01-18",
},
{
chaoliuSrc: "./image/潮流推荐22.jpg",
title: "哈啰电动车「跨越山海」,疾驰S325仙境公路",
name: "叁劈",
date: "01-18",
},
{
chaoliuSrc: "./image/潮流推荐23.jpg",
title: "苹果发「最猛」Mac新品!全部搭载新芯片性能飙升...4499起售下月开卖",
name: "数码家电 | 电脑设备 ",
date: "01-17",
},
{
chaoliuSrc: "./image/潮流推荐24.png",
title:
"长城汽车入选“品牌强国工程” 携手央视打造《长城汽车 向新而越》纪录片",
name: "交通出行 | 汽车 ",
date: "01-17",
},
{
chaoliuSrc: "./image/潮流推荐25.jpg",
title: "2023了,安卓平板怎么还这么烂？都怪苹果和华为吗…",
name: "数码家电 | 电脑设备 ",
date: "01-16",
},
{
chaoliuSrc: "./image/潮流推荐26.jpg",
title: "《山海奇幻夜》演绎东方之美,华为MatePad Pro助力国风舞台浪漫呈现",
name: "数码家电 | 电脑设备 ",
date: "01-16",
},
{
chaoliuSrc: "./image/潮流推荐27.jpg",
title: "哈弗新车H-DOG新车驾到!可油可电可越野，长城新能源战略全面展开...",
name: "交通出行 | 汽车 ",
date: "01-16",
},
{
chaoliuSrc: "./image/潮流推荐28.jpg",
title: "「干翻」日系车的国产豪华MPV!空气悬挂、可油可电，开起来还挺爽....",
name: "交通出行 | 汽车 ",
date: "01-14",
},
{
chaoliuSrc: "./image/潮流推荐29.jpg",
title: "私教平替亲测:小白也能轻松上手开练,春节前的减脂KPI就交给它吧!",
name: "数码家电 | 智能穿戴 ",
date: "01-14",
},
{
chaoliuSrc: "./image/潮流推荐30.jpg",
title: "苹果2023将发史上最重磅新品!还有超大MacBook Air…这次太猛了",
name: "其他 | 其他 ",
date: "01-13",
},
];
for (var g = 0; g < chaoliuArr.length; g++) {
var newLi3 = document.createElement("li"); //创建行
// 添加行内的内容
newLi3.innerHTML = `
<a href="#">
<div class="tidal_img">
<img src=${chaoliuArr[g].chaoliuSrc} alt="">
</div>
<div class="tidal_text">
${chaoliuArr[g].title}
<div class="tl_number">
<span class="fl">${chaoliuArr[g].name}</span>
<span class="fr">${chaoliuArr[g].date}</span>
</div>
</div>
<span class="discount">体验</span>
</a>
`;
tidal_list.appendChild(newLi3);
}
//固定导航移入效果
tel.addEventListener("mouseenter", function () {
iphone.style.display = "block";
});
tel.addEventListener("mouseleave", function () {
iphone.style.display = "none";
});
wx.addEventListener("mouseenter", function () {
weixin.style.display = "block";
});
wx.addEventListener("mouseleave", function () {
weixin.style.display = "none";
});
//固定导航滚动条事件
window.onscroll = function () {
var currentHeight =
document.documentElement.scrollTop ||
window.pageYOffset ||
document.body.scrollTop;
if (currentHeight > 300) {
fixed.style.display = "block";
dis_nav.style= "transform:translateY(75px)";
} else {
fixed.style.display = "none";
dis_nav.style= "z-index:1";
}
// 返回顶部过渡动画
back.onclick = function () {
// 设置定时器
timer = setInterval(function () {
var osTop =
document.documentElement.scrollTop || document.body.scrollTop;
//减小的速度
var isSpeed = Math.floor(-osTop / 6);
document.documentElement.scrollTop = document.body.scrollTop =
osTop + isSpeed;
//判断如果到了滚动条顶部，然后清除定时器
if (osTop == 0) {
clearInterval(timer);
}
}, 30);
};
};
// 登陆
document.querySelector(".dl").onclick = function () {
//显示面板和蒙版
document.querySelector("#panel").style.display = "block";
document.querySelector("#login").style.display = "block";
};
document.querySelector(".dl_down").onclick = function () {
// 点击关闭按钮隐藏蒙版
document.querySelector("#panel").style.display = "none";
document.querySelector("#login").style.display = "none";
};
document.querySelector(".dl1").onclick = function () {
//显示面板和蒙版
document.querySelector("#panel").style.display = "block";
document.querySelector("#login").style.display = "block";
};
document.querySelector(".dl_down").onclick = function () {
// 点击关闭按钮隐藏蒙版
document.querySelector("#panel").style.display = "none";
document.querySelector("#login").style.display = "none";
};
// 显示APP下载二维码
var navLis = document.querySelectorAll(".nav_left>ul>li");
var appCode = document.querySelector(".APP_code");
// console.log(appCode);
// 鼠标移入显示二维码
navLis[7].onmousemove = function () {
appCode.style.display = "block";
};
appCode.onmousemove = function () {
appCode.style.display = "block";
};
// 鼠标移出隐藏二维码
navLis[7].onmouseleave = function () {
appCode.style.display = "none";
};
appCode.onmouseleave = function () {
appCode.style.display = "none";
};
// 登录信息验证
var phone = document.getElementById('phone');
var pass = document.getElementById('pass');
var dlBtn = document.getElementById('login_dlBtn');
var user = document.querySelector('.user');
var username = document.querySelector('.username')
var user_face =document.querySelector(".user-face")
var login = document.querySelector('.login');
var log_userName = document.querySelector('.username')
var exit = document.querySelector('.exit')
console.log(username,user_face)
username.onmouseenter=function(){
user_face.style.display = 'block'
}
user_face.onmouseleave=function(){
user_face.style.display = 'none'
}
exit.onclick=function(){
location.reload()
}
let data = localStorage.getItem('data') == null ? [] : JSON.parse(localStorage.getItem('data'));
console.log(data)
dlBtn.onclick = function () {
let zh = phone.value;
let mm = pass.value;
if (zh == '' || mm == '') {
alert("账号密码不能为空");
return;
}
let state = -1;
for (let i = 0; i < data.length; i++) {
if (data[i].phone == zh ) {
state = i;
var us_name = data[i].username
}
}
// console.log(state);
if (state < 0) {
alert("账号不存在");
} else {
if (data[state].pwd == mm) {
document.querySelector("#panel").style.display = "none";
document.querySelector("#login").style.display = "none";
user.style.display='block';
login.style.display='none';
log_userName.innerHTML=us_name;
} else {
alert("密码错误");
}
}
}
};
1100
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
