Initial commit

2022-11-15 11:40:36 +08:00 · 2022-11-15 11:40:36 +08:00 · 45a44ea217
commit 45a44ea217
42 changed files with 44839 additions and 0 deletions
--- a/.editorconfig
+++ b/.editorconfig
@ -0,0 +1,5 @@
+[*.{js,jsx,ts,tsx,vue}]
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true
--- a/README.md
+++ b/README.md
@ -0,0 +1,29 @@
+# fusionist
+
+## Project setup
+```
+yarn install
+```
+
+### Compiles and hot-reloads for development
+```
+yarn run serve
+```
+
+### Compiles and minifies for production
+```
+yarn run build
+```
+
+### Run your tests
+```
+yarn run test
+```
+
+### Lints and fixes files
+```
+yarn run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).
--- a/babel.config.js
+++ b/babel.config.js
@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}
--- a/jsconfig.json
+++ b/jsconfig.json
@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,57 @@
+{
+  "name": "fusionist",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "@walletconnect/web3-provider": "^1.8.0",
+    "core-js": "^3.8.3",
+    "element-ui": "^2.15.10",
+    "three": "^0.146.0",
+    "vant": "^2.12.52",
+    "vue": "^2.6.14",
+    "vue-router": "^3.5.1",
+    "vue2-flip-countdown": "^0.12.1",
+    "vuex": "^3.6.2",
+    "web3": "^1.8.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.16",
+    "@babel/eslint-parser": "^7.12.16",
+    "@vue/cli-plugin-babel": "^5.0.0",
+    "@vue/cli-plugin-eslint": "^5.0.0",
+    "@vue/cli-service": "^5.0.0",
+    "@vue/eslint-config-standard": "^6.1.0",
+    "eslint": "^7.32.0",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^5.1.0",
+    "eslint-plugin-vue": "^8.0.3",
+    "less": "^4.0.0",
+    "less-loader": "^8.0.0",
+    "vue-template-compiler": "^2.6.14"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "@vue/standard"
+    ],
+    "parserOptions": {
+      "parser": "@babel/eslint-parser"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
+    <title><%= htmlWebpackPlugin.options.title %></title>
+    <style>
+    </style>
+  </head>
+  <body>
+    <noscript>
+      <strong
+        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
+        properly without JavaScript enabled. Please enable it to
+        continue.</strong
+      >
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,29 @@
+<template>
+  <div id="app">
+    <router-view/>
+  </div>
+</template>
+
+<style lang="less">
+body{
+    margin: 0;
+    color: #fff;
+    font-family: 'Poppins',sans-serif;
+    font-weight: 400;
+    background-color: #1a1a1a;
+}
+body, html {
+    padding: 0;
+    margin: 0;
+    font-family: Poppins,sans-serif;
+    width: 100%;
+    height: 100%;
+}
+#app {
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+}
+
+
+</style>
--- a/src/assets/img/3D.png
+++ b/src/assets/img/3D.png
--- a/src/assets/img/Logo
+++ b/src/assets/img/Logo
--- a/src/assets/img/countNumberBG.png
+++ b/src/assets/img/countNumberBG.png
--- a/src/assets/img/countNumberBG2.png
+++ b/src/assets/img/countNumberBG2.png
--- a/src/assets/img/logo.png
+++ b/src/assets/img/logo.png
--- a/src/assets/img/p1_BG.jpg
+++ b/src/assets/img/p1_BG.jpg
--- a/src/assets/img/point.png
+++ b/src/assets/img/point.png
--- a/src/assets/img/point_active.png
+++ b/src/assets/img/point_active.png
--- a/src/assets/img/progress.png
+++ b/src/assets/img/progress.png
--- a/src/assets/img/progress_bg.png
+++ b/src/assets/img/progress_bg.png
--- a/src/assets/img/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7.gif
+++ b/src/assets/img/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7.gif
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/assets/mobile/bg-content.png
+++ b/src/assets/mobile/bg-content.png
--- a/src/assets/mobile/bg.png
+++ b/src/assets/mobile/bg.png
--- a/src/assets/mobile/discard-icon.png
+++ b/src/assets/mobile/discard-icon.png
--- a/src/assets/mobile/discard.png
+++ b/src/assets/mobile/discard.png
--- a/src/assets/mobile/logo.png
+++ b/src/assets/mobile/logo.png
--- a/src/assets/mobile/team.png
+++ b/src/assets/mobile/team.png
--- a/src/assets/mobile/twitter-icon.png
+++ b/src/assets/mobile/twitter-icon.png
--- a/src/assets/mobile/twitter.png
+++ b/src/assets/mobile/twitter.png
--- a/src/chain/jcchain.js
+++ b/src/chain/jcchain.js
--- a/src/components/HeaderBar.vue
+++ b/src/components/HeaderBar.vue
@ -0,0 +1,316 @@
+<template>
+  <div class="header">
+    <div class="header-content">
+      <a class="header-logo" href="/">
+        <span class="header-item-box">
+          <span class="header-item-box">
+            <img
+              class="header-logo-img"
+              src="../assets/img/Logo (2).png"
+              alt=""
+            />
+          </span>
+        </span>
+      </a>
+      <div class="header-center"></div>
+      <div class="header-connect">
+        <span style="display: inline">
+          <button class="login-btn" @click="Login">
+            Connect Wallet
+            <span class="btn"></span>
+          </button>
+        </span>
+        <div class="login-web3" v-show="DisabLogin">
+          <div class="login-MetaMask" @click="metaMask">MetaMask</div>
+          <div class="login-WalletConnect" @click="walletConnect">
+            WalletConnect
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+var jcchain = require("../chain/jcchain.js");
+
+export default {
+  name: "HeaderBar",
+  data() {
+    return {
+      DisabLogin: false,
+      chain: null,
+    };
+  },
+  mounted() {
+    this.chain = new jcchain.JCChain();
+    this.chain.chainManager.init().then(() => {
+      if (this.chain.logined) {
+        this.checkWalletBind();
+        let event = new Event("account_ready", {
+          bubbles: true,
+          cancelable: false,
+        });
+        window.dispatchEvent(event);
+      }
+    });
+  },
+  methods: {
+    Login() {
+      this.chainLogin();
+      this.DisabLogin = !this.DisabLogin;
+    },
+    logSuccess() {
+      console.log("login success");
+      console.log(this.chain);
+      window.logincb && window.logincb();
+      window.logincb = undefined;
+      this.toggleLoginBtn();
+      window.onChainLogined && window.onChainLogined();
+      this.checkWalletBind();
+      let event = new Event("account_ready", {
+        bubbles: true,
+        cancelable: false,
+      });
+      window.dispatchEvent(event);
+    },
+    chainLogin(cb) {
+      window.logincb = cb;
+      this.chain.login().then(this.logSuccess.bind(window));
+    },
+    metaMask() {
+      this.chain.selectWalletAndLogin(1).then(this.logSuccess.bind(window));
+      this.$router.push('/sinup')
+    },
+    walletConnect() {
+      this.chain.selectWalletAndLogin(2).then(this.logSuccess.bind(window));
+    },
+    toggleLoginBtn() {},
+    checkWalletBind() {},
+    onChainLogined() {},
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.header {
+  background-color: #121212;
+  color: #fff;
+  -webkit-transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%),
+    0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);
+  background-image: linear-gradient(
+    rgba(255, 255, 255, 0.09),
+    rgba(255, 255, 255, 0.09)
+  );
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  width: 100%;
+  box-sizing: border-box;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  position: fixed;
+  z-index: 1100;
+  top: 0;
+  left: auto;
+  right: 0;
+  height: 64px;
+  box-shadow: none;
+  background: #131615;
+  border-bottom: 1px solid #30312a;
+  .header-content {
+    position: relative;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-align-items: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    padding-left: 16px;
+    padding-right: 16px;
+    min-height: 56px;
+  }
+}
+
+.header-center {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+}
+@media (min-width: 600px) {
+  .header-content {
+    min-height: 64px;
+  }
+}
+
+@media (min-width: 0px) and (orientation: landscape) {
+  .header-content {
+    min-height: 48px;
+  }
+}
+
+@media (min-width: 600px) {
+  .header-content {
+    padding-left: 24px;
+    padding-right: 24px;
+  }
+}
+.header-logo {
+  margin: 0;
+  color: #daa25f;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+  text-decoration-color: rgba(218, 162, 95, 0.4);
+}
+.header-item-box {
+  box-sizing: border-box;
+  display: inline-block;
+  overflow: hidden;
+  width: initial;
+  height: initial;
+  background: none;
+  opacity: 1;
+  border: 0;
+  margin: 0;
+  padding-top: 6px;
+  position: relative;
+  max-width: 100%;
+}
+.header-logo-img {
+  box-sizing: border-box;
+  padding: 0;
+  border: none;
+  margin: auto;
+  display: block;
+  width: 40px;
+  height: 40px;
+  min-width: 100%;
+  max-width: 100%;
+  min-height: 100%;
+  max-height: 100%;
+}
+a {
+  color: inherit;
+  text-decoration: none;
+}
+.header-connect {
+  position: relative;
+}
+.login-btn {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  position: relative;
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
+  background-color: transparent;
+  outline: 0;
+  border: 0;
+  margin: 0;
+  border-radius: 0;
+  padding: 0;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  vertical-align: middle;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: inherit;
+  font-family: "Poppins", sans-serif;
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.75;
+  text-transform: uppercase;
+  min-width: 64px;
+  padding: 6px 16px;
+  border-radius: 4px;
+  -webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #daa25f;
+  box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%),
+    0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
+  text-transform: none;
+  border-radius: 50px;
+  background: linear-gradient(90deg, #714f34, #f5c384);
+  color: #fff;
+  -webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+.btn {
+  overflow: hidden;
+  pointer-events: none;
+  position: absolute;
+  z-index: 0;
+  inset: 0px;
+  border-radius: inherit;
+}
+.login-web3 {
+  position: absolute;
+  right: 0;
+  top: 45px;
+  width: 130px;
+  height: 60px;
+  background: #30312a;
+  .login-MetaMask {
+    height: 120px;
+    height: 30px;
+    cursor: pointer;
+    text-align: center;
+    border-radius: 10px;
+    margin-bottom: 10px;
+    background: #daa25f;
+  }
+  .login-WalletConnect {
+    height: 120px;
+    height: 30px;
+    cursor: pointer;
+    text-align: center;
+    border-radius: 10px;
+    background: #daa25f;
+  }
+}
+img,
+canvas,
+area {
+  pointer-events: auto !important;
+}
+</style>
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@ -0,0 +1,58 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <p>
+      For a guide and recipes on how to configure / customize this project,<br>
+      check out the
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+    </p>
+    <h3>Installed CLI Plugins</h3>
+    <ul>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
+    </ul>
+    <h3>Essential Links</h3>
+    <ul>
+      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
+      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
+      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
+      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
+      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
+    </ul>
+    <h3>Ecosystem</h3>
+    <ul>
+      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
+      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
+      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
+      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="less">
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>
--- a/src/main.js
+++ b/src/main.js
@ -0,0 +1,24 @@
+import Vue from 'vue'
+import App from './App.vue'
+import router from './router'
+import store from './store'
+
+import Web3 from 'web3'
+// 完整引入，main.js写入以下代码
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
+import Vant from 'vant';
+import 'vant/lib/index.css';
+
+Vue.use(Vant);
+ 
+Vue.use(ElementUI)
+Vue.config.productionTip = false
+
+Vue.prototype.Web3 = Web3
+
+new Vue({
+  router,
+  store,
+  render: h => h(App)
+}).$mount('#app')
--- a/src/router/index.js
+++ b/src/router/index.js
@ -0,0 +1,31 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import HomeView from '../views/HomeView.vue'
+
+Vue.use(VueRouter)
+
+const routes = [
+  {
+    path: '/',
+    name: 'login',
+    component: () => import(/* webpackChunkName: "about" */ '../views/Login.vue')
+  },
+  {
+    path: '/sinup',
+    name: 'Sinup',
+    component: () => import(/* webpackChunkName: "about" */ '../views/Sinup.vue')
+  },
+  {
+    path: '/recommend',
+    name: 'Recommend',
+    component: () => import(/* webpackChunkName: "about" */ '../views/Recommend.vue')
+  },
+]
+
+const router = new VueRouter({
+  mode: 'history',
+  base: process.env.BASE_URL,
+  routes
+})
+
+export default router
--- a/src/store/index.js
+++ b/src/store/index.js
@ -0,0 +1,17 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  state: {
+  },
+  getters: {
+  },
+  mutations: {
+  },
+  actions: {
+  },
+  modules: {
+  }
+})
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@ -0,0 +1,134 @@
+<template>
+  <div class="home">
+    <HeaderBar></HeaderBar>
+    <div class="content">
+      <div class="banner-content">
+        <div class="banner"><img src="../assets/img/p1_BG.jpg" alt="" /></div>
+        <div class="banner-footer">
+          <img src="../assets/img/logo.png" alt="" />
+        </div>
+      </div>
+      <div class="time">2
+         <div class="container">
+          <!-- <canvas data-engine="three.js r145" style="display: block; width: 1903px; height: 1938px;" width="1903" height="1938"></canvas> -->
+         </div>
+         <div class="time-title">ALPHA PRESTIGE ENDS IN</div>
+         <div class="flip">  <flip-countdown deadline="2018-12-25 00:0:00"></flip-countdown></div>
+      </div>
+      <div @click="Login" ><button class="btn">登录</button></div>
+      <div>4</div>
+      <div>5</div>
+      <div>6</div>
+      <div>7</div>
+    </div>
+    <div>
+      <footer></footer>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as THREE from 'three'
+import HeaderBar from '../components/HeaderBar.vue'
+import FlipCountdown from 'vue2-flip-countdown'
+// import FlipCountdown from '../components/FlipCountdown.vue'
+export default {
+  name: "HomeView",
+  components: {
+    HeaderBar,
+    FlipCountdown
+  },
+  data(){
+    return{
+
+    }
+  },
+  methods:{
+    Login(){
+      console.log('-=-=-=-=-=-')
+      this.$router.push('/sinup')
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+
+img,
+canvas,
+area {
+  pointer-events: auto !important;
+}
+.banner-content {
+  text-align: center;
+  background: #000;
+}
+.banner {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  height: 800px;
+}
+.banner-footer {
+  padding-right: 80px;
+  text-align: right;
+  position: relative;
+  top: -60px;
+  z-index: 99;
+}
+
+.time {
+    flex-direction: column;
+    -webkit-box-align: center;
+    align-items: center;
+    -webkit-box-pack: center;
+    justify-content: center;
+    height: 80vh;
+    position: relative;
+    display: flex;
+    background:  0% 0% / cover rgb(0, 0, 0);
+    .container{
+      position: absolute;
+    top: -30vh;
+    width: 100%;
+    height: 200vh;
+    z-index: 0;
+
+    }
+    .time-title {
+    background-image: linear-gradient(90deg, #FFC783,#714f34);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    font-weight: 200;
+    font-size: 66px;
+    width: 1200px;
+    text-align: center;
+    line-height: 1.5;
+    z-index: 1;
+    margin-bottom: 6vh;
+}
+.flip{
+  position: relative;
+}
+
+}
+.btn{
+  width: 120px;
+  z-index: 9992222222229999;
+  height: 40px ;
+  background: rgba(12, 177, 100, 0.8);
+}
+</style>
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@ -0,0 +1,184 @@
+<template>
+  <div>
+    <div class="container">
+  
+      <div class="header">
+        <div class="logo-img"><img class="imgs"   width="40px" src="../assets/mobile/logo.png" alt="" /></div>
+        <div class="header-login">WALLET CONNECT</div>
+      </div>
+      <div class="content">
+        <div class="title">
+          <p>TO SIGN UP FOR THE EVENT.</p>
+          <p>PLEASE LOGIN TO YOUR</p>
+          <p>WALLET FIRST.</p>
+        </div>
+
+        <div class="wallet" @click="metaMask">
+          METAMASK
+          <p class="recommand">Recommand</p>
+        </div>
+
+        <div class="connect" @click="walletConnect">WALLET CONNECT</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+var jcchain = require("../chain/jcchain.js");
+export default {
+  data() {
+    return {
+      DisabLogin: false,
+      chain: null,
+    };
+  },
+  mounted() {
+    this.chain = new jcchain.JCChain();
+    this.chain.chainManager.init().then(() => {
+      if (this.chain.logined) {
+        this.checkWalletBind();
+        let event = new Event("account_ready", {
+          bubbles: true,
+          cancelable: false,
+        });
+        window.dispatchEvent(event);
+      }
+    });
+  },
+  methods: {
+    Login() {
+      this.chainLogin();
+      this.DisabLogin = !this.DisabLogin;
+    },
+    logSuccess() {
+      console.log("login success");
+      console.log(this.chain);
+      window.logincb && window.logincb();
+      window.logincb = undefined;
+      this.toggleLoginBtn();
+      window.onChainLogined && window.onChainLogined();
+      this.checkWalletBind();
+      let event = new Event("account_ready", {
+        bubbles: true,
+        cancelable: false,
+      });
+      window.dispatchEvent(event);
+    },
+    chainLogin(cb) {
+      window.logincb = cb;
+      this.chain.login().then(this.logSuccess.bind(window));
+    },
+    metaMask() {
+      this.chain.selectWalletAndLogin(1).then(this.logSuccess.bind(window));
+      this.$router.push("/sinup");
+    },
+    walletConnect() {
+      this.chain.selectWalletAndLogin(2).then(this.logSuccess.bind(window));
+    },
+    toggleLoginBtn() {},
+    checkWalletBind() {},
+    onChainLogined() {},
+  },
+};
+</script>
+ 
+<style lang="less">
+.container {
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+  background: url(../assets/mobile/bg-content.png);
+  background-size:100% 100%;
+}
+.header {
+  width: 100vw;
+  display: flex;
+  align-items: center;
+  background: linear-gradient(179deg, #775437, #f2c082);
+  margin-right: 6vw;
+  justify-content: space-between;
+  height: 4.8vh;
+}
+.logo-img{
+  margin-left: 2vw;
+}
+.imgs{
+  width: 7vw;
+}
+.content {
+  padding: 10vw;
+}
+.title {
+  font-size: 1.2rem;
+  text-align: center;
+  margin-bottom: 10vw;
+  font-family: BigJohn;
+  font-weight: 400;
+  color: #000000;
+  text-shadow: 5px 4px 9px rgba(0, 0, 0, 0.35);
+  background: linear-gradient(171deg, #775437 0.1220703125%, #f2c082 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.logion-top {
+  // display: flex;
+  // // justify-content: center;
+  // align-items: center;
+  width: 35%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin: 0 auto;
+}
+.login-btn {
+  margin-top: 6vh;
+  width: 35%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin: 0 auto;
+}
+.wallet,
+.connect {
+  height: 4.5vh;
+  text-align: center;
+  line-height: 4.5vh;
+  background-color: #daa25f;
+  box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%),
+    0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
+  text-transform: none;
+  border-radius: 50px;
+  background: linear-gradient(90deg, #714f34, #f5c384);
+  color: #fff;
+}
+.wallet {
+  position: relative;
+  width: 40vw;
+  font-size: 0.2rem;
+  margin: 0 auto;
+  margin-bottom: 2vh;
+}
+.header-login {
+  width: 9rem;
+  border-radius: 50px;
+  line-height: 4vh;
+  background: rgb(12, 0, 0);
+  text-align: center;
+  font-size: 0.6rem;
+  height: 4vh;
+  margin-right: 1.5vw;
+}
+.recommand {
+  position: absolute;
+  font-size: 0.2rem;
+  top: -0.3vh;
+  right: -19vw;
+  color: #EDBC80;
+}
+.connect {
+  width: 40vw;
+  font-size: 0.1rem;
+  margin: 0 auto;
+}
+</style>
--- a/src/views/Recommend.vue
+++ b/src/views/Recommend.vue
@ -0,0 +1,80 @@
+<template>
+  <div class="container">
+    <div class="title">INPUT INVITATIONN CODE</div>
+
+    <div class="invitation-code">
+      Email:<el-input class="input-code" type="text" placeholder="" />
+    </div>
+
+    <div class="submit-btn"><el-button class="btn">Submit</el-button></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="less" scoped>
+title {
+  font-size: 1.3rem;
+  font-family: BigJohn;
+  font-weight: 400;
+  color: #000000;
+  line-height: 72px;
+  text-shadow: 5px 4px 9px rgba(0, 0, 0, 0.35);
+  background: linear-gradient(171deg, #775437 0.1220703125%, #f2c082 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.invitation-code {
+  width: 75%;
+  padding-left: 1.6vw;
+  margin: 0 auto;
+  border: 2px solid #e4e4e4;
+  border-radius: 14px;
+  margin-bottom: 15vh;
+}
+/deep/ .el-input__inner {
+  background-color: transparent !important;
+  border-color: transparent;
+}
+.address {
+  font-size: 0.2rem;
+  text-align: center;
+  font-family: OPPOSans;
+  font-weight: normal;
+  color: #edbc80;
+  line-height: 34px;
+}
+.input-code {
+  width: 45vw;
+}
+.submit-btn {
+  width: 100%;
+  text-align: center;
+
+  .btn {
+    width: 47.2vw;
+    background: linear-gradient(165deg, #775437, #f2c082);
+    border-radius: 40px;
+  }
+}
+/deep/.el-button {
+  border-color: transparent;
+  border-radius: 40px;
+  font-weight: 400;
+  font-size: 1.3rem;
+  color: #fffefe;
+}
+.connect-btn {
+  width: 50%;
+  text-align: center;
+  line-height: 4vh;
+  height: 4vh;
+  margin: 0 auto;
+  margin-bottom: 4vh;
+  font-size: 1.4rem;
+  background: linear-gradient(165deg, #775437, #f2c082);
+  border-radius: 40px;
+}
+</style>
--- a/src/views/Sinup.vue
+++ b/src/views/Sinup.vue
@ -0,0 +1,109 @@
+<template>
+  <div class="sinup">
+    <div class="content">
+      <div class="title">INFORMATION REQUIRED FOR PARTICIPATION</div>
+
+      <div class="connect-btn">connect</div>
+      <div class="connect-btn">connect</div>
+
+      <div class="address">Your contact email address</div>
+      <div class="invitation-code">
+        Email:<el-input class="input-code" type="text" placeholder="" />
+      </div>
+
+      <div class="submit-btn"><el-button class="btn">Submit</el-button></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      value: "",
+    };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.sinup {
+  width: 100%;
+  height: 100%;
+  background: #000;
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  background: url(../assets/mobile/bg-content.png);
+  background-size:100% 100%;
+}
+.content {
+  margin-top: 12vw;
+  // width: 300px;
+  // height: 300px;
+}
+.title {
+  text-align: center;
+  font-size: 1.4rem;
+  font-family: BigJohn;
+  font-weight: 400;
+  color: #000000;
+  line-height: 72px;
+  text-shadow: 5px 4px 9px rgba(0, 0, 0, 0.35);
+  background: linear-gradient(171deg, #775437 0.1220703125%, #f2c082 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  margin-bottom: 10vh;
+}
+.invitation-code {
+  width: 75%;
+  padding-left: 1.6vw;
+  margin: 0 auto;
+  border: 2px solid #e4e4e4;
+  border-radius: 14px;
+  margin-bottom: 15vh;
+}
+/deep/ .el-input__inner {
+  background-color: transparent !important;
+  border-color: transparent;
+}
+.address {
+  font-size: 0.2rem;
+  text-align: center;
+  font-family: OPPOSans;
+  font-weight: normal;
+  color: #edbc80;
+  line-height: 34px;
+}
+.input-code {
+  width: 45vw;
+}
+.submit-btn {
+  width: 100%;
+  text-align: center;
+
+  .btn {
+    width: 47.2vw;
+    background: linear-gradient(165deg, #775437, #f2c082);
+    border-radius: 40px;
+  }
+}
+/deep/.el-button {
+  border-color: transparent;
+  border-radius: 40px;
+  font-weight: 400;
+  font-size: 1.3rem;
+  color: #fffefe;
+}
+.connect-btn {
+  width: 50%;
+  text-align: center;
+  line-height: 4vh;
+  height: 4vh;
+  margin: 0 auto;
+  margin-bottom: 4vh;
+  font-size: 1.4rem;
+  background: linear-gradient(165deg, #775437, #f2c082);
+  border-radius: 40px;
+}
+</style>
--- a/src/views/Success.vue
+++ b/src/views/Success.vue
@ -0,0 +1,15 @@
+<template>
+  <div>
+    
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
--- a/vue.config.js
+++ b/vue.config.js
@ -0,0 +1,5 @@
+const { defineConfig } = require('@vue/cli-service')
+module.exports = {
+  transpileDependencies: true,
+  lintOnSave: false//关闭语法检查
+}
--- a/yarn.lock
+++ b/yarn.lock