<template>
  <div id="help">
    <div class="buttonClass">
      <div class="helpDiv" v-on:click="operationFileDownload">
        <el-image style="width: 340px; height: 224px; margin-right: 10px"
                  :src="require('../../utils/img/webdocument.png')"></el-image>
        <div style="display: flex; flex-direction: column; justify-content: center">
          <span class="divFontTop">Web端操作手册下载</span>
          <span class="divFont">操作手册，让您体验更流畅</span>
        </div>
      </div>
      <div class="helpDiv" v-on:click="operationVideoDownload">
        <el-image style="width: 340px; height: 224px; margin-right: 10px"
                  :src="require('../../utils/img/webvideo.png')"></el-image>
        <div style="display: flex; flex-direction: column; justify-content: center">
          <span class="divFontTop">Web端操作视频观看</span>
          <span class="divFont">操作视频，功能学习更直观</span>
        </div>
      </div>
      <div class="helpDiv" v-on:click="operationAppVideoDownload">
        <el-image style="width: 340px; height: 224px; margin-right: 10px"
                  :src="require('../../utils/img/appvideo.png')"></el-image>
        <div style="display: flex; flex-direction: column; justify-content: center">
          <span class="divFontTop">APP端操作视频观看</span>
          <span class="divFont">手机在手，轻松操作</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { networkUrl } from '../../data/global_configuration'

export default {
  name: 'help',
  methods: {
    // 跳转到操作视频网页
    operationVideoDownload() {
      window.open('https://www.bilibili.com/video/BV1Dk4y1y7ma/')
    },
    // 跳转到操作视频网页
    operationAppVideoDownload() {
      window.open('https://www.bilibili.com/video/BV1K64y1Q7V4?share_source=copy_web')
    },
    // 操作手册下载
    operationFileDownload() {
      let url = networkUrl()
      window.location.href = url + '/ext/%E4%BA%91%E5%BC%80%E7%A5%A8%E7%BD%91%E9%A1%B5%E7%89%88%E6%93%8D%E4%BD%9C%E8%AF%B4%E6%98%8E.docx'
    }
  }
}
</script>

<style scoped>
.body {
  display: flex;
  justify-content: center;
}

.buttonClass {
  display: flex;
  /*flex-direction: column;*/
  /*justify-content: center;*/
  /*align-content: center;*/
}
.divFontTop {
  font-size: 20px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  line-height: 34px;
  color: #4E4E4E;
  opacity: 1;
  margin-left: 10px;
  margin-top: 10px;
}
.divFont {
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 24px;
  color: #818181;
  opacity: 1;
  margin-left: 10px;
}
.helpDiv {
  width: 340px;
  height: 327px;
  background: #FFFFFF;
  border: 1px solid #EBEBEB;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.09);
  opacity: 1;
  border-radius: 6px;
  margin-left: 32px;
  cursor:pointer
}
</style>
