<script setup>
	const props = defineProps({
		langSet: {
			type: String,
			default: 'en'
		},
		backGroundColor: {
			type: String,
			default: '#F2F2F2'
		}
	});
</script>

<template>
	<div class="page" :style="{'background':backGroundColor}">
		<!-- 优势 -->
		<section class="features" v-if="props.langSet == 'zh-Hans'">
			<div class="features__item">
				<img src="/static/odm-oem/features-icon-1.webp" alt="核心技术" class="features__item__icon">
				<div class="features__item__content">
					<h3 class="features__item__content__title">核心技术</h3>
					<p class="features__item__content__description">电池包热管理<br>PCS 智能双向逆变器<br>混合动力集成控制</p>
				</div>
			</div>
			<div class="features__item">
				<img src="/static/odm-oem/features-icon-2.webp" alt="自动化工厂" class="features__item__icon">
				<div class="features__item__content">
					<h3 class="features__item__content__title">自动化工厂</h3>
					<p class="features__item__content__description">总面积12000平方米<br>选用全球前十半导体<br>供应商芯片</p>
				</div>
			</div>
			<div class="features__item">
				<img src="/static/odm-oem/features-icon-3.webp" alt="全球储能先驱" class="features__item__icon">
				<div class="features__item__content">
					<h3 class="features__item__content__title">全球储能先驱</h3>
					<p class="features__item__content__description">超过两百万台机器<br>销往100多个国家和地区</p>
				</div>
			</div>
			<div class="features__item">
				<img src="/static/odm-oem/features-icon-4.webp" alt="尖端的产品设计" class="features__item__icon">
				<div class="features__item__content">
					<h3 class="features__item__content__title">尖端的产品设计</h3>
					<p class="features__item__content__description">国家专利<br>知识产权</p>
				</div>
			</div>
		</section>
		<!-- 英文优势2 -->
		<section class="protrude" v-else>
			<div class="protrude__item">
				<h2 class="protrude__item__title">Core technology</h2>
				<ul class="protrude__item__list">
					<li>Battery pack thermal management</li>
					<li>PCS intelligent bidirectional inverter</li>
					<li>Hybrid integrated control</li>
				</ul>
			</div>
			<div class="protrude__item">
				<h2 class="protrude__item__title">Automated factory</h2>
				<ul class="protrude__item__list">
					<li>Total area 12000 square meters</li>
					<li>Select the chip from world's top ten semiconductors supplier</li>
				</ul>
			</div>
			<div class="protrude__item">
				<h2 class="protrude__item__title">Global energy storage pioneer</h2>
				<ul class="protrude__item__list">
					<li>Over two million machines sold to more than 100 countries and regions</li>
				</ul>
			</div>
			<div class="protrude__item">
				<h2 class="protrude__item__title">Cutting-edge product design</h2>
				<ul class="protrude__item__list">
					<li>National patent</li>
					<li>Intellectual property</li>
				</ul>
			</div>
		</section>
	</div>
</template>

