diff --git a/web/src/assets/css/admin-form.css b/web/src/assets/css/admin/form.css
similarity index 100%
rename from web/src/assets/css/admin-form.css
rename to web/src/assets/css/admin/form.css
diff --git a/web/src/assets/css/admin-form.styl b/web/src/assets/css/admin/form.styl
similarity index 100%
rename from web/src/assets/css/admin-form.styl
rename to web/src/assets/css/admin/form.styl
diff --git a/web/src/assets/css/mobile-chat-list.css b/web/src/assets/css/mobile-chat-list.css
deleted file mode 100644
index 90ea05f7..00000000
--- a/web/src/assets/css/mobile-chat-list.css
+++ /dev/null
@@ -1,57 +0,0 @@
-.app-background {
-  background-color: #1c1c1c;
-  height: 100vh;
-}
-.mobile-chat-list {
-  background-color: #1c1c1c;
-  position: absolute;
-  top: 40px;
-  width: 100%;
-}
-  .content {
-    .van-cell__value {
-      .chat-list-item {
-        display: flex;
-        font-size: 16;
-        color: #a3a3a3;
-        background-color: #1c1c1c;
-        .van-image {
-          min-width: 32px;
-          width: 32px;
-          height: 32px;
-        }
-        .van-ellipsis {
-          margin-top: 5px;
-          margin-left: 10px;
-        }
-      }
-    }
-  }
-  .van-picker-column {
-    .picker-option {
-      display: flex;
-      width: 100%;
-      padding: 0 10px;
-      .van-image {
-        width: 20px;
-        height: 20px;
-        margin-right: 5px;
-      }
-    }
-  }
-  .van-nav-bar {
-    .van-nav-bar__right {
-      .van-icon {
-        font-size: 20px;
-      }
-    }
-  }
-  .popup {
-    background-color: #1c1c1c;
-  }
-  .dialog {
-    background-color: #1c1c1c;
-  }
-  .field {
-    background-color: #1c1c1c;
-  }
\ No newline at end of file
diff --git a/web/src/assets/css/mobile-chat-session.css b/web/src/assets/css/mobile-chat-session.css
deleted file mode 100644
index 7b476700..00000000
--- a/web/src/assets/css/mobile-chat-session.css
+++ /dev/null
@@ -1,52 +0,0 @@
-.app-background {
-    background-color: #1c1c1c;
-    height: 100vh;
-  }
-  body,
-  .mobile-chat,
-  .van-sticky,
-  .van-nav-bar,
-  .van-list,
-  .message-list-box
-  .van-cell,
-  .chat-box,
-  .van-cell-group,
-  .van-field {
-    background-color: #1c1c1c !important;
-    color: #fff !important;
-  }
-  .chat-box-wrapper {
-    position: fixed;
-    bottom: 0;
-    width: 100%;
-    background-color: #1c1c1c;
-    }
-  .icon-box .van-icon,
-  .mobile-chat .van-nav-bar__title .van-dropdown-menu__title,
-  .mobile-chat .van-nav-bar__title .van-cell__title,
-  .mobile-chat .van-nav-bar__right .van-icon {
-    color: #fff !important;
-  }
-  .mobile-chat {
-    .van-nav-bar__title {
-      .van-dropdown-menu__title {
-        margin-right: 15px;
-      }
-  
-      .van-cell__title {
-        text-align: left;
-      }
-    }
-    .chat-list-wrapper {
-      position: fixed;
-      top: 40px;
-      bottom: 60px;
-      width: 100vw;
-      overflow-y: scroll;
-    }
-    .van-nav-bar__right {
-      .van-icon {
-        font-size: 20px;
-      }
-    }
-  }
\ No newline at end of file
diff --git a/web/src/assets/css/mobile-invitation.css b/web/src/assets/css/mobile-invitation.css
deleted file mode 100644
index d0ffc1b8..00000000
--- a/web/src/assets/css/mobile-invitation.css
+++ /dev/null
@@ -1,94 +0,0 @@
-.page-invitation {
-  display: flex;
-  justify-content: center;
-  background-color: #1c1c1c;
-  height: 100vh;
-  overflow-x: hidden;
-  overflow-y: visible;
-  .inner {
-    max-width: 100%;
-    width: 100%;
-    color: #fff;
-    .center {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-    .title {
-      color: #fff;
-      text-align: center;
-      font-size: 16px;
-      font-weight: bold;
-    }
-    .share-box {
-      .info {
-        line-height: 1.5;
-        border: 1px solid #444444;
-        border-radius: 10px;
-        padding: 10px;
-        margin: 10px;
-        background-color: #1c1c1c;
-        strong {
-          color: #f56c6c;
-        }
-      }
-      .invite-qrcode {
-        text-align: center;
-        margin: 15px;
-      }
-      .invite-url {
-        margin: 10px;
-        padding: 8px;
-        display: flex;
-        justify-content: space-between;
-        border: 1px solid #444444;
-        border-radius: 10px;
-        background-color: #1c1c1c;
-        span {
-          position: relative;
-          font-size: 14px;
-          font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
-          top: 0px;
-        }
-      }
-    }
-    .invite-stats {
-      padding: 10px 10px;
-      .item-box {
-        border-radius: 10px;
-        padding: 10 0px;
-        .el-col {
-          height: 80px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          .iconfont {
-            font-size: 30px;
-          }
-          .item-info {
-            font-size: 14px;
-            .text, .num {
-              padding: 3px 0;
-              text-align: center;
-            }
-            .num {
-              font-size: 14px;
-            }
-          }
-        }
-      }
-      .yellow {
-        background-color: #ffeecc;
-        color: #D68F00;
-      }
-      .blue {
-        background-color: #D6E4FF;
-        color: #1062FE;
-      }
-      .green {
-        background-color: #E7F8EB;
-        color: #2D9F46;
-      }
-    }
-  }
-}
\ No newline at end of file
diff --git a/web/src/assets/css/mobile-profile.css b/web/src/assets/css/mobile-profile.css
deleted file mode 100644
index dfd2d056..00000000
--- a/web/src/assets/css/mobile-profile.css
+++ /dev/null
@@ -1,156 +0,0 @@
-.app-background {
-  background-color: #1c1c1c;
-  height: 100vh;
-}
-.member {
-  background-color: #282828;
-  height: 100vh;
-  .el-dialog {
-    .el-dialog__body {
-      padding-top: 5px;
-      .pay-container {
-        .count-down {
-          display: flex;
-          justify-content: center;
-        }
-        .pay-qrcode {
-          display flex
-          justify-content center
-          .el-image {
-            width: 25px;
-            height:25px;
-          }
-        }
-        .tip {
-          display flex
-          justify-content center
-          .el-icon {
-            font-size: 20px;
-          }
-          .text {
-            font-size: 16px;
-            margin-left: 10px;
-          }
-        }
-        .tip.success {
-          color: #07c160;
-        }
-      }
-    }
-  }
-  .title {
-    text-align: center;
-    background-color: #282828;
-    font-size:16px;
-    color: #ffffff;
-    padding: 10px;
-  }
-  .inner {
-    color: #ffffff;
-    overflow-x hidden
-    overflow-y visible
-    .user-profile {
-      padding: 0 20px 0 20px;
-      background-color: #282828;
-      color: #ffffff;
-      border-radius:10px;
-      width: 400px;
-      height: 100vh;
-      .el-form-item__label {
-        color: #ffffff;
-        justify-content: start;
-      }
-      .user-opt {
-        .el-col {
-          padding: 10px;
-          .el-button {
-            width: 100%;
-          }
-        }
-      }
-    }
-    .product-box {
-      .info {
-        .el-alert__description {
-          font-size: 14px !important;
-          margin: 0;
-        }
-        padding: 10px 20px 20px 0;
-      }
-      .list-box {
-        .product-item {
-          border: 1px solid #1c1c1c;
-          border-radius: 6px;
-          overflow: hidden;
-          cursor: pointer;
-          transition: all 0.3s ease; /* 添加过渡效果 */
-          .image-container {
-            display flex
-            justify-content center
-            .el-image {
-              padding: 6px;
-              .el-image__inner {
-                border-radius: 10px;
-              }
-            }
-          }
-          .product-title {
-            display: flex;
-            padding: 10px;
-            .name {
-              width: 100%;
-              text-align: center;
-              font-size: 16px;
-              font-weight: bold;
-              color: #2cc995;
-            }
-          }
-          .product-info {
-            padding: 10px 20px;
-            font-size: 14px;
-            color: #999999;
-            .info-line {
-              display: flex;
-              width: 100%;
-              padding: 5px 0;
-              .label {
-                display: flex;
-                width: 100%;
-              }
-              .price, .expire {
-                display: flex;
-                width: 90px;
-                justify-content: right;
-              }
-              .price {
-                color: #f56c6c;
-              }
-              .expire {
-                color: #409eff;
-              }
-            }
-            .pay-way {
-              padding: 10px 0;
-              display: flex;
-              justify-content: space-between;
-
-              .iconfont {
-                margin-right: 5px;
-              }
-            }
-          }
-          &:hover {
-            box-shadow: 0 0 10px rgba(71, 255, 241, 0.6); /* 添加阴影效果 */
-            transform: translateY(-10px); /* 向上移动10像素 */
-          }
-        }
-      }
-      .headline {
-        padding: 0 20px 20px 0;
-      }
-      .user-order {
-        padding: 0 20px 20px 0;
-      }
-    }
-  }
-}
\ No newline at end of file
diff --git a/web/src/assets/css/mobile-apps.css b/web/src/assets/css/mobile/apps.css
similarity index 53%
rename from web/src/assets/css/mobile-apps.css
rename to web/src/assets/css/mobile/apps.css
index d4c9441c..8def06a8 100644
--- a/web/src/assets/css/mobile-apps.css
+++ b/web/src/assets/css/mobile/apps.css
@@ -8,13 +8,10 @@
   background-color: #282828;
   height: 100vh;
 }
