模仿风宇博客登录蒙层弹窗（vuex+computed实现）

已于 2023-05-17 21:00:31 修改
阅读量646 收藏 1
点赞数 1
分类专栏： 前端学习 文章标签： javascript vue.js 前端
于 2023-04-22 18:15:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_16992475/article/details/130308106
版权

文章目录

效果图

在这里插入图片描述

  • 使用了动态组件做组件切换
  • 使用vue内置的transition组件实现过渡效果，蒙层 和 弹框 都使用了transition，并嵌套
  • vuex + computed计算属性，实现数据 和 方法共享，让其它组件也能够控制到登录弹框
  • 蒙层使用了固定定位
  • 未实现：鼠标滚轮在蒙层上面滚动时，蒙层下面的页面也会滚动。但是，我不想使用body，overflow:hidden，这种方式，这样右侧的滚动条就会消失掉，还没找到方法。（已解决：参考-蒙层禁止页面滚动）
  • 未实现：页面会立即回到顶部（已解决：参考-蒙层禁止页面滚动））
  • 与原博客中有差异，我的是弹出来后，下面的页面静止不动了，仍然有滚动条，但滚动条里的滑块没了
  • 有其他定位相关的问题，影响了其它页面布局

    • 试了下，把这个问题解决了，只要给body加上width:100%，就解决了全部的问题（1. 有轻微的抖动，2. 其它页面的布局被搞乱了）

    • 最终的效果图如下（以下代码是最新代码）：

      在这里插入图片描述

代码

App.vue

  • 直接将Login这个组件，放入App.vue中，而Login组件使用固定定位，覆盖掉整个视口，然后，使用flex布局，让弹窗内容在中间。
<template>
  <div id="app">
      <router-view/>
    <Login/>
    <Search/>
  </div>
</template>

<script>
import Login from '@/components/model/Login.vue';
import Search from '@/components/model/Search.vue';

  export default {
    name:'App',
    data() {
      return {
        
      }
    },
    components: {
      Login,
      Search
    }
  }
</script>

<style lang="scss">
  @import url(//at.alicdn.com/t/c/font_4004562_pw9b9ygx6n.css);
  body {
    margin: 0;
    /* 不管什么情况，都特么给老子出现滚动条 */
    overflow-y: scroll !important;
    overflow-x: hidden;
    /* 这个100%很重要 */
    width: 100%;
    /* 背景渐变 */
    background: linear-gradient(90deg, rgba(247, 149, 51, .1), rgba(243, 112, 85, .1) 15%, rgba(239, 78, 123, .1) 30%, rgba(161, 102, 171, .1) 44%, rgba(80, 115, 184, .1) 58%, rgba(16, 152, 173, .1) 72%, rgba(7, 179, 155, .1) 86%, rgba(109, 186, 130, .1));
  }
  .shadow {
    box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06);
  }

  /* 整个滚动条 */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

/* 滚动条上的滚动滑块,参考： 滚动条样式修改->https://blog.csdn.net/coder_jxd/article/details/124213962 */
::-webkit-scrollbar-thumb {
    background-color: #49b1f5;
    /* 关键代码 */
    background-image: -webkit-linear-gradient(45deg,
            rgba(255, 255, 255, 0.4) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.4) 50%,
            rgba(255, 255, 255, 0.4) 75%,
            transparent 75%,
            transparent);
    border-radius: 32px;
}

/* 滚动条样式，参考： */
/* 滚动条轨道 */
::-webkit-scrollbar-track {
    background-color: #dbeffd;
    border-radius: 32px;
}

* {
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: inherit;
}
</style>

store/index.js

  • loginShow控制最外面的蒙层的v-show（即display:none）
  • componentName控制动态组件切换的组件名
  • loginShow 和 componentName都存到vuex中，提供方法入口给外界，去修改这两个值
  • 这两个值，会被Login组件使用，控制展示蒙层 和 切换的动态组件
import Vue from 'vue'
import Vuex from 'vuex'
import router from '@/router'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    loginShow: false,
    componentName: '',
    scrollTop1:0
  },
  getters: {

  },
  mutations: {
    updateComponentName(state, val) {
      state.componentName = val
    },
    updateLoginShow(state, val) {
      state.loginShow = val
    },
    showComponentName(state,componentName){

	  /* 记录此时的滚动距离 */
      let documentTop = document.scrollingElement.scrollTop;
      state.scrollTop1 = documentTop
      
      /* 调用其它mutation中的方法 */
      this.commit('updateComponentName',componentName)
      this.commit('updateLoginShow',true)
		
	  /* 保持滚动距离 */
      this._vm.$nextTick(()=>{
        document.body.style.position = "fixed"
        document.body.style.top = -state.scrollTop1 + "px";
      })
    }
  },
  actions: {
  },
  modules: {
  }
})

Login.vue

  • 给 蒙层（使用了v-show，支持过渡） 和 动态组件（动态组件支持过渡） 添加过渡样式
  • 使用 计算属性 配合使用 vuex
  • 点击蒙层时，调用vuex提供的方法，修改store中的值，然后，计算属性接收到修改的值，从而更新渲染（动态组件消失，蒙层隐藏）
<style lang="scss">
.body-mask {
    position: fixed;
    background-color: rgba(0, 0, 0, .3);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
}

.mask-content {
    max-height: 90%;
    width: 460px;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #fff;
    border-radius: 6px;
    padding: 40px 30px 10px;
}


/* 蒙层的动画 */
.mask-enter,
.mask-leave-to {
    opacity: 0;
}

.mask-enter-to,
.mask-leave {
    opacity: 1;

}

.mask-enter-active,
.mask-leave-active {
    transition: all 0.2s;
}

/* 蒙层中的组件切换的动画 */
.v-enter,
.v-leave-to {
    transform: scale(0.8);
    opacity: 0;
}

.v-enter-to,
.v-leave {
    transform: scale(1);
    opacity: 1;

}

.v-enter-active,
.v-leave-active {
    transition: all 0.2s;
}

</style>

<template>
    <transition name="mask">
        <div class="body-mask" v-show="loginShow" ref="bodyMask">
            <transition appear mode="out-in">
                <component :is="componentName" />
            </transition>
        </div>
    </transition>
</template>

<script>
import LoginBox from '@/components/model/LoginBox'
import RegisterBox from '@/components/model/RegisterBox'
import ForgetPwd from '@/components/model/ForgetPwd'
export default {
    name: 'Login',
    data() {
        return {
        }
    },
    computed: {
        componentName: {
            get() {
                return this.$store.state.componentName
            }
        },
        loginShow: {
            get() {
                return this.$store.state.loginShow
            }
        }
    },

    mounted() {
        this.$refs['bodyMask'].onclick = (e) => {
            if (e.target === this.$refs['bodyMask']) {
            
                this.$store.commit('updateComponentName', '')
                this.$store.commit('updateLoginShow', false)
                
                /* 恢复之前的滚动距离 */
                this.$nextTick(()=>{

                    document.body.style.position = "static";
                    document.body.style.top = "auto";
                    
                    /* 始终保留右边的滚动条 */
                    document.body.style.overflowY = 'scroll'
                    document.scrollingElement.scrollTop = this.$store.state.scrollTop1;
                })
            }
        }
    },
    methods: {
        
    },
    components: {
        LoginBox,
        RegisterBox,
        ForgetPwd
    }
}
</script>
LoginBox.vue

直接调用vuex暴露出来的方法，来修改store中的值，Login组件接收到修改的值，从而更新渲染（动态组件更新）

<style lang="scss" scoped>
.mask-content {
        max-height: 90%;
        width: 460px;
        overflow-y: auto;
        overflow-x: hidden;
        background-color: #fff;
        border-radius: 6px;
        // box-sizing: border-box;
        padding: 40px 30px 10px;
    }
    input {
        border: none;
        outline: none;
        border-bottom: 1px solid #9e9e9e;
        padding: 5px 0;
        width: 100%;

        font-size: 16px;

        &::placeholder {
            color: #9f9f9f;
        }
    }

    .form-item {
        margin-bottom: 40px;
        &:last-child {
            margin-bottom: 15px;
        }
    }
    .form-item-name {
        color: #696969;
        font-size: 13px;
        margin-bottom: 2px;
    }

    button {
        border:none;
        cursor: pointer;
        background-color: #2196f3;
        color: #fff;
        width: 100%;
        font-size: 16px;
        padding: 8px;
        border-radius: 4px;
        box-shadow: 0px 1px 2px 1px rgb(0 0 0 / 23%);
    }

    .entrance-tip {
        font-size: 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .entrance-social {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 20px;

        &::before {
            content: '';
            display: block;
            position: absolute;
            height: 1px;
            background-color: #d8d8d8;
            width: 60%;
        }
        span {
            position: absolute;
            font-size: 13px;
            color: #b5b5b5;
            z-index: 10;
            background-color: #fff;
            padding: 0 10px;
        }
    }

    .social-login {
        display: flex;
        justify-content: center;
    }

    span.iconfont {
        cursor: pointer;
        margin: 0 8px;
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        color: #fff;
        font-size: 18px;
        &.icon-weibo {
            background-color: #e05244;
        }
        &.icon-qq {
            background-color: #00aaee;
        }
    }

</style>

<template>
    <div class="mask-content ">
        <div class="form-item">
            <div class="form-item-name">邮箱号</div>
            <input placeholder="请输入您的邮箱"/>
        </div>
        <div class="form-item">
            <div class="form-item-name">密码</div>
            <input placeholder="请输入您的密码"/>
        </div>
        <div class="form-item">
            <button>登录</button>
        </div>
        <div class="form-item">
            <div class="entrance-tip">
                <a href="#" @click="changeComponent('RegisterBox')">立即注册</a>
                <a href="#" @click="changeComponent('ForgetPwd')">忘记密码?</a>
            </div>
        </div>
        <div class="form-item">
            <div class="entrance-social">
                <span>社交账号登录</span>
            </div>
        </div>
        <div class="form-item">
            <div class="social-login">
                <span class="iconfont icon-weibo"></span>
                <span class="iconfont icon-qq"></span>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    name: 'LoginBox',
    methods: {
        changeComponent(name) {
            this.$store.commit('updateComponentName',name)
        }
    },
    components: {
    }
}
</script>
RegisterBox.vue

直接调用vuex暴露出来的方法，来修改store中的值，Login组件接收到修改的值，从而更新渲染（动态组件更新）

<style lang="scss">
.mask-content {
        max-height: 90%;
        width: 460px;
        overflow-y: auto;
        overflow-x: hidden;
        background-color: #fff;
        border-radius: 6px;
        // box-sizing: border-box;
        padding: 40px 30px 10px;
    }
input {
    border: none;
    outline: none;
    border-bottom: 1px solid #9e9e9e;
    padding: 5px 0;
    width: 100%;

    font-size: 16px;

    &::placeholder {
        color: #9f9f9f;
    }
}

.form-item {
    margin-bottom: 40px;

    &:last-child {
        margin-bottom: 15px;
    }
}

.form-item-name {
    color: #696969;
    font-size: 13px;
    margin-bottom: 2px;
}

button {
    border: none;
    cursor: pointer;
    background-color: #f44336;
    color: #fff;
    width: 100%;
    font-size: 16px;
    padding: 8px;
    border-radius: 4px;
    box-shadow: 0px 1px 2px 1px rgb(0 0 0 / 23%);
}

