element ui vue sass实现帮助中心功能

  

    

      

        

          
帮助中心
          

            
              
            
            
              搜索
          
        
      
      

        

          
            
              

                
                

                  
{{ item.name }}
                  
{{ item.descr }}
                
              
            
          
        
        

          

            
              

                
{{ infoName }}
              
              
                
                

                  
                    
                      
                        {{data.name}}
                      
                    
                  

                  

                    

                      


                        

                          {{ item.name }}
                          {{ item.name }}
                        
                      
                    
                  

                  

                    

                      
                        

                          {{ node.label }}
                          
                        
                      
                    
                  

                
              
            

            

              

                

                  {{ doc.title }}
                

                  发布时间：
                  {{ doc.updateTime }}
                
                

                

                

                

                  

                    

                      


                            
                      
                      有帮助

                    

                      

                            
                      
                      没帮助

                  
                  

                    

                      
                      提交成功！非常感谢您的反馈，我们会继续努力做到更好！
                    
                  
                
              
              

                
                

                  
暂无文章详情
                
              
            

            

              

                

                  {{ videoDoc.name }}
                

                  发布时间：
                  {{ videoDoc.createTime }}
                
                

                
{{videoDoc.name}}
                

                  
                  
                  
                
                

                  

                    

                      

                            
                      
                      有帮助

                    

                      

                            
                      
                      没帮助

                  
                  

                    

                      
                      提交成功！非常感谢您的反馈，我们会继续努力做到更好！
                    
                  
                
              
              

                
                

                  
暂无视频教程
                
              
            

            

              

                

                  {{ logInfo.version }}
                

                  发布时间：
                  {{ logInfo.releaseTime }}
                
                

                

                

                

                  

                    

                      

                            
                      
                      有帮助

                    

                      

                            
                      
                      没帮助

                  
                  

                    

                      
                      提交成功！非常感谢您的反馈，我们会继续努力做到更好！
                    
                  
                
              
              

                
                

                  
暂无文章详情
                
              
            
          
        
      
      
      
      
        
          

            
          
        
      
    
  



import {getStore} from '@/util/store'
import {getSysversion} from "@/api/service/sysversion";
import {getTrainorgObj, supervisor} from "@/api/training/trainorg";
import {getEvalorgObj} from "@/api/evalorg/evalorg";
// import {getDicDataSources} from "@/util/common";
import {orgInfo} from "@/api/training/org";

import {
  addObj,
  fetchList,
  fetchListCategory,
  fetchListSearchResult,
  getObj,
  fetchListVideo,
  fetchListUpdate, getObjVideo
} from "@/api/help";
import play from './play'

