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;
padding: 0
* {
margin: 0;
padding: 0;
}
body{
background-color:#1D2649;
body {
background-color: #1d2649;
}
.van-tabs__nav{
background-color: transparent !important;
.van-tabs__nav {
background-color: transparent !important;
}
.van-tabs__line{
display: none;
.van-tabs__line {
display: none;
}
.van-tab--active{
color: #EEF1F6 !important;
.van-tab--active {
color: #eef1f6 !important;
}
.van-badge{
background-color:#ED6F6F !important;
.van-badge {
background-color: #ed6f6f !important;
}
.list-container{
height: 100vh - 390px;
overflow-y: scroll;
.list-container {
height: 100vh - 390px;
overflow-y: scroll;
}
.van-overlay{
background-color: rgba(10,14,35,.95);
.van-overlay {
background-color: rgba(10, 14, 35, 0.95);
}
.fade-enter-active,
......@@ -38,79 +37,87 @@ body{
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
transition: all .3s ease;
}
.slide-fade-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
transition: all 0.3s ease;
}
.slide-fade-leave-active {
transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
transform: translateX(10px);
opacity: 0;
}
.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;
}
transform: translateX(10px);
opacity: 0;
}
.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;
}
.page-scroll{
height: calc(100vh - 65px);
overflow-y: scroll;
}
.list-scroll{
height: calc(100vh - 400px);
overflow-y: scroll;
}
.myNFT-list-scroll{
height: calc(100vh - 290px);
overflow-y: scroll;
}
.collection-list{
height: calc(100vh - 60px);
overflow-y: scroll;
}
.van-dialog{
background-color: #1D2649;
.page-scroll {
height: calc(100vh - 65px);
overflow-y: scroll;
}
.list-scroll {
height: calc(100vh - 400px);
overflow-y: scroll;
}
.myNFT-list-scroll {
height: calc(100vh - 290px);
overflow-y: scroll;
}
.collection-list {
height: calc(100vh - 60px);
overflow-y: scroll;
}
.van-dialog {
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-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-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #EEF1F6;
}
.van-hairline--top, .van-dialog__footer, .van-button{
background-color: #1D2649;
}
.van-button__text{
font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #0078FF;
}
color: #eef1f6;
}
.van-hairline--top,
.van-dialog__footer,
.van-button {
background-color: #1d2649;
}
.van-button__text {
font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #0078ff;
}
}
.van-popup{
.van-action-sheet__gap{
.van-popup {
.van-action-sheet__gap {
background-color: #131934;
}
.van-action-sheet__item,.van-action-sheet__cancel{
background-color: #1D2649;
.van-action-sheet__item,
.van-action-sheet__cancel {
background-color: #1d2649;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
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;
}
}
\ No newline at end of file
}
src/view/NFT/Detail/index.vue
View file @ 5226fa5b
......@@ -4,6 +4,7 @@
loading....
</div> -->
<div class="w-11/12 mx-auto mt-6 text-font-white">
<SkeletonNftDetail v-if="false"/>
<app-collectionCard :colletionData='nftData'></app-collectionCard>
<div class="app-icons mx-auto grid grid-cols-4 my-6">
<div
......@@ -127,6 +128,7 @@
<script lang="ts">
import Vue from "vue";
import SkeletonNftDetail from "@/components/common/Skeleton/SkeletonNftDetail.vue"
const apps = [
{
text: "版权认证",
......@@ -170,6 +172,7 @@ export default Vue.extend({
'app-btn':()=>import('@/components/common/Btn.vue'),
// 'app-scrollbar':()=>import('@/components/common/ScrollBar.vue'),
"app-collectionCard": () => import("@/components/CollectionCard.vue"),
SkeletonNftDetail,
},
methods:{
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