update picture upload logic, let item page working

Signed-off-by: Puqns67 <me@puqns67.icu>
This commit is contained in:
Puqns67 2023-09-17 20:34:01 +08:00
parent ccadbd8160
commit 3bc0d83714
Signed by: Puqns67
GPG Key ID: 9669DF042554F536
22 changed files with 310 additions and 249 deletions

View File

@ -0,0 +1,19 @@
package team8.fruitable
import org.springframework.beans.factory.annotation.Value
import org.springframework.context.annotation.Configuration
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer
@Configuration
class FruitableConfiguration : WebMvcConfigurer {
@Value("\${data.handler}")
lateinit var handler: String
@Value("\${data.path}")
lateinit var path: String
override fun addResourceHandlers(registry: ResourceHandlerRegistry) {
registry.addResourceHandler("${handler}/**").addResourceLocations("file:${path}/")
}
}

View File

@ -13,8 +13,10 @@ import team8.fruitable.datebase.repository.AccountRepository
import team8.fruitable.datebase.repository.ItemRepository
import team8.fruitable.datebase.repository.TagRepository
import team8.fruitable.util.hash
import java.io.File
import kotlin.io.path.Path
import kotlin.io.path.createDirectories
import kotlin.io.path.div
import kotlin.io.path.exists
@Controller
@RequestMapping("/action/edit/item")
@ -23,8 +25,8 @@ class ItemEditor(
private val itemRepository: ItemRepository,
private val tagRepository: TagRepository
) {
@Value("\${data.picture}")
lateinit var pictureUploadPath: String
@Value("\${data.path}")
lateinit var uploadPath: String
private fun getCurrentUser(token: String?): User? {
return token?.let(accountRepository::findByToken)
@ -60,7 +62,9 @@ class ItemEditor(
private fun uploadPicture(file: MultipartFile): String? {
if (file.isEmpty) return null
val hash = hash(file)
file.transferTo(Path("${pictureUploadPath}${File.separator}${hash}"))
val path = Path("${uploadPath}/picture/${hash.slice(0..1)}")
if (!path.exists()) path.createDirectories()
file.transferTo(path / hash)
return hash
}

View File

@ -1,19 +1,25 @@
package team8.fruitable.controller.page
import org.springframework.beans.factory.annotation.Value
import org.springframework.stereotype.Controller
import org.springframework.ui.Model
import org.springframework.ui.set
import org.springframework.web.bind.annotation.CookieValue
import org.springframework.web.bind.annotation.PathVariable
import org.springframework.web.bind.annotation.RequestMapping
import org.springframework.web.servlet.mvc.support.RedirectAttributes
import team8.fruitable.controller.util.error
import team8.fruitable.datebase.entity.User
import team8.fruitable.datebase.repository.AccountRepository
import team8.fruitable.datebase.repository.ItemRepository
@Controller
class Pages(private val repository: AccountRepository) {
class Pages(private val accountRepository: AccountRepository, private val itemRepository: ItemRepository) {
@Value("\${data.handler}")
lateinit var handler: String
private fun getCurrentUser(token: String?): User? {
return token?.let(repository::findByToken)
return token?.let(accountRepository::findByToken)
}
@RequestMapping("/")
@ -62,4 +68,30 @@ class Pages(private val repository: AccountRepository) {
model["user"] = user
return "account"
}
@RequestMapping("/items")
fun items(
model: Model,
attributes: RedirectAttributes,
@CookieValue("TOKEN", required = false) token: String?
): String {
model["isItems"] = true
this.getCurrentUser(token)?.let { model["user"] = it }
return "items"
}
@RequestMapping("/item/{id}")
fun item(
model: Model,
attributes: RedirectAttributes,
@CookieValue("TOKEN", required = false) token: String?,
@PathVariable("id") id: Long
): String {
this.getCurrentUser(token)?.let { model["user"] = it }
val item = itemRepository.findById(id).orElse(null) ?: return error(attributes, "查看商品", "不存在的商品")
model["item"] = item
model["itemPicture"] =
item.picture?.let { "${handler}/picture/${it.slice(0..1)}/${it}" } ?: "/images/placeholder.png"
return "item"
}
}

View File

@ -14,4 +14,5 @@ server:
charset: UTF-8
force-response: true
data:
picture: /home/puqns67/IdeaProjects/fruitable/data/picture
handler: /resourcesNew
path: /home/puqns67/IdeaProjects/fruitable/data

View File

@ -0,0 +1 @@
<svg viewBox="0 0 854.9970000000001 299.99699999999996" xmlns="http://www.w3.org/2000/svg" width="2500" height="877"><path d="M48.508 0C21.694 0 0 21.511 0 48.068v203.87c0 26.536 21.694 48.059 48.508 48.059h205.81c26.793 0 48.496-21.522 48.496-48.059v-2.086c-.902-.372-78.698-32.52-118.24-51.357-26.677 32.524-61.086 52.256-96.812 52.256-60.412 0-80.927-52.38-52.322-86.86 6.237-7.517 16.847-14.698 33.314-18.718 25.76-6.27 66.756 3.915 105.18 16.477 6.912-12.614 12.726-26.506 17.057-41.297H72.581v-11.88h61.057V87.168H59.687V75.28h73.951v-30.39s0-5.119 5.236-5.119h29.848v35.508h73.107v11.891h-73.107v21.303h59.674c-5.71 23.176-14.38 44.509-25.264 63.236 18.111 6.49 34.368 12.646 46.484 16.666 40.413 13.397 51.74 15.034 53.201 15.205V48.069c0-26.557-21.704-48.068-48.496-48.068H48.511zm33.207 162.54c-2.593.03-5.198.17-7.822.426-7.565.753-21.768 4.06-29.533 10.865-23.274 20.109-9.344 56.87 37.762 56.87 27.383 0 54.743-17.343 76.236-45.114-27.71-13.395-51.576-23.335-76.643-23.047z" fill="#00a1e9"/><path d="M829.48 208.55l-13.517 29.164-13.718-29.164h-13.402l20.871 40.322v28.127h12.295v-28.127l.074-.157 20.787-40.165zm-98.969 17.644l9.535 28.389h-19.407zm12.464 37.015l4.594 13.786h12.885l-25.37-68.45h-9.851l-25.286 68.45h12.896l4.793-13.786zm-96.164-21.937h-13.686v-23.417h13.686c6.88 0 10.989 5.977 10.989 11.755 0 5.653-3.846 11.661-10.989 11.661m.695-32.723h-26.772v68.45h12.39v-26.316h14.381c13.36 0 22.694-8.667 22.694-21.072s-9.334-21.061-22.694-21.061m-89.406 68.45H570.5v-68.45h-12.4zm-87.163-68.449V277h41.711v-9.327h-29.32V208.55zm-70.587 17.644l9.525 28.389h-19.396zm12.464 37.015l4.594 13.786h12.875l-25.37-68.45h-9.84l-25.287 68.45h12.885l4.794-13.786zm87.23-188.47H446.89V55.813h61.635V44.026H446.89V20.044h-27.477c-3.013 0-5.447 2.512-5.447 5.6v18.382h-61.203v11.787h61.203V74.74H362.31v11.776H465.2s-5.7 22.12-33.925 45.891c-25.286-19.02-33.736-34.167-33.736-34.167h-27.604c11.168 19.23 27.035 34.628 44.124 46.844-15.698 10.133-36.054 19.9-62.372 27.72v14.11s40.605-7.61 79.851-30.587c39.31 22.8 78.787 30.587 78.787 30.587v-13.357c-25.265-9.138-45.283-19.188-61.002-28.88 22.768-16.76 42.723-39.507 50.72-69.937m172.66-52.334h-27.668V51.13h-68.198v11.567h68.198v103.27c-.242 2.366-2.117 4.208-4.467 4.334h-14.065v11.965h35.864c5.679-.23 10.21-4.91 10.336-10.709V62.696h11.231V51.129h-11.23zm-58.349 59.777c-1.011-2.051-3.076-3.465-5.478-3.486h-23.052l17.964 56.192h27.267zm-68.092-61.137L514.527 95.63h24.348v88.747H565.5V66.656h-9.65l20.05-45.609zm308.73 159.26l-9.724-32.639c-.653-2.083-2.55-3.59-4.805-3.59h-25.78l7.48 25.07H791.85v-48.57h59.517v-11.557H791.85V86.157h59.517V74.6h-148.52v11.557h59.506v22.862h-59.506v11.557h59.506v48.57h-59.506v11.558h152.15l-.127-.398zm-121.2-133.28h86.678v17.052h30.965V43.874c-.01-.042-.01-.063-.01-.115 0-4.543-3.582-8.217-8.018-8.29h-50.108V19.568H760.9v15.9h-58.063v28.61h30.954z" fill="#3f3b3a"/></svg>

After

Width:  |  Height:  |  Size: 2.8 KiB

View File

@ -0,0 +1 @@
<svg height="469" viewBox="-2.48 135.79 499.389 229.888" width="2500" xmlns="http://www.w3.org/2000/svg"><path d="m131.82 230.99c.3 27.1 24.6 36.1 24.8 36.2-.2.6-3.9 12.9-12.8 25.5-7.7 10.9-15.7 21.8-28.3 22-12.4.2-16.4-7.1-30.5-7.1-14.2 0-18.6 6.9-30.3 7.3-12.2.4-21.4-11.8-29.2-22.7-15.9-22.2-28-62.8-11.7-90.2 8.1-13.6 22.6-22.2 38.3-22.5 11.9-.2 23.2 7.8 30.5 7.8s21-9.6 35.4-8.2c6 .2 23 2.4 33.8 17.8-.9.5-20.2 11.4-20 34.1m-23.3-66.6c6.5-7.6 10.8-18.1 9.6-28.6-9.3.4-20.6 6-27.2 13.6-6 6.7-11.2 17.4-9.8 27.7 10.4.8 21-5.1 27.4-12.7m93.551-12.985c4.756-.79 10.118-1.483 15.886-2.175s12.141-.988 19.021-.988c9.916 0 18.415 1.186 25.599 3.46 7.184 2.371 13.052 5.633 17.706 10.08 3.946 3.855 7.083 8.5 9.309 13.738 2.226 5.337 3.339 11.465 3.339 18.383 0 8.401-1.518 15.715-4.553 22.04s-7.184 11.564-12.445 15.814-11.535 7.413-18.82 9.587c-7.285 2.075-15.177 3.163-23.777 3.163-7.79 0-14.266-.593-19.528-1.68v69.579h-11.635v-161.001zm11.636 81.241c2.833.791 5.97 1.384 9.41 1.68s7.183.495 11.13.495c14.873 0 26.306-3.36 34.502-10.18 8.195-6.72 12.242-16.703 12.242-29.75 0-6.325-1.112-11.76-3.237-16.406s-5.16-8.5-9.106-11.464-8.702-5.239-14.064-6.721c-5.464-1.483-11.434-2.273-18.112-2.273-5.26 0-9.814.197-13.659.593s-6.88.89-9.106 1.285zm171.702 52.184c0 4.646.101 9.39.202 14.035.203 4.646.708 9.192 1.518 13.54h-10.927l-1.72-16.405h-.506c-1.518 2.273-3.34 4.547-5.667 6.72a41.22 41.22 0 0 1 -7.993 6.129c-3.035 1.877-6.475 3.36-10.421 4.447-3.845 1.087-8.095 1.68-12.749 1.68-5.767 0-10.826-.89-15.177-2.767s-7.993-4.25-10.725-7.215c-2.833-2.965-4.958-6.424-6.273-10.279-1.416-3.854-2.125-7.709-2.125-11.563 0-13.738 5.869-24.215 17.707-31.627s29.544-10.97 53.321-10.674v-3.163c0-3.064-.303-6.523-.91-10.476s-1.821-7.71-3.845-11.267-4.958-6.524-8.904-8.896-9.308-3.656-16.087-3.656c-5.16 0-10.22.79-15.177 2.273a49.895 49.895 0 0 0 -13.76 6.424l-3.744-8.5c5.26-3.558 10.725-6.029 16.29-7.61 5.564-1.483 11.433-2.273 17.605-2.273 8.296 0 14.974 1.384 20.134 4.15s9.309 6.326 12.243 10.675 4.958 9.192 6.071 14.627 1.619 10.773 1.619 16.11zm-11.636-34.492c-6.273-.198-12.85.099-19.629.692-6.88.691-13.153 2.075-18.92 4.25s-10.523 5.337-14.368 9.586c-3.743 4.151-5.666 9.785-5.666 16.703 0 8.204 2.429 14.232 7.184 18.087s10.118 5.831 16.088 5.831c4.755 0 9.106-.692 12.85-1.976s7.082-3.064 9.915-5.239 5.16-4.645 7.082-7.412 3.34-5.535 4.351-8.5c.81-3.261 1.214-5.535 1.214-7.017zm34.3-53.964 30.152 75.41c1.618 4.152 3.237 8.5 4.755 12.948s2.833 8.5 3.946 12.255h.506c1.113-3.558 2.428-7.51 3.946-11.958s3.137-8.994 4.958-13.64l28.229-74.916h12.344l-34.401 85.096c-3.44 8.994-6.78 17.198-9.815 24.511s-6.172 13.936-9.308 19.866-6.273 11.07-9.511 15.616-6.78 8.5-10.725 11.86c-4.654 4.052-8.904 7.017-12.749 8.796-3.845 1.878-6.475 3.064-7.79 3.46l-3.947-9.39c2.935-1.285 6.274-2.965 9.916-5.04s7.184-4.843 10.624-8.204c2.934-2.866 6.273-6.72 9.814-11.465s6.678-10.476 9.511-17.296c1.012-2.57 1.518-4.25 1.518-5.04 0-1.087-.506-2.866-1.518-5.04l-42.798-107.533h12.344z" fill="#010101"/></svg>

After

Width:  |  Height:  |  Size: 2.9 KiB

View File

@ -0,0 +1,19 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="356.44pt" height="141.39pt" viewBox="0 0 356.44 141.39" version="1.1">
<defs>
<clipPath id="clip1">
<path d="M 286 40 L 356.441406 40 L 356.441406 141.390625 L 286 141.390625 Z M 286 40 "/>
</clipPath>
</defs>
<g id="surface1">
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(37.255859%,38.818359%,40.795898%);fill-opacity:1;" d="M 168.578125 69.074219 L 168.578125 110.523438 L 155.421875 110.523438 L 155.421875 8.1875 L 190.335938 8.1875 C 199.203125 8.1875 206.726563 11.144531 212.929688 17.046875 C 219.234375 22.953125 222.382813 30.148438 222.382813 38.625 C 222.382813 47.300781 219.234375 54.542969 212.929688 60.351563 C 206.828125 66.164063 199.289063 69.066406 190.335938 69.066406 L 168.578125 69.066406 Z M 168.578125 20.765625 L 168.578125 56.496094 L 190.617188 56.496094 C 195.863281 56.496094 200.203125 54.730469 203.640625 51.203125 C 207.167969 47.683594 208.929688 43.484375 208.929688 38.625 C 208.929688 33.867188 207.167969 29.71875 203.640625 26.1875 C 200.203125 22.570313 195.863281 20.757813 190.617188 20.757813 L 168.578125 20.757813 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(37.255859%,38.818359%,40.795898%);fill-opacity:1;" d="M 252.710938 38.203125 C 262.445313 38.203125 270.117188 40.796875 275.75 45.992188 C 281.382813 51.1875 284.183594 58.308594 284.183594 67.359375 L 284.183594 110.523438 L 271.597656 110.523438 L 271.597656 100.804688 L 271.023438 100.804688 C 265.589844 108.804688 258.34375 112.804688 249.28125 112.804688 C 241.558594 112.804688 235.078125 110.523438 229.894531 105.949219 C 224.6875 101.371094 222.089844 95.660156 222.089844 88.789063 C 222.089844 81.550781 224.824219 75.792969 230.3125 71.507813 C 235.796875 67.21875 243.121094 65.070313 252.273438 65.070313 C 260.09375 65.070313 266.535156 66.503906 271.589844 69.355469 L 271.589844 66.351563 C 271.589844 61.78125 269.777344 57.902344 266.152344 54.710938 C 262.519531 51.511719 258.289063 49.921875 253.421875 49.921875 C 246.070313 49.921875 240.257813 53.015625 235.96875 59.21875 L 224.371094 51.921875 C 230.773438 42.777344 240.207031 38.203125 252.710938 38.203125 M 235.679688 89.082031 C 235.679688 92.515625 237.132813 95.371094 240.046875 97.660156 C 242.960938 99.941406 246.359375 101.089844 250.273438 101.089844 C 255.8125 101.089844 260.734375 99.035156 265.074219 94.945313 C 269.417969 90.839844 271.589844 86.039063 271.589844 80.515625 C 267.484375 77.269531 261.761719 75.65625 254.417969 75.65625 C 249.078125 75.65625 244.617188 76.945313 241.046875 79.515625 C 237.472656 82.089844 235.679688 85.269531 235.679688 89.082031 "/>
<g clip-path="url(#clip1)" clip-rule="nonzero">
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(37.255859%,38.818359%,40.795898%);fill-opacity:1;" d="M 356.441406 40.488281 L 312.503906 141.390625 L 298.917969 141.390625 L 315.230469 106.085938 L 286.328125 40.488281 L 300.644531 40.488281 L 321.53125 90.800781 L 321.8125 90.800781 L 342.128906 40.488281 "/>
</g>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(25.87738%,52.146912%,95.701599%);fill-opacity:1;" d="M 115.390625 60.140625 C 115.390625 56 115.039063 52.003906 114.378906 48.179688 L 58.863281 48.179688 L 58.863281 70.828125 L 90.660156 70.828125 C 89.296875 78.210938 85.167969 84.492188 78.90625 88.695313 L 78.90625 103.402344 L 97.882813 103.402344 C 108.992188 93.164063 115.390625 78.03125 115.390625 60.140625 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(20.384216%,65.818787%,32.542419%);fill-opacity:1;" d="M 58.863281 117.605469 C 74.75 117.605469 88.125 112.394531 97.878906 103.402344 L 78.90625 88.695313 C 73.625 92.25 66.820313 94.328125 58.863281 94.328125 C 43.511719 94.328125 30.480469 83.988281 25.816406 70.054688 L 6.269531 70.054688 L 6.269531 85.199219 C 15.957031 104.414063 35.867188 117.605469 58.863281 117.605469 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(98.046875%,73.242188%,1.960754%);fill-opacity:1;" d="M 25.816406 70.054688 C 24.625 66.503906 23.972656 62.710938 23.972656 58.796875 C 23.972656 54.886719 24.625 51.097656 25.816406 47.542969 L 25.816406 32.394531 L 6.269531 32.394531 C 2.265625 40.335938 0 49.300781 0 58.796875 C 0 68.296875 2.265625 77.269531 6.269531 85.199219 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(91.40625%,25.87738%,20.776367%);fill-opacity:1;" d="M 58.863281 23.273438 C 67.539063 23.273438 75.316406 26.253906 81.449219 32.09375 L 81.449219 32.101563 L 98.25 15.316406 C 88.042969 5.828125 74.742188 0 58.863281 0 C 35.867188 0 15.957031 13.183594 6.269531 32.394531 L 25.816406 47.542969 C 30.480469 33.609375 43.511719 23.273438 58.863281 23.273438 "/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 4.7 KiB

View File

@ -0,0 +1,21 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="242.8pt" height="63.6pt" viewBox="0 0 242.8 63.6" version="1.1">
<defs>
<clipPath id="clip1">
<path d="M 72 17 L 167 17 L 167 63.601563 L 72 63.601563 Z M 72 17 "/>
</clipPath>
<clipPath id="clip2">
<path d="M 166 15 L 242.800781 15 L 242.800781 54 L 166 54 Z M 166 15 "/>
</clipPath>
</defs>
<g id="surface1">
<g clip-path="url(#clip1)" clip-rule="nonzero">
<path style=" stroke:none;fill-rule:evenodd;fill:rgb(1.960754%,16.088867%,42.358398%);fill-opacity:1;" d="M 85.378906 33.210938 L 86.304688 33.210938 C 89.503906 33.210938 91.667969 32.894531 92.796875 32.257813 C 93.929688 31.617188 94.488281 30.53125 94.488281 29.003906 C 94.488281 27.714844 94.003906 26.765625 93.039063 26.167969 C 92.066406 25.574219 90.546875 25.269531 88.480469 25.269531 L 86.714844 25.269531 Z M 72.242188 52.867188 L 78.121094 17.820313 L 88.28125 17.820313 C 91.089844 17.820313 93.214844 17.925781 94.628906 18.148438 C 96.039063 18.359375 97.273438 18.71875 98.316406 19.234375 C 100.210938 20.140625 101.621094 21.390625 102.550781 22.96875 C 103.492188 24.550781 103.960938 26.4375 103.960938 28.644531 C 103.960938 30.828125 103.460938 32.859375 102.449219 34.722656 C 101.445313 36.59375 100.089844 38.03125 98.367188 39.035156 C 97.359375 39.625 96.160156 40.042969 94.773438 40.292969 C 93.394531 40.539063 91.230469 40.664063 88.28125 40.664063 L 84.132813 40.664063 L 82.0625 52.867188 Z M 113.863281 41.644531 C 113.863281 43.195313 114.363281 44.4375 115.355469 45.375 C 116.355469 46.316406 117.671875 46.789063 119.304688 46.789063 C 121.089844 46.789063 122.585938 46.128906 123.769531 44.8125 C 124.964844 43.496094 125.554688 41.855469 125.554688 39.878906 C 125.554688 38.375 125.054688 37.15625 124.066406 36.226563 C 123.0625 35.296875 121.769531 34.828125 120.171875 34.828125 C 118.347656 34.828125 116.839844 35.476563 115.648438 36.765625 C 114.460938 38.054688 113.863281 39.683594 113.863281 41.644531 Z M 123.8125 49.632813 C 122.585938 50.988281 121.214844 52.019531 119.703125 52.710938 C 118.199219 53.40625 116.578125 53.75 114.839844 53.75 C 111.90625 53.75 109.507813 52.703125 107.628906 50.613281 C 105.753906 48.523438 104.808594 45.808594 104.808594 42.476563 C 104.808594 38.292969 106.089844 34.820313 108.628906 32.058594 C 111.171875 29.296875 114.347656 27.917969 118.148438 27.917969 C 119.921875 27.917969 121.503906 28.269531 122.902344 28.964844 C 124.296875 29.65625 125.566406 30.738281 126.695313 32.199219 L 127.273438 28.703125 L 135.800781 28.703125 L 131.765625 52.867188 L 123.382813 52.867188 Z M 144.753906 51.660156 L 137.503906 28.703125 L 146.820313 28.703125 L 149.046875 39.132813 C 149.078125 39.273438 149.128906 39.484375 149.199219 39.753906 C 149.519531 41.160156 149.691406 42.351563 149.726563 43.34375 C 149.914063 42.722656 150.148438 42.058594 150.449219 41.347656 C 150.742188 40.636719 151.097656 39.871094 151.519531 39.035156 L 156.804688 28.703125 L 166.480469 28.703125 L 146.664063 63.554688 L 137.253906 63.554688 Z M 144.753906 51.660156 "/>
</g>
<g clip-path="url(#clip2)" clip-rule="nonzero">
<path style=" stroke:none;fill-rule:evenodd;fill:rgb(19.604492%,68.943787%,86.71875%);fill-opacity:1;" d="M 178.933594 33.421875 L 179.800781 33.421875 C 182.777344 33.421875 184.796875 33.101563 185.84375 32.464844 C 186.894531 31.828125 187.421875 30.742188 187.421875 29.214844 C 187.421875 27.921875 186.96875 26.976563 186.066406 26.378906 C 185.160156 25.78125 183.753906 25.480469 181.820313 25.480469 L 180.175781 25.480469 Z M 166.710938 53.078125 L 172.179688 18.03125 L 181.636719 18.03125 C 184.253906 18.03125 186.230469 18.136719 187.546875 18.355469 C 188.863281 18.570313 190.007813 18.929688 190.980469 19.441406 C 192.738281 20.351563 194.054688 21.601563 194.921875 23.175781 C 195.796875 24.761719 196.230469 26.648438 196.230469 28.855469 C 196.230469 31.035156 195.765625 33.070313 194.824219 34.933594 C 193.894531 36.804688 192.628906 38.242188 191.027344 39.246094 C 190.089844 39.835938 188.972656 40.25 187.683594 40.503906 C 186.398438 40.75 184.382813 40.871094 181.636719 40.871094 L 177.777344 40.871094 L 175.851563 53.078125 Z M 205.453125 41.851563 C 205.453125 43.40625 205.921875 44.644531 206.84375 45.585938 C 207.773438 46.523438 208.992188 47 210.519531 47 C 212.179688 47 213.570313 46.335938 214.675781 45.023438 C 215.785156 43.707031 216.339844 42.066406 216.339844 40.085938 C 216.339844 38.585938 215.871094 37.367188 214.949219 36.4375 C 214.019531 35.503906 212.816406 35.039063 211.320313 35.039063 C 209.628906 35.039063 208.222656 35.683594 207.117188 36.976563 C 206.007813 38.265625 205.453125 39.890625 205.453125 41.851563 Z M 214.71875 49.84375 C 213.570313 51.199219 212.296875 52.226563 210.886719 52.921875 C 209.492188 53.617188 207.984375 53.960938 206.359375 53.960938 C 203.632813 53.960938 201.398438 52.914063 199.648438 50.824219 C 197.898438 48.730469 197.023438 46.019531 197.023438 42.683594 C 197.023438 38.503906 198.214844 35.03125 200.585938 32.269531 C 202.949219 29.507813 205.902344 28.128906 209.441406 28.128906 C 211.089844 28.128906 212.566406 28.480469 213.867188 29.171875 C 215.171875 29.867188 216.347656 30.945313 217.398438 32.40625 L 217.9375 28.910156 L 225.878906 28.910156 L 222.117188 53.078125 L 214.316406 53.078125 Z M 234.433594 15.972656 L 242.878906 15.972656 L 237.039063 53.078125 L 228.621094 53.078125 Z M 234.433594 15.972656 "/>
</g>
<path style=" stroke:none;fill-rule:evenodd;fill:rgb(19.604492%,68.943787%,86.71875%);fill-opacity:1;" d="M 13.433594 59.882813 L 20.164063 16.246094 C 20.332031 14.988281 20.882813 14.0625 21.890625 14.0625 L 33.171875 14.0625 C 36.679688 14.0625 39.328125 14.207031 41.089844 14.5 C 42.851563 14.785156 44.390625 15.265625 45.691406 15.953125 C 48.046875 17.167969 49.808594 18.839844 50.972656 20.953125 C 52.144531 23.074219 52.722656 25.597656 52.722656 28.550781 C 52.722656 31.46875 52.101563 34.191406 50.84375 36.683594 C 49.59375 39.1875 47.894531 41.113281 45.753906 42.457031 C 44.496094 43.246094 42.960938 43.628906 41.269531 44.140625 C 38.269531 45.050781 34.054688 45.257813 30.84375 45.257813 C 29.535156 45.589844 29.003906 46.628906 28.792969 48.191406 L 26.972656 59.871094 C 26.609375 60.894531 25.953125 61.507813 25.011719 61.742188 L 14.761719 61.734375 C 13.585938 61.582031 13.230469 60.90625 13.433594 59.882813 Z M 13.433594 59.882813 "/>
<path style=" stroke:none;fill-rule:evenodd;fill:rgb(1.960754%,16.088867%,42.358398%);fill-opacity:1;" d="M 0.273438 53.566406 L 7.917969 3.3125 C 8.101563 1.867188 8.734375 0.800781 9.878906 0.800781 L 22.691406 0.800781 C 26.675781 0.800781 29.65625 1.4375 31.683594 1.304688 C 53.09375 -0.09375 50.390625 23.445313 36.984375 33.496094 C 35.628906 34.511719 33.804688 34.847656 31.890625 35.4375 C 28.484375 36.488281 23.691406 36.722656 20.046875 36.722656 C 18.558594 37.105469 17.957031 38.304688 17.71875 40.101563 L 15.652344 53.546875 C 15.238281 54.726563 14.488281 55.433594 13.425781 55.703125 L 1.78125 55.695313 C 0.441406 55.519531 0.046875 54.742188 0.273438 53.566406 Z M 0.273438 53.566406 "/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 7.1 KiB

View File

@ -0,0 +1,20 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="237pt" height="152pt" viewBox="0 0 237 152" version="1.1">
<g id="surface1">
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(87.5%,26.699829%,27.799988%);fill-opacity:1;" d="M 166.773438 0.367188 L 143.496094 0.359375 L 166.640625 0.375 C 166.6875 0.375 166.730469 0.367188 166.773438 0.367188 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(92.89856%,10.998535%,14.099121%);fill-opacity:1;" d="M 54.335938 136.753906 L 81.875 14.941406 C 83.6875 6.976563 93.777344 0.515625 101.796875 0.351563 L 48.375 0.335938 C 40.3125 0.335938 29.972656 6.871094 28.128906 14.941406 L 0.59375 136.753906 C 0.425781 137.496094 0.332031 138.222656 0.277344 138.9375 L 0.277344 141.199219 C 0.816406 147.015625 5.261719 151.253906 11.648438 151.351563 L 65.394531 151.351563 C 57.460938 151.230469 52.515625 144.734375 54.335938 136.753906 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(16.099548%,33.299255%,48.999023%);fill-opacity:1;" d="M 143.496094 0.359375 L 102.117188 0.335938 C 102.011719 0.335938 101.90625 0.34375 101.796875 0.351563 L 143.496094 0.359375 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,44.699097%,73.699951%);fill-opacity:1;" d="M 119.34375 136.753906 L 146.871094 14.941406 C 148.683594 7.035156 158.644531 0.621094 166.640625 0.375 L 143.496094 0.359375 L 101.796875 0.351563 C 93.777344 0.515625 83.6875 6.976563 81.875 14.941406 L 54.335938 136.753906 C 52.515625 144.734375 57.460938 151.230469 65.394531 151.351563 L 130.402344 151.351563 C 122.464844 151.230469 117.527344 144.734375 119.34375 136.753906 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,61.599731%,64.698792%);fill-opacity:1;" d="M 225.003906 0.382813 L 166.789063 0.367188 C 166.78125 0.367188 166.773438 0.367188 166.773438 0.367188 C 166.730469 0.367188 166.6875 0.375 166.640625 0.375 C 158.644531 0.621094 148.683594 7.035156 146.871094 14.941406 L 119.34375 136.753906 C 117.527344 144.734375 122.464844 151.230469 130.402344 151.351563 L 191.554688 151.351563 C 199.375 150.964844 206.972656 144.625 208.753906 136.804688 L 236.285156 14.992188 C 238.128906 6.929688 233.074219 0.382813 225.003906 0.382813 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 102.921875 89.109375 L 103.933594 89.109375 C 104.863281 89.109375 105.488281 88.796875 105.78125 88.179688 L 108.40625 84.25 L 115.441406 84.25 L 113.976563 86.835938 L 122.410156 86.835938 L 121.339844 90.796875 L 111.304688 90.796875 C 110.148438 92.535156 108.726563 93.355469 107.015625 93.257813 L 101.785156 93.257813 L 102.921875 89.109375 M 101.769531 94.789063 L 120.246094 94.789063 L 119.070313 99.09375 L 111.636719 99.09375 L 110.503906 103.246094 L 117.734375 103.246094 L 116.558594 107.550781 L 109.324219 107.550781 L 107.644531 113.691406 C 107.230469 114.714844 107.777344 115.175781 109.277344 115.074219 L 115.171875 115.074219 L 114.078125 119.070313 L 102.765625 119.070313 C 100.617188 119.070313 99.882813 117.84375 100.554688 115.386719 L 102.703125 107.550781 L 98.082031 107.550781 L 99.253906 103.246094 L 103.878906 103.246094 L 105.011719 99.09375 L 100.59375 99.09375 Z M 131.265625 84.21875 L 130.972656 86.738281 C 130.972656 86.738281 134.460938 84.121094 137.625 84.121094 L 149.324219 84.121094 L 144.851563 100.320313 C 144.480469 102.167969 142.886719 103.089844 140.078125 103.089844 L 126.816406 103.089844 L 123.710938 114.464844 C 123.53125 115.074219 123.785156 115.386719 124.453125 115.386719 L 127.0625 115.386719 L 126.105469 118.914063 L 119.472656 118.914063 C 116.925781 118.914063 115.867188 118.148438 116.285156 116.609375 L 125.0625 84.21875 Z M 141.171875 88.796875 L 130.730469 88.796875 L 129.480469 93.167969 C 129.480469 93.167969 131.21875 91.914063 134.125 91.867188 C 137.023438 91.824219 140.332031 91.867188 140.332031 91.867188 Z M 137.386719 98.9375 C 138.160156 99.039063 138.59375 98.734375 138.644531 98.015625 L 139.28125 95.710938 L 128.824219 95.710938 L 127.949219 98.9375 Z M 130.335938 104.167969 L 136.363281 104.167969 L 136.25 106.777344 L 137.855469 106.777344 C 138.664063 106.777344 139.066406 106.519531 139.066406 106.003906 L 139.542969 104.316406 L 144.554688 104.316406 L 143.882813 106.777344 C 143.316406 108.828125 141.816406 109.898438 139.378906 110.003906 L 136.167969 110.003906 L 136.152344 114.464844 C 136.09375 115.175781 136.742188 115.539063 138.070313 115.539063 L 141.089844 115.539063 L 140.113281 119.070313 L 132.875 119.070313 C 130.847656 119.167969 129.851563 118.203125 129.871094 116.152344 L 130.335938 104.167969 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 155.953125 89.289063 L 157.351563 84.367188 L 164.421875 84.367188 L 164.113281 86.175781 C 164.113281 86.175781 167.726563 84.367188 170.328125 84.367188 C 172.929688 84.367188 179.066406 84.367188 179.066406 84.367188 L 177.679688 89.289063 L 176.304688 89.289063 L 169.710938 112.492188 L 171.085938 112.492188 L 169.777344 117.101563 L 168.402344 117.101563 L 167.832031 119.101563 L 160.984375 119.101563 L 161.558594 117.101563 L 148.054688 117.101563 L 149.367188 112.492188 L 150.722656 112.492188 L 157.320313 89.289063 L 155.953125 89.289063 M 163.578125 89.289063 L 161.78125 95.570313 C 161.78125 95.570313 164.859375 94.386719 167.511719 94.054688 C 168.097656 91.859375 168.863281 89.289063 168.863281 89.289063 Z M 160.949219 98.511719 L 159.144531 105.089844 C 159.144531 105.089844 162.554688 103.410156 164.894531 103.269531 C 165.570313 100.726563 166.246094 98.511719 166.246094 98.511719 Z M 162.269531 112.492188 L 163.625 107.722656 L 158.347656 107.722656 L 156.988281 112.492188 Z M 179.367188 84.066406 L 186.011719 84.066406 L 186.292969 86.515625 C 186.25 87.140625 186.621094 87.4375 187.40625 87.4375 L 188.582031 87.4375 L 187.394531 91.59375 L 182.511719 91.59375 C 180.644531 91.691406 179.6875 90.976563 179.597656 89.4375 Z M 177.417969 92.976563 L 198.941406 92.976563 L 197.679688 97.433594 L 190.828125 97.433594 L 189.652344 101.582031 L 196.496094 101.582031 L 195.226563 106.035156 L 187.601563 106.035156 L 185.878906 108.644531 L 189.609375 108.644531 L 190.472656 113.867188 C 190.574219 114.390625 191.035156 114.640625 191.824219 114.640625 L 192.980469 114.640625 L 191.765625 118.945313 L 187.660156 118.945313 C 185.535156 119.046875 184.4375 118.335938 184.347656 116.796875 L 183.355469 112.027344 L 179.960938 117.101563 C 179.15625 118.535156 177.925781 119.207031 176.261719 119.101563 L 169.992188 119.101563 L 171.214844 114.796875 L 173.167969 114.796875 C 173.972656 114.796875 174.640625 114.441406 175.242188 113.71875 L 180.554688 106.035156 L 173.703125 106.035156 L 174.972656 101.582031 L 182.40625 101.582031 L 183.589844 97.433594 L 176.148438 97.433594 L 177.417969 92.976563 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 57.289063 62.644531 C 56.46875 66.648438 54.574219 69.726563 51.636719 71.910156 C 48.722656 74.058594 44.964844 75.136719 40.363281 75.136719 C 36.035156 75.136719 32.859375 74.039063 30.835938 71.832031 C 29.429688 70.261719 28.730469 68.269531 28.730469 65.863281 C 28.730469 64.867188 28.851563 63.796875 29.089844 62.644531 L 33.992188 39.007813 L 41.394531 39.007813 L 36.558594 62.375 C 36.410156 63.023438 36.351563 63.625 36.359375 64.167969 C 36.351563 65.363281 36.648438 66.34375 37.25 67.109375 C 38.128906 68.246094 39.550781 68.8125 41.53125 68.8125 C 43.808594 68.8125 45.6875 68.253906 47.144531 67.132813 C 48.597656 66.019531 49.550781 64.433594 49.976563 62.375 L 54.828125 39.007813 L 62.195313 39.007813 L 57.289063 62.644531 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 64.105469 53.339844 L 69.335938 53.339844 L 68.738281 56.386719 L 69.488281 55.515625 C 71.183594 53.703125 73.242188 52.804688 75.671875 52.804688 C 77.871094 52.804688 79.460938 53.441406 80.457031 54.726563 C 81.4375 56.015625 81.703125 57.789063 81.238281 60.074219 L 78.359375 74.445313 L 72.984375 74.445313 L 75.585938 61.417969 C 75.855469 60.074219 75.78125 59.070313 75.367188 58.421875 C 74.960938 57.777344 74.179688 57.457031 73.050781 57.457031 C 71.667969 57.457031 70.507813 57.886719 69.558594 58.742188 C 68.605469 59.605469 67.980469 60.800781 67.671875 62.324219 L 65.273438 74.445313 L 59.890625 74.445313 L 64.105469 53.339844 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 124.066406 53.339844 L 129.300781 53.339844 L 128.707031 56.386719 L 129.449219 55.515625 C 131.144531 53.703125 133.210938 52.804688 135.632813 52.804688 C 137.835938 52.804688 139.425781 53.441406 140.410156 54.726563 C 141.386719 56.015625 141.667969 57.789063 141.191406 60.074219 L 138.324219 74.445313 L 132.941406 74.445313 L 135.546875 61.417969 C 135.8125 60.074219 135.738281 59.070313 135.328125 58.421875 C 134.90625 57.777344 134.140625 57.457031 133.019531 57.457031 C 131.636719 57.457031 130.476563 57.886719 129.515625 58.742188 C 128.566406 59.605469 127.933594 60.800781 127.636719 62.324219 L 125.230469 74.445313 L 119.851563 74.445313 L 124.066406 53.339844 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 88.378906 53.34375 L 94.175781 53.34375 L 89.632813 74.4375 L 83.847656 74.4375 L 88.378906 53.34375 M 90.203125 45.660156 L 96.050781 45.660156 L 94.960938 50.78125 L 89.109375 50.78125 L 90.203125 45.660156 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 99.308594 72.832031 C 97.789063 71.382813 97.027344 69.429688 97.019531 66.949219 C 97.019531 66.523438 97.042969 66.039063 97.101563 65.511719 C 97.15625 64.976563 97.226563 64.457031 97.328125 63.972656 C 98.015625 60.546875 99.476563 57.828125 101.734375 55.820313 C 103.984375 53.804688 106.703125 52.796875 109.882813 52.796875 C 112.488281 52.796875 114.554688 53.523438 116.066406 54.980469 C 117.578125 56.445313 118.339844 58.421875 118.339844 60.933594 C 118.339844 61.363281 118.304688 61.863281 118.25 62.398438 C 118.183594 62.941406 118.101563 63.460938 118.007813 63.972656 C 117.335938 67.347656 115.875 70.039063 113.617188 72.007813 C 111.363281 73.992188 108.652344 74.980469 105.496094 74.980469 C 102.878906 74.980469 100.820313 74.269531 99.308594 72.832031 M 110.355469 68.65625 C 111.378906 67.550781 112.109375 65.867188 112.554688 63.632813 C 112.621094 63.28125 112.683594 62.917969 112.71875 62.554688 C 112.757813 62.199219 112.769531 61.863281 112.769531 61.558594 C 112.769531 60.257813 112.441406 59.246094 111.773438 58.535156 C 111.113281 57.8125 110.175781 57.457031 108.960938 57.457031 C 107.351563 57.457031 106.046875 58.019531 105.019531 59.152344 C 103.984375 60.28125 103.253906 61.988281 102.792969 64.265625 C 102.730469 64.613281 102.679688 64.964844 102.628906 65.304688 C 102.59375 65.652344 102.582031 65.980469 102.589844 66.277344 C 102.589844 67.570313 102.921875 68.566406 103.585938 69.273438 C 104.246094 69.980469 105.183594 70.328125 106.414063 70.328125 C 108.027344 70.328125 109.335938 69.773438 110.355469 68.65625 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 149.933594 40.257813 L 165.125 40.257813 C 168.046875 40.257813 170.304688 40.917969 171.859375 42.21875 C 173.40625 43.535156 174.179688 45.421875 174.179688 47.882813 L 174.179688 47.957031 C 174.179688 48.425781 174.148438 48.953125 174.105469 49.523438 C 174.027344 50.089844 173.933594 50.660156 173.808594 51.257813 C 173.136719 54.511719 171.585938 57.128906 169.183594 59.113281 C 166.773438 61.089844 163.921875 62.085938 160.636719 62.085938 L 152.488281 62.085938 L 149.972656 74.445313 L 142.917969 74.445313 L 149.933594 40.257813 M 153.730469 56.140625 L 160.488281 56.140625 C 162.25 56.140625 163.644531 55.730469 164.664063 54.921875 C 165.675781 54.105469 166.34375 52.855469 166.714844 51.160156 C 166.773438 50.847656 166.8125 50.566406 166.855469 50.304688 C 166.878906 50.0625 166.910156 49.816406 166.910156 49.578125 C 166.910156 48.367188 166.480469 47.488281 165.617188 46.9375 C 164.753906 46.382813 163.402344 46.113281 161.527344 46.113281 L 155.789063 46.113281 L 153.730469 56.140625 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 205.75 78.527344 C 203.519531 83.269531 201.394531 86.03125 200.148438 87.320313 C 198.898438 88.589844 196.425781 91.546875 190.464844 91.324219 L 190.976563 87.707031 C 195.992188 86.160156 198.703125 79.195313 200.25 76.109375 L 198.40625 53.398438 L 202.289063 53.34375 L 205.542969 53.34375 L 205.894531 67.59375 L 211.992188 53.34375 L 218.171875 53.34375 L 205.75 78.527344 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 188.480469 55.0625 L 186.023438 56.75 C 183.460938 54.742188 181.121094 53.503906 176.601563 55.597656 C 170.445313 58.453125 165.304688 80.339844 182.25 73.132813 L 183.214844 74.277344 L 189.882813 74.445313 L 194.261719 54.558594 L 188.480469 55.0625 M 184.6875 65.9375 C 183.617188 69.09375 181.226563 71.183594 179.351563 70.589844 C 177.480469 70.007813 176.808594 66.960938 177.894531 63.796875 C 178.964844 60.628906 181.371094 58.546875 183.230469 59.144531 C 185.105469 59.722656 185.78125 62.769531 184.6875 65.9375 "/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 13 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

View File

@ -1,81 +1,12 @@
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
import {getItem, loadItem} from "./items.js";
let ID;
let TheItem;
window.addEventListener("DOMContentLoaded", () => __awaiter(void 0, void 0, void 0, function* () {
let rawID = new URLSearchParams(window.location.search).get("item_id");
if (rawID == null || rawID == "")
window.location.replace("index.jsp");
ID = Number(rawID);
yield loadItem();
let rawItem = yield getItem(ID);
if (rawItem == null)
window.location.replace("index.jsp");
TheItem = rawItem;
let ItemDisplayer = document.querySelector(".Item");
let PictureDisplayer = ItemDisplayer.querySelector(".Picture");
let InfoDisplayer = ItemDisplayer.querySelector(".Infos");
// 图片部分
let Image = PictureDisplayer.querySelector("img");
Image.src = TheItem.Picture;
// 说明文字部分
let TitleDisplayer = InfoDisplayer.querySelector(".Title");
let DescriptionDisplayer = InfoDisplayer.querySelector(".Description");
let OptionDisplayer = InfoDisplayer.querySelector(".Options");
TitleDisplayer.innerText = TheItem.Name;
if (TheItem.Description != null)
DescriptionDisplayer.innerText = TheItem.Description;
// 价格文字部分
let PriceDisplayer = InfoDisplayer.querySelector(".Prices");
let Price = PriceDisplayer.querySelector(".Price");
Price.innerText = `${TheItem.Price}`;
if (TheItem.VipPrice != null) {
let VipPrice = PriceDisplayer.querySelector(".VipPrice");
VipPrice.innerText = `${TheItem.VipPrice}`;
Price.toggleAttribute("has_vip_price", true);
}
// 选项部分
TheItem.Options.forEach((v) => {
let newOptionElement = document.createElement("div");
let newOptionTitle = document.createElement("div");
let newOptionSelecter = document.createElement("div");
v.Contants.forEach((v, i) => {
let newOption = document.createElement("div");
newOption.innerHTML = v;
newOption.classList.add("Option");
if (i == 0)
newOption.toggleAttribute("selected", true);
newOptionSelecter.append(newOption);
});
newOptionTitle.innerText = v.Name;
newOptionSelecter.classList.add("Contants");
newOptionTitle.classList.add("Title");
newOptionElement.classList.add("Option");
newOptionElement.append(newOptionTitle, newOptionSelecter);
OptionDisplayer.append(newOptionElement);
});
// 为选项添加点击事件
Array.from(OptionDisplayer.children).forEach((v) => {
let contants = v.querySelector(".Contents");
Array.from(contants.children).forEach((v) => {
v.addEventListener("click", function () {
return __awaiter(this, void 0, void 0, function* () {
Array.from(this.parentElement
.children).forEach((v) => {
v.removeAttribute("selected");
});
this.toggleAttribute("selected", true);
window.addEventListener("DOMContentLoaded", () => {
Array.from(document.querySelector(".Options").children).forEach((v) => {
Array.from(v.querySelector(".Contents").children).forEach((vv) => {
vv.addEventListener("click", function () {
Array.from(this.parentElement.children).forEach((v) => {
v.removeAttribute("selected");
});
this.toggleAttribute("selected", true);
});
});
});
}));
});

File diff suppressed because one or more lines are too long

View File

@ -1 +0,0 @@
../../../../data

View File

@ -39,15 +39,20 @@
padding: 8px 0;
border: 3px solid skyblue;
border-radius: 10px;
color: black;
font-size: 18px;
background: unset;
&[type="button"] {
background-color: cadetblue;
}
&[type="reset"] {
background: cornflowerblue;
background-color: cornflowerblue;
}
&[type="submit"] {
background: aqua;
background-color: aqua;
}
}
}

View File

@ -1,141 +0,0 @@
@font-face {
font-family: "Normal";
src: url("../fonts/华文圆体-Regular.ttf") format("ttf");
}
body {
display: flex;
margin: auto;
flex-direction: column;
align-items: center;
}
div {
display: flex;
}
#Contents {
flex-direction: column;
width: 100%;
}
.Item {
flex-direction: row;
width: auto;
border-radius: 15px;
margin: 5px;
padding: 15px;
background-color: rgba(0, 60, 130, 0.8);
border: 3px solid rgba(0, 120, 255, 0.8);
}
.Item .Picture {
flex: 1 0;
justify-content: center;
}
.Item .Picture img {
width: 400px;
height: 400px;
}
.Item .Infos {
flex: 1 0;
margin: 10px;
flex-direction: column;
color: wheat;
}
.Item .Infos > * {
margin: 10px 0;
}
.Item .Infos > .Title {
font-size: 30px;
font-weight: bold;
font-family: "Normal", system-ui;
}
.Item .Infos .Description {
font-size: 20px;
font-family: "Normal", system-ui;
}
.Item .Infos .Prices {
align-items: baseline;
font-family: "Normal", system-ui;
}
.Item .Infos .Prices .VipPrice {
color: gold;
font-size: 20px;
font-weight: bold;
}
.Item .Infos .Prices .Price {
color: red;
font-size: 20px;
font-weight: bold;
}
.Item .Infos .Prices .Price[has_vip_price] {
color: grey;
font-size: 16px;
font-weight: lighter;
font-style: italic;
text-decoration: line-through;
}
.Item .Infos .Options {
flex-direction: column;
}
.Item .Infos .Options > .Option {
flex-direction: row;
margin: 5px 0;
border: 1px solid rgba(0, 120, 255, 0.8);
border-radius: 5px;
}
.Item .Infos .Options > .Option .Title {
font-weight: bold;
padding: 0 10px;
border-radius: 5px 0 0 5px;
background: green;
font-size: 20px;
}
.Item .Infos .Options > .Option .Contents {
flex-wrap: wrap;
align-items: stretch;
}
.Item .Infos .Options > .Option .Contents .Option {
font-size: 18px;
padding: 0 5px;
align-items: center;
background-color: #355ae8;
}
.Item .Infos .Options > .Option .Contents .Option[selected] {
font-weight: bold;
background-color: #489dff;
}
.Item .Infos .Buttons {
justify-content: space-evenly;
text-align: center;
}
.Item .Infos .Buttons .Button {
width: 90px;
padding: 10px 30px;
border-radius: 15px;
background-color: darkgreen;
}
@media (min-width: 1280px) {
#Contents {
width: 1280px;
}
}

View File

@ -0,0 +1,125 @@
@font-face {
font-family: "Normal";
src: url("../fonts/华文圆体-Regular.ttf") format("ttf");
}
body {
display: flex;
margin: auto;
flex-direction: column;
align-items: center;
}
div {
display: flex;
}
#Contents {
flex-direction: column;
width: 100%;
}
.Item {
display: flex;
flex-direction: row;
width: auto;
border-radius: 15px;
margin: 5px;
padding: 15px;
background-color: rgba(0, 60, 130, 0.8);
border: 3px solid rgba(0, 120, 255, 0.8);
> .Picture {
flex: 1 0;
justify-content: center;
> img {
width: 400px;
height: 400px;
}
}
> .Infos {
flex: 1 0;
margin: 10px;
flex-direction: column;
color: wheat;
> * {
margin: 10px 0;
}
> .Title {
font-size: 30px;
font-weight: bold;
font-family: "Normal", system-ui;
}
.Description {
font-size: 20px;
font-family: "Normal", system-ui;
}
.Price {
align-items: baseline;
font-family: "Normal", system-ui;
color: red;
font-size: 20px;
font-weight: bold;
}
> .Options {
flex-direction: column;
> .Option {
flex-direction: row;
margin: 5px 0;
border: 1px solid rgba(0, 120, 255, 0.8);
border-radius: 5px;
> .Title {
font-weight: bold;
padding: 0 10px;
border-radius: 5px 0 0 5px;
background: green;
font-size: 20px;
}
> .Contents {
flex-wrap: wrap;
align-items: stretch;
> .Option {
font-size: 18px;
padding: 0 5px;
align-items: center;
background-color: #355ae8;
}
.Option[selected] {
font-weight: bold;
background-color: #489dff;
}
}
}
}
> .Buttons {
justify-content: space-evenly;
text-align: center;
> .Button {
width: 90px;
padding: 10px 30px;
border-radius: 15px;
background-color: darkgreen;
}
}
}
}
@media (min-width: 1280px) {
#Contents {
width: 1280px;
}
}

View File

@ -35,6 +35,6 @@
<span class="CLOCK"></span>
</div>
<div class="List Special PinHeader">
<img class="PIN" src="images/pin.svg" alt="固定图标" checked/>
<img class="PIN" src="/images/pin.svg" alt="固定图标" checked/>
</div>
</div>

View File

@ -7,9 +7,7 @@
<script type="text/javascript" src="/scripts/clock.js"></script>
<script type="text/javascript" src="/scripts/top.js"></script>
<script type="text/javascript" src="/scripts/footer.js"></script>
<script type="module" src="/scripts/resources.js"></script>
<script type="module" src="/scripts/items.js"></script>
<script type="module" src="/scripts/item.js"></script>
<script type="text/javascript" src="/scripts/item.js"></script>
<link type="image/x-icon" rel="icon" href="/images/favicon.ico">
<!-- 页面公共的样式表 -->
<link type="text/css" rel="stylesheet" href="/styles/header.css">
@ -17,8 +15,9 @@
<link type="text/css" rel="stylesheet" href="/styles/top.css">
<link type="text/css" rel="stylesheet" href="/styles/footer.css">
<!-- 页面特定的样式表 -->
<link type="text/css" rel="stylesheet" href="/styles/item.css">
<link type="text/css" rel="stylesheet/less" href="/styles/item.less">
<!-- 外部小组件 -->
<script src="/scripts/lib/less.min.js"></script>
<script src="/scripts/lib/anime.min.js"></script>
<script async src="/scripts/lib/explosion.min.js"></script>
</head>
@ -29,36 +28,42 @@
<!-- 页面内容 -->
<div id="Contents">
<div class="Item">
<form class="Item">
<div class="Picture">
<img alt="商品图片" src="{{item.picture}}"/>
<img alt="商品图片" src="{{itemPicture}}"/>
</div>
<div class="Infos">
<span class="Title"></span>
<div class="Prices">
<div class="VipPrice"></div>
<div class="Price"></div>
<span class="Title">{{item.name}}</span>
<div class="Price">{{item.price}}</div>
{{#item.description}}
<span class="Description">{{item.description}}</span>
{{/item.description}}
<div class="Tags">
{{#item.tags}}
<div class="Tag">{{name}}</div>
{{/item.tags}}
</div>
<span class="Description"></span>
<div class="Options">
<div class="Option">
<div class="Title">数量</div>
<div class="Contents">
<div class="Option" selected>&nbsp;1&nbsp;</div>
<div class="Option">&nbsp;2&nbsp;</div>
<div class="Option">&nbsp;3&nbsp;</div>
<div class="Option">&nbsp;4&nbsp;</div>
<div class="Option">&nbsp;5&nbsp;</div>
<div class="Option">&nbsp;6&nbsp;</div>
<div class="Option" value="1" selected>&nbsp;1&nbsp;</div>
<div class="Option" value="2">&nbsp;2&nbsp;</div>
<div class="Option" value="3">&nbsp;3&nbsp;</div>
<div class="Option" value="4">&nbsp;4&nbsp;</div>
<div class="Option" value="5">&nbsp;5&nbsp;</div>
<div class="Option" value="6">&nbsp;6&nbsp;</div>
<div class="Option" value="7">&nbsp;7&nbsp;</div>
<div class="Option" value="8">&nbsp;8&nbsp;</div>
</div>
</div>
</div>
<div class="Buttons">
<span class="Button">立即购买</span>
<span class="Button">加入购物车</span>
<span class="Button">立即购买</span>
</div>
</div>
</div>
</form>
</div>
{{>footer}}

View File

@ -50,6 +50,10 @@
<button class="TabButton" type="reset">重置</button>
<button class="TabButton" type="submit">登录</button>
</div>
<div class="TabButtons">
<button class="TabButton" type="button" onclick="window.location.replace('/register')">注册新账户</button>
</div>
</form>
</div>

View File

@ -86,6 +86,10 @@
<button class="TabButton" type="reset">重置</button>
<button class="TabButton" type="submit">注册并登录</button>
</div>
<div class="TabButtons">
<button class="TabButton" type="button" onclick="window.location.replace('/login')">登录已有账户</button>
</div>
</form>
</div>