|
352 | 352 | .m-furniture-wiki { |
353 | 353 | .mt(20px); |
354 | 354 | } |
| 355 | + |
| 356 | +.p-furniture-single.is-robot { |
| 357 | + padding: 0; |
| 358 | + |
| 359 | + .m-pvx-furniture-robot__header { |
| 360 | + .flex; |
| 361 | + justify-content: space-between; |
| 362 | + align-items: center; |
| 363 | + gap: 12px; |
| 364 | + min-height: 72px; |
| 365 | + |
| 366 | + .m-title { |
| 367 | + min-width: 0; |
| 368 | + flex: 1; |
| 369 | + } |
| 370 | + |
| 371 | + .u-title { |
| 372 | + .bold; |
| 373 | + font-size: 22px; |
| 374 | + line-height: 1.35; |
| 375 | + color: #fff; |
| 376 | + word-break: break-all; |
| 377 | + |
| 378 | + &.quality_2 { |
| 379 | + color: #00d24b; |
| 380 | + } |
| 381 | + |
| 382 | + &.quality_3 { |
| 383 | + color: #007eff; |
| 384 | + } |
| 385 | + |
| 386 | + &.quality_4 { |
| 387 | + color: #ff2dff; |
| 388 | + } |
| 389 | + |
| 390 | + &.quality_5 { |
| 391 | + color: #ffa500; |
| 392 | + } |
| 393 | + } |
| 394 | + |
| 395 | + .m-meta { |
| 396 | + .flex; |
| 397 | + flex-wrap: wrap; |
| 398 | + gap: 6px; |
| 399 | + margin-top: 10px; |
| 400 | + } |
| 401 | + |
| 402 | + .u-meta { |
| 403 | + .dbi; |
| 404 | + border: 1px solid rgba(255, 255, 255, 0.16); |
| 405 | + background: rgba(255, 255, 255, 0.06); |
| 406 | + border-radius: 4px; |
| 407 | + padding: 3px 6px; |
| 408 | + color: rgba(255, 255, 255, 0.72); |
| 409 | + font-size: 11px; |
| 410 | + line-height: 16px; |
| 411 | + } |
| 412 | + |
| 413 | + } |
| 414 | + |
| 415 | + .m-pvx-furniture-robot__body { |
| 416 | + .flex; |
| 417 | + gap: 10px; |
| 418 | + margin-top: 10px; |
| 419 | + |
| 420 | + .m-pvx__item { |
| 421 | + flex: 1; |
| 422 | + min-width: 0; |
| 423 | + } |
| 424 | + } |
| 425 | + |
| 426 | + .m-pvx-furniture-robot__attrs, |
| 427 | + .m-pvx-furniture-robot__info, |
| 428 | + .m-pvx-furniture-robot__source, |
| 429 | + .m-pvx-furniture-robot__set { |
| 430 | + .u-title { |
| 431 | + .bold; |
| 432 | + margin-bottom: 8px; |
| 433 | + color: #fff; |
| 434 | + font-size: 14px; |
| 435 | + line-height: 20px; |
| 436 | + } |
| 437 | + } |
| 438 | + |
| 439 | + .m-pvx-furniture-robot__attrs { |
| 440 | + .u-attrs { |
| 441 | + .flex; |
| 442 | + flex-wrap: wrap; |
| 443 | + gap: 8px; |
| 444 | + } |
| 445 | + |
| 446 | + .u-attr { |
| 447 | + .dbi; |
| 448 | + min-width: 64px; |
| 449 | + color: rgba(255, 255, 255, 0.78); |
| 450 | + font-size: 12px; |
| 451 | + line-height: 20px; |
| 452 | + } |
| 453 | + |
| 454 | + .u-label { |
| 455 | + .dbi; |
| 456 | + .r(3px); |
| 457 | + min-width: 30px; |
| 458 | + margin-right: 5px; |
| 459 | + padding: 1px 4px; |
| 460 | + color: #fff; |
| 461 | + font-size: 11px; |
| 462 | + line-height: 18px; |
| 463 | + text-align: center; |
| 464 | + } |
| 465 | + |
| 466 | + .blue { |
| 467 | + background: #4f8cab; |
| 468 | + } |
| 469 | + |
| 470 | + .pink { |
| 471 | + background: #b85a78; |
| 472 | + } |
| 473 | + |
| 474 | + .yellow { |
| 475 | + background: #a98250; |
| 476 | + } |
| 477 | + |
| 478 | + .green { |
| 479 | + background: #4a9a82; |
| 480 | + } |
| 481 | + |
| 482 | + .purple { |
| 483 | + background: #8d5aaa; |
| 484 | + } |
| 485 | + } |
| 486 | + |
| 487 | + .m-pvx-furniture-robot__info { |
| 488 | + .u-list { |
| 489 | + display: grid; |
| 490 | + gap: 6px; |
| 491 | + } |
| 492 | + |
| 493 | + .u-item { |
| 494 | + color: rgba(255, 255, 255, 0.78); |
| 495 | + font-size: 12px; |
| 496 | + line-height: 20px; |
| 497 | + } |
| 498 | + |
| 499 | + .u-scale { |
| 500 | + b::after { |
| 501 | + content: "~"; |
| 502 | + } |
| 503 | + |
| 504 | + b:last-child::after { |
| 505 | + content: ""; |
| 506 | + } |
| 507 | + } |
| 508 | + |
| 509 | + .u-dyes { |
| 510 | + .dbi; |
| 511 | + vertical-align: -3px; |
| 512 | + } |
| 513 | + |
| 514 | + .u-dye { |
| 515 | + .dbi; |
| 516 | + .size(14px); |
| 517 | + .r(50%); |
| 518 | + margin-right: 5px; |
| 519 | + border: 1px solid rgba(255, 255, 255, 0.7); |
| 520 | + } |
| 521 | + } |
| 522 | + |
| 523 | + .m-pvx-furniture-robot__set { |
| 524 | + margin-top: 10px; |
| 525 | + |
| 526 | + .u-desc { |
| 527 | + color: rgba(255, 255, 255, 0.78); |
| 528 | + font-size: 12px; |
| 529 | + line-height: 1.7; |
| 530 | + } |
| 531 | + |
| 532 | + .u-set-list { |
| 533 | + display: grid; |
| 534 | + grid-template-columns: repeat(4, minmax(0, 1fr)); |
| 535 | + gap: 8px; |
| 536 | + margin-top: 10px; |
| 537 | + } |
| 538 | + |
| 539 | + .u-set-item { |
| 540 | + .r(6px); |
| 541 | + padding: 8px; |
| 542 | + border: 1px solid rgba(255, 255, 255, 0.12); |
| 543 | + background: rgba(255, 255, 255, 0.04); |
| 544 | + box-sizing: border-box; |
| 545 | + |
| 546 | + &.is-current { |
| 547 | + border-color: rgba(255, 168, 0, 0.7); |
| 548 | + background: rgba(255, 168, 0, 0.12); |
| 549 | + } |
| 550 | + } |
| 551 | + |
| 552 | + .u-set-img { |
| 553 | + .size(56px); |
| 554 | + .r(6px); |
| 555 | + .flex; |
| 556 | + align-items: center; |
| 557 | + justify-content: center; |
| 558 | + margin: 0 auto 6px; |
| 559 | + background: url("../../../../assets/img/horse/horse_item_bg_sm.jpg") center center / cover no-repeat; |
| 560 | + overflow: hidden; |
| 561 | + |
| 562 | + img { |
| 563 | + max-width: 50px; |
| 564 | + max-height: 50px; |
| 565 | + display: block; |
| 566 | + } |
| 567 | + } |
| 568 | + |
| 569 | + .u-set-name { |
| 570 | + .nobreak; |
| 571 | + color: rgba(255, 255, 255, 0.86); |
| 572 | + font-size: 11px; |
| 573 | + line-height: 16px; |
| 574 | + text-align: center; |
| 575 | + } |
| 576 | + |
| 577 | + .u-set-type { |
| 578 | + .nobreak; |
| 579 | + margin-top: 2px; |
| 580 | + color: rgba(255, 255, 255, 0.5); |
| 581 | + font-size: 10px; |
| 582 | + line-height: 14px; |
| 583 | + text-align: center; |
| 584 | + } |
| 585 | + } |
| 586 | + |
| 587 | + .m-pvx-furniture-robot__source { |
| 588 | + .u-source { |
| 589 | + color: rgba(255, 255, 255, 0.78); |
| 590 | + font-size: 12px; |
| 591 | + line-height: 20px; |
| 592 | + word-break: break-all; |
| 593 | + } |
| 594 | + } |
| 595 | + |
| 596 | + .m-pvx-furniture-robot__wiki { |
| 597 | + margin-top: 10px; |
| 598 | + |
| 599 | + .u-wiki-title { |
| 600 | + margin-bottom: 8px; |
| 601 | + color: #fff; |
| 602 | + font-size: 16px; |
| 603 | + font-weight: bold; |
| 604 | + |
| 605 | + span { |
| 606 | + color: rgba(255, 255, 255, 0.5); |
| 607 | + font-size: 12px; |
| 608 | + font-weight: normal; |
| 609 | + } |
| 610 | + } |
| 611 | + } |
| 612 | + |
| 613 | + .u-empty { |
| 614 | + color: rgba(255, 255, 255, 0.48); |
| 615 | + font-size: 12px; |
| 616 | + line-height: 20px; |
| 617 | + } |
| 618 | + |
| 619 | + .w-pvx-user > div { |
| 620 | + margin-top: 10px !important; |
| 621 | + } |
| 622 | +} |
0 commit comments