From a952aa5a03f5eaaf24f9753e2ab130cb4e9a6b65 Mon Sep 17 00:00:00 2001
From: GUjiYN <2946459904@qq.com>
Date: Mon, 4 Mar 2024 10:37:26 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                        |  2 +-
 src/views/AuthPage/Login.vue      | 80 +++++--------------------------
 src/views/AuthPage/Register.vue   | 71 +++++----------------------
 src/views/ManagePage/Carousel.vue | 72 +++++++++++++---------------
 src/views/ManagePage/Role.vue     | 61 +++++------------------
 src/views/ManagePage/User.vue     | 79 +++++++++++++-----------------
 6 files changed, 102 insertions(+), 263 deletions(-)
diff --git a/index.html b/index.html
index 99f583a..35e2127 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vite App</title>
+    <title>内部系统</title>
   </head>
   <body>
     <div id="app"></div>
diff --git a/src/views/AuthPage/Login.vue b/src/views/AuthPage/Login.vue
index 35550b6..5f933c5 100644
--- a/src/views/AuthPage/Login.vue
+++ b/src/views/AuthPage/Login.vue
@@ -3,40 +3,36 @@
         <div class="container">
             <div class="forms-container">
                 <div class="signin-signup">
-                    <a-card style="width: 28vw;margin-left: 10vw; display: flex; justify-content: center; background-color: #f9f9f9" class="sign-in-form" >
-
-                        <h1 style="display: flex; justify-content: center; font-weight: bold">用户登录</h1>
+                    <a-card class="sign-in-form" style="width: 25vw;margin-left: 10vw; display: flex; justify-content: center; align-items: center; background-color: #f9f9f9" >
+                        <h1 style="margin-top: 2vh; display: flex; justify-content: center; font-weight: bold; font-size: large">用户登录</h1>
                         <a-form-item
                                 :rules="[{ required: true, message: '请输入您的用户名！' }]"
                                 label="用户名"
                                 name="username"
-                                style="margin-top: 20px"
+                                style="margin-top: 20px; margin-left: 1vw"
                         >
-                            <a-input v-model:value="formState.user" type="text"  style="width: 250px;height: 40px;"/>
+                            <a-input v-model:value="formState.user" class="h-10 w-64 border-gray-300 rounded-md" type="text"/>
 
                         </a-form-item>
                         <a-form-item
                                 :rules="[{ required: true, message: '请输入您的密码！' }]"
                                 label="用户密码"
                                 name="password"
-                                style="margin: 20px -10px 20px "
+                                style="margin-top: 20px; margin-left: 0.2vw"
 
                         >
-                            <a-input-password v-model:value="formState.password" style="width: 250px;height: 40px;" />
+                            <a-input v-model:value="formState.password" class="h-10 w-64 border-gray-300 rounded-md" type="password" />
+                        </a-form-item>
+                        <a-form-item style="margin-left: 3vw; margin-top: 1vh">
+                            <a-checkbox v-model:checked="formState.remember">记住我</a-checkbox>
+                            <a-button href="/register" style="margin-left: 1vw" type="link">立即注册</a-button>
+                            <a-button href="" style="margin-left: 1vw" type="link" >忘记密码？</a-button>
                         </a-form-item>
                         <a-form-item>
-                            <a-form-item name="remember" no-style>
-                                <a-checkbox v-model:checked="formState.remember">Remember me</a-checkbox>
-                            </a-form-item>
-                            <a class="login-form-forgot" href="" style="margin-left: 6vw">Forgot password</a>
-                        </a-form-item>
-
-                        <a-form-item>
-                            <a-button  @click="loginUser" :disabled="disabled" type="primary" html-type="submit" class="login-form-button" size="large" style="margin:20px 9vw 20px ">
+                            <a-button  :disabled="disabled" html-type="submit" size="large" style="margin-left: 5vw; margin-top: 1vh; margin-bottom: 1vh; background-color: dodgerblue; color: white;width: 10vw " @click="loginUser">
                                 登录
                             </a-button>
                            <br>
-                            <a href="/register">register now!</a>
                         </a-form-item>
 
                     </a-card>
@@ -117,22 +113,6 @@ input {
     font-family: "Poppins", sans-serif;
 }
 
-.container {
-    position: relative;
-    width: 100%;
-    background-color: #fff;
-    min-height: 100vh;
-    overflow: hidden;
-}
-
-.forms-container {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-}
-
 .signin-signup {
     position: absolute;
     top: 50%;
@@ -145,42 +125,6 @@ input {
     z-index: 5;
 }
 
-form {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    padding: 0rem 5rem;
-    transition: all 0.2s 0.7s;
-    overflow: hidden;
-    grid-column: 1 / 2;
-    grid-row: 1 / 2;
-}
-
-
-.input-field i {
-    text-align: center;
-    line-height: 55px;
-    color: #acacac;
-    transition: 0.5s;
-    font-size: 1.1rem;
-}
-
-.input-field input {
-    background: none;
-    outline: none;
-    border: none;
-    line-height: 1;
-    font-weight: 600;
-    font-size: 1.1rem;
-    color: #333;
-}
-
-.input-field input::placeholder {
-    color: #aaa;
-    font-weight: 500;
-}
-
 .btn {
     width: 150px;
     background-color: #5995fd;
diff --git a/src/views/AuthPage/Register.vue b/src/views/AuthPage/Register.vue
index b4ae4a6..e366bf1 100644
--- a/src/views/AuthPage/Register.vue
+++ b/src/views/AuthPage/Register.vue
@@ -4,11 +4,10 @@
       <div class="forms-container">
         <div class="signin-signup">
           <a-card style="width: 25vw; display: flex; margin-left: 10vw; justify-content: center; background-color: #f9f9f9">
-            <h1 style="display: flex; justify-content: center; font-weight: bold">用户注册</h1>
+            <h1 style="display: flex; justify-content: center; font-weight: bold; font-size: large; margin-top:2vh">用户注册</h1>
             <a-form
-                :label-col="{ span: 10 }"
+                :label-col="{ span: 6 }"
                 :model="formState"
-                :wrapper-col="{ span: 20 }"
                 autocomplete="off"
                 name="basic"
                 style="margin-top: 3vh"
@@ -19,43 +18,44 @@
                   :rules="[{ required: true, message: '请输入您的用户名！' }]"
                   label="用户名"
                   name="username"
+                  style="margin-top: 20px;"
               >
-                <a-input v-model:value="formState.username" type="text" />
+                <a-input v-model:value="formState.username" class="h-10 w-64 border-gray-300 rounded-md" type="text"/>
               </a-form-item>
               <a-form-item
                   :rules="[{ required: true, message: '请输入您的密码！' }]"
                   label="用户密码"
                   name="password"
               >
-                <a-input-password v-model:value="formState.password" />
+                <a-input v-model:value="formState.password" class="h-10 w-64 border-gray-300 rounded-md" type="password" />
               </a-form-item>
               <a-form-item
                   :rules="[{ required: true, message: '请输入家庭地址！' }]"
                   label="家庭地址"
                   name="address"
               >
-                <a-input v-model:value="formState.address" type="text" />
+                <a-input v-model:value="formState.address" class="h-10 w-64 border-gray-300 rounded-md" type="text" />
               </a-form-item>
               <a-form-item
                   :rules="[{ required: true, message: '请输入手机号码！' }]"
                   label="手机号"
                   name="phone"
               >
-                <a-input v-model:value="formState.phone" type="text" />
+                <a-input v-model:value="formState.phone" class="h-10 w-64 border-gray-300 rounded-md" type="text" />
               </a-form-item>
               <a-form-item
                   :rules="[{ required: true, message: '请输入邮箱！' }]"
                   label="邮箱"
                   name="email"
               >
-                <a-input v-model:value="formState.email" type="email" />
+                <a-input v-model:value="formState.email" class="h-10 w-64 border-gray-300 rounded-md" type="email" />
               </a-form-item>
               <a-form-item
                   :rules="[{ required: true, message: '请输入年龄！' }]"
                   label="年龄"
                   name="age"
               >
-                <a-input-number v-model:value="formState.age" />
+                <a-input-number v-model:value="formState.age" class="h-10 w-64 border-gray-300 rounded-md" />
               </a-form-item>
               <a-form-item
                   :rules="[{ required: true, message: '请输入性别！' }]"
@@ -68,8 +68,8 @@
                   <a-radio :value="2">女</a-radio>
                 </a-radio-group>
               </a-form-item>
-              <a-form-item :wrapper-col="{ offset: 8, span: 16 }" style="margin-top: 4vh">
-                <a-button html-type="submit" type="primary" @click="registerUser">立即注册</a-button>
+              <a-form-item :wrapper-col="{ offset: 6, span: 16 }" style="margin-top: 4vh">
+                <a-button html-type="submit" style="background-color: dodgerblue; color: white;width: 10vw" type="primary" @click="registerUser">立即注册</a-button>
               </a-form-item>
             </a-form>
           </a-card>
@@ -157,21 +157,6 @@ input {
   font-family: "Poppins", sans-serif;
 }
 
-.container {
-  position: relative;
-  width: 100%;
-  background-color: #fff;
-  min-height: 100vh;
-  overflow: hidden;
-}
-
-.forms-container {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-}
 
 .signin-signup {
   position: absolute;
@@ -185,42 +170,8 @@ input {
   z-index: 5;
 }
 
-form {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  padding: 0rem 5rem;
-  transition: all 0.2s 0.7s;
-  overflow: hidden;
-  grid-column: 1 / 2;
-  grid-row: 1 / 2;
-}
 
 
-.input-field i {
-  text-align: center;
-  line-height: 55px;
-  color: #acacac;
-  transition: 0.5s;
-  font-size: 1.1rem;
-}
-
-.input-field input {
-  background: none;
-  outline: none;
-  border: none;
-  line-height: 1;
-  font-weight: 600;
-  font-size: 1.1rem;
-  color: #333;
-}
-
-.input-field input::placeholder {
-  color: #aaa;
-  font-weight: 500;
-}
-
 .btn {
   width: 150px;
   background-color: #5995fd;
diff --git a/src/views/ManagePage/Carousel.vue b/src/views/ManagePage/Carousel.vue
index 4e8cf4f..35e5947 100644
--- a/src/views/ManagePage/Carousel.vue
+++ b/src/views/ManagePage/Carousel.vue
@@ -1,44 +1,40 @@
 <template>
-    <div style="display:flex;flex-direction: column">
-    <div style="margin: 20px">
-        <a-space direction="vertical" style="display: flex;flex-direction: row">
-            <a-input class="first-input" v-model:value="searchData.id" addonBefore="轮播图Id" placeholder="请输入轮播图Id" />
-            <a-button :size="size" @click="searchUser"><SearchOutlined />查询</a-button>
-            <a-button type="primary" @click="showAddModal"><PlusOutlined />新增</a-button>
-            <a-button type="primary" @click="showDeleteModal" danger><DeleteOutlined />删除</a-button>
-
-        </a-space>
-    </div>
-
-    <a-table :row-selection="rowSelection"  :rowKey="record => record.id" :columns="columns"  :data-source="states.data"  :pagination="pagination"  style="width: 84vw;">
-
-
-        <template #bodyCell="{ column, record }">
-
-            <template v-if="column.key === 'isActive'">
-                <a-tag :bordered="false" color="success" v-if="record.isActive === true">展示</a-tag>
-                <a-tag :bordered="false" color="error"  v-if="record.isActive === false">未展示</a-tag>
-            </template>
-
-            <template v-else-if="column.key === 'action'">
-              <span style="margin-left: 10px">
-                  <a-button  type="text" @click="showModal(record)" size="small" style=" color: dodgerblue;"><EditOutlined />修改</a-button>
-              <a-button  type="text" @click="showDeleteConfirm(record)" size="small" style=" color: dodgerblue;"><DeleteOutlined />删除</a-button>
-              </span>
-            </template>
-
-            <template v-else-if="column.key === 'photo'">
-                    <img :src="record.image" alt="" style="width: 50px;height: 50px;text-align: center">
-            </template>
-            <template v-else-if="column.key === 'image'">
-                <div :style="ellipsis ? { width: '250px' } : {}" class="image-cell">
-                    <a-tooltip v-if="ellipsis" :title="record.image">
-                        <div class="ellipsis-text">{{ record.image }}</div>
-                    </a-tooltip>
-                </div>
-            </template>
+    <div class="flex flex-col w-full h-auto">
+      <div class="flex">
+        <div class="w-36 ml-4 mt-4 flex">
+          <a-input v-model:value="searchData.id" class="h-8 border-gray-300 rounded-md"  placeholder="请输入轮播图Id" />
+        </div>
+        <div class="mt-4 flex">
+          <a-button :size="size" class="ml-4 flex justify-center items-center" @click="searchUser"><SearchOutlined />查询</a-button>
+          <a-button class="ml-4 text-blue-50 bg-blue-500 flex justify-center items-center" type="primary" @click="showAddModal"><PlusOutlined />新增</a-button>
+          <a-button class="ml-4 flex justify-center items-center" danger type="primary" @click="showDeleteModal"><DeleteOutlined />删除</a-button>
+        </div>
+      </div>
 
+    <a-table :columns="columns"  :data-source="states.data" :pagination="pagination"  :row-selection="rowSelection"  :rowKey="record => record.id"  style="width: 84vw; margin-top: 1vh">
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'isActive'">
+          <a-tag v-if="record.isActive === true" :bordered="false" color="success">展示</a-tag>
+          <a-tag v-if="record.isActive === false" :bordered="false"  color="error">未展示</a-tag>
         </template>
+        <template v-else-if="column.key === 'action'">
+          <span style="margin-left: 10px; display: flex;">
+            <a-button class="text-blue-500 flex justify-center items-center" size="small" type="text" @click="showModal(record)"><EditOutlined />修改</a-button>
+            <a-button class="text-blue-500 flex justify-center items-center" size="small" type="text" @click="showDeleteConfirm(record)"><DeleteOutlined />删除</a-button>
+          </span>
+        </template>
+        <template v-else-if="column.key === 'photo'">
+          <img :src="record.image" alt="" style="width: 50px;height: 50px;text-align: center">
+        </template>
+        <template v-else-if="column.key === 'image'">
+          <div :style="ellipsis ? { width: '250px' } : {}" class="image-cell">
+            <a-tooltip v-if="ellipsis" :title="record.image">
+              <div class="ellipsis-text">{{ record.image }}</div>
+            </a-tooltip>
+          </div>
+        </template>
+
+      </template>
     </a-table>
 
     </div>
diff --git a/src/views/ManagePage/Role.vue b/src/views/ManagePage/Role.vue
index 73120b1..f0a1bf2 100644
--- a/src/views/ManagePage/Role.vue
+++ b/src/views/ManagePage/Role.vue
@@ -1,12 +1,12 @@
 <template xmlns="">
-  <div class="main">
-    <div class="header">
-      <div class="input">
-        <a-input v-model:value="searchData.id" addonBefore="角色id" class="first-input" placeholder="请输入角色id" />
+  <div style=" display: flex; flex-direction: column; width: 100%; height: auto;">
+    <div class="flex">
+      <div class="w-36 ml-4 mt-4 flex">
+        <a-input v-model:value="searchData.id" class="h-8 border-gray-300 rounded-md"  placeholder="请输入角色id" />
       </div>
-      <div class="edit">
-        <a-button class="query-button" @click="searchRole"><SearchOutlined />查询</a-button>
-        <a-button class="add-button" type="primary" @click="showAddDiaLog"><PlusOutlined />新增角色</a-button>
+      <div class="mt-4 flex">
+        <a-button class="ml-4 mr-4 flex justify-center items-center" @click="searchRole"><SearchOutlined />查询</a-button>
+        <a-button class="text-blue-50 bg-blue-500 flex justify-center items-center" type="primary" @click="showAddDiaLog"><PlusOutlined />新增角色</a-button>
       </div>
     </div>
 
@@ -14,8 +14,8 @@
     <!--新增角色对话框-->
     <a-modal v-model:open="AddDiaLog" cancel-text="取消" ok-text="确认" title="新增角色" @cancel="addCancel" @ok="addOk">
       <div>
-        <div>角色名称：<a-input v-model:value="addData.name" style="width: 250px; margin-bottom: 10px"/></div>
-        <div>角色备注：<a-input v-model:value="addData.displayName" style="width: 250px; margin-bottom: 10px;"/></div>
+        <div>角色名称：<a-input v-model:value="addData.name" class="h-8 w-1/2 border-gray-300 rounded-md"/></div>
+        <div>角色备注：<a-input v-model:value="addData.displayName" class="h-8 w-1/2 mt-4 border-gray-300 rounded-md"/></div>
       </div>
     </a-modal>
 
@@ -63,9 +63,9 @@
             {{record.updatedAt}}
           </template>
           <template v-else-if="column.key === 'role_action'">
-            <span style="margin-left: 10px">
-              <a-button class="button2" size="small" type="text" @click="() => showEditDiaLog(record)"><EditOutlined />修改</a-button>
-              <a-button class="button1" size="small" type="text" @click="() => showDeleteConfirm(record)"><DeleteOutlined />删除</a-button>
+            <span style="margin-left: 10px; display: flex">
+              <a-button class="text-blue-500 flex justify-center items-center" size="small" type="text" @click="() => showEditDiaLog(record)"><EditOutlined />修改</a-button>
+              <a-button class="text-blue-500 flex justify-center items-center" size="small" type="text" @click="() => showDeleteConfirm(record)"><DeleteOutlined />删除</a-button>
             </span>
           </template>
         </template>
@@ -360,47 +360,10 @@ const handleTableChange = (pag, filters, sorter) => {
 
 
 <style scoped>
-.main {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: auto;
-}
-
-.header {
-  display: flex;
-}
-
-.input {
-  width: 10vw;
-  margin-top: 2vh;
-  margin-bottom: 1vh;
-  display: flex;
-  flex-direction: row;
-}
-
-.edit {
-  margin-top: 2vh;
-  width: 20vw;
-  display: flex;
-}
-
-.query-button {
-  margin-left: 1vw;
-  margin-right: 1vw;
-}
-
 .table {
   width: 100%;
   height: auto;
   margin-top: 2vh;
 }
 
-.button1 {
-  color: dodgerblue;
-}
-
-.button2 {
-  color:dodgerblue;
-}
 </style>
diff --git a/src/views/ManagePage/User.vue b/src/views/ManagePage/User.vue
index 115a26e..77bab80 100644
--- a/src/views/ManagePage/User.vue
+++ b/src/views/ManagePage/User.vue
@@ -1,15 +1,15 @@
 <template xmlns="">
-  <div class="main">
-    <div class="header">
-      <div class="input">
-        <a-input v-model:value="searchData.id" addonBefore="关键字" class="first-input" placeholder="请输入用户id"/>
+  <div class="flex flex-col w-full h-auto">
+    <div class="flex">
+      <div class="w-36 ml-4 mt-4 flex">
+        <a-input v-model:value="searchData.id" class="h-8 border-gray-300 rounded-md"  placeholder="请输入用户id"/>
       </div>
-      <div class="edit">
-        <a-button class="query-button" @click="searchUser">
+      <div class="mt-4 flex">
+        <a-button class="ml-4 mr-4 flex justify-center items-center" @click="searchUser">
           <SearchOutlined/>
           查询
         </a-button>
-        <a-button class="add-button" type="primary" @click="showAddDiaLog">
+        <a-button class="text-blue-50 bg-blue-500 flex justify-center items-center" type="primary" @click="showAddDiaLog">
           <PlusOutlined/>
           新增用户
         </a-button>
@@ -21,32 +21,37 @@
     <a-modal v-model:open="AddDiaLog" cancel-text="取消" ok-text="确认" title="新增用户" @cancel="addCancel"
              @ok="addOk">
       <a-form>
-        <a-form-item style="margin-left: 15px;">
+        <a-form-item class="ml-6 mt-4">
           <span style="color:red; font-size: 20px">*</span>
           用户名
-          <a-input v-model:value="addData.username" style="width: 250px"/>
+          <a-input v-model:value="addData.username" class="h-8 w-2/3 border-gray-300 rounded-md"/>
         </a-form-item>
-        <a-form-item style="margin-left: 15px">
+        <a-form-item class="ml-6">
           <span style="color:red; font-size: 20px">*</span>
           密码：
-          <a-input v-model:value="addData.password" style="width: 250px;" type="password"/>
+          <a-input v-model:value="addData.password" class="h-8 w-2/3 border-gray-300 rounded-md" type="password"/>
         </a-form-item>
-        <a-form-item style="margin-left: 15px">
+        <a-form-item class="ml-6">
           <span style="color:red; font-size: 20px">*</span>
           地址：
-          <a-input v-model:value="addData.address" style="width: 250px"/>
+          <a-input v-model:value="addData.address" class="h-8 w-2/3 border-gray-300 rounded-md"/>
         </a-form-item>
-        <a-form-item style="margin-left: 15px">
+        <a-form-item class="ml-6">
           <span style="color:red; font-size: 20px">*</span>
           电话：
-          <a-input v-model:value="addData.phone" style="width: 250px"/>
+          <a-input v-model:value="addData.phone" class="h-8 w-2/3 border-gray-300 rounded-md"/>
         </a-form-item>
-        <a-form-item style="margin-left: 15px">
+        <a-form-item class="ml-6">
           <span style="color:red; font-size: 20px">*</span>
           邮箱：
-          <a-input v-model:value="addData.email" style="width: 250px"/>
+          <a-input v-model:value="addData.email" class="h-8 w-2/3 border-gray-300 rounded-md"/>
         </a-form-item>
-        <a-form-item style="margin-left: 15px">
+        <a-form-item class="ml-6">
+          <span style="color:red; font-size: 20px">*</span>
+          年龄：
+          <a-input v-model:value="addData.age" class="h-8 w-2/3 border-gray-300 rounded-md" type="number"/>
+        </a-form-item>
+        <a-form-item class="ml-6">
           <span style="color:red; font-size: 20px">*</span>
           性别：
           <a-radio-group v-model:value="addData.sex">
@@ -54,11 +59,6 @@
             <a-radio :value="0">女</a-radio>
           </a-radio-group>
         </a-form-item>
-        <a-form-item style="margin-left: 15px">
-          <span style="color:red; font-size: 20px">*</span>
-          年龄：
-          <a-input v-model:value="addData.age" style="width: 250px" type="number"/>
-        </a-form-item>
       </a-form>
     </a-modal>
 
@@ -115,7 +115,7 @@
 
 
     <!--表格内容-->
-    <div class="table">
+    <div style=" width:100%; height:auto; margin-top:2vh;">
       <a-table :columns="columns" :dataSource="states.data" :loading="loadingTable" :row-selection="rowSelection" :rowKey="record => record.id">
         <template #bodyCell="{ column, record }">
           <template v-if="column.key==='id'">
@@ -135,9 +135,9 @@
             {{ record.isDelete }}
           </template>
           <template v-else-if="column.key==='action'">
-            <span style="margin-left: 10px">
-              <a-button size="small" style="color: dodgerblue" type="text" @click="() => showEditDiaLog(record)"><EditOutlined/>修改</a-button>
-              <a-button size="small" style="color: dodgerblue" type="text" @click="() => showDeleteConfirm(record)"><DeleteOutlined/>删除</a-button>
+            <span style="margin-left: 10px; display: flex">
+              <a-button class="text-blue-500 flex justify-center items-center" size="small" type="text" @click="() => showEditDiaLog(record)"><EditOutlined/>修改</a-button>
+              <a-button class="text-blue-500 flex justify-center items-center" size="small" type="text" @click="() => showDeleteConfirm(record)"><DeleteOutlined/>删除</a-button>
             </span>
           </template>
         </template>
@@ -610,15 +610,10 @@ onMounted(() => {
 
 <style scoped>
 .main {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: auto;
+
 }
 
-.header {
-  display: flex;
-}
+
 
 .input {
   width: 10vw;
@@ -630,26 +625,16 @@ onMounted(() => {
 
 
 .edit {
-  margin-top: 2vh;
-  width: 20vw;
-  display: flex;
+
 }
 
 .query-button {
-  margin-left: 1vw;
-  margin-right: 1vw;
+
 
 }
 
-.delete-button {
-  background-color: #CD5C5C;
-  color: white;
-  margin-left: 1vw;
-}
 
 .table {
-  width: 100%;
-  height: auto;
-  margin-top: 2vh;
+
 }
 </style>
