每日一题：阅读吧

介绍

“读万卷书，行万里路”，无论你现在贫穷或富有，身和心一定要有一个在路上。那么，在快节奏的今天，人们是如何利用碎片化的时间去阅读的呢？没错，那就是电子书了。有了它，我们就可以随时随地，想读就读～

本题需要在已提供的基础项目中使用 Vue 2.x 完善代码，最终实现一个简易的电子书阅读器。

准备

开始答题前，需要先打开本题的项目文件夹，目录结构如下：

1
2
3
4
5
├── effect.gif
├── index.html
├── css
└── js
    └── vue.js

其中：

  • effect.gif 是最终实现的效果图。
  • index.html 是主页面。
  • css 是样式文件夹。
  • js/vue.js 是 Vue 2.x 文件。

注意：打开环境后发现缺少项目代码，请手动键入下述命令进行下载：

1
2
cd /home/project
wget https://labfile.oss.aliyuncs.com/courses/9790/07.zip && unzip 07.zip && rm 07.zip

在浏览器中预览 index.html 页面，显示如下所示：

初始效果

目标

请在 index.html 文件中补全代码，最终实现以下功能：

  1. 实现头部工具栏显隐功能。
  • 头部工具栏中的关闭图标和页面右上侧的设置图标，可以进行头部工具栏的显隐切换。效果如下：

关闭按钮

设置按钮

  1. 实现设置阅读主题功能。
  • 点击头部工具栏阅读主题后面任意一个圆形色块，该色块显示勾选状态（即 .icon-selected），同时阅读区的背景色修改为该色块对应颜色。效果如下：

选中阅读主题色效果

  • 当阅读区的背景色为黑色时，阅读区的字体色为白色（即 #ffffff），其它背景色对应的字体颜色为黑色（即 #333333）。

背景色为黑色时，阅读区的字体色为白色

  1. 实现设置字体大小功能。
  • 点击工具栏中 “A-” 或 “A+” 按钮，阅读区的字体大小呈 2px 递减或递增，并将字号同步更新到 “A-” 和 “A+” 之间的元素（即 .lang\）中，需要注意的是：字体最小为 12px，最大为 48px，且阅读区的行高（即 *line-height* CSS 属性）始终比其字体大小多 10px。

阅读区字体大小和行高效果图

完成后的效果见文件夹下面的 gif 图，图片名称为 effect.gif（提示：可以通过 VS Code 或者浏览器预览 gif 图片）。

规定

  • 请勿修改 index.html 文件外的任何内容。
  • 请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径、class 名、id 名、图片名等，以免造成无法判题通过。

判分标准

  • 实现头部工具栏显隐功能，得 4 分。
  • 实现设置阅读主题功能，得 8 分。
  • 实现设置字体大小功能，得 8 分。

总通过次数: 351 | 总提交次数: 407 | 通过率: 86.2%

难度: 中等 标签: 2022, 国赛, Web 前端, Vue.js

