模板:驱动图鉴/基本信息：修订间差异

2024年6月14日 (五) 14:48的版本

深海访客

特制的大功率变温型音擎，兼具极强的制冷能力与输出功率，是艾莲惯用的音擎款式。

名称	深海访客
属性	强攻电
高级属性	暴击率
音擎效果	对于[]角色，能够触发以下效果
诸洋之王	攻击增加20% ，对敌人施加冰冻后，暴击率增加27%，持续6秒。

@@ 第1行： / 第1行： @@
 <includeonly>
-<!-- <h2> {{#var:驱动名称国服}} {{#var:驱动名称日服}} 音擎 </h2> -->
+<div class="item-container">
-<tabber>
+    <div class="item-header">
-高稀有度=
+        <div class="item-image">
-<center>
+            {{驱动图鉴/立绘}}
-<div class="weapon-item-container">
+        </div>
-  [[File:深海访客1.png|center|class=weapon-item-image|alt=深海访客图片1]]
+        <div class="item-info">
-  <div class="weapon-item-highlight"></div>
+            <div class="item-title">{{#var:驱动名称国服}}</div>
+            <div class="item-rarity">{{图标居左30px|{{#var:稀有度}}|隐藏名字=是}}</div>
+            <div class="item-description">{{#var:一句话介绍}}</div>
+        </div>
+    </div>
+    <div class="item-details">
+        <table>
+            <tr><th>名称</th><td>{{#var:驱动名称国服}}</td></tr>
+            <tr><th>属性</th><td>{{图标居左30px|{{#var:属性}}}}</td></tr>
+            <tr><th>高级属性</th><td>{{#var:高级属性}}</td></tr>
+            <tr><th>音擎效果</th><td>{{#var:音擎效果}}</td></tr>
+            <tr><th>{{#var:技能名}}</th><td>{{#var:技能名文本}}</td></tr>
+        </table>
+    </div>
 </div>
-</center>
+{{#css:
-|-|
+.item-container {
-次稀有度=
+    <!-- width: 1200px; -->
-<center>
+    width: 95%;
-<div class="weapon-item-container">
+    margin: 20px auto;
-  [[File:深海访客2.png|center|class=weapon-item-image|alt=深海访客图片2]]
+    background: linear-gradient(to bottom, #333333, #12121A); /* 修改渐变背景适应深色背景 */
-  <div class="weapon-item-highlight"></div>
+    box-shadow: 0px 6px 12px rgba(255, 255, 255, 0.1); /* 浅色的阴影增加立体感 */
-</div>
+    border-radius: 10px;
-</center>
+    border: 1px solid #2b2b2b; /* 浅色边框以强调边界 */
-</tabber>
+    overflow: hidden;
+}
+.item-header {
+    display: flex;
+    justify-content: start;
+    align-items: center;
+    padding: 20px;
+}
+.item-image img {
+    width: 150px;
+    height: 150px;
+    border-radius: 50%;
+    border: 4px solid #555;
+}
-</includeonly><noinclude>
+.item-info {
+    margin-left: 20px;
+}
-{{#CSS:
+.item-title {
-.tabber {
+    font-size: 36px;
-     width: 156px; /* 设置选项卡宽度为156px */
+     font-weight: bold;
 }
-.weapon-item-container {
-     width: 100%; /* 调整为100%，使其填充父容器 */
+.item-rarity {
-    <!-- width: 156px; -->
+     font-size: 20px;
-    height: 150px;
+     color: gold;
-    background: linear-gradient(to bottom, #000, #333);
+     font-weight: bold;
-    border-radius: 5px;
+     margin: 10px 0;
-    border: 2px solid #555;
-    position: relative;
-     display: flex;
-     justify-content: center;
-     align-items: center;
 }
-.weapon-item-image {
+.item-description {
-     width: 90%;
+     font-size: 17px;
-     height: auto;
+     width: 100%;
-    z-index: 2;
 }
-.weapon-item-highlight {
+.item-details table {
-    position: absolute;
-    bottom: 0;
-    left: 0;
      width: 100%;
-     height: 10px;
+     background: #222; /* Darker background for the table */
-     background-color: #ffb500;
+    color: white;
+    margin-top: 20px;
+    border-collapse: collapse;
+}
+.item-details th, .item-details td {
+    padding: 12px 50px; /* Increased left and right padding */
+    border-bottom: 1px solid #444; /* Subtle borders for each row */
+}
+.item-details th {
+     background: #333; /* Dark header background */
+    font-size: 16px;
+    text-align: center;
+    width: 30%;
+}
+.item-details td {
+    text-align: left;
+    font-size: 14px;
+    width: 70%;
 }
+/* 基本样式适用于桌面版 */
+/* 响应式调整用于移动设备 */
+@media screen and (max-width: 768px) {
+    .item-container {
+        width: 100%; /* 使用全屏宽度 */
+    }
+    .item-header {
+        flex-direction: column; /* 项目垂直排列 */
+        align-items: center; /* 居中对齐 */
+    }
+    .item-image img {
+        width: 120px; /* 减小图片尺寸 */
+        height: 120px;
+    }
+    .item-info {
+        margin-left: 0;
+        text-align: center; /* 文本居中 */
+    }
+    .item-details th, .item-details td {
+        padding: 8px; /* 减小内边距 */
+    }
+    .item-details th {
+        font-size: 14px; /* 减小字体大小 */
+    }
-}}
+    .item-details td {
+        font-size: 12px;
+    }
+    .item-rarity {
+        display: flex;
+        justify-content: center !important;
+    }
+}
+}}
+</includeonly><noinclude>
 {{设定参数
-|驱动名称=深海访客
+|驱动名称日服=Deep Sea Visitor
-}}{{驱动图鉴/立绘}}
+|驱动名称国服=深海访客
+|属性=强攻,电
+|稀有度=S
+|一句话介绍=特制的大功率变温型音擎，兼具极强的制冷能力与输出功率，是艾莲惯用的音擎款式。
+|高级属性=暴击率
+|音擎效果=对于[]角色，能够触发以下效果
+|技能名=诸洋之王
+|技能名文本=攻击增加20% ，对敌人施加冰冻后，暴击率增加27%，持续6秒。
+}}{{驱动图鉴/基本信息}}