ソースを参照

fix(layout): 修改布局样式

EvilDragon 6 ヶ月 前
コミット
9e9c46149d
3 ファイル変更34 行追加3 行削除
  1. 12 1
      src/layouts/default.vue
  2. 19 2
      src/pages/index/study-tour/index.vue
  3. 3 0
      src/style/index.scss

+ 12 - 1
src/layouts/default.vue

@@ -1,6 +1,8 @@
 <template>
   <wd-config-provider :themeVars="themeVars">
-    <slot />
+    <view class="bg-[#f6f6f6] pb-20 flex-grow">
+      <slot />
+    </view>
     <wd-toast />
     <wd-message-box />
   </wd-config-provider>
@@ -15,3 +17,12 @@ const themeVars: ConfigProviderThemeVars = {
   // buttonPrimaryColor: '#07c160',
 }
 </script>
+<style lang="scss">
+/* stylelint-disable-next-line selector-type-no-unknown */
+layout-default-uni,
+.wot-theme-light {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+</style>

+ 19 - 2
src/pages/index/study-tour/index.vue

@@ -2,7 +2,24 @@
 style:
   navigationBarTitleText: 设计游学
 </route>
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import Card from '@/components/card.vue'
+</script>
 <template>
-  <view></view>
+  <view>
+    <card class="my-6"></card>
+    <card class="my-6"></card>
+    <!-- <card class="my-6"></card>
+    <card class="my-6"></card>
+    <card class="my-6"></card>
+    <card class="my-6"></card>
+    <card class="my-6"></card>
+    <card class="my-6"></card>
+    <card class="my-6"></card>
+    <card class="my-6"></card>
+    <card class="my-6"></card>
+    <card class="my-6"></card>
+    <card class="my-6"></card>
+    <card class="my-6"></card> -->
+  </view>
 </template>

+ 3 - 0
src/style/index.scss

@@ -10,9 +10,12 @@
 
 :root,
 page {
+  display: flex;
+  flex-direction: column;
   // 修改按主题色
   // --wot-color-theme: #37c2bc;
 
   // 修改按钮背景色
   // --wot-button-primary-bg-color: green;
+  min-height: 100%;
 }