fix(magic): load on demand bug

src/packages/magic/Cube/CubeItem.vue

@@ -32,202 +32,4 @@ export default {
 };
 </script>
 
-<style lang="scss">
-$module_name: '.cube-item';
-#{$module_name} {
-  height: 90px;
-  width: 88px;
-  // margin-left: auto;
-  // margin-right: 10px;
-  border-radius: 26px;
-  overflow: hidden;
-  position: relative;
-  transform: translateZ(0);
-  &::before {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 60px;
-    border-radius: 0 0 26px 26px;
-  }
-  &-box {
-    height: 63px;
-    width: 100%;
-    text-align: center;
-    position: absolute;
-    background: #fff;
-    border-radius: 26px 26px 11px 11px;
-    transform: translateZ(0);
-    background-size: cover;
-    background-repeat: no-repeat;
-    overflow: hidden;
-  }
-
-  .sub-name {
-    width: 100%;
-    position: absolute;
-    top: 63px;
-    padding: 0 10px;
-    box-sizing: border-box;
-    color: #fff;
-    font-size: 14px;
-    text-align: center;
-    line-height: 27px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    transform: translateZ(0);
-  }
-
-  .sub-image {
-    display: block;
-    width: 60px;
-    height: 60px;
-    margin: 0 auto;
-    background-color: #fff;
-    background-position: center;
-    background-size: 100%;
-    transform: translateY(6px);
-  }
-  .sub-desc {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 77px;
-    box-sizing: border-box;
-    height: 15px;
-    color: #fff;
-    border-radius: 6px;
-    font-size: 12px;
-    text-align: center;
-    position: absolute;
-    bottom: 29px;
-    left: 50%;
-    transform-origin: 0 center;
-    transform: translate3d(-50%, 0, 1px);
-    span {
-      width: 100%;
-      display: block;
-      line-height: normal;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
-    }
-  }
-  // 图片
-  &--pic {
-    &::before {
-      background: url('https://img12.360buyimg.com/imagetools/jfs/t1/184083/34/6101/38841/60b065caEaaf7c5d0/eec4cd260f46d9f0.png') no-repeat
-        center/100%;
-      height: 100%;
-    }
-    .cube-item-box {
-      display: none;
-    }
-    .sub-desc {
-      display: none;
-    }
-    .sub-name {
-      display: none;
-    }
-  }
-  // 活动
-  &--act {
-    &::before {
-      background: url('https://img11.360buyimg.com/imagetools/jfs/t1/195605/17/5252/39357/60b065caEe0aa4c7e/04a341f4e51c6a9b.png') no-repeat
-        center/100%;
-    }
-    .sub-desc {
-      background: #ff5c17;
-    }
-  }
-  // 榜单
-  &--rank {
-    &::before {
-      background: url('https://img14.360buyimg.com/imagetools/jfs/t1/183388/37/6207/39741/60b065caEea1440a1/8860c63660fc9ac4.png') no-repeat
-        center/100%;
-    }
-    .sub-desc {
-      background: #1f95fb;
-    }
-  }
-  // shop
-  &--shop {
-    &::before {
-      background: url('https://img12.360buyimg.com/imagetools/jfs/t1/184083/34/6101/38841/60b065caEaaf7c5d0/eec4cd260f46d9f0.png') no-repeat
-        center/100%;
-    }
-    .sub-desc {
-      background: #ffd01f;
-      span {
-        color: #000;
-      }
-    }
-  }
-  // lbs
-  &--lbs {
-    &::before {
-      background: url('https://img10.360buyimg.com/imagetools/jfs/t1/129094/23/18726/38672/60b065caEb849e8cb/da761e3ebae5bc84.png') no-repeat
-        center/100%;
-    }
-    .sub-desc {
-      background: #ffd01f;
-      span {
-        color: #000;
-      }
-    }
-  }
-  // 未读
-  &--unread {
-    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
-    animation: show 2s infinite;
-  }
-  &--special {
-    background-size: cover;
-    background-repeat: no-repeat;
-    &:before {
-      display: none;
-    }
-    .cube-item-box {
-      display: none;
-    }
-    .sub-desc {
-      display: none;
-    }
-  }
-  @keyframes show {
-    0% {
-      box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
-    }
-    50% {
-      box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
-    }
-    100% {
-      box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
-    }
-  }
-  @at-root .cube-wrapper--inited {
-    .cube-col {
-      .cube-item {
-        .sub-image {
-          animation: cube-image 0.2s cubic-bezier(0.33, 0, 0.67, 1) 1s forwards;
-        }
-      }
-    }
-  }
-
-  @keyframes cube-image {
-    0% {
-      transform: translateY(13px);
-    }
-    66% {
-      transform: translateY(-5px);
-    }
-    100% {
-      transform: translateY(0);
-    }
-  }
-}
-</style>
+<style lang="scss"></style>