<style lang="scss" scoped>
	@mixin smallStyle {
		font-size: 0.18rem;

		@media (min-width:1920px) {
			font-size: 0.2rem;
		}

		@media (max-width:750px) {
			font-size: 0.52rem;
		}
	}
	.page{
		overflow: hidden;
	}

	// 英文优势
	.protrude {
		width: 18rem;
		margin: 0.9rem auto 0.45rem;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		align-items: center;

		&__item {
			padding: 0.1rem 0 0 0.1rem;
			width: 4.2rem;
			height: 1.8rem;
			background-color: #fff;

			&__title {
				font-size: 0.28rem;
				color: #333333;
				font-family: MiSans-Medium;
			}

			&__list {
				list-style-type: disc;
				padding-left: 0.2rem;
				margin: 0;

				li {
					list-style-type: disc;
					@include smallStyle;
					letter-spacing: 0.01rem;
					color: #000;
				}

				li::marker {
					color: #0072FF;
				}
			}

			&:first-child {
				border-left: none;
			}
		}

		@media (max-width:1450px) {
			width: 16rem;

			&__item {
				width: 7.8rem;
				height: 2.4rem;
				background-color: #fff;
				padding: 0.2rem 0.3rem 0 0.3rem;
				box-shadow: 0 0.02rem 0.04rem rgba(0, 0, 0, 0.1);
				border-radius: 0.08rem;

				&:nth-child(n+3) {
					margin-top: 3%;
				}

				&__title {
					font-size: 0.33rem;
					color: #333333;
					font-family: MiSans-Medium;
				}

				&__list {
					padding-left: 0.3rem;
					margin: 0;

					li {
						@include smallStyle;
						letter-spacing: 0.01rem;
						color: #000;
					}

					li::marker {
						color: #0072FF;
					}
				}
			}
		}

		@media (max-width:750px) {
			width: 18.3rem;

			&__item {
				width: 9rem;
				height: 4rem;
				background-color: #fff;
				padding: 0.2rem 0rem 0 0.3rem;
				box-shadow: 0 0.02rem 0.04rem rgba(0, 0, 0, 0.1);
				border-radius: 0.08rem;

				&:nth-child(n+3) {
					margin-top: 2%;
				}

				&__title {
					font-size: 0.5rem;
					color: #333333;
					font-family: MiSans-Medium;
				}

				&__list {
					padding-left: 0.6rem;
					margin: 0;

					li {
						font-size: 0.44rem;
						letter-spacing: 0.01rem;
						color: #000;
					}

					li::marker {
						color: #0072FF;
					}
				}
			}
		}
	}
	// 中文优势
	.features {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		align-items: center;
		width: 16rem;
		margin: 0.7rem auto;
	
		&__item {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 3.74rem;
			height: 1.8rem;
			background-color: #fff;
			padding: 0.2rem 0.1rem;
			box-shadow: 0 0.02rem 0.04rem rgba(0, 0, 0, 0.1);
			border-radius: 0.08rem;
	
			&__icon {
				width: 0.9rem;
				height: 0.9rem;
				margin-right: 0.35rem;
			}
	
			&__content {
				&__title {
					font-size: 0.3rem;
					font-family: MiSans-Medium;
					margin-bottom: 0.1rem;
				}
	
				&__description {
					font-size: 0.2rem;
					color: #333;
					font-family: MiSans-Medium;
					line-height: 1.5;
				}
			}
		}
		@media (max-width:1450px) {
			width: 15rem;
			&__item {
				width: 7.3rem;
				height: 2.4rem;
				background-color: #fff;
				padding: 0.2rem 0.1rem;
				box-shadow: 0 0.02rem 0.04rem rgba(0, 0, 0, 0.1);
				border-radius: 0.08rem;
				&:nth-child(n+3){
					margin-top: 3%;
				}
			
				&__icon {
					width: 1.2rem;
					height: 1.2rem;
					margin-right: 0.35rem;
				}
			
				&__content {
					&__title {
						font-size: 0.32rem;
						margin-bottom: 0.1rem;
					}
			
					&__description {
						font-size: 0.26rem;
						line-height: 1.5;
					}
				}
			}
		}
	    
		@media (max-width:750px) {
			width: 17rem;
			&__item {
				width: 8rem;
				height: 4rem;
				background-color: #fff;
				padding: 0.2rem 0.1rem;
				box-shadow: 0 0.02rem 0.04rem rgba(0, 0, 0, 0.1);
				border-radius: 0.08rem;
				&:nth-child(n+3){
					margin-top: 3%;
				}
			
				&__icon {
					width: 1.5rem;
					height: 1.5rem;
					margin-right: 0.35rem;
				}
			
				&__content {
					&__title {
						font-size: 0.62rem;
						margin-bottom: 0.1rem;
					}
			
					&__description {
						@include smallStyle;
						line-height: 1.5;
					}
				}
			}
		}
	}
</style>