format tailwindcss code style

This commit is contained in:
Jeffrey Hsu 2024-12-18 08:44:37 +08:00
parent ef061006a0
commit baa263d364
3 changed files with 10 additions and 10 deletions

View File

@ -8,16 +8,16 @@ defineProps<{
<template>
<div class="flex flex-grow flex-col items-center justify-center p-4 text-center min-h-[30rem]">
<div class="max-w-md w-full p-6 bg-white rounded-xl shadow-lg">
<div class="text-6xl mb-4">
<div class="w-full max-w-md rounded-xl bg-white p-6 shadow-lg">
<div class="mb-4 text-6xl">
<span v-if="icon" class="block text-blue-500">{{ icon }}</span>
<span v-else></span>
</div>
<h1 class="text-2xl font-bold mb-2">{{ title }}</h1>
<p class="text-gray-600 mb-6">{{ message }}</p>
<h1 class="mb-2 text-2xl font-bold">{{ title }}</h1>
<p class="mb-6 text-gray-600">{{ message }}</p>
<router-link
to="/"
class="inline-block px-6 py-2 bg-blue-500 text-white rounded-lg shadow hover:bg-blue-600 transition duration-200"
class="inline-block rounded-lg bg-blue-500 px-6 py-2 text-white shadow transition duration-200 hover:bg-blue-600"
>
返回首页
</router-link>

View File

@ -27,7 +27,7 @@ onBeforeUnmount(() => {
</script>
<template>
<div class="fixed top-5 right-5 space-y-4 z-50">
<div class="fixed top-5 right-5 z-50 space-y-4">
<div
v-for="(notification, index) in notifications"
:key="index"
@ -36,7 +36,7 @@ onBeforeUnmount(() => {
typeClasses[notification.level]
]"
>
<h3 class="font-bold text-lg">{{ notification.title }}</h3>
<h3 class="text-lg font-bold">{{ notification.title }}</h3>
<p>{{ notification.message }}</p>
</div>
</div>

View File

@ -23,10 +23,10 @@ content.value = await getPost()
</script>
<template>
<section class="container mx-auto m-4 p-8 bg-white rounded-xl shadow-md lg:max-w-screen-lg">
<div class="border-b-2 border-gray-200 border-dashed pb-4 mb-4">
<section class="container m-4 mx-auto rounded-xl bg-white p-8 shadow-md lg:max-w-screen-lg">
<div class="mb-4 border-b-2 border-dashed border-gray-200 pb-4">
<h1 class="text-center text-3xl font-bold">{{ title }}</h1>
<div class="text-gray-600 flex items-center justify-center w-full gap-4">
<div class="flex w-full items-center justify-center gap-4 text-gray-600">
<!-- 日期 -->
<div class="flex items-center gap-2">
<font-awesome-icon :icon="['far', 'clock']" />