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

MDUI前端css样式美化库集成

Browse Source
This commit is contained in:
WangHao 2020-10-05 22:49:59 +08:00
parent d8b398d3d8
commit f79ef13ddf
9 changed files with 253 additions and 203 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ruoyi-ui/package.json
View File

@ -51,6 +51,7 @@
"js-beautify": "^1.10.2", "js-beautify": "^1.10.2",
"js-cookie": "2.2.0", "js-cookie": "2.2.0",
"jsencrypt": "3.0.0-rc.1", "jsencrypt": "3.0.0-rc.1",
"mdui": "^1.0.0",
"normalize.css": "7.0.0", "normalize.css": "7.0.0",
"nprogress": "0.2.0", "nprogress": "0.2.0",
"path-to-regexp": "2.4.0", "path-to-regexp": "2.4.0",

9
ruoyi-ui/public/index.html
View File

@ -5,9 +5,10 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit"> <meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- MDUI CSS -->
<link <link
rel="stylesheet" rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/mdui@1.0.0/dist/css/mdui.min.css" href="https://cdn.bootcdn.net/ajax/libs/mdui/1.0.0/css/mdui.min.css"
integrity="sha384-2PJ2u4NYg6jCNNpv3i1hK9AoAqODy6CdiC+gYiL2DVx+ku5wzJMFNdE3RoWfBIRP" integrity="sha384-2PJ2u4NYg6jCNNpv3i1hK9AoAqODy6CdiC+gYiL2DVx+ku5wzJMFNdE3RoWfBIRP"
crossorigin="anonymous" crossorigin="anonymous"
/> />
@ -204,6 +205,7 @@
} }
</style> </style>
</head> </head>
<body> <body>
<div id="app"> <div id="app">
<div id="loader-wrapper"> <div id="loader-wrapper">
@ -213,10 +215,11 @@
<div class="load_title">正在加载系统资源，请耐心等待</div> <div class="load_title">正在加载系统资源，请耐心等待</div>
</div> </div>
</div> </div>
</body>
<script <script
src="https://cdn.jsdelivr.net/npm/mdui@1.0.0/dist/js/mdui.min.js" src="https://cdn.bootcdn.net/ajax/libs/mdui/1.0.0/js/mdui.min.js"
integrity="sha384-aB8rnkAu/GBsQ1q6dwTySnlrrbhqDwrDnpVHR2Wgm8pWLbwUnzDcIROX3VvCbaK+" integrity="sha384-aB8rnkAu/GBsQ1q6dwTySnlrrbhqDwrDnpVHR2Wgm8pWLbwUnzDcIROX3VvCbaK+"
crossorigin="anonymous" crossorigin="anonymous"
></script> ></script>
</body>
</html> </html>

5
ruoyi-ui/src/main.js
View File

@ -54,6 +54,11 @@ Vue.prototype.msgInfo = function (msg) {
this.$message.info(msg); this.$message.info(msg);
} }
//上线前需要删除的目前使用的
// 1.目前使用的是 cdn引入
// package.json >> "mdui": "^1.0.0",
// 全局组件挂载 // 全局组件挂载
Vue.component('Pagination', Pagination) Vue.component('Pagination', Pagination)
Vue.use(ElementUI) Vue.use(ElementUI)

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

