|
@@ -59,7 +59,7 @@
|
|
<div
|
|
<div
|
|
class="name"
|
|
class="name"
|
|
:class="{
|
|
:class="{
|
|
- wide: item['名称'].length > 12
|
|
|
|
|
|
+ wide: item['名称'].length > 11
|
|
}"
|
|
}"
|
|
:title="item['名称']"
|
|
:title="item['名称']"
|
|
>
|
|
>
|
|
@@ -388,15 +388,15 @@ function onClickItem(idx) {
|
|
>.name {
|
|
>.name {
|
|
flex: 0 0 auto;
|
|
flex: 0 0 auto;
|
|
position: absolute;
|
|
position: absolute;
|
|
- top: calc(15 / @page-height-design-px * 100vh * 0.83);
|
|
|
|
- right: calc(30 / @page-height-design-px * 100vh * 0.83);
|
|
|
|
- width: calc(56 / @page-height-design-px * 100vh * 0.83);
|
|
|
|
- height: calc(313 / @page-height-design-px * 100vh * 0.83);
|
|
|
|
- font-size: calc(23 / @page-height-design-px * 100vh * 0.83);
|
|
|
|
|
|
+ top: calc(10 / @page-height-design-px * 100vh * 0.83);
|
|
|
|
+ right: calc(32 / @page-height-design-px * 100vh * 0.83);
|
|
|
|
+ width: calc(47 / @page-height-design-px * 100vh * 0.83);
|
|
|
|
+ line-height: calc(47 / @page-height-design-px * 100vh * 0.83);
|
|
|
|
+ height: calc(261 / @page-height-design-px * 100vh * 0.83);
|
|
|
|
+ font-size: calc(19 / @page-height-design-px * 100vh * 0.83);
|
|
font-family: Source Han Serif CN, Source Han Serif CN;
|
|
font-family: Source Han Serif CN, Source Han Serif CN;
|
|
font-weight: 800;
|
|
font-weight: 800;
|
|
color: #43310E;
|
|
color: #43310E;
|
|
- line-height: calc(56 / @page-height-design-px * 100vh * 0.83);
|
|
|
|
display: -webkit-box;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-line-clamp: 2;
|
|
@@ -407,13 +407,14 @@ function onClickItem(idx) {
|
|
background-repeat: no-repeat;
|
|
background-repeat: no-repeat;
|
|
background-position: center center;
|
|
background-position: center center;
|
|
text-align: center;
|
|
text-align: center;
|
|
- padding-top: calc(10 / @page-height-design-px * 100vh * 0.83);
|
|
|
|
- padding-bottom: calc(10 / @page-height-design-px * 100vh * 0.83);
|
|
|
|
|
|
+ padding-top: calc(17 / @page-height-design-px * 100vh * 0.83);
|
|
|
|
+ padding-bottom: calc(17 / @page-height-design-px * 100vh * 0.83);
|
|
z-index: 1;
|
|
z-index: 1;
|
|
}
|
|
}
|
|
>.name.wide{
|
|
>.name.wide{
|
|
- width: calc(102 / @page-height-design-px * 100vh * 0.83);
|
|
|
|
- height: calc(316 / @page-height-design-px * 100vh * 0.83);
|
|
|
|
|
|
+ right: calc(12 / @page-height-design-px * 100vh * 0.83);
|
|
|
|
+ width: calc(82 / @page-height-design-px * 100vh * 0.83);
|
|
|
|
+ height: calc(255 / @page-height-design-px * 100vh * 0.83);
|
|
line-height: 1.5em;
|
|
line-height: 1.5em;
|
|
background-image: url(@/assets/images/relic-item-title-bg-wide.png);
|
|
background-image: url(@/assets/images/relic-item-title-bg-wide.png);
|
|
padding-right: 0.7em;
|
|
padding-right: 0.7em;
|