ouyang/lsky-pro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

💄 改进样式

Browse Source
This commit is contained in:
Wisp X
2021-12-22 12:33:23 +08:00
parent dde30bde77
commit aca4acbc8e
8 changed files with 287 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/app.css
Vendored
+50
View File
@@ -702,6 +702,9 @@ select {
.left-\[50\%\] {
left: 50%;
}
.top-12 {
top: 3rem;
}
.z-0 {
z-index: 0;
}
@@ -743,6 +746,10 @@ select {
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.my-6 {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
.ml-3 {
margin-left: 0.75rem;
}
@@ -920,6 +927,9 @@ select {
.flex-1 {
flex: 1 1 0%;
}
.flex-auto {
flex: 1 1 auto;
}
.basis-1\/3 {
flex-basis: 33.333333%;
}
@@ -1077,6 +1087,12 @@ select {
.overflow-scroll {
overflow: scroll;
}
.overflow-y-auto {
overflow-y: auto;
}
.overflow-y-scroll {
overflow-y: scroll;
}
.overscroll-contain {
-ms-scroll-chaining: none;
overscroll-behavior: contain;
@@ -1318,6 +1334,9 @@ select {
.pt-8 {
padding-top: 2rem;
}
.pb-14 {
padding-bottom: 3.5rem;
}
.text-center {
text-align: center;
}
@@ -1577,6 +1596,9 @@ select {
.ease-in {
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.hover\:w-32:hover {
width: 8rem;
}
.hover\:bg-gray-100:hover {
--tw-bg-opacity: 1;
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -1619,6 +1641,9 @@ select {
.focus\:z-10:focus {
z-index: 10;
}
.focus\:w-32:focus {
width: 8rem;
}
.focus\:border-blue-300:focus {
--tw-border-opacity: 1;
border-color: rgb(147 197 253 / var(--tw-border-opacity));
@@ -1771,6 +1796,11 @@ select {
}
@media (min-width: 768px) {
.md\:my-10 {
margin-top: 2.5rem;
margin-bottom: 2.5rem;
}
.md\:mt-8 {
margin-top: 2rem;
}
@@ -1787,6 +1817,10 @@ select {
margin-top: 1.5rem;
}
.md\:mt-10 {
margin-top: 2.5rem;
}
.md\:block {
display: block;
}
@@ -1803,6 +1837,10 @@ select {
width: 70%;
}
.md\:w-36 {
width: 9rem;
}
.md\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@@ -1850,6 +1888,18 @@ select {
padding-top: 6rem;
}
.md\:pt-6 {
padding-top: 1.5rem;
}
.md\:pt-8 {
padding-top: 2rem;
}
.md\:pt-10 {
padding-top: 2.5rem;
}
.md\:hover\:w-52:hover {
width: 13rem;
}
public/css/common.css
Vendored
+12
View File
@@ -222,6 +222,18 @@ button.toast-close-button {
scrollbar-width: none;
/* Firefox */
}
::-webkit-scrollbar {
width: 6px;
height: 100%;
}
::-webkit-scrollbar-thumb {
border-radius: 6px;
background: #cad3e2;
}
::-webkit-scrollbar-track {
border-radius: 6px;
background: #ffffff;
}
progress::-webkit-progress-bar {
background-color: #d7d7d7;
}
resources/css/common.less
+23 -2
View File
@@ -9,6 +9,22 @@
scrollbar-width: none; /* Firefox */
}
// 滚动条样式
::-webkit-scrollbar {
width: 6px;
height: 100%;
}
::-webkit-scrollbar-thumb {
border-radius: 6px;
background: #cad3e2;
}
::-webkit-scrollbar-track {
border-radius: 6px;
background: rgb(255, 255, 255);
}
progress::-webkit-progress-bar {
background-color: #d7d7d7;
}
@@ -18,15 +34,17 @@ progress::-webkit-progress-value {
}
#toast-container {
&>div {
& > div {
font-size: 13px;
padding: 10px 10px 10px 50px;
box-shadow: 0 0 12px rgba(183, 183, 183, 0.47);
&:hover {
box-shadow: 0 0 12px rgba(161, 161, 161, 0.47);
}
}
}
.toast-close-button {
right: -0.15em;
}
@@ -39,13 +57,16 @@ progress::-webkit-progress-value {
#photos-grid {
a:hover, a.selected {
outline-color: #3b82f6;
.photo-select {
display: block;
}
&.selected {
.photo-select {
border-color: white;
&>i {
& > i {
color: #0061ff;
}
}
resources/views/components/container.blade.php
+1 -1
View File
@@ -1,5 +1,5 @@
@props(['full' => request()->routeIs('images')])
<div {{ $attributes->merge(['class' => $full ? 'mx-auto sm:ml-64' : 'mx-auto sm:ml-64 px-6 md:px-10 lg:px-10 xl:px-10 2xl:px-60']) }}>
<div {{ $attributes->merge(['class' => $full ? 'h-full mx-auto sm:ml-64' : 'h-full mx-auto sm:ml-64 px-6 md:px-10 lg:px-10 xl:px-10 2xl:px-60']) }}>
{{ $slot }}
</div>
resources/views/dashboard.blade.php
+113 -111
View File
@@ -1,123 +1,125 @@
@section('title', '仪表盘')
<x-app-layout>
<div class="space-y-6 md:space-y-0 md:grid md:grid-cols-2 xl:grid-cols-4 md:gap-x-4 xl:gap-x-8 md:gap-y-4 xl:gap-y-8">
<div class="flex bg-white rounded p-4 space-x-4">
<i class="fas fa-images text-amber-500 text-5xl"></i>
<div class="flex flex-col">
<p class="text-gray-700 text-sm">图片数量</p>
<p class="text-gray-800 font-semibold text-xl">{{ $user->image_num }}</p>
<div class="my-6 md:my-10">
<div class="space-y-6 md:space-y-0 md:grid md:grid-cols-2 xl:grid-cols-4 md:gap-x-4 xl:gap-x-8 md:gap-y-4 xl:gap-y-8">
<div class="flex bg-white rounded p-4 space-x-4">
<i class="fas fa-images text-amber-500 text-5xl"></i>
<div class="flex flex-col">
<p class="text-gray-700 text-sm">图片数量</p>
<p class="text-gray-800 font-semibold text-xl">{{ $user->image_num }}</p>
</div>
</div>
<div class="flex bg-white rounded p-4 space-x-4">
<i class="fas fa-hdd text-red-500 text-5xl"></i>
<div class="flex flex-col">
<p class="text-gray-700 text-sm">可用储存</p>
<p class="text-gray-800 font-semibold text-xl">{{ \App\Utils::formatSize(($user->capacity - $user->images->sum('size')) * 1024) }}</p>
</div>
</div>
<div class="flex bg-white rounded p-4 space-x-4">
<i class="fas fa-hdd text-green-500 text-5xl"></i>
<div class="flex flex-col">
<p class="text-gray-700 text-sm">使用储存</p>
<p class="text-gray-800 font-semibold text-xl">{{ \App\Utils::formatSize($user->images->sum('size') * 1024) }}</p>
</div>
</div>
<div class="flex bg-white rounded p-4 space-x-4">
<i class="fas fa-hdd text-emerald-500 text-5xl"></i>
<div class="flex flex-col">
<p class="text-gray-700 text-sm">总储存</p>
<p class="text-gray-800 font-semibold text-xl">{{ \App\Utils::formatSize($user->capacity * 1024) }}</p>
</div>
</div>
</div>
<div class="flex bg-white rounded p-4 space-x-4">
<i class="fas fa-hdd text-red-500 text-5xl"></i>
<div class="flex flex-col">
<p class="text-gray-700 text-sm">可用储存</p>
<p class="text-gray-800 font-semibold text-xl">{{ \App\Utils::formatSize(($user->capacity - $user->images->sum('size')) * 1024) }}</p>
</div>
</div>
<div class="flex bg-white rounded p-4 space-x-4">
<i class="fas fa-hdd text-green-500 text-5xl"></i>
<div class="flex flex-col">
<p class="text-gray-700 text-sm">使用储存</p>
<p class="text-gray-800 font-semibold text-xl">{{ \App\Utils::formatSize($user->images->sum('size') * 1024) }}</p>
</div>
</div>
<div class="flex bg-white rounded p-4 space-x-4">
<i class="fas fa-hdd text-emerald-500 text-5xl"></i>
<div class="flex flex-col">
<p class="text-gray-700 text-sm">总储存</p>
<p class="text-gray-800 font-semibold text-xl">{{ \App\Utils::formatSize($user->capacity * 1024) }}</p>
</div>
</div>
</div>
<div class="flex md:mt-8 flex-col-reverse md:flex-row space-y-6 md:space-y-0 md:space-x-4">
<div class="w-full mt-4 md:mt-0">
<x-box>
<x-slot name="title">可使用的策略</x-slot>
<x-slot name="content">
@if(! $strategies)
<x-no-data message="没有可用的策略，将使用系统默认配置。" />
@else
<div class="divide-y divide-solid">
@foreach ($strategies as $strategy)
<div class="w-full px-4 py-3">
<p>{{ $strategy->name }}</p>
<span class="text-gray-700 text-sm">{{ $strategy->intro }}</span>
</div>
@endforeach
</div>
@endif
</x-slot>
</x-box>
</div>
<div class="flex flex-col md:w-[70%] xl:w-[40%] space-y-8">
<x-box>
<x-slot name="title">我的信息</x-slot>
<x-slot name="content">
<div class="px-4 py-3 space-y-3">
<div class="flex">
<p class="basis-1/3">姓名</p>
<p class="basis-2/3 truncate text-gray-800">{{ $user->name }}</p>
</div>
<div class="flex">
<p class="basis-1/3">邮箱</p>
<p class="basis-2/3 truncate text-gray-800">{{ $user->email }}</p>
</div>
<div class="flex">
<p class="basis-1/3">注册时间</p>
<p class="basis-2/3 truncate text-gray-800">{{ $user->created_at }}</p>
</div>
<div class="flex">
<p class="basis-1/3">注册 IP</p>
<p class="basis-2/3 truncate text-gray-800">{{ $user->registered_ip }}</p>
</div>
@if(! $user->email_verified_at)
<p class="p-2 text-sm rounded bg-red-500 text-white">你的账号尚未激活，功能受限，请根据激活邮件指引激活账号，如果你没有收到邮件，请点击 <a href="" class="text-green-400">这里</a> 重新发送。</p>
<div class="flex md:mt-8 flex-col-reverse md:flex-row space-y-6 md:space-y-0 md:space-x-4">
<div class="w-full mt-4 md:mt-0">
<x-box>
<x-slot name="title">可使用的策略</x-slot>
<x-slot name="content">
@if(! $strategies)
<x-no-data message="没有可用的策略，将使用系统默认配置。" />
@else
<div class="divide-y divide-solid">
@foreach ($strategies as $strategy)
<div class="w-full px-4 py-3">
<p>{{ $strategy->name }}</p>
<span class="text-gray-700 text-sm">{{ $strategy->intro }}</span>
</div>
@endforeach
</div>
@endif
</div>
</x-slot>
</x-box>
<x-box>
<x-slot name="title">角色组信息</x-slot>
<x-slot name="content">
<div class="px-4 py-3 space-y-3">
<div class="flex">
<p class="basis-1/2">组名</p>
<p class="basis-1/2 truncate text-gray-800">{{ $user->group ? $user->group->name : '系统默认组' }}</p>
</x-slot>
</x-box>
</div>
<div class="flex flex-col md:w-[70%] xl:w-[40%] space-y-8">
<x-box>
<x-slot name="title">我的信息</x-slot>
<x-slot name="content">
<div class="px-4 py-3 space-y-3">
<div class="flex">
<p class="basis-1/3">姓名</p>
<p class="basis-2/3 truncate text-gray-800">{{ $user->name }}</p>
</div>
<div class="flex">
<p class="basis-1/3">邮箱</p>
<p class="basis-2/3 truncate text-gray-800">{{ $user->email }}</p>
</div>
<div class="flex">
<p class="basis-1/3">注册时间</p>
<p class="basis-2/3 truncate text-gray-800">{{ $user->created_at }}</p>
</div>
<div class="flex">
<p class="basis-1/3">注册 IP</p>
<p class="basis-2/3 truncate text-gray-800">{{ $user->registered_ip }}</p>
</div>
@if(! $user->email_verified_at)
<p class="p-2 text-sm rounded bg-red-500 text-white">你的账号尚未激活，功能受限，请根据激活邮件指引激活账号，如果你没有收到邮件，请点击 <a href="" class="text-green-400">这里</a> 重新发送。</p>
@endif
</div>
<div class="flex">
<p class="basis-1/2">最大文件大小</p>
<p class="basis-1/2 truncate text-gray-800">{{ \App\Utils::formatSize($configs->get(\App\Enums\GroupConfigKey::MaximumFileSize) * 1024) }}</p>
</x-slot>
</x-box>
<x-box>
<x-slot name="title">角色组信息</x-slot>
<x-slot name="content">
<div class="px-4 py-3 space-y-3">
<div class="flex">
<p class="basis-1/2">组名</p>
<p class="basis-1/2 truncate text-gray-800">{{ $user->group ? $user->group->name : '系统默认组' }}</p>
</div>
<div class="flex">
<p class="basis-1/2">最大文件大小</p>
<p class="basis-1/2 truncate text-gray-800">{{ \App\Utils::formatSize($configs->get(\App\Enums\GroupConfigKey::MaximumFileSize) * 1024) }}</p>
</div>
<div class="flex">
<p class="basis-1/2">并发上传数量</p>
<p class="basis-1/2 truncate text-gray-800">{{ $configs->get(\App\Enums\GroupConfigKey::ConcurrentUploadNum) }} 张</p>
</div>
<div class="flex">
<p class="basis-1/2">每分钟上传限制</p>
<p class="basis-1/2 truncate text-gray-800">{{ $configs->get(\App\Enums\GroupConfigKey::LimitPerMinute) }} 张</p>
</div>
<div class="flex">
<p class="basis-1/2">每小时上传限制</p>
<p class="basis-1/2 truncate text-gray-800">{{ $configs->get(\App\Enums\GroupConfigKey::LimitPerHour) }} 张</p>
</div>
<div class="flex">
<p class="basis-1/2">每天上传限制</p>
<p class="basis-1/2 truncate text-gray-800">{{ $configs->get(\App\Enums\GroupConfigKey::LimitPerDay) }} 张</p>
</div>
<div class="flex">
<p class="basis-1/2">每周上传限制</p>
<p class="basis-1/2 truncate text-gray-800">{{ $configs->get(\App\Enums\GroupConfigKey::LimitPerWeek) }} 张</p>
</div>
<div class="flex">
<p class="basis-1/2">每月上传限制</p>
<p class="basis-1/2 truncate text-gray-800">{{ $configs->get(\App\Enums\GroupConfigKey::LimitPerMonth) }} 张</p>
</div>
</div>
<div class="flex">
<p class="basis-1/2">并发上传数量</p>
<p class="basis-1/2 truncate text-gray-800">{{ $configs->get(\App\Enums\GroupConfigKey::ConcurrentUploadNum) }} 张</p>
</div>
<div class="flex">
<p class="basis-1/2">每分钟上传限制</p>
<p class="basis-1/2 truncate text-gray-800">{{ $configs->get(\App\Enums\GroupConfigKey::LimitPerMinute) }} 张</p>
</div>
<div class="flex">
<p class="basis-1/2">每小时上传限制</p>
<p class="basis-1/2 truncate text-gray-800">{{ $configs->get(\App\Enums\GroupConfigKey::LimitPerHour) }} 张</p>
</div>
<div class="flex">
<p class="basis-1/2">每天上传限制</p>
<p class="basis-1/2 truncate text-gray-800">{{ $configs->get(\App\Enums\GroupConfigKey::LimitPerDay) }} 张</p>
</div>
<div class="flex">
<p class="basis-1/2">每周上传限制</p>
<p class="basis-1/2 truncate text-gray-800">{{ $configs->get(\App\Enums\GroupConfigKey::LimitPerWeek) }} 张</p>
</div>
<div class="flex">
<p class="basis-1/2">每月上传限制</p>
<p class="basis-1/2 truncate text-gray-800">{{ $configs->get(\App\Enums\GroupConfigKey::LimitPerMonth) }} 张</p>
</div>
</div>
</x-slot>
</x-box>
</x-slot>
</x-box>
</div>
</div>
</div>
</x-app-layout>
resources/views/images.blade.php
+43 -31
View File
@@ -6,15 +6,14 @@
@endpush
<x-app-layout>
<div class="fixed z-[2] top-14 left-0 right-0 bg-white border-solid border-b">
<x-container class="px-2 flex justify-between items-center h-12">
<div class="hidden md:block">
<a class="text-sm py-2 px-3 hover:bg-gray-100 rounded text-gray-800" href=""><i class="fas fa-folder-open text-blue-500"></i> 新建相册</a>
</div>
<div class="relative flex justify-between items-center px-2 py-2 z-[2] top-0 left-0 right-0 bg-white border-solid border-b">
<div class="space-x-2 flex justify-between items-center">
<a class="text-sm py-2 px-3 hover:bg-gray-100 rounded text-gray-800" href="javascript:void(0)"><i class="fas fa-bars text-blue-500"></i> 相册</a>
<div class="block md:hidden">
<x-dropdown direction="right">
<x-slot name="trigger">
<a class="text-sm py-2 px-3 hover:bg-gray-100 rounded text-gray-800" href="javascript:void(0)">选中项 <i class="fas fa-chevron-down text-blue-500"></i></a>
<a class="text-sm py-2 px-3 hover:bg-gray-100 rounded text-gray-800"
href="javascript:void(0)"><i class="fas fa-ellipsis-h text-blue-500"></i></a>
</x-slot>
<x-slot name="content">
@@ -25,26 +24,37 @@
</x-slot>
</x-dropdown>
</div>
<div class="flex space-x-2 items-center">
<input type="text" class="px-2.5 py-1.5 border-0 outline-none rounded bg-gray-100 text-sm transition-all duration-300 w-36 md:hover:w-52 md:focus:w-52" placeholder="输入关键字搜索...">
<x-dropdown direction="left">
<x-slot name="trigger">
<a class="text-sm py-2 px-3 hover:bg-gray-100 rounded text-gray-800" href="javascript:void(0)">排序 <i class="fas fa-sort-alpha-up text-blue-500"></i></a>
</x-slot>
</div>
<div class="flex space-x-2 items-center">
<input type="text"
class="px-2.5 py-1.5 border-0 outline-none rounded bg-gray-100 text-sm transition-all duration-300 hidden md:block md:w-36 md:hover:w-52 md:focus:w-52"
placeholder="输入关键字搜索...">
<x-dropdown direction="left">
<x-slot name="trigger">
<a class="text-sm py-2 px-3 hover:bg-gray-100 rounded text-gray-800" href="javascript:void(0)">排序 <i
class="fas fa-sort-alpha-up text-blue-500"></i></a>
</x-slot>
<x-slot name="content">
<x-dropdown-link href="javascript:void(0)" @click="setOrderBy('newest'); open = false">最新</x-dropdown-link>
<x-dropdown-link href="javascript:void(0)" @click="setOrderBy('earliest'); open = false">最早</x-dropdown-link>
<x-dropdown-link href="javascript:void(0)" @click="setOrderBy('utmost'); open = false">最大</x-dropdown-link>
<x-dropdown-link href="javascript:void(0)" @click="setOrderBy('least'); open = false">最小</x-dropdown-link>
</x-slot>
</x-dropdown>
</div>
</x-container>
<x-slot name="content">
<x-dropdown-link href="javascript:void(0)" @click="setOrderBy('newest'); open = false">最新
</x-dropdown-link>
<x-dropdown-link href="javascript:void(0)" @click="setOrderBy('earliest'); open = false">最早
</x-dropdown-link>
<x-dropdown-link href="javascript:void(0)" @click="setOrderBy('utmost'); open = false">最大
</x-dropdown-link>
<x-dropdown-link href="javascript:void(0)" @click="setOrderBy('least'); open = false">最小
</x-dropdown-link>
</x-slot>
</x-dropdown>
</div>
</div>
<div id="photos-grid" class="overflow-hidden mt-6 md:mt-2"></div>
<div id="photos-loading" class="flex justify-center items-center pt-6 pb-6">
<a href="javascript:void(0)" class="flex justify-center items-center text-sm text-gray-400 text-gray-700 cursor-not-allowed">加载中...</a>
<div class="relative inset-0 h-full">
<div class="absolute inset-0 overflow-y-scroll">
<div id="photos-grid"></div>
<div id="photos-loading" class="flex justify-center items-center py-10">
<a href="javascript:void(0)" class="flex justify-center items-center text-sm text-gray-400 text-gray-700 cursor-not-allowed">加载中...</a>
</div>
</div>
</div>
<script type="text/html" id="photos-item">
@@ -74,7 +84,7 @@
order: '',
};
let gridConfigs = {
rowHeight : 180,
rowHeight: 180,
margins: 16,
captions: false,
border: 10,
@@ -91,7 +101,7 @@
$loading.text('加载中...').addClass('text-gray-400 cursor-not-allowed');
},
success: function (response) {
if (! response.status) {
if (!response.status) {
return toastr.error(response.message);
}
@@ -130,15 +140,14 @@
getImages();
};
$('html').css('overflow-y', 'scroll')
$photos.justifiedGallery(gridConfigs);
$loading.click(() => getImages(params.page));
$(window).scroll(function() {
$(window).scroll(function () {
let scrollTop = $(this).scrollTop();
let scrollHeight = $(document).height();
let clientHeight = $(this).height();
if(scrollTop + clientHeight >= scrollHeight - 50) {
if (scrollTop + clientHeight >= scrollHeight - 50) {
getImages();
}
});
@@ -149,9 +158,12 @@
$(this).siblings('img').trigger('click');
})
$photos.on('click', 'a', function (e) {
$photos.on('click', 'a .photo-select', function (e) {
e.stopPropagation();
$(this).css('transform', 'scale(1)').toggleClass('selected');
$(this).closest('a').toggleClass('selected');
}).on('mousedown', 'a', function () {
}).on('mouseup', 'a', function () {
});
</script>
@endpush
resources/views/layouts/app.blade.php
+42 -42
View File
@@ -1,50 +1,50 @@
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta name="keywords" content="Lsky Pro"/>
<meta name="description" content="Lsky Pro, Your photo album on the cloud."/>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta name="keywords" content="Lsky Pro"/>
<meta name="description" content="Lsky Pro, Your photo album on the cloud."/>
<title>{{ config('app.name', 'Laravel') }}</title>
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">
<link rel="stylesheet" href="{{ asset('css/fontawesome.css') }}">
@stack('styles')
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">
<link rel="stylesheet" href="{{ asset('css/fontawesome.css') }}">
@stack('styles')
<!-- Styles -->
<link rel="stylesheet" href="{{ asset('css/common.css') }}">
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<!-- Styles -->
<link rel="stylesheet" href="{{ asset('css/common.css') }}">
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
</head>
<body class="font-sans antialiased">
<div class="min-h-screen bg-gray-100" x-data="{sidebarOpened: false}" x-cloak>
@include('layouts.sidebar')
@include('layouts.header')
<div
x-transition:enter="ease-in-out duration-500"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="ease-in-out duration-500"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
class="z-[9] bg-black bg-opacity-75 transition-opacity h-full w-full fixed inset-0 sm:hidden"
x-show="sidebarOpened"
@click.outside="sidebarOpened = false"
@close.stop="sidebarOpened = false"
@click="sidebarOpened = ! sidebarOpened"
style="display: none"
>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
</head>
<body class="font-sans antialiased overflow-hidden">
<div class="min-h-screen bg-gray-100" x-data="{sidebarOpened: false}" x-cloak>
@include('layouts.sidebar')
@include('layouts.header')
<div
x-transition:enter="ease-in-out duration-500"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="ease-in-out duration-500"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
class="z-[9] bg-black bg-opacity-75 transition-opacity h-full w-full fixed inset-0 sm:hidden"
x-show="sidebarOpened"
@click.outside="sidebarOpened = false"
@close.stop="sidebarOpened = false"
@click="sidebarOpened = ! sidebarOpened"
style="display: none"
>
</div>
<x-container class="transition-all duration-300 pt-20 md:pt-24 pb-6">
{{ $slot }}
</x-container>
</div>
</body>
@stack('scripts')
</div>
<x-container class="flex flex-col overflow-y-auto absolute pb-14 top-14 left-0 right-0 bottom-0 transition-all duration-300 min-h-screen h-full">
{{ $slot }}
</x-container>
</div>
</body>
@stack('scripts')
</html>
resources/views/upload.blade.php
+3 -1
View File
@@ -1,5 +1,7 @@
@section('title', '上传图片')
<x-app-layout>
<x-upload/>
<div class="my-6 md:my-10">
<x-upload/>
</div>
</x-app-layout>