添加操作手册

package-lock.json

@@ -391,6 +391,11 @@
         "vue-demi": "*"
       }
     },
+    "@xmldom/xmldom": {
+      "version": "0.8.10",
+      "resolved": "https://registry.npmmirror.com/@xmldom/xmldom/-/xmldom-0.8.10.tgz",
+      "integrity": "sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw=="
+    },
     "acorn": {
       "version": "8.8.2",
       "resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.8.2.tgz",
@@ -471,6 +476,14 @@
       "resolved": "https://registry.npmmirror.com/commander/-/commander-2.20.3.tgz",
       "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
     },
+    "cos-js-sdk-v5": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmmirror.com/cos-js-sdk-v5/-/cos-js-sdk-v5-1.5.0.tgz",
+      "integrity": "sha512-1Y3VFFIaPnnCcxJRoWRrCCxmhihihMjDh+2F61iUdT6fOGtVq8hYPQF6uBnKNwB/aF41wCeBgvibGy0wimXDlA==",
+      "requires": {
+        "@xmldom/xmldom": "^0.8.6"
+      }
+    },
     "csstype": {
       "version": "2.6.21",
       "resolved": "https://registry.npmmirror.com/csstype/-/csstype-2.6.21.tgz",

package.json

@@ -13,6 +13,7 @@
     "@element-plus/icons-vue": "^2.0.10",
     "@liveqing/liveplayer-v3": "^3.7.10",
     "axios": "^1.3.2",
+    "cos-js-sdk-v5": "^1.5.0",
     "dayjs": "^1.11.8",
     "echarts": "^5.4.2",
     "element-plus": "^2.2.29",

src/layout/index.vue

@@ -4,6 +4,13 @@
     <div class="content">
       <Navbar></Navbar>
       <router-view></router-view>
+      <!-- <div class="policeNum">
+        <div class="rigthContent">
+          <span> 赣公网安备36092502000028号</span>
+          <span> &nbsp;&nbsp;&nbsp;&nbsp;</span>
+          <span>赣ICP备2023009877号-2</span>
+        </div>
+      </div> -->
     </div>
   </div>
 </template>
@@ -44,7 +51,7 @@ onBeforeMount(async () => {
   .content {
     // min-width: 1740px;
     max-width: calc(100vw - 81px);
-    min-width: calc(100vw - 200px);
+    // min-width: calc(100vw - 200px);
     width: 100%;
     height: calc(100vh);
     background-color: rgba(238, 238, 238, 1);
@@ -52,6 +59,19 @@ onBeforeMount(async () => {
     :deep(.el-dialog__header .el-dialog__headerbtn) {
       outline: none;
     }
+    .policeNum {
+      position: absolute;
+      bottom: 8px;
+      width: 100vw;
+      color: rgba(0, 0, 0, 0.5);
+      font-size: 12px;
+
+      .rigthContent {
+        min-width: 600px;
+        width: calc(100vw - 200px);
+        text-align: center;
+      }
+    }
   }
 }
 </style>
@@ -134,4 +154,5 @@ onBeforeMount(async () => {
   border-radius: 4px;
   height: 0;
   width: 0;
-}</style>
+}
+</style>

src/layout/sidebar/Navbar.vue

@@ -36,14 +36,22 @@
           style="width: 20px; height: 20px; cursor: pointer"
           alt=""
         />
-      </el-badge>
-      <img
-        v-else
-        src="@/assets/news.png"
-        @click="newsClick"
-        style="width: 20px; height: 20px; cursor: pointer"
-        alt=""
-      /> -->
+      </el-badge> -->
+
+      <!-- <el-tooltip content="操作手册" placement="bottom" effect="light">
+        <a
+          target="_Blank"
+          class="link"
+          href="https://www.jinganrenjiams.com/illustrate/"
+        >
+          <img
+            src="@/assets/operation.png"
+            @click="newsClick"
+            style="width: 25px; height: 25px; cursor: pointer"
+            alt=""
+          />
+        </a>
+      </el-tooltip> -->
       <div class="flex flex-wrap items-center" style="cursor: pointer">
         <el-dropdown :hide-on-click="false" trigger="click">
           <el-avatar :size="30">
@@ -53,6 +61,17 @@
           </el-avatar>
           <template #dropdown>
             <el-dropdown-menu>
+              <a
+                target="_blank"
+                href="https://www.jinganrenjiams.com/illustrate/"
+              >
+                <el-dropdown-item id="operation">
+                  <el-icon class="switchButton" :size="20" color="#000">
+                    <Collection />
+                  </el-icon>
+                  <span>操作手册</span>
+                </el-dropdown-item>
+              </a>
               <el-dropdown-item @click="uppassword">
                 <el-icon class="switchButton" :size="20" color="#000">
                   <Lock />
@@ -221,13 +240,13 @@ watch(
 );
 
 // 点击消息通知
-const newsClick = () => {
-  store.commit("indexUp", 0);
-  sessionStorage.setItem("sidevarItem", 0);
-  router.push({
-    path: `/repairs/news`,
-  });
-};
+// const newsClick = () => {
+//   store.commit("indexUp", 0);
+//   sessionStorage.setItem("sidevarItem", 0);
+//   router.push({
+//     path: `/repairs/news`,
+//   });
+// };
 const dateTime = ref(
   dayjs().format("YYYY-MM-DD") + ` 星期四 ` + dayjs().format("HH:mm:ss")
 ); // 时间
@@ -243,6 +262,7 @@ const SpreadMenu = (flag) => {
   store.commit("menuClose", flag);
   menuclose.value = flag;
 };
+
 // 修改密码
 const uppassword = () => {
   uppasswordShow.value = true;
@@ -390,7 +410,7 @@ onMounted(() => {
     top: 17px;
 
     .dateTime {
-      margin-right: 20px;
+      margin-right: 0px;
     }
     .el-badge {
       display: flex;
@@ -411,6 +431,10 @@ onMounted(() => {
       margin: 0 10px;
       border-left: 2px solid #ccc;
     }
+    .link {
+      display: flex;
+      align-items: center;
+    }
     .switchButton {
       cursor: pointer;
     }

src/layout/sidebar/SidevarItem.vue

@@ -1,18 +1,38 @@
 <template>
   <div class="box-item">
-    <el-menu class="el-menu-vertical-demo" text-color="#fff" active-color="rgba(9, 101, 98, 1)"
-      :default-active="activeIndex" :collapse="menuClose" @select="handleSelect" :router="true">
+    <el-menu
+      class="el-menu-vertical-demo"
+      text-color="#fff"
+      active-color="rgba(9, 101, 98, 1)"
+      :default-active="activeIndex"
+      :collapse="menuClose"
+      @select="handleSelect"
+      :router="true"
+    >
       <!-- :default-openeds="[34]" -->
       <div class="logo el-menu-item">
-        <el-icon :size="20"><img src="@/assets/logo.png" style="width: 30px; height: 24px" /></el-icon>
+        <el-icon :size="20"
+          ><img src="@/assets/logo.png" style="width: 30px; height: 24px"
+        /></el-icon>
       </div>
       <!-- 订单管理 -->
       <el-sub-menu :index="12">
         <template #title>
-          <img v-if="activeIndex == '/seniorCelebrity/order' ||
-            activeIndex == '/seniorCelebrity/orderEvaluate'
-            " src="@/assets/orderS.png" alt="" style="width: 22px; height: 22px; margin: 0 18px" />
-          <img v-else src="@/assets/order.png" alt="" style="width: 22px; height: 22px; margin: 0 18px" />
+          <img
+            v-if="
+              activeIndex == '/seniorCelebrity/order' ||
+              activeIndex == '/seniorCelebrity/orderEvaluate'
+            "
+            src="@/assets/orderS.png"
+            alt=""
+            style="width: 22px; height: 22px; margin: 0 18px"
+          />
+          <img
+            v-else
+            src="@/assets/order.png"
+            alt=""
+            style="width: 22px; height: 22px; margin: 0 18px"
+          />
           <span>订单管理</span>
         </template>
         <el-menu-item index="/seniorCelebrity/order">
@@ -44,10 +64,21 @@
       <!-- 房态管理 -->
       <el-sub-menu :index="34">
         <template #title>
-          <img v-if="activeIndex == '/seniorCelebrity/houseState' ||
-            activeIndex == '/seniorCelebrity/housePrice'
-            " src="@/assets/roomStateC.png" alt="" style="width: 22px; height: 22px; margin: 0 18px" />
-          <img v-else src="@/assets/roomState.png" alt="" style="width: 22px; height: 22px; margin: 0 18px" />
+          <img
+            v-if="
+              activeIndex == '/seniorCelebrity/houseState' ||
+              activeIndex == '/seniorCelebrity/housePrice'
+            "
+            src="@/assets/roomStateC.png"
+            alt=""
+            style="width: 22px; height: 22px; margin: 0 18px"
+          />
+          <img
+            v-else
+            src="@/assets/roomState.png"
+            alt=""
+            style="width: 22px; height: 22px; margin: 0 18px"
+          />
           <span>房态管理</span>
         </template>
         <el-menu-item index="/seniorCelebrity/houseState">
@@ -63,19 +94,39 @@
       </el-sub-menu>
       <!-- 台账管理 -->
       <el-menu-item index="/seniorCelebrity/ledger">
-        <img v-if="activeIndex == '/seniorCelebrity/ledger'" src="@/assets/ledgerS.png" alt=""
-          style="width: 22px; height: 22px; margin: 0 18px" />
-        <img v-else src="@/assets/ledger.png" alt="" style="width: 22px; height: 22px; margin: 0 18px" />
+        <img
+          v-if="activeIndex == '/seniorCelebrity/ledger'"
+          src="@/assets/ledgerS.png"
+          alt=""
+          style="width: 22px; height: 22px; margin: 0 18px"
+        />
+        <img
+          v-else
+          src="@/assets/ledger.png"
+          alt=""
+          style="width: 22px; height: 22px; margin: 0 18px"
+        />
         <span>台账管理</span>
       </el-menu-item>
       <!-- 民宿管理 -->
       <el-sub-menu :index="56">
         <template #title>
-          <img v-if="activeIndex == '/seniorCelebrity/houseInfo' ||
-            activeIndex == '/seniorCelebrity/houseType' ||
-            activeIndex == '/seniorCelebrity/houseList'
-            " src="@/assets/houseS.png" style="width: 22px; height: 22px; margin: 0 20px 0 18px" alt="" />
-          <img v-else src="@/assets/house.png" style="width: 22px; height: 22px; margin: 0 20px 0 18px" alt="" />
+          <img
+            v-if="
+              activeIndex == '/seniorCelebrity/houseInfo' ||
+              activeIndex == '/seniorCelebrity/houseType' ||
+              activeIndex == '/seniorCelebrity/houseList'
+            "
+            src="@/assets/houseS.png"
+            style="width: 22px; height: 22px; margin: 0 20px 0 18px"
+            alt=""
+          />
+          <img
+            v-else
+            src="@/assets/house.png"
+            style="width: 22px; height: 22px; margin: 0 20px 0 18px"
+            alt=""
+          />
           <span>民宿管理</span>
         </template>
         <el-menu-item index="/seniorCelebrity/houseInfo">
@@ -100,9 +151,18 @@
       <!-- 流程管理 -->
       <el-sub-menu :index="78">
         <template #title>
-          <img v-if="activeIndex == '/seniorCelebrity/roomFlow'" src="@/assets/roomFlowC.png" alt=""
-            style="width: 22px; height: 22px; margin: 0 18px" />
-          <img v-else src="@/assets/roomFlow.png" alt="" style="width: 22px; height: 22px; margin: 0 18px" />
+          <img
+            v-if="activeIndex == '/seniorCelebrity/roomFlow'"
+            src="@/assets/roomFlowC.png"
+            alt=""
+            style="width: 22px; height: 22px; margin: 0 18px"
+          />
+          <img
+            v-else
+            src="@/assets/roomFlow.png"
+            alt=""
+            style="width: 22px; height: 22px; margin: 0 18px"
+          />
           <span>流程管理</span>
         </template>
         <el-menu-item index="/seniorCelebrity/roomFlow">
@@ -112,17 +172,38 @@
         </el-menu-item>
       </el-sub-menu>
       <!-- 账号管理 -->
-      <el-menu-item index="/seniorCelebrity/account" v-if="store.state.user.level == 2">
-        <img v-if="activeIndex == '/seniorCelebrity/account'" src="@/assets/systemS.png" alt=""
-          style="width: 20px; height: 20px; margin: 0 20px" />
-        <img v-else src="@/assets/system.png" alt="" style="width: 20px; height: 20px; margin: 0 20px" />
+      <el-menu-item
+        index="/seniorCelebrity/account"
+        v-if="store.state.user.level == 2"
+      >
+        <img
+          v-if="activeIndex == '/seniorCelebrity/account'"
+          src="@/assets/systemS.png"
+          alt=""
+          style="width: 20px; height: 20px; margin: 0 20px"
+        />
+        <img
+          v-else
+          src="@/assets/system.png"
+          alt=""
+          style="width: 20px; height: 20px; margin: 0 20px"
+        />
         <span>账号管理</span>
       </el-menu-item>
       <!-- 服务商城 -->
       <el-menu-item index="/seniorCelebrity/serviceMall">
-        <img v-if="activeIndex == '/seniorCelebrity/serviceMall'" src="@/assets/shop_s.png" alt=""
-          style="width: 20px; height: 20px; margin: 0 20px" />
-        <img v-else src="@/assets/shop.png" alt="" style="width: 20px; height: 20px; margin: 0 20px" />
+        <img
+          v-if="activeIndex == '/seniorCelebrity/serviceMall'"
+          src="@/assets/shop_s.png"
+          alt=""
+          style="width: 20px; height: 20px; margin: 0 20px"
+        />
+        <img
+          v-else
+          src="@/assets/shop.png"
+          alt=""
+          style="width: 20px; height: 20px; margin: 0 20px"
+        />
         <span>服务商城</span>
       </el-menu-item>
     </el-menu>
@@ -211,10 +292,14 @@ onBeforeMount(() => {
   width: 200px;
   // min-height: 400px;
 }
-
+.box-item {
+  width: 200px;
+  height: calc(100vh);
+}
 .el-menu {
-  width: 100%;
+  width: 200px;
   height: 100%;
+  overflow: auto;
   // background: linear-gradient(
   //   0deg,
   //   rgba(134, 132, 255, 1) 0%,

src/views/account/account.vue

@@ -4,187 +4,191 @@
       <!-- <el-icon :size="23" class="camera"><VideoCameraFilled /></el-icon> -->
       <span class="cameratxt">账号管理</span>
     </div>
-    <div class="middle">
-      <div class="filter">
-        <div class="condition">
-          <span>关键字 : </span>
-          <el-input
-            clearable
-            v-model="searchInput.adminName"
-            @clear="searchBtn"
-            class="w-50 m-2"
-            placeholder="请输入用户名"
-            style="width: 150px"
-          />
-        </div>
+    <div class="scroll">
+      <div class="middle">
+        <div class="filter">
+          <div class="condition">
+            <span>关键字 : </span>
+            <el-input
+              clearable
+              v-model="searchInput.adminName"
+              @clear="searchBtn"
+              class="w-50 m-2"
+              placeholder="请输入用户名"
+              style="width: 150px"
+            />
+          </div>
 
-        <el-button
-          style="margin-left: 20px"
-          color="rgba(9, 101, 98, 1)"
-          type="primary"
-          class="search"
-          @click="searchBtn"
-          ><el-icon><Search /></el-icon> <span>查询</span></el-button
-        >
+          <el-button
+            style="margin-left: 20px"
+            color="rgba(9, 101, 98, 1)"
+            type="primary"
+            class="search"
+            @click="searchBtn"
+            ><el-icon><Search /></el-icon> <span>查询</span></el-button
+          >
+        </div>
+        <!-- 按钮列表 -->
+        <div class="gongneng">
+          <el-button type="primary" color="rgba(9, 101, 98, 1)" @click="addlist"
+            ><el-icon><CirclePlus /></el-icon><span>新增账号</span></el-button
+          >
+        </div>
       </div>
-      <!-- 按钮列表 -->
-      <div class="gongneng">
-        <el-button type="primary" color="rgba(9, 101, 98, 1)" @click="addlist"
-          ><el-icon><CirclePlus /></el-icon><span>新增账号</span></el-button
+      <div class="footer" v-loading="loading">
+        <el-table
+          :row-class-name="tableRowClassName"
+          :data="tableData.list"
+          @selection-change="handleSelectionChange"
+          style="width: 100%"
+          :header-cell-style="{
+            background: 'rgba(240, 243, 247, 1)',
+            height: '50px',
+            border: 0,
+          }"
         >
-      </div>
-    </div>
-    <div class="footer" v-loading="loading">
-      <el-table
-        :row-class-name="tableRowClassName"
-        :data="tableData.list"
-        @selection-change="handleSelectionChange"
-        style="width: 100%"
-        :header-cell-style="{
-          background: 'rgba(240, 243, 247, 1)',
-          height: '50px',
-          border: 0,
-        }"
-      >
-        <!-- <el-table-column align="center" type="selection" width="80" /> -->
-        <el-table-column
-          width="150"
-          align="center"
-          label="序号"
-          type="index"
-          index="1"
-        />
-        <el-table-column align="center" prop="corpnPhone" label="手机" />
-        <el-table-column align="center" prop="adminName" label="用户名" />
-        <el-table-column align="center" prop="corpnName" label="姓名" />
-        <el-table-column align="center" label="角色">
-          <template #default="{ row }">
-            {{ row.level == 1 ? "管理员" : "超级管理员" }}
-          </template>
-        </el-table-column>
-        <el-table-column align="center" prop="remark" label="备注" />
+          <!-- <el-table-column align="center" type="selection" width="80" /> -->
+          <el-table-column
+            width="150"
+            align="center"
+            label="序号"
+            type="index"
+            index="1"
+          />
+          <el-table-column align="center" prop="corpnPhone" label="手机" />
+          <el-table-column align="center" prop="adminName" label="用户名" />
+          <el-table-column align="center" prop="corpnName" label="姓名" />
+          <el-table-column align="center" label="角色">
+            <template #default="{ row }">
+              {{ row.level == 1 ? "管理员" : "超级管理员" }}
+            </template>
+          </el-table-column>
+          <el-table-column align="center" prop="remark" label="备注" />
 
-        <el-table-column align="center" label="操作" width="220">
-          <template #default="scope">
-            <div class="options">
-              <div class="reset" @click="reset(scope.row)">密码重置</div>
-              <div class="look" @click="edit(scope.row)">修改</div>
-              <el-popconfirm
-                width="220"
-                confirm-button-text="确认"
-                cancel-button-text="取消"
-                :icon="InfoFilled"
-                icon-color="#f89626"
-                title="是否删除此账号?"
-                @confirm="del(scope.row)"
-                @cancel="cancelEvent"
-              >
-                <template #reference>
-                  <div class="del">删除</div>
-                </template>
-              </el-popconfirm>
-            </div>
-          </template>
-        </el-table-column>
-      </el-table>
+          <el-table-column align="center" label="操作" width="220">
+            <template #default="scope">
+              <div class="options">
+                <div class="reset" @click="reset(scope.row)">密码重置</div>
+                <div class="look" @click="edit(scope.row)">修改</div>
+                <el-popconfirm
+                  width="220"
+                  confirm-button-text="确认"
+                  cancel-button-text="取消"
+                  :icon="InfoFilled"
+                  icon-color="#f89626"
+                  title="是否删除此账号?"
+                  @confirm="del(scope.row)"
+                  @cancel="cancelEvent"
+                >
+                  <template #reference>
+                    <div class="del">删除</div>
+                  </template>
+                </el-popconfirm>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
 
-      <!-- 添加车辆弹窗 -->
-      <el-dialog
-        class="addStaff"
-        v-model="addDialogVisible"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-        :title="dialongTitle"
-        align-center
-        width="609"
-        :before-close="cancelAdd"
-      >
-        <el-form
-          ref="ruleFormRef"
-          :model="ruleForm"
-          :rules="rules"
-          label-width="100px"
-          class="demo-ruleForm"
-          :size="formSize"
-          label-position="left"
-          status-icon
+        <!-- 添加车辆弹窗 -->
+        <el-dialog
+          class="addStaff"
+          v-model="addDialogVisible"
+          :close-on-click-modal="false"
+          :close-on-press-escape="false"
+          :title="dialongTitle"
+          align-center
+          width="609"
+          :before-close="cancelAdd"
         >
-          <el-form-item label="用户名 :" prop="adminName">
-            <el-input
-              v-model="ruleForm.adminName"
-              placeholder="请输入用户名"
-              clearable
-            />
-          </el-form-item>
-          <el-form-item label="姓名 :" prop="corpnName">
-            <el-input
-              v-model="ruleForm.corpnName"
-              placeholder="请输入姓名"
-              clearable
-            />
-          </el-form-item>
-          <el-form-item label="手机号码 :" prop="corpnPhone">
-            <el-input
-              v-model="ruleForm.corpnPhone"
-              placeholder="请输入手机号码"
-              clearable
-            />
-          </el-form-item>
-          <el-form-item label="密码 :" prop="password">
-            <el-input
-              v-model="ruleForm.password"
-              placeholder="请输入密码"
-              clearable
-            />
-          </el-form-item>
-          <el-form-item label="确认密码 :" prop="againPass">
-            <el-input
-              v-model="ruleForm.againPass"
-              placeholder="请再一次输入密码"
-              clearable
-            />
-          </el-form-item>
-          <el-form-item label="角色 :" prop="level">
-            <el-radio-group v-model="ruleForm.level">
-              <el-radio :label="1" v-if="ruleForm.level == 1">管理员</el-radio>
-              <el-radio :label="2" v-if="ruleForm.level == 2"
-                >超级管理员</el-radio
+          <el-form
+            ref="ruleFormRef"
+            :model="ruleForm"
+            :rules="rules"
+            label-width="100px"
+            class="demo-ruleForm"
+            :size="formSize"
+            label-position="left"
+            status-icon
+          >
+            <el-form-item label="用户名 :" prop="adminName">
+              <el-input
+                v-model="ruleForm.adminName"
+                placeholder="请输入用户名"
+                clearable
+              />
+            </el-form-item>
+            <el-form-item label="姓名 :" prop="corpnName">
+              <el-input
+                v-model="ruleForm.corpnName"
+                placeholder="请输入姓名"
+                clearable
+              />
+            </el-form-item>
+            <el-form-item label="手机号码 :" prop="corpnPhone">
+              <el-input
+                v-model="ruleForm.corpnPhone"
+                placeholder="请输入手机号码"
+                clearable
+              />
+            </el-form-item>
+            <el-form-item label="密码 :" prop="password">
+              <el-input
+                v-model="ruleForm.password"
+                placeholder="请输入密码"
+                clearable
+              />
+            </el-form-item>
+            <el-form-item label="确认密码 :" prop="againPass">
+              <el-input
+                v-model="ruleForm.againPass"
+                placeholder="请再一次输入密码"
+                clearable
+              />
+            </el-form-item>
+            <el-form-item label="角色 :" prop="level">
+              <el-radio-group v-model="ruleForm.level">
+                <el-radio :label="1" v-if="ruleForm.level == 1"
+                  >管理员</el-radio
+                >
+                <el-radio :label="2" v-if="ruleForm.level == 2"
+                  >超级管理员</el-radio
+                >
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="简介 :" prop="remark">
+              <el-input
+                v-model="ruleForm.remark"
+                :rows="3"
+                type="textarea"
+                placeholder="请输入民宿简介信息"
+              />
+            </el-form-item>
+
+            <el-form-item class="options">
+              <el-button
+                color="rgba(9, 101, 98, 1)"
+                class="queding"
+                type="primary"
+                @click="submitAdd(ruleFormRef)"
               >
-            </el-radio-group>
-          </el-form-item>
-          <el-form-item label="简介 :" prop="remark">
-            <el-input
-              v-model="ruleForm.remark"
-              :rows="3"
-              type="textarea"
-              placeholder="请输入民宿简介信息"
-            />
-          </el-form-item>
+                确定
+              </el-button>
+              <el-button @click="cancelAdd(ruleFormRef)">取消</el-button>
+            </el-form-item>
+          </el-form>
+        </el-dialog>
+      </div>
 
-          <el-form-item class="options">
-            <el-button
-              color="rgba(9, 101, 98, 1)"
-              class="queding"
-              type="primary"
-              @click="submitAdd(ruleFormRef)"
-            >
-              确定
-            </el-button>
-            <el-button @click="cancelAdd(ruleFormRef)">取消</el-button>
-          </el-form-item>
-        </el-form>
-      </el-dialog>
+      <!-- 分页组件 -->
+      <el-pagination
+        background
+        :current-page="currentPage"
+        :page-size="pageSize"
+        layout="total, prev, pager, next, jumper, slot"
+        :total="total"
+        @update:current-page="handleCurrentChange"
+      />
     </div>
-
-    <!-- 分页组件 -->
-    <el-pagination
-      background
-      :current-page="currentPage"
-      :page-size="pageSize"
-      layout="total, prev, pager, next, jumper, slot"
-      :total="total"
-      @update:current-page="handleCurrentChange"
-    />
   </div>
 </template>
 
@@ -660,8 +664,9 @@ onUnmounted(() => {
 
 <style scoped lang="scss">
 .content-box {
-  width: 97.5%;
-  height: 89%;
+  min-width: 1000px;
+  width: calc(100vw - 240px);
+  height: calc(100vh - 105px);
   margin: 20px auto;
   background-color: #fff;
   color: #fff;
@@ -679,11 +684,16 @@ onUnmounted(() => {
     color: #000;
     font-size: 18px;
     font-weight: 600;
-    .camera {
-      margin-right: 15px;
-      color: #4392f7;
+    .cameratxt {
+      display: block;
+      height: 60px;
+      line-height: 60px;
     }
   }
+  .scroll {
+    height: calc(100% - 61px);
+    overflow: auto;
+  }
   .middle {
     width: 96%;
     margin: 0 auto;
@@ -747,10 +757,10 @@ onUnmounted(() => {
   }
   .footer {
     width: 96%;
-    height: 550px;
+    // height: 550px;
     margin: 10px auto 10px;
     .el-table--fit {
-      height: 100%;
+      // height: 100%;
       :deep(.el-table__header-wrapper) {
         background-color: #000;
         font-size: 15px;

src/views/houseList/houseList.vue

@@ -4,79 +4,84 @@
       <!-- <el-icon :size="23" class="camera"><VideoCameraFilled /></el-icon> -->
       <span class="cameratxt">民宿管理/房源信息</span>
     </div>
-    <div class="middle">
-      <div class="filter">
-        <div class="condition">
-          <span>日期 : </span>
-          <el-date-picker
-            v-model="searchInput.createTime"
-            type="date"
-            format="YYYY-MM-DD"
-            value-format="YYYY-MM-DD"
-            :prefix-icon="Calendar"
-            placeholder="请选择日期"
-          />
-        </div>
-        <div class="condition">
-          <span>关键字 : </span>
-          <el-input
-            clearable
-            @clear="searchBtn"
-            v-model="searchInput.account"
-            class="w-50 m-2"
-            placeholder="请输入房型"
-            style="width: 150px"
-          />
-        </div>
+    <div class="scroll">
+      <div class="middle">
+        <div class="filter">
+          <div class="condition">
+            <span>日期 : </span>
+            <el-date-picker
+              v-model="searchInput.createTime"
+              type="date"
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+              :prefix-icon="Calendar"
+              placeholder="请选择日期"
+            />
+          </div>
+          <div class="condition">
+            <span>关键字 : </span>
+            <el-input
+              clearable
+              @clear="searchBtn"
+              v-model="searchInput.account"
+              class="w-50 m-2"
+              placeholder="请输入房型"
+              style="width: 150px"
+            />
+          </div>
 
-        <el-button
-          style="margin-left: 20px"
-          color="rgba(9, 101, 98, 1)"
-          type="primary"
-          class="search"
-          @click="searchBtn"
-          ><el-icon><Search /></el-icon> <span>查询</span></el-button
-        >
-      </div>
-      <!-- 按钮列表 -->
-      <!-- <div class="gongneng">
+          <el-button
+            style="margin-left: 20px"
+            color="rgba(9, 101, 98, 1)"
+            type="primary"
+            class="search"
+            @click="searchBtn"
+            ><el-icon><Search /></el-icon> <span>查询</span></el-button
+          >
+        </div>
+        <!-- 按钮列表 -->
+        <!-- <div class="gongneng">
         <el-button type="primary" color="rgba(9, 101, 98, 1)" @click="addlist"
           ><el-icon><CirclePlus /></el-icon><span>新增账号</span></el-button
         >
       </div> -->
-    </div>
-    <div class="footer" v-loading="loading">
-      <el-table
-        :row-class-name="tableRowClassName"
-        :data="tableData.list"
-        @selection-change="handleSelectionChange"
-        style="width: 100%"
-        :header-cell-style="{
-          background: 'rgba(240, 243, 247, 1)',
-          height: '50px',
-          border: 0,
-        }"
-      >
-        <!-- <el-table-column align="center" type="selection" width="80" /> -->
-        <!-- <el-table-column
+      </div>
+      <div class="footer" v-loading="loading">
+        <el-table
+          :row-class-name="tableRowClassName"
+          :data="tableData.list"
+          @selection-change="handleSelectionChange"
+          style="width: 100%"
+          :header-cell-style="{
+            background: 'rgba(240, 243, 247, 1)',
+            height: '50px',
+            border: 0,
+          }"
+        >
+          <!-- <el-table-column align="center" type="selection" width="80" /> -->
+          <!-- <el-table-column
           width="150"
           align="center"
           label="序号"
           type="index"
           index="1"
         /> -->
-        <el-table-column align="center" prop="orderStartTime" label="日期" />
-        <el-table-column align="center" prop="houseName" label="房型" />
-        <el-table-column align="center" prop="houseLockNum" label="锁定房间" />
-        <el-table-column align="center" prop="houseDueNum" label="预定房间" />
-        <el-table-column
-          align="center"
-          prop="houseResidueNum"
-          label="剩余房数"
-        />
-        <el-table-column align="center" prop="houseNum" label="总房数" />
+          <el-table-column align="center" prop="orderStartTime" label="日期" />
+          <el-table-column align="center" prop="houseName" label="房型" />
+          <el-table-column
+            align="center"
+            prop="houseLockNum"
+            label="锁定房间"
+          />
+          <el-table-column align="center" prop="houseDueNum" label="预定房间" />
+          <el-table-column
+            align="center"
+            prop="houseResidueNum"
+            label="剩余房数"
+          />
+          <el-table-column align="center" prop="houseNum" label="总房数" />
 
-        <!-- <el-table-column align="center" label="操作" width="220">
+          <!-- <el-table-column align="center" label="操作" width="220">
           <template #default="scope">
             <div class="options">
               <div class="reset" @click="reset(scope.row)">密码重置</div>
@@ -98,10 +103,10 @@
             </div>
           </template>
         </el-table-column> -->
-      </el-table>
+        </el-table>
 
-      <!-- 添加车辆弹窗 -->
-      <!-- <el-dialog
+        <!-- 添加车辆弹窗 -->
+        <!-- <el-dialog
         class="addStaff"
         v-model="addDialogVisible"
         :close-on-click-modal="false"
@@ -184,17 +189,18 @@
           </el-form-item>
         </el-form>
       </el-dialog> -->
-    </div>
+      </div>
 
-    <!-- 分页组件 -->
-    <el-pagination
-      background
-      :current-page="currentPage"
-      :page-size="pageSize"
-      layout="total, prev, pager, next, jumper, slot"
-      :total="total"
-      @update:current-page="handleCurrentChange"
-    />
+      <!-- 分页组件 -->
+      <el-pagination
+        background
+        :current-page="currentPage"
+        :page-size="pageSize"
+        layout="total, prev, pager, next, jumper, slot"
+        :total="total"
+        @update:current-page="handleCurrentChange"
+      />
+    </div>
   </div>
 </template>
 
@@ -630,8 +636,9 @@ onUnmounted(() => {
 
 <style scoped lang="scss">
 .content-box {
-  width: 97.5%;
-  height: 89%;
+  min-width: 1000px;
+  width: calc(100vw - 240px);
+  height: calc(100vh - 105px);
   margin: 20px auto;
   background-color: #fff;
   color: #fff;
@@ -643,17 +650,21 @@ onUnmounted(() => {
     // width: calc(100wh - 40px);
     display: flex;
     align-items: center;
-    height: 60px;
     margin: 0 30px;
     border-bottom: 1px solid #ccc;
     color: #000;
     font-size: 18px;
     font-weight: 600;
-    .camera {
-      margin-right: 15px;
-      color: #4392f7;
+    .cameratxt {
+      display: block;
+      height: 60px;
+      line-height: 60px;
     }
   }
+  .scroll {
+    height: calc(100% - 61px);
+    overflow: auto;
+  }
   .middle {
     width: 96%;
     margin: 0 auto;
@@ -717,10 +728,10 @@ onUnmounted(() => {
   }
   .footer {
     width: 96%;
-    height: 550px;
+    // height: 550px;
     margin: 10px auto 10px;
     .el-table--fit {
-      height: 100%;
+      // height: 100%;
       :deep(.el-table__header-wrapper) {
         background-color: #000;
         font-size: 15px;

src/views/housePrice/housePrice.vue

@@ -4,7 +4,7 @@
       <!-- <el-icon :size="23" class="camera"><VideoCameraFilled /></el-icon> -->
       <span class="cameratxt">房态管理/房价管理</span>
     </div>
-    <div>
+    <div class="scroll">
       <div class="middle">
         <div class="filter">
           <div class="filter_block">
@@ -20,32 +20,73 @@
                 :prefix-icon="Calendar"
                 placeholder="请选择日期"
               /> -->
-              <el-date-picker v-model="searchInput.createTime" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
-                :prefix-icon="Calendar" :clearable="false" placeholder="请选择日期" @change="searchData" />
+              <el-date-picker
+                v-model="searchInput.createTime"
+                type="date"
+                format="YYYY-MM-DD"
+                value-format="YYYY-MM-DD"
+                :prefix-icon="Calendar"
+                :clearable="false"
+                placeholder="请选择日期"
+                @change="searchData"
+              />
             </div>
             <div class="condition">
               <span>房型 : </span>
-              <el-select v-model="searchInput.changePriceSelId" class="m-2" placeholder="请选择房型" @change="searchData"
-                @clear="searchData" clearable>
-                <el-option :label="i.hName" :value="i.id" v-for="i in changePriceSelect" :key="i.id" />
+              <el-select
+                v-model="searchInput.changePriceSelId"
+                class="m-2"
+                placeholder="请选择房型"
+                @change="searchData"
+                @clear="searchData"
+                clearable
+              >
+                <el-option
+                  :label="i.hName"
+                  :value="i.id"
+                  v-for="i in changePriceSelect"
+                  :key="i.id"
+                />
               </el-select>
             </div>
           </div>
           <div class="filter_block">
-            <el-button style="margin-left: 20px" color="rgba(9, 101, 98, 1)" type="primary" class="search"
-              @click="roomClose"><span>批量改价</span></el-button>
-            <el-button style="margin-left: 20px" color="rgba(9, 101, 98, 1)" type="primary" class="search"
-              @click="recordPrice"><span>改价记录</span></el-button>
+            <el-button
+              style="margin-left: 20px"
+              color="rgba(9, 101, 98, 1)"
+              type="primary"
+              class="search"
+              @click="roomClose"
+              ><span>批量改价</span></el-button
+            >
+            <el-button
+              style="margin-left: 20px"
+              color="rgba(9, 101, 98, 1)"
+              type="primary"
+              class="search"
+              @click="recordPrice"
+              ><span>改价记录</span></el-button
+            >
           </div>
         </div>
       </div>
       <div class="footer" v-loading="loading">
-        <el-table :data="tableData.list" style="width: 100%" :header-cell-style="{
-          background: 'rgba(240, 243, 247, 1)',
-          height: '50px',
-        }">
+        <el-table
+          :data="tableData.list"
+          style="width: 100%"
+          :header-cell-style="{
+            background: 'rgba(240, 243, 247, 1)',
+            height: '50px',
+          }"
+        >
           <el-table-column align="center" prop="houseName" label="本地房型" />
-          <el-table-column v-for="(i, index) in tableHead" align="center" :key="index" :label="i.dateStr" width="130">
+          <el-table-column
+            v-for="(i, index) in tableHead"
+            align="center"
+            :key="index"
+            :label="i.dateStr"
+            width="130"
+          >
             <template #default="{ row }">
               <span>￥{{ row[i.dateStr] }}</span>
             </template>
@@ -53,14 +94,30 @@
         </el-table>
       </div>
       <!-- 批量改价 -->
-      <el-dialog class="roomCloseDilog" v-model="roomCloseDialogVisible" :close-on-click-modal="false"
-        :close-on-press-escape="false" title="批量改价" align-center width="700" :before-close="cancelRoomClose">
+      <el-dialog
+        class="roomCloseDilog"
+        v-model="roomCloseDialogVisible"
+        :close-on-click-modal="false"
+        :close-on-press-escape="false"
+        title="批量改价"
+        align-center
+        width="700"
+        :before-close="cancelRoomClose"
+      >
         <div class="last">
           <div class="roomUl">
             <div class="title">选择房型</div>
             <div class="delRoom">
-              <el-checkbox-group @change="changePriceSelcet" v-model="changePriceSelData">
-                <el-checkbox :label="i.id" v-for="i in changePirceRoomType" :key="i.id">{{ i.hName }}</el-checkbox>
+              <el-checkbox-group
+                @change="changePriceSelcet"
+                v-model="changePriceSelData"
+              >
+                <el-checkbox
+                  :label="i.id"
+                  v-for="i in changePirceRoomType"
+                  :key="i.id"
+                  >{{ i.hName }}</el-checkbox
+                >
               </el-checkbox-group>
             </div>
           </div>
@@ -70,12 +127,28 @@
               <div class="date">适用日期</div>
               <div class="addDate">
                 <div class="elDate">
-                  <div class="time_li" v-for="(i, index) in changePrice.createTime" :key="index">
-                    <el-date-picker v-model="changePrice.createTime[index]" type="daterange" range-separator="至"
-                      start-placeholder="起始时间" end-placeholder="结束时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
-                      :prefix-icon="Calendar" placeholder="请选择日期" />
-                    <img src="@/assets/addRoom.png" v-if="changePrice.createTime.length > 1" alt=""
-                      @click="delChangePriceTime(index)" />
+                  <div
+                    class="time_li"
+                    v-for="(i, index) in changePrice.createTime"
+                    :key="index"
+                  >
+                    <el-date-picker
+                      v-model="changePrice.createTime[index]"
+                      type="daterange"
+                      range-separator="至"
+                      start-placeholder="起始时间"
+                      end-placeholder="结束时间"
+                      format="YYYY-MM-DD"
+                      value-format="YYYY-MM-DD"
+                      :prefix-icon="Calendar"
+                      placeholder="请选择日期"
+                    />
+                    <img
+                      src="@/assets/addRoom.png"
+                      v-if="changePrice.createTime.length > 1"
+                      alt=""
+                      @click="delChangePriceTime(index)"
+                    />
                   </div>
                 </div>
                 <div class="addTime">
@@ -91,20 +164,31 @@
           <div class="roomUl">
             <div class="title">设置价格</div>
             <div class="delRoom">
-              <el-table :row-class-name="tableRowClassName" :data="changePriceData.list"
-                style="width: 100%; height: 280px" :header-cell-style="{
+              <el-table
+                :row-class-name="tableRowClassName"
+                :data="changePriceData.list"
+                style="width: 100%; height: 280px"
+                :header-cell-style="{
                   background: 'rgba(233, 242, 242, 1)',
                   height: '40px',
                   border: 0,
-                }">
+                }"
+              >
                 <el-table-column align="center" prop="hName" label="房型" />
                 <el-table-column align="center" />
                 <el-table-column align="center" label="价格" width="200">
                   <template #default="{ row }">
                     <div @click="inputPrice(row)">
                       <span v-if="row.inputPriceShow">{{ row.price }}</span>
-                      <el-input v-else :clearable="false" ref="inputPriceRef" @blur="inputPriceBlur(row)"
-                        v-model="row.price" class="w-50 m-2" placeholder="请输入价格" />
+                      <el-input
+                        v-else
+                        :clearable="false"
+                        ref="inputPriceRef"
+                        @blur="inputPriceBlur(row)"
+                        v-model="row.price"
+                        class="w-50 m-2"
+                        placeholder="请输入价格"
+                      />
                     </div>
                   </template>
                 </el-table-column>
@@ -113,79 +197,160 @@
           </div>
 
           <div class="options">
-            <el-button class="queding" color="rgba(9, 101, 98, 1)"
-              @click="notarizeRoomClose(roomCloseTree)">确认</el-button>
+            <el-button
+              class="queding"
+              color="rgba(9, 101, 98, 1)"
+              @click="notarizeRoomClose(roomCloseTree)"
+              >确认</el-button
+            >
             <el-button @click="cancelRoomClose">取消</el-button>
           </div>
         </div>
       </el-dialog>
 
       <!-- 改价记录 -->
-      <el-dialog class="recordDilog" v-model="recordDialogVisible" :close-on-click-modal="false"
-        :close-on-press-escape="false" title="改价记录" align-center width="1400" :before-close="cancelRecord">
+      <el-dialog
+        class="recordDilog"
+        v-model="recordDialogVisible"
+        :close-on-click-modal="false"
+        :close-on-press-escape="false"
+        title="改价记录"
+        align-center
+        width="1400"
+        :before-close="cancelRecord"
+      >
         <div class="middle">
           <div class="filter">
             <div class="condition">
               <span>房型 : </span>
-              <el-select v-model="recordSearch.roomType" class="m-2" placeholder="请选择房型" @clear="recordPriceSearch"
-                clearable>
-                <el-option :label="i.hName" :value="i.id" v-for="i in recordRoomType" :key="i.id" />
+              <el-select
+                v-model="recordSearch.roomType"
+                class="m-2"
+                placeholder="请选择房型"
+                @clear="recordPriceSearch"
+                clearable
+              >
+                <el-option
+                  :label="i.hName"
+                  :value="i.id"
+                  v-for="i in recordRoomType"
+                  :key="i.id"
+                />
               </el-select>
             </div>
             <div class="condition">
               <span>操作时间 : </span>
-              <el-date-picker v-model="recordSearch.operationTime" type="daterange" range-separator="-"
-                start-placeholder="起始时间" end-placeholder="结束时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
-                :prefix-icon="Calendar" placeholder="请选择日期" />
+              <el-date-picker
+                v-model="recordSearch.operationTime"
+                type="daterange"
+                range-separator="-"
+                start-placeholder="起始时间"
+                end-placeholder="结束时间"
+                format="YYYY-MM-DD"
+                value-format="YYYY-MM-DD"
+                :prefix-icon="Calendar"
+                placeholder="请选择日期"
+              />
             </div>
             <div class="condition">
               <span>价格日期 : </span>
-              <el-date-picker v-model="recordSearch.setDate" type="daterange" range-separator="-" start-placeholder="起始时间"
-                end-placeholder="结束时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" :prefix-icon="Calendar"
-                placeholder="请选择日期" />
+              <el-date-picker
+                v-model="recordSearch.setDate"
+                type="daterange"
+                range-separator="-"
+                start-placeholder="起始时间"
+                end-placeholder="结束时间"
+                format="YYYY-MM-DD"
+                value-format="YYYY-MM-DD"
+                :prefix-icon="Calendar"
+                placeholder="请选择日期"
+              />
             </div>
             <div class="condition">
               <span>操作人 : </span>
-              <el-input :clearable="true" @clear="recordPriceSearch" v-model="recordSearch.keyWord" class="w-50 m-2"
-                placeholder="请输入操作人名字" style="width: 230px" />
+              <el-input
+                :clearable="true"
+                @clear="recordPriceSearch"
+                v-model="recordSearch.keyWord"
+                class="w-50 m-2"
+                placeholder="请输入操作人名字"
+                style="width: 230px"
+              />
             </div>
-            <el-button style="margin-left: 20px" color="rgba(9, 101, 98, 1)" type="primary" class="search"
-              @click="recordPriceSearch"><el-icon>
+            <el-button
+              style="margin-left: 20px"
+              color="rgba(9, 101, 98, 1)"
+              type="primary"
+              class="search"
+              @click="recordPriceSearch"
+              ><el-icon>
                 <Search />
-              </el-icon> <span>查询</span></el-button>
-            <el-button style="margin-left: 20px" color="rgba(9, 101, 98, 1)" type="primary" class="search"
-              @click="importExcel"><span>导出房价</span></el-button>
+              </el-icon>
+              <span>查询</span></el-button
+            >
+            <el-button
+              style="margin-left: 20px"
+              color="rgba(9, 101, 98, 1)"
+              type="primary"
+              class="search"
+              @click="importExcel"
+              ><span>导出房价</span></el-button
+            >
           </div>
         </div>
         <div class="footer" v-loading="loading">
-          <el-table :row-class-name="tableRowClassName2" :data="recordData.list" @selection-change="handleSelectionChange"
-            style="width: 100%; height: 550px" :header-cell-style="{
+          <el-table
+            :row-class-name="tableRowClassName2"
+            :data="recordData.list"
+            @selection-change="handleSelectionChange"
+            style="width: 100%; height: 550px"
+            :header-cell-style="{
               background: 'rgba(240, 243, 247, 1)',
               height: '50px',
               border: 0,
-            }">
+            }"
+          >
             <el-table-column align="center" prop="houseName" label="房型">
             </el-table-column>
             <el-table-column align="center" prop="setDate" label="价格日期" />
             <el-table-column align="center" prop="price" label="修改后价格" />
-            <el-table-column align="center" prop="operationName" label="操作人" />
-            <el-table-column align="center" prop="operationTime" label="操作时间">
+            <el-table-column
+              align="center"
+              prop="operationName"
+              label="操作人"
+            />
+            <el-table-column
+              align="center"
+              prop="operationTime"
+              label="操作时间"
+            >
             </el-table-column>
           </el-table>
         </div>
         <div class="pageSize">
           <span></span>
-          <el-pagination background :current-page="recordPage" :page-size="recordSize"
-            layout="total, prev, pager, next, jumper, slot" :total="recordTotal"
-            @update:current-page="handleCurrentChange2" />
+          <el-pagination
+            background
+            :current-page="recordPage"
+            :page-size="recordSize"
+            layout="total, prev, pager, next, jumper, slot"
+            :total="recordTotal"
+            @update:current-page="handleCurrentChange2"
+          />
         </div>
       </el-dialog>
 
       <!-- 分页组件 -->
       <div class="pageSize">
         <span></span>
-        <el-pagination background :current-page="currentPage" :page-size="pageSize"
-          layout="total, prev, pager, next, jumper, slot" :total="total" @update:current-page="handleCurrentChange" />
+        <el-pagination
+          background
+          :current-page="currentPage"
+          :page-size="pageSize"
+          layout="total, prev, pager, next, jumper, slot"
+          :total="total"
+          @update:current-page="handleCurrentChange"
+        />
       </div>
     </div>
   </div>
@@ -439,7 +604,7 @@ const searchData = (val) => {
 // 批量改价功能（------------------------------------）
 const roomClose = () => {
   roomCloseDialogVisible.value = true;
-  changePrice.createTime = [[]]
+  changePrice.createTime = [[]];
 };
 // 关闭批量改价
 const cancelRoomClose = () => {
@@ -771,8 +936,9 @@ onBeforeMount(async () => {
 
 <style scoped lang="scss">
 .content-box {
-  width: 97.5%;
-  height: 89%;
+  min-width: 1000px;
+  width: calc(100vw - 240px);
+  height: calc(100vh - 105px);
   margin: 20px auto;
   background-color: #fff;
   color: #fff;
@@ -792,7 +958,9 @@ onBeforeMount(async () => {
     font-weight: 600;
 
     span {
-      margin-right: 20px;
+      display: block;
+      height: 60px;
+      line-height: 60px;
       cursor: pointer;
     }
 
@@ -800,7 +968,10 @@ onBeforeMount(async () => {
       color: rgba(111, 182, 184, 1);
     }
   }
-
+  .scroll {
+    height: calc(100% - 61px);
+    overflow: auto;
+  }
   .middle {
     width: 96%;
     margin: 0 auto;
@@ -853,11 +1024,11 @@ onBeforeMount(async () => {
 
   .footer {
     width: 96%;
-    height: 550px;
+    // height: 550px;
     margin: 10px auto 30px;
 
     .el-table--fit {
-      height: 100%;
+      // height: 100%;
 
       :deep(.el-table__header-wrapper) {
         background-color: #000;
@@ -876,7 +1047,6 @@ onBeforeMount(async () => {
 
       :deep(.el-table__row td) {
         padding: 0;
-        // border: 0;
         // border: 1px solid #ccc;
       }
     }
@@ -893,7 +1063,6 @@ onBeforeMount(async () => {
     }
 
     .el-pagination {
-
       // width: 1600px;
       :deep(.el-pagination__total) {
         color: #000;

src/views/houseState/houseState.vue

@@ -77,11 +77,12 @@
     <!-- 页面内容  日历-->
     <div class="footer" v-show="dateNum == '日历'">
       <el-table
+        ref="tableScrollRef"
         :data="tableDate"
         style="width: 100%"
-        :span-method="arraySpanMethod"
         v-loading="calendarLoading"
-      >
+        >
+        <!-- :span-method="arraySpanMethod" -->
         <el-table-column prop="date" align="center" fixed="left">
           <template #header>
             <div class="calendar">
@@ -486,6 +487,18 @@
           </el-table-column>
         </el-table-column>
       </el-table>
+      <!-- 分页组件 -->
+      <div class="pageSize">
+        <span></span>
+        <el-pagination
+          background
+          :current-page="currentPageState"
+          :page-size="pageSizeState"
+          layout="total, prev, pager, next, jumper, slot"
+          :total="totalState"
+          @update:current-page="handleCurrentChangeState"
+        />
+      </div>
     </div>
     <!-- 页面内容  单日-->
     <div
@@ -1140,6 +1153,7 @@ import {
   reactive,
   nextTick,
   watch,
+  onMounted,
   onBeforeMount,
   onUnmounted,
 } from "vue";
@@ -1178,7 +1192,11 @@ const roomcloseForm = reactive({
 
 // 日历表格数据（--------------------------------------）
 const tableDate = ref();
+const tableScrollRef = ref();
 const calendarLoading = ref(false);
+const currentPageState = ref(1);
+const pageSizeState = ref(1);
+const totalState = ref(8);
 // 日期和剩余房间
 const dateTimes = ref([
   {
@@ -1217,6 +1235,22 @@ const dateTimes = ref([
     dateStr: "2023-08-18",
     roomSum: "4",
   },
+  {
+    dateStr: "2023-08-19",
+    roomSum: "4",
+  },
+  {
+    dateStr: "2023-08-20",
+    roomSum: "4",
+  },
+  {
+    dateStr: "2023-08-21",
+    roomSum: "4",
+  },
+  {
+    dateStr: "2023-08-22",
+    roomSum: "4",
+  },
 ]);
 const tableBody = ref([
   {
@@ -1869,6 +1903,8 @@ const getList = async () => {
     let data = {
       managerId: sessionStorage.getItem("token"), // 当前页
       showType: 1, // 房型关键字
+      page: currentPageState.value,
+      rows: pageSizeState.value,
     };
     if (calendarTime.value) {
       data.setDate = calendarTime.value;
@@ -1881,7 +1917,13 @@ const getList = async () => {
     });
     console.log(res, "日历房源数据");
     if (res.data.code == 200) {
-      tableDate.value = res.data.data.datas;
+      tableDate.value = res.data.data.pageList;
+      totalState.value=res.data.data.total
+
+      // setTimeout(()=>{
+      //   // tableDate.value = res.data.data.datas.slice(0, 10)
+      //   tableDate.value = res.data.data.datas
+      // },1000)
       res.data.data.dateTimes.forEach((item) => {
         item.week = item.weekStr.slice(2, 3);
         item.date = item.dateStr.slice(5);
@@ -1920,36 +1962,36 @@ const getList = async () => {
         center: true,
       });
     }
-    let arr = [];
-    arr = res.data.data.datas.map((item) => {
-      return {
-        houseName: item.houseName,
-        id: item.id,
-        numberName: item.numberName,
-        scope: [],
-      };
-    });
-    let roomtype = [];
-    arr.reduce(function (prev, cur, index) {
-      // console.log(prev, cur);
-      if (prev) {
-        roomtype.push({ ind: 0, scope: [], ...prev });
-      } else {
-        if (cur.houseName != roomtype[roomtype.length - 1].houseName) {
-          roomtype.push({ ind: index, scope: [], ...cur });
-        }
-      }
-      // return Math.max(prev, cur);
-    });
-    roomtype.forEach((item, index) => {
-      tableDate.value.forEach((i, ind) => {
-        if (item.houseName == i.houseName) {
-          item.scope.push(ind);
-        }
-      });
-    });
-    console.log(roomtype);
-    roomType.value = roomtype;
+    // let arr = [];
+    // arr = res.data.data.pageList.map((item) => {
+    //   return {
+    //     houseName: item.houseName,
+    //     id: item.id,
+    //     numberName: item.numberName,
+    //     scope: [],
+    //   };
+    // });
+    // let roomtype = [];
+    // arr.reduce(function (prev, cur, index) {
+    //   // console.log(prev, cur);
+    //   if (prev) {
+    //     roomtype.push({ ind: 0, scope: [], ...prev });
+    //   } else {
+    //     if (cur.houseName != roomtype[roomtype.length - 1].houseName) {
+    //       roomtype.push({ ind: index, scope: [], ...cur });
+    //     }
+    //   }
+    //   // return Math.max(prev, cur);
+    // });
+    // roomtype.forEach((item, index) => {
+    //   tableDate.value.forEach((i, ind) => {
+    //     if (item.houseName == i.houseName) {
+    //       item.scope.push(ind);
+    //     }
+    //   });
+    // });
+    // console.log(roomtype);
+    // roomType.value = roomtype;
   } else if ((dateNum.value = "单日")) {
     let data = {
       managerId: sessionStorage.getItem("token"), // 当前页
@@ -1967,14 +2009,14 @@ const getList = async () => {
     console.log(res, "单日房源数据");
     if (res.data.code == 200) {
       dateOneLoading.value = false;
-      res.data.data.data.forEach((item) => {
+      res.data.data.pageList.forEach((item) => {
         if (item.houseNumberList) {
           item.houseNumberList.forEach((i) => {
             i.roomShow = false;
           });
         }
       });
-      dateOne.value = res.data.data.data;
+      dateOne.value = res.data.data.pageList;
     }
 
     // if (res.data.code == 200) {
@@ -1990,6 +2032,91 @@ const getList = async () => {
     // }
   }
 };
+const tableScroll = (ele) => {
+  // ele : 绑定的表格元素
+  // console.log(ele.layout.table, "priceTable.value.bodyWrapper");
+  let table = ele.layout.table.refs.bodyWrapper;
+  table.addEventListener(
+    "scroll",
+    async (e) => {
+      // if (tableScrollRef.value) {
+      //   e.target.scrollTop = 0;
+      //   // scrolltop8.value = false;
+      //   console.log("置顶到顶部");
+      // }
+      let scrollTop = e.target.scrollTop;
+      let scrollHeight = e.target.scrollHeight;
+      let clientHeight = e.target.clientHeight;
+      console.log(scrollTop, "scrollTop");
+      console.log(scrollHeight, "scrollHeight");
+      console.log(clientHeight);
+      console.log(scrollTop + clientHeight);
+      if (scrollTop + clientHeight == scrollHeight) {
+        console.log("滚动到底部了");
+        // calendarLoading.value = true;
+        if (tableDate.value.length <= 10) {
+          let data = {
+            managerId: sessionStorage.getItem("token"), // 当前页
+            showType: 1, // 房型关键字
+          };
+          if (calendarTime.value) {
+            data.setDate = calendarTime.value;
+          }
+          let res = await axios({
+            method: "get",
+            url: api.value + "/mhotel/house/number/status/queryData.action",
+            headers: {},
+            params: data,
+          });
+          console.log(res, "日历房源数据");
+          if (res.data.code == 200) {
+            tableDate.value = res.data.data.datas;
+            // calendarLoading.value = false;
+          } else {
+            // calendarLoading.value = false;
+            ElMessage({
+              type: "error",
+              showClose: true,
+              message: res.data.message,
+              center: true,
+            });
+          }
+          let arr = [];
+          arr = res.data.data.datas.map((item) => {
+            return {
+              houseName: item.houseName,
+              id: item.id,
+              numberName: item.numberName,
+              scope: [],
+            };
+          });
+          let roomtype = [];
+          arr.reduce(function (prev, cur, index) {
+            // console.log(prev, cur);
+            if (prev) {
+              roomtype.push({ ind: 0, scope: [], ...prev });
+            } else {
+              if (cur.houseName != roomtype[roomtype.length - 1].houseName) {
+                roomtype.push({ ind: index, scope: [], ...cur });
+              }
+            }
+            // return Math.max(prev, cur);
+          });
+          roomtype.forEach((item, index) => {
+            tableDate.value.forEach((i, ind) => {
+              if (item.houseName == i.houseName) {
+                item.scope.push(ind);
+              }
+            });
+          });
+          console.log(roomtype);
+          roomType.value = roomtype;
+        }
+      }
+    },
+    true
+  );
+};
 
 // 房间筛选(------------------------------------------)
 const roomFilter = () => {
@@ -3019,11 +3146,20 @@ const handleCurrentChange = (value) => {
   currentPage.value = value;
   getList();
 };
+// 房态分页
+const handleCurrentChangeState = (value) => {
+  // console.log(value);
+  currentPageState.value = value;
+  getList();
+};
 
 onBeforeMount(() => {
   api.value = store.state.user.api;
   getList();
 });
+onMounted(() => {
+  // tableScroll(tableScrollRef.value)
+});
 onUnmounted(() => {
   // document.removeEventListener("keyup", Enters);
 });
@@ -3031,8 +3167,9 @@ onUnmounted(() => {
 
 <style scoped lang="scss">
 .content-box {
-  width: 97.5%;
-  height: 89%;
+  min-width: 1000px;
+  width: calc(100vw - 240px);
+  height: calc(100vh - 105px);
   margin: 20px auto;
   background-color: #fff;
   color: #fff;
@@ -3161,11 +3298,13 @@ onUnmounted(() => {
 
   .footer {
     width: 96%;
-    height: 600px;
+    // height: 600px;
+    height: calc(100% - 118px);
+    overflow: auto;
     margin: 10px auto 10px;
 
     .el-table--fit {
-      height: 100%;
+      height: calc(100% - 60px);
 
       // border: 1px solid #ccc;
       :deep(.el-table__header-wrapper) {
@@ -3422,7 +3561,7 @@ onUnmounted(() => {
   .footer_oneday {
     color: #000;
     width: 96%;
-    height: 630px;
+    // height: 630px;
     overflow: auto;
     margin: 0 auto;
 
@@ -3830,10 +3969,12 @@ onUnmounted(() => {
             color: #000;
             margin-right: 15px;
           }
+
           .delRooms {
             display: flex;
             align-items: center;
           }
+
           .delRoom {
             ul {
               width: 560px;
@@ -3903,7 +4044,7 @@ onUnmounted(() => {
   .el-pagination {
     // width: 1600px;
     width: 96%;
-    margin: 20px auto 18px;
+    margin: 20px auto 0px;
     justify-content: flex-end;
 
     :deep(.el-pagination__total) {

src/views/ledger/ledger.vue

@@ -4,7 +4,7 @@
       <!-- <el-icon :size="23" class="camera"><VideoCameraFilled /></el-icon> -->
       <span class="cameratxt">台账管理</span>
     </div>
-    <div>
+    <div class="scroll">
       <div class="top">
         <ul>
           <li>
@@ -553,8 +553,9 @@ onUnmounted(() => {
 
 <style scoped lang="scss">
 .content-box {
-  width: 97.5%;
-  height: 89%;
+  min-width: 1000px;
+  width: calc(100vw - 240px);
+  height: calc(100vh - 105px);
   margin: 20px auto;
   background-color: #fff;
   color: #fff;
@@ -574,7 +575,9 @@ onUnmounted(() => {
     font-weight: 600;
 
     span {
-      margin-right: 20px;
+      display: block;
+      height: 60px;
+      line-height: 60px;
       cursor: pointer;
     }
 
@@ -582,6 +585,10 @@ onUnmounted(() => {
       color: rgba(111, 182, 184, 1);
     }
   }
+  .scroll {
+    height: calc(100% - 61px);
+    overflow: auto;
+  }
   .top {
     width: 96%;
     height: 150px;
@@ -698,11 +705,11 @@ onUnmounted(() => {
 
   .footer {
     width: 96%;
-    height: 400px;
+    // height: 400px;
     margin: 10px auto 30px;
 
     .el-table--fit {
-      height: 100%;
+      // height: 100%;
 
       :deep(.el-table__header-wrapper) {
         background-color: #000;

src/views/login/index.vue

@@ -83,6 +83,30 @@
           </el-form-item>
         </el-form>
       </div>
+      <div class="policeNum">
+        <div class="leftContent">
+          <span></span>
+        </div>
+        <div class="rigthContent">
+          <span
+            ><a
+              target="_blank"
+              href="https://beian.mps.gov.cn/#/query/webSearch"
+            >
+              赣公网安备36092502000028号</a
+            >
+          </span>
+          <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
+          <span>
+            <a
+              target="_blank"
+              href="https://beian.miit.gov.cn/#/Integrated/index"
+            >
+              赣ICP备2023009877号-2</a
+            >
+          </span>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -211,6 +235,7 @@ onUnmounted(() => {
     background-size: 110% 116%;
     // background-position: -19px -28px;
     .loginForm {
+      min-width: 600px;
       flex: 1;
       height: 740px;
       // background-color: #fff;
@@ -318,6 +343,35 @@ onUnmounted(() => {
         letter-spacing: 10px;
       }
     }
+    .policeNum {
+      position: absolute;
+      bottom: 10px;
+      width: 100vw;
+      display: flex;
+      .leftContent {
+        span {
+          display: block;
+          width: 796px;
+        }
+      }
+      .rigthContent {
+        min-width: 600px;
+        width: calc(100vw - 796px);
+        text-align: center;
+        font-size: 12px;
+        span:not(:nth-child(2)) {
+          a {
+            color: #000;
+          }
+          cursor: pointer;
+        }
+        span:not(:nth-child(2)):hover {
+          a {
+            color: #539391;
+          }
+        }
+      }
+    }
   }
 }
 </style>

src/views/order/order.vue

@@ -4,7 +4,7 @@
       <!-- <el-icon :size="23" class="camera"><VideoCameraFilled /></el-icon> -->
       <span class="cameratxt">订单管理</span>
     </div>
-    <div>
+    <div class="scroll">
       <div class="top">
         <ul>
           <li>
@@ -1269,8 +1269,10 @@ onUnmounted(() => {
 
 <style scoped lang="scss">
 .content-box {
-  width: 97.5%;
-  height: 89%;
+  min-width: 1000px;
+  width: calc(100vw - 240px);
+  // height: calc(100vh - 120px);
+  height: calc(100vh - 105px);
   margin: 20px auto;
   background-color: #fff;
   color: #fff;
@@ -1290,10 +1292,9 @@ onUnmounted(() => {
     font-weight: 600;
 
     span {
-      // display: inline-block;
-      // height: 60px;
-      // line-height: 60px;
-      margin-right: 20px;
+      display: block;
+      height: 60px;
+      line-height: 60px;
       cursor: pointer;
     }
 
@@ -1301,7 +1302,10 @@ onUnmounted(() => {
       color: rgba(111, 182, 184, 1);
     }
   }
-
+  .scroll {
+    height: calc(100% - 61px);
+    overflow: auto;
+  }
   .top {
     width: 96%;
     height: 150px;
@@ -1419,12 +1423,11 @@ onUnmounted(() => {
 
   .footer {
     width: 96%;
-    height: 402px;
+    // height: 402px;
     margin: 10px auto 30px;
 
     .el-table--fit {
-      height: 100%;
-
+      // height: 402px;
       :deep(.el-table__header-wrapper) {
         background-color: #000;
         font-size: 15px;
@@ -1453,7 +1456,7 @@ onUnmounted(() => {
 
       :deep(.el-table__row td) {
         padding: 0;
-        border: 0;
+        // border: 0;
       }
 
       .el-button--primary {

src/views/orderEvaluate/orderEvaluate.vue

@@ -4,29 +4,57 @@
       <!-- <el-icon :size="23" class="camera"><VideoCameraFilled /></el-icon> -->
       <span class="cameratxt">订单评价</span>
     </div>
-    <div>
+    <div class="scroll">
       <div class="middle">
         <div class="filter">
           <div class="condition">
             <span>关键字 : </span>
-            <el-input :clearable="true" @clear="searchBtn" v-model="searchInput.keyWord" class="w-50 m-2"
-              placeholder="请输入关键字" style="width: 180px" />
+            <el-input
+              :clearable="true"
+              @clear="searchBtn"
+              v-model="searchInput.keyWord"
+              class="w-50 m-2"
+              placeholder="请输入关键字"
+              style="width: 180px"
+            />
           </div>
           <div class="condition">
             <span>退房日期 : </span>
-            <el-date-picker v-model="searchInput.createTime" type="daterange" range-separator="-" start-placeholder="起始时间"
-              end-placeholder="结束时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" :prefix-icon="Calendar"
-              placeholder="请选择退房日期" />
+            <el-date-picker
+              v-model="searchInput.createTime"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="起始时间"
+              end-placeholder="结束时间"
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+              :prefix-icon="Calendar"
+              placeholder="请选择退房日期"
+            />
           </div>
           <div class="condition">
             <span>评价日期 : </span>
-            <el-date-picker v-model="searchInput.evaluate" type="daterange" range-separator="-" start-placeholder="起始时间"
-              end-placeholder="结束时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" :prefix-icon="Calendar"
-              placeholder="请选择评价日期" />
+            <el-date-picker
+              v-model="searchInput.evaluate"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="起始时间"
+              end-placeholder="结束时间"
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+              :prefix-icon="Calendar"
+              placeholder="请选择评价日期"
+            />
           </div>
           <div class="condition">
             <span>评分 : </span>
-            <el-select :clearable="true" v-model="searchInput.score" class="m-2" placeholder="请选择评分" @clear="searchBtn">
+            <el-select
+              :clearable="true"
+              v-model="searchInput.score"
+              class="m-2"
+              placeholder="请选择评分"
+              @clear="searchBtn"
+            >
               <el-option label="1星" :value="1" />
               <!-- <el-option label="1星半" :value="1.5" /> -->
               <el-option label="2星" :value="2" />
@@ -40,15 +68,28 @@
           </div>
           <div class="condition">
             <span>状态 : </span>
-            <el-select :clearable="true" v-model="searchInput.status" class="m-2" placeholder="请选择状态" @clear="searchBtn">
+            <el-select
+              :clearable="true"
+              v-model="searchInput.status"
+              class="m-2"
+              placeholder="请选择状态"
+              @clear="searchBtn"
+            >
               <el-option label="待回复" :value="1" />
               <el-option label="已回复" :value="2" />
             </el-select>
           </div>
-          <el-button style="margin-left: 20px" color="rgba(9, 101, 98, 1)" type="primary" class="search"
-            @click="searchBtn"><el-icon>
+          <el-button
+            style="margin-left: 20px"
+            color="rgba(9, 101, 98, 1)"
+            type="primary"
+            class="search"
+            @click="searchBtn"
+            ><el-icon>
               <Search />
-            </el-icon> <span>查询</span></el-button>
+            </el-icon>
+            <span>查询</span></el-button
+          >
           <!-- <el-button
             style="margin-left: 20px"
             color="rgba(9, 101, 98, 1)"
@@ -60,12 +101,17 @@
         </div>
       </div>
       <div class="footer" v-loading="loading">
-        <el-table :row-class-name="tableRowClassName" :data="tableData.list" @selection-change="handleSelectionChange"
-          style="width: 100%" :header-cell-style="{
+        <el-table
+          :row-class-name="tableRowClassName"
+          :data="tableData.list"
+          @selection-change="handleSelectionChange"
+          style="width: 100%"
+          :header-cell-style="{
             background: 'rgba(240, 243, 247, 1)',
             height: '50px',
             border: 0,
-          }">
+          }"
+        >
           <!-- <el-table-column align="center" type="selection" width="80" /> -->
           <!-- <el-table-column
                 width="150"
@@ -93,7 +139,12 @@
               </div>
             </template>
           </el-table-column>
-          <el-table-column align="center" fixed="right" label="操作" width="150">
+          <el-table-column
+            align="center"
+            fixed="right"
+            label="操作"
+            width="150"
+          >
             <template #default="scope">
               <div class="look looks" @click="chat(scope.row)">回复</div>
             </template>
@@ -273,78 +324,146 @@
           </el-dialog> -->
 
         <!-- 订单详情 -->
-        <el-dialog class="addStaff" v-model="addDialogVisible" :close-on-click-modal="false"
-          :close-on-press-escape="false" title="订单详情" align-center width="600" :before-close="cancelInfo">
+        <el-dialog
+          class="addStaff"
+          v-model="addDialogVisible"
+          :close-on-click-modal="false"
+          :close-on-press-escape="false"
+          title="订单详情"
+          align-center
+          width="600"
+          :before-close="cancelInfo"
+        >
           <div class="order_info">
             <h2>
               订单状态 :
-              <span v-if="ruleForm.orderStatus == 1" style="color: rgba(9, 101, 98, 1)">待支付</span>
-              <span v-if="ruleForm.orderStatus == 2" style="color: rgba(9, 101, 98, 1)">已支付</span>
-              <span v-if="ruleForm.orderStatus == 3" style="color: rgba(9, 101, 98, 1)">待入住</span>
-              <span v-if="ruleForm.orderStatus == 4" style="color: rgba(9, 101, 98, 1)">已入住</span>
-              <span v-if="ruleForm.orderStatus == 5" style="color: rgba(9, 101, 98, 1)">已消费</span>
-              <span v-if="ruleForm.orderStatus == 6" style="color: rgba(9, 101, 98, 1)">支付超时</span>
-              <span v-if="ruleForm.orderStatus == 7" style="color: rgba(9, 101, 98, 1)">已取消</span>
-              <span v-if="ruleForm.orderStatus == 8" style="color: rgba(9, 101, 98, 1)">已退单</span>
-              <span v-if="ruleForm.orderStatus == 9" style="color: rgba(9, 101, 98, 1)">已退款</span>
-              <span v-if="ruleForm.orderStatus == 10" style="color: rgba(9, 101, 98, 1)">退款中</span>
+              <span
+                v-if="ruleForm.orderStatus == 1"
+                style="color: rgba(9, 101, 98, 1)"
+                >待支付</span
+              >
+              <span
+                v-if="ruleForm.orderStatus == 2"
+                style="color: rgba(9, 101, 98, 1)"
+                >已支付</span
+              >
+              <span
+                v-if="ruleForm.orderStatus == 3"
+                style="color: rgba(9, 101, 98, 1)"
+                >待入住</span
+              >
+              <span
+                v-if="ruleForm.orderStatus == 4"
+                style="color: rgba(9, 101, 98, 1)"
+                >已入住</span
+              >
+              <span
+                v-if="ruleForm.orderStatus == 5"
+                style="color: rgba(9, 101, 98, 1)"
+                >已消费</span
+              >
+              <span
+                v-if="ruleForm.orderStatus == 6"
+                style="color: rgba(9, 101, 98, 1)"
+                >支付超时</span
+              >
+              <span
+                v-if="ruleForm.orderStatus == 7"
+                style="color: rgba(9, 101, 98, 1)"
+                >已取消</span
+              >
+              <span
+                v-if="ruleForm.orderStatus == 8"
+                style="color: rgba(9, 101, 98, 1)"
+                >已退单</span
+              >
+              <span
+                v-if="ruleForm.orderStatus == 9"
+                style="color: rgba(9, 101, 98, 1)"
+                >已退款</span
+              >
+              <span
+                v-if="ruleForm.orderStatus == 10"
+                style="color: rgba(9, 101, 98, 1)"
+                >退款中</span
+              >
             </h2>
             <div class="workNum">
-              <span class="titles">订单号:</span><span>{{ ruleForm.orderNum }}</span>
+              <span class="titles">订单号:</span
+              ><span>{{ ruleForm.orderNum }}</span>
             </div>
             <div class="workNum">
               <span class="titles">订房时间</span>
-              <span>{{ ruleForm.orderStartTime }} &nbsp;—&nbsp;
+              <span
+                >{{ ruleForm.orderStartTime }} &nbsp;—&nbsp;
                 {{ ruleForm.orderEndTime }}&nbsp;&nbsp; 共{{
                   ruleForm.orderLiveTime
-                }}</span>
+                }}</span
+              >
             </div>
             <div class="workNum">
               <span class="titles">大床型</span>
               <span>{{ ruleForm.hName }}</span>
             </div>
             <div class="workNum">
-              <span class="titles">住客姓名 </span><span>{{ ruleForm.userName }}</span>
+              <span class="titles">住客姓名 </span
+              ><span>{{ ruleForm.userName }}</span>
             </div>
             <div class="workNum">
-              <span class="titles">联系电话 </span><span>{{ ruleForm.userPhone }}</span>
+              <span class="titles">联系电话 </span
+              ><span>{{ ruleForm.userPhone }}</span>
             </div>
             <!-- <div class="workNum">
               <span class="titles">预计到店 </span
               ><span>7月26日 14:00之前</span>
             </div> -->
             <div class="workNum">
-              <span class="titles">订单金额 </span><span>￥ {{ ruleForm.payAccount }}</span>
+              <span class="titles">订单金额 </span
+              ><span>￥ {{ ruleForm.payAccount }}</span>
             </div>
             <div class="workNum">
-              <span class="titles">支付时间 </span><span>{{ ruleForm.payTime }}</span>
+              <span class="titles">支付时间 </span
+              ><span>{{ ruleForm.payTime }}</span>
             </div>
           </div>
         </el-dialog>
         <!-- 回复内容界面 -->
-        <el-dialog class="chat" v-model="chatVisible" :close-on-click-modal="false" :close-on-press-escape="false"
-          title="回复" align-center width="900" :before-close="cancelChat">
+        <el-dialog
+          class="chat"
+          v-model="chatVisible"
+          :close-on-click-modal="false"
+          :close-on-press-escape="false"
+          title="回复"
+          align-center
+          width="900"
+          :before-close="cancelChat"
+        >
           <div class="order_info">
             <h3>关联订单</h3>
             <div class="workNum">
-              <span class="titles">订单号:</span><span>{{ ruleForm.orderNum }}</span>
+              <span class="titles">订单号:</span
+              ><span>{{ ruleForm.orderNum }}</span>
             </div>
 
             <div class="workNum">
-              <span class="titles">订房时间:</span><span>{{ ruleForm.orderLiveTime }}</span>
+              <span class="titles">订房时间:</span
+              ><span>{{ ruleForm.orderLiveTime }}</span>
             </div>
             <div class="workNum">
               <span class="titles">房型:</span><span>{{ ruleForm.hName }}</span>
             </div>
             <div class="workNum">
-              <span class="titles">住客姓名:</span><span>{{ ruleForm.userName }}</span>
+              <span class="titles">住客姓名:</span
+              ><span>{{ ruleForm.userName }}</span>
             </div>
             <div class="workNum">
-              <span class="titles">联系电话:</span><span>{{ ruleForm.userPhone }}</span>
+              <span class="titles">联系电话:</span
+              ><span>{{ ruleForm.userPhone }}</span>
             </div>
 
             <div class="workNum">
-              <span class="titles">订单金额:</span><span>{{ ruleForm.payAccount }}</span>
+              <span class="titles">订单金额:</span
+              ><span>{{ ruleForm.payAccount }}</span>
             </div>
             <h3>评价</h3>
             <div class="chatContent">
@@ -361,11 +480,24 @@
                 <span class="reply" @click="reply(1)">回复</span>
               </div>
               <div class="star">
-                <el-rate :model-value="ruleForm.bookingCommentList.score" allow-half color="rgba(234, 149, 24, 1)"
-                  size="large" disabled disabled-void-color="rgba(179, 179, 179, 1)" show-score score-template="非常棒" />
+                <el-rate
+                  :model-value="ruleForm.bookingCommentList.score"
+                  allow-half
+                  color="rgba(234, 149, 24, 1)"
+                  size="large"
+                  disabled
+                  disabled-void-color="rgba(179, 179, 179, 1)"
+                  show-score
+                  score-template="非常棒"
+                />
               </div>
               <div class="imglist">
-                <img v-for="i in ruleForm.fileInfos" :key="i.id" :src="i.url" alt="">
+                <img
+                  v-for="i in ruleForm.fileInfos"
+                  :key="i.id"
+                  :src="i.url"
+                  alt=""
+                />
               </div>
               <div class="replyCont">
                 {{ ruleForm.bookingCommentList.content }}
@@ -384,18 +516,29 @@
                       <span>评论（{{ ruleForm.lowCommentLists.length }}）</span>
                     </div>
                   </template>
-                  <div class="chatContent" v-for="(i, index) in ruleForm.lowCommentLists" :key="i.id">
+                  <div
+                    class="chatContent"
+                    v-for="(i, index) in ruleForm.lowCommentLists"
+                    :key="i.id"
+                  >
                     <!-- 商家头像 -->
                     <div>
                       <div class="info client">
                         <img v-if="i.headPhoto" :src="i.headPhoto" alt="" />
                         <img v-else src="@/assets/photo.png" alt="" />
                         <div class="title">
-                          <div class="name1" v-if="i.createName">{{ i.createName }}</div>
+                          <div class="name1" v-if="i.createName">
+                            {{ i.createName }}
+                          </div>
                           <div class="name1" v-else>商家</div>
                           <div class="name2">{{ i.createDate }}</div>
                         </div>
-                        <span class="reply" @click="reply(i)" v-if="i.status == 1">回复</span>
+                        <span
+                          class="reply"
+                          @click="reply(i)"
+                          v-if="i.status == 1"
+                          >回复</span
+                        >
                       </div>
 
                       <div class="replyCont clientCont">
@@ -405,18 +548,30 @@
                           </template>
                           <div v-for="item in i.lowCommentList" :key="item.id">
                             <div class="info merchant">
-                              <img v-if="item.headPhoto" :src="item.headPhoto" alt="" />
+                              <img
+                                v-if="item.headPhoto"
+                                :src="item.headPhoto"
+                                alt=""
+                              />
                               <img v-else src="@/assets/photo.png" alt="" />
                               <div class="title">
-                                <div class="name1" v-if="item.createName">{{ item.createName }}</div>
+                                <div class="name1" v-if="item.createName">
+                                  {{ item.createName }}
+                                </div>
                                 <div class="name1" v-else>商家</div>
                                 <div class="name2">{{ item.createDate }}</div>
                               </div>
-                              <span class="reply" @click="reply(item)">回复</span>
+                              <span class="reply" @click="reply(item)"
+                                >回复</span
+                              >
                             </div>
                             <div class="replyCont merchantCont">
-                              <span v-if="item.createName">用户 回复 商家 :</span>
-                              <span v-else>商家 回复 {{ item.commentName }} :</span>
+                              <span v-if="item.createName"
+                                >用户 回复 商家 :</span
+                              >
+                              <span v-else
+                                >商家 回复 {{ item.commentName }} :</span
+                              >
                               {{ item.content }}
                             </div>
                           </div>
@@ -470,15 +625,33 @@
           </div>
         </el-dialog>
         <!-- 回复弹窗 -->
-        <el-dialog class="reply" v-model="replyVisible" :close-on-click-modal="false" :close-on-press-escape="false"
-          title="回复" align-center width="500" :before-close="cancelReply">
+        <el-dialog
+          class="reply"
+          v-model="replyVisible"
+          :close-on-click-modal="false"
+          :close-on-press-escape="false"
+          title="回复"
+          align-center
+          width="500"
+          :before-close="cancelReply"
+        >
           <div class="reply">
             <div class="content">
-              <el-input v-model="replycontent.content" :rows="6" type="textarea" show-word-limit
-                placeholder="请输入你要回复的文字" />
+              <el-input
+                v-model="replycontent.content"
+                :rows="6"
+                type="textarea"
+                show-word-limit
+                placeholder="请输入你要回复的文字"
+              />
             </div>
             <div class="options">
-              <el-button color="rgba(111, 182, 184, 1)" class="queding" type="primary" @click="replycontentYes()">
+              <el-button
+                color="rgba(111, 182, 184, 1)"
+                class="queding"
+                type="primary"
+                @click="replycontentYes()"
+              >
                 回复
               </el-button>
               <el-button @click="cancelReply">取消</el-button>
@@ -490,8 +663,14 @@
       <!-- 分页组件 -->
       <div class="pageSize">
         <span></span>
-        <el-pagination background :current-page="currentPage" :page-size="pageSize"
-          layout="total, prev, pager, next, jumper, slot" :total="total" @update:current-page="handleCurrentChange" />
+        <el-pagination
+          background
+          :current-page="currentPage"
+          :page-size="pageSize"
+          layout="total, prev, pager, next, jumper, slot"
+          :total="total"
+          @update:current-page="handleCurrentChange"
+        />
       </div>
     </div>
   </div>
@@ -598,7 +777,7 @@ const handleChange = (val) => {
 const ruleForm = reactive({
   orderNum: "", // 订单号
   orderLiveTime: "", // 订房时间
-  fileInfos: [],// 评论图片
+  fileInfos: [], // 评论图片
   hName: "", //房型
   orderStatus: "", // 订单状态
   payAccount: "", // 订单金额
@@ -895,8 +1074,9 @@ onUnmounted(() => {
 
 <style scoped lang="scss">
 .content-box {
-  width: 97.5%;
-  height: 89%;
+  min-width: 1000px;
+  width: calc(100vw - 240px);
+  height: calc(100vh - 105px);
   margin: 20px auto;
   background-color: #fff;
   color: #fff;
@@ -927,7 +1107,10 @@ onUnmounted(() => {
       color: rgba(111, 182, 184, 1);
     }
   }
-
+  .scroll {
+    height: calc(100% - 61px);
+    overflow: auto;
+  }
   .top {
     width: 96%;
     height: 150px;
@@ -1044,21 +1227,21 @@ onUnmounted(() => {
   }
 
   .footer {
-    width: 96%;
-    height: 552px;
+    width: calc(100% - 40px);
+    // height: 552px;
     margin: 10px auto 30px;
 
     .el-table--fit {
-      height: 100%;
+      // height: 100%;
 
-      :deep(.el-table__header-wrapper) {
-        background-color: #000;
-        font-size: 15px;
+      // :deep(.el-table__header-wrapper) {
+      //   background-color: #000;
+      //   font-size: 15px;
 
-        tr {
-          color: #000;
-        }
-      }
+      //   tr {
+      //     color: #000;
+      //   }
+      // }
 
       :deep(.el-table__row) {
         height: 50px;
@@ -1079,7 +1262,6 @@ onUnmounted(() => {
 
       :deep(.el-table__row td) {
         padding: 0;
-        border: 0;
       }
 
       .el-button--primary {
@@ -1259,7 +1441,6 @@ onUnmounted(() => {
           }
 
           .chatContent {
-
             // border: 1px solid red;
             // 头像和名字
             .info {
@@ -1296,8 +1477,6 @@ onUnmounted(() => {
               }
             }
 
-
-
             .star {
               display: flex;
               align-items: center;
@@ -1319,7 +1498,6 @@ onUnmounted(() => {
             }
 
             .imglist {
-
               width: 100%;
               display: flex;
               flex-wrap: wrap;
@@ -1464,7 +1642,6 @@ onUnmounted(() => {
     }
 
     .el-pagination {
-
       // width: 1600px;
       :deep(.el-pagination__total) {
         color: #000;

src/views/roomInfo/roomInfo.vue

@@ -234,8 +234,8 @@
                           :on-preview="handlePreview"
                           :on-remove="handleRemove"
                           :on-change="handleChange"
-                          :http-request="handleUpload"
                           :before-upload="beforeAvatarUpload"
+                          :http-request="handleUpload"
                         >
                           <template #trigger>
                             <el-button
@@ -663,6 +663,7 @@ import vidiconsApi from "@/api/vidicons.js";
 import { dayjs } from "element-plus";
 import lodash from "lodash";
 import axios from "axios";
+import COS from "cos-js-sdk-v5";
 import Map from "@/views/map/map.vue";
 
 import { useStore } from "vuex";
@@ -945,24 +946,59 @@ const delImgList = (item) => {
 // 添加照片时往fileList列表中添加图片信息(封面图上传图片)
 const handleChange = (file, fileLists) => {
   console.log(file, "file11111");
-  img1.value = file.url;
+  if (file.raw.type == "image/jpeg" || file.raw.type == "image/png") {
+    img1.value = file.url;
+  }
   // ruleForm.coverImg = file.url;
 };
 // 可以获取图片参数(封面图上传图片)
 const handleUpload = async (file) => {
   console.log(file, "2222");
   img1File.value = file.file;
-  let datas = new FormData();
   if (img1File.value) {
-    datas.set("files", img1File.value);
-    let ress = await axios({
-      method: "post",
-      url: api.value + "/file/cos/upload",
-      headers: {},
-      data: datas,
+    const cos = new COS({
+      SecretId: "AKIDJSP9gz469yZv77tQjotsgHguvjIgtvkL",
+      SecretKey: "b3MVRD1g8RYS9g195oMkvukQvDKZfbOz",
+      SecurityToken: "1320402385",
+      Bucket: "jinganminsu-1320402385",
+      Region: "ap-nanjing",
     });
-    console.log(ress, "图片上传成功封面图");
-    ruleForm.coverImg = ress.data.data;
+
+    const files = file.file;
+    console.log(files, "files文件");
+
+    const key = file.file.name; // 设置上传到 COS 后的文件名
+
+    cos.putObject(
+      {
+        Bucket: "jinganminsu-1320402385",
+        Region: "ap-nanjing",
+        Key: key,
+        Body: files,
+        onProgress: function (progressData) {
+          console.log(JSON.stringify(progressData));
+        },
+      },
+      function (err, data) {
+        if (err) {
+          console.error(err, "请求失败");
+        } else {
+          console.log(data, "请求成功");
+          ruleForm.coverImg = "https://" + data.Location;
+          // 成功
+        }
+      }
+    );
+
+    // datas.set("files", img1File.value);
+    // let ress = await axios({
+    //   method: "post",
+    //   url: api.value + "/file/cos/upload",
+    //   headers: {},
+    //   data: datas,
+    // });
+    // console.log(ress, "图片上传成功封面图");
+    // ruleForm.coverImg = ress.data.data;
   }
 };
 // 移出图片(封面图上传图片)
@@ -1022,26 +1058,67 @@ const handleUpload2 = async (file) => {
     return false;
   }
   console.log(file, "22222222");
-  let data = new FormData();
-  data.set("files", file.file);
-  let res = await axios({
-    method: "post",
-    url: api.value + "/file/cos/upload",
-    headers: {},
-    data: data,
+  img1File.value = file.file;
+  const cos = new COS({
+    SecretId: "AKIDJSP9gz469yZv77tQjotsgHguvjIgtvkL",
+    SecretKey: "b3MVRD1g8RYS9g195oMkvukQvDKZfbOz",
+    SecurityToken: "1320402385",
+    Bucket: "jinganminsu-1320402385",
+    Region: "ap-nanjing",
   });
-  console.log(res, "图片上传成功详情图");
-  if (res.data.code == 1) {
-    // res.data.data.uid = file.file.uid;
-    // console.log([res.data.data]);
-    let arr = {
-      uid: file.file.uid,
-      url: res.data.data,
-    };
-
-    fileList.list = fileList.list.concat([arr]);
-    ruleForm.fileListJson = fileList.list;
-  }
+
+  const files = file.file;
+  console.log(files, "files文件");
+
+  const key = file.file.name; // 设置上传到 COS 后的文件名
+
+  cos.putObject(
+    {
+      Bucket: "jinganminsu-1320402385",
+      Region: "ap-nanjing",
+      Key: key,
+      Body: files,
+      onProgress: function (progressData) {
+        console.log(JSON.stringify(progressData));
+      },
+    },
+    function (err, data) {
+      if (err) {
+        console.error(err, "请求失败");
+      } else {
+        console.log(data, "请求成功");
+        // ruleForm.coverImg = "https://" + data.Location;
+        let arr = {
+          uid: file.file.uid,
+          url: "https://" + data.Location,
+        };
+
+        fileList.list = fileList.list.concat([arr]);
+        ruleForm.fileListJson = fileList.list;
+        // 成功
+      }
+    }
+  );
+  // let data = new FormData();
+  // data.set("files", file.file);
+  // let res = await axios({
+  //   method: "post",
+  //   url: api.value + "/file/cos/upload",
+  //   headers: {},
+  //   data: data,
+  // });
+  // console.log(res, "图片上传成功详情图");
+  // if (res.data.code == 1) {
+  //   // res.data.data.uid = file.file.uid;
+  //   // console.log([res.data.data]);
+  //   let arr = {
+  //     uid: file.file.uid,
+  //     url: res.data.data,
+  //   };
+
+  //   fileList.list = fileList.list.concat([arr]);
+  //   ruleForm.fileListJson = fileList.list;
+  // }
 };
 // 确认维护信息
 const submitAdd = lodash.debounce(async (formEl) => {
@@ -1207,8 +1284,9 @@ onBeforeMount(async () => {
 
 <style scoped lang="scss">
 .content-box {
-  width: 97.5%;
-  height: 89%;
+  min-width: 1000px;
+  width: calc(100vw - 240px);
+  height: calc(100vh - 105px);
   margin: 20px auto;
   background-color: #fff;
   color: #fff;
@@ -1241,8 +1319,9 @@ onBeforeMount(async () => {
   }
 
   .content {
-    width: 96%;
-    height: 100%;
+    width: calc(100% - 60px);
+    height: calc(100%);
+    overflow: auto;
     margin: 0 auto;
     display: flex;
 

src/views/roomType/roomType.vue

@@ -4,34 +4,62 @@
       <!-- <el-icon :size="23" class="camera"><VideoCameraFilled /></el-icon> -->
       <span class="cameratxt">民宿管理/房型管理</span>
     </div>
-    <div>
+    <div class="scroll">
       <div class="middle">
         <div class="filter">
           <div class="condition">
             <span>关键字 : </span>
-            <el-input :clearable="true" @clear="searchBtn" v-model="searchInput.keyWord" class="w-50 m-2"
-              placeholder="请输入房型" style="width: 150px" />
+            <el-input
+              :clearable="true"
+              @clear="searchBtn"
+              v-model="searchInput.keyWord"
+              class="w-50 m-2"
+              placeholder="请输入房型"
+              style="width: 150px"
+            />
           </div>
-          <el-button style="margin-left: 20px" color="rgba(9, 101, 98, 1)" type="primary" class="search"
-            @click="searchBtn"><el-icon>
+          <el-button
+            style="margin-left: 20px"
+            color="rgba(9, 101, 98, 1)"
+            type="primary"
+            class="search"
+            @click="searchBtn"
+            ><el-icon>
               <Search />
-            </el-icon> <span>查询</span></el-button>
+            </el-icon>
+            <span>查询</span></el-button
+          >
         </div>
         <!-- 按钮列表 -->
         <div class="gongneng">
-          <el-button type="primary" color="rgba(9, 101, 98, 1)" @click="addlist"><img src="@/assets/add.png"
-              style="width: 14px; height: 14px; margin-right: 4px" alt="" /><span>添加房型</span></el-button>
+          <el-button type="primary" color="rgba(9, 101, 98, 1)" @click="addlist"
+            ><img
+              src="@/assets/add.png"
+              style="width: 14px; height: 14px; margin-right: 4px"
+              alt=""
+            /><span>添加房型</span></el-button
+          >
         </div>
       </div>
       <div class="footer" v-loading="loading">
-        <el-table :row-class-name="tableRowClassName" :data="tableData.list" @selection-change="handleSelectionChange"
-          style="width: 100%" :header-cell-style="{
+        <el-table
+          :row-class-name="tableRowClassName"
+          :data="tableData.list"
+          @selection-change="handleSelectionChange"
+          style="width: 100%"
+          :header-cell-style="{
             background: 'rgba(240, 243, 247, 1)',
             height: '50px',
             border: 0,
-          }">
+          }"
+        >
           <!-- <el-table-column align="center" type="selection" width="80" /> -->
-          <el-table-column width="150" align="center " type="index" label="序号" />
+          <el-table-column
+            width="150"
+            align="center "
+            type="index"
+            label="序号"
+          />
           <el-table-column align="center" prop="hName" label="房型" />
           <el-table-column align="center" prop="price" label="房费(元)" />
           <el-table-column align="center" prop="number" label="数量" />
@@ -40,8 +68,16 @@
             <template #default="scope">
               <div class="edit">
                 <div class="look" @click="edit(scope.row)">编辑</div>
-                <el-popconfirm width="220" confirm-button-text="确认" cancel-button-text="取消" :icon="InfoFilled"
-                  icon-color="#f89626" title="是否删除此房型?" @confirm="del(scope.row)" @cancel="cancelEvent">
+                <el-popconfirm
+                  width="220"
+                  confirm-button-text="确认"
+                  cancel-button-text="取消"
+                  :icon="InfoFilled"
+                  icon-color="#f89626"
+                  title="是否删除此房型?"
+                  @confirm="del(scope.row)"
+                  @cancel="cancelEvent"
+                >
                   <template #reference>
                     <div class="del">删除</div>
                   </template>
@@ -51,11 +87,28 @@
           </el-table-column>
         </el-table>
         <!-- 添加房型弹窗 -->
-        <el-dialog class="addStaff" v-model="addDialogVisible" :close-on-click-modal="false"
-          :close-on-press-escape="false" :title="dialongTitle" align-center width="900" :before-close="cancelAdd">
+        <el-dialog
+          class="addStaff"
+          v-model="addDialogVisible"
+          :close-on-click-modal="false"
+          :close-on-press-escape="false"
+          :title="dialongTitle"
+          align-center
+          width="900"
+          :before-close="cancelAdd"
+        >
           <div class="slider">
-            <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm"
-              size="default" label-position="left" status-icon :inline="true">
+            <el-form
+              ref="ruleFormRef"
+              :model="ruleForm"
+              :rules="rules"
+              label-width="100px"
+              class="demo-ruleForm"
+              size="default"
+              label-position="left"
+              status-icon
+              :inline="true"
+            >
               <div class="titles"><span>房型信息</span></div>
               <div class="form_item tag">
                 <div class="items">
@@ -65,11 +118,22 @@
                       <div class="img img1">
                         <div class="updateImg">
                           <div class="imglist" v-if="fileList.list.length">
-                            <div class="imgItem" v-for="i in fileList.list" :key="i.id">
+                            <div
+                              class="imgItem"
+                              v-for="i in fileList.list"
+                              :key="i.id"
+                            >
                               <img :src="i.url" alt="" />
                               <div class="lookImg">
-                                <img src="@/assets/lookImg.png" alt="" @click="lookImg(i)" />
-                                <div class="delimg" @click="handleRemove(i)"></div>
+                                <img
+                                  src="@/assets/lookImg.png"
+                                  alt=""
+                                  @click="lookImg(i)"
+                                />
+                                <div
+                                  class="delimg"
+                                  @click="handleRemove(i)"
+                                ></div>
                               </div>
                             </div>
                           </div>
@@ -77,11 +141,25 @@
                             <img src="#" alt="" />
                           </div>
 
-                          <el-upload class="avatar-uploader" action="" list-type="picture" :on-preview="handlePreview"
-                            :on-change="handleChange" :http-request="handleUpload" :before-upload="beforeAvatarUpload">
+                          <el-upload
+                            class="avatar-uploader"
+                            action=""
+                            list-type="picture"
+                            :on-preview="handlePreview"
+                            :on-change="handleChange"
+                            :http-request="handleUpload"
+                            :before-upload="beforeAvatarUpload"
+                          >
                             <template #trigger>
-                              <el-button type="primary" color="rgba(9, 101, 98, 1)" @click="updateImg">上传图片</el-button>
-                              <span class="zhu">（注：最多可上传6张图片，建议按16:9的比例）</span>
+                              <el-button
+                                type="primary"
+                                color="rgba(9, 101, 98, 1)"
+                                @click="updateImg"
+                                >上传图片</el-button
+                              >
+                              <span class="zhu"
+                                >（注：最多可上传6张图片，建议按16:9的比例）</span
+                              >
                             </template>
                             <!-- <template #tip>
                               <div class="el-upload__tip">
@@ -103,26 +181,46 @@
                       placeholder="请输入房型名称"
                       clearable
                     /> -->
-                    <el-select v-model="ruleForm.hName" class="m-2" placeholder="请选择民宿类型">
-                      <el-option v-for="i in houseType" :label="i.name" :value="i.name" />
+                    <el-select
+                      v-model="ruleForm.hName"
+                      class="m-2"
+                      placeholder="请选择民宿类型"
+                    >
+                      <el-option
+                        v-for="i in houseType"
+                        :label="i.name"
+                        :value="i.name"
+                      />
                     </el-select>
                   </el-form-item>
                 </div>
                 <div class="items">
                   <el-form-item label="房费 :" prop="price">
-                    <el-input v-model="ruleForm.price" placeholder="请输入房费" clearable />
+                    <el-input
+                      v-model="ruleForm.price"
+                      placeholder="请输入房费"
+                      clearable
+                    />
                   </el-form-item>
                 </div>
               </div>
               <div class="form_item">
                 <div class="items">
                   <el-form-item label="数量 :" prop="number">
-                    <el-input v-model="ruleForm.number" placeholder="请输入此房型数量" clearable />
+                    <el-input
+                      v-model="ruleForm.number"
+                      placeholder="请输入此房型数量"
+                      clearable
+                    />
                   </el-form-item>
                 </div>
                 <div class="items">
                   <el-form-item label="面积 :" prop="hAreas">
-                    <el-input v-model="ruleForm.hAreas" placeholder="请输入面积大小" clearable></el-input>
+                    <el-input
+                      v-model="ruleForm.hAreas"
+                      placeholder="请输入面积大小"
+                      clearable
+                    ></el-input>
                     &nbsp;&nbsp;㎡
                   </el-form-item>
                 </div>
@@ -141,39 +239,66 @@
                         <div class="del"></div>
                       </div> -->
                       <div class="li">
-                        <div class="li_items" v-for="i in ruleForm.houseNumbers" :key="i.id">
+                        <div
+                          class="li_items"
+                          v-for="i in ruleForm.houseNumbers"
+                          :key="i.id"
+                        >
                           <!-- <span>{{ i.numberName }}</span> -->
-                          <div class="li_item" :class="i.numberName ? '' : 'li_item_warning'">
-                            <el-input v-model="i.numberName" placeholder="房间号" @input="roomNumber" />
+                          <div
+                            class="li_item"
+                            :class="i.numberName ? '' : 'li_item_warning'"
+                          >
+                            <el-input
+                              v-model="i.numberName"
+                              placeholder="房间号"
+                              @input="roomNumber"
+                            />
                             <div class="del" @click="delRoom(i)"></div>
                           </div>
-                          <div class="warning" v-if="!i.numberName">请填写房间号</div>
+                          <div class="warning" v-if="!i.numberName">
+                            请填写房间号
+                          </div>
                         </div>
                         <div class="addRoom" @click="addRoom">
                           <img src="@/assets/addRoom.png" alt="" />
                           <span>新增房间</span>
                         </div>
                       </div>
-
                     </div>
                   </div>
                 </div>
               </div>
 
               <div class="titles">
-                <span>房型配置</span><span>（最多可选择5个描述展示，管理端房型配置管理）</span>
+                <span>房型配置</span
+                ><span>（最多可选择5个描述展示，管理端房型配置管理）</span>
               </div>
               <div class="form_item">
                 <div class="items">
                   <el-form-item label="选择配置 :" prop="hConfig">
-                    <el-checkbox-group @change="checkHouse" v-model="checkedCities" :max="5">
-                      <el-checkbox v-for="city in cities" :key="city.id" :label="city.id">{{ city.name }}</el-checkbox>
+                    <el-checkbox-group
+                      @change="checkHouse"
+                      v-model="checkedCities"
+                      :max="5"
+                    >
+                      <el-checkbox
+                        v-for="city in cities"
+                        :key="city.id"
+                        :label="city.id"
+                        >{{ city.name }}</el-checkbox
+                      >
                     </el-checkbox-group>
                   </el-form-item>
                 </div>
               </div>
               <el-form-item class="options">
-                <el-button color="rgba(9, 101, 98, 1)" class="queding" type="primary" @click="submitAdd(ruleFormRef)">
+                <el-button
+                  color="rgba(9, 101, 98, 1)"
+                  class="queding"
+                  type="primary"
+                  @click="submitAdd(ruleFormRef)"
+                >
                   确认
                 </el-button>
                 <el-button @click="cancelAdd(ruleFormRef)">取消</el-button>
@@ -186,12 +311,25 @@
       <!-- 分页组件 -->
       <div class="pageSize">
         <span></span>
-        <el-pagination background :current-page="currentPage" :page-size="pageSize"
-          layout="total, prev, pager, next, jumper, slot" :total="total" @update:current-page="handleCurrentChange" />
+        <el-pagination
+          background
+          :current-page="currentPage"
+          :page-size="pageSize"
+          layout="total, prev, pager, next, jumper, slot"
+          :total="total"
+          @update:current-page="handleCurrentChange"
+        />
       </div>
     </div>
     <div class="bgImg" v-if="bgImg">
-      <el-carousel @click="bgImg = false" ref="bgImgs" indicator-position arrow="always" :autoplay="false" trigger>
+      <el-carousel
+        @click="bgImg = false"
+        ref="bgImgs"
+        indicator-position
+        arrow="always"
+        :autoplay="false"
+        trigger
+      >
         <el-carousel-item v-for="item in bgImgList" :key="item.id">
           <img :src="item.url" alt="" />
         </el-carousel-item>
@@ -201,7 +339,14 @@
 </template>
 
 <script setup>
-import { ref, reactive, watch, nextTick, onBeforeMount, onUnmounted } from "vue";
+import {
+  ref,
+  reactive,
+  watch,
+  nextTick,
+  onBeforeMount,
+  onUnmounted,
+} from "vue";
 import { useRouter } from "vue-router";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { Calendar } from "@element-plus/icons-vue";
@@ -210,6 +355,8 @@ import { dayjs } from "element-plus";
 import lodash from "lodash";
 import axios from "axios";
 import { useStore } from "vuex";
+import COS from "cos-js-sdk-v5";
+
 const store = useStore();
 const api = ref("");
 const router = useRouter();
@@ -418,20 +565,66 @@ const handleUpload = async (file) => {
     return false;
   }
   console.log(file, "2222");
-  let data = new FormData();
-  data.set("files", file.file);
-  let res = await axios({
-    method: "post",
-    url: api.value + "/file/cos/upload",
-    headers: {},
-    data: data,
+  const cos = new COS({
+    SecretId: "AKIDJSP9gz469yZv77tQjotsgHguvjIgtvkL",
+    SecretKey: "b3MVRD1g8RYS9g195oMkvukQvDKZfbOz",
+    SecurityToken: "1320402385",
+    Bucket: "jinganminsu-1320402385",
+    Region: "ap-nanjing",
   });
-  console.log(res, "图片上传成功");
-  if (res.data.code == 1) {
-    // res.data.uid = file.file.uid;
-    fileList.list.push({ url: res.data.data, uid: file.file.uid });
-    ruleForm.fileListJson = fileList.list;
-  }
+
+  const files = file.file;
+  console.log(files, "files文件");
+
+  const key = file.file.name; // 设置上传到 COS 后的文件名
+
+  cos.putObject(
+    {
+      Bucket: "jinganminsu-1320402385",
+      Region: "ap-nanjing",
+      Key: key,
+      Body: files,
+      onProgress: function (progressData) {
+        console.log(JSON.stringify(progressData));
+      },
+    },
+    function (err, data) {
+      if (err) {
+        console.error(err, "请求失败");
+      } else {
+        console.log(data, "请求成功");
+        // ruleForm.coverImg = "https://" + data.Location;
+        // let arr = {
+        //   uid: file.file.uid,
+        //   url: "https://" + data.Location,
+        // };
+
+        // fileList.list = fileList.list.concat([arr]);
+        // ruleForm.fileListJson = fileList.list;
+        // 成功
+        // res.data.uid = file.file.uid;
+        fileList.list.push({
+          url: "https://" + data.Location,
+          uid: file.file.uid,
+        });
+        ruleForm.fileListJson = fileList.list;
+      }
+    }
+  );
+  // let data = new FormData();
+  // data.set("files", file.file);
+  // let res = await axios({
+  //   method: "post",
+  //   url: api.value + "/file/cos/upload",
+  //   headers: {},
+  //   data: data,
+  // });
+  // console.log(res, "图片上传成功");
+  // if (res.data.code == 1) {
+  //   // res.data.uid = file.file.uid;
+  //   fileList.list.push({ url: res.data.data, uid: file.file.uid });
+  //   ruleForm.fileListJson = fileList.list;
+  // }
 };
 
 //添加房型 （--------------------------------------）
@@ -521,24 +714,26 @@ watch(
   (newVal, oldVal) => {
     console.log(newVal, "监听房间数量");
     if (ruleForm.number <= 999) {
-      let arr = []
+      let arr = [];
       if (newVal > 0) {
         for (let i = 0; i < newVal; i++) {
           arr[i] = {
             numberName: "",
-            id: Math.random().toString(36).substr(3, i + 1),
-          }
+            id: Math.random()
+              .toString(36)
+              .substr(3, i + 1),
+          };
         }
       }
       arr.forEach((item, index) => {
         ruleForm.houseNumbers.forEach((i, ind) => {
           if (index == ind) {
-            item.numberName = i.numberName
-            item.id = i.id
+            item.numberName = i.numberName;
+            item.id = i.id;
           }
-        })
-      })
-      ruleForm.houseNumbers = arr
+        });
+      });
+      ruleForm.houseNumbers = arr;
       console.log(arr, "根据数量添加空房间");
     } else {
       ElMessage({
@@ -548,10 +743,10 @@ watch(
         center: true,
       });
       console.log(newVal.slice(0, 3));
-      ruleForm.number = newVal.slice(0, 3)
+      ruleForm.number = newVal.slice(0, 3);
     }
   }
-)
+);
 
 // 新增房间号
 const addRoom = () => {
@@ -562,7 +757,7 @@ const addRoom = () => {
   };
   ruleForm.houseNumbers.push(arr);
   if (ruleForm.houseNumbers.length > 0) {
-    ruleForm.number = ruleForm.houseNumbers.length
+    ruleForm.number = ruleForm.houseNumbers.length;
   }
   // console.log(ruleForm.houseNumbers.length, "房间数量");
 };
@@ -572,9 +767,9 @@ const delRoom = (i) => {
     return i.id != item.id;
   });
   if (ruleForm.houseNumbers.length > 0) {
-    ruleForm.number = ruleForm.houseNumbers.length
+    ruleForm.number = ruleForm.houseNumbers.length;
   } else {
-    ruleForm.number = ""
+    ruleForm.number = "";
   }
   // console.log(ruleForm.houseNumbers.length, "房间数量");
 };
@@ -829,8 +1024,9 @@ onUnmounted(() => {
 
 <style scoped lang="scss">
 .content-box {
-  width: 97.5%;
-  height: 89%;
+  min-width: 1000px;
+  width: calc(100vw - 240px);
+  height: calc(100vh - 105px);
   margin: 20px auto;
   background-color: #fff;
   color: #fff;
@@ -842,7 +1038,7 @@ onUnmounted(() => {
     // width: calc(100wh - 40px);
     display: flex;
     align-items: center;
-    height: 60px;
+
     margin: 0 30px;
     border-bottom: 1px solid #ccc;
     color: rgb(0, 0, 0);
@@ -850,7 +1046,9 @@ onUnmounted(() => {
     font-weight: 600;
 
     span {
-      margin-right: 20px;
+      display: block;
+      height: 60px;
+      line-height: 60px;
       cursor: pointer;
     }
 
@@ -858,7 +1056,10 @@ onUnmounted(() => {
       color: rgba(111, 182, 184, 1);
     }
   }
-
+  .scroll {
+    height: calc(100% - 61px);
+    overflow: auto;
+  }
   .middle {
     width: 96%;
     margin: 0 auto;
@@ -934,11 +1135,11 @@ onUnmounted(() => {
 
   .footer {
     width: 96%;
-    height: 550px;
+    // height: 550px;
     margin: 10px auto 30px;
 
     .el-table--fit {
-      height: 100%;
+      // height: 100%;
 
       :deep(.el-table__header-wrapper) {
         background-color: #000;
@@ -1047,7 +1248,6 @@ onUnmounted(() => {
               width: 720px;
 
               .el-upload {
-
                 // margin-top: 20px;
                 .zhu {
                   color: rgba(212, 48, 48, 1);
@@ -1203,7 +1403,6 @@ onUnmounted(() => {
                   flex-wrap: wrap;
 
                   .li_items {
-
                     // span {
                     //   margin-right: 40px;
                     // }
@@ -1323,7 +1522,6 @@ onUnmounted(() => {
     }
 
     .el-pagination {
-
       // width: 1600px;
       :deep(.el-pagination__total) {
         color: #000;

src/views/serviceMall/serviceMall.vue

@@ -387,17 +387,22 @@ const serveClick = (i) => {
 <style lang="scss" scoped>
 .content-box {
   box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);
-  width: 97.5%;
-  height: 89%;
+  min-width: 1000px;
+  width: calc(100vw - 240px);
+  height: calc(100vh - 105px);
   margin: 20px auto;
   background-color: #fff;
   display: flex;
   flex-direction: column;
   .el-row {
+    width: 100%;
+    height: 100%;
     .el-col {
+      height: 100%;
       // padding: 10px;
 
       .cell {
+        height: 100%;
         padding: 0 30px;
         // border-radius: 10px;
         background-color: #ffffff;
@@ -453,7 +458,7 @@ const serveClick = (i) => {
         }
 
         .cell-body {
-          height: 760px;
+          height: calc(100% - 70px);
           overflow: auto;
 
           .cell_block {