調整代客&授權編輯頁面css

src/views/Auth/Auth.vue

@@ -1,46 +1,3 @@
-<template>
-<div>
-<van-nav-bar title="授權商務卡片編輯" right-text="關閉" @click-right="$router.push('/')" />
-<van-form @submit="onSubmit">
-  <van-cell-group inset>
-    <van-field
-      v-model="form.user_id"
-      label="會員編號"
-      name="pattern"
-      placeholder="請輸入想授權的會員編號"
-      label-width="100"
-     :rules="[{ required: true, message: '會員編號為必填' }]"
-    />
-    <van-field
-      v-model="form.a_hour"
-      label="授權時間(小時)"
-      name="pattern"
-      placeholder="請輸入想授權的時間"
-      label-width="100"
-     :rules="[{ required: true, message: '授權時間為必填' }]"
-    />
-  </van-cell-group>
-  <div style="margin: 16px;">
-    <van-button round block type="primary" native-type="submit">
-      送出
-    </van-button>
-  </div>
-</van-form>
-<table id="auth-list">
-  <tr>
-    <th>授權會員</th>
-    <th>授權時間</th>
-    <th>操作</th>
-  </tr>
-  <tr v-for="v of authList" :key="v.id">
-    <td>{{v.user_id}}</td>
-    <td>{{v.auth_time}}</td>
-    <td @click="handleDelete(v.id)">刪除</td>
-  </tr>
-</table>
-</div>
-</template>
-
 <script setup>
 import { onMounted, ref } from 'vue'
 
@@ -99,15 +56,79 @@ onMounted(()=>{
 
 </script>
 
+<template>
+  <div class="auth page">
+    <van-nav-bar class="bg-skyBlue py-1" left-arrow @click-left="$router.push('/')">
+      <template #title>
+        <h5 class="text-white mb-1"><strong>授權商務卡片編輯</strong></h5>
+      </template>
+      <template #left>
+        <h4><i class="fa-solid fa-angle-left text-white" :style="{ opacity: 0.5 }"></i></h4>
+      </template>
+    </van-nav-bar>
+
+    <div class="content">
+      <van-form @submit="onSubmit">
+        <van-cell-group inset>
+          <van-field
+            v-model="form.user_id"
+            label="會員編號"
+            name="pattern"
+            placeholder="請輸入想授權的會員編號"
+            label-width="100"
+            :rules="[{ required: true, message: '會員編號為必填' }]"
+          />
+          <van-field
+            v-model="form.a_hour"
+            label="授權時間(小時)"
+            name="pattern"
+            placeholder="請輸入想授權的時間"
+            label-width="100"
+            :rules="[{ required: true, message: '授權時間為必填' }]"
+          />
+          <div class="p-3">
+            <van-button block class="btn-darkBlue" native-type="submit"><i class="fa-solid fa-hand"></i> 確認送出授權</van-button>
+          </div>
+        </van-cell-group>      
+
+        <van-cell-group inset>
+          <table id="auth-list">
+            <thead>
+              <tr>
+                <th>授權會員</th>
+                <th>授權時間</th>
+                <th>操作</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="v of authList" :key="v.id">
+                <td>{{v.user_id}}</td>
+                <td>{{v.auth_time}}</td>
+                <td @click="handleDelete(v.id)">刪除</td>
+              </tr>
+            </tbody>
+          </table>
+        </van-cell-group>
+      </van-form>
+    </div>
+    
+  </div>
+</template>
+
+<style src="@/assets/css/main.css"></style>
+
 <style lang="less" scoped>
-#auth-list{
+  table#auth-list{
-  width: 100%;
+    width: 100%;
-  td,th{
+    thead th{
-    border: 1px solid #ddd;
+      color: #fff;
-    padding: 3px;
+      background-color: #4a677d;
+    }
+    tr:nth-child(even){
+      background-color: #f2f2f2;
+    }
+    th,td{
+      padding: 5px 10px;
+    }
   }
-  tr:nth-child(even){
-    background-color: #f2f2f2;
-  }
-}
 </style>

src/views/Auth/GetAuth.vue

@@ -1,22 +1,3 @@
-<template>
-  <div>
-    <van-nav-bar title="代客編輯商務卡片" right-text="關閉" @click-right="$router.push('/')" />
-    <table id="auth-list">
-      <tr>
-        <th>授權會員</th>
-        <th>授權時間</th>
-        <th>操作</th>
-      </tr>
-      <tr v-for="v of authList" :key="v.id">
-        <td>{{v.user_id}}</td>
-        <td>{{v.auth_time}}</td>
-        <td @click="handleEdit(v.user_id)">編輯</td>
-      </tr>
-    </table>
-    
-  </div>
-</template>
-
 <script setup>
 import { onMounted , ref } from "vue";
 
@@ -38,15 +19,54 @@ const handleEdit = (user_id)=>{
 
 </script>
 
+<template>
+  <div class="getauth page">
+    <van-nav-bar class="bg-skyBlue py-1" left-arrow @click-left="$router.push('/')">
+      <template #title>
+        <h5 class="text-white mb-1"><strong>代客編輯商務卡片</strong></h5>
+      </template>
+      <template #left>
+        <h4><i class="fa-solid fa-angle-left text-white" :style="{ opacity: 0.5 }"></i></h4>
+      </template>
+    </van-nav-bar>
+
+    <div class="content">
+      <van-cell-group inset>
+        <table id="auth-list">
+          <thead>
+            <tr>
+              <th>授權會員授權會員授權會員</th>
+              <th>授權時間</th>
+              <th>操作</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="v of authList" :key="v.id">
+              <td>{{v.user_id}}</td>
+              <td>{{v.auth_time}}</td>
+              <td @click="handleDelete(v.id)">刪除</td>
+            </tr>
+          </tbody>
+        </table>
+      </van-cell-group>
+    </div>
+  </div>
+</template>
+
+<style src="@/assets/css/main.css"></style>
+
 <style lang="less" scoped>
-#auth-list{
+  table#auth-list{
-  width: 100%;
+    width: 100%;
-  td,th{
+    thead th{
-    border: 1px solid #ddd;
+      color: #fff;
-    padding: 3px;
+      background-color: #4a677d;
-  }
+    }
-  tr:nth-child(even){
+    tr:nth-child(even){
-    background-color: #f2f2f2;
+      background-color: #f2f2f2;
+    }
+    th,td{
+      padding: 5px 10px;
+    }
   }
-}
 </style>