From a14c38747f597c81f713afd0da6c4336ca752b2c Mon Sep 17 00:00:00 2001
From: "DESKTOP-8UQ1PPR\\09158" <kai326326@gmail.com>
Date: Wed, 6 Dec 2023 18:41:34 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AA=BF=E6=95=B4=E4=BB=A3=E5=AE=A2&=E6=8E=88?=
 =?UTF-8?q?=E6=AC=8A=E7=B7=A8=E8=BC=AF=E9=A0=81=E9=9D=A2css?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Auth/Auth.vue    | 125 ++++++++++++++++++++++---------------
 src/views/Auth/GetAuth.vue |  76 +++++++++++++---------
 2 files changed, 121 insertions(+), 80 deletions(-)

diff --git a/src/views/Auth/Auth.vue b/src/views/Auth/Auth.vue
index 15294ca..3a1e3b3 100644
--- a/src/views/Auth/Auth.vue
+++ b/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{
-  width: 100%;
-  td,th{
-    border: 1px solid #ddd;
-    padding: 3px;
+  table#auth-list{
+    width: 100%;
+    thead th{
+      color: #fff;
+      background-color: #4a677d;
+    }
+    tr:nth-child(even){
+      background-color: #f2f2f2;
+    }
+    th,td{
+      padding: 5px 10px;
+    }
   }
-  tr:nth-child(even){
-    background-color: #f2f2f2;
-  }
-}
 </style>
\ No newline at end of file
diff --git a/src/views/Auth/GetAuth.vue b/src/views/Auth/GetAuth.vue
index 47105e7..69c8e45 100644
--- a/src/views/Auth/GetAuth.vue
+++ b/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{
-  width: 100%;
-  td,th{
-    border: 1px solid #ddd;
-    padding: 3px;
-  }
-  tr:nth-child(even){
-    background-color: #f2f2f2;
+  table#auth-list{
+    width: 100%;
+    thead th{
+      color: #fff;
+      background-color: #4a677d;
+    }
+    tr:nth-child(even){
+      background-color: #f2f2f2;
+    }
+    th,td{
+      padding: 5px 10px;
+    }
   }
-}
 </style>
\ No newline at end of file