yinxr
7 years ago
parent
fdf54c8b02
commit
b9b3ac1a34
13 changed files with 442 additions and 11 deletions
@ -0,0 +1,59 @@ |
||||
<!-- 素材库 --> |
||||
<link rel="stylesheet" href="../../../../static/mweixin/css/material-bank-form.css"> |
||||
<div id="material-bank-form" class="material-bank-form"> |
||||
<el-dialog title="选择图片" :visible.sync="isShow" custom-class='ms-weixin-dialog'> |
||||
<el-tabs tab-position="left"> |
||||
<el-tab-pane :label="group.label+'(2)'" v-for='(group,index) of materialGroup' :key='index'> |
||||
<el-upload :file-list='fileList' action="" 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-tabs> |
||||
</el-dialog> |
||||
|
||||
</div> |
||||
<script> |
||||
var materialBankFormVue = new Vue({ |
||||
el: '#material-bank-form', |
||||
data: { |
||||
isShow: false, |
||||
materialGroup: [{ |
||||
label: '未分组', |
||||
}, |
||||
{ |
||||
label: '云创', |
||||
}, |
||||
{ |
||||
label: 'PM管理', |
||||
}, |
||||
], |
||||
fileList: [], //文件列表 |
||||
dialogImageUrl: '', |
||||
dialogVisible: false |
||||
}, |
||||
watch:{ |
||||
fileList:{ |
||||
handler:function(n,o){ |
||||
console.log('文件列表',n); |
||||
}, |
||||
deep:true |
||||
} |
||||
}, |
||||
methods: { |
||||
// 表单打开 |
||||
open: function () { |
||||
this.isShow = true; |
||||
}, |
||||
handlePictureCardPreview:function(){ |
||||
|
||||
}, |
||||
handleRemove:function(){ |
||||
|
||||
} |
||||
} |
||||
}) |
||||
</script> |
||||
@ -0,0 +1,74 @@ |
||||
<!-- 新建图片表单 --> |
||||
<link rel="stylesheet" href="../../../../static/mweixin/css/new-pic-form.css"> |
||||
<div id='new-pic-form' v-show='isShow' class="new-pic-form"> |
||||
<el-dialog title="选择图片" :visible.sync="isShow" custom-class='ms-weixin-dialog'> |
||||
<el-form :model="newPicForm"> |
||||
<el-form-item label="上传图片" label-width="100px"> |
||||
<el-upload |
||||
class="new-pic-upload" |
||||
:on-preview="handlePreview" |
||||
:on-remove="handleRemove" |
||||
:file-list="picList" |
||||
list-type="picture"> |
||||
<el-button size="small" type="primary">本地上传</el-button> |
||||
<div slot="tip" class="el-upload__tip"> |
||||
<dl> |
||||
<dt>注意：1.图片上传仅支持bmp、png、jpeg、jpg、gif格式</dt> |
||||
<dd>2.同步至微信公众平台的图片最大2M,存在铭飞本地，最大支持5M的图片</dd> |
||||
</dl> |
||||
|
||||
</div> |
||||
</el-upload> |
||||
</el-form-item> |
||||
<el-form-item label="选择分组" label-width="100px"> |
||||
<el-button icon='el-icon-plus' size='mini'>添加分组</el-button> |
||||
<el-select v-model="selectedOption" placeholder="请选择分组" size='mini'> |
||||
<el-option v-for="item in picGroup" :key="item.value" :label="item.label" :value="item.value"> |
||||
</el-option> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-form> |
||||
<div slot="footer" class="dialog-footer"> |
||||
<el-button @click="isShow = false" size='mini'>取 消</el-button> |
||||
<el-button type="primary" @click="isShow = false" size='mini'>确 定</el-button> |
||||
</div> |
||||
</el-dialog> |
||||
</div> |
||||
<script> |
||||
var newPicFormVue = new Vue({ |
||||
el: '#new-pic-form', |
||||
data: { |
||||
isShow: false, |
||||
newPicForm: { |
||||
|
||||
}, |
||||
picGroup: [{ |
||||
value: 'default', |
||||
label: '默认分组' |
||||
}, { |
||||
value: 'yun', |
||||
label: '云创' |
||||
}, |
||||
{ |
||||
value: 'pm', |
||||
label: 'PM管理系统' |
||||
}], |
||||
selectedOption:'',//被选中的选项 |
||||
picList:[],//图片列表 |
||||
}, |
||||
methods: { |
||||
// 表单打开 |
||||
open: function () { |
||||
this.isShow = true; |
||||
}, |
||||
// 图片刚加载完 |
||||
handlePreview:function(){ |
||||
|
||||
}, |
||||
// 图片删除 |
||||
handleRemove:function(){ |
||||
|
||||
}, |
||||
}, |
||||
}) |
||||
</script> |
||||
@ -0,0 +1,120 @@ |
||||
/* |
||||
*这里的值严格按照UI设计图标注值来进行设置 |
||||
*/ |
||||
/* |
||||
*颜色 |
||||
*/ |
||||
/* |
||||
*页面的边距 |
||||
*/ |
||||
/* |
||||
*字体 |
||||
*/ |
||||
/* |
||||
*头像 |
||||
*/ |
||||
/* |
||||
* 按钮 |
||||
*/ |
||||
/* |
||||
*对常见的多行样式进行了方法封装，方便调用，加快开发效率 |
||||
*/ |
||||
html, |
||||
body { |
||||
min-height: 100vh; |
||||
width: 100vw; |
||||
background-color: #eee; |
||||
margin: 0; |
||||
display: flex; |
||||
font-weight: initial !important; |
||||
font-size: 14px !important; |
||||
color: #333 !important; |
||||
} |
||||
html *, |
||||
body * { |
||||
text-decoration: none !important; |
||||
font-family: Verdana, Arial, Helvetica, sans-serif; |
||||
box-sizing: border-box; |
||||
} |
||||
.ms-ellipsis { |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
white-space: nowrap; |
||||
display: block; |
||||
} |
||||
.ms-align-center { |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
input::-webkit-input-placeholder, |
||||
textarea::-webkit-input-placeholder { |
||||
font-weight: initial; |
||||
font-size: 12px; |
||||
color: #999; |
||||
resize: none; |
||||
} |
||||
*::-webkit-scrollbar { |
||||
width: 8px; |
||||
height: 8px; |
||||
} |
||||
/*定义滚动条轨道 内阴影+圆角*/ |
||||
*::-webkit-scrollbar-track { |
||||
border-radius: 10px; |
||||
/*滚动条的背景区域的圆角*/ |
||||
background-color: #eee; |
||||
/*滚动条的背景颜色*/ |
||||
} |
||||
/*定义滑块 内阴影+圆角*/ |
||||
*::-webkit-scrollbar-thumb { |
||||
border-radius: 10px; |
||||
/*滚动条的圆角*/ |
||||
background-color: #ddd; |
||||
/*滚动条的背景颜色*/ |
||||
} |
||||
.ms-container { |
||||
margin: 12px; |
||||
height: calc(100% - 24px); |
||||
padding: 14px 14px 0 14px; |
||||
background: #fff; |
||||
} |
||||
.ms-header { |
||||
padding: 10px; |
||||
margin: 0; |
||||
border-bottom: 1px solid #ddd; |
||||
background: #fff; |
||||
height: 50px; |
||||
} |
||||
.ms-pagination { |
||||
padding: 20px 0; |
||||
text-align: right; |
||||
} |
||||
.ms-fr { |
||||
float: right; |
||||
} |
||||
.ms-tr { |
||||
text-align: right; |
||||
} |
||||
.el-button + .el-button { |
||||
margin-left: 0; |
||||
} |
||||
.ms-weixin-content { |
||||
width: calc(100% - 140px); |
||||
} |
||||
.ms-weixin-dialog .el-dialog__header { |
||||
height: 55px; |
||||
box-sizing: border-box; |
||||
padding: 10px 10px 25px 10px; |
||||
border-bottom: 1px solid #ddd; |
||||
} |
||||
.ms-weixin-dialog .el-dialog__header .el-dialog__title { |
||||
font-weight: bold; |
||||
font-size: 14px; |
||||
color: #333; |
||||
} |
||||
.ms-weixin-dialog .el-dialog__footer { |
||||
border-top: 1px solid #ddd; |
||||
} |
||||
.material-bank-form > .el-dialog { |
||||
width: 890px; |
||||
height: 600px; |
||||
} |
||||
@ -0,0 +1,127 @@ |
||||
/* |
||||
*这里的值严格按照UI设计图标注值来进行设置 |
||||
*/ |
||||
/* |
||||
*颜色 |
||||
*/ |
||||
/* |
||||
*页面的边距 |
||||
*/ |
||||
/* |
||||
*字体 |
||||
*/ |
||||
/* |
||||
*头像 |
||||
*/ |
||||
/* |
||||
* 按钮 |
||||
*/ |
||||
/* |
||||
*对常见的多行样式进行了方法封装，方便调用，加快开发效率 |
||||
*/ |
||||
html, |
||||
body { |
||||
min-height: 100vh; |
||||
width: 100vw; |
||||
background-color: #eee; |
||||
margin: 0; |
||||
display: flex; |
||||
font-weight: initial !important; |
||||
font-size: 14px !important; |
||||
color: #333 !important; |
||||
} |
||||
html *, |
||||
body * { |
||||
text-decoration: none !important; |
||||
font-family: Verdana, Arial, Helvetica, sans-serif; |
||||
box-sizing: border-box; |
||||
} |
||||
.ms-ellipsis { |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
white-space: nowrap; |
||||
display: block; |
||||
} |
||||
.ms-align-center { |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
input::-webkit-input-placeholder, |
||||
textarea::-webkit-input-placeholder { |
||||
font-weight: initial; |
||||
font-size: 12px; |
||||
color: #999; |
||||
resize: none; |
||||
} |
||||
*::-webkit-scrollbar { |
||||
width: 8px; |
||||
height: 8px; |
||||
} |
||||
/*定义滚动条轨道 内阴影+圆角*/ |
||||
*::-webkit-scrollbar-track { |
||||
border-radius: 10px; |
||||
/*滚动条的背景区域的圆角*/ |
||||
background-color: #eee; |
||||
/*滚动条的背景颜色*/ |
||||
} |
||||
/*定义滑块 内阴影+圆角*/ |
||||
*::-webkit-scrollbar-thumb { |
||||
border-radius: 10px; |
||||
/*滚动条的圆角*/ |
||||
background-color: #ddd; |
||||
/*滚动条的背景颜色*/ |
||||
} |
||||
.ms-container { |
||||
margin: 12px; |
||||
height: calc(100% - 24px); |
||||
padding: 14px 14px 0 14px; |
||||
background: #fff; |
||||
} |
||||
.ms-header { |
||||
padding: 10px; |
||||
margin: 0; |
||||
border-bottom: 1px solid #ddd; |
||||
background: #fff; |
||||
height: 50px; |
||||
} |
||||
.ms-pagination { |
||||
padding: 20px 0; |
||||
text-align: right; |
||||
} |
||||
.ms-fr { |
||||
float: right; |
||||
} |
||||
.ms-tr { |
||||
text-align: right; |
||||
} |
||||
.el-button + .el-button { |
||||
margin-left: 0; |
||||
} |
||||
.ms-weixin-content { |
||||
width: calc(100% - 140px); |
||||
} |
||||
.ms-weixin-dialog .el-dialog__header { |
||||
height: 55px; |
||||
box-sizing: border-box; |
||||
padding: 10px 10px 25px 10px; |
||||
border-bottom: 1px solid #ddd; |
||||
} |
||||
.ms-weixin-dialog .el-dialog__header .el-dialog__title { |
||||
font-weight: bold; |
||||
font-size: 14px; |
||||
color: #333; |
||||
} |
||||
.new-pic-form dl { |
||||
margin: 0; |
||||
} |
||||
.new-pic-form dd, |
||||
.new-pic-form dt { |
||||
line-height: 1; |
||||
font-weight: initial; |
||||
font-size: 12px; |
||||
color: #999; |
||||
} |
||||
.new-pic-form dt { |
||||
display: inline-block; |
||||
margin-bottom: 8px; |
||||
} |
||||
@ -0,0 +1,7 @@ |
||||
@import "../ms-admin/4.7.0/less/app.less"; |
||||
// 素材库表单 |
||||
.material-bank-form{ |
||||
>.el-dialog{ |
||||
.ms-width-height(890px,600px); |
||||
} |
||||
} |
||||
@ -0,0 +1,15 @@ |
||||
@import "../ms-admin/4.7.0/less/app.less"; |
||||
// 新建图片 |
||||
.new-pic-form{ |
||||
dl{ |
||||
margin: 0; |
||||
} |
||||
dd,dt{ |
||||
line-height: 1; |
||||
.ms-font(@auxiliarySize,@auxiliaryColor); |
||||
} |
||||
dt{ |
||||
display: inline-block; |
||||
margin-bottom: 8px; |
||||
} |
||||
} |
||||
Loading…
Reference in new issue