833 lines
20 KiB
Vue
833 lines
20 KiB
Vue
<template>
|
||
<view>
|
||
<navBar
|
||
:navTitle="collectionsDetail.Name"
|
||
:stickyShow="stickyShow"
|
||
:color="'#000000'"
|
||
:backBackGroundColor="'#699A70'"
|
||
v-if="!isActive"
|
||
:sfBack="true"
|
||
@triggerSfBack="back"
|
||
></navBar>
|
||
<view
|
||
class="fixed-box"
|
||
:style="{ background: !isActive ? '#FFFFFF' : '#000000' }"
|
||
>
|
||
<view class="btn" v-if="!isActive">
|
||
<u-button
|
||
type="primary"
|
||
:text="$t('navbar.back')"
|
||
class="back"
|
||
@click="back"
|
||
></u-button>
|
||
<u-button
|
||
v-if="this.collectionsDetail.CurrencyType === 'point'"
|
||
type="success"
|
||
:text="'积分制尚未开通'"
|
||
class="buyer"
|
||
></u-button>
|
||
|
||
<u-button
|
||
v-if="this.collectionsDetail.CurrencyType === 'normal'"
|
||
type="success"
|
||
:text="
|
||
this.collectionsDetail.SaleType === 'draw'
|
||
? '领取'
|
||
: this.collectionsDetail.SaleType === 'normal'
|
||
? '￥' + price + $t('collection.buy')
|
||
: '仅限渠道购买'
|
||
"
|
||
class="buyer"
|
||
@click="buy"
|
||
></u-button>
|
||
</view>
|
||
<view class="btn" v-else>
|
||
<u-button
|
||
type="primary"
|
||
:text="$t('navbar.back')"
|
||
class="back-active"
|
||
@click="back"
|
||
></u-button>
|
||
<u-button type="success" :text="'售罄'" class="sell-out"></u-button>
|
||
</view>
|
||
</view>
|
||
<view v-if="!isActive">
|
||
<view class="top-img">
|
||
<!-- @click="open3D"-->
|
||
<image
|
||
:src="this.collectionsDetail.CollectionImg"
|
||
mode="widthFix"
|
||
></image>
|
||
<!-- <text class="price" v-if="this.collectionsDetail.Price != 0">￥{{ this.collectionsDetail.Price }}</text> -->
|
||
</view>
|
||
<!-- <view class="title-t">{{ collectionsDetail.Price != 0 ? $t('letter.all') : $t('letter.you') }}</view> -->
|
||
<!-- <view class="info-box" style="padding: 28rpx 32rpx">
|
||
<image src="@/static/image/home/to1.png" class="title-img" v-if="collectionsDetail.Price != 0"></image>
|
||
<image src="@/static/image/home/to.png" class="title-img" v-else></image>
|
||
<image src="@/static/image/home/333.png" class="content-img" mode="widthFix"
|
||
v-if="collectionsDetail.Price != 0"></image>
|
||
<image src="@/static/image/home/222.png" class="content-img" mode="widthFix" v-else></image>
|
||
<view style="text-align: right;">
|
||
<image src="@/static/image/home/from.png" class="from-img"></image>
|
||
</view>
|
||
</view> -->
|
||
<view
|
||
class="title-t"
|
||
:style="{ fontSize: '36rpx', color: '#434343', fontWeight: 600 }"
|
||
>{{ $t("collection.info") }}
|
||
</view>
|
||
<view class="info-box" style="padding: 28rpx 32rpx; background: #ffffff">
|
||
<view class="item">
|
||
<text class="label">{{ $t("collection.name") }}</text>
|
||
<text class="value">{{ this.collectionsDetail.Name || "-" }}</text>
|
||
</view>
|
||
<view class="item">
|
||
<text class="label">{{ $t("collection.type") }}</text>
|
||
<text class="value">{{
|
||
this.collectionsDetail.CollectionType || "-"
|
||
}}</text>
|
||
</view>
|
||
<view class="item">
|
||
<text class="label">{{ $t("collection.size") }}</text>
|
||
<text class="value">{{ this.collectionsDetail.Size || "-" }}</text>
|
||
</view>
|
||
<view class="item">
|
||
<text class="label">{{ $t("collection.specs") }}</text>
|
||
<text class="value">{{ this.collectionsDetail.Specs || "-" }}</text>
|
||
</view>
|
||
<view class="item">
|
||
<text class="label">{{ $t("collection.address") }}</text>
|
||
<text class="value">{{ this.collectionsDetail.Address || "-" }}</text>
|
||
</view>
|
||
<view class="item">
|
||
<text class="label">{{ $t("collection.intro") }}</text>
|
||
<view class="des">{{ this.collectionsDetail.Intro || "-" }}</view>
|
||
</view>
|
||
</view>
|
||
<view
|
||
class="title-t"
|
||
:style="{ fontSize: '36rpx', color: '#434343', fontWeight: 600 }"
|
||
>{{ $t("collection.detail") }}
|
||
</view>
|
||
<view class="detail-info">
|
||
<!-- <view class="title-t">{{$t('collection.sell')}}</view>
|
||
<view class="box">
|
||
<image v-for="item in sellPoint" :key="item" :src="item" mode="widthFix" class="img"></image>
|
||
</view> -->
|
||
<view
|
||
v-if="
|
||
this.CollectionUID !== '372afbef-4d3c-4e06-8fae-2ef1068b0a89' &&
|
||
collDetails.length > 0
|
||
"
|
||
class="title-t"
|
||
>{{ $t("collection.sellDec") }}</view
|
||
>
|
||
<view
|
||
v-if="
|
||
this.CollectionUID !== '372afbef-4d3c-4e06-8fae-2ef1068b0a89' &&
|
||
collDetails.length > 0
|
||
"
|
||
class="box"
|
||
>
|
||
<image
|
||
v-for="item in collDetails"
|
||
:src="item"
|
||
:key="item"
|
||
mode="widthFix"
|
||
class="img"
|
||
></image>
|
||
</view>
|
||
<view
|
||
v-if="
|
||
this.CollectionUID !== '372afbef-4d3c-4e06-8fae-2ef1068b0a89' &&
|
||
companyInfo.length > 0
|
||
"
|
||
class="title-t"
|
||
>{{ $t("collection.company") }}</view
|
||
>
|
||
<view
|
||
v-if="
|
||
this.CollectionUID !== '372afbef-4d3c-4e06-8fae-2ef1068b0a89' &&
|
||
companyInfo.length > 0
|
||
"
|
||
class="box"
|
||
>
|
||
<image
|
||
v-for="item in companyInfo"
|
||
:src="item"
|
||
:key="item"
|
||
mode="widthFix"
|
||
class="img"
|
||
></image>
|
||
</view>
|
||
<view v-if="copyright.length > 0" class="title-t">{{
|
||
$t("collection.copyight")
|
||
}}</view>
|
||
<view v-if="copyright.length > 0" lass="box">
|
||
<image
|
||
v-for="item in copyright"
|
||
:src="item"
|
||
:key="item"
|
||
mode="widthFix"
|
||
class="img"
|
||
></image>
|
||
</view>
|
||
<view v-if="Blockchain.length > 0" class="title-t">{{
|
||
$t("collection.blockchain")
|
||
}}</view>
|
||
<view v-if="Blockchain.length > 0" class="box">
|
||
<image
|
||
v-for="item in Blockchain"
|
||
:src="item"
|
||
:key="item"
|
||
mode="widthFix"
|
||
class="img"
|
||
></image>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="" style="text-align: center; margin-top: 30rpx">
|
||
<image
|
||
src="@/static/image/home/fontree.png"
|
||
mode=""
|
||
class="logo"
|
||
></image>
|
||
</view>
|
||
</view>
|
||
<view v-else class="active">
|
||
<view class="head">
|
||
<u-button class="back" @click="back"> 返回 </u-button>
|
||
<view>泰丰十周年纪念徽章</view>
|
||
</view>
|
||
<image
|
||
src="@/static/image/home/drawing-board.png"
|
||
mode="scaleToFill"
|
||
class="drawing-board"
|
||
/>
|
||
</view>
|
||
<view style="height: 180rpx"></view>
|
||
<u-popup
|
||
:show="showVerfy"
|
||
mode="center"
|
||
@close="closeVerfy"
|
||
bgColor="transparent"
|
||
>
|
||
<view class="popup-box">
|
||
<view class="title">{{ $t("buyVerfy.title") }}</view>
|
||
<view class="">
|
||
<view class="input-box">
|
||
<view class="label">{{ $t("buyVerfy.username") }}：</view>
|
||
<view class="input">
|
||
<u--input
|
||
border="none"
|
||
shape="circle"
|
||
v-model="realName"
|
||
@focus="verfFocus"
|
||
></u--input>
|
||
</view>
|
||
</view>
|
||
<view class="input-box">
|
||
<view class="label">{{ $t("buyVerfy.idNum") }}：</view>
|
||
<view class="input">
|
||
<u--input
|
||
border="none"
|
||
shape="circle"
|
||
v-model="idNum"
|
||
@focus="verfFocus"
|
||
></u--input>
|
||
</view>
|
||
</view>
|
||
<view class="flex-end">
|
||
<view class="fl-e" v-if="succes">
|
||
<image
|
||
src="../../../static/image/home/true.png"
|
||
mode=""
|
||
style="width: 30rpx; height: 30rpx; margin-right: 5px"
|
||
></image>
|
||
<text style="color: #ffffff; font-size: 24rpx">{{
|
||
$t("buyVerfy.suss")
|
||
}}</text>
|
||
</view>
|
||
<view class="fl-e" v-if="err">
|
||
<image
|
||
src="../../../static/image/home/false.png"
|
||
mode=""
|
||
style="width: 30rpx; height: 30rpx; margin-right: 5px"
|
||
></image>
|
||
<text style="color: #fd343c; font-size: 24rpx">{{
|
||
$t("buyVerfy.error")
|
||
}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<u-button
|
||
:text="$t('buyVerfy.done')"
|
||
color="#699A70"
|
||
@click="verifyName"
|
||
style="
|
||
'width: 622rpx;
|
||
height: 56rpx;
|
||
border-radius: 40rpx;
|
||
margin-top: 114rpx;'
|
||
"
|
||
></u-button>
|
||
<view @click="closeVerfy" class="cancel">{{
|
||
$t("buyVerfy.cancel")
|
||
}}</view>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
stickyShow: false,
|
||
showVerfy: false,
|
||
CollectionUID: "",
|
||
collectionsDetail: {},
|
||
sellPoint: [],
|
||
collDetails: [],
|
||
companyInfo: [],
|
||
copyright: [],
|
||
Blockchain: [],
|
||
realName: "",
|
||
idNum: "",
|
||
err: false,
|
||
succes: false,
|
||
SeriesName: "",
|
||
isHave: false,
|
||
AirdorpUid: "",
|
||
price: "",
|
||
isActive: false,
|
||
currencyType: "",
|
||
pageParams: {},
|
||
};
|
||
},
|
||
onPageScroll(e) {
|
||
this.stickyShow = e.scrollTop > 5 ? true : false;
|
||
},
|
||
onLoad: function (option) {
|
||
this.pageParams = option;
|
||
this.CollectionUID = option.CollectionUID;
|
||
this.SeriesName = option.SeriesName;
|
||
this.price = option.Price;
|
||
this.isActive = !Object.keys(option).length;
|
||
},
|
||
onShow() {
|
||
this.getCollectionDetail();
|
||
},
|
||
methods: {
|
||
calcRouteParams(obj) {
|
||
if (obj && JSON.stringify(obj) !== "{}") {
|
||
let str = "?";
|
||
for (let key in obj) {
|
||
str += key + "=" + obj[key] + "&";
|
||
}
|
||
return str.slice(0, -1);
|
||
}
|
||
return "";
|
||
},
|
||
open3D() {
|
||
uni.navigateTo({
|
||
url: "/pages/index/detail/open3D/open3D",
|
||
});
|
||
},
|
||
back() {
|
||
let routesRecord = getCurrentPages();
|
||
if (routesRecord.length > 1) {
|
||
this.$common.navigateBack();
|
||
} else {
|
||
uni.reLaunch({
|
||
url: "/pages/index/index",
|
||
});
|
||
}
|
||
},
|
||
async getCollectionDetail() {
|
||
if (this.isActive) return;
|
||
let data = {
|
||
CollectionsUID: this.CollectionUID,
|
||
};
|
||
let res = await this.$api.series.collectionsInfo(data);
|
||
if (res.status === 0) {
|
||
// await this.getPick(res.data.CollectionUID);
|
||
this.collectionsDetail = res.data;
|
||
(this.AllImgList = res.data.CutImg ? JSON.parse(res.data.CutImg) : []),
|
||
this.cutImg();
|
||
} else {
|
||
uni.$u.toast(this.$t("load.failed"));
|
||
}
|
||
},
|
||
async getPick(uid) {
|
||
if (this.isActive) return;
|
||
let parmas = {
|
||
uuid: uid,
|
||
};
|
||
let res = await this.$api.series.userHaveDropNo(parmas);
|
||
if (res.status === 0) {
|
||
console.log(res.data.Hava);
|
||
this.isHave = res.data.Have != 0 ? false : true;
|
||
this.AirdorpUid = res.data.UserAirdorpUid;
|
||
} else {
|
||
this.isHave = false;
|
||
}
|
||
},
|
||
cutImg() {
|
||
this.AllImgList.forEach((v) => {
|
||
if (Array.isArray(v.imgs)) {
|
||
v.imgs = v.imgs.filter((img) => {
|
||
if (img) {
|
||
return img;
|
||
}
|
||
});
|
||
}
|
||
switch (v.label) {
|
||
case "卖点":
|
||
this.sellPoint = v.imgs;
|
||
break;
|
||
case "藏品细节":
|
||
this.collDetails = v.imgs;
|
||
break;
|
||
case "工艺/公司介绍":
|
||
this.companyInfo = v.imgs;
|
||
break;
|
||
case "版权声明":
|
||
this.copyright = v.imgs;
|
||
break;
|
||
case "区块链说明":
|
||
this.Blockchain = v.imgs;
|
||
break;
|
||
}
|
||
});
|
||
},
|
||
buy() {
|
||
// 只有领取和普通购买 才执行下去
|
||
if (
|
||
this.collectionsDetail.CurrencyType === "normal" &&
|
||
["normal", "draw"].includes(this.collectionsDetail.SaleType)
|
||
) {
|
||
let token = uni.getStorageSync("mall_token");
|
||
let realName = uni.getStorageSync("mall-user-info")
|
||
? uni.getStorageSync("mall-user-info").realName
|
||
: "";
|
||
if (!token) {
|
||
uni.$u.toast(this.$t("login.pls"));
|
||
uni.setStorageSync(
|
||
"login-redirect",
|
||
"/pages/index/detail/detail" + this.calcRouteParams(this.pageParams)
|
||
);
|
||
uni.navigateTo({
|
||
url: "/pages/login/login",
|
||
});
|
||
} else if (!realName) {
|
||
this.showVerfy = true;
|
||
} else {
|
||
if (this.collectionsDetail.SaleType === "draw") {
|
||
this.directGet();
|
||
return;
|
||
}
|
||
uni.navigateTo({
|
||
url:
|
||
"/pages/index/comfirm/comfirm?Collection=" +
|
||
encodeURIComponent(JSON.stringify(this.collectionsDetail)),
|
||
});
|
||
}
|
||
}
|
||
},
|
||
async directGet() {
|
||
let data = {
|
||
CollectionsUID: this.collectionsDetail.CollectionUID,
|
||
};
|
||
let res = await this.$api.airdrop.directGet(data);
|
||
if (res.status === 0) {
|
||
uni.$u.toast("领取成功！");
|
||
this.getCollectionDetail();
|
||
|
||
let routesRecord = getCurrentPages();
|
||
if (routesRecord.length > 1) {
|
||
let that = this;
|
||
setTimeout(() => {
|
||
that.$common.navigateBack();
|
||
}, 1000);
|
||
} else {
|
||
setTimeout(() => {
|
||
uni.reLaunch({
|
||
url: "/pages/index/index",
|
||
});
|
||
}, 1000);
|
||
}
|
||
} else {
|
||
uni.$u.toast(res.msg);
|
||
}
|
||
},
|
||
async pickUp() {
|
||
let data = {
|
||
UserId: uni.getStorageSync("mall-user-info").ID,
|
||
Uuid: this.AirdorpUid,
|
||
};
|
||
let res = await this.$api.airdrop.getCollection(data);
|
||
if (res.status === 0) {
|
||
this.recive();
|
||
} else {
|
||
uni.$u.toast(res.msg);
|
||
}
|
||
},
|
||
async recive() {
|
||
let data = {
|
||
collectionsUID: this.CollectionUID,
|
||
userAirdropUuid: this.AirdorpUid,
|
||
};
|
||
let res = await this.$api.airdrop.getCollectionStepTwo(data);
|
||
if (res.status === 0) {
|
||
uni.navigateTo({
|
||
url: "/pages/index/payment/reciveOK",
|
||
});
|
||
} else {
|
||
uni.$u.toast(res.msg);
|
||
}
|
||
},
|
||
async verifyName() {
|
||
let data = {
|
||
idNum: this.idNum,
|
||
realName: this.realName,
|
||
};
|
||
if (!data.idNum || !data.realName) {
|
||
return uni.$u.toast("姓名和身份证号不能为空");
|
||
}
|
||
if (!uni.$u.test.idCard(data.idNum)) {
|
||
return uni.$u.toast("身份证号不正确");
|
||
}
|
||
let res = await this.$api.mine.update(data);
|
||
if (res.status === 0) {
|
||
this.succes = true;
|
||
uni.setStorageSync("mall-user-info", res.data);
|
||
setTimeout(() => {
|
||
this.idNum = "";
|
||
this.realName = "";
|
||
this.showVerfy = false;
|
||
this.err = false;
|
||
this.succes = false;
|
||
}, 1000);
|
||
} else {
|
||
this.err = true;
|
||
this.succes = false;
|
||
uni.$u.toast(res.msg);
|
||
}
|
||
},
|
||
verfFocus() {
|
||
this.err = false;
|
||
this.succes = false;
|
||
},
|
||
doneVerfy() {
|
||
this.showVerfy = false;
|
||
},
|
||
closeVerfy() {
|
||
this.showVerfy = false;
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background: url("@/static/image/home/new_bg.png?x-oss-process=image/resize,w_750,h_1580")
|
||
no-repeat;
|
||
background-size: 100% 100%;
|
||
background-attachment: fixed;
|
||
height: 100vh;
|
||
}
|
||
|
||
.active {
|
||
position: relative;
|
||
|
||
.head {
|
||
position: absolute;
|
||
top: 30rpx;
|
||
left: 26rpx;
|
||
display: flex;
|
||
height: 110rpx;
|
||
align-items: center;
|
||
font-size: 32rpx;
|
||
z-index: 1;
|
||
|
||
.back {
|
||
width: 128rpx;
|
||
height: 56rpx;
|
||
color: #ffffff;
|
||
border-radius: 40rpx;
|
||
line-height: 56rpx;
|
||
background: rgba(255, 255, 255, 0.4);
|
||
margin-right: 78rpx;
|
||
border: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.drawing-board {
|
||
width: 100%;
|
||
height: 6986rpx;
|
||
}
|
||
|
||
.fixed-box {
|
||
position: fixed;
|
||
bottom: 0;
|
||
width: 100%;
|
||
height: 172rpx;
|
||
// background: #3e3e3e;
|
||
background: #ffffff;
|
||
z-index: 10;
|
||
|
||
.btn {
|
||
display: flex;
|
||
padding: 42rpx 38rpx;
|
||
}
|
||
|
||
.back {
|
||
width: 172rpx;
|
||
height: 56rpx;
|
||
border-radius: 40rpx;
|
||
// background: #efba42;
|
||
background: #efba42;
|
||
border-color: aliceblue;
|
||
margin-right: 30rpx;
|
||
}
|
||
|
||
.back-active {
|
||
width: 172rpx;
|
||
height: 56rpx;
|
||
border-radius: 40rpx;
|
||
// background: #efba42;
|
||
background: rgba(255, 255, 255, 0.4);
|
||
border-color: aliceblue;
|
||
margin-right: 30rpx;
|
||
border: 0;
|
||
}
|
||
|
||
.buyer {
|
||
width: 484rpx;
|
||
height: 56rpx;
|
||
border-radius: 40rpx;
|
||
// background: #558bf2;
|
||
background: #699a70;
|
||
border-color: aliceblue;
|
||
}
|
||
|
||
.sell-out {
|
||
width: 484rpx;
|
||
height: 56rpx;
|
||
border-radius: 40rpx;
|
||
// background: #558bf2;
|
||
background: #fc4947;
|
||
border-color: #fc4947;
|
||
}
|
||
|
||
.disBtn {
|
||
width: 484rpx;
|
||
height: 56rpx;
|
||
line-height: 56upx;
|
||
border-radius: 40rpx;
|
||
background: rgba(65, 0, 0, 1);
|
||
border: 1upx #fff solid;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
.top-img {
|
||
background-size: contain;
|
||
width: 660rpx;
|
||
height: 660rpx;
|
||
border-radius: 8rpx;
|
||
margin: 44rpx 44rpx 32rpx 46rpx;
|
||
position: relative;
|
||
|
||
.price {
|
||
font-size: 48rpx;
|
||
position: absolute;
|
||
bottom: 10rpx;
|
||
right: 30upx;
|
||
// left: 50%;
|
||
// transform: translateX(-50%);
|
||
}
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
/* .box-item {
|
||
// background: rgba(255, 255, 255, 0.3);
|
||
// background: rgba(11, 0, 0, 0.4);
|
||
// margin: 0 44rpx 0 46rpx;
|
||
image {
|
||
width: 100%;
|
||
display: block;
|
||
// height: 198rpx;
|
||
}
|
||
} */
|
||
|
||
.detail-info {
|
||
// background: rgba(0, 0, 0, 0.8);
|
||
background: rgba(255, 255, 255, 0.2);
|
||
border-radius: 8rpx;
|
||
margin: 30rpx;
|
||
padding: 23rpx;
|
||
|
||
.box {
|
||
// margin: 0 44rpx 0 46rpx;
|
||
margin-bottom: 46rpx;
|
||
// background: url('@/static/image/home/bg-info.png') no-repeat; // rgba(255, 255, 255, 0.3);
|
||
border-radius: 15rpx;
|
||
// padding: 38rpx 32rpx;
|
||
position: relative;
|
||
overflow: hidden;
|
||
|
||
.img {
|
||
width: 100%;
|
||
display: block;
|
||
}
|
||
}
|
||
}
|
||
|
||
.title-t {
|
||
text-align: center;
|
||
margin: 40rpx 0 30rpx 0;
|
||
color: #494949;
|
||
}
|
||
|
||
.info-box {
|
||
margin: 0 44rpx 0 46rpx;
|
||
margin-bottom: 46rpx;
|
||
// background: rgba(255, 255, 255, 0.3);
|
||
background: rgba(11, 0, 0, 0.3);
|
||
// background: url('@/static/image/home/bg-info.png') no-repeat;
|
||
border-radius: 8rpx;
|
||
// padding: 38rpx 32rpx;
|
||
position: relative;
|
||
|
||
.title-img {
|
||
width: 300upx;
|
||
height: 50upx;
|
||
margin-bottom: 32upx;
|
||
}
|
||
|
||
.content-img {
|
||
width: 100%;
|
||
display: block;
|
||
object-fit: contain;
|
||
}
|
||
|
||
.from-img {
|
||
width: 356upx;
|
||
height: 44upx;
|
||
margin-top: 20upx;
|
||
}
|
||
|
||
.item {
|
||
display: flex;
|
||
margin-bottom: 20rpx;
|
||
font-size: 20rpx;
|
||
|
||
.label {
|
||
padding-right: 40rpx;
|
||
width: 130rpx;
|
||
color: #434343;
|
||
font-size: 20rpx;
|
||
}
|
||
|
||
.value {
|
||
color: #878787;
|
||
}
|
||
|
||
.des {
|
||
width: 450rpx;
|
||
/* display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 3;
|
||
overflow: hidden; */
|
||
word-break: break-all;
|
||
white-space: normal;
|
||
color: #878787;
|
||
}
|
||
}
|
||
|
||
.img {
|
||
width: 100%;
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
.logo {
|
||
margin-top: 10rpx;
|
||
width: 202rpx;
|
||
height: 56rpx;
|
||
}
|
||
|
||
.popup-box {
|
||
background: #ffffff;
|
||
height: 842rpx;
|
||
width: 698rpx;
|
||
overflow: hidden;
|
||
padding: 30rpx 38rpx;
|
||
box-sizing: border-box;
|
||
|
||
.title {
|
||
font-size: 40rpx;
|
||
text-align: center;
|
||
margin-top: 96rpx;
|
||
margin-bottom: 152rpx;
|
||
color: #434343;
|
||
}
|
||
|
||
.input-box {
|
||
display: flex;
|
||
align-items: center;
|
||
padding-bottom: 34rpx;
|
||
|
||
.label {
|
||
font-size: 22rpx;
|
||
color: #699a70;
|
||
}
|
||
|
||
.input {
|
||
background-color: rgba(135, 135, 135, 0.5);
|
||
width: 515rpx;
|
||
height: 60rpx;
|
||
border-radius: 40rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
|
||
/deep/ .input-placeholder {
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
/deep/ .uni-input-input {
|
||
font-size: 24rpx;
|
||
padding: 0 20rpx;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.flex-end {
|
||
padding: 0 34rpx 34rpx 38rpx;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
|
||
.fl-e {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
}
|
||
|
||
.cancel {
|
||
color: #878787;
|
||
font-size: 32rpx;
|
||
margin-top: 30rpx;
|
||
text-align: center;
|
||
}
|
||
}
|
||
</style>
|