export default {
  name: "wel",
  components: {play},
  data() {
    return {
      userInfo: {},//用户标识
      info: {},//通知群体
      activeIndex: '0',//当前menu值
      inputForm: {queryName: '', categoryIds: ''},
      dataListLoading: false,
      totalPage: 0,
      loadingAll: true,//加载menu接口状态
      treeFrom: {sign: '',},//sign接口参数
      searCategoryId: '',
      menu: [],
      infoName: '',//当前menu下树的标题
      tree: [],
      defaultProps: {
        id: 'aid',
        children: 'categoryAndArticleList',
        label: 'name',
        disabled: 'disabled',
      },
      lastSelectedAid: '',//上次选中aid
      articleIdList: [],//当前menu全部文章
      firstArticleId: true,
      doc: {},
      usefulAll: false,//有用状态
      usefulStateAll: '',//评价选择有用状态
      feedbackDisabled: false,
      check: false,
      initialLoadVideo: true,//首次加载视频接口
      loadingVideo: false, // 加载视频教程接口状态,
      page: 1, // 当前页码
      totalVideo: 0, //总页码
      videoList: [], // 视频数据源
      addOrUpdateVisible: false,
      noMore: true,//是否有更多数据
      curVideo: 0,//当前选中视频文章索引号
      curHover: -1,//当前选中视频文章标题悬浮
      firstVideoId: true,
      videoDoc: {},//当前选中视频的详情
      usefulVideo: false,
      usefulStateVideo: '',
      loadingUpdateLog: false,
      searchForm: {
        orgTypeSign: [],
        regionCode: [],
        sign: '',
      },//更新日志接口参数
      loadingQuery: false,
      updateLogList: [],
      props: {
        children: 'children',
        label: 'label'
      },
      flag: false,
      firstSysVersionId: true,
      logInfo: {},
      usefulStateUpdateLog: false,
      feedBackStatusUpdateLog: '',
    }
  },
  created() {
    console.log("hi!")

    //获取用户信息
    this.userInfo = getStore({name: "userInfo"});
    console.log("userinfo", this.userInfo);

    //获取入门手册FAQ的接口sign
    if (this.userInfo.orgtypeSign === "supervisor") {
      this.treeFrom.sign = "jianguan";
    } else if (this.userInfo.orgtypeSign === "trainorg" || this.userInfo.orgtypeSign == "trainorg@nosub") {
      this.treeFrom.sign = "peixun";
    } else if (this.userInfo.orgtypeSign == 'evalorg') {
      this.treeFrom.sign = "evalorg";
    } else if (this.userInfo.orgtypeSign == 'projectorg') {
      this.treeFrom.sign = "projectorg";
    } else if (this.userInfo.orgtypeSign == 'org_province_02' || this.userInfo.orgtypeSign == 'org_city_02' || this.userInfo.orgtypeSign == 'org_district_02') {
      this.treeFrom.sign = "org_eval";
    } else if (this.userInfo.orgtypeSign === 'org_province_03') {
      this.treeFrom.sign = "revitalize_skills_org";
    } else if (this.userInfo.orgtypeSign === 'org_province_131' || this.userInfo.orgtypeSign === 'org_province_160' || this.userInfo.orgtypeSign === 'org_province_169' || this.userInfo.orgtypeSign === 'org_province_192' || this.userInfo.orgtypeSign === 'org_province_180' || this.userInfo.orgtypeSign === 'org_province_162') {
      this.treeFrom.sign = "revitalize_skills";
    } else if (this.userInfo.orgtypeSign === 'enterprise') {
      this.treeFrom.sign = "enterprise";
    } else {
      this.treeFrom.sign = "renshe";
    }


    this.init();
    this.getMenu();
    // this.getUpdateLog();
  },
  mounted() {//进入页码调用一次
  },
  methods: {
    //搜索高亮 严格模式
    brightenKeyword(val, keyword) {
      if (val && keyword && keyword.length > 0 && val.indexOf(keyword) !== -1) {
        const regex = new RegExp(keyword, 'g');
        val = val.replace(regex, '$&');
      }
      return val;
    },
    async init() {
      //获取更新日志接口的 参数值
      //机构
      if (this.userInfo.orgtypeSign == 'trainorg') {
        let res = await getTrainorgObj(1)
        const {data} = res.data
        this.searchForm.queryTypeSign = "901"//培训机构
        this.searchForm.regionCode = data.divisionCode
      } else if (this.userInfo.orgtypeSign == 'trainorg@nosub') {
        let res = await getTrainorgObj(1)
        const {data} = res.data
        this.searchForm.queryTypeSign = "902"
        this.searchForm.regionCode = data.divisionCode
      } else if (this.userInfo.orgtypeSign == 'evalorg') {
        let res = await getEvalorgObj(this.userInfo.organizationId)
        const {data} = res.data
        this.searchForm.queryTypeSign = "903"
        this.searchForm.regionCode = data.divisionCode
      } else if (this.userInfo.orgtypeSign == 'supervisor') {
        this.searchForm.queryTypeSign = '';
      } else {
        //其他用户
        //人社
        const res = await orgInfo(this.userInfo.organizationId);
        if (res.data.data) {
          const {govType, regionCode} = res.data.data;
          this.info = {
            govType: govType,
            regionCode: '41' + regionCode,
          }
          console.log("govType====", govType);
          this.searchForm.orgTypeSign.push(govType)

          this.searchForm.queryTypeSign = this.info.govType;
        }
      }


    },
    getMenu() {
      this.loadingAll = true;
      fetchListCategory({sign: this.treeFrom.sign}).then(response => {
        const filterArr = ["入门手册", "FAQ"];
        const filteredData = response.data.data.categoryAndArticleList.filter(item => {return filterArr.includes(item.name);});

        this.searCategoryId = filteredData[0].categoryId+','+filteredData[1].categoryId;
        console.log("this.searCategoryId",typeof this.searCategoryId,this.searCategoryId);

        for (let i = 0; i  {
            if (this.articleIdList.length > 0) {
              console.log("this.articleIdList", this.articleIdList);
              this.$refs.tree.setCurrentKey(this.articleIdList[0].aid)
              this.lastSelectedAid = this.articleIdList[0].aid;
              this.getDoc(this.articleIdList[0].articleId);
            } else {
              this.doc = {};
            }
          })
        }

        this.firstArticleId = false;

        this.loadingAll = false // 请求成功后关闭 loading
      }).catch(error => {
        console.log(error);
      }).finally(() => {
        this.loadingAll = false // 请求完成后关闭loading
      })
    },
    // 声明一个递归函数，用于处理categoryAndArticleList列表
    processCategoryAndArticleList(list) {
      list.forEach(item => {
        if (item.categoryIds && item.articleId) {
          item.aid = item.categoryIds.split(',').join('') + item.articleId;
        } else {
          // item.aid = item.categoryIds + item.articleId;
          item.aid = null;
          item.disabled = true;
        }

        // console.log("aid===",item.aid);

        if (item.articleId) {
          item.name = item.title;
          this.$nextTick(() => {
            this.articleIdList.push({aid: item.aid, articleId: item.articleId});
          })

        } else {
          /*if (item.categoryAndArticleList && item.categoryAndArticleList.length > 0) {
            item.isLeaf = true;
          }*/
        }

        if (item.categoryAndArticleList) {
          this.processCategoryAndArticleList(item.categoryAndArticleList);
          const trueItem = item.categoryAndArticleList.find(subItem => subItem.articleId);
          if (trueItem) {
            if (item.name===false) {
              item.name = trueItem.title;
            }
          } else {
            /*if (item.categoryAndArticleList && item.categoryAndArticleList.length > 0) {
              item.isLeaf = true;
            }*/
          }
        }
      });
    },
    //menu
    handleSelectMenu(key, keyPath) {
      console.log("handMenu", key, keyPath);
      this.check = false;
      this.activeIndex = keyPath[0];
      this.firstArticleId = true;
      this.articleIdList = [];

      if (this.menu[parseInt(this.activeIndex)].name !== '视频教程' && this.menu[parseInt(this.activeIndex)].name !== '更新日志') {
        this.getMenu();
      } else if (this.menu[parseInt(this.activeIndex)].name === "视频教程") {
        this.infoName = "视频教程"
        this.page = 1;
        this.noMore = true;
        this.firstVideoId = true;
        this.videoList = [];
        this.getVideo();
      } else if (this.menu[parseInt(this.activeIndex)].name === "更新日志") {
        this.infoName = "更新日志"
        this.firstSysVersionId = true;
        this.getUpdateLog();
      }
    },
    //tree
    handleNodeClick(data, node, obj) {
      console.log("handNode", data, node, obj);
      this.check = false;
      console.log(this.$refs.tree.getCurrentKey());

      if (data.aid) {//如果是文章选中并更新选中值
        this.$nextTick(() =>{
          this.$refs.tree.setCurrentKey(data.aid)
          this.lastSelectedAid = data.aid;
        })
      } else {//否则选择是分类依旧选中上次选中值
        this.$nextTick(() =>{
          this.$refs.tree.setCurrentKey(this.lastSelectedAid)
        })
      }
      if (this.menu[parseInt(this.activeIndex)].name !== '视频教程' && this.menu[parseInt(this.activeIndex)].name !== '更新日志') {

      }
      if (data.articleId) {
        this.getDoc(data.articleId)
      }
    },
    //获取文章详情
    getDoc(articleId) {
      if (articleId) {
        getObj(articleId).then(response => {
          if (response.data.code === 0) {
            this.doc = response.data.data;
            this.usefulAll = response.data.data.useful;//评价过的结果
          }
        })
      }
    },
    changeVideo(index, vid) {
      this.curVideo = index;
      this.check = false;
      // this.getVideo();
      this.getVideoDoc(vid);
    },
    getVideo() {
      console.log("getVideo");
      // If loading is already in progress or there is no more data available, return
      if (this.loadingVideo || !this.noMore) return;

      this.loadingVideo = true; // Set loading flag to true

      // Call the API function to fetch the next page of data
      fetchListVideo({current: this.page, size: 10, sign: 'spfl'})
        .then(response => {
          const newData = response.data.data.records; // Extract the new data from the response
          if (newData.length > 0) {
            this.initialLoadVideo = false;
            this.videoList = this.videoList.concat(newData); // Append the new data to the existing list
            console.log(this.videoList);

            if (this.firstVideoId) {
              this.getVideoDoc(this.videoList[0].videoId);
            }
            this.firstVideoId = false;

            this.page++; // Increment the current page number
          } else {
            this.noMore = false; // No more data available, set hasMore flag to false
          }
        })
        .catch(error => {
          console.error('Error fetching data:', error);
        })
        .finally(() => {
          this.loadingVideo = false; // Set loading flag to false regardless of success or failure
        });
    },
    getVideoDoc(vid) {
      console.log("getVideoDoc");

      getObjVideo(vid).then(response => {
        console.log("response",response.data)
        if (response.data.code === 0) {
          if (response.data.data) {
            this.videoDoc = response.data.data;
            this.usefulVideo = response.data.data.useful;
          }
        }
        })
        .catch(error => {
          console.error('Error fetching data:', error);
        })
        .finally(() => {
          this.loadingVideo = false; // Set loading flag to false regardless of success or failure
        });
    },
    // 播放
    addOrUpdateHandle (id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id)
      })
    },
    getUpdateLog() {
      this.loadingUpdateLog = true;
      fetchListUpdate({
        terminals: 'pc',
        targets: this.searchForm.queryTypeSign,
        status: 1,
        size: 100,
        current: 1
      }).then(response => {
        if (response.data.data.records) {
          let data = response.data.data.records
          for (let i in data) {
            data[i].label = data[i].label + '更新日志'
            data[i].value = i
            for (let k in data[i].children) {
              data[i].children[k].label = data[i].children[k].releaseTime.substring(0, 10) + data[i].children[k].version
              data[i].children[k].value = data[i].children[k].sysVersionId
            }
          }
          this.updateLogList = data
          if (this.firstSysVersionId) {
            this.getHelpcontentList(data[0].children[0].sysVersionId)
            this.$nextTick(() => {
              this.$refs.tree.setCurrentKey(data[0].children[0].sysVersionId)
            })
          }
          this.firstSysVersionId = false;
        }
        this.loadingUpdateLog = false;
      }).catch(() => {
        this.loadingUpdataLog = false;
      })
    },
    async getHelpcontentList(val) {
      this.flag = false
      const res = await getSysversion(val);
      this.logInfo = res.data.data;
      this.flag = true
    },
    handleNodeClickVideo(data) {
      console.log("data", data);
      this.check = false;
      if (data) {
        this.$nextTick(() =>{
          this.$refs.tree.setCurrentKey(data.sysVersionId)
        })
      }
      this.getHelpcontentList(data.value)
    },
    feedBack(s, id, status) {
      console.log(s, id, status);
      this.check = true;
      //防止频繁点击
      if (this.feedbackDisabled) return;
      this.feedbackDisabled = true;
      /*setTimeout(() => {
        this.feedbackDisabled = false;
      }, 1000)*/

      //执行反馈操作
      const obj = {
        articleId: id,
        useful: status
      };

      if (s === 'v') {
        this.usefulVideo = true;
        this.usefulStateVideo = status;
      } else if (s === 'u') {
        this.usefulStateUpdateLog = true;
        this.feedBackStatusUpdateLog = status;
      } else {
        this.usefulAll = true;
        this.usefulStateAll = status;
      }
      addObj(Object.assign({}, obj)).then(data => {
        console.log(data);
        if (data.data.code===0) {
          this.feedbackDisabled = false;
        }
      }).catch(error => {
        console.log(error);
        this.feedbackDisabled = false;
      }).finally(() =>{
        this.feedbackDisabled = false;
      });
    },
    //参数搜索列表
    async querySearch(queryString, cb) {
      this.loadingQuery = true;
      console.log("querySearch", queryString, cb);
      this.inputForm.categoryIds = this.searCategoryId;
      this.inputForm.queryName = queryString
      await fetchListSearchResult(this.inputForm).then(response => {
        this.searchResult = response.data.data.records
        var results = this.searchResult;
        //新增属性名value值为属性title
        results.forEach((obj) => {
          obj.value = obj.title;
          delete obj.title;
        });
        if (!results || results.length === 0) { results = []; }
        // 调用 callback 返回建议列表的数据
        cb(results);
        this.loadingQuery = false;
      }).catch(error => {
        console.log(error);
      }).finally(() => {
        this.loadingQuery = false;
      })
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    handleSelect(item) {
      console.log(item);
      this.inputForm.queryName = item.value;
    },
    //处理回车事件
    handleEnter() {
      //跳转到搜索结果页面
      this.viewHandle(this.inputForm.queryName);
    },
    //搜索跳转查看页面
    viewHandle(keyword) {
      console.log("跳转到查看页面", keyword);

      //12345678 id 形式
      /*let src = '/search/result/' + id;
      this.$router.push({path: src})*/

      //?属性名=属性值 形式
      this.$router.push({
        path: "/search/result",
        query: {
          keyword: keyword,
          searCategoryId: this.searCategoryId,
        }
      })
    },
    //清空搜索条件
    resetQuery() {
      this.inputForm.queryName = '';
    },
  }
}



