<html lang="zh-CN">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<title>Sir•mrack</title>
  <!-- 引入Vant样式和JS -->
<link rel="stylesheet" href="https://unpkg.com/vant@2.12.32/lib/index.css">
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
<script src="https://unpkg.com/vant@2.12.32/lib/vant.min.js"></script>
  
  <!-- 引入Element UI 样式和JS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.14/lib/theme-chalk/index.css">
  <script src="https://unpkg.com/element-ui@2.15.14/lib/index.js"></script>

  <!-- 引入 jQuery 和 SweetAlert -->
  <link href="https://unpkg.com/sweetalert@1.0.1/dist/sweetalert.css" rel="stylesheet">
  <script src="https://unpkg.com/jquery@3.7.1/dist/jquery.min.js"></script>
  <script src="https://unpkg.com/sweetalert@1.0.1/dist/sweetalert.min.js"></script>
  <!-- 自定义样式 -->
<style>
  *:not(input, checkbox, textarea) {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    outline: none;
    -webkit-tap-highlight-color: #963;
  }

  html {
    background-color: rgba(183,193,255,.0);
  }

  body {
    margin: 0px;
    min-height: 100%;
    min-width: 100%;
  }

  * {
    font-size: 13px;
    font-weight: bold;
    font-family: Arial, sans-serif;
  }

  .container {
    position relative;
    width: 500px;
    height: 260px;
    display: none;
    border-radius: 10px;
    border: 2px solid white;
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(5px);
    background: radial-gradient(rgba(200,192,183,.8) 0.0%, rgba(187,195,225,.8) 50.0%, rgba(255,192,144,.8) 99.0%);
  }

  .container.active {
    display: block;
  }

  .top0, .kuaiJie {
    display: none;
  }

.ayimgui {
    width: 300px; /* 宽度调整为300px */
    height: 200px; /* 高度调整为200px */
    background: radial-gradient(rgba(200,192,183,.8) 0.0%, rgba(187,195,225,.8) 50.0%, rgba(255,192,144,.8) 99.0%);
    border-radius: 10px;
    border: 2px solid white;
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(5px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 20px; /* 合适的内边距 */
    position: absolute; /* 绝对定位 */
    top: 50%; /* 垂直居中 */
    left: 50%; /* 水平居中 */
    transform: translate(-50%, -50%); /* 将元素的定位位置偏移回到元素本身的位置 */
}

.aytitle {
  display: flex; 
  justify-content: center; /* 更改为居中 */ 
  align-items: center;
  width: 100%; /* 确保 aytitle 占据父容器的全宽 */
}

  .aytab span {
    margin-right: 10px;
    padding: 5px 10px;
        border-radius: 5px;
    color: white;
    cursor: pointer;
  }

  .aytab span.active {
    background: #387CCC;
  }

  .aytab span.inactive {
    background: #25456D;
  }

  .aytext p {
    color: white;
  }

  .el-input, .el-button {
    margin: 0 0 10px 0;
  }

 .top0 {
    background-color: rgba(125, 255, 255, .0);
    height: 5px;
    margin-left: 3%;
    /*往右*/
    margin-top: 0px;
    display: table;
  }

  .top {
    background-color: blue;
    border-radius: 0px;
    /*圆角*/
    border: 0px solid #2f4f4f;
    /*边框+边框颜色*/
    width: 90%;
    height: 30px;

    /*display: table;*/
  }
    
  /* 头像区域样式 */
  .photo {
    width: 30px;
    /*宽*/
    height: 30px;
    /*高*/
    border-radius: 28%;
    background-image: url("http://www.mrack.fun/iocn.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-left: 3%;
    /*往右*/
    margin-top: 2px;
  }
  .dttext {
    /*标题字*/
    color: rgba(255, 255, 255, .81);
    font-size: 18px;
    /*字体大小*/
  }

  #ShuaXin {
    /*刷新*/
    position: absolute;
    background-color: transparent;
    z-index: 5;
    color: rgba(255, 255, 255, .81);
    /*刷新按钮颜色*/
    font-weight: bold;
    font-size: 40px;
    /*字体大小*/
    line-height: 40px;
  }



  /* 消息提示区域样式 */
  .message {
    color: red;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    background-color: rgb(255, 0, 255);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }



  /* 右侧功能区背景 */
  .GNdiceng {
    background-color: rgba(45,45,45,.41);
    width: 300px;
    height: 200px;
    margin-left: 190px;
    /*往右*/
    margin-top: -197px;
    border-radius: 10px;
    /*圆角*/
    box-shadow: 2px 2px 1px #859b72;
    /*阴影*/

  }

  /* 右侧功能区域样式 */
  .functionView {
    background-color: #f7f8fa;
    width: 290px;
    height: 190px;
    margin-left: 195px;
    /*往右*/
    margin-top: -20px;
    border-radius: 10px;
    /*圆角*/
    border: none;
    float: left;
    justify-content: center;
    align-items: center;
    box-shadow: 2px 2px 1px #2f4f4f;
    /*阴影*/
/*    background-image: url(https://img.soogif.com/exiTxYHQ0BFxvHI62RIPkZQCOvZn8osY.gif);
background-size: cover;
*/
  }


  .function {
    display: none;
  }

  .function.current {
    margin-left: 5px;
    /*往右*/
    margin-top: 30px;
    display: inline-block;
    color: rgb(80, 80, 79);
    padding-left: 10px;
  }

  .functionScroll {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }


  button {
    margin: 4px 2px;
    /*间距*/
    height: 33px;
    cursor: pointer;
    color: rgb(80, 80, 79);
    background-color: rgba(232, 232, 232, .81);
    border: none;
    border-radius: 10px;
    /*圆角*/
    box-shadow: 2px 2px 1px rgba(143, 143, 143, .6);
    /*阴影*/
  }


  button:active {
    background-color: rgba(48, 48, 48, .81);
    color: rgb(255, 255, 255);
    transform: translateX(3px) rotate(10deg) translateY(3px) scale(1.1);


  }

  button1 {
    height: 40px;
    cursor: pointer;
    color: rgb(80, 80, 79);
    background-color: rgba(232, 232, 232, .94);
    border: none;
    border-radius: 10px;
    /*圆角*/
  }

  xian {}

  .ZuoBeiJing {
    background-color: rgba(255, 255, 255, .6);
    width: 160px;
    height: 200px;
    margin-left: 10px;
    /*往右*/
    margin-top: 20px;
    /*往下*/
    border-radius: 10px;
    /*圆角*/
    box-shadow: 2px 2px 1px rgba(217,217,217,.6);
    /*阴影*/
  }

  #KuaiJie {
    /*快捷功能*/
    background: rgba(255, 255, 255, .81);
    color: rgba(0, 0, 0, .0);
    margin-left: 15px;
    /*往右*/
    margin-top: -195px;
    /*往下*/
    width: 150px;
    height: 40px;
    border-radius: 10px;
    /*圆角*/
    box-shadow: 2px 2px 1px rgba(217, 217, 217, .6);
    /*阴影*/
  }

  #KJanniu {
    /*快捷按钮*/
    border-radius: 10px;
    /*圆角*/
    background-color: rgba(232, 232, 232, .81);
    width: 30px;
    height: 30px;
    color: rgb(80, 80, 79);
    /*刷新按钮颜色*/
    box-shadow: 2px 2px 1px rgba(143, 143, 143, .6);
    /*阴影*/
  }



  #TiShi0 {
    /*复制底部框*/
    background: rgba(143, 143, 143, .6);
    color: rgba(0, 0, 0, .0);
    margin-left: 455px;
    /*往右*/
    margin-top: -20px;
    /*往下*/
    width: 30px;
    height: 20px;
    border-radius: 10px;
    /*圆角*/
    border: -1px solid #83cf77;
    /*边框+边框颜色*/
  }

  #TiShi1 {
    /*弹窗彩色字体*/
    background: linear-gradient(-135deg, #3778e5, #e98bc0, #3778e5, #e98bc0, #3778e5);
    width: 105px;
    -webkit-background-clip: text;

    color: rgba(0, 0, 0, 0);
    -webkit-appearance: none;
    margin: 11px 0px 0px -7px;
    font-size: 12px;
    text-align: center;
  }

  #TiShi2 {
    /*弹窗彩色字体*/
    background: linear-gradient(-135deg, #3778e5, #e98bc0, #3778e5, #e98bc0, #3778e5);
    width: 130px;
    -webkit-background-clip: text;

    color: transparent;
    -webkit-appearance: none;
    margin: -18px 0px 0px 327.5px;
    font-size: 11px;
    text-align: center;
  }



  /*左侧菜单样式区域 */
  .menuView {
     background-color: rgba(255, 255, 255, .81);
    width: 150px;
    height: 147px;
    margin-left: 15px;
    /*往右*/
    margin-top: 4px;
    /*往下*/
    border-radius: 10px;
    /*圆角*/
    box-shadow: 2px 2px 1px rgba(217, 217, 217, .6);
    /*阴影*/

  }

  .menuScroll {
    display: flex;
    flex-wrap: wrap;
    overflow-x: auto;
    align-items: center;
  }

  .menuScroll::-webkit-scrollbar {
    display: none;
  }

  .menu {
    /*左侧菜单按钮*/
    margin-left: 5px;
    /*往右*/
    margin-top: -2px;
    /*往下*/
    padding: 0px 4px;
    color: #963;
    line-height: 35px;
    /*居中*/
    text-align: center;
    background-color: rgba(232, 232, 232, .81);
    width: 33px;
    /*宽*/
    height: 30px;
    /*高*/
    border-radius: 10px;
    /*圆角*/
    box-shadow: 2px 2px 1px rgba(143, 143, 143, .6);
    /*阴影*/
  }

  .menu.current {
    font-weight: bolder;
    background-color: rgba(48, 48, 48, .81);
    color: rgb(255, 255, 255);
    width: 33px;
    /*宽*/
    height: 33px;
    /*高*/
    border-radius: 10px;
    /*圆角*/
  }

  .menu:hover {
    cursor: pointer;
  }

  .HengXian {
    /*横线*/
    border-bottom: 1px solid rgb(255, 255, 255);
    margin: 5px 10px 0px 10px;
  }

  .ShuXian {
    /*竖线*/
    border-bottom: 1px solid rgb(255, 255, 255);
    transform: rotate(90deg);
    width: 245px;
    /*宽*/
    margin: 85px 0px 0px 57.5px;
  }

  .ZouMaDeng {
    /*滚动字幕*/
    margin: -115px 0px 0px 190px;

  }

  /*滑动条部分*/
  input[type=range] {
    -webkit-appearance: none;
  }

  input[type=range]:focus {
    outline: none;
  }

  input[type=range]::-webkit-slider-runnable-track {
    height: 10px;
    /*滑动条高度*/
    cursor: pointer;
    animate: 0.2s;
    background: rgba(255, 255, 255, .81);
    /*滑动条背景色*/
    border-radius: 1.3px;
    border: 0.2px solid #963;
    /*滑动条边框*/
  }

  input[type=range]::-webkit-slider-thumb {
    border: 0.5px solid rgb(0, 0, 0);
    /*滑动块边框*/
    height: 18px;
    /*滑动块高度*/
    width: 25px;
    /*滑动块宽度*/
    border-radius: 8px;
    /*滑动块圆角*/
    background: rgba(255, 255, 255, .81);
    /*滑动块颜色*/
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -5px;
  }
