|
|
@@ -0,0 +1,91 @@
|
|
|
+<template>
|
|
|
+ <div class="tools-wrap">
|
|
|
+ <a-row :gutter="[20, 20]">
|
|
|
+ <a-col :span="10">
|
|
|
+ <div class="wrap new">
|
|
|
+ <img src="../../../assets/payments/pingpong.png" />
|
|
|
+ <div class="content">
|
|
|
+ <p class="title">PingPong Checkout</p>
|
|
|
+ <p class="describe">全球收单，品质之选。面向50亿消费者，支持全球50+种主流币种支付</p>
|
|
|
+ <p class="info">
|
|
|
+ <a-button type="primary" @click="openWindow('https://pay.pingpongx.com/aq/register?salerId=000167')">去使用</a-button>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ methods: {
|
|
|
+ openWindow(url) {
|
|
|
+ // 获取屏幕的宽度和高度
|
|
|
+ const screenWidth = window.screen.width;
|
|
|
+ const screenHeight = window.screen.height;
|
|
|
+
|
|
|
+ // 设置窗口宽度为屏幕的一半，高度为屏幕的完整高度
|
|
|
+ const windowWidth = screenWidth / 2;
|
|
|
+ const windowHeight = screenHeight;
|
|
|
+
|
|
|
+ // 计算窗口的位置，使其居中显示
|
|
|
+ const left = (screenWidth - windowWidth) / 2;
|
|
|
+ const top = 0;
|
|
|
+
|
|
|
+ // 设置窗口特性
|
|
|
+ const windowFeatures = `width=${windowWidth},height=${windowHeight},left=100,top=${top},menubar=no,toolbar=no,location=no,resizable=yes,scrollbars=yes,status=no`;
|
|
|
+
|
|
|
+ // 打开新窗口
|
|
|
+ window.open(url, '_blank', windowFeatures);
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="less">
|
|
|
+.tools-wrap {
|
|
|
+ .wrap {
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 30px;
|
|
|
+ display: flex;
|
|
|
+ align-items: start;
|
|
|
+ img {
|
|
|
+ width: 70px;
|
|
|
+ flex: 12% 0 0;
|
|
|
+ border-radius: 10px;
|
|
|
+ }
|
|
|
+ .content {
|
|
|
+ flex: 88% 0 0;
|
|
|
+ padding: 00 50px;
|
|
|
+ .title {
|
|
|
+ font-size: 24px;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ }
|
|
|
+ .describe {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333;
|
|
|
+ min-height: 50px;
|
|
|
+ }
|
|
|
+ .info {
|
|
|
+ margin: 20px 0 0;
|
|
|
+ align-items: end;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ span {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #999;
|
|
|
+ margin-right: 20px;
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ button {
|
|
|
+ flex: 20% 0 0;
|
|
|
+ border-radius: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
wfansh
