U 产品详情 隐藏侧栏

he wei

2022-11-04 fd9d798a54a02bb1110e5ddc82c9639052a7359c

U 产品详情 隐藏侧栏

 src/pages/resourceManage/product/details/details.vue

@@ -1,14 +1,19 @@
<template>
  <a-layout class="main">
    <a-layout-sider width="260">
      <list
        class="list"
        :list="versionList"
        @select="selectChanged"
        @diff="diff"
      ></list>
    </a-layout-sider>
    <a-layout>
  <div class="main">
    <div :class="['side-content', { hide: !sideVisible }]">
      <div class="side-inner">
        <list
          class="list"
          :list="versionList"
          @select="selectChanged"
          @diff="diff"
        ></list>
        <div class="handler" :title="sideVisible ? '隐藏' : '展开'" @click="toggleSide">
          <a-icon class="icon" type="left" />
        </div>
      </div>
    </div>
    <a-layout class="main-content">
      <a-layout-header>
        <a-card size="small">
          <a-descriptions :column="4" title="">
@@ -50,7 +55,7 @@
                  "
                >
                  <template slot="dataIndex" slot-scope="text, record, index">
                    {{index+1}}
                    {{ index + 1 }}
                  </template>
                  <template slot="pictureUrl" slot-scope="text">
                    <div class="img-wraper">
@@ -298,7 +303,7 @@
        <a-empty v-else />
      </div>
    </a-modal>
  </a-layout>
  </div>
</template>

<script>
@@ -321,13 +326,14 @@
import { downloadLog } from "@/pages/system/logs/apis";
import { mapGetters } from "vuex";
import createWs from "@/assets/js/websocket";
import bg from 'date-fns/locale/bg/index';

const WSMixin = createWs("version");
export default {
  name: "",
  mixins: [WSMixin],
  data() {
    return {
      sideVisible: true,
      logVisible: false,
      logList: [],
      lockListVisible: false,
@@ -840,6 +846,9 @@
    logCancel() {
      this.logVisible = false;
    },
    toggleSide() {
      this.sideVisible = !this.sideVisible;
    },
  },
  mounted() {
    this.sendMessage();
@@ -855,6 +864,48 @@
<style scoped lang="less">
.main {
  height: 100%;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  .side-content {
    position: relative;
    transition: width 0.5s ease;
    width: 200px;
    z-index: 1;
    .side-inner {
      height: 100%;
      width: 200px;
      position: absolute;
      top: 0;
      right: 0;
      /deep/.ant-card-body {
        padding: 10px;
      }
    }
    .handler {
      position: absolute;
      left: 100%;
      top: 50%;
      width: 14px;
      height: 20px;
      background: #ccc;
      color: #aaa;
      transform: translate(0, -50%);
      .icon {
        transition: transform 0.3s ease;
        transition-delay: 0.2;
      }
    }
    &.hide {
      width: 0;
      .handler .icon {
        transform: rotate(180deg);
      }
    }
  }
  .main-content {
    flex: 1;
  }
  .ant-layout-header,
  .ant-layout-sider {
    background: transparent;
@@ -879,6 +930,9 @@
  /deep/.ant-layout {
    margin-left: 10px;
  }
  /deep/.hide + .ant-layout {
    margin-left: 0;
  }
  .ant-layout-header {
    padding: 0;
    line-height: inherit;