<template>
	<view class="container">
	  <uv-navbar
		:fixed="false"
		title="关于我们"
		left-arrow
		@leftClick="$onClickLeft"
	  />
  
	  <view class="main-content">
		<view class="image-container">
		  <image :src="aboutImage" mode="aspectFill" class="hero-image"></image>
		</view>
  
		<view class="section">
		  <text class="section-title">关于我们</text>
		  <text class="paragraph">
			人生总有一段需要休憩调养的时光，现在的您，值得被世界温柔呵护。爱愈膳汤铺带来的每一勺，都是满满的滋养心意。它是您恢复元气的秘密法宝，亦是我们传递关爱的温暖桥梁。
		  </text>
		  <text class="paragraph">
			愿您在这碗汤的陪伴下，重焕往日光彩，拥抱崭新的自己。
		  </text>
		</view>
  
		<view class="quality-section">
		  <text class="quality-title">匠心品质</text>
		  <view class="quality-grid">
			<view v-for="(item, index) in qualityItems" :key="index" class="quality-item">
			  <!-- <image :src="item.image" class="quality-image" mode="aspectFill"></image> -->
			  <view class="quality-text">
				<text class="quality-name">{{ item.title }}</text>
				<text class="quality-desc">{{ item.subtitle }}</text>
			  </view>
			</view>
		  </view>
		  <text class="paragraph">
			我们严选汤材，加入农夫山泉水，新鲜慢炖，每一碗汤都是大自然的馈赠，是醇香、健康的源泉，这份爱你值得拥有。
		  </text>
		</view>
  
		<view class="promise-section">
		  <text class="promise-title">品牌承诺</text>
		  <text class="promise-text">
			一碗汤，一份爱，愈见健康来！
		  </text>
		</view>
	  </view>
	</view>
  </template>
  
<script setup>
import { ref } from 'vue';

const aboutImage = 'https://file.aiyushantp.com/file/64fbc6c674c82bdf2ba8875108eed136973f648208e7c8c384271b7b1ea272e5.png';

const qualityItems = ref([
	{
	  image: 'https://ai-public.mastergo.com/ai/img_res/8c148678838dd15d8ce667b28f711884.jpg',
	  title: '2年老鸽',
	  subtitle: '精选食材'
	},
	{
	  image: 'https://ai-public.mastergo.com/ai/img_res/bc7e796b92b26de05767d99ad450dfa4.jpg',
	  title: '400天老母鸡',
	  subtitle: '营养丰富'
	}
]);
</script>
  
<style lang="scss" scoped>
.container {
  background-color: #ffffff;
  min-height: 100vh;
}

.main-content {
  padding: 20px 16px 60px;
}

.image-container {
  margin-top: 24px;
}

.hero-image {
  width: 100%;
  height: 300rpx;
  border-radius: 8px;
  margin-bottom: 32px;
  // display: block;
  object-fit: cover;
}

.section {
  margin-bottom: 32px;
}

.section-title {
  font-size: 24px;
  font-weight: bold;
  color: #52ac41; /* 主题色，绿色 */
  margin-bottom: 16px;
  text-align: center;
  display: block;
}

.paragraph {
  font-size: 15px;
  color: #4b5563;
  line-height: 1.6;
  margin-bottom: 24px;
  display: block;
}

.quality-section {
  background-color: #f9fafb;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 32px;
}

.quality-title {
  font-size: 20px;
  font-weight: bold;
  color: #52ac41;
  margin-bottom: 16px;
  display: block;
}

.quality-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 16px;
}

.quality-item {
  width: 48%;
  display: flex;
  align-items: center;
  // justify-content: center;
  background-color: #ffffff;
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 16px;
}

.quality-image {
  width: 60px;
  height: 60px;
  border-radius: 30px;
  margin-right: 12px;
}

.quality-text {
  flex: 1;
}

.quality-name {
  font-weight: 500;
  font-size: 15px;
  display: block;
}

.quality-desc {
  font-size: 13px;
  color: #6b7280;
  display: block;
}

.promise-section {
  text-align: center;
  background-color: rgba(82, 172, 65, 0.1);
  border-radius: 8px;
  padding: 24px;
}

.promise-title {
  font-size: 24px;
  font-weight: bold;
  color: #52ac41;
  margin-bottom: 16px;
  display: block;
}

.promise-text {
  font-size: 20px;
  font-weight: 500;
  color: #52ac41;
  display: block;
}
</style>