-.mobile-setting {
-  .content {
-    padding-top: 60px;
-
-    .van-field__label {
-      width: 100px;
-      text-align: right;
-    }
-  }
-}
\ No newline at end of file
+.mobile-setting .content {
+  padding-top: 60px;
+}
+.mobile-setting .content .van-field__label {
+  width: 100px;
+  text-align: right;
+}
diff --git a/web/src/assets/css/mobile-apps.styl b/web/src/assets/css/mobile/apps.styl
similarity index 100%
rename from web/src/assets/css/mobile-apps.styl
rename to web/src/assets/css/mobile/apps.styl
diff --git a/web/src/assets/css/mobile/chat-list.css b/web/src/assets/css/mobile/chat-list.css
new file mode 100644
index 00000000..88410db8
--- /dev/null
+++ b/web/src/assets/css/mobile/chat-list.css
@@ -0,0 +1,47 @@
+.app-background {
+  background-color: #1c1c1c;
+  height: 100vh;
+}
+.mobile-chat-list {
+  background-color: #1c1c1c;
+  position: absolute;
+  top: 40px;
+  width: 100%;
+}
+.content .van-cell__value .chat-list-item {
+  display: flex;
+  font-size: 16px;
+  color: #fff;
+  background-color: #1c1c1c;
+}
+.content .van-cell__value .chat-list-item .van-image {
+  min-width: 32px;
+  width: 32px;
+  height: 32px;
+}
+.content .van-cell__value .chat-list-item .van-ellipsis {
+  margin-top: 5px;
+  margin-left: 10px;
+}
+.van-picker-column .picker-option {
+  display: flex;
+  width: 100%;
+  padding: 0 10px;
+}
+.van-picker-column .picker-option .van-image {
+  width: 20px;
+  height: 20px;
+  margin-right: 5px;
+}
+.van-nav-bar .van-nav-bar__right .van-icon {
+  font-size: 20px;
+}
+.popup {
+  background-color: #1c1c1c;
+}
+.dialog {
+  background-color: #1c1c1c;
+}
+.field {
+  background-color: #1c1c1c;
+}
diff --git a/web/src/assets/css/mobile-chat-list.styl b/web/src/assets/css/mobile/chat-list.styl
similarity index 100%
rename from web/src/assets/css/mobile-chat-list.styl
rename to web/src/assets/css/mobile/chat-list.styl
diff --git a/web/src/assets/css/mobile/chat-session.css b/web/src/assets/css/mobile/chat-session.css
new file mode 100644
index 00000000..1d077298
--- /dev/null
+++ b/web/src/assets/css/mobile/chat-session.css
@@ -0,0 +1,45 @@
+.app-background {
+  background-color: #1c1c1c;
+  height: 100vh;
+}
+body,
+.mobile-chat,
+.van-sticky,
+.van-nav-bar,
+.van-list,
+.message-list-box,
+.van-cell,
+.chat-box,
+.van-cell-group,
+.van-field {
+  background-color: #1c1c1c !important;
+  color: #fff !important;
+}
+.chat-box-wrapper {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  background-color: #1c1c1c;
+}
+.icon-box .van-icon,
+.mobile-chat .van-nav-bar__title .van-dropdown-menu__title,
+.mobile-chat .van-nav-bar__title .van-cell__title,
+.mobile-chat .van-nav-bar__right .van-icon {
+  color: #fff !important;
+}
+.mobile-chat .van-nav-bar__title .van-dropdown-menu__title {
+  margin-right: 15px;
+}
+.mobile-chat .van-nav-bar__title .van-cell__title {
+  text-align: left;
+}
+.mobile-chat .chat-list-wrapper {
+  position: fixed;
+  top: 50px;
+  bottom: 60px;
+  width: 100vw;
+  overflow-y: scroll;
+}
+.mobile-chat .van-nav-bar__right .van-icon {
+  font-size: 20px;
+}
diff --git a/web/src/assets/css/mobile-chat-session.styl b/web/src/assets/css/mobile/chat-session.styl
similarity index 100%
rename from web/src/assets/css/mobile-chat-session.styl
rename to web/src/assets/css/mobile/chat-session.styl
diff --git a/web/src/assets/css/custom-mobile-scroll.css b/web/src/assets/css/mobile/custom-scroll.css
similarity index 100%
rename from web/src/assets/css/custom-mobile-scroll.css
rename to web/src/assets/css/mobile/custom-scroll.css
diff --git a/web/src/assets/css/custom-mobile-scroll.styl b/web/src/assets/css/mobile/custom-scroll.styl
similarity index 100%
rename from web/src/assets/css/custom-mobile-scroll.styl
rename to web/src/assets/css/mobile/custom-scroll.styl
diff --git a/web/src/assets/css/mobile-home.css b/web/src/assets/css/mobile/home.css
similarity index 77%
rename from web/src/assets/css/mobile-home.css
rename to web/src/assets/css/mobile/home.css
index d759ba44..25214688 100644
--- a/web/src/assets/css/mobile-home.css
+++ b/web/src/assets/css/mobile/home.css
@@ -1,6 +1,6 @@
 .my-tabbar {
-  background-color: #171717; 
-  box-shadow: -3px 4px 16px #000; 
+  background-color: #171717;
+  box-shadow: -3px 4px 16px #000;
   box-sizing: border-box;
 }
 .banner {
@@ -13,10 +13,10 @@
   height: 40px;
   width: 100%;
   position: fixed;
-  z-index: 2;   /* Add z-index */
-} 
+  z-index: 2 /* Add z-index */;
+}
 .banner-title {
-  color: #2CC995;
+  color: #2cc995;
   font-size: 20px;
   font-weight: bold;
   text-shadow: 0 -4px 13px #000;
@@ -24,7 +24,7 @@
 .mobile-home {
   background-color: #171717;
 }
-.mobile-home .van-tabbar::before {
+.mobile-home .van-tabbar before {
   position: absolute;
   bottom: 0;
   left: 0;
@@ -37,9 +37,9 @@
   transition: opacity 0.5s;
   z-index: -1;
 }
-.mobile-home .van-tabbar.activeTab::before {
+.mobile-home .van-tabbar.activeTab before {
   opacity: 1;
 }
 .router-view {
   margin-bottom: 50px;
-}
\ No newline at end of file
+}
diff --git a/web/src/assets/css/mobile-home.styl b/web/src/assets/css/mobile/home.styl
similarity index 100%
rename from web/src/assets/css/mobile-home.styl
rename to web/src/assets/css/mobile/home.styl
diff --git a/web/src/assets/css/image-mobile-list.css b/web/src/assets/css/mobile/image-list.css
similarity index 100%
rename from web/src/assets/css/image-mobile-list.css
rename to web/src/assets/css/mobile/image-list.css
diff --git a/web/src/assets/css/image-mobile-list.styl b/web/src/assets/css/mobile/image-list.styl
similarity index 97%
rename from web/src/assets/css/image-mobile-list.styl
rename to web/src/assets/css/mobile/image-list.styl
index 91b4f95d..c01efe10 100644
--- a/web/src/assets/css/image-mobile-list.styl
+++ b/web/src/assets/css/mobile/image-list.styl
@@ -87,7 +87,7 @@
       }
     }
 
-    @import "task-mobile-list.styl"
+    @import "mobile/task-mobile-list.styl"
   }
 
   @import "sd-task-mobile-dialog.styl"
diff --git a/web/src/assets/css/image-mobile-sd.css b/web/src/assets/css/mobile/image-sd.css
similarity index 91%
rename from web/src/assets/css/image-mobile-sd.css
rename to web/src/assets/css/mobile/image-sd.css
index e5e8bd74..6502ea4c 100644
--- a/web/src/assets/css/image-mobile-sd.css
+++ b/web/src/assets/css/mobile/image-sd.css
@@ -1,14 +1,17 @@
 .page-sd {
-  background-color: #1c1c1c;
+  background-color: #282828;
 }
 .page-sd .inner {
   display: flex;
+  align-items: center;
+  justify-content: center;
 }
 .page-sd .inner .sd-box {
-  margin: 5px;
-  background-color: #1c1c1c;
-  min-width: 97%;
-  max-width: 97%;
+  background-color: #282828;
+  min-width: 92%;
+  max-width: 92%;
+  padding: 0px;
+  border-radius: 0px;
   color: #fff;
   font-size: 14px;
 }
@@ -18,8 +21,13 @@
   text-align: center;
   color: #fff;
 }
+.page-sd .inner .sd-box ::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  background-color: transparent;
+}
 .page-sd .inner .sd-box .sd-params {
-  margin-top: 5px;
+  margin-top: 10px;
   overflow: auto;
 }
 .page-sd .inner .sd-box .sd-params .param-line {
@@ -46,7 +54,7 @@
   padding-bottom: 5px;
 }
 .page-sd .inner .sd-box .submit-btn {
-  padding: 10px 15px 10px 15px;
+  padding: 10px 15px 0 15px;
   text-align: center;
 }
 .page-sd .inner .sd-box .submit-btn .el-button {
@@ -60,6 +68,7 @@
 }
 .page-sd .inner .task-list-box {
   width: 100%;
+  padding: 5px;
   color: #fff;
   overflow-x: hidden;
 }
@@ -77,6 +86,8 @@
   position: absolute;
   width: 100%;
   height: 100%;
+  top: 0;
+  left: 0;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -89,7 +100,7 @@
   width: 100%;
   height: 100%;
   border: 1px solid #666;
-  padding: 3px;
+  padding: 6px;
   overflow: hidden;
   border-radius: 6px;
   transition: all 0.3s ease; /* 添加过渡效果 */
@@ -131,7 +142,7 @@
   overflow: visible;
 }
 .page-sd .inner .task-list-box .el-image img {
-  height: 100%;
+  height: 240px;
 }
 .page-sd .inner .task-list-box .el-image .el-image-viewer__wrapper img {
   width: auto;
@@ -152,10 +163,10 @@
   margin-bottom: 10px;
 }
 .page-sd .inner .task-list-box .el-image.upscale {
-  max-height: 100%;
+  max-height: 310px;
 }
 .page-sd .inner .task-list-box .el-image.upscale img {
-  height: 100%;
+  height: 310px;
 }
 .page-sd .inner .task-list-box .el-image.upscale .el-image-viewer__wrapper img {
   width: auto;
@@ -200,8 +211,8 @@
   padding: 10px;
   color: #999;
   overflow: auto;
-  max-height: 100%;
-  min-height: 100%;
+  max-height: 100px;
+  min-height: 50px;
   position: relative;
 }
 .page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .info-line .prompt .el-icon {
@@ -216,7 +227,7 @@
 }
 .page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .info-line .wrapper label {
   display: flex;
-  width:100%;
+  width: 100px;
   color: #a5a5a5;
 }
 .page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .info-line .wrapper .item-value {
@@ -228,34 +239,14 @@
   color: #f5f5f5;
 }
 .page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .copy-params {
-  padding: 20px 0 10px 0;
+  padding: 30px 0 10px 0;
 }
 .page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .copy-params .el-button {
   width: 100%;
 }
 .page-sd .mj-list-item-prompt .el-icon {
-
+  margin-left: 10px;
   cursor: pointer;
   position: relative;
   top: 2px;
 }
-.mobile-dialog {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
-}
-
-/* 针对手机屏幕的样式 */
-.mobile-form-row {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
-}
-.mobile-form-col {
-  width: 100%;
-  max-width: 500px;
-  padding: 30px;
-  box-sizing: border-box;
-}
\ No newline at end of file
diff --git a/web/src/assets/css/image-mobile-sd.styl b/web/src/assets/css/mobile/image-sd.styl
similarity index 95%
rename from web/src/assets/css/image-mobile-sd.styl
rename to web/src/assets/css/mobile/image-sd.styl
index 8f615f86..7cc97a20 100644
--- a/web/src/assets/css/image-mobile-sd.styl
+++ b/web/src/assets/css/mobile/image-sd.styl
@@ -87,10 +87,10 @@
       }
     }
 
-    @import "task-mobile-list.styl"
+    @import "./task-list.styl"
   }
 
