前端實戰之用戶控制檯

時間 2019-12-05

標籤前端實戰用戶控制檯简体版

原文原文鏈接

這是一個模仿簡書風格的用戶設置頁面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;
}