对样式及逻辑调整

src/views/education/edit-notice.vue

 <template>
-  <div class="item-shield">
+  <div class="notice-item-shield">
     <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
     <div class="component-content screenSet" id="screenSet">
       <div class="header-title" style="position:relative;">
@@ -19,25 +19,52 @@
       </div>
       <el-row :gutter="30" class="row" type="flex" style="margin-top: 10px;">
         <el-form :model="formData" ref="formData" :rules="rules" label-width="120px" class="form-inline">
-          <el-col :span="22" style="min-width: 600px;">
+          <el-form-item label="项目简介：" prop="projectIntro" style="min-width: 1000px;">
+            <el-col :span="20">
+              <el-radio-group size="small" v-model="formData.openFlag" @change="changeOpenFlag">
+                <el-radio :label="1">开启</el-radio>
+                <el-radio :label="2">关闭</el-radio>
+              </el-radio-group>
+            </el-col>
+          </el-form-item>
+
+          <!-- <el-col :span="22" style="min-width: 600px;">
             <el-form-item label="是否开启公告：">
               <el-radio-group size="small" v-model="formData.openFlag" @change="changeOpenFlag">
                 <el-radio :label="1">开启</el-radio>
                 <el-radio :label="2">关闭</el-radio>
               </el-radio-group>
             </el-form-item>
-          </el-col>
+          </el-col> -->
+          <el-form-item v-show="formData.openFlag != 2" label="标题：" prop="noticeTitle">
+            <el-col :span="20">
+              <el-input size="small" v-model="formData.noticeTitle" placeholder="请输入公告标题" maxlength=20></el-input>
+              <span class="word-num">{{(formData.noticeTitle).replace(/\s+/g,"").length}}/20</span>
+            </el-col>
+          </el-form-item>
 
-          <el-col v-show="formData.openFlag != 2" :span="22">
+          <!-- <el-col v-show="formData.openFlag != 2" :span="20">
             <el-form-item label="标题：" prop="noticeTitle">
               <el-input size="small" v-model="formData.noticeTitle" placeholder="请输入公告标题" maxlength=20></el-input>
+              <span class="word-num">{{(formData.noticeTitle).replace(/\s+/g,"").length}}/20</span>
+            </el-form-item>
+          </el-col> -->
+
+            <el-form-item v-show="formData.openFlag != 2" label="内容：" prop="noticeContent">
+              <el-col :span="20">
+                <el-input size="small" v-model="formData.noticeContent" placeholder="请输入公告内容"                 type="textarea"
+                :autosize="{ minRows: 5}" maxlength=150></el-input>
+                <span class="word-num">{{(formData.noticeContent).replace(/\s+/g,"").length}}/150</span>
+              </el-col>
             </el-form-item>
-          </el-col>
-          <el-col v-show="formData.openFlag != 2" :span="22">
+
+          <!-- <el-col v-show="formData.openFlag != 2" :span="20">
             <el-form-item label="内容：" prop="noticeContent">
               <el-input size="small" v-model="formData.noticeContent" placeholder="请输入公告内容" maxlength=150></el-input>
+              <span class="word-num">{{(formData.noticeContent).replace(/\s+/g,"").length}}/150</span>
             </el-form-item>
-          </el-col>
+          </el-col> -->
+
         </el-form>
       </el-row>
     </div>
@@ -69,6 +96,15 @@ export default {
     BreadCrumb
   },
   data() {
+    // let checkNoticeTitleStr = (rule, value, callback) => {
+    //   if(value.indexOf("\\") != -1) {//存在
+    //     callback(new Error('请勿输入字符“ \\ ”'));
+    //   } else if (value.indexOf(".") != -1) {
+    //     callback(new Error('请勿输入字符“ . ”'));
+    //   } else {
+    //     callback();
+    //   }
+    // };
     return {
       curmbFirst: "教培项目",
       curmbSecond: "公告管理",
@@ -85,9 +121,22 @@ export default {
       rules: {
         noticeTitle: [
           { required: true, message: "请输入公告标题", trigger: "blur" },
+          {
+            min: 2,
+            max: 20,
+            message: "输入长度为2-20的内容，可包含中英文、数字及特殊符号",
+            trigger: "blur"
+          },
+          // { validator: checkNoticeTitleStr, trigger: 'blur' }
         ],
         noticeContent: [
           { required: true, message: "请输入公告内容", trigger: "blur" },
+          {
+            min: 2,
+            max: 150,
+            message: "输入长度为2-150的内容，可包含中英文、数字及特殊符号",
+            trigger: "blur"
+          },
         ],
       }
     };
@@ -174,7 +223,7 @@ export default {
 };
 </script>
 <style lang="scss">
-.item-shield {
+.notice-item-shield {
   .component-content {
     background: #fff;
     padding: 20px 30px;
@@ -191,5 +240,19 @@ export default {
       color: #d51f35;
     }
   }
+  .word-num {
+    font-size: 12px;
+    color: #999;
+    padding-top: 5px;
+  }
+  .el-input {
+    width: 80%;
+  }
+  .el-textarea {
+    width: 80%;
+  }
+  .el-form-item__error {
+    left: 13px;
+  }
 }
 </style>
\ No newline at end of file