MrDoc/template/app_doc/search.html
2020-07-31 20:23:23 +08:00

370 lines
8.4 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{% load staticfiles %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="Cache-Control" content="no-siteapp">
<link rel="icon" href="{% static 'search/mrdoc_logo_300.png' %}" sizes="192x192" />
<link rel="apple-touch-icon-precomposed" href="{% static 'search/mrdoc_logo_300.png' %}" />
<meta name="msapplication-TileImage" content="{% static 'search/mrdoc_logo_300.png' %}" />
<link rel="shortcut icon" href="{% static 'search/mrdoc_logo_300.png' %}" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="full-screen" content="yes">
<!--UC强制全屏-->
<meta name="browsermode" content="application">
<!--UC应用模式-->
<meta name="x5-fullscreen" content="true">
<!--QQ强制全屏-->
<meta name="x5-page-mode" content="app">
<!--QQ应用模式-->
<title>觅道搜索</title>
<style>
* {
padding: 0;
margin: 0;
outline: none;
-webkit-tap-highlight-color: transparent;
}
html,
body {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
background: #fff;
}
html {
font-family: 'Noto Sans SC Sliced', PingFangSC-Light, Microsoft YaHei UI, Microsoft YaHei, helvetica, sans-serif;
font-weight: 300;
color: #000;
}
form,
input,
button {
padding: 0;
margin: 0;
border: none;
outline: none;
background: none;
}
input::-webkit-input-placeholder {
color: #ccc;
letter-spacing: 2px;
font-size: 16px;
}
ul,
li {
display: block;
list-style: none;
}
a {
text-decoration: none;
color: #000;
}
#content {
width: 100%;
height: 100%;
}
.con {
width: 100%;
transition: 1s all;
margin: auto;
min-width: 320px;
height: 380px;
position: absolute;
left: 0;
top: -100px;
right: 0;
bottom: 0;
}
.con .shlogo {
position: relative;
width: 480px;
height: 120px;
margin: 20px auto;
background: url(/static/search/mrdoc_search_logo.svg) no-repeat center/cover;
}
.con .shlogo a {
width: 100%;
display: block;
width: 100%;
height: 100%;
}
.con .sou {
max-width: 680px;
position: relative;
width: calc(100% - 60px);
min-width: 320px;
margin: 0 auto;
}
.con .sou form {
width: 100%;
/*border: 1px solid #ddd;*/
height: 50px;
display: block;
margin: 10px auto 30px;
position: relative;
}
.con .sou form .wd {
width: 100%;
height: 100%;
display: block;
border: 1px solid #ddd;
border-radius: 25px;
line-height: 100%;
text-indent: 20px;
font-size: 18px;
}
.con .sou form .wd:focus {
background: #fff;
box-shadow: 0 1px 6px 0 rgba(32, 33, 36, 0.28);
border-color: #fff
}
.con .sou form button {
width: 40px;
height: 40px;
display: block;
position: absolute;
z-index: 10;
right: 6px;
top: 6px;
cursor: pointer;
font-size: 22px;
line-height: 40px;
border-radius: 50%;
color: #777;
}
.con .sou ul {
height: 40px;
margin: 0 auto;
display: flex;
justify-content: center;
}
.con .sou ul li {
width: 120px;
margin: 0 10px;
float: left;
-webkit-tap-highlight-color: transparent;
background: #eee;
font-size: 16px;
height: 40px;
line-height: 40px;
text-align: center;
text-indent: 30px;
cursor: pointer;
position: relative;
border-radius: 20px;
}
.con .sou ul li:active {
background: #fff;
box-shadow: 0 1px 20px 0 rgba(0, 0, 0, .1);
}
.con .sou ul li i {
position: absolute;
display: block;
width: 40px;
height: 40px;
left: 0;
/* border-radius: 50%; */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
/* background-color: #fff; */
transform: scale(0.7);
}
.foot {
position: absolute;
bottom: 10px;
z-index: 1000;
text-align: center;
width: 100%;
color: #999;
height: 20px;
line-height: 20px;
font-size: 12px;
}
.home {
width: 50px;
height: 50px;
position: absolute;
right: 70px;
top: 10px;
z-index: 200;
cursor: pointer;
}
.home a {
font-size: 20px;
color: #999;
line-height: 50px;
display: block;
text-align: center;
}
svg.icon {
width: 14px;
height: 14px;
margin: 0 5px 0 8px;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
@media (max-width: 640px) {
.con {
top: 0px;
}
.con .shlogo {
width: 320px;
height: 100px;
}
.con .sou form .wd:focus {
background: #f1f1f1;
box-shadow: none;
border-color: #ccc
}
.con .sou form button {
border-radius: 25px;
}
.con .sou ul li {
width: 100px;
font-size: 12px;
text-indent: 30px;
}
}
@media (max-height: 420px) {
.con {
margin: 0;
top: 0px;
}
.con .sou form .wd {
text-indent: 50px;
}
.con .sou form:after {
content: "";
display: block;
width: 30px;
height: 30px;
position: absolute;
left: 10px;
top: 10px;
background: url(/static/search/search.svg) no-repeat center/cover;
border-radius: 50%;
overflow: hidden;
}
.con .shlogo {
display: none;
}
.foot {
display: none;
}
}
@media (prefers-color-scheme: dark) {
body {
background-color: #162035;
}
.con .sou ul li {
background: #293550;
color: #fff;
}
.con .sou form .wd:focus {
background: #293550;
border: 1px solid #162035;
}
.con .sou form .wd {
border: 1px solid #293550;
color: #bbb;
}
}
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: #222d46;
border-radius: 0px;
}
::-webkit-scrollbar-thumb {
background: #293550;
border-radius: 0px;
}
::-webkit-scrollbar-thumb:hover {
background: #293550;
}
::-webkit-scrollbar-corner {
background: #222d46;
}
</style>
</head>
<body>
<div id="content">
<div class="con">
<div class="shlogo"></div>
<div class="sou">
<form action="{% url 'search' %}" method="get" target="_self">
<input class="wd" type="text" placeholder="请输入搜索内容" name="kw" x-webkit-speech lang="zh-CN">
<input name="type" value="doc" hidden>
<input name="d_range" value="all" hidden>
<button type="submit" style="background-image: url(/static/search/search_btn.svg);"></button>
</form>
<ul>
<li><a href="/"><i style="background-image: url(/static/search/home_btn.svg);"></i>返回首页</a></li>
</ul>
</div>
</div>
<div class="foot">© 2019-2010 by <a href="https://zmister.com/">州的先生</a> . All rights reserved.</div>
</div>
<!--
作者:D.Young
主页https://yyv.me/
githubhttps://github.com/5iux/sou
日期20200324
版权所有,请勿删除
-->
</body>
</html>