✨ feat(幼儿园概况): 样式结构调整

 <template>
 <template>
-  <div class=""></div>
+  <div class="all-book-page content-bg">
+    <div class="modify-top"></div>
+    <div class="belong-school">
+      <van-image round width="2rem" height="2rem" lazy-load src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngcff89d3955421a988f983d312e970e4f07e08045b33c0505e52c65bb63ac35a9" style="vertical-align: text-bottom;" >
+        <template v-slot:error>加载失败</template>
+      </van-image>
+      <p class="title">杨浦民办科技幼稚园</p>
+    </div>
+    <div class="summary">
+      <div class="ding left"></div>
+      <div class="wrapper">
+        <div class="content-box" style="">
+          <van-row class="van-hairline--bottom">
+            <van-col span="12" class="van-hairline--right">
+              <div class="text-box"><span class="text">视频上传</span>&nbsp;24<span style="color: #888888;">/30</span></div> 
+            </van-col>
+            <van-col span="12">
+              <div class="text-box"><span class="text">作品总数</span>&nbsp;436</div> 
+            </van-col>
+          </van-row>
+          <van-row>
+            <van-col span="12" class="van-hairline--right">
+              <div class="text-box"><span class="text">捐书金额</span>&nbsp¥ 235</div> 
+            </van-col>
+            <van-col span="12">
+              <div class="text-box"><span class="text">参与人数</span>&nbsp;876</div> 
+            </van-col>
+          </van-row>
+        </div>
+      </div>
+      <div class="ding right"></div>
+    </div>
+    <div class="book-list">
+      <div class="header van-hairline--bottom">
+        <van-row>
+          <van-col span="8" class="left">
+            <span class="text" style="border-bottom: 2px solid #F9D95C;">所有书籍</span>
+          </van-col>
+          <van-col span="8"></van-col>
+          <van-col span="8" class="right">
+            <van-icon :name="icon_book" size="0.8rem" style="vertical-align: middle;" />
+            &nbsp;<span style="vertical-align: middle;">共15种</span>
+            </van-col>
+        </van-row>
+      </div>
+      <template v-for="(item, key) in items" :key="key">
+        <book-card :item="item" @on-click="onClick(item)"></book-card>
+      </template>
+    </div>
+    <div style="height: 1rem;"></div>
+    <shortcut-fixed @on-click="gotoMe()"></shortcut-fixed>
+  </div>
 </template>
 </template>
 
 
 <script setup>
 <script setup>
+import icon_book from '@images/shu@2x.png'
+import MyButton from '@/components/MyButton/index.vue'
+import BookCard from '@/components/BookCard/index.vue'
+import ShortcutFixed from '@/components/ShortcutFixed/index.vue'
+
 import { ref, reactive, onMounted } from 'vue'
 import { ref, reactive, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useRoute, useRouter } from 'vue-router'
 import axios from '@/utils/axios';
 import axios from '@/utils/axios';
@@ -10,9 +66,32 @@ import $ from 'jquery'
 import { Toast } from 'vant';
 import { Toast } from 'vant';
 const $route = useRoute();
 const $route = useRoute();
 const $router = useRouter();
 const $router = useRouter();
-
+// 自定义按钮颜色样式
+const styleObject = reactive({
+  backgroundColor: '#F4675A', 
+  color: '#FFFFFF', 
+  borderColor: '#F4675A'
+})
+const items = reactive([])
+const onClick = (item) => {
+  // 调整书籍详情页
+  $router.push({
+    path: '/client/bookDetail',
+    query: {
+      id: item.id
+    }
+  });
+}
+const gotoMe = () => {
+  console.warn('跳转我的地址');
+}
   onMounted(() => {
   onMounted(() => {
-    
+    for (let index = 0; index < 20; index++) {
+      items.push({
+        id: index,
+        avatar: 'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng4bb07576e7df209c1f91dd67e0c2671bd5704366605bc720b56d20b38602c2b7'
+      })
+    }
   })
   })
 </script>
 </script>
 
 
@@ -36,5 +115,75 @@ export default {
 </script>
 </script>
 
 
 <style lang="less" scoped>
 <style lang="less" scoped>
-
+@import url('@css/content-bg.less');
+  .all-book-page {
+    .belong-school {
+      padding: 1.5rem;
+      padding-bottom: 0;
+      .title {
+        color: #222222; 
+        display: inline-block; 
+        vertical-align: super; 
+        margin-left: 1rem;
+      }
+      
+    }
+    .summary {
+      position: relative;
+      .wrapper {
+        position: relative;
+        z-index: 100;
+        .content-box {
+          margin: 1rem; 
+          background-color: #FFFFFF; 
+          border-radius: 8px; 
+          text-align: center; 
+          color: #713610;
+          .text-box {
+            padding: 1.5rem 1rem;
+            .text {
+              color: #222222; border-bottom: 2px solid #F9D95C; font-size: 0.85rem;
+            }
+          }
+        }
+      }
+    }
+    .book-list {
+      margin: 1rem;
+      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);
+      .header {
+        padding: 1rem 0; 
+        margin: 0 1rem; 
+        text-align: center; 
+        vertical-align: middle;
+        .left {
+          color: #222222; 
+          font-size: 1.15rem;
+        }
+        .right {
+          color: #888888; 
+          font-size: 0.9rem;
+        }
+      }
+    }
+    .ding {
+      z-index: 110;
+      position: absolute;
+      top: 7.5rem;
+      width: 1rem;
+      height: 3rem;
+      background-image: url('@images/ding03@2x.png');
+      background-size: contain;
+      background-repeat: no-repeat;
+      &.left {
+        left: 8rem;
+      }
+      &.right {
+        right: 8rem;
+      }
+    }
+  }
 </style>
 </style>
\ No newline at end of file