login build

@@ -3,7 +3,62 @@
     {{# passport}}
     {{# passport}}
         {{> passport/cover}}
         {{> passport/cover}}
         <div class="content">
         <div class="content">
-
+            <form id="login-form" method="POST" action="/passport/index/login">
+                <ul class="login-ul">
+                    <li class="relative clearfix">
+                        <h2 class="title">会员登录</h2>
+                        <span id="country-code" class="country-code right">
+                            <em>{{countryName}} +{{countryCode}}</em>
+                            <i class="iconfont">&#xe600;</i>
+                            <ul id="country-list" class="country-list">
+                                {{#each countryList}}
+                                    <li data-cc="{{code}}">{{name}} +{{code}}</li>
+                                {{/each}}
+                            </ul>
+                        </span>
+                    </li>
+                    <li class="relative">
+                        <input id="account" class="account input va" name="account" type="text" placeholder="邮箱/手机号码" autocomplete="off">
+                        <ul id="email-autocomplete" class="email-autocomplete hide"></ul>
+                    </li>
+                    <li class="relative">
+                        <input id="password" class="password input va" name="password" type="text" placeholder="密码" autocomplete="off" maxlength="20">
+                        <span id="caps-lock" class="caps-lock hide">大写状态开启</span>
+                    </li>
+                    <li>
+                        <span id="login-btn" class="login-btn btn">登录</span>
+                    </li>
+                    <li class="other-opts">
+                        <span class="remeber-me">
+                            <i class="iconfont">&#xe613;</i>
+                            记住登录状态
+                        </span>
+                        <span class="right">
+                            <a class="forget-password" href="{{forgetPwd}}">忘记密码?</a>
+                            |
+                            <a class="fast-reg" href="{{fastReg}}">快速注册</a>
+                        </span>
+                    </li>
+                    <li class="third-party-login">
+                        <a href="{{qqLogin}}">
+                            <span class="icon qq"></span>
+                        </a>
+                        <a href="{{weiboLogin}}">
+                            <span class="icon weibo"></span>
+                        </a>
+                        <a href="{{alipayLogin}}">
+                            <span class="icon alipay"></span>
+                        </a>
+                        <a href="{{doubanLogin}}">
+                            <span class="icon douban"></span>
+                        </a>
+                        <a href="{{renrenLogin}}">
+                            <span class="icon renren"></span>
+                        </a>
+                    </li>
+                </ul>
+                 <input id="country-code-hide" name="countryCode" type="hidden" value="{{countryCode}}">
+            </form>
         </div>
         </div>
     {{/ passport}}
     {{/ passport}}
 </div>
 </div>

+/**
+ * 登录
+ * @author: xuqi<qi.xu@yoho.cn>
+ * @date: 2015/12/11
+ */
+var $ = require('yoho.jquery');
+
+var mailPostfix = {
+    num: ['qq.com', '163.com', '126.com', 'sina.com', 'gmail.com', 'sohu.com', 'hotmail.com', '139.com', '189.com'],
+    other: ['gmail.com', 'qq.com', '163.com', '126.com', 'sina.com', 'sohu.com', 'hotmail.com', '139.com', '189.com']
+};
+
+var $account = $('#account');
+
+var $countryCodeHide = $('#country-code-hide'),
+    $countryCodeEm = $('#country-code > em'),
+    $countryList = $('#country-list');
+
+var $emailAutoComplete = $('#email-autocomplete');
+
+//checkbox status unicode
+var checkbox = {
+    checked: '&#xe612;',
+    unchecked: '&#xe613;'
+};
+
+var emailAcTime;
+
+//展开地区列表
+$('#country-code').on('click', function() {
+    if ($countryList.css('display') === 'none') {
+        $countryList.slideDown();
+    }
+});
+
+//选中地区列表项
+$countryList.on('click', 'li', function() {
+    var $this = $(this),
+        cc = $this.data('cc');
+
+    $countryCodeEm.html($this.html());
+
+    $countryCodeHide.val(cc);
+
+    $countryList.slideUp();
+});
+
+//点击其他区域，收起区域列表
+$(document).on('click', function(e) {
+    if ($(e.target).closest('#country-code').length > 0) {
+        return;
+    }
+
+    if ($countryList.css('display') === 'block') {
+        $countryList.slideUp();
+    }
+});
+
+//邮箱自动完成
+$account.on('keyup', function() {
+    var account = $.trim($(this).val()),
+        html = '',
+        accountMatch,
+        matchStr,
+        postfix,
+        i;
+
+    //输入@时自动补全邮箱后缀
+    //此处>0非错误，用于避免输入的第一个字符为@被识别为邮箱
+    if (account.indexOf('@') > 0) {
+        accountMatch = account.match(/^[0-9]+@(.*)/);
+        if (accountMatch) {
+
+            //数字邮箱补全
+            postfix = mailPostfix.num;
+        } else {
+            postfix = mailPostfix.other;
+        }
+
+        matchStr = accountMatch[1];
+        for (i = 0; i < postfix.length; i++) {
+            if (postfix[i].indexOf(matchStr) > -1) {
+                html += '<li>' + account.slice(0, account.indexOf('@')) + '@' + postfix[i] + '</li>';
+            }
+        }
+
+        if (html !== '') {
+            $emailAutoComplete.html(html).removeClass('hide');
+        } else {
+
+            //隐藏autocomplete
+            $emailAutoComplete.html('').addClass('hide');
+        }
+    }
+}).on('blur', function() {
+    emailAcTime = setTimeout(function() {
+        $emailAutoComplete.addClass('hide');
+    }, 200);
+});
+
+//邮箱自动完成列表项点击
+$emailAutoComplete.on('click', 'li', function() {
+    clearTimeout(emailAcTime); //清空默认关闭
+
+    $account.val($(this).text());
+
+    $emailAutoComplete.addClass('hide');
+});
+
+//记住登录状态
+$('.remeber-me').on('click', function() {
+    var $this = $(this);
+
+    $this.toggleClass('checked');
+
+    if ($this.hasClass('checked')) {
+        $this.children('i').html(checkbox.checked);
+    } else {
+        $this.children('i').html(checkbox.unchecked);
+    }
+});

+@import "passport/*.png";
+$third: sprite-map("passport/*.png");
+
+.login-page {
+    .relative {
+        position: relative;
+    }
+
+    .right {
+        float: right;
+    }
+
+    .login-ul > li {
+        margin-bottom: 25px;
+    }
+
+    .title {
+        float: left;
+        font-size: 20px;
+    }
+
+    .country-code {
+        cursor: pointer;
+        color: #b9b9b9;
+    }
+
+    .country-list {
+        display: none;
+        position: absolute;
+        padding: 0 10px;
+        background: #fff;
+        border: 1px solid #000;
+        top: 20px;
+        right: 0;
+        z-index: 1;
+
+        @include border-radius(5px);
+
+        li {
+            height: 20px;
+            line-height: 20px;
+            color: #000;
+        }
+    }
+
+    .email-autocomplete {
+        position: absolute;
+        width: 248px;
+        padding: 0 10px;
+        z-index: 1;
+        margin-top: 5px;
+        border-radius: 5px;
+        cursor: pointer;
+        border: 1px solid #fefefe;
+        background-color: #161616;
+        color: #fff;
+
+        li {
+            height: 24px;
+            line-height: 24px;
+        }
+    }
+
+    .remeber-me {
+        cursor: pointer;
+    }
+
+    .other-opts {
+        color: #b9b9b9;
+        font-size: 14px;
+
+        .iconfont {
+            font-size: 14px;
+        }
+
+        .fast-reg {
+            color: #ff1901;
+        }
+    }
+
+    .forget-password {
+        color: #b9b9b9;
+    }
+
+    .third-party-login {
+        display: table;
+
+        a {
+            display: table-cell;
+            width: 54px;
+            background-size: 100% 100%;
+        }
+
+        .icon {
+            display: block;
+            width: 30px;
+            height: 30px;
+            margin: 0 auto;
+        }
+
+        .qq {
+            background: sprite($third, qq) no-repeat;
+        }
+
+        .weibo {
+            background: sprite($third, weibo) no-repeat;
+        }
+
+        .alipay {
+            background: sprite($third, alipay) no-repeat;
+        }
+
+        .douban {
+            background: sprite($third, douban) no-repeat;
+        }
+
+        .renren {
+            background: sprite($third, renren) no-repeat;
+        }
+    }
+}

@@ -14,7 +14,26 @@ class LoginController extends AbstractAction
             'passport' => array(
             'passport' => array(
                 'coverHref' => '/passport',
                 'coverHref' => '/passport',
                 'coverImg' => 'http://img12.static.yhbimg.com/yhb-img01/2015/12/01/07/020a0b6e7ff908d0c2bc4045b4fef42b9f.png?imageView/2/w/252/h/190',
                 'coverImg' => 'http://img12.static.yhbimg.com/yhb-img01/2015/12/01/07/020a0b6e7ff908d0c2bc4045b4fef42b9f.png?imageView/2/w/252/h/190',
-                'countrys' => array()
+                'countryCode' => '86',
+                'countryName' => '中国',
+                'countryList' => array(
+                    array(
+                        'code' => '61',
+                        'name' => '澳大利亚'
+                    ),
+                    array(
+                        'code' => '82',
+                        'name' => '韩国'
+                    ),
+                    array(
+                        'code' => '1',
+                        'name' => '加拿大'
+                    ),
+                    array(
+                        'code' => '86',
+                        'name' => '中国'
+                    )
+                )
             )
             )
         );
         );
         $this->_view->display('index', $data);
         $this->_view->display('index', $data);