修复图片抖动

2018专题/1807吸血鬼专题-商务/src/img/atlas/icon-1.less

@@ -0,0 +1,46 @@
+//
+// Created with TexturePacker http://www.codeandweb.com/texturepacker
+//
+// SmartUpdateHash: $TexturePacker:SmartUpdate:3fb01eb6acd3e9816bdc20afc0feecad$
+//
+
+.sprite-icon-1 { display:inline-block; overflow: hidden; background-repeat: no-repeat; background-image: url('icon-1.png'); }
+
+.icon-1-fg_00000 { width: 300px; height: 300px; background-position: -0px -0px; }
+.icon-1-fg_00001 { width: 300px; height: 300px; background-position: -0px -302px; }
+.icon-1-fg_00002 { width: 300px; height: 300px; background-position: -0px -604px; }
+.icon-1-fg_00003 { width: 300px; height: 300px; background-position: -0px -906px; }
+.icon-1-fg_00004 { width: 300px; height: 300px; background-position: -0px -1208px; }
+.icon-1-fg_00005 { width: 300px; height: 300px; background-position: -0px -1510px; }
+.icon-1-fg_00006 { width: 300px; height: 300px; background-position: -0px -1812px; }
+.icon-1-fg_00007 { width: 300px; height: 300px; background-position: -0px -2114px; }
+.icon-1-fg_00008 { width: 300px; height: 300px; background-position: -0px -2416px; }
+.icon-1-fg_00009 { width: 300px; height: 300px; background-position: -0px -2718px; }
+.icon-1-fg_00010 { width: 300px; height: 300px; background-position: -0px -3020px; }
+.icon-1-fg_00011 { width: 300px; height: 300px; background-position: -0px -3322px; }
+.icon-1-fg_00012 { width: 300px; height: 300px; background-position: -0px -3624px; }
+.icon-1-fg_00013 { width: 300px; height: 300px; background-position: -0px -3926px; }
+.icon-1-fg_00014 { width: 300px; height: 300px; background-position: -0px -4228px; }
+.icon-1-fg_00015 { width: 300px; height: 300px; background-position: -0px -4530px; }
+.icon-1-fg_00016 { width: 300px; height: 300px; background-position: -0px -4832px; }
+.icon-1-fg_00017 { width: 300px; height: 300px; background-position: -0px -5134px; }
+.icon-1-fg_00018 { width: 300px; height: 300px; background-position: -0px -5436px; }
+.icon-1-fg_00019 { width: 300px; height: 300px; background-position: -0px -5738px; }
+.icon-1-fg_00020 { width: 300px; height: 300px; background-position: -0px -6040px; }
+.icon-1-fg_00021 { width: 300px; height: 300px; background-position: -0px -6342px; }
+.icon-1-fg_00022 { width: 300px; height: 300px; background-position: -0px -6644px; }
+.icon-1-fg_00023 { width: 300px; height: 300px; background-position: -0px -6946px; }
+.icon-1-fg_00024 { width: 300px; height: 300px; background-position: -0px -7248px; }
+.icon-1-fg_00025 { width: 300px; height: 300px; background-position: -0px -7550px; }
+.icon-1-fg_00026 { width: 300px; height: 300px; background-position: -0px -7852px; }
+.icon-1-fg_00027 { width: 300px; height: 300px; background-position: -0px -8154px; }
+.icon-1-fg_00028 { width: 300px; height: 300px; background-position: -0px -8456px; }
+.icon-1-fg_00029 { width: 300px; height: 300px; background-position: -0px -8758px; }
+.icon-1-fg_00030 { width: 300px; height: 300px; background-position: -0px -9060px; }
+.icon-1-fg_00031 { width: 300px; height: 300px; background-position: -0px -9362px; }
+.icon-1-fg_00032 { width: 300px; height: 300px; background-position: -0px -9664px; }
+.icon-1-fg_00033 { width: 300px; height: 300px; background-position: -0px -9966px; }
+.icon-1-fg_00034 { width: 300px; height: 300px; background-position: -0px -10268px; }
+.icon-1-fg_00035 { width: 300px; height: 300px; background-position: -0px -10570px; }
+.icon-1-fg_00036 { width: 300px; height: 300px; background-position: -0px -10872px; }
+.icon-1-fg_00037 { width: 300px; height: 300px; background-position: -0px -11174px; }

