<template>
	<!-- 技术支持 -->
	<view class="cloudbox" v-if="technical_support">
		<view class="tit">
			<view class="tu" :style="{backgroundImage: 'url(' + sp2 + ')'}"></view>
			<text>{{technical_support_title}}提供技术支持</text>
			<view class="tu" :style="{backgroundImage: 'url(' + sp2 + ')'}"></view>
		</view>
		<view class="more" @click="toPage">了解更多<up-icon color="#fff" size="10" name="arrow-right" /></view>
	</view>
	
</template>

<script>
	import { ref, reactive, toRefs, watch } from 'vue'
	import { sp2 } from '@/components/img.js'
	
	export default {
		setup(props, context) {
			const data = reactive({
				sp2: sp2,
				technical_support: uni.getStorageSync('technical_support') || 0,
				technical_support_title: uni.getStorageSync('technical_support_title')
			})
			
			const toPage = () => {
				uni.navigateTo({ url: '/pages/mine/aboutUs/join' })
			}
			
			watch(props, async (newProps) => {
				
			})
			
			return {
				...toRefs(data),
				toPage
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cloudbox{
		text-align: center;
		padding: 30rpx 0;
		.tit{
			font-size: 22rpx;
			color: #A1A1A1;
			display: flex;
			align-items: center;
			justify-content: center;
			.tu{
				background-repeat: no-repeat;
				background-size: 339px 306px;
				background-position: -218.5px -105px;
				height: 8.25px;
				width: 15.5px;
				margin-top: 3px;
			}
		}
		.more{
			padding: 2px 4px 2px 7px;
			font-size: 20rpx;
			background-color: #A1A1A1;
			border-radius: 10px;
			color: #fff;
			display: inline-flex;
			align-items: center;
		}
	}
</style>