Web实验十四 Vue基础

已于 2023-12-14 15:34:02 修改
阅读量269 收藏 1
点赞数 1
文章标签： java vue.js javascript 前端 前端框架
于 2023-12-04 20:51:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_70494538/article/details/134793619
版权

一、实验目的：

1、掌握Vue的创建

2、掌握Vue的事件处理

3、掌握Vue的数据绑定

二、实验内容：

根据提供的实验样例，使用Vue.js替换原有代码，以列表渲染、事件处理、模板语法等方式完成以下效果的网页设计：

初始页面如下：

红框处的样式如下：

  1. 字体大小为13px，字体颜色为#18191C。
  2. 上下填充为8px，左右填充为16px。
  3. 边框线宽度为1px，边框样式为实线，边框线颜色为#E3E5E7，边框半径为8px。
  4. 行间距为16px，背景颜色为#FFFFFF。
  5. 鼠标放在按钮上时，鼠标变成手型，且0.2秒后按钮的背景颜色变成#E3E5E7。
  6. 点击按钮后，视频随机更换，如下：

解决方案：

<html>
  <head>
    <style>
      body{
        padding:0;
        margin: 0;
      }
      a{
        text-decoration: none;
      }
      ul{
        list-style-type: none;
        padding: 0;
      }
      .channel-layout{
        padding:0 64px;
      }
      .channel-nav-sub-item a{
        color: #61666D;
        font-size: 15px;
      }
      .channel-nav-name a{
        color:#18191C;
        font-size: 22px;
      }
      .channel-nav{
        display: flex;
        align-items: center;
      }
      .fix-wrapper{
        height: 64px;
        padding: 0 64px;
        box-shadow: 0 2px 4px rgba(0,0,0,.08);
      }
      .channel-nav-name{
        margin-right: 20px;
        min-width: max-content;
      }
      ul.channel-nav-sub-ul{
        display: flex;
        justify-content: space-between;
        list-style-type: none;
        padding:0;
        width: 620px;
      }

      .grid{
        display: grid;
        grid-template-columns: repeat(5,1fr);
        grid-gap: 20px 12px;
      }
      .video-card-image img{
        width: 100%;
        border-radius:6px;
      }

      .video-card-body{
        display: grid;
        grid-template-columns: repeat(4,1fr);
        grid-gap: 20px 12px;
      }
      .video-card-list{
        grid-column: span 4;
      }

      .video-card-info-tit a {
        color: #18191C;
      }
      .video-card-info-bottom span{
        color: rgb(148, 153, 160);
        font-size: 13px;
      }
      .area-header span , .aside-head span {
        font-size: 20px;
        color:rgb(24, 25, 28);
      }
      .area-header,.aside-head{
        margin: 16px 0;
      }
    
      .rank-list-video{
        display: grid;
        border: 1px solid #F1F2F3;
        border-radius: 6px;
        background-color: white;
      }
      .rank-list-video-item-wrap{
        display: flex;
        align-items: center;
      }

      .rank-video-card-info-tit{
        color: #18191C;
        font-size: 14px;
        line-height: 18px;
        text-overflow: ellipsis;
        overflow: hidden;
      }

      .rank-list-video-item{
        white-space: nowrap;
        overflow: hidden;
      }

      .rank-video-card-info,.rank-video-card {
        min-width: 0;
      }

      /* 在下面增添样式使得达到实验效果 */
      h4>a{
        font-size: 14px;
      }
      #transform{
        font-size: 13px;
        color: #18191C;
        line-height: 16px;
      }
      .primary-button{
        padding-top: 8px;
        padding-bottom: 8px;
        padding-left: 16px;
        padding-right: 16px;
        border: 1px solid #E3E5E7;
        border-radius: 8px;
        background-color: #FFFFFF;
        cursor: pointer;
        transition: background-color 0.2s; /* 背景颜色将在0.2秒内改变 */
        margin-left: 91%;
        margin-top: -27px;
      }
      .primary-button:hover{
        background-color: #E3E5E7; /* 鼠标悬停时的背景颜色 */
      }
      [v-cloak]{
            display: none;
        }
        .one{
        color: #ff473d;
      }
      .two{
        color:#ff6a29;
      }
      .three{
        color: #ff9214;
      }

      div>span{
        font-family: Avenir;
        font-style: italic;
        font-size: 14px;
        font-weight: 600;
        color: #C9CCD0;
        margin-right:6px;
        width: 20px;
        text-align: center;
        background-color: #FFFFFF;
      }
      
    </style>
  </head>
  <body>
    <div class="container" id="app">
      <div class="fix-wrapper">
        <div class="channel-nav">
          <div class="channel-nav-name"><a href="#">生活</a></div>
          <div class="channel-nav-sub">
            <ul class="channel-nav-sub-ul">
              <li class="channel-nav-sub-item"><a href="#">首页</a></li>
              <li class="channel-nav-sub-item"><a href="#">搞笑</a></li>
              <li class="channel-nav-sub-item"><a href="#">亲子</a></li>
              <li class="channel-nav-sub-item"><a href="#">出行</a></li>
              <li class="channel-nav-sub-item"><a href="#">三农</a></li>
              <li class="channel-nav-sub-item"><a href="#">家居房产</a></li>
              <li class="channel-nav-sub-item"><a href="#">手工</a></li>
              <li class="channel-nav-sub-item"><a href="#">绘画</a></li>
              <li class="channel-nav-sub-item"><a href="#">日常</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="channel-layout">
        <div class="grid">
          <div class="video-card-list" >
            <div class="area-header">
              <div class="left">
                <a href="#"><span>搞笑</span></a>
              </div>
              <div class="right">
                <button class="primary-button" type="button"  @click="refreshPage">
                  <span id="transform">换一换</span>
                </button>
              </div>
              
              
            </div>
            <div  class="video-card-body">

        
              <div class="video-card" v-for="(item,index) in randomData" v-cloak>

                <div class="video-card-image">
                  <img :src="item.img" :alt="item.alt">
                </div>
                <div class="video-card-info">
                  <h4 class="video-card-info-tit"><a :href="item.href">{{item.title}}</a></h4>
                  <div class="video-card-info-bottom">
                    <a :href="item.authorSpace">
                      <span class="video-card-info-author">{{item.author}}</span>
                      <span class="video-card-info-date">{{item.date}}</span>
                    </a>
                  </div>
                </div>

              </div>
            </div>
          </div>
          

          <div class="aside-wrap">
            <div class="aside-head">
              <a href="#"><span>热门</span></a>
            </div>
            <div class="aside-body" >
              <ul class="rank-list-video">

                <li class="rank-list-video-item">
                  <div class="rank-list-video-item-wrap" v-for="(item,index) in rankListVideo" v-cloak>
                    <span :class= "sstt[index]">{{index+1}}</span>
                    <a class="rank-video-card" :href="item.href">
                      <div class="rank-video-card-info">
                        <h3 class="rank-video-card-info-tit">{{item.title}}</h3>
                      </div>
                    </a>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://unpkg.com/vue@2.7.14/dist/vue.min.js"></script>
    <script>
      var v = new Vue({
        el: '#app',
        data: {
          videoCardList :[
        {
          img:"https://i2.hdslb.com/bfs/archive/cf1400c8a93d270e2dcc398603f95693bc38e023.jpg@320w_200h_1c_!web-space-index-myvideo.avif",alt:"领导说干不了就滚",
          href:"https://www.bilibili.com/video/BV1nC4y1G7qx/?spm_id_from=333.1073.sub_channel.dynamic_rank_video.click",title:"领导说干不了就滚",
          authorSpace:"https://space.bilibili.com/5294454",author:"逗比的雀巢",date:"· 10-14"
        },
        {
          img:"https://i2.hdslb.com/bfs/archive/416e0d76ae544e4dbd1e313f17ceadeb1eb7181c.jpg@320w_200h_1c_!web-space-index-myvideo.avif",alt:"公司要爆炸了 好难过",
          href:"https://www.bilibili.com/video/BV1hw41117wh/?spm_id_from=333.999.0.0",title:"公司要爆炸了 好难过",
          authorSpace:"https://space.bilibili.com/5294454",author:"逗比的雀巢",date:"· 10-1"
        },
        {
          img:"https://i2.hdslb.com/bfs/archive/c98651d66ca02ffc5f4aab37e07a1fe61f66537e.jpg@320w_200h_1c_!web-space-index-myvideo.avif",alt:"这可比手术刀好用多了",
          href:"https://www.bilibili.com/video/BV1XN411873W/?spm_id_from=333.999.0.0",title:"这可比手术刀好用多了",
          authorSpace:"",author:"逗比的雀巢",date:"· 8-14"
        },
        {
          img:"https://i0.hdslb.com/bfs/archive/b3d043827eb0fd54cf261bf282d1840756e73034.jpg@320w_200h_1c_!web-space-index-myvideo.avif",alt:"用浏览记录绑架你",
          href:"https://www.bilibili.com/video/BV14V411L7GV/",title:"用浏览记录绑架你",
          authorSpace:"https://space.bilibili.com/5294454",author:"逗比的雀巢",date:"· 7-23"
        },
        {
          img:"https://i1.hdslb.com/bfs/archive/3e6d0217919e4148a7dae1d9e491b88ba0be8ef9.jpg@320w_200h_1c_!web-space-index-myvideo.avif",alt:"答非所问（奥义超级版）",
          href:"https://www.bilibili.com/video/BV1CN41147Eo/?spm_id_from=333.1073.sub_channel.dynamic_rank_video.click",title:"答非所问（奥义超级版）",
          authorSpace:"https://space.bilibili.com/5970160",author:"小潮院长",date:"· 10-16"
        },
        {
          img:"https://i0.hdslb.com/bfs/archive/c608616167a75cf9d7883d5824e5774835f6b67a.jpg@440w_276h_1c_!web-space-index-topvideo.avif",alt:"谋 权 篡 位（番外篇①）",
          href:"https://www.bilibili.com/video/BV1aG411W7zm/?spm_id_from=333.999.0.0",title:"谋 权 篡 位（番外篇①）",
          authorSpace:"https://space.bilibili.com/5970160",author:"小潮院长",date:"· 7-9"
        },
        {
          img:"https://i2.hdslb.com/bfs/archive/3bcf9c1e0eab672fc3b73a344ea587ca6e2b691d.jpg@320w_200h_1c_!web-space-index-myvideo.avif",alt:"谋 权 篡 位（番外篇②）",
          href:"https://www.bilibili.com/video/BV1YF41197Lj/?spm_id_from=333.999.0.0",title:"谋 权 篡 位（番外篇②）",
          authorSpace:"https://space.bilibili.com/5970160",author:"小潮院长",date:"· 7-15"
        },
        {
          img:"https://i0.hdslb.com/bfs/archive/208a8f27881bf996680490f9a47d7f8a1eaa2e1a.jpg@320w_200h_1c_!web-space-index-myvideo.avif",alt:"不要“做”挑战？（第十七期）",
          href:"https://www.bilibili.com/video/BV1H94y1k7JU/?spm_id_from=333.999.0.0",title:"不要“做”挑战？（第十七期）",
          authorSpace:"https://space.bilibili.com/5970160",author:"小潮院长",date:". 8-13"
        },
        {
          img:"https://i1.hdslb.com/bfs/archive/4fa524a342e2acc2115c1b5e81ca154e58bf48eb.jpg@320w_200h_1c_!web-space-upload-video.avif",alt:"眼“色”游戏 （9）",
          href:"https://www.bilibili.com/video/BV1b14y1p7ju/",title:"眼“色”游戏 （9）",
          authorSpace:"https://space.bilibili.com/5970160",author:"小潮院长",date:". 11-8"
        },
        {
          img:"https://i0.hdslb.com/bfs/archive/04b226cbdb6190d7a7542385b6943ae173ded627.jpg@320w_200h_1c_!web-space-upload-video.avif",alt:"公司里充斥着弟弟满意的微笑～",
          href:"https://www.bilibili.com/video/BV1dg4y1X7s2/?spm_id_from=333.1073.sub_channel.latest_video.click",title:"公司里充斥着弟弟满意的微笑～",
          authorSpace:"https://space.bilibili.com/3494358571550728",author:"禁狱系男孩a",date:". 11-8"
        },
        {
          img:"https://i0.hdslb.com/bfs/archive/14f6fc39ce722b4e3a082ac4cf2d474e0c21ba1e.jpg@320w_200h_1c_!web-space-upload-video.avif",alt:"知识真的有力量",
          href:"https://www.bilibili.com/video/BV1hj411h78s/?spm_id_from=333.1073.sub_channel.latest_video.click",title:"知识真的有力量",
          authorSpace:"https://space.bilibili.com/485359169",author:"邢三狗子",date:"· 11-8"
        },
        {
          img:"https://i0.hdslb.com/bfs/archive/df3c999cb73ac0381fef1787e5efdb6e72ca2792.jpg@320w_200h_1c_!web-space-upload-video.avif",alt:"诺贝尔亲自颁奖！",
          href:"https://www.bilibili.com/video/BV1Gu4y1N7FD/?spm_id_from=333.1073.sub_channel.latest_video.click",title:"诺贝尔亲自颁奖！",
          authorSpace:"https://space.bilibili.com/70429299",author:"嘞是唐孃孃",date:"· 11-7"
        },
        {
          img:"https://i0.hdslb.com/bfs/archive/1033717a8d872ed5a68e4a01fb5be398a752449a.jpg@320w_200h_1c_!web-space-upload-video.avif",alt:"家丑又外扬了",
          href:"https://www.bilibili.com/video/BV1kM411S7x3/?spm_id_from=333.1073.sub_channel.latest_video.click",title:"家丑又外扬了",
          authorSpace:"https://space.bilibili.com/1155574439",author:"真子日记",date:"· 11-8"
        },
        {
          img:"https://i0.hdslb.com/bfs/archive/3c56b59646cf8f2269c25dad76cfca484d9140ed.jpg@320w_200h_1c_!web-space-index-myvideo.avif",alt:"各地人信念崩塌的瞬间！",
          href:"https://www.bilibili.com/video/BV1ba4y1Q7pV/?spm_id_from=333.1073.sub_channel.latest_video.click",title:"各地人信念崩塌的瞬间！",
          authorSpace:"https://space.bilibili.com/95515699",author:"粤知一二",date:"· 11-10"
        },
        {
          img:"https://i0.hdslb.com/bfs/archive/83bcf724c4df2bfc6742b0386b0c4668453d32fa.jpg@320w_200h_1c_!web-space-index-myvideo.avif",alt:"校园里的大恩人(最搞笑的哇)",
          href:"https://www.bilibili.com/festival/tmall1111?bvid=BV1sg4y1d7Lg&spm_id_from=333.1073.sub_channel.latest_video.click",title:"校园里的大恩人(最搞笑的哇)",
          authorSpace:"https://space.bilibili.com/68439967",author:"萧枭同学",date:"· 11-7"
        },
        {
          img:"https://i0.hdslb.com/bfs/archive/a9373801a3c2ace632fcc1b6ae19d2237a6f4261.jpg@320w_200h_1c_!web-space-upload-video.avif",alt:"还有哪个舍友不听话",
          href:"https://www.bilibili.com/video/BV1kg4y197pN/?spm_id_from=333.1073.sub_channel.latest_video.click",title:"还有哪个舍友不听话",
          authorSpace:"https://space.bilibili.com/585238746",author:"三哈兄弟-沙雕日常",date:"· 11-10"
        },
      ],
      rankListVideo :[
        {
          href:"https://www.bilibili.com/video/BV1nC4y1G7qx/?spm_id_from=333.1073.channel.secondary_floor_rank.click", title:"领导说干不了就滚"
        },
        {
          href:"https://www.bilibili.com/video/BV1s841167EX/?spm_id_from=333.1073.channel.secondary_floor_rank.click",title:"遗憾终究是遗憾"
        },
        {
          href:"https://www.bilibili.com/video/BV1Zw411c7ya/",title:"不多说了，请看vcr"
        },
        {
          href:"https://www.bilibili.com/video/BV1CN41147Eo/?spm_id_from=333.1073.channel.secondary_floor_rank.click",title:"答非所问（奥义超级版）"
        },
        {
          href:"https://www.bilibili.com/video/BV16G411m7QY/?spm_id_from=333.1073.channel.secondary_floor_rank.click",title:"默契兄弟"
        },
        {
          href:"https://www.bilibili.com/video/BV16C4y1G7Nk/?spm_id_from=333.1073.channel.secondary_floor_rank.click",title:"【误 入 大 电 音 寺】"
        },
        {
          href:"https://www.bilibili.com/video/BV1Wj411t7SQ/?spm_id_from=333.1073.channel.secondary_floor_rank.click",title:"你的童年遗憾有哪些?"
        },
        {
          href:"https://www.bilibili.com/video/BV1Py4y1N72x/?spm_id_from=333.1073.channel.secondary_floor_rank.click",title:"各地人的娱乐项目"
        },
      ],
      randomData : [],
      //前三个数字的样式
      sstt: [
          "one",
          "two",
          "three"
        ]
        },
        
        //mounted 生命周期钩子函数
    mounted() {
      //随机读取8个数据插入数组
  const videoCardList = this.videoCardList;
  const randomData = this.randomData;
  for (let i = 0; i < 8; i++) {
    const index = Math.floor(Math.random() * videoCardList.length);
    randomData.push(videoCardList[index]);
    //在原数组中去除已插入的数据，避免重复插入
    videoCardList.splice(index, 1);
  }
  },
  //刷新页面
  methods: {
    refreshPage() {
      location.reload();
    }
  }

      
})
    </script>
  </body>       
