Browse Source

优化登录 & 详情页

layui
nelson 5 years ago
parent
commit
c8c74baccb
  1. 22
      static/css/blog.css
  2. 17
      static/css/blogs.css
  3. 6
      static/css/common.css
  4. 34
      static/css/login.css
  5. 3
      views/T.header.tpl
  6. 11
      views/blog.html
  7. 40
      views/blogs.html
  8. 7
      views/login.html
  9. 7
      views/note.html
  10. 7
      views/regist.html

22
static/css/blog.css

@ -7,6 +7,20 @@
margin: 60px 0 20px 0;
text-align: center
}
.blog-root .blog-detaile{
color: #2f2f2f;
}
.blog-root .blog-detaile pre{
/*color: #d2e8b9;*/
border: 1px #d2e8b9 solid;
box-shadow:1px 1px 2px 2px #d2e8b9;
margin: 5px 0;
}
.blog-root .blog-detaile h4{
font-size: 20px;
font-weight: 500;
}
.blog-user{
position: fixed;
@ -17,6 +31,10 @@
background-color: #f9f9f9;
}
.blog-info{
padding: 15px;
}
.blog-info .blog-author{
display: flex;
}
@ -92,4 +110,8 @@ img {
}
.blog-referral p{
padding: 3px 0;
}
.layui-code-view .layui-code-ol li{
margin-left: 0px !important;
}

17
static/css/blogs.css