.avue-view {
  padding: 0;
  height: calc(100% + 50px);
  background: #fff;
}

.page {
  height: 100%;
  padding-bottom: 40PX;
  overflow-y: scroll;
}

// Backtop 回到顶部  返回页面顶部的操作按钮
.el-backtop {
  right: 28px !important;
  bottom: 75px !important;
  z-index: 100;
}

.elMenuOuter {
  margin-top: -80PX;
  background: hsla(0, 0%, 100%, .2)
}

.elMenu {
  display: flex;
  justify-content: space-between;
  width: 1240PX;
  background-color: hsla(0, 0%, 100%, 0);
  margin: 0 auto
}

.elMenu .el-menu-item {
  height: 80PX;
  line-height: 1.4em;

  &.is-active {
    .tabLabel {
      .menuIcon {
        filter: brightness(1.25) saturate(1.25);

        &::after {
          content: '';
          display: block;
          height: 100%;
          transform: translateX(-100%);
          background: inherit;
          filter: drop-shadow(48px 0 0 #ff7b00);
        }
      }
    }
  }
}

.elMenu .el-menu-item:hover {
  background-color: hsla(0, 0%, 100%, 0);

  .tabLabel {
    .menuIcon {
      filter: brightness(1.25) saturate(1.25);

      &::after {
        content: '';
        display: block;
        height: 100%;
        transform: translateX(-100%);
        background: inherit;
        filter: drop-shadow(48px 0 0 #ff7b00);
      }
    }
  }
}

.elMenu .el-menu-item:hover .tabName {
  color: #ff7b00
  //color: unset
}

.elMenu .el-menu-item:hover .tabSubName {
  color: #ff7b00
  //color: unset
}

.elMenu .el-menu-item.is-active {
  border-width: 3px;
  background-color: hsla(0, 0%, 100%, 0)
}

.elMenu .el-menu-item.is-active .tabSubName {
  color: unset
}

.tabLabel {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80PX
}

.tabLabel .menuIcon {
  display: inline-block;
  width: 48px;
  height: 48px;
  margin: 0 3px;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}

.tabLabel .icon-wrapper {
  font-size: 48PX
}

.tabLabel .tabIcon {
  font-size: 40PX
}

.tabLabel .tabInfo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column
}

.tabLabel .tabInfo .tabName {
  font-size: 18PX;
  line-height: 1.4em;
  font-weight: 700
}

.tabLabel .tabInfo .tabSubName {
  font-size: 12PX;
  line-height: 1.4em;
  color: rgba(0, 0, 0, .4)
}

.container {
  width: 1240PX;
  margin: 0 auto;
  padding-top: 16px;
}

.h-page-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-width: 0;
  height: 40px;
  min-height: 0;
  -webkit-box-flex: 0;
  -ms-flex: none;
  flex: none;
  padding: 0 12px;
  border-bottom: 1px solid #e0e0e0
}

