diff --git a/web/src/assets/css/custom-mobile-scroll.css b/web/src/assets/css/custom-mobile-scroll.css new file mode 100644 index 0000000..eb7e1d0 --- /dev/null +++ b/web/src/assets/css/custom-mobile-scroll.css @@ -0,0 +1,13 @@ +.custom-scroll ::-webkit-scrollbar { + width: 8px; /* 滚动条宽度 */ +} +.custom-scroll ::-webkit-scrollbar-track { + background-color: #282c34; +} +.custom-scroll ::-webkit-scrollbar-thumb { + background-color: #444; + border-radius: 8px; +} +.custom-scroll ::-webkit-scrollbar-thumb:hover { + background-color: #666; +} diff --git a/web/src/assets/css/custom-mobile-scroll.styl b/web/src/assets/css/custom-mobile-scroll.styl new file mode 100644 index 0000000..eb03fff --- /dev/null +++ b/web/src/assets/css/custom-mobile-scroll.styl @@ -0,0 +1,26 @@ +.custom-scroll { + /* 修改滚动条的颜色 */ + + ::-webkit-scrollbar { + width: 8px; /* 滚动条宽度 */ + } + + /* 修改滚动条轨道的背景颜色 */ + + ::-webkit-scrollbar-track { + background-color: #282C34; + } + + /* 修改滚动条的滑块颜色 */ + + ::-webkit-scrollbar-thumb { + background-color: #444444; + border-radius 8px + } + + /* 修改滚动条的滑块的悬停颜色 */ + + ::-webkit-scrollbar-thumb:hover { + background-color: #666666; + } +} \ No newline at end of file diff --git a/web/src/assets/css/image-mj.css b/web/src/assets/css/image-mj.css index 44f552b..d421a77 100644 --- a/web/src/assets/css/image-mj.css +++ b/web/src/assets/css/image-mj.css @@ -299,7 +299,6 @@ overflow: hidden; border-radius: 6px; transition: all 0.3s ease; /* 添加过渡效果 */ - position: relative; } .page-mj .inner .task-list-box .finish-job-list .job-item .opt .opt-line { margin: 6px 0; @@ -328,15 +327,6 @@ font-size: 20px; cursor: pointer; } -.page-mj .inner .task-list-box .finish-job-list .job-item .remove { - display: none; - position: absolute; - right: 10px; - top: 10px; -} -.page-mj .inner .task-list-box .finish-job-list .job-item:hover .remove { - display: block; -} .page-mj .inner .task-list-box .finish-job-list .animate:hover { box-shadow: 0 0 10px rgba(71,255,241,0.6); /* 添加阴影效果 */ transform: translateY(-10px); /* 向上移动10像素 */ diff --git a/web/src/assets/css/image-mobile-list.css b/web/src/assets/css/image-mobile-list.css new file mode 100644 index 0000000..909001c --- /dev/null +++ b/web/src/assets/css/image-mobile-list.css @@ -0,0 +1,252 @@ + +.page-sd { + background-color: #282828; +} +.page-sd .inner { + display: flex; +} +.page-sd .inner .sd-box { + margin: 10px; + background-color: #282828; + min-width: 92%; + max-width: 92%; + padding: 0px; + border-radius: 0px; + color: #fff; + font-size: 14px; +} +.page-sd .inner .sd-box h2 { + font-weight: bold; + font-size: 20px; + 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: 10px; + overflow: auto; +} +.page-sd .inner .sd-box .sd-params .param-line { + padding: 0 10px; +} +.page-sd .inner .sd-box .sd-params .param-line .el-icon { + position: relative; + top: 3px; +} +.page-sd .inner .sd-box .sd-params .param-line .el-input__suffix-inner .el-icon { + top: 0; +} +.page-sd .inner .sd-box .sd-params .param-line .grid-content, +.page-sd .inner .sd-box .sd-params .param-line .form-item-inner { + display: flex; +} +.page-sd .inner .sd-box .sd-params .param-line .grid-content .el-icon, +.page-sd .inner .sd-box .sd-params .param-line .form-item-inner .el-icon { + margin-left: 10px; + margin-top: 2px; +} +.page-sd .inner .sd-box .sd-params .param-line.pt { + padding-top: 5px; + padding-bottom: 5px; +} +.page-sd .inner .sd-box .submit-btn { + padding: 10px 15px 0 15px; + text-align: center; +} +.page-sd .inner .sd-box .submit-btn .el-button { + width: 100%; +} +.page-sd .inner .sd-box .submit-btn .el-button span { + color: #2d3a4b; +} +.page-sd .inner .el-form .el-form-item__label { + color: #fff; +} +.page-sd .inner .task-list-box { + width: 100%; + padding: 10px; + color: #fff; + overflow-x: hidden; +} +.page-sd .inner .task-list-box .running-job-list .job-item { + width: 100%; + padding: 2px; + background-color: #555; +} +.page-sd .inner .task-list-box .running-job-list .job-item .job-item-inner { + position: relative; + height: 100%; + overflow: hidden; +} +.page-sd .inner .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; +} +.page-sd .inner .task-list-box .running-job-list .job-item .job-item-inner .progress span { + font-size: 20px; + color: #fff; +} +.page-sd .inner .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; /* 添加过渡效果 */ +} +.page-sd .inner .task-list-box .finish-job-list .job-item .opt .opt-line { + margin: 6px 0; +} +.page-sd .inner .task-list-box .finish-job-list .job-item .opt .opt-line ul { + display: flex; + flex-flow: row; +} +.page-sd .inner .task-list-box .finish-job-list .job-item .opt .opt-line ul li { + margin-right: 6px; +} +.page-sd .inner .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; +} +.page-sd .inner .task-list-box .finish-job-list .job-item .opt .opt-line ul li a:hover { + background-color: #6d6f78; +} +.page-sd .inner .task-list-box .finish-job-list .job-item .opt .opt-line ul .show-prompt { + font-size: 20px; + cursor: pointer; +} +.page-sd .inner .task-list-box .finish-job-list .animate:hover { + box-shadow: 0 0 10px rgba(71,255,241,0.6); /* 添加阴影效果 */ + transform: translateY(-10px); /* 向上移动10像素 */ +} +.page-sd .inner .task-list-box .el-image { + width: 100%; + height: 100%; + overflow: visible; +} +.page-sd .inner .task-list-box .el-image img { + height: 100%; +} +.page-sd .inner .task-list-box .el-image .el-image-viewer__wrapper img { + width: auto; + height: auto; +} +.page-sd .inner .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; +} +.page-sd .inner .task-list-box .el-image .image-slot .iconfont { + font-size: 50px; + margin-bottom: 10px; +} +.page-sd .inner .task-list-box .el-image.upscale { + max-height: 100%; +} +.page-sd .inner .task-list-box .el-image.upscale img { + height: 100%; +} +.page-sd .inner .task-list-box .el-image.upscale .el-image-viewer__wrapper img { + width: auto; + height: auto; +} +.page-sd .el-overlay-dialog .el-dialog { + background-color: #1a1b1e; +} +.page-sd .el-overlay-dialog .el-dialog .el-dialog__header .el-dialog__title { + color: #f5f5f5; +} +.page-sd .el-overlay-dialog .el-dialog .el-dialog__body { + padding: 0 0 0 15px !important; + display: flex; + height: 100%; +} +.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row { + width: 100%; +} +.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .img-container { + display: flex; + justify-content: center; +} +.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .img-container .image-slot { + display: flex; + height: 100vh; + align-items: center; + justify-content: center; +} +.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .img-container .image-slot .el-icon { + font-size: 60px; +} +.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info { + background-color: #25262b; + padding: 1rem 1.5rem; +} +.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .info-line { + width: 100%; +} +.page-sd .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: 100%; + min-height: 100%; + position: relative; +} +.page-sd .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; +} +.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .info-line .wrapper { + margin-top: 10px; + display: flex; +} +.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .info-line .wrapper label { + display: flex; + width:100%; + color: #a5a5a5; +} +.page-sd .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; +} +.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .copy-params { + padding: 20px 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; +} diff --git a/web/src/assets/css/image-mobile-list.styl b/web/src/assets/css/image-mobile-list.styl new file mode 100644 index 0000000..91b4f95 --- /dev/null +++ b/web/src/assets/css/image-mobile-list.styl @@ -0,0 +1,106 @@ +.page-sd { + background-color: #282828; + + .inner { + display: flex; + align-items: center; + justify-content: center; + + .sd-box { + background-color #282828 + min-width 92% + max-width 92% + padding 0px + border-radius 0px + color #ffffff; + font-size 14px + + h2 { + font-weight: bold; + font-size 20px + text-align center + color #fff + } + + // 隐藏滚动条 + + ::-webkit-scrollbar { + width: 0; + height: 0; + background-color: transparent; + } + + .sd-params { + margin-top 10px + overflow auto + + + .param-line { + padding 0 10px + + .el-icon { + position relative + top 3px + } + + .el-input__suffix-inner { + .el-icon { + top 0 + } + } + + .grid-content + .form-item-inner { + display flex + + .el-icon { + margin-left 10px + margin-top 2px + } + } + + } + + .param-line.pt { + padding-top 5px + padding-bottom 5px + } + } + + .submit-btn { + padding 10px 15px 0 15px + text-align center + + .el-button { + width 100% + + span { + color #2D3A4B + } + } + } + } + + .el-form { + .el-form-item__label { + color #ffffff + } + } + + @import "task-mobile-list.styl" + } + + @import "sd-task-mobile-dialog.styl" + + + .mj-list-item-prompt { + .el-icon { + margin-left 10px + cursor pointer + position relative + top 2px + } + } + +} + diff --git a/web/src/assets/css/image-mobile-sd.css b/web/src/assets/css/image-mobile-sd.css new file mode 100644 index 0000000..e5e8bd7 --- /dev/null +++ b/web/src/assets/css/image-mobile-sd.css @@ -0,0 +1,261 @@ +.page-sd { + background-color: #1c1c1c; +} +.page-sd .inner { + display: flex; +} +.page-sd .inner .sd-box { + margin: 5px; + background-color: #1c1c1c; + min-width: 97%; + max-width: 97%; + color: #fff; + font-size: 14px; +} +.page-sd .inner .sd-box h2 { + font-weight: bold; + font-size: 16px; + text-align: center; + color: #fff; +} +.page-sd .inner .sd-box .sd-params { + margin-top: 5px; + overflow: auto; +} +.page-sd .inner .sd-box .sd-params .param-line { + padding: 0 10px; +} +.page-sd .inner .sd-box .sd-params .param-line .el-icon { + position: relative; + top: 3px; +} +.page-sd .inner .sd-box .sd-params .param-line .el-input__suffix-inner .el-icon { + top: 0; +} +.page-sd .inner .sd-box .sd-params .param-line .grid-content, +.page-sd .inner .sd-box .sd-params .param-line .form-item-inner { + display: flex; +} +.page-sd .inner .sd-box .sd-params .param-line .grid-content .el-icon, +.page-sd .inner .sd-box .sd-params .param-line .form-item-inner .el-icon { + margin-left: 10px; + margin-top: 2px; +} +.page-sd .inner .sd-box .sd-params .param-line.pt { + padding-top: 5px; + padding-bottom: 5px; +} +.page-sd .inner .sd-box .submit-btn { + padding: 10px 15px 10px 15px; + text-align: center; +} +.page-sd .inner .sd-box .submit-btn .el-button { + width: 100%; +} +.page-sd .inner .sd-box .submit-btn .el-button span { + color: #2d3a4b; +} +.page-sd .inner .el-form .el-form-item__label { + color: #fff; +} +.page-sd .inner .task-list-box { + width: 100%; + color: #fff; + overflow-x: hidden; +} +.page-sd .inner .task-list-box .running-job-list .job-item { + width: 100%; + padding: 2px; + background-color: #555; +} +.page-sd .inner .task-list-box .running-job-list .job-item .job-item-inner { + position: relative; + height: 100%; + overflow: hidden; +} +.page-sd .inner .task-list-box .running-job-list .job-item .job-item-inner .progress { + position: absolute; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} +.page-sd .inner .task-list-box .running-job-list .job-item .job-item-inner .progress span { + font-size: 20px; + color: #fff; +} +.page-sd .inner .task-list-box .finish-job-list .job-item { + width: 100%; + height: 100%; + border: 1px solid #666; + padding: 3px; + overflow: hidden; + border-radius: 6px; + transition: all 0.3s ease; /* 添加过渡效果 */ +} +.page-sd .inner .task-list-box .finish-job-list .job-item .opt .opt-line { + margin: 6px 0; +} +.page-sd .inner .task-list-box .finish-job-list .job-item .opt .opt-line ul { + display: flex; + flex-flow: row; +} +.page-sd .inner .task-list-box .finish-job-list .job-item .opt .opt-line ul li { + margin-right: 6px; +} +.page-sd .inner .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; +} +.page-sd .inner .task-list-box .finish-job-list .job-item .opt .opt-line ul li a:hover { + background-color: #6d6f78; +} +.page-sd .inner .task-list-box .finish-job-list .job-item .opt .opt-line ul .show-prompt { + font-size: 20px; + cursor: pointer; +} +.page-sd .inner .task-list-box .finish-job-list .animate:hover { + box-shadow: 0 0 10px rgba(71,255,241,0.6); /* 添加阴影效果 */ + transform: translateY(-10px); /* 向上移动10像素 */ +} +.page-sd .inner .task-list-box .el-image { + width: 100%; + height: 100%; + overflow: visible; +} +.page-sd .inner .task-list-box .el-image img { + height: 100%; +} +.page-sd .inner .task-list-box .el-image .el-image-viewer__wrapper img { + width: auto; + height: auto; +} +.page-sd .inner .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; +} +.page-sd .inner .task-list-box .el-image .image-slot .iconfont { + font-size: 50px; + margin-bottom: 10px; +} +.page-sd .inner .task-list-box .el-image.upscale { + max-height: 100%; +} +.page-sd .inner .task-list-box .el-image.upscale img { + height: 100%; +} +.page-sd .inner .task-list-box .el-image.upscale .el-image-viewer__wrapper img { + width: auto; + height: auto; +} +.page-sd .el-overlay-dialog .el-dialog { + background-color: #1a1b1e; +} +.page-sd .el-overlay-dialog .el-dialog .el-dialog__header .el-dialog__title { + color: #f5f5f5; +} +.page-sd .el-overlay-dialog .el-dialog .el-dialog__body { + padding: 0 0 0 15px !important; + display: flex; + height: 100%; +} +.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row { + width: 100%; +} +.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .img-container { + display: flex; + justify-content: center; +} +.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .img-container .image-slot { + display: flex; + height: 100vh; + align-items: center; + justify-content: center; +} +.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .img-container .image-slot .el-icon { + font-size: 60px; +} +.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info { + background-color: #25262b; + padding: 1rem 1.5rem; +} +.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .info-line { + width: 100%; +} +.page-sd .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: 100%; + min-height: 100%; + position: relative; +} +.page-sd .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; +} +.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .info-line .wrapper { + margin-top: 10px; + display: flex; +} +.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .info-line .wrapper label { + display: flex; + width:100%; + color: #a5a5a5; +} +.page-sd .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; +} +.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .copy-params { + padding: 20px 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 { + + 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/image-mobile-sd.styl new file mode 100644 index 0000000..8f615f8 --- /dev/null +++ b/web/src/assets/css/image-mobile-sd.styl @@ -0,0 +1,106 @@ +.page-sd { + background-color: #282828; + + .inner { + display: flex; + align-items: center; + justify-content: center; + + .sd-box { + background-color #282828 + min-width 92% + max-width 92% + padding 0px + border-radius 0px + color #ffffff; + font-size 14px + + h2 { + font-weight: bold; + font-size 16px + text-align center + color #fff + } + + // 隐藏滚动条 + + ::-webkit-scrollbar { + width: 0; + height: 0; + background-color: transparent; + } + + .sd-params { + margin-top 10px + overflow auto + + + .param-line { + padding 0 10px + + .el-icon { + position relative + top 3px + } + + .el-input__suffix-inner { + .el-icon { + top 0 + } + } + + .grid-content + .form-item-inner { + display flex + + .el-icon { + margin-left 10px + margin-top 2px + } + } + + } + + .param-line.pt { + padding-top 5px + padding-bottom 5px + } + } + + .submit-btn { + padding 10px 15px 0 15px + text-align center + + .el-button { + width 100% + + span { + color #2D3A4B + } + } + } + } + + .el-form { + .el-form-item__label { + color #ffffff + } + } + + @import "task-mobile-list.styl" + } + + @import "sd-task-mobile-dialog.styl" + + + .mj-list-item-prompt { + .el-icon { + margin-left 10px + cursor pointer + position relative + top 2px + } + } + +} + diff --git a/web/src/assets/css/image-sd.css b/web/src/assets/css/image-sd.css index edb5887..9bd76f3 100644 --- a/web/src/assets/css/image-sd.css +++ b/web/src/assets/css/image-sd.css @@ -184,7 +184,6 @@ overflow: hidden; border-radius: 6px; transition: all 0.3s ease; /* 添加过渡效果 */ - position: relative; } .page-sd .inner .task-list-box .finish-job-list .job-item .opt .opt-line { margin: 6px 0; @@ -213,15 +212,6 @@ font-size: 20px; cursor: pointer; } -.page-sd .inner .task-list-box .finish-job-list .job-item .remove { - display: none; - position: absolute; - right: 10px; - top: 10px; -} -.page-sd .inner .task-list-box .finish-job-list .job-item:hover .remove { - display: block; -} .page-sd .inner .task-list-box .finish-job-list .animate:hover { box-shadow: 0 0 10px rgba(71,255,241,0.6); /* 添加阴影效果 */ transform: translateY(-10px); /* 向上移动10像素 */ diff --git a/web/src/assets/css/mobile-apps.css b/web/src/assets/css/mobile-apps.css new file mode 100644 index 0000000..d4c9441 --- /dev/null +++ b/web/src/assets/css/mobile-apps.css @@ -0,0 +1,20 @@ +.title { + color: #fff; + text-align: center; + font-size: 16px; + font-weight: bold; +} +.app-background { + 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 diff --git a/web/src/assets/css/mobile-apps.styl b/web/src/assets/css/mobile-apps.styl new file mode 100644 index 0000000..235dcbd --- /dev/null +++ b/web/src/assets/css/mobile-apps.styl @@ -0,0 +1,20 @@ +.title { + color #fff + text-align center + font-size 16px + font-weight bold +} +.app-background { + 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 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 0000000..90ea05f --- /dev/null +++ b/web/src/assets/css/mobile-chat-list.css @@ -0,0 +1,57 @@ +.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-list.styl b/web/src/assets/css/mobile-chat-list.styl new file mode 100644 index 0000000..a5362d8 --- /dev/null +++ b/web/src/assets/css/mobile-chat-list.styl @@ -0,0 +1,58 @@ +$fontSize = 16px; +.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 $fontSize + color: #fff; + 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 new file mode 100644 index 0000000..7b47670 --- /dev/null +++ b/web/src/assets/css/mobile-chat-session.css @@ -0,0 +1,52 @@ +.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-chat-session.styl b/web/src/assets/css/mobile-chat-session.styl new file mode 100644 index 0000000..861cc8b --- /dev/null +++ b/web/src/assets/css/mobile-chat-session.styl @@ -0,0 +1,51 @@ +.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 50px + 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-home.css b/web/src/assets/css/mobile-home.css new file mode 100644 index 0000000..d759ba4 --- /dev/null +++ b/web/src/assets/css/mobile-home.css @@ -0,0 +1,45 @@ +.my-tabbar { + background-color: #171717; + box-shadow: -3px 4px 16px #000; + box-sizing: border-box; +} +.banner { + display: flex; + justify-content: center; + align-items: center; + background-color: #171717; + border-bottom-right-radius: 10px; + box-shadow: 0 -4px 13px #000; + height: 40px; + width: 100%; + position: fixed; + z-index: 2; /* Add z-index */ +} +.banner-title { + color: #2CC995; + font-size: 20px; + font-weight: bold; + text-shadow: 0 -4px 13px #000; +} +.mobile-home { + background-color: #171717; +} +.mobile-home .van-tabbar::before { + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 50px; + background-color: #171717; + border-top-left-radius: 10px; + border-top-right-radius: 10px; + opacity: 0; + transition: opacity 0.5s; + z-index: -1; +} +.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 new file mode 100644 index 0000000..d03c2a5 --- /dev/null +++ b/web/src/assets/css/mobile-home.styl @@ -0,0 +1,45 @@ +.my-tabbar { + background-color #171717 + box-shadow -3px 4px 16px #000 + box-sizing border-box +} +.banner { + display flex + justify-content center + align-items center + background-color #171717 + border-bottom-right-radius 10px + box-shadow 0 -4px 13px #000 + height 40px + width 100% + position fixed + z-index 2 /* Add z-index */ +} +.banner-title { + color #2CC995 + font-size 20px + font-weight bold + text-shadow 0 -4px 13px #000 +} +.mobile-home { + background-color #171717 +} +.mobile-home .van-tabbar before { + position absolute + bottom 0 + left 0 + right 0 + height 50px + background-color #171717 + border-top-left-radius 10px + border-top-right-radius 10px + opacity 0 + transition opacity 0.5s + z-index -1 +} +.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-invitation.css b/web/src/assets/css/mobile-invitation.css new file mode 100644 index 0000000..d0ffc1b --- /dev/null +++ b/web/src/assets/css/mobile-invitation.css @@ -0,0 +1,94 @@ +.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-invitation.styl b/web/src/assets/css/mobile-invitation.styl new file mode 100644 index 0000000..b6a0b40 --- /dev/null +++ b/web/src/assets/css/mobile-invitation.styl @@ -0,0 +1,94 @@ +.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 new file mode 100644 index 0000000..dfd2d05 --- /dev/null +++ b/web/src/assets/css/mobile-profile.css @@ -0,0 +1,156 @@ +.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-profile.styl b/web/src/assets/css/mobile-profile.styl new file mode 100644 index 0000000..ee8c4a2 --- /dev/null +++ b/web/src/assets/css/mobile-profile.styl @@ -0,0 +1,149 @@ +.app-background { + background-color #1c1c1c + height 100vh +} +.member { + background-color #1c1c1c + 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 280px + height 280px + } + } + .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 #1c1c1c + font-size 16px + color #ffffff + padding 5px + font-weight bold + } + .inner { + color #ffffff + overflow-x hidden + overflow-y visible + .user-profile { + padding 0 20px 0 20px + background-color #1c1c1c + color #ffffff + border-radius 10px + width 100% + height 91vh + .el-form-item__label { + color #ffffff + justify-content start + } + .user-opt { + .el-col { + padding 8px + .el-button { + width 100% + } + } + } + } + .product-box { + .info { + .el-alert__description { + font-size 14px !important + color #1c1c1c + margin 0 + } + padding 0 20px 0 20px + } + .list-box { + padding 0 20px 0 5px + .product-item { + border 1px solid #5f5f5f + border-radius 6px + overflow hidden + cursor pointer + transition all 0.3s ease /* 添加过渡效果 */ + .image-container { + display flex + justify-content center + .el-image { + width 50px + .el-image__inner { + border-radius 10px + } + } + } + .product-title { + display flex + padding 5px + .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 2px 0 + .label { + display flex + width 100% + } + .price, .expire { + display flex + width 100% + justify-content right + } + .price { + color #f56c6c + } + .expire { + color #409eff + } + } + .pay-way { + padding 5px 0 + display flex + justify-content space-between + } + } + & hover { + box-shadow 0 0 10px rgba(71, 255, 241, 0.6) /* 添加阴影效果 */ + transform translateY(-10px) /* 向上移动10像素 */ + } + } + } + } + } +} \ No newline at end of file diff --git a/web/src/assets/css/task-list.styl b/web/src/assets/css/task-list.styl index 7b8204e..9200009 100644 --- a/web/src/assets/css/task-list.styl +++ b/web/src/assets/css/task-list.styl @@ -148,7 +148,6 @@ overflow hidden border-radius 6px transition: all 0.3s ease; /* 添加过渡效果 */ - position relative .opt { .opt-line { @@ -184,19 +183,6 @@ } } } - - .remove { - display none - position absolute - right 10px - top 10px - } - - &:hover{ - .remove { - display block - } - } } .animate { diff --git a/web/src/assets/css/task-mobile-list.css b/web/src/assets/css/task-mobile-list.css new file mode 100644 index 0000000..f892fbe --- /dev/null +++ b/web/src/assets/css/task-mobile-list.css @@ -0,0 +1,115 @@ +.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/assets/css/task-mobile-list.styl b/web/src/assets/css/task-mobile-list.styl new file mode 100644 index 0000000..994a68d --- /dev/null +++ b/web/src/assets/css/task-mobile-list.styl @@ -0,0 +1,142 @@ +.task-list-box { + width 100% + padding 5px + color #ffffff + overflow-x hidden + + + .running-job-list { + .job-item { + //border: 1px solid #454545; + width: 100%; + padding 2px + background-color #555555 + + .job-item-inner { + position relative + height 100% + overflow hidden + + .progress { + position absolute + width 100% + height 100% + top 0 + left 0 + display flex + justify-content center + align-items center + + span { + font-size 20px + color #ffffff + } + } + } + } + } + + + .finish-job-list { + .job-item { + width 100% + height 100% + border 1px solid #666666 + padding 6px + overflow hidden + border-radius 6px + transition: all 0.3s ease; /* 添加过渡效果 */ + + .opt { + .opt-line { + margin 6px 0 + + ul { + display flex + flex-flow row + + li { + margin-right 6px + + a { + padding 3px 0 + width 40px + text-align center + border-radius 5px + display block + cursor pointer + background-color #4E5058 + color #ffffff + + &:hover { + background-color #6D6F78 + } + } + } + + .show-prompt { + font-size 20px + cursor pointer + } + } + } + } + } + + .animate { + &:hover { + box-shadow: 0 0 10px rgba(71, 255, 241, 0.6); /* 添加阴影效果 */ + transform: translateY(-10px); /* 向上移动10像素 */ + } + } + + } + + .el-image { + width 100% + height 100% + overflow visible + + img { + height 240px + } + + .el-image-viewer__wrapper { + img { + width auto + height auto + } + } + + .image-slot { + display flex + flex-flow column + justify-content center + align-items center + height 100% + min-height 200px + color #ffffff + height 240px + + .iconfont { + font-size 50px + margin-bottom 10px + } + } + } + + .el-image.upscale { + max-height 310px + + img { + height 310px + } + + .el-image-viewer__wrapper { + img { + width auto + height auto + } + } + } +} \ No newline at end of file diff --git a/web/src/router.js b/web/src/router.js index ca10f62..117b4b6 100644 --- a/web/src/router.js +++ b/web/src/router.js @@ -23,7 +23,7 @@ const routes = [ { name: 'image-sd', path: '/sd/', - meta: {title: 'Stable Diffusion 绘画中心'}, + meta: {title: 'stable diffusion 绘画中心'}, component: () => import('@/views/ImageSd.vue'), }, { @@ -80,7 +80,7 @@ const routes = [ { path: '/admin/login', name: 'admin-login', - meta: {title: 'Chat-Plus 控制台登录'}, + meta: {title: 'ChatPuls 控制台登录'}, component: () => import('@/views/admin/Login.vue'), }, { @@ -88,7 +88,7 @@ const routes = [ path: '/admin', redirect: '/admin/dashboard', component: () => import("@/views/admin/Home.vue"), - meta: {title: 'ChatGPT-Plus 管理后台'}, + meta: {title: 'ChatPuls 管理后台'}, children: [ { path: '/admin/dashboard', @@ -151,10 +151,28 @@ const routes = [ component: () => import('@/views/admin/LoginLog.vue'), }, { - path: '/admin/functions', - name: 'admin-functions', - meta: {title: '函数管理'}, - component: () => import('@/views/admin/Functions.vue'), + path: '/admin/demo/form', + name: 'admin-form', + meta: {title: '表单页面'}, + component: () => import('@/views/admin/demo/Form.vue'), + }, + { + path: '/admin/demo/table', + name: 'admin-table', + meta: {title: '数据列表'}, + component: () => import('@/views/admin/demo/Table.vue'), + }, + { + path: '/admin/demo/import', + name: 'admin-import', + meta: {title: '导入数据'}, + component: () => import('@/views/admin/demo/Import.vue'), + }, + { + path: '/admin/demo/editor', + name: 'admin-editor', + meta: {title: '富文本编辑器'}, + component: () => import('@/views/admin/demo/Editor.vue'), }, ] }, @@ -167,7 +185,7 @@ const routes = [ { name: 'mobile', path: '/mobile', - meta: {title: process.env.VUE_APP_TITLE}, + meta: {title: 'ChatPuls-智能助手V3'}, component: () => import('@/views/mobile/Home.vue'), redirect: '/mobile/chat/list', children: [ @@ -177,15 +195,25 @@ const routes = [ component: () => import('@/views/mobile/ChatList.vue'), }, { - path: '/mobile/setting', - name: 'mobile-setting', - component: () => import('@/views/mobile/Setting.vue'), + path: '/mobile/imageSd', + name: 'mobile-imageSd', + component: () => import('@/views/mobile/ImageSd.vue'), + }, + { + path: '/mobile/apps', + name: 'mobile-apps', + component: () => import('@/views/mobile/Apps.vue'), }, { path: '/mobile/profile', name: 'mobile-profile', component: () => import('@/views/mobile/Profile.vue'), }, + { + path: '/mobile/invitation', + name: 'mobile-invitation', + component: () => import('@/views/mobile/Invitation.vue'), + }, ] }, { diff --git a/web/src/views/mobile/Apps.vue b/web/src/views/mobile/Apps.vue new file mode 100644 index 0000000..ad121a4 --- /dev/null +++ b/web/src/views/mobile/Apps.vue @@ -0,0 +1,15 @@ + + + + + diff --git a/web/src/views/mobile/ChatList.vue b/web/src/views/mobile/ChatList.vue index 4c45522..de9a338 100644 --- a/web/src/views/mobile/ChatList.vue +++ b/web/src/views/mobile/ChatList.vue @@ -1,9 +1,12 @@ \ No newline at end of file diff --git a/web/src/views/mobile/ChatSession.vue b/web/src/views/mobile/ChatSession.vue index 737d67e..f6e8fc6 100644 --- a/web/src/views/mobile/ChatSession.vue +++ b/web/src/views/mobile/ChatSession.vue @@ -1,8 +1,9 @@