kkc-go/file/static/NavigationBar.tmpl

<div class="navigation-bar">
    <div class="nav-body">
        <!--      <router-link to="/" class="nav-logo">-->
        <div class="nav-logo">
            <img src="../assets/image/logo.png" alt="logo" onclick="JumpRouter('/','')"/>
        </div>
        <!--      </router-link>-->
        <div class="nav-search">
            <form action="/search" target="_blank">
                <div class="nav-search-div">
                    <input class="search-input" type="text" name="key" placeholder="搜索商品名称"/>
                </div>
                <!--          点击-->
                <div class="search-btn">
                    <div class="search-btn-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-6fbb019e="">
                            <path fill="currentColor"
                                  d="m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704"></path>
                        </svg>
                    </div>
                </div>
            </form>
        </div>
        <div class="nav-user">

            <!--                todo 头像处理-->
            <div class="nav-user-icon" @click="openView()">
                <div class="nav-user-icon-bg">
                    <el-icon size="24">
                        <User/>
                    </el-icon>
                    <img :src="userInfo.avatar" v-else alt="6"/>
                </div>
                <span>{1{ isLogin ? userInfo.name : "登录" }1}</span>
            </div>

            <div class="login-body" style="display: none">
                <div class="login-center" style="display: none">
                    <div class="login-content">
                        <div class="login-image" :style="loginImageStyle"></div>
                        <form>
                            <div class="login-from">
                                <div class="login-select">
                                    <div class=" login-select-item "
                                         :class="selectType=='phone'?'select-item':''"
                                         @click="setType('phone')">
                                        <span>手机号登录</span>
                                    </div>
                                    <div class=" login-select-item "
                                         :class="selectType=='email'?'select-item':''"
                                         @click="setType('email')">
                                        <span>邮箱登录</span>
                                    </div>
                                    <div class=" login-select-item "
                                         :class="selectType=='wx'?'select-item':''"
                                         @click="setType('wx')">
                                        <span>微信扫码登录</span>
                                    </div>
                                    <!--特效白条-->
                                    <div class="select-item2" :style="getSelectTypeStyle()"></div>
                                </div>

                                <div class="login-type-phone" v-show="selectType=='phone'||selectType=='email'">
                                    <div class="login-phone">

                                        <div class="login-phone-input">
                                            <input name="username" v-model="username"
                                                   autocomplete="off"
                                                   :placeholder="selectType=='phone'?'手机号码':'邮箱'"/>
                                        </div>
                                    </div>
                                    <div class="login-phone-code" v-if="selectType=='phone'">
                                        <div class="login-phone-code-input">
                                            <input name="username" v-model="password"
                                                   autocomplete="off"
                                                   placeholder="验证码"/>
                                        </div>
                                        <div class="login-phone-code-btn" @click="getCode()">
                                            {1{ awaitCode > 0 ? awaitCode + 's' : '发送验证码' }1}
                                        </div>
                                    </div>

                                    <div class="login-email" v-if="selectType=='email'">
                                        <div class="login-email-input">
                                            <input name="username" v-model="password"
                                                   autocomplete="off"
                                                   type="password"
                                                   placeholder="密码"/>
                                        </div>
                                    </div>

                                    <div class="login-btn" @click="login()">
                                        <div class="login-btn-div">登录</div>
                                    </div>
                                </div>

                                <div class="login-type-wx" v-show="selectType=='wx'">
                                    <div class="login-wx-refresh" @click="refreshWxCode()">
                                        <div class="login-wx-refresh-icon"
                                             style="transform: translateY(15%)">
                                            <el-icon size="25" :class="refreshWxCodeState?'is-loading':''">
                                                <refresh/>
                                            </el-icon>
                                        </div>
                                        <div class="login-wx-refresh-text">
                                            <span style="line-height: 25px">刷新二维码</span>
                                        </div>
                                    </div>
                                    <div class="login-wx-tip">
                                        <span>微信登录</span>
                                    </div>
                                    <div class="login-wx-image"></div>
                                    <div class="login-wx-tip">
                                        <span>请使用微信扫码登录</span>
                                    </div>
                                </div>
                                <span class="login-register-btn"
                                      v-if="selectType!=='wx'"
                                      @click="setShowRegister('register')">注册</span>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="register-center" style="display: none">
                    <div class="register-content">
                        <form>
                            <div class="register-content-title">
                                注册
                            </div>
                            <div class="register-content-input">
                                <k-k-c-input name="username" @binding="setUsername" :text="username"
                                             placeholder="请输入邮箱" type="text"/>
                            </div>
                            <div class="register-content-input">
                                <k-k-c-input name="password" @binding="setPassword" :text="password"
                                             type="password" placeholder="请输入密码"/>
                            </div>
                            <div class="register-content-input">
                                <k-k-c-input name="username" @binding="setRequirePassword" :text="requirePassword"
                                             type="password" placeholder="请输入密码"/>
                            </div>
                            <div class="register-content-input">
                                <k-k-c-input name="username" @binding="setPhone" :text="phone"
                                             placeholder="请输入手机号" type="text"/>
                            </div>
                            <div class="register-content-code">
                                <div class="register-content-code-input">
                                    <k-k-c-input name="username" @binding="setCode" :text="code"
                                                 placeholder="请输入手机号" type="text"/>
                                </div>
                                <div class="register-content-code-btn" @click="sendCode()">
                                    {1{ awaitCode > 0 ? awaitCode + 's' : '发送验证码' }1}
                                </div>
                            </div>
                            <div class="register-content-submit" @click="register()">
                                注册
                            </div>
                        </form>
                    </div>
                </div>
                <div class="login-body-shield" @click="showViewType=''"></div>
            </div>
        </div>
    </div>
</div>