diff --git a/.DS_Store b/.DS_Store
index 5e1f458..8ba9e77 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/components/image-grid-simple/image-grid-simple.vue b/components/image-grid-simple/image-grid-simple.vue
new file mode 100644
index 0000000..f21efef
--- /dev/null
+++ b/components/image-grid-simple/image-grid-simple.vue
@@ -0,0 +1,214 @@
+<template>
+  <!-- 使用原生 scroll-view 实现滚动 -->
+  <scroll-view
+    class="scroll-container"
+    :scroll-y="true"
+    :style="{ height: height, backgroundColor: backgroundColor }"
+    @scroll="onScroll"
+  >
+    <!-- 顶部自定义区域 -->
+    <slot name="top"></slot>
+    
+    <!-- 图片网格列表 -->
+    <view class="video-grid" :style="gridStyle">
+      <view 
+        class="video-item" 
+        mode="aspectFit"
+        v-for="(item, index) in imageList" 
+        :key="index"
+        :style="itemStyle"
+      >
+        <!-- 视频播放器 -->
+        <image
+          :src="item.src"
+          class="video-player"
+          @click="onImageClick(item)"
+        />
+      </view>
+    </view>
+    
+    <!-- 空数据提示 -->
+    <view class="empty-container" v-if="imageList.length === 0">
+      <slot name="empty" v-if="$slots.empty"></slot>
+      <view v-else class="empty-content">
+        <image 
+          src="/static/images/empty-image.png" 
+          mode="aspectFit" 
+          class="empty-img"
+        />
+        <text class="empty-text">暂无数据</text>
+      </view>
+    </view>
+  </scroll-view>
+</template>
+
+<script>
+export default {
+  name: 'image-grid-enhanced',
+  props: {
+    // 视频数据列表
+    imageList: {
+      type: Array,
+      required: true,
+      default: () => []
+    },
+    // 每行列数
+    columns: {
+      type: Number,
+      default: 2
+    },
+    // 间距
+    gap: {
+      type: String,
+      default: '10px'
+    },
+    // 容器高度
+    height: {
+      type: String,
+      default: '100vh'
+    },
+    // 背景颜色
+    backgroundColor: {
+      type: String,
+      default: '#FFFFFF'
+    }
+  },
+  data() {
+    return {
+      scrollTop: 0, // 当前滚动位置
+    };
+  },
+  computed: {
+    gridStyle() {
+      return {
+        display: 'grid',
+        gridTemplateColumns: `repeat(${this.columns}, 1fr)`,
+        gap: this.gap,
+        padding: '10px',
+        backgroundColor: this.backgroundColor
+      };
+    },
+    itemStyle() {
+      const aspectRatio = 0.75; // 4:3比例
+      return {
+        position: 'relative',
+        overflow: 'hidden',
+        borderRadius: '8px',
+        backgroundColor: this.backgroundColor,
+        aspectRatio: aspectRatio
+      };
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    // 视频点击事件 - 通过蒙版层触发
+    onImageClick(item) {
+      console.log("拦截事件",item)
+      this.$emit('image-click', item);
+    },
+    
+    // 滚动事件处理
+    onScroll(e) {
+      this.scrollTop = e.detail.scrollTop;
+      this.$emit('scroll', e);
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.scroll-container {
+  width: 100%;
+  overflow: hidden;
+}
+
+.video-grid {
+  padding: 8px;
+}
+
+.video-item {
+  position: relative;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+}
+
+.video-player {
+  width: 100%;
+  height: 100%;
+  display: block;
+  background: #f7f7f7;
+}
+
+/* 蒙版层样式 - 覆盖整个视频项 */
+.video-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+
+.video-meta {
+  padding: 12px;
+}
+
+.video-title {
+  font-size: 14px;
+  line-height: 1.5;
+  color: white;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.video-actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 10px;
+}
+
+.action-btn {
+  display: flex;
+  align-items: center;
+  margin-left: 15px;
+  
+  text {
+    font-size: 12px;
+    margin-left: 4px;
+    color: white;
+  }
+}
+
+.empty-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 300px;
+}
+
+.empty-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.empty-img {
+  width: 150px;
+  height: 150px;
+  opacity: 0.5;
+}
+
+.empty-text {
+  font-size: 16px;
+  color: #999;
+  margin-top: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/pages.json b/pages.json
index 054cd98..50fccce 100644
--- a/pages.json
+++ b/pages.json
@@ -59,8 +59,8 @@
     "autoscan": true,
     "custom": {
       // 使用正确的路径格式
-      
       "^smart-tabs": "@/components/smart-tabs/smart-tabs.vue",
+      "^image-grid-simple": "@/components/image-grid-simple/image-grid-simple.vue",
       "^video-grid-simple": "@/components/video-grid-simple/video-grid-simple.vue",
       "^(?!z-paging-refresh|z-paging-load-more)z-paging(.*)": "z-paging/components/z-paging$1/z-paging$1.vue",
       "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
diff --git a/pages/category/category.vue b/pages/category/category.vue
index 966aefb..7b413c6 100644
--- a/pages/category/category.vue
+++ b/pages/category/category.vue
@@ -9,27 +9,20 @@
     </smart-tabs>
   <!-- 视频列表 -->
   <view class="video-container">
-      <view class="video-grid">
-        <view 
-          v-for="(video, index) in list" 
-          :key="index" 
-          class="video-item"
+      <image-grid-simple
+          :imageList="list"
+          :columns="2"
+          :height="'80vh'"
+          @image-click="handlerClick"
         >
-          <view class="video-card">
-            <video 
-              :src="video.url" 
-              :poster="video.poster"
-              class="video-player"
-              :controls="false"
-              :show-center-play-btn="true"
-              :autoplay="true"
-              :loop="true"
-              @play="handlePlay(index)"
-            ></video>
-            
+          
+        <template #empty>
+          <view class="custom-empty">
+            <image src="/static/images/no-videos.png" />
+            <text>没有找到视频内容</text>
           </view>
-        </view>
-      </view>
+        </template>
+      </image-grid-simple> 
   </view>
 </template>
 
@@ -38,7 +31,55 @@
     data() {
       return {
         current:0,
-        tabs:[]
+        tabs:[],
+        list:[
+          {
+            
+            "id":1,
+            "title":"1",
+            "src":"../../static/images/default.png"
+          },
+          {
+            "id":2,
+            "title":2,
+            "src":"../../static/images/default.png"
+          },
+          {
+            "id":3,
+            "title":3,
+            "src":"../../static/images/default.png"
+          },
+          {
+            "id":9,
+            "title":9,
+            "src":"../../static/images/default.png"
+          },
+          {
+            "id":4,
+            "title":4,
+            "src":"../../static/images/default.png"
+          },
+          {
+            "id":5,
+            "title":5,
+            "src":"../../static/images/default.png"
+          },
+          {
+            "id":6,
+            "title":6,
+            "src":"../../static/images/default.png"
+          },
+          {
+            "id":7,
+            "title":7,
+            "src":"../../static/images/default.png"
+          },
+          {
+            "id":8,
+            "title":8,
+            "src":"../../static/images/default.png"
+          }
+        ]
       }
     },
     onLoad() {
diff --git a/pages/detail/detail.vue b/pages/detail/detail.vue
index e8c8a33..b4bbb00 100644
--- a/pages/detail/detail.vue
+++ b/pages/detail/detail.vue
@@ -12,7 +12,17 @@
     <!-- <ad-rewarded-video ref="adRewardedVideo" adpid="1507000689" :loadnext="true" v-slot:default="{loading, error}" @load="onadload" @close="onadclose" @error="onaderror">
       <button :disabled="loading" :loading="loading">显示广告</button>
     </ad-rewarded-video> -->
-    <uni-fab ref="fab" :pattern="pattern" :horizontal="'right'" :vertical="'bottom'" :popMenu="false" @fabClick="downloadAction" />
+    <!-- <uni-fab ref="fab" :pattern="pattern" :horizontal="'right'" :vertical="'bottom'" :popMenu="false" @fabClick="downloadAction" /> -->
+    <uni-fab 
+    ref="fab" 
+    :pattern="pattern" 
+    :content="content" 
+    :horizontal="'right'" 
+    :vertical="'bottom'"
+    :popMenu="true"
+     @trigger="trigger" 
+     @fabClick="fabClick" />
+
   </view> 
 </template>
 
@@ -24,13 +34,27 @@
         url:"https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4",
         id:0,
         pattern:{
-          color:'#19c324',
-          selectedColor:'#19c324',
-          buttonColor:"rgba(0, 0, 0, 0)",
-          icon:'cloud-download-filled',
-          iconColor:'#fff'
+          color: '#19c324',
+          backgroundColor: '#fff',
+          selectedColor: '#19c324',
+          buttonColor: '#19c324',
+          iconColor: '#fff'
         },
-        isDownload:false
+        isDownload:false,
+        content: [
+          {
+        		iconPath: '/static/vip_download.png',
+            selectedIconPath: '/static/vip_download_active.png',
+        		text: '会员下载',
+        		active: false
+        	},
+        	{
+        		iconPath: '/static/download.png',
+        		selectedIconPath: '/static/download_ok.png',
+        		text: '看视频免费下载',
+        		active: false
+        	}
+        ]
       }
     },
     onLoad(options) {      
@@ -50,6 +74,47 @@
       // this.$refs.adRewardedVideo.load();
     },
     methods: {
+      trigger(e) {
+      	console.log(e)
+      	this.content[e.index].active = !e.item.active
+      	uni.showModal({
+      		title: '提示',
+      		content: `您${this.content[e.index].active ? '选中了' : '取消了'}${e.item.text}`,
+      		success: function(res) {
+      			if (res.confirm) {
+      				console.log('用户点击确定')
+      			} else if (res.cancel) {
+      				console.log('用户点击取消')
+      			}
+      		}
+      	})
+      },
+      fabClick() {
+      	uni.showToast({
+      		title: '点击了悬浮按钮',
+      		icon: 'none'
+      	})
+      },
+      switchBtn(hor, ver) {
+      	if (hor === 0) {
+      		this.direction = this.direction === 'horizontal' ? 'vertical' : 'horizontal'
+      		this.directionStr = this.direction === 'horizontal' ? '垂直' : '水平'
+      	} else {
+      		this.horizontal = hor
+      		this.vertical = ver
+      	}
+      	this.$forceUpdate()
+      },
+      switchColor() {
+      	this.is_color_type = !this.is_color_type
+      	if (this.is_color_type) {
+      		this.pattern.iconColor = '#aaa'
+      		this.pattern.buttonColor = '#fff'
+      	} else {
+      		this.pattern.iconColor = '#fff'
+      		this.pattern.buttonColor = '#007AFF'
+      	}
+      },
       async downloadAction() {
         // 判断用户是否为会员
         let userInfo = null
diff --git a/pages/home/home.nvue b/pages/home/home.nvue
index d1c1c4d..3ae2406 100644
--- a/pages/home/home.nvue
+++ b/pages/home/home.nvue
@@ -5,12 +5,11 @@
         :activeColor="'#19c324'"
         @change="handleTabChange"
       />
-  <video-grid-simple 
-      :videoList="list"
+  <image-grid-simple 
+      :imageList="list"
       :columns="2"
-      :autoPlayCenter="false"
       :height="'80vh'"
-      @video-click="handleVideoClick"
+      @image-click="handlerClick"
     >
       
       <template #empty>
@@ -19,7 +18,7 @@
           <text>没有找到视频内容</text>
         </view>
       </template>
-    </video-grid-simple>
+    </image-grid-simple>
 </template>
 
 <script>
@@ -40,47 +39,47 @@
             
             "id":1,
             "title":"1",
-            "src":"https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
+            "src":"../../static/images/default.png"
           },
           {
             "id":2,
             "title":2,
-            "src":"https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
+            "src":"../../static/images/default.png"
           },
           {
             "id":3,
             "title":3,
-            "src":"https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
+            "src":"../../static/images/default.png"
           },
           {
             "id":9,
             "title":9,
-            "src":"https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
+            "src":"../../static/images/default.png"
           },
           {
             "id":4,
             "title":4,
-            "src":"https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
+            "src":"../../static/images/default.png"
           },
           {
             "id":5,
             "title":5,
-            "src":"https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
+            "src":"../../static/images/default.png"
           },
           {
             "id":6,
             "title":6,
-            "src":"https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
+            "src":"../../static/images/default.png"
           },
           {
             "id":7,
             "title":7,
-            "src":"https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
+            "src":"../../static/images/default.png"
           },
           {
             "id":8,
             "title":8,
-            "src":"https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
+            "src":"../../static/images/default.png"
           }
         ],
       }
@@ -91,7 +90,7 @@
       handleTabChange(idx) {
         this.current = idx;
       },
-      handleVideoClick(item) {
+      handlerClick(item) {
         console.log("video click",item)
         // 请求详情
         uni.navigateTo({
diff --git a/pages/personal/personal.vue b/pages/personal/personal.vue
index e21deb6..c117ec5 100644
--- a/pages/personal/personal.vue
+++ b/pages/personal/personal.vue
@@ -22,27 +22,20 @@
     <uni-section class="title" title="已下载" type="line"></uni-section>
     <!-- 已下载列表 -->
     <view class="video-container">
-        <view class="video-grid">
-          <view 
-            v-for="(video, index) in list" 
-            :key="index" 
-            class="video-item"
+        <image-grid-simple
+            :imageList="list"
+            :columns="2"
+            :height="'80vh'"
+            @image-click="handlerClick"
           >
-            <view class="video-card">
-              <video 
-                :src="video.url" 
-                :poster="video.poster"
-                class="video-player"
-                :controls="false"
-                :show-center-play-btn="true"
-                :autoplay="true"
-                :loop="true"
-                @play="handlePlay(index)"
-              ></video>
-              
+            
+          <template #empty>
+            <view class="custom-empty">
+              <image src="/static/images/no-videos.png" />
+              <text>没有找到视频内容</text>
             </view>
-          </view>
-        </view>
+          </template>
+        </image-grid-simple> 
     </view>
   </view>
 </template>
@@ -55,7 +48,54 @@
           avatar:'https://ts4.tc.mm.bing.net/th/id/OIP-C.-RXVvrUScB5pzqIpuROWNgAAAA?rs=1&pid=ImgDetMain&o=7&rm=3'
         },
         download:0,
-        list:[]
+        list:[
+          {
+            
+            "id":1,
+            "title":"1",
+            "src":"../../static/images/default.png"
+          },
+          {
+            "id":2,
+            "title":2,
+            "src":"../../static/images/default.png"
+          },
+          {
+            "id":3,
+            "title":3,
+            "src":"../../static/images/default.png"
+          },
+          {
+            "id":9,
+            "title":9,
+            "src":"../../static/images/default.png"
+          },
+          {
+            "id":4,
+            "title":4,
+            "src":"../../static/images/default.png"
+          },
+          {
+            "id":5,
+            "title":5,
+            "src":"../../static/images/default.png"
+          },
+          {
+            "id":6,
+            "title":6,
+            "src":"../../static/images/default.png"
+          },
+          {
+            "id":7,
+            "title":7,
+            "src":"../../static/images/default.png"
+          },
+          {
+            "id":8,
+            "title":8,
+            "src":"../../static/images/default.png"
+          }
+        ]
       }
     },
     onLoad() {
diff --git a/static/.DS_Store b/static/.DS_Store
index 6e94850..75a4ddb 100644
Binary files a/static/.DS_Store and b/static/.DS_Store differ
diff --git a/static/download.png b/static/download.png
new file mode 100644
index 0000000..4e2553b
Binary files /dev/null and b/static/download.png differ
diff --git a/static/download_ok.png b/static/download_ok.png
new file mode 100644
index 0000000..4678655
Binary files /dev/null and b/static/download_ok.png differ
diff --git a/static/images/default.png b/static/images/default.png
new file mode 100644
index 0000000..3d3551a
Binary files /dev/null and b/static/images/default.png differ
diff --git a/static/vip_download.png b/static/vip_download.png
new file mode 100644
index 0000000..b640ff3
Binary files /dev/null and b/static/vip_download.png differ
diff --git a/static/vip_download_active.png b/static/vip_download_active.png
new file mode 100644
index 0000000..6711215
Binary files /dev/null and b/static/vip_download_active.png differ