首页

src/assets/styles/index.scss

@@ -8,7 +8,170 @@
   background-color: #010326;
   overflow: hidden;
 }
+.index-box{
+  background: url('~@/assets/images/index/bg.png') no-repeat 0 0;
+  background-size: cover;
+  header{
+    height: 200px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    padding: 0 60px;
+    .logo{
+      width: 675px;
+      height: 90px;
+      background: url('~@/assets/images/index/logo.png') no-repeat 0 0;
+      margin-right: 70px;
+    }
+    .header-title{
+      width: 800px;
+      height: 100px;
+      background: url('~@/assets/images/index/title.png') no-repeat 0 0;
+    }
+  }
+  main{
+    width: 1200px;
+    margin: 0 auto;
+    color: #333;
+    font-size: 40px;
+    .up-box{
+      height: calc(100vh - 241px);
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+      position: relative;
+      .bg-middle{
+        width: 760px;
+        height: 180px;        
+        .span-middle{
+          padding-left: 127px;
+          position: relative;
+          line-height: 180px;
+          &::before{
+            display: block;
+            width: 87px;
+            height: 80px;
+            content: "";
+            position: absolute;
+            left: 0;
+            top: -20px;
+          }
+        }
+      }
+      .bg-big{
+        width: 400px;
+        height: 620px;
+        .span-big{
+          padding-top: 350px;
+          display: inline-block;
+          position: relative;
+          &::before{
+            display: block;
+            content: "";
+            position: absolute;
+            left: 0;
+            bottom: 80px;
+          }
+        }
+      }
+      .bg-small{
+        .span-small{
+          line-height: 180px;
+          position: relative;
+          margin-left: 90px;
+          &::before{
+            display: block;
+            width: 73px;
+            height: 59px;
+            content: "";
+            position: absolute;
+            left: -83px;
+            top: 50%;
+            transform: translateY(-50%);
+          }
+        }
+      }
+      .up-left{
+        height: calc(100vh - 255px);
+        .brief{              
+          margin-bottom: 40px;
+          background: url('~@/assets/images/index/760 180 up.png') no-repeat 0 0;
+          background-size: contain;
+          span::before{
+          background: url('~@/assets/images/index/brief.png') no-repeat 0 0;
+          background-size: contain;
+          }
+        }
+        .up-left-down{
+          width: 760px;
+          height: 620px;
+          // height: 100%;
+          display: flex;
+          justify-content: space-between;
+          .guide{
+            background: url('~@/assets/images/index/400 620 left.png') no-repeat 0 0; 
+            background-size: contain;
+            span::before{
+              width: 153px;
+              height: 200px;
+              background: url('~@/assets/images/index/guide.png') no-repeat 0 0; 
+              background-size: contain;
+            }
+          }
+          .right-of-guide{
+            div{
+              width: 320px;
+              height: 180px;
+              &.new-book{
+                background: url('~@/assets/images/index/320 180 up.png') no-repeat 0 0; 
+                background-size: contain;
+                margin-bottom: 40px;
+                span::before{
+                  background: url('~@/assets/images/index/newbook.png') no-repeat 0 0; 
+                  background-size: contain;
+                }
+              }
+              &.digital{
+                background: url('~@/assets/images/index/320 180 down.png') no-repeat 0 0; 
+                background-size: contain;
+                span::before{
+                  background: url('~@/assets/images/index/digital.png') no-repeat 0 0; 
+                  background-size: contain;
+                }
+              }
+            }
+          }
 
+        }
+      }
+      .up-right{
+        background: url('~@/assets/images/index/400 620 right.png') no-repeat 0 0; 
+        background-size: contain;
+        span::before{
+          width: 240px;
+          height: 200px;
+          left: -40px !important;
+          background: url('~@/assets/images/index/search.png') no-repeat 0 0; 
+          background-size: contain;
+        }
+      }
+      .activities{
+        background: url('~@/assets/images/index/760 180 down.png') no-repeat 0 0; 
+        background-size: contain;
+        position: absolute;
+        right: 0;
+        top: 660px;
+        span::before{
+          background: url('~@/assets/images/index/activities.png') no-repeat 0 0; 
+          background-size: contain;
+        }
+      }
+    }
+  }
+}
+.tac{
+  text-align: center;
+}
 // 头部主题标题
 .header-container{
   position: relative;

src/views/index.vue

@@ -1,46 +1,32 @@
 <template>
-  <div id="screen-container">
-    <Header />
-    <div class="screen-main">
-      <div class="screen-left">
-        <TotalLending />
-        <LengingRanking />
+  <div id="screen-container" class="index-box">
+    <header>
+      <div class="logo" />
+      <div class="header-title" />
+    </header>
+    <main>
+      <div class="up-box">
+        <div class="up-left">
+          <div class="brief tac bg-middle"><span class="span-middle">图书馆简介</span></div>
+          <div class="up-left-down">
+            <div class="guide tac bg-big"><span class="span-big">场馆导航</span></div>
+            <div class="right-of-guide">
+              <div class="new-book tac bg-small"><span class="span-small">新书推荐</span></div>
+              <div class="digital tac bg-small"><span class="span-small">数字资源</span></div>
             </div>
-      <div class="screen-middle">
-        <AccessToLibrary />
-        <div class="video-box">
-          <video width="100%" height="100%" controls loop autoplay muted>
-            <source src="https://qiniu.aiyxlib.com/1658104739000.mp4" type="video/mp4">
-          </video>
           </div>
-        <ReadStar />
-      </div>
-      <div class="screen-right">
-        <Notice />
-        <NewBookRecommend />
         </div>
+        <div class="up-right tac bg-big"><span class="span-big">图书检索</span></div>
+        <div class="activities tac bg-middle"><span class="span-middle">活动咨询</span></div>
       </div>
+    </main>
   </div>
 </template>
 
 <script>
-import Header from '@/views/header/index.vue'
-import TotalLending from '@/views/totalLending.vue'
-import LengingRanking from '@/views/lengingRanking.vue'
-import AccessToLibrary from '@/views/accessToLibrary.vue'
-import Notice from '@/views/notice.vue'
-import NewBookRecommend from '@/views/newBookRecommend.vue'
-import ReadStar from '@/views/readStar.vue'
 export default {
   name: 'Home',
   components: {
-    Header,
-    TotalLending,
-    LengingRanking,
-    AccessToLibrary,
-    ReadStar,
-    Notice,
-    NewBookRecommend
   },
   data() {
     return {