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> <template>
<div class="flex flex-grow flex-col items-center justify-center p-4 text-center min-h-[30rem]"> <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="w-full max-w-md rounded-xl bg-white p-6 shadow-lg">
<div class="text-6xl mb-4"> <div class="mb-4 text-6xl">
<span v-if="icon" class="block text-blue-500">{{ icon }}</span> <span v-if="icon" class="block text-blue-500">{{ icon }}</span>
<span v-else></span> <span v-else></span>
</div> </div>
<h1 class="text-2xl font-bold mb-2">{{ title }}</h1> <h1 class="mb-2 text-2xl font-bold">{{ title }}</h1>
<p class="text-gray-600 mb-6">{{ message }}</p> <p class="mb-6 text-gray-600">{{ message }}</p>
<router-link <router-link
to="/" 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> </router-link>

View File

@ -27,7 +27,7 @@ onBeforeUnmount(() => {
</script> </script>
<template> <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 <div
v-for="(notification, index) in notifications" v-for="(notification, index) in notifications"
:key="index" :key="index"
@ -36,7 +36,7 @@ onBeforeUnmount(() => {
typeClasses[notification.level] 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> <p>{{ notification.message }}</p>
</div> </div>
</div> </div>

View File

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