Skip to content

C
cms_sys
Commit 2ca68f84 authored by yinxr's avatar yinxr
Browse files
Options

Signed-off-by: yinxr <2273460044@qq.com>

parent d47f9956
Hide whitespace changes
Inline Side-by-side
Showing with 139 additions and 62 deletions
src/main/webapp/WEB-INF/manager/include/head-file.ftl
View file @ 2ca68f84
......@@ -18,6 +18,7 @@
<script src="http://cdn.mingsoft.net/ms/1.0/ms.util.js"></script>
<!-- <link rel="stylesheet" href="${base}/static/ms-admin/4.7.0/css/login.css"> -->
<!-- <link rel="stylesheet" href="${base}/static/mweixin/css/custom-menu.css"> -->
<link rel="stylesheet" href="../../../static/ms-admin/4.7.0/css/login.css">
<link rel="stylesheet" href="../../../static/mweixin/css/custom-menu.css">
......
src/main/webapp/WEB-INF/manager/mweixin/custom-menu.ftl
View file @ 2ca68f84
......@@ -16,14 +16,10 @@
<el-footer>
<el-button icon="el-icon-date"></el-button>
<div class="ms-create-menu">
<el-dropdown placement='top' :hide-on-click='false'>
<el-button type="primary">新建菜单</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>
<el-button type="text" icon='el-icon-plus'></el-button>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<div class="ms-create-sub-menu">
<el-button type="primary" @click='addSubMenuShow = !addSubMenuShow'>新建菜单</el-button>
<el-button icon="el-icon-plus" v-show='addSubMenuShow'></el-button>
</div>
<el-button icon="el-icon-plus"></el-button>
</div>
</el-footer>
......@@ -38,27 +34,14 @@
<el-input v-model="customMenuForm.name" size='mini'></el-input>
<span>菜单名称字数不多于5个汉字或10个字母</span>
</el-form-item>
<el-form-item label="菜单内容" prop='content'>
<el-input v-model="customMenuForm.content"></el-input>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="图片" name="first">
<el-form-item label="菜单内容" class="ms-custom-menu-content">
<el-tabs v-model="activeName" @tab-click="">
<el-tab-pane label="图片" name="picture">
<span slot="label"><i class="el-icon-picture"></i>图片</span>
<el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card"
:on-preview="handlePictureCardPreview" :on-remove="handleRemove">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
<el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card"
:on-preview="handlePictureCardPreview" :on-remove="handleRemove">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
<div @click="open('store')"><i class="el-icon-picture-outline"></i><span>从素材库选择</span></div>
<div @click="open('new')"><i class="el-icon-plus"></i><span>新建图片</span></div>
</el-tab-pane>
<el-tab-pane label="图文管理" name="second">
<el-tab-pane label="图文管理" name="article">
<span slot="label"><i class="el-icon-picture"></i>图文管理</span>
</el-tab-pane>
</el-tabs>
......@@ -77,38 +60,31 @@
data: {
customMenuForm: {
name: '',
content: "",
},
customMenuFormRules: {
name: [{
required: true,
message: '请输入菜单名称',
trigger: 'blur'
trigger: ['blur','change']
},
{
min: 1,
max: 5,
message: '长度在 1 到 5 个字符',
trigger: 'blur'
trigger: ['blur','change']
}
],
// content:[{ required: true, message: '请输入菜单名称', trigger: 'blur' },
// { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }]
},
dialogImageUrl: '',
dialogVisible: false,
activeName: 'first'
addSubMenuShow:false,//子菜单添加弹窗
activeName: 'picture'
},
methods: {
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
handleClick(tab, event) {
console.log(tab, event);
open:function(type){
if(type == 'store'){
// 素材库
}else{
// 新建图片
}
}
}
......
src/main/webapp/static/mweixin/css/custom-menu.css
View file @ 2ca68f84
......@@ -151,26 +151,32 @@ textarea::-webkit-input-placeholder {
display: flex;
justify-content: space-between;
}
.ms-custom-menu .ms-custom-container .el-aside .el-container .el-footer .ms-create-menu .el-button,
.ms-custom-menu .ms-custom-container .el-aside .el-container .el-footer .ms-create-menu .el-dropdown {
.ms-custom-menu .ms-custom-container .el-aside .el-container .el-footer .ms-create-menu .el-button {
flex: 1;
border: none !important;
background: transparent !important;
}
.ms-custom-menu .ms-custom-container .el-aside .el-container .el-footer .ms-create-menu .el-button span,
.ms-custom-menu .ms-custom-container .el-aside .el-container .el-footer .ms-create-menu .el-dropdown span {
.ms-custom-menu .ms-custom-container .el-aside .el-container .el-footer .ms-create-menu .el-button span {
color: #333;
}
.ms-custom-menu .ms-custom-container .el-aside .el-container .el-footer .ms-create-menu .el-dropdown {
flex: .5;
.ms-custom-menu .ms-custom-container .el-aside .el-container .el-footer .ms-create-menu .ms-create-sub-menu {
flex: 1;
position: relative;
}
.ms-custom-menu .ms-custom-container .el-aside .el-container .el-footer .ms-create-menu .ms-create-sub-menu > .el-button:first-child {
width: 100%;
}
.ms-custom-menu .ms-custom-container .el-aside .el-container .el-footer .ms-create-menu .el-dropdown > .el-button {
.ms-custom-menu .ms-custom-container .el-aside .el-container .el-footer .ms-create-menu .ms-create-sub-menu > .el-button:last-child {
position: absolute;
top: -60px;
left: 0;
border: 1px solid #ddd !important;
width: 100%;
}
.ms-custom-menu .ms-custom-container .el-aside .el-container .el-footer .ms-create-menu .el-button--default {
border-left: 1px solid #ddd !important;
padding: 0 !important;
flex: .5;
flex: 1;
}
.ms-custom-menu .ms-custom-container .el-main {
padding: 0 20px;
......@@ -191,3 +197,47 @@ textarea::-webkit-input-placeholder {
font-size: 12px;
color: #999;
}
.ms-custom-menu .ms-custom-container .el-main .custom-menu-card .ms-custom-menu-content .el-tabs {
border: 1px solid #ddd;
}
.ms-custom-menu .ms-custom-container .el-main .custom-menu-card .ms-custom-menu-content .el-tabs .el-tabs__header {
background: #f2f2f6;
border-radius: 4px 4px 0 0 !important;
margin: 0 !important;
}
.ms-custom-menu .ms-custom-container .el-main .custom-menu-card .ms-custom-menu-content .el-tabs .el-tabs__header .el-tabs__nav-scroll {
padding: 0 20px;
}
.ms-custom-menu .ms-custom-container .el-main .custom-menu-card .ms-custom-menu-content .el-tabs .el-tabs__header .el-tabs__nav-scroll i {
margin-right: 8px;
}
.ms-custom-menu .ms-custom-container .el-main .custom-menu-card .ms-custom-menu-content .el-tabs .el-tab-pane {
padding: 20px;
width: 100%;
height: 220px;
display: flex;
justify-content: space-between;
}
.ms-custom-menu .ms-custom-container .el-main .custom-menu-card .ms-custom-menu-content .el-tabs .el-tab-pane > div {
flex: 1;
border: 1px dashed #ddd;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.ms-custom-menu .ms-custom-container .el-main .custom-menu-card .ms-custom-menu-content .el-tabs .el-tab-pane > div i {
font-weight: bolder;
font-size: 20px;
color: #0099ff;
}
.ms-custom-menu .ms-custom-container .el-main .custom-menu-card .ms-custom-menu-content .el-tabs .el-tab-pane > div span {
margin-top: 8px;
line-height: 1;
}
.ms-custom-menu .ms-custom-container .el-main .custom-menu-card .ms-custom-menu-content .el-tabs .el-tab-pane > div:hover {
cursor: pointer;
}
.ms-custom-menu .ms-custom-container .el-main .custom-menu-card .ms-custom-menu-content .el-tabs .el-tab-pane > div:last-child {
margin-left: 20px;
}
src/main/webapp/static/mweixin/custom-menu.less
View file @ 2ca68f84
......@@ -44,8 +44,8 @@
.ms-create-menu{
flex: 1;
font-size: 0;
.ms-flex(space-between);
.el-button,.el-dropdown{
.ms-flex(space-between);
.el-button{
flex: 1;
border: none !important;
background: transparent !important;
......@@ -53,17 +53,25 @@
color:#333;
}
}
.el-dropdown{
flex: .5;
>.el-button{
width: 100%;
}
.ms-create-sub-menu{
flex: 1;
position: relative;
>.el-button:first-child{
width:100%;
}
>.el-button:last-child{
position: absolute;
top: -60px;
left: 0;
border: 1px solid @borderColor !important;
width: 100%;
}
}
// 添加菜单
// 添加菜单
.el-button--default{
border-left: 1px solid @borderColor !important;
padding:0 !important;
flex: .5;
flex: 1;
}
}
}
......@@ -88,7 +96,49 @@
.ms-font(@auxiliarySize,@auxiliaryColor);
}
}
}
// 菜单内容
.ms-custom-menu-content{
.el-tabs{
border: 1px solid @borderColor;
.el-tabs__header{
background: #f2f2f6;
border-radius:4px 4px 0 0 !important;
margin: 0 !important;
.el-tabs__nav-scroll{
padding: 0 20px;
i{
margin-right: 8px;
}
}
}
.el-tab-pane{
padding: 20px;
.ms-width-height(100%,220px);
.ms-flex();
// 素材库
>div{
flex: 1;
border: 1px dashed @borderColor;
.ms-flex(center);
align-items: center;
flex-direction: column;
i{
.ms-font(20px,@themeColor,bolder);
}
span{
margin-top:8px;
line-height: 1;
}
&:hover{
cursor: pointer;
}
}
>div:last-child{
margin-left:20px;
}
}
}
}
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment