diff --git a/App.vue b/App.vue
index 36c1cff..5067e3d 100644
--- a/App.vue
+++ b/App.vue
@@ -15,4 +15,7 @@
 <style lang="scss">
 	/*每个页面公共css */
 	@import "uview-ui/index.scss";
+  page {
+    background-color: #f2f3f7;
+  }
 </style>
diff --git a/component/Tabbar/Tabbar.vue b/component/Tabbar/Tabbar.vue
new file mode 100644
index 0000000..b2140e5
--- /dev/null
+++ b/component/Tabbar/Tabbar.vue
@@ -0,0 +1,142 @@
+<template>
+  <view class="tabbar" @touchmove.stop.prevent="() => {}">
+
+    <view class="tabbar__content safe-area-inset-bottom">
+      <view class="tabbar__content__item"
+            v-for="item in pages"
+            :class="{ 'tabbar__content__item-active': pageUrl === item.pagePath }"
+            :key="item.pagePath"
+            @tap.stop="clickHandler(item)">
+        <view class="icon">
+          <img class="active-bkg" src="/static/tabbar/active-bkg.svg" alt="">
+          <img class="icon__inner" :src="item.iconPath" alt="" >
+        </view>
+        <text class="text">{{ item.text }}</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      pageUrl: '',
+      pages: [
+        {
+          "pagePath": "pages/index/index",
+          "text": "首页",
+          "iconPath": "/static/tabbar/home.svg",
+        },
+        {
+          "pagePath": "pages/order/order",
+          "text": "订单",
+          "iconPath": "/static/tabbar/order.svg",
+        },
+        {
+          "pagePath": "pages/me/me",
+          "text": "我的",
+          "iconPath": "/static/tabbar/me.svg",
+        }
+      ]
+    };
+  },
+  created() {
+    uni.hideTabBar();
+    // 获取引入了u-tabbar页面的路由地址，该地址没有路径前面的"/"
+    let curPages = getCurrentPages();
+    // 页面栈中的最后一个即为项为当前页面，route属性为页面路径
+    this.pageUrl = curPages[curPages.length - 1].route;
+  },
+  methods: {
+    clickHandler (item) {
+      uni.switchTab({
+        url: '/' + item.pagePath
+      })
+    }
+  },
+}
+</script>
+
+<style lang="scss">
+.tabbar {
+
+  &__content {
+    height: 60px;
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+    background: #fff;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    z-index: 998;
+    /* #ifndef APP-NVUE */
+    box-sizing: content-box;
+    /* #endif */
+
+    &__item {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding-bottom: 12rpx;
+
+      .icon {
+        width: 40rpx;
+        height: 40rpx;
+        overflow: hidden;
+        z-index: 2;
+        position: relative;
+
+        .active-bkg {
+          display: none;
+          position: absolute;
+          top: 0;
+          left: 0;
+        }
+
+        &__inner {
+          width: 40rpx;
+          height: 40rpx;
+          transform: translateY(-80rpx);
+          filter: drop-shadow(0 80rpx 0 #333);
+        }
+      }
+      .text {
+        font-size: 24rpx;
+        color: #333;
+        margin-top: 12rpx;
+      }
+
+      &-active {
+        filter: drop-shadow(0 0 4rpx #fff);
+
+        .icon {
+          $activeSize: 94rpx;
+          width: $activeSize;
+          height: $activeSize;
+          //background: linear-gradient(to right, #b5261a, #d05b58 26%, #d66766);
+          //clip-path: polygon(50% 0%, 96% 20%, 96% 80%, 50% 100%, 4% 80%, 4% 20%);
+          .active-bkg {
+            display: inherit;
+            width: $activeSize;
+            height: $activeSize;
+          }
+
+          &__inner {
+            $activeIcon: 50rpx;
+            width: $activeIcon;
+            height: $activeIcon;
+            filter: drop-shadow(calc((#{$activeSize} - #{$activeIcon}) / 2) calc((#{$activeSize} - #{$activeIcon}) / 2 + 80rpx) 0 #fff);
+          }
+        }
+        .text {
+          color: #d05b58;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/pages.json b/pages.json
index 4df6e10..43aae8b 100644
--- a/pages.json
+++ b/pages.json
@@ -8,27 +8,73 @@
 			"style": {
 				"navigationStyle": "custom"
 			}
-		}
-	],
-	"subPackages": [{
-		"root": "package_sub",
-		"pages": [{
-			"path": "pages/index/index",
+		},
+		{
+			"path": "pages/order/order",
+			"style": {
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": true
+			}
+		},
+		{
+			"path": "pages/me/me",
+			"style": {
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": true
+			}
+		},
+		{
+			"path": "component/Tabbar/Tabbar",
 			"style": {
-				"navigationBarTitleText": "分包页面sub_index"
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": true
 			}
-		}]
-	}],
+		}
+	],
+	"subPackages": [
+		{
+			"root": "package_sub",
+			"pages": [
+				{
+					"path": "pages/index/index",
+					"style": {
+						"navigationBarTitleText": "分包页面sub_index"
+					}
+				}
+			]
+		}
+	],
 	"preloadRule": {
-	        "package_sub/pages/index/index": {
-	            "network": "all",
-	            "packages": ["__APP__"]
-	        }
+		"package_sub/pages/index/index": {
+			"network": "all",
+			"packages": [
+				"__APP__"
+			]
+		}
 	},
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
 		"navigationBarTitleText": "uni-app",
 		"navigationBarBackgroundColor": "#F8F8F8",
 		"backgroundColor": "#F8F8F8"
+	},
+	"tabBar": {
+		"list": [
+			{
+				"pagePath": "pages/index/index",
+				"text": "首页"
+			},
+			{
+				"pagePath": "pages/order/order",
+				"text": "订单"
+			},
+			{
+				"pagePath": "pages/me/me",
+				"text": "我的"
+			}
+		],
+		"color": "",
+		"selectedColor": "",
+		"backgroundColor": ""
 	}
 }
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 2ffa4f2..189af8c 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,23 +1,555 @@
 <template>
-	<view class="content">
-	</view>
+  <view>
+    <view class="container" :style="{ 'padding-top': statusBarHeight + 'px' }">
+      <image
+        mode="aspectFill"
+        class="top-bkg"
+        src="/static/index/top-bkg.png"
+        alt=""
+      ></image>
+      <view class="top" :style="{ 'padding-right': menuButtonRight + 'px' }">
+        <view class="position">
+          <u-icon name="map-fill"></u-icon>
+          <text>苏州</text>
+          <u-icon name="arrow-down" size="22"></u-icon>
+        </view>
+        <view class="icon">
+          <image src="/static/index/icon.png" mode="aspectFit" alt=""></image>
+        </view>
+      </view>
+
+      <view class="search">
+        <view class="search__icon">
+          <u-icon name="search" size="50" color="#999"></u-icon>
+        </view>
+        <view class="search__content">
+          <u-input
+            :clearable="false"
+            :value="select.keyword"
+            placeholder="请输入要搜索的内容"
+            height="56"
+            :custom-style="inputStyle"
+            @input="searchInput"
+          ></u-input>
+        </view>
+      </view>
+
+      <view class="swiper">
+        <u-swiper :list="list"></u-swiper>
+      </view>
+
+      <view class="links">
+        <u-grid :col="5" :border="false">
+          <u-grid-item
+            v-for="item in links"
+            :key="item.text"
+            bg-color="transparent"
+          >
+            <image class="icon" :src="item.icon" mode="aspectFit"></image>
+            <view class="text">{{ item.text }}</view>
+          </u-grid-item>
+        </u-grid>
+      </view>
+
+      <view class="img1">
+        <image src="/static/index/ask-png.png" alt="" mode="aspectFit"></image>
+      </view>
+
+      <view class="hospitals">
+        <view class="hospitals__title">热门医院</view>
+
+        <view class="hospitals__content">
+          <view class="hospitals__content__item" v-for="item in 3" :key="item">
+            <view class="left">
+              <image
+                src="https://sstt.115.langye.net/storage/files/172760356266f9236a22e58.png"
+                alt=""
+                mode="aspectFit"
+              ></image>
+            </view>
+            <view class="right">
+              <view class="title">苏州大学附属第一医院</view>
+              <view class="tag">
+                <view class="tag__item">三甲</view>
+                <view class="tag__item">综合医院</view>
+              </view>
+              <view class="description"> 内科、外科、五官科、其他 </view>
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <view class="statistics">
+        <view class="block1">
+          <view class="text1">陪诊团队介绍</view>
+          <view class="text2">让就医体验更美好</view>
+          <view class="order">预约陪诊</view>
+
+          <image class="img" src="/static/index/block1.png" mode="aspectFit" alt=""></image>
+        </view>
+        <view class="block2">
+          <view class="text1">
+            <text>142812</text><text>人次</text>
+          </view>
+          <view class="text2">医院陪护累计</view>
+
+          <image class="img" src="/static/index/block2.png" mode="aspectFit" alt=""></image>
+        </view>
+        <view class="block3">
+          <view class="text1">
+            <text>12456</text><text>人次</text>
+          </view>
+          <view class="text2">居家照护累计</view>
+
+          <image class="img" src="/static/index/block3.png" mode="aspectFit" alt=""></image>
+        </view>
+        <view class="block4">
+          <view class="text1">关于我们</view>
+
+          <image class="img" src="/static/index/block4.png" mode="aspectFit" alt=""></image>
+        </view>
+      </view>
+
+      <view class="honor">
+        <view class="honor__title">
+          <image src="/static/index/honor-title.png" alt="" mode="aspectFit"></image>
+          <text>资质荣誉</text>
+        </view>
+
+        <scroll-view class="scroll-content" scroll-x="true">
+          <image class="images" v-for="i in 5" :key="i" src="https://sstt.115.langye.net/storage/files/172760356266f9236a22e58.png" mode="aspectFit"></image>
+        </scroll-view>
+      </view>
+
+      <image class="bottom" src="/static/index/bottom.png" mode="aspectFit" alt=""></image>
+    </view>
+
+    <tabbar />
+  </view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-
-			}
-		},
-		onLoad() {
-		},
-		methods: {
-
-		}
-	}
+import Tabbar from "@/component/Tabbar/Tabbar.vue";
+export default {
+  components: {
+    Tabbar,
+  },
+  data() {
+    return {
+      statusBarHeight: 40,
+      menuButtonRight: 0,
+
+      inputStyle: {
+        width: "600rpx",
+        fontSize: "28rpx",
+        fontWeight: "500",
+      },
+      select: {
+        keyword: "",
+      },
+      list: [
+        {
+          image: "https://cdn.uviewui.com/uview/swiper/1.jpg",
+          title: "昨夜星辰昨夜风，画楼西畔桂堂东",
+        },
+        {
+          image: "https://cdn.uviewui.com/uview/swiper/2.jpg",
+          title: "身无彩凤双飞翼，心有灵犀一点通",
+        },
+        {
+          image: "https://cdn.uviewui.com/uview/swiper/3.jpg",
+          title: "谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳",
+        },
+      ],
+      links: [
+        {
+          text: "陪诊服务",
+          icon: "/static/index/peizhenfuwu.png",
+        },
+        {
+          text: "就医服务",
+          icon: "/static/index/jiuyifuwu.png",
+        },
+        {
+          text: "居家照护",
+          icon: "/static/index/jujiazhaohu.png",
+        },
+        {
+          text: "医院陪护",
+          icon: "/static/index/yiyuanpeihu.png",
+        },
+        {
+          text: "商城服务",
+          icon: "/static/index/shangchengfuwu.png",
+        },
+      ],
+    };
+  },
+  created() {
+    this.menuButtonRight =
+      uni.getSystemInfoSync().screenWidth -
+      uni.getMenuButtonBoundingClientRect().left +
+      10;
+    this.statusBarHeight = uni.getMenuButtonBoundingClientRect().top;
+  },
+  onLoad() {},
+  methods: {
+    searchInput(e) {},
+  },
+};
 </script>
 
-<style lang="scss">
+<style scoped lang="scss">
+::v-deep .u-swiper-wrap {
+  overflow: inherit !important;
+}
+::v-deep .u-swiper-indicator {
+  bottom: -30rpx !important;
+}
+::v-deep .u-indicator-item-round-active {
+  background: #ca2328 !important;
+}
+
+.container {
+  padding-bottom: calc(76px + 34px + 10px);
+  position: relative;
+
+  .top-bkg {
+    z-index: 0;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    object-fit: contain;
+  }
+
+  .top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 28rpx;
+    position: relative;
+
+    .position {
+      color: #fff;
+      font-size: 30rpx;
+      letter-spacing: 3rpx;
+      font-weight: 500;
+
+      & > text {
+        padding: 0 13rpx;
+      }
+    }
+    .icon {
+      & > image {
+        width: 197rpx;
+        height: 72rpx;
+        object-fit: contain;
+      }
+    }
+  }
+  .search {
+    height: 68rpx;
+    border-radius: 34rpx;
+    background: #ffffff;
+    display: flex;
+    align-items: center;
+    position: relative;
+
+    padding: 20rpx 25rpx;
+    margin: 24rpx 26rpx 0 25rpx;
+
+    &__content {
+      margin-left: 18rpx;
+    }
+
+    &__icon {
+    }
+  }
+
+  .swiper {
+    margin-top: 24rpx;
+    padding: 0 25rpx;
+  }
+
+  .links {
+    padding: 0 25rpx;
+    margin-top: calc(43rpx + 30rpx);
+
+    .icon {
+      height: 59rpx;
+      width: 67rpx;
+    }
+    .text {
+      font-size: 24rpx;
+      line-height: 16rpx;
+      color: #333333;
+      font-weight: 500;
+      margin-top: 26rpx;
+    }
+  }
+
+  .img1 {
+    margin-top: 26rpx;
+    padding: 0 25rpx;
+
+    & > image {
+      width: 700rpx;
+      height: 169rpx;
+    }
+  }
+
+  .hospitals {
+    background: #fff;
+    border-radius: 10rpx;
+    margin: 26rpx 25rpx 0;
+    padding: 28rpx 25rpx;
+
+    &__title {
+      font-size: 28rpx;
+      color: #000000;
+      font-weight: bold;
+      padding: 0 32rpx 28rpx;
+    }
+    &__content {
+      max-height: 516rpx;
+      overflow-y: scroll;
+
+      &__item {
+        display: flex;
+        align-items: center;
+
+        .left {
+          & > image {
+            height: 162rpx;
+            width: 250rpx;
+            border-radius: 6rpx;
+          }
+        }
+        .right {
+          margin-left: 25rpx;
+          .title {
+            font-size: 28rpx;
+            color: #000000;
+            font-weight: bold;
+          }
+          .tag {
+            margin-top: 16rpx;
+            display: flex;
+            flex-wrap: wrap;
+
+            &__item {
+              padding: 5rpx 16rpx;
+              font-size: 22rpx;
+              line-height: 31rpx;
+              font-weight: 500;
+
+              &:nth-child(1) {
+                color: #ca2328;
+                background-color: #faefef;
+              }
+              &:nth-child(2) {
+                color: #f38628;
+                background-color: #fcf3e9;
+              }
+            }
+            .tag__item + .tag__item {
+              margin-left: 12rpx;
+            }
+          }
+          .description {
+            width: 320rpx;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            font-size: 22rpx;
+            color: #929196;
+            font-weight: 500;
+            margin-top: 16rpx;
+          }
+        }
+      }
+    }
+  }
+
+  .statistics {
+    margin: 26rpx 25rpx 0;
+    display: grid;
+    grid-template-columns: 286rpx 182rpx 182rpx;
+    grid-template-rows: 203rpx 203rpx;
+    grid-gap: 25rpx;
+    grid-template-areas:
+      "block1 block2 block3"
+      "block1 block4 block4";
+
+    @for $index from 1 through 4 {
+      .block#{$index} {
+        border-radius: 10rpx;
+        grid-area: block#{$index};
+      }
+    }
+    .block1 {
+      background: linear-gradient(-90deg, #e26165 0%, #c10d12 94%, #c10d12 100%);
+      position: relative;
+
+      .text1 {
+        color: #fff;
+        padding: 74rpx 0 0 34rpx;
+        font-weight: bold;
+        font-size: 28rpx;
+      }
+      .text2 {
+        font-size: 18rpx;
+        color: #ffffff;
+        font-weight: 500;
+        padding: 17rpx 0 0 34rpx;
+      }
+      .order {
+        font-size: 24rpx;
+        color: #c20d12;
+        font-weight: 500;
+        padding: 9rpx 22rpx;
+        background: #fff;
+        border-radius: 20rpx;
+        display: inline-block;
+        margin: 18rpx 0 0 34rpx;
+      }
+      .img {
+        height: 190rpx;
+        width: 152rpx;
+        position: absolute;
+        right: 0;
+        bottom: 10rpx;
+      }
+    }
+    .block2 {
+      position: relative;
+      background: linear-gradient(to bottom, #f3d4d4, #f2edf0);
+
+      .text1 {
+        text-align: center;
+        padding-top: 40rpx;
+
+        text:nth-child(1) {
+          font-size: 36rpx;
+          color: #ca3831;
+          font-weight: bold;
+        }
+        text:nth-child(2) {
+          font-size: 18rpx;
+          color: #929196;
+          font-weight: 500;
+        }
+      }
+      .text2 {
+        font-size: 24rpx;
+        color: #202020;
+        font-weight: 500;
+        padding-top: 20rpx;
+        text-align: center;
+      }
+
+      .img {
+        width: 114rpx;
+        height: 114rpx;
+        position: absolute;
+        right: 10rpx;
+        bottom: 20rpx;
+      }
+    }
+    .block3 {
+      position: relative;
+      background: linear-gradient(to bottom, #f7e9dd, #f4f1f1);
+
+      .text1 {
+        text-align: center;
+        padding-top: 40rpx;
+
+        text:nth-child(1) {
+          font-size: 36rpx;
+          color: #ca3831;
+          font-weight: bold;
+        }
+
+        text:nth-child(2) {
+          font-size: 18rpx;
+          color: #929196;
+          font-weight: 500;
+        }
+      }
+      .text2 {
+        font-size: 24rpx;
+        color: #202020;
+        font-weight: 500;
+        padding-top: 20rpx;
+        text-align: center;
+      }
+      .img {
+        width: 123rpx;
+        height: 127rpx;
+        position: absolute;
+        right: 10rpx;
+        bottom: 20rpx;
+      }
+    }
+    .block4 {
+      position: relative;
+      background: #dee5f9;
+
+      .text1 {
+        font-size: 28rpx;
+        color: #6c70c3;
+        font-weight: bold;
+        position: absolute;
+        left: 39rpx;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+      .img {
+        position: absolute;
+        width: 147rpx;
+        height: 131rpx;
+        top: 50%;
+        transform: translateY(-50%);
+        right: 18rpx;
+      }
+    }
+  }
+
+  .honor {
+    background-color: #ede8dc;
+    padding: 27rpx 40rpx;
+    margin-top: 38rpx;
+
+    &__title {
+      display: flex;
+      align-items: center;
+
+      & > image {
+        width: 31rpx;
+        height: 36rpx;
+      }
+      & > text {
+        font-size: 28rpx;
+        color: #000000;
+        font-weight: bold;
+      }
+    }
+    .scroll-content {
+      margin-top: 27rpx;
+      white-space: nowrap;
+
+      .images {
+        height: 200rpx;
+        width: 311rpx;
+      }
+    }
+  }
 
+  .bottom {
+    margin-top: 35rpx;
+    width: 100vw;
+    height: 92rpx;
+  }
+}
 </style>
diff --git a/pages/me/me.vue b/pages/me/me.vue
new file mode 100644
index 0000000..167ea91
--- /dev/null
+++ b/pages/me/me.vue
@@ -0,0 +1,23 @@
+<template>
+  <view>
+    me
+    <tabbar />
+  </view>
+</template>
+
+<script>
+import Tabbar from "@/component/Tabbar/Tabbar.vue";
+
+export default {
+  components: {
+    Tabbar
+  },
+  data() {
+    return {};
+  }
+}
+</script>
+
+<style lang="scss">
+
+</style>
diff --git a/pages/order/order.vue b/pages/order/order.vue
new file mode 100644
index 0000000..4a60ca6
--- /dev/null
+++ b/pages/order/order.vue
@@ -0,0 +1,24 @@
+<template>
+  <view>
+    order
+    <tabbar />
+
+  </view>
+</template>
+
+<script>
+import Tabbar from "@/component/Tabbar/Tabbar.vue";
+
+export default {
+  components: {
+    Tabbar
+  },
+  data() {
+    return {};
+  }
+}
+</script>
+
+<style lang="scss">
+
+</style>
diff --git a/static/index/ask-png.png b/static/index/ask-png.png
new file mode 100644
index 0000000..e8a11db
Binary files /dev/null and b/static/index/ask-png.png differ
diff --git a/static/index/block1.png b/static/index/block1.png
new file mode 100644
index 0000000..ccff24c
Binary files /dev/null and b/static/index/block1.png differ
diff --git a/static/index/block2.png b/static/index/block2.png
new file mode 100644
index 0000000..564536d
Binary files /dev/null and b/static/index/block2.png differ
diff --git a/static/index/block3.png b/static/index/block3.png
new file mode 100644
index 0000000..902f0f0
Binary files /dev/null and b/static/index/block3.png differ
diff --git a/static/index/block4.png b/static/index/block4.png
new file mode 100644
index 0000000..61e11cd
Binary files /dev/null and b/static/index/block4.png differ
diff --git a/static/index/bottom.png b/static/index/bottom.png
new file mode 100644
index 0000000..9f1a3ec
Binary files /dev/null and b/static/index/bottom.png differ
diff --git a/static/index/honor-title.png b/static/index/honor-title.png
new file mode 100644
index 0000000..710d055
Binary files /dev/null and b/static/index/honor-title.png differ
diff --git a/static/index/icon.png b/static/index/icon.png
new file mode 100644
index 0000000..fa54a9f
Binary files /dev/null and b/static/index/icon.png differ
diff --git a/static/index/jiuyifuwu.png b/static/index/jiuyifuwu.png
new file mode 100644
index 0000000..2f22d63
Binary files /dev/null and b/static/index/jiuyifuwu.png differ
diff --git a/static/index/jujiazhaohu.png b/static/index/jujiazhaohu.png
new file mode 100644
index 0000000..625f1e2
Binary files /dev/null and b/static/index/jujiazhaohu.png differ
diff --git a/static/index/peizhenfuwu.png b/static/index/peizhenfuwu.png
new file mode 100644
index 0000000..3f76ab2
Binary files /dev/null and b/static/index/peizhenfuwu.png differ
diff --git a/static/index/shangchengfuwu.png b/static/index/shangchengfuwu.png
new file mode 100644
index 0000000..5db6902
Binary files /dev/null and b/static/index/shangchengfuwu.png differ
diff --git a/static/index/top-bkg.png b/static/index/top-bkg.png
new file mode 100644
index 0000000..c4ff91d
Binary files /dev/null and b/static/index/top-bkg.png differ
diff --git a/static/index/yiyuanpeihu.png b/static/index/yiyuanpeihu.png
new file mode 100644
index 0000000..d130bb6
Binary files /dev/null and b/static/index/yiyuanpeihu.png differ
diff --git a/static/tabbar/active-bkg.svg b/static/tabbar/active-bkg.svg
new file mode 100644
index 0000000..ed8eede
--- /dev/null
+++ b/static/tabbar/active-bkg.svg
@@ -0,0 +1,10 @@
+<svg t="1731648060944" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="44100" width="200" height="210">
+    <defs>
+        <linearGradient id="red-bkg" x1="0%" y1="50%" x2="100%" y2="50%">
+            <stop offset="0%" stop-color="#b5261a"></stop>
+            <stop offset="26%" stop-color="#cc514f"></stop>
+            <stop offset="100%" stop-color="#d66766"></stop>
+        </linearGradient>
+    </defs>
+    <path stroke="#fff" stroke-width="50" fill="url(#red-bkg)" d="M858.763636 849.454545l-230.4 132.654545c-72.145455 41.890909-160.581818 41.890909-232.727273 0l-230.4-132.654545c-72.145455-41.890909-116.363636-118.690909-116.363636-202.472727l0-267.636364c0-83.781818 44.218182-160.581818 116.363636-202.472727l230.4-132.654545c72.145455-41.890909 160.581818-41.890909 232.727273 0l230.4 132.654545c72.145455 41.890909 116.363636 118.690909 116.363636 202.472727l0 267.636364C977.454545 730.763636 933.236364 807.563636 858.763636 849.454545z" p-id="44101"></path>
+</svg>
diff --git a/static/tabbar/home.svg b/static/tabbar/home.svg
new file mode 100644
index 0000000..aa51b6c
--- /dev/null
+++ b/static/tabbar/home.svg
@@ -0,0 +1 @@
+<svg t="1731634651399" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10244" width="200" height="200"><path d="M947.2 422.4L572.8 115.2c-32-25.6-86.4-25.6-118.4 0L76.8 425.6c-12.8 6.4-16 22.4-9.6 35.2 3.2 12.8 16 19.2 28.8 19.2h32v364.8C128 892.8 163.2 928 211.2 928H416c19.2 0 32-12.8 32-32v-147.2c0-22.4 35.2-44.8 64-44.8 28.8 0 67.2 22.4 67.2 44.8V896c0 19.2 12.8 32 32 32h208c48 0 80-32 80-83.2V480h32c12.8 0 25.6-9.6 28.8-22.4 3.2-12.8 0-25.6-12.8-35.2z" fill="currentColor" p-id="10245"></path></svg>
diff --git a/static/tabbar/me.svg b/static/tabbar/me.svg
new file mode 100644
index 0000000..61a870b
--- /dev/null
+++ b/static/tabbar/me.svg
@@ -0,0 +1 @@
+<svg t="1731635065936" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="40712" width="200" height="200"><path d="M838.122569 958.708971H185.893804c-38.087457 0-69.059865-30.830169-69.059865-68.724221V749.053997a68.741617 68.741617 0 0 1 23.221887-51.500954l190.317557-168.187537c-45.653783-52.625568-68.674079-125.066437-72.684416-164.688853-4.328585-42.827411-7.147794-150.528342 60.452837-225.334071C362.554316 90.206488 427.587472 65.290005 511.428995 65.290005c88.690972 0 156.693762 26.350135 202.12958 78.32181 69.429279 79.395258 60.754712 190.141548 56.4425 222.188428-8.624425 64.035432-35.671431 123.472126-74.496691 166.0652l188.321086 165.628248 0.016373 0.008187a68.781526 68.781526 0 0 1 23.322172 51.602261v140.880611c0.002047 37.894052-30.971385 68.724221-69.041446 68.724221zM511.428995 134.01525c-63.590294 0-111.459534 17.298991-142.29789 51.408856-49.126884 54.362118-46.476521 138.623197-43.053562 172.331927 3.808746 37.684274 30.620391 110.041232 76.107376 145.72085a34.408671 34.408671 0 0 1 13.137205 26.031886 34.317597 34.317597 0 0 1-11.59406 26.753317L185.55816 749.045811v140.938939H838.122569l0.319271-140.888797-216.894865-190.754508a34.372855 34.372855 0 0 1-11.660574-27.021424 34.357506 34.357506 0 0 1 13.540388-26.123984c48.019667-36.551474 72.013127-100.712773 78.455863-148.556431 2.382257-17.659195 11.610432-108.699678-40.050158-167.79254-31.813566-36.384675-82.417081-54.831816-150.403499-54.831816z" fill="currentColor" p-id="40713"></path><path d="M554.957371 838.443887h-85.905532V666.632823c0-18.977213 15.384385-34.362622 34.362622-34.362622h17.181311c18.978237 0 34.362622 15.384385 34.362622 34.362622v171.811064z" fill="currentColor" p-id="40714"></path></svg>
diff --git a/static/tabbar/order.svg b/static/tabbar/order.svg
new file mode 100644
index 0000000..6812958
--- /dev/null
+++ b/static/tabbar/order.svg
@@ -0,0 +1 @@
+<svg t="1731634840348" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19958" width="200" height="200"><path d="M821.312 256a32 32 0 0 1 64 0v565.312c0 64.832-52.48 117.376-117.312 117.376H256a117.312 117.312 0 0 1-117.312-117.376V202.688c0-64.832 52.48-117.376 117.312-117.376h597.312a32 32 0 1 1 0 64H256a53.312 53.312 0 0 0-53.312 53.376v618.624a53.312 53.312 0 0 0 53.312 53.376h512a53.312 53.312 0 0 0 53.312-53.376V256z m-480 181.312a32 32 0 1 1 0-64h341.376a32 32 0 0 1 0 64H341.312z m0 170.688a32 32 0 1 1 0-64h213.376a32 32 0 1 1 0 64H341.312z" fill="currentColor" p-id="19959"></path></svg>