ntcri/src/views/CourseDetail.vue

<script setup>
import { ref, reactive, computed, onMounted, watch } from "vue";
import { useMainStore } from "@/stores/store";
import { useRoute } from "vue-router";
import { useI18n } from "vue-i18n";
import VueDatePicker from "@vuepic/vue-datepicker";
import "@vuepic/vue-datepicker/dist/main.css";
import axios from "axios";
import moment from "moment";
import Navbar from "@/components/Navbar.vue";
import CourseCard from "@/components/CourseCard.vue";

const { t } = useI18n();
const route = useRoute();
const store = useMainStore();
const courseId = route.params.id; // 網址參數

onMounted(() => {
  store.getFavoriteClass();
});

// signUpDialog
let step = ref(1);
// let signUpDialog = ref(false);
let signUpDialog = reactive([]);

let checkConsent = ref(false);

watch(signUpDialog, (val) => {
  console.log("signUpDialog", val);
});

let groupName = ref("");
let course = reactive({
  data: [],
});
let isInner = ref("");
let isLoading = ref(false);
let isSignUpLoading = ref(false);

const breadcrumbs = reactive([
  {
    title: "home.title",
    disabled: false,
    href: "/",
  },
  {
    title: "navbar.craft_course",
    disabled: false,
    href: "/course-list",
  },
  {
    title: "course_list",
    disabled: true,
  },
]);

let courseNameId = ref(null);
let courseLoading = ref(false);

// 取得資料
(async () => {
  courseLoading.value = true;
  try {
    const response = await axios.get(
      `${store.apiUrl}/api/get_class_name?class_name_id=${courseId}`
    );
    course.data = response.data.classes[0];
    isInner.value = course.data.is_inner;
    console.log("courseData", course.data);
    courseNameId.value = course.data.class_name_id;
    console.log(" courseNameId.value", courseNameId.value);
    getOtherClass();

    if (course.data.group_id === 1) {
      groupName.value = "未來工藝學群";
    } else if (course.data.group_id === 2) {
      groupName.value = "技藝工藝學群";
    } else if (course.data.group_id === 3) {
      groupName.value = "生活工藝學群";
    } else if (course.data.group_id === 4) {
      groupName.value = "青年工藝學群";
    } else if (course.data.group_id === 5) {
      groupName.value = "世代工藝學群";
    } else if (course.data.group_id === 6) {
      groupName.value = "修護工藝學群";
    } else if (course.data.group_id === 7) {
      groupName.value = "跨域工藝學群";
    } else if (course.data.group_id === 8) {
      groupName.value = "線上工藝學群";
    } else if (course.data.group_id === 9) {
      groupName.value = "綠工藝希望工程";
    }

    setTimeout(() => {
      courseLoading.value = false;
    }, 500);
  } catch (error) {
    console.error(error);
  }
})();

let session = reactive({
  data: [],
});

// 取得場次
(async () => {
  try {
    const response = await axios.get(
      `${store.apiUrl}/api/get_event?class_name_id=${courseId}`
    );
    session.data = response.data.classes;
    console.log("session.data", session.data);
    console.log("response", response.data.classes[0]);
  } catch (error) {
    console.error(error);
  }
})();

let other = reactive({
  classes: [],
});

// 取得清單
async function getOtherClass() {
  isLoading.value = true;
  try {
    const response = await axios.get(
      `${store.apiUrl}/api/get_class_name?is_check=1&category=${course.data.category}&page_num=1&page_amount=4`
    );
    console.log("其他 response", response);

    other.classes = response.data.classes.filter(
      (item) => item.class_name_id !== courseNameId.value
    ); // 移除當前課程

    other.classes = other.classes.slice(0, 3); // 只保留陣列前三筆
    isLoading.value = false;
  } catch (error) {
    console.error(error);
  }
}

const dynamicCols = computed(() => {
  return isInner.value === 0 ? "5" : "8";
});

let user = reactive({
  name: "",
  user_name: "",
  birthday: "",
  gender: "",
  phone: "",
  address: "",
});

