<template>
  <div class="device flex-center">
<!--    左边-->
    <div class="box">
      <div class="main icon1">
        <img src="../assets/demo1.png" />
        <div class="flex-center">天章自助打印</div>
      </div>
      <div class="main icon3" @click="skip('operationGuide','扫描复印')">
        <img src="../assets/demo3.png" />
        <div class="flex-center">扫描复印</div>
      </div>
      <div class="main2 flex-center" @click="skip('explain','使用教程')">
        <img src="../assets/demo6.png" />使用教程
      </div>
    </div>
<!--    中间-->
    <div class="box">
      <div class="main icon2" @click="skip('operationGuide','U盘打印')">
        <img src="../assets/demo2.png" />
        <div class="flex-center">U盘打印</div>
      </div>
      <div class="main icon4" @click="skip('operationGuide','身份证打印')">
        <img src="../assets/demo4.png" />
        <div class="flex-center">身份证打印</div>
      </div>
      <div class="main2 flex-center" @click="skip('explain','客服助手')">
        <img src="../assets/demo7.png" />客服助手
      </div>
    </div>
<!--    右边-->
    <div class="box2">
      <div class="main3 flex-center" @click="skip('explain','打印价格')">
        <img src="../assets/demo6.png" />打印价格
      </div>
      <div class="main4">
        <span></span>
        <div class="flex-center"><img src="../assets/demo9.png" />扫一扫马上打印</div>
      </div>
      <div class="main2 flex-center" @click="skip('explain','打印价格')">
        <img src="../assets/demo6.png" />打印价格
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "device",
  data() {
    return {

    }
  },
  methods: {
    skip(href,name) {
      this.$router.push({
        name: href,
        params: {
          name: name
        }
      })
    }
  },
}
</script>

<style scoped lang="less">
.device {
  margin-top: 2.5rem;
  .box {
    width: 37.5rem;
    margin-right: 1.88rem;
  }
  .box2 {
    width: 33rem;
  }
  .main {
    width: 100%;
    height: 21.25rem;
    border-radius: 1.63rem;
    font-size: 3.5rem;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 3.69rem;
    margin-bottom: 1.88rem;
    cursor: pointer;
    img {
      width: 17.69rem;
      margin-top: .69rem;
    }
  }
  .icon1 {
    background: linear-gradient(359deg, #3DBF51 0%, #47D1A9 100%);
    box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(120,229,217,0.45);
  }
  .icon2 {
    background: linear-gradient(180deg, #F2C952 0%, #DB572B 100%);
    box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(255,147,128,0.57);
  }
  .icon3 {
    background: linear-gradient(180deg, #84B2F7 0%, #8774D2 100%);
    box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(150,135,232,0.3);
  }
  .icon4 {
    background: linear-gradient(180deg, #5BE7FF 0%, #309FD8 100%);
    box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(104,202,253,0.42);
  }
  .css1 {
    background: #FFFFFF;
    box-shadow: 0rem 0.63rem 1.25rem 0.06rem rgba(0,0,0,0.14);
    border-radius: 1.63rem;
    cursor: pointer;
  }
  .main2 {
    width: 100%;
    height: 6.44rem;
    .css1();
    font-size: 1.88rem;
    font-weight: bold;
    color: #323232;
    line-height: 2.63rem;
    img {
      width: 3.75rem;
      margin-right: .38rem;
    }
  }
  .main3 {
    width: 100%;
    height: 9.94rem;
    .css1();
    font-size: 2.13rem;
    font-weight: bold;
    color: #323232;
    line-height: 3rem;
    img {
      width: 4.25rem;
      margin-right: .88rem;
    }
  }
  .main4 {
    width: 100%;
    height: 30.25rem;
    margin: 1.25rem auto;
    .css1();
    font-size: 1.88rem;
    font-weight: 400;
    color: #323232;
    line-height: 2rem;
    span {
      display: inline-block;
      width: 23.25rem;
      height: 22.88rem;
      background: #FFFFFF;
      border: 0.06rem solid #707070;
      margin: 1.44rem auto 0.5rem;
    }
    img {
      width: 2.31rem;
      margin-right: 1.19rem;
    }
  }
}
</style>