Skip to content

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

初版调整

parent 2962d374
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 500 additions and 220 deletions
package.json
View file @ 00326569
...@@ -38,6 +38,8 @@ ...@@ -38,6 +38,8 @@
"eslint": "^6.7.2", "eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2", "eslint-plugin-vue": "^6.2.2",
"typescript": "~4.1.5", "typescript": "~4.1.5",
"vue-template-compiler": "^2.6.11" "vue-template-compiler": "^2.6.11",
"sass": "^1.26.5",
"sass-loader": "^8.0.2"
} }
} }
src/assets/images/footer/wx-footer.png
View replaced file @ 2962d374 View file @ 00326569
src/assets/images/footer/wx-footer.png

9.49 KB | W: | H:

src/assets/images/footer/wx-footer.png

37.7 KB | W: | H:

src/assets/images/footer/wx-footer.png
src/assets/images/footer/wx-footer.png
src/assets/images/footer/wx-footer.png
src/assets/images/footer/wx-footer.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/h-integral/i1.png
View replaced file @ 2962d374 View file @ 00326569
src/assets/images/h-integral/i1.png

1.74 KB | W: | H:

src/assets/images/h-integral/i1.png

2.18 KB | W: | H:

src/assets/images/h-integral/i1.png
src/assets/images/h-integral/i1.png
src/assets/images/h-integral/i1.png
src/assets/images/h-integral/i1.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/h-integral/i2.png
View replaced file @ 2962d374 View file @ 00326569
src/assets/images/h-integral/i2.png

2.21 KB | W: | H:

src/assets/images/h-integral/i2.png

2.96 KB | W: | H:

src/assets/images/h-integral/i2.png
src/assets/images/h-integral/i2.png
src/assets/images/h-integral/i2.png
src/assets/images/h-integral/i2.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/h-integral/i3.png
View replaced file @ 2962d374 View file @ 00326569
src/assets/images/h-integral/i3.png

1.67 KB | W: | H:

src/assets/images/h-integral/i3.png

2.25 KB | W: | H:

src/assets/images/h-integral/i3.png
src/assets/images/h-integral/i3.png
src/assets/images/h-integral/i3.png
src/assets/images/h-integral/i3.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/h-integral/i4.png
View replaced file @ 2962d374 View file @ 00326569
src/assets/images/h-integral/i4.png

1.75 KB | W: | H:

src/assets/images/h-integral/i4.png

2.31 KB | W: | H:

src/assets/images/h-integral/i4.png
src/assets/images/h-integral/i4.png
src/assets/images/h-integral/i4.png
src/assets/images/h-integral/i4.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/h-integral/i5.png
View replaced file @ 2962d374 View file @ 00326569
src/assets/images/h-integral/i5.png

1.72 KB | W: | H:

src/assets/images/h-integral/i5.png

2.16 KB | W: | H:

src/assets/images/h-integral/i5.png
src/assets/images/h-integral/i5.png
src/assets/images/h-integral/i5.png
src/assets/images/h-integral/i5.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/home/scene.png
View replaced file @ 2962d374 View file @ 00326569
src/assets/images/home/scene.png

134 KB | W: | H:

src/assets/images/home/scene.png

84.3 KB | W: | H:

src/assets/images/home/scene.png
src/assets/images/home/scene.png
src/assets/images/home/scene.png
src/assets/images/home/scene.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/home/scene.svg 0 → 100644
View file @ 00326569
<?xml version="1.0" encoding="UTF-8"?>
<svg width="2164px" height="341px" viewBox="0 0 2164 341" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 34</title>
<g id="-定（切图）" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="-首页-交互内容-应用场景" transform="translate(-72.000000, -9203.000000)">
<g id="编组-35" transform="translate(72.000000, 9203.000000)">
<g id="编组-34" transform="translate(28.656122, 22.000000)">
<path d="M0,113.965137 C91.4167094,275.397237 169.628193,318.33612 234.634451,242.781785 C293.168057,174.75037 320.051607,82 394.343878,82 C468.63615,82 512.875978,255.310495 661.024648,193.336486 C792.181038,135.701112 878.250075,140.026223 951.053519,209.026223 C1023.85696,278.026223 1115.55087,329.027072 1177.83129,242.781785 C1227.9494,173.378746 1251.96869,87 1317.34388,87 C1425.52331,87 1456.77882,272.525813 1549.34388,273 C1641.90894,273.474187 1645.07094,154 1781.34388,139 C1952.48519,127.516014 1966.43514,11.3248184 2015.84681,15.0412117 C2041.18671,15.0412117 2050.55893,60.2284479 2079,105.965137" id="路径-6" stroke="#2747CC" stroke-width="3.2"></path>
<circle id="椭圆形" fill="#0276F7" cx="1088.42204" cy="288.196676" r="5"></circle>
<g id="编组-10" transform="translate(2001.343878, 0.000000)">
<g id="椭圆形" transform="translate(0.000000, 0.000000)">
<circle fill="#0276F7" cx="15" cy="15" r="5"></circle>
<circle stroke="#0276F7" stroke-width="2" opacity="0.200000003" cx="15" cy="15" r="14"></circle>
</g>
<g id="椭圆形" transform="translate(0.000000, 0.000000)">
<circle fill="#0276F7" cx="15" cy="15" r="5"></circle>
<circle stroke="#0276F7" stroke-width="2" opacity="0.200000003" cx="15" cy="15" r="14"></circle>
</g>
</g>
<g id="编组-10" transform="translate(1308.343878, 72.000000)">
<g id="椭圆形" transform="translate(0.000000, 0.000000)">
<circle fill="#0276F7" cx="15" cy="15" r="5"></circle>
<circle stroke="#0276F7" stroke-width="2" opacity="0.200000003" cx="15" cy="15" r="14"></circle>
</g>
</g>
<g id="编组-10" transform="translate(147.181038, 263.000000)">
<g id="椭圆形" transform="translate(0.000000, 0.000000)">
<circle fill="#0276F7" cx="15" cy="15" r="5"></circle>
<circle stroke="#0276F7" stroke-width="2" opacity="0.200000003" cx="15" cy="15" r="14"></circle>
</g>
</g>
<g id="编组-3" transform="translate(611.343878, 189.000000)">
<circle id="椭圆形" fill="#0276F7" cx="15.434903" cy="15.2188366" r="5"></circle>
<circle id="椭圆形" stroke="#0276F7" stroke-width="2" opacity="0.200000003" cx="15" cy="15" r="14"></circle>
</g>
<circle id="椭圆形" stroke="#0276F7" stroke-width="2" opacity="0.200000003" cx="1088.34388" cy="288" r="12"></circle>
<g id="编组-10" transform="translate(843.343878, 144.000000)">
<circle id="椭圆形" fill="#0276F7" cx="15.5" cy="14.5" r="4.5"></circle>
<circle id="椭圆形" stroke="#0276F7" stroke-width="2" opacity="0.200000003" cx="15" cy="15" r="14"></circle>
</g>
<g id="编组-10" transform="translate(1766.343878, 124.000000)">
<circle id="椭圆形" fill="#0276F7" cx="15" cy="15" r="5"></circle>
<circle id="椭圆形" stroke="#0276F7" stroke-width="2" opacity="0.200000003" cx="15" cy="15" r="14"></circle>
</g>
<g id="编组-10" transform="translate(1534.343878, 258.000000)">
<circle id="椭圆形" fill="#0276F7" cx="15" cy="15" r="5"></circle>
<circle id="椭圆形" stroke="#0276F7" stroke-width="2" opacity="0.200000003" cx="15" cy="15" r="14"></circle>
</g>
<g id="编组-10" transform="translate(379.343878, 67.000000)">
<g id="椭圆形" transform="translate(0.000000, 0.000000)">
<circle fill="#0276F7" cx="15" cy="15" r="5"></circle>
<circle stroke="#0276F7" stroke-width="2" opacity="0.200000003" cx="15" cy="15" r="14"></circle>
</g>
<g id="椭圆形" transform="translate(0.000000, 0.000000)">
<circle fill="#0276F7" cx="15" cy="15" r="5"></circle>
<circle stroke="#0276F7" stroke-width="2" opacity="0.200000003" cx="15" cy="15" r="14"></circle>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/lang/en.ts
View file @ 00326569
...@@ -86,5 +86,8 @@ export const lang = { ...@@ -86,5 +86,8 @@ export const lang = {
morecontent: 'More', morecontent: 'More',
nextInfo: 'Next News', nextInfo: 'Next News',
date: 'Date', date: 'Date',
author: 'Author' author: 'Author',
close: 'close',
wx1: 'wechat',
wx2: 'wechat'
} }
\ No newline at end of file
src/assets/lang/zh.ts
View file @ 00326569
...@@ -86,5 +86,8 @@ export const lang = { ...@@ -86,5 +86,8 @@ export const lang = {
morecontent: '查看更多内容', morecontent: '查看更多内容',
nextInfo: '下一篇资讯', nextInfo: '下一篇资讯',
date: '日期', date: '日期',
author: '作者' author: '作者',
close: '收起二维码',
wx1: '微信:chain-vc(发 ycc100进群)',
wx2: '微信:kuangfuwu(扫一扫联系客服)'
} }
\ No newline at end of file
src/components/mobile/m-explain.vue
View file @ 00326569
<template> <template>
<div class="m-explain mt-3 px-4"> <div class="m-explain mt-3 px-4">
<h4 class="m-title w-full text-20px text-title-color text-center pt-4">什么是原链？</h4> <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="m-explain-btn flex justify-between px-5">
<div class="e-btn flex items-center justify-center"> <div class="e-btn flex items-center justify-center relative">
<img v-show="index !== 1" class="cursor-pointer" src="@/assets/images/h-explain/ex1.png" alt="" @click="handleChange(1)"> <img class="cursor-pointer" :class="{'opacity-0': index === 1}" src="@/assets/images/h-explain/ex1.png" alt="" @click="handleChange(1)">
<img v-show="index === 1" class="cursor-pointer" src="@/assets/images/h-explain/exa1.png" alt=""> <img class="cursor-pointer absolute pointer-events-none" :class="{'opacity-0': index !== 1}" src="@/assets/images/h-explain/exa1.png" alt="">
</div> </div>
<div class="e-btn flex items-center justify-center"> <div class="e-btn flex items-center justify-center relative">
<img v-show="index !== 2" class="cursor-pointer" src="@/assets/images/h-explain/ex2.png" alt="" @click="handleChange(2)"> <img class="cursor-pointer" :class="{'opacity-0': index === 2}" src="@/assets/images/h-explain/ex2.png" alt="" @click="handleChange(2)">
<img v-show="index === 2" class="cursor-pointer" src="@/assets/images/h-explain/exa2.png" alt=""> <img class="cursor-pointer absolute pointer-events-none" :class="{'opacity-0': index !== 2}" src="@/assets/images/h-explain/exa2.png" alt="">
</div> </div>
<div class="e-btn flex items-center justify-center"> <div class="e-btn flex items-center justify-center relative">
<img v-show="index !== 3" class="cursor-pointer" src="@/assets/images/h-explain/ex3.png" alt="" @click="handleChange(3)"> <img class="cursor-pointer" :class="{'opacity-0': index === 3}" src="@/assets/images/h-explain/ex3.png" alt="" @click="handleChange(3)">
<img v-show="index === 3" class="cursor-pointer" src="@/assets/images/h-explain/exa3.png" alt=""> <img class="cursor-pointer absolute pointer-events-none" :class="{'opacity-0': index !== 3}" src="@/assets/images/h-explain/exa3.png" alt="">
</div> </div>
<div class="e-btn flex items-center justify-center"> <div class="e-btn flex items-center justify-center relative">
<img v-show="index !== 4" class="cursor-pointer" src="@/assets/images/h-explain/ex4.png" alt="" @click="handleChange(4)"> <img class="cursor-pointer" :class="{'opacity-0': index === 4}" src="@/assets/images/h-explain/ex4.png" alt="" @click="handleChange(4)">
<img v-show="index === 4" class="cursor-pointer" src="@/assets/images/h-explain/exa4.png" alt=""> <img class="cursor-pointer absolute pointer-events-none" :class="{'opacity-0': index !== 4}" src="@/assets/images/h-explain/exa4.png" alt="">
</div> </div>
</div> </div>
<div class="explain_b px-5"> <div class="px-5" :class="enStyle ? 'explain_m_b' : 'explain_b'">
<m-explain-text :index="index"></m-explain-text> <m-explain-text :index="index" :enStyle="enStyle"></m-explain-text>
</div> </div>
</div> </div>
</template> </template>
...@@ -28,7 +28,9 @@ ...@@ -28,7 +28,9 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue' import Vue from 'vue'
import MExplainText from '@/components/mobile/m-explainText.vue' import MExplainText from '@/components/mobile/m-explainText.vue'
import lang from '@/mixin/lang'
export default Vue.extend({ export default Vue.extend({
mixins: [lang],
components: { components: {
MExplainText MExplainText
}, },
...@@ -70,6 +72,9 @@ export default Vue.extend({ ...@@ -70,6 +72,9 @@ export default Vue.extend({
.e-btn { .e-btn {
width: 50px; width: 50px;
} }
.e-btn img {
transition: 0.3s ease-in;
}
.explain_b { .explain_b {
height: 270px; height: 270px;
background-image: url(../../assets/images/mobile/ex-bg.png); background-image: url(../../assets/images/mobile/ex-bg.png);
...@@ -77,4 +82,11 @@ export default Vue.extend({ ...@@ -77,4 +82,11 @@ export default Vue.extend({
background-position: 0 bottom; background-position: 0 bottom;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.explain_m_b {
height: 450px;
background-image: url(../../assets/images/mobile/ex-bg.png);
background-size: 100%;
background-position: 0 bottom;
background-repeat: no-repeat;
}
</style> </style>
\ No newline at end of file
src/components/mobile/m-explainText.vue
View file @ 00326569
<template> <template>
<div class="m-explain-text"> <div class="m-explain-text relative">
<div v-show="index === 1"> <div class="absolute duration-300" :class="{'opacity-0': index !== 1}">
<h3 class="text-14px text-left text-title-color">原链YCC使命</h3> <h3 class="m-e-text-t text-14px text-left text-title-color">{{ $t('lang.mission') }}</h3>
<p class="text-xs text-left mt-1 leading-5 text-article-color"> <p class="text-xs text-left mt-1 text-article-color" :class="{'leading-5': !enStyle, 'leading-normal': enStyle}">
原链YCC新一代基础型应用公链。基于原链YCC公链网络，天然适合构建Defi、NFT、Dao等应用合约。 {{ $t('lang.missionText') }}
原链YCC通过构建创新性的POS33共识机制，其在保证去中心化的同时，能够实现区块的快速验证与
生成，兼顾公信与性能。为满足应用型公链生态扩建，原链YCC支持双层多链区块链架构拓展，在主链共
识的基础上，打造平行公链，实现性能提升，生态扩展。
</p> </p>
</div> </div>
<div v-show="index === 2"> <div class="absolute duration-300" :class="{'opacity-0': index !== 2}">
<h3 class="text-14px text-left text-title-color">原链YCC技术特点</h3> <h3 class="m-e-text-t text-14px text-left text-title-color">{{ $t('lang.feature') }}</h3>
<p class="text-xs text-left mt-1 leading-5 text-article-color"> <p class="text-xs text-left mt-1 text-article-color" :class="{'leading-5': !enStyle, 'leading-normal': enStyle}">
1.主链稳定性类比比特币，无虚拟机，高并发，未来每秒TPS可达万级别；<br/> {{ $t('lang.FT1') }}<br/>
2.平行链主要哈希日志写入主链，确保不可篡改；<br/> {{ $t('lang.FT2') }}<br/>
3.可在平行链上灵活使用智能合约及虚拟机，不会影响主链的稳定及安全；<br/> {{ $t('lang.FT3') }}<br/>
4.平行链和主链跨链互动高效稳定，兼顾了主链的权威性及平行链的多样性；<br/> {{ $t('lang.FT4') }}<br/>
5.共识算法创新POS33+BFT，选取部分持币节点作为区块生产者和区块验证节点，类似陪审团制，兼顾公正及高效的共识；<br/> {{ $t('lang.FT5') }}<br/>
6.原链支持跨链桥，可与比特币和以太坊网络实现跨链代币交易。 {{ $t('lang.FT6') }}
</p> </p>
</div> </div>
<div v-show="index === 3"> <div class="absolute duration-300" :class="{'opacity-0': index !== 3}">
<h3 class="text-14px text-left text-title-color">原链YCC应用</h3> <h3 class="m-e-text-t text-14px text-left text-title-color">{{ $t('lang.application') }}</h3>
<p class="text-xs text-left mt-1 leading-5 text-article-color"> <p class="text-xs text-left mt-1 text-article-color" :class="{'leading-5': !enStyle, 'leading-normal': enStyle}">
技术支持：Defi、NFT、社交代币、企业白条、资产上链及交易、积分商城、溯源存证、钱包等。<br/> {{ $t('lang.APPT') }}<br/>
潜在应用领域：鲜花、礼品、手机、节能、宠物、餐饮、环保、汽车、家电、服装、电力、健康、教育、 {{ $t('lang.APPO') }}
建筑、地产、贸易、艺术品、聊天、公安法院、政务等。
</p> </p>
</div> </div>
<div v-show="index === 4"> <div class="absolute duration-300" :class="{'opacity-0': index !== 4}">
<h3 class="text-14px text-left text-title-color">为什么上原链YCC</h3> <h3 class="m-e-text-t text-14px text-left text-title-color">{{ $t('lang.reason') }}</h3>
<p class="text-xs text-left mt-1 leading-5 text-article-color"> <p class="text-xs text-left mt-1 text-article-color" :class="{'leading-5': !enStyle, 'leading-normal': enStyle}">
1.简单易用，上链无障碍；<br/> {{ $t('lang.R1') }}<br/>
2.百人底层技术及应用团队支持维护；<br/> {{ $t('lang.R2') }}<br/>
3.全生态技术开放支持，核心团队维护； <br/> {{ $t('lang.R3') }}<br/>
4.原链生态规模大，覆盖广，利于个人和中小企业发展；<br/> {{ $t('lang.R4') }}<br/>
5.吸取国内外技术优势，由中国团队100%掌握自主可控的区块链技术，升级和维护不受国外技术限制;<br/> {{ $t('lang.R5') }}<br/>
6.原链已发行100亿个，每年固定挖矿4.8亿个，挖矿分配比例类似以太坊，60%归持币者，40%归发展基金，避免研发经费不足，永续经营;<br/> {{ $t('lang.R6') }}<br/>
7.考虑公益、税收及政府监管、与政府和社会和谐发展。 {{ $t('lang.R7') }}
</p> </p>
</div> </div>
</div> </div>
...@@ -47,7 +43,8 @@ ...@@ -47,7 +43,8 @@
import Vue from 'vue' import Vue from 'vue'
export default Vue.extend({ export default Vue.extend({
props: { props: {
index: Number index: Number,
enStyle: Boolean
} }
}) })
</script> </script>
...@@ -60,4 +57,20 @@ export default Vue.extend({ ...@@ -60,4 +57,20 @@ export default Vue.extend({
background-position: 0 bottom; background-position: 0 bottom;
background-repeat: no-repeat; background-repeat: no-repeat;
} */ } */
.m-e-text-t {
position: relative;
padding-left: 11px;
}
.m-e-text-t::after {
content: '';
display: block;
width: 5px;
height: 5px;
background: #22356C;
border-radius: 50%;
position: absolute;
left: 1px;
top: 50%;
transform: translate3d(0, -50%, 0);
}
</style> </style>
\ No newline at end of file
src/components/mobile/m-feature.vue
View file @ 00326569
<template> <template>
<div class="m-feature"> <div class="m-feature">
<h4 class="m-title w-full text-20px text-title-color text-center pt-4 mt-2 mb-7">原链的特点</h4> <h4 class="m-title w-full text-20px text-title-color text-center pt-4 mt-2 mb-7">{{ $t('lang.Feature') }}</h4>
<div> <div>
<div class="swiper-container"> <div class="swiper-container">
<div class="swiper-wrapper"> <div class="swiper-wrapper">
<div class="swiper-slide flex flex-wrap justify-between px-4 mb-5"> <div class="swiper-slide flex flex-wrap justify-between px-4 mb-5">
<div v-for="item in block1" :key="item.id" class="m-f-block bg-white px-3 py-5 mb-3 rounded"> <!-- <div v-for="item in block1" :key="item.id" class="m-f-block bg-white px-3 py-5 mb-3 rounded" :style="{'height': enStyle ? '270px' : ''}">
<h4 class="text-sm text-title-color mb-5 font-semibold"> <h4 class="text-sm text-title-color mb-5 font-semibold">
<img class="w-7 inline-block" :src="item.icon" alt=""> <img class="w-7 inline-block" :src="item.icon" alt="">
{{ item.title }}</h4> {{ item.title }}</h4>
<p class="text-xs text-article-color leading-relaxed">{{ item.text }}</p> <p class="text-xs text-article-color leading-relaxed">{{ item.text }}</p>
</div> -->
<div class="m-f-block bg-white px-3 py-5 mb-3 rounded" :style="{'height': enStyle ? '270px' : ''}">
<h4 class="text-sm text-title-color font-semibold" :class="enStyle ? 'mb-1' : 'mb-5'">
<img class="w-7 inline-block" src="@/assets/images/mobile/f1.png" alt="">
{{ $t('lang.flexible') }}</h4>
<p class="text-xs text-article-color" :class="{'leading-4': enStyle, 'leading-relaxed': !enStyle}">{{ $t('lang.FText') }}</p>
</div>
<div class="m-f-block bg-white px-3 py-5 mb-3 rounded" :style="{'height': enStyle ? '270px' : ''}">
<h4 class="text-sm text-title-color font-semibold" :class="enStyle ? 'mb-1' : 'mb-5'">
<img class="w-7 inline-block" src="@/assets/images/mobile/f2.png" alt="">
{{ $t('lang.cross') }}</h4>
<p class="text-xs text-article-color" :class="{'leading-4': enStyle, 'leading-relaxed': !enStyle}">{{ $t('lang.CText') }}</p>
</div>
<div class="m-f-block bg-white px-3 py-5 mb-3 rounded" :style="{'height': enStyle ? '270px' : ''}">
<h4 class="text-sm text-title-color font-semibold" :class="enStyle ? 'mb-1' : 'mb-5'">
<img class="w-7 inline-block" src="@/assets/images/mobile/f3.png" alt="">
{{ $t('lang.latency') }}</h4>
<p class="text-xs text-article-color" :class="{'leading-4': enStyle, 'leading-relaxed': !enStyle}">{{ $t('lang.LText') }}</p>
</div>
<div class="m-f-block bg-white px-3 py-5 mb-3 rounded" :style="{'height': enStyle ? '270px' : ''}">
<h4 class="text-sm text-title-color font-semibold" :class="enStyle ? 'mb-1' : 'mb-5'">
<img class="w-7 inline-block" src="@/assets/images/mobile/f4.png" alt="">
{{ $t('lang.concurrency') }}</h4>
<p class="text-xs text-article-color" :class="{'leading-4': enStyle, 'leading-relaxed': !enStyle}">{{ $t('lang.CCText') }}</p>
</div> </div>
</div> </div>
<div class="swiper-slide flex flex-wrap justify-between px-4 mb-5"> <div class="swiper-slide flex flex-wrap justify-between px-4 mb-5">
<div v-for="item in block2" :key="item.id" class="m-f-block bg-white px-3 py-5 mb-3 rounded"> <div class="m-f-block bg-white px-3 py-5 mb-3 rounded" :style="{'height': enStyle ? '270px' : ''}">
<h4 class="text-sm text-title-color mb-5 font-semibold"> <h4 class="text-sm text-title-color font-semibold" :class="enStyle ? 'mb-1' : 'mb-5'">
<img class="w-7 inline-block" :src="item.icon" alt=""> <img class="w-7 inline-block" src="@/assets/images/mobile/f5.png" alt="">
{{ item.title }}</h4> {{ $t('lang.heterogeneous') }}</h4>
<p class="text-xs text-article-color leading-relaxed">{{ item.text }}</p> <p class="text-xs text-article-color" :class="{'leading-4': enStyle, 'leading-relaxed': !enStyle}">{{ $t('lang.HeText') }}</p>
</div>
<div class="m-f-block bg-white px-3 py-5 mb-3 rounded" :style="{'height': enStyle ? '270px' : ''}">
<h4 class="text-sm text-title-color font-semibold" :class="enStyle ? 'mb-1' : 'mb-5'">
<img class="w-7 inline-block" src="@/assets/images/mobile/f6.png" alt="">
{{ $t('lang.security') }}</h4>
<p class="text-xs text-article-color" :class="{'leading-4': enStyle, 'leading-relaxed': !enStyle}">{{ $t('lang.SecText') }}</p>
</div>
<div class="m-f-block bg-white px-3 py-5 mb-3 rounded" :style="{'height': enStyle ? '270px' : ''}">
<h4 class="text-sm text-title-color font-semibold" :class="enStyle ? 'mb-1' : 'mb-5'">
<img class="w-7 inline-block" src="@/assets/images/mobile/f7.png" alt="">
{{ $t('lang.environment') }}</h4>
<p class="text-xs text-article-color" :class="{'leading-4': enStyle, 'leading-relaxed': !enStyle}">{{ $t('lang.EnvText') }}</p>
</div>
<div class="m-f-block bg-white px-3 py-5 mb-3 rounded" :style="{'height': enStyle ? '270px' : ''}">
<h4 class="text-sm text-title-color font-semibold" :class="enStyle ? 'mb-1' : 'mb-5'">
<img class="w-7 inline-block" src="@/assets/images/mobile/f8.png" alt="">
{{ $t('lang.fund') }}</h4>
<p class="text-xs text-article-color" :class="{'leading-4': enStyle, 'leading-relaxed': !enStyle}">{{ $t('lang.FundText') }}</p>
</div> </div>
</div> </div>
</div> </div>
...@@ -31,83 +73,49 @@ ...@@ -31,83 +73,49 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue' import Vue from 'vue'
import {Swiper, Autoplay, Pagination} from 'swiper' import {Swiper, Autoplay, Pagination} from 'swiper'
import lang from '@/mixin/lang'
import 'swiper/swiper-bundle.css' import 'swiper/swiper-bundle.css'
Swiper.use([ Pagination, Autoplay]) Swiper.use([ Pagination, Autoplay])
export default Vue.extend({ export default Vue.extend({
mixins: [lang],
data() { data() {
return { return {
block1: [ swiper1: {}
{
id: 1,
title: '灵活',
text: '当应用的智能合约出现BUG，原链可以热替换智能合约，及时修复BUG，控制损失，拒绝分叉',
icon: require('@/assets/images/mobile/f1.png')
},
{
id: 2,
title: '跨链',
text: '原链系统支持公链、联盟链、私链间数字资产和数字货币在不同链上无障碍流通',
icon: require('@/assets/images/mobile/f2.png')
},
{
id: 3,
title: '低延时',
text: '最小区块间隔仅1s,可应用于金融交易所、智能机器人、工业4.0、大数据处理等高性能要求场景',
icon: require('@/assets/images/mobile/f3.png')
},
{
id: 4,
title: '高并发',
text: '公链并发量＞10000笔/秒，联盟链、私链并发量＞100000笔/秒',
icon: require('@/assets/images/mobile/f4.png')
}
],
block2: [
{
id: 1,
title: '异构',
text: '即使在不同的节点，由不同的开发人员，使用不同的开发语言，只要规则一致，智能合约的运算结果就一致',
icon: require('@/assets/images/mobile/f5.png')
},
{
id: 2,
title: '安全',
text: '公链、联盟链、私链跨链身份认证及管理，节点服务器的行为和指纹识别设备，可防多类攻击',
icon: require('@/assets/images/mobile/f6.png')
},
{
id: 3,
title: '绿色',
text: '用户可以委托挖矿共识节点参与投票与投票记账，即可实现代理挖矿',
icon: require('@/assets/images/mobile/f7.png')
},
{
id: 4,
title: '社区基金',
text: '区块产出中，一部分划入社区发展基金，用力助力原链社区技术研发、社区推广、税务支出、项目运营的经费支出',
icon: require('@/assets/images/mobile/f8.png')
}
]
} }
}, },
methods: {
// initSwiper() {
// }
},
mounted() { mounted() {
new Swiper('.swiper-container', { this.swiper1 = new Swiper('.swiper-container', {
loop: true, // 循环模式选项 loop: true,
// 如果需要分页器
pagination: { pagination: {
el: '.swiper-pagination', el: '.swiper-pagination',
// bulletActiveClass: 'my-bullet-active',
}, },
autoplay: { autoplay: {
delay: 3000, delay: 3000,
disableOnInteraction: false disableOnInteraction: false
} },
// virtual: true,
}) })
},
watch: {
$route() {
const _t = this.swiper1 as any
_t.destroy()
this.$nextTick(() => {
this.swiper1 = new Swiper('.swiper-container', {
loop: true,
pagination: {
el: '.swiper-pagination',
},
autoplay: {
delay: 3000,
disableOnInteraction: false
},
speed: 500,
// virtual: true,
})
})
}
} }
}) })
</script> </script>
......
src/components/mobile/m-integral.vue
View file @ 00326569
<template> <template>
<div class="m-integral mx-4"> <div class="m-integral mx-4">
<h4 class="m-title w-full text-20px text-title-color text-center pt-4 mt-4">一键发积分</h4> <h4 class="m-title w-full text-20px text-title-color text-center pt-4 mt-4">{{ $t('lang.point') }}</h4>
<h6 class="text-sm text-text-color text-center mt-2">快速安全</h6> <h6 class="text-sm text-text-color text-center mt-2">{{ $t('lang.QAS') }}</h6>
<div class="m-i-content pt-6 pb-6 px-10 relative"> <div class="m-i-content pt-6 pb-6 px-10 relative">
<img src="@/assets/images/mobile/m-in.png" alt=""> <img v-show="!enStyle" src="@/assets/images/mobile/m-in.png" alt="">
<img v-show="enStyle" src="@/assets/images/mobile/m-in-e.png" alt="">
</div> </div>
</div> </div>
</template> </template>
<script lang="ts">
import Vue from 'vue'
import lang from '@/mixin/lang'
export default Vue.extend({
mixins: [lang]
})
</script>
<style scoped> <style scoped>
.m-integral { .m-integral {
background-image: linear-gradient(to bottom, rgba(250, 251, 252, 0), rgba(255, 255, 255, 1)); background-image: linear-gradient(to bottom, rgba(250, 251, 252, 0), rgba(255, 255, 255, 1));
......
src/components/mobile/m-link.vue
View file @ 00326569
<template> <template>
<div class="m-link px-4"> <div class="m-link px-4">
<h4 class="m-title w-full text-20px text-title-color text-center pt-4 mt-4 mb-4">友情链接</h4> <h4 class="m-title w-full text-20px text-title-color text-center pt-4 mt-4 mb-4">{{ $t('lang.LINK') }}</h4>
<h6 class="text-sm text-text-color text-center mb-4">交易平台</h6> <h6 class="text-sm text-text-color text-center mb-4">{{ $t('lang.platform') }}</h6>
<ul class="m-links px-5 flex flex-wrap justify-around items-center"> <ul class="m-links px-5 flex flex-wrap justify-around items-center">
<li> <li>
<a href="http://www.hadax.com/" target="_blank"> <a href="http://www.hadax.com/" target="_blank">
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
</a> </a>
</li> </li>
</ul> </ul>
<h6 class="text-sm text-text-color text-center mt-4 mb-4">合作伙伴</h6> <h6 class="text-sm text-text-color text-center mt-4 mb-4">{{ $t('lang.partner') }}</h6>
<ul class="m-links px-5 flex flex-wrap justify-around items-center"> <ul class="m-links px-5 flex flex-wrap justify-around items-center">
<li> <li>
<a href="https://guodunc.cn/" target="_blank"> <a href="https://guodunc.cn/" target="_blank">
......
src/components/mobile/m-mechanism.vue
View file @ 00326569
<template> <template>
<div class="m-mechanism mx-4"> <div class="m-mechanism mx-4">
<h4 class="m-title w-full text-20px text-title-color text-center pt-4 mt-2 mb-7">共识机制</h4> <h4 class="m-title w-full text-20px text-title-color text-center pt-4 mt-2 mb-7">{{ $t('lang.Consensus') }}</h4>
<div class=""> <div class="">
<img src="@/assets/images/mobile/m-me.png" alt=""> <img v-show="!enStyle" src="@/assets/images/mobile/m-me.png" alt="">
<p class="m-m-text px-4 text-xs text-article-color leading-normal pt-9 pb-4">原链主网采用的是创新型的POS33共识，在传统POS共识机制的基础上引入VRF可 <img v-show="enStyle" src="@/assets/images/mobile/m-me-e.png" alt="">
验证随机函数建立的陪审团机制，其在保证去中心化的同时，能够实现区块的快速生存与验证，兼顾公信与性能。<br><br> <p class="m-m-text px-4 text-xs text-article-color leading-normal pt-9 pb-4">
原链主网各节点通过抵押YCC到区块链上获得选票，YCC与选票按10000:1的比例进行抵押，例如，抵押100000YCC可获取10张选票。<br><br> {{ $t('lang.ConT1') }}<br/><br/>
原链主网各节点用私钥对选票的种子哈希签名，计算出一个哈希值。然后引入VRF可验证随机函数，确认节点的哈希值小于设定的阈 {{ $t('lang.ConT2') }}<br/><br/>
值，则入选为陪审团成员。其中最小哈希值节点由陪审团成员投票确认，成为主法官完成出块。之后，进行下一轮陪审团选举。</p> {{ $t('lang.ConT3') }}</p>
</div> </div>
</div> </div>
</template> </template>
<script lang="ts">
import Vue from 'vue'
import lang from '@/mixin/lang'
export default Vue.extend({
mixins: [lang]
})
</script>
<style scoped> <style scoped>
.m-mechanism { .m-mechanism {
/* height: 105px; */ /* height: 105px; */
......
src/components/mobile/m-scene.vue
View file @ 00326569
<template> <template>
<div class="m-scene"> <div class="m-scene">
<h4 class="m-title w-full text-20px text-title-color text-center pt-4 mt-4 mb-6">应用场景</h4> <h4 class="m-title w-full text-20px text-title-color text-center pt-4 mt-4 mb-6">{{ this.$t('lang.scene') }}</h4>
<div class="w-full overflow-hidden"> <div class="w-full overflow-hidden">
<div class="swiper-scene"> <div class="swiper-scene">
<div class="swiper-wrapper"> <div class="swiper-wrapper">
<div v-for="item in lists" :key="item.id" class="swiper-slide"> <div v-for="item in lists" :key="item.id" class="swiper-slide">
<div class="slide-item bg-white flex flex-col justify-center item-center px-9"> <div class="slide-item bg-white flex flex-col justify-center item-center" :class="item.id === 2 ? 'px-3' : 'px-9'">
<h4 class="text-sm text-title-color text-center mb-5">{{item.title}}</h4> <h4 class="text-sm text-title-color text-center font-semibold leading-4" :class="item.id === 2 ? 'mb-2' : 'mb-5'">{{item.title}}</h4>
<p class="text-xs text-article-color text-center">{{ item.text }}</p> <p class="text-xs text-article-color text-center" :class="enStyle ? 'leading-4' : ''">{{ item.text }}</p>
</div> </div>
</div> </div>
</div> </div>
...@@ -19,71 +19,110 @@ ...@@ -19,71 +19,110 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue' import Vue from 'vue'
import { Swiper, Autoplay } from 'swiper' import { Swiper, Autoplay } from 'swiper'
import lang from '@/mixin/lang'
import 'swiper/swiper-bundle.css' import 'swiper/swiper-bundle.css'
Swiper.use([Autoplay]) Swiper.use([Autoplay])
export default Vue.extend({ export default Vue.extend({
data() { mixins: [lang],
return { computed: {
lists: [ lists() {
return [
{ {
id: 1, id: 1,
title: '溯源', title: this.$t('lang.SC1'),
text: '产品溯源、工程管理溯源等' text: this.$t('lang.SC1T')
}, },
{ {
id: 2, id: 2,
title: '商品交易 ', title: this.$t('lang.SC2'),
text: '区块链交易所、股权、债权、期货、外汇、商品等' text: this.$t('lang.SC2T')
}, },
{ {
id: 3, id: 3,
title: '政务区块链', title: this.$t('lang.SC3'),
text: '身份管理、工商登记、税务' text: this.$t('lang.SC3T')
}, },
{ {
id: 4, id: 4,
title: '供应链管理', title: this.$t('lang.SC4'),
text: '商品订单、设计、采购、制造、交货供应链全程用区块链管理' text: this.$t('lang.SC4T')
}, },
{ {
id: 5, id: 5,
title: '全球积分联盟', title: this.$t('lang.SC5'),
text: '用公链和许可链多层次区块链建立全球积分联盟' text: this.$t('lang.SC5T')
}, },
{ {
id: 6, id: 6,
title: '财务核算系统', title: this.$t('lang.SC6'),
text: '资产上链，负责上链，实时的财务核算' text: this.$t('lang.SC6T')
}, },
{ {
id: 7, id: 7,
title: '行业区块链', title: this.$t('lang.SC7'),
text: '医疗、农业、金融、健康和教育等' text: this.$t('lang.SC7T')
}, },
{ {
id: 8, id: 8,
title: '安全指令系统', title: this.$t('lang.SC8'),
text: '工业机器人4.0区块链安全指令' text: this.$t('lang.SC8T')
}, },
{ {
id: 9, id: 9,
title: '更多场景', title: this.$t('lang.SC9'),
text: '电子商务、跨境贸易、公益慈善、投票选举' text: this.$t('lang.SC9T')
}, },
] ]
}
},
data() {
return {
swiper2: {}
} }
}, },
mounted() { mounted() {
new Swiper('.swiper-scene', { console.log(this.lists)
slidesPerView : 1.5, setTimeout(() => {
centeredSlides : true, // this.$nextTick(() => {
loop: true, this.swiper2 = new Swiper('.swiper-scene', {
autoplay: { slidesPerView : 1.5,
delay: 3000, centeredSlides : true,
disableOnInteraction: false loop: true,
}, autoplay: {
virtual: true, delay: 3000,
}) disableOnInteraction: false
},
speed: 500,
observer: true,
observeSlideChildren: true,
// virtual: true,
})
}, 200)
},
beforeDestroy() {
this.swiper2 = {}
},
watch: {
$route(){
const _t = this.swiper2 as any
_t.destroy()
this.$nextTick(() => {
setTimeout(() => {
this.swiper2 = new Swiper('.swiper-scene', {
slidesPerView : 1.5,
centeredSlides : true,
loop: true,
autoplay: {
delay: 3000,
disableOnInteraction: false
},
observer:true,
observeSlideChildren:true,
// virtual: true,
})
}, 200)
})
}
} }
}) })
</script> </script>
......
src/components/mobile/menu.vue
View file @ 00326569
...@@ -10,9 +10,9 @@ ...@@ -10,9 +10,9 @@
<img src="@/assets/images/header/logo.png" width="164" alt="yuanlian"> <img src="@/assets/images/header/logo.png" width="164" alt="yuanlian">
</div> </div>
<ul class="menulist"> <ul class="menulist">
<li class="px-6 text-base text-title-color" :class="{'menu-active': $route.path === '/home'}" @click="goPage('/')">首页</li> <li class="px-6 text-base text-title-color" :class="{'menu-active': $route.path === '/home'}" @click="goPage('/')">{{ $t('lang.home') }}</li>
<li class="px-6 text-base text-title-color"><a href="http://yuanorg.oss-ap-southeast-1.aliyuncs.com/yuan_introduction.pdf" target="_blank">白皮书</a></li> <li class="px-6 text-base text-title-color"><a href="http://yuanorg.oss-ap-southeast-1.aliyuncs.com/yuan_introduction.pdf" target="_blank">{{ $t('lang.book') }}</a></li>
<li class="px-6 text-base text-title-color" :class="{'menu-active': $route.path === '/newsList' || $route.path === '/newsDetails'}" @click="goPage('/newsList')">新闻公告</li> <li class="px-6 text-base text-title-color" :class="{'menu-active': $route.path === '/newsList' || $route.path === '/newsDetails'}" @click="goPage('/newsList')">{{ $t('lang.news') }}</li>
</ul> </ul>
</Drawer> </Drawer>
</div> </div>
...@@ -33,7 +33,7 @@ export default Vue.extend({ ...@@ -33,7 +33,7 @@ export default Vue.extend({
this.$emit('close', true) this.$emit('close', true)
}, },
goPage(p: string) { goPage(p: string) {
this.$router.push({path: p}) this.$router.push({path: p, query: { lang: this.$route.query.lang }})
this.onClose() this.onClose()
} }
} }
......
src/components/mobile/wx-bar.vue
View file @ 00326569
<template> <template>
<div class=""> <div class="m-wx fixed z-50" draggable="true" ref="div" :style="{'bottom':bottom}">
<div v-show="initShow" class="m-wx-btn fixed flex items-center justify-center z-50"> <div v-show="initShow" class="m-wx-btn flex items-center justify-center z-50">
<img src="@/assets/images/mobile/wx.png" width="24" height="24" alt="" @click="handleChange"> <img src="@/assets/images/mobile/wx.png" width="24" height="24" alt="" @click="handleChange">
</div> </div>
<div v-show="!initShow" class="m-wx-box fixed flex flex-col z-50"> <div v-show="!initShow" class="m-wx-box flex flex-col z-50">
<div class="bg-white flex flex-col items-center py-2" style="margin-bottom: 5px; border-radius: 4px 0 0 0;"> <div class="bg-white flex flex-col items-center py-2" style="margin-bottom: 5px; border-radius: 4px 0 0 0;">
<img class="" src="@/assets/images/mobile/wx1.png" alt=""> <img class="" src="@/assets/images/mobile/wx1.png" alt="">
<p class="text-xs box-text" style="color: #6E7899">微信:chain-vc(发 ycc100进群)</p> <p class="text-xs box-text" style="color: #6E7899" :style="{'paddingLeft': enStyle ? '0' : '', 'textAlign': enStyle ? 'center' : ''}">{{ $t('lang.wx1') }}</p>
<img class="" src="@/assets/images/mobile/wx2.png" alt=""> <img class="" src="@/assets/images/mobile/wx2.png" alt="">
<p class="text-xs box-text" style="color: #6E7899">微信:kuangfuwu(扫一扫联系客服)</p> <p class="text-xs box-text" style="color: #6E7899" :style="{'paddingLeft': enStyle ? '0' : '', 'textAlign': enStyle ? 'center' : ''}">{{ $t('lang.wx2') }}</p>
</div> </div>
<div class="bg-white text-xs text-center leading-6" style="height: 24px; color: #6E7899; border-radius: 0 0 0 4px" @click="handleChange">收起二维码</div> <div class="bg-white text-xs text-center leading-6" style="height: 24px; color: #6E7899; border-radius: 0 0 0 4px" @click="handleChange">{{ $t('lang.close') }}</div>
</div> </div>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import Vue from 'vue' import Vue from 'vue'
import lang from '@/mixin/lang'
export default Vue.extend({ export default Vue.extend({
mixins: [lang],
data(){
return{
timer:null,
currentTop:0,
clientWidth:0,
clientHeight:0,
itemWidth: 45,
itemHeight: 40,
bottom: '50%',
}
},
props: { props: {
initShow: Boolean initShow: Boolean,
gapWidth:{
type:Number,
default:10
},
coefficientHeight:{
type:Number,
default:0.8
}
}, },
methods: { methods: {
handleChange() { handleChange() {
this.$emit('changeShow', !this.initShow) this.$emit('changeShow', !this.initShow)
} }
},
mounted() {
this.clientWidth = document.documentElement.clientWidth || document.body.clientWidth
this.clientHeight = document.documentElement.clientHeight || document.body.clientHeight
window.onresize = () => {
this.clientWidth = document.documentElement.clientWidth || document.body.clientWidth
this.clientHeight = document.documentElement.clientHeight || document.body.clientHeight
}
this.$nextTick(()=>{
const div = this.$refs.div as any;
div.addEventListener("touchstart",(e: any)=>{
e.stopPropagation();
div.style.transition = 'none';
});
div.addEventListener("touchmove",(e: any)=>{
e.preventDefault()
e.stopPropagation()
if (e.targetTouches.length === 1) {
let touch = e.targetTouches[0];
this.bottom = this.clientHeight - touch.clientY - this.itemHeight/2 + 'px';
if(parseFloat(this.bottom) <= 0) {
this.bottom = '0'
} else if (parseFloat(this.bottom) > this.clientHeight - this.itemHeight){
this.bottom = this.clientHeight - this.itemHeight + 'px'
}
}
},{ passive: false });
div.addEventListener("touchend",(e: any)=>{
e.stopPropagation();
div.style.transition = 'all 0.3s';
if(parseFloat(this.bottom) <= 0) {
this.bottom = '0'
} else if (parseFloat(this.bottom) > this.clientHeight){
this.bottom = this.clientHeight - this.itemHeight + 'px'
}
});
});
} }
}) })
</script> </script>
<style scoped> <style scoped>
.m-wx {
bottom: 50%;
right: 0;
}
.m-wx-btn { .m-wx-btn {
width: 45px; width: 45px;
height: 40px; height: 40px;
background: #fff; background: #fff;
top: 50%; /* top: 50%;
right: 0; right: 0; */
box-shadow: 0px 6px 20px 0px rgba(37, 69, 203, 0.15); box-shadow: 0px 6px 20px 0px rgba(37, 69, 203, 0.15);
border-radius: 50px 0 0 50px; border-radius: 50px 0 0 50px;
transition: 0.25s ease-in; transition: 0.25s ease-in;
} }
.m-wx-box { .m-wx-box {
width: 95px; width: 95px;
right: 0; /* right: 0;
top: 13%; bottom: 46%; */
transition: 0.25s ease-in; transition: 0.25s ease-in;
/* box-shadow: 0px 6px 20px 0px rgba(37, 69, 203, 0.15); */ /* box-shadow: 0px 6px 20px 0px rgba(37, 69, 203, 0.15); */
} }
......
src/components/pc/explain.vue
View file @ 00326569
...@@ -2,28 +2,28 @@ ...@@ -2,28 +2,28 @@
<div class="home_explain flex justify-center w-full" :class="{'en-home-explain': enStyle}"> <div class="home_explain flex justify-center w-full" :class="{'en-home-explain': enStyle}">
<div class="md:w-bodySet h-full flex "> <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="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"> <div class="flex flex-col explain_btn explain_1 relative">
<img v-show="index !== 1" class="cursor-pointer" src="@/assets/images/h-explain/ex1.png" alt="" @click="handleChange(1)"> <img class="cursor-pointer" :class="{'opacity-0': index === 1}" src="@/assets/images/h-explain/ex1.png" alt="" @click="handleChange(1)">
<img v-show="index === 1" class="cursor-pointer" src="@/assets/images/h-explain/exa1.png" alt=""> <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> <p class="text-center text-14px text-article-color" style="white-space: nowrap;">{{ $t('lang.mission') }}</p>
</div> </div>
<div class="flex flex-col explain_btn explain_2"> <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> <p class="text-center mb-4 text-14px text-article-color" style="white-space: nowrap;">{{ $t('lang.feature') }}</p>
<img v-show="index !== 2" class="cursor-pointer" src="@/assets/images/h-explain/ex2.png" alt="" @click="handleChange(2)"> <img class="cursor-pointer" :class="{'opacity-0': index === 2}" src="@/assets/images/h-explain/ex2.png" alt="" @click="handleChange(2)">
<img v-show="index === 2" class="cursor-pointer" src="@/assets/images/h-explain/exa2.png" alt=""> <img class="cursor-pointer absolute pointer-events-none" :class="{'opacity-0': index !== 2}" style="top: 37px" src="@/assets/images/h-explain/exa2.png" alt="">
</div> </div>
<div class="flex flex-col explain_btn explain_3"> <div class="flex flex-col explain_btn explain_3 relative">
<img v-show="index !== 3" class="cursor-pointer" src="@/assets/images/h-explain/ex3.png" alt="" @click="handleChange(3)"> <img class="cursor-pointer" :class="{'opacity-0': index === 3}" src="@/assets/images/h-explain/ex3.png" alt="" @click="handleChange(3)">
<img v-show="index === 3" class="cursor-pointer" src="@/assets/images/h-explain/exa3.png" alt=""> <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> <p class="text-center text-14px text-article-color" style="white-space: nowrap;">{{ $t('lang.application') }}</p>
</div> </div>
<div class="flex flex-col explain_btn explain_4"> <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> <p class="text-center mb-6 text-14px text-article-color" style="white-space: nowrap;">{{ $t('lang.reason') }}</p>
<img v-show="index !== 4" class="cursor-pointer" src="@/assets/images/h-explain/ex4.png" alt="" @click="handleChange(4)"> <img class="cursor-pointer" :class="{'opacity-0': index === 4}" src="@/assets/images/h-explain/ex4.png" alt="" @click="handleChange(4)">
<img v-show="index === 4" class="cursor-pointer" src="@/assets/images/h-explain/exa4.png" alt=""> <img class="cursor-pointer absolute pointer-events-none" :class="{'opacity-0': index !== 4}" style="top: 45px" src="@/assets/images/h-explain/exa4.png" alt="">
</div> </div>
</div> </div>
<div class="explain_r mt-4"> <div class="explain_r mt-4 flex-grow">
<explain-text :index="index" :enStyle="enStyle"></explain-text> <explain-text :index="index" :enStyle="enStyle"></explain-text>
</div> </div>
</div> </div>
...@@ -82,6 +82,7 @@ export default Vue.extend({ ...@@ -82,6 +82,7 @@ export default Vue.extend({
.explain_btn img { .explain_btn img {
width: 100%; width: 100%;
margin-bottom: 26px; margin-bottom: 26px;
transition: 0.4s ease-in-out;
} }
.explain_1 { .explain_1 {
left: 4px; left: 4px;
...@@ -110,8 +111,8 @@ export default Vue.extend({ ...@@ -110,8 +111,8 @@ export default Vue.extend({
background: #2545CB; background: #2545CB;
border-radius: 50%; border-radius: 50%;
position: absolute; position: absolute;
bottom: 50px; bottom: 44px;
right: -9px; right: -13px;
} }
.explain_3 { .explain_3 {
top: 110px; top: 110px;
......
src/components/pc/explainText.vue
View file @ 00326569
<template> <template>
<div class="explain_text"> <div class="explain_text relative">
<div v-show="index === 1"> <div class="absolute duration-500 ease-in-out" :class="{'opacity-0': index !== 1}">
<h3 class="text-18px text-left text-title-color">{{ $t('lang.mission') }}</h3> <h3 class="ex_b_title text-18px text-left text-title-color">{{ $t('lang.mission') }}</h3>
<p class="text-14px text-left text-article-color" :class="{'mt-8': !enStyle, 'mt-3': enStyle, 'leading-7': !enStyle, 'leading-normal': enStyle}"> <p class="text-14px text-left text-article-color" :class="{'mt-8': !enStyle, 'mt-3': enStyle, 'leading-7': !enStyle, 'leading-normal': enStyle}">
{{ $t('lang.missionText') }} {{ $t('lang.missionText') }}
</p> </p>
</div> </div>
<div v-show="index === 2"> <div class="absolute duration-500 ease-in-out" :class="{'opacity-0': index !== 2}">
<h3 class="text-18px text-left text-title-color">{{ $t('lang.feature') }}</h3> <h3 class="ex_b_title text-18px text-left text-title-color">{{ $t('lang.feature') }}</h3>
<p class="text-14px text-left text-article-color" :class="{'mt-8': !enStyle, 'mt-3': enStyle, 'leading-7': !enStyle, 'leading-normal': enStyle}"> <p class="text-14px text-left text-article-color" :class="{'mt-8': !enStyle, 'mt-3': enStyle, 'leading-7': !enStyle, 'leading-normal': enStyle}">
{{ $t('lang.FT1') }}<br/> {{ $t('lang.FT1') }}<br/>
{{ $t('lang.FT2') }}<br/> {{ $t('lang.FT2') }}<br/>
...@@ -17,15 +17,15 @@ ...@@ -17,15 +17,15 @@
{{ $t('lang.FT6') }} {{ $t('lang.FT6') }}
</p> </p>
</div> </div>
<div v-show="index === 3"> <div class="absolute duration-500 ease-in-out" :class="{'opacity-0': index !== 3}">
<h3 class="text-18px text-left text-title-color">{{ $t('lang.application') }}</h3> <h3 class="ex_b_title ex_b_title text-18px text-left text-title-color">{{ $t('lang.application') }}</h3>
<p class="text-14px text-left text-article-color" :class="{'mt-8': !enStyle, 'mt-3': enStyle, 'leading-7': !enStyle, 'leading-normal': enStyle}"> <p class="text-14px text-left text-article-color" :class="{'mt-8': !enStyle, 'mt-3': enStyle, 'leading-7': !enStyle, 'leading-normal': enStyle}">
{{ $t('lang.APPT') }}<br/> {{ $t('lang.APPT') }}<br/>
{{ $t('lang.APPO') }} {{ $t('lang.APPO') }}
</p> </p>
</div> </div>
<div v-show="index === 4"> <div class="absolute duration-500 ease-in-out" :class="{'opacity-0': index !== 4}">
<h3 class="text-18px text-left text-title-color">{{ $t('lang.reason') }}</h3> <h3 class="ex_b_title text-18px text-left text-title-color">{{ $t('lang.reason') }}</h3>
<p class="text-14px text-left text-article-color" :class="{'mt-8': !enStyle, 'mt-3': enStyle, 'leading-7': !enStyle, 'leading-normal': enStyle}"> <p class="text-14px text-left text-article-color" :class="{'mt-8': !enStyle, 'mt-3': enStyle, 'leading-7': !enStyle, 'leading-normal': enStyle}">
{{ $t('lang.R1') }}<br/> {{ $t('lang.R1') }}<br/>
{{ $t('lang.R2') }}<br/> {{ $t('lang.R2') }}<br/>
...@@ -53,4 +53,20 @@ export default Vue.extend({ ...@@ -53,4 +53,20 @@ export default Vue.extend({
.explain_text div { .explain_text div {
/* transition: 0.25s ease-in; */ /* transition: 0.25s ease-in; */
} }
.ex_b_title {
position: relative;
padding-left: 15px;
}
.ex_b_title::after {
content: '';
display: block;
width: 8px;
height: 8px;
background: #22356C;
border-radius: 50%;
position: absolute;
left: 1px;
top: 50%;
transform: translate3d(0, -50%, 0);
}
</style> </style>
\ No newline at end of file
src/components/pc/scene.vue
View file @ 00326569
This diff is collapsed.
src/layout/MainPage/Header.vue
View file @ 00326569
...@@ -30,7 +30,23 @@ ...@@ -30,7 +30,23 @@
<div class="logo mx-3.5"> <div class="logo mx-3.5">
<img src="@/assets/images/header/logo.png" alt="logo" width="164"> <img src="@/assets/images/header/logo.png" alt="logo" width="164">
</div> </div>
<div class="menu_btn mr-5" @click="showMenu = !showMenu"></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="中文">
<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="">
</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="英文">
<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="">
</div>
<icon-select :show="showIcon" @hidden="showIcon = false" @selectIcon="(v) => {iconType = v}"></icon-select>
</div>
<div class="menu_btn mr-5" @click="showMenu = !showMenu"></div>
</div>
</div> </div>
<Menu :isShow="showMenu" v-on:close="closeMenu"></Menu> <Menu :isShow="showMenu" v-on:close="closeMenu"></Menu>
</div> </div>
......
src/layout/MainPage/index.vue
View file @ 00326569
...@@ -2,7 +2,9 @@ ...@@ -2,7 +2,9 @@
<div :class="{'ycc_container': !isMobile}"> <div :class="{'ycc_container': !isMobile}">
<main-header></main-header> <main-header></main-header>
<div class="bg-gray-50"> <div class="bg-gray-50">
<router-view /> <keep-alive name="newsLists">
<router-view />
</keep-alive>
</div> </div>
<main-footer></main-footer> <main-footer></main-footer>
</div> </div>
......
src/style.css
View file @ 00326569
...@@ -19,4 +19,8 @@ ...@@ -19,4 +19,8 @@
background-size: 150px; background-size: 150px;
background-position: center 15px; background-position: center 15px;
background-repeat: no-repeat; background-repeat: no-repeat;
}
.swiper-slide {
transition: 0.4s ease-in-out;
} }
\ No newline at end of file
src/views/mobile/Home.vue
View file @ 00326569
...@@ -2,8 +2,8 @@ ...@@ -2,8 +2,8 @@
<div class="home flex flex-col justify-content" style="padding-top: 44px"> <div class="home flex flex-col justify-content" style="padding-top: 44px">
<div class="w-full m-header flex flex-col items-center"> <div class="w-full m-header flex flex-col items-center">
<div class="mt-7"><img src="@/assets/images/mobile/ycc.png" width="107" alt=""></div> <div class="mt-7"><img src="@/assets/images/mobile/ycc.png" width="107" alt=""></div>
<p class="text-18px tracking-wider mt-4 mb-2 font-semibold" style="color: #3D5EE9"><span class="inline-block mr-3" style="color: #FFA457">原链</span>企业级区块链SaaS平台</p> <p class="text-18px tracking-wider mt-4 font-semibold px-2 text-center" :class="{'leading-5': enStyle, 'mb-2': !enStyle, 'mb-1': enStyle}" style="color: #3D5EE9"><span class="mr-3" :class="enStyle ? 'block' : 'inline-block'" style="color: #FFA457">{{ $t('lang.YUANLIAN') }}</span>{{ $t('lang.title') }}</p>
<p class="text-14px text-footer-color font-light tracking-widest">让世界没有难做的链</p> <p class="text-14px text-footer-color font-light tracking-widest" :class="{'leading-5': enStyle}">{{ $t('lang.bannerDesc') }}</p>
</div> </div>
<wx-bar :init-show="showWx" v-on:changeShow="setShow"></wx-bar> <wx-bar :init-show="showWx" v-on:changeShow="setShow"></wx-bar>
<m-explain></m-explain> <m-explain></m-explain>
...@@ -24,8 +24,10 @@ import MMechanism from '@/components/mobile/m-mechanism.vue' ...@@ -24,8 +24,10 @@ import MMechanism from '@/components/mobile/m-mechanism.vue'
import MIntegral from '@/components/mobile/m-integral.vue' import MIntegral from '@/components/mobile/m-integral.vue'
import MScene from '@/components/mobile/m-scene.vue' import MScene from '@/components/mobile/m-scene.vue'
import MLink from '@/components/mobile/m-link.vue' import MLink from '@/components/mobile/m-link.vue'
import lang from '@/mixin/lang'
export default Vue.extend({ export default Vue.extend({
name: 'Home', name: 'Home',
mixins: [lang],
components: { components: {
WxBar, WxBar,
MExplain, MExplain,
......
src/views/mobile/newsDetails.vue
View file @ 00326569
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
</div> </div>
<div class="next-News py-5 rounded"> <div class="next-News py-5 rounded">
<h4 class="text-16px text-title-color pb-4 flex items-center font-semibold"><i class="m-icon inline-block bg-footer-color mr-2.5"></i>下一篇</h4> <h4 class="text-16px text-title-color pb-4 flex items-center font-semibold"><i class="m-icon inline-block bg-footer-color mr-2.5"></i>下一篇</h4>
<router-link tag="h4" :to="{path: '/newsDetails', query: { id: nextNews.id }}" class="text-14px text-title-color pb-1 px-6">{{ nextNews.title }}</router-link> <router-link tag="h4" :to="{path: '/newsDetails', query: { id: nextNews.id, lang: $route.query.lang }}" class="text-14px text-title-color pb-1 px-6">{{ nextNews.title }}</router-link>
<p class="text-xs text-article-color mb-2 px-6 line-clamp-2">{{ nextNews.abstract }}</p> <p class="text-xs text-article-color mb-2 px-6 line-clamp-2">{{ nextNews.abstract }}</p>
<p class="text-xs text-text-color px-6">{{ nextNews.published_time }}</p> <p class="text-xs text-text-color px-6">{{ nextNews.published_time }}</p>
</div> </div>
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
</div> </div>
<div class="bg-white px-5 pt-3 pb-2"> <div class="bg-white px-5 pt-3 pb-2">
<h4 class="text-20px text-article-color font-semibold">最新内容</h4> <h4 class="text-20px text-article-color font-semibold">最新内容</h4>
<router-link tag="div" :to="{path: '/newsDetails', query: { id: item.id }}" v-for="item in newest" :key="item.id" class="my-6"> <router-link tag="div" :to="{path: '/newsDetails', query: { id: item.id, lang: $route.query.lang }}" v-for="item in newest" :key="item.id" class="my-6">
<m-news-item :item="item"></m-news-item> <m-news-item :item="item"></m-news-item>
</router-link> </router-link>
</div> </div>
...@@ -35,6 +35,7 @@ import { getNews, getNewsDetails } from '@/service/api' ...@@ -35,6 +35,7 @@ import { getNews, getNewsDetails } from '@/service/api'
import { Spin } from "ant-design-vue" import { Spin } from "ant-design-vue"
import MNewsItem from '@/components/mobile/m-newsItem.vue' import MNewsItem from '@/components/mobile/m-newsItem.vue'
export default Vue.extend({ export default Vue.extend({
name: 'newsDetails',
data() { data() {
return { return {
isLoading: true, isLoading: true,
......
src/views/mobile/newsList.vue
View file @ 00326569
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="newslist flex flex-col items-center"> <div class="newslist flex flex-col items-center">
<Spin class="w-full h-full" :spinning="isLoading"> <Spin class="w-full h-full" :spinning="isLoading">
<div class="px-5 mb-6"> <div class="px-5 mb-6">
<router-link tag="div" :to="{path: '/newsDetails', query: { id: item.id }}" v-for="item in newsLists" :key="item.id" class="overflow-hidden rounded-sm my-6"> <router-link tag="div" :to="{path: '/newsDetails', query: { id: item.id, lang: $route.query.lang }}" v-for="item in newsLists" :key="item.id" class="overflow-hidden rounded-sm my-6">
<m-news-item :item="item"></m-news-item> <m-news-item :item="item"></m-news-item>
</router-link> </router-link>
<div v-show="newsLists.length < allLists.length" class="load-more text-xs text-footer-color text-center" @click="handleChange()">加载更多</div> <div v-show="newsLists.length < allLists.length" class="load-more text-xs text-footer-color text-center" @click="handleChange()">加载更多</div>
...@@ -17,6 +17,7 @@ import { Spin } from "ant-design-vue" ...@@ -17,6 +17,7 @@ import { Spin } from "ant-design-vue"
import { getNews } from '@/service/api' import { getNews } from '@/service/api'
import MNewsItem from '@/components/mobile/m-newsItem.vue' import MNewsItem from '@/components/mobile/m-newsItem.vue'
export default Vue.extend({ export default Vue.extend({
name: 'newsLists',
data() { data() {
return { return {
total: 0, total: 0,
...@@ -58,8 +59,11 @@ export default Vue.extend({ ...@@ -58,8 +59,11 @@ export default Vue.extend({
this.getNewsList() this.getNewsList()
}, },
watch: { watch: {
$route() { $route(n, o) {
this.currentPage = 1 // this.currentPage = 1
if (n.query.lang !== o.query.lang) {
this.currentPage = 1
}
this.getNewsList() this.getNewsList()
} }
} }
......
src/views/pc/Home.vue
View file @ 00326569
...@@ -70,7 +70,7 @@ ...@@ -70,7 +70,7 @@
</a> </a>
</div> </div>
<div> <div>
<Tooltip title="邮箱: yuanlian@yuan.org" placement="top"> <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/email.png" alt="">
<img v-show="isStyleChange" class="cursor-pointer" src="@/assets/images/footer/email2.png" alt=""> <img v-show="isStyleChange" class="cursor-pointer" src="@/assets/images/footer/email2.png" alt="">
</Tooltip> </Tooltip>
......
src/views/pc/newsDetails.vue
View file @ 00326569
...@@ -45,6 +45,7 @@ import Vue from 'vue' ...@@ -45,6 +45,7 @@ import Vue from 'vue'
import { getNews, getNewsDetails } from '@/service/api' import { getNews, getNewsDetails } from '@/service/api'
import { Spin } from "ant-design-vue" import { Spin } from "ant-design-vue"
export default Vue.extend({ export default Vue.extend({
name: 'newsDetails',
data() { data() {
return { return {
isLoading: true, isLoading: true,
......
src/views/pc/newsList.vue
View file @ 00326569
...@@ -27,6 +27,7 @@ import NewsItem from '@/components/pc/newsItem.vue'; ...@@ -27,6 +27,7 @@ import NewsItem from '@/components/pc/newsItem.vue';
import { Pagination, Spin } from "ant-design-vue"; import { Pagination, Spin } from "ant-design-vue";
import {getNews} from '@/service/api' import {getNews} from '@/service/api'
export default Vue.extend({ export default Vue.extend({
name: 'newsLists',
data() { data() {
return { return {
total: 0, total: 0,
...@@ -68,8 +69,11 @@ export default Vue.extend({ ...@@ -68,8 +69,11 @@ export default Vue.extend({
this.getNewsList() this.getNewsList()
}, },
watch: { watch: {
$route() { $route(n, o) {
this.currentPage = 1 // this.currentPage = 1
if (n.query.lang !== o.query.lang) {
this.currentPage = 1
}
this.getNewsList() this.getNewsList()
} }
} }
......
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