题解

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>阅读吧</title>
    <link rel="stylesheet" href="./css/iconfont/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="./css/index.css" />
  </head>
  <body>
    <div id="app">
      <!-- TODO：请在下面实现需求 -->
      <!-- 设置按钮图标 -->
      <a class="iconfont icon-setting" @click="openNavbar"></a>
      <!-- 头部工具栏 -->
      <transition name="fade" ref="fade" v-if="isNavbar">
        <div class="header">
          <ul class="tools">
            <li class="container">
              <div class="left">阅读主题</div>
              <!-- 设置主题的圆形色块 -->
              <div class="right" id="setBG">
                <a v-for="(item, index) in bgList" 
                :style="{ 'background-color': item  }" 
                :key="item"
                :class="activeIndex === index ? 'iconfont icon-selected' : ''"
                @click="changeActive(index)"
                ></a>
              </div>
            </li>
            <li class="container">
              <div class="left">字体大小</div>
              <!-- 设置字体大小的按钮 -->
              <div class="set-font">
                <a class="prev" @click="changeTextSize(-2)">A-</a><b></b> <span class="lang">{{ fontSize }}</span
                ><b></b>
                <a class="next" @click="changeTextSize(2)">A+</a>
              </div>
            </li>
            <li class="container">
              <!-- 关闭 x 图标 -->
              <a class="iconfont icon-close" @click="closeNavbar"></a>
            </li>
          </ul>
        </div>
      </transition>

      <!-- 阅读区 -->
      <p
      class="text-content"
      :style="{
        'background-color': bgList[activeIndex], 
        'color': activeIndex !== 4 ? '#333333' : '#ffffff',
        'font-size': fontSize + 'px',
        'line-height': fontSize + 10 + 'px'
      }"
      >
        汪淼觉得，来找他的这四个人是一个奇怪的组合：两名警察和两名军人，如果那两个军人是武警还算正常，但这是两名陆军军官。<br /><br />

        汪淼第一眼就对来找他的警察没有好感。其实那名穿警服的年轻人还行，举止很有礼貌，但那位便衣就让人讨厌了。这人长得五大三粗，一脸横肉，穿着件脏兮兮的皮夹克，浑身烟味，说话粗声大嗓，是最令汪淼反感的那类人。<br /><br />

        “汪淼？”那人问，直呼其名令汪淼很不舒服，况且那人同时还在点烟，头都不抬一下。不等汪淼回答，他就向旁边那位年轻人示意了一下，后者向汪淼出示了警官证，他点完烟后就直接向屋里闯。<br /><br />

        “请不要在我家里抽烟。”汪淼拦住了他。<br /><br />

        “哦，对不起，汪教授。这是我们史强队长。”年轻警官微笑着说，同时对姓史的使了个眼色。<br /><br />

        “成，那就在楼道里说吧。”史强说着，深深地吸了一大口，手中的烟几乎燃下去一半，之后竟不见吐出烟来。“你问。”他又向年轻警官偏了一下头。<br /><br />

        “汪教授，我们是想了解一下，最近你与‘科学边界’学会的成员有过接触，是吧？”<br /><br />

        “‘科学边界’是一个在国际学术界很有影响的学术组织，成员都是著名学者。这样一个合法的学术组织，我怎么就不能接触了呢？”<br /><br />

        “你看看你这个人！”史强大声说，“我们说它不合法了吗？我们说不让你接触了吗？”他说着，刚才吸进肚子里的烟都喷到汪淼脸上。<br /><br />

        “那好，这属于个人隐私，我没必要回答你们的问题。”<br /><br />

        “还啥都成隐私了，像你这样一个著名学者，总该对公共安全负责吧。”史强把手中的烟头扔掉，又从压扁了的烟盒里抽出一根。<br /><br />

        “我有权不回答，你们请便吧。”汪淼说着要转身回屋。<br /><br />

        “等等！”史强厉声说，同时朝旁边的年轻警官挥了一下手，“给他地址和电话，下午去走一趟。”<br /><br />

        “你要干什么！”汪淼愤怒地质问，这争吵引得邻居们也探出头来，想看看出了什么事。<br /><br />

        “史队！你说你――”年轻警官生气地将史强拉到一边，显然他的粗俗不止是让汪淼一人不适应。<br /><br />

        <label>————— 文章摘自著名科幻小说《三体》</label>
      </p>
    </div>
    <script type="text/javascript" src="./js/vue.js"></script>
    <script type="text/javascript">
      // TODO：请在下面实现需求
      new Vue({
        // 注意：请勿修改 data 选项中已提供的数据！！！
        el: "#app",
        data: {
          bgList: ["#f6edd4", "#ebf4ea", "#e9f2f5", "#F6E8E4", "#000000"], // 阅读主题色列表（与设置主题的圆形色块一一对应）
          isNavbar: true,
          activeIndex: 0,
          fontSize: 18
        },
        methods: {
          closeNavbar() {
            this.isNavbar = false
          },
          openNavbar() {
            this.isNavbar = true
          },
          changeActive(index) {
            this.activeIndex = index
          },
          changeTextSize(val) {
            if (this.fontSize === 12 && val === -2) {
              return 
            }
            if (this.fontSize === 48 && val === 2) {
              return 
            }
            this.fontSize += val
          }
        }
      });
    </script>
  </body>
</html>