<style> .profile-avatar-container { position:relative; width:100px; } .profile-avatar-container .profile-user-img{ width:100px; height:100px; } .profile-avatar-container .profile-avatar-text { display:none; } .profile-avatar-container:hover .profile-avatar-text { display:block; position:absolute; height:100px; width:100px; background:#444; opacity: .6; color: #fff; top:0; left:0; line-height: 100px; text-align: center; } .profile-avatar-container button{ position:absolute; top:0;left:0;width:100px;height:100px;opacity: 0; } </style> <div id="content-container" class="container"> <div class="row"> <div class="col-md-3"> {include file="common/sidenav" /} </div> <div class="col-md-9"> <div class="panel panel-default"> <div class="panel-body"> <h2 class="page-header">{:__('Profile')}</h2> <form id="profile-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="{:url('api/user/profile')}"> {:token()} <input type="hidden" name="avatar" id="c-avatar" value="{:$user->getData('avatar')}" /> <div class="form-group"> <label class="control-label col-xs-12 col-sm-2"></label> <div class="col-xs-12 col-sm-4"> <div class="profile-avatar-container"> <img class="profile-user-img img-responsive img-circle plupload" src="{$user.avatar|cdnurl}" alt=""> <div class="profile-avatar-text img-circle">{:__('Click to edit')}</div> <button id="plupload-avatar" class="plupload" data-mimetype="png,jpg,jpeg,gif" data-input-id="c-avatar"><i class="fa fa-upload"></i> {:__('Upload')}</button> </div> </div> </div> <div class="form-group"> <label class="control-label col-xs-12 col-sm-2">{:__('Username')}:</label> <div class="col-xs-12 col-sm-4"> <input type="text" class="form-control" id="username" name="username" value="{$user.username|htmlentities}" data-rule="required;username;remote({:url('api/validate/check_username_available')}, id={$user.id})" placeholder=""> </div> </div> <div class="form-group"> <label class="control-label col-xs-12 col-sm-2">{:__('Nickname')}:</label> <div class="col-xs-12 col-sm-4"> <input type="text" class="form-control" id="nickname" name="nickname" value="{$user.nickname|htmlentities}" data-rule="required" placeholder=""> </div> </div> <div class="form-group"> <label for="c-bio" class="control-label col-xs-12 col-sm-2">{:__('Intro')}:</label> <div class="col-xs-12 col-sm-8"> <input id="c-bio" data-rule="" data-tip="一句话介绍一下你自己" class="form-control" name="bio" type="text" value="{$user.bio|htmlentities}"> </div> </div> <div class="form-group"> <label for="c-email" class="control-label col-xs-12 col-sm-2">{:__('Email')}:</label> <div class="col-xs-12 col-sm-4"> <div class="input-group"> <input type="text" class="form-control" id="c-email" name="email" value="{$user.email|htmlentities}" disabled placeholder=""> <span class="input-group-btn" style="padding:0;border:none;"> <a href="javascript:;" class="btn btn-info btn-change" data-type="email">{:__('Change')}</a> </span> </div> </div> </div> <div class="form-group"> <label for="c-mobile" class="control-label col-xs-12 col-sm-2">{:__('Mobile')}:</label> <div class="col-xs-12 col-sm-4"> <div class="input-group"> <input type="text" class="form-control" id="c-mobile" name="mobile" value="{$user.mobile|htmlentities}" disabled placeholder=""> <span class="input-group-btn" style="padding:0;border:none;"> <a href="javascript:;" class="btn btn-info btn-change" data-type="mobile">{:__('Change')}</a> </span> </div> </div> </div> <div class="form-group normal-footer"> <label class="control-label col-xs-12 col-sm-2"></label> <div class="col-xs-12 col-sm-8"> <button type="submit" class="btn btn-success btn-embossed disabled">{:__('Ok')}</button> <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button> </div> </div> </form> </div> </div> </div> </div> </div> <script type="text/html" id="emailtpl"> <form id="email-form" class="form-horizontal form-layer" method="POST" action="{:url('api/user/changeemail')}"> <div class="form-body"> <input type="hidden" name="action" value="changeemail" /> <div class="form-group"> <label class="control-label col-xs-12 col-sm-3">{:__('New Email')}:</label> <div class="col-xs-12 col-sm-8"> <input type="text" class="form-control" id="email" name="email" value="" data-rule="required;email;remote({:url('api/validate/check_email_available')}, event=changeemail, id={$user.id})" placeholder="{:__('New email')}"> <span class="msg-box"></span> </div> </div> <div class="form-group"> <label class="control-label col-xs-12 col-sm-3">{:__('Captcha')}:</label> <div class="col-xs-12 col-sm-8"> <div class="input-group"> <input type="text" name="captcha" id="email-captcha" class="form-control" data-rule="required;length(4);integer[+];remote({:url('api/validate/check_ems_correct')}, event=changeemail, email:#email)" /> <span class="input-group-btn" style="padding:0;border:none;"> <a href="javascript:;" class="btn btn-info btn-captcha" data-url="{:url('api/ems/send')}" data-type="email" data-event="changeemail">获取验证码</a> </span> </div> <span class="msg-box"></span> </div> </div> </div> <div class="form-footer"> <div class="form-group" style="margin-bottom:0;"> <label class="control-label col-xs-12 col-sm-3"></label> <div class="col-xs-12 col-sm-8"> <button type="submit" class="btn btn-md btn-info">{:__('Submit')}</button> </div> </div> </div> </form> </script> <script type="text/html" id="mobiletpl"> <form id="mobile-form" class="form-horizontal form-layer" method="POST" action="{:url('api/user/changemobile')}"> <div class="form-body"> <input type="hidden" name="action" value="changemobile" /> <div class="form-group"> <label for="c-mobile" class="control-label col-xs-12 col-sm-3">{:__('New mobile')}:</label> <div class="col-xs-12 col-sm-8"> <input type="text" class="form-control" id="mobile" name="mobile" value="" data-rule="required;mobile;remote({:url('api/validate/check_mobile_available')}, event=changemobile, id={$user.id})" placeholder="{:__('New mobile')}"> <span class="msg-box"></span> </div> </div> <div class="form-group"> <label for="mobile-captcha" class="control-label col-xs-12 col-sm-3">{:__('Captcha')}:</label> <div class="col-xs-12 col-sm-8"> <div class="input-group"> <input type="text" name="captcha" id="mobile-captcha" class="form-control" data-rule="required;length(4);integer[+];remote({:url('api/validate/check_sms_correct')}, event=changemobile, mobile:#mobile)" /> <span class="input-group-btn" style="padding:0;border:none;"> <a href="javascript:;" class="btn btn-info btn-captcha" data-url="{:url('api/sms/send')}" data-type="mobile" data-event="changemobile">获取验证码</a> </span> </div> <span class="msg-box"></span> </div> </div> </div> <div class="form-footer"> <div class="form-group" style="margin-bottom:0;"> <label class="control-label col-xs-12 col-sm-3"></label> <div class="col-xs-12 col-sm-8"> <button type="submit" class="btn btn-md btn-info">{:__('Submit')}</button> </div> </div> </div> </form> </script> <style> .form-layer {height:100%;min-height:150px;min-width:300px;} .form-body { width:100%; overflow:auto; top:0; position:absolute; z-index:10; bottom:50px; padding:15px; } .form-layer .form-footer { height:50px; line-height:50px; background-color: #ecf0f1; width:100%; position:absolute; z-index:200; bottom:0; margin:0; } .form-footer .form-group{ margin-left:0; margin-right:0; } </style>