短语限制改为500

src/views/content_manage/newspaper_manage/Phrase.vue

@@ -1,472 +1,529 @@
 <template>
   <div class="new-word-add">
     <div class="new-word-add-top">
-        <h5>{{itemData?'编辑短语':'添加短语'}}</h5>
-        <div class="btn-box">
-            <el-button type="primary" size="small" @click="handleSave('pharseFlag')" :loading="loading">保存</el-button>
-            <el-button size="small" @click="onCancel('pharseFlag')">取消</el-button>
-        </div>
+      <h5>{{ itemData ? "编辑短语" : "添加短语" }}</h5>
+      <div class="btn-box">
+        <el-button
+          type="primary"
+          size="small"
+          @click="handleSave('pharseFlag')"
+          :loading="loading"
+          >保存</el-button
+        >
+        <el-button size="small" @click="onCancel('pharseFlag')">取消</el-button>
+      </div>
     </div>
     <div class="new-word-add-bottom">
-        <div class="new-word-add-bottom-left">
-            <el-form :model="data" :rules="dataRules" ref="articleForm" label-width="100px" class="registerForm">
-                <el-form-item label="短语" prop="exp_title">
-                    <el-input v-model="data.exp_title" autocomplete="off" placeholder="请输入短语" @blur="searchWordInfo" maxlength="200">
-                    </el-input>
-                </el-form-item>
-                <el-form-item label="释义" prop="exp_content">
-                    <el-input type="textarea" v-model="data.exp_content" placeholder="请输入" maxlength="500" :rows="4" show-word-limit @blur="handleTrim('data','exp_content')"></el-input>
-                </el-form-item>
-            </el-form>
+      <div class="new-word-add-bottom-left">
+        <el-form
+          :model="data"
+          :rules="dataRules"
+          ref="articleForm"
+          label-width="100px"
+          class="registerForm"
+        >
+          <el-form-item label="短语" prop="exp_title">
+            <el-input
+              v-model="data.exp_title"
+              autocomplete="off"
+              placeholder="请输入短语"
+              @blur="searchWordInfo"
+              maxlength="500"
+            >
+            </el-input>
+          </el-form-item>
+          <el-form-item label="释义" prop="exp_content">
+            <el-input
+              type="textarea"
+              v-model="data.exp_content"
+              placeholder="请输入"
+              maxlength="500"
+              :rows="4"
+              show-word-limit
+              @blur="handleTrim('data', 'exp_content')"
+            ></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="new-word-add-bottom-right">
+        <div class="sentence-config">
+          <el-input
+            v-model="data.btStr"
+            placeholder="请输入词头本体变体信息，用/隔开"
+            maxlength="200"
+          ></el-input>
+          <el-button type="primary" size="small" @click="handleSentence"
+            >匹配句子</el-button
+          >
+          <el-button type="primary" size="small" @click="selectSentFlag = true"
+            ><i class="el-icon-plus"></i>添加句子</el-button
+          >
         </div>
-        <div class="new-word-add-bottom-right">
-            <div class="sentence-config">
-                <el-input v-model="data.btStr" placeholder="请输入词头本体变体信息，用/隔开" maxlength="200"></el-input>
-                <el-button type="primary" size="small" @click="handleSentence">匹配句子</el-button>
-                <el-button type="primary" size="small" @click="selectSentFlag=true"><i class="el-icon-plus"></i>添加句子</el-button>
-            </div>
-            <div class="channel-item" v-for="(item,index) in data.bind_sents" :key="index">
-                <div class="channel-top">
-                    <i class="el-icon-caret-bottom" v-if="item.show" @click="handleChangeStatus(item)"></i>
-                    <i class="el-icon-caret-top" v-else  @click="handleChangeStatus(item)"></i>
-                    <div class="channel-top-name">
-                        {{(index+1)+'. '+item.text}}
-                    </div>
-                    <i class="el-icon-delete" @click="handleDeleteSents(index)"></i>
-                </div>
-                <el-collapse-transition>
-                    <template v-if="item.show">
-                        <div class="channel-bottom">
-                            <p>匹配结果</p>
-                            <ul>
-                                <li v-for="(itent,indext) in item.tokens" :key="indext" :class="[item.sel_token_idxes.indexOf(indext)>-1?'active':'']" @click="handleHighIndex(item,indext)">
-                                    {{itent[2]}}
-                                </li>
-                            </ul>
-                        </div>
-                    </template>
-                </el-collapse-transition>
+        <div
+          class="channel-item"
+          v-for="(item, index) in data.bind_sents"
+          :key="index"
+        >
+          <div class="channel-top">
+            <i
+              class="el-icon-caret-bottom"
+              v-if="item.show"
+              @click="handleChangeStatus(item)"
+            ></i>
+            <i
+              class="el-icon-caret-top"
+              v-else
+              @click="handleChangeStatus(item)"
+            ></i>
+            <div class="channel-top-name">
+              {{ index + 1 + ". " + item.text }}
             </div>
