|
|
@@ -0,0 +1,673 @@
|
|
|
+<template>
|
|
|
+ <view class="login-wrapper" :style="colorStyle">
|
|
|
+ <view class="login-top"></view>
|
|
|
+ <view class="shading">
|
|
|
+ <image :src="logoUrl" v-if="logoUrl" />
|
|
|
+ <image src="../static/logo2.png" v-else />
|
|
|
+ </view>
|
|
|
+ <view class="whiteBg">
|
|
|
+ <view class="tips">
|
|
|
+ <view class="tips-btn on">
|
|
|
+ <view>注册账号</view>
|
|
|
+ <view class="line"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="list">
|
|
|
+ <view class="item">
|
|
|
+ <view class="acea-row row-middle">
|
|
|
+ <image src="../static/phone_1.png" class="itemImg-add"></image>
|
|
|
+ <input type="text" placeholder="输入手机号码" v-model="account" maxlength="11" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="acea-row row-middle">
|
|
|
+ <image src="../static/phone_1.png" class="itemImg-add"></image>
|
|
|
+ <input type="text" placeholder="输入邀请码" v-model="spread_spid" maxlength="11" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="acea-row row-middle">
|
|
|
+ <image src="../static/code_2.png" class="item-img"></image>
|
|
|
+ <input type="text" placeholder="填写验证码" maxlength="6" class="codeIput" v-model="captcha" />
|
|
|
+ <button class="code" :disabled="disabled" :class="disabled === true ? 'on' : ''" @click="code">
|
|
|
+ {{ text }}
|
|
|
+ </button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="logon" @click="loginMobile">注册</view>
|
|
|
+ <!-- #ifdef H5 -->
|
|
|
+ <view class="logon" style="margin-top: 20rpx;" @click="domApp">下载APP</view>
|
|
|
+ <!-- #endif -->
|
|
|
+ <view class="protocol">
|
|
|
+ <checkbox-group @change='ChangeIsDefault'>
|
|
|
+ <checkbox :class="inAnimation?'trembling':''" @animationend='inAnimation=false'
|
|
|
+ :checked="protocol ? true : false" />已阅读并同意 <text class="main-color"
|
|
|
+ @click="privacy('user')">《用户协议》</text>
|
|
|
+ 与<text class="main-color" @click="privacy('privacy ')">《隐私协议》</text>
|
|
|
+ </checkbox-group>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="bottom"></view>
|
|
|
+ <Verify @success="success" :captchaType="'blockPuzzle'" :imgSize="{ width: '330px', height: '155px' }"
|
|
|
+ ref="verify"></Verify>
|
|
|
+ <view class="copyright" v-if="copyrightContext">{{copyrightContext}}</view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ import dayjs from "@/plugin/dayjs/dayjs.min.js";
|
|
|
+ import sendVerifyCode from "@/mixins/SendVerifyCode";
|
|
|
+ import {
|
|
|
+ getAppVersion
|
|
|
+ } from '@/api/api.js';
|
|
|
+ import {
|
|
|
+ loginMobile,
|
|
|
+ registerVerify,
|
|
|
+ getCodeApi,
|
|
|
+ getUserInfo,
|
|
|
+ } from "@/api/user";
|
|
|
+ import attrs, {
|
|
|
+ required,
|
|
|
+ alpha_num,
|
|
|
+ chs_phone
|
|
|
+ } from "@/utils/validate";
|
|
|
+ import {
|
|
|
+ validatorDefaultCatch
|
|
|
+ } from "@/utils/dialog";
|
|
|
+ import {
|
|
|
+ getLogo
|
|
|
+ } from "@/api/public";
|
|
|
+ // import cookie from "@/utils/store/cookie";
|
|
|
+ import {
|
|
|
+ VUE_APP_API_URL
|
|
|
+ } from "@/utils";
|
|
|
+ // #ifdef APP-PLUS
|
|
|
+ import {
|
|
|
+ wechatAppAuth
|
|
|
+ } from '@/api/api.js'
|
|
|
+ // #endif
|
|
|
+ const BACK_URL = "login_back_url";
|
|
|
+ import colors from '@/mixins/color.js';
|
|
|
+ import Verify from '../components/verify/verify.vue';
|
|
|
+ export default {
|
|
|
+ name: "Login",
|
|
|
+ components: {
|
|
|
+ Verify
|
|
|
+ },
|
|
|
+ mixins: [sendVerifyCode, colors],
|
|
|
+ data: function() {
|
|
|
+ return {
|
|
|
+ inAnimation: false,
|
|
|
+ protocol: false,
|
|
|
+ account: "",
|
|
|
+ password: "",
|
|
|
+ spread_spid: '',
|
|
|
+ captcha: "",
|
|
|
+ type: "login",
|
|
|
+ logoUrl: "",
|
|
|
+ keyCode: "",
|
|
|
+ keyLock: true,
|
|
|
+ copyrightContext: ''
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad(res) {
|
|
|
+ let self = this;
|
|
|
+ if (res.spid) {
|
|
|
+ self.spread_spid = res.spid;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted: function() {
|
|
|
+ // this.getCode();
|
|
|
+ this.getLogoImage();
|
|
|
+ this.spread_spid = this.$Cache.get("spid");
|
|
|
+ if (!this.spid) {
|
|
|
+ this.spread_spid = this.$Cache.get("spid");
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // #ifdef H5
|
|
|
+ domApp() {
|
|
|
+ const bool = navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == 'micromessenger';
|
|
|
+ if (bool) {
|
|
|
+ uni.showModal({
|
|
|
+ title: '提示',
|
|
|
+ content: '无法在微信中下载，请用浏览器打开下载',
|
|
|
+ showCancel: false,
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ getAppVersion().then((res) => {
|
|
|
+ console.log(res, 'res');
|
|
|
+ window.open(res.data.apk)
|
|
|
+ }).catch((err) => {
|
|
|
+ console.log(err, 'err');
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // #endif
|
|
|
+ ChangeIsDefault(e) {
|
|
|
+ this.$set(this, 'protocol', !this.protocol);
|
|
|
+ },
|
|
|
+ success(data) {
|
|
|
+ this.$refs.verify.hide()
|
|
|
+ getCodeApi()
|
|
|
+ .then(res => {
|
|
|
+ this.keyCode = res.data.key;
|
|
|
+ this.getCode(data);
|
|
|
+ })
|
|
|
+ .catch(res => {
|
|
|
+ this.$util.Tips({
|
|
|
+ title: res
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ code() {
|
|
|
+ let that = this
|
|
|
+ if (!that.protocol) {
|
|
|
+ this.inAnimation = true
|
|
|
+ return that.$util.Tips({
|
|
|
+ title: '请先阅读并同意协议'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if (!that.account) return that.$util.Tips({
|
|
|
+ title: '请填写手机号码'
|
|
|
+ });
|
|
|
+ if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.account)) return that.$util.Tips({
|
|
|
+ title: '请输入正确的手机号码'
|
|
|
+ });
|
|
|
+ this.$refs.verify.show()
|
|
|
+ },
|
|
|
+ async getLogoImage() {
|
|
|
+ let that = this;
|
|
|
+ getLogo(2).then(res => {
|
|
|
+ that.logoUrl = res.data.logo_url;
|
|
|
+ that.copyrightContext = res.data.copyrightContext;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ async loginMobile() {
|
|
|
+ let that = this;
|
|
|
+ if (!that.protocol) {
|
|
|
+ this.inAnimation = true
|
|
|
+ return that.$util.Tips({
|
|
|
+ title: '请先阅读并同意协议'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if (!that.account) return that.$util.Tips({
|
|
|
+ title: '请填写手机号码'
|
|
|
+ });
|
|
|
+ if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.account)) return that.$util.Tips({
|
|
|
+ title: '请输入正确的手机号码'
|
|
|
+ });
|
|
|
+ if (!that.captcha) return that.$util.Tips({
|
|
|
+ title: '请填写验证码'
|
|
|
+ });
|
|
|
+ if (!/^[\w\d]+$/i.test(that.captcha)) return that.$util.Tips({
|
|
|
+ title: '请输入正确的验证码'
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ if (this.keyLock) {
|
|
|
+ this.keyLock = !this.keyLock
|
|
|
+ } else {
|
|
|
+ return that.$util.Tips({
|
|
|
+ title: '请勿重复点击'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ loginMobile({
|
|
|
+ phone: that.account,
|
|
|
+ captcha: that.captcha,
|
|
|
+ spread_spid: that.spread_spid
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ let data = res.data;
|
|
|
+ that.$store.commit("LOGIN", {
|
|
|
+ 'token': data.token,
|
|
|
+ 'time': data.expires_time - this.$Cache.time()
|
|
|
+ });
|
|
|
+ let backUrl = that.$Cache.get(BACK_URL) || "/pages/index/index";
|
|
|
+ that.$Cache.clear(BACK_URL);
|
|
|
+ uni.showToast({
|
|
|
+ title: '注册成功'
|
|
|
+ });
|
|
|
+ getUserInfo().then(res => {
|
|
|
+ this.keyLock = true
|
|
|
+ that.$store.commit("SETUID", res.data.uid);
|
|
|
+ that.$store.commit("UPDATE_USERINFO", res.data);
|
|
|
+ if (backUrl.indexOf('/pages/users/login/index') !== -1) {
|
|
|
+ backUrl = '/pages/index/index';
|
|
|
+ }
|
|
|
+ // uni.reLaunch({
|
|
|
+ // url: backUrl
|
|
|
+ // });
|
|
|
+ })
|
|
|
+ })
|
|
|
+ .catch(res => {
|
|
|
+ this.keyLock = true
|
|
|
+ that.$util.Tips({
|
|
|
+ title: res
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ async getCode(data) {
|
|
|
+ console.log('data-------', data);
|
|
|
+ let that = this;
|
|
|
+ if (!that.account) return that.$util.Tips({
|
|
|
+ title: '请填写手机号码'
|
|
|
+ });
|
|
|
+ if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.account)) return that.$util.Tips({
|
|
|
+ title: '请输入正确的手机号码'
|
|
|
+ });
|
|
|
+ await registerVerify({
|
|
|
+ phone: that.account,
|
|
|
+ type: that.type,
|
|
|
+ key: that.keyCode,
|
|
|
+ captchaType: 'blockPuzzle',
|
|
|
+ captchaVerification: data.captchaVerification
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ that.$util.Tips({
|
|
|
+ title: res.msg
|
|
|
+ });
|
|
|
+ that.sendCode();
|
|
|
+ })
|
|
|
+ .catch(res => {
|
|
|
+ that.$util.Tips({
|
|
|
+ title: res
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ privacy(type) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: "/pages/users/privacy/index?type=" + type
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .copyright {
|
|
|
+ width: 650rpx;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 30rpx;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -325rpx;
|
|
|
+ font-size: 20rpx;
|
|
|
+ color: #999999;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ .domain {
|
|
|
+ color: #478BF1;
|
|
|
+ margin-left: 6rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .itemImg-add {
|
|
|
+ width: 24rpx;
|
|
|
+ height: 34rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-img {
|
|
|
+ width: 28rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/uni-checkbox .uni-checkbox-input {
|
|
|
+ margin-top: -6rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .appLogin {
|
|
|
+ margin-top: 60rpx;
|
|
|
+
|
|
|
+ .hds {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #B4B4B4;
|
|
|
+
|
|
|
+ .line {
|
|
|
+ width: 68rpx;
|
|
|
+ height: 1rpx;
|
|
|
+ background: #CCCCCC;
|
|
|
+ }
|
|
|
+
|
|
|
+ p {
|
|
|
+ margin: 0 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-wrapper {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-top: 30rpx;
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 68rpx;
|
|
|
+ height: 68rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .apple-btn {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 246rpx;
|
|
|
+ height: 66rpx;
|
|
|
+ margin-left: 30rpx;
|
|
|
+ background: #EAEAEA;
|
|
|
+ border-radius: 34rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+
|
|
|
+ .icon-s-pingguo {
|
|
|
+ color: #333;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ font-size: 34rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .iconfont {
|
|
|
+ font-size: 40rpx;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .wx {
|
|
|
+ background-color: #61C64F;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mima {
|
|
|
+ background-color: #28B3E9;
|
|
|
+ }
|
|
|
+
|
|
|
+ .yanzheng {
|
|
|
+ background-color: #F89C23;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pingguo {
|
|
|
+ margin-left: 60rpx;
|
|
|
+ background-color: #000;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .main-color {
|
|
|
+ color: var(--view-theme);
|
|
|
+ }
|
|
|
+
|
|
|
+ .code img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .acea-row.row-middle {
|
|
|
+ input {
|
|
|
+ margin-left: 20rpx;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-wrapper {
|
|
|
+ .login-top {
|
|
|
+ height: 358rpx;
|
|
|
+ background-color: var(--view-theme);
|
|
|
+ background-image: url(../static/login.png);
|
|
|
+ background-size: cover;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 101%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .shading {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 100%;
|
|
|
+ margin-top: -230rpx;
|
|
|
+ position: relative;
|
|
|
+ z-index: 8;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 180rpx;
|
|
|
+ height: 180rpx;
|
|
|
+ top: 40rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .whiteBg {
|
|
|
+ background-color: #fff;
|
|
|
+ margin: -30rpx 56rpx 0rpx 56rpx;
|
|
|
+ box-shadow: 0px 2px 14px 0px rgba(0, 0, 0, 0.08);
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 60rpx;
|
|
|
+ position: relative;
|
|
|
+ z-index: 6;
|
|
|
+
|
|
|
+ .tips {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ height: 50rpx;
|
|
|
+ margin: 40rpx;
|
|
|
+ color: #999;
|
|
|
+
|
|
|
+ .tips-btn {
|
|
|
+ margin: 0 31rpx 0 48rpx;
|
|
|
+ color: #999999;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 32rpx;
|
|
|
+
|
|
|
+
|
|
|
+ /* Safari 与 Chrome */
|
|
|
+ .line {
|
|
|
+ width: 80rpx;
|
|
|
+ height: 6rpx;
|
|
|
+ background: linear-gradient(135deg, var(--view-minorColor) 0%, var(--view-theme) 100%);
|
|
|
+ border-radius: 2px;
|
|
|
+ margin: 10rpx auto 0 auto;
|
|
|
+ animation: myfirst .3s;
|
|
|
+ -webkit-animation: myfirst .3s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .none {
|
|
|
+ width: 80rpx;
|
|
|
+ background: #fff;
|
|
|
+ height: 6rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes myfirst {
|
|
|
+ 0% {
|
|
|
+ width: 0rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ width: 80rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @-webkit-keyframes myfirst
|
|
|
+
|
|
|
+ /* Safari 与 Chrome */
|
|
|
+ {
|
|
|
+ 0% {
|
|
|
+ width: 0rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ width: 80rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .tips-btn.on {
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: var(--view-theme);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .list {
|
|
|
+ border-radius: 16rpx;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .forgetPwd {
|
|
|
+ text-align: right;
|
|
|
+ margin-top: 10rpx;
|
|
|
+ color: #666666;
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item {
|
|
|
+ border-bottom: 1px solid #F0F0F0;
|
|
|
+ background: #fff;
|
|
|
+
|
|
|
+ .row-middle {
|
|
|
+ position: relative;
|
|
|
+ padding: 16rpx 25rpx;
|
|
|
+
|
|
|
+ input {
|
|
|
+ flex: 1;
|
|
|
+ font-size: 28rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .code {
|
|
|
+ position: absolute;
|
|
|
+ right: 30rpx;
|
|
|
+ top: 50%;
|
|
|
+ color: var(--view-theme);
|
|
|
+ font-size: 26rpx;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .logon {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 86rpx;
|
|
|
+ margin-top: 48rpx;
|
|
|
+ background: linear-gradient(135deg, var(--view-minorColor) 0%, var(--view-theme) 100%);
|
|
|
+ border-radius: 120rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: 30rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .protocol {
|
|
|
+ margin-top: 40rpx;
|
|
|
+ color: #999999;
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .trembling {
|
|
|
+ animation: shake 0.6s;
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes shake {
|
|
|
+
|
|
|
+ 0%,
|
|
|
+ 100% {
|
|
|
+ -webkit-transform: translateX(0);
|
|
|
+ }
|
|
|
+
|
|
|
+ 10%,
|
|
|
+ 30%,
|
|
|
+ 50%,
|
|
|
+ 70%,
|
|
|
+ 90% {
|
|
|
+ -webkit-transform: translateX(-5rpx);
|
|
|
+ }
|
|
|
+
|
|
|
+ 20%,
|
|
|
+ 40%,
|
|
|
+ 60%,
|
|
|
+ 80% {
|
|
|
+ -webkit-transform: translateX(5rpx);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @-o-keyframes shake {
|
|
|
+
|
|
|
+ /* Opera */
|
|
|
+ 0%,
|
|
|
+ 100% {
|
|
|
+ -webkit-transform: translateX(0);
|
|
|
+ }
|
|
|
+
|
|
|
+ 10%,
|
|
|
+ 30%,
|
|
|
+ 50%,
|
|
|
+ 70%,
|
|
|
+ 90% {
|
|
|
+ -webkit-transform: translateX(-5rpx);
|
|
|
+ }
|
|
|
+
|
|
|
+ 20%,
|
|
|
+ 40%,
|
|
|
+ 60%,
|
|
|
+ 80% {
|
|
|
+ -webkit-transform: translateX(5rpx);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @-webkit-keyframes shake {
|
|
|
+
|
|
|
+ /* Safari 和 Chrome */
|
|
|
+ 0%,
|
|
|
+ 100% {
|
|
|
+ -webkit-transform: translateX(0);
|
|
|
+ }
|
|
|
+
|
|
|
+ 10%,
|
|
|
+ 30%,
|
|
|
+ 50%,
|
|
|
+ 70%,
|
|
|
+ 90% {
|
|
|
+ -webkit-transform: translateX(-5rpx);
|
|
|
+ }
|
|
|
+
|
|
|
+ 20%,
|
|
|
+ 40%,
|
|
|
+ 60%,
|
|
|
+ 80% {
|
|
|
+ -webkit-transform: translateX(5rpx);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @-moz-keyframes shake {
|
|
|
+
|
|
|
+ /* Firefox */
|
|
|
+ 0%,
|
|
|
+ 100% {
|
|
|
+ -moz-transform: translateX(0);
|
|
|
+ }
|
|
|
+
|
|
|
+ 10%,
|
|
|
+ 30%,
|
|
|
+ 50%,
|
|
|
+ 70%,
|
|
|
+ 90% {
|
|
|
+ -moz-transform: translateX(-5rpx);
|
|
|
+ }
|
|
|
+
|
|
|
+ 20%,
|
|
|
+ 40%,
|
|
|
+ 60%,
|
|
|
+ 80% {
|
|
|
+ -moz-transform: translateX(5rpx);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
