Skip to content
GitLab
Commit 2ca68f84 authored by yinxr's avatar yinxr
Browse files

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

parent d47f9956
Hide whitespace changes
Inline Side-by-side
src/main/webapp/WEB-INF/manager/include/head-file.ftl
View file @ 2ca68f84
...@@ -18,6 +18,7 @@ ...@@ -18,6 +18,7 @@
<script src="http://cdn.mingsoft.net/ms/1.0/ms.util.js"></script> <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/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/ms-admin/4.7.0/css/login.css">
<link rel="stylesheet" href="../../../static/mweixin/css/custom-menu.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 @@ ...@@ -16,14 +16,10 @@
<el-footer> <el-footer>
<el-button icon="el-icon-date"></el-button> <el-button icon="el-icon-date"></el-button>
<div class="ms-create-menu"> <div class="ms-create-menu">
<el-dropdown placement='top' :hide-on-click='false'> <div class="ms-create-sub-menu">
<el-button type="primary">新建菜单</el-button> <el-button type="primary" @click='addSubMenuShow = !addSubMenuShow'>新建菜单</el-button>
<el-dropdown-menu slot="dropdown"> <el-button icon="el-icon-plus" v-show='addSubMenuShow'></el-button>
<el-dropdown-item> </div>
<el-button type="text" icon='el-icon-plus'></el-button>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-button icon="el-icon-plus"></el-button> <el-button icon="el-icon-plus"></el-button>
</div> </div>
</el-footer> </el-footer>
...@@ -38,27 +34,14 @@ ...@@ -38,27 +34,14 @@
<el-input v-model="customMenuForm.name" size='mini'></el-input> <el-input v-model="customMenuForm.name" size='mini'></el-input>
<span>菜单名称字数不多于5个汉字或10个字母</span> <span>菜单名称字数不多于5个汉字或10个字母</span>
</el-form-item> </el-form-item>
<el-form-item label="菜单内容" prop='content'> <el-form-item label="菜单内容" class="ms-custom-menu-content">
<el-input v-model="customMenuForm.content"></el-input> <el-tabs v-model="activeName" @tab-click="">
<el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="图片" name="picture">
<el-tab-pane label="图片" name="first">
<span slot="label"><i class="el-icon-picture"></i>图片</span> <span slot="label"><i class="el-icon-picture"></i>图片</span>
<el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" <div @click="open('store')"><i class="el-icon-picture-outline"></i><span>从素材库选择</span></div>
:on-preview="handlePictureCardPreview" :on-remove="handleRemove"> <div @click="open('new')"><i class="el-icon-plus"></i><span>新建图片</span></div>
<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>
</el-tab-pane> </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> <span slot="label"><i class="el-icon-picture"></i>图文管理</span>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
...@@ -77,38 +60,31 @@ ...@@ -77,38 +60,31 @@
data: { data: {
customMenuForm: { customMenuForm: {
name: '', name: '',
content: "",
}, },
customMenuFormRules: { customMenuFormRules: {
name: [{ name: [{
required: true, required: true,
message: '请输入菜单名称', message: '请输入菜单名称',
trigger: 'blur' trigger: ['blur','change']
}, },
{ {
min: 1, min: 1,
max: 5, max: 5,
message: '长度在 1 到 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: '', addSubMenuShow:false,//子菜单添加弹窗
dialogVisible: false, activeName: 'picture'
activeName: 'first'
}, },
methods: { methods: {
handleRemove(file, fileList) { open:function(type){
console.log(file, fileList); if(type == 'store'){
}, // 素材库
handlePictureCardPreview(file) { }else{
this.dialogImageUrl = file.url; // 新建图片
this.dialogVisible = true; }
},
handleClick(tab, event) {
console.log(tab, event);
} }
} }
......
src/main/webapp/static/mweixin/css/custom-menu.css
View file @ 2ca68f84
...@@ -151,26 +151,32 @@ textarea::-webkit-input-placeholder { ...@@ -151,26 +151,32 @@ textarea::-webkit-input-placeholder {
display: flex; display: flex;
justify-content: space-between; 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-button {
.ms-custom-menu .ms-custom-container .el-aside .el-container .el-footer .ms-create-menu .el-dropdown {
flex: 1; flex: 1;
border: none !important; border: none !important;
background: transparent !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-button span {
.ms-custom-menu .ms-custom-container .el-aside .el-container .el-footer .ms-create-menu .el-dropdown span {
color: #333; color: #333;
} }
.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 .ms-create-sub-menu {
flex: .5; 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%; width: 100%;
} }
.ms-custom-menu .ms-custom-container .el-aside .el-container .el-footer .ms-create-menu .el-button--default { .ms-custom-menu .ms-custom-container .el-aside .el-container .el-footer .ms-create-menu .el-button--default {
border-left: 1px solid #ddd !important; border-left: 1px solid #ddd !important;
padding: 0 !important; padding: 0 !important;
flex: .5; flex: 1;
} }
.ms-custom-menu .ms-custom-container .el-main { .ms-custom-menu .ms-custom-container .el-main {
padding: 0 20px; padding: 0 20px;
...@@ -191,3 +197,47 @@ textarea::-webkit-input-placeholder { ...@@ -191,3 +197,47 @@ textarea::-webkit-input-placeholder {
font-size: 12px; font-size: 12px;
color: #999; 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 @@ ...@@ -44,8 +44,8 @@
.ms-create-menu{ .ms-create-menu{
flex: 1; flex: 1;
font-size: 0; font-size: 0;
.ms-flex(space-between); .ms-flex(space-between);
.el-button,.el-dropdown{ .el-button{
flex: 1; flex: 1;
border: none !important; border: none !important;
background: transparent !important; background: transparent !important;
...@@ -53,17 +53,25 @@ ...@@ -53,17 +53,25 @@
color:#333; color:#333;
} }
} }
.el-dropdown{ .ms-create-sub-menu{
flex: .5; flex: 1;
>.el-button{ position: relative;
width: 100%; >.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{ .el-button--default{
border-left: 1px solid @borderColor !important; border-left: 1px solid @borderColor !important;
padding:0 !important; padding:0 !important;
flex: .5; flex: 1;
} }
} }
} }
...@@ -88,7 +96,49 @@ ...@@ -88,7 +96,49 @@
.ms-font(@auxiliarySize,@auxiliaryColor); .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;
}
}
}
} }
} }
} }
......
Supports Markdown
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