首页普适优化

klp-ui/src/components/HomeModules/QuickAccessGroup.vue

@@ -24,8 +24,8 @@
         <span class="debug-value">{{ mergedItemsText }}</span>
       </div>
     </div> -->
-    <el-row :gutter="10" class="panel-group">
+    <el-row :gutter="8" class="panel-group">
-      <el-col :xs="24" :sm="12" :md="12" :lg="12" class="card-panel-col" v-for="item in homeItems" :key="item.key">
+      <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="card-panel-col" v-for="item in homeItems" :key="item.key">
         <div class="card-panel" :class="{ 'is-add': item.isAdd }" @click="handleCardClick(item)">
           <template v-if="item.isAdd">
             <div class="card-panel-add">
@@ -52,7 +52,7 @@
       </el-col>
     </el-row>
 
-    <el-dialog title="配置快捷入口" :visible.sync="configVisible" width="1120px" top="5vh" custom-class="quick-access-dialog">
+    <el-dialog title="配置快捷入口" :visible.sync="configVisible" width="1120px" top="5vh" custom-class="quick-access-dialog" append-to-body>
       <div class="quick-access-config-bar">
         <el-form inline size="mini">
           <el-form-item label="用户">
@@ -1185,7 +1185,7 @@ export default {
 
 <style lang="scss" scoped>
 .quick-access {
-  margin-top: 18px;
+  margin-top: 0;
 }
 
 .quick-access-debug-bar {
@@ -1395,11 +1395,11 @@ export default {
 
 .panel-group {
   .card-panel-col {
-    margin-bottom: 32px;
+    margin-bottom: 8px;
   }
 
   .card-panel {
-    height: 108px;
+    height: 72px;
     cursor: pointer;
     font-size: 12px;
     position: relative;
@@ -1408,75 +1408,78 @@ export default {
     align-items: center;
     color: #666;
     background: #fff;
-    border: 1px solid rgba(0, 0, 0, 0.06);
+    border: 1px solid #ebeef5;
     border-radius: 10px;
-    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
+    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
     transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
 
     &:hover {
-      transform: translateY(-3px);
+      transform: translateY(-1px);
-      border-color: rgba(64, 158, 255, 0.35);
+      border-color: rgba(64, 158, 255, 0.28);
-      box-shadow: 0 12px 34px rgba(0, 0, 0, 0.1);
+      box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
 
       .card-panel-icon-wrapper {
-        color: #fff;
+        border-color: rgba(64, 158, 255, 0.18);
-        background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
+        background: linear-gradient(135deg, rgba(64, 158, 255, 0.14) 0%, rgba(64, 158, 255, 0.08) 100%);
-        box-shadow: 0 10px 18px rgba(64, 158, 255, 0.25);
       }
     }
 
     &.is-add {
       border-style: dashed;
-      background: #fafafa;
+      background: linear-gradient(180deg, #fbfcfe 0%, #f7f9fc 100%);
       justify-content: center;
     }
 
     &.is-add:hover {
       border-color: rgba(64, 158, 255, 0.5);
-      background: rgba(64, 158, 255, 0.04);
+      background: rgba(64, 158, 255, 0.03);
 
       .card-panel-add-icon {
-        background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
+        border-color: rgba(64, 158, 255, 0.18);
-        color: #fff;
+        background: linear-gradient(135deg, rgba(64, 158, 255, 0.14) 0%, rgba(64, 158, 255, 0.08) 100%);
-        box-shadow: 0 10px 18px rgba(64, 158, 255, 0.25);
       }
     }
 
     .card-panel-icon-wrapper {
       flex: 0 0 auto;
-      margin: 0 14px 0 14px;
+      width: 34px;
-      padding: 16px;
+      height: 34px;
+      margin: 0 10px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
       transition: all 0.18s ease;
-      border-radius: 10px;
+      border-radius: 8px;
       color: #409eff;
-      background: linear-gradient(135deg, rgba(64, 158, 255, 0.18) 0%, rgba(64, 158, 255, 0.08) 100%);
+      border: 1px solid rgba(64, 158, 255, 0.12);
-      box-shadow: inset 0 0 0 1px rgba(64, 158, 255, 0.1);
+      background: linear-gradient(135deg, rgba(64, 158, 255, 0.12) 0%, rgba(64, 158, 255, 0.05) 100%);
     }
 
     .card-panel-icon {
-      font-size: 34px;
+      font-size: 16px;
     }
 
     .card-panel-description {
       flex: 1;
       min-width: 0;
-      font-weight: 600;
+      font-weight: 500;
-      margin: 0 18px 0 0;
+      margin: 0 10px 0 0;
 
       .card-panel-text {
-        line-height: 20px;
+        line-height: 17px;
         color: rgba(0, 0, 0, 0.75);
-        font-size: 16px;
+        font-size: 13px;
-        margin-bottom: 6px;
+        margin-bottom: 1px;
+        font-weight: 600;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
       }
 
       .card-panel-subtext {
-        font-size: 12px;
+        font-size: 10px;
-        color: rgba(0, 0, 0, 0.45);
+        color: #909399;
-        line-height: 16px;
+        line-height: 14px;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -1492,40 +1495,41 @@ export default {
 
     .card-panel-add-icon {
       flex: 0 0 auto;
-      width: 56px;
+      width: 34px;
-      height: 56px;
+      height: 34px;
-      margin: 0 14px 0 14px;
+      margin: 0 10px;
-      border-radius: 12px;
+      border-radius: 8px;
       display: flex;
       align-items: center;
       justify-content: center;
-      font-size: 26px;
+      font-size: 16px;
       color: #409eff;
-      background: rgba(64, 158, 255, 0.12);
+      border: 1px solid rgba(64, 158, 255, 0.12);
+      background: linear-gradient(135deg, rgba(64, 158, 255, 0.12) 0%, rgba(64, 158, 255, 0.05) 100%);
       transition: all 0.18s ease;
-      box-shadow: inset 0 0 0 1px rgba(64, 158, 255, 0.1);
     }
 
     .card-panel-add-text {
       flex: 1;
       min-width: 0;
-      margin: 0 18px 0 0;
+      margin: 0 10px 0 0;
-      font-weight: 600;
+      font-weight: 500;
 
       .card-panel-text {
-        line-height: 20px;
+        line-height: 17px;
         color: rgba(0, 0, 0, 0.75);
-        font-size: 16px;
+        font-size: 13px;
-        margin-bottom: 6px;
+        margin-bottom: 1px;
+        font-weight: 600;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
       }
 
       .card-panel-subtext {
-        font-size: 12px;
+        font-size: 10px;
-        color: rgba(0, 0, 0, 0.45);
+        color: #909399;
-        line-height: 16px;
+        line-height: 14px;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -1555,25 +1559,32 @@ export default {
   .panel-group {
     .card-panel {
       .card-panel-icon-wrapper {
-        margin-right: 10px;
+        width: 32px;
-        padding: 14px;
+        height: 32px;
       }
 
       .card-panel-icon {
-        font-size: 30px;
+        font-size: 15px;
       }
 
       .card-panel-description {
-        margin-right: 12px;
-
         .card-panel-text {
-          font-size: 15px;
+          font-size: 12px;
         }
       }
     }
   }
 }
 
+@media screen and (min-width: 1200px) {
+  .panel-group {
+    .card-panel-col {
+      flex: 0 0 20%;
+      max-width: 20%;
+    }
+  }
+}
+
 @media screen and (max-width: 768px) {
   .quick-access-config-body {
     flex-direction: column;
@@ -1587,26 +1598,48 @@ export default {
 
   .panel-group {
     .card-panel {
-      height: 92px;
+      height: 68px;
 
       .card-panel-icon-wrapper {
-        padding: 12px;
+        margin: 0 8px;
+        width: 30px;
+        height: 30px;
       }
 
       .card-panel-icon {
-        font-size: 24px;
+        font-size: 14px;
       }
 
       .card-panel-description {
-        margin-right: 10px;
+        margin-right: 8px;
 
         .card-panel-text {
-          font-size: 14px;
+          font-size: 12px;
-          margin-bottom: 6px;
+          margin-bottom: 1px;
         }
 
         .card-panel-subtext {
+          font-size: 10px;
+        }
+      }
+
+      .card-panel-add-icon {
+        width: 30px;
+        height: 30px;
+        margin: 0 8px;
+        font-size: 14px;
+      }
+
+      .card-panel-add-text {
+        margin-right: 8px;
+
+        .card-panel-text {
           font-size: 12px;
+          margin-bottom: 1px;
+        }
+
+        .card-panel-subtext {
+          font-size: 10px;
         }
       }
     }

klp-ui/src/views/index.vue

@@ -1,51 +1,83 @@
 <template>
   <div class="dashboard-editor-container">
     <img src="http://kelunpuzhonggong.com/upload/img/20250427091033.jpg" alt="">
-    
+    <div class="home-workspace">
-    <div class="aboutus">
+      <div class="workspace-shell">
-      <el-row :gutter="30">
+        <el-row :gutter="20" class="workspace-grid workspace-grid--top">
-        <!-- 左栏 -->
+          <el-col :xs="24" :sm="24" :md="8" :lg="7" :xl="6">
-        <el-col :span="12" :xs="24">
+            <div class="workspace-card summary-card">
-           <div class="aboutus-title">
+              <div class="module-title">
-            <h2>关于我们</h2>
+                <h2>关于我们</h2>
-            <p>ABOUT US</p>
+                <p>ABOUT US</p>
-          </div>
+              </div>
-          <div class="aboutus-left">
+              <div class="aboutus-left">
-            <p class="aboutus-desc">
+                <p class="aboutus-lead">
-              嘉祥科伦普重工有限公司是山东省重点工程项目，是济宁市工程之一，也是科伦普产品结构调整重要的工程项目。工程采用了外方技术总负责、关键设备整体引进、点采集成、国内技术总成、自主创新、单体设备引进等多种建设方案，保证了技术先进和人才的培养，确保工程投产后达产达效。
+                  嘉祥科伦普重工有限公司是山东省重点工程项目，也是科伦普产品结构调整的重要工程项目，聚焦高铁装备、模具制造和涂镀新材料研发。
-            </p>
+                </p>
-            <p class="aboutus-desc">
+                <div class="aboutus-metrics">
-              科伦普冷轧重工有限公司是设计年产量150万吨，能向广大用户提供热轧酸洗、热轧镀锌、冷硬、罩式退火、冷轧镀锌、铝锌合金、锌铝合金、锌铝镁、镀铬等各大类产品。产品覆盖东北、华北、华东、华南等地区。
+                  <div class="metric-item">
-            </p>
+                    <span class="metric-label">成立时间</span>
-          </div>
+                    <span class="metric-value">2017年8月</span>
+                  </div>
+                  <div class="metric-item">
+                    <span class="metric-label">注册资金</span>
+                    <span class="metric-value">33100万元</span>
+                  </div>
+                  <div class="metric-item">
+                    <span class="metric-label">设计年产能</span>
+                    <span class="metric-value">150万吨</span>
+                  </div>
+                  <div class="metric-item">
+                    <span class="metric-label">覆盖区域</span>
+                    <span class="metric-value">东北 华北 华东 华南等</span>
+                  </div>
+                </div>
+                <p class="aboutus-desc">
+                  工程采用外方技术总负责、关键设备整体引进、国内技术总成、自主创新等多种建设方案，既保证技术先进性，也兼顾人才培养与项目达产达效。
+                </p>
+                <p class="aboutus-desc">
+                  公司设计年产量150万吨，产品覆盖热轧酸洗、热轧镀锌、冷硬、罩式退火、冷轧镀锌、铝锌合金、锌铝合金、锌铝镁、镀铬等多个大类。
+                </p>
+              </div>
+            </div>
+          </el-col>
 
-          <quick-access-group />
+          <el-col :xs="24" :sm="24" :md="16" :lg="17" :xl="18">
-        </el-col>
+            <div class="workspace-card detail-card">
+              <div class="module-title">
+                <h2>企业介绍</h2>
+                <p>COMPANY PROFILE</p>
+              </div>
+              <div class="aboutus-right">
+                <div class="detail-section">
+                  <h3>企业概况</h3>
+                  <p class="aboutus-detail">
+                    嘉祥科伦普重工有限公司成立于2017年8月，注册资金33100万元，主要经营高铁设备、配件制造与销售，模具制造与销售，新材料技术研发，高性能有色金属及合金材料销售，机械零件、零部件加工与销售，金属材料制造与销售，锌铝镁新材料等。目前公司拥有10余项具有自主知识产权的发明专利技术，综合技术水平达国内领先，2024年公司主导产品国内市场占有率约占85%。2024年总资产5.98亿元，净资产4.49亿元，收入3.95亿元，公司现有员工238人，研究与试验发展人员57人，其中专职研究与试验发展人员52人，外聘专家5人。
+                  </p>
+                </div>
+                <div class="detail-section">
+                  <h3>项目建设</h3>
+                  <p class="aboutus-detail">
+                    2024年公司新建科伦普合金新材料研发项目，占地290亩，采用国内先进的镀层核心技术和热处理工艺，专业生产锌铝镁板材和镀铬板材。致力于打造国内工艺链条最完善、产品型号最丰富的涂镀新材料生产企业。全部投产后可实现新增销售收入80亿元，利税4.7亿元，带动就业约500人。项目主要生产的冷轧板、锌铝镁涂层板、镀铬涂层板、镀锡涂层板等产品，涵盖0.08MM-6.0MM区间60多种产品，是国内单个企业产品种类最多的项目。产品因其防锈、耐氧化、耐腐蚀、高电导、高稳定的优秀特性，广泛应用于建筑结构件、汽车制造、轻工家电、食品包装、医疗器械、电子通讯、航空航天领域。
+                  </p>
+                </div>
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
 
-        <!-- 右栏 -->
+      <div class="workspace-card quick-card quick-card--full">
-        <el-col :span="12" :xs="24">
+        <div class="module-title module-title--inline">
-          <img src="http://kelunpuzhonggong.com/upload/img/20251015103934.jpg" alt="">
+          <div>
-          <!-- <div class="aboutus-right">
+            <h2>快捷入口</h2>
-            <p class="aboutus-detail">
+            <p>WORKSPACE</p>
-              嘉祥科伦普重工有限公司成立于2017年8月，注册资金33100万元，主要经营高铁设备、配件制造与销售，模具制造与销售，新材料技术研发，高性能有色金属及合金材料销售，机械零件、零部件加工与销售，金属材料制造与销售，锌铝镁新材料等。目前公司拥有10余项具有自主知识产权的发明专利技术，综合技术水平达国内领先，2024年公司主导产品国内市场占有率约占85%。2024年总资产5.98亿元，净资产4.49亿元，收入3.95亿元，公司现有员工238人，研究与试验发展人员57人，其中专职研究与试验发展人员52人，外聘专家5人。
+          </div>
-            </p>
+          <span class="module-title-tip">支持按权限自动展示，并可配置本人常用入口</span>
-            <p class="aboutus-detail">
+        </div>
-              2024年公司新建科伦普合金新材料研发项目，占地290亩，采用国内先进的镀层核心技术和热处理工艺，专业生产锌铝镁板材和镀铬板材。致力于打造国内工艺链条最完善、产品型号最丰富的涂镀新材料生产企业。全部投产后可实现新增销售收入80亿元，利税4.7亿元，带动就业约500人。项目主要生产的冷轧板、锌铝镁涂层板、镀铬涂层板、镀锡涂层板等产品，涵盖0.08MM-6.0MM区间60多种产品，是国内单个企业产品种类最多的项目。产品因其防锈、耐氧化、耐腐蚀、高电导、高稳定的优秀特性，广泛应用于建筑结构件、汽车制造、轻工家电、食品包装、医疗器械、电子通讯、航空航天领域。
+        <quick-access-group />
-            </p>
+      </div>
-          </div> -->
-        </el-col>
-      </el-row>
     </div>
-
-    <!-- <AllApplications />    
-    <el-row :gutter="10">
-      <el-col :span="18">
-        <el-empty description="办公模块定制开发中"></el-empty>
-      </el-col>
-      <el-col :span="6">
-        <mini-calendar />
-      </el-col>
-    </el-row> -->
   </div>
 </template>
 
@@ -67,7 +99,7 @@ export default {
 
 <style lang="scss" scoped>
 .dashboard-editor-container {
-  background-color: #fff;
+  background: #f5f7fa;
   position: relative;
 
   img {
@@ -82,111 +114,270 @@ export default {
   }
 }
 
-// 关于我们区域样式
+.home-workspace {
-.aboutus {
+  padding: 0 60px 32px;
-  padding: 20px;
+}
-  max-width: 1200px;
-  margin: 0 auto;
 
-  // 标题
+.workspace-shell {
-  .aboutus-title {
+  width: 100%;
-    margin-bottom: 25px;
+  max-width: none;
-    h2 {
+  margin: 0;
-      font-size: 28px;
+  margin-top: -36px;
-      color: #333;
+  position: relative;
-      margin: 0;
+}
-    }
+
-    p {
+.workspace-grid--top {
-      font-size: 14px;
+  display: flex;
-      color: #999;
+  flex-wrap: wrap;
-      margin: 5px 0 0 0;
+  align-items: stretch;
-    }
+  margin-bottom: 20px;
+}
+
+.workspace-grid--top > .el-col {
+  display: flex;
+  margin-bottom: 20px;
+}
+
+.workspace-card {
+  width: 100%;
+  height: 100%;
+  padding: 28px;
+  background: #fff;
+  border: 1px solid rgba(15, 23, 42, 0.05);
+  border-radius: 18px;
+  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.06);
+}
+
+.module-title {
+  margin-bottom: 20px;
+
+  h2 {
+    margin: 0;
+    font-size: 28px;
+    line-height: 36px;
+    font-weight: 600;
+    color: #303133;
   }
 
-  // 左栏
+  p {
-  .aboutus-left {
+    margin: 6px 0 0;
-    text-indent: 2em;
+    font-size: 13px;
-    line-height: 2em;
+    line-height: 20px;
-    font-size: 14px;
+    color: #909399;
-
+    letter-spacing: 1px;
-    .aboutus-desc {
-      color: #666;
-      line-height: 1.8;
-      margin-bottom: 18px;
-    }
-
-    // 特色模块
-    .aboutus-features {
-      display: flex;
-      justify-content: space-between;
-      margin: 30px 0;
-
-      .feature-item {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-
-        .feature-icon {
-          width: 42px;
-          height: 42px;
-          border-radius: 50%;
-          background-color: #9370db; // 截图紫色图标背景
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          margin-bottom: 10px;
-
-          .icon {
-            color: #fff;
-            font-size: 22px;
-          }
-        }
-
-        .feature-text {
-          font-size: 14px;
-          color: #333;
-        }
-      }
-    }
-
-    // 按钮
-    .read-more-btn {
-      border: 1px solid #333;
-      background: transparent;
-      padding: 8px 22px;
-      font-size: 14px;
-      cursor: pointer;
-      transition: background 0.3s;
-
-      &:hover {
-        background-color: #f5f5f5;
-      }
-    }
-  }
-
-  // 右栏
-  .aboutus-right {
-    .aboutus-detail {
-      font-size: 14px;
-      color: #666;
-      line-height: 1.8;
-      margin-bottom: 18px;
-    }
   }
 }
 
-// 响应式适配
+.module-title--inline {
-@media (max-width: 1024px) {
+  display: flex;
-  .dashboard-editor-container {
+  align-items: flex-start;
-    .aboutus {
+  justify-content: space-between;
-      padding: 20px 25px;
+  gap: 16px;
+}
 
-      .el-row {
+.module-title-tip {
-        .el-col:first-child {
+  flex: 0 0 auto;
-          margin-bottom: 30px;
+  font-size: 13px;
-        }
+  line-height: 20px;
-      }
+  color: #909399;
-    }
+  padding-top: 8px;
+}
+
+.aboutus-left {
+  font-size: 14px;
+  line-height: 26px;
+}
+
+.aboutus-lead {
+  margin: 0;
+  color: #303133;
+  font-size: 15px;
+  line-height: 28px;
+  font-weight: 500;
+}
+
+.aboutus-metrics {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+  margin: 18px 0;
+}
+
+.metric-item {
+  min-width: 0;
+  padding: 12px 14px;
+  border-radius: 12px;
+  background: linear-gradient(180deg, #fbfcfe 0%, #f7f9fc 100%);
+  border: 1px solid #eef2f7;
+}
+
+.metric-label {
+  display: block;
+  margin-bottom: 6px;
+  font-size: 12px;
+  line-height: 18px;
+  color: #909399;
+}
+
+.metric-value {
+  display: block;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.aboutus-desc,
+.aboutus-detail {
+  margin: 0;
+  color: #606266;
+  font-size: 14px;
+  line-height: 26px;
+}
+
+.aboutus-desc + .aboutus-desc,
+.aboutus-detail + .aboutus-detail {
+  margin-top: 16px;
+}
+
+.aboutus-right {
+  display: block;
+}
+
+.quick-card {
+  margin-top: 20px;
+  padding: 20px 20px 16px;
+}
+
+.quick-card--full {
+  width: 100%;
+}
+
+.quick-card .module-title {
+  margin-bottom: 14px;
+}
+
+.summary-card {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.detail-card {
+  margin-top: 0;
+}
+
+.detail-section + .detail-section {
+  margin-top: 24px;
+  padding-top: 24px;
+  border-top: 1px solid #ebeef5;
+}
+
+.detail-section h3 {
+  margin: 0 0 10px;
+  font-size: 18px;
+  line-height: 26px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.detail-section .aboutus-detail {
+  font-size: 15px;
+  line-height: 28px;
+  color: #5f6b7a;
+}
+
+@media (max-width: 1024px) {
+  .home-workspace {
+    padding: 0 36px 28px;
+  }
+
+  .workspace-shell {
+    margin-top: -20px;
+  }
+
+  .workspace-card {
+    padding: 20px;
+  }
+
+  .quick-card {
+    padding: 18px 18px 14px;
+  }
+
+  .workspace-grid--top > .el-col {
+    margin-bottom: 16px;
+  }
+
+  .module-title h2 {
+    font-size: 24px;
+    line-height: 32px;
+  }
+
+  .aboutus-metrics {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 768px) {
+  .home-workspace {
+    padding: 0 28px 24px;
+  }
+
+  .workspace-shell {
+    margin-top: 12px;
+  }
+
+  .workspace-card {
+    padding: 18px 16px;
+    border-radius: 14px;
+  }
+
+  .quick-card {
+    padding: 16px 14px 12px;
+  }
+
+  .workspace-grid--top {
+    display: block;
+    margin-bottom: 16px;
+  }
+
+  .workspace-grid--top > .el-col {
+    display: block;
+    margin-bottom: 12px;
+  }
+
+  .module-title--inline {
+    display: block;
+  }
+
+  .module-title-tip {
+    display: block;
+    margin-top: 8px;
+    padding-top: 0;
+  }
+
+  .detail-card {
+    margin-top: 0;
+  }
+
+  .detail-section + .detail-section {
+    margin-top: 18px;
+    padding-top: 18px;
+  }
+
+  .quick-card {
+    margin-top: 12px;
+  }
+
+
+  .aboutus-lead {
+    font-size: 14px;
+    line-height: 26px;
+  }
+
+  .detail-section .aboutus-detail {
+    font-size: 14px;
+    line-height: 26px;
   }
 }
 </style>