function closeSignUpDialog() {
  for (let index = 0; index < signUpDialog.length; index++) {
    signUpDialog[index] = false;
  }
  checkConsent.value = false;
  step.value = 1;
}

// 取得報名資料
async function signUp(index) {
  let isLogin = store.checkToken();
  let token = store.token;
  console.log("isLogin", isLogin);
  console.log("token", token);

  if (isLogin && token) {
    signUpDialog[index] = true;
    let response = await axios.get(
      `${store.apiUrl}/api/get_user_information?get_all=0&get_detail_information=1&access_token=${token}`
    );
    console.log("response.data user_inform", response.data);
    Object.keys(response.data.user_inform[0]).forEach((key) => {
      if (user[key] !== undefined) {
        user[key] = response.data.user_inform[0][key];
      }
    });

    // 判斷手機格式
    const phoneSplit = response.data.user_inform[0].phone.split(" ");

    if (phoneSplit.length === 1) {
      user.phone = phoneSplit[0];
    } else if (phoneSplit.length === 2) {
      user.phone = phoneSplit[1];
    }

    console.log("response", response);
  } else {
    signUpDialog[index] = false;
    alert("請先登入會員！");
    return;
    // store.openLoginDialog();
  }
}

let birthdayError = ref(false);
let resultCard = reactive({
  text: "",
  icon: "",
  color: "",
});

// 確認報名
async function signUpSubmit(id) {
  let token = store.token;
  isSignUpLoading.value = true;

  if (!user.birthday || user.birthday === "") {
    birthdayError.value = true;
  } else {
    birthdayError.value = false;
  }

  // 檢查欄位是否有空值
  for (const value of Object.values(user)) {
    if (!value) {
      isSignUpLoading.value = false;
      return;
    }
  }

  console.log("token", token);

  const formData = new FormData();
  formData.append("event_id", id);

  try {
    const response = await axios.post(
      `${store.apiUrl}/api/input_registration?access_token=${token}`,
      formData
    );
    console.log("確認報名", response);
    console.log("response.data.msg", response.data.msg);
    isSignUpLoading.value = false;

    if (response.data.msg === "success") {
      resultCard.text = "報名成功！";
      resultCard.icon = "mdi-check-circle";
      resultCard.color = "success";
      step.value++;
    } else if (response.data.msg === "已經有報名過了") {
      console.log("已經有報名過了");
      resultCard.text = "已報名過此課程";
      resultCard.icon = "mdi-information";
      resultCard.color = "info";
      step.value++;
    } else {
      resultCard.text = response.data.msg;
      resultCard.icon = "mdi-information";
      resultCard.color = "info";
      step.value++;
    }

    isSignUpLoading.value = false;
    console.log("isSignUpLoading", isSignUpLoading.value);
  } catch (error) {
    console.error(error);
  }
}

// 開啟登入視窗
// function openLoginDialog() {
//   store.loginDialog = true;
// }

let currentTitle = computed(() => {
  switch (step.value) {
    case 1:
      return "form.registration_consent";
    case 2:
      return "form.course_registration";
    default:
      return "";
  }
});

// 判斷報名時間是否已截止
function isDateExpired(dateString) {
  const registrationEndDate = new Date(dateString);
  // 獲取當前時間
  const currentDate = new Date();

  console.log("registrationEndDate", registrationEndDate);
  console.log("currentDate", currentDate);

  if (registrationEndDate > currentDate) {
    return true; // 日期已過期
  } else {
    return false; // 日期未過期
  }
}
</script>

