tools项目-注册登录文件目录更换

htmldev/TBTools/src/router/index.js

@@ -17,9 +17,7 @@ const _import = require('./import-' + process.env.NODE_ENV)
 
 // 全局路由(无需嵌套上左右整体布局)
 const globalRoutes = [
-  { path: '/404', component: _import('common/404'), name: '404', meta: { title: '404未找到' } },
-  { path: '/login', component: _import('common/login'), name: 'login', meta: { title: '登录' } },
-  { path: '/register', component: _import('common/register'), name: 'register', meta: { title: '注册' } }
+  { path: '/404', component: _import('common/404'), name: '404', meta: { title: '404未找到' } }
 ]
 
 // 主入口路由(需嵌套上左右整体布局)
@@ -34,8 +32,9 @@ const mainRoutes = {
     // 1. isTab: 是否通过tab展示内容, true: 是, false: 否
     // 2. iframeUrl: 是否通过iframe嵌套展示内容, '以http[s]://开头': 是, '': 否
     // 提示: 如需要通过iframe嵌套展示内容, 但不通过tab打开, 请自行创建组件使用iframe处理!
+    { path: '/login', component: _import('modules/account/login'), name: 'login', meta: { title: '登录' } },
+    { path: '/register', component: _import('modules/account/register'), name: 'register', meta: { title: '注册' } },
     { path: '/home', component: _import('common/home'), name: 'home', meta: { title: '首页' } },
-    { path: '/tools', component: _import('modules/tools/index'), name: 'tools', meta: { title: '工具列表' } },
     {
       path: '/tools-analyze',
       component: _import('modules/tools/tools-analyze'),

htmldev/TBTools/src/views/common/login.vue

@@ -1,193 +0,0 @@
-<template>
-  <div class="site-wrapper site-page--login">
-    <div class="login-main">
-      <h3 class="title">
-        <span>登录</span>
-      </h3>
-      <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
-               status-icon>
-        <el-form-item prop="userName">
-          <el-input v-model="dataForm.userName" placeholder="帐号"></el-input>
-        </el-form-item>
-        <el-form-item prop="password">
-          <el-input v-model="dataForm.password" type="password" placeholder="密码"></el-input>
-        </el-form-item>
-        <el-form-item prop="captcha">
-          <el-row :gutter="20">
-            <el-col :span="17">
-              <el-input v-model="dataForm.captcha" placeholder="验证码">
-              </el-input>
-            </el-col>
-            <el-col :span="7" class="login-captcha">
-              <img :src="captchaPath" @click="getCaptcha()" alt="">
-            </el-col>
-          </el-row>
-        </el-form-item>
-        <el-form-item>
-          <el-button class="login-btn-submit" type="primary" @click="dataFormSubmit()">登录</el-button>
-          <p class="login" @click="gotoRegister">暂无账号？立即注册</p>
-        </el-form-item>
-      </el-form>
-    </div>
-  </div>
-</template>
-
-<script>
-import { getUUID } from '@/utils'
-
-export default {
-  data () {
-    return {
-      dataForm: {
-        userName: '',
-        password: '',
-        uuid: '',
-        captcha: ''
-      },
-      dataRule: {
-        userName: [
-          { required: true, message: '帐号不能为空', trigger: 'blur' }
-        ],
-        password: [
-          { required: true, message: '密码不能为空', trigger: 'blur' }
-        ],
-        captcha: [
-          { required: true, message: '验证码不能为空', trigger: 'blur' }
-        ]
-      },
-      captchaPath: ''
-    }
-  },
-  created () {
-    this.getCaptcha()
-  },
-  methods: {
-    // 提交表单
-    dataFormSubmit () {
-      // this.$router.replace({ name: 'home' })
-      this.$refs['dataForm'].validate((valid) => {
-        if (valid) {
-          this.$http({
-            url: this.$http.adornUrl('/sys/login'),
-            method: 'post',
-            data: this.$http.adornData({
-              'username': this.dataForm.userName,
-              'password': this.dataForm.password,
-              'uuid': this.dataForm.uuid,
-              'captcha': this.dataForm.captcha
-            })
-          }).then(({ data }) => {
-            if (data && data.code === 0) {
-              this.$cookie.set('token', data.token)
-              this.$router.replace({ name: 'home' })
-            } else {
-              this.getCaptcha()
-              this.$message.error(data.msg)
-            }
-          })
-        }
-      })
-    },
-    // 获取验证码
-    getCaptcha () {
-      this.dataForm.uuid = getUUID()
-      this.captchaPath = this.$http.adornUrl(`/captcha.jpg?uuid=${this.dataForm.uuid}`)
-    },
-    gotoRegister () {
-      this.$router.push({
-        name: 'register'
-      })
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.site-wrapper.site-page--login {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: #ebeeef;
-  overflow: hidden;
-
-  .login-main {
-    width: 670px;
-    padding-bottom: 80px;
-    border-radius: 10px;
-    overflow: hidden;
-    background: #fff;
-  }
-
-  .title {
-    position: relative;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 179px;
-    margin: 0 auto 22px;
-    color: #fff;
-    background: url(~@/assets/img/login_bg.jpg) center center/100% 100% no-repeat;
-
-    &::before {
-      content: "";
-      display: block;
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      top: 0;
-      left: 0;
-      background-color: rgba(54, 84, 99, 0.7);
-    }
-
-    span {
-      position: relative;
-      left: 0;
-      top: 0;
-      z-index: 1;
-      display: block;
-      width: 100%;
-      line-height: 179px;
-      font-size: 30px;
-      font-weight: 400;
-      text-align: center;
-    }
-  }
-
-  .el-form {
-    width: 80%;
-    margin: 0 auto;
-  }
-
-  .login-captcha {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    overflow: hidden;
-
-    > img {
-      height: 36px;
-      cursor: pointer;
-    }
-  }
-
-  .login-btn-submit {
-    width: 100%;
-  }
-
-  .login {
-    margin-top: 10px;
-    font-size: 14px;
-    line-height: 22px;
-    color: #1ab2ff;
-    cursor: pointer;
-    text-align: left;
-    text-indent: 8px;
-    width: 160px;
-  }
-}
-</style>

htmldev/TBTools/src/views/main-navbar.vue

@@ -6,7 +6,20 @@
           <router-link :to="{name: 'home'}">首页</router-link>
         </li>
         <li>
-          <router-link :to="{name: 'tools'}">工具列表</router-link>
+          <el-dropdown class="TT-login" :show-timeout="0" placement="bottom" style="cursor: pointer;">
+            <span class="el-dropdown-link">工具列表</span>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item>
+                <router-link :to="{name: 'toolsAnalyze'}">竞品透析</router-link>
+              </el-dropdown-item>
+              <el-dropdown-item>
+                <router-link :to="{name: 'toolsCredit'}">旺旺透视</router-link>
+              </el-dropdown-item>
+              <el-dropdown-item>
+                <router-link :to="{name: 'toolsOnline'}">指数转换</router-link>
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
         </li>
       </ul>
       <el-dropdown class="TT-login" :show-timeout="0" placement="bottom" style="cursor: pointer;" v-if="userName">

htmldev/TBTools/src/views/modules/account/login.vue

@@ -0,0 +1,182 @@
+<template>
+  <div>
+    <el-row>
+      <el-col class="TT-main" :span="10" :offset="7">
+        <h3 class="title">
+          <span>登录</span>
+        </h3>
+        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
+                 status-icon>
+          <el-form-item prop="userName">
+            <el-input v-model="dataForm.userName" placeholder="帐号"></el-input>
+          </el-form-item>
+          <el-form-item prop="password">
+            <el-input v-model="dataForm.password" type="password" placeholder="密码"></el-input>
+          </el-form-item>
+          <el-form-item prop="captcha">
+            <el-row :gutter="20">
+              <el-col :span="17">
+                <el-input v-model="dataForm.captcha" placeholder="验证码">
+                </el-input>
+              </el-col>
+              <el-col :span="7" class="login-captcha">
+                <img :src="captchaPath" @click="getCaptcha()" alt="">
+              </el-col>
+            </el-row>
+          </el-form-item>
+          <el-form-item>
+            <el-button class="login-btn-submit" type="primary" @click="dataFormSubmit()">登录</el-button>
+            <p class="login" @click="gotoRegister">暂无账号？立即注册</p>
+          </el-form-item>
+        </el-form>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { getUUID } from '@/utils'
+
+export default {
+  data () {
+    return {
+      dataForm: {
+        userName: '',
+        password: '',
+        uuid: '',
+        captcha: ''
+      },
+      dataRule: {
+        userName: [
+          { required: true, message: '帐号不能为空', trigger: 'blur' }
+        ],
+        password: [
+          { required: true, message: '密码不能为空', trigger: 'blur' }
+        ],
+        captcha: [
+          { required: true, message: '验证码不能为空', trigger: 'blur' }
+        ]
+      },
+      captchaPath: ''
+    }
+  },
+  created () {
+    this.getCaptcha()
+  },
+  methods: {
+    // 提交表单
+    dataFormSubmit () {
+      // this.$router.replace({ name: 'home' })
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          this.$http({
+            url: this.$http.adornUrl('/sys/login'),
+            method: 'post',
+            data: this.$http.adornData({
+              'username': this.dataForm.userName,
+              'password': this.dataForm.password,
+              'uuid': this.dataForm.uuid,
+              'captcha': this.dataForm.captcha
+            })
+          }).then(({ data }) => {
+            if (data && data.code === 0) {
+              this.$cookie.set('token', data.token)
+              this.$router.replace({ name: 'home' })
+            } else {
+              this.getCaptcha()
+              this.$message.error(data.msg)
+            }
+          })
+        }
+      })
+    },
+    // 获取验证码
+    getCaptcha () {
+      this.dataForm.uuid = getUUID()
+      this.captchaPath = this.$http.adornUrl(`/captcha.jpg?uuid=${this.dataForm.uuid}`)
+    },
+    gotoRegister () {
+      this.$router.push({
+        name: 'register'
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.TT-main {
+  padding: 30px 0 50px;
+  overflow: hidden;
+}
+
+.title {
+  position: relative;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 179px;
+  margin: 0 auto 22px;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+  color: #fff;
+  background: url(~@/assets/img/login_bg.jpg) center center/100% 100% no-repeat;
+  overflow: hidden;
+
+  &::before {
+    content: "";
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background-color: rgba(54, 84, 99, 0.7);
+  }
+
+  span {
+    position: relative;
+    left: 0;
+    top: 0;
+    z-index: 1;
+    display: block;
+    width: 100%;
+    line-height: 179px;
+    font-size: 30px;
+    font-weight: 400;
+    text-align: center;
+  }
+}
+
+.el-form {
+  width: 100%;
+  margin: 0 auto;
+}
+
+.login-captcha {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  overflow: hidden;
+
+  > img {
+    height: 36px;
+    cursor: pointer;
+  }
+}
+
+.login-btn-submit {
+  width: 100%;
+}
+
+.login {
+  margin-top: 10px;
+  font-size: 14px;
+  line-height: 22px;
+  color: #1ab2ff;
+  cursor: pointer;
+  text-align: left;
+  text-indent: 8px;
+  width: 160px;
+}
+</style>

htmldev/TBTools/src/views/common/register.vue → htmldev/TBTools/src/views/modules/account/register.vue

@@ -1,35 +1,37 @@
 <template>
-  <div class="site-wrapper site-page--register">
-    <div class="register-main">
-      <h3 class="title">
-        <span>注册</span>
-      </h3>
-      <el-form
-        :model="ruleForm2"
-        status-icon
-        :rules="rules2"
-        ref="ruleForm2"
-        label-width="0"
-        class="demo-ruleForm">
-        <el-form-item prop="tel">
-          <el-input v-model="ruleForm2.tel" auto-complete="off" placeholder="请输入手机号"></el-input>
-        </el-form-item>
-        <el-form-item prop="smscode" class="code">
-          <el-input v-model="ruleForm2.smscode" placeholder="验证码"></el-input>
-          <el-button type="primary" :disabled='isDisabled' @click="sendCode">{{ buttonText }}</el-button>
-        </el-form-item>
-        <el-form-item prop="pass">
-          <el-input type="password" v-model="ruleForm2.pass" auto-complete="off" placeholder="输入密码"></el-input>
-        </el-form-item>
-        <el-form-item prop="checkPass">
-          <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off" placeholder="确认密码"></el-input>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="submitForm('ruleForm2')" style="width:100%;">注册</el-button>
-          <p class="login" @click="gotoLogin">已有账号？立即登录</p>
-        </el-form-item>
-      </el-form>
-    </div>
+  <div>
+    <el-row>
+      <el-col class="TT-main" :span="10" :offset="7">
+        <h3 class="title">
+          <span>注册</span>
+        </h3>
+        <el-form
+          :model="ruleForm2"
+          status-icon
+          :rules="rules2"
+          ref="ruleForm2"
+          label-width="0"
+          class="demo-ruleForm">
+          <el-form-item prop="tel">
+            <el-input v-model="ruleForm2.tel" auto-complete="off" placeholder="请输入手机号"></el-input>
+          </el-form-item>
+          <el-form-item prop="smscode" class="code">
+            <el-input v-model="ruleForm2.smscode" placeholder="验证码"></el-input>
+            <el-button type="primary" :disabled='isDisabled' @click="sendCode">{{ buttonText }}</el-button>
+          </el-form-item>
+          <el-form-item prop="pass">
+            <el-input type="password" v-model="ruleForm2.pass" auto-complete="off" placeholder="输入密码"></el-input>
+          </el-form-item>
+          <el-form-item prop="checkPass">
+            <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off" placeholder="确认密码"></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="submitForm('ruleForm2')" style="width:100%;">注册</el-button>
+            <p class="login" @click="gotoLogin">已有账号？立即登录</p>
+          </el-form-item>
+        </el-form>
+      </el-col>
+    </el-row>
   </div>
 </template>
 <script>
@@ -154,65 +156,52 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.site-wrapper.site-page--register {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
+.TT-main {
+  padding: 30px 0 50px;
+  overflow: hidden;
+}
+
+.title {
+  position: relative;
   left: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: #ebeeef;
+  top: 0;
+  width: 100%;
+  height: 179px;
+  margin: 0 auto 22px;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+  color: #fff;
+  background: url(~@/assets/img/login_bg.jpg) center center/100% 100% no-repeat;
   overflow: hidden;
 
-  .register-main {
-    width: 670px;
-    padding-bottom: 80px;
-    border-radius: 10px;
-    overflow: hidden;
-    background: #fff;
+  &::before {
+    content: "";
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background-color: rgba(54, 84, 99, 0.7);
   }
 
-  .title {
+  span {
     position: relative;
     left: 0;
     top: 0;
+    z-index: 1;
+    display: block;
     width: 100%;
-    height: 179px;
-    margin: 0 auto 22px;
-    color: #fff;
-    background: url(~@/assets/img/login_bg.jpg) center center/100% 100% no-repeat;
-
-    &::before {
-      content: "";
-      display: block;
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      top: 0;
-      left: 0;
-      background-color: rgba(54, 84, 99, 0.7);
-    }
-
-    span {
-      position: relative;
-      left: 0;
-      top: 0;
-      z-index: 1;
-      display: block;
-      width: 100%;
-      line-height: 179px;
-      font-size: 30px;
-      font-weight: 400;
-      text-align: center;
-    }
+    line-height: 179px;
+    font-size: 30px;
+    font-weight: 400;
+    text-align: center;
   }
+}
 
-  .el-form {
-    width: 80%;
-    margin: 0 auto;
-  }
+.el-form {
+  width: 100%;
+  margin: 0 auto;
 }
 
 .login {

htmldev/TBTools/src/views/modules/tools/index.vue

@@ -1,89 +0,0 @@
-<template>
-  <el-row>
-    <el-col>
-      <el-card shadow="always">
-        <h3>竞品透析</h3>
-        <p>查询任意商品的访客数、访客数来源、支付买家数、日期、下单件数。</p>
-        <router-link :to="{name: 'toolsAnalyze'}">
-          <el-button type="primary">立即体验</el-button>
-        </router-link>
-      </el-card>
-    </el-col>
-    <el-col class="ml-2">
-      <el-card shadow="always">
-        <h3>旺旺透视</h3>
-        <p>查询淘宝账号是不是淘宝黑号，信誉等级、评价、实名、淘龄等信息。</p>
-        <router-link :to="{name: 'toolsCredit'}">
-          <el-button type="primary">立即体验</el-button>
-        </router-link>
-      </el-card>
-    </el-col>
-    <el-col class="ml-2">
-      <el-card shadow="always">
-        <h3>指数转换</h3>
-        <p>生意参谋交易指数转换为交易金额，支付转化率指数转换为 支付转化率等</p>
-        <router-link :to="{name: 'toolsOnline'}">
-          <el-button type="primary">立即体验</el-button>
-        </router-link>
-      </el-card>
-    </el-col>
-  </el-row>
-</template>
-
-<script>
-export default {
-  name: 'index'
-}
-</script>
-
-<style lang="scss" scoped>
-/deep/ .el-row {
-  .el-col {
-    width: 23.5%;
-
-    &.ml-2 {
-      margin-left: 2%;
-    }
-  }
-
-  .el-card {
-    position: relative;
-    left: 0;
-    top: 0;
-    height: 300px;
-
-    .el-card__body {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      padding: 40px 0 0;
-      text-align: center;
-
-      h3 {
-        font-size: 20px;
-      }
-
-      p {
-        width: 80%;
-        margin: 60px auto 0;
-        color: #888;
-      }
-
-      a {
-        position: absolute;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        z-index: 1;
-        display: block;
-        width: 100%;
-      }
-
-      button {
-        width: 100%;
-        border-radius: 0;
-      }
-    }
-  }
-}
-</style>