Skip to content

N
NFT
Commit 25a9e3ab authored by hanfeng zhang's avatar hanfeng zhang
Browse files
Options

321

parent bfa30b89
Show whitespace changes
Inline Side-by-side
Showing with 409 additions and 89 deletions
public/index.html
View file @ 25a9e3ab
...@@ -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_uplaanctbdo.js"></script> <script src="//at.alicdn.com/t/font_2629369_3ll93o9x4uh.js"></script>
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
</head> </head>
<body> <body>
......
src/assets/img/avatar.png
View replaced file @ bfa30b89 View file @ 25a9e3ab
src/assets/img/avatar.png

21.2 KB | W: | H:

src/assets/img/avatar.png

105 KB | W: | H:

src/assets/img/avatar.png
src/assets/img/avatar.png
src/assets/img/avatar.png
src/assets/img/avatar.png
  • 2-up
  • Swipe
  • Onion skin
src/components/CollectionCard.vue 0 → 100644
View file @ 25a9e3ab
<template>
<div
class="
collection_card
flex
text-font-white
px-4
py-6
rounded-md
shadow-sm
bg-font-light-black
"
>
<div class="left w-4/12 object-cover rounded-md">
<img src="/img/cover.png" class="rounded-md" />
</div>
<div class="right w-8/12">
<div class="w-full px-4">
<div class=" text-lg">飙车大师</div>
<div class="flex flex-wrap w-full mt-1 text-sm">
<div class="text-font-dark-blue">题材</div>
<div class="flex px-3 gap-x-2">
<span>谍战</span>
<span>穿越</span>
<span>奇幻</span>
</div>
</div>
<p class=" break-words line-clamp-2 mt-8 w-full text-sm text-font-dark-blue">
sdfkjsdlkfjsdlkfsadfsdfsdfsdfsdfsdfsdfsdfsdfsdfdsfdsfsdfsddsfasdfsdfsdf
</p>
</div>
</div>
</div>
</template>
<script lang="ts">
import Vue from "vue";
export default Vue.extend({
name: "CollectionCard",
props: {
colletionData:{}
},
});
</script>
src/components/common/Cell.vue
View file @ 25a9e3ab
<template> <template>
<div class="cell flex justify-between py-3 px-2 " :class="boxType ==='border'?' border-b border-font-gray border-opacity-25':'bg-font-gray bg-opacity-20 rounded-md'" > <div class="cell flex justify-between py-3 " :class="boxType ==='border'?' border-b px-0 border-font-gray border-opacity-25':'bg-font-gray bg-opacity-20 px-2 rounded-md'" >
<div class="left flex items-center "> <div class="left flex items-center ">
<app-icon v-if='labelIcon' :name="labelIcon" size='18px'></app-icon> <app-icon v-if='labelIcon' :name="labelIcon" size='18px'></app-icon>
<div class="px-2"> <div class=" text-font-dark-blue px-3">
{{text}} {{text}}
</div> </div>
</div> </div>
......
src/components/common/Icon.vue
View file @ 25a9e3ab
...@@ -24,7 +24,7 @@ export default Vue.extend({ ...@@ -24,7 +24,7 @@ export default Vue.extend({
}, },
color:{ color:{
type:String, type:String,
default:'#fff' default:'#ffffff'
}, },
name:{ name:{
type:String, type:String,
......
src/components/common/ScrollBar.vue
View file @ 25a9e3ab
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="w-full flex justify-between py-3 items-center"> <div class="w-full flex justify-between py-3 items-center">
<div class="flex-grow flex flex-row "> <div class="flex-grow flex flex-row ">
<van-tabs v-model="active" class='w-11/12' swipeable @change="tabChange"> <van-tabs v-model="active" class='w-11/12' swipeable @change="tabChange">
<van-tab v-for='(i,index) in listData' :key="index" :title='i.text'> <van-tab v-for='(i,index) in list' :key="index" :title='i.categoryName' :id='i.id'>
</van-tab> </van-tab>
</van-tabs> </van-tabs>
</div> </div>
...@@ -14,50 +14,38 @@ ...@@ -14,50 +14,38 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue,{ PropType } from 'vue';
import { Tab, Tabs } from 'vant'; import { Tab, Tabs } from 'vant';
interface Category{
categoryName:string
createDate:string
englishName:string
id:number
updatedDate:string
}
Vue.use(Tab) Vue.use(Tab)
Vue.use(Tabs) Vue.use(Tabs)
const listData = [
{
text:'剧本'
},
{
text:'花絮视频'
},
{
text:'电影'
},
{
text:'影视原声'
},
{
text:'更多'
},
{
text:'更多'
},
{
text:'更多'
},
]
export default Vue.extend({ export default Vue.extend({
props: {
list:{
type:Array as PropType<Category[]>,
required: true
}
},
data(){ data(){
return{ return{
listData, active: 0,
active: 2, listData:this.list
} }
}, },
props: {
},
components:{ components:{
'app-icon':()=>import('@/components/common/Icon.vue') 'app-icon':()=>import('@/components/common/Icon.vue')
}, },
methods:{ methods:{
tabChange(item:any){ tabChange(item:any){
this.$emit('tabChange',listData[item]) this.$emit('tabChange',this.list[item])
} }
} }
......
src/components/common/Tag.vue
View file @ 25a9e3ab
...@@ -27,6 +27,10 @@ export default Vue.extend({ ...@@ -27,6 +27,10 @@ export default Vue.extend({
active: { active: {
type:Boolean, type:Boolean,
default:false default:false
},
clickable:{
type:Boolean,
default: true
} }
}, },
data(){ data(){
...@@ -36,7 +40,7 @@ export default Vue.extend({ ...@@ -36,7 +40,7 @@ export default Vue.extend({
}, },
methods:{ methods:{
tagOnclick(){ tagOnclick(){
console.log(this.disabled); if(this.clickable){
if(this.disabled===false){ if(this.disabled===false){
this.tagActive = !this.tagActive; this.tagActive = !this.tagActive;
this.$emit('onclick', { this.$emit('onclick', {
...@@ -47,6 +51,8 @@ export default Vue.extend({ ...@@ -47,6 +51,8 @@ export default Vue.extend({
} }
} }
}
}, },
}); });
......
src/layout/NavFooter.vue
View file @ 25a9e3ab
<template> <template>
<div class='flex items-center justify-around pb-3 pt-3 rounded-t-2xl bg-font-black shadow-nav text-font-white text-2xs' > <div class='flex items-center justify-around pb-3 pt-3 rounded-t-2xl bg-font-black shadow-nav text-font-white text-2xs' >
<div class='flex flex-col items-center' @click="setNav('Home')"> <div class='flex flex-col items-center' @click="setNav('Home')">
<app-icon name='icon-BOSS-yingyeting-chushi' size='24px' color='#fff'></app-icon> <app-icon name='icon-BOSS-yingyeting-chushi' size='24px' :color='actived==="Home"?"#0078FF":"#FFF"'></app-icon>
<div class='mt-2'>大厅</div> <div class='mt-2' :class='actived==="Home"?" text-font-blue":" text-white"'>大厅</div>
</div> </div>
<div class='flex flex-col items-center relative' @click="goNFT"> <div class='flex flex-col items-center relative' @click="goNFT">
<div class=' absolute -top-12 rounded-full p-5 bg-app-red mx-auto shadow-nav text-center'> <div class=' absolute -top-12 rounded-full p-5 bg-app-red mx-auto shadow-nav text-center'>
<app-icon name='icon-NFTfahang' size='28px' color='#fff' ></app-icon> <app-icon name='icon-NFTfahang' size='28px' color='#fff' ></app-icon>
</div> </div>
<div class='mt-8'>发行NFT</div> <div class='mt-8 text-font-red'>发行NFT</div>
</div> </div>
<div class='flex flex-col items-center' @click="setNav('Mine')"> <div class='flex flex-col items-center' @click="setNav('Mine')">
<app-icon name='icon-wodexuanzhong' size='24px' color='#fff'></app-icon> <app-icon name='icon-wodexuanzhong' size='24px' :color='actived==="Mine"?"#0078FF":"#FFF"'></app-icon>
<div class='mt-2'>我的</div> <div class='mt-2' :class='actived==="Mine"?" text-font-blue":" text-white"'>我的</div>
</div> </div>
</div> </div>
</template> </template>
...@@ -20,20 +20,11 @@ ...@@ -20,20 +20,11 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
const NavRouter = [
{
name:'Home',
path:'/Home',
text:'大厅',
icon:'icon-lianxiwomen'
}
]
export default Vue.extend({ export default Vue.extend({
name: 'layout_one', name: 'layout_one',
data(){ data(){
return{ return{
NavRouter, actived:this.$route.name
actived:'Home'
} }
}, },
components:{ components:{
......
src/layout/NavHeader.vue
View file @ 25a9e3ab
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
</div> </div>
<div class='center'>{{title}}</div> <div class='center'>{{title}}</div>
<div class='right'>333</div> <div class='right'></div>
</div> </div>
</template> </template>
......
src/router/index.ts
View file @ 25a9e3ab
...@@ -10,6 +10,7 @@ const routes: Array<RouteConfig> = [ ...@@ -10,6 +10,7 @@ const routes: Array<RouteConfig> = [
path: '/', path: '/',
name: 'App', name: 'App',
component: App, component: App,
redirect:'/Home',
children: [ children: [
{ {
path: '/Home', path: '/Home',
...@@ -48,6 +49,30 @@ const routes: Array<RouteConfig> = [ ...@@ -48,6 +49,30 @@ const routes: Array<RouteConfig> = [
] ]
}, },
{ {
path:'/Nft/MyList',
name:'myListNft',
component: () => import('@/view/NFT/Mynft/index.vue'),
meta:{
title: '我的NFT'
}
},
{
path:'/Nft/:id',
name:'Nftdetail',
component: () => import('@/view/NFT/Detail/index.vue'),
meta:{
title: ''
}
},
{
path:'/Collection',
name: 'Collection',
meta:{
title: '我的收藏'
},
component: () => import('@/view/NFT//Collection/index.vue')
},
{
path:'/User', path:'/User',
name:'User', name:'User',
meta: { meta: {
......
src/service/Service.ts
View file @ 25a9e3ab
...@@ -18,9 +18,9 @@ export class Service { ...@@ -18,9 +18,9 @@ export class Service {
const get = this.service.get const get = this.service.get
const post = this.service.post const post = this.service.post
const resolveData = (ret: any) => { const resolveData = (ret: any) => {
if (ret.code === 200) if (ret.code === 200){
return ret.data; return ret.data;
else { }else {
Toast.fail(ret.message) Toast.fail(ret.message)
throw new Error(ret.message) throw new Error(ret.message)
} }
......
src/service/nftService.ts
View file @ 25a9e3ab
...@@ -9,7 +9,8 @@ export class NFTService extends Service { ...@@ -9,7 +9,8 @@ export class NFTService extends Service {
getList:{path:'/nft/list',dataType:'application/x-www-form-urlencoded'}, getList:{path:'/nft/list',dataType:'application/x-www-form-urlencoded'},
genId:{ path:'/nft/generateNftId', dataType:'application/x-www-form-urlencoded'}, genId:{ path:'/nft/generateNftId', dataType:'application/x-www-form-urlencoded'},
detail:{ path:'/nft/get/{id}', dataType:'application/x-www-form-urlencoded'}, detail:{ path:'/nft/get/{id}', dataType:'application/x-www-form-urlencoded'},
themes:{ path:'/label/list',dataType:'application/x-www-form-urlencoded'} themes:{ path:'/label/list',dataType:'application/x-www-form-urlencoded'},
getCategory:{path:'/category/list',dataType:'application/x-www-form-urlencoded'}
} }
auth = 'Bearer ' + token.getToken() auth = 'Bearer ' + token.getToken()
constructor(){ constructor(){
...@@ -29,6 +30,10 @@ export class NFTService extends Service { ...@@ -29,6 +30,10 @@ export class NFTService extends Service {
}) })
} }
async getCategory():Promise<any[]>{
return await this.service.get(this.router.getCategory.path)
}
/** /**
* *
......
src/style.less
View file @ 25a9e3ab
...@@ -63,3 +63,7 @@ body{ ...@@ -63,3 +63,7 @@ body{
height: calc(100vh - 65px); height: calc(100vh - 65px);
overflow-y: scroll; overflow-y: scroll;
} }
.list-scroll{
height: calc(100vh - 400px);
overflow-y: scroll;
}
\ No newline at end of file
src/view/Auth/Login/Login.vue
View file @ 25a9e3ab
...@@ -360,12 +360,3 @@ export default Vue.extend({ ...@@ -360,12 +360,3 @@ export default Vue.extend({
}, },
}); });
</script> </script>
<style scoped lang="less">
.register {
.title {
}
.fontsize0 {
// font-size: 0;
}
}
</style>
src/view/Home/index.vue
View file @ 25a9e3ab
...@@ -12,8 +12,8 @@ ...@@ -12,8 +12,8 @@
<img src="@/assets/img/banner.png" class="w-full z-0"> <img src="@/assets/img/banner.png" class="w-full z-0">
</div> </div>
<div class="container-view w-11/12 mx-auto"> <div class="container-view w-11/12 mx-auto">
<app-scrollbar></app-scrollbar> <app-scrollbar :list='categoryTypes' @tabChange='getDataByCategory'></app-scrollbar>
<div> <div class="list-scroll">
<app-cardList :data='mokeData'></app-cardList> <app-cardList :data='mokeData'></app-cardList>
</div> </div>
</div> </div>
...@@ -40,12 +40,33 @@ const mokeData= [ ...@@ -40,12 +40,33 @@ const mokeData= [
cover:'/img/cover.png', cover:'/img/cover.png',
text:'ertfr' text:'ertfr'
}, },
{
cover:'/img/cover.png',
text:'ertfr'
},
{
cover:'/img/cover.png',
text:'ertfr'
},
{
cover:'/img/cover.png',
text:'ertfr'
},
{
cover:'/img/cover.png',
text:'ertfr'
},
{
cover:'/img/cover.png',
text:'ertfr'
},
] ]
Vue.use(Badge) Vue.use(Badge)
export default Vue.extend({ export default Vue.extend({
data() { data() {
return{ return{
mokeData mokeData,
categoryTypes:[] as any[]
} }
}, },
components:{ components:{
...@@ -55,6 +76,11 @@ export default Vue.extend({ ...@@ -55,6 +76,11 @@ export default Vue.extend({
'app-cardList':()=>import('@/components/CardList.vue') 'app-cardList':()=>import('@/components/CardList.vue')
}, },
name: 'Home', name: 'Home',
async created(){
this.categoryTypes = await this.$service.nftService.getCategory()
console.log(this.categoryTypes);
},
methods:{ methods:{
search(){ search(){
console.log(11); console.log(11);
...@@ -62,7 +88,9 @@ export default Vue.extend({ ...@@ -62,7 +88,9 @@ export default Vue.extend({
}, },
info(){ info(){
console.log(222); console.log(222);
},
getDataByCategory(item:any){
console.log(item);
} }
} }
}); });
......
src/view/Mine/index.vue
View file @ 25a9e3ab
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
</div> </div>
</div> </div>
<div class='tags flex py-2'> <div class='tags flex py-2'>
<app-tag text='编剧'></app-tag> <app-tag text='编剧' :id='1' class=" bg-font-red" :clickable='false'></app-tag>
</div> </div>
<div class='intro text-2xs line-clamp-1 text-font-gray'> <div class='intro text-2xs line-clamp-1 text-font-gray'>
{{getUserInfo.intro?getUserInfo.intro:'这个人很懒，什么也没留下'}} {{getUserInfo.intro?getUserInfo.intro:'这个人很懒，什么也没留下'}}
...@@ -37,16 +37,16 @@ ...@@ -37,16 +37,16 @@
<div>我的NFT</div> <div>我的NFT</div>
<div>数量（个）</div> <div>数量（个）</div>
</div> </div>
<div class='pt-8 pb-4 text-2xl flex items-center content-end justify-end'> <div class='pt-8 pb-4 text-2xl flex items-center content-end justify-end' @click="navigateTo('/Nft/MyList')">
30 30
<app-icon name="icon-xiayibu"></app-icon> <app-icon name="icon-xiayibu"></app-icon>
</div> </div>
</div> </div>
<div class='cells w-11/12 mx-auto text-font-white mt-3'> <div class='cells w-11/12 mx-auto text-font-white mt-3'>
<app-cell text='收藏' boxType='border' icon='icon-xiayibu' @onClick='cellClick'></app-cell> <app-cell text='收藏' boxType='border' labelIcon='icon-heart' icon='icon-xiayibu' @onClick='cellClick("Collection")'></app-cell>
<app-cell text='安全中心' boxType='border' icon='icon-xiayibu' @onClick='cellClick'></app-cell> <app-cell text='安全中心' boxType='border' labelIcon='icon-anquanzhongxin89' icon='icon-xiayibu' @onClick='cellClick'></app-cell>
<app-cell text='联系我们' boxType='border' icon='icon-xiayibu' @onClick='cellClick'></app-cell> <app-cell text='联系我们' boxType='border' labelIcon='icon-lianxiwomen' icon='icon-xiayibu' @onClick='cellClick'></app-cell>
<app-cell text='设置' boxType='border' icon='icon-xiayibu' @onClick='cellClick'></app-cell> <app-cell text='设置' boxType='border' labelIcon='icon-setting' icon='icon-xiayibu' @onClick='cellClick'></app-cell>
<div class='h-16'></div> <div class='h-16'></div>
</div> </div>
</Layout-Main> </Layout-Main>
...@@ -99,8 +99,11 @@ export default Vue.extend({ ...@@ -99,8 +99,11 @@ export default Vue.extend({
console.log(222); console.log(222);
}, },
cellClick(){ navigateTo(url:string){
console.log(111); this.$router.push(url)
},
cellClick(item:string){
this.$router.push(item)
}, },
goUserSet(){ goUserSet(){
this.$router.push('/User') this.$router.push('/User')
......
src/view/NFT/Collection/index.vue 0 → 100644
View file @ 25a9e3ab
<template>
<Layout-Child>
<div class='w-11/12 mx-auto mt-6'>
<app-collectionCard></app-collectionCard>
</div>
</Layout-Child>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
components:{
'Layout-Child':()=>import('@/layout/Child.vue'),
'app-collectionCard':()=>import('@/components/CollectionCard.vue')
// 'app-cell':()=>import('@/components/common/Cell.vue'),
// 'app-btn':()=>import('@/components/common/Btn.vue')
},
});
</script>
src/view/NFT/Create/form.vue
View file @ 25a9e3ab
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
<textarea v-model="createNFT.value_des" name="des" id="nft-des" cols="30" rows="10" class=" w-full bg-font-gray bg-opacity-20 text-font-white p-3 text-sm"></textarea> <textarea v-model="createNFT.value_des" name="des" id="nft-des" cols="30" rows="10" class=" w-full bg-font-gray bg-opacity-20 text-font-white p-3 text-sm"></textarea>
</div> </div>
<div class="fixed bottom-0 w-full left-0 z-30"> <div class="fixed bottom-0 w-full left-0 z-30">
<app-btn text="下一步" class="w-11/12 mx-auto text-font-white rounded-2xl bg-font-blue" :disabled="validation" border='none' @btnClicked='currentStepChange(1)'></app-btn> <app-btn text="下一步" class="w-11/12 mx-auto text-font-white rounded-2xl bg-font-blue" border='none' @btnClicked='currentStepChange(1)'></app-btn>
</div> </div>
</div> </div>
<div class="step-two" v-if="currentStep==2"> <div class="step-two" v-if="currentStep==2">
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
<app-cell text='授权阅读' class="text-font-white my-3" @cellOnChange="getValue"></app-cell> <app-cell text='授权阅读' class="text-font-white my-3" @cellOnChange="getValue"></app-cell>
<div class="fixed bottom-0 w-full left-0 flex flex-row z-30"> <div class="fixed bottom-0 w-full left-0 flex flex-row z-30">
<app-btn text="上一步" class=" w-5/12 mx-auto text-font-white rounded-2xl bg-font-blue" border='none' @btnClicked='currentStepChange(-1)'></app-btn> <app-btn text="上一步" class=" w-5/12 mx-auto text-font-white rounded-2xl bg-font-blue" border='none' @btnClicked='currentStepChange(-1)'></app-btn>
<app-btn text="下一步" class="w-5/12 mx-auto text-font-white rounded-2xl bg-font-blue" :disabled="validation" border='none' @btnClicked='currentStepChange(1)'></app-btn> <app-btn text="下一步" class="w-5/12 mx-auto text-font-white rounded-2xl bg-font-blue" border='none' @btnClicked='currentStepChange(1)'></app-btn>
</div> </div>
</div> </div>
<div class="step-three" v-if="currentStep==3"> <div class="step-three" v-if="currentStep==3">
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
<app-cell text='数量' class="text-font-white my-3" @cellOnChange="getValue"></app-cell> <app-cell text='数量' class="text-font-white my-3" @cellOnChange="getValue"></app-cell>
<div class="fixed bottom-0 w-full left-0 flex flex-row z-30"> <div class="fixed bottom-0 w-full left-0 flex flex-row z-30">
<app-btn text="上一步" class=" w-5/12 mx-auto text-font-white rounded-2xl bg-font-blue" border='none' @btnClicked='currentStepChange(-1)'></app-btn> <app-btn text="上一步" class=" w-5/12 mx-auto text-font-white rounded-2xl bg-font-blue" border='none' @btnClicked='currentStepChange(-1)'></app-btn>
<app-btn text="发行NFT" class="w-5/12 mx-auto text-font-white rounded-2xl bg-font-blue" border='none' :disabled="validation" @btnClicked='currentStepChange(1)'></app-btn> <app-btn text="发行NFT" class="w-5/12 mx-auto text-font-white rounded-2xl bg-font-blue" border='none' @btnClicked='currentStepChange(1)'></app-btn>
</div> </div>
</div> </div>
</div> </div>
...@@ -79,17 +79,17 @@ export default Vue.extend({ ...@@ -79,17 +79,17 @@ export default Vue.extend({
'app-btn':()=>import('@/components/common/Btn.vue') 'app-btn':()=>import('@/components/common/Btn.vue')
}, },
computed:{ computed:{
validation:function(){ // validation:function(){
let disabled = true // let disabled = true
const {value_name,value_publisher } = this.createNFT // const {value_name,value_publisher } = this.createNFT
if(this.currentStep === 1){ // if(this.currentStep === 1){
if(value_name&&value_publisher){ // if(value_name&&value_publisher){
disabled = false // disabled = false
} // }
disabled = true // disabled = true
} // }
return disabled // return disabled
} // }
}, },
methods:{ methods:{
addStep(){ addStep(){
......
src/view/NFT/Detail/index.vue 0 → 100644
View file @ 25a9e3ab
<template>
<Layout-Child class='page-scroll'>
<div class="w-11/12 mx-auto mt-6 text-font-white">
<app-collectionCard></app-collectionCard>
<div class="app-icons mx-auto grid grid-cols-4 my-6">
<div
v-for="(i, index) in apps"
:key="index"
class="flex justify-center"
>
<div class="flex flex-col items-center gap-y-2">
<div class="flex content-center">
<app-icon
:name="i.icon"
size="24px"
class="p-5 bg-table-light-blue shadow-md rounded-full"
></app-icon>
</div>
<div class="text-xs text-font-white">
{{ i.text }}
</div>
</div>
</div>
</div>
<div
class="
text-xs
w-full
flex
border-b border-font-dark-blue border-opacity-50
items-center
"
>
<div class="py-3 pr-4">
<img src="@/assets/img/avatar.png" class="h-12 w-12 rounded-full" />
</div>
<div>
<div class="flex items-center">
<div class="pr-3 text-base">张瀚峰</div>
<app-tag text="发行人" :id="1" class="bg-font-dark-blue"></app-tag>
</div>
<div class="mt-1 text-font-dark-blue">sdfsdfsdf</div>
</div>
</div>
<div class="py-3">
<div class="text-font-dark-blue">NFT信息</div>
<app-cell
text="编号"
value="JOYING-20210615-HONGJUREN"
boxType="border"
></app-cell>
<app-cell
text="剧本HASH"
value="JOYING-20210615-HONGJUREN"
boxType="border"
></app-cell>
<app-cell
text="发行时间"
value="JOYING-20210615-HONGJUREN"
boxType="border"
></app-cell>
</div>
<div class="py-3">
<div class="text-font-dark-blue">版权信息</div>
<app-cell
text="版权登记号"
value="JOYING-20210615-HONGJUREN"
boxType="border"
></app-cell>
<app-cell
text="作者"
value="JOYING-20210615-HONGJUREN"
boxType="border"
></app-cell>
<app-cell
text="著作权人"
value="JOYING-20210615-HONGJUREN"
boxType="border"
></app-cell>
<app-cell
text="版权登记日期"
value="JOYING-20210615-HONGJUREN"
boxType="border"
></app-cell>
<app-cell
text="版权HASH"
value="JOYING-20210615-HONGJUREN"
boxType="border"
></app-cell>
</div>
<div class="py-3">
<div class="text-font-dark-blue">版权信息</div>
<div class=" py-2 tracking-wide leading-6 text-sm">在人工智能和机械人科技日新月异的进步下，我们已经不能阻止这些科技已经超越了一般只 是用于方便人们日常生活的范畴。特斯拉 CEO 埃隆·马斯克在公开场合说过“无人机等技 术的发展的迅速，在降低了生</div>
</div>
<div class="py-3">
<div class="text-font-dark-blue">关于NFT</div>
<div class=' py-2 tracking-wide leading-6 text-sm'>NFT全称为Non-Fungible Token，也称为非同质化代币。可以通俗化理解为在区块链上的唯一凭证。为剧本、电影、花絮等电影产业铸造NFT。NFT不可分割、不可替代、独一无二，可以将资产数字化。采用NFT形式，推动剧本知识产权保护、剧本价值挖掘、促进剧本流通交易、保护编剧及电影制片方利益。我平台的NFT基于比特元（BTY）公链，根据ERC20或ERC1155协议发行，链上创建合约、链上确权、链上流转、链上查询。能有效保护剧本知识产权，防止篡改、伪造，并可在链上永久保留剧本原创作者信息，保留原创作者署名权，所有权等权益。保护编剧利益，促进编剧的创作欲望，促进电影行业生态健康发展。</div>
</div>
<div class="py-3">
<div class="text-font-dark-blue">交易记录</div>
<div class="text-center py-5">
暂无记录
</div>
</div>
<div class="fixed bottom-0 w-full left-0 z-30 flex items-center px-5 shadow-nav">
<div class='flex-grow-0'>
<app-icon name='icon-heart' size='25px'></app-icon>
</div>
<div class='flex-grow pl-8'>
<app-btn text="查看剧本" class=" w-full mx-auto text-font-white rounded-2xl bg-font-blue" border='none' ></app-btn>
</div>
</div>
</div>
</Layout-Child>
</template>
<script lang="ts">
import Vue from "vue";
const apps = [
{
text: "版权认证",
icon: "icon-anquanzhongxin89",
},
{
text: "大厅下架",
icon: "icon-chakan",
},
{
text: "交易设置",
icon: "icon-a-tupian",
},
{
text: "查看证书",
icon: "icon-BOSS-yingyeting-chushi",
},
];
export default Vue.extend({
data() {
return {
id: this.$route.params.id,
apps,
};
},
created() {},
components: {
"Layout-Child": () => import("@/layout/Child.vue"),
"app-icon": () => import("@/components/common/Icon.vue"),
"app-tag": () => import("@/components/common/Tag.vue"),
"app-cell": () => import("@/components/common/Cell.vue"),
'app-btn':()=>import('@/components/common/Btn.vue'),
// 'app-scrollbar':()=>import('@/components/common/ScrollBar.vue'),
"app-collectionCard": () => import("@/components/CollectionCard.vue"),
},
});
</script>
src/view/NFT/Mynft/index.vue 0 → 100644
View file @ 25a9e3ab
<template>
<Layout-Child>
<div class="nft-cardBox w-11/12 mx-auto mt-6">
<div class="nft-card w-full bg-font-red text-font-white px-5 py-3 rounded-md">
<div class="w-full flex items-start justify-between mb-12">
<div>我的NFT(个）</div>
<div></div>
</div>
<div class='flex items-end justify-between flex-wrap'>
<div class=' text-3xl'>30</div>
<div>sidfhuoisdufsdjufosdfjosdi</div>
</div>
</div>
</div>
<div class="container-view w-11/12 mx-auto">
<app-scrollbar :list='categoryTypes' @tabChange='getDataByCategory'></app-scrollbar>
<div>
<app-collectionCard></app-collectionCard>
</div>
</div>
</Layout-Child>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
data(){
return{
categoryTypes:[] as any[]
}
},
async created(){
this.categoryTypes = await this.$service.nftService.getCategory()
},
methods: {
getDataByCategory(item:any){
console.log(item);
}
},
components:{
'Layout-Child':()=>import('@/layout/Child.vue'),
'app-scrollbar':()=>import('@/components/common/ScrollBar.vue'),
'app-collectionCard':()=>import('@/components/CollectionCard.vue')
},
});
</script>
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