123

src/views/Index/components/CaseDetails/Paragraph/index.vue

@@ -0,0 +1,20 @@
+<template>
+  <article class="paragraph_container">
+    电力运维人员的日常工作有相当一部分是需要走到第一线去的，如设备检修、线路巡检
+    电源放电等。电力运维人员的一线工作呈现出“点多、线长、分散、不分昼夜、场景复
+    杂”的特点。照明摄像头可以解决电力巡检过程中的远距离视场的排查记录。
+  </article>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.paragraph_container {
+  padding: 30px 20px;
+  font-size: 14px;
+  font-family: 'SourceHanSansLight';
+  font-weight: 300;
+  color: #aaaaaa;
+  line-height: 23px;
+}
+</style>

src/views/Index/components/CaseDetails/index.vue

@@ -25,7 +25,16 @@
           </div>
           <div class="placeholder"></div>
           <div class="right_detail">
-            <div class="detail_header"></div>
+            <div class="detail_header">
+              <div>电力巡检摄像头</div>
+              <div class="right">
+                <p class="en">DETAILS PAGE</p>
+                <p>详情页</p>
+              </div>
+            </div>
+            <div class="article">
+              <Paragraph />
+            </div>
           </div>
         </div>
       </div>
@@ -39,6 +48,7 @@ import { handleScreenAuto } from '@/common/utils'
 // Import Swiper Vue.js components
 import { Swiper, SwiperSlide } from 'swiper/vue'
 import { Pagination } from 'swiper'
+import Paragraph from './Paragraph'
 import 'swiper/css'
 import 'swiper/css/pagination'
 import Tabs from './Tabs'
@@ -112,9 +122,6 @@ onMounted(() => {
           flex: 1;
           height: 100%;
         }
-        .right_detail::-webkit-scrollbar {
-          display: none; /* Chrome Safari */
-        }
         .right_detail {
           position: absolute;
           top: 0;
@@ -124,18 +131,45 @@ onMounted(() => {
           z-index: 100;
           height: 100%;
           scrollbar-width: none; /* firefox */
-          -ms-overflow-style: none; /* IE 10+ */
-          overflow-x: hidden;
-          overflow-y: auto;
-          position: relative;
+          overflow-x: auto;
           .detail_header {
-            position: fixed;
+            position: absolute;
             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;
+            box-sizing: border-box;
+            .right {
+              display: flex;
+              align-items: center;
+              font-size: 18px;
+              font-family: Alibaba PuHuiTi;
+              .en {
+                margin-right: 26px;
+                font-size: 10px;
+                font-family: ' ZonaPro';
+              }
+            }
+          }
+          .article {
+            margin-top: 80px;
+            min-height: 100%;
+            background: #fff;
           }
         }
+        .right_detail:hover {
+          width: 1000px;
+          z-index: 120;
+        }
       }
     }
   }