✨ feat(客户端): 样式调整

@@ -6,8 +6,8 @@
   top: 0;
   width: 100%;
   height: 10px;
-  background: url('@images/modify-top.png')
-    0px 0px repeat-x;
+  background-image: url('@images/top-xian@2x.png');
+  background-size: contain;
 }
 .content-bg {
   /**
@@ -17,7 +17,7 @@
   * 不使用渐变色背景
   */
   height: 100%;
-  background: url('@images/choose-school-bg.png');
-  background-size: cover;
-  background: linear-gradient(360deg, #FDD347 0%, #FFED6D 100%) ;
+  background-image: url('@images/bg-yellow-duan@2x.png');
+  // background-size: cover;
+  // background: linear-gradient(360deg, #FDD347 0%, #FFED6D 100%) ;
 }
\ No newline at end of file

@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import icon_me from '@images/me.png'
+import icon_me from '@images/icon-my@2x.png'
 import { ref, reactive, onMounted } from 'vue'
 const props = defineProps({
   type: String
@@ -44,7 +44,7 @@ export default {
     z-index: 169;
     position: fixed;
     right: 2rem;
-    bottom: 10rem;
+    bottom: 5rem;
     width: 44px;
     height: 44px;
   }

 export default [{
   path: '/',
   name: '首页',
-  component: () => import('./views/index.vue'),
+  component: () => import('./views/client/index.vue'),
   meta: {
     title: ''
   },

@@ -14,7 +14,9 @@
       </van-image>
       <p class="title">杨浦民办科技幼稚园</p>
     </div>
-    <!-- 吊着的图片效果没有处理，让娜娜弄一张连到一起的图片试看看定位 -->
+    <div style="position: relative;">
+      <div class="ding left"></div>
+      <div style="position: relative; z-index: 100;">
         <van-row>
           <van-col span="4"></van-col>
           <van-col span="16">
@@ -22,6 +24,9 @@
           </van-col>
           <van-col span="4"></van-col>
         </van-row>
+      </div>
+      <div class="ding right"></div>
+    </div>
     <div class="book-list">
       <template v-for="(item, key) in items" :key="key">
         <book-card :item="item" @on-click="onClick(item)"></book-card>
@@ -101,10 +106,28 @@ export default {
     }
     .book-list {
       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);
     }
+    .ding {
+      z-index: 69;
+      position: absolute;
+      top: 2.5rem;
+      width: 1rem;
+      height: 3rem;
+      background-image: url('@images/ding-left@2x.png');
+      background-size: contain;
+      background-repeat: no-repeat;
+      &.left {
+        left: 8rem;
+      }
+      &.right {
+        right: 8rem;
+      }
+    }
     .group4 {
       width: 160px;
       height: 15px;

 <template>
-  <div>客户端入口</div>
+  <div style="background-color: white;height:100%; overflow:auto;">
+    <div class="client-index-page">
+    </div>
+    
     <div class="entry-wrapper">
-    <p style="color: #B8B8B8; margin: 1rem;">请选择您的身份</p>
+      <p style="color: #B8B8B8; margin: 1rem; margin-bottom: 0;">请选择您的身份</p>
       <div class="control">
         <div class="plain">
           <my-button type="plain" @on-click="goVisit">访客</my-button>
@@ -11,14 +14,18 @@
         </div>
       </div>
     </div>
-  <div class="van-safe-area-bottom"></div>
+  </div>
+  
+  <!-- <div class="van-safe-area-bottom"></div> -->
 </template>
 
 <script setup>
 import MyButton from '@/components/MyButton/index.vue'
 
+import $ from 'jquery';
 import { useRoute, useRouter } from 'vue-router'
 import { Toast } from 'vant';
+import { nextTick, onMounted } from 'vue'
 const $route = useRoute();
 const $router = useRouter();
 
@@ -32,6 +39,14 @@ const goSchool = () => { // 跳转选择幼儿园页面
     path: '/client/chooseSchool'
   });
 }
+
+onMounted (() => {
+  // 进入项目自动打开导航栏
+  // window.history.pushState({}, "title", "#");
+  // 背景颜色全屏
+  $('.client-index-page').height($(document).height() - $('.entry-wrapper').outerHeight());
+  // $('.client-index-page').width($(document).width());
+})
 </script>
 
 <script>
@@ -53,12 +68,22 @@ export default {
 </script>
 
 <style lang="less" scoped>
+  .client-index-page {
+    background-image: url('@images/yindao@2x.png');
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position:top center;
+  }
+  
   .entry-wrapper {
     position: absolute;
-    bottom: 3rem;
+    // bottom: 1rem;
     width: 100%;
+    background-color: #FFF;
     .control {
       margin: 1rem;
+      margin-top: 0.5rem;
+      overflow: auto;
       .plain {
         width: 30%; float: left;
       }