feat: panel

resources/card/index.css

@@ -42,7 +42,7 @@
   width: 100%;
   position: relative;
 }
-.card .list .item * {
+.card .list .item > * {
   position: inherit;
   z-index: 1;
 }
@@ -82,13 +82,44 @@
   object-fit: contain;
   display: block;
 }
-.card .list .item .level {
+.card .list .item .c-info {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   background: rgb(0, 0, 0);
   color: white;
+  display: flex;
+  text-align: center;
+}
+.card .list .item .c-info .ranks {
+  background: rgb(117, 117, 117);
+  padding: 0 0.4em;
+}
+.card .list .item .c-info .ranks.r1 {
+  background: rgb(58, 116, 43);
+}
+.card .list .item .c-info .ranks.r2 {
+  background: rgb(61, 132, 214);
+}
+.card .list .item .c-info .ranks.r3 {
+  background: rgb(223, 118, 118);
+}
+.card .list .item .c-info .ranks.r4 {
+  background: rgb(51, 54, 161);
+}
+.card .list .item .c-info .ranks.r5 {
+  background: rgb(102, 127, 19);
+}
+.card .list .item .c-info .ranks.r6 {
+  background: rgb(218, 48, 32);
+}
+.card .list .item .c-info .level {
+  flex-grow: 1;
+  flex-shrink: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   text-align: center;
 }
 .card .list .item .property {

resources/card/index.html

@@ -25,62 +25,37 @@
       <div class="label">式舆防卫战</div>
     </div>
   </div>
-  <div class="special-title">
-    <div class="bg-content">
-      AGENT
-    </div>
-    <div class="parallelograms">
-      <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
-    </div>
-    <div class="content">
-      代理人信息
-    </div>
-    <div class="parallelograms">
-      <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
-    </div>
-  </div>
-
-
-  <div class="list">
-    {{each card.avatar_list char i}}
-    <div class="item rank{{char.rarity}}">
-      <div class="rank rank-icon {{char.rarity}}"></div>
-      <div class="property {{char.element_str}}"></div>
-      <div class="image">
-        <img src="{{char.square_icon}}" alt="">
+  <% include(sys.specialTitle, {en: 'AGENT' , cn: '代理人信息' }) %>
+    <div class="list">
+      {{each card.avatar_list char i}}
+      <div class="item rank{{char.rarity}}">
+        <div class="rank rank-icon {{char.rarity}}"></div>
+        <div class="property {{char.element_str}}"></div>
+        <div class="image">
+          <img src="{{char.square_icon}}" alt="">
+        </div>
+        <div class="c-info">
+          <div class="ranks r{{char.rank}}">{{char.rank}}命</div>
+          <div class="level">等级{{char.level}}</div>
+        </div>
       </div>
-      <div class="level">等级{{char.level}}</div>
+      {{/each}}
     </div>
-    {{/each}}
-  </div>
 
-
-  <div class="special-title">
-    <div class="bg-content">
-      BANGBOO
-    </div>
-    <div class="parallelograms">
-      <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
-    </div>
-    <div class="content">
-      邦布信息
-    </div>
-    <div class="parallelograms">
-      <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
-    </div>
-  </div>
-
-
-  <div class="list">
-    {{each card.buddy_list bangboo i}}
-    <div class="item rank{{bangboo.rarity}}">
-      <div class="rank rank-icon {{bangboo.rarity}}"></div>
-      <div class="image">
-        <img src="{{bangboo.square_icon}}" alt="">
+    <% include(sys.specialTitle, {en: 'BANGBOO' , cn: '邦布信息' }) %>
+      <div class="list">
+        {{each card.buddy_list bangboo i}}
+        <div class="item rank{{bangboo.rarity}}">
+          <div class="rank rank-icon {{bangboo.rarity}}"></div>
+          <div class="image">
+            <img src="{{bangboo.square_icon}}" alt="">
+          </div>
+          <div class="c-info">
+            <div class="ranks r{{bangboo.star}}">{{bangboo.star}}命</div>
+            <div class="level">等级{{bangboo.level}}</div>
+          </div>
+        </div>
+        {{/each}}
       </div>
-      <div class="level">等级{{bangboo.level}}</div>
-    </div>
-    {{/each}}
-  </div>
 </div>
 {{/block}}

resources/card/index.scss

@@ -39,7 +39,7 @@
     .item {
       width: 100%;
       position: relative;
-      * {
+      > * {
         position: inherit;
         z-index: 1;
       }
@@ -83,14 +83,45 @@
           display: block;
         }
       }
-      .level {
+      .c-info {
         position: absolute;
         bottom: 0;
         left: 0;
         width: 100%;
         background: rgb(0, 0, 0);
         color: white;
+        display: flex;
         text-align: center;
+        .ranks {
+          background: rgb(117, 117, 117);
+          padding: 0 0.4em;
+          &.r1 {
+            background: rgb(58, 116, 43);
+          }
+          &.r2 {
+            background: rgb(61, 132, 214);
+          }
+          &.r3 {
+            background: rgb(223, 118, 118);
+          }
+          &.r4 {
+            background: rgb(51, 54, 161);
+          }
+          &.r5 {
+            background: rgb(102, 127, 19);
+          }
+          &.r6 {
+            background: rgb(218, 48, 32);
+          }
+        }
+        .level {
+          flex-grow: 1;
+          flex-shrink: 1;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          text-align: center;
+        }
       }
       .property {
         position: absolute;

resources/common/layout/specialtitle.html

@@ -0,0 +1,18 @@
+<div class="special-title">
+  <div class="bg-content">
+    {{en}}
+  </div>
+  <div class="parallelograms">
+    <% for(let i=1 ; i < (count || 9) ; i++) { %>
+      <span></span>
+      <% } %>
+  </div>
+  <div class="content">
+    {{cn}}
+  </div>
+  <div class="parallelograms">
+    <% for(let i=1 ; i < (count || 9) ; i++) { %>
+      <span></span>
+      <% } %>
+  </div>
+</div>

resources/common/style/index.css

@@ -34,6 +34,28 @@
   background-image: url("../images/RANK_B.png");
 }
 
+.rarity-icon {
+  aspect-ratio: 1;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+}
+.rarity-icon.a, .rarity-icon.A {
+  background-image: url("../images/Rarity_A.png");
+}
+.rarity-icon.b, .rarity-icon.B {
+  background-image: url("../images/Rarity_B.png");
+}
+.rarity-icon.c, .rarity-icon.C {
+  background-image: url("../images/Rarity_C.png");
+}
+.rarity-icon.s, .rarity-icon.S {
+  background-image: url("../images/Rarity_S.png");
+}
+.rarity-icon.x, .rarity-icon.X {
+  background-image: url("../images/Rarity_X.png");
+}
+
 .property {
   aspect-ratio: 1;
   background-size: contain;
@@ -56,6 +78,89 @@
   background-image: url("../images/IconDungeonBuffEther.png");
 }
 
+.prop-icon {
+  aspect-ratio: 1;
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+.prop-icon.attack {
+  background-image: url("../images/property/IconAttack.png");
+}
+.prop-icon.breakstun {
+  background-image: url("../images/property/IconBreakStun.png");
+}
+.prop-icon.crit {
+  background-image: url("../images/property/IconCrit.png");
+}
+.prop-icon.critdam {
+  background-image: url("../images/property/IconCritDam.png");
+}
+.prop-icon.def {
+  background-image: url("../images/property/IconDef.png");
+}
+.prop-icon.dungeonbuffether {
+  background-image: url("../images/property/IconDungeonBuffEther.png");
+}
+.prop-icon.elementabnormalpower {
+  background-image: url("../images/property/IconElementAbnormalPower.png");
+}
+.prop-icon.elementmystery {
+  background-image: url("../images/property/IconElementMystery.png");
+}
+.prop-icon.fire {
+  background-image: url("../images/property/IconFire.png");
+}
+.prop-icon.hpmax {
+  background-image: url("../images/property/IconHpMax.png");
+}
+.prop-icon.ice {
+  background-image: url("../images/property/IconIce.png");
+}
+.prop-icon.penratio {
+  background-image: url("../images/property/IconPenRatio.png");
+}
+.prop-icon.penvalue {
+  background-image: url("../images/property/IconPenValue.png");
+}
+.prop-icon.physdmg {
+  background-image: url("../images/property/IconPhysDmg.png");
+}
+.prop-icon.spgetratio {
+  background-image: url("../images/property/IconSpGetRatio.png");
+}
+.prop-icon.spmax {
+  background-image: url("../images/property/IconSpMax.png");
+}
+.prop-icon.sprecover {
+  background-image: url("../images/property/IconSpRecover.png");
+}
+.prop-icon.thunder {
+  background-image: url("../images/property/IconThunder.png");
+}
+
+.pro-icon {
+  aspect-ratio: 1;
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+.pro-icon.anomaly {
+  background-image: url("../images/prop/IconAnomaly.png");
+}
+.pro-icon.attack {
+  background-image: url("../images/prop/IconAttack.png");
+}
+.pro-icon.defense {
+  background-image: url("../images/prop/IconDefence.png");
+}
+.pro-icon.stun {
+  background-image: url("../images/prop/IconStun.png");
+}
+.pro-icon.support {
+  background-image: url("../images/prop/IconSupport.png");
+}
+
 .special-title {
   width: 100%;
   background-size: contain;

resources/common/style/index.scss

@@ -59,6 +59,33 @@
   }
 }
 
+.rarity-icon {
+  aspect-ratio: 1;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  &.a,
+  &.A {
+    background-image: url('../images/Rarity_A.png');
+  }
+  &.b,
+  &.B {
+    background-image: url('../images/Rarity_B.png');
+  }
+  &.c,
+  &.C {
+    background-image: url('../images/Rarity_C.png');
+  }
+  &.s,
+  &.S {
+    background-image: url('../images/Rarity_S.png');
+  }
+  &.x,
+  &.X {
+    background-image: url('../images/Rarity_X.png');
+  }
+}
+
 .property {
   aspect-ratio: 1;
   background-size: contain;
@@ -81,6 +108,89 @@
   }
 }
 
+.prop-icon {
+  aspect-ratio: 1;
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+  &.attack {
+    background-image: url('../images/property/IconAttack.png');
+  }
+  &.breakstun {
+    background-image: url('../images/property/IconBreakStun.png');
+  }
+  &.crit {
+    background-image: url('../images/property/IconCrit.png');
+  }
+  &.critdam {
+    background-image: url('../images/property/IconCritDam.png');
+  }
+  &.def {
+    background-image: url('../images/property/IconDef.png');
+  }
+  &.dungeonbuffether {
+    background-image: url('../images/property/IconDungeonBuffEther.png');
+  }
+  &.elementabnormalpower {
+    background-image: url('../images/property/IconElementAbnormalPower.png');
+  }
+  &.elementmystery {
+    background-image: url('../images/property/IconElementMystery.png');
+  }
+  &.fire {
+    background-image: url('../images/property/IconFire.png');
+  }
+  &.hpmax {
+    background-image: url('../images/property/IconHpMax.png');
+  }
+  &.ice {
+    background-image: url('../images/property/IconIce.png');
+  }
+  &.penratio {
+    background-image: url('../images/property/IconPenRatio.png');
+  }
+  &.penvalue {
+    background-image: url('../images/property/IconPenValue.png');
+  }
+  &.physdmg {
+    background-image: url('../images/property/IconPhysDmg.png');
+  }
+  &.spgetratio {
+    background-image: url('../images/property/IconSpGetRatio.png');
+  }
+  &.spmax {
+    background-image: url('../images/property/IconSpMax.png');
+  }
+  &.sprecover {
+    background-image: url('../images/property/IconSpRecover.png');
+  }
+  &.thunder {
+    background-image: url('../images/property/IconThunder.png');
+  }
+}
+
+.pro-icon {
+  aspect-ratio: 1;
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+  &.anomaly {
+    background-image: url('../images/prop/IconAnomaly.png');
+  }
+  &.attack {
+    background-image: url('../images/prop/IconAttack.png');
+  }
+  &.defense {
+    background-image: url('../images/prop/IconDefence.png');
+  }
+  &.stun {
+    background-image: url('../images/prop/IconStun.png');
+  }
+  &.support {
+    background-image: url('../images/prop/IconSupport.png');
+  }
+}
+
 .special-title {
   width: 100%;
   background-size: contain;

resources/note/index.html

@@ -7,80 +7,54 @@
 {{block 'main'}}
 <div class="card">
   {{include sys.playerInfo}}
-  <div class="special-title">
-    <div class="bg-content">
-      STAMINA
-    </div>
-    <div class="parallelograms">
-      <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
-    </div>
-    <div class="content">
-      电池电量
-    </div>
-    <div class="parallelograms">
-      <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
-    </div>
-  </div>
-
-  <div class="battery">
-    <div class="icon">
-      <img src="{{@sys.currentPath}}/images/IconStamina.png" alt="">
-    </div>
-    <div class="info">
-      <div class="bvalue">
-        <div class="title">电量</div>
-        <div class="value"><span class="big">{{note.energy.progress.current}}</span>/{{note.energy.progress.max}}</div>
+  <% include(sys.specialTitle, {en: 'STAMINA' , cn: '电池电量' }) %>
+    <div class="battery">
+      <div class="icon">
+        <img src="{{@sys.currentPath}}/images/IconStamina.png" alt="">
       </div>
-      <div class="bleft">
-        <div class="title">剩余</div>
-        <div class="value">{{note.energy.progress.rest}}</div>
-      </div>
-      <div class="texture">
-        <div class="bar">
-          <div class="progress" style="width: {{note.energy.progress.percent}}%;"></div>
+      <div class="info">
+        <div class="bvalue">
+          <div class="title">电量</div>
+          <div class="value"><span class="big">{{note.energy.progress.current}}</span>/{{note.energy.progress.max}}
+          </div>
+        </div>
+        <div class="bleft">
+          <div class="title">剩余</div>
+          <div class="value">{{note.energy.progress.rest}}</div>
+        </div>
+        <div class="texture">
+          <div class="bar">
+            <div class="progress" style="width: {{note.energy.progress.percent}}%;"></div>
+          </div>
         </div>
       </div>
     </div>
-  </div>
 
-  <div class="special-title">
-    <div class="bg-content">
-      ACTIVE
-    </div>
-    <div class="parallelograms">
-      <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
-    </div>
-    <div class="content">
-      每日情况
-    </div>
-    <div class="parallelograms">
-      <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
-    </div>
-  </div>
 
-  <div class="active-list">
-    <div class="active">
-      <div class="status {{note.vitality.finish && 'finish'}}"></div>
-      <div class="title">今日活跃度</div>
-      <div class="value">
-        {{note.vitality.current}}
-        <span class="sub">/{{note.vitality.max}}</span>
+    <% include(sys.specialTitle, {en: 'ACTIVE' , cn: '每日情况' }) %>
+      <div class="active-list">
+        <div class="active">
+          <div class="status {{note.vitality.finish && 'finish'}}"></div>
+          <div class="title">今日活跃度</div>
+          <div class="value">
+            {{note.vitality.current}}
+            <span class="sub">/{{note.vitality.max}}</span>
+          </div>
+        </div>
+        <div class="active">
+          <div class="status {{note.vhs_sale.state && 'finish'}}"></div>
+          <div class="title">录像店经营</div>
+          <div class="value">
+            {{note.vhs_sale.state_label}}
+          </div>
+        </div>
+        <div class="active">
+          <div class="status {{note.sign && 'finish'}}"></div>
+          <div class="title">刮刮卡</div>
+          <div class="value">
+            {{note.sign_label}}
+          </div>
+        </div>
       </div>
-    </div>
-    <div class="active">
-      <div class="status {{note.vhs_sale.state && 'finish'}}"></div>
-      <div class="title">录像店经营</div>
-      <div class="value">
-        {{note.vhs_sale.state_label}}
-      </div>
-    </div>
-    <div class="active">
-      <div class="status {{note.sign && 'finish'}}"></div>
-      <div class="title">刮刮卡</div>
-      <div class="value">
-        {{note.sign_label}}
-      </div>
-    </div>
-  </div>
 </div>
 {{/block}}

resources/panel/card.css

@@ -0,0 +1,592 @@
+.card {
+  padding-top: 0.8em;
+  overflow: hidden;
+}
+.card .star {
+  width: 5.5em;
+  height: 1.5em;
+}
+.card .star.star0 {
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-image: url("./images/star/0.png");
+}
+.card .star.star1 {
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-image: url("./images/star/1.png");
+}
+.card .star.star2 {
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-image: url("./images/star/2.png");
+}
+.card .star.star3 {
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-image: url("./images/star/3.png");
+}
+.card .star.star4 {
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-image: url("./images/star/4.png");
+}
+.card .star.star5 {
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-image: url("./images/star/5.png");
+}
+.card .basic {
+  display: flex;
+  align-items: stretch;
+  overflow: hidden;
+}
+.card .basic .char {
+  width: 55%;
+  position: relative;
+  flex-grow: 1;
+}
+.card .basic .char .avatar {
+  height: 100%;
+  padding-top: 1em;
+  overflow: hidden;
+}
+.card .basic .char .avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: top center;
+  position: absolute;
+}
+.card .basic .char .skills {
+  position: absolute;
+  width: 120%;
+  height: 3.5em;
+  background: url("./images/skill_bg.png");
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+  bottom: 3em;
+  right: -1.6em;
+  display: flex;
+  align-items: flex-end;
+  padding-left: 2.5em;
+  padding-bottom: 0.2em;
+}
+.card .basic .char .skills .skill {
+  width: 1.4em;
+  aspect-ratio: 1;
+  margin-right: 1.38em;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.card .basic .info {
+  width: 45%;
+  flex-grow: 0;
+  flex-shrink: 0;
+  font-size: 1.2em;
+  position: relative;
+  z-index: 2;
+}
+.card .basic .info .char_info {
+  width: 140%;
+  position: relative;
+  right: 20%;
+  padding: 0.3em 0.2em;
+  padding-right: 20%;
+  padding-left: 8%;
+  border-image-slice: 0 30 0 40 fill;
+  border-image-width: 0em 1.5em 0em 2em;
+  border-image-outset: 0 0 0 0;
+  border-image-repeat: stretch stretch;
+  border-image-source: url("./images/CurseBG04.png");
+  filter: drop-shadow(0 0 0.1em rgb(0, 0, 0));
+}
+.card .basic .info .char_info .base {
+  display: flex;
+  align-items: center;
+  gap: 0.2em;
+  overflow: hidden;
+}
+.card .basic .info .char_info .base .rank {
+  width: 1.2em;
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+.card .basic .info .char_info .base .property {
+  width: 1em;
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+.card .basic .info .char_info .base .name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.card .basic .info .char_info .addition {
+  display: flex;
+  align-items: center;
+  font-size: 0.7em;
+  gap: 0.2em;
+  padding-left: 1em;
+}
+.card .basic .info .char_info .addition .level {
+  background-color: #000;
+  padding: 0em 0.7em;
+  border-radius: 1em;
+}
+.card .basic .info .char_info .addition .role_ranks {
+  display: flex;
+  gap: 0.1em;
+}
+.card .basic .info .char_info .addition .role_ranks span {
+  width: 1.2em;
+  aspect-ratio: 1;
+  border-radius: 1em;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+  opacity: 0.4;
+}
+.card .basic .info .char_info .addition .role_ranks span:nth-child(1) {
+  background-image: url("./images/ranks/1.png");
+}
+.card .basic .info .char_info .addition .role_ranks.r1 span:nth-child(1) {
+  opacity: 1 !important;
+}
+.card .basic .info .char_info .addition .role_ranks span:nth-child(2) {
+  background-image: url("./images/ranks/2.png");
+}
+.card .basic .info .char_info .addition .role_ranks.r2 span:nth-child(1) {
+  opacity: 1 !important;
+}
+.card .basic .info .char_info .addition .role_ranks.r2 span:nth-child(2) {
+  opacity: 1 !important;
+}
+.card .basic .info .char_info .addition .role_ranks span:nth-child(3) {
+  background-image: url("./images/ranks/3.png");
+}
+.card .basic .info .char_info .addition .role_ranks.r3 span:nth-child(1) {
+  opacity: 1 !important;
+}
+.card .basic .info .char_info .addition .role_ranks.r3 span:nth-child(2) {
+  opacity: 1 !important;
+}
+.card .basic .info .char_info .addition .role_ranks.r3 span:nth-child(3) {
+  opacity: 1 !important;
+}
+.card .basic .info .char_info .addition .role_ranks span:nth-child(4) {
+  background-image: url("./images/ranks/4.png");
+}
+.card .basic .info .char_info .addition .role_ranks.r4 span:nth-child(1) {
+  opacity: 1 !important;
+}
+.card .basic .info .char_info .addition .role_ranks.r4 span:nth-child(2) {
+  opacity: 1 !important;
+}
+.card .basic .info .char_info .addition .role_ranks.r4 span:nth-child(3) {
+  opacity: 1 !important;
+}
+.card .basic .info .char_info .addition .role_ranks.r4 span:nth-child(4) {
+  opacity: 1 !important;
+}
+.card .basic .info .char_info .addition .role_ranks span:nth-child(5) {
+  background-image: url("./images/ranks/5.png");
+}
+.card .basic .info .char_info .addition .role_ranks.r5 span:nth-child(1) {
+  opacity: 1 !important;
+}
+.card .basic .info .char_info .addition .role_ranks.r5 span:nth-child(2) {
+  opacity: 1 !important;
+}
+.card .basic .info .char_info .addition .role_ranks.r5 span:nth-child(3) {
+  opacity: 1 !important;
+}
+.card .basic .info .char_info .addition .role_ranks.r5 span:nth-child(4) {
+  opacity: 1 !important;
+}
+.card .basic .info .char_info .addition .role_ranks.r5 span:nth-child(5) {
+  opacity: 1 !important;
+}
+.card .basic .info .char_info .addition .role_ranks span:nth-child(6) {
+  background-image: url("./images/ranks/6.png");
+}
+.card .basic .info .char_info .addition .role_ranks.r6 span:nth-child(1) {
+  opacity: 1 !important;
+}
+.card .basic .info .char_info .addition .role_ranks.r6 span:nth-child(2) {
+  opacity: 1 !important;
+}
+.card .basic .info .char_info .addition .role_ranks.r6 span:nth-child(3) {
+  opacity: 1 !important;
+}
+.card .basic .info .char_info .addition .role_ranks.r6 span:nth-child(4) {
+  opacity: 1 !important;
+}
+.card .basic .info .char_info .addition .role_ranks.r6 span:nth-child(5) {
+  opacity: 1 !important;
+}
+.card .basic .info .char_info .addition .role_ranks.r6 span:nth-child(6) {
+  opacity: 1 !important;
+}
+.card .basic .info .char_info .addition .role_ranks span:nth-child(7) {
+  background-image: url("./images/ranks/7.png");
+}
+.card .basic .info .char_info .addition .role_ranks.r7 span:nth-child(1) {
+  opacity: 1 !important;
+}
+.card .basic .info .char_info .addition .role_ranks.r7 span:nth-child(2) {
+  opacity: 1 !important;
+}
+.card .basic .info .char_info .addition .role_ranks.r7 span:nth-child(3) {
+  opacity: 1 !important;
+}
+.card .basic .info .char_info .addition .role_ranks.r7 span:nth-child(4) {
+  opacity: 1 !important;
+}
+.card .basic .info .char_info .addition .role_ranks.r7 span:nth-child(5) {
+  opacity: 1 !important;
+}
+.card .basic .info .char_info .addition .role_ranks.r7 span:nth-child(6) {
+  opacity: 1 !important;
+}
+.card .basic .info .char_info .addition .role_ranks.r7 span:nth-child(7) {
+  opacity: 1 !important;
+}
+.card .basic .info .property_info {
+  background-color: rgb(47, 47, 47);
+  border-left: 0.1em solid rgb(0, 0, 0);
+  padding-top: 0.2em;
+  background: url("./images/BgFrame01.png") center/150% no-repeat;
+}
+.card .basic .info .property_info .title {
+  font-size: 0.6em;
+}
+.card .basic .info .property_info .title .special-title {
+  margin-bottom: 0;
+  padding-bottom: 0;
+}
+.card .basic .info .property_info .list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2em;
+  padding-bottom: 0.2em;
+}
+.card .basic .info .property_info .list .properties {
+  display: flex;
+  align-items: center;
+  gap: 0.4em;
+  padding: 0.05em 1em 0em 0.05em;
+}
+.card .basic .info .property_info .list .properties:nth-child(odd) {
+  background-color: rgba(221, 224, 221, 0.25);
+}
+.card .basic .info .property_info .list .properties .prop-icon {
+  width: 1em;
+  flex-grow: 0;
+  flex-shrink: 0;
+  margin: 0 0.4em;
+}
+.card .basic .info .property_info .list .properties .label {
+  flex-grow: 1;
+  flex-shrink: 1;
+  font-size: 0.65em;
+  color: rgb(166, 166, 166);
+}
+.card .basic .info .property_info .list .properties .label.yellow {
+  color: rgb(247, 199, 54);
+}
+.card .basic .info .property_info .list .properties .label.blue {
+  color: rgb(65, 147, 237);
+}
+.card .basic .info .property_info .list .properties .value {
+  flex-grow: 0;
+  flex-shrink: 0;
+  font-size: 0.8em;
+}
+.card .basic .info .weapon_info {
+  border-image-slice: 118 0 68 43 fill;
+  border-image-width: 4.5em 0em 2.7em 1.7em;
+  border-image-outset: 0em 0em 0em 0em;
+  border-image-repeat: stretch stretch;
+  border-image-source: url("./images/weapon_bg.png");
+  margin-top: -0.8em;
+  width: 115%;
+  margin-left: -15%;
+  font-size: 0.8em;
+  padding: 2em 1.2em;
+  padding-bottom: 3em;
+  position: relative;
+  overflow: hidden;
+}
+.card .basic .info .weapon_info .info {
+  width: 100%;
+  position: relative;
+  z-index: 2;
+}
+.card .basic .info .weapon_info .info .base {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+}
+.card .basic .info .weapon_info .info .base .rarity-icon {
+  width: 2em;
+}
+.card .basic .info .weapon_info .info .base .name {
+  text-shadow: 0 0 0.2em rgb(0, 0, 0);
+}
+.card .basic .info .weapon_info .info .main {
+  display: flex;
+  flex-direction: column;
+  justify-content: stretch;
+  width: max-content;
+}
+.card .basic .info .weapon_info .info .main .addition {
+  font-size: 0.8em;
+  display: flex;
+  align-items: center;
+  gap: 0.4em;
+}
+.card .basic .info .weapon_info .info .main .addition .level {
+  -webkit-clip-path: polygon(0.2em 0%, calc(100% - 0.2em) 0%, 100% 0.2em, 100% calc(100% - 0.2em), calc(100% - 0.2em) 100%, 0.2em 100%, 0% calc(100% - 0.2em), 0% 0.2em);
+  clip-path: polygon(0.2em 0%, calc(100% - 0.2em) 0%, 100% 0.2em, 100% calc(100% - 0.2em), calc(100% - 0.2em) 100%, 0.2em 100%, 0% calc(100% - 0.2em), 0% 0.2em);
+  padding: 0 0.4em;
+  font-size: 0.9em;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: rgb(43, 38, 40);
+  margin: 0.1em 0;
+  background-color: rgb(243, 203, 69);
+}
+.card .basic .info .weapon_info .info .main .properties {
+  display: flex;
+  align-items: center;
+  background-color: rgb(65, 147, 237);
+  gap: 0.2em;
+  padding: 0 0.5em;
+  border-radius: 1em;
+  margin: 0.2em 0;
+}
+.card .basic .info .weapon_info .info .main .properties.sub {
+  background-color: rgb(0, 0, 0);
+}
+.card .basic .info .weapon_info .info .main .properties .prop-icon {
+  width: 1em;
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+.card .basic .info .weapon_info .info .main .properties .label {
+  flex-grow: 1;
+  flex-shrink: 1;
+  font-size: 0.7em;
+  color: rgb(222, 222, 222);
+}
+.card .basic .info .weapon_info .icon {
+  position: absolute;
+  top: 1.2em;
+  right: 0;
+  z-index: 1;
+  height: 70%;
+  margin-right: -1em;
+}
+.card .basic .info .weapon_info .icon img {
+  height: 100%;
+}
+.card .other {
+  border-image-source: url("./images/BgFrame01.png");
+  border-image-slice: 200 100 70 280 fill;
+  border-image-width: 2em 1em 0.7em 2.8em;
+  border-image-outset: 2em 1em 0.7em 2.8em;
+  border-image-repeat: stretch stretch;
+  padding-bottom: 3.3em;
+  margin-top: -1.4em;
+  position: relative;
+  z-index: 5;
+}
+.card .equip-list {
+  display: grid;
+  gap: 1em;
+  grid-template-columns: repeat(3, 1fr);
+  padding: 0 1.8em;
+  align-items: stretch;
+  margin-top: 1em;
+}
+.card .equip-list .box {
+  border-image-source: url("./images/equip_bg.png");
+  border-image-slice: 190 90 110 170 fill;
+  border-image-width: 5.7em 2.7em 3.3em 5.1em;
+  border-image-outset: 1.8em 1.5em 1.8em 1.5em;
+  border-image-repeat: stretch stretch;
+  position: relative;
+  margin-top: 1.3em;
+  padding-bottom: 1em;
+  min-height: 10em;
+}
+.card .equip-list .box.empty::after {
+  content: "";
+  position: absolute;
+  width: 2.5em;
+  height: 2.5em;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-image: url("./images/empty_equip_07.png");
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+.card .equip-list .box:nth-child(1)::before {
+  content: "01";
+  position: absolute;
+  font-size: 2em;
+  left: 50%;
+  top: -0.85em;
+  transform: translate(-50%, 0);
+  z-index: -1;
+}
+.card .equip-list .box:nth-child(2)::before {
+  content: "02";
+  position: absolute;
+  font-size: 2em;
+  left: 50%;
+  top: -0.85em;
+  transform: translate(-50%, 0);
+  z-index: -1;
+}
+.card .equip-list .box:nth-child(3)::before {
+  content: "03";
+  position: absolute;
+  font-size: 2em;
+  left: 50%;
+  top: -0.85em;
+  transform: translate(-50%, 0);
+  z-index: -1;
+}
+.card .equip-list .box:nth-child(4)::before {
+  content: "04";
+  position: absolute;
+  font-size: 2em;
+  left: 50%;
+  top: -0.85em;
+  transform: translate(-50%, 0);
+  z-index: -1;
+}
+.card .equip-list .box:nth-child(5)::before {
+  content: "05";
+  position: absolute;
+  font-size: 2em;
+  left: 50%;
+  top: -0.85em;
+  transform: translate(-50%, 0);
+  z-index: -1;
+}
+.card .equip-list .box:nth-child(6)::before {
+  content: "06";
+  position: absolute;
+  font-size: 2em;
+  left: 50%;
+  top: -0.85em;
+  transform: translate(-50%, 0);
+  z-index: -1;
+}
+.card .equip-list .box .icon {
+  width: 2.7em;
+  aspect-ratio: 1;
+  position: relative;
+  left: -0.9em;
+  top: -1.2em;
+  background-color: rgb(0, 0, 0);
+  background-image: url("./images/empty_equip_03.png");
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+  border-radius: 50%;
+}
+.card .equip-list .box .icon img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  display: block;
+}
+.card .equip-list .box .info {
+  display: flex;
+  padding-left: 2.2em;
+  margin-top: -2.5em;
+  gap: 0.5em;
+  align-items: center;
+}
+.card .equip-list .box .info .level {
+  flex-grow: 1;
+  flex-shrink: 1;
+  text-align: center;
+  font-size: 0.76em;
+  background-color: #000;
+  padding: 0.1em 0.5em;
+  border-radius: 1em;
+  margin-bottom: 0.3em;
+}
+.card .equip-list .box .info .rarity-icon {
+  width: 2.2em;
+}
+.card .equip-list .box .name {
+  padding: 0 0.5em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: center;
+}
+.card .equip-list .box .property-list {
+  padding: 0 0.5em;
+}
+.card .equip-list .box .property-list .properties {
+  display: flex;
+  align-items: center;
+  background-color: rgb(0, 0, 0);
+  gap: 0.2em;
+  padding: 0 0.5em;
+  border-radius: 1em;
+  margin: 0.2em 0;
+}
+.card .equip-list .box .property-list .properties .prop-icon {
+  width: 1em;
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+.card .equip-list .box .property-list .properties .label {
+  flex-grow: 1;
+  flex-shrink: 1;
+  font-size: 0.7em;
+  color: rgb(222, 222, 222);
+}
+.card .equip-list .box .property-list .properties .value {
+  color: rgb(249, 189, 64);
+  font-size: 0.7em;
+}
+.card .equip-list .box .property-list .properties.main {
+  background-color: rgb(65, 147, 237);
+}
+.card .equip-list .box .property-list .properties.main .prop-icon {
+  width: 1.2em;
+  margin-bottom: 0.2em;
+}
+.card .equip-list .box .property-list .properties.main .value {
+  color: rgb(255, 255, 255);
+  font-size: 1em;
+}
+
+.copyright {
+  margin-top: -3.3em;
+  position: relative;
+  z-index: 5;
+}
+
+/*# sourceMappingURL=card.css.map */

resources/panel/card.html

@@ -0,0 +1,178 @@
+{{extend defaultLayout}}
+
+{{block 'css'}}
+<link rel="stylesheet" href="{{@sys.currentPath}}/card.css">
+{{/block}}
+
+{{block 'main'}}
+<div class="card">
+  <div class="basic">
+    <div class="char">
+      <div class="avatar">
+        <img src="{{charData.role_icon}}" alt="">
+      </div>
+      <div class="skills">
+        {{each charData.skills skill}}
+        <div class="skill">{{skill.level}}</div>
+        {{/each}}
+      </div>
+    </div>
+    <div class="info">
+      <div class="char_info">
+        <div class="base">
+          <div class="rank rank-icon {{charData.rarity}}"></div>
+          <div class="property {{charData.element_str}}"></div>
+          <div class="name">{{charData.full_name_mi18n}}</div>
+        </div>
+        <div class="addition">
+          <div class="level">Lv.{{charData.level}}</div>
+          <div class="role_ranks r{{charData.rank}}">
+            <span></span><span></span><span></span><span></span><span></span><span></span>
+          </div>
+        </div>
+      </div>
+      <div class="property_info">
+        <div class="title">
+          <% include(sys.specialTitle, {en: 'PROPERTY' , cn: '属性' , count: 6 }) %>
+        </div>
+        <div class="list">
+          <div class="properties">
+            <div class="prop-icon hpmax"></div>
+            <div class="label yellow">生命值</div>
+            <div class="value">{{charData.basic_properties.hpmax.final}}</div>
+          </div>
+          <div class="properties">
+            <div class="prop-icon attack"></div>
+            <div class="label yellow">攻击力</div>
+            <div class="value">{{charData.basic_properties.attack.final}}</div>
+          </div>
+          <div class="properties">
+            <div class="prop-icon def"></div>
+            <div class="label yellow">防御力</div>
+            <div class="value">{{charData.basic_properties.def.final}}</div>
+          </div>
+          <div class="properties">
+            <div class="prop-icon breakstun"></div>
+            <div class="label">冲击力</div>
+            <div class="value">{{charData.basic_properties.breakstun.final}}</div>
+          </div>
+          <div class="properties">
+            <div class="prop-icon crit"></div>
+            <div class="label blue">暴击率</div>
+            <div class="value">{{charData.basic_properties.crit.final}}</div>
+          </div>
+          <div class="properties">
+            <div class="prop-icon critdam"></div>
+            <div class="label blue">暴击伤害</div>
+            <div class="value">{{charData.basic_properties.critdam.final}}</div>
+          </div>
+          <div class="properties">
+            <div class="prop-icon elementabnormalpower"></div>
+            <div class="label">异常掌控</div>
+            <div class="value">{{charData.basic_properties.elementabnormalpower.final}}</div>
+          </div>
+          <div class="properties">
+            <div class="prop-icon elementmystery"></div>
+            <div class="label">异常精通</div>
+            <div class="value">{{charData.basic_properties.elementmystery.final}}</div>
+          </div>
+          <div class="properties">
+            <div class="prop-icon penratio"></div>
+            <div class="label">穿透率</div>
+            <div class="value">{{charData.basic_properties.penratio.final}}</div>
+          </div>
+          <div class="properties">
+            <div class="prop-icon sprecover"></div>
+            <div class="label">能量恢复</div>
+            <div class="value">{{charData.basic_properties.sprecover.final}}</div>
+          </div>
+        </div>
+      </div>
+      <div class="weapon_info">
+        {{if charData.weapon}}
+        <div class="info">
+          <div class="base">
+            <div class="rarity-icon {{charData.weapon.rarity}}"></div>
+            <div class="name">{{charData.weapon.name}}</div>
+          </div>
+          <div class="main">
+            <div class="addition">
+              <div class="star star{{charData.weapon.star}}"></div>
+              <div class="level">Lv.{{charData.weapon.level}}</div>
+            </div>
+            {{each charData.weapon.main_properties prop}}
+            <div class="properties">
+              <div class="prop-icon {{prop.classname}}"></div>
+              <div class="label">{{prop.property_name}}</div>
+              <div class="value">{{prop.base}}</div>
+            </div>
+            {{/each}}
+            {{each charData.weapon.properties prop}}
+            <div class="properties sub">
+              <div class="prop-icon {{prop.classname}}"></div>
+              <div class="label">{{prop.property_name}}</div>
+              <div class="value">{{prop.base}}</div>
+            </div>
+            {{/each}}
+          </div>
+        </div>
+        <div class="icon">
+          <img src="{{charData.weapon.square_icon}}" alt="">
+        </div>
+        {{else}}
+          <div class="info empty">
+            <div class="base">
+              <div class="rarity-icon"></div>
+              <div class="name"></div>
+            </div>
+          </div>
+          {{/if}}
+      </div>
+    </div>
+  </div>
+  <div class="other">
+    <div class="title">
+      <% include(sys.specialTitle, {en: 'METAL' , cn: '驱动盘信息' }) %>
+    </div>
+    <div class="equip-list">
+      {{each charData.equip equip}}
+      <div class="box">
+        <div class="icon">
+          <img src="{{equip.suit_icon}}" alt="">
+        </div>
+        <div class="info">
+          <div class="level">等级{{equip.level}}</div>
+          <div class="rarity-icon {{equip.rarity}}"></div>
+        </div>
+        <div class="name">{{equip.name}}</div>
+        <div class="property-list">
+
+          {{each equip.main_properties prop}}
+          <div class="properties main">
+            <div class="prop-icon {{prop.classname}}"></div>
+            <div class="label yellow">{{prop.property_name}}</div>
+            <div class="value">{{prop.base}}</div>
+          </div>
+          {{/each}}
+
+          {{each equip.properties prop}}
+          <div class="properties">
+            <div class="prop-icon {{prop.classname}}"></div>
+            <div class="label yellow">{{prop.property_name}}</div>
+            <div class="value">{{prop.base}}</div>
+          </div>
+          {{/each}}
+        </div>
+      </div>
+      {{/each}}
+      <% for(let i=charData.equip.length; i < 6 ; i++) { %>
+        <div class="box empty">
+          <div class="icon">
+          </div>
+        </div>
+        <% } %>
+
+    </div>
+  </div>
+</div>
+{{/block}}

resources/panel/card.scss

@@ -0,0 +1,449 @@
+.card {
+  padding-top: 0.8em;
+  overflow: hidden;
+  .star {
+    width: 5.5em;
+    height: 1.5em;
+    @for $i from 0 through 5 {
+      &.star#{$i} {
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-image: url('./images/star/#{$i}.png');
+      }
+    }
+  }
+  .basic {
+    display: flex;
+    align-items: stretch;
+    overflow: hidden;
+    .char {
+      width: 55%;
+      position: relative;
+      flex-grow: 1;
+      .avatar {
+        height: 100%;
+        padding-top: 1em;
+        overflow: hidden;
+        img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          object-position: top center;
+          position: absolute;
+        }
+      }
+      .skills {
+        position: absolute;
+        width: 120%;
+        height: 3.5em;
+        background: url('./images/skill_bg.png');
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: center;
+        bottom: 3em;
+        right: -1.6em;
+        display: flex;
+        align-items: flex-end;
+        padding-left: 2.5em;
+        padding-bottom: 0.2em;
+        .skill {
+          width: 1.4em;
+          aspect-ratio: 1;
+          margin-right: 1.38em;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+      }
+    }
+    .info {
+      width: 45%;
+      flex-grow: 0;
+      flex-shrink: 0;
+      font-size: 1.2em;
+      position: relative;
+      z-index: 2;
+      .char_info {
+        width: 140%;
+        position: relative;
+        right: 20%;
+        padding: 0.3em 0.2em;
+        padding-right: 20%;
+        padding-left: 8%;
+        border-image-slice: 0 30 0 40 fill;
+        border-image-width: 0em 1.5em 0em 2em;
+        border-image-outset: 0 0 0 0;
+        border-image-repeat: stretch stretch;
+        border-image-source: url('./images/CurseBG04.png');
+        filter: drop-shadow(0 0 0.1em rgb(0, 0, 0));
+        .base {
+          display: flex;
+          align-items: center;
+          gap: 0.2em;
+          overflow: hidden;
+          .rank {
+            width: 1.2em;
+            flex-grow: 0;
+            flex-shrink: 0;
+          }
+          .property {
+            width: 1em;
+            flex-grow: 0;
+            flex-shrink: 0;
+          }
+          .name {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        }
+        .addition {
+          display: flex;
+          align-items: center;
+          font-size: 0.7em;
+          gap: 0.2em;
+          padding-left: 1em;
+          .level {
+            background-color: #000;
+            padding: 0em 0.7em;
+            border-radius: 1em;
+          }
+          .role_ranks {
+            display: flex;
+            gap: 0.1em;
+            span {
+              width: 1.2em;
+              aspect-ratio: 1;
+              border-radius: 1em;
+              background-size: contain;
+              background-repeat: no-repeat;
+              background-position: center;
+              opacity: 0.4;
+            }
+            @for $i from 1 through 7 {
+              span:nth-child(#{$i}) {
+                background-image: url('./images/ranks/#{$i}.png');
+              }
+              &.r#{$i} {
+                @for $j from 1 through $i {
+                  span:nth-child(#{$j}) {
+                    opacity: 1 !important;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+      .property_info {
+        background-color: rgb(47, 47, 47);
+        border-left: 0.1em solid rgb(0, 0, 0);
+        padding-top: 0.2em;
+        background: url('./images/BgFrame01.png') center / 150% no-repeat;
+        .title {
+          font-size: 0.6em;
+          .special-title {
+            margin-bottom: 0;
+            padding-bottom: 0;
+          }
+        }
+        .list {
+          display: flex;
+          flex-direction: column;
+          gap: 0.2em;
+          padding-bottom: 0.2em;
+          .properties {
+            display: flex;
+            align-items: center;
+            gap: 0.4em;
+            padding: 0.05em 1em 0em 0.05em;
+            &:nth-child(odd) {
+              background-color: rgba(221, 224, 221, 0.25);
+            }
+            .prop-icon {
+              width: 1em;
+              flex-grow: 0;
+              flex-shrink: 0;
+              margin: 0 0.4em;
+            }
+            .label {
+              flex-grow: 1;
+              flex-shrink: 1;
+              font-size: 0.65em;
+              color: rgb(166, 166, 166);
+              &.yellow {
+                color: rgb(247, 199, 54);
+              }
+              &.blue {
+                color: rgb(65, 147, 237);
+              }
+            }
+            .value {
+              flex-grow: 0;
+              flex-shrink: 0;
+              font-size: 0.8em;
+            }
+          }
+        }
+      }
+      .weapon_info {
+        border-image-slice: 118 0 68 43 fill;
+        border-image-width: 4.5em 0em 2.7em 1.7em;
+        border-image-outset: 0em 0em 0em 0em;
+        border-image-repeat: stretch stretch;
+        border-image-source: url('./images/weapon_bg.png');
+        margin-top: -0.8em;
+        width: 115%;
+        margin-left: -15%;
+        font-size: 0.8em;
+        padding: 2em 1.2em;
+        padding-bottom: 3em;
+        position: relative;
+        overflow: hidden;
+        .info {
+          width: 100%;
+          position: relative;
+          z-index: 2;
+          .base {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            gap: 0.5em;
+            .rarity-icon {
+              width: 2em;
+            }
+            .name {
+              text-shadow: 0 0 0.2em rgb(0, 0, 0);
+            }
+          }
+          .main {
+            display: flex;
+            flex-direction: column;
+            justify-content: stretch;
+            width: max-content;
+            .addition {
+              font-size: 0.8em;
+              display: flex;
+              align-items: center;
+              gap: 0.4em;
+              .level {
+                $label-width: 0.2em;
+                -webkit-clip-path: polygon(
+                  $label-width 0%,
+                  calc(100% - $label-width) 0%,
+                  100% $label-width,
+                  100% calc(100% - $label-width),
+                  calc(100% - $label-width) 100%,
+                  $label-width 100%,
+                  0% calc(100% - $label-width),
+                  0% $label-width
+                );
+                clip-path: polygon(
+                  $label-width 0%,
+                  calc(100% - $label-width) 0%,
+                  100% $label-width,
+                  100% calc(100% - $label-width),
+                  calc(100% - $label-width) 100%,
+                  $label-width 100%,
+                  0% calc(100% - $label-width),
+                  0% $label-width
+                );
+                padding: 0 0.4em;
+                font-size: 0.9em;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                color: rgb(43, 38, 40);
+                margin: 0.1em 0;
+                background-color: rgb(243, 203, 69);
+              }
+            }
+            .properties {
+              display: flex;
+              align-items: center;
+              background-color: rgb(65, 147, 237);
+              gap: 0.2em;
+              padding: 0 0.5em;
+              border-radius: 1em;
+              margin: 0.2em 0;
+              &.sub {
+                background-color: rgb(0, 0, 0);
+              }
+              .prop-icon {
+                width: 1em;
+                flex-grow: 0;
+                flex-shrink: 0;
+              }
+              .label {
+                flex-grow: 1;
+                flex-shrink: 1;
+                font-size: 0.7em;
+                color: rgb(222, 222, 222);
+              }
+            }
+          }
+        }
+        .icon {
+          position: absolute;
+          top: 1.2em;
+          right: 0;
+          z-index: 1;
+          height: 70%;
+          margin-right: -1em;
+          img {
+            height: 100%;
+          }
+        }
+      }
+    }
+  }
+  .other {
+    border-image-source: url('./images/BgFrame01.png');
+    border-image-slice: 200 100 70 280 fill;
+    border-image-width: 2em 1em 0.7em 2.8em;
+    border-image-outset: 2em 1em 0.7em 2.8em;
+    border-image-repeat: stretch stretch;
+    padding-bottom: 3.3em;
+    margin-top: -1.4em;
+    position: relative;
+    z-index: 5;
+  }
+  .equip-list {
+    display: grid;
+    gap: 1em;
+    grid-template-columns: repeat(3, 1fr);
+    padding: 0 1.8em;
+    align-items: stretch;
+    margin-top: 1em;
+    .box {
+      $size: 3em;
+      border-image-source: url('./images/equip_bg.png');
+      border-image-slice: 190 90 110 170 fill;
+      border-image-width: 1.9 * $size 0.9 * $size 1.1 * $size 1.7 * $size;
+      border-image-outset: 0.6 * $size 0.5 * $size 0.6 * $size 0.5 * $size;
+      border-image-repeat: stretch stretch;
+      position: relative;
+      margin-top: 1.3em;
+      padding-bottom: 1em;
+      min-height: 10em;
+      &.empty {
+        &::after {
+          content: '';
+          position: absolute;
+          width: 2.5em;
+          height: 2.5em;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          background-image: url('./images/empty_equip_07.png');
+          background-size: contain;
+          background-repeat: no-repeat;
+          background-position: center;
+        }
+      }
+      @for $i from 1 through 6 {
+        &:nth-child(#{$i}) {
+          &::before {
+            content: '0#{$i}';
+            position: absolute;
+            font-size: 2em;
+            left: 50%;
+            top: -0.85em;
+            transform: translate(-50%, 0);
+            z-index: -1;
+          }
+        }
+      }
+      .icon {
+        width: 0.9 * $size;
+        aspect-ratio: 1;
+        position: relative;
+        left: -0.3 * $size;
+        top: -0.4 * $size;
+        background-color: rgb(0, 0, 0);
+        background-image: url('./images/empty_equip_03.png');
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: center;
+        border-radius: 50%;
+        img {
+          width: 100%;
+          height: 100%;
+          object-fit: contain;
+          display: block;
+        }
+      }
+      .info {
+        display: flex;
+        padding-left: 2.2em;
+        margin-top: -2.5em;
+        gap: 0.5em;
+        align-items: center;
+        .level {
+          flex-grow: 1;
+          flex-shrink: 1;
+          text-align: center;
+          font-size: 0.76em;
+          background-color: #000;
+          padding: 0.1em 0.5em;
+          border-radius: 1em;
+          margin-bottom: 0.3em;
+        }
+        .rarity-icon {
+          width: 2.2em;
+        }
+      }
+      .name {
+        padding: 0 0.5em;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        text-align: center;
+      }
+      .property-list {
+        padding: 0 0.5em;
+        .properties {
+          display: flex;
+          align-items: center;
+          background-color: rgb(0, 0, 0);
+          gap: 0.2em;
+          padding: 0 0.5em;
+          border-radius: 1em;
+          margin: 0.2em 0;
+          .prop-icon {
+            width: 1em;
+            flex-grow: 0;
+            flex-shrink: 0;
+          }
+          .label {
+            flex-grow: 1;
+            flex-shrink: 1;
+            font-size: 0.7em;
+            color: rgb(222, 222, 222);
+          }
+          .value {
+            color: rgb(249, 189, 64);
+            font-size: 0.7em;
+          }
+          &.main {
+            background-color: rgb(65, 147, 237);
+            .prop-icon {
+              width: 1.2em;
+              margin-bottom: 0.2em;
+            }
+            .value {
+              color: rgb(255, 255, 255);
+              font-size: 1em;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.copyright {
+  margin-top: -3.3em;
+  position: relative;
+  z-index: 5;
+}