<template>
  <div class="layout">
    <template v-if="isMobile">
      <div class="m-message">
        <img :src="`${$cdn}/images/message_bg.jpg`" alt>
      </div>
      <ctitle :title="'消息资讯'"></ctitle>
      <div class="m-news-con">
        <a :href="item.url" target="_blank" class="m-item" v-for="(item,index) in article" :key="index">
          <div class="m-item-idx">
            <div class="m-item-idx-con">{{index+1}}</div>
          </div>
          <div class="m-item-con">
            <div class="m-item-con-title">{{item.title}}</div>
            <div class="m-item-con-sub">{{item.updateTime}}</div>
          </div>
        </a>
      </div>
      <div class="divide-line">
        <img :src="require('@/assets/images/img_ele_transition@2x.png')">
      </div>
    </template>
    <template v-else>
      <ctitle :title="'消息资讯'"></ctitle>
      <div class="message-main">
        <div class="message-left">
          <div class="new-con">
            <ul class="new-ul">
              <li v-for="(item,index) in article" :key="index">
                <a :href="item.url" target="_blank">{{index+1}}.{{item.title}}</a>
              </li>
            </ul>
          </div>
        </div>
        <div class="message-right">
          <img :src="`${$cdn}/images/message-bg.jpg`" alt>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import ctitle from '@/components/ctitle'
import browser from '@/util/browser.js'

export default {
  components: {
    ctitle
  },
  data () {
    return {
      article: null,
      isMobile: browser.mobile
    }
  },
  async mounted () {
    let result = (await this.$http.get('/news/api/get?rnd=' + Math.random()))
      .data
    this.article = result
  }
}
</script>

<style scoped>
@import url("./style.css");
@import url("./mMessage.css");

</style>