@ -1,6 +1,6 @@
.home-container{
height: 100%;
margin: 50px 4% 0 4%;
margin: 50px 5% 0 5%;
}
.home-container hr{
margin: 0;
@ -12,7 +12,20 @@
height: 30px;
line-height: 30px;
}
.home-hearder .m-select{
width: 150px;
display: inline-block;
height: 32px;
border-radius: 3px;
padding: 4px 14px;
}
.home-hearder .layui-btn-group .active a{
color: #fff;
}
.home-hearder .layui-btn-group a{
color: #333;
text-decoration: none;
}
.nelson-btn{
color: #ec6149 !important;
border-radius: 15px;

6
static/css/common.css

@ -16,12 +16,6 @@ a{
border-color: #f8d9ea !important;
}
.img-circle{
width: 36px;
height: 36px;
margin-top: 2px;
}
.img-circle-large{
width: 110px;
height: 110px;

34
static/css/login.css

@ -1,6 +1,5 @@
.login-root {
background: #f0e7db url("/static/img/login.png") no-repeat;
padding-top: 50px;
background: url("/static/img/login.png") no-repeat;
position: absolute;
min-height: 100%;
width: 100%;
@ -25,12 +24,37 @@
.login-root .input-container .input-root .inputs-class{
padding: 0 50px;
}
.login-root .input-container .input-root .input-group{
display: table;
border-collapse: separate;
}
.login-root .input-container .input-root .inputs-class .input-class{
height: 35px;
margin: 18px 0
height: 32px;
margin: 18px 0;
display: flex;
}
.login-root .input-container .input-root .inputs-class .input-class input{
height: 35px !important;
flex: 1;
height: 26px !important;
padding: 2px 14px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
display: table-cell;
border: 1px solid #ccc;
}
.login-root .input-container .input-root .inputs-class .input-class .input-group-addon{
color: #555;
line-height: 26px !important;
font-size: 12px;
padding: 2px 14px;
line-height: 1.5;
border-radius: 3px;
display: table-cell;
border: 1px solid #ccc;
border-right: none;
}
.login-footer{

3
views/T.header.tpl

@ -8,11 +8,8 @@
{{else}}
<meta name="description" content="云悦,个人随笔是一个面向IT技术人员,提供个人平时工作总结和在线记录学习笔记,个人技术博客,在线云笔记,码农笔录,最新的技术博客,www.aiprose.com">
{{end}}
<!--<link rel="stylesheet" href="//oss.aiprose.com/ali/sui/css/sui.min.css">-->
<link rel="stylesheet" href="/static/layui/css/layui.css">
<script type="text/javascript" src="/static/js/checkm.js"></script>
<!--<script type="text/javascript" src="//oss.aiprose.com/ali/jquery/jquery.min.js"></script>-->
<!--<script type="text/javascript" src="//oss.aiprose.com/ali/sui/js/sui.min.js"></script>-->
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
<script type="text/javascript" src="/static/layui/layui.js"></script>
<script type="text/javascript" src="/static/js/layer.js"></script>

11
views/blog.html

@ -3,6 +3,10 @@
<meta name="description" content="{{.Blog.Title}}">
<title>{{.Blog.Title}} - 云悦</title>
<link type="text/css" rel="styleSheet" href="/static/css/blog.css"/>
<!--<link href="https://cdn.bootcss.com/highlight.js/9.15.6/styles/default.min.css" rel="stylesheet">-->
<link href="https://cdn.bootcss.com/highlight.js/9.15.6/styles/school-book.min.css" rel="stylesheet">
<!--<link href="https://cdn.bootcss.com/highlight.js/9.15.6/styles/atelier-dune-light.min.css" rel="stylesheet">-->
<script src="https://cdn.bootcss.com/highlight.js/9.15.6/highlight.min.js"></script>
</head>
<body>
<div class="root-container">
@ -25,12 +29,13 @@
</div>
</div>
</div>
<div style="width: 100%">
<div style="width: 100%" class="blog-detaile">
{{str2html .Blog.BlogHtml}}
</div>
</div>
<div class="comms-root">
<textarea class="form-control" rows="3" id="commval"></textarea>
<textarea name="desc" placeholder="请输入内容" id="commval" class="layui-textarea"></textarea>
<div style="text-align: end">
<button type="button" class="btn btn-info btn-bordered" id="commBtn">发表评论</button>
</div>
@ -78,6 +83,8 @@
</div>
</body>
<script>
hljs.initHighlightingOnLoad();
$(function () {
$("#commBtn").click(function () {
var commval = $("#commval").val()

40
views/blogs.html

@ -10,20 +10,16 @@
<div class="home-hearder">
<div style="flex: 1">
<span>
<select class="form-control input-lg" style="width: 150px;display: inline-block;height: 32px" id="selCat">
<select name="city" id="selCat" class="m-select">
<option value="-1">选择分类</option>
{{range .Cats}}
<option value="{{.Id}}">{{.Title}}</option>
{{end}}
</select>
</select>
</span>
<div class="btn-group" role="group" style="display: inline-block;margin-top: -3px">
<span class="{{if eq 0 .Flag}}active{{end}}">
<a href="/blogs?num=1&flag=0&cat={{.Cat}}" style="color: #555;text-decoration: none;">最新</a>
</span>
<span class="{{if eq 1 .Flag}}active{{end}}">
<a href="/blogs?num=1&flag=1&cat={{.Cat}}" style="color: #555;text-decoration: none;">最热</a>
</span>
<div class="layui-btn-group" style="display: inline-block;margin-top: -5px">
<button class="layui-btn layui-btn-sm {{if eq 0 .Flag}}active{{end}}"><a href="/blogs?num=1&flag=0&cat={{.Cat}}" >最新</a></button>
<button class="layui-btn layui-btn-sm {{if eq 1 .Flag}}active{{end}}"><a href="/blogs?num=1&flag=1&cat={{.Cat}}" >最热</a></button>
</div>
</div>
<button type="button" onclick="window.open('/blog/new')" class="layui-btn layui-btn-radius layui-btn-danger" style="border-radius: 12px">
@ -35,16 +31,16 @@
<div class="home-content-title cursor" style="font-size: 14px">
文章标题
</div>
<div style="display: inline-block;width: 260px">
<div style="display: inline-block;width: 300px">
<div class="home-content-desc">
<span style="width: 60px;font-size: 14px">类型</span>
<span style="width: 60px"> 用户</span>
<span style="width: 60px;font-size: 14px">浏览量</span>
<span style="flex: 1;font-size: 14px">日期</span>
<span style="width: 100px;font-size: 14px">类型</span>
<span style="width: 50px"> 用户</span>
<span style="flex: 1;font-size: 14px">浏览量</span>
<span style="min-width: 80px;font-size: 14px">日期</span>
</div>
</div>
</div>
<hr style="height:1px;border:none;border-top:1px solid lightgray;"/>
<hr style="border:none"/>
</div>
{{range .Page.List}}
<div>
@ -52,16 +48,18 @@
<div class="home-content-title cursor">
<a href="/blog/{{.Id}}" target="_blank">{{.Title}}</a>
</div>
<div style="display: inline-block;width: 260px">
<div style="display: inline-block;width: 300px">
<div class="home-content-desc">
<span style="width: 60px;font-size: 14px">{{.CateName}}</span>
<span style="width: 60px" class="cursor">{{.UserName}}</span>
<span style="width: 60px;font-size: 14px">{{.Browses}}</span>
<span style="flex: 1;font-size: 14px">{{.Ctime.Format "2006-01-02"}}</span>
<span style="width: 100px;font-size: 12px">{{.CateName}}</span>
<span style="width: 50px;text-align: center">
<a href="/u/{{.UserId}}"><img src="{{.HeadImg}}" alt="头像" class="img-circle"></a>
</span>
<span style="flex: 1;font-size: 14px">{{.Browses}}</span>
<span style="min-width: 80px;font-size: 14px">{{.Ctime.Format "2006/01/02"}}</span>
</div>
</div>
</div>
<hr style="height:1px;border:none;border-top:1px solid #EEE;"/>
<hr style="border:none;"/>
</div>
{{end}}

7
views/login.html

@ -12,17 +12,16 @@
<p>登录</p>
<div class="inputs-class">
<div class="input-group input-group-lg input-class">
<span class="input-group-addon" id="sizing-addon1">用户</span>
<span class="input-group-addon">用户</span>
<input type="text" class="form-control" placeholder="请输入用户名" aria-describedby="sizing-addon1"
id="username">
</div>
<div class="input-group input-group-lg input-class">
<span class="input-group-addon" id="sizing-addon1">密码</span>
<span class="input-group-addon">密码</span>
<input type="password" class="form-control" placeholder="请输入密码" aria-describedby="sizing-addon1"
id="userpwd">
</div>
<button type="button" class="btn btn-primary btn-lg btn-bordered btn-block" id="loginBtn">登录
</button>
<button class="layui-btn layui-btn-fluid" id="loginBtn">登录</button>
</div>
</div>
</div>

7
views/note.html

@ -6,17 +6,16 @@
<meta name="description" content="云悦,个人随笔是一个面向IT技术人员,提供个人平时工作总结和在线记录学习笔记,个人技术博客,在线云笔记,码农笔录,最新的技术博客,www.aiprose.com">
<meta name="keywords"
content="云悦,个人随笔,博客,个人博客,个人笔记,技术博客,免费云笔记,云笔记,随笔,IT博客,谷歌地图,码农笔录,aiprose">
{{/*<link rel="stylesheet" href="//g.alicdn.com/sui/sui3/0.0.18/css/sui.min.css">*/}}
<link rel="stylesheet" href="//oss.aiprose.com/ali/sui/css/sui.min.css">
{{/*<script type="text/javascript" src="//g.alicdn.com/sj/lib/jquery/dist/jquery.min.js"></script>*/}}
<title>我的笔记 - 云悦</title>
<script type="text/javascript" src="/static/js/checkm.js"></script>
<link type="text/css" rel="styleSheet" href="/static/css/menu-reset.css"/>
<link type="text/css" rel="styleSheet" href="/static/css/notemenu.css"/>
<link type="text/css" rel="styleSheet" href="/static/css/menunav.css"/>
<link rel="stylesheet" href="/static/layui/css/layui.css">
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
<script src="/static/js/menu.js"></script> <!-- Modernizr -->
<script src="/static/js/jquery-1.11.1.min.js"></script>
<script src="/static/js/wangEditor.min.js"></script>
<script type="text/javascript" src="/static/layui/layui.js"></script>
<style>
.w-e-toolbar {
height: 40px;

7
views/regist.html

@ -12,17 +12,16 @@
<p>注册</p>
<div class="inputs-class">
<div class="input-group input-group-lg input-class">
<span class="input-group-addon" id="sizing-addon1">用户</span>
<span class="input-group-addon">用户</span>
<input type="text" class="form-control" placeholder="请输入用户名" id="username"
aria-describedby="sizing-addon1">
</div>
<div class="input-group input-group-lg input-class">
<span class="input-group-addon" id="sizing-addon1">密码</span>
<span class="input-group-addon">密码</span>
<input type="password" class="form-control" placeholder="请输入密码" id="userpwd"
aria-describedby="sizing-addon1">
</div>
<button type="button" class="btn btn-primary btn-lg btn-bordered btn-block" id="loginBtn">注册
</button>
<button class="layui-btn layui-btn-fluid" id="loginBtn">注册</button>
</div>
</div>
</div>

Loading…
Cancel
Save