<template>
  <div class="box">
    <div class="head">{{ $t('pages.mobile.teacherHelp.title') }}</div>
    <div class="main">
      <div class="menu">
        <div v-for="(item, index) in chapter" :key="index">
          <h2 class="title" v-html="item.name"></h2>
          <template v-if="item.child">
            <div v-for="(item1, index1) in item.child" :key="index1">
              <h3 class="title" v-html="item1.name" @click="openContent(item1.content)"></h3>

              <template v-if="item1.child">
                <div v-for="(item2, index2) in item1.child" :key="index2">
                  <h3 class="title" v-html="item2.name" @click="openContent(item2.content)"></h3>
                </div>
              </template>
            </div>
          </template>
        </div>
      </div>
      <div class="content" v-html="contentData"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chapter: [
        // 教师端
        {
          name: '一、引言',
          child: [
            {
              name: '1.1 文档编写目的',
              content: `本操作说明详细的描述了紫荆教育在线教与学系统-教师端-（V1.1版本）实现的功能和操作步骤，其编写目的为：<br/>
                教师在线上课的操作指南<br/>
                助教在线上课的操作指南<br/>
                教师和助教培训参考文档
                `
            },
            {
              name: '1.2 文档适用范围',
              content: '该文档是针对v1.1版本编写的操作说明，后期会根据系统的升级增加相应的功能描述。'
            }
          ]
        },
        {
          name: '二、在线教学系统概述',
          child: [
            {
              name: '2.1 登录方式',
              content: `通过登录网址 <a href='https://mba-pbcsf.ezijing.com/'>https://mba-pbcsf.ezijing.com</a> 进入登录，填写自己的账号和密码完成登录，初始密码默认为：123456。
                <img src="https://zws-imgs-pub.ezijing.com/static/public/2345a1017960c7abe216b392ca5499aa.png" alt="">
                `
            },
            {
              name: '2.2 教师课程列表页',
              content: `进入系统后首先显示是的教师的仪表盘，展示出最近在线学习的人数，点击主菜单中的“教学管理”“我的课程“，展示出教师所教授的课程列表：<br/>
                 <img src="https://zws-imgs-pub.ezijing.com/static/public/1c2df3b76c6bb57e77be679025ba808b.png" alt="">
                `
            },
            {
              name: '2.3 课程内容页',
              content: `选择要教学的课程，点击进入课程内容页，展示出该课程的基本信息、课程内容大纲、课程资料、课程大作业，以及学习该课程的学员：<br/>
                    <img src="https://zws-imgs-pub.ezijing.com/static/public/2afe5cff94fc08346a6a601bff5558b3.png" alt="">
                    `
            },
            {
              name: '2.4 直播教学',
              child: [
                {
                  name: '2.4.1 启动直播教学客户端',
                  content: '点击课程内容中的要直播课程，将会新打开一个新的页面，首次使用该系统的教师需要安装客户端。'
                },
                {
                  name: '2.4.1.1 客户端安装',
                  content: `点击下载按钮下载客户端安装包。<br/>
                    <img src="https://zws-imgs-pub.ezijing.com/static/public/06006588231fc35af7a1b548834c5d19.png" alt=""><br/>
                    运行安装包程序，完成一键安装，可自定义安装目录。<br/>
                    <img src="https://zws-imgs-pub.ezijing.com/static/public/35c6bf85e8df880807e5c39e5f18f8b3.png" alt="">
                    `
                },
                // 暂停开发
                {
                  name: '2.4.1.2 启动在线直播客户端',
                  content: `在教师端启动页面点击启动按钮启动客户端。如客户端无法启动，可点击“下载修复工具”进行修复，然后重新启动客户端。<br/>
                    <img src="https://zws-imgs-pub.ezijing.com/static/public/ba5802d8c23cf265dd6882e816be5344.png" alt=""><br/>
                    `
                },
                {
                  name: '2.4.2 开启直播',
                  content: `进入直播主界面后，可以上传演示文档显示在电子白板后，在点击“开始直播”（Mac系统是点击“上课”），如图所示。<br/>
                    <img src="https://zws-imgs-pub.ezijing.com/static/public/0c1b3fd9ea823606d59f01d68cd31215.png" alt=""><br/>
                    教师就可以进行直播在线上课了。
                    `
                }
              ]
            }
          ]
        },
        {
          name: '三、直播教学详细功能介绍',
          child: [
            {
              name: '3.1 文档上传与演示',
              content: `主界面介绍，如图：<br/>
                    <img src="https://zws-imgs-pub.ezijing.com/static/public/0c1b3fd9ea823606d59f01d68cd31215.png" alt=""><br/>
                    主界面主要分为视频区、聊天区、文档区、工具栏几个部分：<br/>
                    1)视频区：可调整设置摄像头、麦克风，或将视频区设置为桌面共享、插播视频等；<br/>
                    2)聊天区：可参与聊天、问答，查看用户列表等；<br/>
                    3)文档区：展示直播文档内容，可对文档进行画笔标注；<br/>
                    4)工具栏：开始/停止直播，并可使用答题卡、签到等其他工具。<br/>
                    `,
              child: [
                {
                  name: '3.1.1 文档上传',
                  content: `教师上课前需提前上传文档。<br/>
                    <img src="https://zws-imgs-pub.ezijing.com/static/public/3aa9762255a2a3ece9fe503f19e1b68e.png" alt=""><br/>
                    1)点击文档区“+”，选择本地文档进行上传。上传完成后会进行格式转换，若文档较大处理时间会略长，请耐心等待。云端将保留本次直播使用的文档，下次直播打开客户端时会自动同步添加。<br/>
                    2)点击“×”可在客户端中删除该文档；<br/>
                    3)若文档加载异常，点击“刷新”可重新加载文档；<br/>
                    4)支持添加多个文档，支持直播时实时切换文档，支持切换至白板演示。<br/>
                    ※上传文档支持ppt/pptx、doc/docx、pdf、jpg、png等格式，文档需不大于100MB。<br/>
                    如需保留PPT动画效果，需先在设置中勾选“启用PPT动画转换”，再上传文档。
                    `
                },
                {
                  name: '3.1.2 文档演示',
                  content: `<img src="https://zws-imgs-pub.ezijing.com/static/public/a541a46ab182bde135026d0217f08878.png" alt=""><br/>
                    1)可点击翻页按钮或键盘左右键进行翻页；<br/>
                    2)点击预览跳页按钮可展开文档缩略图，点击缩略图进行跳页。<br/>
                    ※如果PPT保留了动画特效，点击向后翻页按钮将显示下一个动画动作。<br/>
                    `
                },
                {
                  name: '3.1.3 文档标注',
                  content: `在文档工具区可对文档进行画笔标注、添加文字等。支持使用鼠标、触摸板、手写板等。<br/>
                    <img src="https://zws-imgs-pub.ezijing.com/static/public/c1a0ba0fc21f41585a0f4b54587031d1.png" alt=""><br/>
                    1)画笔、图形、直线、文字等可设置大小和颜色；<br/>
                    2)激光笔模式下学员可实时看到教师的鼠标移动轨迹；<br/>
                    3)可撤销/恢复每一步标注，或使用橡皮去除某一标注，或直接清空所有标注；<br/>
                    4)教师端全屏/放大/缩小文档页面将不会影响学员的观看。
                    `
                }
              ]
            },
            {
              name: '3.2 音视频设置与直播',
              child: [
                {
                  name: '3.2.1 音视频设置',
                  content: `在客户端主界面点击“设置”按钮，可对视频和音频进行设置。<br/>
                    <img src="https://zws-imgs-pub.ezijing.com/static/public/b345ed946676018fbdfbaefb82dc93c5.png" alt=""><br/>
                    1.声音设置<br/>
                    1)麦克风：外部语音输入，根据名称选择内置麦克风或外接耳麦；<br/>
                    2)扬声器：电脑声音播放，根据名称选择喇叭/耳机；<br/>
                    3)系统声音采集：采集电脑系统声音，如不需要则建议选择关闭；<br/>
                    4)麦克风降噪：开启后可降低电脑外部噪音；<br/>
                    5)麦克风相位反转：默认关闭，仅当直播声音出现异常时，可联系技术支持人员处理；<br/>
                    6)同步偏移：仅当音视频不同步时进行设置，音频偏移为正表示延后音频时间，为负表示提前音频时间。<br/>
                    2.视频设置<br/>
                    1)画面比例：视频画面长宽比，选择“自定义”可自定义画面分辨率；<br/>
                    2)分辨率：分辨率越高视频越清晰，但对网络要求也越高；<br/>
                    i.当画面比例设置为4:3时，分辨率可设置为960x720、640x480、320x240；<br/>
                    ii.当画面比例设置为16:9时，分辨率可设置为1280x720、854x480、426x240；<br/>
                    iii.当画面比例设置为自定义时，用户可自定义设置分辨率；<br/>
                    3)帧率：帧率越高视频越流畅，但对网络要求也越高，建议设置为15~20ps（最高30fps）；<br/>
                    4)桌面共享优化：如果直播视频采用桌面共享画面，则建议将分辨率自定义设置为桌面分辨率，并勾选“桌面共享优化”。正常视频直播下请勿开启。<br/>
                    3.文档设置<br/>
                    <img src="https://zws-imgs-pub.ezijing.com/static/public/fe25d44ca16ea287df97e00351a50f20.png" alt=""><br/>
                    1)文档工具栏：点击选择要使用的图形工具，包括三角形/多边形等，修改后可在文档区工具栏使用；<br/>
                    2)画笔颜色：点击设置画笔颜色，修改后可在文档区工具栏使用；<br/>
                    3)PPT动画：勾选后，新上传的PPT文档将保留还原完整PPT动画效果。<br/>
                    4.其他设置<br/>
                    录制：勾选“自动保存图像”可开启本地视频录制，将直播视频内容实时录制为flv文件，保存至设置的本地路径下。本地录制内容仅包括视频区部分。<br/>
                    ※  直播过程中将无法调整分辨率、帧率等设置，如需更改请先停止直播。
                    `
                },
                {
                  name: '3.2.2 直播控制',
                  content: `在音视频设置后，即可开启直播，并在视频区对直播进行实时控制。<br/>
                    <img src="https://zws-imgs-pub.ezijing.com/static/public/c1a0ba0fc21f41585a0f4b54587031d1.png" alt=""><br/>
                    1)点击下方图标可开启/关闭麦克风、扬声器、视频画面；<br/>
                    2)点击“开始直播”按钮，客户端将推流开始直播，同时云端会自动进行录制。在手动录制模式下，需同时点击“开始录制”按钮进行录制。点击“结束直播”按钮，客户端将停止推流，并自动结束录制。<br/>
                    <img src="https://zws-imgs-pub.ezijing.com/static/public/9567a6c4e7995dab1916c694cf584187.png" alt=""><br/>
                    3)点击“摄像头”按钮可切换视频区内容，包括摄像头、图片、插播视频、桌面共享等：<br/>
                    摄像头：设置实时摄像画面作为视频源，可配置摄像头分辨率等参数：<br/>
                    <img src="https://zws-imgs-pub.ezijing.com/static/public/8cae4046b93c12c941d3741b17dcf532.png" alt=""><br/>
                    摄像头设置<br/>
                    设备：选择对应的摄像头/采集卡名称，点击配置可修改对比度等参数；<br/>
                    分辨率：勾选“高级设置”后，可设置摄像头分辨率，默认无需调整；<br/>
                    格式：勾选“高级设置”后，可设置摄像头编码格式，默认无需调整。如有需要可联系技术人员处理；<br/>
                    幕布抠像：可实现虚拟抠像效果，选择对应的幕布色（绿色和蓝色），并根据实际效果适当调整相似度值；<br/>
                    自定义音频设备：默认无需调整，如有需要可联系技术人员处理。<br/>
                    图片：选择本地图片作为视频头像，实现音频直播；<br/>
                    <img src="https://zws-imgs-pub.ezijing.com/static/public/153180833eaac27eb2e24ffabbd7ca21.png" alt=""><br/>
                    插播视频：播放本地视频文件，实现插播、暖场功能；<br/>
                    <img src="https://zws-imgs-pub.ezijing.com/static/public/e8fbdb30e83903741ca790b7c8cf90b1.png" alt=""><br/>
                    支持主流的视频与音频格式，支持添加多个媒体文件；<br/>
                    支持选择单视频循环、列表循环等播放方式；<br/>
                    支持控制视频播放、暂停或拖拽进度条等；<br/>
                    插播音频时将自动获取音频图片，支持自定义上传图片。<br/>
                    区域捕获：共享桌面一部分区域内容，可调节区域框位置，文档模式区域捕获的窗口大小为客户端设置的视频分辨率大小；<br/>
                    桌面共享：共享桌面的全部内容。<br/>
                    <img src="https://zws-imgs-pub.ezijing.com/static/public/9134c824368e37351a2caa4091ccdff4.png" alt=""><br/>
                    桌面共享设置<br/>
                    捕获光标：勾选后可共享鼠标的移动轨迹；<br/>
                    多显卡兼容：当显卡版本过低导致无法共享出桌面时，可勾选设置；<br/>
                    <img src="https://zws-imgs-pub.ezijing.com/static/public/8dbe5e9b3c568d0e8be571e891895ad0.png" alt=""><br/>
                    共享工具栏<br/>
                    开始共享时客户端会自动跳出，于桌面最上方显示桌面共享工具栏。点击“停止共享”将停止桌面共享，切换回摄像头直播。点击“显示客户端”将显示客户端画面，但桌面共享继续。<br/>
                    自定义场景：添加多种素材元素，组合为一路视频画面进行直播。<br/>
                    <img src="https://zws-imgs-pub.ezijing.com/static/public/fdb5ebc066fdc5892182f9ae3dfa2781.png" alt="">
                    `
                }
              ]
            },
            {
              name: '3.3 互动功能',
              content: '在直播过程中教师可发起聊天、连麦、用户管理、问答、签到等多种互动功能。',
              child: [
                {
                  name: '3.3.1 聊天',
                  content: `教师可与学员进行公共聊天，支持与单个学员进行私聊。<br/>
                    <img src="https://zws-imgs-pub.ezijing.com/static/public/d8cee0f5f8a66447446a8cf870b54780.png" alt=""><br/>
                    1)点击学员名称可与该学员进行私聊；<br/>
                    2)教师可发送表情包及本地图片；<br/>
                    3)可查看自己发言或全部人员发言；<br/>
                    4)点击“禁言”可禁止全员聊天。
                    `
                },
                {
                  name: '3.3.2 问答',
                  content: `教师可解答学员在问答区的提问，可选择私聊回复或公开回复。<br/>
                    <img src="https://zws-imgs-pub.ezijing.com/static/public/bfe706fc030c274ee3688456df290ca2.png" alt=""><br/>
                    1)学员可在观看页问答区发起提问，提问内容仅教师和助教可见；<br/>
                    2)教师回复内容默认为全员可见，勾选“仅提问者可见”可进行单独回复；<br/>
                    3)点击“发布”可直接公开学员的提问内容；<br/>
                    4)点击“私聊”可直接与该学员进行私聊聊天；<br/>
                    点击“禁止提问”可禁止全员提问。
                    `
                },
                {
                  name: '3.3.3 用户',
                  content: `教师可查看当前在线用户列表，对用户进行禁言、踢出等操作。<br/>
                    <img src="https://zws-imgs-pub.ezijing.com/static/public/68312cb9ef5eda0b327c46c6f219cf79.png" alt=""><br/>
                    1)私聊：其他用户无法看到私聊内容；<br/>
                    2)禁言：该用户可观看直播，但无法进行发言；<br/>
                    3)踢出：将该用户踢出直播间，无法继续观看直播；<br/>
                    IP禁言：封禁用户IP，即使用户退出重新进入也无法发言。
                    `
                },
                {
                  name: '3.3.4 连麦',
                  content: `教师可与学员进行一对一视频/语音互动，其他学员将同时看到两人的视频/语音内容。<br/>
                    <img src="https://zws-imgs-pub.ezijing.com/static/public/05efa523a4c29acc5c218f4d0bfd4f3a.png" alt=""><br/>
                    教师与学员连麦的流程如下：<br/>
                    1)教师在教学客户端点击“开启语音”；<br/>
                    2)观看网页端将会显示“连麦”按钮，学员可点击“视频连麦”或“语音连麦”进行申请；<br/>
                    3)教师查看正在申请连麦的学员，选择其中一人进行接通。其他正在申请连麦的学员将处于等待状态；<br/>
                    <img src="https://zws-imgs-pub.ezijing.com/static/public/05fd70c16f9ef65106aeebab4c9474d6.png" alt=""><br/>
                    教师与学员接通后，在客户端点击<img src="https://zws-imgs-pub.ezijing.com/static/public/ce21fb246148b6b51a28b329df6756cd.png" alt="">按钮可将教师与学员的画面进行对调。<br/>
                    4)连麦结束后教师和学员均可挂断连麦。<br/>
                    ※移动端网页不支持视频/语音连麦，仅PC端和移动APP端支持连麦。学员在PC端连麦时需使用谷歌或火狐浏览器。
                    `
                },
                {
                  name: '3.3.5 公告',
                  content: `教师可发布、编辑、删除公告，公告内容将置顶于学员聊天区最上方。<br/>
                    <img src="https://zws-imgs-pub.ezijing.com/static/public/7929c9d839a89fece17a0d8b3386fbad.png" alt="">
                    `
                },
                {
                  name: '3.3.6 答题卡',
                  content: `教师可发布答题卡，考察学员的学习情况。题干内容由教师通过视频/语音/文档等途径给出。<br/>
                    <img src="https://zws-imgs-pub.ezijing.com/static/public/bf4236a44a82ec1d7e32566eaa3c1693.png" alt=""><br/>
                    1)答题卡题型包括判断题、单选题和多选题（三至五个选项）；<br/>
                    2)点击“停止答题”后教师和学员端均可查看全员的答题统计。
                    `
                },
                {
                  name: '3.3.7 签到',
                  content: `教师可发起签到，考察学员是否有挂机等现象。<br/>
                    <img src="https://zws-imgs-pub.ezijing.com/static/public/461fafde1248bf0fd4f010b50c045d1f.png" alt=""><br/>
                    <img src="https://zws-imgs-pub.ezijing.com/static/public/3402f9624afbe21547f1afe6b340d282.png" alt=""><br/>
                    1)答题卡题型包括判断题、单选题和多选题（三至五个选项）；<br/>
                    2)签到倒计时结束后，教师端可查看签到率以及未签到学员的名称。
                    `
                },
                {
                  name: '3.3.8 抽奖',
                  content: `教师可发起抽奖，调动学员的积极性。<br/>
                    <img src="https://zws-imgs-pub.ezijing.com/static/public/433f49801d441d8b33ed97703e2dba7b.png" alt=""><br/>
                    1)教师可选择参与抽奖的用户，设置中奖名额；<br/>
                    2)每个中奖者将分别进行抽取，教师可对该中奖者进行重抽；<br/>
                    3)抽奖完成后教师和中奖者页面会生成中奖码，学员可通过中奖码与教师进行确认。<br/>
                    `
                },
                {
                  name: '3.3.9 问卷',
                  content: `教师可发布问卷，考察学员的学习情况。题干内容与选项均包含在问卷中。<br/>
                    <img src="https://zws-imgs-pub.ezijing.com/static/public/3c68911b9b74212fa110226990d2425a.png" alt=""><br/>
                    1)每个问卷可创建多个题目，题型包括单选题、多选题和问答题。问卷创建后可进行预览、编辑或删除；<br/>
                    2)可创建多个问卷，问卷可提前创建，在直播中随时发布；<br/>
                    3)终止答题后教师可查看学员的答题统计，其中问答题统计仅支持通过后台接口获取；<br/>
                    4)可导出问卷保存在本地，在下次直播时直接导入本地问卷内容；<br/>
                    5)可设置强制用户答卷，已经设置提交后显示答案；<br/>
                    6)可设置每个题目的分值，答题结果公布后将自动计算评分；<br/>
                    7)第三方问卷可外链至其他第三方问卷网站进行答题。
                    `
                },
                {
                  name: '3.3.10 广播',
                  content: `教师可发布广播消息，作为临时性公告。广播内容将作为系统消息显示在聊天区中。<br/>
                    <img src="https://zws-imgs-pub.ezijing.com/static/public/b9d145e32b747940879a234a7b957ae3.png" alt="">
                  `
                }
              ]
            },
            {
              name: '3.4 其他功能',
              child: [
                {
                  name: '3.4.1 设置用户基数',
                  content: `设置用户基数，观看端显示的在线人数将为实际人数与基数的总和。教师端显示的人数不受影响。<br/>
                    <img src="https://zws-imgs-pub.ezijing.com/static/public/f01de62f98f0c4c7297361f7c1cdd7f4.png" alt="">
                    `
                },
                {
                  name: '3.4.2 线路测速',
                  content: `在直播开始前，客户端会测量当前网络状况，自动选择最优的推流服务器节点。用户也可手动进行节点测试，根据评分和推荐结果选择服务器节点。<br/>
                    <img src="https://zws-imgs-pub.ezijing.com/static/public/f0979c245f7d2a688fa9b07cbec276a4.png" alt=""><br/>
                    1)连接耗时：客户端到推流服务器的网络连接时间，连接耗时越短则评分越高；<br/>
                    2)带宽：客户端到推流服务器的网络吞吐量，带宽值越大则评分越高；<br/>
                    3)网络稳定性：客户端到推流服务器的网络波动情况 ，稳定性值越高则评分越高。<br/>
                    ※  直播过程中将无法调整推流节点，如需更改请先停止直播。
                    `
                },
                {
                  name: '3.4.3 布局切换',
                  content: `
                    在直播过程中教师可切换学员观看端的页面布局。点击按钮，选择相应布局模式。<br/>
                    <img src="https://zws-imgs-pub.ezijing.com/static/public/d66837d018cc45ce5dc7fc1c7ccb198d.png" alt=""><br/>
                    1)文档为主：<br/>
                    a)PC端观看页面：文档显示在页面中央，视频显示在左上方；<br/>
                    b)手机端观看页面：文档显示在页面上方，视频显示在下方；<br/>
                    2)视频为主：<br/>
                    a)PC端观看页面：视频显示在页面中央，文档显示在左上方；<br/>
                    b)手机端观看页面：视频显示在页面上方，文档显示在下方。

                   `
                },
                {
                  name: '3.4.4 观看端锁屏',
                  content:
                    '勾选后通过PC客户端登录的学员将进入锁屏状态，无法操作电脑其他内容。网页端登录的学员不受影响。'
                },
                {
                  name: '3.4.5 服务器时间',
                  content: '勾选后将在客户端顶部栏显示当前实时时间，方便教师查看。'
                },
                {
                  name: '3.4.6 状态监控',
                  content: `在直播过程中用户可实时查看直播状态，如图17所示。<br/>
                    <img src="https://zws-imgs-pub.ezijing.com/static/public/585b894a698854837170052888da2a9b.png" alt=""><br/>
                    1)掉帧：若掉帧数不为0，表示直播画面出现了丢失，请检查教师端电脑和网络配置是否符合第一章所述的直播要求；<br/>
                    2)码率：直播实时传输码率，如果码率有时出现0 kb/s，表示当前网络较差，请检查网络配置是否符合直播要求；<br/>
                    CPU：电脑CPU实时使用率，如果CPU使用率持续高于80%，则可能会影响到教学客户端的正常运行，请检查电脑配置是否符合直播要求，或关闭其他正在使用的软件。
                    `
                }
              ]
            }
          ]
        }
      ],
      contentData:
        '本操作说明说详细的描述了紫荆教育在线教与学系统-教师端-（V1.1版本）实现的功能和操作步骤，其编写目的为：<br/>直播学习系统使用者的操作指南<br/>直播学习系统使用者培训参考文档'
    }
  },
  metaInfo() {
    return {
      title: '紫荆教育在线教与学系统',
      meta: [
        // { vmid: 'description', name: 'description', content: this.description }
      ]
    }
  },
  methods: {
    openContent: function (parameter) {
      window.console.log('parameter', parameter)
      if (!parameter) return
      this.contentData = parameter
    },
    dealRender: () => {
      // 移动端设置HTML字体大小
      ;(function (win, doc) {
        const wWidth =
          win.screen.width > 0
            ? win.innerWidth >= win.screen.width || win.innerWidth === 0
              ? win.screen.width
              : win.innerWidth
            : win.innerWidth // eslint-disable-line
        const wFsize = ((wWidth > 640 ? 640 : wWidth) / 375) * 100
        doc.documentElement.style.fontSize = wFsize + 'px'
      })(window, document)
    }
  },
  mounted() {
    this.dealRender()
  }
}
</script>