.h-layout {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0
}

.docList {
  //margin-left: 30px;
}

.docList-title {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 18PX;
  margin-top: 16PX;
  margin-bottom: 20PX;
  color: rgba(0, 0, 0, .9);
  font-weight: 700;
  background-color: #fff;
}

.has-gutter {
  overflow-x: hidden;
  overflow-y: scroll;
  height: 837px;
}

.infinite-list-wrapper {
  width: 100%;
  height: 380px;
  max-height: 380px;
  overflow-y: scroll;
  margin-top: 15px;
}

.videoList {
  &-li {
    position: relative;

    &-name {
      margin: 0 0px 22PX 24px;
      font-size: 14px;
      background-color: #fff;
      color: #141414;
      white-space: nowrap;
      cursor: pointer;
      display: block;
      max-width: 150px;
      overflow: hidden;
      text-overflow: ellipsis;

      &.curVideo {
        color: #ff7b00;
      }
    }
    &-title {
      position: absolute;
      top: 17px;
      right: 17px;
      padding: 3px 5px;
      background: #fff;
      border: solid 1px #000;
      font-size: 12px;
    }
    &:hover .videoList-li-name {
      color: #ff7b00;
    }
  }
}

.el-tree-node__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  position: relative;
  margin-bottom: 12PX;
  color: rgba(0, 0, 0, .9)
}

