热点论坛页面实现

This commit is contained in:
zhangsir
2024-07-23 15:35:18 +08:00
parent 5e4283e0fb
commit d721b56b4e
6 changed files with 60 additions and 0 deletions

51
pages/hotforum/index.vue Normal file
View File

@@ -0,0 +1,51 @@
<template>
<view class="hotforum">
<view class="tem">
<view class="item" v-for="item,i in imgData" :key="i">
<image class="img" :src="require(`../../static/images/hotforum/${item}.png`)" mode=""></image>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
imgData:['one','two','one','two'],
}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.hotforum{
width: 100%;
min-height: 100vh;
background: url('../../static/images/hotforum/back.jpg') no-repeat;
background-size: 100%;
.tem{
padding-top: 248rpx;
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>