From e8f688ed718a74a67d0c453ab27dfcd923e60d96 Mon Sep 17 00:00:00 2001
From: hayu <1604366271@qq.com>
Date: Sun, 25 Jan 2026 20:07:05 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/Navbar.vue | 160 +++++++++--
 src/views/feedback/index.vue     | 438 +++++++++++++++++++++++++++++++
 2 files changed, 571 insertions(+), 27 deletions(-)
 create mode 100644 src/views/feedback/index.vue

diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 807e3d9f..cde0ff80 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -32,6 +32,19 @@
           <el-tooltip content="布局大小" effect="dark" placement="bottom">
             <size-select id="size-select" class="right-menu-item hover-effect" />
           </el-tooltip> -->
+
+          <div class="right-menu-item hover-effect bar-item">
+            <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAEKADAAQAAAABAAAAEAAAAAA0VXHyAAABPUlEQVQ4EYWTvUoDQRSFHbezCmIZAhLs7PQJxM4U8TmsBEvbVCkCeYC8QwQrU2sjEiSNjaKkFFTQIoG4+c44F5ZlZrxw9sw95+7d+Vu3QZRleQTtA6eceANXzrmVz3hQcwmdg3dwhjeBvdHDjMXYF/zVDGsFC/IT7zP4qJnVtEnSrwqVsZoca2q56ORMvKdNm2aCGwnd5B01WFoW4Xu0u4hu0kBLuE5M8xm9ANvgIVIz9F1CwQC+AZOAEdy2zzBWk1tg0TfPnzvqFsIusHsw55w/rQi/YLwHDsAXmOLPYX8PuhR8W+vAK/gi+G3GWk49xgiF9uC17oRcTRpAy0nFqU6hpS9FQl4TpHy90vrvHqgoG2pQZirkZX01mCUa/KC/ZHy9NtMmHoJH8FvZKW1sVxWw7oAum34eC/2APflrp+zfNar0B+8AAAAASUVORK5CYII=" alt="提醒">
+          </div>
+
+          <div class="right-menu-item hover-effect bar-item">
+            <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAYAAADtc08vAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAEKADAAQAAAABAAAADwAAAADW5XGhAAAA5klEQVQoFe3TvQ7BUBTA8atFI2kwSHyEGCwGmzcwGCS8g0RisHgJs3fgCRgkBovdxGAyMROLwVD/c28HqRrEYnCSX3PuPacnTdurFOF5Xgw7nLFCFxGpSUju70lNeqQ3bqqmochGMOZs2L5ZsMi6pAeQTGUR0iBbQ19YWe6ZWExpy0Poaa+XLFviXXRkwFfxH6DUb7wDh+94w/WD7ym9FzhRLnf0UEEdVTTRwnMsWCyxxwZ96EMyIBlDnuKEI9bYwvzvSh3Ia2iggDKSGEGftgT/dQZyKi2kkNdFU8+xTsP2+11yV/IH7VrRz1OSP24AAAAASUVORK5CYII=" alt="提醒">
+          </div>
+
+          <div class="right-menu-item hover-effect bar-item">
+            <span class="bar-text">收藏</span>
+          </div>
+
           <!-- 代办 -->
           <div class="right-menu-item hover-effect bar-item" @click="goTodo">
             <span class="bar-text">待办</span>
@@ -205,7 +218,7 @@
                 <i class="el-icon-t-shirt" style="font-size: 19px; color: #000;"></i>
                 <span>一键换肤</span>
               </div>
-              <div class="user-item">
+              <div class="user-item" @click="clearCacheSimple">
                 <i class="el-icon-delete" style="font-size: 19px; color: #000;"></i>
                 <span>清除缓存</span>
               </div>
@@ -213,11 +226,11 @@
                 <i class="el-icon-data-analysis" style="font-size: 19px; color: #000;"></i>
                 <span>测试网络速度</span>
               </div>
-              <div class="user-item">
+              <div class="user-item" @click="gotoFeedback">
                 <i class="el-icon-edit-outline" style="font-size: 19px; color: #000;"></i>
                 <span>意见反馈/闭环</span>
               </div>
-              <div class="user-item">
+              <div class="user-item" @click="showContactDialog">
                 <i class="el-icon-phone-outline" style="font-size: 19px; color: #000;"></i>
                 <span>联系我们</span>
               </div>
@@ -229,8 +242,8 @@
 
             <!-- 底部 -->
             <div class="user-footer">
-              软件名称：e基建2.0<br />
-              版本号：2.0.15
+              软件名称：机械化施工装备管理（共享）平台<br />
+              版本号：V1.0.4
             </div>
 
           <!-- 触发区域（右上角头像+名字） -->
@@ -327,7 +340,34 @@
         </div>
       </div>
     </div>
+
+    <el-dialog
+      :visible.sync="contactDialogVisible"
+      width="400px"
+      center
+      :append-to-body="true"
+      custom-class="contact-dialog"
+      :show-header="false"
+    >
+      <div class="contact-content">
+        <!-- 外层Flex容器：实现图标+标题同行 -->
+        <div class="contact-title-wrap">
+          <div class="contact-icon">
+            <i class="el-icon-warning"></i>
+          </div>
+          <div class="contact-title">联系我们</div>
+        </div>
+        <!-- 联系电话单独一行 -->
+        <div class="contact-phone">联系电话：{{ contactPhone }}</div>
+      </div>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="contactDialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleContactConfirm">确定</el-button>
+      </div>
+    </el-dialog>
   </div>
+
 </template>
 
 <script>
@@ -385,7 +425,9 @@ export default {
           title: '待办提醒',
           desc: '您有5条待办事项未处理，预计截止时间2026-01-30'
         }
