jinql
/
Simpic
mirror of https://github.com/xinyewl/Simpic
1
0
Fork 0
Code Issues Releases Wiki Activity

微调首页样式

master
notte 2018-07-19 16:54:35 +08:00
parent 2d767a4a30
commit c54b21440e
6 changed files with 287 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/admin/view/login/index.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>兰空- 后台管理</title> <title>Simpic - 登录</title>
{css href="_layui_css/layui.css" /} {css href="_layui_css/layui.css" /}
</head> </head>
<style type="text/css"> <style type="text/css">
@ -20,7 +20,7 @@
</style> </style>
<body> <body>
<div class="login shadow"> <div class="login shadow">
<h1 class="text-center">兰 空</h1> <h1 class="text-center">Simpic</h1>
<form class="layui-form" action="" method="post"> <form class="layui-form" action="" method="post">
<div class="layui-form-item"> <div class="layui-form-item">
<input type="text" name="user" required lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input"> <input type="text" name="user" required lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input">

2
app/admin/view/system/index.html
View File

@ -175,7 +175,7 @@
<form class="form-horizontal setScheme" role="form" action="" method="post"> <form class="form-horizontal setScheme" role="form" action="" method="post">
<div class="scheme scheme-1{if condition="$conf.upload_scheme_id neq 1"} none{/if}"> <div class="scheme scheme-1{if condition="$conf.upload_scheme_id neq 1"} none{/if}">
<blockquote class="layui-elem-quote">本地</blockquote> <blockquote class="layui-elem-quote">本地</blockquote>
<p class="text-danger">本地默认无需配置，文件路径所在目录 /public/pic</p> <p class="text-danger">本地默认无需配置，文件路径所在目录 /public</p>
<div class="form-group"> <div class="form-group">
<div class="col-sm-9"> <div class="col-sm-9">
<input type="hidden" name="id" value="1"> <input type="hidden" name="id" value="1">

4
app/index/view/theme/default/common/footer.html
View File

@ -1,7 +1,7 @@
<footer> <footer>
<div class="container"> <div class="container">
<p class="text-muted">Copyright &copy; 2017 <a href="http://www.lskys.cc">兰空</a> Powered by <a href="http://www.xlogs.cn">WispX</a>. All rights reserved. 请勿上传违反中国大陆和香港法律的图片，违者后果自负。</p> <p class="text-muted">Copyright &copy; 2018 <a href="https://github.com/xinyewl/Simpic">Simpic</a> Powered by <a href="https://www.ikxin.com">Notte</a>. All rights reserved. </p>
</div> </div>
</footer> </footer>
</body> </body>
</html> </html>

6
app/index/view/theme/default/common/header.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="zh-cn">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>{$conf.web_title}</title> <title>{$conf.web_title}</title>
@ -24,7 +24,7 @@
{$conf.custom_style} {$conf.custom_style}
</style> </style>
<body> <body>
<nav class="header navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation"> <nav class="header navbar navbar-default navbar-inverse navbar-fixed-top layui-nav layui-bg-cyan" role="navigation">
<div class="container"> <div class="container">
<div class="navbar-header"> <div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
@ -33,7 +33,7 @@
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</button> </button>
<a class="navbar-brand" href="/"><i class="fa fa-leaf fa-fw"></i> 兰空</a> <a class="navbar-brand" href="/"><i class="fa fa-leaf fa-fw"></i> Simpic</a>
</div> </div>
<div class="collapse navbar-collapse" id="menu"> <div class="collapse navbar-collapse" id="menu">
<ul class="nav navbar-nav navbar-left"> <ul class="nav navbar-nav navbar-left">

2
app/index/view/theme/default/index/index.html
View File

