Skip to content

Y
ycc-website
Commit f49072a7 authored by chenqikuai's avatar chenqikuai
1 Browse files
Options

fix: menu bar display

parent e4a9ab0f
Hide whitespace changes
Inline Side-by-side
Showing with 167 additions and 58 deletions
src/layout/MainPage/Header.vue
View file @ f49072a7
<template> <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
<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"> 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"> <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"> <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') }} {{ $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> </router-link>
<li class="pl-5 pr-5 cursor-pointer"> <li class="pl-5 pr-5 cursor-pointer">
<a <a
:href="iconType === 'zh-CN' ? :href="
'https://yuanorg.oss-ap-southeast-1.aliyuncs.com/ycc/white-paper/zh.pdf' : iconType === 'zh-CN'
'https://yuanorg.oss-ap-southeast-1.aliyuncs.com/ycc/white-paper/en.pdf'" ? 'https://yuanorg.oss-ap-southeast-1.aliyuncs.com/ycc/white-paper/zh.pdf'
target="_blank">{{ $t('lang.book') }}</a> : 'https://yuanorg.oss-ap-southeast-1.aliyuncs.com/ycc/white-paper/en.pdf'
"
target="_blank"
>
{{ $t('lang.book') }}
</a>
</li> </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') }} {{ $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>
<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') }} {{ $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> </router-link>
</ul> </ul>
</div> </div>
<div class="flex text-sm mr-1 items-center"> <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 class="relative">
<div v-show="iconType === 'zh-CN'" class="flex items-center justify-center cursor-pointer" @click="showIcon = !showIcon"> <div
<img class="mr-2" src="@/assets/images/header/ZH.png" alt="中文"> 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> <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>
<div v-show="iconType === 'en'" class="flex items-center justify-center cursor-pointer" @click="showIcon = !showIcon"> <div
<img class="mr-2" src="@/assets/images/header/EN.png" alt="英文"> 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> <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> </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>
</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"> <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>
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
<div class="relative"> <div class="relative">
<div v-show="iconType === 'zh-CN'" class="flex items-center justify-center cursor-pointer" @click="showIcon = !showIcon"> <div
<img class="mr-1" src="@/assets/images/header/ZH.png" alt="中文"> 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> <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>
<div v-show="iconType === 'en'" class="flex items-center justify-center cursor-pointer" @click="showIcon = !showIcon"> <div
<img class="mr-1" src="@/assets/images/header/EN.png" alt="英文"> 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> <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> </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 class="mr-5 w-6 h-6" @click="showMenu = !showMenu, showIcon = false"> <div
<img class="w-full h-full" src="@/assets/images/header/menu.png" alt=""> 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> </div>
</div> </div>
...@@ -77,25 +195,25 @@ import { checkIsMobile } from '@/utils/utils' ...@@ -77,25 +195,25 @@ import { checkIsMobile } from '@/utils/utils'
export default Vue.extend({ export default Vue.extend({
components: { components: {
IconSelect, IconSelect,
Menu Menu,
}, },
data() { data() {
return { return {
isTop: true, isTop: true,
showIcon: false, showIcon: false,
iconType: 'zh-CN', iconType: 'zh-CN',
showMenu: false showMenu: false,
} }
}, },
methods: { methods: {
closeMenu(v: boolean) { closeMenu(v: boolean) {
this.showMenu = !v this.showMenu = !v
} },
}, },
computed: { computed: {
isMobile() { isMobile() {
return checkIsMobile() return checkIsMobile()
} },
}, },
mounted() { mounted() {
const scrollY = window.scrollY const scrollY = window.scrollY
...@@ -103,22 +221,22 @@ export default Vue.extend({ ...@@ -103,22 +221,22 @@ export default Vue.extend({
this.iconType = type.lang || 'zh-CN' this.iconType = type.lang || 'zh-CN'
window.sessionStorage.setItem('language', this.iconType) window.sessionStorage.setItem('language', this.iconType)
this.$i18n.locale = this.iconType === 'zh-CN' ? 'zh' : 'en' this.$i18n.locale = this.iconType === 'zh-CN' ? 'zh' : 'en'
this.isTop = scrollY < 70 ? true : false this.isTop = scrollY < 70 ? true : false
window.addEventListener('scroll', () => { window.addEventListener('scroll', () => {
const scrollY = window.scrollY const scrollY = window.scrollY
this.isTop = scrollY < 70 ? true : false this.isTop = scrollY < 70 ? true : false
}) })
}, },
watch: { watch: {
$route(n, o) { $route(n, o) {
const scrollY = window.scrollY const scrollY = window.scrollY
this.iconType = n.query.lang || 'zh-CN' this.iconType = n.query.lang || 'zh-CN'
this.isTop = scrollY < 70 ? true : false this.isTop = scrollY < 70 ? true : false
window.addEventListener('scroll', () => { window.addEventListener('scroll', () => {
const scrollY = window.scrollY const scrollY = window.scrollY
this.isTop = scrollY < 70 ? true : false this.isTop = scrollY < 70 ? true : false
}) })
} },
} },
}) })
</script> </script>
src/views/mobile/blockChainBrowser.vue
View file @ f49072a7
...@@ -56,7 +56,7 @@ export default VueTypedMixins(blockChainBrowserMixin).extend({ ...@@ -56,7 +56,7 @@ export default VueTypedMixins(blockChainBrowserMixin).extend({
, MLatestBlocks , MLatestBlocks
<style scoped> <style scoped>
.blockChain { .blockChain {
margin-top: 70px; padding-top: 64px;
} }
.chainCard { .chainCard {
position: relative; position: relative;
......
src/views/pc/address/index.vue
View file @ f49072a7
<template> <template>
<div <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" class="min-w-1200 md:w-bodySet mx-auto flow-root"
> >
<chain-search <chain-search
......
src/views/pc/block.vue
View file @ f49072a7
...@@ -157,7 +157,7 @@ export default VueTypedMixins(blockMixin).extend({ ...@@ -157,7 +157,7 @@ export default VueTypedMixins(blockMixin).extend({
} }
.the-block { .the-block {
margin-top: 70px; padding-top: 64px;
} }
.light2 { .light2 {
......
src/views/pc/blockChainBrowser.vue
View file @ f49072a7
...@@ -42,19 +42,10 @@ export default VueTypedMixins(blockChainBrowserMixin).extend({ ...@@ -42,19 +42,10 @@ export default VueTypedMixins(blockChainBrowserMixin).extend({
<style scoped> <style scoped>
.blockChain { .blockChain {
margin-top: 70px; padding-top: 64px;
} }
.chainCard { .chainCard {
position: relative; position: relative;
z-index: 1; z-index: 1;
} }
.rect-block {
/* position: absolute;
z-index: 60;
top: -64px;
left: 197px;
width: 600px;
height: 840px;
background: #2545cb; */
}
</style> </style>
src/views/pc/blockDetail/index.vue
View file @ f49072a7
...@@ -88,6 +88,6 @@ export default VueTypedMixins(blockDetailMixin).extend({ ...@@ -88,6 +88,6 @@ export default VueTypedMixins(blockDetailMixin).extend({
<style scoped> <style scoped>
.block-detail { .block-detail {
margin-top: 70px; padding-top: 6px;
} }
</style> </style>
src/views/pc/newsList.vue
View file @ f49072a7
...@@ -142,7 +142,7 @@ export default Vue.extend({ ...@@ -142,7 +142,7 @@ export default Vue.extend({
<style scoped> <style scoped>
.newslist { .newslist {
padding-top: 70px; padding-top: 64px;
min-width: 1200px; min-width: 1200px;
min-height: calc(100vh - 315px); min-height: calc(100vh - 315px);
} }
......
src/views/pc/tradeDetail.vue
View file @ f49072a7
<template> <template>
<div <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" class="min-w-1200 md:w-bodySet mx-auto flow-root"
> >
<chain-search <chain-search
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment