Song/xkrs_ms
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

网页 文本 切换样式

Browse Source
This commit is contained in:
WangHao
2020-10-01 15:54:41 +08:00
parent 6db93e0123
commit 7b38b9eb59
9 changed files with 476 additions and 244 deletions
Download Patch File Download Diff File Expand all files Collapse all files

398
ruoyi-ui/.eslintrc.js
View File

@ -1,199 +1,199 @@
// ESlint 检查配置 // ESlint 检查配置
module.exports = { module.exports = {
root: true, root: true,
parserOptions: { parserOptions: {
parser: 'babel-eslint', parser: 'babel-eslint',
sourceType: 'module' sourceType: 'module'
}, },
env: { env: {
browser: true, browser: true,autoprefixer
node: true, node: true,
es6: true, es6: true,
}, },
extends: ['plugin:vue/recommended', 'eslint:recommended'], extends: ['plugin:vue/recommended', 'eslint:recommended'],
// add your custom rules here // add your custom rules here
//it is base on https://github.com/vuejs/eslint-config-vue //it is base on https://github.com/vuejs/eslint-config-vue
rules: { rules: {
"vue/max-attributes-per-line": [2, { "vue/max-attributes-per-line": [2, {
"singleline": 10, "singleline": 10,
"multiline": { "multiline": {
"max": 1, "max": 1,
"allowFirstLine": false "allowFirstLine": false
} }
}], }],
"vue/singleline-html-element-content-newline": "off", "vue/singleline-html-element-content-newline": "off",
"vue/multiline-html-element-content-newline":"off", "vue/multiline-html-element-content-newline":"off",
"vue/name-property-casing": ["error", "PascalCase"], "vue/name-property-casing": ["error", "PascalCase"],
"vue/no-v-html": "off", "vue/no-v-html": "off",
'accessor-pairs': 2, 'accessor-pairs': 2,
'arrow-spacing': [2, { 'arrow-spacing': [2, {
'before': true, 'before': true,
'after': true 'after': true
}], }],
'block-spacing': [2, 'always'], 'block-spacing': [2, 'always'],
'brace-style': [2, '1tbs', { 'brace-style': [2, '1tbs', {
'allowSingleLine': true 'allowSingleLine': true
}], }],
'camelcase': [0, { 'camelcase': [0, {
'properties': 'always' 'properties': 'always'
}], }],
'comma-dangle': [2, 'never'], 'comma-dangle': [2, 'never'],
'comma-spacing': [2, { 'comma-spacing': [2, {
'before': false, 'before': false,
'after': true 'after': true
}], }],
'comma-style': [2, 'last'], 'comma-style': [2, 'last'],
'constructor-super': 2, 'constructor-super': 2,
'curly': [2, 'multi-line'], 'curly': [2, 'multi-line'],
'dot-location': [2, 'property'], 'dot-location': [2, 'property'],
'eol-last': 2, 'eol-last': 2,
'eqeqeq': ["error", "always", {"null": "ignore"}], 'eqeqeq': ["error", "always", {"null": "ignore"}],
'generator-star-spacing': [2, { 'generator-star-spacing': [2, {
'before': true, 'before': true,
'after': true 'after': true
}], }],
'handle-callback-err': [2, '^(err|error)$'], 'handle-callback-err': [2, '^(err|error)$'],
'indent': [2, 2, { 'indent': [2, 2, {
'SwitchCase': 1 'SwitchCase': 1
}], }],
'jsx-quotes': [2, 'prefer-single'], 'jsx-quotes': [2, 'prefer-single'],
'key-spacing': [2, { 'key-spacing': [2, {
'beforeColon': false, 'beforeColon': false,
'afterColon': true 'afterColon': true
}], }],
'keyword-spacing': [2, { 'keyword-spacing': [2, {
'before': true, 'before': true,
'after': true 'after': true
}], }],
'new-cap': [2, { 'new-cap': [2, {
'newIsCap': true, 'newIsCap': true,
'capIsNew': false 'capIsNew': false
}], }],
'new-parens': 2, 'new-parens': 2,
'no-array-constructor': 2, 'no-array-constructor': 2,
'no-caller': 2, 'no-caller': 2,
'no-console': 'off', 'no-console': 'off',
'no-class-assign': 2, 'no-class-assign': 2,
'no-cond-assign': 2, 'no-cond-assign': 2,
'no-const-assign': 2, 'no-const-assign': 2,
'no-control-regex': 0, 'no-control-regex': 0,
'no-delete-var': 2, 'no-delete-var': 2,
'no-dupe-args': 2, 'no-dupe-args': 2,
'no-dupe-class-members': 2, 'no-dupe-class-members': 2,
'no-dupe-keys': 2, 'no-dupe-keys': 2,
'no-duplicate-case': 2, 'no-duplicate-case': 2,
'no-empty-character-class': 2, 'no-empty-character-class': 2,
'no-empty-pattern': 2, 'no-empty-pattern': 2,
'no-eval': 2, 'no-eval': 2,
'no-ex-assign': 2, 'no-ex-assign': 2,
'no-extend-native': 2, 'no-extend-native': 2,
'no-extra-bind': 2, 'no-extra-bind': 2,
'no-extra-boolean-cast': 2, 'no-extra-boolean-cast': 2,
'no-extra-parens': [2, 'functions'], 'no-extra-parens': [2, 'functions'],
'no-fallthrough': 2, 'no-fallthrough': 2,
'no-floating-decimal': 2, 'no-floating-decimal': 2,
'no-func-assign': 2, 'no-func-assign': 2,
'no-implied-eval': 2, 'no-implied-eval': 2,
'no-inner-declarations': [2, 'functions'], 'no-inner-declarations': [2, 'functions'],
'no-invalid-regexp': 2, 'no-invalid-regexp': 2,
'no-irregular-whitespace': 2, 'no-irregular-whitespace': 2,
'no-iterator': 2, 'no-iterator': 2,
'no-label-var': 2, 'no-label-var': 2,
'no-labels': [2, { 'no-labels': [2, {
'allowLoop': false, 'allowLoop': false,
'allowSwitch': false 'allowSwitch': false
}], }],
'no-lone-blocks': 2, 'no-lone-blocks': 2,
'no-mixed-spaces-and-tabs': 2, 'no-mixed-spaces-and-tabs': 2,
'no-multi-spaces': 2, 'no-multi-spaces': 2,
'no-multi-str': 2, 'no-multi-str': 2,
'no-multiple-empty-lines': [2, { 'no-multiple-empty-lines': [2, {
'max': 1 'max': 1
}], }],
'no-native-reassign': 2, 'no-native-reassign': 2,
'no-negated-in-lhs': 2, 'no-negated-in-lhs': 2,
'no-new-object': 2, 'no-new-object': 2,
'no-new-require': 2, 'no-new-require': 2,
'no-new-symbol': 2, 'no-new-symbol': 2,
'no-new-wrappers': 2, 'no-new-wrappers': 2,
'no-obj-calls': 2, 'no-obj-calls': 2,
'no-octal': 2, 'no-octal': 2,
'no-octal-escape': 2, 'no-octal-escape': 2,
'no-path-concat': 2, 'no-path-concat': 2,
'no-proto': 2, 'no-proto': 2,
'no-redeclare': 2, 'no-redeclare': 2,
'no-regex-spaces': 2, 'no-regex-spaces': 2,
'no-return-assign': [2, 'except-parens'], 'no-return-assign': [2, 'except-parens'],
'no-self-assign': 2, 'no-self-assign': 2,
'no-self-compare': 2, 'no-self-compare': 2,
'no-sequences': 2, 'no-sequences': 2,
'no-shadow-restricted-names': 2, 'no-shadow-restricted-names': 2,
'no-spaced-func': 2, 'no-spaced-func': 2,
'no-sparse-arrays': 2, 'no-sparse-arrays': 2,
'no-this-before-super': 2, 'no-this-before-super': 2,
'no-throw-literal': 2, 'no-throw-literal': 2,
'no-trailing-spaces': 2, 'no-trailing-spaces': 2,
'no-undef': 2, 'no-undef': 2,
'no-undef-init': 2, 'no-undef-init': 2,
'no-unexpected-multiline': 2, 'no-unexpected-multiline': 2,
'no-unmodified-loop-condition': 2, 'no-unmodified-loop-condition': 2,
'no-unneeded-ternary': [2, { 'no-unneeded-ternary': [2, {
'defaultAssignment': false 'defaultAssignment': false
}], }],
'no-unreachable': 2, 'no-unreachable': 2,
'no-unsafe-finally': 2, 'no-unsafe-finally': 2,
'no-unused-vars': [2, { 'no-unused-vars': [2, {
'vars': 'all', 'vars': 'all',
'args': 'none' 'args': 'none'
}], }],
'no-useless-call': 2, 'no-useless-call': 2,
'no-useless-computed-key': 2, 'no-useless-computed-key': 2,
'no-useless-constructor': 2, 'no-useless-constructor': 2,
'no-useless-escape': 0, 'no-useless-escape': 0,
'no-whitespace-before-property': 2, 'no-whitespace-before-property': 2,
'no-with': 2, 'no-with': 2,
'one-var': [2, { 'one-var': [2, {
'initialized': 'never' 'initialized': 'never'
}], }],
'operator-linebreak': [2, 'after', { 'operator-linebreak': [2, 'after', {
'overrides': { 'overrides': {
'?': 'before', '?': 'before',
':': 'before' ':': 'before'
} }
}], }],
'padded-blocks': [2, 'never'], 'padded-blocks': [2, 'never'],
'quotes': [2, 'single', { 'quotes': [2, 'single', {
'avoidEscape': true, 'avoidEscape': true,
'allowTemplateLiterals': true 'allowTemplateLiterals': true
}], }],
'semi': [2, 'never'], 'semi': [2, 'never'],
'semi-spacing': [2, { 'semi-spacing': [2, {
'before': false, 'before': false,
'after': true 'after': true
}], }],
'space-before-blocks': [2, 'always'], 'space-before-blocks': [2, 'always'],
'space-before-function-paren': [2, 'never'], 'space-before-function-paren': [2, 'never'],
'space-in-parens': [2, 'never'], 'space-in-parens': [2, 'never'],
'space-infix-ops': 2, 'space-infix-ops': 2,
'space-unary-ops': [2, { 'space-unary-ops': [2, {
'words': true, 'words': true,
'nonwords': false 'nonwords': false
}], }],
'spaced-comment': [2, 'always', { 'spaced-comment': [2, 'always', {
'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ','] 'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
}], }],
'template-curly-spacing': [2, 'never'], 'template-curly-spacing': [2, 'never'],
'use-isnan': 2, 'use-isnan': 2,
'valid-typeof': 2, 'valid-typeof': 2,
'wrap-iife': [2, 'any'], 'wrap-iife': [2, 'any'],
'yield-star-spacing': [2, 'both'], 'yield-star-spacing': [2, 'both'],
'yoda': [2, 'never'], 'yoda': [2, 'never'],
'prefer-const': 2, 'prefer-const': 2,
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0, 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
'object-curly-spacing': [2, 'always', { 'object-curly-spacing': [2, 'always', {
objectsInObjects: false objectsInObjects: false
}], }],
'array-bracket-spacing': [2, 'never'] 'array-bracket-spacing': [2, 'never']
} }
} }

