Site-7异常现象分类系统 组件后端
2022年4月15日
修订 16
评分
0
↑ 0
↓ 0
支持率
0%
总票数 0
Wilson 95% 下界
0.0%
在相同票数下更稳健的支持率估计
争议指数
0.000
最近修订
1 / 6
最近投票
1 / 1
暂无投票
相关页面
暂无推荐
页面源码
[[div class="baseHeading {$scp-class} contaiment-risk-{$contaiment-risk} threat-ind-{$threat-ind}"]]
[[div class="leftBlockHeading" style="height:calc(100% - 32px);"]]
[[div class="confidentialHeading"]]
[[span class="confidentialSpan"]][[[s7-apcs-guide|机密]]][[/span]]
[[/div]]
[[div class="detailsHeading"]]
[[span class="detailsSpan" data-title="{$lineFirst}"]]{$lineFirst}[[/span]]
[[span class="detailsSpan" data-title="{$lineSecond}"]]{$lineSecond}[[/span]]
[[span class="detailsSpan" data-title="{$lineThird}"]]{$lineThird}[[/span]]
[[/div]]
[[/div]]
[[div class="centerBlockHeading" style="display:flex; height:95px; flex-wrap:wrap; align-items: center; justify-content:center;"]]
[[div id="dangerLevels-1" data-title="{$danger-select-1}" style="width: 16%; height: 65%; background: url('http://sensenca-picture.wdfiles.com/local--files/s7-apcs/{$danger-select-1}.png');background-repeat: no-repeat; background-size: contain; background-position: center; display: inline-block;"]]
[[/div]]
[[div id="dangerLevels-2" data-title="{$danger-select-2}" style="width: 16%; height: 65%; background: url('http://sensenca-picture.wdfiles.com/local--files/s7-apcs/{$danger-select-2}.png');background-repeat: no-repeat; background-size: contain; background-position: center; display: inline-block;"]]
[[/div]]
[[div id="dangerLevels-3" data-title="{$danger-select-3}" style="width: 16%; height: 65%; background: url('http://sensenca-picture.wdfiles.com/local--files/s7-apcs/{$danger-select-3}.png');background-repeat: no-repeat; background-size: contain; background-position: center; display: inline-block;"]]
[[/div]]
[[div id="dangerLevels-4" data-title="{$danger-select-4}" style="width: 16%; height: 65%; background: url('http://sensenca-picture.wdfiles.com/local--files/s7-apcs/{$danger-select-4}.png');background-repeat: no-repeat; background-size: contain; background-position: center; display: inline-block;"]]
[[/div]]
[[div id="dangerLevels-5" data-title="{$danger-select-5}" style="width: 16%; height: 65%; background: url('http://sensenca-picture.wdfiles.com/local--files/s7-apcs/{$danger-select-5}.png');background-repeat: no-repeat; background-size: contain; background-position: center; display: inline-block;"]]
[[/div]]
[[div id="dangerLevels-6" data-title="{$danger-select-6}" style="width: 16%; height: 65%; background: url('http://sensenca-picture.wdfiles.com/local--files/s7-apcs/{$danger-select-6}.png');background-repeat: no-repeat; background-size: contain; background-position: center; display: inline-block;"]]
[[/div]]
[[/div]]
[[div class="rightBlockHeading"]]
[[div id="classImageHeading-safe" data-title="项目等级：Safe" style="background:#4e6c77;"]]
[[span style="color: white; font-weight: bold; font-size: 500%; line-height: 60px;"]]S[[/span]]
[[/div]]
[[div id="classImageHeading-euclid" data-title="项目等级：Euclid" style="background:#ffc000;"]]
[[span style="color: white; font-weight: bold; font-size: 500%; line-height: 60px;"]]E[[/span]]
[[/div]]
[[div id="classImageHeading-keter" data-title="项目等级：Keter" style="background:#b80000;"]]
[[span style="color: white; font-weight: bold; font-size: 500%; line-height: 60px;"]]K[[/span]]
[[/div]]
[[div id="classImageHeading-thaumiel" data-title="项目等级：Thaumiel" style="background:#8B008B;"]]
[[span style="color: white; font-weight: bold; font-size: 500%; line-height: 60px;"]]T[[/span]]
[[/div]]
[[div id="classImageHeading-neutralized" data-title="项目等级：未收容/无效化" style="background:#ddd;"]]
[[span style="color: black; font-weight: bold; font-size: 500%; line-height: 60px;"]]N[[/span]]
[[/div]]
[[div id="classImageHeading-nonstandard" data-title="项目等级：{$scp-class}" style="background:{$non-standard-color};"]]
[[span style="color: white; font-weight: bold; font-size: 500%; line-height: 60px;"]]{$non-standard-class}[[/span]]
[[/div]]
[[/div]]
[[div class="bottomBlockHeading" style="width:max(650px, 70%);"]]
[[div class="componentHeading"]]
[[span class="componentHeadingSkewFixSpan" style="position: relative;top: -15px;"]]{$activation}[[/span]]
[[/div]]
[[div id="xxxxHeading-A5" style="background: #4e6c77; display: none; font-size: 18px;"]]
[[div class="XXXXheadBox"]]
##white|A5##
[[/div]]
[[/div]]
[[div id="xxxxHeading-A4" style="background: orange; display: none; font-size: 18px;"]]
[[div class="XXXXheadBox"]]
A4
[[/div]]
[[/div]]
[[div id="xxxxHeading-A3" style="background: red; display: none; font-size: 18px;"]]
[[div class="XXXXheadBox"]]
A3
[[/div]]
[[/div]]
[[div id="xxxxHeading-A2" style="background: red; display: none; font-size: 18px;"]]
[[div class="XXXXheadBox"]]
A2
[[/div]]
[[/div]]
[[div id="xxxxHeading-B5" style="background: #4e6c77; display: none; font-size: 18px;"]]
[[div class="XXXXheadBox"]]
##white|B5##
[[/div]]
[[/div]]
[[div id="xxxxHeading-B4" style="background: orange; display: none; font-size: 18px;"]]
[[div class="XXXXheadBox"]]
B4
[[/div]]
[[/div]]
[[div id="xxxxHeading-B3" style="background: orange; display: none; font-size: 18px;"]]
[[div class="XXXXheadBox"]]
B3
[[/div]]
[[/div]]
[[div id="xxxxHeading-B2" style="background: red; display: none; font-size: 18px;"]]
[[div class="XXXXheadBox"]]
B2
[[/div]]
[[/div]]
[[div id="xxxxHeading-C5" style="background: #4e6c77; display: none; font-size: 18px;"]]
[[div class="XXXXheadBox"]]
##white|C5##
[[/div]]
[[/div]]
[[div id="xxxxHeading-C4" style="background: #4e6c77; display: none; font-size: 18px;"]]
[[div class="XXXXheadBox"]]
##white|C4##
[[/div]]
[[/div]]
[[div id="xxxxHeading-C3" style="background: orange; display: none; font-size: 18px;"]]
[[div class="XXXXheadBox"]]
C3
[[/div]]
[[/div]]
[[div id="xxxxHeading-C2" style="background: orange; display: none; font-size: 18px;"]]
[[div class="XXXXheadBox"]]
C2
[[/div]]
[[/div]]
[[div id="xxxxHeading-D5" style="background: #4e6c77; display: none; font-size: 18px;"]]
[[div class="XXXXheadBox"]]
##white|D5##
[[/div]]
[[/div]]
[[div id="xxxxHeading-D4" style="background: #4e6c77; display: none; font-size: 18px;"]]
[[div class="XXXXheadBox"]]
##white|D4##
[[/div]]
[[/div]]
[[div id="xxxxHeading-D3" style="background: orange; display: none; font-size: 18px;"]]
[[div class="XXXXheadBox"]]
D3
[[/div]]
[[/div]]
[[div id="xxxxHeading-D2" style="background: orange; display: none; font-size: 18px;"]]
[[div class="XXXXheadBox"]]
D2
[[/div]]
[[/div]]
[[div id="xxxxHeading-E5" style="background: #4e6c77; display: none; font-size: 18px;"]]
[[div class="XXXXheadBox"]]
##white|E5##
[[/div]]
[[/div]]
[[div id="xxxxHeading-E4" style="background: #4e6c77; display: none; font-size: 18px;"]]
[[div class="XXXXheadBox"]]
##white|E4##
[[/div]]
[[/div]]
[[div id="xxxxHeading-E3" style="background: orange; display: none; font-size: 18px;"]]
[[div class="XXXXheadBox"]]
E3
[[/div]]
[[/div]]
[[div id="xxxxHeading-E2" style="background: orange; display: none; font-size: 18px;"]]
[[div class="XXXXheadBox"]]
E2
[[/div]]
[[/div]]
[[div id="xxxxHeading-KETER" data-title="KETER级" style="background: red; display: none; font-size: 18px;"]]
[[div class="XXXXheadBox"]]
KETER
[[/div]]
[[/div]]
[[div id="xxxxHeading-AAA" data-title="任何可能的收容措施都无法避免收容突破的发生" style="background: black; display: none; font-size: 18px;"]]
[[div class="XXXXheadBox" style="color:white; margin: 0 0 0 25%;"]]
AAA
[[/div]]
[[/div]]
[[div id="xxxxHeading-EEE" data-title="不存在突破收容的可能性" style="background: white; display: none; font-size: 18px;"]]
[[div class="XXXXheadBox"]]
EEE
[[/div]]
[[/div]]
[[div id="xxxxHeading-TS" data-title="收容不可行" style="background: #ccc; display: none; font-size: 18px;"]]
[[div class="XXXXheadBox"]]
Ȼ
[[/div]]
[[/div]]
[[div id="xxxxHeading-Q" data-title="数据不足以进行评估" style="background: white; display: none; font-size: 18px;"]]
[[div class="XXXXheadBox"]]
?
[[/div]]
[[/div]]
[[div id="xxxxHeading-T" style="background: #8B008B; display: none; font-size: 18px;"]]
[[div class="XXXXheadBox"]]
##white|T##
[[/div]]
[[/div]]
[[div id="xxxxHeading-KC" data-title="收容突破可能导致的K级情景类型" style="background: red; display: none; font-size: 18px;"]]
[[div class="XXXXheadBox"]]
{$k-class}
[[/div]]
[[/div]]
[[div id="xxxxHeading-none" style="width: 0;"]]
[[/div]]
[[div id="potentialLevel-1" data-title="机密风险等级：破碎面纱" style="background: #505052; display: none; font-size: 18px;"]]
[[div class="potentialLvl-Wh"]]
Vedist I
[[/div]]
[[/div]]
[[div id="potentialLevel-2" data-title="机密风险等级：风暴将至" style="background: #505052; display: none; font-size: 18px;"]]
[[div class="potentialLvl-Wh"]]
Vedist II
[[/div]]
[[/div]]
[[div id="potentialLevel-3" data-title="机密风险等级：堕天使" style="background: #505052; display: none; font-size: 18px;"]]
[[div class="potentialLvl-Wh"]]
Vedist III
[[/div]]
[[/div]]
[[div id="potentialLevel-4" data-title="机密风险等级：指向标" style="background: #505052; display: none; font-size: 18px;"]]
[[div class="potentialLvl-Wh"]]
Vedist IV
[[/div]]
[[/div]]
[[div id="potentialLevel-5" data-title="机密风险等级：剃刀边缘" style="background: #505052; display: none; font-size: 18px;"]]
[[div class="potentialLvl-Wh"]]
Vedist V
[[/div]]
[[/div]]
[[div id="potentialLevel-6" data-title="机密风险等级：真空" style="background: #505052; display: none; font-size: 18px;"]]
[[div class="potentialLvl-Wh"]]
Vedist VI
[[/div]]
[[/div]]
[[div class="numberHeading"]]
[[span class="numberHeadingSkewFixSpan" style="position: relative;top: -15px;"]]{$scp-number}[[/span]]
[[/div]]
[[/div]]
[[/div]]
[[module CSS]]
@import url('https://fonts.googleapis.com/css?family=ZCOOL+QingKe+HuangYou&display=swap');
.baseHeading {
width: 100%;
height: 150px;
margin: auto;
border: 1px solid #ccc;
font-family: 'ZCOOL QingKe HuangYou', sans-serif;
background: white;
}
.leftBlockHeading {
width: 29%;
float: left;
height: 100%;
}
.confidentialHeading {
height: 25%;
padding-left: 20px;
padding-top: 15px;
}
.confidentialSpan {
font-size: 36px;
line-height: 0px;
}
.confidentialSpan a {
color: #000;
}
.detailsHeading {
height: 70%;
margin: 0;
padding-left: 20px;
}
.detailsSpan {
font-size: auto;
}
.detailsSpan[data-title="none"] {
display: none;
}
.centerBlockHeading {
width: 55%;
float: left;
text-align: center;
padding-top: 15px;
height: 75px;
}
div#u-dangerLevels-1:hover::after, div#u-dangerLevels-2:hover::after, div#u-dangerLevels-3:hover::after, div#u-dangerLevels-4:hover::after, div#u-dangerLevels-5:hover::after, div#u-dangerLevels-6:hover::after {
display: block;
content: attr(data-title); /* Text output */
position: absolute; /* Absolute positioning */
z-index: 1; /* Hint popups overlaying all other elements */
background: rgba(255,255,230,0.9); /* Background semi-transparency */
font-family: Arial, sans-serif; /* Fonts */
font-size: 11px; /* Hint font size */
padding: 5px 10px; /* Padding */
border: 1px solid #333; /* Border */
width: 20em;
top: auto;
transform: skew(0deg) !important;
color: #333;
}
div#u-dangerLevels-1[data-title="none"], div#u-dangerLevels-2[data-title="none"], div#u-dangerLevels-3[data-title="none"], div#u-dangerLevels-4[data-title="none"], div#u-dangerLevels-5[data-title="none"], div#u-dangerLevels-6[data-title="none"] {
display: none !important;
}
.rightBlockHeading {
width: 14%;
height: 80%;
float: left;
text-align: center;
position: relative;
}
.rightBlockHeading div {;
display: none;
}
.{$scp-class} #classImageHeading-{$scp-class} {
width: 70%;
height: 80%;
display: inline-block;
margin: 7% 0px;
}
.{$scp-class} #u-classImageHeading-{$scp-class} {
display: inline-block !important;
width: 100px;
height: 90px;
margin-top: 15px;
}
.{$scp-class} #u-classImageHeading-{$scp-class}:hover::after {
display: block;
content: attr(data-title); /* Text output */
position: absolute; /* Absolute positioning */
z-index: 1; /* Hint popups overlaying all other elements */
background: rgba(255,255,230,0.9); /* Background semi-transparency */
font-family: Arial, sans-serif; /* Fonts */
font-size: 11px; /* Hint font size */
padding: 5px 10px; /* Padding */
border: 1px solid #333; /* Border */
transform: skew(0deg) !important;
color: #333;
}
#u-classImageHeading-nonstandard:not([data-title="项目等级：safe"]):not([data-title="项目等级：euclid"]):not([data-title="项目等级：keter"]):not([data-title="项目等级：thaumiel"]):not([data-title="项目等级：neutralized"]) {
display: inline-block !important;
width: 100px;
height: 90px;
margin-top: 15px;
}
#u-classImageHeading-nonstandard:not([data-title="项目等级：safe"]):not([data-title="项目等级：euclid"]):not([data-title="项目等级：keter"]):not([data-title="项目等级：thaumiel"]):not([data-title="项目等级：neutralized"]):hover::after {
display: block;
content: attr(data-title); /* Text output */
position: absolute; /* Absolute positioning */
left: 20%; /* top: 10%; */ /* Hint position */
z-index: 1; /* Hint popups overlaying all other elements */
background: rgba(255,255,230,0.9); /* Background semi-transparency */
font-family: Arial, sans-serif; /* Fonts */
font-size: 11px; /* Hint font size */
padding: 5px 10px; /* Padding */
border: 1px solid #333; /* Border */
transform: skew(0deg) !important;
color: #333;
}
.bottomBlockHeading {
width: 70%;
height: 20%;
text-align: center;
display: inline-flex;
float: right;
}
.componentHeading {
font-size: 18px;
width: 55%;
text-align: center;
background: #ccc;
height: 100%;
transform: skew(-45deg);
box-shadow: inset 5px 5px 4px -4px rgba(0,0,0,0.7);
}
.componentHeadingSkewFixSpan {
transform: skew(45deg);
display: block;
}
.xxxxHeading {
font-size: 18px;
width: 15%;
text-align: center;
background: #ccc;
height: 100%;
transform: skew(-45deg);
box-shadow: inset 0 5px 4px -4px rgba(0,0,0,0.7);
}
.contaiment-risk-{$contaiment-risk} #u-xxxxHeading-{$contaiment-risk} {
display: flex !important;
text-align: center;
width: 17.1%;
transform: skew(-45deg);
z-index: 1;
box-shadow: inset 0 5px 4px -4px rgba(0,0,0,0.7);
}
.xxxxSkewFixSpan {
transform: skew(45deg);
display: block;
}
.XXXXheadBox {
color: black;
position: relative;
top: -15px;
margin: 0 0 0 30%;
transform: skew(45deg);
}
.contaiment-risk-{$contaiment-risk} #u-xxxxHeading-{$contaiment-risk}[data-title]:hover::after {
display: block;
content: attr(data-title); /* Text output */
position: absolute; /* Absolute positioning */
z-index: 1; /* Hint popups overlaying all other elements */
background: rgba(255,255,230,0.9); /* Background semi-transparency */
font-family: Arial, sans-serif; /* Fonts */
font-size: 11px; /* Hint font size */
padding: 5px 10px; /* Padding */
border: 1px solid #333; /* Border */
transform: skew(45deg);
width: max-content;
top: 110%;
color: #333;
}
.threat-ind-{$threat-ind} #u-potentialLevel-{$threat-ind} {
font-size: 18px;
width: 14%;
text-align: center;
background: #ccc;
height: 100%;
display: none;
color: white;
box-shadow: inset 0 5px 4px -4px rgba(0,0,0,0.7);
}
.potentialLvl-Bl {
color: black;
position: relative;
top: -15px;
margin: 0 0 0 10%;
transform: skew(45deg);
}
.potentialLvl-Wh {
color: white;
position: relative;
top: -15px;
margin: 0 0 0 10%;
transform: skew(45deg);
}
.threat-ind-{$threat-ind} #u-potentialLevel-{$threat-ind} {
display: flex !important;
text-align: center;
width: 18%;
transform: skew(-45deg);
z-index: 1;
box-shadow: inset 0 5px 4px -4px rgba(0,0,0,0.7);
}
.threat-ind-{$threat-ind} #u-potentialLevel-{$threat-ind}:hover::after {
display: block;
content: attr(data-title); /* Text output */
position: absolute; /* Absolute positioning */
z-index: 1; /* Hint popups overlaying all other elements */
background: rgba(255,255,230,0.9); /* Background semi-transparency */
font-family: Arial, sans-serif; /* Fonts */
font-size: 11px; /* Hint font size */
padding: 5px 10px; /* Padding */
border: 1px solid #333; /* Border */
transform: skew(45deg);
width: max-content;
top: 110%;
color: #333;
}
.numberHeading {
font-size: 18px;
width: 30%;
text-align: center;
background: #ccc;
margin-left: -15px;
box-shadow: inset 0 5px 4px -4px rgba(0,0,0,0.7);
margin-top: -0.2px;
}
/* Mobile optimisation by MrNereof */
@media (max-width: 1024px) {
.centerBlockHeading {
height: 60px;
}
div#u-dangerLevels-1, div#u-dangerLevels-2, div#u-dangerLevels-3, div#u-dangerLevels-4, div#u-dangerLevels-5, div#u-dangerLevels-6 {
width: 60px !important;
height: 60px !important;
background-size: 60px !important;
margin-top: 20px !important;
}
.{$scp-class} div#u-classImageHeading-{$scp-class}, div#u-classImageHeading-nonstandard {
width: 90px !important;
height: 90px !important;
}
.{$scp-class} div#u-classImageHeading-{$scp-class} span, div#u-classImageHeading-nonstandard span {
line-height: 50px !important;
}
span.confidentialSpan {
font-size: 29px !important;
}
.bottomBlockHeading {
width: 30em !important;
}
.componentHeading {
transform: skew(0deg) !important;
}
.componentHeadingSkewFixSpan {
transform: skew(0deg) !important;
}
.contaiment-risk-{$contaiment-risk} #u-xxxxHeading-{$contaiment-risk} {
width: 3em !important;
transform: skew(0deg) !important;
}
.XXXXheadBox {
transform: skew(0deg) !important;
}
.threat-ind-{$threat-ind} #u-potentialLevel-{$threat-ind} {
width: 5em !important;
transform: skew(0deg) !important;
}
.potentialLvl-Wh {
transform: skew(0deg) !important;
}
.numberHeading {
width: 10em !important;
}
.contaiment-risk-{$contaiment-risk} #u-xxxxHeading-{$contaiment-risk}[data-title]::after {
transform: skew(0deg) !important;
width: 20em !important;
color: #333;
}
.threat-ind-{$threat-ind} #u-potentialLevel-{$threat-ind}::after {
transform: skew(0deg) !important;
width: 20em !important;
}
}
@media (max-width: 970px) {
.baseHeading {
padding-bottom: 105px;
}
.detailsHeading {
max-width: 200% !important;
width: 200%;
font-size: 1.2em;
}
.centerBlockHeading {
display: flex;
width: 100%;
margin-left: 10px;
}
div#u-dangerLevels-1, div#u-dangerLevels-2, div#u-dangerLevels-3, div#u-dangerLevels-4, div#u-dangerLevels-5, div#u-dangerLevels-6 {
margin-top: -10px !important;
}
.rightBlockHeading {
position: absolute;
right: 10%;
width: 90px !important;
height: 90px !important;
margin-top: 25px;
}
.bottomBlockHeading {
margin-top: 10px;
width: 100% !important;
}
}
@media (max-width: 410px) {
.centerBlockHeading {
height: 50px;
}
div#u-dangerLevels-1, div#u-dangerLevels-2, div#u-dangerLevels-3, div#u-dangerLevels-4, div#u-dangerLevels-5, div#u-dangerLevels-6 {
width: 50px !important;
height: 50px !important;
background-size: 50px !important;
}
.baseHeading {
padding-bottom: 95px;
}
}
:hover::after {
display: none;
content: none;
}
[[/module]]