From 93bf65eb65fed40e16521ae53af58ef8b7757f7d Mon Sep 17 00:00:00 2001
From: duanshuwen <duanshuwen@gogpay.cn>
Date: Tue, 14 Oct 2025 22:15:54 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A6=96=E9=A1=B5=E6=AC=A2=E8=BF=8E?=
 =?UTF-8?q?=E8=AF=AD=E7=BB=84=E4=BB=B6=E5=B8=83=E5=B1=80=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/chat/ChatMainList/index.vue    | 241 ++++++++----------
 .../chat/ChatMainList/styles/index.scss       | 108 +-------
 .../components/chat/ChatMoreTips/index.vue    |  17 +-
 .../chat/ChatMoreTips/styles/index.scss       |  35 +--
 .../components/chat/ChatTopBgImg/index.vue    |   9 -
 .../chat/ChatTopBgImg/styles/index.scss       |  11 -
 .../components/chat/ChatTopWelcome/index.vue  |  76 +++---
 .../chat/ChatTopWelcome/styles/index.scss     |  29 +--
 src/pages/index/index.vue                     |   2 +-
 src/static/scss/flex.scss                     |  16 ++
 src/static/scss/font-family.scss              |   4 +
 src/static/scss/index.scss                    |   2 +-
 src/static/scss/padding.scss                  |  12 +
 .../{white-scape.scss => white-space.scss}    |   2 +-
 14 files changed, 212 insertions(+), 352 deletions(-)
 delete mode 100644 src/pages/index/components/chat/ChatTopBgImg/index.vue
 delete mode 100644 src/pages/index/components/chat/ChatTopBgImg/styles/index.scss
 rename src/static/scss/{white-scape.scss => white-space.scss} (53%)

diff --git a/src/pages/index/components/chat/ChatMainList/index.vue b/src/pages/index/components/chat/ChatMainList/index.vue
index 2309fab..afea69a 100644
--- a/src/pages/index/components/chat/ChatMainList/index.vue
+++ b/src/pages/index/components/chat/ChatMainList/index.vue
@@ -1,145 +1,122 @@
 <template>
-  <view class="chat-container" @touchend="handleTouchEnd">
-    <!-- 顶部的背景 -->
-    <ChatTopBgImg class="chat-container-bg"></ChatTopBgImg>
+  <view class="flex flex-col h-screen" @touchend="handleTouchEnd">
+    <!-- 顶部自定义导航栏 -->
+    <view class="header" :style="{ paddingTop: statusBarHeight + 'px' }">
+      <ChatTopNavBar @openDrawer="openDrawer" />
+    </view>
+
+    <!-- 消息列表（可滚动区域） -->
+    <scroll-view
+      class="main flex-full"
+      scroll-y
+      :scroll-top="scrollTop"
+      :scroll-with-animation="true"
+      @scroll="handleScroll"
+      @scrolltolower="handleScrollToLower"
+    >
+      <!-- welcome栏 -->
+      <ChatTopWelcome :mainPageDataModel="mainPageDataModel" />
 
-    <view class="chat-content">
-      <!-- 顶部自定义导航栏 -->
       <view
-        class="nav-bar-container"
-        :style="{
-          paddingTop: statusBarHeight + 'px',
-        }"
+        class="area-msg-list-content"
+        v-for="item in chatMsgList"
+        :key="item.msgId"
+        :id="item.msgId"
       >
-        <ChatTopNavBar @openDrawer="openDrawer"></ChatTopNavBar>
-      </view>
+        <template v-if="item.msgType === MessageRole.AI">
+          <ChatCardAI
+            class="message-item-ai"
+            :key="`ai-${item.msgId}-${item.msg ? item.msg.length : 0}`"
+            :text="item.msg || ''"
+            :isLoading="item.isLoading"
+          >
+            <template #content v-if="item.toolCall">
+              <QuickBookingComponent
+                v-if="item.toolCall.componentName === CompName.quickBookingCard"
+              />
+              <DiscoveryCardComponent
+                v-else-if="
+                  item.toolCall.componentName === CompName.discoveryCard
+                "
+              />
+              <CreateServiceOrder
+                v-else-if="
+                  item.toolCall.componentName === CompName.createWorkOrderCard
+                "
+              />
+              <Feedback
+                v-else-if="
+                  item.toolCall.componentName === CompName.feedbackCard
+                "
+                :toolCall="item.toolCall"
+              />
+              <DetailCardCompontent
+                v-else-if="
+                  item.toolCall.componentName ===
+                  CompName.pictureAndCommodityCard
+                "
+                :toolCall="item.toolCall"
+              />
+              <AddCarCrad
+                v-else-if="
+                  item.toolCall.componentName === CompName.enterLicensePlateCard
+                "
+                :toolCall="item.toolCall"
+              />
+            </template>
 