src/packages/magic/Cube/index.vue

@@ -466,146 +466,4 @@ export default {
 };
 </script>
 
-<style lang="scss">
-.adjust-position {
-  margin-top: -20px;
-  margin-bottom: -20px;
-}
-.header-wrap {
-  position: relative;
-  height: 710px;
-  .img-header {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-  }
-}
-$module_name: '.cube';
-
-#{$module_name} {
-  width: 100%;
-  // position: absolute;
-  z-index: 10;
-
-  &-container {
-    width: 100%;
-    padding: 15px 0;
-    box-sizing: border-box;
-    height: 100%;
-    overflow: hidden;
-  }
-  &-wrapper {
-    width: 100%;
-    white-space: nowrap;
-    perspective: 500px;
-    animation-play-state: paused;
-    transition-property: all;
-    transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
-  }
-  &-col {
-    display: inline-block;
-    width: 25%;
-    box-sizing: border-box;
-    // padding: 0 4px;
-    transition: inherit;
-
-    &--anime:nth-child(5) {
-      #{$module_name}-item-wrap {
-        animation: cube5 560ms cubic-bezier(0.33, 0, 0.67, 1) 1s both;
-      }
-    }
-    @keyframes cube5 {
-      0% {
-        animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1);
-        transform: translate3d(733px, 0, 0);
-      }
-      57% {
-        animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1);
-        transform: translate3d(-30px, 0, 0);
-      }
-      58% {
-        animation-timing-function: cubic-bezier(0.17, 0, 0.67, 1);
-        transform: translate3d(-30px, 0, 0);
-      }
-      100% {
-        animation-timing-function: cubic-bezier(0.17, 0, 0.67, 1);
-        transform: translate3d(0, 0, 0);
-      }
-    }
-
-    &--anime:nth-child(6) {
-      #{$module_name}-item-wrap {
-        animation: cube6 560ms cubic-bezier(0.33, 0, 0.83, 1) 1.08s both;
-      }
-    }
-    @keyframes cube6 {
-      0% {
-        animation-timing-function: cubic-bezier(0.33, 0, 0.83, 1);
-        transform: translate3d(554px, 0, 0);
-      }
-      57% {
-        animation-timing-function: cubic-bezier(0.33, 0, 0.83, 1);
-        transform: translate3d(-20px, 0, 0);
-      }
-      58% {
-        animation-timing-function: cubic-bezier(0.17, 0, 0.67, 1);
-        transform: translate3d(-20px, 0, 0);
-      }
-      100% {
-        animation-timing-function: cubic-bezier(0.17, 0, 0.67, 1);
-        transform: translate3d(0, 0, 0);
-      }
-    }
-
-    &--anime:nth-child(7) {
-      #{$module_name}-item-wrap {
-        animation: cube7 560ms cubic-bezier(0.33, 0, 0.83, 1) 1.16s both;
-      }
-    }
-    @keyframes cube7 {
-      0% {
-        animation-timing-function: cubic-bezier(0.33, 0, 0.83, 1);
-        transform: translate3d(378px, 0, 0);
-      }
-      57% {
-        animation-timing-function: cubic-bezier(0.33, 0, 0.83, 1);
-        transform: translate3d(-20px, 0, 0);
-      }
-      58% {
-        animation-timing-function: cubic-bezier(0.17, 0, 0.67, 1);
-        transform: translate3d(-20px, 0, 0);
-      }
-      100% {
-        animation-timing-function: cubic-bezier(0.17, 0, 0.67, 1);
-        transform: translate3d(0, 0, 0);
-      }
-    }
-    &--anime:nth-child(8) {
-      #{$module_name}-item-wrap {
-        animation: cube8 560ms cubic-bezier(0.33, 0, 0.83, 1) 1.28s both;
-      }
-    }
-    @keyframes cube8 {
-      0% {
-        animation-timing-function: cubic-bezier(0.33, 0, 0.83, 1);
-        transform: translate3d(205px, 0, 0);
-      }
-      57% {
-        animation-timing-function: cubic-bezier(0.33, 0, 0.83, 1);
-        transform: translate3d(-20px, 0, 0);
-      }
-      58% {
-        animation-timing-function: cubic-bezier(0.17, 0, 0.67, 1);
-        transform: translate3d(-20px, 0, 0);
-      }
-      100% {
-        animation-timing-function: cubic-bezier(0.17, 0, 0.67, 1);
-        transform: translate3d(0, 0, 0);
-      }
-    }
-  }
-  &-item-wrap {
-    margin-bottom: 16px;
-  }
-}
-</style>
+<style lang="scss"></style>

src/packages/magic/index.js

@@ -1,8 +1,12 @@
 import Magic from './magic.vue';