2018专题/1807吸血鬼专题-商务/src/img/atlas/icon.less

@@ -1,46 +1,46 @@
 //
 // Created with TexturePacker http://www.codeandweb.com/texturepacker
 //
-// SmartUpdateHash: $TexturePacker:SmartUpdate:122a4a52ea93b15bfa55dfdacc4cff29$
+// SmartUpdateHash: $TexturePacker:SmartUpdate:14a8a0d6f605b27383444b71a985d21d$
 //
 
 .sprite-icon { display:inline-block; overflow: hidden; background-repeat: no-repeat; background-image: url('icon.png'); }
 
-.icon-fg_00000 { width: 52px; height: 72px; background-position: -458px -316px; }
-.icon-fg_00001 { width: 52px; height: 72px; background-position: -404px -316px; }
-.icon-fg_00002 { width: 52px; height: 72px; background-position: -350px -414px; }
-.icon-fg_00003 { width: 54px; height: 74px; background-position: -412px -240px; }
-.icon-fg_00004 { width: 54px; height: 74px; background-position: -296px -264px; }
-.icon-fg_00005 { width: 56px; height: 76px; background-position: -418px -162px; }
-.icon-fg_00006 { width: 58px; height: 76px; background-position: -296px -80px; }
-.icon-fg_00007 { width: 60px; height: 80px; background-position: -418px -2px; }
-.icon-fg_00008 { width: 62px; height: 82px; background-position: -292px -180px; }
-.icon-fg_00009 { width: 64px; height: 84px; background-position: -230px -2px; }
-.icon-fg_00010 { width: 66px; height: 84px; background-position: -228px -94px; }
-.icon-fg_00011 { width: 68px; height: 86px; background-position: -226px -278px; }
-.icon-fg_00012 { width: 70px; height: 90px; background-position: -158px -2px; }
-.icon-fg_00013 { width: 72px; height: 92px; background-position: -154px -382px; }
-.icon-fg_00014 { width: 74px; height: 92px; background-position: -80px -288px; }
-.icon-fg_00015 { width: 74px; height: 92px; background-position: -80px -194px; }
-.icon-fg_00016 { width: 76px; height: 94px; background-position: -2px -388px; }
-.icon-fg_00017 { width: 76px; height: 94px; background-position: -2px -292px; }
-.icon-fg_00018 { width: 78px; height: 96px; background-position: -2px -2px; }
-.icon-fg_00019 { width: 76px; height: 94px; background-position: -2px -196px; }
-.icon-fg_00020 { width: 76px; height: 94px; background-position: -2px -100px; }
-.icon-fg_00021 { width: 74px; height: 92px; background-position: -82px -2px; }
-.icon-fg_00022 { width: 74px; height: 92px; background-position: -80px -100px; }
-.icon-fg_00023 { width: 72px; height: 92px; background-position: -80px -382px; }
-.icon-fg_00024 { width: 70px; height: 90px; background-position: -156px -96px; }
-.icon-fg_00025 { width: 70px; height: 88px; background-position: -156px -188px; }
-.icon-fg_00026 { width: 68px; height: 86px; background-position: -156px -278px; }
-.icon-fg_00027 { width: 66px; height: 84px; background-position: -228px -366px; }
-.icon-fg_00028 { width: 62px; height: 82px; background-position: -228px -180px; }
-.icon-fg_00029 { width: 60px; height: 80px; background-position: -356px -2px; }
-.icon-fg_00030 { width: 60px; height: 78px; background-position: -356px -84px; }
-.icon-fg_00031 { width: 58px; height: 76px; background-position: -296px -2px; }
-.icon-fg_00032 { width: 56px; height: 76px; background-position: -418px -84px; }
-.icon-fg_00033 { width: 54px; height: 74px; background-position: -356px -240px; }
-.icon-fg_00034 { width: 54px; height: 74px; background-position: -356px -164px; }
-.icon-fg_00035 { width: 52px; height: 72px; background-position: -350px -340px; }
-.icon-fg_00036 { width: 52px; height: 72px; background-position: -296px -414px; }
-.icon-fg_00037 { width: 52px; height: 72px; background-position: -296px -340px; }
+.icon-fg_00000 { width: 52px; height: 72px; background-position: -350px -378px; }
+.icon-fg_00001 { width: 52px; height: 72px; background-position: -454px -304px; }
+.icon-fg_00002 { width: 52px; height: 72px; background-position: -400px -304px; }
+.icon-fg_00003 { width: 54px; height: 72px; background-position: -402px -156px; }
+.icon-fg_00004 { width: 54px; height: 72px; background-position: -404px -82px; }
+.icon-fg_00005 { width: 54px; height: 74px; background-position: -344px -254px; }
+.icon-fg_00006 { width: 56px; height: 76px; background-position: -290px -82px; }
+.icon-fg_00007 { width: 60px; height: 78px; background-position: -412px -2px; }
+.icon-fg_00008 { width: 62px; height: 80px; background-position: -286px -358px; }
+.icon-fg_00009 { width: 62px; height: 82px; background-position: -226px -2px; }
+.icon-fg_00010 { width: 64px; height: 82px; background-position: -224px -92px; }
+.icon-fg_00011 { width: 66px; height: 84px; background-position: -220px -272px; }
+.icon-fg_00012 { width: 70px; height: 88px; background-position: -154px -2px; }
+.icon-fg_00013 { width: 70px; height: 88px; background-position: -152px -94px; }
+.icon-fg_00014 { width: 72px; height: 90px; background-position: -78px -280px; }
+.icon-fg_00015 { width: 72px; height: 90px; background-position: -78px -188px; }
+.icon-fg_00016 { width: 74px; height: 92px; background-position: -2px -378px; }
+.icon-fg_00017 { width: 74px; height: 92px; background-position: -2px -284px; }
+.icon-fg_00018 { width: 76px; height: 92px; background-position: -2px -2px; }
+.icon-fg_00019 { width: 74px; height: 92px; background-position: -2px -190px; }
+.icon-fg_00020 { width: 74px; height: 92px; background-position: -2px -96px; }
+.icon-fg_00021 { width: 72px; height: 90px; background-position: -80px -2px; }
+.icon-fg_00022 { width: 72px; height: 90px; background-position: -78px -96px; }
+.icon-fg_00023 { width: 70px; height: 88px; background-position: -150px -372px; }
+.icon-fg_00024 { width: 70px; height: 88px; background-position: -78px -372px; }
+.icon-fg_00025 { width: 68px; height: 86px; background-position: -152px -184px; }
+.icon-fg_00026 { width: 66px; height: 84px; background-position: -152px -272px; }
+.icon-fg_00027 { width: 64px; height: 82px; background-position: -222px -184px; }
+.icon-fg_00028 { width: 62px; height: 80px; background-position: -222px -358px; }
+.icon-fg_00029 { width: 60px; height: 78px; background-position: -350px -2px; }
+.icon-fg_00030 { width: 58px; height: 78px; background-position: -290px -2px; }
+.icon-fg_00031 { width: 56px; height: 76px; background-position: -288px -176px; }
+.icon-fg_00032 { width: 54px; height: 74px; background-position: -288px -254px; }
+.icon-fg_00033 { width: 54px; height: 72px; background-position: -348px -82px; }
+.icon-fg_00034 { width: 54px; height: 72px; background-position: -346px -160px; }
+.icon-fg_00035 { width: 52px; height: 72px; background-position: -456px -230px; }
+.icon-fg_00036 { width: 52px; height: 72px; background-position: -402px -230px; }
+.icon-fg_00037 { width: 52px; height: 72px; background-position: -458px -156px; }