.entrance-tip {
    font-size: 15px;
    align-items: center;
    font-size: 14px;
    color: #333333;

    span {
        margin-right: 5px;
    }
}

.entrance-social {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20px;

    &::before {
        content: '';
        display: block;
        position: absolute;
        height: 1px;
        background-color: #d8d8d8;
        width: 60%;
    }

    span {
        position: absolute;
        font-size: 13px;
        color: #b5b5b5;
        z-index: 10;
        background-color: #fff;
        padding: 0 10px;
    }
}

.social-login {
    display: flex;
    justify-content: center;
}

span.iconfont {
    cursor: pointer;
    margin: 0 8px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    font-size: 18px;

    &.icon-weibo {
        background-color: #e05244;
    }

    &.icon-qq {
        background-color: #00aaee;
    }
}

.check-code {
    display: flex;

    a {
        word-break: keep-all;
        padding: 5px 10px;
        color: #bdbdbd;
        /* padding-left: 10px; */
        font-size: 13px;
    }
}
</style>

<template>
    <div class="mask-content">
        <div class="form-item">
            <div class="form-item-name">邮箱号</div>
            <input placeholder="请输入您的邮箱" />
        </div>
        <div class="form-item">
            <div class="form-item-name">验证码</div>
            <div class="check-code">
                <input placeholder="请输入位数验证码" />
                <a href="#">发送</a>
            </div>
        </div>
        <div class="form-item">
            <div class="form-item-name">密码</div>
            <input placeholder="请输入您的密码" />
        </div>
        <div class="form-item">
            <button>注册</button>
        </div>
        <div class="form-item">
            <div class="entrance-tip">
                <span>已有账号?</span>
                <a href="#" @click="changeComponent('LoginBox')">登录</a>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    name: 'RegisterBox',
    methods: {
        changeComponent(name) {
            this.$store.commit('updateComponentName',name)
        }
    },
    components: {
    }
}
</script>
ForgetPwd.vue

直接调用vuex暴露出来的方法，来修改store中的值，Login组件接收到修改的值，从而更新渲染（动态组件更新）

<style lang="scss">
.mask-content {
        max-height: 90%;
        width: 460px;
        overflow-y: auto;
        overflow-x: hidden;
        background-color: #fff;
        border-radius: 6px;
        // box-sizing: border-box;
        padding: 40px 30px 10px;
    }
input {
    border: none;
    outline: none;
    border-bottom: 1px solid #9e9e9e;
    padding: 5px 0;
    width: 100%;

    font-size: 16px;

    &::placeholder {
        color: #9f9f9f;
    }
}

.form-item {
    margin-bottom: 40px;

    &:last-child {
        margin-bottom: 15px;
    }
}

.form-item-name {
    color: #696969;
    font-size: 13px;
    margin-bottom: 2px;
}

button {
    border: none;
    cursor: pointer;
    background-color: #4caf50;
    color: #fff;
    width: 100%;
    font-size: 16px;
    padding: 8px;
    border-radius: 4px;
    box-shadow: 0px 1px 2px 1px rgb(0 0 0 / 23%);
}

.entrance-tip {
    font-size: 15px;
    align-items: center;
    font-size: 14px;
    color: #333333;

    span {
        margin-right: 5px;
    }
}

.entrance-social {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20px;

    &::before {
        content: '';
        display: block;
        position: absolute;
        height: 1px;
        background-color: #d8d8d8;
        width: 60%;
    }

    span {
        position: absolute;
        font-size: 13px;
        color: #b5b5b5;
        z-index: 10;
        background-color: #fff;
        padding: 0 10px;
    }
}

.social-login {
    display: flex;
    justify-content: center;
}

span.iconfont {
    cursor: pointer;
    margin: 0 8px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    font-size: 18px;

    &.icon-weibo {
        background-color: #e05244;
    }

    &.icon-qq {
        background-color: #00aaee;
    }
}

