微件:GGLScratchGame：修订间差异

来自Limbo Wiki Mirror
←上一编辑下一编辑→
可视化wikitext
Gaoice​（留言 | 贡献）
行政员、​界面管理员、​管理员
951次编辑
无编辑摘要
标签：（旧）WikiEditor
Gaoice​（留言 | 贡献）
行政员、​界面管理员、​管理员
951次编辑
无编辑摘要
标签：（旧）WikiEditor
第1行： 第1行：
<noinclude>
<noinclude>
刮刮乐 Widget（稳定版）
完整彩票刮刮乐 Widget
</noinclude>
</noinclude>


<includeonly>
<includeonly>


<div class="ggl-wrapper">
<div class="ggl-root">
   <div class="ggl-ticket">
   <div class="ggl-ticket">
     <div class="ggl-reveal"></div>
    <!-- 刮奖区域 -->
     <div class="ggl-grid"></div>
     <div class="ggl-scratch-area"></div>
  </div>
 
  <!-- 底部 UI -->
  <div class="ggl-footer">
     <div class="ggl-mascot">(｀・ω・´) 扫描中…</div>
    <button class="ggl-scan">扫描结果</button>
   </div>
   </div>
</div>
</div>


<style>
<style>
.ggl-wrapper {
/* ===== 根容器 ===== */
   width: 360px;
.ggl-root {
   margin: 20px auto;
   max-width: 420px;
   margin: 30px auto;
  font-family: sans-serif;
}
}


/* ===== 彩票主体 ===== */
.ggl-ticket {
.ggl-ticket {
   position: relative;
   position: relative;
   width: 360px;
   width: 100%;
   height: 360px;
   aspect-ratio: 1075 / 1911;
   background-image: url("https://wm.gaoice.run/images/thumb/b/b6/%E5%9B%BE%E7%89%871.png/180px-%E5%9B%BE%E7%89%871.png");
   background-image: url("https://wm.gaoice.run/images/thumb/b/b6/%E5%9B%BE%E7%89%871.png/1075px-%E5%9B%BE%E7%89%871.png");
   background-size: cover;
   background-size: cover;
   background-position: center;
   background-position: center;
   border-radius: 12px;
}
 
/* ===== 刮奖黄色区域 ===== */
.ggl-scratch-area {
  position: absolute;
 
  /* 原始比例定位（基于 1075×1911） */
  left: 10.6%;
  top: 23.5%;
  width: 78.7%;
   height: 53.4%;
 
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(6, 1fr);
}
 
/* ===== 单个刮奖格 ===== */
.ggl-cell {
  position: relative;
   overflow: hidden;
   overflow: hidden;
}
}
第33行： 第61行：
   position: absolute;
   position: absolute;
   inset: 0;
   inset: 0;
   background-image: url("https://wm.gaoice.run/images/thumb/4/4a/%E5%88%AE%E5%BC%80%E5%90%8E.jpg/180px-%E5%88%AE%E5%BC%80%E5%90%8E.jpg");
   background-image: url("https://wm.gaoice.run/images/thumb/4/4a/%E5%88%AE%E5%BC%80%E5%90%8E.jpg/559px-%E5%88%AE%E5%BC%80%E5%90%8E.jpg");
   background-size: cover;
   background-size: cover;
  background-position: center;
}
}


/* 30 格 */
/* 刮开前 */
.ggl-grid {
.ggl-cover {
   position: absolute;
   position: absolute;
   inset: 0;
   inset: 0;
   display: grid;
   background-image: url("https://wm.gaoice.run/images/thumb/5/5a/%E5%88%AE%E5%BC%80%E5%89%8D.png/559px-%E5%88%AE%E5%BC%80%E5%89%8D.png");
   grid-template-columns: repeat(5, 1fr);
   background-size: cover;
   grid-template-rows: repeat(6, 1fr);
  background-position: center;
   cursor: pointer;
}
 
.ggl-cell.scratched .ggl-cover {
  display: none;
}
 
/* ===== 底部 UI ===== */
.ggl-footer {
  display: flex;
  margin-top: 10px;
}
}


.ggl-cell {
.ggl-mascot {
   background-image: url("https://wm.gaoice.run/images/thumb/5/5a/%E5%88%AE%E5%BC%80%E5%89%8D.png/180px-%E5%88%AE%E5%BC%80%E5%89%8D.png");
   flex: 1;
   background-size: cover;
  padding: 6px;
   cursor: pointer;
   background: #111;
  color: #0f0;
   font-size: 12px;
}
}


.ggl-cell.scratched {
.ggl-scan {
   background: transparent;
  flex: 1;
   background: #222;
  color: #fff;
  border: none;
}
}
</style>
</style>
第59行： 第104行：
<script>
<script>
(function () {
(function () {
   var wrapper = document.currentScript.parentNode;
   var root = document.currentScript.parentNode;
   var grid = wrapper.querySelector('.ggl-grid');
   var area = root.querySelector('.ggl-scratch-area');


   if (!grid) return;
   if (!area) return;


   for (var i = 0; i < 30; i++) {
   for (var i = 0; i < 30; i++) {
     var cell = document.createElement('div');
     var cell = document.createElement('div');
     cell.className = 'ggl-cell';
     cell.className = 'ggl-cell';
     cell.onclick = function () {
 
       this.classList.add('scratched');
    var reveal = document.createElement('div');
    reveal.className = 'ggl-reveal';
 
    var cover = document.createElement('div');
    cover.className = 'ggl-cover';
 
     cover.onclick = function () {
       this.parentNode.classList.add('scratched');
     };
     };
     grid.appendChild(cell);
 
     cell.appendChild(reveal);
    cell.appendChild(cover);
    area.appendChild(cell);
   }
   }
})();
})();

2026年2月1日 (日) 17:26的版本

完整彩票刮刮乐 Widget


检索自“https://mirror.awakenplace.top/index.php?title=微件:GGLScratchGame&oldid=51617”