-      <!-- 消息列表（可滚动区域） -->
-      <scroll-view
-        :scroll-top="scrollTop"
-        scroll-y
-        :scroll-with-animation="true"
-        class="area-msg-list"
-        @scroll="handleScroll"
-        @scrolltolower="handleScrollToLower"
-      >
-        <!-- welcome栏 -->
-        <ChatTopWelcome
-          class="chat-container-top-bannar"
-          :initPageImages="mainPageDataModel.initPageImages"
-          :welcomeContent="mainPageDataModel.welcomeContent"
-        >
-        </ChatTopWelcome>
-
-        <view
-          class="area-msg-list-content"
-          v-for="item in chatMsgList"
-          :key="item.msgId"
-          :id="item.msgId"
-        >
-          <template v-if="item.msgType === MessageRole.AI">
-            <ChatCardAI
-              class="message-item-ai"
-              :key="`ai-${item.msgId}-${item.msg ? item.msg.length : 0}`"
-              :text="item.msg || ''"
-              :isLoading="item.isLoading"
-            >
-              <template #content v-if="item.toolCall">
-                <QuickBookingComponent
-                  v-if="
-                    item.toolCall.componentName === CompName.quickBookingCard
-                  "
-                />
-                <DiscoveryCardComponent
-                  v-else-if="
-                    item.toolCall.componentName === CompName.discoveryCard
-                  "
-                />
-                <CreateServiceOrder
-                  v-else-if="
-                    item.toolCall.componentName === CompName.createWorkOrderCard
-                  "
-                />
-                <Feedback
-                  v-else-if="
-                    item.toolCall.componentName === CompName.feedbackCard
-                  "
-                  :toolCall="item.toolCall"
-                />
-                <DetailCardCompontent
-                  v-else-if="
-                    item.toolCall.componentName ===
-                    CompName.pictureAndCommodityCard
-                  "
-                  :toolCall="item.toolCall"
-                />
-                <AddCarCrad
-                  v-else-if="
-                    item.toolCall.componentName ===
-                    CompName.enterLicensePlateCard
-                  "
-                  :toolCall="item.toolCall"
-                />
-              </template>
-
-              <template #footer>
-                <!-- 这个是底部 -->
-                <AttachListComponent
-                  v-if="item.question"
-                  :question="item.question"
-                  @replySent="handleReply"
-                />
-              </template>
-            </ChatCardAI>
-          </template>
-
-          <template v-else-if="item.msgType === MessageRole.ME">
-            <ChatCardMine class="message-item-mine" :text="item.msg">
-            </ChatCardMine>
-          </template>
-
-          <template v-else>
-            <ChatCardOther class="message-item-other" :text="item.msg">
-              <ChatMoreTips
+            <template #footer>
+              <!-- 这个是底部 -->
+              <AttachListComponent
+                v-if="item.question"
+                :question="item.question"
                 @replySent="handleReply"
-                :itemList="mainPageDataModel.guideWords"
               />
+            </template>
+          </ChatCardAI>
+        </template>
 
-              <ActivityListComponent
-                v-if="
-                  mainPageDataModel.activityList &&
-                  mainPageDataModel.activityList.length > 0
-                "
-                :activityList="mainPageDataModel.activityList"
-              />
+        <template v-else-if="item.msgType === MessageRole.ME">
+          <ChatCardMine class="message-item-mine" :text="item.msg">
+          </ChatCardMine>
+        </template>
 
-              <RecommendPostsComponent
-                v-if="
-                  mainPageDataModel.recommendTheme &&
-                  mainPageDataModel.recommendTheme.length > 0
-                "
-                :recommendThemeList="mainPageDataModel.recommendTheme"
-              />
-            </ChatCardOther>
-          </template>
-        </view>
-      </scroll-view>
+        <template v-else>
+          <ChatCardOther class="message-item-other" :text="item.msg">
+            <ActivityListComponent
+              v-if="
+                mainPageDataModel.activityList &&
+                mainPageDataModel.activityList.length > 0
+              "
+              :activityList="mainPageDataModel.activityList"
+            />
 
-      <!-- 输入框区域 -->
-      <view class="footer-area">
-        <ChatQuickAccess @replySent="handleReplyInstruct" />
-        <ChatInputArea
-          ref="inputAreaRef"
-          v-model="inputMessage"
-          :holdKeyboard="holdKeyboard"
-          :is-session-active="isSessionActive"
-          :stop-request="stopRequest"
-          @send="sendMessageAction"
-          @noHideKeyboard="handleNoHideKeyboard"
-          @keyboardShow="handleKeyboardShow"
-          @keyboardHide="handleKeyboardHide"
-        />
+            <RecommendPostsComponent
+              v-if="
+                mainPageDataModel.recommendTheme &&
+                mainPageDataModel.recommendTheme.length > 0
+              "
+              :recommendThemeList="mainPageDataModel.recommendTheme"
+            />
+          </ChatCardOther>
+        </template>
       </view>
+    </scroll-view>
+
+    <!-- 输入框区域 -->
+    <view class="footer">
+      <ChatQuickAccess @replySent="handleReplyInstruct" />
+      <ChatInputArea
+        ref="inputAreaRef"
+        v-model="inputMessage"
+        :holdKeyboard="holdKeyboard"
+        :is-session-active="isSessionActive"
+        :stop-request="stopRequest"
+        @send="sendMessageAction"
+        @noHideKeyboard="handleNoHideKeyboard"
+        @keyboardShow="handleKeyboardShow"
+        @keyboardHide="handleKeyboardHide"
+      />
     </view>
   </view>
 </template>
@@ -157,13 +134,11 @@ import {
 import { WSS_URL } from "@/request/base/baseUrl";
 import { MessageRole, MessageType, CompName } from "@/model/ChatModel";
 import ChatTopWelcome from "../ChatTopWelcome/index.vue";
-import ChatTopBgImg from "../ChatTopBgImg/index.vue";
 import ChatTopNavBar from "../ChatTopNavBar/index.vue";
 import ChatCardAI from "../ChatCardAi/index.vue";
 import ChatCardMine from "../ChatCardMine/index.vue";
 import ChatCardOther from "../ChatCardOther/index.vue";
 import ChatQuickAccess from "../ChatQuickAccess/index.vue";
-import ChatMoreTips from "../ChatMoreTips/index.vue";
 import ChatInputArea from "../ChatInputArea/index.vue";
 import QuickBookingComponent from "../../module/QuickBookingComponent/index.vue";
 import DiscoveryCardComponent from "../../module/DiscoveryCardComponent/index.vue";
diff --git a/src/pages/index/components/chat/ChatMainList/styles/index.scss b/src/pages/index/components/chat/ChatMainList/styles/index.scss
index fa0f759..79ea66d 100644
--- a/src/pages/index/components/chat/ChatMainList/styles/index.scss
+++ b/src/pages/index/components/chat/ChatMainList/styles/index.scss
@@ -1,106 +1,4 @@
-.chat-container {
-  width: 100vw;
-  height: 100vh;
-  background-color: #e9f3f7;
-
-  display: flex;
-  flex-direction: column;
-  overflow: hidden !important;
-  position: relative;
-  /* 确保在键盘弹起时布局正确 */
-  box-sizing: border-box;
-
-  .chat-container-bg {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 0;
-    height: 270px;
-    background: linear-gradient(180deg, #42adf9 0%, #6cd1ff 51%, #e9f3f7 99%);
-  }
-
-  .chat-content {
-    width: 100vw;
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    min-height: 0;
-    z-index: 1;
-    overflow: hidden;
-  }
-
-  .chat-container-top-bannar {
-    width: 100vw;
-    flex-shrink: 0;
-    touch-action: none;
-  }
-
-  .area-msg-list {
-    width: 100vw;
-    flex: 1;
-    overflow-y: auto;
-    min-height: 0;
-    height: 0;
-    padding: 4px 0 0;
-    overscroll-behavior: contain; /* 阻止滚动穿透 */
-    -webkit-overflow-scrolling: touch;
-
-    display: flex;
-    flex-direction: column;
-
-    .message-item-ai {
-      display: flex;
-      justify-content: flex-start;
-    }
-
-    .message-item-mine {
-      display: flex;
-      justify-content: flex-end;
-    }
-
-    .message-item-other {
-      display: flex;
-      justify-content: center;
-    }
-  }
-}
-
-.footer-area {
-  width: 100vw;
-  flex-shrink: 0;
-  padding: 4px 0 20px 0; /* 直接设置20px底部安全距离 */
-  background-color: #e9f3f7;
-  touch-action: pan-x;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: fit-content;
-  /* 安卓键盘适配 - 使用相对定位配合adjustPan */
-  position: relative;
-  z-index: 1;
-  transition: padding-bottom 0.3s ease;
-  /* 确保输入区域始终可见 */
-  // transform: translateZ(0);
-  // -webkit-transform: translateZ(0);
-}
-
-// 打字机光标闪烁动画
-.typing-cursor {
-  display: inline-block;
-  color: #42adf9;
-  font-weight: bold;
-  font-size: 1.2em;
-  animation: blink 1s infinite;
-  margin-left: 2px;
-}
-
-@keyframes blink {
-  0%,
-  50% {
-    opacity: 1;
-  }
-  51%,
-  100% {
-    opacity: 0;
-  }
+.footer {
+  height: 118px;
+  // touch-action: pan-x;
 }
diff --git a/src/pages/index/components/chat/ChatMoreTips/index.vue b/src/pages/index/components/chat/ChatMoreTips/index.vue
index 825fd2b..4b2c3ee 100644
--- a/src/pages/index/components/chat/ChatMoreTips/index.vue
+++ b/src/pages/index/components/chat/ChatMoreTips/index.vue
@@ -1,17 +1,17 @@
 <template>
-  <view class="more-tips">
-    <view class="more-tips-scroll">
+  <view class="more-tips bg-white border-box">
+    <view class="font-size-0 whitesspace-nowrap scroll-x">
       <view
-        class="more-tips-item"
-        v-for="(item, index) in itemList"
+        class="more-tips-item border-box inline-block mr-8"
+        v-for="(item, index) in guideWords"
         :key="index"
       >
-        <view
-          class="more-tips-item-title font-500 font-size-12 line-height-24 text-center"
+        <text
+          class="font-500 font-size-12 line-height-24 text-center"
           @click="sendReply(item)"
         >
           {{ item }}
-        </view>
+        </text>
       </view>
     </view>
   </view>
@@ -19,10 +19,11 @@
 
 <script setup>
 import { defineProps } from "vue";
+
 const emits = defineEmits(["replySent"]);
 
 defineProps({
-  itemList: {
+  guideWords: {
     type: Array,
     default: [
       "定温泉票",
diff --git a/src/pages/index/components/chat/ChatMoreTips/styles/index.scss b/src/pages/index/components/chat/ChatMoreTips/styles/index.scss
index f42f31c..8559b23 100644
--- a/src/pages/index/components/chat/ChatMoreTips/styles/index.scss
+++ b/src/pages/index/components/chat/ChatMoreTips/styles/index.scss
@@ -1,34 +1,15 @@
 .more-tips {
-  width: 100%;
-
-  &-scroll {
-    display: flex;
-    flex-direction: row;
-    overflow-x: auto;
-    white-space: nowrap;
-    -webkit-overflow-scrolling: touch;
-    padding: 8px 0;
-    box-sizing: border-box;
-  }
+  box-shadow: 0px -1px 10px 0px rgba(0, 0, 0, 0.03);
+  border-radius: 0px 0px 20px 20px;
+  padding: 12px 0 12px 12px;
 
   .more-tips-item {
-    border-radius: 8px;
-    margin: 0 4px;
-    box-shadow: 0 2px 5px 0px rgba(0, 0, 0, 0.1);
-    background-color: $uni-bg-color;
-    padding: 2px 12px;
-    display: flex;
-    flex-direction: column;
-    flex-shrink: 0;
-    white-space: nowrap;
-    position: relative;
-    &:first-child {
-      margin-left: 0;
-    }
+    background: #f7f7f7;
+    border-radius: 5px;
+    padding: 6px 8px;
 
-    .more-tips-item-title {
-      color: #00a6ff;
-      white-space: nowrap;
+    &:last-child {
+      margin-right: 12px;
     }
   }
 }
diff --git a/src/pages/index/components/chat/ChatTopBgImg/index.vue b/src/pages/index/components/chat/ChatTopBgImg/index.vue
deleted file mode 100644
index 6cf812c..0000000
--- a/src/pages/index/components/chat/ChatTopBgImg/index.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-  <view class="top-bg"> </view>
-</template>
-
-<script></script>
-
-<style lang="scss" scoped>
-@import "./styles/index.scss";
-</style>
diff --git a/src/pages/index/components/chat/ChatTopBgImg/styles/index.scss b/src/pages/index/components/chat/ChatTopBgImg/styles/index.scss
deleted file mode 100644
index 67f3b5b..0000000
--- a/src/pages/index/components/chat/ChatTopBgImg/styles/index.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.top-bg {
-  width: 100%;
-  height: 270px;
-  overflow: hidden;
-  background: linear-gradient(180deg, #42adf9 0%, #6cd1ff 51%, #e9f3f7 99%);
-
-  .top-bg-img {
-    width: 100%;
-    height: 100%;
-  }
-}
diff --git a/src/pages/index/components/chat/ChatTopWelcome/index.vue b/src/pages/index/components/chat/ChatTopWelcome/index.vue
index e219f05..bd435e6 100644
--- a/src/pages/index/components/chat/ChatTopWelcome/index.vue
+++ b/src/pages/index/components/chat/ChatTopWelcome/index.vue
@@ -1,51 +1,59 @@
 <template>
-  <view class="top-bg-content">
-    <view class="top-item">
-      <!-- :style="backgroundStyle" -->
-      <image
-        class="top-item-left"
-        :src="initPageImages.welcomeImageUrl"
-        mode="aspectFit"
-      ></image>
-      <image
-        class="top-item-right"
-        :src="initPageImages.logoImageUrl"
-        mode="aspectFit"
-      ></image>
+  <view class="welcome-content border-box p-20">
+    <view class="wrap rounded-20">
+      <view
+        class="flex flex-items-center flex-justify-between border-box pl-12 pr-12"
+      >
+        <image
+          class="ip relative"
+          :src="initPageImages.logoImageUrl"
+          mode="aspectFit"
+        />
+        <view
+          class="welcome-text font-size-14 font-500 font-family-misans-vf color-171717 line-height-24"
+        >
+          {{ welcomeContent }}
+        </view>
+      </view>
+
+      <ChatMoreTips :guideWords="guideWords" @replySent="handleReply" />
     </view>
-    <ChatCardAI v-if="welcomeContent.length" :text="welcomeContent" />
   </view>
 </template>
 
 <script setup>
 import { defineProps, computed } from "vue";
-import ChatCardAI from "../ChatCardAi/index.vue";
+import ChatMoreTips from "../ChatMoreTips/index.vue";
 
 const props = defineProps({
-  initPageImages: {
+  mainPageDataModel: {
     type: Object,
-    default: {
-      backgroundImageUrl: "",
-      logoImageUrl: "",
-      welcomeImageUrl: "",
+    default: () => {
+      return {
+        initPageImages: {
+          backgroundImageUrl: "",
+          logoImageUrl: "",
+          welcomeImageUrl: "",
+        },
+        welcomeContent:
+          "查信息、预定下单、探索玩法、呼叫服务、我通通可以满足，快试试问我问题吧!",
+        guideWords: [
+          "定温泉票",
+          "定酒店",
+          "优惠套餐",
+          "亲子玩法",
+          "了解交通",
+          "看看酒店",
+          "看看美食",
+        ],
+      };
     },
   },
-  welcomeContent: {
-    type: String,
-    default:
-      "查信息、预定下单、探索玩法、呼叫服务、我通通可以满足，快试试问我问题吧!",
-  },
 });
 
-// 计算背景样式
-const backgroundStyle = computed(() => {
-  return {
-    backgroundImage: `url(${props.initPageImages.backgroundImageUrl})`,
-    backgroundSize: "cover",
-    backgroundPosition: "center",
-    backgroundRepeat: "no-repeat",
-  };
-});
+const initPageImages = computed(() => props.mainPageDataModel.initPageImages);
+const welcomeContent = computed(() => props.mainPageDataModel.welcomeContent);
+const guideWords = computed(() => props.mainPageDataModel.guideWords);
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/pages/index/components/chat/ChatTopWelcome/styles/index.scss b/src/pages/index/components/chat/ChatTopWelcome/styles/index.scss
index 4c0c23a..7c8ba5c 100644
--- a/src/pages/index/components/chat/ChatTopWelcome/styles/index.scss
+++ b/src/pages/index/components/chat/ChatTopWelcome/styles/index.scss
@@ -1,25 +1,10 @@
-.top-bg-content {
-  display: flex;
-  justify-content: flex-end;
-  align-items: stretch;
-  flex-direction: column;
+.wrap {
+  background-color: rgba(255, 255, 255, 0.5);
 }
 
-.top-item {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0 32px;
-  margin-bottom: -6px;
-}
-
-.top-item-left {
-  width: 118px;
-  height: 52px;
-}
-
-.top-item-right {
-  width: 130px;
-  height: 130px;
+.ip {
+  flex: 0 0 123px;
+  width: 123px;
+  height: 166px;
+  margin-top: -20px;
 }
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index 6ff8279..e724bff 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <view class="w-full h-screen">
+  <view class="w-full h-screen bg-liner">
     <ChatMainList />
   </view>
 
diff --git a/src/static/scss/flex.scss b/src/static/scss/flex.scss
index 5eccd68..9ca5a38 100644
--- a/src/static/scss/flex.scss
+++ b/src/static/scss/flex.scss
@@ -11,6 +11,10 @@
   justify-content: center;
 }
 
+.flex-justify-between {
+  justify-content: space-between;
+}
+
 .flex-col {
   flex-direction: column;
 }
@@ -18,3 +22,15 @@
 .flex-wrap {
   flex-wrap: wrap;
 }
+
+.flex-nowrap {
+  flex-wrap: nowrap;
+}
+
+.flex-full {
+  flex: 1;
+}
+
+.flex-shrink-0 {
+  flex-shrink: 0;
+}
diff --git a/src/static/scss/font-family.scss b/src/static/scss/font-family.scss
index 5ccbf02..9e75b19 100644
--- a/src/static/scss/font-family.scss
+++ b/src/static/scss/font-family.scss
@@ -2,3 +2,7 @@
 .font-family-sans-serif {
   font-family: sans-serif;
 }
+
+.font-family-misans-vf {
+  font-family: MiSans VF, MiSans VF;
+}
diff --git a/src/static/scss/index.scss b/src/static/scss/index.scss
index 12ed637..2bcb00d 100644
--- a/src/static/scss/index.scss
+++ b/src/static/scss/index.scss
@@ -18,4 +18,4 @@
 @import "./overflow.scss";
 @import "./width.scss";
 @import "./z-index.scss";
-@import "./white-scape.scss";
+@import "./white-space.scss";
diff --git a/src/static/scss/padding.scss b/src/static/scss/padding.scss
index 0bdd3fa..31a5c99 100644
--- a/src/static/scss/padding.scss
+++ b/src/static/scss/padding.scss
@@ -31,6 +31,14 @@
   padding-right: 16px;
 }
 
+.p-20 {
+  padding: 20px;
+}
+
+.pt-20 {
+  padding-top: 20px;
+}
+
 .pl-20 {
   padding-left: 20px;
 }
@@ -38,3 +46,7 @@
 .pr-20 {
   padding-right: 20px;
 }
+
+.pb-20 {
+  padding-bottom: 20px;
+}
diff --git a/src/static/scss/white-scape.scss b/src/static/scss/white-space.scss
similarity index 53%
rename from src/static/scss/white-scape.scss
rename to src/static/scss/white-space.scss
index 0d15c86..8817748 100644
--- a/src/static/scss/white-scape.scss
+++ b/src/static/scss/white-space.scss
@@ -1,3 +1,3 @@
-.whitescape-nowrap {
+.whitesspace-nowrap {
   white-space: nowrap;
 }