mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-07 09:56:42 +08:00
Compare commits
2 Commits
master
...
20250421_h
| Author | SHA1 | Date | |
|---|---|---|---|
|
8238bafc19 | ||
|
|
0d4c6f958f |
BIN
src/assets/images/hotforum/005.png
Normal file
BIN
src/assets/images/hotforum/005.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 218 KiB |
BIN
src/assets/images/hotforum/006.png
Normal file
BIN
src/assets/images/hotforum/006.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 151 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 690 KiB After Width: | Height: | Size: 1.6 MiB |
BIN
src/assets/images/hotforum/back_2025.jpg
Normal file
BIN
src/assets/images/hotforum/back_2025.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
@@ -1,40 +1,52 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="hot">
|
<div>
|
||||||
<div>
|
<div class="hot_2025">
|
||||||
|
<div class="center">
|
||||||
|
<div class="item" :style="{marginRight:(i%2==0||i==0)?'49px':'0'}" v-for="(item,i) in imgData_2025" :key="i">
|
||||||
|
<img class="img" @click="goLearn(item.url)" :src="require(`../../assets/images/hotforum/${item.img}.png`)" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hot">
|
||||||
<div class="center">
|
<div class="center">
|
||||||
<div class="item" :style="{marginRight:(i%2==0||i==0)?'49px':'0'}" v-for="item,i in imgData" :key="i">
|
<div class="item" :style="{marginRight:(i%2==0||i==0)?'49px':'0'}" v-for="item,i in imgData" :key="i">
|
||||||
<img class="img" @click="goLearn(item.url)" :src="require(`../../assets/images/hotforum/${item.img}.png`)" alt="">
|
<img class="img" @click="goLearn(item.url)" :src="require(`../../assets/images/hotforum/${item.img}.png`)" alt="">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="display: flex;justify-content: center;margin-bottom: 52px;">
|
<!-- <div style="display: flex;justify-content: center;margin-bottom: 52px;" >-->
|
||||||
<img src="../../assets/images/hotforum/foot.png" alt="">
|
<!-- <img src="../../assets/images/hotforum/foot.png" alt="">-->
|
||||||
</div>
|
<!-- </div>-->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: "hotforum",
|
name: "hotforum",
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
imgData:[
|
imgData_2025:[
|
||||||
{img:'01',url:'1265897142383042560'},
|
{img:'005',url:'1351506180295131136'},
|
||||||
{img:'02',url:'1265697724606210048'},
|
{img:'006',url:''},
|
||||||
{img:'003',url:'1280185851054231552'},
|
],
|
||||||
{img:'4',url:''},
|
imgData:[
|
||||||
],
|
{img:'01',url:'1265897142383042560'},
|
||||||
|
{img:'02',url:'1265697724606210048'},
|
||||||
|
{img:'003',url:'1280185851054231552'},
|
||||||
|
// {img:'4',url:''},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
goLearn(item){
|
||||||
|
if(item){
|
||||||
|
// this.$router.push({path:'/course/detail',query:{id:item}})
|
||||||
|
window.open(`https://u.boe.com/pc/course/detail?id=${item}`)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
},
|
||||||
goLearn(item){
|
}
|
||||||
if(item){
|
|
||||||
// this.$router.push({path:'/course/detail',query:{id:item}})
|
|
||||||
window.open(`https://u.boe.com/pc/course/detail?id=${item}`)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@@ -72,108 +84,248 @@
|
|||||||
/* 当窗口宽度大于3068px时的样式 */
|
/* 当窗口宽度大于3068px时的样式 */
|
||||||
}
|
}
|
||||||
@media (min-width: 3000px) {
|
@media (min-width: 3000px) {
|
||||||
.hot{
|
.hot{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
// max-width: 1920px;
|
// max-width: 1920px;
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
// min-height: 1373px;
|
// min-height: 1373px;
|
||||||
background: url("../../assets/images/hotforum/back.jpg") no-repeat;
|
background: url("../../assets/images/hotforum/back.jpg") no-repeat;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
.center {
|
|
||||||
max-width: 2560px;
|
|
||||||
max-height: 1300px;
|
|
||||||
margin-bottom: 5%;
|
|
||||||
margin-top: 30vh;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
justify-content: center;
|
||||||
|
.center {
|
||||||
|
max-width: 2560px;
|
||||||
|
max-height: 1300px;
|
||||||
|
margin-bottom: 5%;
|
||||||
|
margin-top: 30vh;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
.item {
|
.item {
|
||||||
width: 1220px;
|
width: 1220px;
|
||||||
height: 660px;
|
height: 660px;
|
||||||
background: url("../../assets/images/hotforum/border.png") no-repeat;
|
background: url("../../assets/images/hotforum/border.png") no-repeat;
|
||||||
background-size: 100%;
|
background-size: 100%;
|
||||||
padding: 28px;
|
padding: 28px;
|
||||||
padding-top: 62px;
|
padding-top: 62px;
|
||||||
margin-bottom: 59px;
|
margin-bottom: 59px;
|
||||||
|
|
||||||
.img {
|
.img {
|
||||||
width: 100%; // 图片宽度占满item宽度
|
width: 100%; // 图片宽度占满item宽度
|
||||||
height: auto; // 自动调整高度
|
height: auto; // 自动调整高度
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
@media (min-height: 1500px) {
|
@media (min-height: 1500px) {
|
||||||
.hot{
|
.hot{
|
||||||
|
width: 100%;
|
||||||
|
// max-width: 1920px;
|
||||||
|
min-height: 100%;
|
||||||
|
// min-height: 1373px;
|
||||||
|
background: url("../../assets/images/hotforum/back.jpg") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
.center {
|
||||||
|
max-width: 1068px;
|
||||||
|
max-height: 580px;
|
||||||
|
margin-bottom: 5%;
|
||||||
|
margin-top: 30vh;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
.item {
|
||||||
|
width: 500px;
|
||||||
|
height: 271px;
|
||||||
|
background: url("../../assets/images/hotforum/border.png") no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
padding: 14px;
|
||||||
|
padding-top: 26px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
|
||||||
|
.img {
|
||||||
|
width: 100%; // 图片宽度占满item宽度
|
||||||
|
height: auto; // 自动调整高度
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 1928px) and (max-width: 3000px) {
|
||||||
|
.hot{
|
||||||
|
width: 100%;
|
||||||
|
// max-width: 1920px;
|
||||||
|
min-height: 100%;
|
||||||
|
// min-height: 1373px;
|
||||||
|
background: url("../../assets/images/hotforum/back.jpg") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
.center {
|
||||||
|
max-width: 1800px;
|
||||||
|
max-height: 1100px;
|
||||||
|
margin-bottom: 5%;
|
||||||
|
margin-top: 35vh;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
.item {
|
||||||
|
width: 860px;
|
||||||
|
height: 466px;
|
||||||
|
background: url("../../assets/images/hotforum/border.png") no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
padding: 28px;
|
||||||
|
padding-top: 48px;
|
||||||
|
margin-bottom: 70px;
|
||||||
|
|
||||||
|
.img {
|
||||||
|
width: 100%; // 图片宽度占满item宽度
|
||||||
|
height: auto; // 自动调整高度
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hot_2025{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
// max-width: 1920px;
|
// max-width: 1920px;
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
// min-height: 1373px;
|
// min-height: 1373px;
|
||||||
background: url("../../assets/images/hotforum/back.jpg") no-repeat;
|
background: url("../../assets/images/hotforum/back_2025.jpg") no-repeat;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
.center {
|
.center{
|
||||||
max-width: 1068px;
|
max-width: 1270px;
|
||||||
max-height: 580px;
|
max-height: 700px;
|
||||||
margin-bottom: 5%;
|
margin-bottom: 5%;
|
||||||
margin-top: 30vh;
|
margin-top: 22%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
.item{
|
||||||
.item {
|
width: 610px;
|
||||||
width: 500px;
|
height: 330px;
|
||||||
height: 271px;
|
|
||||||
background: url("../../assets/images/hotforum/border.png") no-repeat;
|
background: url("../../assets/images/hotforum/border.png") no-repeat;
|
||||||
background-size: 100%;
|
background-size: 100%;
|
||||||
padding: 14px;
|
padding: 14px;
|
||||||
padding-top: 26px;
|
padding-top: 31px;
|
||||||
margin-bottom: 30px;
|
margin-bottom: 59px;
|
||||||
|
cursor: pointer;
|
||||||
.img {
|
.img{
|
||||||
width: 100%; // 图片宽度占满item宽度
|
width: 581px;
|
||||||
height: auto; // 自动调整高度
|
height: 283px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* 当窗口宽度大于3068px时的样式 */
|
||||||
|
}
|
||||||
|
@media (min-width: 3000px) {
|
||||||
|
.hot_2025{
|
||||||
|
width: 100%;
|
||||||
|
// max-width: 1920px;
|
||||||
|
min-height: 100%;
|
||||||
|
// min-height: 1373px;
|
||||||
|
background: url("../../assets/images/hotforum/back_2025.jpg") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
.center {
|
||||||
|
max-width: 2560px;
|
||||||
|
max-height: 1300px;
|
||||||
|
margin-bottom: 5%;
|
||||||
|
margin-top: 30vh;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
.item {
|
||||||
|
width: 1220px;
|
||||||
|
height: 660px;
|
||||||
|
background: url("../../assets/images/hotforum/border.png") no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
padding: 28px;
|
||||||
|
padding-top: 62px;
|
||||||
|
margin-bottom: 59px;
|
||||||
|
|
||||||
|
.img {
|
||||||
|
width: 100%; // 图片宽度占满item宽度
|
||||||
|
height: auto; // 自动调整高度
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@media (min-height: 1500px) {
|
||||||
|
.hot_2025{
|
||||||
|
width: 100%;
|
||||||
|
// max-width: 1920px;
|
||||||
|
min-height: 100%;
|
||||||
|
// min-height: 1373px;
|
||||||
|
background: url("../../assets/images/hotforum/back_2025.jpg") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
.center {
|
||||||
|
max-width: 1068px;
|
||||||
|
max-height: 580px;
|
||||||
|
margin-bottom: 5%;
|
||||||
|
margin-top: 30vh;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
.item {
|
||||||
|
width: 500px;
|
||||||
|
height: 271px;
|
||||||
|
background: url("../../assets/images/hotforum/border.png") no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
padding: 14px;
|
||||||
|
padding-top: 26px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
|
||||||
|
.img {
|
||||||
|
width: 100%; // 图片宽度占满item宽度
|
||||||
|
height: auto; // 自动调整高度
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@media (min-width: 1928px) and (max-width: 3000px) {
|
@media (min-width: 1928px) and (max-width: 3000px) {
|
||||||
.hot{
|
.hot_2025{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
// max-width: 1920px;
|
// max-width: 1920px;
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
// min-height: 1373px;
|
// min-height: 1373px;
|
||||||
background: url("../../assets/images/hotforum/back.jpg") no-repeat;
|
background: url("../../assets/images/hotforum/back_2025.jpg") no-repeat;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
.center {
|
|
||||||
max-width: 1800px;
|
|
||||||
max-height: 1100px;
|
|
||||||
margin-bottom: 5%;
|
|
||||||
margin-top: 35vh;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
justify-content: center;
|
||||||
|
.center {
|
||||||
|
max-width: 1800px;
|
||||||
|
max-height: 1100px;
|
||||||
|
margin-bottom: 5%;
|
||||||
|
margin-top: 35vh;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
.item {
|
.item {
|
||||||
width: 860px;
|
width: 860px;
|
||||||
height: 466px;
|
height: 466px;
|
||||||
background: url("../../assets/images/hotforum/border.png") no-repeat;
|
background: url("../../assets/images/hotforum/border.png") no-repeat;
|
||||||
background-size: 100%;
|
background-size: 100%;
|
||||||
padding: 28px;
|
padding: 28px;
|
||||||
padding-top: 48px;
|
padding-top: 48px;
|
||||||
margin-bottom: 70px;
|
margin-bottom: 70px;
|
||||||
|
|
||||||
.img {
|
.img {
|
||||||
width: 100%; // 图片宽度占满item宽度
|
width: 100%; // 图片宽度占满item宽度
|
||||||
height: auto; // 自动调整高度
|
height: auto; // 自动调整高度
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user