Skip to content

N
NFT
Commit 2bbf1107 authored by hanfeng zhang's avatar hanfeng zhang
Browse files
Options

321

parent 5af1fb4a
Hide whitespace changes
Inline Side-by-side
Showing with 129 additions and 32 deletions
package.json
View file @ 2bbf1107
...@@ -18,6 +18,7 @@ ...@@ -18,6 +18,7 @@
"vue": "^2.6.11", "vue": "^2.6.11",
"vue-fragment": "^1.5.2", "vue-fragment": "^1.5.2",
"vue-router": "^3.2.0", "vue-router": "^3.2.0",
"vue-step-progress": "^0.3.6",
"vuex": "^3.4.0" "vuex": "^3.4.0"
}, },
"devDependencies": { "devDependencies": {
......
public/index.html
View file @ 2bbf1107
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<script src="//at.alicdn.com/t/font_2629369_g7it4mvor7e.js"></script> <script src="//at.alicdn.com/t/font_2629369_yovz3dckpen.js"></script>
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
</head> </head>
<body> <body>
......
src/App.vue
View file @ 2bbf1107
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
</div> </div>
<div class="bot w-11/12 mx-auto"> <div class="bot w-11/12 mx-auto">
<div class="grid grid-cols-4 w-full gap-4"> <div class="grid grid-cols-4 w-full gap-4">
<div class="flex items-center content-center"> <div class="flex items-center content-center" @click="goNTF('create')">
<app-icon name="icon-juben" size="26px" class='icon-box bg-app-red rounded-full mx-auto'></app-icon> <app-icon name="icon-juben" size="26px" class='icon-box bg-app-red rounded-full mx-auto'></app-icon>
</div> </div>
<div class="flex items-center content-center"> <div class="flex items-center content-center">
...@@ -65,12 +65,17 @@ export default Vue.extend({ ...@@ -65,12 +65,17 @@ export default Vue.extend({
}, },
closeNFT(){ closeNFT(){
this.$store.commit('app/TOGGLE_OVERLAY') this.$store.commit('app/TOGGLE_OVERLAY')
},
goNTF(routes:string){
this.$router.push(`/Nft/${routes}`)
this.closeNFT()
} }
}, },
computed: { computed: {
appState: function () { appState: function () {
return this.$store.state.app; return this.$store.state.app;
}, },
}, },
}); });
</script> </script>
......
src/layout/NavHeader.vue
View file @ 2bbf1107
<template> <template>
<div class='flex items-center justify-around pb-6 pt-3 rounded-t-2xl bg-font-black shadow-nav text-font-white text-2xs' > <div class='text-font-white w-11/12 mx-auto py-3 flex justify-between items-center'>
<div class='flex flex-col items-center' @click="setNav('Home')"> <div class='left'>
<app-icon name='icon-lianxiwomen' size='24px' color='#fff'></app-icon> <app-icon name='icon-fanhui' size='18px' color='#EEF1F6'></app-icon>
<div class='mt-2'>大厅</div>
</div>
<div class='flex flex-col items-center relative' @click="goNFT">
<div class=' absolute -top-12 rounded-full p-4 bg-font-black mx-auto shadow-nav text-center'>
<app-icon name='icon-lianxiwomen' size='34px' color='#fff' ></app-icon>
</div>
<div class='mt-8'>发行NFT</div>
</div>
<div class='flex flex-col items-center' @click="setNav('Mine')">
<app-icon name='icon-lianxiwomen' size='24px' color='#fff'></app-icon>
<div class='mt-2'>我的</div>
</div>
</div> </div>
<div class='center'>{{title}}</div>
<div class='right'>333</div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import NavFooter from './NavFooter.vue'
export default Vue.extend({ export default Vue.extend({
name: 'layout_one', data() {
return{
title:''
}
},
components:{ components:{
NavFooter 'app-icon':()=>import('@/components/common/Icon.vue')
},
mounted(){
this.title = this.$route.meta?.title
} }
}); });
</script> </script>
<style lang="less">
</style>
src/router/index.ts
View file @ 2bbf1107
...@@ -25,7 +25,10 @@ const routes: Array<RouteConfig> = [ ...@@ -25,7 +25,10 @@ const routes: Array<RouteConfig> = [
{ {
path:'/Nft/create', path:'/Nft/create',
name:'createNft', name:'createNft',
component:()=>import('@/view/NFT/Create.vue') component:()=>import('@/view/NFT/Create.vue'),
meta:{
title:'NFT发行'
}
} }
] ]
......
src/shimes-app.d.ts
View file @ 2bbf1107
...@@ -13,4 +13,5 @@ declare module 'vue/types/vue' { ...@@ -13,4 +13,5 @@ declare module 'vue/types/vue' {
interface Vue { interface Vue {
$service:ServiceType $service:ServiceType
} }
} }
\ No newline at end of file
src/stepProgress.d.ts 0 → 100644
View file @ 2bbf1107
declare module 'vue-step-progress';
\ No newline at end of file
src/style.less
View file @ 2bbf1107
...@@ -26,4 +26,15 @@ body{ ...@@ -26,4 +26,15 @@ body{
.van-overlay{ .van-overlay{
background-color: rgba(10,14,35,.95); background-color: rgba(10,14,35,.95);
} }
\ No newline at end of file
.step-progress__step--valid span{
font-size: 12px !important;
}
.step-progress__step span{
font-size: 12px !important;
}
.step-progress__step-label,
.step-progress__step--active .step-progress__step-label, .step-progress__step--active span{
font-size: 12px !important;
}
\ No newline at end of file
src/view/NFT/Create.vue
View file @ 2bbf1107
<template> <template>
<div> <Layout-Child>
123 <div class="w-7/12 mx-auto">
<div class="steps flex text-font-white relative">
<div class="step-item flex flex-col content-center relative mr-5 items-center" v-for="(i,index) in mySteps" :key="i">
<div class="cycle relative items-center bg-font-gray bg-opacity-20 rounded-full z-10">
<div class=" center-child ">{{index+1}}</div>
</div>
<div class='text-sm mt-2'>
{{i}}
</div>
</div>
</div>
</div> </div>
</Layout-Child>
</template> </template>
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import 'vue-step-progress/dist/main.css';
export default Vue.extend({ export default Vue.extend({
data(){
return{
mySteps:['Step 1', 'Step 2', 'Step 3'],
currentStep:1,
}
},
components:{
'Layout-Child':()=>import('@/layout/Child.vue'),
},
methods:{
nextStep(){
this.currentStep++
}
}
}); });
</script> </script>
<style lang="less" scoped>
.cycle{
padding:25px;
height:0px;
width: 0px;
margin: 0 auto;
}
.center-child{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.steps{
.step-item:after{
content:'';
width: 24px;
height:5px;
border-radius: 3px;
background-color:#8899B3;
position: absolute;
top: 34%;
left: 120%;
z-index: 1;
transform: translate(-50%, -50%);
}
}
.step-item:last-of-type::after{
content:'';
width: 0px;
height:0px;
border-radius: 3px;
background-color:#8899B3;
position: absolute;
top: 38%;
left: 110%;
z-index: 1;
transform: translate(-50%, -50%);
}
// .steps:last-child{
// .step-item:after{
// content:'';
// width: 0px;
// height:0px;
// border-radius: 3px;
// background-color:red;
// position: absolute;
// top: 38%;
// left: 110%;
// z-index: 1;
// transform: translate(-50%, -50%);
// }
// }
</style>
\ No newline at end of file
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