Skip to content

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

pc

parent fe9e7a4e
Expand all Show whitespace changes
Inline Side-by-side
Showing with 1170 additions and 18 deletions
.env 0 → 100644
View file @ c13411a0
VUE_APP_BACKEND = https://public.zhaobi.tech/web/api
\ No newline at end of file
package.json
View file @ c13411a0
......@@ -8,8 +8,15 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"@tailwindcss/line-clamp": "^0.2.0",
"@tailwindcss/postcss7-compat": "^2.0.4",
"ant-design-vue": "^1.7.5",
"autoprefixer": "^9",
"core-js": "^3.6.5",
"postcss": "^7",
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.1.0",
"vue": "^2.6.11",
"vue-i18n": "^8.24.4",
"vue-router": "^3.2.0",
"vuex": "^3.4.0"
},
......
postcss.config.js 0 → 100644
View file @ c13411a0
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
\ No newline at end of file
src/App.vue
View file @ c13411a0
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view/>
</div>
</template>
......
src/assets/images/newslist/banner.png 0 → 100644
View file @ c13411a0
This diff is collapsed.
src/assets/lang/en.ts 0 → 100644
View file @ c13411a0
export const lang = {
home: 'Home',
book: 'White Paper',
news: 'News',
email: 'email',
zh: 'Chinese',
en: 'English',
community: 'Community',
bit: '8bit',
newestInfo: 'Newest',
morecontent: 'More',
nextInfo: 'Next News',
date: 'Date',
author: 'Author'
}
\ No newline at end of file
src/assets/lang/index.ts 0 → 100644
View file @ c13411a0
import Vue from "vue";
import VueI18n from "vue-i18n";
Vue.use(VueI18n);
export const i18n = new VueI18n({
locale: 'zh',
messages: {
'zh': require('./zh.ts'),
'en': require('./en.ts')
}
})
\ No newline at end of file
src/assets/lang/zh.ts 0 → 100644
View file @ c13411a0
export const lang = {
home: '首页',
book: '白皮书',
news: '新闻公告',
email: '合作邮箱',
zh: '中文',
en: '英文',
community: '社区',
bit: '巴比特',
newestInfo: '最新消息',
morecontent: '查看更多内容',
nextInfo: '下一篇资讯',
date: '日期',
author: '作者'
}
\ No newline at end of file
src/components/banner.vue 0 → 100644
View file @ c13411a0
<template>
<div class="home_banner relative">
<div class="banner_content md:w-bodySet">
<img class="mb-7" src="../assets/images/home/ycc.png" alt="YCC" width="215">
<div class="flex mb-5">
<p class="text-4xl" style="color: #3D5EE9"><span class="inline-block mr-5" style="color: #FFA457">原链</span>企业级区块链SaaS平台</p>
</div>
<p class="text-left mb-8 text-28px text-footer-color">让世界没有难做的链</p>
<div class="qrcode_box flex justify-evenly items-center mb-28">
<div class="qrcode_item flex flex-col">
<img src="../assets/images/home/wx2.png" alt="">
<p class="font_9">微信群:chain-vc（发 ycc100进群）</p>
</div>
<div class="qrcode_item flex flex-col">
<img src="../assets/images/home/qq.png" alt="">
<p class="font_9">QQ号:1683656222（扫一扫联系客服）</p>
</div>
<div class="qrcode_item flex flex-col">
<img src="../assets/images/home/wx1.png" alt="">
<p class="font_9">微信号:kuangfuwu（扫一扫联系客服）</p>
</div>
</div>
<p class="text-28px text-left text-title-color">什么是原链？</p>
</div>
</div>
</template>
<style scoped>
.home_banner {
/* width: 1250px; */
height: 798px;
background-image: url('../assets/images/home/bg_t.png');
background-size: cover;
background-repeat: no-repeat;
background-position-x: 50%;
position: relative;
}
.banner_content {
/* width: 1250px; */
position: absolute;
top: 220px;
left: 50%;
transform: translateX(-50%);
}
.qrcode_box {
width: 280px;
height: 116px;
background: rgba(79, 138, 255, 10%);
border-radius: 5px;
}
.qrcode_item {
width: 60px;
}
.qrcode_item img {
width: 60px;
height: 60px;
margin-bottom: 3px;
}
.font_9 {
width: 230%;
height: 16px;
color: #546AA8;
transform-origin: 0 0;
transform: scale(0.5);
}
</style>
\ No newline at end of file
src/components/explain.vue 0 → 100644
View file @ c13411a0
<template>
<div class="home_explain flex justify-center">
<div class="md:w-bodySet h-full flex ">
<div class="explain_l flex mr-32 relative w-6/12 h-full text-sm flex-shrink-0">
<div class="flex flex-col explain_btn explain_1">
<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="">
<p class="text-center text-16px text-article-color" style="white-space: nowrap;">原链YCC使命</p>
</div>
<div class="flex flex-col explain_btn explain_2">
<p class="text-center mb-4 text-16px text-article-color" style="white-space: nowrap;">原链YCC技术特点</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/exa2.png" alt="">
</div>
<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/exa3.png" alt="">
<p class="text-center text-16px text-article-color" style="white-space: nowrap;">原链YCC应用</p>
</div>
<div class="flex flex-col explain_btn explain_4">
<p class="text-center mb-6 text-16px text-article-color" style="white-space: nowrap;">为什么上原链YCC</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/exa4.png" alt="">
</div>
</div>
<div class="explain_r mt-4">
<explain-text :index="index"></explain-text>
</div>
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import explainText from './explainText.vue'
export default Vue.extend({
components: { explainText },
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>
.home_explain {
height: 360px;
background-image: url('../assets/images/home/bg_ex.png');
background-size: cover;
background-repeat: no-repeat;
background-position-x: 50%;
}
.explain_btn {
width: 118px;
position: absolute;
color: #435897;
}
.explain_btn img {
width: 100%;
margin-bottom: 26px;
}
.explain_1 {
left: 4px;
top: 115px;
}
.explain_1::after {
content: '';
display: block;
width: 8px;
height: 8px;
background: #2545CB;
border-radius: 50%;
position: absolute;
top: 18px;
right: -24px;
}
.explain_2 {
top: 0;
left: 154px;
}
.explain_2::after {
content: '';
display: block;
width: 8px;
height: 8px;
background: #2545CB;
border-radius: 50%;
position: absolute;
bottom: 50px;
right: -9px;
}
.explain_3 {
top: 110px;
left: 302px;
}
.explain_3::after {
content: '';
display: block;
width: 8px;
height: 8px;
background: #2545CB;
border-radius: 50%;
position: absolute;
top: 49px;
right: -17px;
}
.explain_4 {
top: 31px;
left: 448px;
}
</style>
\ No newline at end of file
src/components/explainText.vue 0 → 100644
View file @ c13411a0
<template>
<div class="explain_text">
<div v-show="index === 1">
<h3 class="text-18px text-left text-title-color">原链YCC使命</h3>
<p class="text-16px text-left mt-8 leading-7 text-article-color">
原链YCC新一代基础型应用公链。基于原链YCC公链网络，天然适合构建Defi、NFT、Dao等应用合约。
原链YCC通过构建创新性的POS33共识机制，其在保证去中心化的同时，能够实现区块的快速验证与
生成，兼顾公信与性能。为满足应用型公链生态扩建，原链YCC支持双层多链区块链架构拓展，在主链共
识的基础上，打造平行公链，实现性能提升，生态扩展。
</p>
</div>
<div v-show="index === 2">
<h3 class="text-18px text-left text-title-color">原链YCC技术特点</h3>
<p class="text-16px text-left mt-8 leading-7 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-18px text-left text-title-color">原链YCC应用</h3>
<p class="text-16px text-left mt-8 leading-7 text-article-color">
技术支持：Defi、NFT、社交代币、企业白条、资产上链及交易、积分商城、溯源存证、钱包等。<br/>
潜在应用领域：鲜花、礼品、手机、节能、宠物、餐饮、环保、汽车、家电、服装、电力、健康、教育、
建筑、地产、贸易、艺术品、聊天、公安法院、政务等。
</p>
</div>
<div v-show="index === 4">
<h3 class="text-18px text-left text-title-color">为什么上原链YCC</h3>
<p class="text-16px text-left mt-8 leading-7 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>
.explain_text div {
/* transition: 0.25s ease-in; */
}
</style>
\ No newline at end of file
src/components/homeFeature.vue 0 → 100644
View file @ c13411a0
<template>
<div class="home_feature flex flex-col justify-center items-center">
<h4 class="md:w-bodySet mt-16 mb-32 text-28px text-title-color">原链的特点</h4>
<div class="md:w-bodySet h-full flex justify-between pl-2">
<div>
<div class="feature_item flex flex-row-reverse mb-20">
<img class="ml-3" src="../assets/images/h-feature/f1.png" alt="灵活">
<div>
<h4 class="h-12 text-lg text-right line_48 text-title-color">灵活</h4>
<p class="text-16px text-left leading-6 text-article-color">当应用的智能合约出现BUG，原链可以热替换智能合约，及时修复BUG，控制损失，拒绝分叉</p>
</div>
</div>
<div class="feature_item flex flex-row-reverse mb-106-px">
<img class="ml-3" src="../assets/images/h-feature/f2.png" alt="跨链">
<div>
<h4 class="h-12 text-lg text-right line_48 text-title-color">跨链</h4>
<p class="text-16px text-left leading-6 text-article-color">原链系统支持公链、联盟链、私链间数字资产和数字货币在不同链上无障碍流通。</p>
</div>
</div>
<div class="feature_item flex flex-row-reverse mb-24">
<img class="ml-3" src="../assets/images/h-feature/f3.png" alt="低延时">
<div>
<h4 class="h-12 text-lg text-right line_48 text-title-color">低延时</h4>
<p class="text-16px text-left leading-6 text-article-color">最小区块间隔仅1s,可应用于金融交易所、智能机器人、工业4.0、大数据处理等高性能要求场景。</p>
</div>
</div>
<div class="feature_item flex flex-row-reverse">
<img class="ml-3" src="../assets/images/h-feature/f4.png" alt="高并发">
<div>
<h4 class="h-12 text-lg text-right line_48 text-title-color">高并发</h4>
<p class="text-16px text-left leading-6 text-article-color">公链并发量＞10000笔/秒，联盟链、私链并发量＞100000笔/秒</p>
</div>
</div>
</div>
<div>
<div class="feature_item flex mb-20">
<img class="mr-3" src="../assets/images/h-feature/f5.png" alt="异构">
<div>
<h4 class="h-12 text-lg text-left line_48 text-title-color">异构</h4>
<p class="text-16px text-left leading-6 text-article-color">即使在不同的节点，由不同的开发人员，使用不同的开发语言，只要规则一致，智能合约的运算结果就一致。</p>
</div>
</div>
<div class="feature_item flex mb-84-px">
<img class="mr-3" src="../assets/images/h-feature/f6.png" alt="安全">
<div>
<h4 class="h-12 text-lg text-left line_48 text-title-color">安全</h4>
<p class="text-16px text-left leading-6 text-article-color">公链、联盟链、私链跨链身份认证及管理，节点服务器的行为和指纹识别设备，可防多类攻击。</p>
</div>
</div>
<div class="feature_item flex mb-32">
<img class="mr-3" src="../assets/images/h-feature/f7.png" alt="绿色">
<div>
<h4 class="h-12 text-lg text-left line_48 text-title-color">绿色</h4>
<p class="text-16px text-left leading-6 text-article-color">用户可以委托挖矿共识节点参与投票与投票记账，即可实现代理挖矿。</p>
</div>
</div>
<div class="feature_item flex">
<img class="mr-3" src="../assets/images/h-feature/f8.png" alt="计费">
<div>
<h4 class="h-12 text-lg text-left line_48 text-title-color">计费</h4>
<p class="text-16px text-left leading-6 text-article-color">挖矿收益包括利息、流量额度、税费抵扣、研发费、其他费用、助力原链社区生态圈长期建设。</p>
</div>
</div>
</div>
</div>
</div>
</template>
<style scoped>
.home_feature {
height: 1091px;
background-image: url(../assets/images/h-feature/bg_fea.png);
background-position-x: 50%;
background-size: 2100px;
background-repeat: no-repeat;
}
.line_48 {
line-height: 48px;
}
.mb-106-px {
margin-bottom: 110px;
}
.mb-84-px {
margin-bottom: 106px;
}
.feature_item img {
width: 52px;
height: 52px;
}
.feature_item h4 {
color: #22356C;
}
.feature_item p {
width: 270px;
}
</style>
\ No newline at end of file
src/components/iconSelect.vue 0 → 100644
View file @ c13411a0
<template>
<div v-show="show" class="i-select bg-white flex flex-col absolute shadow">
<div class="i-select-item flex py-2 px-3 items-center cursor-pointer" style="border-bottom: 1px solid #efefef" @click="selectLanguage('zh-CN')">
<img src="@/assets/images/header/ZH.png" alt="">
<p class="text-sm text-text-color ml-3">{{ $t('lang.zh') }}</p>
</div>
<div class="i-select-item flex py-2 px-3 items-center cursor-pointer" @click="selectLanguage('en')">
<img src="@/assets/images/header/EN.png" alt="">
<p class="text-sm text-text-color ml-3">{{ $t('lang.en') }}</p>
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
props: {
show: Boolean
},
data() {
return {
}
},
methods: {
selectLanguage(v: string) {
this.$emit('selectIcon', v)
this.$emit('hidden', true)
window.sessionStorage.setItem('language', v)
this.$i18n.locale = v === 'zh-CN' ? 'zh' : 'en'
console.log({...this.$route.query, lang: v})
this.$router.replace({ path: this.$route.path, query: { ...this.$route.query, lang: v }})
}
},
created() {
// const _b = document.body || document.documentElement
// _b.addEventListener('click', (e) => {
// if (!this.show) return
// for (let item of e.path) {
// try {
// if (item.getAttribute('class').indexOf('i-select-item') <= -1) {
// this.$emit('hidden', true)
// }
// } catch(e) {
// throw Error(e)
// }
// }
// })
}
})
</script>
<style scoped>
.i-select {
width: 100px;
border-radius: 4px;
left: 0;
top: 20px;
}
</style>
\ No newline at end of file
src/components/integral.vue 0 → 100644
View file @ c13411a0
<template>
<div class="integral flex flex-col items-center">
<div class="md:w-bodySet">
<h4 class=" mt-16 mb-4 text-3xl text-title-color">一键发积分</h4>
<p class="text-lg text-text-color">快速安全</p>
<div class="flex justify-center mt-44 relative">
<img src="@/assets/images/home/integral.png" width="960" alt="">
<div class="absolute flex flex-col justify-center items-center tag_1">
<img src="@/assets/images/h-integral/i1.png" width="30" alt="">
<p class="text-16px text-article-color mt-1">1.输入企业名称</p>
</div>
<div class="absolute flex flex-col justify-center items-center tag_2">
<p class="text-16px text-article-color mb-1">2.自动生成/输入积分简称</p>
<img src="@/assets/images/h-integral/i2.png" width="30" alt="">
</div>
<div class="absolute flex flex-col justify-center items-center tag_3">
<img src="@/assets/images/h-integral/i3.png" width="30" alt="">
<p class="text-16px text-article-color mt-1">3.系统审核无重名</p>
</div>
<div class="absolute flex flex-col justify-center items-center tag_4">
<img src="@/assets/images/h-integral/i4.png" width="30" alt="">
<p class="text-16px text-article-color mt-1">4.支付发行费用</p>
</div>
<div class="absolute flex flex-col justify-center items-center tag_5">
<img src="@/assets/images/h-integral/i5.png" width="30" alt="">
<p class="text-16px text-article-color mt-1">5.积分进入钱包</p>
</div>
</div>
</div>
</div>
</template>
<style scoped>
.integral {
height: 730px;
background-image: url('../assets/images/h-integral/bg_int.png');
background-size: cover;
background-repeat: no-repeat;
background-position-x: 50%;
}
.tag_1 {
top: 35px;
left: 292px;
}
.tag_1::after {
content: '';
display: block;
width: 1px;
height: 26px;
background-image: linear-gradient(to bottom, #9BACD5 50%, transparent 50%);
background-size: 1px 7px;
background-repeat: repeat-y;
position: absolute;
top: -23px;
left: 50%;
transform: translateX(-50%);
}
.tag_2 {
top: -85px;
left: 542px;
}
.tag_2::after {
content: '';
display: block;
width: 1px;
height: 32px;
background-image: linear-gradient(to bottom, #9BACD5 50%, transparent 50%);
background-size: 1px 7px;
background-repeat: repeat-y;
position: absolute;
bottom: -28px;
left: 50%;
transform: translateX(-50%);
}
.tag_3 {
top: 35px;
left: 847px;
}
.tag_3::after {
content: '';
display: block;
width: 1px;
height: 26px;
background-image: linear-gradient(to bottom, #9BACD5 50%, transparent 50%);
background-size: 1px 7px;
background-repeat: repeat-y;
position: absolute;
top: -23px;
left: 50%;
transform: translateX(-50%);
}
.tag_4 {
top: 194px;
left: 717px;
}
.tag_4::after {
content: '';
display: block;
width: 1px;
height: 26px;
background-image: linear-gradient(to bottom, #9BACD5 50%, transparent 50%);
background-size: 1px 7px;
background-repeat: repeat-y;
position: absolute;
top: -23px;
left: 50%;
transform: translateX(-50%);
}
.tag_5 {
top: 194px;
left: 436px;
}
.tag_5::after {
content: '';
display: block;
width: 1px;
height: 26px;
background-image: linear-gradient(to bottom, #9BACD5 50%, transparent 50%);
background-size: 1px 7px;
background-repeat: repeat-y;
position: absolute;
top: -23px;
left: 50%;
transform: translateX(-50%);
}
</style>
\ No newline at end of file
src/components/mechanism.vue 0 → 100644
View file @ c13411a0
<template>
<div class="home_mechanism flex flex-col items-center">
<h4 class="md:w-bodySet mt-16 mb-24 text-28px text-title-color">共识机制</h4>
<div class="md:w-bodySet flex items-center">
<p class="text-left text-16px text-article-color mr-16 leading-7">
原链主网采用的是创新型的POS33共识，在传统POS共识机制的基础上引入VRF可验证随机函数建立的
陪审团机制，其在保证去中心化的同时，能够实现区块的快速生存与验证，兼顾公信与性能。<br/><br/>
原链主网各节点通过抵押YCC到区块链上获得选票，YCC与选票按10000:1的比例进行抵押，例如，抵押100000YCC可获取10张选票。<br/><br/>
原链主网各节点用私钥对选票的种子哈希签名，计算出一个哈希值。然后引入VRF可验证随机函数，确认
节点的哈希值小于设定的阈值，则入选为陪审团成员。其中最小哈希值节点由陪审团成员投票确认，成为
主法官完成出块。之后，进行下一轮陪审团选举。</p>
<img src="../assets/images/h-mechanism/consensus.png" alt="">
</div>
</div>
</template>
<style scoped>
.home_mechanism {
height: 900px;
background-image: url('../assets/images/h-mechanism/bg_me.png');
background-size: 2100px;
background-repeat: no-repeat;
background-position-x: 50%;
}
.home_mechanism img {
width: 600px;
}
</style>
\ No newline at end of file
src/components/newsItem.vue 0 → 100644
View file @ c13411a0
<template>
<div class="news-item flex rounded-md">
<div class="bg-gray-400 w-4/12 overflow-hidden relative rounded-md" style="height: 118px">
<img :src="news.cover" alt="" class="w-full h-full">
</div>
<div class="w-8/12 px-4 text-left">
<div class="text-blue-900 text-16px mb-2 line-clamp-1">{{ news.title }}</div>
<div class="border-t border-gray-200 mb-2"></div>
<div class="mb-2 text-14px text-text-color">{{ news.published_time }}</div>
<div class="line-clamp-2 text-16px text-article-color">
{{ news.abstract }}
</div>
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
props: {
news: Object
}
})
</script>
<style scoped>
.news-item:hover {
box-shadow: 0 0 4px 3px #efefef;
}
</style>
\ No newline at end of file
src/components/scene.vue 0 → 100644
View file @ c13411a0
This diff is collapsed.
src/https/api.ts 0 → 100644
View file @ c13411a0
const baseUrl = '/api'
// const baseUrl = 'http://127.0.0.1:8021/'
export function getNews(v: string) {
return fetch(baseUrl + '/v1/article/index' + '?cid=8&language=' + v, {
method: 'GET',
headers: {
"content-type": 'application/json'
}
}).then(ret => {
return ret.json()
})
}
export function getNewsDetails(id: number, v: string) {
return fetch(baseUrl + `/v1/article/view?id=${id}&language=${v}`, {
method: 'GET',
headers: {
"content-type": 'application/json'
}
}).then(ret => {
return ret.json()
})
}
\ No newline at end of file
src/layout/MainPage/Footer.vue 0 → 100644
View file @ c13411a0
<template>
<div class="footer w-full z-50 bg-footer-color flex justify-center">
<div class="md:w-bodySet flex flex-col items-center pt-20" :class="{'pb-16': $route.path === '/home'}">
<img src="@/assets/images/footer/yuanlian_logo.png" width="64" alt="">
<ul class="flex items-center justify-center mt-16 mb-16">
<li class="text-lg text-white px-8">{{ $t('lang.community') }}</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.reddit.com/user/yuanchain/" target="_blank">Reddit</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.linkedin.com/company/yuan-chain/" target="_blank">Linkedin</a></li>
<li class="text-sm text-white px-8"><a href="https://twitter.com/yuanchain" target="_blank">Bitcointalk</a></li>
</ul>
</div>
</div>
</template>
<style scoped>
.footer {
/* height: 312px; */
}
</style>
\ No newline at end of file
src/layout/MainPage/Header.vue 0 → 100644
View file @ c13411a0
<template>
<div class="fixed top-0 w-full z-50 flex justify-center" :class="{'bg-white': !isTop}" style="transition: 0.2s ease-in">
<div class="header_h md:w-bodySet flex justify-between items-center">
<div class="flex items-center">
<img src="@/assets/images/header/logo.png" alt="logo" width="164">
<ul class="header_menu flex leading-normal text-sm ml-16">
<router-link to="/" 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>
<router-link to="/newsList" :class="{'active': $route.path === '/newsList' || $route.path === '/newsDetails'}" tag="li" class="pl-5 pr-5">{{ $t('lang.news') }}</router-link>
</ul>
</div>
<div class="flex text-sm mr-1 items-center">
<p class="mr-20" :class="{'text-white': isTop}" :style="{'color': $route.path === '/home' ? '' : '#2545CB'}">{{ $t('lang.email') }}： business@yuan.org</p>
<div class="relative">
<div v-show="iconType === 'zh-CN'" class="flex items-center justify-center cursor-pointer" @click="showIcon = !showIcon">
<img class="mr-2" src="@/assets/images/header/ZH.png" alt="中文">
<p class="text-sm">{{ $t('lang.zh') }}</p>
<img class="ml-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-2" src="@/assets/images/header/EN.png" alt="英文">
<p class="text-sm">{{ $t('lang.en') }}</p>
<img class="ml-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>
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import IconSelect from '@/components/iconSelect.vue'
// import { Select } from "ant-design-vue";
export default Vue.extend({
components: {
IconSelect
// Select
},
data() {
return {
scrollHeight: 0,
isTop: true,
showIcon: false,
iconType: 'zh-CN'
}
},
mounted() {
const scrollY = window.scrollY
this.isTop = scrollY < 70 ? true : false
window.onscroll = () => {
const scrollY = window.scrollY
this.isTop = scrollY < 70 ? true : false
}
}
})
</script>
<style scoped>
.header_h {
min-width: 1250px;
height: 70px;
color: #2545CB;
transition: 0.3s ease-in;
}
.header_menu li {
cursor: pointer;
}
.header_menu li:hover {
}
.active {
position: relative;
}
.active::after {
content: '';
display: block;
width: 28px;
height: 4px;
background: #0276F7;
border-radius: 5px;
position: absolute;
left: 50%;
bottom: -8px;
transform: translateX(-50%);
}
</style>
\ No newline at end of file
src/layout/MainPage/index.vue 0 → 100644
View file @ c13411a0
<template>
<div class="ycc_container">
<main-header></main-header>
<div class="bg-gray-50">
<router-view />
</div>
<main-footer></main-footer>
</div>
</template>
<script lang='ts'>
import Vue from "vue";
export default Vue.extend({
data() {
return {
offSetTop: 0,
};
},
components: {
"main-header": () => import("./Header.vue"),
"main-footer": () => import("./Footer.vue"),
},
});
</script>
<style scoped>
.ycc_container {
min-width: 1250px;
}
</style>
src/main.ts
View file @ c13411a0
......@@ -2,11 +2,29 @@ import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'ant-design-vue/dist/antd.css';
import "tailwindcss/tailwind.css"
import './style.css'
import { Select } from 'ant-design-vue'
import { i18n } from './assets/lang/index'
// import VueI18n from 'vue-i18n';
// Vue.use(VueI18n);
// const i18n = new VueI18n({
// locale: 'zh',
// messages: {
// 'zh': require('@/assets/lang/zh.ts'),
// 'en': require('@/assets/lang/en.ts')
// }
// });
Vue.use(Select)
Vue.config.productionTip = false
new Vue({
router,
store,
i18n,
render: h => h(App)
}).$mount('#app')
src/router/index.ts
View file @ c13411a0
import Vue from 'vue'
import App from '@/layout/MainPage/index.vue'
import VueRouter, { RouteConfig } from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter)
const routes: Array<RouteConfig> = [
{
path: '/',
name: 'Home',
component: Home
name: 'LayOne',
component: App,
redirect:'/home',
children:[
{
path:'/home',
name: '首页',
component: ()=>import('@/views/Home.vue')
},
{
path:'/newsList',
name: '新闻公告',
component: ()=>import('@/views/newsList.vue')
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
path:'/newsDetails',
name: '首页',
component: ()=>import('@/views/newsDetails.vue')
}
]
}
]
......
src/style.css 0 → 100644
View file @ c13411a0
*{
margin: 0;
padding: 0;
}
\ No newline at end of file
src/views/Home.vue
View file @ c13411a0
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
<div class="home flex flex-col justify-content">
<banner></banner>
<explain></explain>
<home-feature></home-feature>
<mechanism></mechanism>
<integral></integral>
<scene></scene>
<div class="flex justify-center home_link">
<div class="md:w-bodySet">
<h4 class=" mt-16 mb-4 text-28px text-title-color mb-12">友情链接</h4>
<div>
<h4 class="text-lg mb-8 text-text-color">交易平台</h4>
<ul class="links flex justify-center items-center">
<li>
<a href="http://www.hadax.com/" target="_blank">
<img src="@/assets/images/home/hadax.png" alt="hadax">
</a>
</li>
<li>
<a href="https://www.hitbtc.com/" target="_blank">
<img src="@/assets/images/home/hitbtc.png" alt="hitbtc">
</a>
</li>
<li>
<a href="http://www.hotbit.io/" target="_blank">
<img src="@/assets/images/home/hotbit.png" alt="hotbit">
</a>
</li>
<li>
<a href="https://www.zhaobi.site/" target="_blank">
<img src="@/assets/images/home/zhaobi.png" alt="zhaobi">
</a>
</li>
</ul>
</div>
<div class="mb-12">
<h4 class="text-lg mt-12 mb-8 text-text-color">合作伙伴</h4>
<ul class="links flex justify-center items-center">
<li>
<a href="https://guodunc.cn/" target="_blank">
<img src="@/assets/images/home/guodun.png" alt="guodun">
</a>
</li>
<li>
<a href="https://www.feixiaohao.com/" target="_blank">
<img src="@/assets/images/home/feixiaohao.png" alt="feixiaohao">
</a>
</li>
<li>
<a href="https://www.mytokencap.com/" target="_blank">
<img src="@/assets/images/home/mytoken.png" alt="mytoken">
</a>
</li>
<li>
<a href="https://bitgo.cc/" target="_blank">
<img src="@/assets/images/home/bitgo.png" alt="bitgo">
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="w-full flex justify-center fixed bottom-0 left-0 bg-footer-color" style="z-index: 110">
<div class="home-footer md:w-bodySet flex justify-center items-center">
<div>
<a href="https://t.me/yccorg" target="_blank"><img src="@/assets/images/footer/shadow.png" alt=""></a>
</div>
<div>
<Tooltip title="邮箱: yuanlian@yuan.org">
<img class="cursor-pointer" src="@/assets/images/footer/email.png" alt="">
</Tooltip>
</div>
<div>
<Tooltip>
<template slot="title">
<img class="cursor-pointer" src="@/assets/images/footer/wx-footer.png" alt="">
</template>
<img class="cursor-pointer" src="@/assets/images/footer/weixin.png" alt="">
</Tooltip>
</div>
<div>
<a href="https://twitter.com/yuanchain" target="_blank"><img src="@/assets/images/footer/twitter.png" alt=""></a>
</div>
<div>
<a href="https://medium.com/@yuanchain" target="_blank"><img src="@/assets/images/footer/mail.png" alt=""></a>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
import Banner from '@/components/banner.vue';
import Explain from '@/components/explain.vue';
import HomeFeature from '@/components/homeFeature.vue';
import Mechanism from '@/components/mechanism.vue';
import Integral from '@/components/integral.vue';
import Scene from '@/components/scene.vue';
import { Tooltip } from 'ant-design-vue'
export default Vue.extend({
name: 'Home',
components: {
HelloWorld,
Banner,
Explain,
HomeFeature,
Mechanism,
Integral,
Scene,
Tooltip
},
});
</script>
<style>
.ant-tooltip-inner {
background: rgba(255, 255, 255, 1);
color: #2545CB;
}
.ant-tooltip-arrow::before {
background: rgba(255, 255, 255, 1);
}
</style>
<style scoped>
.home_link {
width: 100%;
height: 740px;
background-image: url('../assets/images/home/link.png');
background-repeat: no-repeat;
background-size: cover;
background-position-x: 50%;
}
.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>
src/views/newsDetails.vue 0 → 100644
View file @ c13411a0
<template>
<div class="news_details w-full flex justify-center pt-16">
<div class="md:w-bodySet flex flex-col">
<h2 class="my-20 text-4xl text-left text-title-color">{{ details.title }}</h2>
<div class="flex justify-between mb-4">
<div class="article_l">
<p class="text-sm pb-5">- {{ $t('lang.date') }} -</p>
<strong class="text-4xl leading-snug">{{ day }}</strong>
<p class="text-sm leading-snug tracking-wider pt-2">{{ month }}月</p>
<p class="text-sm leading-snug pt-2">{{ year }}</p>
<p class="text-sm pt-12">- {{ $t('lang.author') }} -</p>
<p class="text-sm pt-4">{{ details.author }}</p>
</div>
<div class="article pl-9 text-left" v-html="details.content"></div>
<div class="article_r ml-4">
<div class="article_r_t text-left mb-4 shadow rounded">
<h4 class="text-18px text-title-color pb-4 text-title-color">{{ $t('lang.newestInfo') }}</h4>
<div v-for="item in newest" :key="item.id" >
<router-link tag="p" :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>
<p class="text-text-color text-14px leading-normal pb-5">{{ item.published_time }}</p>
</div>
<div class="flex justify-center">
<router-link to="/newsList" tag="div" class="more-btn">{{ $t('lang.morecontent') }}</router-link>
</div>
</div>
<div class="article_r_b text-left h-auto shadow rounded">
<h4 class="text-18px pb-4 text-title-color">{{ $t('lang.nextInfo') }}</h4>
<div>
<router-link tag="p" :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>
<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>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import { getNews, getNewsDetails } from '@/https/api'
export default Vue.extend({
data() {
return {
details: {},
day: '',
month: '',
year: '',
id: 0,
newest: [],
nextNews: {}
}
},
methods: {
initData() {
this.details = {}
this.newest = []
this.nextNews = {}
},
getDetails() {
const language = window.sessionStorage.getItem('language') || 'zh-CN'
getNewsDetails(this.id, language).then(res => {
this.details = res
const { published_time } = res
const _t = published_time.split(' ')[0]
this.year = _t.split('-')[0]
this.month = _t.split('-')[1]
this.day = _t.split('-')[2]
})
},
getNewsList() {
const language = window.sessionStorage.getItem('language') || 'zh-CN'
getNews(language).then(res => {
const lists = res.rows
this.newest = JSON.parse(JSON.stringify(lists)).splice(0, 3)
for (let i = 0; i < res.rows.length; i++) {
if (this.id == res.rows[i].id) {
this.nextNews = i >= 1 ? res.rows[i-1] : res.rows[res.rows.length - 1]
}
}
})
}
},
created() {
this.id = +this.$route.query.id
this.getNewsList()
this.getDetails()
},
watch: {
$route(n, o) {
this.id = n.query.id
console.log(this.id)
this.initData()
console.log(this.details)
this.getNewsList()
this.getDetails()
}
}
})
</script>
<style scoped>
.news_details {
min-height: calc(100vh - 315px);
}
.article_l {
width: 126px;
height: 250px;
flex-shrink: 0;
border-right: 1px solid #979797;
}
.article_r_t {
width: 327px;
/* height: 336px; */
background: #fff;
padding: 19px 25px 19px 32px;
}
.article_r_b {
width: 327px;
background: #fff;
padding: 19px 25px 19px 32px;
}
.more-btn {
width: 148px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
background: #2545CB;
color: #fff;
font-size: 16px;
border-radius: 40px;
cursor: pointer;
}
.details_link:hover {
text-decoration: underline;
}
</style>
\ No newline at end of file
src/views/newsList.vue 0 → 100644
View file @ c13411a0
This diff is collapsed.
tailwind.config.js 0 → 100644
View file @ c13411a0
This diff is collapsed.
vue.config.js 0 → 100644
View file @ c13411a0
module.exports = {
outputDir: 'dist',
devServer: {
proxy: { // 设置代理
'/api': {
target: 'https://public.zhaobi.tech/web/api',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
},
}
},
}
\ No newline at end of file
yarn.lock
View file @ c13411a0
This diff is collapsed.
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