+import Cube from './Cube/index.vue';
+import CubeItem from './Cube/CubeItem.vue';
 import './magic.scss';
 
 Magic.install = function(Vue) {
   Vue.component(Magic.name, Magic);
+  Vue.component('Cube', Cube);
+  Vue.component('CubeItem', CubeItem);
 };
 
 export default Magic;

src/packages/magic/magic.scss

@@ -1,2 +1,340 @@
-.nut-magic {
+.adjust-position {
+  margin-top: -20px;
+  margin-bottom: -20px;
+}
+.header-wrap {
+  position: relative;
+  height: 710px;
+  .img-header {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+  }
+}
+
+$module_name: '.cube-item';
+#{$module_name} {
+  height: 90px;
+  width: 88px;
+  // margin-left: auto;
+  // margin-right: 10px;
+  border-radius: 26px;
+  overflow: hidden;
+  position: relative;
+  transform: translateZ(0);
+  &::before {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 60px;
+    border-radius: 0 0 26px 26px;
+  }
+  &-box {
+    height: 63px;
+    width: 100%;
+    text-align: center;
+    position: absolute;
+    background: #fff;
+    border-radius: 26px 26px 11px 11px;
+    transform: translateZ(0);
+    background-size: cover;
+    background-repeat: no-repeat;
+    overflow: hidden;
+  }
+
+  .sub-name {
+    width: 100%;
+    position: absolute;
+    top: 63px;
+    padding: 0 10px;
+    box-sizing: border-box;
+    color: #fff;
+    font-size: 14px;
+    text-align: center;
+    line-height: 27px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    transform: translateZ(0);
+  }
+
+  .sub-image {
+    display: block;
+    width: 60px;
+    height: 60px;
+    margin: 0 auto;
+    background-color: #fff;
+    background-position: center;
+    background-size: 100%;
+    transform: translateY(6px);
+  }
+  .sub-desc {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 77px;
+    box-sizing: border-box;
+    height: 15px;
+    color: #fff;
+    border-radius: 6px;
+    font-size: 12px;
+    text-align: center;
+    position: absolute;
+    bottom: 29px;
+    left: 50%;
+    transform-origin: 0 center;
+    transform: translate3d(-50%, 0, 1px);
+    span {
+      width: 100%;
+      display: block;
+      line-height: normal;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+    }
+  }
+  // 图片
+  &--pic {
+    &::before {
+      background: url('https://img12.360buyimg.com/imagetools/jfs/t1/184083/34/6101/38841/60b065caEaaf7c5d0/eec4cd260f46d9f0.png') no-repeat
+        center/100%;
+      height: 100%;
+    }
+    .cube-item-box {
+      display: none;
+    }
+    .sub-desc {
+      display: none;
+    }
+    .sub-name {
+      display: none;
+    }
+  }
+  // 活动
+  &--act {
+    &::before {
+      background: url('https://img11.360buyimg.com/imagetools/jfs/t1/195605/17/5252/39357/60b065caEe0aa4c7e/04a341f4e51c6a9b.png') no-repeat
+        center/100%;
+    }
+    .sub-desc {
+      background: #ff5c17;
+    }
+  }
+  // 榜单
+  &--rank {
+    &::before {
+      background: url('https://img14.360buyimg.com/imagetools/jfs/t1/183388/37/6207/39741/60b065caEea1440a1/8860c63660fc9ac4.png') no-repeat
+        center/100%;
+    }
+    .sub-desc {
+      background: #1f95fb;
+    }
+  }
+  // shop
+  &--shop {
+    &::before {
+      background: url('https://img12.360buyimg.com/imagetools/jfs/t1/184083/34/6101/38841/60b065caEaaf7c5d0/eec4cd260f46d9f0.png') no-repeat
+        center/100%;
+    }
+    .sub-desc {
+      background: #ffd01f;
+      span {
+        color: #000;
+      }
+    }
+  }
+  // lbs
+  &--lbs {
+    &::before {
+      background: url('https://img10.360buyimg.com/imagetools/jfs/t1/129094/23/18726/38672/60b065caEb849e8cb/da761e3ebae5bc84.png') no-repeat
+        center/100%;
+    }
+    .sub-desc {
+      background: #ffd01f;
+      span {
+        color: #000;
+      }
+    }
+  }
+  // 未读
+  &--unread {
+    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
+    animation: show 2s infinite;
+  }
+  &--special {
+    background-size: cover;
+    background-repeat: no-repeat;
+    &:before {
+      display: none;
+    }
+    .cube-item-box {
+      display: none;
+    }
+    .sub-desc {
+      display: none;
+    }
+  }
+  @keyframes show {
+    0% {
+      box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
+    }
+    50% {
+      box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
+    }
+    100% {
+      box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
+    }
+  }
+  @at-root .cube-wrapper--inited {
+    .cube-col {
+      .cube-item {
+        .sub-image {
+          animation: cube-image 0.2s cubic-bezier(0.33, 0, 0.67, 1) 1s forwards;
+        }
+      }
+    }
+  }
+
+  @keyframes cube-image {
+    0% {
+      transform: translateY(13px);
+    }
+    66% {
+      transform: translateY(-5px);
+    }
+    100% {
+      transform: translateY(0);
+    }
+  }
+}
+
+$module_name1: '.cube';
+
+#{$module_name1} {
+  width: 100%;
+  // position: absolute;
+  z-index: 10;
+
+  &-container {
+    width: 100%;
+    padding: 15px 0;
+    box-sizing: border-box;
+    height: 100%;
+    overflow: hidden;
+  }
+  &-wrapper {
+    width: 100%;
+    white-space: nowrap;
+    perspective: 500px;
+    animation-play-state: paused;
+    transition-property: all;
+    transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
+  }
+  &-col {
+    display: inline-block;
+    width: 25%;
+    box-sizing: border-box;
+    // padding: 0 4px;
+    transition: inherit;
+
+    &--anime:nth-child(5) {
+      #{$module_name1}-item-wrap {
+        animation: cube5 560ms cubic-bezier(0.33, 0, 0.67, 1) 1s both;
+      }
+    }
+    @keyframes cube5 {
+      0% {
+        animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1);
+        transform: translate3d(733px, 0, 0);
+      }
+      57% {
+        animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1);
+        transform: translate3d(-30px, 0, 0);
+      }
+      58% {
+        animation-timing-function: cubic-bezier(0.17, 0, 0.67, 1);
+        transform: translate3d(-30px, 0, 0);
+      }
+      100% {
+        animation-timing-function: cubic-bezier(0.17, 0, 0.67, 1);
+        transform: translate3d(0, 0, 0);
+      }
+    }
+
+    &--anime:nth-child(6) {
+      #{$module_name1}-item-wrap {
+        animation: cube6 560ms cubic-bezier(0.33, 0, 0.83, 1) 1.08s both;
+      }
+    }
+    @keyframes cube6 {
+      0% {
+        animation-timing-function: cubic-bezier(0.33, 0, 0.83, 1);
+        transform: translate3d(554px, 0, 0);
+      }
+      57% {
+        animation-timing-function: cubic-bezier(0.33, 0, 0.83, 1);
+        transform: translate3d(-20px, 0, 0);
+      }
+      58% {
+        animation-timing-function: cubic-bezier(0.17, 0, 0.67, 1);
+        transform: translate3d(-20px, 0, 0);
+      }
+      100% {
+        animation-timing-function: cubic-bezier(0.17, 0, 0.67, 1);
+        transform: translate3d(0, 0, 0);
+      }
+    }
+
+    &--anime:nth-child(7) {
+      #{$module_name1}-item-wrap {
+        animation: cube7 560ms cubic-bezier(0.33, 0, 0.83, 1) 1.16s both;
+      }
+    }
+    @keyframes cube7 {
+      0% {
+        animation-timing-function: cubic-bezier(0.33, 0, 0.83, 1);
+        transform: translate3d(378px, 0, 0);
+      }
+      57% {
+        animation-timing-function: cubic-bezier(0.33, 0, 0.83, 1);
+        transform: translate3d(-20px, 0, 0);
+      }
+      58% {
+        animation-timing-function: cubic-bezier(0.17, 0, 0.67, 1);
+        transform: translate3d(-20px, 0, 0);
+      }
+      100% {
+        animation-timing-function: cubic-bezier(0.17, 0, 0.67, 1);
+        transform: translate3d(0, 0, 0);
+      }
+    }
+    &--anime:nth-child(8) {
+      #{$module_name1}-item-wrap {
+        animation: cube8 560ms cubic-bezier(0.33, 0, 0.83, 1) 1.28s both;
+      }
+    }
+    @keyframes cube8 {
+      0% {
+        animation-timing-function: cubic-bezier(0.33, 0, 0.83, 1);
+        transform: translate3d(205px, 0, 0);
+      }
+      57% {
+        animation-timing-function: cubic-bezier(0.33, 0, 0.83, 1);
+        transform: translate3d(-20px, 0, 0);
+      }
+      58% {
+        animation-timing-function: cubic-bezier(0.17, 0, 0.67, 1);
+        transform: translate3d(-20px, 0, 0);
+      }
+      100% {
+        animation-timing-function: cubic-bezier(0.17, 0, 0.67, 1);
+        transform: translate3d(0, 0, 0);
+      }
+    }
+  }
+  &-item-wrap {
+    margin-bottom: 16px;
+  }
 }