diff --git a/src/assets/images/hotforum/2024.png b/src/assets/images/hotforum/2024.png new file mode 100644 index 00000000..55512962 Binary files /dev/null and b/src/assets/images/hotforum/2024.png differ diff --git a/src/assets/images/hotforum/2025.png b/src/assets/images/hotforum/2025.png new file mode 100644 index 00000000..20ae4d7c Binary files /dev/null and b/src/assets/images/hotforum/2025.png differ diff --git a/src/assets/images/hotforum/2501.jpg b/src/assets/images/hotforum/2501.jpg new file mode 100644 index 00000000..d9a28bbe Binary files /dev/null and b/src/assets/images/hotforum/2501.jpg differ diff --git a/src/assets/images/hotforum/2502.png b/src/assets/images/hotforum/2502.png new file mode 100644 index 00000000..52bdcb18 Binary files /dev/null and b/src/assets/images/hotforum/2502.png differ diff --git a/src/assets/images/hotforum/back25.png b/src/assets/images/hotforum/back25.png new file mode 100644 index 00000000..2c7edbe6 Binary files /dev/null and b/src/assets/images/hotforum/back25.png differ diff --git a/src/assets/images/hotforum/line.png b/src/assets/images/hotforum/line.png new file mode 100644 index 00000000..e96822dc Binary files /dev/null and b/src/assets/images/hotforum/line.png differ diff --git a/src/views/hotforum/Index-bak.vue b/src/views/hotforum/Index-bak.vue new file mode 100644 index 00000000..88c1a1c4 --- /dev/null +++ b/src/views/hotforum/Index-bak.vue @@ -0,0 +1,179 @@ + + + + + diff --git a/src/views/hotforum/Index.vue b/src/views/hotforum/Index.vue index 88c1a1c4..fa4bf043 100644 --- a/src/views/hotforum/Index.vue +++ b/src/views/hotforum/Index.vue @@ -1,7 +1,24 @@ @@ -24,6 +41,10 @@ {img:'003',url:'1280185851054231552'}, {img:'04',url:'1321778585966247936'}, ], + imgData25:[ + {img:'01',url:'1265897142383042560'}, + {img:'02',url:'1265697724606210048'}, + ], } }, methods: { @@ -43,15 +64,17 @@ // max-width: 1920px; min-height: 100%; // min-height: 1373px; - background: url("../../assets/images/hotforum/back.jpg") no-repeat; - background-size: 100% 100%; + background: url("../../assets/images/hotforum/back25.png") no-repeat; + background-size: cover; display: flex; justify-content: center; + .title25{ + margin: 0 auto;margin-top: 100px;width: 100%;text-align: center; + } .center{ max-width: 1270px; max-height: 700px; margin-bottom: 5%; - margin-top: 22%; display: flex; flex-wrap: wrap; .item{ @@ -71,109 +94,109 @@ } /* 当窗口宽度大于3068px时的样式 */ } -@media (min-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: 2560px; - max-height: 1300px; - margin-bottom: 5%; - margin-top: 30vh; - display: flex; - flex-wrap: wrap; +// @media (min-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: 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; +// .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{ - 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; +// .img { +// width: 100%; // 图片宽度占满item宽度 +// height: auto; // 自动调整高度 +// } +// } +// } +// } +// } +// @media (min-height: 1500px) { +// .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; +// .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; +// .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; +// .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; // 自动调整高度 - } - } - } -} -} +// .img { +// width: 100%; // 图片宽度占满item宽度 +// height: auto; // 自动调整高度 +// } +// } +// } +// } +// }