2020-07-29

king

2020-07-29 ca51b8836f1578f81012cbe7ff63bf6061229823

2020-07-29

 package-lock.json

Diff too large

 package.json

@@ -5,7 +5,7 @@
  "author": "Lee",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --open --config build/webpack.dev.conf.js",
    "dev": "webpack-dev-server --inline --progress --open --config build/webpack.dev.conf.js --host 192.168.1.103",
    "start": "npm run dev",
    "unit": "jest --config test/unit/jest.conf.js --coverage",
    "e2e": "node test/e2e/runner.js",
@@ -16,7 +16,10 @@
    "axios": "^0.18.1",
    "dat.gui": "^0.7.6",
    "element-ui": "^2.10.0",
    "md5": "^2.2.1",
    "slider-verification-code": "^1.0.3",
    "vue": "^2.5.2",
    "vue-mobile-calendar": "^3.3.0",
    "vue-router": "^3.0.1"
  },
  "devDependencies": {

 src/components/footer.vue

@@ -55,11 +55,11 @@
    }
  },
  mounted () {
    let _hmt = _hmt || []
    let hm = document.createElement('script')
    hm.src = 'https://hm.baidu.com/hm.js?606321be5b903a6701a35388580dfa72'
    let s = document.getElementsByTagName('script')[0]
    s.parentNode.insertBefore(hm, s)
    // let _hmt = _hmt || []
    // let hm = document.createElement('script')
    // hm.src = 'https://hm.baidu.com/hm.js?606321be5b903a6701a35388580dfa72'
    // let s = document.getElementsByTagName('script')[0]
    // s.parentNode.insertBefore(hm, s)
  }
}
</script>

 src/components/header.vue

@@ -1,75 +1,78 @@
<template>
    <div class="header" :class="!isShow ? '' : 'h_height'">
        <div class="wrapper">
    <div class="header-wrap">
        <div class="pc-wrapper">
            <a class="logo"><img src="../img/index_logo.png" alt=""></a>
            <div class="nav" @mouseleave="leave()">
                <!-- 移动端header图标 -->
                <span class="homeico p_hide" @click="jump('Index')"><img src="../img/homeico.png" alt=""></span>
                <span class="navico" v-if="!isShow" @click="showNav"><img src="../img/navico.png" alt=""></span>
                <span class="navico" v-else @click="showNav"><img src="../img/close.png" alt=""></span>
                <!-- pc端菜单列表 -->
                <ul class="nav_ul" ref="nav_ul">
                    <li v-for="(menu, index) in menus" :key="index" :class="{' menu-active': curtab === index, ' menu-hover': cur === index}" @click="jump(menu.url)">
                        <span @mouseover="contrlSubmenu(index)">{{ menu.text }}</span>
                    </li>
                    <div class="list1 active" v-if="menus[1].flag">
                        <ul class="abloutMingKe_ul">
                            <li @click="jump(product.url, product.Id, 'submenu')" v-for="(product, index) in products" :key="index">{{product.text}}</li>
                        </ul>
                        <ul class="abloutMingKe_ul1">
                            <li @click="jump(solution.url, solution.Id, 'submenu')" v-for="(solution, index) in solutions" :key="index">{{solution.text}}</li>
                        </ul>
                    </div>
                    <div class="list2 active" v-if="menus[5].flag">
                        <ul class="abloutMingKe_ul2">
                            <li v-for="(submenu, index) in minkesoft" @click="jump(submenu.url, index, 'aboutUs')" :key="index">{{submenu.text}}</li>
                        </ul>
                    </div>
                </ul>
            <div class="nav">
                <el-menu :default-active="activeKey" mode="horizontal">
                    <el-menu-item index="home" @click="jumpview('Index')">首页</el-menu-item>
                    <el-submenu index="product" popper-class="header-dubble-menu">
                        <template slot="title">产品中心</template>
                        <div class="dubble-ul-wrap">
                            <div class="dubble-ul">
                                <el-menu-item :index="'product-p' + index" :key="index" @click="jumpview(product.url, product.Id, 'submenu')" v-for="(product, index) in products">{{product.text}}</el-menu-item>
                            </div>
                            <div class="dubble-ul">
                                <el-menu-item :index="'product-s' + index" :key="index" @click="jumpview(solution.url, solution.Id, 'submenu')" v-for="(solution, index) in solutions">{{solution.text}}</el-menu-item>
                            </div>
                        </div>
                    </el-submenu>
                    <el-menu-item index="successCase" @click="jumpview('SuccessCase')">成功案例</el-menu-item>
                    <el-menu-item index="partner" @click="jumpview('Partner')">渠道合作</el-menu-item>
                    <el-menu-item index="news" @click="jumpview('News')">新闻资讯</el-menu-item>
                    <el-submenu index="companyProfile" popper-class="header-menu">
                        <template slot="title"><span @click="jumpview('CompanyProfile', 'null')">关于明科</span></template>
                        <el-menu-item index="companyProfile-1" @click="jumpview('CompanyProfile', '#anchor-1')">企业文化</el-menu-item>
                        <el-menu-item index="companyProfile-2" @click="jumpview('CompanyProfile', '#anchor-2')">荣誉资质</el-menu-item>
                        <el-menu-item index="companyProfile-3" @click="jumpview('CompanyProfile', '#anchor-3')">联系明科</el-menu-item>
                        <el-menu-item index="companyProfile-4" @click="jumpview('joinMingKe')">加入明科</el-menu-item>
                    </el-submenu>
                    <el-menu-item index="word"><a href="http://mk9h.cn/a.asp?a=9CCB" target="_blank">文档中心</a></el-menu-item>
                </el-menu>
            </div>
            <div class="pc-tel">
                <img src="../img/add3.png" alt class="footer_img" />
                <span>400-189-1819</span>
            </div>
            <div class="register">
                <span @click="jumpview('signup')">注册</span>
                <a href="http://cloud.mk9h.cn/index.html" target="_blank">登录</a>
            </div>
        </div>

        <div :class="!isShow ? 'nav_ul' : 'plane'" class="hidden">
            <el-collapse accordion>
                <el-collapse-item>
                    <template slot="title">
                        <span class="title_s">产品中心</span>
                    </template>
                    <div>
                        <div class="menu3" :class="{'more active': index === products.length - 1, 'active': selectedsubId === product.Id}"
                            @click="jump(product.url, product.Id, 'submenu')" v-for="(product, index) in products" :key="index">{{product.text}}</div>
                        <div style="clear: both;"></div>
                    </div>
        <div class="mob-wrapper">
            <a class="logo"><img src="../img/index_logo.png" alt=""></a>
            <div class="nav">
                <span class="homeico" @click="jumpview('Index')"><img src="../img/homeico.png" alt=""></span>
                <span class="navico" v-if="!isShow" @click="isShow = !isShow"><img src="../img/navico.png" alt=""></span>
                <span class="navico" v-else @click="isShow = !isShow"><img src="../img/close.png" alt=""></span>
            </div>
            <div class="register">
                <span @click="jumpview('signup')">注册</span>
            </div>
            <div class="mob-menu" v-show="isShow">
                <el-menu :default-active="activeKey">
                    <el-submenu index="product" popper-class="header-dubble-menu">
                        <template slot="title">产品中心</template>
                        <el-menu-item-group>
                            <el-menu-item :index="'product-p' + index" :key="index" @click="jumpview(product.url, product.Id, 'submenu')" v-for="(product, index) in products">{{product.text}}</el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group>
                            <el-menu-item :index="'product-s' + index" :key="index" @click="jumpview(solution.url, solution.Id, 'submenu')" v-for="(solution, index) in solutions">{{solution.text}}</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    
                    <div class="menu3" :class="{'more active': index === solutions.length - 1, 'active': selectedsubId === solution.Id}"
                        @click="jump(solution.url, solution.Id, 'submenu')" v-for="(solution, index) in solutions" :key="index">{{solution.text}}</div>
                    <div style="clear: both;"></div>
                </el-collapse-item>
                <el-collapse-item class="el_coll">
                    <template slot="title">
                        <span @click="jump('SuccessCase')" class="title_s">成功案例</span>
                    </template>
                </el-collapse-item>
                <el-collapse-item class="el_coll">
                    <template slot="title">
                        <span @click="jump('Partner')" class="title_s">渠道合作</span>
                    </template>
                </el-collapse-item>
                <el-collapse-item class="el_coll">
                    <template slot="title">
                        <span @click="jump('News')" class="title_s">新闻资讯</span>
                    </template>
                </el-collapse-item>
                <el-collapse-item>
                    <template slot="title">
                        <span @click="jump('CompanyProfile')" class="title_s">关于明科</span>
                    </template>
                    <div class="menu2" @click="jump('CompanyProfile', 0, 'aboutUs')">企业文化</div>
                    <div class="menu2" @click="jump('CompanyProfile', 1, 'aboutUs')">荣誉资质</div>
                    <div class="menu2" @click="jump('CompanyProfile', 2, 'aboutUs')">联系明科</div>
                    <div class="menu2" @click="jump('JoinMingKe')">加入明科</div>
                </el-collapse-item>
            </el-collapse>
                    <el-menu-item index="successCase" @click="jumpview('SuccessCase')"><div class="simple">成功案例</div></el-menu-item>
                    <el-menu-item index="partner" @click="jumpview('Partner')"><div class="simple">渠道合作</div></el-menu-item>
                    <el-menu-item index="news" @click="jumpview('News')"><div class="simple">新闻资讯</div></el-menu-item>
                    <el-submenu index="companyProfile" popper-class="header-menu">
                        <template slot="title"><span @click="jumpview('CompanyProfile', 'null')">关于明科</span></template>
                        <el-menu-item index="companyProfile-1" @click="jumpview('CompanyProfile', '#anchor-1')">企业文化</el-menu-item>
                        <el-menu-item index="companyProfile-2" @click="jumpview('CompanyProfile', '#anchor-2')">荣誉资质</el-menu-item>
                        <el-menu-item index="companyProfile-3" @click="jumpview('CompanyProfile', '#anchor-3')">联系明科</el-menu-item>
                        <el-menu-item index="companyProfile-4" @click="jumpview('joinMingKe')">加入明科</el-menu-item>
                    </el-submenu>
                    <el-menu-item index="word"><a href="http://mk9h.cn/a.asp?a=9CCB" target="_blank">文档中心</a></el-menu-item>
                </el-menu>
            </div>
        </div>
    </div>
</template>
@@ -79,115 +82,34 @@
        name: 'Header',
        data() {
            return {
                activeKey: 'home',
                cur: -1,
                curtab: 0,
                isShow: false,
                selectedsubId: null,
                menus: [{
                        text: '首页',
                        url: 'Index',
                    },
                    {
                        text: '产品中心',
                        url: '',
                        flag: false,
                    },
                    {
                        text: '成功案例',
                        url: 'SuccessCase',
                    },
                    {
                        text: '渠道合作',
                        url: 'Partner'
                    },
                    {
                        text: '新闻资讯',
                        url: 'News'
                    },
                    {
                        text: '关于明科',
                        url: 'CompanyProfile',
                        flag: false,
                    }
                ],
                products: null,
                solutions: null,
                minkesoft: [{
                        text: '企业文化',
                        url: 'CompanyProfile'
                    },
                    {
                        text: '荣誉资质',
                        url: 'CompanyProfile'
                    },
                    {
                        text: '联系明科',
                        url: 'CompanyProfile'
                    },
                    {
                        text: '加入明科',
                        url: 'JoinMingKe'
                    }
                ]
                solutions: null
            }
        },
        methods: {
            jump (name, index, type) {
                if (!name) return
                this.selectedsubId = null
            jumpview (url, par, type) {
                let name = url.toLowerCase()
                let params = {}
                this.isShow = false
                name = name.toLowerCase()
                if (!type) { // 主页面跳转
                    let change = {
                        index: 0,
                        successcase: 2,
                        partner: 3,
                        news: 4,
                        companyprofile: 5
                    }
                    this.curtab = change[name]
                    if (name === 'companyprofile') { // 关于明科,锚点参数
                        this.$router.push({name: name, params: {hash: 'null'}})
                    } else {
                        this.$router.push({name: name})
                    }
                if (name === 'companyprofile') {
                    params.hash = par
                } else if (type === 'submenu') { // 产品中心子页面跳转
                    this.menus[1].flag = false
                    this.menus[5].flag = false
                    this.curtab = 1
                    this.selectedsubId = index
                    this.$router.push({name: name, params: {menuId: index}})
                } else if (type === 'aboutUs') { // 关于明科子页面跳转
                    this.curtab = 5
                    if (index === 3) { // 加入明科
                        this.$router.push({name: name})
                    } else {
                        this.$router.push({name: 'companyprofile', params: {hash: `#anchor-${index + 1}`}})
                    this.activeKey = 'product'
                    params.menuId = par
                } else if (name === 'signup') {
                    if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
                        name = 'mobsignup'
                    }
                    window.open('#/' + name)
                    return
                }
				
            },
            showNav () {
                this.isShow = !this.isShow
                this.$refs.nav_ul.style.left = this.isShow ? (0 + 'px') : (-1000 + 'px')
            },
            contrlSubmenu (index) {
                this.cur = index
                if (index == 1) {
                    this.menus[index].flag = !this.menus[index].flag
                    this.menus[5].flag = false
                } else if (index == 5) {
                    this.menus[index].flag = !this.menus[index].flag
                    this.menus[1].flag = false
                } else {
                    this.menus[1].flag = false
                    this.menus[5].flag = false
                }
            },
            leave () {
                this.cur = -1
                this.menus[1].flag = false
                this.menus[5].flag = false

                this.$router.push({name: name, params})
            },
            load () {
                this.Service.getBaseData('Web_Index_GetData').then(res => {
@@ -236,11 +158,11 @@
</script>

<style lang="less" scoped>
    .header {
    .header-wrap {
        background: #282830;
        position: fixed;
        width: 100%;
        /*padding: 0.08rem 0;*/
        padding: 0.08rem 0;
        -webkit-transition: 0.3s;
        -moz-transition: 0.3s;
        transition: 0.3s;
@@ -250,8 +172,16 @@
        z-index: 2000;
        top: 0;

        .wrapper {
        .pc-wrapper {
            width: 1300px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            position: relative;
            align-items: center;
        }
        .mob-wrapper {
            display: none;
            justify-content: space-between;
            position: relative;
            align-items: center;
@@ -259,7 +189,6 @@

        .logo {
            float: left;

            img {
                height: 0.4rem;
            }
@@ -267,337 +196,145 @@

        .nav {
            float: right;
        }

            .navico {
                width: 0.45rem;

                img {
                    height: 0.39rem;
                }
        .pc-tel {
            display: block;
            width: 155px;
            img {
                width: 20px;
                height: 20px;
                vertical-align: text-bottom;
            }

            .homeico {
                img {
                    height: 0.5rem;
                    margin-right: 0.46rem;
                }
            span {
                font-size: 0.16rem;
                color: #fff;
                cursor: default;
                padding: 0 0.1rem;
            }
        }
        .register {
            flex: 0.3;
            white-space: nowrap;
            span, a {
                display: inline-block;
                font-size: 0.16rem;
                color: #ffffff;
                cursor: pointer;
                padding: 0px;
            }
            a {
                margin-left: 10px;
            }
        }

        @media (min-width: 751px) {
            .list3{
                right: 5.8rem;
                width: 7rem;
                height: 90vh;
            }
            .list33{
                right: -1.5rem;
                width: 115%;
                height: 90vh;
            }
            .list4{
                right: -1.95rem;
                height: 90vh;
            }
            .list5{
                right: 1.17rem;
                width: 4rem;
                height: 90vh;
            }
            .plane {
                display: none;
            }

            .hidden {
                display: none;
            }

            li {
                float: left;
        li {
            line-height: 0.68rem;
            height: 0.68rem;
            > div.el-submenu__title {
                line-height: 0.68rem;
                height: 0.68rem;
            }

            span {
                font-size: 0.18rem;
                color: #fff;
                cursor: pointer;
                padding: 0 0.22rem;
            }
        }
		
        .abloutMingKe_ul,
        .abloutMingKe_ul1 {
            width: 1.8rem;
            position: absolute;
            left: -0.8rem;
            transition: all .3s ease 0s;
            min-height: 1.5rem;
            padding-bottom: 0.2rem;
            background-color: #212020;
            z-index: 999;

            li {
                width: 100%;
                float: none;
                color: #fff;
                font-size: 0.14rem;
                padding: 0 0.22rem;
                line-height: 0.29rem;
                height: 0.29rem;
            }

            li:last-child {
                text-align: right;
            }

            li:hover {
                opacity: 0.8;
                cursor: pointer;
            }
        }

        .abloutMingKe_ul1 {
            width: 1.9rem;
            margin-left: 1.8rem;
        }

        .abloutMingKe_ul {
            border-right: 1px solid #999999;

            li:last-child {
                // margin-top: .3rem;
                text-align: right;
            }
        }

        .abloutMingKe_ul2 {
            width: 1.16rem;
            height: 1.3rem;
            position: absolute;
            top:-0.08rem;
            transition: all .3s ease 0s;
            background-color: #212020;

            li {
                width: 100%;
                float: none;
                color: #fff;
                font-size: 0.14rem;
                padding: 0 0.22rem;
                line-height: 0.29rem;
                height: 0.29rem;
                text-align: center;
            }

            li:hover {
                cursor: pointer;
                opacity: 0.8;
            }
        }
    }

    @media (max-width: 750px) and (min-width: 0) {
        .title_s {
            font-size: 0.35rem;
            width: 100%;
            padding-left: 42%;
        }
        .header .logo img {
            height: 0.55rem;
        }

        .plane {
            display: block;
            height: 100%;
            background-color: #282830;
            padding: 0.3rem 0 1rem;
            overflow-y: scroll;
        }

        .nav_ul {
            display: none;
        }

        .header {
            // height: 100%;
            // background-color: #303030;
            padding-bottom: 0.2rem;
        }

        .h_height {
            height: 100%;
        }

        .h_none {
            display: none;
        }

        .header .wrapper {
            padding-top: 0.3rem;
        }

        .header .abloutMingKe_ul2 {
            width: auto;
            height: auto;
        }

        .header .abloutMingKe_ul2 li {
            background-color: black;
            height: 0.5rem;
            line-height: 0.5rem;
        }

        .header .nav .nav_ul {
            position: fixed;
            width: 100%;
            left: -10rem;
            top: 1.29rem;
            bottom: 0;
            background: #212020;
            z-index: 8888;
            height: auto;

            >li {
                text-align: center;
                float: none;
                text-align: center;
                line-height: inherit;
                height: auto;

    @media (max-width: 1366px) and (min-width: 750px) {
        .header-wrap {
            .pc-wrapper {
                width: 90%;
            }
            .pc-tel {
                img {
                    width: 18px;
                    height: 18px;
                }
                span {
                    display: block;
                    font-size: 0.42rem;
                    border-bottom: 1px solid #fff;
                    color: #fff;
                    padding: 0.44rem 0;
                    font-size: 0.15rem;
                }
            }

            >li:first-child {
                display: none;
            .register {
                span, a {
                    font-size: 0.15rem;
                }
            }
        }
        .header .nav .navico,
        .header .nav .homeico {
            display: inline-block;
            padding: 0;
        }
        .abloutMingKe_ul,
        .abloutMingKe_ul1 {
            background: #303030;

            li {
                border: none;
                padding: .2rem .6rem .2rem 1rem;
                text-align: left;
                color: #7C7C7C;
            }

            li:first-child {
                color: #fff;
            }

            li:last-child {
                text-align: right;
            }
        }

        .abloutMingKe_ul {
            border-bottom: #fff 1px solid;
        }

        .menu2 {
            text-align: center;
            line-height: 0.75rem;
            font-size: 0.32rem;
        }

        .menu3 {
            line-height: 0.75rem;
            padding-left: 30%;
            color: #7C7C7C;
            font-size: 0.32rem;

            img {
                width: 0.2rem;
                margin-top: -0.06rem;
                margin-left: 0.2rem;
            }
        }
        .menu3.active {
            color: #ffffff;
        }
        .more {
            float: right;
            padding-right: 0.5rem;
            margin-bottom: 0.1rem;
        }
    }
    .list1 {
        display: flex;
        opacity: 0;
        height: auto;
        width: 5rem;
        position: absolute;
        top: 0.65rem;
        right: 0;
    }
    .list2 {
        opacity: 0;
        width: 2rem;
        height: auto;
        position: absolute;
        top: 0.76rem;
        right: -0.84rem;
    }
    .active {
        opacity: 1;
    }
    .menu-hover {
        background: #232323;
    }
    .menu-active {
        background: #212020;
    }
</style>
<style>
    .el-collapse {
        border-top: 0;
    }

    .el-collapse-item__header {
        height: 1.1rem;
        line-height: 1.1rem;
        background-color: #303030;
        border-color: darkgray;
        color: #fff;
    }

    .el-collapse-item__content {
        background-color: #303030;
        color: #fff;
    }

    .el-collapse-item__wrap {
        border-color: darkgray;
    }

    .el-collapse-item__arrow {
        margin-right: 2rem;
    }

    .el-collapse-item__header.is-active {
        background-color: #49A2DD;
    }

    .el-collapse-item__content {
        padding-bottom: 0;
    }

    @media (max-width: 750px) and (min-width: 0) {
        .el_coll .el-collapse-item__arrow {
            display: none;
        .header-wrap {
            .pc-wrapper {
                display: none;
            }
            .mob-wrapper {
                display: flex;
                padding-top: .3rem;
                width: 94%;
                margin: 0 auto;
            }

            .logo img {
                height: 0.55rem;
            }
            .nav {
                flex: 1;
                text-align: right;
                .navico {
                    display: inline-block;
                    padding: 0;
                    width: 0.45rem;
                    img {
                        height: 0.35rem;
                    }
                }
                .homeico {
                    display: inline-block;
                    padding: 0;
                    img {
                        height: 0.45rem;
                        margin-right: 0.4rem;
                    }
                }
            }
            .register {
                text-align: right;
                span {
                    font-size: 0.3rem;
                }
            }
            li {
                height: unset;
                line-height: unset;
            }
            .mob-menu > .el-menu > li {
                border-bottom: 1px solid #ffffff;
                > div.simple {
                    height: 56px;
                    line-height: 56px;
                }
                > a {
                    display: inline-block;
                    height: 56px;
                    line-height: 56px;
                }
                > div.el-submenu__title {
                    height: 56px;
                line-height: 56px;
                }
            }
            .mob-menu {
                position: fixed;
                top: 1rem;
                left: 0px;
                right: 0px;
                bottom: 0px;
                background-color: #282830;
                overflow-y: auto;
                padding-bottom: 50px;
            }
        }

        .header-wrap {
            padding-bottom: 0.2rem;
        }
    }
</style>

 src/css/index.css

@@ -110,4 +110,257 @@
  #newBridge .nb-icon-wrap-5 {
    display: none;
  }
}
}

.sign-form-wrap .el-button--small {
  padding: 9px 10px;
}
.sign-form-wrap .el-tabs__nav-wrap.is-left::after {
  height: 0;
}
.sign-form-wrap .el-tab-pane {
  padding-right: 120px;
}
.sign-form-wrap .el-tabs__active-bar {
  height: 30px!important;
  top: 5px!important;
}
.sign-form-wrap .el-input {
  width: 350px;
  margin: 0 auto;
  margin-bottom: 20px;
}
.sign-form-wrap .el-input--small .el-input__inner {
  height: 40px;
  line-height: 40px;
}
.sign-form-wrap .el-input .el-input__inner {
  background: #fafafa;
  border-radius: 4px;
}
.sign-form-wrap .el-input .el-input-group__prepend + .el-input__inner {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}
.sign-form-wrap .el-input .el-input-group__append {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.sign-form-wrap .el-input.ver-code .el-input__inner {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}
.sign-form-wrap .el-input .el-input__inner[type="text"] + .el-input__suffix .el-input__clear, .sign-form-wrap .el-input .el-input__inner[type="text"] + .el-input__suffix .el-input__clear:hover {
  color: #409EFF;
}
.sign-form-wrap .el-input .el-input__inner::placeholder {
  font-size: 13px;
}
.sign-form-wrap .el-input.ver-code .el-button.is-disabled, .sign-form-wrap .el-input.ver-code .el-button.is-disabled:focus, .sign-form-wrap .el-input.ver-code .el-button.is-disabled:hover {
  background-color: transparent;
  opacity: 0.7;
}
.sign-form-wrap .el-input .el-input__inner:focus {
  border-color: #409EFF;
}

/* 移动端 */
.sign-mob-form-wrap .el-input {
  border-bottom: 1px solid #DCDFE6;
}
.sign-mob-form-wrap .el-input--small .el-input__inner {
  border: 0;
  font-size: 14px;
}
.sign-mob-form-wrap .el-input--small .el-input__inner::placeholder {
  font-size: 14px;
}
.sign-mob-form-wrap .el-input-group__append {
  background: transparent;
  border: 0;
}
.sign-mob-form-wrap .calendar-birthday .m-calendar .m-week-header {
  height: 30px;
}
.sign-mob-form-wrap .calendar-birthday .m-calendar .m-week-header .m-week-day {
  font-size: 12px;
  line-height: 30px;
}

.app-drag {
  box-shadow: 0px 0px 1px #d9d9d9;
}
.app-drag .slider {
  border: 0!important;
}

.header-wrap .el-menu.el-menu--horizontal {
  border: 0;
  background: transparent;
}
.header-wrap .el-menu--horizontal>.el-menu-item {
  border-bottom: 0;
  color: #ffffff;
  font-size: .18rem;
  cursor: pointer;
  padding: 0 .22rem;
}

.header-wrap .el-menu--horizontal>.el-menu-item:hover {
  background: #232323;
  color: #ffffff;
}
.header-wrap .el-menu--horizontal>.el-menu-item.is-active {
  background: #212020;
}
.header-wrap .el-menu--horizontal .el-menu-item:not(.is-disabled):focus, .header-wrap .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
  color: #ffffff;
}
.header-wrap .el-menu--horizontal>.el-submenu {
  border-bottom: 0;
  color: #ffffff;
}
.header-wrap .el-menu--horizontal>.el-submenu .el-submenu__title {
  line-height: 0.68rem;
  height: 0.68rem;
  color: #ffffff;
  border: 0;
  font-size: .18rem;
  cursor: pointer;
  padding: 0 .22rem;
}
.header-wrap .el-menu--horizontal>.el-submenu .el-submenu__title .el-submenu__icon-arrow {
  display: none;
}
.header-wrap .el-menu--horizontal>.el-submenu:hover {
  background: #232323;
  color: #ffffff;
}
.header-wrap .el-menu--horizontal>.el-submenu.is-active {
  background: #212020;
}
.header-wrap .el-submenu.is-active .el-submenu__title, .header-wrap .el-menu--horizontal>.el-submenu.is-active .el-submenu__title {
  border: 0;
}

.header-wrap .el-menu--horizontal>.el-submenu:focus .el-submenu__title, .header-wrap .el-menu--horizontal>.el-submenu:hover .el-submenu__title {
  color: #ffffff;
  background: #232323;
}

.header-menu .el-menu {
  background: #212020;
  min-width: 160px;
}
.header-menu .el-menu .el-menu-item {
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  font-size: .14rem;
  padding: 0 .22rem;
}
.header-menu.el-menu--horizontal .el-menu .el-menu-item.is-active, .header-menu.el-menu--horizontal .el-menu .el-menu-item:not(.is-disabled):hover {
  color: #ffffff;
}

.header-dubble-menu .el-menu {
  background: #212020;
}
.header-dubble-menu .dubble-ul-wrap {
  display: flex;
  height: auto;
}
.header-dubble-menu .dubble-ul {
  width: 1.8rem;
  min-height: 1.5rem;
  padding-bottom: 10px;
  background-color: #212020;
  z-index: 999;
}
.header-dubble-menu .dubble-ul + .dubble-ul {
  border-left: 1px solid rgba(255, 255, 255, 0.65);
}
.header-dubble-menu .dubble-ul-wrap .dubble-ul .el-menu-item {
  padding: 0 .22rem;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
}
.header-dubble-menu.el-menu--horizontal .el-menu .el-menu-item.is-active,
.header-dubble-menu.el-menu--horizontal .el-menu .el-menu-item:not(.is-disabled):hover {
  color: #ffffff;
}
.header-dubble-menu .dubble-ul li {
  width: 100%;
  color: #fff;
  font-size: 0.14rem;
  padding: 0 0.22rem;
  line-height: 0.29rem;
  height: 0.29rem;
}

.header-dubble-menu li:last-child {
  text-align: right;
}

.header-dubble-menu li:hover {
  cursor: pointer;
}

@media (max-width: 1366px) and (min-width: 750px) {
  .header-wrap .el-menu--horizontal>.el-menu-item {
    padding: 0 .15rem;
    font-size: .16rem;
  }
  .header-wrap .el-menu--horizontal>.el-submenu .el-submenu__title {
    padding: 0 .15rem;
    font-size: .16rem;
  }
}
@media (max-width: 750px) and (min-width: 0) {
  .header-wrap .mob-wrapper .el-menu {
    background: #303030;
    color: #ffffff;
  }
  .header-wrap .mob-wrapper .el-menu .el-menu-item, .header-wrap .mob-wrapper .el-menu .el-menu-item:hover {
    color: #ffffff;
    font-size: .35rem;
    background: #303030;
  }
  .header-wrap .mob-wrapper .el-menu .el-menu-item a {
    color: #ffffff;
    font-size: .35rem;
  }
  .header-wrap .mob-menu .el-submenu .el-submenu__title, .header-wrap .mob-menu .el-submenu .el-submenu__title:hover {
    color: #ffffff;
    font-size: .35rem;
    background: #303030;
  }
  .header-wrap .mob-menu .el-submenu .el-menu-item-group .el-menu-item {
    height: 40px;
    line-height: 40px;
    font-size: 0.28rem;
    color: rgba(255, 255, 255, 0.85);
  }
  .header-wrap .mob-menu .el-submenu .el-menu .el-menu-item {
    height: 40px;
    line-height: 40px;
    font-size: 0.28rem;
    color: rgba(255, 255, 255, 0.85);
  }
  .header-wrap .mob-menu .el-submenu .el-menu-item-group .el-menu-item:last-child {
    text-align: right;
  }
  .header-wrap .mob-menu > .el-menu > li.is-opened > div.el-submenu__title {
    border-bottom: 1px solid #ffffff;
    background: #409EFF;
  }
  .header-wrap .mob-menu > .el-menu  div.el-submenu__title i {
    color: #ffffff;
    font-size: 0.35rem;
  }
}

@media (min-width: 1550px) {
  .sign-form-wrap .el-input {
    width: 400px;
  }
}

 src/css/reset.css

@@ -1,41 +1,41 @@
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
    font-size: 100px;
    height: 100%;
  font-size: 100px;
  height: 100%;
}

body {
    width: 100%;
    font-size: 14px;
    background: #ffffff;
    height: 100%;
    overflow-x: hidden;
  width: 100%;
  font-size: 14px;
  background: #ffffff;
  height: 100%;
  overflow-x: hidden;
}

ul,
ol,
li {
    list-style: none;
  list-style: none;
}

a {
    text-decoration: none;
    color: black;
  text-decoration: none;
  color: black;
}

img {
    max-width: 100%;
    border: 0;
    vertical-align: middle;
  max-width: 100%;
  border: 0;
  vertical-align: middle;
}

p {
    -webkit-box-orient: vertical;
  -webkit-box-orient: vertical;
}

h1,
@@ -44,5 +44,21 @@
h4,
h5,
h6 {
    font-weight: normal;
  font-weight: normal;
}

.el-message-box__header {
  padding: 10px 15px 10px;
}
.el-message-box {
  width: unset;
}
.el-message-box__headerbtn {
  display: none;
}
.el-message-box__btns {
  padding: 15px 15px 5px;
}
.el-message-box__btns .el-button {
  border-radius: 5px;
}

 src/img/index_logo.png

 src/img/mingke_logo.png

 src/img/tel1.png

 src/main.js

@@ -13,7 +13,6 @@
import '@/css/fonts.css'
import '@/js/main.js'
import Service from '@/store/service.js'

import Header from "@/components/header.vue";
Vue.component(Header.name, Header); // 头部组件

@@ -21,6 +20,16 @@
Vue.component(Footer.name, Footer); // 底部组件

// import '!style-loader!css-loader!less-loader!./less/base.less'
if (!localStorage.getItem('SessionUid')) {
  localStorage.setItem('SessionUid', (() => {
    let uuid = []
    let _options = '0123456789abcdefghigklmnopqrstuv'
    for (let i = 0; i < 32; i++) {
      uuid.push(_options.substr(Math.floor(Math.random() * 0x20), 1))
    }
    return uuid.join('')
  })())
}

Vue.config.productionTip = false
Vue.config.devtools = true
@@ -30,6 +39,11 @@
Vue.use(ElementUi);
Vue.use(Vuex);

window.GLOB = {
  appkey: '202004041613277377A6A2456D34A4948AE84',
  rduri: 'http://sso.mk9h.cn/webapi/dostars'
}

/* eslint-disable no-new */
new Vue({
  el: '#app',

 src/router/index.js

@@ -31,6 +31,12 @@
// 解决方案
const CaseSolution = resolve => require(['@/views/successCase/caseSolution'], resolve)
const center = resolve => require(['@/views/successCase/center'], resolve)
// 注册开发者账号
const SignUpIndex = resolve => require(['@/views/signup'], resolve)
const SignUp = resolve => require(['@/views/signup/signup'], resolve)
const MobSignUp = resolve => require(['@/views/signup/mobsignup'], resolve)
const signSuccess = resolve => require(['@/views/signup/signsuccess'], resolve)
const forgotPassword = resolve => require(['@/views/signup/forgotpwd'], resolve)

const router = new Router({
  routes: [{
@@ -113,6 +119,31 @@
        component: center
      }
    ]
  }, {
    path: '/signup',
    component: SignUpIndex,
    children: [
      {
        path: '/signup',
        name: 'signup',
        component: SignUp
      },
      {
        path: '/mobsignup',
        name: 'mobsignup',
        component: MobSignUp
      },
      {
        name: 'signSuccess',
        path: '/signSuccess/:type',
        component: signSuccess
      },
      {
        name: 'forgotPwd',
        path: '/forgotPwd',
        component: forgotPassword
      }
    ]
  }]
})


 src/store/service.js

@@ -1,6 +1,9 @@
import axios from 'axios'
import md5 from 'md5'

axios.defaults.baseURL = '/webapi/dostar'
import Utils from '@/utils'

// axios.defaults.baseURL = '/webapi/dostar'
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
axios.defaults.crossDomain = true
axios.defaults.withCredentials = true
@@ -9,7 +12,7 @@
  // 在发送请求之前做些什么
  config.data = config.data || {}
  config.method = 'post'
  config.data.userid = ''
  config.data.userid = config.data.userid || ''
  config.data = JSON.stringify(config.data)
  return config
}, (error) => {
@@ -43,6 +46,7 @@
    } else {
      return new Promise(resolve => {
        axios({
          url: '/webapi/dostar',
          data: {
            func: DBS
          }
@@ -54,6 +58,61 @@
        })
      })
    }
  }

  /**
   * @description 游客登录
   */
  loginSSO () {
    let param = {
      func: 's_visitor_login',
      timestamp: Utils.getCurrentTime(),
      SessionUid: localStorage.getItem('SessionUid'),
      TypeCharOne: 'pc'
    }
    
    param.LText = md5(window.btoa(localStorage.getItem('SessionUid') + param.timestamp))
    param.secretkey = md5(param.LText + 'mingke' + param.timestamp)
    param.appkey = window.GLOB.appkey
    param.rduri = window.GLOB.rduri.replace('webapi/dostars', 'webapi/dologon')

    return axios({
      url: '/webapi/dostar',
      data: param
    })
  }

  /**
   * @description 转接调用sso系统的dostars
   * @param {String} param 请求参数
   */
  setSSORequest (param) {
    param.appkey = window.GLOB.appkey
    param.rduri = window.GLOB.rduri

    param.userid = sessionStorage.getItem('UserID') || ''
    param.SessionUid = localStorage.getItem('SessionUid') || ''
    param.LoginUID = sessionStorage.getItem('LoginUID') || ''

    param.nonc = Utils.getuuid()
    
    let keys = Object.keys(param).sort()
    let values = ''
    keys.forEach(key => {
      if (key === 'rduri' || key === 't') return
      if (typeof(param[key]) === 'object') {
        values += key + JSON.stringify(param[key])
      } else {
        values += key + param[key]
      }
    })
    param.sign  = md5(values)
    param.t = new Date().getTime()

    return axios({
      url: '/webapi/dostar',
      data: param
    })
  }

  /**
@@ -69,6 +128,7 @@
    } else {
      return new Promise(resolve => {
        axios({
          url: '/webapi/dostar',
          data: param
        }).then(res => {
          if (res.status) {
@@ -86,6 +146,7 @@
   */
  setSubmit (param) {
    return axios({
      url: '/webapi/dostar',
      data: param
    })
  }

 src/utils/index.js

New file
@@ -0,0 +1,32 @@
export default class Utils {
  constructor () {

  }

  /**
   * @description 获取当前时间
   */
  static getCurrentTime () {
    let _date = new Date()
    let month = _date.getMonth() + 1
    let day = _date.getDate()
    let hour = _date.getHours()
    let minute = _date.getMinutes()
    let second = _date.getSeconds()
    
    return `${_date.getFullYear()}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day} ${hour < 10 ? '0' + hour : hour}:${minute < 10 ? '0' + minute : minute}:${second < 10 ? '0' + second : second}.000`
  }

  /**
   * @description 获取uuid
   */
  static getuuid () {
    let uuid = []
    let _options = '0123456789abcdefghigklmnopqrstuv'
    for (let i = 0; i < 32; i++) {
      uuid.push(_options.substr(Math.floor(Math.random() * 0x20), 1))
    }
    
    return uuid.join('')
  }
}

 src/views/home/index.vue

@@ -15,6 +15,10 @@
                <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2529499151&site=qq&menu=yes">
                    <img class="img" src="@/img/QQ.png" alt />
                </a>
                <a class="tel" href="tel:400-189-1819">
                <!-- <a class="tel" href="javascript:;" v-on:click="tel"> -->
                    <img class="img" src="@/img/tel1.png" alt />
                </a>
            </div>
        </div>
        <el-backtop :bottom="40" >
@@ -31,7 +35,16 @@
            }
        },
        methods: {

            tel () {
                this.$confirm('确认拨打电话 400-189-1819 吗?', '', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
                    window.location.href = 'tel://400-189-1819'
        }).catch(() => {
       
        })
            }
        },
        watch:{ //监听路由
            $route(to, from) {
@@ -63,6 +76,9 @@
            margin-top: 0.05rem;
            border: 1px solid #00A5E3;
        }
        .tel {
            display: none;
        }
    }
    .el-backtop {
        z-index: 1005;
@@ -82,7 +98,7 @@
        .information {
            width: 0.6rem;
            height: 0.6rem;
            bottom: 2.2rem;
            bottom: 2.8rem;
            z-index: 100;

            .img {
@@ -90,6 +106,9 @@
                height: 0.6rem;
                margin-top: 0.05rem;
            }
            .tel {
                display: inline-block;
            }
        }
    }
</style>

 src/views/partner/index.vue

@@ -364,11 +364,11 @@
            min-width: 2rem;
            padding: 0.2rem;
        }
        .el-input__inner {
        .main .el-input__inner {
            color: #fff !important;
            background-color: #303940 !important;
        }
        .el-textarea__inner {
        .main .el-textarea__inner {
            background-color: #303940 !important;
        }
    }

 src/views/signup/forgotpwd.vue

New file
@@ -0,0 +1,403 @@
<template>
    <div class="sign-forgot-wrap sign-form-wrap">
        <header>
            找回密码
        </header>
        <div class="center" v-if="view === 'account'">
            <div class="tip">
                输入明科账号<br />
                <span>您注册时使用的手机号或邮箱</span>
            </div>
            <div>
                <el-input size="small" placeholder="手机号/邮箱地址" @input="valueChange()" v-model="account"></el-input>
            </div>
            <div class="slider-block">
                <SliderVerificationCode v-model="pass" @change="handleChange" />
            </div>
            <div>
                <el-button class="sub-button" type="primary" @click="nextStep()" :disabled="nextdisabled">下一步</el-button>
            </div>
        </div>
        <div class="center" v-else-if="view === 'vercode'">
            <div class="tip" v-if="signtype === 'phone'">
                <p>手机号找回密码</p>
                <span>若您的手机号<span v-text="account.substr(0, 3) + '****' + account.substr(7)"></span>现在可接收短信，请点击获取验证码。</span>
            </div>
            <div class="tip" v-if="signtype === 'email'">
                <p>邮箱找回密码</p>
                <span>若您的邮箱<span v-text="account"></span>现在可接收邮件，请点击获取验证码。</span>
            </div>
            <div>
                <el-input size="small" class="ver-code" @input="codeValueChange()" placeholder="请输入验证码" v-model="verCode">
                    <el-button slot="append" size="small" @click="getVerCode()" :disabled="verCodeDisabled"><span v-text="verCodeTip"></span></el-button>
                </el-input>
            </div>
            <div>
                <el-button class="sub-button" type="primary" @click="nextStepPwd()" :disabled="nextdisabled">下一步</el-button>
            </div>
        </div>
        <div class="center" v-else-if="view === 'password'">
            <div class="tip">
                <p>明科账号:</p>
                <span v-if="signtype === 'phone'" v-text="account.substr(0, 3) + '****' + account.substr(7)"></span>
                <span v-if="signtype === 'email'" v-text="account"></span>
            </div>
            <div class="password-wrap">
                <el-input placeholder="密码" size="small" @input="valChange()" :maxlength="12" :show-password="true" v-model="password"></el-input>
                <el-tooltip class="item" effect="dark" content="密码最大为12位，可以使用数字、字母及!@#$%&*()_" placement="top">
                    <i class="el-icon-info"></i>
                </el-tooltip>
            </div>
            <div>
                <el-input placeholder="确认密码" size="small" @input="valChange()" :maxlength="12" :show-password="true" v-model="confirmPassword"></el-input>
            </div>
            <div>
                <el-button class="sub-button" type="primary" @click="submitLogin()" :disabled="nextdisabled" :loading="subloading">提交</el-button>
            </div>
        </div>
    </div>
</template>

<script>
    import Utils from '@/utils'
    import md5 from 'md5'
	
    let timer = null

    export default {
        data() {
            return {
                view: 'account',
                signtype: '',
                phoneNo: '',
                account: '',
                verCode: '',
                verCodeTip: '获取验证码',
                verCodeDisabled: false,
                delay: 60,
                password: '',
                birthday: '',
                confirmPassword: '',
                nextdisabled: true,
                subloading: false,
                pass: false
            }
        },
        methods: {
            handleChange () {
                let valid = true
                if (!this.account) {
                    valid = false
                } else if (!this.pass) {
                    valid = false
                }
				
                if (valid) {
                    this.nextdisabled = false
                } else {
                    this.nextdisabled = true
                }
            },
            valueChange () {
                let valid = true
                if (!this.account) {
                    valid = false
                } else if (!this.pass) {
                    valid = false
                }
				
                if (valid) {
                    this.nextdisabled = false
                } else {
                    this.nextdisabled = true
                }
            },
            nextStep () {
                if (!this.account) return

                if (/^1[3456789]\d{9}$/.test(this.account)) {
                    this.signtype = 'phone'
                } else if (/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(this.account)) {
                    this.signtype = 'email'
                } else {
                    this.$message({
                        message: '手机号或邮箱地址格式错误，请重填！',
                        type: 'warning'
                    })
                    return
                }
                this.pass = false
                this.view = 'vercode'
                this.nextdisabled = true
            },
            getVerCode () {
                let error = false
                let param = null

                if (this.signtype !== 'email') {
                    param = {
                        func: 'MSN_sms_send_code',
                        send_type: 'reset_pwd',
                        mob: this.account,
                        timestamp: Utils.getCurrentTime(),
                        ID: '20200522115033857N9C7S41G77G31OT52QN'
                    }

                    param.LText = md5(`${this.account}mingke${window.GLOB.appkey}${param.timestamp}`)
                } else {
                    param = {
                        func: 'MSN_email_send_code',
                        send_type: 'reset_pwd',
                        email: this.account,
                        timestamp: Utils.getCurrentTime(),
                        ID: '20200518162835149CE25P520L0UODMVQ5FM'
                    }

                    param.LText = md5(`${window.GLOB.appkey}mingke${this.account}${param.timestamp}`)
                }

                param.secretkey = md5(`${param.LText}mingke${param.timestamp}`)

                this.verCodeDisabled = true
                this.Service.setSSORequest(param).then(res => {
                    if (res.status) {
                        this.verCodeTip = '获取验证码(60s)'
                        timer = setTimeout(this.resetVerCodeTip, 1000)
                    } else {
                        this.verCodeDisabled = false
                        this.$message({
                            message: res.message,
                            type: 'error'
                        })
                    }
                })
            },
            codeValueChange () {
                if (!this.verCode) {
                    this.nextdisabled = true
                } else {
                    this.nextdisabled = false
                }
            },
            nextStepPwd () {
                this.view = 'password'
                this.nextdisabled = true
            },
            valChange () {
                let valid = true

                if (!this.password) {
                    valid = false
                } else if (!this.confirmPassword) {
                    valid = false
                }

                if (valid) {
                    this.nextdisabled = false
                } else {
                    this.nextdisabled = true
                }
            },
            resetVerCodeTip () {
                if (this.delay > 1) {
                    this.delay--
                    this.verCodeTip = `获取验证码(${this.delay}s)`
                    timer = setTimeout(this.resetVerCodeTip, 1000)
                } else {
                    this.verCodeDisabled = false
                    this.delay = 60
                    this.verCodeTip = '获取验证码'
                }
            },
            submitLogin () {
                if (!this.password) {
                    this.$message({
                        message: '请输入密码！',
                        type: 'warning'
                    })
                    return
                } else if (!/^[0-9a-zA-Z!@#$%^&*()_]*$/.test(this.password)) {
                    this.$message({
                        message: '密码只可以使用数字、字母及!@#$%&*()_。',
                        type: 'warning'
                    })
                    return
                } else if (this.password !== this.confirmPassword) {
                    this.$message({
                        message: '两次输入密码不一致！',
                        type: 'warning'
                    })
                    return
                }

                let param = {
                    func: 'msn_user_reset_pwd',
                    mob: this.signtype === 'phone' ? this.account : '',
                    email: this.signtype === 'email' ? this.account : '',
                    check_code: this.verCode,
                    pwd: this.password,
                    Type_reg: this.signtype !== 'email' ? 'mob' : 'email',
                    timestamp: Utils.getCurrentTime()
                }

                param.LText = md5(`${window.GLOB.appkey}mingke${this.account}`)
                param.secretkey = md5(`${param.LText}mingke${param.timestamp}`)

                this.nextdisabled = true
                this.subloading = true
                this.Service.setSSORequest(param).then(res => {
                    if (res.status) {
                        this.nextdisabled = false
                        this.subloading = false
                        this.$router.push({name: 'signSuccess', params: {type: 'forgetpwd'}})
                    } else {
                        this.nextdisabled = false
                        this.subloading = false
                        this.$message({
                            message: res.message,
                            type: 'error'
                        })
                    }
                })
            },
            changeTab () {
                if (this.signtype === 'phone') {
                    this.signtype = 'email'
                } else {
                    this.signtype = 'phone'
                }

                this.phoneNo = ''
                this.email = ''
                this.verCode = ''
                this.verCodeTip = '获取验证码'
                this.verCodeDisabled = false
                this.delay = 60
                this.password = ''
                this.birthday = ''
                this.confirmPassword = ''
                this.subdisabled = true
                this.subloading = false

                if (timer) {
                    clearTimeout(timer)
                }
            }
        },
        watch:{ //监听路由
            $route(to, from) {
                // if (to.path === '/postDetails') {
                //     this.isShow = false
                // }
            }
        },
        destroyed () {
            if (timer) {
                clearTimeout(timer)
            }
        }
    }
</script>

<style lang="less" scoped>
    .sign-forgot-wrap {
        position: relative;
        width: 1200px;
        margin: 0 auto;
        padding-top: 30px;

        .find-password {
            position: absolute;
            top: 15px;
            right: 0px;
            font-size: 13px;
            color: #40a9ff;
            cursor: pointer;
        }
		
        header {
            margin: 0 auto;
            text-align: center;
            padding-top: 30px;
            font-size: 20px;
            padding-bottom: 10px;
            font-weight: bold;
            border-bottom: 1px solid #f5f5f5;
        }
        .center {
            text-align: center;
            margin-top: 35px;
            .ver-code {
                .el-input-group__append {
                    .el-button {
                        color: #40a9ff;
                        border: none;
                    }
                }
            }
            .tip {
                display: inline-block;
                width: 350px;
                text-align: left;
                font-weight: bold;

                span {
                display: inline-block;
                    margin-top: 5px;
                    margin-bottom: 15px;
                    font-weight: normal;
                    font-size: 13px;
                    color: rgba(0, 0, 0, 0.85);

                    span {
                        margin-top: 5px;
                        margin-bottom: 0px;
                    }
                }
            }
            .slider-block {
                display: inline-block;
                width: 350px;
            }
            .sub-button {
                width: 350px;
                border-radius: 4px;
                margin-top: 30px;
                background-color: #1890ff;
                border-color: #1890ff;
            }
            .sub-button.is-disabled {
                opacity: 0.5;
            }
        }
        .password-wrap {
            position: relative;
            .el-icon-info {
                position: absolute;
                top: 9px;
                margin-left: 5px;
                color: #fa8c16;
            }
        }
    }

    @media (max-width: 750px) and (min-width: 0) {
        .sign-forgot-wrap {
            width: 100vw;
            .center {
                .tip {
                    width: 300px;
                }
                .el-input {
                    width: 300px;
                }
                .slider-block {
                    width: 300px;
                }
                .sub-button {
                    width: 300px;
                }
            }
        }
    }
</style>

 src/views/signup/index.vue

New file
@@ -0,0 +1,95 @@
<template>
    <div class="sign-wrap">
        <router-view />
        <div class="information">
            <div class="protocol">
                <a href="http://minkesoft.com/protocol.html" target="_blank">用户协议</a>
                <a href="http://minkesoft.com/privacy.html" target="_blank">隐私条款</a>
            </div>
            <div class="copyright">
                Copyright©2020  北京明科普华信息技术有限公司  版权所有  保留一切权利  京ICP备12007830号
            </div>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue'
    import SliderVerificationCode from 'slider-verification-code'
    import 'slider-verification-code/lib/slider-verification-code.css'
	
    Vue.use(SliderVerificationCode)
    export default {
        data() {
            return {}
        },
        methods: {

        },
        created () {
            this.Service.loginSSO().then(res => {
                if (res.status) {
                    sessionStorage.setItem('LoginUID', res.LoginUID || '')
                    sessionStorage.setItem('UserID', res.UserID || '')
                }
            })
        }
    }
</script>

<style lang="less" scoped>
    .sign-wrap {
        position: relative;
        padding-bottom: 170px;
        min-height: 100%;
    }
    .information {
        position: absolute;
        width: 1200px;
        bottom: 20px;
        left: calc(50vw - 600px);
        height: 90px;
    line-height: 2;
    padding-top: 15px;
        background: #f0f0f0;
        text-align: center;
        font-size: 13px;
        border-radius: 4px;
        .protocol {
            color: #262626;
            a {
                display: inline-block;
                padding: 0 7px 0px 3px;
                line-height: 1;
                cursor: pointer;
            }
            a:not(:last-child) {
                border-right: 1px solid #000000;
            }
        }
        .copyright {
            font-size: 13px;
        color: #8c8c8c;
        }
    }

    @media (max-width: 750px) and (min-width: 0) {
        .sign-wrap {
            padding-bottom: 110px;
        }
        .information {
            width: 100%;
            left: 0;
            bottom: 0;
            height: 100px;
            border-radius: 0;
            padding: 15px 20px 0px;
            .copyright {
                line-height: 20px;
            }
        }
    }
    @media (min-width: 750px) {
		
    }
</style>

 src/views/signup/mobsignup.vue

New file
@@ -0,0 +1,589 @@
<template>
    <div class="sign-mob-form-wrap">
        <div v-if="step ==='signtype'">
            <header>
                <p class="title">明科账号</p>
                <p class="tip">您要使用手机号还是邮箱地址来创建您的明科账号？</p>
                <p class="tip">如果您使用邮箱地址，您仍需要提供一个手机号以用于验证您的身份。</p>
            </header>
            <div class="sign-type">
                <el-button type="danger" @click="step = 'phone';signtype = 'phone'">使用手机号</el-button>
                <el-button plain @click="step = 'email';signtype = 'email'">使用邮箱地址</el-button>
            </div>
        </div>
        <div v-if="step ==='phone'">
            <header>
                <p class="title">手机号</p>
                <p class="tip text-center">输入您可用作明科账号的手机号</p>
            </header>
            <div class="form-item">
                <el-input size="small" placeholder="请输入手机号" @input="valChange()" v-model="phoneNo"></el-input>
            </div>
            <div class="form-item">
                <SliderVerificationCode sliderWidth="38px" height="38px" v-model="pass" @change="handleChange" />
            </div>
            <div class="form-item">
                <el-input size="small" class="ver-code" @input="valChange()" placeholder="请输入验证码" v-model="verCode">
                    <el-button slot="append" size="small" @click="getVerCode()" :disabled="verCodeDisabled"><span v-text="verCodeTip"></span></el-button>
                </el-input>
            </div>
            <div class="form-item">
                <el-input size="small" placeholder="请输入邮箱地址" @input="valChange()" v-model="email"></el-input>
            </div>
            <div class="step-control-wrap">
                <div class="step-control">
                    <el-button size="small" icon="el-icon-arrow-left" @click="prevStep()">上一步</el-button>
                    <el-button size="small" :disabled="nextDisabled" @click="nextStep()">下一步<i class="el-icon-arrow-right el-icon--right"></i></el-button>
                </div>
            </div>
        </div>
        <div v-if="step ==='email'">
            <header>
                <p class="title">邮箱地址</p>
                <p class="tip text-center">输入您可用作明科账号的邮箱地址</p>
            </header>
            <div class="form-item">
                <el-input size="small" placeholder="请输入邮箱地址" @input="valChange()" v-model="email"></el-input>
            </div>
            <div class="form-item">
                <SliderVerificationCode sliderWidth="38px" height="38px" v-model="pass" @change="handleChange" />
            </div>
            <div class="form-item">
                <el-input size="small" class="ver-code" @input="valChange()" placeholder="请输入验证码" v-model="verCode">
                    <el-button slot="append" size="small" @click="getVerCode()" :disabled="verCodeDisabled"><span v-text="verCodeTip"></span></el-button>
                </el-input>
            </div>
            <div class="form-item">
                <el-input size="small" placeholder="请输入手机号" @input="valChange()" v-model="phoneNo"></el-input>
            </div>
            <div class="step-control-wrap">
                <div class="step-control">
                    <el-button size="small" icon="el-icon-arrow-left" @click="prevStep()">上一步</el-button>
                    <el-button size="small" :disabled="nextDisabled" @click="nextStep()">下一步<i class="el-icon-arrow-right el-icon--right"></i></el-button>
                </div>
            </div>
        </div>
        <div v-if="step ==='password'">
            <header>
                <p class="title">密码</p>
                <p class="tip text-center">设置安全系数高的密码，以保护您的账号安全</p>
            </header>
            <div class="form-item">
                <el-input placeholder="密码" size="small" @input="valChange()" :maxlength="12" :show-password="true" v-model="password"></el-input>
            </div>
            <div class="form-item">
                <el-input placeholder="确认密码" size="small" @input="valChange()" :maxlength="12" :show-password="true" v-model="confirmPassword"></el-input>
            </div>
            <div class="password-info">
                <p class="title">密码需满足以下要求：</p>
                <p class="tip">密码最大为12位</p>
                <p class="tip">可以使用数字、字母及!@#$%&*()_</p>
            </div>
            <div class="step-control-wrap">
                <div class="step-control">
                    <el-button size="small" icon="el-icon-arrow-left" @click="prevStep()">上一步</el-button>
                    <el-button size="small" :disabled="nextDisabled" @click="nextStep()">下一步<i class="el-icon-arrow-right el-icon--right"></i></el-button>
                </div>
            </div>
        </div>
        <div v-if="step ==='birthday'">
            <header>
                <p class="title">出生日期</p>
                <p class="tip text-center">用于确定您在法律范围内可以使用的服务</p>
            </header>
            <div class="form-item">
                <div @click="calendarShow = true" class="birthday-select">
                    <span :style="{color: '#8c8c8c'}">出生日期</span>
                    <span :style="{float: 'right', color: '#8c8c8c'}" v-if="!birthday">请选择<i class="el-icon-arrow-right el-icon--right"></i></span>
                    <span :style="{float: 'right'}" v-if="birthday">{{birthday}}</span>
                </div>
                <div v-show="calendarShow" class="calendar-birthday" @click="calendarShow = false">
                    <div @click="stopEvent">
                    <inlineCalendar @change="datechange" mode="single" defaultDate="1997-07-01"/>
                    </div>
                </div>
            </div>

            <div class="step-sub">
                <el-button type="primary" @click="submitLogin()" :disabled="subdisabled" :loading="subloading">提交</el-button>
                <el-button class="sub-prev" size="small" icon="el-icon-arrow-left" @click="prevStep()">上一步</el-button>
            </div>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue'
    import Utils from '@/utils'
    import md5 from 'md5'
    import Calendar from 'vue-mobile-calendar'
	
    Vue.use(Calendar)

    let timer = null

    export default {
        data() {
            return {
                step: 'signtype',
                calendarShow: false,
                signtype: '',
                phoneNo: '',
                email: '',
                verCode: '',
                verCodeTip: '获取验证码',
                verCodeDisabled: false,
                nextDisabled: true,
                delay: 60,
                password: '',
                birthday: '',
                confirmPassword: '',
                subdisabled: true,
                pass: false,
                subloading: false
            }
        },
        methods: {
            stopEvent (e) {
                e.stopPropagation()
            },
            datechange (date) {
                if (date && date.format) {
                    this.birthday = date.format('YYYY-MM-DD')
                    this.subdisabled = false
                }
            },
            prevStep () {
                if (this.step === 'phone' || this.step === 'email') {
                    this.step = 'signtype'
                    this.pass = false
                    this.phoneNo = ''
                    this.email = ''
                    this.verCode = ''
                    this.verCodeTip = '获取验证码'
                    this.verCodeDisabled = false
                    this.nextDisabled = true
                    this.delay = 60
                    this.password = ''
                    this.birthday = ''
                    this.confirmPassword = ''
                    if (timer) {
                        clearTimeout(timer)
                    }
                } else if (this.step === 'password') {
                    this.password = ''
                    this.confirmPassword = ''
                    if (this.signtype !== 'email') {
                        this.step = 'phone'
                    } else {
                        this.step = 'email'
                    }
                } else if (this.step === 'birthday') {
                    this.birthday = ''
                    this.step = 'password'
                }
            },
            nextStep () {
                if (this.step === 'phone' || this.step === 'email') {
                    if (!/^1[3456789]\d{9}$/.test(this.phoneNo)) {
                        this.$message({
                            message: '手机号码有误，请重填！',
                            type: 'warning'
                        })
                        return
                    } else if (!/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(this.email)) {
                        this.$message({
                            message: '邮箱格式有误，请重填！',
                            type: 'warning'
                        })
                        return
                    }
                    this.step = 'password'
                    this.verCodeTip = '获取验证码'
                    this.verCodeDisabled = false
                    this.nextDisabled = true
                    this.delay = 60
                    if (timer) {
                        clearTimeout(timer)
                    }
                } else if (this.step === 'password') {
                    if (!this.password || !this.confirmPassword) return
					
                    if (!/^[0-9a-zA-Z!@#$%^&*()_]*$/.test(this.password)) {
                        this.$message({
                            message: '密码只可以使用数字、字母及!@#$%&*()_。',
                            type: 'warning'
                        })
                        return
                    } else if (this.password !== this.confirmPassword) {
                        this.$message({
                            message: '两次输入密码不一致！',
                            type: 'warning'
                        })
                        return
                    }
                    this.step = 'birthday'
                }
            },
            handleChange () {
                let valid = true
                if ((this.step === 'phone' && !this.phoneNo) || (this.step === 'email' && !this.email)) {
                    valid = false
                } else if (!this.pass) {
                    valid = false
                }
				
                if (valid) {
                    this.nextDisabled = false
                } else {
                    this.nextDisabled = true
                }
            },
            getVerCode () {
                let error = false
                let param = null

                if (!this.pass) {
                    this.$message({
                        message: '请拖动滑块解锁！',
                        type: 'warning'
                    })
                    return
                }

                if (this.signtype !== 'email') {
                    if (!this.phoneNo) {
                        this.$message({
                            message: '请输入手机号！',
                            type: 'warning'
                        })
                        return
                    } else if (!/^1[3456789]\d{9}$/.test(this.phoneNo)) {
                        this.$message({
                            message: '手机号码有误，请重填！',
                            type: 'warning'
                        })
                        return
                    }
                } else {
                    if (!this.email) {
                        this.$message({
                            message: '请输入邮箱地址！',
                            type: 'warning'
                        })
                        return
                    } else if (!/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(this.email)) {
                        this.$message({
                            message: '邮箱格式有误，请重填！',
                            type: 'warning'
                        })
                        return
                    }
                }

                if (this.signtype !== 'email') {
                    param = {
                        func: 'MSN_sms_send_code',
                        send_type: 'register',
                        mob: this.phoneNo,
                        timestamp: Utils.getCurrentTime(),
                        ID: '20200522115033857N9C7S41G77G31OT52QN'
                    }

                    param.LText = md5(`${this.phoneNo}mingke${window.GLOB.appkey}${param.timestamp}`)
                } else {
                    param = {
                        func: 'MSN_email_send_code',
                        send_type: 'register',
                        email: this.email,
                        timestamp: Utils.getCurrentTime(),
                        ID: '20200518162835149CE25P520L0UODMVQ5FM'
                    }

                    param.LText = md5(`${window.GLOB.appkey}mingke${this.email}${param.timestamp}`)
                }

                param.secretkey = md5(`${param.LText}mingke${param.timestamp}`)

                this.verCodeDisabled = true
                this.Service.setSSORequest(param).then(res => {
                    if (res.status) {
                        this.verCodeTip = '获取验证码(60s)'
                        timer = setTimeout(this.resetVerCodeTip, 1000)
                    } else {
                        this.verCodeDisabled = false
                        this.$message({
                            message: res.message,
                            type: 'error'
                        })
                    }
                })
            },
            valChange () {
                if (this.step === 'phone' || this.step === 'email') {
                    if (!this.phoneNo || !this.email || !this.pass || !this.verCode) {
                        this.nextDisabled = true
                    } else {
                        this.nextDisabled = false
                    }
                } else if (this.step === 'password') {
                    if (!this.password || !this.confirmPassword) {
                        this.nextDisabled = true
                    } else {
                        this.nextDisabled = false
                    }
                }
            },
            resetVerCodeTip () {
                if (this.delay > 1) {
                    this.delay--
                    this.verCodeTip = `获取验证码(${this.delay}s)`
                    timer = setTimeout(this.resetVerCodeTip, 1000)
                } else {
                    this.verCodeDisabled = false
                    this.delay = 60
                    this.verCodeTip = '获取验证码'
                }
            },
            submitLogin () {
                if (!this.phoneNo) {
                    this.$message({
                        message: '请输入手机号！',
                        type: 'warning'
                    })
                    return
                } else if (!/^1[3456789]\d{9}$/.test(this.phoneNo)) {
                    this.$message({
                        message: '手机号码有误，请重填！',
                        type: 'warning'
                    })
                    return
                } else if (!this.email) {
                    this.$message({
                        message: '请输入邮箱地址！',
                        type: 'warning'
                    })
                    return
                } else if (!/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(this.email)) {
                    this.$message({
                        message: '邮箱格式有误，请重填！',
                        type: 'warning'
                    })
                    return
                } else if (!this.verCode) {
                    this.$message({
                        message: '请输入验证码！',
                        type: 'warning'
                    })
                    return
                } else if (!this.password) {
                    this.$message({
                        message: '请输入密码！',
                        type: 'warning'
                    })
                    return
                } else if (!/^[0-9a-zA-Z!@#$%^&*()_]*$/.test(this.password)) {
                    this.$message({
                        message: '密码只可以使用数字、字母及!@#$%&*()_。',
                        type: 'warning'
                    })
                    return
                } else if (this.password !== this.confirmPassword) {
                    this.$message({
                        message: '两次输入密码不一致！',
                        type: 'warning'
                    })
                    return
                } else if (!this.birthday) {
                    this.$message({
                        message: '请选择出生日期！',
                        type: 'warning'
                    })
                    return
                }

                let param = {
                    func: 'msn_user_registry',
                    mob: this.phoneNo,
                    email: this.email,
                    country: 'China',
                    check_code: this.verCode,
                    pwd: this.password,
                    birthday: this.birthday,
                    Type_reg: this.signtype !== 'email' ? 'mob' : 'email',
                    timestamp: Utils.getCurrentTime()
                }

                param.LText = md5(`${window.GLOB.appkey}mingke${this.phoneNo}${this.email}`)
                param.secretkey = md5(`${param.LText}mingke${param.timestamp}`)

                this.subdisabled = true
                this.subloading = true
                this.Service.setSSORequest(param).then(res => {
                    if (res.status) {
                        this.subdisabled = false
                        this.subloading = false
                        this.$router.push({name: 'signSuccess', params: {type: 'signup'}})
                    } else {
                        this.subdisabled = false
                        this.subloading = false
                        this.$message({
                            message: res.message,
                            type: 'error'
                        })
                    }
                })
            }
        },
        destroyed () {
            if (timer) {
                clearTimeout(timer)
            }
        }
    }
</script>

<style lang="less" scoped>
    .sign-mob-form-wrap {
        position: relative;
        width: 100vw;
        min-height: 560px;
        height: calc(100vh - 110px);

        header {
            padding: 30px 7vw 8vh;
			
            .title {
                text-align: center;
                font-size: 20px;
                font-weight: bold;
                margin-bottom: 15px;
            }
            .tip {
                font-size: 14px;
                margin-bottom: 5px;
                color: #8c8c8c;
            }
            .text-center {
                text-align: center
            }
        }

        .sign-type {
            text-align: center;
            padding-top: 25vh;
            button {
                border-radius: 35px;
                padding: 10px 40px;
                display: block;
                margin: 0 auto;
                width: 170px;
                margin-top: 20px;
            }
        }

        .form-item {
            width: 85vw;
            max-width: 350px;
            margin: 0 auto 20px;
            .ver-code {
                .el-input-group__append {
                    .el-button {
                        color: #40a9ff;
                        border: none;
                    }
                }
            }
            .birthday-select {
                padding: 20px 5px;
            }
        }

        .password-info {
            width: 85vw;
            max-width: 350px;
            margin: 0 auto;
            height: 90px;
            .title {
                font-weight: bold;
                margin-bottom: 5px;
            }
            .tip {
                font-size: 14px;
                color: #8c8c8c;
            }
        }
        .step-control-wrap {
            position: absolute;
            bottom: 20px;
            width: 100vw;
            left: 0;
        }
        .step-control {
            width: 85vw;
            max-width: 350px;
            margin: 0 auto;

            .el-button {
                border: 0;
            }
            .el-button + .el-button {
                float: right;
            }
            .el-button:not(.is-disabled) {
                background: transparent!important;
                color: #606266!important;
            }
        }

        .step-sub {
            position: relative;
            text-align: center;
            margin-top: calc(92vh - 370px);
            .el-button:not(.sub-prev) {
                width: 85vw;
                max-width: 350px;
                border-radius: 35px;
            }
            .el-button.sub-prev {
                border: 0;
                background: transparent!important;
                color: #606266!important;
                position: absolute;
                top: 55px;
                left: 10px;
            }
        }
        .calendar-birthday {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 100;
            background: rgba(0, 0, 0, 0.3);
            .m-calendar {
                background: #fff;
                position: absolute;
                bottom: 0;
                width: 100%;
                .m-week-header {
                    font-size: 12px;
                    line-height: 30px;
                    height: 30px;
                }
            }
        }
    }

    // @media (max-width: 750px) and (min-width: 0) {
    //     .sign-form-wrap {
    //         width: 100vw;
    //         .center {
    //             .sub-button {
    //                 width: 300px;
    //             }
    //         }
    //     }
    // }
</style>

 src/views/signup/signsuccess.vue

New file
@@ -0,0 +1,84 @@
<template>
    <div class="sign-success-wrap">
        <header class="logo-header">
            <img src="../../img/mingke_logo.png" alt="">
            <span class="plat-name">明科开发者平台</span>
            <a class="plat-name" :style="{color: '#40a9ff', border: 0}" href="http://mk9h.cn/a.asp?a=9CCB" target="_blank">文档中心</a>
        </header>
        <div class="to-login">
            <p v-if="type === 'signup'">注册成功</p>
            <p v-if="type === 'forgetpwd'">密码修改成功</p>
            <p class="other">去PC端登陆</p>
            <a href="http://cloud.mk9h.cn/index.html" target="_blank">去登陆<i class="el-icon-arrow-right"></i></a>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                type: ''
            }
        },
        methods: {
			
        },
        created () {
            this.type = this.$route.params.type
        }
    }
</script>

<style lang="less" scoped>
    .sign-success-wrap {
		
        width: 1200px;
        margin: 0 auto;

        .logo-header {
            position: relative;
            background: #fafafa;
            margin-bottom: 28vh;
            height: 50px;
            padding: 7px 15px;
            img {
                height: 40px;
                line-height: 50px;
            }
            .plat-name {
                border-left: 2px solid #d9d9d9;
                margin-left: 5px;
                padding-left: 10px;
                font-size: 16px;
            }
        }
		
        .to-login {
            text-align: center;
            font-size: 22px;
            a {
                font-size: 16px;
                color: #40a9ff;
            }
            .other {
                display: none;
            }
        }
    }

    @media (max-width: 750px) and (min-width: 0) {
        .sign-success-wrap {
            width: 100%;
            .to-login {
                a {
                    display: none;
                }
                .other {
                    display: inline-block;
                    font-size: 16px;
                }
            }
        }
    }
</style>

 src/views/signup/signup.vue

New file
@@ -0,0 +1,458 @@
<template>
    <div class="sign-form-wrap">
        <header class="logo-header">
            <img src="../../img/mingke_logo.png" alt="">
            <span class="plat-name">明科开发者平台</span>
            <a class="plat-name" :style="{color: '#40a9ff', border: 0}" href="http://mk9h.cn/a.asp?a=9CCB" target="_blank">文档中心</a>
            <!-- <div class="find-password" @click="forgotPwd()">忘记密码？</div> -->
        </header>
        <el-tabs :tab-position="'left'" :style="{position: 'absolute'}" :before-leave="changeTab">
            <el-tab-pane label="手机号注册">
            </el-tab-pane>
            <el-tab-pane label="邮箱注册">
            </el-tab-pane>
        </el-tabs>
        <div v-if="signtype !== 'email'">
            <div class="header">
                明科帐号注册
                <span class="to-login">
                    已有账号，
                    <a href="http://cloud.mk9h.cn/index.html" target="_blank">去登陆<i class="el-icon-arrow-right"></i></a>
                </span>
            </div>
            <div class="center">
                <div>
                    <el-input size="small" placeholder="请输入手机号" @input="valChange()" v-model="phoneNo">
                        <template slot="prepend">+86</template>
                    </el-input>
                </div>
                <div class="slider-block">
                    <SliderVerificationCode v-model="pass"/>
                </div>
                <div>
                    <el-input size="small" class="ver-code" @input="valChange()" placeholder="请输入验证码" v-model="verCode">
                        <el-button slot="append" size="small" @click="getVerCode()" :disabled="!pass || verCodeDisabled"><span v-text="verCodeTip"></span></el-button>
                    </el-input>
                </div>
                <div>
                    <el-input size="small" placeholder="邮箱地址" v-model="email"></el-input>
                </div>
                <div class="password-wrap">
                    <el-input placeholder="密码" size="small" @input="valChange()" :maxlength="12" :show-password="true" v-model="password"></el-input>
                    <el-tooltip class="item" effect="dark" content="密码最大为12位，可以使用数字、字母及!@#$%&*()_" placement="top">
                        <i class="el-icon-info"></i>
                    </el-tooltip>
                </div>
                <div>
                    <el-input placeholder="确认密码" size="small" @input="valChange()" :maxlength="12" :show-password="true" v-model="confirmPassword"></el-input>
                </div>
                <div>
                    <el-date-picker v-model="birthday" type="date" value-format="yyyy-MM-dd" size="small" @change="valChange()" placeholder="选择出生日期"></el-date-picker>
                </div>
                <div>
                    <el-button class="sub-button" type="primary" @click="submitLogin()" :disabled="subdisabled" :loading="subloading">注册</el-button>
                </div>
            </div>
        </div>
        <div v-if="signtype === 'email'">
            <div class="header">
                明科帐号注册
                <span class="to-login">已有账号，<a href="http://cloud.mk9h.cn/index.html" target="_blank">去登陆<i class="el-icon-arrow-right"></i></a></span>
            </div>
            <div class="center">
                <div>
                    <el-input size="small" placeholder="邮箱地址" v-model="email"></el-input>
                </div>
                <div class="slider-block">
                    <SliderVerificationCode v-model="pass"/>
                </div>
                <div>
                    <el-input size="small" class="ver-code" placeholder="请输入验证码" v-model="verCode">
                        <el-button slot="append" size="small" @click="getVerCode()" :disabled="!pass || verCodeDisabled">
                            <span v-text="verCodeTip"></span>
                        </el-button>
                    </el-input>
                </div>
                <div>
                    <el-input size="small" placeholder="请输入手机号" v-model="phoneNo"></el-input>
                </div>
                <div class="password-wrap">
                    <el-input placeholder="密码" size="small" :maxlength="12" :show-password="true" v-model="password"></el-input>
                    <el-tooltip class="item" effect="dark" content="密码最大为12位，可以使用数字、字母及!@#$%&*()_" placement="top">
                        <i class="el-icon-info"></i>
                    </el-tooltip>
                </div>
                <div>
                    <el-input placeholder="确认密码" size="small" :maxlength="12" :show-password="true" v-model="confirmPassword"></el-input>
                </div>
                <div>
                    <el-date-picker v-model="birthday" type="date" value-format="yyyy-MM-dd" @change="valChange()" size="small" placeholder="选择出生日期"></el-date-picker>
                </div>
                <div>
                    <el-button class="sub-button" type="primary" @click="submitLogin()" :disabled="subdisabled" :loading="subloading">注册</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Utils from '@/utils'
    import md5 from 'md5'

    let timer = null

    export default {
        data() {
            return {
                signtype: '',
                phoneNo: '',
                email: '',
                verCode: '',
                verCodeTip: '获取验证码',
                verCodeDisabled: false,
                delay: 60,
                password: '',
                pass: false,
                birthday: '',
                confirmPassword: '',
                subdisabled: true,
                subloading: false
            }
        },
        methods: {
            handleChange () {

            },
            forgotPwd () {
                this.$router.push({name: 'forgotPwd'})
            },
            getVerCode () {
                let error = false
                let param = null

                if (this.signtype !== 'email') {
                    if (!this.phoneNo) {
                        this.$message({
                            message: '请输入手机号！',
                            type: 'warning'
                        })
                        return
                    } else if (!/^1[3456789]\d{9}$/.test(this.phoneNo)) {
                        this.$message({
                            message: '手机号码有误，请重填！',
                            type: 'warning'
                        })
                        return
                    }
                } else {
                    if (!this.email) {
                        this.$message({
                            message: '请输入邮箱地址！',
                            type: 'warning'
                        })
                        return
                    } else if (!/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(this.email)) {
                        this.$message({
                            message: '邮箱格式有误，请重填！',
                            type: 'warning'
                        })
                        return
                    }
                }

                if (this.signtype !== 'email') {
                    param = {
                        func: 'MSN_sms_send_code',
                        send_type: 'register',
                        mob: this.phoneNo,
                        timestamp: Utils.getCurrentTime(),
                        ID: '20200522115033857N9C7S41G77G31OT52QN'
                    }

                    param.LText = md5(`${this.phoneNo}mingke${window.GLOB.appkey}${param.timestamp}`)
                } else {
                    param = {
                        func: 'MSN_email_send_code',
                        send_type: 'register',
                        email: this.email,
                        timestamp: Utils.getCurrentTime(),
                        ID: '20200518162835149CE25P520L0UODMVQ5FM'
                    }

                    param.LText = md5(`${window.GLOB.appkey}mingke${this.email}${param.timestamp}`)
                }

                param.secretkey = md5(`${param.LText}mingke${param.timestamp}`)

                this.verCodeDisabled = true
                this.Service.setSSORequest(param).then(res => {
                    if (res.status) {
                        this.verCodeTip = '获取验证码(60s)'
                        timer = setTimeout(this.resetVerCodeTip, 1000)
                    } else {
                        this.verCodeDisabled = false
                        this.$message({
                            message: res.message,
                            type: 'error'
                        })
                    }
                })
            },
            valChange () {
                let valid = true

                if (!this.phoneNo) {
                    valid = false
                } else if (!this.email) {
                    valid = false
                } else if (!this.verCode) {
                    valid = false
                } else if (!this.password) {
                    valid = false
                } else if (!this.confirmPassword) {
                    valid = false
                } else if (!this.birthday) {
                    valid = false
                }

                if (valid) {
                    this.subdisabled = false
                } else {
                    this.subdisabled = true
                }
            },
            resetVerCodeTip () {
                if (this.delay > 1) {
                    this.delay--
                    this.verCodeTip = `获取验证码(${this.delay}s)`
                    timer = setTimeout(this.resetVerCodeTip, 1000)
                } else {
                    this.verCodeDisabled = false
                    this.delay = 60
                    this.verCodeTip = '获取验证码'
                }
            },
            submitLogin () {
                if (!this.phoneNo) {
                    this.$message({
                        message: '请输入手机号！',
                        type: 'warning'
                    })
                    return
                } else if (!/^1[3456789]\d{9}$/.test(this.phoneNo)) {
                    this.$message({
                        message: '手机号码有误，请重填！',
                        type: 'warning'
                    })
                    return
                } else if (!this.email) {
                    this.$message({
                        message: '请输入邮箱地址！',
                        type: 'warning'
                    })
                    return
                } else if (!/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(this.email)) {
                    this.$message({
                        message: '邮箱格式有误，请重填！',
                        type: 'warning'
                    })
                    return
                } else if (!this.verCode) {
                    this.$message({
                        message: '请输入验证码！',
                        type: 'warning'
                    })
                    return
                } else if (!this.password) {
                    this.$message({
                        message: '请输入密码！',
                        type: 'warning'
                    })
                    return
                } else if (!/^[0-9a-zA-Z!@#$%^&*()_]*$/.test(this.password)) {
                    this.$message({
                        message: '密码只可以使用数字、字母及!@#$%&*()_。',
                        type: 'warning'
                    })
                    return
                } else if (this.password !== this.confirmPassword) {
                    this.$message({
                        message: '两次输入密码不一致！',
                        type: 'warning'
                    })
                    return
                } else if (!this.birthday) {
                    this.$message({
                        message: '请选择出生日期！',
                        type: 'warning'
                    })
                    return
                }

                let param = {
                    func: 'msn_user_registry',
                    mob: this.phoneNo,
                    email: this.email,
                    country: 'China',
                    check_code: this.verCode,
                    pwd: this.password,
                    birthday: this.birthday,
                    Type_reg: this.signtype !== 'email' ? 'mob' : 'email',
                    timestamp: Utils.getCurrentTime()
                }

                param.LText = md5(`${window.GLOB.appkey}mingke${this.phoneNo}${this.email}`)
                param.secretkey = md5(`${param.LText}mingke${param.timestamp}`)

                this.subdisabled = true
                this.subloading = true
                this.Service.setSSORequest(param).then(res => {
                    if (res.status) {
                        this.subdisabled = false
                        this.subloading = false
                        this.$router.push({name: 'signSuccess', params: {type: 'signup'}})
                    } else {
                        this.subdisabled = false
                        this.subloading = false
                        this.$message({
                            message: res.message,
                            type: 'error'
                        })
                    }
                })
            },
            changeTab () {
                if (this.signtype === 'phone') {
                    this.signtype = 'email'
                } else {
                    this.signtype = 'phone'
                }

                this.phoneNo = ''
                this.email = ''
                this.verCode = ''
                this.verCodeTip = '获取验证码'
                this.verCodeDisabled = false
                this.delay = 60
                this.password = ''
                this.birthday = ''
                this.confirmPassword = ''
                this.subdisabled = true
                this.subloading = false

                if (timer) {
                    clearTimeout(timer)
                }
            }
        },
        destroyed () {
            if (timer) {
                clearTimeout(timer)
            }
        }
    }
</script>

<style lang="less" scoped>
    .sign-form-wrap {
        position: relative;
        width: 1200px;
        margin: 0 auto;
        .logo-header {
            position: relative;
            background: #fafafa;
            margin-bottom: 15px;
            height: 50px;
            padding: 7px 15px;
            img {
                height: 40px;
                line-height: 50px;
            }
            .plat-name {
                border-left: 2px solid #d9d9d9;
                margin-left: 5px;
                padding-left: 10px;
                font-size: 16px;
            }
        }

        .slider-block {
            display: inline-block;
            width: 350px;
            margin-bottom: 20px;
        }

        .find-password {
            position: absolute;
            top: 15px;
            right: 0px;
            font-size: 13px;
            color: #40a9ff;
            cursor: pointer;
        }

        .el-tabs__nav-wrap.is-left::after {
            height: 0;
        }
        .header {
            margin: 0 auto;
            text-align: center;
            padding-top: 30px;
            font-size: 20px;
			
            .to-login {
                display: block;
                font-size: 13px;

                a {
                    color: #40a9ff;
                }
            }
        }
        .center {
            text-align: center;
            margin-top: 35px;
            .ver-code {
                .el-input-group__append {
                    .el-button {
                        color: #40a9ff;
                        border: none;
                    }
                }
            }
            .sub-button {
                width: 350px;
                border-radius: 4px;
                margin-top: 30px;
                background-color: #1890ff;
                border-color: #1890ff;
            }
            .sub-button.is-disabled {
                opacity: 0.5;
            }
        }
        .password-wrap {
            position: relative;
            .el-icon-info {
                position: absolute;
                top: 9px;
                margin-left: 5px;
                color: #fa8c16;
            }
        }
    }

    @media (min-width: 1550px) {
        .sign-form-wrap {
            .center {
                .sub-button {
                    width: 400px;
                }
            }
            .slider-block {
                width: 400px;
            }
        }
    }
</style>