788 lines
18 KiB
Vue
788 lines
18 KiB
Vue
<template>
|
||
<view class="recharge_subgift">
|
||
<view class="recharge_cardBg">
|
||
<image :src="card" class="card" mode="widthFix"> </image>
|
||
<view class="srecharge_surplus">
|
||
<text>{{this.balance/100}}</text>
|
||
<view>消费补贴卡余额(元)</view>
|
||
</view>
|
||
</view>
|
||
<view class="recharge_subgift_detail">
|
||
<view class="recharge_subgift_tit">
|
||
<text>转赠方式</text>
|
||
<view class="recharge_subgift_icon" @click="toSubgiftList"> <text>转赠记录 </text>
|
||
<image :src='rightArrow'></image>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="recharge_type">
|
||
<view class="recharge_type_item" v-for="(item,index) in rechargeTypeArr" :key="index"
|
||
@click="tabChange(index)">
|
||
<text>{{item}}</text>
|
||
<text :class="['selectIcon',current==index?'selectActive':'']"></text>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="vip_money_content">
|
||
<view class="vip_money" v-show="current">
|
||
<text class="vip_money_detail">输入邀请码</text>
|
||
<u-input :border="typeLine" v-model="codeVal" @blur="ckCode" @change="changeCode"
|
||
:clearable="clearable" class="vip_input" placeholder="请输入接收人邀请码" placeholderClass="placeSty">
|
||
|
||
</u-input>
|
||
<text class="code_user" v-show="code_user">用户昵称：{{code_user}}</text>
|
||
</view>
|
||
<view class="vip_money" v-show="!current">
|
||
<text class="vip_money_detail">转赠人数</text>
|
||
<u-input :border="typeLine" v-model="codeNum" @change="changeCode1" type="digit"
|
||
:clearable="clearable" class="vip_input" placeholder="请设置转赠人数" placeholderClass="placeSty">
|
||
|
||
</u-input>
|
||
</view>
|
||
<view class="vip_money">
|
||
<text class="vip_money_detail">单个转赠金额(元)</text>
|
||
<u-input :border="typeLine" v-model="amount" @change="changeAmount" :clearable="clearable"
|
||
type="number" class="vip_input" placeholder="请设置单个转赠金额" placeholderClass="placeSty">
|
||
</u-input>
|
||
</view>
|
||
<view class="" v-if="!current">
|
||
共计扣除：{{amount * codeNum}}元
|
||
</view>
|
||
<view class="vip_notice" v-if="!current">
|
||
{{content}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="footer_btn" @click="toShowShare" v-if="current">
|
||
确认转赠
|
||
</view>
|
||
<button type="default" open-type="share" class="footer_btn" @tap="shareSubgift" v-if="!current">去分享
|
||
</button>
|
||
<!-- <!- && !isWechat -> -->
|
||
|
||
<image :src="shareImg" class="share_img" v-show="qrShow">
|
||
<view class="qr-box">
|
||
<canvas canvas-id="qrcode" style="width: 200rpx;height:200rpx;margin: 0 auto;" />
|
||
</view>
|
||
</image>
|
||
<u-modal :show="show" :title="title" :content='content' :showCancelButton="true" @cancel="cancel"></u-modal>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
toCkInvitation,
|
||
toInvitationShare,
|
||
getVipRechargeCode,
|
||
conWalletInfoAPI
|
||
} from "@/request/recharge/index.js";
|
||
import mixin from '@/static/js/mixin/mixin.js'
|
||
import {
|
||
subgiftSharing,
|
||
} from '@/static/js/share.js';
|
||
// import uQRCode from './qrcode.js'
|
||
|
||
// import uQRCode from '../../../static/js/qrcode'
|
||
export default {
|
||
mixins: [mixin],
|
||
data() {
|
||
return {
|
||
card: 'https://img.agrimedia.cn/vipCard.png',
|
||
rightArrow: 'https://img.agrimedia.cn/right-arrow.png',
|
||
shareFriends: '/static/shareFriends.png',
|
||
shareMoments: '/static/shareMoments.png',
|
||
amount: '',
|
||
codeVal: "",
|
||
clearable: false,
|
||
typeLine: 'bottom',
|
||
number: 'number',
|
||
digit: "digit",
|
||
rechargeTypeArr: [
|
||
'分享转赠',
|
||
'邀请码转赠'
|
||
],
|
||
current: 0,
|
||
platformType: "",
|
||
isSucess: false, //校验邀请码
|
||
isShowShare: false,
|
||
show: false, //分享确认弹窗
|
||
content: '点击分享按钮，发放金额即进行预扣除！若用户没有在24小时之内领取完成，消费补贴金额将返回您的账户！',
|
||
title: "分享确认",
|
||
balance: "",
|
||
codeNum: '', //转赠人数
|
||
code_sn: "",
|
||
qrShow: false,
|
||
shareImg: 'https://img.agrimedia.cn/shareImg.png',
|
||
code_user: "",
|
||
isWechat: getApp()['globalData']['parameters']['isWechat'],
|
||
fdFlag: null,
|
||
isRecharge: false,
|
||
isShare: false
|
||
};
|
||
},
|
||
methods: {
|
||
|
||
//跳转到转赠记录
|
||
toSubgiftList() {
|
||
uni.navigateTo({
|
||
url: '/pages/pages-recharge/subgiftTotal/index'
|
||
});
|
||
},
|
||
|
||
tabChange(index) {
|
||
this.current = index
|
||
this.codeVal = ""
|
||
this.amount = ""
|
||
this.isSucess = false
|
||
this.codeNum = ""
|
||
},
|
||
|
||
async toShowShare() {
|
||
if (!this.current) {
|
||
if (!this.amount || !this.codeNum) {
|
||
uni.showToast({
|
||
title: '请先输入转赠金额及人数',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
return
|
||
}
|
||
await this.getShareCode()
|
||
|
||
if (this['globalData']?. ['parameters']?.isWechat) {
|
||
// this.show = true
|
||
} else {
|
||
// await this.appShare()
|
||
}
|
||
|
||
} else {
|
||
// console.log("呵呵",!this.amount,this.amount,!0)
|
||
if (this.amount==0||this.amount<0) {
|
||
console.log("哈哈")
|
||
uni.showToast({
|
||
title: "请输入正确的转赠金额",
|
||
icon: 'none'
|
||
});
|
||
return
|
||
|
||
}
|
||
// this.debounce()
|
||
// if (!this.isRecharge) {
|
||
uni.$u.debounce(this.invitationShare, 1000,true)
|
||
// this.invitationShare()
|
||
// }
|
||
|
||
|
||
|
||
|
||
}
|
||
},
|
||
//小程序分享按钮
|
||
// toShare() {
|
||
// this.show = false
|
||
// },
|
||
//转赠
|
||
debounce() {
|
||
if (this.fdFlag) {
|
||
clearTimeout(this.fdFlag)
|
||
}
|
||
this.fdFlag = setTimeout(() => {
|
||
this.invitationShare()
|
||
this.fdFlag = null
|
||
}, 1000)
|
||
},
|
||
|
||
|
||
//获取分享码
|
||
getShareCode() {
|
||
getVipRechargeCode({
|
||
amount: this.regYuanToFen(this.amount, 100),
|
||
num: Number(this.codeNum),
|
||
}).then((res) => {
|
||
if (res) {
|
||
const {
|
||
code,
|
||
data
|
||
} = res
|
||
if (code == 200) {
|
||
this.code_sn = data.code_sn;
|
||
console.log(this.code_sn, 'code_sn');
|
||
if (this.platformType == "android" || this.platformType == "ios") {
|
||
this.makeCode()
|
||
}
|
||
}
|
||
}
|
||
|
||
}).catch((error) => {
|
||
// uni.showToast({
|
||
// title: error.msg,
|
||
// icon: 'none'
|
||
// });
|
||
})
|
||
},
|
||
|
||
|
||
//邀请码验证
|
||
ckCode() {
|
||
if (!this.codeVal) {
|
||
return
|
||
}
|
||
toCkInvitation({
|
||
invite_code: this.codeVal
|
||
}).then((res) => {
|
||
if (res) {
|
||
const {
|
||
code,
|
||
data
|
||
} = res
|
||
|
||
if (code == 200 && data.ck == 1) {
|
||
this.isSucess = true
|
||
this.code_user = data.name
|
||
} else {
|
||
uni.showToast({
|
||
title: "邀请码不存在",
|
||
icon: 'none'
|
||
});
|
||
}
|
||
}
|
||
|
||
}).catch((error) => {
|
||
// uni.showToast({
|
||
// title: error.msg,
|
||
// icon: 'none'
|
||
// });
|
||
})
|
||
|
||
},
|
||
|
||
//确认转赠
|
||
invitationShare() {
|
||
|
||
// uni.$u.debounce(()=>{
|
||
|
||
|
||
// // console.log('觸發');
|
||
// }, 1000,true);
|
||
|
||
// this.isRecharge = true;
|
||
uni.showLoading({
|
||
title: '转赠中'
|
||
});
|
||
const params = {
|
||
invite_code: this.codeVal,
|
||
amount: this.regYuanToFen(this.amount, 100)
|
||
}
|
||
toInvitationShare({
|
||
...params
|
||
}).then((res) => {
|
||
const {
|
||
code
|
||
} = res
|
||
if (code == 200) {
|
||
this.amount=""
|
||
this.codeVal=""
|
||
uni.showToast({
|
||
title: "转赠成功",
|
||
icon: 'none',
|
||
duration: 2000
|
||
|
||
});
|
||
uni.hideLoading();
|
||
setTimeout(() => {
|
||
uni.navigateBack({})
|
||
}, 2000)
|
||
|
||
}
|
||
}).catch((error) => {
|
||
|
||
uni.hideLoading();
|
||
})
|
||
},
|
||
//改变邀请码或者手机号
|
||
changeCode(e) {
|
||
this.codeVal = e;
|
||
},
|
||
changeCode1(e) {
|
||
// let reg=/[1-9]\d*$"/
|
||
var reg = /^(0?|-?[1-9]\d*)$/
|
||
console.log(reg.test(e))
|
||
if (!reg.test(e)) {
|
||
this.codeNum = ""
|
||
return
|
||
}
|
||
console.log("wirriworiow")
|
||
// this.codeNum=e
|
||
},
|
||
|
||
//改变金额
|
||
changeAmount(e) {
|
||
console.log(e, "88")
|
||
|
||
this.amount = e;
|
||
this.WXGetCode();
|
||
},
|
||
//取消分享
|
||
cancel() {
|
||
this.show = false;
|
||
this.WXGetCode();
|
||
},
|
||
|
||
|
||
// 小程序方式获取转赠码
|
||
async WXGetCode() {
|
||
if (getApp()['globalData']['parameters']['isWechat']) {
|
||
const amount = this.regYuanToFen(this.amount, 100);
|
||
const num = Number(this.codeNum);
|
||
if (amount && num) {
|
||
const code = await getVipRechargeCode({
|
||
amount,
|
||
num,
|
||
});
|
||
// 设置微信分享标识
|
||
wx.miniProgram.postMessage({
|
||
data: {
|
||
share_id: 101,
|
||
code_sn: code['data']['code_sn']
|
||
},
|
||
});
|
||
}
|
||
}
|
||
},
|
||
|
||
// H5分享二维码转赠
|
||
async shareSubgift() {
|
||
|
||
uni.$u.debounce(async () => {
|
||
const amount = this.regYuanToFen(this.amount, 100);
|
||
const num = Number(this.codeNum);
|
||
const code = await getVipRechargeCode({
|
||
amount,
|
||
num,
|
||
})
|
||
// debugger
|
||
// uni.navigateTo({
|
||
// url: `/pages/pages-recharge/rechargeSubgift/QR_code?code_sn=${code['data']['code_sn']}`
|
||
// })
|
||
// return
|
||
|
||
if (this['isWechat']) {
|
||
// 设置微信分享标识
|
||
wx.miniProgram.postMessage({
|
||
data: {
|
||
share_id: 101,
|
||
code_sn: code['data']['code_sn']
|
||
},
|
||
});
|
||
return;
|
||
};
|
||
|
||
uni.navigateTo({
|
||
url: `/pages/pages-recharge/rechargeSubgift/QR_code?code_sn=${code['data']['code_sn']}`
|
||
})
|
||
}, 1000, true)
|
||
|
||
|
||
|
||
},
|
||
makeCode() {
|
||
// this.qrShow = true
|
||
// uQRCode.make({
|
||
// canvasId: 'qrcode',
|
||
// componentInstance: this,
|
||
// // text: `/pages/pages-recharge/shareRedEnvelopes/index?code=${this.code_sn}`,
|
||
// text:"https://jc.laimaidi.com/mkmk/index.html?bm_yq_code=0614925&code=WCS_4_1672905048146406&H5URL=https://jc.laimaidi.com/privilege/pages/pages-recharge/shareRedEnvelopes/index",
|
||
// size: 150,
|
||
// margin: 0,
|
||
// backgroundColor: '#ffffff',
|
||
// foregroundColor: '#000000',
|
||
// fileType: 'jpg',
|
||
// errorCorrectLevel: uQRCode.errorCorrectLevel.H,
|
||
// success: res => {}
|
||
// })
|
||
},
|
||
// 余额剩余
|
||
init() {
|
||
conWalletInfoAPI().then(res => {
|
||
// 获取钱包信息
|
||
this.walletInfo = res['data'];
|
||
if (res) {
|
||
const {
|
||
data,
|
||
code
|
||
} = res
|
||
if (code == 200) {
|
||
this.balance = res?.data?.amount
|
||
}
|
||
|
||
}
|
||
}).then(res => {
|
||
|
||
}).then(res => {
|
||
|
||
})
|
||
},
|
||
},
|
||
onLoad(parameters) {
|
||
this.platformType = uni.getSystemInfoSync().platform
|
||
this.init()
|
||
// this.balance = parameters?.balance;
|
||
// console.log(parameters, "获取手机类型")
|
||
},
|
||
// async onShareAppMessage() {
|
||
// // //menu 右上角点击转发
|
||
// // if (e.from == 'button') {
|
||
// // // 点击button按钮分享的
|
||
// // subgiftSharing({
|
||
// // code_sn: this.code_sn
|
||
// // })
|
||
// // }
|
||
// const code = await getVipRechargeCode({
|
||
// amount: this.regYuanToFen(this.amount, 100),
|
||
// num: Number(this.codeNum),
|
||
// });
|
||
// return {
|
||
// title: '好友喊你领取消费补贴啦',
|
||
// path: `/pages/pages-recharge/shareRedEnvelopes/index?code=${code['data']['code_sn']}`,
|
||
// imageUrl: 'https://img.agrimedia.cn/chwl/newsh.jpg',
|
||
// desc: "消费补贴卡权益覆盖餐饮、话费、电商、影音娱乐、外卖打车等多种消费场景，消费补贴当钱花，快来领取吧！",
|
||
// }
|
||
// },
|
||
|
||
|
||
//分享到朋友圈 ，只支持部分安卓机型
|
||
// async onShareTimeline() {
|
||
// const code = await getVipRechargeCode({
|
||
// amount: this.regYuanToFen(this.amount, 100),
|
||
// num: Number(this.codeNum),
|
||
// });
|
||
// return {
|
||
// title: '好友喊你领取消费补贴啦',
|
||
// path: `/pages/pages-recharge/shareRedEnvelopes/index?code=${code['data']['code_sn']}`,
|
||
// imageUrl: 'https://img.agrimedia.cn/chwl/newsh.jpg',
|
||
// desc: "消费补贴卡权益覆盖餐饮、话费、电商、影音娱乐、外卖打车等多种消费场景，消费补贴当钱花，快来领取吧！",
|
||
// }
|
||
// },
|
||
|
||
|
||
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
page {
|
||
background: #F8F8F8;
|
||
}
|
||
|
||
.share_img {
|
||
position: fixed;
|
||
width: 100%;
|
||
height: 100%;
|
||
top: 0;
|
||
left: 0;
|
||
|
||
z-index: 2;
|
||
}
|
||
|
||
.qr-box {
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
margin: 0 auto;
|
||
margin-top: 20rpx;
|
||
position: absolute;
|
||
top: 42%;
|
||
right: 68rpx;
|
||
z-index: 3;
|
||
}
|
||
|
||
.recharge_subgift {
|
||
background: #F8F8F8;
|
||
|
||
/deep/ .u-border-bottom {
|
||
border-bottom: 2rpx solid #EDEDED;
|
||
}
|
||
|
||
/deep/ .u-input__content__field-wrapper__field {
|
||
height: 60rpx;
|
||
line-height: 60rpx;
|
||
}
|
||
|
||
.recharge_cardBg {
|
||
background: #F8F8F8;
|
||
padding: 20rpx 24rpx 0 24rpx;
|
||
position: relative;
|
||
|
||
.card {
|
||
border-radius: 0 20rpx 0 0;
|
||
height: 168rpx;
|
||
width: 100%;
|
||
}
|
||
|
||
.srecharge_surplus {
|
||
position: absolute;
|
||
left: 60rpx;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
-webkit-transform: translateY(-50%);
|
||
-moz-transform: translateY(-50%);
|
||
-ms-transform: translateY(-50%);
|
||
-o-transform: translateY(-50%);
|
||
|
||
text {
|
||
font-size: 44rpx;
|
||
font-family: SourceHanSansCN-Bold, SourceHanSansCN;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
}
|
||
|
||
view {
|
||
font-size: 24rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #BAA656;
|
||
}
|
||
}
|
||
}
|
||
|
||
.recharge_subgift_detail {
|
||
padding: 20rpx 26rpx;
|
||
box-shadow: 0 -2rpx 6rpx 0 rgba(0, 0, 0, 0.1);
|
||
background: #fff;
|
||
padding-bottom: 214rpx;
|
||
margin-bottom: 290rpx;
|
||
|
||
.recharge_subgift_tit {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
text {
|
||
font-size: 32rpx;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #333333;
|
||
}
|
||
|
||
.recharge_subgift_icon {
|
||
display: flex;
|
||
|
||
text {
|
||
font-size: 28rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #999999
|
||
}
|
||
|
||
image {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
vertical-align: middle;
|
||
margin-top: 4rpx;
|
||
margin-left: 8rpx;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.recharge_type {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 20rpx;
|
||
|
||
.recharge_type_item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
width: 50%;
|
||
height: 116rpx;
|
||
line-height: 116rpx;
|
||
border-radius: 20rpx;
|
||
border: 2rpx solid #EDEDED;
|
||
padding-left: 20rpx;
|
||
padding-right: 20rpx;
|
||
|
||
text:nth-child(1) {
|
||
font-size: 28rpx;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #666666;
|
||
}
|
||
|
||
.selectIcon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
border: 2rpx solid #DEDEDE;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.selectActive {
|
||
border: 1px solid #FF7700;
|
||
position: relative;
|
||
|
||
&:after {
|
||
position: absolute;
|
||
content: "";
|
||
width: 18rpx;
|
||
height: 18rpx;
|
||
background: #FF7700;
|
||
left: 6rpx;
|
||
top: 6rpx;
|
||
border-radius: 8rpx;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.recharge_type_item:nth-child(2) {
|
||
margin-left: 20rpx;
|
||
}
|
||
}
|
||
|
||
.vip_money_content {
|
||
.vip_money {
|
||
position: relative;
|
||
margin-top: 24rpx;
|
||
|
||
.vip_money_detail {
|
||
position: absolute;
|
||
font-size: 28rpx;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #333333;
|
||
display: inline-block;
|
||
top: 24rpx
|
||
}
|
||
|
||
.code_user {
|
||
display: block;
|
||
text-align: right;
|
||
color: red;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.vip_input {
|
||
/deep/ .uni-input-input {
|
||
font-size: 52rpx;
|
||
font-family: SourceHanSansCN-Heavy, SourceHanSansCN;
|
||
font-weight: 800;
|
||
color: #333333;
|
||
text-align: right;
|
||
|
||
}
|
||
}
|
||
|
||
/deep/ .placeSty {
|
||
text-align: right;
|
||
font-size: 28rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
}
|
||
|
||
|
||
}
|
||
|
||
.vip_notice {
|
||
color: red;
|
||
font-size: 28rpx;
|
||
margin-top: 40rpx;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.footer_btn {
|
||
margin: 0 26rpx;
|
||
height: 88rpx;
|
||
line-height: 88rpx;
|
||
background: linear-gradient(90deg, #FFAD02 0%, #FD8F3B 100%);
|
||
border-radius: 20rpx;
|
||
text-align: center;
|
||
font-size: 32rpx;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.appShare {
|
||
display: flex;
|
||
background: #ffff;
|
||
position: fixed;
|
||
bottom: 0;
|
||
width: 100%;
|
||
height: 160rpx;
|
||
|
||
.shareItem {
|
||
width: 50%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
|
||
view {
|
||
margin-top: 20rpx;
|
||
font-size: 32rpx;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #333333;
|
||
}
|
||
|
||
image {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.shareConfimBg {
|
||
position: fixed;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
width: 100%;
|
||
height: 100%;
|
||
top: 0;
|
||
left: 0;
|
||
|
||
.share_content_total {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
position: absolute;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
background: #fff;
|
||
margin-left: 60rpx;
|
||
margin-right: 60rpx;
|
||
padding: 40rpx;
|
||
border-radius: 20rpx;
|
||
|
||
.share_content {
|
||
font-size: 28rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
width: 100%;
|
||
margin: 0 80rpx;
|
||
}
|
||
|
||
.shareBtn {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 40rpx;
|
||
|
||
text {
|
||
font-size: 36rpx;
|
||
margin-left: 80rpx;
|
||
color: #999999;
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
uni-button[type=default] {
|
||
background-color: transparent;
|
||
color: #FD8F3B
|
||
}
|
||
}
|
||
}
|
||
</style>
|