merge pull request #72

web/src/assets/css/mobile-chat-list.css

@@ -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;
-  }

web/src/assets/css/mobile-chat-session.css

@@ -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;
-      }
-    }
-  }

web/src/assets/css/mobile-invitation.css

@@ -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;
-      }
-    }
-  }
-}

web/src/assets/css/mobile-profile.css

@@ -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;
-      }
-    }
-  }
-}

web/src/assets/css/mobile/apps.css

@@ -8,13 +8,10 @@
   background-color: #282828;
   height: 100vh;
 }
-.mobile-setting {
+.mobile-setting .content {
-  .content {
   padding-top: 60px;
-
+}
-    .van-field__label {
+.mobile-setting .content .van-field__label {
   width: 100px;
   text-align: right;
-    }
-  }
 }

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;
+}

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;
+}

web/src/assets/css/mobile/home.css

@@ -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,7 +37,7 @@
   transition: opacity 0.5s;
   z-index: -1;
 }
-.mobile-home .van-tabbar.activeTab::before {
+.mobile-home .van-tabbar.activeTab before {
   opacity: 1;
 }
 .router-view {

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"

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: #282828;
-  background-color: #1c1c1c;
+  min-width: 92%;
-  min-width: 97%;
+  max-width: 92%;
-  max-width: 97%;
+  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%;
+  max-height: 100px;
-  min-height: 100%;
+  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;
-}

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 {

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;
+}

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像素 */;
+}

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%;
+}

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
+
+    }
+  }
+}

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;
+}

web/src/assets/css/task-mobile-list.css

@@ -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;
-}

web/src/components/mobile/ChatReply.vue

@@ -106,12 +106,18 @@ onMounted(() => {
           margin-top 0
         }
 
-        p > code {
+        p {
+          code {
             color #2b2b2b
             background-color #c1c1c1
             padding 2px 5px
             border-radius 5px
           }
+
+          img {
+            max-width 100%
+          }
+        }
       }
     }
 

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 {

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

web/src/views/mobile/Apps.vue

@@ -1,15 +1,15 @@
 <template>
-<div class="app-background">
+  <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>

web/src/views/mobile/ChatList.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="app-background">
+  <div class="app-background">
     <div v-if="isLogin" class="container mobile-chat-list">
       <van-nav-bar
           :title="title"
@@ -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>

web/src/views/mobile/ChatSession.vue

@@ -87,7 +87,7 @@
         </div>
       </div>
     </van-config-provider>
-</div>
+  </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>

web/src/views/mobile/Home.vue

@@ -1,7 +1,7 @@
 <template>
-<div class="banner">
+  <div class="banner">
     <h1 class="banner-title">ChatPuls-V3 智能助理</h1>
-</div>
+  </div>
   <van-config-provider theme="dark">
     <div class="mobile-home">
       <router-view/>
@@ -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>

web/src/views/mobile/ImageSd.vue

@@ -43,7 +43,7 @@
                 </template>
               </el-form-item>
             </div>
-<!-- 这是一个示例注释
+            <!-- 这是一个示例注释
                         <div class="param-line">
                           <el-form-item label="迭代步数">
                             <template #default>
@@ -275,7 +275,7 @@
               </el-tooltip>
               <el-tag type="success" style="margin-left: 12px;">绘图可用额度：{{ imgCalls }}</el-tag>
             </div>
-<!--
+            <!--
                         <div class="param-line pt">
                           <span>反向提示词：</span>
                           <el-tooltip
@@ -296,7 +296,7 @@
                               placeholder="反向提示词"
                           />
                         </div>
--->
+            -->
           </el-form>
         </div>
         <div class="submit-btn">
@@ -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>

web/src/views/mobile/Invitation.vue

@@ -11,7 +11,7 @@
         </div>
 
         <div class="invite-qrcode">
-            <el-image :src="qrImg" fit="contain" />
+          <el-image :src="qrImg" fit="contain"/>
         </div>
         <div class="invite-url">
           <span>{{ inviteURL }}</span>
@@ -24,12 +24,12 @@
           <el-col :span="8">
             <div class="item-box yellow">
               <el-row :gutter="10">
-                  <el-col :span="10">
+                <!--                <el-col :span="10">-->
-                    <div class="item-icon">
+                <!--                  <div class="item-icon">-->
-                      <i class="iconfont icon-role"></i>
+                <!--                    <i class="iconfont icon-role"></i>-->
-                    </div>
+                <!--                  </div>-->
-                  </el-col>
+                <!--                </el-col>-->
-                  <el-col :span="14">
+                <el-col :span="24">
                   <div class="item-info">
                     <div class="num">{{ hits }}</div>
                     <div class="text">点击量</div>
@@ -41,12 +41,12 @@
           <el-col :span="8">
             <div class="item-box blue">
               <el-row :gutter="10">
-                  <el-col :span="10">
+                <!--                <el-col :span="10">-->
-                    <div class="item-icon">
+                <!--                  <div class="item-icon">-->
-                      <i class="iconfont icon-order"></i>
+                <!--                    <i class="iconfont icon-order"></i>-->
-                    </div>
+                <!--                  </div>-->
-                  </el-col>
+                <!--                </el-col>-->
-                  <el-col :span="14">
+                <el-col :span="24">
                   <div class="item-info">
                     <div class="num">{{ regNum }}</div>
                     <div class="text">注册量</div>
@@ -58,12 +58,12 @@
           <el-col :span="8">
             <div class="item-box green">
               <el-row :gutter="10">
-                  <el-col :span="10">
+                <!--                <el-col :span="10">-->
-                    <div class="item-icon">
+                <!--                  <div class="item-icon">-->
-                      <i class="iconfont icon-chart"></i>
+                <!--                    <i class="iconfont icon-chart"></i>-->
-                    </div>
+                <!--                  </div>-->
-                  </el-col>
+                <!--                </el-col>-->
-                  <el-col :span="14">
+                <el-col :span="24">
                   <div class="item-info">
                     <div class="num">{{ rate }}%</div>
                     <div class="text">转化率</div>
@@ -148,5 +148,5 @@ onMounted(() => {
 </script>
 
 <style lang="stylus" scoped>
-@import "@/assets/css/mobile-invitation.styl"
+@import "@/assets/css/mobile/invitation.styl"
 </style>

web/src/views/mobile/Profile.vue

@@ -6,7 +6,7 @@
       </div>
       <div class="inner" :style="{height: listBoxHeight + 'px'}">
         <div class="product-box">
-            <ItemList :items="list" v-if="list.length > 0" :gap="30" >
+          <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">
@@ -35,7 +35,8 @@
                       <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-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>
@@ -121,7 +122,7 @@
         </div>
       </el-dialog>
     </div>
-</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>