first commit

This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions

View File

@@ -0,0 +1,93 @@
<!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>Document</title>
</head>
<body>
<h1>标签1</h1>
<h2>标签2</h2>
<h3>标签3</h3>
<h4>标签4</h4>
<h5>标签5</h5>
<h6>标签6</h6>
<a href="https://www.bilibili.com/" target="_blank">B链</a>
<!--超链接-->
<img src="https://i0.hdslb.com/bfs/feed-admin/ba519c5077c6ec4b19281e35a4bbb106aba189a2.jpg@880w_388h_1c_95q" alt="图片无法加载">
<img src="../img/图片1.jpg" alt="图片无法载入">
<!--图片-->
<ul>
<li>序列</li>
<ul>
<li>第一章</li>
<ul>
<li>第一节</li>
</ul>
</ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ol>
<li>1</li>
<ol>
<li>!@#</li>
<li>%$^^^</li>
</ol>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
<!--序列-->
<input type="text" placeholder="请输入账户">
<input type="password" placeholder="请输入密码">
<input type="number" placeholder="请输入手机号">
<!--输入框-->
<input type="checkbox" >
<input type="checkbox" >
<input type="checkbox" >
<input type="checkbox" >
<!--多选-->
<input type="radio">
<input type="radio" name="1">
<input type="radio" name="1">
<input type="radio" name="1">
<!--单选-->
<input type="range">
<!--滑块-->
<input type="color">
<!--颜色-->
<input type="button" value="按钮">
<input type="button" value="按钮">
<input type="submit" value="submit">
<!--按钮-->
<input type="date">
<!--日期-->
<input type="file" name="" id="">
<!--上传文件-->
<select name="" id="">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
</select>
<!--菜单-->
<textarea name="" id="" cols="30" rows="10" placeholder="留言"></textarea>
<!--留言框-->
</body>
</html>

View File

@@ -0,0 +1,64 @@
<!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>Document</title>
</head>
<body>
<div class="head">
<img src="../img/图片1.jpg" alt="">
<input type="text" placeholder="搜索" >
<ul>
<li>首页</li>
<li>笔记</li>
<li>工具</li>
<li>其它</li>
</ul>
</div>
<div class="content">
<div class="left">
<div class="手册">html用户手册</div>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>服务端</li>
<li>数据端</li>
</ul>
</div>
<div class="middle">
<h2>HTML 教程</h2>
<P>超文本标记语言英语HyperText Markup Language简称HTML是一种用于创建网页的标准标记语言。</P>
<p>您可以使用 HTML 来建立自己的 WEB 站点HTML 运行在浏览器上,由浏览器来解析。</p>
<hr>
</div>
<div class="right">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4 </li>
</ul>
</div>
</div>
<div class="footer">
<div class="neirong">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div class="banqian"></div>
</div>
</body>
</html>

View File

@@ -0,0 +1,45 @@
<!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>CSS练习</title>
<link rel="stylesheet" href="./css练习.css">
</head>
<body>
<div class="hader">
<div class="logo">
<a href=""><img src="https://mat1.gtimg.com/pingjs/ext2020/qqindex2018/dist/img/qq_logo_2x.png" alt="图片无法载入" class="TXLOGO"></a>
<!-- 图片 -->
<input type="text" class="SOUSUO">
<!-- 文本框 -->
<input type="button" value="搜索">
<!-- 搜索按钮 -->
<input type="button" value="登录" class="denglu">
<!-- 登录 -->
</div>
<div class="tag">
<ul>
<li><a href="">新闻</a></li>
<li><a href="">视频</a></li>
<li><a href="">图片</a></li>
<li><a href="">军事</a></li>
<li><a href="">NBA</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="">教育</a></li>
<li><a href="">文化</a></li>
<li><a href="">星座</a></li>
<li><a href="">游戏</a></li>
</ul>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,34 @@
body{margin: 0;}
ul{margin: 0;}
li{list-style: none}
/* 清除样式 */
.TXLOGO{
width: 134px ;height: 35.46px;
margin: 37px;
}
.SOUSUO{width: 320px;height: 32px;}
.tag ul li{
width: 79px;
/* 宽度 */
height: 50px;
/* 高度 */
background-color: #1479d7;
/* 背景色 */
padding-left: 20px;
/* 内边距左20px */
/* box-sizing:border-box; (这个应该是没有加)*/
line-height: 50px;
/* 居中跟高度保持一致 */
float: left;
/* 浮动 */
}
a{text-decoration:none;
color: white;
font-size: 18px;}
.denglu{
text-align: right;
}

View File

@@ -0,0 +1,35 @@
<!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>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div>
<ul class="header">
<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="">NBA</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="">教育</a></li>
<li><a href="">文化</a></li>
<li><a href="">星座</a></li>
<li><a href="">游戏</a></li>
</ul>
</div>
</body>
</html>

View File

@@ -0,0 +1,44 @@
body,
ul,
li,
p {
margin: 0%;
padding: 0%;
}
/* 清除样式 */
li {
overflow: hidden;/* 清除li标签样式 */
float: left;/* 浮动居左 */
width: 79px;/*设置高度79px */
line-height: 50px;/*设置单行文字垂直对齐 */
text-align: center;/*设置单元格内对齐 */
}
a {
text-decoration: none;/* 清除a标签样式 */
}
.header {
background-color: #1479d7;/*设置背景色 */
height: 50px;/*设置高度 */
overflow: hidden;/*在没有单元格高度时用于高度等于子元素高度 */
width: 1400px;/*设置宽度 */
margin: 0 auto; /* 设置外边距居中对齐 */
padding-left: 20px; /*设置内边距左20px */
box-sizing: border-box; /*保持宽高等于你设置的宽高 */
border-radius: 3px; /*圆角 */
}
.header li a {
color: white; /*字体颜色 */
padding: 4px 5px; /*内边距的大小 */
}
.header li a:hover{
color: #14539a; /*鼠标悬浮更改颜色 */
background-color: #cbe1ed; /*鼠标悬浮更改底色 */
}

View File