<template>
  <Navbar />

  <v-container class="mt-16 course-detail">
    <v-breadcrumbs :items="breadcrumbs" divider="/" class="mt-3 mb-16 pa-0">
      <template v-slot:title="{ item }">
        {{ t(item.title) }}
      </template>
    </v-breadcrumbs>

    <Transition v-if="courseLoading">
      <div class="d-flex justify-center h-screen">
        <v-progress-circular
          color="grey-lighten-4"
          indeterminate
        ></v-progress-circular>
      </div>
    </Transition>

    <Transition v-else>
      <v-row class="justify-center">
        <v-col cols="12" md="3" class="title pa-0">
          <img
            src="@/assets/img/course/detail-background.png"
            alt="臺灣工藝學習平台"
            class="bg-img"
          />
          <h2 class="mb-5 mb-md-0 me-md-5">{{ course.data.name }}</h2>
        </v-col>
        <v-col cols="12" :md="dynamicCols" class="pa-0 d-flex justify-center">
          <v-img
            class="cover-img"
            :class="{ small: isInner === 0 }"
            :lazy-src="store.getImageSrc(course.data)"
            :src="store.getImageSrc(course.data)"
            :alt="course.data.name"
          >
            <template v-slot:placeholder>
              <div class="d-flex align-center justify-center fill-height">
                <v-progress-circular
                  color="grey-lighten-4"
                  indeterminate
                ></v-progress-circular>
              </div>
            </template>
          </v-img>

          <!-- <img
            :src="store.getImageSrc(course.data)"
            alt="臺灣工藝學習平台"
            class="cover-img"
            :class="{ small: isInner === 0 }"
          /> -->
        </v-col>

        <v-col cols="12">
          <div class="info">
            <table class="data-table">
              <thead>
                <tr>
                  <th colspan="2">{{ t("course_info") }}</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>{{ t("form.course_name") }}</td>
                  <td>{{ course.data.name }}</td>
                </tr>
                <tr>
                  <td>{{ t("form.course_intro") }}</td>
                  <td
                    v-html="store.formatString(course.data.introduction)"
                  ></td>
                </tr>
                <tr v-show="course.data.category !== ''">
                  <td>{{ t("form.craft_category") }}</td>
                  <td>
                    {{
                      course.data.group_id === 9
                        ? course.data.group_sort
                        : course.data.category
                    }}
                  </td>
                </tr>
                <tr>
                  <td>{{ t("form.course_location") }}</td>
                  <td>{{ course.data.address }}</td>
                </tr>
                <tr v-if="course.data.organizer !== ''">
                  <td>{{ t("form.organizer") }}</td>
                  <td>
                    {{
                      course.data.group_id === 9
                        ? course.data.location_name
                        : course.data.organizer
                    }}
                  </td>
                </tr>
                <!-- <tr>
                <td>課程地點</td>
                <td>{{ course.data.address }}</td>
              </tr> -->
                <tr>
                  <td>{{ t("form.all_study_groups") }}</td>
                  <td>{{ groupName }}</td>
                </tr>
                <!-- <tr>
                <td>報名對象</td>
                <td></td>
              </tr> -->
                <!-- <tr>
                <td>收費方式</td>
                <td></td>
              </tr> -->
                <!-- <tr>
                <td>報名方式</td>
                <td></td>
              </tr> -->
                <tr
                  v-if="
                    isInner !== 0 &&
                    session.data.length &&
                    session.data[0]?.contact !== '' &&
                    course.data.group_id !== 9
                  "
                >
                  <td>{{ t("form.contact_information") }}</td>
                  <td>{{ session.data[0]?.contact }}</td>
                </tr>
                <tr
                  v-if="
                    isInner !== 0 &&
                    session.data.length &&
                    session.data[0]?.fee_payment &&
                    session.data[0]?.fee_payment !== null
                  "
                >
                  <td>{{ t("form.payment_method") }}</td>
                  <td>
                    {{ session.data[0]?.fee_payment }}
                    <span
                      v-if="session.data[0]?.fee_payment === '匯款'"
                      class="text-red"
                    >
                      （匯款後請主動來電告知姓名與帳號後五碼）
                    </span>
                  </td>
                </tr>
                <tr v-if="isInner === 0">
                  <td>{{ t("form.remarks") }}</td>
                  <td>此課程不會登錄至學習護照中</td>
                </tr>
              </tbody>
            </table>
            <div class="d-flex justify-end">
              <v-btn v-if="isInner === 0" rounded="xl" color="brown">
                <a :href="session.data[0]?.URL" target="_blank"
                  >觀看課程資訊與報名</a
                >
              </v-btn>
              <!-- <v-btn v-else rounded="xl" color="brown">附件下載</v-btn> -->
            </div>
          </div>
        </v-col>
        <v-col
          cols="12"
          v-if="isInner !== 0 && session.data.length"
          :class="{
            hide: course.data.special_class_list_name === 'one_day_class',
          }"
        >
          <div class="sessions mb-16">
            <table>
              <thead>
                <tr>
                  <th>{{ t("form.session_name") }}</th>
                  <th>{{ t("form.start_time") }} / {{ t("form.end_time") }}</th>
                  <th v-show="session.data[0].location">
                    {{ t("form.classroom") }}
                  </th>
                  <th>{{ t("form.course_price") }}</th>
                  <th>{{ t("form.course_quota") }}</th>
                  <th>{{ t("form.instructor") }}</th>
                  <th>{{ t("form.registration_deadline") }}</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in session.data" :key="index">
                  <td width="20%">{{ item.class_name }}</td>
                  <td width="20%">
                    {{
                      moment(`${item.start_time}`)
                        .utcOffset(0)
                        .format("YYYY/MM/DD HH:mm")
                    }}
                    <br />
                    ～ <br />
                    {{
                      moment(`${item.end_time}`)
                        .utcOffset(0)
                        .format("YYYY/MM/DD HH:mm")
                    }}
                  </td>
                  <td width="15%" v-show="item.location !== ''">
                    {{ item.location }}
                  </td>
                  <td width="20%">{{ item.fee_method }}</td>
                  <td width="10%">{{ item.number_limit }}</td>
                  <td width="15%">{{ item.lecturer }}</td>
                  <td>
                    <span
                      v-if="
                        item.registration_end && item.registration_end !== ''
                      "
                    >
                      {{
                        moment(`${item.registration_end}`)
                          .utcOffset(0)
                          .format("YYYY/MM/DD HH:mm")
                      }}
                    </span>
                    <span v-else>無</span>
                  </td>
                  <td>
                    <v-btn v-if="isInner === 0" rounded="xl" color="brown">
                      <a :href="item.URL" target="_blank">{{ t("sign_up") }}</a>
                    </v-btn>

                    <v-btn
                      v-if="isDateExpired(item.registration_end)"
                      @click="signUp(index)"
                      :text="t('sign_up')"
                      rounded="xl"
                      color="brown"
                    >
                    </v-btn>

                    <v-btn
                      v-else
                      :text="t('registration_closed')"
                      rounded="xl"
                      color="brown"
                      disabled
                    >
                    </v-btn>

                    <v-dialog
                      v-model="signUpDialog[index]"
                      width="auto"
                      class="pa-0 signup-dialog"
                      scrollable
                      persistent
                    >
                      <template v-slot:default="{ isActive }">
                        <v-card class="mx-auto pa-3" max-width="1000">
                          <v-card-title
                            class="text-h6 font-weight-regular justify-space-between"
                          >
                            <v-avatar
                              v-if="step !== 3"
                              color="primary"
                              size="26"
                              v-text="step"
                              class="me-3"
                            ></v-avatar>
                            <span>{{ t(`${currentTitle}`) }}</span>
                          </v-card-title>

                          <v-window v-model="step" :touch="false">
                            <v-window-item :value="1">
                              <v-card-text>
                                <section class="consent">
                                  <h4 class="text-center">
                                    個人資料使用同意書
                                  </h4>
                                  <p>
                                    臺灣工藝學習平台〈以下簡稱工藝中心〉因辦理
                                    <span class="font-weight-medium"
                                      >【{{ item.class_name }}】</span
                                    >
                                    業務而獲取您的個人資料：姓名、連絡方式〈包括但不限於電話號碼、E-MAIL、居住或工作地址〉等得以直接或間接識別您個人之資料。若您所提供之個人資料，經檢舉或工藝中心發現不足以確認您的身分真實性或其他個人資料冒用、盜用、資料不實等情形，工藝中心有權暫時停止提供對您的服務。
                                  </p>

                                  <p>
                                    工藝中心將基於個人資料保護法及相關法令之規定下，依隱私權保護政策，蒐集、處理及利用您的個人資料。您同意工藝中心以您所提供的個人資料確認您的身份、與您進行連絡、提供您相關服務及資訊，以及其他隱私權保護政策規範之使用方式。工藝中心針對您的個人資料利用之期間，自您簽署同意起至您請求刪除個資為止。
                                  </p>

                                  <p>
                                    您可依個人資料保護法，就您的個人資料向工藝中心進行查詢或請求閱覽、請求給複製本、請求補充或更正、請求停止蒐集及處理與利用、請求刪除。但因您行使上述權利而導致工藝中心相關業務對您的權益產生減損時，工藝中心不負相關賠償責任。
                                  </p>
                                </section>

                                <v-checkbox
                                  v-model="checkConsent"
                                  label="我已完全閱讀並同意以上內容"
                                  color="brown"
                                ></v-checkbox>
                              </v-card-text>
                            </v-window-item>

                            <v-window-item :value="2">
                              <v-card-text class="pa-0">
                                <v-sheet class="mx-auto user-form">
                                  <v-form @submit.prevent>
                                    <h2
                                      class="text-center font-weight-medium mb-8"
                                    >
                                      【{{ item.class_name }}】
                                    </h2>
                                    <v-label class="d-block">
                                      <p class="d-flex mb-5">
                                        {{ t("profile.full_name") }}
                                        <span class="mark">*</span>
                                      </p>
                                      <v-text-field
                                        v-model="user.name"
                                        :rules="[
                                          (v) => !!v || '請輸入您的真實姓名',
                                        ]"
                                        density="compact"
                                        variant="outlined"
                                      ></v-text-field>
                                    </v-label>

                                    <v-label class="mt-1">
                                      <p class="d-flex mb-5">
                                        {{ t("profile.birthday") }}
                                        <span class="mark">*</span>
                                      </p>
                                    </v-label>

                                    <VueDatePicker
                                      v-model="user.birthday"
                                      :format="store.datePickerFormat"
                                      :enable-time-picker="false"
                                      :max-date="new Date()"
                                      locale="cn"
                                    ></VueDatePicker>

                                    <span
                                      v-if="birthdayError"
                                      class="birthday-error"
                                      >請選擇您的生日</span
                                    >

                                    <v-label class="d-block mt-5">
                                      <p class="d-flex mb-5">
                                        {{ t("profile.phoneNumber") }}
                                        <span class="mark">*</span>
                                      </p>
                                      <v-text-field
                                        v-model="user.phone"
                                        :rules="[
                                          (v) => !!v || '請輸入您的手機號碼',
                                        ]"
                                        density="compact"
                                        variant="outlined"
                                      ></v-text-field>
                                    </v-label>

                                    <v-label class="d-block mt-1">
                                      <p class="d-flex mb-3">
                                        {{ t("profile.gender") }}
                                        <span class="mark">*</span>
                                      </p>

                                      <v-radio-group
                                        v-model="user.gender"
                                        inline
                                      >
                                        <v-radio
                                          label="男"
                                          value="男"
                                          color="brown"
                                        ></v-radio>
                                        <v-radio
                                          label="女"
                                          value="女"
                                          class="mx-2"
                                          color="brown"
                                        ></v-radio>
                                        <v-radio
                                          label="多元"
                                          value="多元"
                                          color="brown"
                                        ></v-radio>
                                      </v-radio-group>
                                    </v-label>

                                    <v-label class="d-block">
                                      <p class="d-flex mb-5">
                                        {{ t("profile.address") }}
                                        <span class="mark">*</span>
                                      </p>
                                      <v-text-field
                                        v-model="user.address"
                                        :rules="[
                                          (v) => !!v || '請輸入您的地址',
                                        ]"
                                        density="compact"
                                        variant="outlined"
                                      ></v-text-field>
                                    </v-label>

                                    <v-label class="d-block">
                                      <p class="d-flex mb-5">
                                        {{ t("form.remarks") }}
                                      </p>

                                      <v-textarea
                                        placeholder="如有特殊需求或有需攜伴，請在備註欄告知老師"
                                        variant="outlined"
                                        rows="2"
                                      ></v-textarea>
                                    </v-label>

                                    <v-row class="mt-3">
                                      <v-col cols="6">
                                        <v-btn
                                          rounded
                                          class="w-100"
                                          variant="outlined"
                                          color="brown"
                                          @click="
                                            isActive.value = false;
                                            step = 1;
                                          "
                                          >{{ t("form.cancel") }}</v-btn
                                        >
                                      </v-col>
                                      <v-col cols="6">
                                        <v-btn
                                          rounded
                                          type="submit"
                                          class="w-100"
                                          variant="flat"
                                          color="brown"
                                          :loading="isSignUpLoading"
                                          @click="signUpSubmit(item.event_id)"
                                          >{{ t("sign_up") }}</v-btn
                                        >
                                      </v-col>
                                    </v-row>
                                  </v-form>
                                </v-sheet>
                              </v-card-text>
                            </v-window-item>

                            <v-window-item :value="3">
                              <v-card-text class="px-0 px-sm-2">
                                <v-sheet
                                  width="300"
                                  class="text-center mx-auto result-card"
                                >
                                  <v-icon
                                    class="mb-5"
                                    :color="resultCard.color"
                                    :icon="resultCard.icon"
                                    size="112"
                                  ></v-icon>

                                  <h2 class="text-h5 mb-6">
                                    {{ resultCard.text }}
                                  </h2>

                                  <v-divider class="mb-7"></v-divider>

                                  <v-btn
                                    class="text-none me-3"
                                    rounded
                                    width="90"
                                    color="brown"
                                    variant="outlined"
                                    @click="
                                      isActive.value = false;
                                      step = 1;
                                    "
                                  >
                                    {{ t("form.close") }}
                                  </v-btn>
                                  <v-btn
                                    color="brown"
                                    class="text-none"
                                    rounded
                                    @click="isActive.value = false"
                                  >
                                    <router-link to="/user/passport"
                                      >前往會員專區</router-link
                                    >
                                  </v-btn>
                                </v-sheet>
                              </v-card-text>
                            </v-window-item>
                          </v-window>

                          <v-divider v-if="step === 1"></v-divider>

                          <v-card-actions v-if="step === 1" class="mt-2">
                            <!-- <v-btn v-if="step > 1" variant="text" @click="step--">
                            上一步
                          </v-btn> -->
                            <v-spacer></v-spacer>
                            <v-btn
                              class="me-2 px-5"
                              color="brown"
                              variant="outlined"
                              @click="isActive.value = false"
                            >
                              {{ t("disagree") }}
                            </v-btn>
                            <v-btn
                              class="px-5"
                              color="brown"
                              variant="flat"
                              :disabled="!checkConsent"
                              @click="step++"
                            >
                              {{ t("agree") }}
                            </v-btn>
                          </v-card-actions>
                        </v-card>
                      </template>
                    </v-dialog>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </v-col>
        <v-col v-if="other.classes.length" cols="12" class="mb-16">
          <p class="other-title">{{ t("recommended_courses") }}</p>
          <div class="d-flex justify-center mb-10" v-if="isLoading">
            <v-progress-circular
              color="grey-lighten-4"
              indeterminate
            ></v-progress-circular>
          </div>
          <v-row>
            <v-col
              sm="6"
              md="4"
              cols="12"
              v-for="(item, index) in other.classes"
              :key="index"
              class="pa-5"
            >
              <CourseCard :data="item" />
            </v-col>
          </v-row>
        </v-col>
      </v-row>
    </Transition>
  </v-container>
