add google login btn

frontend/src/App.vue

@@ -20,7 +20,6 @@ const mainStoreRef = storeToRefs(mainStore);
 const loggedIn = mainStoreRef.readIsLoggedIn;
 //getter
 
-
 //lifecycle
 onMounted(() => {
   mainStore.checkLoggedIn();
@@ -55,10 +54,12 @@ a {
     }
   }
 
-  .login-btn {
+  .login-btn,
+  .google-btn {
+    width: 280px;
     display: flex;
     margin: 50px auto 0;
-    padding: 20px 40px;
+    padding: 25px 40px;
     font-size: 16px;
   }
 

frontend/src/views/Login.vue

@@ -40,7 +40,7 @@ function submit() {
 
 // lifecycle
 onMounted(() => {
-  console.log('onMounted');
+  console.log("onMounted");
 });
 </script>
 
@@ -95,16 +95,58 @@ onMounted(() => {
             }}</router-link>
           </p>
 
-          <v-btn
-            rounded="pill"
-            color="primary"
-            @click.prevent="submit"
-            class="login-btn"
-          >
-            {{ t("loginLink") }}
-          </v-btn>
+          <div class="d-flex flex-column">
+            <v-btn
+              rounded="pill"
+              color="primary"
+              @click.prevent="submit"
+              class="login-btn"
+            >
+              {{ t("loginLink") }}
+            </v-btn>
+
+            <section class="line">
+              <p>&ensp;快速登入&ensp;</p>
+              <span></span>
+            </section>
+
+            <v-btn rounded="pill" @click.prevent="submit" class="google-btn">
+              <img src="@/assets/img/google.png" alt="" />
+              以 Google 帳號登入
+            </v-btn>
+          </div>
         </v-form>
       </v-col>
     </v-row>
   </v-container>
 </template>
+
+<style lang="scss" scoped>
+.line {
+  margin-top: 50px;
+  display: flex;
+  justify-content: center;
+  position: relative;
+  p {
+    position: relative;
+    z-index: 1;
+    color: #888888;
+    background-color: #fff;
+  }
+  span {
+    display: block;
+    border-top: 1px solid #888888;
+    width: 280px;
+    position: absolute;
+    bottom: 12px;
+  }
+}
+.google-btn {
+  margin-top: 20px;
+  background-color: #fff;
+  img {
+    width: 20px;
+    margin-right: 10px;
+  }
+}
+</style>

frontend/src/views/main/Upload.vue

@@ -108,7 +108,7 @@ async function Submit() {
           ></v-select> -->
         </v-form>
 
-        <!-- <v-expansion-panels class="anchor-list">
+        <v-expansion-panels class="anchor-list">
           <v-expansion-panel title="選擇主播">
             <v-expansion-panel-text class="p-0">
               <v-sheet class="mx-auto">
@@ -135,7 +135,7 @@ async function Submit() {
               </v-sheet>
             </v-expansion-panel-text>
           </v-expansion-panel>
-        </v-expansion-panels> -->
+        </v-expansion-panels>
       </v-card-text>
       <v-card-actions>
         <v-spacer></v-spacer>