新增音乐周星榜

view/molistar/modules/weekStar/css/index.css

@@ -36,6 +36,27 @@ body {
   margin: 0 auto;
 }
 
+.header .music {
+  position: absolute;
+  top: 1.6rem;
+  left: 0.4rem;
+  width: 0.72rem;
+  height: 0.72rem;
+  background: url(../images/open.png) no-repeat;
+  background-size: 100% 100%;
+  display: none;
+}
+
+.header .notOpen {
+  position: absolute;
+  top: 1.6rem;
+  left: 0.4rem;
+  width: 0.72rem;
+  height: 0.72rem;
+  z-index: 2;
+  display: none;
+}
+
 .header .rule_icon {
   width: 1.65333rem;
   height: 0.69333rem;

view/molistar/modules/weekStar/css/index.scss

@@ -39,6 +39,27 @@ body {
     overflow: hidden;
     margin: 0 auto;
 
+    .music {
+        position: absolute;
+        top: px2rem(120);
+        left: px2rem(30);
+        width: px2rem(54);
+        height: px2rem(54);
+        background: url(../images/open.png) no-repeat;
+        background-size: 100% 100%;
+        display: none;
+    }
+
+    .notOpen {
+        position: absolute;
+        top: px2rem(120);
+        left: px2rem(30);
+        width: px2rem(54);
+        height: px2rem(54);
+        z-index: 2;
+        display: none;
+    }
+
     .rule_icon {
         width: px2rem(124);
         height: px2rem(52);
@@ -912,7 +933,8 @@ body {
         background: url(../images/header-zh.png) no-repeat;
         background-size: 100% 100%;
     }
-    .pub .pub_in .box .centent{
+
+    .pub .pub_in .box .centent {
         background: url(../images/rule-zh.png) no-repeat;
         background-size: 100% 100%;
     }

view/molistar/modules/weekStar/js/index.js

@@ -32,6 +32,7 @@ var countupTime;//倒计时容器
 var page = 0;
 var maxPage = 0;
 var arr = [];
+var music = true;
 // 初始化函數
 $(function () {
     getInfoFromClient();
@@ -58,8 +59,30 @@ $(function () {
         localLang = window.lang;
         translateFun();
         getConfig();
+        var audio = document.getElementById("musics");
+        // 尝试自动播放音频
+        audio.play().then(function () {
+            // 如果自动播放成功
+            $('.header .notOpen').show();
+        }).catch(function (error) {
+            $('.header .music').show();
+        })
     }, 100)
 })
+// 打开音乐
+$('.header .music').click(function () {
+    $('.header .music').hide();
+    $('.header .notOpen').show();
+    var audio = document.getElementById("musics");
+    audio.play();
+})
+// 关闭音乐
+$('.header .notOpen').click(function () {
+    $('.header .notOpen').hide();
+    $('.header .music').show();
+    var audio = document.getElementById("musics");
+    audio.pause();
+})
 // 处理SVGA
 document.addEventListener('DOMContentLoaded', function () {
     function loadSVGA(containerId, svgaPath) {
@@ -76,8 +99,8 @@ document.addEventListener('DOMContentLoaded', function () {
     loadSVGA('xz1', './svga/xz1.svga');
     loadSVGA('xz2', './svga/xz2.svga');
     loadSVGA('ts1', './svga/1.svga');
-    loadSVGA('ts2', './svga/23.svga');
-    loadSVGA('ts3', './svga/23.svga');
+    loadSVGA('ts2', './svga/2.svga');
+    loadSVGA('ts3', './svga/3.svga');
     loadSVGA('lsls', './svga/lsls.svga');
     loadSVGA('kt', './svga/kt.svga');
     loadSVGA('kt2', './svga/kt.svga');

view/molistar/modules/weekStar/newWeekStar.html

@@ -34,6 +34,14 @@
                 <span class="text12"></span>
             </div>
         </div>
+        <!-- 音乐 -->
+        <div class="music">
+            <audio autoplay loop id="musics">
+                <source src="./music/music.mp3" type="audio/mpeg">
+            </audio>
+        </div>
+        <!-- 关闭音乐 -->
+        <img src="./images/notOpen.png" alt="" class="notOpen">
         <!-- 倒计时文案 -->
         <div class="timeText text3"></div>
     </div>