-  @import "sd-task-mobile-dialog.styl"
+  @import "./sd-task-dialog.styl"
 
 
   .mj-list-item-prompt {
diff --git a/web/src/assets/css/mobile/invitation.css b/web/src/assets/css/mobile/invitation.css
new file mode 100644
index 00000000..2d8e6d55
--- /dev/null
+++ b/web/src/assets/css/mobile/invitation.css
@@ -0,0 +1,93 @@
+.page-invitation {
+  display: flex;
+  justify-content: center;
+  background-color: #1c1c1c;
+  height: 100vh;
+  overflow-x: hidden;
+  overflow-y: visible;
+}
+.page-invitation .inner {
+  max-width: 100%;
+  width: 100%;
+  color: #fff;
+}
+.page-invitation .inner .center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.page-invitation .inner .title {
+  color: #fff;
+  text-align: center;
+  font-size: 16px;
+  font-weight: bold;
+}
+.page-invitation .inner .share-box .info {
+  line-height: 1.5;
+  border: 1px solid #444;
+  border-radius: 10px;
+  padding: 10px;
+  margin: 10px;
+  background-color: #1c1c1c;
+}
+.page-invitation .inner .share-box .info strong {
+  color: #f56c6c;
+}
+.page-invitation .inner .share-box .invite-qrcode {
+  text-align: center;
+  margin: 15px;
+}
+.page-invitation .inner .share-box .invite-url {
+  margin: 10px;
+  padding: 8px;
+  display: flex;
+  justify-content: space-between;
+  border: 1px solid #444;
+  border-radius: 10px;
+  background-color: #1c1c1c;
+}
+.page-invitation .inner .share-box .invite-url span {
+  position: relative;
+  font-size: 14px;
+  font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
+  top: 0px;
+}
+.page-invitation .inner .invite-stats {
+  padding: 10px 10px;
+}
+.page-invitation .inner .invite-stats .item-box {
+  border-radius: 10px;
+  padding: 10 0px;
+}
+.page-invitation .inner .invite-stats .item-box .el-col {
+  height: 80px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.page-invitation .inner .invite-stats .item-box .el-col .iconfont {
+  font-size: 30px;
+}
+.page-invitation .inner .invite-stats .item-box .el-col .item-info {
+  font-size: 14px;
+}
+.page-invitation .inner .invite-stats .item-box .el-col .item-info .text,
+.page-invitation .inner .invite-stats .item-box .el-col .item-info .num {
+  padding: 3px 0;
+  text-align: center;
+}
+.page-invitation .inner .invite-stats .item-box .el-col .item-info .num {
+  font-size: 14px;
+}
+.page-invitation .inner .invite-stats .yellow {
+  background-color: #fec;
+  color: #d68f00;
+}
+.page-invitation .inner .invite-stats .blue {
+  background-color: #d6e4ff;
+  color: #1062fe;
+}
+.page-invitation .inner .invite-stats .green {
+  background-color: #e7f8eb;
+  color: #2d9f46;
+}
diff --git a/web/src/assets/css/mobile-invitation.styl b/web/src/assets/css/mobile/invitation.styl
similarity index 100%
rename from web/src/assets/css/mobile-invitation.styl
rename to web/src/assets/css/mobile/invitation.styl
diff --git a/web/src/assets/css/mobile/profile.css b/web/src/assets/css/mobile/profile.css
new file mode 100644
index 00000000..b80f603f
--- /dev/null
+++ b/web/src/assets/css/mobile/profile.css
@@ -0,0 +1,142 @@
+.app-background {
+  background-color: #1c1c1c;
+  height: 100vh;
+}
+.member {
+  background-color: #1c1c1c;
+  height: 100vh;
+}
+.member .el-dialog .el-dialog__body {
+  padding-top: 5px;
+}
+.member .el-dialog .el-dialog__body .pay-container .count-down {
+  display: flex;
+  justify-content: center;
+}
+.member .el-dialog .el-dialog__body .pay-container .pay-qrcode {
+  display: flex;
+  justify-content: center;
+}
+.member .el-dialog .el-dialog__body .pay-container .pay-qrcode .el-image {
+  width: 280px;
+  height: 280px;
+}
+.member .el-dialog .el-dialog__body .pay-container .tip {
+  display: flex;
+  justify-content: center;
+}
+.member .el-dialog .el-dialog__body .pay-container .tip .el-icon {
+  font-size: 20px;
+}
+.member .el-dialog .el-dialog__body .pay-container .tip .text {
+  font-size: 16px;
+  margin-left: 10px;
+}
+.member .el-dialog .el-dialog__body .pay-container .tip.success {
+  color: #07c160;
+}
+.member .title {
+  text-align: center;
+  background-color: #1c1c1c;
+  font-size: 16px;
+  color: #fff;
+  padding: 5px;
+  font-weight: bold;
+}
+.member .inner {
+  color: #fff;
+  overflow-x: hidden;
+  overflow-y: visible;
+}
+.member .inner .user-profile {
+  padding: 0 20px 0 20px;
+  background-color: #1c1c1c;
+  color: #fff;
+  border-radius: 10px;
+  width: 100%;
+  height: 91vh;
+}
+.member .inner .user-profile .el-form-item__label {
+  color: #fff;
+  justify-content: start;
+}
+.member .inner .user-profile .user-opt .el-col {
+  padding: 8px;
+}
+.member .inner .user-profile .user-opt .el-col .el-button {
+  width: 100%;
+}
+.member .inner .product-box .info {
+  padding: 0 20px 0 20px;
+}
+.member .inner .product-box .info .el-alert__description {
+  font-size: 14px !important;
+  color: #1c1c1c;
+  margin: 0;
+}
+.member .inner .product-box .list-box {
+  padding: 0 20px 0 5px;
+}
+.member .inner .product-box .list-box .product-item {
+  border: 1px solid #5f5f5f;
+  border-radius: 6px;
+  overflow: hidden;
+  cursor: pointer;
+  transition: all 0.3s ease /* 添加过渡效果 */;
+}
+.member .inner .product-box .list-box .product-item .image-container {
+  display: flex;
+  justify-content: center;
+}
+.member .inner .product-box .list-box .product-item .image-container .el-image {
+  width: 50px;
+}
+.member .inner .product-box .list-box .product-item .image-container .el-image .el-image__inner {
+  border-radius: 10px;
+}
+.member .inner .product-box .list-box .product-item .product-title {
+  display: flex;
+  padding: 5px;
+}
+.member .inner .product-box .list-box .product-item .product-title .name {
+  width: 100%;
+  text-align: center;
+  font-size: 16px;
+  font-weight: bold;
+  color: #2cc995;
+}
+.member .inner .product-box .list-box .product-item .product-info {
+  padding: 10px 20px;
+  font-size: 14px;
+  color: #999;
+}
+.member .inner .product-box .list-box .product-item .product-info .info-line {
+  display: flex;
+  width: 100%;
+  padding: 2px 0;
+}
+.member .inner .product-box .list-box .product-item .product-info .info-line .label {
+  display: flex;
+  width: 100%;
+}
+.member .inner .product-box .list-box .product-item .product-info .info-line .price,
+.member .inner .product-box .list-box .product-item .product-info .info-line .expire {
+  display: flex;
+  width: 100%;
+  justify-content: right;
+}
+.member .inner .product-box .list-box .product-item .product-info .info-line .price {
+  color: #f56c6c;
+}
+.member .inner .product-box .list-box .product-item .product-info .info-line .expire {
+  color: #409eff;
+}
+.member .inner .product-box .list-box .product-item .product-info .pay-way {
+  padding: 5px 0;
+  display: flex;
+  justify-content: space-between;
+}
+.member .inner .product-box .list-box .product-item hover {
+  box-shadow: 0 0 10px rgba(71,255,241,0.6) /* 添加阴影效果 */;
+  transform: translateY(-10px) /* 向上移动10像素 */;
+}
diff --git a/web/src/assets/css/mobile-profile.styl b/web/src/assets/css/mobile/profile.styl
similarity index 100%
rename from web/src/assets/css/mobile-profile.styl
rename to web/src/assets/css/mobile/profile.styl
diff --git a/web/src/assets/css/mobile/sd-task-dialog.css b/web/src/assets/css/mobile/sd-task-dialog.css
new file mode 100644
index 00000000..611e7d38
--- /dev/null
+++ b/web/src/assets/css/mobile/sd-task-dialog.css
@@ -0,0 +1,72 @@
+.el-overlay-dialog .el-dialog {
+  background-color: #1a1b1e;
+}
+.el-overlay-dialog .el-dialog .el-dialog__header .el-dialog__title {
+  color: #f5f5f5;
+}
+.el-overlay-dialog .el-dialog .el-dialog__body {
+  padding: 0 0 0 15px !important;
+  display: flex;
+  height: 100%;
+}
+.el-overlay-dialog .el-dialog .el-dialog__body .el-row {
+  width: 100%;
+}
+.el-overlay-dialog .el-dialog .el-dialog__body .el-row .img-container {
+  display: flex;
+  justify-content: center;
+}
+.el-overlay-dialog .el-dialog .el-dialog__body .el-row .img-container .image-slot {
+  display: flex;
+  height: 100vh;
+  align-items: center;
+  justify-content: center;
+}
+.el-overlay-dialog .el-dialog .el-dialog__body .el-row .img-container .image-slot .el-icon {
+  font-size: 60px;
+}
+.el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info {
+  background-color: #25262b;
+  padding: 1rem 1.5rem;
+}
+.el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .info-line {
+  width: 100%;
+}
+.el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .info-line .prompt {
+  background-color: #35363b;
+  padding: 10px;
+  color: #999;
+  overflow: auto;
+  max-height: 100px;
+  min-height: 50px;
+  position: relative;
+}
+.el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .info-line .prompt .el-icon {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+  cursor: pointer;
+}
+.el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .info-line .wrapper {
+  margin-top: 10px;
+  display: flex;
+}
+.el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .info-line .wrapper label {
+  display: flex;
+  width: 100px;
+  color: #a5a5a5;
+}
+.el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .info-line .wrapper .item-value {
+  display: flex;
+  width: 100%;
+  background-color: #35363b;
+  padding: 2px 5px;
+  border-radius: 5px;
+  color: #f5f5f5;
+}
+.el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .copy-params {
+  padding: 30px 0 10px 0;
+}
+.el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .copy-params .el-button {
+  width: 100%;
+}
diff --git a/web/src/assets/css/mobile/sd-task-dialog.styl b/web/src/assets/css/mobile/sd-task-dialog.styl
new file mode 100644
index 00000000..d0c93b1c
--- /dev/null
+++ b/web/src/assets/css/mobile/sd-task-dialog.styl
@@ -0,0 +1,96 @@
+.el-overlay-dialog {
+  .el-dialog {
+    background-color #1a1b1e
+
+    .el-dialog__header {
+      .el-dialog__title {
+        color #F5F5F5
+      }
+    }
+
+    .el-dialog__body {
+      padding 0 0 0 15px !important
+      display flex
+      height 100%
+
+      .el-row {
+        width 100%
+
+        .img-container {
+          display flex
+          justify-content center
+
+          .image-slot {
+            display flex
+            height 100vh
+            align-items center
+            justify-content center
+
+            .el-icon {
+              font-size 60px
+            }
+          }
+        }
+
+        .task-info {
+          background-color #25262b
+          padding 1rem 1.5rem
+
+          .info-line {
+            width 100%
+
+            .prompt {
+              background-color #35363b
+              padding 10px
+              color #999999
+              overflow auto
+              max-height 100px
+              min-height 50px
+
+              position relative
+
+              .el-icon {
+                position absolute
+                right 10px
+                bottom 10px
+                cursor pointer
+              }
+            }
+
+            .wrapper {
+              margin-top 10px
+              display flex
+
+              label {
+                display flex
+                width 100px
+                color #a5a5a5
+              }
+
+              .item-value {
+                display flex
+                width 100%
+                background-color #35363b
+                padding 2px 5px
+                border-radius 5px
+                color #F5F5F5
+              }
+            }
+
+          }
+
+          .copy-params {
+            padding 30px 0 10px 0
+
+            .el-button {
+              width 100%
+            }
+          }
+        }
+      }
+
+      // end el-row
+
+    }
+  }
+}
\ No newline at end of file
diff --git a/web/src/assets/css/mobile/task-list.css b/web/src/assets/css/mobile/task-list.css
new file mode 100644
index 00000000..6754ac94
--- /dev/null
+++ b/web/src/assets/css/mobile/task-list.css
@@ -0,0 +1,106 @@
+.task-list-box {
+  width: 100%;
+  padding: 5px;
+  color: #fff;
+  overflow-x: hidden;
+}
+.task-list-box .running-job-list .job-item {
+  width: 100%;
+  padding: 2px;
+  background-color: #555;
+}
+.task-list-box .running-job-list .job-item .job-item-inner {
+  position: relative;
+  height: 100%;
+  overflow: hidden;
+}
+.task-list-box .running-job-list .job-item .job-item-inner .progress {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.task-list-box .running-job-list .job-item .job-item-inner .progress span {
+  font-size: 20px;
+  color: #fff;
+}
+.task-list-box .finish-job-list .job-item {
+  width: 100%;
+  height: 100%;
+  border: 1px solid #666;
+  padding: 6px;
+  overflow: hidden;
+  border-radius: 6px;
+  transition: all 0.3s ease; /* 添加过渡效果 */
+}
+.task-list-box .finish-job-list .job-item .opt .opt-line {
+  margin: 6px 0;
+}
+.task-list-box .finish-job-list .job-item .opt .opt-line ul {
+  display: flex;
+  flex-flow: row;
+}
+.task-list-box .finish-job-list .job-item .opt .opt-line ul li {
+  margin-right: 6px;
+}
+.task-list-box .finish-job-list .job-item .opt .opt-line ul li a {
+  padding: 3px 0;
+  width: 40px;
+  text-align: center;
+  border-radius: 5px;
+  display: block;
+  cursor: pointer;
+  background-color: #4e5058;
+  color: #fff;
+}
+.task-list-box .finish-job-list .job-item .opt .opt-line ul li a:hover {
+  background-color: #6d6f78;
+}
+.task-list-box .finish-job-list .job-item .opt .opt-line ul .show-prompt {
+  font-size: 20px;
+  cursor: pointer;
+}
+.task-list-box .finish-job-list .animate:hover {
+  box-shadow: 0 0 10px rgba(71,255,241,0.6); /* 添加阴影效果 */
+  transform: translateY(-10px); /* 向上移动10像素 */
+}
+.task-list-box .el-image {
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+.task-list-box .el-image img {
+  height: 240px;
+}
+.task-list-box .el-image .el-image-viewer__wrapper img {
+  width: auto;
+  height: auto;
+}
+.task-list-box .el-image .image-slot {
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  min-height: 200px;
+  color: #fff;
+  height: 240px;
+}
+.task-list-box .el-image .image-slot .iconfont {
+  font-size: 50px;
+  margin-bottom: 10px;
+}
+.task-list-box .el-image.upscale {
+  max-height: 310px;
+}
+.task-list-box .el-image.upscale img {
+  height: 310px;
+}
+.task-list-box .el-image.upscale .el-image-viewer__wrapper img {
+  width: auto;
+  height: auto;
+}
diff --git a/web/src/assets/css/task-mobile-list.styl b/web/src/assets/css/mobile/task-list.styl
similarity index 100%
rename from web/src/assets/css/task-mobile-list.styl
rename to web/src/assets/css/mobile/task-list.styl
diff --git a/web/src/assets/css/task-mobile-list.css b/web/src/assets/css/task-mobile-list.css
deleted file mode 100644
index f892fbed..00000000
--- a/web/src/assets/css/task-mobile-list.css
+++ /dev/null
@@ -1,115 +0,0 @@
-.task-list-box {
-    width: 100%;
-    padding: 10px;
-    color: #fff;
-    overflow-x: hidden;
-}
-
-.task-list-box .running-job-list .job-item {
-    width: 100%;
-    padding: 2px;
-    background-color: #555;
-}
-
-.task-list-box .running-job-list .job-item .job-item-inner {
-    position: relative;
-    height: 100%;
-    overflow: hidden;
-}
-
-.task-list-box .running-job-list .job-item .job-item-inner .progress {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.task-list-box .running-job-list .job-item .job-item-inner .progress span {
-    font-size: 20px;
-    color: #fff;
-}
-
-.task-list-box .finish-job-list .job-item {
-    width: 100%;
-    height: 100%;
-}
-
-.task-list-box .finish-job-list .job-item .opt .opt-line {
-    margin: 6px 0;
-}
-
-.task-list-box .finish-job-list .job-item .opt .opt-line ul {
-    display: flex;
-    flex-flow: row;
-}
-
-.task-list-box .finish-job-list .job-item .opt .opt-line ul li {
-    margin-right: 10px;
-}
-
-.task-list-box .finish-job-list .job-item .opt .opt-line ul li a {
-    padding: 3px 0;
-    width: 44px;
-    text-align: center;
-    border-radius: 5px;
-    display: block;
-    cursor: pointer;
-    background-color: #4e5058;
-    color: #fff;
-}
-
-.task-list-box .finish-job-list .job-item .opt .opt-line ul li a:hover {
-    background-color: #6d6f78;
-}
-
-.task-list-box .finish-job-list .job-item .opt .opt-line ul .show-prompt {
-    font-size: 20px;
-    cursor: pointer;
-}
-
-.task-list-box .el-image {
-    width: 100%;
-    height: 100%;
-    max-height: 240px;
-}
-
-.task-list-box .el-image img {
-    height: 240px;
-}
-
-.task-list-box .el-image .el-image-viewer__wrapper img {
-    width: auto;
-    height: auto;
-}
-
-.task-list-box .el-image .image-slot {
-    display: flex;
-    flex-flow: column;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    min-height: 200px;
-    color: #fff;
-}
-
-.task-list-box .el-image .image-slot .iconfont {
-    font-size: 50px;
-    margin-bottom: 10px;
-}
-
-.task-list-box .el-image.upscale {
-    max-height: 312px;
-}
-
-.task-list-box .el-image.upscale img {
-    height: 312px;
-}
-
-.task-list-box .el-image.upscale .el-image-viewer__wrapper img {
-    width: auto;
-    height: auto;
-}
diff --git a/web/src/components/mobile/ChatReply.vue b/web/src/components/mobile/ChatReply.vue
index ca8be51b..3819ec05 100644
--- a/web/src/components/mobile/ChatReply.vue
+++ b/web/src/components/mobile/ChatReply.vue
@@ -106,11 +106,17 @@ onMounted(() => {
           margin-top 0
         }
 
-        p > code {
-          color #2b2b2b
-          background-color #c1c1c1
-          padding 2px 5px
-          border-radius 5px
+        p {
+          code {
+            color #2b2b2b
+            background-color #c1c1c1
+            padding 2px 5px
+            border-radius 5px
+          }
+
+          img {
+            max-width 100%
+          }
         }
       }
     }
diff --git a/web/src/views/admin/ChatModel.vue b/web/src/views/admin/ChatModel.vue
index c19ecf87..34d73dd3 100644
--- a/web/src/views/admin/ChatModel.vue
+++ b/web/src/views/admin/ChatModel.vue
@@ -232,7 +232,7 @@ const remove = function (row) {
 </script>
 
 <style lang="stylus" scoped>
-@import "@/assets/css/admin-form.styl"
+@import "@/assets/css/admin/form.styl"
 .list {
 
   .opt-box {
diff --git a/web/src/views/admin/SysConfig.vue b/web/src/views/admin/SysConfig.vue
index 42ec4649..f0379cc7 100644
--- a/web/src/views/admin/SysConfig.vue
+++ b/web/src/views/admin/SysConfig.vue
@@ -373,7 +373,7 @@ const uploadRewardImg = (file) => {
 </script>
 
 <style lang="stylus" scoped>
-@import "@/assets/css/admin-form.styl"
+@import "@/assets/css/admin/form.styl"
 .system-config {
   display flex
   justify-content center
diff --git a/web/src/views/mobile/Apps.vue b/web/src/views/mobile/Apps.vue
index ad121a44..c4c3ab54 100644
--- a/web/src/views/mobile/Apps.vue
+++ b/web/src/views/mobile/Apps.vue
@@ -1,15 +1,15 @@
 <template>
-<div class="app-background">
-  <div class="mobile-setting container">
-    <div class="title" style="padding-top: 50px">应用广场</div>
-    <div class="title" style="padding-top: 200px">视频生成器即将开启……敬请期待</div>
+  <div class="app-background">
+    <div class="mobile-setting container">
+      <div class="title" style="padding-top: 50px">应用广场</div>
+      <div class="title" style="padding-top: 200px">视频生成器即将开启……敬请期待</div>
+    </div>
   </div>
-</div>
 </template>
 
 <script setup>
 </script>
 
 <style lang="stylus">
-@import "@/assets/css/mobile-apps.styl"
+@import "@/assets/css/mobile/apps.styl"
 </style>
diff --git a/web/src/views/mobile/ChatList.vue b/web/src/views/mobile/ChatList.vue
index de9a3383..7cc67973 100644
--- a/web/src/views/mobile/ChatList.vue
+++ b/web/src/views/mobile/ChatList.vue
@@ -1,52 +1,52 @@
 <template>
-<div class="app-background">
-  <div v-if="isLogin" class="container mobile-chat-list">
-    <van-nav-bar
-        :title="title"
-        left-text="新建会话"
-        @click-left="showPicker = true"
-        custom-class="navbar"
-        >
-      <template #right>
-        <van-icon name="delete-o" @click="clearAllChatHistory"/>
-      </template>
-    </van-nav-bar>
-
-    <div class="content">
-      <van-search
-          v-model="chatName"
-          input-align="center"
-          placeholder="请输入会话标题"
-          custom-class="van-search"
-          @input="search"
-      />
-
-      <van-list
-          v-model:error="error"
-          v-model:loading="loading"
-          :finished="finished"
-          error-text="请求失败，点击重新加载"
-          finished-text="没有更多了"
-          @load="onLoad"
+  <div class="app-background">
+    <div v-if="isLogin" class="container mobile-chat-list">
+      <van-nav-bar
+          :title="title"
+          left-text="新建会话"
+          @click-left="showPicker = true"
+          custom-class="navbar"
       >
-        <van-swipe-cell v-for="item in chats" :key="item.id">
-          <van-cell @click="changeChat(item)">
-            <div class="chat-list-item">
-              <van-image
-                  :src="item.icon"
-                  round
-              />
-              <div class="van-ellipsis">{{ item.title }}</div>
-            </div>
-          </van-cell>
-          <template #right>
-            <van-button square text="修改" type="primary" @click="editChat(item)"/>
-            <van-button square text="删除" type="danger" @click="removeChat(item)"/>
-          </template>
-        </van-swipe-cell>
-      </van-list>
+        <template #right>
+          <van-icon name="delete-o" @click="clearAllChatHistory"/>
+        </template>
+      </van-nav-bar>
+
+      <div class="content">
+        <van-search
+            v-model="chatName"
+            input-align="center"
+            placeholder="请输入会话标题"
+            custom-class="van-search"
+            @input="search"
+        />
+
+        <van-list
+            v-model:error="error"
+            v-model:loading="loading"
+            :finished="finished"
+            error-text="请求失败，点击重新加载"
+            finished-text="没有更多了"
+            @load="onLoad"
+        >
+          <van-swipe-cell v-for="item in chats" :key="item.id">
+            <van-cell @click="changeChat(item)">
+              <div class="chat-list-item">
+                <van-image
+                    :src="item.icon"
+                    round
+                />
+                <div class="van-ellipsis">{{ item.title }}</div>
+              </div>
+            </van-cell>
+            <template #right>
+              <van-button square text="修改" type="primary" @click="editChat(item)"/>
+              <van-button square text="删除" type="danger" @click="removeChat(item)"/>
+            </template>
+          </van-swipe-cell>
+        </van-list>
+      </div>
     </div>
-  </div>
 
     <van-popup v-model:show="showPicker" position="bottom" class="popup">
       <van-picker
@@ -75,7 +75,7 @@
 
     <bind-mobile v-if="isLogin" :show="showBindMobileDialog" :mobile="loginUser.mobile"
                  @hide="showBindMobileDialog = false"/>
-</div>
+  </div>
 </template>
 
 <script setup>
@@ -265,5 +265,5 @@ const removeChat = (item) => {
 </script>
 
 <style lang="stylus" scoped>
-@import "@/assets/css/mobile-chat-list.styl"
+@import "@/assets/css/mobile/chat-list.styl"
 </style>
\ No newline at end of file
diff --git a/web/src/views/mobile/ChatSession.vue b/web/src/views/mobile/ChatSession.vue
index f6e8fc6b..0d708fbe 100644
--- a/web/src/views/mobile/ChatSession.vue
+++ b/web/src/views/mobile/ChatSession.vue
@@ -1,93 +1,93 @@
 <template>
   <div class="app-background">
-  <van-config-provider theme="dark">
-    <div class="mobile-chat" v-loading="loading" element-loading-text="正在连接会话...">
-  <van-sticky ref="navBarRef" :offset-top="0" position="top">
-    <van-nav-bar left-arrow left-text="返回" @click-left="router.back()">
-          <template #title>
-            <van-dropdown-menu>
-              <van-dropdown-item :title="title">
-                <van-cell center title="角色"> {{ role.name }}</van-cell>
-                <van-cell center title="模型">{{ modelValue }}</van-cell>
-              </van-dropdown-item>
-            </van-dropdown-menu>
-          </template>
-
-          <template #right>
-            <van-icon name="share-o" @click="showShare = true"/>
-          </template>
-
-        </van-nav-bar>
-      </van-sticky>
-
-      <van-share-sheet
-          v-model:show="showShare"
-          title="立即分享给好友"
-          :options="shareOptions"
-          @select="shareChat"
-      />
-
-      <div class="chat-list-wrapper">  
-      <div id="message-list-box" :style="{height: winHeight + 'px'}" class="message-list-box">
-        <van-list
-            v-model:error="error"
-            :finished="finished"
-            error-text="请求失败，点击重新加载"
-            @load="onLoad"
-        >
-          <van-cell v-for="item in chatData" :key="item" :border="false" class="message-line">
-            <chat-prompt
-                v-if="item.type==='prompt'"
-                :content="item.content"
-                :created-at="dateFormat(item['created_at'])"
-                :icon="item.icon"
-                :model="model"
-                :tokens="item['tokens']"/>
-            <chat-reply v-else-if="item.type==='reply'"
-                        :content="item.content"
-                        :created-at="dateFormat(item['created_at'])"
-                        :icon="item.icon"
-                        :org-content="item.orgContent"
-                        :tokens="item['tokens']"/>
-            <chat-mid-journey v-else-if="item.type==='mj'"
-                              :content="item.content"
-                              :icon="item.icon"
-                              :role-id="role"
-                              :chat-id="chatId"
-                              @disable-input="disableInput(true)"
-                              @enable-input="enableInput"
-                              :created-at="dateFormat(item['created_at'])"/>
-          </van-cell>
-        </van-list>
-      </div>
-      </div>
-      <div class="chat-box-wrapper">
-      <van-sticky ref="bottomBarRef" :offset-bottom="0" position="bottom">
-
-        <van-cell-group inset>
-          <van-field
-          v-model="prompt"
-          center
-          clearable
-          placeholder="输入你的问题"
-          >
-            <template #button>
-              <van-button size="small" type="primary" @click="sendMessage">发送</van-button>
+    <van-config-provider theme="dark">
+      <div class="mobile-chat" v-loading="loading" element-loading-text="正在连接会话...">
+        <van-sticky ref="navBarRef" :offset-top="0" position="top">
+          <van-nav-bar left-arrow left-text="返回" @click-left="router.back()">
+            <template #title>
+              <van-dropdown-menu>
+                <van-dropdown-item :title="title">
+                  <van-cell center title="角色"> {{ role.name }}</van-cell>
+                  <van-cell center title="模型">{{ modelValue }}</van-cell>
+                </van-dropdown-item>
+              </van-dropdown-menu>
             </template>
-            <template #extra>
-              <div class="icon-box">
-                <van-icon v-if="showStopGenerate" name="stop-circle-o" @click="stopGenerate"/>
-                <van-icon v-if="showReGenerate" name="play-circle-o" @click="reGenerate"/>
-              </div>
-            </template>
-          </van-field>
-        </van-cell-group>
 
-      </van-sticky>
-    </div>
+            <template #right>
+              <van-icon name="share-o" @click="showShare = true"/>
+            </template>
+
+          </van-nav-bar>
+        </van-sticky>
+
+        <van-share-sheet
+            v-model:show="showShare"
+            title="立即分享给好友"
+            :options="shareOptions"
+            @select="shareChat"
+        />
+
+        <div class="chat-list-wrapper">
+          <div id="message-list-box" :style="{height: winHeight + 'px'}" class="message-list-box">
+            <van-list
+                v-model:error="error"
+                :finished="finished"
+                error-text="请求失败，点击重新加载"
+                @load="onLoad"
+            >
+              <van-cell v-for="item in chatData" :key="item" :border="false" class="message-line">
+                <chat-prompt
+                    v-if="item.type==='prompt'"
+                    :content="item.content"
+                    :created-at="dateFormat(item['created_at'])"
+                    :icon="item.icon"
+                    :model="model"
+                    :tokens="item['tokens']"/>
+                <chat-reply v-else-if="item.type==='reply'"
+                            :content="item.content"
+                            :created-at="dateFormat(item['created_at'])"
+                            :icon="item.icon"
+                            :org-content="item.orgContent"
+                            :tokens="item['tokens']"/>
+                <chat-mid-journey v-else-if="item.type==='mj'"
+                                  :content="item.content"
+                                  :icon="item.icon"
+                                  :role-id="role"
+                                  :chat-id="chatId"
+                                  @disable-input="disableInput(true)"
+                                  @enable-input="enableInput"
+                                  :created-at="dateFormat(item['created_at'])"/>
+              </van-cell>
+            </van-list>
+          </div>
+        </div>
+        <div class="chat-box-wrapper">
+          <van-sticky ref="bottomBarRef" :offset-bottom="0" position="bottom">
+
+            <van-cell-group inset>
+              <van-field
+                  v-model="prompt"
+                  center
+                  clearable
+                  placeholder="输入你的问题"
+              >
+                <template #button>
+                  <van-button size="small" type="primary" @click="sendMessage">发送</van-button>
+                </template>
+                <template #extra>
+                  <div class="icon-box">
+                    <van-icon v-if="showStopGenerate" name="stop-circle-o" @click="stopGenerate"/>
+                    <van-icon v-if="showReGenerate" name="play-circle-o" @click="reGenerate"/>
+                  </div>
+                </template>
+              </van-field>
+            </van-cell-group>
+
+          </van-sticky>
+        </div>
+      </div>
+    </van-config-provider>
   </div>
-  </van-config-provider>
-</div>
 </template>
 
 <script setup>
@@ -410,5 +410,5 @@ const shareChat = () => {
 </script>
 
 <style lang="stylus" scoped>
-@import "@/assets/css/mobile-chat-session.css"
+@import "@/assets/css/mobile/chat-session.css"
 </style>
\ No newline at end of file
diff --git a/web/src/views/mobile/Home.vue b/web/src/views/mobile/Home.vue
index 643fdeb5..d9971072 100644
--- a/web/src/views/mobile/Home.vue
+++ b/web/src/views/mobile/Home.vue
@@ -1,17 +1,17 @@
 <template>
-<div class="banner">
-  <h1 class="banner-title">ChatPuls-V3 智能助理</h1>
-</div>
+  <div class="banner">
+    <h1 class="banner-title">ChatPuls-V3 智能助理</h1>
+  </div>
   <van-config-provider theme="dark">
     <div class="mobile-home">
       <router-view/>
-      <van-tabbar 
-        fixed
-        route 
-        v-model="active"
-        active-color="#F5F5F5" 
-        inactive-color="#2CC995" 
-        class="my-tabbar"
+      <van-tabbar
+          fixed
+          route
+          v-model="active"
+          active-color="#F5F5F5"
+          inactive-color="#2CC995"
+          class="my-tabbar"
       >
         <van-tabbar-item to="/mobile/chat/list" name="home" icon="chat-o">对话</van-tabbar-item>
         <van-tabbar-item to="/mobile/imageSd" name="imageSd" icon="photo-o">绘图</van-tabbar-item>
@@ -48,5 +48,5 @@ const onChange = (index) => {
 </script>
 
 <style lang="stylus" scoped>
-@import "@/assets/css/mobile-home.css"
+@import "@/assets/css/mobile/home.css"
 </style>
diff --git a/web/src/views/mobile/ImageSd.vue b/web/src/views/mobile/ImageSd.vue
index c2238b38..ae874ee2 100644
--- a/web/src/views/mobile/ImageSd.vue
+++ b/web/src/views/mobile/ImageSd.vue
@@ -43,204 +43,204 @@
                 </template>
               </el-form-item>
             </div>
-<!-- 这是一个示例注释
-            <div class="param-line">
-              <el-form-item label="迭代步数">
-                <template #default>
-                  <div class="form-item-inner">
-                    <el-input v-model.number="params.steps" size="small"/>
-                    <el-tooltip
-                        effect="light"
-                        content="值越大则代表细节越多，同时也意味着出图速度越慢"
-                        raw-content
-                        placement="right"
-                    >
-                      <el-icon>
-                        <InfoFilled/>
-                      </el-icon>
-                    </el-tooltip>
-                  </div>
-                </template>
-              </el-form-item>
-            </div>
+            <!-- 这是一个示例注释
+                        <div class="param-line">
+                          <el-form-item label="迭代步数">
+                            <template #default>
+                              <div class="form-item-inner">
+                                <el-input v-model.number="params.steps" size="small"/>
+                                <el-tooltip
+                                    effect="light"
+                                    content="值越大则代表细节越多，同时也意味着出图速度越慢"
+                                    raw-content
+                                    placement="right"
+                                >
+                                  <el-icon>
+                                    <InfoFilled/>
+                                  </el-icon>
+                                </el-tooltip>
+                              </div>
+                            </template>
+                          </el-form-item>
+                        </div>
 
-            <div class="param-line">
-              <el-form-item label="引导系数">
-                <template #default>
-                  <div class="form-item-inner">
-                    <el-input v-model.number="params.cfg_scale" size="small"/>
-                    <el-tooltip
-                        effect="light"
-                        content="提示词引导系数，图像在多大程度上服从提示词<br/> 较低值会产生更有创意的结果"
-                        raw-content
-                        placement="right"
-                    >
-                      <el-icon>
-                        <InfoFilled/>
-                      </el-icon>
-                    </el-tooltip>
-                  </div>
-                </template>
-              </el-form-item>
-            </div>
+                        <div class="param-line">
+                          <el-form-item label="引导系数">
+                            <template #default>
+                              <div class="form-item-inner">
+                                <el-input v-model.number="params.cfg_scale" size="small"/>
+                                <el-tooltip
+                                    effect="light"
+                                    content="提示词引导系数，图像在多大程度上服从提示词<br/> 较低值会产生更有创意的结果"
+                                    raw-content
+                                    placement="right"
+                                >
+                                  <el-icon>
+                                    <InfoFilled/>
+                                  </el-icon>
+                                </el-tooltip>
+                              </div>
+                            </template>
+                          </el-form-item>
+                        </div>
 
-            <div class="param-line">
-              <el-form-item label="随机因子">
-                <template #default>
-                  <div class="form-item-inner">
-                    <el-input v-model.number="params.seed" size="small"/>
-                    <el-tooltip
-                        effect="light"
-                        content="随机数种子，相同的种子会得到相同的结果<br/> 设置为 -1 则每次随机生成种子"
-                        raw-content
-                        placement="right"
-                    >
-                      <el-icon>
-                        <InfoFilled/>
-                      </el-icon>
-                    </el-tooltip>
+                        <div class="param-line">
+                          <el-form-item label="随机因子">
+                            <template #default>
+                              <div class="form-item-inner">
+                                <el-input v-model.number="params.seed" size="small"/>
+                                <el-tooltip
+                                    effect="light"
+                                    content="随机数种子，相同的种子会得到相同的结果<br/> 设置为 -1 则每次随机生成种子"
+                                    raw-content
+                                    placement="right"
+                                >
+                                  <el-icon>
+                                    <InfoFilled/>
+                                  </el-icon>
+                                </el-tooltip>
 
-                    <el-tooltip
-                        effect="light"
-                        content="使用随机数"
-                        raw-content
-                        placement="right"
-                    >
-                      <el-icon @click="params.seed = -1">
-                        <Orange/>
-                      </el-icon>
-                    </el-tooltip>
-                  </div>
-                </template>
-              </el-form-item>
-            </div>
- -->
- <!-- 这是一个示例注释
-            <div class="param-line">
-              <el-form-item label="面部修复">
-                <template #default>
-                  <div class="form-item-inner">
-                    <el-switch v-model="params.face_fix" style="--el-switch-on-color: #47fff1;"/>
-                    <el-tooltip
-                        effect="light"
-                        content="仅对绘制人物图像有效果。"
-                        raw-content
-                        placement="right"
-                    >
-                      <el-icon style="margin-top: 6px">
-                        <InfoFilled/>
-                      </el-icon>
-                    </el-tooltip>
-                  </div>
-                </template>
-              </el-form-item>
-            </div>
+                                <el-tooltip
+                                    effect="light"
+                                    content="使用随机数"
+                                    raw-content
+                                    placement="right"
+                                >
+                                  <el-icon @click="params.seed = -1">
+                                    <Orange/>
+                                  </el-icon>
+                                </el-tooltip>
+                              </div>
+                            </template>
+                          </el-form-item>
+                        </div>
+             -->
+            <!-- 这是一个示例注释
+                       <div class="param-line">
+                         <el-form-item label="面部修复">
+                           <template #default>
+                             <div class="form-item-inner">
+                               <el-switch v-model="params.face_fix" style="--el-switch-on-color: #47fff1;"/>
+                               <el-tooltip
+                                   effect="light"
+                                   content="仅对绘制人物图像有效果。"
+                                   raw-content
+                                   placement="right"
+                               >
+                                 <el-icon style="margin-top: 6px">
+                                   <InfoFilled/>
+                                 </el-icon>
+                               </el-tooltip>
+                             </div>
+                           </template>
+                         </el-form-item>
+                       </div>
 
-            <div class="param-line">
-              <el-form-item label="高清修复">
-                <template #default>
-                  <div class="form-item-inner">
-                    <el-switch v-model="params.hd_fix" style="--el-switch-on-color: #47fff1;"/>
-                    <el-tooltip
-                        effect="light"
-                        content="先以较小的分辨率生成图像，接着方法图像<br />然后在不更改构图的情况下再修改细节"
-                        raw-content
-                        placement="right"
-                    >
-                      <el-icon style="margin-top: 6px">
-                        <InfoFilled/>
-                      </el-icon>
-                    </el-tooltip>
-                  </div>
-                </template>
-              </el-form-item>
-            </div>
+                       <div class="param-line">
+                         <el-form-item label="高清修复">
+                           <template #default>
+                             <div class="form-item-inner">
+                               <el-switch v-model="params.hd_fix" style="--el-switch-on-color: #47fff1;"/>
+                               <el-tooltip
+                                   effect="light"
+                                   content="先以较小的分辨率生成图像，接着方法图像<br />然后在不更改构图的情况下再修改细节"
+                                   raw-content
+                                   placement="right"
+                               >
+                                 <el-icon style="margin-top: 6px">
+                                   <InfoFilled/>
+                                 </el-icon>
+                               </el-tooltip>
+                             </div>
+                           </template>
+                         </el-form-item>
+                       </div>
 
-            <div v-show="params.hd_fix">
-              <div class="param-line">
-                <el-form-item label="重绘幅度">
-                  <template #default>
-                    <div class="form-item-inner">
-                      <el-slider v-model.number="params.hd_redraw_rate" :max="1" :step="0.1"
-                                 style="width: 180px;--el-slider-main-bg-color:#47fff1"/>
-                      <el-tooltip
-                          effect="light"
-                          content="决定算法对图像内容的影响程度<br />较大的值将得到越有创意的图像"
-                          raw-content
-                          placement="right"
-                      >
-                        <el-icon style="margin-top: 6px">
-                          <InfoFilled/>
-                        </el-icon>
-                      </el-tooltip>
-                    </div>
-                  </template>
-                </el-form-item>
-              </div>
+                       <div v-show="params.hd_fix">
+                         <div class="param-line">
+                           <el-form-item label="重绘幅度">
+                             <template #default>
+                               <div class="form-item-inner">
+                                 <el-slider v-model.number="params.hd_redraw_rate" :max="1" :step="0.1"
+                                            style="width: 180px;--el-slider-main-bg-color:#47fff1"/>
+                                 <el-tooltip
+                                     effect="light"
+                                     content="决定算法对图像内容的影响程度<br />较大的值将得到越有创意的图像"
+                                     raw-content
+                                     placement="right"
+                                 >
+                                   <el-icon style="margin-top: 6px">
+                                     <InfoFilled/>
+                                   </el-icon>
+                                 </el-tooltip>
+                               </div>
+                             </template>
+                           </el-form-item>
+                         </div>
 
-              <div class="param-line">
-                <el-form-item label="放大算法">
-                  <template #default>
-                    <div class="form-item-inner">
-                      <el-select v-model="params.hd_scale_alg" size="small">
-                        <el-option v-for="item in scaleAlg" :label="item" :value="item" :key="item"/>
-                      </el-select>
-                      <el-tooltip
-                          effect="light"
-                          content="高清修复放大算法，主流算法有Latent和ESRGAN_4x"
-                          raw-content
-                          placement="right"
-                      >
-                        <el-icon>
-                          <InfoFilled/>
-                        </el-icon>
-                      </el-tooltip>
-                    </div>
-                  </template>
-                </el-form-item>
-              </div>
+                         <div class="param-line">
+                           <el-form-item label="放大算法">
+                             <template #default>
+                               <div class="form-item-inner">
+                                 <el-select v-model="params.hd_scale_alg" size="small">
+                                   <el-option v-for="item in scaleAlg" :label="item" :value="item" :key="item"/>
+                                 </el-select>
+                                 <el-tooltip
+                                     effect="light"
+                                     content="高清修复放大算法，主流算法有Latent和ESRGAN_4x"
+                                     raw-content
+                                     placement="right"
+                                 >
+                                   <el-icon>
+                                     <InfoFilled/>
+                                   </el-icon>
+                                 </el-tooltip>
+                               </div>
+                             </template>
+                           </el-form-item>
+                         </div>
 
-              <div class="param-line">
-                <el-form-item label="放大倍数">
-                  <template #default>
-                    <div class="form-item-inner">
-                      <el-input v-model.number="params.hd_scale" size="small"/>
-                      <el-tooltip
-                          effect="light"
-                          content="随机数种子，相同的种子会得到相同的结果<br/> 设置为 -1 则每次随机生成种子"
-                          raw-content
-                          placement="right"
-                      >
-                        <el-icon>
-                          <InfoFilled/>
-                        </el-icon>
-                      </el-tooltip>
-                    </div>
-                  </template>
-                </el-form-item>
-              </div>
+                         <div class="param-line">
+                           <el-form-item label="放大倍数">
+                             <template #default>
+                               <div class="form-item-inner">
+                                 <el-input v-model.number="params.hd_scale" size="small"/>
+                                 <el-tooltip
+                                     effect="light"
+                                     content="随机数种子，相同的种子会得到相同的结果<br/> 设置为 -1 则每次随机生成种子"
+                                     raw-content
+                                     placement="right"
+                                 >
+                                   <el-icon>
+                                     <InfoFilled/>
+                                   </el-icon>
+                                 </el-tooltip>
+                               </div>
+                             </template>
+                           </el-form-item>
+                         </div>
 
-              <div class="param-line">
-                <el-form-item label="迭代步数">
-                  <template #default>
-                    <div class="form-item-inner">
-                      <el-input v-model.number="params.hd_steps" size="small"/>
-                      <el-tooltip
-                          effect="light"
-                          content="重绘迭代步数，如果设置为0，则设置跟原图相同的迭代步数"
-                          raw-content
-                          placement="right"
-                      >
-                        <el-icon>
-                          <InfoFilled/>
-                        </el-icon>
-                      </el-tooltip>
-                    </div>
-                  </template>
-                </el-form-item>
-              </div>
-            </div>
- -->
+                         <div class="param-line">
+                           <el-form-item label="迭代步数">
+                             <template #default>
+                               <div class="form-item-inner">
+                                 <el-input v-model.number="params.hd_steps" size="small"/>
+                                 <el-tooltip
+                                     effect="light"
+                                     content="重绘迭代步数，如果设置为0，则设置跟原图相同的迭代步数"
+                                     raw-content
+                                     placement="right"
+                                 >
+                                   <el-icon>
+                                     <InfoFilled/>
+                                   </el-icon>
+                                 </el-tooltip>
+                               </div>
+                             </template>
+                           </el-form-item>
+                         </div>
+                       </div>
+            -->
             <div class="param-line" v-loading="loading" element-loading-background="rgba(122, 122, 122, 0.8)">
               <el-input
                   v-model="params.prompt"
@@ -273,46 +273,87 @@
                   翻译并重写
                 </el-button>
               </el-tooltip>
-              <el-tag type="success"  style="margin-left: 12px;">绘图可用额度：{{ imgCalls }}</el-tag>
+              <el-tag type="success" style="margin-left: 12px;">绘图可用额度：{{ imgCalls }}</el-tag>
             </div>
-<!--
-            <div class="param-line pt">
-              <span>反向提示词：</span>
-              <el-tooltip
-                  effect="light"
-                  content="不希望出现的元素，下面给了默认的起手式"
-                  placement="right"
-              >
-                <el-icon>
-                  <InfoFilled/>
-                </el-icon>
-              </el-tooltip>
-            </div>
-            <div class="param-line">
-              <el-input
-                  v-model="params.negative_prompt"
-                  :autosize="{ minRows: 4, maxRows: 6 }"
-                  type="textarea"
-                  placeholder="反向提示词"
-              />
-            </div>
--->
+            <!--
+                        <div class="param-line pt">
+                          <span>反向提示词：</span>
+                          <el-tooltip
+                              effect="light"
+                              content="不希望出现的元素，下面给了默认的起手式"
+                              placement="right"
+                          >
+                            <el-icon>
+                              <InfoFilled/>
+                            </el-icon>
+                          </el-tooltip>
+                        </div>
+                        <div class="param-line">
+                          <el-input
+                              v-model="params.negative_prompt"
+                              :autosize="{ minRows: 4, maxRows: 6 }"
+                              type="textarea"
+                              placeholder="反向提示词"
+                          />
+                        </div>
+            -->
           </el-form>
         </div>
         <div class="submit-btn">
           <el-button color="#47fff1" :dark="false" round @click="generate">立即生成</el-button>
         </div>
         <div class="task-list-box">
-        <div class="task-list-inner" :style="{ height: listBoxHeight + 'px' }">
-          <h2>任务列表</h2>
-          <div class="running-job-list">
-            <ItemList :items="runningJobs" v-if="runningJobs.length > 0" width="240">
-              <template #default="scope">
-                <div class="job-item">
-                  <div v-if="scope.item.progress > 0" class="job-item-inner">
-                    <el-image :src="scope.item['img_url']"
-                              fit="cover"
-                              loading="lazy">
+          <div class="task-list-inner" :style="{ height: listBoxHeight + 'px' }">
+            <h2>任务列表</h2>
+            <div class="running-job-list">
+              <ItemList :items="runningJobs" v-if="runningJobs.length > 0" width="240">
+                <template #default="scope">
+                  <div class="job-item">
+                    <div v-if="scope.item.progress > 0" class="job-item-inner">
+                      <el-image :src="scope.item['img_url']"
+                                fit="cover"
+                                loading="lazy">
+                        <template #placeholder>
+                          <div class="image-slot">
+                            正在加载图片
+                          </div>
+                        </template>
+
+                        <template #error>
+                          <div class="image-slot">
+                            <el-icon v-if="scope.item['img_url'] !== ''">
+                              <Picture/>
+                            </el-icon>
+                          </div>
+                        </template>
+                      </el-image>
+
+                      <div class="progress">
+                        <el-progress type="circle" :percentage="scope.item.progress" :width="100" color="#47fff1"/>
+                      </div>
+                    </div>
+                    <el-image fit="cover" v-else>
+                      <template #error>
+                        <div class="image-slot">
+                          <i class="iconfont icon-quick-start"></i>
+                          <span>任务正在排队中</span>
+                        </div>
+                      </template>
+                    </el-image>
+                  </div>
+                </template>
+              </ItemList>
+              <el-empty :image-size="100" v-else/>
+            </div>
+            <h2>创作记录</h2>
+            <div class="finish-job-list">
+              <ItemList :items="finishedJobs" v-if="finishedJobs.length > 0" width="480" :gap="20">
+                <template #default="scope">
+                  <div class="job-item animate" @click="showTask(scope.item)">
+                    <el-image
+                        :src="scope.item['img_url']+'?imageView2/1/w/480/h/480/q/75'"
+                        fit="cover"
+                        loading="lazy">
                       <template #placeholder>
                         <div class="image-slot">
                           正在加载图片
@@ -321,60 +362,19 @@
 
                       <template #error>
                         <div class="image-slot">
-                          <el-icon v-if="scope.item['img_url'] !== ''">
+                          <el-icon>
                             <Picture/>
                           </el-icon>
                         </div>
                       </template>
                     </el-image>
-
-                    <div class="progress">
-                      <el-progress type="circle" :percentage="scope.item.progress" :width="100" color="#47fff1"/>
-                    </div>
                   </div>
-                  <el-image fit="cover" v-else>
-                    <template #error>
-                      <div class="image-slot">
-                        <i class="iconfont icon-quick-start"></i>
-                        <span>任务正在排队中</span>
-                      </div>
-                    </template>
-                  </el-image>
-                </div>
-              </template>
-            </ItemList>
-            <el-empty :image-size="100" v-else/>
+                </template>
+              </ItemList>
+              <el-empty :image-size="100" v-else/>
+            </div> <!-- end finish job list-->
           </div>
-          <h2>创作记录</h2>
-          <div class="finish-job-list">
-            <ItemList :items="finishedJobs" v-if="finishedJobs.length > 0" width="480" :gap="20">
-              <template #default="scope">
-                <div class="job-item animate" @click="showTask(scope.item)">
-                  <el-image
-                      :src="scope.item['img_url']+'?imageView2/1/w/480/h/480/q/75'"
-                      fit="cover"
-                      loading="lazy">
-                    <template #placeholder>
-                      <div class="image-slot">
-                        正在加载图片
-                      </div>
-                    </template>
-
-                    <template #error>
-                      <div class="image-slot">
-                        <el-icon>
-                          <Picture/>
-                        </el-icon>
-                      </div>
-                    </template>
-                  </el-image>
-                </div>
-              </template>
-            </ItemList>
-            <el-empty :image-size="100" v-else/>
-          </div> <!-- end finish job list-->
-        </div>
-      </div><!-- end task list box -->
+        </div><!-- end task list box -->
       </div>
     </div>
     <el-dialog v-model="showTaskDialog" title="绘画任务详情" :fullscreen="true">
@@ -384,105 +384,105 @@
             <el-image :src="item['img_url']" fit="contain"/>
           </div>
           <el-col :span="50">
-          <div class="task-info">
-            <div class="info-line">
-              <el-divider>
-                正向提示词
-              </el-divider>
-              <div class="prompt">
-                <span>{{ item.prompt }}</span>
-                <el-icon class="copy-prompt" :data-clipboard-text="item.prompt">
-                  <DocumentCopy/>
-                </el-icon>
+            <div class="task-info">
+              <div class="info-line">
+                <el-divider>
+                  正向提示词
+                </el-divider>
+                <div class="prompt">
+                  <span>{{ item.prompt }}</span>
+                  <el-icon class="copy-prompt" :data-clipboard-text="item.prompt">
+                    <DocumentCopy/>
+                  </el-icon>
+                </div>
+
               </div>
 
-            </div>
-
-            <div class="info-line">
-              <el-divider>
-                反向提示词
-              </el-divider>
-              <div class="prompt">
-                <span>{{ item.params.negative_prompt }}</span>
-                <el-icon class="copy-prompt" :data-clipboard-text="item.params.negative_prompt">
-                  <DocumentCopy/>
-                </el-icon>
+              <div class="info-line">
+                <el-divider>
+                  反向提示词
+                </el-divider>
+                <div class="prompt">
+                  <span>{{ item.params.negative_prompt }}</span>
+                  <el-icon class="copy-prompt" :data-clipboard-text="item.params.negative_prompt">
+                    <DocumentCopy/>
+                  </el-icon>
+                </div>
               </div>
-            </div>
-            <div class="info-line">
-              <div class="wrapper">
-                <label>采样方法：</label>
-                <div class="item-value">{{ item.params.sampler }}</div>
-              </div>
-            </div>
-
-            <div class="info-line">
-              <div class="wrapper">
-                <label>图片尺寸：</label>
-                <div class="item-value">{{ item.params.width }} x {{ item.params.height }}</div>
-              </div>
-            </div>
-
-            <div class="info-line">
-              <div class="wrapper">
-                <label>迭代步数：</label>
-                <div class="item-value">{{ item.params.steps }}</div>
-              </div>
-            </div>
-
-            <div class="info-line">
-              <div class="wrapper">
-                <label>引导系数：</label>
-                <div class="item-value">{{ item.params.cfg_scale }}</div>
-              </div>
-            </div>
-
-            <div class="info-line">
-              <div class="wrapper">
-                <label>随机因子：</label>
-                <div class="item-value">{{ item.params.seed }}</div>
-              </div>
-            </div>
-
-            <div v-if="item.params.hd_fix">
-              <el-divider>
-                高清修复
-              </el-divider>
               <div class="info-line">
                 <div class="wrapper">
-                  <label>重绘幅度：</label>
-                  <div class="item-value">{{ item.params.hd_redraw_rate }}</div>
+                  <label>采样方法：</label>
+                  <div class="item-value">{{ item.params.sampler }}</div>
                 </div>
               </div>
 
               <div class="info-line">
                 <div class="wrapper">
-                  <label>放大算法：</label>
-                  <div class="item-value">{{ item.params.hd_scale_alg }}</div>
-                </div>
-              </div>
-
-              <div class="info-line">
-                <div class="wrapper">
-                  <label>放大倍数：</label>
-                  <div class="item-value">{{ item.params.hd_scale }}</div>
+                  <label>图片尺寸：</label>
+                  <div class="item-value">{{ item.params.width }} x {{ item.params.height }}</div>
                 </div>
               </div>
 
               <div class="info-line">
                 <div class="wrapper">
                   <label>迭代步数：</label>
-                  <div class="item-value">{{ item.params.hd_steps }}</div>
+                  <div class="item-value">{{ item.params.steps }}</div>
                 </div>
               </div>
-            </div>
 
-            <div class="copy-params">
-              <el-button type="primary" round @click="copyParams(item)">画一张同款的</el-button>
-            </div>
+              <div class="info-line">
+                <div class="wrapper">
+                  <label>引导系数：</label>
+                  <div class="item-value">{{ item.params.cfg_scale }}</div>
+                </div>
+              </div>
 
-          </div>
-        </el-col>
+              <div class="info-line">
+                <div class="wrapper">
+                  <label>随机因子：</label>
+                  <div class="item-value">{{ item.params.seed }}</div>
+                </div>
+              </div>
+
+              <div v-if="item.params.hd_fix">
+                <el-divider>
+                  高清修复
+                </el-divider>
+                <div class="info-line">
+                  <div class="wrapper">
+                    <label>重绘幅度：</label>
+                    <div class="item-value">{{ item.params.hd_redraw_rate }}</div>
+                  </div>
+                </div>
+
+                <div class="info-line">
+                  <div class="wrapper">
+                    <label>放大算法：</label>
+                    <div class="item-value">{{ item.params.hd_scale_alg }}</div>
+                  </div>
+                </div>
+
+                <div class="info-line">
+                  <div class="wrapper">
+                    <label>放大倍数：</label>
+                    <div class="item-value">{{ item.params.hd_scale }}</div>
+                  </div>
+                </div>
+
+                <div class="info-line">
+                  <div class="wrapper">
+                    <label>迭代步数：</label>
+                    <div class="item-value">{{ item.params.hd_steps }}</div>
+                  </div>
+                </div>
+              </div>
+
+              <div class="copy-params">
+                <el-button type="primary" round @click="copyParams(item)">画一张同款的</el-button>
+              </div>
+
+            </div>
+          </el-col>
         </el-col>
       </el-row>
 
@@ -653,5 +653,5 @@ const copyParams = (row) => {
 </script>
 
 <style lang="stylus">
-@import "@/assets/css/image-mobile-sd.css"
+@import "@/assets/css/mobile/image-sd.css"
 </style>
diff --git a/web/src/views/mobile/Invitation.vue b/web/src/views/mobile/Invitation.vue
index 2cd0a223..c6df7bc1 100644
--- a/web/src/views/mobile/Invitation.vue
+++ b/web/src/views/mobile/Invitation.vue
@@ -1,85 +1,85 @@
 <template>
-    <div class="page-invitation" :style="{height: listBoxHeight + 'px'}">
-      <div class="inner">
-        <div class="title" style="padding-top: 50px">会员推广计划</div>
-        <div class="share-box">
-          <div class="info">
-            感谢您把此应用分享给您身边的朋友，分享成功注册后您将获得 <strong>{{ inviteChatCalls }}</strong>
-            次对话额度以及
-            <strong>{{ inviteImgCalls }}</strong> 次AI绘画额度作为奖励。
-            你可以保存下面的二维码或者直接复制分享您的专属推广链接发送给微信好友。
-          </div>
-
-          <div class="invite-qrcode">
-            <el-image :src="qrImg" fit="contain" />
-          </div>
-          <div class="invite-url">
-            <span>{{ inviteURL }}</span>
-            <el-button type="primary" plain class="copy-link" :data-clipboard-text="inviteURL">复制链接</el-button>
-          </div>
+  <div class="page-invitation" :style="{height: listBoxHeight + 'px'}">
+    <div class="inner">
+      <div class="title" style="padding-top: 50px">会员推广计划</div>
+      <div class="share-box">
+        <div class="info">
+          感谢您把此应用分享给您身边的朋友，分享成功注册后您将获得 <strong>{{ inviteChatCalls }}</strong>
+          次对话额度以及
+          <strong>{{ inviteImgCalls }}</strong> 次AI绘画额度作为奖励。
+          你可以保存下面的二维码或者直接复制分享您的专属推广链接发送给微信好友。
         </div>
 
-        <div class="invite-stats">
-          <el-row :gutter="20">
-            <el-col :span="8">
-              <div class="item-box yellow">
-                <el-row :gutter="10">
-                  <el-col :span="10">
-                    <div class="item-icon">
-                      <i class="iconfont icon-role"></i>
-                    </div>
-                  </el-col>
-                  <el-col :span="14">
-                    <div class="item-info">
-                      <div class="num">{{ hits }}</div>
-                      <div class="text">点击量</div>
-                    </div>
-                  </el-col>
-                </el-row>
-              </div>
-            </el-col>
-            <el-col :span="8">
-              <div class="item-box blue">
-                <el-row :gutter="10">
-                  <el-col :span="10">
-                    <div class="item-icon">
-                      <i class="iconfont icon-order"></i>
-                    </div>
-                  </el-col>
-                  <el-col :span="14">
-                    <div class="item-info">
-                      <div class="num">{{ regNum }}</div>
-                      <div class="text">注册量</div>
-                    </div>
-                  </el-col>
-                </el-row>
-              </div>
-            </el-col>
-            <el-col :span="8">
-              <div class="item-box green">
-                <el-row :gutter="10">
-                  <el-col :span="10">
-                    <div class="item-icon">
-                      <i class="iconfont icon-chart"></i>
-                    </div>
-                  </el-col>
-                  <el-col :span="14">
-                    <div class="item-info">
-                      <div class="num">{{ rate }}%</div>
-                      <div class="text">转化率</div>
-                    </div>
-                  </el-col>
-                </el-row>
-              </div>
-            </el-col>
-          </el-row>
-          <div class="title" style="padding: 20px">您推荐的用户</div>
-            <div class="invite-logs" style="padding-bottom: 50px">
-              <invite-list v-if="isLogin"/>
+        <div class="invite-qrcode">
+          <el-image :src="qrImg" fit="contain"/>
+        </div>
+        <div class="invite-url">
+          <span>{{ inviteURL }}</span>
+          <el-button type="primary" plain class="copy-link" :data-clipboard-text="inviteURL">复制链接</el-button>
+        </div>
+      </div>
+
+      <div class="invite-stats">
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <div class="item-box yellow">
+              <el-row :gutter="10">
+                <!--                <el-col :span="10">-->
+                <!--                  <div class="item-icon">-->
+                <!--                    <i class="iconfont icon-role"></i>-->
+                <!--                  </div>-->
+                <!--                </el-col>-->
+                <el-col :span="24">
+                  <div class="item-info">
+                    <div class="num">{{ hits }}</div>
+                    <div class="text">点击量</div>
+                  </div>
+                </el-col>
+              </el-row>
             </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="item-box blue">
+              <el-row :gutter="10">
+                <!--                <el-col :span="10">-->
+                <!--                  <div class="item-icon">-->
+                <!--                    <i class="iconfont icon-order"></i>-->
+                <!--                  </div>-->
+                <!--                </el-col>-->
+                <el-col :span="24">
+                  <div class="item-info">
+                    <div class="num">{{ regNum }}</div>
+                    <div class="text">注册量</div>
+                  </div>
+                </el-col>
+              </el-row>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="item-box green">
+              <el-row :gutter="10">
+                <!--                <el-col :span="10">-->
+                <!--                  <div class="item-icon">-->
+                <!--                    <i class="iconfont icon-chart"></i>-->
+                <!--                  </div>-->
+                <!--                </el-col>-->
+                <el-col :span="24">
+                  <div class="item-info">
+                    <div class="num">{{ rate }}%</div>
+                    <div class="text">转化率</div>
+                  </div>
+                </el-col>
+              </el-row>
+            </div>
+          </el-col>
+        </el-row>
+        <div class="title" style="padding: 20px">您推荐的用户</div>
+        <div class="invite-logs" style="padding-bottom: 50px">
+          <invite-list v-if="isLogin"/>
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script setup>
@@ -148,5 +148,5 @@ onMounted(() => {
 </script>
 
 <style lang="stylus" scoped>
-@import "@/assets/css/mobile-invitation.styl"
+@import "@/assets/css/mobile/invitation.styl"
 </style>
diff --git a/web/src/views/mobile/Profile.vue b/web/src/views/mobile/Profile.vue
index 148a0a5a..a75b6adf 100644
--- a/web/src/views/mobile/Profile.vue
+++ b/web/src/views/mobile/Profile.vue
@@ -1,50 +1,51 @@
 <template>
   <div class="app-background" theme="dark">
-  <div class="member">
-    <div class="title" style="padding-top: 50px">
-      会员中心
-    </div>
-    <div class="inner" :style="{height: listBoxHeight + 'px'}">
-      <div class="product-box">
-            <ItemList :items="list" v-if="list.length > 0" :gap="30" >
-              <template #default="scope">
-                <div class="product-item" :style="{width: scope.width+'px'}">
-                  <div class="image-container">
-                    <el-image :src="vipImg" fit="cover"/>
+    <div class="member">
+      <div class="title" style="padding-top: 50px">
+        会员中心
+      </div>
+      <div class="inner" :style="{height: listBoxHeight + 'px'}">
+        <div class="product-box">
+          <ItemList :items="list" v-if="list.length > 0" :gap="30">
+            <template #default="scope">
+              <div class="product-item" :style="{width: scope.width+'px'}">
+                <div class="image-container">
+                  <el-image :src="vipImg" fit="cover"/>
+                </div>
+                <div class="product-title">
+                  <span class="name">{{ scope.item.name }}</span>
+                </div>
+                <div class="product-info">
+                  <div class="info-line">
+                    <span class="label">商品原价：</span>
+                    <span class="price">￥{{ scope.item.price }}</span>
                   </div>
-                  <div class="product-title">
-                    <span class="name">{{ scope.item.name }}</span>
+                  <div class="info-line">
+                    <span class="label">促销立减：</span>
+                    <span class="price">￥{{ scope.item.discount }}</span>
+                  </div>
+                  <div class="info-line">
+                    <span class="label">有效期：</span>
+                    <span class="expire" v-if="scope.item.days > 0">{{ scope.item.days }}天</span>
+                    <span class="expire" v-else>当月有效</span>
                   </div>
-                  <div class="product-info">
-                    <div class="info-line">
-                      <span class="label">商品原价：</span>
-                      <span class="price">￥{{ scope.item.price }}</span>
-                    </div>
-                    <div class="info-line">
-                      <span class="label">促销立减：</span>
-                      <span class="price">￥{{ scope.item.discount }}</span>
-                    </div>
-                    <div class="info-line">
-                      <span class="label">有效期：</span>
-                      <span class="expire" v-if="scope.item.days > 0">{{ scope.item.days }}天</span>
-                      <span class="expire" v-else>当月有效</span>
-                    </div>
 
-                    <div class="pay-way">
-                      <el-button type="primary" @click="alipay(scope.item)" size="small" v-if="payWays['alipay']">
-                        <i class="iconfont icon-alipay"></i> 支付宝
-                      </el-button>
-                      <el-button type="success" @click="huPiPay(scope.item)" size="small" v-if="payWays['hupi']">
-                        <span v-if="payWays['hupi']['name'] === 'wechat'"><i class="iconfont icon-wechat-pay"></i> 微信</span>
-                        <span v-else><i class="iconfont icon-alipay"></i> 支付宝</span>
-                      </el-button>
-                    </div>
+                  <div class="pay-way">
+                    <el-button type="primary" @click="alipay(scope.item)" size="small" v-if="payWays['alipay']">
+                      <i class="iconfont icon-alipay"></i> 支付宝
+                    </el-button>
+                    <el-button type="success" @click="huPiPay(scope.item)" size="small" v-if="payWays['hupi']">
+                      <span v-if="payWays['hupi']['name'] === 'wechat'"><i
+                          class="iconfont icon-wechat-pay"></i> 微信</span>
+                      <span v-else><i class="iconfont icon-alipay"></i> 支付宝</span>
+                    </el-button>
                   </div>
                 </div>
-              </template>
-            </ItemList>
-          </div>
-      <el-row>
+              </div>
+            </template>
+          </ItemList>
+        </div>
+        <el-row>
           <div class="user-profile">
             <user-profile/>
             <el-row class="user-opt" :gutter="20">
@@ -66,62 +67,62 @@
               </el-col>
             </el-row>
           </div>
-      </el-row>
+        </el-row>
+      </div>
+      <login-dialog :show="showLoginDialog" @hide="showLoginDialog = false"/>
+      <password-dialog v-if="isLogin" :show="showPasswordDialog" width="100%" @hide="showPasswordDialog = false"
+                       @logout="logout"/>
+      <bind-mobile v-if="isLogin" :show="showBindMobileDialog" width="100%" :mobile="user.mobile"
+                   @hide="showBindMobileDialog = false"/>
+      <reward-verify v-if="isLogin" :show="showRewardVerifyDialog" @hide="showRewardVerifyDialog = false"/>
+      <el-dialog
+          v-model="showRewardDialog"
+          :show-close="true"
+          width="100%"
+          title="参与众筹"
+      >
+        <el-alert type="info" :closable="false">
+          <div style="font-size: 14px">您好，众筹 9.9元，就可以兑换 100 次对话，以此来覆盖我们的 OpenAI
+            账单和服务器的费用。<strong
+                style="color: #f56c6c">由于本人没有开通微信支付，付款后请凭借转账单号,点击【众筹核销】按钮手动核销。</strong>
+          </div>
+        </el-alert>
+        <div style="text-align: center;padding-top: 10px;">
+          <el-image v-if="enableReward" :src="rewardImg"/>
+        </div>
+      </el-dialog>
+
+      <el-dialog
+          v-model="showPayDialog"
+          :close-on-click-modal="false"
+          :show-close="true"
+          :width="400"
+          title="充值订单支付">
+        <div class="pay-container">
+          <div class="count-down">
+            <count-down :second="orderTimeout" @timeout="refreshPayCode" ref="countDownRef"/>
+          </div>
+
+          <div class="pay-qrcode" v-loading="loading">
+            <el-image :src="qrcode"/>
+          </div>
+
+          <div class="tip success" v-if="text !== ''">
+            <el-icon>
+              <SuccessFilled/>
+            </el-icon>
+            <span class="text">{{ text }}</span>
+          </div>
+          <div class="tip" v-else>
+            <el-icon>
+              <InfoFilled/>
+            </el-icon>
+            <span class="text">请打开手机{{ payName }}扫码支付</span>
+          </div>
+        </div>
+      </el-dialog>
     </div>
-    <login-dialog :show="showLoginDialog" @hide="showLoginDialog = false"/>
-    <password-dialog v-if="isLogin" :show="showPasswordDialog" width="100%" @hide="showPasswordDialog = false"
-                     @logout="logout"/>
-    <bind-mobile v-if="isLogin" :show="showBindMobileDialog" width="100%" :mobile="user.mobile"
-                 @hide="showBindMobileDialog = false"/>
-    <reward-verify v-if="isLogin" :show="showRewardVerifyDialog" @hide="showRewardVerifyDialog = false"/>
-    <el-dialog
-        v-model="showRewardDialog"
-        :show-close="true"
-        width="100%"
-        title="参与众筹"
-    >
-      <el-alert type="info" :closable="false">
-        <div style="font-size: 14px">您好，众筹 9.9元，就可以兑换 100 次对话，以此来覆盖我们的 OpenAI
-          账单和服务器的费用。<strong
-              style="color: #f56c6c">由于本人没有开通微信支付，付款后请凭借转账单号,点击【众筹核销】按钮手动核销。</strong>
-        </div>
-      </el-alert>
-      <div style="text-align: center;padding-top: 10px;">
-        <el-image v-if="enableReward" :src="rewardImg"/>
-      </div>
-    </el-dialog>
-
-    <el-dialog
-        v-model="showPayDialog"
-        :close-on-click-modal="false"
-        :show-close="true"
-        :width="400"
-        title="充值订单支付">
-      <div class="pay-container">
-        <div class="count-down">
-          <count-down :second="orderTimeout" @timeout="refreshPayCode" ref="countDownRef"/>
-        </div>
-
-        <div class="pay-qrcode" v-loading="loading">
-          <el-image :src="qrcode"/>
-        </div>
-
-        <div class="tip success" v-if="text !== ''">
-          <el-icon>
-            <SuccessFilled/>
-          </el-icon>
-          <span class="text">{{ text }}</span>
-        </div>
-        <div class="tip" v-else>
-          <el-icon>
-            <InfoFilled/>
-          </el-icon>
-          <span class="text">请打开手机{{ payName }}扫码支付</span>
-        </div>
-      </div>
-    </el-dialog>
   </div>
-</div>
 </template>
 
 <script setup>
@@ -290,5 +291,5 @@ const logout = function () {
 </script>
 
 <style lang="stylus">
-@import "@/assets/css/mobile-profile.styl"
+@import "@/assets/css/mobile/profile.styl"
 </style>