From e40eb6b763245a27d6189032dadadd6a3ccfc79a Mon Sep 17 00:00:00 2001
From: yinxr <2273460044@qq.com>
Date: Tue, 12 Feb 2019 11:27:21 +0800
Subject: [PATCH] =?UTF-8?q?Signed-off-by:=20yinxr=20=E5=AE=8C=E6=88=90?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../manager/images/article-default-thumb.jpg  | Bin 0 -> 1875 bytes
 .../manager/images/article-default.png        | Bin 0 -> 3221 bytes
 .../webapp/WEB-INF/manager/mweixin/menu.ftl   |   4 +-
 .../WEB-INF/manager/mweixin/menu/index.ftl    |   4 +-
 .../WEB-INF/manager/mweixin/metarial/form.ftl |  15 +-
 .../manager/mweixin/metarial/index.ftl        |   2 +-
 .../WEB-INF/manager/mweixin/picture/index.ftl | 186 +++++++++---------
 .../static/ms-admin/4.7.0/less/app.less       |  23 ++-
 src/main/webapp/static/mweixin/article.less   |  26 ++-
 src/main/webapp/static/mweixin/css/app.css    | 138 +++++++++++++
 .../webapp/static/mweixin/css/article.css     |  30 ++-
 .../webapp/static/mweixin/css/custom-menu.css |  17 +-
 .../static/mweixin/css/material-bank-form.css |  29 ++-
 .../static/mweixin/css/material-list.css      |   6 +
 src/main/webapp/static/mweixin/css/menu.css   |  21 +-
 .../static/mweixin/css/picture-list.css       |  18 +-
 .../webapp/static/mweixin/custom-menu.less    |   3 +-
 .../static/mweixin/material-bank-form.less    |  11 +-
 src/main/webapp/static/mweixin/menu.less      |  13 ++
 19 files changed, 417 insertions(+), 129 deletions(-)
 create mode 100644 src/main/webapp/WEB-INF/manager/images/article-default-thumb.jpg
 create mode 100644 src/main/webapp/WEB-INF/manager/images/article-default.png
 create mode 100644 src/main/webapp/static/mweixin/css/app.css