input[type=range]:focus::-webkit-slider-runnable-track {
  background: rgb(255,43,23);
}

        .notification {
            position: fixed;
            top: 35%;
            left: 28%;
            padding: 15px;
            background-color: #f0f0f0;
            color: #000000;
            border: 1px solid #f0f0f0;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
            z-index: 9999;
            opacity: 1;
            transition: opacity 0.3s ease-in-out;
        }
 
        .notification:hover {
            opacity: 0.8;
        }    


           input {
        border: 1px solid lime;
       padding: 5px 10px;
       background: transparent;
           border: 1.5px solid rgba(143,143,177,.6);/*滑动条边框*/   
     }

           select {
        border: 1px solid lime;
       padding: 5px 10px;

      background: transparent;
  border: 1.5px solid rgba(143,143,177,.6);/*滑动条边框*/      
      
      } 
</style>
<body>
<script>
    $(function() {
        // 访问指定URL读取txt文件内容
        $.ajax({
            url: 'http://www.mrack.fun/text.txt',
            type: 'GET',
            dataType: 'text'
        }).done(function(data) {
            // 将 /n 替换为 HTML 换行符 <br/>
            var formattedData = data.replace(/\/n/g, '<br/>');
            var htmlContent = '<div style="font-size: 13px;">' + formattedData + '</div>'; // 设置字体大小为13px

            swal({
                title: "提示",
                html: true,
                text: htmlContent,
                confirmButtonText: "好的"
            });
        }).fail(function() {
            swal({
                title: "错误",
                text: "无法获取提示内容！",
                type: "error",
                confirmButtonText: "好的"
            });
        });
    });