2018专题/1807吸血鬼专题-商务/src/index.html

@@ -429,8 +429,6 @@
                             <i class="icon-prev" @click="changeTask2Scene(26)"></i>
                             <img data-src="./img/task/2/scene-27.jpg" alt="">
 
-                            <i class="icon-mark" @click="changeTask2Scene(24)"></i>
-
                             <div class="mark-popup empty-popup">
                                 <header class="popup-hd">这里什么也没有</header>
                                 <section class="popup-bd">
@@ -534,7 +532,7 @@
                             <i class="icon-prev" @click="changeTask2Scene(4)"></i>
                             <img data-src="./img/task/2/scene-8.jpg" alt="">
 
-                            <i class="icon-mark" @click="changeTask2Scene(6)"></i>
+                            <!-- <i class="icon-mark" @click="changeTask2Scene(6)"></i> -->
 
                             <div class="delete-line suanyatie top" v-show="task2.getSuanYaTie"></div>
                             <div class="delete-line kuini middle" v-show="task2.getKuiNi"></div>
@@ -761,7 +759,7 @@
                             <i class="icon-prev" @click="changeTask2Scene(13)"></i>
                             <img data-src="./img/task/2/scene-15.jpg" alt="">
 
-                            <i class="icon-mark" @click="changeTask2Scene(6)"></i>
+                            <!-- <i class="icon-mark" @click="changeTask2Scene(6)"></i> -->
 
                             <div class="delete-line nacl top" v-show="task2.getDrug"></div>
                         </div>
