xiaoshi_system/src/views/project/patentDetails/components/menu.vue

<template>
  <div class="height_100 article_menu">
     <!-- 展开后 -->
     <div v-if="!isContract" style="width: 300px;height: 100%;">
        <el-container>
          <el-header
            style="width: 100%;display: flex;justify-content: space-evenly; align-items: center; height: 50px;line-height: 50px;">
            <el-popover ref="heightPopover" placement="bottom" title="高亮" width="320" trigger="click">
              <patent-keywords-highlight :project-id="projectId" />
            </el-popover>
            <el-tooltip content="返回专题库专利清单" placement="top">
              <el-button size="small" @click="handleClick"><i class="iconfont icon-fanhui"></i></el-button>
            </el-tooltip>
            <el-tooltip :content="isRight ? '设置菜单栏为左侧' : '设置菜单栏为右侧'" placement="top">
              <el-button size="small" class="articles-Loop" @click="isRight = !isRight">
                <i class="iconfont icon-shezhi2"></i>
              </el-button>
            </el-tooltip>
            <el-tooltip content="设定高亮关键词" placement="top">
              <el-button v-popover:heightPopover size="small"><i class="iconfont icon-wodegaoliang"></i></el-button>
            </el-tooltip>
            <el-tooltip content="对比" placement="top">
              <el-button size="small" @click="value = !value">
                <i v-if="!value" class="iconfont icon-duibi"></i>
                <i v-else class="iconfont icon-duibi1"></i>
              </el-button>
            </el-tooltip>
            <el-tooltip content="收缩" placement="top">
              <el-button size="small" @click="isContract = !isContract">
                <i class="iconfont icon-shousuo"></i></el-button>
            </el-tooltip>
          </el-header>
          <el-main style="background: #FFFFFF;">
            <!-- <PatentLeft></PatentLeft> -->
          </el-main>
          <el-footer style="text-align: center;">
            <el-pagination background layout=" prev, pager, next" :current-page.sync="queryParams.current"
              :page-size.sync="queryParams.size" @current-change="handleCurrentChange" :total="total">
            </el-pagination>
          </el-footer>
        </el-container>
      </div>
      <!-- 收缩后 -->
      <div v-else class="articles-Loop-div">
        <el-tooltip content="返回专题库专利清单" placement="right">
          <div class="articles-Loop">
            <i class="iconfont icon-fanhui"></i>
          </div>
        </el-tooltip>
        <el-tooltip :content="isRight ? '设置菜单栏为左侧' : '设置菜单栏为右侧'" placement="right-end">
          <div class="articles-Loop" @click="isRight = !isRight">
            <i class="iconfont icon-shezhi2"></i>
          </div>
        </el-tooltip>
        <el-tooltip content="展开" placement="right">
          <div class="articles-Loop" @click="isContract = !isContract">
            <i class="iconfont icon-zhankai"></i>
          </div>
        </el-tooltip>
        <el-tooltip content="设定高亮关键词" placement="right-end">
          <el-popover placement="right" title="关键词高亮" width="320" trigger="click" style="margin-top:20px">
            <patent-keywords-highlight :project-id="projectId" />
            <div class="articles-Loop" slot="reference" style="">
              <i class="iconfont icon-wodegaoliang"></i>
            </div>
          </el-popover>
        </el-tooltip>
        <el-tooltip content="对比" placement="right-end">
          <div class="articles-Loop" @click="value = !value" :style="{ background: value ? '#9cb2e5' : 'white' }">
            <i v-if="!value" class="iconfont icon-duibi"></i>
            <i v-else class="iconfont icon-duibi1"></i>
          </div>
        </el-tooltip>
        <el-tooltip placement="right-end">
          <template slot="content">
            <div>点击查看上一篇专利</div>
            <div>专利：CN202210250237</div>
            <div>数量：1</div>
          </template>
          <div class="articles-Loop">
            <i class="el-icon-arrow-up"></i>
          </div>
        </el-tooltip>
        <el-tooltip placement="right-end">
          <template slot="content">
            <div>点击查看下一篇专利</div>
            <div>专利：CN202210250237</div>
            <div>数量：1</div>
          </template>
          <div class="articles-Loop" style="">
            <i class="el-icon-arrow-down"></i>
          </div>
        </el-tooltip>
      </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
        value:false,//对比
        isRight:false,//是否在右侧
        isContract:false,//是否收缩
        queryParams:{
            current:1,
            size:10,
        },
        total:0
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {},
  methods: {
    //分页
    handleCurrentChange(val){
        this.queryParams.current = val
    }
  },
};
</script>
<style lang="scss" scoped>
.articles_menu{
.articles-Loop-div {
    width: 51px;
    height: 100%;
    background: #fff;
    text-align: center;

    .articles-Loop {
      height: 50px;
      line-height: 50px;
      border-bottom: 1px solid #ccc;
      background: #fff;
      // border-bottom: none;
      cursor: pointer;
    }

    .articles-Loop:hover {
      background: #cdd7eb !important;
    }

    .articles-Loop-number {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

  }
}

</style>