在index 页面增加 scroll view

components.d.ts

@@ -7,6 +7,7 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    BackgroundBasic: typeof import('./src/components/background-basic/index.vue')['default']
     Contact: typeof import('./src/components/contact/index.vue')['default']
     ContactForm: typeof import('./src/components/contact-form/index.vue')['default']
     Counter: typeof import('./src/components/Counter.vue')['default']
@@ -22,6 +23,7 @@ declare module 'vue' {
     NutForm: typeof import('@nutui/nutui-taro')['Form']
     NutFormItem: typeof import('@nutui/nutui-taro')['FormItem']
     NutInput: typeof import('@nutui/nutui-taro')['Input']
+    NutNavbar: typeof import('@nutui/nutui-taro')['Navbar']
     NutSearchbar: typeof import('@nutui/nutui-taro')['Searchbar']
     NutSwitch: typeof import('@nutui/nutui-taro')['Switch']
   }

src/pages/index/index.config.ts

@@ -1,4 +1,6 @@
 export default definePageConfig({
   navigationBarTitleText: '',
+  navigationStyle: 'custom',
+  disableScroll: true,
   usingComponents: {}
 })

src/pages/index/index.scss

@@ -1,12 +1,14 @@
-.content{
-    font-family: "Avenir", Helvetica, Arial, sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    text-align: center;
-    margin-top: 40%;
-    padding: 0 20px;
+page {
+    height: 100%;
 }
-.nut-cell{
-    display: flex;
-    justify-content: space-between;
-}
+
+.nut-navbar {
+    background: transparent;
+}
+
+.scroll {
+    flex: 1;
+    overflow: scroll;
+}
+
+

src/pages/index/index.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { reactive } from 'vue'
 import { View, Text } from '@tarojs/components'
+
 import './index.scss'
 import Counter from '../../components/Counter.vue'
 import { ref } from 'vue'
@@ -33,37 +34,64 @@ import Notification from "../../components/notification";
 </script>
 
 
+
+
+
 <template>
-  <view class="w-100" style="overflow-x: hidden">
-    <view class="pl-3 pt-3 pr-3 h2 d-flex">
-      <view class="flex-grow-1">
-        来访记录
-      </view>
-    </view>
+  <view class="h-100 d-flex flex-column">
+    <BackgroundBasic/>
+    <NutNavbar title=""></NutNavbar>
+    <View class="w-100" style="overflow-x: hidden">
+      <View class="pl-3 pt-3 pr-3 h2 d-flex">
+        <View class="flex-grow-1">
+          来访记录
+        </View>
+      </View>
+      <View class="d-flex text-black-50 pb-2 pr-3">
+        <View class="flex-grow-1"></View>
+        <View>最近30天的来访</View>
+      </View>
+    </View>
 
-    <view class="d-flex text-black-50 pt-2 pb-2 pr-3">
-      <view class="flex-grow-1"></view>
-      <view>最近30天的来访</view>
-    </view>
-    <view class="p-4">
-    <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">使用电话号码登录</button>
-    </view>
+    <view class="scroll">
+      <Scroll-View :scroll-y="true">
+        <Notification name="" company="小明科技2" is-vip="true" pass-date="2023-12-25" pass-time="22:22:22" today-pass-time='["22:22:21","22:22:20"]'/>
+        <Notification name="王远" company="joydata科技" is-vip="true" pass-date="2023-12-25" pass-time="22:22:22" today-pass-time='[]'/>
+        <Notification name="华雨" company="joydata科技" is-vip="false" pass-date="2023-12-25" pass-time="22:22:22" today-pass-time='["22:22:21"]'/>
+        <Notification name="邸为荣" company="" is-vip="false"  pass-date="2023-12-25" pass-time="22:22:22" today-pass-time='["22:22:21","22:22:20"]'/>
 
-    <!--  <Counter/>-->
-    <Notification name="" company="小明科技2" is-vip="true" pass-date="2023-12-25" pass-time="22:22:22" today-pass-time='["22:22:21","22:22:20"]'/>
-    <Notification name="王远" company="joydata科技" is-vip="true" pass-date="2023-12-25" pass-time="22:22:22" today-pass-time='[]'/>
-    <Notification name="华雨" company="joydata科技" is-vip="false" pass-date="2023-12-25" pass-time="22:22:22" today-pass-time='["22:22:21"]'/>
-    <Notification name="邸为荣" company="" is-vip="false"  pass-date="2023-12-25" pass-time="22:22:22" today-pass-time='["22:22:21","22:22:20"]'/>
-
-    <view class="container pt-5 pb-3">
-      <view class="row">
-        <view class="col"/>
-        <view class="col text-center text-black-50">
-          <nut-divider> 没有更多了 </nut-divider>
+        <Notification name="邸为荣" company="" is-vip="false"  pass-date="2023-12-25" pass-time="22:22:22" today-pass-time='["22:22:21","22:22:20"]'/>
+        <Notification name="邸为荣" company="" is-vip="false"  pass-date="2023-12-25" pass-time="22:22:22" today-pass-time='["22:22:21","22:22:20"]'/>
+        <Notification name="邸为荣" company="" is-vip="false"  pass-date="2023-12-25" pass-time="22:22:22" today-pass-time='["22:22:21","22:22:20"]'/>
+
+
+        <Notification name="邸为荣" company="" is-vip="false"  pass-date="2023-12-25" pass-time="22:22:22" today-pass-time='["22:22:21","22:22:20"]'/>
+        <Notification name="邸为荣" company="" is-vip="false"  pass-date="2023-12-25" pass-time="22:22:22" today-pass-time='["22:22:21","22:22:20"]'/>
+        <Notification name="邸为荣" company="" is-vip="false"  pass-date="2023-12-25" pass-time="22:22:22" today-pass-time='["22:22:21","22:22:20"]'/>
+
+        <view class="container pt-5 pb-3">
+          <view class="row">
+            <view class="col"/>
+            <view class="col text-center text-black-50">
+              <nut-divider> 没有更多了 </nut-divider>
+            </view>
+            <view class="col"/>
+          </view>
         </view>
-        <view class="col"/>
-      </view>
+      </Scroll-View>
     </view>
+  </view>
+
+
+
+
+<!--    <view class="p-4">-->
+<!--    <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">使用电话号码登录</button>-->
+<!--    </view>-->
+
+
+    <!--  <Counter/>-->
+
 
 <!--  <nut-cell title="展示弹出层" is-link @click="show = true"></nut-cell>-->
 <!--  <nut-popup :style="{ padding: '30px 50px' }" v-model:visible="show">正文</nut-popup>-->
@@ -85,7 +113,7 @@ import Notification from "../../components/notification";
 <!--  </span>-->
 <!--  </button>-->
 
-  </view>
+<!--  </view>-->
 </template>