首页

package-lock.json

@@ -3595,6 +3595,11 @@
         }
       }
     },
+    "comutils": {
+      "version": "1.1.19",
+      "resolved": "https://registry.npm.taobao.org/comutils/download/comutils-1.1.19.tgz",
+      "integrity": "sha1-PgfzBqv0joNyZRFxOnKyBWUDREM="
+    },
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npm.taobao.org/concat-map/download/concat-map-0.0.1.tgz",
@@ -12201,6 +12206,14 @@
       "resolved": "https://registry.npm.taobao.org/vue-router/download/vue-router-3.5.1.tgz?cache=0&sync_timestamp=1617697788171&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-3.5.1.tgz",
       "integrity": "sha1-7fPPSQeVLR4Fg+B5I3Igxf9utsk="
     },
+    "vue-seamless-scroll": {
+      "version": "1.1.23",
+      "resolved": "https://registry.npm.taobao.org/vue-seamless-scroll/download/vue-seamless-scroll-1.1.23.tgz",
+      "integrity": "sha1-3egbPHmqSZeRs8O//Q/bIv8+Wac=",
+      "requires": {
+        "comutils": "^1.1.9"
+      }
+    },
     "vue-style-loader": {
       "version": "4.1.3",
       "resolved": "https://registry.nlark.com/vue-style-loader/download/vue-style-loader-4.1.3.tgz",

package.json

@@ -13,6 +13,7 @@
     "element-ui": "^2.15.1",
     "vue": "^2.6.11",
     "vue-router": "^3.5.1",
+    "vue-seamless-scroll": "^1.1.23",
     "vue-video-player": "^5.0.2"
   },
   "devDependencies": {

src/assets/styles/element-variables.scss

 /* 改变主题色变量 */
-$--color-primary: #CAA774;
+$--color-primary: #caa774;
 
 /* 改变 icon 字体路径变量，必需 */
-$--font-path: '~element-ui/lib/theme-chalk/fonts';
-
-* {
+$--font-path: "~element-ui/lib/theme-chalk/fonts";
+
+html,
+body,
+p,
+div,
+ul,
+li {
   margin: 0;
   padding: 0;
-  }
+}
 
-  html, body {
+html,
+body {
   font-size: 12px;
   min-height: 100%;
-  }
+}
 
-  .font12 {
+.font12 {
   font-size: 12px;
-  }
+}
 
-  .font14 {
+.font14 {
   font-size: 14px;
-  }
+}
 
-  .font18 {
+.font18 {
   font-size: 18px;
-  }
+}
 
-  .font24 {
+.font24 {
   font-size: 24px;
-  }
+}
 
-  .font30 {
+.font30 {
   font-size: 30px;
-  }
+}
 
-  .bold {
+.bold {
   font-weight: bold;
-  }
+}
 
-  a {
+a {
   color: #020202;
-  }
+}
 
-  a:hover {
+a:hover {
   color: $--color-primary;
-  }
+}
 
-  img {
+img {
   width: 100%;
   object-fit: cover;
-  }
+}
 
-  .my_icon {
+.my_icon {
   width: 15px;
   margin-right: 5px;
   vertical-align: middle;
-  }
+}
 
-  .banner {
+.banner {
   img {
     max-height: 300px;
   }
-  }
+}
 
-  ul,
-  ol,
-  dl {
+ul,
+ol,
+dl {
   list-style: none;
-  }
+}
 
-  .align_left {
+.align_left {
   text-align: left;
-  }
+}
 
-  .align_center {
+.align_center {
   text-align: center;
-  }
+}
 
-  .clearFix {
+.clearFix {
   zoom: 1;
-  }
+}
 
-  .clearFix:after {
-    content: '';
+.clearFix:after {
+  content: "";
   display: block;
   height: 0;
   clear: both;
-  }
-  
+}
 
-  .flex,
-  .flexRow {
+.flex,
+.flexRow {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  }
+}
 
-  .flexCol {
+.flexCol {
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: center;
-  }
+}
 
-  .flex_start {
+.flex_start {
   display: flex;
   align-items: baseline;
-  }
+}
 
-  .pointer {
+.pointer {
   cursor: pointer;
-  }
+}
 
-  .right {
+.right {
   list-style: none;
-  }
+}
 
-  .mr_10 {
+.mr_10 {
   margin-right: 10px;
-  }
+}
 
-  .mt_10 {
+.mt_10 {
   margin-top: 10px;
-  }
+}
 
-  .mt_20 {
+.mt_20 {
   margin-top: 20px;
-  }
+}
 
-  .ml_10 {
+.ml_10 {
   margin-left: 10px;
-  }
+}
 
-  .mb_10 {
+.mb_10 {
   margin-bottom: 10px;
-  }
+}
 
-  .mr_15 {
+.mr_15 {
   margin-right: 15px;
-  }
+}
 
-  .mr_20 {
+.mr_20 {
   margin-right: 20px;
-  }
+}
 
-  .position_relative {
+.position_relative {
   position: relative;
-  }
+}
 
-  .primary {
+.primary {
   color: $--color-primary !important;
-  }
+}
 
-  .back_primary {
+.back_primary {
   background: $--color-primary !important;
   color: #fff !important;
-  }
+}
 
-  .border_primary {
+.border_primary {
   border: 1px solid $--color-primary;
-  }
+}
 
-  .back_two {
+.back_two {
   background: #f17123 !important;
   color: #fff !important;
-  }
+}
 
-  .back_three {
+.back_three {
   background: #ffb400 !important;
   color: #fff !important;
-  }
+}
 
-  //图片放大功能
-  .zoom {
+//图片放大功能
+.zoom {
   width: 220px;
   height: 220px;
   overflow: hidden;
-  }
+}
 
-  .zoom_img {
+.zoom_img {
   transition: all 1s;
-  }
+}
 
-  .zoom_img:hover {
+.zoom_img:hover {
   transform: scale(1.2);
-  }
+}
 
 @import "~element-ui/packages/theme-chalk/src/index";

src/components/Header.vue

 <template>
   <div class="header">
+    <div style="display: flex;flex: 1;">
       <img src="@/assets/images/logo.png" alt="" class="logo" />
       <ul class="right-ul">
+      <li>纪念馆列表</li>
+      <li>APP下载</li>
+    </ul>
+    </div>
+    <ul class="right-ul">
       <li><img src="@/assets/images/Signin.png" alt="" class="avatar" />登录</li>
       <li>用户协议</li>
       <li>隐私协议</li>
@@ -31,11 +37,14 @@ export default {
   z-index: 999;
   .logo{
     width: 200px;
+    margin-right: 30px;
+    object-fit: contain;
   }
  
 }
 .header .right-ul {
   display: flex;
+  flex-shrink: 0;
   align-items: center;
   > li {
     margin-right: 25px;

src/main.js

@@ -4,7 +4,6 @@ import router from './router'
 import ElementUI from 'element-ui';
 import '@/assets/styles/element-variables.scss'
 import animated from 'animate.css' // npm install animate.css --save安装，在引入
- 
 Vue.use(animated)
 Vue.config.productionTip = false
 Vue.use(ElementUI);