✨ feat(书籍详情页): 新增书籍简介相关功能

+/**
+ * 判断多行省略文本
+ * @param {*} id 目标dom标签
+ * @returns 
+ */
+const hasEllipsis = (id) => {
+  let oDiv = document.getElementById(id);
+  let flag = false
+  if (oDiv.scrollHeight > oDiv.clientHeight) {
+    flag = true
+  }
+  return flag
+}
+
+export default {
+  hasEllipsis
+}
\ No newline at end of file

@@ -31,6 +31,14 @@ export default [{
   },
   },
   children: []
   children: []
 }, {
 }, {
+  path: '/client/bookDetail',
+  name: '客户端选择书籍下视频作品',
+  component: () => import('./views/client/bookDetail.vue'),
+  meta: {
+    title: '书籍'
+  },
+  children: []
+}, {
   path: '/image',
   path: '/image',
   name: 'html转图片',
   name: 'html转图片',
   component: () => import('./views/html2canvas.vue'),
   component: () => import('./views/html2canvas.vue'),

+<template>
+  <div class="book-detail-page content-bg">
+    <div class="modify-top"></div>
+    <div class="book-detail">
+      <div style="text-align: center;">
+        <van-image
+          width="220"
+          height="220"
+          src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngc434046fdf1f9499d251b280af2568ddbe64839799d00a9aee226edbeb710aed"
+        />
+      </div>
+      <div class="book-intro">
+        <p class="book-post">逃家小兔绘本</p>
+        <div id="book-intro" :class="{ 'van-multi-ellipsis--l3': isToggle }">
+          从前有一只小兔子，总是想要离家出走。有一天他对妈妈说：“我要跑走啦！”“如果你跑走了我就去追你，因为你是我的小宝贝呀！”妈妈说。
+          一场爱的捉迷藏就此展开了
+        </div>
+        <div v-if="hasToggle">
+          <div v-if="isToggle" @click="onToggle(false)" class="book-toggle-icon">展开&nbsp;<van-icon style="vertical-align: middle;" size="0.9rem" name="http://gyzs.onwall.cn/icon-zhankai%402x.png" /></div>
+          <div v-else @click="onToggle(true)" class="book-toggle-icon">折叠&nbsp;<van-icon style="vertical-align: middle;" size="0.9rem" name="http://gyzs.onwall.cn/icon-guanbi%402x.png" /></div>
+        </div>
+      </div>
+    </div>
+    <div style="height: 1rem;"></div>
+    <to-me @on-click="gotoMe()"></to-me>
+  </div>
+</template>
+
+<script setup>
+import ToMe from '@/components/ToMe/index.vue'
+import tools from '@/common/tool'
+import { ref, reactive, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import axios from '@/utils/axios';
+import $ from 'jquery'
+import { Toast } from 'vant';
+const $route = useRoute();
+const $router = useRouter();
+
+  const items = reactive([])
+
+  const gotoMe = () => {
+    console.warn('跳转我的地址');
+  }
+
+  // 判断是否显示简介的展开图标
+  let hasToggle = ref(false); // 判断是否有展开文字，默认没有
+  let isToggle = ref(true); // 判断展开状态，默认展开
+
+  const onToggle = (v) => { // 展开/折叠
+    isToggle.value = v
+  }
+
+  onMounted(() => {
+    // 判断是否显示简介的展开图标
+    hasToggle.value = tools.hasEllipsis('book-intro');
+    for (let index = 0; index < 20; index++) {
+      items.push({
+        id: index,
+        avatar: 'https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg'
+      })
+    }
+  })
+</script>
+
+<script>
+import mixin from 'common/mixin';
+
+export default {
+  mixins: [mixin.init],
+  data () {
+    return {
+
+    }
+  },
+  mounted () {
+
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import url('@css/content-bg.less');
+  .book-detail-page {
+    overflow: auto;
+    .book-detail {
+      margin: 1rem; 
+      margin-top: 1.25rem;
+      padding-top: 1rem;
+      border-radius: 10px;
+      background-color: rgba(255, 255, 255, 1);
+      box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.13);
+      .book-intro {
+        padding: 1rem;
+        .book-post {
+          color: #222222; 
+          font-size: 1.25rem; 
+          font-weight: bold;
+        }
+        #book-intro {
+          color: #333333; 
+          margin-top: 0.25rem;
+        }
+        .book-toggle-icon {
+          text-align: right; 
+          color: #713610; 
+          font-size: 1rem;
+        }
+      }
+    }
+  }
+</style>
\ No newline at end of file

@@ -45,9 +45,7 @@ onMounted (() => {
   // 进入项目自动打开导航栏
   // 进入项目自动打开导航栏
   // window.history.pushState({}, "title", "#");
   // window.history.pushState({}, "title", "#");
   // 背景颜色全屏
   // 背景颜色全屏
-  // $('.client-index-page').height($(document).height() - $('.entry-wrapper').outerHeight());
   $('.client-index-page').height($(document).height());
   $('.client-index-page').height($(document).height());
-  // $('.client-index-page').width($(document).width());
 })
 })
 </script>
 </script>
 
 
@@ -70,24 +68,6 @@ export default {
 </script>
 </script>
 
 
 <style lang="less" scoped>
 <style lang="less" scoped>
-  // .client-index-page {
-  //   // 背景图 宽度100% 高度自适应
-  //   background-image: url('@images/yindao@2x-1.png');
-  //   background-repeat: no-repeat;
-  //   width: 100%;
-  //   height: 100%;
-  //   background-size: 100% auto;
-  //   position: relative;
-  //   .cloud-bg {
-  //     background-image: url('@images/bg-white@2x.png');
-  //     background-repeat: no-repeat;
-  //     width: 100%;
-  //     height: 10rem;
-  //     background-size: 100% auto;
-  //     position: absolute;
-  //     bottom: 12rem;
-  //   }
-  // }
   .client-index-page {
   .client-index-page {
     // 背景图 宽度100% 高度控制
     // 背景图 宽度100% 高度控制
     background-image: url('@images/yindao@2x.png');
     background-image: url('@images/yindao@2x.png');