DWY_mobile/src/views/page/Home.vue

<template>
  <div>
    <div class="header">
      <div class="header_top">
        <Button
          type="primary"
          class="header_btn"
          ghost
          @click="handleShow"
          :icon="is_show ? 'ios-arrow-dropup' : 'ios-arrow-dropdown'"
        >
          <div style="margin-right: 0.6rem">
            {{ is_show ? "收起" : "展开" }}
          </div></Button
        >
        <div style="margin-right: 1rem; color: #66a9f0">王小伟</div>
      </div>
      <div class="header_middle">
        <b-dropdown size="sm" text="Large" class="m-2" :disabled="is_use">
          <b-dropdown-item-button>Action</b-dropdown-item-button>
          <b-dropdown-item-button>Another action</b-dropdown-item-button>
          <b-dropdown-item-button>Something else here</b-dropdown-item-button>
        </b-dropdown>
        <b-dropdown size="sm" text="Large" class="m-2" :disabled="is_use">
          <b-dropdown-item-button>Action</b-dropdown-item-button>
          <b-dropdown-item-button>Another action</b-dropdown-item-button>
          <b-dropdown-item-button>Something else here</b-dropdown-item-button>
        </b-dropdown>
        <b-dropdown size="sm" text="Large" class="m-2" :disabled="is_use">
          <b-dropdown-item-button>Action</b-dropdown-item-button>
          <b-dropdown-item-button>Another action</b-dropdown-item-button>
          <b-dropdown-item-button>Something else here</b-dropdown-item-button>
        </b-dropdown>
      </div>
      <div class="header_middle1 ot">
        <div class="ft">58 &nbsp;</div>
        <div class="ft">12 &nbsp;</div>
        <div class="ft">12 &nbsp;</div>
      </div>
      <div class="header_footer">
        <div style="margin-left: 1rem">已完成56/10</div>
        <div style="margin-right: 1.4rem">已完成10%</div>
      </div>
    </div>
    <div class="bdy">
      <div class="item" @click="handleFinish">
        <svg
          t="1688029854983"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="9681"
          width="130"
          height="130"
        >
          <path
            d="M713.728 415.936l-47.722667-42.794667 85.482667-85.482666-45.248-45.248-87.957333 87.936-47.701334-42.794667 90.389334-90.389333a64 64 0 0 1 90.517333 0l45.248 45.226666a64 64 0 0 1 0 90.538667l-83.008 82.986667zM505.6 624.064L283.861333 845.802667a64 64 0 0 1-90.517333 0l-45.248-45.248a64 64 0 0 1 0-90.517334l235.456-235.456-58.282667-71.424a64 64 0 0 1 4.266667-85.76l99.136-99.114666c23.253333-23.253333 64.832-20.608 90.282667 0.213333l338.133333 265.28c30.4 30.4 21.909333 110.826667-61.866667 194.581333-83.477333 83.498667-164.181333 92.245333-194.581333 61.866667-0.597333-0.597333-32.277333-39.317333-95.04-116.16z m-81.365333-99.669333L193.344 755.306667l45.248 45.226666 226.325333-226.304-40.682666-49.834666z m55.210666-255.530667l-1.024-0.832a12.629333 12.629333 0 0 0-6.826666-2.176l-96.789334 96.789333c105.088 128.746667 249.088 305.002667 268.821334 329.472 4.288 0.426667 10.624-0.085333 18.496-2.133333 25.429333-6.506667 56.405333-25.408 87.850666-56.874667 31.573333-31.573333 50.496-62.528 56.981334-87.893333 1.92-7.466667 2.474667-13.504 2.133333-17.749333L479.445333 268.864z"
            fill="#5499fe"
            p-id="9682"
          ></path>
        </svg>
        <div class="ft_by">完工</div>
      </div>
      <div class="item" @click="handleDispatch">
        <svg
          t="1688030012912"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="10881"
          width="130"
          height="130"
        >
          <path
            d="M968.9 351.8l-57.5-52.2c-31-28.1-71.1-43.6-112.9-43.6L640 256l0-80.5c0-62-50.5-112.5-112.5-112.5l-415 0c-62 0-112.5 50.5-112.5 112.5l0 720.5 128 0c0 70.6 57.4 128 128 128s128-57.4 128-128l192 0 64 0c0 70.6 57.4 128 128 128s128-57.4 128-128l128 0L1024 476.2C1024 428.9 1003.9 383.6 968.9 351.8zM925.9 399.2c21.7 19.7 34.1 47.7 34.1 77l0 99.8-128 0L832 325.5c13.3 4.5 25.7 11.8 36.4 21.5L925.9 399.2zM256 960c-35.3 0-64-28.7-64-64s28.7-64 64-64 64 28.7 64 64S291.3 960 256 960zM576 832 366.8 832c-22.2-38.2-63.5-64-110.8-64s-88.7 25.8-110.8 64L64 832l0-656.5c0-26.7 21.8-48.5 48.5-48.5l415 0c26.7 0 48.5 21.8 48.5 48.5l0 80.5L576 832zM768 960c-35.3 0-64-28.7-64-64s28.7-64 64-64 64 28.7 64 64S803.3 960 768 960zM878.8 832c-22.2-38.2-63.5-64-110.8-64s-88.7 25.8-110.8 64L640 832l0-512 128 0 0 320 192 0 0 192L878.8 832z"
            p-id="10882"
            fill="#d57952"
          ></path>
        </svg>
        <div class="ft_by">发货</div>
      </div>
       <div class="item" @click="handleInventory">
        <svg
          t="1688030140909"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="12365"
          width="130"
          height="130"
        >
          <path
            d="M908.31 487.83l-363.3-371.72c-24.92-25.5-65.43-25.5-90.35 0l-3.51 3.6c-21.42 21.91-24.42 55.58-9.03 80.8L337.49 307.58c-7.84 8.02-7.84 21.08 0 29.1 3.92 4.02 9.04 6.06 14.17 6.06 5.13 0 10.25-1.95 14.27-5.96l103.46-105.95 189.89 194.48v176.55c0 28.04 19.63 51.5 45.54 56.85l-191.16 195.6c-19.9 20.36-46.33 31.57-74.47 31.57s-54.57-11.21-74.47-31.57l-177.88-182c-41.1-41.95-41.1-110.33 0-152.4l11.86-12.13c7.83-8.03 7.83-21.08 0-29.1a19.816 19.816 0 0 0-28.44 0l-11.86 12.13c-56.78 58.1-56.78 152.49 0 210.59l177.88 182.01c27.53 28.08 64.01 43.6 102.91 43.6s75.37-15.42 102.91-43.6l189.34-193.73v4.01c0 16.86 6.33 32.6 17.99 44.52 11.56 11.82 27.04 18.41 43.52 18.41 16.49 0 31.86-6.59 43.52-18.41 11.55-11.93 17.99-27.76 17.99-44.52V602.9c18.19 1.43 36.68-5.04 50.35-19.03l3.52-3.6c24.9-25.5 24.9-66.93-0.02-92.44z m-28.54 63.34l-3.52 3.6c-8.14 8.33-20.91 9.46-30.35 2.67-6.13-4.42-14.17-4.93-20.8-1.43a20.816 20.816 0 0 0-10.86 18.3v119.38c0 5.87-2.21 11.31-6.23 15.43-4.02 4.11-9.35 6.38-15.08 6.38s-11.05-2.26-15.08-6.48c-4.02-4.11-6.23-9.57-6.23-15.42V641c0.03-0.69 0.03-1.37 0-2.06v-27.81c0-10.28-7.54-19.03-17.59-20.36-10.05-1.33-19.49 5.24-22.01 15.22-0.7 2.88-2.2 5.56-4.32 7.71-3.11 3.19-7.24 4.94-11.66 4.94-9.04 0-16.48-7.51-16.48-16.86v-185.1c0-5.45-2.11-10.59-5.93-14.49L484.62 188.3c-0.32-0.38-0.65-0.77-1-1.13-0.35-0.36-0.73-0.69-1.1-1.02l-2.92-2.99c-9.24-9.46-9.24-24.88 0-34.34l3.52-3.6a23.402 23.402 0 0 1 33.57 0l363.09 371.62c9.23 9.45 9.23 24.88-0.01 34.33z m-380.38-120.4c11.15 0 20.1-9.25 20.1-20.56 0-11.31-9.04-20.57-20.1-20.57H117.11c-11.06 0-20.11 9.25-20.11 20.57 0 11.31 9.05 20.56 20.11 20.56h382.28z"
            fill="#a8a343"
            p-id="12366"
          ></path>
        </svg>
        <div class="ft_by">盘点</div>
      </div>
      <div class="item" @click="handlePackage">
        <svg
          t="1688182715452"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2523"
          id="mx_n_1688182715453"
          width="130"
          height="130"
        >
          <path
            d="M913.28 231.296L549.28 14.208a72.544 72.544 0 0 0-74.56-0.032L110.72 231.296a73.024 73.024 0 0 0-35.488 62.432v436.544a73.056 73.056 0 0 0 35.488 62.464l364.032 217.12a72.704 72.704 0 0 0 74.496 0l364.032-217.12a73.024 73.024 0 0 0 35.488-62.464V293.728a73.056 73.056 0 0 0-35.488-62.432zM507.52 69.12a8.736 8.736 0 0 1 8.96 0l343.36 204.8-143.04 82.592-344.096-206.944z m1.92 407.104L161.696 275.424l148.672-88.672 343.104 206.336zM143.52 737.76a8.768 8.768 0 0 1-4.256-7.488V336.384l340.48 196.576v405.344z m737.024 0L543.68 938.624V530.368L884.8 333.44v396.832a8.736 8.736 0 0 1-4.256 7.488z"
            fill="#58b125"
            p-id="2524"
          ></path>
          <path
            d="M767.072 483.04l-95.744 55.296a32 32 0 0 0 32 55.424l95.744-55.296a32 32 0 1 0-32-55.424z"
            fill="#58b125"
            p-id="2525"
          ></path>
        </svg>
        <div class="ft_by">包装</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      is_show: true,
      is_use: false
    }
  },
  mounted () {
    console.log(123)
  },
  methods: {
    handleInventory () {
      this.$router.push('/cms/inventory/index')
    },
    handleFinish () {
      this.$router.push('/cms/finish/detail')
    },
    handlePackage () {
      this.$router.push('/cms/Package/index')
    },
    handleDispatch () {
      this.$router.push('/cms/finish')
    },
    handleShow () {
      this.is_show = !this.is_show
      console.log(document.getElementsByClassName('header'))
      if (this.is_show) {
        document.getElementsByClassName('header')[0].style = 'height:7rem;overflow:hidden;transition:all .4s;'
        setTimeout(() => {
          document.getElementsByClassName('header')[0].style = 'overflow:none;'
          this.is_use = false;
        }, 400)
      } else {
        this.is_use = true;
        document.getElementsByClassName('header')[0].style = 'height:2.7rem;overflow:hidden;transition:all .4s;'
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.header {
  width: 94%;
  height: 7rem;
  // overflow: hidden;
  // transition: all 0.4s;
  position: relative;
  top: 0.5rem;
  left: 3%;
  box-shadow: 0.16rem 0.1rem 0.1rem 0.1rem #9d9b9b;
  border-radius: 1rem;
  padding: 0.4rem 0.7rem 0 1rem;
  background: #fff;
}
.header_btn {
  border-radius: 1rem;
  padding: 0.1rem;
  width: 5rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.header_top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ot {
  position: relative;
  top: -1.3rem;
}
.header_middle1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .ft {
    font-size: 1.5rem;
    width: 5rem;
    text-align: center;
  }
}
.header_middle {
  position: relative;
  top: -0.3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/deep/ .btn-group > .btn,
.btn-group-vertical > .btn {
  background: #ffffff;
  color: #2c3e50;
  outline: none;
  border: none;
  margin: 0;
  z-index: 3;
}
.header_footer {
  position: relative;
  top: -1.7rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  div {
    font-size: 0.5rem;
    color: rgb(244, 136, 42);
  }
}
.bdy {
  display: flex;
  flex-wrap: wrap;
  width: 94%;
  position: relative;
  top: 1.4rem;
  left: 3%;
  height: 24rem;
  .item {
    width: 46%;
    margin: 2%;
    text-align: center;
    height: 45%;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0.16rem 0.1rem 0.1rem 0.1rem #9d9b9b;
  }
}
.ft_by {
  position: relative;
  top: 0.5rem;
  font-size: 1.4rem;
}
</style>