diff --git a/app/components/AppHead/index.vue b/app/components/AppHead/index.vue
index 7ca024e..3096f57 100644
--- a/app/components/AppHead/index.vue
+++ b/app/components/AppHead/index.vue
@@ -32,30 +32,10 @@
             <NuxtLink to="/solution">解决方案</NuxtLink>
           </li>
           <li :class="{ active: isActive('/new') }"><NuxtLink to="/new">新闻资讯</NuxtLink></li>
-          <li
-            :class="{ active: isActive('/rule/legal') }"
-            @mouseenter="isRuleHovered = true"
-            @mouseleave="isRuleHovered = false"
-          >
-            <NuxtLink to="">政策法规</NuxtLink>
-            <span v-if="isRuleHovered">
-              <NuxtLink
-                v-for="(item, index) in RuleList"
-                :key="index"
-                v-motion
-                :to="item.path"
-                :initial="{ opacity: 0, y: -10 }"
-                :enter="{ opacity: 1, y: 0, transition: { delay: index * 50, duration: 300 } }"
-                :leave="{ opacity: 0, y: -10, transition: { duration: 200 } }"
-              >
-                {{item.name}}
-              </NuxtLink>
-            </span>
-          </li>
-          <li :class="{ active: isActive('/evaluation') }"><NuxtLink to="/evaluation">安全评价</NuxtLink></li>
+          <li :class="{ active: isActive('/rule') }"><NuxtLink to="/rule">政策法规</NuxtLink></li>
+          <li :class="{ active: isActive('/service') }"><NuxtLink to="/service">业务与服务</NuxtLink></li>
+          <li :class="{ active: isActive('/public') }"><NuxtLink to="/public">网上公开</NuxtLink></li>
           <li :class="{ active: isActive('/case') }"><NuxtLink to="/case">合作案例</NuxtLink></li>
-          <!--          <li :class="{ active: isActive('/service') }"><NuxtLink to="/service">服务流程</NuxtLink></li>-->
-          <!--          <li :class="{ active: isActive('/about') }"><NuxtLink to="/about">关于秦安</NuxtLink></li>-->
           <li
             :class="{ active: isActive('/product') }"
             @mouseenter="isAboutHovered = true"