@ -186,9 +186,9 @@ export const constantRoutes = [
requireAuth: true,//加该字段,表示进入这个路由是需要登录的true requireAuth: true,//加该字段,表示进入这个路由是需要登录的true
}, },
},{ },{
path: '/NqQuillEdit', path: '/NqEdit',
name: 'NqQuillEdit', name: 'NqEdit',
component: resolve => require(['../views/bookmark/common/NqQuillEdit.vue'], resolve), component: resolve => require(['../views/bookmark/common/NqEdit.vue'], resolve),
meta:{ meta:{
title: 'Quill编辑器',icon:'user', title: 'Quill编辑器',icon:'user',
requireAuth: true,//加该字段,表示进入这个路由是需要登录的true requireAuth: true,//加该字段,表示进入这个路由是需要登录的true

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

@ -79,7 +79,7 @@
<el-row> <el-row>
<!-- <hr class="bookamrk-hr" v-if="!queryParams.sousuo!=''"/>--> <!-- <hr class="bookamrk-hr" v-if="!queryParams.sousuo!=''"/>-->
<el-col :span="24" v-for="bm in bookmarkList"> <el-col :span="24" v-for="bm in bookmarkList">
<div class="editBookamrk"> <div class="editBookamrk ">
<div class="editlist"> <div class="editlist">
<div> <div>
<el-button plain size="small" @click="handleUpdate(bm.bookmarkId)">修改</el-button> <el-button plain size="small" @click="handleUpdate(bm.bookmarkId)">修改</el-button>
@ -97,7 +97,7 @@
</div> </div>
<div class="bookmark" :data-id="bm.id" @click="windowurl(bm.url,bm.bookmarkId)"> <div class="bookmark " :data-id="bm.id" @click="windowurl(bm.url,bm.bookmarkId)">
<p class="bookmark-title" v-if="highlighted"><span v-html="highLight(bm.title,queryParams.sousuo)"/></p> <p class="bookmark-title" v-if="highlighted"><span v-html="highLight(bm.title,queryParams.sousuo)"/></p>
<p class="bookmark-title" v-if="!highlighted">{{bm.title}}</p> <p class="bookmark-title" v-if="!highlighted">{{bm.title}}</p>
<div class=""> <div class="">

3
ruoyi-ui/src/views/bookmark/common/ImportHtml.vue
View File

@ -29,8 +29,9 @@
<div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入".html"格式文件！</div> <div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入".html"格式文件！</div>
</el-upload> </el-upload>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitFileForm">确 定</el-button> <el-button type="primary" class=" mdui-text-center mdui-btn mdui-btn-raised mdui-text-color-blue-900 mdui-color-light-blue-100" @click="submitFileForm">确 定</el-button>
<!-- <el-button @click="upload.open = false">取 消</el-button>--> <!-- <el-button @click="upload.open = false">取 消</el-button>-->
<button class="mdui-btn mdui-btn-raised mdui-btn-dense mdui-color-light-blue-100 mdui-ripple">Button</button>
</div> </div>
<!-- </el-dialog>--> <!-- </el-dialog>-->

107
ruoyi-ui/src/views/bookmark/common/NqEdit.vue Normal file
View File

@ -0,0 +1,107 @@
<template>
<div class="home">
<div CLASS="title">
<div class="mdui-textfield mdui-textfield-floating-label">
<label class="mdui-textfield-label">文章标题</label>
<input class="mdui-textfield-input" type="text" required/>
<div class="mdui-textfield-error">文章标题不能为空</div>
</div>
<div class="mdui-textfield mdui-textfield-floating-label">
<label class="mdui-textfield-label">文章描述</label>
<input class="mdui-textfield-input" type="text" required/>
<div class="mdui-textfield-error">文章描述不能为空</div>
</div>
</div>
<div class="mian" v-html="msg">
</div>
<div>
<tinymce
ref="editor"
v-model="msg"
:disabled="disabled"
@onClick="onClick"
/>
</div>
<div STYLE="margin-top: 10px;">
<button class="mdui-btn mdui-btn-raised mdui-color-indigo-300" @click="clear">清空内容</button>
<button class="mdui-btn mdui-ripple mdui-btn-raised " @click="disabled = true">禁用</button>
<button class="mdui-btn mdui-ripple mdui-btn-raised " @click="disabled = false">启用</button>
</div>
</div>
</template>
<script>
import tinymce from '../../../components/TinyMCE'
const defaultForm = {
status: 'draft',
title: '', // 文章题目
content: '', // 文章内容
content_short: '', // 文章摘要
source_uri: '', // 文章外链
image_uri: '', // 文章图片
display_time: undefined, // 前台展示时间
id: undefined,
platforms: ['a-platform'],
comment_disabled: false,
importance: 0
}
export default {
name: 'home',
components: {
tinymce
},
data(){
return{
postForm: Object.assign({}, defaultForm),
msg: "<span>请尽情创作吧!</span>",
disabled: false
}
},
methods: {
// 鼠标单击的事件
onClick (e, editor) {
console.log('Element clicked')
console.log(e)
console.log(editor)
},
// 清空内容
clear () {
this.$refs.editor.clear()
}
}
}
</script>
<style>
.title{
display: flex;
}
.title div:first-child{
margin-right: 20px;
}
.title div{
width: 50%;
}
.mian{
min-height: 100px;
width: 100%;
border: 1px solid #cacaca;
background-color: #ebebeb;
/*text-indent: 10px;*/
padding: 10px;
margin-bottom: 10px;
opacity: 0.9;
}
.home{
height: 800px;
overflow: scroll;
}
</style>

68
ruoyi-ui/src/views/bookmark/common/NqQuillEdit.vue
View File

@ -1,68 +0,0 @@
<template>
<div class="home">
<el-form-item style="margin-bottom: 40px;" prop="title">
<MDinput v-model="postForm.title" :maxlength="100" name="name" required>
Title
</MDinput>
</el-form-item>
<tinymce
ref="editor"
v-model="msg"
:disabled="disabled"
@onClick="onClick"
/>
<button @click="clear">清空内容</button>
<button @click="disabled = true">禁用</button>
</div>
</template>
<script>
import tinymce from '../../../components/TinyMCE'
const defaultForm = {
status: 'draft',
title: '', // 文章题目
content: '', // 文章内容
content_short: '', // 文章摘要
source_uri: '', // 文章外链
image_uri: '', // 文章图片
display_time: undefined, // 前台展示时间
id: undefined,
platforms: ['a-platform'],
comment_disabled: false,
importance: 0
}
export default {
name: 'home',
components: {
tinymce
},
data(){
return{
postForm: Object.assign({}, defaultForm),
msg: 'Welcome to Use Tinymce Editor',
disabled: false
}
},
methods: {
// 鼠标单击的事件
onClick (e, editor) {
console.log('Element clicked')
console.log(e)
console.log(editor)
},
// 清空内容
clear () {
this.$refs.editor.clear()
}
}
}
</script>

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

@ -5,13 +5,13 @@
<transition name="el-zoom-in-left"> <transition name="el-zoom-in-left">
<el-aside :style="asideHeight" v-show="isShowZtree" class="transition-box left isaside" <el-aside :style="asideHeight" v-show="isShowZtree" class="transition-box left isaside"
style="overflow-x:hidden;overflow-y: hidden;"> style="overflow-x:hidden;overflow-y: hidden;">
<el-header class="aside-logo"> <el-header class="aside-logo ">
<!-- <img src="https://s1.ax1x.com/2020/08/15/dACqUO.png"/>--> <!-- <img src="https://s1.ax1x.com/2020/08/15/dACqUO.png"/>-->
<div class="logoname"> <div class="logoname">
<span>藏趣云书签</span> <span>藏趣云书签</span>
</div> </div>
<div class="logoright"> <div class="logoright ">
<i class="el-icon-plus"/> <i class="el-icon-plus mdui-ripple"/>
</div> </div>
</el-header> </el-header>
@ -33,7 +33,7 @@
<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" @click="ceshi"><i class="el-icon-s-comment"></i><span>测试页面</span></div>
<div class="aside-title" @click="NqQuillEdit"><i class="el-icon-s-comment"></i><span>NqQuillEdit编辑器</span></div> <div class="aside-title" @click="NqEdit"><i class="el-icon-s-comment"></i><span>NqQuillEdit编辑器</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>
@ -1287,9 +1287,9 @@
}, },
/**跳转NqQuillEdit测试页面**/ /**跳转NqQuillEdit测试页面**/
NqQuillEdit: function () { NqEdit: function () {
this.$router.push({ this.$router.push({
path: "/NqQuillEdit", path: "/NqEdit",
}) })
}, },
@ -1617,10 +1617,10 @@
} }
.logoright i:active { /*.logoright i:active {*/
background-color: #7a6df0; /* background-color: #7a6df0;*/
color: #FFFFFF; /* color: #FFFFFF;*/
} /*}*/
.reminder { .reminder {
@ -2019,7 +2019,8 @@
min-width: 250px; min-width: 250px;
} }
.box { /*不可复制*/
.isaside {
-moz-user-select: none; /* Firefox私有属性 */ -moz-user-select: none; /* Firefox私有属性 */
-webkit-user-select: none; /* WebKit内核私有属性 */ -webkit-user-select: none; /* WebKit内核私有属性 */
-ms-user-select: none; /* IE私有属性(IE10及以后) */ -ms-user-select: none; /* IE私有属性(IE10及以后) */