@@ -1137,9 +1135,9 @@
             <!--结束页 s-->
             <div class="page-end" v-if="swiperIndex == 6" key="end">
                 <div class="vampyr-logo"></div>
-                <a href="https://store.steampowered.com/app/427290/Vampyr/" title="购买游戏" class="btn-buy"></a>
+                <a href="//store.steampowered.com/app/427290/Vampyr/" title="购买游戏" class="btn-buy"></a>
                 <button title="玩家评论" class="btn-comment" @click="commentVisible = 1"></button>
-                <a href="http://www.duowan.com/1801/m_380731143157.html" title="往期回顾" class="btn-history"></a>
+                <a href="//www.duowan.com/1801/m_380731143157.html" title="往期回顾" class="btn-history"></a>
             </div>
             <!--结束页 e-->
 
@@ -1182,7 +1180,7 @@
             <div class="comment-mask"></div>
             <div class="comment-cont">
                 <i class="close" title="关闭" @click="commentVisible = 0">×</i>
-                <iframe src="//ceshi.duowan.com/1807/m_396961016619.html" frameborder="0"></iframe>
+                <iframe src="//hdzt.duowan.com/1808/m_397579768209.html" frameborder="0"></iframe>
             </div>
 
         </div>

2018专题/1807吸血鬼专题-商务/src/sass/global.scss

@@ -214,14 +214,22 @@ music;
     width: 56px;
     height: 74px;
     cursor: pointer;
+    @media screen and (max-width: 1600px) {
+        transform: scale(0.84, 0.84)
+    }
+    @media screen and (max-width:1400px) {
+        transform: scale(0.73, 0.73)
+    }
     &:before {
         content: '';
         position: absolute;
+        width: 300px;
+        height: 300px;
         left: 50%;
         top: 50%;
         transform: translate(-50%, -50%);
-        background: url("../img/atlas/icon.png") no-repeat;
-        animation: icon 2s steps(1) infinite;
+        background: url("../img/atlas/icon-1.png") no-repeat;
+        animation: icon1 3s steps(37) infinite;
     }
 }
 

2018专题/1807吸血鬼专题-商务/src/sass/module/_animation.scss

