han

hanfei / VueSharedPrinting

Browse code han master
1 parent d62347f commit 20486b99f98d7761855724fe9ebd2ddd75312def hanfei authored on 9 Jan 2024

Patch

Showing 1 changed file

Ignore Space Show notes View src/views/device.vue
<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> export default { name: "device", data() { return { appSrc:'' }; }, methods: { skip(href, name) { if(this.cite.memberLoginVo=='') { alert('请扫码登录再操作') return } 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: 49%; 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> <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> export default { name: "device", data() { return { appSrc:'' }; }, 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: 49%; 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>

Ignore Space Show notes View

src/views/device.vue

<template>
  <div class="device">
    <div class="box flex-between">
      <div class="left">
        
        <div class="advertising icon1 flex-center">
          
          广告位招租
        </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/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 {
      appSrc:''
    };
  },
  methods: {
    skip(href, name) {
      if(this.cite.memberLoginVo=='') {
        alert('请扫码登录再操作')
        return
      }
      this.$router.push({
        name: href,
        params: {
          name: name,
        },
      });
    },
  },
};
</script>

<template>
  <div class="device">
    <div class="box flex-between">
      <div class="left">
        
        <div class="advertising icon1 flex-center">
          
          广告位招租
        </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/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 {
      appSrc:''
    };
  },
  methods: {
    skip(href, name) {
      this.$router.push({
        name: href,
        params: {
          name: name,
        },
      });
    },
  },
};
</script>

Show line notes below