完成海报板块，底部信息

bottom.css

@@ -1,7 +1,102 @@
+#bottom{
+    position: relative;
+    width: 100%;
+    height: 19.5rem;
+    background: #17181D;
+    opacity: 1;
+    border-width: 0;
+    margin:0;
+}
+
+.decoration{
+    position:absolute;
+    /* top:255rem; */
+    top:-18.1rem;
+    right:0;
+}
+.decoration img{
+    width:70.6rem;
+}
+
+
+#fdage{
+    width:12rem;
+    height:3.2rem;
+}
+
 .info{
-    /* top:2rem; */
-    height:10rem;
-    width:10rem;
-    margin:0 2rem 0 2rem;
-    background-color: lightgrey;
+    position:absolute;
+    left:12.7rem;
+    top:7.7rem;
+    font-size: 0.7rem;
+    font-family: Microsoft YaHei;
+    font-weight: 400;
+    line-height: 19px;
+    color: #FFFFFF;
+    opacity: 0.7;
+}
+
+.support{
+    position:absolute;
+    left:0;
+    margin-top:1rem;
+}
+
+.bottom-qrcode{
+    position:absolute;
+    top:8.2rem;
+    left:31.9rem;
+    display: inline-block;
+    display: flex;
+    justify-content: space-between;
+    width:10.1rem;
+    height:4.5rem;
+    opacity:1;
+}
+
+.aboutus{
+    position:absolute;
+    top:5.6rem;
+    left:45.7rem;
+}
+.line{
+    position:absolute;
+    top:7.2rem;
+    left:45.7rem;
+    width:42.2rem;
+    border:solid #4B4B4B 1px;
+}
+
+.box{
+    height:6rem;
+    margin-top:0.9rem;
+    display: flex;
+    flex-direction: column;
+    justify-content:space-around;
+}
+
+.box-extra1{
+    height:4.3rem;
+}
+
+.box-extra2{
+    height:2.7rem;
+}
+
+
+.info div:nth-child(1){
+    margin-bottom:0.4rem;
+    font-size: 0.8rem;
+}
+
+.operation{
+    position:absolute;
+    top:5.6rem;
+    left:67.4rem;
+}
+
+.explore{
+    position:absolute;
+    top:5.6rem;
+    left:82.6rem;
 }

exhibition.css

@@ -36,7 +36,7 @@
 
 .img-title{
     position:absolute;
-    top:3rem;
+    top:4rem;
     width:100rem;
     display:-webkit-box;
     display:-webkit-flex;
@@ -52,29 +52,39 @@
 }
 
 .tradition{
-    top:109rem;
+    top:0;
 }
 
 
 
-
-
-
-
-
 .revolution{
-    top:160rem;
+    top:51rem;
 }
 
 .nation{
-    top:201rem;
+    top:102rem;
     height:60rem;
 }
 
