From 430162ee4e872baa721d588ef041427f9cda3397 Mon Sep 17 00:00:00 2001
From: wangyilin <1454641981@qq.com>
Date: Wed, 30 Apr 2025 15:02:53 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/main.scss |   2 +-
 src/views/index.vue  | 192 ++++++++++++++++++-------------------------
 2 files changed, 79 insertions(+), 115 deletions(-)

diff --git a/src/assets/main.scss b/src/assets/main.scss
index 53b45d4..1cd08be 100644
--- a/src/assets/main.scss
+++ b/src/assets/main.scss
@@ -24,7 +24,7 @@ body {
   background-color: var(--bg-color);
   color: var(--text-color);
   font-family: var(--font-family);
-  border-top: 1px solid  var(--border-top);
+  border-top: 0 solid  var(--border-top);
   border-color: var(--border-color);
   border-bottom: var(--border-bottom);
   transition: all 0.3s ease; /* 平滑过渡效果 */
diff --git a/src/views/index.vue b/src/views/index.vue
index c7c85a6..311e3e1 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -24,126 +24,30 @@
           <div class="fold-content">
             <!-- 这里放具体内容 -->
             <div class="fold-content_item">
-              <!--              1-->
-              <div class="fold-content_item_index">
+              <div class="fold-content_item_index" v-for="(item,index) in foldContentItemIndex" :key="index">
                 <div class="fold-content_item_index_top">
-                  <div class="content">某某央厨</div>
-                  <span>屏幕</span>
+                  <div class="content">{{item.titleName}}</div>
+                  <span>{{item.video}}</span>
                 </div>
-                <div class="intermediate" v-for="item in List" :key="item.key">
-                  <span style="width: 50px">{{item.name}}</span>
-                  <span style="width: 50px">{{item.digital}}</span>
-                  <span style="width: 50px">{{item.mechanism}}</span>
-                  <span style="width: 50px">{{item.digitalKey}}</span>
+                <div class="intermediate" v-for="items in item.intermediate" :key="items.key">
+                  <span style="width: 50px">{{items.name}}</span>
+                  <span style="width: 50px">{{items.digital}}</span>
+                  <span style="width: 50px">{{items.mechanism}}</span>
+                  <span style="width: 50px">{{items.digitalKey}}</span>
                 </div>
                 <hr/>
                 <div style="display: flex;align-items: center;justify-content: space-between">
                   <div style="display: flex;">
-                    <div class="risk">低风险</div>
-                    <div style="font-weight: bold;color: #009688 !important;margin-left: 10px;line-height: 18px">100分</div>
+                    <div class="risk">{{item.risk}}</div>
+                    <div style="font-weight: bold;color: #009688 !important;margin-left: 10px;line-height: 18px">{{item.score}}分</div>
                   </div>
                   <div style="display: flex">
-                    <div>排名</div>
-                    <div style="margin-left: 10px">1</div>
-                  </div>
-                </div>
-              </div>
-              <!--           2-->
-              <div class="fold-content_item_index">
-                <div class="fold-content_item_index_top">
-                  <div class="content">某某央厨</div>
-                  <span>屏幕</span>
-                </div>
-                <div class="intermediate" v-for="item in List" :key="item.key">
-                  <span style="width: 50px">{{item.name}}</span>
-                  <span style="width: 50px">{{item.digital}}</span>
-                  <span style="width: 50px">{{item.mechanism}}</span>
-                  <span style="width: 50px">{{item.digitalKey}}</span>
-                </div>
-                <hr/>
-                <div style="display: flex;align-items: center;justify-content: space-between">
-                  <div style="display: flex;">
-                    <div class="risk">低风险</div>
-                    <div style="font-weight: bold;color: #009688 !important;margin-left: 10px;line-height: 18px">100分</div>
-                  </div>
-                  <div style="display: flex">
-                    <div>排名</div>
-                    <div style="margin-left: 10px">1</div>
-                  </div>
-                </div>
-              </div>
-              <!--              3-->
-              <div class="fold-content_item_index">
-                <div class="fold-content_item_index_top">
-                  <div class="content">某某央厨</div>
-                  <span>屏幕</span>
-                </div>
-                <div class="intermediate" v-for="item in List" :key="item.key">
-                  <span style="width: 50px">{{item.name}}</span>
-                  <span style="width: 50px">{{item.digital}}</span>
-                  <span style="width: 50px">{{item.mechanism}}</span>
-                  <span style="width: 50px">{{item.digitalKey}}</span>
-                </div>
-                <hr/>
-                <div style="display: flex;align-items: center;justify-content: space-between">
-                  <div style="display: flex;">
-                    <div class="risk">低风险</div>
-                    <div style="font-weight: bold;color: #009688 !important;margin-left: 10px;line-height: 18px">100分</div>
-                  </div>
-                  <div style="display: flex">
-                    <div>排名</div>
-                    <div style="margin-left: 10px">1</div>
-                  </div>
-                </div>
-              </div>
-              <!--              4-->
-              <div class="fold-content_item_index">
-                <div class="fold-content_item_index_top">
-                  <div class="content">某某央厨</div>
-                  <span>屏幕</span>
-                </div>
-                <div class="intermediate" v-for="item in List" :key="item.key">
-                  <span style="width: 50px">{{item.name}}</span>
-                  <span style="width: 50px">{{item.digital}}</span>
-                  <span style="width: 50px">{{item.mechanism}}</span>
-                  <span style="width: 50px">{{item.digitalKey}}</span>
-                </div>
-                <hr/>
-                <div style="display: flex;align-items: center;justify-content: space-between">
-                  <div style="display: flex;">
-                    <div class="risk">低风险</div>
-                    <div style="font-weight: bold;color: #009688 !important;margin-left: 10px;line-height: 18px">100分</div>
-                  </div>
-                  <div style="display: flex">
-                    <div>排名</div>
-                    <div style="margin-left: 10px">1</div>
-                  </div>
-                </div>
-              </div>
-              <!--              5-->
-              <div class="fold-content_item_index">
-                <div class="fold-content_item_index_top">
-                  <div class="content">某某央厨</div>
-                  <span>屏幕</span>
-                </div>
-                <div class="intermediate" v-for="item in List" :key="item.key">
-                  <span style="width: 50px">{{item.name}}</span>
-                  <span style="width: 50px">{{item.digital}}</span>
-                  <span style="width: 50px">{{item.mechanism}}</span>
-                  <span style="width: 50px">{{item.digitalKey}}</span>
-                </div>
-                <hr/>
-                <div style="display: flex;align-items: center;justify-content: space-between">
-                  <div style="display: flex;">
-                    <div class="risk">低风险</div>
-                    <div style="font-weight: bold;color: #009688 !important;margin-left: 10px;line-height: 18px">100分</div>
-                  </div>
-                  <div style="display: flex">
-                    <div>排名</div>
-                    <div style="margin-left: 10px">1</div>
+                    <div>{{item.ranking}}</div>
+                    <div style="margin-left: 10px">{{item.num}}</div>
                   </div>
                 </div>
               </div>
+
             </div>
           </div>
         </div>
@@ -160,14 +64,74 @@
   const toggleFold = ()=>{
     isFold.value = !isFold.value
   }
-  const List = ref([
-    {key:1,name:'环境监测',digital:'0 / 0', mechanism:'留样柜',digitalKey:'1 / 1'},
-    {key:2,name:'晨检机',digital:'1 / 1',mechanism:'点评机',digitalKey:'0 / 0'},
-    {key:3,name:'资质',digital:'19',mechanism:'健康证',digitalKey:'94'}
+  const foldContentItemIndex = ref([
+    {
+      titleName:'某某小学',
+      video:'屏幕',
+      intermediate:[
+        {key:1,name:'环境监测',digital:'0 / 0', mechanism:'留样柜',digitalKey:'1 / 1'},
+        {key:2,name:'晨检机',digital:'1 / 1',mechanism:'点评机',digitalKey:'0 / 0'},
+        {key:3,name:'资质',digital:'19',mechanism:'健康证',digitalKey:'94'}
+      ],
+      risk:'低风险',
+      score:'100',
+      ranking:'排名',
+      num:1
+    },
+    {
+      titleName:'某某小学',
+      video:'屏幕',
+      intermediate:[
+        {key:1,name:'环境监测',digital:'0 / 0', mechanism:'留样柜',digitalKey:'1 / 1'},
+        {key:2,name:'晨检机',digital:'1 / 1',mechanism:'点评机',digitalKey:'0 / 0'},
+        {key:3,name:'资质',digital:'19',mechanism:'健康证',digitalKey:'94'}
+      ],
+      risk:'低风险',
+      score:'95',
+      ranking:'排名',
+      num:2
+    },
+    {
+      titleName:'某某小学',
+      video:'屏幕',
+      intermediate:[
+        {key:1,name:'环境监测',digital:'0 / 0', mechanism:'留样柜',digitalKey:'1 / 1'},
+        {key:2,name:'晨检机',digital:'1 / 1',mechanism:'点评机',digitalKey:'0 / 0'},
+        {key:3,name:'资质',digital:'19',mechanism:'健康证',digitalKey:'94'}
+      ],
+      risk:'低风险',
+      score:'80',
+      ranking:'排名',
+      num:3
+    },
+    {
+      titleName:'某某小学',
+      video:'屏幕',
+      intermediate:[
+        {key:1,name:'环境监测',digital:'0 / 0', mechanism:'留样柜',digitalKey:'1 / 1'},
+        {key:2,name:'晨检机',digital:'1 / 1',mechanism:'点评机',digitalKey:'0 / 0'},
+        {key:3,name:'资质',digital:'19',mechanism:'健康证',digitalKey:'94'}
+      ],
+      risk:'低风险',
+      score:'90',
+      ranking:'排名',
+      num:4
+    },{
+      titleName:'某某小学',
+      video:'屏幕',
+      intermediate:[
+        {key:1,name:'环境监测',digital:'0 / 0', mechanism:'留样柜',digitalKey:'1 / 1'},
+        {key:2,name:'晨检机',digital:'1 / 1',mechanism:'点评机',digitalKey:'0 / 0'},
+        {key:3,name:'资质',digital:'19',mechanism:'健康证',digitalKey:'94'}
+      ],
+      risk:'低风险',
+      score:'100',
+      ranking:'排名',
+      num:1
+    }
   ])
 </script>
 <style scoped lang="scss">
-
   .home{
     display: flex;
     justify-content: space-between;