<template>
  <div class="box">
    <div class="head">使用指南 - 学生端</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) {
        let wWidth = (win.screen.width > 0) ? (win.innerWidth >= win.screen.width || win.innerWidth === 0) ? win.screen.width : win.innerWidth : win.innerWidth, wFsize // eslint-disable-line
        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: .16rem;
  font-weight: 800;
  height: .6rem;
  line-height: .6rem;
  background-color: #EDEDED;
}
.main{
  display:flex;
  .menu{
    width: 1.04rem;
    flex-shrink:0;
    background-color: #EDEDED;
    h2.title{
      color: #999999;
      font-size: .1rem;
      line-height: .14rem;
      font-weight: 800;
    }
    h3.title{
      color: #000000;
      font-size: .14rem;
      line-height: .2rem;
      font-weight: 400;
    }
    .title{
      margin: 0;
      padding: .15rem .08rem .15rem .13rem;
    }
    h3:active,h3:hover{
      background-color: #ffffff;
      color: #BB133E;
    }
  }
  .content{
    background-color: #ffffff;
    flex-grow:1;
    padding: .2rem;
    color: #000000;
    font-size: .14rem;
    line-height: .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>