</script>
<div id="app">
    <!-- 登录界面 -->
    <div class="ayimgui" v-if="!bsok">
      <div class="aytitle">
        <span style="margin-left: 5px;">Sir•mrack</span>
      </div>
      <div class="aybody">
        <div class="aytext">
          <p style="margin-top: 20px; margin-bottom: 30px;"><span>公告∶</span>{{ bsgg }}</p>
        </div>
        <div>
          <span style="color: white;">卡密:</span>
          <input 
            type="text" 
            v-model="bscard" 
            style="width: 85%; margin-top: 10px; padding: 5px; " 
            placeholder="请输入卡密">
          <br>
            <button
            @click="zuozhe" 
            style="margin-top: 30px; margin-left: 25px; padding: 5px 10px;">
            购卡
          </button>
          <button 
            @click="bsLogin" 
            style="margin-top: 30px; margin-left: 160px; padding: 5px 10px;">
            登录
          </button>
        </div>
      </div>
    </div>

<!-- 主界面 -->
<div class="container" :class="{ 'active': bsok }" ref="mainContainer">
  <div class="top0"></div>
  <div class="photo"></div>
  <div class="dttext" style="margin: -20px 0px 0px 55px;">Sir•mrack</div>
    <div class="dttext" style="margin: -15px 0px 0px 135px; font-size: 10px;">19.3</div>
    <button1 id="ShuaXin" style="margin: -38px 0px 0px 465px;" @click="tianjia">↺</button1>
  <div class="HengXian"></div>
  <div class="ShuXian"></div>
  <div class="ZouMaDeng">
    <marquee width="260px" behavior="scroll" bgcolor="transparent" style="color:white;">
      公告：官方QQ交流群∶584343734
    </marquee>
  </div>
  <div class="ZuoBeiJing"></div>
  <div id="KuaiJie">
    <button class="button" @click="zuozhe">联系作者</button>
    <button class="button" @click="qun">群聊</button>
  </div>
  <div class="menuView menuScroll">
    <br><br><br>
    <div class="menu" menu="menu2">功能</div>
    <div class="menu" menu="menu3">音乐</div>     
    <div class="menu current" menu="menu1">关于</div>   
    <button style="opacity: 0; pointer-events: none;height: 15px;"></button> 
    <div id="TiShi"></div><!-- 提示框 -->
    <div id="TiShi1">0-0-0 0:0:0</div><!-- 时间 -->
    <span id="timeDate" style="margin: 0px 0px 0px 28px;">安全运行 0 天 </span>
    <span id="times" style="margin: 0px 0px 0px 18px;">0 小时 0 分 0 秒</span>          
  </div>
  <!-- 功能视图区域 -->
  <div class="GNdiceng"></div>
  <div class="GNdiceng" style="margin: -195px 0px 0px 325px;height: 20px;width: 0px;"></div><!-- 弹窗背景 -->
  <!-- 横线 -->      
  <div class="functionView functionScroll">
    <div id="menu3" class="function">
      <p style="margin: -20px 0px 0px 0px;">🎵音乐区</p>
      <br>
      <!-- 音乐播放器区域 -->
      <div id="music-player" style="display: flex; justify-content: center; align-items: center; flex-direction: column;">
        <audio ref="audio"></audio>
        <div>
          <label for="playlist">选择:</label>
          <select id="playlist" v-model="currentTrackIndex" @change="changeTrack">
            <option disabled value="">点击这里选择歌曲</option>
            <option v-for="(track, index) in tracks" :key="index" :value="index">{{ track.name }}</option>
          </select>
        </div>
        <br>
        <div>
          <button style="margin-left: 25px" @click="previousTrack">上一首</button>
          <button @click="playPause">{{ isPlaying ? '暂停' : '播放' }}</button>
          <button @click="nextTrack">下一首</button>
        </div>
      </div>
    </div>
    <div id="menu1" class="function current">
      <p style="margin: -20px 0px 0px 0px;">关于说明：</p>
      1️⃣iOS-英雄联盟手游视距辅助-版本19.3<br>2️⃣进入游戏内开启 每局要重新调整视距大小！
      <br>3️⃣拖动上方边框边缘 随意移动窗口 自适应默认居中显示！
      <br>4️⃣如遇到BUG 无效等 请反馈作者！ 
    </div>
    <div id="menu2" class="function">
      <p style="margin: -20px 0px 0px 0px;">🍎功能区</p>
      <p>进入游戏内开启 每局要重新调整视距大小！</p>
      <van-cell center title="视距"> 
        <template #right-icon>
          <van-slider v-model="sliderValue" :min="1" :max="10" :step="0.1" bar-height=" 5px" style="width: 40%;" @input="updateSliderValue"></van-slider>
          <van-stepper v-model="sliderValue" :min="1" :max="10" :step="0.1" button-size="26" disable-input @change="updateSliderValue" />
        </template>
      </van-cell>
    </div>
