<template>
  <div class="el-accessibleView">
    <div id="ribbon">
      <div class="group" style="width:214px;">
        <div class="content">
          <div class="bigtool" cmd="reset">
            <img src="./images/reset.gif"/>
            <span>复原</span>
          </div>
          <div class="bigtool" cmd="back">
            <img src="./images/back.gif"/>
            <span>后退</span>
          </div>
          <div class="bigtool" cmd="forward">
            <img src="./images/forward.gif"/>
            <span>前进</span>
          </div>
          <div class="bigtool" cmd="refresh">
            <img src="./images/refresh.gif"/>
            <span>刷新</span>
          </div>
        </div>
        <div class="footer">
          浏览
        </div>
      </div>
      <div class="seperator"></div>
      <div class="group" style="width:473px;">
        <div class="content">
          <div class="bigtool" cmd="screen">
            <img src="./images/screen.gif"/>
            <span>显示屏</span>
          </div>
          <div class="bigtool" cmd="zoomout">
            <img src="./images/zoomout.gif"/>
            <span>放大页面</span>
          </div>
          <div class="bigtool" cmd="zoomin">
            <img src="./images/zoomin.gif"/>
            <span>缩小页面</span>
          </div>
          <div class="bigtool" cmd="fontplus">
            <img src="./images/fontplus.gif"/>
            <span>放大字体</span>
          </div>
          <div class="bigtool" cmd="fontminus">
            <img src="./images/fontminus.gif"/>
            <span>缩小字体</span>
          </div>
          <div class="bigtool" cmd="cross">
            <img src="./images/cross.gif"/>
            <span>标尺</span>
          </div>
          <div class="bigtool" cmd="colors">
            <img src="./images/colors.gif"/>
            <span>页面配色</span>
            <span class="dropdown">▼</span>
            <div class="dropdownlist">
              <div class="listitem preview" cmd="white-black-blue">
                <span>白底黑字蓝链接</span>
                <div style="background-color: White; color: Black;">
                  白底，黑字，<span style="color: Blue; cursor: pointer;">蓝链接</span>
                </div>
              </div>
              <div class="listitem preview" cmd="blue-yellow-white">
                <span>蓝底黄字白链接</span>
                <div style="background-color: Blue; color: Yellow;">
                  蓝底，黄字，<span style="color: White; cursor: pointer;">白链接</span>
                </div>
              </div>
              <div class="listitem preview" cmd="yellow-black-blue">
                <span>黄底黑字蓝链接</span>
                <div style="background-color: Yellow; color: Black;">
                  黄底，黑字，<span style="color: Blue; cursor: pointer;">蓝链接</span>
                </div>
              </div>
              <!-- <div class="listitem preview" cmd="black-yellow-white">
                   <span>黑底黄字白链接</span>
                   <div style="background-color: Black; color: Yellow;">
                       黑底，黄字，<span style="color: White; cursor: pointer;">白链接</span>
                   </div>
               </div>-->
              <div class="listitemseperator"></div>
              <div class="listitem" cmd="normal-colors"><span>使用原始配色方案</span></div>
            </div>
          </div>
          <div class="bigtool" cmd="text">
            <img src="./images/text.gif"/>
            <span>文本模式</span>
          </div>
        </div>
        <div class="footer">
          视力
        </div>
      </div>
      <div class="seperator"></div>
      <div class="group" style="width:233px;">
        <div class="content">
          <div class="bigtool" cmd="read">
            <img src="./images/read.gif"/>
            <span>指读</span>
          </div>
          <div class="bigtool" cmd="readon">
            <img src="./images/readon.gif"/>
            <span>连读</span>
          </div>
          <div class="bigtool" cmd="volumeplus">
            <img src="./images/volumeplus.gif"/>
            <span>增加音量</span>
          </div>
          <div class="bigtool" cmd="volumeminus">
            <img src="./images/volumeminus.gif"/>
            <span>减小音量</span>
          </div>
        </div>
        <div class="footer">
          声音
        </div>
      </div>
      <div class="seperator"></div>
      <div style="width: 66px;" class="group">
        <div class="content">
          <div class="bigtool" onclick="window.close();">
            <img src="./images/close.gif">
            <span>关闭窗口</span>
          </div>
        </div>
        <div class="footer">
          窗口
        </div>
      </div>
      <div style="width: 60px;" class="group">
        <div class="content">
          <div class="bigtool" cmd="about">
            <img src="./images/about.png">
            <span>关于</span>
          </div>
        </div>
        <div class="footer">
          系统
        </div>
      </div>
      <div style="width: 66px;" class="group">
        <div class="content">
          <div class="bigtool" onclick="back()">
            <img src="./images/back.png">
            <span>返回</span>
          </div>
        </div>
      </div>
      <div class="seperator"></div>
    </div>
    <iframe id="frame" width="100%" frameborder="0"></iframe>
    <div id="screen"></div>
    <div id="loading">页面加载中...</div>
    <div id="about">
      <div class="about-content">
        <h2>系统介绍</h2>
        <dl>
          <dt>tab键切换</dt>
          <dd>1.按tab键在系统设置的区域中进行从上到下从父级区域到子级区域</dd>
          <dd>2.按住shift+tab键在同级区域间进行切换</dd>
        </dl>
        <dl>
          <dt>栏目跳转快捷键</dt>
          <dd>alt+1:跳转到首页</dd>
          <dd>alt+2:跳转到首页</dd>
        </dl>
        <dl>
          <dt>导航树的切换</dt>
          <dd>↑：跳转到上一个菜单</dd>
          <dd>↓：跳转到下一个菜单</dd>
          <dd>←：跳转到上一级菜单</dd>
          <dd>→：跳转到下一级菜单</dd>
        </dl>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'ElAccessibleView'
};
</script>
