U 首页最新动态可以展开 收起

he wei

2024-01-04 8fd73a492d756d3e99388d565484d45168a34792

U 首页最新动态可以展开 收起

 public/index.html

@@ -15,7 +15,7 @@
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="popContainer" class="beauty-scroll" style="height: 100vh; overflow-y: scroll">
    <div id="popContainer" class="beauty-scroll" style="height: 100vh; /*overflow-y: scroll*/">
      <div id="app"></div>
    </div>
    <!-- require cdn assets js -->

 src/pages/workplace/WorkPlace.vue

@@ -3,7 +3,11 @@
        <div class="work-place-container">
            <div class="work-place">
                <a-row :gutter="18" class="work-place-top">
                    <a-col :span="item.span" v-for="(item, key) in totals" :key="'key' + key">
          <a-col
            :span="item.span"
            v-for="(item, key) in totals"
            :key="'key' + key"
          >
                        <total-card
                            :info="item"
                            :type="item.type"
@@ -14,7 +18,11 @@
                    </a-col>
                </a-row>
                <div style="margin-top: 8px">
                    <my-draw :is-show="'my' == cardName" :y="y" @resize="resize"></my-draw>
          <my-draw
            :is-show="'my' == cardName"
            :y="y"
            @resize="resize"
          ></my-draw>
                    <not-approved
                        :is-show="'approving' == cardName"
                        :y="y"
@@ -57,8 +65,13 @@
                </div>
            </div>
        </div>
        <div class="log-wrapper">
    <div class="log-contain" :style="logStyle">
      <div :class="['log-btn', {active: logVisible}]" @click="toggleLog">
        {{ logVisible ? "折叠动态" : "展开动态" }}
      </div>
      <div class="log-wrapper" v-show="logVisible">
            <today-log></today-log>
      </div>
        </div>
    </div>
</template>
@@ -96,6 +109,7 @@
  mixins: [WSMixin],
  data() {
    return {
      logVisible: false,
      loading: false,
      update: -1,
      y: 400,
@@ -109,8 +123,8 @@
    update(n) {
      if (-1 != n && !this._inactive) {
        const bar = document.querySelectorAll(".header-bar")[0].clientHeight;
        const workPlaceTop =
          document.querySelectorAll(".work-place-top")[0].clientHeight;
        const workPlaceTop = document.querySelectorAll(".work-place-top")[0]
          .clientHeight;
        this.y = this.minHeight - bar - workPlaceTop - 56;
      }
    },
@@ -187,10 +201,24 @@
    activeFN() {
      this.resize();
    },
    toggleLog() {
      console.log(1122);
      this.logVisible = !this.logVisible;
      let cardName = this.cardName;
      this.cardName = "";
      this.$nextTick(() => {
        this.cardName = cardName;
      });
    },
  },
  computed: {
    ...mapGetters("account", ["roles", "roleList", "departmentList"]),
    ...mapGetters("setting", ["affixed", "minHeight"]),
    logStyle() {
      return {
        width: this.logVisible ? "450px" : 0,
      };
    },
  },
  mounted() {
    let role = getItemByKey(this.roles[0].id, this.roleList);
@@ -216,6 +244,33 @@
    right: 0;
    bottom: 0;
}
.log-contain {
  /* width: 450px; */
  position: relative;
  transition: all 0.3s;
}
.log-btn {
  /* z-index: 1; */
  position: absolute;
  top: 0;
  left: 24px;
  width: 100px;
  height: 40px;
  line-height: 40px;
  color: #ffffff;
  padding-left: 20px;
  border-radius: 20px 0 0 20px;
  cursor: pointer;
  background: #090;
  transition: all 0.3s;
  transform: translate(-20px, 0);
}
.log-btn.active {
  transform: translate(-40px, 0);
}
.log-btn:hover {
  transform: translate(-100%, 0);
}
.log-wrapper {
    width: 450px;
    height: 100%;