mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-mobile.git
synced 2025-12-09 02:46:46 +08:00
122 lines
3.0 KiB
Vue
122 lines
3.0 KiB
Vue
<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>
|