diff --git a/app/pages/evaluation/index.vue b/app/pages/evaluation/index.vue
deleted file mode 100644
index 56c34bf..0000000
--- a/app/pages/evaluation/index.vue
+++ /dev/null
@@ -1,203 +0,0 @@
-
-<template>
-  <div class="container">
-    <AppHead/>
-    <div class="banner">
-      <div class="banner_main">
-        <h2>安全评价</h2>
-        <p>安全第一 预防为主 综合治理</p>
-      </div>
-    </div>
-    <div class="new_container">
-      <div class="top">
-        <div class="wrap">
-          <div class="list active">全部</div>
-          <div class="list">安全要闻</div>
-          <div class="list">政府发文</div>
-        </div>
-      </div>
-      <div class="new_main">
-        <NuxtLink to="/new/details">
-          <div class="wrap" >
-            <div class="item">
-              <div class="img">
-                <img src="@/assets/images/img2.png" alt=""/>
-              </div>
-              <div class="info">
-                <div class="title">喜报·我司荣获2025“数据要素X”大赛河北分赛三等奖</div>
-                <div class="text">4月10日，2025年“数据要素X”大赛启动仪式在雄安新区成功举办。 河北秦安安全科技股份有限公司申报的“危化智融-多模态智能风险管控决策平台”项目，针对危化行业长期存在的“数据割裂、响应延迟、决策偏差”三大核心痛点，构建了多模型融合的安全生产决策体系。</div>
-                <div class="time"><img src="@/assets/images/time.png" alt="河北秦安安全科技股份有限公司"/>   <span>2026-10-19</span> </div>
-              </div>
-            </div>
-          </div>
-        </NuxtLink>
-        <NuxtLink to="/new/details">
-          <div class="wrap">
-            <div class="item">
-              <div class="img">
-                <img src="@/assets/images/img2.png" alt=""/>
-              </div>
-              <div class="info">
-                <div class="title">喜报·我司荣获2025“数据要素X”大赛河北分赛三等奖</div>
-                <div class="text">4月10日，2025年“数据要素X”大赛启动仪式在雄安新区成功举办。 河北秦安安全科技股份有限公司申报的“危化智融-多模态智能风险管控决策平台”项目，针对危化行业长期存在的“数据割裂、响应延迟、决策偏差”三大核心痛点，构建了多模型融合的安全生产决策体系。</div>
-                <div class="time"><img src="@/assets/images/time.png" alt="河北秦安安全科技股份有限公司"/>   <span>2026-10-19</span> </div>
-              </div>
-            </div>
-          </div>
-        </NuxtLink>
-        <NuxtLink to="/new/details">
-          <div class="wrap">
-            <div class="item">
-              <div class="img">
-                <img src="@/assets/images/img2.png" alt=""/>
-              </div>
-              <div class="info">
-                <div class="title">喜报·我司荣获2025“数据要素X”大赛河北分赛三等奖</div>
-                <div class="text">4月10日，2025年“数据要素X”大赛启动仪式在雄安新区成功举办。 河北秦安安全科技股份有限公司申报的“危化智融-多模态智能风险管控决策平台”项目，针对危化行业长期存在的“数据割裂、响应延迟、决策偏差”三大核心痛点，构建了多模型融合的安全生产决策体系。</div>
-                <div class="time"><img src="@/assets/images/time.png" alt="河北秦安安全科技股份有限公司"/>   <span>2026-10-19</span> </div>
-              </div>
-            </div>
-          </div>
-        </NuxtLink>
-        <NuxtLink to="/new/details">
-          <div class="wrap">
-            <div class="item">
-              <div class="img">
-                <img src="@/assets/images/img2.png" alt=""/>
-              </div>
-
-              <div class="info">
-                <div class="title">喜报·我司荣获2025“数据要素X”大赛河北分赛三等奖</div>
-                <div class="text">4月10日，2025年“数据要素X”大赛启动仪式在雄安新区成功举办。 河北秦安安全科技股份有限公司申报的“危化智融-多模态智能风险管控决策平台”项目，针对危化行业长期存在的“数据割裂、响应延迟、决策偏差”三大核心痛点，构建了多模型融合的安全生产决策体系。</div>
-                <div class="time"><img src="@/assets/images/time.png" alt="河北秦安安全科技股份有限公司"/>   <span>2026-10-19</span> </div>
-              </div>
-            </div>
-          </div>
-        </NuxtLink>
-      </div>
-    </div>
-
-    <AppFoot/>
-    <right/>
-  </div>
-</template>
-<script setup lang="ts">
-
-
-</script>
-
-<style scoped lang="scss">
-.container {
-  background: #f6f8fa;
-
-  .banner {
-    width: 100%;
-    height: 494px;
-    background: url("@/assets/images/newbanner.png") no-repeat top center;
-    .banner_main {
-      width: 1400px;
-      margin: 0 auto;
-      padding-top: 230px;
-      h2 {
-        font-size: 60px;
-        color: #ffffff;
-        margin: 0;
-        padding: 0;
-      }
-      p {
-        margin: 0;
-        color: #ffffff;
-      }
-    }
-  }
-  .new_container {
-    width: 100%;
-
-    .top {
-      width: 100%;
-      height: 60px;
-      background: #ffffff;
-
-      .wrap {
-        width: 1400px;
-        margin: 0 auto;
-        display: flex;
-
-        .list {
-          font-size: 16px;
-          line-height: 60px;
-          cursor: pointer;
-          position: relative;
-          margin-right: 40px;
-
-          &.active {
-            color: #006aff;
-            &:before {
-              opacity: 1;
-            }
-          }
-
-          &:before {
-            content: "";
-            position: absolute;
-            left: 0;
-            bottom: 0;
-            border-bottom: 3px solid #006aff;
-            width: 100%;
-            opacity: 0;
-          }
-          &:hover {
-            color: #006aff;
-            &:before {
-              opacity: 1;
-            }
-          }
-        }
-      }
-    }
-    .new_main{
-      width: 1400px;
-      margin: 20px auto;
-      a{
-        text-decoration: none;
-      }
-      .wrap{
-        width: 100%;
-        background: #ffffff;
-        padding: 20px;
-        border-radius: 4px;
-        margin-bottom: 20px;
-        .item{
-          display: flex;
-          .info{
-            padding-left: 20px;
-            .title{
-              font-size: 18px;
-              color: #222222;
-            }
-            .text{
-              font-size: 14px;
-              color: #696969;
-              margin-top: 20px;
-            }
-            .time{
-              color: #999999;
-              margin-top: 10px;
-              display: flex;
-              align-items: center;
-              span{
-                padding-left: 5px;
-              }
-            }
-          }
-        }
-        &:hover{
-          box-shadow: 0 8px 30px rgba(45, 104, 255, 0.15)
-        }
-      }
-    }
-  }
-}
-
-
-</style>
diff --git a/app/pages/new/details.vue b/app/pages/new/details.vue
index e2b4667..11fe29e 100644
--- a/app/pages/new/details.vue
+++ b/app/pages/new/details.vue
@@ -8,13 +8,6 @@
       </div>
     </div>
     <div class="new_container">
