<!-- app/views/cities/_city.html.erb --> <div class="card bg-base-100 shadow-xl hover:shadow-2xl transition-all duration-300 group overflow-hidden"> <% if city.latest_weather_art&.image&.attached? %> <!-- 图片和主要信息区域 --> <div class="relative"> <!-- 图片 --> <figure class="aspect-[16/9] overflow-hidden"> <%= image_tag city.latest_weather_art.preview_image.processed, class: "w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-500" %> </figure> <!-- 渐变遮罩 - 使用多层渐变提供更好的文字可读性 --> <div class="absolute inset-0 bg-gradient-to-t from-black via-black/50 to-transparent"></div> <div class="absolute inset-0 bg-gradient-to-b from-black/30 via-transparent to-transparent"></div> <!-- 温度显示 - 放在右上角 --> <div class="absolute top-4 right-4 bg-black/30 backdrop-blur-sm rounded-xl px-3 py-2 text-white"> <div class="text-2xl font-bold leading-none"> <%= city.latest_weather_art.temperature %>°C </div> <div class="text-xs text-white/80"> Feels <%= city.latest_weather_art.feeling_temp %>°C </div> </div> <!-- 城市名称和位置 - 放在底部 --> <div class="absolute bottom-0 left-0 right-0 p-6"> <h3 class="text-2xl font-display text-white font-bold mb-2 drop-shadow-lg"> <%= city.name %> </h3> <div class="flex items-center gap-2 text-white/90 text-sm drop-shadow-lg"> <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" /> </svg> <%= "#{city&.state&.name}, " if city&.state&.name %><%= city&.country&.name %>, <%= city&.region&.name %> </div> </div> </div> <!-- 底部信息区域 --> <div class="card-body bg-base-100"> <!-- 天气信息和更新时间 --> <div class="flex items-center justify-between text-sm text-base-content/70 mb-3"> <div class="flex items-center gap-2"> <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary/70" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" /> </svg> <%= city.latest_weather_art.description %> </div> <div class="flex items-center gap-1"> <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /> </svg> <%= city.latest_weather_art.formatted_time(:date) %> </div> </div> <!-- 天气详情 --> <div class="grid grid-cols-3 gap-2 mb-4"> <div class="stat bg-base-200/50 rounded-lg p-2"> <div class="stat-title text-xs">Humidity</div> <div class="stat-value text-lg"><%= city.latest_weather_art.humidity %>%</div> </div> <div class="stat bg-base-200/50 rounded-lg p-2"> <div class="stat-title text-xs">Wind</div> <div class="stat-value text-lg"><%= city.latest_weather_art.wind_scale %></div> </div> <div class="stat bg-base-200/50 rounded-lg p-2"> <div class="stat-title text-xs">Visibility</div> <div class="stat-value text-lg"><%= city.latest_weather_art.visibility %>km</div> </div> </div> <!-- 按钮 --> <div class="card-actions justify-end"> <%= link_to city_path(city), class: "btn btn-primary btn-sm gap-2", data: { turbo_frame: "_top" } do %> View Details <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" /> </svg> <% end %> </div> </div> <% else %> <!-- 无图片时的备用显示 --> <div class="card-body"> <h3 class="card-title font-display text-2xl mb-3"><%= city.name %></h3> <div class="flex items-center gap-2 text-base-content/70 mb-4"> <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" /> </svg> <%= "#{city&.state&.name}, " if city&.state&.name %><%= city&.country&.name %>, <%= city&.region&.name %> </div> <div class="bg-base-200 rounded-lg p-4 mb-4"> <div class="grid grid-cols-2 gap-4 text-sm"> <div class="flex items-center gap-2"> <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-primary/70" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" /> </svg> <span>Lat: <%= city.latitude %></span> </div> <div class="flex items-center gap-2"> <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-primary/70" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" /> </svg> <span>Long: <%= city.longitude %></span> </div> </div> </div> <div class="card-actions justify-end"> <%= link_to city_path(city), class: "btn btn-primary btn-sm gap-2", data: { turbo_frame: "_top" } do %> View Details <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" /> </svg> <% end %> </div> </div> <% end %> </div>