From af5d82063a63fc35e6aaf1025045a790e2fdab10 Mon Sep 17 00:00:00 2001
From: Tanyalak <tanyalak@frappet.com>
Date: Fri, 22 Dec 2023 11:44:56 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20Layout?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html               |   2 +-
 src/App.vue              |  12 ++-
 src/main.ts              |   3 +-
 src/router/index.ts      |  18 +++-
 src/views/HomeView.vue   | 225 ++++++++++-----------------------------
 src/views/MainLayout.vue |  68 ++++++++++++
 src/views/pageView.vue   | 193 ---------------------------------
 7 files changed, 147 insertions(+), 374 deletions(-)
 create mode 100644 src/views/MainLayout.vue
 delete mode 100644 src/views/pageView.vue

diff --git a/index.html b/index.html
index 52d9075..7351709 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>BMA ระบบลงเวลาเข้า-ออกงาน</title>
+    <title>BMA ระบบเผยแพร่ผลงาน</title>
     <style>
       html,
       body,
diff --git a/src/App.vue b/src/App.vue
index 1643ebf..8063862 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,9 +1,11 @@
 <template>
-  <!-- <nav>
-    <router-link to="/">Home</router-link> |
-    <router-link to="/about">About</router-link>
-  </nav> -->
-  <router-view />
+  <div id="azay-admin-app">
+    <router-view v-slot="{ Component }">
+      <transition>
+        <component :is="Component" />
+      </transition>
+    </router-view>
+  </div>
 </template>
 
 <style>
diff --git a/src/main.ts b/src/main.ts
index 633ed26..2747748 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,8 +1,9 @@
 import { createApp, defineAsyncComponent } from 'vue'
 import App from '@/App.vue'
 import '@/registerServiceWorker'
-import router from '@/router'
+/* import router from '@/router' */
 import { createPinia } from 'pinia'
+import router from './router'
 
 import { Quasar, Dialog, Notify, Loading } from 'quasar'
 import '@vuepic/vue-datepicker/dist/main.css'
