<template>
  <div class="box">
    <div class="head">{{ $t('pages.mobile.studentHelp.title') }}</div>
    <div class="main">
      <div class="menu">
        <div v-for="(item, index) in studentChapter" :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 {
      studentChapter: [
        // 学生端
        {
          name: '一、引言',
          child: [
            {
              name: '1.1 文档编写目的',
              content:
                '本操作说明详细的描述了紫荆教育在线教与学系统-学生端-（V1.1版本）实现的功能和操作步骤，其编写目的为：<br/>直播学习系统使用者的操作指南<br/>直播学习系统使用者培训参考文档'
            },
            {
              name: '1.2 文档适用范围',
              content: '该文档是针对v1.1版本编写的操作说明，后期会根据系统的升级增加相应的功能描述。'
            }
          ]
        },
        {
          name: '二、直播学习系统概述',
          child: [
            {
              name: '2.1 登录方式',
              content: `使用者通过登录网址 <a href='https://pbcsf.ezijing.com/'>https://pbcsf.ezijing.com</a> 进入登录，填写自己的账号和密码完成登录，账号和密码由五道口金融学院教务老师通知学员。
                <img src="https://zws-imgs-pub.ezijing.com/static/public/8fa8253970ad76dc23aa5dd8f7cd5dc2.png" alt="">
                `
            },
            {
              name: '2.2 退出系统',
              content: `点击系统右上角头像和姓名旁边的图标 <img src="https://zws-imgs-pub.ezijing.com/static/public/7621c520cdb74bf28376e6e13992d7e4.png" alt=""> 会出现下拉菜单，菜单中有退出登录的按钮，点击退出登录后用户将退出系统，页面跳转到登录页。<br/>
                <img src="https://zws-imgs-pub.ezijing.com/static/public/bda3c4e1dc9a9606332a425b3175fffd.png" alt="">
                `
            },
            {
              name: '2.3 上直播课',
              child: [
                {
                  name: '2.3.1 进入直播', //   <br/>
                  content: `进入当天最近时间的直播：登陆后页面上方显示当天直播课程体系，用户点击直播提醒里的“<span>进入直播</span>”<br/>
                    <img src="https://zws-imgs-pub.ezijing.com/static/public/43ad6446857c110d1c59eee2c0cce7f8.png" alt="">
                    在课程大纲里<br/>
                    课程大纲里找到相应课程，点击“<span>查看课程</span>“，进入下一级课程章节列表<br/>
                    <img src="https://zws-imgs-pub.ezijing.com/static/public/b4c25410d86bea430d919692b9ba09c2.png" alt=""><br/>
                    在课程章节列表找到相应正在直播课程，点击“<span>正在直播</span>”进入直播 <br/>
                    <img src="https://zws-imgs-pub.ezijing.com/static/public/369e000ccc6fb2e035a5e71e8fcd1e72.png" alt="">

                    `
                },
                {
                  name: '2.3.2 安装flash播放器',
                  content: `安装 flash 播放器，点击“<span>这里</span>”<br/>
                    <img src="https://zws-imgs-pub.ezijing.com/static/public/533e05ba6ab4b5530ba27b1bf7c98d86.png" alt=""><br/>
                    打开 Chrome 的 Flash 拦截<br/>
                    <img src="https://zws-imgs-pub.ezijing.com/static/public/cc03e3ddfc5940307099d2affe5e2447.png" alt=""><br/>
                    右滑接触禁止运行网址Flash<br/>
                    <img src="https://zws-imgs-pub.ezijing.com/static/public/997a2ca4a9677cb11b153d2b40747a79.png" alt=""><br/>
                    是否运行flash改为“先询问“<br/>
                    <img src="https://zws-imgs-pub.ezijing.com/static/public/96b654d183be68c5f823639d6f9af8c5.png" alt=""><br/>
                    再回到直播页面，点击“<span>这里</span>”-浏览器弹出询问点击“<span>允许</span>”安装flash<br/>
                    <img src="https://zws-imgs-pub.ezijing.com/static/public/ffe17b292977f9c5fc5dad22b9ae4c87.png" alt="">
                    `
                },
                {
                  name: '2.3.3 直播上课',
                  content: `之后可以打开老师视频，观看直播上课 <br/>
                    <img src="https://zws-imgs-pub.ezijing.com/static/public/34d550f5e1855ff30d0744f47faf95b7.png" alt=""><br/>
                    视频区：显示老师上课的视频，或老师的分享屏幕<br/>
                    问答区：输入问题向老师提问，可选只看我的问题<br/>
                    文档区：显示老师上传的附件<br/>
                    聊天区：用户发送聊天信息，包括文字和表情，可以发给所有人也可以发给某人私聊，显示聊天记录。<br/>
                    工具栏：屏幕切换/选择线路<br/>
                    屏幕切换<br/>
                    <img src="https://zws-imgs-pub.ezijing.com/static/public/afb5c19997b9916d5b93b07a0a4f3491.png" alt=""><br/>
                    切换线路<br/>
                    <img src="https://zws-imgs-pub.ezijing.com/static/public/43a4ccf1f1cc383aacef7d5fe56cf98d.png" alt=""><br/>
                    `
                }
              ]
            },
            {
              name: '2.3 观看回放',
              child: [
                {
                  name: '2.3.1 进入回放视频',
                  content: `在课程大纲课程章节页面，选择相应的课程，点击“<span>观看回放</span>”，进入回放视频<br/>
                    <img src="https://zws-imgs-pub.ezijing.com/static/public/6d3a7e90992960d10218525b16e9d700.png" alt=""><br/>
                    观看回放页面<br/>
                    <img src="https://zws-imgs-pub.ezijing.com/static/public/a5094720de06c2db4ae17e226d147b02.png" alt=""><br/>
                    视频区：显示老师上课的视频，或老师的分享屏幕<br/>
                    问答区：显示问答记录<br/>
                    聊天区：显示聊天记录<br/>
                    文档区：显示老师分享的课件<br/>
                    工具栏：显示课件/切换屏幕/全屏
                    `
                },
                {
                  name: '2.3.2 显示课件',
                  content: `点击屏幕下方的显示课件按钮，如红框所示：<br/>
                    <img src="https://zws-imgs-pub.ezijing.com/static/public/5e989fed092c5b84c41fc66cf81a40d1.png" alt=""><br/>
                    `
                },
                {
                  name: '2.3.3 切换屏幕',
                  content: `点击屏幕下方的切换屏幕按钮，如红框所示：<br/>
                    <img src="https://zws-imgs-pub.ezijing.com/static/public/446445be8b2b5a34ef85e9aee51c5398.png" alt=""><br/>
                    `
                }
              ]
            }
          ]
        }
      ],
      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>
