gpc-ui 0.1.7

package/src/components/gpc-login/index.vue

@@ -0,0 +1,595 @@
+<template>
+  <div class="wrap">
+    <div class="wrap-box">
+      <div class="box-content">
+        <div class="sign">
+          <h2 class="title">忘记密码吗？</h2>
+          <p class="desc">点击这里重置密码</p>
+          <button type="button" class="get-register" @click="getRegister">重置</button>
+        </div>
+        <div class="login">
+          <h2 class="title">已经有账号了吗？</h2>
+          <p class="desc">点击这里登录</p>
+          <button type="button" class="get-login" @click="getLogin">登录</button>
+        </div>
+      </div>
+
+      <div class="manager-box">
+        <div class="login-part fadein">
+          <Tabs :curTab="curTab" style="height: 300px;">
+            <TabPane label="账号登录" name="1">
+              <div>
+                <div class="input-box">
+                  <input type="text" placeholder="用户名/手机号" v-model="accountFrom.username">
+                  <i class="iconfont icon-wo"></i>
+                </div>
+                <div class="input-box">
+                  <input type="password" placeholder="密码" v-model="accountFrom.password">
+                  <i class="iconfont icon-mima"></i>
+                </div>
+                <span style="color: red; font-size: 13px;">*本平台为互联网非涉密平台，严禁处理、传输国家秘密、工作秘密。</span>
+                <div class="buttons clearfix">
+                  <button type="button" class="btn-login fr button" @click="getAccountLogin">登录</button>
+                </div>
+              </div>
+            </TabPane>
+            <TabPane label="验证码登录" name="2">
+              <div>
+                <div class="input-box">
+                  <input type="text" placeholder="手机号" v-model="verifyFrom.username">
+                  <i class="iconfont icon-wo"></i>
+                </div>
+                <div class="input-box">
+                  <drag-verify ref="dragVerifyLogin" :width="320" :isPassing.sync="isPassingLogin" text="请按住滑块拖动" successText="验证通过" progressBarBg="#11C36A"
+                               handlerIcon="el-icon-d-arrow-right" successIcon="el-icon-circle-check"
+                               @passcallback="passCallLoginBack">
+                  </drag-verify>
+                </div>
+                <div class="input-box">
+                  <div class="drag-verify-box">
+                    <input type="text" placeholder="验证码" v-model="verifyFrom.authCode">
+                    <el-button style="border-color: #028037; color: #028037;" plain size="small" @click="getLoginVerifyCode" :disabled="isDisabledLogin">{{buttonLoginText}}</el-button>
+                  </div>
+                </div>
+                <div class="buttons clearfix">
+                  <button type="button" class="btn-login fr button" @click="getVerifyCodeLogin">登录</button>
+                </div>
+              </div>
+            </TabPane>
+          </Tabs>
+        </div>
+        <div class="sign-part fadeout">
+          <div>
+            <h3>重置密码</h3>
+            <div class="input-box">
+              <input type="text" placeholder="手机号" v-model="verifyFrom.username">
+              <i class="iconfont icon-wo"></i>
+            </div>
+            <div class="input-box">
+              <drag-verify ref="dragVerifyRest" :width="320" :isPassing.sync="isPassingRest" text="请按住滑块拖动" successText="验证通过" progressBarBg="#11C36A"
+                           handlerIcon="el-icon-d-arrow-right" successIcon="el-icon-circle-check"
+                           @passcallback="passCallRestBack">
+              </drag-verify>
+            </div>
+            <div class="input-box">
+              <div class="drag-verify-box">
+                <input type="text" placeholder="验证码" v-model="verifyFrom.authCode">
+                <el-button style="border-color: #028037; color: #028037;" plain size="small" @click="getRestVerifyCode" :disabled="isDisabledRest">{{buttonRestText}}</el-button>
+              </div>
+            </div>
+            <div class="buttons clearfix">
+              <button type="button" class="btn-register fr button" @click="getRegisterPw">重置</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Tabs from '../gpc-tabs/Tabs.vue';
+import TabPane from '../gpc-tabs/TabPane.vue';
+import dragVerify from "vue-drag-verify2";
+export default {
+  name: 'gpc-login',
+  components: {
+    Tabs,
+    TabPane,
+    dragVerify,
+  },
+  props: {
+    msg: String
+  },
+  data() {
+    return {
+      isLogin: true,
+      // 当前选中的标签
+      curTab: "1",
+
+      // 账号登录
+      accountFrom:{
+        username: '',
+        password: ''
+      },
+      // 验证码登录
+      verifyFrom:{
+        username: "",
+        authCode: "",
+      },
+      // 滑块验证 - 验证码登录
+      isPassingLogin: false,
+      countdownLogin:0,
+      isDisabledLogin: false,
+      // 重置密码
+      resetFrom:{
+        username: "",
+        authCode: "",
+      },
+      // 滑块验证 - 验证码登录
+      isPassingRest: false,
+      countdownRest:0,
+      isDisabledRest: false,
+    }
+  },
+  computed:{
+    buttonLoginText(){
+        return this.countdownLogin !== 0 ? `${this.countdownLogin}s`:"获取验证码"
+    },
+    buttonRestText(){
+      return this.countdownRest !== 0 ? `${this.countdownRest}s`:"获取验证码"
+    }
+  },
+  methods: {
+    // 账号登录
+    getAccountLogin(){
+
+    },
+    // 验证码登录
+    getVerifyCodeLogin(){
+
+    },
+    // 获取验证码（登录）
+    getLoginVerifyCode(){
+      if(this.isPassingLogin){
+        this.isDisabledLogin = true
+        this.countdownLogin = 3
+        const interval = setInterval(()=>{
+          this.countdownLogin--
+          if(this.countdownLogin === 0){
+            this.isDisabledLogin = false
+            this.countdownLogin = 0
+            clearInterval(interval)
+          }
+        },1000)
+      }
+    },
+    passCallLoginBack() {
+      console.log('passCallLoginBack \'验证通过\'');
+      // this.isPassingLogin = false
+    },
+    resetLogin() {
+      this.isPassingLogin = false;
+      this.$refs.dragVerifyLogin.reset()
+    },
+    // 重置密码
+    getRegisterPw(){
+
+    },
+    // 获取验证码（重置）
+    getRestVerifyCode(){
+      if(this.isPassingRest){
+        this.isDisabledRest = true
+        this.countdownRest = 3
+        const interval = setInterval(()=>{
+          this.countdownRest--
+          if(this.countdownRest === 0){
+            this.isDisabledRest = false
+            this.countdownRest = 0
+            clearInterval(interval)
+          }
+        },1000)
+      }
+    },
+    passCallRestBack() {
+      console.log('passcallback \'验证通过\'');
+      // this.isPassingRest = false
+    },
+    resetPw() {
+      this.isPassingRest = false;
+      this.$refs.dragVerifyRest.reset()
+    },
+    getRegister() {
+      console.log('getRegister');
+      this.resetPw()
+      this.updateClasses('.manager-box', 'right', 'left');
+      this.updateClasses('.sign-part', 'fadein', 'fadeout');
+      this.updateClasses('.login-part', 'fadeout', 'fadein');
+    },
+    getLogin() {
+      console.log('getLogin');
+      this.resetLogin()
+      this.updateClasses('.manager-box', 'left', 'right');
+      this.updateClasses('.sign-part', 'fadeout', 'fadein');
+      this.updateClasses('.login-part', 'fadein', 'fadeout');
+    },
+    updateClasses(selector, removeClass, addClass) {
+      const element = this.$el.querySelector(selector);
+      if (element) {
+        element.classList.remove(removeClass);
+        element.classList.add(addClass);
+      } else {
+        console.warn(`Element  with selector ${selector} not found.`);
+      }
+    },
+
+  },
+  mounted() {
+    // 确保在组件挂载后执行 DOM 操作
+    this.updateClasses('.manager-box', 'left', 'right');
+    this.updateClasses('.sign-part', 'fadeout', 'fadein');
+    this.updateClasses('.login-part', 'fadein', 'fadeout');
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+
+body,button,input,select,textarea {
+  font-family: 'Microsoft YaHei',arial,SimSun,sans-serif,tahoma;
+}
+body{
+  font-size: 14px;
+  color: #666;
+}
+input,select,textarea {
+  font-size: 100%;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+textarea,input,button,a {
+  outline: none;
+}
+button {
+  cursor: pointer;
+}
+textarea {
+  resize: none;
+}
+fieldset,img {
+  border: 0;
+}
+address,cite,code,dfn,em,i,th,var {
+  font-style: normal;
+  font-weight: normal;
+}
+ol,ul {
+  list-style: none;
+}
+caption,th {
+  text-align: left;
+}
+h1,h2,h3,h4,h5,h6 {
+  font-size: 100%;
+  font-weight: normal;
+}
+sub, sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+sup {
+  top: -0.5em;
+}
+sub {
+  bottom: -0.25em;
+}
+a {
+  text-decoration: none;
+}
+.clearfix:before ,.clearfix:after {
+  content: "";
+  display: table;
+}
+.clearfix:after {
+  clear: both;
+  overflow: hidden;
+}
+.clearfix {
+  zoom: 1;
+}
+.fr {
+  float: right;
+}
+
+*,
+*:after,
+*:before {
+  box-sizing: border-box;
+}
+
+.wrap {
+  background: url("http://exd.design/wp-content/uploads/2018/12/bg.jpg") no-repeat fixed;
+  background-size: cover;
+}
+
+.wrap:after {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  background: inherit;
+  filter: blur(3px);
+  z-index: 1;
+}
+
+.wrap-box {
+  position: absolute;
+  width: 840px;
+  height: 320px;
+  background: #018a46;
+  z-index: 2;
+  box-shadow: 0 0 10px 1px rgba(169, 169, 169, .2);
+  border-radius: 3px;
+}
+
+.box-content {
+  display: inline-table;
+  width: 100%;
+  height: 100%;
+}
+
+.box-content .sign,
+.box-content .login {
+  display: table-cell;
+  width: 50%;
+  vertical-align: middle;
+  line-height: 36px;
+}
+
+.sign {
+  padding-left: 70px;
+}
+
+.login {
+  padding-left: 100px;
+}
+
+.box-content .title {
+  color: #e8e8e8;
+  font-size: 22px;
+  letter-spacing: 1px;
+}
+
+.box-content .desc {
+  color: #d3d3d3;
+  font-size: 14px;
+}
+
+.box-content button {
+  border-radius: 3px;
+  border: solid 1px #d3d3d3;
+  background-color: transparent;
+  color: #d3d3d3;
+  width: 124px;
+  height: 38px;
+  margin: 15px auto 0;
+  font-size: 16px;
+  transition: all .2s;
+}
+
+.box-content button:hover {
+  border-color: #fff;
+  color: #fff;
+}
+
+.manager-box {
+  position: absolute;
+  height: 380px;
+  width: 400px;
+  left: 50px;
+  top: -30px;
+  transition: all .8s linear;
+  background: #fff;
+  padding: 0 40px;
+  border-radius: 3px;
+  box-shadow: 0 0 15px 4px rgba(0, 0, 0, .1);
+  display: inline-table;
+}
+
+.manager-box>* {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.manager-box>*.fadein {
+  display: none;
+  animation: hide 1s 1 forwards;
+}
+
+.manager-box>*.fadeout {
+  display: table-cell;
+  animation: show 1s 1 forwards;
+}
+
+@keyframes hide {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes show {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+.manager-box.right {
+  animation: toRight 1s 1 forwards;
+}
+
+@keyframes toRight {
+  0% {
+    left: 50px;
+  }
+
+  45% {
+    left: 450px;
+  }
+
+  80% {
+    left: 380px;
+  }
+
+  100% {
+    left: 390px;
+  }
+}
+
+.manager-box.left {
+  animation: toLeft 1s 1 forwards;
+}
+
+@keyframes toLeft {
+  0% {
+    left: 390px;
+  }
+
+  45% {
+    left: 10px;
+  }
+
+  80% {
+    left: 60px;
+  }
+
+  100% {
+    left: 50px;
+  }
+}
+
+.manager-box h3 {
+  color: #00b85c;
+  font-size: 22px;
+  margin-bottom: 30px;
+}
+
+.input-box {
+  position: relative;
+  margin: 20px 0;
+}
+
+.input-box i {
+  position: absolute;
+  width: 0;
+  bottom: 7px;
+  background-color: #00b85c;
+  transition: all .36s;
+  right: 20px;
+  color: #ccc;
+}
+
+.input-box input {
+  display: block;
+  border: 0;
+  border-bottom: solid 1px #ddd;
+  line-height: 34px;
+  width: 100%;
+  transition: all .2s;
+  font-size: 16px;
+  padding-right: 30px;
+}
+
+.input-box input::placeholder {
+  color: #ccc;
+  font-size: 14px;
+}
+
+.input-box input:focus + i {
+  color: #00b85c;
+}
+
+.input-box i:after {
+  content: '';
+  position: absolute;
+  right: -20px;
+  width: 0;
+  height: 1px;
+  background-color: #00b85c;
+  transition: all .4s;
+  bottom: -7px;
+}
+
+.input-box input:focus + i:after {
+  width: 320px;
+}
+
+.manager-box .button {
+  border-radius: 2px;
+  width: 124px;
+  height: 38px;
+  color: #fff;
+  background-color: #00b85c;
+  border: 0;
+  font-size: 16px;
+}
+
+.manager-box .button:hover {
+  background: radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 53% 105% / 10px 10px,
+  radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 16% 132% / 12px  12px,
+  radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 56% 94% / 8px 8px,
+  radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 42% 126% / 14px 14px,
+  radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 11% 119% / 11px 11px,
+  radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 69% 143% / 9px 9px,
+  radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 107% 141% / 6px 6px,
+  radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 51% 132% / 10px 10px,
+  radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 20% 121% / 15px 15px,
+  radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 68% 121% / 6px 6px,
+  radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 22% 127% / 11px 11px;
+  background-color: #028037;
+  background-repeat: no-repeat;
+  animation: bubbles .7s forwards ease-out;
+}
+
+@keyframes bubbles {
+  100% {
+    background-position: 48% -266%, 17% -396%, 58% -137%, 33% -360%, 21% -368%, 77% -137%, 114% -391%, 43% -2%, -1% -41%, 60% -207%, 27% -149%;
+    box-shadow: inset 0 -60px 0 #028037;
+  }
+}
+
+.manager-box .buttons {
+  margin-top: 40px;
+  line-height: 39px;
+}
+
+.manager-box .buttons a {
+  position: relative;
+  color: #999;
+}
+
+.manager-box .buttons a:hover {
+  color: #028037;
+}
+
+.drag_verify {
+  border: 1px solid #d2d2d2;
+}
+.drag-verify-box {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+}
+</style>

package/src/components/gpc-tabs/TabPane.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="TabPane" v-show="show">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TabPane',
+  props: {
+    name: {
+      type: String
+    },
+    label: {
+      type: String,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      show: true
+    }
+  },
+  methods: {
+    updateNav () {
+      this.$parent.updateNav()
+    }
+  },
+  watch: {
+    label () {
+      this.updateNav()
+    }
+  },
+  mounted () {
+    this.updateNav()
+  },
+  computed: {
+    active () {
+      return false
+    }
+  }
+}
+</script>
+<style  scoped>
+</style>
+