Quellcode durchsuchen

feat: 双沟设色 版式更新

任一存 vor 1 Jahr
Ursprung
Commit
d9f198ad84
1 geänderte Dateien mit 34 neuen und 28 gelöschten Zeilen
  1. 34 28
      src/views/ShuangGou.vue

+ 34 - 28
src/views/ShuangGou.vue

@@ -16,22 +16,13 @@
       }"
       @click="onClickHotspot"
     />
-    <img
-      class="para-1"
-      src="@/assets/images/shuang-gou-para-1.png"
-      alt=""
-      draggable="false"
-    >
-    <img
-      class="para-2"
-      src="@/assets/images/shuang-gou-para-2.png"
-      alt=""
-      draggable="false"
-    >
     <div class="title">
       <h1>双钩设色</h1>
     </div>
-
+    <div class="text">
+      <p><span>双钩</span>,中国画技法名。用线条钩描物象的轮廓,通称“勾勒”,因基本上是用左右或上下两笔钩描合拢,故亦称“双钩”。大部用于工笔花鸟画。又旧时摹搨法书。沿字的笔迹两边用细劲的墨线钩出轮廓,也叫“双钩”;双钩后填墨的称为“双钩廓填”。</p>
+      <p><span>设色</span>,国画中晕染彩色的意思,画面中只要出现彩色就可以说是设色作品。与设色相反的是“水墨”,指画面中不出现彩色,或者极少出现彩色的,以墨色为主绘制的作品。</p>
+    </div>
     <button
       class="play-video"
       @click="isShowVideos = true"
@@ -159,21 +150,7 @@ const activeVideoIdx = ref(0)
     width: 48px;
     height: 48px;
   }
-  >img.para-1{
-    position: absolute;
-    bottom: 50%;
-    left: 47vw;
-    height: 64.5vh;
-    width: 17.9vh;
-    transform: translate(0, 50%);
-  }
-  >img.para-2{
-    position: absolute;
-    bottom: 0;
-    left: calc(47vw + 17.9vh + 7.61vh);
-    height: 84.57vh;
-    width: 28.40vh;
-  }
+
   >.title{
     position: absolute;
     top: 8.13vh;
@@ -193,6 +170,35 @@ const activeVideoIdx = ref(0)
       right: 3vw;
     }
   }
+  >.text{
+    position: absolute;
+    left: 47vw;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 61.86vh;
+    @media (max-aspect-ratio: 1250/835) {
+      left: initial;
+      right: 11vw;
+    }
+    >p{
+      font-size: calc(30 / 970 * 100vh);
+      line-height: calc(36 / 970 * 100vh);
+      text-indent: 2em;
+      font-family: KaiTi, KaiTi;
+      font-weight: 400;
+      color: #707F48;
+      >span{
+        font-family: KaiTi, KaiTi;
+        font-weight: 400;
+        color: #707F48;
+        font-size: calc(42 / 970 * 100vh);
+        line-height: calc(50 / 970 * 100vh);
+      }
+    }
+    >p:nth-of-type(2) {
+      margin-top: 10vh;
+    }
+  }
 
   >button.play-video{
     position: absolute;