Browse Source

commit

master
yyy9608 8 months ago
parent
commit
445564d321
  1. 3
      package.json
  2. 4
      public/index.html
  3. 8
      src/App.vue
  4. BIN
      src/assets/logo-black.png
  5. BIN
      src/assets/logo.png
  6. 186
      src/components/layout.vue
  7. 2
      src/components/myModal.vue
  8. 5
      src/lang/index.js
  9. 150
      src/router/index.js
  10. 6
      src/store/index.js
  11. 792
      src/views/FileStorage.vue
  12. 441
      src/views/HomeIndex.vue
  13. 52
      src/wallet/metamask.js

3
package.json

@ -4,7 +4,8 @@
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
"build": "vue-cli-service build",
"deploy:prod": "npm run build && scp -r ./dist/* vpsDcminer:/data/wwwroot/netdisk"
},
"dependencies": {
"@antv/l7": "^2.15.5",

4
public/index.html

@ -5,9 +5,9 @@
<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=0.3, minimum-scale=0.3, maximum-scale=1, user-scalable=yes">
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=yes">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>Titan Storage</title>
<title>BUZZ Netdisk</title>
<!-- <title><%= htmlWebpackPlugin.options.title %></title> -->
</head>
<body>

8
src/App.vue

@ -40,6 +40,12 @@ export default {
};
</script>
<style lang="less">
.el-progress-bar {
padding:0px !important;
width:85% !important;
}
.language-color-two {
margin-left: 20px;
font-size: 18px;
@ -545,6 +551,8 @@ input:focus {
}
}
.metacustomClass {
max-width: 95vw;
.el-button--default {
background: #67c23a !important;
color: #fff !important;

BIN
src/assets/logo-black.png

After

Width: 90  |  Height: 64  |  Size: 5.1 KiB

BIN
src/assets/logo.png

After

Width: 150  |  Height: 108  |  Size: 6.8 KiB

186
src/components/layout.vue

@ -1,80 +1,40 @@
<template>
<el-container>
<div>
<el-main style="background: #f6f6f6;max-width:100vw;padding:0">
<div style="max-width:100vw;min-height:100vh"><router-view /></div>
</el-main>
<el-container v-if="false">
<el-aside width="324px">
<div class="aside">
<div style="margin-left: 30px">
<img
style="width: 226px; height: 34px"
src="../assets/newimages/TTs-logonew.svg"
/>
<img style="width: 226px; height: 34px" src="../assets/newimages/TTs-logonew.svg" />
</div>
<div
style="margin-bottom: 24px; position: relative; z-index: 10"
@click="tabid(1, '/home/dashboard')"
:class="$route.path == '/home/dashboard' ? 'asideColoe' : ''"
>
<img
class="imgMargin-left"
v-if="$route.path == '/home/dashboard'"
src="../assets/storageImg/Dashboard-1.png"
/>
<img
class="imgMargin-left"
v-else
src="../assets/storageImg/Dashboard.png"
/>
<div style="margin-bottom: 24px; position: relative; z-index: 10" @click="tabid(1, '/home/dashboard')"
:class="$route.path == '/home/dashboard' ? 'asideColoe' : ''">
<img class="imgMargin-left" v-if="$route.path == '/home/dashboard'"
src="../assets/storageImg/Dashboard-1.png" />
<img class="imgMargin-left" v-else src="../assets/storageImg/Dashboard.png" />
{{ $t("仪表盘") }}
</div>
<div
style="margin-bottom: 24px; position: relative; z-index: 10"
@click="tabid(2, '/home/fileStorage')"
:class="$route.path == '/home/fileStorage' ? 'asideColoe' : ''"
>
<img
class="imgMargin-left"
v-if="$route.path == '/home/fileStorage'"
src="../assets/storageImg/Folder-1.png"
/>
<img
class="imgMargin-left"
v-else
src="../assets/storageImg/Folder.png"
/>
<div style="margin-bottom: 24px; position: relative; z-index: 10" @click="tabid(2, '/home/fileStorage')"
:class="$route.path == '/home/fileStorage' ? 'asideColoe' : ''">
<img class="imgMargin-left" v-if="$route.path == '/home/fileStorage'"
src="../assets/storageImg/Folder-1.png" />
<img class="imgMargin-left" v-else src="../assets/storageImg/Folder.png" />
{{ $t("文件") }}
</div>
<div
style="margin-bottom: 24px; position: relative; z-index: 10"
@click="tabid(3, '/home/key')"
:class="$route.path == '/home/key' ? 'asideColoe' : ''"
>
<img
class="imgMargin-left"
v-if="$route.path == '/home/key'"
src="../assets/storageImg/Other-1.png"
/>
<img
class="imgMargin-left"
v-else
src="../assets/storageImg/Other.png"
/>
<div style="margin-bottom: 24px; position: relative; z-index: 10" @click="tabid(3, '/home/key')"
:class="$route.path == '/home/key' ? 'asideColoe' : ''">
<img class="imgMargin-left" v-if="$route.path == '/home/key'" src="../assets/storageImg/Other-1.png" />
<img class="imgMargin-left" v-else src="../assets/storageImg/Other.png" />
API Keys
</div>
<div
style="margin-bottom: 24px; position: relative; z-index: 10"
@click="tabid(4, '/home/center')"
:class="$route.path == '/home/center' ? 'asideColoe' : ''"
>
<img
class="imgMargin-left"
v-if="$route.path == '/home/center'"
src="../assets/storageImg/Invite Friends-1.png"
/>
<img
class="imgMargin-left"
v-else
src="../assets/storageImg/Invite Friends.png"
/>
<div style="margin-bottom: 24px; position: relative; z-index: 10" @click="tabid(4, '/home/center')"
:class="$route.path == '/home/center' ? 'asideColoe' : ''">
<img class="imgMargin-left" v-if="$route.path == '/home/center'"
src="../assets/storageImg/Invite Friends-1.png" />
<img class="imgMargin-left" v-else src="../assets/storageImg/Invite Friends.png" />
{{ $t("个人中心") }}
</div>
<div class="lianjie">
@ -115,13 +75,11 @@
<div @click="jumplink('https://twitter.com/Titannet_dao')">
<img src="../assets/storageImg/Frame 427318629.png" />
</div>
<div
@click="
<div @click="
jumplink(
'https://filecoinproject.slack.com/archives/C03QG9433HA'
)
"
>
">
<img src="../assets/storageImg/Frame 427318630.png" />
</div>
<div></div>
@ -143,41 +101,21 @@
<!-- <span v-if="address" class="el-dropdown-link">{{`${address.slice(0, 6)}....${address.slice(address.length - 4,address.length)}` || emailAddress}}</span>
<span v-else class="el-dropdown-link">{{emailAddress}}</span> -->
<div class="login-el-icon--right">
<img
v-if="loginType == 1"
class="iconImgSize"
src="../assets/storageImg/Frame 427318626.png"
/>
<img
v-if="loginType == 2"
class="iconImgSize"
src="../assets/storageImg/Frame 427318625-1.png"
/>
<img
v-if="loginType == 3"
class="iconImgSize"
src="../assets/storageImg/Frame 427318625.png"
/>
<span
v-if="address.indexOf('@') > -1"
class="el-dropdown-link1"
>{{ address }}</span
>
<img v-if="loginType == 1" class="iconImgSize" src="../assets/storageImg/Frame 427318626.png" />
<img v-if="loginType == 2" class="iconImgSize" src="../assets/storageImg/Frame 427318625-1.png" />
<img v-if="loginType == 3" class="iconImgSize" src="../assets/storageImg/Frame 427318625.png" />
<span v-if="address.indexOf('@') > -1" class="el-dropdown-link1">{{ address }}</span>
<span v-else class="el-dropdown-link1">{{
`${address.slice(0, 6)}....${address.slice(
address.length - 4,
address.length
)}` || emailAddress
}}</span>
<i
style="cursor: pointer"
class="el-icon-arrow-down el-icon--right"
></i>
<i style="cursor: pointer" class="el-icon-arrow-down el-icon--right"></i>
</div>
<el-dropdown-menu slot="dropdown" style="width: 100px">
<el-dropdown-item @click.native="loginout"
>{{ $t("登出") }}
<el-dropdown-item @click.native="loginout">{{ $t("登出") }}
</el-dropdown-item>
<!-- <el-dropdown-item>狮子头</el-dropdown-item>
<el-dropdown-item>螺蛳粉</el-dropdown-item>
@ -189,17 +127,10 @@
<span>{{selectLang =='zh'?'English':'简体中文'}}</span>
<img class="language-img" src="../assets/storageImg/Frame.png">
</div> -->
<div
class="language-color-two"
@click="langToggle(selectLang == 'zh' ? 'en' : 'zh')"
>
<span :class="selectLang == 'en' ? 'activelanguage' : ''"
>En</span
>
<div class="language-color-two" @click="langToggle(selectLang == 'zh' ? 'en' : 'zh')">
<span :class="selectLang == 'en' ? 'activelanguage' : ''">En</span>
<span>/</span>
<span :class="selectLang == 'zh' ? 'activelanguage' : ''"
>中文</span
>
<span :class="selectLang == 'zh' ? 'activelanguage' : ''">中文</span>
</div>
<!-- <div class="language">
<el-select class="language-color" v-model="selectLang" placeholder="Select" @change="langToggle">
@ -239,6 +170,7 @@
<!-- <el-footer>Footer</el-footer> -->
</el-container>
</el-container>
</div>
</template>
<script>
@ -303,18 +235,22 @@ export default {
.language-color-two {
margin-left: 20px;
font-size: 18px;
.activelanguage {
color: #06c270 !important;
font-weight: bolder;
}
>span:nth-child(2) {
margin: 0 3px;
}
>span:nth-child(1),
>span:nth-child(3) {
cursor: pointer;
}
}
.language-color {
width: 111px;
height: 38px;
@ -327,24 +263,28 @@ export default {
align-items: center;
justify-content: center;
cursor: pointer;
.language-img {
width: 15px !important;
height: 15px !important;
margin-left: 5px;
}
}
.el-dropdown-link1 {
color: #718096 !important;
font-size: 20px !important;
font-weight: 500;
cursor: pointer;
}
.iconImgSize {
width: 28px;
height: 28px;
margin-right: 12px;
vertical-align: middle;
}
.login-el-icon--right {
/deep/ .el-icon--right {
width: 16px !important;
@ -353,26 +293,32 @@ export default {
font-weight: bold;
}
}
.language {
/deep/ .el-select .el-input__inner:focus {
border: none !important;
}
}
.lianjie {
position: absolute;
bottom: 43px;
left: 0;
.footer-img {
>img {
width: 324px;
height: auto;
}
}
.lianjie-item {
display: flex;
.item2 {
margin: 0 10px;
}
.item {
width: 54px;
height: 54px;
@ -391,48 +337,60 @@ export default {
.el-select .el-input.is-focus .el-input__inner {
border-color: none !important;
}
/deep/ .language-color.el-select .el-input .el-select__caret {
color: #fff !important;
}
.language-color {
margin-left: 10px;
/deep/ .el-input.is-active .el-input__inner,
.el-input__inner:focus {
border: none !important;
}
/deep/ .el-range-editor.is-active,
.el-range-editor.is-active:hover,
.el-select .el-input.is-focus .el-input__inner {
border: none !important;
}
/deep/ .el-select .el-input .el-select__caret {
color: #fff !important;
}
/deep/ .el-input__inner {
background: #67c23a !important;
color: #fff !important;
}
/deep/ .el-range-editor.is-active,
.el-range-editor.is-active:hover,
.el-select .el-input.is-focus .el-input__inner {
border-color: #67c23a !important;
}
/deep/ .el-select-dropdown__item.selected {
color: #67c23a !important;
}
}
.language-color.el-select {
width: 120px;
}
// .el-header {
// height: 81px !important;
// }
.el-main {
padding: 34px 36px 46px 36px !important;
}
.el-header {
padding: 0 !important;
}
// .el-header-title{
// height: 80px;
// background: #FFFFFF;
@ -461,44 +419,55 @@ export default {
box-sizing: border-box;
box-shadow: 2px 2px 8px 0px rgba(82, 90, 102, 0.08),
1px 1px 2px 0px rgba(82, 90, 102, 0.04);
>div:nth-child(1) {
color: rgba(31, 44, 55, 0.8);
font-weight: bold;
font-size: 20px;
}
>div:nth-child(2) {
display: flex;
// margin-right:100px;
align-items: center;
.lianje-new-color {
margin-right: 30px;
display: flex;
align-items: center;
>div:nth-child(5) {
width: 1px;
height: 25px;
background: rgba(17, 193, 109, 0.8);
}
>div {
cursor: pointer;
}
display: flex;
>div:nth-child(2) {
margin: 0 15px;
}
>div:nth-child(4) {
margin: 0 30px 0 15px;
}
>div {
display: flex;
align-items: center;
justify-content: center;
>img {
width: 40px;
height: 40px;
}
}
}
// >div{
// cursor: pointer;
// >img{
@ -509,11 +478,13 @@ export default {
// }
}
}
/deep/ .el-aside {
background: #090c0e;
border-radius: 0px 32px 32px 0px;
color: #666;
}
.aside {
// padding: 103px 20px;
padding-top: 98px;
@ -523,6 +494,7 @@ export default {
height: 100%;
box-sizing: border-box;
color: #adb4aa;
// .aside-img{
// width:24px;
// height:24px;
@ -534,6 +506,7 @@ export default {
color: #000;
color: #fff !important;
}
>div:nth-child(2),
:nth-child(3),
:nth-child(4),
@ -548,6 +521,7 @@ export default {
display: flex;
align-items: center;
border-radius: 30px !important;
.imgMargin-left {
width: 24px;
height: 24px;
@ -555,9 +529,11 @@ export default {
margin-left: 54px;
}
}
>div:nth-child(2) {
margin-top: 60px;
}
>div:nth-child(1) {
cursor: pointer;
// font-size: 24px;

2
src/components/myModal.vue

@ -25,7 +25,7 @@ export default {
},
width: {
type: Number | String,
default: "50%",
default: "100%",
},
append: {
type: Boolean,

5
src/lang/index.js

@ -19,9 +19,9 @@ const messages = {
}
let lang = '';
try{
lang = JSON.parse(localStorage.getItem('login-info')).lang || 'en';
lang = JSON.parse(localStorage.getItem('login-info')).lang || 'zh';
} catch(err) {
lang = 'en';
lang = 'zh';
}
const i18n = new VueI18n({
messages,
@ -30,3 +30,4 @@ const i18n = new VueI18n({
})
ElementLocale.i18n((key, value) => i18n.t(key, value))
export default i18n

150
src/router/index.js

@ -24,46 +24,46 @@ const routes = [
name: 'homeindex',
component: () => import(/* webpackChunkName: "homeindex" */ '../views/HomeIndex.vue')
},
{
path: '/redirect',
name: 'redirect',
component: () => import(/* webpackChunkName: "homeindex" */ '../views/redirect.vue')
},
{
path: '/Upload',
name: 'Upload',
component: () => import(/* webpackChunkName: "homeindex" */ '../views/Upload.vue')
},
{
path: '/newUpload',
name: 'newUpload',
component: () => import(/* webpackChunkName: "homeindex" */ '../views/newUpload.vue')
},
{
path: '/newUploadcopy',
name: 'newUploadcopy',
component: () => import(/* webpackChunkName: "homeindex" */ '../views/newUploadcopy.vue')
},
{
path: '/preview',
name: 'preview',
component: () => import(/* webpackChunkName: "homeindex" */ '../views/preview.vue')
},
{
path: '/storagenetwork',
name: 'storagenetwork',
component: () => import(/* webpackChunkName: "homeindex" */ '../views/storagenetwork.vue')
},
{
path: '/distribution',
name: 'distribution',
component: () => import(/* webpackChunkName: "homeindex" */ '../views/distribution.vue')
},
{
path: '/distributionstatus',
name: 'distributionstatus',
component: () => import(/* webpackChunkName: "homeindex" */ '../views/distributionstatus.vue')
},
// {
// path: '/redirect',
// name: 'redirect',
// component: () => import(/* webpackChunkName: "homeindex" */ '../views/redirect.vue')
// },
// {
// path: '/Upload',
// name: 'Upload',
// component: () => import(/* webpackChunkName: "homeindex" */ '../views/Upload.vue')
// },
// {
// path: '/newUpload',
// name: 'newUpload',
// component: () => import(/* webpackChunkName: "homeindex" */ '../views/newUpload.vue')
// },
// {
// path: '/newUploadcopy',
// name: 'newUploadcopy',
// component: () => import(/* webpackChunkName: "homeindex" */ '../views/newUploadcopy.vue')
// },
// {
// path: '/preview',
// name: 'preview',
// component: () => import(/* webpackChunkName: "homeindex" */ '../views/preview.vue')
// },
// {
// path: '/storagenetwork',
// name: 'storagenetwork',
// component: () => import(/* webpackChunkName: "homeindex" */ '../views/storagenetwork.vue')
// },
// {
// path: '/distribution',
// name: 'distribution',
// component: () => import(/* webpackChunkName: "homeindex" */ '../views/distribution.vue')
// },
// {
// path: '/distributionstatus',
// name: 'distributionstatus',
// component: () => import(/* webpackChunkName: "homeindex" */ '../views/distributionstatus.vue')
// },
{
@ -74,25 +74,25 @@ const routes = [
needAuth: true
},
children: [
{
path: 'dashboard',
name: 'dashboard',
meta: {
needAuth: true
},
// 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/dashboard.vue')
},
{
path: 'upload',
name: 'upload',
meta: {
needAuth: true
},
component: () => import(/* webpackChunkName: "upload" */ '../views/Upload.vue')
},
// {
// path: 'dashboard',
// name: 'dashboard',
// meta: {
// needAuth: true
// },
// // 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/dashboard.vue')
// },
// {
// path: 'upload',
// name: 'upload',
// meta: {
// needAuth: true
// },
// component: () => import(/* webpackChunkName: "upload" */ '../views/Upload.vue')
// },
//文件存储
{
path: 'fileStorage',
@ -103,23 +103,23 @@ const routes = [
component: () => import(/* webpackChunkName: "homeindex" */ '../views/FileStorage.vue')
},
// api Key
{
path: 'key',
name: 'key',
meta: {
needAuth: true
},
component: () => import(/* webpackChunkName: "homeindex" */ '../views/Apikey.vue')
},
// {
// path: 'key',
// name: 'key',
// meta: {
// needAuth: true
// },
// component: () => import(/* webpackChunkName: "homeindex" */ '../views/Apikey.vue')
// },
//个人中心
{
path: 'center',
name: 'center',
meta: {
needAuth: true
},
component: () => import(/* webpackChunkName: "homeindex" */ '../views/center.vue')
},
// {
// path: 'center',
// name: 'center',
// meta: {
// needAuth: true
// },
// component: () => import(/* webpackChunkName: "homeindex" */ '../views/center.vue')
// },
]
},
{

6
src/store/index.js

@ -10,7 +10,7 @@ export default new Vuex.Store({
publicKey: "",
token: '',
emailAddress: '',
lang: 'en',
lang: 'zh',
usertoken: '',
loginType: 1, //1:filecoin 2:metamask 3:web2
},
@ -42,7 +42,7 @@ export default new Vuex.Store({
},
setToken(state, params) {
state.token = params;
router.push('/home/dashboard')
router.push('/home/fileStorage')
},
onlyToken(state, params) {
state.token = params;
@ -54,7 +54,7 @@ export default new Vuex.Store({
state.address = params;
await ingredients(params)
if (router.currentRoute.path.indexOf('/home') === -1) {
router.push('/home/dashboard')
router.push('/home/fileStorage')
} else {
window.location.reload()
}

792
src/views/FileStorage.vue
File diff suppressed because it is too large
View File

441
src/views/HomeIndex.vue

@ -15,21 +15,32 @@
<div class="asteroids-belt"></div>
</div>
<div class="titan-storage-login">
<div @click="connectMetamask">
<div style="display:flex;justify-content: center;">
<img src="@/assets/logo.png" alt="" class="logo-img">
</div>
<div style="text-align:center;font-weight: bold;">点击登录</div>
</div>
<div style="margin-top:60px;text-align:center">基于 Filecoin(兼容IPFS)</div>
<div style="text-align:center;font-size:18px;font-weight:bold;margin-top:12px"><span
style="color:#3DFD08">web3</span>最佳存储解决方案</div>
<div style="display:flex;justify-content: center;margin-top:12px">
<div class="title-box">DCDN服务</div>
<div class="title-box" style="margin:0px 10px">永续存储服务</div>
<div class="title-box">网站&DAPP托管服务</div>
</div>
</div>
<div v-if="false" class="titan-storage-login">
<div class="titan-storage-login-content">
<div class="titan-storage-login-content-left">
<div class="logo-top">
<img src="../assets/newimages/TTs-logonew.svg" />
<div
@click="langToggle(selectLang == 'zh' ? 'en' : 'zh')"
class="language-color-two language-color-two1"
>
<span :class="selectLang == 'en' ? 'activelanguage' : ''"
>En</span
>
<div @click="langToggle(selectLang == 'zh' ? 'en' : 'zh')" class="language-color-two language-color-two1">
<span :class="selectLang == 'en' ? 'activelanguage' : ''">En</span>
<span>/</span>
<span :class="selectLang == 'zh' ? 'activelanguage' : ''"
>中文</span
>
<span :class="selectLang == 'zh' ? 'activelanguage' : ''">中文</span>
</div>
</div>
<div class="titan-storage-login-title">
@ -69,22 +80,10 @@
<div class="password-content-box forget-content">
<div class="title1">{{ $t("邮箱") }}</div>
<div class="input1">
<el-input
v-if="loginTab == 1"
class="input"
v-model="phone_number"
clearabl
@keyup.enter.native="loginBtnpassword"
:placeholder="$t('请输入邮箱')"
></el-input>
<el-input
v-if="loginTab == 2"
class="input"
@keyup.enter.native="loginBtnEmail"
clearable
v-model="phone_number"
:placeholder="$t('请输入邮箱')"
></el-input>
<el-input v-if="loginTab == 1" class="input" v-model="phone_number" clearabl
@keyup.enter.native="loginBtnpassword" :placeholder="$t('请输入邮箱')"></el-input>
<el-input v-if="loginTab == 2" class="input" @keyup.enter.native="loginBtnEmail" clearable
v-model="phone_number" :placeholder="$t('请输入邮箱')"></el-input>
</div>
<div class="title2" v-if="loginTab == 1">{{ $t("密码") }}</div>
<div class="title2" v-if="loginTab == 2">
@ -92,43 +91,23 @@
</div>
<div class="input1" v-if="loginTab == 1">
<div class="email-code">
<el-input
class="input"
:type="passwordType"
:placeholder="$t('请输入密码')"
@keyup.enter.native="loginBtnpassword"
v-model="password1"
clearable
></el-input>
<el-input class="input" :type="passwordType" :placeholder="$t('请输入密码')"
@keyup.enter.native="loginBtnpassword" v-model="password1" clearable></el-input>
<div class="img-password" @click="showPwd">
<img
:src="
passwordType === 'password'
<img :src="passwordType === 'password'
? require('../assets/tomert/Frame-2.png')
: require('../assets/tomert/Frame-1.png')
"
/>
" />
</div>
</div>
</div>
<div class="input1" v-if="loginTab == 2">
<div class="email-code">
<el-input
class="input"
@keyup.enter.native="loginBtnEmail"
maxlength="6"
:placeholder="$t('请输入验证码')"
v-model="re_phone_code"
clearable
></el-input>
<el-input class="input" @keyup.enter.native="loginBtnEmail" maxlength="6" :placeholder="$t('请输入验证码')"
v-model="re_phone_code" clearable></el-input>
<div class="get-code">
<el-button
:loading="sendLoading"
class="cont"
:class="regStr != $t('获取验证码') ? 'dis' : ''"
@click="getCodeEmail"
>{{ regStr }}</el-button
>
<el-button :loading="sendLoading" class="cont" :class="regStr != $t('获取验证码') ? 'dis' : ''"
@click="getCodeEmail">{{ regStr }}</el-button>
</div>
</div>
</div>
@ -142,21 +121,11 @@
</div>
<div class="password-content-btn">
<div class="cont hover-Btn-color">
<el-button
v-if="loginTab == 1"
:loading="loading"
@keyup.enter.native="loginBtnpassword"
@click="loginBtnpassword"
>{{ $t("登录") }}</el-button
>
<el-button v-if="loginTab == 1" :loading="loading" @keyup.enter.native="loginBtnpassword"
@click="loginBtnpassword">{{ $t("登录") }}</el-button>
<div class="login-line"></div>
<el-button
v-if="loginTab == 2"
:loading="loading1"
@keyup.enter.native="loginBtnEmail"
@click="loginBtnEmail"
>{{ $t("登录") }}</el-button
>
<el-button v-if="loginTab == 2" :loading="loading1" @keyup.enter.native="loginBtnEmail"
@click="loginBtnEmail">{{ $t("登录") }}</el-button>
<div class="login-line"></div>
</div>
</div>
@ -171,74 +140,42 @@
<div class="password-content-box">
<div class="title1">{{ $t("邮箱") }}</div>
<div class="input1">
<el-input
class="input"
:placeholder="$t('请输入邮箱')"
v-model="for_phone_number"
clearable
></el-input>
<el-input class="input" :placeholder="$t('请输入邮箱')" v-model="for_phone_number" clearable></el-input>
</div>
<div class="title2">{{ $t("邮箱验证码") }}</div>
<div class="input1">
<div class="email-code">
<el-input
class="input"
maxlength="6"
:placeholder="$t('请输入验证码')"
v-model="for_phone_code"
clearable
></el-input>
<el-input class="input" maxlength="6" :placeholder="$t('请输入验证码')" v-model="for_phone_code"
clearable></el-input>
<div class="get-code">
<el-button
class="cont"
:loading="sendLoading"
style="cursor: pointer; height: 32px"
:class="regStr != $t('获取验证码') ? 'dis' : ''"
@click="getforgetCode"
>{{ regStr }}</el-button
>
<el-button class="cont" :loading="sendLoading" style="cursor: pointer; height: 32px"
:class="regStr != $t('获取验证码') ? 'dis' : ''" @click="getforgetCode">{{ regStr }}</el-button>
</div>
</div>
</div>
<div class="title2">{{ $t("密码") }}</div>
<div class="input1">
<div class="email-code">
<el-input
class="input"
:placeholder="$t('请输入密码')"
v-model="for_phone_password"
:type="passwordType"
clearable
></el-input>
<el-input class="input" :placeholder="$t('请输入密码')" v-model="for_phone_password" :type="passwordType"
clearable></el-input>
<div class="img-password" @click="showPwd">
<img
:src="
passwordType === 'password'
<img :src="passwordType === 'password'
? require('../assets/tomert/Frame-2.png')
: require('../assets/tomert/Frame-1.png')
"
/>
" />
</div>
</div>
</div>
<div class="title2">{{ $t("确认密码") }}</div>
<div class="input1">
<div class="email-code">
<el-input
class="input"
:placeholder="$t('请输入确认密码')"
v-model="age_for_phone_password"
:type="passwordType"
clearable
></el-input>
<el-input class="input" :placeholder="$t('请输入确认密码')" v-model="age_for_phone_password"
:type="passwordType" clearable></el-input>
<div class="img-password" @click="showPwd">
<img
:src="
passwordType === 'password'
<img :src="passwordType === 'password'
? require('../assets/tomert/Frame-2.png')
: require('../assets/tomert/Frame-1.png')
"
/>
" />
</div>
</div>
</div>
@ -270,73 +207,42 @@
<div class="password-content-box">
<div class="title1">{{ $t("邮箱") }}</div>
<div class="input1">
<el-input
class="input"
:placeholder="$t('请输入邮箱号')"
v-model="rg_phone_number"
clearable
></el-input>
<el-input class="input" :placeholder="$t('请输入邮箱号')" v-model="rg_phone_number" clearable></el-input>
</div>
<div class="title2">{{ $t("邮箱验证码") }}</div>
<div class="input1">
<div class="email-code">
<el-input
class="input"
maxlength="6"
:placeholder="$t('请输入验证码')"
v-model="usernameCode"
clearable
></el-input>
<el-input class="input" maxlength="6" :placeholder="$t('请输入验证码')" v-model="usernameCode"
clearable></el-input>
<div class="get-code">
<el-button
class="cont"
:loading="sendLoading"
:class="regStr != $t('获取验证码') ? 'dis' : ''"
@click="reg_get_Code"
>{{ regStr }}</el-button
>
<el-button class="cont" :loading="sendLoading" :class="regStr != $t('获取验证码') ? 'dis' : ''"
@click="reg_get_Code">{{ regStr }}</el-button>
</div>
</div>
</div>
<div class="title2">{{ $t("密码") }}</div>
<div class="input1">
<div class="email-code">
<el-input
class="input"
:placeholder="$t('home1')"
v-model="rg_phone_password"
:type="passwordType"
clearable
></el-input>
<el-input class="input" :placeholder="$t('home1')" v-model="rg_phone_password" :type="passwordType"
clearable></el-input>
<div class="img-password" @click="showPwd">
<img
:src="
passwordType === 'password'
<img :src="passwordType === 'password'
? require('../assets/tomert/Frame-2.png')
: require('../assets/tomert/Frame-1.png')
"
/>
" />
</div>
</div>
</div>
<div class="title2">{{ $t("确认密码") }}</div>
<div class="input1">
<div class="email-code">
<el-input
class="input"
:placeholder="$t('请输入确认密码')"
v-model="age_rg_phone_password"
:type="passwordType"
clearable
></el-input>
<el-input class="input" :placeholder="$t('请输入确认密码')" v-model="age_rg_phone_password"
:type="passwordType" clearable></el-input>
<div class="img-password" @click="showPwd">
<img
:src="
passwordType === 'password'
<img :src="passwordType === 'password'
? require('../assets/tomert/Frame-2.png')
: require('../assets/tomert/Frame-1.png')
"
/>
" />
</div>
</div>
</div>
@ -364,28 +270,13 @@
</div>
<div class="titan-storage-login-button">
<div class="login-button-left">
<img
@click="jumplink('https://medium.com/@8355697')"
class="img1"
src="../assets/tomert/Frame 427318627.png"
/>
<img
@click="jumplink('https://t.me/titannet_dao')"
class="img2"
src="../assets/tomert/Frame 427318628.png"
/>
<img
@click="jumplink('https://twitter.com/Titannet_dao')"
class="img3"
src="../assets/tomert/Frame 427318629.png"
/>
<img
@click="
<img @click="jumplink('https://medium.com/@8355697')" class="img1" src="../assets/tomert/Frame 427318627.png" />
<img @click="jumplink('https://t.me/titannet_dao')" class="img2" src="../assets/tomert/Frame 427318628.png" />
<img @click="jumplink('https://twitter.com/Titannet_dao')" class="img3"
src="../assets/tomert/Frame 427318629.png" />
<img @click="
jumplink('https://filecoinproject.slack.com/archives/C03QG9433HA')
"
class="img4"
src="../assets/tomert/Frame 427318630.png"
/>
" class="img4" src="../assets/tomert/Frame 427318630.png" />
</div>
<div class="login-button-right">
<div>Login</div>
@ -398,19 +289,11 @@
<div class="cont">{{ $t("创建钱包") }}</div>
<div class="line"></div>
</div>
<div
class="create"
@click="showFileLogin(2)"
style="margin-top: 10px"
>
<div class="create" @click="showFileLogin(2)" style="margin-top: 10px">
<div class="cont">{{ $t("导入钱包") }}</div>
<div class="line"></div>
</div>
<div
class="create"
@click="showFileLogin(3)"
style="margin-top: 10px"
>
<div class="create" @click="showFileLogin(3)" style="margin-top: 10px">
<div class="cont">{{ $t("导入秘钥") }}</div>
<div class="line"></div>
</div>
@ -427,7 +310,7 @@
</div>
</div>
</div>
<loginPage ref="loginPage" />
<!-- <loginPage ref="loginPage" /> -->
</div>
</template>
<script >
@ -856,8 +739,10 @@ export default {
padding: 0 15px;
border-radius: 20px;
}
.password-content-btn {
position: relative;
.login-line {
position: absolute;
width: 82px;
@ -868,26 +753,27 @@ export default {
margin-left: -41px;
display: none;
}
&:hover {
.hover-Btn-color {
background: linear-gradient(
180deg,
background: linear-gradient(180deg,
#25775a 0%,
#1a3f2f 26%,
#0d3023 52%,
#183629 76%,
#154d35 100%
)
rgba(250, 251, 235, 0.1) !important;
#154d35 100%) rgba(250, 251, 235, 0.1) !important;
}
.login-line {
display: block;
}
}
}
.btn-click-color {
cursor: pointer;
}
.video {
position: fixed;
left: 0;
@ -896,20 +782,23 @@ export default {
height: auto;
object-fit: cover;
}
.bg {
min-width: 1240px;
width: 100vw;
height: 100%;
-webkit-font-smoothing: antialiased;
background: radial-gradient(ellipse at bottom, #1c2837 0%, #050608 100%);
background-attachment: fixed;
background-size: contain;
}
.titan-storage-login-button {
height: 100px;
display: flex;
justify-content: space-between;
padding-left: 60px;
padding-right: 31px;
.login-button-right {
display: flex;
color: #fff;
@ -917,17 +806,17 @@ export default {
height: 50px;
display: flex;
align-items: center;
.log-tab {
margin-left: 25px;
width: 275px;
height: 50px;
border-radius: 800px;
padding: 2px;
background: linear-gradient(
180deg,
background: linear-gradient(180deg,
rgba(163, 216, 156, 0.4),
rgba(63, 219, 41, 0.4)
);
rgba(63, 219, 41, 0.4));
.contaaa {
width: 100%;
height: 100%;
@ -936,49 +825,51 @@ export default {
display: flex;
align-items: center;
justify-content: center;
.meta1 {
width: 32px;
height: 32px;
position: relative;
cursor: pointer;
&:hover {
.login-type {
display: block;
}
}
.login-type {
position: absolute;
bottom: 0px;
left: -54px;
padding-bottom: 50px;
display: none;
.create {
&:hover {
.cont {
background: linear-gradient(
180deg,
background: linear-gradient(180deg,
#25775a 0%,
#1a3f2f 26%,
#0d3023 52%,
#183629 76%,
#154d35 100%
)
rgba(250, 251, 235, 0.2);
#154d35 100%) rgba(250, 251, 235, 0.2);
}
.line {
display: block;
}
}
width: 129px;
height: 36px;
padding: 1px;
position: relative;
border-radius: 8px;
background: linear-gradient(
180deg,
background: linear-gradient(180deg,
rgba(144, 168, 141, 1),
rgba(182, 221, 176, 0)
);
rgba(182, 221, 176, 0));
.line {
position: absolute;
width: 34px;
@ -989,19 +880,17 @@ export default {
margin-left: -17px;
display: none;
}
.cont {
width: 100%;
height: 100%;
border-radius: 8px;
background: linear-gradient(
180deg,
background: linear-gradient(180deg,
#25775a 0%,
#1a3f2f 26%,
#0d3023 52%,
#183629 76%,
#154d35 100%
)
rgba(250, 251, 235, 100%);
#154d35 100%) rgba(250, 251, 235, 100%);
font-weight: bold;
color: #a1ffa1;
font-size: 12px;
@ -1012,25 +901,30 @@ export default {
}
}
}
>img {
width: 100%;
height: 100%;
}
}
.meta2 {
width: 33px;
height: 30px;
margin: 0 40px;
cursor: pointer;
>img {
width: 100%;
height: 100%;
}
}
.meta3 {
width: 28px;
height: 29px;
cursor: pointer;
>img {
width: 100%;
height: 100%;
@ -1039,24 +933,29 @@ export default {
}
}
}
.login-button-left {
>img {
cursor: pointer;
}
.img1 {
width: 30px;
height: 25px;
}
.img2 {
width: 28px;
height: 24px;
margin: 0 40px;
}
.img3 {
width: 30px;
height: 25px;
margin-right: 40px;
}
.img4 {
width: 30px;
height: 30px;
@ -1065,14 +964,33 @@ export default {
}
.titan-storage-login {
color: #fff;
height: 100%;
position: relative;
z-index: 1111;
width: 100%;
.logo-img {
width: 60px;
height: 46px;
object-fit: contain;
margin-top: 50px;
}
.title-box {
border: 2px solid;
border-image: linear-gradient(90deg, #40C11C 0%, #4AC0CD 100%) 1;
padding: 5px;
background: #20252B;
border-radius: 20px;
font-size: 12px;
}
.titan-storage-login-content {
display: flex;
justify-content: space-between;
height: calc(100% - 100px);
.titan-storage-login-content-right {
height: 100%;
display: flex;
@ -1080,19 +998,20 @@ export default {
padding-right: 31px;
color: #f5f5f5;
padding-top: 36px;
.titan-storage-login-box {
/deep/ input::placeholder {
color: #dfdfdf;
}
border-radius: 16px;
padding: 1px;
background: linear-gradient(
139deg,
background: linear-gradient(139deg,
rgba(106, 121, 116, 1),
rgba(100, 122, 87, 0.1),
rgba(69, 87, 81, 1),
rgba(100, 122, 87, 0.1)
);
rgba(100, 122, 87, 0.1));
.content {
width: 100%;
height: 100%;
@ -1100,23 +1019,29 @@ export default {
border-radius: 16px !important;
padding: 18px;
box-sizing: border-box;
.password-content-box {
margin-top: 16px;
.reset-Password {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 16px;
>div:nth-child(2) {
font-size: 14px;
>span:nth-child(1) {
color: #697569;
}
>span:nth-child(2) {
color: #7f9d7e;
}
}
}
.register-or-forget {
margin-top: 15px;
display: flex;
@ -1124,29 +1049,28 @@ export default {
color: #7f9d7e;
font-size: 14px;
}
.password-content-btn {
margin-top: 24px;
background: linear-gradient(
180deg,
background: linear-gradient(180deg,
rgba(144, 168, 141, 1),
rgba(182, 221, 176, 0)
);
rgba(182, 221, 176, 0));
width: 328px;
height: 40px;
border-radius: 8px;
padding: 1px;
.cont {
width: 100%;
height: 100%;
background: linear-gradient(
180deg,
background: linear-gradient(180deg,
#25775a 0%,
#1a3f2f 26%,
#0d3023 52%,
#183629 76%,
#154d35 100%
);
#154d35 100%);
border-radius: 8px;
/deep/.el-button--default {
width: 100%;
height: 100%;
@ -1158,39 +1082,45 @@ export default {
}
}
}
.title1 {
font-weight: bold;
font-size: 14px;
margin-bottom: 12px;
}
.title2 {
font-weight: bold;
font-size: 14px;
margin-bottom: 8px;
margin-top: 16px;
}
.input1 {
width: 328px;
border-radius: 8px;
padding: 1px;
background: linear-gradient(
181deg,
background: linear-gradient(181deg,
rgba(68, 116, 60, 1),
rgba(39, 102, 94, 1)
);
rgba(39, 102, 94, 1));
/deep/ .el-input__inner {
background: none !important;
border: none !important;
color: #fff !important;
}
.img-password {
margin-right: 15px;
cursor: pointer;
>img {
width: 24px;
height: 24px;
}
}
.email-code {
width: 100%;
height: 100%;
@ -1199,36 +1129,36 @@ export default {
color: #fff !important;
display: flex;
align-items: center;
.get-code {
width: 92px;
height: 32px;
background: linear-gradient(
180deg,
background: linear-gradient(180deg,
rgba(37, 119, 90, 1),
rgba(26, 63, 47, 1),
rgba(13, 48, 35, 1),
rgba(24, 54, 41, 1),
rgba(21, 77, 53, 1)
);
rgba(21, 77, 53, 1));
border-radius: 8px;
padding: 1px;
margin-right: 9px;
flex-shrink: 0;
/deep/ .el-button {
border: none !important;
}
cursor: pointer;
.cont {
width: 100%;
height: 100%;
background: linear-gradient(
180deg,
background: linear-gradient(180deg,
#5d6454 0%,
#28493b 16%,
#052e1c 48%,
#1d3a2e 80%,
#42473c 100%
);
#42473c 100%);
border-radius: 8px;
color: #77ab87;
font-size: 14px;
@ -1239,6 +1169,7 @@ export default {
}
}
}
.input {
width: 100%;
height: 100%;
@ -1248,26 +1179,27 @@ export default {
}
}
}
.login-tab {
display: flex;
font-weight: bold;
font-size: 22px;
align-items: center;
justify-content: center;
.password-tab {
position: relative;
text-align: center;
cursor: pointer;
font-size: 16px;
>div:nth-child(2) {
margin-top: 6px;
// width: 47px;
height: 3px;
background: linear-gradient(
180deg,
background: linear-gradient(180deg,
#839b81 0%,
rgba(78, 148, 122, 0) 100%
);
rgba(78, 148, 122, 0) 100%);
border-radius: 80px 80px 80px 80px;
opacity: 1;
left: 20px;
@ -1275,6 +1207,7 @@ export default {
position: absolute;
}
}
.email-tab {
margin-left: 45px;
}
@ -1282,6 +1215,7 @@ export default {
}
}
}
.titan-storage-login-content-left {
padding-left: 60px;
padding-top: 60px;
@ -1289,10 +1223,12 @@ export default {
flex-direction: column;
flex: 1;
height: 100%;
.logo-top {
display: flex;
align-items: center;
color: #fff;
>img {
display: block;
width: 260px;
@ -1300,28 +1236,31 @@ export default {
margin-right: 20px;
}
}
.titan-storage-login-title {
padding-left: 100px;
height: calc(100% - 60px);
display: flex;
flex-direction: column;
justify-content: center;
.title-serve {
margin-top: 32px;
display: flex;
.serve-DCDN2 {
margin: 0 20px;
}
.serve-DCDN {
width: 209px;
height: 60px;
border-radius: 16px 16px 16px 16px;
padding: 3px;
background: linear-gradient(
133deg,
background: linear-gradient(133deg,
rgba(123, 251, 102, 1),
rgba(3, 161, 191, 1)
);
rgba(3, 161, 191, 1));
>div {
width: 100%;
height: 100%;
@ -1345,10 +1284,12 @@ export default {
color: #ffffff;
line-height: 84px;
letter-spacing: 3px;
.nft-color {
color: #52ff3a;
}
}
.title1 {
font-weight: 400;
color: #ffffff;
@ -1358,22 +1299,24 @@ export default {
}
}
}
.enlishBoxContent {
.titan-storage-login
.titan-storage-login-content
.titan-storage-login-content-left
.titan-storage-login-title {
.titan-storage-login .titan-storage-login-content .titan-storage-login-content-left .titan-storage-login-title {
padding-left: 60px !important;
}
.serve-DCDN2 {
width: 220px !important;
}
.serve-DCDN3 {
width: 280px !important;
}
.serve-DCDN1 {
width: 130px !important;
}
.serve-DCDN {
>div {
font-size: 16px !important;

52
src/wallet/metamask.js

@ -28,35 +28,39 @@ const getSign = (address, callback) => {
}
async function metamask(callback) {
if (!window.ethereum) {
MessageBox.alert(i18n.t('请安装MetaMask钱包后再登录'), {
customClass: 'metacustomClass'
})
callback()
window.location.reload()
return
};
if (window.ethereum.networkVersion != parseInt(chain.chainId)) {
try {
await window.ethereum.request({
method: 'wallet_switchEthereumChain',
params: [{ chainId: chain.chainId }],
const chainId = await window.ethereum.request({
method:'eth_chainId'
})
getAccount(callback)
} catch (res) {
if (res && res.code == 4902) {
try {
await window.ethereum.request({
method: 'wallet_addEthereumChain',
params: [chain],
if (parseInt(chainId) != parseInt(chain.chainId)) {
MessageBox.alert('请切换到FIL网络后再登录', {
customClass: 'metacustomClass'
})
getAccount(callback)
} catch (err) {
callback()
}
// try {
// await window.ethereum.request({
// method: 'wallet_switchEthereumChain',
// params: [{ chainId: chain.chainId }],
// })
// getAccount(callback)
// } catch (res) {
// if (res && res.code == 4902) {
// try {
// await window.ethereum.request({
// method: 'wallet_addEthereumChain',
// params: [chain],
// })
// getAccount(callback)
// } catch (err) {
// callback()
// }
} else {
callback()
}
}
// } else {
// callback()
// }
// }
} else {
getAccount(callback)

Loading…
Cancel
Save