查看“Template:等级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>{{{标题|恐怖分子}}}</big>'''
{{{名字|RayRay}}}
<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 {{{等级|1}}}'''
</div>

<div class="exit indicator in-{{{C1|1}}}">
'''{{{1|人物危险等级}}}: {{{C1|1}}}/5'''<br>
<span>{{{T1|{{#ifexpr: {{{C1|1}}} = 0 | 极低威胁性 }}{{#ifexpr: {{{C1|1}}} = 1 | 基础危险等级 }}{{#ifexpr: {{{C1|1}}} = 2 | 中度危险等级 }}{{#ifexpr: {{{C1|1}}} = 3 | 高度危险等级 }}{{#ifexpr: {{{C1|1}}} = 4 | 极度危险等级 }}{{#ifexpr: {{{C1|1}}} = 5 | 致命危险等级 }}}}}</span>
</div>

<div class="environment indicator in-{{{C2|1}}}">
'''{{{2|关系链等级}}}: {{{C2|1}}}/5'''<br>
<span>{{{T2|{{#ifexpr: {{{C2|1}}} = 0 | 无关系链 }}{{#ifexpr: {{{C2|1}}} = 1 | 关系链较小 }}{{#ifexpr: {{{C2|1}}} = 2 | 关系链存在 }}{{#ifexpr: {{{C2|1}}} = 3 | 关系链较大 }}{{#ifexpr: {{{C2|1}}} = 4 | 关系链庞大 }}{{#ifexpr: {{{C2|1}}} = 5 | 关系链极其庞大 }}}}}</span>
</div>

<div class="entity indicator in-{{{C3|1}}}">
'''{{{3|犯罪前科等级}}}: {{{C3|1}}}/5'''<br>
<span>{{{T3|{{#ifexpr: {{{C3|1}}} = 0 | 无犯罪前科 }}{{#ifexpr: {{{C3|1}}} = 1 | 具有犯罪前科 }}{{#ifexpr: {{{C3|1}}} = 2 | 中度犯罪前科 }}{{#ifexpr: {{{C3|1}}} = 3 | 高度犯罪前科 }}{{#ifexpr: {{{C3|1}}} = 4 | 严重犯罪前科 }}{{#ifexpr: {{{C3|1}}} = 5 | 极严重犯罪前科 }}}}}</span>
</div>
</div>

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