优化

src/router/index.js

@@ -26,6 +26,7 @@ import Solved from './../views/solved.vue' //已解决页面
 import Closed from './../views/closed.vue' //已关闭页面
 import WaitConfirm from './../views/waitConfirm.vue' //待审核页面
 import ScanResult from './../views/scanResult.vue' //扫一扫结果页面
+import SearchDept from './../views/searchDept.vue' //搜索页面
 Vue.use(Router)
 
 export default new Router({
@@ -233,6 +234,14 @@ export default new Router({
     },
   },
   {
+    path: '/searchDept',
+    name: 'SearchDept',
+    component: SearchDept,
+    meta: {
+      allowBack: false
+    },
+  },
+  {
     path: '*',
     hidden: true,
     redirect: {

src/views/incidentList.vue

@@ -229,7 +229,7 @@ export default {
       searchState: 0,
       type: "all",
       isToday: "",
-      sum: 10,
+      sum: 1000,
       idx: 0,
       stateClass: "",
       loadShow: true
@@ -427,7 +427,7 @@ export default {
       this.loadShow = true;
       this.items = [];
       this.idx = 0;
-      this.sum = 10;
+      this.sum = 1000;
       this.getData();
     },
     toIncidentDetails(data) {
@@ -529,7 +529,7 @@ export default {
     onPullingDown() {
       var that = this;
       that.idx = 0;
-      that.sum = 10;
+      that.sum = 1000;
       setTimeout(() => {
         that.getData();
       }, 1000);

src/views/newIncident.vue

@@ -27,14 +27,11 @@
     >
       <cube-form-group>
         <cube-form-item
-          :field="fields[24]"
-          class="btn_plcaeholde"
-        ></cube-form-item>
-        <cube-form-item
           :field="fields[20]"
           v-if="valConfig == 2"
           class="btn_plcaeholde btn_local"
         >
+          <!-- <cube-button @click="showPlacePicker()">{{selectedPlaceTxt?selectedPlaceTxt:'请输入故障地点'}}</cube-button> -->
           <input
             type="text"
             class="inp_local"
@@ -45,20 +42,6 @@
           />
         </cube-form-item>
         <cube-form-item
-          :field="fields[25]"
-          v-if="valConfig == 2"
-          class="btn_plcaeholde btn_local"
-        >
-          <input
-            type="text"
-            class="inp_local"
-            placeholder="请输入报修人"
-            v-model="userInpVal"
-            @input="changeUserList()"
-            @click="showUserPicker()"
-          />
-        </cube-form-item>
-        <cube-form-item
           v-if="valConfig == 1"
           :field="fields[0]"
         ></cube-form-item>
@@ -335,9 +318,8 @@ const solution = {
 export default {
   data() {
     return {
-      selectDeptIndex:[0],
-      selectUserIndex:[0],
       validity: {},
+
       valid: undefined,
       action: {
         target:
@@ -367,27 +349,22 @@ export default {
       incidentTitle: "", //事件主题
       referenceInfo: {}, //引用信息
       placeSelectData: [], //区域地点下拉框选项
-      // inpLocalVal: "", //故障地点输入框
+      inpLocalVal: "", //故障地点输入框
       faultLocationList: [], //区域地点拼接下拉框选项
       deptInpVal: "", //报修科室输入框
       deptList: [], //报修科室下拉选项
       deptRes: "", //下拉框科室信息
-      userInpVal: "", //报修人输入框
-      userList: [], //报修人下拉选项
-      userRes: "", //下拉框报修人信息
       model: {
         contactsInformation: "",
         placeValue: [],
         address: "", //故障地点
         requester: "", //报修科室
-        requesterUser: "", //报修人
         houseNumber: "", //详细地址
         description: "", //事件描述
         // bxcode: "",
         assetId: "", //资产
         category: [],
         source: "", //事件来源
-        branch: "", //院区
         title: "", //事件主题
         priority: "", //优先级
         emergency: "", //紧急度
@@ -400,7 +377,7 @@ export default {
         candidateGroups: "", //处理组
         solutionType: [], //知识库类型
         handleUserOrGroup: false, //处理人or处理组
-        room: "", //房间号
+        room: "" //房间号
       },
       selectedCategoryTxt: "", //事件分类选中展示
       selectedPlaceTxt: "", //区域地点选中展示
@@ -408,7 +385,6 @@ export default {
       promptingConent: "",
       promptingStatus: "",
       order: 1, //处理方式  1：直接处理，2:派单
-      branchArr: [], //院区数组
       sourceArr: [], //事件来源数组
       priorityArr: [], //优先级数组
       emergencyArr: [], //紧急度数组
@@ -718,7 +694,7 @@ export default {
           modelKey: "requester",
           label: "报修科室:",
           props: {
-            options: [],
+            options: this.requesterList,
             title: "请选择报修科室",
             placeholder: "请选择报修科室"
           },
@@ -760,42 +736,7 @@ export default {
           rules: {
             required: false
           }
-        },
-        {
-          type: "select",
-          modelKey: "branch",
-          label: "院区:",
-          props: {
-            options: this.branchArr,
-            title: "请选择院区",
-            placeholder: "请选择院区"
-          },
-          events: {
-            change: (value, index, text) => {
-              console.log(value, index, text);
-              console.log(this.model);
-              if (this.valConfig == 2) {
-                this.getDept();
-              }
-            }
-          },
-          rules: {
-            required: true
-          }
-        },
-        {
-          type: "select",
-          modelKey: "requesterUser",
-          label: "报修人:",
-          props: {
-            options: [],
-            title: "请选择报修人",
-            placeholder: "请选择报修人"
-          },
-          rules: {
-            required: false
-          }
-        },
+        }
       ]
     };
   },
@@ -884,31 +825,6 @@ export default {
           that.fields[5].props.options = that.sourceArr;
         });
     },
-    // 获取院区
-    getBranch() {
-      this.$http
-        .post("service/user/data/fetchDataList/branch", {"idx":0,"sum":100})
-        .then((res) => {
-          if(res.data.status == 200){
-            res.data.list.forEach((v) => {
-              this.branchArr.push({
-                text: v.hosName,
-                value: v.id
-              });
-            });
-            this.fields[24].props.options = this.branchArr;
-            if(this.loginUser.duty){
-              this.model.branch = this.loginUser.duty.branch;
-            }else if(this.loginUser.branch){
-              this.model.branch = this.loginUser.branch.id;
-            }
-            // 获取报修科室
-            // if (this.valConfig == 2) {
-            //   this.getDept();
-            // }
-          }
-        });
-    },
     // 获取优先级
     getPriority() {
       var that = this;
@@ -997,7 +913,6 @@ export default {
             });
           });
           that.fields[12].props.options = that.closecodeArr;
-          that.model.closecode = 1572;//设计如此，默认“完全解决”
         });
     },
     // 获取处理人
@@ -1214,19 +1129,19 @@ export default {
             that.$route.params.abnormal;
         }
       } else {
-        // that.name = that.loginUser.name;
-        // that.model.contactsInformation = that.loginUser.phone;
-        // that.model.contacts = that.loginUser.name;
-        // that.model.houseNumber = that.loginUser.houseNumber;
+        that.name = that.loginUser.name;
+        that.model.contactsInformation = that.loginUser.phone;
+        that.model.contacts = that.loginUser.name;
+        that.model.houseNumber = that.loginUser.houseNumber;
+      }
+      if (that.loginUser.place && that.loginUser.place.length) {
+        if (that.loginUser.place.id) {
+          if (that.loginUser.place.area) {
+            that.model.placeValue[0] = that.loginUser.place.area.id;
+          }
+          that.model.placeValue[1] = that.loginUser.place.id;
+        }
       }
-      // if (that.loginUser.place && that.loginUser.place.length) {
-      //   if (that.loginUser.place.id) {
-      //     if (that.loginUser.place.area) {
-      //       that.model.placeValue[0] = that.loginUser.place.area.id;
-      //     }
-      //     that.model.placeValue[1] = that.loginUser.place.id;
-      //   }
-      // }
 
       if (localStorage.getItem("model")) {
         that.model = JSON.parse(localStorage.getItem("model"));
@@ -1749,38 +1664,25 @@ export default {
     },
     // 报修科室
     showDeptPicker() {
-      this.deptList = [];
       this.deptPicker.show();
-      this.getDept(true);
-    },
-    // 报修人
-    showUserPicker() {
-      this.userList = [];
-      this.userPicker.show();
-      this.getUser(true);
     },
     // 选中报修科室
     selectDeptHandler(selectedVal, selectedIndex, selectedTxt) {
       console.log(selectedVal, selectedIndex, selectedTxt);
-      this.deptInpVal = selectedTxt[0];
-      this.selectDeptIndex = selectedIndex;
-      if(!selectedVal[0]){
-        return;
-      }
-      let index = selectedIndex[0].toString();
-      this.model.requester = this.deptRes[index];
-      console.log(this.deptRes[index]);
-      // this.inpLocalVal = this.model.address = this.deptRes[index].place
-      //   .area
-      //   ? this.deptRes[index].place.area.area
-      //     ? this.deptRes[index].place.place
-      //       ? this.deptRes[index].place.area.area +
-      //         this.deptRes[index].place.place
-      //       : this.deptRes[index].place.area.area
-      //     : this.deptRes[index].place.area
-      //   : this.deptRes[index].place.place;
-      if (this.deptRes[index].phone) {
-        this.model.contactsInformation = this.deptRes[index].phone;
+      this.deptInpVal = selectedTxt;
+      this.model.requester = this.deptRes[selectedIndex];
+      console.log(this.deptRes[selectedIndex]);
+      this.inpLocalVal = this.model.address = this.deptRes[selectedIndex].place
+        .area
+        ? this.deptRes[selectedIndex].place.area.area
+          ? this.deptRes[selectedIndex].place.place
+            ? this.deptRes[selectedIndex].place.area.area +
+              this.deptRes[selectedIndex].place.place
+            : this.deptRes[selectedIndex].place.area.area
+          : this.deptRes[selectedIndex].place.area
+        : this.deptRes[selectedIndex].place.place;
+      if (this.deptRes[selectedIndex].phone) {
+        this.model.contactsInformation = this.deptRes[selectedIndex].phone;
       }
       // this.model.houseNumber = this.selectedPlaceTxt = selectedTxt.join(" ");
       // var place = {
@@ -1804,30 +1706,6 @@ export default {
       // };
       // localStorage.setItem("place", JSON.stringify(place));
     },
-    // 选中报修人
-    selectUserHandler(selectedVal, selectedIndex, selectedTxt) {
-      console.log(selectedVal, selectedIndex, selectedTxt);
-      this.userInpVal = selectedTxt[0];
-      this.selectUserIndex = selectedIndex;
-      if(!selectedVal[0]){
-        return;
-      }
-      let index = selectedIndex[0].toString();
-      this.model.requesterUser = this.userRes[index];
-      console.log(this.userRes[index]);
-      if (this.userRes[index].phone) {
-        this.model.contactsInformation = this.userRes[index].phone;
-      }
-    },
-    // 取消选中报修人
-    cancelUserHandler() {
-      if (this.model.requesterUser) {
-        this.userInpVal = this.model.requesterUser.name + '('+ this.model.requesterUser.account +')';
-      } else if (!this.model.requesterUser) {
-        this.userInpVal = "";
-        this.model.requesterUser = "";
-      }
-    },
     getAreaData() {
       this.$http
         .post("service/user/data/fetchDataList/area", {
@@ -1934,85 +1812,47 @@ export default {
       }, 600);
     },
     // 报修科室
-    getDept(isFirst) {
+    getDept(type) {
+      var that = this;
       this.$http
         .post("service/user/data/fetchDataList/department", {
           idx: 0,
-          sum: 1000,
-          department: {
-            branch: this.model.branch,
-            selectType:"pinyin_qs",
-            dept: isFirst ? '': (this.deptInpVal || "")
-          }
+          sum: 50,
+          department: { dept: that.deptInpVal || "" }
         })
-        .then((res) => {
+        .then(function(res) {
           var data = res.data.list;
-          this.deptRes = res.data.list;
-          this.deptList = [];
-          for (var i = 0; i < data.length; i++) {
-            this.deptList.push({
-              text: data[i].dept,
-              value: data[i].id
-            });
-          }
-          console.log(this.deptList)
-          this.deptPicker.setData(this.deptList, isFirst?this.selectDeptIndex:[0])
-        });
-    },
-    // 报修人
-    getUser(isFirst) {
-      this.$http
-        .post("service/user/data/fetchDataList/requester", {
-          idx: 0,
-          sum: 1000,
-          requester: {
-            searchKey: isFirst ? '': (this.userInpVal || "")
+          if (type == 1) {
+            that.deptList.length = 0;
+            that.$set(that.deptList, true, []);
+            that.deptList;
           }
-        })
-        .then((res) => {
-          var data = res.data.list;
-          this.userRes = res.data.list;
-          this.userList = [];
+          that.deptRes = res.data.list;
           for (var i = 0; i < data.length; i++) {
-            this.userList.push({
-              text: data[i].name + '('+ data[i].account +')',
+            that.deptList.push({
+              text: data[i].dept,
               value: data[i].id
             });
           }
-          console.log(this.userList)
-          this.userPicker.setData(this.userList, isFirst?this.selectUserIndex:[0])
+
+          that.deptPicker = that.$createCascadePicker({
+            title: "报修科室选择",
+            data: that.deptList,
+            onSelect: that.selectDeptHandler,
+            onCancel: that.cancelDeptHandler
+          });
         });
     },
     changeDeptList() {
       var that = this;
       clearTimeout(that.timer);
       that.timer = setTimeout(() => {
-        this.getDept();
-      }, 600);
-    },
-    changeUserList() {
-      clearTimeout(this.timer);
-      this.timer = setTimeout(() => {
-        this.getUser();
+        this.getDept(1);
       }, 600);
     }
   },
   created() {
     console.log(this.$route.params.data);
-    this.deptPicker = this.$createCascadePicker({
-      title: "报修科室选择",
-      data: this.deptList,
-      onSelect: this.selectDeptHandler,
-      onCancel: this.cancelDeptHandler
-    });
-    this.userPicker = this.$createCascadePicker({
-      title: "报修人选择",
-      data: this.userList,
-      onSelect: this.selectUserHandler,
-      onCancel: this.cancelUserHandler
-    });
-    //获取院区
-    this.getBranch();
     //获取事件来源
     this.getSource();
     // 优先级
@@ -2039,6 +1879,9 @@ export default {
     this.getPlaceData();
     // 获取故障地点
     // this.getFaultLocation();
+    if (this.valConfig == 2) {
+      this.getDept();
+    }
   },
   beforeRouteLeave(to, from, next) {
     console.log(to);
@@ -2082,9 +1925,9 @@ export default {
   border: none;
 }
 
-/* .btn_local {
-  z-index: 101;
-} */
+.btn_local {
+  /* z-index: 101; */
+}
 .inp_local {
   outline: none;
   width: 100%;

src/views/searchDept.vue

@@ -0,0 +1,390 @@
+<template>
+  <div class="content">
+    <div class="search-box">
+      <seiminSearch class="mSearch-input-box" :mode="2" button="inside" placeholder="输入关键字"
+        @search="doSearch(false)" @input="changeInp" @confirm="doSearch(false)" v-model="keyword"></seiminSearch>
+    </div>
+    <div class="search-keyword">
+      <cube-scroll class="keyword-list-box" v-show="isShowKeywordList" scroll-y>
+        <block v-for="(row, index) in keywordList" :key="index">
+          <div class="keyword-entry" hover-class="keyword-entry-tap">
+            <div class="keyword-text" @tap.stop="doSearch(keywordList[index].keyword)">
+              <rich-text :nodes="row.htmlStr"></rich-text>
+            </div>
+            <div class="keyword-img" @tap.stop="doSearch(keywordList[index].keyword)">
+              <image src="/static/HM-search/back.png"></image>
+            </div>
+          </div>
+        </block>
+      </cube-scroll>
+      <cube-scroll class="keyword-box" v-show="!isShowKeywordList" scroll-y>
+        <div class="keyword-block" v-if="oldKeywordList.length > 0">
+          <div class="keyword-list-header">
+            <div>历史搜索</div>
+            <div>
+              <image @tap="oldDelete" src="/static/HM-search/delete.png"></image>
+            </div>
+          </div>
+          <div class="keyword">
+            <div v-for="(keyword, index) in oldKeywordList" @tap="changeInp(keyword)" :key="index">{{ keyword }}
+            </div>
+          </div>
+        </div>
+      </cube-scroll>
+    </div>
+    <!-- <seiminModel ref="seiminModel"></seiminModel> -->
+  </div>
+</template>
+
+<script>
+import seiminSearch from '../custom/seiminSearch.vue'
+export default {
+  components:{
+    seiminSearch
+  },
+  data() {
+    return {
+      reFresh: '',
+      keyword: "",
+      oldKeywordList: [],
+      keywordList: [],
+      isShowKeywordList: false,
+      deptList: [],
+      timer: null, //定时器
+      searchText: "", //搜索文本
+      searchData: [], //搜索结果
+    };
+  },
+  beforeDestroy() {
+    if (this.timer) {
+      clearTimeout(this.timer);
+      this.timer = null;
+    }
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    // ...mapMutations('other', [
+    //   "changeSearchDeptResult",
+    //   "changeSeiminModel",
+    //   "changeSearchDeptResultList",
+    // ]),
+    // ...mapMutations("login", ["changeLoginInfo"]),
+    init() {
+      this.loadOldKeyword();
+    },
+    //加载历史搜索,自动读取本地Storage
+    loadOldKeyword() {
+      this.oldKeywordList = JSON.parse(localStorage.getItem('OldKeys'));
+    },
+    //防抖搜索
+    changeInp(event) {
+      this.searchText = event;
+      clearTimeout(this.timer);
+      this.timer = setTimeout(() => {
+        this.inputChange(event);
+      }, 500);
+    },
+    //监听输入
+    inputChange(event) {
+      //兼容引入组件时传入参数情况
+      var keyword = event.detail ? event.detail.value : event;
+      if (!keyword) {
+        this.keywordList = [];
+        this.isShowKeywordList = false;
+        return;
+      }
+      this.keyword = keyword;
+      this.isShowKeywordList = true;
+      let postData = {
+        idx: 0,
+        sum: 20,
+        department: {},
+      };
+      this.toast = this.$createToast({
+        time: 0,
+        mask: true,
+        txt: "正在加载中",
+      });
+      this.toast.show();
+      reqFetchDataList("data", "department", postData).then((res) => {
+        this.toast.hide();
+        if (res.status == 200) {
+          this.searchData.push({
+            name: keyword,
+            list: res.list || [],
+          });
+          let searchText = this.searchText.detail ?
+            this.searchText.detail.value :
+            this.searchText;
+          let index = this.searchData.findIndex(
+            (item) => item.name === searchText
+          );
+          this.deptList = index >= 0 ? this.searchData[index].list : [];
+          this.keywordList = this.drawCorrelativeKeyword(
+            this.deptList,
+            keyword
+          );
+        } else {
+          this.$refs.seiminModel.show({
+            skin: "toast",
+            icon: "error",
+            content: res.msg || "获取数据失败",
+          });
+          throw new Error(res.msg || "获取数据失败");
+        }
+      });
+    },
+    //高亮关键字
+    drawCorrelativeKeyword(keywords, keyword) {
+      var len = keywords.length,
+        keywordArr = [];
+      for (var i = 0; i < len; i++) {
+        var row = keywords[i];
+        //定义高亮#9f9f9f
+        var html = "";
+        if (this.deptDisplay == 1) {
+          // 科室名称
+          html = row.dept.replace(
+            keyword,
+            "<span style='color: #9f9f9f;'>" + keyword + "</span>"
+          );
+        } else if (this.deptDisplay == 2) {
+          // 科室别称
+          html = row.deptalias.replace(
+            keyword,
+            "<span style='color: #9f9f9f;'>" + keyword + "</span>"
+          );
+        }
+        html = "<div>" + html + "</div>";
+        var tmpObj = {
+          keyword: this.deptDisplay == 1 ? row.dept : row.deptalias,
+          htmlStr: html,
+        };
+        keywordArr.push(tmpObj);
+      }
+      return keywordArr;
+    },
+    //清除历史搜索
+    oldDelete() {
+      this.$createDialog({
+        type: 'confirm',
+        icon: 'cubeic-alert',
+        title: '提示',
+        content: '确定清除历史搜索记录？',
+        confirmBtn: {
+          text: '确定',
+          active: true,
+          disabled: false,
+          href: 'javascript:;'
+        },
+        cancelBtn: {
+          text: '取消',
+          active: false,
+          disabled: false,
+          href: 'javascript:;'
+        },
+        onConfirm: () => {
+          this.oldKeywordList = [];
+          localStorage.removeItem('OldKeys');
+        },
+        onCancel: () => {}
+      }).show()
+    },
+    //执行搜索
+    doSearch(keyword) {
+      keyword = keyword === false ? this.keyword : keyword;
+      this.keyword = keyword;
+      this.saveKeyword(keyword); //保存为历史
+      let arr = this.deptList.filter((item) => {
+        return this.deptDisplay == 1 ?
+          item.dept === keyword :
+          item.deptalias === keyword;
+      });
+      if (arr.length) {
+        this.changeSearchDeptResult(arr[0]);
+      }
+    },
+    //保存关键字到历史记录
+    saveKeyword(keyword) {
+      var OldKeys = JSON.parse(localStorage.getItem('OldKeys'));
+      if(OldKeys){
+        var findIndex = OldKeys.indexOf(keyword);
+        if (findIndex == -1) {
+          OldKeys.unshift(keyword);
+        } else {
+          OldKeys.splice(findIndex, 1);
+          OldKeys.unshift(keyword);
+        }
+        //最多10个纪录
+        OldKeys.length > 10 && OldKeys.pop();
+        localStorage.setItem('OldKeys',JSON.stringify(OldKeys))
+        this.oldKeywordList = OldKeys; //更新历史搜索
+      }else{
+        OldKeys = [keyword];
+        localStorage.setItem('OldKeys',JSON.stringify(OldKeys))
+        this.oldKeywordList = OldKeys; //更新历史搜索
+      }
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+  view {
+    display: block;
+  }
+
+  .search-box {
+    background-color: rgb(242, 242, 242);
+    padding: 15upx 2.5%;
+    display: flex;
+    justify-content: space-between;
+    position: sticky;
+    top: 0;
+  }
+
+  .search-box .mSearch-input-box {
+    width: 100%;
+  }
+
+  .search-box .input-box {
+    width: 85%;
+    flex-shrink: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .search-box .search-btn {
+    width: 15%;
+    margin: 0 0 0 2%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+    font-size: 28upx;
+    color: #fff;
+    background: linear-gradient(to right, #ff9801, #ff570a);
+    border-radius: 60upx;
+  }
+
+  .search-box .input-box>input {
+    width: 100%;
+    height: 60upx;
+    font-size: 32upx;
+    border: 0;
+    border-radius: 60upx;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    padding: 0 3%;
+    margin: 0;
+    background-color: #ffffff;
+  }
+
+  .placeholder-class {
+    color: #9e9e9e;
+  }
+
+  .search-keyword {
+    width: 100%;
+    background-color: rgb(242, 242, 242);
+  }
+
+  .keyword-list-box {
+    height: calc(100vh - 110upx);
+    padding-top: 10upx;
+    border-radius: 20upx 20upx 0 0;
+    background-color: #fff;
+  }
+
+  .keyword-entry-tap {
+    background-color: #eee;
+  }
+
+  .keyword-entry {
+    width: 94%;
+    height: 80upx;
+    margin: 0 3%;
+    font-size: 30upx;
+    color: #333;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: solid 1upx #e7e7e7;
+  }
+
+  .keyword-entry image {
+    width: 60upx;
+    height: 60upx;
+  }
+
+  .keyword-entry .keyword-text,
+  .keyword-entry .keyword-img {
+    height: 80upx;
+    display: flex;
+    align-items: center;
+  }
+
+  .keyword-entry .keyword-text {
+    width: 90%;
+  }
+
+  .keyword-entry .keyword-img {
+    width: 10%;
+    justify-content: center;
+  }
+
+  .keyword-box {
+    height: calc(100vh - 110upx);
+    border-radius: 20upx 20upx 0 0;
+    background-color: #fff;
+  }
+
+  .keyword-box .keyword-block {
+    padding: 10upx 0;
+  }
+
+  .keyword-box .keyword-block .keyword-list-header {
+    width: 94%;
+    padding: 10upx 3%;
+    font-size: 27upx;
+    color: #333;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .keyword-box .keyword-block .keyword-list-header image {
+    width: 40upx;
+    height: 40upx;
+  }
+
+  .keyword-box .keyword-block .keyword {
+    width: 94%;
+    padding: 3px 3%;
+    display: flex;
+    flex-flow: wrap;
+    justify-content: flex-start;
+  }
+
+  .keyword-box .keyword-block .hide-hot-tis {
+    display: flex;
+    justify-content: center;
+    font-size: 28upx;
+    color: #6b6b6b;
+  }
+
+  .keyword-box .keyword-block .keyword>view {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 60upx;
+    padding: 0 20upx;
+    margin: 10upx 20upx 10upx 0;
+    height: 60upx;
+    font-size: 28upx;
+    background-color: rgb(242, 242, 242);
+    color: #6b6b6b;
+  }
+</style>