feat：skeleton

src/components/common/Skeleton/Rect.vue

+<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

+<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

-*{
+* {
   margin: 0;
-    padding: 0
-
+  padding: 0;
 }
-body{
-    background-color:#1D2649;
+body {
+  background-color: #1d2649;
 }
 
-.van-tabs__nav{
+.van-tabs__nav {
   background-color: transparent !important;
 }
-.van-tabs__line{
+.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{
+.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{
+}
+.step-progress__step--valid span {
   font-size: 12px !important;
-  }
-  .step-progress__step span{
+}
+.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{
+}
+.step-progress__step-label,
+.step-progress__step--active .step-progress__step-label,
+.step-progress__step--active span {
   font-size: 12px !important;
-  }
+}
 
-  .page-scroll{
+.page-scroll {
   height: calc(100vh - 65px);
   overflow-y: scroll;
-  }
-  .list-scroll{
+}
+.list-scroll {
   height: calc(100vh - 400px);
   overflow-y: scroll;
-  }
-  .myNFT-list-scroll{
+}
+.myNFT-list-scroll {
   height: calc(100vh - 290px);
   overflow-y: scroll;
-  }
-  .collection-list{
+}
+.collection-list {
   height: calc(100vh - 60px);
   overflow-y: scroll;
-  }
-  .van-dialog{
-    background-color: #1D2649;
+}
+.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{
+  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;
+    color: #eef1f6;
   }
-    .van-hairline--top, .van-dialog__footer, .van-button{
-      background-color: #1D2649;
+  .van-hairline--top,
+  .van-dialog__footer,
+  .van-button {
+    background-color: #1d2649;
   }
-    .van-button__text{
+  .van-button__text {
     font-size: 14px;
     font-family: PingFangSC-Medium, PingFang SC;
     font-weight: 500;
-      color: #0078FF;
-    }
+    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;
   }
 }
+

src/view/NFT/Detail/index.vue

@@ -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>{