艺术戏剧（字体变化）

zhongshujie

2024-07-08 ea85d5267ab74f8a23a7208098365190d1b820f2

艺术戏剧（字体变化）

 src/App.vue

@@ -65,7 +65,7 @@
        process.env.VUE_APP_RESOURCE_CTX +
          (process.env.VUE_APP_ENV == "product"
            ? process.env.VUE_APP_BOOK_ID
            : "english")
            : "artAndDrama")
      );
      // 测试试读30页
      // this.activeBook.tryPageCount = 10;

 src/books/English/assets/images/matching-four.png

 src/books/English/assets/main.less

@@ -845,6 +845,13 @@
  .tl-lf{
    text-align: left;
  }
  .tl-ju{
    text-align: justify;
  }
  .table-p{
    margin: 0%;
    text-indent: 0;
  }
  // 页码
  .preface-bottom {
    height: 104px;

 src/books/English/view/components/chapter003.vue

@@ -1166,7 +1166,7 @@
                                </td>
                                <td>
                                    <textarea v-model="questionData.table.four"
                                        class="w100 table-tr-bc b0 table-textarea textarea-box"
                                        class="w100 table-tr-bc b0 table-textarea "
                                        @change="setBookQuestion"></textarea>
                                </td>
                            </tr>
@@ -1202,8 +1202,7 @@
                            <tr class="table-tr-bc">
                                <td>
                                    <textarea v-model="questionData.table.two"
                                        class="w100 table-tr-bc b0 table-textarea textarea-box"
                                        @change="setBookQuestion"></textarea>
                                        class="w100 table-tr-bc b0 table-textarea" @change="setBookQuestion"></textarea>
                                </td>
                                <td style="width: 40%">
                                    <textarea v-model="questionData.table.three"
@@ -1211,8 +1210,7 @@
                                </td>
                                <td style="width: 40%">
                                    <textarea v-model="questionData.table.four"
                                        class="w100 table-tr-bc b0 table-textarea textarea-box"
                                        @change="setBookQuestion"></textarea>
                                        class="w100 table-tr-bc b0 table-textarea" @change="setBookQuestion"></textarea>
                                </td>
                            </tr>
                            <tr class="table-tr-bc">
@@ -1222,20 +1220,17 @@
                                </td>
                                <td>
                                    <textarea v-model="questionData.table.seven"
                                        class="w100 table-tr-bc b0 table-textarea textarea-box"
                                        @change="setBookQuestion"></textarea>
                                        class="w100 table-tr-bc b0 table-textarea" @change="setBookQuestion"></textarea>
                                </td>
                                <td>
                                    <textarea v-model="questionData.table.enight"
                                        class="w100 table-tr-bc b0 table-textarea textarea-box"
                                        @change="setBookQuestion"></textarea>
                                        class="w100 table-tr-bc b0 table-textarea" @change="setBookQuestion"></textarea>
                                </td>
                            </tr>
                            <tr class="table-tr-bc">
                                <td>
                                    <textarea v-model="questionData.table.two"
                                        class="w100 table-tr-bc b0 table-textarea textarea-box"
                                        @change="setBookQuestion"></textarea>
                                        class="w100 table-tr-bc b0 table-textarea" @change="setBookQuestion"></textarea>
                                </td>
                                <td>
                                    <textarea v-model="questionData.table.three"
@@ -1243,8 +1238,7 @@
                                </td>
                                <td>
                                    <textarea v-model="questionData.table.four"
                                        class="w100 table-tr-bc b0 table-textarea textarea-box"
                                        @change="setBookQuestion"></textarea>
                                        class="w100 table-tr-bc b0 table-textarea" @change="setBookQuestion"></textarea>
                                </td>
                            </tr>
                            <tr class="table-tr-bc">
@@ -1254,13 +1248,11 @@
                                </td>
                                <td>
                                    <textarea v-model="questionData.table.seven"
                                        class="w100 table-tr-bc b0 table-textarea textarea-box"
                                        @change="setBookQuestion"></textarea>
                                        class="w100 table-tr-bc b0 table-textarea" @change="setBookQuestion"></textarea>
                                </td>
                                <td>
                                    <textarea v-model="questionData.table.enight"
                                        class="w100 table-tr-bc b0 table-textarea textarea-box"
                                        @change="setBookQuestion"></textarea>
                                        class="w100 table-tr-bc b0 table-textarea" @change="setBookQuestion"></textarea>
                                </td>
                            </tr>
                        </table>
@@ -1540,9 +1532,40 @@
                        </div>
                        <p><b>Ⅰ.Reading comprehension.</b></p>
                        <p>A.Fill in the blanks with the numbers in the passage.</p>
                        <p class="center">
                            <img class="img-a" alt="" src="../../assets/images/0059-1.jpg" />
                        </p>
                        <table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff" class="fz-14">
                            <tr class="table-tr-bc">
                                <td class="tl-lf table-th-bc">1. So far, what has BarefootCollege achieved?</td>
                                <td style="width: 65%;">
                                    <p class="table-p"> It has trained l.<input :disabled="testData.isComplete"
                                            type="text" class="input-bottom-border input-bc-t" style="width: 70px"
                                            v-model="testData.in.one" @change="setTestData" />women solar engineers.</p>
                                    <p class="table-p">The women solar engineers are from 2.<input
                                            :disabled="testData.isComplete" type="text"
                                            class="input-bottom-border input-bc-t" style="width: 70px"
                                            v-model="testData.in.one" @change="setTestData" />villages in 3.<input
                                            :disabled="testData.isComplete" type="text"
                                            class="input-bottom-border input-bc-t" style="width: 70px"
                                            v-model="testData.in.one" @change="setTestData" />countries.</p>
                                    <p class="table-p">The engineers have solar-electrifed 4.<input
                                            :disabled="testData.isComplete" type="text"
                                            class="input-bottom-border input-bc-t" style="width: 70px"
                                            v-model="testData.in.one" @change="setTestData" />homes.</p>
                                </td>
                            </tr>
                            <tr class="table-tr-bc">
                                <td class="tl-cn table-th-bc">2.What's the author'sfuture goal?</td>
                                <td style="width: 65%;">
                                    <p class="table-p">He would like to provide the world's 5.<input
                                            :disabled="testData.isComplete" type="text"
                                            class="input-bottom-border input-bc-t" style="width: 70px"
                                            v-model="testData.in.one" @change="setTestData" />least developed countries
                                        with engineers.</p>
                                    <p class="table-p">He wants to reach 6.<input :disabled="testData.isComplete"
                                            type="text" class="input-bottom-border input-bc-t" style="width: 70px"
                                            v-model="testData.in.one" @change="setTestData" />people.</p>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="preface-bottom">
@@ -1735,7 +1758,7 @@
                            <tr class="table-tr-bc">
                                <td>
                                    <textarea v-model="questionData.table.two"
                                        class="w100 table-tr-bc b0 table-textarea textarea-box"
                                        class="w100 table-tr-bc b0 table-textarea "
                                        @change="setBookQuestion"></textarea>
                                </td>
                                <td>
@@ -1746,7 +1769,7 @@
                            <tr class="table-tr-bc">
                                <td>
                                    <textarea v-model="questionData.table.two"
                                        class="w100 table-tr-bc b0 table-textarea textarea-box"
                                        class="w100 table-tr-bc b0 table-textarea "
                                        @change="setBookQuestion"></textarea>
                                </td>
                                <td>
@@ -1757,7 +1780,7 @@
                            <tr class="table-tr-bc">
                                <td>
                                    <textarea v-model="questionData.table.two"
                                        class="w100 table-tr-bc b0 table-textarea textarea-box"
                                        class="w100 table-tr-bc b0 table-textarea "
                                        @change="setBookQuestion"></textarea>
                                </td>
                                <td>
@@ -1768,8 +1791,7 @@
                            <tr class="table-tr-bc">
                                <td>
                                    <textarea v-model="questionData.table.two"
                                        class="w100 table-tr-bc b0 table-textarea textarea-box"
                                        @change="setBookQuestion"></textarea>
                                        class="w100 table-tr-bc b0 table-textarea" @change="setBookQuestion"></textarea>
                                </td>
                                <td>
                                    <textarea v-model="questionData.table.three"
@@ -2018,9 +2040,24 @@
                        <p class="left">
                            <img class="img-gn" alt="" src="../../assets/images/dy1-worksheet.jpg" />
                        </p>
                        <p><b>Worksheet for the Applicant</b></p>
                        <p class="center"><b>Worksheet for the Applicant</b></p>
                        <p class="center">
                            <img class="img-a" alt="" src="../../assets/images/0066-1.jpg" />
                        <table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff; width: 80%;" class="fz-14 center">
                            <tr class="table-tr-bc">
                                <td style="text-align: left">
                                    Self-introduction:
                                    <textarea v-model="questionData.table.nineteen"
                                        class="w100 table-tr-bc b0 table-textarea" @change="setBookQuestion"></textarea>
                                </td>
                            </tr>
                            <tr class="table-tr-bc">
                                <td style="text-align: left">
                                    Questions that could be asked and your answers:
                                    <textarea v-model="questionData.table.nineteen"
                                        class="w100 table-tr-bc b0 table-textarea" @change="setBookQuestion"></textarea>
                                </td>
                            </tr>
                        </table>
                        </p>
                    </div>
                </div>
@@ -2044,9 +2081,24 @@
                <!-- 内容 -->
                <div class="padding-93">
                    <div class="bodystyle">
                        <p><b>Worksheet for the Interviewer</b></p>
                        <p class="center"><b>Worksheet for the Interviewer</b></p>
                        <p class="center">
                            <img class="img-a" alt="" src="../../assets/images/0067-1.jpg" />
                            <table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff; width: 80%;" class="fz-14 center">
                            <tr class="table-tr-bc">
                                <td style="text-align: left">
                                    The volunteer evaluation rubric:
                                    <textarea v-model="questionData.table.nineteen"
                                        class="w100 table-tr-bc b0 table-textarea" @change="setBookQuestion"></textarea>
                                </td>
                            </tr>
                            <tr class="table-tr-bc">
                                <td style="text-align: left">
                                    Question list:
                                    <textarea v-model="questionData.table.nineteen"
                                        class="w100 table-tr-bc b0 table-textarea" @change="setBookQuestion"></textarea>
                                </td>
                            </tr>
                        </table>
                        </p>
                        <div class="fieldset-1">
                            <p class="center"><b>Useful Expressions</b></p>

 src/books/English/view/components/chapter004.vue

@@ -80,12 +80,16 @@

                <div class="padding-93">
                    <div class="bodystyle">
                        <h3 id="c029"><span class="bjh3">Listening</span></h3>
                        <h3 id="c029" class="fl al-cn">
                            <span class="bjh3">Listening</span>
                            <!--controlslist="noplaybackrate nodownload"后面的音频框加入这个-->
                            <audio :src="resource.listenOne" controls controlslist="noplaybackrate nodownload"
                                class="audio"></audio>
                        </h3>

                        <p><b>Listen to the conversation between Tony and Zhang Ping and match the sentence halves.</b>
                        </p>
                        <audio :src="resource.listenOne" controls controlslist="noplaybackrate nodownload" class="audio"
                            @play="audioPlay"></audio>
                        <p class="center"><img class="img-a" alt="" src="../../assets/images/0070-2.jpg" /></p>
                        <matching :rawData="rawData" :question="question"></matching>
                        <h3 id="c030"><span class="bjh3">Reading</span></h3>
                        <audio :src="resource.listenOne" controls controlslist="noplaybackrate nodownload" class="audio"
                            @play="audioPlay"></audio>
@@ -387,7 +391,44 @@
                            <img class="w100" :src="imgThirteen" />
                        </div>
                        <p>A.Write the comparative form for each word below.</p>
                        <p class="center"><img class="img-a" alt="" src="../../assets/images/0074-1.jpg" /></p>
                        <table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff" class="fz-14">
                            <tr class="table-tr-bc">
                                <td class="tl-lf" style="width: 33%;">l. often →<input :disabled="testData.isComplete"
                                        type="text" class="input-bottom-border input-bc-t" style="width: 70px"
                                        v-model="testData.in.one" @change="setTestData" /></td>
                                <td class="tl-lf" style="width: 33%;">2. go0d →<input :disabled="testData.isComplete"
                                        type="text" class="input-bottom-border input-bc-t" style="width: 70px"
                                        v-model="testData.in.one" @change="setTestData" /></td>
                                <td class="tl-lf" style="width: 33%;">3. bad →<input :disabled="testData.isComplete"
                                        type="text" class="input-bottom-border input-bc-t" style="width: 70px"
                                        v-model="testData.in.one" @change="setTestData" />
                                </td>
                            </tr>
                            <tr class="table-tr-bc ">
                                <td class="tl-lf">4. early →<input :disabled="testData.isComplete" type="text"
                                        class="input-bottom-border input-bc-t" style="width: 70px"
                                        v-model="testData.in.one" @change="setTestData" /></td>
                                <td class="tl-lf">5. heavy →<input :disabled="testData.isComplete" type="text"
                                        class="input-bottom-border input-bc-t" style="width: 70px"
                                        v-model="testData.in.one" @change="setTestData" /></td>
                                <td class="tl-lf">6. late →<input :disabled="testData.isComplete" type="text"
                                        class="input-bottom-border input-bc-t" style="width: 70px"
                                        v-model="testData.in.one" @change="setTestData" />
                                </td>
                            </tr>
                            <tr class="table-tr-bc">
                                <td class="tl-lf">7. dangerous →<input :disabled="testData.isComplete" type="text"
                                        class="input-bottom-border input-bc-t" style="width: 70px"
                                        v-model="testData.in.one" @change="setTestData" /></td>
                                <td class="tl-lf">8. thin →<input :disabled="testData.isComplete" type="text"
                                        class="input-bottom-border input-bc-t" style="width: 70px"
                                        v-model="testData.in.one" @change="setTestData" /></td>
                                <td class="tl-lf">9. far →<input :disabled="testData.isComplete" type="text"
                                        class="input-bottom-border input-bc-t" style="width: 70px"
                                        v-model="testData.in.one" @change="setTestData" />
                                </td>
                            </tr>
                        </table>
                        <p>B.Fill in the blanks with the correct comparatives from the above.</p>
                        <p>1.The new car model may be launched _______ than expected.</p>
                        <p>2.The higher we go above the earth,the _______ the air is.</p>
@@ -428,7 +469,37 @@
                <div class="padding-93">
                    <div class="bodystyle">
                        <p class="left"><img class="img-gn" alt="" src="../../assets/images/dy1-worksheet.jpg" /></p>
                        <p class="center"><img class="img-a" alt="" src="../../assets/images/0075-1.jpg" /></p>
                        <table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff" class="fz-14">
                            <tr class="table-tr-bc">
                                <td class="tl-cn table-th-bc">The differences between humanoid robotsand human beings
                                </td>
                                <td class="tl-lf">
                                    <p class="table-p">l. Humans are organic beings, yhile robots are not.</p>
                                    <textarea v-model="questionData.table.nineteen"
                                        class="w100 table-tr-bc b0 table-textarea" @change="setBookQuestion"></textarea>
                                </td>
                            </tr>
                            <tr class="table-tr-bc">
                                <td class="tl-cn table-th-bc">
                                    The things that robots can't do but humans
                                </td>
                                <td>
                                    <p class="table-p">1. Do creative work.</p>
                                    <textarea v-model="questionData.table.nineteen"
                                        class="w100 table-tr-bc b0 table-textarea" @change="setBookQuestion"></textarea>
                                </td>
                            </tr>
                            <tr class="table-tr-bc">
                                <td class="tl-cn table-th-bc">
                                    The functions of your designed robot
                                </td>
                                <td>
                                    <p class="table-p">1. Fold clothes for you.</p>
                                    <textarea v-model="questionData.table.nineteen"
                                        class="w100 table-tr-bc b0 table-textarea" @change="setBookQuestion"></textarea>
                                </td>
                            </tr>
                        </table>
                        <p class="left"><img class="img-gn" alt="" src="../../assets/images/dy1-wordbank.jpg" /></p>
                        <div class="bk-wh">
                            <p>physical　complex　social　relationship　feeling　emotion　empathy　thought　tireless　creative
@@ -502,8 +573,6 @@
                        <p><i>It appears that most students</i>…</p>
                        <p><i>What surprised me is that</i>…</p>
                        <h3 id="c033"><span class="bjh3">Reading</span></h3>
                        <audio :src="resource.listenOne" controls controlslist="noplaybackrate nodownload" class="audio"
                            @play="audioPlay"></audio>
                        <p>1.Are you amazed by the stars in the night sky,wondering what brought life into existence?
                        </p>
                        <p>2.What is your dream about space exploration?</p>
@@ -738,7 +807,45 @@
                        <div class="bk-wh">
                            <p>15　28　30　38　39　340　2016</p>
                        </div>
                        <p class="center"><img class="img-a" alt="" src="../../assets/images/0079-1.jpg" /></p>
                        <p class="center">
                        <table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff" class="fz-14">
                            <tr class="table-tr-bc">
                                <td class="tl-cn table-th-bc">The FAST Team</td>
                                <td style="width: 65%;">
                                    <p class="table-p">
                                        The engineering and operation team has an average age of 1.
                                        while the on-site team has an average age of 2.
                                    </p>
                                </td>
                            </tr>
                            <tr class="table-tr-bc">
                                <td class="tl-cn table-th-bc">Achievements</td>
                                <td style="width: 65%;">
                                    <p class="table-p">He would like to provide the world's 5.<input
                                            :disabled="testData.isComplete" type="text"
                                            class="input-bottom-border input-bc-t" style="width: 70px"
                                            v-model="testData.in.one" @change="setTestData" />least developed countries
                                        with engineers.</p>
                                    <p class="table-p">He wants to reach 6.<input :disabled="testData.isComplete"
                                            type="text" class="input-bottom-border input-bc-t" style="width: 70px"
                                            v-model="testData.in.one" @change="setTestData" />people.</p>
                                </td>
                            </tr>
                            <tr class="table-tr-bc">
                                <td class="tl-cn table-th-bc">Contributions ofTeam Members</td>
                                <td style="width: 65%;">
                                    <p class="table-p">He would like to provide the world's 5.<input
                                            :disabled="testData.isComplete" type="text"
                                            class="input-bottom-border input-bc-t" style="width: 70px"
                                            v-model="testData.in.one" @change="setTestData" />least developed countries
                                        with engineers.</p>
                                    <p class="table-p">He wants to reach 6.<input :disabled="testData.isComplete"
                                            type="text" class="input-bottom-border input-bc-t" style="width: 70px"
                                            v-model="testData.in.one" @change="setTestData" />people.</p>
                                </td>
                            </tr>
                        </table>
                        </p>
                        <p>B.Decide whether the following statements are true (T) or false (F).</p>
                        <p>(　) 1.According to Zhao Hongzhou’s analysis,scientists usually make their greatest
                            achievements before the age of 45.</p>
@@ -1136,38 +1243,46 @@
                left: [
                    {
                        oldId: "FB34",
                        txt: "Martin　　　　Silk",
                        txt: "1. My phone",
                    },
                    {
                        oldId: "64D6",
                        txt: "Jessica　　The Great Wall",
                        txt: "2. We can pay for almost anything",
                    },
                    {
                        oldId: "2ED4",
                        txt: "Soren　　Chinese Food",
                        txt: "3. Now almost nobody uses",
                    },
                    {
                        oldId: "44DE",
                        txt: "Chinese　　　　Tea",
                        txt: "4. We rely on mobile phones",
                    },
                    {
                        oldId: "J20B",
                        txt: "5. Mobile phones have changed",
                    }
                ],
                right: [
                    {
                        oldId: "64D6",
                        txt: "It is one of China's must-see sights for visitors, which shows thewisdom of Chinese people.",
                    },
                    {
                        oldId: "FB34",
                        txt: "It was first discovered and drank in China and my favorileLongjing tca is praduced near the West Lake in Hangzhou.",
                    },
                    {
                        oldId: "2ED4",
                        txt: "The clothing material is quite popular among Roman women inancient times.",
                        txt: "a.a fixed-line telephone.",
                    },
                    {
                        oldId: "44DE",
                        txt: "It is very delicious and I like the hot and spicy Sichuan lavor hest.",
                        txt: "b. all the time now.",
                    },
                    {
                        oldId: "64D6",
                        txt: "c. online or by using an App on the phone.",
                    },
                    {
                        oldId: "FB34",
                        txt: "d. is almost dead.",
                    },
                    {
                        oldId: "J20B",
                        txt: "e. how we go about our everyday life.",
                    }
                ],
            },
            value: [],