<style>
html {
  font-size: 100px;
  font-family: 'PingFang SC';
}

.content a {
  color: #0C7AB9;
}

.content img {
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}

.content span {
  color: red;
}
</style>
<style lang="scss" scoped>
.head {
  width: 100%;
  text-align: center;
  color: #000000;
  font-size: 0.16rem;
  font-weight: 800;
  height: 0.6rem;
  line-height: 0.6rem;
  background-color: #EDEDED;
}

.main {
  display: flex;

  .menu {
    width: 1.04rem;
    flex-shrink: 0;
    background-color: #EDEDED;

    h2.title {
      color: #999999;
      font-size: 0.1rem;
      line-height: 0.14rem;
      font-weight: 800;
    }

    h3.title {
      color: #000000;
      font-size: 0.14rem;
      line-height: 0.2rem;
      font-weight: 400;
    }

    .title {
      margin: 0;
      padding: 0.15rem 0.08rem 0.15rem 0.13rem;
    }

    h3:active,
    h3:hover {
      background-color: #ffffff;
      color: #BB133E;
    }
  }

  .content {
    background-color: #ffffff;
    flex-grow: 1;
    padding: 0.2rem;
    color: #000000;
    font-size: 0.14rem;
    line-height: 0.2rem;
    font-weight: 400;
  }
}

@media (min-width: 900px) {
  .head {
    height: 105px;
    line-height: 105px;
    padding-left: 40px;
    text-align: left;
    font-size: 18px;
    background-color: #ffffff;
  }

  .main {
    .menu {
      width: 194px;
      background-color: #fff;

      h2.title {
        font-size: 12px;
        line-height: 17px;

        padding {
          left: 20px;
          right: 20px;
        }
      }

      h3.title {
        color: #333;
        font-size: 14px;
        line-height: 20px;
        font-weight: 400;

        padding {
          left: 40px;
          right: 17px;
        }
      }

      .title {
        margin: 0;
        padding-top: 20px;
        padding-bottom: 20px;
      }

      h3:active,
      h3:hover {
        background-color: #ededed;
      }
    }

    .content {
      background-color: #ededed;
      padding: 40px;
      font-size: 14px;
      line-height: 20px;
    }
  }

  @media (min-width: 1200px) {
    .box {
      width: 1200px;
      margin: auto;
    }
  }
}
</style>
