|
|
@@ -35,16 +35,25 @@
|
|
|
margin-bottom: 32px;
|
|
|
border-radius: 4px 4px 4px 4px;
|
|
|
}
|
|
|
+ .viewImg{
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .pc .item .items:hover{
|
|
|
+ box-shadow: rgba(0, 0, 0, .16) 0px 0px 10px;
|
|
|
+ /* background: red; */
|
|
|
+ }
|
|
|
+ .headercontent{
|
|
|
+ background: linear-gradient(rgba(15, 15, 15, 1), rgba(58, 58, 58, 1));
|
|
|
+ }
|
|
|
.pc .header {
|
|
|
-
|
|
|
height: 40px;
|
|
|
width: 100%;
|
|
|
background: url('./image/pc-header.png');
|
|
|
- margin-bottom: 48px;
|
|
|
+ /* margin-bottom: 48px; */
|
|
|
background-repeat: no-repeat;
|
|
|
- background-size: 1920px 80px;
|
|
|
- background-color: rgba(15, 15, 15, 1);
|
|
|
- background-position: center center;
|
|
|
+ background-size: auto 80px;
|
|
|
+ background-color: l;
|
|
|
+ background-position: 50% center;
|
|
|
padding: 20px 0;
|
|
|
text-align: center;
|
|
|
}
|
|
|
@@ -61,8 +70,13 @@
|
|
|
display: flex;
|
|
|
flex-flow: row wrap;
|
|
|
justify-content: left;
|
|
|
+ margin-top: 48px;
|
|
|
+ height: calc(100vh - 80px - 48px);
|
|
|
+ overflow-y: auto;
|
|
|
+ }
|
|
|
+ .pc .list::-webkit-scrollbar {
|
|
|
+ display: none; /* Chrome Safari */
|
|
|
}
|
|
|
-
|
|
|
.pc .list .item:not(:nth-child(3n)) {
|
|
|
margin-right: 30px;
|
|
|
}
|
|
|
@@ -79,6 +93,12 @@
|
|
|
height: 190px;
|
|
|
object-fit: cover;
|
|
|
display: block;
|
|
|
+ transition-duration: .5s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pc .item .items:hover img{
|
|
|
+ /* background: red; */
|
|
|
+ transform: scale(1.2);
|
|
|
}
|
|
|
|
|
|
.pc .list .item .name {
|
|
|
@@ -103,8 +123,15 @@
|
|
|
background-repeat: no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
}
|
|
|
+
|
|
|
+ .mobile .list::-webkit-scrollbar {
|
|
|
+ display: none; /* Chrome Safari */
|
|
|
+ }
|
|
|
+
|
|
|
.mobile .list {
|
|
|
width: 100vw;
|
|
|
+ height: calc(100vh - 62px);
|
|
|
+ overflow-y: auto;
|
|
|
}
|
|
|
.mobile .list .item {
|
|
|
padding: 16px;
|
|
|
@@ -116,7 +143,7 @@
|
|
|
border-bottom: 1px solid #E6E6E6;
|
|
|
}
|
|
|
|
|
|
- .mobile .list .item img {
|
|
|
+ .mobile .list .item .viewImg {
|
|
|
float: left;
|
|
|
width: 120px;
|
|
|
height: 62px;
|
|
|
@@ -142,8 +169,10 @@
|
|
|
<body>
|
|
|
|
|
|
<div class="container" id="container">
|
|
|
- <div class="header">
|
|
|
- <img src="./image/logo.png" alt="">
|
|
|
+ <div class="headercontent">
|
|
|
+ <div class="header">
|
|
|
+ <img src="./image/logo.png" alt="">
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="list" id="list">
|
|
|
</div>
|
|
|
@@ -224,6 +253,7 @@
|
|
|
var testa = document.createElement("a");
|
|
|
var testDv = document.createElement("div");
|
|
|
var testDva = document.createElement("div");
|
|
|
+ var testDvaImg = document.createElement("div");
|
|
|
var divImg = document.createElement("img");
|
|
|
testDv.id = "t" + i;
|
|
|
testDv.className = "col-lg-4 name";
|
|
|
@@ -231,11 +261,13 @@
|
|
|
testDv.innerHTML = item.sceneName
|
|
|
divcontent.className = 'item'
|
|
|
testDva.className = 'items'
|
|
|
+ testDvaImg.className = 'viewImg'
|
|
|
divImg.src = item.thumb;
|
|
|
divImg.onerror = function(){
|
|
|
this.src = "./image/bg_banner.png";
|
|
|
}
|
|
|
- testDva.appendChild(divImg);
|
|
|
+ testDvaImg.appendChild(divImg)
|
|
|
+ testDva.appendChild(testDvaImg);
|
|
|
testDva.appendChild(testDv);
|
|
|
testa.target = '_blank'
|
|
|
testa.href = item.webSite;
|
