commit
60465ef40e
169 changed files with 44427 additions and 0 deletions
@ -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 |
|||
@ -0,0 +1,3 @@ |
|||
VUE_APP_VERSION=3.0 |
|||
VUE_APP_NAME=Bmz Admin |
|||
VUE_APP_API_BASE_URL=http://api.base.ahbmz.com/api |
|||
@ -0,0 +1 @@ |
|||
VUE_APP_API_BASE_URL=http://api.base.ahbmz.com/api |
|||
@ -0,0 +1,2 @@ |
|||
NODE_ENV=production |
|||
VUE_APP_API_BASE_URL=https://v1.eleadmin.com/api |
|||
@ -0,0 +1,4 @@ |
|||
public |
|||
src/assets |
|||
dist |
|||
node_modules |
|||
@ -0,0 +1,16 @@ |
|||
module.exports = { |
|||
root: true, |
|||
env: { |
|||
node: true, |
|||
}, |
|||
extends: [ |
|||
"plugin:vue/essential", |
|||
'eslint:recommended' |
|||
], |
|||
parserOptions: { |
|||
parser: 'babel-eslint' |
|||
}, |
|||
rules: { |
|||
//"no-unused-vars": "off"
|
|||
} |
|||
} |
|||
@ -0,0 +1,21 @@ |
|||
.DS_Store |
|||
node_modules |
|||
/dist |
|||
|
|||
# local env files |
|||
.env.local |
|||
.env.*.local |
|||
|
|||
# Log files |
|||
npm-debug.log* |
|||
yarn-debug.log* |
|||
yarn-error.log* |
|||
|
|||
# Editor directories and files |
|||
.idea |
|||
.vscode |
|||
*.suo |
|||
*.ntvs* |
|||
*.njsproj |
|||
*.sln |
|||
*.sw? |
|||
@ -0,0 +1,5 @@ |
|||
module.exports = { |
|||
presets: [ |
|||
'@vue/cli-plugin-babel/preset' |
|||
] |
|||
} |
|||
Binary file not shown.
@ -0,0 +1,14 @@ |
|||
{ |
|||
"compilerOptions": { |
|||
"baseUrl": "./", |
|||
"paths": { |
|||
"@/*": [ |
|||
"src/*" |
|||
] |
|||
} |
|||
}, |
|||
"exclude": [ |
|||
"node_modules", |
|||
"dist" |
|||
] |
|||
} |
|||
File diff suppressed because it is too large
@ -0,0 +1,56 @@ |
|||
{ |
|||
"name": "ele-admin-template", |
|||
"version": "1.2.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": "^0.0.7", |
|||
"@riophae/vue-treeselect": "^0.4.0", |
|||
"@tinymce/tinymce-vue": "^3.2.8", |
|||
"axios": "^0.21.1", |
|||
"core-js": "^3.8.3", |
|||
"countup.js": "^2.0.7", |
|||
"cropperjs": "^1.5.9", |
|||
"echarts": "^4.9.0", |
|||
"echarts-wordcloud": "^1.1.3", |
|||
"ele-admin": "^1.2.0", |
|||
"element-ui": "^2.15.0", |
|||
"nprogress": "^0.2.0", |
|||
"tinymce": "^5.7.0", |
|||
"vue": "^2.6.12", |
|||
"vue-axios": "^2.1.5", |
|||
"vue-clipboard2": "^0.3.1", |
|||
"vue-countup-v2": "^4.0.0", |
|||
"vue-qr": "^2.3.0", |
|||
"vue-router": "^3.5.1", |
|||
"vuedraggable": "^2.24.3", |
|||
"vuex": "^3.6.2", |
|||
"xgplayer-vue": "^1.1.5", |
|||
"xlsx": "^0.16.9" |
|||
}, |
|||
"devDependencies": { |
|||
"@vue/cli-plugin-babel": "^4.5.11", |
|||
"@vue/cli-plugin-eslint": "^4.5.11", |
|||
"@vue/cli-plugin-router": "^4.5.11", |
|||
"@vue/cli-plugin-vuex": "^4.5.11", |
|||
"@vue/cli-service": "^4.5.11", |
|||
"babel-eslint": "^10.1.0", |
|||
"compression-webpack-plugin": "^6.1.1", |
|||
"eslint": "^6.8.0", |
|||
"eslint-plugin-vue": "^7.6.0", |
|||
"sass": "^1.3.0", |
|||
"sass-loader": "^10.1.1", |
|||
"vue-template-compiler": "^2.6.12" |
|||
}, |
|||
"browserslist": [ |
|||
"> 1%", |
|||
"last 2 versions", |
|||
"not dead" |
|||
] |
|||
} |
|||
|
After Width: | Height: | Size: 4.2 KiB |
@ -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:#409eff;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> |
|||
@ -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" |
|||
}); |
|||
@ -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; |
|||
} |
|||
@ -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} |
|||
@ -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; |
|||
} |
|||
@ -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} |
|||
@ -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; |
|||
} |
|||
@ -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} |
|||
@ -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; |
|||
} |
|||
@ -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} |
|||
@ -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; |
|||
} |
|||
@ -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: '-'; |
|||
} |
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -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; |
|||
} |
|||
@ -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} |
|||
Binary file not shown.
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
@ -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%; |
|||
} |
|||
} |
|||
File diff suppressed because one or more lines are too long
@ -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; |
|||
} |
|||
@ -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: '-'; |
|||
} |
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -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; |
|||
} |
|||
@ -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} |
|||
Binary file not shown.
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
@ -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%; |
|||
} |
|||
} |
|||
File diff suppressed because one or more lines are too long
@ -0,0 +1,5 @@ |
|||
<template> |
|||
<div id="app"> |
|||
<router-view/> |
|||
</div> |
|||
</template> |
|||
|
After Width: | Height: | Size: 383 KiB |
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 30 KiB |
|
After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
@ -0,0 +1,259 @@ |
|||
<!-- tinymce富文本编辑器组件 license by http://eleadmin.com --> |
|||
<template> |
|||
<editor |
|||
:init="config" |
|||
:disabled="disabled" |
|||
:value="value" |
|||
@input="updateValue"/> |
|||
</template> |
|||
|
|||
<script> |
|||
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 defaultConfig = { |
|||
height: 300, |
|||
branding: false, |
|||
skin_url: '/tinymce/skins/ui/oxide', |
|||
content_css: '/tinymce/skins/content/default/content.min.css', |
|||
language_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(' '), |
|||
toolbar_drawer: 'sliding', |
|||
images_upload_handler: (blobInfo, success) => { |
|||
success('data:image/jpeg;base64,' + blobInfo.base64()); |
|||
}, |
|||
file_picker_types: 'media', |
|||
file_picker_callback: () => { |
|||
} |
|||
}; |
|||
|
|||
export default { |
|||
name: 'TinymceEditor', |
|||
components: {Editor}, |
|||
model: { |
|||
prop: 'value', |
|||
event: 'change' |
|||
}, |
|||
props: { |
|||
// 值 |
|||
value: String, |
|||
// 编辑器配置 |
|||
init: Object, |
|||
// 是否禁用 |
|||
disabled: Boolean, |
|||
// 自动跟随框架暗黑主题 |
|||
autoTheme: { |
|||
type: Boolean, |
|||
default: true |
|||
} |
|||
}, |
|||
data() { |
|||
let theme; |
|||
if (this.autoTheme) { |
|||
const darkMode = this.$store.state.theme.darkMode; |
|||
theme = { |
|||
skin_url: darkMode ? '/tinymce/skins/ui/oxide-dark' : '/tinymce/skins/ui/oxide', |
|||
content_css: darkMode ? '/tinymce/skins/content/dark/content.min.css' : '/tinymce/skins/content/default/content.min.css' |
|||
} |
|||
} |
|||
let config = Object.assign({}, defaultConfig, this.init, theme); |
|||
return { |
|||
// 编辑器配置 |
|||
config: config |
|||
}; |
|||
}, |
|||
computed: { |
|||
// 是否是暗黑模式 |
|||
darkMode() { |
|||
try { |
|||
return this.$store.state.theme.darkMode; |
|||
} catch (e) { |
|||
return null; |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
tinymce.init({}); |
|||
}, |
|||
methods: { |
|||
/* 更新value */ |
|||
updateValue(value) { |
|||
this.$emit('change', value); |
|||
}, |
|||
/* 切换编辑器主题 */ |
|||
changeTheme(darkMode) { |
|||
document.head.querySelectorAll('[id^="mce-"]').forEach(elem => { |
|||
let href = elem.getAttribute('href'); |
|||
if (href.indexOf('/oxide-dark/') !== -1) { |
|||
if (!darkMode) { |
|||
href = href.replace('/oxide-dark/', '/oxide/'); |
|||
elem.setAttribute('href', href); |
|||
} |
|||
} else { |
|||
if (darkMode) { |
|||
href = href.replace('/oxide/', '/oxide-dark/'); |
|||
elem.setAttribute('href', href); |
|||
} |
|||
} |
|||
}); |
|||
this.changeContentTheme(darkMode); |
|||
}, |
|||
/* 切换编辑器内容区的主题 */ |
|||
changeContentTheme(darkMode) { |
|||
document.body.querySelectorAll('iframe[id^="tiny-vue_"]').forEach(frame => { |
|||
const win = frame.contentWindow; |
|||
if (win) { |
|||
const doc = win.document; |
|||
if (doc) { |
|||
doc.head.querySelectorAll('[id^="mce-"]').forEach(elem => { |
|||
let href = elem.getAttribute('href'); |
|||
if (href.indexOf('/skins/ui/') !== -1) { |
|||
if (href.indexOf('/oxide-dark/') !== -1) { |
|||
if (!darkMode) { |
|||
href = href.replace('/oxide-dark/', '/oxide/'); |
|||
elem.setAttribute('href', href); |
|||
} |
|||
} else { |
|||
if (darkMode) { |
|||
href = href.replace('/oxide/', '/oxide-dark/'); |
|||
elem.setAttribute('href', href); |
|||
} |
|||
} |
|||
} else if (href.indexOf('/skins/content/') !== -1) { |
|||
if (href.indexOf('/dark/') !== -1) { |
|||
if (!darkMode) { |
|||
href = href.replace('/dark/', '/default/'); |
|||
elem.setAttribute('href', href); |
|||
} |
|||
} else { |
|||
if (darkMode) { |
|||
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> |
|||
@ -0,0 +1,79 @@ |
|||
/** |
|||
* axios配置 |
|||
*/ |
|||
import Vue from 'vue'; |
|||
import VueAxios from 'vue-axios'; |
|||
import axios from 'axios'; |
|||
import store from '../store'; |
|||
import router from '../router'; |
|||
import setting from './setting'; |
|||
import {MessageBox} from 'element-ui'; |
|||
|
|||
Vue.use(VueAxios, axios); |
|||
|
|||
// 设置统一的url
|
|||
axios.defaults.baseURL = process.env.VUE_APP_API_BASE_URL; |
|||
|
|||
/* 请求拦截器 */ |
|||
axios.interceptors.request.use((config) => { |
|||
// 添加token到header
|
|||
let token = setting.takeToken(); |
|||
if (token) { |
|||
config.headers[setting.tokenHeaderName] = token; |
|||
} |
|||
return config; |
|||
}, function (error) { |
|||
return Promise.reject(error); |
|||
}); |
|||
|
|||
/* 响应拦截器 */ |
|||
axios.interceptors.response.use((res) => { |
|||
// 登录过期处理
|
|||
if (res.data.code === 40512) { |
|||
if (res.config.url === setting.menuUrl) { |
|||
goLogin(); |
|||
} else { |
|||
MessageBox.alert('登录状态已过期, 请退出重新登录!', '系统提示', { |
|||
confirmButtonText: '重新登录', |
|||
callback: (action) => { |
|||
if (action === 'confirm') { |
|||
goLogin(); |
|||
} |
|||
}, |
|||
beforeClose: () => { |
|||
MessageBox.close(); |
|||
} |
|||
}); |
|||
} |
|||
return Promise.reject(new Error(res.data.msg)); |
|||
} |
|||
// token自动续期
|
|||
let access_token = res.headers[setting.tokenHeaderName]; |
|||
if (access_token) { |
|||
setting.cacheToken(access_token); |
|||
} |
|||
return res; |
|||
}, (error) => { |
|||
return Promise.reject(error); |
|||
}); |
|||
|
|||
/** |
|||
* 跳转到登录页面 |
|||
*/ |
|||
function goLogin() { |
|||
store.dispatch('user/removeToken').then(() => { |
|||
const current = router.currentRoute; |
|||
if (current && current.path && current.path !== '/') { |
|||
router.push({ |
|||
path: '/login', |
|||
query: { |
|||
form: current.path |
|||
} |
|||
}).then(() => { |
|||
}); |
|||
} else { |
|||
router.push('/login').then(() => { |
|||
}); |
|||
} |
|||
}); |
|||
} |
|||
@ -0,0 +1,134 @@ |
|||
/** |
|||
* 项目统一配置 |
|||
*/ |
|||
export default { |
|||
// 路由白名单(不需要登录的)
|
|||
whiteList: ['/login', '/forget'], |
|||
// 不显示全局页脚的路由地址
|
|||
hideFooters: ['/system/dictionary', '/system/organization'], |
|||
// 需要缓存的组件名称
|
|||
keepAliveList: [], |
|||
// 菜单数据接口
|
|||
menuUrl: '/manager/permissMenu', |
|||
// 自定义解析接口菜单数据
|
|||
parseMenu: null, |
|||
// 自定义解析接口菜单每一个数据格式
|
|||
parseMenuItem: (item) => { |
|||
if (!item) { |
|||
return; |
|||
} |
|||
item.menuId = item.id; |
|||
item.title = item.name; |
|||
item.parentId = item.parent_id; |
|||
item.menuType = item.menu_type; |
|||
return item; |
|||
}, |
|||
// 直接指定菜单数据
|
|||
menus: null, |
|||
// 用户信息接口
|
|||
userUrl: '/manager/readPersional', |
|||
uploadImageUrl:'http://api.static.ahbmz.com/api/upload', |
|||
// 自定义解析接口用户信息
|
|||
parseUser(res) { |
|||
// 这里code和msg字段如果不一样可在这里修改
|
|||
let result = {code: res.code, msg: res.msg}; |
|||
if (res.data) { |
|||
// 这里只需要姓名和头像两个字段，如需缓存其它字段可在这里添加
|
|||
result.data = { |
|||
nickname: res.data.truename, |
|||
avatar: res.data.avatar |
|||
}; |
|||
// 下面是获取角色和权限列表，需要string数组类型
|
|||
if (res.data.roles) { |
|||
result.data.roles = res.data.roles.map(d => d.role_code); |
|||
} |
|||
if (res.data.authorities) { |
|||
result.data.authorities = res.data.authorities.map(d => d.authority); |
|||
} |
|||
} |
|||
return result; |
|||
}, |
|||
// token传递的header名称
|
|||
tokenHeaderName: 'Token', |
|||
// token存储的名称
|
|||
tokenStoreName: 'access_token', |
|||
// 获取缓存的token
|
|||
takeToken() { |
|||
let token = localStorage.getItem(this.tokenStoreName); |
|||
if (!token) { |
|||
token = sessionStorage.getItem(this.tokenStoreName); |
|||
} |
|||
return token; |
|||
}, |
|||
// 缓存token
|
|||
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); |
|||
} |
|||
} |
|||
}, |
|||
// 用户信息存储的名称
|
|||
userStoreName: 'user', |
|||
// 获取缓存的用户信息
|
|||
takeUser() { |
|||
try { |
|||
return JSON.parse(localStorage.getItem(this.userStoreName)) || {}; |
|||
} catch (e) { |
|||
console.error(e); |
|||
} |
|||
return {}; |
|||
}, |
|||
// 缓存用户信息
|
|||
cacheUser(user) { |
|||
if (user) { |
|||
localStorage.setItem(this.userStoreName, JSON.stringify(user)); |
|||
} else { |
|||
localStorage.removeItem(this.userStoreName); |
|||
} |
|||
}, |
|||
// 主题配置存储的名称
|
|||
themeStoreName: 'theme', |
|||
// 首页tab显示标题, null会根据菜单自动获取
|
|||
homeTitle: '主页', |
|||
// 首页路径, null会自动获取
|
|||
homePath: null, |
|||
// 顶栏是否显示主题设置按钮
|
|||
showSetting: true, |
|||
// 侧边栏风格: 0亮色, 1暗色
|
|||
sideStyle: 0, |
|||
// 顶栏风格: 0亮色, 1暗色, 2主色
|
|||
headStyle: 2, |
|||
// 标签页风格: 0默认, 1圆点, 2卡片
|
|||
tabStyle: 0, |
|||
// 布局风格: 0默认, 1顶部菜单风格, 2混合菜单风格
|
|||
layoutStyle: 0, |
|||
// 是否固定侧栏
|
|||
fixedSidebar: true, |
|||
// 是否固定顶栏
|
|||
fixedHeader: false, |
|||
// 是否固定主体
|
|||
fixedBody: true, |
|||
// logo是否自适应宽度
|
|||
logoAutoSize: true, |
|||
// 内容区域宽度是否铺满
|
|||
bodyFull: true, |
|||
// 是否开启多标签
|
|||
showTabs: true, |
|||
// 侧栏是否多彩图标
|
|||
colorfulIcon: true, |
|||
// 侧边栏是否只保持一个子菜单展开
|
|||
sideUniqueOpen: true, |
|||
// 是否开启页脚
|
|||
showFooter: true, |
|||
// 是否是色弱模式
|
|||
weakMode: false, |
|||
// 是否是暗黑模式
|
|||
darkMode: false, |
|||
// 默认主题色
|
|||
color: null |
|||
} |
|||
@ -0,0 +1,33 @@ |
|||
<!-- 页脚 --> |
|||
<template> |
|||
<div class="ele-text-center" style="padding: 16px 0;"> |
|||
<div> |
|||
<a |
|||
class="ele-text-secondary" |
|||
href="https://eleadmin.com" |
|||
target="_blank">官网 |
|||
</a> |
|||
<em/> |
|||
<a |
|||
class="ele-text-secondary" |
|||
href="https://eleadmin.com/doc/eleadmin/" |
|||
target="_blank">文档 |
|||
</a> |
|||
<em/> |
|||
<a |
|||
class="ele-text-secondary" |
|||
href="https://eleadmin.com/goods/8" |
|||
target="_blank">授权 |
|||
</a> |
|||
</div> |
|||
<div class="ele-text-secondary" style="margin-top: 8px;"> |
|||
Copyright © 2021 武汉易云智科技有限公司 |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'EleFooter' |
|||
} |
|||
</script> |
|||
@ -0,0 +1,111 @@ |
|||
<!-- 顶栏右侧区域按钮 --> |
|||
<template> |
|||
<div class="ele-admin-header-tool"> |
|||
<div |
|||
class="ele-admin-header-tool-item" |
|||
@click="toggleFullscreen"> |
|||
<i :class="isFullscreen?'el-icon-_screen-restore':'el-icon-_screen-full'"></i> |
|||
</div> |
|||
<!-- 消息通知 --> |
|||
<div class="ele-admin-header-tool-item"> |
|||
<ele-notice/> |
|||
</div> |
|||
<!-- 用户信息 --> |
|||
<div class="ele-admin-header-tool-item"> |
|||
<el-dropdown @command="onUserDropClick"> |
|||
<div class="ele-admin-header-avatar"> |
|||
<el-avatar :src="loginUser.avatar"/> |
|||
<span>{{ loginUser.nickname }}</span> |
|||
<i class="el-icon-arrow-down"></i> |
|||
</div> |
|||
<el-dropdown-menu slot="dropdown"> |
|||
<el-dropdown-item |
|||
command="user" |
|||
icon="el-icon-user">个人中心 |
|||
</el-dropdown-item> |
|||
<el-dropdown-item |
|||
command="password" |
|||
icon="el-icon-key">修改密码 |
|||
</el-dropdown-item> |
|||
<el-dropdown-item |
|||
command="logout" |
|||
icon="el-icon-switch-button" |
|||
divided>退出登录 |
|||
</el-dropdown-item> |
|||
</el-dropdown-menu> |
|||
</el-dropdown> |
|||
</div> |
|||
<!-- 主题设置 --> |
|||
<div |
|||
class="ele-admin-header-tool-item" |
|||
v-if="showSetting" |
|||
@click="openSetting"> |
|||
<i class="el-icon-_more"></i> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import EleNotice from './notice'; |
|||
|
|||
export default { |
|||
name: 'EleHeaderRight', |
|||
components: {EleNotice}, |
|||
props: { |
|||
// 是否显示打开设置抽屉按钮 |
|||
showSetting: { |
|||
type: Boolean, |
|||
default: true |
|||
} |
|||
}, |
|||
computed: { |
|||
// 当前登录用户信息 |
|||
loginUser() { |
|||
return this.$store.state.user.user; |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
// 是否全屏状态 |
|||
isFullscreen: false |
|||
}; |
|||
}, |
|||
methods: { |
|||
/* 个人信息下拉菜单点击 */ |
|||
onUserDropClick(command) { |
|||
if (command === 'user') { |
|||
if (this.$route.fullPath !== '/user/info') { |
|||
this.$router.push('/user/info'); |
|||
} |
|||
} else if (command === 'password') { |
|||
this.$emit('item-click', 'password'); |
|||
} else if (command === 'logout') { |
|||
// 退出登录 |
|||
this.$confirm( |
|||
'确定要退出登录吗?', |
|||
'提示', |
|||
{type: 'warning'} |
|||
).then(() => { |
|||
// 清除缓存的token |
|||
this.$store.dispatch('user/setToken').then(() => { |
|||
location.replace('/'); |
|||
}); |
|||
}).catch(() => { |
|||
}); |
|||
} |
|||
}, |
|||
/* 打开设置抽屉 */ |
|||
openSetting() { |
|||
this.$emit('item-click', 'setting'); |
|||
}, |
|||
/* 全屏切换 */ |
|||
toggleFullscreen() { |
|||
try { |
|||
this.isFullscreen = this.$util.toggleFullscreen(); |
|||
} catch (e) { |
|||
this.$message.error('您的浏览器不支持全屏模式'); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,189 @@ |
|||
<template> |
|||
<ele-pro-layout |
|||
:collapse="theme.collapse" |
|||
:fixed-header="theme.fixedHeader" |
|||
:fixed-sidebar="theme.fixedSidebar" |
|||
:fixed-body="theme.fixedBody" |
|||
:layout-style="theme.layoutStyle" |
|||
:head-style="theme.headStyle" |
|||
:side-style="theme.sideStyle" |
|||
:logo-auto-size="theme.logoAutoSize" |
|||
:colorful-icon="theme.colorfulIcon" |
|||
:side-unique-open="theme.sideUniqueOpen" |
|||
:show-tabs="theme.showTabs" |
|||
:tab-style="theme.tabStyle" |
|||
:body-full="theme.bodyFull" |
|||
:keep-alive-list="keepAliveList" |
|||
:home-title="homeTitle" |
|||
:project-name="projectName" |
|||
:tabs="user.tabs" |
|||
:menus="user.menus" |
|||
:need-setting="needSetting" |
|||
:show-setting.sync="showSetting" |
|||
:color="theme.color" |
|||
:dark-mode="theme.darkMode" |
|||
:weak-mode="theme.weakMode" |
|||
:show-content="showContent" |
|||
@update-collapse="updateCollapse" |
|||
@update-screen="updateScreen" |
|||
@tab-add="tabAdd" |
|||
@tab-remove="tabRemove" |
|||
@tab-remove-left="tabRemoveLeft" |
|||
@tab-remove-right="tabRemoveRight" |
|||
@tab-remove-other="tabRemoveOther" |
|||
@tab-remove-all="tabRemoveAll" |
|||
@change-color="changeColor" |
|||
@change-style="changeStyle"> |
|||
<!-- logo图标 --> |
|||
<template slot="logo"> |
|||
<img src="@/assets/logo.svg" alt="logo"/> |
|||
</template> |
|||
<!-- 顶栏右侧区域 --> |
|||
<template slot="right"> |
|||
<ele-header-right |
|||
:show-setting="needSetting" |
|||
@item-click="onItemClick"/> |
|||
</template> |
|||
<!-- 修改密码弹窗 --> |
|||
<ele-password :visible.sync="showPassword"/> |
|||
</ele-pro-layout> |
|||
</template> |
|||
|
|||
<script> |
|||
import {mapGetters} from 'vuex'; |
|||
import setting from '@/config/setting'; |
|||
import EleHeaderRight from './header-right'; |
|||
import ElePassword from './password'; |
|||
|
|||
export default { |
|||
name: 'EleLayout', |
|||
components: { |
|||
EleHeaderRight, |
|||
ElePassword |
|||
}, |
|||
computed: { |
|||
// 主页标题 |
|||
homeTitle() { |
|||
return setting.homeTitle; |
|||
}, |
|||
// 需要缓存的组件 |
|||
keepAliveList() { |
|||
return setting.keepAliveList; |
|||
}, |
|||
// 是否需要主题设置按钮 |
|||
needSetting() { |
|||
return setting.showSetting; |
|||
}, |
|||
...mapGetters(['theme', 'user']) |
|||
}, |
|||
data() { |
|||
return { |
|||
// 项目名 |
|||
projectName: process.env.VUE_APP_NAME, |
|||
// 是否显示修改密码弹窗 |
|||
showPassword: false, |
|||
// 是否显示主题设置抽屉 |
|||
showSetting: false, |
|||
// 是否显示主体部分, 如果你的首页用到了权限控制指令, 把这个改成false, 避免权限控制指令可能不生效 |
|||
showContent: true |
|||
}; |
|||
}, |
|||
mounted() { |
|||
// 获取用户信息 |
|||
this.getUserInfo(); |
|||
}, |
|||
methods: { |
|||
/* 获取当前用户信息 */ |
|||
getUserInfo() { |
|||
if (setting.userUrl) { |
|||
this.$http.get(setting.userUrl).then(res => { |
|||
let result; |
|||
if (setting.parseUser) { |
|||
result = setting.parseUser(res.data); |
|||
} else { |
|||
result = res.data; |
|||
} |
|||
if (res.data.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 { |
|||
this.$message.error(res.data.msg); |
|||
} |
|||
// 在用户权限信息请求完成后再渲染主体部分, 以免权限控制指令不生效 |
|||
this.showContent = true; |
|||
}).catch(e => { |
|||
this.showContent = true; |
|||
this.$message.error(e.message); |
|||
}); |
|||
} |
|||
}, |
|||
/* 顶栏右侧点击 */ |
|||
onItemClick(key) { |
|||
if (key === 'password') { |
|||
this.showPassword = true; |
|||
} else if (key === 'setting') { |
|||
this.showSetting = true; |
|||
} |
|||
}, |
|||
/* 更新collapse */ |
|||
updateCollapse(value) { |
|||
this.$store.dispatch('theme/set', { |
|||
key: 'collapse', |
|||
value: value |
|||
}); |
|||
}, |
|||
/* 更新屏幕尺寸 */ |
|||
updateScreen() { |
|||
this.$store.dispatch('theme/updateScreen'); |
|||
}, |
|||
/* 切换主题色 */ |
|||
changeColor(value) { |
|||
const loading = this.$loading({ |
|||
lock: true, |
|||
background: 'transparent' |
|||
}); |
|||
this.$store.dispatch('theme/setColor', value).then(() => { |
|||
loading.close(); |
|||
}).catch(e => { |
|||
loading.close(); |
|||
console.error(e); |
|||
this.$message.error('主题加载失败'); |
|||
}); |
|||
}, |
|||
/* 切换主题风格 */ |
|||
changeStyle(value) { |
|||
this.$store.dispatch('theme/set', value); |
|||
}, |
|||
/* 添加tab */ |
|||
tabAdd(value) { |
|||
this.$store.dispatch('user/tabAdd', value); |
|||
}, |
|||
/* 移除tab */ |
|||
tabRemove(obj) { |
|||
this.$store.dispatch('user/tabRemove', obj.name).then(last => { |
|||
if (obj.active === obj.name) { |
|||
this.$router.push(last === -1 ? '/' : this.user.tabs[last].path); |
|||
} |
|||
}); |
|||
}, |
|||
/* 移除左边tab */ |
|||
tabRemoveLeft(value) { |
|||
this.$store.dispatch('user/tabRemoveLeft', value); |
|||
}, |
|||
/* 移除右边tab */ |
|||
tabRemoveRight(value) { |
|||
this.$store.dispatch('user/tabRemoveRight', value); |
|||
}, |
|||
/* 移除其它tab */ |
|||
tabRemoveOther(value) { |
|||
this.$store.dispatch('user/tabRemoveOther', value); |
|||
}, |
|||
/* 移除全部tab */ |
|||
tabRemoveAll() { |
|||
this.$store.dispatch('user/tabRemoveAll'); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,300 @@ |
|||
<!-- 顶栏消息图标 --> |
|||
<template> |
|||
<el-popover |
|||
width="300" |
|||
v-model="visible" |
|||
trigger="click" |
|||
popper-class="ele-notice-pop" |
|||
transition="el-zoom-in-top" |
|||
class="ele-notice-group"> |
|||
<div |
|||
class="ele-notice-group" |
|||
slot="reference"> |
|||
<el-badge |
|||
:value="allNum" |
|||
:hidden="!allNum"> |
|||
<i class="el-icon-bell"></i> |
|||
</el-badge> |
|||
</div> |
|||
<el-tabs |
|||
v-model="active" |
|||
class="user-info-tabs"> |
|||
<el-tab-pane |
|||
:label="noticeLabel" |
|||
name="notice"> |
|||
<div class="ele-notice-list ele-scrollbar-mini"> |
|||
<div |
|||
v-for="(item,index) in notice" |
|||
:key="index" |
|||
class="ele-notice-item"> |
|||
<div class="ele-cell ele-notice-item-wrapper"> |
|||
<i :class="[item.icon,'ele-notice-item-icon']"></i> |
|||
<div class="ele-cell-content"> |
|||
<div class="ele-elip">{{ item.title }}</div> |
|||
<div class="ele-text-secondary ele-elip">{{ item.pub_time }}</div> |
|||
</div> |
|||
</div> |
|||
<el-divider/> |
|||
</div> |
|||
</div> |
|||
<div |
|||
v-if="notice.length" |
|||
class="ele-cell ele-notice-actions"> |
|||
<!-- <div--> |
|||
<!-- @click="clear(1)"--> |
|||
<!-- class="ele-cell-content">清空通知--> |
|||
<!-- </div>--> |
|||
<el-divider |
|||
direction="vertical" |
|||
class="line-color-light"/> |
|||
<div |
|||
@click="more(1)" |
|||
class="ele-cell-content">查看更多 |
|||
</div> |
|||
</div> |
|||
<ele-empty |
|||
v-if="!notice.length" |
|||
text="你已查看所有通知"/> |
|||
</el-tab-pane> |
|||
<el-tab-pane |
|||
:label="messageLabel" |
|||
name="message"> |
|||
<div class="ele-notice-list ele-scrollbar-mini"> |
|||
<div |
|||
v-for="(item,index) in message" |
|||
:key="index" |
|||
class="ele-notice-item"> |
|||
<div class="ele-cell ele-notice-item-wrapper ele-cell-align-top"> |
|||
<el-avatar |
|||
:src="item.avatar_str" |
|||
size="medium"/> |
|||
<div class="ele-cell-content"> |
|||
<div class="ele-elip">{{ item.title }}</div> |
|||
<div class="ele-text-secondary ele-elip">{{ item.content }}</div> |
|||
<div class="ele-cell-desc ele-elip">{{ item.pub_time }}</div> |
|||
</div> |
|||
</div> |
|||
<el-divider/> |
|||
</div> |
|||
</div> |
|||
<div |
|||
v-if="message.length" |
|||
class="ele-cell ele-notice-actions"> |
|||
<!-- <div--> |
|||
<!-- @click="clear(2)"--> |
|||
<!-- class="ele-cell-content">清空消息--> |
|||
<!-- </div>--> |
|||
<el-divider |
|||
direction="vertical" |
|||
class="line-color-light"/> |
|||
<div |
|||
@click="more(2)" |
|||
class="ele-cell-content">查看更多 |
|||
</div> |
|||
</div> |
|||
<ele-empty |
|||
v-if="!message.length" |
|||
text="你已读完所有私信"/> |
|||
</el-tab-pane> |
|||
</el-tabs> |
|||
</el-popover> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'EleNotice', |
|||
data() { |
|||
return { |
|||
visible: false, |
|||
active: 'notice', |
|||
notice: [ |
|||
|
|||
], |
|||
notice_count:0, |
|||
message: [ |
|||
|
|||
], |
|||
message_count:0, |
|||
}; |
|||
}, |
|||
|
|||
computed: { |
|||
|
|||
|
|||
// 通知标题 |
|||
noticeLabel() { |
|||
if (this.notice_count) { |
|||
return `通知(${this.notice_count})`; |
|||
} |
|||
return '通知'; |
|||
}, |
|||
// 私信标题 |
|||
messageLabel() { |
|||
if (this.message_count) { |
|||
return `私信(${this.message_count})`; |
|||
} |
|||
return '私信'; |
|||
}, |
|||
|
|||
// 所有消息数量 |
|||
allNum() { |
|||
return this.notice_count + this.message_count ; |
|||
} |
|||
}, |
|||
|
|||
mounted() { |
|||
// 获取用户信息 |
|||
this.getMessage(); |
|||
|
|||
setInterval(this.setM,60000) |
|||
}, |
|||
|
|||
methods: { |
|||
setM(){ |
|||
this.setMessage(); |
|||
this.getMessage(); |
|||
}, |
|||
getMessage(){ |
|||
this.$http.get('/manager/getMessage?type=99').then(res => { |
|||
if (res.data.code === 0) { |
|||
this.message = res.data.data.sx.list; |
|||
this.notice = res.data.data.gg.list; |
|||
this.message_count = res.data.data.sx.count; |
|||
this.notice_count = res.data.data.gg.count; |
|||
} |
|||
}) |
|||
}, |
|||
setMessage(){ |
|||
this.$http.get('/manager/setMessage?type=99').then(res => { |
|||
if (res.data.code === 0) { |
|||
this.message = res.data.data.sx.list; |
|||
this.notice = res.data.data.gg.list; |
|||
this.message_count = res.data.data.sx.count; |
|||
this.notice_count = res.data.data.gg.count; |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
/* 清空消息 */ |
|||
clear(type) { |
|||
if (type === 1) { |
|||
this.notice = []; |
|||
} else if (type === 2) { |
|||
this.message = []; |
|||
} |
|||
}, |
|||
/* 查看更多 */ |
|||
more(type) { |
|||
console.log(type); |
|||
if (this.$route.path !== '/user/message') { |
|||
this.$router.push('/user/message'); |
|||
} |
|||
this.show = false; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.ele-notice-group { |
|||
vertical-align: top !important; |
|||
display: inline-block; |
|||
|
|||
.el-badge { |
|||
line-height: normal; |
|||
} |
|||
} |
|||
|
|||
/* 消息通知pop */ |
|||
.ele-notice-pop { |
|||
margin: 0 !important; |
|||
padding: 0 !important; |
|||
|
|||
/* tab */ |
|||
.el-tabs__nav-scroll { |
|||
text-align: center; |
|||
} |
|||
|
|||
.el-tabs__nav { |
|||
float: none; |
|||
display: inline-block; |
|||
} |
|||
|
|||
.el-tabs__item { |
|||
padding: 0 20px; |
|||
} |
|||
|
|||
/* 空视图 */ |
|||
.ele-empty { |
|||
padding: 100px 0; |
|||
} |
|||
} |
|||
|
|||
/* 列表 */ |
|||
.ele-notice-list { |
|||
padding-top: 8px; |
|||
max-height: 360px; |
|||
overflow: auto; |
|||
} |
|||
|
|||
.ele-notice-item { |
|||
.ele-notice-item-wrapper { |
|||
padding: 12px 15px; |
|||
transition: background-color .2s; |
|||
cursor: pointer; |
|||
|
|||
&:hover { |
|||
background-color: hsla(0, 0%, 60%, .05); |
|||
} |
|||
} |
|||
|
|||
.ele-text-secondary { |
|||
margin-top: 5px; |
|||
font-size: 13px; |
|||
} |
|||
|
|||
.ele-cell-desc { |
|||
margin-top: 3px !important; |
|||
font-size: 12px !important; |
|||
} |
|||
} |
|||
|
|||
.ele-notice-item-icon { |
|||
width: 32px; |
|||
height: 32px; |
|||
line-height: 32px !important; |
|||
color: #FFF; |
|||
font-size: 16px; |
|||
background-color: #60B2FC; |
|||
border-radius: 50%; |
|||
text-align: center; |
|||
|
|||
|
|||
&.el-icon-s-check { |
|||
background-color: #F5686F; |
|||
} |
|||
|
|||
&.el-icon-video-camera { |
|||
background-color: #7CD734; |
|||
} |
|||
|
|||
&.el-icon-s-claim { |
|||
background-color: #FAAD14; |
|||
} |
|||
|
|||
&.el-icon-message-solid { |
|||
background-color: #2BCACD; |
|||
} |
|||
} |
|||
|
|||
/* 操作按钮 */ |
|||
.ele-notice-actions > .ele-cell-content { |
|||
line-height: 42px; |
|||
text-align: center; |
|||
cursor: pointer; |
|||
|
|||
&:hover { |
|||
background-color: hsla(0, 0%, 60%, .05); |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,136 @@ |
|||
<!-- 修改密码弹窗 --> |
|||
<template> |
|||
<el-dialog |
|||
:visible="visible" |
|||
title="修改密码" |
|||
width="400px" |
|||
@closed="onClose" |
|||
@update:visible="updateVisible" |
|||
:append-to-body="true" |
|||
:lock-scroll="false"> |
|||
<el-form |
|||
ref="form" |
|||
:model="form" |
|||
:rules="rules" |
|||
label-width="82px" |
|||
@keyup.enter.native="save"> |
|||
<el-form-item |
|||
label="旧密码:" |
|||
prop="old"> |
|||
<el-input |
|||
v-model="form.old" |
|||
placeholder="请输入旧密码" |
|||
show-password/> |
|||
</el-form-item> |
|||
<el-form-item |
|||
label="新密码:" |
|||
prop="password"> |
|||
<el-input |
|||
v-model="form.password" |
|||
placeholder="请输入新密码" |
|||
show-password/> |
|||
</el-form-item> |
|||
<el-form-item |
|||
label="确认密码:" |
|||
prop="password2"> |
|||
<el-input |
|||
v-model="form.password2" |
|||
placeholder="请再次输入新密码" |
|||
show-password/> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div slot="footer"> |
|||
<el-button |
|||
@click="cancel">取消 |
|||
</el-button> |
|||
<el-button |
|||
type="primary" |
|||
@click="save">确定 |
|||
</el-button> |
|||
</div> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'ElePassword', |
|||
props: { |
|||
visible: Boolean |
|||
}, |
|||
data() { |
|||
let rePswRule = (rule, value, callback) => { |
|||
if (!value) { |
|||
callback(new Error('请再次输入新密码')); |
|||
} else if (value !== this.form.password) { |
|||
callback(new Error('两次输入密码不一致')); |
|||
} else { |
|||
callback(); |
|||
} |
|||
}; |
|||
return { |
|||
// 表单数据 |
|||
form: { |
|||
old: '', |
|||
password: '', |
|||
password2: '' |
|||
}, |
|||
// 表单验证 |
|||
rules: { |
|||
old: [ |
|||
{required: true, message: '请输入旧密码', trigger: 'blur'} |
|||
], |
|||
password: [ |
|||
{required: true, message: '请输入新密码', trigger: 'blur'} |
|||
], |
|||
password2: [ |
|||
{validator: rePswRule, trigger: 'blur'} |
|||
] |
|||
}, |
|||
// 按钮loading |
|||
loading: false |
|||
}; |
|||
}, |
|||
methods: { |
|||
/* 保存修改 */ |
|||
save() { |
|||
this.$refs['form'].validate((valid) => { |
|||
if (valid) { |
|||
this.loading = true; |
|||
let formData = new FormData(); |
|||
formData.append('old_password', this.form.old); |
|||
formData.append('password', this.form.password); |
|||
formData.append('password2', this.form.password2); |
|||
this.$http.post('/manager/passwordEdit', formData).then(res => { |
|||
this.loading = false; |
|||
if (res.data.code === 0) { |
|||
this.$message({type: 'success', message: res.data.msg}); |
|||
this.cancel(); |
|||
} else { |
|||
this.$message.error(res.data.msg); |
|||
} |
|||
}).catch(e => { |
|||
this.loading = false; |
|||
this.$message.error(e.message); |
|||
}); |
|||
} else { |
|||
return false; |
|||
} |
|||
}); |
|||
}, |
|||
/* 取消 */ |
|||
cancel() { |
|||
this.updateVisible(false); |
|||
}, |
|||
/* 关闭回调 */ |
|||
onClose() { |
|||
this.form = {}; |
|||
this.$refs['form'].resetFields(); |
|||
this.loading = false; |
|||
}, |
|||
/* 修改visible */ |
|||
updateVisible(value) { |
|||
this.$emit('update:visible', value); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,23 @@ |
|||
/** 主入口js */ |
|||
import Vue from 'vue'; |
|||
import App from './App.vue'; |
|||
import router from './router'; |
|||
import store from './store'; |
|||
import setting from './config/setting'; |
|||
import permission from '@/utils/permission'; |
|||
import VueClipboard from 'vue-clipboard2'; |
|||
import './config/axios-config'; |
|||
import EleAdmin from 'ele-admin'; |
|||
import './styles/index.scss'; |
|||
|
|||
Vue.config.productionTip = false; |
|||
Vue.prototype.$setting = setting; |
|||
Vue.use(EleAdmin, {size: 'medium'}); |
|||
Vue.use(permission); |
|||
Vue.use(VueClipboard); |
|||
|
|||
new Vue({ |
|||
router, |
|||
store, |
|||
render: h => h(App) |
|||
}).$mount('#app'); |
|||
@ -0,0 +1,145 @@ |
|||
/** |
|||
* 路由配置 |
|||
*/ |
|||
import Vue from 'vue'; |
|||
import VueRouter from 'vue-router'; |
|||
import store from '@/store'; |
|||
import setting from '@/config/setting'; |
|||
import EleLayout from '@/layout'; |
|||
import {EleEmptyLayout, EleIframeLayout} from 'ele-admin'; |
|||
import NProgress from 'nprogress'; |
|||
|
|||
Vue.use(VueRouter); |
|||
|
|||
// 静态路由
|
|||
const routes = [ |
|||
{ |
|||
path: '/login', |
|||
component: () => import('@/views/login/login'), |
|||
meta: {title: '登录'} |
|||
}, |
|||
{ |
|||
path: '/forget', |
|||
component: () => import('@/views/login/forget'), |
|||
meta: {title: '忘记密码'} |
|||
}, |
|||
{ |
|||
path: '*', |
|||
component: () => import('@/views/exception/404'), |
|||
meta: {title: ''} |
|||
} |
|||
]; |
|||
|
|||
const router = new VueRouter({ |
|||
routes, |
|||
mode: 'history' // 把这个删掉就是hash模式
|
|||
}); |
|||
|
|||
// 路由守卫
|
|||
router.beforeEach((to, from, next) => { |
|||
NProgress.start(); |
|||
updateTitle(to); |
|||
// 判断是否登录
|
|||
if (setting.takeToken()) { |
|||
// 判断是否已经注册动态路由
|
|||
if (!store.state.user.menus) { |
|||
// 获取动态路由
|
|||
store.dispatch('user/getMenus').then(({menus, home}) => { |
|||
if (menus) { |
|||
router.addRoute({ |
|||
name: '/', |
|||
path: '/', |
|||
component: EleLayout, |
|||
redirect: setting.homePath || home, |
|||
children: menuToRoutes(menus) |
|||
}); |
|||
} |
|||
next({...to, replace: true}); |
|||
}).catch(() => { |
|||
next(); |
|||
}); |
|||
} else { |
|||
next(); |
|||
} |
|||
} else if (setting.whiteList.indexOf(to.path) !== -1) { |
|||
next(); // 在无需登录的白名单内
|
|||
} else { |
|||
// 未登录跳转登录页面
|
|||
next({path: '/login', query: to.path === '/' ? {} : {from: to.path}}); |
|||
} |
|||
}); |
|||
|
|||
router.afterEach(() => { |
|||
setTimeout(() => { |
|||
NProgress.done(true); |
|||
}, 300); |
|||
}); |
|||
|
|||
export default router; |
|||
|
|||
/** |
|||
* 菜单生成路由 |
|||
* @param menus |
|||
* @returns {[]} |
|||
*/ |
|||
function menuToRoutes(menus) { |
|||
if (!menus) { |
|||
return null; |
|||
} |
|||
let routes = []; |
|||
menus.forEach(item => { |
|||
const path = item.path; |
|||
if (path && !isUrl(path)) { |
|||
let meta = Object.assign({}, item.meta); |
|||
let component; |
|||
if (item.component) { |
|||
if (isUrl(item.component)) { |
|||
component = EleIframeLayout; |
|||
meta.iframe = item.component; |
|||
meta.hideFooter = true; |
|||
} else { |
|||
component = () => import('@/views' + item.component); |
|||
} |
|||
} else { |
|||
component = EleEmptyLayout; |
|||
} |
|||
routes.push({ |
|||
meta: meta, |
|||
name: item.path, |
|||
path: item.path, |
|||
component: component, |
|||
redirect: item.redirect, |
|||
children: menuToRoutes(item.children) |
|||
}); |
|||
} |
|||
}); |
|||
return routes; |
|||
} |
|||
|
|||
/** |
|||
* 判断是否是网址 |
|||
* @param url |
|||
*/ |
|||
function isUrl(url) { |
|||
return url && ( |
|||
url.startsWith('http://') || |
|||
url.startsWith('https://') || |
|||
url.startsWith('//') |
|||
); |
|||
} |
|||
|
|||
/** |
|||
* 更新浏览器标题 |
|||
* @param route |
|||
*/ |
|||
function updateTitle(route) { |
|||
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(' - '); |
|||
} |
|||
@ -0,0 +1,4 @@ |
|||
export default { |
|||
theme: state => state.theme, |
|||
user: state => state.user |
|||
} |
|||
@ -0,0 +1,21 @@ |
|||
/** |
|||
* vuex状态管理 |
|||
*/ |
|||
import Vue from 'vue'; |
|||
import Vuex from 'vuex'; |
|||
import getters from './getters'; |
|||
import theme from './modules/theme'; |
|||
import user from './modules/user'; |
|||
|
|||
Vue.use(Vuex); |
|||
|
|||
export default new Vuex.Store({ |
|||
state: {}, |
|||
mutations: {}, |
|||
actions: {}, |
|||
modules: { |
|||
theme, |
|||
user |
|||
}, |
|||
getters |
|||
}); |
|||
@ -0,0 +1,302 @@ |
|||
/** |
|||
* 主题状态管理 license by http://eleadmin.com
|
|||
*/ |
|||
import setting from '@/config/setting'; |
|||
|
|||
// 获取本地缓存配置
|
|||
let cache = {}; |
|||
try { |
|||
cache = JSON.parse(localStorage.getItem(setting.themeStoreName)) || {}; |
|||
} catch (e) { |
|||
console.error(e); |
|||
} |
|||
|
|||
// 获取缓存的主题配置和缓存的主题css
|
|||
const cacheTheme = getCache(cache, [ |
|||
'color', 'sideStyle', 'headStyle', |
|||
'tabStyle', 'layoutStyle', 'bodyFull', |
|||
'fixedHeader', 'fixedSidebar', 'fixedBody', |
|||
'showTabs', 'logoAutoSize', 'colorfulIcon', |
|||
'sideUniqueOpen', 'showFooter', 'weakMode', 'darkMode' |
|||
], setting); |
|||
|
|||
// 恢复色弱模式
|
|||
if (cacheTheme.weakMode) { |
|||
document.body.classList.add('ele-admin-weak'); |
|||
} |
|||
|
|||
// 恢复主题色
|
|||
window.onload = function () { |
|||
changeTheme(cacheTheme.color, cacheTheme.darkMode).catch(e => { |
|||
console.error(e); |
|||
}); |
|||
} |
|||
|
|||
// 获取屏幕宽度
|
|||
const screenWidth = document.documentElement.clientWidth || document.body.clientWidth, |
|||
screenHeight = document.documentElement.clientHeight || document.body.clientHeight; |
|||
|
|||
export default { |
|||
namespaced: true, |
|||
state: { |
|||
// 侧边栏风格: 0亮色, 1暗色
|
|||
sideStyle: cacheTheme.sideStyle, |
|||
// 顶栏风格: 0亮色, 1暗色, 2主色
|
|||
headStyle: cacheTheme.headStyle, |
|||
// 标签页风格: 0默认, 1圆点, 2卡片
|
|||
tabStyle: cacheTheme.tabStyle, |
|||
// 布局风格: 0默认, 1顶部菜单风格, 2混合菜单风格
|
|||
layoutStyle: cacheTheme.layoutStyle, |
|||
// 是否固定侧栏
|
|||
fixedSidebar: cacheTheme.fixedSidebar, |
|||
// 是否固定顶栏
|
|||
fixedHeader: cacheTheme.fixedHeader, |
|||
// 是否固定主体
|
|||
fixedBody: cacheTheme.fixedBody, |
|||
// 内容区域宽度铺满
|
|||
bodyFull: cacheTheme.bodyFull, |
|||
// 是否开启多标签
|
|||
showTabs: cacheTheme.showTabs, |
|||
// logo是否自适应宽度
|
|||
logoAutoSize: cacheTheme.logoAutoSize, |
|||
// 侧栏是否多彩图标
|
|||
colorfulIcon: cacheTheme.colorfulIcon, |
|||
// 侧边栏是否只保持一个子菜单展开
|
|||
sideUniqueOpen: cacheTheme.sideUniqueOpen, |
|||
// 是否开启页脚
|
|||
showFooter: cacheTheme.showFooter, |
|||
// 是否是色弱模式
|
|||
weakMode: cacheTheme.weakMode, |
|||
// 是否是暗黑模式
|
|||
darkMode: cacheTheme.darkMode, |
|||
// 主题色
|
|||
color: cacheTheme.color, |
|||
// 是否折叠侧边栏
|
|||
collapse: screenWidth < 992, |
|||
// 当前屏幕宽度
|
|||
screenWidth: screenWidth, |
|||
// 当前屏幕高度
|
|||
screenHeight: screenHeight |
|||
}, |
|||
mutations: { |
|||
SET: (state, obj) => { |
|||
state[obj.key] = obj.value; |
|||
// 开关色弱模式
|
|||
if ('weakMode' === obj.key) { |
|||
if (obj.value) { |
|||
document.body.classList.add('ele-admin-weak'); |
|||
} else { |
|||
document.body.classList.remove('ele-admin-weak'); |
|||
} |
|||
} |
|||
// 缓存修改的配置
|
|||
if (['collapse', 'screenWidth', 'screenHeight'].indexOf(obj.key) === -1) { |
|||
let temp = JSON.parse(localStorage.getItem(setting.themeStoreName) || '{}'); |
|||
temp[obj.key] = obj.value; |
|||
localStorage.setItem(setting.themeStoreName, JSON.stringify(temp)); |
|||
} |
|||
} |
|||
}, |
|||
actions: { |
|||
/** |
|||
* 修改配置 |
|||
* @param commit |
|||
* @param obj |
|||
*/ |
|||
set({commit}, obj) { |
|||
commit('SET', obj); |
|||
}, |
|||
/** |
|||
* 切换配置(boolean类型的配置) |
|||
* @param commit |
|||
* @param state |
|||
* @param key |
|||
*/ |
|||
toggle({commit, state}, key) { |
|||
commit('SET', {key: key, value: !state[key]}); |
|||
}, |
|||
/** |
|||
* 更新屏幕尺寸 |
|||
* @param commit |
|||
* @param 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}); |
|||
} |
|||
}, |
|||
/** |
|||
* 切换主题色 |
|||
* @param commit |
|||
* @param state |
|||
* @param color |
|||
* @returns {Promise<>} |
|||
*/ |
|||
setColor({commit, state}, color) { |
|||
return new Promise((resolve, reject) => { |
|||
changeTheme(color, state.darkMode).then(() => { |
|||
commit('SET', {key: 'color', value: color}); |
|||
return resolve(); |
|||
}).catch(e => { |
|||
reject(e); |
|||
}); |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 获取缓存配置项 |
|||
* @param cache 缓存数据 |
|||
* @param k 配置项 |
|||
* @param v 默认值 |
|||
*/ |
|||
function getCache(cache, k, v) { |
|||
if (Array.isArray(k)) { |
|||
let obj = {}; |
|||
k.forEach(t => { |
|||
obj[t] = (cache[t] === null || cache[t] === undefined) ? v[t] : cache[t]; |
|||
}); |
|||
return obj; |
|||
} else { |
|||
if (cache[k] === null || cache[k] === undefined) { |
|||
return v; |
|||
} |
|||
return cache[k]; |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 切换主题 |
|||
* @param color 主题色 |
|||
* @param darkMode 是否是暗黑模式 |
|||
* @returns {Promise<>} |
|||
*/ |
|||
function changeTheme(color, darkMode) { |
|||
const version = process.env.VUE_APP_VERSION; |
|||
// 对应的css文件名
|
|||
let colorCss; |
|||
if (darkMode) { |
|||
if (color) { |
|||
colorCss = color + '-dark'; |
|||
} else { |
|||
colorCss = 'dark'; |
|||
} |
|||
} else { |
|||
colorCss = color; |
|||
} |
|||
// 获取缓存的主题css
|
|||
let themeCache = {}, |
|||
cacheStoreName = setting.themeStoreName + '-cache'; |
|||
if (window.eleThemeCache) { |
|||
themeCache = window.eleThemeCache; |
|||
} else { |
|||
try { |
|||
const localCache = JSON.parse(localStorage.getItem(cacheStoreName) || '{}'); |
|||
if (localCache && version === localCache.version && localCache.cache) { |
|||
themeCache = localCache.cache; |
|||
window.eleThemeCache = themeCache; |
|||
} |
|||
} catch (e) { |
|||
console.error(e); |
|||
} |
|||
} |
|||
// 加载主题css
|
|||
return new Promise((resolve, reject) => { |
|||
// 恢复默认主题
|
|||
if (!colorCss) { |
|||
removeTheme(); |
|||
return resolve(); |
|||
} |
|||
// 主题css已经缓存过
|
|||
if (themeCache[colorCss]) { |
|||
removeTheme(); // 移除上次的主题
|
|||
let elem = document.createElement('style'); |
|||
elem.id = `ele-theme-${colorCss}`; |
|||
elem.setAttribute('type', 'text/css'); |
|||
elem.innerHTML = themeCache[colorCss]; |
|||
document.head.appendChild(elem); |
|||
return resolve(); |
|||
} |
|||
// 主题css的js模块已被加载过
|
|||
const oldElem = document.head.querySelector(`#ele-theme-${colorCss}-js`); |
|||
if (oldElem) { |
|||
removeTheme(); // 移除上次的主题
|
|||
let elem = document.createElement('link'); |
|||
elem.id = `ele-theme-${colorCss}`; |
|||
elem.setAttribute('type', 'text/css'); |
|||
elem.setAttribute('rel', 'stylesheet'); |
|||
elem.setAttribute('href', oldElem.getAttribute('ele-css')); |
|||
document.head.appendChild(elem); |
|||
return resolve(); |
|||
} |
|||
// 把head下面相关元素标记为非主题元素
|
|||
const nid = ':not([id^="ele-theme-"])', sel = `style${nid},link${nid},script${nid}`; |
|||
document.head.querySelectorAll(sel).forEach(elem => { |
|||
if (!elem.getAttribute('ele-theme')) { |
|||
elem.setAttribute('ele-theme', 'no'); |
|||
} |
|||
}); |
|||
// 加载主题css模块
|
|||
import(`@/styles/theme/${colorCss}.scss`).then(() => { |
|||
removeTheme(); // 移除上次的主题
|
|||
// 获取import之后的主题标签
|
|||
let elem = document.head.querySelectorAll('style:not([ele-theme="no"])'); |
|||
elem = elem.length ? elem[elem.length - 1] : null; |
|||
if (!elem) { |
|||
// 可能是style标签也可能是link标签
|
|||
elem = document.head.querySelectorAll('link:not([ele-theme="no"])'); |
|||
elem = elem.length ? elem[elem.length - 1] : null; |
|||
if (!elem) { |
|||
return reject(new Error('theme element not found.')); |
|||
} |
|||
// 再找到对应的主题js模块的标签
|
|||
const href = elem.getAttribute('href'), |
|||
uuid = href.substring(href.indexOf('chunk-'), href.indexOf('.')), |
|||
qs = `script[src^="/js/${uuid}"]:not([ele-theme="no"])`; |
|||
let node = document.head.querySelectorAll(qs); |
|||
if (node.length) { |
|||
node[node.length - 1].id = `ele-theme-${colorCss}-js`; |
|||
// 记录css地址
|
|||
node[node.length - 1].setAttribute('ele-css', href); |
|||
} |
|||
} |
|||
elem.id = `ele-theme-${colorCss}`; |
|||
// 缓存主题css
|
|||
if (elem.innerHTML) { |
|||
let cache = {}; |
|||
cache[colorCss] = elem.innerHTML; |
|||
try { |
|||
localStorage.setItem(cacheStoreName, JSON.stringify({ |
|||
version: version, |
|||
cache: cache |
|||
})); |
|||
} catch (e) { |
|||
console.error(e); |
|||
} |
|||
if (!window.eleThemeCache) { |
|||
window.eleThemeCache = {}; |
|||
} |
|||
window.eleThemeCache[colorCss] = cache[colorCss]; |
|||
} |
|||
return resolve(); |
|||
}).catch(e => { |
|||
reject(e); |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 移除主题 |
|||
*/ |
|||
function removeTheme() { |
|||
const sel = 'style[id^="ele-theme-"],link[id^="ele-theme-"]'; |
|||
document.head.querySelectorAll(sel).forEach(elem => { |
|||
elem.parentNode.removeChild(elem); |
|||
}); |
|||
} |
|||
@ -0,0 +1,259 @@ |
|||
/** |
|||
* 登录状态管理 |
|||
*/ |
|||
import axios from 'axios'; |
|||
import {util} from 'ele-admin'; |
|||
import setting from '@/config/setting'; |
|||
|
|||
export default { |
|||
namespaced: true, |
|||
state: { |
|||
// 当前用户信息
|
|||
user: setting.takeUser(), |
|||
// 当前用户权限
|
|||
authorities: [], |
|||
// 当前用户角色
|
|||
roles: [], |
|||
// 当前用户的菜单
|
|||
menus: null, |
|||
// 当前打开的选项卡
|
|||
tabs: [] |
|||
}, |
|||
mutations: { |
|||
SET: (state, obj) => { |
|||
state[obj.key] = obj.value; |
|||
}, |
|||
SET_TOKEN: (state, obj) => { |
|||
setting.cacheToken(obj.token, obj.remember); |
|||
state.token = obj.token; |
|||
if (!obj.token) { |
|||
state.user = {}; |
|||
state.menus = null; |
|||
state.tabs = []; |
|||
setting.cacheUser(); |
|||
} |
|||
}, |
|||
TAB_PUSH(state, obj) { |
|||
if (!state.tabs.some(r => r.path === obj.path)) { |
|||
state.tabs.push(obj); |
|||
} |
|||
} |
|||
}, |
|||
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<Object>} 菜单 |
|||
*/ |
|||
setMenus({commit}, menus) { |
|||
commit('SET', {key: 'menus', value: menus}); |
|||
}, |
|||
/** |
|||
* 获取用户菜单路由 |
|||
* @param commit |
|||
* @returns {Promise<Object>} {menus: Array, home: String} |
|||
*/ |
|||
getMenus({commit}) { |
|||
return new Promise((resolve, reject) => { |
|||
if (!setting.menuUrl) { |
|||
let menus = setting.menus || []; |
|||
commit('SET', {key: 'menus', value: menus}); |
|||
return resolve({menus: menus}); |
|||
} |
|||
axios.get(setting.menuUrl).then(res => { |
|||
let result = setting.parseMenu ? setting.parseMenu(res.data) : res.data; |
|||
let menus = result.data, home = null; |
|||
if (!menus) { |
|||
return reject(new Error(result.msg)); |
|||
} |
|||
util.eachTreeData(menus, item => { |
|||
if (setting.parseMenuItem) { |
|||
item = setting.parseMenuItem(item); |
|||
} |
|||
item.meta = Object.assign({ |
|||
title: item.title, |
|||
icon: item.icon, |
|||
hide: item.hide, |
|||
active: item.active || item.uid, |
|||
hideFooter: item.hideFooter |
|||
}, item.meta); |
|||
if (!item.children || !item.children.length) { |
|||
if (!home && item.path && !( |
|||
item.path.startsWith('http://') || |
|||
item.path.startsWith('https://') || |
|||
item.path.startsWith('//') |
|||
)) { |
|||
home = item.path; |
|||
if (!setting.homeTitle) { |
|||
setting.homeTitle = item.title; |
|||
} |
|||
} |
|||
} else if (item.children[0].path) { |
|||
if (!item.redirect) { |
|||
item.redirect = item.children[0].path; |
|||
} |
|||
if (!item.path) { |
|||
const cp = item.children[0].path; |
|||
item.path = cp.substring(0, cp.lastIndexOf('/')); |
|||
} |
|||
} |
|||
}); |
|||
commit('SET', {key: 'menus', value: menus}); |
|||
resolve({menus: menus, home: home}); |
|||
}).catch(e => { |
|||
reject(e); |
|||
}); |
|||
}); |
|||
}, |
|||
/** |
|||
* 添加新tab |
|||
* @param commit |
|||
* @param obj {{path: String, title: String}} tab信息 |
|||
*/ |
|||
tabAdd({commit}, obj) { |
|||
commit('TAB_PUSH', obj); |
|||
}, |
|||
/** |
|||
* 关闭指定tab |
|||
* @param commit |
|||
* @param state |
|||
* @param path {String} tab路由 |
|||
* @returns {Promise<Number>} 前一个tab位置 |
|||
*/ |
|||
tabRemove({commit, state}, path) { |
|||
return new Promise((resolve) => { |
|||
let lastIndex = -1, lastPath, last; |
|||
for (let i = 0; i < state.tabs.length; i++) { |
|||
if (state.tabs[i].path === path) { |
|||
break; |
|||
} |
|||
lastIndex = i; |
|||
last = state.tabs[i]; |
|||
lastPath = last.path; |
|||
} |
|||
commit('SET', { |
|||
key: 'tabs', |
|||
value: state.tabs.filter(d => d.path !== path) |
|||
}); |
|||
resolve({ |
|||
lastIndex: lastIndex, |
|||
lastPath: lastPath, |
|||
last: last |
|||
}); |
|||
}); |
|||
}, |
|||
/** |
|||
* 关闭所有tab |
|||
* @param commit |
|||
*/ |
|||
tabRemoveAll({commit}) { |
|||
commit('SET', {key: 'tabs', value: []}); |
|||
}, |
|||
/** |
|||
* 关闭左侧tab |
|||
* @param commit |
|||
* @param state |
|||
* @param path {String} tab路由 |
|||
*/ |
|||
tabRemoveLeft({commit, state}, path) { |
|||
for (let i = 0; i < state.tabs.length; i++) { |
|||
if (state.tabs[i].path === path) { |
|||
commit('SET', { |
|||
key: 'tabs', |
|||
value: state.tabs.slice(i) |
|||
}); |
|||
break; |
|||
} |
|||
} |
|||
}, |
|||
/** |
|||
* 关闭右侧tab |
|||
* @param commit |
|||
* @param state |
|||
* @param path {String} tab路由 |
|||
*/ |
|||
tabRemoveRight({commit, state}, path) { |
|||
for (let i = 0; i < state.tabs.length; i++) { |
|||
if (state.tabs[i].path === path) { |
|||
commit('SET', { |
|||
key: 'tabs', |
|||
value: state.tabs.slice(0, i + 1) |
|||
}); |
|||
break; |
|||
} |
|||
} |
|||
}, |
|||
/** |
|||
* 关闭其他tab |
|||
* @param commit |
|||
* @param state |
|||
* @param path {String} tab路由 |
|||
*/ |
|||
tabRemoveOther({commit, state}, path) { |
|||
commit('SET', { |
|||
key: 'tabs', |
|||
value: state.tabs.filter(d => d.path === path) |
|||
}); |
|||
}, |
|||
/** |
|||
* 修改指定tab标题 |
|||
* @param commit |
|||
* @param state |
|||
* @param obj {{path: String, title: String}} |
|||
*/ |
|||
tabSetTitle({commit, state}, obj) { |
|||
let i = state.tabs.findIndex(d => d.path === obj.path); |
|||
let tabs = state.tabs.slice(0, i).concat([ |
|||
Object.assign({}, state.tabs[i], { |
|||
title: obj.title |
|||
}) |
|||
]).concat(state.tabs.slice(i + 1)); |
|||
commit('SET', {key: 'tabs', value: tabs}); |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,63 @@ |
|||
/** 如果需要自己定义一些全局样式写在这里 */ |
|||
|
|||
$--ele-font-path: "~ele-admin/packages/style/fonts"; |
|||
|
|||
@import "./var.scss"; |
|||
@import "~ele-admin/packages/style/index.scss"; |
|||
|
|||
/* 异常页面 */ |
|||
.ele-exception { |
|||
margin: 145px 0; |
|||
|
|||
.ele-exception-img, |
|||
.ele-exception-content { |
|||
margin: 15px 30px; |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
} |
|||
|
|||
.ele-exception-content > h1 { |
|||
font-size: 72px; |
|||
font-weight: 600; |
|||
margin: 0 0 20px 0; |
|||
} |
|||
|
|||
&:not(.ele-exception-dark) .ele-exception-content > h1 { |
|||
color: #515A6E; |
|||
} |
|||
|
|||
.ele-exception-content > p { |
|||
font-size: 20px; |
|||
margin: 0 0 25px 0; |
|||
} |
|||
|
|||
&:not(.ele-exception-dark) .ele-exception-content > p { |
|||
color: #808695; |
|||
} |
|||
|
|||
&.ele-exception-dark .ele-exception-img { |
|||
opacity: .7; |
|||
} |
|||
} |
|||
|
|||
@media screen and (max-width: 768px) { |
|||
.ele-exception { |
|||
margin: 40px 0; |
|||
|
|||
.ele-exception-img { |
|||
margin: 0; |
|||
|
|||
img { |
|||
max-height: 200px; |
|||
} |
|||
} |
|||
|
|||
.ele-exception-content { |
|||
text-align: center; |
|||
} |
|||
} |
|||
} |
|||
//表格不对齐bug |
|||
.el-table th.gutter { |
|||
display: table-cell !important; |
|||
} |
|||
@ -0,0 +1,5 @@ |
|||
/** 明青主题暗黑 */ |
|||
|
|||
$--color-primary: #2BCCCE; |
|||
|
|||
@import "./dark.scss"; |
|||
@ -0,0 +1,6 @@ |
|||
/** 明青主题 */ |
|||
|
|||
$--color-primary: #2BCCCE; |
|||
|
|||
@import "../var.scss"; |
|||
@import "~ele-admin/packages/style/themes/default.scss"; |
|||
@ -0,0 +1,4 @@ |
|||
/** 暗黑主题 */ |
|||
|
|||
@import "../var.scss"; |
|||
@import "~ele-admin/packages/style/themes/dark.scss"; |
|||
@ -0,0 +1,5 @@ |
|||
/** 薄暮主题暗黑 */ |
|||
|
|||
$--color-primary: #5F80C7; |
|||
|
|||
@import "./dark.scss"; |
|||
@ -0,0 +1,6 @@ |
|||
/** 薄暮主题 */ |
|||
|
|||
$--color-primary: #5F80C7; |
|||
|
|||
@import "../var.scss"; |
|||
@import "~ele-admin/packages/style/themes/default.scss"; |
|||
@ -0,0 +1,5 @@ |
|||
/** 极客蓝主题暗黑 */ |
|||
|
|||
$--color-primary: #32A2D4; |
|||
|
|||
@import "./dark.scss"; |
|||
@ -0,0 +1,6 @@ |
|||
/** 极客蓝主题 */ |
|||
|
|||
$--color-primary: #32A2D4; |
|||
|
|||
@import "../var.scss"; |
|||
@import "~ele-admin/packages/style/themes/default.scss"; |
|||
@ -0,0 +1,5 @@ |
|||
/** 极光绿主题暗黑 */ |
|||
|
|||
$--color-primary: #33CC99; |
|||
|
|||
@import "./dark.scss"; |
|||
@ -0,0 +1,6 @@ |
|||
/** 极光绿主题 */ |
|||
|
|||
$--color-primary: #33CC99; |
|||
|
|||
@import "../var.scss"; |
|||
@import "~ele-admin/packages/style/themes/default.scss"; |
|||
@ -0,0 +1,5 @@ |
|||
/** 酱紫主题暗黑 */ |
|||
|
|||
$--color-primary: #9266F9; |
|||
|
|||
@import "./dark.scss"; |
|||
@ -0,0 +1,6 @@ |
|||
/** 酱紫主题 */ |
|||
|
|||
$--color-primary: #9266F9; |
|||
|
|||
@import "../var.scss"; |
|||
@import "~ele-admin/packages/style/themes/default.scss"; |
|||
@ -0,0 +1,5 @@ |
|||
/** 日暮主题暗黑 */ |
|||
|
|||
$--color-primary: #FAAD14; |
|||
|
|||
@import "./dark.scss"; |
|||
@ -0,0 +1,6 @@ |
|||
/** 日暮主题 */ |
|||
|
|||
$--color-primary: #FAAD14; |
|||
|
|||
@import "../var.scss"; |
|||
@import "~ele-admin/packages/style/themes/default.scss"; |
|||
@ -0,0 +1,5 @@ |
|||
/** 火山主题暗黑 */ |
|||
|
|||
$--color-primary: #F5686F; |
|||
|
|||
@import "./dark.scss"; |
|||
@ -0,0 +1,6 @@ |
|||
/** 火山主题 */ |
|||
|
|||
$--color-primary: #F5686F; |
|||
|
|||
@import "../var.scss"; |
|||
@import "~ele-admin/packages/style/themes/default.scss"; |
|||
@ -0,0 +1,2 @@ |
|||
/** 如果需要覆盖框架样式变量写在这里 */ |
|||
$--sidebar-width: 220px; // 侧边栏宽度 |
|||
@ -0,0 +1,128 @@ |
|||
/** |
|||
* 权限、角色控制组件 |
|||
*/ |
|||
import store from '@/store'; |
|||
|
|||
export default { |
|||
install(Vue) { |
|||
// 添加全局方法
|
|||
Vue.prototype.$hasRole = this.hasRole; |
|||
Vue.prototype.$hasAnyRole = this.hasAnyRole; |
|||
Vue.prototype.$hasPermission = this.hasPermission; |
|||
Vue.prototype.$hasAnyPermission = this.hasAnyPermission; |
|||
|
|||
// 添加自定义指令
|
|||
Vue.directive('role', { |
|||
inserted: (el, binding) => { |
|||
if (!this.hasRole(binding.value)) { |
|||
el.parentNode && el.parentNode.removeChild(el); |
|||
} |
|||
} |
|||
}); |
|||
Vue.directive('any-role', { |
|||
inserted: (el, binding) => { |
|||
if (!this.hasAnyRole(binding.value)) { |
|||
el.parentNode && el.parentNode.removeChild(el); |
|||
} |
|||
} |
|||
}); |
|||
Vue.directive('permission', { |
|||
inserted: (el, binding) => { |
|||
if (!this.hasPermission(binding.value)) { |
|||
el.parentNode && el.parentNode.removeChild(el); |
|||
} |
|||
} |
|||
}); |
|||
Vue.directive('any-permission', { |
|||
inserted: (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; |
|||
} |
|||
@ -0,0 +1,404 @@ |
|||
<template> |
|||
<div class="ele-body" id="table" v-show="loaded"> |
|||
<el-row :gutter="15"> |
|||
<el-col> |
|||
<el-card shadow="never" body-style="padding-top: 5px;"> |
|||
<el-tabs v-model="active" class="user-info-tabs"> |
|||
<el-tab-pane label="基础设置" name="base"> |
|||
<el-form |
|||
ref="configForm" |
|||
:model="form" |
|||
:rules="rules" |
|||
label-width="110px" |
|||
style="max-width: 450px;padding-top: 40px;" |
|||
@keyup.enter.native="save" |
|||
@submit.native.prevent> |
|||
<el-form-item label="网站名称：" prop="name"> |
|||
<el-input |
|||
v-model="form.name" |
|||
placeholder="请输入网站名称" |
|||
auto-complete="on" |
|||
clearable/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="网站域名：" prop="host"> |
|||
<el-input |
|||
v-model="form.host" |
|||
placeholder="请输入网站域名" |
|||
clearable/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="电脑端Logo"> |
|||
<el-row> |
|||
<el-col> |
|||
<el-input |
|||
v-model="form.logo" |
|||
placeholder="请上传电脑端Logo" |
|||
clearable/> |
|||
<el-upload |
|||
class="upload-demo" |
|||
:show-file-list="false" |
|||
:action="this.uploadImage+'?upload_type=img'" |
|||
:on-success="afterUploadLogo"> |
|||
<img v-if="form.logo" :src="form.logo" width="150" height="150" class="avatar"> |
|||
<i v-else class="el-icon-plus avatar-uploader-icon"></i> |
|||
</el-upload> |
|||
</el-col> |
|||
</el-row> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="手机端Logo：" prop="logo_phone"> |
|||
<el-input |
|||
v-model="form.logo_phone" |
|||
placeholder="请上传手机端Logo" |
|||
clearable/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="电脑端Icon：" prop="icon"> |
|||
<el-input |
|||
v-model="form.icon" |
|||
placeholder="请上传电脑端电脑端Icon" |
|||
clearable/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="手机端Icon：" prop="icon_phone"> |
|||
<el-input |
|||
v-model="form.icon_phone" |
|||
placeholder="请上传手机端Icon" |
|||
clearable/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="网站备案号：" prop="record"> |
|||
<el-input |
|||
v-model="form.record" |
|||
placeholder="请输入网站备案号" |
|||
clearable/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="公安备案号：" prop="public_security_record"> |
|||
<el-input |
|||
v-model="form.public_security_record" |
|||
placeholder="请输入网站公安备案号" |
|||
clearable/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="版权信息：" prop="copyright"> |
|||
<el-input |
|||
v-model="form.copyright" |
|||
placeholder="请输入版权信息" |
|||
:rows="4" |
|||
type="textarea" |
|||
clearable/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item> |
|||
<el-button |
|||
type="primary" |
|||
@click="save" |
|||
:loading="loading">保存更改 |
|||
</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</el-tab-pane> |
|||
<el-tab-pane label="SEO配置" name="seo"> |
|||
<el-form |
|||
ref="configSeoForm" |
|||
:model="form" |
|||
:rules="rules" |
|||
label-width="110px" |
|||
style="max-width: 450px;padding-top: 40px;" |
|||
@keyup.enter.native="save" |
|||
@submit.native.prevent> |
|||
<el-form-item label="SEO标题：" prop="seo_title"> |
|||
<el-input |
|||
v-model="form.seo_title" |
|||
placeholder="请输入SEO标题" |
|||
clearable/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="SEO关键词：" prop="seo_keyword"> |
|||
<el-input |
|||
v-model="form.seo_keyword" |
|||
placeholder="请输入SEO关键词" |
|||
clearable/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="SEO描述：" prop="seo_description"> |
|||
<el-input |
|||
v-model="form.seo_description" |
|||
placeholder="请输入SEO描述" |
|||
:rows="4" |
|||
type="textarea"/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item> |
|||
<el-button |
|||
type="primary" |
|||
@click="saveSeo" |
|||
:loading="loading">保存更改 |
|||
</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</el-tab-pane> |
|||
<el-tab-pane label="联系方式" name="contact"> |
|||
<el-form |
|||
ref="configContactForm" |
|||
:model="form" |
|||
:rules="rules" |
|||
label-width="110px" |
|||
style="max-width: 450px;padding-top: 40px;" |
|||
@keyup.enter.native="save" |
|||
@submit.native.prevent> |
|||
|
|||
<el-form-item label="联系人：" prop="contact_person"> |
|||
<el-input |
|||
v-model="form.contact_person" |
|||
placeholder="请输入联系人姓名" |
|||
clearable/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="公司地址：" prop="address"> |
|||
<el-input |
|||
v-model="form.address" |
|||
placeholder="请输入公司地址" |
|||
clearable/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="QQ客服：" prop="qq"> |
|||
<el-input |
|||
v-model="form.qq" |
|||
placeholder="请输入QQ客服" |
|||
clearable/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="联系电话：" prop="tel"> |
|||
<el-input |
|||
v-model="form.tel" |
|||
placeholder="请输入联系电话" |
|||
clearable/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="400电话：" prop="tel_400"> |
|||
<el-input |
|||
v-model="form.tel_400" |
|||
placeholder="请输入400电话" |
|||
clearable/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="手机号码：" prop="phone"> |
|||
<el-input |
|||
v-model="form.phone" |
|||
placeholder="请输入手机号码" |
|||
clearable/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="传真号码：" prop="fax"> |
|||
<el-input |
|||
v-model="form.fax" |
|||
placeholder="请输入传真号码" |
|||
clearable/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="邮箱：" prop="email"> |
|||
<el-input |
|||
v-model="form.email" |
|||
placeholder="请输入邮箱" |
|||
clearable/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="公众号二维码：" prop="qrcode_wechat"> |
|||
<el-input |
|||
v-model="form.qrcode_wechat" |
|||
placeholder="请上传公众号二维码" |
|||
clearable/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item> |
|||
<el-button |
|||
type="primary" |
|||
@click="saveContact" |
|||
:loading="loading">保存更改 |
|||
</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</el-tab-pane> |
|||
<el-tab-pane label="统计代码" name="jscode"> |
|||
<el-form |
|||
ref="configJscodeForm" |
|||
:model="form" |
|||
:rules="rules" |
|||
label-width="110px" |
|||
style="max-width: 450px;padding-top: 40px;" |
|||
@keyup.enter.native="save" |
|||
@submit.native.prevent> |
|||
<el-form-item label="统计代码：" prop="js_code"> |
|||
<el-input |
|||
v-model="form.js_code" |
|||
placeholder="请输入统计代码" |
|||
:rows="4" |
|||
type="textarea" |
|||
clearable/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="客服代码：" prop="js_code_service"> |
|||
<el-input |
|||
v-model="form.js_code_service" |
|||
placeholder="请输入客服代码" |
|||
:rows="4" |
|||
type="textarea" |
|||
clearable/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item> |
|||
<el-button |
|||
type="primary" |
|||
@click="saveJscode" |
|||
:loading="loading">保存更改 |
|||
</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</el-tab-pane> |
|||
</el-tabs> |
|||
</el-card> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import setting from "@/config/setting"; |
|||
|
|||
export default { |
|||
|
|||
name: 'ConfigIndex', |
|||
data() { |
|||
return { |
|||
uploadImage: setting.uploadImageUrl, |
|||
// tab页选中 |
|||
active: 'base', |
|||
labelPosition: 'left', |
|||
// 表单数据 |
|||
form: {}, |
|||
// 表单验证规则 |
|||
rules: { |
|||
name: [ |
|||
{required: true, message: '请输入网站名称', trigger: 'blur'} |
|||
], |
|||
host: [ |
|||
{required: true, message: '请输入网站域名', trigger: 'blur'} |
|||
], |
|||
}, |
|||
// 保存按钮loading |
|||
loading: false, |
|||
// 是否显示裁剪弹窗 |
|||
showCropper: false, |
|||
// 加载完成 |
|||
loaded: false, |
|||
} |
|||
}, |
|||
created() { |
|||
this.loading = true; |
|||
this.$http.get('/config/index').then(res => { |
|||
this.loading = false; |
|||
if (res.data.code === 0) { |
|||
this.form = res.data.data; |
|||
} else { |
|||
this.$message.error(res.data.msg); |
|||
} |
|||
this.loaded = true; |
|||
}).catch(e => { |
|||
this.$message.error(e.message); |
|||
}); |
|||
}, |
|||
methods: { |
|||
afterUploadLogo(response) { |
|||
if (response.code != 0 || response.url == '') { |
|||
this.$message.error(response.msg) |
|||
} else { |
|||
this.form.logo = response.url |
|||
} |
|||
}, |
|||
|
|||
/* 保存更改 */ |
|||
save() { |
|||
this.$refs['configForm'].validate((valid) => { |
|||
return this.postSave(valid); |
|||
}); |
|||
}, |
|||
saveSeo() { |
|||
this.$refs['configSeoForm'].validate((valid) => { |
|||
return this.postSave(valid); |
|||
}); |
|||
}, |
|||
saveContact() { |
|||
|
|||
this.$refs['configContactForm'].validate((valid) => { |
|||
return this.postSave(valid); |
|||
}); |
|||
}, |
|||
saveJscode() { |
|||
this.$refs['configJscodeForm'].validate((valid) => { |
|||
return this.postSave(valid); |
|||
}); |
|||
}, |
|||
postSave(valid) { |
|||
if (!valid) { |
|||
return false; |
|||
} |
|||
this.loading = true; |
|||
this.$http.post('/config/save', this.form).then(res => { |
|||
this.loading = false; |
|||
if (res.data.code === 0) { |
|||
this.$message({type: 'success', message: res.data.msg}); |
|||
} else { |
|||
this.$message.error(res.data.msg); |
|||
} |
|||
}).catch(e => { |
|||
this.loading = false; |
|||
this.$message.error(e.message); |
|||
}); |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.ele-body { |
|||
padding-bottom: 0; |
|||
} |
|||
|
|||
.el-card { |
|||
margin-bottom: 15px; |
|||
} |
|||
|
|||
/* tab页签 */ |
|||
.user-info-tabs ::v-deep .el-tabs__nav-wrap { |
|||
padding-left: 20px; |
|||
} |
|||
|
|||
/* 电脑端头像 */ |
|||
.upload-demo{ |
|||
padding-top: 15px; |
|||
} |
|||
|
|||
.avatar-uploader-icon { |
|||
border: 1px solid #D9D9D9; |
|||
font-size: 28px; |
|||
color: #409EFF; |
|||
width: 148px; |
|||
height: 148px; |
|||
line-height: 148px; |
|||
text-align: center; |
|||
border-radius: 6px; |
|||
} |
|||
.avatar-uploader-icon:hover { |
|||
border-color: #409EFF; |
|||
} |
|||
.avatar { |
|||
display: block; |
|||
width: 150px; |
|||
height: 150px; |
|||
border-radius: 6px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,470 @@ |
|||
<template> |
|||
<div class="ele-body"> |
|||
<el-card shadow="never" body-style="padding:0;"> |
|||
<div class="ele-cell ele-cell-align-top ele-user-message"> |
|||
<el-menu |
|||
:default-active="active" |
|||
:mode="mode" |
|||
@select="query"> |
|||
<el-menu-item index="0"> |
|||
<span>全部消息</span> |
|||
<el-badge |
|||
v-if="allUnReadNum" |
|||
:value="allUnReadNum" |
|||
class="ele-badge-static"/> |
|||
</el-menu-item> |
|||
<el-menu-item index="1"> |
|||
<span>系统通知</span> |
|||
<el-badge |
|||
v-if="unReadNum1" |
|||
:value="unReadNum1" |
|||
class="ele-badge-static"/> |
|||
</el-menu-item> |
|||
<el-menu-item index="2"> |
|||
<span>用户私信</span> |
|||
<el-badge |
|||
v-if="unReadNum2" |
|||
:value="unReadNum2" |
|||
class="ele-badge-static"/> |
|||
</el-menu-item> |
|||
<el-menu-item index="3"> |
|||
<span>代办事项</span> |
|||
<el-badge |
|||
v-if="unReadNum3" |
|||
:value="unReadNum3" |
|||
class="ele-badge-static"/> |
|||
</el-menu-item> |
|||
</el-menu> |
|||
<div class="ele-cell-content"> |
|||
<!-- 数据表格 --> |
|||
<ele-pro-table |
|||
ref="table" |
|||
:datasource="data" |
|||
:columns="columns" |
|||
:selection.sync="choose"> |
|||
<template slot="toolbar"> |
|||
<el-button |
|||
size="small" |
|||
@click="read" |
|||
type="primary" |
|||
plain>标记已读 |
|||
</el-button> |
|||
<el-button |
|||
size="small" |
|||
@click="readAll" |
|||
type="primary" |
|||
plain>全部已读 |
|||
</el-button> |
|||
<el-button |
|||
size="small" |
|||
@click="remove()" |
|||
type="danger" |
|||
plain>删除消息 |
|||
</el-button> |
|||
</template> |
|||
<template slot="state" slot-scope="{row}"> |
|||
<span :class="['ele-text-danger','ele-text-info'][row.state]"> |
|||
{{ ['未读', '已读'][row.state] }} |
|||
</span> |
|||
</template> |
|||
<template slot="action" slot-scope="{row}"> |
|||
<el-link |
|||
@click="view(row)" |
|||
icon="el-icon-view" |
|||
type="primary" |
|||
:underline="false">查看 |
|||
</el-link> |
|||
<el-popconfirm |
|||
title="确定要删除此消息吗？" |
|||
@confirm="remove(row)" |
|||
class="ele-action"> |
|||
<el-link |
|||
slot="reference" |
|||
icon="el-icon-delete" |
|||
type="danger" |
|||
:underline="false">删除 |
|||
</el-link> |
|||
</el-popconfirm> |
|||
</template> |
|||
</ele-pro-table> |
|||
</div> |
|||
</div> |
|||
</el-card> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'UserMessage', |
|||
data() { |
|||
return { |
|||
// 导航选中 |
|||
active: '0', |
|||
// 列表显示数据 |
|||
data: [], |
|||
columns: [ |
|||
{ |
|||
columnKey: 'selection', |
|||
type: 'selection', |
|||
width: 45, |
|||
align: 'center', |
|||
fixed: 'left' |
|||
}, |
|||
{ |
|||
columnKey: 'index', |
|||
type: 'index', |
|||
width: 45, |
|||
align: 'center', |
|||
fixed: 'left', |
|||
showOverflowTooltip: true |
|||
}, |
|||
{ |
|||
prop: 'title', |
|||
label: '标题内容', |
|||
showOverflowTooltip: true, |
|||
minWidth: 110 |
|||
}, |
|||
{ |
|||
prop: 'time', |
|||
label: '时间', |
|||
align: 'center', |
|||
showOverflowTooltip: true, |
|||
width: 140 |
|||
}, |
|||
{ |
|||
prop: 'state', |
|||
label: '状态', |
|||
align: 'center', |
|||
showOverflowTooltip: true, |
|||
width: 80, |
|||
slot: 'state' |
|||
}, |
|||
{ |
|||
columnKey: 'action', |
|||
label: '操作', |
|||
align: 'center', |
|||
showOverflowTooltip: true, |
|||
width: 140, |
|||
fixed: 'right', |
|||
resizable: false, |
|||
slot: 'action' |
|||
} |
|||
], |
|||
// 列表选中数据 |
|||
choose: [], |
|||
// 全部数据 |
|||
allData: [ |
|||
{ |
|||
title: '你有两条任务待完成，不要忘了哦~', |
|||
type: 3, |
|||
time: '2020-07-24 11:35', |
|||
state: 0 |
|||
}, |
|||
{ |
|||
title: '你有两条任务待完成，不要忘了哦~', |
|||
type: 3, |
|||
time: '2020-07-24 11:35', |
|||
state: 0 |
|||
}, |
|||
{ |
|||
title: '你有两条任务待完成，不要忘了哦~', |
|||
type: 3, |
|||
time: '2020-07-24 11:35', |
|||
state: 0 |
|||
}, |
|||
{ |
|||
title: '你有两条任务待完成，不要忘了哦~', |
|||
type: 3, |
|||
time: '2020-07-24 11:35', |
|||
state: 0 |
|||
}, |
|||
{ |
|||
title: '你有两条任务待完成，不要忘了哦~', |
|||
type: 3, |
|||
time: '2020-07-24 11:35', |
|||
state: 1 |
|||
}, |
|||
{ |
|||
title: '你有两条任务待完成，不要忘了哦~', |
|||
type: 3, |
|||
time: '2020-07-24 11:35', |
|||
state: 1 |
|||
}, |
|||
{ |
|||
title: '你有两条任务待完成，不要忘了哦~', |
|||
type: 3, |
|||
time: '2020-07-24 11:35', |
|||
state: 1 |
|||
}, |
|||
{ |
|||
title: '你有两条任务待完成，不要忘了哦~', |
|||
type: 3, |
|||
time: '2020-07-24 11:35', |
|||
state: 1 |
|||
}, |
|||
{ |
|||
title: '你有两条任务待完成，不要忘了哦~', |
|||
type: 3, |
|||
time: '2020-07-24 11:35', |
|||
state: 1 |
|||
}, |
|||
{ |
|||
title: '你有两条任务待完成，不要忘了哦~', |
|||
type: 3, |
|||
time: '2020-07-24 11:35', |
|||
state: 1 |
|||
}, |
|||
{ |
|||
title: 'Jasmine给你发来了一条私信', |
|||
type: 2, |
|||
time: '2020-07-24 11:35', |
|||
state: 0 |
|||
}, |
|||
{ |
|||
title: 'Jasmine给你发来了一条私信', |
|||
type: 2, |
|||
time: '2020-07-24 11:35', |
|||
state: 0 |
|||
}, |
|||
{ |
|||
title: 'Jasmine给你发来了一条私信', |
|||
type: 2, |
|||
time: '2020-07-24 11:35', |
|||
state: 0 |
|||
}, |
|||
{ |
|||
title: 'Jasmine给你发来了一条私信', |
|||
type: 2, |
|||
time: '2020-07-24 11:35', |
|||
state: 1 |
|||
}, |
|||
{ |
|||
title: 'Jasmine给你发来了一条私信', |
|||
type: 2, |
|||
time: '2020-07-24 11:35', |
|||
state: 1 |
|||
}, |
|||
{ |
|||
title: 'Jasmine给你发来了一条私信', |
|||
type: 2, |
|||
time: '2020-07-24 11:35', |
|||
state: 1 |
|||
}, |
|||
{ |
|||
title: 'Jasmine给你发来了一条私信', |
|||
type: 2, |
|||
time: '2020-07-24 11:35', |
|||
state: 1 |
|||
}, |
|||
{ |
|||
title: 'Jasmine给你发来了一条私信', |
|||
type: 2, |
|||
time: '2020-07-24 11:35', |
|||
state: 1 |
|||
}, |
|||
{ |
|||
title: 'Jasmine给你发来了一条私信', |
|||
type: 2, |
|||
time: '2020-07-24 11:35', |
|||
state: 1 |
|||
}, |
|||
{ |
|||
title: 'Jasmine给你发来了一条私信', |
|||
type: 2, |
|||
time: '2020-07-24 11:35', |
|||
state: 1 |
|||
}, |
|||
{ |
|||
title: 'EleAdmin新版本发布，欢迎体验', |
|||
type: 1, |
|||
time: '2020-07-24 11:35', |
|||
state: 0 |
|||
}, |
|||
{ |
|||
title: 'EleAdmin新版本发布，欢迎体验', |
|||
type: 1, |
|||
time: '2020-07-24 11:35', |
|||
state: 0 |
|||
}, |
|||
{ |
|||
title: 'EleAdmin新版本发布，欢迎体验', |
|||
type: 1, |
|||
time: '2020-07-24 11:35', |
|||
state: 1 |
|||
}, |
|||
{ |
|||
title: 'EleAdmin新版本发布，欢迎体验', |
|||
type: 1, |
|||
time: '2020-07-24 11:35', |
|||
state: 1 |
|||
}, |
|||
{ |
|||
title: 'EleAdmin新版本发布，欢迎体验', |
|||
type: 1, |
|||
time: '2020-07-24 11:35', |
|||
state: 1 |
|||
}, |
|||
{ |
|||
title: 'EleAdmin新版本发布，欢迎体验', |
|||
type: 1, |
|||
time: '2020-07-24 11:35', |
|||
state: 1 |
|||
}, |
|||
{ |
|||
title: 'EleAdmin新版本发布，欢迎体验', |
|||
type: 1, time: '2020-07-24 11:35', |
|||
state: 1 |
|||
}, |
|||
{ |
|||
title: 'EleAdmin新版本发布，欢迎体验', |
|||
type: 1, |
|||
time: '2020-07-24 11:35', |
|||
state: 1 |
|||
}, |
|||
{ |
|||
title: 'EleAdmin新版本发布，欢迎体验', |
|||
type: 1, |
|||
time: '2020-07-24 11:35', |
|||
state: 1 |
|||
}, |
|||
{ |
|||
title: 'EleAdmin新版本发布，欢迎体验', |
|||
type: 1, |
|||
time: '2020-07-24 11:35', |
|||
state: 1 |
|||
} |
|||
] |
|||
} |
|||
}, |
|||
computed: { |
|||
// 小屏幕水平导航 |
|||
mode() { |
|||
return this.$store.state.theme.screenWidth < 768 ? 'horizontal' : 'vertical'; |
|||
}, |
|||
// 全部未读数量 |
|||
allUnReadNum() { |
|||
return this.allData.filter(d => d.state === 0).length; |
|||
}, |
|||
// 通知未读数量 |
|||
unReadNum1() { |
|||
return this.allData.filter(d => d.state === 0 && d.type === 1).length; |
|||
}, |
|||
// 私信未读数量 |
|||
unReadNum2() { |
|||
return this.allData.filter(d => d.state === 0 && d.type === 2).length; |
|||
}, |
|||
// 代办未读数量 |
|||
unReadNum3() { |
|||
return this.allData.filter(d => d.state === 0 && d.type === 3).length; |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.query(); |
|||
}, |
|||
methods: { |
|||
/* 查询数据 */ |
|||
query(index) { |
|||
this.active = index || '0'; |
|||
if (this.active === '0') { |
|||
this.data = this.allData; |
|||
} else { |
|||
this.data = this.allData.filter(d => String(d.type) === this.active); |
|||
} |
|||
}, |
|||
/* 查看 */ |
|||
view(row) { |
|||
console.log(row); |
|||
this.$message('点击了查看'); |
|||
}, |
|||
/* 删除 */ |
|||
remove(row) { |
|||
if (row) { |
|||
// 单个删除 |
|||
this.data.splice(this.data.indexOf(row), 1); |
|||
this.$message({type: 'success', message: '删除成功'}); |
|||
} else { |
|||
// 批量删除 |
|||
if (this.choose.length === 0) { |
|||
return this.$message.error('请至少选择一条数据'); |
|||
} |
|||
this.$confirm('确定要删除选中的消息吗?', '提示', { |
|||
type: 'warning' |
|||
}).then(() => { |
|||
this.choose.forEach(d => { |
|||
this.data.splice(this.data.indexOf(d), 1); |
|||
}); |
|||
this.$message({type: 'success', message: '删除成功'}); |
|||
}).catch(() => { |
|||
}); |
|||
} |
|||
}, |
|||
/* 标记已读 */ |
|||
read() { |
|||
if (this.choose.length === 0) { |
|||
return this.$message.error('请至少选择一条数据'); |
|||
} |
|||
this.choose.forEach(d => { |
|||
this.data[this.data.indexOf(d)].state = 1; |
|||
}); |
|||
}, |
|||
/* 全部标记已读 */ |
|||
readAll() { |
|||
this.data.forEach(d => { |
|||
d.state = 1; |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.ele-user-message ::v-deep .el-menu { |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
.ele-user-message .ele-cell-content { |
|||
padding: 15px; |
|||
box-sizing: border-box; |
|||
overflow: auto; |
|||
} |
|||
|
|||
.ele-user-message .ele-badge-static { |
|||
margin-left: 10px; |
|||
} |
|||
|
|||
@media screen and (min-width: 768px) { |
|||
.ele-user-message ::v-deep .el-menu-item { |
|||
min-width: 150px; |
|||
text-align: right; |
|||
border-right: 2px solid transparent; |
|||
} |
|||
|
|||
.ele-user-message ::v-deep .el-menu-item:first-child { |
|||
margin-top: 15px; |
|||
} |
|||
} |
|||
|
|||
@media screen and (max-width: 768px) { |
|||
.ele-user-message { |
|||
display: block; |
|||
} |
|||
|
|||
.ele-user-message ::v-deep .el-menu-item { |
|||
height: 45px; |
|||
line-height: 45px; |
|||
padding: 0 5px; |
|||
display: inline-block; |
|||
float: none; |
|||
} |
|||
|
|||
.ele-user-message ::v-deep .el-menu { |
|||
text-align: center; |
|||
white-space: nowrap; |
|||
overflow: auto; |
|||
} |
|||
|
|||
.ele-user-message .ele-badge-static { |
|||
margin-left: 3px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,559 @@ |
|||
<template> |
|||
<div class="ele-body ele-body-card"> |
|||
<!-- 顶部统计卡片 --> |
|||
<el-row :gutter="15"> |
|||
<el-col :md="6" :sm="12"> |
|||
<el-card class="analysis-chart-card" shadow="never"> |
|||
<div slot="header"> |
|||
<span>总销售额</span> |
|||
<el-tooltip content="指标说明" placement="top"> |
|||
<i |
|||
class="el-icon-_question ele-pull-right ele-text-placeholder" |
|||
style="cursor: pointer;"> |
|||
</i> |
|||
</el-tooltip> |
|||
</div> |
|||
<div class="analysis-chart-card-num">¥ 126,560</div> |
|||
<div class="analysis-chart-card-content" style="padding-top: 18px;"> |
|||
<span class="ele-action"> |
|||
<span>周同比12%</span> |
|||
<i class="el-icon-caret-top ele-text-danger"></i> |
|||
</span> |
|||
<span class="ele-action"> |
|||
<span>日同比11%</span> |
|||
<i class="el-icon-caret-bottom ele-text-success"></i> |
|||
</span> |
|||
</div> |
|||
<el-divider/> |
|||
<div class="analysis-chart-card-text">日销售额 ￥12,423</div> |
|||
</el-card> |
|||
</el-col> |
|||
<el-col :md="6" :sm="12"> |
|||
<el-card class="analysis-chart-card" shadow="never"> |
|||
<div slot="header"> |
|||
<span>访问量</span> |
|||
<el-tag |
|||
type="danger" |
|||
size="mini" |
|||
class="ele-pull-right">日 |
|||
</el-tag> |
|||
</div> |
|||
<div class="analysis-chart-card-num">8,846</div> |
|||
<div class="analysis-chart-card-content"> |
|||
<ele-chart :option="visitChartOption" style="height: 40px;"/> |
|||
</div> |
|||
<el-divider/> |
|||
<div class="analysis-chart-card-text">日访问量 1,234</div> |
|||
</el-card> |
|||
</el-col> |
|||
<el-col :md="6" :sm="12"> |
|||
<el-card class="analysis-chart-card" shadow="never"> |
|||
<div slot="header"> |
|||
<span>支付笔数</span> |
|||
<el-tag |
|||
size="mini" |
|||
class="ele-pull-right">月 |
|||
</el-tag> |
|||
</div> |
|||
<div class="analysis-chart-card-num">6,560</div> |
|||
<div class="analysis-chart-card-content"> |
|||
<ele-chart |
|||
:option="payNumChartOption" |
|||
style="height: 40px;"/> |
|||
</div> |
|||
<el-divider/> |
|||
<div class="analysis-chart-card-text">转化率 60%</div> |
|||
</el-card> |
|||
</el-col> |
|||
<el-col :md="6" :sm="12"> |
|||
<el-card class="analysis-chart-card" shadow="never"> |
|||
<div slot="header"> |
|||
<span>运营活动效果</span> |
|||
<el-tag |
|||
type="success" |
|||
size="mini" |
|||
class="ele-pull-right">周 |
|||
</el-tag> |
|||
</div> |
|||
<div class="analysis-chart-card-num">78%</div> |
|||
<div class="analysis-chart-card-content" style="padding-top: 25px;"> |
|||
<el-progress |
|||
:percentage="78" |
|||
:show-text="false" |
|||
:stroke-width="10" |
|||
color="#13c2c2"/> |
|||
</div> |
|||
<el-divider/> |
|||
<div class="analysis-chart-card-text"> |
|||
<span class="ele-action"> |
|||
<span>周同比12%</span> |
|||
<i class="el-icon-caret-top ele-text-danger"/> |
|||
</span> |
|||
<span class="ele-action"> |
|||
<span>日同比11%</span> |
|||
<i class="el-icon-caret-bottom ele-text-success"/> |
|||
</span> |
|||
</div> |
|||
</el-card> |
|||
</el-col> |
|||
</el-row> |
|||
<!-- 销售额、访问量 --> |
|||
<el-card shadow="never" body-style="padding: 0;"> |
|||
<div class="ele-cell demo-monitor-tool"> |
|||
<div class="ele-cell-content"> |
|||
<el-tabs |
|||
v-model="saleSearch.type" |
|||
class="demo-monitor-tabs" |
|||
@tab-click="onSaleTypeChange"> |
|||
<el-tab-pane label="销售额" name="saleroom"/> |
|||
<el-tab-pane label="访问量" name="visits"/> |
|||
</el-tabs> |
|||
</div> |
|||
<div class="ele-inline-block hidden-xs-only"> |
|||
<el-radio-group v-model="saleSearch.dateType" size="small"> |
|||
<el-radio-button :label="0">今天</el-radio-button> |
|||
<el-radio-button :label="1">本周</el-radio-button> |
|||
<el-radio-button :label="2">本月</el-radio-button> |
|||
<el-radio-button :label="3">本年</el-radio-button> |
|||
</el-radio-group> |
|||
</div> |
|||
<div class="ele-inline-block hidden-xs-only"> |
|||
<el-date-picker |
|||
v-model="saleSearch.datetime" |
|||
type="daterange" |
|||
range-separator="至" size="small" |
|||
start-placeholder="开始日期" |
|||
end-placeholder="结束日期" unlink-panels/> |
|||
</div> |
|||
</div> |
|||
<el-divider/> |
|||
<el-row> |
|||
<el-col :md="18" :sm="16"> |
|||
<div class="demo-monitor-title"> |
|||
{{ {saleroom: '销售', visits: '访问量'}[saleSearch.type] }}趋势 |
|||
</div> |
|||
<ele-chart |
|||
:option="saleChartOption" |
|||
style="height:285px;"/> |
|||
</el-col> |
|||
<el-col :md="6" :sm="8"> |
|||
<div class="demo-monitor-title"> |
|||
门店{{ {saleroom: '销售额', visits: '访问量'}[saleSearch.type] }}排名 |
|||
</div> |
|||
<div |
|||
v-for="(item,index) in saleroomRankData" |
|||
:key="index" |
|||
class="demo-monitor-rank-item ele-cell"> |
|||
<el-tag |
|||
:type="index<3?'':'info'" |
|||
size="mini" |
|||
class="ele-tag-round"> |
|||
{{ index + 1 }} |
|||
</el-tag> |
|||
<div class="ele-cell-content">{{ item.name }}</div> |
|||
<div class="ele-text-secondary">{{ item.value }}</div> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
</el-card> |
|||
<!-- 最近1小时访问情况 --> |
|||
<el-row :gutter="15"> |
|||
<el-col :md="18" :sm="16"> |
|||
<el-card |
|||
shadow="never" |
|||
header="最近1小时访问情况" |
|||
body-style="padding: 10px 5px 0 0;"> |
|||
<ele-chart |
|||
:option="visitHourChartOption" |
|||
style="height: 323px;"/> |
|||
</el-card> |
|||
</el-col> |
|||
<el-col :md="6" :sm="8"> |
|||
<el-card shadow="never" header="热门搜索"> |
|||
<ele-word-cloud |
|||
:data="hotSearchData" |
|||
style="height: 303px;"/> |
|||
</el-card> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import EleChart from 'ele-admin/packages/ele-chart'; |
|||
import EleWordCloud from 'ele-admin/packages/ele-word-cloud'; |
|||
|
|||
export default { |
|||
name: 'DashboardAnalysis', |
|||
components: {EleChart, EleWordCloud}, |
|||
data() { |
|||
return { |
|||
// 支付笔数 |
|||
payNumData: [], |
|||
// 销售量搜索参数 |
|||
saleSearch: { |
|||
type: 'saleroom', |
|||
dateType: 0, |
|||
datetime: '' |
|||
}, |
|||
// 销售量数据 |
|||
saleroomData: [], |
|||
// 销售量排名数据 |
|||
saleroomRankData: [], |
|||
// 最近1小时访问情况数据 |
|||
visitHourData: [], |
|||
// 词云数据 |
|||
hotSearchData: [] |
|||
} |
|||
}, |
|||
computed: { |
|||
// 访问量折线图配置 |
|||
visitChartOption() { |
|||
if (!this.payNumData.length) return {}; |
|||
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) |
|||
} |
|||
] |
|||
}; |
|||
}, |
|||
// 最近1小时访问情况折线图配置 |
|||
visitHourChartOption() { |
|||
if (!this.visitHourData.length) return {}; |
|||
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() { |
|||
if (this.saleSearch.type === 'saleroom') { |
|||
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} |
|||
]; |
|||
} else { |
|||
this.saleroomData = [ |
|||
{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.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'} |
|||
]; |
|||
}, |
|||
/* 获取最近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} |
|||
]; |
|||
}, |
|||
/* 销售量tab选择改变事件 */ |
|||
onSaleTypeChange() { |
|||
this.getSaleroomData(); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/* 统计卡片 */ |
|||
.analysis-chart-card-num { |
|||
font-size: 30px; |
|||
} |
|||
|
|||
.analysis-chart-card-content { |
|||
height: 40px; |
|||
box-sizing: border-box; |
|||
margin-bottom: 12px; |
|||
} |
|||
|
|||
.analysis-chart-card-text { |
|||
padding-top: 12px; |
|||
} |
|||
|
|||
/* 销售额、访问量工具栏 */ |
|||
.demo-monitor-tool { |
|||
padding: 0 20px; |
|||
} |
|||
|
|||
.demo-monitor-tool ::v-deep .el-tabs__nav-wrap:after { |
|||
display: none; |
|||
} |
|||
|
|||
.demo-monitor-tool ::v-deep .el-tabs__item { |
|||
height: 50px; |
|||
line-height: 50px; |
|||
font-size: 15px; |
|||
} |
|||
|
|||
.demo-monitor-tool .el-date-editor { |
|||
width: 256px; |
|||
margin-left: 10px; |
|||
} |
|||
|
|||
/* 小标题 */ |
|||
.demo-monitor-title { |
|||
padding: 0 20px; |
|||
margin: 15px 0 5px 0; |
|||
} |
|||
|
|||
/* 排名item */ |
|||
.demo-monitor-rank-item { |
|||
padding: 0 20px; |
|||
line-height: 20px; |
|||
margin-top: 18px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,613 @@ |
|||
<template> |
|||
<div class="ele-body ele-body-card"> |
|||
<!-- 顶部统计卡片 --> |
|||
<el-row :gutter="15"> |
|||
<el-col :sm="6" :xs="12"> |
|||
<el-card shadow="never" class="monitor-count-card"> |
|||
<el-tag size="large" class="ele-tag-round"> |
|||
<i class="el-icon-s-custom"></i> |
|||
</el-tag> |
|||
<div class="monitor-count-card-num">21.2 k</div> |
|||
<div class="monitor-count-card-text ele-text-secondary">总访问人数</div> |
|||
<ele-avatar-list :data="visitUsers" :size="22" :max="4"/> |
|||
</el-card> |
|||
</el-col> |
|||
<el-col :sm="6" :xs="12"> |
|||
<el-card shadow="never" class="monitor-count-card"> |
|||
<el-tag size="large" type="warning" class="ele-tag-round"> |
|||
<i class="el-icon-_sent"></i> |
|||
</el-tag> |
|||
<div class="monitor-count-card-num">1.6 k</div> |
|||
<div class="monitor-count-card-text ele-text-secondary">点击量（近30天）</div> |
|||
<div class="monitor-count-card-trend ele-text-success"> |
|||
<i class="el-icon-arrow-up"></i> |
|||
<span>110.5%</span> |
|||
</div> |
|||
<el-tooltip content="指标说明" placement="top"> |
|||
<i class="el-icon-_question ele-text-placeholder monitor-count-card-tips"></i> |
|||
</el-tooltip> |
|||
</el-card> |
|||
</el-col> |
|||
<el-col :sm="6" :xs="12"> |
|||
<el-card shadow="never" class="monitor-count-card"> |
|||
<el-tag size="large" type="danger" class="ele-tag-round"> |
|||
<i class="el-icon-s-flag"></i> |
|||
</el-tag> |
|||
<div class="monitor-count-card-num">826.0</div> |
|||
<div class="monitor-count-card-text ele-text-secondary">到达量（近30天）</div> |
|||
<div class="monitor-count-card-trend ele-text-danger"> |
|||
<i class="el-icon-arrow-down"></i> |
|||
<span>15.5%</span> |
|||
</div> |
|||
</el-card> |
|||
</el-col> |
|||
<el-col :sm="6" :xs="12"> |
|||
<el-card shadow="never" class="monitor-count-card"> |
|||
<el-tag size="large" type="success" class="ele-tag-round"> |
|||
<i class="el-icon-_flash-solid"></i> |
|||
</el-tag> |
|||
<div class="monitor-count-card-num">28.8 %</div> |
|||
<div class="monitor-count-card-text">转化率（近30天）</div> |
|||
<div class="monitor-count-card-trend ele-text-success"> |
|||
<i class="el-icon-arrow-up"></i> |
|||
<span>65.8%</span> |
|||
</div> |
|||
<el-tooltip content="指标说明" placement="top"> |
|||
<i class="el-icon-_question ele-text-placeholder monitor-count-card-tips"></i> |
|||
</el-tooltip> |
|||
</el-card> |
|||
</el-col> |
|||
</el-row> |
|||
<!-- 用户分布、浏览器分布 --> |
|||
<el-row :gutter="15"> |
|||
<el-col :md="18"> |
|||
<el-card shadow="never" header="用户分布"> |
|||
<el-row> |
|||
<el-col :sm="18"> |
|||
<ele-chart |
|||
:option="userCountMapOption" |
|||
style="height: 438px;"/> |
|||
</el-col> |
|||
<el-col :sm="6"> |
|||
<ele-chart |
|||
:option="userCountChartOption" |
|||
style="height: 438px;"/> |
|||
</el-col> |
|||
</el-row> |
|||
</el-card> |
|||
</el-col> |
|||
<el-col :md="6"> |
|||
<el-row :gutter="15"> |
|||
<el-col :md="24" :sm="12"> |
|||
<el-card shadow="never" header="在线人数"> |
|||
<div class="monitor-online-num-card"> |
|||
<div class="monitor-online-num-text">{{ currentTime }}</div> |
|||
<div class="monitor-online-num-title"> |
|||
<vue-count-up |
|||
:end-val="228" |
|||
@ready="(ins) => { onlineNumAnimIns = ins; }"/> |
|||
</div> |
|||
<div class="monitor-online-num-text">在线总人数</div> |
|||
<ele-dot :text="updateTimeText"/> |
|||
</div> |
|||
</el-card> |
|||
</el-col> |
|||
<el-col :md="24" :sm="12"> |
|||
<el-card |
|||
shadow="never" |
|||
header="浏览器分布" |
|||
body-style="padding: 0 10px;"> |
|||
<ele-chart |
|||
:option="browserChartOption" |
|||
style="height: 240px;"/> |
|||
</el-card> |
|||
</el-col> |
|||
</el-row> |
|||
</el-col> |
|||
<el-col :md="12"> |
|||
<el-card shadow="never" header="用户评价"> |
|||
<div class="ele-cell ele-cell-align-bottom"> |
|||
<div style="font-size: 48px;">4.5</div> |
|||
<div class="ele-cell-content" style="padding-bottom: 8px;"> |
|||
<el-rate |
|||
v-model="userRate" |
|||
disabled |
|||
show-score |
|||
text-color="#F7BA2A" |
|||
score-template="很棒"/> |
|||
</div> |
|||
</div> |
|||
<div class="ele-cell" style="margin: 15px 0;"> |
|||
<div style="font-size: 28px;" 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"> |
|||
<el-progress :percentage="60" :show-text="false" status="success"/> |
|||
</div> |
|||
<div style="width: 80px;white-space: nowrap;" class="ele-text-secondary"> |
|||
<span><s/><i class="el-icon-star-on"></i></span> |
|||
<span> 5 : 368人</span> |
|||
</div> |
|||
</div> |
|||
<div class="ele-cell"> |
|||
<div class="ele-cell-content"> |
|||
<el-progress :percentage="40" :show-text="false"/> |
|||
</div> |
|||
<div style="width: 80px;white-space: nowrap;" class="ele-text-secondary"> |
|||
<span><s/><i class="el-icon-star-on"></i></span> |
|||
<span> 4 : 256人</span> |
|||
</div> |
|||
</div> |
|||
<div class="ele-cell"> |
|||
<div class="ele-cell-content"> |
|||
<el-progress :percentage="20" :show-text="false" status="warning"/> |
|||
</div> |
|||
<div style="width: 80px;white-space: nowrap;" class="ele-text-secondary"> |
|||
<span><s/><i class="el-icon-star-on"></i></span> |
|||
<span> 3 : 49人</span> |
|||
</div> |
|||
</div> |
|||
<div class="ele-cell"> |
|||
<div class="ele-cell-content"> |
|||
<el-progress :percentage="10" :show-text="false" status="exception"/> |
|||
</div> |
|||
<div style="width: 80px;white-space: nowrap;" class="ele-text-secondary"> |
|||
<span><s/><i class="el-icon-star-on"></i></span> |
|||
<span> 2 : 14人</span> |
|||
</div> |
|||
</div> |
|||
<div class="ele-cell"> |
|||
<div class="ele-cell-content"> |
|||
<el-progress :percentage="0" :show-text="false"/> |
|||
</div> |
|||
<div style="width: 80px;white-space: nowrap;" class="ele-text-secondary"> |
|||
<span><s/><i class="el-icon-star-on"></i></span> |
|||
<span> 1 : 0人</span> |
|||
</div> |
|||
</div> |
|||
</el-card> |
|||
</el-col> |
|||
<el-col :md="6" :sm="12"> |
|||
<el-card shadow="never" header="用户满意度"> |
|||
<div class="ele-cell" style="margin: 15px 0;"> |
|||
<div class="ele-cell-content ele-text-center" style="font-size: 24px;">856</div> |
|||
<div class="ele-cell-content ele-text-center"> |
|||
<div class="monitor-face-smile"> |
|||
<span></span> |
|||
</div> |
|||
<div class="ele-text-secondary" style="margin-top:5px;">正面评论</div> |
|||
</div> |
|||
<h2 class="ele-cell-content ele-text-success ele-text-center">82%</h2> |
|||
</div> |
|||
<el-divider/> |
|||
<div class="ele-cell" style="margin: 15px 0 12px 0;"> |
|||
<div class="ele-cell-content ele-text-center" style="font-size: 24px;">60</div> |
|||
<div class="ele-cell-content ele-text-center"> |
|||
<div class="monitor-face-cry"> |
|||
<span></span> |
|||
</div> |
|||
<div class="ele-text-secondary" style="margin-top: 5px;">负面评论</div> |
|||
</div> |
|||
<h2 class="ele-cell-content ele-text-danger ele-text-center">9%</h2> |
|||
</div> |
|||
</el-card> |
|||
</el-col> |
|||
<el-col :md="6" :sm="12"> |
|||
<el-card shadow="never" header="用户活跃度"> |
|||
<div class="ele-cell" style="padding: 34px 0;"> |
|||
<div class="ele-cell-content ele-text-center"> |
|||
<div class="monitor-progress-group"> |
|||
<el-progress |
|||
type="circle" |
|||
:percentage="70" |
|||
status="success" |
|||
:show-text="false" |
|||
:width="140"/> |
|||
<el-progress |
|||
type="circle" |
|||
:percentage="60" |
|||
:show-text="false" |
|||
:width="115" |
|||
:stroke-width="5"/> |
|||
<el-progress |
|||
type="circle" |
|||
:percentage="35" |
|||
status="exception" |
|||
:show-text="false" |
|||
:width="90" |
|||
:stroke-width="4"/> |
|||
</div> |
|||
</div> |
|||
<div class="monitor-progress-legends"> |
|||
<div class="ele-text-small"> |
|||
<ele-dot :ripple="false" text="活跃率: 70%"/> |
|||
</div> |
|||
<div class="ele-text-small"> |
|||
<ele-dot type="success" :ripple="false" text="留存率: 60%"/> |
|||
</div> |
|||
<div class="ele-text-small"> |
|||
<ele-dot type="danger" :ripple="false" text="跳出率: 35%"/> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-card> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import VueCountUp from 'vue-countup-v2'; |
|||
import EleChart from 'ele-admin/packages/ele-chart'; |
|||
|
|||
export default { |
|||
name: 'DashboardMonitor', |
|||
components: {VueCountUp, EleChart}, |
|||
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' |
|||
} |
|||
], |
|||
// 在线总人数倒计时 |
|||
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 {}; |
|||
} |
|||
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: ['rgba(24,144,255,1)', 'rgba(24,144,255,.1)'] |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: '用户数', |
|||
type: 'map', |
|||
mapType: '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} |
|||
]; |
|||
} |
|||
}, |
|||
beforeDestroy() { |
|||
// 销毁定时器 |
|||
if (this.onlineNumTimer) { |
|||
clearInterval(this.onlineNumTimer); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/* 统计卡片 */ |
|||
.monitor-count-card ::v-deep .el-card__body { |
|||
padding-top: 18px; |
|||
text-align: center; |
|||
position: relative; |
|||
} |
|||
|
|||
.monitor-count-card ::v-deep .el-tag { |
|||
border-color: transparent; |
|||
font-size: 15px; |
|||
} |
|||
|
|||
.monitor-count-card .monitor-count-card-num { |
|||
font-weight: 500; |
|||
font-size: 32px; |
|||
margin-top: 12px; |
|||
} |
|||
|
|||
.monitor-count-card .monitor-count-card-text { |
|||
font-size: 12px; |
|||
margin: 10px 0; |
|||
} |
|||
|
|||
.monitor-count-card .monitor-count-card-trend { |
|||
font-weight: 600; |
|||
padding: 6px 0; |
|||
} |
|||
|
|||
.monitor-count-card .monitor-count-card-trend > i { |
|||
font-size: 12px; |
|||
font-weight: 600; |
|||
margin-right: 5px; |
|||
} |
|||
|
|||
.monitor-count-card .monitor-count-card-tips { |
|||
position: absolute; |
|||
top: 15px; |
|||
right: 15px; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
/* 当前在线人数卡片 */ |
|||
.monitor-online-num-card { |
|||
text-align: center; |
|||
padding: 5px 0; |
|||
} |
|||
|
|||
.monitor-online-num-text { |
|||
margin-bottom: 5px; |
|||
} |
|||
|
|||
.monitor-online-num-title { |
|||
font-size: 48px; |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
@media screen and (max-width: 992px) { |
|||
.monitor-online-num-card { |
|||
padding: 38px 0; |
|||
} |
|||
} |
|||
|
|||
/* 笑脸、哭脸 */ |
|||
.monitor-face-smile, |
|||
.monitor-face-cry { |
|||
width: 50px; |
|||
height: 50px; |
|||
display: inline-block; |
|||
background-color: #FBD971; |
|||
border-radius: 50%; |
|||
position: relative; |
|||
} |
|||
|
|||
.monitor-face-smile > span, |
|||
.monitor-face-smile:before, |
|||
.monitor-face-smile:after, |
|||
.monitor-face-cry > span, |
|||
.monitor-face-cry:before, |
|||
.monitor-face-cry:after { |
|||
width: 22px; |
|||
height: 22px; |
|||
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: 6px; |
|||
height: 6px; |
|||
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 > span { |
|||
transform: rotate(45deg); |
|||
bottom: -6px; |
|||
} |
|||
|
|||
/* 圆形进度条组合 */ |
|||
.monitor-progress-group { |
|||
position: relative; |
|||
display: inline-block; |
|||
} |
|||
|
|||
.monitor-progress-group .el-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> |
|||
@ -0,0 +1,622 @@ |
|||
<template> |
|||
<div class="ele-body ele-body-card"> |
|||
<!-- 顶部卡片 --> |
|||
<el-card shadow="never" body-style="padding: 20px;"> |
|||
<div class="ele-cell workplace-user-card"> |
|||
<div class="ele-cell-content ele-cell"> |
|||
<el-avatar :size="68" :src="loginUser.avatar"/> |
|||
<div class="ele-cell-content"> |
|||
<h4 class="ele-elip">早安，{{ loginUser.nickname }}，开始您一天的工作吧！</h4> |
|||
<div class="ele-text-secondary ele-elip" style="margin-top: 8px;"> |
|||
<i class="el-icon-heavy-rain"></i> |
|||
<span><s/><s/>今日阴转小雨，22℃ - 32℃，出门记得带伞哦。</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="workplace-count-group"> |
|||
<div class="workplace-count-item"> |
|||
<div class="workplace-count-header"> |
|||
<el-tag size="small" class="ele-tag-round"> |
|||
<i class="el-icon-menu"></i> |
|||
</el-tag> |
|||
<span class="workplace-count-name">项目数</span> |
|||
</div> |
|||
<div class="workplace-count-num">3</div> |
|||
</div> |
|||
<div class="workplace-count-item"> |
|||
<div class="workplace-count-header"> |
|||
<el-tag type="warning" size="small" class="ele-tag-round"> |
|||
<i class="el-icon-finished"></i> |
|||
</el-tag> |
|||
<span class="workplace-count-name">待办项</span> |
|||
</div> |
|||
<div class="workplace-count-num">6 / 24</div> |
|||
</div> |
|||
<div class="workplace-count-item"> |
|||
<div class="workplace-count-header"> |
|||
<el-tag type="success" size="small" class="ele-tag-round"> |
|||
<i class="el-icon-bell"></i> |
|||
</el-tag> |
|||
<span class="workplace-count-name">消息</span> |
|||
</div> |
|||
<div class="workplace-count-num">1,689</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-card> |
|||
<!-- 快捷方式 --> |
|||
<el-row :gutter="15"> |
|||
<el-col :md="3" :sm="6" :xs="12"> |
|||
<el-card shadow="hover" body-style="padding: 0;"> |
|||
<router-link to="/system/user" class="app-link-block"> |
|||
<i class="app-link-icon el-icon-user"></i> |
|||
<div class="app-link-title">用户</div> |
|||
</router-link> |
|||
</el-card> |
|||
</el-col> |
|||
<el-col :md="3" :sm="6" :xs="12"> |
|||
<el-card shadow="hover" body-style="padding: 0;"> |
|||
<router-link to="/dashboard/analysis" class="app-link-block"> |
|||
<i class="app-link-icon el-icon-data-line" style="color: #95de64;"></i> |
|||
<div class="app-link-title">分析</div> |
|||
</router-link> |
|||
</el-card> |
|||
</el-col> |
|||
<el-col :md="3" :sm="6" :xs="12"> |
|||
<el-card shadow="hover" body-style="padding: 0;"> |
|||
<router-link to="/list/card/project" class="app-link-block"> |
|||
<i class="app-link-icon el-icon-shopping-cart-2" style="color: #ff9c6e;"></i> |
|||
<div class="app-link-title">商品</div> |
|||
</router-link> |
|||
</el-card> |
|||
</el-col> |
|||
<el-col :md="3" :sm="6" :xs="12"> |
|||
<el-card shadow="hover" body-style="padding: 0;"> |
|||
<router-link to="/list/basic" class="app-link-block"> |
|||
<i class="app-link-icon el-icon-tickets" style="color: #b37feb;"></i> |
|||
<div class="app-link-title">订单</div> |
|||
</router-link> |
|||
</el-card> |
|||
</el-col> |
|||
<el-col :md="3" :sm="6" :xs="12"> |
|||
<el-card shadow="hover" body-style="padding: 0;"> |
|||
<router-link to="/list/advanced" class="app-link-block"> |
|||
<i class="app-link-icon el-icon-bank-card" style="color: #ffd666;"></i> |
|||
<div class="app-link-title">票据</div> |
|||
</router-link> |
|||
</el-card> |
|||
</el-col> |
|||
<el-col :md="3" :sm="6" :xs="12"> |
|||
<el-card shadow="hover" body-style="padding: 0;"> |
|||
<router-link to="/user/message" class="app-link-block"> |
|||
<i class="app-link-icon el-icon-message" style="color: #5cdbd3;"></i> |
|||
<div class="app-link-title">消息</div> |
|||
</router-link> |
|||
</el-card> |
|||
</el-col> |
|||
<el-col :md="3" :sm="6" :xs="12"> |
|||
<el-card shadow="hover" body-style="padding: 0;"> |
|||
<router-link to="/extension/more" class="app-link-block"> |
|||
<i class="app-link-icon el-icon-discount" style="color: #ff85c0;"></i> |
|||
<div class="app-link-title">标签</div> |
|||
</router-link> |
|||
</el-card> |
|||
</el-col> |
|||
<el-col :md="3" :sm="6" :xs="12"> |
|||
<el-card shadow="hover" body-style="padding: 0;"> |
|||
<router-link to="/user/info" class="app-link-block"> |
|||
<i class="app-link-icon el-icon-s-operation" style="color: #ffc069;"></i> |
|||
<div class="app-link-title">配置</div> |
|||
</router-link> |
|||
</el-card> |
|||
</el-col> |
|||
</el-row> |
|||
<!-- 最新动态、我的任务、本月目标 --> |
|||
<el-row :gutter="15"> |
|||
<el-col :sm="8"> |
|||
<el-card |
|||
shadow="never" |
|||
header="最新动态" |
|||
body-style="padding: 0;"> |
|||
<el-scrollbar |
|||
style="height: 318px;" |
|||
wrapStyle="overflow-x: hidden;" |
|||
viewStyle="padding: 20px 10px;"> |
|||
<el-timeline |
|||
:reverse="false" |
|||
class="ele-timeline ele-timeline-act"> |
|||
<el-timeline-item |
|||
v-for="(act, index) in activities" |
|||
:key="index" |
|||
:timestamp="act.timestamp" |
|||
:type="act.primary ? 'primary' : ''"> |
|||
{{ act.title }} |
|||
</el-timeline-item> |
|||
</el-timeline> |
|||
</el-scrollbar> |
|||
</el-card> |
|||
</el-col> |
|||
<el-col :sm="8"> |
|||
<el-card |
|||
class="workplace-table-card" |
|||
shadow="never" |
|||
header="我的任务" |
|||
body-style="padding: 0;"> |
|||
<el-table-draggable handle=".sort-handle" :animate="300"> |
|||
<el-table :data="taskList" :height="318" class="ele-table-default-head"> |
|||
<el-table-column width="38" align="center"> |
|||
<i class="sort-handle el-icon-_nav ele-text-placeholder"></i> |
|||
</el-table-column> |
|||
<el-table-column label="优先级" width="65"> |
|||
<template slot-scope="{row}"> |
|||
<el-tag |
|||
size="mini" |
|||
:type="['danger','warning','primary'][row.priority-1]" |
|||
class="ele-tag-round"> |
|||
{{ row.priority }} |
|||
</el-tag> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="任务名称"> |
|||
<template slot-scope="{row}"> |
|||
<el-link |
|||
type="primary" |
|||
:underline="false"> |
|||
{{ row.taskName }} |
|||
</el-link> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="状态" width="70" align="center"> |
|||
<template slot-scope="{row}"> |
|||
<span |
|||
:class="['ele-text-warning','ele-text-success','ele-text-info'][row.state]"> |
|||
{{ ['未开始', '进行中', '已完成'][row.state] }} |
|||
</span> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</el-table-draggable> |
|||
</el-card> |
|||
</el-col> |
|||
<el-col :sm="8"> |
|||
<el-card shadow="never" header="本月目标"> |
|||
<div class="workplace-goal-group"> |
|||
<el-progress |
|||
type="dashboard" |
|||
:percentage="80" |
|||
:width="170" |
|||
:format="()=>{return ''}"/> |
|||
<div class="workplace-goal-content"> |
|||
<el-tag |
|||
size="large" |
|||
class="ele-tag-round"> |
|||
<i class="el-icon-s-data"></i> |
|||
</el-tag> |
|||
<div class="workplace-goal-num">285</div> |
|||
</div> |
|||
<div class="workplace-goal-text">恭喜，本月目标已达标！</div> |
|||
</div> |
|||
</el-card> |
|||
</el-col> |
|||
<el-col :sm="16"> |
|||
<el-card |
|||
class="workplace-table-card" |
|||
shadow="never" |
|||
header="项目进度" |
|||
body-style="padding: 12px;"> |
|||
<el-table :data="projectList" height="358"> |
|||
<el-table-column |
|||
type="index" |
|||
width="35" |
|||
min-width="35" |
|||
align="right"/> |
|||
<el-table-column |
|||
label="项目名称" |
|||
min-width="110"> |
|||
<template slot-scope="{row}"> |
|||
<el-link |
|||
type="primary" |
|||
:underline="false"> |
|||
{{ row.projectName }} |
|||
</el-link> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="startDate" |
|||
label="开始时间" |
|||
width="95" |
|||
min-width="80" |
|||
align="center"/> |
|||
<el-table-column |
|||
prop="endDate" |
|||
label="结束时间" |
|||
width="95" |
|||
min-width="80" |
|||
align="center"/> |
|||
<el-table-column |
|||
label="状态" |
|||
width="70" |
|||
min-width="60" |
|||
align="center"> |
|||
<template slot-scope="{row}"> |
|||
<span |
|||
:class="['ele-text-success','ele-text-danger','ele-text-warning','ele-text-info ele-text-delete'][row.state]"> |
|||
{{ ['进行中', '已延期', '未开始', '已结束'][row.state] }} |
|||
</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="进度" width="160" min-width="100" align="center"> |
|||
<template slot-scope="{row}"> |
|||
<el-progress :percentage="row.progress" class="ele-text-small"/> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</el-card> |
|||
</el-col> |
|||
<el-col :sm="8"> |
|||
<el-card |
|||
shadow="never" |
|||
header="小组成员" |
|||
body-style="padding: 19px 0;"> |
|||
<div |
|||
v-for="(item,index) in userList" |
|||
:key="index" |
|||
class="ele-cell user-list-item"> |
|||
<el-avatar :size="42" :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> |
|||
<el-tag |
|||
size="mini" |
|||
:type="['success','danger'][item.state]"> |
|||
{{ ['在线', '离线'][item.state] }} |
|||
</el-tag> |
|||
</div> |
|||
</el-card> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'DashboardWorkplace', |
|||
data() { |
|||
return { |
|||
// 最新动态数据 |
|||
activities: [ |
|||
{ |
|||
title: 'SunSmile 解决了bug 登录提示操作失败', |
|||
timestamp: '20:30', |
|||
primary: false |
|||
}, |
|||
{ |
|||
title: 'Jasmine 解决了bug 按钮颜色与设计不符', |
|||
timestamp: '19:30', |
|||
primary: false |
|||
}, |
|||
{ |
|||
title: '项目经理 指派了任务 解决项目一的bug', |
|||
timestamp: '18:30', |
|||
primary: true |
|||
}, |
|||
{ |
|||
title: '项目经理 指派了任务 解决项目二的bug', |
|||
timestamp: '17:30', |
|||
primary: true |
|||
}, |
|||
{ |
|||
title: '项目经理 指派了任务 解决项目三的bug', |
|||
timestamp: '16:30', |
|||
primary: true |
|||
}, |
|||
{ |
|||
title: '项目经理 指派了任务 解决项目四的bug', |
|||
timestamp: '15:30', |
|||
primary: false |
|||
}, |
|||
{ |
|||
title: '项目经理 指派了任务 解决项目五的bug', |
|||
timestamp: '14:30', |
|||
primary: false |
|||
}, |
|||
{ |
|||
title: '项目经理 指派了任务 解决项目六的bug', |
|||
timestamp: '12:30', |
|||
primary: false |
|||
}, |
|||
{ |
|||
title: '项目经理 指派了任务 解决项目七的bug', |
|||
timestamp: '11:30', |
|||
primary: true |
|||
}, |
|||
{ |
|||
title: '项目经理 指派了任务 解决项目八的bug', |
|||
timestamp: '10:30', |
|||
primary: false |
|||
}, |
|||
{ |
|||
title: '项目经理 指派了任务 解决项目九的bug', |
|||
timestamp: '09:30', |
|||
primary: false |
|||
}, |
|||
{ |
|||
title: '项目经理 指派了任务 解决项目十的bug', |
|||
timestamp: '08:30', |
|||
primary: false |
|||
} |
|||
], |
|||
// 我的任务数据 |
|||
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: [ |
|||
{ |
|||
projectName: '项目0000001', |
|||
state: 0, |
|||
startDate: '2020-03-01', |
|||
endDate: '2020-06-01', |
|||
progress: 30 |
|||
}, |
|||
{ |
|||
projectName: '项目0000002', |
|||
state: 0, |
|||
startDate: '2020-03-01', |
|||
endDate: '2020-08-01', |
|||
progress: 10 |
|||
}, |
|||
{ |
|||
projectName: '项目0000003', |
|||
state: 1, |
|||
startDate: '2020-01-01', |
|||
endDate: '2020-05-01', |
|||
progress: 60 |
|||
}, |
|||
{ |
|||
projectName: '项目0000004', |
|||
state: 1, |
|||
startDate: '2020-06-01', |
|||
endDate: '2020-10-01', |
|||
progress: 0 |
|||
}, |
|||
{ |
|||
projectName: '项目0000005', |
|||
state: 2, startDate: '2020-01-01', |
|||
endDate: '2020-03-01', |
|||
progress: 100 |
|||
}, |
|||
{ |
|||
projectName: '项目0000006', |
|||
state: 3, |
|||
startDate: '2020-01-01', |
|||
endDate: '2020-03-01', |
|||
progress: 100 |
|||
}, |
|||
{ |
|||
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; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/* 顶部用户信息卡片 */ |
|||
.workplace-user-card .ele-cell-content { |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.workplace-count-group { |
|||
white-space: nowrap; |
|||
} |
|||
|
|||
.workplace-count-item { |
|||
padding: 0 5px 0 25px; |
|||
box-sizing: border-box; |
|||
display: inline-block; |
|||
text-align: right; |
|||
} |
|||
|
|||
.workplace-count-name { |
|||
padding-left: 8px; |
|||
} |
|||
|
|||
.workplace-count-num { |
|||
font-size: 24px; |
|||
margin-top: 6px; |
|||
} |
|||
|
|||
@media screen and (max-width: 992px) { |
|||
.workplace-count-item { |
|||
padding: 0 5px 0 10px; |
|||
} |
|||
} |
|||
|
|||
@media screen and (max-width: 768px) { |
|||
.workplace-user-card, |
|||
.workplace-count-group { |
|||
display: block; |
|||
} |
|||
|
|||
.workplace-count-group { |
|||
margin-top: 15px; |
|||
text-align: right; |
|||
} |
|||
} |
|||
|
|||
/* 快捷方式 */ |
|||
.app-link-block { |
|||
display: block; |
|||
color: inherit; |
|||
padding: 15px 0; |
|||
text-align: center; |
|||
text-decoration: none; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.app-link-block .app-link-icon { |
|||
color: #69c0ff; |
|||
font-size: 30px; |
|||
margin-top: 5px; |
|||
} |
|||
|
|||
.app-link-block .app-link-title { |
|||
margin-top: 8px; |
|||
} |
|||
|
|||
/* 最新动态时间轴 */ |
|||
.ele-timeline-act { |
|||
padding-left: 50px; |
|||
} |
|||
|
|||
.ele-timeline-act ::v-deep .el-timeline-item__timestamp { |
|||
margin: 0; |
|||
position: absolute; |
|||
top: 3px; |
|||
left: -45px; |
|||
} |
|||
|
|||
.ele-timeline-act ::v-deep .el-timeline-item { |
|||
padding-bottom: 19px; |
|||
} |
|||
|
|||
.ele-timeline-act ::v-deep .el-timeline-item:last-child { |
|||
padding-bottom: 0; |
|||
} |
|||
|
|||
/* 表格 */ |
|||
.workplace-table-card ::v-deep .el-table tbody > .el-table__row:last-child td { |
|||
border-bottom: none; |
|||
} |
|||
|
|||
.workplace-table-card ::v-deep .el-table:before { |
|||
display: none; |
|||
} |
|||
|
|||
.workplace-table-card .sort-handle { |
|||
cursor: move; |
|||
font-size: 18px; |
|||
vertical-align: middle; |
|||
} |
|||
|
|||
.workplace-table-card ::v-deep .el-table__row.sortable-chosen { |
|||
background-color: hsla(0, 0%, 60%, .1); |
|||
} |
|||
|
|||
.workplace-table-card ::v-deep .el-table__row.sortable-chosen td { |
|||
background-color: transparent; |
|||
} |
|||
|
|||
/* 本月目标 */ |
|||
.workplace-goal-group { |
|||
text-align: center; |
|||
position: relative; |
|||
padding: 48px 0; |
|||
} |
|||
|
|||
.workplace-goal-group .workplace-goal-content { |
|||
position: absolute; |
|||
top: 90px; |
|||
left: 0; |
|||
width: 100%; |
|||
} |
|||
|
|||
.workplace-goal-group .workplace-goal-num { |
|||
font-size: 40px; |
|||
margin-top: 15px; |
|||
} |
|||
|
|||
/* 小组成员 */ |
|||
.user-list-item { |
|||
padding: 13px 18px; |
|||
} |
|||
|
|||
.user-list-item + .user-list-item { |
|||
border-top: 1px solid hsla(0, 0%, 60%, .15); |
|||
} |
|||
|
|||
.user-list-item .ele-cell-desc { |
|||
margin-top: 5px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,247 @@ |
|||
<template> |
|||
<div class="ele-body" style="padding-bottom: 71px;"> |
|||
<el-form |
|||
ref="trainingForm" |
|||
:model="form" |
|||
:rules="rules" |
|||
label-width="90px"> |
|||
<el-card |
|||
shadow="never" |
|||
header="发布实训活动" |
|||
body-style="padding: 22px 22px 3px 22px;"> |
|||
<el-row :gutter="15"> |
|||
<el-col :sm="8"> |
|||
<el-form-item label="实训名称:" prop="title"> |
|||
<el-input |
|||
v-model="form.title" |
|||
placeholder="请输入实训名称" |
|||
clearable/> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :sm="8"> |
|||
<el-form-item label="起止日期:" prop="datetime"> |
|||
<el-date-picker |
|||
v-model="form.datetime" |
|||
type="daterange" |
|||
unlink-panels |
|||
range-separator="至" |
|||
start-placeholder="开始日期" |
|||
end-placeholder="结束日期" |
|||
class="ele-fluid"/> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :sm="8"> |
|||
<el-form-item label="实训地点:" prop="address"> |
|||
<el-select |
|||
v-model="form.address" |
|||
placeholder="请选择地点" |
|||
class="ele-fluid" |
|||
clearable> |
|||
<el-option label="地点一" :value="1"/> |
|||
<el-option label="地点二" :value="2"/> |
|||
<el-option label="地点三" :value="3"/> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :sm="24"> |
|||
<el-form-item label="实训内容:" prop="content"> |
|||
<el-input |
|||
v-model="form.content" |
|||
placeholder="请输入实训内容" |
|||
:rows="4" |
|||
type="textarea"/> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
</el-card> |
|||
<el-card shadow="never" header="选择实训班级:"> |
|||
<el-row :gutter="15"> |
|||
<el-col :sm="12"> |
|||
<!-- 未选择的班级数据表格 --> |
|||
<ele-pro-table |
|||
:datasource="unChooseClass" |
|||
:columns="columns" |
|||
sub-title="未选班级:" |
|||
height="535px" |
|||
emptyText="已全部选择" |
|||
:toolkit="[]" |
|||
layout="total, prev, pager, next, jumper"> |
|||
<template slot="toolkit"> |
|||
<el-button |
|||
@click="addAll" |
|||
size="mini" |
|||
class="ele-btn-icon">全部添加 |
|||
</el-button> |
|||
</template> |
|||
<template slot="action" slot-scope="{row}"> |
|||
<el-button |
|||
@click="add(row)" |
|||
size="mini">添加 |
|||
</el-button> |
|||
</template> |
|||
</ele-pro-table> |
|||
</el-col> |
|||
<el-col :sm="12"> |
|||
<!-- 已选择的班级数据表格 --> |
|||
<ele-pro-table |
|||
:datasource="chooseClasses" |
|||
:columns="columns" |
|||
sub-title="已选班级:" |
|||
height="535px" |
|||
emptyText="未选择班级" |
|||
:toolkit="[]" |
|||
layout="total, prev, pager, next, jumper"> |
|||
<template slot="toolkit"> |
|||
<el-button |
|||
@click="removeAll" |
|||
size="mini" |
|||
type="danger" |
|||
plain |
|||
class="ele-btn-icon">全部移除 |
|||
</el-button> |
|||
</template> |
|||
<template slot="action" slot-scope="{row}"> |
|||
<el-button |
|||
@click="remove(row)" |
|||
type="danger" |
|||
plain |
|||
size="mini">移除 |
|||
</el-button> |
|||
</template> |
|||
</ele-pro-table> |
|||
</el-col> |
|||
</el-row> |
|||
</el-card> |
|||
<!-- 底部工具栏 --> |
|||
<div class="ele-bottom-tool"> |
|||
<div class="ele-bottom-tool-actions"> |
|||
<el-button type="primary" @click="submit" :loading="loading">发布</el-button> |
|||
</div> |
|||
</div> |
|||
</el-form> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'ExampleChoose', |
|||
data() { |
|||
return { |
|||
// 加载状态 |
|||
loading: false, |
|||
// 表单数据 |
|||
form: {}, |
|||
// 表单验证规则 |
|||
rules: { |
|||
title: [ |
|||
{required: true, message: '请输入实训名称', trigger: 'blur'} |
|||
], |
|||
datetime: [ |
|||
{required: true, message: '请选择起止日期', trigger: 'blur'} |
|||
], |
|||
content: [ |
|||
{required: true, message: '请输入实训内容', trigger: 'blur'} |
|||
], |
|||
address: [ |
|||
{required: true, message: '请选择实训地点', trigger: 'blur'} |
|||
] |
|||
}, |
|||
// 全部实训班级 |
|||
classes: [], |
|||
// 已选择的班级数据 |
|||
chooseClasses: [], |
|||
columns: [ |
|||
{ |
|||
columnKey: 'action', |
|||
label: '操作', |
|||
width: 100, |
|||
align: 'center', |
|||
slot: 'action' |
|||
}, |
|||
{ |
|||
prop: 'classesName', |
|||
label: '班级名称', |
|||
showOverflowTooltip: true, |
|||
minWidth: 110, |
|||
sortable: 'custom' |
|||
}, |
|||
{ |
|||
prop: 'major', |
|||
label: '专业', |
|||
showOverflowTooltip: true, |
|||
minWidth: 110, |
|||
sortable: 'custom' |
|||
}, |
|||
{ |
|||
prop: 'college', |
|||
label: '学院', |
|||
showOverflowTooltip: true, |
|||
minWidth: 110, |
|||
sortable: 'custom' |
|||
} |
|||
] |
|||
} |
|||
}, |
|||
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['trainingForm'].validate((valid) => { |
|||
if (valid) { |
|||
if (!this.chooseClasses.length) { |
|||
return this.$message.error('请选择实训班级'); |
|||
} |
|||
this.loading = true; |
|||
setTimeout(() => { |
|||
this.loading = false; |
|||
this.$message({type: 'success', message: '发布成功'}); |
|||
}, 1500); |
|||
} else { |
|||
return false; |
|||
} |
|||
}); |
|||
}, |
|||
/* 添加 */ |
|||
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> |
|||
@ -0,0 +1,310 @@ |
|||
<template> |
|||
<el-dialog |
|||
title="卷内文件调整" |
|||
width="980px" |
|||
top="5vh" |
|||
@opened="onOpened" |
|||
@closed="onClosed" |
|||
:visible="visible" |
|||
@update:visible="updateVisible" |
|||
custom-class="demo-file-sort-dialog" |
|||
:lock-scroll="false"> |
|||
<el-row :gutter="15"> |
|||
<el-col :md="8"> |
|||
<ele-pro-table |
|||
ref="docTable" |
|||
sub-title="案卷列表" |
|||
:datasource="documents" |
|||
:columns="columns1" |
|||
highlight-current-row |
|||
height="400px" |
|||
:toolkit="[]" |
|||
:need-page="false" |
|||
:current.sync="current" |
|||
class="demo-file-sort-table"> |
|||
</ele-pro-table> |
|||
</el-col> |
|||
<el-col :md="8"> |
|||
<ele-pro-table |
|||
ref="fileTable" |
|||
:loading="loading" |
|||
sub-title="卷内列表" |
|||
:datasource="data1" |
|||
:columns="columns2" |
|||
height="400px" |
|||
:selection.sync="selection1" |
|||
:need-page="false" |
|||
:toolkit="[]"> |
|||
<template slot="toolkit"> |
|||
<el-button |
|||
@click="moveUp" |
|||
type="primary" |
|||
icon="el-icon-top" |
|||
class="ele-btn-icon" |
|||
size="mini">上移 |
|||
</el-button> |
|||
<el-button |
|||
@click="moveDown" |
|||
type="primary" |
|||
icon="el-icon-bottom" |
|||
class="ele-btn-icon" |
|||
size="mini">下移 |
|||
</el-button> |
|||
<el-button |
|||
@click="moveOut" |
|||
type="primary" |
|||
icon="el-icon-top-right" |
|||
class="ele-btn-icon" |
|||
size="mini">调出 |
|||
</el-button> |
|||
</template> |
|||
</ele-pro-table> |
|||
</el-col> |
|||
<el-col :md="8"> |
|||
<ele-pro-table |
|||
:loading="loading" |
|||
sub-title="未归档列表" |
|||
:datasource="data2" |
|||
:columns="columns2" |
|||
height="400px" |
|||
:selection.sync="selection2" |
|||
:need-page="false" |
|||
:toolkit="[]"> |
|||
<template slot="toolkit"> |
|||
<el-button |
|||
@click="moveIn" |
|||
type="primary" |
|||
icon="el-icon-top-left" |
|||
class="ele-btn-icon" |
|||
size="mini">调入 |
|||
</el-button> |
|||
</template> |
|||
</ele-pro-table> |
|||
</el-col> |
|||
</el-row> |
|||
<div slot="footer"> |
|||
<el-button @click="close">取消</el-button> |
|||
<el-button type="primary" @click="save">保存</el-button> |
|||
</div> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'FileSort', |
|||
props: { |
|||
// 弹窗是否打开 |
|||
visible: Boolean, |
|||
// 案卷列表 |
|||
documents: { |
|||
type: Array, |
|||
required: true |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
// 案卷表格列配置 |
|||
columns1: [ |
|||
{ |
|||
prop: 'title', |
|||
label: '案卷题名', |
|||
showOverflowTooltip: true |
|||
}, |
|||
{ |
|||
prop: 'piece_no', |
|||
label: '案卷档号', |
|||
showOverflowTooltip: true |
|||
} |
|||
], |
|||
// 卷内表格列配置 |
|||
columns2: [ |
|||
{ |
|||
columnKey: 'selection', |
|||
type: 'selection', |
|||
width: 45, |
|||
align: 'center' |
|||
}, |
|||
{ |
|||
prop: 'title', |
|||
label: '文件题名', |
|||
showOverflowTooltip: true |
|||
}, |
|||
{ |
|||
prop: 'archive_no', |
|||
label: '文件档号', |
|||
showOverflowTooltip: true |
|||
} |
|||
], |
|||
// 案卷下的全部文件列表 |
|||
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: { |
|||
/* 弹窗被打开 */ |
|||
onOpened() { |
|||
this.query(); |
|||
if (this.documents.length) { |
|||
this.$refs.docTable.setCurrentRow(this.documents[0]); |
|||
} |
|||
}, |
|||
/* 弹窗被关闭 */ |
|||
onClosed() { |
|||
this.data = []; |
|||
}, |
|||
/* 查询所选案卷的卷内文件 */ |
|||
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; |
|||
} else { |
|||
this.$message.error(res.data.msg); |
|||
} |
|||
}).catch(e => { |
|||
this.loading = false; |
|||
this.$message.error(e.message); |
|||
}); |
|||
}, |
|||
/* 上移 */ |
|||
moveUp() { |
|||
if (!this.selection1.length) { |
|||
return this.$message.error('请选择一条数据'); |
|||
} |
|||
if (this.selection1.length > 1) { |
|||
return this.$message.error('只能选择一条数据'); |
|||
} |
|||
if (this.data1.indexOf(this.selection1[0]) === 0) { |
|||
return; |
|||
} |
|||
let index = this.data.indexOf(this.selection1[0]); |
|||
let old = this.data[index - 1]; |
|||
this.$set(this.data, index - 1, this.selection1[0]); |
|||
this.$set(this.data, index, old); |
|||
this.$nextTick(() => { |
|||
this.$refs.fileTable.toggleRowSelection(this.data[index - 1]); |
|||
}); |
|||
}, |
|||
/* 下移 */ |
|||
moveDown() { |
|||
if (!this.selection1.length) { |
|||
return this.$message.error('请选择一条数据'); |
|||
} |
|||
if (this.selection1.length > 1) { |
|||
return this.$message.error('只能选择一条数据'); |
|||
} |
|||
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.$set(this.data, index + 1, this.selection1[0]); |
|||
this.$set(this.data, index, old); |
|||
this.$nextTick(() => { |
|||
this.$refs.fileTable.toggleRowSelection(this.data[index + 1]); |
|||
}); |
|||
}, |
|||
/* 调出 */ |
|||
moveOut() { |
|||
if (!this.selection1.length) { |
|||
return this.$message.error('请至少选择一条数据'); |
|||
} |
|||
this.selection1.forEach(d => { |
|||
d.piece_no = ''; |
|||
}); |
|||
}, |
|||
/* 调入 */ |
|||
moveIn() { |
|||
if (!this.current) return; |
|||
if (!this.selection2.length) { |
|||
return this.$message.error('请至少选择一条数据'); |
|||
} |
|||
this.selection2.forEach(d => { |
|||
d.piece_no = this.current.piece_no; |
|||
}); |
|||
}, |
|||
/* 保存 */ |
|||
save() { |
|||
let result = this.data.map(d => { |
|||
return { |
|||
archive_no: d.archive_no, |
|||
piece_no: d.piece_no |
|||
}; |
|||
}); |
|||
console.log(result); |
|||
this.updateVisible(false); |
|||
}, |
|||
/* 关闭弹窗 */ |
|||
close() { |
|||
this.updateVisible(false); |
|||
}, |
|||
/* 更新visible */ |
|||
updateVisible(value) { |
|||
this.$emit('update:visible', value); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.demo-file-sort-dialog { |
|||
margin-bottom: 5vh; |
|||
} |
|||
|
|||
.demo-file-sort-dialog .el-dialog__body { |
|||
padding-top: 15px; |
|||
padding-bottom: 0; |
|||
} |
|||
|
|||
.demo-file-sort-dialog .el-dialog__body > .el-row > .el-col { |
|||
margin-bottom: 15px; |
|||
} |
|||
|
|||
.demo-file-sort-table .el-table__row { |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.demo-file-sort-table .el-table__row > td:last-child:after { |
|||
content: "\e6e0"; |
|||
font-family: element-icons !important; |
|||
font-style: normal; |
|||
font-variant: normal; |
|||
text-transform: none; |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
line-height: 1; |
|||
position: absolute; |
|||
right: 10px; |
|||
top: 50%; |
|||
margin-top: -7px; |
|||
} |
|||
|
|||
.demo-file-sort-table .el-table__row > td:last-child .cell { |
|||
padding-right: 20px; |
|||
} |
|||
|
|||
.demo-file-sort-table .ele-table-tool-title { |
|||
line-height: 28px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,125 @@ |
|||
<template> |
|||
<div class="ele-body"> |
|||
<el-card shadow="never"> |
|||
<ele-pro-table |
|||
ref="table" |
|||
:datasource="url" |
|||
:columns="columns" |
|||
:selection.sync="selection" |
|||
title="案卷列表"> |
|||
<template slot="toolkit"> |
|||
<el-button |
|||
@click="openFileSortDialog" |
|||
size="small" |
|||
type="primary" |
|||
icon="el-icon-sort" |
|||
class="ele-btn-icon">卷内文件调整 |
|||
</el-button> |
|||
</template> |
|||
</ele-pro-table> |
|||
</el-card> |
|||
<!-- 卷内文件调整弹窗 --> |
|||
<file-sort |
|||
:visible.sync="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: [ |
|||
{ |
|||
columnKey: 'selection', |
|||
type: 'selection', |
|||
width: 45, |
|||
align: 'center', |
|||
fixed: 'left' |
|||
}, |
|||
{ |
|||
columnKey: 'index', |
|||
type: 'index', |
|||
width: 45, |
|||
align: 'center', |
|||
fixed: 'left' |
|||
}, |
|||
{ |
|||
prop: 'piece_no', |
|||
label: '案卷档号', |
|||
width: 215, |
|||
minWidth: 110, |
|||
showOverflowTooltip: true |
|||
}, |
|||
{ |
|||
prop: 'title', |
|||
label: '案卷题名', |
|||
minWidth: 110, |
|||
showOverflowTooltip: true |
|||
}, |
|||
{ |
|||
prop: 'year', |
|||
label: '年度', |
|||
minWidth: 110, |
|||
showOverflowTooltip: true |
|||
}, |
|||
{ |
|||
prop: 'retention', |
|||
label: '保管期限', |
|||
minWidth: 110, |
|||
showOverflowTooltip: true |
|||
}, |
|||
{ |
|||
prop: 'secret', |
|||
label: '密级', |
|||
minWidth: 110, |
|||
showOverflowTooltip: true |
|||
}, |
|||
{ |
|||
prop: 'type', |
|||
label: '档案类别', |
|||
minWidth: 110, |
|||
showOverflowTooltip: true |
|||
}, |
|||
{ |
|||
prop: 'carrier', |
|||
label: '载体规格', |
|||
minWidth: 110, |
|||
showOverflowTooltip: true |
|||
} |
|||
], |
|||
// 是否显示卷内文件调整弹窗 |
|||
showFileSort: false, |
|||
// 列表选中数据 |
|||
selection: [], |
|||
// 选中的案卷 |
|||
fileSortChoose: [] |
|||
} |
|||
}, |
|||
methods: { |
|||
/* 打开卷内文件调整弹窗 */ |
|||
openFileSortDialog() { |
|||
if (this.selection.length < 2) { |
|||
return this.$message.error('请至少选择两条数据'); |
|||
} |
|||
// 实际项目用这一行 |
|||
/*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> |
|||
@ -0,0 +1,31 @@ |
|||
<template> |
|||
<div :class="classes"> |
|||
<div class="ele-exception-img"> |
|||
<img src="@/assets/ic-403.svg" alt=""> |
|||
</div> |
|||
<div class="ele-exception-content ele-text-left"> |
|||
<h1 class="ele-text">403</h1> |
|||
<p class="ele-text-secondary">抱歉，你无权访问该页面</p> |
|||
<div> |
|||
<el-button |
|||
type="primary" |
|||
@click="$router.push('/')">返回首页 |
|||
</el-button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'Exception403', |
|||
computed: { |
|||
classes() { |
|||
return [ |
|||
'ele-exception ele-text-center', |
|||
{'ele-exception-dark': this.$store.state.theme.darkMode} |
|||
]; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,31 @@ |
|||
<template> |
|||
<div :class="classes"> |
|||
<div class="ele-exception-img"> |
|||
<img src="@/assets/ic-404.svg" alt="" style="max-width: 320px;"> |
|||
</div> |
|||
<div class="ele-exception-content ele-text-left"> |
|||
<h1 class="ele-text">404</h1> |
|||
<p class="ele-text-secondary">抱歉，你访问的页面不存在</p> |
|||
<div> |
|||
<el-button |
|||
type="primary" |
|||
@click="$router.push('/')">返回首页 |
|||
</el-button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'Exception404', |
|||
computed: { |
|||
classes() { |
|||
return [ |
|||
'ele-exception ele-text-center', |
|||
{'ele-exception-dark': this.$store.state.theme.darkMode} |
|||
]; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,31 @@ |
|||
<template> |
|||
<div :class="classes"> |
|||
<div class="ele-exception-img"> |
|||
<img src="@/assets/ic-500.svg" alt=""> |
|||
</div> |
|||
<div class="ele-exception-content ele-text-left"> |
|||
<h1 class="ele-text">500</h1> |
|||
<p class="ele-text-secondary">抱歉，服务器出错了</p> |
|||
<div> |
|||
<el-button |
|||
type="primary" |
|||
@click="$router.push('/')">返回首页 |
|||
</el-button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'Exception500', |
|||
computed: { |
|||
classes() { |
|||
return [ |
|||
'ele-exception ele-text-center', |
|||
{'ele-exception-dark': this.$store.state.theme.darkMode} |
|||
]; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,212 @@ |
|||
<template> |
|||
<div class="ele-body ele-body-card"> |
|||
<el-row :gutter="15"> |
|||
<el-col :md="8"> |
|||
<el-card shadow="never" header="列表拖拽排序"> |
|||
<div class="demo-drag-list"> |
|||
<draggable |
|||
v-model="list" |
|||
handle=".sort-handle" |
|||
animation="300"> |
|||
<div class="demo-drag-list-item ele-cell" |
|||
v-for="item in list" |
|||
:key="item.id"> |
|||
<div class="ele-cell-content">{{ item.name }}</div> |
|||
<i class="sort-handle el-icon-_nav ele-text-secondary"></i> |
|||
</div> |
|||
</draggable> |
|||
</div> |
|||
</el-card> |
|||
</el-col> |
|||
<el-col :md="16"> |
|||
<el-card shadow="never" header="列表相互拖拽"> |
|||
<el-row :gutter="15"> |
|||
<el-col :span="12"> |
|||
<div class="demo-drag-list"> |
|||
<draggable |
|||
v-model="list1" |
|||
handle=".sort-handle" |
|||
group="project1" |
|||
animation="300"> |
|||
<div class="demo-drag-list-item ele-cell" |
|||
v-for="item in list1" |
|||
:key="item.id"> |
|||
<div class="ele-cell-content">{{ item.name }}</div> |
|||
<i class="sort-handle el-icon-_nav ele-text-secondary"></i> |
|||
</div> |
|||
</draggable> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<div class="demo-drag-list"> |
|||
<draggable |
|||
v-model="list2" |
|||
handle=".sort-handle" |
|||
group="project1" |
|||
animation="300"> |
|||
<div class="demo-drag-list-item ele-cell" |
|||
v-for="item in list2" |
|||
:key="item.id"> |
|||
<div class="ele-cell-content">{{ item.name }}</div> |
|||
<i class="sort-handle el-icon-_nav ele-text-secondary"></i> |
|||
</div> |
|||
</draggable> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
</el-card> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row :gutter="15"> |
|||
<el-col :md="8"> |
|||
<el-card shadow="never" header="宫格拖拽排序"> |
|||
<div class="demo-drag-grid"> |
|||
<draggable |
|||
v-model="grid" |
|||
animation="300"> |
|||
<div |
|||
class="demo-drag-grid-item" |
|||
v-for="item in grid" |
|||
:key="item.id"> |
|||
{{ item.name }} |
|||
</div> |
|||
</draggable> |
|||
</div> |
|||
</el-card> |
|||
</el-col> |
|||
<el-col :md="16"> |
|||
<el-card shadow="never" header="宫格相互拖拽"> |
|||
<el-row :gutter="15"> |
|||
<el-col :span="12"> |
|||
<div class="demo-drag-grid"> |
|||
<draggable |
|||
v-model="grid1" |
|||
group="project2" |
|||
animation="300"> |
|||
<div |
|||
class="demo-drag-grid-item" |
|||
v-for="item in grid1" |
|||
:key="item.id"> |
|||
{{ item.name }} |
|||
</div> |
|||
</draggable> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<div class="demo-drag-grid"> |
|||
<draggable |
|||
v-model="grid2" |
|||
group="project2" |
|||
animation="300"> |
|||
<div |
|||
class="demo-drag-grid-item" |
|||
v-for="item in grid2" |
|||
:key="item.id"> |
|||
{{ item.name }} |
|||
</div> |
|||
</draggable> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
</el-card> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import draggable from 'vuedraggable'; |
|||
|
|||
export default { |
|||
name: 'ExtensionDragSort', |
|||
components: {draggable}, |
|||
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 { |
|||
padding: 10px 15px; |
|||
} |
|||
|
|||
.demo-drag-list-item + .demo-drag-list-item { |
|||
border-top: 1px solid hsla(0, 0%, 60%, .2); |
|||
} |
|||
|
|||
.demo-drag-list-item.sortable-chosen { |
|||
background-color: 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: 15px 0 0 15px; |
|||
} |
|||
|
|||
.demo-drag-grid-item { |
|||
padding: 15px; |
|||
margin: 0 15px 15px 0; |
|||
display: inline-block; |
|||
border: 1px solid hsla(0, 0%, 60%, .2); |
|||
cursor: move; |
|||
} |
|||
|
|||
.demo-drag-grid-item.sortable-chosen { |
|||
background-color: hsla(0, 0%, 60%, .1); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,115 @@ |
|||
<template> |
|||
<div class="ele-body"> |
|||
<el-card shadow="never"> |
|||
<!-- 操作按钮 --> |
|||
<div class="ele-table-tool"> |
|||
<el-button |
|||
@click="showViewContent=true" |
|||
size="small">获取html |
|||
</el-button> |
|||
<el-button |
|||
@click="showViewText=true" |
|||
size="small">获取文本 |
|||
</el-button> |
|||
<el-button |
|||
@click="editContent" |
|||
size="small">修改内容 |
|||
</el-button> |
|||
<el-button |
|||
@click="showDialog=true" |
|||
size="small">弹窗打开 |
|||
</el-button> |
|||
</div> |
|||
<!-- 编辑器 --> |
|||
<tinymce-editor |
|||
v-model="value1" |
|||
:init="option1"/> |
|||
</el-card> |
|||
<!-- 内容弹窗 --> |
|||
<el-dialog |
|||
title="编辑器内容" |
|||
:visible.sync="showViewContent" |
|||
width="400px"> |
|||
<div>{{ value1 }}</div> |
|||
</el-dialog> |
|||
<!-- 纯文本弹窗 --> |
|||
<el-dialog |
|||
title="编辑器纯文本" |
|||
:visible.sync="showViewText" |
|||
width="400px"> |
|||
<div>{{ value1 | htmlToText }}</div> |
|||
</el-dialog> |
|||
<!-- 编辑器弹窗 --> |
|||
<el-dialog |
|||
title="弹窗中使用" |
|||
:visible.sync="showDialog" |
|||
width="671px"> |
|||
<tinymce-editor |
|||
v-model="value2" |
|||
:init="option2"/> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import TinymceEditor from '@/components/TinymceEditor'; |
|||
|
|||
export default { |
|||
name: 'ExtensionEditor', |
|||
components: {TinymceEditor}, |
|||
data() { |
|||
// 自定义文件上传(这里使用把选择的文件转成blob演示) |
|||
let file_picker_callback = (callback, value, meta) => { |
|||
let input = document.createElement('input'); |
|||
input.setAttribute('type', 'file'); |
|||
// 设定文件可选类型 |
|||
if (meta.filetype === 'image') { |
|||
input.setAttribute('accept', 'image/*'); |
|||
} else if (meta.filetype === 'media') { |
|||
input.setAttribute('accept', 'video/*'); |
|||
} |
|||
input.onchange = () => { |
|||
let file = input.files[0]; |
|||
let reader = new FileReader(); |
|||
reader.onload = (e) => { |
|||
let blob = new Blob([e.target.result], {type: file.type}); |
|||
callback(URL.createObjectURL(blob)); |
|||
}; |
|||
reader.readAsArrayBuffer(file); |
|||
} |
|||
input.click(); |
|||
}; |
|||
return { |
|||
option1: { |
|||
height: 520, |
|||
file_picker_callback: file_picker_callback |
|||
}, |
|||
option2: { |
|||
height: 380, |
|||
menubar: false, |
|||
file_picker_callback: file_picker_callback |
|||
}, |
|||
value1: '', |
|||
value2: '', |
|||
showViewContent: false, |
|||
showViewText: false, |
|||
showDialog: false |
|||
|
|||
} |
|||
}, |
|||
methods: { |
|||
/* 修改编辑器内容 */ |
|||
editContent() { |
|||
this.value1 = [ |
|||
'<div style="text-align: center;color: #fff;background-image: linear-gradient(to right,#009688,#5fb878);padding: 20px;">', |
|||
' <div style="font-size: 28px;margin-bottom: 10px;">EASY WEB 后台管理模板</div>', |
|||
' <div style="font-size: 18px">基于Layui的一套通用型后台管理模板，拥有众多原创组件及模板页面</div>', |
|||
'</div><br/>' |
|||
].join(''); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
</style> |
|||
@ -0,0 +1,422 @@ |
|||
<template> |
|||
<div class="ele-body"> |
|||
<el-card shadow="never" header="导出excel"> |
|||
<ele-pro-table |
|||
:datasource="users" |
|||
:columns="columns" |
|||
:selection.sync="select" |
|||
:need-page="false" |
|||
size="mini" |
|||
:toolkit="['size', 'columns', 'fullscreen']"> |
|||
<template slot="toolbar"> |
|||
<el-button |
|||
@click="exportBas" |
|||
size="small">导出excel |
|||
</el-button> |
|||
<el-button |
|||
@click="exportAdv" |
|||
size="small">导出带单元格合并 |
|||
</el-button> |
|||
<el-button |
|||
@click="exportSel" |
|||
size="small">导出选中 |
|||
</el-button> |
|||
</template> |
|||
</ele-pro-table> |
|||
</el-card> |
|||
<el-card shadow="never" header="导入excel"> |
|||
<!-- 操作按钮 --> |
|||
<div class="ele-table-tool"> |
|||
<el-upload |
|||
action="" |
|||
:before-upload="importFile" |
|||
:show-file-list="false" |
|||
class="ele-action" |
|||
accept=".xls,.xlsx,.csv"> |
|||
<el-button |
|||
size="small">导入excel |
|||
</el-button> |
|||
</el-upload> |
|||
<el-upload |
|||
action="" |
|||
:before-upload="importFile2" |
|||
:show-file-list="false" |
|||
class="ele-action" |
|||
accept=".xls,.xlsx,.csv"> |
|||
<el-button |
|||
size="small">导入自动拆分合并 |
|||
</el-button> |
|||
</el-upload> |
|||
<el-upload |
|||
action="" |
|||
:before-upload="importFile3" |
|||
:show-file-list="false" |
|||
class="ele-action" |
|||
accept=".xls,.xlsx,.csv"> |
|||
<el-button |
|||
size="small">导入保持合并样式 |
|||
</el-button> |
|||
</el-upload> |
|||
</div> |
|||
<!-- 数据表格 --> |
|||
<el-table |
|||
:data="importData" |
|||
:span-method="spanMethod" |
|||
size="mini" |
|||
border |
|||
style="width: 100%;"> |
|||
<el-table-column |
|||
type="index" |
|||
width="45" |
|||
align="center"/> |
|||
<el-table-column |
|||
v-for="(key,index) in importTitle" |
|||
:key="index" |
|||
:prop="key" |
|||
:label="key" |
|||
align="center" |
|||
show-overflow-tooltip/> |
|||
</el-table> |
|||
<el-row :gutter="30"> |
|||
<el-col :md="12"> |
|||
<div style="padding: 15px 0;">二维数组格式数据：</div> |
|||
<pre style="max-height: 300px;overflow: auto;">{{ JSON.stringify(importDataAoa, null, 4) }}</pre> |
|||
</el-col> |
|||
<el-col :md="12"> |
|||
<div style="padding: 15px 0;">JSON格式数据：</div> |
|||
<pre style="max-height: 300px;overflow: auto;">{{ JSON.stringify(importData, null, 4) }}</pre> |
|||
</el-col> |
|||
</el-row> |
|||
</el-card> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import XLSX from 'xlsx'; |
|||
|
|||
export default { |
|||
name: 'ExtensionExcel', |
|||
data() { |
|||
return { |
|||
// 表格列配置 |
|||
columns: [ |
|||
{ |
|||
columnKey: 'selection', |
|||
type: 'selection', |
|||
width: 45, |
|||
align: 'center' |
|||
}, |
|||
{ |
|||
columnKey: 'index', |
|||
type: 'index', |
|||
width: 45, |
|||
align: 'center' |
|||
}, |
|||
{ |
|||
prop: 'username', |
|||
label: '用户名', |
|||
align: 'center', |
|||
showOverflowTooltip: true |
|||
}, |
|||
{ |
|||
prop: 'addressGroup', |
|||
label: '地址', |
|||
align: 'center', |
|||
showOverflowTooltip: true, |
|||
children: [ |
|||
{ |
|||
prop: 'province', |
|||
label: '省', |
|||
align: 'center', |
|||
showOverflowTooltip: true |
|||
}, |
|||
{ |
|||
prop: 'city', |
|||
label: '市', |
|||
align: 'center', |
|||
showOverflowTooltip: true |
|||
}, |
|||
{ |
|||
prop: 'zone', |
|||
label: '区', |
|||
align: 'center', |
|||
showOverflowTooltip: true |
|||
}, |
|||
{ |
|||
prop: 'street', |
|||
label: '街道', |
|||
align: 'center', |
|||
showOverflowTooltip: true |
|||
}, |
|||
{ |
|||
prop: 'address', |
|||
label: '详细地址', |
|||
align: 'center', |
|||
showOverflowTooltip: true |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
prop: 'amount', |
|||
label: '金额', |
|||
align: 'center', |
|||
showOverflowTooltip: true |
|||
} |
|||
], |
|||
// 表格数据 |
|||
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号', |
|||
} |
|||
], |
|||
// 选中数据 |
|||
select: [], |
|||
// 导入数据 |
|||
importData: [], |
|||
// 导入数据的列 |
|||
importTitle: ['A', 'B', 'C', 'D', 'E', 'F', 'G'], |
|||
// 导入数据二维数组形式 |
|||
importDataAoa: [] |
|||
} |
|||
}, |
|||
methods: { |
|||
/* 导出excel */ |
|||
exportBas() { |
|||
let array = [['用户名', '省', '市', '区', '街道', '详细地址', '金额']]; |
|||
this.users.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.users.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.select.length === 0) { |
|||
return this.$message.error('请至少选择一条数据'); |
|||
} |
|||
let array = [['用户名', '省', '市', '区', '街道', '详细地址', '金额']]; |
|||
this.select.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++) { |
|||
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文件 */ |
|||
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]; |
|||
}, |
|||
/* 合并表格单元格 */ |
|||
spanMethod({row, column}) { |
|||
if (!column.label) { |
|||
return [1, 1]; |
|||
} |
|||
let r = row['__rowspan__' + column.label], |
|||
c = row['__colspan__' + column.label]; |
|||
return [r === undefined ? 1 : r, c === undefined ? 1 : c]; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
</style> |
|||
@ -0,0 +1,482 @@ |
|||
<template> |
|||
<div class="ele-body"> |
|||
<el-card |
|||
shadow="never" |
|||
body-style="padding: 0;" |
|||
style="overflow: visible;"> |
|||
<div style="padding: 15px 15px 0 15px;"> |
|||
<!-- 工具栏 --> |
|||
<div class="ele-table-tool"> |
|||
<div class="ele-table-tool-title"> |
|||
<el-upload |
|||
:action="this.uploadImage+'/?upload_type=file'" |
|||
:headers="$http.defaults.headers.common" |
|||
:on-success="uploadSuccess" |
|||
:show-file-list="false" |
|||
class="ele-inline-block ele-action"> |
|||
<el-button |
|||
type="primary" |
|||
icon="el-icon-upload2" |
|||
class="ele-btn-icon" |
|||
size="small">上传 |
|||
</el-button> |
|||
</el-upload> |
|||
<!-- <el-button--> |
|||
<!-- icon="el-icon-folder-add"--> |
|||
<!-- class="ele-btn-icon"--> |
|||
<!-- size="small">新建文件夹--> |
|||
<!-- </el-button>--> |
|||
<template v-if="checked.length"> |
|||
<el-button |
|||
:disabled="checked.length>1" |
|||
@click="view(checked[0])" |
|||
icon="el-icon-view" |
|||
class="ele-btn-icon" |
|||
size="small">预览 |
|||
</el-button> |
|||
<el-button |
|||
:disabled="checked.length>1" |
|||
@click="remove(checked[0])" |
|||
type="danger" |
|||
icon="el-icon-delete" |
|||
class="ele-btn-icon hidden-xs-only" |
|||
size="small">删除 |
|||
</el-button> |
|||
</template> |
|||
</div> |
|||
<div class="ele-table-tool-right"> |
|||
<!-- 搜索框 --> |
|||
<!-- <div class="ele-file-tool-search hidden-xs-only">--> |
|||
<!-- <el-input--> |
|||
<!-- placeholder="搜索您的文件"--> |
|||
<!-- v-model="search"--> |
|||
<!-- size="small">--> |
|||
<!-- <el-button slot="append" icon="el-icon-search"/>--> |
|||
<!-- </el-input>--> |
|||
<!-- </div>--> |
|||
<!-- 排序方式切换 --> |
|||
<el-dropdown @command="onSortClick"> |
|||
<i class="el-icon-_filter ele-file-tool-btn" title="排序方式"></i> |
|||
<el-dropdown-menu slot="dropdown"> |
|||
<el-dropdown-item command="name"> |
|||
<span :class="['ele-file-sort-item ele-text-primary',{'active':sort==='name'}]"> |
|||
<i |
|||
:class="['ele-file-sort-item-icon',{'el-icon-top':order==='asc'},{'el-icon-bottom':order==='desc'}]"></i> |
|||
<span>文件名</span> |
|||
</span> |
|||
</el-dropdown-item> |
|||
<el-dropdown-item command="size"> |
|||
<span :class="['ele-file-sort-item ele-text-primary',{'active':sort==='size'}]"> |
|||
<i |
|||
:class="['ele-file-sort-item-icon',{'el-icon-top':order==='asc'},{'el-icon-bottom':order==='desc'}]"></i> |
|||
<span>大小</span> |
|||
</span> |
|||
</el-dropdown-item> |
|||
<el-dropdown-item command="update_time"> |
|||
<span :class="['ele-file-sort-item ele-text-primary',{'active':sort==='update_time'}]"> |
|||
<i |
|||
:class="['ele-file-sort-item-icon',{'el-icon-top':order==='asc'},{'el-icon-bottom':order==='desc'}]"></i> |
|||
<span>修改日期</span> |
|||
</span> |
|||
</el-dropdown-item> |
|||
</el-dropdown-menu> |
|||
</el-dropdown> |
|||
<!-- 显示方式切换 --> |
|||
<i |
|||
@click="grid=!grid" |
|||
:class="['ele-file-tool-btn',{'el-icon-_menu':!grid},{'el-icon-_nav':grid}]" |
|||
title="显示方式"></i> |
|||
</div> |
|||
</div> |
|||
<!-- 文件目录面包屑 --> |
|||
<div class="ele-file-breadcrumb-group ele-cell"> |
|||
<div class="ele-cell-content ele-cell"> |
|||
<div |
|||
v-if="directory.length>1" |
|||
@click="back" |
|||
class="ele-file-breadcrumb-back ele-text-primary">返回上一级 |
|||
</div> |
|||
<div class="ele-file-breadcrumb-list ele-cell-content ele-cell"> |
|||
<div |
|||
@click="listAll" |
|||
:class="['ele-file-breadcrumb-item ele-cell',{'ele-text-primary':directory.length}]"> |
|||
<div class="ele-file-breadcrumb-item-title">全部文件 |
|||
</div> |
|||
<i v-if="directory.length" class="el-icon-arrow-right"></i> |
|||
</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> |
|||
<i v-if="index!==directory.length-1" class="el-icon-arrow-right"></i> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="hidden-xs-only">已全部加载，共{{ total_count }}个</div> |
|||
</div> |
|||
</div> |
|||
<!-- 文件列表 --> |
|||
<div v-loading="loading" style="min-height: 400px;"> |
|||
<ele-file-list |
|||
:data="data" |
|||
:checked.sync="checked" |
|||
:grid="grid" |
|||
@item-click="onItemClick" |
|||
:sort="sort" |
|||
:order="order" |
|||
@sort-change="onSortChange"> |
|||
<template slot="tool" slot-scope="{item}"> |
|||
<i |
|||
class="el-icon-view ele-file-list-item-tool ele-text-primary" |
|||
@click.stop="view(item)" title="查看"></i> |
|||
<i |
|||
class="el-icon-delete ele-file-list-item-tool ele-text-primary" |
|||
title="删除" @click="remove(item)" ></i> |
|||
<!-- <el-dropdown class="ele-file-list-item-tool">--> |
|||
<!-- <i class="el-icon-more ele-text-primary"></i>--> |
|||
<!-- <el-dropdown-menu slot="dropdown">--> |
|||
<!-- <el-dropdown-item>移动到</el-dropdown-item>--> |
|||
<!-- <el-dropdown-item>复制到</el-dropdown-item>--> |
|||
<!-- <el-dropdown-item>删除</el-dropdown-item>--> |
|||
<!-- </el-dropdown-menu>--> |
|||
<!-- </el-dropdown>--> |
|||
</template> |
|||
</ele-file-list> |
|||
|
|||
</div> |
|||
<div style="padding-bottom:20px"> |
|||
<template> |
|||
<div class = " flex all-center"> |
|||
<template v-if="total_count>0"> |
|||
<el-pagination |
|||
:total="total_count" |
|||
background |
|||
layout="prev, pager, next, jumper, total" |
|||
class="my-pagination" |
|||
@current-change="handleCurrentChange" |
|||
:current-page="cur_page" |
|||
:page-size="pageNum" |
|||
|
|||
/> |
|||
</template> |
|||
</div> |
|||
</template> |
|||
</div> |
|||
<!-- 用于图片预览 --> |
|||
<el-image |
|||
ref="previewImage" |
|||
v-if="currentImage" |
|||
class="ele-file-image-preview" |
|||
:src="currentImage" |
|||
:preview-src-list="previewList"> |
|||
</el-image> |
|||
</el-card> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import EleFileList from 'ele-admin/packages/ele-file-list'; |
|||
import setting from "@/config/setting"; |
|||
|
|||
export default { |
|||
name: 'ExtensionFile', |
|||
components: {EleFileList}, |
|||
data() { |
|||
return { |
|||
uploadImage:setting.uploadImageUrl, |
|||
cur_page:1, |
|||
pageNum:10, |
|||
total_count:0, |
|||
// 加载状态 |
|||
loading: true, |
|||
// 是否网格展示 |
|||
grid: true, |
|||
// 文件列表数据 |
|||
data: [], |
|||
// 选中数据 |
|||
checked: [], |
|||
// 文件目录面包屑数据 |
|||
directory: [''], |
|||
// 图片预览文件 |
|||
currentImage: '', |
|||
// 搜索 |
|||
search: '', |
|||
// 排序字段 |
|||
sort: '', |
|||
// 排序方式 |
|||
order: '', |
|||
current : '/', |
|||
|
|||
} |
|||
}, |
|||
computed: { |
|||
// 图片预览列表 |
|||
previewList() { |
|||
return this.data.filter(d => d.thumbnail).map(d => d.thumbnail); |
|||
} |
|||
}, |
|||
|
|||
mounted() { |
|||
this.query(); |
|||
}, |
|||
methods: { |
|||
handleCurrentChange(val) { |
|||
this.cur_page = val; |
|||
this.query();//获取用户点击的当前页后刷新页面数据 |
|||
}, |
|||
|
|||
/* 查询文件列表 */ |
|||
query() { |
|||
this.checked = []; |
|||
this.data = []; |
|||
this.loading = true; |
|||
|
|||
this.$http.get('/uploadLog/index', { |
|||
params: { |
|||
current: this.directory.join('/'), |
|||
sort: this.sort, |
|||
order: this.order, |
|||
page:this.cur_page, |
|||
limit:this.pageNum |
|||
} |
|||
}).then(res => { |
|||
this.loading = false; |
|||
if (res.data.code === 0) { |
|||
res.data.data.forEach(d => { |
|||
// 文件地址加baseURL |
|||
// if (d.thumbnail) { |
|||
// d.url = thumbnail; |
|||
// } |
|||
// if (d.thumbnail) { |
|||
// d.thumbnail = process.env.VUE_APP_API_BASE_URL + '/' + d.thumbnail; |
|||
// } |
|||
// 文件大小格式化 |
|||
if (d.isDirectory) { |
|||
d.length = '-'; |
|||
} else { |
|||
d.length = this.getFileSize(d.size); |
|||
} |
|||
if(d.type == 'jpg' || d.type == 'png' || d.type == 'jpeg'){ |
|||
d.thumbnail = d.url |
|||
} |
|||
|
|||
// 修改时间格式化 |
|||
if (!d.isDirectoryd && d.update_time) { |
|||
d.updateTime = this.$util.toDateString(d.update_time); |
|||
} |
|||
}); |
|||
this.data = res.data.data; |
|||
this.total_count = res.data.count; |
|||
} 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.type == 'jpg' || item.type == 'png' || item.type == 'jpeg') { |
|||
this.currentImage = item.thumbnail; |
|||
this.$nextTick(() => { |
|||
if (this.$refs.previewImage) { |
|||
this.$refs.previewImage.showViewer = true; |
|||
} |
|||
}); |
|||
} 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+1, 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'; |
|||
} |
|||
}, |
|||
/* 排序方式切换 */ |
|||
onSortClick(command) { |
|||
if (this.sort === command) { |
|||
this.order = {'asc': 'desc', 'desc': 'asc'}[this.order]; |
|||
} else { |
|||
this.order = 'asc'; |
|||
this.sort = command; |
|||
} |
|||
this.query(); |
|||
}, |
|||
/* 文件列表排序方式改变 */ |
|||
onSortChange(obj) { |
|||
this.order = obj.order; |
|||
this.sort = obj.sort; |
|||
this.query(); |
|||
}, |
|||
/* 查看文件 */ |
|||
view(item) { |
|||
if (item.isDirectory) { |
|||
this.onItemClick(item); |
|||
return; |
|||
} |
|||
if (item.url) { |
|||
window.open(item.url); |
|||
} |
|||
}, |
|||
/* 删除 */ |
|||
remove(item) { |
|||
if (item.isDirectory) { |
|||
return; |
|||
} |
|||
if (item.url) { |
|||
this.$confirm('确定要删除选中的文件么?', '提示', { |
|||
type: 'warning' |
|||
}).then(() => { |
|||
const loading = this.$loading({lock: true}); |
|||
this.$http.delete('/uploadLog/delete?id=' + item.id).then(res => { |
|||
loading.close(); |
|||
if (res.data.code === 0) { |
|||
this.$message({type: 'success', message: res.data.msg}); |
|||
this.query(); |
|||
} else { |
|||
this.$message.error(res.data.msg); |
|||
} |
|||
}).catch(e => { |
|||
loading.close(); |
|||
this.$message.error(e.message); |
|||
}); |
|||
}).catch(() => { |
|||
}); |
|||
} |
|||
}, |
|||
/* 文件上传成功 */ |
|||
uploadSuccess(res) { |
|||
if (res.code === 0) { |
|||
this.$message({type: 'success', message: res.msg}); |
|||
this.directory = [res.dir.replace(/\//, '')]; |
|||
this.query(); |
|||
} else { |
|||
this.$message.error(res.msg); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/** 文件目录面包屑 */ |
|||
.ele-file-breadcrumb-group { |
|||
font-size: 13px; |
|||
padding: 2px 0 6px 0; |
|||
line-height: 1; |
|||
} |
|||
|
|||
.ele-file-breadcrumb-back { |
|||
padding-right: 10px; |
|||
border-right: 2px solid hsla(0, 0%, 60%, .2); |
|||
} |
|||
|
|||
.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-image-preview ::v-deep img.el-image__inner { |
|||
display: none; |
|||
} |
|||
|
|||
.ele-file-image-preview ::v-deep .el-image__error { |
|||
display: none; |
|||
} |
|||
|
|||
/* 图标按钮 */ |
|||
.ele-file-tool-btn { |
|||
cursor: pointer; |
|||
font-size: 22px; |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
margin-left: 10px; |
|||
} |
|||
|
|||
/* 搜索框 */ |
|||
.ele-file-tool-search { |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
background-color: hsla(0, 0%, 60%, .15); |
|||
border-radius: 32px; |
|||
} |
|||
|
|||
.ele-file-tool-search ::v-deep .el-input-group__append, |
|||
.ele-file-tool-search ::v-deep .el-input__inner { |
|||
background-color: transparent; |
|||
border: none; |
|||
} |
|||
|
|||
.ele-file-tool-search ::v-deep .el-input-group__append { |
|||
padding: 0; |
|||
} |
|||
|
|||
.ele-file-tool-search ::v-deep .el-input-group__append .el-button { |
|||
margin: 0; |
|||
padding: 7px 16px 7px 10px; |
|||
border: none; |
|||
} |
|||
|
|||
.ele-file-tool-search ::v-deep .el-input-group__append .el-button > i { |
|||
font-size: 16px; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.ele-file-tool-search ::v-deep .el-input__inner { |
|||
width: 200px; |
|||
padding-right: 0; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
/* 排序下拉 */ |
|||
.ele-file-sort-item:not(.active) .ele-file-sort-item-icon { |
|||
visibility: hidden; |
|||
} |
|||
|
|||
.ele-file-sort-item .ele-file-sort-item-icon { |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.ele-file-sort-item:not(.active) { |
|||
color: inherit; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,241 @@ |
|||
<template> |
|||
<div class="ele-body"> |
|||
<el-alert |
|||
:title="tipTitle" |
|||
type="info" |
|||
show-icon |
|||
class="ele-alert-border" |
|||
:closable="false"/> |
|||
<el-card |
|||
shadow="never" |
|||
body-style="position: relative;padding: 0;" |
|||
style="margin-top: 15px;"> |
|||
<div class="demo-icon-search"> |
|||
<el-input |
|||
v-model="keywords" |
|||
placeholder="输入关键词搜索..." |
|||
size="small"/> |
|||
</div> |
|||
<el-tabs v-model="active" class="demo-icon-tabs"> |
|||
<el-tab-pane |
|||
v-for="(item,index) in result" |
|||
:key="index" |
|||
:label="item.title" |
|||
:name="item.title"> |
|||
<el-row class="demo-icon"> |
|||
<el-col |
|||
:md="4" |
|||
:sm="6" |
|||
:xs="8" |
|||
v-for="(d,i) in item.icons" |
|||
:key="i" |
|||
class="demo-icon-item" |
|||
v-clipboard:copy="d" |
|||
v-clipboard:success="onCopy" |
|||
v-clipboard:error="onError"> |
|||
<div class="demo-icon-content"> |
|||
<i :class="d"></i> |
|||
</div> |
|||
<div class="demo-icon-text ele-text-secondary">{{ d }}</div> |
|||
</el-col> |
|||
</el-row> |
|||
</el-tab-pane> |
|||
<el-tab-pane label="图标选择器" name="icon-picker"> |
|||
<div |
|||
class="ele-cell demo-icon-picker-item" |
|||
style="margin-top: 20px;"> |
|||
<div>默认样式一：</div> |
|||
<div class="ele-cell-content"> |
|||
<ele-icon-picker |
|||
v-model="menuIcon" |
|||
placeholder="请选择菜单图标"/> |
|||
</div> |
|||
</div> |
|||
<div class="ele-cell demo-icon-picker-item"> |
|||
<div>默认样式二：</div> |
|||
<div class="ele-cell-content"> |
|||
<ele-icon-picker |
|||
v-model="menuIcon" |
|||
theme="style2" |
|||
:readonly="false"/> |
|||
</div> |
|||
</div> |
|||
<div class="ele-cell demo-icon-picker-item"> |
|||
<div>默认样式三：</div> |
|||
<div class="ele-cell-content"> |
|||
<ele-icon-picker |
|||
v-model="menuIcon" |
|||
theme="style3"/> |
|||
</div> |
|||
</div> |
|||
<div class="ele-cell demo-icon-picker-item">除了默认的三种样式，你还可以通过插槽自定义样式</div> |
|||
</el-tab-pane> |
|||
</el-tabs> |
|||
</el-card> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import EleIconPicker from 'ele-admin/packages/ele-icon-picker'; |
|||
|
|||
export default { |
|||
name: 'ExtensionIcon', |
|||
components: {EleIconPicker}, |
|||
data() { |
|||
return { |
|||
// 图标数据 |
|||
data: EleIconPicker.defaultIcons, |
|||
// 搜索关键字 |
|||
keywords: '', |
|||
// 图标选择器选择图标 |
|||
menuIcon: 'el-icon-_heart-solid' |
|||
} |
|||
}, |
|||
computed: { |
|||
// 搜索后的结果 |
|||
result() { |
|||
if (!this.keywords) { |
|||
return this.data; |
|||
} |
|||
let result = []; |
|||
this.data.forEach(item => { |
|||
result.push({ |
|||
title: item.title, |
|||
icons: item.icons.filter(d => d.indexOf(this.keywords) !== -1) |
|||
}); |
|||
}); |
|||
return result; |
|||
}, |
|||
// 标签页选中位置 |
|||
active: { |
|||
get() { |
|||
if (!this.result || this.result.length === 0) { |
|||
return null; |
|||
} |
|||
for (let i = 0; i < this.result.length; i++) { |
|||
if (this.result[i].icons.length !== 0) { |
|||
return this.result[i].title; |
|||
} |
|||
} |
|||
return null; |
|||
}, |
|||
set() { |
|||
} |
|||
}, |
|||
// 计算总个数 |
|||
total() { |
|||
let num = {el: 0, ele: 0}; |
|||
this.data.forEach(item => { |
|||
item.icons.forEach(d => { |
|||
if (d.indexOf('el-icon-_') === 0) { |
|||
num.ele++; |
|||
} else { |
|||
num.el++; |
|||
} |
|||
}); |
|||
}); |
|||
num.all = num.el + num.ele; |
|||
return num; |
|||
}, |
|||
// 提示文本 |
|||
tipTitle() { |
|||
return `新增 ${this.total.ele} 个图标 + Element UI ${this.total.el} 个图标, 共计 ${this.total.all} 个图标`; |
|||
} |
|||
}, |
|||
methods: { |
|||
/* 复制图标 */ |
|||
onCopy() { |
|||
this.$message({type: 'success', message: '复制成功'}); |
|||
}, |
|||
onError() { |
|||
this.$message.error('复制失败'); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/* 搜索框 */ |
|||
.demo-icon-search { |
|||
width: 180px; |
|||
position: absolute; |
|||
right: 10px; |
|||
top: 7px; |
|||
z-index: 1; |
|||
} |
|||
|
|||
/* 选项卡 */ |
|||
.demo-icon-tabs ::v-deep .el-tabs__nav-scroll { |
|||
padding: 0 20px; |
|||
} |
|||
|
|||
.demo-icon-tabs ::v-deep .el-tabs__item { |
|||
height: 45px; |
|||
line-height: 45px; |
|||
} |
|||
|
|||
/* 图标 */ |
|||
.demo-icon { |
|||
margin: 15px; |
|||
border-top: 1px solid hsla(0, 0%, 60%, .15); |
|||
border-left: 1px solid hsla(0, 0%, 60%, .15); |
|||
} |
|||
|
|||
.demo-icon-item { |
|||
text-align: center; |
|||
padding: 25px 0 25px 0; |
|||
border-right: 1px solid hsla(0, 0%, 60%, .15); |
|||
border-bottom: 1px solid hsla(0, 0%, 60%, .15); |
|||
transition: color .2s, background-color .2s; |
|||
position: relative; |
|||
overflow: hidden; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.demo-icon-content { |
|||
font-size: 38px; |
|||
} |
|||
|
|||
.demo-icon-text { |
|||
font-size: 13px; |
|||
margin-top: 8px; |
|||
padding: 0 5px; |
|||
transition: color .2s; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
word-break: break-all; |
|||
} |
|||
|
|||
.demo-icon-item:after { |
|||
content: "点击复制"; |
|||
position: absolute; |
|||
bottom: -30px; |
|||
left: 0; |
|||
width: 100%; |
|||
color: #FFF; |
|||
padding: 4px 0; |
|||
font-size: 12px; |
|||
background-color: #409EFF; |
|||
transition: bottom .2s; |
|||
} |
|||
|
|||
.demo-icon-item:hover:after { |
|||
bottom: 0; |
|||
} |
|||
|
|||
/* 图标选择器演示 */ |
|||
.demo-icon-picker-item { |
|||
max-width: 400px; |
|||
padding: 0 20px 20px; |
|||
} |
|||
|
|||
/* 自适应 */ |
|||
@media screen and (max-width: 660px) { |
|||
.demo-icon-search { |
|||
width: auto; |
|||
margin: 10px 10px 0; |
|||
position: static; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,250 @@ |
|||
<template> |
|||
<div class="ele-body"> |
|||
<!-- 地图位置选择弹窗 --> |
|||
<ele-map-picker |
|||
:show.sync="showMapPicker" |
|||
:need-city="true" |
|||
@done="onChoose" |
|||
:lock-scroll="false"/> |
|||
<ele-map-picker |
|||
:show.sync="showMapPicker2" |
|||
:need-city="true" |
|||
@done="onChoose" |
|||
:search-type="1" |
|||
:lock-scroll="false"/> |
|||
<el-card |
|||
shadow="never" |
|||
header="弹窗选择位置"> |
|||
<el-tooltip |
|||
content="POI检索模式" |
|||
placement="top"> |
|||
<el-button |
|||
@click="showMapPicker=true" |
|||
size="small" |
|||
class="ele-btn-icon" |
|||
icon="el-icon-location-information"> |
|||
<span>地图选择位置 </span> |
|||
<i class="el-icon-right"/> |
|||
</el-button> |
|||
</el-tooltip> |
|||
<el-button |
|||
@click="showMapPicker2=true" |
|||
size="small" |
|||
class="ele-btn-icon" |
|||
icon="el-icon-location-information"> |
|||
<span>关键字检索模式 </span> |
|||
<i class="el-icon-right"/> |
|||
</el-button> |
|||
<div style="margin-top: 10px;">收货地址: {{ form.location }}</div> |
|||
<div style="margin-top: 10px;">详细地址: {{ form.address }}</div> |
|||
<div style="margin-top: 10px;">经 纬 度 : {{ form.jinweidu }}</div> |
|||
</el-card> |
|||
<el-card |
|||
shadow="never" |
|||
header="官网底部地图"> |
|||
<div |
|||
ref="locationMap" |
|||
style="max-width: 800px;height: 300px;"> |
|||
</div> |
|||
</el-card> |
|||
<el-card |
|||
shadow="never" |
|||
header="轨迹展示及轨迹回放"> |
|||
<div |
|||
ref="trackMap" |
|||
style="max-width: 800px;height: 300px;"> |
|||
</div> |
|||
<div style="margin-top: 15px;"> |
|||
<el-button |
|||
@click="startTrackAnim" |
|||
size="small">开始动画 |
|||
</el-button> |
|||
<el-button |
|||
@click="pauseTrackAnim" |
|||
size="small">暂停动画 |
|||
</el-button> |
|||
<el-button |
|||
@click="resumeTrackAnim" |
|||
size="small">继续动画 |
|||
</el-button> |
|||
</div> |
|||
</el-card> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import AMapLoader from '@amap/amap-jsapi-loader'; |
|||
import EleMapPicker from 'ele-admin/packages/ele-map-picker'; |
|||
|
|||
export default { |
|||
name: 'ExtensionMap', |
|||
components: {EleMapPicker}, |
|||
data() { |
|||
return { |
|||
// 表单数据 |
|||
form: {}, |
|||
// 是否显示地图选择弹窗 |
|||
showMapPicker: false, |
|||
showMapPicker2: false, |
|||
// 小车的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] |
|||
] |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.renderLocationMap(); |
|||
this.renderTrackMap(); |
|||
}, |
|||
methods: { |
|||
/* 地图选择后回调 */ |
|||
onChoose(location) { |
|||
this.showMapPicker = false; |
|||
this.showMapPicker2 = false; |
|||
this.form.address = location.name + ' ' + location.address; |
|||
this.form.jinweidu = [location.lng, location.lat].join(','); |
|||
this.form.location = location.city.province + '/' + location.city.city + '/' + location.city.district; |
|||
console.log(location); |
|||
}, |
|||
/* 渲染官网底部地图 */ |
|||
renderLocationMap() { |
|||
AMapLoader.load({ |
|||
'key': '006d995d433058322319fa797f2876f5', |
|||
'version': '2.0', |
|||
'plugins': ['AMap.InfoWindow', 'AMap.Marker'] |
|||
}).then((AMap) => { |
|||
// 渲染地图 |
|||
let map = new AMap.Map(this.$refs.locationMap, { |
|||
// 初缩放级别 |
|||
zoom: 13, |
|||
// 初始中心点 |
|||
center: [114.346084, 30.511215 + 0.005] |
|||
}); |
|||
// 创建信息窗体 |
|||
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> |
|||
<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">到这里去<i class="el-icon-right"></i> |
|||
</a> |
|||
</div> |
|||
` |
|||
}); |
|||
infoWindow.open(map, [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(map); |
|||
marker.on('click', () => { |
|||
infoWindow.open(map); |
|||
}); |
|||
}).catch(e => { |
|||
console.error(e); |
|||
}); |
|||
}, |
|||
/* 渲染轨迹回放地图 */ |
|||
renderTrackMap() { |
|||
AMapLoader.load({ |
|||
'key': '006d995d433058322319fa797f2876f5', |
|||
'version': '2.0', |
|||
'plugins': ['AMap.MoveAnimation', 'AMap.Marker', 'AMap.Polyline'] |
|||
}).then((AMap) => { |
|||
// 渲染地图 |
|||
let map = new AMap.Map(this.$refs.trackMap, { |
|||
zoom: 17, |
|||
center: [116.478935, 39.997761], |
|||
}); |
|||
|
|||
// 创建小车marker |
|||
this.carMarker = new AMap.Marker({ |
|||
map: map, |
|||
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: map, |
|||
path: this.lineData, |
|||
showDir: true, |
|||
strokeColor: '#28F', // 线颜色 |
|||
strokeOpacity: 1, // 线透明度 |
|||
strokeWeight: 6, // 线宽 |
|||
// strokeStyle: 'solid' // 线样式 |
|||
}); |
|||
|
|||
// 通过的轨迹 |
|||
let passedPolyline = new AMap.Polyline({ |
|||
map: map, |
|||
showDir: true, |
|||
strokeColor: '#4B5', // 线颜色 |
|||
strokeOpacity: 1, // 线透明度 |
|||
strokeWeight: 6, // 线宽 |
|||
}); |
|||
|
|||
// 小车移动回调 |
|||
this.carMarker.on('moving', function (e) { |
|||
passedPolyline.setPath(e.passedPath); |
|||
}); |
|||
|
|||
// 地图自适应 |
|||
map.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(); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
</style> |
|||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue