Przeglądaj źródła

文物列表页文物标题外观改版

任一存 1 rok temu
rodzic
commit
26335e37f0

BIN
src/assets/images/relic-item-title-bg-wide.png


BIN
src/assets/images/relic-item-title-bg.png


+ 12 - 11
src/views/RelicList.vue

@@ -59,7 +59,7 @@
           <div
             class="name"
             :class="{
-              wide: item['名称'].length > 12
+              wide: item['名称'].length > 11
             }"
             :title="item['名称']"
           >
@@ -388,15 +388,15 @@ function onClickItem(idx) {
         >.name {
           flex: 0 0 auto;
           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-weight: 800;
           color: #43310E;
-          line-height: calc(56 / @page-height-design-px * 100vh * 0.83);
           display: -webkit-box;
           -webkit-box-orient: vertical;
           -webkit-line-clamp: 2;
@@ -407,13 +407,14 @@ function onClickItem(idx) {
           background-repeat: no-repeat;
           background-position: center 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;
         }
         >.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;
           background-image: url(@/assets/images/relic-item-title-bg-wide.png);
           padding-right: 0.7em;