update landing page for 2.0

examples/components/header.vue

@@ -1,16 +1,11 @@
 <style scoped>
   .headerWrapper {
     height: 80px;
-    transition: transform .3s;
-    
-    &.is-hidden {
-      transform: translateY(-80px);
-    }
   }
 
   .header {
     height: 80px;
-    background-color: rgba(32, 160, 255, 1);
+    background-color: #fff;
     color: #fff;
     top: 0;
     left: 0;
@@ -24,6 +19,10 @@
       box-sizing: border-box;
     }
 
+    .nav-lang-spe {
+      color: #888;
+    }
+
     h1 {
       margin: 0;
       float: left;
@@ -109,89 +108,43 @@
           cursor: pointer;
           display: inline-block;
           height: 100%;
+          color: #888;
 
           &:hover {
-            opacity: 1;
-          }
-
-          &.active {
-            font-weight: 700;
-            opacity: 1;
             color: #409EFF;
           }
+          &.active {
+             font-weight: bold;
+             color: #409EFF;
+           }
         }
       }
 
       a {
         text-decoration: none;
-        color: #fff;
+        color: #888;
         display: block;
         padding: 0 22px;
-        opacity: .8;
 
         &.active,
         &:hover {
-          opacity: 1;
+          color: #333;
         }
 
         &.active::after {
           content: '';
           display: inline-block;
           position: absolute;
-          bottom: 0;
-          left: 0;
-          width: 100%;
+          bottom: 15px;
+          left: calc(50% - 7px);
+          width: 14px;
           height: 4px;
-          background:#99d2fc;
+          background: #409EFF;
         }
       }
     }
   }
 
-  .header-home {
-    position: fixed;
-    top: 0;
-    background-color: rgba(32, 160, 255, 0);
-  }
-
-  .header-light {
-    background-color: #fff;
-
-    .nav-lang {
-      color: #888;
-
-      &:hover,
-      &.acive {
-        font-weight: normal;
-        opacity: 1;
-        color: #409EFF;
-      }
-    }
-
-    .nav-lang-spe {
-      color: #888;
-    }
-
-    .nav-item {
-      a {
-        color: #888;
-        opacity: 1;
-      }
-
-      a:hover,
-      a.active {
-        color: #333;
-      }
-
-      a.active::after {
-        width: 14px;
-        left: calc(50% - 7px);
-        bottom: 15px;
-        background: #409EFF;
-      }
-    }
-  }
-
   .nav-dropdown {
     margin-bottom: 6px;
     padding-left: 18px;
@@ -214,9 +167,9 @@
 
     i {
       transition: .2s;
-      transform: scale(.6);
       font-size: 12px;
       color: #979797;
+      transform: translateY(-2px);
     }
 
     @when active {
@@ -224,7 +177,7 @@
         color: #409EFF;
       }
       i {
-        transform: rotateZ(180deg) translateY(2px) scale(.6);
+        transform: rotateZ(180deg) translateY(3px);
       }
     }
 
@@ -286,17 +239,11 @@
 </style>
 <template>
   <div class="headerWrapper">
-    <header class="header"
-      ref="header"
-      :style="headerStyle"
-      :class="{
-        'header-home': isHome,
-        'header-light': !isHome
-      }">
+    <header class="header" ref="header">
       <div class="container">
         <h1><router-link :to="`/${ lang }`">
           <!-- logo -->
-          <slot v-if="!isHome">
+          <slot>
             <img
               src="../assets/images/element-logo.svg"
               alt="element-logo"
@@ -306,16 +253,6 @@
               alt="element-logo"
               class="nav-logo-small">
           </slot>
-          <slot v-if="isHome">
-            <img
-              src="../assets/images/element-logo-white.svg"
-              alt="element-logo"
-              class="nav-logo">
-            <img
-              src="../assets/images/element-logo-small-white.svg"
-              alt="element-logo"
-              class="nav-logo-small">
-          </slot>
 
         </router-link></h1>
 
@@ -409,8 +346,6 @@
     data() {
       return {
         active: '',
-        isHome: true,
-        headerStyle: {},
         versions: [],
         version,
         dropdownVisible: true
@@ -422,15 +357,6 @@
       AlgoliaSearch
     },
 
-    watch: {
-      '$route.path': {
-        immediate: true,
-        handler() {
-          this.handlePathChange();
-        }
-      }
-    },
-
     computed: {
       lang() {
         return this.$route.path.split('/')[1] || 'zh-CN';
@@ -457,22 +383,10 @@
 
       handleDropdownToggle(visible) {
         this.dropdownVisible = visible;
-      },
-
-      handlePathChange() {
-        const routerName = this.$route.name;
-        this.isHome = /^home/.test(routerName);
-        if (!this.isHome) {
-          this.headerStyle.backgroundColor = '#fff';
-          return;
-        }
-        this.headerStyle.backgroundColor = 'rgba(32, 160, 255, 0)';
       }
     },
 
     created() {
-      this.handlePathChange();
-
       const xhr = new XMLHttpRequest();
       xhr.onreadystatechange = _ => {
         if (xhr.readyState === 4 && xhr.status === 200) {
@@ -481,19 +395,6 @@
       };
       xhr.open('GET', '/versions.json');
       xhr.send();
-    },
-
-    mounted() {
-      function scroll(fn) {
-        window.addEventListener('scroll', fn, false);
-      }
-      scroll(() => {
-        if (this.isHome) {
-          const threshold = 200;
-          let alpha = Math.min((document.documentElement.scrollTop || document.body.scrollTop), threshold) / threshold;
-          this.$refs.header.style.backgroundColor = `rgba(32, 160, 255, ${ alpha })`;
-        }
-      });
     }
   };
 </script>