.el-tree-node__content:after {
  content: "";
  display: block;
  width: 4PX;
  height: 0;
  -webkit服务器托管网-transition: height .2s ease-in-out 50ms;
  transition: height .2s ease-in-out 50ms;
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  background-color: #ff7b00
}

.el-tree-node__content:hover {
  background-color: #fff;
  color: #ff7b00
}

.el-tree-node__expand-icon {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg)
}

.el-tree-node__expand-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-left: 2px;
  color: #4d4d4d;
  cursor: pointer;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: color .1s ease-in-out, -webkit-transform .1s ease-in-out;
  transition: color .1s ease-in-out, -webkit-transform .1s ease-in-out;
  transition: transform .1s ease-in-out, color .1s ease-in-out;
  transition: transform .1s ease-in-out, color .1s ease-in-out, -webkit-transform .1s ease-in-out;
  vertical-align: middle
}

.el-tree-node__expand-icon.expanded {
  -webkit-transform: rotate(270deg);
  transform: rotate(270deg)
}

/deep/ .el-tree--highlight-current .el-tree-node.is-current:not(.is-drag) > .el-tree-node__content {
  background-color: #fff;
  color: #ff7b00
}

.el-tree--highlight-current .el-tree-node.is-current:not(.is-drag) > .el-tree-node__content > div {
  font-weight: 700
}

.el-tree--highlight-current .el-tree-node.is-current:not(.is-drag) > .el-tree-node__content:after {
  height: 32PX
}

.el-tree--highlight-current .el-tree-node.is-current:not(.is-drag) > .el-tre服务器托管网e-node__content > .el-tree-node__expand-icon {
  color: #4d4d4d
}

/deep/ .el-tree > .el-tree-node > .el-tree-node__content:first-child > .el-tree-node__label {
  font-weight: 700;
  font-size: 16PX;
}

/deep/ .el-tree > .el-tree-node > .el-tree-node__children > .el-tree-node.is-expanded > .el-tree-node__content .el-tree-node__label {
  font-weight: 700;
  font-size: 16PX;
}