.check-code {
    display: flex;

    a {
        word-break: keep-all;
        padding: 5px 10px;
        color: #bdbdbd;
        /* padding-left: 10px; */
        font-size: 13px;
    }
}
</style>

<template>
    <div class="mask-content ">
        <div class="form-item">
            <div class="form-item-name">邮箱号</div>
            <input placeholder="请输入您的邮箱" />
        </div>
        <div class="form-item">
            <div class="form-item-name">验证码</div>
            <div class="check-code">
                <input placeholder="请输入位数验证码" />
                <a href="#">发送</a>
            </div>
        </div>
        <div class="form-item">
            <div class="form-item-name">密码</div>
            <input placeholder="请输入您的密码" />
        </div>
        <div class="form-item">
            <button>确定</button>
        </div>
        <div class="form-item">
            <div class="entrance-tip">
                <span>已有账号?</span>
                <a href="#" @click="changeComponent('LoginBox')">登录</a>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    name: 'ForgetPwd',
    methods: {
        changeComponent(name) {
            this.$store.commit('updateComponentName',name)
        }
    },
    components: {
    }
}
</script>

NavBar.vue

直接调用vuex暴露出来的方法，来修改store中的值，Login组件接收到修改的值，从而更新渲染（动态组件更新，并展示蒙层）

<li>
    <a class="menu-a" href="#">
        <i class="iconfont icon-denglu"></i>
        <span @click="$store.commit('showComponentName', 'LoginBox')">登录</span>
    </a>