@@ -153,7 +153,8 @@
 }
 
 @keyframes light {
-    from,2% {
+    from,
+    2% {
         width: 4px;
         height: 4px;
         background-position: -504px -94px;
@@ -393,204 +394,214 @@
         height: 108px;
         background-position: -136px -422px;
     }
-    to,98% {
+    to,
+    98% {
         width: 112px;
         height: 110px;
         background-position: -392px -410px;
     }
 }
 
-@keyframes icon {
-    from,
-    2.63% {
-        width: 52px;
-        height: 72px;
-        background-position: -458px -316px;
-    }
-    5.26% {
-        width: 52px;
-        height: 72px;
-        background-position: -404px -316px;
-    }
-    7.89% {
-        width: 52px;
-        height: 72px;
-        background-position: -350px -414px;
-    }
-    10.52% {
-        width: 54px;
-        height: 74px;
-        background-position: -412px -240px;
-    }
-    13.15% {
-        width: 54px;
-        height: 74px;
-        background-position: -296px -264px;
-    }
-    15.78% {
-        width: 56px;
-        height: 76px;
-        background-position: -418px -162px;
-    }
-    18.41% {
-        width: 58px;
-        height: 76px;
-        background-position: -296px -80px;
-    }
-    21.04% {
-        width: 60px;
-        height: 80px;
-        background-position: -418px -2px;
-    }
-    23.67% {
-        width: 62px;
-        height: 82px;
-        background-position: -292px -180px;
-    }
-    26.30% {
-        width: 64px;
-        height: 84px;
-        background-position: -230px -2px;
-    }
-    28.93% {
-        width: 66px;
-        height: 84px;
-        background-position: -228px -94px;
-    }
-    31.56% {
-        width: 68px;
-        height: 86px;
-        background-position: -226px -278px;
-    }
-    34.19% {
-        width: 70px;
-        height: 90px;
-        background-position: -158px -2px;
-    }
-    36.82% {
-        width: 72px;
-        height: 92px;
-        background-position: -154px -382px;
-    }
-    39.45% {
-        width: 74px;
-        height: 92px;
-        background-position: -80px -288px;
-    }
-    42.08% {
-        width: 74px;
-        height: 92px;
-        background-position: -80px -194px;
-    }
-    44.71% {
-        width: 76px;
-        height: 94px;
-        background-position: -2px -388px;
-    }
-    47.34% {
-        width: 76px;
-        height: 94px;
-        background-position: -2px -292px;
-    }
-    49.97% {
-        width: 78px;
-        height: 96px;
-        background-position: -2px -2px;
-    }
-    52.60% {
-        width: 76px;
-        height: 94px;
-        background-position: -2px -196px;
-    }
-    55.23% {
-        width: 76px;
-        height: 94px;
-        background-position: -2px -100px;
-    }
-    57.86% {
-        width: 74px;
-        height: 92px;
-        background-position: -82px -2px;
-    }
-    60.49% {
-        width: 74px;
-        height: 92px;
-        background-position: -80px -100px;
-    }
-    63.12% {
-        width: 72px;
-        height: 92px;
-        background-position: -80px -382px;
-    }
-    65.75% {
-        width: 70px;
-        height: 90px;
-        background-position: -156px -96px;
-    }
-    68.38% {
-        width: 70px;
-        height: 88px;
-        background-position: -156px -188px;
-    }
-    71.01% {
-        width: 68px;
-        height: 86px;
-        background-position: -156px -278px;
-    }
-    73.64% {
-        width: 66px;
-        height: 84px;
-        background-position: -228px -366px;
+@keyframes icon1 {
+    from {
+        background-position: 0 0;
     }
-    76.27% {
-        width: 62px;
-        height: 82px;
-        background-position: -228px -180px;
-    }
-    78.90% {
-        width: 60px;
-        height: 80px;
-        background-position: -356px -2px;
-    }
-    81.53% {
-        width: 60px;
-        height: 78px;
-        background-position: -356px -84px;
-    }
-    84.16% {
-        width: 58px;
-        height: 76px;
-        background-position: -296px -2px;
-    }
-    86.79% {
-        width: 56px;
-        height: 76px;
-        background-position: -418px -84px;
-    }
-    89.42% {
-        width: 54px;
-        height: 74px;
-        background-position: -356px -240px;
-    }
-    92.05% {
-        width: 54px;
-        height: 74px;
-        background-position: -356px -164px;
-    }
-    94.68% {
-        width: 52px;
-        height: 72px;
-        background-position: -350px -340px;
-    }
-    97.31% {
-        width: 52px;
-        height: 72px;
-        background-position: -296px -414px;
-    }
-    99.94%,
     to {
-        width: 52px;
-        height: 72px;
-        background-position: -296px -340px;
+        background-position: 0 bottom;
     }
-}
+}
+
+// @keyframes icon {
+//     from,
+//     2.63% {
+//         width: 52px;
+//         height: 72px;
+//         background-position: -350px -378px;
+//     }
+//     5.26% {
+//         width: 52px;
+//         height: 72px;
+//         background-position: -454px -304px;
+//     }
+//     7.89% {
+//         width: 52px;
+//         height: 72px;
+//         background-position: -400px -304px;
+//     }
+//     10.52% {
+//         width: 54px;
+//         height: 72px;
+//         background-position: -402px -156px;
+//     }
+//     13.15% {
+//         width: 54px;
+//         height: 72px;
+//         background-position: -404px -82px;
+//     }
+//     15.78% {
+//         width: 54px;
+//         height: 74px;
+//         background-position: -344px -254px;
+//     }
+//     18.41% {
+//         width: 56px;
+//         height: 76px;
+//         background-position: -290px -82px;
+//     }
+//     21.04% {
+//         width: 60px;
+//         height: 78px;
+//         background-position: -412px -2px;
+//     }
+//     23.67% {
+//         width: 62px;
+//         height: 80px;
+//         background-position: -286px -358px;
+//     }
+//     26.30% {
+//         width: 62px;
+//         height: 82px;
+//         background-position: -226px -2px;
+//     }
+//     28.93% {
+//         width: 64px;
+//         height: 82px;
+//         background-position: -224px -92px;
+//     }
+//     31.56% {
+//         width: 66px;
+//         height: 84px;
+//         background-position: -220px -272px;
+//     }
+//     34.19% {
+//         width: 70px;
+//         height: 88px;
+//         background-position: -154px -2px;
+//     }
+//     36.82% {
+//         width: 70px;
+//         height: 88px;
+//         background-position: -152px -94px;
+//     }
+//     39.45% {
+//         width: 72px;
+//         height: 90px;
+//         background-position: -78px -280px;
+//     }
+//     42.08% {
+//         width: 72px;
+//         height: 90px;
+//         background-position: -78px -188px;
+//     }
+//     44.71% {
+//         width: 74px;
+//         height: 92px;
+//         background-position: -2px -378px;
+//     }
+//     47.34% {
+//         width: 74px;
+//         height: 92px;
+//         background-position: -2px -284px;
+//     }
+//     49.97% {
+//         width: 76px;
+//         height: 92px;
+//         background-position: -2px -2px;
+//     }
+//     52.60% {
+//         width: 74px;
+//         height: 92px;
+//         background-position: -2px -190px;
+//     }
+//     55.23% {
+//         width: 74px;
+//         height: 92px;
+//         background-position: -2px -96px;
+//     }
+//     57.86% {
+//         width: 72px;
+//         height: 90px;
+//         background-position: -80px -2px;
+//     }
+//     60.49% {
+//         width: 72px;
+//         height: 90px;
+//         background-position: -78px -96px;
+//     }
+//     63.12% {
+//         width: 70px;
+//         height: 88px;
+//         background-position: -150px -372px;
+//     }
+//     65.75% {
+//         width: 70px;
+//         height: 88px;
+//         background-position: -78px -372px;
+//     }
+//     68.38% {
+//         width: 68px;
+//         height: 86px;
+//         background-position: -152px -184px;
+//     }
+//     71.01% {
+//         width: 66px;
+//         height: 84px;
+//         background-position: -152px -272px;
+//     }
+//     73.64% {
+//         width: 64px;
+//         height: 82px;
+//         background-position: -222px -184px;
+//     }
+//     76.27% {
+//         width: 62px;
+//         height: 80px;
+//         background-position: -222px -358px;
+//     }
+//     78.90% {
+//         width: 60px;
+//         height: 78px;
+//         background-position: -350px -2px;
+//     }
+//     81.53% {
+//         width: 58px;
+//         height: 78px;
+//         background-position: -290px -2px;
+//     }
+//     84.16% {
+//         width: 56px;
+//         height: 76px;
+//         background-position: -288px -176px;
+//     }
+//     86.79% {
+//         width: 54px;
+//         height: 74px;
+//         background-position: -288px -254px;
+//     }
+//     89.42% {
+//         width: 54px;
+//         height: 72px;
+//         background-position: -348px -82px;
+//     }
+//     92.05% {
+//         width: 54px;
+//         height: 72px;
+//         background-position: -346px -160px;
+//     }
+//     94.68% {
+//         width: 52px;
+//         height: 72px;
+//         background-position: -456px -230px;
+//     }
+//     97.31% {
+//         width: 52px;
+//         height: 72px;
+//         background-position: -402px -230px;
+//     }
+//     99.94%,
+//     to {
+//         width: 52px;
+//         height: 72px;
+//         background-position: -458px -156px;
+//     }
+// }

2018专题/1807吸血鬼专题-商务/src/sass/page/_task-2.scss

@@ -291,7 +291,7 @@
         }
     }
     .image-16 {
-        .icon-mark {
+        .icon-light-mark {
             position: absolute;
             left: px2rem(426);
             top: px2rem(336);
@@ -327,7 +327,7 @@
         }
     }
     .image-21 {
-        .icon-mark {
+        .icon-light-mark {
             position: absolute;
             left: px2rem(840);
             top: px2rem(423);