From 8716e35d55875b7e8377cae748005c95a6fe60c2 Mon Sep 17 00:00:00 2001
From: wangyilin <1454641981@qq.com>
Date: Fri, 25 Apr 2025 17:40:30 +0800
Subject: [PATCH] =?UTF-8?q?home=E9=9D=99=E6=80=81=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.ts      |   2 +-
 src/views/home/index.vue | 438 ++++++++++++++++++++++++++-------------
 2 files changed, 290 insertions(+), 150 deletions(-)

diff --git a/src/router/index.ts b/src/router/index.ts
index a4b568f..da48ea3 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -18,7 +18,7 @@ const router = createRouter({
  */
 router.beforeEach((to: any, from: any, next: any) => {
   //动态设置标题
-  const title: string = "后台管理系统";
+  const title: string = "智慧食堂系统";
   document.title = to.meta.name ? `${to.meta.name} - ${title}` : title;
   //todo 鉴权操作...
   const userStore = useUserStore();
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index fdf7424..dadec60 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,161 +1,301 @@
 <template>
-  <div class="home">
-    <a-card :bordered="false" style="width: 100%">
-      <div class="homeIndex">
-        <div>
-          <a-form name="horizontal_login" layout="inline" autocomplete="off">
-            <a-form-item label="名字" name="username">
-              <a-input placeholder="请输入名字"> </a-input>
-            </a-form-item>
-            <a-form-item label="年龄" name="username">
-              <a-input placeholder="请输入名字"> </a-input>
-            </a-form-item>
-            <a-form-item label="地址" name="username">
-              <a-input placeholder="请输入名字"> </a-input>
-            </a-form-item>
-            <a-form-item label="时间" name="range-picker">
-              <a-range-picker value-format="YYYY-MM-DD" />
-            </a-form-item>
-            <a-form-item label="名字" name="username">
-              <a-input placeholder="请输入名字"> </a-input>
-            </a-form-item>
-          </a-form>
-        </div>
-        <div>
-          <a-button type="primary">
-            <template #icon>
-              <ZoomInOutlined />
-            </template>
-            搜索</a-button
-          >
+
+  <div class="home" >
+    <div style="width: 74%">
+       <div class="homeItem">
+         <blockquote  class="homeItemIndex">
+           系统公告
+           <span class="homeSpan">2024-11-25</span>
+         </blockquote>
+         <span>【系统菜单调整通知】</span>
+         <span>为了更方便功能查找使用，从新编排了菜单位置，基础信息相关的页面都在顶部”基础信息“下</span>
+       </div>
+      <div class="home2Item">
+        <blockquote class="homeItem2Index">
+          <div class="header-wrapper">
+            <span>公司</span>
+            <div class="fold-button" @click="toggleFold">
+              <span>{{ isFold ? '展开' : '收起' }}</span>
+              <caret-right-outlined :style="{ transform: isFold ? 'rotate(90deg)' : 'rotate(265deg)' }" />
+            </div>
+          </div>
+        </blockquote>
+        <!-- 折叠内容区域 -->
+        <div :style="{height:isFold?'420px':'600px'}">
+          <div class="fold-content">
+            <!-- 这里放具体内容 -->
+            <div class="fold-content_item">
+<!--              1-->
+               <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>
+<!--           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>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
-    </a-card>
-    <a-card :bordered="false" class="homeItem">
-      <div>
-        <a-button type="primary" style="margin-right: 10px">
-          <template #icon>
-            <PlusOutlined />
-          </template>
-          新增</a-button
-        >
-        <a-button
-          type="primary"
-          :disabled="!hasSelected"
-          :loading="state.loading"
-          @click="start"
-        >
-          Reload {{ state.selectedRowKeys.length }}
-        </a-button>
-      </div>
-      <div style="margin-bottom: 16px"></div>
-      <a-table
-        :row-selection="{
-          selectedRowKeys: state.selectedRowKeys,
-          onChange: onSelectChange,
-        }"
-        :columns="columns"
-        :data-source="data"
-        :scroll="{ x: 1500, y: 430 }"
-      />
-    </a-card>
+    </div>
+    <div style="width: 25%"></div>
   </div>
 </template>
-<script lang="tsx" setup>
-import { PlusOutlined, ZoomInOutlined } from "@ant-design/icons-vue";
-import {computed, reactive, ref} from "vue";
+<script setup lang="ts">
+import { CaretRightOutlined } from '@ant-design/icons-vue';
+import {ref} from "vue";
+import {CollapseProps} from "ant-design-vue";
 
-type Key = string | number;
-
-interface DataType {
-  key: Key;
-  name: string;
-  age: number;
-  address: string;
+const isFold  = ref(true)
+const toggleFold = ()=>{
+  isFold.value = !isFold.value
 }
 
-const columns = [
-  {
-    title: "名字",
-    dataIndex: "name",
-    customRender: (text: any) => {
-      return text.value;
-    },
-  },
-  {
-    title: "年龄",
-    dataIndex: "age",
-  },
-  {
-    title: "地址",
-    dataIndex: "address",
-  },
-  {
-    title: " 操作",
-    dataIndex: "operation",
-    customRender: () => {
-      return (
-        <div>
-          <a-button type="primary" danger class="margin-right-sm" >
-            删除
-          </a-button>
-          <a-button class="margin-right-sm">查看</a-button>
-          <a-button type="primary">编辑</a-button>
-        </div>
-      );
-    },
-  },
-];
-
-const dataSource = ref([])
-const data: DataType[] = [];
-for (let i = 0; i < 100; i++) {
-  dataSource.value =  data.push({
-    key: i,
-    name: `小明 ${i}`,
-    age: 32 + i,
-    address: `湖南省长沙市岳麓区. ${i}`,
-  })as any;
-}
-
-const state = reactive<{
-  selectedRowKeys: Key[];
-  loading: boolean;
-}>({
-  selectedRowKeys: [], //单击此处配置默认列
-  loading: false,
-});
-const hasSelected = computed(() => state.selectedRowKeys.length > 0);
-
-const start = () => {
-  state.loading = true;
-  // ajax request after empty completing
-  setTimeout(() => {
-    state.loading = false;
-    state.selectedRowKeys = [];
-  }, 1000);
-};
-const onSelectChange = (selectedRowKeys: Key[]) => {
-  console.log("selectedRowKeys changed: ", selectedRowKeys);
-  state.selectedRowKeys = selectedRowKeys;
-};
+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'}
+])
 </script>
-
-<style lang="scss" scoped>
-.home {
-  height: calc(100vh - 130px);
-  // background: #fff;
-  overflow: hidden;
-  .homeIndex {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-  .homeItem {
+<style scoped lang="scss">
+.home{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 14px;
+  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
+  .homeItem{
     width: 100%;
-    height: calc(100vh - 100px);
-    overflow: hidden;
-    margin-top: 20px;
+    background: #ffffff;
+    margin-bottom: 10px;
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
+    padding: 10px 15px;
+    .homeItemIndex{
+      margin-bottom: 10px;
+      line-height: 1.6;
+      border-left: 5px solid #5FB878;
+      border-radius: 0 2px 2px 0;
+      padding-left: 10px;
+      .homeSpan{
+        display: inline-block;
+        padding: 0 6px;
+        font-size: 12px;
+        text-align: center;
+        background-color: #FF5722;
+        color: #fff;
+        border-radius: 2px
+      }
+    }
+  }
+  .home2Item{
+    width: 100%;
+    background: #ffffff;
+    margin-bottom: 10px;
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
+    padding: 10px 15px;
+    .header-wrapper {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      cursor: pointer;
+    }
+
+    .fold-button {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      color: #1890ff;
+      transition: all 0.3s;
+    }
+
+    .fold-button:hover {
+      opacity: 0.8;
+    }
+
+    .fold-button i {
+      transition: transform 0.3s;
+    }
+
+    .fold-content {
+      border-top: 1px solid #f0f0f0;
+      .fold-content_item{
+         margin-top: 15px;
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        .fold-content_item_index{
+          padding: 10px;
+          min-height: 90px;
+          border-radius: 5px;
+          border-color: #eee;
+          border-width: 1px;
+          border-style: solid;
+          background-color: #fff;
+          color: #666;
+          box-shadow: 1px 1px 4px rgb(0 0 0 / 8%);
+          width: 24%;
+          margin-right: 5px;
+          margin-bottom: 15px;
+           .fold-content_item_index_top{
+              display: flex;
+              justify-content: space-between;
+             align-items: center;
+             .content{
+               font-weight: bold;
+               font-size: 16px !important;
+             }
+           }
+          .intermediate{
+             padding: 5px 7px;
+             margin-top: 5px;
+             font-size: 12px;
+             display: flex;
+             justify-content: space-between;
+          }
+          hr{
+            line-height: 0;
+            margin: 10px 0;
+            padding: 0;
+            border: none !important;
+            border-bottom: 1px solid #eee !important;
+            clear: both;
+            background: 0 0
+          }
+          .risk{
+            height: 18px;
+            line-height: 18px;
+            display: inline-block;
+            padding: 0 6px;
+            font-size: 12px;
+            text-align: center;
+            background-color: #FF5722;
+            color: #fff;
+            border-radius: 2px;
+          }
+        }
+      }
+    }
+    .homeItem2Index{
+      margin-bottom: 10px;
+      border-left: 5px solid #5FB878;
+      border-radius: 0 2px 2px 0;
+      padding-left: 10px;
+      height: 18px;
+      line-height: 18px
+    }
   }
 }
-</style>
+
+</style>
\ No newline at end of file