封装card组件统一样式

App.vue

@@ -36,7 +36,7 @@ onLaunch(() => {
 /*每个页面公共css */
 .main {
 	min-height: 95vh;
-    background: linear-gradient(to top, #f2f8ff 0%, #e7f0fd 100%);
+    background: #f5f7fd;
 	padding-top: 20rpx;
 }
 </style>

components/Card/Card.vue

@@ -0,0 +1,38 @@
+<template>
+    <view class="card">
+        <view class="header">
+            <slot name="header"></slot>
+        </view>
+        <view class="default">
+            <slot></slot>
+        </view>
+        <view class="footer">
+            <slot name="footer"></slot>
+        </view>
+    </view>
+</template>
+<style lang="scss" scoped>
+.card {
+    margin: 0 20rpx 25rpx;
+    font-size: 24rpx;
+    overflow: hidden;
+    border-radius: 15rpx;
+    box-shadow: 0 0 6px 1px #cacaca;
+    color: #656565;
+    .header {
+        padding: 20rpx;
+        background-color: #4d80f0;
+        border-radius: 15rpx 15rpx 0 0;
+        color: #fff;
+    }
+    .default {
+        padding: 25rpx 20rpx;
+        font-size: 26rpx;
+    }
+    .footer {
+        padding: 20rpx;
+        border-radius: 0 0 15rpx 15rpx;
+        padding: 0 20rpx 30rpx;
+    }
+}
+</style>

components/LoadMore/LoadMore.vue

@@ -22,5 +22,7 @@ onReachBottom(() => {
 <template>
     <slot></slot>
     <wd-watermark content="wot-design-uni"></wd-watermark>
-    <wd-loadmore :state="loadState" loading-text="数据加载中"/>
+    <wd-loadmore style="background-color: aqua;" custom-class="loadmore" :state="loadState" loading-text="数据加载中"/>
 </template>
+<style>
+</style>

components/index.js

@@ -0,0 +1,9 @@
+import LoadMore from './LoadMore/LoadMore.vue'
+import Card from './Card/Card.vue'
+
+export default {
+    install(Vue) {
+        Vue.component("LoadMore", LoadMore),
+        Vue.component("Card", Card)
+    }
+}

main.js

@@ -1,11 +1,11 @@
 import App from './App'
 import { createSSRApp } from 'vue'
 import pinia from './store'
-import Loadmore from "@/components/Loadmore/Loadmore.vue"
+import myComponents  from "@/components"
 
 export function createApp() {
   const app = createSSRApp(App)
-  app.component("Loadmore", Loadmore)
+  app.use(myComponents )
   app.use(pinia)
   return {
     app