抽卡模拟器测试版：修订间差异

2024年10月21日 (一) 21:44的最新版本

抽卡

抽卡*10

当前功能为测试版

实际抽卡概率请以游戏内为准

切换至其他卡池

@@ 第1行： / 第1行： @@
 <div class="ck_main_area">
-<div class="title">圣炎的引导 UP角色:奥黛特</div>
+    <div class="title" id="pool_title"></div>
-	<div class="window_area" id="window_area">
+        <div class="window_area" id="window_area">
-		<div class="img_ring ring_0" id="ring_0">[[File:db_ck_ring0.jpg|link=]]</div>
+            <div class="img_ring ring_0" id="ring_0">[[File:db_ck_ring0.jpg|link=]]</div>
-		<div class="img_ring ring_1" id="ring_1">[[File:db_ck_ring1.jpg|link=]]</div>
+            <div class="img_ring ring_1" id="ring_1">[[File:db_ck_ring1.jpg|link=]]</div>
-		<div class="img_ring ring_2" id="ring_2">[[File:db_ck_ring2.jpg|link=]]</div>
+            <div class="img_ring ring_2" id="ring_2">[[File:db_ck_ring2.jpg|link=]]</div>
-		<div class="result_area">
+            <div class="result_area">
-		</div>
+            </div>
-	</div>
+        </div>
-	<div class="btns_area">
+        <div class="btns_area">
-		<div class="btn_start" id="btn_start_1">抽卡</div>
+            <div class="btn_start" id="btn_start_1">抽卡</div>
-		<div class="btn_start" id="btn_start_2">抽卡*10</div>
+            <div class="btn_start" id="btn_start_10">抽卡*10</div>
-	</div>
+        </div>
-	<div class="all_Result"></div>
+        <div class="all_Result"></div>
-	<div class="tips">当前功能为测试版</div>
+        <div class="tips"><div class="tips">当前功能为测试版</div><div class="tips">实际抽卡概率请以游戏内为准</div></div>
-</div>
+        <div class="">切换至其他卡池</div>
+        <div class="change_pool"></div>
-{{#css:
+    </div>
-	.ck_main_area * {
+    {{#css:
-		margin: 0;
-		padding: 0;
+        .ck_main_area * {
-		color: #000000;
+            margin: 0;
-	}
+            padding: 0;
+            color: #000000;
-	.ck_main_area {
+        }
-		width: 100%;
-		margin: auto;
+        .ck_main_area {
-		padding: 0;
+            width: 100%;
-		color: #000000;
+            margin: auto;
-		max-width: 800px;
+            padding: 0;
-		min-width: 350px;
+            color: #000000;
-		min-height: 220px;
+            max-width: 800px;
-	}
+            min-width: 350px;
-	.ck_main_area .title{
+            min-height: 220px;
-		text-align: center;
+        }
-	}
+        .ck_main_area .title{
+            text-align: center;
+        }
-	.ck_main_area * {
+        .ck_main_area .change_pool{
-		box-sizing: border-box;
+            cursor:pointer;
-	}
+            text-decoration: underline;
+        }
-	.ck_main_area .window_area {
-		width: 100%;
-		aspect-ratio: 800/ 500;
+        .ck_main_area * {
-		background-color: #000000;
+            box-sizing: border-box;
-		position: relative;
+        }
-	}
+        .ck_main_area .window_area {
-	.ck_main_area .window_area .img_ring {
+            width: 100%;
-		width: 100%;
+            aspect-ratio: 800/ 500;
-		height: 100%;
+            background-color: #000000;
-		position: absolute;
+            position: relative;
-		left: 0;
+        }
-		top: 0;
-		display: none;
+        .ck_main_area .window_area .img_ring {
-	}
+            width: 100%;
+            height: 100%;
-	.ck_main_area .window_area .img_ring.ring {
+            position: absolute;
-		animation: ring_in;
+            left: 0;
-		animation-duration: 3s;
+            top: 0;
-		/* animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); */
+            display: none;
-		animation-timing-function: linear;
+        }
-		animation-fill-mode: forwards;
-		position: absolute;
+        .ck_main_area .window_area .img_ring.ring {
-		left: 0;
+            animation: ring_in;
-		top: 65px;
+            animation-duration: 3s;
-		display: none;
+            /* animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); */
-	}
+            animation-timing-function: linear;
+            animation-fill-mode: forwards;
-	.ck_main_area .window_area .img_ring img {
+            position: absolute;
-		width: 100%;
+            left: 0;
-		aspect-ratio: 800 / 500;
+            top: 65px;
-	}
+            display: none;
+        }
-	.ck_main_area .window_area .result_area {
-		width: 100%;
+        .ck_main_area .window_area .img_ring img {
-		height: 100%;
+            width: 100%;
-		padding: 0 20px 20px 20px;
+            aspect-ratio: 800 / 500;
-		background-color: #FFFFFF;
+        }
-		background-size: 100% 100%;
-		background-repeat: no-repeat;
+        .ck_main_area .window_area .result_area {
-		animation: window_white;
+            width: 100%;
-		animation-duration: 2s;
+            height: 100%;
-		animation-timing-function: linear;
+            padding: 0 20px 20px 20px;
-		animation-fill-mode: forwards;
+            background-color: #FFFFFF;
-		display: none;
+            background-size: 100% 100%;
-		flex-direction: row;
+            background-repeat: no-repeat;
-		align-items: center;
+            animation: window_white;
-		flex-wrap: wrap;
+            animation-duration: 2s;
-		justify-content: center;
+            animation-timing-function: linear;
-	}
+            animation-fill-mode: forwards;
+            display: none;
-	.ck_main_area .window_area .result_area .role_area {
+            flex-direction: row;
-		width: 18%;
+            align-items: center;
-		aspect-ratio: 130 / 190;
+            flex-wrap: wrap;
-		padding-top: 10px;
+            justify-content: center;
-		margin: 2px;
+        }
-		text-align: center;
-		font-size: 12px;
+        .ck_main_area .window_area .result_area .role_area {
-		line-height: 20px;
+            width: 18%;
-		position: relative;
+            aspect-ratio: 130 / 190;
-	}
+            padding-top: 10px;
+            margin: 2px;
-	.ck_main_area .window_area .result_area .role_area .text {
+            text-align: center;
-		text-align: left;
+            font-size: 12px;
-		margin-left: 10px;
+            line-height: 20px;
-		white-space: nowrap;
+            position: relative;
-		overflow: hidden;
+        }
-		text-overflow: ellipsis;
-		line-height: 16px;
+        .ck_main_area .window_area .result_area .role_area .text {
-	}
+            text-align: left;
+            margin-left: 10px;
-	.ck_main_area .window_area .result_area .role_area .img {
+            white-space: nowrap;
-		width: 100%;
+            overflow: hidden;
-		aspect-ratio: 1;
+            text-overflow: ellipsis;
-	}
+            line-height: 16px;
+        }
-	.ck_main_area .window_area .result_area .role_area .img_xs {
-		position: absolute;
+        .ck_main_area .window_area .result_area .role_area .img {
-		right: 0;
+            width: 100%;
-		bottom: 0;
+            aspect-ratio: 1;
-		width: 50%;
+        }
-		height: auto;
-	}
+        .ck_main_area .window_area .result_area .role_area .img_xs {
+            position: absolute;
-	.ck_main_area .btns_area {
+            right: 0;
-		display: flex;
+            bottom: 0;
-		flex-direction: row;
+            width: 50%;
-		justify-content: space-around;
+            height: auto;
-	}
+        }
-	.ck_main_area .btns_area .btn_start {
+        .ck_main_area .btns_area {
-		cursor: pointer;
+            display: flex;
-		width: 120px;
+            flex-direction: row;
-		text-align: center;
+            justify-content: space-around;
-		padding: 4px 0;
+        }
-		margin-bottom: 10px;
-		margin-top: 10px;
+        .ck_main_area .btns_area .btn_start {
-		border: 4px solid #000000;
+            cursor: pointer;
-	}
+            width: 120px;
+            text-align: center;
-	.ck_main_area .all_Result {
+            padding: 4px 0;
-		width: 100%;
+            margin-bottom: 10px;
-		font-size: 12px;
+            margin-top: 10px;
-		text-align: center;
+            border: 4px solid #000000;
-		height: 54px;
+        }
-	}
+        .ck_main_area .all_Result {
-	.ck_main_area .tips {
+            width: 100%;
-		color: gray;
+            font-size: 12px;
-		font-size: 12px;
+            text-align: center;
-		text-align: center;
+            min-height: 54px;
-	}
+        }
-	@keyframes ring_in {
+        .ck_main_area .tips {
-% {
+            color: gray;
-			left: 0px;
+            font-size: 12px;
-			scale: 0;
+            text-align: center;
-		}
+        }
-% {
+        @keyframes ring_in {
-			left: 140px;
+% {
-			scale: 1;
+                left: 0px;
-		}
+                scale: 0;
-	}
+            }
-	@keyframes window_white {
+% {
-% {
+                left: 140px;
-			opacity: 0;
+                scale: 1;
-		}
+            }
+        }
-% {
-			opacity: 1;
+        @keyframes window_white {
-		}
+% {
-	}
+                opacity: 0;
-@media screen and (max-width: 600px) {
+            }
-.ck_main_area .window_area .result_area .role_area .text {
-font-size: 8px !important;
+% {
-margin-left:0;
+                opacity: 1;
-}
+            }
+        }
-}
+    @media screen and (max-width: 600px) {
-}}
+    .ck_main_area .window_area .result_area .role_area .text {
+    font-size: 8px !important;
-{{ResourceLoader|MediaWiki:Ck_basedata.js|isModuleES6=true}}
+    margin-left:0;
-{{ResourceLoader|MediaWiki:Dbck.js|isModuleES6=true}}
+    }
-{{ResourceLoader|MediaWiki:Db_role_data.js|isModuleES6=true}}
+    }
+    }}
+    {{ResourceLoader|MediaWiki:Db_role_data.js|isModuleES6=true}}
+    {{ResourceLoader|MediaWiki:Ck_main.js|isModuleES6=true}}