@@ -1178,66 +1293,81 @@
                    {
                        id: "FB34",
                        linkValue:
                            "The clothing material is quite popular among Roman women inancient times.",
                        value: "Silk",
                            "d. is almost dead.",
                        value: "1. My phone",
                    },
                    {
                        id: "64D6",
                        linkValue:
                            "It is one of China's must-see sights for visitors, which shows thewisdom of Chinese people.",
                        value: "The Great Wall",
                            "c. online or by using an App on the phone.",
                        value: "2. We can pay for almost anything",
                    },
                    {
                        id: "2ED4",
                        linkValue:
                            "It is very delicious and I like the hot and spicy Sichuan lavor hest.",
                        value: "Chinese Food",
                            "a. a fixed-line telephone.",
                        value: "3. Now almost nobody uses",
                    },
                    {
                        id: "44DE",
                        linkValue:
                            "It was first discovered and drank in China and my favorileLongjing tca is praduced near the West Lake in Hangzhou.",
                        value: "Chinese Tea",
                            "b. all the time now.",
                        value: "4. We rely on mobile phones",
                    },
                    {
                        id: "J20B",
                        linkValue:
                            "e. how we go about our everyday life.",
                        value: "5. Mobile phones have changed",
                    },
                ],
                optionStyle: undefined,
                id: 489306,
                options: {
                    linkValues: [

                        {
                            oldId: "64D6",
                            txt: "It is one of China's must-see sights for visitors, which shows thewisdom of Chinese people.",
                            oldId: "2ED4",
                            txt: "a.a fixed-line telephone.",
                        },
                        {
                            oldId: "44DE",
                            txt: "It was first discovered and drank in China and my favoriteLongjing tea is produced near the West Lake in Hangzhou.",
                            txt: "b. all the time now.",
                        },
                        {
                            oldId: "64D6",
                            txt: "c. online or by using an App on the phone.",
                        },
                        {
                            oldId: "FB34",
                            txt: "The clothing material is quite popular among Roman women inancient times.",
                            txt: "d. is almost dead.",
                        },
                        {
                            oldId: "2ED4",
                            txt: "It is very delicious and I like the hot and spicy Sichuan lavor hest.",
                        },
                            oldId: "J20B",
                            txt: "e. how we go about our everyday life.",
                        }
                    ],
                    values: [
                        {
                            oldId: "FB34",
                            txt: "Martin  Silk",
                            txt: "1. My phone",
                        },
                        {
                            oldId: "64D6",
                            txt: "The Great Wall",
                            txt: "2. We can pay for almost anything",
                        },
                        {
                            oldId: "2ED4",
                            txt: "Chinese Food",
                            txt: "3. Now almost nobody uses",
                        },
                        {
                            oldId: "44DE",
                            txt: "Chinese Tea",
                            txt: "4. We rely on mobile phones",
                        },
                        {
                            oldId: "J20B",
                            txt: "5. Mobile phones have changed",
                        }
                    ],
                },
                questionType: "matching",
@@ -1248,7 +1378,7 @@
                titleDescription: "1",
                userChoise: [],
                value: [],
                answerImg: require("../../assets/images/matching-one.png"),
                answerImg: require("../../assets/images/matching-four.png"),
            },
            questionData: {
                warnUp: {

 src/books/English/view/components/index.vue

@@ -213,7 +213,7 @@

    // 测试页面跳转
     setTimeout(() => {
       this.gotoPage(9,154);
       this.gotoPage(4,75);
    //   setTimeout(() => {
    //     this.renderSign("Highlight", {
    //       id: "2ACA9359",

 src/books/artAndDrama/assets/main.less

@@ -461,7 +461,7 @@
  .text{
  margin: 0 8%;
  font-family: "STkaiti";
  font-size: 19px;

  }
  .text1{
  margin-bottom: 3%;

 src/books/artAndDrama/view/components/index.vue

@@ -4,7 +4,7 @@
      <div id="searchContent"></div>
    </div>
    <div class="page-content" :style="{
      fontSize: fontSize ? fontSize + 'px' : '16px',
      fontSize: fontSize ? fontSize + 'px' : '19px',
      transform: `scale(${pageZoom ? pageZoom : 1})`,
      transformOrigin: 'center top',
    }">