+            <i class="el-icon-delete" @click="handleDeleteSents(index)"></i>
+          </div>
+          <el-collapse-transition>
+            <template v-if="item.show">
+              <div class="channel-bottom">
+                <p>匹配结果</p>
+                <ul>
+                  <li
+                    v-for="(itent, indext) in item.tokens"
+                    :key="indext"
+                    :class="[
+                      item.sel_token_idxes.indexOf(indext) > -1 ? 'active' : '',
+                    ]"
+                    @click="handleHighIndex(item, indext)"
+                  >
+                    {{ itent[2] }}
+                  </li>
+                </ul>
+              </div>
+            </template>
+          </el-collapse-transition>
         </div>
+      </div>
     </div>
     <el-dialog
-        :visible.sync="selectSentFlag"
-        :show-close="false"
-        :close-on-click-modal="false"
-        :append-to-body="true"
-        width="696px"
-        class="login-dialog"
-        v-if="selectSentFlag">
-        <add-sentence @closeAddSentence="closeAddSentence" :sentenceList="sentenceList" @sureAddSentence="sureAddSentence"></add-sentence>
+      :visible.sync="selectSentFlag"
+      :show-close="false"
+      :close-on-click-modal="false"
+      :append-to-body="true"
+      width="696px"
+      class="login-dialog"
+      v-if="selectSentFlag"
+    >
+      <add-sentence
+        @closeAddSentence="closeAddSentence"
+        :sentenceList="sentenceList"
+        @sureAddSentence="sureAddSentence"
+      ></add-sentence>
     </el-dialog>
   </div>
 </template>
 
 <script>
 import { getLogin } from "@/api/ajax";
