<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 class="flex-center">
            <img src="@/assets/ewm.jpg" alt="">
          </span>
          <span class="flex-center">
            支付宝小程序码
          </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>
import { getDeviceByCode } from "../api/resultApi";

export default {
  name: "device",
  data() {
    return {
      appSrc:''
    };
  },
  created() {
    if (this.cite.facility === "") {
      this.getDeviceByCode();
    }
    // this.creatQrCode();
  },
  methods: {
    skip(href, name) {
      this.$router.push({
        name: href,
        params: {
          name: name,
        },
      });
    },
    getDeviceByCode() {
      getDeviceByCode({ code: "sbbh" }).then((res) => {
        this.cite.facility = res.data;
      });
    },
  },
};
</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: 0.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: 0.88rem;
    }
  }
  .main4 {
    display: inline-block;
    width: 100%;
    height: 44.38rem;
    .css1();
    font-size: 1.88rem;
    font-weight: 400;
    color: #323232;
    line-height: 2rem;
    margin-bottom: 1.88rem;
    span {
      width: 18rem;
      height: 18rem;
      background: #ffffff;
      border: 0.06rem solid #707070;
      margin: 1rem auto 0;
      img {
        width: 100%;
        margin: 0;
      }
    }
    div {
      margin-top: 1rem;
    }
    img {
      width: 2.31rem;
      margin-right: 1.19rem;
    }
  }
}
</style>