Skip to content

Y
ycc-website
Commit 88a2095e authored by xhx's avatar xhx
Browse files
Options

整理

parent fdde44a9
Show whitespace changes
Inline Side-by-side
Showing with 73 additions and 67 deletions
package.json
View file @ 88a2095e
......@@ -3,7 +3,7 @@
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"dev": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
......
src/components/mobile/m-explain.vue
View file @ 88a2095e
......@@ -3,20 +3,20 @@
<h4 class="m-title w-full text-20px text-title-color text-center pt-4">{{ $t('lang.whatIs') }}</h4>
<div class="m-explain-btn flex justify-between px-5">
<div class="e-btn flex items-center justify-center relative">
<img class="cursor-pointer" :class="{'opacity-0': index === 1}" src="@/assets/images/h-explain/ex1.png" alt="" @click="handleChange(1)">
<img class="cursor-pointer absolute pointer-events-none" :class="{'opacity-0': index !== 1}" src="@/assets/images/h-explain/exa1.png" alt="">
<img class="cursor-pointer" :class="{'opacity-0': index === 1}" src="@/assets/images/home/ex1.png" alt="" @click="handleChange(1)">
<img class="cursor-pointer absolute pointer-events-none" :class="{'opacity-0': index !== 1}" src="@/assets/images/home/exa1.png" alt="">
</div>
<div class="e-btn flex items-center justify-center relative">
<img class="cursor-pointer" :class="{'opacity-0': index === 2}" src="@/assets/images/h-explain/ex2.png" alt="" @click="handleChange(2)">
<img class="cursor-pointer absolute pointer-events-none" :class="{'opacity-0': index !== 2}" src="@/assets/images/h-explain/exa2.png" alt="">
<img class="cursor-pointer" :class="{'opacity-0': index === 2}" src="@/assets/images/home/ex2.png" alt="" @click="handleChange(2)">
<img class="cursor-pointer absolute pointer-events-none" :class="{'opacity-0': index !== 2}" src="@/assets/images/home/exa2.png" alt="">
</div>
<div class="e-btn flex items-center justify-center relative">
<img class="cursor-pointer" :class="{'opacity-0': index === 3}" src="@/assets/images/h-explain/ex3.png" alt="" @click="handleChange(3)">
<img class="cursor-pointer absolute pointer-events-none" :class="{'opacity-0': index !== 3}" src="@/assets/images/h-explain/exa3.png" alt="">
<img class="cursor-pointer" :class="{'opacity-0': index === 3}" src="@/assets/images/home/ex3.png" alt="" @click="handleChange(3)">
<img class="cursor-pointer absolute pointer-events-none" :class="{'opacity-0': index !== 3}" src="@/assets/images/home/exa3.png" alt="">
</div>
<div class="e-btn flex items-center justify-center relative">
<img class="cursor-pointer" :class="{'opacity-0': index === 4}" src="@/assets/images/h-explain/ex4.png" alt="" @click="handleChange(4)">
<img class="cursor-pointer absolute pointer-events-none" :class="{'opacity-0': index !== 4}" src="@/assets/images/h-explain/exa4.png" alt="">
<img class="cursor-pointer" :class="{'opacity-0': index === 4}" src="@/assets/images/home/ex4.png" alt="" @click="handleChange(4)">
<img class="cursor-pointer absolute pointer-events-none" :class="{'opacity-0': index !== 4}" src="@/assets/images/home/exa4.png" alt="">
</div>
</div>
<div class="px-5" :class="enStyle ? 'explain_m_b' : 'explain_b'">
......
src/components/pc/banner.vue
View file @ 88a2095e
<template>
<div class="home_banner relative w-full">
<div class="banner_content md:w-bodySet">
<img class="mb-7" src="@/assets/images/home/ycc.png" alt="YCC" width="215">
<img class="mb-7 w-52" src="@/assets/images/home/ycc.png" alt="YCC" >
<div class="flex mb-5">
<p class="text-4xl" style="color: #3D5EE9"><span class="mr-5" style="color: #FFA457" :class="{'block': enStyle, 'inline-block': !enStyle, 'tracking-widest': !enStyle}">{{ $t('lang.YUANLIAN') }}</span>{{ $t('lang.title') }}</p>
<p class="text-4xl" style="color: #3D5EE9">
<span
class="mr-5"
style="color: #FFA457"
:class="{'block': enStyle, 'inline-block': !enStyle, 'tracking-widest': !enStyle}">{{ $t('lang.YUANLIAN') }}</span>
{{ $t('lang.title') }}
</p>
</div>
<p class="text-left mb-8 text-28px text-footer-color font-light" :style="{'letter-spacing': enStyle ? 'normal' : '8px'}">{{ $t('lang.bannerDesc') }}</p>
<div v-show="!enStyle" class="qrcode_box flex justify-evenly items-center mb-28">
......
src/components/pc/explain.vue
View file @ 88a2095e
......@@ -3,24 +3,24 @@
<div class="md:w-bodySet h-full flex ">
<div class="explain_l flex mr-32 relative w-6/12 h-full text-sm flex-shrink-0">
<div class="flex flex-col explain_btn explain_1 relative">
<img class="cursor-pointer" :class="{'opacity-0': index === 1}" src="@/assets/images/h-explain/ex1.png" alt="" @click="handleChange(1)">
<img class="cursor-pointer absolute pointer-events-none" :class="{'opacity-0': index !== 1}" src="@/assets/images/h-explain/exa1.png" alt="">
<p class="text-center text-14px text-article-color" style="white-space: nowrap;">{{ $t('lang.mission') }}</p>
<img class="cursor-pointer" :class="{'opacity-0': index === 1}" src="@/assets/images/home/ex1.png" alt="" @click="handleChange(1)">
<img class="cursor-pointer absolute pointer-events-none" :class="{'opacity-0': index !== 1}" src="@/assets/images/home/exa1.png" alt="">
<p class="text-center text-14px text-article-color nowrap">{{ $t('lang.mission') }}</p>
</div>
<div class="flex flex-col explain_btn explain_2 relative">
<p class="text-center mb-4 text-14px text-article-color" style="white-space: nowrap;">{{ $t('lang.feature') }}</p>
<img class="cursor-pointer" :class="{'opacity-0': index === 2}" src="@/assets/images/h-explain/ex2.png" alt="" @click="handleChange(2)">
<img class="cursor-pointer absolute pointer-events-none" :class="{'opacity-0': index !== 2}" style="top: 37px" src="@/assets/images/h-explain/exa2.png" alt="">
<p class="text-center mb-4 text-14px text-article-color nowrap">{{ $t('lang.feature') }}</p>
<img class="cursor-pointer" :class="{'opacity-0': index === 2}" src="@/assets/images/home/ex2.png" alt="" @click="handleChange(2)">
<img class="cursor-pointer absolute pointer-events-none" :class="{'opacity-0': index !== 2}" style="top: 37px" src="@/assets/images/home/exa2.png" alt="">
</div>
<div class="flex flex-col explain_btn explain_3 relative">
<img class="cursor-pointer" :class="{'opacity-0': index === 3}" src="@/assets/images/h-explain/ex3.png" alt="" @click="handleChange(3)">
<img class="cursor-pointer absolute pointer-events-none" :class="{'opacity-0': index !== 3}" src="@/assets/images/h-explain/exa3.png" alt="">
<p class="text-center text-14px text-article-color" style="white-space: nowrap;">{{ $t('lang.application') }}</p>
<img class="cursor-pointer" :class="{'opacity-0': index === 3}" src="@/assets/images/home/ex3.png" alt="" @click="handleChange(3)">
<img class="cursor-pointer absolute pointer-events-none" :class="{'opacity-0': index !== 3}" src="@/assets/images/home/exa3.png" alt="">
<p class="text-center text-14px text-article-color nowrap">{{ $t('lang.application') }}</p>
</div>
<div class="flex flex-col explain_btn explain_4 relative">
<p class="text-center mb-6 text-14px text-article-color" style="white-space: nowrap;">{{ $t('lang.reason') }}</p>
<img class="cursor-pointer" :class="{'opacity-0': index === 4}" src="@/assets/images/h-explain/ex4.png" alt="" @click="handleChange(4)">
<img class="cursor-pointer absolute pointer-events-none" :class="{'opacity-0': index !== 4}" style="top: 45px" src="@/assets/images/h-explain/exa4.png" alt="">
<p class="text-center mb-6 text-14px text-article-color nowrap">{{ $t('lang.reason') }}</p>
<img class="cursor-pointer" :class="{'opacity-0': index === 4}" src="@/assets/images/home/ex4.png" alt="" @click="handleChange(4)">
<img class="cursor-pointer absolute pointer-events-none" :class="{'opacity-0': index !== 4}" style="top: 45px" src="@/assets/images/home/exa4.png" alt="">
</div>
</div>
<div class="explain_r mt-4 flex-grow">
......@@ -71,6 +71,9 @@ export default Vue.extend({
background-repeat: no-repeat;
background-position-x: 50%;
}
.nowrap {
white-space: nowrap;
}
.en-home-explain {
height: 450px;
}
......
src/components/pc/homeFeature.vue
View file @ 88a2095e
......@@ -3,29 +3,29 @@
<h4 class="md:w-bodySet mt-16 mb-32 text-center text-28px text-title-color">{{ $t('lang.Feature') }}</h4>
<div class="md:w-bodySet h-full flex justify-between -pr-2">
<div>
<div class="feature_item flex flex-row-reverse" :style="{'marginBottom': enStyle ? '48px' : '80px'}">
<img class="ml-3" src="@/assets/images/h-feature/f1.png" alt="灵活">
<div class="feature_item h-50 flex flex-row-reverse">
<img class="ml-3" src="@/assets/images/home/f1.png" alt="灵活">
<div>
<h4 class="h-12 text-lg text-right line_48 text-title-color">{{ $t('lang.flexible') }}</h4>
<p class="text-14px text-right leading-6 text-article-color" :class="{'leading-normal': enStyle}">{{ $t('lang.FText') }}</p>
</div>
</div>
<div class="feature_item flex flex-row-reverse" :style="{'marginBottom': enStyle ? '70px' : '130px'}">
<img class="ml-3" src="@/assets/images/h-feature/f2.png" alt="跨链">
<div class="feature_item h-56 flex flex-row-reverse">
<img class="ml-3" src="@/assets/images/home/f2.png" alt="跨链">
<div>
<h4 class="h-12 text-lg text-right line_48 text-title-color">{{ $t('lang.cross') }}</h4>
<p class="text-14px text-right leading-6 text-article-color" :class="{'leading-normal': enStyle}">{{ $t('lang.CText') }}</p>
</div>
</div>
<div class="feature_item flex flex-row-reverse" :style="{'marginBottom': enStyle ? '51px' : '100px'}">
<img class="ml-3" src="@/assets/images/h-feature/f3.png" alt="低延时">
<div class="feature_item h-56 flex flex-row-reverse">
<img class="ml-3" src="@/assets/images/home/f3.png" alt="低延时">
<div>
<h4 class="h-12 text-lg text-right line_48 text-title-color">{{ $t('lang.latency') }}</h4>
<p class="text-14px text-right leading-6 text-article-color" :class="{'leading-normal': enStyle}">{{ $t('lang.LText') }}</p>
</div>
</div>
<div class="feature_item flex flex-row-reverse">
<img class="ml-3" src="@/assets/images/h-feature/f4.png" alt="高并发">
<img class="ml-3" src="@/assets/images/home/f4.png" alt="高并发">
<div>
<h4 class="h-12 text-lg text-right line_48 text-title-color">{{ $t('lang.concurrency') }}</h4>
<p class="text-14px text-right leading-6 text-article-color" :class="{'leading-normal': enStyle}">{{ $t('lang.CCText') }}</p>
......@@ -33,29 +33,29 @@
</div>
</div>
<div>
<div class="feature_item flex" :style="{'marginBottom': enStyle ? '48px' : '80px'}">
<img class="mr-3" src="@/assets/images/h-feature/f5.png" alt="异构">
<div class="feature_item h-50 flex">
<img class="mr-3" src="@/assets/images/home/f5.png" alt="异构">
<div>
<h4 class="h-12 text-lg text-left line_48 text-title-color">{{ $t('lang.heterogeneous') }}</h4>
<p class="text-14px text-left leading-6 text-article-color" :class="{'leading-normal': enStyle}">{{ $t('lang.HeText') }}</p>
</div>
</div>
<div class="feature_item flex" :style="{'marginBottom': enStyle ? '27px' : '105px'}">
<img class="mr-3" src="@/assets/images/h-feature/f6.png" alt="安全">
<div class="feature_item h-56 flex">
<img class="mr-3" src="@/assets/images/home/f6.png" alt="安全">
<div>
<h4 class="h-12 text-lg text-left line_48 text-title-color">{{ $t('lang.security') }}</h4>
<p class="text-14px text-left leading-6 text-article-color" :class="{'leading-normal': enStyle}">{{ $t('lang.SecText') }}</p>
</div>
</div>
<div class="feature_item flex" :style="{'marginBottom': enStyle ? '96px' : '130px'}">
<img class="mr-3" src="@/assets/images/h-feature/f7.png" alt="绿色">
<div class="feature_item h-56 flex">
<img class="mr-3" src="@/assets/images/home/f7.png" alt="绿色">
<div>
<h4 class="h-12 text-lg text-left line_48 text-title-color">{{ $t('lang.environment') }}</h4>
<p class="text-14px text-left leading-6 text-article-color" :class="{'leading-normal': enStyle}">{{ $t('lang.EnvText') }}</p>
</div>
</div>
<div class="feature_item flex">
<img class="mr-3" src="@/assets/images/h-feature/f8.png" alt="计费">
<img class="mr-3" src="@/assets/images/home/f8.png" alt="计费">
<div>
<h4 class="h-12 text-lg text-left line_48 text-title-color">{{ $t('lang.fund') }}</h4>
<p class="text-14px text-left leading-6 text-article-color" :class="{'leading-normal': enStyle}">{{ $t('lang.FundText') }}</p>
......@@ -77,7 +77,7 @@ export default Vue.extend({
<style scoped>
.home_feature {
height: 1091px;
background-image: url(../../assets/images/h-feature/bg_fea.png);
background-image: url(../../assets/images/home/bg_fea.png);
background-position-x: 50%;
background-size: 2100px;
background-repeat: no-repeat;
......@@ -85,12 +85,6 @@ export default Vue.extend({
.line_48 {
line-height: 48px;
}
.mb-106-px {
margin-bottom: 130px;
}
.mb-84-px {
margin-bottom: 105px;
}
.feature_item img {
width: 52px;
height: 52px;
......
src/components/pc/integral.vue
View file @ 88a2095e
......@@ -4,25 +4,25 @@
<h4 class=" mt-16 mb-4 text-3xl text-center text-title-color">{{ $t('lang.point') }}</h4>
<p class="text-lg text-text-color text-center">{{ $t('lang.QAS') }}</p>
<div class="flex justify-center mt-44 relative">
<img src="@/assets/images/home/integral.png" class="flex-grow-0" style="width: 960px; height: 170px" alt="">
<div class="absolute flex flex-col justify-center items-center tag_1" :style="{'left': enStyle ? '235px' : ''}">
<img src="@/assets/images/h-integral/i1.png" width="30" alt="">
<img src="@/assets/images/home/integral.png" class="flex-grow-0" width="960" height="170" alt="">
<div class="absolute flex flex-col justify-center items-center tag_1">
<img src="@/assets/images/home/i1.png" width="30" alt="">
<p class="text-14px text-article-color mt-1">{{ $t('lang.QAS1') }}</p>
</div>
<div class="absolute flex flex-col justify-center items-center tag_2" :style="{'left': enStyle ? '428px' : ''}">
<div class="absolute flex flex-col justify-center items-center tag_2">
<p class="text-14px text-article-color mb-1">{{ $t('lang.QAS2') }}</p>
<img src="@/assets/images/h-integral/i2.png" width="30" alt="">
<img src="@/assets/images/home/i2.png" width="30" alt="">
</div>
<div class="absolute flex flex-col justify-center items-center tag_3" :style="{'left': enStyle ? '732px' : ''}">
<img src="@/assets/images/h-integral/i3.png" width="30" alt="">
<div class="absolute flex flex-col justify-center items-center tag_3">
<img src="@/assets/images/home/i3.png" width="30" alt="">
<p class="text-14px text-article-color mt-1">{{ $t('lang.QAS3') }}</p>
</div>
<div class="absolute flex flex-col justify-center items-center tag_4" :style="{'left': enStyle ? '683px' : ''}">
<img src="@/assets/images/h-integral/i4.png" width="30" alt="">
<div class="absolute flex flex-col justify-center items-center tag_4">
<img src="@/assets/images/home/i4.png" width="30" alt="">
<p class="text-14px text-article-color mt-1">{{ $t('lang.QAS4') }}</p>
</div>
<div class="absolute flex flex-col justify-center items-center tag_5" :style="{'left': enStyle ? '390px' : ''}">
<img src="@/assets/images/h-integral/i5.png" width="30" alt="">
<div class="absolute flex flex-col justify-center items-center tag_5">
<img src="@/assets/images/home/i5.png" width="30" alt="">
<p class="text-14px text-article-color mt-1">{{ $t('lang.QAS5') }}</p>
</div>
</div>
......@@ -41,14 +41,15 @@ export default Vue.extend({
<style scoped>
.integral {
height: 730px;
background-image: url('../../assets/images/h-integral/bg_int.png');
background-image: url('../../assets/images/home/bg_int.png');
background-size: cover;
background-repeat: no-repeat;
background-position-x: 50%;
}
.tag_1 {
top: 35px;
left: 275px;
left: 322px;
transform: translateX(-50%);
}
.tag_1::after {
content: '';
......@@ -65,7 +66,8 @@ export default Vue.extend({
}
.tag_2 {
top: -85px;
left: 528px;
left: 605px;
transform: translateX(-50%);
}
.tag_2::after {
content: '';
......@@ -82,7 +84,8 @@ export default Vue.extend({
}
.tag_3 {
top: 35px;
left: 831px;
left: 885px;
transform: translateX(-50%);
}
.tag_3::after {
content: '';
......@@ -99,7 +102,8 @@ export default Vue.extend({
}
.tag_4 {
top: 194px;
left: 700px;
left: 747px;
transform: translateX(-50%);
}
.tag_4::after {
content: '';
......@@ -116,7 +120,8 @@ export default Vue.extend({
}
.tag_5 {
top: 194px;
left: 418px;
left: 465px;
transform: translateX(-50%);
}
.tag_5::after {
content: '';
......
src/components/pc/mechanism.vue
View file @ 88a2095e
......@@ -6,8 +6,8 @@
{{ $t('lang.ConT1') }}<br/><br/>
{{ $t('lang.ConT2') }}<br/><br/>
{{ $t('lang.ConT3') }}</p>
<img v-show="!enStyle" src="../../assets/images/h-mechanism/consensus.png" alt="">
<img v-show="enStyle" src="../../assets/images/h-mechanism/con-en.png" alt="">
<img v-show="!enStyle" src="../../assets/images/home/consensus.png" alt="">
<img v-show="enStyle" src="../../assets/images/home/con-en.png" alt="">
</div>
</div>
</template>
......@@ -23,7 +23,7 @@ export default Vue.extend({
<style scoped>
.home_mechanism {
height: 900px;
background-image: url('../../assets/images/h-mechanism/bg_me.png');
background-image: url('../../assets/images/home/bg_me.png');
background-size: 2100px;
background-repeat: no-repeat;
background-position-x: 50%;
......
src/components/pc/scene.vue
View file @ 88a2095e
......@@ -3,7 +3,6 @@
<div class="md:w-bodySet flex flex-col items-center">
<h4 class=" mt-16 mb-4 text-28px text-title-color mb-12">{{ $t('lang.scene') }}</h4>
<div class="scene_box relative">
<!-- <div class="absolute left-0 top-0 w-full h-full bg-gradient-to-r-s z-50 pointer-events-none"></div> -->
<img src="@/assets/images/home/scene-bottom.png" class="scene_img_bottom" alt="场景">
<div class="scene_img_box absolute text-center" ref="box" :style="{'transition': isRight ? '0s' : ''}">
<img src="@/assets/images/home/scene.png" class="scene_img" alt="场景">
......@@ -35,8 +34,6 @@ export default Vue.extend({
data() {
return {
index: 2,
// range: [1, 6],
// point: 0,
l_width: 226,
timer: 0,
isRight: false,
......
tailwind.config.js
View file @ 88a2095e
......@@ -417,6 +417,7 @@ module.exports = {
'3/6': '50%',
'4/6': '66.666667%',
'5/6': '83.333333%',
'50': '12.6rem',
full: '100%',
screen: '100vh',
}),
......
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