<script>
  document.body.onselectstart = document.body.ondrag = function () {
    return false;
  };
  
  $("input").blur(function () {
    window.scroll(0, 0); // 文本框等输入完毕后页面自动滚动到顶部
  });
  
  // 激活 Webkit 的 button:active
  document.body.addEventListener('touchstart', function () { });
  
  // 页面显示完毕事件
  $(document).ready(function () {
    $("div.menu").click(function () {
      $("div.menu").removeClass("current");
      $("div.function").removeClass("current");
      $(this).addClass("current");

      var menuId = $(this).attr("menu");
      $(`div#${menuId}`).addClass("current");
    });
    
    // 设置可拖动区域为圆形区域
    setWindowDrag(0, 0, 500, 80);
    
    // 调整悬浮窗位置和尺寸并全屏居中显示
    var w = 550;
    var h = 264;

    var layout = function () {
      // window.orientation 是设备握持方向, 不是屏幕显示方向
      if (window.lastorientation == window.orientation) return;
      window.lastorientation = window.orientation;

      // window.screen 中的宽高不会随着屏幕旋转更新 (只会在初始化的时候固定)
      if (Math.abs(window.orientation) == 90) {
        // 横屏
        var x = (window.screen.height - w) / 2;
        var y = (window.screen.width - h) / 2;
        setWindowRect(x, y, w, h);
      } else {
        // 竖屏
        var x = (window.screen.width - w) / 2;
        var y = (window.screen.height - h) / 2;
        setWindowRect(x, y, w, h);
      }
    }

    layout(); // 设置旋转屏幕时自动调整布局和画布
    window.addEventListener("orientationchange", layout, false);
  });
</script>
<script>
    Date.prototype.format = function (fmt) {
            var o = {
                    "y+": this.getFullYear, //年
                    "M+": this.getMonth() + 1, //月份
                    "d+": this.getDate(), //日
                    "h+": this.getHours(), //小时
                    "m+": this.getMinutes(), //分
                    "s+": this.getSeconds() //秒
            };
            if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)
                    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
    }
 
  
setInterval("document.getElementById('TiShi1').innerHTML = (new Date()).format('yyyy-MM-dd hh:mm:ss');", 1000);//时间循环显示
  

    var now = new Date(); 
    function createtime() { 
                          //月、日、年，小时、分、秒
        var grt= new Date("2022/06/00 12:00:00");//此处修改你的建站时间或者网站上线时间 
        now.setTime(now.getTime()+250); 
        days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days); 
        hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours); 
        if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum); 
        mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;} 
        seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum); 
        snum = Math.round(seconds); 
        <!-- 加判断条件避免出现60秒的情况 -->
    if(snum==60){
        snum=0;
      }

    if(String(snum).length ==1 ){snum = "0" + snum;} 
        document.getElementById("timeDate").innerHTML = "安全运行 "+dnum+" 天 "; 
        document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒"; 
    } 
setInterval("createtime()",250);

function toast(str) {
    var t1 = document.getElementById("TiShi2");
       t1.innerText = str == t1.innerText && str || str;
    }
            //提示信息
        function showNotification(message, duration) {
            var notification = document.createElement('div');
            notification.className = 'notification';
            notification.textContent = message;
            document.body.appendChild(notification);
            setTimeout(function () {
                notification.style.opacity = 0;
                setTimeout(function () {
                document.body.removeChild(notification);
                }, 1000);
            }, duration);
        }