/deep/ .el-tree-node__label {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #000;
}

/deep/ .el-tree-node__content:hover > .el-tree-node__label {
  color: #ff7b00;
}

/deep/ .el-tree-node__content > .el-tree-node__expand-icon {
  margin-top: -5px;
  font-size: 16px;
  color: #4d4d4d;
}

/deep/ .el-tree-node__expand-icon.is-leaf:before {
  content: "";
}

/deep/ .expanded.el-tree-node__expand-icon.el-icon-arrow-down {
  transform: rotate(180deg);
}

/deep/ .el-tree-node__content {
  min-width: 100%;
  height: 32px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 2px solid transparent;
  cursor: pointer;
  font-size: 0;
  line-height: 28px;
  -webkit-transition: all .1s ease-in-out;
  transition: all .1s ease-in-out;
  margin-bottom: 12px;
}

/*/deep/ .el-tree-node__children .el-tree-node .el-tree-node__content .el-tree-node__label {
  margin-left: 30px;
}*/

/deep/ .el-tree .el-tree-node .is-current .el-tree-node__content .el-tree-node__label {
  color: #ff7b00;
}
//重置颜色
/deep/ .el-tree .el-tree-node .is-current .el-tree-node__content .custom-tree-node-label.el-link .el-link--inner{
  color: #ff7b00;
}
.el-link.el-link--default {color: #000;}
//隐藏下划线
.el-link.is-underline:hover:after {display: none;}


/deep/ .el-tree-node__content:hover, .el-upload-list__item:hover {
  background: #fff;
}

/deep/ .el-tree-node:focus > .el-tree-node__content {
  background: #fff;
}

.el-dropdown-menu__item:focus, .el-dropdown-menu__item:hover:not(.is-disabled) {
  color: #fff;
  background-color: #ff7b00
}

.el-scrollbar__wrap {
  margin-right: -17PX;
  margin-bottom: -17PX;
  height: 837px;
}

.infoName {
  font-size: 18PX;
  margin-top: 16PX;
  margin-bottom: 20PX;
  color: rgba(0, 0, 0, .9);
  font-weight: 700;
  background-color: #fff
}

.el-tree-scrollbar__wrap, .tree-scrollbar-wrap {
  max-height: calc(100vh - 115PX)
}

/deep/ .is-current.is-current .el-tree-node__content .custom-tree-node-label.el-link .el-link--inner {
  max-width: 145px;overflow: hidden;text-overflow: ellipsis;
}

//文字以...展示
/deep/ .el-tree-node__content .custom-tree-node-label.el-link .el-link--inner {
  max-width: 145px;overflow: hidden;text-overflow: ellipsis;
}

//树节点文字悬浮变色
/deep/ .el-tree-node__content:hover .custom-tree-node-label.el-link .el-link--inner {
  color: #ff7b00
}
/deep/ .el-tree-node__content:hover .custom-tree-node .custom-tree-node-name {
  color: #ff7b00
}

.treeNotLeaf {
  font-weight: 700;
  font-size: 16PX;
}

.pageContent {
  padding: 32PX 49PX;
  border-left: 1PX solid #e0e0e0;
  height: auto;
  min-height: calc(100vh - 320PX);
  z-index: 20;
  position: relative;
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
}

.pageContent .header {
  font-family: MicrosoftYaHeiUI-Bold;
  font-size: 22PX;
  color: rgba(0, 0, 0, .9);
  letter-spacing: 2PX;
  line-height: 32PX
}

.pageContent .detail {
  margin: 17PX 0;
  font-family: MicrosoftYaHeiUI;
  font-size: 14PX;
  letter-spacing: 0;
  line-height: 18PX;
  display: flex;
  align-items: center
}

.pageContent .detail .time-title {
  color: rgba(0, 0, 0, .7)
}

.pageContent .detail .time {
  color: rgba(0, 0, 0, .4)
}

.pageContent .line {
  width: 948PX;
  height: 1PX;
  background: rgba(0, 0, 0, .12);
  margin-bottom: 12PX
}

.pageContent .common, .pageContent .title {
  font-family: MicrosoftYaHeiUI-Bold;
  font-size: 18PX;
  color: rgba(0, 0, 0, .9);
  letter-spacing: 0
}

.pageContent .title {
  margin-bottom: 32PX
}

.pageContent .chapters {
  font-family: MicrosoftYaHeiUI-Bold;
  font-size: 18PX;
  color: rgba(0, 0, 0, .9);
  letter-spacing: 0;
  margin-bottom: 13PX
}

.pageContent .content {
  font-family: MicrosoftYaHeiUI;
  font-size: 14PX;
  color: rgba(0, 0, 0, .9);
  letter-spacing: 0;
  line-height: 30PX;
  margin-bottom: 32PX
}

.pageContent .noData {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
  width: 100%
}

.pageContent .noData .noDataIcon {
  width: 128PX;
  height: 128PX
}

.pageContent .noData .noDataInfo {
  text-align: center
}

.pageContent .noData .noDataInfo .noDataTitle {
  font-size: 14PX;
  color: rgba(0, 0, 0, .4)
}

.pageAction {
  justify-content: space-between;
  padding: 12PX 0
}

.pageAction, .pageAction .pageActionLeft {
  display: flex;
  align-items: center
}

.pageAction .pageActionLeft .pageActionTotal {
  font-size: 14PX;
  color: rgba(0, 0, 0, .4)
}

.el-dropdown-link {
  border: none;
  color: #4d4d4d;
}

.el-dropdown-link:hover {
  border: 1px solid #DCDFE6;
}

/deep/ .el-dropdown-menu__item {
  padding: 0 20px;
  margin: 0;
  color: #4d4d4d;
  cursor: pointer;
  font-size: 14px !important;
  line-height: 36px !important;
  list-style: none;
  outline: none
}

/deep/ .el-popper .el-popper__arrow {
  //display: none;
}

.pageAction .elSearch {
  width: 308PX;
  position: relative;
}

.pageAction .elSearch .el-input__inner {
  border-radius: 16PX;
  padding-left: 14PX
}

.searchBtn.el-button:hover:not(.is-disabled) {
  border-color: #ff8819;
  background: #ff8819!important;
  color: #fff
}

.searchBtn.el-button:active:not(.is-disabled) {
  border-color: #ccc;
  background: #e0e0e0;
  color: #4d4d4d
}

/deep/ .el-button:focus, .el-button:hover {
  color: #FF7B00;
  border-color: #ffd7b3;
  background-color: transparent !important;
}

.elCard:hover {
  box-shadow: 0 1PX 4PX 0 rgba(0, 0, 0, .02), 0 16PX 32PX 0 rgba(0, 0, 0, .16)
}

.video {
  cursor: pointer
}

.video .videoImg {
  position: relative;
  height: 231PX
}

.video .videoImg .videoPoster {
  width: 100%;
  height: 231PX
}

.video .videoImg .videoPlay {
  width: 72PX;
  height: 72PX;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

.video .videoInfo .videoTitle {
  font-size: 16PX;
  color: rgba(0, 0, 0, .9);
  line-height: 1.5em;
  display: flex;
  padding: 12PX 16PX 4PX;
  position: relative;
  font-weight: 700;
  min-height: 64PX
}

.video .videoInfo .videoTitle:before {
  content: "";
  width: 2PX;
  height: 18PX;
  position: absolute;
  left: 0;
  top: 15PX
}

.video .videoInfo .videoTags {
  padding: 0 0 12PX;
  margin: 0 16PX;
  white-space: nowrap;
  overflow: hidden;
  position: relative
}

.video .videoInfo .videoTags .videoMask {
  position: absolute;
  right: 0;
  top: 0;
  height: 18PX;
  width: 32PX;
  background-image: linear-gradient(90deg, hsla(0, 0%, 100%, 0), #fff)
}

.video .videoInfo .videoTags span {
  font-size: 12PX;
  color: rgba(0, 0, 0, .4);
  line-height: 1.5em
}

.video .videoInfo .videoTags span:not(:last-child) {
  margin-right: 8PX
}

.video .videoInfo .videoTags .tag1:before {
  content: "";
  display: inline-block;
  margin-bottom: 1PX;
  width: 6PX;
  height: 6PX;
  border: 1PX solid rgba(0, 0, 0, .4);
  border-radius: 50%;
  margin-right: 3PX
}

.video .videoInfo .videoTags .tag2:before {
  content: "#";
  margin-right: 3PX
}

.line {
  border-top: none;
}

.videoBox {
  position: relative;width: 720px;height: 405px;background: #4d4d4d;border-radius: 10px;overflow:hidden;
  &-img {
    width: 100%;height:100%;
  }
  &-mask {
    position: absolute;top: 0;bottom: 0;left: 0;right: 0;width: 100%;height: 100%;background: rgba(0,0,0,.25);z-index: 1;
  }
  &-icon {
    position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);z-index: 10;font-size: 86px;color: #eee;
  }
}

.header {
  height: 260PX;
  background: #fafafa url(/img/help/bg.png) 50%/cover;
  background-repeat: no-repeat;
}

.header .search {
  width: 520PX;
  margin: 0 auto;
  padding: 32PX 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.header .search .searchTitle {
  font-size: 28PX;
  color: rgba(0, 0, 0, .9);
  line-height: 42PX;
  margin-bottom: 24PX
}

.content {
  max-height: 100%;
}

.searchInput {
  width: 100%;
  display: flex
}

.searchInput .el-autocomplete {
  width: calc(100% - 120PX)
}

.searchInput .el-input__inner {
  height: 40PX;
  border-top-left-radius: 40PX;
  border-bottom-left-radius: 40PX;
  padding-left: 20PX
}

/deep/ .el-autocomplete.el-input .el-input__inner {
  border-radius: 40px 0 0 40px;
}
/deep/ .searchInput .el-autocomplete .el-input .el-input__inner {
  border-radius: 40px 0 0 40px;
}
.searchInput .h-icon-close_f.is-clickable {
  top: 8PX
}

.searchInput .el-button {
  width: 120PX;
  height: 40PX;
  border-top-right-radius: 40PX;
  border-bottom-right-radius: 40PX
}

.el-tag {
  background: transparent;
  border-color: transparent;
  color: #000;
}

/deep/ .el-autocomplete-suggestion li.highlighted, .el-autocomplete-suggestion li:hover .el-tag {
  color: #ff7b00!important;
}

.action.themeAction {
  margin-bottom: 121PX;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  font-size: 16PX;
  color: #ff7b00;
  line-height: 24PX;
  padding-top: 15PX
}

.action.themeAction, .action.themeAction .actin-tips {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-family: MicrosoftYaHeiUI;
  letter-spacing: 0;
  height: 56PX
}

.action.themeAction .actin-tips {
  background: #f7f8fa;
  font-size: 14PX;
  color: rgba(0, 0, 0, .7);
  width: 580PX;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center
}

.action.themeAction .actin-tips .feedback {
  font-size: 24PX;
  margin-right: 16PX;
  color: #02bf0f;
}

.action.themeAction .action-btn {
  border: 1px solid #ff7b00;
  border-radius: 20PX;
  width: 160PX;
  height: 40PX;
  margin-right: 24PX;
  line-height: 40PX;
  text-align: center;
  display: inline-block;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  cursor: pointer;
}

.action.themeAction .action-btn .icon-wrapper {
  margin-right: 11PX
}

.action.themeAction .action-btn .h-svg-icon svg path {
  fill: #ff7b00
}

.action.themeAction .action-btn:hover {
  background: #ff7b00;
  color: #fff;

  .actionIcon {
    filter: grayscale(1) brightness(3);
  }
}

.action.themeAction .action-btn:hover .h-svg-icon svg path {
  fill: #fff
}

.actionIcon {
  display: block;
  background-size: cover;
  width: 20px;
  height: 20px;
}

.action-btn.useful {
  background: #ff7b00;
  color: #fff;

  .actionIcon {
    filter: grayscale(1) brightness(3);
  }
}

.toTop {
  background: #fff;
  border: 1PX solid #f1f1f1;
  box-shadow: 0 4PX 8PX 0 rgba(0, 0, 0, .1);
  align-items: center;
  justify-content: center;
  height: 48PX;
  width: 48PX;
  border-radius: 50%;
  z-index: 80;
  position: fixed;
  right: 24PX;
  bottom: 72PX;
  display: flex;
  flex-direction: column
}

.toTop i {
  font-size: 24PX;
  cursor: pointer
}

.toTop i:not(:last-child) {
  margin-bottom: 16PX
}

.toTop i {
  fill: rgba(0, 0, 0, .7)
}

.toTop i:hover {
  fill: #ff7b00
}

.videoList .videoTitle:before {
  background-color: #1990ff
}

.v-html /deep/ p {
  width: 100%;
}

.v-html /deep/ img {
  width: auto;
  max-width: 100%;
}

.ql-editor {
  padding: 0;
}

.markdown-body {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  line-height: 1.5;
  color: #24292e;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 16px;
  line-height: 1.5;
  word-wrap: break-word;
}

.markdown-body img {
  max-width: 100%;
  box-sizing: content-box;
  background-color: #fff;
}

.markdown-body img[align=right] {
  padding-left: 20px;
}

.markdown-body img[align=left] {
  padding-right: 20px;
}

/deep/ .el-tree-node__content {
  height: 40px;
}

.icon {
  color: #FF7B00FF;
}

/deep/ .el-tree-node__label {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.v-html_conentz {
  /* 隐藏滚动条 */
  box-sizing: border-box;
  max-height: 500px;
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.over {
  /* 隐藏滚动条 */
  box-sizing: border-box;
  max-height: 630px;
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
.over::-webkit-scrollbar {
  width: 6px; /*滚动条宽度*/
  height: 8px; /*滚动条高度*/
  background-color: white;
}

/*定义滑块 内阴影+圆角*/
.over::-webkit-scrollbar-thumb {
  -webkit-box-shadow: inset 0 0 0 white;
  background-color: #c7c9ce; /*滚动条的背景颜色*/
  border-radius: 30px;
}

.v-html_conent /deep/ p {
  width: 100%;
}

.v-html_conent /deep/ img {
  display: none;
}

.v-html_helpcontent /deep/ p {
  width: 100%;
}

.v-html_helpcontent /deep/ img {
  max-width: 900px;
  height: auto;
  display: inherit;
  margin-top: 10px;
  margin-bottom: 10px;
}