Skip to content

Y
ycc-website
Commit 9ead4031 authored by xhx's avatar xhx
Browse files
Options

fix:头尾css调整

parent 88a2095e
Hide whitespace changes
Inline Side-by-side
Showing with 66 additions and 189 deletions
src/components/iconSelect.vue
View file @ 9ead4031
......@@ -32,26 +32,6 @@ export default Vue.extend({
this.$router.replace({ path: this.$route.path, query: { ...this.$route.query, lang: v }})
}
},
created() {
// const _b = document.body || document.documentElement
// _b.addEventListener('click', (e) => {
// if (!this.show) return
// for (let item of e.path) {
// try {
// if (item.getAttribute('class').indexOf('i-select-item') <= -1) {
// this.$emit('hidden', true)
// }
// } catch(e) {
// throw Error(e)
// }
// }
// })
},
watch: {
// $route() {
// }
}
})
</script>
......
src/layout/MainPage/Footer.vue
View file @ 9ead4031
......@@ -13,17 +13,17 @@
</ul>
</div>
</div>
<div v-else class="mobile-footer pl-16 pr-6 flex justify-center items-center w-full" :class="{'m-footer': $route.path === '/home', ' bg-footer-color': $route.path !== '/home'}">
<div v-else class="h-40 pl-16 pr-6 flex justify-center items-center w-full" :class="{'bg-bgfooter bg-cover bg-bgfootercolor bg-top': $route.path === '/home', ' bg-footer-color': $route.path !== '/home'}">
<div class="flex-shrink-0">
<img src="@/assets/images/footer/footer-m.png" width="38" alt="yuanlian">
</div>
<div class=" flex flex-col ml-12">
<div class="text-sm text-white leading-loose">{{ $t('lang.community') }}</div>
<div class="mobile-items flex flex-wrap justify-around items-center">
<div class="text-xs text-white leading-loose"><a href="https://www.8btc.com/" target="_blank">{{ $t('lang.bit') }}</a></div>
<div class="text-xs text-white leading-loose"><a href="https://www.reddit.com/user/yuanchain/" target="_blank">Reddit</a></div>
<div class="text-xs text-white leading-loose"><a href="https://www.facebook.com/Yuan-Chain-380711552463031/" target="_blank">Facebook</a></div>
<div class="text-xs text-white leading-loose"><a href="https://www.linkedin.com/company/yuan-chain/" target="_blank">LinkedIn</a></div>
<div class="flex flex-wrap justify-around items-center">
<div class="text-xs text-white leading-loose flex-50%"><a href="https://www.8btc.com/" target="_blank">{{ $t('lang.bit') }}</a></div>
<div class="text-xs text-white leading-loose flex-50%"><a href="https://www.reddit.com/user/yuanchain/" target="_blank">Reddit</a></div>
<div class="text-xs text-white leading-loose flex-50%"><a href="https://www.facebook.com/Yuan-Chain-380711552463031/" target="_blank">Facebook</a></div>
<div class="text-xs text-white leading-loose flex-50%"><a href="https://www.linkedin.com/company/yuan-chain/" target="_blank">LinkedIn</a></div>
<!-- <div class="text-xs text-white leading-loose"><a href="https://bitcointalk.org/index.php?topic=2741373.msg28028807#msg28028807" target="_blank">Bitcointalk</a></div> -->
</div>
</div>
......@@ -35,11 +35,6 @@
import { checkIsMobile } from '@/utils/utils'
import Vue from 'vue'
export default Vue.extend({
data() {
return {
}
},
computed: {
isMobile() {
return checkIsMobile()
......@@ -47,26 +42,3 @@ export default Vue.extend({
}
})
</script>
<style scoped>
.footer {
/* height: 312px; */
}
.mobile-footer {
height: 156px;
}
.m-footer {
height: 220px;
background-image: url(../../assets/images/mobile/m-f.png);
background-color: rgba(249, 250, 251);
background-size: cover;
background-position: 50% bottom;
background-repeat: no-repeat;
}
.mobile-items div {
flex-basis: 50%;
}
</style>
\ No newline at end of file
src/layout/MainPage/Header.vue
View file @ 9ead4031
<template>
<div class="fixed top-0 w-full z-50 flex justify-center" :class="{'bg-white': $route.path !== '/home' || !isTop}" style="transition: 0.2s ease-in">
<div v-if="!isMobile" class="header_h md:w-bodySet flex justify-between items-center">
<div class="fixed min-w-1200 top-0 w-full z-50 flex justify-center ease-in duration-200" :class="{'bg-white': $route.path !== '/home' || !isTop}">
<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">
<ul class="header_menu flex leading-normal text-sm ml-16">
<router-link :to="{path: '/home', query: {lang: $route.query.lang}}" tag="li" :class="{'active': $route.path === '/home'}" class="pl-5 pr-5">{{ $t('lang.home') }}</router-link>
<li class="pl-5 pr-5">
<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>
</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>
</li>
<router-link :to="{path: '/newsList', query: {lang: $route.query.lang}}" :class="{'active': $route.path === '/newsList' || $route.path === '/newsDetails'}" tag="li" class="pl-5 pr-5">{{ $t('lang.news') }}</router-link>
<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>
</router-link>
</ul>
</div>
<div class="flex text-sm mr-1 items-center">
......@@ -50,9 +56,10 @@
</div>
<icon-select :show="showIcon" @hidden="showIcon = false" @selectIcon="(v) => {iconType = v}"></icon-select>
</div>
<div class="menu_btn mr-5" @click="showMenu = !showMenu, showIcon = false"></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>
</div>
</div>
<Menu :isShow="showMenu" v-on:close="closeMenu" :iconType="iconType"></Menu>
</div>
......@@ -63,12 +70,10 @@ import Vue from 'vue'
import IconSelect from '@/components/iconSelect.vue'
import Menu from '@/components/mobile/menu.vue'
import { checkIsMobile } from '@/utils/utils'
// import { Select } from "ant-design-vue";
export default Vue.extend({
components: {
IconSelect,
Menu
// Select
},
data() {
return {
......@@ -115,53 +120,4 @@ export default Vue.extend({
</script>
<style scoped>
.header_h {
min-width: 1200px;
height: 70px;
color: #2545CB;
transition: 0.2s ease-in;
}
.header_menu li {
cursor: pointer;
}
.active {
position: relative;
}
.active::after {
content: '';
display: block;
width: 28px;
height: 4px;
background: #0276F7;
border-radius: 5px;
position: absolute;
left: 50%;
bottom: -8px;
transform: translateX(-50%);
}
.menu_btn {
width: 22px;
height: 3px;
border-radius: 4px;
background: #3155f0;
position: relative;
}
.menu_btn::before, .menu_btn::after {
display: block;
content: '';
width: 22px;
height: 3px;
border-radius: 4px;
background: #3155f0;
position: absolute;
left: 0;
}
.menu_btn::before {
top: -7px;
transform: translateY(50%);
}
.menu_btn::after {
bottom: -7px;
transform: translateY(-50%);
}
</style>
\ No newline at end of file
src/layout/MainPage/index.vue
View file @ 9ead4031
<template>
<div :class="{'ycc_container': !isMobile}">
<main-header></main-header>
<!-- <main-header></main-header> -->
<div class="bg-gray-50">
<keep-alive name="newsLists">
<router-view />
</keep-alive>
</div>
<main-footer></main-footer>
<!-- <main-footer></main-footer> -->
</div>
</template>
......@@ -26,8 +26,8 @@ export default Vue.extend({
}
},
components: {
"main-header": () => import("./Header.vue"),
"main-footer": () => import("./Footer.vue"),
// "main-header": () => import("./Header.vue"),
// "main-footer": () => import("./Footer.vue"),
}
});
</script>
......
src/views/pc/Home.vue
View file @ 9ead4031
......@@ -12,24 +12,24 @@
<div>
<h4 class="text-lg mb-8 text-text-color text-center">{{ $t('lang.platform') }}</h4>
<ul class="links flex justify-center items-center">
<li>
<li class="w-48 mr-3">
<a href="http://www.hadax.com/" target="_blank">
<img src="@/assets/images/home/hadax.png" alt="hadax">
<img class="w-full" src="@/assets/images/home/hadax.png" alt="hadax">
</a>
</li>
<li>
<li class="w-48 mr-3">
<a href="https://www.hitbtc.com/" target="_blank">
<img src="@/assets/images/home/hitbtc.png" alt="hitbtc">
<img class="w-full" src="@/assets/images/home/hitbtc.png" alt="hitbtc">
</a>
</li>
<li>
<li class="w-48 mr-3">
<a href="http://www.hotbit.io/" target="_blank">
<img src="@/assets/images/home/hotbit.png" alt="hotbit">
<img class="w-full" src="@/assets/images/home/hotbit.png" alt="hotbit">
</a>
</li>
<li>
<li class="w-48">
<a href="https://www.zhaobi.site/" target="_blank">
<img src="@/assets/images/home/zhaobi.png" alt="zhaobi">
<img class="w-full" src="@/assets/images/home/zhaobi.png" alt="zhaobi">
</a>
</li>
</ul>
......@@ -42,58 +42,58 @@
<img src="@/assets/images/home/guodun.png" alt="guodun">
</a>
</li> -->
<li>
<li class="w-48 mr-3">
<a href="https://www.feixiaohao.com/" target="_blank">
<img src="@/assets/images/home/feixiaohao.png" alt="feixiaohao">
<img class="w-full" src="@/assets/images/home/feixiaohao.png" alt="feixiaohao">
</a>
</li>
<li>
<li class="w-48 mr-3">
<a href="https://www.mytokencap.com/" target="_blank">
<img src="@/assets/images/home/mytoken.png" alt="mytoken">
<img class="w-full" src="@/assets/images/home/mytoken.png" alt="mytoken">
</a>
</li>
<li>
<li class="w-48">
<a href="https://bitgo.cc/" target="_blank">
<img src="@/assets/images/home/bitgo.png" alt="bitgo">
<img class="w-full" src="@/assets/images/home/bitgo.png" alt="bitgo">
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="w-full flex justify-center fixed bottom-0 left-0 " :class="{'bg-footer-color': !isStyleChange, 'bg-normal-color': isStyleChange}" style="z-index: 110">
<div class="home-footer md:w-bodySet flex justify-center items-center">
<div>
<div class="w-full flex justify-center fixed bottom-0 left-0 " :class="{'bg-footer-color': !isStyleChange, 'bg-bgfootercolor': isStyleChange}" style="z-index: 110">
<div class="h-20 md:w-bodySet flex justify-center items-center">
<div class="flex-shrink-0 mr-24 w-10">
<a href="https://t.me/yccorg" target="_blank">
<img v-show="!isStyleChange" src="@/assets/images/footer/shadow.png" alt="">
<img v-show="isStyleChange" src="@/assets/images/footer/shadow2.png" alt="">
<img class="w-full" v-show="!isStyleChange" src="@/assets/images/footer/shadow.png" alt="">
<img class="w-full" v-show="isStyleChange" src="@/assets/images/footer/shadow2.png" alt="">
</a>
</div>
<div>
<div class="flex-shrink-0 mr-24 w-10">
<Tooltip title="邮箱: business@yuan.org" placement="top">
<img v-show="!isStyleChange" class="cursor-pointer" src="@/assets/images/footer/email.png" alt="">
<img v-show="isStyleChange" class="cursor-pointer" src="@/assets/images/footer/email2.png" alt="">
<img v-show="!isStyleChange" class="cursor-pointer w-full" src="@/assets/images/footer/email.png" alt="">
<img v-show="isStyleChange" class="cursor-pointer w-full" src="@/assets/images/footer/email2.png" alt="">
</Tooltip>
</div>
<div>
<div class="flex-shrink-0 mr-24 w-10">
<Tooltip placement="top">
<template slot="title">
<img class="cursor-pointer" src="@/assets/images/footer/wx-footer.png" alt="">
</template>
<img v-show="!isStyleChange" class="cursor-pointer" src="@/assets/images/footer/weixin.png" alt="">
<img v-show="isStyleChange" class="cursor-pointer" src="@/assets/images/footer/weixin2.png" alt="">
<img v-show="!isStyleChange" class="cursor-pointer w-full" src="@/assets/images/footer/weixin.png" alt="">
<img v-show="isStyleChange" class="cursor-pointer w-full" src="@/assets/images/footer/weixin2.png" alt="">
</Tooltip>
</div>
<div>
<div class="flex-shrink-0 mr-24 w-10">
<a href="https://twitter.com/yuanchain" target="_blank">
<img v-show="!isStyleChange" src="@/assets/images/footer/twitter.png" alt="">
<img v-show="isStyleChange" src="@/assets/images/footer/twitter2.png" alt="">
<img v-show="!isStyleChange" class="w-full" src="@/assets/images/footer/twitter.png" alt="">
<img v-show="isStyleChange" class="w-full" src="@/assets/images/footer/twitter2.png" alt="">
</a>
</div>
<div>
<div class="flex-shrink-0 w-10">
<a href="https://medium.com/@yuanchain" target="_blank">
<img v-show="!isStyleChange" src="@/assets/images/footer/mail.png" alt="">
<img v-show="isStyleChange" src="@/assets/images/footer/mail2.png" alt="">
<img v-show="!isStyleChange" class="w-full" src="@/assets/images/footer/mail.png" alt="">
<img v-show="isStyleChange" class="w-full" src="@/assets/images/footer/mail2.png" alt="">
</a>
</div>
</div>
......@@ -141,10 +141,6 @@ export default Vue.extend({
watch: {
$route(n) {
this.useEn = n.query?.lang === 'en'
console.log(this.useEn)
// if (n.query.lang === 'en') {
// this.useEn = true
// }
}
}
});
......@@ -169,13 +165,13 @@ export default Vue.extend({
background-size: cover;
background-position-x: 50%;
}
.links li a img {
/* .links li a img {
width: 190px;
}
.links li:nth-of-type(-n+3) {
} */
/* .links li:nth-of-type(-n+3) {
margin-right: 12px;
}
.home-footer {
} */
/* .home-footer {
height: 80px;
line-height: 80px;
}
......@@ -190,5 +186,5 @@ export default Vue.extend({
}
.bg-normal-color {
background: rgb(250, 251, 252);
}
} */
</style>
tailwind.config.js
View file @ 9ead4031
......@@ -11,36 +11,7 @@ module.exports = {
theme: {
extend: {
backgroundImage: theme => ({
// 'trainBg2': "url(/images/trainBg2.png)",
// 'trainBg': "url(/images/traningSubBanner.png)",
// 'cardBg': "url(/images/cardBg.png)",
// 'map': "url('/images/map.png')",
// 'xinan': "url('/images/partener/xinan.png')",
// 'jsy': "url('/images/partener/jsy.png')",
// 'gjdw': "url('/images/partener/gjdw.png')",
// 'hkj': "url('/images/partener/hkj.png')",
// 'hqdx': "url('/images/partener/hqdx.png')",
// 'sjd': "url('/images/partener/sjd.png')",
// 'zgyd': "url('/images/partener/zgyd.png')",
// 'zgdx': "url('/images/partener/zgdx.png')",
// 'timelinebg': "url('/images/timelineBg.png')",
// 'card-baas': "url('/images/homeCards/baas.png')",
// 'card-gyl': "url('/images/homeCards/gyl.png')",
// 'card-trace': "url('/images/homeCards/trace.png')",
// 'jd': "url('/images/partener/jd.png')",
// 'ali': "url('/images/partener/ali.png')",
// 'esgcc': "url('/images/partener/esgcc.png')",
// 'haiping': "url('/images/partener/haiping.png')",
// 'huawei': "url('/images/partener/huawei.png')",
// 'hzhcounrt': "url('/images/partener/hzhcounrt.png')",
// 'microsoft': "url('/images/partener/microsoft.png')",
// 'midea': "url('/images/partener/midea.png')",
// 'saic': "url('/images/partener/saic.png')",
// 'solution': "url('/images/solutionBG.png')",
// 'scene1': "url('/images/scene1.png')",
// 'scene2': "url('/images/scene2.png')",
// 'scene3': "url('/images/scene3.png')",
// 'scene4': "url('/images/scene4.png')",
'bgfooter': "url(/img/bgfooter.png)",
})
},
screens: {
......@@ -64,6 +35,8 @@ module.exports = {
'feature-text': '#495E75',
'scene-color': '#435897',
'details-bg': '#F2F2F2',
'bgfootercolor': '#f9fafb',
'active': '#0276F7',
black: colors.black,
white: colors.white,
gray: colors.coolGray,
......@@ -209,6 +182,7 @@ module.exports = {
auto: '1 1 auto',
initial: '0 1 auto',
none: 'none',
'50%': '0 0 50%',
},
flexGrow: {
0: '0',
......@@ -548,6 +522,7 @@ module.exports = {
'450px': '450px',
'320': '320px',
body: '1520px',
'1200': '1200px',
},
objectPosition: {
......
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