</script>
<script>
  // BSPHP服务器地址, 在BSPHP后台软件>软件配置
  const G_BSPHP_URL = "http://www.mracry.com/AppEn.php?appid=42663533&md5=569eb04ad10865fdfb57a926e5803f9e";

  // 通信密钥Key
  const G_BSPHP_KEY = "69a5f898636e1ac9976565686a95cba8";

  const Base64 = {
    encode: (str) => {
      return window.btoa(unescape(encodeURIComponent(str)))
    },
    decode: (str) => {
      return decodeURIComponent(escape(window.atob(str)))
    }
  }

  function bin2hex(s) {
    var i, l, o = '', n;

    s += '';

    for (i = 0, l = s.length; i < l; i++) {
      n = s.charCodeAt(i).toString(16);
      o += n.length < 2 ? '0' + n : n;
    }

    return o;
  }

  function getUUID() {
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext("2d");
    var txt = "shadowUUID";
    ctx.textBaseline = "bottom";
    ctx.font = "16px 'Arial'";
    ctx.textBaseline = "shadow";
    ctx.fillStyle = "#FFF";
    ctx.fillRect(125, 1, 62, 20);
    ctx.fillStyle = "#FFF";
    ctx.fillText(txt, 2, 15);
    ctx.fillStyle = "rgba(255, 1, 0, 0.7)";
    ctx.fillText(txt, 4, 17);

    var b64 = canvas.toDataURL().replace("data:image/png;base64,", "");
    var bin = atob(b64);
    var crc = bin2hex(bin.slice(-20, -12));
    return crc;
  }

  function GetGlobalParameter() {
    var gArray = {
      "BSphpSeSsL": getUUID(),
      "date": Date.parse(new Date()) / 1000,
      "md5": "",
      "mutualkey": G_BSPHP_KEY // 通信密钥Key
    };

    return gArray;
  }

  function obj2Url(param, key, encode) {
    if (param == null) return '';
    var paramStr = '';
    var t = typeof(param);
    if (t == 'string' || t == 'number' || t == 'boolean') {
      paramStr += '&' + key + '=' + ((encode == null || encode) ? encodeURIComponent(param) : param);
    } else {
      for (var i in param) {
        var k = key == null ? i : key + (param instanceof Array ? '[' + i + ']' : '.' + i);
        paramStr += obj2Url(param[i], k, encode);
      }
    }
    return paramStr;
  }

  function bsphpPost(param) {
    param = obj2Url(param);
    param = "parameter=" + Base64.encode(param);
    var jqdata = $.ajax({
      url: G_BSPHP_URL,
      type: "POST",
      data: param,
      async: false
    });
    if (jqdata.status === 200) {
      return Base64.decode(jqdata.responseText);
    }
    return jqdata.statusText;
  }

// 全局UUID，直接使用
const UUID = getUUID();

const ayBSPHP = {
  // 软件版本信息，查看https://www.bsphp.com/chm-13.html
  v: () => {
    var p = GetGlobalParameter();
    p.api = "v.in";
    return bsphpPost(p);
  },
  // 公告，查看https://www.bsphp.com/chm-14.html
  gg: () => {
    var p = GetGlobalParameter();
    p.api = "gg.in";
    return bsphpPost(p);
  },
  // 登录，查看https://www.bsphp.com/chm-45.html
  login: (card) => {
    var p = GetGlobalParameter();
    p.api = "login.ic";
    p.icid = card;
    p.key = UUID;
    p.maxoror = UUID;
    return bsphpPost(p);
  },
  // 获取登录状态，查看https://www.bsphp.com/chm-54.html
  getlkinfo: () => {
    var p = GetGlobalParameter();
    p.api = "getlkinfo.ic";
    return bsphpPost(p);
  },
  // 获取用户信息, 查看https://www.bsphp.com/chm-50.html
  getinfo: (info) => {
    var p = GetGlobalParameter();
    p.api = "getinfo.ic";
    p.info = info;
    return bsphpPost(p);
  },
  // 获取VIP到期时间
  getVipExpiryDate: () => {
    var p = GetGlobalParameter();
    p.api = "getdate.ic";
    return bsphpPost(p);
  }
};

</script>

