master

分支 (1)

管理

管理

master

oschinaDemo
/
index.html

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>login</title>
    <script>
        window.onload = function () {
            var html = document.querySelector("html");  // 获取根节点html,用h5新增的选择器
            var timer = null;
            // 动态的获取设置根节点fontSize大小
            function changeRem() {
                var htmlWidth = html.getBoundingClientRect().width; // 获取网页的宽度,也就是屏幕的宽度
                htmlWidth <= 640 ? html.style.fontSize = (htmlWidth / 640) * 100 + "px" : html.style.fontSize = "100px";
            }
            // 页面尺寸发生改变时,重新计算文字等大小,功能函数
            function Time() {
                clearTimeout(timer);
                timer = setTimeout(function () {
                    changeRem();
                }, 10)
            }
            // 浏览器窗口发生变化时
            window.addEventListener('resize', function () {
                Time();
            });
            Time()
        }
    </script>
    <link rel="stylesheet" href="login.css" type="text/css" />
</head>

<body>
    <div class="main">
    <header class="flex">
        <div class="left header-item">
            <a href="/" class=" head-item float-left">
                <img class="logo" height="28" src="https://gitee.com/logo.svg?20171024" width="95">
            </a>
            <a href="https://gitee.com/explore" title="开源软件" class=" head-item float-left">开源软件</a>
            <a href="https://gitee.com/enterprises" class="head-item float-left" title="企业版">企业版
                <sup class="red label">
                    特惠
                </sup>
            </a>
            <a href="/education" class="head-item  float-left" title="高校版">高校版</a>
            <a href="https://blog.gitee.com/" class="head-item  float-left" id="gitee-blog" target="_blank" title="博客">博客</a>
        </div>
        <div class="right header-item">
            <input name="q" placeholder="搜索项目、代码片段..." type="text" value="">
            <!-- <input id="navbar-search-type" name="type" type="hidden"> -->
            <a class="header-login header-button" href="/">登录</a>
            <a class="header-register header-button" href="/">注册</a>
        </div>
    </header>
    <div id="app">
        <div class="main-login">
            <div class="login-background">
            <div class="login-form ">
                <form action="post">
                    <div class="form-title">
                        <div class="icon">注册</div>
                        <p>已有账号?请<span class="login-button">登录</span></p>
                    </div>
                    <div class="form-content">
                        <div class="form-item">
                            <span class="form-item-title">
                                邮箱
                            </span>
                            <input type="text" class="default-input input-style" size="30" :class="validate.email.state=='error'?validate.email.state:''"
                                id="email" v-model="form.email" placeholder="请输入工作邮箱" @blur="validata('email')">
                            <span class="validate-icon" :class="validate.email.state">{{validate.email.state!='loading'?(validate.email.state=='success'?'√':'X'):''}}</span>
                        </div>
                        <p class="validate" :class="validate.email.state">{{validate.email.title}}</p>
                        <div class="form-item">
                            <span class="form-item-title">
                                验证码
                            </span>
                            <div class="input-style">
                                <input type="text" class="default-input input-style" size="30" :class="validate.validateCode.state=='error'?validate.validateCode.state:''"
                                    id="validateCode" v-model="form.validateCode" placeholder="请输入验证码" @blur="validata('validateCode')">
                                <img src="" alt="">
                            </div>
                            <span class="validate-icon" :class="validate.validateCode.state">{{validate.validateCode.state!='loading'?(validate.validateCode.state=='success'?'√':'X'):''}}</span>
                        </div>
                        <p class="validate" :class="validate.validateCode.state">{{validate.validateCode.title}}</p>
                        <div class="form-item">
                            <span class="form-item-title">
                                邮箱验证
                            </span>
                            <div class="input-style">
                                <input type="text" class="default-input" size="30" :class="validate.emailCode.state=='error'?validate.emailCode.state:''"
                                    id="emailCode" v-model="form.emailCode" placeholder="请输入邮箱验证码" @blur="validata('emailCode')">
                                <span @click="getEmailCode" class="email-code" v-text="emailStr"></span>
                            </div>
                            <span class="validate-icon" :class="validate.emailCode.state">{{validate.emailCode.state!='loading'?(validate.emailCode.state=='success'?'√':'X'):''}}</span>
                            <a class="emailLink">收不到邮件?</a>
                        </div>
                        <p class="validate" :class="validate.emailCode.state">{{validate.emailCode.title}}</p>
                        <div class="form-item">
                            <span class="form-item-title">
                                姓名
                            </span>
                            <input type="text" class="default-input input-style" size="30" :class="validate.nickName.state=='error'?validate.nickName.state:''"
                                id="nickName" v-model="form.nickName" placeholder="请输入姓名" @blur="validata('nickName')">
                            <span class="validate-icon" :class="validate.nickName.state">{{validate.nickName.state!='loading'?(validate.nickName.state=='success'?'√':'X'):''}}</span>

                        </div>
                        <p class="validate" :class="validate.nickName.state">{{validate.nickName.title}}</p>
                        <div class="form-item">
                            <span class="form-item-title">
                                个性域名
                            </span>
                            <div class="input-style">
                                <span class="domain">https://gitee.com/</span>
                                <input type="text" class="default-input" size="30" :class="validate.domain.state=='error'?validate.domain.state:''" id="domain"
                                    v-model="form.domain" placeholder="请输入个性域名" @blur="validata('domain')">

                            </div>
                            <span class="validate-icon" :class="validate.domain.state">{{validate.domain.state!='loading'?(validate.domain.state=='success'?'√':'X'):''}}</span>

                        </div>
                        <p class="validate" :class="validate.domain.state">{{validate.domain.title}}</p>
                        <div class="form-item secret-after" >
                            <span class="form-item-title">
                                密码
                            </span>
                            <input :type="showSecret?'text':'password'" size="30" class="default-input input-style" :class="validate.secret.state=='error'?validate.secret.state:''"
                                id="secret" v-model="form.secret" placeholder="密码不小于6位" @blur="validata('secret')">
                            <span class="validate-icon" :class="validate.secret.state">{{validate.secret.state!='loading'?(validate.secret.state=='success'?'√':'X'):''}}</span>
                            <div class="eyes" v-on:click="showSecretFn()"></div>
                        </div>
                        <p class="validate" :class="validate.secret.state">{{validate.secret.title}}</p>
                    </div>
                    <div class="norm clearfix">
                        <input type="radio"/>
                        <p>已阅读并同意<a href="https://gitee.com/inactive_accounts" target="_blank">使用条款</a href="https://gitee.com/inactive_accounts" target="_blank">以及<a href>非活跃账号处理规范</a></p>
                    </div>
                    <button class="submit">注册</button>
                    <div class="other-login">
                        <p><a>使用OSchina登录</a></p>
                        <img src="./otherLogin.png"/>
                    </div>
                </form>
            </div>
            <div class="login-message ">
                <div class="title-message">尝试码云企业版？</div>
                <ul class="features">
                    <li>
                        不止更多成员、更高配额
                    </li>
                    <li>
                        灵活支撑协作研发、代码交付、IT 教育培训等场景代码托管需求
                    </li>
                </ul>
                <div class="title-message">他们都在用</div>
                <p>
                    已有超过 50000 企业研发团队选择码云企业版，60% 客户来自口碑推荐。
                </p>
                <ul class="message-cases">
                    <li>
                        <img alt="企业版案例 LOGO" src="https://gitee.com/enterprise_cases/zsyh.png" title="招商银行">
                    </li>
                    <li>
                        <img alt="企业版案例 LOGO" src="https://images.gitee.com/uploads/images/2019/0116/155426_b8020514_1305863.png" title="招商证券">
                    </li>
                    <li>
                        <img alt="企业版案例 LOGO" src="https://images.gitee.com/uploads/images/2018/0927/155607_d6a34985_1305863.png" title="中国电信">
                    </li>
                    <li>
                        <img alt="企业版案例 LOGO" src="https://images.gitee.com/uploads/images/2018/1108/110635_f8045ae8_1305863.png" title="‘中国联通’">
                    </li>
                    <li>
                        <img alt="企业版案例 LOGO" src="https://images.gitee.com/uploads/images/2018/0912/115405_7b5d3256_1305863.png" title="比亚迪汽车">
                    </li>
                    <li>
                        <img alt="企业版案例 LOGO" src="https://gitee.com/enterprise_cases/ctrj.png" title="超图软件">
                    </li>
                    <li>
                        <img alt="企业版案例 LOGO" src="https://images.gitee.com/uploads/images/2018/0813/152316_19d3d1e8_62561.png" title="文思海辉">
                    </li>
                    <li>
                        <img alt="企业版案例 LOGO" src="https://gitee.com/enterprise_cases/zyhz.png" title="作业盒子">
                    </li>
                </ul>
                <div class="title-message">了解更多</div>
                <p>
                    <a href="https://gitee.com/enterprises?from=newproject" target="_blank">企业版介绍</a>
                </p>
                <p>
                    <a href="https://gitee.com/enterprise_contrast?from=newproject" target="_blank">社区版与企业版功能对比</a>
                </p>
            </div>
            <div class="clear"></div>
        </div>
        </div>
    </div>
    <footer>
        <div class="bottom-content">
               <img src="./bottom.png"/>
        </div>
        <div class="bottom-bar flex">
            <div class="bar-left">
                    本站带宽由 <a href="https://www.anchnet.com/" target="_blank" title="anchnet"><img alt="51idc" src="https://gitee.com/51idc.png"></a> 提供
            </div>
            <div class="bar-right">
                    <div class="copyright float-left">
                    <a href="http://www.miitbeian.gov.cn/">粤ICP备12009483号-8</a>
                            深圳市奥思网络科技有限公司版权所有
                    </div>
                    <a class="float-left">简体</a>
                    <a class="float-left">繁体</a>
            </div>
        </div>
    </footer>
</div>
</body>
<script src="https://unpkg.com/vue"></script>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            messageState: true,
            validate: {
                email: {//邮箱长度验证
                    title: '',
                    state: 'loading',
                    reg: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
                },
                validateCode: {//验证码
                    title: '',
                    state: 'loading'
                },
                emailCode: {//邮箱验证码
                    title: '',
                    state: 'loading'
                },
                nickName: {//昵称
                    title: '',
                    state: 'loading'
                },
                domain: {//域名
                    title: '',
                    state: 'loading',
                    reg: /^[a-zA-Z][a-zA-Z0-9_]-[a-zA-Z0-9]$/
                },
                secret: {//密码
                    title: '',
                    state: 'loading',
                    reg: /^[a-zA-Z0-9]{4,10}$/
                }
            },
            showCodeBtn: false,
            showSecret: false,//密码显示方式
            form: {
                email: '',
                validateCode: '',
                emailCode: null,
                nickName: '',
                domain: '',
                secret: '',
            },
            emailStr:'获取验证码',
            second: 300//剩余秒数
        },
        methods: {
            validata(id) {//验证
                this.validate[id].state = 'loading'
                switch (id) {
                    case "email"://邮箱验证
                        if (this.form.email.length === 0 || !this.validate['email'].reg.test(this.form.email)) {
                            this.validate[id].title = "邮箱格式有误"
                            this.validate[id].state = 'error'
                        } else {
                            this.validate[id].title = ""
                            this.validate[id].state = 'success'
                        }
                        break;
                    case "validateCode"://图形验证码
                        if (this.form.validateCode.length === 0) {
                            this.validate[id].title = "请输入正确的图形验证码"
                            this.validate[id].state = 'error'
                        } else {
                            this.validate[id].title = ""
                            this.validate[id].state = 'success'
                        }
                        break;
                    case "emailCode"://邮箱验证吗不为空
                     if (!this.form.emailCode||this.form.emailCode.length === 0) {
                            this.validate[id].title = "邮箱验证吗不能为空"
                            this.validate[id].state = 'error'
                        } else {
                            this.validate[id].title = ""
                            this.validate[id].state = 'success'
                        }
                        break;
                    case "nickName"://昵称验证
                        let nickNameArray = localStorage.getItem('nickNameArray');
                        if (this.form.nickName.length == 0) {
                            this.validate[id].title = "请填写用户名";
                            this.validate[id].state = 'error'
                        } else if (nickNameArray && nickNameArray.indexOf(this.form.nickName) != -1) {
                            this.validate[id].title = "该用户名已存在";
                            this.validate[id].state = 'error'
                        } else {
                            this.validate[id].title = ""
                            this.validate[id].state = 'success'
                        }
                        break;
                    case "domain":
                        if (this.form.domain.length === 0 || !this.validate['domain'].reg.test(this.form.domain)) {
                            this.validate[id].title = "地址只允许字母、数字或者下划线（_）、中划线（－），至少 2 个字符，必须以字母开头，不能以特殊字符结尾"
                            this.validate[id].state = 'error'
                        } else {
                            this.validate[id].title = ""
                            this.validate[id].state = 'success'
                        }
                        break;
                    default:
                        if (this.form.secret.length < 6) {
                            this.validate[id].title = "密码至少六位"
                            this.validate[id].state = 'error'
                        } else if (!this.validate['secret'].reg.test(this.form.secret)) {
                            this.validate[id].title = "密码需要包含数字与字母，长度6到32位"
                            this.validate[id].state = 'error'
                        } else {
                            this.validate[id].title = ""
                            this.validate[id].state = 'success'
                        }
                        break;


                }
            },
            getEmailCode() {//发送邮件
                if (this.validate.email.state!=='success'|| this.second!=300) return;
                var randomNum = Math.random().toString().slice(-6);
                let _this = this;
                localStorage.setItem('randomNum', randomNum)
                location = `mailto:${this.form.email}&subject=发送验证码&body=该验证码为${randomNum}`;
                var emailCodeTime = setInterval(function () {
                    _this.second--
                    if (_this.second === 0) {
                        clearInterval(emailCodeTime)
                        _this.showCodeBtn = false;
                        _this.second=300;
                        _this.emailStr="获取验证码"
                    }else{
                        _this.emailStr=`${_this.second}s`
                    }
                },1000)
            },
            showSecretFn(){//密码的显示与隐藏
            console.log(111)
                this.showSecret = !this.showSecret
            }
        }
    })
    // if()
</script>

</html>