background
Recently, I met a requirement in the project, that is, I need to integrate the menu operation of the public account in my background system. At that time, I was completely confused. Is the setting of the wechat public account not good? Somebody else 1, I use your background, finished setting a public menu you also let me run to login public background Settings. When I heard this sentence, there was nothing to say, who called us to take people’s money, can not help people eliminate disasters to solve difficulties what. It’s nice to think that, but what the hell, it’s done.
When I think about it, NM, it is not the public number of background operation logic this copy again come over, looking for background brother to discuss to help me write a few interfaces. Since this is easy to do, but ah, the home page to find UI little sister to the whole good-looking mobile phone design draft on the line, can not light the whole two buttons bare more not good-looking it.
thinking
Based on the above so there is today’s article, but also to record what they have done. Let’s just cut the crap and see how it works,
implementation
As the saying goes, it’s better to do it once than to think about it a thousand times. Home to do is to put such a UI to achieve.
Static production
The home page to do is the layout, to divide the structure out, here it is not embarrassing, you are masters, directly on the code
<div class="mp-management"> <div class="mp-wrapper"> <div class="mobile"> <div class="weixin-hd"> <div <div class="weixin-title"> public </div> <div class="weixin-menu menu_main"> <div class="menu_bottom"> <div Class ="menu_item el-icon-s-fold active"> Menu name </div> <div class="submenu"> <div class="menu_bottom menu_addicon">< I Class ="el-icon-plus"></ I ></div> <div class="subtitle menu_bottom"> <div class="menu_subItem active"> </div> </div> <div class="menu_bottom menu_addicon"><i class="el-icon-plus"></i></div> </div> </div> <div Class ="mp-content"> <div class="right"> <p> Please select the menu configuration </p> <div class="right"> <div class="configure-page"> <div Class ="delete-btn"> <el-button size="mini" type="danger" icon="el-icon-delete"> Delete current menu </el-button> </div> <div Class ="menu-name"> <span> </span> <el-input V-model ="name" placeholder=" clearable></el-input> </div> <div> <div class="menu-content"> <span> Menu contents: </span> <el-select V-model ="type" clearable placeholder=" class="menu_option"> <el-option label=" send message" value="click"></el-option> </el-select> </div> <div class="configur-content"> <el-tabs v-model="repType" Type ="border-card"> <el-tab-pane label=" text"> <div class="message-text"> <span> </span> < EL-input V-model ="repContent" placeholder=" Please enter the content "clearable></el-input> </div> </el-tab-pane> <el-tab-pane <div class="message-upload"> <div class="upload"> < I class="el-icon-plus uploader-icon"></ I > <p> Select an existing resource </p> </div> </div> </el-tab-pane> <el-tab-pane label=" audio "name="voice"> <div class="message-upload"> <div Class ="upload"> < I class="el-icon-plus uploader-icon"></ I >< p> Select an existing resource </p> </div> </el-tab-pane> <el-tab-pane <div class="message-upload"> <div class="upload"> < I class="el-icon-plus uploader-icon"></ I > < / p > < p > select an existing resources < / div > < / div > < / el - TAB pane > < / el tabs - > < / div > < div class = "configur - content" > < el - card > < div Class ="applet"> <span </span> <el-input V-model =" URL "placeholder=" please input the link clearable></el-input> </div> </el-card> </div> <div Class ="configur-content"> <el-card> <div class="applet"> <span> </span> <el-input V-model =" appID "placeholder=" clearable></el-input> </div> <div class="applet"> <span> <el-input V-model ="pagepath" placeholder=" Pages /index" clearable></el-input> </div> <div class="applet"> <span> </span> <el-input V-model =" URL "placeholder=" older version clients that do not support apappoints will open this page" clearable></el-input> </div> <p Class ="tips">tips: need to associate with the public number to bind the small program with wechat menu! </p> </el-card> </div> </div> </div> </div> <div class="save-wrapper right"> <el-button type="primary"> Save and publish </el-button> </div> </div> </div> </div>Copy the codeSo the structure as above OK, next to give a makeup beautification. Style more nothing to say, we are all masters, here I use less as an extension of CSS oh.
.mp-management{
min-width: 1200px;
width: 1200px;
margin: 0 auto;
.mp-wrapper{
display: flex;
.mobile{
width: 350px;
height: 715px;
background: url("./iphone_backImg.png") no-repeat;
background-size: 100% auto;
padding: 518px 25px 88px;
position: relative;
box-sizing: border-box;
.weixin-hd{
color: #fff;
text-align: center;
position: relative;
bottom: 426px;
left:0px;
width: 300px;
height:64px;
background: transparent url(./menu_head.png) no-repeat 0 0;
background-position: 0 0;
background-size: 100%;
.weixin-title{
color:#fff;
font-size:14px;
width:100%;
text-align: center;
position:absolute;
top: 33px;
left: 0px;
}
}
.weixin-menu{
background: transparent url(./menu_foot.png) no-repeat 0 0;
padding-left: 43px;
font-size: 12px;
}
.menu_main{
display: flex;
.menu_bottom{
position: relative;
display: inline-block;
box-sizing: border-box;
flex: 1;
text-align: center;
border: 1px solid #ebedee;
border-right: none;
background-color: #fff;
cursor: pointer;
&:nth-child(3){
border-right: none;
}
&.menu_addicon{
height: 46px;
line-height: 46px;
}
.menu_item{
height: 44px;
line-height: 44px;
text-align: center;
box-sizing: border-box;
width: 100%;
&.active{
border: 1px solid #2bb673;
}
}
.menu_subItem{
height: 44px;
line-height: 44px;
text-align: center;
box-sizing: border-box;
&.active{
border: 1px solid #2bb673;
}
}
}
i{
color:#2bb673;
}
.submenu{
position: absolute;
width: 100%;
bottom: 45px;
display: flex;
flex-direction: column;
.subtitle{
background-color: #fff;
box-sizing: border-box;
}
.menu_bottom{
border-right: 1px solid #ebedee;
}
}
}
}
.mp-content{
flex: 1;
margin-left: 20px;
.right{
background-color: rgb(245, 246, 250);
padding: 20px;
.el-input,.el-select{
flex: 1;
}
.configure-page{
.delete-btn{
text-align: right;
margin-bottom: 15px;
}
.menu-name{
margin-bottom: 20px;
display: flex;
align-items: center;
}
.menu-content{
display: flex;
align-items: center;
}
.configur-content{
margin-top: 20px;
background-color: #fff;
border-radius: 5px;
.message-text{
padding: 20px 0;
display: flex;
align-items: center;
}
.message-upload{
margin: 20px auto;
background-color: #ffffff;
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.upload{
width: 178px;
height: 178px;
border: 1px dashed #d9d9d9;
border-radius: 6px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
i{
font-size: 28px;
color: #8c939d;
}
p{
margin-top: 10px;
text-align: center;
}
}
img{
max-width: 300px;
}
}
.applet{
margin-bottom: 20px;
display: flex;
align-items: center;
}
.tips{
color:#29b6f6;
margin-top: 10px;
}
}
}
&.save-wrapper{
padding-top: 20px;
text-align: center;
}
}
}
}
}
Copy the codeOf course, here I just provide a simple version, if there are adaptation problems also please solve your own, I believe that this is not difficult to fall masters. The preview looks like this:
Dynamic effect
After the static one is made, we need to add the corresponding operation logic to make the static one behave according to our logic. Here is actually to add events and operations to the corresponding place, this process is also an important process in our normal development time.
Left menu implementation
To realize the menu on the left, we need to know several problems: 1, the menu may not have the situation, 2, the menu has a situation, 3, the menu has two, 4, the menu has three, 5, the menu can not do more than three, 6, there are two menus. Think about these problems and then we start to implement. First of all, we have to look at the public number menu Settings and access to the format is what:
menu:{ Button: [{type: 'click', name: 'the name of the menu, sub_button: [{type:' click 'name:' submenu}]}, {type: 'view, name:' menu name}, {type: 'miniprogram', Name :' menu name '}]},// Horizontal menuCopy the codeThe menu here depends on the background situation
The key core code is as follows:
<div class="menu_bottom" v-for="(item, i) of menu.button" :key="i" > <div @click="menuFun(i,item)" class="menu_item el-icon-s-fold" :class="{'active': isActive == i}">{{item.name}}</div> <div class="submenu" v-if="isSubMenuFlag == i"> <div class="menu_bottom menu_addicon" v-if="! item.sub_button || item.sub_button.length < 5" @click="addSubMenu(i,item)"><i class="el-icon-plus"></i></div> <template v-for="(subItem, k) in item.sub_button"> <div class="subtitle menu_bottom" v-if="item.sub_button" :key="k"> <div class="menu_subItem" :class="{'active': isSubMenuActive == i + '' +k}" @click="subMenuFun(subItem, i, k)">{{subItem.name}}</div> </div> </template> </div> </div> <div class="menu_bottom menu_addicon" v-if="menuKeyLength < 3" @click="addMenu"><i class="el-icon-plus"></i></div>Copy the codeThis completes the menu on the left. For detailed code, please go to the end of the article
The right content
From the beginning of the diagram, we can know that the content is more than the content on the right, which has several parts: menu related, menu content related. The menu has two parts, one is the name and the other is the content type of the menu.
<div class="menu-name"> <span> </span> <el-input V-model =" tempobj.name "placeholder=" please input the menu name" : maxLength ="nameMaxlength" clearable @blur="menuNameChange"></el-input> </div> <div class="menu-content"> </span> <el-select V-model =" tempobj.type "clearable placeholder=" select" class="menu_option" @change="menuChange"> <el-option v-for="item in menuOptions" :label="item.label" :value="item.value" :key="item.value"></el-option> </el-select> </div>Copy the codeThese two parts are actually very simple, one is input, one is the drop-down selection is ok, the trouble is the following content. The following content is divided into several parts: one is the reply class, one is the address class, and is the small program class, at present their own project is the most important small program piece, for their own configuration small program some shortcuts.
Reply type content
There are several types of reply: text, picture, audio and video. This part is connected as follows:
<el-tabs V-model =" tempobj.reptype "type="border-card" @tab-click="handleClick"> <el-tab-pane label=" text" name="text"> <div class="message-text"> <span> </span> <el-input V-model =" tempobj.repContent "placeholder=" clearable></el-input> </div> </el-tab-pane> <el-tab-pane label=" image" name="image"> <div class="message-upload" @click="getMaterial('image')"> <img :src="curSelectMedia.url" alt="" v-if="tempObj.repType=='image' && tempObj.mediaId"> <div class="upload" v-else> <i Class = "el - icon - plus uploader - icon" > < / I > < p > select an existing resources < / p > < / div > < / div > < / el - TAB - pane > < el - TAB - pane label = "audio" name = "voice" > <div class="message-upload" @click="getMaterial('voice')"> <audio :src="curSelectMedia.url" controls="controls" V-if =" tempobj.reptype =='voice' && tempobj.mediaid "> Your browser does not support the audio tag. </audio> <div class="upload" v-else> < I class="el-icon-plus uploader-icon"></ I >< p> Select an existing resource </p> </div> </div> </ el-Tab-pane > < EL-Tab-pane label=" video" name="video"> <div class="message-upload" @click="getMaterial('video')"> <video : SRC =" curselectMedia.url "controls ="controls" V-if =" tempobj.reptype =='video' && tempobj.mediaid "> Your browser does not support the video TAB. </video> <div class="upload" V-else >< I class="el-icon-plus uploader-icon"></ I >< p> Select an existing resource </p> </div> </div> </el-tab-pane> </el-tabs>Copy the codeContent of the connection type
The content of the link type is not much different from the above text, but I have separated it for the sake of understanding, as follows:
<div class="applet"> <span> </span> <el-input V-model =" tempobj.url "placeholder=" clearable></el-input> </div> </el-card>Copy the codeThe content of the applets content
This is the focus of this project, the small program type, mainly is to set the menu to open some paths of the small program, and the connection and text together, but more things, as follows:
<el-card> <div class="applet"> <span> </span> <el-input v-model=" tempobj.appId "placeholder=" clearable></el-input> </div> <div class="applet"> <span> <el-input V-model =" tempobj.pagepath "placeholder=" Pages /index" clearable></el-input> </div> <div class="applet"> <span> </span> <el-input V-model =" tempobj.url "placeholder=" older versions of the client that do not support small programs will open this webpage" clearable></el-input> </div> <p Class ="tips">tips: need to associate with the public number to bind the small program with wechat menu! </p> </el-card>Copy the codeThat’s about it.
The end
In fact, it is the basic thing, but also a study notes. The complete code is still put here, there is a need to study.
<template>
<div class="mp-management">
<div class="mp-wrapper" v-loading="saveLoading">
<div class="mobile">
<div class="weixin-hd">
<div class="weixin-title">公众号</div>
</div>
<div class="weixin-menu menu_main">
<div class="menu_bottom" v-for="(item, i) of menu.button" :key="i" >
<div @click="menuFun(i,item)" class="menu_item el-icon-s-fold" :class="{'active': isActive == i}">{{item.name}}</div>
<div class="submenu" v-if="isSubMenuFlag == i">
<div class="menu_bottom menu_addicon" v-if="!item.sub_button || item.sub_button.length < 5" @click="addSubMenu(i,item)"><i class="el-icon-plus"></i></div>
<template v-for="(subItem, k) in item.sub_button">
<div class="subtitle menu_bottom" v-if="item.sub_button" :key="k">
<div class="menu_subItem" :class="{'active': isSubMenuActive == i + '' +k}" @click="subMenuFun(subItem, i, k)">{{subItem.name}}</div>
</div>
</template>
</div>
</div>
<div class="menu_bottom menu_addicon" v-if="menuKeyLength < 3" @click="addMenu"><i class="el-icon-plus"></i></div>
</div>
</div>
<div class="mp-content">
<div v-if="!showRightFlag" class="right">
<p>请选择菜单配置</p>
</div>
<div v-if="showRightFlag" class="right">
<div class="configure-page">
<div class="delete-btn">
<el-button size="mini" type="danger" icon="el-icon-delete" @click="deleteMenu(tempObj)">删除当前菜单</el-button>
</div>
<div class="menu-name">
<span>菜单名称：</span>
<el-input v-model="tempObj.name" placeholder="请输入菜单名称" :maxlength="nameMaxlength" clearable @blur="menuNameChange"></el-input>
</div>
<div v-if="showConfigurContent">
<div class="menu-content">
<span>菜单内容：</span>
<el-select v-model="tempObj.type" clearable placeholder="请选择" class="menu_option" @change="menuChange">
<el-option v-for="item in menuOptions" :label="item.label" :value="item.value" :key="item.value"></el-option>
</el-select>
</div>
<div class="configur-content" v-if="tempObj.type == 'click'">
<el-tabs v-model="tempObj.repType" type="border-card" @tab-click="handleClick">
<el-tab-pane label="文字" name="text">
<div class="message-text">
<span>回复文本：</span>
<el-input v-model="tempObj.repContent" placeholder="请输入内容" clearable></el-input>
</div>
</el-tab-pane>
<el-tab-pane label="图片" name="image">
<div class="message-upload" @click="getMaterial('image')">
<img :src="curSelectMedia.url" alt="" v-if="tempObj.repType=='image' && tempObj.mediaId">
<div class="upload" v-else>
<i class="el-icon-plus uploader-icon"></i>
<p>选择现有资源</p>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="音频" name="voice">
<div class="message-upload" @click="getMaterial('voice')">
<audio :src="curSelectMedia.url" controls="controls" v-if="tempObj.repType=='voice' && tempObj.mediaId">您的浏览器不支持 audio 标签。</audio>
<div class="upload" v-else>
<i class="el-icon-plus uploader-icon"></i>
<p>选择现有资源</p>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="视频" name="video">
<div class="message-upload" @click="getMaterial('video')">
<video :src="curSelectMedia.url" controls="controls" v-if="tempObj.repType=='video' && tempObj.mediaId">您的浏览器不支持 video 标签。</video>
<div class="upload" v-else>
<i class="el-icon-plus uploader-icon"></i>
<p>选择现有资源</p>
</div>
</div>
</el-tab-pane>
</el-tabs>
</div>
<div class="configur-content" v-if="tempObj.type == 'view'">
<el-card>
<div class="applet">
<span>跳转链接：</span>
<el-input v-model="tempObj.url" placeholder="请输入链接" clearable></el-input>
</div>
</el-card>
</div>
<div class="configur-content" v-if="tempObj.type == 'miniprogram'">
<el-card>
<div class="applet">
<span>小程序的appid：</span>
<el-input v-model="tempObj.appid" placeholder="请输入小程序的appid" clearable></el-input>
</div>
<div class="applet">
<span>小程序的页面路径：</span>
<el-input v-model="tempObj.pagepath" placeholder="请输入小程序的页面路径，如：pages/index" clearable></el-input>
</div>
<div class="applet">
<span>备用网页：</span>
<el-input v-model="tempObj.url" placeholder="不支持小程序的老版本客户端将打开本网页" clearable></el-input>
</div>
<p class="tips">tips:需要和公众号进行关联才可以把小程序绑定带微信菜单上哟！</p>
</el-card>
</div>
</div>
</div>
</div>
<div class="save-wrapper right" v-if="showRightFlag">
<el-button type="primary" @click="saveAndReleaseFun">保存并发布</el-button>
</div>
</div>
</div>
<el-dialog title="选择资源" :visible.sync="selectMaterial" width="50%">
<div class="table-page">
<el-table :data="materials" height="600">
<el-table-column prop="mediaId" label="媒体id"></el-table-column>
<el-table-column prop="name" label="标题"></el-table-column>
<el-table-column label="预览" v-if="curType=='image'"><template slot-scope="scope"><img :src="scope.row.url" alt=""></template></el-table-column>
<el-table-column prop="updateTime" label="更新时间"></el-table-column>
<el-table-column label="操作" align="center"><template slot-scope="scope"><span class="operation-btn" @click="selectItems(scope.row)">选择</span></template></el-table-column>
</el-table>
<el-pagination background @size-change="page.sizeChange" @current-change="page.currentChange" :current-page="page.pageNo" :page-sizes="page.pageSizes" :page-size="page.pageSize" :pager-count="5" layout="slot, sizes, total, prev, pager, next, jumper" :total="page.total"></el-pagination>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
showRightFlag:false,
menu:{
button:[]
},//横向菜单
isActive: -1,// 一级菜单点中样式
isSubMenuActive: -1,// 一级菜单点中样式
isSubMenuFlag: -1,// 二级菜单显示标志
tempObj:{},//右边临时变量，作为中间值牵引关系
tempSelfObj:{
//一些临时值放在这里进行判断，如果放在tempObj，由于引用关系，menu也会多了多余的参数
},
showConfigurContent:false,
nameMaxlength:0,//名称最大长度
menuOptions: [
{value: 'click',label: '发送消息'},
{value: 'view',label: '跳转网页'},
{value: 'miniprogram',label: '跳转小程序'}
],
saveLoading:false,
selectMaterial:false,
materials:[],
page: {
pageSize: 10, //偏移，页面数据个数
pageSizes: [10, 20, 50],
pageNo: 1, //当前页数
total: 0, //总数据量
sizeChange: this.handleSizeChange,
currentChange: this.handleCurrentChange
},
curType:null,
curSelectMedia:null
}
},
watch: {
'page.pageNo': function() {
this.getMaterial()
},
'page.pageSize': function() {
this.getMaterial()
},
'$route.query': function(val) {
if(val.reflist) {
this.getMaterial()
}
}
},
computed:{
// menuObj的长度，当长度 小于 3 才显示一级菜单的加号
menuKeyLength:function(){
return this.menu.button.length
}
},
mounted() {
this.getMenuFun()
},
methods: {
getMenuFun(){
// 获取全部设置好的菜单
},
getMaterial(){
// 获取不同类型的全部素材让用户选择
},
handleClick(tab){
this.tempObj.repType = tab.name
},
menuChange(){
this.tempObj.repType = this.tempObj.repType ? this.tempObj.repType : 'text'
if(this.tempObj.repType != 'text'){
this.getMaterialByMediaId(this.tempObj.mediaId)
}
},
getMaterialByMediaId(){
// 通过接口获取单个素材
// this.curSelectMedia =
},
menuNameChange(){
if(this.tempSelfObj.grand == '2'){
this.menu.button[this.tempSelfObj.index].sub_button[this.tempSelfObj.secondIndex].name = this.tempObj.name
this.menu.button[this.tempSelfObj.index].sub_button[this.tempSelfObj.secondIndex].key = this.tempObj.name
}
},
saveAndReleaseFun(){
this.$confirm('确定要保存并发布该菜单吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 保存菜单
// this.saveLoading = true
// var params = {
// ...this.menu
// }
// this.saveLoading = false
// this.$message.success('操作成功！')
}).catch(() => {
})
},
// 一级菜单点击事件
menuFun(i, item){
this.showRightFlag = true //右边菜单
this.tempObj = item //这个如果放在顶部，flag会没有。因为重新赋值了。
this.tempSelfObj.grand = "1" //表示一级菜单
this.tempSelfObj.index = i //表示一级菜单索引
this.isActive = i //一级菜单选中样式
this.isSubMenuFlag = i //二级菜单显示标志
this.isSubMenuActive = -1 //二级菜单去除选中样式
this.nameMaxlength = 4
if(item.sub_button&&item.sub_button.length>0){
this.showConfigurContent = false
}else{
this.showConfigurContent = true
}
},
// 二级菜单点击事件
subMenuFun(subItem, index, k){
this.showRightFlag = true //右边菜单
this.tempObj = subItem //将点击的数据放到临时变量，对象有引用作用
this.tempSelfObj.grand = "2" //表示二级菜单
this.tempSelfObj.index = index //表示一级菜单索引
this.tempSelfObj.secondIndex = k //表示二级菜单索引
this.isSubMenuActive = index + "" + k //二级菜单选中样式
this.isActive = -1 //一级菜单去除样式
this.showConfigurContent = true
this.nameMaxlength = 7
},
// 添加横向一级菜单
addMenu(){
let menuKeyLength = this.menuKeyLength
let addButton = {
name: "菜单名称",
sub_button: [],
appid: "",
content: "",
key: "",
mediaId: "",
pagepath: "",
repContent: "",
repDesc: "",
repHqUrl: "",
repName: "",
repThumbMediaId: "",
repThumbUrl: "",
repType: "",
repUrl: "",
type: "",
url: ""
}
this.$set(this.menu.button,menuKeyLength,addButton)
this.menuFun(this.menuKeyLength-1, addButton)
},
// 添加横向二级菜单
addSubMenu(i,item){
if(!item.sub_button||item.sub_button.length<=0){
this.$set( item, 'sub_button',[])
this.$delete( item, 'type')
this.$delete( item, 'pagepath')
this.$delete( item, 'url')
this.$delete( item, 'key')
this.$delete( item, 'media_id')
this.$delete( item, 'textContent')
this.showConfigurContent = false
}
let subMenuKeyLength = item.sub_button.length //获取二级菜单key长度
let addButton = {
name: "子菜单名称",
appid: "",
content: "",
key: "",
mediaId: "",
pagepath: "",
repContent: "",
repDesc: "",
repHqUrl: "",
repName: "",
repThumbMediaId: "",
repThumbUrl: "",
repType: "",
repUrl: "",
sub_button: [],
type: "",
url: ""
}
this.$set(item.sub_button,subMenuKeyLength,addButton)
this.subMenuFun(item.sub_button[subMenuKeyLength], i, subMenuKeyLength)
},
//删除当前菜单
deleteMenu(){
this.$confirm('确定要删除吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.deleteData() // 删除菜单数据
this.tempObj = {}
this.showRightFlag = false
this.isActive = -1
this.isSubMenuActive = -1
}).catch(() => {
})
},
// 删除菜单数据
deleteData(){
// 一级菜单的删除方法
if(this.tempSelfObj.grand == "1"){
this.menu.button.splice(this.tempSelfObj.index,1)
}
// 二级菜单的删除方法
if(this.tempSelfObj.grand == "2"){
this.menu.button[this.tempSelfObj.index].sub_button.splice(this.tempSelfObj.secondIndex, 1)
}
this.$message({
type: 'success',
message: '删除成功!'
})
},
// 用户选取素材
selectItems(row){
this.tempObj.mediaId = row.mediaId
this.curSelectMedia = row
this.selectMaterial = false
},
handleSizeChange(val) {
this.page.pageSize = val
},
handleCurrentChange(val) {
this.page.pageNo = val
},
},
}
</script>
<style lang="less">
.mp-management{
min-width: 1200px;
width: 1200px;
margin: 0 auto;
.mp-wrapper{
display: flex;
.mobile{
width: 350px;
height: 715px;
background: url("./iphone_backImg.png") no-repeat;
background-size: 100% auto;
padding: 518px 25px 88px;
position: relative;
box-sizing: border-box;
.weixin-hd{
color: #fff;
text-align: center;
position: relative;
bottom: 426px;
left:0px;
width: 300px;
height:64px;
background: transparent url(./menu_head.png) no-repeat 0 0;
background-position: 0 0;
background-size: 100%;
.weixin-title{
color:#fff;
font-size:14px;
width:100%;
text-align: center;
position:absolute;
top: 33px;
left: 0px;
}
}
.weixin-menu{
background: transparent url(./menu_foot.png) no-repeat 0 0;
padding-left: 43px;
font-size: 12px;
}
.menu_main{
display: flex;
.menu_bottom{
position: relative;
display: inline-block;
box-sizing: border-box;
flex: 1;
text-align: center;
border: 1px solid #ebedee;
border-right: none;
background-color: #fff;
cursor: pointer;
&:nth-child(3){
border-right: none;
}
&.menu_addicon{
height: 46px;
line-height: 46px;
}
.menu_item{
height: 44px;
line-height: 44px;
text-align: center;
box-sizing: border-box;
width: 100%;
&.active{
border: 1px solid #2bb673;
}
}
.menu_subItem{
height: 44px;
line-height: 44px;
text-align: center;
box-sizing: border-box;
&.active{
border: 1px solid #2bb673;
}
}
}
i{
color:#2bb673;
}
.submenu{
position: absolute;
width: 100%;
bottom: 45px;
display: flex;
flex-direction: column;
.subtitle{
background-color: #fff;
box-sizing: border-box;
}
.menu_bottom{
border-right: 1px solid #ebedee;
}
}
}
}
.mp-content{
flex: 1;
margin-left: 20px;
.right{
background-color: rgb(245, 246, 250);
padding: 20px;
.el-input,.el-select{
flex: 1;
}
.configure-page{
.delete-btn{
text-align: right;
margin-bottom: 15px;
}
.menu-name{
margin-bottom: 20px;
display: flex;
align-items: center;
}
.menu-content{
display: flex;
align-items: center;
}
.configur-content{
margin-top: 20px;
background-color: #fff;
border-radius: 5px;
.message-text{
padding: 20px 0;
display: flex;
align-items: center;
}
.message-upload{
margin: 20px auto;
background-color: #ffffff;
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.upload{
width: 178px;
height: 178px;
border: 1px dashed #d9d9d9;
border-radius: 6px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
i{
font-size: 28px;
color: #8c939d;
}
p{
margin-top: 10px;
text-align: center;
}
}
img{
max-width: 300px;
}
}
.applet{
margin-bottom: 20px;
display: flex;
align-items: center;
}
.tips{
color:#29b6f6;
margin-top: 10px;
}
}
}
&.save-wrapper{
padding-top: 20px;
text-align: center;
}
}
}
}
}
</style>
Copy the code