diff --git a/src/main/webapp/WEB-INF/manager/images/article-default-thumb.jpg b/src/main/webapp/WEB-INF/manager/images/article-default-thumb.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..6065f97f2d8ac94f3e82e3166a0b07b67d5a9788
GIT binary patch
literal 1875
zcmaJ=Yfuwc6y9X>Ac$bBC~C1w5CtmPBqSk;L<$L1w4w46Y{zOIE7{^^*WC>XafTTw
zDy7qLK#CTXQSeFC7JNXVo#F!&r?o2LbH*vYs*XiP`%tHo-b5bS5x*aI&$;(}=YHqh
zv))VIJ}4~JjW2_s^z>LL02+b!J|s3et%b!92jYS41rX%zgHb!nQaTiMFjBLPv|v&z
zNuX{sh03Ke6iQ5TQ)X)+#v&H10C(sm588i{Ah=C0$y1qRCdz=>@wpxv%l2gCSUrVS
ztxb|N2T646+yq5ntQm0=%N>l)t(W+d>wxXsMkR<pge}xdl6|)#`KASkfuu1+B~`~+
z<w_Njpq0wi@k*_B7NU^JHK<I3%H!kYYMoN1Qz(!@NWg8hZJ931m^OG9@br?wqFgSQ
z)D<r!=>k-))oM|h0#zvDKtvo<>|o9AI0q9sl);EGRvM>RoOB?*jAjezWc3oD^hF5-
zHJtXfy?QCoWO{QbLHHWrPs^}b*ofZOCT4PqDGbfR7}7~wF%TZ<BU3s9jhR`J&LPR=
zLtR{8Cs~rQlN4ew_`0S=qVsTvjdU?FevZkcOLs7=*<r=fjd}^lBE@l=&ZseJla;Cj
zg;Jd&m#1n|j4Go+E|(e9$!YP*1jP{7NLrl)=3s}owh^voRIYCv2nyV6#Av(-v!&4_
zf%wbT;iGF&jhb(eYa3mQdQ>h7#Gt;%ed)1>w!j4W%;C`m&hYSK4lwaF7;SGq6zm^Z
z$kqXVA&&PdR0eT}0Rs!>ffeTQc|Pz3d_M#Np)f!w6o^EDfg(}RtKh&e%;)h%0)c4k
z7}1!qA;AD4A^xDjPtXhRRo<}Y?SRAqkOES`95KWdb6_#Ydz@1b1PVDm0K*R+ALa@;
zkT5_LIEDjc!!MtL4WL@!KO6^ffhaDID-gn9;W8X9EapM{i1G5|Ou<`b$%<7I6qVbA
zp-m}~N3zcL#ZR<6oKBZMiZUp(tLmGr%u$tb=K6*M>Pa~^_Sm`W0W&@m1%^#7t4>YZ
zesEz=ZuFFa8;_5lzxf1nuKsGrq0Zi0e=aLpQ?v7M*M-}ECA^<k;99$3SIdcuzyGb7
zn{RiQZ`|E_^3t7uVzlXt@Z!(E-t&F;<-1Q~b@M*@)KgL0*mmm5y=S0sE>Ot_jTG<#
zV3+{)h+&>jF+US17OYrRso2)^aKe$ZeUT}lSr+<H{B)(EbYfL@RK2zNsE|3Qx^Dbz
zQqFqNov_I>)TvWu+SuHLfrbOeqGNh)JT9x=e(+VvX$wb0kE;0%lD$`;AlNTc3?)I&
zpH{So7RBDrz4T2}o@IaM;t@A@@2QH@T@_nv=0MKQe9zOmV&dQYxCW|oi&R9;m3)`@
zak;fSb3^5wu%4!{#^>vl-D6v~DEkZ3Hx5*9jTu)yV7Oa*vG-xPJZEuT3*#&y`1KUN
zq+EJ8k&5LucTbIqzP-6b`eaA$?#9e_YWLT@yJ(tb?FAyDEzw%U*_mq|-+R72IOT`r
zd$VgTdv|@%Ue_OUr7tw9)Kyl-3t6-2%=(PhMyz6==aEBo%P=qN(6ge>{P3<XR=$mg
z9j^IJF^i6<ERe2Q`p3_*)v?8La@x)7jd>+Y&a1-Jr$hD}yZ2sODb*ekRI;zb-nx4H
zy5=9hgdSAXBRynxcFX3g*SKxfUGsN7(QNW01)dDqpLS|a<cAHR^S7OO@Jmhgx7%l%
zaGacQHlu0&$*%Hn!_*FLReSJM%idp&Emha9-TI{Wes90czLefkwvxYRq50~G(2N!T
M>+h(p7xG^I509IPD*ylh

literal 0
HcmV?d00001

diff --git a/src/main/webapp/WEB-INF/manager/images/article-default.png b/src/main/webapp/WEB-INF/manager/images/article-default.png
new file mode 100644
index 0000000000000000000000000000000000000000..d3d3c9fde54c784f4b5a24abf151c26acab43a23
GIT binary patch
literal 3221
zcmex=<Nrej3D=6uGzJDwPb~%x1_b#3hC$G!G&#GHfsug)C>+4R@c$vRenv@2ft9{~
zUa?+cN`6wRUUGh}ennz|zM-ChK7);YML}Y6c4~=2Qfhi;o~_dR-TRdkGE;1o!cBb*
zd<&dYGcrA@ic*8C{6dnevXd=Sl<e&kY$~iOatm@(OA-|-a&z*EttxDlz=m4^*&tzk
zB?YjOl5ATgN06-w5xxNm&iO^D3Z{Byy2*wnrV8ekdWL4kCYF{u3PuKo7WxJj`i923
zhGteK23AH!3Q(W~w5=#5%__*n4QdyVXR8GDRC#&1Ub(Seeo?x<p{1pzzJZaxk&!M?
zg>G?WUP)qwZeFo6%mkOz;^d;tf|AVqJOz-6iAnjTCALaHmqNUdTL3o}Ygi#E^!3HB
zG&dI%0AOQ_OM+4n?!{_waY$uBs(w&vaeir0aw<@{GDvfQm2**QVo82cNPd0}EEEGW
z@=NlIGx7@*oSi|TW~rbNo|%`DUtX*U*5m7I<(XGpl9-pA>gi&u1T;l2Gc(1?(!$Kl
z)zrk;$i&Ra(9qS=(a_M$#lYFs#lYCy+1%6urq?AuximL5uLPzy1)<jjr(RHU$SnZc
z?2=lPS(cjOR+OKs0QR<3CT_PF;xrGcHwCv_jBx7J2RcR{6uC%|4HE*UAP^Itbb%ar
z;!n*3ruZUY(*FOBfe)Nu8Bz`avk>F|+YBuXOmM&qWHGY<NoE#S77$=%V+8{?Hg<Ln
zc6K&SPA)D^P99Xi$jr>l%EHRY#>UCZ&B@Kn&j$qj{9r{;iU-0&)d%POKfoZ!!7z#8
z4>O}61Ct;lvmoRDBaDlH4rFHp0U!emSXh~v*cchuIXJnv8G+7bMwSH%0A0-nmK0!M
z0y>I`g^7)w8Avb{Gcqv?vM{hJ3K=>EvI!?D6*h_(O<c$>y3tAbV9>>f#$rhyREnBD
zsydqlPg=Aox%iN&i~8ino6W>SQc4bAdc>jD%*iDo*)qk|ZON9f%b^-lpB{fca^=aF
z)Y8_eOSc}q`t)mBS=+Q_+m2m(_RZWqJiWYq`tt3^uRs58;SrHh(J^DijuSUt{Lr-Y
zjLfX;oVjx6$(t{KYFT+jWmR>}TD9xctyjN*9%ll&k`)+`Y%Cni%(+1S2r{#PT+A8>
zbTM0D<3yu{8$XB~y!cSrNi-;_=%cZUiF1?Kq+r!W$(s(b7hf`c<kBo2G8q^;5|V0W
zu2SkLC86e@7H>YRp?Uf7=awl;wxBxMEezpkoNmVB<o~xAc$mS?6lAbx_?_6bTeM8;
zP3Vo)8^e><9gQ93j)2fOTw3e(%=)&+<NX_5`d-bk4U)`Q{`&*pVNut6uf)$Ui<5YB
z?U`||YN>SQ;xGFSJ~_o*^uxFAP3U>+y3WgLJF0KHC(3xru2%L`O#R`xBJ0}Jqd{f6
zXLw!Gy|zh5_v+CnOOu~$(zTP{?C5xH$Exz>UUJbBwnue)^4Od)Z)8|}y_;bb|C>i^
zD(>Csww4qR+E+cZ$@XzkXq!rstM{+8sV}tZDpnb)?XK4De(^p(B>Il4Nb1u*kEc(S
z7GLPNGC})F(#m^#3%;FP<~466(?5lehl9@TiJ8h!y1q@Tap%>vNxyw(=~@Rz=-vu0
znIB$w!l*EImz2Cr=!BbhyN{%cT^G9(-Ot@|CZ}wzgYCwUIAW82MBNs>N4qy=MY@Yj
zk7qVlh$vM5ez)UjsNUNpX5msTLeYh_cF&}rZnxi+u<9vS_399*-;Y*w{%3eR|LOgo
z9b5i0bR?~*`@|V1TNS!>n#Z+AkEb5GGsShO)zSE_`F&a^75_8zP5saCck|o-3^6lS
zxr?^1U;Oe?Rd~7LqaYW*brYvr*FC(U9llR%$3ccm>r|apjNNUt3$s@17&4`M2@6kR
zT;6tLRp}Z|y?m3|5^4r#Uu`|@wJ_q?#)XU>32skU7=}teTos|a<^IwqbK{;#%u{O<
z;M&bl&K(mvnfOe<D&m&jl+T`psy#v8+Ts)M6s@%N<#p4#du?K3xlF)m&WJ=79YbTc
zDM_3xiVW`zL!;-~U3$l{c6p19z@|;ELF|V#*zT_ET4;axm-*l5MZf#M9t{-R71}!4
z=i0VM{IO16BC`avefP}?<(e0JF)-A%CHHuqZ;=0)$z9uO_Ah=DcFZI-;neE@$Kb%d
zwHrfDL_2KfFHvTC<RZ9d@2Qn5<omR)o?T;}(P=d;;z?u(llzgj1#jPXEixP})ka{U
IzW@JC0J+gbeE<Le

literal 0
HcmV?d00001

diff --git a/src/main/webapp/WEB-INF/manager/mweixin/menu.ftl b/src/main/webapp/WEB-INF/manager/mweixin/menu.ftl
index 47313dac..beda8f74 100644
--- a/src/main/webapp/WEB-INF/manager/mweixin/menu.ftl
+++ b/src/main/webapp/WEB-INF/manager/mweixin/menu.ftl
@@ -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>
diff --git a/src/main/webapp/WEB-INF/manager/mweixin/menu/index.ftl b/src/main/webapp/WEB-INF/manager/mweixin/menu/index.ftl
index e8dadaa7..b16b95eb 100644
--- a/src/main/webapp/WEB-INF/manager/mweixin/menu/index.ftl
+++ b/src/main/webapp/WEB-INF/manager/mweixin/menu/index.ftl
@@ -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">
diff --git a/src/main/webapp/WEB-INF/manager/mweixin/metarial/form.ftl b/src/main/webapp/WEB-INF/manager/mweixin/metarial/form.ftl
index 6af6aa7a..bf3b71ba 100644
--- a/src/main/webapp/WEB-INF/manager/mweixin/metarial/form.ftl
+++ b/src/main/webapp/WEB-INF/manager/mweixin/metarial/form.ftl
@@ -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]);
                  })
              }
          },
diff --git a/src/main/webapp/WEB-INF/manager/mweixin/metarial/index.ftl b/src/main/webapp/WEB-INF/manager/mweixin/metarial/index.ftl
index c5657f55..d3250d6e 100644
--- a/src/main/webapp/WEB-INF/manager/mweixin/metarial/index.ftl
+++ b/src/main/webapp/WEB-INF/manager/mweixin/metarial/index.ftl
@@ -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>
diff --git a/src/main/webapp/WEB-INF/manager/mweixin/picture/index.ftl b/src/main/webapp/WEB-INF/manager/mweixin/picture/index.ftl
index 5cddee4b..87144d5a 100644
--- a/src/main/webapp/WEB-INF/manager/mweixin/picture/index.ftl
+++ b/src/main/webapp/WEB-INF/manager/mweixin/picture/index.ftl
@@ -1,100 +1,100 @@
-<!--图文素材页-->
+<!--图片素材页-->
 <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">
-      <!--右侧头部-->
-      <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-row>
-      </el-header>
-      <el-container>
-         <!--内容头部-->
-         <el-header class="ms-tr ms-header">
-            <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>
-            </el-select>
-            <el-select v-model="value2" placeholder="请选择" size="small">
-               <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
-               </el-option>
-            </el-select>
-            <el-button type="primary" icon="el-icon-search" size="small">查询</el-button>
-         </el-header>
-         <!--素材列表-->
-         <el-main class="ms-admin-picture-list">
-            <el-container>
-               <el-aside class="ms-admin-picture-item">
-                  <div v-for="picture in pictureList">
-                     <div class="body">
-                        <img :src="picture.img" />
-                        <div>
-                           <input type="checkbox" />
-                           <span v-text="picture.title"></span>
-                        </div>
-                     </div>
-                     <div class="footer">
-                        <i class="el-icon-edit"></i>
-                        <em></em>
-                        <i class="el-icon-download"></i>
-                        <em></em>
-                        <i class="el-icon-delete"></i>
-                     </div>
-                  </div>
-               </el-aside>
-               <el-main class="ms-admin-picture-show">
-                  <span>全部图片（6）</span>
-                  <div>
-                     <span>小米（1）</span>
-                     <i class="el-icon-edit"></i>
-                     <i class="el-icon-delete"></i>
-                  </div>
-                  <div>
-                     <span>小米（1）</span>
-                     <i class="el-icon-edit"></i>
-                     <i class="el-icon-delete"></i>
-                  </div>
-                  <p>
-                     <i class="el-icon-plus"></i>新建分组</p>
-               </el-main>
-            </el-container>
+	<el-container class="ms-admin-picture">
+		<!--右侧头部-->
+		<el-header class="ms-header" height="50px">
+			<el-row>
+				<el-button type="primary" size="small" icon="el-icon-plus">添加</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 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>
+				</el-select>
+				<el-select v-model="value2" placeholder="请选择" size="small">
+					<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
+					</el-option>
+				</el-select>
+				<el-button type="primary" icon="el-icon-search" size="small">查询</el-button>
+			</el-header>
+			<!--素材列表-->
+			<el-main class="ms-admin-picture-list">
+				<el-container>
+					<el-aside class="ms-admin-picture-item">
+						<div v-for="picture in pictureList">
+							<div class="body">
+								<img :src="picture.img" />
+								<div>
+									<input type="checkbox" />
+									<span v-text="picture.title"></span>
+								</div>
+							</div>
+							<div class="footer">
+								<i class="el-icon-edit"></i>
+								<em></em>
+								<i class="el-icon-download"></i>
+								<em></em>
+								<i class="el-icon-delete"></i>
+							</div>
+						</div>
+					</el-aside>
+					<el-main class="ms-admin-picture-show">
+						<span>全部图片（6）</span>
+						<div>
+							<span>小米（1）</span>
+							<i class="el-icon-edit"></i>
+							<i class="el-icon-delete"></i>
+						</div>
+						<div>
+							<span>小米（1）</span>
+							<i class="el-icon-edit"></i>
+							<i class="el-icon-delete"></i>
+						</div>
+						<p>
+							<i class="el-icon-plus"></i>新建分组</p>
+					</el-main>
+				</el-container>
 
-         </el-main>
-      </el-container>
-   </el-container>
+			</el-main>
+		</el-container>
+	</el-container>
 </div>
 
 <script>
-   new Vue({
-      el: "#picture-list-vue",
-      data: {
-         options1: [{
-            value: '全部图片',
-            label: '全部图片'
-         }],
-         options2: [{
-            value: '全部图片',
-            label: '全部图片'
-         }],
-         value1: '全部图片',
-         value2: '',
-         pictureList: [{
-               date: '12月27日',
-               title: 'HUAWEI Mate 20 6GB+64GB 全网最低价...',
-               img: '../images/data/ms-bg_1.jpg',
-               det: '传播名HUAWEI Mate 20 6GB+64GB 全网最低价，后置摄像头后置莱卡散射，12000万亿像素（光脚，1/1.6光圈）+1200万像素（超广角），......'
-            },
-            {
-               date: '12月27日',
-               title: 'HUAWEI Mate 20 6GB+64GB 全网最低价...',
-               img: '../images/data/ms-bg_1.jpg',
-               det: '传播名HUAWEI Mate 20 6GB+64GB 全网最低价，后置摄像头后置莱卡散射，12000万亿像素（光脚，1/1.6光圈）+1200万像素（超广角），......'
-            }
-         ],
-      },
-      methods: {},
-      mounted: function() {}
-   })
+	new Vue({
+		el: "#picture-list-vue",
+		data: {
+			options1: [{
+				value: '全部图片',
+				label: '全部图片'
+			}],
+			options2: [{
+				value: '全部图片',
+				label: '全部图片'
+			}],
+			value1: '全部图片',
+			value2: '',
+			pictureList: [{
+					date: '12月27日',
+					title: 'HUAWEI Mate 20 6GB+64GB 全网最低价...',
+					img: '../images/data/ms-bg_1.jpg',
+					det: '传播名HUAWEI Mate 20 6GB+64GB 全网最低价，后置摄像头后置莱卡散射，12000万亿像素（光脚，1/1.6光圈）+1200万像素（超广角），......'
+				},
+				{
+					date: '12月27日',
+					title: 'HUAWEI Mate 20 6GB+64GB 全网最低价...',
+					img: '../images/data/ms-bg_1.jpg',
+					det: '传播名HUAWEI Mate 20 6GB+64GB 全网最低价，后置摄像头后置莱卡散射，12000万亿像素（光脚，1/1.6光圈）+1200万像素（超广角），......'
+				}
+			],
+		},
+		methods: {},
+		mounted: function () {}
+	})
 </script>
\ No newline at end of file
diff --git a/src/main/webapp/static/ms-admin/4.7.0/less/app.less b/src/main/webapp/static/ms-admin/4.7.0/less/app.less
index 17d11cff..51847f6d 100644
--- a/src/main/webapp/static/ms-admin/4.7.0/less/app.less
+++ b/src/main/webapp/static/ms-admin/4.7.0/less/app.less
@@ -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; 
+}
diff --git a/src/main/webapp/static/mweixin/article.less b/src/main/webapp/static/mweixin/article.less
index 80842cd2..cc4b9f5c 100644
--- a/src/main/webapp/static/mweixin/article.less
+++ b/src/main/webapp/static/mweixin/article.less
@@ -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;
+                }
             }
         }
     }
diff --git a/src/main/webapp/static/mweixin/css/app.css b/src/main/webapp/static/mweixin/css/app.css
new file mode 100644
index 00000000..c1dfcfa9
--- /dev/null
+++ b/src/main/webapp/static/mweixin/css/app.css
@@ -0,0 +1,138 @@
+/*
+*这里的值严格按照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;
+}
diff --git a/src/main/webapp/static/mweixin/css/article.css b/src/main/webapp/static/mweixin/css/article.css
index e781731c..3db37520 100644
--- a/src/main/webapp/static/mweixin/css/article.css
+++ b/src/main/webapp/static/mweixin/css/article.css
@@ -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;
+}
diff --git a/src/main/webapp/static/mweixin/css/custom-menu.css b/src/main/webapp/static/mweixin/css/custom-menu.css
index bcd655fe..586cac0c 100644
--- a/src/main/webapp/static/mweixin/css/custom-menu.css
+++ b/src/main/webapp/static/mweixin/css/custom-menu.css
@@ -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;
diff --git a/src/main/webapp/static/mweixin/css/material-bank-form.css b/src/main/webapp/static/mweixin/css/material-bank-form.css
index 974668af..608fc16b 100644
--- a/src/main/webapp/static/mweixin/css/material-bank-form.css
+++ b/src/main/webapp/static/mweixin/css/material-bank-form.css
@@ -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;
diff --git a/src/main/webapp/static/mweixin/css/material-list.css b/src/main/webapp/static/mweixin/css/material-list.css
index b3cf5f28..70eafd6c 100644
--- a/src/main/webapp/static/mweixin/css/material-list.css
+++ b/src/main/webapp/static/mweixin/css/material-list.css
@@ -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;
 }
diff --git a/src/main/webapp/static/mweixin/css/menu.css b/src/main/webapp/static/mweixin/css/menu.css
index 72d56da4..0e9ca27e 100644
--- a/src/main/webapp/static/mweixin/css/menu.css
+++ b/src/main/webapp/static/mweixin/css/menu.css
@@ -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;
diff --git a/src/main/webapp/static/mweixin/css/picture-list.css b/src/main/webapp/static/mweixin/css/picture-list.css
index 3af945ef..f3253513 100644
--- a/src/main/webapp/static/mweixin/css/picture-list.css
+++ b/src/main/webapp/static/mweixin/css/picture-list.css
@@ -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;
 }
diff --git a/src/main/webapp/static/mweixin/custom-menu.less b/src/main/webapp/static/mweixin/custom-menu.less
index 42259252..90fa0c02 100644
--- a/src/main/webapp/static/mweixin/custom-menu.less
+++ b/src/main/webapp/static/mweixin/custom-menu.less
@@ -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;
diff --git a/src/main/webapp/static/mweixin/material-bank-form.less b/src/main/webapp/static/mweixin/material-bank-form.less
index c76c496c..2053ee42 100644
--- a/src/main/webapp/static/mweixin/material-bank-form.less
+++ b/src/main/webapp/static/mweixin/material-bank-form.less
@@ -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);
                     }
                 }
diff --git a/src/main/webapp/static/mweixin/menu.less b/src/main/webapp/static/mweixin/menu.less
index f2836918..91c5e7bc 100644
--- a/src/main/webapp/static/mweixin/menu.less
+++ b/src/main/webapp/static/mweixin/menu.less
@@ -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;