468 lines
17 KiB
HTML
468 lines
17 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>心動七夕遊園會</title>
|
||
<link rel="stylesheet" href="../../common/css/reset.css">
|
||
<link rel="stylesheet" href="./css/swiper-bundle.min.css">
|
||
<link rel="stylesheet" href="./css/index.css">
|
||
</head>
|
||
|
||
<body>
|
||
<!-- 頂部返回 -->
|
||
<div class="back">
|
||
<img src="./images/travel/back.png" alt="">
|
||
</div>
|
||
<!-- header -->
|
||
<div class="header">
|
||
<div class="rule">活動規則</div>
|
||
<!-- 時間 -->
|
||
<div class="titleHeader"></div>
|
||
</div>
|
||
<!-- 定情信物 -->
|
||
<div class="betrothal">
|
||
<div class="swiper">
|
||
<div class="swiper-wrapper">
|
||
<div class="swiper-slide">
|
||
<img src="./images/betrothalbg1.png" alt="">
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<img src="./images/betrothalbg2.png" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- tab切換 -->
|
||
<div class="tab tabs tab1">
|
||
<div></div>
|
||
<div></div>
|
||
<div></div>
|
||
<div></div>
|
||
</div>
|
||
<!-- page1 -->
|
||
<div class="page1">
|
||
<!-- 福袋展示 -->
|
||
<div class="blessingBag">
|
||
<div class="blessingBag_in">
|
||
<ul>
|
||
<li>
|
||
<img src="./images/11.png" alt="">
|
||
<p>飛上雲霄</p>
|
||
<b>177 鉆</b>
|
||
</li>
|
||
<li>
|
||
<img src="./images/2.png" alt="">
|
||
<p>情意捲軸</p>
|
||
<b>377 鉆</b>
|
||
</li>
|
||
<li>
|
||
<img src="./images/3.png" alt="">
|
||
<p>桃花灼灼</p>
|
||
<b>1777 鉆</b>
|
||
</li>
|
||
<li>
|
||
<img src="./images/4.png" alt="">
|
||
<p>花色漫漫</p>
|
||
<b>2777 鉆</b>
|
||
</li>
|
||
<li>
|
||
<img src="./images/5.png" alt="">
|
||
<p>相思鳥</p>
|
||
<b>13140 鉆</b>
|
||
</li>
|
||
<li>
|
||
<img src="./images/6.png" alt="">
|
||
<p>煙火愛戀</p>
|
||
<b>27777 鉆</b>
|
||
</li>
|
||
|
||
|
||
<li>
|
||
<img src="./images/11.png" alt="">
|
||
<p>飛上雲霄</p>
|
||
<b>177 鉆</b>
|
||
</li>
|
||
<li>
|
||
<img src="./images/2.png" alt="">
|
||
<p>情意捲軸</p>
|
||
<b>377 鉆</b>
|
||
</li>
|
||
<li>
|
||
<img src="./images/3.png" alt="">
|
||
<p>桃花灼灼</p>
|
||
<b>1777 鉆</b>
|
||
</li>
|
||
<li>
|
||
<img src="./images/4.png" alt="">
|
||
<p>花色漫漫</p>
|
||
<b>2777 鉆</b>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<!-- 鵲橋 -->
|
||
<div class="magpieBridge">
|
||
<!-- 左边人物 -->
|
||
<img src="./images/leftRen.png" alt="" class="leftRen">
|
||
<!-- 右边人物 -->
|
||
<img src="./images/rightRen.png" alt="" class="rightRen">
|
||
<!-- 背景鵲橋圖 -->
|
||
<img src="./images/magpieBridgeBg2.png" alt="" class="magpieBridgeBg">
|
||
<!-- 喜鵲動效 -->
|
||
<div class="xiques">
|
||
<div class="xique"></div>
|
||
</div>
|
||
<!-- 我的喜鵲 -->
|
||
<p class="birdNum">
|
||
<img src="./images/bird.png" alt="" class="bird">
|
||
<b>我的喜鵲: 0</b>
|
||
</p>
|
||
<!-- 投放喜鵲*1 -->
|
||
<div class="but1">投放喜鵲*1</div>
|
||
<!-- 投放喜鵲*10 -->
|
||
<div class="but10">投放喜鵲*10</div>
|
||
<!-- 領取獎勵 -->
|
||
<div class="buting">領取獎勵</div>
|
||
<!-- 領取失敗 -->
|
||
<div class="buterr">領取獎勵</div>
|
||
<!-- 已領取 -->
|
||
<div class="butout">已領取</div>
|
||
<!-- 文案展示 -->
|
||
<p class="text">將喜鵲投入鵲橋，拉近牛郎和織女的距離<br>
|
||
鵲橋相會後，參與搭建鵲橋的用戶可領取活動獎勵</p>
|
||
<!-- 進度條 -->
|
||
<div class="line">
|
||
<div class="line_in"></div>
|
||
</div>
|
||
<!-- 頭飾框 -->
|
||
<div class="ts">
|
||
<img src="./images/sts.png" alt="" class="">
|
||
<b>鵲仙橋頭飾*3天</b>
|
||
</div>
|
||
</div>
|
||
<!-- 每日任務 tasks2-->
|
||
<div class="task ">
|
||
<div class="tab">
|
||
<div></div>
|
||
<div></div>
|
||
</div>
|
||
<div class="box1">
|
||
<p class="title">完成每日任務可獲得喜鵲，任務每日0點刷新<br>
|
||
任務獎勵自動發放</p>
|
||
<div class="task1">
|
||
<img src="./images/taskIcon.png" alt="">
|
||
<div class="but">去完成</div>
|
||
<b class="p1">訪問活動頁</b>
|
||
<b class="p2">獎勵：喜鵲*5</b>
|
||
</div>
|
||
<div class="task2">
|
||
<img src="./images/taskIcon.png" alt="">
|
||
<div class="but">去完成</div>
|
||
<b class="p1">任意房間發送彈幕（0/3)</b>
|
||
<b class="p2">獎勵：喜鵲*5</b>
|
||
</div>
|
||
<div class="task3">
|
||
<img src="./images/taskIcon.png" alt="">
|
||
<div class="but">去完成</div>
|
||
<b class="p1">在任意直播間停留</b>
|
||
<div class="line">
|
||
<div class="line_in"></div>
|
||
<img src="./images/drop.png" alt="" class="drop1">
|
||
<img src="./images/drop.png" alt="" class="drop2">
|
||
<span class="sp1">+2喜鵲</span>
|
||
<span class="sp2">+3喜鵲</span>
|
||
<span class="sp3">+5喜鵲</span>
|
||
<span class="sp4">10分鐘</span>
|
||
<span class="sp5">20分鐘</span>
|
||
<span class="sp6">30分鐘</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="box2">
|
||
<img src="./images/task2But.png" alt="" class="task2But">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- page2 -->
|
||
<div class="page2">
|
||
<!-- 祈願樹 -->
|
||
<div class="blessingTree">
|
||
<!-- 剩余紅繩 -->
|
||
<div class="redRope">
|
||
<img src="./images/redRopeIcon.png" alt="" class="redRopeIcon">
|
||
我的祈願紅繩：<b>0</b>
|
||
</div>
|
||
<!-- 祈願按鈕 -->
|
||
<div class="but"></div>
|
||
<p class="introduction">每獲得10隻喜鵲即可自動獲得祈願紅繩*1</p>
|
||
<!-- 刷新 -->
|
||
<div class="refresh">
|
||
<img src="./images/refresh.png" alt="" class="refreshIcon">
|
||
換一批
|
||
</div>
|
||
<!-- 打開燈籠 openLantern-->
|
||
<div class="lantern lantern1">
|
||
<div class="box">
|
||
<img src="" alt="">
|
||
<p></p>
|
||
<b></b>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="lantern lantern2">
|
||
<div class="box">
|
||
<img src="" alt="">
|
||
<p></p>
|
||
<b></b>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="lantern lantern3">
|
||
<div class="box">
|
||
<img src="" alt="">
|
||
<p></p>
|
||
<b></b>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="lantern lantern4">
|
||
<div class="box">
|
||
<img src="" alt="">
|
||
<p></p>
|
||
<b></b>
|
||
</div>
|
||
</div>
|
||
<!-- 動效 -->
|
||
<div class="blessingTreeSvga blessingTreeSvga1">
|
||
<div class="blessingTreeSvgaActive blessingTreeSvgaActive1"></div>
|
||
</div>
|
||
<div class="blessingTreeSvga blessingTreeSvga2">
|
||
<div class="blessingTreeSvgaActive blessingTreeSvgaActive2"></div>
|
||
</div>
|
||
<div class="blessingTreeSvga blessingTreeSvga3">
|
||
<div class="blessingTreeSvgaActive blessingTreeSvgaActive3"></div>
|
||
</div>
|
||
<div class="blessingTreeSvga blessingTreeSvga4">
|
||
<div class="blessingTreeSvgaActive blessingTreeSvgaActive4"></div>
|
||
</div>
|
||
</div>
|
||
<!-- 獎池&記錄 blessingTreeBoomt2-->
|
||
<div class="blessingTreeBoomt">
|
||
<div class="tab">
|
||
<div></div>
|
||
<div></div>
|
||
</div>
|
||
<div class="box2">
|
||
<div class="title">
|
||
<div>獲取時間</div>
|
||
<div>獲得獎勵</div>
|
||
</div>
|
||
<ul>
|
||
<li>
|
||
<div>
|
||
<p>2023/01/18</p>
|
||
<i>23:45:234</i>
|
||
</div>
|
||
<div class="b">
|
||
蓮花燈777鉆
|
||
</div>
|
||
</li>
|
||
<li class="active">
|
||
<div>
|
||
<p>2023/01/18</p>
|
||
<i>23:45:234</i>
|
||
</div>
|
||
<div>
|
||
<p>蓮花燈</p>
|
||
<b>777鉆</b>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- page3 -->
|
||
<div class="page3">
|
||
<!-- 活動規則 -->
|
||
<div class="rule">活動規則</div>
|
||
<!-- 標題 -->
|
||
<img src="./images/title.png" alt="" class="title">
|
||
<p class="titleText">贈送普通禮物10鉆石=1情緣值，七夕限定禮物10鉆石=3情緣值</p>
|
||
<!-- 前三 -->
|
||
<div class="no no1">
|
||
<img src="./images/no1.png" alt="" class="txBg">
|
||
<img src="./images/logo.png" alt="" class="tx">
|
||
<p>用戶昵稱</p>
|
||
<div>
|
||
<img src="./images/loveIcon.png" alt="" class="loveIcon">
|
||
<b>情緣值：XXX</b>
|
||
</div>
|
||
</div>
|
||
<div class="no no2">
|
||
<img src="./images/no2.png" alt="" class="txBg">
|
||
<img src="./images/logo.png" alt="" class="tx">
|
||
<p>用戶昵稱</p>
|
||
<div>
|
||
<img src="./images/loveIcon.png" alt="" class="loveIcon">
|
||
<b>情緣值：XXX</b>
|
||
</div>
|
||
</div>
|
||
<div class="no no3">
|
||
<img src="./images/no3.png" alt="" class="txBg">
|
||
<img src="./images/logo.png" alt="" class="tx">
|
||
<p>用戶昵稱</p>
|
||
<div>
|
||
<img src="./images/loveIcon.png" alt="" class="loveIcon">
|
||
<b>情緣值：XXX</b>
|
||
</div>
|
||
</div>
|
||
<!-- 非前三 -->
|
||
<ul>
|
||
<li>
|
||
<div class="num">4</div>
|
||
<img src="./images/logo.png" alt="" class="tx">
|
||
<div class="name"></div>
|
||
<div class="score">
|
||
<img src="./images/loveIcon.png" alt="" class="loveIcon">
|
||
<b>情緣值：XXX</b>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
<!-- 自己榜單 -->
|
||
<div class="my">
|
||
<div class="num">4</div>
|
||
<img src="./images/logo.png" alt="" class="tx">
|
||
<div class="name">虛位以待</div>
|
||
<div class="score">
|
||
<img src="./images/loveIcon.png" alt="" class="loveIcon">
|
||
<b>情緣值：XXX</b>
|
||
</div>
|
||
</div>
|
||
<!-- 規則彈窗 -->
|
||
<div class="roomRule">
|
||
<img src="./images/roomRule.png" alt="" class="roomRule_in">
|
||
</div>
|
||
</div>
|
||
<!-- page4 -->
|
||
<div class="page4">
|
||
<!-- 活動規則 -->
|
||
<div class="rule">榜單獎勵</div>
|
||
<!-- 相會鵲橋 -->
|
||
<div class="loveList">
|
||
<img src="./images/left.png" alt="" class="left">
|
||
<img src="./images/center.png" alt="" class="center">
|
||
<img src="./images/right.png" alt="" class="right">
|
||
<img src="./images/logo.png" alt="" class="txL">
|
||
<img src="./images/logo.png" alt="" class="txR">
|
||
<div class="leftName">虛位以待</div>
|
||
<div class="rightName">虛位以待</div>
|
||
<p>活動期間每小時甜蜜值第一的主播和最佳助力的用戶</p>
|
||
<div class="times">距下一小時一起上榜結果<span>00</span>:<span>00</span></div>
|
||
</div>
|
||
<!-- tab切換 -->
|
||
<div class="page4Tab">
|
||
<div></div>
|
||
<div></div>
|
||
</div>
|
||
<!-- 日榜總榜 -->
|
||
<div class="dayAll">
|
||
<div></div>
|
||
<div></div>
|
||
</div>
|
||
<!-- 禮物值說明 -->
|
||
<div class="giftVal">收到普通禮物10鉆石=1甜蜜值，七夕限定禮物10鉆石=3甜蜜值</div>
|
||
<!-- 日榜時間選擇 -->
|
||
<div class="timeList">
|
||
<div class=""></div>
|
||
<div></div>
|
||
<div></div>
|
||
<div></div>
|
||
<div></div>
|
||
</div>
|
||
<!-- 前三 -->
|
||
<div class="no no1">
|
||
<img src="./images/no1.png" alt="" class="txBg">
|
||
<img src="./images/logo.png" alt="" class="tx">
|
||
<p>用戶昵稱</p>
|
||
<div>
|
||
<img src="./images/loveIcon.png" alt="" class="loveIcon">
|
||
<b>情緣值：XXX</b>
|
||
</div>
|
||
</div>
|
||
<div class="no no2">
|
||
<img src="./images/no2.png" alt="" class="txBg">
|
||
<img src="./images/logo.png" alt="" class="tx">
|
||
<p>用戶昵稱</p>
|
||
<div>
|
||
<img src="./images/loveIcon.png" alt="" class="loveIcon">
|
||
<b>情緣值：XXX</b>
|
||
</div>
|
||
</div>
|
||
<div class="no no3">
|
||
<img src="./images/no3.png" alt="" class="txBg">
|
||
<img src="./images/logo.png" alt="" class="tx">
|
||
<p>用戶昵稱</p>
|
||
<div>
|
||
<img src="./images/loveIcon.png" alt="" class="loveIcon">
|
||
<b>情緣值：XXX</b>
|
||
</div>
|
||
</div>
|
||
<!-- 非前三 -->
|
||
<ul>
|
||
<li>
|
||
<div class="num">4</div>
|
||
<img src="./images/logo.png" alt="" class="tx">
|
||
<div class="name"></div>
|
||
<div class="score">
|
||
<img src="./images/loveIcon.png" alt="" class="loveIcon">
|
||
<b>情緣值：XXX</b>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
<!-- 自己榜單 -->
|
||
<div class="my">
|
||
<div class="num">4</div>
|
||
<img src="./images/logo.png" alt="" class="tx">
|
||
<div class="name">虛位以待</div>
|
||
<div class="score">
|
||
<img src="./images/loveIcon.png" alt="" class="loveIcon">
|
||
<b>情緣值：XXX</b>
|
||
</div>
|
||
</div>
|
||
<!-- 甜蜜榜單 -->
|
||
<div class="sweet">
|
||
<div class="sweet_in">
|
||
<div class="box">
|
||
<img src="./images/sweet_in1.png" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 活動規則彈窗 -->
|
||
<div class="rule_pub">
|
||
<div class="rule_pub_in">
|
||
<div class="box">
|
||
<img src="./images/rule_pub_in.png" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 活動結束彈窗 -->
|
||
<div class="endActivity">
|
||
<div class="endActivity_in">
|
||
<img src="./images/endActivitybut.png" alt="" class="but">
|
||
</div>
|
||
</div>
|
||
</body>
|
||
|
||
</html>
|
||
<script src="../../common/js/flexible.js"></script>
|
||
<script src="../../common/js/jquery-3.2.1.min.js"></script>
|
||
<script src="../../common/js/common2.js"></script>
|
||
<script src="../../common/js/layer.js"></script>
|
||
<script src="../../common/js/vconsole.min.js"></script>
|
||
<script src="../../common/js/svga.min.js"></script>
|
||
<script src="./js/swiper-bundle.min.js"></script>
|
||
<script src="./js/index.js"></script> |