</html>

嚣张路过的王小明
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
web前段开发；web实验
02-10
web实验”的主题下，我们探讨的是关于这一领域的核心概念、技术栈以及实际操作的实践环节，尤其是针对软件学院的学生在学习过程中可能遇到的课程或实验内容。 首先，Web前端开发包括HTML（超文本标记语言）、CSS...
计算机专业Web前端开发课程标准（vue版本）
02-20
《计算机专业Web前端开发课程标准（vue版本）》是一门针对高校计算机专业学生的必修课，旨在教授Vue.js这一主流前端框架的基本知识和应用技能。Vue.js是一个轻量级的前端框架，它提供了高效的数据绑定和组件化功能，...
web前端开发之vue基础
Web_chicken的博客
03-03 5021
一、vue基础 1.1 啥是vue 1.1.1 创建vue 引入vue.js 的cdn节点 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 创建一个 id为app的节点 如：<div id="app"></div> 创建vue实例 <script> let app = new Vue({ el: '#app', data: { msg:
实验1：Vue开发基础
XGK8750的博客
11-19 3781
源代码：实验1（1）).rar-DNS文档类资源-CSDN下载 Web前端开发技术课程实验报告 实验1：Vue开发基础 姓名：_ __　_ ___ ___ 班级：_ _ _ ___　_ __　 学号：_ ____ ___ ___ 成绩：_ _ _ __　 一、实验目的： 掌握Vue开发环境的搭建、开发和调试工具的使用以及Vue项目的创建。 掌握Vue实例的创建及数据的绑定、Vue的事件监听操作、Vue组件的注册及组件之间的数据传...
Web前端开发技术课程实验报告实验3：Vue路由实验
XGK8750的博客
12-07 5289
实验代码:实验3第2题实验参考.rar-互联网文档类资源-CSDN下载 Web前端开发技术课程实验报告 实验3：Vue路由实验 姓名：_ __　_ ___ ___ 班级：_ _ _ ___　_ __　 学号：_ ____ ___ ___ 成绩：_ _ _ __　 一、实验目的： 掌握Vue路由相关知识及应用。 二、实验要求： 了解Vue路由相关知识和相关插件、loader的安装与使用 编写程序完成以下实验内容并上交实验报告...
【Vue3 第十一章】组件化基础
前端知识分享喵
01-09 306
组件化基础
web学习-汇率计算器
最新发布
06-05
【web学习-汇率计算器】项目是一个使用Vue.js框架构建的前端应用示例，它结合了HTML、CSS（Less）和JavaScript技术，展示了如何在实际场景中应用这些技术。以下是这个项目涉及的一些关键知识点： 1. **Vue.js**：...
web实验作业，亲测有效
12-14
【标题】 "Web实验作业，亲测有效" 暗示了这可能是一个与Web技术相关的实践项目，可能包括了Web服务器的配置、网页开发、安全性测试等方面的内容。在这个实验中，作者或提供者已经亲自验证了步骤和方法的可行性，...
东北大学软件学院web前端课程实验代码及报告
12-19
【标题】"东北大学软件学院web前端课程实验代码及报告" 涉及的主要知识点包括Web前端开发的基础理论、常用技术以及实验实践。这是一份针对东北大学软件学院学生的教学资源，旨在帮助他们掌握Web前端开发的核心技能。...
web前端框架技术 实验报告
11-25
在为期8周的“Web前端框架技术”实训课程中，学生们深入学习了Vue.js这一流行的前端框架，并在赵阳老师的指导下进行了多个项目的实践。实验报告详细记录了学生的体验和学习成果，同时也展示了他们在网页设计、编程...
web课程的实验课所有
05-29
【标题】"Web课程的实验课所有"涵盖了Web开发的基础知识和实践经验，是学习Web技术的重要环节。在Web课程中，实验课通常包括了HTML、CSS、JavaScript等基础语言的学习，以及服务器端编程、数据库交互、前端框架应用...
java web实验报告；开发环境及web基础， JSP、Servlet及JDBC、扩展JavaScript
04-19
Java Web是基于Java技术的Web应用程序开发领域，涵盖了多种技术和工具，用于构建动态、交互式的Web应用程序。...通过这四个实验，学生不仅可以掌握理论知识，还能获得宝贵的实践经验，为未来的职业生涯打下坚实的基础。
vue实现简单实时汇率计算功能
08-31
Vue.js是一个轻量级的前端JavaScript框架，它提供了响应式的数据绑定和组件化的能力，使得开发Web应用变得更加便捷。在这个示例中，我们将创建一个基础的HTML结构，并结合Vue的特性来实时计算三种货币（人民币CNY、...
web实验报告 实验参考
07-05
【标题】 "Web实验报告 实验参考" 涉及的知识点主要集中在Web技术的实践应用上，这通常包括Web开发的基本概念、编程语言、框架、服务器管理以及安全性等方面。实验报告是学习过程中对理论知识的实践验证和深入理解，...
Web技术：实验三-基于 Spring+SpringMVC+Mybaits 的 web 系统设计
05-23
（1） 在实验二的基础上，继续完善 web 系统 （2） 通过构建 Dao 层，来实现和数据库的交互 （3） 需要完成注册，登陆，修改密码，列表展示等功能，数据要从数据库读取，并且传 递给客户端。 要求： i. 界面...
Web前端开发技术（第2版）储久良课后实验材料及源代码
07-15
《Web前端开发技术（第2版）》是储久良教授编著的一本关于Web前端开发的教科书，此压缩包包含该书的课后实验材料与源代码，是学习Web前端技术的重要辅助资源。储久良教授在Web开发领域有着深厚的理论基础和丰富的...
vue城市列表实验报告.docx
12-22
Vue城市列表实验报告的核心是利用Vue.js框架来构建一个城市列表的交互式应用，这个实验旨在结合编程基础知识，如线性表的操作，以及现代前端框架的使用，提升开发者在实际项目中的技能。Vue.js是一个轻量级的...
web实验报告简化版本
04-23
【标题】"Web实验报告简化版本"涉及到的是一份关于Web技术实践的简明报告，可能涵盖了基础的Web开发概念、技术栈以及实验过程。在Web领域，这通常包括HTML、CSS、JavaScript等核心技术的学习与应用，同时也可能涉及...
1.搭建Vue开发环境 基于vue组件开发Web前端应用程序写一个实验总结
06-02
下面是基于 Vue 组件开发 Web 前端应用程序的实验总结： 基于 Vue 组件开发 Web 前端应用程序实验总结： 1. 组件的注册 在 Vue 中，可以通过 `Vue.component` 方法来注册一个组件。在注册组件时，需要指定组件的...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值