Commit e40eb6b7 authored by yinxr's avatar yinxr

Signed-off-by: yinxr 完成样式修改

parent fead0090
......@@ -16,9 +16,9 @@
<el-menu class="ms-admin-menu-menu" default-active="0-0">
<template v-for="(menu,i) in menuList">
<!--单个选项-->
<el-menu-item :index="i" @click="menuActive = menu.title" v-if="!menu.sub" v-text="menu.title"></el-menu-item>
<el-menu-item :index="i" @click="menuActive = menu.title" v-if="!menu.sub" v-text="menu.title" class="ms-admin-menu-menu-item"></el-menu-item>
<!--多个选项-->
<el-submenu :index="i+''" v-if="menu.sub">
<el-submenu :index="i+''" v-if="menu.sub" class="ms-admin-submenu">
<template slot="title">
<span v-text="menu.title"></span>
</template>
......
......@@ -41,11 +41,11 @@
</div>
<el-form ref="customMenuForm" :rule="customMenuFormRules" :model="customMenuForm" label-width="80px">
<el-form-item label="菜单名称" prop="name" class="ms-custom-menu-name">
<el-input v-model="customMenuForm.name" size="mini"></el-input>
<el-input v-model="customMenuForm.name" size="medium"></el-input>
<span>菜单名称字数不多于5个汉字或10个字母</span>
</el-form-item>
<el-form-item label="菜单内容" class="ms-custom-menu-content">
<el-input v-model="customMenuForm.link" size="mini"></el-input>
<el-input v-model="customMenuForm.link" size="medium"></el-input>
<span>请输入菜单地址</span>
<!-- <el-tabs v-model="activeName" @tab-click="">
<el-tab-pane label="图片" name="picture">
......
......@@ -5,6 +5,8 @@
<!--右侧头部-->
<el-header class="ms-header" height="50px">
<el-row>
<!-- 添加隐藏按钮,主要是为了产生间距 -->
<el-button size="small" type="text"></el-button>
<el-button class="ms-fr" size="small" icon="el-icon-arrow-left" @click="menuVue.menuActive = '关键词回复'">返回</el-button>
<el-button class="ms-fr" size="small" icon="el-icon-refresh">更新</el-button>
<el-button class="ms-fr" type="success" size="small" icon="el-icon-tickets" @click="newsSave">保存</el-button>
......@@ -14,7 +16,7 @@
<el-aside width="280px">
<!-- 主图文章 -->
<div class="ms-main-article">
<img :src="mainArticle.basicPic || ms.base+'/WEB-INF/manager/images/data/article-default.png'">
<img :src="mainArticle.basicPic || ms.base+'/WEB-INF/manager/images/article-default.png'">
<div class="ms-article-mask"></div>
<span v-text='mainArticle.basicTitle'></span>
</div>
......@@ -23,7 +25,7 @@
<p>
<span v-text='element.basicTitle'></span>
</p>
<img :src='element.basicThumbnails'>
<img :src="element.basicThumbnails || ms.base+'/WEB-INF/manager/images/article-default-thumb.jpg'">
<div class="ms-article-item-mask"><i class="el-icon-delete" @click='subArticleList.splice(index,1)'></i></div>
</div>
</draggable>
......@@ -55,12 +57,12 @@
</el-upload>
<el-form label-width='40px'>
<el-form-item label="标题" prop="">
<el-input size='small' placeholder="请输入图文标题" v-model='articleForm.basicTitle' @input="resetWordNum('basicTitle',64)">
<el-input size='small' placeholder="请输入图文标题" v-model='articleForm.basicTitle' class='basic-title-input' @input.stop.self="resetWordNum('basicTitle',64)">
<span slot='suffix' v-text="titleWordNumber+'/64'"></span>
</el-input>
</el-form-item>
<el-form-item label="作者" prop="">
<el-input size='small' placeholder="请输入图文作者" v-model='articleForm.articleAuthor' @input="resetWordNum('articleAuthor',8)">
<el-input size='small' placeholder="请输入图文作者" v-model='articleForm.articleAuthor' @input.stop.self="resetWordNum('articleAuthor',8)">
<span slot='suffix' v-text="authorWordNumber+'/8'"></span>
</el-input>
</el-form-item>
......@@ -162,11 +164,14 @@
},
// 计算剩余字数
resetWordNum: function(type,limit) {
var target = event.target
type.indexOf('Title') > -1 ? this.titleWordNumber = limit - event.target.value.length : this.authorWordNumber = limit - event.target.value.length
if(event.target.value.length >= limit){
this.$message.error('超出字数限制,请输入不超过'+limit+'字符');
this.$nextTick(function(){
this.articleForm[type] = event.target.value.slice(0,limit);
// 这里的event的type是message
this.articleForm[type] = target.value.slice(0,limit-1);
console.log('this.articleForm[type]',this.articleForm[type]);
})
}
},
......
......@@ -12,7 +12,7 @@
</el-header>
<el-container>
<!--内容头部-->
<el-header class="ms-tr ms-header">
<el-header class="ms-tr ms-header ms-header-select">
<el-select v-model="value1" placeholder="请选择" size="small">
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
</el-option>
......
<!--图素材页-->
<!--图素材页-->
<link rel="stylesheet" href="../../../static/mweixin/css/picture-list.css">
<div id="picture-list-vue" v-if="menuVue.menuActive == '图片'" class="ms-weixin-content">
<el-container class="ms-admin-picture">
......@@ -6,13 +6,13 @@
<el-header class="ms-header" height="50px">
<el-row>
<el-button type="primary" size="small" icon="el-icon-plus">添加</el-button>
<el-button class="ms-fr" size="small" icon="el-icon-refresh">刷新</el-button>
<el-button class="ms-fr" size="small">同步微信素材</el-button>
<el-button size="small" icon="el-icon-refresh" class="ms-fr">刷新</el-button>
<el-button size="small" class="ms-fr">同步微信素材</el-button>
</el-row>
</el-header>
<el-container>
<!--内容头部-->
<el-header class="ms-tr ms-header">
<el-header class="ms-tr ms-header ms-header-select">
<el-select v-model="value1" placeholder="请选择" size="small">
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
</el-option>
......@@ -95,6 +95,6 @@
],
},
methods: {},
mounted: function() {}
mounted: function () {}
})
</script>
\ No newline at end of file
......@@ -93,8 +93,9 @@ textarea::-webkit-input-placeholder {
text-align: right;
}
// 按钮组之间的间距
.el-button+.el-button {
// margin-left: 0
// margin-left: 5px;
}
.ms-weixin-content{
......@@ -127,3 +128,23 @@ textarea::-webkit-input-placeholder {
border-color: @themeColor;
}
}
// 头部下拉选择区域间距
.ms-header-select{
font-size: 0;
>.el-select:nth-of-type(2){
margin: 0 10px;
}
}
.el-submenu{
// margin: 0 12px;
// 菜单选中样式
.el-menu-item.is-active{
border-radius: 4px;
}
}
// 卡片样式
.el-card, .el-message{
border-radius:0 !important;
}
......@@ -32,9 +32,10 @@
span {
position: absolute;
bottom: 0;
padding: 15px;
margin: 15px;
color: #fff;
.ms-ellipsis-clamp(2);
word-break: break-all;//数字单词的情况
}
} // 子文章
.ms-article-item {
......@@ -112,7 +113,7 @@
box-sizing: border-box;
border-bottom: 1px solid @borderColor; // 图片上传
.ms-pic-upload {
.ms-width-height(140px);
.ms-width-height(140px,100%);
border-radius: 4px;
border: 1px dashed @borderColor;
.ms-flex(center);
......@@ -161,18 +162,34 @@
padding-right: 50px !important;
}
}
// 标题输入框预留边距
.basic-title-input{
>.el-input__inner{
padding-right:54px !important;
}
}
}
.el-form-item:last-child{
padding-top: 4px;
}
}
}
.ms-main-body {
height: calc(~'100% - 180px');
background: #fff;
.edui-editor-toolbarbox{
border: none !important;
box-shadow: none !important;
}
.edui-default {
border: none;
// 设置edui-default的class样式会导致选择工具栏会出现抖动,是因为这个class类是通用样式
.edui-editor {
border: none !important;
.edui-editor-toolbarboxouter {
background-color: none !important;
background-image: none !important;
box-shadow: none !important;
border-bottom: none !important;
} // 编辑器样式
.edui-editor {
border: none !important;
......@@ -189,6 +206,9 @@
}
}
}
.edui-editor-toolbarboxinner{
background: #fff;
}
}
}
}
......
/*
*这里的值严格按照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: #e6e6e6;
/*滚动条的背景颜色*/
}
.ms-container {
margin: 12px;
height: calc(100% - 24px);
padding: 14px;
background: #fff;
}
.ms-header {
padding: 10px;
margin: 0;
border-bottom: 1px solid #ddd;
background: #fff;
height: 50px;
}
.ms-header button {
height: 30px;
}
.ms-pagination {
padding: 20px 0;
text-align: right;
}
.ms-fr {
float: right;
}
.ms-tr {
text-align: right;
}
.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 #e6e6e6;
}
.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 #e6e6e6;
padding: 15px !important;
}
.ms-hover {
cursor: pointer;
}
.ms-hover:hover {
color: #0099ff;
background: #fff;
border-color: #0099ff;
}
.ms-header-select {
font-size: 0;
}
.ms-header-select > .el-select:nth-of-type(2) {
margin: 0 10px;
}
.el-submenu .el-menu-item.is-active {
border-radius: 4px;
}
.el-card,
.el-message {
border-radius: 0 !important;
}
......@@ -123,6 +123,12 @@ textarea::-webkit-input-placeholder {
background: #fff;
border-color: #0099ff;
}
.ms-header-select {
font-size: 0;
}
.ms-header-select > .el-select:nth-of-type(2) {
margin: 0 10px;
}
.ms-article {
display: flex;
justify-content: space-between;
......@@ -158,13 +164,14 @@ textarea::-webkit-input-placeholder {
.ms-article .el-container .el-aside .ms-main-article span {
position: absolute;
bottom: 0;
padding: 15px;
margin: 15px;
color: #fff;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
word-break: break-all;
}
.ms-article .el-container .el-aside .ms-article-item {
width: 100%;
......@@ -254,7 +261,7 @@ textarea::-webkit-input-placeholder {
}
.ms-article .el-container .el-main .ms-main-header .ms-pic-upload {
width: 140px;
height: 140px;
height: 100%;
border-radius: 4px;
border: 1px dashed #e6e6e6;
display: flex;
......@@ -315,16 +322,28 @@ textarea::-webkit-input-placeholder {
.ms-article .el-container .el-main .ms-main-header .el-form .el-form-item .el-input__suffix > input {
padding-right: 50px !important;
}
.ms-article .el-container .el-main .ms-main-header .el-form .el-form-item .basic-title-input > .el-input__inner {
padding-right: 54px !important;
}
.ms-article .el-container .el-main .ms-main-header .el-form .el-form-item:last-child {
padding-top: 4px;
}
.ms-article .el-container .el-main .ms-main-body {
height: calc(100% - 180px);
background: #fff;
}
.ms-article .el-container .el-main .ms-main-body .edui-default {
border: none;
.ms-article .el-container .el-main .ms-main-body .edui-editor-toolbarbox {
border: none !important;
box-shadow: none !important;
}
.ms-article .el-container .el-main .ms-main-body .edui-default .edui-editor {
border: none !important;
}
.ms-article .el-container .el-main .ms-main-body .edui-default .edui-editor .edui-editor-toolbarboxouter {
background-color: none !important;
background-image: none !important;
box-shadow: none !important;
border-bottom: none !important;
}
.ms-article .el-container .el-main .ms-main-body .edui-default .edui-editor .edui-editor {
border: none !important;
......@@ -339,3 +358,6 @@ textarea::-webkit-input-placeholder {
border-radius: 0 !important;
box-shadow: none !important;
}
.ms-article .el-container .el-main .ms-main-body .edui-editor-toolbarboxinner {
background: #fff;
}
......@@ -123,6 +123,18 @@ textarea::-webkit-input-placeholder {
background: #fff;
border-color: #0099ff;
}
.ms-header-select {
font-size: 0;
}
.ms-header-select > .el-select:nth-of-type(2) {
margin: 0 10px;
}
.el-submenu {
margin: 0 12px;
}
.el-submenu .el-menu-item.is-active {
border-radius: 4px;
}
.ms-custom-menu {
color: #f2f2f6;
}
......@@ -139,6 +151,9 @@ textarea::-webkit-input-placeholder {
width: 280px !important;
height: 470px !important;
}
.ms-custom-menu .ms-custom-container .el-aside .el-container {
overflow: hidden;
}
.ms-custom-menu .ms-custom-container .el-aside .el-container .el-header {
height: 40px !important;
line-height: 40px !important;
......@@ -151,7 +166,7 @@ textarea::-webkit-input-placeholder {
.ms-custom-menu .ms-custom-container .el-aside .el-container .el-main {
padding: 0;
width: 280px !important;
height: 379px !important;
height: 380px !important;
}
.ms-custom-menu .ms-custom-container .el-aside .el-container .el-footer {
white-space: nowrap;
......
......@@ -50,7 +50,7 @@ input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
font-weight: initial;
font-size: 12px;
color: #aaa;
color: #999;
resize: none;
}
*::-webkit-scrollbar {
......@@ -68,7 +68,7 @@ textarea::-webkit-input-placeholder {
*::-webkit-scrollbar-thumb {
border-radius: 10px;
/*滚动条的圆角*/
background-color: #ddd;
background-color: #e6e6e6;
/*滚动条的背景颜色*/
}
.ms-container {
......@@ -104,7 +104,7 @@ textarea::-webkit-input-placeholder {
height: 55px;
box-sizing: border-box;
padding: 10px 10px 25px 10px;
border-bottom: 1px solid #ddd;
border-bottom: 1px solid #e6e6e6;
}
.ms-weixin-dialog .el-dialog__header .el-dialog__title {
font-weight: bold;
......@@ -112,7 +112,7 @@ textarea::-webkit-input-placeholder {
color: #333;
}
.ms-weixin-dialog .el-dialog__footer {
border-top: 1px solid #ddd;
border-top: 1px solid #e6e6e6;
padding: 15px !important;
}
.ms-hover {
......@@ -123,6 +123,19 @@ textarea::-webkit-input-placeholder {
background: #fff;
border-color: #0099ff;
}
.ms-header-select {
font-size: 0;
}
.ms-header-select > .el-select:nth-of-type(2) {
margin: 0 10px;
}
.el-submenu .el-menu-item.is-active {
border-radius: 4px;
}
.el-card,
.el-message {
border-radius: 0 !important;
}
.material-bank-form > .el-dialog__wrapper > .el-dialog {
width: 895px !important;
height: 587px !important;
......@@ -143,6 +156,13 @@ textarea::-webkit-input-placeholder {
.material-bank-form > .el-dialog__wrapper > .el-dialog > .el-dialog__body > .el-tabs .el-tabs__header .el-tabs__nav-scroll {
padding: 20px 10px;
}
.material-bank-form > .el-dialog__wrapper > .el-dialog > .el-dialog__body > .el-tabs .el-tabs__header .el-tabs__nav-scroll .el-tabs__nav .el-tabs__active-bar {
background-color: transparent !important;
}
.material-bank-form > .el-dialog__wrapper > .el-dialog > .el-dialog__body > .el-tabs .el-tabs__header .el-tabs__nav-scroll .el-tabs__nav .is-active {
color: #409EFF !important;
background-color: #ecf5ff;
}
.material-bank-form > .el-dialog__wrapper > .el-dialog > .el-dialog__body > .el-tabs .el-tabs__header .el-tabs__nav-wrap::after {
width: 1px !important;
}
......@@ -161,7 +181,6 @@ textarea::-webkit-input-placeholder {
flex: 1;
}
.material-bank-form > .el-dialog__wrapper > .el-dialog > .el-dialog__body > .el-tabs .is-active {
background-color: #e9eaf0;
font-weight: initial;
font-size: 14px;
color: #333;
......
......@@ -123,6 +123,12 @@ textarea::-webkit-input-placeholder {
background: #fff;
border-color: #0099ff;
}
.ms-header-select {
font-size: 0;
}
.ms-header-select > .el-select:nth-of-type(2) {
margin: 0 10px;
}
.ms-weixin-content .ms-header > .el-select--small:first-child {
width: 100px !important;
}
......
......@@ -50,7 +50,7 @@ input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
font-weight: initial;
font-size: 12px;
color: #aaa;
color: #999;
resize: none;
}
*::-webkit-scrollbar {
......@@ -68,7 +68,7 @@ textarea::-webkit-input-placeholder {
*::-webkit-scrollbar-thumb {
border-radius: 10px;
/*滚动条的圆角*/
background-color: #ddd;
background-color: #e6e6e6;
/*滚动条的背景颜色*/
}
.ms-container {
......@@ -104,7 +104,7 @@ textarea::-webkit-input-placeholder {
height: 55px;
box-sizing: border-box;
padding: 10px 10px 25px 10px;
border-bottom: 1px solid #ddd;
border-bottom: 1px solid #e6e6e6;
}
.ms-weixin-dialog .el-dialog__header .el-dialog__title {
font-weight: bold;
......@@ -112,7 +112,7 @@ textarea::-webkit-input-placeholder {
color: #333;
}
.ms-weixin-dialog .el-dialog__footer {
border-top: 1px solid #ddd;
border-top: 1px solid #e6e6e6;
padding: 15px !important;
}
.ms-hover {
......@@ -123,6 +123,19 @@ textarea::-webkit-input-placeholder {
background: #fff;
border-color: #0099ff;
}
.ms-header-select {
font-size: 0;
}
.ms-header-select > .el-select:nth-of-type(2) {
margin: 0 10px;
}
.el-submenu .el-menu-item.is-active {
border-radius: 4px;
}
.el-card,
.el-message {
border-radius: 0 !important;
}
.ms-admin-menu {
min-height: 100vh;
min-width: 140px;
......
......@@ -50,7 +50,7 @@ input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
font-weight: initial;
font-size: 12px;
color: #aaa;
color: #999;
resize: none;
}
*::-webkit-scrollbar {
......@@ -68,13 +68,13 @@ textarea::-webkit-input-placeholder {
*::-webkit-scrollbar-thumb {
border-radius: 10px;
/*滚动条的圆角*/
background-color: #ddd;
background-color: #e6e6e6;
/*滚动条的背景颜色*/
}
.ms-container {
margin: 12px;
height: calc(100% - 24px);
padding: 14px 14px 0 14px;
padding: 14px;
background: #fff;
}
.ms-header {
......@@ -104,7 +104,7 @@ textarea::-webkit-input-placeholder {
height: 55px;
box-sizing: border-box;
padding: 10px 10px 25px 10px;
border-bottom: 1px solid #ddd;
border-bottom: 1px solid #e6e6e6;
}
.ms-weixin-dialog .el-dialog__header .el-dialog__title {
font-weight: bold;
......@@ -112,7 +112,7 @@ textarea::-webkit-input-placeholder {
color: #333;
}
.ms-weixin-dialog .el-dialog__footer {
border-top: 1px solid #ddd;
border-top: 1px solid #e6e6e6;
padding: 15px !important;
}
.ms-hover {
......@@ -123,6 +123,12 @@ textarea::-webkit-input-placeholder {
background: #fff;
border-color: #0099ff;
}
.ms-header-select {
font-size: 0;
}
.ms-header-select > .el-select:nth-of-type(2) {
margin: 0 10px;
}
.ms-admin-picture {
height: 100%;
}
......@@ -179,7 +185,7 @@ textarea::-webkit-input-placeholder {
padding: 14px 0;
}
.ms-admin-picture-list .ms-admin-picture-item > div .footer i {
color: #999;
color: #333;
margin: auto;
cursor: pointer;
}
......
......@@ -14,6 +14,7 @@
.ms-width-height(280px, 470px) !important;
// 微信界面
.el-container {
overflow: hidden;
// 头部
.el-header {
.ms-line-height(40px) !important;
......@@ -23,7 +24,7 @@
}
.el-main {
padding: 0;
.ms-width-height(280px, 379px) !important;
.ms-width-height(280px, 380px) !important;
}
.el-footer {
white-space: nowrap;
......
......@@ -16,6 +16,16 @@
margin: 0 !important;
.el-tabs__nav-scroll{
padding:20px 10px;
.el-tabs__nav{
// 取消 激活状态边框
.el-tabs__active-bar{
background-color:transparent !important;
}
.is-active{
color: #409EFF !important;
background-color: #ecf5ff;
}
}
}
.el-tabs__nav-wrap::after{
width: 1px !important;
......@@ -38,7 +48,6 @@
}
// tab选中的样式
.is-active{
background-color:rgb(233, 234, 240);
.ms-font(@defalutSize,@defalutColor);
}
}
......
......@@ -31,6 +31,19 @@
min-width: 140px;
width: 140px;
}
// .ms-admin-submenu{
// .el-submenu__title{
// height: 40px !important;
// .ms-flex();
// align-items: center;
// }
// }
// // 菜单列表
// .ms-admin-menu-menu-item{
// height: 40px;
// .ms-flex();
// align-items: center;
// }
}
.ms-admin-material-item {
min-width: 100% !important;
......
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