@@ -0,0 +1,80 @@
<!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>Document</title>
<style>
body,
ul,
li,
p,
h1,
h2,
h3,
h4,
h5,
input,
h6 {
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.menu {
}
.menu li {
float: left;
width: 60px;
text-align: center;
position: relative;
}
.iop{
position:absolute;
width: 100px;
display: none;
}
.menu li:hover .iop{
display: block;
}
</style>
</head>
<body>
<ul class="menu">
<li>首页</li>
<li>HTML</li>
<li>CSS
<div class="iop">
<div class="itv">12678915</div>
<div class="itv">12678915</div>
<div class="itv">12678915</div>
<div class="itv">12678915</div>
<div class="itv">12678915</div>
<div class="itv">12678915</div>
</div>
</li>
<li>JSS
<div class="iop">
<div class="itv">12678915</div>
<div class="itv">12678915</div>
<div class="itv">12678915</div>
<div class="itv">12678915</div>
<div class="itv">12678915</div>
<div class="itv">12678915</div>
</li>
<li>123</li>
</ul>
</body>
</html>

View File

@@ -0,0 +1,18 @@
body,ul,li,p,h1,h2,h3,h4,h5,h6 {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
input {
outline: none;
border: none;
padding: 0;
}

View File

@@ -0,0 +1,348 @@
.herder_logo{
height: 72px;
background-color: #fff
}
.logo{
width: 144px;
height: 33px;
margin-top: 19.5px;
}
.search{
width: 500px;
height: 38px;
left: 50%;
margin-left: -250px;
top: 19.5px;
}
.search_input{
width: 420px;
height: 100%;
background-color: #f5f5f5;
border-radius: 19px 0px 0px 19px;
padding-left: 20px;
box-sizing: border-box;
}
.search_button{
width: 80px;
height: 100%;
line-height: 38px;
text-align: center;
background-color: #ff4141;
border-radius: 0px 19px 19px 0px;
}
.search_button i,
.search_button span{
color: #ffff;
font-size: 14px;
font-weight: 900;
}
.action ul li{
float: left;
margin-right: 12px;
width: 48px;
text-align: center;
}
.action ul li:last-child{
margin-right: 0px;
}
.action ul li:last-child img{
width: 40px;
height: 40px;
}
.action{
margin-top: 19.5px;
}
.action ul li i{
font-size: 20px;
color: #b3b3b3;
display: inline-block;
margin-bottom: 5px;
}
.action ul li p{
color: #b3b3b3;
font-size: 12px;
}
.header_menu {
height: 40px;
background: #f7f7f7;
box-shadow: 0 10px 20px 0 rgb(0 0 0 / 8%);
}
.header_menu li{
float: left;
width: 75px;
text-align: center;
line-height: 40px;
position: relative;
}
.header_menu li a{
color: #000;
}
.active a{
font-weight: 600;
color: #ff4141!important;
}
.active a::after{
content: "";
width: 18px;
height: 3px;
position: absolute;
background-color:#ff4141 ;
left: 50%;
bottom: 0px;
margin-left: -9px;
border-radius: 5px;
}
.banner{
margin-top: 24px;
}
.lunbo{
width: 471px;
height: 266px;
border-radius: 6px;
margin-right: 16px;
}
.info_ul {
width: 713px;}
.info_ul .item{
float: left;
width: 227px;
height: 128px;
margin-right: 16px;
margin-bottom: 10px;
border-radius: 5px;
overflow: hidden;
position: relative;
}
.info_ul li img{
width: 100%;
}
.blak{
width: 100%;
height: 100%;
background: rgba(0,0,0,.5);
position: absolute;
z-index: 2;
left: 0;
top: 0;
transition: all 0.1s ease;
display: none;
}
.info{
width: 100%;
height: 100%;
position: absolute;
z-index: 3;
color: #fff;
left: 0;
top: 92px;
font-size: 14px;
padding: 10px;
box-sizing: border-box;
transition: all 0.25s ease;
}
.info_top{
line-height: 22px;
}
.info_center{
margin-top: 9px;
}
.info_list li{
float: left;
width: 50%;
margin-top: 5px;
}
.info_ul .item:hover .info{
top: 0px;
}
.info_ul .item:hover .blak{
display:block;
}
.info_ul .item:nth-child(3n){
margin-right: 0px;
}
.info_ul .item:nth-child(4),
.info_ul .item:nth-child(5),
.info_ul .item:nth-child(6) {
margin-bottom: 0 !important;
}
.video{
margin-top: 24px;
}
.video .title{
font-size: 28px;
font-weight: 500;
padding-left: 10px;
margin-bottom: 18px;
position: relative;
}
.video .title::after{
position: absolute;
content: "";
width: 3px;
height: 18px;
background: #ff4141;
border-radius: 1.5px;
left: 0;
top: 12px;
}
.video ul {
overflow: hidden;
}
.video ul li {
width: 227px;
border-radius: 5px;
margin: 0 16px 16px 0;
height: 186px;
float: left;
position: relative;
overflow: hidden;
}
.video ul li:last-child {
margin-right: 0 !important;
}
.video ul li:hover .icon {
bottom: -16px !important;
}
.video ul li:hover img {
transform: scale(1.2);
}
.video u .top{
height: 128px;
position: relative;
overflow: hidden;
}
.top img{
width: 100%;
height: 100%;
transition: all 0.25s ease;
}
.top span{
position: absolute;
right: 6px;
bottom: 66px;
padding: 2px 4px;
background-color: rgba(0,0,0,.8);
color: #fff;
font-size: 12px;
border-radius: 3px;
}
.top_title {
margin-top: 10px;
font-size: 14px;
color: rgba(0,0,0,.85);
}
.icon .icon_item {
float: left;
color: #666;
width: 50%;}
.video ul .top {
height: 128px;
position: relative;
overflow: hidden;
}
.top img{
width: 100%;
height: 100%;
transition: all 0.25s ease;
}
.top span{
position: absolute;
right: 6px;
bottom: 6px;
padding: 2px 4px;
background-color: rgba(0,0,0,.8);
color: #fff;
font-size: 12px;
border-radius: 3px;
}
.top_title {
margin-top: 10px;
font-size: 14px;
color: rgba(0,0,0,.85);
}
.icon {
position: absolute;
bottom: 6px;
background: #fff;
width: 100%;
transition: all 0.25s ease;
}
.icon .icon_item {
float: left;
color: #666;
width: 50%;
}
.icon .icon_item i{}
.icon .icon_item span{
font-size: 12px;
}
.footer {}
.footer_wrap {
margin-top: 46px;
height: 188px;
background: #f2f2f2;
}
.footer_top {
width: 1000px;
margin: 0 auto;
padding-top: 55px;
}
.footer_top li{
float: left;
}
.footer_top li:nth-child(1),
.footer_top li:nth-child(2),
.footer_top li:nth-child(3) {
margin-right: 108px;
}
.footer_top li a {
display: block;
color: #906668;
font-size: 14px;
margin-bottom: 24px;
}
.footer_top .line{
width: 1px;
height: 56px;
background: #979797;
margin-right: 65px;
}
.footer_top .code .text{
width: 120px;
}
.footer_top .code .text p{
color: #666;
font-size: 14px;
margin-bottom: 24px;
}
.footer_top .code img{
width: 72px;
height: 72px;
}
.footer_bottom {
height: 52px;
background-color: #444;
color: #999;
font-size: 12px;
line-height: 52px;
text-align: center;
}

View File

@@ -0,0 +1,22 @@
.left {
float: left;
}
.right {
float: right;
}
.hidden {
overflow: hidden;
}
.layout {
width: 1200px;
margin: 0 auto;
}
.relative{
position: relative;
}
.absolute{
position: absolute;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@@ -0,0 +1,249 @@
<!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>Document</title>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2580548_2ntvjg0u7ml.css">
<link rel="stylesheet" href="css/clear.css">
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/public.css">
</head>
<body>
<div class="header">
<div class="herder_logo">
<div class="layout relative">
<img src="img/logo.png" alt="图片未加载" class="logo left">
<div class="search left absolute"><!--搜索框-->
<input class="search_input left" type="text" placeholder="15头野象位临昆明">
<div class="search_button left">
<i class="iconfont icon-sousuo"></i>
<span>搜索</span>
</div>
</div>
<div class="action right"><!--用户头像-->
<ul>
<li>
<i class="iconfont icon-shangchuan"></i>
<p>上传</p>
</li>
<li>
<i class="iconfont icon-shouji"></i>
<p>客户端</p>
</li>
<li>
<i class="iconfont icon-shouji"></i>
<p>动态</p>
</li>
<li>
<img src="./img/user.png" alt="图片未加载">
</li>
</ul>
</div>
</div>
</div>
<div class="header_menu">
<ul class="layout">
<li class="active"><a href="">推荐</a></li>
<li><a href="">影视</a></li>
<li><a href="">音乐</a></li>
<li><a href="">VLOG</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="">广场舞</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>
</ul>
</div>
</div>
<div class="content"><!--内容-->
<div class="layout"><!--布局-->
<div class="banner hidden"><!--横幅-->
<img class="lunbo left"
src="https://pic.rmb.bdstatic.com/baidu-rmb-video-cover-1/2020-8/1598620789888/2b1fc9f72cfe.jpg" alt="图片未显示">
<ul class="info_ul left"><!--重复性布局-->
<li class="item"><!--图片及文字容器-->
<img src="https://tukuimg.bdstatic.com/processed/7e4602899d113dcf4bb36f02d3c0291a.jpeg@s_0,w_660,h_370,q_80,f_webp" alt=""><!--图片-->
<div class="blak"></div><!--背景层-->
<div class="info">
<div class="info_top">据说针筒靠近特斯拉线圈能抽取光源,试了很成功,那用稀有气体呢</div>
<div class="info_center">胡一零</div>
<ul class="info_list hidden">
<li>
<i class="iconfont icon-chakan"></i>
<span>51万</span>
</li>
<li>
<i class="iconfont icon-huihua"></i>
<span>120</span>
</li>
</ul>
</div>
</li>
<li class="item"><!--图片及文字容器-->
<img src="https://tukuimg.bdstatic.com/processed/7e4602899d113dcf4bb36f02d3c0291a.jpeg@s_0,w_660,h_370,q_80,f_webp" alt=""><!--图片-->
<div class="blak"></div><!--背景层-->
<div class="info">
<div class="info_top">据说针筒靠近特斯拉线圈能抽取光源,试了很成功,那用稀有气体呢</div>
<div class="info_center">胡一零</div>
<ul class="info_list hidden">
<li>
<i class="iconfont icon-chakan"></i>
<span>51万</span>
</li>
<li>
<i class="iconfont icon-huihua"></i>
<span>120</span>
</li>
</ul>
</div>
</li>
<li class="item"><!--图片及文字容器-->
<img src="https://tukuimg.bdstatic.com/processed/7e4602899d113dcf4bb36f02d3c0291a.jpeg@s_0,w_660,h_370,q_80,f_webp" alt=""><!--图片-->
<div class="blak"></div><!--背景层-->
<div class="info">
<div class="info_top">据说针筒靠近特斯拉线圈能抽取光源,试了很成功,那用稀有气体呢</div>
<div class="info_center">胡一零</div>
<ul class="info_list hidden">
<li>
<i class="iconfont icon-chakan"></i>
<span>51万</span>
</li>
<li>
<i class="iconfont icon-huihua"></i>
<span>120</span>
</li>
</ul>
</div>
</li>
<li class="item"><!--图片及文字容器-->
<img src="https://tukuimg.bdstatic.com/processed/7e4602899d113dcf4bb36f02d3c0291a.jpeg@s_0,w_660,h_370,q_80,f_webp" alt=""><!--图片-->
<div class="blak"></div><!--背景层-->
<div class="info">
<div class="info_top">据说针筒靠近特斯拉线圈能抽取光源,试了很成功,那用稀有气体呢</div>
<div class="info_center">胡一零</div>
<ul class="info_list hidden">
<li>
<i class="iconfont icon-chakan"></i>
<span>51万</span>
</li>
<li>
<i class="iconfont icon-huihua"></i>
<span>120</span>
</li>
</ul>
</div>
</li>
<li class="item"><!--图片及文字容器-->
<img src="https://tukuimg.bdstatic.com/processed/7e4602899d113dcf4bb36f02d3c0291a.jpeg@s_0,w_660,h_370,q_80,f_webp" alt=""><!--图片-->
<div class="blak"></div><!--背景层-->
<div class="info">
<div class="info_top">据说针筒靠近特斯拉线圈能抽取光源,试了很成功,那用稀有气体呢</div>
<div class="info_center">胡一零</div>
<ul class="info_list hidden">
<li>
<i class="iconfont icon-chakan"></i>
<span>51万</span>
</li>
<li>
<i class="iconfont icon-huihua"></i>
<span>120</span>
</li>
</ul>
</div>
</li>
<li class="item"><!--图片及文字容器-->
<img src="https://tukuimg.bdstatic.com/processed/7e4602899d113dcf4bb36f02d3c0291a.jpeg@s_0,w_660,h_370,q_80,f_webp" alt=""><!--图片-->
<div class="blak"></div><!--背景层-->
<div class="info">
<div class="info_top">据说针筒靠近特斯拉线圈能抽取光源,试了很成功,那用稀有气体呢</div>
<div class="info_center">胡一零</div>
<ul class="info_list hidden">
<li>
<i class="iconfont icon-chakan"></i>
<span>51万</span>
</li>
<li>
<i class="iconfont icon-huihua"></i>
<span>120</span>
</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="video">
<div class="title">影视</div>
<ul><!--图片及文字容器-->
<li>
<div class="top"><!--上半部分图片-->
<img src="https://tukuimg.bdstatic.com/processed/35e851eb6e1a062e4d5d52e48be2065e.jpeg@s_0,w_660,h_370,q_80" alt="图片无法显示">
<span>00:34</span>
</div>
<p class="top_title">端午节 成都去俄么塘必备三日游攻略#端午节旅行清单#</p>
<div class="icon hidden"><!--图标部分-->
<div class="icon_itme">
<i class="iconfont icon-chakan"></i>
<span>1495</span>
</div>
<div class="icon_itme">
<i class="iconfont icon-huihua"></i>
<span>0</span>
</div>
</div>
</li>
</ul>
</div><!--影视-->
</div>
</div>
<div class="footer">
<div class="footer_wrap">
<ul class="footer_top hidden">
<li>
<a href="">品牌合作</a>
<a href="">品牌合作</a>
</li>
<li>
<a href="">品牌合作</a>
<a href="">品牌合作</a>
</li>
<li>
<a href="">品牌合作</a>
</li>
<li class="line"></li>
<li class="code hidden">
<div class="text left">
<p>扫码下载客户端</p>
<p>轻松有收获</p>
</div>
<img class="left" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAdQAAAHUAQMAAAC56UsvAAAABlBMVEUAAAD///+l2Z/dAAACTUlEQVR42u3cQW7DMAxEUd3A97+lb8A2qS0OKaUFsukE+EYQJI6eu7EEmqQ64u3jHFisnT3HPPJq3yePeJx5friGPT/kYCzW0uq8eAwQe73reJkIWKyjPcu9fd3891Hu/DYYi3W291zQr+UnLPbjbP31OnNgsR9i9bnyHpaxygzC/4pzsFgH2x8Pf329fA7FYh3skvrLufAzC6JELy/zhFisg70XbU33ZYZkyNWWfCAWa2f1PtdA5X7lZeelNJGCxVrajLSPKImRpZKYsTcW62ZvVcKVMWYh5vp6lHcs1tZmzUXXc03utVglsFhju1vkrwseJRTXiB2LdbTz4fHscbWWY/R5UwuOWKybnWfm/Z8tTBKitEwgFutoa1jSFu2W69vUFrFYM6s3eetZmu3T2ROyDbyxWCebab0ZsURoaSYvqw17WKyfzZ90M0tkebHE3m2+YLFmNsdomC2VF/1QWkGwWENbO07bdq2cHWutHIv1s9rasTadrpXH7KPGYt3s0sukMXbvd1r2J2KxbrbNgtLLdGSlRmvl5c9hsU62tXxoiTxz17V/r2UIsVgXuyzvGX5HrvN6vsQzWKyVjc222dJKveRMSpyDxVpZ6TWN9o9oWldeDVewWEerx7nbWhibQvl4tS0Xi/1f21J80QuLGbSM3nqKxRpaXed7kmRpTN20WGOxVrat1TXkntu4WvUci3W3c9iudzp04wAW62/P0RIgPWUdy95wLNbNRslO76dA3dvScn1YrI/tz5KxqZWPMTYtTFism337wGLt7BcOoXzuYAD95QAAAABJRU5ErkJggg==" alt="">
</li>
</ul>
</div>
<div class="footer_bottom">
© 2021 Baidu 京ICP证030173号 京公网安备11000002000001 京网文20172863-327号
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,85 @@
<!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>Document</title>
<style>
body,
ul,
li,
h1,
h2,
h3,
h4,
h5,
h6,
p,
input {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
p {
text-decoration: none;
}
.header {
width: 654px;
height: 44px;
margin: 50px auto;
}
.keyword {
height: 100%;
width: 546px;
box-sizing: border-box;
border: 2px solid #c4c7ce;
border-radius: 10px 0px 0px 10px;
float: left;
border-right: none;
background: url(../../../上课项目/car.png);
background-repeat: no-repeat;
background-size: 24px 20px;
background-position: 502px center;
padding-left: 10px;
font-size: 16px;
}
.submit{
width: 108px;
height: 100%;
background-color: #4e6ef2;
float: left;
border-radius: 0px 10px 10px 0px;
border-left:none ;
color: #fff;
font-size: 17px;
}
input {
border: none;
outline: none;
}
.keyword:focus{
border: 2px solid #4e6ef2;
border-right: none;
}
</style>
</head>
<body>
<div class="header">
<input type="text" class="keyword">
<img src="" alt="">
<input type="button" value="百度一下" class="submit">
</div>
</body>
</html>

View File

@@ -0,0 +1,108 @@
<!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>Document</title>
</head>
<style>
body,
ul,
li,
h1,
h2,
h3,
h4,
h5,
h6,
p,
input {
padding: 0;
margin: 0;
}
input {
border: none;
outline: none;
}
a {
text-decoration: none;
}
.search {
width: 654px;
height: 44px;
margin: 50px auto;
}
.search .left {
width: 546px;
height: 44px;
float: left;
position:relative;
}
.left input {
width: 100%;
height: 100%;
border: 2px solid #c4c7ce;
border-radius: 10px 0 0 10px;
box-sizing: border-box;
border-right: none;
padding-left: 15px;
font-size: 16px
}
.img {
width: 24px;
height: 20px;
background-color: black;
position:absolute;
right: 22px;
top: 50%;
margin-top: -10px;
background: url(https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/searchbox/nicon-10750f3f7d.png);
background-position: 0px -51px;
}
.img:hover{
background-position: 0px -75px;
}
.submit {
width: 108px;
height: 100%;
background: #4e6ef2;
color: #fff;
float: left;
border-radius: 0 10px 10px 0;
font-size: 17px;
}
.left input :focus {
border: 2px solid #4e6ef2;
box-sizing: border-box;
}
.keyword:focus{
border: 2px solid #4e6ef2;
border-right: none;
}
</style>
<body>
<div class="search">
<div class="left">
<input type="text" class="keyword">
<div class="img"></div>
</div>
<input type="button" value="百度一下" class="submit">
</div>
</body>
</html>

View File

@@ -0,0 +1,18 @@
body,ul,li,p,h1,h2,h3,h4,h5,h6 {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
input {
outline: none;
border: none;
padding: 0;
}

View File

@@ -0,0 +1,828 @@
.header {}
.header_menu {
height: 36px;
background: #2e2828;
line-height: 33px;
}
.header_menu a{
color: #afafaf;
font-size: 12px;
}
.left_menu li,
.right_menu li {
float: left;
padding: 0 8px;
position: relative;
}
.left_menu li::after,
.right_menu li::after {
content: "";
width: 1px;
height: 10px;
display: block;
position: absolute;
top: 14px;
right: -1px;
background: #414141;
}
.right_menu li:nth-child(5)::after,
.right_menu li:nth-child(6)::after {
width: 0;
}
.left_menu li:nth-child(7)::after{
width: 0;
}
.right_menu i{
font-size: 14px;
}
.car{padding: 0 12px 0 10px;
background: #424242;
}
.icon-xiangshangjiantou{
padding-left: 3px;
font-size: 12px !important;
}
.right_menu li:hover .icon-xiangshangjiantou{
display: inline-block;
transform: rotate(180deg);
}
.gengduo{
position: absolute;
width: 119px;
padding: 6px 0 12px 0;
text-align: center;
line-height: 32px;
right: -20px;
background: #ffff;
top: 36px;
display:none;
box-sizing: border-box;
box-shadow: 0 2px 36px 0 rgb(0 0 0 / 7%);
z-index: 9;
}
.gd:hover .gengduo{
display:block;
}
.kefu{
position: absolute;
width: 84px;
height: 88px;
padding: 12px 18px;
background: #ffff;
box-sizing: border-box;
right: -11px;
top: 36px;
display:none;
z-index: 9;
box-shadow: 0 2px 36px 0 rgb(0 0 0 / 7%);
}
.kf:hover .kefu{
display:block;
}
.daohang{
position: absolute;
width: 893px;
height: 210px;
background: #ffff;
box-shadow: 0 2px 36px 0 rgb(0 0 0 / 7%);
border-radius: 8px 0 8px 8px;
right: 0;
top: 36px;
z-index: 9;
padding-top: 37px;
padding-left: 49px;
box-sizing: border-box;
display:none;
z-index: 9;
}
.icon_home {
width: 50px;
height: 50px;
background: url("../img/img/icon-common.svg");
background-position: -202px 0;
margin-right: 46px;
}
.drop_menu_item {
float: left;
width: 185.0px;}
.drop_menu_item:first-child
{
width: auto !important;
}
.drop_menu_item a {
display: inline-block;
width: 40%;
line-height: 0px;
}
.dh:hover .daohang{
display:block;
}
.zp{
width: 284x;
position: absolute;
background: #ffff;
height: 300;
box-shadow: 0 2px 36px 0 rgb(0 0 0 / 7%);
right: 0;
top: 36px;
display:none;
z-index: 9;
}
.att:hover .zp{
display:block;
}
.app{
padding: 20px 0 20px 0;
width: 244px;
height: auto;
}
.app img{
width: 90px;
height: 90px;
float: left;
margin-right: 12px;
}
/*图标部分 */
.header_logo{
height: 41px;
padding: 18px 0 15px 0;
box-shadow: 0 0 46px rgb(0 0 0 / 3%);
}
.logo{/*图标 */
height: 36px;
margin-right: 34px;
}
.menus img{/*第一个图片 */
height: 24px;
margin-top: 9px;
}
.menus li{/*文字布局 */
float: left;
margin-right: 24px;
line-height: 41px;
}
.menus li a{/*超链接 */
font-size: 16px;
color: #333;
}
.search{/*搜索条 */
position: relative;
width: 238px;
height: 28px;
}
.search input{
background: #f0f0f0;
border: 1px solid #f0f0f0;
border-radius: 15px;
width: 100%;
height: 100%;
text-align: right;
padding-right: 35px;
box-sizing: border-box;
}
.search i{
position: absolute;
right: 11px;
top: 50%;
transform: translateY(-50%);
font-size: 13px;
}
.search_kuang{/*搜索历史框*/
width: 240px;
height:300.8px ;
background-color: #ffff;
border-radius: 20px;
box-shadow: 0 2px 36px 0 rgb(0 0 0 / 7%);
display:none;
z-index: 9;
}
.search input:focus +.search_kuang{
display: block;/*问题1 */
}
.search_kuang p {
float: left;
font-size: 10px;
margin-left: 10px;
margin-top: 3px;
}
.search_kuang span{
float: right;
margin-right: 5px;
margin-top: 3px;
font-size: 10px;
}
.search_kuang li{
clear: both;
display: block;
overflow: hidden;
color: #333;
height: 30px;
line-height: 30px;
margin-left: 10px;
}
.search_kuang .huaxian{
border-top: 1px solid #f2f2f5;
}
/* 主体部分*/
.banner{/*背景图*/
background:url(https://res.vmallres.com/pimages//pages/picImages/20956554622615565902.jpg);
height:514px ;
background-position: 50% 0px;
border-bottom-left-radius: 191px 52px;
border-bottom-right-radius: 191px 52px;
}
.banner_center{/*容器*/
height:100%;
position: relative;
}
.banner_menu {/*按钮布局*/
position: absolute;
left: 0;
top: 18px;
width: 200px;
height: 440px;
box-shadow: 0 0 28px rgb(0 0 0 / 8%);
background: rgba(255,255,255,0.95);
border-radius: 10px;
}
.banner_menu li {
height: 40px;
line-height: 40px;
padding: 0 16px;
box-sizing: border-box;
position: relative;
}
.banner_menu li:first-child:hover {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.banner_menu li:last-child:hover {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.banner_menu li:hover {
background: #fff;
}
.banner_menu li a{
float: left;
font-size: 14px;
color: #848484;
}
.banner_menu i{
float: right;
font-size: 13px;
color: #848484;
}
.drow_menu{
position: absolute;
left: 192px;
width: 274px;
padding-left: 32px;
padding-top: 20px;
box-sizing: border-box;
height: 440px;
background: #fff;
border-radius: 0 10px 10px 0;
box-shadow: 0 0 46px rgb(0 0 0 / 10%);
display: none;
}
.banner_menu li:hover .drow_menu{
display: block;
}
.list {
padding-right: 20px;
}
.list .item {
margin-bottom: 15px;
height: 60px;
padding: 8px 5px 0px 5px;
border-radius: 10px;
width: 230px;
}
.list .item:hover{
background-color: #f6f6f6;
}
.item img{
width: 48px;
height: 48px;
margin-right:8px;
vertical-align: middle;
}
.show_all {
width: 112px;
height: 42px;
position: relative;
border: 1px solid #f2f2f2;
border-radius: 0 22px 22px 0;
font-size: 13px;
color: #999;
text-align: center;
margin-left: 26px;
margin-top: 24px;
}
.icon-bofang {
position: absolute;
display: inline-block;
width: 42px;
height: 42px;
background: #fff;
border: 1px solid #f2f2f2;
border-radius: 22px;
left: -20px;
top: -1px;
}
.drow_menuzn{
position: absolute;
left: 192px;
width: 554px;
top: -40px;
padding-left: 32px;
padding-top: 20px;
box-sizing: border-box;
height: 440px;
background: #fff;
border-radius: 0 10px 10px 0;
box-shadow: 0 0 46px rgb(0 0 0 / 10%);
display: none;
}
.aaa{
margin-top: 3px;
}
.banner_menu li:hover .drow_menuzn{
display: block;
}
/*用户登录*/
.user_info{
height: 88px;
background: #fff;
border-radius: 10px;
box-shadow: 0 2px 26px rgb(0 0 0 / 7%);
position: absolute;
bottom: -46px;
width: 100%;
}
.user_info li{
float: left;
}
.user_info li:first-child {
width: 270px;
height: 55px;
margin-top: 17px;
border-right: 1px solid #eee;
padding-left: 26px;
box-sizing: border-box;
}
.user_info li:first-child img{
width: 52px;
height: 52px;
margin-right: 17px;
}
.user_info li:first-child a {
color: #333;
}
.user_info li:first-child p {
font-size: 14px;
color: #999;
margin-bottom: 6px;
}
.user_text .news {
display: inline-block;
width: 66px;
height: 20px;
text-align: center;
line-height: 20px;
border-radius: 5px;
border: 1px solid #e47b7f;
color: #de5b60 !important;
font-size: 13px;
}
.user_text .vip {
color: #fde4b3 !important;
background: #595454;
border: 1px solid #595454 !important;
margin-left: 8px;
width: 68px;
height: 22px;
font-size: 13px;
border-radius: 5px;
padding: 0px 4px;
box-sizing: border-box;
}
/*登录中间*/
.user_info li:nth-child(2){
width: 660px;
margin-top: 17px;
overflow: hidden;
border-right: 1px solid #eee;
}
.icon_item {
float: left;
width: 84px;
text-align: center;
margin: 0 10px;
}
.icon_item img {
width: 40px;
height: 40px;
}
.icon_item p {
font-size: 12px;
color: #777;
}
.user_info li:nth-child(3) {
width: 266px;
height: 88px;
}
.top_tips {
height: 43px;
line-height: 43px;
}
.top_tips span{
color: #777;
font-size: 14px;
font-weight: 700;
margin-left: 12px;
margin-right: 5px;
}
.top_tips a{
color: #6f6f6f;
font-size: 12px;
}.b_icon {
float: left;
height: 42px;
line-height: 42px;
width: 88px;
border-top: 1px solid #eee;
text-align: center;
}
.b_icon img {
width: 20px;
height: 20px;
vertical-align: middle;
}
.b_icon span {
color: #666;
font-size: 12px;
}
/*作业*/
.dhtupian{
width: 100%;
height: 200px;
position: absolute;
bottom: -264px;
}
.dhtupian li{
float: left;
margin-right: 13px;
}
.dhtupian li:last-child{
margin-right: 0px;
}
.dhtupian li img{
width: 290px;
height: 200px;
border-radius: 10px;
}
.rexiao{
width: 100%;
height: 26px;
position: absolute;
bottom: -307px;
padding: 27px 0 13px 0;
}
.rexiao h2{
font-size: 26px;
color: #333;
padding: 27px 0 13px 0;
}
.rexiaotupian{
width: 100%;
height: 604px;
position: absolute;
bottom: -940px;
}
.rexiaotupian .biao{
width: 230px;
height: 592px;
border-radius: 10px;
float: left;
}
.rexiaotupian ul li{
width: 228px;
height: 290px;
float: left;
background: #f9f9f9;
border-radius: 10px;
margin-left: 14px;
margin-bottom: 12px;
margin-top: 0;
}
.rexiaotupian ul li a{
display: inline-block;
width: 100%;
height: 100%;
text-align: center;
margin-top:50%;
transform: translateY(-25%);
}
.rexiaotupian ul li img{
width: 150px;
height: 150px;
}
.rexiaotupian ul li .t{
font-size: 14px;
color: #3a3a3a;
margin-bottom: 3px;
}
.rexiaotupian ul li .x{
color: #777;
line-height: 18px;
padding: 0 10px;
margin: 2px 20px 7px;
font-size: 5px;
}
.rexiaotupian ul li .j{
color: #d0021b;
line-height: 21px;
margin-bottom: 0;
}
.rexiaotupian ul li:hover{
box-shadow:0px 0px 10px #000;
}
/*下半部分*/
.footer{
background-color: #f9f9f9;
margin-top: 949px;/*问题3*/
}
.shang{
width: 100%;
height: 82px;
border-bottom: 1px solid #e5e5e5;;
box-sizing: border-box;
}
.shang li{
float: left;
padding-right: 120px;
line-height: 82px;
}
.shang li:last-child{
padding-right: 0px;
}
.one_q {
background: url(../img/img/icon01.svg);
width: 40px;
height: 40px;
display: inline-block;
margin-right: 15px;
background-position: -154px 0;
vertical-align: middle;
}
.one_w{
background: url(../img/img/icon01.svg);
width: 40px;
height: 40px;
display: inline-block;
margin-right: 15px;
background-position: -74px 0;
vertical-align: middle;
}
.one_e{
background: url(../img/img/icon01.svg);
width: 40px;
height: 40px;
display: inline-block;
margin-right: 15px;
background-position: -194px 0;
vertical-align: middle;
}
.one_r{
background: url(../img/img/icon01.svg);
width: 40px;
height: 40px;
display: inline-block;
margin-right: 15px;
background-position: -114px 0;
vertical-align: middle;
}
.zhong{
width: 100%;
height: 210.6px;
box-sizing: border-box;
}
.zhong_zuo{
width: 920px;
height: 210.6px;
padding: 23px 0 24px;
box-sizing: border-box;
float: left;
}
.zhong_you{
width: 278px;
height: 160px;
float:right;
text-align: center;
padding: 23px 0 24px;
box-sizing: border-box;
}
.zhong_you p:first-child{
font-size: 24px ;
color: #575757;
font-weight: bold;
}
.zhong_you p:nth-child(2n){
color: #575757;
font-size: 14px;
margin-top: 5px;
}
.zhong_you .bejing{
width: 170px;
height: 34px;
border-radius: 17px;
background: #777;
display: inline-block;
line-height: 34px;
margin-top: 5px;
color: #fff;
}
.you_tubiao{
width: 250px;
height: 24px;
margin-top: 26px;
}
.you_tubiao li{
float: left;
margin-left: 11px;
}
.you_tubiao a .tubiao_a{
background: url(../img/img/icon03.svg);
display: inline-block;
width: 24px;
height: 24px;
background-position: -126px -24px;
}
.you_tubiao a .tubiao_b{
background: url(../img/img/icon03.svg);
display: inline-block;
width: 24px;
height: 24px;
background-position: -150px -24px;
}
.you_tubiao a .tubiao_c{
background: url(../img/img/icon03.svg);
display: inline-block;
width: 24px;
height: 24px;
background-position: -174px -24px;}
.you_tubiao a .tubiao_d{
background: url(../img/img/icon03.svg);
display: inline-block;
width: 24px;
height: 24px;
background-position: -24px -36px;
}
.content_zj{
width: 1200px;
margin: 0 auto;
position: relative;
}
.xia{
width: 100%;
height: 134px;
padding: 25px 0 28px 0;
border-top: 1px solid #e5e5e5;
box-sizing: border-box;
position: relative;
}
.xia .zwf{
width: 82px;
height: 134px;
padding: 3px 20px 0 0;
float: left;
box-sizing: border-box;
}
.xia .zwf img{
width: 82px;
height: 20px;
}
.zhong_zuo li{
float: left;
line-height: 22px;
padding-right: 79px;
}
.zhong_zuo h3{
padding-top: 5px;
font-size: 14px;
margin-bottom: 19px;
}
.zhong_zuo li a{
padding-bottom: 7px;
color: #777;
line-height: 22px;
font-size: 12px;
}
.zhong_zuo li:last-child{
border-right: 1px solid #d3d3d3;
}
.zhong_zuo ul li a:hover{
color: crimson;
}
.zjbj{
box-sizing: border-box;
text-align:left;
}
.zjbj .ul_a li,.zjbj .ul_a li a{
color: #a4a4a4;
padding-right: 6px;
font-size: 12px;
line-height: 20px;
box-sizing: border-box;
}
.shangb{
position: absolute;
top: 25px;
height: 24px;
right: 13px;
}
.zjbj .ul_a li a:hover{
color: crimson;
}
.zjbj .ul_a li span{
border-right: 1px solid #d3d3d3;
}

View File

@@ -0,0 +1,22 @@
.left {
float: left;
}
.right {
float: right;
}
.hidden {
overflow: hidden;
}
.layout {
width: 1200px;
margin: 0 auto;
}
.relative {
position: relative;
}
.absolute {
position: absolute;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

View File

@@ -0,0 +1,291 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="362px" height="180px" viewBox="-116 330.9 362 180" style="enable-background:new -116 330.9 362 180;"
xml:space="preserve">
<style type="text/css">
.st0{fill:none;}
.st1{fill:#CF0A2C;}
.st2{fill:none;stroke:#CA141D;stroke-linecap:round;stroke-linejoin:round;}
.st3{fill:none;stroke:#00B5E2;stroke-linecap:round;stroke-linejoin:round;}
.st4{fill:#777777;}
.st5{opacity:0.8953;fill:#777777;enable-background:new ;}
.st6{fill:#FFFFFF;}
.st7{fill:none;stroke:#AFAFAF;stroke-linecap:round;stroke-linejoin:round;}
.st8{fill:#AFAFAF;}
.st9{fill:#00B5E2;}
.st10{fill:#F3F3F3;}
.st11{fill:none;stroke:#979797;stroke-width:2;}
.st12{fill:none;stroke:#979797;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.st13{fill:#F7F7F7;}
.st14{fill:#B8B8B8;}
.st15{fill:#333333;}
.st16{fill:#797979;}
.st17{fill:#FF8486;}
.st18{opacity:0.5;}
.st19{fill:#D20A2C;}
.st20{fill:#CA141D;}
</style>
<title>icon-common</title>
<desc>Created with Sketch.</desc>
<g>
<g id="icon-common">
<g id="编组-6" transform="translate(179.000000, 0.000000)">
<rect id="矩形" x="-115.9" y="330.9" class="st0" width="20" height="20"/>
<path id="Fill-1" class="st1" d="M-112.6,344.1c-0.3-2.8,1.7-4,2-6.7c0,0,0.7,1.3,0.6,2.7c0,0,3.3-3.6,3.1-7.4c0,0,3.1,1,4.3,5.8
c0,0,1.2-0.7,0.4-2.8c0,0,3.9,3.5,3.3,7.5c-0.8,4.8-4.6,6.1-7.5,6.1C-108.7,349.3-112.2,347.6-112.6,344.1"/>
</g>
<g id="编组-2" transform="translate(71.000000, 0.000000)">
<rect id="矩形_1_" x="-115.9" y="330.9" class="st0" width="14" height="14"/>
</g>
<g id="编组-2复制" transform="translate(85.000000, 0.000000)">
<rect id="矩形_2_" x="-115.9" y="330.9" class="st0" width="14" height="14"/>
<polyline id="形状" class="st2" points="-112.9,339.9 -108.9,335.9 -104.9,339.9 "/>
</g>
<g id="编组-2复制备份" transform="translate(85.000000, 146.000000)">
<rect id="矩形_3_" x="-115.9" y="330.9" class="st0" width="14" height="14"/>
<polyline id="形状_1_" class="st3" points="-112.9,339.9 -108.9,335.9 -104.9,339.9 "/>
</g>
<g id="编组">
<rect id="矩形_4_" x="-115.9" y="330.9" class="st0" width="30" height="30"/>
<path id="Combined-Shape" class="st4" d="M-97.8,344.9v2.3c0,0.4-0.3,0.7-0.8,0.7c-0.4,0-0.8-0.3-0.8-0.7v-2.3h-2.3v2.3
c0,0.4-0.3,0.7-0.8,0.7c-0.4,0-0.8-0.3-0.8-0.7v-2.3h-0.3c-0.4,0-0.7-0.1-1-0.4c-0.3-0.2-0.4-0.6-0.4-0.9v-6.1h8.8v6.1
c0,0.3-0.1,0.7-0.4,0.9c-0.3,0.2-0.6,0.4-1,0.4H-97.8z M-93.9,338.2v3.3c0,0.4-0.3,0.7-0.8,0.7c-0.4,0-0.8-0.3-0.8-0.7v-3.3
c0-0.4,0.3-0.7,0.8-0.7S-93.9,337.8-93.9,338.2z M-106.9,341.5v-3.3c0-0.4,0.3-0.7,0.8-0.7c0.4,0,0.8,0.3,0.8,0.7v3.3
c0,0.4-0.3,0.7-0.8,0.7S-106.9,341.9-106.9,341.5z M-96,337h-8.8c0-1.2,0.6-2.3,1.6-3.1l0.4-0.3c1.5-0.9,3.4-0.9,4.8,0l0.4,0.3
C-96.6,334.6-96.1,335.8-96,337z M-102.4,334.6c-0.3,0-0.5,0.2-0.5,0.5s0.2,0.5,0.5,0.5s0.5-0.2,0.5-0.5
C-101.9,334.9-102.1,334.6-102.4,334.6z M-98.5,334.6c-0.3,0-0.5,0.2-0.5,0.5s0.2,0.5,0.5,0.5s0.5-0.2,0.5-0.5
C-98,334.9-98.2,334.6-98.5,334.6z"/>
<path id="Android" class="st5" d="M-110.5,358.9h-0.9l-0.6-1.7h-2.5l-0.6,1.7h-0.9l2.3-6.1h0.8L-110.5,358.9z M-112.2,356.6
l-0.9-2.5c0-0.1-0.1-0.2-0.1-0.4l0,0c0,0.2-0.1,0.3-0.1,0.4l-0.9,2.5H-112.2z M-106.1,358.9h-0.8v-2.5c0-0.9-0.3-1.3-1-1.3
c-0.3,0-0.6,0.1-0.8,0.4s-0.3,0.6-0.3,0.9v2.5h-0.8v-4.3h0.8v0.7l0,0c0.3-0.5,0.8-0.8,1.4-0.8c0.5,0,0.8,0.2,1.1,0.5
c0.2,0.3,0.4,0.7,0.4,1.3C-106.1,356.3-106.1,358.9-106.1,358.9z M-101.1,358.9h-0.8v-0.7l0,0c-0.3,0.5-0.8,0.8-1.5,0.8
c-0.5,0-1-0.2-1.3-0.6c-0.3-0.4-0.5-0.9-0.5-1.6s0.2-1.3,0.5-1.7c0.4-0.4,0.8-0.6,1.4-0.6c0.6,0,1,0.2,1.3,0.7l0,0v-2.7h0.8
L-101.1,358.9L-101.1,358.9z M-101.9,356.3c0-0.3-0.1-0.6-0.3-0.9c-0.2-0.2-0.5-0.3-0.8-0.3c-0.4,0-0.7,0.2-1,0.5
c-0.2,0.3-0.4,0.7-0.4,1.2s0.1,0.9,0.3,1.1c0.2,0.3,0.5,0.4,0.9,0.4s0.7-0.1,0.9-0.4c0.2-0.3,0.4-0.6,0.4-1L-101.9,356.3
L-101.9,356.3z M-97.5,355.3c-0.1-0.1-0.3-0.1-0.5-0.1c-0.3,0-0.5,0.1-0.7,0.4c-0.2,0.3-0.3,0.6-0.3,1.1v2.2h-0.8v-4.3h0.8v0.9
l0,0c0.2-0.6,0.6-1,1.1-1c0.2,0,0.3,0,0.4,0.1V355.3z M-97.2,356.8c0-0.7,0.2-1.3,0.6-1.7c0.4-0.4,0.9-0.6,1.6-0.6
c0.6,0,1.2,0.2,1.5,0.6c0.4,0.4,0.6,0.9,0.6,1.6s-0.2,1.2-0.6,1.7c-0.4,0.4-0.9,0.6-1.6,0.6c-0.6,0-1.2-0.2-1.5-0.6
C-97,358-97.2,357.4-97.2,356.8z M-96.5,356.8c0,0.5,0.1,0.9,0.4,1.2c0.3,0.3,0.6,0.4,1,0.4s0.8-0.1,1-0.4s0.3-0.7,0.3-1.2
s-0.1-0.9-0.3-1.2s-0.6-0.4-1-0.4s-0.8,0.1-1,0.4C-96.3,355.8-96.5,356.2-96.5,356.8z M-92,353c0-0.1,0-0.2,0.1-0.3
s0.2-0.1,0.3-0.1s0.3,0,0.3,0.1c0.1,0.1,0.1,0.2,0.1,0.3s0,0.2-0.1,0.3s-0.2,0.1-0.3,0.1s-0.3,0-0.3-0.1
C-92,353.3-92,353.2-92,353z M-91.9,358.9v-4.3h0.8v4.3H-91.9z M-86.1,358.9h-0.8v-0.7l0,0c-0.3,0.5-0.8,0.8-1.5,0.8
c-0.5,0-1-0.2-1.3-0.6c-0.3-0.4-0.5-0.9-0.5-1.6s0.2-1.3,0.5-1.7c0.4-0.4,0.8-0.6,1.4-0.6c0.6,0,1,0.2,1.3,0.7l0,0v-2.7h0.8
L-86.1,358.9L-86.1,358.9z M-86.9,356.3c0-0.3-0.1-0.6-0.3-0.9c-0.2-0.2-0.5-0.3-0.8-0.3c-0.4,0-0.7,0.2-1,0.5
c-0.2,0.3-0.4,0.7-0.4,1.2s0.1,0.9,0.3,1.1c0.2,0.3,0.5,0.4,0.9,0.4s0.7-0.1,0.9-0.4c0.2-0.3,0.4-0.6,0.4-1L-86.9,356.3
L-86.9,356.3z"/>
</g>
<g id="编组_1_" transform="translate(32.000000, 0.000000)">
<rect id="矩形_5_" x="-115.9" y="330.9" class="st6" width="30" height="30"/>
<path id="合并形状" class="st4" d="M-98.1,338.2c-2.9,0-5.2,2.2-5.2,4.9c0,0.5,0.1,0.9,0.2,1.3c-0.2,0-0.4,0-0.6,0
c-0.8,0-1.4-0.2-2.2-0.3l-2.2,1.1l0.6-1.9c-1.5-1.1-2.5-2.5-2.5-4.2c0-2.9,2.8-5.3,6.2-5.3c3,0,5.7,1.9,6.2,4.3
C-97.7,338.2-97.9,338.2-98.1,338.2z M-101.4,336.5c-0.5,0-0.9,0.3-0.9,0.8s0.5,0.8,0.9,0.8c0.5,0,0.8-0.3,0.8-0.8
C-100.7,336.8-101,336.5-101.4,336.5z M-105.7,338.1c0.5,0,0.8-0.3,0.8-0.8s-0.3-0.8-0.8-0.8s-0.9,0.3-0.9,0.8
C-106.7,337.8-106.2,338.1-105.7,338.1z M-92.5,343c0,1.4-0.9,2.6-2.2,3.6l0.5,1.5l-1.7-0.9c-0.6,0.2-1.2,0.3-1.8,0.3
c-2.9,0-5.2-2-5.2-4.5s2.3-4.5,5.2-4.5C-95,338.5-92.5,340.5-92.5,343z M-99.4,342.2c0.5,0,0.8-0.3,0.8-0.6s-0.3-0.6-0.8-0.6
c-0.3,0-0.6,0.3-0.6,0.6S-99.7,342.2-99.4,342.2z M-96,342.2c0.5,0,0.8-0.3,0.8-0.6s-0.3-0.6-0.8-0.6c-0.3,0-0.6,0.3-0.6,0.6
S-96.3,342.2-96,342.2z"/>
<path id="WeChat" class="st5" d="M-107.7,352.8l-1.7,6.1h-0.9l-1.2-4.4c-0.1-0.2-0.1-0.4-0.1-0.6l0,0c0,0.2-0.1,0.4-0.1,0.6
l-1.2,4.4h-0.9l-1.8-6.1h0.9l1.2,4.6c0.1,0.2,0.1,0.4,0.1,0.6l0,0c0-0.2,0.1-0.4,0.1-0.6l1.3-4.6h0.8l1.3,4.6
c0,0.2,0.1,0.3,0.1,0.6l0,0c0-0.2,0.1-0.4,0.1-0.6l1.2-4.6H-107.7z M-103.7,356.9h-3c0,0.5,0.1,0.8,0.4,1.1
c0.2,0.3,0.6,0.4,1,0.4c0.5,0,0.9-0.2,1.3-0.5v0.7c-0.4,0.3-0.9,0.4-1.5,0.4s-1.1-0.2-1.5-0.6c-0.4-0.4-0.5-0.9-0.5-1.6
s0.2-1.2,0.6-1.6c0.4-0.4,0.9-0.6,1.4-0.6c0.6,0,1,0.2,1.3,0.5c0.3,0.4,0.5,0.9,0.5,1.5C-103.7,356.6-103.7,356.9-103.7,356.9z
M-104.5,356.3c0-0.4-0.1-0.7-0.3-0.9s-0.4-0.3-0.8-0.3c-0.3,0-0.6,0.1-0.8,0.3s-0.4,0.5-0.4,0.9H-104.5z M-98.5,358.6
c-0.4,0.2-1,0.4-1.7,0.4c-0.9,0-1.6-0.3-2.1-0.8c-0.5-0.6-0.8-1.3-0.8-2.2c0-1,0.3-1.8,0.9-2.4c0.6-0.6,1.3-0.9,2.2-0.9
c0.6,0,1.1,0.1,1.4,0.2v0.8c-0.4-0.2-0.9-0.4-1.4-0.4c-0.7,0-1.2,0.2-1.6,0.7c-0.4,0.4-0.6,1.1-0.6,1.8s0.2,1.3,0.6,1.7
s0.9,0.6,1.6,0.6c0.6,0,1.1-0.1,1.6-0.4L-98.5,358.6L-98.5,358.6L-98.5,358.6z M-93.8,358.9h-0.8v-2.5c0-0.9-0.3-1.3-1-1.3
c-0.3,0-0.6,0.1-0.8,0.4c-0.2,0.3-0.3,0.6-0.3,1v2.4h-0.8v-6.4h0.8v2.8l0,0c0.3-0.5,0.8-0.8,1.4-0.8c1,0,1.5,0.6,1.5,1.8
C-93.8,356.3-93.8,358.9-93.8,358.9z M-92.5,354.9c0.4-0.3,0.9-0.4,1.5-0.4c1,0,1.6,0.5,1.6,1.6v2.8h-0.8v-0.7l0,0
c-0.3,0.5-0.7,0.8-1.3,0.8c-0.4,0-0.8-0.1-1-0.3s-0.4-0.5-0.4-0.9c0-0.8,0.5-1.3,1.4-1.4l1.3-0.2c0-0.7-0.3-1.1-0.9-1.1
c-0.5,0-1,0.2-1.4,0.5C-92.5,355.6-92.5,354.9-92.5,354.9z M-91.2,356.9c-0.4,0-0.6,0.1-0.7,0.3c-0.1,0.1-0.2,0.3-0.2,0.5
s0.1,0.4,0.2,0.5c0.1,0.1,0.3,0.2,0.6,0.2s0.6-0.1,0.8-0.4c0.2-0.2,0.3-0.5,0.3-0.9v-0.4L-91.2,356.9z M-86.2,358.8
c-0.2,0.1-0.4,0.1-0.7,0.1c-0.8,0-1.2-0.4-1.2-1.3v-2.5h-0.7v-0.6h0.7v-1l0.8-0.2v1.3h1.1v0.6h-1.1v2.4c0,0.3,0,0.5,0.1,0.6
s0.3,0.2,0.5,0.2s0.3,0,0.4-0.1L-86.2,358.8L-86.2,358.8z"/>
</g>
<g id="编组-3" transform="translate(74.000000, 0.000000)">
<rect id="矩形_6_" x="-90.9" y="330.9" class="st0" width="20" height="20"/>
<polyline id="形状_2_" class="st7" points="-115.9,335.9 -111.9,339.9 -107.9,335.9 "/>
<g id="购物车" transform="translate(29.000000, 4.500000)">
<path id="路径-6" class="st8" d="M-113.4,333.6l1,4.3c0,0.2,0.2,0.3,0.4,0.3h6.1c0.2,0,0.4-0.1,0.4-0.3l1.4-4.4L-113.4,333.6
L-113.4,333.6z M-113.6,332.7h9.5c0.1,0,0.2,0,0.3,0c0.5,0.1,0.7,0.6,0.5,1.1l-1.4,4.4c-0.2,0.5-0.7,0.9-1.2,0.9h-6.1
c-0.6,0-1.1-0.4-1.3-1l-1.4-6.2h-1.2V331h1.2c0.4,0,0.8,0.3,0.8,0.7L-113.6,332.7z"/>
<path id="椭圆形" class="st8" d="M-111.8,342.8c-0.8,0-1.4-0.6-1.4-1.4s0.6-1.4,1.4-1.4c0.8,0,1.4,0.6,1.4,1.4
C-110.4,342.1-111,342.8-111.8,342.8z M-111.8,341.9c0.3,0,0.5-0.2,0.5-0.5s-0.2-0.5-0.5-0.5s-0.5,0.2-0.5,0.5
S-112.1,341.9-111.8,341.9z"/>
<path id="椭圆形-copy-2" class="st8" d="M-106.5,342.8c-0.8,0-1.4-0.6-1.4-1.4s0.6-1.4,1.4-1.4c0.8,0,1.4,0.6,1.4,1.4
C-105.1,342.1-105.7,342.8-106.5,342.8z M-106.5,341.9c0.3,0,0.5-0.2,0.5-0.5s-0.2-0.5-0.5-0.5s-0.5,0.2-0.5,0.5
S-106.8,341.9-106.5,341.9z"/>
</g>
</g>
<g id="编组-3复制" transform="translate(119.000000, 0.000000)">
<rect id="矩形_7_" x="-115.9" y="330.9" class="st0" width="20" height="20"/>
<g id="编组-4" transform="translate(4.069853, 4.567674)">
<path id="路径-6_1_" class="st1" d="M-113.5,333.4l1,4.3c0,0.2,0.2,0.3,0.4,0.3h6.1c0.2,0,0.4-0.1,0.4-0.3l1.4-4.4
L-113.5,333.4L-113.5,333.4z M-113.6,332.6h9.5c0.1,0,0.2,0,0.3,0c0.5,0.1,0.7,0.6,0.5,1.1l-1.4,4.4c-0.2,0.5-0.7,0.9-1.2,0.9
h-6.1c-0.6,0-1.1-0.4-1.3-1l-1.4-6.2h-1.2v-0.9h1.2c0.4,0,0.8,0.3,0.8,0.7L-113.6,332.6z"/>
<path id="椭圆形_1_" class="st1" d="M-111.8,342.6c-0.8,0-1.4-0.6-1.4-1.4s0.6-1.4,1.4-1.4s1.4,0.6,1.4,1.4
S-111,342.6-111.8,342.6z M-111.8,341.8c0.3,0,0.5-0.2,0.5-0.5s-0.2-0.5-0.5-0.5s-0.5,0.2-0.5,0.5
C-112.4,341.5-112.1,341.8-111.8,341.8z"/>
<path id="椭圆形-copy-2_1_" class="st1" d="M-106.5,342.6c-0.8,0-1.4-0.6-1.4-1.4s0.6-1.4,1.4-1.4s1.4,0.6,1.4,1.4
S-105.7,342.6-106.5,342.6z M-106.5,341.8c0.3,0,0.5-0.2,0.5-0.5s-0.2-0.5-0.5-0.5s-0.5,0.2-0.5,0.5
C-107,341.5-106.8,341.8-106.5,341.8z"/>
</g>
</g>
<g id="编组-3复制备份" transform="translate(100.000000, 146.000000)">
<rect id="矩形_8_" x="-115.9" y="330.9" class="st0" width="20" height="20"/>
<g id="编组-4_1_" transform="translate(4.069853, 4.567674)">
<path id="路径-6_2_" class="st9" d="M-113.5,333.4l1,4.3c0,0.2,0.2,0.3,0.4,0.3h6.1c0.2,0,0.4-0.1,0.4-0.3l1.4-4.4
L-113.5,333.4L-113.5,333.4z M-113.6,332.6h9.5c0.1,0,0.2,0,0.3,0c0.5,0.1,0.7,0.6,0.5,1.1l-1.4,4.4c-0.2,0.5-0.7,0.9-1.2,0.9
h-6.1c-0.6,0-1.1-0.4-1.3-1l-1.4-6.2h-1.2v-0.9h1.2c0.4,0,0.8,0.3,0.8,0.7L-113.6,332.6z"/>
<path id="椭圆形_2_" class="st9" d="M-111.8,342.6c-0.8,0-1.4-0.6-1.4-1.4s0.6-1.4,1.4-1.4s1.4,0.6,1.4,1.4
S-111,342.6-111.8,342.6z M-111.8,341.8c0.3,0,0.5-0.2,0.5-0.5s-0.2-0.5-0.5-0.5s-0.5,0.2-0.5,0.5
C-112.4,341.5-112.1,341.8-111.8,341.8z"/>
<path id="椭圆形-copy-2_2_" class="st9" d="M-106.5,342.6c-0.8,0-1.4-0.6-1.4-1.4s0.6-1.4,1.4-1.4s1.4,0.6,1.4,1.4
S-105.7,342.6-106.5,342.6z M-106.5,341.8c0.3,0,0.5-0.2,0.5-0.5s-0.2-0.5-0.5-0.5s-0.5,0.2-0.5,0.5
C-107,341.5-106.8,341.8-106.5,341.8z"/>
</g>
</g>
<g id="编组-5" transform="translate(262.000000, 0.000000)">
<circle id="椭圆形_3_" class="st10" cx="-65.9" cy="380.9" r="50"/>
<g id="分组-2" transform="translate(19.000000, 29.000000)">
<circle id="椭圆形_4_" class="st11" cx="-94.9" cy="373.9" r="4"/>
<circle id="椭圆形-copy" class="st11" cx="-71.9" cy="373.9" r="4"/>
<path id="路径-3" class="st11" d="M-115.9,331.2h5.9c1.1,0,2.1,0.8,2.4,1.8l7.3,27.1c0.6,2.2,2.6,3.7,4.8,3.7h26.1
c2.2,0,4.2-1.5,4.8-3.6l5.7-19c0.4-1.3-0.4-2.7-1.7-3.1c-0.2-0.1-0.5-0.1-0.7-0.1h-44.6"/>
<path id="路径-4-copy-5" class="st12" d="M-87.4,345.4l10,10"/>
<path id="路径-4-copy-5_1_" class="st12" d="M-77.4,345.4l-10,10"/>
</g>
</g>
<g id="商城首页" transform="translate(202.000000, 0.000000)">
<g id="编组_2_">
<circle id="Oval" class="st13" cx="-90.9" cy="355.9" r="25"/>
<g id="Group-9" transform="translate(13.000000, 12.000000)">
<path id="Fill-1_1_" class="st14" d="M-102.3,346.9h-3.3c-1.3,0-2.4,1-2.4,2.2v5.8h8v-5.8c0-0.6-0.2-1.1-0.7-1.6
C-101,347.1-101.6,346.9-102.3,346.9L-102.3,346.9z M-102.2,347.9c0.7,0,1.3,0.5,1.3,1.2v4.8h-6v-4.8c0-0.7,0.6-1.2,1.3-1.2
H-102.2z"/>
<path id="Fill-4" class="st14" d="M-103.9,331.1L-103.9,331.1c0.3-0.3,0.6-0.3,0.8-0.1c0.1,0.1,0.2,0.2,0.2,0.3
s-0.1,0.3-0.2,0.3l0,0l-0.1,0.1l11.1,10.2c0.2,0.2,0.2,0.5,0,0.7s-0.5,0.2-0.8,0l-11.1-10.2l-11.1,10.2c-0.2,0.2-0.5,0.2-0.7,0
s-0.2-0.5,0-0.7l11.1-10.2l-0.1-0.1c-0.2-0.2-0.2-0.5,0-0.7C-104.5,330.8-104.2,330.8-103.9,331.1L-103.9,331.1z"/>
<path id="Fill-7" class="st14" d="M-95,339.9v12.9c0,0.6-0.5,1.1-1.1,1.1h-15.6c-0.6,0-1.1-0.5-1.1-1.1v-12.9l-1.1,0.9v12
c0,1.2,1,2.1,2.2,2.1h15.6c1.2,0,2.2-0.9,2.2-2.1v-12L-95,339.9L-95,339.9z"/>
</g>
</g>
</g>
<g id="编组_8_" transform="translate(139.000000, 0.000000)">
<rect id="矩形_17_" x="-115.9" y="330.9" class="st0" width="20" height="20"/>
<path id="Search-icon-Copy-5" class="st15" d="M-102.6,337.7c-1.9-2.6-5.8-2.6-7.6,0c-1.2,1.6-1.2,4,0,5.6c1.9,2.6,5.8,2.6,7.6,0
C-101.4,341.6-101.4,339.3-102.6,337.7 M-98.2,348.6c-0.4,0.4-0.9,0.4-1.3,0l-2.9-2.9c-2.5,1.9-6,1.8-8.4-0.4
c-2.6-2.5-2.8-6.8-0.3-9.4c2.5-2.6,6.8-2.7,9.4-0.1c2.4,2.4,2.5,6,0.6,8.6l2.9,2.9C-97.8,347.7-97.8,348.2-98.2,348.6"/>
</g>
<g id="编组_9_" transform="translate(159.000000, 0.000000)">
<rect id="矩形_18_" x="-115.9" y="330.9" class="st0" width="20" height="20"/>
<path id="Search-icon-Copy-5_1_" class="st4" d="M-102.6,337.7c-1.9-2.6-5.8-2.6-7.6,0c-1.2,1.6-1.2,4,0,5.6
c1.9,2.6,5.8,2.6,7.6,0C-101.4,341.6-101.4,339.3-102.6,337.7 M-98.2,348.6c-0.4,0.4-0.9,0.4-1.3,0l-2.9-2.9
c-2.5,1.9-6,1.8-8.4-0.4c-2.6-2.5-2.8-6.8-0.3-9.4c2.5-2.6,6.8-2.7,9.4-0.1c2.4,2.4,2.5,6,0.6,8.6l2.9,2.9
C-97.8,347.7-97.8,348.2-98.2,348.6"/>
</g>
<rect id="矩形备份" x="-77.9" y="443.9" class="st0" width="30" height="30"/>
<g id="编组-2_2_" transform="translate(41.000000, 114.000000)">
<path id="iPhone" class="st5" d="M-115.9,352c0-0.1,0-0.2,0.1-0.3s0.2-0.1,0.3-0.1s0.3,0,0.3,0.1c0.1,0.1,0.1,0.2,0.1,0.3
s0,0.2-0.1,0.3s-0.2,0.1-0.3,0.1s-0.3,0-0.3-0.1C-115.8,352.2-115.9,352.2-115.9,352z M-115.8,357.9v-4.3h0.8v4.3H-115.8z
M-112.8,355.6v2.3h-0.8v-6.1h1.7c0.7,0,1.2,0.2,1.5,0.5c0.4,0.3,0.5,0.8,0.5,1.4c0,0.6-0.2,1.1-0.6,1.4
c-0.4,0.4-0.9,0.5-1.6,0.5L-112.8,355.6L-112.8,355.6z M-112.8,352.5v2.4h0.7c0.5,0,0.8-0.1,1.1-0.3c0.2-0.2,0.4-0.5,0.4-0.9
c0-0.8-0.5-1.2-1.4-1.2H-112.8z M-105.2,357.9h-0.8v-2.5c0-0.9-0.3-1.3-1-1.3c-0.3,0-0.6,0.1-0.8,0.4s-0.3,0.6-0.3,1v2.4h-0.8
v-6.4h0.8v2.8l0,0c0.3-0.5,0.8-0.8,1.4-0.8c1,0,1.5,0.6,1.5,1.8C-105.2,355.3-105.2,357.9-105.2,357.9z M-104.3,355.8
c0-0.7,0.2-1.3,0.6-1.7s0.9-0.6,1.6-0.6c0.6,0,1.2,0.2,1.5,0.6c0.4,0.4,0.6,0.9,0.6,1.6s-0.2,1.2-0.6,1.7
c-0.4,0.4-0.9,0.6-1.6,0.6c-0.6,0-1.2-0.2-1.5-0.6C-104.1,357-104.3,356.4-104.3,355.8z M-103.5,355.8c0,0.5,0.1,0.9,0.4,1.2
c0.3,0.3,0.6,0.4,1,0.4s0.8-0.1,1-0.4s0.3-0.7,0.3-1.2s-0.1-0.9-0.3-1.2s-0.6-0.4-1-0.4s-0.8,0.1-1,0.4
C-103.4,354.8-103.5,355.2-103.5,355.8z M-95.3,357.9h-0.8v-2.5c0-0.9-0.3-1.3-1-1.3c-0.3,0-0.6,0.1-0.8,0.4
c-0.2,0.3-0.3,0.6-0.3,0.9v2.5H-99v-4.3h0.8v0.7l0,0c0.3-0.5,0.8-0.8,1.4-0.8c0.5,0,0.8,0.2,1.1,0.5c0.2,0.3,0.4,0.7,0.4,1.3
C-95.3,355.3-95.3,357.9-95.3,357.9z M-90.6,355.9h-3c0,0.5,0.1,0.8,0.4,1.1c0.2,0.3,0.6,0.4,1,0.4c0.5,0,0.9-0.2,1.3-0.5v0.7
c-0.4,0.3-0.9,0.4-1.5,0.4s-1.1-0.2-1.5-0.6c-0.4-0.4-0.5-0.9-0.5-1.6s0.2-1.2,0.6-1.6c0.4-0.4,0.9-0.6,1.4-0.6
c0.6,0,1,0.2,1.3,0.5c0.3,0.4,0.5,0.9,0.5,1.5C-90.6,355.6-90.6,355.9-90.6,355.9z M-91.4,355.3c0-0.4-0.1-0.7-0.3-0.9
s-0.4-0.3-0.8-0.3c-0.3,0-0.6,0.1-0.8,0.3s-0.4,0.5-0.4,0.9H-91.4z"/>
<path id="形状_5_" class="st16" d="M-99,338.5c0,2.4,2.1,3.2,2.1,3.2c0,0.1-0.3,1.1-1.1,2.2c-0.7,1-1.4,1.9-2.4,1.9
c-1.1,0-1.4-0.6-2.6-0.6c-1.2,0-1.6,0.6-2.6,0.6s-1.8-1-2.5-2c-1.4-2-2.4-5.5-1-8c0.7-1.2,1.9-2,3.3-2c1,0,2,0.7,2.6,0.7
s1.8-0.8,3.1-0.7c0.5,0,2,0.2,2.9,1.6C-97.4,335.5-99.1,336.5-99,338.5z M-102.9,333.9c-0.1-0.7,0.3-1.5,0.8-2s1.4-1,2.2-1
c0.1,0.8-0.3,1.5-0.8,2.1C-101.2,333.5-102.1,333.9-102.9,333.9z"/>
</g>
<g id="路径-2" transform="translate(208.000000, 122.000000)">
<path id="路径_6_" class="st17" d="M-108.8,335.6c1-3.5-3.6-4.7-3.6-4.7c1.2,3.9-3.5,4.3-3.5,7.4c0,3.1,4,3.7,4,3.7
c-3.5-3.5,1-5,1-5s-0.8,0.5,1.1,2.1c1.3,1.1-0.2,2.9-0.2,2.9c1.3,0,4.1-1.6,4.1-3.7c0-2.2-1.7-3.7-1.7-3.7
C-108,335.2-108.8,335.6-108.8,335.6z"/>
</g>
<g id="close-2" transform="translate(225.000000, 120.000000)">
<path id="close" class="st6" d="M-101.9,344.3c-0.2,0.2-0.4,0.4-0.6,0.6c-2.1-2.1-4.3-4.3-6.4-6.4c-2.2,2.2-4.3,4.3-6.4,6.4
c-0.2-0.2-0.4-0.4-0.6-0.6l6.4-6.4c-2.2-2.2-4.3-4.3-6.4-6.4c0.2-0.2,0.4-0.4,0.5-0.5l6.4,6.4c2.2-2.2,4.3-4.3,6.4-6.4
c0.2,0.2,0.4,0.4,0.6,0.6c-2.1,2.1-4.3,4.3-6.4,6.4C-106.2,340-104,342.2-101.9,344.3z"/>
</g>
</g>
<g id="购物车_1_" class="st18">
<path id="Combined-Shape_1_" class="st15" d="M-101.6,388.1c1.4,0,2.5,1.1,2.5,2.5s-1.1,2.5-2.5,2.5s-2.5-1.1-2.5-2.5
S-103,388.1-101.6,388.1z M-90.1,388.1c1.4,0,2.5,1.1,2.5,2.5s-1.1,2.5-2.5,2.5s-2.5-1.1-2.5-2.5S-91.5,388.1-90.1,388.1z
M-101.6,389.6c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S-101.1,389.6-101.6,389.6z M-90.1,389.6c-0.6,0-1,0.4-1,1s0.4,1,1,1
s1-0.4,1-1S-89.6,389.6-90.1,389.6z M-108.4,371.1c1.2,0,2.2,0.7,2.6,1.8l0.1,0.2l3.2,11.1c0.1,0.5,0.6,0.8,1.1,0.9h0.1h11
c0.5,0,1-0.3,1.2-0.8v-0.1l1.8-6c0.2-0.7-0.2-1.4-0.8-1.6c-0.1,0-0.2,0-0.2,0h-0.1h-14.5v-1.5h14.3c0.3,0,0.5,0,0.8,0.1
c1.4,0.4,2.2,1.9,1.9,3.3v0.2l-1.8,6c-0.3,1.1-1.3,1.9-2.5,2h-0.2h-11c-1.2,0-2.2-0.7-2.6-1.8l-0.1-0.2l-3.2-11.1
c-0.1-0.5-0.6-0.8-1.1-0.9h-0.1h-1.5v-1.5L-108.4,371.1L-108.4,371.1L-108.4,371.1z"/>
</g>
<g id="购物车-hover">
<path id="Combined-Shape_2_" class="st19" d="M-101.7,428.1c1.4,0,2.5,1.1,2.5,2.5s-1.1,2.5-2.5,2.5s-2.5-1.1-2.5-2.5
C-104.2,429.3-103,428.1-101.7,428.1z M-90.2,428.1c1.4,0,2.5,1.1,2.5,2.5s-1.1,2.5-2.5,2.5s-2.5-1.1-2.5-2.5
C-92.7,429.3-91.5,428.1-90.2,428.1z M-101.7,429.6c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1C-100.7,430.1-101.1,429.6-101.7,429.6z
M-90.2,429.6c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1C-89.2,430.1-89.6,429.6-90.2,429.6z M-108.4,411.1c1.2,0,2.2,0.7,2.6,1.8
l0.1,0.2l3.2,11.1c0.1,0.5,0.6,0.8,1.1,0.9h0.1h11c0.5,0,1-0.3,1.2-0.8v-0.1l1.8-6c0.2-0.7-0.2-1.4-0.8-1.6c-0.1,0-0.2,0-0.2,0
h-0.1h-14.5v-1.5h14.3c0.3,0,0.5,0,0.8,0.1c1.4,0.4,2.2,1.9,1.9,3.3v0.2l-1.8,6c-0.3,1.1-1.3,1.9-2.5,2h-0.2h-11
c-1.2,0-2.2-0.7-2.6-1.8l-0.1-0.2l-3.2-11.1c-0.1-0.5-0.6-0.8-1.1-0.9h-0.1h-1.5v-1.5L-108.4,411.1L-108.4,411.1L-108.4,411.1z"/>
</g>
<g id="客服" class="st18">
<path id="Combined-Shape_3_" class="st15" d="M-55.9,372.1c4.3,0,7.9,3.1,8.7,7.2c2,0.3,3.6,2.1,3.6,4.3s-1.6,4.1-3.7,4.3
c-1.1,2-2.4,3.2-4.1,3.6c-0.3,1-1.2,1.8-2.4,1.8c-1.4,0-2.5-1.1-2.5-2.5s1.1-2.5,2.5-2.5c1.1,0,2,0.7,2.3,1.6
c1.1-0.3,2-1.2,2.9-2.8l0.1-0.1v-6c0-4-3.2-7.3-7.1-7.5h-0.2c-4,0-7.2,3.2-7.3,7.2v0.2v6.2c0,0.4-0.3,0.8-0.8,0.8H-64
c-2.3-0.1-4.1-2-4.1-4.3c0-2.2,1.5-4,3.6-4.3C-63.8,375.3-60.2,372.1-55.9,372.1z M-53.8,389.9c-0.5,0-1,0.4-1,1c0,0.5,0.4,1,1,1
s1-0.4,1-1S-53.2,389.9-53.8,389.9z M-47.1,380.9v0.2v5.3c1.1-0.3,1.9-1.4,1.9-2.7S-46,381.3-47.1,380.9z M-64.7,380.9
c-1.1,0.3-1.9,1.4-1.9,2.7s0.8,2.4,1.9,2.7V381V380.9z"/>
</g>
<g id="客服-hover">
<path id="Combined-Shape_4_" class="st19" d="M-55.9,412.1c4.3,0,7.9,3.1,8.7,7.2c2,0.3,3.6,2.1,3.6,4.3s-1.6,4.1-3.7,4.3
c-1.1,2-2.4,3.2-4.1,3.6c-0.3,1-1.2,1.8-2.4,1.8c-1.4,0-2.5-1.1-2.5-2.5s1.1-2.5,2.5-2.5c1.1,0,2,0.7,2.3,1.6
c1.1-0.3,2-1.2,2.9-2.8l0.1-0.1v-6c0-4-3.2-7.3-7.1-7.5h-0.2c-4,0-7.2,3.2-7.3,7.2v0.2v6.2c0,0.4-0.3,0.8-0.7,0.8h-0.1
c-2.3-0.1-4.1-2-4.1-4.3c0-2.2,1.5-4,3.6-4.3C-63.8,415.3-60.2,412.1-55.9,412.1z M-53.8,429.9c-0.5,0-1,0.4-1,1s0.4,1,1,1
s1-0.4,1-1S-53.2,429.9-53.8,429.9z M-47.1,420.9v0.2v5.3c1.1-0.3,1.9-1.4,1.9-2.7S-46,421.3-47.1,420.9z M-64.7,420.9
c-1.1,0.3-1.9,1.4-1.9,2.7s0.8,2.4,1.9,2.7V421V420.9z"/>
</g>
<g id="自助服务" class="st18">
<path id="Combined-Shape_5_" class="st15" d="M-8.4,386.1l0.2,0.1l4.4,3.6l-7.6,4.3c-2.9,1.6-6.3,1.8-9.3,0.4l-0.3-0.1l-5.3-2.6
c-0.7-0.4-1-1.3-0.7-2c0.3-0.5,0.8-0.8,1.3-0.8h0.1h0.1l0.3,0.1l0.7,0.2l1.8,0.5l1.2,0.3c-0.1-1,0.5-1.9,1.4-2.2h0.1h0.1h0.1
c1.7-0.2,3.3-0.7,4.8-1.5l0.4-0.2l0.8-0.4C-12.1,384.8-10,385-8.4,386.1z M-6.8,373.9c2.3,2.3,2.3,6,0.2,8.3l-0.2,0.2l-1.7,1.7
c-0.3,0.3-0.8,0.3-1.1,0c-0.3-0.3-0.3-0.7-0.1-1l0.1-0.1l1.7-1.7c1.8-1.8,1.8-4.6,0-6.4c-1.7-1.7-4.4-1.8-6.2-0.2l-0.2,0.2
l-2.7,2.8c-0.3,0.3-0.8,0.3-1.1,0s-0.3-0.7-0.1-1l0.1-0.1l0.9-0.9c0,0-0.1,0-0.1-0.1l-0.1-0.1l-0.5-0.5c-1.8-1.8-4.6-1.8-6.4,0
c-1.7,1.7-1.8,4.4-0.2,6.2l0.2,0.2l4.5,4.5c0.3,0.3,0.3,0.8,0,1.1s-0.7,0.3-1,0.1l-0.1-0.1l-4.5-4.5c-2.3-2.3-2.3-6.2,0-8.5
s6-2.3,8.3-0.1l0.2,0.2l0.6,0.7l0.1,0.1l0.8-0.8C-13,371.6-9.2,371.6-6.8,373.9z M-9.2,387.4c-1-0.8-2.5-1-3.7-0.5l-0.2,0.1
l-0.8,0.4c-1.6,0.9-3.4,1.5-5.2,1.8l-0.5,0.1c-0.2,0-0.4,0.3-0.4,0.5v0.1v0.2c0.1,0.3,0.2,0.4,0.6,0.5h0.2h0.3h0.3
c0.1,0,0.1,0,0.2,0c1.2,0,2.1-0.3,2.6-0.8c0.3-0.3,0.8-0.3,1.1,0s0.3,0.8,0,1.1c-0.9,0.9-2.1,1.3-3.7,1.3c-0.2,0-0.5,0-0.7,0h-0.2
l0,0c-0.1,0-0.2,0-0.3,0h-0.1l-2.4-0.6l-2.3-0.6l-1.5-0.4l5.2,2.6c2.5,1.3,5.5,1.2,8-0.1l0.3-0.1l5.7-3.3L-9.2,387.4z"/>
</g>
<g id="自助服务-hover">
<path id="Combined-Shape_6_" class="st20" d="M-8.4,426.1l0.2,0.1l4.4,3.6l-7.6,4.3c-2.9,1.6-6.3,1.8-9.3,0.4l-0.3-0.1l-5.3-2.6
c-0.7-0.4-1-1.3-0.7-2c0.3-0.5,0.8-0.8,1.3-0.8h0.1h0.1l0.3,0.1l0.7,0.2l1.8,0.5l1.2,0.3c-0.1-1,0.5-1.9,1.4-2.2h0.1h0.1h0.1
c1.7-0.2,3.3-0.7,4.8-1.5l0.4-0.2l0.8-0.4C-12.1,424.8-10,425-8.4,426.1z M-6.8,413.9c2.3,2.3,2.3,6,0.2,8.3l-0.2,0.2l-1.7,1.7
c-0.3,0.3-0.8,0.3-1.1,0c-0.3-0.3-0.3-0.7-0.1-1l0.1-0.1l1.7-1.7c1.8-1.8,1.8-4.6,0-6.4c-1.7-1.7-4.4-1.8-6.2-0.2l-0.2,0.2
l-2.7,2.8c-0.3,0.3-0.8,0.3-1.1,0s-0.3-0.7-0.1-1l0.1-0.1l0.9-0.9c0,0-0.1,0-0.1-0.1l-0.1-0.1l-0.5-0.5c-1.8-1.8-4.6-1.8-6.4,0
c-1.7,1.7-1.8,4.4-0.2,6.2l0.2,0.2l4.5,4.5c0.3,0.3,0.3,0.8,0,1.1s-0.7,0.3-1,0.1l-0.1-0.1l-4.5-4.5c-2.3-2.3-2.3-6.2,0-8.5
s6-2.3,8.3-0.1l0.2,0.2l0.6,0.7l0.1,0.1l0.8-0.8C-13,411.6-9.2,411.6-6.8,413.9z M-9.2,427.4c-1-0.8-2.5-1-3.7-0.5l-0.2,0.1
l-0.8,0.4c-1.6,0.9-3.4,1.5-5.2,1.8l-0.5,0.1c-0.2,0-0.4,0.3-0.4,0.5v0.1v0.2c0.1,0.3,0.2,0.4,0.6,0.5h0.2h0.3h0.3
c0.1,0,0.1,0,0.2,0c1.2,0,2.1-0.3,2.6-0.8c0.3-0.3,0.8-0.3,1.1,0s0.3,0.8,0,1.1c-0.9,0.9-2.1,1.3-3.7,1.3c-0.2,0-0.5,0-0.7,0h-0.2
l0,0c-0.1,0-0.2,0-0.3,0h-0.1l-2.4-0.6l-2.3-0.6l-1.5-0.4l5.2,2.6c2.5,1.3,5.5,1.2,8-0.1l0.3-0.1l5.7-3.3L-9.2,427.4z"/>
</g>
<g id="返回顶部" class="st18">
<path id="Combined-Shape_7_" class="st15" d="M24.1,376.8l8.5,8.5c0.3,0.3,0.3,0.8,0,1.1s-0.7,0.3-1,0.1l-0.1-0.1l-6.7-6.7v14.2
c0,0.4-0.3,0.8-0.8,0.8c-0.4,0-0.7-0.3-0.7-0.6V394v-14.2l-6.7,6.7c-0.3,0.3-0.7,0.3-1,0.1l-0.1-0.1c-0.3-0.3-0.3-0.7-0.1-1
l0.1-0.1L24.1,376.8z M32.1,372.6c0.4,0,0.8,0.3,0.8,0.8c0,0.4-0.3,0.7-0.6,0.7h-0.1H16.1c-0.4,0-0.8-0.3-0.8-0.8
c0-0.4,0.3-0.7,0.6-0.7H16H32.1z"/>
</g>
<g id="返回顶部-hover">
<path id="Combined-Shape_8_" class="st19" d="M24.1,416.8l8.5,8.5c0.3,0.3,0.3,0.8,0,1.1s-0.7,0.3-1,0.1l-0.1-0.1l-6.7-6.7v14.2
c0,0.4-0.3,0.8-0.8,0.8c-0.4,0-0.7-0.3-0.7-0.6V434v-14.2l-6.7,6.7c-0.3,0.3-0.7,0.3-1,0.1l-0.1-0.1c-0.3-0.3-0.3-0.7-0.1-1
l0.1-0.1L24.1,416.8z M32.1,412.6c0.4,0,0.8,0.3,0.8,0.8c0,0.4-0.3,0.7-0.6,0.7h-0.1H16.1c-0.4,0-0.8-0.3-0.8-0.8
c0-0.4,0.3-0.7,0.6-0.7H16H32.1z"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 23 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 62 KiB

View File

@@ -0,0 +1,63 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="279px" height="60px" viewBox="-158 390.9 279 60" style="enable-background:new -158 390.9 279 60;" xml:space="preserve">
<style type="text/css">
.st0{fill:#A4A4A4;}
.st1{fill:#FFFFFF;}
.st2{fill:#303030;}
.st3{fill:#393939;}
.st4{fill:#343434;}
.st5{fill:#969696;}
.st6{fill:#787878;}
.st7{fill:#CA141D;}
.st8{fill:#A3A3A3;}
.st9{fill:none;}
</style>
<title>icon03</title>
<g id="icon03">
<g>
<g id="WAP" transform="translate(7.000000, 0.000000)">
<g id="编组">
<g id="Fill-1" transform="translate(248.000000, 0.000000)">
<path id="形状" class="st0" d="M-152.3,399.1c-0.1,0-0.2,0.1-0.2,0.2c-0.1,0.1-0.1,0.1-0.2,0.2c0,0.1-0.1,0.2-0.1,0.3 s0,0.2,0.1,0.3c0,0.1,0.1,0.2,0.2,0.3c0.1,0.1,0.2,0.1,0.2,0.2c0.1,0,0.2,0.1,0.3,0.1s0.2,0,0.3-0.1c0.1,0,0.2-0.1,0.3-0.2 c0.1-0.1,0.1-0.2,0.2-0.3c0.1-0.1,0.1-0.1,0.1-0.2c0-0.1,0-0.2-0.1-0.3c0-0.1-0.1-0.2-0.2-0.3c-0.1-0.1-0.1-0.1-0.2-0.2 c-0.1,0-0.3,0-0.4,0S-152.2,399.1-152.3,399.1 M-154.3,391.4c-0.8,0.3-1.4,0.7-1.9,1.3c-0.6,0.5-1,1.2-1.3,1.9 c-0.3,0.7-0.5,1.5-0.5,2.3c0,0.8,0.2,1.6,0.5,2.3s0.7,1.4,1.3,1.9c0.5,0.5,1.2,1,1.9,1.3c0.7,0.3,1.5,0.5,2.3,0.5 s1.6-0.2,2.3-0.5c0.7-0.3,1.4-0.7,1.9-1.3c0.5-0.5,1-1.2,1.3-1.9s0.5-1.5,0.5-2.3c0-0.8-0.2-1.6-0.5-2.3 c-0.3-0.7-0.7-1.4-1.3-1.9c-0.5-0.6-1.2-1-1.9-1.3c-0.7-0.3-1.5-0.5-2.3-0.5S-153.6,391.1-154.3,391.4 M-152.7,393.9v3.5 c0,0.6,0.3,0.8,0.7,0.8c0.6,0,0.8-0.3,0.9-0.8v-3.5c-0.1-0.5-0.4-0.7-0.9-0.8C-152.5,393.2-152.7,393.4-152.7,393.9 M-148.5,393.4c1,0.9,1.5,2.1,1.5,3.5c0,1.4-0.5,2.6-1.5,3.5c-0.9,1-2.1,1.5-3.5,1.5s-2.6-0.5-3.6-1.5 c-0.9-0.9-1.4-2.1-1.4-3.5c0-1.4,0.5-2.6,1.5-3.5c0.9-1,2.1-1.5,3.5-1.5S-149.4,392.4-148.5,393.4"/>
</g>
<path id="Fill-3" class="st1" d="M71.9,399.6l-5.5,5c-0.2,0.1-0.4,0.2-0.7,0.2s-0.5-0.1-0.6-0.2l-2.7-2.5 c-0.2-0.2-0.3-0.4-0.3-0.7c0-0.3,0.1-0.5,0.2-0.7c0.2-0.2,0.4-0.3,0.7-0.3s0.5,0.1,0.7,0.2l2.1,1.9l4.9-4.4 c0.2-0.2,0.4-0.3,0.7-0.2c0.3,0,0.5,0.1,0.7,0.3c0.2,0.2,0.2,0.5,0.2,0.8C72.3,399.2,72.1,399.4,71.9,399.6z"/>
<path id="Fill-5" class="st2" d="M-24.3,404.1c0.2-0.1,0.2-0.3,0.2-0.5c0-0.2-0.1-0.4-0.2-0.5c-0.1-0.1-0.4-0.2-0.7-0.2 c-0.2,0-0.4,0.1-0.5,0.2s-0.2,0.3-0.2,0.5c0,0.2,0.1,0.4,0.2,0.5s0.3,0.2,0.5,0.2C-24.6,404.3-24.4,404.3-24.3,404.1 L-24.3,404.1z M-20.3,404.1c0.2-0.1,0.2-0.3,0.2-0.5c0-0.2-0.1-0.4-0.2-0.5c-0.2-0.1-0.4-0.2-0.7-0.2c-0.2,0-0.4,0.1-0.5,0.2 s-0.2,0.3-0.2,0.5c0,0.2,0.1,0.4,0.2,0.5s0.3,0.2,0.5,0.2C-20.6,404.3-20.4,404.3-20.3,404.1L-20.3,404.1z M-16.8,405.3 c0,0.8-0.3,1.6-0.7,2.3c-0.5,0.7-1.1,1.3-1.8,1.9l0.5,1.8l-2-1.1c-0.4,0.1-0.7,0.2-1.1,0.2c-0.4,0.1-0.7,0.1-1.1,0.1 c-1.8,0-3.2-0.5-4.4-1.5c-1.2-1-1.8-2.2-1.8-3.7s0.6-2.7,1.8-3.7c1.2-1,2.6-1.5,4.4-1.5c1.7,0,3.1,0.6,4.3,1.5 C-17.4,402.5-16.8,403.8-16.8,405.3L-16.8,405.3z M-27.3,397.6c-0.3,0-0.5,0.1-0.7,0.2c-0.2,0.2-0.3,0.4-0.3,0.7 c0,0.3,0.1,0.5,0.3,0.7s0.5,0.2,0.7,0.2c0.3,0,0.5-0.1,0.7-0.2c0.2-0.2,0.2-0.4,0.2-0.7c0-0.3-0.1-0.5-0.2-0.7 C-26.8,397.7-27,397.6-27.3,397.6L-27.3,397.6z M-31.7,399.2c0.2-0.2,0.2-0.4,0.2-0.7c0-0.3-0.1-0.5-0.2-0.7 c-0.2-0.2-0.4-0.2-0.7-0.2c-0.3,0-0.5,0.1-0.7,0.2c-0.2,0.2-0.3,0.4-0.3,0.7c0,0.3,0.1,0.5,0.3,0.7c0.2,0.2,0.5,0.2,0.8,0.2 C-32.1,399.5-31.9,399.4-31.7,399.2L-31.7,399.2z M-23.4,399.6L-23.4,399.6c-1.8,0-3.2,0.6-4.4,1.7s-1.7,2.4-1.8,4.1 c0,0.5,0.1,1,0.2,1.5c-0.2,0-0.5,0-0.7,0c-0.4,0-0.9,0-1.3-0.1s-0.8-0.2-1.3-0.2l-2.5,1.3l0.7-2.2c-0.9-0.6-1.6-1.4-2.1-2.2 c-0.5-0.8-0.8-1.7-0.8-2.7c0.1-1.8,0.8-3.2,2.1-4.4c1.4-1.2,3.1-1.8,5.1-1.8c1.8,0,3.4,0.5,4.8,1.4c1.4,0.9,2.2,2.1,2.6,3.6 H-23.4L-23.4,399.6z"/>
<polygon id="Fill-7" class="st3" points="-148.8,403.9 -156.1,411.4 -157.2,410.2 -151.3,403.9 -157.2,397.6 -156.1,396.4 "/>
<polygon id="Fill-9" class="st3" points="-133.2,403.9 -125.9,411.4 -124.8,410.2 -130.7,403.9 -124.8,397.6 -125.9,396.4 "/>
<path id="Fill-11" class="st2" d="M-110.9,393.4c-0.2-0.2-0.2-0.4-0.1-0.6c0.1-0.2,0.2-0.4,0.4-0.4c0.2-0.1,0.4,0,0.6,0.1l5,5 c0,0.1,0.1,0.2,0.1,0.4c0,0.2-0.1,0.3-0.2,0.4l-5,5c-0.2,0.2-0.4,0.2-0.6,0.1c-0.2-0.1-0.4-0.2-0.4-0.4c-0.1-0.2,0-0.4,0.1-0.6 l4.6-4.5L-110.9,393.4z"/>
<path id="Fill-13" class="st4" d="M-96.4,394.3c-0.1-0.1-0.2-0.3-0.1-0.5c0-0.2,0.2-0.3,0.3-0.3c0.2,0,0.3,0,0.5,0.1l4,4 c0.1,0.1,0.1,0.2,0.1,0.4c0,0.1,0,0.3-0.1,0.4l-4,4c-0.1,0.1-0.3,0.2-0.5,0.1c-0.2,0-0.3-0.2-0.3-0.3c0-0.2,0-0.3,0.1-0.5 l3.7-3.8L-96.4,394.3z"/>
<path id="Fill-15" class="st4" d="M-85.3,397.9l3.7,3.6c0.1,0.1,0.2,0.3,0.1,0.5c0,0.2-0.2,0.3-0.3,0.3c-0.2,0-0.3,0-0.5-0.1 l-4-4c-0.1-0.1-0.1-0.2-0.1-0.4c0-0.2,0-0.3,0.1-0.4l4-4c0.1-0.1,0.3-0.2,0.5-0.1c0.2,0,0.3,0.2,0.3,0.3c0,0.2,0,0.3-0.1,0.5 L-85.3,397.9z"/>
<path id="Fill-17" class="st5" d="M-76.4,394.3c-0.1-0.1-0.2-0.3-0.1-0.5c0-0.2,0.2-0.3,0.3-0.3c0.2,0,0.3,0,0.5,0.1l4,4 c0.1,0.1,0.1,0.2,0.1,0.4c0,0.1,0,0.3-0.1,0.4l-4,4c-0.1,0.1-0.3,0.2-0.5,0.1c-0.2,0-0.3-0.2-0.3-0.3c0-0.2,0-0.3,0.1-0.5 l3.7-3.8L-76.4,394.3z"/>
<path id="Fill-19" class="st5" d="M-65.3,397.9l3.7,3.6c0.1,0.1,0.2,0.3,0.1,0.5c0,0.2-0.2,0.3-0.3,0.3c-0.2,0-0.3,0-0.5-0.1 l-4-4c-0.1-0.1-0.1-0.2-0.1-0.4c0-0.2,0-0.3,0.1-0.4l4-4c0.1-0.1,0.3-0.2,0.5-0.1c0.2,0,0.3,0.2,0.3,0.3c0,0.2,0,0.3-0.1,0.5 L-65.3,397.9z"/>
<path id="Fill-21" class="st1" d="M-47.7,407.4c0.3,0,0.5-0.1,0.6-0.3c0.1-0.2,0.1-0.5,0-0.7c-0.1-0.2-0.3-0.4-0.6-0.4 c-0.2,0-0.3,0.1-0.5,0.2c-0.1,0.1-0.2,0.3-0.2,0.5s0.1,0.4,0.2,0.5C-48.1,407.4-47.9,407.4-47.7,407.4L-47.7,407.4z M-42.9,399.6v0.1v3.8c0.4-0.1,0.7-0.4,1-0.7c0.3-0.4,0.4-0.8,0.4-1.3s-0.1-0.9-0.4-1.3C-42.2,400-42.5,399.7-42.9,399.6 L-42.9,399.6z M-55.6,399.9c-0.3,0.2-0.5,0.5-0.7,0.8c-0.2,0.3-0.2,0.6-0.2,1s0.1,0.7,0.2,1c0.2,0.3,0.4,0.6,0.6,0.7 L-55.6,399.9L-55.6,399.9z M-46.1,407.2c-0.1,0.4-0.4,0.7-0.7,1c-0.3,0.3-0.7,0.3-1.2,0.3c-0.4,0-0.8-0.2-1.1-0.5 c-0.3-0.3-0.4-0.7-0.4-1.1c0-0.4,0.1-0.8,0.4-1.1c0.3-0.3,0.6-0.5,1-0.6s0.8,0,1.2,0.2c0.4,0.2,0.6,0.5,0.8,0.9 c0.8-0.2,1.5-0.9,2.1-2.1v-4.5c0-1.5-0.6-2.8-1.6-3.8s-2.2-1.5-3.7-1.6c-1.5,0.1-2.7,0.6-3.7,1.6s-1.5,2.3-1.6,3.8v4.9 c-0.1,0-0.2,0-0.3,0c-0.2,0.1-0.4,0-0.5-0.1c-0.6-0.2-1.1-0.6-1.5-1.1s-0.6-1.1-0.6-1.8c0-0.7,0.2-1.3,0.6-1.8s0.9-0.9,1.4-1.1 c0.3-1.5,1-2.8,2.1-3.8s2.5-1.5,4.1-1.5c1.6,0,2.9,0.5,4,1.5c1.1,1,1.8,2.2,2.2,3.7c0.7,0.1,1.4,0.5,1.8,1 c0.4,0.5,0.7,1.2,0.7,2c0,0.8-0.3,1.5-0.8,2.1s-1.1,0.9-1.9,1C-43.9,406.1-44.9,407-46.1,407.2L-46.1,407.2z"/>
<path id="Fill-23" class="st2" d="M42.1,408.9v1.7c0,0.8-0.5,1.3-1.3,1.3c-0.8,0-1.3-0.5-1.3-1.3l0,0v-1.7h0.6v1.7 c0,0.5,0.2,0.8,0.7,0.8c0.4,0,0.7-0.3,0.7-0.7l0,0v-1.7H42.1z M36.6,408.9v1.2H38v-1.2h0.6v3H38v-1.2h-1.4v1.2H36v-3H36.6z M47.9,408.9l0.7,2l0.7-2h0.6l-1.1,3h-0.5l-0.7-1.9l-0.7,1.9h-0.5l-1.1-3H46l0.7,2l0.7-2H47.9z M44.3,408.9l1.3,3H45l-0.3-0.6 h-1.4l-0.3,0.6h-0.6l1.3-3H44.3z M52.6,408.9v0.5H51v0.6h1.1v0.5H51v0.7h1.7v0.5h-2.3v-3H52.6z M54,408.9v3h-0.6v-3H54z M44,409.6l-0.5,1.1h0.9L44,409.6z M43.2,405.3C43.2,405.3,43.2,405.3,43.2,405.3c0.1,0.1,0.1,0.1,0,0.1 c-0.5,0.4-2.1,1.5-2.9,1.7c0,0-1.4,0.5-2.7-1.6C37.6,405.5,41.8,405.4,43.2,405.3z M46.8,405.3c1.4,0,5.5,0.2,5.5,0.2 c-1.2,2.1-2.7,1.6-2.7,1.6c-0.8-0.2-2.4-1.3-2.9-1.7C46.8,405.4,46.8,405.4,46.8,405.3C46.8,405.3,46.8,405.3,46.8,405.3z M36.2,400.7c0,0,4.7,2.5,7.1,4.1c0,0,0,0,0,0.1c0,0,0,0-0.1,0c-0.9,0-4.2,0-4.2,0c0,0-0.4,0-1-0.2c0,0-1.2-0.4-1.8-1.7 C36.3,403,35.7,402,36.2,400.7z M53.8,400.7c0.4,1.2-0.1,2.3-0.1,2.3c-0.6,1.3-1.8,1.7-1.8,1.7c-0.5,0.2-1,0.2-1,0.2 c-0.1,0-2.7,0-3.9,0l-0.4,0c0,0-0.1,0-0.1,0c0,0,0-0.1,0-0.1C49.1,403.2,53.8,400.7,53.8,400.7z M38.8,396.2c0,0,2.9,3.4,5,7.9 c0,0,0,0.1,0,0.1c0,0,0,0-0.1,0c-0.8-0.4-4.1-2-5.5-3.3c0,0-0.9-0.7-0.9-1.8C37.2,397.6,38.8,396.2,38.8,396.2z M51.2,396.2 c0,0,1.6,1.4,1.5,2.9c0,1.1-0.9,1.8-0.9,1.8c-1.4,1.3-4.7,2.9-5.5,3.3c0,0-0.1,0-0.1,0c0,0,0-0.1,0-0.1 C48.3,399.7,51.2,396.2,51.2,396.2z M43.7,393.9c0,0,1.6,2.1,0.8,9.9c0,0,0,0.1,0,0.1c0,0-0.1,0-0.1,0c-0.5-0.7-2.9-4.2-3.4-6.3 c0,0-0.3-1,0-1.7c0,0,0.4-1.3,1.8-1.7C42.8,394.1,43.2,394,43.7,393.9z M46.3,393.9c0.4,0.1,0.9,0.2,0.9,0.2 c1.5,0.3,1.8,1.7,1.8,1.7c0.3,0.7,0,1.7,0,1.7c-0.5,2.1-2.9,5.6-3.4,6.3c0,0,0,0-0.1,0c0,0,0,0,0-0.1 C44.7,396,46.3,393.9,46.3,393.9z"/>
<path id="Fill-31" class="st6" d="M42.1,432.9v1.7c0,0.8-0.5,1.3-1.3,1.3c-0.8,0-1.3-0.5-1.3-1.3l0,0v-1.7h0.6v1.7 c0,0.5,0.2,0.8,0.7,0.8c0.4,0,0.7-0.3,0.7-0.7l0,0v-1.7H42.1z M36.6,432.9v1.2H38v-1.2h0.6v3H38v-1.2h-1.4v1.2H36v-3H36.6z M47.9,432.9l0.7,2l0.7-2h0.6l-1.1,3h-0.5l-0.7-1.9l-0.7,1.9h-0.5l-1.1-3H46l0.7,2l0.7-2H47.9z M44.3,432.9l1.3,3H45l-0.3-0.6 h-1.4l-0.3,0.6h-0.6l1.3-3H44.3z M52.6,432.9v0.5H51v0.6h1.1v0.5H51v0.7h1.7v0.5h-2.3v-3H52.6z M54,432.9v3h-0.6v-3H54z M44,433.6l-0.5,1.1h0.9L44,433.6z M43.2,429.3C43.2,429.3,43.2,429.3,43.2,429.3c0.1,0.1,0.1,0.1,0,0.1 c-0.5,0.4-2.1,1.5-2.9,1.7c0,0-1.4,0.5-2.7-1.6C37.6,429.5,41.8,429.4,43.2,429.3z M46.8,429.3c1.4,0,5.5,0.2,5.5,0.2 c-1.2,2.1-2.7,1.6-2.7,1.6c-0.8-0.2-2.4-1.3-2.9-1.7C46.8,429.4,46.8,429.4,46.8,429.3C46.8,429.3,46.8,429.3,46.8,429.3z M36.2,424.7c0,0,4.7,2.5,7.1,4.1c0,0,0,0,0,0.1c0,0,0,0-0.1,0c-0.9,0-4.2,0-4.2,0c0,0-0.4,0-1-0.2c0,0-1.2-0.4-1.8-1.7 C36.3,427,35.7,426,36.2,424.7z M53.8,424.7c0.4,1.2-0.1,2.3-0.1,2.3c-0.6,1.3-1.8,1.7-1.8,1.7c-0.5,0.2-1,0.2-1,0.2 c-0.1,0-2.7,0-3.9,0l-0.4,0c0,0-0.1,0-0.1,0c0,0,0-0.1,0-0.1C49.1,427.2,53.8,424.7,53.8,424.7z M38.8,420.2c0,0,2.9,3.4,5,7.9 c0,0,0,0.1,0,0.1c0,0,0,0-0.1,0c-0.8-0.4-4.1-2-5.5-3.3c0,0-0.9-0.7-0.9-1.8C37.2,421.6,38.8,420.2,38.8,420.2z M51.2,420.2 c0,0,1.6,1.4,1.5,2.9c0,1.1-0.9,1.8-0.9,1.8c-1.4,1.3-4.7,2.9-5.5,3.3c0,0-0.1,0-0.1,0c0,0,0-0.1,0-0.1 C48.3,423.7,51.2,420.2,51.2,420.2z M43.7,417.9c0,0,1.6,2.1,0.8,9.9c0,0,0,0.1,0,0.1c0,0-0.1,0-0.1,0c-0.5-0.7-2.9-4.2-3.4-6.3 c0,0-0.3-1,0-1.7c0,0,0.4-1.3,1.8-1.7C42.8,418.1,43.2,418,43.7,417.9z M46.3,417.9c0.4,0.1,0.9,0.2,0.9,0.2 c1.5,0.3,1.8,1.7,1.8,1.7c0.3,0.7,0,1.7,0,1.7c-0.5,2.1-2.9,5.6-3.4,6.3c0,0,0,0-0.1,0c0,0,0,0,0-0.1 C44.7,420,46.3,417.9,46.3,417.9z"/>
<path id="Fill-25" class="st2" d="M-6.2,404.6l2.4-0.1v-0.9l-1.6,0.1V400l-1.3,0.1v3.7l-3.8,0.2v0.8l2.6-0.2l-1.1,1.5l-1.4,0.1 v0.8l2.4-0.1L-6.2,404.6z M-3,402.9v0.8h0.9l2.4-1.2l2.4,0.9h0.9v-0.9H3l-1.6-0.6l2.1-1.1v-1.3l-4.3,0.2l-1-0.5l-1.3,2.1 l1.1,0.4l0.7-1.1l3.6-0.2v0.2l-2,1l-1.5-0.6l-0.5,0.8l0.9,0.4l-1.5,0.8L-3,402.9z M3,404.8l-1.3,0.1l0.9,1.6l1.3-0.1L3,404.8z M-3,406.7l1.3-0.1l0.9-1.7l-1.3,0.1L-3,406.7z M-6,404.8l1,2l1.4-0.1l-1-2L-6,404.8z M-7.4,403.4l-1-1.3l-1.4,0.1l1,1.3 L-7.4,403.4z M-7.4,401.7l-1-1.3l-1.4,0.1l1,1.3L-7.4,401.7z M3.7,404.5v-0.8L1,403.9v-0.4l-1.3,0.1v0.3L-3,404v0.8l2.7-0.1v1.9 l1.3-0.1v-1.9L3.7,404.5z M-8.8,411.9c-0.9,0-1.7-0.3-2.3-0.9c-0.6-0.6-0.9-1.4-0.9-2.3v-11.6c0-0.9,0.3-1.7,0.9-2.3 c0.6-0.6,1.4-0.9,2.3-0.9H2.8c0.9,0,1.7,0.3,2.3,0.9c0.6,0.6,0.9,1.4,0.9,2.3v11.6c0,0.9-0.3,1.7-0.9,2.3 c-0.6,0.6-1.4,0.9-2.3,0.9H-8.8z M5.5,397.3v-0.2c0-0.8-0.3-1.4-0.8-1.9s-1.1-0.8-1.9-0.8H-8.8c-0.4,0-0.7,0.1-1.1,0.2 c-0.3,0.1-0.6,0.3-0.9,0.6s-0.4,0.5-0.6,0.9c-0.1,0.3-0.2,0.7-0.2,1.1v1.1L5.5,397.3z M5.5,408.4l-16.9,1c0.2,0.6,0.5,1.1,1,1.5 c0.5,0.4,1,0.6,1.7,0.6H2.9c0.8,0,1.4-0.3,1.9-0.8s0.8-1.1,0.8-1.9v-0.4H5.5z"/>
<path id="Fill-27" class="st2" d="M29.2,395.8c0.9,0.7,1.5,1.5,1.8,2.4s0.3,2,0.1,3.1c0,0.2-0.1,0.4-0.3,0.6 c-0.1,0.2-0.3,0.2-0.5,0.2s-0.4-0.1-0.6-0.2c-0.2-0.2-0.2-0.4-0.2-0.6c0.1-0.1,0.1-0.7,0.1-1.7s-0.4-1.9-1.3-2.6 c-1-0.6-1.7-0.8-2.3-0.8s-1,0.1-1,0.1c-0.2,0-0.4-0.1-0.6-0.2c-0.2-0.2-0.2-0.3-0.2-0.6c0-0.2,0.1-0.4,0.2-0.5 c0.2-0.1,0.3-0.2,0.5-0.3c0.8-0.1,1.5-0.1,2.3,0.1C28,395,28.6,395.3,29.2,395.8L29.2,395.8z M28,398.3c0.2,0.2,0.4,0.6,0.5,1 s0.1,1-0.1,1.6c-0.1,0.3-0.3,0.5-0.7,0.5c-0.2,0-0.3-0.1-0.5-0.2c-0.1-0.2-0.2-0.3-0.1-0.5c0-0.2,0-0.4,0-0.6 c0-0.2-0.1-0.4-0.2-0.6c-0.1-0.2-0.3-0.3-0.5-0.4c-0.2-0.1-0.4-0.2-0.7-0.1c-0.6,0-0.9-0.2-0.9-0.6c0-0.4,0.3-0.7,0.8-0.8 c0.3-0.1,0.7,0,1.2,0.1C27.2,397.6,27.7,397.9,28,398.3L28,398.3z M22,405.4c0.1,0.8-0.1,1.5-0.6,2.1c-0.5,0.6-1.2,1.1-2.1,1.3 c-0.9,0.2-1.7,0-2.4-0.3c-0.7-0.4-1.2-1-1.3-1.7c-0.1-0.8,0.1-1.5,0.6-2.1s1.2-1.1,2.1-1.2c0.9-0.2,1.7-0.1,2.4,0.3 C21.3,404,21.8,404.6,22,405.4L22,405.4z M17.9,407.4c0.3-0.1,0.6-0.2,0.7-0.5c0.2-0.2,0.2-0.5,0.2-0.7 c-0.1-0.3-0.2-0.5-0.5-0.6s-0.5-0.2-0.9-0.1c-0.3,0.1-0.6,0.2-0.7,0.5c-0.2,0.2-0.2,0.5-0.2,0.8c0.1,0.3,0.2,0.5,0.5,0.6 C17.3,407.5,17.6,407.5,17.9,407.4z M19.5,405.8c0.1,0,0.2-0.1,0.3-0.2c0.1-0.1,0.1-0.2,0.1-0.3s-0.1-0.2-0.2-0.2 c-0.1,0-0.2-0.1-0.4,0s-0.2,0.1-0.3,0.2s-0.1,0.2-0.1,0.3s0.1,0.2,0.2,0.2C19.2,405.8,19.4,405.9,19.5,405.8L19.5,405.8z M28.4,404.1c0.3,0.6,0.2,1.4-0.1,2.2c-0.3,0.8-1,1.7-1.9,2.6c-1.1,1-2.8,1.7-5.3,2.1c-2.5,0.4-5,0-7.5-1.1 c-2.2-1.4-3.2-2.8-2.9-4.4c0.3-1.6,0.7-2.7,1.2-3.2c0.4-0.5,1.1-1.3,2-2.3c0.9-1,1.9-1.7,2.9-2.3c0.9-0.4,1.7-0.7,2.2-0.7 c0.6,0,0.9,0.1,1.1,0.2c0.2,0.1,0.4,0.2,0.5,0.4c0.1,0.2,0.2,0.4,0.3,0.8c0,0.4-0.1,0.8-0.2,1c-0.1,0.3-0.2,0.4-0.1,0.6 c0.1,0,0.5-0.1,1.2-0.3c0.6-0.3,1.3-0.4,2.1-0.4c0.9,0.1,1.5,0.3,1.8,0.6c0.2,0.3,0.4,0.6,0.4,0.7c0,0.2,0,0.4,0,0.7 c0,0.3-0.1,0.5-0.3,0.7c-0.2,0.2-0.2,0.4-0.1,0.5c0.1,0.1,0.3,0.2,0.5,0.2s0.6,0.1,1.1,0.3C27.7,403.1,28.1,403.5,28.4,404.1 L28.4,404.1z M19.8,409.4c1.7-0.3,3.1-0.8,4.1-1.7s1.5-1.9,1.4-3c-0.2-1.1-0.9-2-2.1-2.5c-1.2-0.6-2.7-0.8-4.4-0.6 c-1.7,0.3-3.1,0.8-4.1,1.7s-1.5,1.9-1.4,3c0.2,1.1,0.9,2,2.1,2.6C16.6,409.5,18.1,409.6,19.8,409.4L19.8,409.4z"/>
<path id="Fill-29" class="st6" d="M-24.3,428.1c0.2-0.1,0.2-0.3,0.2-0.5c0-0.2-0.1-0.4-0.2-0.5c-0.1-0.1-0.4-0.2-0.7-0.2 c-0.2,0-0.4,0.1-0.5,0.2s-0.2,0.3-0.2,0.5c0,0.2,0.1,0.4,0.2,0.5s0.3,0.2,0.5,0.2C-24.6,428.3-24.4,428.3-24.3,428.1 L-24.3,428.1z M-20.3,428.1c0.2-0.1,0.2-0.3,0.2-0.5c0-0.2-0.1-0.4-0.2-0.5c-0.2-0.1-0.4-0.2-0.7-0.2c-0.2,0-0.4,0.1-0.5,0.2 s-0.2,0.3-0.2,0.5c0,0.2,0.1,0.4,0.2,0.5s0.3,0.2,0.5,0.2C-20.6,428.3-20.4,428.3-20.3,428.1L-20.3,428.1z M-16.8,429.3 c0,0.8-0.3,1.6-0.7,2.3c-0.5,0.7-1.1,1.3-1.8,1.9l0.5,1.8l-2-1.1c-0.4,0.1-0.7,0.2-1.1,0.2c-0.4,0.1-0.7,0.1-1.1,0.1 c-1.8,0-3.2-0.5-4.4-1.5c-1.2-1-1.8-2.2-1.8-3.7s0.6-2.7,1.8-3.7c1.2-1,2.6-1.5,4.4-1.5c1.7,0,3.1,0.6,4.3,1.5 C-17.4,426.5-16.8,427.8-16.8,429.3L-16.8,429.3z M-27.3,421.6c-0.3,0-0.5,0.1-0.7,0.2c-0.2,0.2-0.3,0.4-0.3,0.7 c0,0.3,0.1,0.5,0.3,0.7s0.5,0.2,0.7,0.2c0.3,0,0.5-0.1,0.7-0.2c0.2-0.2,0.2-0.4,0.2-0.7c0-0.3-0.1-0.5-0.2-0.7 C-26.8,421.7-27,421.6-27.3,421.6L-27.3,421.6z M-31.7,423.2c0.2-0.2,0.2-0.4,0.2-0.7c0-0.3-0.1-0.5-0.2-0.7 c-0.2-0.2-0.4-0.2-0.7-0.2c-0.3,0-0.5,0.1-0.7,0.2c-0.2,0.2-0.3,0.4-0.3,0.7c0,0.3,0.1,0.5,0.3,0.7c0.2,0.2,0.5,0.2,0.8,0.2 C-32.1,423.5-31.9,423.4-31.7,423.2L-31.7,423.2z M-23.4,423.6L-23.4,423.6c-1.8,0-3.2,0.6-4.4,1.7c-1.1,1.1-1.7,2.4-1.8,4.1 c0,0.5,0.1,1,0.2,1.5c-0.2,0-0.5,0-0.7,0c-0.4,0-0.9,0-1.3-0.1s-0.8-0.2-1.3-0.2l-2.5,1.3l0.7-2.2c-0.9-0.6-1.6-1.4-2.1-2.2 c-0.5-0.8-0.8-1.7-0.8-2.7c0.1-1.8,0.8-3.2,2.1-4.4c1.4-1.2,3.1-1.8,5.1-1.8c1.8,0,3.4,0.5,4.8,1.4c1.4,0.9,2.2,2.1,2.6,3.6 H-23.4L-23.4,423.6z"/>
<path id="Fill-33" class="st6" d="M-6.2,428.6l2.4-0.1v-0.9l-1.6,0.1V424l-1.3,0.1v3.7l-3.8,0.2v0.8l2.6-0.2l-1.1,1.5l-1.4,0.1 v0.8l2.4-0.1L-6.2,428.6z M-3,426.9v0.8h0.9l2.4-1.2l2.4,0.9h0.9v-0.9H3l-1.6-0.6l2.1-1.1v-1.5l-4.3,0.2l-1-0.5l-1.3,2.1 l1.1,0.4l0.7-1.1l3.6-0.2v0.2l-2,1l-1.5-0.6l-0.5,0.8l0.9,0.4l-1.5,0.8L-3,426.9z M3,428.8l-1.3,0.1l0.9,1.6l1.3-0.1L3,428.8z M-3,430.7l1.3-0.1l0.9-1.7l-1.3,0.1L-3,430.7z M-6,428.8l1,2l1.4-0.1l-1-2L-6,428.8z M-7.4,427.4l-1-1.3l-1.4,0.1l1,1.3 L-7.4,427.4z M-7.4,425.7l-1-1.3l-1.4,0.1l1,1.3L-7.4,425.7z M3.7,428.5v-0.8L1,427.9v-0.4l-1.3,0.1v0.3L-3,428v0.8l2.7-0.1v1.9 l1.3-0.1v-1.9L3.7,428.5z M-8.8,435.9c-0.9,0-1.7-0.3-2.3-0.9c-0.6-0.6-0.9-1.4-0.9-2.3v-11.6c0-0.9,0.3-1.7,0.9-2.3 c0.6-0.6,1.4-0.9,2.3-0.9H2.8c0.9,0,1.7,0.3,2.3,0.9c0.6,0.6,0.9,1.4,0.9,2.3v11.6c0,0.9-0.3,1.7-0.9,2.3 c-0.6,0.6-1.4,0.9-2.3,0.9H-8.8L-8.8,435.9z M5.5,421.3v-0.1c0-0.8-0.3-1.4-0.8-1.9s-1.1-0.8-1.9-0.8H-8.8 c-0.4,0-0.7,0.1-1.1,0.2c-0.3,0.1-0.6,0.3-0.9,0.6c-0.3,0.3-0.4,0.5-0.6,0.9c-0.1,0.3-0.2,0.7-0.2,1.1v1.1L5.5,421.3z M5.5,432.4l-16.9,1c0.2,0.6,0.5,1.1,1,1.5c0.5,0.4,1,0.6,1.7,0.6H2.9c0.8,0,1.4-0.3,1.9-0.8s0.8-1.1,0.8-1.9v-0.4H5.5z"/>
<path id="Fill-35" class="st6" d="M29.2,419.8c0.9,0.7,1.5,1.5,1.8,2.4s0.3,2,0.1,3.1c0,0.2-0.1,0.4-0.3,0.6 c-0.1,0.2-0.3,0.2-0.5,0.2s-0.4-0.1-0.6-0.2c-0.2-0.2-0.2-0.4-0.2-0.6c0.1-0.1,0.1-0.7,0.1-1.7s-0.4-1.9-1.3-2.6 c-1-0.6-1.7-0.8-2.3-0.8s-0.9,0.1-0.9,0.1c-0.2,0-0.4-0.1-0.6-0.2c-0.2-0.2-0.2-0.3-0.2-0.6c0-0.2,0.1-0.4,0.2-0.5 c0.2-0.1,0.3-0.2,0.5-0.3c0.8-0.1,1.5-0.1,2.3,0.1C27.9,419,28.6,419.3,29.2,419.8L29.2,419.8z M28,422.3c0.2,0.2,0.4,0.6,0.5,1 s0.1,1-0.1,1.6c-0.1,0.3-0.3,0.5-0.7,0.5c-0.2,0-0.3-0.1-0.5-0.2c-0.1-0.2-0.2-0.3-0.1-0.5c0-0.2,0-0.4,0-0.6 c0-0.2-0.1-0.4-0.2-0.6c-0.1-0.2-0.3-0.3-0.5-0.4c-0.2-0.1-0.4-0.2-0.7-0.1c-0.6,0-0.9-0.2-0.9-0.6c0-0.4,0.3-0.7,0.8-0.8 c0.3-0.1,0.7,0,1.2,0.1C27.2,421.6,27.7,421.9,28,422.3L28,422.3z M22,429.4c0.1,0.8-0.1,1.5-0.6,2.1c-0.5,0.6-1.2,1.1-2.1,1.3 c-0.9,0.2-1.7,0-2.4-0.3c-0.7-0.4-1.2-1-1.3-1.7c-0.1-0.8,0.1-1.5,0.6-2.1s1.2-1.1,2.1-1.2c0.9-0.2,1.7-0.1,2.4,0.3 C21.3,428,21.8,428.6,22,429.4L22,429.4z M17.9,431.4c0.3-0.1,0.6-0.2,0.7-0.5c0.2-0.2,0.2-0.5,0.2-0.7 c-0.1-0.3-0.2-0.5-0.5-0.6s-0.5-0.2-0.9-0.1c-0.3,0.1-0.6,0.2-0.7,0.5c-0.2,0.2-0.2,0.5-0.2,0.8c0,0.3,0.2,0.5,0.5,0.6 C17.3,431.5,17.6,431.5,17.9,431.4z M19.5,429.8c0.1,0,0.2-0.1,0.3-0.2c0.1-0.1,0.1-0.2,0.1-0.3s-0.1-0.2-0.2-0.2 c-0.1,0-0.2-0.1-0.4,0c-0.1,0-0.2,0.1-0.3,0.2s-0.1,0.2-0.1,0.3s0.1,0.2,0.2,0.2C19.2,429.8,19.4,429.9,19.5,429.8L19.5,429.8z M28.4,428.1c0.3,0.6,0.2,1.4-0.1,2.2c-0.3,0.8-1,1.7-1.9,2.6c-1.1,1-2.8,1.7-5.3,2.1c-2.5,0.4-5,0-7.5-1.1 c-2.2-1.4-3.2-2.8-2.9-4.4c0.3-1.6,0.7-2.7,1.2-3.2c0.4-0.5,1.1-1.3,2-2.3c0.9-1,1.9-1.7,2.9-2.3c0.9-0.4,1.7-0.7,2.2-0.7 c0.6,0,0.9,0.1,1.1,0.2c0.2,0.1,0.4,0.2,0.5,0.4c0.1,0.2,0.2,0.4,0.3,0.8c0,0.4-0.1,0.8-0.2,1c-0.1,0.2-0.2,0.4-0.1,0.6 c0.1,0,0.5-0.1,1.2-0.3c0.6-0.3,1.3-0.4,2.1-0.4c0.9,0.1,1.5,0.3,1.8,0.6c0.2,0.3,0.4,0.6,0.4,0.7c0,0.2,0,0.4,0,0.7 c0,0.3-0.1,0.5-0.3,0.7c-0.2,0.2-0.2,0.4-0.1,0.5c0.1,0.1,0.3,0.2,0.5,0.2s0.6,0.1,1.1,0.3C27.7,427.1,28.1,427.5,28.4,428.1 L28.4,428.1z M19.8,433.4c1.7-0.3,3.1-0.8,4.1-1.7s1.5-1.9,1.4-3c-0.2-1.1-0.9-2-2.1-2.5c-1.2-0.6-2.7-0.8-4.4-0.6 c-1.7,0.3-3.1,0.8-4.1,1.7s-1.5,1.9-1.4,3c0.2,1.1,0.9,2,2.1,2.6C16.6,433.5,18.1,433.6,19.8,433.4L19.8,433.4z"/>
<path id="Fill-37" class="st7" d="M83,403c0.2,0,0.4,0.1,0.6,0.2c0.2,0.1,0.2,0.3,0.2,0.5s-0.1,0.4-0.2,0.5 c-0.1,0.1-0.3,0.2-0.6,0.2c-0.2,0-0.4-0.1-0.6-0.2c-0.2-0.1-0.2-0.3-0.2-0.5s0.1-0.4,0.2-0.5C82.6,403.1,82.8,403,83,403L83,403 z M83.7,397.6l-0.2,4.7h-1.1l-0.2-4.7H83.7z M78.8,405.1c-1.1-1.1-1.7-2.5-1.8-4.2c0-1.7,0.6-3.1,1.8-4.2s2.5-1.8,4.2-1.8 s3.1,0.6,4.2,1.8c1.1,1.1,1.7,2.5,1.8,4.2c0,1.7-0.6,3.1-1.8,4.2c-1.1,1.1-2.5,1.7-4.2,1.8C81.3,406.9,79.9,406.3,78.8,405.1 L78.8,405.1z M86.7,404.6c1-1,1.5-2.2,1.5-3.7s-0.6-2.7-1.5-3.7c-1-1-2.2-1.5-3.7-1.5s-2.7,0.6-3.7,1.5c-1,1-1.5,2.2-1.5,3.7 s0.6,2.7,1.5,3.7c1,1,2.2,1.5,3.7,1.5S85.7,405.6,86.7,404.6L86.7,404.6z"/>
<path id="Fill-39" class="st8" d="M108.8,394c-0.1-0.1-0.1-0.3-0.1-0.5c0-0.2,0.1-0.3,0.3-0.3s0.3,0,0.5,0.1l3.7,3.7 c0.1,0.1,0.1,0.2,0.1,0.3s0,0.2-0.1,0.3l-3.7,3.7c-0.1,0.1-0.3,0.1-0.5,0.1s-0.3-0.1-0.3-0.3c0-0.2,0-0.3,0.1-0.4l3.4-3.4 L108.8,394z"/>
</g>
</g>
<g id="编组_1_" transform="translate(0.000000, 36.000000)">
<rect id="矩形" x="-158" y="390.9" class="st9" width="24" height="24"/>
<path id="形状_1_" class="st2" d="M-148.5,399.1c1.1,0,2-1.2,2-2.7s-0.9-2.7-2-2.7s-2,1.2-2,2.7 C-150.4,397.9-149.5,399.1-148.5,399.1z M-143.6,399.4c1.1,0,2.3-1.2,2.4-2.6c0-1.2-0.9-2.6-1.9-2.6c-1.1,0-2.1,1.2-2.2,2.6 C-145.4,398.2-144.6,399.4-143.6,399.4z M-149.5,406.7c-0.6,0-1.1,0.6-1.1,1.2c0,0.6,0.5,1.1,1.1,1.2l0,0h1.2v-2.4H-149.5 L-149.5,406.7z M-139.7,407.1L-139.7,407.1c-0.3-0.3-0.5-0.6-0.8-0.7c-0.7-0.6-1.4-1.3-1.8-1.8c-0.7-0.7-1.6-1.8-1.9-2.4l0,0 c-0.5-0.7-1.3-1.1-2.2-1.1c-1,0-1.9,0.6-2.4,1.4l0,0c0,0-0.5,1-1.4,1.8c-0.9,0.9-2.6,1.8-3.1,3.3c0,0.1,0,0.2,0,0.2 c-0.1,0.3-0.2,0.6-0.2,0.9c0,1.7,1.4,3,3,3c0.1,0,0.2,0,0.3,0l0,0c0,0,1.7-0.2,2.3-0.3c0.6-0.1,1.8-0.4,3.2,0 c1.4,0.4,2,0.5,2.5,0.5l0,0c1.7,0,3-1.4,3-3C-139.2,408.2-139.4,407.6-139.7,407.1L-139.7,407.1z M-147.2,410.2h-2.4l0,0 c-1.1-0.1-2-1.1-2-2.2c0-1.1,0.9-2.1,2-2.2l0,0h1.4v-1.7h1.1L-147.2,410.2L-147.2,410.2z M-142.4,410.1h-2.4 c-1,0-1.8-0.8-1.8-1.8v-0.1l0,0v-2.6h1.1v2.7c0,0.4,0.3,0.7,0.7,0.7h1.4v-3.4h1.1L-142.4,410.1L-142.4,410.1z M-140,399.2 c-0.5,0-0.9,0.1-1.3,0.5c-0.5,0.5-0.8,1.3-0.8,2.1c0,0.7,0.2,1.6,0.6,2s0.9,0.5,1.5,0.5c0.7,0,1.3-0.2,1.7-0.8 c0.3-0.4,0.4-1.2,0.4-1.8C-137.9,400.4-138.8,399.2-140,399.2z M-151,402.2c0.3-0.4,0.4-1.1,0.4-1.7c0-1.5-0.9-2.7-2-2.7 c-1.1,0-2,1.2-2,2.7s0.9,2.7,2,2.7C-152,403.2-151.3,402.8-151,402.2z"/>
</g>
<g id="编组_2_" transform="translate(24.000000, 36.000000)">
<rect id="矩形_1_" x="-158" y="390.9" class="st9" width="24" height="24"/>
<path id="形状_2_" class="st6" d="M-148.5,399.1c1.1,0,2-1.2,2-2.7s-0.9-2.7-2-2.7s-2,1.2-2,2.7 C-150.4,397.9-149.5,399.1-148.5,399.1z M-149.5,406.7c-0.6,0-1.1,0.6-1.1,1.2c0,0.6,0.5,1.1,1.1,1.2l0,0h1.2v-2.4H-149.5 L-149.5,406.7z M-143.6,399.4c1.1,0,2.3-1.2,2.4-2.6c0-1.2-0.9-2.6-1.9-2.6s-2.1,1.2-2.2,2.6 C-145.4,398.2-144.6,399.4-143.6,399.4z M-140,399.2c-0.5,0-0.9,0.1-1.3,0.5c-0.5,0.5-0.8,1.3-0.8,2.1c0,0.7,0.2,1.6,0.6,2 s0.9,0.5,1.5,0.5c0.7,0,1.3-0.2,1.7-0.8c0.3-0.4,0.4-1.2,0.4-1.8C-137.9,400.4-138.8,399.2-140,399.2z M-139.7,407.1 L-139.7,407.1c-0.3-0.3-0.5-0.6-0.8-0.7c-0.7-0.6-1.4-1.3-1.8-1.8c-0.7-0.7-1.6-1.8-1.9-2.4l0,0c-0.5-0.7-1.3-1.1-2.2-1.1 c-1,0-1.9,0.6-2.4,1.4l0,0c0,0-0.5,1-1.4,1.8c-0.9,0.9-2.6,1.8-3.1,3.3c0,0.1,0,0.2,0,0.2c-0.1,0.3-0.2,0.6-0.2,0.9 c0,1.7,1.4,3,3,3c0.1,0,0.2,0,0.3,0l0,0c0,0,1.7-0.2,2.3-0.3c0.6-0.1,1.8-0.4,3.2,0c1.4,0.4,2,0.5,2.5,0.5l0,0c1.7,0,3-1.4,3-3 C-139.2,408.2-139.4,407.6-139.7,407.1L-139.7,407.1z M-147.2,410.2h-2.4l0,0c-1.1-0.1-2-1.1-2-2.2c0-1.1,0.9-2.1,2-2.2l0,0h1.4 v-1.7h1.1L-147.2,410.2C-147.1,410.2-147.2,410.2-147.2,410.2z M-142.4,410.1h-2.4c-1,0-1.8-0.8-1.8-1.8v-0.1l0,0v-2.6h1.1v2.7 c0,0.4,0.3,0.7,0.7,0.7h1.4v-3.4h1.1L-142.4,410.1C-142.3,410.1-142.4,410.1-142.4,410.1z M-151,402.2c0.3-0.4,0.4-1.1,0.4-1.7 c0-1.5-0.9-2.7-2-2.7c-1.1,0-2,1.2-2,2.7s0.9,2.7,2,2.7C-152,403.2-151.3,402.8-151,402.2z"/>
</g>
</g>
</g>
<g>
<rect x="-98" y="430.9" class="st9" width="16" height="8"/>
<path id="Fill-17_1_" class="st5" d="M-93.7,437.2c-0.1,0.1-0.3,0.2-0.5,0.1c-0.2,0-0.3-0.2-0.3-0.3c0-0.2,0-0.3,0.1-0.5l4-4 c0.1-0.1,0.2-0.1,0.4-0.1c0.1,0,0.3,0,0.4,0.1l4,4c0.1,0.1,0.2,0.3,0.1,0.5c0,0.2-0.2,0.3-0.3,0.3c-0.2,0-0.3,0-0.5-0.1l-3.8-3.7 L-93.7,437.2z"/>
</g>
<g>
<rect x="-98" y="439.9" class="st9" width="16" height="8"/>
<path id="Fill-17_2_" class="st5" d="M-90.1,445.3l3.8-3.7c0.2-0.1,0.3-0.1,0.5-0.1c0.1,0,0.3,0.1,0.3,0.3c0.1,0.2,0,0.4-0.1,0.5 l-4,4c-0.1,0.1-0.3,0.1-0.4,0.1c-0.2,0-0.3,0-0.4-0.1l-4-4c-0.1-0.2-0.1-0.3-0.1-0.5c0-0.1,0.1-0.3,0.3-0.3c0.2-0.1,0.4,0,0.5,0.1 L-90.1,445.3z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

View File

@@ -0,0 +1,608 @@
<!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>Document</title>
<link rel="stylesheet" href="https://at.alicdn.com/t/font_2585390_03bi494q3jnw.css">
<link rel="stylesheet" href="css/clear.css">
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/public.css">
</head>
<body>
<div class="header">
<div class="header_menu">
<!--首部-->
<div class="layout">
<!--左边-->
<ul class="left_menu left">
<li><a href="">首页</a></li>
<li><a href="">华为官网</a></li>
<li><a href="">花粉俱乐部</a></li>
<li><a href="">V码(优购码)</a></li>
<li><a href="">企业购</a></li>
<li><a href="">Select Region</a></li>
<li class="gd"><a href="">更多精彩
<div class="gengduo">
<div>EMUI</div>
<div>应用市场</div>
<div>华为终端云空间</div>
<div>开发者联盟</div>
</div>
</a></li>
</ul>
<ul class="right_menu right">
<li><a href="">请登录 注册</a></li>
<li><a href="">我的订单</a></li>
<li class="kf"><a href="">客服
<i class="iconfont icon-xiangshangjiantou"></i>
<div class="kefu">
<div>服务中心</div>
<div>联系客服</div>
</div>
</a></li>
<li class="dh"><a href="">网站导航
<i class="iconfont icon-xiangshangjiantou"></i>
<div class="daohang">
<div class="drop_menu_item">
<div class="icon_home"></div>
<span>商城首页</span>
</div>
<div class="drop_menu_item">
<h3>频道</h3>
<a href="">华为专区</a>
<a href="">企业购</a>
<a href="">教育优惠</a>
</div>
<div class="drop_menu_item">
<h3>产品</h3>
<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 class="drop_menu_item">
<h3>增值服务</h3>
<a href="">以旧换新</a>
<a href="">补购保障</a>
<a href="">一口价换电池</a>
</div>
<div class="drop_menu_item">
<h3>会员</h3>
<a href="">会员频道</a>
</div>
</div>
</a></li>
<li class="att"><a href="">手机版
<i class="iconfont icon-xiangshangjiantou"></i>
<div class="zp">
<div class="app">
<img src="https://res.vmallres.com/pimages//pages/cdnImages/FWETOIrFlCrX4xuB8E16.png"
alt="">
<div class="appwz">
<h2>华为商城app</h2>
<p>华为</p>
</div>
</div>
<div class="app">
<img src="https://res.vmallres.com/pimages/sale/2018-11/20181116180507506.jpg"
alt="">
<div class="appwz">
<h2>华为商城app</h2>
<p>华为</p>
</div>
</div>
<div class="app">
<img src="https://res.vmallres.com/pimages//sale/2018-12/6Y7SW4v4hnJ9kl9fDC9d.jpg"
alt="">
<div class="appwz">
<h2>华为商城app</h2>
<p>华为</p>
</div>
</div>
</div>
</a></li>
<li class="car"><a href=""><i class="iconfont icon-gouwuche"></i>
购物车(0)
</a></li>
</ul>
</div>
</div>
<div class="header_logo">
<!--logo部分-->
<div class="layout">
<img class="logo left"
src="https://res.vmallres.com/pimages//common/config/logo/SXppnESYv4K11DBxDFc2.png" alt="">
<ul class="menus left">
<li><img src="https://res.vmallres.com/pimages//navigation/icon/GrguiqzHENWVYHYWyHBM.png" alt="">
</li>
<li><a href="">莫塞尔专区</a></li>
<li><a href="">华为智选</a></li>
<li><a href="">鸿蒙智联</a></li>
<li><a href="">福利中心</a></li>
</ul>
<div class="search right">
<input type="text" placeholder="WITCH3 Freebusd 4">
<ul class="search_kuang">
<p>历史记录</p>
<span>清除</span>
<li class="huaxian">WITCH3</li>
<li>Freebusd 4</li>
<li>1234</li>
<li>1234</li>
<li>1234</li>
</ul>
<i class="iconfont icon-sousuo"></i>
</div>
</div>
</div>
</div>
<div class="content">
<div class="banner">
<div class="layout banner_center">
<ul class="banner_menu">
<li><a href="">手机</a>
<i class="iconfont icon-xiangshangjiantou-copy"></i>
<div class="drow_menu">
<div class="list">
<div class="item">
<a href="">
<img src="https://res.vmallres.com/pimages//pages/frontCategory/14651510730611515641.png"
alt="">
<span>HUAWEI Mate系列</span>
</a>
</div>
<div class="item">
<a href="">
<img src="https://res.vmallres.com/pimages//pages/frontCategory/14651510730611515641.png"
alt="">
<span>HUAWEI Mate系列</span>
</a>
</div>
<div class="item">
<a href="">
<img src="https://res.vmallres.com/pimages//pages/frontCategory/14651510730611515641.png"
alt="">
<span>HUAWEI Mate系列</span>
</a>
</div>
<div class="item">
<a href="">
<img src="https://res.vmallres.com/pimages//pages/frontCategory/14651510730611515641.png"
alt="">
<span>HUAWEI Mate系列</span>
</a>
</div>
</div>
<div class="show_all">
<i class=" iconfont icon-bofang"></i>
<span>查看全部</span>
</div>
</div>
</li>
<li>
<a href="">智能穿戴&VR</a>
<i class="iconfont icon-xiangshangjiantou-copy"></i>
<div class="drow_menuzn ">
<div class="list left">
<div class="item">
<a href="">
<img src="https://res.vmallres.com/pimages//pages/frontCategory/14651510730611515641.png"
alt="">
<span>HUAWEI Mate系列</span>
</a>
</div>
<div class="item">
<a href="">
<img src="https://res.vmallres.com/pimages//pages/frontCategory/14651510730611515641.png"
alt="">
<span>HUAWEI Mate系列</span>
</a>
</div>
<div class="item">
<a href="">
<img src="https://res.vmallres.com/pimages//pages/frontCategory/14651510730611515641.png"
alt="">
<span>HUAWEI Mate系列</span>
</a>
</div>
<div class="item">
<a href="">
<img src="https://res.vmallres.com/pimages//pages/frontCategory/14651510730611515641.png"
alt="">
<span>HUAWEI Mate系列</span>
</a>
</div>
<div class="item">
<a href="">
<img src="https://res.vmallres.com/pimages//pages/frontCategory/14651510730611515641.png"
alt="">
<span>HUAWEI Mate系列</span>
</a>
</div>
</div>
<div class="list right aaa">
<div class="item">
<a href="">
<img src="https://res.vmallres.com/pimages//pages/frontCategory/14651510730611515641.png"
alt="">
<span>HUAWEI Mate系列</span>
</a>
</div>
<div class="item">
<a href="">
<img src="https://res.vmallres.com/pimages//pages/frontCategory/14651510730611515641.png"
alt="">
<span>HUAWEI Mate系列</span>
</a>
</div>
<div class="show_all">
<i class=" iconfont icon-bofang"></i>
<span>查看全部</span>
</div>
</div>
</li>
<li>
<a href="">耳机音箱眼镜</a>
<i class="iconfont icon-xiangshangjiantou-copy"></i>
</li>
<li>
<a href="">智慧屏</a>
<i class="iconfont icon-xiangshangjiantou-copy"></i>
</li>
<li>
<a href="">电脑</a>
<i class="iconfont icon-xiangshangjiantou-copy"></i>
</li>
<li>
<a href="">平板</a>
<i class="iconfont icon-xiangshangjiantou-copy"></i>
</li>
<li>
<a href="">智能路由</a>
<i class="iconfont icon-xiangshangjiantou-copy"></i>
</li>
<li>
<a href="">配件</a>
<i class="iconfont icon-xiangshangjiantou-copy"></i>
</li>
<li>
<a href="">生态产品</a>
<i class="iconfont icon-xiangshangjiantou-copy"></i>
</li>
<li>
<a href="">美食酒饮</a>
<i class="iconfont icon-xiangshangjiantou-copy"></i>
</li>
<li>
<a href="">增值服务&企业商用</a>
<i class="iconfont icon-xiangshangjiantou-copy"></i>
</li>
</ul>
<ul class="user_info">
<li>
<img class="left"
src="https://res.vmallres.com/20210519/images/echannel/misc/img_not_logged_in.png" alt="">
<div class="user_text">
<p>您好!请
<a href="">登录</a>/
<a href="">注册</a>
</p>
<a href="" class="news">新人福利</a>
<a href="" class="vip">会员频道</a>
</div>
</li>
<li>
<div class="icon_item ">
<img src="./img/img/icon_1.png" alt="">
<p>企业购</p>
</div>
<div class="icon_item ">
<img src="./img/img/icon_1.png" alt="">
<p>企业购</p>
</div>
<div class="icon_item ">
<img src="./img/img/icon_1.png" alt="">
<p>企业购</p>
</div>
<div class="icon_item ">
<img src="./img/img/icon_1.png" alt="">
<p>企业购</p>
</div>
<div class="icon_item ">
<img src="./img/img/icon_1.png" alt="">
<p>企业购</p>
</div>
<div class="icon_item ">
<img src="./img/img/icon_1.png" alt="">
<p>企业购</p>
</div>
</li>
<li>
<div class="top_tips">
<span>公告</span>
<a href="">HUAWEI WATCH 3系列 新品上市公告</a>
</div>
<div class="bottom_list">
<div class="b_icon">
<a href="">
<img src="./img/img/icon_1.png" alt="">
<span>优惠码</span>
</a>
</div>
<div class="b_icon">
<a href="">
<img src="./img/img/icon_1.png" alt="">
<span>更换电池</span>
</a>
</div>
<div class="b_icon">
<a href="">
<img src="./img/img/icon_1.png" alt="">
<span>补购保障</span>
</a>
</div>
</li>
</ul>
<!--用户登录-->
</div>
</div>
<div class="content_zj">
<ul class="dhtupian">
<li>
<img src="https://res.vmallres.com/pimages//pages/picImages/93724597641619542739.png" alt="">
</li>
<li>
<img src="https://res.vmallres.com/pimages//pages/picImages/76697404622610479667.png" alt="">
</li>
<li>
<img src="https://res.vmallres.com/pimages//pages/picImages/81592216522611229518.png" alt="">
</li>
<li>
<img src="https://res.vmallres.com/pimages//pages/picImages/68657005622610075686.jpg" alt="">
</li>
</ul>
<div class="rexiao">
<h2>热销单品</h2>
</div>
<div class="rexiaotupian">
<ul>
<img class="biao"
src="https://res0.vmallres.com/pimages//frontLocation/content/42621304722610312624.png" alt="">
<li>
<a href="">
<img src="https://res0.vmallres.com/pimages//product/6941487207749/428_428_711F9B10AC6F7C28739F8C8F281BE9C8931C9A9CB34DA514mp.png"
alt="">
<p class="t">FreeBuds 4i</p>
<p class="x">享3期免息</p>
<p class="j">¥499</p>
</a>
</li>
<li><a href="">
<img src="https://res0.vmallres.com/pimages//product/6941487207749/428_428_711F9B10AC6F7C28739F8C8F281BE9C8931C9A9CB34DA514mp.png"
alt="">
<p class="t">FreeBuds 4i</p>
<p class="x">享3期免息</p>
<p class="j">¥499</p>
</a></li>
<li><a href="">
<img src="https://res0.vmallres.com/pimages//product/6941487207749/428_428_711F9B10AC6F7C28739F8C8F281BE9C8931C9A9CB34DA514mp.png"
alt="">
<p class="t">FreeBuds 4i</p>
<p class="x">享3期免息</p>
<p class="j">¥499</p>
</a></li>
<li><a href="">
<img src="https://res0.vmallres.com/pimages//product/6941487207749/428_428_711F9B10AC6F7C28739F8C8F281BE9C8931C9A9CB34DA514mp.png"
alt="">
<p class="t">FreeBuds 4i</p>
<p class="x">享3期免息</p>
<p class="j">¥499</p>
</a></li>
<li><a href="">
<img src="https://res0.vmallres.com/pimages//product/6941487207749/428_428_711F9B10AC6F7C28739F8C8F281BE9C8931C9A9CB34DA514mp.png"
alt="">
<p class="t">FreeBuds 4i</p>
<p class="x">享3期免息</p>
<p class="j">¥499</p>
</a></li>
<li><a href="">
<img src="https://res0.vmallres.com/pimages//product/6941487207749/428_428_711F9B10AC6F7C28739F8C8F281BE9C8931C9A9CB34DA514mp.png"
alt="">
<p class="t">FreeBuds 4i</p>
<p class="x">享3期免息</p>
<p class="j">¥499</p>
</a></li>
<li><a href="">
<img src="https://res0.vmallres.com/pimages//product/6941487207749/428_428_711F9B10AC6F7C28739F8C8F281BE9C8931C9A9CB34DA514mp.png"
alt="">
<p class="t">FreeBuds 4i</p>
<p class="x">享3期免息</p>
<p class="j">¥499</p>
</a></li>
<li><a href="">
<img src="https://res0.vmallres.com/pimages//product/6941487207749/428_428_711F9B10AC6F7C28739F8C8F281BE9C8931C9A9CB34DA514mp.png"
alt="">
<p class="t">FreeBuds 4i</p>
<p class="x">享3期免息</p>
<p class="j">¥499</p>
</a></li>
</ul>
</div>
</div>
</div>
<div class="footer">
<div class="layout">
<div class="shang">
<ul>
<li><a href=""><i class="one_q"></i>
<span>百强企业 品质保证</span></a></li>
<li><a href=""><i class="one_w"></i>
<span>7天退货 15天换货</span></a></li>
<li><a href=""><i class="one_e"></i>
<span>48元起免运费</span></a></li>
<li><a href=""><i class="one_r"></i>
<span>2000家服务店 全国联保</span></a></li>
</ul>
</div>
<div class="zhong">
<div class="zhong_zuo">
<ul>
<li>
<h3>购物相关</h3>
<p><a href="">购物指南</a></p>
<p><a href="">配送方式</a></p>
<p><a href="">支付方式</a></p>
<p><a href="">常见问题</a></p>
</li>
<li>
<h3>保修与退换货</h3>
<p><a href="">保修政策</a></p>
<p><a href="">退换货政策</a></p>
<p><a href="">保修状态查询</a></p>
<p><a href="">配件防伪查询</a></p>
</li>
<li>
<h3>维修与技术支持 </h3>
<p><a href="">服务店</a></p>
<p><a href="">预约维修</a></p>
<p><a href="">手机寄修</a></p>
<p><a href="">备件价格查询</a></p>
<p><a href="">上门服务</a></p>
</li>
<li>
<h3>特色服务</h3>
<p><a href="">防伪查询</a></p>
<p><a href="">补购保障</a></p>
<p><a href="">以旧换新</a></p>
<p><a href="">以旧换新</a></p>
</li>
<li>
<h3>关于我们</h3>
<p><a href="">公司介绍</a></p>
<p><a href="">华为商城简介</a></p>
<p><a href="">华为零售店</a></p>
<p><a href="">商家中心</a></p>
<p><a href="">意见反馈</a></p>
</li>
<li>
<h3>友情链接</h3>
<p><a href="">华为集团</a></p>
<p><a href="">华为CBG官网</a></p>
<p><a href="">花粉俱乐部</a></p>
<p><a href="">华为云</a></p>
<p><a href="">华为应用市场</a></p>
</li>
</ul>
</div>
<div class="zhong_you">
<p>950805</p>
<p>7x24小时客服热线仅收市话费</p>
<a class="bejing" href="">
<i class="iconfont icon-kefu"></i>
<span>在线客服</span>
</a>
<div class="you_tubiao">
<ul>
<li>关注Vmall</li>
<li>
<a href="">
<i class="tubiao_a"></i>
</a>
</li>
<li>
<a href="">
<i class="tubiao_b"></i>
</a>
</li>
<li>
<a href="">
<i class="tubiao_c"></i>
</a>
</li>
<li>
<a href="">
<i class="tubiao_d"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="xia">
<div class="zwf">
<a href="">
<img src="https://res.vmallres.com/pimages/sale/2019-01/wLelYbpMVWbj9Xpaa5Fk.png" alt="">
</a>
</div>
<div class="zjbj">
<ul class="ul_a">
<li>
<span><a href="">华为集团</a></span>
<span><a href="">华为CBG官网</a></span>
<span><a href="">花粉俱乐部</a></span>
<span><a href="">华为应用市场</a></span>
<span><a href="">EMUI</a></span>
<span><a href="">华为终端云空间</a></span>
<span><a href="">开发者联盟</a></span>
<span><a href="">华为商城手机版</a></span>
<span><a href="">网站地图</a></span>
</li>
<li>
<span><a href="">隐私声明</a></span>
<span><a href="">服务协议</a></span>
<span><a href="">COOKIES</a></span>
<span>Copyright © 2012-2021 华为终端有限公司 版权所有</span>
<span><a href="">粤ICP备19015064号</a></span>
<span><a href="">粤公网安备 44190002003939号</a></span>
</li>
<li>
<span>增值电信业务经营许可证粤B2-20190762</span>
<span>备案主体编号44201919072182</span>
<span>粤新出网备20212号</span>
</li>
<li>
<span>互联网药品信息服务资格证(粤)-非经营性-2020-0102</span>
<span>粤东食药监械经营备20203930</span>
</li>
</div>
<img class="shangb" src="https://res.vmallres.com/pimages/template/content/2016/20160226162415360.png"
alt="">
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,13 @@
<!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>Document</title>
</head>
<body>
<script src="./js/index.js"></script>
</body>
</html>

View File

@@ -0,0 +1,35 @@
var a = 5;
console.log(a);
var B = '变量B';
console.log(B);
var c = 123;
console.log(c);
var d = false;
console.log(d == 0);
var e = null;
console.log(e);
var f = undefined;
console.log(f);
if (a > 6) {
console.log(a);
} else {
console.log("cuio")
}
for (var h = 1; h < 10; h++) {
console.log(h);
}
function m(q, v, l) {
console.log(q);
console.log(v);
console.log(l);
}
m()

View File

@@ -0,0 +1,47 @@
<!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>Document</title>
</head>
<style>
body,ul,li,p{
margin: 0;
padding: 0;
list-style: none;
}
.tltle{
display: flex;
}
.tltle li{
margin-right: 10px;
}
.col{
color: red;
}
.content li{
display: none;
}
.content .active{
display: block !important;
}
</style>
<body>
<ul class="tltle">
<li class="col">公告</li>
<li>规则</li>
<li>安全</li>
<li>公益</li>
</ul>
<ul class="content">
<li class="active">公告的内容</li>
<li>规则的内容</li>
<li>安全的内容</li>
<li>公益的内容</li>
</ul>
</body>
<script src="./index.js"></script>
</html>

View File

@@ -0,0 +1,17 @@
var tltle1 = document.querySelectorAll(".tltle li")//获取所有tltle 里的li标签
console.log(tltle1)//打印所有li标签
tltle1.forEach(function (v,i) {//循环函数 (这个v和i的概念)
v.onclick = function () {//循环点击
tltle1.forEach(function (item,ac) {//循环清空函数名
item.className = ""
content1[ac].className = " "
})
v.className = "col"//添加函数名
console.log(content1[i]);//tltle1的数组对应content的下标
content1[i].className="active"
}
}
)
var content1 = document.querySelectorAll(".content li")//获取所有content 里的li标签

View File

@@ -0,0 +1,44 @@
<!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>Document</title>
<style>
body,ul,li,p{
margin: 0;
padding: 0;
list-style: none;
}
.title{
display: flex;
}
.title li{
margin-right: 10px;
}
.col{
color: red;
}
.content li{
display: none;
}
.content .active{
display: block !important;
}
</style>
</head>
<body>
<ul class="title">
</ul>
<ul class="content">
</ul>
</body>
<script src="./imdex.js"></script>
<script src="./test.js"></script>
</html>

View File

@@ -0,0 +1,88 @@
var data = [{
title: '公告',
content: [
{ text: '公告的新闻1' },
{ text: '公告的新闻2' },
{ text: '公告的新闻3' },
]
},
{
title: '规则',
content: [
{ text: '规则的新闻1' },
{ text: '规则的新闻2' }
]
},
{
title: '安全',
content: [
{ text: '安全的新闻1' },
{ text: '安全的新闻2' },
{ text: '安全的新闻3' },
{ text: '安全的新闻4' },
]
},
{
title: '公益',
content: [
{ text: '公益的新闻1' },
{ text: '公益的新闻2' },
{ text: '公益的新闻3' },
{ text: '公益的新闻4' },
{ text: '公益的新闻5' },
]
},
{
title: '军事',
content: [
{ text: '军事的新闻1' },
{ text: '军事的新闻2' },
{ text: '军事的新闻3' },
{ text: '军事的新闻4' },
{ text: '军事的新闻5' },
]
}
];
var currentIndex = 0
//(便利是什么意思)
function RenderTitle() { //渲染title
data.forEach( //循环
function(v, i) { //函数
document.querySelector(".title").innerHTML /*向网页上添加元素*/ += `<li class="${i == 0 ? 'col' : ''}">${v.title}</li>`; /*字符串 */
console.log(v)
document.querySelector(".content").innerHTML /*向网页上添加元素*/ += `<li class="${i == 0 ? 'active' : ''}"></li>`; /*字符串 */
}
)
var tltle1 = document.querySelectorAll(".title li")
var content1 = document.querySelectorAll(".content li")
tltle1.forEach(function(v, i) {
v.onclick = function() {
tltle1.forEach(function(item, ac) {
item.className = ""
content1[ac].className = " "
})
v.className = "col"
content1[i].className = "active"
currentIndex = i
RenderContent()
}
})
}
function RenderContent() {
var li = document.querySelectorAll(".content li")
li[currentIndex].innerHTML = ""
data[currentIndex].content.forEach(function(v) {
li[currentIndex].innerHTML += `<p>${v.text}</p>`
})
}
RenderTitle()
RenderContent() //这里为啥子加一个空方法

View File

@@ -0,0 +1,43 @@
<!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>Document</title>
<style>
body,ul,li,p{
margin: 0;
padding: 0;
list-style: none;
}
.title{
display: flex;
}
.title li{
margin-right: 10px;
}
.col{
color: red;
}
.content li{
display: none;
}
.content .active{
display: block !important;
}
</style>
</head>
<body>
<ul class="title">
</ul>
<ul class="content">
</ul>
</body>
<script src="./imdex.js"></script>
</html>

View File

@@ -0,0 +1,45 @@
var data = [{
title: '公告',
content: [
{ text: '公告的新闻1' },
{ text: '公告的新闻2' },
{ text: '公告的新闻3' },
]
},
{
title: '规则',
content: [
{ text: '规则的新闻1' },
{ text: '规则的新闻2' }
]
},
{
title: '安全',
content: [
{ text: '安全的新闻1' },
{ text: '安全的新闻2' },
{ text: '安全的新闻3' },
{ text: '安全的新闻4' },
]
},
{
title: '公益',
content: [
{ text: '公益的新闻1' },
{ text: '公益的新闻2' },
{ text: '公益的新闻3' },
{ text: '公益的新闻4' },
{ text: '公益的新闻5' },
]
},
{
title: '军事',
content: [
{ text: '军事的新闻1' },
{ text: '军事的新闻2' },
{ text: '军事的新闻3' },
{ text: '军事的新闻4' },
{ text: '军事的新闻5' },
]
}
];

View File

@@ -0,0 +1,49 @@
<!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>Document</title>
<style>
body {
margin: 0;
padding: 0;
}
.ad {
width: 300px;
height: 300px;
position: fixed;
right: 0;
bottom: 0;
background: red;
}
.ad span {
width: 60px;
height: 30px;
background: #000;
color: #fff;
text-align: center;
line-height: 30px;
position: absolute;
right: 0;
top: 0;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div class="ad">
<span>x关闭</span>
</div>
</body>
<script src="./index.js"></script>
</html>

View File

@@ -0,0 +1,12 @@
var close = document.querySelector(".ad span");
var dis = document.querySelector(".ad");
var count = 0;
close.onclick = function() {
console.log("11");
count += 1
if (count == 1) {
open("https://www.bilibili.com/")
} else {
dis.classList.add("hidden")
}
}

View File

@@ -0,0 +1,29 @@
<!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>Document</title>
<style>
body {
margin: 0;
padding: 0;
}
ul li span {
color: red;
}
</style>
</head>
<body>
<input type="text" placeholder="请输入关键词">
<ul>
</ul>
</body>
<script src="./index.js"></script>
</html>

View File

@@ -0,0 +1,24 @@
var list = ['html学习', '不想学习', '想吃饭', '我没吃饱', '不写代码', '我的学习代码没写完,懒得学习'];
var Keyword = document.querySelector("input");
var ul = document.querySelector("ul");
var Newlist = []
Keyword.oninput = function() {
NewsList = [];
if (Keyword.value.length != 0) {
list.forEach(function(v) {
if (v.includes(Keyword.value)) {
v = v.replaceAll(Keyword.value, `<span>${Keyword.value}</span>`)
NewsList.push(v)
}
});
ul.innerHTML = ""
NewsList.forEach(function(v) {
ul.innerHTML += `<li>${v}</li>`
})
console.log(NewsList);
} else {
ul.innerHTML = ""
}
}

View File

@@ -0,0 +1,333 @@
<!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>Document</title>
</head>
<style>
.header {
width: 100%;
height: 60px;
background: red;
}
.fixed {
position: fixed;
width: 100%;
left: 0;
right: 0;
top: 0;
}
</style>
<body>
<ul>
<div class="header"></div>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
<li>32</li>
<li>33</li>
<li>34</li>
<li>35</li>
<li>36</li>
<li>37</li>
<li>38</li>
<li>39</li>
<li>40</li>
<li>41</li>
<li>42</li>
<li>43</li>
<li>44</li>
<li>45</li>
<li>46</li>
<li>47</li>
<li>48</li>
<li>49</li>
<li>50</li>
<li>51</li>
<li>52</li>
<li>53</li>
<li>54</li>
<li>55</li>
<li>56</li>
<li>57</li>
<li>58</li>
<li>59</li>
<li>60</li>
<li>61</li>
<li>62</li>
<li>63</li>
<li>64</li>
<li>65</li>
<li>66</li>
<li>67</li>
<li>68</li>
<li>69</li>
<li>70</li>
<li>71</li>
<li>72</li>
<li>73</li>
<li>74</li>
<li>75</li>
<li>76</li>
<li>77</li>
<li>78</li>
<li>79</li>
<li>80</li>
<li>81</li>
<li>82</li>
<li>83</li>
<li>84</li>
<li>85</li>
<li>86</li>
<li>87</li>
<li>88</li>
<li>89</li>
<li>90</li>
<li>91</li>
<li>92</li>
<li>93</li>
<li>94</li>
<li>95</li>
<li>96</li>
<li>97</li>
<li>98</li>
<li>99</li>
<li>100</li>
<li>101</li>
<li>102</li>
<li>103</li>
<li>104</li>
<li>105</li>
<li>106</li>
<li>107</li>
<li>108</li>
<li>109</li>
<li>110</li>
<li>111</li>
<li>112</li>
<li>113</li>
<li>114</li>
<li>115</li>
<li>116</li>
<li>117</li>
<li>118</li>
<li>119</li>
<li>120</li>
<li>121</li>
<li>122</li>
<li>123</li>
<li>124</li>
<li>125</li>
<li>126</li>
<li>127</li>
<li>128</li>
<li>129</li>
<li>130</li>
<li>131</li>
<li>132</li>
<li>133</li>
<li>134</li>
<li>135</li>
<li>136</li>
<li>137</li>
<li>138</li>
<li>139</li>
<li>140</li>
<li>141</li>
<li>142</li>
<li>143</li>
<li>144</li>
<li>145</li>
<li>146</li>
<li>147</li>
<li>148</li>
<li>149</li>
<li>150</li>
<li>151</li>
<li>152</li>
<li>153</li>
<li>154</li>
<li>155</li>
<li>156</li>
<li>157</li>
<li>158</li>
<li>159</li>
<li>160</li>
<li>161</li>
<li>162</li>
<li>163</li>
<li>164</li>
<li>165</li>
<li>166</li>
<li>167</li>
<li>168</li>
<li>169</li>
<li>170</li>
<li>171</li>
<li>172</li>
<li>173</li>
<li>174</li>
<li>175</li>
<li>176</li>
<li>177</li>
<li>178</li>
<li>179</li>
<li>180</li>
<li>181</li>
<li>182</li>
<li>183</li>
<li>184</li>
<li>185</li>
<li>186</li>
<li>187</li>
<li>188</li>
<li>189</li>
<li>190</li>
<li>191</li>
<li>192</li>
<li>193</li>
<li>194</li>
<li>195</li>
<li>196</li>
<li>197</li>
<li>198</li>
<li>199</li>
<li>200</li>
<li>201</li>
<li>202</li>
<li>203</li>
<li>204</li>
<li>205</li>
<li>206</li>
<li>207</li>
<li>208</li>
<li>209</li>
<li>210</li>
<li>211</li>
<li>212</li>
<li>213</li>
<li>214</li>
<li>215</li>
<li>216</li>
<li>217</li>
<li>218</li>
<li>219</li>
<li>220</li>
<li>221</li>
<li>222</li>
<li>223</li>
<li>224</li>
<li>225</li>
<li>226</li>
<li>227</li>
<li>228</li>
<li>229</li>
<li>230</li>
<li>231</li>
<li>232</li>
<li>233</li>
<li>234</li>
<li>235</li>
<li>236</li>
<li>237</li>
<li>238</li>
<li>239</li>
<li>240</li>
<li>241</li>
<li>242</li>
<li>243</li>
<li>244</li>
<li>245</li>
<li>246</li>
<li>247</li>
<li>248</li>
<li>249</li>
<li>250</li>
<li>251</li>
<li>252</li>
<li>253</li>
<li>254</li>
<li>255</li>
<li>256</li>
<li>257</li>
<li>258</li>
<li>259</li>
<li>260</li>
<li>261</li>
<li>262</li>
<li>263</li>
<li>264</li>
<li>265</li>
<li>266</li>
<li>267</li>
<li>268</li>
<li>269</li>
<li>270</li>
<li>271</li>
<li>272</li>
<li>273</li>
<li>274</li>
<li>275</li>
<li>276</li>
<li>277</li>
<li>278</li>
<li>279</li>
<li>280</li>
<li>281</li>
<li>282</li>
<li>283</li>
<li>284</li>
<li>285</li>
<li>286</li>
<li>287</li>
<li>288</li>
<li>289</li>
<li>290</li>
<li>291</li>
<li>292</li>
<li>293</li>
<li>294</li>
<li>295</li>
<li>296</li>
<li>297</li>
<li>298</li>
<li>299</li>
<li>300</li>
</ul>
</body>
<script src="./index.js"></script>
</html>

View File

@@ -0,0 +1,10 @@
var header = document.querySelector(".header");
window.onscroll = function() {
var high = document.querySelector("html").scrollTop;
if (high > 300) {
header.classList.add("fixed");
} else {
header.classList.remove("fixed")
}
}

View File

@@ -0,0 +1,44 @@
<!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>Document</title>
<style>
body {
margin: 0;
padding: 0;
}
.main {
width: 300px;
height: 250px;
margin: 20% auto;
border: 1px solid #000;
position: relative;
}
textarea {
width: 100%;
height: 100%;
}
span {
position: absolute;
right: 10px;
bottom: 10px;
}
</style>
</head>
<body>
<div class="main">
<textarea placeholder="请输入留言"></textarea>
<span>0/50</span>
</div>
</body>
<script src="./index.js"></script>
</html>

View File

@@ -0,0 +1,10 @@
var Textarea = document.querySelector("textarea");
var Span = document.querySelector("span");
Textarea.oninput = function() {
var len = Textarea.value.length;
if (len > 50) {
Textarea.value = Textarea.value.substring(0, 50);
} else { Span.innerText = `${Textarea.value.length}/50` }
}

View File

@@ -0,0 +1,28 @@
<!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>Document</title>
<style>
body {
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
}
span {
transition: all ease 1s;
}
</style>
</head>
<body>
</body>
<script src="./index.js"></script>
</html>

View File

@@ -0,0 +1,38 @@
var list = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"];
var body = document.querySelector("body");
var index = 0;
body.onclick = function(e) {
var Xcoord = e.x;
var Ycoord = e.y;
var span = document.createElement("span");
var color = parseInt(Math.random() * 360);
span.innerText = list[index];
span.style.position = "fixed";
span.style.left = `${Xcoord}px`
span.style.top = `${Ycoord}px`
span.style.color = `hsl(${color},100%,50%,0.7)`;
motion(span, Ycoord)
function motion(el, top) {
setTimeout(function() {
el.style.top = `${top-100}px `
}, 300);
setTimeout(function() {
body.removeChild(el)
}, 1300);
}
body.appendChild(span)
console.log(span);
index += 1;
if (index > 11) {
index = 0
}
}

View File

@@ -0,0 +1,28 @@
<!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>Document</title>
<style>
body {
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
}
span {
transition: all ease 1s;
}
</style>
</head>
<body>
</body>
<script src="./index.js"></script>
</html>

View File

@@ -0,0 +1,65 @@
var list = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"];
var body = document.querySelector("body");
var index = 0;
body.onclick = function(e) {
var Xcoord = e.x;
var Ycoord = e.y;
var span = document.createElement("span");
var color = parseInt(Math.random() * 360);
span.innerText = list[index];
span.style.position = "fixed";
span.style.left = `${Xcoord}px`
span.style.top = `${Ycoord}px`
span.style.color = `hsl(${color},100%,50%,0.7)`;
var direction = [
'LeftTop', 'LeftBottom',
'RightTop', 'RightBottom',
];
var directionIndex = parseInt(Math.random() * direction.length);
motion(direction[directionIndex], span, Xcoord, Ycoord);
function motion(direction, el, X, Y) {
var newX = Math.random() * X
var newY = Math.random() * Y
setTimeout(function() {
switch (direction) {
case "LeftTop":
el.style.left = `${Xcoord-newX}px`
el.style.top = `${Ycoord-newY}px`
break;
case "RightTop":
el.style.left = `${Xcoord+newX}px`
el.style.top = `${Ycoord-newY}px`
break;
case "LeftBottom":
el.style.left = `${Xcoord-newX}px`
el.style.top = `${Ycoord+newY}px`
break;
case "RightBottom":
el.style.left = `${Xcoord+newX}px`
el.style.top = `${Ycoord+newY}px`
break;
default:
break;
}
}, 300);
setTimeout(function() {
body.removeChild(el)
}, 1300);
}
body.appendChild(span)
console.log(span);
index += 1;
if (index > 11) {
index = 0
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 128 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 80 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 168 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 890 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 MiB

View File

@@ -0,0 +1,166 @@
<!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>Document</title>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2576965_p89wlanilpr.css">
<style>
body,
ul,
li,
a,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.smallImg {
width: 100px;
}
.zhezhao {
width: 100vw;
height: 100vh;
background: #000;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 998;
opacity: .5;
}
.preview {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 999;
display: flex;
justify-content: center;
}
.closed {
width: 40px;
height: 40px;
font-size: 24px;
color: #fff;
background-color: #606266;
text-align: center;
line-height: 35px;
position: absolute;
right: 10px;
top: 10px;
border-radius: 100%;
}
.action .d {
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
font-size: 24px;
color: #fff;
background-color: #606266;
border-color: #fff;
position: absolute;
text-align: center;
line-height: 40px;
border-radius: 100%;
}
.left {
left: 40px;
}
.right {
right: 40px;
}
.operation {
left: 50%;
bottom: 30px;
transform: translateX(-50%);
width: 282px;
height: 44px;
padding: 0 23px;
background-color: #606266;
border-color: #fff;
position: absolute;
border-radius: 22px;
display: flex;
justify-content: space-around;
align-items: center;
}
.operation li {}
.operation li i {
font-size: 23px;
color: #fff;
}
.xz {
display: inline-block;
transform: rotateY(180deg);
}
.mainImg {
height: 100%;
}
</style>
</head>
<body>
<div class="main">
<img class="smallImg" src="./img/11.png" alt="">
<div class="zhezhao"></div>
<div class="preview">
<div class="closed">x</div>
<div class="action">
<div class="left d">&lt;</div>
<div class="right d">&gt;</div>
</div>
<img class="mainImg" style="transform: scale(1) rotate(0deg);margin-left: 0;margin-top: 0;" src="./img/11.png" alt="">
<ul class="operation">
<li>
<i class="iconfont icon-suoxiao suoxiao"></i>
</li>
<li>
<i class="iconfont icon-fangda fangda"></i>
</li>
<li>
<i class="iconfont icon-fullscreen fullscreen"></i>
</li>
<li class="xz">
<i class="iconfont icon-shuaxin leftshuaxin"></i>
</li>
<li>
<i class="iconfont icon-shuaxin rightshuaxin"></i>
</li>
</ul>
</div>
</div>
</body>
<script src="./index.js"></script>
</html>

View File

@@ -0,0 +1,42 @@
var suoxiao = $(".suoxiao"),
fangda = $(".fangda"),
fullscreen = $(".fullscreen"),
leftshuaxin = $(".leftshuaxin"),
rightshuaxin = $(".rightshuaxin");
var mainImg = $(".mainImg")
suoxiao.onclick = function() {
var value = Scale() - 0.2;
if (value != 0) {
$(".mainImg").style.transform = `scale(${value}) rotate(${Rotate()}deg)`
}
}
fangda.onclick = function() {
$(".mainImg").style.transform = `scale(${Scale() + 0.2}) rotate(${Rotate()}deg)` //两个值都有才可以使用
}
fullscreen.onclick = function() {
$(".mainImg").style.transform = `scale(2) rotate(${Rotate()}deg)`
}
leftshuaxin.onclick = function() {
xuanzhuan(-90)
}
rightshuaxin.onclick = function() {
xuanzhuan(90)
}
//封装
function $(className) {
return document.querySelector(className);
}
function xuanzhuan(offset) {
$(".mainImg").style.transform = `scale(${Scale()}) rotate(${Rotate() + offset}deg)`
}
function Scale() { //获取缩小的值
return Number($(".mainImg").style.transform.match(/scale\(([\s\S]*?)\) /)[1])
}
function Rotate() { //获取旋转的值
return Number($(".mainImg").style.transform.match(/rotate\(([\s\S]*?)deg\)/)[1])
}

View File

@@ -0,0 +1,43 @@
body {
margin: 0;
padding: 0;
background: #87d3ff url("../img/back.png");
height: 100vh;
background-size: 100% 100%;
position: relative;
overflow: hidden;
}
.people {
position: absolute;
bottom: 0;
width: 100px;
}
.right {
transform: rotateY(180deg);
}
.apple {
width: 40px;
position: absolute;
top: 0px;
}
.boom {
width: 60px;
position: absolute;
top: 0px;
}
.motion {
transition: all ease 0.5s;
}
.totalNums {
position: absolute;
right: 30px;
top: 30px;
font-size: 20px;
color: red;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 711 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 272 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 171 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 631 KiB

View File

@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titl2e</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="totalNums">0分</div>
<img src="./img/pepop.png" style="left: 0" class="people" alt="">
<audio class="appleaudio" hidden controls src="./img/apple.mp3"></audio>
<audio class="boomaudio" hidden controls src="./img/bomb.mp3"></audio>
</body>
<script src="./js/index.js"></script>
</html>

View File

@@ -0,0 +1,125 @@
var body = $("body"),
people = $(".people"),
clientWidth = document.body.clientWidth,
clientHeight = document.body.clientHeight,
totalNums = 0;
body.onmousemove = function(e) {
var x = e.x,
moveX = x - 100;
people.style.left = `${moveX < 0 ? 0 : moveX}px`;
if (moveX > clientWidth / 2) {
people.classList.remove("right")
} else {
people.classList.add("right")
}
}
function CreatedResources(type) {
var x = parseInt(Math.random() * clientWidth) - (type == 'apple' ? 40 : 60);
x < 0 ? x = 0 : x;
var apple = document.createElement("img");
apple.src = type == "apple" ? "./img/apple.png" : "./img/boom.png";
apple.className = type == "apple" ? "apple motion" : "boom motion";
apple.style.left = `${x}px`;
apple.style.top = `${type == 'apple'? -40 : -60}px`;
body.appendChild(apple);
motion(apple, type)
}
function motion(el, type) {
var apple = 0,
bmob = 0
if (type == "apple") {
apple = setInterval(() => {
el.style.top = `${parseInt(el.style.top) + 30}px`;
if (parseInt(el.style.top) > clientHeight) {
body.removeChild(el)
clearInterval(apple)
} else {
JudgingCollision(el, apple)
}
}, 60)
} else {
bmob = setInterval(() => {
el.style.top = `${parseInt(el.style.top) + 50}px`;
if (parseInt(el.style.top) > clientHeight) {
setTimeout(() => {
try {
body.removeChild(el)
clearInterval(bmob)
} catch (e) {}
}, 500)
} else {
JudgingCollision(el, bmob)
}
}, 80)
}
}
function JudgingCollision(span, timeout) {
var people = $(".people");
var peopleX1 = parseInt(people.style.left);
var peopleX2 = parseInt(people.style.left) + people.clientWidth;
var peopleX3 = people.offsetTop;
var peopleX4 = people.offsetTop + people.clientHeight;
var spanX1 = parseInt(span.style.left);
var spanX2 = parseInt(span.style.left) + span.clientWidth;
var spanX3 = parseInt(span.style.top);
var spanX4 = parseInt(span.style.top) + span.clientHeight;
if (peopleX4 < spanX3 || peopleX1 > spanX2 || peopleX3 > spanX4 || peopleX2 < spanX1) {} else {
if (span.classList.contains("apple")) {
console.log("苹果");
totalNums += 30;
$(".appleaudio").play()
$(".totalNums").innerText = `${totalNums}`
setTimeout(() => {
body.removeChild(span)
clearInterval(timeout)
}, 540)
} else {
totalNums -= 40;
span.src = "./img/bombimg.png"
$(".boomaudio").play()
$(".totalNums").innerText = `${totalNums}`
setTimeout(() => {
body.removeChild(span)
clearInterval(timeout)
}, 540)
console.log("炸弹")
}
}
}
function Created() {
var random = parseInt(Math.random() * 100);
if (random <= 80) {
CreatedResources("bomb")
console.log("生成炸弹")
} else {
CreatedResources("apple")
console.log("生成苹果")
}
}
setInterval(() => {
Created();
}, 1000)
function $(className) {
return document.querySelector(className)
}

View File

@@ -0,0 +1,117 @@
body,
ul,
li,
a,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.smallImg {
width: 100px;
}
.hidden {
display: none;
}
.zhezhao {
width: 100vw;
height: 100vh;
background: #000;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 998;
opacity: .5;
}
.preview {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 999;
display: flex;
justify-content: center;
}
.closed {
width: 40px;
height: 40px;
font-size: 24px;
color: #fff;
background-color: #606266;
text-align: center;
line-height: 35px;
position: absolute;
right: 10px;
top: 10px;
border-radius: 100%;
z-index: 999;
}
.action .d {
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
font-size: 24px;
color: #fff;
background-color: #606266;
border-color: #fff;
position: absolute;
text-align: center;
line-height: 40px;
border-radius: 100%;
z-index: 999;
}
.left {
left: 40px;
}
.right {
right: 40px;
}
.operation {
left: 50%;
bottom: 30px;
transform: translateX(-50%);
width: 282px;
height: 44px;
padding: 0 23px;
background-color: #606266;
border-color: #fff;
position: absolute;
border-radius: 22px;
display: flex;
justify-content: space-around;
align-items: center;
}
.operation li i {
font-size: 23px;
color: #fff;
}
.xz {
display: inline-block;
transform: rotateY(180deg);
}
.mainImg {
height: 100%;
}

View File

@@ -0,0 +1,46 @@
<!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>Documen</title>
<link rel="stylesheet" href="./css/previewImage.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2576965_pg56sl6byua.css">
</head>
<body>
<div class="list"></div>
</body>
<script src="./js/previewImage.js"></script>
<script>
var imgArr = [
'./img/11.png',
'./img/12.jpg',
'./img/13.jpg',
'./img/14.jpg',
'./img/15.png',
'./img/16.jpg',
'./img/17.jpg',
]
imgArr.forEach(function(v) {
document.querySelector(".list").innerHTML += `<img width="100" src="${v}"/>`
});
document.querySelectorAll(".list img").forEach(function(v, i) {
v.onclick = function() {
var c = new PreviewImage({
image: imgArr,
showIndex: i
});
c = null
}
})
</script>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 128 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 80 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 168 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 890 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 MiB

View File

@@ -0,0 +1,208 @@
class PreviewImage {
body = this.$("body");
option = {};
isBackMove = false;
x1 = 0;
y1 = 0;
l = 0;
t = 0;
constructor(option) {
if (!option.hasOwnProperty("image")) {
throw new Error("参数image缺少请检查")
}
if (!option.hasOwnProperty("showIndex")) {
throw new Error("参数showIndex缺少请检查")
}
this.option = option
//调用的方法
this.created();
this.BindClose();
this.BindPrevious();
this.BindNext();
this.BindSuoXiao();
this.BindFangDa();
this.BindFullScreen();
this.BindXuanZhuan();
this.MouseEvent();
}
created() { //插入元素
this.body.insertAdjacentHTML("beforeend", `<div class="previewImage">
<div class="zhezhao"></div>
<div class="preview">
<div class="closed">x</div>
<div class="action">
<div class="left d">&lt;</div>
<div class="right d">&gt;</div>
</div>
<img class="mainImg" style="transform: scale(1) rotate(0deg);margin-left: 0;margin-top: 0;"
src="${this.option.image[this.option.showIndex]}" alt="">
<ul class="operation">
<li>
<i class="iconfont icon-suoxiao suoxiao"></i>
</li>
<li>
<i class="iconfont icon-fangda fangda"></i>
</li>
<li>
<i class="iconfont icon-fullscreen fullscreen"></i>
</li>
<li class="xz">
<i class="iconfont icon-shuaxin leftshuaxin"></i>
</li>
<li>
<i class="iconfont icon-shuaxin rightshuaxin"></i>
</li>
</ul>
</div>
</div>`)
}
BindSuoXiao() {
this.$(".suoxiao").onclick = () => {
var value = this.Scale() - 0.2;
if (value != 0) {
this.$(".mainImg").style.transform = `scale(${value}) rotate(${this.Rotate()}deg)`
}
}
}
BindFullScreen() {
this.$(".fullscreen").onclick = () => {
if (this.$(".fullscreen").classList.contains("icon-fullscreen")) {
this.$(".fullscreen").classList.remove("icon-fullscreen")
this.$(".fullscreen").classList.add("icon-suoxiao1")
this.$(".mainImg").style = `
transform: scale(2) rotate(${this.Rotate()}deg);
margin-left: 0;
margin-top: 0;
`
} else {
this.$(".fullscreen").classList.remove("icon-suoxiao1")
this.$(".fullscreen").classList.add("icon-fullscreen")
this.$(".mainImg").style = `
transform: scale(1) rotate(0deg);
margin-left: 0;
margin-top: 0;
`
}
}
}
BindFangDa() {
this.$(".fangda").onclick = () => {
this.$(".mainImg").style.transform = `scale(${this.Scale() + 0.2}) rotate(${this.Rotate()}deg)`
}
}
BindXuanZhuan() {
this.$(".leftshuaxin").onclick = () => {
this.xuanzhuan(-90)
}
this.$(".rightshuaxin").onclick = () => {
this.xuanzhuan(90)
}
}
MouseEvent() {
document.onmousewheel = (e) => {
if (e.wheelDelta == 210) {
this.$(".fangda").onclick()
} else {
this.$(".suoxiao").onclick()
}
}
this.$(".mainImg").onmousedown = (e) => {
e.preventDefault()
this.isBackMove = true
this.x1 = e.clientX;
this.y1 = e.clientY;
this.l = parseInt(this.$(".mainImg").style.marginLeft);
this.t = this.$(".mainImg").offsetTop;
this.ImgMove(".mainImg")
}
this.$(".mainImg").onmouseleave = () => {
console.log("绑定鼠标移动事件");
if (this.isBackMove) {
this.ImgMove(".preview")
}
}
this.$(".preview").onmouseup = (ev) => {
console.log("鼠标在背景层上松开");
this.isBackMove = false
this.$(".mainImg").onmousemove = null;
this.$(".preview").onmousemove = null;
}
this.$(".mainImg").onmouseup = (ev) => {
console.log("鼠标在图片上松开");
this.$(".mainImg").onmousemove = null;
this.$(".preview").onmousemove = null;
}
}
ImgMove(className) {
this.$(className).onmousemove = (ev) => {
var x2 = ev.clientX;
var y2 = ev.clientY;
var x = x2 - this.x1;
var y = y2 - this.y1;
var lt = y + this.t;
var ls = x + this.l;
this.$(".mainImg").style.marginLeft = ls + 'px';
this.$(".mainImg").style.marginTop = lt + 'px';
}
}
xuanzhuan(offset) {
this.$(".mainImg").style.transform = `scale(${this.Scale()}) rotate(${this.Rotate() + offset}deg)`
}
BindClose() {
this.$(".closed").onclick = () => {
this.body.removeChild(this.$(".previewImage"))
}
}
BindPrevious() {
this.$(".left").onclick = () => {
this.option.showIndex -= 1;
if (this.option.showIndex < 0) {
this.option.showIndex = this.option.image.length - 1
}
this.$(".mainImg").src = this.option.image[this.option.showIndex]
}
}
BindNext() {
this.$(".right").onclick = () => {
this.option.showIndex += 1;
if (this.option.showIndex > this.option.image.length - 1) {
this.option.showIndex = 0
}
this.$(".mainImg").src = this.option.image[this.option.showIndex]
}
}
Scale() {
return Number(this.$(".mainImg").style.transform.match(/scale\(([\s\S]*?)\) /)[1])
}
Rotate() {
return Number(this.$(".mainImg").style.transform.match(/rotate\(([\s\S]*?)deg\)/)[1])
}
//封装
$(className) {
return document.querySelector(className)
}
}

View File

@@ -0,0 +1,45 @@
.swiper-container {
width: 520px;
height: 280px;
overflow: hidden;
margin: 100px auto;
position: relative;
}
.swiper-pagination {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 20px;
display: flex;
justify-content: center;
}
.swiper-pagination-item {
width: 15px;
height: 15px;
border-radius: 100%;
background: #fff;
margin-right: 10px;
cursor: pointer;
}
.swiper-wrapper {
display: flex;
}
.swiper-button {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 25px;
cursor: pointer;
}
.swiper-button-prev {
left: 10px;
}
.swiper-button-next {
right: 10px;
}
.active {
background: red;
}
.dh {
transition-duration: 300ms;
}

View File

@@ -0,0 +1,44 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2576965_pg56sl6byua.css">
<link rel="stylesheet" href="imdex.css">
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper dh" style="transform: translateX(0px);">
<div class="swiper-slide">
<img src="https://img.alicdn.com/imgextra/i3/6000000003220/O1CN01XY3FdI1Zeo1AKZyRK_!!6000000003220-0-octopus.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="https://aecpm.alicdn.com/simba/img/TB1XotJXQfb_uJkSnhJSuvdDVXa.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="https://aecpm.alicdn.com/simba/img/TB1JNHwKFXXXXafXVXXSutbFXXX.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="https://img.alicdn.com/imgextra/i3/6000000003220/O1CN01XY3FdI1Zeo1AKZyRK_!!6000000003220-0-octopus.jpg" alt="">
</div>
</div>
<div class="swiper-pagination">
<div class="swiper-pagination-item active"></div>
<div class="swiper-pagination-item"></div>
<div class="swiper-pagination-item"></div>
</div>
//测试
<div class="swiper-button swiper-button-prev iconfont icon-zuo"></div>
<div class="swiper-button swiper-button-next iconfont icon-zhankai-copy"></div>
</div>
</body>
<script src="index.js"></script>
</html>

View File

@@ -0,0 +1,84 @@
var pagination = _(".swiper-pagination .swiper-pagination-item");
var timer;
//上一页
$(".swiper-button-prev").onclick = function() {
motion(520, 'prev')
}
//下一页
$(".swiper-button-next").onclick = function() {
motion(-520, 'next')
}
function motion(offset, type) {
if (translateX() == -1560) {
$(".swiper-wrapper").classList.remove("dh")
SetTranslateX(0)
}
setTimeout(() => {
$(".swiper-wrapper").classList.add("dh")
var totalDistance = translateX() + offset;
if (totalDistance < -1560) {
totalDistance = 0
}
if (totalDistance > 0) {
totalDistance = -1560
}
var index = Math.abs(totalDistance / 520)
console.log(index)
if (index == 3) {
if (type == "next") {
index = 0
changePagination(index)
SetTranslateX(totalDistance)
} else {
$(".swiper-wrapper").classList.remove("dh")
SetTranslateX(-1560)
setTimeout(() => {
totalDistance = -1040
$(".swiper-wrapper").classList.add("dh")
index = 2
changePagination(index)
SetTranslateX(totalDistance)
}, 100)
}
} else {
changePagination(index)
SetTranslateX(totalDistance)
}
}, 100)
}
pagination.forEach((v, i) => {
v.onclick = () => {
changePagination(i)
}
});
function changePagination(i) {
pagination.forEach(item => item.classList.remove("active"))
pagination[i].classList.add("active")
SetTranslateX(i * -520)
}
//让图片移动
function SetTranslateX(distance) {
$(".swiper-wrapper").style.transform = `translateX(${distance}px)`
}
function translateX() {
return Number($(".swiper-wrapper").style.transform.match(/translateX\(([\s\S]*?)px\)/)[1])
}
function $(className) {
return document.querySelector(className);
}
function _(className) {
return document.querySelectorAll(className);
}

View File

@@ -0,0 +1,44 @@
body{
position: relative;
}
.Popup{
width: 400px;
height: 200px;
background: aqua;
border: 3px ;
border: #ff9b9b;
display: none;
position: absolute;
top: 20px;
right: 50px;
padding: 20px;
box-sizing: border-box;
}
.block{
display: block;
}
.top{
display: flex;
width: 100%;
height: 20px;
align-items:center;
justify-content:space-between;
box-sizing: border-box;
padding-right: 10px;
}
.bottom{
display: flex;
justify-content: flex-end;
}
.bu1{
margin-right: 10px;
}
.bu2{
margin-right: 10px;
}
.back1{
background: rgba(0,0,0 0.4);
}

View File

@@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2604059_7fkd3tbt2kd.css">
</head>
<body>
<button type="button" class="Click">点击打开</button>
<div class="Popup">
<div class="top">
<p>提示<p>
<i class="iconfont icon-guanbi"></i>
</div>
<p>这是一段信息</p>
<div class="bottom">
<button type="button" class="bu1">关闭</button>
<button type="button" class="bu2">确定</button>
</div>
</div>
</body>
<script src="index.js">
</script>
<script>
// window.onload = function(){
// document.body.style.background="#000";
// }
</script>
</html>

View File

@@ -0,0 +1,21 @@
function $(className){
return document.querySelector(className);
}
$(".Click").onclick=function (){
$(".Popup").classList.add("block")
document.body.style.background = "rgba(0,0,0,0.4)";
}
function shanchu() {
console.log(11111)
$(".Popup"). classList.toggle("block")
document.body.style.background = "#fff";
}
$(".icon-guanbi").onclick=function () {
shanchu();
}
$(".bu1").onclick=function () {
shanchu();
}
$(".bu2").onclick=function () {
shanchu();
}

View File

@@ -0,0 +1,35 @@
<!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>
</head>
<body>
<button onclick="showDialog()">点我</button>
</body>
<script src="./dialog.js"></script>
<script>
function showDialog() {
new Dialog({
title: '测试标题',
content: '这是测试内容',
cancelText: '关闭',
confirmText: '确认',
showClose: false, // true 显示false关闭
beforeCloseType: 'confirm', // 关闭前确认iconcancel confirm
confirmEvent: () => {
console.log("确定按钮被点击");
},
cancelEvent: () => {
console.log("你点击了取消按钮");
},
})
}
</script>
</html>

View File

@@ -0,0 +1,132 @@
class Dialog {
config = {
body: this.$("body"),
AgainFatherlassName: '',
AgainCancelClassName: '', // 取消的类名
AgainConfirmClassName: '', // 确定的类名
title: '提示',
content: '这是一段信息',
cancelText: '取消',
confirmText: '确定',
beforeCloseType: null,
showClose: false, // true 显示false关闭
confirmEvent: () => {},
cancelEvent: () => {},
};
constructor(option) {
this.config.title = option.title || this.config.title;
this.config.content = option.content || this.config.content;
this.config.cancelText = option.cancelText || this.config.cancelText;
this.config.confirmText = option.confirmText || this.config.confirmText;
this.config.beforeCloseType = option.beforeCloseType || this.config.beforeCloseType;
this.config.showClose = option.showClose || this.config.showClose;
this.config.confirmEvent = option.confirmEvent || this.config.confirmEvent;
this.config.cancelEvent = option.cancelEvent || this.config.cancelEvent;
this.createdDialog();
this.BindCancel();
this.BindConfirm();
}
createdDialog() {
this.config.body.insertAdjacentHTML(
"beforeend",
`
<div class="dialog ${this.config.AgainFatherlassName}">
<div class="dialog_background"></div>
<div class="dialog_content">
<div class="dialog_title">
<div class="dialog_text">${this.config.title}</div>
${
this.config.showClose
? `<i class="iconfont"></i>`
: `<span></span>`
}
</div>
<div class="dialog_content">${this.config.content}</div>
<div class="dialog_action">
<div class="dialog_cancel ${this.config.AgainCancelClassName}">
${this.config.cancelText}
</div>
<div class="dialog_confirm ${this.config.AgainConfirmClassName}">
${this.config.confirmText}
</div>
</div>
</div>
</div>
`
)
}
createdAgainConfirm() {
if (this.$(".again") == null) {
this.config.AgainFatherlassName = "again";
this.config.AgainCancelClassName = "againCancel";
this.config.AgainConfirmClassName = "againConfirm";
this.config.title = ""
this.config.content = "确认关闭?"
this.config.cancelText = "取消"
this.config.confirmText = "确定"
this.createdDialog();
this.click(".againCancel", ()=> {
this.deleteDialog(".again");
})
this.click(".againConfirm", ()=> {
this.config.confirmEvent();
this.deleteDialog(".again");
this.deleteDialog(".dialog");
})
}
}
deleteDialog(className) {
this.config.body.removeChild(this.$(className))
}
// 取消
BindCancel() {
this.click(".dialog_cancel", ()=> {
this.isShowConfirm("cancel");
if (this.config.beforeCloseType == null) {
this.config.cancelEvent();
}
})
}
// 确定
BindConfirm() {
this.click(".dialog_confirm", ()=> {
this.isShowConfirm("confirm")
if (this.config.beforeCloseType == null) {
this.config.confirmEvent();
}
})
}
// 判断如何展示确定关闭弹窗
isShowConfirm(type) {
if (this.config.beforeCloseType == type) {
this.createdAgainConfirm()
} else {
this.deleteDialog(".dialog");
}
}
click(className, methods) {
this.$(className).onclick = () => methods();
}
$(className) {
return document.querySelector(className)
}
}
window.Dialog = Dialog

View File

@@ -0,0 +1,45 @@
.bj{width: 100%;
height: 100%;
position: relative;
}
.Popup{
width: 400px;
height: 200px;
background: aqua;
border: 3px ;
border: #ff9b9b;
display: none;
position: absolute;
top: 20px;
right: 50px;
padding: 20px;
box-sizing: border-box;
}
.block{
display: block;
}
.top{
display: flex;
width: 100%;
height: 20px;
align-items:center;
justify-content:space-between;
box-sizing: border-box;
padding-right: 10px;
}
.bottom{
display: flex;
justify-content: flex-end;
}
.bu1{
margin-right: 10px;
}
.bu2{
margin-right: 10px;
}
.back1{
background: rgba(0,0,0 0.4);
}

View File

@@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2604059_7fkd3tbt2kd.css">
</head>
<body>
<div class="bj"></div>
<button type="button" class="Click">点击打开</button>
</div>
</body>
<script src="index.js">
</script>
<script>
new Indexe(".bj", {
Popswitch: true,
title: "123"
}
)
</script>
</html>

View File

@@ -0,0 +1,40 @@
(function () {
class Indexe {
config = {
el: '.bj',
Popswitch: false,
title: "标题",
title2: "内容"
}
constructor(el, ope) {/*检测*/
if (typeof el != "string" || el.length == 0 || document.querySelector(el) == null) {
throw new Error("el参数未传");
} else {
console.log("通过检测")
}
this.config.el = el;
this.config.Popswitch = ope.Popswitch || this.config.Popswitch;
this.config.title = ope.title || this.config.title;
console.log(this.config)
this.tianjia()
}
tianjia() {
this.el.innerHTML = `<div></div>`
}
$(className) {
return document.querySelector(className);
}
}
window.Indexe = Indexe
})()
//1.检测内容
//2.向html上追加内容
//3.追加的内容等于用户自定义的内容

View File

@@ -0,0 +1,121 @@
class Dlogo {
config = {
body: this.$("body"),
title: "标题",
content: "内容",
showClose: false,//true表示显示flase是关闭
cancelm: "取消",
confirmv: "确认",
AgainFatherlassName: '',
AgainCancelClassName: '', // 取消的类名
AgainConfirmClassName: '', // 确定的类名
beforeCloseType: null,
cancelEvent: () => {
},
confirmvEvent: () => {
}
};
constructor(option) {
this.config.title = option.title || this.config.title;
this.config.content = option.content || this.config.content;
this.config.showClose = option.showClose || this.config.showClose;
this.config.cancelm = option.cancelm || this.config.cancelm;
this.config.confirmv = option.confirmv || this.config.confirmv;
this.config.cancelEvent = option.cancelEvent || this.config.cancelEvent;
this.config.confirmvEvent = option.confirmvEvent || this.config.confirmvEvent;
this.config.beforeCloseType = option.beforeCloseType || this.config.beforeCloseType;
this.createDlogo()
this.BindClose()
this.cancelClear()
this.showCloseClear()
}
createDlogo() {
this.config.body.insertAdjacentHTML("beforeend", `<div class="back ${this.config.AgainFatherlassName}">
<div class="backg"></div>
<div class="pop">
<div class="top">
<div class="title">${this.config.title}</div>
${
this.config.showClose
? `<i class="iconfont icon-guanbi"></i>`
: `<span></span>`
}
</div>
<div class="content">
${this.config.content}
</div>
<div class="buttom">
<button class="cancel ${this.config.AgainCancelClassName}">${this.config.cancelm}</button>
<button class="confirm ${this.config.AgainConfirmClassName}">${this.config.confirmv}</button>
</div>
</div>
</div>`)
}
createdAgainConfirm() {
this.config.AgainFatherlassName = 'again'
this.config.AgainCancelClassName = "againCancel";
this.config.AgainConfirmClassName = "againConfirm";
this.config.title = ""
this.config.content = "确认关闭?"
this.config.cancelText = "取消"
this.config.confirmText = "确定"
this.createDlogo()
this.click(".againCancel", ()=> {
this.DeleteDlogo(".again");
})
this.click(".againConfirm", ()=> {
this.DeleteDlogo(".back");
this.DeleteDlogo(".again");
})
}
/*删除元素*/
DeleteDlogo(came) {
this.config.body.removeChild(this.$(came))
}
/*关闭按钮被点击*/
BindClose() {
this.click(".cancel", () => {
this.DeleteDlogo(".back");
this.DeleteDlogo();
})
}
/*确认按钮被点击*/
cancelClear() {
this.click(".confirm", () => {
this.config.confirmvEvent();
this.DeleteDlogo(".back");
})
}
/*标签按钮被点击*/
showCloseClear() {
this.click(".icon-guanbi",() =>{
this.DeleteDlogo(".back");
this.createdAgainConfirm()
})
}
$(className) {
return document.querySelector(className)
}
click(className, methods) {
this.$(className).onclick = () => methods();
}
}
window.Dlogo = Dlogo

View File

@@ -0,0 +1,63 @@
body,ul,li,p,h1,h2,h3,h4,h5,h6 {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
input {
outline: none;
border: none;
padding: 0;
}
.pop{
background:dodgerblue;
width: 420px;
border-radius:3px;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
.top{
display: flex;
justify-content: space-between;
align-content: center;
padding: 20px 20px 10px;
}
.title{
font-size: 18px;
}
.content{
font-size: 14px;
padding: 30px 20px;
}
.buttom{
display: flex;
align-content: center;
justify-content: flex-end;
padding: 10px 20px 20px;
}
.buttom button{
padding: 12px 20px;
margin-right: 10px;
border: 1px solid #dcdfe6;
border-radius: 4px;
}
.back{
width: 100vw;
height: 100vw;
position: relative;
box-sizing: border-box;
}
.backg{
width: 100%;
height: 100%;
background: rgba(0,0,0,0.4);
}

View File

@@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="./index.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2604059_7fkd3tbt2kd.css">
</head>
<body>
<button class="op" onclick="Tchang()">点击显示</button>
</body>
<script src="Dlogo.js"></script>
<!--<script src="tools.js"></script>-->
<script>
function Tchang() {
new Dlogo({
title: "这是标题",
content: "这是内容",
showClose: true,//true表示显示flase是关闭
cancelm: "取消按钮内容",
confirmv: "确认按钮内容",
cancelEvent: () => {
console.log("取消按钮被点击")
},
confirmvEvent: () => {
console.log("确定按钮被点击")
}
})
}
</script>
</html>

View File

@@ -0,0 +1,3 @@
function $(ClassName){
return document.querySelector(className);
}

View File

@@ -0,0 +1,100 @@
class Popups {
config = {
Name: $(".bj"),
contter: "标题",
iconfont: "警告",
neirong: "消息",
guanbi1: false,
weizhi: "RightTop",
iconfontEvent: () => { }
}
constructor(option) {
this.config.contter = option.contter || this.config.contter;
this.config.iconfont = option.iconfont || this.config.iconfont;
this.config.neirong = option.neirong || this.config.neirong;
this.config.weizhi = option.weizhi || this.config.weizhi;
this.config.guanbi1 = option.guanbi1 || this.config.guanbi1;
this.config.iconfontEvent = option.iconfontEvent || this.config.iconfontEvent;
console.log(option)
this.createPopups()
}
createPopups() {
this.config.Name.insertAdjacentHTML("beforeend",
`
<div class="back ${this.xuanzhe()}">
<div class="top">
<div class="top_left">
<i class="iconfont ${this.ibiaoq()}"></i>
<h4 class="contter">${this.config.contter}</h4>
</div>
<i class="iconfont icon-guanbi"></i>
</div>
<div class="neirong">${this.config.neirong}</div>
</div>`)
this.iconfontclous()
this.dingshi()
}
dingshi() {
if (this.config.guanbi1) {
setTimeout(() => this.clous(),3000)
}
}
/*关闭*/
clous() {
this.config.Name.removeChild($(".back"))
}
/*关闭按钮被点击时*/
iconfontclous() {
$(".icon-guanbi").onclick = () => {
this.clous();
this.config.iconfontEvent()
}
}
xuanzhe(shuju) {
switch (this.config.weizhi) {
case "LeftTop":
return shuju = "LeftTop";
break;
case "RightTop":
return shuju = "RightTop";
break;
case "LeftBottom":
return shuju = "LeftBottom";
break;
case "RightBottom":
return shuju = "RightBottom";
break;
}
}
ibiaoq(shu) {
switch (this.config.iconfont) {
case "警告":
return shu = "icon-icon-test";
break;
case "成功":
return shu = "icon-chenggong";
break;
case "错误":
return shu = "icon-icon-test1";
break;
case "消息":
return shu = "icon-xiaoxi";
break;
}
}
}
window.Popups = Popups

View File

@@ -0,0 +1,73 @@
body, ul, li, p, h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
}
.icon-xiaoxi{
padding-right: 10px;
}
.icon-icon-test1 {
color: red;
padding-right: 10px;
}
.iconfont{
font-size: 20px !important;
}
.icon-chenggong{
color: #00ff09;
padding-right: 10px;
}
.icon-icon-test {
color: yellow;
font-size: 20px;
padding-right: 10px;
}
.back {
width: 330px;
background: #ffff;
border: 1px solid #ebeef5;
overflow: hidden;
border-radius: 8px;
box-shadow: 0 2px 12px 0 rgb(0 0 0 /10%);
padding: 14px 26px 14px 13px;
box-sizing: border-box;
margin-top: 20px;
position: fixed;
}
.top{
display: flex;
align-items: center;
justify-content: space-between;
}
.top_left{
display: flex;
align-items: center;
justify-content: flex-end;
}
.neirong{
margin-left: 30px;
padding-top: 5px;
}
.bj{
width: 100vw;
overflow: hidden;
}
.LeftTop{
top:0;
left: 20px;
}
.RightTop{
top:0;
right: 20px;
}
.LeftBottom{
bottom: 50px;
left: 20px;
}
.RightBottom{
bottom: 50px;
right: 20px;
}

View File

@@ -0,0 +1,38 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="./index.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2631342_lyqjl0e3hf.css">
</head>
<body>
<button onclick="dian()">按钮</button>
<div class="bj"></div>
</body>
<script src="utils.js"></script>
<script src="Popups.js"></script>
<script>
function dian() {
new Popups({
Name: ("bj"),
contter: "这是标题",
iconfont: "成功", //警告(wait),成功(success),错误(error),消息(default)
neirong: "这是内容",
guanbi1: false,
weizhi: "LeftTop", //LeftTop RightTop LeftBottom RightBottom
iconfontEvent: () => {
console.log("取消按钮被点击")
}
})
}
</script>
</html>

View File

@@ -0,0 +1,3 @@
function $(className) {
return document.querySelector(className)
}

View File

@@ -0,0 +1,43 @@
class Ajax {
//url接口
http = new XMLHttpRequest();
constructor() {
}
get(option) {
var params = ""//留空进行处理
for (const key in option.data) {
console.log(key);
console.log(option.data[key]);
params += `&${key}=${option.data[key]}`//拼接字符串
}
params = params.replace("&", "?");//替换字符串
option.url = option.url + params;//拼接字符串
this.http.open("GET", option.url);//发送请求
this.http.send()//发送请求
this.onreadystatechange(option);//传方法
console.log(option.url)
}
post(option) {
this.http.open("POST", option.url);
this.http.setRequestHeader('Content-Type', 'application/josn');
this.http.send(JSON.stringify(option.data))
this.onreadystatechange(option)
}
onreadystatechange(callback){
this.http.onreadystatechange = () =>{
if (this.http.readyState == 4) {
if (this.http.status == 200) {
callback.success(JSON.parse(this.http.response))
} else {
callback.error(this.http)
}
}
}
}
}
var ajax = new Ajax()

View File

@@ -0,0 +1,64 @@
<!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</title>
</head>
<body>
<ul>
</ul>
<button>下一页</button>
</body>
<script src="./ajax.js"></script>
<script src="./utils.js"></script>
<script>
var page=0;
var totalpage=0;
function getIndexList(){
ajax.get(
{
url:'http://127.0.0.1:3000/api/json/classList',
data:{
id:245,
page:page
},
success:(res)=>{
totalpage=res.result.total_page
renderList(res.result)
},
error:(err)=>{
console.log(err)
},
}
)
}
function renderList(list){
list.data.forEach(v=>{
$("ul").innerHTML+=`
<li>
<a href="./info.html?id=${v.id}">
<img width="200px" src="${replace(v.preview)}" alt="">//preview是后端给的地址
<p>${v.title}</p>
</a>
</li>
`
})
}
getIndexList()
$("button").onclick=function (){
page+=1
if(page<=totalpage){
getIndexList()
}else {
alert("没有数据了=")
}
}
</script>
</html>

View File

@@ -0,0 +1,59 @@
<!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</title>
</head>
<body>
<div class="info">
</div>
<button>下一页</button>
</body>
<script src="ajax.js"></script>
<script src="./utils.js"></script>
<script>
var id =location.search.split("=")[1];
var page=1;
var total_page=0;
console.log(id)
function GetInfo(){
ajax.get(
{
url:'http://127.0.0.1:3000/api/json/info',
data:{
id:id,
page:page
},
success:(res)=>{
total_page=res.result.total_page;
renderImg(res.result.data)
},
error:(err)=>{
console.log(err)
},
}
)
function renderImg(list){
console.log(list)
list.forEach(v =>{
$(".info").innerHTML+=`<img width="100%" src="${replace(v.src)}" alt="">`
})
}
$("button").onclick=function (){
page+=1
if(page<=total_page){
GetInfo()
}else {
alert("没有数据了=")
}
}
}
GetInfo()
</script>
</html>

View File

@@ -0,0 +1,7 @@
function $(className){
return document.querySelector(className)
}
function replace(url){
var s ="http://47.114.153.249:3000/api/json/url?url=";
return url.replace(s,'')
}

View File

@@ -0,0 +1,18 @@
body,ul,li,p,h1,h2,h3,h4,h5,h6 {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
input {
outline: none;
border: none;
padding: 0;
}

View File

@@ -0,0 +1,211 @@
.footer{
position: fixed;
z-index: 999;
bottom: 0;
width: 100%;
height: 1rem;
background-color: #000000;
display: flex;
align-items:center;
justify-content: space-around;
}
.footer li{
font-size: 0.24rem;
color: #ffffff;
position: relative;
}
.footer .active::after{
content: "";
position: absolute;
width: 0.51rem;
height: 0.03rem;
background-color: #ffffff;
border-radius: 0.015rem;
top: 0.6rem;
left: 50%;
transform: translateX(-50%);
}
.footer li.active{
font-size: 0.3rem !important;
}
.content{
height: calc(100vh - 1rem);
background: url(../img/back.png);
background-size: cover;
position: relative;
}
.menu{
display: flex;
align-items:center;
height: 0.42rem;
justify-content: space-between;
padding: 0 0.37rem;
padding-top: 0.37rem;
}
.menu .scode
{
width: 0.42rem;
height: 0.42rem;
}
.menu .list{
display: flex;
align-items: center;
}
.menu .list li{
font-size: 0.3rem;
color: #fefefe;
margin-right: 0.24rem;
position: relative;
}
.menu .list li:last-child {
margin-right: 0;
}
.menu .search{
width: 0.43rem;
height: 0.43rem;
}
.list .active::after {
content: "";
position: absolute;
width: 0.35rem;
height: 0.02rem;
background-color: #ffffff;
box-shadow: 0rem 0.02rem 0.02rem 0rem
rgba(12, 0, 255, 0.35);
border-radius: 0.01rem;
top: 0.5rem;
left: 50%;
transform: translateX(-50%);
}
.user_info{
position: absolute;
bottom: 0;
right: 0.19rem;
text-align: center;
font-size: 0;
}
.user_info li{
margin-bottom: 0.36rem;
}
.user_info li:first-child{
position: relative;
}
.user_info li:last-child{
margin-bottom: 0.1rem;
}
.user_info li img{
width: 0.65rem;
height: 0.65rem;
}
.user_info .user{
width: 0.96rem;
height: 0.97rem;
border: solid 0.03rem #ffffff;
border-radius: 100%;
}
.user_info .add{
width: 0.34rem;
height: 0.34rem;
position: absolute;
bottom: -6px;
right: 50%;
transform: translateX(50%);
}
.user_info li p {
font-size: 0.2rem;
color: #ffffff;
margin-top: 0.09rem;
}
.music{
font-size: 0;
position: absolute;
left: 0.3rem;
bottom: 0.13rem;
}
.music_top_title{
margin-bottom: 0.22rem;
display: flex;
align-items: center;
}
.music_top_title img{
width: 0.28rem;
height: 0.26rem;
margin-right: 0.13rem;
}
.music_top_title span{
font-size: 0.26rem;
color: #ffc600;
}
.music_shop{
width: 5.85rem;
height: 1.68rem;
background-color: #ffffff;
padding: 0.1rem;
box-sizing: border-box;
position: relative;
display: flex;
align-items: center;
}
.music_shop .photo{
width: 1.48rem;
height: 1.48rem;
margin-right: 0.15rem;
}
.shop_text{
}
.shop_text h3{
font-size: 0.28rem;
color: #333333;
margin-bottom: 0.15rem;
}
.price{
margin-bottom: 0.13rem;
}
.price .m{
font-size: 0.28rem;
color: #333333;
}
.price .tips{
padding: 0.03rem 0.1rem;
background-color: #ea4e3d;
border-radius: 0.12rem;
color: #fffefe;
font-size: 0.02rem;
}
.car{
position: absolute;
width: 0.46rem;
height: 0.46rem;
bottom: 0.17rem;
right: 0.34rem;
}
.his{
font-size: 0.2rem;
color: #626262;
}
.music_text{
margin-top: 0.29rem;
display: flex;
align-items: center;
}
.music_text img{
width: 0.27rem;
height: 0.28rem;
margin-right: 0.13rem;
}
.music_text span{
font-size: 0.24rem;
color: #ffffff;
}

View File

@@ -0,0 +1,16 @@
.hidden {
overflow: hidden;
}
.layout {
width: 1200px;
margin: 0 auto;
}
.relative {
position: relative;
}
.absolute {
position: absolute;
}

Some files were not shown because too many files have changed in this diff Show More