首页

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

src/components/Header.vue

 <template>
   <div class="header">
-    <img src="@/assets/images/logo.png" alt="" class="logo" />
+    <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>
@@ -30,12 +36,15 @@ export default {
   right: 0;
   z-index: 999;
   .logo{
-     width: 200px; 
+    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);