-      ]
+      ],
+      contactDialogVisible: false,  // 控制联系我们弹窗显示
+      contactPhone: '田经理15212781264，刘经理19855530627'  // 联系电话
     }
   },
   computed: {
@@ -428,6 +470,9 @@ export default {
       this.$refs.messagePopover.doClose(); // 关闭消息弹窗
       // this.$router.push({ path: '/message' }); // 跳消息列表
     },
+    gotoFeedback(){
+      this.$router.push({ path: '/feedback' })
+    },
     getUser() {
       getUserProfile().then((response) => {
         console.log("用户信息", response.data);
@@ -440,25 +485,28 @@ export default {
       this.download('material-mall/todo/downLoadUserManual', {
       }, `机械化施工装备管理（共享）平台操作手册V1.0.pdf`)
     },
+    clearCacheSimple() {
+        // 清除本地存储
+        localStorage.clear();
+        sessionStorage.clear();
+        this.$message.success('缓存清除成功！');
+        setTimeout(() => location.reload(), 1000);
+    },
+    showContactDialog() {
+      this.contactDialogVisible = true;
+    },
+    handleContactConfirm() {
+      this.contactDialogVisible = false;
+    },
     async logout() {
-      this.$confirm('确定注销并退出系统吗？', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning',
+      this.$store.dispatch('LogOut').then((res) => {
+        this.$store.dispatch('tagsView/delAllViews')
+        if (process.env.VUE_APP_BASE_API == '/iws/jxhzb-api') {
+          window.location.href = 'http://sgwpdm.ah.sgcc.com.cn/iws'
+        } else {
+          this.$router.push({ path: '/login' })
+        }
       })
-        .then(() => {
-          this.$store.dispatch('LogOut').then((res) => {
-            this.$store.dispatch('tagsView/delAllViews')
-            if (process.env.VUE_APP_BASE_API == '/iws/jxhzb-api') {
-              window.location.href = 'http://sgwpdm.ah.sgcc.com.cn/iws'
-            } else {
-              this.$router.push({ path: '/login' })
-            }
-          })
-        })
-        .catch((err) => {
-          console.log('🚀 ~ err-退出登录:', err)
-        })
     },
     handleMenuClick(item) {
       if (item.redirect == 'index' || item.redirect == 'index1') {
@@ -967,10 +1015,6 @@ export default {
   }
 }
 
-.user-item.logout {
-  color: #f56c6c;
-}
-
 /* 底部 */
 .user-footer {
   font-size: 12px;
@@ -980,4 +1024,66 @@ export default {
   line-height: 18px;
 }
 
+/* 联系我们弹窗样式 - 修复同行显示+样式优化 */
+.contact-dialog {
+  .el-dialog__body {
+    padding: 20px 10px 10px;
+    text-align: center;
+    margin: 0; /* 清除默认边距，避免居中偏移 */
+  }
+
+  .contact-content {
+    // 整体内容居中
+    display: flex;
+    flex-direction: column;
+    gap: 16px; /* 标题行与电话行的间距 */
+
+    // 图标+标题 同行容器
+    .contact-title-wrap {
+      display: flex;
+      gap: 8px; // 图标与文字的间距，可根据需要调整
+    }
+
+    .contact-icon {
+      font-size: 24px;
+      color: #f5a623; // 黄色感叹号，匹配截图
+      line-height: 1; // 清除行高，避免垂直偏移
+    }
+
+    .contact-title {
+      display: block;
+      overflow: hidden;
+      color: rgba(0, 0, 0, .85);
+      font-weight: 500;
+      font-size: 16px;
+      line-height: 1.4;
+    }
+
+    .contact-phone {
+      margin-left: 34px;
+      color: rgba(0, 0, 0, .65);
+      font-size: 14px;
+    }
+  }
+
+  .dialog-footer {
+    padding-top: 15px;
+    text-align: right;
+    border-top: 1px solid #e6e6e6;
+    margin: 0; // 清除默认边距
+
+    .el-button {
+      width: 80px; // 按钮统一宽度，美观
+      margin: 0 4px; // 按钮之间的小间距
+    }
+  }
+
+  // 可选：添加弹框圆角+轻微阴影，更贴近截图视觉效果
+  .el-dialog__wrapper .el-dialog {
+    border-radius: 12px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+}
+
+
 </style>
diff --git a/src/views/feedback/index.vue b/src/views/feedback/index.vue
new file mode 100644
index 00000000..7c631fab
--- /dev/null
+++ b/src/views/feedback/index.vue
@@ -0,0 +1,438 @@
+<template>
+  <div class="app-container">
+    <el-card style="margin-bottom: 20px" shadow="never">
+      <el-form :model="queryParams" ref="queryForm" label-width="120px" inline @submit.native.prevent>
+        <!-- 固定显示：前四个筛选项 -->
+        <el-form-item label="问题编号" prop="proName">
+          <el-input
+            v-model="queryParams.proName"
+            placeholder="请输入"
+            clearable
+            @keyup.enter.native="handleQuery"
+            style="width: 240px"
+          />
+        </el-form-item>
+
+        <el-form-item label="问题处理状态" prop="taskStatus">
+          <el-select
+            v-model="queryParams.taskStatus"
+            placeholder="请选择"
+            clearable
+            filterable
+            style="width: 240px"
+          >
+            <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value"/>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="管理专业" prop="manageMajor">
+          <el-select
+            v-model="queryParams.manageMajor"
+            placeholder="请选择"
+            clearable
+            filterable
+            style="width: 240px"
+          >
+            <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value"/>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="省公司" prop="provinceCompany">
+          <el-select
+            v-model="queryParams.provinceCompany"
+            placeholder="请选择"
+            clearable
+            filterable
+            style="width: 240px"
+          >
+            <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value"/>
+          </el-select>
+        </el-form-item>
+
+        <!-- 👉 关键：展开更多按钮靠右 -->
+        <div style="display: flex; justify-content: flex-end; margin-bottom: 10px;">
+          <div
+            style="cursor: pointer; color: #666; display: flex; align-items: center;"
+            @click="showSearch = !showSearch"
+          >
+            <i :class="showSearch ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" style="color: #2CBAB2; margin-right: 4px;"></i>
+            <span>{{ showSearch ? '收起更多' : '展开更多' }}</span>
+          </div>
+        </div>
+
+        <!-- 可折叠区域 -->
+        <div v-show="showSearch" style="width: 100%; margin-top: 10px;">
+          <div style="height: 20px; width: 100%;"></div>
+
+          <el-form-item label="提报人" prop="reporter">
+            <el-input
+              v-model="queryParams.reporter"
+              placeholder="请输入"
+              clearable
+              @keyup.enter.native="handleQuery"
+              style="width: 240px"
+            />
+          </el-form-item>
+
+          <el-form-item label="问题类型" prop="problemType">
+            <el-select
+              v-model="queryParams.problemType"
+              placeholder="请选择"
+              clearable
+              filterable
+              style="width: 240px"
+            >
+              <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value"/>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="建设管理单位" prop="constructionUnit">
+            <el-select
+              v-model="queryParams.constructionUnit"
+              placeholder="请选择"
+              clearable
+              filterable
+              style="width: 240px"
+            >
+              <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value"/>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="责任人" prop="responsiblePerson">
+            <el-input
+              v-model="queryParams.responsiblePerson"
+              placeholder="请输入"
+              clearable
+              @keyup.enter.native="handleQuery"
+              style="width: 240px"
+            />
+          </el-form-item>
+
+          <div style="height: 20px; width: 100%;"></div>
+
+          <el-form-item label="反馈层级" prop="feedbackLevel">
+            <el-select
+              v-model="queryParams.feedbackLevel"
+              placeholder="请选择"
+              clearable
+              filterable
+              style="width: 240px"
+            >
+              <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value"/>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="计划解决时间" prop="planSolveTime">
+            <el-select
+              v-model="queryParams.planSolveTime"
+              placeholder="请选择"
+              clearable
+              filterable
+              style="width: 240px"
+            >
+              <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value"/>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="期望解决时间" prop="expectSolveTime">
+            <el-select
+              v-model="queryParams.expectSolveTime"
+              placeholder="请选择"
+              clearable
+              filterable
+              style="width: 240px"
+            >
+              <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value"/>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="问题闭环时间" prop="closeTime">
+            <el-select
+              v-model="queryParams.closeTime"
+              placeholder="请选择"
+              clearable
+              filterable
+              style="width: 240px"
+            >
+              <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value"/>
+            </el-select>
+          </el-form-item>
+
+          <div style="height: 20px; width: 100%;"></div>
+
+          <el-form-item label="问题提出时间" prop="proposeTime">
+            <el-select
+              v-model="queryParams.proposeTime"
+              placeholder="请选择"
+              clearable
+              filterable
+              style="width: 240px"
+            >
+              <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value"/>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="功能名称" prop="functionName">
+            <el-select
+              v-model="queryParams.functionName"
+              placeholder="请选择"
+              clearable
+              filterable
+              style="width: 240px"
+            >
+              <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value"/>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="岗位角色" prop="postRole">
+            <el-input
+              v-model="queryParams.postRole"
+              placeholder="请输入"
+              clearable
+              @keyup.enter.native="handleQuery"
+              style="width: 240px"
+            />
+          </el-form-item>
+
+          <el-form-item label="优先级" prop="priority">
+            <el-select
+              v-model="queryParams.priority"
+              placeholder="请选择"
+              clearable
+              filterable
+              style="width: 240px"
+            >
+              <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value"/>
+            </el-select>
+          </el-form-item>
+
+          <div style="height: 20px; width: 100%;"></div>
+
+          <el-form-item label="问题描述" prop="problemDesc">
+            <el-input
+              v-model="queryParams.problemDesc"
+              placeholder="请输入"
+              clearable
+              @keyup.enter.native="handleQuery"
+              style="width: 240px"
+            />
+          </el-form-item>
+        </div>
+
+        <!-- 查询/重置按钮 -->
+        <el-form-item style="float: right; margin-top: 15px;">
+          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
+          <el-button icon="el-icon-refresh" size="mini" @click="handleReset">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <el-card class="content-box" shadow="never">
+      <el-row :gutter="10" class="mb8" justify="end" style="padding: 10px 0;margin-bottom: 15px;border-bottom: 1px solid #F0F0F0;">
+        <el-col :span="4">
+          <span style="font-size: 20px; font-weight: 800">反馈列表</span>
+        </el-col>
+      </el-row>
+
+      <el-table
+        v-loading="isLoading"
+        :data="tableList"
+        highlight-current-row
+        border
+        stripe
+        height="546"
+        style="width: 100%"
+      >
+        <el-table-column
+          type="index"
+          width="55"
+          label="编号"
+          align="center"
+          :index="(index) => (queryParams.pageNum - 1) * queryParams.pageSize + index + 1"
+        />
+
+        <el-table-column
+          v-for="(column, index) in tableColumns"
+          show-overflow-tooltip
+          :key="index"
+          :label="column.label"
+          :prop="column.prop"
+          align="center"
+        >
+          <template v-slot="{ row }" v-if="column.prop == 'taskStatus'">
+            <el-tag v-if="row.taskStatus == '1'" type="warning">待出库</el-tag>
+            <el-tag v-if="row.taskStatus == '2'" type="warning">出库中</el-tag>
+            <el-tag v-if="row.taskStatus == '3'" type="success">完成出库</el-tag>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="操作" align="center">
+          <template slot-scope="{ row }">
+            <el-button v-if="row.taskStatus == '3'" type="text" style="color: #2CBAB2;" @click="handleApprove(row)">查看</el-button>
+            <el-button v-if="row.taskStatus != '3'" type="text" style="color: #2CBAB2;" @click="handleView(row)">出库</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { getOutboundList } from '@/api/business/outbound'
+
+export default {
+  name: 'ApproveList',
+  data() {
+    return {
+      isLoading: false,
+      showSearch: false,
+      timeRange: [],
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        status: null,
+        proName: null,
+        startTime: null,
+        endTime: null,
+        taskStatus: null,
+        manageMajor: null,
+        provinceCompany: null,
+        reporter: null,
+        problemType: null,
+        constructionUnit: null,
+        responsiblePerson: null,
+        feedbackLevel: null,
+        planSolveTime: null,
+        expectSolveTime: null,
+        closeTime: null,
+        proposeTime: null,
+        functionName: null,
+        postRole: null,
+        priority: null,
+        problemDesc: null
+      },
+      statusList: [
+        { label: '待出库', value: '1' },
+        { label: '出库中', value: '2' },
+        { label: '完成出库', value: '3' }
+      ],
+      total: 0,
+      tableColumns: [
+        { label: '问题描述', prop: 'code' },
+        { label: '问题类型', prop: 'proName' },
+        { label: '功能名称', prop: 'devNum' },
+        { label: '优先级', prop: 'toolNum' },
+        { label: '问题处理状态', prop: 'taskStatus' },
+        { label: '问题闭环时间', prop: 'createBy' },
+        { label: '问题提出时间', prop: 'createTime' },
+        { label: '期望解决时间', prop: 'createTime' },
+        { label: '反馈层级', prop: 'createTime' },
+        { label: '省公司', prop: 'createTime' },
+        { label: '建设管理单位', prop: 'createTime' },
+        { label: '提报人', prop: 'createTime' },
+        { label: '管理专业', prop: 'createTime' },
+        { label: '岗位角色', prop: 'createTime' },
+        { label: '责任人', prop: 'createTime' },
+        { label: '计划解决时间', prop: 'createTime' }
+      ],
+      tableList: []
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    handleReset() {
+      this.queryParams.pageNum = 1
+      this.queryParams.pageSize = 10
+      this.timeRange = []
+      this.$refs.queryForm.resetFields()
+      this.getList()
+    },
+    async getList() {
+      console.log('列表-查询', this.queryParams)
+      this.isLoading = true
+      this.queryParams.startTime = '2028-01-01'
+      this.queryParams.endTime = '2028-01-01'
+      try {
+        const params = { ...this.queryParams }
+        const res = await getOutboundList(params)
+        this.tableList = res.rows || []
+        this.total = res.total || 0
+      } catch (error) {
+        this.tableList = []
+        this.total = 0
+      } finally {
+        this.isLoading = false
+      }
+    },
+    handleView(row) {
+      this.$router.push({ path: '/business/outbound/details', query: { id: row.id, isView: true } })
+    },
+    handleApprove(row) {
+      this.$router.push({ path: '/business/outbound/details', query: { id: row.id } })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-container{
+  background: #F0F0F0;
+  padding: 20px;
+}
+::v-deep.el-button--primary{
+  background-color: #2CBAB2;
+  border-color: #2CBAB2;
+}
+::v-deep.el-button--danger{
+  background-color: #FF5129;
+  border-color: #FF5129;
+}
+::v-deep.el-tag.el-tag--info {
+  background-color: #F5F5F5;
+  border-color: #B3B3B3;
+  color: #B3B3B3;
+}
+::v-deep.el-tag.el-tag--warn{
+  background-color: rgba(255,171,41,0.1);
+  border: #FFAB29;
+  color: #FFAB29;
+}
+::v-deep.el-tag.el-tag--success {
+  background-color: rgba(52,226,199,0.1);
+  border-color: #34E2C7;
+  color: #34E2C7;
+}
+.el-form-item {
+  margin-bottom: 15px;
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+.content-box {
+  border-radius: 8px;
+  height: calc(100vh - 230px);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  ::v-deep .el-card__body {
+    display: flex !important;
+    flex-direction: column !important;
+    height: 100% !important;
+    padding: 20px;
+  }
+}
+</style>