<template>
	<view class="changecontainer">
		<view>
			<view class="logobox">
				<image src="../../static/logo-xietaitai.png" mode="widthFix"></image>
			</view>
			<view class="customerService">
				<view class="customerTit">
					<text class="bigtitle">蟹太太 官方客服解答</text>
					<view class="smalltitle">
						<view>
							<u-icon name="question-circle-fill" size="28" color="#b98b44"></u-icon>
							<text>提货答疑</text>
						</view>
						<view>
							<u-icon name="hourglass-half-fill" size="28" color="#b98b44"></u-icon>
							<text>售后赔付</text>
						</view>
						<view>
							<u-icon name="star-fill" size="28" color="#b98b44"></u-icon>
							<text>新人特惠</text>
						</view>
					</view>

				</view>
				<view class="qrCodebox">
					<view class="codeimg">
						<image show-menu-by-longpress :src="img" mode="widthFix"></image>
					</view>
				</view>
				<view class="textbottom">长按扫码添加专属管家</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		components: {
			
		},
		data() {
			return {
				img: '',
				kfType:'kf2'
			}
		},
		onShow() {
			const banner4 = uni.getStorageSync('banner4') ? uni.getStorageSync('banner4') : []
			if (banner4.length > 0) {
				banner4.map(item=>{
					if(item.type===this.kfType){
						this.img = item.image
					}
				})
			}

		},
	}
</script>
<style type="text/css" scoped>
	.changecontainer {
		width: 100%;
		padding-bottom: 200rpx;
		padding-top: 60rpx;
		min-height: 100vh;
		display: flex;
		align-items: center;
		background-image: url(../../static/bg-change.jpg);
		background-position: center top;
		background-size: cover;
	}

	.changecontainer>view {
		width: 100%
	}

	.logobox {
		width: 162rpx;
		height: 162rpx;
		border-radius: 50%;
		overflow: hidden;
		margin: 0 auto;
		background: #fff;
		margin-bottom: 60rpx;
		box-shadow: 0 22rpx 32rpx rgba(53, 53, 53, .6);
	}

	.logobox image {
		width: 100%;
		height: auto;
	}

	.customerService {
		width: 87.33%;
		margin: 0 auto;
		background: #fff;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.customerTit {
		text-align: center;
		padding-top: 62rpx;
		padding-bottom: 62rpx;
	}

	.customerTit text {
		display: block;
		font-size: 20rpx;
		color: #000;
	}

	.customerTit text.bigtitle {
		color: #b98b44;
		font-size: 36rpx;
		margin-bottom: 26rpx;
	}

	.customerTit .smalltitle {}

	.customerTit .smalltitle>view {
		display: inline-block;
		margin: 0 20rpx;

	}

	.customerTit .smalltitle text {
		font-size: 28rpx;
		display: inline-block;

		margin-left: 5rpx;
	}

	.qrCodebox {
		width: 510rpx;
		margin: 0 auto;
		border-radius: 30rpx;
		overflow: hidden;
		padding: 22rpx;
		box-sizing: border-box;
		background: #ededed;
		text-align: center;
		margin-bottom: 98rpx;
	}

	.codeimg {
		width: 466rpx;
		height: 466rpx;
		margin: 0 auto;
		background: url(../../static/ewmbg.png) center center no-repeat;
		background-size: cover;
		padding: 19rpx;
	}

	.codeimg image {
		width: 428rpx;
		height: auto;
		border-radius: 20rpx;
	}

	.textbottom {
		width: 100%;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		background: #f4f4f4;
		font-size: 26rpx;
		color: #000;
	}
</style>