| | |
|---|
| | | </Transition.Child> |
|---|
| | | |
|---|
| | | <div className="fixed inset-0"> |
|---|
| | | <div className="absolute top-0 right-0 h-full"> |
|---|
| | | <div className="absolute inset-0 flex items-center justify-center"> |
|---|
| | | <Transition.Child |
|---|
| | | as={Fragment} |
|---|
| | | enter="transform transition ease-out duration-400" |
|---|
| | | enterFrom="translate-x-full" |
|---|
| | | enterTo="translate-x-0" |
|---|
| | | enterFrom="translate-y-full opacity-0 scale-95" |
|---|
| | | enterTo="translate-y-0 opacity-100 scale-100" |
|---|
| | | leave="transform transition ease-in-out duration-300" |
|---|
| | | leaveFrom="translate-x-0" |
|---|
| | | leaveTo="translate-x-full" |
|---|
| | | leaveFrom="translate-y-0 opacity-100 scale-100" |
|---|
| | | leaveTo="translate-y-full opacity-0 scale-95" |
|---|
| | | afterLeave={() => { |
|---|
| | | const panel = document.querySelector('.dialog-panel'); |
|---|
| | | if (panel instanceof HTMLElement) { |
|---|
| | |
|---|
| | | } |
|---|
| | | }} |
|---|
| | | > |
|---|
| | | <Dialog.Panel className="dialog-panel w-[75vw] h-full bg-gradient-to-br from-[#131C41] to-[#0A1033] shadow-[0_0_50px_rgba(106,219,255,0.2)]"> |
|---|
| | | <div className="h-full overflow-y-auto"> |
|---|
| | | <Dialog.Panel className="dialog-panel w-[80vw] max-h-[90vh] bg-gradient-to-br from-[#131C41] to-[#0A1033] shadow-[0_0_50px_rgba(106,219,255,0.2)] rounded-lg overflow-hidden flex flex-col"> |
|---|
| | | <div className="flex-1 overflow-y-auto"> |
|---|
| | | <div className="p-8"> |
|---|
| | | <div className="max-w-[1200px] mx-auto"> |
|---|
| | | <div className="flex justify-between items-center mb-6"> |
|---|
| | |
|---|
| | | <div className="relative"> |
|---|
| | | <h3 className="text-lg font-semibold mb-4 flex items-center text-white group-hover:text-[#6ADBFF] transition-colors duration-300"> |
|---|
| | | <div className="w-1 h-4 bg-[#6ADBFF] mr-2 opacity-70 group-hover:opacity-100 group-hover:h-5 transition-all duration-300"></div> |
|---|
| | | 场景背景 |
|---|
| | | 背景说明 |
|---|
| | | </h3> |
|---|
| | | <p className="text-gray-300 leading-relaxed group-hover:text-gray-200 transition-colors duration-300">{scene.background}</p> |
|---|
| | | </div> |
|---|
| | |
|---|
| | | </h3> |
|---|
| | | <button |
|---|
| | | onClick={() => setShowDataPreview(true)} |
|---|
| | | className="flex items-center px-3 py-1.5 text-sm text-[#6ADBFF] hover:text-white bg-[#1A2547]/50 hover:bg-[#6ADBFF]/10 rounded-full transition-all duration-300 group/btn" |
|---|
| | | className="flex items-center px-3 py-1.5 text-sm text-[#6ADBFF] hover:text-white bg-[#1A2547]/50 hover:bg-[#6ADBFF]/10 rounded-full transition-all duration-300 group/btn cursor-pointer" |
|---|
| | | > |
|---|
| | | <svg |
|---|
| | | xmlns="http://www.w3.org/2000/svg" |
|---|
