init
This commit is contained in:
weicw
14
.editorconfig
Normal file
14
.editorconfig
Normal file
@@ -0,0 +1,14 @@
|
||||
# https://editorconfig.org
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
end_of_line = lf
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
|
||||
[*.md]
|
||||
insert_final_newline = false
|
||||
trim_trailing_whitespace = false
|
||||
3
.env
Normal file
3
.env
Normal file
@@ -0,0 +1,3 @@
|
||||
VUE_APP_VERSION=1.5.0
|
||||
VUE_APP_NAME=生态环境监测系统
|
||||
VUE_APP_API_BASE_URL=http://localhost:8080/api
|
||||
1
.env.development
Normal file
1
.env.development
Normal file
@@ -0,0 +1 @@
|
||||
VUE_APP_API_BASE_URL=http://localhost:10001/api
|
||||
1
.env.preview
Normal file
1
.env.preview
Normal file
@@ -0,0 +1 @@
|
||||
VUE_APP_API_BASE_URL=https://v1.eleadmin.com/api
|
||||
4
.eslintignore
Normal file
4
.eslintignore
Normal file
@@ -0,0 +1,4 @@
|
||||
public
|
||||
src/assets
|
||||
dist
|
||||
node_modules
|
||||
14
.eslintrc.js
Normal file
14
.eslintrc.js
Normal file
@@ -0,0 +1,14 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
env: {
|
||||
node: true,
|
||||
},
|
||||
extends: [
|
||||
'plugin:vue/vue3-essential',
|
||||
'eslint:recommended'
|
||||
],
|
||||
parserOptions: {
|
||||
parser: 'babel-eslint'
|
||||
},
|
||||
rules: {}
|
||||
}
|
||||
23
.gitignore
vendored
Normal file
23
.gitignore
vendored
Normal file
@@ -0,0 +1,23 @@
|
||||
.DS_Store
|
||||
node_modules
|
||||
/dist
|
||||
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Log files
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
5
babel.config.js
Normal file
5
babel.config.js
Normal file
@@ -0,0 +1,5 @@
|
||||
module.exports = {
|
||||
presets: [
|
||||
'@vue/cli-plugin-babel/preset'
|
||||
]
|
||||
}
|
||||
14
jsconfig.json
Normal file
14
jsconfig.json
Normal file
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"baseUrl": "./",
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"src/*"
|
||||
]
|
||||
}
|
||||
},
|
||||
"exclude": [
|
||||
"node_modules",
|
||||
"dist"
|
||||
]
|
||||
}
|
||||
34631
package-lock.json
generated
Normal file
34631
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
54
package.json
Normal file
54
package.json
Normal file
@@ -0,0 +1,54 @@
|
||||
{
|
||||
"name": "ele-admin-pro-template",
|
||||
"version": "1.5.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"build:preview": "vue-cli-service build --mode preview",
|
||||
"build:report": "vue-cli-service build --report",
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@amap/amap-jsapi-loader": "~1.0.1",
|
||||
"@tinymce/tinymce-vue": "~4.0.4",
|
||||
"ant-design-vue": "~2.2.2",
|
||||
"axios": "~0.21.1",
|
||||
"core-js": "~3.15.2",
|
||||
"countup.js": "~2.0.7",
|
||||
"cropperjs": "~1.5.12",
|
||||
"echarts": "~5.1.2",
|
||||
"echarts-wordcloud": "~2.0.0",
|
||||
"ele-admin-pro": "~1.5.0",
|
||||
"nprogress": "~0.2.0",
|
||||
"tinymce": "~5.8.2",
|
||||
"vue": "~3.1.5",
|
||||
"vue-axios": "~3.2.4",
|
||||
"vue-i18n": "~9.1.7",
|
||||
"vue-router": "~4.0.10",
|
||||
"vuedraggable": "~4.0.3",
|
||||
"vuex": "~4.0.2",
|
||||
"xgplayer-vue": "~1.1.5",
|
||||
"xlsx": "~0.17.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "~4.5.13",
|
||||
"@vue/cli-plugin-eslint": "~4.5.13",
|
||||
"@vue/cli-plugin-router": "~4.5.13",
|
||||
"@vue/cli-plugin-vuex": "~4.5.13",
|
||||
"@vue/cli-service": "~4.5.13",
|
||||
"@vue/compiler-sfc": "~3.1.5",
|
||||
"babel-eslint": "~10.1.0",
|
||||
"compression-webpack-plugin": "~6.1.1",
|
||||
"eslint": "~6.8.0",
|
||||
"eslint-plugin-vue": "~7.13.0",
|
||||
"less": "~4.1.1",
|
||||
"less-loader": "~7.3.0",
|
||||
"postcss": "~8.3.5"
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not dead"
|
||||
]
|
||||
}
|
||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
22
public/index.html
Normal file
22
public/index.html
Normal file
@@ -0,0 +1,22 @@
|
||||
<!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">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title><%= process.env.VUE_APP_NAME %></title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app">
|
||||
<div class="ele-admin-loading"></div>
|
||||
<style>
|
||||
.ele-admin-loading{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}.ele-admin-loading:before{content:"";width:30px;height:30px;margin:0 auto;display:block;border-radius:50%;background:#1890ff;animation:loading-bounce .3s cubic-bezier(0.05,0,0.2,1) infinite alternate}.ele-admin-loading:after{content:"";width:10px;height:2px;margin:0 auto;display:block;border-radius:50%;background:#BBB;animation:loading-shadow .3s cubic-bezier(0.05,0,0.2,1) infinite alternate}@keyframes loading-bounce{from{transform:translateY(0)}to{transform:translateY(-40px)}}@keyframes loading-shadow{from{transform:scale(1,1);opacity:1}to{transform:scale(3,2);opacity:.3}}
|
||||
</style>
|
||||
</div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
389
public/tinymce/langs/zh_CN.js
Normal file
389
public/tinymce/langs/zh_CN.js
Normal file
@@ -0,0 +1,389 @@
|
||||
tinymce.addI18n('zh_CN',{
|
||||
"Redo": "\u91cd\u505a",
|
||||
"Undo": "\u64a4\u9500",
|
||||
"Cut": "\u526a\u5207",
|
||||
"Copy": "\u590d\u5236",
|
||||
"Paste": "\u7c98\u8d34",
|
||||
"Select all": "\u5168\u9009",
|
||||
"New document": "\u65b0\u6587\u4ef6",
|
||||
"Ok": "\u786e\u5b9a",
|
||||
"Cancel": "\u53d6\u6d88",
|
||||
"Visual aids": "\u7f51\u683c\u7ebf",
|
||||
"Bold": "\u7c97\u4f53",
|
||||
"Italic": "\u659c\u4f53",
|
||||
"Underline": "\u4e0b\u5212\u7ebf",
|
||||
"Strikethrough": "\u5220\u9664\u7ebf",
|
||||
"Superscript": "\u4e0a\u6807",
|
||||
"Subscript": "\u4e0b\u6807",
|
||||
"Clear formatting": "\u6e05\u9664\u683c\u5f0f",
|
||||
"Align left": "\u5de6\u8fb9\u5bf9\u9f50",
|
||||
"Align center": "\u4e2d\u95f4\u5bf9\u9f50",
|
||||
"Align right": "\u53f3\u8fb9\u5bf9\u9f50",
|
||||
"Justify": "\u4e24\u7aef\u5bf9\u9f50",
|
||||
"Bullet list": "\u9879\u76ee\u7b26\u53f7",
|
||||
"Numbered list": "\u7f16\u53f7\u5217\u8868",
|
||||
"Decrease indent": "\u51cf\u5c11\u7f29\u8fdb",
|
||||
"Increase indent": "\u589e\u52a0\u7f29\u8fdb",
|
||||
"Close": "\u5173\u95ed",
|
||||
"Formats": "\u683c\u5f0f",
|
||||
"Your browser doesn't support direct access to the clipboard. Please use the Ctrl+X\/C\/V keyboard shortcuts instead.": "\u4f60\u7684\u6d4f\u89c8\u5668\u4e0d\u652f\u6301\u6253\u5f00\u526a\u8d34\u677f\uff0c\u8bf7\u4f7f\u7528Ctrl+X\/C\/V\u7b49\u5feb\u6377\u952e\u3002",
|
||||
"Headers": "\u6807\u9898",
|
||||
"Header 1": "\u6807\u98981",
|
||||
"Header 2": "\u6807\u98982",
|
||||
"Header 3": "\u6807\u98983",
|
||||
"Header 4": "\u6807\u98984",
|
||||
"Header 5": "\u6807\u98985",
|
||||
"Header 6": "\u6807\u98986",
|
||||
"Headings": "\u6807\u9898",
|
||||
"Heading 1": "\u6807\u98981",
|
||||
"Heading 2": "\u6807\u98982",
|
||||
"Heading 3": "\u6807\u98983",
|
||||
"Heading 4": "\u6807\u98984",
|
||||
"Heading 5": "\u6807\u98985",
|
||||
"Heading 6": "\u6807\u98986",
|
||||
"Preformatted": "\u9884\u5148\u683c\u5f0f\u5316\u7684",
|
||||
"Div": "Div",
|
||||
"Pre": "Pre",
|
||||
"Code": "\u4ee3\u7801",
|
||||
"Paragraph": "\u6bb5\u843d",
|
||||
"Blockquote": "\u5f15\u6587\u533a\u5757",
|
||||
"Inline": "\u6587\u672c",
|
||||
"Blocks": "\u57fa\u5757",
|
||||
"Paste is now in plain text mode. Contents will now be pasted as plain text until you toggle this option off.": "\u5f53\u524d\u4e3a\u7eaf\u6587\u672c\u7c98\u8d34\u6a21\u5f0f\uff0c\u518d\u6b21\u70b9\u51fb\u53ef\u4ee5\u56de\u5230\u666e\u901a\u7c98\u8d34\u6a21\u5f0f\u3002",
|
||||
"Fonts": "\u5b57\u4f53",
|
||||
"Font Sizes": "\u5b57\u53f7",
|
||||
"Class": "\u7c7b\u578b",
|
||||
"Browse for an image": "\u6d4f\u89c8\u56fe\u50cf",
|
||||
"OR": "\u6216",
|
||||
"Drop an image here": "\u62d6\u653e\u4e00\u5f20\u56fe\u50cf\u81f3\u6b64",
|
||||
"Upload": "\u4e0a\u4f20",
|
||||
"Block": "\u5757",
|
||||
"Align": "\u5bf9\u9f50",
|
||||
"Default": "\u9ed8\u8ba4",
|
||||
"Circle": "\u7a7a\u5fc3\u5706",
|
||||
"Disc": "\u5b9e\u5fc3\u5706",
|
||||
"Square": "\u65b9\u5757",
|
||||
"Lower Alpha": "\u5c0f\u5199\u82f1\u6587\u5b57\u6bcd",
|
||||
"Lower Greek": "\u5c0f\u5199\u5e0c\u814a\u5b57\u6bcd",
|
||||
"Lower Roman": "\u5c0f\u5199\u7f57\u9a6c\u5b57\u6bcd",
|
||||
"Upper Alpha": "\u5927\u5199\u82f1\u6587\u5b57\u6bcd",
|
||||
"Upper Roman": "\u5927\u5199\u7f57\u9a6c\u5b57\u6bcd",
|
||||
"Anchor...": "\u951a\u70b9...",
|
||||
"Name": "\u540d\u79f0",
|
||||
"Id": "\u6807\u8bc6\u7b26",
|
||||
"Id should start with a letter, followed only by letters, numbers, dashes, dots, colons or underscores.": "\u6807\u8bc6\u7b26\u5e94\u8be5\u4ee5\u5b57\u6bcd\u5f00\u5934\uff0c\u540e\u8ddf\u5b57\u6bcd\u3001\u6570\u5b57\u3001\u7834\u6298\u53f7\u3001\u70b9\u3001\u5192\u53f7\u6216\u4e0b\u5212\u7ebf\u3002",
|
||||
"You have unsaved changes are you sure you want to navigate away?": "\u4f60\u8fd8\u6709\u6587\u6863\u5c1a\u672a\u4fdd\u5b58\uff0c\u786e\u5b9a\u8981\u79bb\u5f00\uff1f",
|
||||
"Restore last draft": "\u6062\u590d\u4e0a\u6b21\u7684\u8349\u7a3f",
|
||||
"Special characters...": "\u7279\u6b8a\u5b57\u7b26...",
|
||||
"Source code": "\u6e90\u4ee3\u7801",
|
||||
"Insert\/Edit code sample": "\u63d2\u5165\/\u7f16\u8f91\u4ee3\u7801\u793a\u4f8b",
|
||||
"Language": "\u8bed\u8a00",
|
||||
"Code sample...": "\u793a\u4f8b\u4ee3\u7801...",
|
||||
"Color Picker": "\u9009\u8272\u5668",
|
||||
"R": "R",
|
||||
"G": "G",
|
||||
"B": "B",
|
||||
"Left to right": "\u4ece\u5de6\u5230\u53f3",
|
||||
"Right to left": "\u4ece\u53f3\u5230\u5de6",
|
||||
"Emoticons...": "\u8868\u60c5\u7b26\u53f7...",
|
||||
"Metadata and Document Properties": "\u5143\u6570\u636e\u548c\u6587\u6863\u5c5e\u6027",
|
||||
"Title": "\u6807\u9898",
|
||||
"Keywords": "\u5173\u952e\u8bcd",
|
||||
"Description": "\u63cf\u8ff0",
|
||||
"Robots": "\u673a\u5668\u4eba",
|
||||
"Author": "\u4f5c\u8005",
|
||||
"Encoding": "\u7f16\u7801",
|
||||
"Fullscreen": "\u5168\u5c4f",
|
||||
"Action": "\u64cd\u4f5c",
|
||||
"Shortcut": "\u5feb\u6377\u952e",
|
||||
"Help": "\u5e2e\u52a9",
|
||||
"Address": "\u5730\u5740",
|
||||
"Focus to menubar": "\u79fb\u52a8\u7126\u70b9\u5230\u83dc\u5355\u680f",
|
||||
"Focus to toolbar": "\u79fb\u52a8\u7126\u70b9\u5230\u5de5\u5177\u680f",
|
||||
"Focus to element path": "\u79fb\u52a8\u7126\u70b9\u5230\u5143\u7d20\u8def\u5f84",
|
||||
"Focus to contextual toolbar": "\u79fb\u52a8\u7126\u70b9\u5230\u4e0a\u4e0b\u6587\u83dc\u5355",
|
||||
"Insert link (if link plugin activated)": "\u63d2\u5165\u94fe\u63a5 (\u5982\u679c\u94fe\u63a5\u63d2\u4ef6\u5df2\u6fc0\u6d3b)",
|
||||
"Save (if save plugin activated)": "\u4fdd\u5b58(\u5982\u679c\u4fdd\u5b58\u63d2\u4ef6\u5df2\u6fc0\u6d3b)",
|
||||
"Find (if searchreplace plugin activated)": "\u67e5\u627e(\u5982\u679c\u67e5\u627e\u66ff\u6362\u63d2\u4ef6\u5df2\u6fc0\u6d3b)",
|
||||
"Plugins installed ({0}):": "\u5df2\u5b89\u88c5\u63d2\u4ef6 ({0}):",
|
||||
"Premium plugins:": "\u4f18\u79c0\u63d2\u4ef6\uff1a",
|
||||
"Learn more...": "\u4e86\u89e3\u66f4\u591a...",
|
||||
"You are using {0}": "\u4f60\u6b63\u5728\u4f7f\u7528 {0}",
|
||||
"Plugins": "\u63d2\u4ef6",
|
||||
"Handy Shortcuts": "\u5feb\u6377\u952e",
|
||||
"Horizontal line": "\u6c34\u5e73\u5206\u5272\u7ebf",
|
||||
"Insert\/edit image": "\u63d2\u5165\/\u7f16\u8f91\u56fe\u7247",
|
||||
"Image description": "\u56fe\u7247\u63cf\u8ff0",
|
||||
"Source": "\u5730\u5740",
|
||||
"Dimensions": "\u5927\u5c0f",
|
||||
"Constrain proportions": "\u4fdd\u6301\u7eb5\u6a2a\u6bd4",
|
||||
"General": "\u666e\u901a",
|
||||
"Advanced": "\u9ad8\u7ea7",
|
||||
"Style": "\u6837\u5f0f",
|
||||
"Vertical space": "\u5782\u76f4\u8fb9\u8ddd",
|
||||
"Horizontal space": "\u6c34\u5e73\u8fb9\u8ddd",
|
||||
"Border": "\u8fb9\u6846",
|
||||
"Insert image": "\u63d2\u5165\u56fe\u7247",
|
||||
"Image...": "\u56fe\u7247...",
|
||||
"Image list": "\u56fe\u7247\u5217\u8868",
|
||||
"Rotate counterclockwise": "\u9006\u65f6\u9488\u65cb\u8f6c",
|
||||
"Rotate clockwise": "\u987a\u65f6\u9488\u65cb\u8f6c",
|
||||
"Flip vertically": "\u5782\u76f4\u7ffb\u8f6c",
|
||||
"Flip horizontally": "\u6c34\u5e73\u7ffb\u8f6c",
|
||||
"Edit image": "\u7f16\u8f91\u56fe\u7247",
|
||||
"Image options": "\u56fe\u7247\u9009\u9879",
|
||||
"Zoom in": "\u653e\u5927",
|
||||
"Zoom out": "\u7f29\u5c0f",
|
||||
"Crop": "\u88c1\u526a",
|
||||
"Resize": "\u8c03\u6574\u5927\u5c0f",
|
||||
"Orientation": "\u65b9\u5411",
|
||||
"Brightness": "\u4eae\u5ea6",
|
||||
"Sharpen": "\u9510\u5316",
|
||||
"Contrast": "\u5bf9\u6bd4\u5ea6",
|
||||
"Color levels": "\u989c\u8272\u5c42\u6b21",
|
||||
"Gamma": "\u4f3d\u9a6c\u503c",
|
||||
"Invert": "\u53cd\u8f6c",
|
||||
"Apply": "\u5e94\u7528",
|
||||
"Back": "\u540e\u9000",
|
||||
"Insert date\/time": "\u63d2\u5165\u65e5\u671f\/\u65f6\u95f4",
|
||||
"Date\/time": "\u65e5\u671f\/\u65f6\u95f4",
|
||||
"Insert\/Edit Link": "\u63d2\u5165\/\u7f16\u8f91\u94fe\u63a5",
|
||||
"Insert\/edit link": "\u63d2\u5165\/\u7f16\u8f91\u94fe\u63a5",
|
||||
"Text to display": "\u663e\u793a\u6587\u5b57",
|
||||
"Url": "\u5730\u5740",
|
||||
"Open link in...": "\u94fe\u63a5\u6253\u5f00\u4f4d\u7f6e...",
|
||||
"Current window": "\u5f53\u524d\u7a97\u53e3",
|
||||
"None": "\u65e0",
|
||||
"New window": "\u5728\u65b0\u7a97\u53e3\u6253\u5f00",
|
||||
"Remove link": "\u5220\u9664\u94fe\u63a5",
|
||||
"Anchors": "\u951a\u70b9",
|
||||
"Link...": "\u94fe\u63a5...",
|
||||
"Paste or type a link": "\u7c98\u8d34\u6216\u8f93\u5165\u94fe\u63a5",
|
||||
"The URL you entered seems to be an email address. Do you want to add the required mailto: prefix?": "\u4f60\u6240\u586b\u5199\u7684URL\u5730\u5740\u4e3a\u90ae\u4ef6\u5730\u5740\uff0c\u9700\u8981\u52a0\u4e0amailto:\u524d\u7f00\u5417\uff1f",
|
||||
"The URL you entered seems to be an external link. Do you want to add the required http:\/\/ prefix?": "\u4f60\u6240\u586b\u5199\u7684URL\u5730\u5740\u5c5e\u4e8e\u5916\u90e8\u94fe\u63a5\uff0c\u9700\u8981\u52a0\u4e0ahttp:\/\/:\u524d\u7f00\u5417\uff1f",
|
||||
"Link list": "\u94fe\u63a5\u5217\u8868",
|
||||
"Insert video": "\u63d2\u5165\u89c6\u9891",
|
||||
"Insert\/edit video": "\u63d2\u5165\/\u7f16\u8f91\u89c6\u9891",
|
||||
"Insert\/edit media": "\u63d2\u5165\/\u7f16\u8f91\u5a92\u4f53",
|
||||
"Alternative source": "\u955c\u50cf",
|
||||
"Alternative source URL": "\u66ff\u4ee3\u6765\u6e90\u7f51\u5740",
|
||||
"Media poster (Image URL)": "\u5c01\u9762(\u56fe\u7247\u5730\u5740)",
|
||||
"Paste your embed code below:": "\u5c06\u5185\u5d4c\u4ee3\u7801\u7c98\u8d34\u5728\u4e0b\u9762:",
|
||||
"Embed": "\u5185\u5d4c",
|
||||
"Media...": "\u591a\u5a92\u4f53...",
|
||||
"Nonbreaking space": "\u4e0d\u95f4\u65ad\u7a7a\u683c",
|
||||
"Page break": "\u5206\u9875\u7b26",
|
||||
"Paste as text": "\u7c98\u8d34\u4e3a\u6587\u672c",
|
||||
"Preview": "\u9884\u89c8",
|
||||
"Print...": "\u6253\u5370...",
|
||||
"Save": "\u4fdd\u5b58",
|
||||
"Find": "\u67e5\u627e",
|
||||
"Replace with": "\u66ff\u6362\u4e3a",
|
||||
"Replace": "\u66ff\u6362",
|
||||
"Replace all": "\u5168\u90e8\u66ff\u6362",
|
||||
"Previous": "\u4e0a\u4e00\u4e2a",
|
||||
"Next": "\u4e0b\u4e00\u4e2a",
|
||||
"Find and replace...": "\u67e5\u627e\u5e76\u66ff\u6362...",
|
||||
"Could not find the specified string.": "\u672a\u627e\u5230\u641c\u7d22\u5185\u5bb9.",
|
||||
"Match case": "\u533a\u5206\u5927\u5c0f\u5199",
|
||||
"Find whole words only": "\u5168\u5b57\u5339\u914d",
|
||||
"Spell check": "\u62fc\u5199\u68c0\u67e5",
|
||||
"Ignore": "\u5ffd\u7565",
|
||||
"Ignore all": "\u5168\u90e8\u5ffd\u7565",
|
||||
"Finish": "\u5b8c\u6210",
|
||||
"Add to Dictionary": "\u6dfb\u52a0\u5230\u5b57\u5178",
|
||||
"Insert table": "\u63d2\u5165\u8868\u683c",
|
||||
"Table properties": "\u8868\u683c\u5c5e\u6027",
|
||||
"Delete table": "\u5220\u9664\u8868\u683c",
|
||||
"Cell": "\u5355\u5143\u683c",
|
||||
"Row": "\u884c",
|
||||
"Column": "\u5217",
|
||||
"Cell properties": "\u5355\u5143\u683c\u5c5e\u6027",
|
||||
"Merge cells": "\u5408\u5e76\u5355\u5143\u683c",
|
||||
"Split cell": "\u62c6\u5206\u5355\u5143\u683c",
|
||||
"Insert row before": "\u5728\u4e0a\u65b9\u63d2\u5165",
|
||||
"Insert row after": "\u5728\u4e0b\u65b9\u63d2\u5165",
|
||||
"Delete row": "\u5220\u9664\u884c",
|
||||
"Row properties": "\u884c\u5c5e\u6027",
|
||||
"Cut row": "\u526a\u5207\u884c",
|
||||
"Copy row": "\u590d\u5236\u884c",
|
||||
"Paste row before": "\u7c98\u8d34\u5230\u4e0a\u65b9",
|
||||
"Paste row after": "\u7c98\u8d34\u5230\u4e0b\u65b9",
|
||||
"Insert column before": "\u5728\u5de6\u4fa7\u63d2\u5165",
|
||||
"Insert column after": "\u5728\u53f3\u4fa7\u63d2\u5165",
|
||||
"Delete column": "\u5220\u9664\u5217",
|
||||
"Cols": "\u5217",
|
||||
"Rows": "\u884c",
|
||||
"Width": "\u5bbd",
|
||||
"Height": "\u9ad8",
|
||||
"Cell spacing": "\u5355\u5143\u683c\u5916\u95f4\u8ddd",
|
||||
"Cell padding": "\u5355\u5143\u683c\u5185\u8fb9\u8ddd",
|
||||
"Show caption": "\u663e\u793a\u6807\u9898",
|
||||
"Left": "\u5de6\u5bf9\u9f50",
|
||||
"Center": "\u5c45\u4e2d",
|
||||
"Right": "\u53f3\u5bf9\u9f50",
|
||||
"Cell type": "\u5355\u5143\u683c\u7c7b\u578b",
|
||||
"Scope": "\u8303\u56f4",
|
||||
"Alignment": "\u5bf9\u9f50\u65b9\u5f0f",
|
||||
"H Align": "\u6c34\u5e73\u5bf9\u9f50",
|
||||
"V Align": "\u5782\u76f4\u5bf9\u9f50",
|
||||
"Top": "\u9876\u90e8\u5bf9\u9f50",
|
||||
"Middle": "\u5782\u76f4\u5c45\u4e2d",
|
||||
"Bottom": "\u5e95\u90e8\u5bf9\u9f50",
|
||||
"Header cell": "\u8868\u5934\u5355\u5143\u683c",
|
||||
"Row group": "\u884c\u7ec4",
|
||||
"Column group": "\u5217\u7ec4",
|
||||
"Row type": "\u884c\u7c7b\u578b",
|
||||
"Header": "\u8868\u5934",
|
||||
"Body": "\u8868\u4f53",
|
||||
"Footer": "\u8868\u5c3e",
|
||||
"Border color": "\u8fb9\u6846\u989c\u8272",
|
||||
"Insert template...": "\u63d2\u5165\u6a21\u677f...",
|
||||
"Templates": "\u6a21\u677f",
|
||||
"Template": "\u6a21\u677f",
|
||||
"Text color": "\u6587\u5b57\u989c\u8272",
|
||||
"Background color": "\u80cc\u666f\u8272",
|
||||
"Custom...": "\u81ea\u5b9a\u4e49...",
|
||||
"Custom color": "\u81ea\u5b9a\u4e49\u989c\u8272",
|
||||
"No color": "\u65e0",
|
||||
"Remove color": "\u79fb\u9664\u989c\u8272",
|
||||
"Table of Contents": "\u5185\u5bb9\u5217\u8868",
|
||||
"Show blocks": "\u663e\u793a\u533a\u5757\u8fb9\u6846",
|
||||
"Show invisible characters": "\u663e\u793a\u4e0d\u53ef\u89c1\u5b57\u7b26",
|
||||
"Word count": "\u5b57\u6570",
|
||||
"Words: {0}": "\u5b57\u6570\uff1a{0}",
|
||||
"{0} words": "{0} \u5b57",
|
||||
"File": "\u6587\u4ef6",
|
||||
"Edit": "\u7f16\u8f91",
|
||||
"Insert": "\u63d2\u5165",
|
||||
"View": "\u89c6\u56fe",
|
||||
"Format": "\u683c\u5f0f",
|
||||
"Table": "\u8868\u683c",
|
||||
"Tools": "\u5de5\u5177",
|
||||
"Powered by {0}": "\u7531{0}\u9a71\u52a8",
|
||||
"Rich Text Area. Press ALT-F9 for menu. Press ALT-F10 for toolbar. Press ALT-0 for help": "\u5728\u7f16\u8f91\u533a\u6309ALT-F9\u6253\u5f00\u83dc\u5355\uff0c\u6309ALT-F10\u6253\u5f00\u5de5\u5177\u680f\uff0c\u6309ALT-0\u67e5\u770b\u5e2e\u52a9",
|
||||
"Image title": "\u56fe\u7247\u6807\u9898",
|
||||
"Border width": "\u8fb9\u6846\u5bbd\u5ea6",
|
||||
"Border style": "\u8fb9\u6846\u6837\u5f0f",
|
||||
"Error": "\u9519\u8bef",
|
||||
"Warn": "\u8b66\u544a",
|
||||
"Valid": "\u6709\u6548",
|
||||
"To open the popup, press Shift+Enter": "\u6309Shitf+Enter\u952e\u6253\u5f00\u5bf9\u8bdd\u6846",
|
||||
"Rich Text Area. Press ALT-0 for help.": "\u7f16\u8f91\u533a\u3002\u6309Alt+0\u952e\u6253\u5f00\u5e2e\u52a9\u3002",
|
||||
"System Font": "\u7cfb\u7edf\u5b57\u4f53",
|
||||
"Failed to upload image: {0}": "\u56fe\u7247\u4e0a\u4f20\u5931\u8d25: {0}",
|
||||
"Failed to load plugin: {0} from url {1}": "\u63d2\u4ef6\u52a0\u8f7d\u5931\u8d25: {0} \u6765\u81ea\u94fe\u63a5 {1}",
|
||||
"Failed to load plugin url: {0}": "\u63d2\u4ef6\u52a0\u8f7d\u5931\u8d25 \u94fe\u63a5: {0}",
|
||||
"Failed to initialize plugin: {0}": "\u63d2\u4ef6\u521d\u59cb\u5316\u5931\u8d25: {0}",
|
||||
"example": "\u793a\u4f8b",
|
||||
"Search": "\u641c\u7d22",
|
||||
"All": "\u5168\u90e8",
|
||||
"Currency": "\u8d27\u5e01",
|
||||
"Text": "\u6587\u5b57",
|
||||
"Quotations": "\u5f15\u7528",
|
||||
"Mathematical": "\u6570\u5b66",
|
||||
"Extended Latin": "\u62c9\u4e01\u8bed\u6269\u5145",
|
||||
"Symbols": "\u7b26\u53f7",
|
||||
"Arrows": "\u7bad\u5934",
|
||||
"User Defined": "\u81ea\u5b9a\u4e49",
|
||||
"dollar sign": "\u7f8e\u5143\u7b26\u53f7",
|
||||
"currency sign": "\u8d27\u5e01\u7b26\u53f7",
|
||||
"euro-currency sign": "\u6b27\u5143\u7b26\u53f7",
|
||||
"colon sign": "\u5192\u53f7",
|
||||
"cruzeiro sign": "\u514b\u9c81\u8d5b\u7f57\u5e01\u7b26\u53f7",
|
||||
"french franc sign": "\u6cd5\u90ce\u7b26\u53f7",
|
||||
"lira sign": "\u91cc\u62c9\u7b26\u53f7",
|
||||
"mill sign": "\u5bc6\u5c14\u7b26\u53f7",
|
||||
"naira sign": "\u5948\u62c9\u7b26\u53f7",
|
||||
"peseta sign": "\u6bd4\u585e\u5854\u7b26\u53f7",
|
||||
"rupee sign": "\u5362\u6bd4\u7b26\u53f7",
|
||||
"won sign": "\u97e9\u5143\u7b26\u53f7",
|
||||
"new sheqel sign": "\u65b0\u8c22\u514b\u5c14\u7b26\u53f7",
|
||||
"dong sign": "\u8d8a\u5357\u76fe\u7b26\u53f7",
|
||||
"kip sign": "\u8001\u631d\u57fa\u666e\u7b26\u53f7",
|
||||
"tugrik sign": "\u56fe\u683c\u91cc\u514b\u7b26\u53f7",
|
||||
"drachma sign": "\u5fb7\u62c9\u514b\u9a6c\u7b26\u53f7",
|
||||
"german penny symbol": "\u5fb7\u56fd\u4fbf\u58eb\u7b26\u53f7",
|
||||
"peso sign": "\u6bd4\u7d22\u7b26\u53f7",
|
||||
"guarani sign": "\u74dc\u62c9\u5c3c\u7b26\u53f7",
|
||||
"austral sign": "\u6fb3\u5143\u7b26\u53f7",
|
||||
"hryvnia sign": "\u683c\u91cc\u592b\u5c3c\u4e9a\u7b26\u53f7",
|
||||
"cedi sign": "\u585e\u5730\u7b26\u53f7",
|
||||
"livre tournois sign": "\u91cc\u5f17\u5f17\u5c14\u7b26\u53f7",
|
||||
"spesmilo sign": "spesmilo\u7b26\u53f7",
|
||||
"tenge sign": "\u575a\u6208\u7b26\u53f7",
|
||||
"indian rupee sign": "\u5370\u5ea6\u5362\u6bd4",
|
||||
"turkish lira sign": "\u571f\u8033\u5176\u91cc\u62c9",
|
||||
"nordic mark sign": "\u5317\u6b27\u9a6c\u514b",
|
||||
"manat sign": "\u9a6c\u7eb3\u7279\u7b26\u53f7",
|
||||
"ruble sign": "\u5362\u5e03\u7b26\u53f7",
|
||||
"yen character": "\u65e5\u5143\u5b57\u6837",
|
||||
"yuan character": "\u4eba\u6c11\u5e01\u5143\u5b57\u6837",
|
||||
"yuan character, in hong kong and taiwan": "\u5143\u5b57\u6837\uff08\u6e2f\u53f0\u5730\u533a\uff09",
|
||||
"yen\/yuan character variant one": "\u5143\u5b57\u6837\uff08\u5927\u5199\uff09",
|
||||
"Loading emoticons...": "\u52a0\u8f7d\u8868\u60c5\u7b26\u53f7...",
|
||||
"Could not load emoticons": "\u4e0d\u80fd\u52a0\u8f7d\u8868\u60c5\u7b26\u53f7",
|
||||
"People": "\u4eba\u7c7b",
|
||||
"Animals and Nature": "\u52a8\u7269\u548c\u81ea\u7136",
|
||||
"Food and Drink": "\u98df\u7269\u548c\u996e\u54c1",
|
||||
"Activity": "\u6d3b\u52a8",
|
||||
"Travel and Places": "\u65c5\u6e38\u548c\u5730\u70b9",
|
||||
"Objects": "\u7269\u4ef6",
|
||||
"Flags": "\u65d7\u5e1c",
|
||||
"Characters": "\u5b57\u7b26",
|
||||
"Characters (no spaces)": "\u5b57\u7b26(\u65e0\u7a7a\u683c)",
|
||||
"Error: Form submit field collision.": "\u9519\u8bef: \u8868\u5355\u63d0\u4ea4\u5b57\u6bb5\u51b2\u7a81\u3002",
|
||||
"Error: No form element found.": "\u9519\u8bef: \u6ca1\u6709\u8868\u5355\u63a7\u4ef6\u3002",
|
||||
"Update": "\u66f4\u65b0",
|
||||
"Color swatch": "\u989c\u8272\u6837\u672c",
|
||||
"Turquoise": "\u9752\u7eff\u8272",
|
||||
"Green": "\u7eff\u8272",
|
||||
"Blue": "\u84dd\u8272",
|
||||
"Purple": "\u7d2b\u8272",
|
||||
"Navy Blue": "\u6d77\u519b\u84dd",
|
||||
"Dark Turquoise": "\u6df1\u84dd\u7eff\u8272",
|
||||
"Dark Green": "\u6df1\u7eff\u8272",
|
||||
"Medium Blue": "\u4e2d\u84dd\u8272",
|
||||
"Medium Purple": "\u4e2d\u7d2b\u8272",
|
||||
"Midnight Blue": "\u6df1\u84dd\u8272",
|
||||
"Yellow": "\u9ec4\u8272",
|
||||
"Orange": "\u6a59\u8272",
|
||||
"Red": "\u7ea2\u8272",
|
||||
"Light Gray": "\u6d45\u7070\u8272",
|
||||
"Gray": "\u7070\u8272",
|
||||
"Dark Yellow": "\u6697\u9ec4\u8272",
|
||||
"Dark Orange": "\u6df1\u6a59\u8272",
|
||||
"Dark Red": "\u6df1\u7ea2\u8272",
|
||||
"Medium Gray": "\u4e2d\u7070\u8272",
|
||||
"Dark Gray": "\u6df1\u7070\u8272",
|
||||
"Black": "\u9ed1\u8272",
|
||||
"White": "\u767d\u8272",
|
||||
"Switch to or from fullscreen mode": "\u5207\u6362\u5168\u5c4f\u6a21\u5f0f",
|
||||
"Open help dialog": "\u6253\u5f00\u5e2e\u52a9\u5bf9\u8bdd\u6846",
|
||||
"history": "\u5386\u53f2",
|
||||
"styles": "\u6837\u5f0f",
|
||||
"formatting": "\u683c\u5f0f\u5316",
|
||||
"alignment": "\u5bf9\u9f50",
|
||||
"indentation": "\u7f29\u8fdb",
|
||||
"permanent pen": "\u8bb0\u53f7\u7b14",
|
||||
"comments": "\u5907\u6ce8",
|
||||
"Anchor": "\u951a\u70b9",
|
||||
"Special character": "\u7279\u6b8a\u7b26\u53f7",
|
||||
"Code sample": "\u4ee3\u7801\u793a\u4f8b",
|
||||
"Color": "\u989c\u8272",
|
||||
"Emoticons": "\u8868\u60c5",
|
||||
"Document properties": "\u6587\u6863\u5c5e\u6027",
|
||||
"Image": "\u56fe\u7247",
|
||||
"Insert link": "\u63d2\u5165\u94fe\u63a5",
|
||||
"Target": "\u6253\u5f00\u65b9\u5f0f",
|
||||
"Link": "\u94fe\u63a5",
|
||||
"Poster": "\u5c01\u9762",
|
||||
"Media": "\u5a92\u4f53",
|
||||
"Print": "\u6253\u5370",
|
||||
"Prev": "\u4e0a\u4e00\u4e2a",
|
||||
"Find and replace": "\u67e5\u627e\u548c\u66ff\u6362",
|
||||
"Whole words": "\u5168\u5b57\u5339\u914d",
|
||||
"Spellcheck": "\u62fc\u5199\u68c0\u67e5",
|
||||
"Caption": "\u6807\u9898",
|
||||
"Insert template": "\u63d2\u5165\u6a21\u677f"
|
||||
});
|
||||
59
public/tinymce/skins/content/dark/content.css
Normal file
59
public/tinymce/skins/content/dark/content.css
Normal file
@@ -0,0 +1,59 @@
|
||||
/**
|
||||
* Copyright (c) Tiny Technologies, Inc. All rights reserved.
|
||||
* Licensed under the LGPL or a commercial license.
|
||||
* For LGPL see License.txt in the project root for license information.
|
||||
* For commercial licenses see https://www.tiny.cloud/
|
||||
*/
|
||||
body {
|
||||
background-color: #2f3742;
|
||||
color: #dfe0e4;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
line-height: 1.4;
|
||||
margin: 1rem;
|
||||
}
|
||||
a {
|
||||
color: #4099ff;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
table th,
|
||||
table td {
|
||||
border: 1px solid #6d737b;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
figure {
|
||||
display: table;
|
||||
margin: 1rem auto;
|
||||
}
|
||||
figure figcaption {
|
||||
color: #8a8f97;
|
||||
display: block;
|
||||
margin-top: 0.25rem;
|
||||
text-align: center;
|
||||
}
|
||||
hr {
|
||||
border-color: #6d737b;
|
||||
border-style: solid;
|
||||
border-width: 1px 0 0 0;
|
||||
}
|
||||
code {
|
||||
background-color: #6d737b;
|
||||
border-radius: 3px;
|
||||
padding: 0.1rem 0.2rem;
|
||||
}
|
||||
/* Make text in selected cells in tables dark and readable */
|
||||
td[data-mce-selected],
|
||||
th[data-mce-selected] {
|
||||
color: #333;
|
||||
}
|
||||
.mce-content-body:not([dir=rtl]) blockquote {
|
||||
border-left: 2px solid #6d737b;
|
||||
margin-left: 1.5rem;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
.mce-content-body[dir=rtl] blockquote {
|
||||
border-right: 2px solid #6d737b;
|
||||
margin-right: 1.5rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
7
public/tinymce/skins/content/dark/content.min.css
vendored
Normal file
7
public/tinymce/skins/content/dark/content.min.css
vendored
Normal file
@@ -0,0 +1,7 @@
|
||||
/**
|
||||
* Copyright (c) Tiny Technologies, Inc. All rights reserved.
|
||||
* Licensed under the LGPL or a commercial license.
|
||||
* For LGPL see License.txt in the project root for license information.
|
||||
* For commercial licenses see https://www.tiny.cloud/
|
||||
*/
|
||||
body{background-color:#2f3742;color:#dfe0e4;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif;line-height:1.4;margin:1rem}a{color:#4099ff}table{border-collapse:collapse}table td,table th{border:1px solid #6d737b;padding:.4rem}figure{display:table;margin:1rem auto}figure figcaption{color:#8a8f97;display:block;margin-top:.25rem;text-align:center}hr{border-color:#6d737b;border-style:solid;border-width:1px 0 0 0}code{background-color:#6d737b;border-radius:3px;padding:.1rem .2rem}td[data-mce-selected],th[data-mce-selected]{color:#333}.mce-content-body:not([dir=rtl]) blockquote{border-left:2px solid #6d737b;margin-left:1.5rem;padding-left:1rem}.mce-content-body[dir=rtl] blockquote{border-right:2px solid #6d737b;margin-right:1.5rem;padding-right:1rem}
|
||||
49
public/tinymce/skins/content/default/content.css
Normal file
49
public/tinymce/skins/content/default/content.css
Normal file
@@ -0,0 +1,49 @@
|
||||
/**
|
||||
* Copyright (c) Tiny Technologies, Inc. All rights reserved.
|
||||
* Licensed under the LGPL or a commercial license.
|
||||
* For LGPL see License.txt in the project root for license information.
|
||||
* For commercial licenses see https://www.tiny.cloud/
|
||||
*/
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
line-height: 1.4;
|
||||
margin: 1rem;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
table th,
|
||||
table td {
|
||||
border: 1px solid #ccc;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
figure {
|
||||
display: table;
|
||||
margin: 1rem auto;
|
||||
}
|
||||
figure figcaption {
|
||||
color: #999;
|
||||
display: block;
|
||||
margin-top: 0.25rem;
|
||||
text-align: center;
|
||||
}
|
||||
hr {
|
||||
border-color: #ccc;
|
||||
border-style: solid;
|
||||
border-width: 1px 0 0 0;
|
||||
}
|
||||
code {
|
||||
background-color: #e8e8e8;
|
||||
border-radius: 3px;
|
||||
padding: 0.1rem 0.2rem;
|
||||
}
|
||||
.mce-content-body:not([dir=rtl]) blockquote {
|
||||
border-left: 2px solid #ccc;
|
||||
margin-left: 1.5rem;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
.mce-content-body[dir=rtl] blockquote {
|
||||
border-right: 2px solid #ccc;
|
||||
margin-right: 1.5rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
7
public/tinymce/skins/content/default/content.min.css
vendored
Normal file
7
public/tinymce/skins/content/default/content.min.css
vendored
Normal file
@@ -0,0 +1,7 @@
|
||||
/**
|
||||
* Copyright (c) Tiny Technologies, Inc. All rights reserved.
|
||||
* Licensed under the LGPL or a commercial license.
|
||||
* For LGPL see License.txt in the project root for license information.
|
||||
* For commercial licenses see https://www.tiny.cloud/
|
||||
*/
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif;line-height:1.4;margin:1rem}table{border-collapse:collapse}table td,table th{border:1px solid #ccc;padding:.4rem}figure{display:table;margin:1rem auto}figure figcaption{color:#999;display:block;margin-top:.25rem;text-align:center}hr{border-color:#ccc;border-style:solid;border-width:1px 0 0 0}code{background-color:#e8e8e8;border-radius:3px;padding:.1rem .2rem}.mce-content-body:not([dir=rtl]) blockquote{border-left:2px solid #ccc;margin-left:1.5rem;padding-left:1rem}.mce-content-body[dir=rtl] blockquote{border-right:2px solid #ccc;margin-right:1.5rem;padding-right:1rem}
|
||||
54
public/tinymce/skins/content/document/content.css
Normal file
54
public/tinymce/skins/content/document/content.css
Normal file
@@ -0,0 +1,54 @@
|
||||
/**
|
||||
* Copyright (c) Tiny Technologies, Inc. All rights reserved.
|
||||
* Licensed under the LGPL or a commercial license.
|
||||
* For LGPL see License.txt in the project root for license information.
|
||||
* For commercial licenses see https://www.tiny.cloud/
|
||||
*/
|
||||
@media screen {
|
||||
html {
|
||||
background: #f4f4f4;
|
||||
min-height: 100%;
|
||||
}
|
||||
}
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
}
|
||||
@media screen {
|
||||
body {
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
|
||||
box-sizing: border-box;
|
||||
margin: 1rem auto 0;
|
||||
max-width: 820px;
|
||||
min-height: calc(100vh - 1rem);
|
||||
padding: 4rem 6rem 6rem 6rem;
|
||||
}
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
table th,
|
||||
table td {
|
||||
border: 1px solid #ccc;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
figure figcaption {
|
||||
color: #999;
|
||||
margin-top: 0.25rem;
|
||||
text-align: center;
|
||||
}
|
||||
hr {
|
||||
border-color: #ccc;
|
||||
border-style: solid;
|
||||
border-width: 1px 0 0 0;
|
||||
}
|
||||
.mce-content-body:not([dir=rtl]) blockquote {
|
||||
border-left: 2px solid #ccc;
|
||||
margin-left: 1.5rem;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
.mce-content-body[dir=rtl] blockquote {
|
||||
border-right: 2px solid #ccc;
|
||||
margin-right: 1.5rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
7
public/tinymce/skins/content/document/content.min.css
vendored
Normal file
7
public/tinymce/skins/content/document/content.min.css
vendored
Normal file
@@ -0,0 +1,7 @@
|
||||
/**
|
||||
* Copyright (c) Tiny Technologies, Inc. All rights reserved.
|
||||
* Licensed under the LGPL or a commercial license.
|
||||
* For LGPL see License.txt in the project root for license information.
|
||||
* For commercial licenses see https://www.tiny.cloud/
|
||||
*/
|
||||
@media screen{html{background:#f4f4f4;min-height:100%}}body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif}@media screen{body{background-color:#fff;box-shadow:0 0 4px rgba(0,0,0,.15);box-sizing:border-box;margin:1rem auto 0;max-width:820px;min-height:calc(100vh - 1rem);padding:4rem 6rem 6rem 6rem}}table{border-collapse:collapse}table td,table th{border:1px solid #ccc;padding:.4rem}figure figcaption{color:#999;margin-top:.25rem;text-align:center}hr{border-color:#ccc;border-style:solid;border-width:1px 0 0 0}.mce-content-body:not([dir=rtl]) blockquote{border-left:2px solid #ccc;margin-left:1.5rem;padding-left:1rem}.mce-content-body[dir=rtl] blockquote{border-right:2px solid #ccc;margin-right:1.5rem;padding-right:1rem}
|
||||
50
public/tinymce/skins/content/writer/content.css
Normal file
50
public/tinymce/skins/content/writer/content.css
Normal file
@@ -0,0 +1,50 @@
|
||||
/**
|
||||
* Copyright (c) Tiny Technologies, Inc. All rights reserved.
|
||||
* Licensed under the LGPL or a commercial license.
|
||||
* For LGPL see License.txt in the project root for license information.
|
||||
* For commercial licenses see https://www.tiny.cloud/
|
||||
*/
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
line-height: 1.4;
|
||||
margin: 1rem auto;
|
||||
max-width: 900px;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
table th,
|
||||
table td {
|
||||
border: 1px solid #ccc;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
figure {
|
||||
display: table;
|
||||
margin: 1rem auto;
|
||||
}
|
||||
figure figcaption {
|
||||
color: #999;
|
||||
display: block;
|
||||
margin-top: 0.25rem;
|
||||
text-align: center;
|
||||
}
|
||||
hr {
|
||||
border-color: #ccc;
|
||||
border-style: solid;
|
||||
border-width: 1px 0 0 0;
|
||||
}
|
||||
code {
|
||||
background-color: #e8e8e8;
|
||||
border-radius: 3px;
|
||||
padding: 0.1rem 0.2rem;
|
||||
}
|
||||
.mce-content-body:not([dir=rtl]) blockquote {
|
||||
border-left: 2px solid #ccc;
|
||||
margin-left: 1.5rem;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
.mce-content-body[dir=rtl] blockquote {
|
||||
border-right: 2px solid #ccc;
|
||||
margin-right: 1.5rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
7
public/tinymce/skins/content/writer/content.min.css
vendored
Normal file
7
public/tinymce/skins/content/writer/content.min.css
vendored
Normal file
@@ -0,0 +1,7 @@
|
||||
/**
|
||||
* Copyright (c) Tiny Technologies, Inc. All rights reserved.
|
||||
* Licensed under the LGPL or a commercial license.
|
||||
* For LGPL see License.txt in the project root for license information.
|
||||
* For commercial licenses see https://www.tiny.cloud/
|
||||
*/
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif;line-height:1.4;margin:1rem auto;max-width:900px}table{border-collapse:collapse}table td,table th{border:1px solid #ccc;padding:.4rem}figure{display:table;margin:1rem auto}figure figcaption{color:#999;display:block;margin-top:.25rem;text-align:center}hr{border-color:#ccc;border-style:solid;border-width:1px 0 0 0}code{background-color:#e8e8e8;border-radius:3px;padding:.1rem .2rem}.mce-content-body:not([dir=rtl]) blockquote{border-left:2px solid #ccc;margin-left:1.5rem;padding-left:1rem}.mce-content-body[dir=rtl] blockquote{border-right:2px solid #ccc;margin-right:1.5rem;padding-right:1rem}
|
||||
677
public/tinymce/skins/ui/oxide-dark/content.css
Normal file
677
public/tinymce/skins/ui/oxide-dark/content.css
Normal file
@@ -0,0 +1,677 @@
|
||||
/**
|
||||
* Copyright (c) Tiny Technologies, Inc. All rights reserved.
|
||||
* Licensed under the LGPL or a commercial license.
|
||||
* For LGPL see License.txt in the project root for license information.
|
||||
* For commercial licenses see https://www.tiny.cloud/
|
||||
*/
|
||||
.mce-content-body .mce-item-anchor {
|
||||
background: transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'8'%20height%3D'12'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M0%200L8%200%208%2012%204.09117821%209%200%2012z'%20fill%3D%22%23cccccc%22%2F%3E%3C%2Fsvg%3E%0A") no-repeat center;
|
||||
cursor: default;
|
||||
display: inline-block;
|
||||
height: 12px !important;
|
||||
padding: 0 2px;
|
||||
-webkit-user-modify: read-only;
|
||||
-moz-user-modify: read-only;
|
||||
-webkit-user-select: all;
|
||||
-moz-user-select: all;
|
||||
-ms-user-select: all;
|
||||
user-select: all;
|
||||
width: 8px !important;
|
||||
}
|
||||
.mce-content-body .mce-item-anchor[data-mce-selected] {
|
||||
outline-offset: 1px;
|
||||
}
|
||||
.tox-comments-visible .tox-comment {
|
||||
background-color: #fff0b7;
|
||||
}
|
||||
.tox-comments-visible .tox-comment--active {
|
||||
background-color: #ffe168;
|
||||
}
|
||||
.tox-checklist > li:not(.tox-checklist--hidden) {
|
||||
list-style: none;
|
||||
margin: 0.25em 0;
|
||||
}
|
||||
.tox-checklist > li:not(.tox-checklist--hidden)::before {
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-unchecked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2215%22%20height%3D%2215%22%20x%3D%22.5%22%20y%3D%22.5%22%20fill-rule%3D%22nonzero%22%20stroke%3D%22%236d737b%22%20rx%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");
|
||||
background-size: 100%;
|
||||
content: '';
|
||||
cursor: pointer;
|
||||
height: 1em;
|
||||
margin-left: -1.5em;
|
||||
margin-top: 0.125em;
|
||||
position: absolute;
|
||||
width: 1em;
|
||||
}
|
||||
.tox-checklist li:not(.tox-checklist--hidden).tox-checklist--checked::before {
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-checked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%234099FF%22%20fill-rule%3D%22nonzero%22%20rx%3D%222%22%2F%3E%3Cpath%20id%3D%22Path%22%20fill%3D%22%23FFF%22%20fill-rule%3D%22nonzero%22%20d%3D%22M11.5703186%2C3.14417309%20C11.8516238%2C2.73724603%2012.4164781%2C2.62829933%2012.83558%2C2.89774797%20C13.260121%2C3.17069355%2013.3759736%2C3.72932262%2013.0909105%2C4.14168582%20L7.7580587%2C11.8560195%20C7.43776896%2C12.3193404%206.76483983%2C12.3852142%206.35607322%2C11.9948725%20L3.02491697%2C8.8138662%20C2.66090143%2C8.46625845%202.65798871%2C7.89594698%203.01850234%2C7.54483354%20C3.373942%2C7.19866177%203.94940006%2C7.19592841%204.30829608%2C7.5386474%20L6.85276923%2C9.9684299%20L11.5703186%2C3.14417309%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");
|
||||
}
|
||||
[dir=rtl] .tox-checklist > li:not(.tox-checklist--hidden)::before {
|
||||
margin-left: 0;
|
||||
margin-right: -1.5em;
|
||||
}
|
||||
/* stylelint-disable */
|
||||
/* http://prismjs.com/ */
|
||||
/**
|
||||
* Dracula Theme originally by Zeno Rocha [@zenorocha]
|
||||
* https://draculatheme.com/
|
||||
*
|
||||
* Ported for PrismJS by Albert Vallverdu [@byverdu]
|
||||
*/
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
color: #f8f8f2;
|
||||
background: none;
|
||||
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
|
||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
line-height: 1.5;
|
||||
-moz-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-webkit-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
/* Code blocks */
|
||||
pre[class*="language-"] {
|
||||
padding: 1em;
|
||||
margin: 0.5em 0;
|
||||
overflow: auto;
|
||||
border-radius: 0.3em;
|
||||
}
|
||||
:not(pre) > code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
background: #282a36;
|
||||
}
|
||||
/* Inline code */
|
||||
:not(pre) > code[class*="language-"] {
|
||||
padding: 0.1em;
|
||||
border-radius: 0.3em;
|
||||
white-space: normal;
|
||||
}
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: #6272a4;
|
||||
}
|
||||
.token.punctuation {
|
||||
color: #f8f8f2;
|
||||
}
|
||||
.namespace {
|
||||
opacity: 0.7;
|
||||
}
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: #ff79c6;
|
||||
}
|
||||
.token.boolean,
|
||||
.token.number {
|
||||
color: #bd93f9;
|
||||
}
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: #50fa7b;
|
||||
}
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string,
|
||||
.token.variable {
|
||||
color: #f8f8f2;
|
||||
}
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.function,
|
||||
.token.class-name {
|
||||
color: #f1fa8c;
|
||||
}
|
||||
.token.keyword {
|
||||
color: #8be9fd;
|
||||
}
|
||||
.token.regex,
|
||||
.token.important {
|
||||
color: #ffb86c;
|
||||
}
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
/* stylelint-enable */
|
||||
.mce-content-body {
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.mce-content-body .mce-visual-caret {
|
||||
background-color: black;
|
||||
background-color: currentColor;
|
||||
position: absolute;
|
||||
}
|
||||
.mce-content-body .mce-visual-caret-hidden {
|
||||
display: none;
|
||||
}
|
||||
.mce-content-body *[data-mce-caret] {
|
||||
left: -1000px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
right: auto;
|
||||
top: 0;
|
||||
}
|
||||
.mce-content-body .mce-offscreen-selection {
|
||||
left: -2000000px;
|
||||
max-width: 1000000px;
|
||||
position: absolute;
|
||||
}
|
||||
.mce-content-body *[contentEditable=false] {
|
||||
cursor: default;
|
||||
}
|
||||
.mce-content-body *[contentEditable=true] {
|
||||
cursor: text;
|
||||
}
|
||||
.tox-cursor-format-painter {
|
||||
cursor: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M15%2C6%20C15%2C5.45%2014.55%2C5%2014%2C5%20L6%2C5%20C5.45%2C5%205%2C5.45%205%2C6%20L5%2C10%20C5%2C10.55%205.45%2C11%206%2C11%20L14%2C11%20C14.55%2C11%2015%2C10.55%2015%2C10%20L15%2C9%20L16%2C9%20L16%2C12%20L9%2C12%20L9%2C19%20C9%2C19.55%209.45%2C20%2010%2C20%20L11%2C20%20C11.55%2C20%2012%2C19.55%2012%2C19%20L12%2C14%20L18%2C14%20L18%2C7%20L15%2C7%20L15%2C6%20Z%22%2F%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M1%2C1%20L8.25%2C1%20C8.66421356%2C1%209%2C1.33578644%209%2C1.75%20L9%2C1.75%20C9%2C2.16421356%208.66421356%2C2.5%208.25%2C2.5%20L2.5%2C2.5%20L2.5%2C8.25%20C2.5%2C8.66421356%202.16421356%2C9%201.75%2C9%20L1.75%2C9%20C1.33578644%2C9%201%2C8.66421356%201%2C8.25%20L1%2C1%20Z%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A"), default;
|
||||
}
|
||||
.mce-content-body figure.align-left {
|
||||
float: left;
|
||||
}
|
||||
.mce-content-body figure.align-right {
|
||||
float: right;
|
||||
}
|
||||
.mce-content-body figure.image.align-center {
|
||||
display: table;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.mce-preview-object {
|
||||
border: 1px solid gray;
|
||||
display: inline-block;
|
||||
line-height: 0;
|
||||
margin: 0 2px 0 2px;
|
||||
position: relative;
|
||||
}
|
||||
.mce-preview-object .mce-shim {
|
||||
background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.mce-preview-object[data-mce-selected="2"] .mce-shim {
|
||||
display: none;
|
||||
}
|
||||
.mce-object {
|
||||
background: transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M4%203h16a1%201%200%200%201%201%201v16a1%201%200%200%201-1%201H4a1%201%200%200%201-1-1V4a1%201%200%200%201%201-1zm1%202v14h14V5H5zm4.79%202.565l5.64%204.028a.5.5%200%200%201%200%20.814l-5.64%204.028a.5.5%200%200%201-.79-.407V7.972a.5.5%200%200%201%20.79-.407z%22%20fill%3D%22%23cccccc%22%2F%3E%3C%2Fsvg%3E%0A") no-repeat center;
|
||||
border: 1px dashed #aaa;
|
||||
}
|
||||
.mce-pagebreak {
|
||||
border: 1px dashed #aaa;
|
||||
cursor: default;
|
||||
display: block;
|
||||
height: 5px;
|
||||
margin-top: 15px;
|
||||
page-break-before: always;
|
||||
width: 100%;
|
||||
}
|
||||
@media print {
|
||||
.mce-pagebreak {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
.tiny-pageembed .mce-shim {
|
||||
background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.tiny-pageembed[data-mce-selected="2"] .mce-shim {
|
||||
display: none;
|
||||
}
|
||||
.tiny-pageembed {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
.tiny-pageembed--21by9,
|
||||
.tiny-pageembed--16by9,
|
||||
.tiny-pageembed--4by3,
|
||||
.tiny-pageembed--1by1 {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
.tiny-pageembed--21by9 {
|
||||
padding-top: 42.857143%;
|
||||
}
|
||||
.tiny-pageembed--16by9 {
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
.tiny-pageembed--4by3 {
|
||||
padding-top: 75%;
|
||||
}
|
||||
.tiny-pageembed--1by1 {
|
||||
padding-top: 100%;
|
||||
}
|
||||
.tiny-pageembed--21by9 iframe,
|
||||
.tiny-pageembed--16by9 iframe,
|
||||
.tiny-pageembed--4by3 iframe,
|
||||
.tiny-pageembed--1by1 iframe {
|
||||
border: 0;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.mce-content-body[data-mce-placeholder] {
|
||||
position: relative;
|
||||
}
|
||||
.mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before {
|
||||
color: rgba(34, 47, 62, 0.7);
|
||||
content: attr(data-mce-placeholder);
|
||||
position: absolute;
|
||||
}
|
||||
.mce-content-body:not([dir=rtl])[data-mce-placeholder]:not(.mce-visualblocks)::before {
|
||||
left: 1px;
|
||||
}
|
||||
.mce-content-body[dir=rtl][data-mce-placeholder]:not(.mce-visualblocks)::before {
|
||||
right: 1px;
|
||||
}
|
||||
.mce-content-body div.mce-resizehandle {
|
||||
background-color: #4099ff;
|
||||
border-color: #4099ff;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
box-sizing: border-box;
|
||||
height: 10px;
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
z-index: 10000;
|
||||
}
|
||||
.mce-content-body div.mce-resizehandle:hover {
|
||||
background-color: #4099ff;
|
||||
}
|
||||
.mce-content-body div.mce-resizehandle:nth-of-type(1) {
|
||||
cursor: nwse-resize;
|
||||
}
|
||||
.mce-content-body div.mce-resizehandle:nth-of-type(2) {
|
||||
cursor: nesw-resize;
|
||||
}
|
||||
.mce-content-body div.mce-resizehandle:nth-of-type(3) {
|
||||
cursor: nwse-resize;
|
||||
}
|
||||
.mce-content-body div.mce-resizehandle:nth-of-type(4) {
|
||||
cursor: nesw-resize;
|
||||
}
|
||||
.mce-content-body .mce-clonedresizable {
|
||||
opacity: 0.5;
|
||||
outline: 1px dashed black;
|
||||
position: absolute;
|
||||
z-index: 10000;
|
||||
}
|
||||
.mce-content-body .mce-resize-helper {
|
||||
background: #555;
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
border: 1px;
|
||||
border-radius: 3px;
|
||||
color: white;
|
||||
display: none;
|
||||
font-family: sans-serif;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
margin: 5px 10px;
|
||||
padding: 5px;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
z-index: 10001;
|
||||
}
|
||||
.tox-rtc-user-selection {
|
||||
position: relative;
|
||||
}
|
||||
.tox-rtc-user-cursor {
|
||||
bottom: 0;
|
||||
cursor: default;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 2px;
|
||||
}
|
||||
.tox-rtc-user-cursor::before {
|
||||
background-color: inherit;
|
||||
border-radius: 50%;
|
||||
content: '';
|
||||
display: block;
|
||||
height: 8px;
|
||||
position: absolute;
|
||||
right: -3px;
|
||||
top: -3px;
|
||||
width: 8px;
|
||||
}
|
||||
.tox-rtc-user-cursor:hover::after {
|
||||
background-color: inherit;
|
||||
border-radius: 100px;
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
content: attr(data-user);
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
left: -5px;
|
||||
min-height: 8px;
|
||||
min-width: 8px;
|
||||
padding: 0 12px;
|
||||
position: absolute;
|
||||
top: -11px;
|
||||
white-space: nowrap;
|
||||
z-index: 1000;
|
||||
}
|
||||
.tox-rtc-user-selection--1 .tox-rtc-user-cursor {
|
||||
background-color: #2dc26b;
|
||||
}
|
||||
.tox-rtc-user-selection--2 .tox-rtc-user-cursor {
|
||||
background-color: #e03e2d;
|
||||
}
|
||||
.tox-rtc-user-selection--3 .tox-rtc-user-cursor {
|
||||
background-color: #f1c40f;
|
||||
}
|
||||
.tox-rtc-user-selection--4 .tox-rtc-user-cursor {
|
||||
background-color: #3598db;
|
||||
}
|
||||
.tox-rtc-user-selection--5 .tox-rtc-user-cursor {
|
||||
background-color: #b96ad9;
|
||||
}
|
||||
.tox-rtc-user-selection--6 .tox-rtc-user-cursor {
|
||||
background-color: #e67e23;
|
||||
}
|
||||
.tox-rtc-user-selection--7 .tox-rtc-user-cursor {
|
||||
background-color: #aaa69d;
|
||||
}
|
||||
.tox-rtc-user-selection--8 .tox-rtc-user-cursor {
|
||||
background-color: #f368e0;
|
||||
}
|
||||
.tox-rtc-remote-image {
|
||||
background: #eaeaea url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2236%22%20height%3D%2212%22%20viewBox%3D%220%200%2036%2012%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Ccircle%20cx%3D%226%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%20%20%3Ccircle%20cx%3D%2218%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20begin%3D%22.33s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%20%20%3Ccircle%20cx%3D%2230%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20begin%3D%22.66s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%3C%2Fsvg%3E%0A") no-repeat center center;
|
||||
border: 1px solid #ccc;
|
||||
min-height: 240px;
|
||||
min-width: 320px;
|
||||
}
|
||||
.mce-match-marker {
|
||||
background: #aaa;
|
||||
color: #fff;
|
||||
}
|
||||
.mce-match-marker-selected {
|
||||
background: #39f;
|
||||
color: #fff;
|
||||
}
|
||||
.mce-match-marker-selected::-moz-selection {
|
||||
background: #39f;
|
||||
color: #fff;
|
||||
}
|
||||
.mce-match-marker-selected::selection {
|
||||
background: #39f;
|
||||
color: #fff;
|
||||
}
|
||||
.mce-content-body img[data-mce-selected],
|
||||
.mce-content-body table[data-mce-selected] {
|
||||
outline: 3px solid #4099ff;
|
||||
}
|
||||
.mce-content-body hr[data-mce-selected] {
|
||||
outline: 3px solid #4099ff;
|
||||
outline-offset: 1px;
|
||||
}
|
||||
.mce-content-body *[contentEditable=false] *[contentEditable=true]:focus {
|
||||
outline: 3px solid #4099ff;
|
||||
}
|
||||
.mce-content-body *[contentEditable=false] *[contentEditable=true]:hover {
|
||||
outline: 3px solid #4099ff;
|
||||
}
|
||||
.mce-content-body *[contentEditable=false][data-mce-selected] {
|
||||
cursor: not-allowed;
|
||||
outline: 3px solid #4099ff;
|
||||
}
|
||||
.mce-content-body.mce-content-readonly *[contentEditable=true]:focus,
|
||||
.mce-content-body.mce-content-readonly *[contentEditable=true]:hover {
|
||||
outline: none;
|
||||
}
|
||||
.mce-content-body *[data-mce-selected="inline-boundary"] {
|
||||
background-color: #4099ff;
|
||||
}
|
||||
.mce-content-body .mce-edit-focus {
|
||||
outline: 3px solid #4099ff;
|
||||
}
|
||||
.mce-content-body td[data-mce-selected],
|
||||
.mce-content-body th[data-mce-selected] {
|
||||
background-color: #b4d7ff !important;
|
||||
}
|
||||
.mce-content-body td[data-mce-selected]::-moz-selection,
|
||||
.mce-content-body th[data-mce-selected]::-moz-selection {
|
||||
background: none;
|
||||
}
|
||||
.mce-content-body td[data-mce-selected]::selection,
|
||||
.mce-content-body th[data-mce-selected]::selection {
|
||||
background: none;
|
||||
}
|
||||
.mce-content-body td[data-mce-selected] *,
|
||||
.mce-content-body th[data-mce-selected] * {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.mce-content-body img::-moz-selection {
|
||||
background: none;
|
||||
}
|
||||
.mce-content-body img::selection {
|
||||
background: none;
|
||||
}
|
||||
.ephox-snooker-resizer-bar {
|
||||
background-color: #4099ff;
|
||||
opacity: 0;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.ephox-snooker-resizer-cols {
|
||||
cursor: col-resize;
|
||||
}
|
||||
.ephox-snooker-resizer-rows {
|
||||
cursor: row-resize;
|
||||
}
|
||||
.ephox-snooker-resizer-bar.ephox-snooker-resizer-bar-dragging {
|
||||
opacity: 1;
|
||||
}
|
||||
.mce-spellchecker-word {
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%23ff0000'%20fill%3D'none'%20stroke-linecap%3D'round'%20stroke-opacity%3D'.75'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A");
|
||||
background-position: 0 calc(100% + 1px);
|
||||
background-repeat: repeat-x;
|
||||
background-size: auto 6px;
|
||||
cursor: default;
|
||||
height: 2rem;
|
||||
}
|
||||
.mce-spellchecker-grammar {
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%2300A835'%20fill%3D'none'%20stroke-linecap%3D'round'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A");
|
||||
background-position: 0 calc(100% + 1px);
|
||||
background-repeat: repeat-x;
|
||||
background-size: auto 6px;
|
||||
cursor: default;
|
||||
}
|
||||
.mce-toc {
|
||||
border: 1px solid gray;
|
||||
}
|
||||
.mce-toc h2 {
|
||||
margin: 4px;
|
||||
}
|
||||
.mce-toc li {
|
||||
list-style-type: none;
|
||||
}
|
||||
.mce-item-table,
|
||||
.mce-item-table td,
|
||||
.mce-item-table th,
|
||||
.mce-item-table caption {
|
||||
border: 1px dashed #bbb;
|
||||
}
|
||||
.mce-visualblocks p,
|
||||
.mce-visualblocks h1,
|
||||
.mce-visualblocks h2,
|
||||
.mce-visualblocks h3,
|
||||
.mce-visualblocks h4,
|
||||
.mce-visualblocks h5,
|
||||
.mce-visualblocks h6,
|
||||
.mce-visualblocks div:not([data-mce-bogus]),
|
||||
.mce-visualblocks section,
|
||||
.mce-visualblocks article,
|
||||
.mce-visualblocks blockquote,
|
||||
.mce-visualblocks address,
|
||||
.mce-visualblocks pre,
|
||||
.mce-visualblocks figure,
|
||||
.mce-visualblocks figcaption,
|
||||
.mce-visualblocks hgroup,
|
||||
.mce-visualblocks aside,
|
||||
.mce-visualblocks ul,
|
||||
.mce-visualblocks ol,
|
||||
.mce-visualblocks dl {
|
||||
background-repeat: no-repeat;
|
||||
border: 1px dashed #bbb;
|
||||
margin-left: 3px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
.mce-visualblocks p {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhCQAJAJEAAAAAAP///7u7u////yH5BAEAAAMALAAAAAAJAAkAAAIQnG+CqCN/mlyvsRUpThG6AgA7);
|
||||
}
|
||||
.mce-visualblocks h1 {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGu1JuxHoAfRNRW3TWXyF2YiRUAOw==);
|
||||
}
|
||||
.mce-visualblocks h2 {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8Hybbx4oOuqgTynJd6bGlWg3DkJzoaUAAAOw==);
|
||||
}
|
||||
.mce-visualblocks h3 {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIZjI8Hybbx4oOuqgTynJf2Ln2NOHpQpmhAAQA7);
|
||||
}
|
||||
.mce-visualblocks h4 {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxInR0zqeAdhtJlXwV1oCll2HaWgAAOw==);
|
||||
}
|
||||
.mce-visualblocks h5 {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjane4iq5GlW05GgIkIZUAAAOw==);
|
||||
}
|
||||
.mce-visualblocks h6 {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjan04jep1iZ1XRlAo5bVgAAOw==);
|
||||
}
|
||||
.mce-visualblocks div:not([data-mce-bogus]) {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhEgAKAIABALu7u////yH5BAEAAAEALAAAAAASAAoAAAIfjI9poI0cgDywrhuxfbrzDEbQM2Ei5aRjmoySW4pAAQA7);
|
||||
}
|
||||
.mce-visualblocks section {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhKAAKAIABALu7u////yH5BAEAAAEALAAAAAAoAAoAAAI5jI+pywcNY3sBWHdNrplytD2ellDeSVbp+GmWqaDqDMepc8t17Y4vBsK5hDyJMcI6KkuYU+jpjLoKADs=);
|
||||
}
|
||||
.mce-visualblocks article {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhKgAKAIABALu7u////yH5BAEAAAEALAAAAAAqAAoAAAI6jI+pywkNY3wG0GBvrsd2tXGYSGnfiF7ikpXemTpOiJScasYoDJJrjsG9gkCJ0ag6KhmaIe3pjDYBBQA7);
|
||||
}
|
||||
.mce-visualblocks blockquote {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhPgAKAIABALu7u////yH5BAEAAAEALAAAAAA+AAoAAAJPjI+py+0Knpz0xQDyuUhvfoGgIX5iSKZYgq5uNL5q69asZ8s5rrf0yZmpNkJZzFesBTu8TOlDVAabUyatguVhWduud3EyiUk45xhTTgMBBQA7);
|
||||
}
|
||||
.mce-visualblocks address {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhLQAKAIABALu7u////yH5BAEAAAEALAAAAAAtAAoAAAI/jI+pywwNozSP1gDyyZcjb3UaRpXkWaXmZW4OqKLhBmLs+K263DkJK7OJeifh7FicKD9A1/IpGdKkyFpNmCkAADs=);
|
||||
}
|
||||
.mce-visualblocks pre {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhFQAKAIABALu7uwAAACH5BAEAAAEALAAAAAAVAAoAAAIjjI+ZoN0cgDwSmnpz1NCueYERhnibZVKLNnbOq8IvKpJtVQAAOw==);
|
||||
}
|
||||
.mce-visualblocks figure {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhJAAKAIAAALu7u////yH5BAEAAAEALAAAAAAkAAoAAAI0jI+py+2fwAHUSFvD3RlvG4HIp4nX5JFSpnZUJ6LlrM52OE7uSWosBHScgkSZj7dDKnWAAgA7);
|
||||
}
|
||||
.mce-visualblocks figcaption {
|
||||
border: 1px dashed #bbb;
|
||||
}
|
||||
.mce-visualblocks hgroup {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhJwAKAIABALu7uwAAACH5BAEAAAEALAAAAAAnAAoAAAI3jI+pywYNI3uB0gpsRtt5fFnfNZaVSYJil4Wo03Hv6Z62uOCgiXH1kZIIJ8NiIxRrAZNMZAtQAAA7);
|
||||
}
|
||||
.mce-visualblocks aside {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhHgAKAIABAKqqqv///yH5BAEAAAEALAAAAAAeAAoAAAItjI+pG8APjZOTzgtqy7I3f1yehmQcFY4WKZbqByutmW4aHUd6vfcVbgudgpYCADs=);
|
||||
}
|
||||
.mce-visualblocks ul {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhDQAKAIAAALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGuYnqUVSjvw26DzzXiqIDlVwAAOw==);
|
||||
}
|
||||
.mce-visualblocks ol {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybH6HHt0qourxC6CvzXieHyeWQAAOw==);
|
||||
}
|
||||
.mce-visualblocks dl {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybEOnmOvUoWznTqeuEjNSCqeGRUAOw==);
|
||||
}
|
||||
.mce-visualblocks:not([dir=rtl]) p,
|
||||
.mce-visualblocks:not([dir=rtl]) h1,
|
||||
.mce-visualblocks:not([dir=rtl]) h2,
|
||||
.mce-visualblocks:not([dir=rtl]) h3,
|
||||
.mce-visualblocks:not([dir=rtl]) h4,
|
||||
.mce-visualblocks:not([dir=rtl]) h5,
|
||||
.mce-visualblocks:not([dir=rtl]) h6,
|
||||
.mce-visualblocks:not([dir=rtl]) div:not([data-mce-bogus]),
|
||||
.mce-visualblocks:not([dir=rtl]) section,
|
||||
.mce-visualblocks:not([dir=rtl]) article,
|
||||
.mce-visualblocks:not([dir=rtl]) blockquote,
|
||||
.mce-visualblocks:not([dir=rtl]) address,
|
||||
.mce-visualblocks:not([dir=rtl]) pre,
|
||||
.mce-visualblocks:not([dir=rtl]) figure,
|
||||
.mce-visualblocks:not([dir=rtl]) figcaption,
|
||||
.mce-visualblocks:not([dir=rtl]) hgroup,
|
||||
.mce-visualblocks:not([dir=rtl]) aside,
|
||||
.mce-visualblocks:not([dir=rtl]) ul,
|
||||
.mce-visualblocks:not([dir=rtl]) ol,
|
||||
.mce-visualblocks:not([dir=rtl]) dl {
|
||||
margin-left: 3px;
|
||||
}
|
||||
.mce-visualblocks[dir=rtl] p,
|
||||
.mce-visualblocks[dir=rtl] h1,
|
||||
.mce-visualblocks[dir=rtl] h2,
|
||||
.mce-visualblocks[dir=rtl] h3,
|
||||
.mce-visualblocks[dir=rtl] h4,
|
||||
.mce-visualblocks[dir=rtl] h5,
|
||||
.mce-visualblocks[dir=rtl] h6,
|
||||
.mce-visualblocks[dir=rtl] div:not([data-mce-bogus]),
|
||||
.mce-visualblocks[dir=rtl] section,
|
||||
.mce-visualblocks[dir=rtl] article,
|
||||
.mce-visualblocks[dir=rtl] blockquote,
|
||||
.mce-visualblocks[dir=rtl] address,
|
||||
.mce-visualblocks[dir=rtl] pre,
|
||||
.mce-visualblocks[dir=rtl] figure,
|
||||
.mce-visualblocks[dir=rtl] figcaption,
|
||||
.mce-visualblocks[dir=rtl] hgroup,
|
||||
.mce-visualblocks[dir=rtl] aside,
|
||||
.mce-visualblocks[dir=rtl] ul,
|
||||
.mce-visualblocks[dir=rtl] ol,
|
||||
.mce-visualblocks[dir=rtl] dl {
|
||||
background-position-x: right;
|
||||
margin-right: 3px;
|
||||
}
|
||||
.mce-nbsp,
|
||||
.mce-shy {
|
||||
background: #aaa;
|
||||
}
|
||||
.mce-shy::after {
|
||||
content: '-';
|
||||
}
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
689
public/tinymce/skins/ui/oxide-dark/content.inline.css
Normal file
689
public/tinymce/skins/ui/oxide-dark/content.inline.css
Normal file
@@ -0,0 +1,689 @@
|
||||
/**
|
||||
* Copyright (c) Tiny Technologies, Inc. All rights reserved.
|
||||
* Licensed under the LGPL or a commercial license.
|
||||
* For LGPL see License.txt in the project root for license information.
|
||||
* For commercial licenses see https://www.tiny.cloud/
|
||||
*/
|
||||
.mce-content-body .mce-item-anchor {
|
||||
background: transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'8'%20height%3D'12'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M0%200L8%200%208%2012%204.09117821%209%200%2012z'%2F%3E%3C%2Fsvg%3E%0A") no-repeat center;
|
||||
cursor: default;
|
||||
display: inline-block;
|
||||
height: 12px !important;
|
||||
padding: 0 2px;
|
||||
-webkit-user-modify: read-only;
|
||||
-moz-user-modify: read-only;
|
||||
-webkit-user-select: all;
|
||||
-moz-user-select: all;
|
||||
-ms-user-select: all;
|
||||
user-select: all;
|
||||
width: 8px !important;
|
||||
}
|
||||
.mce-content-body .mce-item-anchor[data-mce-selected] {
|
||||
outline-offset: 1px;
|
||||
}
|
||||
.tox-comments-visible .tox-comment {
|
||||
background-color: #fff0b7;
|
||||
}
|
||||
.tox-comments-visible .tox-comment--active {
|
||||
background-color: #ffe168;
|
||||
}
|
||||
.tox-checklist > li:not(.tox-checklist--hidden) {
|
||||
list-style: none;
|
||||
margin: 0.25em 0;
|
||||
}
|
||||
.tox-checklist > li:not(.tox-checklist--hidden)::before {
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-unchecked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2215%22%20height%3D%2215%22%20x%3D%22.5%22%20y%3D%22.5%22%20fill-rule%3D%22nonzero%22%20stroke%3D%22%234C4C4C%22%20rx%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");
|
||||
background-size: 100%;
|
||||
content: '';
|
||||
cursor: pointer;
|
||||
height: 1em;
|
||||
margin-left: -1.5em;
|
||||
margin-top: 0.125em;
|
||||
position: absolute;
|
||||
width: 1em;
|
||||
}
|
||||
.tox-checklist li:not(.tox-checklist--hidden).tox-checklist--checked::before {
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-checked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%234099FF%22%20fill-rule%3D%22nonzero%22%20rx%3D%222%22%2F%3E%3Cpath%20id%3D%22Path%22%20fill%3D%22%23FFF%22%20fill-rule%3D%22nonzero%22%20d%3D%22M11.5703186%2C3.14417309%20C11.8516238%2C2.73724603%2012.4164781%2C2.62829933%2012.83558%2C2.89774797%20C13.260121%2C3.17069355%2013.3759736%2C3.72932262%2013.0909105%2C4.14168582%20L7.7580587%2C11.8560195%20C7.43776896%2C12.3193404%206.76483983%2C12.3852142%206.35607322%2C11.9948725%20L3.02491697%2C8.8138662%20C2.66090143%2C8.46625845%202.65798871%2C7.89594698%203.01850234%2C7.54483354%20C3.373942%2C7.19866177%203.94940006%2C7.19592841%204.30829608%2C7.5386474%20L6.85276923%2C9.9684299%20L11.5703186%2C3.14417309%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");
|
||||
}
|
||||
[dir=rtl] .tox-checklist > li:not(.tox-checklist--hidden)::before {
|
||||
margin-left: 0;
|
||||
margin-right: -1.5em;
|
||||
}
|
||||
/* stylelint-disable */
|
||||
/* http://prismjs.com/ */
|
||||
/**
|
||||
* prism.js default theme for JavaScript, CSS and HTML
|
||||
* Based on dabblet (http://dabblet.com)
|
||||
* @author Lea Verou
|
||||
*/
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
color: black;
|
||||
background: none;
|
||||
text-shadow: 0 1px white;
|
||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
font-size: 1em;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
line-height: 1.5;
|
||||
-moz-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-webkit-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
pre[class*="language-"]::-moz-selection,
|
||||
pre[class*="language-"] ::-moz-selection,
|
||||
code[class*="language-"]::-moz-selection,
|
||||
code[class*="language-"] ::-moz-selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
pre[class*="language-"]::selection,
|
||||
pre[class*="language-"] ::selection,
|
||||
code[class*="language-"]::selection,
|
||||
code[class*="language-"] ::selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
@media print {
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
/* Code blocks */
|
||||
pre[class*="language-"] {
|
||||
padding: 1em;
|
||||
margin: 0.5em 0;
|
||||
overflow: auto;
|
||||
}
|
||||
:not(pre) > code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
background: #f5f2f0;
|
||||
}
|
||||
/* Inline code */
|
||||
:not(pre) > code[class*="language-"] {
|
||||
padding: 0.1em;
|
||||
border-radius: 0.3em;
|
||||
white-space: normal;
|
||||
}
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: slategray;
|
||||
}
|
||||
.token.punctuation {
|
||||
color: #999;
|
||||
}
|
||||
.namespace {
|
||||
opacity: 0.7;
|
||||
}
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.boolean,
|
||||
.token.number,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: #905;
|
||||
}
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: #690;
|
||||
}
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string {
|
||||
color: #9a6e3a;
|
||||
background: hsla(0, 0%, 100%, 0.5);
|
||||
}
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.keyword {
|
||||
color: #07a;
|
||||
}
|
||||
.token.function,
|
||||
.token.class-name {
|
||||
color: #DD4A68;
|
||||
}
|
||||
.token.regex,
|
||||
.token.important,
|
||||
.token.variable {
|
||||
color: #e90;
|
||||
}
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
/* stylelint-enable */
|
||||
.mce-content-body {
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.mce-content-body .mce-visual-caret {
|
||||
background-color: black;
|
||||
background-color: currentColor;
|
||||
position: absolute;
|
||||
}
|
||||
.mce-content-body .mce-visual-caret-hidden {
|
||||
display: none;
|
||||
}
|
||||
.mce-content-body *[data-mce-caret] {
|
||||
left: -1000px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
right: auto;
|
||||
top: 0;
|
||||
}
|
||||
.mce-content-body .mce-offscreen-selection {
|
||||
left: -2000000px;
|
||||
max-width: 1000000px;
|
||||
position: absolute;
|
||||
}
|
||||
.mce-content-body *[contentEditable=false] {
|
||||
cursor: default;
|
||||
}
|
||||
.mce-content-body *[contentEditable=true] {
|
||||
cursor: text;
|
||||
}
|
||||
.tox-cursor-format-painter {
|
||||
cursor: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M15%2C6%20C15%2C5.45%2014.55%2C5%2014%2C5%20L6%2C5%20C5.45%2C5%205%2C5.45%205%2C6%20L5%2C10%20C5%2C10.55%205.45%2C11%206%2C11%20L14%2C11%20C14.55%2C11%2015%2C10.55%2015%2C10%20L15%2C9%20L16%2C9%20L16%2C12%20L9%2C12%20L9%2C19%20C9%2C19.55%209.45%2C20%2010%2C20%20L11%2C20%20C11.55%2C20%2012%2C19.55%2012%2C19%20L12%2C14%20L18%2C14%20L18%2C7%20L15%2C7%20L15%2C6%20Z%22%2F%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M1%2C1%20L8.25%2C1%20C8.66421356%2C1%209%2C1.33578644%209%2C1.75%20L9%2C1.75%20C9%2C2.16421356%208.66421356%2C2.5%208.25%2C2.5%20L2.5%2C2.5%20L2.5%2C8.25%20C2.5%2C8.66421356%202.16421356%2C9%201.75%2C9%20L1.75%2C9%20C1.33578644%2C9%201%2C8.66421356%201%2C8.25%20L1%2C1%20Z%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A"), default;
|
||||
}
|
||||
.mce-content-body figure.align-left {
|
||||
float: left;
|
||||
}
|
||||
.mce-content-body figure.align-right {
|
||||
float: right;
|
||||
}
|
||||
.mce-content-body figure.image.align-center {
|
||||
display: table;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.mce-preview-object {
|
||||
border: 1px solid gray;
|
||||
display: inline-block;
|
||||
line-height: 0;
|
||||
margin: 0 2px 0 2px;
|
||||
position: relative;
|
||||
}
|
||||
.mce-preview-object .mce-shim {
|
||||
background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.mce-preview-object[data-mce-selected="2"] .mce-shim {
|
||||
display: none;
|
||||
}
|
||||
.mce-object {
|
||||
background: transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M4%203h16a1%201%200%200%201%201%201v16a1%201%200%200%201-1%201H4a1%201%200%200%201-1-1V4a1%201%200%200%201%201-1zm1%202v14h14V5H5zm4.79%202.565l5.64%204.028a.5.5%200%200%201%200%20.814l-5.64%204.028a.5.5%200%200%201-.79-.407V7.972a.5.5%200%200%201%20.79-.407z%22%2F%3E%3C%2Fsvg%3E%0A") no-repeat center;
|
||||
border: 1px dashed #aaa;
|
||||
}
|
||||
.mce-pagebreak {
|
||||
border: 1px dashed #aaa;
|
||||
cursor: default;
|
||||
display: block;
|
||||
height: 5px;
|
||||
margin-top: 15px;
|
||||
page-break-before: always;
|
||||
width: 100%;
|
||||
}
|
||||
@media print {
|
||||
.mce-pagebreak {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
.tiny-pageembed .mce-shim {
|
||||
background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.tiny-pageembed[data-mce-selected="2"] .mce-shim {
|
||||
display: none;
|
||||
}
|
||||
.tiny-pageembed {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
.tiny-pageembed--21by9,
|
||||
.tiny-pageembed--16by9,
|
||||
.tiny-pageembed--4by3,
|
||||
.tiny-pageembed--1by1 {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
.tiny-pageembed--21by9 {
|
||||
padding-top: 42.857143%;
|
||||
}
|
||||
.tiny-pageembed--16by9 {
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
.tiny-pageembed--4by3 {
|
||||
padding-top: 75%;
|
||||
}
|
||||
.tiny-pageembed--1by1 {
|
||||
padding-top: 100%;
|
||||
}
|
||||
.tiny-pageembed--21by9 iframe,
|
||||
.tiny-pageembed--16by9 iframe,
|
||||
.tiny-pageembed--4by3 iframe,
|
||||
.tiny-pageembed--1by1 iframe {
|
||||
border: 0;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.mce-content-body[data-mce-placeholder] {
|
||||
position: relative;
|
||||
}
|
||||
.mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before {
|
||||
color: rgba(34, 47, 62, 0.7);
|
||||
content: attr(data-mce-placeholder);
|
||||
position: absolute;
|
||||
}
|
||||
.mce-content-body:not([dir=rtl])[data-mce-placeholder]:not(.mce-visualblocks)::before {
|
||||
left: 1px;
|
||||
}
|
||||
.mce-content-body[dir=rtl][data-mce-placeholder]:not(.mce-visualblocks)::before {
|
||||
right: 1px;
|
||||
}
|
||||
.mce-content-body div.mce-resizehandle {
|
||||
background-color: #4099ff;
|
||||
border-color: #4099ff;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
box-sizing: border-box;
|
||||
height: 10px;
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
z-index: 10000;
|
||||
}
|
||||
.mce-content-body div.mce-resizehandle:hover {
|
||||
background-color: #4099ff;
|
||||
}
|
||||
.mce-content-body div.mce-resizehandle:nth-of-type(1) {
|
||||
cursor: nwse-resize;
|
||||
}
|
||||
.mce-content-body div.mce-resizehandle:nth-of-type(2) {
|
||||
cursor: nesw-resize;
|
||||
}
|
||||
.mce-content-body div.mce-resizehandle:nth-of-type(3) {
|
||||
cursor: nwse-resize;
|
||||
}
|
||||
.mce-content-body div.mce-resizehandle:nth-of-type(4) {
|
||||
cursor: nesw-resize;
|
||||
}
|
||||
.mce-content-body .mce-clonedresizable {
|
||||
opacity: 0.5;
|
||||
outline: 1px dashed black;
|
||||
position: absolute;
|
||||
z-index: 10000;
|
||||
}
|
||||
.mce-content-body .mce-resize-helper {
|
||||
background: #555;
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
border: 1px;
|
||||
border-radius: 3px;
|
||||
color: white;
|
||||
display: none;
|
||||
font-family: sans-serif;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
margin: 5px 10px;
|
||||
padding: 5px;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
z-index: 10001;
|
||||
}
|
||||
.tox-rtc-user-selection {
|
||||
position: relative;
|
||||
}
|
||||
.tox-rtc-user-cursor {
|
||||
bottom: 0;
|
||||
cursor: default;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 2px;
|
||||
}
|
||||
.tox-rtc-user-cursor::before {
|
||||
background-color: inherit;
|
||||
border-radius: 50%;
|
||||
content: '';
|
||||
display: block;
|
||||
height: 8px;
|
||||
position: absolute;
|
||||
right: -3px;
|
||||
top: -3px;
|
||||
width: 8px;
|
||||
}
|
||||
.tox-rtc-user-cursor:hover::after {
|
||||
background-color: inherit;
|
||||
border-radius: 100px;
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
content: attr(data-user);
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
left: -5px;
|
||||
min-height: 8px;
|
||||
min-width: 8px;
|
||||
padding: 0 12px;
|
||||
position: absolute;
|
||||
top: -11px;
|
||||
white-space: nowrap;
|
||||
z-index: 1000;
|
||||
}
|
||||
.tox-rtc-user-selection--1 .tox-rtc-user-cursor {
|
||||
background-color: #2dc26b;
|
||||
}
|
||||
.tox-rtc-user-selection--2 .tox-rtc-user-cursor {
|
||||
background-color: #e03e2d;
|
||||
}
|
||||
.tox-rtc-user-selection--3 .tox-rtc-user-cursor {
|
||||
background-color: #f1c40f;
|
||||
}
|
||||
.tox-rtc-user-selection--4 .tox-rtc-user-cursor {
|
||||
background-color: #3598db;
|
||||
}
|
||||
.tox-rtc-user-selection--5 .tox-rtc-user-cursor {
|
||||
background-color: #b96ad9;
|
||||
}
|
||||
.tox-rtc-user-selection--6 .tox-rtc-user-cursor {
|
||||
background-color: #e67e23;
|
||||
}
|
||||
.tox-rtc-user-selection--7 .tox-rtc-user-cursor {
|
||||
background-color: #aaa69d;
|
||||
}
|
||||
.tox-rtc-user-selection--8 .tox-rtc-user-cursor {
|
||||
background-color: #f368e0;
|
||||
}
|
||||
.tox-rtc-remote-image {
|
||||
background: #eaeaea url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2236%22%20height%3D%2212%22%20viewBox%3D%220%200%2036%2012%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Ccircle%20cx%3D%226%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%20%20%3Ccircle%20cx%3D%2218%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20begin%3D%22.33s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%20%20%3Ccircle%20cx%3D%2230%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20begin%3D%22.66s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%3C%2Fsvg%3E%0A") no-repeat center center;
|
||||
border: 1px solid #ccc;
|
||||
min-height: 240px;
|
||||
min-width: 320px;
|
||||
}
|
||||
.mce-match-marker {
|
||||
background: #aaa;
|
||||
color: #fff;
|
||||
}
|
||||
.mce-match-marker-selected {
|
||||
background: #39f;
|
||||
color: #fff;
|
||||
}
|
||||
.mce-match-marker-selected::-moz-selection {
|
||||
background: #39f;
|
||||
color: #fff;
|
||||
}
|
||||
.mce-match-marker-selected::selection {
|
||||
background: #39f;
|
||||
color: #fff;
|
||||
}
|
||||
.mce-content-body img[data-mce-selected],
|
||||
.mce-content-body table[data-mce-selected] {
|
||||
outline: 3px solid #b4d7ff;
|
||||
}
|
||||
.mce-content-body hr[data-mce-selected] {
|
||||
outline: 3px solid #b4d7ff;
|
||||
outline-offset: 1px;
|
||||
}
|
||||
.mce-content-body *[contentEditable=false] *[contentEditable=true]:focus {
|
||||
outline: 3px solid #b4d7ff;
|
||||
}
|
||||
.mce-content-body *[contentEditable=false] *[contentEditable=true]:hover {
|
||||
outline: 3px solid #b4d7ff;
|
||||
}
|
||||
.mce-content-body *[contentEditable=false][data-mce-selected] {
|
||||
cursor: not-allowed;
|
||||
outline: 3px solid #b4d7ff;
|
||||
}
|
||||
.mce-content-body.mce-content-readonly *[contentEditable=true]:focus,
|
||||
.mce-content-body.mce-content-readonly *[contentEditable=true]:hover {
|
||||
outline: none;
|
||||
}
|
||||
.mce-content-body *[data-mce-selected="inline-boundary"] {
|
||||
background-color: #b4d7ff;
|
||||
}
|
||||
.mce-content-body .mce-edit-focus {
|
||||
outline: 3px solid #b4d7ff;
|
||||
}
|
||||
.mce-content-body td[data-mce-selected],
|
||||
.mce-content-body th[data-mce-selected] {
|
||||
background-color: #b4d7ff !important;
|
||||
}
|
||||
.mce-content-body td[data-mce-selected]::-moz-selection,
|
||||
.mce-content-body th[data-mce-selected]::-moz-selection {
|
||||
background: none;
|
||||
}
|
||||
.mce-content-body td[data-mce-selected]::selection,
|
||||
.mce-content-body th[data-mce-selected]::selection {
|
||||
background: none;
|
||||
}
|
||||
.mce-content-body td[data-mce-selected] *,
|
||||
.mce-content-body th[data-mce-selected] * {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.mce-content-body img::-moz-selection {
|
||||
background: none;
|
||||
}
|
||||
.mce-content-body img::selection {
|
||||
background: none;
|
||||
}
|
||||
.ephox-snooker-resizer-bar {
|
||||
background-color: #b4d7ff;
|
||||
opacity: 0;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.ephox-snooker-resizer-cols {
|
||||
cursor: col-resize;
|
||||
}
|
||||
.ephox-snooker-resizer-rows {
|
||||
cursor: row-resize;
|
||||
}
|
||||
.ephox-snooker-resizer-bar.ephox-snooker-resizer-bar-dragging {
|
||||
opacity: 1;
|
||||
}
|
||||
.mce-spellchecker-word {
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%23ff0000'%20fill%3D'none'%20stroke-linecap%3D'round'%20stroke-opacity%3D'.75'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A");
|
||||
background-position: 0 calc(100% + 1px);
|
||||
background-repeat: repeat-x;
|
||||
background-size: auto 6px;
|
||||
cursor: default;
|
||||
height: 2rem;
|
||||
}
|
||||
.mce-spellchecker-grammar {
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%2300A835'%20fill%3D'none'%20stroke-linecap%3D'round'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A");
|
||||
background-position: 0 calc(100% + 1px);
|
||||
background-repeat: repeat-x;
|
||||
background-size: auto 6px;
|
||||
cursor: default;
|
||||
}
|
||||
.mce-toc {
|
||||
border: 1px solid gray;
|
||||
}
|
||||
.mce-toc h2 {
|
||||
margin: 4px;
|
||||
}
|
||||
.mce-toc li {
|
||||
list-style-type: none;
|
||||
}
|
||||
.mce-item-table,
|
||||
.mce-item-table td,
|
||||
.mce-item-table th,
|
||||
.mce-item-table caption {
|
||||
border: 1px dashed #bbb;
|
||||
}
|
||||
.mce-visualblocks p,
|
||||
.mce-visualblocks h1,
|
||||
.mce-visualblocks h2,
|
||||
.mce-visualblocks h3,
|
||||
.mce-visualblocks h4,
|
||||
.mce-visualblocks h5,
|
||||
.mce-visualblocks h6,
|
||||
.mce-visualblocks div:not([data-mce-bogus]),
|
||||
.mce-visualblocks section,
|
||||
.mce-visualblocks article,
|
||||
.mce-visualblocks blockquote,
|
||||
.mce-visualblocks address,
|
||||
.mce-visualblocks pre,
|
||||
.mce-visualblocks figure,
|
||||
.mce-visualblocks figcaption,
|
||||
.mce-visualblocks hgroup,
|
||||
.mce-visualblocks aside,
|
||||
.mce-visualblocks ul,
|
||||
.mce-visualblocks ol,
|
||||
.mce-visualblocks dl {
|
||||
background-repeat: no-repeat;
|
||||
border: 1px dashed #bbb;
|
||||
margin-left: 3px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
.mce-visualblocks p {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhCQAJAJEAAAAAAP///7u7u////yH5BAEAAAMALAAAAAAJAAkAAAIQnG+CqCN/mlyvsRUpThG6AgA7);
|
||||
}
|
||||
.mce-visualblocks h1 {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGu1JuxHoAfRNRW3TWXyF2YiRUAOw==);
|
||||
}
|
||||
.mce-visualblocks h2 {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8Hybbx4oOuqgTynJd6bGlWg3DkJzoaUAAAOw==);
|
||||
}
|
||||
.mce-visualblocks h3 {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIZjI8Hybbx4oOuqgTynJf2Ln2NOHpQpmhAAQA7);
|
||||
}
|
||||
.mce-visualblocks h4 {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxInR0zqeAdhtJlXwV1oCll2HaWgAAOw==);
|
||||
}
|
||||
.mce-visualblocks h5 {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjane4iq5GlW05GgIkIZUAAAOw==);
|
||||
}
|
||||
.mce-visualblocks h6 {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjan04jep1iZ1XRlAo5bVgAAOw==);
|
||||
}
|
||||
.mce-visualblocks div:not([data-mce-bogus]) {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhEgAKAIABALu7u////yH5BAEAAAEALAAAAAASAAoAAAIfjI9poI0cgDywrhuxfbrzDEbQM2Ei5aRjmoySW4pAAQA7);
|
||||
}
|
||||
.mce-visualblocks section {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhKAAKAIABALu7u////yH5BAEAAAEALAAAAAAoAAoAAAI5jI+pywcNY3sBWHdNrplytD2ellDeSVbp+GmWqaDqDMepc8t17Y4vBsK5hDyJMcI6KkuYU+jpjLoKADs=);
|
||||
}
|
||||
.mce-visualblocks article {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhKgAKAIABALu7u////yH5BAEAAAEALAAAAAAqAAoAAAI6jI+pywkNY3wG0GBvrsd2tXGYSGnfiF7ikpXemTpOiJScasYoDJJrjsG9gkCJ0ag6KhmaIe3pjDYBBQA7);
|
||||
}
|
||||
.mce-visualblocks blockquote {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhPgAKAIABALu7u////yH5BAEAAAEALAAAAAA+AAoAAAJPjI+py+0Knpz0xQDyuUhvfoGgIX5iSKZYgq5uNL5q69asZ8s5rrf0yZmpNkJZzFesBTu8TOlDVAabUyatguVhWduud3EyiUk45xhTTgMBBQA7);
|
||||
}
|
||||
.mce-visualblocks address {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhLQAKAIABALu7u////yH5BAEAAAEALAAAAAAtAAoAAAI/jI+pywwNozSP1gDyyZcjb3UaRpXkWaXmZW4OqKLhBmLs+K263DkJK7OJeifh7FicKD9A1/IpGdKkyFpNmCkAADs=);
|
||||
}
|
||||
.mce-visualblocks pre {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhFQAKAIABALu7uwAAACH5BAEAAAEALAAAAAAVAAoAAAIjjI+ZoN0cgDwSmnpz1NCueYERhnibZVKLNnbOq8IvKpJtVQAAOw==);
|
||||
}
|
||||
.mce-visualblocks figure {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhJAAKAIAAALu7u////yH5BAEAAAEALAAAAAAkAAoAAAI0jI+py+2fwAHUSFvD3RlvG4HIp4nX5JFSpnZUJ6LlrM52OE7uSWosBHScgkSZj7dDKnWAAgA7);
|
||||
}
|
||||
.mce-visualblocks figcaption {
|
||||
border: 1px dashed #bbb;
|
||||
}
|
||||
.mce-visualblocks hgroup {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhJwAKAIABALu7uwAAACH5BAEAAAEALAAAAAAnAAoAAAI3jI+pywYNI3uB0gpsRtt5fFnfNZaVSYJil4Wo03Hv6Z62uOCgiXH1kZIIJ8NiIxRrAZNMZAtQAAA7);
|
||||
}
|
||||
.mce-visualblocks aside {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhHgAKAIABAKqqqv///yH5BAEAAAEALAAAAAAeAAoAAAItjI+pG8APjZOTzgtqy7I3f1yehmQcFY4WKZbqByutmW4aHUd6vfcVbgudgpYCADs=);
|
||||
}
|
||||
.mce-visualblocks ul {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhDQAKAIAAALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGuYnqUVSjvw26DzzXiqIDlVwAAOw==);
|
||||
}
|
||||
.mce-visualblocks ol {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybH6HHt0qourxC6CvzXieHyeWQAAOw==);
|
||||
}
|
||||
.mce-visualblocks dl {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybEOnmOvUoWznTqeuEjNSCqeGRUAOw==);
|
||||
}
|
||||
.mce-visualblocks:not([dir=rtl]) p,
|
||||
.mce-visualblocks:not([dir=rtl]) h1,
|
||||
.mce-visualblocks:not([dir=rtl]) h2,
|
||||
.mce-visualblocks:not([dir=rtl]) h3,
|
||||
.mce-visualblocks:not([dir=rtl]) h4,
|
||||
.mce-visualblocks:not([dir=rtl]) h5,
|
||||
.mce-visualblocks:not([dir=rtl]) h6,
|
||||
.mce-visualblocks:not([dir=rtl]) div:not([data-mce-bogus]),
|
||||
.mce-visualblocks:not([dir=rtl]) section,
|
||||
.mce-visualblocks:not([dir=rtl]) article,
|
||||
.mce-visualblocks:not([dir=rtl]) blockquote,
|
||||
.mce-visualblocks:not([dir=rtl]) address,
|
||||
.mce-visualblocks:not([dir=rtl]) pre,
|
||||
.mce-visualblocks:not([dir=rtl]) figure,
|
||||
.mce-visualblocks:not([dir=rtl]) figcaption,
|
||||
.mce-visualblocks:not([dir=rtl]) hgroup,
|
||||
.mce-visualblocks:not([dir=rtl]) aside,
|
||||
.mce-visualblocks:not([dir=rtl]) ul,
|
||||
.mce-visualblocks:not([dir=rtl]) ol,
|
||||
.mce-visualblocks:not([dir=rtl]) dl {
|
||||
margin-left: 3px;
|
||||
}
|
||||
.mce-visualblocks[dir=rtl] p,
|
||||
.mce-visualblocks[dir=rtl] h1,
|
||||
.mce-visualblocks[dir=rtl] h2,
|
||||
.mce-visualblocks[dir=rtl] h3,
|
||||
.mce-visualblocks[dir=rtl] h4,
|
||||
.mce-visualblocks[dir=rtl] h5,
|
||||
.mce-visualblocks[dir=rtl] h6,
|
||||
.mce-visualblocks[dir=rtl] div:not([data-mce-bogus]),
|
||||
.mce-visualblocks[dir=rtl] section,
|
||||
.mce-visualblocks[dir=rtl] article,
|
||||
.mce-visualblocks[dir=rtl] blockquote,
|
||||
.mce-visualblocks[dir=rtl] address,
|
||||
.mce-visualblocks[dir=rtl] pre,
|
||||
.mce-visualblocks[dir=rtl] figure,
|
||||
.mce-visualblocks[dir=rtl] figcaption,
|
||||
.mce-visualblocks[dir=rtl] hgroup,
|
||||
.mce-visualblocks[dir=rtl] aside,
|
||||
.mce-visualblocks[dir=rtl] ul,
|
||||
.mce-visualblocks[dir=rtl] ol,
|
||||
.mce-visualblocks[dir=rtl] dl {
|
||||
background-position-x: right;
|
||||
margin-right: 3px;
|
||||
}
|
||||
.mce-nbsp,
|
||||
.mce-shy {
|
||||
background: #aaa;
|
||||
}
|
||||
.mce-shy::after {
|
||||
content: '-';
|
||||
}
|
||||
7
public/tinymce/skins/ui/oxide-dark/content.inline.min.css
vendored
Normal file
7
public/tinymce/skins/ui/oxide-dark/content.inline.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
7
public/tinymce/skins/ui/oxide-dark/content.min.css
vendored
Normal file
7
public/tinymce/skins/ui/oxide-dark/content.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
29
public/tinymce/skins/ui/oxide-dark/content.mobile.css
Normal file
29
public/tinymce/skins/ui/oxide-dark/content.mobile.css
Normal file
@@ -0,0 +1,29 @@
|
||||
/**
|
||||
* Copyright (c) Tiny Technologies, Inc. All rights reserved.
|
||||
* Licensed under the LGPL or a commercial license.
|
||||
* For LGPL see License.txt in the project root for license information.
|
||||
* For commercial licenses see https://www.tiny.cloud/
|
||||
*/
|
||||
.tinymce-mobile-unfocused-selections .tinymce-mobile-unfocused-selection {
|
||||
/* Note: this file is used inside the content, so isn't part of theming */
|
||||
background-color: green;
|
||||
display: inline-block;
|
||||
opacity: 0.5;
|
||||
position: absolute;
|
||||
}
|
||||
body {
|
||||
-webkit-text-size-adjust: none;
|
||||
}
|
||||
body img {
|
||||
/* this is related to the content margin */
|
||||
max-width: 96vw;
|
||||
}
|
||||
body table img {
|
||||
max-width: 95%;
|
||||
}
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
7
public/tinymce/skins/ui/oxide-dark/content.mobile.min.css
vendored
Normal file
7
public/tinymce/skins/ui/oxide-dark/content.mobile.min.css
vendored
Normal file
@@ -0,0 +1,7 @@
|
||||
/**
|
||||
* Copyright (c) Tiny Technologies, Inc. All rights reserved.
|
||||
* Licensed under the LGPL or a commercial license.
|
||||
* For LGPL see License.txt in the project root for license information.
|
||||
* For commercial licenses see https://www.tiny.cloud/
|
||||
*/
|
||||
.tinymce-mobile-unfocused-selections .tinymce-mobile-unfocused-selection{background-color:green;display:inline-block;opacity:.5;position:absolute}body{-webkit-text-size-adjust:none}body img{max-width:96vw}body table img{max-width:95%}body{font-family:sans-serif}table{border-collapse:collapse}
|
||||
BIN
public/tinymce/skins/ui/oxide-dark/fonts/tinymce-mobile.woff
Normal file
BIN
public/tinymce/skins/ui/oxide-dark/fonts/tinymce-mobile.woff
Normal file
Binary file not shown.
2937
public/tinymce/skins/ui/oxide-dark/skin.css
Normal file
2937
public/tinymce/skins/ui/oxide-dark/skin.css
Normal file
File diff suppressed because it is too large
Load Diff
7
public/tinymce/skins/ui/oxide-dark/skin.min.css
vendored
Normal file
7
public/tinymce/skins/ui/oxide-dark/skin.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
673
public/tinymce/skins/ui/oxide-dark/skin.mobile.css
Normal file
673
public/tinymce/skins/ui/oxide-dark/skin.mobile.css
Normal file
@@ -0,0 +1,673 @@
|
||||
/**
|
||||
* Copyright (c) Tiny Technologies, Inc. All rights reserved.
|
||||
* Licensed under the LGPL or a commercial license.
|
||||
* For LGPL see License.txt in the project root for license information.
|
||||
* For commercial licenses see https://www.tiny.cloud/
|
||||
*/
|
||||
/* RESET all the things! */
|
||||
.tinymce-mobile-outer-container {
|
||||
all: initial;
|
||||
display: block;
|
||||
}
|
||||
.tinymce-mobile-outer-container * {
|
||||
border: 0;
|
||||
box-sizing: initial;
|
||||
cursor: inherit;
|
||||
float: none;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
outline: 0;
|
||||
padding: 0;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
/* TBIO-3691, stop the gray flicker on touch. */
|
||||
text-shadow: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.tinymce-mobile-icon-arrow-back::before {
|
||||
content: "\e5cd";
|
||||
}
|
||||
.tinymce-mobile-icon-image::before {
|
||||
content: "\e412";
|
||||
}
|
||||
.tinymce-mobile-icon-cancel-circle::before {
|
||||
content: "\e5c9";
|
||||
}
|
||||
.tinymce-mobile-icon-full-dot::before {
|
||||
content: "\e061";
|
||||
}
|
||||
.tinymce-mobile-icon-align-center::before {
|
||||
content: "\e234";
|
||||
}
|
||||
.tinymce-mobile-icon-align-left::before {
|
||||
content: "\e236";
|
||||
}
|
||||
.tinymce-mobile-icon-align-right::before {
|
||||
content: "\e237";
|
||||
}
|
||||
.tinymce-mobile-icon-bold::before {
|
||||
content: "\e238";
|
||||
}
|
||||
.tinymce-mobile-icon-italic::before {
|
||||
content: "\e23f";
|
||||
}
|
||||
.tinymce-mobile-icon-unordered-list::before {
|
||||
content: "\e241";
|
||||
}
|
||||
.tinymce-mobile-icon-ordered-list::before {
|
||||
content: "\e242";
|
||||
}
|
||||
.tinymce-mobile-icon-font-size::before {
|
||||
content: "\e245";
|
||||
}
|
||||
.tinymce-mobile-icon-underline::before {
|
||||
content: "\e249";
|
||||
}
|
||||
.tinymce-mobile-icon-link::before {
|
||||
content: "\e157";
|
||||
}
|
||||
.tinymce-mobile-icon-unlink::before {
|
||||
content: "\eca2";
|
||||
}
|
||||
.tinymce-mobile-icon-color::before {
|
||||
content: "\e891";
|
||||
}
|
||||
.tinymce-mobile-icon-previous::before {
|
||||
content: "\e314";
|
||||
}
|
||||
.tinymce-mobile-icon-next::before {
|
||||
content: "\e315";
|
||||
}
|
||||
.tinymce-mobile-icon-large-font::before,
|
||||
.tinymce-mobile-icon-style-formats::before {
|
||||
content: "\e264";
|
||||
}
|
||||
.tinymce-mobile-icon-undo::before {
|
||||
content: "\e166";
|
||||
}
|
||||
.tinymce-mobile-icon-redo::before {
|
||||
content: "\e15a";
|
||||
}
|
||||
.tinymce-mobile-icon-removeformat::before {
|
||||
content: "\e239";
|
||||
}
|
||||
.tinymce-mobile-icon-small-font::before {
|
||||
content: "\e906";
|
||||
}
|
||||
.tinymce-mobile-icon-readonly-back::before,
|
||||
.tinymce-mobile-format-matches::after {
|
||||
content: "\e5ca";
|
||||
}
|
||||
.tinymce-mobile-icon-small-heading::before {
|
||||
content: "small";
|
||||
}
|
||||
.tinymce-mobile-icon-large-heading::before {
|
||||
content: "large";
|
||||
}
|
||||
.tinymce-mobile-icon-small-heading::before,
|
||||
.tinymce-mobile-icon-large-heading::before {
|
||||
font-family: sans-serif;
|
||||
font-size: 80%;
|
||||
}
|
||||
.tinymce-mobile-mask-edit-icon::before {
|
||||
content: "\e254";
|
||||
}
|
||||
.tinymce-mobile-icon-back::before {
|
||||
content: "\e5c4";
|
||||
}
|
||||
.tinymce-mobile-icon-heading::before {
|
||||
/* TODO: Translate */
|
||||
content: "Headings";
|
||||
font-family: sans-serif;
|
||||
font-size: 80%;
|
||||
font-weight: bold;
|
||||
}
|
||||
.tinymce-mobile-icon-h1::before {
|
||||
content: "H1";
|
||||
font-weight: bold;
|
||||
}
|
||||
.tinymce-mobile-icon-h2::before {
|
||||
content: "H2";
|
||||
font-weight: bold;
|
||||
}
|
||||
.tinymce-mobile-icon-h3::before {
|
||||
content: "H3";
|
||||
font-weight: bold;
|
||||
}
|
||||
.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background: rgba(51, 51, 51, 0.5);
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container {
|
||||
align-items: center;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: sans-serif;
|
||||
font-size: 1em;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .mixin-menu-item {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
height: 2.1em;
|
||||
width: 2.1em;
|
||||
}
|
||||
.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
font-size: 1em;
|
||||
}
|
||||
@media only screen and (min-device-width:700px) {
|
||||
.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section .tinymce-mobile-mask-tap-icon {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
height: 2.1em;
|
||||
width: 2.1em;
|
||||
background-color: white;
|
||||
color: #207ab7;
|
||||
}
|
||||
.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section .tinymce-mobile-mask-tap-icon::before {
|
||||
content: "\e900";
|
||||
font-family: 'tinymce-mobile', sans-serif;
|
||||
}
|
||||
.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section:not(.tinymce-mobile-mask-tap-icon-selected) .tinymce-mobile-mask-tap-icon {
|
||||
z-index: 2;
|
||||
}
|
||||
.tinymce-mobile-android-container.tinymce-mobile-android-maximized {
|
||||
background: #ffffff;
|
||||
border: none;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
.tinymce-mobile-android-container:not(.tinymce-mobile-android-maximized) {
|
||||
position: relative;
|
||||
}
|
||||
.tinymce-mobile-android-container .tinymce-mobile-editor-socket {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
}
|
||||
.tinymce-mobile-android-container .tinymce-mobile-editor-socket iframe {
|
||||
display: flex !important;
|
||||
flex-grow: 1;
|
||||
height: auto !important;
|
||||
}
|
||||
.tinymce-mobile-android-scroll-reload {
|
||||
overflow: hidden;
|
||||
}
|
||||
:not(.tinymce-mobile-readonly-mode) > .tinymce-mobile-android-selection-context-toolbar {
|
||||
margin-top: 23px;
|
||||
}
|
||||
.tinymce-mobile-toolstrip {
|
||||
background: #fff;
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
z-index: 1;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar {
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #cccccc;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
height: 2.5em;
|
||||
width: 100%;
|
||||
/* Make it no larger than the toolstrip, so that it needs to scroll */
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group > div {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group.tinymce-mobile-exit-container {
|
||||
background: #f44336;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group.tinymce-mobile-toolbar-scrollable-group {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item {
|
||||
padding-left: 0.5em;
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item.tinymce-mobile-toolbar-button {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 80%;
|
||||
margin-left: 2px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item.tinymce-mobile-toolbar-button.tinymce-mobile-toolbar-button-selected {
|
||||
background: #c8cbcf;
|
||||
color: #cccccc;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group:first-of-type,
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group:last-of-type {
|
||||
background: #207ab7;
|
||||
color: #eceff1;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar {
|
||||
/* Note, this file is imported inside .tinymce-mobile-context-toolbar, so that prefix is on everything here. */
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
padding-bottom: 0.4em;
|
||||
padding-top: 0.4em;
|
||||
/* Make any buttons appearing on the left and right display in the centre (e.g. color edges) */
|
||||
/* For widgets like the colour picker, use the whole height */
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog {
|
||||
display: flex;
|
||||
min-height: 1.5em;
|
||||
overflow: hidden;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
transition: left cubic-bezier(0.4, 0, 1, 1) 0.15s;
|
||||
width: 100%;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen input {
|
||||
font-family: Sans-serif;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-input-container {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
position: relative;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-input-container .tinymce-mobile-input-container-x {
|
||||
-ms-grid-row-align: center;
|
||||
align-self: center;
|
||||
background: inherit;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
color: #888;
|
||||
font-size: 0.6em;
|
||||
font-weight: bold;
|
||||
height: 100%;
|
||||
padding-right: 2px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-input-container.tinymce-mobile-input-container-empty .tinymce-mobile-input-container-x {
|
||||
display: none;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-previous,
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-next {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-previous::before,
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-next::before {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
font-weight: bold;
|
||||
height: 100%;
|
||||
padding-left: 0.5em;
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-previous.tinymce-mobile-toolbar-navigation-disabled::before,
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-next.tinymce-mobile-toolbar-navigation-disabled::before {
|
||||
visibility: hidden;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-dot-item {
|
||||
color: #cccccc;
|
||||
font-size: 10px;
|
||||
line-height: 10px;
|
||||
margin: 0 2px;
|
||||
padding-top: 3px;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-dot-item.tinymce-mobile-dot-active {
|
||||
color: #c8cbcf;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-large-font::before,
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-large-heading::before {
|
||||
margin-left: 0.5em;
|
||||
margin-right: 0.9em;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-small-font::before,
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-small-heading::before {
|
||||
margin-left: 0.9em;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding: 0.28em 0;
|
||||
position: relative;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-size-container {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
height: 100%;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-size-container .tinymce-mobile-slider-size-line {
|
||||
background: #cccccc;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
height: 0.2em;
|
||||
margin-bottom: 0.3em;
|
||||
margin-top: 0.3em;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container {
|
||||
padding-left: 2em;
|
||||
padding-right: 2em;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-slider-gradient-container {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
height: 100%;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-slider-gradient-container .tinymce-mobile-slider-gradient {
|
||||
background: linear-gradient(to right, hsl(0, 100%, 50%) 0%, hsl(60, 100%, 50%) 17%, hsl(120, 100%, 50%) 33%, hsl(180, 100%, 50%) 50%, hsl(240, 100%, 50%) 67%, hsl(300, 100%, 50%) 83%, hsl(0, 100%, 50%) 100%);
|
||||
display: flex;
|
||||
flex: 1;
|
||||
height: 0.2em;
|
||||
margin-bottom: 0.3em;
|
||||
margin-top: 0.3em;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-hue-slider-black {
|
||||
/* Not part of theming */
|
||||
background: black;
|
||||
height: 0.2em;
|
||||
margin-bottom: 0.3em;
|
||||
margin-top: 0.3em;
|
||||
width: 1.2em;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-hue-slider-white {
|
||||
/* Not part of theming */
|
||||
background: white;
|
||||
height: 0.2em;
|
||||
margin-bottom: 0.3em;
|
||||
margin-top: 0.3em;
|
||||
width: 1.2em;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-thumb {
|
||||
/* vertically centering trick (margin: auto, top: 0, bottom: 0). On iOS and Safari, if you leave
|
||||
* out these values, then it shows the thumb at the top of the spectrum. This is probably because it is
|
||||
* absolutely positioned with only a left value, and not a top. Note, on Chrome it seems to be fine without
|
||||
* this approach.
|
||||
*/
|
||||
align-items: center;
|
||||
background-clip: padding-box;
|
||||
background-color: #455a64;
|
||||
border: 0.5em solid rgba(136, 136, 136, 0);
|
||||
border-radius: 3em;
|
||||
bottom: 0;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
height: 0.5em;
|
||||
justify-content: center;
|
||||
left: -10px;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
transition: border 120ms cubic-bezier(0.39, 0.58, 0.57, 1);
|
||||
width: 0.5em;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-thumb.tinymce-mobile-thumb-active {
|
||||
border: 0.5em solid rgba(136, 136, 136, 0.39);
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serializer-wrapper,
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group > div {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serializer-wrapper {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item:not(.tinymce-mobile-serialised-dialog) {
|
||||
height: 100%;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-dot-container {
|
||||
display: flex;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group input {
|
||||
background: #ffffff;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
color: #455a64;
|
||||
flex-grow: 1;
|
||||
font-size: 0.85em;
|
||||
padding-bottom: 0.1em;
|
||||
padding-left: 5px;
|
||||
padding-top: 0.1em;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group input::-webkit-input-placeholder {
|
||||
/* WebKit, Blink, Edge */
|
||||
color: #888;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group input::placeholder {
|
||||
/* WebKit, Blink, Edge */
|
||||
color: #888;
|
||||
}
|
||||
/* dropup */
|
||||
.tinymce-mobile-dropup {
|
||||
background: white;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
.tinymce-mobile-dropup.tinymce-mobile-dropup-shrinking {
|
||||
transition: height 0.3s ease-out;
|
||||
}
|
||||
.tinymce-mobile-dropup.tinymce-mobile-dropup-growing {
|
||||
transition: height 0.3s ease-in;
|
||||
}
|
||||
.tinymce-mobile-dropup.tinymce-mobile-dropup-closed {
|
||||
flex-grow: 0;
|
||||
}
|
||||
.tinymce-mobile-dropup.tinymce-mobile-dropup-open:not(.tinymce-mobile-dropup-growing) {
|
||||
flex-grow: 1;
|
||||
}
|
||||
/* TODO min-height for device size and orientation */
|
||||
.tinymce-mobile-ios-container .tinymce-mobile-dropup:not(.tinymce-mobile-dropup-closed) {
|
||||
min-height: 200px;
|
||||
}
|
||||
@media only screen and (orientation: landscape) {
|
||||
.tinymce-mobile-dropup:not(.tinymce-mobile-dropup-closed) {
|
||||
min-height: 200px;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {
|
||||
.tinymce-mobile-ios-container .tinymce-mobile-dropup:not(.tinymce-mobile-dropup-closed) {
|
||||
min-height: 150px;
|
||||
}
|
||||
}
|
||||
/* styles menu */
|
||||
.tinymce-mobile-styles-menu {
|
||||
font-family: sans-serif;
|
||||
outline: 4px solid black;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
.tinymce-mobile-styles-menu [role="menu"] {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
.tinymce-mobile-styles-menu [role="menu"].transitioning {
|
||||
transition: transform 0.5s ease-in-out;
|
||||
}
|
||||
.tinymce-mobile-styles-menu .tinymce-mobile-styles-item {
|
||||
border-bottom: 1px solid #ddd;
|
||||
color: #455a64;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
padding: 1em 1em;
|
||||
position: relative;
|
||||
}
|
||||
.tinymce-mobile-styles-menu .tinymce-mobile-styles-collapser .tinymce-mobile-styles-collapse-icon::before {
|
||||
color: #455a64;
|
||||
content: "\e314";
|
||||
font-family: 'tinymce-mobile', sans-serif;
|
||||
}
|
||||
.tinymce-mobile-styles-menu .tinymce-mobile-styles-item.tinymce-mobile-styles-item-is-menu::after {
|
||||
color: #455a64;
|
||||
content: "\e315";
|
||||
font-family: 'tinymce-mobile', sans-serif;
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
.tinymce-mobile-styles-menu .tinymce-mobile-styles-item.tinymce-mobile-format-matches::after {
|
||||
font-family: 'tinymce-mobile', sans-serif;
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
.tinymce-mobile-styles-menu .tinymce-mobile-styles-separator,
|
||||
.tinymce-mobile-styles-menu .tinymce-mobile-styles-collapser {
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
border-top: #455a64;
|
||||
color: #455a64;
|
||||
display: flex;
|
||||
min-height: 2.5em;
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
}
|
||||
.tinymce-mobile-styles-menu [data-transitioning-destination="before"][data-transitioning-state],
|
||||
.tinymce-mobile-styles-menu [data-transitioning-state="before"] {
|
||||
transform: translate(-100%);
|
||||
}
|
||||
.tinymce-mobile-styles-menu [data-transitioning-destination="current"][data-transitioning-state],
|
||||
.tinymce-mobile-styles-menu [data-transitioning-state="current"] {
|
||||
transform: translate(0%);
|
||||
}
|
||||
.tinymce-mobile-styles-menu [data-transitioning-destination="after"][data-transitioning-state],
|
||||
.tinymce-mobile-styles-menu [data-transitioning-state="after"] {
|
||||
transform: translate(100%);
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'tinymce-mobile';
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
src: url('fonts/tinymce-mobile.woff?8x92w3') format('woff');
|
||||
}
|
||||
@media (min-device-width: 700px) {
|
||||
.tinymce-mobile-outer-container,
|
||||
.tinymce-mobile-outer-container input {
|
||||
font-size: 25px;
|
||||
}
|
||||
}
|
||||
@media (max-device-width: 700px) {
|
||||
.tinymce-mobile-outer-container,
|
||||
.tinymce-mobile-outer-container input {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
.tinymce-mobile-icon {
|
||||
font-family: 'tinymce-mobile', sans-serif;
|
||||
}
|
||||
.mixin-flex-and-centre {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.mixin-flex-bar {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
.tinymce-mobile-outer-container .tinymce-mobile-editor-socket iframe {
|
||||
background-color: #fff;
|
||||
width: 100%;
|
||||
}
|
||||
.tinymce-mobile-editor-socket .tinymce-mobile-mask-edit-icon {
|
||||
/* Note, on the iPod touch in landscape, this isn't visible when the navbar appears */
|
||||
background-color: #207ab7;
|
||||
border-radius: 50%;
|
||||
bottom: 1em;
|
||||
color: white;
|
||||
font-size: 1em;
|
||||
height: 2.1em;
|
||||
position: fixed;
|
||||
right: 2em;
|
||||
width: 2.1em;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
@media only screen and (min-device-width:700px) {
|
||||
.tinymce-mobile-editor-socket .tinymce-mobile-mask-edit-icon {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
.tinymce-mobile-outer-container:not(.tinymce-mobile-fullscreen-maximized) .tinymce-mobile-editor-socket {
|
||||
height: 300px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.tinymce-mobile-outer-container:not(.tinymce-mobile-fullscreen-maximized) .tinymce-mobile-editor-socket iframe {
|
||||
height: 100%;
|
||||
}
|
||||
.tinymce-mobile-outer-container:not(.tinymce-mobile-fullscreen-maximized) .tinymce-mobile-toolstrip {
|
||||
display: none;
|
||||
}
|
||||
/*
|
||||
Note, that if you don't include this (::-webkit-file-upload-button), the toolbar width gets
|
||||
increased and the whole body becomes scrollable. It's important!
|
||||
*/
|
||||
input[type="file"]::-webkit-file-upload-button {
|
||||
display: none;
|
||||
}
|
||||
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {
|
||||
.tinymce-mobile-ios-container .tinymce-mobile-editor-socket .tinymce-mobile-mask-edit-icon {
|
||||
bottom: 50%;
|
||||
}
|
||||
}
|
||||
7
public/tinymce/skins/ui/oxide-dark/skin.mobile.min.css
vendored
Normal file
7
public/tinymce/skins/ui/oxide-dark/skin.mobile.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
695
public/tinymce/skins/ui/oxide/content.css
Normal file
695
public/tinymce/skins/ui/oxide/content.css
Normal file
@@ -0,0 +1,695 @@
|
||||
/**
|
||||
* Copyright (c) Tiny Technologies, Inc. All rights reserved.
|
||||
* Licensed under the LGPL or a commercial license.
|
||||
* For LGPL see License.txt in the project root for license information.
|
||||
* For commercial licenses see https://www.tiny.cloud/
|
||||
*/
|
||||
.mce-content-body .mce-item-anchor {
|
||||
background: transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'8'%20height%3D'12'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M0%200L8%200%208%2012%204.09117821%209%200%2012z'%2F%3E%3C%2Fsvg%3E%0A") no-repeat center;
|
||||
cursor: default;
|
||||
display: inline-block;
|
||||
height: 12px !important;
|
||||
padding: 0 2px;
|
||||
-webkit-user-modify: read-only;
|
||||
-moz-user-modify: read-only;
|
||||
-webkit-user-select: all;
|
||||
-moz-user-select: all;
|
||||
-ms-user-select: all;
|
||||
user-select: all;
|
||||
width: 8px !important;
|
||||
}
|
||||
.mce-content-body .mce-item-anchor[data-mce-selected] {
|
||||
outline-offset: 1px;
|
||||
}
|
||||
.tox-comments-visible .tox-comment {
|
||||
background-color: #fff0b7;
|
||||
}
|
||||
.tox-comments-visible .tox-comment--active {
|
||||
background-color: #ffe168;
|
||||
}
|
||||
.tox-checklist > li:not(.tox-checklist--hidden) {
|
||||
list-style: none;
|
||||
margin: 0.25em 0;
|
||||
}
|
||||
.tox-checklist > li:not(.tox-checklist--hidden)::before {
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-unchecked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2215%22%20height%3D%2215%22%20x%3D%22.5%22%20y%3D%22.5%22%20fill-rule%3D%22nonzero%22%20stroke%3D%22%234C4C4C%22%20rx%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");
|
||||
background-size: 100%;
|
||||
content: '';
|
||||
cursor: pointer;
|
||||
height: 1em;
|
||||
margin-left: -1.5em;
|
||||
margin-top: 0.125em;
|
||||
position: absolute;
|
||||
width: 1em;
|
||||
}
|
||||
.tox-checklist li:not(.tox-checklist--hidden).tox-checklist--checked::before {
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-checked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%234099FF%22%20fill-rule%3D%22nonzero%22%20rx%3D%222%22%2F%3E%3Cpath%20id%3D%22Path%22%20fill%3D%22%23FFF%22%20fill-rule%3D%22nonzero%22%20d%3D%22M11.5703186%2C3.14417309%20C11.8516238%2C2.73724603%2012.4164781%2C2.62829933%2012.83558%2C2.89774797%20C13.260121%2C3.17069355%2013.3759736%2C3.72932262%2013.0909105%2C4.14168582%20L7.7580587%2C11.8560195%20C7.43776896%2C12.3193404%206.76483983%2C12.3852142%206.35607322%2C11.9948725%20L3.02491697%2C8.8138662%20C2.66090143%2C8.46625845%202.65798871%2C7.89594698%203.01850234%2C7.54483354%20C3.373942%2C7.19866177%203.94940006%2C7.19592841%204.30829608%2C7.5386474%20L6.85276923%2C9.9684299%20L11.5703186%2C3.14417309%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");
|
||||
}
|
||||
[dir=rtl] .tox-checklist > li:not(.tox-checklist--hidden)::before {
|
||||
margin-left: 0;
|
||||
margin-right: -1.5em;
|
||||
}
|
||||
/* stylelint-disable */
|
||||
/* http://prismjs.com/ */
|
||||
/**
|
||||
* prism.js default theme for JavaScript, CSS and HTML
|
||||
* Based on dabblet (http://dabblet.com)
|
||||
* @author Lea Verou
|
||||
*/
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
color: black;
|
||||
background: none;
|
||||
text-shadow: 0 1px white;
|
||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
font-size: 1em;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
line-height: 1.5;
|
||||
-moz-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-webkit-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
pre[class*="language-"]::-moz-selection,
|
||||
pre[class*="language-"] ::-moz-selection,
|
||||
code[class*="language-"]::-moz-selection,
|
||||
code[class*="language-"] ::-moz-selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
pre[class*="language-"]::selection,
|
||||
pre[class*="language-"] ::selection,
|
||||
code[class*="language-"]::selection,
|
||||
code[class*="language-"] ::selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
@media print {
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
/* Code blocks */
|
||||
pre[class*="language-"] {
|
||||
padding: 1em;
|
||||
margin: 0.5em 0;
|
||||
overflow: auto;
|
||||
}
|
||||
:not(pre) > code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
background: #f5f2f0;
|
||||
}
|
||||
/* Inline code */
|
||||
:not(pre) > code[class*="language-"] {
|
||||
padding: 0.1em;
|
||||
border-radius: 0.3em;
|
||||
white-space: normal;
|
||||
}
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: slategray;
|
||||
}
|
||||
.token.punctuation {
|
||||
color: #999;
|
||||
}
|
||||
.namespace {
|
||||
opacity: 0.7;
|
||||
}
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.boolean,
|
||||
.token.number,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: #905;
|
||||
}
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: #690;
|
||||
}
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string {
|
||||
color: #9a6e3a;
|
||||
background: hsla(0, 0%, 100%, 0.5);
|
||||
}
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.keyword {
|
||||
color: #07a;
|
||||
}
|
||||
.token.function,
|
||||
.token.class-name {
|
||||
color: #DD4A68;
|
||||
}
|
||||
.token.regex,
|
||||
.token.important,
|
||||
.token.variable {
|
||||
color: #e90;
|
||||
}
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
/* stylelint-enable */
|
||||
.mce-content-body {
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.mce-content-body .mce-visual-caret {
|
||||
background-color: black;
|
||||
background-color: currentColor;
|
||||
position: absolute;
|
||||
}
|
||||
.mce-content-body .mce-visual-caret-hidden {
|
||||
display: none;
|
||||
}
|
||||
.mce-content-body *[data-mce-caret] {
|
||||
left: -1000px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
right: auto;
|
||||
top: 0;
|
||||
}
|
||||
.mce-content-body .mce-offscreen-selection {
|
||||
left: -2000000px;
|
||||
max-width: 1000000px;
|
||||
position: absolute;
|
||||
}
|
||||
.mce-content-body *[contentEditable=false] {
|
||||
cursor: default;
|
||||
}
|
||||
.mce-content-body *[contentEditable=true] {
|
||||
cursor: text;
|
||||
}
|
||||
.tox-cursor-format-painter {
|
||||
cursor: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M15%2C6%20C15%2C5.45%2014.55%2C5%2014%2C5%20L6%2C5%20C5.45%2C5%205%2C5.45%205%2C6%20L5%2C10%20C5%2C10.55%205.45%2C11%206%2C11%20L14%2C11%20C14.55%2C11%2015%2C10.55%2015%2C10%20L15%2C9%20L16%2C9%20L16%2C12%20L9%2C12%20L9%2C19%20C9%2C19.55%209.45%2C20%2010%2C20%20L11%2C20%20C11.55%2C20%2012%2C19.55%2012%2C19%20L12%2C14%20L18%2C14%20L18%2C7%20L15%2C7%20L15%2C6%20Z%22%2F%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M1%2C1%20L8.25%2C1%20C8.66421356%2C1%209%2C1.33578644%209%2C1.75%20L9%2C1.75%20C9%2C2.16421356%208.66421356%2C2.5%208.25%2C2.5%20L2.5%2C2.5%20L2.5%2C8.25%20C2.5%2C8.66421356%202.16421356%2C9%201.75%2C9%20L1.75%2C9%20C1.33578644%2C9%201%2C8.66421356%201%2C8.25%20L1%2C1%20Z%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A"), default;
|
||||
}
|
||||
.mce-content-body figure.align-left {
|
||||
float: left;
|
||||
}
|
||||
.mce-content-body figure.align-right {
|
||||
float: right;
|
||||
}
|
||||
.mce-content-body figure.image.align-center {
|
||||
display: table;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.mce-preview-object {
|
||||
border: 1px solid gray;
|
||||
display: inline-block;
|
||||
line-height: 0;
|
||||
margin: 0 2px 0 2px;
|
||||
position: relative;
|
||||
}
|
||||
.mce-preview-object .mce-shim {
|
||||
background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.mce-preview-object[data-mce-selected="2"] .mce-shim {
|
||||
display: none;
|
||||
}
|
||||
.mce-object {
|
||||
background: transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M4%203h16a1%201%200%200%201%201%201v16a1%201%200%200%201-1%201H4a1%201%200%200%201-1-1V4a1%201%200%200%201%201-1zm1%202v14h14V5H5zm4.79%202.565l5.64%204.028a.5.5%200%200%201%200%20.814l-5.64%204.028a.5.5%200%200%201-.79-.407V7.972a.5.5%200%200%201%20.79-.407z%22%2F%3E%3C%2Fsvg%3E%0A") no-repeat center;
|
||||
border: 1px dashed #aaa;
|
||||
}
|
||||
.mce-pagebreak {
|
||||
border: 1px dashed #aaa;
|
||||
cursor: default;
|
||||
display: block;
|
||||
height: 5px;
|
||||
margin-top: 15px;
|
||||
page-break-before: always;
|
||||
width: 100%;
|
||||
}
|
||||
@media print {
|
||||
.mce-pagebreak {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
.tiny-pageembed .mce-shim {
|
||||
background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.tiny-pageembed[data-mce-selected="2"] .mce-shim {
|
||||
display: none;
|
||||
}
|
||||
.tiny-pageembed {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
.tiny-pageembed--21by9,
|
||||
.tiny-pageembed--16by9,
|
||||
.tiny-pageembed--4by3,
|
||||
.tiny-pageembed--1by1 {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
.tiny-pageembed--21by9 {
|
||||
padding-top: 42.857143%;
|
||||
}
|
||||
.tiny-pageembed--16by9 {
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
.tiny-pageembed--4by3 {
|
||||
padding-top: 75%;
|
||||
}
|
||||
.tiny-pageembed--1by1 {
|
||||
padding-top: 100%;
|
||||
}
|
||||
.tiny-pageembed--21by9 iframe,
|
||||
.tiny-pageembed--16by9 iframe,
|
||||
.tiny-pageembed--4by3 iframe,
|
||||
.tiny-pageembed--1by1 iframe {
|
||||
border: 0;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.mce-content-body[data-mce-placeholder] {
|
||||
position: relative;
|
||||
}
|
||||
.mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before {
|
||||
color: rgba(34, 47, 62, 0.7);
|
||||
content: attr(data-mce-placeholder);
|
||||
position: absolute;
|
||||
}
|
||||
.mce-content-body:not([dir=rtl])[data-mce-placeholder]:not(.mce-visualblocks)::before {
|
||||
left: 1px;
|
||||
}
|
||||
.mce-content-body[dir=rtl][data-mce-placeholder]:not(.mce-visualblocks)::before {
|
||||
right: 1px;
|
||||
}
|
||||
.mce-content-body div.mce-resizehandle {
|
||||
background-color: #4099ff;
|
||||
border-color: #4099ff;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
box-sizing: border-box;
|
||||
height: 10px;
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
z-index: 10000;
|
||||
}
|
||||
.mce-content-body div.mce-resizehandle:hover {
|
||||
background-color: #4099ff;
|
||||
}
|
||||
.mce-content-body div.mce-resizehandle:nth-of-type(1) {
|
||||
cursor: nwse-resize;
|
||||
}
|
||||
.mce-content-body div.mce-resizehandle:nth-of-type(2) {
|
||||
cursor: nesw-resize;
|
||||
}
|
||||
.mce-content-body div.mce-resizehandle:nth-of-type(3) {
|
||||
cursor: nwse-resize;
|
||||
}
|
||||
.mce-content-body div.mce-resizehandle:nth-of-type(4) {
|
||||
cursor: nesw-resize;
|
||||
}
|
||||
.mce-content-body .mce-clonedresizable {
|
||||
opacity: 0.5;
|
||||
outline: 1px dashed black;
|
||||
position: absolute;
|
||||
z-index: 10000;
|
||||
}
|
||||
.mce-content-body .mce-resize-helper {
|
||||
background: #555;
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
border: 1px;
|
||||
border-radius: 3px;
|
||||
color: white;
|
||||
display: none;
|
||||
font-family: sans-serif;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
margin: 5px 10px;
|
||||
padding: 5px;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
z-index: 10001;
|
||||
}
|
||||
.tox-rtc-user-selection {
|
||||
position: relative;
|
||||
}
|
||||
.tox-rtc-user-cursor {
|
||||
bottom: 0;
|
||||
cursor: default;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 2px;
|
||||
}
|
||||
.tox-rtc-user-cursor::before {
|
||||
background-color: inherit;
|
||||
border-radius: 50%;
|
||||
content: '';
|
||||
display: block;
|
||||
height: 8px;
|
||||
position: absolute;
|
||||
right: -3px;
|
||||
top: -3px;
|
||||
width: 8px;
|
||||
}
|
||||
.tox-rtc-user-cursor:hover::after {
|
||||
background-color: inherit;
|
||||
border-radius: 100px;
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
content: attr(data-user);
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
left: -5px;
|
||||
min-height: 8px;
|
||||
min-width: 8px;
|
||||
padding: 0 12px;
|
||||
position: absolute;
|
||||
top: -11px;
|
||||
white-space: nowrap;
|
||||
z-index: 1000;
|
||||
}
|
||||
.tox-rtc-user-selection--1 .tox-rtc-user-cursor {
|
||||
background-color: #2dc26b;
|
||||
}
|
||||
.tox-rtc-user-selection--2 .tox-rtc-user-cursor {
|
||||
background-color: #e03e2d;
|
||||
}
|
||||
.tox-rtc-user-selection--3 .tox-rtc-user-cursor {
|
||||
background-color: #f1c40f;
|
||||
}
|
||||
.tox-rtc-user-selection--4 .tox-rtc-user-cursor {
|
||||
background-color: #3598db;
|
||||
}
|
||||
.tox-rtc-user-selection--5 .tox-rtc-user-cursor {
|
||||
background-color: #b96ad9;
|
||||
}
|
||||
.tox-rtc-user-selection--6 .tox-rtc-user-cursor {
|
||||
background-color: #e67e23;
|
||||
}
|
||||
.tox-rtc-user-selection--7 .tox-rtc-user-cursor {
|
||||
background-color: #aaa69d;
|
||||
}
|
||||
.tox-rtc-user-selection--8 .tox-rtc-user-cursor {
|
||||
background-color: #f368e0;
|
||||
}
|
||||
.tox-rtc-remote-image {
|
||||
background: #eaeaea url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2236%22%20height%3D%2212%22%20viewBox%3D%220%200%2036%2012%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Ccircle%20cx%3D%226%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%20%20%3Ccircle%20cx%3D%2218%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20begin%3D%22.33s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%20%20%3Ccircle%20cx%3D%2230%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20begin%3D%22.66s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%3C%2Fsvg%3E%0A") no-repeat center center;
|
||||
border: 1px solid #ccc;
|
||||
min-height: 240px;
|
||||
min-width: 320px;
|
||||
}
|
||||
.mce-match-marker {
|
||||
background: #aaa;
|
||||
color: #fff;
|
||||
}
|
||||
.mce-match-marker-selected {
|
||||
background: #39f;
|
||||
color: #fff;
|
||||
}
|
||||
.mce-match-marker-selected::-moz-selection {
|
||||
background: #39f;
|
||||
color: #fff;
|
||||
}
|
||||
.mce-match-marker-selected::selection {
|
||||
background: #39f;
|
||||
color: #fff;
|
||||
}
|
||||
.mce-content-body img[data-mce-selected],
|
||||
.mce-content-body table[data-mce-selected] {
|
||||
outline: 3px solid #b4d7ff;
|
||||
}
|
||||
.mce-content-body hr[data-mce-selected] {
|
||||
outline: 3px solid #b4d7ff;
|
||||
outline-offset: 1px;
|
||||
}
|
||||
.mce-content-body *[contentEditable=false] *[contentEditable=true]:focus {
|
||||
outline: 3px solid #b4d7ff;
|
||||
}
|
||||
.mce-content-body *[contentEditable=false] *[contentEditable=true]:hover {
|
||||
outline: 3px solid #b4d7ff;
|
||||
}
|
||||
.mce-content-body *[contentEditable=false][data-mce-selected] {
|
||||
cursor: not-allowed;
|
||||
outline: 3px solid #b4d7ff;
|
||||
}
|
||||
.mce-content-body.mce-content-readonly *[contentEditable=true]:focus,
|
||||
.mce-content-body.mce-content-readonly *[contentEditable=true]:hover {
|
||||
outline: none;
|
||||
}
|
||||
.mce-content-body *[data-mce-selected="inline-boundary"] {
|
||||
background-color: #b4d7ff;
|
||||
}
|
||||
.mce-content-body .mce-edit-focus {
|
||||
outline: 3px solid #b4d7ff;
|
||||
}
|
||||
.mce-content-body td[data-mce-selected],
|
||||
.mce-content-body th[data-mce-selected] {
|
||||
background-color: #b4d7ff !important;
|
||||
}
|
||||
.mce-content-body td[data-mce-selected]::-moz-selection,
|
||||
.mce-content-body th[data-mce-selected]::-moz-selection {
|
||||
background: none;
|
||||
}
|
||||
.mce-content-body td[data-mce-selected]::selection,
|
||||
.mce-content-body th[data-mce-selected]::selection {
|
||||
background: none;
|
||||
}
|
||||
.mce-content-body td[data-mce-selected] *,
|
||||
.mce-content-body th[data-mce-selected] * {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.mce-content-body img::-moz-selection {
|
||||
background: none;
|
||||
}
|
||||
.mce-content-body img::selection {
|
||||
background: none;
|
||||
}
|
||||
.ephox-snooker-resizer-bar {
|
||||
background-color: #b4d7ff;
|
||||
opacity: 0;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.ephox-snooker-resizer-cols {
|
||||
cursor: col-resize;
|
||||
}
|
||||
.ephox-snooker-resizer-rows {
|
||||
cursor: row-resize;
|
||||
}
|
||||
.ephox-snooker-resizer-bar.ephox-snooker-resizer-bar-dragging {
|
||||
opacity: 1;
|
||||
}
|
||||
.mce-spellchecker-word {
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%23ff0000'%20fill%3D'none'%20stroke-linecap%3D'round'%20stroke-opacity%3D'.75'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A");
|
||||
background-position: 0 calc(100% + 1px);
|
||||
background-repeat: repeat-x;
|
||||
background-size: auto 6px;
|
||||
cursor: default;
|
||||
height: 2rem;
|
||||
}
|
||||
.mce-spellchecker-grammar {
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%2300A835'%20fill%3D'none'%20stroke-linecap%3D'round'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A");
|
||||
background-position: 0 calc(100% + 1px);
|
||||
background-repeat: repeat-x;
|
||||
background-size: auto 6px;
|
||||
cursor: default;
|
||||
}
|
||||
.mce-toc {
|
||||
border: 1px solid gray;
|
||||
}
|
||||
.mce-toc h2 {
|
||||
margin: 4px;
|
||||
}
|
||||
.mce-toc li {
|
||||
list-style-type: none;
|
||||
}
|
||||
.mce-item-table,
|
||||
.mce-item-table td,
|
||||
.mce-item-table th,
|
||||
.mce-item-table caption {
|
||||
border: 1px dashed #bbb;
|
||||
}
|
||||
.mce-visualblocks p,
|
||||
.mce-visualblocks h1,
|
||||
.mce-visualblocks h2,
|
||||
.mce-visualblocks h3,
|
||||
.mce-visualblocks h4,
|
||||
.mce-visualblocks h5,
|
||||
.mce-visualblocks h6,
|
||||
.mce-visualblocks div:not([data-mce-bogus]),
|
||||
.mce-visualblocks section,
|
||||
.mce-visualblocks article,
|
||||
.mce-visualblocks blockquote,
|
||||
.mce-visualblocks address,
|
||||
.mce-visualblocks pre,
|
||||
.mce-visualblocks figure,
|
||||
.mce-visualblocks figcaption,
|
||||
.mce-visualblocks hgroup,
|
||||
.mce-visualblocks aside,
|
||||
.mce-visualblocks ul,
|
||||
.mce-visualblocks ol,
|
||||
.mce-visualblocks dl {
|
||||
background-repeat: no-repeat;
|
||||
border: 1px dashed #bbb;
|
||||
margin-left: 3px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
.mce-visualblocks p {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhCQAJAJEAAAAAAP///7u7u////yH5BAEAAAMALAAAAAAJAAkAAAIQnG+CqCN/mlyvsRUpThG6AgA7);
|
||||
}
|
||||
.mce-visualblocks h1 {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGu1JuxHoAfRNRW3TWXyF2YiRUAOw==);
|
||||
}
|
||||
.mce-visualblocks h2 {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8Hybbx4oOuqgTynJd6bGlWg3DkJzoaUAAAOw==);
|
||||
}
|
||||
.mce-visualblocks h3 {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIZjI8Hybbx4oOuqgTynJf2Ln2NOHpQpmhAAQA7);
|
||||
}
|
||||
.mce-visualblocks h4 {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxInR0zqeAdhtJlXwV1oCll2HaWgAAOw==);
|
||||
}
|
||||
.mce-visualblocks h5 {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjane4iq5GlW05GgIkIZUAAAOw==);
|
||||
}
|
||||
.mce-visualblocks h6 {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjan04jep1iZ1XRlAo5bVgAAOw==);
|
||||
}
|
||||
.mce-visualblocks div:not([data-mce-bogus]) {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhEgAKAIABALu7u////yH5BAEAAAEALAAAAAASAAoAAAIfjI9poI0cgDywrhuxfbrzDEbQM2Ei5aRjmoySW4pAAQA7);
|
||||
}
|
||||
.mce-visualblocks section {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhKAAKAIABALu7u////yH5BAEAAAEALAAAAAAoAAoAAAI5jI+pywcNY3sBWHdNrplytD2ellDeSVbp+GmWqaDqDMepc8t17Y4vBsK5hDyJMcI6KkuYU+jpjLoKADs=);
|
||||
}
|
||||
.mce-visualblocks article {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhKgAKAIABALu7u////yH5BAEAAAEALAAAAAAqAAoAAAI6jI+pywkNY3wG0GBvrsd2tXGYSGnfiF7ikpXemTpOiJScasYoDJJrjsG9gkCJ0ag6KhmaIe3pjDYBBQA7);
|
||||
}
|
||||
.mce-visualblocks blockquote {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhPgAKAIABALu7u////yH5BAEAAAEALAAAAAA+AAoAAAJPjI+py+0Knpz0xQDyuUhvfoGgIX5iSKZYgq5uNL5q69asZ8s5rrf0yZmpNkJZzFesBTu8TOlDVAabUyatguVhWduud3EyiUk45xhTTgMBBQA7);
|
||||
}
|
||||
.mce-visualblocks address {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhLQAKAIABALu7u////yH5BAEAAAEALAAAAAAtAAoAAAI/jI+pywwNozSP1gDyyZcjb3UaRpXkWaXmZW4OqKLhBmLs+K263DkJK7OJeifh7FicKD9A1/IpGdKkyFpNmCkAADs=);
|
||||
}
|
||||
.mce-visualblocks pre {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhFQAKAIABALu7uwAAACH5BAEAAAEALAAAAAAVAAoAAAIjjI+ZoN0cgDwSmnpz1NCueYERhnibZVKLNnbOq8IvKpJtVQAAOw==);
|
||||
}
|
||||
.mce-visualblocks figure {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhJAAKAIAAALu7u////yH5BAEAAAEALAAAAAAkAAoAAAI0jI+py+2fwAHUSFvD3RlvG4HIp4nX5JFSpnZUJ6LlrM52OE7uSWosBHScgkSZj7dDKnWAAgA7);
|
||||
}
|
||||
.mce-visualblocks figcaption {
|
||||
border: 1px dashed #bbb;
|
||||
}
|
||||
.mce-visualblocks hgroup {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhJwAKAIABALu7uwAAACH5BAEAAAEALAAAAAAnAAoAAAI3jI+pywYNI3uB0gpsRtt5fFnfNZaVSYJil4Wo03Hv6Z62uOCgiXH1kZIIJ8NiIxRrAZNMZAtQAAA7);
|
||||
}
|
||||
.mce-visualblocks aside {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhHgAKAIABAKqqqv///yH5BAEAAAEALAAAAAAeAAoAAAItjI+pG8APjZOTzgtqy7I3f1yehmQcFY4WKZbqByutmW4aHUd6vfcVbgudgpYCADs=);
|
||||
}
|
||||
.mce-visualblocks ul {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhDQAKAIAAALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGuYnqUVSjvw26DzzXiqIDlVwAAOw==);
|
||||
}
|
||||
.mce-visualblocks ol {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybH6HHt0qourxC6CvzXieHyeWQAAOw==);
|
||||
}
|
||||
.mce-visualblocks dl {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybEOnmOvUoWznTqeuEjNSCqeGRUAOw==);
|
||||
}
|
||||
.mce-visualblocks:not([dir=rtl]) p,
|
||||
.mce-visualblocks:not([dir=rtl]) h1,
|
||||
.mce-visualblocks:not([dir=rtl]) h2,
|
||||
.mce-visualblocks:not([dir=rtl]) h3,
|
||||
.mce-visualblocks:not([dir=rtl]) h4,
|
||||
.mce-visualblocks:not([dir=rtl]) h5,
|
||||
.mce-visualblocks:not([dir=rtl]) h6,
|
||||
.mce-visualblocks:not([dir=rtl]) div:not([data-mce-bogus]),
|
||||
.mce-visualblocks:not([dir=rtl]) section,
|
||||
.mce-visualblocks:not([dir=rtl]) article,
|
||||
.mce-visualblocks:not([dir=rtl]) blockquote,
|
||||
.mce-visualblocks:not([dir=rtl]) address,
|
||||
.mce-visualblocks:not([dir=rtl]) pre,
|
||||
.mce-visualblocks:not([dir=rtl]) figure,
|
||||
.mce-visualblocks:not([dir=rtl]) figcaption,
|
||||
.mce-visualblocks:not([dir=rtl]) hgroup,
|
||||
.mce-visualblocks:not([dir=rtl]) aside,
|
||||
.mce-visualblocks:not([dir=rtl]) ul,
|
||||
.mce-visualblocks:not([dir=rtl]) ol,
|
||||
.mce-visualblocks:not([dir=rtl]) dl {
|
||||
margin-left: 3px;
|
||||
}
|
||||
.mce-visualblocks[dir=rtl] p,
|
||||
.mce-visualblocks[dir=rtl] h1,
|
||||
.mce-visualblocks[dir=rtl] h2,
|
||||
.mce-visualblocks[dir=rtl] h3,
|
||||
.mce-visualblocks[dir=rtl] h4,
|
||||
.mce-visualblocks[dir=rtl] h5,
|
||||
.mce-visualblocks[dir=rtl] h6,
|
||||
.mce-visualblocks[dir=rtl] div:not([data-mce-bogus]),
|
||||
.mce-visualblocks[dir=rtl] section,
|
||||
.mce-visualblocks[dir=rtl] article,
|
||||
.mce-visualblocks[dir=rtl] blockquote,
|
||||
.mce-visualblocks[dir=rtl] address,
|
||||
.mce-visualblocks[dir=rtl] pre,
|
||||
.mce-visualblocks[dir=rtl] figure,
|
||||
.mce-visualblocks[dir=rtl] figcaption,
|
||||
.mce-visualblocks[dir=rtl] hgroup,
|
||||
.mce-visualblocks[dir=rtl] aside,
|
||||
.mce-visualblocks[dir=rtl] ul,
|
||||
.mce-visualblocks[dir=rtl] ol,
|
||||
.mce-visualblocks[dir=rtl] dl {
|
||||
background-position-x: right;
|
||||
margin-right: 3px;
|
||||
}
|
||||
.mce-nbsp,
|
||||
.mce-shy {
|
||||
background: #aaa;
|
||||
}
|
||||
.mce-shy::after {
|
||||
content: '-';
|
||||
}
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
689
public/tinymce/skins/ui/oxide/content.inline.css
Normal file
689
public/tinymce/skins/ui/oxide/content.inline.css
Normal file
@@ -0,0 +1,689 @@
|
||||
/**
|
||||
* Copyright (c) Tiny Technologies, Inc. All rights reserved.
|
||||
* Licensed under the LGPL or a commercial license.
|
||||
* For LGPL see License.txt in the project root for license information.
|
||||
* For commercial licenses see https://www.tiny.cloud/
|
||||
*/
|
||||
.mce-content-body .mce-item-anchor {
|
||||
background: transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'8'%20height%3D'12'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M0%200L8%200%208%2012%204.09117821%209%200%2012z'%2F%3E%3C%2Fsvg%3E%0A") no-repeat center;
|
||||
cursor: default;
|
||||
display: inline-block;
|
||||
height: 12px !important;
|
||||
padding: 0 2px;
|
||||
-webkit-user-modify: read-only;
|
||||
-moz-user-modify: read-only;
|
||||
-webkit-user-select: all;
|
||||
-moz-user-select: all;
|
||||
-ms-user-select: all;
|
||||
user-select: all;
|
||||
width: 8px !important;
|
||||
}
|
||||
.mce-content-body .mce-item-anchor[data-mce-selected] {
|
||||
outline-offset: 1px;
|
||||
}
|
||||
.tox-comments-visible .tox-comment {
|
||||
background-color: #fff0b7;
|
||||
}
|
||||
.tox-comments-visible .tox-comment--active {
|
||||
background-color: #ffe168;
|
||||
}
|
||||
.tox-checklist > li:not(.tox-checklist--hidden) {
|
||||
list-style: none;
|
||||
margin: 0.25em 0;
|
||||
}
|
||||
.tox-checklist > li:not(.tox-checklist--hidden)::before {
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-unchecked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2215%22%20height%3D%2215%22%20x%3D%22.5%22%20y%3D%22.5%22%20fill-rule%3D%22nonzero%22%20stroke%3D%22%234C4C4C%22%20rx%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");
|
||||
background-size: 100%;
|
||||
content: '';
|
||||
cursor: pointer;
|
||||
height: 1em;
|
||||
margin-left: -1.5em;
|
||||
margin-top: 0.125em;
|
||||
position: absolute;
|
||||
width: 1em;
|
||||
}
|
||||
.tox-checklist li:not(.tox-checklist--hidden).tox-checklist--checked::before {
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-checked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%234099FF%22%20fill-rule%3D%22nonzero%22%20rx%3D%222%22%2F%3E%3Cpath%20id%3D%22Path%22%20fill%3D%22%23FFF%22%20fill-rule%3D%22nonzero%22%20d%3D%22M11.5703186%2C3.14417309%20C11.8516238%2C2.73724603%2012.4164781%2C2.62829933%2012.83558%2C2.89774797%20C13.260121%2C3.17069355%2013.3759736%2C3.72932262%2013.0909105%2C4.14168582%20L7.7580587%2C11.8560195%20C7.43776896%2C12.3193404%206.76483983%2C12.3852142%206.35607322%2C11.9948725%20L3.02491697%2C8.8138662%20C2.66090143%2C8.46625845%202.65798871%2C7.89594698%203.01850234%2C7.54483354%20C3.373942%2C7.19866177%203.94940006%2C7.19592841%204.30829608%2C7.5386474%20L6.85276923%2C9.9684299%20L11.5703186%2C3.14417309%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");
|
||||
}
|
||||
[dir=rtl] .tox-checklist > li:not(.tox-checklist--hidden)::before {
|
||||
margin-left: 0;
|
||||
margin-right: -1.5em;
|
||||
}
|
||||
/* stylelint-disable */
|
||||
/* http://prismjs.com/ */
|
||||
/**
|
||||
* prism.js default theme for JavaScript, CSS and HTML
|
||||
* Based on dabblet (http://dabblet.com)
|
||||
* @author Lea Verou
|
||||
*/
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
color: black;
|
||||
background: none;
|
||||
text-shadow: 0 1px white;
|
||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
font-size: 1em;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
line-height: 1.5;
|
||||
-moz-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-webkit-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
pre[class*="language-"]::-moz-selection,
|
||||
pre[class*="language-"] ::-moz-selection,
|
||||
code[class*="language-"]::-moz-selection,
|
||||
code[class*="language-"] ::-moz-selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
pre[class*="language-"]::selection,
|
||||
pre[class*="language-"] ::selection,
|
||||
code[class*="language-"]::selection,
|
||||
code[class*="language-"] ::selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
@media print {
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
/* Code blocks */
|
||||
pre[class*="language-"] {
|
||||
padding: 1em;
|
||||
margin: 0.5em 0;
|
||||
overflow: auto;
|
||||
}
|
||||
:not(pre) > code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
background: #f5f2f0;
|
||||
}
|
||||
/* Inline code */
|
||||
:not(pre) > code[class*="language-"] {
|
||||
padding: 0.1em;
|
||||
border-radius: 0.3em;
|
||||
white-space: normal;
|
||||
}
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: slategray;
|
||||
}
|
||||
.token.punctuation {
|
||||
color: #999;
|
||||
}
|
||||
.namespace {
|
||||
opacity: 0.7;
|
||||
}
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.boolean,
|
||||
.token.number,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: #905;
|
||||
}
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: #690;
|
||||
}
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string {
|
||||
color: #9a6e3a;
|
||||
background: hsla(0, 0%, 100%, 0.5);
|
||||
}
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.keyword {
|
||||
color: #07a;
|
||||
}
|
||||
.token.function,
|
||||
.token.class-name {
|
||||
color: #DD4A68;
|
||||
}
|
||||
.token.regex,
|
||||
.token.important,
|
||||
.token.variable {
|
||||
color: #e90;
|
||||
}
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
/* stylelint-enable */
|
||||
.mce-content-body {
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.mce-content-body .mce-visual-caret {
|
||||
background-color: black;
|
||||
background-color: currentColor;
|
||||
position: absolute;
|
||||
}
|
||||
.mce-content-body .mce-visual-caret-hidden {
|
||||
display: none;
|
||||
}
|
||||
.mce-content-body *[data-mce-caret] {
|
||||
left: -1000px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
right: auto;
|
||||
top: 0;
|
||||
}
|
||||
.mce-content-body .mce-offscreen-selection {
|
||||
left: -2000000px;
|
||||
max-width: 1000000px;
|
||||
position: absolute;
|
||||
}
|
||||
.mce-content-body *[contentEditable=false] {
|
||||
cursor: default;
|
||||
}
|
||||
.mce-content-body *[contentEditable=true] {
|
||||
cursor: text;
|
||||
}
|
||||
.tox-cursor-format-painter {
|
||||
cursor: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M15%2C6%20C15%2C5.45%2014.55%2C5%2014%2C5%20L6%2C5%20C5.45%2C5%205%2C5.45%205%2C6%20L5%2C10%20C5%2C10.55%205.45%2C11%206%2C11%20L14%2C11%20C14.55%2C11%2015%2C10.55%2015%2C10%20L15%2C9%20L16%2C9%20L16%2C12%20L9%2C12%20L9%2C19%20C9%2C19.55%209.45%2C20%2010%2C20%20L11%2C20%20C11.55%2C20%2012%2C19.55%2012%2C19%20L12%2C14%20L18%2C14%20L18%2C7%20L15%2C7%20L15%2C6%20Z%22%2F%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M1%2C1%20L8.25%2C1%20C8.66421356%2C1%209%2C1.33578644%209%2C1.75%20L9%2C1.75%20C9%2C2.16421356%208.66421356%2C2.5%208.25%2C2.5%20L2.5%2C2.5%20L2.5%2C8.25%20C2.5%2C8.66421356%202.16421356%2C9%201.75%2C9%20L1.75%2C9%20C1.33578644%2C9%201%2C8.66421356%201%2C8.25%20L1%2C1%20Z%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A"), default;
|
||||
}
|
||||
.mce-content-body figure.align-left {
|
||||
float: left;
|
||||
}
|
||||
.mce-content-body figure.align-right {
|
||||
float: right;
|
||||
}
|
||||
.mce-content-body figure.image.align-center {
|
||||
display: table;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.mce-preview-object {
|
||||
border: 1px solid gray;
|
||||
display: inline-block;
|
||||
line-height: 0;
|
||||
margin: 0 2px 0 2px;
|
||||
position: relative;
|
||||
}
|
||||
.mce-preview-object .mce-shim {
|
||||
background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.mce-preview-object[data-mce-selected="2"] .mce-shim {
|
||||
display: none;
|
||||
}
|
||||
.mce-object {
|
||||
background: transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M4%203h16a1%201%200%200%201%201%201v16a1%201%200%200%201-1%201H4a1%201%200%200%201-1-1V4a1%201%200%200%201%201-1zm1%202v14h14V5H5zm4.79%202.565l5.64%204.028a.5.5%200%200%201%200%20.814l-5.64%204.028a.5.5%200%200%201-.79-.407V7.972a.5.5%200%200%201%20.79-.407z%22%2F%3E%3C%2Fsvg%3E%0A") no-repeat center;
|
||||
border: 1px dashed #aaa;
|
||||
}
|
||||
.mce-pagebreak {
|
||||
border: 1px dashed #aaa;
|
||||
cursor: default;
|
||||
display: block;
|
||||
height: 5px;
|
||||
margin-top: 15px;
|
||||
page-break-before: always;
|
||||
width: 100%;
|
||||
}
|
||||
@media print {
|
||||
.mce-pagebreak {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
.tiny-pageembed .mce-shim {
|
||||
background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.tiny-pageembed[data-mce-selected="2"] .mce-shim {
|
||||
display: none;
|
||||
}
|
||||
.tiny-pageembed {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
.tiny-pageembed--21by9,
|
||||
.tiny-pageembed--16by9,
|
||||
.tiny-pageembed--4by3,
|
||||
.tiny-pageembed--1by1 {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
.tiny-pageembed--21by9 {
|
||||
padding-top: 42.857143%;
|
||||
}
|
||||
.tiny-pageembed--16by9 {
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
.tiny-pageembed--4by3 {
|
||||
padding-top: 75%;
|
||||
}
|
||||
.tiny-pageembed--1by1 {
|
||||
padding-top: 100%;
|
||||
}
|
||||
.tiny-pageembed--21by9 iframe,
|
||||
.tiny-pageembed--16by9 iframe,
|
||||
.tiny-pageembed--4by3 iframe,
|
||||
.tiny-pageembed--1by1 iframe {
|
||||
border: 0;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.mce-content-body[data-mce-placeholder] {
|
||||
position: relative;
|
||||
}
|
||||
.mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before {
|
||||
color: rgba(34, 47, 62, 0.7);
|
||||
content: attr(data-mce-placeholder);
|
||||
position: absolute;
|
||||
}
|
||||
.mce-content-body:not([dir=rtl])[data-mce-placeholder]:not(.mce-visualblocks)::before {
|
||||
left: 1px;
|
||||
}
|
||||
.mce-content-body[dir=rtl][data-mce-placeholder]:not(.mce-visualblocks)::before {
|
||||
right: 1px;
|
||||
}
|
||||
.mce-content-body div.mce-resizehandle {
|
||||
background-color: #4099ff;
|
||||
border-color: #4099ff;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
box-sizing: border-box;
|
||||
height: 10px;
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
z-index: 10000;
|
||||
}
|
||||
.mce-content-body div.mce-resizehandle:hover {
|
||||
background-color: #4099ff;
|
||||
}
|
||||
.mce-content-body div.mce-resizehandle:nth-of-type(1) {
|
||||
cursor: nwse-resize;
|
||||
}
|
||||
.mce-content-body div.mce-resizehandle:nth-of-type(2) {
|
||||
cursor: nesw-resize;
|
||||
}
|
||||
.mce-content-body div.mce-resizehandle:nth-of-type(3) {
|
||||
cursor: nwse-resize;
|
||||
}
|
||||
.mce-content-body div.mce-resizehandle:nth-of-type(4) {
|
||||
cursor: nesw-resize;
|
||||
}
|
||||
.mce-content-body .mce-clonedresizable {
|
||||
opacity: 0.5;
|
||||
outline: 1px dashed black;
|
||||
position: absolute;
|
||||
z-index: 10000;
|
||||
}
|
||||
.mce-content-body .mce-resize-helper {
|
||||
background: #555;
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
border: 1px;
|
||||
border-radius: 3px;
|
||||
color: white;
|
||||
display: none;
|
||||
font-family: sans-serif;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
margin: 5px 10px;
|
||||
padding: 5px;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
z-index: 10001;
|
||||
}
|
||||
.tox-rtc-user-selection {
|
||||
position: relative;
|
||||
}
|
||||
.tox-rtc-user-cursor {
|
||||
bottom: 0;
|
||||
cursor: default;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 2px;
|
||||
}
|
||||
.tox-rtc-user-cursor::before {
|
||||
background-color: inherit;
|
||||
border-radius: 50%;
|
||||
content: '';
|
||||
display: block;
|
||||
height: 8px;
|
||||
position: absolute;
|
||||
right: -3px;
|
||||
top: -3px;
|
||||
width: 8px;
|
||||
}
|
||||
.tox-rtc-user-cursor:hover::after {
|
||||
background-color: inherit;
|
||||
border-radius: 100px;
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
content: attr(data-user);
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
left: -5px;
|
||||
min-height: 8px;
|
||||
min-width: 8px;
|
||||
padding: 0 12px;
|
||||
position: absolute;
|
||||
top: -11px;
|
||||
white-space: nowrap;
|
||||
z-index: 1000;
|
||||
}
|
||||
.tox-rtc-user-selection--1 .tox-rtc-user-cursor {
|
||||
background-color: #2dc26b;
|
||||
}
|
||||
.tox-rtc-user-selection--2 .tox-rtc-user-cursor {
|
||||
background-color: #e03e2d;
|
||||
}
|
||||
.tox-rtc-user-selection--3 .tox-rtc-user-cursor {
|
||||
background-color: #f1c40f;
|
||||
}
|
||||
.tox-rtc-user-selection--4 .tox-rtc-user-cursor {
|
||||
background-color: #3598db;
|
||||
}
|
||||
.tox-rtc-user-selection--5 .tox-rtc-user-cursor {
|
||||
background-color: #b96ad9;
|
||||
}
|
||||
.tox-rtc-user-selection--6 .tox-rtc-user-cursor {
|
||||
background-color: #e67e23;
|
||||
}
|
||||
.tox-rtc-user-selection--7 .tox-rtc-user-cursor {
|
||||
background-color: #aaa69d;
|
||||
}
|
||||
.tox-rtc-user-selection--8 .tox-rtc-user-cursor {
|
||||
background-color: #f368e0;
|
||||
}
|
||||
.tox-rtc-remote-image {
|
||||
background: #eaeaea url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2236%22%20height%3D%2212%22%20viewBox%3D%220%200%2036%2012%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Ccircle%20cx%3D%226%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%20%20%3Ccircle%20cx%3D%2218%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20begin%3D%22.33s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%20%20%3Ccircle%20cx%3D%2230%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20begin%3D%22.66s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%3C%2Fsvg%3E%0A") no-repeat center center;
|
||||
border: 1px solid #ccc;
|
||||
min-height: 240px;
|
||||
min-width: 320px;
|
||||
}
|
||||
.mce-match-marker {
|
||||
background: #aaa;
|
||||
color: #fff;
|
||||
}
|
||||
.mce-match-marker-selected {
|
||||
background: #39f;
|
||||
color: #fff;
|
||||
}
|
||||
.mce-match-marker-selected::-moz-selection {
|
||||
background: #39f;
|
||||
color: #fff;
|
||||
}
|
||||
.mce-match-marker-selected::selection {
|
||||
background: #39f;
|
||||
color: #fff;
|
||||
}
|
||||
.mce-content-body img[data-mce-selected],
|
||||
.mce-content-body table[data-mce-selected] {
|
||||
outline: 3px solid #b4d7ff;
|
||||
}
|
||||
.mce-content-body hr[data-mce-selected] {
|
||||
outline: 3px solid #b4d7ff;
|
||||
outline-offset: 1px;
|
||||
}
|
||||
.mce-content-body *[contentEditable=false] *[contentEditable=true]:focus {
|
||||
outline: 3px solid #b4d7ff;
|
||||
}
|
||||
.mce-content-body *[contentEditable=false] *[contentEditable=true]:hover {
|
||||
outline: 3px solid #b4d7ff;
|
||||
}
|
||||
.mce-content-body *[contentEditable=false][data-mce-selected] {
|
||||
cursor: not-allowed;
|
||||
outline: 3px solid #b4d7ff;
|
||||
}
|
||||
.mce-content-body.mce-content-readonly *[contentEditable=true]:focus,
|
||||
.mce-content-body.mce-content-readonly *[contentEditable=true]:hover {
|
||||
outline: none;
|
||||
}
|
||||
.mce-content-body *[data-mce-selected="inline-boundary"] {
|
||||
background-color: #b4d7ff;
|
||||
}
|
||||
.mce-content-body .mce-edit-focus {
|
||||
outline: 3px solid #b4d7ff;
|
||||
}
|
||||
.mce-content-body td[data-mce-selected],
|
||||
.mce-content-body th[data-mce-selected] {
|
||||
background-color: #b4d7ff !important;
|
||||
}
|
||||
.mce-content-body td[data-mce-selected]::-moz-selection,
|
||||
.mce-content-body th[data-mce-selected]::-moz-selection {
|
||||
background: none;
|
||||
}
|
||||
.mce-content-body td[data-mce-selected]::selection,
|
||||
.mce-content-body th[data-mce-selected]::selection {
|
||||
background: none;
|
||||
}
|
||||
.mce-content-body td[data-mce-selected] *,
|
||||
.mce-content-body th[data-mce-selected] * {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.mce-content-body img::-moz-selection {
|
||||
background: none;
|
||||
}
|
||||
.mce-content-body img::selection {
|
||||
background: none;
|
||||
}
|
||||
.ephox-snooker-resizer-bar {
|
||||
background-color: #b4d7ff;
|
||||
opacity: 0;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.ephox-snooker-resizer-cols {
|
||||
cursor: col-resize;
|
||||
}
|
||||
.ephox-snooker-resizer-rows {
|
||||
cursor: row-resize;
|
||||
}
|
||||
.ephox-snooker-resizer-bar.ephox-snooker-resizer-bar-dragging {
|
||||
opacity: 1;
|
||||
}
|
||||
.mce-spellchecker-word {
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%23ff0000'%20fill%3D'none'%20stroke-linecap%3D'round'%20stroke-opacity%3D'.75'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A");
|
||||
background-position: 0 calc(100% + 1px);
|
||||
background-repeat: repeat-x;
|
||||
background-size: auto 6px;
|
||||
cursor: default;
|
||||
height: 2rem;
|
||||
}
|
||||
.mce-spellchecker-grammar {
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%2300A835'%20fill%3D'none'%20stroke-linecap%3D'round'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A");
|
||||
background-position: 0 calc(100% + 1px);
|
||||
background-repeat: repeat-x;
|
||||
background-size: auto 6px;
|
||||
cursor: default;
|
||||
}
|
||||
.mce-toc {
|
||||
border: 1px solid gray;
|
||||
}
|
||||
.mce-toc h2 {
|
||||
margin: 4px;
|
||||
}
|
||||
.mce-toc li {
|
||||
list-style-type: none;
|
||||
}
|
||||
.mce-item-table,
|
||||
.mce-item-table td,
|
||||
.mce-item-table th,
|
||||
.mce-item-table caption {
|
||||
border: 1px dashed #bbb;
|
||||
}
|
||||
.mce-visualblocks p,
|
||||
.mce-visualblocks h1,
|
||||
.mce-visualblocks h2,
|
||||
.mce-visualblocks h3,
|
||||
.mce-visualblocks h4,
|
||||
.mce-visualblocks h5,
|
||||
.mce-visualblocks h6,
|
||||
.mce-visualblocks div:not([data-mce-bogus]),
|
||||
.mce-visualblocks section,
|
||||
.mce-visualblocks article,
|
||||
.mce-visualblocks blockquote,
|
||||
.mce-visualblocks address,
|
||||
.mce-visualblocks pre,
|
||||
.mce-visualblocks figure,
|
||||
.mce-visualblocks figcaption,
|
||||
.mce-visualblocks hgroup,
|
||||
.mce-visualblocks aside,
|
||||
.mce-visualblocks ul,
|
||||
.mce-visualblocks ol,
|
||||
.mce-visualblocks dl {
|
||||
background-repeat: no-repeat;
|
||||
border: 1px dashed #bbb;
|
||||
margin-left: 3px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
.mce-visualblocks p {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhCQAJAJEAAAAAAP///7u7u////yH5BAEAAAMALAAAAAAJAAkAAAIQnG+CqCN/mlyvsRUpThG6AgA7);
|
||||
}
|
||||
.mce-visualblocks h1 {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGu1JuxHoAfRNRW3TWXyF2YiRUAOw==);
|
||||
}
|
||||
.mce-visualblocks h2 {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8Hybbx4oOuqgTynJd6bGlWg3DkJzoaUAAAOw==);
|
||||
}
|
||||
.mce-visualblocks h3 {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIZjI8Hybbx4oOuqgTynJf2Ln2NOHpQpmhAAQA7);
|
||||
}
|
||||
.mce-visualblocks h4 {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxInR0zqeAdhtJlXwV1oCll2HaWgAAOw==);
|
||||
}
|
||||
.mce-visualblocks h5 {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjane4iq5GlW05GgIkIZUAAAOw==);
|
||||
}
|
||||
.mce-visualblocks h6 {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjan04jep1iZ1XRlAo5bVgAAOw==);
|
||||
}
|
||||
.mce-visualblocks div:not([data-mce-bogus]) {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhEgAKAIABALu7u////yH5BAEAAAEALAAAAAASAAoAAAIfjI9poI0cgDywrhuxfbrzDEbQM2Ei5aRjmoySW4pAAQA7);
|
||||
}
|
||||
.mce-visualblocks section {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhKAAKAIABALu7u////yH5BAEAAAEALAAAAAAoAAoAAAI5jI+pywcNY3sBWHdNrplytD2ellDeSVbp+GmWqaDqDMepc8t17Y4vBsK5hDyJMcI6KkuYU+jpjLoKADs=);
|
||||
}
|
||||
.mce-visualblocks article {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhKgAKAIABALu7u////yH5BAEAAAEALAAAAAAqAAoAAAI6jI+pywkNY3wG0GBvrsd2tXGYSGnfiF7ikpXemTpOiJScasYoDJJrjsG9gkCJ0ag6KhmaIe3pjDYBBQA7);
|
||||
}
|
||||
.mce-visualblocks blockquote {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhPgAKAIABALu7u////yH5BAEAAAEALAAAAAA+AAoAAAJPjI+py+0Knpz0xQDyuUhvfoGgIX5iSKZYgq5uNL5q69asZ8s5rrf0yZmpNkJZzFesBTu8TOlDVAabUyatguVhWduud3EyiUk45xhTTgMBBQA7);
|
||||
}
|
||||
.mce-visualblocks address {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhLQAKAIABALu7u////yH5BAEAAAEALAAAAAAtAAoAAAI/jI+pywwNozSP1gDyyZcjb3UaRpXkWaXmZW4OqKLhBmLs+K263DkJK7OJeifh7FicKD9A1/IpGdKkyFpNmCkAADs=);
|
||||
}
|
||||
.mce-visualblocks pre {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhFQAKAIABALu7uwAAACH5BAEAAAEALAAAAAAVAAoAAAIjjI+ZoN0cgDwSmnpz1NCueYERhnibZVKLNnbOq8IvKpJtVQAAOw==);
|
||||
}
|
||||
.mce-visualblocks figure {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhJAAKAIAAALu7u////yH5BAEAAAEALAAAAAAkAAoAAAI0jI+py+2fwAHUSFvD3RlvG4HIp4nX5JFSpnZUJ6LlrM52OE7uSWosBHScgkSZj7dDKnWAAgA7);
|
||||
}
|
||||
.mce-visualblocks figcaption {
|
||||
border: 1px dashed #bbb;
|
||||
}
|
||||
.mce-visualblocks hgroup {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhJwAKAIABALu7uwAAACH5BAEAAAEALAAAAAAnAAoAAAI3jI+pywYNI3uB0gpsRtt5fFnfNZaVSYJil4Wo03Hv6Z62uOCgiXH1kZIIJ8NiIxRrAZNMZAtQAAA7);
|
||||
}
|
||||
.mce-visualblocks aside {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhHgAKAIABAKqqqv///yH5BAEAAAEALAAAAAAeAAoAAAItjI+pG8APjZOTzgtqy7I3f1yehmQcFY4WKZbqByutmW4aHUd6vfcVbgudgpYCADs=);
|
||||
}
|
||||
.mce-visualblocks ul {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhDQAKAIAAALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGuYnqUVSjvw26DzzXiqIDlVwAAOw==);
|
||||
}
|
||||
.mce-visualblocks ol {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybH6HHt0qourxC6CvzXieHyeWQAAOw==);
|
||||
}
|
||||
.mce-visualblocks dl {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybEOnmOvUoWznTqeuEjNSCqeGRUAOw==);
|
||||
}
|
||||
.mce-visualblocks:not([dir=rtl]) p,
|
||||
.mce-visualblocks:not([dir=rtl]) h1,
|
||||
.mce-visualblocks:not([dir=rtl]) h2,
|
||||
.mce-visualblocks:not([dir=rtl]) h3,
|
||||
.mce-visualblocks:not([dir=rtl]) h4,
|
||||
.mce-visualblocks:not([dir=rtl]) h5,
|
||||
.mce-visualblocks:not([dir=rtl]) h6,
|
||||
.mce-visualblocks:not([dir=rtl]) div:not([data-mce-bogus]),
|
||||
.mce-visualblocks:not([dir=rtl]) section,
|
||||
.mce-visualblocks:not([dir=rtl]) article,
|
||||
.mce-visualblocks:not([dir=rtl]) blockquote,
|
||||
.mce-visualblocks:not([dir=rtl]) address,
|
||||
.mce-visualblocks:not([dir=rtl]) pre,
|
||||
.mce-visualblocks:not([dir=rtl]) figure,
|
||||
.mce-visualblocks:not([dir=rtl]) figcaption,
|
||||
.mce-visualblocks:not([dir=rtl]) hgroup,
|
||||
.mce-visualblocks:not([dir=rtl]) aside,
|
||||
.mce-visualblocks:not([dir=rtl]) ul,
|
||||
.mce-visualblocks:not([dir=rtl]) ol,
|
||||
.mce-visualblocks:not([dir=rtl]) dl {
|
||||
margin-left: 3px;
|
||||
}
|
||||
.mce-visualblocks[dir=rtl] p,
|
||||
.mce-visualblocks[dir=rtl] h1,
|
||||
.mce-visualblocks[dir=rtl] h2,
|
||||
.mce-visualblocks[dir=rtl] h3,
|
||||
.mce-visualblocks[dir=rtl] h4,
|
||||
.mce-visualblocks[dir=rtl] h5,
|
||||
.mce-visualblocks[dir=rtl] h6,
|
||||
.mce-visualblocks[dir=rtl] div:not([data-mce-bogus]),
|
||||
.mce-visualblocks[dir=rtl] section,
|
||||
.mce-visualblocks[dir=rtl] article,
|
||||
.mce-visualblocks[dir=rtl] blockquote,
|
||||
.mce-visualblocks[dir=rtl] address,
|
||||
.mce-visualblocks[dir=rtl] pre,
|
||||
.mce-visualblocks[dir=rtl] figure,
|
||||
.mce-visualblocks[dir=rtl] figcaption,
|
||||
.mce-visualblocks[dir=rtl] hgroup,
|
||||
.mce-visualblocks[dir=rtl] aside,
|
||||
.mce-visualblocks[dir=rtl] ul,
|
||||
.mce-visualblocks[dir=rtl] ol,
|
||||
.mce-visualblocks[dir=rtl] dl {
|
||||
background-position-x: right;
|
||||
margin-right: 3px;
|
||||
}
|
||||
.mce-nbsp,
|
||||
.mce-shy {
|
||||
background: #aaa;
|
||||
}
|
||||
.mce-shy::after {
|
||||
content: '-';
|
||||
}
|
||||
7
public/tinymce/skins/ui/oxide/content.inline.min.css
vendored
Normal file
7
public/tinymce/skins/ui/oxide/content.inline.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
7
public/tinymce/skins/ui/oxide/content.min.css
vendored
Normal file
7
public/tinymce/skins/ui/oxide/content.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
29
public/tinymce/skins/ui/oxide/content.mobile.css
Normal file
29
public/tinymce/skins/ui/oxide/content.mobile.css
Normal file
@@ -0,0 +1,29 @@
|
||||
/**
|
||||
* Copyright (c) Tiny Technologies, Inc. All rights reserved.
|
||||
* Licensed under the LGPL or a commercial license.
|
||||
* For LGPL see License.txt in the project root for license information.
|
||||
* For commercial licenses see https://www.tiny.cloud/
|
||||
*/
|
||||
.tinymce-mobile-unfocused-selections .tinymce-mobile-unfocused-selection {
|
||||
/* Note: this file is used inside the content, so isn't part of theming */
|
||||
background-color: green;
|
||||
display: inline-block;
|
||||
opacity: 0.5;
|
||||
position: absolute;
|
||||
}
|
||||
body {
|
||||
-webkit-text-size-adjust: none;
|
||||
}
|
||||
body img {
|
||||
/* this is related to the content margin */
|
||||
max-width: 96vw;
|
||||
}
|
||||
body table img {
|
||||
max-width: 95%;
|
||||
}
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
7
public/tinymce/skins/ui/oxide/content.mobile.min.css
vendored
Normal file
7
public/tinymce/skins/ui/oxide/content.mobile.min.css
vendored
Normal file
@@ -0,0 +1,7 @@
|
||||
/**
|
||||
* Copyright (c) Tiny Technologies, Inc. All rights reserved.
|
||||
* Licensed under the LGPL or a commercial license.
|
||||
* For LGPL see License.txt in the project root for license information.
|
||||
* For commercial licenses see https://www.tiny.cloud/
|
||||
*/
|
||||
.tinymce-mobile-unfocused-selections .tinymce-mobile-unfocused-selection{background-color:green;display:inline-block;opacity:.5;position:absolute}body{-webkit-text-size-adjust:none}body img{max-width:96vw}body table img{max-width:95%}body{font-family:sans-serif}table{border-collapse:collapse}
|
||||
BIN
public/tinymce/skins/ui/oxide/fonts/tinymce-mobile.woff
Normal file
BIN
public/tinymce/skins/ui/oxide/fonts/tinymce-mobile.woff
Normal file
Binary file not shown.
2937
public/tinymce/skins/ui/oxide/skin.css
Normal file
2937
public/tinymce/skins/ui/oxide/skin.css
Normal file
File diff suppressed because it is too large
Load Diff
7
public/tinymce/skins/ui/oxide/skin.min.css
vendored
Normal file
7
public/tinymce/skins/ui/oxide/skin.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
673
public/tinymce/skins/ui/oxide/skin.mobile.css
Normal file
673
public/tinymce/skins/ui/oxide/skin.mobile.css
Normal file
@@ -0,0 +1,673 @@
|
||||
/**
|
||||
* Copyright (c) Tiny Technologies, Inc. All rights reserved.
|
||||
* Licensed under the LGPL or a commercial license.
|
||||
* For LGPL see License.txt in the project root for license information.
|
||||
* For commercial licenses see https://www.tiny.cloud/
|
||||
*/
|
||||
/* RESET all the things! */
|
||||
.tinymce-mobile-outer-container {
|
||||
all: initial;
|
||||
display: block;
|
||||
}
|
||||
.tinymce-mobile-outer-container * {
|
||||
border: 0;
|
||||
box-sizing: initial;
|
||||
cursor: inherit;
|
||||
float: none;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
outline: 0;
|
||||
padding: 0;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
/* TBIO-3691, stop the gray flicker on touch. */
|
||||
text-shadow: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.tinymce-mobile-icon-arrow-back::before {
|
||||
content: "\e5cd";
|
||||
}
|
||||
.tinymce-mobile-icon-image::before {
|
||||
content: "\e412";
|
||||
}
|
||||
.tinymce-mobile-icon-cancel-circle::before {
|
||||
content: "\e5c9";
|
||||
}
|
||||
.tinymce-mobile-icon-full-dot::before {
|
||||
content: "\e061";
|
||||
}
|
||||
.tinymce-mobile-icon-align-center::before {
|
||||
content: "\e234";
|
||||
}
|
||||
.tinymce-mobile-icon-align-left::before {
|
||||
content: "\e236";
|
||||
}
|
||||
.tinymce-mobile-icon-align-right::before {
|
||||
content: "\e237";
|
||||
}
|
||||
.tinymce-mobile-icon-bold::before {
|
||||
content: "\e238";
|
||||
}
|
||||
.tinymce-mobile-icon-italic::before {
|
||||
content: "\e23f";
|
||||
}
|
||||
.tinymce-mobile-icon-unordered-list::before {
|
||||
content: "\e241";
|
||||
}
|
||||
.tinymce-mobile-icon-ordered-list::before {
|
||||
content: "\e242";
|
||||
}
|
||||
.tinymce-mobile-icon-font-size::before {
|
||||
content: "\e245";
|
||||
}
|
||||
.tinymce-mobile-icon-underline::before {
|
||||
content: "\e249";
|
||||
}
|
||||
.tinymce-mobile-icon-link::before {
|
||||
content: "\e157";
|
||||
}
|
||||
.tinymce-mobile-icon-unlink::before {
|
||||
content: "\eca2";
|
||||
}
|
||||
.tinymce-mobile-icon-color::before {
|
||||
content: "\e891";
|
||||
}
|
||||
.tinymce-mobile-icon-previous::before {
|
||||
content: "\e314";
|
||||
}
|
||||
.tinymce-mobile-icon-next::before {
|
||||
content: "\e315";
|
||||
}
|
||||
.tinymce-mobile-icon-large-font::before,
|
||||
.tinymce-mobile-icon-style-formats::before {
|
||||
content: "\e264";
|
||||
}
|
||||
.tinymce-mobile-icon-undo::before {
|
||||
content: "\e166";
|
||||
}
|
||||
.tinymce-mobile-icon-redo::before {
|
||||
content: "\e15a";
|
||||
}
|
||||
.tinymce-mobile-icon-removeformat::before {
|
||||
content: "\e239";
|
||||
}
|
||||
.tinymce-mobile-icon-small-font::before {
|
||||
content: "\e906";
|
||||
}
|
||||
.tinymce-mobile-icon-readonly-back::before,
|
||||
.tinymce-mobile-format-matches::after {
|
||||
content: "\e5ca";
|
||||
}
|
||||
.tinymce-mobile-icon-small-heading::before {
|
||||
content: "small";
|
||||
}
|
||||
.tinymce-mobile-icon-large-heading::before {
|
||||
content: "large";
|
||||
}
|
||||
.tinymce-mobile-icon-small-heading::before,
|
||||
.tinymce-mobile-icon-large-heading::before {
|
||||
font-family: sans-serif;
|
||||
font-size: 80%;
|
||||
}
|
||||
.tinymce-mobile-mask-edit-icon::before {
|
||||
content: "\e254";
|
||||
}
|
||||
.tinymce-mobile-icon-back::before {
|
||||
content: "\e5c4";
|
||||
}
|
||||
.tinymce-mobile-icon-heading::before {
|
||||
/* TODO: Translate */
|
||||
content: "Headings";
|
||||
font-family: sans-serif;
|
||||
font-size: 80%;
|
||||
font-weight: bold;
|
||||
}
|
||||
.tinymce-mobile-icon-h1::before {
|
||||
content: "H1";
|
||||
font-weight: bold;
|
||||
}
|
||||
.tinymce-mobile-icon-h2::before {
|
||||
content: "H2";
|
||||
font-weight: bold;
|
||||
}
|
||||
.tinymce-mobile-icon-h3::before {
|
||||
content: "H3";
|
||||
font-weight: bold;
|
||||
}
|
||||
.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background: rgba(51, 51, 51, 0.5);
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container {
|
||||
align-items: center;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: sans-serif;
|
||||
font-size: 1em;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .mixin-menu-item {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
height: 2.1em;
|
||||
width: 2.1em;
|
||||
}
|
||||
.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
font-size: 1em;
|
||||
}
|
||||
@media only screen and (min-device-width:700px) {
|
||||
.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section .tinymce-mobile-mask-tap-icon {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
height: 2.1em;
|
||||
width: 2.1em;
|
||||
background-color: white;
|
||||
color: #207ab7;
|
||||
}
|
||||
.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section .tinymce-mobile-mask-tap-icon::before {
|
||||
content: "\e900";
|
||||
font-family: 'tinymce-mobile', sans-serif;
|
||||
}
|
||||
.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section:not(.tinymce-mobile-mask-tap-icon-selected) .tinymce-mobile-mask-tap-icon {
|
||||
z-index: 2;
|
||||
}
|
||||
.tinymce-mobile-android-container.tinymce-mobile-android-maximized {
|
||||
background: #ffffff;
|
||||
border: none;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
.tinymce-mobile-android-container:not(.tinymce-mobile-android-maximized) {
|
||||
position: relative;
|
||||
}
|
||||
.tinymce-mobile-android-container .tinymce-mobile-editor-socket {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
}
|
||||
.tinymce-mobile-android-container .tinymce-mobile-editor-socket iframe {
|
||||
display: flex !important;
|
||||
flex-grow: 1;
|
||||
height: auto !important;
|
||||
}
|
||||
.tinymce-mobile-android-scroll-reload {
|
||||
overflow: hidden;
|
||||
}
|
||||
:not(.tinymce-mobile-readonly-mode) > .tinymce-mobile-android-selection-context-toolbar {
|
||||
margin-top: 23px;
|
||||
}
|
||||
.tinymce-mobile-toolstrip {
|
||||
background: #fff;
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
z-index: 1;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar {
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #cccccc;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
height: 2.5em;
|
||||
width: 100%;
|
||||
/* Make it no larger than the toolstrip, so that it needs to scroll */
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group > div {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group.tinymce-mobile-exit-container {
|
||||
background: #f44336;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group.tinymce-mobile-toolbar-scrollable-group {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item {
|
||||
padding-left: 0.5em;
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item.tinymce-mobile-toolbar-button {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 80%;
|
||||
margin-left: 2px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item.tinymce-mobile-toolbar-button.tinymce-mobile-toolbar-button-selected {
|
||||
background: #c8cbcf;
|
||||
color: #cccccc;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group:first-of-type,
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group:last-of-type {
|
||||
background: #207ab7;
|
||||
color: #eceff1;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar {
|
||||
/* Note, this file is imported inside .tinymce-mobile-context-toolbar, so that prefix is on everything here. */
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
padding-bottom: 0.4em;
|
||||
padding-top: 0.4em;
|
||||
/* Make any buttons appearing on the left and right display in the centre (e.g. color edges) */
|
||||
/* For widgets like the colour picker, use the whole height */
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog {
|
||||
display: flex;
|
||||
min-height: 1.5em;
|
||||
overflow: hidden;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
transition: left cubic-bezier(0.4, 0, 1, 1) 0.15s;
|
||||
width: 100%;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen input {
|
||||
font-family: Sans-serif;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-input-container {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
position: relative;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-input-container .tinymce-mobile-input-container-x {
|
||||
-ms-grid-row-align: center;
|
||||
align-self: center;
|
||||
background: inherit;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
color: #888;
|
||||
font-size: 0.6em;
|
||||
font-weight: bold;
|
||||
height: 100%;
|
||||
padding-right: 2px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-input-container.tinymce-mobile-input-container-empty .tinymce-mobile-input-container-x {
|
||||
display: none;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-previous,
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-next {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-previous::before,
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-next::before {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
font-weight: bold;
|
||||
height: 100%;
|
||||
padding-left: 0.5em;
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-previous.tinymce-mobile-toolbar-navigation-disabled::before,
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-next.tinymce-mobile-toolbar-navigation-disabled::before {
|
||||
visibility: hidden;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-dot-item {
|
||||
color: #cccccc;
|
||||
font-size: 10px;
|
||||
line-height: 10px;
|
||||
margin: 0 2px;
|
||||
padding-top: 3px;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-dot-item.tinymce-mobile-dot-active {
|
||||
color: #c8cbcf;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-large-font::before,
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-large-heading::before {
|
||||
margin-left: 0.5em;
|
||||
margin-right: 0.9em;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-small-font::before,
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-small-heading::before {
|
||||
margin-left: 0.9em;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding: 0.28em 0;
|
||||
position: relative;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-size-container {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
height: 100%;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-size-container .tinymce-mobile-slider-size-line {
|
||||
background: #cccccc;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
height: 0.2em;
|
||||
margin-bottom: 0.3em;
|
||||
margin-top: 0.3em;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container {
|
||||
padding-left: 2em;
|
||||
padding-right: 2em;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-slider-gradient-container {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
height: 100%;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-slider-gradient-container .tinymce-mobile-slider-gradient {
|
||||
background: linear-gradient(to right, hsl(0, 100%, 50%) 0%, hsl(60, 100%, 50%) 17%, hsl(120, 100%, 50%) 33%, hsl(180, 100%, 50%) 50%, hsl(240, 100%, 50%) 67%, hsl(300, 100%, 50%) 83%, hsl(0, 100%, 50%) 100%);
|
||||
display: flex;
|
||||
flex: 1;
|
||||
height: 0.2em;
|
||||
margin-bottom: 0.3em;
|
||||
margin-top: 0.3em;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-hue-slider-black {
|
||||
/* Not part of theming */
|
||||
background: black;
|
||||
height: 0.2em;
|
||||
margin-bottom: 0.3em;
|
||||
margin-top: 0.3em;
|
||||
width: 1.2em;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-hue-slider-white {
|
||||
/* Not part of theming */
|
||||
background: white;
|
||||
height: 0.2em;
|
||||
margin-bottom: 0.3em;
|
||||
margin-top: 0.3em;
|
||||
width: 1.2em;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-thumb {
|
||||
/* vertically centering trick (margin: auto, top: 0, bottom: 0). On iOS and Safari, if you leave
|
||||
* out these values, then it shows the thumb at the top of the spectrum. This is probably because it is
|
||||
* absolutely positioned with only a left value, and not a top. Note, on Chrome it seems to be fine without
|
||||
* this approach.
|
||||
*/
|
||||
align-items: center;
|
||||
background-clip: padding-box;
|
||||
background-color: #455a64;
|
||||
border: 0.5em solid rgba(136, 136, 136, 0);
|
||||
border-radius: 3em;
|
||||
bottom: 0;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
height: 0.5em;
|
||||
justify-content: center;
|
||||
left: -10px;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
transition: border 120ms cubic-bezier(0.39, 0.58, 0.57, 1);
|
||||
width: 0.5em;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-thumb.tinymce-mobile-thumb-active {
|
||||
border: 0.5em solid rgba(136, 136, 136, 0.39);
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serializer-wrapper,
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group > div {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serializer-wrapper {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item:not(.tinymce-mobile-serialised-dialog) {
|
||||
height: 100%;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-dot-container {
|
||||
display: flex;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group input {
|
||||
background: #ffffff;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
color: #455a64;
|
||||
flex-grow: 1;
|
||||
font-size: 0.85em;
|
||||
padding-bottom: 0.1em;
|
||||
padding-left: 5px;
|
||||
padding-top: 0.1em;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group input::-webkit-input-placeholder {
|
||||
/* WebKit, Blink, Edge */
|
||||
color: #888;
|
||||
}
|
||||
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group input::placeholder {
|
||||
/* WebKit, Blink, Edge */
|
||||
color: #888;
|
||||
}
|
||||
/* dropup */
|
||||
.tinymce-mobile-dropup {
|
||||
background: white;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
.tinymce-mobile-dropup.tinymce-mobile-dropup-shrinking {
|
||||
transition: height 0.3s ease-out;
|
||||
}
|
||||
.tinymce-mobile-dropup.tinymce-mobile-dropup-growing {
|
||||
transition: height 0.3s ease-in;
|
||||
}
|
||||
.tinymce-mobile-dropup.tinymce-mobile-dropup-closed {
|
||||
flex-grow: 0;
|
||||
}
|
||||
.tinymce-mobile-dropup.tinymce-mobile-dropup-open:not(.tinymce-mobile-dropup-growing) {
|
||||
flex-grow: 1;
|
||||
}
|
||||
/* TODO min-height for device size and orientation */
|
||||
.tinymce-mobile-ios-container .tinymce-mobile-dropup:not(.tinymce-mobile-dropup-closed) {
|
||||
min-height: 200px;
|
||||
}
|
||||
@media only screen and (orientation: landscape) {
|
||||
.tinymce-mobile-dropup:not(.tinymce-mobile-dropup-closed) {
|
||||
min-height: 200px;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {
|
||||
.tinymce-mobile-ios-container .tinymce-mobile-dropup:not(.tinymce-mobile-dropup-closed) {
|
||||
min-height: 150px;
|
||||
}
|
||||
}
|
||||
/* styles menu */
|
||||
.tinymce-mobile-styles-menu {
|
||||
font-family: sans-serif;
|
||||
outline: 4px solid black;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
.tinymce-mobile-styles-menu [role="menu"] {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
.tinymce-mobile-styles-menu [role="menu"].transitioning {
|
||||
transition: transform 0.5s ease-in-out;
|
||||
}
|
||||
.tinymce-mobile-styles-menu .tinymce-mobile-styles-item {
|
||||
border-bottom: 1px solid #ddd;
|
||||
color: #455a64;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
padding: 1em 1em;
|
||||
position: relative;
|
||||
}
|
||||
.tinymce-mobile-styles-menu .tinymce-mobile-styles-collapser .tinymce-mobile-styles-collapse-icon::before {
|
||||
color: #455a64;
|
||||
content: "\e314";
|
||||
font-family: 'tinymce-mobile', sans-serif;
|
||||
}
|
||||
.tinymce-mobile-styles-menu .tinymce-mobile-styles-item.tinymce-mobile-styles-item-is-menu::after {
|
||||
color: #455a64;
|
||||
content: "\e315";
|
||||
font-family: 'tinymce-mobile', sans-serif;
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
.tinymce-mobile-styles-menu .tinymce-mobile-styles-item.tinymce-mobile-format-matches::after {
|
||||
font-family: 'tinymce-mobile', sans-serif;
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
.tinymce-mobile-styles-menu .tinymce-mobile-styles-separator,
|
||||
.tinymce-mobile-styles-menu .tinymce-mobile-styles-collapser {
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
border-top: #455a64;
|
||||
color: #455a64;
|
||||
display: flex;
|
||||
min-height: 2.5em;
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
}
|
||||
.tinymce-mobile-styles-menu [data-transitioning-destination="before"][data-transitioning-state],
|
||||
.tinymce-mobile-styles-menu [data-transitioning-state="before"] {
|
||||
transform: translate(-100%);
|
||||
}
|
||||
.tinymce-mobile-styles-menu [data-transitioning-destination="current"][data-transitioning-state],
|
||||
.tinymce-mobile-styles-menu [data-transitioning-state="current"] {
|
||||
transform: translate(0%);
|
||||
}
|
||||
.tinymce-mobile-styles-menu [data-transitioning-destination="after"][data-transitioning-state],
|
||||
.tinymce-mobile-styles-menu [data-transitioning-state="after"] {
|
||||
transform: translate(100%);
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'tinymce-mobile';
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
src: url('fonts/tinymce-mobile.woff?8x92w3') format('woff');
|
||||
}
|
||||
@media (min-device-width: 700px) {
|
||||
.tinymce-mobile-outer-container,
|
||||
.tinymce-mobile-outer-container input {
|
||||
font-size: 25px;
|
||||
}
|
||||
}
|
||||
@media (max-device-width: 700px) {
|
||||
.tinymce-mobile-outer-container,
|
||||
.tinymce-mobile-outer-container input {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
.tinymce-mobile-icon {
|
||||
font-family: 'tinymce-mobile', sans-serif;
|
||||
}
|
||||
.mixin-flex-and-centre {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.mixin-flex-bar {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
.tinymce-mobile-outer-container .tinymce-mobile-editor-socket iframe {
|
||||
background-color: #fff;
|
||||
width: 100%;
|
||||
}
|
||||
.tinymce-mobile-editor-socket .tinymce-mobile-mask-edit-icon {
|
||||
/* Note, on the iPod touch in landscape, this isn't visible when the navbar appears */
|
||||
background-color: #207ab7;
|
||||
border-radius: 50%;
|
||||
bottom: 1em;
|
||||
color: white;
|
||||
font-size: 1em;
|
||||
height: 2.1em;
|
||||
position: fixed;
|
||||
right: 2em;
|
||||
width: 2.1em;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
@media only screen and (min-device-width:700px) {
|
||||
.tinymce-mobile-editor-socket .tinymce-mobile-mask-edit-icon {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
.tinymce-mobile-outer-container:not(.tinymce-mobile-fullscreen-maximized) .tinymce-mobile-editor-socket {
|
||||
height: 300px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.tinymce-mobile-outer-container:not(.tinymce-mobile-fullscreen-maximized) .tinymce-mobile-editor-socket iframe {
|
||||
height: 100%;
|
||||
}
|
||||
.tinymce-mobile-outer-container:not(.tinymce-mobile-fullscreen-maximized) .tinymce-mobile-toolstrip {
|
||||
display: none;
|
||||
}
|
||||
/*
|
||||
Note, that if you don't include this (::-webkit-file-upload-button), the toolbar width gets
|
||||
increased and the whole body becomes scrollable. It's important!
|
||||
*/
|
||||
input[type="file"]::-webkit-file-upload-button {
|
||||
display: none;
|
||||
}
|
||||
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {
|
||||
.tinymce-mobile-ios-container .tinymce-mobile-editor-socket .tinymce-mobile-mask-edit-icon {
|
||||
bottom: 50%;
|
||||
}
|
||||
}
|
||||
7
public/tinymce/skins/ui/oxide/skin.mobile.min.css
vendored
Normal file
7
public/tinymce/skins/ui/oxide/skin.mobile.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
31
src/App.vue
Normal file
31
src/App.vue
Normal file
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<a-config-provider :locale="locale">
|
||||
<router-view/>
|
||||
</a-config-provider>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import zh_CN from 'ele-admin-pro/packages/lang/zh_CN';
|
||||
import zh_TW from 'ele-admin-pro/packages/lang/zh_TW';
|
||||
import en from 'ele-admin-pro/packages/lang/en_US';
|
||||
|
||||
const languages = {zh_CN, zh_TW, en};
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
locale: languages[this.$i18n.locale]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
language() {
|
||||
return this.$i18n.locale;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
language() {
|
||||
this.locale = languages[this.language];
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
BIN
src/assets/bg-login.jpg
Normal file
BIN
src/assets/bg-login.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 383 KiB |
15
src/assets/logo.svg
Normal file
15
src/assets/logo.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 30 KiB |
257
src/components/TinymceEditor/index.vue
Normal file
257
src/components/TinymceEditor/index.vue
Normal file
@@ -0,0 +1,257 @@
|
||||
<!-- tinymce富文本编辑器组件 license by http://eleadmin.com -->
|
||||
<template>
|
||||
<editor
|
||||
:init="config"
|
||||
:disabled="disabled"
|
||||
:model-value="value"
|
||||
@update:model-value="updateValue"/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const BASE_URL = process.env.BASE_URL;
|
||||
import tinymce from 'tinymce/tinymce';
|
||||
import 'tinymce/icons/default';
|
||||
import 'tinymce/themes/silver';
|
||||
import 'tinymce/plugins/code';
|
||||
import 'tinymce/plugins/print';
|
||||
import 'tinymce/plugins/preview';
|
||||
import 'tinymce/plugins/fullscreen';
|
||||
import 'tinymce/plugins/paste';
|
||||
import 'tinymce/plugins/searchreplace';
|
||||
import 'tinymce/plugins/save';
|
||||
import 'tinymce/plugins/autosave';
|
||||
import 'tinymce/plugins/link';
|
||||
import 'tinymce/plugins/autolink';
|
||||
import 'tinymce/plugins/image';
|
||||
import 'tinymce/plugins/imagetools';
|
||||
import 'tinymce/plugins/media';
|
||||
import 'tinymce/plugins/table';
|
||||
import 'tinymce/plugins/codesample';
|
||||
import 'tinymce/plugins/lists';
|
||||
import 'tinymce/plugins/advlist';
|
||||
import 'tinymce/plugins/hr';
|
||||
import 'tinymce/plugins/charmap';
|
||||
import 'tinymce/plugins/emoticons';
|
||||
import 'tinymce/plugins/anchor';
|
||||
import 'tinymce/plugins/directionality';
|
||||
import 'tinymce/plugins/pagebreak';
|
||||
import 'tinymce/plugins/quickbars';
|
||||
import 'tinymce/plugins/nonbreaking';
|
||||
import 'tinymce/plugins/visualblocks';
|
||||
import 'tinymce/plugins/visualchars';
|
||||
import 'tinymce/plugins/wordcount';
|
||||
import 'tinymce/plugins/emoticons/js/emojis';
|
||||
import Editor from '@tinymce/tinymce-vue';
|
||||
// 默认配置
|
||||
const DEFAULT_CONFIG = {
|
||||
height: 300,
|
||||
branding: false,
|
||||
skin_url: BASE_URL + 'tinymce/skins/ui/oxide',
|
||||
content_css: BASE_URL + 'tinymce/skins/content/default/content.min.css',
|
||||
language_url: BASE_URL + 'tinymce/langs/zh_CN.js',
|
||||
language: 'zh_CN',
|
||||
plugins: [
|
||||
'code',
|
||||
'print',
|
||||
'preview',
|
||||
'fullscreen',
|
||||
'paste',
|
||||
'searchreplace',
|
||||
'save',
|
||||
'autosave',
|
||||
'link',
|
||||
'autolink',
|
||||
'image',
|
||||
'imagetools',
|
||||
'media',
|
||||
'table',
|
||||
'codesample',
|
||||
'lists',
|
||||
'advlist',
|
||||
'hr',
|
||||
'charmap',
|
||||
'emoticons',
|
||||
'anchor',
|
||||
'directionality',
|
||||
'pagebreak',
|
||||
'quickbars',
|
||||
'nonbreaking',
|
||||
'visualblocks',
|
||||
'visualchars',
|
||||
'wordcount'
|
||||
].join(' '),
|
||||
toolbar: [
|
||||
'fullscreen',
|
||||
'preview',
|
||||
'code',
|
||||
'|',
|
||||
'undo',
|
||||
'redo',
|
||||
'|',
|
||||
'forecolor',
|
||||
'backcolor',
|
||||
'|',
|
||||
'bold',
|
||||
'italic',
|
||||
'underline',
|
||||
'strikethrough',
|
||||
'|',
|
||||
'alignleft',
|
||||
'aligncenter',
|
||||
'alignright',
|
||||
'alignjustify',
|
||||
'|',
|
||||
'outdent',
|
||||
'indent',
|
||||
'|',
|
||||
'numlist',
|
||||
'bullist',
|
||||
'|',
|
||||
'formatselect',
|
||||
'fontselect',
|
||||
'fontsizeselect',
|
||||
'|',
|
||||
'link',
|
||||
'image',
|
||||
'media',
|
||||
'emoticons',
|
||||
'charmap',
|
||||
'anchor',
|
||||
'pagebreak',
|
||||
'codesample',
|
||||
'|',
|
||||
'ltr',
|
||||
'rtl'
|
||||
].join(' '),
|
||||
draggable_modal: true,
|
||||
toolbar_mode: 'sliding',
|
||||
images_upload_handler: (blobInfo, success) => {
|
||||
success('data:image/jpeg;base64,' + blobInfo.base64());
|
||||
},
|
||||
file_picker_types: 'media',
|
||||
file_picker_callback: () => {
|
||||
}
|
||||
};
|
||||
// 暗黑主题
|
||||
const DARK_CONFIG = {
|
||||
skin_url: BASE_URL + 'tinymce/skins/ui/oxide-dark',
|
||||
content_css: BASE_URL + 'tinymce/skins/content/dark/content.min.css'
|
||||
};
|
||||
|
||||
export default {
|
||||
name: 'TinymceEditor',
|
||||
components: {Editor},
|
||||
emits: ['update:value'],
|
||||
props: {
|
||||
// 值(v-model)
|
||||
value: String,
|
||||
// 编辑器配置
|
||||
init: Object,
|
||||
// 是否禁用
|
||||
disabled: Boolean,
|
||||
// 自动跟随框架主题
|
||||
autoTheme: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否使用暗黑主题
|
||||
darkTheme: Boolean
|
||||
},
|
||||
data() {
|
||||
const dark = this.autoTheme ? this.$store.state.theme.darkMode : this.darkTheme;
|
||||
return {
|
||||
// 编辑器配置
|
||||
config: Object.assign({}, DEFAULT_CONFIG, dark ? DARK_CONFIG : {}, this.init)
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 是否是暗黑模式
|
||||
darkMode() {
|
||||
try {
|
||||
return this.$store.state.theme.darkMode;
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
tinymce.init({});
|
||||
},
|
||||
methods: {
|
||||
/* 更新value */
|
||||
updateValue(value) {
|
||||
this.$emit('update:value', value);
|
||||
},
|
||||
/* 切换编辑器主题 */
|
||||
changeTheme(dark) {
|
||||
document.head.querySelectorAll('[id^="mce-"]').forEach((elem) => {
|
||||
let href = elem.getAttribute('href');
|
||||
if (href.indexOf('/oxide-dark/') !== -1) {
|
||||
if (!dark) {
|
||||
href = href.replace('/oxide-dark/', '/oxide/');
|
||||
elem.setAttribute('href', href);
|
||||
}
|
||||
} else {
|
||||
if (dark) {
|
||||
href = href.replace('/oxide/', '/oxide-dark/');
|
||||
elem.setAttribute('href', href);
|
||||
}
|
||||
}
|
||||
});
|
||||
this.changeContentTheme(dark);
|
||||
},
|
||||
/* 切换编辑器内容区的主题 */
|
||||
changeContentTheme(dark) {
|
||||
document.body.querySelectorAll('iframe[id^="tiny-vue_"]').forEach((frame) => {
|
||||
const win = frame.contentWindow;
|
||||
if (win) {
|
||||
const doc = win.document;
|
||||
if (doc) {
|
||||
[].forEach.call(doc.head.querySelectorAll('[id^="mce-"]'), (elem) => {
|
||||
let href = elem.getAttribute('href');
|
||||
if (href.indexOf('/skins/ui/') !== -1) {
|
||||
if (href.indexOf('/oxide-dark/') !== -1) {
|
||||
if (!dark) {
|
||||
href = href.replace('/oxide-dark/', '/oxide/');
|
||||
elem.setAttribute('href', href);
|
||||
}
|
||||
} else {
|
||||
if (dark) {
|
||||
href = href.replace('/oxide/', '/oxide-dark/');
|
||||
elem.setAttribute('href', href);
|
||||
}
|
||||
}
|
||||
} else if (href.indexOf('/skins/content/') !== -1) {
|
||||
if (href.indexOf('/dark/') !== -1) {
|
||||
if (!dark) {
|
||||
href = href.replace('/dark/', '/default/');
|
||||
elem.setAttribute('href', href);
|
||||
}
|
||||
} else {
|
||||
if (dark) {
|
||||
href = href.replace('/default/', '/dark/');
|
||||
elem.setAttribute('href', href);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
darkMode() {
|
||||
if (this.autoTheme) {
|
||||
this.changeTheme(this.darkMode);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body .tox-tinymce-aux {
|
||||
z-index: 19892000;
|
||||
}
|
||||
</style>
|
||||
69
src/config/axios-config.js
Normal file
69
src/config/axios-config.js
Normal file
@@ -0,0 +1,69 @@
|
||||
/**
|
||||
* axios配置
|
||||
*/
|
||||
import axios from 'axios';
|
||||
import store from '../store';
|
||||
import router from '../router';
|
||||
import setting from './setting';
|
||||
import {Modal} from 'ant-design-vue';
|
||||
|
||||
// 设置统一的url
|
||||
axios.defaults.baseURL = process.env.VUE_APP_API_BASE_URL;
|
||||
|
||||
/* 请求拦截器 */
|
||||
axios.interceptors.request.use((config) => {
|
||||
// 添加token到header
|
||||
const token = setting.takeToken();
|
||||
if (token) {
|
||||
config.headers[setting.tokenHeaderName] = token;
|
||||
}
|
||||
return config;
|
||||
}, (error) => {
|
||||
return Promise.reject(error);
|
||||
});
|
||||
|
||||
/* 响应拦截器 */
|
||||
axios.interceptors.response.use((res) => {
|
||||
// 登录过期处理
|
||||
if (res.data.code === 401) {
|
||||
if (res.config.url === setting.menuUrl) {
|
||||
goLogin();
|
||||
} else {
|
||||
Modal.destroyAll();
|
||||
Modal.info({
|
||||
title: '系统提示',
|
||||
content: '登录状态已过期, 请退出重新登录!',
|
||||
okText: '重新登录',
|
||||
onOk: () => {
|
||||
goLogin(true);
|
||||
}
|
||||
});
|
||||
}
|
||||
return Promise.reject(new Error(res.data.msg));
|
||||
}
|
||||
// token自动续期
|
||||
const access_token = res.headers[setting.tokenHeaderName];
|
||||
if (access_token) {
|
||||
setting.cacheToken(access_token);
|
||||
}
|
||||
return res;
|
||||
}, (error) => {
|
||||
return Promise.reject(error);
|
||||
});
|
||||
|
||||
/**
|
||||
* 跳转到登录页面
|
||||
*/
|
||||
function goLogin(reload) {
|
||||
store.dispatch('user/removeToken').then(() => {
|
||||
if (reload) {
|
||||
location.replace('/login'); // 这样跳转避免再次登录重复注册动态路由
|
||||
} else {
|
||||
const path = router.currentRoute.path;
|
||||
return router.push({
|
||||
path: '/login',
|
||||
query: path && path !== '/' ? {form: path} : null
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
141
src/config/setting.js
Normal file
141
src/config/setting.js
Normal file
@@ -0,0 +1,141 @@
|
||||
/**
|
||||
* 框架全局配置
|
||||
*/
|
||||
export default {
|
||||
// 不显示侧栏的路由
|
||||
hideSidebars: [],
|
||||
// 不显示全局页脚的路由
|
||||
hideFooters: ['/system/dictionary', '/system/organization', '/form/advanced', '/example/choose'],
|
||||
// 页签可重复打开的路由
|
||||
repeatableTabs: ['/system/user/info'],
|
||||
// 不需要登录的路由
|
||||
whiteList: ['/login', '/forget'],
|
||||
// 菜单数据接口
|
||||
menuUrl: '/main/menu?type=pro',
|
||||
// 自定义解析菜单接口数据
|
||||
parseMenu: null,
|
||||
// 自定义解析菜单接口单个数据格式
|
||||
parseMenuItem: null,
|
||||
// 直接指定菜单数据
|
||||
menus: null,
|
||||
// 用户信息接口
|
||||
userUrl: '/main/user',
|
||||
// 自定义解析接口用户信息
|
||||
parseUser(res) {
|
||||
// code为0是成功, 不一样可以处理如: {code: res.code === 200 ? 0 : res.code, msg: res.message}
|
||||
let result = {code: res.code, msg: res.msg};
|
||||
if (res.data) {
|
||||
result.data = Object.assign({}, res.data, {
|
||||
// 姓名和头像会显示在顶栏, 字段不一样可以在这处理, 如:
|
||||
//avatar: res.data.avatarUrl,
|
||||
//nickname: res.data.userName,
|
||||
// 角色和权限信息, 需要为string数组类型
|
||||
roles: res.data.roles ? res.data.roles.map(d => d.roleCode) : [],
|
||||
authorities: res.data.authorities ? res.data.authorities.map(d => d.authority) : []
|
||||
});
|
||||
}
|
||||
return result;
|
||||
},
|
||||
// token传递的header名称
|
||||
tokenHeaderName: 'Authorization',
|
||||
// token存储的名称
|
||||
tokenStoreName: 'access_token',
|
||||
// 用户信息存储的名称
|
||||
userStoreName: 'user',
|
||||
// 主题配置存储的名称
|
||||
themeStoreName: 'theme',
|
||||
// 首页标题, 为空会自动获取
|
||||
homeTitle: '主页',
|
||||
// 首页路径, 为空会自动获取
|
||||
homePath: null,
|
||||
// 顶栏是否显示主题设置按钮
|
||||
showSetting: true,
|
||||
// 开启多页签是否缓存组件
|
||||
tabKeepAlive: true,
|
||||
// 是否折叠侧边栏
|
||||
collapse: false,
|
||||
// 侧边栏风格: light(亮色), dark(暗色)
|
||||
sideStyle: 'dark',
|
||||
// 顶栏风格: light(亮色), dark(暗色), primary(主色)
|
||||
headStyle: 'light',
|
||||
// 标签页风格: default(默认), dot(圆点), card(卡片)
|
||||
tabStyle: 'default',
|
||||
// 布局风格: side(默认), top(顶栏菜单), mix(混合菜单)
|
||||
layoutStyle: 'side',
|
||||
// 侧边栏菜单风格: default(默认), mix(双排菜单)
|
||||
sideMenuStyle: 'default',
|
||||
// 是否固定侧栏
|
||||
fixedSidebar: true,
|
||||
// 是否固定顶栏
|
||||
fixedHeader: false,
|
||||
// 是否固定主体
|
||||
fixedBody: true,
|
||||
// logo是否自适应宽度
|
||||
logoAutoSize: false,
|
||||
// 内容区域宽度是否铺满
|
||||
bodyFull: true,
|
||||
// 是否开启多标签
|
||||
showTabs: true,
|
||||
// 侧栏是否多彩图标
|
||||
colorfulIcon: false,
|
||||
// 侧边栏是否只保持一个子菜单展开
|
||||
sideUniqueOpen: true,
|
||||
// 是否开启页脚
|
||||
showFooter: true,
|
||||
// 是否是色弱模式
|
||||
weakMode: false,
|
||||
// 是否是暗黑模式
|
||||
darkMode: false,
|
||||
// 默认主题色
|
||||
color: null,
|
||||
/**
|
||||
* 获取缓存的token的方法
|
||||
* @returns {string}
|
||||
*/
|
||||
takeToken() {
|
||||
let token = localStorage.getItem(this.tokenStoreName);
|
||||
if (!token) {
|
||||
token = sessionStorage.getItem(this.tokenStoreName);
|
||||
}
|
||||
return token;
|
||||
},
|
||||
/**
|
||||
* 缓存token的方法
|
||||
* @param token
|
||||
* @param remember 是否永久存储
|
||||
*/
|
||||
cacheToken(token, remember) {
|
||||
localStorage.removeItem(this.tokenStoreName);
|
||||
sessionStorage.removeItem(this.tokenStoreName);
|
||||
if (token) {
|
||||
if (remember) {
|
||||
localStorage.setItem(this.tokenStoreName, token);
|
||||
} else {
|
||||
sessionStorage.setItem(this.tokenStoreName, token);
|
||||
}
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 获取缓存的用户信息
|
||||
* @returns {object}
|
||||
*/
|
||||
takeUser() {
|
||||
try {
|
||||
return JSON.parse(localStorage.getItem(this.userStoreName)) || {};
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
return {};
|
||||
},
|
||||
/**
|
||||
* 缓存用户信息
|
||||
* @param user
|
||||
*/
|
||||
cacheUser(user) {
|
||||
if (user) {
|
||||
localStorage.setItem(this.userStoreName, JSON.stringify(user));
|
||||
} else {
|
||||
localStorage.removeItem(this.userStoreName);
|
||||
}
|
||||
}
|
||||
}
|
||||
106
src/lang/en.js
Normal file
106
src/lang/en.js
Normal file
@@ -0,0 +1,106 @@
|
||||
/**
|
||||
* 英语
|
||||
*/
|
||||
export default {
|
||||
route: {
|
||||
dashboard: {
|
||||
_name: 'Dashboard',
|
||||
workplace: {_name: 'Workplace'},
|
||||
analysis: {_name: 'Analysis'},
|
||||
monitor: {_name: 'Monitor'}
|
||||
},
|
||||
system: {
|
||||
_name: 'System',
|
||||
user: {
|
||||
_name: 'User',
|
||||
info: {_name: ''}
|
||||
},
|
||||
role: {_name: 'Role'},
|
||||
menu: {_name: 'Menu'},
|
||||
dictionary: {_name: 'Dictionary'},
|
||||
organization: {_name: 'Organization'},
|
||||
loginRecord: {_name: 'Login Record'},
|
||||
operRecord: {_name: 'Operation Log'}
|
||||
},
|
||||
form: {
|
||||
_name: 'Form',
|
||||
basic: {_name: 'Basic Form'},
|
||||
advanced: {_name: 'Advanced Form'},
|
||||
step: {_name: 'Step Form'}
|
||||
},
|
||||
list: {
|
||||
_name: 'List',
|
||||
basic: {_name: 'Basic List'},
|
||||
advanced: {_name: 'Advanced List'},
|
||||
card: {
|
||||
_name: 'Card List',
|
||||
project: {_name: 'Project'},
|
||||
application: {_name: 'Application'},
|
||||
article: {_name: 'Article'}
|
||||
}
|
||||
},
|
||||
result: {
|
||||
_name: 'Result',
|
||||
success: {_name: 'Success'},
|
||||
fail: {_name: 'Fail'}
|
||||
},
|
||||
exception: {
|
||||
_name: 'Exception',
|
||||
'403': {_name: '403'},
|
||||
'404': {_name: '404'},
|
||||
'500': {_name: '500'}
|
||||
},
|
||||
user: {
|
||||
_name: 'User',
|
||||
profile: {_name: 'Profile'},
|
||||
message: {_name: 'Message'}
|
||||
},
|
||||
extension: {
|
||||
_name: 'Extension',
|
||||
icon: {_name: 'Icon'},
|
||||
file: {_name: 'File'},
|
||||
printer: {_name: 'Printer'},
|
||||
excel: {_name: 'Excel'},
|
||||
dragsort: {_name: 'Drag Sort'},
|
||||
map: {_name: 'Map'},
|
||||
player: {_name: 'Player'},
|
||||
editor: {_name: 'Editor'},
|
||||
more: {_name: 'More'}
|
||||
},
|
||||
example: {
|
||||
_name: 'Example',
|
||||
document: {_name: 'Document'},
|
||||
choose: {_name: 'Choose'},
|
||||
eleadmin: {_name: 'IFrame'}
|
||||
},
|
||||
'https://eleadminCom/goods/9': {_name: 'Authorization'}
|
||||
},
|
||||
layout: {
|
||||
home: 'Home',
|
||||
header: {
|
||||
profile: 'Profile',
|
||||
password: 'Password',
|
||||
logout: 'SignOut'
|
||||
},
|
||||
footer: {
|
||||
website: 'Website',
|
||||
document: 'Document',
|
||||
authorization: 'Authorization',
|
||||
copyright: 'Copyright © 2021 南宁网宿信息科技有限公司'
|
||||
},
|
||||
logout: {
|
||||
title: 'Confirm',
|
||||
message: 'Are you sure you want to logout?'
|
||||
}
|
||||
},
|
||||
login: {
|
||||
title: 'User Login',
|
||||
username: 'please input username',
|
||||
password: 'please input password',
|
||||
code: 'please input code',
|
||||
remember: 'remember',
|
||||
forget: 'forget',
|
||||
login: 'login',
|
||||
loading: 'loading'
|
||||
}
|
||||
}
|
||||
22
src/lang/index.js
Normal file
22
src/lang/index.js
Normal file
@@ -0,0 +1,22 @@
|
||||
/**
|
||||
* 国际化配置
|
||||
*/
|
||||
import {createI18n} from 'vue-i18n';
|
||||
import enLocale from './en';
|
||||
import zhCNLocale from './zh_CN';
|
||||
import zhTWLocale from './zh_TW';
|
||||
|
||||
const messages = {
|
||||
en: enLocale,
|
||||
zh_CN: zhCNLocale,
|
||||
zh_TW: zhTWLocale
|
||||
};
|
||||
|
||||
const i18n = createI18n({
|
||||
messages: messages,
|
||||
silentTranslationWarn: true,
|
||||
// 默认语言
|
||||
locale: localStorage.getItem('i18n-lang') || 'zh_CN'
|
||||
});
|
||||
|
||||
export default i18n;
|
||||
106
src/lang/zh_CN.js
Normal file
106
src/lang/zh_CN.js
Normal file
@@ -0,0 +1,106 @@
|
||||
/**
|
||||
* 简体中文
|
||||
*/
|
||||
export default {
|
||||
route: {
|
||||
dashboard: {
|
||||
_name: 'Dashboard',
|
||||
workplace: {_name: '工作台'},
|
||||
analysis: {_name: '分析页'},
|
||||
monitor: {_name: '监控页'}
|
||||
},
|
||||
system: {
|
||||
_name: '系统管理',
|
||||
user: {
|
||||
_name: '用户管理',
|
||||
info: {_name: ''}
|
||||
},
|
||||
role: {_name: '角色管理'},
|
||||
menu: {_name: '菜单管理'},
|
||||
dictionary: {_name: '字典管理'},
|
||||
organization: {_name: '机构管理'},
|
||||
loginRecord: {_name: '登录日志'},
|
||||
operRecord: {_name: '操作日志'}
|
||||
},
|
||||
form: {
|
||||
_name: '表单页面',
|
||||
basic: {_name: '基础表单'},
|
||||
advanced: {_name: '复杂表单'},
|
||||
step: {_name: '分步表单'}
|
||||
},
|
||||
list: {
|
||||
_name: '列表页面',
|
||||
basic: {_name: '基础列表'},
|
||||
advanced: {_name: '复杂列表'},
|
||||
card: {
|
||||
_name: '卡片列表',
|
||||
project: {_name: '项目列表'},
|
||||
application: {_name: '应用列表'},
|
||||
article: {_name: '文章列表'}
|
||||
}
|
||||
},
|
||||
result: {
|
||||
_name: '结果页面',
|
||||
success: {_name: '成功页'},
|
||||
fail: {_name: '失败页'}
|
||||
},
|
||||
exception: {
|
||||
_name: '异常页面',
|
||||
'403': {_name: '403'},
|
||||
'404': {_name: '404'},
|
||||
'500': {_name: '500'}
|
||||
},
|
||||
user: {
|
||||
_name: '个人中心',
|
||||
profile: {_name: '个人资料'},
|
||||
message: {_name: '我的消息'}
|
||||
},
|
||||
extension: {
|
||||
_name: '扩展组件',
|
||||
icon: {_name: '字体图标'},
|
||||
file: {_name: '文件列表'},
|
||||
printer: {_name: '打印插件'},
|
||||
excel: {_name: 'excel插件'},
|
||||
dragsort: {_name: '拖拽排序'},
|
||||
map: {_name: '地图组件'},
|
||||
player: {_name: '视频播放'},
|
||||
editor: {_name: '富文本框'},
|
||||
more: {_name: '更多组件'}
|
||||
},
|
||||
example: {
|
||||
_name: '经典实例',
|
||||
document: {_name: '案卷调整'},
|
||||
choose: {_name: '批量选择'},
|
||||
eleadmin: {_name: '内嵌页面'}
|
||||
},
|
||||
'https://eleadminCom/goods/9': {_name: '获取授权'}
|
||||
},
|
||||
layout: {
|
||||
home: '主页',
|
||||
header: {
|
||||
profile: '个人中心',
|
||||
password: '修改密码',
|
||||
logout: '退出登录'
|
||||
},
|
||||
footer: {
|
||||
website: '官网',
|
||||
document: '文档',
|
||||
authorization: '授权',
|
||||
copyright: 'Copyright © 2021 南宁网宿信息科技有限公司'
|
||||
},
|
||||
logout: {
|
||||
title: '提示',
|
||||
message: '确定要退出登录吗?'
|
||||
}
|
||||
},
|
||||
login: {
|
||||
title: '用户登录',
|
||||
username: '请输入登录账号',
|
||||
password: '请输入登录密码',
|
||||
code: '请输入验证码',
|
||||
remember: '记住密码',
|
||||
forget: '忘记密码',
|
||||
login: '登录',
|
||||
loading: '登录中'
|
||||
}
|
||||
}
|
||||
106
src/lang/zh_TW.js
Normal file
106
src/lang/zh_TW.js
Normal file
@@ -0,0 +1,106 @@
|
||||
/**
|
||||
* 繁体中文
|
||||
*/
|
||||
export default {
|
||||
route: {
|
||||
dashboard: {
|
||||
_name: 'Dashboard',
|
||||
workplace: {_name: '工作臺'},
|
||||
analysis: {_name: '分析頁'},
|
||||
monitor: {_name: '監控頁'}
|
||||
},
|
||||
system: {
|
||||
_name: '系統管理',
|
||||
user: {
|
||||
_name: '用戶管理',
|
||||
info: {_name: ''}
|
||||
},
|
||||
role: {_name: '角色管理'},
|
||||
menu: {_name: '選單管理'},
|
||||
dictionary: {_name: '字典管理'},
|
||||
organization: {_name: '機构管理'},
|
||||
loginRecord: {_name: '登入日誌'},
|
||||
operRecord: {_name: '操作日誌'}
|
||||
},
|
||||
form: {
|
||||
_name: '表單頁面',
|
||||
basic: {_name: '基礎表單'},
|
||||
advanced: {_name: '複雜表單'},
|
||||
step: {_name: '分步表單'}
|
||||
},
|
||||
list: {
|
||||
_name: '清單頁面',
|
||||
basic: {_name: '基礎清單'},
|
||||
advanced: {_name: '複雜清單'},
|
||||
card: {
|
||||
_name: '卡片清單',
|
||||
project: {_name: '項目清單'},
|
||||
application: {_name: '應用清單'},
|
||||
article: {_name: '文章清單'}
|
||||
}
|
||||
},
|
||||
result: {
|
||||
_name: '結果頁面',
|
||||
success: {_name: '成功頁'},
|
||||
fail: {_name: '失敗頁'}
|
||||
},
|
||||
exception: {
|
||||
_name: '异常頁面',
|
||||
'403': {_name: '403'},
|
||||
'404': {_name: '404'},
|
||||
'500': {_name: '500'}
|
||||
},
|
||||
user: {
|
||||
_name: '個人中心',
|
||||
profile: {_name: '個人資料'},
|
||||
message: {_name: '我的消息'}
|
||||
},
|
||||
extension: {
|
||||
_name: '擴展組件',
|
||||
icon: {_name: '字體圖標'},
|
||||
file: {_name: '檔案清單'},
|
||||
printer: {_name: '列印挿件'},
|
||||
excel: {_name: 'excel挿件'},
|
||||
dragsort: {_name: '拖拽排序'},
|
||||
map: {_name: '地圖組件'},
|
||||
player: {_name: '視頻播放'},
|
||||
editor: {_name: '富文本框'},
|
||||
more: {_name: '更多組件'}
|
||||
},
|
||||
example: {
|
||||
_name: '經典實例',
|
||||
document: {_name: '案卷調整'},
|
||||
choose: {_name: '批量選擇'},
|
||||
eleadmin: {_name: '內嵌頁面'}
|
||||
},
|
||||
'https://eleadminCom/goods/9': {_name: '獲取授權'}
|
||||
},
|
||||
layout: {
|
||||
home: '主頁',
|
||||
header: {
|
||||
profile: '個人中心',
|
||||
password: '修改密碼',
|
||||
logout: '安全登出'
|
||||
},
|
||||
footer: {
|
||||
website: '官網',
|
||||
document: '檔案',
|
||||
authorization: '授權',
|
||||
copyright: 'Copyright © 2021 南宁网宿信息科技有限公司'
|
||||
},
|
||||
logout: {
|
||||
title: '詢問',
|
||||
message: '確定要登出嗎?'
|
||||
}
|
||||
},
|
||||
login: {
|
||||
title: '用戶登錄',
|
||||
username: '請輸入登入帳號',
|
||||
password: '請輸入登入密碼',
|
||||
code: '請輸入驗證碼',
|
||||
remember: '記住密碼',
|
||||
forget: '忘記密碼',
|
||||
login: '登入',
|
||||
loading: '登入中'
|
||||
}
|
||||
}
|
||||
34
src/layout/footer.vue
Normal file
34
src/layout/footer.vue
Normal file
@@ -0,0 +1,34 @@
|
||||
<!-- 页脚 -->
|
||||
<template>
|
||||
<div class="ele-text-center" style="padding: 16px 0;">
|
||||
<!-- <a-space size="large">
|
||||
<a
|
||||
class="ele-text-secondary"
|
||||
href="https://eleadmin.com"
|
||||
target="_blank">
|
||||
{{ $t('layout.footer.website') }}
|
||||
</a>
|
||||
<a
|
||||
class="ele-text-secondary"
|
||||
href="https://eleadmin.com/doc/eleadminpro/"
|
||||
target="_blank">
|
||||
{{ $t('layout.footer.document') }}
|
||||
</a>
|
||||
<a
|
||||
class="ele-text-secondary"
|
||||
href="https://eleadmin.com/goods/9"
|
||||
target="_blank">
|
||||
{{ $t('layout.footer.authorization') }}
|
||||
</a>
|
||||
</a-space> -->
|
||||
<div class="ele-text-secondary" style="margin-top: 8px;">
|
||||
{{ $t('layout.footer.copyright') }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'EleFooter'
|
||||
}
|
||||
</script>
|
||||
163
src/layout/header-right.vue
Normal file
163
src/layout/header-right.vue
Normal file
@@ -0,0 +1,163 @@
|
||||
<!-- 顶栏右侧区域按钮 -->
|
||||
<template>
|
||||
<div class="ele-admin-header-tool">
|
||||
<div class="ele-admin-header-tool-item hidden-sm-and-down" @click="changeFullscreen">
|
||||
<fullscreen-exit-outlined v-if="fullscreen"/>
|
||||
<fullscreen-outlined v-else/>
|
||||
</div>
|
||||
<!-- 语言切换 -->
|
||||
<!-- <div class="ele-admin-header-tool-item">
|
||||
<a-dropdown placement="bottomCenter" :overlay-style="{minWidth: '120px', paddingTop: '17px'}">
|
||||
<global-outlined style="transform: scale(1.08);"/>
|
||||
<template #overlay>
|
||||
<a-menu :selected-keys="language" @click="changeLanguage">
|
||||
<a-menu-item key="en">English</a-menu-item>
|
||||
<a-menu-item key="zh_CN">简体中文</a-menu-item>
|
||||
<a-menu-item key="zh_TW">繁體中文</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</div> -->
|
||||
<!-- 消息通知 -->
|
||||
<!-- <div class="ele-admin-header-tool-item">
|
||||
<ele-notice/>
|
||||
</div> -->
|
||||
<!-- 用户信息 -->
|
||||
<div class="ele-admin-header-tool-item">
|
||||
<a-dropdown placement="bottomCenter" :overlay-style="{minWidth: '120px'}">
|
||||
<div class="ele-admin-header-avatar">
|
||||
<a-avatar :src="loginUser.avatar"/>
|
||||
<span>{{ loginUser.nickname }} </span>
|
||||
<down-outlined/>
|
||||
</div>
|
||||
<template #overlay>
|
||||
<a-menu @click="onUserDropClick">
|
||||
<a-menu-item key="profile">
|
||||
<div class="ele-cell">
|
||||
<user-outlined/>
|
||||
<div class="ele-cell-content">{{ $t('layout.header.profile') }}</div>
|
||||
</div>
|
||||
</a-menu-item>
|
||||
<a-menu-item key="password">
|
||||
<div class="ele-cell">
|
||||
<key-outlined/>
|
||||
<div class="ele-cell-content">{{ $t('layout.header.password') }}</div>
|
||||
</div>
|
||||
</a-menu-item>
|
||||
<a-menu-divider/>
|
||||
<a-menu-item key="logout">
|
||||
<div class="ele-cell">
|
||||
<logout-outlined/>
|
||||
<div class="ele-cell-content">{{ $t('layout.header.logout') }}</div>
|
||||
</div>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
<!-- 主题设置 -->
|
||||
<div v-if="showSetting" class="ele-admin-header-tool-item" @click="openSetting">
|
||||
<MoreOutlined/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {createVNode} from 'vue';
|
||||
import {
|
||||
DownOutlined,
|
||||
MoreOutlined,
|
||||
UserOutlined,
|
||||
KeyOutlined,
|
||||
LogoutOutlined,
|
||||
ExclamationCircleOutlined,
|
||||
FullscreenOutlined,
|
||||
FullscreenExitOutlined,
|
||||
// GlobalOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import {toggleFullscreen, isFullscreen} from 'ele-admin-pro/packages/util.js';
|
||||
// import EleNotice from './notice';
|
||||
|
||||
export default {
|
||||
name: 'EleHeaderRight',
|
||||
components: {
|
||||
DownOutlined,
|
||||
MoreOutlined,
|
||||
UserOutlined,
|
||||
KeyOutlined,
|
||||
LogoutOutlined,
|
||||
FullscreenOutlined,
|
||||
FullscreenExitOutlined,
|
||||
// GlobalOutlined,
|
||||
// EleNotice
|
||||
},
|
||||
emits: ['item-click', 'change-language'],
|
||||
props: {
|
||||
// 是否显示打开设置抽屉按钮
|
||||
showSetting: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 当前登录用户信息
|
||||
loginUser() {
|
||||
return this.$store.state.user.user;
|
||||
},
|
||||
// 当前语言
|
||||
language() {
|
||||
return [this.$i18n.locale];
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 是否全屏状态
|
||||
fullscreen: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/* 个人信息下拉菜单点击 */
|
||||
onUserDropClick({key}) {
|
||||
if (key === 'logout') {
|
||||
// 退出登录
|
||||
this.$confirm({
|
||||
title: this.$t('layout.logout.title'),
|
||||
content: this.$t('layout.logout.message'),
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
// 清除缓存的token
|
||||
this.$store.dispatch('user/removeToken').then(() => {
|
||||
location.replace('/login'); // 这样跳转避免再次登录重复注册动态路由
|
||||
});
|
||||
}
|
||||
});
|
||||
} else if (key === 'profile') {
|
||||
this.$router.push('/user/profile');
|
||||
} else if (key === 'password') {
|
||||
this.$emit('item-click', 'password');
|
||||
}
|
||||
},
|
||||
/* 打开设置抽屉 */
|
||||
openSetting() {
|
||||
this.$emit('item-click', 'setting');
|
||||
},
|
||||
/* 全屏切换 */
|
||||
changeFullscreen() {
|
||||
try {
|
||||
this.fullscreen = toggleFullscreen();
|
||||
} catch (e) {
|
||||
this.$message.error('您的浏览器不支持全屏模式');
|
||||
}
|
||||
},
|
||||
/* 检查全屏状态 */
|
||||
checkFullscreen() {
|
||||
this.fullscreen = isFullscreen();
|
||||
},
|
||||
/* 切换语言 */
|
||||
changeLanguage({key}) {
|
||||
this.$emit('change-language', key);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
240
src/layout/index.vue
Normal file
240
src/layout/index.vue
Normal file
@@ -0,0 +1,240 @@
|
||||
<!-- 框架布局 -->
|
||||
<template>
|
||||
<ele-pro-layout
|
||||
ref="layout"
|
||||
:i18n="i18n"
|
||||
:menus="user.menus"
|
||||
:home-title="homeTitle"
|
||||
:project-name="projectName"
|
||||
:show-content="showContent"
|
||||
v-model:show-setting="showSetting"
|
||||
:need-setting="setting.needSetting"
|
||||
:hide-footers="setting.hideFooters"
|
||||
:hide-sidebars="setting.hideSidebars"
|
||||
:repeatable-tabs="setting.repeatableTabs"
|
||||
:tabs="theme.tabs"
|
||||
:color="theme.color"
|
||||
:collapse="theme.collapse"
|
||||
:head-style="theme.headStyle"
|
||||
:side-style="theme.sideStyle"
|
||||
:layout-style="theme.layoutStyle"
|
||||
:side-menu-style="theme.sideMenuStyle"
|
||||
:fixed-body="theme.fixedBody"
|
||||
:fixed-header="theme.fixedHeader"
|
||||
:fixed-sidebar="theme.fixedSidebar"
|
||||
:body-full="theme.bodyFull"
|
||||
:show-footer="theme.showFooter"
|
||||
:colorful-icon="theme.colorfulIcon"
|
||||
:logo-auto-size="theme.logoAutoSize"
|
||||
:side-unique-open="theme.sideUniqueOpen"
|
||||
:show-tabs="theme.showTabs"
|
||||
:tab-style="theme.tabStyle"
|
||||
:dark-mode="theme.darkMode"
|
||||
:weak-mode="theme.weakMode"
|
||||
@logo-click="onLogoClick"
|
||||
@reload-page="reloadPage"
|
||||
@update-screen="updateScreen"
|
||||
@update-collapse="updateCollapse"
|
||||
@tab-add="tabAdd"
|
||||
@tab-remove="tabRemove"
|
||||
@tab-remove-all="tabRemoveAll"
|
||||
@tab-remove-left="tabRemoveLeft"
|
||||
@tab-remove-right="tabRemoveRight"
|
||||
@tab-remove-other="tabRemoveOther"
|
||||
@change-style="changeStyle"
|
||||
@change-color="changeColor"
|
||||
@change-dark-mode="changeDarkMode"
|
||||
@change-weak-mode="changeWeakMode"
|
||||
@set-home-components="setHomeComponents">
|
||||
<!-- logo图标 -->
|
||||
<template #logo>
|
||||
<img src="@/assets/logo.svg" alt="logo"/>
|
||||
</template>
|
||||
<!-- 顶栏右侧区域 -->
|
||||
<template #right>
|
||||
<ele-header-right
|
||||
ref="header"
|
||||
:show-setting="setting.needSetting"
|
||||
@change-language="changeLanguage"
|
||||
@item-click="onItemClick"/>
|
||||
</template>
|
||||
<!-- 全局页脚 -->
|
||||
<template #footer>
|
||||
<ele-footer/>
|
||||
</template>
|
||||
<!-- 修改密码弹窗 -->
|
||||
<ele-password v-model:visible="showPassword"/>
|
||||
</ele-pro-layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapGetters} from 'vuex';
|
||||
import EleHeaderRight from './header-right';
|
||||
import ElePassword from './password';
|
||||
import EleFooter from './footer';
|
||||
import setting from '@/config/setting';
|
||||
import {
|
||||
reloadPageTab,
|
||||
addPageTab,
|
||||
removePageTab,
|
||||
removeAllPageTab,
|
||||
removeLeftPageTab,
|
||||
removeRightPageTab,
|
||||
removeOtherPageTab
|
||||
} from '@/utils/page-tab-util';
|
||||
|
||||
export default {
|
||||
name: 'EleLayout',
|
||||
components: {
|
||||
EleHeaderRight,
|
||||
ElePassword,
|
||||
EleFooter
|
||||
},
|
||||
computed: {
|
||||
// 主页标题, 移除国际化上面template中使用:home-title="setting.homeTitle"
|
||||
homeTitle() {
|
||||
return this.$t('layout.home');
|
||||
},
|
||||
...mapGetters(['theme', 'user'])
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 全局配置
|
||||
setting: setting,
|
||||
// 是否显示修改密码弹窗
|
||||
showPassword: false,
|
||||
// 是否显示主题设置抽屉
|
||||
showSetting: false,
|
||||
// 是否显示主体部分
|
||||
showContent: true,
|
||||
// 项目名
|
||||
projectName: process.env.VUE_APP_NAME
|
||||
};
|
||||
},
|
||||
created() {
|
||||
// 获取用户信息
|
||||
this.getUserInfo();
|
||||
},
|
||||
methods: {
|
||||
/* 获取当前用户信息 */
|
||||
getUserInfo() {
|
||||
if (setting.userUrl) {
|
||||
this.$http.get(setting.userUrl).then((res) => {
|
||||
const result = setting.parseUser ? setting.parseUser(res.data) : res.data;
|
||||
if (result.code === 0) {
|
||||
const user = result.data;
|
||||
this.$store.dispatch('user/setUser', user);
|
||||
this.$store.dispatch('user/setRoles', user ? user.roles : null);
|
||||
this.$store.dispatch('user/setAuthorities', user ? user.authorities : null);
|
||||
} else if (result.msg) {
|
||||
this.$message.error(result.msg);
|
||||
}
|
||||
// 在用户权限信息请求完成后再渲染主体部分, 以免权限控制指令不生效
|
||||
this.showContent = true;
|
||||
}).catch((e) => {
|
||||
console.error(e);
|
||||
this.showContent = true;
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
}
|
||||
},
|
||||
/* 顶栏右侧点击 */
|
||||
onItemClick(key) {
|
||||
if (key === 'password') {
|
||||
this.showPassword = true;
|
||||
} else if (key === 'setting') {
|
||||
this.showSetting = true;
|
||||
}
|
||||
},
|
||||
/* 刷新页签 */
|
||||
reloadPage() {
|
||||
reloadPageTab();
|
||||
},
|
||||
/* logo点击事件 */
|
||||
onLogoClick(isHome) {
|
||||
if (!isHome) {
|
||||
this.$router.push('/');
|
||||
}
|
||||
},
|
||||
/* 更新collapse */
|
||||
updateCollapse(value) {
|
||||
this.$store.dispatch('theme/set', {key: 'collapse', value: value});
|
||||
},
|
||||
/* 更新屏幕尺寸 */
|
||||
updateScreen() {
|
||||
this.$store.dispatch('theme/updateScreen');
|
||||
const checkFullscreen = this.$refs.header.checkFullscreen;
|
||||
checkFullscreen && checkFullscreen();
|
||||
},
|
||||
/* 切换主题风格 */
|
||||
changeStyle(value) {
|
||||
this.$store.dispatch('theme/set', value);
|
||||
},
|
||||
/* 切换主题色 */
|
||||
changeColor(value) {
|
||||
const hide = this.$message.loading({content: '正在加载主题...'});
|
||||
this.$store.dispatch('theme/setColor', value).then(() => {
|
||||
hide();
|
||||
}).catch((e) => {
|
||||
console.error(e);
|
||||
hide();
|
||||
this.$message.error('主题加载失败');
|
||||
});
|
||||
},
|
||||
changeDarkMode(value) {
|
||||
this.$store.dispatch('theme/setDarkMode', value);
|
||||
},
|
||||
changeWeakMode(value) {
|
||||
this.$store.dispatch('theme/setWeakMode', value);
|
||||
},
|
||||
setHomeComponents(components) {
|
||||
this.$store.dispatch('theme/setHomeComponents', components);
|
||||
},
|
||||
/* 添加tab */
|
||||
tabAdd(value) {
|
||||
addPageTab(value);
|
||||
},
|
||||
/* 移除tab */
|
||||
tabRemove(obj) {
|
||||
removePageTab(obj.name).then(({lastPath}) => {
|
||||
if (obj.active === obj.name) {
|
||||
this.$router.push(lastPath || '/');
|
||||
}
|
||||
});
|
||||
},
|
||||
/* 移除全部tab */
|
||||
tabRemoveAll(active) {
|
||||
removeAllPageTab();
|
||||
if (active !== '/') {
|
||||
this.$router.push('/');
|
||||
}
|
||||
},
|
||||
/* 移除左边tab */
|
||||
tabRemoveLeft(value) {
|
||||
removeLeftPageTab(value);
|
||||
},
|
||||
/* 移除右边tab */
|
||||
tabRemoveRight(value) {
|
||||
removeRightPageTab(value);
|
||||
},
|
||||
/* 移除其它tab */
|
||||
tabRemoveOther(value) {
|
||||
removeOtherPageTab(value);
|
||||
},
|
||||
/* 菜单路由国际化对应的名称 */
|
||||
i18n(path, key/*, menu*/) {
|
||||
// 参数三menu即原始菜单数据, 如果需要菜单标题多语言数据从接口返回可用此参数获取对应的多语言标题
|
||||
// 例如下面这样写, 接口的菜单数据为{path: '/system/user', titles: {zh: '用户管理', en: 'User'}}
|
||||
// return menu ? menu.titles[this.$i18n.locale] : null;
|
||||
const k = 'route.' + key + '._name', title = this.$t(k);
|
||||
return title === k ? null : title;
|
||||
},
|
||||
/* 切换语言 */
|
||||
changeLanguage(lang) {
|
||||
this.$i18n.locale = lang;
|
||||
this.$refs.layout.changeLanguage();
|
||||
localStorage.setItem('i18n-lang', lang);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
278
src/layout/notice.vue
Normal file
278
src/layout/notice.vue
Normal file
@@ -0,0 +1,278 @@
|
||||
<!-- 顶栏消息通知图标 -->
|
||||
<template>
|
||||
<a-dropdown v-model:visible="visible" :trigger="['click']">
|
||||
<a-badge :count="allNum" class="ele-notice-trigger">
|
||||
<bell-outlined style="padding: 6px;"/>
|
||||
</a-badge>
|
||||
<template #overlay>
|
||||
<div class="ant-dropdown-menu ele-notice-pop">
|
||||
<div @click.stop="">
|
||||
<a-tabs v-model:active-key="active">
|
||||
<a-tab-pane key="notice" :tab="noticeTitle" force-render>
|
||||
<a-list item-layout="horizontal" :data-source="notice">
|
||||
<template #renderItem="{item}">
|
||||
<a-list-item>
|
||||
<a-list-item-meta :title="item.title" :description="item.time">
|
||||
<template #avatar>
|
||||
<a-avatar :style="{background: item.color}">
|
||||
<template #icon>
|
||||
<component :is="item.icon"/>
|
||||
</template>
|
||||
</a-avatar>
|
||||
</template>
|
||||
</a-list-item-meta>
|
||||
</a-list-item>
|
||||
</template>
|
||||
</a-list>
|
||||
<div v-if="notice.length" class="ele-cell ele-notice-actions">
|
||||
<div class="ele-cell-content" @click="clear('notice')">清空通知</div>
|
||||
<a-divider type="vertical"/>
|
||||
<div class="ele-cell-content" @click="more('notice')">查看更多</div>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="message" :tab="messageTitle" force-render>
|
||||
<a-list item-layout="horizontal" :data-source="message">
|
||||
<template #renderItem="{item}">
|
||||
<a-list-item>
|
||||
<a-list-item-meta :title="item.title">
|
||||
<template #avatar>
|
||||
<a-avatar :src="item.avatar"/>
|
||||
</template>
|
||||
<template #description>
|
||||
<div>{{ item.content }}</div>
|
||||
<div>{{ item.time }}</div>
|
||||
</template>
|
||||
</a-list-item-meta>
|
||||
</a-list-item>
|
||||
</template>
|
||||
</a-list>
|
||||
<div v-if="message.length" class="ele-cell ele-notice-actions">
|
||||
<div class="ele-cell-content" @click="clear('message')">清空私信</div>
|
||||
<a-divider type="vertical"/>
|
||||
<div class="ele-cell-content" @click="more('message')">查看更多</div>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="todo" :tab="todoTitle" force-render>
|
||||
<a-list item-layout="horizontal" :data-source="todo">
|
||||
<template #renderItem="{item}">
|
||||
<a-list-item>
|
||||
<a-list-item-meta :description="item.desc">
|
||||
<template #title>
|
||||
<div class="ele-cell">
|
||||
<div class="ele-cell-content">{{ item.title }}</div>
|
||||
<a-tag :color="['', 'red', 'blue'][item.state]">
|
||||
{{ ['未开始', '即将到期', '进行中'][item.state] }}
|
||||
</a-tag>
|
||||
</div>
|
||||
</template>
|
||||
</a-list-item-meta>
|
||||
</a-list-item>
|
||||
</template>
|
||||
</a-list>
|
||||
<div v-if="todo.length" class="ele-cell ele-notice-actions">
|
||||
<div class="ele-cell-content" @click="clear('todo')">清空待办</div>
|
||||
<a-divider type="vertical"/>
|
||||
<div class="ele-cell-content" @click="more('todo')">查看更多</div>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
BellOutlined,
|
||||
NotificationFilled,
|
||||
PushpinFilled,
|
||||
VideoCameraFilled,
|
||||
CarryOutFilled,
|
||||
BellFilled
|
||||
} from '@ant-design/icons-vue';
|
||||
|
||||
export default {
|
||||
name: 'EleNotice',
|
||||
components: {
|
||||
BellOutlined,
|
||||
NotificationFilled,
|
||||
PushpinFilled,
|
||||
VideoCameraFilled,
|
||||
CarryOutFilled,
|
||||
BellFilled
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
active: 'notice',
|
||||
notice: [
|
||||
{
|
||||
color: '#60B2FC',
|
||||
icon: 'NotificationFilled',
|
||||
title: '你收到了一封14份新周报',
|
||||
time: '2020-07-27 18:30:18'
|
||||
},
|
||||
{
|
||||
color: '#F5686F',
|
||||
icon: 'PushpinFilled',
|
||||
title: '许经理同意了你的请假申请',
|
||||
time: '2020-07-27 09:08:36'
|
||||
},
|
||||
{
|
||||
color: '#7CD734',
|
||||
icon: 'VideoCameraFilled',
|
||||
title: '陈总邀请你参加视频会议',
|
||||
time: '2020-07-26 18:30:01'
|
||||
},
|
||||
{
|
||||
color: '#FAAD14',
|
||||
icon: 'CarryOutFilled',
|
||||
title: '你推荐的刘诗雨已通过第三轮面试',
|
||||
time: '2020-07-25 16:38:46'
|
||||
},
|
||||
{
|
||||
color: '#2BCACD',
|
||||
icon: 'BellFilled',
|
||||
title: '你的6月加班奖金已发放',
|
||||
time: '2020-07-25 11:03:31'
|
||||
}
|
||||
],
|
||||
message: [
|
||||
{
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg',
|
||||
title: 'SunSmile 评论了你的日志',
|
||||
content: '写的不错, 以后多多向你学习~',
|
||||
time: '2020-07-27 18:30:18'
|
||||
},
|
||||
{
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg',
|
||||
title: '刘诗雨 点赞了你的日志',
|
||||
content: '写的不错, 以后多多向你学习~',
|
||||
time: '2020-07-27 09:08:36'
|
||||
},
|
||||
{
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/2d98970a51b34b6b859339c96b240dcd.jpg',
|
||||
title: '酷酷的大叔 评论了你的周报',
|
||||
content: '写的不错, 以后多多向你学习~',
|
||||
time: '2020-07-26 18:30:01'
|
||||
},
|
||||
{
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/f6bc05af944a4f738b54128717952107.jpg',
|
||||
title: 'Jasmine 点赞了你的周报',
|
||||
content: '写的不错, 以后多多向你学习~',
|
||||
time: '2020-07-25 11:03:31'
|
||||
}
|
||||
],
|
||||
todo: [
|
||||
{
|
||||
state: 0,
|
||||
title: '刘诗雨的请假审批',
|
||||
desc: '刘诗雨在 07-27 18:30 提交的请假申请'
|
||||
},
|
||||
{
|
||||
state: 1,
|
||||
title: '第三方代码紧急变更',
|
||||
desc: '需要在 2020-07-27 之前完成'
|
||||
},
|
||||
{
|
||||
state: 2,
|
||||
title: '信息安全考试',
|
||||
desc: '需要在 2020-07-26 18:30 前完成'
|
||||
},
|
||||
{
|
||||
state: 2,
|
||||
title: 'EleAdmin发布新版本',
|
||||
desc: '需要在 2020-07-25 11:03 前完成'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 通知标题
|
||||
noticeTitle() {
|
||||
return this.notice.length ? `通知(${this.notice.length})` : '通知';
|
||||
},
|
||||
// 私信标题
|
||||
messageTitle() {
|
||||
return this.message.length ? `私信(${this.message.length})` : '私信';
|
||||
},
|
||||
// 待办标题
|
||||
todoTitle() {
|
||||
return this.todo.length ? `待办(${this.todo.length})` : '待办';
|
||||
},
|
||||
// 所有消息数量
|
||||
allNum() {
|
||||
return this.notice.length + this.message.length + this.todo.length;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/* 清空消息 */
|
||||
clear(type) {
|
||||
if (type === 'notice') {
|
||||
this.notice = [];
|
||||
} else if (type === 'message') {
|
||||
this.message = [];
|
||||
} else if (type === 'todo') {
|
||||
this.todo = [];
|
||||
}
|
||||
},
|
||||
/* 查看更多 */
|
||||
more(type) {
|
||||
this.visible = false;
|
||||
if (this.$route.path !== '/user/message' || this.$route.query.type !== type) {
|
||||
this.$router.push({path: '/user/message', query: {type: type}});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.ele-notice-trigger.ant-badge {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.ele-notice-pop.ant-dropdown-menu {
|
||||
padding: 0;
|
||||
width: 336px;
|
||||
max-width: 100%;
|
||||
margin-top: 11px;
|
||||
}
|
||||
|
||||
/* 内容 */
|
||||
.ele-notice-pop .ant-tabs-nav-wrap {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ele-notice-pop .ant-list-item {
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
transition: background-color .3s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ele-notice-pop .ant-list-item:hover {
|
||||
background: hsla(0, 0%, 60%, .05);
|
||||
}
|
||||
|
||||
.ele-notice-pop .ant-tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 操作按钮 */
|
||||
.ele-notice-pop .ele-notice-actions {
|
||||
border-top: 1px solid hsla(0, 0%, 60%, .15);
|
||||
}
|
||||
|
||||
.ele-notice-pop .ele-notice-actions > .ele-cell-content {
|
||||
line-height: 46px;
|
||||
text-align: center;
|
||||
transition: background-color .3s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ele-notice-pop .ele-notice-actions > .ele-cell-content:hover {
|
||||
background: hsla(0, 0%, 60%, .05);
|
||||
}
|
||||
</style>
|
||||
110
src/layout/password.vue
Normal file
110
src/layout/password.vue
Normal file
@@ -0,0 +1,110 @@
|
||||
<!-- 修改密码弹窗 -->
|
||||
<template>
|
||||
<a-modal
|
||||
:width="420"
|
||||
title="修改密码"
|
||||
:visible="visible"
|
||||
:confirm-loading="loading"
|
||||
:body-style="{paddingBottom: '16px'}"
|
||||
@update:visible="onUpdateVisible"
|
||||
@cancel="onCancel"
|
||||
@ok="onOk">
|
||||
<a-form
|
||||
ref="form"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:label-col="{sm: {span: 6}}"
|
||||
:wrapper-col="{sm: {span: 18}}">
|
||||
<a-form-item label="旧密码" name="old">
|
||||
<a-input-password v-model:value="form.old" placeholder="请输入旧密码"/>
|
||||
</a-form-item>
|
||||
<a-form-item label="新密码" name="password">
|
||||
<a-input-password v-model:value="form.password" placeholder="请输入新密码"/>
|
||||
</a-form-item>
|
||||
<a-form-item label="确认密码" name="password2">
|
||||
<a-input-password v-model:value="form.password2" placeholder="请再次输入新密码"/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ElePassword',
|
||||
emits: ['update:visible'],
|
||||
props: {
|
||||
visible: Boolean
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 表单数据
|
||||
form: {
|
||||
old: '',
|
||||
password: '',
|
||||
password2: ''
|
||||
},
|
||||
// 表单验证
|
||||
rules: {
|
||||
old: [
|
||||
{required: true, message: '请输入旧密码', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
password: [
|
||||
{required: true, message: '请输入新密码', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
password2: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
trigger: 'blur',
|
||||
validator: async (rule, value) => {
|
||||
if (!value) {
|
||||
return Promise.reject('请再次输入新密码');
|
||||
}
|
||||
if (value === this.form.password) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
return Promise.reject('两次输入密码不一致');
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
// 按钮loading
|
||||
loading: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/* 保存修改 */
|
||||
onOk() {
|
||||
this.$refs.form.validate().then(() => {
|
||||
this.loading = true;
|
||||
this.$http.put('/main/password', {
|
||||
oldPsw: this.form.old,
|
||||
newPsw: this.form.password
|
||||
}).then(res => {
|
||||
this.loading = false;
|
||||
if (res.data.code === 0) {
|
||||
this.$message.success(res.data.msg);
|
||||
this.onUpdateVisible(false);
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(e => {
|
||||
this.loading = false;
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
/* 关闭回调 */
|
||||
onCancel() {
|
||||
this.form = {};
|
||||
this.loading = false;
|
||||
this.$refs.form.resetFields();
|
||||
},
|
||||
/* 修改visible */
|
||||
onUpdateVisible(value) {
|
||||
this.$emit('update:visible', value);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
24
src/main.js
Normal file
24
src/main.js
Normal file
@@ -0,0 +1,24 @@
|
||||
/** 主入口js */
|
||||
import {createApp} from 'vue';
|
||||
import App from './App.vue';
|
||||
import store from './store';
|
||||
import router from './router';
|
||||
import axios from 'axios';
|
||||
import VueAxios from 'vue-axios';
|
||||
import './config/axios-config';
|
||||
import permission from './utils/permission';
|
||||
import './styles/index.less';
|
||||
import EleAdminPro from 'ele-admin-pro';
|
||||
import ModalUtil from 'ele-admin-pro/packages/modal-util';
|
||||
import i18n from './lang';
|
||||
|
||||
const app = createApp(App);
|
||||
app.config.productionTip = false;
|
||||
app.use(store);
|
||||
app.use(router);
|
||||
app.use(VueAxios, axios);
|
||||
app.use(permission);
|
||||
app.use(EleAdminPro);
|
||||
app.use(ModalUtil);
|
||||
app.use(i18n);
|
||||
app.mount('#app');
|
||||
89
src/router/index.js
Normal file
89
src/router/index.js
Normal file
@@ -0,0 +1,89 @@
|
||||
/**
|
||||
* 路由配置
|
||||
*/
|
||||
import {createRouter, createWebHistory} from 'vue-router';
|
||||
import store from '@/store';
|
||||
import setting from '@/config/setting';
|
||||
import EleLayout from '@/layout';
|
||||
import {menuToRoutes} from 'ele-admin-pro';
|
||||
import NProgress from 'nprogress';
|
||||
|
||||
// 静态路由
|
||||
const routes = [
|
||||
{
|
||||
path: '/login',
|
||||
component: () => import('@/views/login/login'),
|
||||
meta: {title: '登录'}
|
||||
},
|
||||
{
|
||||
path: '/forget',
|
||||
component: () => import('@/views/login/forget'),
|
||||
meta: {title: '忘记密码'}
|
||||
},
|
||||
{
|
||||
path: '/:pathMatch(.*)*',
|
||||
component: () => import('@/views/exception/404')
|
||||
}
|
||||
];
|
||||
|
||||
const router = createRouter({
|
||||
routes,
|
||||
history: createWebHistory()
|
||||
});
|
||||
|
||||
// 路由守卫
|
||||
router.beforeEach((to, from, next) => {
|
||||
NProgress.start();
|
||||
updateTitle(to);
|
||||
// 判断是否登录
|
||||
if (setting.takeToken()) {
|
||||
// 判断是否已经注册动态路由
|
||||
if (!store.state.user.menus) {
|
||||
// 获取动态路由
|
||||
store.dispatch('user/getMenus').then(({menus, home}) => {
|
||||
// menuToRoutes方法是把菜单数据转成路由数据格式
|
||||
router.addRoute({
|
||||
path: '/',
|
||||
component: EleLayout,
|
||||
redirect: setting.homePath || home,
|
||||
children: menuToRoutes(menus, (component) => import('@/views' + component))
|
||||
});
|
||||
next({...to, replace: true});
|
||||
}).catch(() => {
|
||||
next();
|
||||
});
|
||||
} else {
|
||||
next();
|
||||
}
|
||||
} else if (setting.whiteList.includes(to.path)) {
|
||||
next();
|
||||
} else {
|
||||
next({path: '/login', query: to.path === '/' ? {} : {from: to.path}});
|
||||
}
|
||||
});
|
||||
|
||||
router.afterEach(() => {
|
||||
setTimeout(() => {
|
||||
NProgress.done(true);
|
||||
}, 300);
|
||||
});
|
||||
|
||||
export default router;
|
||||
|
||||
/**
|
||||
* 更新浏览器标题
|
||||
* @param route 路由
|
||||
*/
|
||||
function updateTitle(route) {
|
||||
if (!route.path.startsWith('/redirect/')) {
|
||||
let names = [];
|
||||
if (route && route.meta && route.meta.title) {
|
||||
names.push(route.meta.title);
|
||||
}
|
||||
const appName = process.env.VUE_APP_NAME;
|
||||
if (appName) {
|
||||
names.push(appName);
|
||||
}
|
||||
document.title = names.join(' - ');
|
||||
}
|
||||
}
|
||||
4
src/store/getters.js
Normal file
4
src/store/getters.js
Normal file
@@ -0,0 +1,4 @@
|
||||
export default {
|
||||
user: state => state.user,
|
||||
theme: state => state.theme
|
||||
}
|
||||
18
src/store/index.js
Normal file
18
src/store/index.js
Normal file
@@ -0,0 +1,18 @@
|
||||
/**
|
||||
* vuex状态管理
|
||||
*/
|
||||
import {createStore} from 'vuex';
|
||||
import getters from './getters';
|
||||
import user from './modules/user';
|
||||
import theme from './modules/theme';
|
||||
|
||||
export default createStore({
|
||||
state: {},
|
||||
mutations: {},
|
||||
actions: {},
|
||||
modules: {
|
||||
user,
|
||||
theme
|
||||
},
|
||||
getters
|
||||
});
|
||||
454
src/store/modules/theme.js
Normal file
454
src/store/modules/theme.js
Normal file
@@ -0,0 +1,454 @@
|
||||
/**
|
||||
* 主题状态管理
|
||||
*/
|
||||
import {changeColor} from 'ele-admin-pro/packages/style/util.js';
|
||||
import setting from '@/config/setting';
|
||||
// 不需要本地缓存的state
|
||||
const NO_CACHE_STATE = [
|
||||
'collapse',
|
||||
'tabs',
|
||||
'homeComponents',
|
||||
'keepAliveInclude',
|
||||
'keepAliveExclude',
|
||||
'tabKeepAlive',
|
||||
'screenWidth',
|
||||
'screenHeight'
|
||||
];
|
||||
|
||||
/**
|
||||
* 读取缓存的配置
|
||||
* @param keyName 缓存的键名
|
||||
* @returns {Object}
|
||||
*/
|
||||
function getCacheSetting(keyName) {
|
||||
let cache = {};
|
||||
try {
|
||||
const value = localStorage.getItem(keyName);
|
||||
if (value) {
|
||||
const temp = JSON.parse(value);
|
||||
if (typeof temp === 'object') {
|
||||
cache = temp;
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
return cache;
|
||||
}
|
||||
|
||||
/**
|
||||
* 缓存配置
|
||||
* @param keyName 缓存的键名
|
||||
* @param key 缓存的配置名
|
||||
* @param value 缓存的配置名对应的值
|
||||
*/
|
||||
function cacheSetting(keyName, key, value) {
|
||||
if (NO_CACHE_STATE.includes(key)) {
|
||||
return;
|
||||
}
|
||||
const cache = getCacheSetting(keyName);
|
||||
if (cache[key] !== value) {
|
||||
cache[key] = value;
|
||||
localStorage.setItem(keyName, JSON.stringify(cache));
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 检查state值以兼容旧版本
|
||||
* @param key
|
||||
* @param value
|
||||
* @returns
|
||||
*/
|
||||
function checkStateValue(key, value) {
|
||||
if (typeof value === 'number') {
|
||||
if (key === 'sideStyle') {
|
||||
return ['light', 'dark'][value < 2 ? value : 1];
|
||||
}
|
||||
if (key === 'headStyle') {
|
||||
return ['light', 'dark', 'primary'][value < 3 ? value : 2];
|
||||
}
|
||||
if (key === 'tabStyle') {
|
||||
return ['default', 'dot', 'card'][value < 3 ? value : 2];
|
||||
}
|
||||
if (key === 'layoutStyle') {
|
||||
return ['side', 'top', 'mix'][value < 3 ? value : 2];
|
||||
}
|
||||
}
|
||||
return value;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取state
|
||||
* @param setting 默认配置
|
||||
* @returns {Object}
|
||||
*/
|
||||
function getState(setting) {
|
||||
const state = {
|
||||
// 侧边栏风格: light(亮色), dark(暗色)
|
||||
sideStyle: 'dark',
|
||||
// 顶栏风格: light(亮色), dark(暗色), primary(主色)
|
||||
headStyle: 'light',
|
||||
// 标签页风格: default(默认), dot(圆点), card(卡片)
|
||||
tabStyle: 'default',
|
||||
// 布局风格: side(默认), top(顶栏菜单), mix(混合菜单)
|
||||
layoutStyle: 'side',
|
||||
// 侧边栏菜单风格: default(默认), mix(双排菜单)
|
||||
sideMenuStyle: 'default',
|
||||
// 是否固定侧栏
|
||||
fixedSidebar: true,
|
||||
// 是否固定顶栏
|
||||
fixedHeader: false,
|
||||
// 是否固定主体
|
||||
fixedBody: false,
|
||||
// 内容区域宽度铺满
|
||||
bodyFull: true,
|
||||
// 是否开启多标签
|
||||
showTabs: true,
|
||||
// logo是否自适应宽度
|
||||
logoAutoSize: false,
|
||||
// 侧栏是否多彩图标
|
||||
colorfulIcon: false,
|
||||
// 侧边栏是否只保持一个子菜单展开
|
||||
sideUniqueOpen: true,
|
||||
// 是否开启页脚
|
||||
showFooter: true,
|
||||
// 是否是色弱模式
|
||||
weakMode: false,
|
||||
// 是否是暗黑模式
|
||||
darkMode: false,
|
||||
// 主题色
|
||||
color: null,
|
||||
// 是否折叠侧边栏
|
||||
collapse: false,
|
||||
// 当前打开的选项卡
|
||||
tabs: [],
|
||||
// 主页的组件
|
||||
homeComponents: [],
|
||||
// 需要keep-alive的组件
|
||||
keepAliveInclude: [],
|
||||
// 不需要keep-alive的组件
|
||||
keepAliveExclude: [],
|
||||
// 开启多页签是否缓存组件
|
||||
tabKeepAlive: true,
|
||||
// 屏幕宽度
|
||||
screenWidth: document.documentElement.clientWidth || document.body.clientWidth,
|
||||
// 屏幕高度
|
||||
screenHeight: document.documentElement.clientHeight || document.body.clientHeight
|
||||
};
|
||||
// 读取缓存的配置及默认配置
|
||||
for (let key in state) {
|
||||
if (!Object.prototype.hasOwnProperty.call(state, key)) {
|
||||
continue;
|
||||
}
|
||||
const cache = getCacheSetting(setting.themeStoreName);
|
||||
if (cache[key] !== undefined) {
|
||||
state[key] = checkStateValue(key, cache[key]);
|
||||
} else if (setting[key] !== undefined) {
|
||||
state[key] = checkStateValue(key, setting[key]);
|
||||
}
|
||||
}
|
||||
|
||||
// 恢复色弱模式
|
||||
if (state.weakMode) {
|
||||
changeWeakMode(true);
|
||||
}
|
||||
|
||||
// 恢复上次主题色
|
||||
if (state.color || state.darkMode) {
|
||||
window.addEventListener('load', () => {
|
||||
doChangeTheme(state.color, state.darkMode).catch((e) => {
|
||||
console.error(e);
|
||||
});
|
||||
});
|
||||
}
|
||||
return state;
|
||||
}
|
||||
|
||||
/**
|
||||
* 切换主题
|
||||
* @param value 主题
|
||||
* @param dark 是否是暗黑模式
|
||||
* @returns {Promise<>}
|
||||
*/
|
||||
function doChangeTheme(value, dark) {
|
||||
return new Promise((resolve, reject) => {
|
||||
try {
|
||||
changeColor(value, dark);
|
||||
resolve();
|
||||
} catch (e) {
|
||||
reject(e);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 开关色弱模式
|
||||
* @param weakMode 是否开启色弱模式
|
||||
*/
|
||||
function changeWeakMode(weakMode) {
|
||||
const weakClass = 'ele-admin-weak';
|
||||
if (weakMode) {
|
||||
document.body.classList.add(weakClass);
|
||||
} else {
|
||||
document.body.classList.remove(weakClass);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取需要keep-alive的组件
|
||||
* @param tabs 页签数据
|
||||
* @param homeComponents 主页组件
|
||||
* @returns {any[]}
|
||||
*/
|
||||
function getKeepAliveInclude(tabs, homeComponents) {
|
||||
const components = new Set();
|
||||
if (tabs) {
|
||||
tabs.forEach((t) => {
|
||||
if (t && t.components && t.components.length) {
|
||||
t.components.forEach((c) => {
|
||||
if (typeof c === 'string' && c) {
|
||||
components.add(c);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
if (homeComponents) {
|
||||
homeComponents.forEach((c) => {
|
||||
components.add(c);
|
||||
});
|
||||
}
|
||||
return Array.from(components);
|
||||
}
|
||||
|
||||
export default {
|
||||
namespaced: true,
|
||||
state: getState(setting),
|
||||
mutations: {
|
||||
// 修改state值
|
||||
SET: function (state, obj) {
|
||||
state[obj.key] = obj.value;
|
||||
// 缓存修改的配置
|
||||
cacheSetting(setting.themeStoreName, obj.key, obj.value);
|
||||
},
|
||||
// 更新keepAliveInclude
|
||||
UPDATE_KEEP_ALIVE_INCLUDE: function (state) {
|
||||
if (state.showTabs && state.tabKeepAlive) {
|
||||
state.keepAliveInclude = getKeepAliveInclude(state.tabs, state.homeComponents);
|
||||
} else {
|
||||
state.keepAliveInclude = [];
|
||||
}
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
/**
|
||||
* 修改配置
|
||||
* @param {commit}
|
||||
* @param obj
|
||||
*/
|
||||
set({commit}, obj) {
|
||||
commit('SET', obj);
|
||||
if (obj.key === 'showTabs' || obj.key === 'tabKeepAlive') {
|
||||
commit('UPDATE_KEEP_ALIVE_INCLUDE');
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 切换配置(boolean类型的配置)
|
||||
* @param {commit, state}
|
||||
* @param key 配置名称
|
||||
*/
|
||||
toggle({commit, state}, key) {
|
||||
commit('SET', {key: key, value: !state[key]});
|
||||
},
|
||||
/**
|
||||
* 切换主题色
|
||||
* @param {commit, state}
|
||||
* @param value 颜色值
|
||||
* @returns {Promise<>}
|
||||
*/
|
||||
setColor({commit, state}, value) {
|
||||
return new Promise((resolve, reject) => {
|
||||
doChangeTheme(value, state.darkMode).then(() => {
|
||||
commit('SET', {key: 'color', value: value});
|
||||
return resolve();
|
||||
}).catch((e) => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 切换暗黑模式
|
||||
* @param {commit, state}
|
||||
* @param value 是否开启暗黑模式
|
||||
* @returns {Promise<>}
|
||||
*/
|
||||
setDarkMode({commit, state}, value) {
|
||||
return new Promise((resolve, reject) => {
|
||||
doChangeTheme(state.color, value).then(() => {
|
||||
commit('SET', {key: 'darkMode', value: value});
|
||||
return resolve();
|
||||
}).catch((e) => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 切换色弱模式
|
||||
* @param {commit}
|
||||
* @param value 是否开启色弱模式
|
||||
* @returns {Promise<>}
|
||||
*/
|
||||
setWeakMode({commit}, value) {
|
||||
return new Promise((resolve) => {
|
||||
changeWeakMode(value);
|
||||
commit('SET', {key: 'weakMode', value: value});
|
||||
resolve();
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 添加tab
|
||||
* @param {commit, state}
|
||||
* @param obj {{key: String, path: String, fullPath: String, title: String}}
|
||||
*/
|
||||
tabAdd({commit, state}, obj) {
|
||||
if (!obj.key) {
|
||||
obj.key = obj.fullPath || obj.path;
|
||||
}
|
||||
const i = state.tabs.findIndex((d) => d.key === obj.key);
|
||||
if (i === -1) {
|
||||
commit('SET', {key: 'tabs', value: state.tabs.concat([obj])});
|
||||
} else if (obj.fullPath !== state.tabs[i].fullPath) {
|
||||
commit('SET', {key: 'tabs', value: state.tabs.slice(0, i).concat([obj]).concat(state.tabs.slice(i + 1))});
|
||||
}
|
||||
commit('UPDATE_KEEP_ALIVE_INCLUDE');
|
||||
},
|
||||
/**
|
||||
* 移除指定tab
|
||||
* @param commit
|
||||
* @param state
|
||||
* @param key {String}
|
||||
* @returns {Promise<Object>}
|
||||
*/
|
||||
tabRemove({commit, state}, key) {
|
||||
return new Promise((resolve) => {
|
||||
let index = -1, lastIndex = -1, lastPath, last;
|
||||
for (let i = 0; i < state.tabs.length; i++) {
|
||||
if (state.tabs[i].key === key || state.tabs[i].fullPath === key) {
|
||||
index = i;
|
||||
break;
|
||||
}
|
||||
lastIndex = i;
|
||||
last = state.tabs[i];
|
||||
lastPath = last.fullPath;
|
||||
}
|
||||
commit('SET', {key: 'tabs', value: state.tabs.filter((d, i) => i !== index)});
|
||||
commit('UPDATE_KEEP_ALIVE_INCLUDE');
|
||||
resolve({lastIndex: lastIndex, lastPath: lastPath, last: last});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 移除所有tab
|
||||
* @param commit
|
||||
*/
|
||||
tabRemoveAll({commit}) {
|
||||
commit('SET', {key: 'tabs', value: []});
|
||||
commit('UPDATE_KEEP_ALIVE_INCLUDE');
|
||||
},
|
||||
/**
|
||||
* 移除左侧tab
|
||||
* @param commit
|
||||
* @param state
|
||||
* @param key {String}
|
||||
*/
|
||||
tabRemoveLeft({commit, state}, key) {
|
||||
for (let i = 0; i < state.tabs.length; i++) {
|
||||
if (state.tabs[i].key === key) {
|
||||
commit('SET', {key: 'tabs', value: state.tabs.slice(i)});
|
||||
commit('UPDATE_KEEP_ALIVE_INCLUDE');
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 移除右侧tab
|
||||
* @param commit
|
||||
* @param state
|
||||
* @param key {String}
|
||||
*/
|
||||
tabRemoveRight({commit, state}, key) {
|
||||
for (let i = 0; i < state.tabs.length; i++) {
|
||||
if (state.tabs[i].key === key) {
|
||||
commit('SET', {key: 'tabs', value: state.tabs.slice(0, i + 1)});
|
||||
commit('UPDATE_KEEP_ALIVE_INCLUDE');
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 移除其他tab
|
||||
* @param commit
|
||||
* @param state
|
||||
* @param key {String}
|
||||
*/
|
||||
tabRemoveOther({commit, state}, key) {
|
||||
commit('SET', {key: 'tabs', value: state.tabs.filter((d) => d.key === key)});
|
||||
commit('UPDATE_KEEP_ALIVE_INCLUDE');
|
||||
},
|
||||
/**
|
||||
* 修改指定tab
|
||||
* @param commit
|
||||
* @param state
|
||||
* @param obj {{path: String, title: String, fullPath: String, closable: Boolean}}
|
||||
*/
|
||||
tabSetTitle({commit, state}, obj) {
|
||||
let i = -1;
|
||||
if (obj.fullPath) {
|
||||
i = state.tabs.findIndex((d) => d.fullPath === obj.fullPath);
|
||||
} else if (obj.path) {
|
||||
i = state.tabs.findIndex((d) => d.path === obj.path);
|
||||
}
|
||||
if (i !== -1) {
|
||||
const data = Object.assign({}, state.tabs[i]);
|
||||
if (typeof obj.title === 'string' && obj.title) {
|
||||
data.title = obj.title;
|
||||
}
|
||||
if (typeof obj.closable === 'boolean') {
|
||||
data.closable = obj.closable;
|
||||
}
|
||||
const tabs = state.tabs.slice(0, i).concat([data]).concat(state.tabs.slice(i + 1));
|
||||
commit('SET', {key: 'tabs', value: tabs});
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 设置主页的组件名称
|
||||
* @param {commit, state}
|
||||
* @param components {Array}
|
||||
*/
|
||||
setHomeComponents({commit}, components) {
|
||||
commit('SET', {key: 'homeComponents', value: components});
|
||||
commit('UPDATE_KEEP_ALIVE_INCLUDE');
|
||||
},
|
||||
/**
|
||||
* 设置不需要keep-alive的组件
|
||||
* @param commit
|
||||
* @param value {Array}
|
||||
*/
|
||||
setKeepAliveExclude({commit}, value) {
|
||||
commit('SET', {key: 'keepAliveExclude', value: value});
|
||||
},
|
||||
/**
|
||||
* 更新屏幕尺寸
|
||||
* @param {commit, state}
|
||||
*/
|
||||
updateScreen({commit, state}) {
|
||||
const w = document.documentElement.clientWidth || document.body.clientWidth,
|
||||
h = document.documentElement.clientHeight || document.body.clientHeight;
|
||||
if (w !== state.screenWidth) {
|
||||
commit('SET', {key: 'screenWidth', value: w});
|
||||
}
|
||||
if (h !== state.screenHeight) {
|
||||
commit('SET', {key: 'screenHeight', value: h});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
127
src/store/modules/user.js
Normal file
127
src/store/modules/user.js
Normal file
@@ -0,0 +1,127 @@
|
||||
/**
|
||||
* 登录状态管理
|
||||
*/
|
||||
import axios from 'axios';
|
||||
import setting from '@/config/setting';
|
||||
import {formatMenus} from 'ele-admin-pro';
|
||||
|
||||
export default {
|
||||
namespaced: true,
|
||||
state: {
|
||||
// 当前用户信息
|
||||
user: setting.takeUser(),
|
||||
// 当前用户权限
|
||||
authorities: [],
|
||||
// 当前用户角色
|
||||
roles: [],
|
||||
// 当前用户的菜单
|
||||
menus: null
|
||||
},
|
||||
mutations: {
|
||||
// 修改值
|
||||
SET(state, obj) {
|
||||
state[obj.key] = obj.value;
|
||||
},
|
||||
// 修改token
|
||||
SET_TOKEN(state, obj) {
|
||||
setting.cacheToken(obj.token, obj.remember);
|
||||
state.token = obj.token;
|
||||
if (!obj.token) {
|
||||
state.user = {};
|
||||
state.menus = null;
|
||||
setting.cacheUser();
|
||||
}
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
/**
|
||||
* 缓存token
|
||||
* @param commit
|
||||
* @param token {String, {token: String, remember: String}}
|
||||
*/
|
||||
setToken({commit}, token) {
|
||||
let remember = true;
|
||||
if (typeof token === 'object') {
|
||||
remember = token.remember;
|
||||
token = token.token;
|
||||
}
|
||||
commit('SET_TOKEN', {token: token, remember: remember});
|
||||
},
|
||||
/**
|
||||
* 移除token
|
||||
* @param commit
|
||||
*/
|
||||
removeToken({commit}) {
|
||||
commit('SET_TOKEN', {});
|
||||
},
|
||||
/**
|
||||
* 设置用户信息
|
||||
* @param commit
|
||||
* @param user {Object} 用户信息
|
||||
*/
|
||||
setUser({commit}, user) {
|
||||
setting.cacheUser(user);
|
||||
commit('SET', {key: 'user', value: user});
|
||||
},
|
||||
/**
|
||||
* 设置用户权限
|
||||
* @param commit
|
||||
* @param authorities {Array<String>} 权限
|
||||
*/
|
||||
setAuthorities({commit}, authorities) {
|
||||
commit('SET', {key: 'authorities', value: authorities});
|
||||
},
|
||||
/**
|
||||
* 设置用户角色
|
||||
* @param commit
|
||||
* @param roles {Array<String>} 角色
|
||||
*/
|
||||
setRoles({commit}, roles) {
|
||||
commit('SET', {key: 'roles', value: roles});
|
||||
},
|
||||
/**
|
||||
* 设置用户菜单
|
||||
* @param commit
|
||||
* @param menus {Array} 菜单
|
||||
*/
|
||||
setMenus({commit}, menus) {
|
||||
commit('SET', {key: 'menus', value: menus});
|
||||
},
|
||||
/**
|
||||
* 获取用户菜单路由
|
||||
* @param commit
|
||||
* @returns {Promise} {Array}
|
||||
*/
|
||||
getMenus({commit}) {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (!setting.menuUrl) {
|
||||
const {menus, homePath} = formatMenus(setting.menus);
|
||||
commit('SET', {key: 'menus', value: menus});
|
||||
return resolve({menus: menus, home: homePath});
|
||||
}
|
||||
// 请求接口获取用户菜单
|
||||
axios.get(setting.menuUrl).then((res) => {
|
||||
const result = typeof setting.parseMenu === 'function' ? setting.parseMenu(res.data) : res.data;
|
||||
// 获取用户的信息、角色、权限
|
||||
if (result.user) {
|
||||
setting.cacheUser(result.user);
|
||||
commit('SET', {key: 'user', value: result.user});
|
||||
commit('SET', {key: 'roles', value: result.user.roles});
|
||||
commit('SET', {key: 'authorities', value: result.user.authorities});
|
||||
}
|
||||
// 获取用户的菜单
|
||||
if (!result.data) {
|
||||
console.error('get menus error: ', result);
|
||||
return reject(new Error(result.msg));
|
||||
}
|
||||
// 处理菜单数据格式
|
||||
const {menus, homePath} = formatMenus(result.data, setting.parseMenuItem);
|
||||
commit('SET', {key: 'menus', value: menus});
|
||||
resolve({menus: menus, home: homePath});
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
10
src/styles/index.less
Normal file
10
src/styles/index.less
Normal file
@@ -0,0 +1,10 @@
|
||||
/** 全局样式 */
|
||||
|
||||
// 如果不需要切换主题使用这个
|
||||
//@import "~ele-admin-pro/packages/style/index.less";
|
||||
// 如果不需要切换主题固定为夜间主题使用这个
|
||||
//@import "~ele-admin-pro/packages/style/dark.less";
|
||||
// 需要在线切换主题使用这个
|
||||
@import "~ele-admin-pro/packages/style/dynamic.less";
|
||||
|
||||
/* 需要覆盖框架样式变量写最下面, 具体请到文档查看 */
|
||||
92
src/utils/page-tab-util.js
Normal file
92
src/utils/page-tab-util.js
Normal file
@@ -0,0 +1,92 @@
|
||||
/**
|
||||
* 页签操作封装
|
||||
*/
|
||||
import {unref} from 'vue';
|
||||
import store from '../store';
|
||||
import router from '../router';
|
||||
|
||||
/**
|
||||
* 刷新当前页签
|
||||
*/
|
||||
export function reloadPageTab() {
|
||||
const {path, query, matched} = unref(router.currentRoute);
|
||||
const components = new Set();
|
||||
matched.forEach((m) => {
|
||||
if (m.components && m.components.default && m.components.default.name) {
|
||||
if (!['EleEmptyLayout', 'EleLayout'].includes(m.components.default.name)) {
|
||||
components.add(m.components.default.name);
|
||||
}
|
||||
}
|
||||
});
|
||||
return store.dispatch('theme/setKeepAliveExclude', Array.from(components)).then(() => {
|
||||
return router.replace({
|
||||
query: query,
|
||||
path: '/redirect' + path
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 关闭当前tab
|
||||
*/
|
||||
export function finishPageTab() {
|
||||
return store.dispatch('theme/tabRemove', router.currentRoute.fullPath).then(({lastPath}) => {
|
||||
return router.push(lastPath || '/');
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 移除指定tab
|
||||
* @param key {String}
|
||||
* @returns {Promise<Object>}
|
||||
*/
|
||||
export function removePageTab(key) {
|
||||
return store.dispatch('theme/tabRemove', key);
|
||||
}
|
||||
|
||||
/**
|
||||
* 移除所有tab
|
||||
*/
|
||||
export function removeAllPageTab() {
|
||||
return store.dispatch('theme/tabRemoveAll');
|
||||
}
|
||||
|
||||
/**
|
||||
* 移除左侧tab
|
||||
* @param key {String}
|
||||
*/
|
||||
export function removeLeftPageTab(key) {
|
||||
return store.dispatch('theme/tabRemoveLeft', key);
|
||||
}
|
||||
|
||||
/**
|
||||
* 移除右侧tab
|
||||
* @param key {String}
|
||||
*/
|
||||
export function removeRightPageTab(key) {
|
||||
return store.dispatch('theme/tabRemoveRight', key);
|
||||
}
|
||||
|
||||
/**
|
||||
* 移除其他tab
|
||||
* @param key {String}
|
||||
*/
|
||||
export function removeOtherPageTab(key) {
|
||||
return store.dispatch('theme/tabRemoveOther', key);
|
||||
}
|
||||
|
||||
/**
|
||||
* 添加tab
|
||||
* @param obj
|
||||
*/
|
||||
export function addPageTab(obj) {
|
||||
return store.dispatch('theme/tabAdd', obj);
|
||||
}
|
||||
|
||||
/**
|
||||
* 修改指定tab
|
||||
* @param obj
|
||||
*/
|
||||
export function setPageTab(obj) {
|
||||
return store.dispatch('theme/tabSetTitle', obj);
|
||||
}
|
||||
128
src/utils/permission.js
Normal file
128
src/utils/permission.js
Normal file
@@ -0,0 +1,128 @@
|
||||
/**
|
||||
* 权限、角色控制组件
|
||||
*/
|
||||
import store from '@/store';
|
||||
|
||||
export default {
|
||||
install(app) {
|
||||
// 添加全局方法
|
||||
app.config.globalProperties.$hasRole = this.hasRole;
|
||||
app.config.globalProperties.$hasAnyRole = this.hasAnyRole;
|
||||
app.config.globalProperties.$hasPermission = this.hasPermission;
|
||||
app.config.globalProperties.$hasAnyPermission = this.hasAnyPermission;
|
||||
|
||||
// 添加自定义指令
|
||||
app.directive('role', {
|
||||
mounted: (el, binding) => {
|
||||
if (!this.hasRole(binding.value)) {
|
||||
el.parentNode && el.parentNode.removeChild(el);
|
||||
}
|
||||
}
|
||||
});
|
||||
app.directive('any-role', {
|
||||
mounted: (el, binding) => {
|
||||
if (!this.hasAnyRole(binding.value)) {
|
||||
el.parentNode && el.parentNode.removeChild(el);
|
||||
}
|
||||
}
|
||||
});
|
||||
app.directive('permission', {
|
||||
mounted: (el, binding) => {
|
||||
if (!this.hasPermission(binding.value)) {
|
||||
el.parentNode && el.parentNode.removeChild(el);
|
||||
}
|
||||
}
|
||||
});
|
||||
app.directive('any-permission', {
|
||||
mounted: (el, binding) => {
|
||||
if (!this.hasAnyPermission(binding.value)) {
|
||||
el.parentNode && el.parentNode.removeChild(el);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 是否有某些角色
|
||||
* @param role {String, Array<String>} 角色字符或字符数组
|
||||
* @returns {boolean}
|
||||
*/
|
||||
hasRole(role) {
|
||||
const data = store.state.user ? store.state.user.roles : null;
|
||||
return arrayHas(data, role);
|
||||
},
|
||||
/**
|
||||
* 是否有任意角色
|
||||
* @param role {String, Array<String>} 角色字符或字符数组
|
||||
* @returns {boolean}
|
||||
*/
|
||||
hasAnyRole(role) {
|
||||
const data = store.state.user ? store.state.user.roles : null;
|
||||
return arrayHasAny(data, role);
|
||||
},
|
||||
/**
|
||||
* 是否有某些权限
|
||||
* @param auth {String, Array<String>} 权限字符或字符数组
|
||||
* @returns {boolean}
|
||||
*/
|
||||
hasPermission(auth) {
|
||||
const data = store.state.user ? store.state.user.authorities : null;
|
||||
return arrayHas(data, auth);
|
||||
},
|
||||
/**
|
||||
* 是否有任意权限
|
||||
* @param auth {String, Array<String>} 权限字符或字符数组
|
||||
* @returns {boolean}
|
||||
*/
|
||||
hasAnyPermission(auth) {
|
||||
const data = store.state.user ? store.state.user.authorities : null;
|
||||
return arrayHasAny(data, auth);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 数组是否有某些值
|
||||
* @param array {Array<String>} 数组
|
||||
* @param obj {String, Array<String>} 值
|
||||
* @returns {boolean}
|
||||
*/
|
||||
function arrayHas(array, obj) {
|
||||
if (!obj) {
|
||||
return true;
|
||||
}
|
||||
if (!array) {
|
||||
return false;
|
||||
}
|
||||
if (Array.isArray(obj)) {
|
||||
for (let i = 0; i < obj.length; i++) {
|
||||
if (array.indexOf(obj[i]) === -1) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
return array.indexOf(obj) !== -1;
|
||||
}
|
||||
|
||||
/**
|
||||
* 数组是否有任意值
|
||||
* @param array {Array<String>} 数组
|
||||
* @param obj {String, Array<String>} 值
|
||||
* @returns {boolean}
|
||||
*/
|
||||
function arrayHasAny(array, obj) {
|
||||
if (!obj) {
|
||||
return true;
|
||||
}
|
||||
if (!array) {
|
||||
return false;
|
||||
}
|
||||
if (Array.isArray(obj)) {
|
||||
for (let i = 0; i < obj.length; i++) {
|
||||
if (array.indexOf(obj[i]) !== -1) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
return array.indexOf(obj) !== -1;
|
||||
}
|
||||
602
src/views/dashboard/analysis.vue
Normal file
602
src/views/dashboard/analysis.vue
Normal file
@@ -0,0 +1,602 @@
|
||||
<template>
|
||||
<div class="ele-body ele-body-card">
|
||||
<!-- 顶部统计快 -->
|
||||
<a-row :gutter="16">
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-card class="analysis-chart-card" :bordered="false">
|
||||
<div class="ele-text-secondary ele-cell">
|
||||
<div class="ele-cell-content">总销售额</div>
|
||||
<a-tooltip title="指标说明">
|
||||
<question-circle-outlined/>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<h1 class="analysis-chart-card-num">¥ 126,560</h1>
|
||||
<div class="analysis-chart-card-content" style="padding-top: 16px;">
|
||||
<a-space size="middle">
|
||||
<span>周同比12% <caret-up-outlined class="ele-text-danger"/></span>
|
||||
<span>日同比11% <caret-down-outlined class="ele-text-success"/></span>
|
||||
</a-space>
|
||||
</div>
|
||||
<a-divider/>
|
||||
<div>日销售额 ￥12,423</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-card class="analysis-chart-card" :bordered="false">
|
||||
<div class="ele-text-secondary ele-cell">
|
||||
<div class="ele-cell-content">访问量</div>
|
||||
<ele-tag color="red">日</ele-tag>
|
||||
</div>
|
||||
<h1 class="analysis-chart-card-num">8,846</h1>
|
||||
<ele-chart
|
||||
ref="visitChart"
|
||||
:options="visitChartOption"
|
||||
class="analysis-chart-card-content"/>
|
||||
<a-divider/>
|
||||
<div>日访问量 1,234</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-card class="analysis-chart-card" :bordered="false">
|
||||
<div class="ele-text-secondary ele-cell">
|
||||
<div class="ele-cell-content">支付笔数</div>
|
||||
<ele-tag color="blue">月</ele-tag>
|
||||
</div>
|
||||
<h1 class="analysis-chart-card-num">6,560</h1>
|
||||
<ele-chart
|
||||
ref="payNumChart"
|
||||
:options="payNumChartOption"
|
||||
class="analysis-chart-card-content"/>
|
||||
<a-divider/>
|
||||
<div>转化率 60%</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-card class="analysis-chart-card" :bordered="false">
|
||||
<div class="ele-text-secondary ele-cell">
|
||||
<div class="ele-cell-content">活动运营效果</div>
|
||||
<ele-tag color="green">周</ele-tag>
|
||||
</div>
|
||||
<h1 class="analysis-chart-card-num">78%</h1>
|
||||
<div class="analysis-chart-card-content" style="padding-top: 16px;">
|
||||
<a-progress
|
||||
:percent="78"
|
||||
:show-info="false"
|
||||
stroke-color="#13c2c2"/>
|
||||
</div>
|
||||
<a-divider/>
|
||||
<a-space size="middle">
|
||||
<span>周同比12% <caret-up-outlined class="ele-text-danger"/></span>
|
||||
<span>日同比11% <caret-down-outlined class="ele-text-success"/></span>
|
||||
</a-space>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<!-- 销售额、访问量 -->
|
||||
<a-card :bordered="false" :body-style="{padding: 0}">
|
||||
<a-tabs size="large" class="monitor-card-tabs">
|
||||
<a-tab-pane tab="销售额" key="saleroom">
|
||||
<a-row :gutter="16">
|
||||
<a-col :lg="17" :md="16" :sm="24" :xs="24">
|
||||
<div class="demo-monitor-title">销售量趋势</div>
|
||||
<ele-chart
|
||||
ref="saleChart"
|
||||
style="height: 320px;"
|
||||
:options="saleChartOption"/>
|
||||
</a-col>
|
||||
<a-col :lg="7" :md="8" :sm="24" :xs="24">
|
||||
<div class="demo-monitor-title">门店销售额排名</div>
|
||||
<div
|
||||
v-for="(item,index) in saleroomRankData"
|
||||
:key="index"
|
||||
class="demo-monitor-rank-item ele-cell">
|
||||
<ele-tag
|
||||
shape="circle"
|
||||
:color="index<3?'#314659':''"
|
||||
style="border: none;">{{ index + 1 }}
|
||||
</ele-tag>
|
||||
<div class="ele-cell-content">{{ item.name }}</div>
|
||||
<div class="ele-text-secondary">{{ item.value }}</div>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane tab="访问量" key="visits" force-render>
|
||||
<a-row :gutter="16">
|
||||
<a-col :lg="17" :md="16" :sm="24" :xs="24">
|
||||
<div class="demo-monitor-title">访问量趋势</div>
|
||||
<ele-chart
|
||||
ref="visitsChart"
|
||||
style="height: 320px;"
|
||||
:options="visitsChartOption"/>
|
||||
</a-col>
|
||||
<a-col :lg="7" :md="8" :sm="24" :xs="24">
|
||||
<div class="demo-monitor-title">门店访问量排名</div>
|
||||
<div
|
||||
v-for="(item,index) in visitsRankData"
|
||||
:key="index"
|
||||
class="demo-monitor-rank-item ele-cell">
|
||||
<ele-tag
|
||||
shape="circle"
|
||||
:color="index<3?'#314659':''"
|
||||
style="border: none;">{{ index + 1 }}
|
||||
</ele-tag>
|
||||
<div class="ele-cell-content">{{ item.name }}</div>
|
||||
<div class="ele-text-secondary">{{ item.value }}</div>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-tab-pane>
|
||||
<template #tabBarExtraContent>
|
||||
<a-space size="middle" class="analysis-tabs-extra">
|
||||
<a-radio-group v-model:value="saleSearch.dateType">
|
||||
<a-radio-button value="1">今天</a-radio-button>
|
||||
<a-radio-button value="2">本周</a-radio-button>
|
||||
<a-radio-button value="3">本月</a-radio-button>
|
||||
<a-radio-button value="4">本年</a-radio-button>
|
||||
</a-radio-group>
|
||||
<a-range-picker v-model:value="saleSearch.datetime">
|
||||
<template #suffixIcon>
|
||||
<calendar-outlined/>
|
||||
</template>
|
||||
</a-range-picker>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-tabs>
|
||||
</a-card>
|
||||
<!-- 折线图、词云 -->
|
||||
<a-row :gutter="16">
|
||||
<a-col :lg="16" :md="14" :sm="24" :xs="24">
|
||||
<a-card
|
||||
:bordered="false"
|
||||
title="最近1小时访问情况"
|
||||
:body-style="{padding: '16px 6px 0 0'}">
|
||||
<ele-chart
|
||||
ref="visitHourChart"
|
||||
style="height: 362px;"
|
||||
:options="visitHourChartOption"/>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :lg="8" :md="10" :sm="24" :xs="24">
|
||||
<a-card :bordered="false" title="热门搜索">
|
||||
<ele-word-cloud
|
||||
ref="hotSearchChart"
|
||||
:data="hotSearchData"
|
||||
style="height: 330px;"/>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import EleChart from 'ele-admin-pro/packages/ele-chart';
|
||||
import EleWordCloud from 'ele-admin-pro/packages/ele-word-cloud';
|
||||
import {
|
||||
QuestionCircleOutlined,
|
||||
CaretUpOutlined,
|
||||
CaretDownOutlined,
|
||||
CalendarOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
|
||||
export default {
|
||||
name: 'DashboardAnalysis',
|
||||
components: {
|
||||
EleChart,
|
||||
EleWordCloud,
|
||||
QuestionCircleOutlined,
|
||||
CaretUpOutlined,
|
||||
CaretDownOutlined,
|
||||
CalendarOutlined
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 支付笔数数据
|
||||
payNumData: [],
|
||||
// 销售量搜索参数
|
||||
saleSearch: {
|
||||
dateType: '4',
|
||||
datetime: []
|
||||
},
|
||||
// 销售量数据
|
||||
saleroomData: [],
|
||||
// 销售量排名数据
|
||||
saleroomRankData: [],
|
||||
// 访问量数据
|
||||
visitsData: [],
|
||||
// 访问量排名数据
|
||||
visitsRankData: [],
|
||||
// 最近1小时访问情况数据
|
||||
visitHourData: [],
|
||||
// 词云数据
|
||||
hotSearchData: []
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 访问量折线图配置
|
||||
visitChartOption() {
|
||||
/*if (!this.payNumData.length) {
|
||||
return null;
|
||||
}*/
|
||||
return {
|
||||
color: '#975fe5',
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: '<i class="ele-chart-dot" style="background: #975fe5;"></i>{b0}: {c0}'
|
||||
},
|
||||
grid: {
|
||||
top: 10,
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
show: false,
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: this.payNumData.map(d => d.date)
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
show: false,
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
opacity: 0.5
|
||||
},
|
||||
data: this.payNumData.map(d => d.value)
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
// 支付笔数柱状图配置
|
||||
payNumChartOption() {
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: '<i class="ele-chart-dot" style="background: #3aa1ff;"></i>{b0}: {c0}'
|
||||
},
|
||||
grid: {
|
||||
top: 10,
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
show: false,
|
||||
type: 'category',
|
||||
data: this.payNumData.map(d => d.date)
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
show: false,
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
data: this.payNumData.map(d => d.value)
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
// 销售额柱状图配置
|
||||
saleChartOption() {
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: this.saleroomData.map(d => d.month)
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
data: this.saleroomData.map(d => d.value)
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
// 访问量柱状图配置
|
||||
visitsChartOption() {
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: this.visitsData.map(d => d.month)
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
data: this.visitsData.map(d => d.value)
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
// 最近1小时访问情况折线图配置
|
||||
visitHourChartOption() {
|
||||
/*if (!this.visitHourData.length) {
|
||||
return null;
|
||||
}*/
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data: ['浏览量', '访问量'],
|
||||
right: 20
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: this.visitHourData.map(d => d.time)
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '浏览量',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
opacity: 0.5
|
||||
},
|
||||
data: this.visitHourData.map(d => d.views)
|
||||
},
|
||||
{
|
||||
name: '访问量',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
opacity: 0.5
|
||||
},
|
||||
data: this.visitHourData.map(d => d.visits)
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getPayNumData();
|
||||
this.getSaleroomData();
|
||||
this.getVisitHourData();
|
||||
this.getWordCloudData();
|
||||
},
|
||||
methods: {
|
||||
/* 获取支付笔数数据 */
|
||||
getPayNumData() {
|
||||
this.payNumData = [
|
||||
{date: '2020-06-12', value: 7},
|
||||
{date: '2020-06-13', value: 5},
|
||||
{date: '2020-06-14', value: 4},
|
||||
{date: '2020-06-15', value: 2},
|
||||
{date: '2020-06-16', value: 4},
|
||||
{date: '2020-06-17', value: 7},
|
||||
{date: '2020-06-18', value: 5},
|
||||
{date: '2020-06-19', value: 6},
|
||||
{date: '2020-06-20', value: 5},
|
||||
{date: '2020-06-21', value: 9},
|
||||
{date: '2020-06-22', value: 6},
|
||||
{date: '2020-06-23', value: 3},
|
||||
{date: '2020-06-24', value: 1},
|
||||
{date: '2020-06-25', value: 5},
|
||||
{date: '2020-06-26', value: 3},
|
||||
{date: '2020-06-27', value: 6},
|
||||
{date: '2020-06-18', value: 5}
|
||||
];
|
||||
},
|
||||
/* 获取销售量数据 */
|
||||
getSaleroomData() {
|
||||
// 销售量
|
||||
this.saleroomData = [
|
||||
{month: '1月', value: 816},
|
||||
{month: '2月', value: 542},
|
||||
{month: '3月', value: 914},
|
||||
{month: '4月', value: 781},
|
||||
{month: '5月', value: 355},
|
||||
{month: '6月', value: 796},
|
||||
{month: '7月', value: 714},
|
||||
{month: '8月', value: 1195},
|
||||
{month: '9月', value: 1055},
|
||||
{month: '10月', value: 271},
|
||||
{month: '11月', value: 384},
|
||||
{month: '12月', value: 1098}
|
||||
];
|
||||
this.saleroomRankData = [
|
||||
{name: '工专路 1 号店', value: '323,234'},
|
||||
{name: '工专路 2 号店', value: '323,234'},
|
||||
{name: '工专路 3 号店', value: '323,234'},
|
||||
{name: '工专路 4 号店', value: '323,234'},
|
||||
{name: '工专路 5 号店', value: '323,234'},
|
||||
{name: '工专路 6 号店', value: '323,234'},
|
||||
{name: '工专路 7 号店', value: '323,234'}
|
||||
];
|
||||
// 访问量
|
||||
this.visitsData = [
|
||||
{month: '1月', value: 1098},
|
||||
{month: '2月', value: 384},
|
||||
{month: '3月', value: 271},
|
||||
{month: '4月', value: 1055},
|
||||
{month: '5月', value: 1195},
|
||||
{month: '6月', value: 714},
|
||||
{month: '7月', value: 796},
|
||||
{month: '8月', value: 355},
|
||||
{month: '9月', value: 781},
|
||||
{month: '10月', value: 914},
|
||||
{month: '11月', value: 542},
|
||||
{month: '12月', value: 816}
|
||||
];
|
||||
this.visitsRankData = [
|
||||
{name: '工专路 1 号店', value: '323,234'},
|
||||
{name: '工专路 2 号店', value: '323,234'},
|
||||
{name: '工专路 3 号店', value: '323,234'},
|
||||
{name: '工专路 4 号店', value: '323,234'},
|
||||
{name: '工专路 5 号店', value: '323,234'},
|
||||
{name: '工专路 6 号店', value: '323,234'},
|
||||
{name: '工专路 7 号店', value: '323,234'}
|
||||
];
|
||||
},
|
||||
/* 获取最近1小时访问情况数据 */
|
||||
getVisitHourData() {
|
||||
this.visitHourData = [
|
||||
{time: '16:00', visits: 15, views: 45},
|
||||
{time: '16:05', visits: 39, views: 169},
|
||||
{time: '16:10', visits: 152, views: 400},
|
||||
{time: '16:15', visits: 94, views: 285},
|
||||
{time: '16:20', visits: 102, views: 316},
|
||||
{time: '16:25', visits: 86, views: 148},
|
||||
{time: '16:30', visits: 39, views: 150},
|
||||
{time: '16:35', visits: 38, views: 234},
|
||||
{time: '16:40', visits: 95, views: 158},
|
||||
{time: '16:45', visits: 30, views: 100},
|
||||
{time: '16:50', visits: 86, views: 266}
|
||||
];
|
||||
},
|
||||
/* 获取词云数据 */
|
||||
getWordCloudData() {
|
||||
this.hotSearchData = [
|
||||
{name: "软妹子", value: 23},
|
||||
{name: "汪星人", value: 23},
|
||||
{name: "长腿欧巴", value: 23},
|
||||
{name: "萝莉", value: 22},
|
||||
{name: "辣~", value: 22},
|
||||
{name: "K歌", value: 22},
|
||||
{name: "大长腿", value: 21},
|
||||
{name: "川妹子", value: 21},
|
||||
{name: "女神", value: 21},
|
||||
{name: "米粉", value: 20},
|
||||
{name: "专注设计", value: 20},
|
||||
{name: "逛街", value: 20},
|
||||
{name: "黑长直", value: 20},
|
||||
{name: "海纳百川", value: 19},
|
||||
{name: "萌萌哒", value: 19},
|
||||
{name: "坚持", value: 19},
|
||||
{name: "话唠", value: 19},
|
||||
{name: "果粉", value: 18},
|
||||
{name: "喵星人", value: 18},
|
||||
{name: "花粉", value: 18},
|
||||
{name: "衬衫控", value: 18},
|
||||
{name: "宅男", value: 17},
|
||||
{name: "小清新", value: 17},
|
||||
{name: "眼镜男", value: 17},
|
||||
{name: "琼瑶", value: 17},
|
||||
{name: "穷游党", value: 16},
|
||||
{name: "铲屎官", value: 16},
|
||||
{name: "正太", value: 16},
|
||||
{name: "中二病", value: 16},
|
||||
{name: "夜猫子", value: 15},
|
||||
{name: "逗比", value: 15},
|
||||
{name: "腹黑", value: 15},
|
||||
{name: "吃鸡", value: 15},
|
||||
{name: "为了联盟", value: 14},
|
||||
{name: "背包客", value: 14},
|
||||
{name: "民谣", value: 14},
|
||||
{name: "为了部落", value: 14},
|
||||
{name: "懒癌患者", value: 13},
|
||||
{name: "追剧", value: 13},
|
||||
{name: "IT民工", value: 13},
|
||||
{name: "CNB成员", value: 13},
|
||||
{name: "选择困难", value: 12},
|
||||
{name: "锤粉", value: 12},
|
||||
{name: "欧皇", value: 12},
|
||||
{name: "仙气十足", value: 12}
|
||||
];
|
||||
}
|
||||
},
|
||||
activated() {
|
||||
['visitChart', 'payNumChart', 'saleChart', 'visitsChart', 'visitHourChart', 'hotSearchChart'].forEach((name) => {
|
||||
this.$refs[name].resize();
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 统计卡片 */
|
||||
.analysis-chart-card :deep(.ant-card-body) {
|
||||
padding: 16px 22px 12px 22px;
|
||||
}
|
||||
|
||||
.analysis-chart-card-num {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.analysis-chart-card-content {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.analysis-chart-card :deep(.ant-divider) {
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
/* 销售额、访问量 */
|
||||
.monitor-card-tabs :deep(.ant-tabs-bar) {
|
||||
padding: 0 16px 0 4px;
|
||||
}
|
||||
|
||||
.monitor-card-tabs :deep(.ant-tabs-tab) {
|
||||
padding-left: 2px;
|
||||
padding-right: 2px;
|
||||
margin: 0 12px !important;
|
||||
}
|
||||
|
||||
.monitor-card-tabs :deep(.ant-tabs-tabpane) {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.demo-monitor-title {
|
||||
padding: 6px 20px;
|
||||
}
|
||||
|
||||
.demo-monitor-rank-item {
|
||||
padding: 0 20px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 880px) {
|
||||
.analysis-tabs-extra {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
668
src/views/dashboard/monitor.vue
Normal file
668
src/views/dashboard/monitor.vue
Normal file
@@ -0,0 +1,668 @@
|
||||
<template>
|
||||
<div class="ele-body ele-body-card">
|
||||
<!-- 顶部统计卡片 -->
|
||||
<a-row :gutter="16">
|
||||
<a-col :md="6" :sm="12" :xs="12">
|
||||
<a-card :bordered="false" class="monitor-count-card">
|
||||
<ele-tag
|
||||
color="blue"
|
||||
shape="circle"
|
||||
size="large">
|
||||
<eye-filled/>
|
||||
</ele-tag>
|
||||
<h1 class="monitor-count-card-num">21.2 k</h1>
|
||||
<div class="monitor-count-card-text">总访问人数</div>
|
||||
<ele-avatar-list
|
||||
:data="visitUsers"
|
||||
size="small"
|
||||
:max="4"/>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :md="6" :sm="12" :xs="12">
|
||||
<a-card :bordered="false" class="monitor-count-card">
|
||||
<ele-tag
|
||||
color="orange"
|
||||
shape="circle"
|
||||
size="large">
|
||||
<fire-filled/>
|
||||
</ele-tag>
|
||||
<h1 class="monitor-count-card-num">1.6 k</h1>
|
||||
<div class="monitor-count-card-text">点击量（近30天）</div>
|
||||
<div class="monitor-count-card-trend ele-text-success">
|
||||
<up-outlined/>
|
||||
<span>110.5%</span>
|
||||
</div>
|
||||
<a-tooltip title="指标说明">
|
||||
<question-circle-outlined class="monitor-count-card-tips"/>
|
||||
</a-tooltip>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :md="6" :sm="12" :xs="12">
|
||||
<a-card :bordered="false" class="monitor-count-card">
|
||||
<ele-tag
|
||||
color="red"
|
||||
shape="circle"
|
||||
size="large">
|
||||
<flag-filled/>
|
||||
</ele-tag>
|
||||
<h1 class="monitor-count-card-num">826.0</h1>
|
||||
<div class="monitor-count-card-text">到达量（近30天）</div>
|
||||
<div class="monitor-count-card-trend ele-text-danger">
|
||||
<down-outlined/>
|
||||
<span>15.5%</span>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :md="6" :sm="12" :xs="12">
|
||||
<a-card :bordered="false" class="monitor-count-card">
|
||||
<ele-tag
|
||||
color="green"
|
||||
shape="circle"
|
||||
size="large">
|
||||
<thunderbolt-filled/>
|
||||
</ele-tag>
|
||||
<h1 class="monitor-count-card-num">28.8 %</h1>
|
||||
<div class="monitor-count-card-text">转化率（近30天）</div>
|
||||
<div class="monitor-count-card-trend ele-text-success">
|
||||
<up-outlined/>
|
||||
<span>65.8%</span>
|
||||
</div>
|
||||
<a-tooltip title="指标说明">
|
||||
<question-circle-outlined class="monitor-count-card-tips"/>
|
||||
</a-tooltip>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="16">
|
||||
<!-- 用户分布 -->
|
||||
<a-col :lg="18" :md="24" :sm="24" :xs="24">
|
||||
<a-card :bordered="false" title="用户分布">
|
||||
<a-row>
|
||||
<a-col :sm="18" :xs="24">
|
||||
<ele-chart
|
||||
ref="userCountMapChart"
|
||||
:options="userCountMapOption"
|
||||
style="height: 485px;"/>
|
||||
</a-col>
|
||||
<a-col :sm="6" :xs="24">
|
||||
<ele-chart
|
||||
ref="userCountChart"
|
||||
style="height: 485px;"
|
||||
:options="userCountChartOption"/>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<!-- 在线人数 -->
|
||||
<a-col :lg="6" :md="24" :sm="24" :xs="24">
|
||||
<a-row :gutter="16">
|
||||
<a-col :lg="24" :md="12" :sm="24" :xs="24">
|
||||
<a-card :bordered="false" title="在线人数">
|
||||
<div class="monitor-online-num-card">
|
||||
<div>{{ currentTime }}</div>
|
||||
<div class="monitor-online-num-title">
|
||||
<ele-count-up
|
||||
:end-val="228"
|
||||
@ready="(ins) => { onlineNumAnimIns = ins; }"/>
|
||||
</div>
|
||||
<div class="monitor-online-num-text">在线总人数</div>
|
||||
<a-badge status="processing" :text="updateTimeText"/>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :lg="24" :md="12" :sm="24" :xs="24">
|
||||
<a-card
|
||||
:bordered="false"
|
||||
title="浏览器分布"
|
||||
:body-style="{padding: '6px 0'}">
|
||||
<ele-chart
|
||||
ref="browserChart"
|
||||
style="height: 240px;"
|
||||
:options="browserChartOption"/>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
<!-- 用户评价 -->
|
||||
<a-col :lg="12" :md="24" :sm="24" :xs="24">
|
||||
<a-card :bordered="false" title="用户评价">
|
||||
<div class="ele-cell ele-cell-align-bottom">
|
||||
<div style="font-size: 51px;line-height: 1;">4.5</div>
|
||||
<div class="ele-cell-content">
|
||||
<a-rate :value="userRate" disabled/>
|
||||
<span style="color: #fadb14;margin-left: 8px;">很棒</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ele-cell" style="margin: 18px 0;">
|
||||
<div style="font-size: 28px;line-height: 1;" class="ele-text-placeholder">-0%</div>
|
||||
<div class="ele-cell-content ele-text-small ele-text-secondary">当前没有评价波动</div>
|
||||
</div>
|
||||
<div class="ele-cell">
|
||||
<div class="ele-cell-content">
|
||||
<a-progress
|
||||
:percent="60"
|
||||
stroke-color="#52c41a"
|
||||
:show-info="false"/>
|
||||
</div>
|
||||
<div class="monitor-evaluate-text">
|
||||
<star-filled/>
|
||||
<span>5 : 368 人</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ele-cell">
|
||||
<div class="ele-cell-content">
|
||||
<a-progress
|
||||
:percent="40"
|
||||
stroke-color="#1890ff"
|
||||
:show-info="false"/>
|
||||
</div>
|
||||
<div class="monitor-evaluate-text">
|
||||
<star-filled/>
|
||||
<span>4 : 256 人</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ele-cell">
|
||||
<div class="ele-cell-content">
|
||||
<a-progress
|
||||
:percent="20"
|
||||
stroke-color="#faad14"
|
||||
:show-info="false"/>
|
||||
</div>
|
||||
<div class="monitor-evaluate-text">
|
||||
<star-filled/>
|
||||
<span>3 : 49 人</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ele-cell">
|
||||
<div class="ele-cell-content">
|
||||
<a-progress
|
||||
:percent="10"
|
||||
stroke-color="#f5222d"
|
||||
:show-info="false"/>
|
||||
</div>
|
||||
<div class="monitor-evaluate-text">
|
||||
<star-filled/>
|
||||
<span>2 : 14 人</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ele-cell">
|
||||
<div class="ele-cell-content">
|
||||
<a-progress
|
||||
:percent="0"
|
||||
:show-info="false"/>
|
||||
</div>
|
||||
<div class="monitor-evaluate-text">
|
||||
<star-filled/>
|
||||
<span>1 : 0 人</span>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<!-- 用户满意度 -->
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-card :bordered="false" title="用户满意度">
|
||||
<div class="ele-cell ele-text-center">
|
||||
<div class="ele-cell-content" style="font-size: 24px;">856</div>
|
||||
<div class="ele-cell-content">
|
||||
<div class="monitor-face-smile"><i></i></div>
|
||||
<div class="ele-text-secondary" style="margin-top: 8px;">正面评论</div>
|
||||
</div>
|
||||
<h2 class="ele-cell-content ele-text-success">82%</h2>
|
||||
</div>
|
||||
<a-divider style="margin: 26px 0;"/>
|
||||
<div class="ele-cell ele-text-center">
|
||||
<div class="ele-cell-content" style="font-size: 24px;">60</div>
|
||||
<div class="ele-cell-content">
|
||||
<div class="monitor-face-cry"><i></i></div>
|
||||
<div class="ele-text-secondary" style="margin-top: 8px;">负面评论</div>
|
||||
</div>
|
||||
<h2 class="ele-cell-content ele-text-danger">9%</h2>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<!-- 用户活跃度 -->
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-card :bordered="false" title="用户活跃度">
|
||||
<div class="ele-cell" style="padding: 32px 0;">
|
||||
<div class="ele-cell-content ele-text-center">
|
||||
<div class="monitor-progress-group">
|
||||
<a-progress
|
||||
type="circle"
|
||||
:percent="70"
|
||||
stroke-color="#52c41a"
|
||||
:show-info="false"
|
||||
:width="161"/>
|
||||
<a-progress
|
||||
type="circle"
|
||||
:percent="60"
|
||||
stroke-color="#1890ff"
|
||||
:show-info="false"
|
||||
:width="121"
|
||||
:stroke-width="5"/>
|
||||
<a-progress
|
||||
type="circle"
|
||||
:percent="35"
|
||||
stroke-color="#f5222d"
|
||||
:show-info="false"
|
||||
:width="91"
|
||||
:stroke-width="4"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="monitor-progress-legends">
|
||||
<div class="ele-text-small">
|
||||
<a-badge color="green" text="活跃率: 70%"/>
|
||||
</div>
|
||||
<div class="ele-text-small">
|
||||
<a-badge color="blue" text="留存率: 60%"/>
|
||||
</div>
|
||||
<div class="ele-text-small">
|
||||
<a-badge color="red" text="跳出率: 35%"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import EleCountUp from 'ele-admin-pro/packages/ele-count-up';
|
||||
import EleChart from 'ele-admin-pro/packages/ele-chart';
|
||||
import {
|
||||
QuestionCircleOutlined,
|
||||
EyeFilled,
|
||||
FireFilled,
|
||||
FlagFilled,
|
||||
ThunderboltFilled,
|
||||
UpOutlined,
|
||||
DownOutlined,
|
||||
StarFilled
|
||||
} from '@ant-design/icons-vue';
|
||||
|
||||
export default {
|
||||
name: 'DashboardMonitor',
|
||||
components: {
|
||||
EleCountUp,
|
||||
EleChart,
|
||||
QuestionCircleOutlined,
|
||||
EyeFilled,
|
||||
FireFilled,
|
||||
FlagFilled,
|
||||
ThunderboltFilled,
|
||||
UpOutlined,
|
||||
DownOutlined,
|
||||
StarFilled
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 访问人数头像列表数据
|
||||
visitUsers: [
|
||||
{
|
||||
name: 'SunSmile',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg'
|
||||
},
|
||||
{
|
||||
name: '你的名字很好听',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/b6a811873e704db49db994053a5019b2.jpg'
|
||||
},
|
||||
{
|
||||
name: '全村人的希望',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg'
|
||||
},
|
||||
{
|
||||
name: 'Jasmine',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/f6bc05af944a4f738b54128717952107.jpg'
|
||||
},
|
||||
{
|
||||
name: '酷酷的大叔',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/2d98970a51b34b6b859339c96b240dcd.jpg'
|
||||
},
|
||||
{
|
||||
name: '管理员',
|
||||
avatar: 'https://cdn.eleadmin.com/20200610/avatar.jpg'
|
||||
}
|
||||
],
|
||||
// 在线总人数倒计时
|
||||
updateTime: 5,
|
||||
// 中国地图轮廓数据
|
||||
chinaMapData: null,
|
||||
// 用户分布数据
|
||||
userCountData: [],
|
||||
// 当前时间
|
||||
currentTime: '20:58:22',
|
||||
// 在线人数动画数字组件实例
|
||||
onlineNumAnimIns: null,
|
||||
// 在线人数更新定时器
|
||||
onlineNumTimer: null,
|
||||
// 浏览器分布环形图数据
|
||||
browserCountData: [],
|
||||
// 用户评分
|
||||
userRate: 4.5
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 在线人数倒计时文字
|
||||
updateTimeText() {
|
||||
return this.updateTime + ' 秒后更新';
|
||||
},
|
||||
// 用户分布地图配置
|
||||
userCountMapOption() {
|
||||
if (!this.chinaMapData) {
|
||||
return null;
|
||||
}
|
||||
let data = this.userCountData.map(d => d.value).sort((a, b) => (a - b));
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
visualMap: {
|
||||
min: data[data.length - 1] || 0,
|
||||
max: data[0] || 0,
|
||||
text: ['高', '低'],
|
||||
calculable: true,
|
||||
color: ['#1890FF', '#EBF3FF']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '用户数',
|
||||
type: 'map',
|
||||
map: 'china',
|
||||
label: {
|
||||
show: true
|
||||
},
|
||||
data: this.userCountData
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
// 用户分布柱状图配置
|
||||
userCountChartOption() {
|
||||
let data = this.userCountData
|
||||
.filter(d => d.value > 0)
|
||||
.sort((a, b) => {
|
||||
return a.value - b.value;
|
||||
});
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: '<i class="ele-chart-dot" style="background: #3aa1ff;"></i>{b0}: {c0}'
|
||||
},
|
||||
grid: {
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
left: 50,
|
||||
right: 0
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
data: data.map(d => d.name)
|
||||
}
|
||||
],
|
||||
xAxis: [
|
||||
{
|
||||
show: false,
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
data: data.map(d => d.value)
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
// 浏览器分布饼图配置
|
||||
browserChartOption() {
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
data: this.browserCountData.map(d => d.name),
|
||||
bottom: 5,
|
||||
itemWidth: 10,
|
||||
itemHeight: 10,
|
||||
icon: 'circle'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['45%', '70%'],
|
||||
center: ['50%', '43%'],
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
data: this.browserCountData
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.doUpdateOnlineNum();
|
||||
this.getChinaMapData();
|
||||
this.getUserCountData();
|
||||
this.getBrowserCountData();
|
||||
},
|
||||
methods: {
|
||||
/* 在线人数更新倒计时 */
|
||||
doUpdateOnlineNum() {
|
||||
this.currentTime = this.$util.toDateString(new Date(), 'HH:mm:ss');
|
||||
this.onlineNumTimer = setInterval(() => {
|
||||
this.currentTime = this.$util.toDateString(new Date(), 'HH:mm:ss');
|
||||
if (this.updateTime === 1) {
|
||||
this.updateTime = 5;
|
||||
if (this.onlineNumAnimIns) {
|
||||
this.onlineNumAnimIns.update(100 + Math.round(Math.random() * 900));
|
||||
}
|
||||
} else {
|
||||
this.updateTime--;
|
||||
}
|
||||
}, 1000);
|
||||
},
|
||||
/* 获取中国地图数据并注册地图 */
|
||||
getChinaMapData() {
|
||||
this.$http.get('https://cdn.eleadmin.com/20200610/china-provinces.geo.json').then(res => {
|
||||
EleChart.registerMap('china', res.data);
|
||||
this.chinaMapData = res.data;
|
||||
}).catch(e => {
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
},
|
||||
/* 获取用户分布数据 */
|
||||
getUserCountData() {
|
||||
this.userCountData = [
|
||||
{name: "贵州", value: 570},
|
||||
{name: "云南", value: 8890},
|
||||
{name: "重庆", value: 10010},
|
||||
{name: "吉林", value: 5056},
|
||||
{name: "山西", value: 2123},
|
||||
{name: "天津", value: 9130},
|
||||
{name: "江西", value: 10170},
|
||||
{name: "广西", value: 6172},
|
||||
{name: "陕西", value: 9251},
|
||||
{name: "黑龙江", value: 5125},
|
||||
{name: "安徽", value: 9530},
|
||||
{name: "北京", value: 51919},
|
||||
{name: "福建", value: 3756},
|
||||
{name: "上海", value: 59190},
|
||||
{name: "湖北", value: 37109},
|
||||
{name: "湖南", value: 8966},
|
||||
{name: "四川", value: 31020},
|
||||
{name: "辽宁", value: 7222},
|
||||
{name: "河北", value: 3451},
|
||||
{name: "河南", value: 9693},
|
||||
{name: "浙江", value: 62310},
|
||||
{name: "山东", value: 39231},
|
||||
{name: "江苏", value: 35911},
|
||||
{name: "广东", value: 55891}
|
||||
];
|
||||
},
|
||||
/* 获取用户浏览器分布数据 */
|
||||
getBrowserCountData() {
|
||||
this.browserCountData = [
|
||||
{name: 'Chrome', value: 9052},
|
||||
{name: 'Safari', value: 535},
|
||||
{name: 'Firefox', value: 1610},
|
||||
{name: 'Edge', value: 2800},
|
||||
{name: 'IE', value: 3200},
|
||||
{name: 'Other', value: 1700}
|
||||
];
|
||||
}
|
||||
},
|
||||
activated() {
|
||||
['userCountMapChart', 'userCountChart', 'browserChart'].forEach((name) => {
|
||||
this.$refs[name].resize();
|
||||
});
|
||||
},
|
||||
beforeUnmount() {
|
||||
// 销毁定时器
|
||||
if (this.onlineNumTimer) {
|
||||
clearInterval(this.onlineNumTimer);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 统计卡片 */
|
||||
.monitor-count-card {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.monitor-count-card .monitor-count-card-num {
|
||||
margin-top: 6px;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.monitor-count-card .monitor-count-card-text {
|
||||
font-size: 12px;
|
||||
margin: 8px 0;
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
.monitor-count-card .monitor-count-card-trend {
|
||||
font-weight: bold;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
.monitor-count-card .monitor-count-card-trend > .anticon {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.monitor-count-card .monitor-count-card-tips {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
cursor: pointer;
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
/* 当前在线人数卡片 */
|
||||
.monitor-online-num-card {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.monitor-online-num-text {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.monitor-online-num-title {
|
||||
font-size: 48px;
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 992px) {
|
||||
.monitor-online-num-card {
|
||||
padding: 22px 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 用户评价 */
|
||||
.monitor-evaluate-text {
|
||||
width: 90px;
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
.monitor-evaluate-text > .anticon {
|
||||
font-size: 12px;
|
||||
margin: 0 6px 0 8px;
|
||||
}
|
||||
|
||||
/* 笑脸、哭脸 */
|
||||
.monitor-face-smile, .monitor-face-cry {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
display: inline-block;
|
||||
background: #FBD971;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.monitor-face-smile > i, .monitor-face-smile:before, .monitor-face-smile:after,
|
||||
.monitor-face-cry > i, .monitor-face-cry:before, .monitor-face-cry:after {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
transform: rotate(225deg);
|
||||
border: 3px solid #F0C419;
|
||||
border-right-color: transparent !important;
|
||||
border-bottom-color: transparent !important;
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
left: 11px;
|
||||
}
|
||||
|
||||
.monitor-face-smile:before, .monitor-face-smile:after,
|
||||
.monitor-face-cry:before, .monitor-face-cry:after {
|
||||
content: "";
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
left: 8px;
|
||||
top: 14px;
|
||||
border-color: #F29C1F;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.monitor-face-smile:after, .monitor-face-cry:after {
|
||||
left: auto;
|
||||
right: 8px;
|
||||
}
|
||||
|
||||
.monitor-face-cry > i {
|
||||
transform: rotate(45deg);
|
||||
bottom: -6px;
|
||||
}
|
||||
|
||||
/** 圆形进度条组合 */
|
||||
.monitor-progress-group {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.monitor-progress-group .ant-progress:not(:first-child) {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
.monitor-progress-legends > div + div {
|
||||
margin-top: 8px;
|
||||
}
|
||||
</style>
|
||||
708
src/views/dashboard/workplace.vue
Normal file
708
src/views/dashboard/workplace.vue
Normal file
@@ -0,0 +1,708 @@
|
||||
<template>
|
||||
<div class="ele-body ele-body-card">
|
||||
<!-- 顶部卡片 -->
|
||||
<a-card
|
||||
:bordered="false"
|
||||
:body-style="{padding: '20px'}">
|
||||
<div class="ele-cell workplace-user-card">
|
||||
<div class="ele-cell-content ele-cell">
|
||||
<a-avatar :size="68" :src="loginUser.avatar"/>
|
||||
<div class="ele-cell-content">
|
||||
<h4 class="ele-elip">早安，{{ loginUser.nickname }}，开始您一天的工作吧！</h4>
|
||||
<div class="ele-elip ele-text-secondary">
|
||||
<cloud-outlined/>
|
||||
<em>今日多云转阴，18℃ - 22℃，出门记得穿外套哦~</em>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="workplace-count-group">
|
||||
<div class="workplace-count-item">
|
||||
<div class="workplace-count-header">
|
||||
<ele-tag
|
||||
color="blue"
|
||||
shape="circle"
|
||||
size="small">
|
||||
<appstore-filled/>
|
||||
</ele-tag>
|
||||
<span class="workplace-count-name">项目数</span>
|
||||
</div>
|
||||
<h2>3</h2>
|
||||
</div>
|
||||
<div class="workplace-count-item">
|
||||
<div class="workplace-count-header">
|
||||
<ele-tag
|
||||
color="orange"
|
||||
shape="circle"
|
||||
size="small">
|
||||
<check-square-outlined/>
|
||||
</ele-tag>
|
||||
<span class="workplace-count-name">待办项</span>
|
||||
</div>
|
||||
<h2>6 / 24</h2>
|
||||
</div>
|
||||
<div class="workplace-count-item">
|
||||
<div class="workplace-count-header">
|
||||
<ele-tag
|
||||
color="green"
|
||||
shape="circle"
|
||||
size="small">
|
||||
<bell-filled/>
|
||||
</ele-tag>
|
||||
<span class="workplace-count-name">消息</span>
|
||||
</div>
|
||||
<h2>1,689</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
<!-- 快捷方式块 -->
|
||||
<a-row :gutter="16">
|
||||
<a-col :lg="3" :md="6" :sm="12" :xs="12">
|
||||
<a-card
|
||||
:bordered="false"
|
||||
hoverable
|
||||
:body-style="{padding: 0}">
|
||||
<router-link
|
||||
to="/system/user"
|
||||
class="app-link-block">
|
||||
<user-outlined class="app-link-icon"/>
|
||||
<div class="app-link-title">用户</div>
|
||||
</router-link>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :lg="3" :md="6" :sm="12" :xs="12">
|
||||
<a-card
|
||||
:bordered="false"
|
||||
hoverable
|
||||
:body-style="{padding: 0}">
|
||||
<router-link
|
||||
to="/dashboard/analysis"
|
||||
class="app-link-block">
|
||||
<shopping-cart-outlined
|
||||
class="app-link-icon"
|
||||
style="color: #95de64;"/>
|
||||
<div class="app-link-title">分析</div>
|
||||
</router-link>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :lg="3" :md="6" :sm="12" :xs="12">
|
||||
<a-card
|
||||
:bordered="false"
|
||||
hoverable
|
||||
:body-style="{padding: 0}">
|
||||
<router-link
|
||||
to="/list/card/project"
|
||||
class="app-link-block">
|
||||
<fund-projection-screen-outlined
|
||||
class="app-link-icon"
|
||||
style="color: #ff9c6e;"/>
|
||||
<div class="app-link-title">商品</div>
|
||||
</router-link>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :lg="3" :md="6" :sm="12" :xs="12">
|
||||
<a-card
|
||||
:bordered="false"
|
||||
hoverable
|
||||
:body-style="{padding: 0}">
|
||||
<router-link
|
||||
to="/list/basic"
|
||||
class="app-link-block">
|
||||
<file-search-outlined
|
||||
class="app-link-icon"
|
||||
style="color: #b37feb;"/>
|
||||
<div class="app-link-title">订单</div>
|
||||
</router-link>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :lg="3" :md="6" :sm="12" :xs="12">
|
||||
<a-card
|
||||
:bordered="false"
|
||||
hoverable
|
||||
:body-style="{padding: 0}">
|
||||
<router-link
|
||||
to="/list/advanced"
|
||||
class="app-link-block">
|
||||
<credit-card-outlined
|
||||
class="app-link-icon"
|
||||
style="color: #ffd666;"/>
|
||||
<div class="app-link-title">票据</div>
|
||||
</router-link>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :lg="3" :md="6" :sm="12" :xs="12">
|
||||
<a-card
|
||||
:bordered="false"
|
||||
hoverable
|
||||
:body-style="{padding: 0}">
|
||||
<router-link
|
||||
to="/user/message"
|
||||
class="app-link-block">
|
||||
<mail-outlined
|
||||
class="app-link-icon"
|
||||
style="color: #5cdbd3;"/>
|
||||
<div class="app-link-title">消息</div>
|
||||
</router-link>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :lg="3" :md="6" :sm="12" :xs="12">
|
||||
<a-card
|
||||
:bordered="false"
|
||||
hoverable
|
||||
:body-style="{padding: 0}">
|
||||
<router-link
|
||||
to="/extension/more"
|
||||
class="app-link-block">
|
||||
<tags-outlined
|
||||
class="app-link-icon"
|
||||
style="color: #ff85c0;"/>
|
||||
<div class="app-link-title">标签</div>
|
||||
</router-link>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :lg="3" :md="6" :sm="12" :xs="12">
|
||||
<a-card
|
||||
:bordered="false"
|
||||
hoverable
|
||||
:body-style="{padding: 0}">
|
||||
<router-link
|
||||
to="/user/profile"
|
||||
class="app-link-block">
|
||||
<control-outlined
|
||||
class="app-link-icon"
|
||||
style="color: #ffc069;"/>
|
||||
<div class="app-link-title">配置</div>
|
||||
</router-link>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="16">
|
||||
<!-- 最新动态 -->
|
||||
<a-col :lg="8" :md="24" :sm="24" :xs="24">
|
||||
<a-card
|
||||
title="最新动态"
|
||||
:bordered="false"
|
||||
:body-style="{padding: 0}">
|
||||
<div
|
||||
style="height: 347px;padding: 28px 20px 0 20px;"
|
||||
class="ele-scrollbar-hover">
|
||||
<a-timeline>
|
||||
<a-timeline-item
|
||||
v-for="(item, index) in activities"
|
||||
:key="index"
|
||||
:color="item.color">
|
||||
<em>{{ item.time }}</em>
|
||||
<em>{{ item.title }}</em>
|
||||
</a-timeline-item>
|
||||
</a-timeline>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<!-- 我的任务 -->
|
||||
<a-col :lg="8" :md="24" :sm="24" :xs="24">
|
||||
<a-card
|
||||
title="我的任务"
|
||||
:bordered="false"
|
||||
:body-style="{padding: '10px 8px 10px 8px'}">
|
||||
<div class="ant-table ant-table-middle">
|
||||
<div class="ant-table-content">
|
||||
<div class="ant-table-body" style="overflow-x: auto;">
|
||||
<table style="min-width: max-content;">
|
||||
<colgroup>
|
||||
<col width="48"/>
|
||||
<col width="60"/>
|
||||
<col/>
|
||||
<col width="80"/>
|
||||
</colgroup>
|
||||
<thead class="ant-table-thead">
|
||||
<tr>
|
||||
<th></th>
|
||||
<th style="text-align: center;">优先级</th>
|
||||
<th>任务名称</th>
|
||||
<th style="text-align: center;">状态</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<draggable
|
||||
tag="tbody"
|
||||
item-key="id"
|
||||
v-model="taskList"
|
||||
:component-data="{class: 'ant-table-tbody'}"
|
||||
handle=".anticon-menu"
|
||||
:animation="300">
|
||||
<template #item="{ element }">
|
||||
<tr>
|
||||
<td style="text-align: center;">
|
||||
<menu-outlined style="cursor: move;"/>
|
||||
</td>
|
||||
<td style="text-align: center;padding: 8px;">
|
||||
<ele-tag
|
||||
:color="['red', 'orange', 'blue'][element.priority - 1]"
|
||||
shape="circle">
|
||||
{{ element.priority }}
|
||||
</ele-tag>
|
||||
</td>
|
||||
<td>
|
||||
<a>{{ element.taskName }}</a>
|
||||
</td>
|
||||
<td style="text-align: center;">
|
||||
<span
|
||||
:class="['ele-text-warning', 'ele-text-success', 'ele-text-info'][element.state]">
|
||||
{{ ['未开始', '进行中', '已完成'][element.state] }}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</draggable>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<!-- 本月目标 -->
|
||||
<a-col :lg="8" :md="24" :sm="24" :xs="24">
|
||||
<a-card title="本月目标" :bordered="false">
|
||||
<div class="workplace-goal-group">
|
||||
<a-progress
|
||||
type="dashboard"
|
||||
:percent="80"
|
||||
:show-info="false"
|
||||
:width="181"
|
||||
:stroke-width="4"/>
|
||||
<div class="workplace-goal-content">
|
||||
<ele-tag
|
||||
color="blue"
|
||||
size="large"
|
||||
shape="circle">
|
||||
<trophy-outlined/>
|
||||
</ele-tag>
|
||||
<div class="workplace-goal-num">285</div>
|
||||
</div>
|
||||
<div class="workplace-goal-text">恭喜，本月目标已达标！</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<!-- 项目进度 -->
|
||||
<a-col :lg="16" :md="24" :sm="24" :xs="24">
|
||||
<a-card
|
||||
title="项目进度"
|
||||
:bordered="false"
|
||||
:body-style="{padding: '12px 12px 1px 12px'}">
|
||||
<a-table
|
||||
:data-source="projectList"
|
||||
row-key="id"
|
||||
:pagination="false"
|
||||
size="middle"
|
||||
:scroll="{x: 'max-content'}">
|
||||
<a-table-column
|
||||
key="index"
|
||||
align="center"
|
||||
:width="48">
|
||||
<template #default="{index}">{{ index + 1 }}</template>
|
||||
</a-table-column>
|
||||
<a-table-column
|
||||
title="项目名称"
|
||||
data-index="projectName">
|
||||
<template #default="{text}">
|
||||
<a>{{ text }}</a>
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column
|
||||
title="开始时间"
|
||||
data-index="startDate"/>
|
||||
<a-table-column
|
||||
title="结束时间"
|
||||
data-index="endDate"/>
|
||||
<a-table-column
|
||||
title="状态"
|
||||
data-index="state"
|
||||
align="center"
|
||||
:width="90">
|
||||
<template #default="{text}">
|
||||
<span
|
||||
:class="['ele-text-success', 'ele-text-danger', 'ele-text-warning', 'ele-text-info ele-text-delete'][text]">
|
||||
{{ ['进行中', '已延期', '未开始', '已结束'][text] }}
|
||||
</span>
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column
|
||||
title="进度"
|
||||
data-index="progress"
|
||||
align="center"
|
||||
:width="180">
|
||||
<template #default="{text}">
|
||||
<a-progress
|
||||
:percent="text"
|
||||
size="small"/>
|
||||
</template>
|
||||
</a-table-column>
|
||||
</a-table>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<!-- 小组成员 -->
|
||||
<a-col :lg="8" :md="24" :sm="24" :xs="24">
|
||||
<a-card
|
||||
title="小组成员"
|
||||
:bordered="false"
|
||||
:body-style="{padding: 0}">
|
||||
<div
|
||||
v-for="(item,index) in userList"
|
||||
:key="index"
|
||||
class="ele-cell user-list-item">
|
||||
<a-avatar
|
||||
:size="46"
|
||||
:src="item.avatar"/>
|
||||
<div class="ele-cell-content">
|
||||
<div class="ele-cell-title">{{ item.name }}</div>
|
||||
<div class="ele-cell-desc">{{ item.desc }}</div>
|
||||
</div>
|
||||
<a-tag
|
||||
:color="['green', 'red'][item.state]">
|
||||
{{ ['在线', '离线'][item.state] }}
|
||||
</a-tag>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
CloudOutlined,
|
||||
AppstoreFilled,
|
||||
CheckSquareOutlined,
|
||||
BellFilled,
|
||||
UserOutlined,
|
||||
ShoppingCartOutlined,
|
||||
FundProjectionScreenOutlined,
|
||||
FileSearchOutlined,
|
||||
CreditCardOutlined,
|
||||
MailOutlined,
|
||||
TagsOutlined,
|
||||
ControlOutlined,
|
||||
MenuOutlined,
|
||||
TrophyOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import draggable from 'vuedraggable';
|
||||
|
||||
export default {
|
||||
name: 'DashboardWorkplace',
|
||||
components: {
|
||||
CloudOutlined,
|
||||
AppstoreFilled,
|
||||
CheckSquareOutlined,
|
||||
BellFilled,
|
||||
UserOutlined,
|
||||
ShoppingCartOutlined,
|
||||
FundProjectionScreenOutlined,
|
||||
FileSearchOutlined,
|
||||
CreditCardOutlined,
|
||||
MailOutlined,
|
||||
TagsOutlined,
|
||||
ControlOutlined,
|
||||
MenuOutlined,
|
||||
TrophyOutlined,
|
||||
draggable
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 最新动态数据
|
||||
activities: [
|
||||
{
|
||||
title: 'SunSmile 解决了bug 登录提示操作失败',
|
||||
time: '20:30',
|
||||
color: 'gray'
|
||||
},
|
||||
{
|
||||
title: 'Jasmine 解决了bug 按钮颜色与设计不符',
|
||||
time: '19:30',
|
||||
color: 'gray'
|
||||
},
|
||||
{
|
||||
title: '项目经理 指派了任务 解决项目一的bug',
|
||||
time: '18:30'
|
||||
},
|
||||
{
|
||||
title: '项目经理 指派了任务 解决项目二的bug',
|
||||
time: '17:30'
|
||||
},
|
||||
{
|
||||
title: '项目经理 指派了任务 解决项目三的bug',
|
||||
time: '16:30'
|
||||
},
|
||||
{
|
||||
title: '项目经理 指派了任务 解决项目四的bug',
|
||||
time: '15:30',
|
||||
color: 'gray'
|
||||
},
|
||||
{
|
||||
title: '项目经理 指派了任务 解决项目五的bug',
|
||||
time: '14:30',
|
||||
color: 'gray'
|
||||
},
|
||||
{
|
||||
title: '项目经理 指派了任务 解决项目六的bug',
|
||||
time: '12:30',
|
||||
color: 'gray'
|
||||
},
|
||||
{
|
||||
title: '项目经理 指派了任务 解决项目七的bug',
|
||||
time: '11:30'
|
||||
},
|
||||
{
|
||||
title: '项目经理 指派了任务 解决项目八的bug',
|
||||
time: '10:30',
|
||||
color: 'gray'
|
||||
},
|
||||
{
|
||||
title: '项目经理 指派了任务 解决项目九的bug',
|
||||
time: '09:30',
|
||||
color: 'green'
|
||||
},
|
||||
{
|
||||
title: '项目经理 指派了任务 解决项目十的bug',
|
||||
time: '08:30',
|
||||
color: 'red'
|
||||
}
|
||||
],
|
||||
// 我的任务数据
|
||||
taskList: [
|
||||
{
|
||||
id: 1,
|
||||
priority: 1,
|
||||
taskName: '解决项目一的bug',
|
||||
state: 0
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
priority: 2,
|
||||
taskName: '解决项目二的bug',
|
||||
state: 0
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
priority: 2,
|
||||
taskName: '解决项目三的bug',
|
||||
state: 1
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
priority: 3,
|
||||
taskName: '解决项目四的bug',
|
||||
state: 1
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
priority: 3,
|
||||
taskName: '解决项目五的bug',
|
||||
state: 2
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
priority: 3,
|
||||
taskName: '解决项目六的bug',
|
||||
state: 2
|
||||
}
|
||||
],
|
||||
// 项目进度数据
|
||||
projectList: [
|
||||
{
|
||||
id: 1,
|
||||
projectName: '项目0000001',
|
||||
state: 0,
|
||||
startDate: '2020-03-01',
|
||||
endDate: '2020-06-01',
|
||||
progress: 30
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
projectName: '项目0000002',
|
||||
state: 0,
|
||||
startDate: '2020-03-01',
|
||||
endDate: '2020-08-01',
|
||||
progress: 10
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
projectName: '项目0000003',
|
||||
state: 1,
|
||||
startDate: '2020-01-01',
|
||||
endDate: '2020-05-01',
|
||||
progress: 60
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
projectName: '项目0000004',
|
||||
state: 1,
|
||||
startDate: '2020-06-01',
|
||||
endDate: '2020-10-01',
|
||||
progress: 0
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
projectName: '项目0000005',
|
||||
state: 2,
|
||||
startDate: '2020-01-01',
|
||||
endDate: '2020-03-01',
|
||||
progress: 100
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
projectName: '项目0000006',
|
||||
state: 3,
|
||||
startDate: '2020-01-01',
|
||||
endDate: '2020-03-01',
|
||||
progress: 100
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
projectName: '项目0000007',
|
||||
state: 3,
|
||||
startDate: '2020-01-01',
|
||||
endDate: '2020-03-01',
|
||||
progress: 100
|
||||
}
|
||||
],
|
||||
// 小组成员数据
|
||||
userList: [
|
||||
{
|
||||
name: 'SunSmile',
|
||||
desc: 'UI设计师、交互专家',
|
||||
state: 0,
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg'
|
||||
},
|
||||
{
|
||||
name: '你的名字很好听',
|
||||
desc: '前端工程师',
|
||||
state: 0,
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/b6a811873e704db49db994053a5019b2.jpg'
|
||||
},
|
||||
{
|
||||
name: '全村人的希望',
|
||||
desc: '前端工程师',
|
||||
state: 0,
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg'
|
||||
},
|
||||
{
|
||||
name: 'Jasmine',
|
||||
desc: '产品经理、项目经理',
|
||||
state: 1,
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/f6bc05af944a4f738b54128717952107.jpg'
|
||||
},
|
||||
{
|
||||
name: '酷酷的大叔',
|
||||
desc: '组长、后端工程师',
|
||||
state: 1,
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/2d98970a51b34b6b859339c96b240dcd.jpg'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 当前登录用户信息
|
||||
loginUser() {
|
||||
return this.$store.state.user.user;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/** 用户卡片 */
|
||||
.workplace-user-card .ele-cell-content {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.workplace-user-card h4 {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.workplace-count-group {
|
||||
white-space: nowrap;
|
||||
text-align: right;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.workplace-count-item {
|
||||
display: inline-block;
|
||||
margin: 0 4px 0 24px;
|
||||
}
|
||||
|
||||
.workplace-count-name {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 992px) {
|
||||
.workplace-count-item {
|
||||
margin: 0 2px 0 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.workplace-user-card {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.workplace-count-group {
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
/** 快捷方式 */
|
||||
.app-link-block {
|
||||
padding: 12px;
|
||||
text-align: center;
|
||||
display: block;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.app-link-block .app-link-icon {
|
||||
color: #69c0ff;
|
||||
font-size: 30px;
|
||||
margin: 6px 0 10px 0;
|
||||
}
|
||||
|
||||
/** 时间轴 */
|
||||
.ele-scrollbar-hover :deep(.ant-timeline-item-last > .ant-timeline-item-content) {
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
/** 本月目标 */
|
||||
.workplace-goal-group {
|
||||
padding: 48px 0;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.workplace-goal-group .workplace-goal-content {
|
||||
position: absolute;
|
||||
top: 90px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.workplace-goal-group .workplace-goal-num {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
/** 小组成员 */
|
||||
.user-list-item {
|
||||
padding: 16px 18px;
|
||||
}
|
||||
|
||||
.user-list-item + .user-list-item {
|
||||
border-top: 1px solid hsla(0, 0%, 60%, .15);
|
||||
}
|
||||
|
||||
/** 表格拖拽 */
|
||||
.ant-table-tbody tr.sortable-chosen {
|
||||
background: hsla(0, 0%, 60%, .1) !important;
|
||||
}
|
||||
|
||||
.ant-table-tbody tr.sortable-chosen td {
|
||||
background: none !important;
|
||||
}
|
||||
</style>
|
||||
245
src/views/example/choose/index.vue
Normal file
245
src/views/example/choose/index.vue
Normal file
@@ -0,0 +1,245 @@
|
||||
<template>
|
||||
<div class="ele-body ele-body-card" style="padding-bottom: 48px;">
|
||||
<a-card title="发布实训活动" :bordered="false">
|
||||
<a-form
|
||||
ref="form"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:label-col="{md: {span: 6}, sm: {span: 24}}"
|
||||
:wrapper-col="{ md: {span: 18}, sm: {span: 24}}">
|
||||
<a-row :gutter="16">
|
||||
<a-col :md="8" :sm="24" :xs="24">
|
||||
<a-form-item label="实训名称:" name="title">
|
||||
<a-input
|
||||
v-model:value="form.title"
|
||||
placeholder="请输入实训名称"
|
||||
allow-clear/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="8" :sm="24" :xs="24">
|
||||
<a-form-item label="起止日期:" name="datetime">
|
||||
<a-range-picker
|
||||
v-model:value="form.datetime"
|
||||
class="ele-fluid">
|
||||
<template #suffixIcon>
|
||||
<calendar-outlined/>
|
||||
</template>
|
||||
</a-range-picker>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="8" :sm="24" :xs="24">
|
||||
<a-form-item label="实训地点:" name="address">
|
||||
<a-select
|
||||
v-model:value="form.address"
|
||||
placeholder="请选择地点"
|
||||
allow-clear>
|
||||
<a-select-option value="1">地点一</a-select-option>
|
||||
<a-select-option value="2">地点二</a-select-option>
|
||||
<a-select-option value="2">地点三</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-form-item
|
||||
label="实训内容:"
|
||||
name="content"
|
||||
:label-col="{md: {span: 2}, sm: {span: 24}}"
|
||||
:wrapper-col="{ md: {span: 22}, sm: {span: 24}}">
|
||||
<a-textarea
|
||||
v-model:value="form.content"
|
||||
placeholder="请输入实训内容"
|
||||
:rows="4"/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-card>
|
||||
<a-card title="选择实训班级:" :bordered="false">
|
||||
<a-row :gutter="16">
|
||||
<a-col :lg="12" :md="24" :sm="24" :xs="24">
|
||||
<!-- 未选择的班级数据表格 -->
|
||||
<ele-pro-table
|
||||
bordered
|
||||
:toolkit="[]"
|
||||
:columns="columns"
|
||||
row-key="classesId"
|
||||
sub-title="未选班级:"
|
||||
empty-text="已全部选择"
|
||||
tools-theme="default"
|
||||
:show-size-changer="false"
|
||||
:datasource="unChooseClass"
|
||||
:scroll="{x: 'max-content'}">
|
||||
<template #toolkit>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="addAll">全部添加
|
||||
</a-button>
|
||||
</template>
|
||||
<template #action="{ record }">
|
||||
<a-button
|
||||
size="small"
|
||||
type="primary"
|
||||
@click="add(record)">添加
|
||||
</a-button>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-col>
|
||||
<a-col :lg="12" :md="24" :sm="24" :xs="24">
|
||||
<!-- 已选择的班级数据表格 -->
|
||||
<ele-pro-table
|
||||
bordered
|
||||
:toolkit="[]"
|
||||
:columns="columns"
|
||||
row-key="classesId"
|
||||
sub-title="已选班级:"
|
||||
emptyText="未选择班级"
|
||||
tools-theme="default"
|
||||
:show-size-changer="false"
|
||||
:datasource="chooseClasses"
|
||||
:scroll="{x: 'max-content'}">
|
||||
<template #toolkit>
|
||||
<a-button
|
||||
danger
|
||||
type="primary"
|
||||
@click="removeAll">全部移除
|
||||
</a-button>
|
||||
</template>
|
||||
<template #action="{ record }">
|
||||
<a-button
|
||||
size="small"
|
||||
danger
|
||||
type="primary"
|
||||
@click="remove(record)">移除
|
||||
</a-button>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
<!-- 底部工具栏 -->
|
||||
<div class="ele-bottom-tool">
|
||||
<div class="ele-bottom-tool-actions">
|
||||
<a-button
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
@click="submit">提交
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {CalendarOutlined} from '@ant-design/icons-vue';
|
||||
|
||||
export default {
|
||||
name: 'ExampleChoose',
|
||||
components: {CalendarOutlined},
|
||||
data() {
|
||||
return {
|
||||
// 加载状态
|
||||
loading: false,
|
||||
// 表单数据
|
||||
form: {},
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
title: [
|
||||
{required: true, message: '请输入实训名称', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
datetime: [
|
||||
{required: true, message: '请选择起止日期', type: 'array', trigger: 'blur'}
|
||||
],
|
||||
address: [
|
||||
{required: true, message: '请选择实训地点', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
content: [
|
||||
{required: true, message: '请输入实训内容', type: 'string', trigger: 'blur'}
|
||||
]
|
||||
},
|
||||
// 全部实训班级
|
||||
classes: [],
|
||||
// 已选择的班级数据
|
||||
chooseClasses: [],
|
||||
// 表格列配置
|
||||
columns: [
|
||||
{
|
||||
width: 90,
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
align: 'center',
|
||||
slots: {customRender: 'action'}
|
||||
},
|
||||
{
|
||||
title: '班级名称',
|
||||
dataIndex: 'classesName'
|
||||
},
|
||||
{
|
||||
title: '专业',
|
||||
dataIndex: 'major'
|
||||
},
|
||||
{
|
||||
title: '学院',
|
||||
dataIndex: 'college'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
/* 未选择的班级数据 */
|
||||
unChooseClass() {
|
||||
return this.classes.filter(d => this.chooseClasses.indexOf(d) === -1);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.query();
|
||||
},
|
||||
methods: {
|
||||
/* 获取全部实训班级 */
|
||||
query() {
|
||||
this.$http.get('https://cdn.eleadmin.com/20200610/classes.json').then(res => {
|
||||
if (res.data.code === 0) {
|
||||
this.classes = res.data.data;
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(e => {
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
},
|
||||
/* 提交 */
|
||||
submit() {
|
||||
this.$refs.form.validate().then(() => {
|
||||
if (!this.chooseClasses.length) {
|
||||
this.$message.error('请选择实训班级');
|
||||
return;
|
||||
}
|
||||
this.loading = true;
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
this.$message.success('提交成功');
|
||||
}, 1500);
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
/* 添加 */
|
||||
add(row) {
|
||||
this.chooseClasses.push(row);
|
||||
},
|
||||
/* 移除 */
|
||||
remove(row) {
|
||||
this.chooseClasses.splice(this.chooseClasses.indexOf(row), 1);
|
||||
},
|
||||
/* 添加全部 */
|
||||
addAll() {
|
||||
this.unChooseClass.forEach(d => {
|
||||
this.chooseClasses.push(d);
|
||||
})
|
||||
},
|
||||
/* 移除所有 */
|
||||
removeAll() {
|
||||
this.chooseClasses.splice(0, this.chooseClasses.length);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
290
src/views/example/document/file-sort.vue
Normal file
290
src/views/example/document/file-sort.vue
Normal file
@@ -0,0 +1,290 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:width="1200"
|
||||
:visible="visible"
|
||||
title="卷内文件调整"
|
||||
@update:visible="updateVisible"
|
||||
@cancel="close"
|
||||
@ok="save">
|
||||
<a-row :gutter="16">
|
||||
<a-col :lg="8" :md="24" :sm="24" :xs="24">
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
bordered
|
||||
ref="docTable"
|
||||
row-key="piece_no"
|
||||
sub-title="案卷列表"
|
||||
:columns="columns1"
|
||||
:datasource="documents"
|
||||
v-model:current="current"
|
||||
:scroll="{x: 'max-content'}"
|
||||
:row-selection="{columnWidth: 48}"
|
||||
:tool-style="{padding: '7px 14px'}"
|
||||
tools-theme="default"
|
||||
:need-page="false"
|
||||
:toolkit="[]">
|
||||
</ele-pro-table>
|
||||
</a-col>
|
||||
<a-col :lg="8" :md="24" :sm="24" :xs="24">
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
bordered
|
||||
ref="fileTable"
|
||||
:loading="loading"
|
||||
sub-title="卷内列表"
|
||||
:datasource="data1"
|
||||
:columns="columns2"
|
||||
row-key="archive_no"
|
||||
tools-theme="default"
|
||||
:scroll="{x: 'max-content'}"
|
||||
v-model:selection="selection1"
|
||||
:row-selection="{columnWidth: 48}"
|
||||
:need-page="false"
|
||||
:toolkit="[]">
|
||||
<template #toolkit>
|
||||
<a-space>
|
||||
<a-button
|
||||
@click="moveUp"
|
||||
type="primary"
|
||||
class="ele-btn-icon">
|
||||
<span><arrow-up-outlined/>上移</span>
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
class="ele-btn-icon"
|
||||
@click="moveDown">
|
||||
<span><arrow-down-outlined/>下移</span>
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
class="ele-btn-icon"
|
||||
@click="moveOut">
|
||||
<span>调出<arrow-right-outlined/></span>
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-col>
|
||||
<a-col :lg="8" :md="24" :sm="24" :xs="24">
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
bordered
|
||||
:loading="loading"
|
||||
:datasource="data2"
|
||||
:columns="columns2"
|
||||
sub-title="未归档列表"
|
||||
row-key="archive_no"
|
||||
tools-theme="default"
|
||||
:scroll="{x: 'max-content'}"
|
||||
v-model:selection="selection2"
|
||||
:row-selection="{columnWidth: 48}"
|
||||
:need-page="false"
|
||||
:toolkit="[]">
|
||||
<template #toolkit>
|
||||
<a-button
|
||||
type="primary"
|
||||
class="ele-btn-icon"
|
||||
@click="moveIn">
|
||||
<span><arrow-left-outlined/>调入</span>
|
||||
</a-button>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
ArrowUpOutlined,
|
||||
ArrowDownOutlined,
|
||||
ArrowLeftOutlined,
|
||||
ArrowRightOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
|
||||
export default {
|
||||
name: 'FileSort',
|
||||
components: {
|
||||
ArrowUpOutlined,
|
||||
ArrowDownOutlined,
|
||||
ArrowLeftOutlined,
|
||||
ArrowRightOutlined
|
||||
},
|
||||
props: {
|
||||
// 弹窗是否打开
|
||||
visible: Boolean,
|
||||
// 案卷列表
|
||||
documents: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
emits: ['update:visible'],
|
||||
data() {
|
||||
return {
|
||||
// 案卷表格列配置
|
||||
columns1: [
|
||||
{
|
||||
title: '案卷题名',
|
||||
dataIndex: 'title'
|
||||
},
|
||||
{
|
||||
title: '案卷档号',
|
||||
dataIndex: 'piece_no'
|
||||
}
|
||||
],
|
||||
// 卷内表格列配置
|
||||
columns2: [
|
||||
{
|
||||
title: '文件题名',
|
||||
dataIndex: 'title'
|
||||
},
|
||||
{
|
||||
title: '文件档号',
|
||||
dataIndex: 'archive_no'
|
||||
}
|
||||
],
|
||||
// 案卷下的全部文件列表
|
||||
data: [],
|
||||
// 选中案卷
|
||||
current: null,
|
||||
// 加载loading
|
||||
loading: true,
|
||||
// 卷内列表选中数据
|
||||
selection1: [],
|
||||
// 未归档列表选中数据
|
||||
selection2: []
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 选中案卷的卷内文件
|
||||
data1() {
|
||||
if (!this.current) {
|
||||
return [];
|
||||
}
|
||||
return this.data.filter(d => d.piece_no === this.current.piece_no);
|
||||
},
|
||||
// 未归档的卷内文件
|
||||
data2() {
|
||||
return this.data.filter(d => !d.piece_no);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/* 查询所选案卷的卷内文件 */
|
||||
query() {
|
||||
this.loading = true;
|
||||
this.$http.get('https://cdn.eleadmin.com/20200610/archive.json').then(res => {
|
||||
this.loading = false;
|
||||
if (res.data.code === 0) {
|
||||
this.data = res.data.data;
|
||||
this.current = this.documents[0];
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(e => {
|
||||
this.loading = false;
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
},
|
||||
/* 上移 */
|
||||
moveUp() {
|
||||
if (!this.selection1.length) {
|
||||
this.$message.error('请选择一条数据');
|
||||
return;
|
||||
}
|
||||
if (this.selection1.length > 1) {
|
||||
this.$message.error('只能选择一条数据');
|
||||
return;
|
||||
}
|
||||
if (this.data1.indexOf(this.selection1[0]) === 0) {
|
||||
return;
|
||||
}
|
||||
let index = this.data.indexOf(this.selection1[0]);
|
||||
let old = this.data[index - 1];
|
||||
this.data[index - 1] = this.selection1[0];
|
||||
this.data[index] = old;
|
||||
this.selection1 = [this.data[index - 1]];
|
||||
},
|
||||
/* 下移 */
|
||||
moveDown() {
|
||||
if (!this.selection1.length) {
|
||||
this.$message.error('请选择一条数据');
|
||||
return;
|
||||
}
|
||||
if (this.selection1.length > 1) {
|
||||
this.$message.error('只能选择一条数据');
|
||||
return;
|
||||
}
|
||||
if (this.data1.indexOf(this.selection1[0]) === this.data1.length - 1) {
|
||||
return;
|
||||
}
|
||||
let index = this.data.indexOf(this.selection1[0]);
|
||||
let old = this.data[index + 1];
|
||||
this.data[index + 1] = this.selection1[0];
|
||||
this.data[index] = old;
|
||||
this.selection1 = [this.data[index + 1]];
|
||||
},
|
||||
/* 调出 */
|
||||
moveOut() {
|
||||
if (!this.selection1.length) {
|
||||
this.$message.error('请至少选择一条数据');
|
||||
return;
|
||||
}
|
||||
this.selection1.forEach(d => {
|
||||
d.piece_no = '';
|
||||
});
|
||||
this.selection1 = [];
|
||||
},
|
||||
/* 调入 */
|
||||
moveIn() {
|
||||
if (!this.current) {
|
||||
return;
|
||||
}
|
||||
if (!this.selection2.length) {
|
||||
this.$message.error('请至少选择一条数据');
|
||||
return;
|
||||
}
|
||||
this.selection2.forEach(d => {
|
||||
d.piece_no = this.current.piece_no;
|
||||
});
|
||||
this.selection2 = [];
|
||||
},
|
||||
/* 保存 */
|
||||
save() {
|
||||
let result = this.data.map(d => {
|
||||
return {
|
||||
archive_no: d.archive_no,
|
||||
piece_no: d.piece_no
|
||||
};
|
||||
});
|
||||
console.log(result);
|
||||
this.$message.success('调整成功');
|
||||
this.close();
|
||||
},
|
||||
/* 关闭弹窗 */
|
||||
close() {
|
||||
this.data = [];
|
||||
this.selection1 = [];
|
||||
this.selection2 = [];
|
||||
this.updateVisible(false);
|
||||
},
|
||||
/* 更新visible */
|
||||
updateVisible(value) {
|
||||
this.$emit('update:visible', value);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
visible() {
|
||||
if (this.visible) {
|
||||
this.query();
|
||||
}
|
||||
},
|
||||
current() {
|
||||
this.selection1 = [];
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
108
src/views/example/document/index.vue
Normal file
108
src/views/example/document/index.vue
Normal file
@@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false">
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
ref="table"
|
||||
title="案卷列表"
|
||||
row-key="piece_no"
|
||||
:datasource="url"
|
||||
:columns="columns"
|
||||
v-model:selection="selection"
|
||||
:scroll="{x:'max-content'}">
|
||||
<template #toolkit>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="openFileSort">卷内文件调整
|
||||
</a-button>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-card>
|
||||
<!-- 卷内文件调整弹窗 -->
|
||||
<file-sort
|
||||
v-model:visible="showFileSort"
|
||||
:documents="fileSortChoose"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FileSort from './file-sort';
|
||||
|
||||
export default {
|
||||
name: 'ExampleDocument',
|
||||
components: {FileSort},
|
||||
data() {
|
||||
return {
|
||||
// 列表接口地址
|
||||
url: 'https://cdn.eleadmin.com/20200610/document.json',
|
||||
// 表格列配置
|
||||
columns: [
|
||||
{
|
||||
key: 'index',
|
||||
customRender: ({index}) => this.$refs.table.tableIndex + index
|
||||
},
|
||||
{
|
||||
title: '案卷档号',
|
||||
dataIndex: 'piece_no',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '案卷题名',
|
||||
dataIndex: 'title',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '年度',
|
||||
dataIndex: 'year',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '保管期限',
|
||||
dataIndex: 'retention',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '密级',
|
||||
dataIndex: 'secret',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '档案类别',
|
||||
dataIndex: 'type',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '载体规格',
|
||||
dataIndex: 'carrier',
|
||||
sorter: true
|
||||
}
|
||||
],
|
||||
// 表格选中数据
|
||||
selection: [],
|
||||
// 是否显示卷内文件调整弹窗
|
||||
showFileSort: false,
|
||||
// 选中的案卷
|
||||
fileSortChoose: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/* 打开卷内文件调整弹窗 */
|
||||
openFileSort() {
|
||||
if (this.selection.length < 2) {
|
||||
this.$message.error('请至少选择两条数据');
|
||||
return;
|
||||
}
|
||||
// 实际项目用这一行
|
||||
/*this.fileSortChoose = this.selection.map(d => {
|
||||
return Object.assign({}, d);
|
||||
});*/
|
||||
// 演示强制选前三个演示
|
||||
this.fileSortChoose = this.$refs.table.data.slice(0, 3);
|
||||
this.showFileSort = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
23
src/views/exception/403.vue
Normal file
23
src/views/exception/403.vue
Normal file
@@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<div style="padding-top: 80px;">
|
||||
<a-result
|
||||
status="403"
|
||||
title="403"
|
||||
sub-title="抱歉, 你无权访问该页面.">
|
||||
<template #extra>
|
||||
<router-link to="/">
|
||||
<a-button type="primary">返回首页</a-button>
|
||||
</router-link>
|
||||
</template>
|
||||
</a-result>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Exception404'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
23
src/views/exception/404.vue
Normal file
23
src/views/exception/404.vue
Normal file
@@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<div style="padding-top: 80px;">
|
||||
<a-result
|
||||
status="404"
|
||||
title="404"
|
||||
sub-title="抱歉, 你访问的页面不存在.">
|
||||
<template #extra>
|
||||
<router-link to="/">
|
||||
<a-button type="primary">返回首页</a-button>
|
||||
</router-link>
|
||||
</template>
|
||||
</a-result>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Exception404'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
23
src/views/exception/500.vue
Normal file
23
src/views/exception/500.vue
Normal file
@@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<div style="padding-top: 80px;">
|
||||
<a-result
|
||||
status="500"
|
||||
title="500"
|
||||
sub-title="抱歉, 服务器出错了.">
|
||||
<template #extra>
|
||||
<router-link to="/">
|
||||
<a-button type="primary">返回首页</a-button>
|
||||
</router-link>
|
||||
</template>
|
||||
</a-result>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Exception500'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
214
src/views/extension/dragsort.vue
Normal file
214
src/views/extension/dragsort.vue
Normal file
@@ -0,0 +1,214 @@
|
||||
<template>
|
||||
<div class="ele-body ele-body-card">
|
||||
<a-row :gutter="16">
|
||||
<a-col :lg="8" :md="24" :sm="24" :xs="24">
|
||||
<a-card title="列表拖拽排序" :bordered="false">
|
||||
<div class="demo-drag-list">
|
||||
<draggable
|
||||
v-model="list"
|
||||
item-key="id"
|
||||
:animation="300"
|
||||
handle=".sort-handle">
|
||||
<template #item="{element}">
|
||||
<div class="demo-drag-list-item ele-cell">
|
||||
<menu-outlined class="sort-handle"/>
|
||||
<div class="ele-cell-content">{{ element.name }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :lg="16" :md="24" :sm="24" :xs="24">
|
||||
<a-card title="列表相互拖拽" :bordered="false">
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="12">
|
||||
<div class="demo-drag-list">
|
||||
<draggable
|
||||
:list="list1"
|
||||
item-key="id"
|
||||
:animation="300"
|
||||
handle=".sort-handle"
|
||||
group="demoDragList">
|
||||
<template #item="{element}">
|
||||
<div class="demo-drag-list-item ele-cell">
|
||||
<menu-outlined class="sort-handle"/>
|
||||
<div class="ele-cell-content">{{ element.name }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<div class="demo-drag-list">
|
||||
<draggable
|
||||
:list="list2"
|
||||
item-key="id"
|
||||
:animation="300"
|
||||
handle=".sort-handle"
|
||||
group="demoDragList">
|
||||
<template #item="{element}">
|
||||
<div class="demo-drag-list-item ele-cell">
|
||||
<menu-outlined class="sort-handle"/>
|
||||
<div class="ele-cell-content">{{ element.name }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="16">
|
||||
<a-col :lg="8" :md="24" :sm="24" :xs="24">
|
||||
<a-card title="宫格拖拽排序" :bordered="false">
|
||||
<div class="demo-drag-grid">
|
||||
<draggable
|
||||
v-model="grid"
|
||||
item-key="id"
|
||||
:animation="300">
|
||||
<template #item="{element}">
|
||||
<div class="demo-drag-grid-item">{{ element.name }}</div>
|
||||
</template>
|
||||
</draggable>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :lg="16" :md="24" :sm="24" :xs="24">
|
||||
<a-card title="宫格相互拖拽" :bordered="false">
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="12">
|
||||
<div class="demo-drag-grid">
|
||||
<draggable
|
||||
:list="grid1"
|
||||
item-key="id"
|
||||
:animation="300"
|
||||
group="demoDragGrid">
|
||||
<template #item="{element}">
|
||||
<div class="demo-drag-grid-item">{{ element.name }}</div>
|
||||
</template>
|
||||
</draggable>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<div class="demo-drag-grid">
|
||||
<draggable
|
||||
:list="grid2"
|
||||
item-key="id"
|
||||
:animation="300"
|
||||
group="demoDragGrid">
|
||||
<template #item="{element}">
|
||||
<div class="demo-drag-grid-item">{{ element.name }}</div>
|
||||
</template>
|
||||
</draggable>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import draggable from 'vuedraggable';
|
||||
import {MenuOutlined} from '@ant-design/icons-vue';
|
||||
|
||||
export default {
|
||||
name: 'ExtensionDragSort',
|
||||
components: {
|
||||
draggable,
|
||||
MenuOutlined
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: [
|
||||
{id: 1, name: '项目0000001'},
|
||||
{id: 2, name: '项目0000002'},
|
||||
{id: 3, name: '项目0000003'},
|
||||
{id: 4, name: '项目0000004'},
|
||||
{id: 5, name: '项目0000005'}
|
||||
],
|
||||
list1: [
|
||||
{id: 1, name: '项目0000001'},
|
||||
{id: 2, name: '项目0000002'},
|
||||
{id: 3, name: '项目0000003'},
|
||||
{id: 4, name: '项目0000004'},
|
||||
{id: 5, name: '项目0000005'}
|
||||
],
|
||||
list2: [
|
||||
{id: 6, name: '项目0000006'},
|
||||
{id: 7, name: '项目0000007'},
|
||||
{id: 8, name: '项目0000008'},
|
||||
{id: 9, name: '项目0000009'},
|
||||
{id: 10, name: '项目0000010'}
|
||||
],
|
||||
grid: [
|
||||
{id: 1, name: '项目0000001'},
|
||||
{id: 2, name: '项目0000002'},
|
||||
{id: 3, name: '项目0000003'},
|
||||
{id: 4, name: '项目0000004'},
|
||||
{id: 5, name: '项目0000005'}
|
||||
],
|
||||
grid1: [
|
||||
{id: 1, name: '项目0000001'},
|
||||
{id: 2, name: '项目0000002'},
|
||||
{id: 3, name: '项目0000003'},
|
||||
{id: 4, name: '项目0000004'},
|
||||
{id: 5, name: '项目0000005'}
|
||||
],
|
||||
grid2: [
|
||||
{id: 6, name: '项目0000006'},
|
||||
{id: 7, name: '项目0000007'},
|
||||
{id: 8, name: '项目0000008'},
|
||||
{id: 9, name: '项目0000009'},
|
||||
{id: 10, name: '项目0000010'}
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/** 列表样式 */
|
||||
.demo-drag-list {
|
||||
border: 1px solid hsla(0, 0%, 60%, .2);
|
||||
}
|
||||
|
||||
.demo-drag-list-item {
|
||||
line-height: 1;
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.demo-drag-list-item + .demo-drag-list-item {
|
||||
border-top: 1px solid hsla(0, 0%, 60%, .2);
|
||||
}
|
||||
|
||||
.demo-drag-list-item.sortable-chosen {
|
||||
background: hsla(0, 0%, 60%, .1);
|
||||
}
|
||||
|
||||
.demo-drag-list-item .sort-handle {
|
||||
cursor: move;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/** 宫格样式 */
|
||||
.demo-drag-grid {
|
||||
border: 1px solid hsla(0, 0%, 60%, .2);
|
||||
padding: 16px 0 0 16px;
|
||||
}
|
||||
|
||||
.demo-drag-grid-item {
|
||||
padding: 16px;
|
||||
margin: 0 16px 16px 0;
|
||||
display: inline-block;
|
||||
border: 1px solid hsla(0, 0%, 60%, .2);
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.demo-drag-grid-item.sortable-chosen {
|
||||
background: hsla(0, 0%, 60%, .1);
|
||||
}
|
||||
</style>
|
||||
68
src/views/extension/editor.vue
Normal file
68
src/views/extension/editor.vue
Normal file
@@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false">
|
||||
<!-- 按钮 -->
|
||||
<a-space class="ele-table-tool">
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="showHtml">获取html
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="showText">获取文本
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="setContent">修改内容
|
||||
</a-button>
|
||||
</a-space>
|
||||
<!-- 编辑器 -->
|
||||
<tinymce-editor
|
||||
v-model:value="value"
|
||||
:init="{height: 525}"/>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TinymceEditor from '@/components/TinymceEditor';
|
||||
import {Modal} from 'ant-design-vue';
|
||||
|
||||
export default {
|
||||
name: 'ExtensionEditor',
|
||||
components: {TinymceEditor},
|
||||
data() {
|
||||
return {
|
||||
value: ''
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/* 获取编辑器内容 */
|
||||
showHtml() {
|
||||
Modal.info({
|
||||
maskClosable: true,
|
||||
content: this.value
|
||||
});
|
||||
},
|
||||
/* 获取编辑器纯文本内容 */
|
||||
showText() {
|
||||
Modal.info({
|
||||
maskClosable: true,
|
||||
content: this.$util.htmlToText(this.value)
|
||||
});
|
||||
},
|
||||
/* 修改编辑器内容 */
|
||||
setContent() {
|
||||
this.value = [
|
||||
'<div style="text-align:center;color:#fff;background-image:linear-gradient(-90deg,rgb(62,119,255),rgb(159,98,212),rgb(255,78,170));padding:32px 0;">',
|
||||
' <div style="font-size:28px;margin-bottom:16px;">EleAdminPro后台管理模板</div>',
|
||||
' <div style="font-size:18px">通用型后台管理模板，界面美观、开箱即用，拥有丰富的组件和模板</div>',
|
||||
'</div><br/>'
|
||||
].join('');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
418
src/views/extension/excel.vue
Normal file
418
src/views/extension/excel.vue
Normal file
@@ -0,0 +1,418 @@
|
||||
<template>
|
||||
<div class="ele-body ele-body-card">
|
||||
<a-card title="导出excel" :bordered="false">
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
bordered
|
||||
row-key="key"
|
||||
:datasource="data"
|
||||
:columns="columns"
|
||||
:need-page="false"
|
||||
tools-theme="default"
|
||||
v-model:selection="selection"
|
||||
:toolkit="['size', 'columns', 'fullscreen']"
|
||||
:scroll="{x: 'max-content'}">
|
||||
<template #toolbar>
|
||||
<a-space>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="exportBas">导出excel
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="exportAdv">导出带合并
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="exportSel">导出选中
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-card>
|
||||
<a-card title="导入excel" :bordered="false">
|
||||
<!-- 操作按钮 -->
|
||||
<ele-toolbar :tools="[]">
|
||||
<a-space>
|
||||
<a-upload
|
||||
:before-upload="importFile"
|
||||
:show-upload-list="false"
|
||||
accept=".xls,.xlsx,.csv">
|
||||
<a-button type="primary">导入excel</a-button>
|
||||
</a-upload>
|
||||
<a-upload
|
||||
:before-upload="importFile2"
|
||||
:show-upload-list="false"
|
||||
accept=".xls,.xlsx,.csv">
|
||||
<a-button type="primary">导入拆分合并</a-button>
|
||||
</a-upload>
|
||||
<a-upload
|
||||
:before-upload="importFile3"
|
||||
:show-upload-list="false"
|
||||
accept=".xls,.xlsx,.csv">
|
||||
<a-button type="primary">导入保持合并</a-button>
|
||||
</a-upload>
|
||||
</a-space>
|
||||
</ele-toolbar>
|
||||
<div class="ant-table ant-table-middle ant-table-bordered">
|
||||
<div class="ant-table-content">
|
||||
<div class="ant-table-body">
|
||||
<table>
|
||||
<thead class="ant-table-thead">
|
||||
<tr>
|
||||
<th></th>
|
||||
<th
|
||||
v-for="item in importTitle"
|
||||
:key="item"
|
||||
style="text-align: center;">
|
||||
{{ item }}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="ant-table-tbody">
|
||||
<tr v-for="(item,index) in importData" :key="index">
|
||||
<td style="text-align: center;">{{ index + 1 }}</td>
|
||||
<template v-for="key in importTitle">
|
||||
<td
|
||||
v-if="item['__colspan__'+key]!==0&&item['__rowspan__'+key]!==0"
|
||||
:key="key"
|
||||
:colspan="item['__colspan__'+key]"
|
||||
:rowspan="item['__rowspan__'+key]"
|
||||
style="text-align: center;">
|
||||
{{ item[key] }}
|
||||
</td>
|
||||
</template>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a-row :gutter="32">
|
||||
<a-col :md="12" :xs="24">
|
||||
<div style="margin:16px 0;">二维数组格式数据：</div>
|
||||
<pre
|
||||
style="max-height: 300px;padding: 16px;overflow: auto;"
|
||||
class="ele-bg-base">{{ JSON.stringify(importDataAoa, null, 4) }}
|
||||
</pre>
|
||||
</a-col>
|
||||
<a-col :md="12" :xs="24">
|
||||
<div style="margin: 16px 0;">JSON格式数据：</div>
|
||||
<pre
|
||||
style="max-height: 300px;padding: 16px;overflow: auto;"
|
||||
class="ele-bg-base">{{ JSON.stringify(importData, null, 4) }}
|
||||
</pre>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import XLSX from 'xlsx';
|
||||
|
||||
export default {
|
||||
name: 'ExtensionExcel',
|
||||
data() {
|
||||
return {
|
||||
// 表格数据
|
||||
data: [
|
||||
{
|
||||
key: 1,
|
||||
username: '张小三',
|
||||
amount: 18,
|
||||
province: '浙江',
|
||||
city: '杭州',
|
||||
zone: '西湖区',
|
||||
street: '西溪街道',
|
||||
address: '西溪花园30栋1单元',
|
||||
},
|
||||
{
|
||||
key: 2,
|
||||
username: '李小四',
|
||||
amount: 39,
|
||||
province: '江苏',
|
||||
city: '苏州',
|
||||
zone: '姑苏区',
|
||||
street: '丝绸路',
|
||||
address: '天墅之城9幢2单元',
|
||||
},
|
||||
{
|
||||
key: 3,
|
||||
username: '王小五',
|
||||
amount: 8,
|
||||
province: '江西',
|
||||
city: '南昌',
|
||||
zone: '青山湖区',
|
||||
street: '艾溪湖办事处',
|
||||
address: '中兴和园1幢3单元',
|
||||
},
|
||||
{
|
||||
key: 4,
|
||||
username: '赵小六',
|
||||
amount: 16,
|
||||
province: '福建',
|
||||
city: '泉州',
|
||||
zone: '丰泽区',
|
||||
street: '南洋街道',
|
||||
address: '南洋村6幢1单元',
|
||||
},
|
||||
{
|
||||
key: 5,
|
||||
username: '孙小七',
|
||||
amount: 12,
|
||||
province: '湖北',
|
||||
city: '武汉',
|
||||
zone: '武昌区',
|
||||
street: '武昌大道',
|
||||
address: '两湖花园16幢2单元',
|
||||
},
|
||||
{
|
||||
key: 6,
|
||||
username: '周小八',
|
||||
amount: 11,
|
||||
province: '安徽',
|
||||
city: '黄山',
|
||||
zone: '黄山区',
|
||||
street: '汤口镇',
|
||||
address: '温泉村21号',
|
||||
}
|
||||
],
|
||||
// 表格列配置
|
||||
columns: [
|
||||
{
|
||||
key: 'index',
|
||||
customRender: ({index}) => `${index + 1}`,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '用户名',
|
||||
dataIndex: 'username',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: 'cityAddress',
|
||||
children: [
|
||||
{
|
||||
title: '省',
|
||||
dataIndex: 'province',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '市',
|
||||
dataIndex: 'city',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '区',
|
||||
dataIndex: 'zone',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '街道',
|
||||
dataIndex: 'street',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '详细地址',
|
||||
dataIndex: 'address',
|
||||
align: 'center'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '金额',
|
||||
dataIndex: 'amount',
|
||||
align: 'center'
|
||||
}
|
||||
],
|
||||
// 选中数据
|
||||
selection: [],
|
||||
// 导入的数据
|
||||
importData: [],
|
||||
// 导入数据的列
|
||||
importTitle: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
|
||||
// 导入数据二维数组形式
|
||||
importDataAoa: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/* 导出excel */
|
||||
exportBas() {
|
||||
let array = [['用户名', '省', '市', '区', '街道', '详细地址', '金额']];
|
||||
this.data.forEach(d => {
|
||||
array.push([d.username, d.province, d.city, d.zone, d.street, d.address, d.amount]);
|
||||
});
|
||||
this.$util.exportSheet(XLSX, array, '用户数据');
|
||||
},
|
||||
/* 导出带单元格合并 */
|
||||
exportAdv() {
|
||||
let array = [
|
||||
['用户名', '地址', null, null, null, null, '金额'],
|
||||
[null, '省', '市', '区', '街道', '详细地址', null]
|
||||
];
|
||||
this.data.forEach(d => {
|
||||
array.push([d.username, d.province, d.city, d.zone, d.street, d.address, d.amount]);
|
||||
});
|
||||
let sheet = XLSX.utils.aoa_to_sheet(array);
|
||||
sheet['!merges'] = [
|
||||
{s: {r: 0, c: 1}, e: {r: 0, c: 5}}, // 合并第0行第1列到第0行第5列
|
||||
{s: {r: 0, c: 0}, e: {r: 1, c: 0}}, // 合并第0行第0列到第1行第0列
|
||||
{s: {r: 0, c: 6}, e: {r: 1, c: 6}} // 合并第0行第6列到第1行第6列
|
||||
];
|
||||
this.$util.exportSheet(XLSX, sheet, '用户数据');
|
||||
},
|
||||
/* 导出选中数据 */
|
||||
exportSel() {
|
||||
if (this.selection.length === 0) {
|
||||
this.$message.error('请至少选择一条数据');
|
||||
return;
|
||||
}
|
||||
let array = [['用户名', '省', '市', '区', '街道', '详细地址', '金额']];
|
||||
this.selection.forEach(d => {
|
||||
array.push([d.username, d.province, d.city, d.zone, d.street, d.address, d.amount]);
|
||||
});
|
||||
this.$util.exportSheet(XLSX, array, '用户数据');
|
||||
},
|
||||
/* 导入本地excel文件 */
|
||||
importFile(file) {
|
||||
let reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
let data = new Uint8Array(e.target.result);
|
||||
let workbook = XLSX.read(data, {type: 'array'});
|
||||
let sheetNames = workbook.SheetNames;
|
||||
let worksheet = workbook.Sheets[sheetNames[0]];
|
||||
// 解析成二维数组
|
||||
let aoa = XLSX.utils.sheet_to_json(worksheet, {header: 1});
|
||||
// 生成表格需要的数据
|
||||
let list = [], maxCols = 0, title = [];
|
||||
aoa.forEach(d => {
|
||||
if (d.length > maxCols) {
|
||||
maxCols = d.length;
|
||||
}
|
||||
let row = {};
|
||||
for (let i = 0; i < d.length; i++) {
|
||||
let key = this.getCharByIndex(i);
|
||||
row[key] = d[i];
|
||||
row['__colspan__' + key] = 1;
|
||||
row['__rowspan__' + key] = 1;
|
||||
}
|
||||
list.push(row);
|
||||
});
|
||||
for (let i = 0; i < maxCols; i++) {
|
||||
title.push(this.getCharByIndex(i));
|
||||
}
|
||||
this.importTitle = title;
|
||||
this.importData = list;
|
||||
this.importDataAoa = aoa;
|
||||
};
|
||||
reader.readAsArrayBuffer(file);
|
||||
return false;
|
||||
},
|
||||
/* 导入excel拆分合并单元格 */
|
||||
importFile2(file) {
|
||||
let reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
let data = new Uint8Array(e.target.result);
|
||||
let workbook = XLSX.read(data, {type: 'array'});
|
||||
let sheetNames = workbook.SheetNames;
|
||||
let worksheet = workbook.Sheets[sheetNames[0]];
|
||||
// 解析成二维数组
|
||||
let aoa = XLSX.utils.sheet_to_json(worksheet, {header: 1});
|
||||
// 拆分合并单元格
|
||||
if (worksheet['!merges']) {
|
||||
worksheet['!merges'].forEach(m => {
|
||||
for (let r = m.s.r; r <= m.e.r; r++) {
|
||||
for (let c = m.s.c; c <= m.e.c; c++) {
|
||||
aoa[r][c] = aoa[m.s.r][m.s.c];
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
// 生成表格需要的数据
|
||||
let list = [], maxCols = 0, title = [];
|
||||
aoa.forEach(d => {
|
||||
if (d.length > maxCols) {
|
||||
maxCols = d.length;
|
||||
}
|
||||
let row = {};
|
||||
for (let i = 0; i < d.length; i++) {
|
||||
row[this.getCharByIndex(i)] = d[i];
|
||||
}
|
||||
list.push(row);
|
||||
});
|
||||
for (let i = 0; i < maxCols; i++) {
|
||||
title.push(this.getCharByIndex(i));
|
||||
}
|
||||
this.importTitle = title;
|
||||
this.importData = list;
|
||||
this.importDataAoa = aoa;
|
||||
};
|
||||
reader.readAsArrayBuffer(file);
|
||||
return false;
|
||||
},
|
||||
/* 导入excel读取合并信息 */
|
||||
importFile3(file) {
|
||||
let reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
let data = new Uint8Array(e.target.result);
|
||||
let workbook = XLSX.read(data, {type: 'array'});
|
||||
let sheetNames = workbook.SheetNames;
|
||||
let worksheet = workbook.Sheets[sheetNames[0]];
|
||||
// 解析成二维数组
|
||||
let aoa = XLSX.utils.sheet_to_json(worksheet, {header: 1});
|
||||
// 生成表格需要的数据
|
||||
let list = [], maxCols = 0, title = [];
|
||||
aoa.forEach(d => {
|
||||
if (d.length > maxCols) {
|
||||
maxCols = d.length;
|
||||
}
|
||||
let row = {};
|
||||
for (let i = 0; i < d.length; i++) {
|
||||
row[this.getCharByIndex(i)] = d[i];
|
||||
}
|
||||
list.push(row);
|
||||
});
|
||||
for (let i = 0; i < maxCols; i++) {
|
||||
title.push(this.getCharByIndex(i));
|
||||
}
|
||||
// 记录合并单元格
|
||||
if (worksheet['!merges']) {
|
||||
worksheet['!merges'].forEach(m => {
|
||||
for (let r = m.s.r; r <= m.e.r; r++) {
|
||||
for (let c = m.s.c; c <= m.e.c; c++) {
|
||||
let cc = this.getCharByIndex(c);
|
||||
list[r]['__colspan__' + cc] = 0;
|
||||
list[r]['__rowspan__' + cc] = 0;
|
||||
}
|
||||
}
|
||||
let char = this.getCharByIndex(m.s.c);
|
||||
list[m.s.r]['__colspan__' + char] = m.e.c - m.s.c + 1;
|
||||
list[m.s.r]['__rowspan__' + char] = m.e.r - m.s.r + 1;
|
||||
});
|
||||
}
|
||||
this.importTitle = title;
|
||||
this.importData = list;
|
||||
this.importDataAoa = aoa;
|
||||
};
|
||||
reader.readAsArrayBuffer(file);
|
||||
return false;
|
||||
},
|
||||
/* 生成Excel列字母序号 */
|
||||
getCharByIndex(index) {
|
||||
let chars = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M',
|
||||
'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
|
||||
if (index < chars.length) {
|
||||
return chars[index];
|
||||
}
|
||||
let n = parseInt(index / chars.length),
|
||||
m = index % chars.length;
|
||||
return chars[n] + chars[m];
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
289
src/views/extension/file.vue
Normal file
289
src/views/extension/file.vue
Normal file
@@ -0,0 +1,289 @@
|
||||
<template>
|
||||
<div class="ele-body">
|
||||
<a-card
|
||||
:bordered="false"
|
||||
:body-style="{padding: 0, minHeight: '520px'}">
|
||||
<div style="padding: 16px 16px 0 16px;">
|
||||
<!-- 工具栏 -->
|
||||
<div class="ele-table-tool">
|
||||
<div class="ele-table-tool-title">
|
||||
<a-space>
|
||||
<a-upload
|
||||
:showUploadList="false"
|
||||
:customRequest="doUpload">
|
||||
<a-button type="primary">上传</a-button>
|
||||
</a-upload>
|
||||
<a-button type="primary">新建文件夹</a-button>
|
||||
<a-button danger type="primary">删除</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
<!-- 搜索框 -->
|
||||
<div style="max-width: 240px;">
|
||||
<a-input-search
|
||||
v-model:value="search"
|
||||
placeholder="搜索您的文件"/>
|
||||
</div>
|
||||
<!-- 显示方式切换 -->
|
||||
<menu-outlined
|
||||
v-if="grid"
|
||||
class="ele-file-tool-btn"
|
||||
@click="grid=!grid"/>
|
||||
<appstore-outlined
|
||||
v-else
|
||||
class="ele-file-tool-btn"
|
||||
@click="grid=!grid"/>
|
||||
</div>
|
||||
<!-- 文件目录面包屑 -->
|
||||
<div class="ele-file-breadcrumb-group ele-cell">
|
||||
<div class="ele-cell-content ele-cell">
|
||||
<div
|
||||
v-if="directory.length"
|
||||
class="ele-file-breadcrumb-back ele-text-primary"
|
||||
@click="back">返回上一级
|
||||
</div>
|
||||
<div class="ele-file-breadcrumb-list ele-cell-content ele-cell">
|
||||
<div
|
||||
:class="['ele-file-breadcrumb-item ele-cell', {'ele-text-primary': directory.length}]"
|
||||
@click="listAll">
|
||||
<div class="ele-file-breadcrumb-item-title">全部文件</div>
|
||||
<right-outlined v-if="directory.length"/>
|
||||
</div>
|
||||
<div
|
||||
v-for="(item,index) in directory"
|
||||
:key="index"
|
||||
@click="listDir(index)"
|
||||
:class="['ele-file-breadcrumb-item ele-cell', {'ele-text-primary': index!==directory.length-1}]">
|
||||
<div class="ele-file-breadcrumb-item-title">{{ item }}</div>
|
||||
<right-outlined v-if="index!==directory.length-1"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>已全部加载，共 {{ data.length }} 个</div>
|
||||
</div>
|
||||
</div>
|
||||
<a-spin :spinning="loading">
|
||||
<!-- 文件展示列表 -->
|
||||
<ele-file-list
|
||||
:data="data"
|
||||
v-model:checked="checked"
|
||||
:grid="grid"
|
||||
:sort="sort"
|
||||
:order="order"
|
||||
@item-click="onItemClick"
|
||||
@sort-change="onSortChange">
|
||||
</ele-file-list>
|
||||
</a-spin>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import EleFileList from 'ele-admin-pro/packages/ele-file-list';
|
||||
import {
|
||||
MenuOutlined,
|
||||
AppstoreOutlined,
|
||||
RightOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
|
||||
export default {
|
||||
name: 'ExtensionFile',
|
||||
components: {
|
||||
EleFileList,
|
||||
MenuOutlined,
|
||||
AppstoreOutlined,
|
||||
RightOutlined
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 加载状态
|
||||
loading: true,
|
||||
// 是否网格展示
|
||||
grid: true,
|
||||
// 文件列表数据
|
||||
data: [],
|
||||
// 选中数据
|
||||
checked: [],
|
||||
// 文件目录面包屑数据
|
||||
directory: [],
|
||||
// 搜索
|
||||
search: '',
|
||||
// 排序字段
|
||||
sort: '',
|
||||
// 排序方式
|
||||
order: '',
|
||||
// 图片预览文件
|
||||
currentImage: '',
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 图片预览列表
|
||||
previewList() {
|
||||
return this.data.filter(d => d.thumbnail).map(d => d.url);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.query();
|
||||
},
|
||||
methods: {
|
||||
/* 查询文件列表 */
|
||||
query() {
|
||||
this.checked = [];
|
||||
this.loading = true;
|
||||
this.$http.get('/file/list', {
|
||||
params: {
|
||||
directory: this.directory.join('/'),
|
||||
sort: this.sort,
|
||||
order: this.order
|
||||
}
|
||||
}).then(res => {
|
||||
this.loading = false;
|
||||
if (res.data.code === 0) {
|
||||
res.data.data.forEach(d => {
|
||||
// 文件地址加baseURL
|
||||
if (d.url) {
|
||||
d.url = this.$http.defaults.baseURL + '/' + d.url;
|
||||
}
|
||||
if (d.thumbnail) {
|
||||
d.thumbnail = this.$http.defaults.baseURL + '/' + d.thumbnail;
|
||||
}
|
||||
// 文件大小格式化
|
||||
if (d.isDirectory) {
|
||||
d.length = '-';
|
||||
} else {
|
||||
d.length = this.getFileSize(d.length);
|
||||
}
|
||||
// 修改时间格式化
|
||||
if (d.updateTime) {
|
||||
d.updateTime = this.$util.toDateString(d.updateTime);
|
||||
}
|
||||
});
|
||||
this.data = res.data.data;
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(e => {
|
||||
this.loading = false;
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
},
|
||||
/* item点击事件 */
|
||||
onItemClick(item) {
|
||||
if (item.isDirectory) { // 文件夹
|
||||
this.directory.push(item.name);
|
||||
this.query();
|
||||
} /*else if (item.thumbnail) {
|
||||
this.currentImage = item.url;
|
||||
}*/ else if (this.checked.indexOf(item) !== -1) {
|
||||
this.checked.splice(this.checked.indexOf(item), 1);
|
||||
} else {
|
||||
this.checked.push(item);
|
||||
}
|
||||
},
|
||||
/* 返回上级 */
|
||||
back() {
|
||||
this.directory.splice(this.directory.length - 1, 1);
|
||||
this.query();
|
||||
},
|
||||
/* 全部文件 */
|
||||
listAll() {
|
||||
if (!this.directory.length) {
|
||||
return;
|
||||
}
|
||||
this.directory = [];
|
||||
this.query();
|
||||
},
|
||||
/* 回到指定目录 */
|
||||
listDir(index) {
|
||||
if (index === this.directory.length - 1) {
|
||||
return;
|
||||
}
|
||||
this.directory.splice(index, this.directory.length - index);
|
||||
this.query();
|
||||
},
|
||||
/* 文件大小格式化 */
|
||||
getFileSize(value) {
|
||||
if (value < 1024) {
|
||||
return value + 'B';
|
||||
} else if (value < 1024 * 1024) {
|
||||
return (value / 1024).toFixed(1) + 'KB';
|
||||
} else if (value < 1024 * 1024 * 1024) {
|
||||
return (value / 1024 / 1024).toFixed(1) + 'M';
|
||||
} else {
|
||||
return (value / 1024 / 1024 / 1024).toFixed(1) + 'G';
|
||||
}
|
||||
},
|
||||
/* 文件列表排序方式改变 */
|
||||
onSortChange(obj) {
|
||||
this.order = obj.order;
|
||||
this.sort = obj.sort;
|
||||
this.query();
|
||||
},
|
||||
/* 查看文件 */
|
||||
view(item) {
|
||||
if (item.isDirectory) {
|
||||
this.onItemClick(item);
|
||||
} else if (item.url) {
|
||||
window.open(item.url);
|
||||
}
|
||||
},
|
||||
/* 上传 */
|
||||
doUpload({file}) {
|
||||
let formData = new FormData();
|
||||
formData.append('file', file);
|
||||
const hide = this.$message.loading('上传中..', 0);
|
||||
this.$http.post('/file/upload', formData).then(res => {
|
||||
hide();
|
||||
if (res.data.code === 0) {
|
||||
this.$message.success(res.data.msg);
|
||||
this.directory = [res.data.dir.replace(/\//, '')];
|
||||
this.query();
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(e => {
|
||||
hide();
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 图标按钮 */
|
||||
.ele-file-tool-btn {
|
||||
font-size: 20px;
|
||||
margin-left: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 文件目录面包屑 */
|
||||
.ele-file-breadcrumb-group {
|
||||
margin-bottom: 12px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.ele-file-breadcrumb-back {
|
||||
padding-right: 12px;
|
||||
border-right: 1px solid hsla(0, 0%, 60%, .3);
|
||||
}
|
||||
|
||||
.ele-file-breadcrumb-back:hover,
|
||||
.ele-file-breadcrumb-item.ele-text-primary:hover > .ele-file-breadcrumb-item-title {
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ele-file-breadcrumb-item .anticon {
|
||||
margin: 0 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.ele-table-tool > .ele-table-tool-title + div,
|
||||
.ele-file-breadcrumb-group > .ele-cell-content + div {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
261
src/views/extension/map.vue
Normal file
261
src/views/extension/map.vue
Normal file
@@ -0,0 +1,261 @@
|
||||
<template>
|
||||
<div class="ele-body ele-body-card">
|
||||
<!-- 地图位置选择弹窗 -->
|
||||
<ele-map-picker
|
||||
v-model:visible="showPicker"
|
||||
:need-city="true"
|
||||
@done="onChoose"/>
|
||||
<ele-map-picker
|
||||
v-model:visible="showPicker2"
|
||||
:need-city="true"
|
||||
:search-type="1"
|
||||
@done="onChoose"/>
|
||||
<!-- 弹窗选择位置 -->
|
||||
<a-card title="弹窗选择位置" :bordered="false">
|
||||
<a-space>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="showPicker=true">地图选择位置(POI)
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="showPicker2=true">关键字检索模式
|
||||
</a-button>
|
||||
</a-space>
|
||||
<div v-if="form.location">
|
||||
<div style="margin-top: 12px;">选择位置: {{ form.location }}</div>
|
||||
<div style="margin-top: 12px;">详细地址: {{ form.address }}</div>
|
||||
<div style="margin-top: 12px;">经 纬 度 : {{ form.jinweidu }}</div>
|
||||
</div>
|
||||
</a-card>
|
||||
<!-- 官网底部地图 -->
|
||||
<a-card title="官网底部地图" :bordered="false">
|
||||
<div ref="locationMap" style="height: 360px;max-width: 1000px;"></div>
|
||||
</a-card>
|
||||
<!-- 轨迹展示及轨迹回放 -->
|
||||
<a-card title="轨迹展示及轨迹回放" :bordered="false">
|
||||
<div ref="trackMap" style="height: 360px;margin-bottom: 16px;max-width: 1000px;"></div>
|
||||
<a-space>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="startTrackAnim">开始动画
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="pauseTrackAnim">暂停动画
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="resumeTrackAnim">继续动画
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import EleMapPicker from 'ele-admin-pro/packages/ele-map-picker';
|
||||
import AMapLoader from '@amap/amap-jsapi-loader';
|
||||
|
||||
export default {
|
||||
name: 'ExtensionMap',
|
||||
components: {EleMapPicker},
|
||||
data() {
|
||||
return {
|
||||
// 是否显示地图选择弹窗
|
||||
showPicker: false,
|
||||
// 是否显示地图选择弹窗2
|
||||
showPicker2: false,
|
||||
// 表单
|
||||
form: {},
|
||||
// 小车的marker
|
||||
carMarker: null,
|
||||
// 轨迹路线
|
||||
lineData: [
|
||||
[116.478935, 39.997761],
|
||||
[116.478939, 39.997825],
|
||||
[116.478912, 39.998549],
|
||||
[116.478912, 39.998549],
|
||||
[116.478998, 39.998555],
|
||||
[116.478998, 39.998555],
|
||||
[116.479282, 39.99856],
|
||||
[116.479658, 39.998528],
|
||||
[116.480151, 39.998453],
|
||||
[116.480784, 39.998302],
|
||||
[116.480784, 39.998302],
|
||||
[116.481149, 39.998184],
|
||||
[116.481573, 39.997997],
|
||||
[116.481863, 39.997846],
|
||||
[116.482072, 39.997718],
|
||||
[116.482362, 39.997718],
|
||||
[116.483633, 39.998935],
|
||||
[116.48367, 39.998968],
|
||||
[116.484648, 39.999861]
|
||||
],
|
||||
// 官网底部地图的实例
|
||||
mapInsLocation: null,
|
||||
// 小车轨迹地图的实例
|
||||
mapInsTrack: null
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 是否是暗黑模式
|
||||
darkMode() {
|
||||
return this.$store.state.theme.darkMode;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.renderLocationMap();
|
||||
this.renderTrackMap();
|
||||
},
|
||||
methods: {
|
||||
/* 地图选择后回调 */
|
||||
onChoose(location) {
|
||||
console.log(location);
|
||||
this.form = {
|
||||
location: location.city.province + '/' + location.city.city + '/' + location.city.district,
|
||||
address: location.name + ' ' + location.address,
|
||||
jinweidu: location.lng + ',' + location.lat
|
||||
};
|
||||
this.showPicker = false;
|
||||
this.showPicker2 = false;
|
||||
},
|
||||
/* 渲染官网底部地图 */
|
||||
renderLocationMap() {
|
||||
AMapLoader.load({
|
||||
'key': '006d995d433058322319fa797f2876f5',
|
||||
'version': '2.0',
|
||||
'plugins': ['AMap.InfoWindow', 'AMap.Marker']
|
||||
}).then((AMap) => {
|
||||
// 渲染地图
|
||||
let option = {
|
||||
zoom: 13, // 初缩放级别
|
||||
center: [114.346084, 30.511215 + 0.005] // 初始中心点
|
||||
};
|
||||
if (this.darkMode) {
|
||||
option.mapStyle = 'amap://styles/dark';
|
||||
}
|
||||
this.mapInsLocation = new AMap.Map(this.$refs.locationMap, option);
|
||||
// 创建信息窗体
|
||||
let infoWindow = new AMap.InfoWindow({
|
||||
content: `
|
||||
<div style="color: #333;">
|
||||
<div style="padding: 5px;font-size: 16px;">武汉易云智科技有限公司</div>
|
||||
<div style="padding: 0 5px;">地址：湖北省武汉市洪山区雄楚大道222号</div>
|
||||
<div style="padding: 0 5px;">电话：020-123456789</div>
|
||||
</div>
|
||||
<a style="padding: 8px 5px 0;text-decoration: none;display: inline-block;" class="ele-text-primary"
|
||||
href="//uri.amap.com/marker?position=114.346084,30.511215&name=武汉易云智科技有限公司"
|
||||
target="_blank">到这里去→</a>
|
||||
`
|
||||
});
|
||||
infoWindow.open(this.mapInsLocation, [114.346084, 30.511215]);
|
||||
let icon = new AMap.Icon({
|
||||
size: new AMap.Size(25, 34),
|
||||
image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png',
|
||||
imageSize: new AMap.Size(25, 34)
|
||||
});
|
||||
let marker = new AMap.Marker({
|
||||
icon: icon,
|
||||
position: [114.346084, 30.511215],
|
||||
offset: new AMap.Pixel(-12, -28)
|
||||
});
|
||||
marker.setMap(this.mapInsLocation);
|
||||
marker.on('click', () => {
|
||||
infoWindow.open(this.mapInsLocation);
|
||||
});
|
||||
}).catch(e => {
|
||||
console.error(e);
|
||||
});
|
||||
},
|
||||
/* 渲染轨迹回放地图 */
|
||||
renderTrackMap() {
|
||||
AMapLoader.load({
|
||||
'key': '006d995d433058322319fa797f2876f5',
|
||||
'version': '2.0',
|
||||
'plugins': ['AMap.MoveAnimation', 'AMap.Marker', 'AMap.Polyline']
|
||||
}).then((AMap) => {
|
||||
// 渲染地图
|
||||
let option = {
|
||||
zoom: 17,
|
||||
center: [116.478935, 39.997761],
|
||||
};
|
||||
if (this.darkMode) {
|
||||
option.mapStyle = 'amap://styles/dark';
|
||||
}
|
||||
this.mapInsTrack = new AMap.Map(this.$refs.trackMap, option);
|
||||
// 创建小车marker
|
||||
this.carMarker = new AMap.Marker({
|
||||
map: this.mapInsTrack,
|
||||
position: [116.478935, 39.997761],
|
||||
icon: 'https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png',
|
||||
offset: new AMap.Pixel(-13, -26),
|
||||
});
|
||||
// 绘制轨迹
|
||||
new AMap.Polyline({
|
||||
map: this.mapInsTrack,
|
||||
path: this.lineData,
|
||||
showDir: true,
|
||||
strokeColor: '#28F', // 线颜色
|
||||
strokeOpacity: 1, // 线透明度
|
||||
strokeWeight: 6, // 线宽
|
||||
//strokeStyle: 'solid' // 线样式
|
||||
});
|
||||
// 通过的轨迹
|
||||
let passedPolyline = new AMap.Polyline({
|
||||
map: this.mapInsTrack,
|
||||
showDir: true,
|
||||
strokeColor: '#4B5', // 线颜色
|
||||
strokeOpacity: 1, // 线透明度
|
||||
strokeWeight: 6, // 线宽
|
||||
});
|
||||
// 小车移动回调
|
||||
this.carMarker.on('moving', function (e) {
|
||||
passedPolyline.setPath(e.passedPath);
|
||||
});
|
||||
// 地图自适应
|
||||
this.mapInsTrack.setFitView();
|
||||
}).catch(e => {
|
||||
console.error(e);
|
||||
});
|
||||
},
|
||||
/* 开始轨迹回放动画 */
|
||||
startTrackAnim() {
|
||||
this.carMarker.stopMove();
|
||||
this.carMarker.moveAlong(this.lineData, {
|
||||
duration: 200,
|
||||
autoRotation: true,
|
||||
});
|
||||
},
|
||||
/* 暂停轨迹回放动画 */
|
||||
pauseTrackAnim() {
|
||||
this.carMarker.pauseMove();
|
||||
},
|
||||
/* 继续开始轨迹回放动画 */
|
||||
resumeTrackAnim() {
|
||||
this.carMarker.resumeMove();
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
darkMode() {
|
||||
if (this.mapInsLocation) {
|
||||
if (this.darkMode) {
|
||||
this.mapInsLocation.setMapStyle('amap://styles/dark');
|
||||
} else {
|
||||
this.mapInsLocation.setMapStyle('amap://styles/normal');
|
||||
}
|
||||
}
|
||||
if (this.mapInsTrack) {
|
||||
if (this.darkMode) {
|
||||
this.mapInsTrack.setMapStyle('amap://styles/dark');
|
||||
} else {
|
||||
this.mapInsTrack.setMapStyle('amap://styles/normal');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
34
src/views/extension/more/index.vue
Normal file
34
src/views/extension/more/index.vue
Normal file
@@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<div class="ele-body ele-body-card">
|
||||
<more-tag/>
|
||||
<more-city-select/>
|
||||
<more-modal/>
|
||||
<more-color-picker/>
|
||||
<more-cropper/>
|
||||
<more-count-up/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MoreModal from './more-modal';
|
||||
import MoreTag from './more-tag';
|
||||
import MoreCitySelect from './more-city-select';
|
||||
import MoreColorPicker from './more-color-picker';
|
||||
import MoreCropper from './more-cropper';
|
||||
import MoreCountUp from './more-count-up';
|
||||
|
||||
export default {
|
||||
name: 'ExtensionMore',
|
||||
components: {
|
||||
MoreTag,
|
||||
MoreCitySelect,
|
||||
MoreColorPicker,
|
||||
MoreCropper,
|
||||
MoreCountUp,
|
||||
MoreModal
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
44
src/views/extension/more/more-city-select.vue
Normal file
44
src/views/extension/more/more-city-select.vue
Normal file
@@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<a-card title="省市区级联选择" :bordered="false">
|
||||
<a-space>
|
||||
<a-cascader
|
||||
v-model:value="city"
|
||||
:options="cityData.cityData"
|
||||
placeholder="请选择省市区"
|
||||
popup-class-name="ele-pop-wrap-higher"/>
|
||||
<a-cascader
|
||||
v-model:value="provinceCity"
|
||||
:options="cityData.provinceCityData"
|
||||
placeholder="请选择省市"
|
||||
popup-class-name="ele-pop-wrap-higher"/>
|
||||
<a-cascader
|
||||
v-model:value="province"
|
||||
:options="cityData.provinceData"
|
||||
placeholder="请选择省"
|
||||
popup-class-name="ele-pop-wrap-higher"/>
|
||||
</a-space>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import regions from 'ele-admin-pro/packages/regions.js';
|
||||
|
||||
export default {
|
||||
name: 'MoreCitySelect',
|
||||
data() {
|
||||
return {
|
||||
// 省市区数据
|
||||
cityData: regions,
|
||||
// 选中的省市区
|
||||
city: [],
|
||||
// 选中的省市
|
||||
provinceCity: [],
|
||||
// 选中的省
|
||||
province: [],
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
53
src/views/extension/more/more-color-picker.vue
Normal file
53
src/views/extension/more/more-color-picker.vue
Normal file
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<a-card title="颜色选择器" :bordered="false">
|
||||
<a-space>
|
||||
<ele-color-picker
|
||||
size="large"
|
||||
:show-alpha="true"
|
||||
v-model:value="color"
|
||||
:predefine="predefineColors"/>
|
||||
<ele-color-picker
|
||||
:show-alpha="true"
|
||||
v-model:value="color"
|
||||
:predefine="predefineColors"/>
|
||||
<ele-color-picker
|
||||
size="small"
|
||||
:show-alpha="true"
|
||||
v-model:value="color"
|
||||
:predefine="predefineColors"/>
|
||||
</a-space>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import EleColorPicker from 'ele-admin-pro/packages/ele-color-picker';
|
||||
|
||||
export default {
|
||||
name: 'MoreColorPicker',
|
||||
components: {EleColorPicker},
|
||||
data() {
|
||||
return {
|
||||
color: 'rgba(255, 69, 0, 0.68)',
|
||||
predefineColors: [
|
||||
'#ff4500',
|
||||
'#ff8c00',
|
||||
'#ffd700',
|
||||
'#90ee90',
|
||||
'#00ced1',
|
||||
'#1e90ff',
|
||||
'#c71585',
|
||||
'rgba(255, 69, 0, 0.68)',
|
||||
'rgb(255, 120, 0)',
|
||||
'hsv(51, 100, 98)',
|
||||
'hsva(120, 40, 94, 0.5)',
|
||||
'hsl(181, 100%, 37%)',
|
||||
'hsla(209, 100%, 56%, 0.73)',
|
||||
'#c7158577'
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
71
src/views/extension/more/more-count-up.vue
Normal file
71
src/views/extension/more/more-count-up.vue
Normal file
@@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<a-card title="数字滚动" :bordered="false">
|
||||
<h1 style="margin-bottom: 12px;">
|
||||
<ele-count-up
|
||||
:delay="0"
|
||||
:end-val="countUpVal"
|
||||
:options="countUpOptions"
|
||||
@ready="onCountUpReady"/>
|
||||
</h1>
|
||||
<a-space>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="startCountUp">重新开始
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="updateCountUp">更新数字
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import EleCountUp from 'ele-admin-pro/packages/ele-count-up';
|
||||
|
||||
export default {
|
||||
name: 'MoreCountUp',
|
||||
components: {EleCountUp},
|
||||
data() {
|
||||
return {
|
||||
// countUp值
|
||||
countUpVal: 6317,
|
||||
// countUp配置
|
||||
countUpOptions: {
|
||||
useEasing: true,
|
||||
useGrouping: true,
|
||||
separator: ',',
|
||||
decimal: '.',
|
||||
prefix: '',
|
||||
suffix: ''
|
||||
},
|
||||
// countUp实例
|
||||
countUpIns: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/* countUp渲染完成 */
|
||||
onCountUpReady(instance) {
|
||||
this.countUpIns = instance;
|
||||
},
|
||||
/* countUp重新开始 */
|
||||
startCountUp() {
|
||||
if (!this.countUpIns) {
|
||||
return;
|
||||
}
|
||||
this.countUpIns.reset();
|
||||
this.countUpIns.start();
|
||||
},
|
||||
/* countUp更新 */
|
||||
updateCountUp() {
|
||||
if (!this.countUpIns) {
|
||||
return;
|
||||
}
|
||||
this.countUpIns.update(1000 + Math.round(Math.random() * 9000));
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
54
src/views/extension/more/more-cropper.vue
Normal file
54
src/views/extension/more/more-cropper.vue
Normal file
@@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<a-card title="图片裁剪" :bordered="false">
|
||||
<a-space size="middle">
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="visible1=true">1 : 1 裁剪
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="visible2=true">16 : 9 裁剪
|
||||
</a-button>
|
||||
</a-space>
|
||||
<div v-if="result" style="margin-top: 16px;">
|
||||
<img :src="result" style="height: 120px;width: auto;"/>
|
||||
</div>
|
||||
<!-- 图片裁剪 -->
|
||||
<ele-cropper-modal
|
||||
:src="src"
|
||||
v-model:visible="visible1"
|
||||
@done="onDone"/>
|
||||
<ele-cropper-modal
|
||||
:src="src"
|
||||
:aspect-ratio="16/9"
|
||||
v-model:visible="visible2"
|
||||
@done="onDone"/>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import EleCropperModal from 'ele-admin-pro/packages/ele-cropper-modal';
|
||||
|
||||
export default {
|
||||
name: 'MoreCropper',
|
||||
components: {EleCropperModal},
|
||||
data() {
|
||||
return {
|
||||
visible1: false,
|
||||
visible2: false,
|
||||
src: 'https://cdn.eleadmin.com/20200610/LrCTN2j94lo9N7wEql7cBr1Ux4rHMvmZ.jpg',
|
||||
result: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onDone(result) {
|
||||
this.result = result;
|
||||
this.visible1 = false;
|
||||
this.visible2 = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
207
src/views/extension/more/more-modal.vue
Normal file
207
src/views/extension/more/more-modal.vue
Normal file
@@ -0,0 +1,207 @@
|
||||
<template>
|
||||
<a-card title="可拖拽、拉伸、全屏弹窗" :bordered="false">
|
||||
<div>
|
||||
<a-space>
|
||||
<a-button type="primary" @click="openDialog">可拖拽弹窗</a-button>
|
||||
<a-button type="primary" @click="openMoveOutDialog">允许拖出边界</a-button>
|
||||
<a-button type="primary" @click="openHideModalDialog">不要遮罩层</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
<div style="margin-top: 16px;">
|
||||
<a-space>
|
||||
<a-button type="primary" @click="openFullDialog">默认全屏打开</a-button>
|
||||
<a-button type="primary" @click="openMoreDialog">默认左下角打开</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
</a-card>
|
||||
<!-- 弹窗1 -->
|
||||
<a-modal
|
||||
:mask="mask"
|
||||
:width="400"
|
||||
v-model:visible="visible"
|
||||
:wrap-class-name="wrapClassName"
|
||||
:body-style="{paddingBottom: '16px'}"
|
||||
@cancel="cancel"
|
||||
@ok="save">
|
||||
<template #title>
|
||||
<div class="ele-cell">
|
||||
<div class="ele-cell-content">拖拽弹窗</div>
|
||||
<compress-outlined class="ele-modal-icon-compress"/>
|
||||
<expand-outlined class="ele-modal-icon-expand"/>
|
||||
</div>
|
||||
</template>
|
||||
<a-form
|
||||
ref="form"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:label-col="{flex: '70px'}"
|
||||
:wrapper-col="{flex: 'auto'}">
|
||||
<a-form-item label="用户名" name="nickname" style="flex-wrap: nowrap;">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入用户名"
|
||||
v-model:value="form.nickname"/>
|
||||
</a-form-item>
|
||||
<a-form-item label="性别" name="sex">
|
||||
<a-select
|
||||
allow-clear
|
||||
placeholder="请选择性别"
|
||||
v-model:value="form.sex">
|
||||
<a-select-option value="男">男</a-select-option>
|
||||
<a-select-option value="女">女</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="手机号" name="phone" style="flex-wrap: nowrap;">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入手机号"
|
||||
v-model:value="form.phone"/>
|
||||
</a-form-item>
|
||||
<a-form-item label="邮箱" name="email" style="flex-wrap: nowrap;">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入邮箱"
|
||||
v-model:value="form.email"/>
|
||||
</a-form-item>
|
||||
<a-form-item label="个人简介" style="flex-wrap: nowrap;">
|
||||
<a-textarea
|
||||
:rows="4"
|
||||
placeholder="请输入个人简介"
|
||||
v-model:value="form.introduction"/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
<!-- 弹窗2 -->
|
||||
<a-modal
|
||||
:width="400"
|
||||
:mask="false"
|
||||
v-model:visible="visible2"
|
||||
wrap-class-name="ele-modal-movable ele-modal-resizable ele-modal-multiple ele-modal-wrap-fullscreen">
|
||||
<template #title>
|
||||
<div class="ele-cell">
|
||||
<div class="ele-cell-content">默认全屏打开</div>
|
||||
<compress-outlined class="ele-modal-icon-compress"/>
|
||||
<expand-outlined class="ele-modal-icon-expand"/>
|
||||
</div>
|
||||
</template>
|
||||
<div style="min-height: 66px;">我是弹窗2</div>
|
||||
</a-modal>
|
||||
<!-- 弹窗3 -->
|
||||
<a-modal
|
||||
:width="400"
|
||||
:mask="false"
|
||||
title="默认左下角打开"
|
||||
class="demo-modal-eg3"
|
||||
v-model:visible="visible3"
|
||||
wrap-class-name="ele-modal-movable ele-modal-resizable ele-modal-multiple">
|
||||
<div style="min-height: 66px;">我是弹窗3</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {ExpandOutlined, CompressOutlined} from '@ant-design/icons-vue';
|
||||
|
||||
export default {
|
||||
name: 'MoreModal',
|
||||
components: {ExpandOutlined, CompressOutlined},
|
||||
data() {
|
||||
return {
|
||||
// 弹窗是否打开
|
||||
visible: false,
|
||||
visible2: false,
|
||||
visible3: false,
|
||||
// 表单数据
|
||||
form: {},
|
||||
// 是否显示遮罩层
|
||||
mask: true,
|
||||
// 是否允许拖出边界
|
||||
moveOut: false,
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
nickname: [
|
||||
{required: true, message: '请输入用户名', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
sex: [
|
||||
{required: true, message: '请选择性别', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
phone: [
|
||||
{required: true, message: '请输入手机号', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
email: [
|
||||
{required: true, message: '请输入邮箱', type: 'string', trigger: 'blur'}
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 弹窗一的wrap-class
|
||||
wrapClassName() {
|
||||
return [
|
||||
this.moveOut ? 'ele-modal-move-out' : 'ele-modal-movable',
|
||||
this.mask ? '' : 'ele-modal-multiple',
|
||||
'ele-modal-resizable'
|
||||
].join(' ');
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/* 打开弹窗 */
|
||||
openDialog() {
|
||||
if (!this.visible) {
|
||||
this.mask = true;
|
||||
this.moveOut = false;
|
||||
this.visible = true;
|
||||
}
|
||||
},
|
||||
/* 打开允许拖出边界弹窗 */
|
||||
openMoveOutDialog() {
|
||||
this.moveOut = true;
|
||||
if (!this.visible) {
|
||||
this.mask = true;
|
||||
this.visible = true;
|
||||
}
|
||||
},
|
||||
/* 打开无遮罩层弹窗 */
|
||||
openHideModalDialog() {
|
||||
this.moveOut = false;
|
||||
if (!this.visible) {
|
||||
this.mask = false;
|
||||
this.visible = true;
|
||||
}
|
||||
},
|
||||
/* 弹窗关闭回调 */
|
||||
cancel() {
|
||||
this.$refs.form.clearValidate();
|
||||
},
|
||||
/* 保存编辑 */
|
||||
save() {
|
||||
this.$refs.form.validate().then(() => {
|
||||
this.$message.success('保存成功');
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
/* 打开默认全屏弹窗 */
|
||||
openFullDialog() {
|
||||
if (!this.visible2) {
|
||||
this.visible2 = true;
|
||||
}
|
||||
},
|
||||
/* 打开弹窗3 */
|
||||
openMoreDialog() {
|
||||
if (!this.visible3) {
|
||||
this.visible3 = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.demo-modal-eg3 {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: auto;
|
||||
left: auto;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
161
src/views/extension/more/more-tag.vue
Normal file
161
src/views/extension/more/more-tag.vue
Normal file
@@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<a-card title="标签" :bordered="false">
|
||||
<div class="demo-tag-item">
|
||||
<div class="demo-tag-label">预设颜色:</div>
|
||||
<div class="demo-tag-content">
|
||||
<ele-tag
|
||||
:color="colors[type][0]"
|
||||
:size="size">标签一
|
||||
</ele-tag>
|
||||
<ele-tag
|
||||
:color="colors[type][1]"
|
||||
:size="size">标签二
|
||||
</ele-tag>
|
||||
<ele-tag
|
||||
:color="colors[type][2]"
|
||||
:size="size">标签三
|
||||
</ele-tag>
|
||||
<ele-tag
|
||||
:color="colors[type][3]"
|
||||
:size="size">标签四
|
||||
</ele-tag>
|
||||
<ele-tag
|
||||
:color="colors[type][4]"
|
||||
:size="size">标签五
|
||||
</ele-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo-tag-item">
|
||||
<div class="demo-tag-label">圆角样式:</div>
|
||||
<div class="demo-tag-content">
|
||||
<ele-tag
|
||||
:color="colors[type][0]"
|
||||
:size="size"
|
||||
shape="round">标签一
|
||||
</ele-tag>
|
||||
<ele-tag
|
||||
:color="colors[type][1]"
|
||||
:size="size"
|
||||
shape="round">标签二
|
||||
</ele-tag>
|
||||
<ele-tag
|
||||
:color="colors[type][2]"
|
||||
:size="size"
|
||||
shape="round">标签三
|
||||
</ele-tag>
|
||||
<ele-tag
|
||||
:color="colors[type][3]"
|
||||
:size="size"
|
||||
shape="round">标签四
|
||||
</ele-tag>
|
||||
<ele-tag
|
||||
:color="colors[type][4]"
|
||||
:size="size"
|
||||
shape="round">标签五
|
||||
</ele-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo-tag-item">
|
||||
<div class="demo-tag-label">圆形样式:</div>
|
||||
<div class="demo-tag-content">
|
||||
<ele-tag
|
||||
:color="colors[type][0]"
|
||||
:size="size"
|
||||
shape="circle">1
|
||||
</ele-tag>
|
||||
<ele-tag
|
||||
:color="colors[type][1]"
|
||||
:size="size"
|
||||
shape="circle">2
|
||||
</ele-tag>
|
||||
<ele-tag
|
||||
:color="colors[type][2]"
|
||||
:size="size"
|
||||
shape="circle">3
|
||||
</ele-tag>
|
||||
<ele-tag
|
||||
:color="colors[type][3]"
|
||||
:size="size"
|
||||
shape="circle">4
|
||||
</ele-tag>
|
||||
<ele-tag
|
||||
:color="colors[type][4]"
|
||||
:size="size"
|
||||
shape="circle">5
|
||||
</ele-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo-tag-item" style="align-items: flex-start;">
|
||||
<div class="demo-tag-label">标签输入:</div>
|
||||
<div class="demo-tag-content">
|
||||
<ele-edit-tag
|
||||
v-model:data="tags"
|
||||
:color="colors[type][0]"
|
||||
:size="size"/>
|
||||
<div>{{ JSON.stringify(tags) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo-tag-item">
|
||||
<div class="demo-tag-label">尺寸选择:</div>
|
||||
<div class="demo-tag-content">
|
||||
<a-radio-group
|
||||
:options="sizes"
|
||||
v-model:value="size"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo-tag-item">
|
||||
<div class="demo-tag-label">主题选择:</div>
|
||||
<div class="demo-tag-content">
|
||||
<a-radio-group
|
||||
:options="types"
|
||||
v-model:value="type"/>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'MoreTag',
|
||||
data() {
|
||||
return {
|
||||
size: 'mini',
|
||||
sizes: [
|
||||
{label: 'mini', value: 'mini'},
|
||||
{label: 'small', value: 'small'},
|
||||
{label: 'middle', value: 'middle'},
|
||||
{label: 'large', value: 'large'}
|
||||
],
|
||||
colors: [
|
||||
['', 'blue', 'green', 'orange', 'red'],
|
||||
['#909399', '#1890ff', '#52c41a', '#fa8c16', '#f5222d']
|
||||
],
|
||||
types: [
|
||||
{label: 'presets', value: 0},
|
||||
{label: 'custom', value: 1},
|
||||
],
|
||||
type: 0,
|
||||
tags: ['标签一', '标签二', '标签三']
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-tag-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.demo-tag-item .demo-tag-label {
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
.demo-tag-item .demo-tag-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.demo-tag-item + .demo-tag-item {
|
||||
margin-top: 22px;
|
||||
}
|
||||
</style>
|
||||
334
src/views/extension/player.vue
Normal file
334
src/views/extension/player.vue
Normal file
@@ -0,0 +1,334 @@
|
||||
<template>
|
||||
<div class="ele-body ele-body-card">
|
||||
<a-row :gutter="16">
|
||||
<a-col :lg="12" :md="24" :sm="24" :xs="24">
|
||||
<a-card title="基础演示" :bordered="false">
|
||||
<!-- 操作按钮 -->
|
||||
<a-space style="margin-bottom: 16px;">
|
||||
<a-button
|
||||
type="primary"
|
||||
:disabled="!ready1"
|
||||
@click="play">播放
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
:disabled="!ready1"
|
||||
@click="pause">暂停
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
:disabled="!ready1"
|
||||
@click="replay">重新播放
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
:disabled="!ready1"
|
||||
@click="changeSrc">切换视频源
|
||||
</a-button>
|
||||
</a-space>
|
||||
<!-- 播放器 -->
|
||||
<xgplayer
|
||||
:config="config1"
|
||||
@player="onPlayer1"/>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :lg="12" :md="24" :sm="24" :xs="24">
|
||||
<a-card title="显示弹幕" :bordered="false">
|
||||
<!-- 操作按钮 -->
|
||||
<a-space style="margin-bottom: 16px;">
|
||||
<a-input
|
||||
style="width: 160px;"
|
||||
v-model:value="dmText"
|
||||
placeholder="请输入弹幕内容"
|
||||
:disabled="!ready2"/>
|
||||
<a-button
|
||||
type="primary"
|
||||
:disabled="!ready2"
|
||||
@click="shoot">发射
|
||||
</a-button>
|
||||
</a-space>
|
||||
<!-- 播放器 -->
|
||||
<xgplayer
|
||||
:config="config2"
|
||||
@player="onPlayer2"/>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Xgplayer from 'xgplayer-vue';
|
||||
|
||||
export default {
|
||||
name: 'ExtensionPlayer',
|
||||
components: {Xgplayer},
|
||||
data() {
|
||||
return {
|
||||
// 视频播放器一配置
|
||||
config1: {
|
||||
id: 'demoPlayer1',
|
||||
lang: 'zh-cn',
|
||||
fluid: true,
|
||||
// 视频地址
|
||||
url: 'https://s1.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo.mp4',
|
||||
// 封面
|
||||
poster: 'https://imgcache.qq.com/open_proj/proj_qcloud_v2/gateway/solution/general-video/css/img/scene/1.png',
|
||||
// 开启倍速播放
|
||||
playbackRate: [0.5, 1, 1.5, 2],
|
||||
// 开启画中画
|
||||
pip: true
|
||||
},
|
||||
// 视频播放器一实例
|
||||
player1: null,
|
||||
// 视频播放器一是否实例化完成
|
||||
ready1: false,
|
||||
// 视频播放器二配置
|
||||
config2: {
|
||||
id: 'demoPlayer2',
|
||||
lang: 'zh-cn',
|
||||
fluid: true,
|
||||
url: 'https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_TheatricalTeaser_WeAreOverwatch_zhCN.mp4',
|
||||
poster: 'https://imgcache.qq.com/open_proj/proj_qcloud_v2/gateway/solution/general-video/css/img/scene/1.png',
|
||||
danmu: {
|
||||
comments: [
|
||||
{
|
||||
id: '1',
|
||||
start: 0,
|
||||
txt: '空降',
|
||||
duration: 15000,
|
||||
color: true,
|
||||
style: {
|
||||
color: '#ffcd08',
|
||||
fontSize: '20px'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
start: 1500,
|
||||
txt: '前方高能',
|
||||
duration: 15000,
|
||||
color: true,
|
||||
style: {
|
||||
color: '#ffcd08',
|
||||
fontSize: '20px'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
start: 3500,
|
||||
txt: '弹幕护体',
|
||||
duration: 15000,
|
||||
color: true,
|
||||
style: {
|
||||
color: '#ffcd08',
|
||||
fontSize: '20px'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
start: 4500,
|
||||
txt: '弹幕护体',
|
||||
duration: 15000,
|
||||
color: true,
|
||||
style: {
|
||||
color: '#ffcd08',
|
||||
fontSize: '20px'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
start: 6000,
|
||||
txt: '前方高能',
|
||||
duration: 15000,
|
||||
color: true,
|
||||
style: {
|
||||
color: '#ffcd08',
|
||||
fontSize: '20px'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
start: 8500,
|
||||
txt: '弹幕护体',
|
||||
duration: 15000,
|
||||
color: true,
|
||||
style: {
|
||||
color: '#ffcd08',
|
||||
fontSize: '20px'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '7',
|
||||
start: 10000,
|
||||
txt: '666666666',
|
||||
duration: 15000,
|
||||
color: true,
|
||||
style: {
|
||||
color: '#ffcd08',
|
||||
fontSize: '20px'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '8',
|
||||
start: 12500,
|
||||
txt: '前方高能',
|
||||
duration: 15000,
|
||||
color: true,
|
||||
style: {
|
||||
color: '#ffcd08',
|
||||
fontSize: '20px'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '9',
|
||||
start: 15500,
|
||||
txt: '666666666',
|
||||
duration: 15000,
|
||||
color: true,
|
||||
style: {
|
||||
color: '#ffcd08',
|
||||
fontSize: '20px'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '10',
|
||||
start: 16500,
|
||||
txt: '666666666',
|
||||
duration: 15000,
|
||||
color: true,
|
||||
style: {
|
||||
color: '#ffcd08',
|
||||
fontSize: '20px'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '11',
|
||||
start: 18000,
|
||||
txt: '关弹幕，保智商',
|
||||
duration: 15000,
|
||||
color: true,
|
||||
style: {
|
||||
color: '#ffcd08',
|
||||
fontSize: '20px'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '12',
|
||||
start: 20500,
|
||||
txt: '关弹幕，保智商',
|
||||
duration: 15000,
|
||||
color: true,
|
||||
style: {
|
||||
color: '#ffcd08',
|
||||
fontSize: '20px'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '13',
|
||||
start: 22000,
|
||||
txt: '666666666',
|
||||
duration: 15000,
|
||||
color: true,
|
||||
style: {
|
||||
color: '#ffcd08',
|
||||
fontSize: '20px'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '14',
|
||||
start: 25500,
|
||||
txt: '666666666',
|
||||
duration: 15000,
|
||||
color: true,
|
||||
style: {
|
||||
color: '#ffcd08',
|
||||
fontSize: '20px'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '15',
|
||||
start: 26000,
|
||||
txt: '前方高能',
|
||||
duration: 15000,
|
||||
color: true,
|
||||
style: {
|
||||
color: '#ffcd08',
|
||||
fontSize: '20px'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
// 视频播放器二实例
|
||||
player2: null,
|
||||
// 视频播放器二是否实例化完成
|
||||
ready2: false,
|
||||
// 弹幕输入内容
|
||||
dmText: ''
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/* 播放器一渲染完成 */
|
||||
onPlayer1(e) {
|
||||
this.player1 = e;
|
||||
this.player1.on('play', () => {
|
||||
this.ready1 = true;
|
||||
});
|
||||
},
|
||||
/* 播放 */
|
||||
play() {
|
||||
if (this.player1.paused) {
|
||||
this.player1.play();
|
||||
}
|
||||
},
|
||||
/* 暂停 */
|
||||
pause() {
|
||||
if (!this.player1.paused) {
|
||||
this.player1.pause();
|
||||
}
|
||||
},
|
||||
/* 重新播放 */
|
||||
replay() {
|
||||
this.player1.replay();
|
||||
},
|
||||
/* 切换视频源 */
|
||||
changeSrc() {
|
||||
this.player1.src = 'https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_TheatricalTeaser_WeAreOverwatch_zhCN.mp4';
|
||||
if (this.player1.paused) {
|
||||
this.player1.play();
|
||||
}
|
||||
},
|
||||
/* 播放器二渲染完成 */
|
||||
onPlayer2(e) {
|
||||
this.player2 = e;
|
||||
this.player2.on('play', () => {
|
||||
this.ready2 = true;
|
||||
});
|
||||
},
|
||||
/* 发射弹幕 */
|
||||
shoot() {
|
||||
if (!this.dmText) {
|
||||
this.$message.error('请输入弹幕内容');
|
||||
return;
|
||||
}
|
||||
this.player2.danmu.sendComment({
|
||||
id: new Date().getTime(),
|
||||
duration: 15000,
|
||||
color: true,
|
||||
start: this.player2.currentTime * 1000,
|
||||
txt: this.dmText,
|
||||
style: {
|
||||
color: '#fa1f41',
|
||||
fontSize: '20px',
|
||||
border: 'solid 1px #fa1f41'
|
||||
}
|
||||
});
|
||||
this.dmText = '';
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
366
src/views/extension/printer.vue
Normal file
366
src/views/extension/printer.vue
Normal file
@@ -0,0 +1,366 @@
|
||||
<template>
|
||||
<div class="ele-body ele-body-card">
|
||||
<a-card title="打印当前页面" :bordered="false">
|
||||
<div style="margin-bottom: 16px;">支持IE浏览器打印预览</div>
|
||||
<a-space>
|
||||
<a-button @click="print({})">打印当前页面</a-button>
|
||||
<a-button @click="print({horizontal:true})">横屏打印</a-button>
|
||||
<!--<a-button @click="print({blank:true})">新窗口打印</a-button>-->
|
||||
<a-button @click="print({hide:['.demo-hide-1']})">打印时隐藏指定内容</a-button>
|
||||
</a-space>
|
||||
<div style="margin-top: 16px;">
|
||||
<span class="ele-text-danger ele-printer-hide">此段内容会在所有打印时自动隐藏，打印完自动复原。</span>
|
||||
<span class="ele-text-primary demo-hide-1">此段内容在指定打印时才隐藏。</span>
|
||||
</div>
|
||||
</a-card>
|
||||
<a-card title="打印任意内容" :bordered="false">
|
||||
<a-space>
|
||||
<a-button @click="printHtml()">打印任意内容</a-button>
|
||||
<!--<a-button @click="printHtml(true)">新窗口打印</a-button>-->
|
||||
<a-button @click="printAddHeader">设置页眉页脚</a-button>
|
||||
<a-button @click="printImage">打印图片</a-button>
|
||||
</a-space>
|
||||
</a-card>
|
||||
<a-card title="分页打印" :bordered="false">
|
||||
<a-space>
|
||||
<a-button @click="printPage()">分页打印</a-button>
|
||||
<!--<a-button @click="printPage(true)">新窗口分页打印</a-button>-->
|
||||
<a-button @click="printPageAddHeader">分页打印设置页眉页脚</a-button>
|
||||
</a-space>
|
||||
</a-card>
|
||||
<a-card title="进阶示例" :bordered="false">
|
||||
<a-space>
|
||||
<a-button @click="printDataTable">打印数据表格</a-button>
|
||||
<a-tooltip title="对于复杂的打印需求，可以后端生成pdf给前端打印">
|
||||
<a-button @click="printPdf">打印pdf</a-button>
|
||||
</a-tooltip>
|
||||
<a-button @click="printQrCode">打印条码</a-button>
|
||||
<a-button @click="printTable">打印自定义表格</a-button>
|
||||
</a-space>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import printer from 'ele-admin-pro/packages/printer.js';
|
||||
|
||||
export default {
|
||||
name: 'ExtensionPrinter',
|
||||
data() {
|
||||
return {
|
||||
users: [
|
||||
{
|
||||
key: 1,
|
||||
username: '张小三',
|
||||
amount: 18,
|
||||
province: '浙江',
|
||||
city: '杭州',
|
||||
zone: '西湖区',
|
||||
street: '西溪街道',
|
||||
address: '西溪花园30栋1单元',
|
||||
},
|
||||
{
|
||||
key: 2,
|
||||
username: '李小四',
|
||||
amount: 39,
|
||||
province: '江苏',
|
||||
city: '苏州',
|
||||
zone: '姑苏区',
|
||||
street: '丝绸路',
|
||||
address: '天墅之城9幢2单元',
|
||||
},
|
||||
{
|
||||
key: 3,
|
||||
username: '王小五',
|
||||
amount: 8,
|
||||
province: '江西',
|
||||
city: '南昌',
|
||||
zone: '青山湖区',
|
||||
street: '艾溪湖办事处',
|
||||
address: '中兴和园1幢3单元',
|
||||
},
|
||||
{
|
||||
key: 4,
|
||||
username: '赵小六',
|
||||
amount: 16,
|
||||
province: '福建',
|
||||
city: '泉州',
|
||||
zone: '丰泽区',
|
||||
street: '南洋街道',
|
||||
address: '南洋村6幢1单元',
|
||||
},
|
||||
{
|
||||
key: 5,
|
||||
username: '孙小七',
|
||||
amount: 12,
|
||||
province: '湖北',
|
||||
city: '武汉',
|
||||
zone: '武昌区',
|
||||
street: '武昌大道',
|
||||
address: '两湖花园16幢2单元',
|
||||
},
|
||||
{
|
||||
key: 6,
|
||||
username: '周小八',
|
||||
amount: 11,
|
||||
province: '安徽',
|
||||
city: '黄山',
|
||||
zone: '黄山区',
|
||||
street: '汤口镇',
|
||||
address: '温泉村21号',
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/* 打印当前页面 */
|
||||
print(options) {
|
||||
printer.print(options);
|
||||
},
|
||||
/* 打印任意内容 */
|
||||
printHtml(blank) {
|
||||
printer.printHtml({
|
||||
html: '<h1>Hello! Welcome To EleAdminPro!</h1>',
|
||||
blank: blank
|
||||
});
|
||||
},
|
||||
/* 打印设置页眉页脚 */
|
||||
printAddHeader() {
|
||||
printer.printHtml({
|
||||
html: `
|
||||
<div style="padding: 0 60px;">
|
||||
<h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1>
|
||||
<h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1>
|
||||
<h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1>
|
||||
<h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1>
|
||||
<h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1>
|
||||
<h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1>
|
||||
</div>
|
||||
`,
|
||||
margin: 0,
|
||||
header: `
|
||||
<div style="text-align: center;font-size: 12px;padding: 15px 30px 25px;">
|
||||
<span style="float: left;">我是页眉左侧</span>
|
||||
<span>我是页眉</span>
|
||||
<span style="float: right;">我是页眉右侧</span>
|
||||
</div>`,
|
||||
footer: `
|
||||
<div style="text-align: center;font-size: 12px;padding: 15px 30px 25px;">
|
||||
<span style="float: left;">我是页脚左侧</span>
|
||||
<span>我是页脚</span>
|
||||
<span style="float: right;">我是页脚右侧</span>
|
||||
</div>`
|
||||
});
|
||||
},
|
||||
/* 打印图片 */
|
||||
printImage() {
|
||||
printer.printHtml({
|
||||
html: '<img src="https://cdn.eleadmin.com/20200610/LrCTN2j94lo9N7wEql7cBr1Ux4rHMvmZ.jpg" style="width: 100%;"/>'
|
||||
});
|
||||
},
|
||||
/* 分页打印 */
|
||||
printPage(blank) {
|
||||
printer.printPage({
|
||||
htmls: [
|
||||
'<div>我是第一页</div>',
|
||||
'<div>我是第二页</div>',
|
||||
'<div>我是第三页</div>',
|
||||
'<div>我是第四页</div>',
|
||||
'<div>我是第五页</div>'
|
||||
],
|
||||
style: '<style>div{color: red;}</style>',
|
||||
blank: blank
|
||||
});
|
||||
},
|
||||
/* 分页打印设置页眉页脚 */
|
||||
printPageAddHeader() {
|
||||
printer.printPage({
|
||||
htmls: [
|
||||
'<span class="ele-printer-num">1/5</span><div>我是第一页</div>',
|
||||
'<span class="ele-printer-num">2/5</span><div>我是第二页</div>',
|
||||
'<span class="ele-printer-num">3/5</span><div>我是第三页</div>',
|
||||
'<span class="ele-printer-num">4/5</span><div>我是第四页</div>',
|
||||
'<span class="ele-printer-num">5/5</span><div>我是第五页</div>'
|
||||
],
|
||||
margin: 0,
|
||||
padding: '30px 60px',
|
||||
header: `
|
||||
<div style="text-align: center;font-size: 12px;padding: 15px 30px;">
|
||||
<span style="float: left;">我是页眉左侧</span>
|
||||
<span>我是页眉</span>
|
||||
<span style="float: right;">我是页眉右侧</span>
|
||||
</div>`,
|
||||
footer: `
|
||||
<div style="text-align: center;font-size: 12px;padding: 15px 30px;">
|
||||
<span style="float: left;">我是页脚左侧</span>
|
||||
<span>我是页脚</span>
|
||||
<span style="float: right;">我是页脚右侧</span>
|
||||
</div>`,
|
||||
style: `
|
||||
<style>
|
||||
.ele-printer-page-item > div { color: red; }
|
||||
.ele-printer-num {
|
||||
position: absolute;
|
||||
top: -35px;
|
||||
right: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>`
|
||||
});
|
||||
},
|
||||
/* 打印数据表格 */
|
||||
printDataTable() {
|
||||
let html = printer.makeTable(this.users, [
|
||||
[
|
||||
{field: 'username', width: 150, rowspan: 2, title: '联系人'},
|
||||
{align: 'center', colspan: 3, title: '地址'},
|
||||
{field: 'amount', width: 120, rowspan: 2, title: '金额', align: 'center'}
|
||||
],
|
||||
[
|
||||
{field: 'province', width: 120, title: '省'},
|
||||
{field: 'city', width: 120, title: '市'},
|
||||
{
|
||||
width: 200, title: '区', templet: (d) => {
|
||||
return `<span style="color:red;">${d.zone}</span>`;
|
||||
}
|
||||
}
|
||||
]
|
||||
]);
|
||||
printer.printHtml({html: '<p>提供数据和cols配置自动生成复杂表格，非常的方便</p>' + html});
|
||||
},
|
||||
/* 打印pdf */
|
||||
printPdf() {
|
||||
printer.printPdf({url: 'https://cdn.eleadmin.com/20200610/20200708224450.pdf'});
|
||||
},
|
||||
/* 打印条码 */
|
||||
printQrCode() {
|
||||
let html = `
|
||||
<div class="code-group">
|
||||
<div class="code-group-title">EasyWeb授权凭证</div>
|
||||
<div class="code-group-body">
|
||||
<p>手机扫描右侧二维码，或登录</p>
|
||||
<p>网站https://easyweb.vip</p>
|
||||
<p>查询产品真伪</p>
|
||||
<img src="https://cdn.eleadmin.com/20200610/20200708230820.png" width="70px" height="70px"/>
|
||||
<span>515AE3X1</span>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
.code-group {
|
||||
display: inline-block;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
background-color: #fff;
|
||||
}
|
||||
.code-group-title {
|
||||
border-bottom: 1px solid #ccc;
|
||||
padding: 10px 15px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
.code-group-body {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
padding: 15px 115px 0 25px;
|
||||
min-height: 90px;
|
||||
}
|
||||
.code-group-body > p {
|
||||
margin: 0 0 13px 0;
|
||||
font-size: 15px;
|
||||
font-family: 幼圆;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
.code-group-body > img, .code-group-body > span {
|
||||
position: absolute;
|
||||
right: 25px;
|
||||
top: 15px;
|
||||
}
|
||||
.code-group-body > span {
|
||||
top: 90px;
|
||||
}
|
||||
</style>
|
||||
`;
|
||||
printer.printHtml({html: html});
|
||||
},
|
||||
/* 打印自定义表格 */
|
||||
printTable() {
|
||||
let html = `
|
||||
<h2 style="text-align: center;color: #333;">软工xxxx班课程表</h2>
|
||||
<table class="ele-printer-table">
|
||||
<colgroup>
|
||||
<col width="130px"/>
|
||||
</colgroup>
|
||||
<tr>
|
||||
<th style="position: relative;">
|
||||
<span style="position: absolute;right: 20px;top: 10px;line-height: normal;">星期</span>
|
||||
<span style="position: absolute;left: 20px;bottom: 10px;line-height: normal;">时间</span>
|
||||
<div style="height: 1px; width:140px;background-color: #000;position: absolute;left: 0;top: 0;transform: rotate(21deg);transform-origin: 0 0;"></div>
|
||||
</th>
|
||||
<th>周一</th>
|
||||
<th>周二</th>
|
||||
<th>周三</th>
|
||||
<th>周四</th>
|
||||
<th>周五</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>8:00-10:00</td>
|
||||
<td>HTML5网页设计<br/>曲丽丽 - 441教室</td>
|
||||
<td>数据库原理及应用<br/>严良 - 716机房</td>
|
||||
<td>JavaSE初级程序设计<br/>肖萧 - 715机房</td>
|
||||
<td></td>
|
||||
<td>JavaScript程序设计<br/>董娜 - 733机房</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>10:30-12:30</td>
|
||||
<td></td>
|
||||
<td>JavaScript程序设计<br/>董娜 - 733机房</td>
|
||||
<td></td>
|
||||
<td>锋利的jQuery<br/>程咏 - 303教室</td>
|
||||
<td>JavaEE应用开发<br/>周星 - 303教室</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="6" style="height: auto;">午休</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>13:30-15:30</td>
|
||||
<td>JavaSE初级程序设计<br/>肖萧 - 715机房</td>
|
||||
<td></td>
|
||||
<td>HTML5网页设计<br/>曲丽丽 - 441教室</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>16:00-18:00</td>
|
||||
<td></td>
|
||||
<td>JavaEE应用开发<br/>周星 - 303教室</td>
|
||||
<td></td>
|
||||
<td>数据库原理及应用<br/>严良 - 716机房</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
<style>
|
||||
th, td {
|
||||
text-align: center;
|
||||
line-height: 32px;
|
||||
}
|
||||
td {
|
||||
height: 110px;
|
||||
}
|
||||
</style>
|
||||
`;
|
||||
printer.printHtml({html: html, horizontal: true});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ant-space {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.ant-space .ant-btn {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
</style>
|
||||
401
src/views/form/advanced.vue
Normal file
401
src/views/form/advanced.vue
Normal file
@@ -0,0 +1,401 @@
|
||||
<template>
|
||||
<a-page-header :ghost="false" title="复杂表单">
|
||||
<div class="ele-text-secondary">复杂表单常见于一次性输入和提交大批量数据的场景。</div>
|
||||
</a-page-header>
|
||||
<div class="ele-body ele-body-card" style="padding-bottom: 48px;">
|
||||
<a-form
|
||||
ref="form"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:label-col="{md: {span: 6}, sm: {span: 24}}"
|
||||
:wrapper-col="{md: {span: 18}, sm: {span: 24}}">
|
||||
<a-card :bordered="false" title="仓库信息">
|
||||
<a-row :gutter="16">
|
||||
<a-col :lg="8" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="仓库名:" name="name">
|
||||
<a-input
|
||||
v-model:value="form.name"
|
||||
placeholder="请输入仓库名"
|
||||
allow-clear/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="8" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="仓库域名:" name="url">
|
||||
<a-input
|
||||
v-model:value="form.url"
|
||||
placeholder="请输入"
|
||||
allow-clear
|
||||
addon-before="http://"
|
||||
addon-after=".com"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="8" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="仓库管理员:" name="administrator">
|
||||
<a-select
|
||||
v-model:value="form.administrator"
|
||||
placeholder="请选择仓库管理员"
|
||||
allow-clear>
|
||||
<a-select-option value="1">SunSmile</a-select-option>
|
||||
<a-select-option value="2">Jasmine</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="8" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="审批人:" name="approver">
|
||||
<a-select
|
||||
v-model:value="form.approver"
|
||||
placeholder="请选择审批人"
|
||||
allow-clear>
|
||||
<a-select-option value="1">SunSmile</a-select-option>
|
||||
<a-select-option value="2">Jasmine</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="8" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="生效日期:" name="datetime">
|
||||
<a-range-picker
|
||||
v-model:value="form.datetime"
|
||||
class="ele-fluid">
|
||||
<template #suffixIcon>
|
||||
<calendar-outlined/>
|
||||
</template>
|
||||
</a-range-picker>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="8" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="仓库类型:" name="type">
|
||||
<a-select
|
||||
v-model:value="form.type"
|
||||
placeholder="请选择仓库类型"
|
||||
allow-clear>
|
||||
<a-select-option value="private">私密</a-select-option>
|
||||
<a-select-option value="public">公开</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
<a-card :bordered="false" title="任务信息">
|
||||
<a-row :gutter="16">
|
||||
<a-col :lg="8" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="任务名:" name="task">
|
||||
<a-input
|
||||
v-model:value="form.task"
|
||||
placeholder="请输入任务名"
|
||||
allow-clear/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="8" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="任务表述:" name="description">
|
||||
<a-input
|
||||
v-model:value="form.description"
|
||||
placeholder="请输入任务表述"
|
||||
allow-clear/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="8" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="执行人:" name="executor">
|
||||
<a-select
|
||||
v-model:value="form.executor"
|
||||
placeholder="请选择执行人"
|
||||
allow-clear>
|
||||
<a-select-option value="1">SunSmile</a-select-option>
|
||||
<a-select-option value="2">Jasmine</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="8" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="责任人:" name="officer">
|
||||
<a-select
|
||||
v-model:value="form.officer"
|
||||
placeholder="请选择责任人"
|
||||
allow-clear>
|
||||
<a-select-option value="1">SunSmile</a-select-option>
|
||||
<a-select-option value="2">Jasmine</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="8" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="提醒时间:" name="reminder">
|
||||
<a-time-picker
|
||||
v-model:value="form.reminder"
|
||||
placeholder="请选择提醒时间"
|
||||
value-format="hh:mm:ss"
|
||||
class="ele-fluid"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="8" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="任务类型:" name="taskType">
|
||||
<a-select
|
||||
v-model:value="form.taskType"
|
||||
placeholder="请选择任务类型"
|
||||
allow-clear>
|
||||
<a-select-option value="1">私密</a-select-option>
|
||||
<a-select-option value="2">公开</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
<a-card :bordered="false" title="选择成员">
|
||||
<!-- 数据表格 -->
|
||||
<a-table
|
||||
:data-source="users"
|
||||
row-key="__index"
|
||||
size="middle"
|
||||
:pagination="false"
|
||||
:scroll="{x: 'max-content'}">
|
||||
<a-table-column
|
||||
data-index="__index"
|
||||
align="center"
|
||||
:width="58"/>
|
||||
<a-table-column
|
||||
title="用户名"
|
||||
data-index="name">
|
||||
<template #default="{text,index}">
|
||||
<a-input
|
||||
v-if="index===editIndex"
|
||||
v-model:value="editRow.name"
|
||||
placeholder="请输入用户名"/>
|
||||
<span v-else>{{ text }}</span>
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column
|
||||
title="工号"
|
||||
data-index="number">
|
||||
<template #default="{text,index}">
|
||||
<a-input
|
||||
v-if="index===editIndex"
|
||||
v-model:value="editRow.number"
|
||||
placeholder="请输入工号"/>
|
||||
<span v-else>{{ text }}</span>
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column
|
||||
title="所属部门"
|
||||
data-index="department">
|
||||
<template #default="{text,index}">
|
||||
<a-select
|
||||
v-if="index===editIndex"
|
||||
v-model:value="editRow.department"
|
||||
placeholder="请选择部门">
|
||||
<a-select-option value="研发部">研发部</a-select-option>
|
||||
<a-select-option value="测试部">测试部</a-select-option>
|
||||
<a-select-option value="产品部">产品部</a-select-option>
|
||||
</a-select>
|
||||
<span v-else>{{ text }}</span>
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column
|
||||
title="操作"
|
||||
key="action"
|
||||
align="center"
|
||||
:width="160">
|
||||
<template #default="{index,record}">
|
||||
<a-space v-if="index===editIndex">
|
||||
<a @click="onSave(record, index)">保存</a>
|
||||
<a-divider type="vertical"/>
|
||||
<a @click="onCancel(record, index)">取消</a>
|
||||
</a-space>
|
||||
<a-space v-else>
|
||||
<a @click="onEdit(record, index)">修改</a>
|
||||
<a-divider type="vertical"/>
|
||||
<a-popconfirm
|
||||
title="确定要删除此用户吗？"
|
||||
@confirm="onRemove(record,index)">
|
||||
<a class="ele-text-danger">删除</a>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-table-column>
|
||||
</a-table>
|
||||
<a-button
|
||||
block
|
||||
type="dashed"
|
||||
style="margin-top: 16px;"
|
||||
@click="addRow">
|
||||
<template #icon>
|
||||
<plus-outlined/>
|
||||
</template>
|
||||
<span>新增成员</span>
|
||||
</a-button>
|
||||
</a-card>
|
||||
<!-- 底部工具栏 -->
|
||||
<div class="ele-bottom-tool">
|
||||
<div v-if="validMsg" class="ele-text-danger">
|
||||
<close-circle-outlined/>
|
||||
<span>{{ validMsg }}</span>
|
||||
</div>
|
||||
<div class="ele-bottom-tool-actions">
|
||||
<a-button
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
@click="submit">提交
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</a-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
CalendarOutlined,
|
||||
PlusOutlined,
|
||||
CloseCircleOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
|
||||
export default {
|
||||
name: 'FormAdvanced',
|
||||
components: {
|
||||
CalendarOutlined,
|
||||
PlusOutlined,
|
||||
CloseCircleOutlined
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 加载状态
|
||||
loading: false,
|
||||
// 表单数据
|
||||
form: {
|
||||
name: '',
|
||||
url: '',
|
||||
datetime: [],
|
||||
task: '',
|
||||
description: '',
|
||||
reminder: ''
|
||||
},
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
name: [
|
||||
{required: true, message: '请输入仓库名', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
url: [
|
||||
{required: true, message: '请输入仓库域名', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
administrator: [
|
||||
{required: true, message: '请选择仓库管理员', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
approver: [
|
||||
{required: true, message: '请选择审批人', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
datetime: [
|
||||
{required: true, message: '请选择生效日期', type: 'array', trigger: 'blur'}
|
||||
],
|
||||
type: [
|
||||
{required: true, message: '请选择仓库类型', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
task: [
|
||||
{required: true, message: '请输入任务名', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
description: [
|
||||
{required: true, message: '请输入任务表述', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
executor: [
|
||||
{required: true, message: '请选择执行人', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
officer: [
|
||||
{required: true, message: '请选择责任人', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
reminder: [
|
||||
{required: true, message: '请选择提醒时间', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
taskType: [
|
||||
{required: true, message: '请选择任务类型', type: 'string', trigger: 'blur'}
|
||||
]
|
||||
},
|
||||
// 用户列表
|
||||
users: [
|
||||
{__index: 1, name: 'John Brown', number: '00001', department: '研发部'},
|
||||
{__index: 2, name: 'Jim Green', number: '00002', department: '产品部'},
|
||||
{__index: 3, name: 'Joe Black', number: '00003', department: '产品部'}
|
||||
],
|
||||
// 表单验证失败提示信息
|
||||
validMsg: '',
|
||||
// 表格编辑行索引
|
||||
editIndex: null,
|
||||
// 表格编辑行数据
|
||||
editRow: {}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/* 表单提交 */
|
||||
submit() {
|
||||
this.$refs.form.validate().then(() => {
|
||||
this.validMsg = '';
|
||||
this.loading = true;
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
this.$message.success('提交成功');
|
||||
}, 1500);
|
||||
}).catch((e) => {
|
||||
this.validMsg = ` 共有 ${e.errorFields.length} 项校验不通过`;
|
||||
});
|
||||
},
|
||||
/* 添加一行 */
|
||||
addRow() {
|
||||
if (this.users.length && this.users[this.users.length - 1].__is_add) {
|
||||
return;
|
||||
}
|
||||
this.editRow = {
|
||||
__is_add: true, // 此字段标识为添加状态
|
||||
__index: this.users.length + 1 // 此字段标识索引
|
||||
};
|
||||
this.editIndex = this.users.length;
|
||||
this.users.push(this.editRow);
|
||||
},
|
||||
/* 修改行 */
|
||||
onEdit(row, index) {
|
||||
if (this.users.length && this.users[this.users.length - 1].__is_add) {
|
||||
return;
|
||||
}
|
||||
this.editIndex = index;
|
||||
this.editRow = Object.assign({}, row);
|
||||
},
|
||||
/* 删除行 */
|
||||
onRemove(row, index) {
|
||||
this.users[this.editIndex].__is_add = false;
|
||||
this.users.splice(index, 1); // 删除数据
|
||||
// 重置__index
|
||||
this.users = this.users.map((d, index) => {
|
||||
return Object.assign({}, d, {
|
||||
__index: index + 1
|
||||
});
|
||||
})
|
||||
// 如果需要请求接口删除可以在这里写
|
||||
},
|
||||
/* 保存编辑 */
|
||||
onSave(row, index) {
|
||||
if (!this.editRow.name) {
|
||||
this.$message.error('请输入用户');
|
||||
return;
|
||||
}
|
||||
if (!this.editRow.number) {
|
||||
this.$message.error('请输入工号');
|
||||
return;
|
||||
}
|
||||
if (!this.editRow.department) {
|
||||
this.$message.error('请选择部门');
|
||||
return;
|
||||
}
|
||||
this.users[index] = Object.assign({}, this.editRow, {
|
||||
__is_add: null
|
||||
});
|
||||
this.editIndex = null;
|
||||
this.editRow = {};
|
||||
// 如果需要请求接口保存可以在这里写
|
||||
},
|
||||
/* 取消编辑 */
|
||||
onCancel(row, index) {
|
||||
if (row.__is_add) {
|
||||
this.users.splice(index, 1);
|
||||
}
|
||||
this.editIndex = null;
|
||||
this.editRow = {};
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
185
src/views/form/basic.vue
Normal file
185
src/views/form/basic.vue
Normal file
@@ -0,0 +1,185 @@
|
||||
<template>
|
||||
<a-page-header :ghost="false" title="基础表单">
|
||||
<div class="ele-text-secondary">表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。</div>
|
||||
</a-page-header>
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false">
|
||||
<a-form
|
||||
ref="form"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
style="max-width: 800px;margin: 0 auto;"
|
||||
:label-col="{md: {span: 6}, sm: {span: 24}}"
|
||||
:wrapper-col="{md: {span: 18}, sm: {span: 24}}">
|
||||
<a-form-item label="标题:" name="title">
|
||||
<a-input
|
||||
v-model:value="form.title"
|
||||
placeholder="请输入标题"
|
||||
allow-clear/>
|
||||
</a-form-item>
|
||||
<a-form-item label="起止日期:" name="datetime">
|
||||
<a-range-picker
|
||||
v-model:value="form.datetime"
|
||||
value-format="YYYY-MM-DD"
|
||||
class="ele-fluid">
|
||||
<template #suffixIcon>
|
||||
<calendar-outlined/>
|
||||
</template>
|
||||
</a-range-picker>
|
||||
</a-form-item>
|
||||
<a-form-item label="目标描述:" name="goal">
|
||||
<a-textarea
|
||||
v-model:value="form.goal"
|
||||
placeholder="请输入目标描述"
|
||||
:rows="4"/>
|
||||
</a-form-item>
|
||||
<a-form-item label="衡量标准:" name="standard">
|
||||
<a-textarea
|
||||
v-model:value="form.standard"
|
||||
placeholder="请输入衡量标准"
|
||||
:rows="4"/>
|
||||
</a-form-item>
|
||||
<a-form-item label="地点:" name="address">
|
||||
<a-select
|
||||
v-model:value="form.address"
|
||||
placeholder="请选择地点"
|
||||
allow-clear>
|
||||
<a-select-option value="1">地点一</a-select-option>
|
||||
<a-select-option value="2">地点二</a-select-option>
|
||||
<a-select-option value="3">地点三</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="邀评人:">
|
||||
<a-select
|
||||
v-model:value="form.invites"
|
||||
placeholder="请选择邀评人"
|
||||
mode="multiple"
|
||||
allow-clear>
|
||||
<a-select-option
|
||||
v-for="item in users"
|
||||
:key="item.id"
|
||||
:value="item.id">{{ item.name }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="权重:">
|
||||
<a-space>
|
||||
<a-input-number
|
||||
v-model:value="form.weight"
|
||||
:min="0"
|
||||
:max="100"/>
|
||||
<span>%</span>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
<a-form-item label="目标公开:">
|
||||
<a-radio-group
|
||||
v-model:value="form.publicType"
|
||||
name="publicType">
|
||||
<a-radio :value="1">公开</a-radio>
|
||||
<a-radio :value="2">部分公开</a-radio>
|
||||
<a-radio :value="3">不公开</a-radio>
|
||||
</a-radio-group>
|
||||
<div style="margin-top: 12px;">
|
||||
<a-input
|
||||
v-if="form.publicType===2"
|
||||
placeholder="公开给"/>
|
||||
</div>
|
||||
<div class="ele-text-secondary" style="margin-top: 12px;">客户、邀评人默认被分享</div>
|
||||
</a-form-item>
|
||||
<a-form-item :wrapper-col="{md: {offset: 6}}">
|
||||
<a-space size="middle">
|
||||
<a-button @click="closePage">关闭</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="submit"
|
||||
:loading="loading">提交
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {CalendarOutlined} from '@ant-design/icons-vue';
|
||||
import {finishPageTab} from '@/utils/page-tab-util';
|
||||
|
||||
export default {
|
||||
name: 'FormBasic',
|
||||
components: {CalendarOutlined},
|
||||
data() {
|
||||
return {
|
||||
// 加载状态
|
||||
loading: false,
|
||||
// 表单数据
|
||||
form: {
|
||||
title: '',
|
||||
datetime: [],
|
||||
goal: '',
|
||||
standard: '',
|
||||
invites: [],
|
||||
weight: 0,
|
||||
publicType: 1
|
||||
},
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
title: [
|
||||
{required: true, message: '请输入标题', trigger: 'blur'}
|
||||
],
|
||||
datetime: [
|
||||
{required: true, message: '请选择起止日期', type: 'array', trigger: 'blur'}
|
||||
],
|
||||
goal: [
|
||||
{required: true, message: '请输入目标描述', trigger: 'blur'}
|
||||
],
|
||||
standard: [
|
||||
{required: true, message: '请输入衡量标准', trigger: 'blur'}
|
||||
],
|
||||
address: [
|
||||
{required: true, message: '请选择地点', type: 'string', trigger: 'blur'}
|
||||
]
|
||||
},
|
||||
// 邀评人下拉列表数据
|
||||
users: [
|
||||
{id: 1, name: 'SunSmile'},
|
||||
{id: 2, name: '你的名字很好听'},
|
||||
{id: 3, name: '全村人的希望'},
|
||||
{id: 4, name: 'Jasmine'},
|
||||
{id: 5, name: '酷酷的大叔'}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/* 提交 */
|
||||
submit() {
|
||||
this.$refs.form.validate().then(() => {
|
||||
this.loading = true;
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
// 重置表单
|
||||
this.form = {
|
||||
title: '',
|
||||
datetime: [],
|
||||
goal: '',
|
||||
standard: '',
|
||||
address: '',
|
||||
invites: [],
|
||||
weight: 0,
|
||||
publicType: 1
|
||||
};
|
||||
this.$message.success('提交成功');
|
||||
}, 1500);
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
/* 关闭当前页面 */
|
||||
closePage() {
|
||||
finishPageTab();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
228
src/views/form/step.vue
Normal file
228
src/views/form/step.vue
Normal file
@@ -0,0 +1,228 @@
|
||||
<template>
|
||||
<a-page-header :ghost="false" title="分步表单">
|
||||
<div class="ele-text-secondary">将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。</div>
|
||||
</a-page-header>
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false">
|
||||
<div style="max-width: 800px;margin: 0 auto;">
|
||||
<a-steps :current="active" style="margin: 10px 0 30px 0;">
|
||||
<a-step title="第一步" description="填写转账信息"/>
|
||||
<a-step title="第二步" description="确认转账信息"/>
|
||||
<a-step title="第三步" description="转账成功"/>
|
||||
</a-steps>
|
||||
<!-- 第一步 -->
|
||||
<a-form
|
||||
v-if="active===0"
|
||||
ref="form1"
|
||||
:model="form1"
|
||||
:rules="rules1"
|
||||
:label-col="{md: {span: 6}, sm: {span: 24}}"
|
||||
:wrapper-col="{md: {span: 16}, sm: {span: 24}}">
|
||||
<a-form-item label="付款账户:" name="account">
|
||||
<a-select
|
||||
v-model:value="form1.account"
|
||||
placeholder="请选择付款账户"
|
||||
allow-clear>
|
||||
<a-select-option value="eleadmin@eclouds.com">eleadmin@eclouds.com</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="收款账户:" name="receiver">
|
||||
<a-input
|
||||
v-model:value="form1.receiver"
|
||||
placeholder="请输入收款账户"
|
||||
allow-clear>
|
||||
<template #addonBefore>
|
||||
<a-select
|
||||
v-model:value="form1.pay"
|
||||
style="width: 100px;margin: -5px -12px;">
|
||||
<a-select-option value="alipay">支付宝</a-select-option>
|
||||
<a-select-option value="wxpay">微信</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="收款人姓名:" name="name">
|
||||
<a-input
|
||||
v-model:value="form1.name"
|
||||
placeholder="请输入收款人姓名"
|
||||
allow-clear/>
|
||||
</a-form-item>
|
||||
<a-form-item label="转账金额:" name="amount">
|
||||
<a-input
|
||||
v-model:value.number="form1.amount"
|
||||
placeholder="请输入转账金额"
|
||||
prefix="￥"
|
||||
allow-clear/>
|
||||
</a-form-item>
|
||||
<a-form-item :wrapper-col="{sm: {offset: 6}}">
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="submit1"
|
||||
:loading="loading1">下一步
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<!-- 第二步 -->
|
||||
<a-form
|
||||
v-if="active===1"
|
||||
ref="form2"
|
||||
:model="form2"
|
||||
:rules="rules2"
|
||||
:label-col="{md: {span: 6}, sm: {span: 24}}"
|
||||
:wrapper-col="{md: {span: 16}, sm: {span: 24}}"
|
||||
class="ele-form-detail">
|
||||
<a-alert
|
||||
message="确认转账后，资金将直接打入对方账户，无法退回。"
|
||||
type="info"
|
||||
show-icon
|
||||
closable/>
|
||||
<a-form-item
|
||||
label="付款账户:"
|
||||
style="margin-top: 24px;">{{ form1.account }}
|
||||
</a-form-item>
|
||||
<a-form-item label="收款账户:">{{ form1.receiver }}</a-form-item>
|
||||
<a-form-item label="收款人姓名:">{{ form1.name }}</a-form-item>
|
||||
<a-form-item label="转账金额:">
|
||||
<span style="font-size: 24px;line-height: 1;">{{ form1.amount }}</span> 元
|
||||
</a-form-item>
|
||||
<a-divider style="margin: 20px 0 30px 0;"/>
|
||||
<a-form-item label="支付密码:" name="password">
|
||||
<a-input-password
|
||||
v-model:value="form2.password"
|
||||
placeholder="请输入支付密码"/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:wrapper-col="{sm: {offset: 6}}"
|
||||
style="margin-top: 24px;">
|
||||
<a-space size="middle">
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="submit2"
|
||||
:loading="loading2">下一步
|
||||
</a-button>
|
||||
<a-button @click="active=0">上一步</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<!-- 第三步 -->
|
||||
<div v-if="active===2">
|
||||
<a-result
|
||||
status="success"
|
||||
title="操作成功"
|
||||
sub-title="预计两小时内到账">
|
||||
<a-form
|
||||
:label-col="{md: {span: 6}, sm: {span: 24}}"
|
||||
:wrapper-col="{md: {span: 16}, sm: {span: 24}}"
|
||||
class="ele-form-detail">
|
||||
<a-form-item label="付款账户:">{{ form1.account }}</a-form-item>
|
||||
<a-form-item label="收款账户:">{{ form1.receiver }}</a-form-item>
|
||||
<a-form-item label="收款人姓名:">{{ form1.name }}</a-form-item>
|
||||
<a-form-item label="转账金额:">
|
||||
<span style="font-size: 24px;line-height: 1;">{{ form1.amount }}</span> 元
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<template #extra>
|
||||
<a-space size="middle">
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="active=0">再转一笔
|
||||
</a-button>
|
||||
<a-button>查看账单</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-result>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="active===0">
|
||||
<a-divider style="margin: 35px 0 25px 0;"/>
|
||||
<a-alert type="info">
|
||||
<template #description>
|
||||
<h6 style="margin: 5px 0 15px 0;">说明</h6>
|
||||
<h6 style="margin-bottom: 10px;">转账到支付宝</h6>
|
||||
<p style="margin-bottom: 15px;">如果需要，这里可以放一些关于产品的常见问题说明。如果需要，
|
||||
这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。</p>
|
||||
<h6 style="margin-bottom: 10px;">转账到微信</h6>
|
||||
<p style="margin-bottom: 15px;">如果需要，这里可以放一些关于产品的常见问题说明。如果需要，
|
||||
这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。</p>
|
||||
</template>
|
||||
</a-alert>
|
||||
</div>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'FormStep',
|
||||
data() {
|
||||
return {
|
||||
// 选中步骤
|
||||
active: 0,
|
||||
// 表单一数据
|
||||
form1: {
|
||||
account: 'eleadmin@eclouds.com',
|
||||
receiver: 'test@example.com',
|
||||
pay: 'alipay',
|
||||
name: 'Alex',
|
||||
amount: 500
|
||||
},
|
||||
// 表单一验证规则
|
||||
rules1: {
|
||||
account: [
|
||||
{required: true, message: '请选择付款账户', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
receiver: [
|
||||
{required: true, message: '请输入收款账户', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
name: [
|
||||
{required: true, message: '请输入收款人姓名', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
amount: [
|
||||
{required: true, message: '请输入合法金额数字', type: 'number', trigger: 'blur'}
|
||||
]
|
||||
},
|
||||
// 步骤一提交状态
|
||||
loading1: false,
|
||||
// 表单二数据
|
||||
form2: {
|
||||
password: '123456',
|
||||
},
|
||||
// 表单二验证规则
|
||||
rules2: {
|
||||
password: [
|
||||
{required: true, message: '请输入支付密码', trigger: 'blur'}
|
||||
]
|
||||
},
|
||||
// 步骤二提交状态
|
||||
loading2: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/* 步骤一提交 */
|
||||
submit1() {
|
||||
this.$refs.form1.validate().then(() => {
|
||||
this.loading1 = true;
|
||||
setTimeout(() => {
|
||||
this.loading1 = false;
|
||||
this.active = 1;
|
||||
}, 300);
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
/* 步骤二提交 */
|
||||
submit2() {
|
||||
this.$refs.form2.validate().then(() => {
|
||||
this.loading2 = true;
|
||||
setTimeout(() => {
|
||||
this.loading2 = false;
|
||||
this.active = 2;
|
||||
}, 300);
|
||||
}).catch(() => {
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
417
src/views/list/advanced.vue
Normal file
417
src/views/list/advanced.vue
Normal file
@@ -0,0 +1,417 @@
|
||||
<template>
|
||||
<div class="ele-body ele-body-card">
|
||||
<a-card :bordered="false">
|
||||
<a-row>
|
||||
<a-col :md="8" :sm="24" :xs="24">
|
||||
<div class="ele-text-center">
|
||||
<div style="margin-bottom: 8px;">进行中的任务</div>
|
||||
<h2>10 个任务</h2>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :md="8" :sm="24" :xs="24">
|
||||
<div class="ele-text-center">
|
||||
<div style="margin-bottom: 8px;">剩余任务</div>
|
||||
<h2>3 个任务</h2>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :md="8" :sm="24" :xs="24">
|
||||
<div class="ele-text-center">
|
||||
<div style="margin-bottom: 8px;">任务总耗时</div>
|
||||
<h2>120 个小时</h2>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
<a-card :bordered="false">
|
||||
<!-- 头部工具栏 -->
|
||||
<div class="ele-table-tool">
|
||||
<h6 class="ele-table-tool-title">复杂列表</h6>
|
||||
<a-space size="middle">
|
||||
<a-radio-group
|
||||
v-model:value="search.state"
|
||||
@change="query">
|
||||
<a-radio-button value="0">全部</a-radio-button>
|
||||
<a-radio-button value="1">进行中</a-radio-button>
|
||||
<a-radio-button value="2">已完成</a-radio-button>
|
||||
</a-radio-group>
|
||||
<a-input-search
|
||||
v-model:value="search.keyword"
|
||||
placeholder="请输入"
|
||||
style="width: 200px"
|
||||
@search="query">
|
||||
<template #enterButton>
|
||||
<a-button>
|
||||
<template #icon>
|
||||
<search-outlined/>
|
||||
</template>
|
||||
</a-button>
|
||||
</template>
|
||||
</a-input-search>
|
||||
</a-space>
|
||||
</div>
|
||||
<a-button
|
||||
block
|
||||
type="dashed"
|
||||
@click="openEdit()">
|
||||
<template #icon>
|
||||
<plus-outlined/>
|
||||
</template>
|
||||
<span>添加</span>
|
||||
</a-button>
|
||||
<!-- 数据列表 -->
|
||||
<a-spin :spinning="loading">
|
||||
<div v-for="(item,index) in data" :key="index">
|
||||
<div class="basic-list-item">
|
||||
<div class="ele-cell">
|
||||
<a-avatar
|
||||
shape="square"
|
||||
:size="60"
|
||||
:src="item.cover"/>
|
||||
<div class="ele-cell-content">
|
||||
<div class="ele-cell-title">{{ item.title }}</div>
|
||||
<div class="ele-cell-desc">{{ item.content }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="basic-list-item-owner">
|
||||
<div>发布人</div>
|
||||
<div class="ele-text-secondary">{{ item.user }}</div>
|
||||
</div>
|
||||
<div class="basic-list-item-time">
|
||||
<div>开始时间</div>
|
||||
<div class="ele-text-secondary">{{ item.time }}</div>
|
||||
</div>
|
||||
<div class="basic-list-item-progress">
|
||||
<a-progress
|
||||
:percent="item.progress"
|
||||
:status="item.status"/>
|
||||
</div>
|
||||
<div class="basic-list-item-tool">
|
||||
<a-space>
|
||||
<a @click="openEdit(item)">编辑</a>
|
||||
<a-divider type="vertical"/>
|
||||
<a-dropdown>
|
||||
<a>
|
||||
<span>更多<down-outlined class="ele-text-small"/></span>
|
||||
</a>
|
||||
<template #overlay>
|
||||
<a-menu @click="(obj) => dropClick(obj.key, item)">
|
||||
<a-menu-item key="share">分享</a-menu-item>
|
||||
<a-menu-item key="remove">删除</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</a-space>
|
||||
</div>
|
||||
</div>
|
||||
<a-divider/>
|
||||
</div>
|
||||
<div class="ele-text-center" style="margin-top: 18px;">
|
||||
<a-pagination
|
||||
v-model:current="page.page"
|
||||
:total="count"
|
||||
show-quick-jumper
|
||||
@change="query"/>
|
||||
</div>
|
||||
</a-spin>
|
||||
</a-card>
|
||||
<!-- 编辑弹窗 -->
|
||||
<a-modal
|
||||
:width="460"
|
||||
v-model:visible="showEdit"
|
||||
:confirm-loading="editLoading"
|
||||
:title="form.id?'任务编辑':'任务添加'"
|
||||
:body-style="{paddingBottom: '8px'}"
|
||||
@ok="save">
|
||||
<a-form
|
||||
ref="editForm"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:label-col="{md: {span: 5}, sm: {span: 24}}"
|
||||
:wrapper-col="{md: {span: 19}, sm: {span: 24}}">
|
||||
<a-form-item label="任务名称:" name="title">
|
||||
<a-input
|
||||
v-model:value="form.title"
|
||||
placeholder="请输入任务名称"
|
||||
allow-clear/>
|
||||
</a-form-item>
|
||||
<a-form-item label="开始时间:" name="time">
|
||||
<a-date-picker
|
||||
v-model:value="form.time"
|
||||
placeholder="请选择开始时间"
|
||||
show-time
|
||||
value-format="YYYY-MM-DD hh:mm:ss"
|
||||
class="ele-fluid"/>
|
||||
</a-form-item>
|
||||
<a-form-item label="负责人:" name="user">
|
||||
<a-select
|
||||
v-model:value="form.user"
|
||||
placeholder="请选择负责人"
|
||||
allow-clear>
|
||||
<a-select-option value="SunSmile">SunSmile</a-select-option>
|
||||
<a-select-option value="Pojin">Pojin</a-select-option>
|
||||
<a-select-option value="SuperWill">SuperWill</a-select-option>
|
||||
<a-select-option value="Jasmine">Jasmine</a-select-option>
|
||||
<a-select-option value="Vast">Vast</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="任务描述:">
|
||||
<a-textarea
|
||||
v-model:value="form.content"
|
||||
placeholder="请输入任务描述"
|
||||
:rows="4"/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {createVNode} from 'vue';
|
||||
import {
|
||||
SearchOutlined,
|
||||
PlusOutlined,
|
||||
DownOutlined,
|
||||
ExclamationCircleOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
|
||||
export default {
|
||||
name: 'ListAdvanced',
|
||||
components: {
|
||||
SearchOutlined,
|
||||
PlusOutlined,
|
||||
DownOutlined
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 列表加载状态
|
||||
loading: false,
|
||||
// 列表数据
|
||||
data: [
|
||||
{
|
||||
id: 1,
|
||||
title: 'ElementUI',
|
||||
time: '2020-06-13 08:33',
|
||||
user: 'SunSmile',
|
||||
progress: 87,
|
||||
content: 'Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。',
|
||||
cover: 'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'Vue.js',
|
||||
time: '2020-06-13 06:40',
|
||||
user: 'Pojin',
|
||||
progress: 100,
|
||||
content: 'Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。',
|
||||
cover: 'https://cdn.eleadmin.com/20200609/b6a811873e704db49db994053a5019b2.jpg'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'Vuex',
|
||||
time: '2020-06-13 04:40',
|
||||
user: 'SuperWill',
|
||||
progress: 75,
|
||||
content: 'Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。',
|
||||
cover: 'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: 'Vue Router',
|
||||
time: '2020-06-13 02:40',
|
||||
user: 'Jasmine',
|
||||
progress: 65,
|
||||
content: 'Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。',
|
||||
cover: 'https://cdn.eleadmin.com/20200609/f6bc05af944a4f738b54128717952107.jpg'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: 'Sass',
|
||||
time: '2020-06-13 00:40',
|
||||
user: 'Vast',
|
||||
progress: 45,
|
||||
status: 'exception',
|
||||
content: 'Sass 是世界上最成熟、稳定、强大的专业级 CSS 扩展语言。',
|
||||
cover: 'https://cdn.eleadmin.com/20200609/2d98970a51b34b6b859339c96b240dcd.jpg'
|
||||
}
|
||||
],
|
||||
// 搜索表单
|
||||
search: {
|
||||
state: '0',
|
||||
keyword: ''
|
||||
},
|
||||
// 分页参数
|
||||
page: {
|
||||
page: 1,
|
||||
limit: 5
|
||||
},
|
||||
// 数据总数
|
||||
count: 100,
|
||||
// 是否显示编辑弹窗
|
||||
showEdit: false,
|
||||
// 编辑弹窗数据
|
||||
form: {},
|
||||
// 编辑弹窗表单验证规则
|
||||
rules: {
|
||||
title: [
|
||||
{required: true, message: '请输入任务名称', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
time: [
|
||||
{required: true, message: '请选择开始时间', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
user: [
|
||||
{required: true, message: '请选择负责人', type: 'string', trigger: 'blur'}
|
||||
]
|
||||
},
|
||||
// 编辑表单提交状态
|
||||
editLoading: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/* 查询数据 */
|
||||
query() {
|
||||
this.loading = true;
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
}, 300);
|
||||
},
|
||||
/* 显示编辑弹窗 */
|
||||
openEdit(row) {
|
||||
if (row) {
|
||||
this.form = Object.assign({}, row);
|
||||
} else {
|
||||
this.form = {};
|
||||
}
|
||||
this.showEdit = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.editForm.clearValidate();
|
||||
});
|
||||
},
|
||||
/* 保存编辑 */
|
||||
save() {
|
||||
this.$refs.editForm.validate().then(() => {
|
||||
this.editLoading = true;
|
||||
setTimeout(() => {
|
||||
this.editLoading = false;
|
||||
this.showEdit = false;
|
||||
this.$message.success('保存成功');
|
||||
if (this.form.id) { // 保存修改
|
||||
Object.assign(this.data.filter(d => d.id === this.form.id)[0], this.form);
|
||||
} else { // 保存添加
|
||||
this.data.push(Object.assign({
|
||||
id: new Date().getTime(),
|
||||
cover: 'https://cdn.eleadmin.com/20200610/RZ8FQmZfHkcffMlTBCJllBFjEhEsObVo.jpg'
|
||||
}, this.form));
|
||||
}
|
||||
}, 300);
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
/* 下拉菜单点击事件 */
|
||||
dropClick(command, item) {
|
||||
console.log(item);
|
||||
if (command === 'remove') { // 删除
|
||||
this.$confirm({
|
||||
title: '提示',
|
||||
content: '确定删除该任务吗?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
this.$message.success('删除成功');
|
||||
}
|
||||
});
|
||||
} else if (command === 'share') {
|
||||
this.$message.success('点击了分享');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/** 列表样式 */
|
||||
.basic-list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16px 8px;
|
||||
}
|
||||
|
||||
.basic-list-item .ele-cell {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.basic-list-item .basic-list-item-owner {
|
||||
width: 80px;
|
||||
padding: 0 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.basic-list-item .basic-list-item-time {
|
||||
width: 160px;
|
||||
padding: 0 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.basic-list-item .ele-text-secondary {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.basic-list-item .basic-list-item-progress {
|
||||
width: 180px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.basic-list-item .basic-list-item-tool {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
/* 响应式 */
|
||||
@media screen and (max-width: 992px) {
|
||||
.basic-list-item .basic-list-item-owner,
|
||||
.basic-list-item .basic-list-item-time,
|
||||
.basic-list-item .basic-list-item-progress,
|
||||
.basic-list-item .basic-list-item-tool {
|
||||
width: auto;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.basic-list-item .basic-list-item-progress {
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.basic-list-item {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.basic-list-item .basic-list-item-owner,
|
||||
.basic-list-item .basic-list-item-time,
|
||||
.basic-list-item .basic-list-item-progress,
|
||||
.basic-list-item .basic-list-item-tool {
|
||||
width: auto;
|
||||
padding: 8px 0 0 0;
|
||||
}
|
||||
|
||||
.basic-list-item .ele-text-secondary {
|
||||
margin-top: 0;
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
.basic-list-item .basic-list-item-owner > div,
|
||||
.basic-list-item .basic-list-item-time > div {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.basic-list-item .basic-list-item-tool {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.ele-table-tool .ant-input-search {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ele-table-tool :deep(.ant-space-item) {
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
335
src/views/list/basic.vue
Normal file
335
src/views/list/basic.vue
Normal file
@@ -0,0 +1,335 @@
|
||||
<template>
|
||||
<div class="ele-body ele-body-card">
|
||||
<a-card :bordered="false" :body-style="{paddingBottom: 0}">
|
||||
<!-- 搜索表单 -->
|
||||
<a-form
|
||||
:model="where"
|
||||
:label-col="{md: {span: 6}, sm: {span: 24}}"
|
||||
:wrapper-col="{md: {span: 18}, sm: {span: 24}}">
|
||||
<a-row>
|
||||
<a-col :lg="8" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="规则名称:">
|
||||
<a-input
|
||||
v-model:value="where.name"
|
||||
placeholder="请输入"
|
||||
allow-clear/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="8" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="状态:">
|
||||
<a-select
|
||||
v-model:value="where.state"
|
||||
placeholder="请选择"
|
||||
allow-clear>
|
||||
<a-select-option value="0">运行中</a-select-option>
|
||||
<a-select-option value="1">已上线</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col v-if="searchExpand" :lg="8" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="描述:">
|
||||
<a-input
|
||||
v-model:value="where.desc"
|
||||
placeholder="请输入"
|
||||
allow-clear/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col v-if="searchExpand" :lg="8" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="上次调度时间:">
|
||||
<a-date-picker
|
||||
v-model:value="where.lastTime"
|
||||
placeholder="请选择"
|
||||
show-time
|
||||
value-format="YYYY-MM-DD hh:mm:ss"
|
||||
class="ele-fluid"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col v-if="searchExpand" :lg="8" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="服务调用次数:">
|
||||
<a-input-number
|
||||
v-model:value="where.callTimes"
|
||||
placeholder="请输入"
|
||||
:min="0"
|
||||
:max="100"
|
||||
class="ele-fluid"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="8" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item
|
||||
class="ele-text-right"
|
||||
:wrapper-col="{span: 24}">
|
||||
<a-space>
|
||||
<a-button type="primary" @click="reload">查询</a-button>
|
||||
<a-button @click="reset">重置</a-button>
|
||||
<a @click="searchExpand = !searchExpand">
|
||||
<span v-if="searchExpand">收起 <up-outlined class="ele-text-small"/></span>
|
||||
<span v-else>展开 <down-outlined class="ele-text-small"/></span>
|
||||
</a>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</a-card>
|
||||
<a-card :bordered="false">
|
||||
<a-alert
|
||||
type="info"
|
||||
show-icon
|
||||
style="margin-bottom: 16px;">
|
||||
<template #message>
|
||||
<span>已选择 <b class="ele-text-primary">{{ choose.length }}</b> 项<em/></span>
|
||||
<span>服务调用次数总计 <b>{{ sumTimes }} 万</b><em/><em/></span>
|
||||
<a @click="clearChoose">清空</a>
|
||||
</template>
|
||||
</a-alert>
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
ref="table"
|
||||
row-key="id"
|
||||
title="基础列表"
|
||||
:datasource="url"
|
||||
:columns="columns"
|
||||
:where="where"
|
||||
:custom-row="customRow"
|
||||
v-model:selection="choose"
|
||||
:scroll="{x: 'max-content'}">
|
||||
<template #toolkit>
|
||||
<a-space size="middle">
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="openEdit()"
|
||||
class="ele-btn-icon">
|
||||
<template #icon>
|
||||
<plus-outlined/>
|
||||
</template>
|
||||
<span>新建</span>
|
||||
</a-button>
|
||||
<a-dropdown :disabled="choose.length===0">
|
||||
<a-button class="ele-btn-icon">
|
||||
<span>批量操作 <down-outlined/></span>
|
||||
</a-button>
|
||||
<template #overlay>
|
||||
<a-menu @click="onDropClick">
|
||||
<a-menu-item key="del">批量删除</a-menu-item>
|
||||
<a-menu-item key="check">批量审批</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
<a-divider type="vertical"/>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #action="{ record }">
|
||||
<a-space>
|
||||
<a @click.stop="openEdit(record)">配置</a>
|
||||
<a-divider type="vertical"/>
|
||||
<a @click.stop="doRSS(record)">订阅警报</a>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #state="{ record }">
|
||||
<a-badge
|
||||
:status="['processing', 'success', 'error', 'default'][record.state]"
|
||||
:text="['运行中', '已上线', '异常', '关闭'][record.state]"/>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-card>
|
||||
<!-- 编辑弹窗 -->
|
||||
<a-modal
|
||||
v-model:visible="showEdit"
|
||||
:title="form.id?'配置规则':'新建规则'"
|
||||
:width="520"
|
||||
:confirm-loading="loading"
|
||||
:body-style="{paddingBottom: '16px'}"
|
||||
@ok="save">
|
||||
<a-form
|
||||
ref="form"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:label-col="{md: {span: 5}, sm: {span: 24}}"
|
||||
:wrapper-col="{md: {span: 19}, sm: {span: 24}}">
|
||||
<a-form-item label="规则名称:" name="name">
|
||||
<a-input
|
||||
v-model:value="form.name"
|
||||
placeholder="请输入规则名称"
|
||||
allow-clear/>
|
||||
</a-form-item>
|
||||
<a-form-item label="描述:">
|
||||
<a-textarea
|
||||
v-model:value="form.desc"
|
||||
placeholder="请输入描述"
|
||||
:rows="4"/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
DownOutlined,
|
||||
UpOutlined,
|
||||
PlusOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
|
||||
export default {
|
||||
name: 'ListBasic',
|
||||
components: {
|
||||
DownOutlined,
|
||||
UpOutlined,
|
||||
PlusOutlined
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 数据接口
|
||||
url: 'https://cdn.eleadmin.com/20200610/list-demo-basic.json',
|
||||
// 表格列配置
|
||||
columns: [
|
||||
{
|
||||
key: 'index',
|
||||
customRender: ({index}) => `${this.$refs.table.tableIndex + index}`
|
||||
},
|
||||
{
|
||||
title: '规则名称',
|
||||
dataIndex: 'name',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '描述',
|
||||
dataIndex: 'desc',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '服务调用次数',
|
||||
dataIndex: 'callTimes',
|
||||
customRender: ({text}) => `${text} 万`,
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'state',
|
||||
sorter: true,
|
||||
slots: {customRender: 'state'},
|
||||
filters: [
|
||||
{
|
||||
text: '运行中',
|
||||
value: '0'
|
||||
},
|
||||
{
|
||||
text: '已上线',
|
||||
value: '1'
|
||||
},
|
||||
{
|
||||
text: '异常',
|
||||
value: '2'
|
||||
},
|
||||
{
|
||||
text: '关闭',
|
||||
value: '3'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '上次调度时间',
|
||||
dataIndex: 'lastTime',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
align: 'center',
|
||||
slots: {customRender: 'action'}
|
||||
}
|
||||
],
|
||||
// 表格选中数据
|
||||
choose: [],
|
||||
// 表格搜索条件
|
||||
where: {},
|
||||
// 编辑弹窗数据
|
||||
form: {},
|
||||
// 编辑弹窗表单验证规则
|
||||
rules: {
|
||||
name: [
|
||||
{required: true, message: '请输入规则名称', type: 'string', trigger: 'blur'}
|
||||
]
|
||||
},
|
||||
// 是否显示编辑弹窗
|
||||
showEdit: false,
|
||||
// 编辑表单提交状态
|
||||
loading: false,
|
||||
// 搜索表单是否展开
|
||||
searchExpand: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 计算服务总调用次数
|
||||
sumTimes() {
|
||||
let sum = 0;
|
||||
this.choose.forEach(d => sum += d.callTimes);
|
||||
return sum;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/* 设置行属性 */
|
||||
customRow(record) {
|
||||
return {
|
||||
onClick: () => {
|
||||
const index = this.choose.findIndex(d => d.id === record.id);
|
||||
if (index === -1) {
|
||||
this.choose = this.choose.concat([record]);
|
||||
} else {
|
||||
this.choose = this.choose.slice(0, index).concat(this.choose.slice(index + 1));
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
/* 刷新表格 */
|
||||
reload() {
|
||||
this.$refs.table.reload({page: 1, where: this.where});
|
||||
},
|
||||
/* 重置搜索 */
|
||||
reset() {
|
||||
this.where = {};
|
||||
this.reload();
|
||||
},
|
||||
/* 清空选择 */
|
||||
clearChoose() {
|
||||
this.choose = [];
|
||||
},
|
||||
/* 保存编辑 */
|
||||
save() {
|
||||
this.$refs.form.validate().then(() => {
|
||||
this.loading = true;
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
this.showEdit = false;
|
||||
this.$message.success('保存成功');
|
||||
}, 300);
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
/* 编辑 */
|
||||
openEdit(row) {
|
||||
this.form = Object.assign({}, row);
|
||||
this.showEdit = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.form.clearValidate();
|
||||
});
|
||||
},
|
||||
/* 订阅 */
|
||||
doRSS(row) {
|
||||
console.log(row);
|
||||
this.$message.success('订阅成功');
|
||||
},
|
||||
/* 下拉按钮点击 */
|
||||
onDropClick(obj) {
|
||||
if (obj.key === 'del') {
|
||||
this.$message.info('点击了批量删除');
|
||||
} else if (obj.key === 'check') {
|
||||
this.$message.info('点击了批量审批');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
120
src/views/list/card/application.vue
Normal file
120
src/views/list/card/application.vue
Normal file
@@ -0,0 +1,120 @@
|
||||
<template>
|
||||
<a-row :gutter="16">
|
||||
<a-col
|
||||
v-for="(item, index) in data"
|
||||
:key="index"
|
||||
:lg="6"
|
||||
:md="8"
|
||||
:sm="12"
|
||||
:xs="12">
|
||||
<a-card
|
||||
:bordered="false"
|
||||
hoverable
|
||||
style="margin-top: 16px;">
|
||||
<div class="ele-cell" style="margin-bottom: 16px;">
|
||||
<a-avatar size="large" :src="item.cover"/>
|
||||
<h6 class="ele-cell-content">{{ item.title }}</h6>
|
||||
</div>
|
||||
<div class="ele-elip" style="margin-bottom: 6px;">网址：{{ item.url }}</div>
|
||||
<div class="ele-elip">最后更新时间：{{ item.time }}</div>
|
||||
<template #actions>
|
||||
<a-tooltip title="下载">
|
||||
<download-outlined/>
|
||||
</a-tooltip>
|
||||
<a-tooltip title="编辑">
|
||||
<edit-outlined/>
|
||||
</a-tooltip>
|
||||
<a-tooltip title="分享">
|
||||
<share-alt-outlined/>
|
||||
</a-tooltip>
|
||||
<a-dropdown>
|
||||
<ellipsis-outlined/>
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item>1st menu item</a-menu-item>
|
||||
<a-menu-item>2nd menu item</a-menu-item>
|
||||
<a-menu-item>3rd menu item</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</template>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
DownloadOutlined,
|
||||
EditOutlined,
|
||||
ShareAltOutlined,
|
||||
EllipsisOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
|
||||
export default {
|
||||
name: 'ListCardApplication',
|
||||
components: {
|
||||
DownloadOutlined,
|
||||
EditOutlined,
|
||||
ShareAltOutlined,
|
||||
EllipsisOutlined
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
data: [
|
||||
{
|
||||
title: 'ElementUI',
|
||||
url: 'https://element.eleme.cn',
|
||||
time: '2 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg'
|
||||
},
|
||||
{
|
||||
title: 'Vue.js',
|
||||
url: 'https://cn.vuejs.org',
|
||||
time: '4 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200609/b6a811873e704db49db994053a5019b2.jpg'
|
||||
},
|
||||
{
|
||||
title: 'Vuex',
|
||||
url: 'https://vuex.vuejs.org',
|
||||
time: '12 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg'
|
||||
},
|
||||
{
|
||||
title: 'Vue Router',
|
||||
url: 'https://vuex.vuejs.org',
|
||||
time: '14 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200609/f6bc05af944a4f738b54128717952107.jpg'
|
||||
},
|
||||
{
|
||||
title: 'Sass',
|
||||
url: 'https://www.sass.hk',
|
||||
time: '10 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200609/2d98970a51b34b6b859339c96b240dcd.jpg'
|
||||
},
|
||||
{
|
||||
title: 'Axios',
|
||||
url: 'http://www.axios-js.com',
|
||||
time: '16 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200609/faa0202700ee455b90fe77d8bef98bc0.jpg'
|
||||
},
|
||||
{
|
||||
title: 'Webpack',
|
||||
url: 'https://www.webpackjs.com',
|
||||
time: '6 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200609/d3519518b00d42d3936b2ab5ce3a4cc3.jpg'
|
||||
},
|
||||
{
|
||||
title: 'Node.js',
|
||||
url: 'http://nodejs.cn',
|
||||
time: '8 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200609/fe9196dd091e438fba115205c1003ee7.jpg'
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
234
src/views/list/card/article.vue
Normal file
234
src/views/list/card/article.vue
Normal file
@@ -0,0 +1,234 @@
|
||||
<template>
|
||||
<a-card :bordered="false" style="margin-top: 16px;">
|
||||
<a-image-preview-group>
|
||||
<a-list
|
||||
:data-source="data"
|
||||
:loading="loading&&page===1"
|
||||
item-layout="vertical"
|
||||
size="large">
|
||||
<template #renderItem="{item,index}">
|
||||
<a-list-item :key="index">
|
||||
<a-list-item-meta :title="item.title">
|
||||
<template #description>
|
||||
<a-tag v-for="(tag,i) in item.tags" :key="i">
|
||||
{{ tag }}
|
||||
</a-tag>
|
||||
</template>
|
||||
</a-list-item-meta>
|
||||
<div class="ele-text-heading">
|
||||
{{ item.content }}
|
||||
</div>
|
||||
<div class="ele-cell" style="margin-top: 16px;">
|
||||
<a-avatar :src="item.avatar" size="small"/>
|
||||
<div class="ele-cell-content">
|
||||
{{ item.user }} 发表于 {{ item.time }}
|
||||
</div>
|
||||
</div>
|
||||
<template #extra>
|
||||
<a-image
|
||||
:width="280"
|
||||
:src="item.cover"
|
||||
style="max-width: 100%;cursor: zoom-in;"/>
|
||||
</template>
|
||||
<template #actions>
|
||||
<span>
|
||||
<like-outlined/>
|
||||
<span><s/>{{ item.likes }}</span>
|
||||
</span>
|
||||
<span>
|
||||
<star-outlined/>
|
||||
<span><s/>{{ item.favorites }}</span>
|
||||
</span>
|
||||
<span>
|
||||
<message-outlined/>
|
||||
<span><s/>{{ item.comments }}</span>
|
||||
</span>
|
||||
</template>
|
||||
</a-list-item>
|
||||
</template>
|
||||
<template #loadMore>
|
||||
<div class="ele-text-center" style="margin-top: 20px;">
|
||||
<a-button
|
||||
v-if="page!==1"
|
||||
:loading="loading"
|
||||
@click="query">
|
||||
{{ loading ? '加载中..' : '加载更多' }}
|
||||
</a-button>
|
||||
</div>
|
||||
</template>
|
||||
</a-list>
|
||||
</a-image-preview-group>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
LikeOutlined,
|
||||
StarOutlined,
|
||||
MessageOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
|
||||
export default {
|
||||
name: 'ListCardArticle',
|
||||
components: {
|
||||
LikeOutlined,
|
||||
StarOutlined,
|
||||
MessageOutlined
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
data: [
|
||||
{
|
||||
title: 'ElementUI',
|
||||
content: 'Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。',
|
||||
time: '2 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200610/RZ8FQmZfHkcffMlTBCJllBFjEhEsObVo.jpg',
|
||||
tags: ['EleAdminPro', 'UI框架', '设计语言'],
|
||||
user: 'SunSmile',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg',
|
||||
favorites: 104,
|
||||
likes: 189,
|
||||
comments: 15
|
||||
},
|
||||
{
|
||||
title: 'Vue.js',
|
||||
content: 'Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。',
|
||||
time: '4 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200610/WLXm7gp1EbLDtvVQgkeQeyq5OtDm00Jd.jpg',
|
||||
tags: ['EleAdminPro', 'UI框架', '设计语言'],
|
||||
user: '你的名字很好听',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/b6a811873e704db49db994053a5019b2.jpg',
|
||||
favorites: 104,
|
||||
likes: 189,
|
||||
comments: 15
|
||||
},
|
||||
{
|
||||
title: 'Vuex',
|
||||
content: 'Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。',
|
||||
time: '12 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200610/4Z0QR2L0J1XStxBh99jVJ8qLfsGsOgjU.jpg',
|
||||
tags: ['EleAdminPro', 'UI框架', '设计语言'],
|
||||
user: '全村人的希望',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg',
|
||||
favorites: 104,
|
||||
likes: 189,
|
||||
comments: 15
|
||||
},
|
||||
{
|
||||
title: 'Vue Router',
|
||||
content: 'Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。',
|
||||
time: '14 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200610/ttkIjNPlVDuv4lUTvRX8GIlM2QqSe0jg.jpg',
|
||||
tags: ['EleAdminPro', 'UI框架', '设计语言'],
|
||||
user: 'Jasmine',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/f6bc05af944a4f738b54128717952107.jpg',
|
||||
favorites: 104,
|
||||
likes: 189,
|
||||
comments: 15
|
||||
},
|
||||
{
|
||||
title: 'Sass',
|
||||
content: 'Sass 是世界上最成熟、稳定、强大的专业级 CSS 扩展语言。',
|
||||
time: '10 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200610/fAenQ8nvRjL7x0i0jEfuDBZHvJfHf3v6.jpg',
|
||||
tags: ['EleAdminPro', 'UI框架', '设计语言'],
|
||||
user: '酷酷的大叔',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/2d98970a51b34b6b859339c96b240dcd.jpg',
|
||||
favorites: 104,
|
||||
likes: 189,
|
||||
comments: 15
|
||||
},
|
||||
{
|
||||
title: 'Axios',
|
||||
content: 'Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。',
|
||||
time: '16 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200610/LrCTN2j94lo9N7wEql7cBr1Ux4rHMvmZ.jpg',
|
||||
tags: ['EleAdminPro', 'UI框架', '设计语言'],
|
||||
user: 'SunSmile',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg',
|
||||
favorites: 104,
|
||||
likes: 189,
|
||||
comments: 15
|
||||
},
|
||||
{
|
||||
title: 'Webpack',
|
||||
content: 'webpack 是一个模块打包器。webpack 的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用。',
|
||||
time: '6 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200610/yeKvhT20lMU0f1T3Y743UlGEOLLnZSnp.jpg',
|
||||
tags: ['EleAdminPro', 'UI框架', '设计语言'],
|
||||
user: '全村人的希望',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg',
|
||||
favorites: 104,
|
||||
likes: 189,
|
||||
comments: 15
|
||||
},
|
||||
{
|
||||
title: 'Node.js',
|
||||
content: 'Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。',
|
||||
time: '8 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200610/CyrCNmTJfv7D6GFAg39bjT3eRkkRm5dI.jpg',
|
||||
tags: ['EleAdminPro', 'UI框架', '设计语言'],
|
||||
user: 'Jasmine',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/f6bc05af944a4f738b54128717952107.jpg',
|
||||
favorites: 104,
|
||||
likes: 189,
|
||||
comments: 15
|
||||
}
|
||||
],
|
||||
loading: false,
|
||||
page: 2
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
previewList() {
|
||||
return this.data.map(item => item.cover);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
//this.query();
|
||||
},
|
||||
methods: {
|
||||
query() {
|
||||
this.loading = true;
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
this.page++;
|
||||
this.data = this.data.concat([
|
||||
{
|
||||
title: 'ElementUI',
|
||||
content: 'Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。',
|
||||
time: '2 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200610/RZ8FQmZfHkcffMlTBCJllBFjEhEsObVo.jpg',
|
||||
tags: ['EleAdminPro', 'UI框架', '设计语言'],
|
||||
user: 'SunSmile',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg',
|
||||
favorites: 104,
|
||||
likes: 189,
|
||||
comments: 15
|
||||
},
|
||||
{
|
||||
title: 'Vue.js',
|
||||
content: 'Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。',
|
||||
time: '4 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200610/WLXm7gp1EbLDtvVQgkeQeyq5OtDm00Jd.jpg',
|
||||
tags: ['EleAdminPro', 'UI框架', '设计语言'],
|
||||
user: '你的名字很好听',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/b6a811873e704db49db994053a5019b2.jpg',
|
||||
favorites: 104,
|
||||
likes: 189,
|
||||
comments: 15
|
||||
}
|
||||
]);
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@media screen and (max-width: 768px) {
|
||||
.ant-list-item :deep(.ant-list-item-extra .ant-image) {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
66
src/views/list/card/index.vue
Normal file
66
src/views/list/card/index.vue
Normal file
@@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<div class="ele-body">
|
||||
<a-card
|
||||
:bordered="false"
|
||||
:body-style="{padding: '0 24px'}">
|
||||
<h5 style="padding: 16px 0 24px 0;">卡片列表</h5>
|
||||
<div class="ele-text-center">
|
||||
<a-input-search
|
||||
v-model:value="keyword"
|
||||
placeholder="请输入内容"
|
||||
enter-button
|
||||
style="max-width: 500px;"
|
||||
size="large"/>
|
||||
</div>
|
||||
<a-tabs
|
||||
class="list-card-tabs"
|
||||
:active-key="active"
|
||||
@tabClick="onTabChange">
|
||||
<a-tab-pane key="/list/card/project" tab="项目"/>
|
||||
<a-tab-pane key="/list/card/application" tab="应用"/>
|
||||
<a-tab-pane key="/list/card/article" tab="文章"/>
|
||||
</a-tabs>
|
||||
</a-card>
|
||||
<ele-empty-layout/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import EleEmptyLayout from 'ele-admin-pro/packages/ele-empty-layout';
|
||||
|
||||
export default {
|
||||
name: 'ListCard',
|
||||
components: {EleEmptyLayout},
|
||||
data() {
|
||||
return {
|
||||
keyword: ''
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
active() {
|
||||
return this.$route.path;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/* 切换tab */
|
||||
onTabChange(key) {
|
||||
this.$router.push(key);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.list-card-tabs {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.list-card-tabs :deep(.ant-tabs-bar) {
|
||||
margin-bottom: 0;
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
|
||||
.list-card-tabs :deep(.ant-tabs-tab) {
|
||||
padding: 12px 4px;
|
||||
}
|
||||
</style>
|
||||
228
src/views/list/card/project.vue
Normal file
228
src/views/list/card/project.vue
Normal file
@@ -0,0 +1,228 @@
|
||||
<template>
|
||||
<a-row :gutter="16">
|
||||
<a-col
|
||||
v-for="(item, index) in data"
|
||||
:key="index"
|
||||
:lg="6"
|
||||
:md="8"
|
||||
:sm="12"
|
||||
:xs="12">
|
||||
<a-card
|
||||
:bordered="false"
|
||||
hoverable
|
||||
style="margin-top: 16px;">
|
||||
<template #cover>
|
||||
<img :src="item.cover" alt=""/>
|
||||
</template>
|
||||
<a-card-meta :title="item.title">
|
||||
<template #description>
|
||||
<div class="project-list-desc">
|
||||
{{ item.content }}
|
||||
</div>
|
||||
</template>
|
||||
</a-card-meta>
|
||||
<div class="ele-cell">
|
||||
<div class="ele-cell-content ele-text-secondary">
|
||||
{{ item.time }}
|
||||
</div>
|
||||
<ele-avatar-list :data="item.users" size="small"/>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ListCardProject',
|
||||
data() {
|
||||
return {
|
||||
// 分页参数
|
||||
page: {
|
||||
page: 1,
|
||||
limit: 8
|
||||
},
|
||||
// 数据总数
|
||||
count: 40,
|
||||
data: [
|
||||
{
|
||||
title: 'ElementUI',
|
||||
content: 'Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。',
|
||||
time: '2 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200610/RZ8FQmZfHkcffMlTBCJllBFjEhEsObVo.jpg',
|
||||
users: [
|
||||
{
|
||||
name: 'SunSmile',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg'
|
||||
},
|
||||
{
|
||||
name: '酷酷的大叔',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/2d98970a51b34b6b859339c96b240dcd.jpg'
|
||||
},
|
||||
{
|
||||
name: 'Jasmine',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Vue.js',
|
||||
content: 'Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。',
|
||||
time: '4 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200610/WLXm7gp1EbLDtvVQgkeQeyq5OtDm00Jd.jpg',
|
||||
users: [
|
||||
{
|
||||
name: 'SunSmile',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg'
|
||||
},
|
||||
{
|
||||
name: '酷酷的大叔',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/2d98970a51b34b6b859339c96b240dcd.jpg'
|
||||
},
|
||||
{
|
||||
name: 'Jasmine',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Vuex',
|
||||
content: 'Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。',
|
||||
time: '12 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200610/4Z0QR2L0J1XStxBh99jVJ8qLfsGsOgjU.jpg',
|
||||
users: [
|
||||
{
|
||||
name: 'SunSmile',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg'
|
||||
},
|
||||
{
|
||||
name: '酷酷的大叔',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/2d98970a51b34b6b859339c96b240dcd.jpg'
|
||||
},
|
||||
{
|
||||
name: 'Jasmine',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Vue Router',
|
||||
content: 'Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。',
|
||||
time: '14 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200610/ttkIjNPlVDuv4lUTvRX8GIlM2QqSe0jg.jpg',
|
||||
users: [
|
||||
{
|
||||
name: 'SunSmile',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg'
|
||||
},
|
||||
{
|
||||
name: '酷酷的大叔',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/2d98970a51b34b6b859339c96b240dcd.jpg'
|
||||
},
|
||||
{
|
||||
name: 'Jasmine',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Sass',
|
||||
content: 'Sass 是世界上最成熟、稳定、强大的专业级 CSS 扩展语言。',
|
||||
time: '10 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200610/fAenQ8nvRjL7x0i0jEfuDBZHvJfHf3v6.jpg',
|
||||
users: [
|
||||
{
|
||||
name: 'SunSmile',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg'
|
||||
},
|
||||
{
|
||||
name: '酷酷的大叔',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/2d98970a51b34b6b859339c96b240dcd.jpg'
|
||||
},
|
||||
{
|
||||
name: 'Jasmine',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Axios',
|
||||
content: 'Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。',
|
||||
time: '16 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200610/LrCTN2j94lo9N7wEql7cBr1Ux4rHMvmZ.jpg',
|
||||
users: [
|
||||
{
|
||||
name: 'SunSmile',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg'
|
||||
},
|
||||
{
|
||||
name: '酷酷的大叔',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/2d98970a51b34b6b859339c96b240dcd.jpg'
|
||||
},
|
||||
{
|
||||
name: 'Jasmine',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Webpack',
|
||||
content: 'webpack 是一个模块打包器。webpack 的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用。',
|
||||
time: '6 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200610/yeKvhT20lMU0f1T3Y743UlGEOLLnZSnp.jpg',
|
||||
users: [
|
||||
{
|
||||
name: 'SunSmile',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg'
|
||||
},
|
||||
{
|
||||
name: '酷酷的大叔',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/2d98970a51b34b6b859339c96b240dcd.jpg'
|
||||
},
|
||||
{
|
||||
name: 'Jasmine',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Node.js',
|
||||
content: 'Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。',
|
||||
time: '8 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200610/CyrCNmTJfv7D6GFAg39bjT3eRkkRm5dI.jpg',
|
||||
users: [
|
||||
{
|
||||
name: 'SunSmile',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg'
|
||||
},
|
||||
{
|
||||
name: '酷酷的大叔',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/2d98970a51b34b6b859339c96b240dcd.jpg'
|
||||
},
|
||||
{
|
||||
name: 'Jasmine',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
query() {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.project-list-desc {
|
||||
height: 44px;
|
||||
line-height: 22px;
|
||||
margin-bottom: 20px;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
</style>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user