fix: menu bar display

f49072a7 · chenqikuai · e4a9ab0f · f49072a7 · f49072a7 · f49072a7
Commit f49072a7 authored Feb 21, 2022 by chenqikuai
8 changed files
--- a/src/layout/MainPage/Header.vue
+++ b/src/layout/MainPage/Header.vue
 <template>
-  <div class="fixed top-0 w-full flex justify-center ease-in duration-200" style="z-index: 3000" :class="{'bg-white': $route.path !== '/home' || !isTop, 'min-w-1200': !isMobile}">
-    <div v-if="!isMobile" class="min-w-1200 h-16 text-footer-color md:w-bodySet flex justify-between items-center ease-in duration-500">
+  <div
+    class="fixed top-0 w-full flex justify-center ease-in duration-200"
+    style="z-index: 3000;"
+    :class="{
+      'bg-white': $route.path === '/newsList' || !isTop,
+      'min-w-1200': !isMobile,
+    }"
+  >
+    <div
+      v-if="!isMobile"
+      class="min-w-1200 h-16 text-footer-color md:w-bodySet flex justify-between items-center ease-in duration-500"
+    >
      <div class="flex items-center">
-        <img src="@/assets/images/header/logo.png" alt="logo" width="164">
+        <img src="@/assets/images/header/logo.png" alt="logo" width="164" />
        <ul class="header_menu flex leading-normal text-sm ml-16">
-          <router-link :to="{path: '/home', query: {lang: $route.query.lang}}" tag="li" class="pl-5 pr-5 cursor-pointer relative">
+          <router-link
+            :to="{ path: '/home', query: { lang: $route.query.lang } }"
+            tag="li"
+            class="pl-5 pr-5 cursor-pointer relative"
+          >
            {{ $t('lang.home') }}
-            <span v-show="$route.path === '/home'" class="absolute block w-7 h-1 bg-active rounded-2xl left-1/2 -bottom-2 transform -translate-x-1/2"></span>
+            <span
+              v-show="$route.path === '/home'"
+              class="absolute block w-7 h-1 bg-active rounded-2xl left-1/2 -bottom-2 transform -translate-x-1/2"
+            ></span>
          </router-link>
          <li class="pl-5 pr-5 cursor-pointer">
            <a
-              :href="iconType === 'zh-CN' ?
-                'https://yuanorg.oss-ap-southeast-1.aliyuncs.com/ycc/white-paper/zh.pdf' :
-                'https://yuanorg.oss-ap-southeast-1.aliyuncs.com/ycc/white-paper/en.pdf'"
-              target="_blank">{{ $t('lang.book') }}</a>
+              :href="
+                iconType === 'zh-CN'
+                  ? 'https://yuanorg.oss-ap-southeast-1.aliyuncs.com/ycc/white-paper/zh.pdf'
+                  : 'https://yuanorg.oss-ap-southeast-1.aliyuncs.com/ycc/white-paper/en.pdf'
+              "
+              target="_blank"
+            >
+              {{ $t('lang.book') }}
+            </a>
          </li>
-          <router-link :to="{path: '/newsList', query: {lang: $route.query.lang}}" tag="li" class="pl-5 pr-5 cursor-pointer relative">
+          <router-link
+            :to="{ path: '/newsList', query: { lang: $route.query.lang } }"
+            tag="li"
+            class="pl-5 pr-5 cursor-pointer relative"
+          >
            {{ $t('lang.news') }}
-            <span v-show="$route.path === '/newsList' || $route.path === '/newsDetails'" class="absolute block w-7 h-1 bg-active rounded-2xl left-1/2 -bottom-2 transform -translate-x-1/2"></span>
+            <span
+              v-show="
+                $route.path === '/newsList' || $route.path === '/newsDetails'
+              "
+              class="absolute block w-7 h-1 bg-active rounded-2xl left-1/2 -bottom-2 transform -translate-x-1/2"
+            ></span>
          </router-link>
-          <router-link :to="{path: '/blockChainBrowser', query: {lang: $route.query.lang}}" tag="li" class="pl-5 pr-5 cursor-pointer relative">
+          <router-link
+            :to="{
+              path: '/blockChainBrowser',
+              query: { lang: $route.query.lang },
+            }"
+            tag="li"
+            class="pl-5 pr-5 cursor-pointer relative"
+          >
            {{ $t('lang.blockChainBrowser') }}
-            <span v-show="$route.path === '/blockChainBrowser' || $route.path === '/block' || $route.path === '/blockDetail' || $route.path=== '/tradeHash'" class="absolute block w-7 h-1 bg-active rounded-2xl left-1/2 -bottom-2 transform -translate-x-1/2"></span>
+            <span
+              v-show="
+                $route.path === '/blockChainBrowser' ||
+                $route.path === '/block' ||
+                $route.path === '/blockDetail' ||
+                $route.path === '/tradeHash'
+              "
+              class="absolute block w-7 h-1 bg-active rounded-2xl left-1/2 -bottom-2 transform -translate-x-1/2"
+            ></span>
          </router-link>
        </ul>
      </div>
      <div class="flex text-sm mr-1 items-center">