</li>
ps酷教程
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Vue案例详解(七):制作登录页面
柳老师的博客
07-08 4929
本篇文章写于2023年7月8日,使用的包和工具基本上都是最新的(Vue3, VS code),如果你查看的时间比较晚,请注意版本的区别.前面几篇文章介绍了Vue的使用,项目的搭建和一些基本信息.Vue3案例详解(一)_flame.liu的博客-CSDN博客Vue3案例详解(二)_flame.liu的博客-CSDN博客Vue3案例详解(三)_flame.liu的博客-CSDN博客Vue3案例详解(四)_flame.liu的博客-CSDN博客Vue3案例详解(五)_flame.liu的博客-CSDN博客。
《风丶宇的个人博客》项目开发
weixin_52067659的博客
12-21 1581
《风丶宇的个人博客》项目开发
学习风`宇博客用户权限菜单模块
pscool的博客
04-18 1177
要形成右边这种菜单，需要2部分来做支撑。
个人博客的部署
yeshen.org
05-13 1042
以前是用GITHUB-PAGE，自己手写了几行HTML JS CSS 然后就挂上去了，实际上写博客还是在CSDN上写，昨天买了一台腾讯云的Ubuntu服务器，自己动手部署了一下。这篇博客主要是记录我这两天以来的操作，给自己做的备忘。服务器个人博客的话，可以选择最低配，根据流量来算费用。 流量费大约是0.8¥/G,服务器月租是45/月，买久一点能打半折。算下来，两千可以用三年，还是挺好的。阿里云我同
vue登陆页面
qq_45179361的博客
02-11 8273
vue登陆页面实现。
vue实现登录界面
热门推荐
Hi-Sun的博客
06-16 5万+
使用Vue实现简单的用户登录界面，登录成功以后查询账号用户类型进行相应的页面路由跳转，效果如下图所示： HTML部分： <div class="loginbody"> <div class="login"> <div class="mylogin" align="center"> <h4>登录</h4> <el-form :model="loginForm"
【Vue框架】基本的login登录
kevin的博客
08-24 2280
最近事情比较多，只能抽时间看了，放几天就把之前弄的都忘了，现在只挑着核心的部分看。现在铺垫了这么久，终于可以看前端最基本的登录了😂。个人理解：作用：从一个Vue文件（路由）跳转到另一个Vue文件（另一个路由），就会通过路由守卫来判断是否有权限正常跳转。全局路由，通过push({path:'路径',query:{id:参数}})push这里应该像是把route（路由）进栈，然后再根据路由守卫的next()把route出栈，跳转到出栈的route。route是什么？
Vue+Vuex实现自动登录的知识点详解
10-15
Vue+Vuex 实现自动登录的关键在于有效地管理用户认证状态，并确保安全性。在这个过程中，Vue 负责前端界面交互，Vuex 提供全局状态管理，而与服务器的交互则通过 HTTP 请求完成。 首先，自动登录的核心是保存用户的...
webpack+vuex+axios 跨域请求数据的示例代码
08-27
Webpack+Vuex+Axios 跨域请求数据的示例代码 在本篇文章中，我们将介绍如何使用 Webpack、Vuex 和 Axios 来实现跨域请求数据的示例代码。 首先，让我们来了解一下什么是跨域请求。跨域请求是指从一个域名下的页面...
详细讲解vue2+vuex+axios
08-30
通过这种方式，Vue2、Vuex 和 Axios 结合，可以实现高效的状态管理和数据获取，确保组件间的数据同步，同时提供了一种可维护和可扩展的代码组织方式。这使得大型 Vue2 应用能够更有序地处理复杂的数据流和交互。
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
10-15
在这个教程中，我们将探讨如何使用Vue、Vuex和axios从后台获取数据并存储到Vuex中，以便在组件之间共享。 首先，为了在Vue项目中使用Vuex，我们需要安装它。在终端中，执行`npm install vuex --save-dev`来安装依赖...
vuex实现登录状态的存储,未登录状态不允许浏览的方法
08-27
以下是如何使用Vuex实现登录状态的存储以及如何在未登录状态下阻止用户浏览受保护的页面。 首先，我们需要安装并设置Vuex。通过运行`npm install vuex`或`yarn add vuex`来安装。在项目中创建一个名为`store.js`的...
Vue+Flask电商后台管理系统
最新发布
m0_63533079的博客
02-28 2386
使用Vue.js前端框架和python后端框架Flask，打造一个功能强大、易于使用的电商后台管理系统Vue+Flask前后端分离项目
Vue纯前端：榜单管理系统
m0_53881899的博客
01-12 1万+
Vue纯前端：榜单管理系统
登录注册前后端分离及Vuex使用
2303_78819023的博客
06-21 1303
uni-easyinput v-model="valiFormData.username" placeholder="请输入用户名" />password: this.valiFormData.password, //密码。// 判断语句，如果输入的用户名和密码正确，就跳转到我的页面。// 当表单校验通过的时候，就调用登录的接口，实现登录的功能。msg: "密码错误"
学习风`宇blog的websocket模块
pscool的博客
04-16 1122
这个类基本上处理了websocket的几乎所有逻辑，每当有一个新的连接进来时，都会创建一个新的WebSocketServiceImpl对象，并且回调@OnOpen标识的方法，@OnOpen方法可以声明Session 和 EndpointConfig 类型参数，Session将会被存储起来，用于后面与客户端进行双向通信。websocket服务端和客户端之间发送的消息内容，使用json格式，它必须先指明消息类型，然后对方得到消息类型后，就能根据该消息类型做相应的处理。
一个 vue 登陆页面
ximingx
12-08 9026
vue 登陆页面 组件
Vue项目登录界面
qq_50729588的博客
08-03 4311
Vue的登录界面样式设计
（四）Vue项目——微商城：实现登录和注册
m0_71824048的博客
05-23 1520
通过window+Apache+php+MySQL 服务器配置提升对项目开发认识。
用vue组件+vue路由+vuex+axios实现增删改查
05-29
好的，我可以为你提供一个简单的示例代码，用于展示如何使用Vue组件化、Vue路由、Vuex和Axios来实现增删改查功能。 首先，我们需要安装Vue、Vue Router、Vuex和Axios，你可以使用npm或yarn来安装它们。 接下来，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值