Skip to content

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

i18n调整

parent 58c6f01c
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 991 additions and 145 deletions
package.json
View file @ b556620a
...@@ -17,6 +17,7 @@ ...@@ -17,6 +17,7 @@
"register-service-worker": "^1.7.2", "register-service-worker": "^1.7.2",
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.1.0", "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.1.0",
"vue": "^2.6.11", "vue": "^2.6.11",
"swiper": "^6.6.1",
"vue-i18n": "^8.24.4", "vue-i18n": "^8.24.4",
"vue-router": "^3.2.0", "vue-router": "^3.2.0",
"vuex": "^3.4.0" "vuex": "^3.4.0"
......
public/index.html
View file @ b556620a
...@@ -5,7 +5,8 @@ ...@@ -5,7 +5,8 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title> <!-- <title><%= htmlWebpackPlugin.options.title %></title> -->
<title>原链YCC——企业级区块链SaaS平台</title>
</head> </head>
<body> <body>
<noscript> <noscript>
......
src/assets/lang/en.ts
View file @ b556620a
export const lang = { export const lang = {
home: 'Home', home: 'Home',
book: 'White Paper', book: 'White Paper',
news: 'News', news: 'Press Releases',
email: 'email', email: 'email',
zh: 'Chinese', zh: 'Chinese',
en: 'English', en: 'English',
YUANLIAN: 'YUANLIAN',
title: 'Enterprise Blockchain SaaS Platform',
bannerDesc: 'Making Blockchain Easy in the World',
whatIs: "What's YUANCHAIN?",
mission: 'Mission',
missionText: 'YUANCHAIN (YCC）a new generation of basic application public chains. Based on the YUANCHAIN public chain network, it is naturally suitable for building application contracts such as Defi, NFT, Dao, etc. By building an innovative POS33 consensus mechanism, YUANCHAIN is able to achieve fast block verification and generation while ensuring decentralization, balancing credibility and performance. To address the ecosystem expansion of application-based public chain, the YUANCHAIN supports the expansion of a two-layer and multi-chain architecture to create parallel public parachain on the basis of themain chain consensus, to improve performance and ecosystem expansion.',
feature: 'Technical features',
FT1: '1.Main chain stability is similar to the Bitcoin, without virtual machines and has high concurrency, the TPS can reach 10,000 levels in the future.',
FT2: '2.The primary hash logs on the parachain are written to the main chain, ensuring it is tamper-proof.',
FT3: '3.Smart contracts and virtual machines can be used flexibly on parachains, with no impact to the stability and security of the main chain.',
FT4: '4.The cross-chain interaction between the parachain and the main chain is efficient and stable, balancing the authority of the main chain with the diversity of the parachain.',
FT5: '5.POS33+BFT, the innovative consensus algorithm, selects some coin-holding nodes as block producers and block validation nodes, which is similar to the jury system, balancing fairness and efficient consensus.',
FT6: '6.YUANCHAIN supports the cross-chain bridge to achieve cross-chain transaction with Bitcoin and Ether network.',
application: 'Applications',
APPT: 'Technology supports: DeFi, NFT, social tokens, IOU note, assets on chain and trading, points system, preservation and traceability system, wallets, etc.',
APPO: 'Potential application areas: flowers, gifts, mobile phones, energy saving, pets, catering, environmental protection, automobiles, home appliances, clothing, electricity, health, education, construction, real estate, trade, artwork, chat, public security, courts, government affairs, etc.',
reason: 'Why do you use YUANCHAIN?',
R1: '1.Easy to use and accessible.',
R2: '2.Strong bottom architecture technical and application teams support and maintain. ',
R3: '3.Open ecosystem with technology support, maintained by the core team.',
R4: '4.YUANCHAIN ecosystem is large in scale and coverage, which facilitates the development of individuals and SMEs.',
R5: '5.Absorbing domestic and foreign technology, and 100% owning independent and controllable blockchain technology by Chinese team with no foreign technology restrictions on upgrading and maintenance.',
R6: '6.YUANCHAIN has issued 10 billion tokens and 480 million tokens are used for mining per year. The mining allocation ratio is similar to Ether, as 60% belongs to the holders and 40% to the development fund, in order to avoid insufficient funding for research and development, and to ensure perpetual operation.',
R7: 'Considering charity, taxation, and government regulation to develop in harmony with government and community.',
Feature: 'Features',
flexible: 'Flexible',
FText: 'When there is a smart contract bug of the application, hot swappable smart contract can be achieved to fix the bug in time, control the damage and resist forking',
cross: 'Cross-chain',
CText: 'YUANCHAIN system supports the barrier-free circulation of digital assets and currencies among the public chain, consortium chain and private chain.',
latency: 'Low latency',
LText: 'The minimum block interval is merely 1 second, which can be used in high performance scenarios, such as financial exchanges, intelligent robots, Industry 4.0, big data processing, etc.',
concurrency: 'High concurrency',
CCText: 'Public chain concurrency ＞ 10,000 TPS, consortium and private chain concurrency ＞ 100,000 TPS',
heterogeneous: 'Heterogeneous',
HeText: 'Even at different nodes, by different developers, using different development languages, the result of a smart contract is the same as long as the rules are consistent.',
security: 'Security',
SecText: 'Cross-chain identity authentication and management for public, consortium and private chains, as well as the behavior of the node server and fingerprint identification equipment can prevent multiple types of attacks.',
environment: 'Environmentally friendly',
EnvText: 'Users can delegate mining consensus nodes to participate in voting and bookkeeping, which enables proxy mining.',
fund: 'Community Fund',
FundText: 'Part of the block generation is allocated to the Community Development Fund, which assists the YUANCHAIN community in technology research and development, community promotion, tax expenditures, and project operation expenditures.',
Consensus: 'Consensus Mechanism',
ConT1: 'YUANCHAIN mainnet uses the innovative POS33 consensus mechanism. Introducing A jury mechanism built by the verifiable random function (VRF) on the basis of the traditional POS consensus mechanism, which can achieve rapid block generation and verification while ensuring decentralization, balancing credibility and performance.',
ConT2: 'Each node of YUANCHAIN mainnet obtains votes by pledging YCC on the blockchain. YCC and votes are pledged in the ratio of 10000:1. For example, users pledge 100,000 YCC to obtain 10 votes.',
ConT3: 'Each node of YUANCHAIN mainnet signs the seed hash of the vote with its private key and calculates a hash value. Then a verifiable random function（VRF）is introduced to confirm that the node with a hash value less than a set threshold can be selected as a jury member. The node with the smallest hash value is confirmed by a vote of the jury members and completes the block generation after becoming the main judge. After that, the next round of jury election will be conducted.',
point: 'One click to issue points',
QAS: 'Quick and safe',
QAS1: '1.Enter the business name',
QAS2: '2.Automatic generation /input of point abbreviations',
QAS3: '3.No duplicate names reviewed by the system',
QAS4: '4.Pay issuance fees',
QAS5: '5.Points into the wallet',
scene: 'Application Scenarios',
SC1: 'Blockchain Traceability',
SC1T: 'Product traceability, project management traceability, etc.',
SC2: 'Supply Chain Management',
SC2T: 'The entire supply chain of product orders, design, procurement, manufacturing and delivery can be managed by blockchain.',
SC3: 'Commodity Trading',
SC3T: 'Blockchain exchanges, equity, debt, futures, forex, commodities, etc.',
SC4: 'Global Points Alliance',
SC4T: 'Establishing a globa lpoints alliance with a multi-layered blockchain of public and permission chains',
SC5: 'Blockchain for Government',
SC5T: 'Identity management, business registration, taxation, etc.',
SC6: 'Financial Accounting System',
SC6T: 'Assets and liabilities are on the blockchain for real-time financial accounting',
SC7: 'Industry Blockchain',
SC7T: 'Medical, agricultural, financial, health, education, etc.',
SC8: 'Security Instruction System',
SC8T: 'Blockchain security commands by Industrial Robot 4.0',
SC9: 'More Scenarios',
SC9T: 'E-commerce, cross-border trade, charity, voting elections, etc.',
LINK: 'LINKS',
platform: 'Trading Platform',
partner: 'Partners',
BNAI: 'Blockchain News and Information',
community: 'Community', community: 'Community',
bit: '8bit', bit: '8bit',
newestInfo: 'Newest', newestInfo: 'Newest',
......
src/assets/lang/zh.ts
View file @ b556620a
...@@ -5,6 +5,81 @@ export const lang = { ...@@ -5,6 +5,81 @@ export const lang = {
email: '合作邮箱', email: '合作邮箱',
zh: '中文', zh: '中文',
en: '英文', en: '英文',
YUANLIAN: '原链',
title: '企业级区块链SaaS平台',
bannerDesc: '让世界没有难做的链',
whatIs: '什么是原链?',
mission: '使命',
missionText: '原链YCC新一代基础型应用公链。基于原链YCC公链网络，天然适合构建 Defi、NFT、Dao等应用合约。原链YCC通过构建创新性的POS33共识机制，其在保证去中心化的同时，能够实现区块的快速验证与生成，兼顾公信与性能。为满足应用型公链生态扩建，原链YCC支持双层多链区块链架构拓展，在主链共识的基础上，打造平行公链，实现性能提升，生态扩展。',
feature: '原链YCC技术特点',
FT1: '1. 主链稳定性类比比特币，无虚拟机，高并发，未来每秒TPS可达万级别；',
FT2: '2. 平行链主要哈希日志写入主链，确保不可篡改；',
FT3: '3. 可在平行链上灵活使用智能合约及虚拟机，不会影响主链的稳定及安全；',
FT4: '4. 平行链和主链跨链互动高效稳定，兼顾了主链的权威性及平行链的多样性；',
FT5: '5. 共识算法创新POS33+BFT，选取部分持币节点作为区块生产者和区块验证节点，类似陪审团制，兼顾公正及高效的共识；',
FT6: '6. 原链支持跨链桥，可与比特币和以太坊网络实现跨链代币交易。',
application: '原链YCC应用',
APPT: '技术支持：Defi、NFT、社交代币、企业白条、资产上链及交易、积分商城、溯源存证、钱包等。',
APPO: '潜在应用领域：鲜花、礼品、手机、节能、宠物、餐饮、环保、汽车、家电、服装、电力、健康、教育、建筑、地产、贸易、艺术品、聊天、公安、法院、政务等。',
reason: '为什么上原链YCC ',
R1: '1. 简单易用，上链无障碍；',
R2: '2. 百人底层技术及应用团队支持维护；',
R3: '3. 全生态技术开放支持，核心团队维护；',
R4: '4. 原链生态规模大，覆盖广，利于个人和中小企业发展；',
R5: '5. 吸取国内外技术优势，由中国团队100%掌握自主可控的区块链技术，升级和维护不受国外技术限制；',
R6: '6. 原链已发行100亿个，每年固定挖矿4.8亿个，挖矿分配比例类似以太坊，60%归持币者，40%归发展基金，避免研发经费不足，永续经营；',
R7: '7. 考虑公益、税收及政府监管，与政府和社会和谐发展。',
Feature: '原链的特点',
flexible: '灵活',
FText: '当应用的智能合约出现BUG,原链可以热替换智能合约，及时修复BUG,控制损失，拒绝分叉',
cross: '跨链',
CText: '原链系统支持公链、联盟链、私链间数字资产和数字货币在不同链上无障碍流通',
latency: '低延时',
LText: '最小区块间隔仅1S,可应用于金融交易所、智能机器人、工业4.0、大数据处理等高性能要求场景',
concurrency: '高并发',
CCText: '公链并发量＞10000笔/秒，联盟链、私链并发量＞100000笔/秒',
heterogeneous: '异构',
HeText: '即使在不同的节点，由不同的开发人员，使用不同的开发语言，只要规则一致，智能合约的运算结果就一致。',
security: '安全',
SecText: '公链、联盟链、私链跨链身份认证及管理，节点服务器的行为和指纹识别设备，可防多类攻击。',
environment: '绿色',
EnvText: '用户可以委托挖矿共识节点参与投票与投票记账，即可实现代理挖矿。',
fund: '社区基金',
FundText: '区块产出中，一部分划入社区发展基金，用于助力原链社区技术研发、社区推广、税务支出、项目运营的经费支出。',
Consensus: '共识机制',
ConT1: '原链主网采用的是创新型的POS33共识，在传统POS共识机制的基础上引入VRF可验证随机函数建立的陪审团机制，其在保证去中心化的同时，能够实现区块的快速生成与验证，兼顾公信与性能。',
ConT2: '原链主网各节点通过抵押YCC到区块链上获得选票，YCC与选票按10000:1的比例进行抵押，例如，抵押100000YCC可获取10张选票。',
ConT3: '原链主网各节点用私钥对选票的种子哈希签名，计算出一个哈希值。然后引入VRF可验证随机函数，确认节点的哈希值小于设定的阈值，则入选为陪审团成员。其中最小哈希值节点由陪审团成员投票确认，成为主法官完成出块。之后，进行下一轮陪审团选举。',
point: '一键发积分',
QAS: '快速安全',
QAS1: '1.输入企业名称',
QAS2: '2.自动生成/输入积分简称',
QAS3: '3.系统审核无重名',
QAS4: '4.支付发行费用',
QAS5: '5.积分进入钱包',
scene: '应用场景',
SC1: '溯源',
SC1T: '产品溯源、工程管理溯源等',
SC2: '供应链管理',
SC2T: '商品订单、设计、釆购、制造、交货供应链，全程用区块链管理',
SC3: '商品交易',
SC3T: '区块链交易所、股权、债权、期货、外汇、商品等',
SC4: '全球积分联盟',
SC4T: '用公链和许可链多层次区块链建立全球积分联盟',
SC5: '政务区块链',
SC5T: '身份管理、工商登记、税务',
SC6: '财务核算系统',
SC6T: '资产上链，负债上链，实时的财务核算',
SC7: '行业区块链',
SC7T: '医疗、农业、金融、健康和教育等',
SC8: '安全指令系统',
SC8T: '工业机器人4.0区块链安全指令',
SC9: '更多场景',
SC9T: '电子商务、跨境贸易、公益慈善、投票选举',
LINK: '友情链接',
platform: '交易平台',
partner: '合作伙伴',
BNAI: '区块链新闻资讯',
community: '社区', community: '社区',
bit: '巴比特', bit: '巴比特',
newestInfo: '最新消息', newestInfo: '最新消息',
......
src/components/iconSelect.vue
View file @ b556620a
...@@ -46,6 +46,11 @@ export default Vue.extend({ ...@@ -46,6 +46,11 @@ export default Vue.extend({
// } // }
// } // }
// }) // })
},
watch: {
// $route() {
// }
} }
}) })
</script> </script>
......
src/components/mobile/m-explain.vue 0 → 100644
View file @ b556620a
<template>
<div class="m-explain mt-3 px-4">
<h4 class="m-title w-full text-20px text-title-color text-center pt-4">什么是原链？</h4>
<div class="m-explain-btn flex justify-between px-5">
<div class="e-btn flex items-center justify-center">
<img v-show="index !== 1" class="cursor-pointer" 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="">
</div>
<div class="e-btn flex items-center justify-center">
<img v-show="index !== 2" class="cursor-pointer" 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="">
</div>
<div class="e-btn flex items-center justify-center">
<img v-show="index !== 3" class="cursor-pointer" 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="">
</div>
<div class="e-btn flex items-center justify-center">
<img v-show="index !== 4" class="cursor-pointer" 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="">
</div>
</div>
<div class="explain_b px-5">
<m-explain-text :index="index"></m-explain-text>
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import MExplainText from '@/components/mobile/m-explainText.vue'
export default Vue.extend({
components: {
MExplainText
},
data() {
return {
index: 1,
timer: 0
}
},
methods: {
handleChange(v: number) {
this.index = v
if (this.timer) clearInterval(this.timer)
this.timer = setInterval(() => {
this.index < 4 ? this.index++ : this.index = 1
}, 4000)
}
},
created() {
this.timer = setInterval(() => {
this.index < 4 ? this.index++ : this.index = 1
}, 4000)
},
beforeDestroy() {
clearInterval(this.timer)
}
})
</script>
<style scoped>
.m-explain-btn {
height: 105px;
background-image: url(../../assets/images/mobile/m-ex-b.png);
background-size: 100%;
background-position: 0 0;
background-repeat: no-repeat;
}
.e-btn {
width: 50px;
}
.explain_b {
height: 270px;
background-image: url(../../assets/images/mobile/ex-bg.png);
background-size: 100%;
background-position: 0 bottom;
background-repeat: no-repeat;
}
</style>
\ No newline at end of file
src/components/mobile/m-explainText.vue 0 → 100644
View file @ b556620a
<template>
<div class="m-explain-text">
<div v-show="index === 1">
<h3 class="text-14px text-left text-title-color">原链YCC使命</h3>
<p class="text-xs text-left mt-1 leading-5 text-article-color">
原链YCC新一代基础型应用公链。基于原链YCC公链网络，天然适合构建Defi、NFT、Dao等应用合约。
原链YCC通过构建创新性的POS33共识机制，其在保证去中心化的同时，能够实现区块的快速验证与
生成，兼顾公信与性能。为满足应用型公链生态扩建，原链YCC支持双层多链区块链架构拓展，在主链共
识的基础上，打造平行公链，实现性能提升，生态扩展。
</p>
</div>
<div v-show="index === 2">
<h3 class="text-14px text-left text-title-color">原链YCC技术特点</h3>
<p class="text-xs text-left mt-1 leading-5 text-article-color">
1.主链稳定性类比比特币，无虚拟机，高并发，未来每秒TPS可达万级别；<br/>
2.平行链主要哈希日志写入主链，确保不可篡改；<br/>
3.可在平行链上灵活使用智能合约及虚拟机，不会影响主链的稳定及安全；<br/>
4.平行链和主链跨链互动高效稳定，兼顾了主链的权威性及平行链的多样性；<br/>
5.共识算法创新POS33+BFT，选取部分持币节点作为区块生产者和区块验证节点，类似陪审团制，兼顾公正及高效的共识；<br/>
6.原链支持跨链桥，可与比特币和以太坊网络实现跨链代币交易。
</p>
</div>
<div v-show="index === 3">
<h3 class="text-14px text-left text-title-color">原链YCC应用</h3>
<p class="text-xs text-left mt-1 leading-5 text-article-color">
技术支持：Defi、NFT、社交代币、企业白条、资产上链及交易、积分商城、溯源存证、钱包等。<br/>
潜在应用领域：鲜花、礼品、手机、节能、宠物、餐饮、环保、汽车、家电、服装、电力、健康、教育、
建筑、地产、贸易、艺术品、聊天、公安法院、政务等。
</p>
</div>
<div v-show="index === 4">
<h3 class="text-14px text-left text-title-color">为什么上原链YCC</h3>
<p class="text-xs text-left mt-1 leading-5 text-article-color">
1.简单易用，上链无障碍；<br/>
2.百人底层技术及应用团队支持维护；<br/>
3.全生态技术开放支持，核心团队维护； <br/>
4.原链生态规模大，覆盖广，利于个人和中小企业发展；<br/>
5.吸取国内外技术优势，由中国团队100%掌握自主可控的区块链技术，升级和维护不受国外技术限制;<br/>
6.原链已发行100亿个，每年固定挖矿4.8亿个，挖矿分配比例类似以太坊，60%归持币者，40%归发展基金，避免研发经费不足，永续经营;<br/>
7.考虑公益、税收及政府监管、与政府和社会和谐发展。
</p>
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
props: {
index: Number
}
})
</script>
<style scoped>
/* .m-explain-text {
height: 270px;
background-image: url(../../assets/images/mobile/ex-bg.png);
background-size: 100%;
background-position: 0 bottom;
background-repeat: no-repeat;
} */
</style>
\ No newline at end of file
src/components/mobile/m-feature.vue 0 → 100644
View file @ b556620a
<template>
<div class="m-feature">
<h4 class="m-title w-full text-20px text-title-color text-center pt-4 mt-2 mb-7">原链的特点</h4>
<div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide flex flex-wrap justify-between px-4">
<div v-for="item in block1" :key="item.id" class="m-f-block bg-white px-3 py-5 mb-3">
<h4 class="text-sm text-title-color mb-5 font-semibold">
<img class="w-7 inline-block" :src="item.icon" alt="">
{{ item.title }}</h4>
<p class="text-xs text-article-color leading-relaxed">{{ item.text }}</p>
</div>
</div>
<div class="swiper-slide flex flex-wrap justify-between px-4">
<div v-for="item in block2" :key="item.id" class="m-f-block bg-white px-3 py-5 mb-3">
<h4 class="text-sm text-title-color mb-5 font-semibold">
<img class="w-7 inline-block" :src="item.icon" alt="">
{{ item.title }}</h4>
<p class="text-xs text-article-color leading-relaxed">{{ item.text }}</p>
</div>
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
</div>
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import Swiper from 'swiper'
import 'swiper/swiper-bundle.css'
export default Vue.extend({
data() {
return {
block1: [
{
id: 1,
title: '灵活',
text: '当应用的智能合约出现BUG，原链可以热替换智能合约，及时修复BUG，控制损失，拒绝分叉',
icon: require('@/assets/images/h-feature/f1.png')
},
{
id: 2,
title: '跨链',
text: '原链系统支持公链、联盟链、私链间数字资产和数字货币在不同链上无障碍流通',
icon: require('@/assets/images/h-feature/f2.png')
},
{
id: 3,
title: '低延时',
text: '最小区块间隔仅1s,可应用于金融交易所、智能机器人、工业4.0、大数据处理等高性能要求场景',
icon: require('@/assets/images/h-feature/f3.png')
},
{
id: 4,
title: '高并发',
text: '公链并发量＞10000笔/秒，联盟链、私链并发量＞100000笔/秒',
icon: require('@/assets/images/h-feature/f4.png')
}
],
block2: [
{
id: 1,
title: '异构',
text: '即使在不同的节点，由不同的开发人员，使用不同的开发语言，只要规则一致，智能合约的运算结果就一致',
icon: require('@/assets/images/h-feature/f5.png')
},
{
id: 2,
title: '安全',
text: '公链、联盟链、私链跨链身份认证及管理，节点服务器的行为和指纹识别设备，可防多类攻击',
icon: require('@/assets/images/h-feature/f6.png')
},
{
id: 3,
title: '绿色',
text: '用户可以委托挖矿共识节点参与投票与投票记账，即可实现代理挖矿',
icon: require('@/assets/images/h-feature/f7.png')
},
{
id: 4,
title: '社区基金',
text: '区块产出中，一部分划入社区发展基金，用力助力原链社区技术研发、社区推广、税务支出、项目运营的经费支出',
icon: require('@/assets/images/h-feature/f8.png')
}
]
}
},
methods: {
// initSwiper() {
// }
},
mounted() {
new Swiper('.swiper-container', {
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
autoplay: true
})
}
})
</script>
<style scoped>
.m-f-block {
width: 48.5%;
height: 175px;
}
</style>
\ No newline at end of file
src/components/mobile/m-integral.vue 0 → 100644
View file @ b556620a
<template>
<div class="m-integral mx-4">
<h4 class="m-title w-full text-20px text-title-color text-center pt-4 mt-4">一键发积分</h4>
<h6 class="text-sm text-text-color text-center mt-2">快速安全</h6>
<div class="m-i-content pt-20 pb-16 px-10 relative">
<img src="@/assets/images/mobile/m-in.png" alt="">
<div class="m-dot m-dot1 flex flex-col items-center absolute" style="left: 17%; top: 30%">
<img src="@/assets/images/mobile/mi1.png" alt="">
<p class="text-xs text-article-color">1.输入企业名称</p>
</div>
<div class="m-dot m-dot2 flex flex-col items-center absolute" style="left: 107px; top: 32px">
<p class="text-xs text-article-color">2.自动生成/输入积分简称</p>
<img src="@/assets/images/mobile/mi2.png" alt="">
</div>
<div class="m-dot m-dot2 flex flex-col items-center absolute" style="left: 188px; top: 104px">
<img src="@/assets/images/mobile/mi3.png" alt="">
<p class="text-xs text-article-color">3.系统审核无重名</p>
</div>
<div class="m-dot m-dot1 flex flex-col items-center absolute" style="left: 96px; top: 168px">
<img src="@/assets/images/mobile/mi4.png" alt="">
<p class="text-xs text-article-color">4.支付发行费用</p>
</div>
<div class="m-dot m-dot1 flex flex-col items-center absolute" style="left: 154px; top: 235px">
<img src="@/assets/images/mobile/mi5.png" alt="">
<p class="text-xs text-article-color">5.积分进入钱包</p>
</div>
</div>
</div>
</template>
<style scoped>
.m-integral {
background-image: linear-gradient(to bottom, rgba(250, 251, 252, 0), rgba(255, 255, 255, 1));
}
.m-dot img {
width: 22px;
height: 22px;
}
.m-dot1::after {
content: '';
display: block;
width: 1px;
height: 12px;
background-image: linear-gradient(to bottom, #9BACD5 50%, transparent 50%);
background-size: 1px 7px;
background-repeat: repeat-y;
position: absolute;
top: -9px;
left: 50%;
transform: translateX(-50%);
}
.m-dot2::after {
content: '';
display: block;
width: 1px;
height: 12px;
background-image: linear-gradient(to bottom, #9BACD5 50%, transparent 50%);
background-size: 1px 7px;
background-repeat: repeat-y;
position: absolute;
bottom: -9px;
left: 50%;
transform: translateX(-50%);
}
</style>
\ No newline at end of file
src/components/mobile/m-link.vue 0 → 100644
View file @ b556620a
<template>
<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>
<h6 class="text-sm text-text-color text-center mb-4">交易平台</h6>
<ul class="m-links px-5 flex flex-wrap justify-around items-center">
<li>
<a href="http://www.hadax.com/" target="_blank">
<img src="@/assets/images/mobile/hadax.png" alt="hadax">
</a>
</li>
<li>
<a href="https://www.hitbtc.com/" target="_blank">
<img src="@/assets/images/mobile/hitbtc.png" alt="hitbtc">
</a>
</li>
<li>
<a href="http://www.hotbit.io/" target="_blank">
<img src="@/assets/images/mobile/hb.png" alt="hotbit">
</a>
</li>
<li>
<a href="https://www.zhaobi.site/" target="_blank">
<img src="@/assets/images/mobile/zb.png" alt="zhaobi">
</a>
</li>
</ul>
<h6 class="text-sm text-text-color text-center mt-4 mb-4">合作伙伴</h6>
<ul class="m-links px-5 flex flex-wrap justify-around items-center">
<li>
<a href="https://guodunc.cn/" target="_blank">
<img src="@/assets/images/mobile/gd.png" alt="guodun">
</a>
</li>
<li>
<a href="https://www.feixiaohao.com/" target="_blank">
<img src="@/assets/images/mobile/fxh.png" alt="feixiaohao">
</a>
</li>
<li>
<a href="https://www.mytokencap.com/" target="_blank">
<img src="@/assets/images/mobile/mt.png" alt="mytoken">
</a>
</li>
<li>
<a href="https://bitgo.cc/" target="_blank">
<img src="@/assets/images/mobile/bitgo.png" alt="bitgo">
</a>
</li>
</ul>
</div>
</template>
<style scoped>
.m-links li a img {
width: 120px;
}
.m-links li:nth-of-type(n-2) {
margin-bottom: 20px;
}
</style>
\ No newline at end of file
src/components/mobile/m-mechanism.vue 0 → 100644
View file @ b556620a
<template>
<div class="m-mechanism px-4">
<h4 class="m-title w-full text-20px text-title-color text-center pt-4 mt-2 mb-7">共识机制</h4>
<div class="bg-white">
<img 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可
验证随机函数建立的陪审团机制，其在保证去中心化的同时，能够实现区块的快速生存与验证，兼顾公信与性能。<br><br>
原链主网各节点通过抵押YCC到区块链上获得选票，YCC与选票按10000:1的比例进行抵押，例如，抵押100000YCC可获取10张选票。<br><br>
原链主网各节点用私钥对选票的种子哈希签名，计算出一个哈希值。然后引入VRF可验证随机函数，确认节点的哈希值小于设定的阈
值，则入选为陪审团成员。其中最小哈希值节点由陪审团成员投票确认，成为主法官完成出块。之后，进行下一轮陪审团选举。</p>
</div>
</div>
</template>
<style scoped>
.m-m-text {
/* height: 105px; */
background-image: url(../../assets/images/mobile/m-m.png);
background-size: 100%;
background-position: 0 bottom;
background-repeat: no-repeat;
}
</style>
\ No newline at end of file
src/components/mobile/m-scene.vue 0 → 100644
View file @ b556620a
<template>
<div class="m-scene">
<h4 class="m-title w-full text-20px text-title-color text-center pt-4 mt-4 mb-6">应用场景</h4>
<div class="w-full overflow-hidden">
<div class="swiper-scene">
<div class="swiper-wrapper">
<div v-for="item in lists" :key="item.id" class="swiper-slide">
<div class="bg-white flex flex-col justify-center item-center px-9">
<h4 class="text-sm text-title-color text-center font-semibold mb-5">{{item.title}}</h4>
<p class="text-xs text-article-color text-center">{{ item.text }}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import Swiper from 'swiper'
import 'swiper/swiper-bundle.css'
export default Vue.extend({
data() {
return {
lists: [
{
id: 1,
title: '溯源',
text: '产品溯源、工程管理溯源等'
},
{
id: 2,
title: '商品交易 ',
text: '区块链交易所、股权、债权、期货、外汇、商品等'
},
{
id: 3,
title: '政务区块链',
text: '身份管理、工商登记、税务'
},
{
id: 4,
title: '供应链管理',
text: '商品订单、设计、采购、制造、交货供应链全程用区块链管理'
},
{
id: 5,
title: '全球积分联盟',
text: '用公链和许可链多层次区块链建立全球积分联盟'
},
{
id: 6,
title: '财务核算系统',
text: '资产上链，负责上链，实时的财务核算'
},
{
id: 7,
title: '行业区块链',
text: '医疗、农业、金融、健康和教育等'
},
{
id: 8,
title: '安全指令系统',
text: '工业机器人4.0区块链安全指令'
},
{
id: 9,
title: '更多场景',
text: '电子商务、跨境贸易、公益慈善、投票选举'
},
]
}
},
mounted() {
new Swiper('.swiper-scene', {
slidesPerView : 2,
centeredSlides : true,
loop: true, // 循环模式选项
autoplay: true,
virtual: true,
})
}
})
</script>
<style scoped>
.swiper-slide div {
height: 145px;
margin: 8px;
}
.swiper-slide {
transition: 0.2s ease-in;
}
.swiper-slide-active {
transform: scale(1.1);
transform-origin: center center;
}
</style>
\ No newline at end of file
src/components/mobile/menu.vue
View file @ b556620a
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
</div> </div>
<ul class="menulist"> <ul class="menulist">
<li class="px-6 text-article-color" :class="{'menu-active': $route.path === '/home'}" @click="goPage('/')">首页</li> <li class="px-6 text-article-color" :class="{'menu-active': $route.path === '/home'}" @click="goPage('/')">首页</li>
<li class="px-6 text-article-color">白皮书</li> <li class="px-6 text-article-color"><a href="http://yuanorg.oss-ap-southeast-1.aliyuncs.com/yuan_introduction.pdf" target="_blank">白皮书</a></li>
<li class="px-6 text-article-color" :class="{'menu-active': $route.path === '/newsList'}" @click="goPage('/newsList')">新闻公告</li> <li class="px-6 text-article-color" :class="{'menu-active': $route.path === '/newsList'}" @click="goPage('/newsList')">新闻公告</li>
</ul> </ul>
</Drawer> </Drawer>
......
src/components/mobile/wx-bar.vue 0 → 100644
View file @ b556620a
<template>
<div>
<div class="m-wx-btn fixed flex items-center justify-center z-50" :style="{'opacity': initShow ? '1' : '0'}">
<img src="@/assets/images/mobile/wx.png" width="24" height="24" alt="" @click="handleChange">
</div>
<div class="m-wx-box fixed flex flex-col" :style="{'opacity': initShow ? '0' : '1'}">
<div>
<img src="@/assets/images/mobile/wx1.png" alt="">
<p class="text-xs">微信群:chain-vc（发 ycc100进群）</p>
<img src="@/assets/images/mobile/wx2.png" alt="">
<p class="text-xs">微信号:kuangfuwu（扫一扫联系客服）</p>
</div>
<div class="bg-white" @click="handleChange">收起二维码</div>
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
props: {
initShow: Boolean
},
methods: {
handleChange() {
console.log('run')
this.$emit('changeShow', !this.initShow)
}
}
})
</script>
<style scoped>
.m-wx-btn {
width: 45px;
height: 40px;
background: #fff;
top: 55%;
right: 0;
box-shadow: 0px 6px 20px 0px rgba(37, 69, 203, 0.15);
border-radius: 50px 0 0 50px;
}
.m-wx-box {
width: 90px;
height: 200px;
right: 0;
top: 20%;
}
</style>
\ No newline at end of file
src/components/pc/banner.vue
View file @ b556620a
...@@ -3,10 +3,10 @@ ...@@ -3,10 +3,10 @@
<div class="banner_content md:w-bodySet"> <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" src="@/assets/images/home/ycc.png" alt="YCC" width="215">
<div class="flex mb-5"> <div class="flex mb-5">
<p class="text-4xl" style="color: #3D5EE9"><span class="inline-block mr-5 tracking-widest" style="color: #FFA457">原链</span>企业级区块链SaaS平台</p> <p class="text-4xl" style="color: #3D5EE9"><span class="mr-5 tracking-widest" style="color: #FFA457" :class="{'block': enStyle, 'inline-block': !enStyle, 'leading-normal': enStyle}">{{ $t('lang.YUANLIAN') }}</span>{{ $t('lang.title') }}</p>
</div> </div>
<p class="text-left mb-8 text-28px text-footer-color font-light" style="letter-spacing: 8px">让世界没有难做的链</p> <p class="text-left mb-8 text-28px text-footer-color font-light" :style="{'letter-spacing': enStyle ? 'normal' : '8px'}">{{ $t('lang.bannerDesc') }}</p>
<div class="qrcode_box flex justify-evenly items-center mb-28"> <div v-show="!enStyle" class="qrcode_box flex justify-evenly items-center mb-28">
<div class="qrcode_item flex flex-col items-center"> <div class="qrcode_item flex flex-col items-center">
<img src="@/assets/images/home/wx2.png" alt=""> <img src="@/assets/images/home/wx2.png" alt="">
<p class="text-xs font_9">微信群:chain-vc (发ycc100进群)</p> <p class="text-xs font_9">微信群:chain-vc (发ycc100进群)</p>
...@@ -20,11 +20,19 @@ ...@@ -20,11 +20,19 @@
<p class="text-xs font_9">微信:kuangfuwu (扫一扫联系客服)</p> <p class="text-xs font_9">微信:kuangfuwu (扫一扫联系客服)</p>
</div> </div>
</div> </div>
<p class="text-28px text-left text-title-color">什么是原链？</p> <p class="text-28px text-left text-title-color" :style="{'marginTop': enStyle ? '242px' : ''}">{{ $t('lang.whatIs') }}</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>
.home_banner { .home_banner {
/* width: 1200px; */ /* width: 1200px; */
......
src/components/pc/explain.vue
View file @ b556620a
<template> <template>
<div class="home_explain flex justify-center w-full"> <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">
<img v-show="index !== 1" class="cursor-pointer" src="@/assets/images/h-explain/ex1.png" alt="" @click="handleChange(1)"> <img v-show="index !== 1" class="cursor-pointer" 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 v-show="index === 1" class="cursor-pointer" src="@/assets/images/h-explain/exa1.png" alt="">
<p class="text-center text-14px text-article-color" style="white-space: nowrap;">原链YCC使命</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">
<p class="text-center mb-4 text-14px text-article-color" style="white-space: nowrap;">原链YCC技术特点</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 v-show="index !== 2" class="cursor-pointer" 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 v-show="index === 2" class="cursor-pointer" 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">
<img v-show="index !== 3" class="cursor-pointer" src="@/assets/images/h-explain/ex3.png" alt="" @click="handleChange(3)"> <img v-show="index !== 3" class="cursor-pointer" 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 v-show="index === 3" class="cursor-pointer" src="@/assets/images/h-explain/exa3.png" alt="">
<p class="text-center text-14px text-article-color" style="white-space: nowrap;">原链YCC应用</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">
<p class="text-center mb-6 text-14px text-article-color" style="white-space: nowrap;">为什么上原链YCC</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 v-show="index !== 4" class="cursor-pointer" 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 v-show="index === 4" class="cursor-pointer" src="@/assets/images/h-explain/exa4.png" alt="">
</div> </div>
</div> </div>
<div class="explain_r mt-4"> <div class="explain_r mt-4">
<explain-text :index="index"></explain-text> <explain-text :index="index" :enStyle="enStyle"></explain-text>
</div> </div>
</div> </div>
</div> </div>
...@@ -33,6 +33,7 @@ ...@@ -33,6 +33,7 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue' import Vue from 'vue'
import explainText from './explainText.vue' import explainText from './explainText.vue'
import lang from '@/mixin/lang'
export default Vue.extend({ export default Vue.extend({
components: { explainText }, components: { explainText },
data() { data() {
...@@ -41,6 +42,7 @@ export default Vue.extend({ ...@@ -41,6 +42,7 @@ export default Vue.extend({
timer: 0 timer: 0
} }
}, },
mixins: [lang],
methods: { methods: {
handleChange(v: number) { handleChange(v: number) {
this.index = v this.index = v
...@@ -69,6 +71,9 @@ export default Vue.extend({ ...@@ -69,6 +71,9 @@ export default Vue.extend({
background-repeat: no-repeat; background-repeat: no-repeat;
background-position-x: 50%; background-position-x: 50%;
} }
.en-home-explain {
height: 450px;
}
.explain_btn { .explain_btn {
width: 118px; width: 118px;
position: absolute; position: absolute;
......
src/components/pc/explainText.vue
View file @ b556620a
<template> <template>
<div class="explain_text"> <div class="explain_text">
<div v-show="index === 1"> <div v-show="index === 1">
<h3 class="text-18px text-left text-title-color">原链YCC使命</h3> <h3 class="text-18px text-left text-title-color">{{ $t('lang.mission') }}</h3>
<p class="text-14px text-left mt-8 leading-7 text-article-color"> <p class="text-14px text-left text-article-color" :class="{'mt-8': !enStyle, 'mt-3': enStyle, 'leading-7': !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 v-show="index === 2">
<h3 class="text-18px text-left text-title-color">原链YCC技术特点</h3> <h3 class="text-18px text-left text-title-color">{{ $t('lang.feature') }}</h3>
<p class="text-14px text-left mt-8 leading-7 text-article-color"> <p class="text-14px text-left text-article-color" :class="{'mt-8': !enStyle, 'mt-3': enStyle, 'leading-7': !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 v-show="index === 3">
<h3 class="text-18px text-left text-title-color">原链YCC应用</h3> <h3 class="text-18px text-left text-title-color">{{ $t('lang.application') }}</h3>
<p class="text-14px text-left mt-8 leading-7 text-article-color"> <p class="text-14px text-left text-article-color" :class="{'mt-8': !enStyle, 'mt-3': enStyle, 'leading-7': !enStyle, 'leading-normal': enStyle}">
技术支持：Defi、NFT、社交代币、企业白条、资产上链及交易、积分商城、溯源存证、钱包等。<br/> {{ $t('lang.APPT') }}<br/>
潜在应用领域：鲜花、礼品、手机、节能、宠物、餐饮、环保、汽车、家电、服装、电力、健康、教育、 {{ $t('lang.APPO') }}
建筑、地产、贸易、艺术品、聊天、公安法院、政务等。
</p> </p>
</div> </div>
<div v-show="index === 4"> <div v-show="index === 4">
<h3 class="text-18px text-left text-title-color">为什么上原链YCC</h3> <h3 class="text-18px text-left text-title-color">{{ $t('lang.reason') }}</h3>
<p class="text-14px text-left mt-8 leading-7 text-article-color"> <p class="text-14px text-left text-article-color" :class="{'mt-8': !enStyle, 'mt-3': enStyle, 'leading-7': !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>
......
src/components/pc/homeFeature.vue
View file @ b556620a
<template> <template>
<div class="home_feature flex flex-col justify-center items-center"> <div class="home_feature flex flex-col justify-center items-center">
<h4 class="md:w-bodySet mt-16 mb-32 text-center text-28px text-title-color">原链的特点</h4> <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 class="md:w-bodySet h-full flex justify-between -pr-2">
<div> <div>
<div class="feature_item flex flex-row-reverse mb-20"> <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="灵活"> <img class="ml-3" src="@/assets/images/h-feature/f1.png" alt="灵活">
<div> <div>
<h4 class="h-12 text-lg text-right line_48 text-title-color">灵活</h4> <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">当应用的智能合约出现BUG，原链可以热替换智能合约，及时修复BUG，控制损失，拒绝分叉</p> <p class="text-14px text-right leading-6 text-article-color" :class="{'leading-normal': enStyle}">{{ $t('lang.FText') }}</p>
</div> </div>
</div> </div>
<div class="feature_item flex flex-row-reverse mb-106-px"> <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="跨链"> <img class="ml-3" src="@/assets/images/h-feature/f2.png" alt="跨链">
<div> <div>
<h4 class="h-12 text-lg text-right line_48 text-title-color">跨链</h4> <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">原链系统支持公链、联盟链、私链间数字资产和数字货币在不同链上无障碍流通</p> <p class="text-14px text-right leading-6 text-article-color" :class="{'leading-normal': enStyle}">{{ $t('lang.CText') }}</p>
</div> </div>
</div> </div>
<div class="feature_item flex flex-row-reverse" style="margin-bottom: 100px"> <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="低延时"> <img class="ml-3" src="@/assets/images/h-feature/f3.png" alt="低延时">
<div> <div>
<h4 class="h-12 text-lg text-right line_48 text-title-color">低延时</h4> <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">最小区块间隔仅1s,可应用于金融交易所、智能机器人、工业4.0、大数据处理等高性能要求场景</p> <p class="text-14px text-right leading-6 text-article-color" :class="{'leading-normal': enStyle}">{{ $t('lang.LText') }}</p>
</div> </div>
</div> </div>
<div class="feature_item flex flex-row-reverse"> <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/h-feature/f4.png" alt="高并发">
<div> <div>
<h4 class="h-12 text-lg text-right line_48 text-title-color">高并发</h4> <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">公链并发量＞10000笔/秒，联盟链、私链并发量＞100000笔/秒</p> <p class="text-14px text-right leading-6 text-article-color" :class="{'leading-normal': enStyle}">{{ $t('lang.CCText') }}</p>
</div> </div>
</div> </div>
</div> </div>
<div> <div>
<div class="feature_item flex" style="margin-bottom: 80px"> <div class="feature_item flex" :style="{'marginBottom': enStyle ? '48px' : '80px'}">
<img class="mr-3" src="@/assets/images/h-feature/f5.png" alt="异构"> <img class="mr-3" src="@/assets/images/h-feature/f5.png" alt="异构">
<div> <div>
<h4 class="h-12 text-lg text-left line_48 text-title-color">异构</h4> <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">即使在不同的节点，由不同的开发人员，使用不同的开发语言，只要规则一致，智能合约的运算结果就一致</p> <p class="text-14px text-left leading-6 text-article-color" :class="{'leading-normal': enStyle}">{{ $t('lang.HeText') }}</p>
</div> </div>
</div> </div>
<div class="feature_item flex mb-84-px"> <div class="feature_item flex" :style="{'marginBottom': enStyle ? '27px' : '105px'}">
<img class="mr-3" src="@/assets/images/h-feature/f6.png" alt="安全"> <img class="mr-3" src="@/assets/images/h-feature/f6.png" alt="安全">
<div> <div>
<h4 class="h-12 text-lg text-left line_48 text-title-color">安全</h4> <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">公链、联盟链、私链跨链身份认证及管理，节点服务器的行为和指纹识别设备，可防多类攻击</p> <p class="text-14px text-left leading-6 text-article-color" :class="{'leading-normal': enStyle}">{{ $t('lang.SecText') }}</p>
</div> </div>
</div> </div>
<div class="feature_item flex" style="margin-bottom: 130px"> <div class="feature_item flex" :style="{'marginBottom': enStyle ? '96px' : '130px'}">
<img class="mr-3" src="@/assets/images/h-feature/f7.png" alt="绿色"> <img class="mr-3" src="@/assets/images/h-feature/f7.png" alt="绿色">
<div> <div>
<h4 class="h-12 text-lg text-left line_48 text-title-color">绿色</h4> <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">用户可以委托挖矿共识节点参与投票与投票记账，即可实现代理挖矿</p> <p class="text-14px text-left leading-6 text-article-color" :class="{'leading-normal': enStyle}">{{ $t('lang.EnvText') }}</p>
</div> </div>
</div> </div>
<div class="feature_item flex"> <div class="feature_item flex">
<img class="mr-3" src="@/assets/images/h-feature/f8.png" alt="计费"> <img class="mr-3" src="@/assets/images/h-feature/f8.png" alt="计费">
<div> <div>
<h4 class="h-12 text-lg text-left line_48 text-title-color">计费</h4> <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">挖矿收益包括利息、流量额度、税费抵扣、研发费、其他费用、助力原链社区生态圈长期建设</p> <p class="text-14px text-left leading-6 text-article-color" :class="{'leading-normal': enStyle}">{{ $t('lang.FundText') }}</p>
</div> </div>
</div> </div>
</div> </div>
...@@ -66,6 +66,14 @@ ...@@ -66,6 +66,14 @@
</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>
.home_feature { .home_feature {
height: 1091px; height: 1091px;
......
src/components/pc/integral.vue
View file @ b556620a
<template> <template>
<div class="integral flex flex-col items-center"> <div class="integral flex flex-col items-center">
<div class="md:w-bodySet"> <div class="md:w-bodySet">
<h4 class=" mt-16 mb-4 text-3xl text-center text-title-color">一键发积分</h4> <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">快速安全</p> <p class="text-lg text-text-color text-center">{{ $t('lang.QAS') }}</p>
<div class="flex justify-center mt-44 relative"> <div class="flex justify-center mt-44 relative">
<img src="@/assets/images/home/integral.png" width="960" alt=""> <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"> <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/h-integral/i1.png" width="30" alt="">
<p class="text-14px text-article-color mt-1">1.输入企业名称</p> <p class="text-14px text-article-color mt-1">{{ $t('lang.QAS1') }}</p>
</div> </div>
<div class="absolute flex flex-col justify-center items-center tag_2"> <div class="absolute flex flex-col justify-center items-center tag_2" :style="{'left': enStyle ? '428px' : ''}">
<p class="text-14px text-article-color mb-1">2.自动生成/输入积分简称</p> <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/h-integral/i2.png" width="30" alt="">
</div> </div>
<div class="absolute flex flex-col justify-center items-center tag_3"> <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=""> <img src="@/assets/images/h-integral/i3.png" width="30" alt="">
<p class="text-14px text-article-color mt-1">3.系统审核无重名</p> <p class="text-14px text-article-color mt-1">{{ $t('lang.QAS3') }}</p>
</div> </div>
<div class="absolute flex flex-col justify-center items-center tag_4"> <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=""> <img src="@/assets/images/h-integral/i4.png" width="30" alt="">
<p class="text-14px text-article-color mt-1">4.支付发行费用</p> <p class="text-14px text-article-color mt-1">{{ $t('lang.QAS4') }}</p>
</div> </div>
<div class="absolute flex flex-col justify-center items-center tag_5"> <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=""> <img src="@/assets/images/h-integral/i5.png" width="30" alt="">
<p class="text-14px text-article-color mt-1">5.积分进入钱包</p> <p class="text-14px text-article-color mt-1">{{ $t('lang.QAS5') }}</p>
</div> </div>
</div> </div>
</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>
.integral { .integral {
height: 730px; height: 730px;
......
src/components/pc/mechanism.vue
View file @ b556620a
<template> <template>
<div class="home_mechanism flex flex-col items-center"> <div class="home_mechanism flex flex-col items-center">
<h4 class="md:w-bodySet mt-16 mb-24 text-28px text-title-color text-center">共识机制</h4> <h4 class="md:w-bodySet mt-16 mb-24 text-28px text-title-color text-center">{{ $t('lang.Consensus') }}</h4>
<div class="md:w-bodySet flex items-center"> <div class="md:w-bodySet flex items-center">
<p class="text-left text-14px text-article-color mr-16 leading-7"> <p class="text-left text-14px text-article-color mr-16 leading-7">
原链主网采用的是创新型的POS33共识，在传统POS共识机制的基础上引入VRF可验证随机函数建立的 {{ $t('lang.ConT1') }}<br/><br/>
陪审团机制，其在保证去中心化的同时，能够实现区块的快速生存与验证，兼顾公信与性能。<br/><br/> {{ $t('lang.ConT2') }}<br/><br/>
原链主网各节点通过抵押YCC到区块链上获得选票，YCC与选票按10000:1的比例进行抵押，例如，抵押100000YCC可获取10张选票。<br/><br/> {{ $t('lang.ConT3') }}</p>
原链主网各节点用私钥对选票的种子哈希签名，计算出一个哈希值。然后引入VRF可验证随机函数，确认 <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="">
主法官完成出块。之后，进行下一轮陪审团选举。</p>
<img src="../../assets/images/h-mechanism/consensus.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>
.home_mechanism { .home_mechanism {
height: 900px; height: 900px;
......
src/components/pc/scene.vue
View file @ b556620a
This diff is collapsed.
src/layout/MainPage/Footer.vue
View file @ b556620a
<template> <template>
<div class="footer w-full z-50 bg-footer-color flex justify-center"> <div class="footer w-full z-50 flex justify-center">
<div v-if="!isMobile" class="md:w-bodySet flex flex-col items-center pt-20" :class="{'pb-16': $route.path === '/home'}"> <div v-if="!isMobile" class="w-full bg-footer-color flex justify-center">
<img src="@/assets/images/footer/yuanlian_logo.png" width="64" alt="yuanlian"> <div class="md:w-bodySet flex flex-col items-center pt-20" :class="{'pb-16': $route.path === '/home'}">
<ul class="flex items-center justify-center mt-16 mb-16"> <img src="@/assets/images/footer/yuanlian_logo.png" width="64" alt="yuanlian">
<li class="text-lg text-white px-8">{{ $t('lang.community') }}</li> <ul class="flex items-center justify-center mt-16 mb-16">
<li class="text-sm text-white px-8"><a href="https://www.8btc.com/" target="_blank">{{ $t('lang.bit') }}</a></li> <li class="text-lg text-white px-8">{{ $t('lang.community') }}</li>
<li class="text-sm text-white px-8"><a href="https://www.reddit.com/user/yuanchain/" target="_blank">Reddit</a></li> <li class="text-sm text-white px-8"><a href="https://www.8btc.com/" target="_blank">{{ $t('lang.bit') }}</a></li>
<li class="text-sm text-white px-8"><a href="https://www.facebook.com/Yuan-Chain-380711552463031/" target="_blank">Facebook</a></li> <li class="text-sm text-white px-8"><a href="https://www.reddit.com/user/yuanchain/" target="_blank">Reddit</a></li>
<li class="text-sm text-white px-8"><a href="https://www.linkedin.com/company/yuan-chain/" target="_blank">Linkedin</a></li> <li class="text-sm text-white px-8"><a href="https://www.facebook.com/Yuan-Chain-380711552463031/" target="_blank">Facebook</a></li>
<li class="text-sm text-white px-8"><a href="https://twitter.com/yuanchain" target="_blank">Bitcointalk</a></li> <li class="text-sm text-white px-8"><a href="https://www.linkedin.com/company/yuan-chain/" target="_blank">Linkedin</a></li>
</ul> <li class="text-sm text-white px-8"><a href="https://bitcointalk.org/index.php?topic=2741373.msg28028807#msg28028807" target="_blank">Bitcointalk</a></li>
</ul>
</div>
</div> </div>
<div v-else class="mobile-footer pl-16 pr-10 bg-footer-color flex justify-center items-center"> <div v-else class="mobile-footer pl-16 pr-10 flex justify-center items-center" :class="{'m-footer': $route.path === '/home', ' bg-footer-color': $route.path !== '/home'}">
<div class="flex-shrink-0"> <div class="flex-shrink-0">
<img src="@/assets/images/footer/footer-m.png" width="38" alt="yuanlian"> <img src="@/assets/images/footer/footer-m.png" width="38" alt="yuanlian">
</div> </div>
...@@ -21,7 +23,7 @@ ...@@ -21,7 +23,7 @@
<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.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.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="text-xs text-white leading-loose"><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://twitter.com/yuanchain" target="_blank">Bitcointalk</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>
</div> </div>
</div> </div>
...@@ -53,6 +55,15 @@ export default Vue.extend({ ...@@ -53,6 +55,15 @@ export default Vue.extend({
height: 156px; height: 156px;
} }
.m-footer {
height: 220px;
background-color: rgba(249, 250, 251);
background-image: url(../../assets/images/mobile/m-f.png);
background-size: 100%;
background-position: 0 bottom;
background-repeat: no-repeat;
}
.mobile-items div { .mobile-items div {
flex-basis: 50%; flex-basis: 50%;
} }
......
src/layout/MainPage/Header.vue
View file @ b556620a
...@@ -4,9 +4,9 @@ ...@@ -4,9 +4,9 @@
<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="/" tag="li" :class="{'active': $route.path === '/home'}" class="pl-5 pr-5">{{ $t('lang.home') }}</router-link> <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"><a href="http://yuanorg.oss-ap-southeast-1.aliyuncs.com/yuan_introduction.pdf" target="_blank">{{ $t('lang.book') }}</a></li> <li class="pl-5 pr-5"><a href="http://yuanorg.oss-ap-southeast-1.aliyuncs.com/yuan_introduction.pdf" target="_blank">{{ $t('lang.book') }}</a></li>
<router-link to="/newsList" :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}}" :class="{'active': $route.path === '/newsList' || $route.path === '/newsDetails'}" tag="li" class="pl-5 pr-5">{{ $t('lang.news') }}</router-link>
</ul> </ul>
</div> </div>
<div class="flex text-sm mr-1 items-center"> <div class="flex text-sm mr-1 items-center">
...@@ -67,7 +67,12 @@ export default Vue.extend({ ...@@ -67,7 +67,12 @@ export default Vue.extend({
} }
}, },
mounted() { mounted() {
console.log('mounted')
const scrollY = window.scrollY const scrollY = window.scrollY
const type = this.$route.query as any
this.iconType = type.lang || 'zh-CN'
window.sessionStorage.setItem('language', this.iconType)
this.$i18n.locale = this.iconType === 'zh-CN' ? 'zh' : 'en'
this.isTop = scrollY < 70 ? true : false this.isTop = scrollY < 70 ? true : false
window.addEventListener('scroll', () => { window.addEventListener('scroll', () => {
const scrollY = window.scrollY const scrollY = window.scrollY
...@@ -75,8 +80,9 @@ export default Vue.extend({ ...@@ -75,8 +80,9 @@ export default Vue.extend({
}) })
}, },
watch: { watch: {
$route() { $route(n, o) {
const scrollY = window.scrollY const scrollY = window.scrollY
this.iconType = n.query.lang || 'zh-CN'
this.isTop = scrollY < 70 ? true : false this.isTop = scrollY < 70 ? true : false
window.addEventListener('scroll', () => { window.addEventListener('scroll', () => {
const scrollY = window.scrollY const scrollY = window.scrollY
......
src/mixin/lang.ts 0 → 100644
View file @ b556620a
import Vue from 'vue'
export default Vue.extend({
data() {
return {
enStyle: false
}
},
created() {
this.enStyle = this.$route.query?.lang === 'en'
},
watch: {
$route(n) {
this.enStyle = n.query?.lang === 'en'
}
}
})
\ No newline at end of file
src/style.css
View file @ b556620a
...@@ -11,4 +11,12 @@ ...@@ -11,4 +11,12 @@
@font-face { @font-face {
font-family: Din; font-family: Din;
src: url(./assets/font/DIN.ttf); src: url(./assets/font/DIN.ttf);
}
.m-title {
font-weight: 600;
background-image: url(./assets/images/mobile/t-bg.png);
background-size: 150px;
background-position: center 15px;
background-repeat: no-repeat;
} }
\ No newline at end of file
src/views/mobile/Home.vue
View file @ b556620a
<template> <template>
<div class="home flex flex-col justify-content"> <div class="home flex flex-col justify-content" style="padding-top: 44px">
hello moblie <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>
<p class="text-18px tracking-wider mt-4 mb-2" style="color: #3D5EE9"><span class="inline-block mr-3" style="color: #FFA457">原链</span>企业级区块链SaaS平台</p>
<p class="text-14px text-footer-color tracking-widest">让世界没有难做的链</p>
</div>
<wx-bar :init-show="showWx" v-on:changeShow="setShow"></wx-bar>
<m-explain></m-explain>
<m-feature></m-feature>
<m-mechanism></m-mechanism>
<m-integral></m-integral>
<m-scene></m-scene>
<m-link></m-link>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import WxBar from '@/components/mobile/wx-bar.vue'
import MExplain from '@/components/mobile/m-explain.vue'
import MFeature from '@/components/mobile/m-feature.vue'
import MMechanism from '@/components/mobile/m-mechanism.vue'
import MIntegral from '@/components/mobile/m-integral.vue'
import MScene from '@/components/mobile/m-scene.vue'
import MLink from '@/components/mobile/m-link.vue'
export default Vue.extend({ export default Vue.extend({
name: 'Home', name: 'Home',
components: { components: {
WxBar,
MExplain,
MFeature,
MMechanism,
MIntegral,
MScene,
MLink
},
data() {
return {
showWx: true
}
}, },
methods: {
setShow(v: boolean) {
console.log(v)
this.showWx = v
}
}
}); });
</script> </script>
...@@ -18,28 +53,11 @@ export default Vue.extend({ ...@@ -18,28 +53,11 @@ export default Vue.extend({
</style> </style>
<style scoped> <style scoped>
.home_link { .m-header {
width: 100%; height: 382px;
height: 740px; background-image: url('../../assets/images/mobile/bg-h.png');
background-image: url('../../assets/images/home/link.png');
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: 100%;
background-position-x: 50%; background-position-y: bottom;
}
.links li a img {
width: 190px;
}
.links li:nth-of-type(-n+3) {
margin-right: 12px;
}
.home-footer {
height: 80px;
line-height: 80px;
}
.home-footer>div:nth-of-type(-n+4) {
margin-right: 106px;
}
.home-footer>div img {
width: 40px;
} }
</style> </style>
src/views/pc/Home.vue
View file @ b556620a
<template> <template>
<div class="home flex flex-col justify-content"> <div class="home flex flex-col justify-content">
<banner></banner> <banner :enStyle='useEn'></banner>
<explain></explain> <explain :enStyle='useEn'></explain>
<home-feature></home-feature> <home-feature :enStyle='useEn'></home-feature>
<mechanism></mechanism> <mechanism :enStyle='useEn'></mechanism>
<integral></integral> <integral :enStyle='useEn'></integral>
<scene></scene> <scene :enStyle='useEn'></scene>
<div class="flex justify-center home_link"> <div class="flex justify-center home_link">
<div class="md:w-bodySet"> <div class="md:w-bodySet">
<h4 class=" mt-16 mb-4 text-28px text-title-color text-center mb-12">友情链接</h4> <h4 class=" mt-16 mb-4 text-28px text-title-color text-center mb-12">{{ $t('lang.LINK') }}</h4>
<div> <div>
<h4 class="text-lg mb-8 text-text-color text-center">交易平台</h4> <h4 class="text-lg mb-8 text-text-color text-center">{{ $t('lang.platform') }}</h4>
<ul class="links flex justify-center items-center"> <ul class="links flex justify-center items-center">
<li> <li>
<a href="http://www.hadax.com/" target="_blank"> <a href="http://www.hadax.com/" target="_blank">
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
</ul> </ul>
</div> </div>
<div class="mb-12"> <div class="mb-12">
<h4 class="text-lg mt-12 mb-8 text-text-color text-center">合作伙伴</h4> <h4 class="text-lg mt-12 mb-8 text-text-color text-center">{{ $t('lang.partner') }}</h4>
<ul class="links flex justify-center items-center"> <ul class="links flex justify-center items-center">
<li> <li>
<a href="https://guodunc.cn/" target="_blank"> <a href="https://guodunc.cn/" target="_blank">
...@@ -115,7 +115,8 @@ export default Vue.extend({ ...@@ -115,7 +115,8 @@ export default Vue.extend({
name: 'Home', name: 'Home',
data() { data() {
return { return {
isStyleChange: true isStyleChange: true,
useEn: false,
} }
}, },
components: { components: {
...@@ -129,7 +130,6 @@ export default Vue.extend({ ...@@ -129,7 +130,6 @@ export default Vue.extend({
}, },
created() { created() {
window.addEventListener('scroll', () => { window.addEventListener('scroll', () => {
console.log('home')
const scrollHeight = window.scrollY const scrollHeight = window.scrollY
if (scrollHeight > 4140) { if (scrollHeight > 4140) {
this.isStyleChange = false this.isStyleChange = false
...@@ -137,6 +137,15 @@ export default Vue.extend({ ...@@ -137,6 +137,15 @@ export default Vue.extend({
this.isStyleChange = true this.isStyleChange = true
} }
}) })
},
watch: {
$route(n) {
this.useEn = n.query?.lang === 'en'
console.log(this.useEn)
// if (n.query.lang === 'en') {
// this.useEn = true
// }
}
} }
}); });
</script> </script>
......
src/views/pc/newsDetails.vue
View file @ b556620a
...@@ -5,8 +5,9 @@ ...@@ -5,8 +5,9 @@
<h2 class="my-20 text-32px text-left text-title-color">{{ details.title }}</h2> <h2 class="my-20 text-32px text-left text-title-color">{{ details.title }}</h2>
<div class="flex justify-between mb-4"> <div class="flex justify-between mb-4">
<div class="article_l flex flex-col items-center"> <div class="article_l flex flex-col items-center">
<p class="text-sm pb-5 text-article-color">- {{ $t('lang.date') }} -</p> <p class="text-sm pb-6 text-article-color">- {{ $t('lang.date') }} -</p>
<strong class="text-4xl text-title-color leading-snug" style="font-family: Din">{{ day }}</strong> <!-- <strong class="text-4xl text-title-color font-din" style=" line-height: 42px">{{ day }}</strong> -->
<strong class="text-4xl text-title-color" style=" line-height: 42px">{{ day }}</strong>
<p class="text-18px text-title-color leading-snug tracking-wider pt-5">{{ +month }}月</p> <p class="text-18px text-title-color leading-snug tracking-wider pt-5">{{ +month }}月</p>
<p class="text-18px text-title-color leading-snug pt-2">{{ year }}</p> <p class="text-18px text-title-color leading-snug pt-2">{{ year }}</p>
<p class="text-sm text-article-color pt-12">- {{ $t('lang.author') }} -</p> <p class="text-sm text-article-color pt-12">- {{ $t('lang.author') }} -</p>
...@@ -17,7 +18,7 @@ ...@@ -17,7 +18,7 @@
<div class="article_r_t text-left mb-4 shadow-details rounded"> <div class="article_r_t text-left mb-4 shadow-details rounded">
<h4 class="text-18px text-title-color pb-4 text-title-color font-semibold">{{ $t('lang.newestInfo') }}</h4> <h4 class="text-18px text-title-color pb-4 text-title-color font-semibold">{{ $t('lang.newestInfo') }}</h4>
<div v-for="item in newest" :key="item.id" > <div v-for="item in newest" :key="item.id" >
<router-link tag="h4" :to="{path: '/newsDetails', query: { id: item.id }}" class="details_link text-title-color text-16px leading-normal cursor-pointer mb-1">{{ item.title }}</router-link> <router-link tag="h4" :to="{path: '/newsDetails', query: { id: item.id, lang: $route.query.lang }}" class="details_link text-title-color text-16px leading-normal cursor-pointer mb-1">{{ item.title }}</router-link>
<p class="text-text-color text-14px leading-normal pb-5">{{ item.published_time }}</p> <p class="text-text-color text-14px leading-normal pb-5">{{ item.published_time }}</p>
</div> </div>
<div class="flex justify-center"> <div class="flex justify-center">
...@@ -27,7 +28,7 @@ ...@@ -27,7 +28,7 @@
<div class="article_r_b text-left h-auto shadow-details rounded"> <div class="article_r_b text-left h-auto shadow-details rounded">
<h4 class="text-18px pb-4 text-title-color font-semibold">{{ $t('lang.nextInfo') }}</h4> <h4 class="text-18px pb-4 text-title-color font-semibold">{{ $t('lang.nextInfo') }}</h4>
<div> <div>
<router-link tag="h4" :to="{path: '/newsDetails', query: { id: nextNews.id }}" class="details_link text-16px text-title-color leading-normal cursor-pointer mb-1">{{ nextNews.title }}</router-link> <router-link tag="h4" :to="{path: '/newsDetails', query: { id: nextNews.id, lang: $route.query.lang }}" class="details_link text-16px text-title-color leading-normal cursor-pointer mb-1">{{ nextNews.title }}</router-link>
<p class="text-text-color text-14px leading-normal pb-2">{{ nextNews.published_time }}</p> <p class="text-text-color text-14px leading-normal pb-2">{{ nextNews.published_time }}</p>
<p class="line-clamp-2 text-14px text-article-color">{{ nextNews.abstract }}</p> <p class="line-clamp-2 text-14px text-article-color">{{ nextNews.abstract }}</p>
</div> </div>
...@@ -120,7 +121,30 @@ export default Vue.extend({ ...@@ -120,7 +121,30 @@ export default Vue.extend({
width: 126px; width: 126px;
height: 270px; height: 270px;
flex-shrink: 0; flex-shrink: 0;
border-right: 1px solid #979797; position: relative;
/* border-right: 1px solid #979797; */
}
.article_l::after {
content: '';
height: 540px;
width: 1px;
position: absolute;
top: 0;
right: 0;
background-color: #7C88AD;
border: 0px solid transparent;
border-radius: 0px;
-webkit-border-radius: 0px;
transform: scale(0.5);
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform-origin: top left;
-webkit-transform-origin: top left;
-moz-transform-origin: top left;
-ms-transform-origin: top left;
-o-transform-origin: top left;
} }
.article_r_t { .article_r_t {
width: 327px; width: 327px;
......
src/views/pc/newsList.vue
View file @ b556620a
...@@ -2,11 +2,11 @@ ...@@ -2,11 +2,11 @@
<div class="newslist flex flex-col items-center"> <div class="newslist flex flex-col items-center">
<div class="w-full h-64 md:h-80 relative"> <div class="w-full h-64 md:h-80 relative">
<img class="h-full w-full absolute top-0 z-0 object-cover object-center " src="@/assets/images/newslist/banner.png" alt=""> <img class="h-full w-full absolute top-0 z-0 object-cover object-center " src="@/assets/images/newslist/banner.png" alt="">
<p class="z-0 absolute text-white top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2" style="font-size: 60px">区块链新闻资讯</p> <p class="z-0 absolute text-white top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2" style="font-size: 60px">{{ $t('lang.BNAI') }}</p>
</div> </div>
<Spin class="md:w-bodySet" :spinning="isLoading"> <Spin class="md:w-bodySet" :spinning="isLoading">
<div class="md:w-bodySet mt-8 mb-12 flex flex-wrap mx-auto justify-start"> <div class="md:w-bodySet mt-8 mb-12 flex flex-wrap mx-auto justify-start">
<router-link :to="{path: '/newsDetails', query: { id: item.id }}" tag="div" class="news_items border-gray-200 flex py-4 cursor-pointer" v-for="(item, index) in newsLists" :key="index"> <router-link :to="{path: '/newsDetails', query: { id: item.id, lang: $route.query.lang }}" tag="div" class="news_items border-gray-200 flex py-4 cursor-pointer" v-for="(item, index) in newsLists" :key="index">
<news-item :news="item"></news-item> <news-item :news="item"></news-item>
</router-link> </router-link>
</div> </div>
......
tailwind.config.js
View file @ b556620a
...@@ -235,6 +235,7 @@ module.exports = { ...@@ -235,6 +235,7 @@ module.exports = {
'"Segoe UI Symbol"', '"Segoe UI Symbol"',
'"Noto Color Emoji"', '"Noto Color Emoji"',
], ],
din: ['Din', 'ui-serif', 'Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
serif: ['ui-serif', 'Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'], serif: ['ui-serif', 'Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
mono: [ mono: [
'ui-monospace', 'ui-monospace',
......
yarn.lock
View file @ b556620a
This source diff could not be displayed because it is too large. You can view the blob instead.
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