-      <div class="top">
-        <div class="wrap">
-          <div class="list active">全部</div>
-          <div class="list">安全要闻</div>
-          <div class="list">政府发文</div>
-        </div>
-      </div>
       <div class="new_main">
         <div class="title">
           <h2>安全生产事故 | 900余人被疏散！广西一糖厂产生大量刺激性烟雾</h2>
@@ -61,12 +54,12 @@
   background: #f6f8fa;
 .banner {
   width: 100%;
-  height: 494px;
+  height: 400px;
   background: url("@/assets/images/newbanner.png") no-repeat top center;
   .banner_main {
     width: 1400px;
     margin: 0 auto;
-    padding-top: 230px;
+    padding-top: 180px;
     h2 {
       font-size: 60px;
       color: #ffffff;
diff --git a/app/pages/public/index.vue b/app/pages/public/index.vue
new file mode 100644
index 0000000..0267636
--- /dev/null
+++ b/app/pages/public/index.vue
@@ -0,0 +1,105 @@
+
+<template>
+  <div class="container">
+    <AppHead/>
+    <div class="banner">
+      <div class="banner_main">
+        <h2>网上公开</h2>
+        <p>安全第一 预防为主 综合治理</p>
+      </div>
+    </div>
+    <div class="new_container">
+      <div class="left">
+        <div class="top">网上公开</div>
+        <div class="main">
+          <div  v-for="(item, index) in publicItems"
+               :key="index"
+               class="list"
+               :class="{ active: activeIndex === index }"
+               @click="activeIndex = index">{{item}}</div>
+        </div>
+      </div>
+      <div class="right_main">
+        <div class=""></div>
+      </div>
+    </div>
+    <AppFoot/>
+    <right/>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref } from "vue";
+
+const publicItems=["河北秦安安全科技股份有限公司", "秦皇岛市秦安职业卫生检测检", "河北联安众企业管理咨询有限公司", "信息化","公开承诺书","安全生产检测","职业卫生","收费标准","交通运输企业安全生产标准化"];
+const activeIndex = ref(0);
+
+
+</script>
+
+<style scoped lang="scss">
+.container {
+  background: #f6f8fa;
+
+  .banner {
+    width: 100%;
+    height: 400px;
+    background: url("@/assets/images/newbanner.png") no-repeat top center;
+    .banner_main {
+      width: 1400px;
+      margin: 0 auto;
+      padding-top: 180px;
+      h2 {
+        font-size: 60px;
+        color: #ffffff;
+        margin: 0;
+        padding: 0;
+      }
+      p {
+        margin: 0;
+        color: #ffffff;
+      }
+    }
+  }
+  .new_container {
+    width: 1400px;
+    margin: 20px auto;
+    display: flex;
+    .left{
+      width: 250px;
+      box-sizing: border-box;
+      background: #ffffff;
+      border-radius: 4px;
+      .top{
+        width: 100%;
+        background: #3f79ff;
+        text-align: center;
+        color: #ffffff;
+        line-height: 40px;
+        border-radius: 4px 4px 0 0;
+        font-weight: bold;
+      }
+      .main{
+        .list{
+          border-bottom: 1px solid #eeeeee;
+          padding: 10px 5px;
+          font-size: 14px;
+          &:hover{
+
+          }
+        }
+        &:last-child{
+          border-bottom: none;
+        }
+
+      }
+    }
+    .right_main{
+      flex: 1;
+      margin-left: 20px;
+      background: #ffffff;
+    }
+  }
+}
+
+
+</style>
diff --git a/app/pages/rule/details.vue b/app/pages/rule/details.vue
index a1d5b00..786d28d 100644
--- a/app/pages/rule/details.vue
+++ b/app/pages/rule/details.vue
@@ -1,9 +1,183 @@
-<script setup lang="ts">
-</script>
 <template>
-  <div class="">
-    详情
+  <div class="container">
+    <AppHead/>
+    <div class="banner">
+      <div class="banner_main">
+        <h2>政策法规</h2>
+        <p>安全第一 预防为主 综合治理</p>
+      </div>
+    </div>
+    <div class="new_container">
+      <div class="new_main">
+        <div class="title">
+          <h2>安全生产事故 | 900余人被疏散！广西一糖厂产生大量刺激性烟雾</h2>
+          <div class="time">2024-05-23</div>
+        </div>
+        <div class="main">
+          <p>
+            5月20日19时50分许，广西百色市田东县南华糖业有限公司二糖厂存放的约12吨消毒剂(三氯异氰尿酸)因近期暴雨天气受潮发生反应，产生大量烟雾，散发出刺激性气味。
+          </p>
+          <p>田东县迅速反应，及时处置，保护群众生命财产安全。第一时间组成工作组及时对二糖厂生活区和周边居民共900多人进行疏散，在该县体育馆设置临时安置点，为群众提供矿泉水、口罩、席子、被子等物资。</p>
+          <p>在百色市生态环境、应急、消防等部门的现场指导下，组织田东县应急、消防、生态环境、卫生健康等部门及专家开展现场处置工作。至21日凌晨2时20分许，现场已无烟雾产生，所有三氯异氰尿酸已安全转移，周边区域烟雾均已消散。疏散的群众已全部安全返回。</p>
+          <p>生态环境部门21日2时50分完成现场监测，7个监测点位中背景点厂界东北420米(上风向)氨气浓度为0.47mg/m³，其余点位扣除背景点后氨气均未检出，符合《恶臭污染物排放标准》(GB 14554-93)表1标准限值要求;所有点位氯气均未检出，符合《大气污染物综合排放标准》(GB 16297-1996)表1无组织排放监控限值要求，事故未对周边环境产生不良影响。</p>
+          <p>近期，广西多地遭遇特大暴雨导致多处地段发生内涝暴雨过后仍不能放松警惕防潮、防事故、防次生灾害……这些安全注意事项一起来看↓↓↓危化品储存　　夏季高温、雷雨、台风等极端天气容易对危险化学品安全生产造成不利影响。企业要加强危险化学品储罐、仓库的安全管理，严禁超量储存、违规混存、超高堆放、野蛮装卸等行为。　　有效落实危险化学品仓库防雨、防潮、防雷电措施，特别是受潮易自燃或分解有毒气体的危险化学品，要严格按标准规范入库储存，严禁露天存放，严禁与禁忌物混合储存。　　加强防雷、防静电设施的巡检和维护，按规定定期检测，确保防雷、防静电设施完好有效。</p>
+        </div>
+        <div class="bottom">
+          <div class="item">
+            <div class="previous">上一篇</div>
+            <div class="info">
+              <div class="tit">国务院安委会办公室 应急管理部关于  开展2024年全国“安全生产月”活动的通知</div>
+              <div class="time">2024-05-21</div>
+            </div>
+          </div>
+
+          <div class="item">
+            <div class="previous">下一篇</div>
+            <div class="info">
+              <div class="tit">国务院安委会办公室 应急管理部关于  开展2024年全国“安全生产月”活动的通知</div>
+              <div class="time">2024-05-21</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <AppFoot/>
+    <right/>
   </div>
 </template>
+<script setup lang="ts">
+
+</script>
+
 <style scoped lang="scss">
+.container {
+  background: #f6f8fa;
+  .banner {
+    width: 100%;
+    height: 400px;
+    background: url("@/assets/images/newbanner.png") no-repeat top center;
+    .banner_main {
+      width: 1400px;
+      margin: 0 auto;
+      padding-top: 180px;
+      h2 {
+        font-size: 60px;
+        color: #ffffff;
+        margin: 0;
+        padding: 0;
+      }
+      p {
+        margin: 0;
+        color: #ffffff;
+      }
+    }
+  }
+  .new_container {
+    width: 100%;
+
+    .top {
+      width: 100%;
+      height: 60px;
+      background: #ffffff;
+
+      .wrap {
+        width: 1400px;
+        margin: 0 auto;
+        display: flex;
+
+        .list {
+          font-size: 16px;
+          line-height: 60px;
+          cursor: pointer;
+          position: relative;
+          margin-right: 40px;
+
+          &.active {
+            color: #006aff;
+            &:before {
+              opacity: 1;
+            }
+          }
+
+          &:before {
+            content: "";
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            border-bottom: 3px solid #006aff;
+            width: 100%;
+            opacity: 0;
+          }
+          &:hover {
+            color: #006aff;
+            &:before {
+              opacity: 1;
+            }
+          }
+        }
+      }
+    }
+    .new_main{
+      width: 1400px;
+      margin: 20px auto 20px;
+      background: #ffffff;
+      min-height: 600px;
+      border-radius: 4px;
+      box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
+      padding: 20px 50px;
+      border-top: 3px solid #1d78ff;
+
+      .title{
+        width: 100%;
+        border-bottom: 1px solid #eeeeee;
+        padding-bottom: 20px;
+
+        .time{
+          color: #999999;
+        }
+      }
+      .main{
+        padding: 20px 0;
+        color: #666666;
+
+        p{
+          text-indent: 2rem;
+          line-height: 2;
+          font-size: 16px;
+        }
+        img{
+          margin: 0 auto;
+          max-width: 100%;
+        }
+      }
+      .bottom{
+        width: 100%;
+        .item{
+          padding: 20px;
+          box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
+          margin-bottom: 20px;
+          cursor: pointer;
+          .previous{
+            font-size: 16px;
+            margin-bottom: 20px;
+          }
+          .title{
+            font-size: 16px;
+          }
+          .info{
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+            color: #666666;
+          }
+          &:hover{
+            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+          }
+        }
+      }
+    }
+
+  }
+}
+
 </style>
diff --git a/app/pages/rule/government.vue b/app/pages/rule/government.vue
deleted file mode 100644
index b93d7af..0000000
--- a/app/pages/rule/government.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<script setup lang="ts">
-
-</script>
-
-<template>
-  <div>政府规章</div>
-</template>
-
-
-<style scoped lang="scss">
-
-</style>
diff --git a/app/pages/rule/legal.vue b/app/pages/rule/index.vue
similarity index 90%
rename from app/pages/rule/legal.vue
rename to app/pages/rule/index.vue
index 9b9d7aa..918f247 100644
--- a/app/pages/rule/legal.vue
+++ b/app/pages/rule/index.vue
@@ -11,14 +11,19 @@
     <div class="new_container">
       <div class="top">
         <div class="wrap">
-          <div class="list active">法律法规</div>
-          <div class="list">政府章规</div>
-          <div class="list">规范文件</div>
-          <div class="list">技术标准</div>
+          <div
+            v-for="(item, index) in rulesItems"
+            :key="index"
+            class="list"
+            :class="{ active: activeIndex === index }"
+            @click="activeIndex = index"
+            >
+            {{item}}
+          </div>
         </div>
       </div>
       <div class="new_main">
-        <NuxtLink to="/rule/details">
+        <NuxtLink to="/rule/details" >
           <div class="wrap" >
             <div class="item">
               <div class="info">
@@ -56,6 +61,11 @@
   </div>
 </template>
 <script setup lang="ts">
+import { ref } from "vue";
+
+const rulesItems=["法律法规", "政策规章", "规范文件", "技术标准"];
+const activeIndex = ref(0);
+
 
 
 </script>
@@ -63,7 +73,6 @@
 <style scoped lang="scss">
 .container {
   background: #f6f8fa;
-
   .banner {
     width: 100%;
     height: 494px;
diff --git a/app/pages/rule/specification.vue b/app/pages/rule/specification.vue
deleted file mode 100644
index 898f439..0000000
--- a/app/pages/rule/specification.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script setup lang="ts">
-
-</script>
-
-<template>
-  <div>规范文件</div>
-</template>
-
-<style scoped lang="scss">
-
-</style>
diff --git a/app/pages/rule/technicalStandards.vue b/app/pages/rule/technicalStandards.vue
deleted file mode 100644
index 49641e3..0000000
--- a/app/pages/rule/technicalStandards.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script setup lang="ts">
-
-</script>
-
-<template>
-  <div>技术标准</div>
-</template>
-
-<style scoped lang="scss">
-
-</style>
diff --git a/app/pages/service/index.vue b/app/pages/service/index.vue
new file mode 100644
index 0000000..68fc0b4
--- /dev/null
+++ b/app/pages/service/index.vue
@@ -0,0 +1,166 @@
+
+<template>
+  <div class="container">
+    <AppHead/>
+    <div class="banner">
+      <div class="banner_main">
+        <h2>业务服务</h2>
+        <p>安全第一 预防为主 综合治理</p>
+      </div>
+    </div>
+    <div class="new_container">
+      <div class="top">
+        <div class="wrap">
+          <div
+            v-for="(item, index) in serverItems"
+            :key="index"
+            class="list"
+            :class="{ active: activeIndex === index }"
+            @click="activeIndex = index"
+          >
+            {{item}}
+          </div>
+        </div>
+      </div>
+      <div class="new_main">
+        <div>河北秦安安全科技股份有限公司（原秦皇岛中宇安全评价有限公司）2019年12月26日取得了河北省应急管理厅颁发的《安全评价机构资质证书》，证书编号：APJ-(冀)-001。现有安全评价师35人，其中一级评价师9人，二级评价师10人，三级评价师16人。具有高级专业技术职称的6人，具有中级专业技术职称的5人，注册安全工程师20人。</div>
+
+      </div>
+    </div>
+
+    <AppFoot/>
+    <right/>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref } from "vue";
+
+const serverItems=["安全评价", "安全标准化评南与咨询", "职业卫生检测与评价", "安全生产检测检验","环境卫生检测检验","应急救援预案指导","安全培训","交通培训"];
+const activeIndex = ref(0);
+
+
+</script>
+
+<style scoped lang="scss">
+.container {
+  background: #f6f8fa;
+
+  .banner {
+    width: 100%;
+    height: 400px;
+    background: url("@/assets/images/newbanner.png") no-repeat top center;
+    .banner_main {
+      width: 1400px;
+      margin: 0 auto;
+      padding-top: 180px;
+      h2 {
+        font-size: 60px;
+        color: #ffffff;
+        margin: 0;
+        padding: 0;
+      }
+      p {
+        margin: 0;
+        color: #ffffff;
+      }
+    }
+  }
+  .new_container {
+    width: 100%;
+
+    .top {
+      width: 100%;
+      height: 60px;
+      background: #ffffff;
+
+      .wrap {
+        width: 1400px;
+        margin: 0 auto;
+        display: flex;
+
+        .list {
+          font-size: 16px;
+          line-height: 60px;
+          cursor: pointer;
+          position: relative;
+          margin-right: 40px;
+
+          &.active {
+            color: #006aff;
+            &:before {
+              opacity: 1;
+            }
+          }
+
+          &:before {
+            content: "";
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            border-bottom: 3px solid #006aff;
+            width: 100%;
+            opacity: 0;
+          }
+          &:hover {
+            color: #006aff;
+            &:before {
+              opacity: 1;
+            }
+          }
+        }
+      }
+    }
+    .new_main{
+      width: 1400px;
+      margin: 20px auto;
+      background: #ffffff;
+      padding: 20px;
+      box-sizing: border-box;
+      img{
+        max-width: 1200px;
+        margin: 0 auto;
+
+      }
+      a{
+        text-decoration: none;
+      }
+      .wrap{
+        width: 100%;
+        background: #ffffff;
+        padding: 20px;
+        border-radius: 4px;
+        margin-bottom: 20px;
+        .item{
+          display: flex;
+          .info{
+            padding-left: 20px;
+            .title{
+              font-size: 18px;
+              color: #222222;
+            }
+            .text{
+              font-size: 14px;
+              color: #696969;
+              margin-top: 20px;
+            }
+            .time{
+              color: #999999;
+              margin-top: 10px;
+              display: flex;
+              align-items: center;
+              span{
+                padding-left: 5px;
+              }
+            }
+          }
+        }
+        &:hover{
+          box-shadow: 0 8px 30px rgba(45, 104, 255, 0.15)
+        }
+      }
+    }
+  }
+}
+
+
+</style>