<template>
  <div class="device">
    <div class="box flex-between">
      <div class="left">
<!--        广告-->
        <div class="advertising icon1 flex-center">
<!--          <img src="../assets/demo1.png" />-->
          广告位招租
        </div>
<!--        功能-->
        <div class="feature flex-between">
          <div class="main icon2 flex-start" @click="skip('operationGuide','U盘打印')">
            <img src="../assets/demo2.png" />
            <div>U盘打印</div>
          </div>
          <div class="main icon3 flex-start" @click="skip('operationGuide','扫描打印')">
            <img src="../assets/demo3.png" />
            <div>扫描打印</div>
          </div>
          <div class="main icon4 flex-start" @click="skip('operationGuide','身份证打印')">
            <img src="../assets/demo4.png" />
            <div>身份证打印</div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="main4">
          <span></span>
          <span></span>
          <div class="flex-center"><img src="../assets/demo9.png" />扫一扫马上打印</div>
        </div>
      </div>
    </div>
    <div class="box2 flex-between">
      <div class="main2 flex-center" @click="skip('explain','使用教程')">
        <img src="../assets/demo6.png" />使用教程
      </div>
      <div class="main2 flex-center" @click="skip('explain','联系客服')">
        <img src="../assets/demo7.png" />联系客服
      </div>
      <div class="main2 flex-center" @click="skip('explain','打印价格')">
        <img src="../assets/demo5.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: 2.5rem 4.13rem 0;
  .box {
    .left {
      width: 76.88rem;
      .advertising {
        width: 100%;
        height: 32.5rem;
        border-radius: 1.63rem;
        margin-bottom: 1.88rem;
        cursor: pointer;
        overflow: hidden;
        font-size: 8rem;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 8rem;
        img {
          width: 40rem;
          margin-top: -5rem;
        }
      }
    }
    .right {
      width: 33rem;
    }
  }
  .main {
    width: 32%;
    height: 10rem;
    border-radius: 1.63rem;
    font-size: 1.8rem;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 1.8rem;
    margin-bottom: 1.88rem;
    cursor: pointer;
    img {
      width: 12rem;
      margin-top: -1rem;
    }
  }
  .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: 32%;
    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: 44.38rem;
    .css1();
    font-size: 1.88rem;
    font-weight: 400;
    color: #323232;
    line-height: 2rem;
    margin-bottom: 1.88rem;
    span {
      display: inline-block;
      width: 18rem;
      height: 18rem;
      background: #FFFFFF;
      border: 0.06rem solid #707070;
      margin: 1rem auto 0;
    }
    div {
      margin-top: 1rem;
    }
    img {
      width: 2.31rem;
      margin-right: 1.19rem;
    }
  }
}
</style>