前端实战之用户控制台
这是一个模仿简书风格的用户设置页面css
实现页面
- 基本设置页
- 我的资料页面
- 黑名单页面
- 密码重置页
- 删除帐号页
依赖第三方工具
- BootStrap框架
- jQuery
HTML代码
<body id="setting-page" ng-controller="setCtrl">
<link href="css/settings.css" rel="stylesheet">
<div class="navbar-USF">
<div class="dropdown">
<a href="/" title="回到首页" data-placement="right" data-toggle="tooltip">
<span class="glyphicon glyphicon-home"></span>
</a>
<a href="/" title="小组广场" data-placement="right" data-toggle="tooltip">
<span class="glyphicon glyphicon-th"></span>
</a>
<a href="/" title="发条状态" data-placement="right" data-toggle="tooltip">
<span class="glyphicon glyphicon-pencil"></span>
</a>
</div>
<div class="nav-user">
<a href="/user" title="我的主页" data-placement="right" data-toggle="tooltip">
<span class="glyphicon glyphicon-user"></span>
</a>
<a href="/message" title="您的消息" data-placement="right" data-toggle="tooltip">
<span class="glyphicon glyphicon-comment"></span>
</a>
<a href="/message" title="发现" data-placement="right" data-toggle="tooltip">
<span class="glyphicon glyphicon-eye-open"></span>
</a>
<a href="/">
<span class="glyphicon glyphicon-book" title="收藏夹" data-placement="right" data-toggle="tooltip"> </span>
</a>
<a href="/settings" title="设置" data-placement="right" data-toggle="tooltip">
<span class="glyphicon glyphicon-cog"></span>
</a>
<a href="/logout" title="登出" data-placement="right" data-toggle="tooltip">
<span class="glyphicon glyphicon-log-out"></span>
</a>
</div>
</div>
<div class="container" ng-init="getUser()">
<div class="setting">
<div class="alert alert-info" ng-show="$root.display">
<button type="button" class="close" ng-click="$root.display=false">
<span>×</span>
</button>
{{$root.msg}}
</div>
</div>
<h2 class="page-title">
<span class="glyphicon glyphicon-cog"></span>
设置
</h2>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li role="presentation" class="active">
<a href="#basic" role="tab" data-toggle="tab">基础设置</a>
</li>
<li role="presentation">
<a href="#profile" role="tab" data-toggle="tab">我的资料</a>
</li>
<li role="presentation">
<a href="#pass" role="tab" data-toggle="tab">修改密码</a>
</li>
<li role="presentation">
<a href="#blacklist" role="tab" data-toggle="tab">黑名单</a>
</li>
<li role="presentation">
<a href="#destroy" role="tab" data-toggle="tab">删除帐号</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="basic">
<div class="block">
<h4>
选择经常使用编辑器
<span class="notice"> 切换后对新建文章生效</span>
</h4>
<div class="radio">
<label>
<input type="radio" name="editor" value="0" checked="checked">
富文本编辑器
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="editor" value="1">
Markdown编辑器
</label>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="profile" ng-controller="profileCtrl">
<form class="block form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2">
头像
</label>
<div class="avatar col-sm-2">
<img alt="用户头像" class="img-circle" ng-src="{{profile.avatar}}">
</div>
<div class="btn-group change-avatar col-sm-2">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
更换头像
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="upload-button">
<div class="btn btn-lg btn-link upload-avatar" type="file"
ng-file-select="fileSelect($files)" accept="image/*">
<span class="glyphicon glyphicon-pencil"></span>
上传头像
</div>
</li>
<li class="divider">
</li>
<li class="available-avatar">
<img ng-repeat="pic in picList" ng-src="{{pic}}" ng-click="changeAvatar(pic)">
</li>
</ul>
</div>
</div>
<br>
<div class="form-group">
<label class="col-sm-2 control-label">
真实姓名
</label>
<div class="col-sm-3">
<input type="text" class="form-control" placeholder="张三" ng-model="profile.realname">
</div>
</div>
<br>
<div class="form-group">
<label class="col-sm-2 control-label">
性别
</label>
<div class="col-sm-2">
<select class="form-control" ng-model="profile.sex">
<option value="0">
男
</option>
<option value="1">
女
</option>
</select>
</div>
</div>
<br>
<div class="form-group">
<label class="col-sm-2 control-label" ng-model="profile.email">
电子邮件
</label>
<div class="col-sm-6">
<input type="email" disabled="disabled" class="form-control" ng-model="profile.email" placeholder="Email">
</div>
</div>
<br>
<div class="form-group">
<label class="col-sm-2 control-label">
电话号码
</label>
<div class="col-sm-6">
<input type="text" class="form-control" placeholder="+86" ng-model="profile.phone">
</div>
</div>
<br>
<div class="form-group">
<label class="col-sm-2 control-label">
我的主页
</label>
<div class="col-sm-6">
<input type="text" class="form-control" placeholder="http://" ng-model="profile.page">
</div>
</div>
<br>
<div class="form-group">
<label class="col-sm-2 control-label">
自我描述
</label>
<div class="col-sm-6">
<textarea type="text" class="form-control" rows="4" placeholder="填写您的我的简介能够帮助其余人更好的了解您."
ng-model="profile.description"></textarea>
</div>
</div>
<br>
<div class="form-group">
<label class="col-sm-2 control-label">
</label>
<div class="col-sm-3">
<button class="btn btn-lg btn-success" ng-click="saveProfile()">
保存修改
</button>
</div>
</div>
</form>
</div>
<div role="tabpanel" class="tab-pane" id="pass" ng-controller="resetPasswordCtrl">
<form class="block">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">
旧密码
</div>
<input class="form-control" ng-model="form.password" type="password" placeholder="***********">
</div>
</div>
<br>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">
新密码
</div>
<input class="form-control" ng-model="form.newPassword" type="password" placeholder="***********">
</div>
</div>
<br>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">
请重复
</div>
<input class="form-control" ng-model="form.repeatPassword" type="password" placeholder="***********">
</div>
</div>
<br>
<button class="btn btn-primary btn-lg" ng-click="reset()">
保存
</button>
</form>
</div>
<div role="tabpanel" class="tab-pane" id="blacklist" ng-controller="blacklistCtrl">
<div class="block" ng-init="initBlackList()">
<p>
您能够在用户状态和用户主页中将其加入黑名单。您将没法看到加入黑名单的用户发表的状态和评论。
</p>
<table class="table table-bordered">
<tbody>
<tr>
<th colspan="2">
黑名单用户
</th>
<th>
操做
</th>
</tr>
<tr ng-repeat="person in personList">
<td>
<input class="check-helper" type="checkbox" ng-model="person.checked">
</td>
<td>
<a ng-href="/users/{{person.name}}">{{person.name}}</a>
</td>
<td>
<label class="btn-link btn-small unblock" ng-click="remove(person)">
从黑名单移除
</label>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">
<input class="check-helper" type="checkbox" ng-click="selectAll()">
<span>全选</span>
<label class="btn-link pull-right" style="color:#555555" ng-click="removeAll()">
批量移除
</label>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="destroy" ng-controller="destroyUserCtrl">
<div class="block">
<h4>
删除帐号
</h4>
<p class="text-danger">
<span class="glyphicon glyphicon-exclamation-sign"></span>
此操做将删除您的所有数据，请谨慎操做
</p>
<br>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">
<span class="glyphicon glyphicon-lock"></span>
</div>
<input class="form-control" ng-model="password" type="password" placeholder="当前密码">
</div>
</div>
<br>
<button class="btn btn-lg btn-danger" ng-click="destroy()">
删除帐号
</button>
</div>
</div>
</div>
</div>
</body>
CSS代码
.navbar-USF{
left:0;
top:0;
position:fixed;
height:100%;
width:45px;
background-color:#3C3C3C;
}
.navbar-USF a{
display:block;
padding:10px;
line-height: 25px;
height:45px;
font-size:16px;
text-align: center;
}
.navbar-USF a:hover{
background:#E0E0E0;
}
.navbar-USF a span{
height:25px;
width: 25px;
}
.navbar-USF .nav-user{
position:relative;
width:100%;
bottom:-43%;
}
.navbar-USF .nav-user a{
padding:5px 10px;
height:35px;
}
.setting{
padding:0px 100px 30px;
color:#555555;
}
.page-title{
text-align:center;
margin:20px 0 20px;
font-size:30px;
padding-left:20px;
position:relative;
}
.page-title span{
top:5px;
}
.nav-tabs{
margin:20px 100px 10px 100px;
text-align:center;
display:tables;
padding:0 16%;
position:relative;
left:8%;
}label.btn-link{
cursor: pointer;
}
.nav-tabs>li>a{
margin-right:2px;
padding-left:12px;
display:block;
color:#555555;
}
.tab-content{
padding:30px 100px 0;
}
.check-helper{
height:18px;
width:18px;
margin:4px;
}
#setting-page .alert{
margin:10px 26% 0;
text-align:center;
position:absolute;
top:-10px;
width:20%;
}
#pass form{
width:40%;
margin:0 34%;
}
#pass .input-control{
margin-bottom:15px;
}
#pass label{
font-weight:normal;
}
#pass form input{
height:40px;
line-height:normal;
margin-top:0;
width:100%;
}
#destroy .block{
margin-left:38%;
}
#destroy .form-group{
width:50%;
}
#blacklist .block{
margin:0 25%;
position:relative;
left:2%;
}
table {
vertical-align:middle;
}
tr th{
text-align:center;
}
#blacklist tbody td {
text-align:center;
}
#blacklist tfoot td{
padding:15px;
vertical-align:middle;
}
#blacklist tfoot td span{
position:relative;
top:-4px;
}
#profile .block{
position:relative;
left:20%;
}
#profile .avatar img{
width:90px;
height:90px;
}
#profile .available-avatar img{
cursor: pointer;
}
.change-avatar .dropdown-menu{
padding: 3px;
width:180px;
position: relative;
}
.change-avatar li{
position:relative;
}
.change-avatar .upload-avatar{
display: block;
margin:5px;
font-size:14px;
text-align:left;
height:40px;
margin:5px;
padding: 10px;
}
.change-avatar .upload-avatar:hover{
background:#555555;
}
.available-avatar img{
width:40px;
height:40px;
margin:5px;
}
#basic .block{
position:relative;
left:32%;
}
#basic .notice{
font-size:12px;
color:#999999;
}
效果展现
