<template>
  <view>
    <!-- 2025 区块 -->
    <view class="hotforum_2025">

      <view class="tem">
        <div class="title24" :style="{ marginTop: '-80px' }">
          <img :src="require('../../static/images/hotforum/2025.png')" mode="widthFix" />
        </div>
        <view class="item" v-for="(item, i) in imgData_2025" :key="i">
          <image class="img" @click="goLearn(item.url)" :src="require(`../../static/images/hotforum/${item.img}.png`)" mode=""></image>
        </view>
      </view>

      <!-- 分隔线
      <div class="line" style="margin-top: 60px; text-align: center;">
        <img src="../../static/images/hotforum/line.png" alt="">
      </div>-->
      <!-- 2024 标题 -->
      <div class="title24" :style="{ marginTop: '60px' }">
        <img :src="require('../../static/images/hotforum/2024.png')" mode="widthFix" />
      </div>

      <view class="tem24">
        <view class="item" v-for="(item, i) in imgData" :key="i">
          <image class="img" @click="goLearn(item.url)" :src="require(`../../static/images/hotforum/${item.img}.png`)" mode=""></image>
        </view>
        <div class="foot"  :style="{ marginTop: '60px', marginBottom: '30px' }">
          <img :src="require('../../static/images/hotforum/foot.png')"  />
        </div>
      </view>
    </view>

  </view>
</template>


<script>
export default {
  data() {
    return {
      imgData:[
        {img:'01',url:'1265897142383042560'},
        {img:'02',url:'1265697724606210048'},
        {img:'003',url:'1280185851054231552'},
        {img:'04',url:'1321778585966247936'},
      ],
      imgData_2025:[
        {img:'005',url:'1351506180295131136'},
        {img:'2503',url:'1375146833375027200'},
      ],
    }
  },
  methods: {
    goLearn(item){
      if(item){
        // uni.navigateTo({
        // 	url: '/pages/study/courseStudy?id=' + item
        // })
        window.open(`https://u.boe.com/mobile/pages/study/courseStudy?id=${item}`)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.title24 {
  text-align: center;

  img {
    width: 80%;
    max-width: 600px;
    height: auto;
  }
}


page {
  height: 100%;
  background-color: #fff; // 可选：设置默认背景色
}

.hotforum_2025 {
  width: 100%;
  min-height: 100vh; // 改为 vh 单位，确保覆盖视口高度
  //margin-top: -10px;
  background: url('../../static/images/hotforum/back25.png') no-repeat;
  background-size: 100% 100%; // 或 cover，根据图片比例调整
  //background-size: cover; // 自动适配容器大小，可能更合适
  box-sizing: border-box;
}
.tem {
  padding-top: 258rpx;
  //padding-bottom: 106rpx;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.tem24 {
  padding-top: 100rpx;
  //padding-bottom: 106rpx;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.item {
  background: url('../../static/images/hotforum/border.png') no-repeat;
  background-size: 100%;
  width: 683rpx;
  height: 422rpx;
  margin-top: -28rpx;
}

.img {
  width: 650rpx;
  height: 318rpx;
  margin-top: 84rpx;
  margin-left: 15rpx;
}
</style>