</template>

<style lang="scss">
.v-window {
  overflow-y: auto;
}

.hide {
  display: none !important;
}

.course-detail {
  .cover-img {
    .v-responsive__sizer {
      padding-bottom: 0 !important;
    }
    img {
      max-height: 25em;
      object-fit: contain;
      &.small {
        width: auto;
        height: auto;
      }
    }
  }

  .title {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    h2 {
      font-size: 1.5em;
      font-weight: 500;
      line-height: 2em;
      letter-spacing: 0.0625em;
      color: #201715;
    }
    .bg-img {
      width: 15.625em;
      position: absolute;
      z-index: -1;
      right: -0.9375em;
      bottom: -6.25em;
    }
  }

  .info {
    margin: 3em auto;
    padding: 1.5em 3em;
    overflow-x: auto;

    @media (max-width: 600px) {
      & {
        padding: 1.5em;
      }
    }

    .data-table {
      @media (max-width: 600px) {
        width: 700px;
      }
    }
    table {
      td {
        padding: 25px 25px 0;
        line-height: 2em;
        letter-spacing: 0.0625em;
        vertical-align: top;
        white-space: pre-line; // 顯示換行標籤
        &:first-child {
          border-right: 0.0625em solid #333;
        }

        strong {
          font-weight: 500;
        }
      }
      th {
        padding-bottom: 1.25em;
        border-bottom: 0.0625em solid #333;
      }
      th,
      td:first-child {
        width: 7.3125em;
        font-size: 1.125em;
        font-weight: 500;
      }
    }
  }

  .info,
  .sessions {
    background-color: #f2f2f4;
    table {
      width: 100%;
      border-collapse: collapse;
      td {
        line-height: 1.875em;
      }
    }
  }

  .sessions {
    padding: 1.5em 1.5em 0.5em;
    letter-spacing: 0.1em;
    overflow-x: scroll;
    table {
      width: 100%;
      position: relative;

      @media (max-width: 1280px) {
        width: 1000px;
      }

      th {
        width: 7.3125em;
        font-size: 1.125em;
        font-weight: 500;
        padding-bottom: 1.25em;
        white-space: nowrap;
      }
      td {
        padding: 1em 2em;
        text-align: center;
        vertical-align: middle;
        white-space: nowrap;
      }
      tbody {
        background-color: #fff;
      }
    }

    .signup-btn {
      position: absolute;
      bottom: -3.3125em;
      right: 0;
    }
  }

  @media (max-width: 960px) {
    width: 100%;
  }

  .other-title {
    margin: 1.875em 0;
    padding-bottom: 1.875em;
    font-size: 1.625em;
    text-align: center;
    border-bottom: 0.0625em solid;
  }
}

.user-form {
  width: 37.5em;
  padding: 0 1.875em 1.875em;
  // box-shadow: 0.0625em 0.0625em 0.5em #ccc;
  // border-radius: 0.3125em;
  // margin: 0 0.9375em 0.9375em;

  @media (max-width: 600px) {
    width: 100%;
    padding: 0;
  }

  h2 {
    font-size: 1.125em;
  }

  .result-card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .birthday-error {
    display: block;
    font-size: 0.75em;
    color: #b00020;
    margin-left: 0.9375em;
    padding-top: 0.3125em;
  }
}

.signup-dialog {
  .v-card-text {
    @media (max-width: 600px) {
      overflow-y: auto;
      max-height: 31.25em;
    }
  }
}

.consent {
  max-width: 50em;
  padding: 1.875em 1.25em;
  border: 0.0625em solid #909090;
  border-radius: 0.3125em;
  h4 {
    font-size: 1.125em;
    font-weight: 400;
    margin-bottom: 1.25em;
  }
  p {
    margin-top: 1.25em;
    font-size: 1em;
    line-height: 1.625em;
  }
}
</style>