diff --git a/pages.json b/pages.json
index ee89adb..7bb09b4 100644
--- a/pages.json
+++ b/pages.json
@@ -446,6 +446,13 @@
 						"navigationBarTitleText": "人气推荐",
 						"navigationStyle": "custom"
 
+					}
+				},{
+					"path": "lives",
+					"style": {
+						"navigationStyle": "custom",
+						"navigationBarTextStyle": "white"
+
 					}
 				}
 
diff --git a/pages/promotion/lives.vue b/pages/promotion/lives.vue
new file mode 100644
index 0000000..8ecd4c2
--- /dev/null
+++ b/pages/promotion/lives.vue
@@ -0,0 +1,219 @@
+<template>
+  <div class="box">
+    <u-navbar class="navbar">
+      <view class="slot-wrap">
+        <u-search placeholder="搜索直播间" v-model="keyword"></u-search>
+      </view>
+    </u-navbar>
+    <!-- 轮播图 -->
+    <u-swiper class="swiper" :effect3d="true" :list="swiperImg">
+
+    </u-swiper>
+    <u-tabs :is-scroll="false" :active-color="activeColor" inactive-color="#606266" ref="tabs" :list="tabs"></u-tabs>
+
+    <div class="wrapper">
+      <!-- 直播中 全部 直播回放 -->
+      <div class="live-list">
+        <div class="live-cover-img">
+          <div class="tips">
+            <div class="live-box">
+              <image class="live-gif" src="./static/live.gif"></image>
+            </div>
+            <span> 直播中</span>
+          </div>
+          <div class="bg"></div>
+          <image class="zan" src="./static/zan.gif" mode="" />
+          <u-image width="326" height="354" src="https://lilishop-oss.oss-cn-beijing.aliyuncs.com/fe5b8167b0264c53836d08a6a7003cf0.jpeg" />
+        </div>
+        <div class="live-goods">
+          <image src="./static/live.png" class="live-icon" mode="" />
+          <div class="live-goods-name">
+            甄选家电好物，尽在超值5月
+          </div>
+          <div class="live-store">
+            <u-image shape="circle" width="50" height="50" src="https://gfs14.gomein.net.cn/T11wElB7Cv1RCvBVdK_360.jpg?v=1" />
+            <span class="wes">lilishop</span>
+          </div>
+          <div class="live-goods-list">
+            <div class="live-goods-item">
+              <u-image border-radius="20" height="140"></u-image>
+            </div>
+            <div class="live-goods-item">
+              <u-image border-radius="20" height="140"></u-image>
+            </div>
+
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      activeColor: this.$lightColor,
+
+      // 标签栏
+      tabs: [
+        {
+          name: "直播中",
+        },
+        {
+          name: "全部",
+        },
+
+        {
+          name: "回放",
+        },
+      ],
+      // 导航栏的配置
+      background: {
+        background: "#ff9f28",
+      },
+      //轮播图滚动的图片
+      swiperImg: [
+        {
+          image:
+            "https://lilishop-oss.oss-cn-beijing.aliyuncs.com/8e33ab68ef734558bdc158d6b1b1451f.png",
+        },
+        {
+          image:
+            "https://lilishop-oss.oss-cn-beijing.aliyuncs.com/5ec999c942374e849d085071b4d20a19.jpeg",
+        },
+        {
+          image:
+            "https://lilishop-oss.oss-cn-beijing.aliyuncs.com/48d789cb9c864b7b87c1c0f70996c3e8.jpeg",
+        },
+      ],
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.slot-wrap {
+  display: flex;
+  align-items: center;
+
+  /* 如果您想让slot内容占满整个导航栏的宽度 */
+  flex: 1;
+  /* 如果您想让slot内容与导航栏左右有空隙 */
+  /* padding: 0 30rpx; */
+}
+.wrapper {
+  padding: 0 24rpx;
+}
+.live-list {
+  display: flex;
+  overflow: hidden;
+  border-radius: 20rpx;
+  flex-wrap: wrap;
+  background: #fff;
+
+  margin: 20rpx 0;
+}
+.live-cover-img {
+  position: relative;
+}
+
+.live-goods {
+  position: relative;
+  flex: 1;
+  padding: 16rpx 24rpx 24rpx;
+}
+.live-goods-name {
+  height: 84rpx;
+  font-weight: bold;
+  font-size: 30rpx;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+.live-store {
+  display: flex;
+  align-items: center;
+  margin: 20rpx 0;
+  overflow: hidden;
+  width: calc(100% - 50rpx);
+  > span {
+    color: #999;
+    margin-left: 20rpx;
+  }
+}
+.live-gif {
+  width: 20rpx;
+  height: 20rpx;
+}
+.live-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  width: 40rpx;
+  margin-right: 10rpx;
+  height: 40rpx;
+  background: linear-gradient(90deg, #ff6b35, #ff9f28, #ffcc03);
+}
+.live-goods-list {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  > .live-goods-item {
+    flex: 1;
+  }
+  > .live-goods-item:nth-of-type(1) {
+    padding-right: 38rpx;
+  }
+}
+.live-icon,
+.zan {
+  position: absolute;
+  width: 80rpx;
+  height: 80rpx;
+  z-index: 9;
+}
+.tips {
+  display: flex;
+  position: absolute;
+  z-index: 9;
+
+  align-items: center;
+  top: 20rpx;
+  right: 0;
+  padding: 4rpx 12rpx 4rpx 0;
+  font-size: 24rpx;
+  border-radius: 100px;
+  color: #fff;
+  background: rgba(0, 0, 0, 0.46);
+}
+.live-icon {
+  right: 0;
+  top: 104rpx;
+}
+
+.zan {
+  bottom: 0;
+  right: 0;
+  width: 100rpx;
+  height: 100rpx;
+}
+.bg {
+  position: absolute;
+  bottom: 4rpx;
+  width: 100%;
+  height: 100rpx;
+  z-index: 8;
+  background-image: -webkit-gradient(
+    linear,
+    left bottom,
+    left top,
+    from(rgba(0, 0, 0, 0.25)),
+    color-stop(82%, transparent)
+  );
+  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.25), transparent 82%);
+  border-bottom-left-radius: 20rpx;
+}
+</style>
\ No newline at end of file
diff --git a/pages/promotion/static/live.gif b/pages/promotion/static/live.gif
new file mode 100644
index 0000000..3f868b5
Binary files /dev/null and b/pages/promotion/static/live.gif differ
diff --git a/pages/promotion/static/live.png b/pages/promotion/static/live.png
new file mode 100644
index 0000000..c9daaae
Binary files /dev/null and b/pages/promotion/static/live.png differ
diff --git a/pages/promotion/static/zan.gif b/pages/promotion/static/zan.gif
new file mode 100644
index 0000000..043c721
Binary files /dev/null and b/pages/promotion/static/zan.gif differ
diff --git a/pages/tabbar/home/template/tpl_flex_five.vue b/pages/tabbar/home/template/tpl_flex_five.vue
index a758483..b5b0415 100644
--- a/pages/tabbar/home/template/tpl_flex_five.vue
+++ b/pages/tabbar/home/template/tpl_flex_five.vue
@@ -1,7 +1,7 @@
 
 <template>
   <div class="layout">
-    <u-image width="140rpx" height="140rpx" @click="modelNavigateTo(item)" class="image-mode" v-for="(item,index) in res.list" :key="index" :src="item.img" alt="">
+    <u-image width="140rpx" mode="aspectFit" height="140rpx" @click="modelNavigateTo(item)" class="image-mode" v-for="(item,index) in res.list" :key="index" :src="item.img" alt="">
       <u-loading slot="loading"></u-loading>
     </u-image>
   </div>
diff --git a/pages/tabbar/home/template/tpl_flex_four.vue b/pages/tabbar/home/template/tpl_flex_four.vue
index 47e6699..e701622 100644
--- a/pages/tabbar/home/template/tpl_flex_four.vue
+++ b/pages/tabbar/home/template/tpl_flex_four.vue
@@ -1,7 +1,7 @@
 
 <template>
   <div class="layout">
-    <u-image height="175rpx" width="175rpx" @click="modelNavigateTo(item)" class="image-mode" :src="item.img" v-for="(item,index) in res.list" :key="index">
+    <u-image height="175rpx" mode="aspectFit" width="175rpx" @click="modelNavigateTo(item)" class="image-mode" :src="item.img" v-for="(item,index) in res.list" :key="index">
       <u-loading slot="loading"></u-loading>
     </u-image>
   </div>