-.bottom{
-    /* bottom:0; */
-    top:242rem;
-    height:17rem;
+
+
+.entitle{
+    position:absolute;
+    top:11rem;
+    left:50%;
+    transform:translate(-50%);
+    height: 3.5rem;
+    font-size: 2.8rem;
+    font-family: STFangsong;
+    font-weight: 400;
+    line-height: 4.1rem;
+    color: #D06814;
+    /* opacity: 0.25; */
+}
+
+.wall{
+    top:7.9rem;
+    color: #ffffff;
 }
 
 .cards{
@@ -99,10 +109,19 @@
     top:0;
     width:18.3rem;
     height:25.9rem;
-    margin: 0 0.41rem 0;
+    margin:0 0.42rem 0;
     /* background-color: lightblue; */
 }
 
+.card:hover{
+    overflow: visible;
+    box-shadow: 5px 1rem 5px;
+    transform: translate(-0.4rem,-0.4rem);
+}
+.card:hover .img7{
+    width: 19rem;
+}
+
 .img5{
     width: 9rem;
 }
@@ -114,6 +133,8 @@
 
 .img7{
     width:100%;
+    border-radius: 5px;
+
 }
 
 .control{
@@ -146,7 +167,7 @@ img.control{
     margin:0 2px 0;
 }
 
-.index_on{
+div.index_on{
     width:9px;
     background-color: orange;
 }
@@ -155,29 +176,20 @@ img.control{
     display: none;
 }
 
-.guide{
-    position: absolute;
-    top:4rem;
-    left:0;
-    width: 100%;
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-justify-content: space-around;
-        -ms-flex-pack: distribute;
-            justify-content: space-around;
-}
 
 
-.poster{
+
+#poster{
     position:relative;
     width: 100rem;
-    height:166.1rem;
+    height:166rem;
+    margin:0;
+    border-width: 0;
 }
 
 .posterbackground{
     position:absolute;
     border-width: 0;
     width:100%;
-}
+}
+

index.html

@@ -73,15 +73,17 @@
         <div id="iframe-container">
             <img src="./images/pic15-1.png" class='iframepng'/>
             <div class="img-title">
-                <img alt="万物墙" class="img5" src="./images/pic16-1.png"/>
+                <img alt="万物墙" class="img5" src="./images/poster-title1.png"/>
             </div>
+            <img class="entitle wall" src="./images/4DWall.png"/>
         </div>
         <div id="poster">
             <img src="./images/pic14-1.png" class="posterbackground"/>
             <div class="exhibition tradition">
                 <div class="img-title ex">
-                    <img alt="传统文化" class="img6" src="./images/pic17-1.png"/>
+                    <img alt="传统文化" class="img6" src="./images/poster-title2.png"/>
                 </div>
+                <img class="entitle" src="./images/Traditional Culture.png"/>
                 <div class="cards">
                     <div class="card"><img class="img7"src="./images/pic18-1.png"/></div>
                     <div class="card"><img class="img7"src="./images/pic18-1.png"/></div>
@@ -115,37 +117,115 @@
             </div>
             <div class="exhibition revolution">
                 <div class="img-title ex">
-                    <img alt="传统文化" class="img6" src="./images/pic17-1.png"/>
+                    <img alt="红色文化" class="img6" src="./images/poster-title3.png"/>
                 </div>
+                <img class="entitle" src="./images/On The History of Revolution.png"/>
                 <div class="cards">
-                    <div class="card"></div>
-                    <div class="card"></div>
-                    <div class="card"></div>
-                    <div class="card"></div>
+                    <div class="card"><img class="img7"src="./images/revolution1.png"/></div>
+                    <div class="card"><img class="img7"src="./images/revolution1.png"/></div>
+                    <div class="card"><img class="img7"src="./images/revolution1.png"/></div>
+                    <div class="card"><img class="img7"src="./images/revolution1.png"/></div>
                 </div>
+                <div class="cards disappear">
+                    <div class="card"><img class="img7"src="./images/revolution2.png"/></div>
+                    <div class="card"><img class="img7"src="./images/revolution2.png"/></div>
+                    <div class="card"><img class="img7"src="./images/revolution2.png"/></div>
+                    <div class="card"><img class="img7"src="./images/revolution2.png"/></div>
+                </div>
+                <div class="cards disappear">
+                    <div class="card"><img class="img7"src="./images/revolution1.png"/></div>
+                    <div class="card"><img class="img7"src="./images/revolution1.png"/></div>
+                    <div class="card"><img class="img7"src="./images/revolution1.png"/></div>
+                    <div class="card"><img class="img7"src="./images/revolution1.png"/></div>
+                </div>
+                <div class="cards disappear">
+                    <div class="card"><img class="img7"src="./images/revolution2.png"/></div>
+                    <div class="card"><img class="img7"src="./images/revolution2.png"/></div>
+                    <div class="card"><img class="img7"src="./images/revolution2.png"/></div>
+                    <div class="card"><img class="img7"src="./images/revolution2.png"/></div>
+                </div>
+                <img class="control next" src="./images/pic20-1.png"></img>
+                <div class="index">
+                    <div class="index_on"></div>
+                    <div></div>
+                    <div></div>
+                    <div></div></div>   
             </div>
             <div class="exhibition nation">
                 <div class="img-title ex">
-                    <img alt="传统文化" class="img6" src="./images/pic17-1.png"/>
+                    <img alt="国际之窗" class="img6" src="./images/poster-title4.png"/>
                 </div>
+                <img class="entitle" src="./images/The Eyes of The World.png"/>
                 <div class="cards">
-                    <div class="card"></div>
-                    <div class="card"></div>
-                    <div class="card"></div>
-                    <div class="card"></div>
+                    <div class="card"><img class="img7"src="./images/nation1.png"/></div>
+                    <div class="card"><img class="img7"src="./images/nation1.png"/></div>
+                    <div class="card"><img class="img7"src="./images/nation1.png"/></div>
+                    <div class="card"><img class="img7"src="./images/nation1.png"/></div>
+                </div>
+                <div class="cards disappear">
+                    <div class="card"><img class="img7"src="./images/nation2.png"/></div>
+                    <div class="card"><img class="img7"src="./images/nation2.png"/></div>
+                    <div class="card"><img class="img7"src="./images/nation2.png"/></div>
+                    <div class="card"><img class="img7"src="./images/nation2.png"/></div>
+                </div>
+                <div class="cards disappear">
+                    <div class="card"><img class="img7"src="./images/nation1.png"/></div>
+                    <div class="card"><img class="img7"src="./images/nation1.png"/></div>
+                    <div class="card"><img class="img7"src="./images/nation1.png"/></div>
+                    <div class="card"><img class="img7"src="./images/nation1.png"/></div>
                 </div>
+                <div class="cards disappear">
+                    <div class="card"><img class="img7"src="./images/nation2.png"/></div>
+                    <div class="card"><img class="img7"src="./images/nation2.png"/></div>
+                    <div class="card"><img class="img7"src="./images/nation2.png"/></div>
+                    <div class="card"><img class="img7"src="./images/nation2.png"/></div>
+                </div>
+                <img class="control next" src="./images/pic20-1.png"></img>
+                <div class="index">
+                    <div class="index_on"></div>
+                    <div></div>
+                    <div></div>
+                    <div></div></div>   
             </div>
         </div>
-        <div class="exhibition bottom">
-            <img src="bottom.svg" class='backsvg'/>
-            <div class="guide">
-                <div class="info"></div>
-                <div class="info"></div>
-                <div class="info"></div>
-                <div class="info"></div>
-                <div class="info"></div>
-                <div class="info"></div>
+
+        <div id="bottom">
+            <div class="decoration">
+                <img src="./images/decoration.png"/>
+            </div>
+            <div class="info">
+                <img id="fdage" src="./images/fdage.png"/>
+                <div class="support">“永不落幕的博博会”独家技术提供商</div>
+            </div>
+            <div class="info bottom-qrcode">
+                <img alt="wx" src="./images/wxcode.png"/>
+                <img alt="dy" src="./images/dycode.png"/>
+            </div>
+            <div class="info aboutus">
+                <div><span>联系我们</span></div>
+                <div class="box">
+                    <p>商务合作：sales@4dage.com</p>
+                    <p>媒体合作：pr@4dage.com</p>
+                    <p>联系电话：400-699-8025</p>
+                    <p>联系电话：广东省珠海市高新区港湾大道港湾1号港11栋</p>
+                </div>
+            </div>
+            <div class="info operation">
+                <div><span>合作单位</span></div>
+                <div class="box box-extra1">
+                    <p>中国国家文物局​</p>
+                    <p>中国博物馆协会</p>
+                    <p>中国博物馆及相关产品与技术博览会</p>
+                </div>
+            </div>
+            <div class="info explore">
+                <div><span>探索四维</span></div>
+                <div class="box box-extra2">
+                    <p>四维看看</p>
+                    <p>中国国家文物局​</p>
+                </div>
             </div>
+            <div class="line"></div>
         </div>
     </body>
 </html>

script/image_switch.js

@@ -8,14 +8,12 @@ for(let control of controls){
     let partArray = [].slice.call(part);
     let indexicon = control.querySelectorAll('.index div');
     let currentIndex = 0;
-    let nextbutton = control.querySelector(".next");
 
     control.addEventListener("click",function(e){
         let target = e.target;
         
         if(target.classList.contains("next")){
-            let next = e.target,
-                currentPart = partArray[currentIndex],
+            let currentPart = partArray[currentIndex],
                 nextPart = partArray[(currentIndex+1)%partLength],
                 currentIndexIcon = indexicon[currentIndex],
                 nextIndexIcon = indexicon[(currentIndex+1)%partLength];