2
ruoyi-ui/package.json
View File

@ -84,6 +84,8 @@
"html-webpack-plugin": "3.2.0", "html-webpack-plugin": "3.2.0",
"http-proxy-middleware": "^0.19.1", "http-proxy-middleware": "^0.19.1",
"husky": "1.3.1", "husky": "1.3.1",
"less": "^3.12.2",
"less-loader": "^7.0.1",
"lint-staged": "8.1.5", "lint-staged": "8.1.5",
"mockjs": "1.0.1-beta3", "mockjs": "1.0.1-beta3",
"node-sass": "^4.9.0", "node-sass": "^4.9.0",

14
ruoyi-ui/src/assets/styles/base.css
View File

@ -3,6 +3,9 @@
.sousouleft-switch{ .sousouleft-switch{
display: none; display: none;
} }
.dropdownList{
font-size: 22px!important;
}
} }
@ -26,9 +29,20 @@
/* >>> md*/ /* >>> md*/
@media screen and (max-width: 992px) { @media screen and (max-width: 992px) {
.el-dropdown-link span{
display: none;
}
} }
/* >>> md*/
@media screen and (max-width: 850px) {
}
/* ipad >>> xs*/ /* ipad >>> xs*/
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.sousou-leftico{ .sousou-leftico{

71
ruoyi-ui/src/components/TagsInput/index.vue Normal file
View File

@ -0,0 +1,71 @@
<template>
<div class="tags_input">
<div style="border: 1px solid red;height: 50px"
type="text"
:placeholder="placeholder"
v-model="value"
@keyup.enter.native="add" contenteditable="true">
<el-tag style="float: left;margin-top: 10px;margin-left: 10px"
v-for="(tag,index) in list"
:key="index"
closable
:disable-transitions="false"
@close="handleClose(tag)">
{{tag}}
</el-tag>
</div>
</div>
</template>
<script>
export default {
name:'TagsInput',
props: {
listFilter: Boolean, // 是否去重
defaulList: null, // 默认值
placeholder: null // 占位文字
},
data() {
return {
value: '',
list: [],
}
},
watch:{
defaulList: {
handler(newVal) {
this.list = newVal
},
deep: true
}
},
mounted() {
this.list = this.defaulList
this.$emit('input', this.list) // 发送给父级的tagslist
},
methods: {
add() {
let self = this
if (self.value != '' || self.value != ' ') {
self.list.push(self.value)
if (self.listFilter) {
let arr = self.list
let set = new Set(arr)
self.list = Array.from(set)
}
}
self.value = ''
self.$emit('input', self.list)
},
handleClose(tag) {
let self = this
self.$emit('tagClose', tag)
self.list.splice(self.list.indexOf(tag), 1);
},
}
}
</script>

7
ruoyi-ui/src/router/index.js
View File

@ -166,6 +166,13 @@ export const constantRoutes = [
meta:{ meta:{
requireAuth: true,//加该字段,表示进入这个路由是需要登录的true requireAuth: true,//加该字段,表示进入这个路由是需要登录的true
}, },
},{
path: '/ceshi',
name: 'ceshi',
component: resolve => require(['../views/bookmark/ceshi/index.vue'], resolve),
meta:{
requireAuth: true,//加该字段,表示进入这个路由是需要登录的true
},
} }
], ],