diff --git a/src/router/index.ts b/src/router/index.ts
index 6608f2e..172b1ec 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,5 +1,9 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '@/views/HomeView.vue'
+
+/* import HomeView from '@/views/HomeView.vue' */
+
+const MainLayout = () => import("@/views/MainLayout.vue");
+const HomeView = () => import("@/views/HomeView.vue");
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -7,10 +11,14 @@ const router = createRouter({
     {
       path: '/',
       name: 'home',
-      component: HomeView,
-      meta: {
-        Auth: true,
-      },
+      component: MainLayout,
+      children:[
+        {
+          path: "/",
+          name: "HomeView",
+          component: HomeView,
+        },
+      ]
     },
     {
       path: '/:pathMatch(.*)*',
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index b8d0053..2da31b8 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,193 +1,80 @@
 <script setup lang="ts"></script>
 
 <template>
-  <div class="div">
-    <div class="bgGrey">
-      <img
-        loading="lazy"
-        src="https://cdn.builder.io/api/v1/image/assets/TEMP/8059506daf32efc681465813bc7bdd3b52e3bafa93cfd733b357d6043617f3f8?"
-        class="img"
-      />
+  <div class="row col-xs-12 col-sm-11 col-md-10 col-lg-9 justify-center">
+    <div class="col-12 text-left">
+      <div class="text-h6 text-weight-bold q-mb-md">วิธีชนะมิตรและจูงใจคน</div>
     </div>
-    <div class="text-h6 text-weight-bold">วิธีชนะมิตรและจูงใจคน</div>
-    <q-card bordered class="col-12">
-      <q-img
-        loading="lazy"
-        src="https://laz-img-sg.alicdn.com/p/6f38dbbe4df6e0b10d1c7ce97f2c9d3e.jpg"
-        class="col-12 q-px-md q-pb-md"
-        max-width="100%"
-      />
-      <q-card-section class="q-pt-md q-pb-md">
-        <div class="row items-stretch">
-          <div class="col-6">
-            <div class="row q-mt-md">
-              <div class="col-4 text-bold" style="color: black">ชื่อเรื่อง</div>
-              <div class="col-8 text-body" style="color: #818181">
-                วิธีชนะมิตรและจูงใจคน
-              </div>
+    <div class="row col-12">
+      <div class="col-xs-12 col-sm-4 q-my-sm">
+        <iframe src="https://drive.google.com/file/d/1yaSwM6hsXphmMX5N0q-v8-HUCkhSvqg4/preview" class="frame" allow="autoplay"></iframe>
+      </div>
+      <div class="col-xs-12 col-sm-8 q-px-md">
+        <div class="row col-12 justify-center">
+          <div class="row col-xs-12 col-sm-10 q-col-gutter-y-lg text-left ">
+            <div class="row col-12 q-mt-sm">
+              <div class="col-4 text-title">ชื่อเรื่อง</div>
+              <div class="col-8 text-body">วิธีชนะมิตรและจูงใจคน</div>
             </div>
 
-            <div class="row q-mt-md">
-              <div class="col-4 text-bold" style="color: black">
-                เจ้าของผลงาน
-              </div>
-              <div class="col-8 text-body" style="color: #818181">
-                ธัญลักษณ์ รอดกูล
-              </div>
+            <div class="row col-12">
+              <div class="col-4 text-title">เจ้าของผลงาน</div>
+              <div class="col-8 text-body">ธัญลักษณ์ รอดกูล</div>
             </div>
 
-            <div class="row q-mt-md">
-              <div class="col-4 text-bold" style="color: black">
-                กลุ่ม/หมวดหมู่
-              </div>
-              <div class="col-8 text-body" style="color: #818181">ศิลปะ</div>
+            <div class="row col-12">
+              <div class="col-4 text-title">กลุ่ม/หมวดหมู่</div>
+              <div class="col-8 text-body">ศิลปะ</div>
             </div>
 
-            <div class="row q-mt-md">
-              <div class="col-4 text-bold" style="color: black">คำสำคัญ</div>
-              <div class="col-8 text-body" style="color: #818181">
-                ศิลปะ , ภาพวาด
-              </div>
+            <div class="row col-12">
+              <div class="col-4 text-title">คำสำคัญ</div>
+              <div class="col-8 text-body">ศิลปะ , ภาพวาด</div>
             </div>
 
-            <div class="row q-mt-md">
-              <div class="col-4 text-bold" style="color: black">ขนาดไฟล์</div>
-              <div class="col-8 text-body" style="color: #818181">
-                753.55 KB
-              </div>
+            <div class="row col-12">
+              <div class="col-4 text-title">ขนาดไฟล์</div>
+              <div class="col-8 text-body">753.55 KB</div>
             </div>
 
-            <div class="row q-mt-md">
-              <div class="col-4 text-bold" style="color: black">
-                วันที่อัปโหลด
-              </div>
-              <div class="col-8 text-body" style="color: #818181">
-                9 พ.ย. 2566
-              </div>
+            <div class="row col-12">
+              <div class="col-4 text-title">วันที่อัปโหลด</div>
+              <div class="col-8 text-body">9 พ.ย. 2566</div>
+            </div>
+
+            <div class="col-12 row">
+              <q-btn color="primary" rounded size="md" unelevated class="col-6 btn">
+                <svg xmlns="http://www.w3.org/2000/svg" width="22" height="23" viewBox="0 0 22 23" fill="none">
+                  <path d="M1.83334 11.5H3.66668V16.0833H18.3333V11.5H20.1667V16.0833C20.1667 17.1008 19.3508 17.9167 18.3333 17.9167H3.66668C2.65834 17.9167 1.83334 17.1008 1.83334 16.0833V11.5ZM11 14.25L16.0875 9.24501L14.7858 7.95251L11.9167 10.8125V2.33334H10.0833V10.8125L7.22334 7.95251L5.92168 9.25418L11 14.25Z" fill="white"/>
+                </svg>
+                <span class="q-pl-md">ดาว์นโหลด</span>
+              </q-btn>
             </div>
           </div>
         </div>
-      </q-card-section>
-    </q-card>
-    <div class="whiteBox">
-      <div class="download">
-        <div class="div-22">
-          <img
-            loading="lazy"
-            src="https://cdn.builder.io/api/v1/image/assets/TEMP/86b98ddb5efca7fc0aefa9aeee8ae044e878760140eadaef9e252787edfa6285?"
-            class="img-3"
-          />
-          <div class="div-23">ดาว์นโหลด</div>
-        </div>
       </div>
     </div>
   </div>
 </template>
 
-<style scoped>
-.div {
-  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.12);
-  background-color: #f7f9fa;
-  display: flex;
-  flex-direction: column;
-  align-items: start;
-}
-.bgGrey {
-  box-shadow: 0px 4px 20px 0px rgba(224, 235, 240, 0.4);
-  background-color: #273238;
-  align-self: stretch;
-  display: flex;
+<style >
+ .frame {
   width: 100%;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  padding: 27px 60px;
-}
-@media (max-width: 991px) {
-  .bgGrey {
-    max-width: 100%;
-    padding: 0 20px;
-  }
-}
-.img {
-  aspect-ratio: 1.31;
-  object-fit: contain;
-  object-position: center;
-  width: 47px;
-  fill: #fff;
-  overflow: hidden;
-  max-width: 100%;
-}
-.img-2 {
-  aspect-ratio: 0.71;
-  object-fit: contain;
-  object-position: center;
-  max-width: 50%;
-  overflow: hidden;
-  flex-grow: 1;
-  flex-basis: 0%;
-}
-@media (max-width: 991px) {
-  .img-2 {
-    max-width: 100%;
-  }
-}
-.whiteBox {
-  box-shadow: 0px 4px 22px 0px rgba(200, 211, 219, 0.22);
-  background-color: #fff;
-  align-self: stretch;
-  display: flex;
-  margin-top: -277px;
-  width: 100%;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  padding: 50px 60px;
-}
-@media (max-width: 991px) {
-  .whiteBox {
-    max-width: 100%;
-    margin-top: -200px;
-    padding: 0 20px;
-  }
-}
-.download {
-  justify-content: center;
-  align-items: center;
-  border-radius: 6px;
-  border: 1px solid #00aa86;
-  background-color: #00aa86;
-  display: flex;
-  width: 495px;
-  max-width: 100%;
-  flex-direction: column;
-  margin: 17px 0 308px 153px;
-  padding: 13px 60px;
-}
-@media (max-width: 991px) {
-  .download {
-    margin-bottom: 40px;
-    padding: 0 20px;
-  }
-}
-.div-22 {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-.img-3 {
-  aspect-ratio: 1;
-  object-fit: contain;
-  object-position: center;
-  width: 22px;
-  overflow: hidden;
-  max-width: 100%;
-  margin: auto 0;
-}
-.div-23 {
-  color: #fff;
-  letter-spacing: 0.04px;
-  align-self: stretch;
-  font: 400 18px Noto Sans, sans-serif;
-}
+  height: 500px;
+  border: 1px solid #C8D3DB !important;
+  border-radius: 5px;
+  background-color: white;
+  box-shadow: 0px 4px 20px 0px rgba(224, 235, 240, 0.537);
+ }
+ .text-title{
+  color: #35473C;
+  font-weight: 600;
+ }
+ .text-body{
+  color: #818181;
+ }
+ .btn{
+  margin-top: 50px;
+  box-shadow: 0px 4px 10px 0px rgba(120, 207, 197, 0.721);
+ }
 </style>
diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
new file mode 100644
index 0000000..df50059
--- /dev/null
+++ b/src/views/MainLayout.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { ref} from "vue";
+import { useRouter } from "vue-router";
+import { useQuasar } from "quasar";
+const router = useRouter();
+const $q = useQuasar();
+const tab = ref('')
+
+</script>
+<!-- โครงเว็บ -->
+<template>
+	<q-layout view="hHh LpR fFr" class="">		
+		<!-- header -->
+		<q-header flat class="text-dark col-12 bgHeader" height-hint="7">
+			<q-toolbar class="items-center row justify-center" :style="$q.screen.gt.xs ? 'padding: 1% 2%;': 'padding: 1% 4%;'">
+				<div class="row items-center no-wrap cursor-pointer">
+					<svg xmlns="http://www.w3.org/2000/svg" width="35" viewBox="0 0 47 36" fill="none">
+						<path d="M42.7273 1.05882C40.3559 0.317647 37.7495 0 35.25 0C31.0841 0 26.5977 0.847059 23.5 3.17647C20.4023 0.847059 15.9159 0 11.75 0C7.58409 0 3.09773 0.847059 0 3.17647V34.2C0 34.7294 0.534091 35.2588 1.06818 35.2588C1.28182 35.2588 1.38864 35.1529 1.60227 35.1529C4.48636 33.7765 8.65227 32.8235 11.75 32.8235C15.9159 32.8235 20.4023 33.6706 23.5 36C26.3841 34.2 31.6182 32.8235 35.25 32.8235C38.775 32.8235 42.4068 33.4588 45.3977 35.0471C45.6114 35.1529 45.7182 35.1529 45.9318 35.1529C46.4659 35.1529 47 34.6235 47 34.0941V3.17647C45.7182 2.22353 44.3295 1.58824 42.7273 1.05882ZM42.7273 29.6471C40.3773 28.9059 37.8136 28.5882 35.25 28.5882C31.6182 28.5882 26.3841 29.9647 23.5 31.7647V7.41177C26.3841 5.61176 31.6182 4.23529 35.25 4.23529C37.8136 4.23529 40.3773 4.55294 42.7273 5.29412V29.6471Z" fill="white"/>
+					</svg>
+				</div>
+			</q-toolbar>
+		</q-header>
+
+		<div class="bg-top"  :style="$q.screen.gt.xs ? 'height: 440px;': 'height: 400px;'" />
+		<!-- end header -->
+
+		<q-page-container class="q-pb-md">
+			<q-page :style="$q.screen.gt.xs ? 'padding: 1.8% 2%; margin-top: -420px; min-height: 100%;': 'padding: 5% 4%; margin-top: -400px;'">
+				<div class="col-12 row justify-center">
+					<router-view :key="$route.fullPath" />
+				</div>
+			</q-page>
+		</q-page-container>
+	</q-layout>
+</template>
+
+<style>
+.border-100{
+	border-radius: 100px;
+}
+.bg-header{
+ 	background:rgba(39, 50, 56, 0)8 !important;
+}
+
+.q-card {
+  box-shadow: 3px 3px 20px -10px rgba(151, 150, 150, 0.261) !important;
+  border: 1px solid #eeeded;
+}
+.q-menu {
+  box-shadow: 3px 3px 10px 1px rgba(95, 95, 95, 0.15) !important;
+}
+.q-field--outlined .q-field__control{
+	border-radius: 5px;
+}
+.q-field--outlined .q-field__control:before {
+  border-color: #C8D3DB;
+}
+.q-field--outlined .q-icon{
+	color: #7474747f;
+}
+.bgHeader{
+	background: #273238;
+	box-shadow: 0px 4px 20px 0px rgba(224, 235, 240, 0.40);
+}
+.bg-top{
+	background: #F7F9FA;
+}
+</style>
diff --git a/src/views/pageView.vue b/src/views/pageView.vue
deleted file mode 100644
index b8d0053..0000000
--- a/src/views/pageView.vue
+++ /dev/null
@@ -1,193 +0,0 @@
-<script setup lang="ts"></script>
-
-<template>
-  <div class="div">
-    <div class="bgGrey">
-      <img
-        loading="lazy"
-        src="https://cdn.builder.io/api/v1/image/assets/TEMP/8059506daf32efc681465813bc7bdd3b52e3bafa93cfd733b357d6043617f3f8?"
-        class="img"
-      />
-    </div>
-    <div class="text-h6 text-weight-bold">วิธีชนะมิตรและจูงใจคน</div>
-    <q-card bordered class="col-12">
-      <q-img
-        loading="lazy"
-        src="https://laz-img-sg.alicdn.com/p/6f38dbbe4df6e0b10d1c7ce97f2c9d3e.jpg"
-        class="col-12 q-px-md q-pb-md"
-        max-width="100%"
-      />
-      <q-card-section class="q-pt-md q-pb-md">
-        <div class="row items-stretch">
-          <div class="col-6">
-            <div class="row q-mt-md">
-              <div class="col-4 text-bold" style="color: black">ชื่อเรื่อง</div>
-              <div class="col-8 text-body" style="color: #818181">
-                วิธีชนะมิตรและจูงใจคน
-              </div>
-            </div>
-
-            <div class="row q-mt-md">
-              <div class="col-4 text-bold" style="color: black">
-                เจ้าของผลงาน
-              </div>
-              <div class="col-8 text-body" style="color: #818181">
-                ธัญลักษณ์ รอดกูล
-              </div>
-            </div>
-
-            <div class="row q-mt-md">
-              <div class="col-4 text-bold" style="color: black">
-                กลุ่ม/หมวดหมู่
-              </div>
-              <div class="col-8 text-body" style="color: #818181">ศิลปะ</div>
-            </div>
-
-            <div class="row q-mt-md">
-              <div class="col-4 text-bold" style="color: black">คำสำคัญ</div>
-              <div class="col-8 text-body" style="color: #818181">
-                ศิลปะ , ภาพวาด
-              </div>
-            </div>
-
-            <div class="row q-mt-md">
-              <div class="col-4 text-bold" style="color: black">ขนาดไฟล์</div>
-              <div class="col-8 text-body" style="color: #818181">
-                753.55 KB
-              </div>
-            </div>
-
-            <div class="row q-mt-md">
-              <div class="col-4 text-bold" style="color: black">
-                วันที่อัปโหลด
-              </div>
-              <div class="col-8 text-body" style="color: #818181">
-                9 พ.ย. 2566
-              </div>
-            </div>
-          </div>
-        </div>
-      </q-card-section>
-    </q-card>
-    <div class="whiteBox">
-      <div class="download">
-        <div class="div-22">
-          <img
-            loading="lazy"
-            src="https://cdn.builder.io/api/v1/image/assets/TEMP/86b98ddb5efca7fc0aefa9aeee8ae044e878760140eadaef9e252787edfa6285?"
-            class="img-3"
-          />
-          <div class="div-23">ดาว์นโหลด</div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.div {
-  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.12);
-  background-color: #f7f9fa;
-  display: flex;
-  flex-direction: column;
-  align-items: start;
-}
-.bgGrey {
-  box-shadow: 0px 4px 20px 0px rgba(224, 235, 240, 0.4);
-  background-color: #273238;
-  align-self: stretch;
-  display: flex;
-  width: 100%;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  padding: 27px 60px;
-}
-@media (max-width: 991px) {
-  .bgGrey {
-    max-width: 100%;
-    padding: 0 20px;
-  }
-}
-.img {
-  aspect-ratio: 1.31;
-  object-fit: contain;
-  object-position: center;
-  width: 47px;
-  fill: #fff;
-  overflow: hidden;
-  max-width: 100%;
-}
-.img-2 {
-  aspect-ratio: 0.71;
-  object-fit: contain;
-  object-position: center;
-  max-width: 50%;
-  overflow: hidden;
-  flex-grow: 1;
-  flex-basis: 0%;
-}
-@media (max-width: 991px) {
-  .img-2 {
-    max-width: 100%;
-  }
-}
-.whiteBox {
-  box-shadow: 0px 4px 22px 0px rgba(200, 211, 219, 0.22);
-  background-color: #fff;
-  align-self: stretch;
-  display: flex;
-  margin-top: -277px;
-  width: 100%;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  padding: 50px 60px;
-}
-@media (max-width: 991px) {
-  .whiteBox {
-    max-width: 100%;
-    margin-top: -200px;
-    padding: 0 20px;
-  }
-}
-.download {
-  justify-content: center;
-  align-items: center;
-  border-radius: 6px;
-  border: 1px solid #00aa86;
-  background-color: #00aa86;
-  display: flex;
-  width: 495px;
-  max-width: 100%;
-  flex-direction: column;
-  margin: 17px 0 308px 153px;
-  padding: 13px 60px;
-}
-@media (max-width: 991px) {
-  .download {
-    margin-bottom: 40px;
-    padding: 0 20px;
-  }
-}
-.div-22 {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-.img-3 {
-  aspect-ratio: 1;
-  object-fit: contain;
-  object-position: center;
-  width: 22px;
-  overflow: hidden;
-  max-width: 100%;
-  margin: auto 0;
-}
-.div-23 {
-  color: #fff;
-  letter-spacing: 0.04px;
-  align-self: stretch;
-  font: 400 18px Noto Sans, sans-serif;
-}
-</style>