mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-09 02:46:44 +08:00
53 lines
1.1 KiB
Vue
53 lines
1.1 KiB
Vue
<template>
|
|
<div class="hot">
|
|
<div class="center">
|
|
<div class="item" :style="{marginRight:(i%2==0||i==0)?'49px':'0'}" v-for="item,i in imgData" :key="i">
|
|
<img class="img" :src="require(`../../assets/images/hotforum/${item}.png`)" alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "hotforum",
|
|
data() {
|
|
return {
|
|
imgData:['one','two','one','two'],
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.hot{
|
|
width: 100%;
|
|
max-width: 1528px;
|
|
min-height: 776px;
|
|
// min-height: 1373px;
|
|
background: url("../../assets/images/hotforum/background.jpg") no-repeat;
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
.center{
|
|
max-width: 1270px;
|
|
margin-bottom: 66px;
|
|
margin-top: 285px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
.item{
|
|
width: 610px;
|
|
height: 330px;
|
|
background: url("../../assets/images/hotforum/border.png") no-repeat;
|
|
background-size: 100%;
|
|
padding: 14px;
|
|
padding-top: 31px;
|
|
margin-bottom: 59px;
|
|
.img{
|
|
width: 581px;
|
|
height: 283px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |