diff --git a/CHANGELOG.md b/CHANGELOG.md
index fffdf86..6640250 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,12 +10,24 @@
  pinch | alloy finger实现图片的pinch放大缩小 | [de01343](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/de01343)
 
 
+### 🎨 代码样式
+范围|描述|commitId
+--|--|--
+ - | 组件新建 | [89c0035](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/89c0035)
+
+
 ### 🐛 Bug 修复
 范围|描述|commitId
 --|--|--
  - | 修改main | [749ae9a](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/749ae9a)
 
 
+### 🔨 代码重构
+范围|描述|commitId
+--|--|--
+ template | eslint prettier sass uview tailwindcss | [9c966a1](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/9c966a1)
+
+
 ### chore
 范围|描述|commitId
 --|--|--
@@ -35,9 +47,3 @@
 --|--|--
  - | README.md | [ab0eb05](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/ab0eb05)
 
-
-### 🔨 代码重构
-范围|描述|commitId
---|--|--
- template | eslint prettier sass uview tailwindcss | [9c966a1](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/9c966a1)
-
diff --git a/src/components/Globals/index.vue b/src/components/Globals/index.vue
new file mode 100644
index 0000000..cd00b56
--- /dev/null
+++ b/src/components/Globals/index.vue
@@ -0,0 +1,47 @@
+<!--
+ * @Author: aBin
+ * @email: binbin0314@126.com
+ * @Date: 2021-07-19 10:52:05
+ * @LastEditors: aBin
+ * @LastEditTime: 2021-07-19 11:09:23
+-->
+<template>
+  <view>
+    <u-card margin="0" :show-head="false" :show-foot="false">
+      <view slot="body">
+        <view class="u-flex u-col-between p-0">
+          <view class="u-body-item-title u-line-2">瓶身描绘的牡丹一如你初妆，冉冉檀香透过窗心事我了然，宣纸上走笔至此搁一半</view>
+        </view>
+      </view>
+    </u-card>
+  </view>
+</template>
+<script>
+export default {
+  name: 'Global',
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.u-card-wrap {
+  background-color: $u-bg-color;
+  padding: 1px;
+}
+
+.u-body-item {
+  font-size: 32rpx;
+  color: #333;
+  padding: 20rpx 10rpx;
+}
+
+.u-body-item image {
+  width: 120rpx;
+  flex: 0 0 120rpx;
+  height: 120rpx;
+  border-radius: 8rpx;
+  margin-left: 12rpx;
+}
+</style>
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index 291b330..de31489 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -3,10 +3,11 @@
  * @email: binbin0314@126.com
  * @Date: 2021-07-19 10:09:22
  * @LastEditors: aBin
- * @LastEditTime: 2021-07-19 10:25:48
+ * @LastEditTime: 2021-07-19 11:05:42
 -->
 <template>
-  <view class="container p-4">
+  <view class="container p-4 bg-gray-100">
+    <Globals />
     <!-- <view class="mt-5">
       <u-button type="primary" size="default" @click="$u.route('/pages/plugin-test/plugin-test')">iframe 验证</u-button>
     </view>
@@ -20,7 +21,9 @@
 </template>
 
 <script>
+import Globals from 'components/Globals/index.vue';
 export default {
+  components: { Globals },
   data() {
     return { title: 'Hello' };
   },