add shop loading back img

src/images/shop_back_svg.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background:#fff" viewBox="0 0 1080 1693"><defs><path id="b" d="M1 0h216v1148H1z"/><filter id="a" width="200%" height="200%" x="-50%" y="-50%" filterUnits="objectBoundingBox"><feOffset dx="1" in="SourceAlpha" result="shadowOffsetOuter1"/><feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0.933333333 0 0 0 0 0.933333333 0 0 0 0 0.933333333 0 0 0 1 0"/></filter><path id="d" d="M0 0h215v147.276H0z"/><filter id="c" width="200%" height="200%" x="-50%" y="-50%" filterUnits="objectBoundingBox"><feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/><feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0.933333333 0 0 0 0 0.933333333 0 0 0 0 0.933333333 0 0 0 1 0"/></filter><path id="f" d="M0 0h215v147.276H0z"/><filter id="e" width="200%" height="200%" x="-50%" y="-50%" filterUnits="objectBoundingBox"><feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/><feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0.933333333 0 0 0 0 0.933333333 0 0 0 0 0.933333333 0 0 0 1 0"/></filter><path id="h" d="M0 0h215v147.276H0z"/><filter id="g" width="200%" height="200%" x="-50%" y="-50%" filterUnits="objectBoundingBox"><feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/><feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0.933333333 0 0 0 0 0.933333333 0 0 0 0 0.933333333 0 0 0 1 0"/></filter><path id="j" d="M0 0h215v147.276H0z"/><filter id="i" width="200%" height="200%" x="-50%" y="-50%" filterUnits="objectBoundingBox"><feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/><feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0.933333333 0 0 0 0 0.933333333 0 0 0 0 0.933333333 0 0 0 1 0"/></filter><path id="l" d="M0 0h215v147.276H0z"/><filter id="k" width="200%" height="200%" x="-50%" y="-50%" filterUnits="objectBoundingBox"><feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/><feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0.933333333 0 0 0 0 0.933333333 0 0 0 0 0.933333333 0 0 0 1 0"/></filter><path id="n" d="M0 0h215v147.276H0z"/><filter id="m" width="200%" height="200%" x="-50%" y="-50%" filterUnits="objectBoundingBox"><feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/><feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0.933333333 0 0 0 0 0.933333333 0 0 0 0 0.933333333 0 0 0 1 0"/></filter><rect id="o" width="168" height="158.605" rx="12"/><rect id="p" width="168" height="158.605" rx="12"/><rect id="q" width="168" height="158.605" rx="12"/><rect id="r" width="168" height="158.911" rx="12"/><rect id="s" width="168" height="158.911" rx="12"/><path id="u" d="M0 0h1080v131.04H0z"/><filter id="t" width="200%" height="200%" x="-50%" y="-50%" filterUnits="objectBoundingBox"><feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/><feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0.933333333 0 0 0 0 0.933333333 0 0 0 0 0.933333333 0 0 0 1 0"/></filter><path id="v" d="M0 0h1080v375.8H0z"/></defs><g fill="none" fill-rule="evenodd"><g transform="translate(0 506.84)"><use fill="#000" filter="url(#a)" xlink:href="#b"/><use fill="#F6F6F6" xlink:href="#b"/></g><g transform="translate(1 654.116)"><use fill="#000" filter="url(#c)" xlink:href="#d"/><use fill="#F6F6F6" xlink:href="#d"/></g><path fill="#eee" d="M30 710.761h144v33.987H30z"/><g transform="translate(1 506.84)"><use fill="#000" filter="url(#e)" xlink:href="#f"/><use fill="#F6F6F6" xlink:href="#f"/></g><path fill="#eee" d="M30 563.485h144v33.987H30z"/><g transform="translate(0 801.84)"><use fill="#000" filter="url(#g)" xlink:href="#h"/><use fill="#F6F6F6" xlink:href="#h"/></g><path fill="#eee" d="M29 858.485h144v33.987H29z"/><g><g transform="translate(0 949.84)"><use fill="#000" filter="url(#i)" xlink:href="#j"/><use fill="#F6F6F6" xlink:href="#j"/></g><path fill="#eee" d="M29 1006.485h144v33.987H29z"/></g><g><g transform="translate(0 1097.84)"><use fill="#000" filter="url(#k)" xlink:href="#l"/><use fill="#F6F6F6" xlink:href="#l"/></g><path fill="#eee" d="M29 1154.485h144v33.987H29z"/></g><g><g transform="translate(0 1245.84)"><use fill="#000" filter="url(#m)" xlink:href="#n"/><use fill="#F6F6F6" xlink:href="#n"/></g><path fill="#eee" d="M29 1302.485h144v33.987H29z"/></g><g><path fill="#EEE" d="M249 740.028h833v.944H249z"/><g transform="translate(982 644.676)"><ellipse cx="35" cy="33.043" fill="#eee" rx="35" ry="33.043"/><path fill="#FFF" d="M32.168 30.21H19.825A2.826 2.826 0 0 0 17 33.044a2.83 2.83 0 0 0 2.825 2.832h12.343v12.343A2.826 2.826 0 0 0 35 51.043a2.83 2.83 0 0 0 2.832-2.825V35.875h12.343A2.826 2.826 0 0 0 53 33.043a2.83 2.83 0 0 0-2.825-2.832H37.832V17.868A2.826 2.826 0 0 0 35 15.043a2.83 2.83 0 0 0-2.832 2.825V30.21z"/></g><path fill="#eee" d="M447 659.78h80v39.652h-80zM447 599.36h300v28.322H447z"/><use fill="#eee" transform="translate(249 538.939)" xlink:href="#o"/><path fill="#eee" d="M447 538.939h400v39.65H447z"/><g><path fill="#EEE" d="M249 984.544h833v.944H249z"/><g transform="translate(982 889.192)"><ellipse cx="35" cy="33.043" fill="#eee" rx="35" ry="33.043"/><path fill="#FFF" d="M32.168 30.21H19.825A2.826 2.826 0 0 0 17 33.044a2.83 2.83 0 0 0 2.825 2.832h12.343v12.343A2.826 2.826 0 0 0 35 51.043a2.83 2.83 0 0 0 2.832-2.825V35.875h12.343A2.826 2.826 0 0 0 53 33.043a2.83 2.83 0 0 0-2.825-2.832H37.832V17.868A2.826 2.826 0 0 0 35 15.043a2.83 2.83 0 0 0-2.832 2.825V30.21z"/></g><path fill="#eee" d="M447 904.297h80v39.651h-80zM447 843.876h300v28.322H447z"/><use fill="#eee" transform="translate(249 783.455)" xlink:href="#p"/><path fill="#eee" d="M447 783.455h400v39.651H447z"/></g><g><path fill="#EEE" d="M249 1229.06h833v.945H249z"/><g transform="translate(982 1133.708)"><ellipse cx="35" cy="33.043" fill="#eee" rx="35" ry="33.043"/><path fill="#FFF" d="M32.168 30.21H19.825A2.826 2.826 0 0 0 17 33.044a2.83 2.83 0 0 0 2.825 2.832h12.343v12.343A2.826 2.826 0 0 0 35 51.043a2.83 2.83 0 0 0 2.832-2.825V35.875h12.343A2.826 2.826 0 0 0 53 33.043a2.83 2.83 0 0 0-2.825-2.832H37.832V17.868A2.826 2.826 0 0 0 35 15.043a2.83 2.83 0 0 0-2.832 2.825V30.21z"/></g><path fill="#eee" d="M447 1148.814h80v39.65h-80zM447 1088.393h300v28.322H447z"/><use fill="#eee" transform="translate(249 1027.972)" xlink:href="#q"/><path fill="#eee" d="M447 1027.972h400v39.65H447z"/></g><g><path fill="#EEE" d="M249 1473.964h833v.946H249z"/><g transform="translate(982 1378.429)"><ellipse cx="35" cy="33.106" fill="#eee" rx="35" ry="33.106"/><path fill="#FFF" d="M32.162 30.269H19.84a2.838 2.838 0 1 0 0 5.675h12.322v12.323a2.838 2.838 0 1 0 5.676 0V35.944H50.16a2.838 2.838 0 1 0 0-5.675H37.838V17.946a2.838 2.838 0 1 0-5.676 0V30.27z"/></g><path fill="#eee" d="M447 1393.563h80v39.728h-80zM447 1333.025h300v28.377H447z"/><use fill="#eee" transform="translate(249 1272.488)" xlink:href="#r"/><path fill="#eee" d="M447 1272.488h400v39.728H447z"/></g><g><g transform="translate(982 1607.88)"><ellipse cx="35" cy="33.106" fill="#eee" rx="35" ry="33.106"/><path fill="#FFF" d="M32.162 30.269H19.84a2.838 2.838 0 1 0 0 5.675h12.322v12.323a2.838 2.838 0 1 0 5.676 0V35.944H50.16a2.838 2.838 0 1 0 0-5.675H37.838V17.946a2.838 2.838 0 1 0-5.676 0V30.27z"/></g><path fill="#eee" d="M447 1623.014h80v39.728h-80zM447 1562.476h300v28.377H447z"/><use fill="#eee" transform="translate(249 1501.939)" xlink:href="#s"/><path fill="#eee" d="M447 1501.939h400v39.728H447z"/></g></g><g><g transform="translate(0 375.8)"><use fill="#000" filter="url(#t)" xlink:href="#u"/><use fill="#FFF" xlink:href="#u"/></g><path fill="#eee" d="M246 410.8h94v50h-94zM798 410.8h94v50h-94z"/></g><g><mask id="w" fill="#fff"><use xlink:href="#v"/></mask><use fill="#eee" xlink:href="#v"/><path fill="#F6F6F6" d="M244.77 102.24h600v50.4h-600zM244.77 172.8h500v37.44h-500zM244.77 233.28h704v38.185h-704zM28.8 315.36h990v33.12h-990z" mask="url(#w)"/><rect width="187.2" height="187.2" x="28.8" y="102.24" fill="#F6F6F6" mask="url(#w)" rx="6"/></g></g></svg>
\ No newline at end of file

src/page/shop/shop.vue

@@ -306,6 +306,9 @@
             </span>
         </transition>
        <loading v-show="showLoading || loadRatings"></loading>
+       <section class="animation_opactiy shop_back_svg_container" v-if="showLoading">
+           <img src="../../images/shop_back_svg.svg">
+       </section>
        <transition name="router-slid" mode="out-in">
             <router-view></router-view>
         </transition>
@@ -726,6 +729,13 @@
        75%  { transform: scale(.9) }
        100% { transform: scale(1) }
     }
+    .shop_back_svg_container{
+        position: fixed;
+        @include wh(100%, 100%);
+        img{
+            @include wh(100%, 100%);
+        }
+    }
     .shop_container{
         display: flex;
         flex-direction: column;