-        <p class="mr-20" :class="{'text-white': isTop}" :style="{'color': $route.path === '/home' ? '' : '#2545CB'}">{{ $t('lang.email') }}： business@yuan.org</p>
+        <p
+          class="mr-20"
+          :class="{ 'text-white': isTop }"
+          :style="{ color: $route.path === '/home' ? '' : '#2545CB' }"
+        >
+          {{ $t('lang.email') }}： business@yuan.org
+        </p>
        <div class="relative">
-          <div v-show="iconType === 'zh-CN'" class="flex items-center justify-center cursor-pointer" @click="showIcon = !showIcon">
-            <img class="mr-2" src="@/assets/images/header/ZH.png" alt="中文">
+          <div
+            v-show="iconType === 'zh-CN'"
+            class="flex items-center justify-center cursor-pointer"
+            @click="showIcon = !showIcon"
+          >
+            <img class="mr-2" src="@/assets/images/header/ZH.png" alt="中文" />
            <p class="text-sm">{{ $t('lang.zh') }}</p>
-            <img class="ml-1" width="10" src="@/assets/images/header/arrow_r.png" alt="">
+            <img
+              class="ml-1"
+              width="10"
+              src="@/assets/images/header/arrow_r.png"
+              alt=""
+            />
          </div>
-          <div v-show="iconType === 'en'" class="flex items-center justify-center cursor-pointer" @click="showIcon = !showIcon">
-            <img class="mr-2" src="@/assets/images/header/EN.png" alt="英文">
+          <div
+            v-show="iconType === 'en'"
+            class="flex items-center justify-center cursor-pointer"
+            @click="showIcon = !showIcon"
+          >
+            <img class="mr-2" src="@/assets/images/header/EN.png" alt="英文" />
            <p class="text-sm">{{ $t('lang.en') }}</p>
-            <img class="ml-1" width="10" src="@/assets/images/header/arrow_r.png" alt="">
+            <img
+              class="ml-1"
+              width="10"
+              src="@/assets/images/header/arrow_r.png"
+              alt=""
+            />
          </div>
-          <icon-select :show="showIcon" @hidden="showIcon = false" @selectIcon="(v) => {iconType = v}"></icon-select>
+          <icon-select
+            :show="showIcon"
+            @hidden="showIcon = false"
+            @selectIcon="
+              (v) => {
+                iconType = v
+              }
+            "
+          ></icon-select>
        </div>
      </div>
    </div>
-    <div v-else class="w-full flex justify-between items-center bg-white" style="height: 44px" :style="{'border-bottom': $route.path !== '/home' ? '1px solid #F2F2F2' : 'none' }">
+    <div
+      v-else
+      class="w-full flex justify-between items-center bg-white"
+      style="height: 44px;"
+      :style="{
+        'border-bottom': $route.path !== '/home' ? '1px solid #F2F2F2' : 'none',
+      }"
+    >
      <div class="logo mx-3.5">
-        <img src="@/assets/images/header/logo-m.png" alt="logo" width="164">
+        <img src="@/assets/images/header/logo-m.png" alt="logo" width="164" />
      </div>
      <div class="flex justify-between items-center">
        <div class="relative">
-          <div v-show="iconType === 'zh-CN'" class="flex items-center justify-center cursor-pointer" @click="showIcon = !showIcon">
-            <img class="mr-1" src="@/assets/images/header/ZH.png" alt="中文">
+          <div
+            v-show="iconType === 'zh-CN'"
+            class="flex items-center justify-center cursor-pointer"
+            @click="showIcon = !showIcon"
+          >
+            <img class="mr-1" src="@/assets/images/header/ZH.png" alt="中文" />
            <p class="text-xs text-footer-color">{{ $t('lang.zh') }}</p>
-            <img class="mr-1" width="10" src="@/assets/images/header/arrow_r.png" alt="">
+            <img
+              class="mr-1"
+              width="10"
+              src="@/assets/images/header/arrow_r.png"
+              alt=""
+            />
          </div>
-          <div v-show="iconType === 'en'" class="flex items-center justify-center cursor-pointer" @click="showIcon = !showIcon">
-            <img class="mr-1" src="@/assets/images/header/EN.png" alt="英文">
+          <div
+            v-show="iconType === 'en'"
+            class="flex items-center justify-center cursor-pointer"
+            @click="showIcon = !showIcon"
+          >
+            <img class="mr-1" src="@/assets/images/header/EN.png" alt="英文" />
            <p class="text-xs text-footer-color">{{ $t('lang.en') }}</p>
-            <img class="mr-1" width="10" src="@/assets/images/header/arrow_r.png" alt="">
+            <img
+              class="mr-1"
+              width="10"
+              src="@/assets/images/header/arrow_r.png"
+              alt=""
+            />
          </div>
-          <icon-select :show="showIcon" @hidden="showIcon = false" @selectIcon="(v) => {iconType = v}"></icon-select>
+          <icon-select
+            :show="showIcon"
+            @hidden="showIcon = false"
+            @selectIcon="
+              (v) => {
+                iconType = v
+              }
+            "
+          ></icon-select>
        </div>