@@ -23,7 +23,7 @@ export default {
 <style lang="scss" scoped>
 @import "./tpl.scss";
 .layout {
-  height: 84px;
+ 
   display: flex;
   align-items: center;
   justify-content: center;
diff --git a/pages/tabbar/home/template/tpl_flex_one.vue b/pages/tabbar/home/template/tpl_flex_one.vue
index 8313a41..752f459 100644
--- a/pages/tabbar/home/template/tpl_flex_one.vue
+++ b/pages/tabbar/home/template/tpl_flex_one.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="layout">
     <div class="flex-one" @click="modelNavigateTo(res.list[0])">
-      <u-image width="100%" height="280rpx" :src="res.list[0].img" alt=""></u-image>
+      <u-image  width="100%" height="280rpx" :src="res.list[0].img" alt=""></u-image>
     </div>
   </div>
 </template>
diff --git a/pages/tabbar/home/template/tpl_flex_three.vue b/pages/tabbar/home/template/tpl_flex_three.vue
index f5074d1..749c700 100644
--- a/pages/tabbar/home/template/tpl_flex_three.vue
+++ b/pages/tabbar/home/template/tpl_flex_three.vue
@@ -26,7 +26,8 @@ export default {
 <style lang="scss" scoped>
 @import "./tpl.scss";
 .layout {
-  height: 110px;
+  padding: 0;
+
   display: flex;
   align-items: center;
   justify-content: center;
diff --git a/pages/tabbar/home/template/tpl_left_one_right_two.vue b/pages/tabbar/home/template/tpl_left_one_right_two.vue
index 27ec891..91404b9 100644
--- a/pages/tabbar/home/template/tpl_left_one_right_two.vue
+++ b/pages/tabbar/home/template/tpl_left_one_right_two.vue
@@ -2,37 +2,36 @@
 <template>
   <div class="layout">
     <div class="view-height-150" @click="modelNavigateTo(res.list[0])">
-      <u-image width="100%" height="300rpx" class="image-mode" :src="res.list[0].img" >
-         <u-loading slot="loading"></u-loading>
+      <u-image width="100%" height="300rpx" class="image-mode" :src="res.list[0].img">
+        <u-loading slot="loading"></u-loading>
       </u-image>
     </div>
     <div class="view-height-150">
       <div class="view-height-75" @click="modelNavigateTo(res.list[1])">
-        <u-image width="100%" height="150rpx"  class="image-mode" :src="res.list[1].img" alt >
-           <u-loading slot="loading"></u-loading>
+        <u-image width="100%" height="150rpx" class="image-mode" :src="res.list[1].img" alt>
+          <u-loading slot="loading"></u-loading>
         </u-image>
       </div>
       <div class="view-height-75" @click="modelNavigateTo(res.list[2])">
-        <u-image width="100%" height="150rpx"  class="image-mode" :src="res.list[2].img" alt >
-           <u-loading slot="loading"></u-loading>
+        <u-image width="100%" height="150rpx" class="image-mode" :src="res.list[2].img" alt>
+          <u-loading slot="loading"></u-loading>
         </u-image>
       </div>
     </div>
   </div>
 </template>
 <script>
-import {modelNavigateTo} from './tpl'
+
+import { modelNavigateTo } from "./tpl";
 export default {
   title: "左一右二",
   props: ["res"],
-   data () {
+  data() {
     return {
       modelNavigateTo,
-    }
+    };
   },
-  mounted() {
- 
-  }
+  mounted() {},
 };
 </script>
 <style lang="scss" scoped>
@@ -44,5 +43,4 @@ export default {
 
   background-size: cover;
 }
-
 </style>
\ No newline at end of file
diff --git a/pages/tabbar/home/template/tpl_left_two_right_one.vue b/pages/tabbar/home/template/tpl_left_two_right_one.vue
index 4eee336..6f491c4 100644
--- a/pages/tabbar/home/template/tpl_left_two_right_one.vue
+++ b/pages/tabbar/home/template/tpl_left_two_right_one.vue
@@ -3,10 +3,10 @@
   <div class="layout ">
     <div class="view-height-150">
       <div class="view-height-75"  @click="modelNavigateTo(res.list[0])">
-        <u-image class="image-mode" width="100%" height="150rpx" :src="res.list[0].img" ></u-image>
+        <u-image class="image-mode"  width="100%" height="150rpx" :src="res.list[0].img" ></u-image>
       </div>
       <div class="view-height-75"  @click="modelNavigateTo(res.list[1])">
-        <u-image class="image-mode"  width="100%" height="150rpx"  :src="res.list[1].img" ></u-image>
+        <u-image class="image-mode" width="100%" height="150rpx"  :src="res.list[1].img" ></u-image>
       </div>
     </div>
     <div class="view-height-150"  @click="modelNavigateTo(res.list[2])">