songtianlun
9417358625
- Update image link to use original blob instead of a resized variant - Remove the resizing option for the image tag for better fidelity - Modify CSS class for a smoother hover effect without scaling issues This refactor improves the image loading behavior by allowing full-resolution images to be loaded directly. The previous resizing was limiting image quality, and this change enhances user experience when viewing weather art.
91 lines
3.9 KiB
Plaintext
91 lines
3.9 KiB
Plaintext
<% content_for :head do %>
|
|
<script type="application/ld+json">
|
|
<%= weather_art_schema(@weather_art) %>
|
|
</script>
|
|
<% end %>
|
|
|
|
<div class="relative min-h-screen bg-white"> <!-- 使用更明快的背景颜色 -->
|
|
<div class="container mx-auto px-4 pt-12 pb-16">
|
|
<div class="max-w-6xl mx-auto space-y-6">
|
|
|
|
<!-- 返回导航 -->
|
|
<div class="flex items-center">
|
|
<%= link_to city_path(@weather_art.city),
|
|
class: "btn btn-ghost btn-md gap-2 bg-base-200 hover:bg-base-300 transition-all duration-300" do %>
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
|
|
</svg>
|
|
Back to <%= @weather_art.city.name %>
|
|
<% end %>
|
|
</div>
|
|
|
|
<!-- 主要内容 -->
|
|
<div class="card bg-base-200/80 backdrop-blur-md shadow-lg overflow-hidden"> <!-- 调整透明度和阴影 -->
|
|
<div class="grid lg:grid-cols-2 gap-6 items-center">
|
|
|
|
<!-- 图片区域 -->
|
|
<% if @weather_art.image.attached? %>
|
|
<figure class="relative lg:h-[30rem] h-auto overflow-hidden rounded-lg"> <!-- 添加圆角 -->
|
|
<div class="gallery" data-controller="photo-swipe-lightbox">
|
|
<div data-photo-swipe-lightbox-target="gallery" class="h-full">
|
|
<% blob = @weather_art.image_blob %>
|
|
<%= link_to rails_blob_path(blob),
|
|
data: {
|
|
pswp_src: rails_blob_url(blob),
|
|
pswp_caption: 'Weather Art',
|
|
pswp_width: 1792,
|
|
pswp_height: 1024
|
|
} do %>
|
|
<%= image_tag @weather_art.image,
|
|
class: "object-cover w-full h-full transition-transform transform hover:scale-105 ease-in-out" %> <!-- 改变缩放效果 -->
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
</figure>
|
|
<% end %>
|
|
|
|
<!-- 信息区域 -->
|
|
<div class="card-body p-8 lg:py-10 lg:px-12">
|
|
<div class="prose max-w-none">
|
|
<h1 class="font-display text-4xl md:text-5xl font-bold text-gradient mb-6">
|
|
Weather Art
|
|
</h1>
|
|
|
|
<div class="flex flex-wrap gap-4 mb-6">
|
|
<div class="badge badge-lg badge-primary">
|
|
<%= @weather_art.weather_date.strftime("%B %d, %Y") %>
|
|
</div>
|
|
<div class="badge badge-lg badge-secondary">
|
|
<%= @weather_art.weather_date.strftime("%H:%M") %>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="text-2xl font-semibold mb-4">
|
|
<%= weather_description_icon(@weather_art.description) %>
|
|
<%= @weather_art.description %>
|
|
</h2>
|
|
<div class="divider"></div>
|
|
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<%= render 'weather_stats', weather_art: @weather_art %> <!-- 使用局部渲染 -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- AI Prompt -->
|
|
<div class="bg-primary/10 backdrop-blur-md p-6 rounded-lg border border-primary/20">
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
|
</svg>
|
|
<h3 class="font-display font-bold text-lg">AI Prompt</h3>
|
|
</div>
|
|
<p class="text-base-content/80 leading-relaxed">
|
|
<%= @weather_art.prompt %>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> |