<script>
new Vue({
  el: '#app',
  data() {
    return {
      ifshow: true,
      bsgg: '服务器连接失败！',
      bscard: '',
      bsok: false,
      vipExpiryDate: '',
      sliderValue: 1, // 设置默认值，范围为 1 - 10
      isPlaying: false,
      currentTrackIndex: '',
      tracks: [
        // 你的音乐列表
{ name: '揽胜进行曲-专属歌单', url: 'http://music.163.com/song/media/outer/url?id=2153831124.mp3' },
{ name: '在雾里被爱-专属歌单', url: 'http://music.163.com/song/media/outer/url?id=2140038117.mp3' },
{ name: '还是会想你-专属歌单', url: 'http://music.163.com/song/media/outer/url?id=2131317056.mp3' },
{ name: '你别太帅了-专属歌单', url: 'http://music.163.com/song/media/outer/url?id=2102771373.mp3' },
{ name: '可我天性清冷-专属歌单', url: 'http://music.163.com/song/media/outer/url?id=2143683702.mp3' },
{ name: '人总活在一瞬间-专属歌单', url: 'http://music.163.com/song/media/outer/url?id=2108577972.mp3' },
{ name: '很久之后-专属歌单', url: 'http://music.163.com/song/media/outer/url?id=2064365969.mp3' },
{ name: '一笑江湖- 专属歌单', url: 'http://music.163.com/song/media/outer/url?id=2058688293.mp3' },
{ name: '天若有情-专属歌单', url: 'http://music.163.com/song/media/outer/url?id=2052092037.mp3' },
{ name: '武家坡-专属歌单', url: 'http://music.163.com/song/media/outer/url?id=2072833524.mp3' },
{ name: '阿索阿索-专属歌单', url: 'http://music.163.com/song/media/outer/url?id=2086635745.mp3' },
{ name: '红色高跟鞋-专属歌单', url: 'http://music.163.com/song/media/outer/url?id=1407813608.mp3' },
{ name: '孤芳自赏-专属歌单', url: 'http://music.163.com/song/media/outer/url?id=1882424862.mp3' },
{ name: '最好的安排-专属歌单', url: 'http://music.163.com/song/media/outer/url?id=2080406263.mp3' },
{ name: '桃花诺-专属歌单', url: 'http://music.163.com/song/media/outer/url?id=2020290667.mp3' },
{ name: '毒药-专属歌单', url: 'http://music.163.com/song/media/outer/url?id=2066654616.mp3' },
{ name: '杀手那个石家庄人-专属歌单', url: 'http://music.163.com/song/media/outer/url?id=1966632495.mp3' },
{ name: '漠河舞厅-专属歌单', url: 'http://music.163.com/song/media/outer/url?id=1894094482.mp3' },
{ name: '科目三-专属歌单', url: 'http://music.163.com/song/media/outer/url?id=2018760397.mp3' },
{ name: '苦咖啡dj-专属歌单', url: 'http://music.163.com/song/media/outer/url?id=2025091391.mp3' },
{ name: '偏爱-专属歌单', url: 'http://music.163.com/song/media/outer/url?id=1955039633.mp3' },
{ name: '直直直直坐下dj-专属歌单', url: 'http://music.163.com/song/media/outer/url?id=2082561145.mp3' },
{ name: '滚啊非主流-专属歌单', url: 'http://music.163.com/song/media/outer/url?id=2081289885.mp3' },
{ name: '别走-专属歌单', url: 'http://music.163.com/song/media/outer/url?id=2086763088.mp3' },
{ name: '你不可能永远是老大-专属歌单', url: 'http://music.163.com/song/media/outer/url?id=2065658759.mp3' },
{ name: '面具-专属歌单', url: 'http://music.163.com/song/media/outer/url?id=2132944547.mp3' },
{ name: '打歌舞-专属歌单', url: 'http://music.163.com/song/media/outer/url?id=2080570312.mp3' },
{ name: '第三人称-专属歌单', url: 'http://music.163.com/song/media/outer/url?id=2048969894.mp3' },
{ name: '暖一杯茶-专属歌单', url: 'http://music.163.com/song/media/outer/url?id=1371780785.mp3' },
{ name: '姑娘别哭泣-专属歌单', url: 'http://music.163.com/song/media/outer/url?id=2075896544.mp3' },
{ name: '出现又离开-专属歌单', url: 'http://music.163.com/song/media/outer/url?id=2079925096.mp3' },
{ name: '意外-专属歌单', url: 'http://music.163.com/song/media/outer/url?id=1997309646.mp3' },
{ name: '出山-专属歌单', url: 'http://music.163.com/song/media/outer/url?id=2142081452.mp3' },
{ name: '美丽的神话-专属歌单', url: 'http://music.163.com/song/media/outer/url?id=2124173366.mp3' }
        // 添加更多的音乐
      ]
    };
  },

  methods: {
    toggleIfShow() {
      this.ifshow = !this.ifshow;
    },
    closeimgui() {
      this.$refs.menuMain.style.display = 'none';
    },
    bsInit() {
      this.bsgg = ayBSPHP.gg();
    },
    bsLogin() {
      if (!this.bscard) {
        this.$message({
          message: '没有卡密 你登录个勾巴！',
          type: 'warning'
        });
        return;
      }

      var response = ayBSPHP.login(this.bscard);
      if (response.indexOf("01|1081") != -1) {
        // 获取VIP到期时间
        var vipResponse = ayBSPHP.getVipExpiryDate();
        this.vipExpiryDate = vipResponse;
        
        const showTimeout = 5000;
        this.$message({
          message: `登录成功，VIP到期时间: ${this.vipExpiryDate}`,
          type: 'success',
          duration: showTimeout
        });
        this.bsok = true;
      } else {
        this.$message({
          message: response,
          type:'error'
        });
        this.bsok = false;
      }
    },
    updateSliderValue() {
      this.updateValues(this.sliderValue);
    },
    updateValues(value) {
      const X = h5gg.getRangesList('lolm');
      let sj;
      sj = Number(X[0].start) + 0xB413AB0;
      sj = Number(h5gg.getValue(sj, 'I64')) + 0x18;
      sj = Number(h5gg.getValue(sj, 'I64')) + 0x10;
      sj = Number(h5gg.getValue(sj, 'I64')) + 0x30;
      sj = Number(h5gg.getValue(sj, 'I64')) + 0x8;
      sj = Number(h5gg.getValue(sj, 'I64')) + 0x38;
      sj = Number(h5gg.getValue(sj, 'I64')) + 0xD8;
      h5gg.setValue(sj, value, 'F32');

      sj = Number(X[0].start) + 0xB413AB0;
      sj = Number(h5gg.getValue(sj, 'I64')) + 0x18;
      sj = Number(h5gg.getValue(sj, 'I64')) + 0x10;
      sj = Number(h5gg.getValue(sj, 'I64')) + 0x30;
      sj = Number(h5gg.getValue(sj, 'I64')) + 0x8;
      sj = Number(h5gg.getValue(sj, 'I64')) + 0x38;
      sj = Number(h5gg.getValue(sj, 'I64')) + 0xD4;
      h5gg.setValue(sj, value, 'F32');
    },
    zuozhe() {
      window.location.href = 'http://res.abeim.cn/api/qq/?qq=5121746';
    },
    qun() {
      window.location.href = 'mqqapi://card/show_pslcard?src_type=internal&version=1&uin=584343734&card_type=group&source=external';
    },
    tianjia() {

    },
    playPause() {
      const audio = this.$refs.audio;
      if (this.currentTrackIndex === '') {
        alert('请选择一首歌曲');
        return;
      }
      if (!this.isPlaying) {
        audio.play();
      } else {
        audio.pause();
      }
      this.isPlaying = !this.isPlaying;
    },
    previousTrack() {
      if (this.currentTrackIndex > 0) {
        this.currentTrackIndex--;
        this.changeTrack();
      }
    },
    nextTrack() {
      if (this.currentTrackIndex < this.tracks.length - 1) {
        this.currentTrackIndex++;
        this.changeTrack();
      }
    },
    changeTrack() {
      const audio = this.$refs.audio;
      if (this.currentTrackIndex !== '') {
        audio.src = this.tracks[this.currentTrackIndex].url;
        audio.play().then(() => {
          this.isPlaying = true;
        }).catch(error => {
          console.error("播放曲目时出错:", error);
        });
      }
    },
    autoNextTrack() {
      if (this.currentTrackIndex < this.tracks.length - 1) {
        this.currentTrackIndex++;
      } else {
        this.currentTrackIndex = 0;
      }
      this.changeTrack();
    },
    handleTrackSelect() {
      this.changeTrack();
    }
  },
    mounted() {
        this.bsInit();
        const audio = this.$refs.audio;
        audio.addEventListener('ended', this.autoNextTrack);
        setButtonImage('http://mrack.fun/iocn.jpg');
    }
});
</script>