679 lines
18 KiB
Vue
679 lines
18 KiB
Vue
<template>
|
||
<view class="main">
|
||
<view class="content">
|
||
<view class="contentTitle">用户隐私保护政策确认</view>
|
||
<view class="contentText"> 尊敬的用户： </view>
|
||
<view class="contentText">
|
||
为了更好的维护您的权益，我们对
|
||
<text class="tips" @click="handleOpenPrivacyContract">《彩云驿出行隐私保护指引》</text>进行了更新，特向您推送本更新提示，请仔细阅读并充分理解相关条款。
|
||
</view>
|
||
<view class="contentText">
|
||
您点击“立即授权”，即代表您已经阅读并同意更新后的<text class="tips" @click="handleOpenPrivacyContract">《彩云驿出行隐私保护指引》</text>条款。
|
||
</view>
|
||
<view class="imgbox">
|
||
<!-- <image class="img" src="/static/images/home/registerIcon.png" /> -->
|
||
<image class="img" src="https://eshangtech.com/caiyunyiImg/registerIcon.png" />
|
||
</view>
|
||
|
||
<div class="desc newBtnFixed" v-if="!user.MEMBERSHIP_ID">
|
||
<!-- <div class="desc">申请获取你的公开信息(昵称、头像)</div> -->
|
||
<button class="loginBtn" type="primary" open-type="getUserInfo" @getuserinfo="bindGetUserInfo">
|
||
手机号快捷登录
|
||
</button>
|
||
</div>
|
||
<div class="desc newBtnFixed" v-else-if="user.MEMBERSHIP_ID && !user.MEMBERSHIP_MOBILEPHONE">
|
||
<button class="loginBtn" type="primary" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
|
||
快速登录账号
|
||
</button>
|
||
</div>
|
||
|
||
<div class="cancelBtn" @click="handleCancel" v-if="!user.MEMBERSHIP_ID">
|
||
<div class="cancel">取消授权</div>
|
||
</div>
|
||
</view>
|
||
|
||
<div class="page-body" v-if="false">
|
||
<div class="top-regigter">
|
||
<image src="https://eshangtech.com/ShopICO/login_logo.png"></image>
|
||
|
||
<div class="desc" v-if="!user.MEMBERSHIP_ID">
|
||
<!-- <div class="desc">申请获取你的公开信息(昵称、头像)</div> -->
|
||
<button type="primary" open-type="getUserInfo" @getuserinfo="bindGetUserInfo">
|
||
手机号快捷登录
|
||
</button>
|
||
</div>
|
||
<div class="desc" v-else-if="user.MEMBERSHIP_ID && !user.MEMBERSHIP_MOBILEPHONE">
|
||
<button type="primary" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
|
||
快速登录账号
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- <div class="bottom-content">
|
||
<image class="logo1" src="../../static/images/logo.png"></image>
|
||
<image class="logo2" src="../../static/images/yifu_logo.png"></image>
|
||
</div> -->
|
||
<!-- <div style="width: 100%; display: flex; justify-content: center">
|
||
<view class="login-tip-text">
|
||
该小程序仅供企业内部人员登录使用，<br />您的手机号是核实身份的唯一凭证。
|
||
</view>
|
||
</div> -->
|
||
|
||
<view class="privacyMeng" v-if="showPrivacy"></view>
|
||
<view class="privacy" v-if="showPrivacy">
|
||
<view class="privacyContent">
|
||
<p class="contentTitle">用户隐私保护提示</p>
|
||
<view class="contentWord">
|
||
感谢您使用本产品，您使用本产品前应当仔细阅读并同意<text class="tips" @click="handleOpenPrivacyContract">《小程序隐私保护指引》</text>
|
||
当您点击同意并开始使用产品服务时，即表示您已理解并同意该条款内容，该条款将对您产生法律约束。如您拒绝，将无法更好的体验产品。
|
||
</view>
|
||
</view>
|
||
<view class="btnList">
|
||
<button class="btns noAgree" @click="handleRefuse">拒绝</button>
|
||
<button class="btns agree" id="agree-btn3" open-type="agreePrivacyAuthorization"
|
||
@agreeprivacyauthorization="handleAgreePrivacyAuthorization">
|
||
同意
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</div>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapMutations, mapGetters } from "vuex";
|
||
export default {
|
||
data() {
|
||
return {
|
||
disable: true,
|
||
isgetCode: false,
|
||
getCodeText: "发送验证码",
|
||
height: "",
|
||
saveData: {
|
||
mobile: "",
|
||
code: "",
|
||
},
|
||
shouldNavback: false,
|
||
showPrivacy: false, // 隐私弹框的东西
|
||
showBtn: false, // 隐私权限有了之后 就会出来这俩按钮
|
||
showCancel: true, // 显示取消按钮
|
||
pageSession_key: "",
|
||
backTo: ""
|
||
};
|
||
},
|
||
computed: {
|
||
...mapGetters({
|
||
canIuse: "canIuse",
|
||
user: "user",
|
||
InviteCode: "InviteCode",
|
||
}),
|
||
},
|
||
onLoad(query) {
|
||
if (this.user.MEMBERSHIP_ID) {
|
||
uni.switchTab({
|
||
url: '/pages/index/index',
|
||
});
|
||
}
|
||
|
||
|
||
if (query.backTo) {
|
||
this.backTo = query.backTo
|
||
}
|
||
|
||
if (
|
||
!this.user.MEMBERSHIP_ID ||
|
||
(this.user.MEMBERSHIP_ID && !this.user.MEMBERSHIP_MOBILEPHONE)
|
||
) {
|
||
} else {
|
||
this.showCancel = false;
|
||
}
|
||
|
||
let systemInfo = uni.getStorageSync("systemInfo");
|
||
this.height =
|
||
systemInfo.windowHeight + (94 / 750) * systemInfo.windowWidth + "px";
|
||
let _this = this;
|
||
uni.getPrivacySetting({
|
||
success: (res) => {
|
||
console.log("res123123", res);
|
||
if (res.needAuthorization) {
|
||
_this.showPrivacy = true;
|
||
} else {
|
||
_this.showBtn = true;
|
||
}
|
||
},
|
||
});
|
||
this.$utils.addUserBehaviorNew();
|
||
console.log("this.user", this.user);
|
||
},
|
||
onUnload() {
|
||
|
||
},
|
||
methods: {
|
||
...mapMutations({
|
||
setUser: "setUser",
|
||
setCanIUse: "canIuse",
|
||
payForVip: "payForVip",
|
||
}),
|
||
// 返回原本页面
|
||
handleCancel() {
|
||
uni.navigateBack({
|
||
delta: 1,
|
||
});
|
||
},
|
||
// 打开隐私协议页面
|
||
handleOpenPrivacyContract() {
|
||
wx.openPrivacyContract({
|
||
success: (success) => {
|
||
console.log("success", success);
|
||
}, // 打开成功
|
||
fail: () => { }, // 打开失败
|
||
complete: () => { },
|
||
});
|
||
},
|
||
// 点击了同意
|
||
handleAgreePrivacyAuthorization(e) {
|
||
console.log("e1", e);
|
||
this.showPrivacy = false;
|
||
this.showBtn = true;
|
||
},
|
||
// 点击了拒绝
|
||
handleRefuse() {
|
||
this.showPrivacy = false;
|
||
},
|
||
|
||
getPhoneNumber(e) {
|
||
let _this = this;
|
||
let _data = e.mp.detail;
|
||
let user = _this.user;
|
||
console.log("_data", _data);
|
||
console.log("_this", _this);
|
||
console.log("user", user);
|
||
|
||
if (_data.errMsg.indexOf("ok") > -1) {
|
||
let arr = {
|
||
action_type: "BindPhone",
|
||
encryptedData: encodeURIComponent(_data.encryptedData),
|
||
sessionKey: encodeURIComponent(_this.pageSession_key || user.session_key),
|
||
iv: encodeURIComponent(_data.iv),
|
||
userUnionId: user.USER_UNIONID,
|
||
WechatUserId: user.WechatUserId,
|
||
recommendId: _this.InviteCode,
|
||
requestType: "application/x-www-form-urlencoded",
|
||
// appId:"wx6a8173c6299c7a93"
|
||
};
|
||
_this.$api.postCoop(arr).then(async function (rs) {
|
||
console.log("rs", rs);
|
||
rs = rs.Data;
|
||
user.MEMBERSHIP_ID = rs.MEMBERSHIP_ID;
|
||
user.MEMBERSHIP_NAME = rs.MEMBERSHIP_NAME;
|
||
user.MEMBERSHIP_MOBILEPHONE = rs.MEMBERSHIP_MOBILEPHONE;
|
||
user.INDUSTRY_MEMBERSHIP_ID = rs.INDUSTRY_MEMBERSHIP_ID;
|
||
user.MEMBERSHIP_LEVEL_TEXT = rs.MEMBERSHIP_LEVEL_TEXT;
|
||
user.MEMBERSHIP_TYPE = rs.MEMBERSHIP_TYPE;
|
||
user.COUPON_COUNT = rs.COUPON_COUNT;
|
||
_this.setUser(user);
|
||
_this.setCanIUse(false);
|
||
// _this.payForVip(true)
|
||
// uni.switchTab({ url: "/pages/index/index" });
|
||
const app = getApp();
|
||
if (app.globalData.recommendId && app.globalData.recommendCode) {
|
||
_this.$utils.addUserBehaviorNew(null, true);
|
||
}
|
||
|
||
await _this.handleGetUserDetail()
|
||
|
||
if (_this.backTo === 'index') {
|
||
uni.switchTab({
|
||
url: '/pages/index/index',
|
||
});
|
||
} else {
|
||
uni.navigateBack({
|
||
delta: 1,
|
||
});
|
||
}
|
||
|
||
|
||
});
|
||
}
|
||
},
|
||
async bindGetUserInfo(e) {
|
||
// 判断 user.session_key 有没有 没有重新拿值
|
||
let session_key = ""
|
||
// 申请权限
|
||
let _this = this;
|
||
if (!this.user || !this.user.session_key) {
|
||
console.log('1111');
|
||
|
||
const res = await new Promise((resolve, reject) => {
|
||
wx.login({
|
||
success: async (result) => {
|
||
console.log('resultresultresultresultresult', result);
|
||
resolve(result)
|
||
},
|
||
fail: reject
|
||
});
|
||
});
|
||
|
||
const data = await new Promise((resolve, reject) => {
|
||
_this.$api
|
||
.getCoop({
|
||
action_type: "WeChatLogin",
|
||
code: res.code,
|
||
// appId: "wx6a8173c6299c7a93",
|
||
}).then(result => {
|
||
resolve(result)
|
||
})
|
||
})
|
||
|
||
console.log('22222', data);
|
||
session_key = data.Data.session_key
|
||
console.log('33333', session_key);
|
||
this.pageSession_key = session_key
|
||
}
|
||
console.log('44444', session_key);
|
||
|
||
|
||
|
||
let user = _this.user;
|
||
let res = e.mp.detail;
|
||
if (e.mp.detail) {
|
||
uni.getUserInfo({
|
||
success(res) {
|
||
console.log("user", this.user);
|
||
console.log("resresresresres", res);
|
||
let arr = {
|
||
action_type: "WeChatAuthorize",
|
||
encryptedData: encodeURIComponent(res.encryptedData),
|
||
sessionKey: encodeURIComponent(session_key || user.session_key),
|
||
iv: encodeURIComponent(res.iv),
|
||
recommendId: _this.InviteCode,
|
||
requestType: "application/x-www-form-urlencoded",
|
||
// appId:"wx6a8173c6299c7a93"
|
||
};
|
||
|
||
console.log('arrarrarrarrarr', arr);
|
||
|
||
_this.$api.postCoop(arr).then(function (rs) {
|
||
console.log('rsrsrsrsrsrs', rs);
|
||
|
||
rs = rs.Data;
|
||
user.USER_UNIONID = rs.USER_UNIONID;
|
||
user.WechatUserId = rs.WechatUserId;
|
||
user.MEMBERSHIP_ID = rs.MEMBERSHIP_ID;
|
||
user.INDUSTRY_MEMBERSHIP_ID = rs.INDUSTRY_MEMBERSHIP_ID;
|
||
user.MEMBERSHIP_NAME = rs.MEMBERSHIP_NAME;
|
||
user.MEMBERSHIP_MOBILEPHONE = rs.MEMBERSHIP_MOBILEPHONE;
|
||
user.ACCOUNT_BALANCE = rs.ACCOUNT_BALANCE;
|
||
user.MEMBERSHIP_POINT = rs.MEMBERSHIP_POINT;
|
||
user.MEMBERSHIP_TYPE = rs.MEMBERSHIP_TYPE;
|
||
_this.showCancel = false;
|
||
|
||
console.log("rs", rs);
|
||
_this.setUser(user);
|
||
_this.setCanIUse(false);
|
||
_this.$forceUpdate();
|
||
});
|
||
}
|
||
})
|
||
}
|
||
},
|
||
|
||
async handleGetUserDetail() {
|
||
const userData = await this.$api.getCoop({
|
||
action_type: "GetMembershipInfo",
|
||
WechatUserId: this.user.WechatUserId,
|
||
});
|
||
this.userInfo = userData.Data;
|
||
console.log('userDatauserDatauserData', userData.Data);
|
||
|
||
|
||
uni.setStorageSync("userData", userData.Data);
|
||
|
||
this.editableNickname = this.userInfo.NICK_NAME // 昵称
|
||
this.genderIndex = this.userInfo.MEMBERSHIP_SEX // 性别
|
||
this.birthday = this.userInfo.MEMBERSHIP_BIRTHDAY ? this.$utils.formatDate(this.userInfo.MEMBERSHIP_BIRTHDAY) : "-" // 生日
|
||
this.email = this.userInfo.MEMBERSHIP_EMAIL // 邮箱地址
|
||
let _data = userData;
|
||
let _this = this
|
||
_this.user.MEMBERSHIP_ID = _data.Data.MEMBERSHIP_ID || "";
|
||
_this.user.MEMBERSHIP_NAME = _data.Data.MEMBERSHIP_NAME || "";
|
||
_this.user.MEMBERSHIP_LEVEL_TEXT =
|
||
_data.Data.MEMBERSHIP_LEVEL_TEXT || "";
|
||
_this.user.COUPON_COUNT = _data.Data.COUPON_COUNT || "";
|
||
_this.user.PENDORDER_COUNT = _data.Data.PENDORDER_COUNT || "";
|
||
_this.user.RESERVATION_COUNT = _data.Data.RESERVATION_COUNT || "";
|
||
_this.user.ACCOUNT_BALANCE = _data.Data.ACCOUNT_BALANCE || "";
|
||
_this.user.ISPLUS = _data.Data.ISPLUS || "";
|
||
_this.user.INDUSTRY_MEMBERSHIP_ID =
|
||
_data.Data.INDUSTRY_MEMBERSHIP_ID || "";
|
||
_this.user.MEMBERSHIP_TYPE = _data.Data.MEMBERSHIP_TYPE || "";
|
||
_this.user.MEMBERSHIP_LEVEL = _data.Data.MEMBERSHIP_LEVEL || "";
|
||
_this.user.InviteCode = _data.Data.InviteCode || "";
|
||
_this.user.MEMBERSHIP_POINT = _data.Data.MEMBERSHIP_POINT || "";
|
||
_this.user.MEMBERSHIP_MOBILEPHONE =
|
||
_data.Data.MEMBERSHIP_MOBILEPHONE || "";
|
||
_this.WXProfile = _data.Data.MEMBERSHIP_HEADIMAGEURL;
|
||
// _this.setUser(user);
|
||
_this.$store.commit("setUser", _this.user);
|
||
|
||
if (_data.Data.MEMBERSHIP_HEADIMAGEURL) {
|
||
_this.displayedAvatarUrl = _data.Data.MEMBERSHIP_HEADIMAGEURL + '?t=' + Date.now();
|
||
} else {
|
||
_this.displayedAvatarUrl = ''; // 或者设置为默认头像 URL
|
||
}
|
||
_this.$forceUpdate()
|
||
_this.realName = _this.userInfo.MEMBERSHIP_NAME // 真实姓名
|
||
_this.idCard = _this.userInfo.CERTIFICATE_NUMBER
|
||
|
||
this.$forceUpdate();
|
||
console.log("this.userInfo", JSON.parse(JSON.stringify(this.userInfo)));
|
||
},
|
||
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.main {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background-color: #f0f0f0;
|
||
box-sizing: border-box;
|
||
padding: 24rpx 32rpx;
|
||
|
||
.content {
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: #fff;
|
||
border-radius: 16rpx;
|
||
box-sizing: border-box;
|
||
padding: 56rpx 64rpx;
|
||
background-image: url("https://eshangtech.com/minTestImg/caiyunyiRegister.svg");
|
||
background-repeat: no-repeat;
|
||
background-size: 100%;
|
||
|
||
.contentTitle {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 600;
|
||
font-size: 36rpx;
|
||
color: #130f05;
|
||
line-height: 52rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
text-align: center;
|
||
}
|
||
|
||
.contentText {
|
||
margin-top: 40rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
color: #130f05;
|
||
line-height: 44rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
|
||
.tips {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
line-height: 44rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
color: #1e9b4a;
|
||
}
|
||
}
|
||
|
||
.imgbox {
|
||
width: 100%;
|
||
height: 400rpx;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-top: 48rpx;
|
||
|
||
.img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.desc {
|
||
font-size: 28rpx;
|
||
text-align: center;
|
||
margin-top: 64rpx;
|
||
}
|
||
|
||
.newBtnFixed {
|
||
width: 100%;
|
||
|
||
.loginBtn {
|
||
background: #1e9b4a !important;
|
||
}
|
||
}
|
||
|
||
.cancelBtn {
|
||
width: 100%;
|
||
padding: 18rpx 0;
|
||
text-align: center;
|
||
color: #130f05;
|
||
border-radius: 8rpx;
|
||
background: #f2f2f2;
|
||
margin-top: 24rpx;
|
||
|
||
.cancel {
|
||
font-size: 32rpx;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.page-body {
|
||
padding: 48rpx 46rpx;
|
||
background-color: #fff;
|
||
overflow: hidden;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
height: calc(100vh);
|
||
}
|
||
|
||
.top-regigter {
|
||
// padding 48rpx 0
|
||
text-align: center;
|
||
// height 390rpx
|
||
width: 100%;
|
||
|
||
image {
|
||
width: 562rpx;
|
||
height: 448rpx;
|
||
}
|
||
}
|
||
|
||
.phone-input,
|
||
.code-input {
|
||
height: 114rpx;
|
||
border-bottom: 1rpx solid #f5f5f5;
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 28rpx;
|
||
background-color: #fff;
|
||
padding-left: 16rpx;
|
||
|
||
label {
|
||
color: #383838;
|
||
width: 198rpx;
|
||
}
|
||
|
||
input {
|
||
color: #383838;
|
||
width: 260rpx;
|
||
}
|
||
}
|
||
|
||
.get-code {
|
||
color: #a6a6a9;
|
||
border: 1rpx solid #a5a5a8;
|
||
border-radius: 6rpx;
|
||
text-align: center;
|
||
width: 178rpx;
|
||
height: 46rpx;
|
||
line-height: 46rpx;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.submit-btn {
|
||
background-color: #383838;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
border-radius: 40rpx;
|
||
width: 660rpx;
|
||
font-size: 32rpx;
|
||
margin-top: 80rpx;
|
||
text-align: center;
|
||
color: #fff;
|
||
}
|
||
|
||
.cantsubmit {
|
||
background-color: #9c9b9c;
|
||
}
|
||
|
||
.rule-box {
|
||
margin-top: 340rpx;
|
||
padding-bottom: 40rpx;
|
||
font-size: 28rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.rule-text {
|
||
color: #4089e5;
|
||
}
|
||
|
||
.hover-code {
|
||
opacity: 1;
|
||
}
|
||
|
||
.hover-code:hover {
|
||
opacity: 0.1;
|
||
background-color: #000;
|
||
transition: all 1s ease;
|
||
}
|
||
|
||
button {
|
||
font-size: 32rpx;
|
||
margin-top: 32rpx;
|
||
}
|
||
|
||
.title {
|
||
text-align: center;
|
||
}
|
||
|
||
.desc {
|
||
font-size: 28rpx;
|
||
text-align: center;
|
||
margin-top: 64rpx;
|
||
}
|
||
|
||
.bottom-content {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.logo1 {
|
||
width: 93rpx;
|
||
height: 99rpx;
|
||
}
|
||
|
||
.logo2 {
|
||
margin-left: 64rpx;
|
||
width: 64rpx;
|
||
height: 84rpx;
|
||
}
|
||
}
|
||
|
||
.login-tip-text {
|
||
position: sticky;
|
||
bottom: 120rpx;
|
||
left: 0;
|
||
// width: 580rpx;
|
||
z-index: 99;
|
||
text-align: center;
|
||
font-size: 26rpx;
|
||
color: #888;
|
||
}
|
||
|
||
.privacyMeng {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background: rgba(0, 0, 0, 0.3);
|
||
z-index: 999998;
|
||
}
|
||
|
||
.privacy {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100vw;
|
||
box-sizing: border-box;
|
||
padding: 40rpx 30rpx;
|
||
z-index: 999999;
|
||
border-top-right-radius: 24px;
|
||
border-top-left-radius: 24px;
|
||
background: #fff;
|
||
|
||
.privacyContent {
|
||
.contentTitle {
|
||
font-size: 48rpx;
|
||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||
font-weight: bold;
|
||
color: #000000;
|
||
line-height: 56rpx;
|
||
}
|
||
|
||
.contentWord {
|
||
margin-top: 32rpx;
|
||
text-indent: 2em;
|
||
|
||
.tips {
|
||
font-size: 28rpx;
|
||
font-family: Source Han Sans CN-Normal, Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #8bc21f;
|
||
line-height: 33rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.btnList {
|
||
display: flex;
|
||
justify-content: space-evenly;
|
||
align-items: center;
|
||
margin-top: 48rpx;
|
||
|
||
.btns {
|
||
display: inline-block;
|
||
padding: 0 90rpx;
|
||
border-radius: 15rpx;
|
||
}
|
||
|
||
.noAgree {
|
||
background: rgb(242, 242, 242);
|
||
color: rgb(26, 187, 107);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.agree {
|
||
background: rgb(26, 187, 107);
|
||
color: #fff;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
}
|
||
</style>
|