181
ruoyi-ui/src/views/bookmark/bookmark/index.vue
View File

@ -3,50 +3,62 @@
<template > <template >
<div > <div >
<div class="filter" > <div class="filter-tbar" >
<div class="filter-sort" > <div class="filter-classification" >
<el-dropdown trigger="click" size="small"> <div class="classification " @click="showopen(0)"><span>全部</span></div>
<span class="el-dropdown-link"> <div class="classification" @click="showopen(1)"><span>网页</span></div>
<span>按时间排序(正)</span> <i class="el-icon-caret-bottom"></i> <div class="classification" @click="showopen(2)"><span>文本</span></div>
</span> <div class="classification" @click="showopen(3)"><span>其他</span></div>
<el-dropdown-menu slot="dropdown" class="filter-sort-dropdown">
<el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>按时间排序(正)</el-dropdown-item>
<el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>按时间排序(反)</el-dropdown-item>
<el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>按字母A-Z排序</el-dropdown-item>
<el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>按字母A-Z排序</el-dropdown-item>
<el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>按网站A-Z排序</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div> </div>
<div > <div class="setUpThe">
<el-divider direction="vertical"></el-divider> <div class="filter-content">
</div> <el-dropdown trigger="hover" size="small">
<div class="filler-tag"> <div class="el-dropdown-link dropdownList">
<el-tag size="small">我的最爱</el-tag> <i class="el-icon-document-checked " ></i> <span>排序模式</span>
</div> </div>
<div class="filler-tag"> <el-dropdown-menu slot="dropdown" class="filter-sort-dropdown">
<el-tag size="small" >小型标签</el-tag> <el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>按时间排序(正)</el-dropdown-item>
</div> <el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>按时间排序(反)</el-dropdown-item>
<div class="filler-tag"> <el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>按字母A-Z排序</el-dropdown-item>
<el-tag size="small" >小型标签</el-tag> <el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>按字母A-Z排序</el-dropdown-item>
</div> <el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>按网站A-Z排序</el-dropdown-item>
<div class="filler-tag"> </el-dropdown-menu>
<el-tag size="small" >小型标签</el-tag> </el-dropdown>
</div>
<div class="filler-tag"> </div>
<el-tag size="small" >小型标签</el-tag> <div class="filter-content">
</div> <el-dropdown trigger="hover" size="small">
<div class="filler-tag"> <div class="el-dropdown-link dropdownList">
<el-tag size="small" >小型标签</el-tag> <i class="el-icon-tickets " ></i> <span>卡片模式</span>
</div> </div>
<div class="filler-tag"> <el-dropdown-menu slot="dropdown" class="filter-sort-dropdown">
<el-tag size="small" >...</el-tag> <el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>按时间排序(正)</el-dropdown-item>
<el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>按时间排序(反)</el-dropdown-item>
<el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>按字母A-Z排序</el-dropdown-item>
<el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>按字母A-Z排序</el-dropdown-item>
<el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>按网站A-Z排序</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<div class="filter-content">
<el-dropdown trigger="hover" size="small">
<div class="el-dropdown-link dropdownList">
<i class="el-icon-setting " ></i> <span>批量设置</span>
</div>
<el-dropdown-menu slot="dropdown" class="filter-sort-dropdown">
<el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>编辑</el-dropdown-item>
<el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>批量处理</el-dropdown-item>
<el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>排序</el-dropdown-item>
<el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>按网站A-Z排序</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div> </div>
</div> </div>
<div class="nullbookmark" v-if="showimg"> <div class="nullbookmark" v-if="showimg">
<div class="nullbookmark-img"> <div class="nullbookmark-img">
</div> </div>
@ -84,6 +96,12 @@
<img :ng-src="'https://favicon.lucq.fun/?url=http://'+bm.urls" :src="'https://favicon.lucq.fun/?url=http://'+bm.urls" onerror="this.src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAASAAAAEgARslrPgAAAmVJREFUSMftlG1IU2EUx8+5jRHzg+5OiD64WTBBjSY5ZybUJMaMiIUICUKFIGmoIIogYWKFBmtDxN1tBKIWvlS6SR+iLFDBXqSMgmzbvQ7fkAjcINmQ5u7pQwyCiOvWx/p/fPj9/5znnPM8AP+VolRTjjHhTlmZipzEk9GYao4sVaMYxXp62NgIdpLBCuLP05mZZHOYZA3p5KgMjBcUwCmw4PfVVYiBGmbW1zMzOU4QCgtTvdAeRESEyNZyJbx+dDTjVv/9YFSjSScnfabsbPYMF+AbxsYS3F5TfwPZAacpMNfUBEAljK24mMJwlLIUClTAdfwok9FXWBTtc3Phzqv7c/RWa8KnrHZM8VltbRjC92AxGkEPRpSJInjJQPpIBJoZC6nn50M19dM5J/v6/lhRxgXXDX9Qp1POcmHh2sTEQbfbvVmrUCTbr4RPaeMe8Q0eTyI36VkrW50mftjrPWCyDn9oSUuTdj4Y/1Qpl7NdzkNC98iIqsIxHdQVFaU8eWW1U1guLy1lr3Acr3O7pXi227EhDLpcCZ8UL/kK8LIYjxtDIRhEP8xGIlI8bcAKvY3FGB/zYvf81pYUL/0PvGTKoTUvjzbgCx5ZWlJq3a5lQa1Ge3yTWnp64ASYqVcUoXn3Jtja2/EpRtHj89FF8Tb25ufDOwCo8/lSL0BF/eDPzcVXeA7WDAa6J9rES1VVdJqx41JHBwCE8BgA3JU9B+3AACziMwjv7MAaPQb/wgIAnP2rDpCWtpkncjm+Ro34bWgo3FkX0O6bnARARCT6hSR6YzazXa7DfLyigo7TNtObxNb/s/oB7V8JFvW/8IQAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjAtMDItMDJUMTg6MTE6NTgrMDg6MDCoc6tpAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIwLTAyLTAyVDE4OjExOjU4KzA4OjAw2S4T1QAAAGd0RVh0c3ZnOmJhc2UtdXJpAGZpbGU6Ly8vaG9tZS9hZG1pbi9pY29uLWZvbnQvdG1wL2ljb25fNWhyOG55Nmo1bWMvamluZ2RpYW5hbmxpX2tvbmd3dWppYW94aW5nX3Nob3VjYW5nLnN2Z4/vilwAAAAASUVORK5CYII='" alt="" ng-show="bm.urls"> <img :ng-src="'https://favicon.lucq.fun/?url=http://'+bm.urls" :src="'https://favicon.lucq.fun/?url=http://'+bm.urls" onerror="this.src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAASAAAAEgARslrPgAAAmVJREFUSMftlG1IU2EUx8+5jRHzg+5OiD64WTBBjSY5ZybUJMaMiIUICUKFIGmoIIogYWKFBmtDxN1tBKIWvlS6SR+iLFDBXqSMgmzbvQ7fkAjcINmQ5u7pQwyCiOvWx/p/fPj9/5znnPM8AP+VolRTjjHhTlmZipzEk9GYao4sVaMYxXp62NgIdpLBCuLP05mZZHOYZA3p5KgMjBcUwCmw4PfVVYiBGmbW1zMzOU4QCgtTvdAeRESEyNZyJbx+dDTjVv/9YFSjSScnfabsbPYMF+AbxsYS3F5TfwPZAacpMNfUBEAljK24mMJwlLIUClTAdfwok9FXWBTtc3Phzqv7c/RWa8KnrHZM8VltbRjC92AxGkEPRpSJInjJQPpIBJoZC6nn50M19dM5J/v6/lhRxgXXDX9Qp1POcmHh2sTEQbfbvVmrUCTbr4RPaeMe8Q0eTyI36VkrW50mftjrPWCyDn9oSUuTdj4Y/1Qpl7NdzkNC98iIqsIxHdQVFaU8eWW1U1guLy1lr3Acr3O7pXi227EhDLpcCZ8UL/kK8LIYjxtDIRhEP8xGIlI8bcAKvY3FGB/zYvf81pYUL/0PvGTKoTUvjzbgCx5ZWlJq3a5lQa1Ge3yTWnp64ASYqVcUoXn3Jtja2/EpRtHj89FF8Tb25ufDOwCo8/lSL0BF/eDPzcVXeA7WDAa6J9rES1VVdJqx41JHBwCE8BgA3JU9B+3AACziMwjv7MAaPQb/wgIAnP2rDpCWtpkncjm+Ro34bWgo3FkX0O6bnARARCT6hSR6YzazXa7DfLyigo7TNtObxNb/s/oB7V8JFvW/8IQAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjAtMDItMDJUMTg6MTE6NTgrMDg6MDCoc6tpAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIwLTAyLTAyVDE4OjExOjU4KzA4OjAw2S4T1QAAAGd0RVh0c3ZnOmJhc2UtdXJpAGZpbGU6Ly8vaG9tZS9hZG1pbi9pY29uLWZvbnQvdG1wL2ljb25fNWhyOG55Nmo1bWMvamluZ2RpYW5hbmxpX2tvbmd3dWppYW94aW5nX3Nob3VjYW5nLnN2Z4/vilwAAAAASUVORK5CYII='" alt="" ng-show="bm.urls">
</div> </div>
<div class="bookmark-official">{{bm.urls}}&nbsp;·&nbsp;</div><div class="bookmark-time">{{bm.createTime|changeTime}}</div> <div class="bookmark-official">{{bm.urls}}&nbsp;·&nbsp;</div><div class="bookmark-time">{{bm.createTime|changeTime}}</div>
<div class="bookmark-time" v-for="t in bm.sqTags">
<el-tag class="bookmark-list-tag" style="background-color: #7a6df0;color: #ffffff" data-bookmarkId="t.bookmarkId" data-tagId="t.tagId}" size="mini">{{t.name}}</el-tag>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -278,11 +296,27 @@
}, },
mounted(){ mounted(){
//初始化
this.newBookmark();
}, },
methods: { methods: {
/**初始化**/
newBookmark() {
//默认选中 全部
document.getElementsByClassName("classification")[0].classList.add("classification-click");
},
/**切换显示 全部 网页 文本 其他**/
showopen(e) {
document.getElementsByClassName("classification")[e].classList.add("classification-click");
for (var i = 0; i < 4; i++) {
if (i != e) {
document.getElementsByClassName("classification")[i].classList.remove('classification-click');
}
}
},
/**书签编辑设置的 标签开始**/ /**书签编辑设置的 标签开始**/
taghandleClose(tag) { taghandleClose(tag) {
@ -509,7 +543,6 @@
.filter-sort-dropdown{ .filter-sort-dropdown{
top:65px!important;
box-shadow: 0 2px 15px 0 rgba(0,0,0,.2)!important; box-shadow: 0 2px 15px 0 rgba(0,0,0,.2)!important;
font-weight: 600!important; font-weight: 600!important;
} }
@ -545,6 +578,7 @@
position: absolute; position: absolute;
background-color: #acd7ff; background-color: #acd7ff;
right: 0; right: 0;
display: none;
} }
.editlist{ .editlist{
display: flex; display: flex;
@ -564,6 +598,69 @@
margin-right: 5px; margin-right: 5px;
} }
.filter-tbar{
display: flex;
position: relative;
width: 100%;
height: 40px;
-webkit-box-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
align-items: center;
box-sizing: border-box;
}
.filter-classification {
display: flex;
-webkit-box-align: center;
align-items: center;
}
.setUpThe{
display: flex;
align-items: center;
justify-content: center;
}
.filter-content{
margin-left: 18px;
}
.dropdownList{
display: flex;
justify-content: center;
font-size: 18px;
}
.dropdownList i{
margin-right: 4px;
font-weight: 600;
}
.dropdownList span{
line-height: initial;
font-size: 17px;
}
.classification{
width: 60px;
height: 27px;
margin-left: 10px;
text-align: center;
line-height: 26px;
color: #a4a4a4;
}
.classification-click{
border-radius: 19px;
background: #606c88; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #3f4c6b, #606c88); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #3f4c6b, #606c88); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
color: #FFFFFF;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.4)
}
.bookmark-list-tag{
margin-left: 4px;
}
</style> </style>

37
ruoyi-ui/src/views/bookmark/ceshi/index.vue Normal file
View File

@ -0,0 +1,37 @@
<template>
<div>
<div style="width: 500px">
<tags-input
v-model="tagList"
:defaulList="defaulList"
:listFilter=true
placeholder="按enter键创建标签"
@tagClose="tagClose"></tags-input>
</div>
</div>
</template>
<script>
import TagsInput from '../../../components/TagsInput'
export default {
components: {
TagsInput
},
data() {
return {
// 子组件返回的list
tagList: null,
// 付默认值
defaulList:[],
// 是否去重
listFilter:false
}
},
methods: {
// 标签关闭方法
tagClose(tag){
console.log(tag)
}
}
}
</script>

7
ruoyi-ui/src/views/bookmark/index/index.vue
View File

@ -28,6 +28,7 @@
<div class="aside-title" @click="gorecycle"><i class="el-icon-delete-solid"></i><span>回收站</span></div> <div class="aside-title" @click="gorecycle"><i class="el-icon-delete-solid"></i><span>回收站</span></div>
<div class="aside-title" @click="importHtml"><i class="el-icon-s-platform"></i><span>导入书签</span></div> <div class="aside-title" @click="importHtml"><i class="el-icon-s-platform"></i><span>导入书签</span></div>
<div class="aside-title"><i class="el-icon-s-comment"></i><span>意见反馈</span></div> <div class="aside-title"><i class="el-icon-s-comment"></i><span>意见反馈</span></div>
<div class="aside-title" @click="ceshi"><i class="el-icon-s-comment"></i><span>测试页面</span></div>
<div class="aside-title " style="margin-bottom: 100px"><i class="el-icon-s-grid"></i><span>其他设置</span></div> <div class="aside-title " style="margin-bottom: 100px"><i class="el-icon-s-grid"></i><span>其他设置</span></div>
</div> </div>
@ -706,6 +707,12 @@
path: "/importHtml", path: "/importHtml",
}) })
},/**跳转测试页面**/
ceshi:function(){
this.$router.push({
path: "/ceshi",
})
}, },

3
ruoyi-ui/src/views/bookmark/menu/index.vue
View File

@ -156,9 +156,6 @@
}, },
} }
</script> </script>
<style > <style >