150 lines
3.7 KiB
HTML
150 lines
3.7 KiB
HTML
<!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">
|
||
<script src="../js/utils/rem.js"></script>
|
||
<link rel="stylesheet" href="https://at.alicdn.com/t/c/font_2124975_ogwnuct6mbe.css">
|
||
<link href="https://cdn.bootcdn.net/ajax/libs/Swiper/9.2.4/swiper-bundle.css" rel="stylesheet">
|
||
<link rel="stylesheet" href="../css/page/index.css">
|
||
<title>Document</title>
|
||
<style>
|
||
.header {
|
||
position: fixed;
|
||
width: 100%;
|
||
height: 1.6rem;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 99;
|
||
}
|
||
|
||
.header .header_top {
|
||
background: var(--themeColor);
|
||
height: 0.88rem;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 0.3rem;
|
||
}
|
||
|
||
.header .header_top>i {
|
||
font-size: 0.45rem;
|
||
color: var(--whiteColor);
|
||
}
|
||
|
||
.header .header_top .search {
|
||
flex: 1;
|
||
background: var(--whiteColor);
|
||
height: 0.6rem;
|
||
border-radius: 0.6rem;
|
||
margin-left: 10px;
|
||
margin-right: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.header .header_top .search i {
|
||
color: var(--textColor) !important;
|
||
font-size: 0.26rem !important;
|
||
margin-right: 0.1rem;
|
||
padding-top: 0.02rem;
|
||
margin-left: 0.26rem;
|
||
}
|
||
|
||
.header .header_top .search span {
|
||
font-size: var(--f12);
|
||
color: var(--textColor);
|
||
}
|
||
|
||
.header .header_menu {
|
||
height: 0.72rem;
|
||
display: flex;
|
||
align-items: center;
|
||
background: #fe7fa2;
|
||
}
|
||
|
||
.header .header_menu a {
|
||
color: #fff;
|
||
text-decoration: none;
|
||
width: 0.8rem;
|
||
height: 0.72rem;
|
||
text-align: center;
|
||
line-height: 0.72rem;
|
||
}
|
||
|
||
.header .header_menu ul {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
overflow-x: scroll;
|
||
padding-left: 0.3rem;
|
||
}
|
||
|
||
.header .header_menu ul .active {
|
||
color: var(--whiteColor) !important;
|
||
}
|
||
|
||
.header .header_menu ul li {
|
||
font-size: 0.26rem;
|
||
margin-right: 0.26rem;
|
||
color: #d3d2d2;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.content {
|
||
margin-top: 1.6rem;
|
||
}
|
||
|
||
.swiper-slide {
|
||
font-size: 20px;
|
||
}
|
||
|
||
|
||
|
||
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<div class="header">
|
||
<div class="header_top">
|
||
<i class="iconfont icon-taozi1"></i>
|
||
<a class="search" href="Search.html">
|
||
<i class="iconfont icon-search"></i>
|
||
|
||
<span>200万张图，有你想要的...</span>
|
||
</a>
|
||
<i class="iconfont icon-wo"></i>
|
||
</div>
|
||
<div class="header_menu">
|
||
<ul>
|
||
|
||
</ul>
|
||
<a class="iconfont icon-edit" href="./classify.html"></a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content">
|
||
|
||
<div class="swiper">
|
||
<div class="swiper-wrapper">
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/9.2.4/swiper-bundle.min.js"></script>
|
||
<script src="../js/config/index.js"></script>
|
||
<script src="../js/http/index.js"></script>
|
||
<script src="../js/serve/index.js"></script>
|
||
<script src="../js/utils/index.js"></script>
|
||
<script src="../js/pagge/index.js">
|
||
|
||
</script>
|
||
|
||
</html> |