hz/learning-system-portal
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git synced 2025-12-09 02:46:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

调整显示

Browse Source
This commit is contained in:
zhangsir
2024-07-24 10:23:46 +08:00
parent 8fd89f0ea3
commit 549c81247d
1 changed files with 105 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
src/views/hotforum/Index.vue
View File

@@ -31,8 +31,8 @@
justify-content: center; justify-content: center;
.center{ .center{
max-width: 1270px; max-width: 1270px;
margin-bottom: 66px; margin-bottom: 5%;
margin-top: 285px; margin-top: 22%;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
.item{ .item{
@@ -49,5 +49,108 @@
} }
} }
} }
/* 当窗口宽度大于3068px时的样式 */
}
@media (min-width: 3068px) {
.hot{
width: 100%;
// max-width: 1920px;
min-height: 100%;
// min-height: 1373px;
background: url("../../assets/images/hotforum/background.jpg") no-repeat;
background-size: 100% 100%;
display: flex;
justify-content: center;
.center {
max-width: 2560px;
margin-bottom: 5%;
margin-top: 22%;
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 (max-width: 1384px) {
.hot{
width: 100%;
// max-width: 1920px;
min-height: 100%;
// min-height: 1373px;
background: url("../../assets/images/hotforum/background.jpg") no-repeat;
background-size: 100% 100%;
display: flex;
justify-content: center;
.center {
max-width: 1068px;
margin-bottom: 5%;
margin-top: 22%;
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: 2000px) and (max-width: 3068px) {
.hot{
width: 100%;
// max-width: 1920px;
min-height: 100%;
// min-height: 1373px;
background: url("../../assets/images/hotforum/background.jpg") no-repeat;
background-size: 100% 100%;
display: flex;
justify-content: center;
.center {
max-width: 1800px;
margin-bottom: 5%;
margin-top: 22%;
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; // 自动调整高度
}
}
}
}
} }
</style> </style>