songtianlun
98a335100b
- Renamed `app/views/cities/_map.html.erb` to `app/views/shared/_map.html.erb` - Updated references to the map partial in `cities/show.html.erb` and `weather_arts/show.html.erb` - Adjusted the layout in `cities/show.html.erb` and `weather_arts/show.html.erb` for visual consistency. This refactoring improves code reusability and maintainability by centralizing the map component. It also improves the visual presentation of the application.
97 lines
4.3 KiB
Plaintext
97 lines
4.3 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-100 backdrop-blur-md shadow-lg border border-primary/20 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">
|
|
<% watermarked = @weather_art.webp_image.processed %>
|
|
<%= link_to rails_blob_path(watermarked),
|
|
data: {
|
|
pswp_src: rails_blob_url(watermarked),
|
|
pswp_caption: 'Weather Art',
|
|
pswp_width: 1792,
|
|
pswp_height: 1024
|
|
} do %>
|
|
<%= image_tag @weather_art.preview_image(:big).processed, class: "object-cover w-full h-full transition-transform transform hover:scale-105 ease-in-out" %>
|
|
<%#= image_tag @weather_art.watermarked_variant.processed , 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.city.full_name %> Weather Art
|
|
</h1>
|
|
|
|
<div class="flex flex-wrap gap-4 mb-6">
|
|
<div class="badge badge-lg badge-primary">
|
|
<%= @weather_art.formatted_time(:date) %>
|
|
</div>
|
|
<div class="badge badge-lg badge-secondary">
|
|
<%= @weather_art.formatted_time(:time, true) %>
|
|
</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>
|
|
|
|
<div class="card bg-base-100 backdrop-blur-md shadow-lg border border-primary/20 overflow-hidden"> <!-- 调整透明度和阴影 -->
|
|
<%= render 'shared/map', city: @weather_art.city %>
|
|
</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>
|