You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
43 lines
1.9 KiB
43 lines
1.9 KiB
<!DOCTYPE html>
|
|
<html xmlns:th="http://www.thymeleaf.org">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title th:text="${director} + ' 的作品列表'"></title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<style>
|
|
.movie-card { height: 100%; transition: transform 0.2s; }
|
|
.movie-card:hover { transform: translateY(-5px); }
|
|
.poster-img { height: 300px; object-fit: cover; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-light">
|
|
<nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-4">
|
|
<div class="container">
|
|
<a class="navbar-brand" href="/">豆瓣电影分析</a>
|
|
<a class="btn btn-outline-light btn-sm" href="/directors">返回排行榜</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="container">
|
|
<h2 class="mb-4" th:text="${director} + ' 的执导作品'"></h2>
|
|
|
|
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4">
|
|
<div class="col" th:each="movie : ${movies}">
|
|
<div class="card movie-card shadow-sm h-100">
|
|
<img th:src="${movie.posterUrl}" class="card-img-top poster-img" th:alt="${movie.title}">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-truncate" th:text="${movie.title}"></h5>
|
|
<p class="card-text">
|
|
<span class="badge bg-warning text-dark" th:text="${movie.rating}"></span>
|
|
<span class="badge bg-secondary" th:text="${movie.releaseYear}"></span>
|
|
<span class="badge bg-info text-dark" th:text="${movie.type}"></span>
|
|
</p>
|
|
<p class="card-text small text-muted" th:text="${movie.quote}"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
|