Skip to content

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

移动端调整

parent 6bd0c79d
Expand all Show whitespace changes
Inline Side-by-side
Showing with 75 additions and 45 deletions
package.json
View file @ 2962d374
......@@ -12,7 +12,9 @@
"@tailwindcss/postcss7-compat": "^2.0.4",
"ant-design-vue": "^1.7.5",
"autoprefixer": "^9",
"compression-webpack-plugin": "^5.0.0",
"core-js": "^3.6.5",
"image-webpack-loader": "^7.0.1",
"postcss": "^7",
"register-service-worker": "^1.7.2",
"swiper": "^6.6.1",
......
src/assets/lang/en.ts
View file @ 2962d374
......@@ -33,19 +33,19 @@ export const lang = {
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.',
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.',
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.',
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.',
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.',
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.',
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.',
......
src/assets/lang/zh.ts
View file @ 2962d374
......@@ -39,13 +39,13 @@ export const lang = {
concurrency: '高并发',
CCText: '公链并发量＞10000笔/秒，联盟链、私链并发量＞100000笔/秒',
heterogeneous: '异构',
HeText: '即使在不同的节点，由不同的开发人员，使用不同的开发语言，只要规则一致，智能合约的运算结果就一致。',
HeText: '即使在不同的节点，由不同的开发人员，使用不同的开发语言，只要规则一致，智能合约的运算结果就一致',
security: '安全',
SecText: '公链、联盟链、私链跨链身份认证及管理，节点服务器的行为和指纹识别设备，可防多类攻击。',
SecText: '公链、联盟链、私链跨链身份认证及管理，节点服务器的行为和指纹识别设备，可防多类攻击',
environment: '绿色',
EnvText: '用户可以委托挖矿共识节点参与投票与投票记账，即可实现代理挖矿。',
EnvText: '用户可以委托挖矿共识节点参与投票与投票记账，即可实现代理挖矿',
fund: '社区基金',
FundText: '区块产出中，一部分划入社区发展基金，用于助力原链社区技术研发、社区推广、税务支出、项目运营的经费支出。',
FundText: '区块产出中，一部分划入社区发展基金，用于助力原链社区技术研发、社区推广、税务支出、项目运营的经费支出',
Consensus: '共识机制',
ConT1: '原链主网采用的是创新型的POS33共识，在传统POS共识机制的基础上引入VRF可验证随机函数建立的陪审团机制，其在保证去中心化的同时，能够实现区块的快速生成与验证，兼顾公信与性能。',
ConT2: '原链主网各节点通过抵押YCC到区块链上获得选票，YCC与选票按10000:1的比例进行抵押，例如，抵押100000YCC可获取10张选票。',
......
src/components/mobile/m-feature.vue
View file @ 2962d374
......@@ -6,7 +6,7 @@
<div class="swiper-wrapper">
<div class="swiper-slide flex flex-wrap justify-between px-4 mb-5">
<div v-for="item in block1" :key="item.id" class="m-f-block bg-white px-3 py-5 mb-3 rounded">
<h4 class="text-sm text-title-color mb-5 font-medium">
<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>
......@@ -41,25 +41,25 @@ export default Vue.extend({
id: 1,
title: '灵活',
text: '当应用的智能合约出现BUG，原链可以热替换智能合约，及时修复BUG，控制损失，拒绝分叉',
icon: require('@/assets/images/h-feature/f1.png')
icon: require('@/assets/images/mobile/f1.png')
},
{
id: 2,
title: '跨链',
text: '原链系统支持公链、联盟链、私链间数字资产和数字货币在不同链上无障碍流通',
icon: require('@/assets/images/h-feature/f2.png')
icon: require('@/assets/images/mobile/f2.png')
},
{
id: 3,
title: '低延时',
text: '最小区块间隔仅1s,可应用于金融交易所、智能机器人、工业4.0、大数据处理等高性能要求场景',
icon: require('@/assets/images/h-feature/f3.png')
icon: require('@/assets/images/mobile/f3.png')
},
{
id: 4,
title: '高并发',
text: '公链并发量＞10000笔/秒，联盟链、私链并发量＞100000笔/秒',
icon: require('@/assets/images/h-feature/f4.png')
icon: require('@/assets/images/mobile/f4.png')
}
],
block2: [
......@@ -67,25 +67,25 @@ export default Vue.extend({
id: 1,
title: '异构',
text: '即使在不同的节点，由不同的开发人员，使用不同的开发语言，只要规则一致，智能合约的运算结果就一致',
icon: require('@/assets/images/h-feature/f5.png')
icon: require('@/assets/images/mobile/f5.png')
},
{
id: 2,
title: '安全',
text: '公链、联盟链、私链跨链身份认证及管理，节点服务器的行为和指纹识别设备，可防多类攻击',
icon: require('@/assets/images/h-feature/f6.png')
icon: require('@/assets/images/mobile/f6.png')
},
{
id: 3,
title: '绿色',
text: '用户可以委托挖矿共识节点参与投票与投票记账，即可实现代理挖矿',
icon: require('@/assets/images/h-feature/f7.png')
icon: require('@/assets/images/mobile/f7.png')
},
{
id: 4,
title: '社区基金',
text: '区块产出中，一部分划入社区发展基金，用力助力原链社区技术研发、社区推广、税务支出、项目运营的经费支出',
icon: require('@/assets/images/h-feature/f8.png')
icon: require('@/assets/images/mobile/f8.png')
}
]
}
......
src/components/mobile/m-mechanism.vue
View file @ 2962d374
<template>
<div class="m-mechanism px-4">
<div class="m-mechanism mx-4">
<h4 class="m-title w-full text-20px text-title-color text-center pt-4 mt-2 mb-7">共识机制</h4>
<div class="bg-white">
<div class="">
<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>
......@@ -13,7 +13,7 @@
</template>
<style scoped>
.m-m-text {
.m-mechanism {
/* height: 105px; */
background-image: url(../../assets/images/mobile/m-m.png);
background-size: 100%;
......
src/components/mobile/m-newsItem.vue
View file @ 2962d374
<template>
<div class="flex justify-between">
<div class="flex-grow mr-4 flex flex-col items-start justify-between">
<h4 class="text-16px text-title-color font-semibold">{{ item.title }}</h4>
<div class="flex justify-center">
<span class="inline-block text-12px text-text-color">{{ item.author }}</span>
<span class="inline-block text-12px text-text-color">{{ item.published_time }}</span>
<h4 class="text-16px text-title-color font-semibold line-clamp-2">{{ item.title }}</h4>
<div class="w-full pr-1 flex justify-start">
<span class="inline-block text-xs text-text-color">{{ item.author }}</span>
<span class="inline-block text-xs text-text-color">{{ item.published_time }}</span>
</div>
</div>
<div class="m-news-cover flex-shrink-0 overflow-hidden rounded-sm" :style="{'backgroundImage': `url(${item.cover})`}">
......
src/components/mobile/menu.vue
View file @ 2962d374
......@@ -10,9 +10,9 @@
<img src="@/assets/images/header/logo.png" width="164" alt="yuanlian">
</div>
<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"><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-base text-title-color" :class="{'menu-active': $route.path === '/home'}" @click="goPage('/')">首页</li>
<li class="px-6 text-base text-title-color"><a href="http://yuanorg.oss-ap-southeast-1.aliyuncs.com/yuan_introduction.pdf" target="_blank">白皮书</a></li>
<li class="px-6 text-base text-title-color" :class="{'menu-active': $route.path === '/newsList' || $route.path === '/newsDetails'}" @click="goPage('/newsList')">新闻公告</li>
</ul>
</Drawer>
</div>
......
src/components/mobile/wx-bar.vue
View file @ 2962d374
<template>
<div class="">
<div class="m-wx-btn fixed flex items-center justify-center z-50" :style="{'opacity': initShow ? '1' : '0'}">
<div v-show="initShow" class="m-wx-btn fixed flex items-center justify-center z-50">
<img src="@/assets/images/mobile/wx.png" width="24" height="24" alt="" @click="handleChange">
</div>
<div class="m-wx-box fixed flex flex-col z-50" :style="{'opacity': initShow ? '0' : '1'}">
<div v-show="!initShow" class="m-wx-box fixed flex flex-col z-50">
<div class="bg-white flex flex-col items-center py-2" style="margin-bottom: 5px; border-radius: 4px 0 0 0;">
<img class="" src="@/assets/images/mobile/wx1.png" alt="">
<p class="text-xs box-text" style="color: #6E7899">微信:chain-vc(发 ycc100进群)</p>
......@@ -34,7 +34,7 @@ export default Vue.extend({
width: 45px;
height: 40px;
background: #fff;
top: 45%;
top: 50%;
right: 0;
box-shadow: 0px 6px 20px 0px rgba(37, 69, 203, 0.15);
border-radius: 50px 0 0 50px;
......
src/components/pc/scene.vue
View file @ 2962d374
......@@ -48,7 +48,7 @@
</div>
</div>
<div class="dot dot5 absolute" :style="{'left': enStyle ? '880px' : ''}">
<p class="text-14px text-article-color" :class="{'opacity-0': index === 5}">{{ $t('lang.SC5') }}</p>
<p class="text-14px text-article-color" :class="{'opacity-0': index === 5, 'en_t_b': enStyle}">{{ $t('lang.SC5') }}</p>
<div class="dot_block flex flex-col items-center justify-start" :class="{'opacity-0': index !== 5}" :style="{'width': enStyle ? '290px' : '',}">
<div class="circle flex items-center justify-center" style="margin-bottom: 5px" @click="clickChange(5)">
<div class="circle_dot"></div>
......@@ -68,7 +68,7 @@
</div>
</div>
<div class="dot dot7 absolute" :style="{'left': enStyle ? '1355px' : ''}">
<p class="text-14px text-article-color" :class="{'opacity-0': index === 7}">{{ $t('lang.SC7') }}</p>
<p class="text-14px text-article-color" :class="{'opacity-0': index === 7, 'en_t_b': enStyle}">{{ $t('lang.SC7') }}</p>
<div class="dot_block flex flex-col items-center justify-start" :class="{'opacity-0': index !== 7}" :style="{'width': enStyle ? '240px' : '',}">
<div class="circle flex items-center justify-center" @click="clickChange(7)">
<div class="circle_dot"></div>
......@@ -291,4 +291,12 @@ export default Vue.extend({
.dot9 .dot_block {
height: 428px;
}
.en_t_b {
width: 230px;
position: absolute;
top: 40px;
left: 50%;
transform: translateX(-50%);
}
</style>
\ No newline at end of file
src/layout/MainPage/Footer.vue
View file @ 2962d374
......@@ -13,11 +13,11 @@
</ul>
</div>
</div>
<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 v-else class="mobile-footer pl-16 pr-6 flex justify-center items-center" :class="{'m-footer': $route.path === '/home', ' bg-footer-color': $route.path !== '/home'}">
<div class="flex-shrink-0">
<img src="@/assets/images/footer/footer-m.png" width="38" alt="yuanlian">
</div>
<div class="mobile-items ml-16 flex flex-wrap justify-around items-center">
<div class="mobile-items ml-12 flex flex-wrap justify-around items-center">
<div class="text-sm text-white leading-loose">{{ $t('lang.community') }}</div>
<div class="text-xs text-white leading-loose"><a href="https://www.8btc.com/" target="_blank">{{ $t('lang.bit') }}</a></div>
<div class="text-xs text-white leading-loose"><a href="https://www.reddit.com/user/yuanchain/" target="_blank">Reddit</a></div>
......@@ -56,11 +56,11 @@ export default Vue.extend({
}
.m-footer {
height: 200px;
height: 220px;
background-image: url(../../assets/images/mobile/m-f.png);
background-color: rgba(249, 250, 251);
background-size: 100%;
background-position: 0 bottom;
background-size: cover;
background-position: 50% bottom;
background-repeat: no-repeat;
}
......
src/layout/MainPage/Header.vue
View file @ 2962d374
......@@ -67,7 +67,6 @@ export default Vue.extend({
}
},
mounted() {
console.log('mounted')
const scrollY = window.scrollY
const type = this.$route.query as any
this.iconType = type.lang || 'zh-CN'
......
src/layout/MainPage/index.vue
View file @ 2962d374
......@@ -26,7 +26,7 @@ export default Vue.extend({
components: {
"main-header": () => import("./Header.vue"),
"main-footer": () => import("./Footer.vue"),
},
}
});
</script>
......
src/router/index.ts
View file @ 2962d374
......@@ -26,7 +26,7 @@ const routes: Array<RouteConfig> = [
},
{
path:'/newsDetails',
name: '首页',
name: '新闻详情',
component: ()=>import(`@/views/${file}/newsDetails.vue`)
}
]
......
src/views/mobile/newsDetails.vue
View file @ 2962d374
......@@ -5,7 +5,7 @@
<div class="px-5 py-6 mb-3">
<div class="m-article">
<h4 class="text-20px text-title-color mb-5 font-semibold">{{ details.title }}</h4>
<p class="text-12px text-text-color mb-6">
<p class="text-xs text-text-color mb-6">
<span class="inline-block mr-4">{{ details.author }}</span>
<span class="inline-block">{{ details.published_time }}</span>
</p>
......@@ -14,8 +14,8 @@
<div class="next-News py-5 rounded">
<h4 class="text-16px text-title-color pb-4 flex items-center font-semibold"><i class="m-icon inline-block bg-footer-color mr-2.5"></i>下一篇</h4>
<router-link tag="h4" :to="{path: '/newsDetails', query: { id: nextNews.id }}" class="text-14px text-title-color pb-1 px-6">{{ nextNews.title }}</router-link>
<p class="text-12px text-article-color mb-2 px-6 line-clamp-2">{{ nextNews.abstract }}</p>
<p class="text-12px text-text-color px-6">{{ nextNews.published_time }}</p>
<p class="text-xs text-article-color mb-2 px-6 line-clamp-2">{{ nextNews.abstract }}</p>
<p class="text-xs text-text-color px-6">{{ nextNews.published_time }}</p>
</div>
</div>
</div>
......
vue.config.js
View file @ 2962d374
const CompressionWebpackPlugin = require("compression-webpack-plugin")
const TerserPlugin = require("terser-webpack-plugin")
module.exports = {
outputDir: 'dist',
......@@ -13,4 +15,22 @@ module.exports = {
},
}
},
configureWebpack: {
plugins: [
new CompressionWebpackPlugin({
algorithm: "gzip",
threshold: 10240,
minRatio: 0.8,
}),
],
},
// chainWebpack: config => {
// config.module
// .rule('min-image')
// .test(/\.(png|jpe?g|gif)(\?.*)?$/)
// .use('image-webpack-loader')
// .loader('image-webpack-loader')
// .options({ disable: process.env.NODE_ENV == 'development' ? true : false })//此处为ture的时候不会启用压缩处理,目的是为了开发模式下调试速度更快,网上错误示例直接写为disable:true,如果不去查看文档肯定是要被坑的
// .end()
// }
}
yarn.lock
View file @ 2962d374
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