-        <div class="mr-5 w-6 h-6" @click="showMenu = !showMenu, showIcon = false">
-          <img class="w-full h-full" src="@/assets/images/header/menu.png" alt="">
+        <div
+          class="mr-5 w-6 h-6"
+          @click=";(showMenu = !showMenu), (showIcon = false)"
+        >
+          <img
+            class="w-full h-full"
+            src="@/assets/images/header/menu.png"
+            alt=""
+          />
        </div>
      </div>
    </div>
@@ -77,25 +195,25 @@ import { checkIsMobile } from '@/utils/utils'
 export default Vue.extend({
  components: {
    IconSelect,
-    Menu
+    Menu,
  },
  data() {
    return {
      isTop: true,
      showIcon: false,
      iconType: 'zh-CN',
-      showMenu: false
+      showMenu: false,
    }
  },
  methods: {
    closeMenu(v: boolean) {
      this.showMenu = !v
-    }
+    },
  },
  computed: {
    isMobile() {
      return checkIsMobile()
-    }
+    },
  },
  mounted() {
    const scrollY = window.scrollY
@@ -103,22 +221,22 @@ export default Vue.extend({
    this.iconType = type.lang || 'zh-CN'
    window.sessionStorage.setItem('language', this.iconType)
    this.$i18n.locale = this.iconType === 'zh-CN' ? 'zh' : 'en'
-    this.isTop  = scrollY < 70 ? true : false
+    this.isTop = scrollY < 70 ? true : false
    window.addEventListener('scroll', () => {
      const scrollY = window.scrollY
-      this.isTop  = scrollY < 70 ? true : false
+      this.isTop = scrollY < 70 ? true : false
    })
  },
  watch: {
    $route(n, o) {
      const scrollY = window.scrollY
      this.iconType = n.query.lang || 'zh-CN'
-      this.isTop  = scrollY < 70 ? true : false
+      this.isTop = scrollY < 70 ? true : false
      window.addEventListener('scroll', () => {
        const scrollY = window.scrollY
-        this.isTop  = scrollY < 70 ? true : false
+        this.isTop = scrollY < 70 ? true : false
      })
-    }
-  }
+    },
+  },
 })
 </script>
--- a/src/views/mobile/blockChainBrowser.vue
+++ b/src/views/mobile/blockChainBrowser.vue
@@ -56,7 +56,7 @@ export default VueTypedMixins(blockChainBrowserMixin).extend({
 , MLatestBlocks
 <style scoped>
 .blockChain {
-  margin-top: 70px;
+  padding-top: 64px;
 }
 .chainCard {
  position: relative;

--- a/src/views/pc/address/index.vue
+++ b/src/views/pc/address/index.vue
 <template>
  <div
-    style="margin-top: 70px; padding-bottom: 60px;"
+    style="padding-top: 64px; padding-bottom: 60px;"
    class="min-w-1200 md:w-bodySet mx-auto flow-root"
  >
    <chain-search

--- a/src/views/pc/block.vue
+++ b/src/views/pc/block.vue
@@ -157,7 +157,7 @@ export default VueTypedMixins(blockMixin).extend({
 }

 .the-block {
-  margin-top: 70px;
+  padding-top: 64px;
 }

 .light2 {

--- a/src/views/pc/blockChainBrowser.vue
+++ b/src/views/pc/blockChainBrowser.vue
@@ -42,19 +42,10 @@ export default VueTypedMixins(blockChainBrowserMixin).extend({

 <style scoped>
 .blockChain {
-  margin-top: 70px;
+  padding-top: 64px;
 }
 .chainCard {
  position: relative;
  z-index: 1;
 }
-.rect-block {
-  /* position: absolute;
-  z-index: 60;
-  top: -64px;
-  left: 197px;
-  width: 600px;
-  height: 840px;
-  background: #2545cb; */
-}
 </style>
--- a/src/views/pc/blockDetail/index.vue
+++ b/src/views/pc/blockDetail/index.vue
@@ -88,6 +88,6 @@ export default VueTypedMixins(blockDetailMixin).extend({

 <style scoped>
 .block-detail {
-  margin-top: 70px;
+  padding-top: 6px;
 }
 </style>
--- a/src/views/pc/newsList.vue
+++ b/src/views/pc/newsList.vue
@@ -142,7 +142,7 @@ export default Vue.extend({

 <style scoped>
 	.newslist {
-		padding-top: 70px;
+		padding-top: 64px;
 		min-width: 1200px;
 		min-height: calc(100vh - 315px);
 	}

--- a/src/views/pc/tradeDetail.vue
+++ b/src/views/pc/tradeDetail.vue
 <template>
  <div
-    style="margin-top: 70px; padding-bottom: 60px;"
+    style="padding-top: 64px; padding-bottom: 60px;"
    class="min-w-1200 md:w-bodySet mx-auto flow-root"
  >
    <chain-search