<template>
  <div class="btnbox">
    <div class="btn" :class="index % 2 !== 0 ? 'btn2' : ''" v-for="(item, index) in list" :key="index">
      <div class="box" @click="btn(item)">
        <img :src="item.icons" alt="图标" class="icon">
        <div class="textbox">
          <span class="zhtext">{{ item.title }}</span>
          <span class="entext">{{ item.en }}</span>
          <b class="xian">——</b>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data () {
    return {
      list: [
        {
          title: '在线投稿系统',
          en: 'Online submission',
          icons: require('../../assets/icons/icon1.png'),
          uri: 'http://tg.jjzhzzs.cn/Journalx_jjzh/authorLogOn.action?mag_Id=1',
          path: ''
        },
        {
          title: '文稿处理系统',
          en: 'Document processing',
          icons: require('../../assets/icons/icon2.png'),
          uri: 'http://tg.jjzhzzs.cn/Journalx_jjzh/editorLogOn.action?mag_Id=1',
          path: ''
        },
        {
          title: '投稿指南',
          en: 'Guidelines',
          icons: require('../../assets/icons/icon3.png'),
          uri: 'http://tg.jjzhzzs.cn/Journalx_jjzh/basicinfo/viewHtmlFile.action?magId=1&id=8',
          path: ''
        },
        {
          title: '常见问题释疑',
          en: 'Asked Questions',
          icons: require('../../assets/icons/icon4.png'),
          uri: 'http://www.magtech.com.cn/journalx_author_faq.html',
          path: ''
        },
        {
          title: '下载中心',
          en: 'Download center',
          icons: require('../../assets/icons/icon5.png'),
          uri: 'http://jjzh.chinajournal.net.cn/WKB2/WebPublication/wkTextContent.aspx?colType=4&tp=gklb&mid=jjzh',
          path: ''
        }
      ]
    }
  },
  methods: {
    btn (e) {
      if (e.uri) {
        window.open(e.uri)
        return false
      }
      this.$router.push(`/www${e.path}`)
    }
  },
  mounted () {}
}
</script>

<style lang="less" scoped>
.btnbox {
  width: 100%;
  .box {
    width: 70%;
    margin: 0 auto;
    padding-top: 20px;
    display: flex;
    cursor: pointer;
    .icon {
      height: 30%;
      margin-top: 10px;
      margin-right: 10%;
    }
    .textbox {
      width: 80%;
      margin: 5px auto;
      .entext {
        font-size: 0.5em;
      }
      span {
        display: block;
        color: #fff;
      }
      b {
        color: #fff;
      }
    }
  }
  .btn {
    background: #a80002;
  }
  .btn2 {
    background: #880203;
  }
}
</style>
