From 72f8190d33b5e6f1b64b848048f315cf530bc6ef Mon Sep 17 00:00:00 2001
From: 闫增涛 <1829501689@qq.com>
Date: 星期五, 31 五月 2024 17:18:05 +0800
Subject: [PATCH] 艺术分页
---
src/books/artAndDance/assets/images/pageContentHeader.jpg | 0
src/assets/js/config.js | 3
src/books/artAndDance/view/components/header.vue | 110 ++++++++++-----------
src/books/embedded/assets/main.less | 2
src/books/artAndDance/assets/images/icon/tree.jpg | 0
src/books/artAndDance/view/components/chapter001.vue | 69 +++++++++++++
src/books/English/view/components/header.vue | 6 -
src/books/artAndDance/assets/images/icon/tree(1).jpg | 0
src/App.vue | 2
src/books/English/assets/main.less | 6 +
src/books/artAndDance/assets/main.less | 57 +++++++++++
11 files changed, 188 insertions(+), 67 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index eff2cc5..bba49f4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -70,7 +70,7 @@
// embedded
// english
// artAndDance
- this.config.resourceCtx + "lifeCare"
+ this.config.resourceCtx + "artAndDance"
);
// 娴嬭瘯璇曡30椤�
// this.activeBook.tryPageCount = 10;
diff --git a/src/assets/js/config.js b/src/assets/js/config.js
index a4c6a3d..8dd3eda 100644
--- a/src/assets/js/config.js
+++ b/src/assets/js/config.js
@@ -11,7 +11,8 @@
};
export const appId = 3;
export const requestTimeOut = 300000; // 璇锋眰瓒呮椂鏃堕棿
-export const tokenKey = "jsek-token";
+// export const tokenKey = "jsek-token";
+export const tokenKey = "token"
const config = {
resourceCtx,
diff --git a/src/books/English/assets/main.less b/src/books/English/assets/main.less
index f4f618b..db919a5 100644
--- a/src/books/English/assets/main.less
+++ b/src/books/English/assets/main.less
@@ -651,7 +651,7 @@
// 鑷畾涔夊唴瀹�
.page-box {
box-sizing: border-box;
- min-height: 1150px !important;
+ min-height: 1128px !important;
margin-bottom: 20px;
box-shadow: 0 3px 6px 1px #00000029;
background-color: #fff;
@@ -709,12 +709,16 @@
.m0 {
margin: 0 !important;
}
+
.mb-0 {
margin-bottom: 0;
}
.mb-20 {
margin-bottom: 20px;
}
+ .mt-20 {
+ margin-top: 20px;
+ }
.mt-40 {
margin-top: 40px;
}
diff --git a/src/books/English/view/components/header.vue b/src/books/English/view/components/header.vue
index 783dd30..76f5e03 100644
--- a/src/books/English/view/components/header.vue
+++ b/src/books/English/view/components/header.vue
@@ -1,19 +1,15 @@
<template>
<div class="chapter" num="1">
<!-- -->
- <div class="page-box" page="1">
+ <div class="page-box mt-20" page="1">
<div v-if="showPageList.indexOf(1) > -1">
- <p class="center">
<img class="img-0" alt="" src="../../assets/images/Cover.jpg" />
- </p>
</div>
</div>
<!-- 1 -->
<div class="page-box" page="2">
<div v-if="showPageList.indexOf(2) > -1">
- <p class="center">
<img class="img-0" alt="" src="../../assets/images/SMY.jpg" />
- </p>
</div>
</div>
<!-- 2 -->
diff --git "a/src/books/artAndDance/assets/images/icon/tree\0501\051.jpg" "b/src/books/artAndDance/assets/images/icon/tree\0501\051.jpg"
new file mode 100644
index 0000000..d3b7b06
--- /dev/null
+++ "b/src/books/artAndDance/assets/images/icon/tree\0501\051.jpg"
Binary files differ
diff --git a/src/books/artAndDance/assets/images/icon/tree.jpg b/src/books/artAndDance/assets/images/icon/tree.jpg
new file mode 100644
index 0000000..dd7b757
--- /dev/null
+++ b/src/books/artAndDance/assets/images/icon/tree.jpg
Binary files differ
diff --git a/src/books/artAndDance/assets/images/pageContentHeader.jpg b/src/books/artAndDance/assets/images/pageContentHeader.jpg
new file mode 100644
index 0000000..bd0dc00
--- /dev/null
+++ b/src/books/artAndDance/assets/images/pageContentHeader.jpg
Binary files differ
diff --git a/src/books/artAndDance/assets/main.less b/src/books/artAndDance/assets/main.less
index 7b782c4..29d4c0d 100644
--- a/src/books/artAndDance/assets/main.less
+++ b/src/books/artAndDance/assets/main.less
@@ -350,7 +350,64 @@
.ju-bt {
justify-content: space-between;
}
+ .al-cn {
+ align-items: center;
+ }
.wh-nr {
white-space: nowrap;
}
+ .w100 {
+ width: 100%;
+ }
+ .m0 {
+ margin: 0;
+ }
+ .mb-20 {
+ margin-bottom: 20px;
+ }
+ .mb-40 {
+ margin-bottom: 40px;
+ }
+ .ml-40 {
+ margin-left: 40px;
+ }
+ .pg-mh {
+ min-height: 1150px;
+ }
+ .dl-ib {
+ display: inline-block;
+ }
+ .w-min {
+ width: min-content;
+ }
}
+
+/* 濯掍綋鏌ヨ鍋氬熀纭�鍝嶅簲寮忓竷灞� */
+@media (max-width: 660px) {
+ .ans-dance {
+ /* 鍒嗛〉padding */
+ .page-padding {
+ padding: 104px 20px;
+ }
+ .padding-96 {
+ padding: 0 20px;
+ }
+ /* video澶у皬 */
+ .video-box {
+ max-width: 260px;
+ }
+ }
+}
+@media (min-width: 660px) {
+ .ans-dance {
+ .page-padding {
+ padding: 104px 96px;
+ }
+ .padding-96 {
+ padding: 0 96px;
+ }
+ .video-box {
+ max-width: 370px;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/books/artAndDance/view/components/chapter001.vue b/src/books/artAndDance/view/components/chapter001.vue
index e69de29..114e433 100644
--- a/src/books/artAndDance/view/components/chapter001.vue
+++ b/src/books/artAndDance/view/components/chapter001.vue
@@ -0,0 +1,69 @@
+<template>
+ <div class="chapter" num="1">
+ <div class="page-box" page="4">
+ <div v-if="showPageList.indexOf(4) > -1">
+ <img class="img-0" alt="" src="../../assets/images/dy1.jpg" />
+ </div>
+ </div>
+ <div class="page-box" page="5">
+ <div v-if="showPageList.indexOf(5) > -1" class="pg-mh fl fl-cl ju-bt">
+ <img
+ src="../../assets/images/pageContentHeader.jpg"
+ alt=""
+ class="w100 mb-40"
+ />
+ <div class="padding-96">
+ <p class="center">
+ <img class="img-a" alt="" src="../../assets/images/image6-1.jpg" />
+ </p>
+ <h2 class="lefth2" id="b001">
+ <img class="img-gn" alt="" src="../../assets/images/rhybx.jpg" />
+ </h2>
+ <h3 id="c001" class="fw-400 fz-26 mb-20">鍏冪礌</h3>
+ <p class="block2 fw-400 fz-26">鍗曟墜鎸ュ埆</p>
+ <p class="block1 w70"><span class="ls fz-26">鈥斺�斿崟鏅冩墜</span></p>
+ <p class="block2 fz-26">鍙屾墜鎸ュ埆</p>
+ <p class="block1 w70"><span class="ls fz-26">鈥斺�斿弻鏅冩墜</span></p>
+ <p class="block2 fz-26">閰嶅悎姝ヤ紣</p>
+ <p class="block1 w70"><span class="ls fz-26">鈥斺�斾笂姝ユ檭鎵�</span></p>
+ </div>
+
+ <ul>
+ <li class="ml-40">
+ <img src="../../assets/images/icon/tree.jpg" >
+ <span class="dl-ib">
+ 2
+ </span>
+ </li>
+ <li>
+ <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
+ </li>
+ </ul>
+
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ name: "chapterOne",
+ props: {
+ showPageList: {
+ type: Array,
+ },
+ },
+};
+</script>
+
+<style lang="less" scoped>
+ .w70 {
+ width: 78%;
+ }
+ .fw-400 {
+ font-weight: 400 !important;
+ }
+ .fz-26 {
+ font-size: 26px !important;
+ }
+</style>
diff --git a/src/books/artAndDance/view/components/header.vue b/src/books/artAndDance/view/components/header.vue
index d4f6bea..34bbcab 100644
--- a/src/books/artAndDance/view/components/header.vue
+++ b/src/books/artAndDance/view/components/header.vue
@@ -1,70 +1,59 @@
<template>
<div class="chapter" num="1">
<div class="page-box" page="1">
- <div class="bodystyle">
- <p class="center">
- <img class="img-0" alt="" src="../../assets/images/Cover.jpg" />
- </p>
- </div>
+ <div v-if="showPageList.indexOf(1) > -1"></div>
+ <img class="img-0" alt="" src="../../assets/images/Cover.jpg" />
</div>
<div class="page-box" page="2">
- <div class="bodystyle">
- <p class="center">
- <img class="img-0" alt="" src="../../assets/images/SMY.jpg" />
- </p>
+ <div v-if="showPageList.indexOf(2) > -1">
+ <img class="img-0" alt="" src="../../assets/images/SMY.jpg" />
</div>
</div>
<div class="page-box" page="3">
- <ul class="fl fl-cl ju-bt" style="min-height: 1150px;">
- <li>
- <img src="../../assets/images/pageHeader.png" alt="">
- </li>
- <li>
- <div class="bodystyle">
- <h1 id="a003" class="front">缂栧浼�</h1>
- <hr />
- <p>椤俱��銆�闂細<span class="kaiti">褰悏璞°��鍚曡壓鐢�</span></p>
- <p>涓汇��銆�缂栵細<span class="kaiti">鐜嬫澃</span></p>
- <p>鍓� 涓� 缂栵細<span class="kaiti">浜庢檽闆��寰愭ⅵ濠�</span></p>
- <ul class="fl">
- <li>
- <p class="wh-nr">缂栧啓濮斿憳锛�</p>
- </li>
- <li class="fl fl-cl">
- <span class="kaiti">閭㈤珮鐔欍��鐜嬨��鐜层��鐜嬨��閿︺��宕旀槬鏉�</span>
- <span class="kaiti">鏉庣传钖囥��鍒樿景鏇︺��鏅併��鑾广��鎴村垬棣欎緷</span>
- <span class="kaiti">鏌��鍜忋��寮犺壓鐟躲��灏氬皬闆��鍛ㄣ��鐙�</span>
- </li>
- </ul>
- <p>缇庢湳缁樼敾锛�<span class="kaiti">寮犲鑽�</span></p>
- <p>涓昏鏁欏笀锛�<span class="kaiti">寮犳偊銆�銆�楂樻檽姊�</span></p>
- <ul class="fl">
- <li>
- <p class="wh-nr">琛� 婕� 鑰咃細</p>
- </li>
- <li class="fl fl-cl">
- <span class="kaiti"
- >钁ｆ仼姹愩��濮氭槦鏈点��鍛ㄦ竻绔广��鏈卞婕�</span
- >
- <span class="kaiti"
- >鎴村槈澧ㄣ��楂樺瓙娣囥��鑸掑崥鐟炪��鏇规仼娣�</span
- >
- <span class="kaiti">鍒樺瓙鐠愩��閮戞竻濡�</span>
- </li>
- </ul>
- <p>
-
+ <div v-if="showPageList.indexOf(2) > -1">
+ <ul class="fl fl-cl ju-bt" style="min-height: 1150px">
+ <li>
+ <img src="../../assets/images/pageHeader.png" alt="" class="w100" />
+ </li>
+ <li>
+ <div class="bodystyle">
+ <h1 id="a003" class="front">缂栧浼�</h1>
+ <hr />
+ <p>椤俱��銆�闂細<span class="kaiti">褰悏璞°��鍚曡壓鐢�</span></p>
+ <p>涓汇��銆�缂栵細<span class="kaiti">鐜嬫澃</span></p>
+ <p>鍓� 涓� 缂栵細<span class="kaiti">浜庢檽闆��寰愭ⅵ濠�</span></p>
+ <ul class="fl">
+ <li>
+ <p class="wh-nr">缂栧啓濮斿憳锛�</p>
+ </li>
+ <li class="fl fl-cl">
+ <span class="kaiti">閭㈤珮鐔欍��鐜嬨��鐜层��鐜嬨��閿︺��宕旀槬鏉�</span>
+ <span class="kaiti">鏉庣传钖囥��鍒樿景鏇︺��鏅併��鑾广��鎴村垬棣欎緷</span>
+ <span class="kaiti">鏌��鍜忋��寮犺壓鐟躲��灏氬皬闆��鍛ㄣ��鐙�</span>
+ </li>
+ </ul>
+ <p>缇庢湳缁樼敾锛�<span class="kaiti">寮犲鑽�</span></p>
+ <p>涓昏鏁欏笀锛�<span class="kaiti">寮犳偊銆�銆�楂樻檽姊�</span></p>
+ <ul class="fl">
+ <li>
+ <p class="wh-nr">琛� 婕� 鑰咃細</p>
+ </li>
+ <li class="fl fl-cl">
+ <span class="kaiti">钁ｆ仼姹愩��濮氭槦鏈点��鍛ㄦ竻绔广��鏈卞婕�</span>
+ <span class="kaiti">鎴村槈澧ㄣ��楂樺瓙娣囥��鑸掑崥鐟炪��鏇规仼娣�</span>
+ <span class="kaiti">鍒樺瓙鐠愩��閮戞竻濡�</span>
+ </li>
+ </ul>
+ <p></p>
+ <p>銆�銆�銆�銆�銆�</p>
+ <p>銆�銆�銆�銆�銆�</p>
+ </div>
+ <p class="center">
+ <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
</p>
- <p>
- 銆�銆�銆�銆�銆�
- </p>
- <p>銆�銆�銆�銆�銆�</p>
- </div>
- <p class="center">
- <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
- </p>
- </li>
- </ul>
+ </li>
+ </ul>
+ </div>
</div>
</div>
</template>
@@ -72,6 +61,11 @@
<script>
export default {
name: "pageHeader",
+ props: {
+ showPageList: {
+ type: Array,
+ },
+ },
};
</script>
diff --git a/src/books/embedded/assets/main.less b/src/books/embedded/assets/main.less
index b35fd96..9d51bae 100644
--- a/src/books/embedded/assets/main.less
+++ b/src/books/embedded/assets/main.less
@@ -601,7 +601,7 @@
// 鑷畾涔夊唴瀹�
.page-box {
box-sizing: border-box;
- min-height: 1150px !important;
+ min-height: 1092px !important;
margin-bottom: 20px;
box-shadow: 0 3px 6px 1px #00000029;
background-color: #fff;
--
Gitblit v1.9.1