Skip to content

N
NFT
Commit 5226fa5b authored by chenqikuai's avatar chenqikuai
Browse files
Options

feat：skeleton

parent 10c6c567
Hide whitespace changes
Inline Side-by-side
Showing with 186 additions and 80 deletions
src/components/common/Skeleton/Rect.vue 0 → 100644
View file @ 5226fa5b
<template>
<div class="el-skeleton is-animated">
<div class="el-skeleton__item w-full" :class="_class" :style="_style"></div>
</div>
</template>
<script lang="ts">
import Vue from "vue";
export default Vue.extend({
props: ["_class", "_style"],
});
</script>
<style lang="less" scoped>
.el-skeleton__item {
background: #f2f2f2;
display: inline-block;
border-radius: 4px;
}
.el-skeleton.is-animated .el-skeleton__item {
background: linear-gradient(90deg, #0c0b31 25%, #282740 37%, #0c0b31 63%);
background-size: 400% 100%;
animation: el-skeleton-loading 1.4s ease infinite;
}
@keyframes el-skeleton-loading {
0% {
background-position: 100% 50%;
}
to {
background-position: 0 50%;
}
}
</style>
\ No newline at end of file
src/components/common/Skeleton/SkeletonNftDetail.vue 0 → 100644
View file @ 5226fa5b
<template>
<div>
<SkeletonRect _class="oneSkeleton" />
<div class="flex justify-between mt-2">
<div v-for="n in 4" :key="n">
<SkeletonRect _class="circleSkeleton" />
<SkeletonRect _class="paraSkeleton" />
</div>
</div>
<div class="flex justify-between mt-3 items-center">
<SkeletonRect _class="circle2Skeleton" class="mr-2" />
<div class="flex-grow mr-6">
<SkeletonRect _class="paraSkeleton" />
<SkeletonRect _class="paraSkeleton" />
</div>
</div>
<div class="mt-3">
<SkeletonRect _class="para2Skeleton" />
<SkeletonRect _class="para2Skeleton" />
<SkeletonRect _class="para2Skeleton" />
<SkeletonRect _class="para2Skeleton" />
</div>
<SkeletonRect _class="twoSkeleton mt-8" />
</div>
</template>
<script>
import Vue from "vue";
import SkeletonRect from "./Rect.vue";
export default Vue.extend({
components: {
SkeletonRect,
},
});
</script>
<style lang="less">
.oneSkeleton {
height: 191px;
}
.circleSkeleton {
width: 64px !important;
height: 64px !important;
border-radius: 100% !important;
}
.circle2Skeleton {
width: 48px !important;
height: 48px !important;
border-radius: 100% !important;
}
.paraSkeleton {
height: 20px;
}
.para2Skeleton {
height: 30px;
}
.twoSkeleton {
height: 400px;
}
</style>
\ No newline at end of file
src/style.less
View file @ 5226fa5b
*{ * {
margin: 0; margin: 0;
padding: 0 padding: 0;
} }
body{ body {
background-color:#1D2649; background-color: #1d2649;
} }
.van-tabs__nav{ .van-tabs__nav {
background-color: transparent !important; background-color: transparent !important;
} }
.van-tabs__line{ .van-tabs__line {
display: none; display: none;
} }
.van-tab--active{ .van-tab--active {
color: #EEF1F6 !important; color: #eef1f6 !important;
} }
.van-badge{ .van-badge {
background-color:#ED6F6F !important; background-color: #ed6f6f !important;
} }
.list-container{ .list-container {
height: 100vh - 390px; height: 100vh - 390px;
overflow-y: scroll; overflow-y: scroll;
} }
.van-overlay{ .van-overlay {
background-color: rgba(10,14,35,.95); background-color: rgba(10, 14, 35, 0.95);
} }
.fade-enter-active, .fade-enter-active,
...@@ -38,79 +37,87 @@ body{ ...@@ -38,79 +37,87 @@ body{
/* 可以设置不同的进入和离开动画 */ /* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */ /* 设置持续时间和动画函数 */
.slide-fade-enter-active { .slide-fade-enter-active {
transition: all .3s ease; transition: all 0.3s ease;
} }
.slide-fade-leave-active { .slide-fade-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0); transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
} }
.slide-fade-enter, .slide-fade-leave-to .slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ { /* .slide-fade-leave-active for below version 2.1.8 */ {
transform: translateX(10px); transform: translateX(10px);
opacity: 0; opacity: 0;
} }
.step-progress__step--valid span{ .step-progress__step--valid span {
font-size: 12px !important; font-size: 12px !important;
} }
.step-progress__step span{ .step-progress__step span {
font-size: 12px !important; font-size: 12px !important;
} }
.step-progress__step-label, .step-progress__step-label,
.step-progress__step--active .step-progress__step-label, .step-progress__step--active span{ .step-progress__step--active .step-progress__step-label,
font-size: 12px !important; .step-progress__step--active span {
} font-size: 12px !important;
}
.page-scroll{ .page-scroll {
height: calc(100vh - 65px); height: calc(100vh - 65px);
overflow-y: scroll; overflow-y: scroll;
} }
.list-scroll{ .list-scroll {
height: calc(100vh - 400px); height: calc(100vh - 400px);
overflow-y: scroll; overflow-y: scroll;
} }
.myNFT-list-scroll{ .myNFT-list-scroll {
height: calc(100vh - 290px); height: calc(100vh - 290px);
overflow-y: scroll; overflow-y: scroll;
} }
.collection-list{ .collection-list {
height: calc(100vh - 60px); height: calc(100vh - 60px);
overflow-y: scroll; overflow-y: scroll;
} }
.van-dialog{ .van-dialog {
background-color: #1D2649; background-color: #1d2649;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #8899b3;
.van-dialog__content,
.van-dialog__message,
.van-dialog__message--has-title {
font-size: 14px; font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #8899B3; color: #eef1f6;
.van-dialog__content,.van-dialog__message, .van-dialog__message--has-title{ }
font-size: 14px; .van-hairline--top,
font-family: PingFangSC-Regular, PingFang SC; .van-dialog__footer,
font-weight: 400; .van-button {
color: #EEF1F6; background-color: #1d2649;
} }
.van-hairline--top, .van-dialog__footer, .van-button{ .van-button__text {
background-color: #1D2649; font-size: 14px;
} font-family: PingFangSC-Medium, PingFang SC;
.van-button__text{ font-weight: 500;
font-size: 14px; color: #0078ff;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #0078FF;
}
} }
}
.van-popup{ .van-popup {
.van-action-sheet__gap{ .van-action-sheet__gap {
background-color: #131934; background-color: #131934;
} }
.van-action-sheet__item,.van-action-sheet__cancel{ .van-action-sheet__item,
background-color: #1D2649; .van-action-sheet__cancel {
background-color: #1d2649;
font-size: 14px; font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #EEF1F6; color: #eef1f6;
} }
.van-action-sheet__cancel:active, .van-action-sheet__item:active{ .van-action-sheet__cancel:active,
.van-action-sheet__item:active {
background-color: #394267; background-color: #394267;
} }
} }
\ No newline at end of file
src/view/NFT/Detail/index.vue
View file @ 5226fa5b
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
loading.... loading....
</div> --> </div> -->
<div class="w-11/12 mx-auto mt-6 text-font-white"> <div class="w-11/12 mx-auto mt-6 text-font-white">
<SkeletonNftDetail v-if="false"/>
<app-collectionCard :colletionData='nftData'></app-collectionCard> <app-collectionCard :colletionData='nftData'></app-collectionCard>
<div class="app-icons mx-auto grid grid-cols-4 my-6"> <div class="app-icons mx-auto grid grid-cols-4 my-6">
<div <div
...@@ -127,6 +128,7 @@ ...@@ -127,6 +128,7 @@
<script lang="ts"> <script lang="ts">
import Vue from "vue"; import Vue from "vue";
import SkeletonNftDetail from "@/components/common/Skeleton/SkeletonNftDetail.vue"
const apps = [ const apps = [
{ {
text: "版权认证", text: "版权认证",
...@@ -170,6 +172,7 @@ export default Vue.extend({ ...@@ -170,6 +172,7 @@ export default Vue.extend({
'app-btn':()=>import('@/components/common/Btn.vue'), 'app-btn':()=>import('@/components/common/Btn.vue'),
// 'app-scrollbar':()=>import('@/components/common/ScrollBar.vue'), // 'app-scrollbar':()=>import('@/components/common/ScrollBar.vue'),
"app-collectionCard": () => import("@/components/CollectionCard.vue"), "app-collectionCard": () => import("@/components/CollectionCard.vue"),
SkeletonNftDetail,
}, },
methods:{ methods:{
async setMyCollection():Promise<void>{ async setMyCollection():Promise<void>{
......
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