diff --git a/src/components/Trumbs/index.vue b/src/components/Trumbs/index.vue
index 85b19c4..c75c432 100644
--- a/src/components/Trumbs/index.vue
+++ b/src/components/Trumbs/index.vue
@@ -7,14 +7,14 @@
       :modules="modules"
       @swiper="onSwiper"
       @slideChange="onSlideChange"
-      class="case_detail_swiper"
+      class="trumbs_swiper"
     >
       <swiper-slide
         v-for="item in props.isCase
           ? case_detail_img_data[industry_id]
           : hard_img_data[hardware_id]"
         :key="item.id"
-        style="background: none; height: 108px"
+        style="background: none; height: 108px; width: 194px !important"
       >
         <div class="img_card">
           <img :src="item.picUrl" class="img" alt="" />
@@ -77,11 +77,10 @@ const onSwiper = swiper => {
     width: 194px;
     // height: 100%;
     height: 108px;
-    margin: 0 22px;
     position: relative;
     .img {
       width: 194px;
-      height: auto;
+      width: 194px;
     }
     .dialog_text {
       display: flex;
diff --git a/src/views/Index/components/CaseDetails/index.vue b/src/views/Index/components/CaseDetails/index.vue
index 4d374a4..3400e3b 100644
--- a/src/views/Index/components/CaseDetails/index.vue
+++ b/src/views/Index/components/CaseDetails/index.vue
@@ -20,7 +20,7 @@
                 :pagination="true"
                 :modules="modules"
                 class="case_detail_swiper"
-                style="width: 1024px; height: 576px; background: none"
+                style="background: none"
               >
                 <swiper-slide
                   v-for="item in case_detail_list[industry_id] &&
@@ -31,45 +31,49 @@
                 </swiper-slide>
               </swiper>
             </div>
-            <div class="placeholder"></div>
-            <div
-              class="right_detail"
-              v-on:mouseover="mouseover"
-              v-on:mouseleave="mouseleave"
-            >
-              <div class="detail_header">
-                <div>详情页</div>
-                <div class="right">
-                  <p class="en">DETAILS PAGE</p>
+            <div class="placeholder">
+              <div
+                class="right_detail"
+                v-on:mouseover="mouseover"
+                v-on:mouseleave="mouseleave"
+              >
+                <div class="detail_header">
+                  <div>详情页</div>
+                  <div class="right">
+                    <p class="en">DETAILS PAGE</p>
+                  </div>
                 </div>
-              </div>
-              <div class="article">
-                <Paragraph
-                  :text="
-                    case_detail_list[industry_id] &&
-                    case_detail_list[industry_id][example_id]?.detailList
-                      ?.topText
-                  "
-                />
-                <div
-                  class="card_container"
-                  v-for="(item, index) in case_detail_list[industry_id] &&
-                  case_detail_list[industry_id][example_id]?.detailList?.card"
-                  :key="index"
-                >
-                  <CardTitle
-                    :title="item?.cardTitle"
-                    :blue_title="item?.cardBlueTitle"
-                    :en="item?.en"
-                  />
-                  <IMG
-                    :double="item?.isDouble"
-                    :pic1="item?.pic1"
-                    :pic2="item?.pic2"
+                <div class="article">
+                  <Paragraph
+                    :text="
+                      case_detail_list[industry_id] &&
+                      case_detail_list[industry_id][example_id]?.detailList
+                        ?.topText
+                    "
                   />
-                  <Paragraph v-if="item?.cardText" :text="item?.cardText" />
-                  <Intro v-if="item?.cardIntro" :cardIntro="item?.cardIntro" />
-                  <!-- <Video /> -->
+                  <div
+                    class="card_container"
+                    v-for="(item, index) in case_detail_list[industry_id] &&
+                    case_detail_list[industry_id][example_id]?.detailList?.card"
+                    :key="index"
+                  >
+                    <CardTitle
+                      :title="item?.cardTitle"
+                      :blue_title="item?.cardBlueTitle"
+                      :en="item?.en"
+                    />
+                    <IMG
+                      :double="item?.isDouble"
+                      :pic1="item?.pic1"
+                      :pic2="item?.pic2"
+                    />
+                    <Paragraph v-if="item?.cardText" :text="item?.cardText" />
+                    <Intro
+                      v-if="item?.cardIntro"
+                      :cardIntro="item?.cardIntro"
+                    />
+                    <!-- <Video /> -->
+                  </div>
                 </div>
               </div>
             </div>
@@ -144,10 +148,12 @@ const mouseleave = function () {
       .content {
         box-sizing: border-box;
         width: 100%;
-        padding: 77px 153px 60px 153px;
+        padding: 20px 153px 60px 153px;
+        display: flex;
+        justify-content: space-between;
+        flex-direction: column;
         .content_detail {
-          height: 576px;
-          width: 100%;
+          flex: 1;
           box-sizing: border-box;
           margin-top: 30px;
           display: flex;
@@ -155,19 +161,17 @@ const mouseleave = function () {
           position: relative;
           .left_swiper {
             width: 1024px;
-            // height: 100%;
             position: relative;
+            .case_detail_swiper {
+              width: 100%;
+              height: auto;
+            }
             .img_swiper {
               width: 1024px;
               height: auto;
             }
             .header_intro {
-              // position: absolute;
-              // top: 0;
               min-height: 80px;
-              // left: 0;
-              // right: 0;
-              // z-index: 99;
               padding: 26px 43px;
               display: flex;
               justify-content: space-between;
@@ -176,7 +180,7 @@ const mouseleave = function () {
               font-family: DFPYuanW7-GB;
               box-sizing: border-box;
               font-weight: 400;
-              background: rgb(40, 63, 231, 0.68);
+              background: linear-gradient(90deg, #283fe7, #4b17e1);
               color: #fafafa;
               .p_text {
                 font-size: 22px;
@@ -187,60 +191,62 @@ const mouseleave = function () {
           }
           .placeholder {
             flex: 1;
-            height: 100%;
-          }
-          .right_detail {
-            transition-property: all;
-            transition-duration: 0.7s;
-            animation-fill-mode: forwards;
-            position: absolute;
-            top: 0;
-            right: 0;
-            width: 591px;
-            overflow: scroll;
-            z-index: 100;
-            height: 100%;
-            scrollbar-width: none; /* firefox */
-            overflow-x: auto;
-            .detail_header {
-              position: sticky;
-              z-index: 999;
+            height: auto;
+            position: relative;
+            .right_detail {
+              transition-property: all;
+              transition-duration: 0.7s;
+              animation-fill-mode: forwards;
+              position: absolute;
               top: 0;
-              left: 0;
               right: 0;
+              flex: 1;
+              overflow: scroll;
+              z-index: 100;
+              height: 100%;
               width: 100%;
-              padding: 30px 25px;
-              background: linear-gradient(90deg, #283fe7, #4b17e1);
-              font-size: 20px;
-              font-family: DFPYuanW7-GB;
-              font-weight: 400;
-              color: #ffffff;
-              display: flex;
-              justify-content: space-between;
-              align-items: center;
-              box-sizing: border-box;
-              .right {
+              scrollbar-width: none; /* firefox */
+              overflow-x: auto;
+              .detail_header {
+                position: sticky;
+                z-index: 999;
+                top: 0;
+                left: 0;
+                right: 0;
+                width: 100%;
+                padding: 30px 25px;
+                background: linear-gradient(90deg, #283fe7, #4b17e1);
+                font-size: 20px;
+                font-family: DFPYuanW7-GB;
+                font-weight: 400;
+                color: #ffffff;
                 display: flex;
+                justify-content: space-between;
                 align-items: center;
-                font-size: 18px;
-                font-family: Alibaba PuHuiTi;
-                .en {
-                  font-size: 10px;
-                  font-family: ' ZonaPro';
+                box-sizing: border-box;
+                .right {
+                  display: flex;
+                  align-items: center;
+                  font-size: 18px;
+                  font-family: Alibaba PuHuiTi;
+                  .en {
+                    font-size: 10px;
+                    font-family: ' ZonaPro';
+                  }
                 }
               }
-            }
-            .article {
-              min-height: 100%;
-              background: #fff;
-              .card_container {
-                background: linear-gradient(#f9f9f9, #fff);
+              .article {
+                min-height: 100%;
+                background: #fff;
+                .card_container {
+                  background: linear-gradient(#f9f9f9, #fff);
+                }
               }
             }
-          }
-          .right_detail:hover {
-            z-index: 120;
-            width: 1000px;
+            .right_detail:hover {
+              z-index: 120;
+              width: 160%;
+            }
           }
         }
       }
diff --git a/src/views/Index/components/HardwareDetails/index.vue b/src/views/Index/components/HardwareDetails/index.vue
index 1558066..c06eb8a 100644
--- a/src/views/Index/components/HardwareDetails/index.vue
+++ b/src/views/Index/components/HardwareDetails/index.vue
@@ -2,10 +2,10 @@
   <div class="wrap">
     <div class="empty" v-if="showEmpty"></div>
     <div class="flex_center">
-      <div class="case_detail_container" id="hardware_detail_container">
+      <div class="hardware_detail_container" id="hardware_detail_container">
         <div class="content">
-          <Tabs />
-          <Trumbs />
+          <Tabs :isCase="true" />
+          <Trumbs :isCase="true" />
           <div class="content_detail">
             <div class="left_swiper">
               <div class="header_intro">
@@ -15,13 +15,12 @@
                     case_detail_list[hardware_id][hardwareExampleId]?.title
                   }}
                 </p>
-                <!-- <p class="p_text">PICTURE</p> -->
               </div>
               <swiper
                 :pagination="true"
                 :modules="modules"
                 class="case_detail_swiper"
-                style="width: 1024px; height: 576px; background: none"
+                style="background: none"
               >
                 <swiper-slide
                   v-for="item in case_detail_list[hardware_id] &&
@@ -32,46 +31,50 @@
                 </swiper-slide>
               </swiper>
             </div>
-            <div class="placeholder"></div>
-            <div
-              class="right_detail"
-              v-on:mouseover="mouseover"
-              v-on:mouseleave="mouseleave"
-            >
-              <div class="detail_header">
-                <div>详情页</div>
-                <div class="right">
-                  <p class="en">DETAILS PAGE</p>
+            <div class="placeholder">
+              <div
+                class="right_detail"
+                v-on:mouseover="mouseover"
+                v-on:mouseleave="mouseleave"
+              >
+                <div class="detail_header">
+                  <div>详情页</div>
+                  <div class="right">
+                    <p class="en">DETAILS PAGE</p>
+                  </div>
                 </div>
-              </div>
-              <div class="article">
-                <Paragraph
-                  :text="
-                    case_detail_list[hardware_id] &&
-                    case_detail_list[hardware_id][hardwareExampleId]?.detailList
-                      ?.topText
-                  "
-                />
-                <div
-                  class="card_container"
-                  v-for="(item, index) in case_detail_list[hardware_id] &&
-                  case_detail_list[hardware_id][hardwareExampleId]?.detailList
-                    ?.card"
-                  :key="index"
-                >
-                  <CardTitle
-                    :title="item?.cardTitle"
-                    :blue_title="item?.cardBlueTitle"
-                    :en="item?.en"
-                  />
-                  <IMG
-                    :double="item?.isDouble"
-                    :pic1="item?.pic1"
-                    :pic2="item?.pic2"
+                <div class="article">
+                  <Paragraph
+                    :text="
+                      case_detail_list[hardware_id] &&
+                      case_detail_list[hardware_id][hardwareExampleId]
+                        ?.detailList?.topText
+                    "
                   />
-                  <Paragraph v-if="item?.cardText" :text="item?.cardText" />
-                  <Intro v-if="item?.cardIntro" :cardIntro="item?.cardIntro" />
-                  <!-- <Video /> -->
+                  <div
+                    class="card_container"
+                    v-for="(item, index) in case_detail_list[hardware_id] &&
+                    case_detail_list[hardware_id][hardwareExampleId]?.detailList
+                      ?.card"
+                    :key="index"
+                  >
+                    <CardTitle
+                      :title="item?.cardTitle"
+                      :blue_title="item?.cardBlueTitle"
+                      :en="item?.en"
+                    />
+                    <IMG
+                      :double="item?.isDouble"
+                      :pic1="item?.pic1"
+                      :pic2="item?.pic2"
+                    />
+                    <Paragraph v-if="item?.cardText" :text="item?.cardText" />
+                    <Intro
+                      v-if="item?.cardIntro"
+                      :cardIntro="item?.cardIntro"
+                    />
+                    <!-- <Video /> -->
+                  </div>
                 </div>
               </div>
             </div>
@@ -88,9 +91,10 @@ import { handleScreenAuto } from '@/common/utils'
 // Import Swiper Vue.js components
 import { Swiper, SwiperSlide } from 'swiper/vue'
 import { Pagination } from 'swiper'
-import { case_detail_list } from '@/mock/hardware'
+import { case_detail_list } from '@/mock/case'
 import { useDetailStore, useSwiperStore } from '@/store'
 import { storeToRefs } from 'pinia'
+import Video from 'cpns/Video'
 
 import 'swiper/css'
 import 'swiper/css/pagination'
@@ -100,7 +104,6 @@ import CardTitle from 'cpns/CardTitle'
 import Tabs from 'cpns/Tabs'
 import Trumbs from 'cpns/Trumbs'
 import Intro from 'cpns/Intro'
-import Video from 'cpns/Video'
 const showEmpty = ref(true)
 const modules = ref([Pagination])
 const detailStore = useDetailStore()
@@ -137,7 +140,7 @@ const mouseleave = function () {
     display: flex;
     align-items: center;
     justify-content: center;
-    .case_detail_container {
+    .hardware_detail_container {
       width: 100%;
       height: 100%;
       .empty {
@@ -146,10 +149,12 @@ const mouseleave = function () {
       .content {
         box-sizing: border-box;
         width: 100%;
-        padding: 77px 153px 130px 153px;
+        padding: 20px 153px 60px 153px;
+        display: flex;
+        justify-content: space-between;
+        flex-direction: column;
         .content_detail {
-          height: 576px;
-          width: 100%;
+          flex: 1;
           box-sizing: border-box;
           margin-top: 30px;
           display: flex;
@@ -157,19 +162,17 @@ const mouseleave = function () {
           position: relative;
           .left_swiper {
             width: 1024px;
-            height: 100%;
             position: relative;
-            .img_swiper {
+            .case_detail_swiper {
               width: 100%;
-              height: 100%;
+              height: auto;
+            }
+            .img_swiper {
+              width: 1024px;
+              height: auto;
             }
             .header_intro {
-              position: absolute;
-              top: 0;
               min-height: 80px;
-              left: 0;
-              right: 0;
-              z-index: 99;
               padding: 26px 43px;
               display: flex;
               justify-content: space-between;
@@ -189,60 +192,62 @@ const mouseleave = function () {
           }
           .placeholder {
             flex: 1;
-            height: 100%;
-          }
-          .right_detail {
-            transition-property: all;
-            transition-duration: 0.7s;
-            animation-fill-mode: forwards;
-            position: absolute;
-            top: 0;
-            right: 0;
-            width: 591px;
-            overflow: scroll;
-            z-index: 100;
-            height: 100%;
-            scrollbar-width: none; /* firefox */
-            overflow-x: auto;
-            .detail_header {
-              z-index: 999;
-              position: sticky;
+            height: auto;
+            position: relative;
+            .right_detail {
+              transition-property: all;
+              transition-duration: 0.7s;
+              animation-fill-mode: forwards;
+              position: absolute;
               top: 0;
-              left: 0;
               right: 0;
+              flex: 1;
+              overflow: scroll;
+              z-index: 100;
+              height: 100%;
               width: 100%;
-              padding: 30px 25px;
-              background: linear-gradient(90deg, #283fe7, #4b17e1);
-              font-size: 20px;
-              font-family: DFPYuanW7-GB;
-              font-weight: 400;
-              color: #ffffff;
-              display: flex;
-              justify-content: space-between;
-              align-items: center;
-              box-sizing: border-box;
-              .right {
+              scrollbar-width: none; /* firefox */
+              overflow-x: auto;
+              .detail_header {
+                position: sticky;
+                z-index: 999;
+                top: 0;
+                left: 0;
+                right: 0;
+                width: 100%;
+                padding: 30px 25px;
+                background: linear-gradient(90deg, #283fe7, #4b17e1);
+                font-size: 20px;
+                font-family: DFPYuanW7-GB;
+                font-weight: 400;
+                color: #ffffff;
                 display: flex;
+                justify-content: space-between;
                 align-items: center;
-                font-size: 18px;
-                font-family: Alibaba PuHuiTi;
-                .en {
-                  font-size: 10px;
-                  font-family: ' ZonaPro';
+                box-sizing: border-box;
+                .right {
+                  display: flex;
+                  align-items: center;
+                  font-size: 18px;
+                  font-family: Alibaba PuHuiTi;
+                  .en {
+                    font-size: 10px;
+                    font-family: ' ZonaPro';
+                  }
                 }
               }
-            }
-            .article {
-              min-height: 100%;
-              background: #fff;
-              .card_container {
-                background: linear-gradient(#f9f9f9, #fff);
+              .article {
+                min-height: 100%;
+                background: #fff;
+                .card_container {
+                  background: linear-gradient(#f9f9f9, #fff);
+                }
               }
             }
-          }
-          .right_detail:hover {
-            z-index: 120;
-            width: 1000px;
+            .right_detail:hover {
+              z-index: 120;
+              width: 160%;
+            }
           }
         }
       }