@ -1,7 +1,7 @@
{include file="/common/header"} {include file="/common/header"}
<div class="container"> <div class="container">
<div class="fileinput lk-panel"> <div class="fileinput lk-panel">
<h1>请选择图片上传 <small>最大限制 {$conf.upload_max_filesize / 1024|round=###, 2}M</small></h1> <h1>Image Upload</h1>
<form enctype="multipart/form-data"> <form enctype="multipart/form-data">
<div class="form-group"> <div class="form-group">
<input id="img" type="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="1" data-max-file-count="10" name="img" accept="image/*"> <input id="img" type="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="1" data-max-file-count="10" name="img" accept="image/*">

393
public/static/css/main.css
View File

@ -1,154 +1,317 @@
body { font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; background-color: #eee; padding-top: 100px; word-wrap:break-word; } body {
a { bblr:expression(this.onFocus=this.blur()); outline-style:none; text-decoration: none; } /*font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;*/
a:hover, a:focus, a:active, a:visited { text-decoration: none; } /*background-color: #eee;*/
a { -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; } padding-top: 100px;
.navbar-brand { color: #fff!important; } word-wrap: break-word
.none { display: none; } }
.login, .reg { margin:0 auto; float: none; }
.login h1, .reg h1 { margin-bottom: 20px; } a {
#link { margin-top: 20px; } bblr: expression(this.onFocus=this.blur());
outline-style: none;
text-decoration: none
}
a:active,a:focus,a:hover,a:visited {
text-decoration: none
}
a {
-webkit-transition: all .2s;
-moz-transition: all .2s;
-ms-transition: all .2s;
-o-transition: all .2s;
transition: all .2s
}
.navbar-brand {
color: #fff!important
}
.none {
display: none
}
.login,.reg {
margin: 0 auto;
float: none
}
.login h1,.reg h1 {
margin-bottom: 20px
}
#link {
margin-top: 20px
}
.lk-panel { .lk-panel {
background-color: #fff; background-color: #fff;
padding: 15px; padding: 15px;
-webkit-box-shadow: 0 8px 7px 0 rgba(0,0,0,.2), 0 0px 10px 0 rgba(0,0,0,.19); -webkit-box-shadow: 0 8px 7px 0 rgba(0,0,0,.2),0 0 10px 0 rgba(0,0,0,.19);
box-shadow: 0 8px 7px 0 rgba(0,0,0,.2), 0 0px 10px 0 rgba(0,0,0,.19); box-shadow: 0 8px 7px 0 rgba(0,0,0,.2),0 0 10px 0 rgba(0,0,0,.19);
border-radius: 2px; border-radius: 2px
} }
.user { .user {
padding: 10px;background-color: #fff; padding: 10px;
-webkit-box-shadow: 0px 0px 1px 0 rgba(0,0,0,.2), 0 0px 8px 0 rgba(0,0,0,.19); background-color: #fff;
box-shadow: 0px 0px 1px 0 rgba(0,0,0,.2), 0 0px 8px 0 rgba(0,0,0,.19); -webkit-box-shadow: 0 0 1px 0 rgba(0,0,0,.2),0 0 8px 0 rgba(0,0,0,.19);
box-shadow: 0 0 1px 0 rgba(0,0,0,.2),0 0 8px 0 rgba(0,0,0,.19)
} }
.list { .list {
margin-top: 20px; margin-top: 20px
} }
.img { .img {
position: relative; position: relative;
cursor: pointer; cursor: pointer;
padding: 10px; padding: 10px;
background-color: #f4f4f4; background-color: #f4f4f4;
border-radius: 2px; border-radius: 2px;
overflow: hidden; overflow: hidden;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28); box-shadow: 0 1px 2px rgba(0,0,0,.28)
} }
.img img { .img img {
width: 100%; width: 100%;
height: 140px; height: 140px
} }
.img-per { .img-per {
margin-top: 8px; margin-top: 8px
} }
.list-per { .list-per {
border-bottom: 1px solid #f4f4f4; border-bottom: 1px solid #f4f4f4;
padding-bottom: 10px; padding-bottom: 10px
} }
.picture { .picture {
margin-bottom: 10px; margin-bottom: 10px
} }
.layui-flow-more { clear: both; padding-top: 30px; }
.list-per .layui-input, .list-per .layui-select, .list-per .layui-textarea { height: 30px; width: 150px; } .layui-flow-more {
clear: both;
padding-top: 30px
}
.list-per .layui-input,.list-per .layui-select,.list-per .layui-textarea {
height: 30px;
width: 150px
}
.pic-del { .pic-del {
position: relative; position: relative;
top: 50px; top: 50px;
left: 20px; left: 20px;
font-size: 30px; font-size: 30px;
cursor: pointer; cursor: pointer;
z-index: 9; z-index: 9
} }
.forgot .input-group { .forgot .input-group {
margin-bottom: 10px; margin-bottom: 10px
} }
.m-b-10 { .m-b-10 {
margin-bottom: 10px; margin-bottom: 10px
} }
/* ------- BootStarp ------- */
.form-control { border-radius: 2px; } .form-control {
/* ------- FileInput ------- */ border-radius: 2px
}
.fileinput h1 { .fileinput h1 {
padding: 20px 0; padding: 20px 0;
font-weight: 400; font-weight: 400;
font-size: 30px; font-size: 30px;
margin-bottom: 20px; margin-bottom: 20px;
border-bottom: 1px solid lavender; border-bottom: 1px solid #e6e6fa;
text-shadow: -5px 5px 0 rgba(0,0,0,.1); text-shadow: -5px 5px 0 rgba(0,0,0,.1)
} }
.file-input .btn { .file-input .btn {
padding: 10px 18px; padding: 10px 18px
} }
.file-input .form-control { .file-input .form-control {
height: 42px; height: 42px;
padding: 10px 12px; padding: 10px 12px
} }
.file-input .btn-file { .file-input .btn-file {
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0
} }
.file-input .file-caption { .file-input .file-caption {
border-top-left-radius: 0; border-top-left-radius: 0;
border-bottom-left-radius: 0; border-bottom-left-radius: 0
} }
/**
.file-input .file-preview {
border-radius: 0px;
}
**/
footer { footer {
margin-top: 50px; margin-top: 50px;
width: 100%; width: 100%
} }
footer .container .text-muted { margin: 20px 0; }
.text-muted { color: #999999; }
@media screen and (max-width: 768px) { footer .container .text-muted {
.layui-layer-iframe { width: 100%!important; height: 100%!important; } margin: 20px 0
.batchDel { display: none; }
.list-per .layui-input-inline, .list-per .layui-inline, .list-per .search_btn { display: grid; margin-top: 5px; }
.list-per .layui-input, .list-per .layui-select, .list-per .layui-textarea { width: 100%; }
.pic-del { display: none; }
} }
.text-muted {
color: #999
}
@media screen and (max-width:768px) {
.layui-layer-iframe {
width: 100%!important;
height: 100%!important
}
.batchDel {
display: none
}
.list-per .layui-inline,.list-per .layui-input-inline,.list-per .search_btn {
display: grid;
margin-top: 5px
}
.list-per .layui-input,.list-per .layui-select,.list-per .layui-textarea {
width: 100%
}
.pic-del {
display: none
}
}
.animated { .animated {
-webkit-animation-fill-mode: both; -webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both; -moz-animation-fill-mode: both;
-ms-animation-fill-mode: both; -ms-animation-fill-mode: both;
-o-animation-fill-mode: both; -o-animation-fill-mode: both;
animation-fill-mode: both; animation-fill-mode: both;
-webkit-animation-duration: 1s; -webkit-animation-duration: 1s;
-moz-animation-duration: 1s; -moz-animation-duration: 1s;
-ms-animation-duration: 1s; -ms-animation-duration: 1s;
-o-animation-duration: 1s; -o-animation-duration: 1s;
animation-duration: 1s; animation-duration: 1s
}
.fadeInDown {
-webkit-animation-name: fadeInDown;
-moz-animation-name: fadeInDown;
-o-animation-name: fadeInDown;
animation-name: fadeInDown;
}
@-webkit-keyframes fadeIn{50%{opacity:.6}
100%{opacity:1}
}
@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-20px)}
100%{opacity:1;-webkit-transform:translateY(0)}
}
@-moz-keyframes fadeInDown{0%{opacity:0;-moz-transform:translateY(-20px)}
100%{opacity:1;-moz-transform:translateY(0)}
}
@-o-keyframes fadeInDown{0%{opacity:0;-o-transform:translateY(-20px)}
100%{opacity:1;-o-transform:translateY(0)}
}
@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}
100%{opacity:1;transform:translateY(0)}
} }
::selection{color:#fff;background:#207cc7} .fadeInDown {
::-moz-selection{color:#fff;background:#207cc7;} -webkit-animation-name: fadeInDown;
:window-inactive {display: none;} -moz-animation-name: fadeInDown;
::-webkit-scrollbar{width:5px;height:5px;} -o-animation-name: fadeInDown;
::-webkit-scrollbar-track{background:#ccc;} animation-name: fadeInDown
::-webkit-scrollbar-track:hover{background:#ff0;} }
::-webkit-scrollbar-track:window-inactive{background:#f6f6f6;}
::-webkit-scrollbar-thumb{background:#888;} @-webkit-keyframes fadeIn {
::-webkit-scrollbar-thumb:window-inactive{background:#f6f6f6;} 50% {
::-webkit-scrollbar-thumb:hover{background:#666;} opacity: .6
::-webkit-scrollbar-button {background:#333;} }
::-webkit-scrollbar-button:window-inactive {background:#f6f6f6;}
100% {
opacity: 1
}
}
@-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px)
}
100% {
opacity: 1;
-webkit-transform: translateY(0)
}
}
@-moz-keyframes fadeInDown {
0% {
opacity: 0;
-moz-transform: translateY(-20px)
}
100% {
opacity: 1;
-moz-transform: translateY(0)
}
}
@-o-keyframes fadeInDown {
0% {
opacity: 0;
-o-transform: translateY(-20px)
}
100% {
opacity: 1;
-o-transform: translateY(0)
}
}
@keyframes fadeInDown {
0% {
opacity: 0;
transform: translateY(-20px)
}
100% {
opacity: 1;
transform: translateY(0)
}
}
::selection {
color: #fff;
background: #207cc7
}
::-moz-selection {
color: #fff;
background: #207cc7
}
:window-inactive {
display: none
}
::-webkit-scrollbar {
width: 5px;
height: 5px
}
::-webkit-scrollbar-track {
background: #ccc
}
::-webkit-scrollbar-track:hover {
background: #ff0
}
::-webkit-scrollbar-track:window-inactive {
background: #f6f6f6
}
::-webkit-scrollbar-thumb {
background: #888
}
::-webkit-scrollbar-thumb:window-inactive {
background: #f6f6f6
}
::-webkit-scrollbar-thumb:hover {
background: #666
}
::-webkit-scrollbar-button {
background: #333
}
::-webkit-scrollbar-button:window-inactive {
background: #f6f6f6
}