feat(ui): web移动端初始化
8
new-ui/projects/web/.env.development
Normal file
@@ -0,0 +1,8 @@
|
||||
VUE_APP_API_HOST=http://172.22.11.2:5678
|
||||
VUE_APP_WS_HOST=ws://172.22.11.2:5678
|
||||
VUE_APP_USER=18575670125
|
||||
VUE_APP_PASS=12345678
|
||||
VUE_APP_ADMIN_USER=admin
|
||||
VUE_APP_ADMIN_PASS=admin123
|
||||
VUE_APP_KEY_PREFIX=ChatPLUS_DEV_
|
||||
VUE_APP_TITLE="ChatPlus-AI 创作系统"
|
||||
4
new-ui/projects/web/.env.production
Normal file
@@ -0,0 +1,4 @@
|
||||
VUE_APP_API_HOST=
|
||||
VUE_APP_WS_HOST=
|
||||
VUE_APP_KEY_PREFIX=ChatPLUS_
|
||||
VUE_APP_TITLE="ChatPlus-AI 创作系统"
|
||||
11
new-ui/projects/web/.gitignore
vendored
Normal file
@@ -0,0 +1,11 @@
|
||||
# Logs
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist.tar.gz
|
||||
|
||||
7
new-ui/projects/web/README.md
Normal file
@@ -0,0 +1,7 @@
|
||||
# chatgpt-plus-web
|
||||
|
||||
chatgpt-plus 项目前端实现,采用 Vue3 + element-plus 架构。
|
||||
|
||||
移动端是采用 Vue3 + Vant 移动开发框架实现的。
|
||||
|
||||
|
||||
5
new-ui/projects/web/babel.config.js
Normal file
@@ -0,0 +1,5 @@
|
||||
module.exports = {
|
||||
presets: [
|
||||
'@vue/cli-plugin-babel/preset'
|
||||
]
|
||||
}
|
||||
20
new-ui/projects/web/jsconfig.json
Normal file
@@ -0,0 +1,20 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"module": "esnext",
|
||||
"baseUrl": "./",
|
||||
"jsx": "preserve",
|
||||
"moduleResolution": "node",
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"src/*"
|
||||
]
|
||||
},
|
||||
"lib": [
|
||||
"esnext",
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"scripthost"
|
||||
]
|
||||
}
|
||||
}
|
||||
20537
new-ui/projects/web/package-lock.json
generated
Normal file
65
new-ui/projects/web/package.json
Normal file
@@ -0,0 +1,65 @@
|
||||
{
|
||||
"name": "@chatgpt-plus-projects/web",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@element-plus/icons-vue": "^2.1.0",
|
||||
"axios": "^0.27.2",
|
||||
"clipboard": "^2.0.11",
|
||||
"compressorjs": "^1.2.1",
|
||||
"core-js": "^3.8.3",
|
||||
"element-plus": "^2.3.0",
|
||||
"good-storage": "^1.1.1",
|
||||
"highlight.js": "^11.7.0",
|
||||
"json-bigint": "^1.0.0",
|
||||
"lodash": "^4.17.21",
|
||||
"markdown-it": "^13.0.1",
|
||||
"markdown-it-latex2img": "^0.0.6",
|
||||
"markdown-it-mathjax": "^2.0.0",
|
||||
"md-editor-v3": "^2.2.1",
|
||||
"pinia": "^2.1.4",
|
||||
"qrcode": "^1.5.3",
|
||||
"qs": "^6.11.1",
|
||||
"sortablejs": "^1.15.0",
|
||||
"v3-waterfall": "^1.2.1",
|
||||
"vant": "^4.5.0",
|
||||
"vue": "^3.2.13",
|
||||
"vue-router": "^4.0.15"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "7.18.6",
|
||||
"@babel/eslint-parser": "^7.12.16",
|
||||
"@vue/cli-plugin-babel": "~5.0.0",
|
||||
"@vue/cli-plugin-eslint": "~5.0.0",
|
||||
"@vue/cli-service": "~5.0.0",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint-plugin-vue": "^8.0.3",
|
||||
"stylus": "^0.58.1",
|
||||
"stylus-loader": "^7.0.0"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"root": true,
|
||||
"env": {
|
||||
"node": true
|
||||
},
|
||||
"extends": [
|
||||
"plugin:vue/vue3-essential",
|
||||
"eslint:recommended"
|
||||
],
|
||||
"parserOptions": {
|
||||
"parser": "@babel/eslint-parser"
|
||||
},
|
||||
"rules": {}
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not dead",
|
||||
"not ie 11"
|
||||
]
|
||||
}
|
||||
7627
new-ui/projects/web/pnpm-lock.yaml
generated
Normal file
BIN
new-ui/projects/web/public/favicon.ico
Normal file
|
After Width: | Height: | Size: 66 KiB |
BIN
new-ui/projects/web/public/images/alipay.jpg
Normal file
|
After Width: | Height: | Size: 15 KiB |
BIN
new-ui/projects/web/public/images/avatar/artist.jpg
Normal file
|
After Width: | Height: | Size: 46 KiB |
BIN
new-ui/projects/web/public/images/avatar/dou_yin.jpg
Normal file
|
After Width: | Height: | Size: 14 KiB |
BIN
new-ui/projects/web/public/images/avatar/elon_musk.jpg
Normal file
|
After Width: | Height: | Size: 23 KiB |
BIN
new-ui/projects/web/public/images/avatar/english_trainer.jpg
Normal file
|
After Width: | Height: | Size: 20 KiB |
BIN
new-ui/projects/web/public/images/avatar/girl_friend.jpg
Normal file
|
After Width: | Height: | Size: 27 KiB |
BIN
new-ui/projects/web/public/images/avatar/good_comment.jpg
Normal file
|
After Width: | Height: | Size: 32 KiB |
BIN
new-ui/projects/web/public/images/avatar/gpt.png
Normal file
|
After Width: | Height: | Size: 5.8 KiB |
BIN
new-ui/projects/web/public/images/avatar/kong_zi.jpg
Normal file
|
After Width: | Height: | Size: 40 KiB |
BIN
new-ui/projects/web/public/images/avatar/lu_xun.jpg
Normal file
|
After Width: | Height: | Size: 27 KiB |
BIN
new-ui/projects/web/public/images/avatar/mid_journey.png
Normal file
|
After Width: | Height: | Size: 5.6 KiB |
BIN
new-ui/projects/web/public/images/avatar/programmer.jpg
Normal file
|
After Width: | Height: | Size: 41 KiB |
BIN
new-ui/projects/web/public/images/avatar/psychiatrist.jpg
Normal file
|
After Width: | Height: | Size: 25 KiB |
BIN
new-ui/projects/web/public/images/avatar/red_book.jpg
Normal file
|
After Width: | Height: | Size: 14 KiB |
BIN
new-ui/projects/web/public/images/avatar/seller.jpg
Normal file
|
After Width: | Height: | Size: 16 KiB |
BIN
new-ui/projects/web/public/images/avatar/steve_jobs.jpg
Normal file
|
After Width: | Height: | Size: 25 KiB |
BIN
new-ui/projects/web/public/images/avatar/teacher.jpg
Normal file
|
After Width: | Height: | Size: 28 KiB |
BIN
new-ui/projects/web/public/images/avatar/translator.jpg
Normal file
|
After Width: | Height: | Size: 20 KiB |
BIN
new-ui/projects/web/public/images/avatar/user.png
Normal file
|
After Width: | Height: | Size: 24 KiB |
BIN
new-ui/projects/web/public/images/avatar/weekly_report.jpg
Normal file
|
After Width: | Height: | Size: 19 KiB |
BIN
new-ui/projects/web/public/images/avatar/yi_yan.png
Normal file
|
After Width: | Height: | Size: 5.0 KiB |
BIN
new-ui/projects/web/public/images/chat.png
Normal file
|
After Width: | Height: | Size: 5.1 KiB |
BIN
new-ui/projects/web/public/images/ext/doc.png
Normal file
|
After Width: | Height: | Size: 4.8 KiB |
BIN
new-ui/projects/web/public/images/ext/file.png
Normal file
|
After Width: | Height: | Size: 2.0 KiB |
BIN
new-ui/projects/web/public/images/ext/md.png
Normal file
|
After Width: | Height: | Size: 3.3 KiB |
BIN
new-ui/projects/web/public/images/ext/pdf.png
Normal file
|
After Width: | Height: | Size: 2.8 KiB |
BIN
new-ui/projects/web/public/images/ext/ppt.png
Normal file
|
After Width: | Height: | Size: 3.4 KiB |
BIN
new-ui/projects/web/public/images/ext/sql.png
Normal file
|
After Width: | Height: | Size: 4.0 KiB |
BIN
new-ui/projects/web/public/images/ext/txt.png
Normal file
|
After Width: | Height: | Size: 3.2 KiB |
BIN
new-ui/projects/web/public/images/ext/xls.png
Normal file
|
After Width: | Height: | Size: 3.1 KiB |
BIN
new-ui/projects/web/public/images/logo.png
Normal file
|
After Width: | Height: | Size: 30 KiB |
BIN
new-ui/projects/web/public/images/mic.gif
Normal file
|
After Width: | Height: | Size: 38 KiB |
BIN
new-ui/projects/web/public/images/mj.png
Normal file
|
After Width: | Height: | Size: 4.6 KiB |
BIN
new-ui/projects/web/public/images/mj/mj-niji.png
Normal file
|
After Width: | Height: | Size: 476 KiB |
BIN
new-ui/projects/web/public/images/mj/mj-v4.jpg
Normal file
|
After Width: | Height: | Size: 27 KiB |
BIN
new-ui/projects/web/public/images/mj/mj-v5.1.jpg
Normal file
|
After Width: | Height: | Size: 22 KiB |
BIN
new-ui/projects/web/public/images/mj/mj-v5.2.png
Normal file
|
After Width: | Height: | Size: 526 KiB |
BIN
new-ui/projects/web/public/images/mj/mj-v5.jpg
Normal file
|
After Width: | Height: | Size: 20 KiB |
BIN
new-ui/projects/web/public/images/mj/mj-v6.png
Normal file
|
After Width: | Height: | Size: 18 KiB |
BIN
new-ui/projects/web/public/images/mj/nj1.jpg
Normal file
|
After Width: | Height: | Size: 21 KiB |
BIN
new-ui/projects/web/public/images/mj/nj2.jpg
Normal file
|
After Width: | Height: | Size: 22 KiB |
BIN
new-ui/projects/web/public/images/mj/nj3.jpg
Normal file
|
After Width: | Height: | Size: 30 KiB |
BIN
new-ui/projects/web/public/images/mj/nj4.jpg
Normal file
|
After Width: | Height: | Size: 32 KiB |
BIN
new-ui/projects/web/public/images/mj/rate_16_9.png
Normal file
|
After Width: | Height: | Size: 1.2 KiB |
BIN
new-ui/projects/web/public/images/mj/rate_1_1.png
Normal file
|
After Width: | Height: | Size: 1.5 KiB |
BIN
new-ui/projects/web/public/images/mj/rate_1_2.png
Normal file
|
After Width: | Height: | Size: 1.5 KiB |
BIN
new-ui/projects/web/public/images/mj/rate_2_1.png
Normal file
|
After Width: | Height: | Size: 1.2 KiB |
BIN
new-ui/projects/web/public/images/mj/rate_3_4.png
Normal file
|
After Width: | Height: | Size: 1.5 KiB |
BIN
new-ui/projects/web/public/images/mj/rate_4_3.png
Normal file
|
After Width: | Height: | Size: 1.5 KiB |
BIN
new-ui/projects/web/public/images/mj/rate_9_16.png
Normal file
|
After Width: | Height: | Size: 1.5 KiB |
BIN
new-ui/projects/web/public/images/reward.png
Normal file
|
After Width: | Height: | Size: 44 KiB |
BIN
new-ui/projects/web/public/images/sd.png
Normal file
|
After Width: | Height: | Size: 12 KiB |
BIN
new-ui/projects/web/public/images/user-info.jpg
Normal file
|
After Width: | Height: | Size: 8.4 KiB |
BIN
new-ui/projects/web/public/images/vip.png
Normal file
|
After Width: | Height: | Size: 1.9 KiB |
BIN
new-ui/projects/web/public/images/wechat-pay.png
Normal file
|
After Width: | Height: | Size: 48 KiB |
BIN
new-ui/projects/web/public/images/wx.png
Normal file
|
After Width: | Height: | Size: 36 KiB |
19
new-ui/projects/web/public/index.html
Normal file
@@ -0,0 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-cn">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
|
||||
<link rel="icon" href="/favicon.ico" type="image/x-icon">
|
||||
<title>ChatGPT-Plus</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>请开启JavaScript支持</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
201
new-ui/projects/web/src/App.vue
Normal file
@@ -0,0 +1,201 @@
|
||||
<template>
|
||||
<el-config-provider :locale="zhCn">
|
||||
<router-view/>
|
||||
</el-config-provider>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ElConfigProvider} from 'element-plus';
|
||||
import zhCn from 'element-plus/es/locale/lang/zh-cn';
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="stylus">
|
||||
html, body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#app {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
.el-overlay-dialog {
|
||||
display flex
|
||||
justify-content center
|
||||
align-items center
|
||||
overflow hidden
|
||||
|
||||
.el-dialog {
|
||||
margin 0;
|
||||
|
||||
.el-dialog__body {
|
||||
max-height 90vh
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 省略显示 */
|
||||
.ellipsis {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sl {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sl3 {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sl4 {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 居中布局 */
|
||||
.auto_center {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.h_center {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
-webkit-transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.w_center {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
-webkit-transform: translateX(-50%);
|
||||
}
|
||||
|
||||
/* flex布局 */
|
||||
.flex-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.flex-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.justify-start {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.justify-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.justify-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.justify-around {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.justify-evenly {
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.items-start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.items-end {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.items-baseline {
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.items-stretch {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.self-start {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.self-end {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.self-center {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.self-baseline {
|
||||
align-self: baseline;
|
||||
}
|
||||
|
||||
.self-stretch {
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.flex-1 {
|
||||
flex: 1 1 0%;
|
||||
}
|
||||
|
||||
.flex-auto {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.grow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.grow-0 {
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.shrink {
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
.shrink-0 {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.shrink-1 {
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
.relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
</style>
|
||||
21
new-ui/projects/web/src/action/session.js
Normal file
@@ -0,0 +1,21 @@
|
||||
import {httpGet} from "@/utils/http";
|
||||
|
||||
export function checkSession() {
|
||||
return new Promise((resolve, reject) => {
|
||||
httpGet('/api/user/session').then(res => {
|
||||
resolve(res.data)
|
||||
}).catch(err => {
|
||||
reject(err)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
export function checkAdminSession() {
|
||||
return new Promise((resolve, reject) => {
|
||||
httpGet('/api/admin/session').then(res => {
|
||||
resolve(res)
|
||||
}).catch(err => {
|
||||
reject(err)
|
||||
})
|
||||
})
|
||||
}
|
||||
56
new-ui/projects/web/src/assets/css/chat-app.css
Normal file
@@ -0,0 +1,56 @@
|
||||
.page-apps {
|
||||
background-color: #282c34;
|
||||
height: 100vh;
|
||||
}
|
||||
.page-apps .title {
|
||||
text-align: center;
|
||||
background-color: #25272d;
|
||||
font-size: 24px;
|
||||
color: #fff;
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #3c3c3c;
|
||||
}
|
||||
.page-apps .inner {
|
||||
display: flex;
|
||||
color: #fff;
|
||||
padding: 15px;
|
||||
overflow-y: visible;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.page-apps .inner .list-box .app-item {
|
||||
border: 1px solid #666;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease; /* 添加过渡效果 */
|
||||
}
|
||||
.page-apps .inner .list-box .app-item .el-image {
|
||||
padding: 6px;
|
||||
}
|
||||
.page-apps .inner .list-box .app-item .el-image .el-image__inner {
|
||||
border-radius: 10px;
|
||||
}
|
||||
.page-apps .inner .list-box .app-item .title {
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
}
|
||||
.page-apps .inner .list-box .app-item .title .name {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #47fff1;
|
||||
}
|
||||
.page-apps .inner .list-box .app-item .title .opt {
|
||||
position: relative;
|
||||
top: -5px;
|
||||
}
|
||||
.page-apps .inner .list-box .app-item .hello-msg {
|
||||
height: 60px;
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
.page-apps .inner .list-box .app-item:hover {
|
||||
box-shadow: 0 0 10px rgba(71,255,241,0.6); /* 添加阴影效果 */
|
||||
transform: translateY(-10px); /* 向上移动10像素 */
|
||||
}
|
||||
69
new-ui/projects/web/src/assets/css/chat-app.styl
Normal file
@@ -0,0 +1,69 @@
|
||||
.page-apps {
|
||||
background-color: #282c34;
|
||||
height 100vh
|
||||
|
||||
.title {
|
||||
text-align center
|
||||
background-color #25272d
|
||||
font-size 24px
|
||||
color #ffffff
|
||||
padding 10px
|
||||
border-bottom 1px solid #3c3c3c
|
||||
}
|
||||
|
||||
.inner {
|
||||
display flex
|
||||
color #ffffff
|
||||
padding 15px;
|
||||
overflow-y visible
|
||||
overflow-x hidden
|
||||
|
||||
.list-box {
|
||||
.app-item {
|
||||
border 1px solid #666666
|
||||
border-radius 6px
|
||||
overflow hidden
|
||||
transition: all 0.3s ease; /* 添加过渡效果 */
|
||||
|
||||
.el-image {
|
||||
padding 6px
|
||||
|
||||
.el-image__inner {
|
||||
border-radius 10px
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
display flex
|
||||
padding 10px
|
||||
|
||||
.name {
|
||||
width 100%
|
||||
text-align left
|
||||
font-size 16px
|
||||
font-weight bold
|
||||
color #47fff1
|
||||
}
|
||||
|
||||
.opt {
|
||||
position: relative;
|
||||
top -5px
|
||||
}
|
||||
}
|
||||
|
||||
.hello-msg {
|
||||
height 60px
|
||||
padding 10px
|
||||
font-size 14px
|
||||
color #999999
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 10px rgba(71, 255, 241, 0.6); /* 添加阴影效果 */
|
||||
transform: translateY(-10px); /* 向上移动10像素 */
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
312
new-ui/projects/web/src/assets/css/chat-plus.css
Normal file
@@ -0,0 +1,312 @@
|
||||
#app {
|
||||
height: 100%;
|
||||
}
|
||||
#app .common-layout {
|
||||
height: 100%;
|
||||
}
|
||||
#app .common-layout .el-aside {
|
||||
background-color: #252526;
|
||||
}
|
||||
#app .common-layout .el-aside .title-box {
|
||||
padding: 6px 10px;
|
||||
display: flex;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
}
|
||||
#app .common-layout .el-aside .title-box span {
|
||||
padding-top: 5px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
#app .common-layout .el-aside .chat-list {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
background-color: #28292a;
|
||||
border-top: 1px solid #2f3032;
|
||||
border-right: 1px solid #2f3032;
|
||||
}
|
||||
#app .common-layout .el-aside .chat-list .search-box {
|
||||
flex-wrap: wrap;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
#app .common-layout .el-aside .chat-list .search-box .el-input__wrapper {
|
||||
background-color: #363535;
|
||||
box-shadow: none;
|
||||
}
|
||||
#app .common-layout .el-aside .chat-list ::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
#app .common-layout .el-aside .chat-list .content {
|
||||
width: 100%;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
#app .common-layout .el-aside .chat-list .content .chat-list-item {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
padding: 8px 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
#app .common-layout .el-aside .chat-list .content .chat-list-item:hover {
|
||||
background-color: #343540;
|
||||
}
|
||||
#app .common-layout .el-aside .chat-list .content .chat-list-item .avatar {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
#app .common-layout .el-aside .chat-list .content .chat-list-item .chat-title-input {
|
||||
font-size: 14px;
|
||||
margin-top: 4px;
|
||||
margin-left: 10px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
width: 190px;
|
||||
}
|
||||
#app .common-layout .el-aside .chat-list .content .chat-list-item .chat-title {
|
||||
color: #c1c1c1;
|
||||
padding: 5px 10px;
|
||||
max-width: 220px;
|
||||
font-size: 14px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
#app .common-layout .el-aside .chat-list .content .chat-list-item .btn {
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
top: 16px;
|
||||
color: #fff;
|
||||
}
|
||||
#app .common-layout .el-aside .chat-list .content .chat-list-item .btn .el-icon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
#app .common-layout .el-aside .chat-list .content .chat-list-item.active {
|
||||
background-color: #343540;
|
||||
}
|
||||
#app .common-layout .el-aside .chat-list .content .chat-list-item.active .btn {
|
||||
display: inline;
|
||||
}
|
||||
#app .common-layout .el-aside .tool-box {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
padding: 0 20px 10px 20px;
|
||||
border-top: 1px solid #3c3c3c;
|
||||
}
|
||||
#app .common-layout .el-aside .tool-box .user-info {
|
||||
width: 100%;
|
||||
padding-top: 10px;
|
||||
}
|
||||
#app .common-layout .el-aside .tool-box .user-info .el-dropdown-link {
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
}
|
||||
#app .common-layout .el-aside .tool-box .user-info .el-dropdown-link .el-image {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
#app .common-layout .el-aside .tool-box .user-info .el-dropdown-link .username {
|
||||
display: flex;
|
||||
line-height: 22px;
|
||||
width: 230px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
#app .common-layout .el-aside .tool-box .user-info .el-dropdown-link .el-icon {
|
||||
color: #ccc;
|
||||
line-height: 24px;
|
||||
}
|
||||
#app .common-layout .el-main {
|
||||
overflow: hidden;
|
||||
--el-main-padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
#app .common-layout .el-main .chat-head {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #28292a;
|
||||
}
|
||||
#app .common-layout .el-main .chat-head .chat-config {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-top: 10px;
|
||||
}
|
||||
#app .common-layout .el-main .chat-head .chat-config .role-select-label {
|
||||
color: #fff;
|
||||
}
|
||||
#app .common-layout .el-main .chat-head .chat-config .el-select {
|
||||
margin-right: 10px;
|
||||
}
|
||||
#app .common-layout .el-main .chat-head .chat-config .role-select {
|
||||
max-width: 130px;
|
||||
}
|
||||
#app .common-layout .el-main .chat-head .chat-config .el-button .el-icon {
|
||||
margin-right: 5px;
|
||||
}
|
||||
#app .common-layout .el-main .chat-head .iconfont {
|
||||
margin-right: 5px;
|
||||
}
|
||||
#app .common-layout .el-main .chat-head .is-circle {
|
||||
margin-left: 5px;
|
||||
}
|
||||
#app .common-layout .el-main .chat-head .is-circle .iconfont {
|
||||
margin-right: 0;
|
||||
}
|
||||
#app .common-layout .el-main .right-box {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
background-color: #fff;
|
||||
border-left: 1px solid #4f4f4f;
|
||||
}
|
||||
#app .common-layout .el-main .right-box #container {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
#app .common-layout .el-main .right-box #container ::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
#app .common-layout .el-main .right-box #container .chat-box {
|
||||
overflow-y: scroll;
|
||||
--content-font-size: 16px;
|
||||
--content-color: #c1c1c1;
|
||||
font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
|
||||
padding: 0 0 50px 0;
|
||||
}
|
||||
#app .common-layout .el-main .right-box #container .chat-box .chat-line {
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
#app .common-layout .el-main .right-box #container .re-generate {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
#app .common-layout .el-main .right-box #container .re-generate .btn-box {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
}
|
||||
#app .common-layout .el-main .right-box #container .re-generate .btn-box .el-button .el-icon {
|
||||
margin-right: 5px;
|
||||
}
|
||||
#app .common-layout .el-main .right-box #container .input-box {
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-shadow: 0 2px 15px rgba(0,0,0,0.1);
|
||||
padding: 0 15px;
|
||||
}
|
||||
#app .common-layout .el-main .right-box #container .input-box .input-container {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
border: none;
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
#app .common-layout .el-main .right-box #container .input-box .input-container .el-textarea .el-textarea__inner::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
#app .common-layout .el-main .right-box #container .input-box .input-container .select-file {
|
||||
position: absolute;
|
||||
right: 48px;
|
||||
top: 20px;
|
||||
}
|
||||
#app .common-layout .el-main .right-box #container .input-box .input-container .send-btn {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 20px;
|
||||
}
|
||||
#app .common-layout .el-main .right-box #container .input-box .input-container .send-btn .el-button {
|
||||
padding: 8px 5px;
|
||||
border-radius: 6px;
|
||||
background: #19c37d;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
}
|
||||
#app .common-layout .el-main .right-box #container::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
#app .el-message-box {
|
||||
width: 90%;
|
||||
max-width: 420px;
|
||||
}
|
||||
#app .el-message {
|
||||
min-width: 100px;
|
||||
max-width: 600px;
|
||||
}
|
||||
.el-select-dropdown__wrap .el-select-dropdown__item .role-option {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.el-select-dropdown__wrap .el-select-dropdown__item .role-option .el-image {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.el-select-dropdown__wrap .el-select-dropdown__item .role-option span {
|
||||
margin-left: 5px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.account {
|
||||
display: flex;
|
||||
background-color: #90ffc2;
|
||||
color: #000;
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
.account .vip-logo .el-image {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
.account .vip-info {
|
||||
padding: 0 10px 0 10px;
|
||||
}
|
||||
.account .vip-info h4,
|
||||
.account .vip-info p {
|
||||
margin: 0;
|
||||
}
|
||||
.account .vip-info h4 {
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
}
|
||||
.account .vip-info p {
|
||||
color: #333;
|
||||
}
|
||||
.account .pay-btn {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
align-items: center;
|
||||
}
|
||||
.el-overlay-dialog .el-dialog .el-dialog__body .notice {
|
||||
padding: 0 20px 0 20px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
.el-overlay-dialog .el-dialog .el-dialog__body .notice .el-text {
|
||||
font-size: 16px;
|
||||
}
|
||||
.dialog-service {
|
||||
text-align: center;
|
||||
}
|
||||
.dialog-service .el-image {
|
||||
width: 360px;
|
||||
}
|
||||
417
new-ui/projects/web/src/assets/css/chat-plus.styl
Normal file
@@ -0,0 +1,417 @@
|
||||
$sideBgColor = #252526;
|
||||
$borderColor = #4676d0;
|
||||
#app {
|
||||
|
||||
height: 100%;
|
||||
|
||||
.common-layout {
|
||||
height: 100%;
|
||||
|
||||
// left side
|
||||
|
||||
.el-aside {
|
||||
background-color: $sideBgColor;
|
||||
|
||||
.title-box {
|
||||
padding: 6px 10px;
|
||||
display: flex;
|
||||
color: #ffffff;
|
||||
font-size: 20px;
|
||||
|
||||
span {
|
||||
padding-top: 5px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-list {
|
||||
display: flex
|
||||
flex-flow: column
|
||||
background-color: #28292A
|
||||
border-top: 1px solid #2F3032
|
||||
border-right: 1px solid #2F3032
|
||||
|
||||
.search-box {
|
||||
flex-wrap: wrap
|
||||
padding: 10px 15px;
|
||||
//background-color #343540
|
||||
|
||||
.el-input__wrapper {
|
||||
background-color: #363535;
|
||||
box-shadow: none
|
||||
}
|
||||
}
|
||||
|
||||
// 隐藏滚动条
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.content {
|
||||
//display flex
|
||||
//flex-wrap: wrap;
|
||||
//flex-direction column
|
||||
width: 100%
|
||||
overflow-y: scroll
|
||||
|
||||
.chat-list-item {
|
||||
display: flex
|
||||
width: 100%
|
||||
justify-content: flex-start
|
||||
padding: 8px 12px
|
||||
//border-bottom: 1px solid #3c3c3c
|
||||
cursor: pointer
|
||||
|
||||
&:hover {
|
||||
background-color #343540
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.chat-title-input {
|
||||
font-size: 14px;
|
||||
margin-top: 4px;
|
||||
margin-left: 10px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
width: 190px;
|
||||
}
|
||||
|
||||
.chat-title {
|
||||
color: #c1c1c1
|
||||
padding: 5px 10px;
|
||||
max-width 220px;
|
||||
font-size 14px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display none
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
top: 16px;
|
||||
color #ffffff
|
||||
|
||||
.el-icon {
|
||||
margin-right 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chat-list-item.active {
|
||||
background-color: #343540;
|
||||
|
||||
.btn {
|
||||
display inline
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.tool-box {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
padding 0 20px 10px 20px;
|
||||
border-top 1px solid #3c3c3c;
|
||||
|
||||
.user-info {
|
||||
width 100%
|
||||
padding-top 10px;
|
||||
|
||||
.el-dropdown-link {
|
||||
width 100%;
|
||||
cursor: pointer
|
||||
display flex
|
||||
|
||||
.el-image {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.username {
|
||||
display flex
|
||||
line-height 22px;
|
||||
width 230px;
|
||||
padding-left 10px;
|
||||
|
||||
}
|
||||
|
||||
.el-icon {
|
||||
color: #cccccc;
|
||||
line-height 24px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-main {
|
||||
overflow: hidden;
|
||||
--el-main-padding: 0;
|
||||
margin: 0;
|
||||
|
||||
.chat-head {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #28292A
|
||||
|
||||
.chat-config {
|
||||
display flex
|
||||
flex-direction row
|
||||
align-items: center;
|
||||
justify-content center;
|
||||
padding-top 10px;
|
||||
|
||||
.role-select-label {
|
||||
color #ffffff
|
||||
}
|
||||
|
||||
.el-select {
|
||||
//max-width 150px;
|
||||
margin-right 10px;
|
||||
}
|
||||
|
||||
.role-select {
|
||||
max-width 130px;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
.el-icon {
|
||||
margin-right 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
margin-right 5px;
|
||||
}
|
||||
|
||||
.is-circle {
|
||||
margin-left 5px
|
||||
.iconfont {
|
||||
margin-right 0
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right-box {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
background-color: #ffffff
|
||||
border-left: 1px solid #4f4f4f
|
||||
|
||||
#container {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.chat-box {
|
||||
overflow-y: scroll;
|
||||
//border-bottom: 1px solid #4f4f4f
|
||||
|
||||
// 变量定义
|
||||
--content-font-size: 16px;
|
||||
--content-color: #c1c1c1;
|
||||
|
||||
font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
|
||||
padding: 0 0 50px 0;
|
||||
|
||||
.chat-line {
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.re-generate {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.btn-box {
|
||||
position: absolute
|
||||
bottom: 10px;
|
||||
|
||||
.el-button {
|
||||
.el-icon {
|
||||
margin-right 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-box {
|
||||
background-color: #ffffff
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
|
||||
padding 0 15px;
|
||||
|
||||
.input-container {
|
||||
width 100%
|
||||
margin: 0;
|
||||
border: none;
|
||||
padding: 10px 0;
|
||||
display flex
|
||||
justify-content center
|
||||
position relative
|
||||
|
||||
.el-textarea {
|
||||
|
||||
.el-textarea__inner::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.select-file {
|
||||
position absolute;
|
||||
right 48px;
|
||||
top 20px;
|
||||
}
|
||||
|
||||
.send-btn {
|
||||
position absolute;
|
||||
right 12px;
|
||||
top 20px;
|
||||
|
||||
.el-button {
|
||||
padding 8px 5px;
|
||||
border-radius 6px;
|
||||
background: rgb(25, 195, 125)
|
||||
color #ffffff;
|
||||
font-size 20px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#container::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-message-box {
|
||||
width: 90%;
|
||||
max-width: 420px;
|
||||
}
|
||||
|
||||
.el-message {
|
||||
min-width: 100px;
|
||||
max-width: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-select-dropdown__wrap {
|
||||
.el-select-dropdown__item {
|
||||
.role-option {
|
||||
display flex
|
||||
flex-flow row
|
||||
margin-top 8px;
|
||||
|
||||
.el-image {
|
||||
width 20px
|
||||
height 20px
|
||||
border-radius 50%
|
||||
}
|
||||
|
||||
span {
|
||||
margin-left 5px;
|
||||
height 20px;
|
||||
line-height 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.account {
|
||||
display flex
|
||||
background-color #90FFC2
|
||||
color #000000
|
||||
width 100%
|
||||
border-radius 10px
|
||||
padding 10px
|
||||
|
||||
.vip-logo {
|
||||
.el-image {
|
||||
width 40px
|
||||
height 40px
|
||||
border-radius 100%
|
||||
background-color #ffffff
|
||||
}
|
||||
}
|
||||
|
||||
.vip-info {
|
||||
padding: 0 10px 0 10px
|
||||
|
||||
h4, p {
|
||||
margin 0
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-weight bold
|
||||
font-size 16px;
|
||||
}
|
||||
|
||||
p {
|
||||
color #333333
|
||||
}
|
||||
}
|
||||
|
||||
.pay-btn {
|
||||
width 100%
|
||||
display flex
|
||||
justify-content right
|
||||
align-items center
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.el-overlay-dialog {
|
||||
.el-dialog {
|
||||
.el-dialog__body {
|
||||
.notice {
|
||||
padding 0 20px 0 20px
|
||||
line-height 1.8
|
||||
|
||||
.el-text {
|
||||
font-size 16px
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-service {
|
||||
text-align center
|
||||
|
||||
.el-image {
|
||||
width 360px;
|
||||
}
|
||||
}
|
||||
19
new-ui/projects/web/src/assets/css/color-dark.css
Normal file
@@ -0,0 +1,19 @@
|
||||
.admin-home .login-wrap {
|
||||
background: #324157;
|
||||
}
|
||||
.admin-home .plugins-tips {
|
||||
background: #eef1f6;
|
||||
}
|
||||
.admin-home .plugins-tips a {
|
||||
color: #20a0ff;
|
||||
}
|
||||
.admin-home .tags-li.active {
|
||||
border: 1px solid #409eff;
|
||||
background-color: #409eff;
|
||||
}
|
||||
.admin-home .message-title {
|
||||
color: #20a0ff;
|
||||
}
|
||||
.admin-home .collapse-btn:hover {
|
||||
background: #283446;
|
||||
}
|
||||
30
new-ui/projects/web/src/assets/css/color-dark.styl
Normal file
@@ -0,0 +1,30 @@
|
||||
.admin-home {
|
||||
.header {
|
||||
|
||||
}
|
||||
|
||||
.login-wrap {
|
||||
background: #324157;
|
||||
}
|
||||
|
||||
.plugins-tips {
|
||||
background: #eef1f6;
|
||||
}
|
||||
|
||||
.plugins-tips a {
|
||||
color: #20a0ff;
|
||||
}
|
||||
|
||||
.tags-li.active {
|
||||
border: 1px solid #409EFF;
|
||||
background-color: #409EFF;
|
||||
}
|
||||
|
||||
.message-title {
|
||||
color: #20a0ff;
|
||||
}
|
||||
|
||||
.collapse-btn:hover {
|
||||
background: rgb(40, 52, 70);
|
||||
}
|
||||
}
|
||||
13
new-ui/projects/web/src/assets/css/custom-scroll.css
Normal file
@@ -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;
|
||||
}
|
||||
26
new-ui/projects/web/src/assets/css/custom-scroll.styl
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
403
new-ui/projects/web/src/assets/css/image-mj.css
Normal file
@@ -0,0 +1,403 @@
|
||||
.page-mj {
|
||||
background-color: #282c34;
|
||||
}
|
||||
.page-mj .inner {
|
||||
display: flex;
|
||||
}
|
||||
.page-mj .inner .mj-box {
|
||||
margin: 10px;
|
||||
background-color: #262626;
|
||||
border: 1px solid #454545;
|
||||
min-width: 300px;
|
||||
max-width: 300px;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
.page-mj .inner .mj-box h2 {
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
color: #47fff1;
|
||||
}
|
||||
.page-mj .inner .mj-box ::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
.page-mj .inner .mj-box .mj-params {
|
||||
margin-top: 10px;
|
||||
overflow: auto;
|
||||
}
|
||||
.page-mj .inner .mj-box .mj-params .param-line {
|
||||
padding: 0 10px;
|
||||
}
|
||||
.page-mj .inner .mj-box .mj-params .param-line .el-icon {
|
||||
position: relative;
|
||||
}
|
||||
.page-mj .inner .mj-box .mj-params .param-line .grid-content {
|
||||
background-color: #383838;
|
||||
border-radius: 5px;
|
||||
padding: 8px 14px;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.page-mj .inner .mj-box .mj-params .param-line .grid-content:hover {
|
||||
background-color: #585858;
|
||||
}
|
||||
.page-mj .inner .mj-box .mj-params .param-line .grid-content .icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.page-mj .inner .mj-box .mj-params .param-line .grid-content .shape {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-bottom: 5px;
|
||||
border: 1px solid #c4c4c4;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.page-mj .inner .mj-box .mj-params .param-line .grid-content .shape.size9-16 {
|
||||
width: 9px;
|
||||
height: 16px;
|
||||
}
|
||||
.page-mj .inner .mj-box .mj-params .param-line .grid-content .shape.size16-9 {
|
||||
height: 9px;
|
||||
width: 16px;
|
||||
position: relative;
|
||||
margin: 4px 0 7px;
|
||||
}
|
||||
.page-mj .inner .mj-box .mj-params .param-line .grid-content .shape.size3-4 {
|
||||
width: 12px;
|
||||
height: 16px;
|
||||
}
|
||||
.page-mj .inner .mj-box .mj-params .param-line .grid-content .shape.size4-3 {
|
||||
height: 12px;
|
||||
width: 16px;
|
||||
position: relative;
|
||||
margin: 4px 0 4px;
|
||||
}
|
||||
.page-mj .inner .mj-box .mj-params .param-line .grid-content .shape.size2-3 {
|
||||
width: 11px;
|
||||
height: 16px;
|
||||
}
|
||||
.page-mj .inner .mj-box .mj-params .param-line .grid-content .shape.size3-2 {
|
||||
height: 11px;
|
||||
width: 16px;
|
||||
position: relative;
|
||||
margin: 4px 0 5px;
|
||||
}
|
||||
.page-mj .inner .mj-box .mj-params .param-line .grid-content .shape.size1-2 {
|
||||
width: 8px;
|
||||
height: 16px;
|
||||
}
|
||||
.page-mj .inner .mj-box .mj-params .param-line .grid-content .shape.size2-1 {
|
||||
height: 8px;
|
||||
width: 16px;
|
||||
position: relative;
|
||||
margin: 4px 0 8px;
|
||||
}
|
||||
.page-mj .inner .mj-box .mj-params .param-line .grid-content.active {
|
||||
color: #47fff1;
|
||||
background-color: #585858;
|
||||
}
|
||||
.page-mj .inner .mj-box .mj-params .param-line .grid-content.active .shape {
|
||||
border: 1px solid #47fff1;
|
||||
}
|
||||
.page-mj .inner .mj-box .mj-params .param-line .model {
|
||||
background-color: #383838;
|
||||
border: 1px solid #454545;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.page-mj .inner .mj-box .mj-params .param-line .model:hover {
|
||||
background-color: #585858;
|
||||
}
|
||||
.page-mj .inner .mj-box .mj-params .param-line .model .el-image {
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
}
|
||||
.page-mj .inner .mj-box .mj-params .param-line .model .text {
|
||||
margin-top: 6px;
|
||||
}
|
||||
.page-mj .inner .mj-box .mj-params .param-line .model.active {
|
||||
color: #47fff1;
|
||||
background-color: #585858;
|
||||
border: 1px solid #47fff1;
|
||||
}
|
||||
.page-mj .inner .mj-box .mj-params .param-line .form-item-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.page-mj .inner .mj-box .mj-params .param-line .form-item-inner .el-select {
|
||||
--el-select-input-focus-border-color: #47fff1;
|
||||
--el-input-focus-border-color: #47fff1;
|
||||
}
|
||||
.page-mj .inner .mj-box .mj-params .param-line .form-item-inner .el-input__wrapper {
|
||||
background: #383838;
|
||||
}
|
||||
.page-mj .inner .mj-box .mj-params .param-line .form-item-inner .el-input__inner {
|
||||
color: #fff;
|
||||
}
|
||||
.page-mj .inner .mj-box .mj-params .param-line .form-item-inner .el-icon {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.page-mj .inner .mj-box .mj-params .param-line .img-uploader .el-upload {
|
||||
border: 1px dashed var(--el-border-color);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
transition: var(--el-transition-duration-fast);
|
||||
}
|
||||
.page-mj .inner .mj-box .mj-params .param-line .img-uploader .el-upload:hover {
|
||||
border-color: var(--el-color-primary);
|
||||
}
|
||||
.page-mj .inner .mj-box .mj-params .param-line .img-uploader .el-upload .el-icon.uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
text-align: center;
|
||||
}
|
||||
.page-mj .inner .mj-box .mj-params .param-line.pt {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
.page-mj .inner .el-form .el-form-item__label {
|
||||
color: #fff;
|
||||
}
|
||||
.page-mj .inner .el-form .el-input,
|
||||
.page-mj .inner .el-form .el-slider {
|
||||
width: 180px;
|
||||
}
|
||||
.page-mj .inner .task-list-box {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
color: #fff;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.page-mj .inner .task-list-box .task-list-inner .el-tabs {
|
||||
--el-tabs-header-height: 55px;
|
||||
}
|
||||
.page-mj .inner .task-list-box .task-list-inner .el-tabs__item {
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
}
|
||||
.page-mj .inner .task-list-box .task-list-inner .title-tabs .el-tabs__item.is-active {
|
||||
color: #47fff1;
|
||||
font-size: 18px;
|
||||
}
|
||||
.page-mj .inner .task-list-box .task-list-inner .title-tabs .el-tabs__active-bar {
|
||||
background-color: #47fff1;
|
||||
}
|
||||
.page-mj .inner .task-list-box .task-list-inner .el-textarea {
|
||||
--el-input-focus-border-color: #47fff1;
|
||||
}
|
||||
.page-mj .inner .task-list-box .task-list-inner .el-textarea__inner {
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
}
|
||||
.page-mj .inner .task-list-box .task-list-inner .el-input__wrapper {
|
||||
background: transparent;
|
||||
padding: 5px;
|
||||
}
|
||||
.page-mj .inner .task-list-box .task-list-inner .text {
|
||||
margin-bottom: 10px;
|
||||
color: #6b778c;
|
||||
font-size: 15px;
|
||||
}
|
||||
.page-mj .inner .task-list-box .task-list-inner .param-line.pt {
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
.page-mj .inner .task-list-box .task-list-inner .form-item-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.page-mj .inner .task-list-box .task-list-inner .form-item-inner .el-icon {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.page-mj .inner .task-list-box .task-list-inner .el-form-item__label {
|
||||
color: #fff;
|
||||
}
|
||||
.page-mj .inner .task-list-box .task-list-inner .img-inline {
|
||||
display: flex;
|
||||
}
|
||||
.page-mj .inner .task-list-box .task-list-inner .img-inline .img-uploader .el-upload {
|
||||
border: 1px dashed var(--el-border-color);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 120px;
|
||||
transition: var(--el-transition-duration-fast);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.page-mj .inner .task-list-box .task-list-inner .img-inline .img-uploader .el-upload:hover {
|
||||
border-color: var(--el-color-primary);
|
||||
}
|
||||
.page-mj .inner .task-list-box .task-list-inner .img-inline .img-uploader .el-upload .el-icon.uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
text-align: center;
|
||||
}
|
||||
.page-mj .inner .task-list-box .task-list-inner .img-inline .img-list-box {
|
||||
display: flex;
|
||||
}
|
||||
.page-mj .inner .task-list-box .task-list-inner .img-inline .img-list-box .img-item {
|
||||
width: 120px;
|
||||
position: relative;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.page-mj .inner .task-list-box .task-list-inner .img-inline .img-list-box .img-item .el-image {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.page-mj .inner .task-list-box .task-list-inner .img-inline .img-list-box .img-item .el-button {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.page-mj .inner .task-list-box .task-list-inner .submit-btn {
|
||||
display: flex;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.page-mj .inner .task-list-box .task-list-inner .submit-btn .el-button {
|
||||
width: 200px;
|
||||
}
|
||||
.page-mj .inner .task-list-box .task-list-inner .submit-btn .text-info {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
align-items: center;
|
||||
}
|
||||
.page-mj .inner .task-list-box .task-list-inner .job-list-box .running-job-list .job-item {
|
||||
width: 100%;
|
||||
padding: 2px;
|
||||
background-color: #555;
|
||||
}
|
||||
.page-mj .inner .task-list-box .task-list-inner .job-list-box .running-job-list .job-item .job-item-inner {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.page-mj .inner .task-list-box .task-list-inner .job-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-mj .inner .task-list-box .task-list-inner .job-list-box .running-job-list .job-item .job-item-inner .progress span {
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
}
|
||||
.page-mj .inner .task-list-box .task-list-inner .job-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; /* 添加过渡效果 */
|
||||
position: relative;
|
||||
}
|
||||
.page-mj .inner .task-list-box .task-list-inner .job-list-box .finish-job-list .job-item .opt .opt-line {
|
||||
margin: 6px 0;
|
||||
}
|
||||
.page-mj .inner .task-list-box .task-list-inner .job-list-box .finish-job-list .job-item .opt .opt-line ul {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
}
|
||||
.page-mj .inner .task-list-box .task-list-inner .job-list-box .finish-job-list .job-item .opt .opt-line ul li {
|
||||
margin-right: 6px;
|
||||
}
|
||||
.page-mj .inner .task-list-box .task-list-inner .job-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-mj .inner .task-list-box .task-list-inner .job-list-box .finish-job-list .job-item .opt .opt-line ul li a:hover {
|
||||
background-color: #6d6f78;
|
||||
}
|
||||
.page-mj .inner .task-list-box .task-list-inner .job-list-box .finish-job-list .job-item .opt .opt-line ul .show-prompt {
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.page-mj .inner .task-list-box .task-list-inner .job-list-box .finish-job-list .job-item .remove {
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
}
|
||||
.page-mj .inner .task-list-box .task-list-inner .job-list-box .finish-job-list .job-item:hover .remove {
|
||||
display: block;
|
||||
}
|
||||
.page-mj .inner .task-list-box .task-list-inner .job-list-box .finish-job-list .animate:hover {
|
||||
box-shadow: 0 0 10px rgba(71,255,241,0.6); /* 添加阴影效果 */
|
||||
transform: translateY(-10px); /* 向上移动10像素 */
|
||||
}
|
||||
.page-mj .inner .task-list-box .task-list-inner .job-list-box .el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: visible;
|
||||
}
|
||||
.page-mj .inner .task-list-box .task-list-inner .job-list-box .el-image img {
|
||||
height: 240px;
|
||||
}
|
||||
.page-mj .inner .task-list-box .task-list-inner .job-list-box .el-image .el-image-viewer__wrapper img {
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
.page-mj .inner .task-list-box .task-list-inner .job-list-box .el-image .image-slot {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 200px;
|
||||
color: #fff;
|
||||
height: 240px;
|
||||
}
|
||||
.page-mj .inner .task-list-box .task-list-inner .job-list-box .el-image .image-slot .iconfont {
|
||||
font-size: 50px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.page-mj .inner .task-list-box .task-list-inner .job-list-box .el-image.upscale img {
|
||||
height: 310px;
|
||||
}
|
||||
.page-mj .inner .task-list-box .task-list-inner .job-list-box .el-image.upscale .image-slot {
|
||||
height: 310px;
|
||||
}
|
||||
.page-mj .inner .task-list-box .task-list-inner .job-list-box .el-image.upscale .el-image-viewer__wrapper img {
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
.mj-list-item-prompt .el-icon {
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
240
new-ui/projects/web/src/assets/css/image-mj.styl
Normal file
@@ -0,0 +1,240 @@
|
||||
.page-mj {
|
||||
background-color: #282c34;
|
||||
|
||||
.inner {
|
||||
display: flex;
|
||||
|
||||
.mj-box {
|
||||
margin 10px
|
||||
background-color #262626
|
||||
border 1px solid #454545
|
||||
min-width 300px
|
||||
max-width 300px
|
||||
padding 10px
|
||||
border-radius 10px
|
||||
color #ffffff;
|
||||
font-size 14px
|
||||
|
||||
h2 {
|
||||
font-weight: bold;
|
||||
font-size 20px
|
||||
text-align center
|
||||
color #47fff1
|
||||
}
|
||||
|
||||
// 隐藏滚动条
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.mj-params {
|
||||
margin-top 10px
|
||||
overflow auto
|
||||
|
||||
|
||||
.param-line {
|
||||
padding 0 10px
|
||||
|
||||
.el-icon {
|
||||
position relative
|
||||
}
|
||||
|
||||
.grid-content {
|
||||
background-color #383838
|
||||
border-radius 5px
|
||||
padding 8px 14px
|
||||
display flex
|
||||
cursor pointer
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:hover {
|
||||
background-color #585858
|
||||
}
|
||||
|
||||
.icon {
|
||||
width 20px
|
||||
height 20px
|
||||
margin-bottom 5px
|
||||
}
|
||||
|
||||
.shape {
|
||||
width 16px
|
||||
height 16px
|
||||
margin-bottom 5px
|
||||
border 1px solid #C4C4C4
|
||||
border-radius 3px
|
||||
}
|
||||
|
||||
.shape.size9-16 {
|
||||
width 9px
|
||||
height 16px
|
||||
}
|
||||
|
||||
.shape.size16-9 {
|
||||
height 9px
|
||||
width 16px
|
||||
position relative
|
||||
margin 4px 0 7px
|
||||
}
|
||||
|
||||
.shape.size3-4 {
|
||||
width 12px
|
||||
height 16px
|
||||
}
|
||||
|
||||
.shape.size4-3 {
|
||||
height 12px
|
||||
width 16px
|
||||
position relative
|
||||
margin 4px 0 4px
|
||||
}
|
||||
|
||||
.shape.size2-3 {
|
||||
width 11px
|
||||
height 16px
|
||||
}
|
||||
|
||||
.shape.size3-2 {
|
||||
height 11px
|
||||
width 16px
|
||||
position relative
|
||||
margin 4px 0 5px
|
||||
}
|
||||
|
||||
.shape.size1-2 {
|
||||
width 8px
|
||||
height 16px
|
||||
}
|
||||
|
||||
.shape.size2-1 {
|
||||
height 8px
|
||||
width 16px
|
||||
position relative
|
||||
margin 4px 0 8px
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.grid-content.active {
|
||||
color #47fff1
|
||||
background-color #585858
|
||||
|
||||
.shape {
|
||||
border 1px solid #47fff1
|
||||
}
|
||||
}
|
||||
|
||||
.model {
|
||||
background-color #383838
|
||||
border 1px solid #454545
|
||||
border-radius 5px
|
||||
padding 10px
|
||||
margin-bottom 10px
|
||||
display flex
|
||||
flex-flow column
|
||||
align-items center
|
||||
cursor pointer
|
||||
|
||||
&:hover {
|
||||
background-color #585858
|
||||
}
|
||||
|
||||
.el-image {
|
||||
height 60px
|
||||
width 100%
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-top 6px
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.model.active {
|
||||
color #47fff1
|
||||
background-color #585858
|
||||
border 1px solid #47fff1
|
||||
}
|
||||
|
||||
.form-item-inner {
|
||||
display flex
|
||||
align-items: center
|
||||
|
||||
.el-select {
|
||||
--el-select-input-focus-border-color: #47FFF1;
|
||||
--el-input-focus-border-color: #47FFF1;
|
||||
}
|
||||
|
||||
.el-input__wrapper {
|
||||
background: #383838;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
color: #fff
|
||||
}
|
||||
|
||||
.el-icon {
|
||||
margin-left 10px
|
||||
}
|
||||
}
|
||||
|
||||
.img-uploader {
|
||||
.el-upload {
|
||||
border: 1px dashed var(--el-border-color);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width 100%
|
||||
transition: var(--el-transition-duration-fast);
|
||||
|
||||
&:hover {
|
||||
border-color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.el-icon.uploader-icon {
|
||||
font-size: 28px
|
||||
color: #8c939d
|
||||
width 100%
|
||||
height: 120px
|
||||
text-align: center
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.param-line.pt {
|
||||
display: flex
|
||||
align-items: center
|
||||
padding-top 5px
|
||||
padding-bottom 5px
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-form {
|
||||
.el-form-item__label {
|
||||
color #ffffff
|
||||
}
|
||||
|
||||
.el-input, .el-slider {
|
||||
width 180px
|
||||
}
|
||||
}
|
||||
|
||||
@import "task-list.styl"
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.mj-list-item-prompt {
|
||||
.el-icon {
|
||||
margin-left 10px
|
||||
cursor pointer
|
||||
position relative
|
||||
}
|
||||
}
|
||||
361
new-ui/projects/web/src/assets/css/image-sd.css
Normal file
@@ -0,0 +1,361 @@
|
||||
.page-sd {
|
||||
background-color: #282c34;
|
||||
}
|
||||
.page-sd .inner {
|
||||
display: flex;
|
||||
}
|
||||
.page-sd .inner .sd-box {
|
||||
margin: 10px;
|
||||
background-color: #262626;
|
||||
border: 1px solid #454545;
|
||||
min-width: 300px;
|
||||
max-width: 300px;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
.page-sd .inner .sd-box h2 {
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
color: #47fff1;
|
||||
}
|
||||
.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 .task-list-inner .el-tabs {
|
||||
--el-tabs-header-height: 55px;
|
||||
}
|
||||
.page-sd .inner .task-list-box .task-list-inner .el-tabs__item {
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
}
|
||||
.page-sd .inner .task-list-box .task-list-inner .title-tabs .el-tabs__item.is-active {
|
||||
color: #47fff1;
|
||||
font-size: 18px;
|
||||
}
|
||||
.page-sd .inner .task-list-box .task-list-inner .title-tabs .el-tabs__active-bar {
|
||||
background-color: #47fff1;
|
||||
}
|
||||
.page-sd .inner .task-list-box .task-list-inner .el-textarea {
|
||||
--el-input-focus-border-color: #47fff1;
|
||||
}
|
||||
.page-sd .inner .task-list-box .task-list-inner .el-textarea__inner {
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
}
|
||||
.page-sd .inner .task-list-box .task-list-inner .el-input__wrapper {
|
||||
background: transparent;
|
||||
padding: 5px;
|
||||
}
|
||||
.page-sd .inner .task-list-box .task-list-inner .text {
|
||||
margin-bottom: 10px;
|
||||
color: #6b778c;
|
||||
font-size: 15px;
|
||||
}
|
||||
.page-sd .inner .task-list-box .task-list-inner .param-line.pt {
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
.page-sd .inner .task-list-box .task-list-inner .form-item-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.page-sd .inner .task-list-box .task-list-inner .form-item-inner .el-icon {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.page-sd .inner .task-list-box .task-list-inner .el-form-item__label {
|
||||
color: #fff;
|
||||
}
|
||||
.page-sd .inner .task-list-box .task-list-inner .img-inline {
|
||||
display: flex;
|
||||
}
|
||||
.page-sd .inner .task-list-box .task-list-inner .img-inline .img-uploader .el-upload {
|
||||
border: 1px dashed var(--el-border-color);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 120px;
|
||||
transition: var(--el-transition-duration-fast);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.page-sd .inner .task-list-box .task-list-inner .img-inline .img-uploader .el-upload:hover {
|
||||
border-color: var(--el-color-primary);
|
||||
}
|
||||
.page-sd .inner .task-list-box .task-list-inner .img-inline .img-uploader .el-upload .el-icon.uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
text-align: center;
|
||||
}
|
||||
.page-sd .inner .task-list-box .task-list-inner .img-inline .img-list-box {
|
||||
display: flex;
|
||||
}
|
||||
.page-sd .inner .task-list-box .task-list-inner .img-inline .img-list-box .img-item {
|
||||
width: 120px;
|
||||
position: relative;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.page-sd .inner .task-list-box .task-list-inner .img-inline .img-list-box .img-item .el-image {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.page-sd .inner .task-list-box .task-list-inner .img-inline .img-list-box .img-item .el-button {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.page-sd .inner .task-list-box .task-list-inner .submit-btn {
|
||||
display: flex;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.page-sd .inner .task-list-box .task-list-inner .submit-btn .el-button {
|
||||
width: 200px;
|
||||
}
|
||||
.page-sd .inner .task-list-box .task-list-inner .submit-btn .text-info {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
align-items: center;
|
||||
}
|
||||
.page-sd .inner .task-list-box .task-list-inner .job-list-box .running-job-list .job-item {
|
||||
width: 100%;
|
||||
padding: 2px;
|
||||
background-color: #555;
|
||||
}
|
||||
.page-sd .inner .task-list-box .task-list-inner .job-list-box .running-job-list .job-item .job-item-inner {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.page-sd .inner .task-list-box .task-list-inner .job-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 .task-list-inner .job-list-box .running-job-list .job-item .job-item-inner .progress span {
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
}
|
||||
.page-sd .inner .task-list-box .task-list-inner .job-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; /* 添加过渡效果 */
|
||||
position: relative;
|
||||
}
|
||||
.page-sd .inner .task-list-box .task-list-inner .job-list-box .finish-job-list .job-item .opt .opt-line {
|
||||
margin: 6px 0;
|
||||
}
|
||||
.page-sd .inner .task-list-box .task-list-inner .job-list-box .finish-job-list .job-item .opt .opt-line ul {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
}
|
||||
.page-sd .inner .task-list-box .task-list-inner .job-list-box .finish-job-list .job-item .opt .opt-line ul li {
|
||||
margin-right: 6px;
|
||||
}
|
||||
.page-sd .inner .task-list-box .task-list-inner .job-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 .task-list-inner .job-list-box .finish-job-list .job-item .opt .opt-line ul li a:hover {
|
||||
background-color: #6d6f78;
|
||||
}
|
||||
.page-sd .inner .task-list-box .task-list-inner .job-list-box .finish-job-list .job-item .opt .opt-line ul .show-prompt {
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.page-sd .inner .task-list-box .task-list-inner .job-list-box .finish-job-list .job-item .remove {
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
}
|
||||
.page-sd .inner .task-list-box .task-list-inner .job-list-box .finish-job-list .job-item:hover .remove {
|
||||
display: block;
|
||||
}
|
||||
.page-sd .inner .task-list-box .task-list-inner .job-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 .task-list-inner .job-list-box .el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: visible;
|
||||
}
|
||||
.page-sd .inner .task-list-box .task-list-inner .job-list-box .el-image img {
|
||||
height: 240px;
|
||||
}
|
||||
.page-sd .inner .task-list-box .task-list-inner .job-list-box .el-image .el-image-viewer__wrapper img {
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
.page-sd .inner .task-list-box .task-list-inner .job-list-box .el-image .image-slot {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 200px;
|
||||
color: #fff;
|
||||
height: 240px;
|
||||
}
|
||||
.page-sd .inner .task-list-box .task-list-inner .job-list-box .el-image .image-slot .iconfont {
|
||||
font-size: 50px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.page-sd .inner .task-list-box .task-list-inner .job-list-box .el-image.upscale img {
|
||||
height: 310px;
|
||||
}
|
||||
.page-sd .inner .task-list-box .task-list-inner .job-list-box .el-image.upscale .image-slot {
|
||||
height: 310px;
|
||||
}
|
||||
.page-sd .inner .task-list-box .task-list-inner .job-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: 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 {
|
||||
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: 100px;
|
||||
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;
|
||||
}
|
||||
106
new-ui/projects/web/src/assets/css/image-sd.styl
Normal file
@@ -0,0 +1,106 @@
|
||||
.page-sd {
|
||||
background-color: #282c34;
|
||||
|
||||
.inner {
|
||||
display: flex;
|
||||
|
||||
.sd-box {
|
||||
margin 10px
|
||||
background-color #262626
|
||||
border 1px solid #454545
|
||||
min-width 300px
|
||||
max-width 300px
|
||||
padding 10px
|
||||
border-radius 10px
|
||||
color #ffffff;
|
||||
font-size 14px
|
||||
|
||||
h2 {
|
||||
font-weight: bold;
|
||||
font-size 20px
|
||||
text-align center
|
||||
color #47fff1
|
||||
}
|
||||
|
||||
// 隐藏滚动条
|
||||
|
||||
::-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-list.styl"
|
||||
}
|
||||
|
||||
@import "sd-task-dialog.styl"
|
||||
|
||||
|
||||
.mj-list-item-prompt {
|
||||
.el-icon {
|
||||
margin-left 10px
|
||||
cursor pointer
|
||||
position relative
|
||||
top 2px
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
192
new-ui/projects/web/src/assets/css/images-wall.css
Normal file
@@ -0,0 +1,192 @@
|
||||
.page-images-wall {
|
||||
display: flex;
|
||||
background-color: #282c34;
|
||||
}
|
||||
.page-images-wall .inner {
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
.page-images-wall .inner .header {
|
||||
display: flex;
|
||||
padding: 0 40px;
|
||||
}
|
||||
.page-images-wall .inner .header h2 {
|
||||
width: 300px;
|
||||
}
|
||||
.page-images-wall .inner .header .settings {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
}
|
||||
.page-images-wall .inner .header .settings .el-radio-group {
|
||||
font-size: 16px;
|
||||
}
|
||||
.page-images-wall .inner .header .settings .el-radio-group .el-radio {
|
||||
color: #fff;
|
||||
}
|
||||
.page-images-wall .inner .waterfall {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.page-images-wall .inner .waterfall .list-item .image {
|
||||
overflow: hidden;
|
||||
}
|
||||
.page-images-wall .inner .waterfall .list-item .image .el-image {
|
||||
width: 100%;
|
||||
transition: transform 0.3s;
|
||||
cursor: pointer;
|
||||
}
|
||||
.page-images-wall .inner .waterfall .list-item .opt {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
color: #fff;
|
||||
padding: 8px 10px;
|
||||
line-height: 1.2;
|
||||
border-top-right-radius: 10px;
|
||||
background-color: rgba(10,10,10,0.7);
|
||||
}
|
||||
.page-images-wall .inner .waterfall .list-item .opt span {
|
||||
word-break: break-all;
|
||||
}
|
||||
.page-images-wall .inner .waterfall .list-item .opt .el-icon,
|
||||
.page-images-wall .inner .waterfall .list-item .opt .iconfont {
|
||||
top: 2px;
|
||||
cursor: pointer;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 5px;
|
||||
padding: 2px;
|
||||
font-size: 16px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.page-images-wall .inner .waterfall .list-item .opt .el-icon:hover,
|
||||
.page-images-wall .inner .waterfall .list-item .opt .iconfont:hover {
|
||||
background-color: #444;
|
||||
}
|
||||
.page-images-wall .inner .waterfall .list-item:hover .opt {
|
||||
display: block;
|
||||
animation: expandUp 0.3s ease-in-out forwards;
|
||||
transform-origin: bottom center;
|
||||
transform: scaleY(0); /* 初始状态,元素高度为0 */
|
||||
}
|
||||
.page-images-wall .inner .waterfall .list-item:hover .image .el-image {
|
||||
transform: scale(1.2); /* 放大图像到1.2倍大小 */
|
||||
}
|
||||
.page-images-wall .inner .footer {
|
||||
display: flex;
|
||||
padding: 20px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.page-images-wall .inner .footer .iconfont {
|
||||
margin-left: 6px;
|
||||
}
|
||||
.page-images-wall .el-overlay-dialog .el-dialog {
|
||||
background-color: #1a1b1e;
|
||||
}
|
||||
.page-images-wall .el-overlay-dialog .el-dialog .el-dialog__header .el-dialog__title {
|
||||
color: #f5f5f5;
|
||||
}
|
||||
.page-images-wall .el-overlay-dialog .el-dialog .el-dialog__body {
|
||||
padding: 0 0 0 15px !important;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
.page-images-wall .el-overlay-dialog .el-dialog .el-dialog__body .el-row {
|
||||
width: 100%;
|
||||
}
|
||||
.page-images-wall .el-overlay-dialog .el-dialog .el-dialog__body .el-row .img-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.page-images-wall .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-images-wall .el-overlay-dialog .el-dialog .el-dialog__body .el-row .img-container .image-slot .el-icon {
|
||||
font-size: 60px;
|
||||
}
|
||||
.page-images-wall .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info {
|
||||
background-color: #25262b;
|
||||
padding: 1rem 1.5rem;
|
||||
}
|
||||
.page-images-wall .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .info-line {
|
||||
width: 100%;
|
||||
}
|
||||
.page-images-wall .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;
|
||||
}
|
||||
.page-images-wall .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-images-wall .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .info-line .wrapper {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
}
|
||||
.page-images-wall .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .info-line .wrapper label {
|
||||
display: flex;
|
||||
width: 100px;
|
||||
color: #a5a5a5;
|
||||
}
|
||||
.page-images-wall .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-images-wall .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .copy-params {
|
||||
padding: 20px 0 10px 0;
|
||||
}
|
||||
.page-images-wall .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .copy-params .el-button {
|
||||
width: 100%;
|
||||
}
|
||||
@-moz-keyframes expandUp {
|
||||
0% {
|
||||
transform: scaleY(0);
|
||||
}
|
||||
100% {
|
||||
transform: scaleY(1);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes expandUp {
|
||||
0% {
|
||||
transform: scaleY(0);
|
||||
}
|
||||
100% {
|
||||
transform: scaleY(1);
|
||||
}
|
||||
}
|
||||
@-o-keyframes expandUp {
|
||||
0% {
|
||||
transform: scaleY(0);
|
||||
}
|
||||
100% {
|
||||
transform: scaleY(1);
|
||||
}
|
||||
}
|
||||
@keyframes expandUp {
|
||||
0% {
|
||||
transform: scaleY(0);
|
||||
}
|
||||
100% {
|
||||
transform: scaleY(1);
|
||||
}
|
||||
}
|
||||
124
new-ui/projects/web/src/assets/css/images-wall.styl
Normal file
@@ -0,0 +1,124 @@
|
||||
@keyframes expandUp {
|
||||
0% {
|
||||
transform: scaleY(0);
|
||||
}
|
||||
100% {
|
||||
transform: scaleY(1);
|
||||
}
|
||||
}
|
||||
|
||||
.page-images-wall {
|
||||
display: flex;
|
||||
background-color: #282c34;
|
||||
|
||||
.inner {
|
||||
width 100%
|
||||
color #ffffff
|
||||
overflow hidden
|
||||
|
||||
.header {
|
||||
display flex
|
||||
padding 0 40px
|
||||
|
||||
h2 {
|
||||
width 300px
|
||||
}
|
||||
|
||||
.settings {
|
||||
width 100%
|
||||
display flex
|
||||
justify-content right
|
||||
|
||||
.el-radio-group {
|
||||
font-size 16px
|
||||
|
||||
.el-radio {
|
||||
color #ffffff
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.waterfall {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
overflow-y auto
|
||||
overflow-x hidden
|
||||
|
||||
.list-item {
|
||||
|
||||
.image {
|
||||
overflow hidden
|
||||
|
||||
.el-image {
|
||||
width 100%
|
||||
transition: transform 0.3s;
|
||||
cursor pointer
|
||||
}
|
||||
}
|
||||
|
||||
.opt {
|
||||
display none
|
||||
position absolute
|
||||
width 100%
|
||||
bottom 0
|
||||
left 0
|
||||
color #ffffff
|
||||
padding 8px 10px
|
||||
line-height 1.2
|
||||
border-top-right-radius 10px
|
||||
background-color rgba(10, 10, 10, 0.7)
|
||||
|
||||
span {
|
||||
word-break break-all
|
||||
}
|
||||
|
||||
.el-icon, .iconfont {
|
||||
top 2px
|
||||
cursor pointer
|
||||
border 1px solid #ffffff
|
||||
border-radius 5px
|
||||
padding 2px
|
||||
font-size 16px;
|
||||
margin-right 10px
|
||||
|
||||
&:hover {
|
||||
background-color #444444
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.opt {
|
||||
display block
|
||||
animation: expandUp 0.3s ease-in-out forwards;
|
||||
transform-origin: bottom center;
|
||||
transform: scaleY(0); /* 初始状态,元素高度为0 */
|
||||
}
|
||||
|
||||
.image {
|
||||
.el-image {
|
||||
transform: scale(1.2); /* 放大图像到1.2倍大小 */
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.footer {
|
||||
display flex
|
||||
padding 20px
|
||||
align-items center
|
||||
justify-content center
|
||||
|
||||
.iconfont {
|
||||
margin-left 6px
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@import "sd-task-dialog.styl"
|
||||
}
|
||||
138
new-ui/projects/web/src/assets/css/main.css
Normal file
@@ -0,0 +1,138 @@
|
||||
html,
|
||||
body,
|
||||
#app,
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
.admin-home a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.admin-home .content-box {
|
||||
position: absolute;
|
||||
left: 250px;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
/*padding-bottom: 30px;*/
|
||||
-webkit-transition: left 0.3s ease-in-out;
|
||||
transition: left 0.3s ease-in-out;
|
||||
background: #f0f0f0;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.admin-home .content-box .content {
|
||||
width: auto;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
/*BaseForm*/
|
||||
}
|
||||
|
||||
.admin-home .content-box .content .container {
|
||||
padding: 30px;
|
||||
background: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.admin-home .content-box .content .container .handle-box {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.admin-home .content-box .content .crumbs {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.admin-home .content-box .content .el-table th {
|
||||
background-color: #f5f7fa !important;
|
||||
}
|
||||
|
||||
.admin-home .content-box .content .pagination {
|
||||
margin: 20px 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.admin-home .content-box .content .plugins-tips {
|
||||
padding: 20px 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.admin-home .content-box .content .el-button + .el-tooltip {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.admin-home .content-box .content .el-table tr:hover {
|
||||
background: #f6faff;
|
||||
}
|
||||
|
||||
.admin-home .content-box .content .mgb20 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.admin-home .content-box .content .move-enter-active,
|
||||
.admin-home .content-box .content .move-leave-active {
|
||||
transition: opacity 0.1s ease;
|
||||
}
|
||||
|
||||
.admin-home .content-box .content .move-enter-from,
|
||||
.admin-home .content-box .content .move-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.admin-home .content-box .content .form-box {
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
.admin-home .content-box .content .form-box .line {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.admin-home .content-box .content .el-time-panel__content::after,
|
||||
.admin-home .content-box .content .el-time-panel__content::before {
|
||||
margin-top: -7px;
|
||||
}
|
||||
|
||||
.admin-home .content-box .content .el-time-spinner__wrapper .el-scrollbar__wrap:not(.el-scrollbar__wrap--hidden-default) {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.admin-home .content-box .content [class*=" el-icon-"],
|
||||
.admin-home .content-box .content [class^=el-icon-] {
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
vertical-align: baseline;
|
||||
display: inline-block;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.admin-home .content-box .content .el-sub-menu [class^=el-icon-] {
|
||||
vertical-align: middle;
|
||||
margin-right: 5px;
|
||||
width: 24px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.admin-home .content-box .content [hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.admin-home .content-collapse {
|
||||
left: 65px;
|
||||
}
|
||||
151
new-ui/projects/web/src/assets/css/main.styl
Normal file
@@ -0,0 +1,151 @@
|
||||
//* {
|
||||
// margin: 0;
|
||||
// padding: 0;
|
||||
//}
|
||||
|
||||
html,
|
||||
body,
|
||||
#app,
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
.admin-home {
|
||||
a {
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
.content-box {
|
||||
position: absolute;
|
||||
left: 250px;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
padding-bottom: 30px;
|
||||
-webkit-transition: left .3s ease-in-out;
|
||||
transition: left .3s ease-in-out;
|
||||
background: #f0f0f0;
|
||||
|
||||
.content {
|
||||
width: auto;
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
overflow-y: scroll;
|
||||
box-sizing: border-box;
|
||||
|
||||
.container {
|
||||
padding: 30px;
|
||||
background: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
|
||||
.handle-box {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.crumbs {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.el-table th {
|
||||
background-color: #f5f7fa !important;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin: 20px 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.plugins-tips {
|
||||
padding: 20px 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.el-button + .el-tooltip {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.el-table tr:hover {
|
||||
background: #f6faff;
|
||||
}
|
||||
|
||||
.mgb20 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.move-enter-active,
|
||||
.move-leave-active {
|
||||
transition: opacity .1s ease;
|
||||
}
|
||||
|
||||
.move-enter-from,
|
||||
.move-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/*BaseForm*/
|
||||
|
||||
.form-box {
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
.form-box .line {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.el-time-panel__content::after,
|
||||
.el-time-panel__content::before {
|
||||
margin-top: -7px;
|
||||
}
|
||||
|
||||
.el-time-spinner__wrapper .el-scrollbar__wrap:not(.el-scrollbar__wrap--hidden-default) {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
[class*=" el-icon-"], [class^=el-icon-] {
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
vertical-align: baseline;
|
||||
display: inline-block;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.el-sub-menu [class^=el-icon-] {
|
||||
vertical-align: middle;
|
||||
margin-right: 5px;
|
||||
width: 24px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content-collapse {
|
||||
left: 65px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
153
new-ui/projects/web/src/assets/css/member.css
Normal file
@@ -0,0 +1,153 @@
|
||||
.member {
|
||||
background-color: #282c34;
|
||||
height: 100vh;
|
||||
}
|
||||
.member .el-dialog .el-dialog__body {
|
||||
padding-top: 10px;
|
||||
}
|
||||
.member .el-dialog .el-dialog__body .pay-container .amount {
|
||||
text-align: center;
|
||||
}
|
||||
.member .el-dialog .el-dialog__body .pay-container .amount span {
|
||||
color: #f56c6c;
|
||||
}
|
||||
.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: 360px;
|
||||
height: 360px;
|
||||
}
|
||||
.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: 24px;
|
||||
}
|
||||
.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: #25272d;
|
||||
font-size: 24px;
|
||||
color: #fff;
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #3c3c3c;
|
||||
}
|
||||
.member .inner {
|
||||
color: #fff;
|
||||
padding: 15px 0 15px 15px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: visible;
|
||||
}
|
||||
.member .inner .user-profile {
|
||||
padding: 10px 20px 20px 20px;
|
||||
background-color: #393f4a;
|
||||
color: #fff;
|
||||
border-radius: 10px;
|
||||
height: 100vh;
|
||||
}
|
||||
.member .inner .user-profile .el-form-item__label {
|
||||
color: #fff;
|
||||
justify-content: start;
|
||||
}
|
||||
.member .inner .user-profile .user-opt .el-col {
|
||||
padding: 10px;
|
||||
}
|
||||
.member .inner .user-profile .user-opt .el-col .el-button {
|
||||
width: 100%;
|
||||
}
|
||||
.member .inner .product-box .info {
|
||||
padding: 10px 20px 20px 0;
|
||||
}
|
||||
.member .inner .product-box .info .el-alert__description {
|
||||
font-size: 14px !important;
|
||||
margin: 0;
|
||||
}
|
||||
.member .inner .product-box .list-box .product-item {
|
||||
border: 1px solid #666;
|
||||
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 {
|
||||
padding: 6px;
|
||||
}
|
||||
.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: 10px;
|
||||
}
|
||||
.member .inner .product-box .list-box .product-item .product-title .name {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #47fff1;
|
||||
}
|
||||
.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: 5px 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,
|
||||
.member .inner .product-box .list-box .product-item .product-info .info-line calls {
|
||||
display: flex;
|
||||
width: 90px;
|
||||
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 .info-line .calls {
|
||||
color: #f2cb51;
|
||||
}
|
||||
.member .inner .product-box .list-box .product-item .product-info .pay-way {
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.member .inner .product-box .list-box .product-item .product-info .pay-way .iconfont {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.member .inner .product-box .list-box .product-item:hover {
|
||||
box-shadow: 0 0 10px rgba(71,255,241,0.6); /* 添加阴影效果 */
|
||||
transform: translateY(-10px); /* 向上移动10像素 */
|
||||
}
|
||||
.member .inner .product-box .headline {
|
||||
padding: 0 20px 20px 0;
|
||||
}
|
||||
.member .inner .product-box .user-order {
|
||||
padding: 0 20px 20px 0;
|
||||
}
|
||||
199
new-ui/projects/web/src/assets/css/member.styl
Normal file
@@ -0,0 +1,199 @@
|
||||
.member {
|
||||
background-color: #282c34;
|
||||
height 100vh
|
||||
|
||||
.el-dialog {
|
||||
.el-dialog__body {
|
||||
padding-top 10px
|
||||
|
||||
.pay-container {
|
||||
.amount {
|
||||
text-align center
|
||||
|
||||
span {
|
||||
color #f56c6c
|
||||
}
|
||||
}
|
||||
|
||||
.count-down {
|
||||
display flex
|
||||
justify-content center
|
||||
}
|
||||
|
||||
.pay-qrcode {
|
||||
display flex
|
||||
justify-content center
|
||||
|
||||
.el-image {
|
||||
width 360px;
|
||||
height 360px;
|
||||
}
|
||||
}
|
||||
|
||||
.tip {
|
||||
display flex
|
||||
justify-content center
|
||||
|
||||
.el-icon {
|
||||
font-size 24px
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 16px
|
||||
margin-left 10px
|
||||
}
|
||||
}
|
||||
|
||||
.tip.success {
|
||||
color #07c160
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
text-align center
|
||||
background-color #25272d
|
||||
font-size 24px
|
||||
color #ffffff
|
||||
padding 10px
|
||||
border-bottom 1px solid #3c3c3c
|
||||
}
|
||||
|
||||
.inner {
|
||||
color #ffffff
|
||||
padding 15px 0 15px 15px;
|
||||
overflow-x hidden
|
||||
overflow-y visible
|
||||
|
||||
.user-profile {
|
||||
padding 10px 20px 20px 20px
|
||||
background-color #393F4A
|
||||
color #ffffff
|
||||
border-radius 10px
|
||||
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 #666666
|
||||
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 #47fff1
|
||||
}
|
||||
}
|
||||
|
||||
.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, calls {
|
||||
display flex
|
||||
width 90px
|
||||
justify-content right
|
||||
}
|
||||
|
||||
.price {
|
||||
color #f56c6c
|
||||
}
|
||||
|
||||
.expire {
|
||||
color #409eff
|
||||
}
|
||||
|
||||
.calls {
|
||||
color #F2CB51
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
29
new-ui/projects/web/src/assets/css/mobile/chat-list.css
Normal file
@@ -0,0 +1,29 @@
|
||||
.mobile-chat-list .content .van-cell__value .chat-list-item {
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
}
|
||||
.mobile-chat-list .content .van-cell__value .chat-list-item .van-image {
|
||||
min-width: 32px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
.mobile-chat-list .content .van-cell__value .chat-list-item .van-ellipsis {
|
||||
margin-top: 5px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.mobile-chat-list .van-nav-bar .van-nav-bar__right .van-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
.van-popup .picker-option {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 0 10px;
|
||||
overflow: hidden;
|
||||
height: 20px;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.van-popup .picker-option .van-image {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
47
new-ui/projects/web/src/assets/css/mobile/chat-list.styl
Normal file
@@ -0,0 +1,47 @@
|
||||
.mobile-chat-list {
|
||||
.content {
|
||||
.van-cell__value {
|
||||
.chat-list-item {
|
||||
display flex
|
||||
font-size 14px
|
||||
|
||||
.van-image {
|
||||
min-width 32px
|
||||
width 32px
|
||||
height 32px
|
||||
}
|
||||
|
||||
.van-ellipsis {
|
||||
margin-top 5px;
|
||||
margin-left 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.van-nav-bar {
|
||||
.van-nav-bar__right {
|
||||
.van-icon {
|
||||
font-size 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.van-popup {
|
||||
.picker-option {
|
||||
display flex
|
||||
width 100%
|
||||
padding 0 10px
|
||||
overflow hidden
|
||||
height 20px
|
||||
text-overflow ellipsis
|
||||
|
||||
.van-image {
|
||||
width 20px;
|
||||
height 20px;
|
||||
margin-right 5px
|
||||
}
|
||||
}
|
||||
}
|
||||
46
new-ui/projects/web/src/assets/css/mobile/chat-session.css
Normal file
@@ -0,0 +1,46 @@
|
||||
.mobile-chat .message-list-box {
|
||||
padding-top: 50px;
|
||||
padding-bottom: 10px;
|
||||
overflow-x: auto;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
.mobile-chat .message-list-box .van-cell {
|
||||
background: none;
|
||||
font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
|
||||
}
|
||||
.mobile-chat .chat-box-wrapper .van-sticky .van-cell-group--inset {
|
||||
margin: 0;
|
||||
}
|
||||
.mobile-chat .chat-box-wrapper .van-sticky .van-cell-group--inset .van-cell {
|
||||
padding: 10px;
|
||||
}
|
||||
.mobile-chat .chat-box-wrapper .van-sticky .van-cell-group--inset .van-cell .icon-box .van-icon {
|
||||
font-size: 24px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.mobile-chat .chat-box-wrapper .van-sticky .van-cell-group--inset .van-cell .button-voice {
|
||||
padding: 0 2px;
|
||||
height: 30px;
|
||||
}
|
||||
.mobile-chat .chat-box-wrapper .van-sticky .van-cell-group--inset .van-cell .button-voice .el-icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
.mobile-chat .van-nav-bar__title .van-dropdown-menu__title {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.mobile-chat .van-nav-bar__title .van-cell__title {
|
||||
text-align: left;
|
||||
}
|
||||
.mobile-chat .van-nav-bar__right .van-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
.van-overlay .mic-wrapper {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-flow: column;
|
||||
}
|
||||
.van-theme-dark .mobile-chat .message-list-box {
|
||||
background: #232425;
|
||||
}
|
||||
75
new-ui/projects/web/src/assets/css/mobile/chat-session.styl
Normal file
@@ -0,0 +1,75 @@
|
||||
.mobile-chat {
|
||||
.message-list-box {
|
||||
padding-top 50px
|
||||
padding-bottom 10px
|
||||
overflow-x auto
|
||||
background #F5F5F5;
|
||||
|
||||
.van-cell {
|
||||
background none
|
||||
font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-box-wrapper {
|
||||
.van-sticky {
|
||||
.van-cell-group--inset {
|
||||
margin 0
|
||||
|
||||
.van-cell {
|
||||
padding 10px
|
||||
|
||||
.icon-box {
|
||||
.van-icon {
|
||||
font-size 24px
|
||||
margin-left 10px
|
||||
}
|
||||
}
|
||||
|
||||
.button-voice {
|
||||
padding 0 2px
|
||||
|
||||
.el-icon {
|
||||
font-size 24px
|
||||
}
|
||||
height 30px
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.van-nav-bar__title {
|
||||
.van-dropdown-menu__title {
|
||||
margin-right 10px
|
||||
}
|
||||
|
||||
.van-cell__title {
|
||||
text-align left
|
||||
}
|
||||
}
|
||||
|
||||
.van-nav-bar__right {
|
||||
.van-icon {
|
||||
font-size 20px
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.van-overlay {
|
||||
.mic-wrapper {
|
||||
display flex
|
||||
height 100vh
|
||||
justify-content center
|
||||
align-items center
|
||||
flex-flow column
|
||||
}
|
||||
}
|
||||
|
||||
.van-theme-dark {
|
||||
.mobile-chat {
|
||||
.message-list-box {
|
||||
background #232425;
|
||||
}
|
||||
}
|
||||
}
|
||||
133
new-ui/projects/web/src/assets/css/mobile/image-mj.css
Normal file
@@ -0,0 +1,133 @@
|
||||
.mobile-mj .content .text-line {
|
||||
padding: 6px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.mobile-mj .content .text-line .van-row .van-col .rate {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background-color: #f5f5f5;
|
||||
padding: 5px 10px;
|
||||
margin: 5px 0;
|
||||
border-radius: 5px;
|
||||
flex-flow: column;
|
||||
}
|
||||
.mobile-mj .content .text-line .van-row .van-col .rate .icon {
|
||||
text-align: center;
|
||||
}
|
||||
.mobile-mj .content .text-line .van-row .van-col .rate .icon .van-image {
|
||||
max-width: 20px;
|
||||
}
|
||||
.mobile-mj .content .text-line .van-row .van-col .rate .text {
|
||||
text-align: center;
|
||||
color: #555;
|
||||
}
|
||||
.mobile-mj .content .text-line .van-row .van-col .model {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background-color: #f5f5f5;
|
||||
padding: 6px;
|
||||
margin: 5px 0;
|
||||
border-radius: 5px;
|
||||
flex-flow: column;
|
||||
}
|
||||
.mobile-mj .content .text-line .van-row .van-col .model .icon {
|
||||
text-align: center;
|
||||
}
|
||||
.mobile-mj .content .text-line .van-row .van-col .model .icon .van-image {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
}
|
||||
.mobile-mj .content .text-line .van-row .van-col .model .text {
|
||||
text-align: center;
|
||||
color: #555;
|
||||
}
|
||||
.mobile-mj .content .text-line .van-row .van-col .active {
|
||||
background-color: #e5e5e5;
|
||||
}
|
||||
.mobile-mj .content .text-line .van-button {
|
||||
position: relative;
|
||||
}
|
||||
.mobile-mj .content .text-line .van-button .van-tag {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
}
|
||||
.mobile-mj .content .text-line .align-right {
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
}
|
||||
.mobile-mj .content .running-job-list .van-grid .van-grid-item .van-grid-item__content {
|
||||
padding: 0;
|
||||
position: relative;
|
||||
}
|
||||
.mobile-mj .content .running-job-list .van-grid .van-grid-item .van-grid-item__content .van-image,
|
||||
.mobile-mj .content .running-job-list .van-grid .van-grid-item .van-grid-item__content .task-in-queue {
|
||||
min-height: 100px;
|
||||
}
|
||||
.mobile-mj .content .running-job-list .van-grid .van-grid-item .van-grid-item__content .progress {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(50,50,50,0.5);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
.mobile-mj .content .running-job-list .van-grid .van-grid-item .van-grid-item__content .progress .van-circle__text {
|
||||
color: #fff;
|
||||
}
|
||||
.mobile-mj .content .running-job-list .van-grid .van-grid-item .van-grid-item__content .task-in-queue {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: center;
|
||||
color: #c1c1c1;
|
||||
}
|
||||
.mobile-mj .content .running-job-list .van-grid .van-grid-item .van-grid-item__content .task-in-queue .icon {
|
||||
text-align: center;
|
||||
}
|
||||
.mobile-mj .content .running-job-list .van-grid .van-grid-item .van-grid-item__content .task-in-queue .icon .iconfont {
|
||||
font-size: 24px;
|
||||
}
|
||||
.mobile-mj .content .running-job-list .van-grid .van-grid-item .van-grid-item__content .task-in-queue .text {
|
||||
font-size: 14px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.mobile-mj .content .finish-job-list .van-grid .van-grid-item .van-grid-item__content {
|
||||
padding: 0;
|
||||
}
|
||||
.mobile-mj .content .finish-job-list .van-grid .van-grid-item .van-grid-item__content .job-item {
|
||||
overflow: hidden;
|
||||
border-radius: 6px;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.mobile-mj .content .finish-job-list .van-grid .van-grid-item .van-grid-item__content .job-item .opt .opt-btn {
|
||||
padding: 3px 10px;
|
||||
text-align: center;
|
||||
border-radius: 5px;
|
||||
margin: 3px 0;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
background-color: #4e5058;
|
||||
color: #fff;
|
||||
}
|
||||
.mobile-mj .content .finish-job-list .van-grid .van-grid-item .van-grid-item__content .job-item .van-image {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
}
|
||||
.mobile-mj .content .finish-job-list .van-grid .van-grid-item .van-grid-item__content .job-item .upscale {
|
||||
height: 260px;
|
||||
width: 100%;
|
||||
}
|
||||
.mobile-mj .content .finish-job-list .van-grid .van-grid-item .van-grid-item__content .job-item .remove {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
}
|
||||
.mobile-mj .content .finish-job-list .van-grid .van-grid-item .van-grid-item__content .job-item .remove .el-button {
|
||||
margin-left: 5px;
|
||||
height: auto;
|
||||
padding: 5px;
|
||||
}
|
||||
187
new-ui/projects/web/src/assets/css/mobile/image-mj.styl
Normal file
@@ -0,0 +1,187 @@
|
||||
.mobile-mj {
|
||||
.content {
|
||||
.text-line {
|
||||
padding 6px
|
||||
font-size 14px
|
||||
|
||||
.van-row {
|
||||
.van-col {
|
||||
.rate {
|
||||
display: flex;
|
||||
justify-content center
|
||||
background-color #f5f5f5
|
||||
padding 5px 10px
|
||||
margin 5px 0
|
||||
border-radius 5px
|
||||
flex-flow column
|
||||
|
||||
.icon {
|
||||
text-align center
|
||||
|
||||
.van-image {
|
||||
max-width 20px
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
text-align center
|
||||
color #555555
|
||||
}
|
||||
}
|
||||
|
||||
.model {
|
||||
display: flex;
|
||||
justify-content center
|
||||
background-color #f5f5f5
|
||||
padding 6px
|
||||
margin 5px 0
|
||||
border-radius 5px
|
||||
flex-flow column
|
||||
|
||||
.icon {
|
||||
text-align center
|
||||
|
||||
.van-image {
|
||||
width 100%
|
||||
height 50px
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
text-align center
|
||||
color #555555
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color #e5e5e5
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.van-button {
|
||||
position relative
|
||||
|
||||
.van-tag {
|
||||
position absolute
|
||||
right 20px
|
||||
}
|
||||
}
|
||||
|
||||
.align-right {
|
||||
display flex
|
||||
justify-content right
|
||||
}
|
||||
}
|
||||
|
||||
.running-job-list {
|
||||
.van-grid {
|
||||
.van-grid-item {
|
||||
.van-grid-item__content {
|
||||
padding 0
|
||||
position relative
|
||||
|
||||
.van-image, .task-in-queue {
|
||||
min-height 100px
|
||||
}
|
||||
|
||||
.progress {
|
||||
display flex
|
||||
justify-content center
|
||||
align-items center
|
||||
width 100%
|
||||
height 100%
|
||||
background rgba(50, 50, 50, 0.5)
|
||||
position absolute
|
||||
left 0
|
||||
top 0
|
||||
|
||||
.van-circle__text {
|
||||
color #ffffff
|
||||
}
|
||||
}
|
||||
|
||||
// end progress
|
||||
|
||||
.task-in-queue {
|
||||
display flex
|
||||
flex-flow column
|
||||
justify-content center
|
||||
color #c1c1c1
|
||||
|
||||
.icon {
|
||||
text-align center
|
||||
|
||||
.iconfont {
|
||||
font-size 24px
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size 14px
|
||||
margin-top 5px
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//end running jobs
|
||||
|
||||
.finish-job-list {
|
||||
.van-grid {
|
||||
.van-grid-item {
|
||||
.van-grid-item__content {
|
||||
padding 0
|
||||
|
||||
.job-item {
|
||||
overflow hidden
|
||||
border-radius 6px
|
||||
position relative
|
||||
height 100%
|
||||
width 100%
|
||||
|
||||
.opt {
|
||||
.opt-btn {
|
||||
padding 3px 10px
|
||||
text-align center
|
||||
border-radius 5px
|
||||
margin 3px 0
|
||||
display block
|
||||
cursor pointer
|
||||
background-color #4E5058
|
||||
color #ffffff
|
||||
}
|
||||
}
|
||||
|
||||
.van-image {
|
||||
width 100%
|
||||
height 200px
|
||||
}
|
||||
|
||||
.upscale {
|
||||
height 260px
|
||||
width 100%
|
||||
}
|
||||
|
||||
.remove {
|
||||
position absolute
|
||||
right 5px
|
||||
top 5px
|
||||
|
||||
.el-button {
|
||||
margin-left 5px
|
||||
height auto
|
||||
padding 5px
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
63
new-ui/projects/web/src/assets/css/sd-task-dialog.css
Normal file
@@ -0,0 +1,63 @@
|
||||
.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 .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: 20px 0 10px 0;
|
||||
}
|
||||
.el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .copy-params .el-button {
|
||||
width: 100%;
|
||||
}
|
||||
96
new-ui/projects/web/src/assets/css/sd-task-dialog.styl
Normal file
@@ -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 20px 0 10px 0
|
||||
|
||||
.el-button {
|
||||
width 100%
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// end el-row
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
215
new-ui/projects/web/src/assets/css/task-list.css
Normal file
@@ -0,0 +1,215 @@
|
||||
.task-list-box {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
color: #fff;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.task-list-box .task-list-inner .el-tabs {
|
||||
--el-tabs-header-height: 55px;
|
||||
}
|
||||
.task-list-box .task-list-inner .el-tabs__item {
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
}
|
||||
.task-list-box .task-list-inner .title-tabs .el-tabs__item.is-active {
|
||||
color: #47fff1;
|
||||
font-size: 18px;
|
||||
}
|
||||
.task-list-box .task-list-inner .title-tabs .el-tabs__active-bar {
|
||||
background-color: #47fff1;
|
||||
}
|
||||
.task-list-box .task-list-inner .el-textarea {
|
||||
--el-input-focus-border-color: #47fff1;
|
||||
}
|
||||
.task-list-box .task-list-inner .el-textarea__inner {
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
}
|
||||
.task-list-box .task-list-inner .el-input__wrapper {
|
||||
background: transparent;
|
||||
padding: 5px;
|
||||
}
|
||||
.task-list-box .task-list-inner .text {
|
||||
margin-bottom: 10px;
|
||||
color: #6b778c;
|
||||
font-size: 15px;
|
||||
}
|
||||
.task-list-box .task-list-inner .param-line.pt {
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
.task-list-box .task-list-inner .form-item-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.task-list-box .task-list-inner .form-item-inner .el-icon {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.task-list-box .task-list-inner .el-form-item__label {
|
||||
color: #fff;
|
||||
}
|
||||
.task-list-box .task-list-inner .img-inline {
|
||||
display: flex;
|
||||
}
|
||||
.task-list-box .task-list-inner .img-inline .img-uploader .el-upload {
|
||||
border: 1px dashed var(--el-border-color);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 120px;
|
||||
transition: var(--el-transition-duration-fast);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.task-list-box .task-list-inner .img-inline .img-uploader .el-upload:hover {
|
||||
border-color: var(--el-color-primary);
|
||||
}
|
||||
.task-list-box .task-list-inner .img-inline .img-uploader .el-upload .el-icon.uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
text-align: center;
|
||||
}
|
||||
.task-list-box .task-list-inner .img-inline .img-list-box {
|
||||
display: flex;
|
||||
}
|
||||
.task-list-box .task-list-inner .img-inline .img-list-box .img-item {
|
||||
width: 120px;
|
||||
position: relative;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.task-list-box .task-list-inner .img-inline .img-list-box .img-item .el-image {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.task-list-box .task-list-inner .img-inline .img-list-box .img-item .el-button {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.task-list-box .task-list-inner .submit-btn {
|
||||
display: flex;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.task-list-box .task-list-inner .submit-btn .el-button {
|
||||
width: 200px;
|
||||
}
|
||||
.task-list-box .task-list-inner .submit-btn .text-info {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
align-items: center;
|
||||
}
|
||||
.task-list-box .task-list-inner .job-list-box .running-job-list .job-item {
|
||||
width: 100%;
|
||||
padding: 2px;
|
||||
background-color: #555;
|
||||
}
|
||||
.task-list-box .task-list-inner .job-list-box .running-job-list .job-item .job-item-inner {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.task-list-box .task-list-inner .job-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 .task-list-inner .job-list-box .running-job-list .job-item .job-item-inner .progress span {
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
}
|
||||
.task-list-box .task-list-inner .job-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; /* 添加过渡效果 */
|
||||
position: relative;
|
||||
}
|
||||
.task-list-box .task-list-inner .job-list-box .finish-job-list .job-item .opt .opt-line {
|
||||
margin: 6px 0;
|
||||
}
|
||||
.task-list-box .task-list-inner .job-list-box .finish-job-list .job-item .opt .opt-line ul {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
}
|
||||
.task-list-box .task-list-inner .job-list-box .finish-job-list .job-item .opt .opt-line ul li {
|
||||
margin-right: 6px;
|
||||
}
|
||||
.task-list-box .task-list-inner .job-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 .task-list-inner .job-list-box .finish-job-list .job-item .opt .opt-line ul li a:hover {
|
||||
background-color: #6d6f78;
|
||||
}
|
||||
.task-list-box .task-list-inner .job-list-box .finish-job-list .job-item .opt .opt-line ul .show-prompt {
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.task-list-box .task-list-inner .job-list-box .finish-job-list .job-item .remove {
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
}
|
||||
.task-list-box .task-list-inner .job-list-box .finish-job-list .job-item:hover .remove {
|
||||
display: block;
|
||||
}
|
||||
.task-list-box .task-list-inner .job-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 .task-list-inner .job-list-box .el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: visible;
|
||||
}
|
||||
.task-list-box .task-list-inner .job-list-box .el-image img {
|
||||
height: 240px;
|
||||
}
|
||||
.task-list-box .task-list-inner .job-list-box .el-image .el-image-viewer__wrapper img {
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
.task-list-box .task-list-inner .job-list-box .el-image .image-slot {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 200px;
|
||||
color: #fff;
|
||||
height: 240px;
|
||||
}
|
||||
.task-list-box .task-list-inner .job-list-box .el-image .image-slot .iconfont {
|
||||
font-size: 50px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.task-list-box .task-list-inner .job-list-box .el-image.upscale {
|
||||
max-height: 310px;
|
||||
}
|
||||
.task-list-box .task-list-inner .job-list-box .el-image.upscale img {
|
||||
height: 310px;
|
||||
}
|
||||
.task-list-box .task-list-inner .job-list-box .el-image.upscale .el-image-viewer__wrapper img {
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
295
new-ui/projects/web/src/assets/css/task-list.styl
Normal file
@@ -0,0 +1,295 @@
|
||||
.task-list-box {
|
||||
width 100%
|
||||
padding 10px
|
||||
color #ffffff
|
||||
overflow-x hidden
|
||||
|
||||
.task-list-inner {
|
||||
.el-tabs {
|
||||
--el-tabs-header-height: 55px;
|
||||
}
|
||||
|
||||
.el-tabs__item {
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.title-tabs .el-tabs__item.is-active {
|
||||
color: #47FFF1;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.title-tabs .el-tabs__active-bar {
|
||||
background-color: #47FFF1;
|
||||
}
|
||||
|
||||
.el-textarea {
|
||||
--el-input-focus-border-color: #47FFF1;
|
||||
}
|
||||
|
||||
.el-textarea__inner {
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.el-input__wrapper {
|
||||
background: transparent;
|
||||
padding 5px
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-bottom: 10px;
|
||||
color: #6b778c;
|
||||
font-size: 15px
|
||||
}
|
||||
|
||||
.param-line.pt {
|
||||
padding-top 5px
|
||||
padding-bottom 5px
|
||||
}
|
||||
|
||||
.form-item-inner {
|
||||
display flex
|
||||
align-items: center
|
||||
|
||||
.el-icon {
|
||||
margin-left 10px
|
||||
}
|
||||
}
|
||||
|
||||
.el-form-item__label {
|
||||
color #ffffff
|
||||
}
|
||||
|
||||
// 图片上传样式
|
||||
|
||||
.img-inline {
|
||||
display flex
|
||||
|
||||
.img-uploader {
|
||||
.el-upload {
|
||||
border: 1px dashed var(--el-border-color);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width 120px;
|
||||
transition: var(--el-transition-duration-fast);
|
||||
margin-bottom: 20px;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.el-icon.uploader-icon {
|
||||
font-size: 28px
|
||||
color: #8c939d
|
||||
width 100%
|
||||
height: 120px
|
||||
text-align: center
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.img-list-box {
|
||||
display flex
|
||||
|
||||
.img-item {
|
||||
width 120px
|
||||
position relative
|
||||
margin-right 10px
|
||||
|
||||
.el-image {
|
||||
width 120px
|
||||
height 120px
|
||||
border-radius 5px
|
||||
}
|
||||
|
||||
.el-button {
|
||||
position absolute
|
||||
right 5px
|
||||
top 5px
|
||||
width 20px
|
||||
height 20px
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 提交按钮
|
||||
|
||||
.submit-btn {
|
||||
display flex
|
||||
margin: 20px 0
|
||||
|
||||
.el-button {
|
||||
width 200px
|
||||
}
|
||||
|
||||
.text-info {
|
||||
width 100%
|
||||
display flex
|
||||
justify-content right
|
||||
align-items center
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 任务列表
|
||||
|
||||
.job-list-box {
|
||||
.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; /* 添加过渡效果 */
|
||||
position relative
|
||||
|
||||
.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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.remove {
|
||||
display none
|
||||
position absolute
|
||||
right 10px
|
||||
top 10px
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.remove {
|
||||
display block
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.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
|
||||
min-height 200px
|
||||
color #ffffff
|
||||
height 240px
|
||||
|
||||
.iconfont {
|
||||
font-size 50px
|
||||
margin-bottom 10px
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-image.upscale {
|
||||
img {
|
||||
height 310px
|
||||
}
|
||||
|
||||
.image-slot {
|
||||
height 310px
|
||||
}
|
||||
|
||||
.el-image-viewer__wrapper {
|
||||
img {
|
||||
width auto
|
||||
height auto
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
227
new-ui/projects/web/src/assets/iconfont/iconfont.css
Normal file
@@ -0,0 +1,227 @@
|
||||
@font-face {
|
||||
font-family: "iconfont"; /* Project id 4125778 */
|
||||
src: url('iconfont.woff2?t=1708054962140') format('woff2'),
|
||||
url('iconfont.woff?t=1708054962140') format('woff'),
|
||||
url('iconfont.ttf?t=1708054962140') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-family: "iconfont" !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-prompt:before {
|
||||
content: "\e6ce";
|
||||
}
|
||||
|
||||
.icon-share-bold:before {
|
||||
content: "\e626";
|
||||
}
|
||||
|
||||
.icon-cancel-share:before {
|
||||
content: "\e682";
|
||||
}
|
||||
|
||||
.icon-xls:before {
|
||||
content: "\e678";
|
||||
}
|
||||
|
||||
.icon-file:before {
|
||||
content: "\e62f";
|
||||
}
|
||||
|
||||
.icon-doc:before {
|
||||
content: "\e6c2";
|
||||
}
|
||||
|
||||
.icon-pdf:before {
|
||||
content: "\e6c3";
|
||||
}
|
||||
|
||||
.icon-ppt:before {
|
||||
content: "\e642";
|
||||
}
|
||||
|
||||
.icon-txt:before {
|
||||
content: "\e644";
|
||||
}
|
||||
|
||||
.icon-sql:before {
|
||||
content: "\e65b";
|
||||
}
|
||||
|
||||
.icon-md:before {
|
||||
content: "\e63a";
|
||||
}
|
||||
|
||||
.icon-loading:before {
|
||||
content: "\e627";
|
||||
}
|
||||
|
||||
.icon-alipay:before {
|
||||
content: "\e634";
|
||||
}
|
||||
|
||||
.icon-face:before {
|
||||
content: "\e64b";
|
||||
}
|
||||
|
||||
.icon-book:before {
|
||||
content: "\e622";
|
||||
}
|
||||
|
||||
.icon-vip-user:before {
|
||||
content: "\e605";
|
||||
}
|
||||
|
||||
.icon-vip:before {
|
||||
content: "\e688";
|
||||
}
|
||||
|
||||
.icon-cart:before {
|
||||
content: "\e603";
|
||||
}
|
||||
|
||||
.icon-image-list:before {
|
||||
content: "\e601";
|
||||
}
|
||||
|
||||
.icon-share:before {
|
||||
content: "\e63e";
|
||||
}
|
||||
|
||||
.icon-palette:before {
|
||||
content: "\e6da";
|
||||
}
|
||||
|
||||
.icon-palette-pen:before {
|
||||
content: "\e60c";
|
||||
}
|
||||
|
||||
.icon-image:before {
|
||||
content: "\e7de";
|
||||
}
|
||||
|
||||
.icon-order:before {
|
||||
content: "\e600";
|
||||
}
|
||||
|
||||
.icon-service:before {
|
||||
content: "\e62d";
|
||||
}
|
||||
|
||||
.icon-like:before {
|
||||
content: "\e640";
|
||||
}
|
||||
|
||||
.icon-recharge:before {
|
||||
content: "\e637";
|
||||
}
|
||||
|
||||
.icon-model:before {
|
||||
content: "\e867";
|
||||
}
|
||||
|
||||
.icon-plugin:before {
|
||||
content: "\e69d";
|
||||
}
|
||||
|
||||
.icon-quick-start:before {
|
||||
content: "\e677";
|
||||
}
|
||||
|
||||
.icon-control:before {
|
||||
content: "\e69e";
|
||||
}
|
||||
|
||||
.icon-bug:before {
|
||||
content: "\e645";
|
||||
}
|
||||
|
||||
.icon-export:before {
|
||||
content: "\e791";
|
||||
}
|
||||
|
||||
.icon-sub-menu:before {
|
||||
content: "\e86b";
|
||||
}
|
||||
|
||||
.icon-wechat-pay:before {
|
||||
content: "\e639";
|
||||
}
|
||||
|
||||
.icon-donate:before {
|
||||
content: "\e7ee";
|
||||
}
|
||||
|
||||
.icon-reward:before {
|
||||
content: "\e6c7";
|
||||
}
|
||||
|
||||
.icon-bell:before {
|
||||
content: "\e887";
|
||||
}
|
||||
|
||||
.icon-home:before {
|
||||
content: "\e6cb";
|
||||
}
|
||||
|
||||
.icon-menu:before {
|
||||
content: "\e6a6";
|
||||
}
|
||||
|
||||
.icon-log:before {
|
||||
content: "\e61c";
|
||||
}
|
||||
|
||||
.icon-user-fill:before {
|
||||
content: "\e7d5";
|
||||
}
|
||||
|
||||
.icon-user-circle:before {
|
||||
content: "\e860";
|
||||
}
|
||||
|
||||
.icon-chart:before {
|
||||
content: "\e631";
|
||||
}
|
||||
|
||||
.icon-wechat:before {
|
||||
content: "\e621";
|
||||
}
|
||||
|
||||
.icon-config:before {
|
||||
content: "\e612";
|
||||
}
|
||||
|
||||
.icon-api-key:before {
|
||||
content: "\e7d8";
|
||||
}
|
||||
|
||||
.icon-role:before {
|
||||
content: "\e60a";
|
||||
}
|
||||
|
||||
.icon-dashboard:before {
|
||||
content: "\e602";
|
||||
}
|
||||
|
||||
.icon-password:before {
|
||||
content: "\e62a";
|
||||
}
|
||||
|
||||
.icon-send:before {
|
||||
content: "\e604";
|
||||
}
|
||||
|
||||
.icon-logout:before {
|
||||
content: "\e62e";
|
||||
}
|
||||
|
||||
.icon-github:before {
|
||||
content: "\e66f";
|
||||
}
|
||||
|
||||
1
new-ui/projects/web/src/assets/iconfont/iconfont.js
Normal file
380
new-ui/projects/web/src/assets/iconfont/iconfont.json
Normal file
@@ -0,0 +1,380 @@
|
||||
{
|
||||
"id": "4125778",
|
||||
"name": "chatgpt",
|
||||
"font_family": "iconfont",
|
||||
"css_prefix_text": "icon-",
|
||||
"description": "",
|
||||
"glyphs": [
|
||||
{
|
||||
"icon_id": "8017627",
|
||||
"name": "prompt",
|
||||
"font_class": "prompt",
|
||||
"unicode": "e6ce",
|
||||
"unicode_decimal": 59086
|
||||
},
|
||||
{
|
||||
"icon_id": "1132455",
|
||||
"name": "share-bold",
|
||||
"font_class": "share-bold",
|
||||
"unicode": "e626",
|
||||
"unicode_decimal": 58918
|
||||
},
|
||||
{
|
||||
"icon_id": "7567359",
|
||||
"name": "cancel-share",
|
||||
"font_class": "cancel-share",
|
||||
"unicode": "e682",
|
||||
"unicode_decimal": 59010
|
||||
},
|
||||
{
|
||||
"icon_id": "12600976",
|
||||
"name": "xls",
|
||||
"font_class": "xls",
|
||||
"unicode": "e678",
|
||||
"unicode_decimal": 59000
|
||||
},
|
||||
{
|
||||
"icon_id": "3750429",
|
||||
"name": "file",
|
||||
"font_class": "file",
|
||||
"unicode": "e62f",
|
||||
"unicode_decimal": 58927
|
||||
},
|
||||
{
|
||||
"icon_id": "4318810",
|
||||
"name": "doc",
|
||||
"font_class": "doc",
|
||||
"unicode": "e6c2",
|
||||
"unicode_decimal": 59074
|
||||
},
|
||||
{
|
||||
"icon_id": "4318811",
|
||||
"name": "pdf",
|
||||
"font_class": "pdf",
|
||||
"unicode": "e6c3",
|
||||
"unicode_decimal": 59075
|
||||
},
|
||||
{
|
||||
"icon_id": "4628503",
|
||||
"name": "ppt",
|
||||
"font_class": "ppt",
|
||||
"unicode": "e642",
|
||||
"unicode_decimal": 58946
|
||||
},
|
||||
{
|
||||
"icon_id": "6233095",
|
||||
"name": "txt",
|
||||
"font_class": "txt",
|
||||
"unicode": "e644",
|
||||
"unicode_decimal": 58948
|
||||
},
|
||||
{
|
||||
"icon_id": "12600910",
|
||||
"name": "sql",
|
||||
"font_class": "sql",
|
||||
"unicode": "e65b",
|
||||
"unicode_decimal": 58971
|
||||
},
|
||||
{
|
||||
"icon_id": "31260974",
|
||||
"name": "md",
|
||||
"font_class": "md",
|
||||
"unicode": "e63a",
|
||||
"unicode_decimal": 58938
|
||||
},
|
||||
{
|
||||
"icon_id": "1278349",
|
||||
"name": "loading",
|
||||
"font_class": "loading",
|
||||
"unicode": "e627",
|
||||
"unicode_decimal": 58919
|
||||
},
|
||||
{
|
||||
"icon_id": "1486848",
|
||||
"name": "支付宝支付",
|
||||
"font_class": "alipay",
|
||||
"unicode": "e634",
|
||||
"unicode_decimal": 58932
|
||||
},
|
||||
{
|
||||
"icon_id": "845789",
|
||||
"name": "笑脸",
|
||||
"font_class": "face",
|
||||
"unicode": "e64b",
|
||||
"unicode_decimal": 58955
|
||||
},
|
||||
{
|
||||
"icon_id": "11836501",
|
||||
"name": "知识库",
|
||||
"font_class": "book",
|
||||
"unicode": "e622",
|
||||
"unicode_decimal": 58914
|
||||
},
|
||||
{
|
||||
"icon_id": "1105",
|
||||
"name": "认证用户",
|
||||
"font_class": "vip-user",
|
||||
"unicode": "e605",
|
||||
"unicode_decimal": 58885
|
||||
},
|
||||
{
|
||||
"icon_id": "1473442",
|
||||
"name": "VIP",
|
||||
"font_class": "vip",
|
||||
"unicode": "e688",
|
||||
"unicode_decimal": 59016
|
||||
},
|
||||
{
|
||||
"icon_id": "1306",
|
||||
"name": "购物车空",
|
||||
"font_class": "cart",
|
||||
"unicode": "e603",
|
||||
"unicode_decimal": 58883
|
||||
},
|
||||
{
|
||||
"icon_id": "1210",
|
||||
"name": "多素材",
|
||||
"font_class": "image-list",
|
||||
"unicode": "e601",
|
||||
"unicode_decimal": 58881
|
||||
},
|
||||
{
|
||||
"icon_id": "6438267",
|
||||
"name": "分享",
|
||||
"font_class": "share",
|
||||
"unicode": "e63e",
|
||||
"unicode_decimal": 58942
|
||||
},
|
||||
{
|
||||
"icon_id": "8361893",
|
||||
"name": "绘画",
|
||||
"font_class": "palette",
|
||||
"unicode": "e6da",
|
||||
"unicode_decimal": 59098
|
||||
},
|
||||
{
|
||||
"icon_id": "17832791",
|
||||
"name": "绘图、调色盘",
|
||||
"font_class": "palette-pen",
|
||||
"unicode": "e60c",
|
||||
"unicode_decimal": 58892
|
||||
},
|
||||
{
|
||||
"icon_id": "4766917",
|
||||
"name": "image",
|
||||
"font_class": "image",
|
||||
"unicode": "e7de",
|
||||
"unicode_decimal": 59358
|
||||
},
|
||||
{
|
||||
"icon_id": "1375",
|
||||
"name": "订单",
|
||||
"font_class": "order",
|
||||
"unicode": "e600",
|
||||
"unicode_decimal": 58880
|
||||
},
|
||||
{
|
||||
"icon_id": "6562297",
|
||||
"name": "客服",
|
||||
"font_class": "service",
|
||||
"unicode": "e62d",
|
||||
"unicode_decimal": 58925
|
||||
},
|
||||
{
|
||||
"icon_id": "21598358",
|
||||
"name": "喜欢",
|
||||
"font_class": "like",
|
||||
"unicode": "e640",
|
||||
"unicode_decimal": 58944
|
||||
},
|
||||
{
|
||||
"icon_id": "936873",
|
||||
"name": "充值1",
|
||||
"font_class": "recharge",
|
||||
"unicode": "e637",
|
||||
"unicode_decimal": 58935
|
||||
},
|
||||
{
|
||||
"icon_id": "18991679",
|
||||
"name": "model",
|
||||
"font_class": "model",
|
||||
"unicode": "e867",
|
||||
"unicode_decimal": 59495
|
||||
},
|
||||
{
|
||||
"icon_id": "5244045",
|
||||
"name": "插件",
|
||||
"font_class": "plugin",
|
||||
"unicode": "e69d",
|
||||
"unicode_decimal": 59037
|
||||
},
|
||||
{
|
||||
"icon_id": "8893244",
|
||||
"name": "高效率 copy",
|
||||
"font_class": "quick-start",
|
||||
"unicode": "e677",
|
||||
"unicode_decimal": 58999
|
||||
},
|
||||
{
|
||||
"icon_id": "16480872",
|
||||
"name": "插件功能",
|
||||
"font_class": "control",
|
||||
"unicode": "e69e",
|
||||
"unicode_decimal": 59038
|
||||
},
|
||||
{
|
||||
"icon_id": "22187612",
|
||||
"name": "缺陷管理",
|
||||
"font_class": "bug",
|
||||
"unicode": "e645",
|
||||
"unicode_decimal": 58949
|
||||
},
|
||||
{
|
||||
"icon_id": "4765958",
|
||||
"name": "export",
|
||||
"font_class": "export",
|
||||
"unicode": "e791",
|
||||
"unicode_decimal": 59281
|
||||
},
|
||||
{
|
||||
"icon_id": "6343824",
|
||||
"name": "menu",
|
||||
"font_class": "sub-menu",
|
||||
"unicode": "e86b",
|
||||
"unicode_decimal": 59499
|
||||
},
|
||||
{
|
||||
"icon_id": "1487626",
|
||||
"name": "微信支付",
|
||||
"font_class": "wechat-pay",
|
||||
"unicode": "e639",
|
||||
"unicode_decimal": 58937
|
||||
},
|
||||
{
|
||||
"icon_id": "7791019",
|
||||
"name": "捐赠",
|
||||
"font_class": "donate",
|
||||
"unicode": "e7ee",
|
||||
"unicode_decimal": 59374
|
||||
},
|
||||
{
|
||||
"icon_id": "14593731",
|
||||
"name": "打赏",
|
||||
"font_class": "reward",
|
||||
"unicode": "e6c7",
|
||||
"unicode_decimal": 59079
|
||||
},
|
||||
{
|
||||
"icon_id": "8623603",
|
||||
"name": "bell",
|
||||
"font_class": "bell",
|
||||
"unicode": "e887",
|
||||
"unicode_decimal": 59527
|
||||
},
|
||||
{
|
||||
"icon_id": "673799",
|
||||
"name": "首页",
|
||||
"font_class": "home",
|
||||
"unicode": "e6cb",
|
||||
"unicode_decimal": 59083
|
||||
},
|
||||
{
|
||||
"icon_id": "11808058",
|
||||
"name": "menu",
|
||||
"font_class": "menu",
|
||||
"unicode": "e6a6",
|
||||
"unicode_decimal": 59046
|
||||
},
|
||||
{
|
||||
"icon_id": "1166053",
|
||||
"name": "日志",
|
||||
"font_class": "log",
|
||||
"unicode": "e61c",
|
||||
"unicode_decimal": 58908
|
||||
},
|
||||
{
|
||||
"icon_id": "6151151",
|
||||
"name": "user-fill",
|
||||
"font_class": "user-fill",
|
||||
"unicode": "e7d5",
|
||||
"unicode_decimal": 59349
|
||||
},
|
||||
{
|
||||
"icon_id": "6172778",
|
||||
"name": "user-circle",
|
||||
"font_class": "user-circle",
|
||||
"unicode": "e860",
|
||||
"unicode_decimal": 59488
|
||||
},
|
||||
{
|
||||
"icon_id": "7821146",
|
||||
"name": "chart",
|
||||
"font_class": "chart",
|
||||
"unicode": "e631",
|
||||
"unicode_decimal": 58929
|
||||
},
|
||||
{
|
||||
"icon_id": "8430216",
|
||||
"name": "wechat",
|
||||
"font_class": "wechat",
|
||||
"unicode": "e621",
|
||||
"unicode_decimal": 58913
|
||||
},
|
||||
{
|
||||
"icon_id": "9769247",
|
||||
"name": "config",
|
||||
"font_class": "config",
|
||||
"unicode": "e612",
|
||||
"unicode_decimal": 58898
|
||||
},
|
||||
{
|
||||
"icon_id": "10055632",
|
||||
"name": "API密钥",
|
||||
"font_class": "api-key",
|
||||
"unicode": "e7d8",
|
||||
"unicode_decimal": 59352
|
||||
},
|
||||
{
|
||||
"icon_id": "11466716",
|
||||
"name": "mg-role",
|
||||
"font_class": "role",
|
||||
"unicode": "e60a",
|
||||
"unicode_decimal": 58890
|
||||
},
|
||||
{
|
||||
"icon_id": "4194141",
|
||||
"name": "首页dashboard",
|
||||
"font_class": "dashboard",
|
||||
"unicode": "e602",
|
||||
"unicode_decimal": 58882
|
||||
},
|
||||
{
|
||||
"icon_id": "611345",
|
||||
"name": "密码",
|
||||
"font_class": "password",
|
||||
"unicode": "e62a",
|
||||
"unicode_decimal": 58922
|
||||
},
|
||||
{
|
||||
"icon_id": "1418205",
|
||||
"name": "发送",
|
||||
"font_class": "send",
|
||||
"unicode": "e604",
|
||||
"unicode_decimal": 58884
|
||||
},
|
||||
{
|
||||
"icon_id": "1048893",
|
||||
"name": "注销",
|
||||
"font_class": "logout",
|
||||
"unicode": "e62e",
|
||||
"unicode_decimal": 58926
|
||||
},
|
||||
{
|
||||
"icon_id": "14401714",
|
||||
"name": "github",
|
||||
"font_class": "github",
|
||||
"unicode": "e66f",
|
||||
"unicode_decimal": 58991
|
||||
}
|
||||
]
|
||||
}
|
||||