Skip to content

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

321

parent feede0cb
Hide whitespace changes
Inline Side-by-side
Showing with 64 additions and 32 deletions
package.json
View file @ a6d0350d
......@@ -14,7 +14,9 @@
"axios": "^0.21.1",
"clipboard": "^2.0.8",
"core-js": "^3.6.5",
"downloadjs": "^1.4.7",
"epic-spinners": "^1.1.0",
"html-to-image": "^1.6.2",
"lodash": "^4.17.21",
"md5": "^2.3.0",
"register-service-worker": "^1.7.1",
......@@ -30,6 +32,7 @@
},
"devDependencies": {
"@types/async": "^3.2.7",
"@types/downloadjs": "^1.4.2",
"@types/lodash": "^4.14.170",
"@types/md5": "^2.3.1",
"@types/validator": "^13.6.3",
......
src/components/common/Cell.vue
View file @ a6d0350d
......@@ -38,7 +38,6 @@
@input="cellOnChange"
/>
</div>
<input v-else-if="type === 'input-num'"
:value="inputValue"
type="number"
......
src/download.d.ts 0 → 100644
View file @ a6d0350d
declare module 'downloadjs';
\ No newline at end of file
src/layout/NavHeader.vue
View file @ a6d0350d
......@@ -7,9 +7,9 @@
</div>
<div class='center'>{{title}}</div>
<div class='right'>
<div v-if="saveBtn.show" @click="clickSaveBtn" class="text-sm" :class="saveBtn.enable?' text-font-blue':' text-font-dark-blue'">
<!-- <div v-if="saveBtn.show" @click="clickSaveBtn" class="text-sm" :class="saveBtn.enable?' text-font-blue':' text-font-dark-blue'">
保存
</div>
</div> -->
</div>
</div>
</template>
......
src/main.ts
View file @ a6d0350d
......@@ -8,8 +8,8 @@ import './style.less'
import Util from './util'
import service from './service'
import { Plugin } from 'vue-fragment'
import { Dialog } from 'vant';
import { Toast } from 'vant'
import { Toast,Empty,Dialog } from 'vant'
import VConsole from 'vconsole';
const vconsole = process.env.VUE_APP_ENV === 'TEST'?new VConsole():''
......@@ -18,6 +18,7 @@ console.log(vconsole,'移动console');
Vue.use(Dialog);
Vue.use(Empty)
Vue.use(Toast)
Vue.use(Util)
Vue.use(Plugin)
......
src/shimes-app.d.ts
View file @ a6d0350d
......@@ -21,3 +21,4 @@ declare module 'vue/types/vue' {
}
}
src/style.less
View file @ a6d0350d
* {
max-width: 460px;
margin: 0;
padding: 0;
}
......@@ -125,3 +126,7 @@ body {
padding:25px 0;
border-bottom: 1px solid rgba(255,255,255,.15);
}
.full-height{
height:100vh;
}
\ No newline at end of file
src/view/NFT/Create/components/certificate/index.vue
View file @ a6d0350d
<template>
<div>
<div >
<div class="py-3 text-xs">恭喜您获得NFT证书</div>
<div class="w-8/12 object-cover mx-auto">
<div class="w-6/12 object-cover mx-auto">
<img src="./stars.png" class="mx-auto" />
</div>
<div class="box mt-6">
<div class="top h-60 relative bg-red-200">
<div class="box xs:mt-6 mt-3" ref="certifyCard">
<div class="top xs:h-60 h-48 relative bg-certifyBG bg-no-repeat bg-cover">
<div class="blur-img h-full w-full absolute top-0 left-0"></div>
<div class="pt-6">
<div class="pt-6 xs:text-sm text-xs">
<div>影视区块链版权电子数据确权书</div>
</div>
<div>
<img src="/img/cover.png" class="w-4/12 mx-auto mt-4" />
<img src="/img/cover.png" class=" w-20 xs:w-24 mx-auto mt-4" />
</div>
<div class="float-box w-full absolute -bottom-16 text-2xs">
<div class="w-11/12 p-2 flex-wrap mx-auto bg-certifyBG flex break-all ">
<div class="w-9/12 text-left ">
<div class="float-box w-full absolute -bottom-10 text-3xs xs:text-2xs">
<div class="w-11/12 p-2 flex-wrap mx-auto flex break-all bg-font-white shadow-md rounded text-font-black">
<div class="w-full text-left ">
<div>NFT哈希</div>
<div>{{NFTHASH}}</div>
<div class="pt-1">剧本哈希</div>
<div>{{fileHash}}</div>
</div>
<div></div>
</div>
</div>
</div>
<div class="bot bg-font-white text-font-black px-3 py-10 pt-16">
<div class="ceritfy-item text-xs flex py-1">
<div class="bot bg-font-white text-font-black px-3 py-10 pt-12 text-3xs xs:text-2xs">
<div class="ceritfy-item flex py-1">
<div class="w-4/12 text-left">剧本名称</div>
<div>{{ name }}</div>
</div>
<div class="ceritfy-item text-xs flex py-1">
<div class="ceritfy-item flex py-1">
<div class="w-4/12 text-left">发行人地址</div>
<div>{{ addr }}</div>
</div>
<div class="ceritfy-item text-xs flex py-1">
<div class="ceritfy-item flex py-1">
<div class="w-4/12 text-left">发行人</div>
<div>{{ publisher }}</div>
</div>
<div class="ceritfy-item text-xs flex py-1">
<div class="ceritfy-item flex py-1">
<div class="w-4/12 text-left">存证时间</div>
<div>{{ timeStamp }}</div>
</div>
<div class="ceritfy-item text-xs flex py-1">
<div class="ceritfy-item flex py-1">
<div class="w-4/12 text-left">剧本审核</div>
<div v-if="auditing === 0">剧本未审核</div>
</div>
<div class="ceritfy-item text-xs flex py-1">
<div class="ceritfy-item flex py-1">
<div class="w-4/12 text-left">版权证明</div>
<div v-if="copyRight === 0">版权未审核</div>
</div>
</div>
</div>
<div class="py-3 text-xs" @click="downloadImg">点击下载保存图片</div>
</div>
</template>
<script lang="ts">
import Vue from "vue";
import download from 'downloadjs'
import { toPng } from 'html-to-image';
export default Vue.extend({
props: {
name: {
......@@ -93,5 +95,19 @@ export default Vue.extend({
default: "1z9e1beb62e754ff7666hgjggFFHHKJJKKKK5a0ddd7879774757474974"
}
},
methods:{
async downloadImg(){
let certifyCard = this.$refs.certifyCard as HTMLElement
toPng(certifyCard).then(function (dataUrl) {
// var img = new Image();
// img.src = dataUrl;
// console.log(img.src);
download(dataUrl, 'my-node.png');
})
.catch(function (error) {
console.error('oops, something went wrong!', error);
});
}
}
});
</script>
src/view/NFT/Create/form.vue
View file @ a6d0350d
......@@ -76,14 +76,14 @@
:name="fileName"
@cellOnChange="$router.push({ name: 'NftUpload' })"
></app-cell>
<app-cell
<!-- <app-cell
text="封面上传(非必填)"
class="text-font-white my-3"
type="upload"
placeholder="请上传相关封面"
:name="fileName"
@cellOnChange="$router.push({ name: 'NftUpload' })"
></app-cell>
></app-cell> -->
<app-cell
:text="fromText.fileHashText"
class="text-font-white my-3"
......@@ -194,14 +194,14 @@
</div>
<div v-else class="text-center">
<div v-if="success" >
<van-overlay :show="showOverlay" class=" z-50" >
<van-overlay :show="showOverlay" class=" full-height flex items-center z-50" >
<div class="w-10/12 mx-auto">
<certificate />
<div class="py-3 text-xs">请截屏保存</div>
<img
@click='showOverlay = !showOverlay;'
src="@/assets/icons/close_publish.png"
class="w-5 mx-auto mt-10"
class="w-4 xs:w-6 mx-auto mt-3"
/>
</div>
......
src/view/NFT/Create/upload.vue
View file @ a6d0350d
......@@ -8,7 +8,7 @@
class="hidden"
@change="handleFileChange"
ref="inputFile"
accept="application/pdf"
accept="application/pdf,application/msword,text/plain"
/>
<label for="upload" class="inline-block">
<div
......@@ -94,6 +94,7 @@ export default Vue.extend({
uploading: false,
uploadStatus,
status: uploadStatus.NULL,
// accept:
};
},
components: {
......@@ -110,7 +111,6 @@ export default Vue.extend({
},
methods: {
handleFileChange() {
const ele = this.$refs.inputFile as HTMLInputElement;
const files = ele.files;
if (files && files.length >= 1) {
......
src/view/NFT/Mynft/index.vue
View file @ a6d0350d
......@@ -2,7 +2,7 @@
<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"
class="nft-card w-full bg-cardBG2 bg-cover bg-no-repeat text-font-white px-5 py-3 rounded-md"
>
<div class="w-full flex items-start justify-between mb-12">
<div>我的NFT(个）</div>
......
src/view/User/index.vue
View file @ a6d0350d
......@@ -5,7 +5,7 @@
<van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
<app-cell text='头像' boxType='border' type='image' :value='userInfo.avatar?userInfo.avatar:"/img/mokeImg/avatar.png"' icon='icon-xiayibu' @click.native='uploadImg'></app-cell>
<app-cell text='昵称' boxType='border' :value='userInfo.nickname?userInfo.nickname:"无昵称"' icon='icon-xiayibu' @click.native="goEdit({type:'nickname',title:'设置昵称'})"></app-cell>
<app-cell text='手机号' boxType='border' type='show' :value='userInfo.telephone?userInfo.telephone:""' ></app-cell>
<app-cell text='手机号' boxType='border' type='click' :value='userInfo.telephone?userInfo.telephone:""' ></app-cell>
<app-cell text='邮箱绑定' boxType='border' :value='userInfo.email?userInfo.email:""' icon='icon-xiayibu' @click.native="goEdit({type:'email',title:'邮箱绑定'})"></app-cell>
<app-cell text='个性签名' boxType='border' icon='icon-xiayibu' @click.native="goEdit({type:'signature',title:'个性签名'})"></app-cell>
<app-cell text='安全中心' boxType='border' icon='icon-xiayibu' ></app-cell>
......
tailwind.config.js
View file @ a6d0350d
......@@ -11,10 +11,12 @@ module.exports = {
extend: {
backgroundImage: theme => ({
'cardBG': "url('/img/bg-card.png')",
'cardBG2': "url('/img/bg-card2.png')",
'certifyBG':"url('/img/certify-bg.png')"
})
},
screens: {
xs:'370px',
sm: '640px',
md: '768px',
lg: '1024px',
......@@ -291,6 +293,7 @@ module.exports = {
],
},
fontSize: {
'3xs':['0.45rem', { lineHeight: '0.55rem' }],
'2xs':['0.65rem', { lineHeight: '0.75rem' }],
xs: ['0.75rem', { lineHeight: '1rem' }],
sm: ['0.875rem', { lineHeight: '1.25rem' }],
......@@ -805,6 +808,7 @@ module.exports = {
'1/12': '8.333333%',
'2/12': '16.666667%',
'3/12': '25%',
'3.5/12':'28.999%',
'4/12': '33.333333%',
'5/12': '41.666667%',
'6/12': '50%',
......
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