-import Upload from "../../../components/Upload.vue"
-import AddSentence from "./AddSentence.vue"
+import Upload from "../../../components/Upload.vue";
+import AddSentence from "./AddSentence.vue";
 export default {
-  components: {Upload, AddSentence},
+  components: { Upload, AddSentence },
   name: "newwordstemplate",
-  props: ["itemData","articleId", "sentenceList"],
+  props: ["itemData", "articleId", "sentenceList"],
   data() {
     return {
       data: {
-        exp_title: '',
-        exp_content: '',
+        exp_title: "",
+        exp_content: "",
         bind_sents: [],
-        btStr: '', // 本体变体字符串
+        btStr: "", // 本体变体字符串
       },
       loading: false,
       dataRules: {
-        exp_title: [
-            { required: true, message: '请输入短语', trigger: 'blur' }
-        ],
+        exp_title: [{ required: true, message: "请输入短语", trigger: "blur" }],
         exp_content: [
-            { required: true, message: '请输入释义', trigger: 'blur' }
+          { required: true, message: "请输入释义", trigger: "blur" },
         ],
       },
       selectSentFlag: false,
     };
   },
   watch: {},
-  computed: {
-  },
+  computed: {},
   methods: {
-    handleSave(flag){
-        if(this.data.bind_sents.length===0){
-            this.$message.warning('请添加句子')
-            return false
+    handleSave(flag) {
+      if (this.data.bind_sents.length === 0) {
+        this.$message.warning("请添加句子");
+        return false;
+      }
+      this.$refs["articleForm"].validate((valid) => {
+        if (valid) {
+          this.loading = true;
+          let MethodName = "/PaperServer/Manager/ArticleManager/AddPhraseInArt";
+          let data = {
+            art_id: this.articleId,
+            exp_content: this.data.exp_content,
+            exp_title: this.data.exp_title,
+            bind_sent_data: {
+              bind_sents: this.data.bind_sents,
+            },
+          };
+          if (this.itemData) {
+            MethodName = "/PaperServer/Manager/ArticleManager/EditPhraseInArt";
+            data.id = this.itemData.id;
+          }
+          getLogin(MethodName, data)
+            .then((res) => {
+              if (res.status === 1) {
+                this.loading = false;
+                this.$message.success("保存成功");
+                this.$emit("closeDialog", flag);
+              }
+            })
+            .catch(() => {
+              this.loading = false;
+            });
+        } else {
+          return false;
         }
-        this.$refs['articleForm'].validate((valid) => {
-            if (valid) {
-                this.loading = true
-                let MethodName = '/PaperServer/Manager/ArticleManager/AddPhraseInArt'
-                let data = {
-                    art_id: this.articleId,
-                    exp_content: this.data.exp_content,
-                    exp_title: this.data.exp_title,
-                    bind_sent_data: {
-                        bind_sents: this.data.bind_sents
-                    }
-                }
-                if(this.itemData){
-                    MethodName = '/PaperServer/Manager/ArticleManager/EditPhraseInArt'
-                    data.id = this.itemData.id
-                }
-                getLogin(MethodName, data)
-                .then((res) => {
-                    if(res.status===1){
-                        this.loading = false
-                        this.$message.success('保存成功')
-                        this.$emit('closeDialog',flag)
-                    }
-                }).catch(()=>{
-                    this.loading = false
-                })
-                
-            }else {
-                return false;
-            }
-        });
+      });
     },
-    handleHighIndex(item,index){
-        if(item.sel_token_idxes.indexOf(index)>-1){
-            item.sel_token_idxes.splice(item.sel_token_idxes.indexOf(index),1)
-        }else{
-            item.sel_token_idxes.push(index)
-        }
-        this.$forceUpdate()
+    handleHighIndex(item, index) {
+      if (item.sel_token_idxes.indexOf(index) > -1) {
+        item.sel_token_idxes.splice(item.sel_token_idxes.indexOf(index), 1);
+      } else {
+        item.sel_token_idxes.push(index);
+      }
+      this.$forceUpdate();
     },
-    onCancel(flag){
-        this.$emit('closeDialog',flag)
+    onCancel(flag) {
+      this.$emit("closeDialog", flag);
     },
     // 去掉前后空格
-    handleTrim(form,fild){
-        this[form][fild] = this[form][fild].trim()
+    handleTrim(form, fild) {
+      this[form][fild] = this[form][fild].trim();
     },
     // 查找单词信息
-    searchWordInfo(){
-        this.data.exp_title = this.data.exp_title.trim()
-        if(this.data.exp_title){
-            this.data.btStr = this.data.exp_title
-            this.handleSentence() 
-        }
+    searchWordInfo() {
+      this.data.exp_title = this.data.exp_title.trim();
+      if (this.data.exp_title) {
+        this.data.btStr = this.data.exp_title;
+        this.handleSentence();
+      }
     },
-    handleChangeStatus(item){
-        item.show = !item.show
-        this.$forceUpdate()
+    handleChangeStatus(item) {
+      item.show = !item.show;
+      this.$forceUpdate();
     },
     // 匹配句子
-    handleSentence(){
-        if(!this.data.btStr){
-            this.data.btStr = this.data.exp_title.trim()
-            this.$forceUpdate()
-        }
-        let _this = this
-        let searchSentence = []
-        let wordArr = this.data.btStr.split('/')
-        wordArr.forEach(itemw=>{
-            for(let i = 0; i < _this.sentenceList.length; i++){
-                let items = _this.sentenceList[i]
-                if(items.text.indexOf(itemw)>-1){
-                    let sel_token_idxes = []
-                    let flag = true
-                    if(items.tokens){
-                        for(let j=0; j<items.tokens.length; j++){
-                            let itemt = items.tokens[j]
-                            let itemb = itemw.split(' ')
-                            if(itemt[2]===itemb[0]){
-                                itemb.forEach((itembs,indexbs)=>{
-                                    if(itembs!==items.tokens[j+indexbs][2]){
-                                        flag = false
-                                    }else{
-                                        sel_token_idxes.push(j+indexbs)
-                                    }
-                                })
-                                // items.tokens.forEach((itemss,index)=>{
-                                //     if(itemss[2]===itemw){
-                                //         sel_token_idxes.push(index)
-                                //     }
-                                // })
-                                items.sent_id = items.id
-                                items.sel_token_idxes = flag?sel_token_idxes:[]
-                                this.$set(items,'show',searchSentence.length===0?true:false)
-                                searchSentence.push(items)
-                                break
-                            }
-                        }
+    handleSentence() {
+      if (!this.data.btStr) {
+        this.data.btStr = this.data.exp_title.trim();
+        this.$forceUpdate();
+      }
+      let _this = this;
+      let searchSentence = [];
+      let wordArr = this.data.btStr.split("/");
+      wordArr.forEach((itemw) => {
+        for (let i = 0; i < _this.sentenceList.length; i++) {
+          let items = _this.sentenceList[i];
+          if (items.text.indexOf(itemw) > -1) {
+            let sel_token_idxes = [];
+            let flag = true;
+            if (items.tokens) {
+              for (let j = 0; j < items.tokens.length; j++) {
+                let itemt = items.tokens[j];
+                let itemb = itemw.split(" ");
+                if (itemt[2] === itemb[0]) {
+                  itemb.forEach((itembs, indexbs) => {
+                    if (itembs !== items.tokens[j + indexbs][2]) {
+                      flag = false;
+                    } else {
+                      sel_token_idxes.push(j + indexbs);
                     }
+                  });
+                  // items.tokens.forEach((itemss,index)=>{
+                  //     if(itemss[2]===itemw){
+                  //         sel_token_idxes.push(index)
+                  //     }
+                  // })
+                  items.sent_id = items.id;
+                  items.sel_token_idxes = flag ? sel_token_idxes : [];
+                  this.$set(
+                    items,
+                    "show",
+                    searchSentence.length === 0 ? true : false
+                  );
+                  searchSentence.push(items);
+                  break;
                 }
-                
+              }
             }
-        })
-        this.data.bind_sents = searchSentence
+          }
+        }
+      });
+      this.data.bind_sents = searchSentence;
     },
-    handleDeleteSents(index){
-        this.data.bind_sents.splice(index,1)
+    handleDeleteSents(index) {
+      this.data.bind_sents.splice(index, 1);
     },
-    closeAddSentence(){
-        this.selectSentFlag = false
+    closeAddSentence() {
+      this.selectSentFlag = false;
+    },
+    sureAddSentence(list) {
+      let arr = JSON.parse(JSON.stringify(list));
+      arr.forEach((item) => {
+        item.show = false;
+        item.sel_token_idxes = [];
+        item.sent_id = item.id;
+      });
+      this.data.bind_sents = this.data.bind_sents.concat(arr);
+      this.selectSentFlag = false;
     },
-    sureAddSentence(list){
-        let arr = JSON.parse(JSON.stringify(list))
-        arr.forEach(item=>{
-            item.show = false
-            item.sel_token_idxes = []
-            item.sent_id = item.id     
-        })
-        this.data.bind_sents = this.data.bind_sents.concat(arr)
-        this.selectSentFlag = false
-    }
   },
   created() {
-    if(this.itemData){
-        let data = JSON.parse(JSON.stringify(this.itemData))
-        this.data = data
-        if(this.data.bind_sent_data&&this.data.bind_sent_data.bind_sents){
-            let arr = []
-            this.data.bind_sent_data.bind_sents.forEach(item=>{
-                for(let i = 0; i < this.sentenceList.length; i++){
-                    if(item.sent_id===this.sentenceList[i].id){
-                        let obj = JSON.parse(JSON.stringify(this.sentenceList[i]))
-                        obj.sent_id = obj.id
-                        obj.show = false
-                        obj.sel_token_idxes = item.sel_token_idxes
-                        arr.push(obj)
-                        break
-                    }
-                }
-            })
-            this.data.bind_sents = arr
-        }else{
-            this.data.bind_sents = []
-        }
+    if (this.itemData) {
+      let data = JSON.parse(JSON.stringify(this.itemData));
+      this.data = data;
+      if (this.data.bind_sent_data && this.data.bind_sent_data.bind_sents) {
+        let arr = [];
+        this.data.bind_sent_data.bind_sents.forEach((item) => {
+          for (let i = 0; i < this.sentenceList.length; i++) {
+            if (item.sent_id === this.sentenceList[i].id) {
+              let obj = JSON.parse(JSON.stringify(this.sentenceList[i]));
+              obj.sent_id = obj.id;
+              obj.show = false;
+              obj.sel_token_idxes = item.sel_token_idxes;
+              arr.push(obj);
+              break;
+            }
+          }
+        });
+        this.data.bind_sents = arr;
+      } else {
+        this.data.bind_sents = [];
+      }
     }
   },
-  mounted() {
-  },
-  beforeDestroy() {
-  },
+  mounted() {},
+  beforeDestroy() {},
 };
 </script>
 
 <style lang="scss" scoped>
-.new-word-add{
-    &-top{
-        display: flex;
-        border-bottom: 1px solid #E5E6EB;
-        padding: 16px 24px;
-        justify-content: space-between;
-        align-items: center;
-        h5{
-            margin: 0;
-            color: #1D2129;
-            font-size: 20px;
-            font-weight: 500;
-            line-height: 28px;
-        }
-    }
-}
-.new-word-add-bottom{
+.new-word-add {
+  &-top {
     display: flex;
-    &-left{
-        width: 504px;
-        padding: 40px 0;
-        border-right: 1px solid #E5E6EB;
+    border-bottom: 1px solid #e5e6eb;
+    padding: 16px 24px;
+    justify-content: space-between;
+    align-items: center;
+    h5 {
+      margin: 0;
+      color: #1d2129;
+      font-size: 20px;
+      font-weight: 500;
+      line-height: 28px;
     }
-    &-right{
-        width: 695px;
-        padding: 32px 48px;
-        .sentence-config{
-            .el-input{
-                margin-right: 10px;
-            }
-        }
+  }
+}
+.new-word-add-bottom {
+  display: flex;
+  &-left {
+    width: 504px;
+    padding: 40px 0;
+    border-right: 1px solid #e5e6eb;
+  }
+  &-right {
+    width: 695px;
+    padding: 32px 48px;
+    .sentence-config {
+      .el-input {
+        margin-right: 10px;
+      }
     }
+  }
 }
-.level-box{
-    .el-radio{
-        padding: 5px 0 8px 0;
-        line-height: 22px;
+.level-box {
+  .el-radio {
+    padding: 5px 0 8px 0;
+    line-height: 22px;
+  }
+}
+.voice-box {
+  display: flex;
+  > button {
+    margin-top: 2px;
+  }
+  .voice-upload {
+    margin-left: 8px;
+    height: 32px;
+    width: 90px;
+  }
+  .error-tips {
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 34px;
+    color: #f53f3f;
+    margin: 0;
+    .svg-icon {
+      width: 12px;
+      height: 12px;
+      margin-right: 4px;
     }
+  }
 }
-.voice-box{
+.resource-list {
+  list-style: none;
+  margin: 12px 0 0 0;
+  padding: 0;
+  li {
     display: flex;
-    >button{
-        margin-top: 2px;
-    }
-    .voice-upload{
-        margin-left: 8px;
-        height: 32px;
-        width: 90px;
-    }
-    .error-tips{
+    align-items: center;
+    a {
+      width: 360px;
+      padding: 7px 12px;
+      background: #f7f8fa;
+      border-radius: 2px;
+      color: #1d2129;
+      display: flex;
+      align-items: center;
+      span {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        flex: 1;
+        display: block;
         font-size: 14px;
-        font-weight: 500;
-        line-height: 34px;
-        color: #F53F3F;
-        margin: 0;
-        .svg-icon{
-            width: 12px;
-            height: 12px;
-            margin-right: 4px;
-        }
+        line-height: 22px;
+      }
+      .svg-icon {
+        width: 16px;
+        height: 16px;
+        margin-right: 8px;
+        color: #4e5969;
+      }
     }
+  }
 }
-.resource-list{
-    list-style: none;
-    margin: 12px 0 0 0;
-    padding: 0;
-    li{
-        display: flex;
-        align-items: center;
-        a{
-            width: 360px;
-            padding: 7px 12px;
-            background: #F7F8FA;
-            border-radius: 2px;
-            color: #1D2129;
-            display: flex;
-            align-items: center;
-            span{
-                overflow:hidden;
-                text-overflow:ellipsis;
-                white-space: nowrap;
-                flex: 1;
-                display: block;
-                font-size: 14px;
-                line-height: 22px;
-            }
-            .svg-icon{
-                width: 16px;
-                height: 16px;
-                margin-right: 8px;
-                color: #4E5969;
-            }
-        }
-    }
+.el-icon-delete {
+  color: #f53f3f;
+  cursor: pointer;
+  margin-left: 12px;
+  &:hover {
+    color: #f53f3f;
+  }
 }
-.el-icon-delete{
-    color: #F53F3F;
-    cursor: pointer;
-    margin-left: 12px;
-    &:hover{
-        color: #F53F3F;
-    }
+.para-list {
+  position: relative;
+  padding-right: 42px;
+  .el-icon-delete {
+    position: absolute;
+    right: 24px;
+    top: 10px;
+  }
 }
-.para-list{
-    position: relative;
-    padding-right: 42px;
-    .el-icon-delete{
-        position: absolute;
-        right: 24px;
-        top: 10px;
-    }
+.add-btn {
+  padding: 2px 12px;
+  border-radius: 2px;
+  border: 1px solid #165dff;
+  color: #165dff;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 20px;
+  background: #fff;
+  .el-icon-plus {
+    margin-right: 8px;
+  }
+  &:hover {
+    background: #fff;
+    color: #165dff;
+  }
 }
-.add-btn{
-    padding: 2px 12px;
-    border-radius: 2px;
-    border: 1px solid #165DFF;
-    color: #165DFF;
-    font-size: 12px;
-    font-weight: 400;
-    line-height: 20px; 
-    background: #FFF;
-    .el-icon-plus{
+.channel-item {
+  border: 1px solid #e5e6eb;
+  margin: 12px 0;
+  .channel-top {
+    display: flex;
+    padding: 0 12px;
+    height: 42px;
+    align-items: center;
+    .el-icon-caret-bottom,
+    .el-icon-caret-top {
+      color: #4e5969;
+      width: 14px;
+      height: 14px;
+      cursor: pointer;
+    }
+    &-name {
+      margin-left: 6px;
+      flex: 1;
+      color: #1d2129;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 22px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+    .el-button--text {
+      padding: 2px 12px;
+      color: #165dff;
+      .el-icon-plus {
+        width: 12px;
+        height: 12px;
         margin-right: 8px;
+        font-weight: bold;
+      }
     }
-    &:hover{
-        background: #FFF;
-        color: #165DFF;
+  }
+  .channel-bottom {
+    padding: 24px 40px;
+    border-top: 1px solid #e5e6eb;
+    p {
+      margin: 0 0 4px 0;
     }
-}
-.channel-item{
-        border: 1px solid #E5E6EB;
-        margin: 12px 0;
-        .channel-top{
-            display: flex;
-            padding: 0 12px;
-            height: 42px;
-            align-items: center;
-            .el-icon-caret-bottom,.el-icon-caret-top{
-                color: #4E5969;
-                width: 14px;
-                height: 14px;
-                cursor: pointer;
-            }
-            &-name{
-                margin-left: 6px;
-                flex: 1;
-                color: #1D2129;
-                font-size: 14px;
-                font-weight: 400;
-                line-height: 22px;
-                overflow: hidden;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-            }
-            .el-button--text{
-                padding: 2px 12px;
-                color: #165DFF;
-                .el-icon-plus{
-                    width: 12px;
-                    height: 12px;
-                    margin-right: 8px;
-                    font-weight: bold;
-                }
-            }
-        }
-        .channel-bottom{
-            padding: 24px 40px;
-            border-top: 1px solid #E5E6EB;
-            p{
-                margin: 0 0 4px 0;
-            }
-            ul{
-                list-style: none;
-                padding: 0;
-                margin: 0;
-                display: flex;
-                flex-flow: wrap;
-                li{
-                    color: #000;
-                    font-size: 14px;
-                    font-weight: 400;
-                    line-height: 22px;
-                    padding: 0 4px;
-                    border-radius: 2px;
-                    background: #F2F3F5;
-                    margin: 4px 2px 0 0;
-                    cursor: pointer;
-                    &.active{
-                        background: #175DFF;
-                        color: #FFF;
-                    }
-                }
-            }
+    ul {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+      display: flex;
+      flex-flow: wrap;
+      li {
+        color: #000;
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 22px;
+        padding: 0 4px;
+        border-radius: 2px;
+        background: #f2f3f5;
+        margin: 4px 2px 0 0;
+        cursor: pointer;
+        &.active {
+          background: #175dff;
+          color: #fff;
         }
+      }
+    }
+  }
 }
 </style>
 <style lang="scss">
-.new-word-add{
-    .el-rate{
-        padding: 4px 0;
-        .el-rate__item{
-            width: 24px;
-            height: 24px;
-            margin-right: 8px;
-            .el-rate__icon{
-                font-size: 24px;
-            }
-        }
-    }
-    .el-divider{
-        width: 100% !important;
-    }
-    .upload-demo{
-        width: 90px !important;
+.new-word-add {
+  .el-rate {
+    padding: 4px 0;
+    .el-rate__item {
+      width: 24px;
+      height: 24px;
+      margin-right: 8px;
+      .el-rate__icon {
+        font-size: 24px;
+      }
     }
+  }
+  .el-divider {
+    width: 100% !important;
+  }
+  .upload-demo {
+    width: 90px !important;
+  }
 }
-</style>
+</style>