查看“模板:等级2”的源代码

<div class="sd-container newsd class-{{{线|{{#expr: ({{{C3|1}}}+{{{C2|1}}}+{{{C1|1}}})/3 round 0}}}}}" style="{{#ifexpr: {{{noname|0}}} = 1 |grid-template-columns: 1fr 1fr; grid-template-areas: 'class exit' 'environment entity'; }}margin-bottom: 0.5em;">

<div class="number" {{#ifexpr: {{{noname|0}}} = 1 | style="display: none;" }} >
'''<big>{{{标题|Urooms}}}</big>'''
{{{名字|UL N}}}
<div class="lines">
</div>
</div>

<div class="border" {{#ifexpr: {{{noname|0}}} = 1 | style="display: none;" }} >
</div>

<div class="class">
<span class="sd">{{{等级标题|危险等级}}}</span><br>
'''Class {{{等级|0}}}'''
</div>

<div class="exit indicator in-{{{C1|0}}}">
'''{{{1|勘探占据度}}}: {{{C1|0}}}/5'''<br>
<span>{{{T1|{{#ifexpr: {{{C1|0}}} = 0 | 完全勘探 }}{{#ifexpr: {{{C1|0}}} = 1 | 深入勘探 }}{{#ifexpr: {{{C1|0}}} = 2 | 基本勘探 }}{{#ifexpr: {{{C1|0}}} = 3 | 初步勘探 }}{{#ifexpr: {{{C1|0}}} = 4 | 难以勘探 }}{{#ifexpr: {{{C1|0}}} = 5 | 死区 }}}}}</span>
</div>

<div class="environment indicator in-{{{C2|0}}}">
'''{{{2|空间异常度}}}: {{{C2|0}}}/5'''<br>
<span>{{{T2|{{#ifexpr: {{{C2|0}}} = 0 | 正常性质 }}{{#ifexpr: {{{C2|0}}} = 1 | 稳定性质 }}{{#ifexpr: {{{C2|0}}} = 2 | 较稳定性质 }}{{#ifexpr: {{{C2|0}}} = 3 | 异常性质 }}{{#ifexpr: {{{C2|0}}} = 4 | 扭曲性质 }}{{#ifexpr: {{{C2|0}}} = 5 | 极端性质 }}}}}</span>
</div>

<div class="entity indicator in-{{{C3|0}}}">
'''{{{3|实体危险度}}}: {{{C3|0}}}/5'''<br>
<span>{{{T3|{{#ifexpr: {{{C3|0}}} = 0 | 无实体威胁 }}{{#ifexpr: {{{C3|0}}} = 1 | 微量实体威胁 }}{{#ifexpr: {{{C3|0}}} = 2 | 轻度实体威胁 }}{{#ifexpr: {{{C3|0}}} = 3 | 中度实体威胁 }}{{#ifexpr: {{{C3|0}}} = 4 | 高度实体威胁 }}{{#ifexpr: {{{C3|0}}} = 5 | 致命实体威胁 }}}}}</span>
</div>
</div>
<noinclude>
==描述==
===来源===
基于：https://backrooms.fandom.com/zh/wiki/Template:Alt_Class

===说明===
以下为代码测试：
<pre>
{{等级2
|标题=课程
|名字=IB国际文凭
|等级标题=难度
|等级=5
|线=5
|1=考试难度等级
|C1=2
|T1=难度中等
|2=容量等级
|C2=4
|T2=大量学习内容
|3=拓展等级
|C3=5
|T3=极多拓展内容
}}
</pre>
{{等级2
|标题=课程
|名字=IB国际文凭
|等级标题=难度
|等级=5
|线=5
|1=考试难度等级
|C1=2
|T1=难度中等
|2=容量等级
|C2=4
|T2=大量学习内容
|3=拓展等级
|C3=5
|T3=极多拓展内容
}}
</noinclude>

{{#CSS:
.sd-container.newsd
{
  display: grid;
  grid-template-areas:
  'number border class exit'
  'number border environment entity';
  grid-gap: 10px;
  grid-template-columns:12rem 1px 1fr 1fr;
  grid-auto-rows: 1fr;
  text-align: center;
}

.newsd p { margin: 0; }

.number { 
   grid-area: number; 
   letter-spacing: 0.1rem;
   text-align: center; 
   font-size: 1.5rem;
   position: relative;
   display: flex;
   flex-direction: column;
}

.number .no {
   font-size: 3rem;
   letter-spacing: 0.1rem;
}

.number p {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: calc(100% - 47px);
    flex-grow: 2;
    line-height: 2.5rem;
}

.lines { 
  height: 47px;
  background-image: linear-gradient(
  rgb(var(--sdgrad)) 0,
  rgb(var(--sdgrad)) 7px,
  transparent 7px,
  transparent 10px,
  rgb(var(--sdgrad)) 10px,
  rgb(var(--sdgrad)) 17px,
  transparent 17px,
  transparent 20px,
  rgb(var(--sdgrad)) 20px,
  rgb(var(--sdgrad)) 27px,
  transparent 27px,
  transparent 30px,
  rgb(var(--sdgrad)) 30px,
  rgb(var(--sdgrad)) 37px,
  transparent 37px,
  transparent 40px,
  rgb(var(--sdgrad)) 40px,
  rgb(var(--sdgrad)) 47px
  );
}

.class { 
   grid-area: class;
   padding: 0.4rem 0;
}

span.sd {
    font-size: 0.8rem;
    letter-spacing: 0.1rem;
}

.exit { 
   grid-area: exit; 
}

.environment { 
   grid-area: environment; 
}

.entity { 
   grid-area: entity; 
}

.border { 
   grid-area: border;
   background: var(--theme-border-color);
}

.indicator {
   background: rgba(var(--bg),0.3);
   border-left: solid 0.4rem rgb(var(--bg));
   padding: 0.4rem 2rem 0.4rem 0.4rem;
}

.indicator span {  
    font-size: 0.8rem;
    letter-spacing: 0.1rem;
}

.in-0 { --bg: 247,227,117; }
.in-1 { --bg: 255,201,14; }
.in-2 { --bg: 245,156,0; }
.in-3 { --bg: 249,90,0; }
.in-4 { --bg: 254,23,1; }
.in-5 { --bg: 175,6,6; }

.newsd.class-0  { --sdgrad: 247,227,117; }
.newsd.class-1  { --sdgrad: 255,201,14; }
.newsd.class-2  { --sdgrad: 245,156,0; }
.newsd.class-3  { --sdgrad: 249,90,0; }
.newsd.class-4  { --sdgrad: 254,23,1; }
.newsd.class-5 { --sdgrad: 175,6,6; }

.class, .indicator {
    display: flex;
    align-items: center;
    font-size: 1.7rem;
    justify-content: center;
}

.class p, .indicator p {
	line-height: 1.5rem;
}

.newsd.class-5 .lines { height: 47px; }
.newsd.class-4 .lines { height: 37px; }
.newsd.class-3 .lines { height: 27px; }
.newsd.class-2 .lines { height: 17px; }
.newsd.class-1 .lines { height: 7px; }
.newsd.class-0 .lines { height: 0; }
}}