<template>
	<view class="about">
		<view class="hero">
			<image class="logo" src="/static/logo.png" mode="aspectFit" />
			<text class="title">五金配件管家</text>
			<text class="subtitle">专注小微门店的极简进销存</text>
		</view>

		<view class="card">
			<view class="row">
				<text class="label">版本</text>
				<text class="value">1.0.0</text>
			</view>
			<view class="row">
				<text class="label">隐私协议</text>
				<text class="link" @click="openPolicy">查看</text>
			</view>
			<view class="row">
				<text class="label">用户协议</text>
				<text class="link" @click="openTerms">查看</text>
			</view>
			<view class="row">
				<text class="label">个人信息安全投诉</text>
				<text class="link" @click="openComplaint">提交</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	methods: {
		openPolicy() {
			uni.showModal({ title: '隐私协议', content: '隐私协议（静态占位）', showCancel: false })
		},
		openTerms() {
			uni.showModal({ title: '用户协议', content: '用户协议（静态占位）', showCancel: false })
		},
		openComplaint() {
			uni.showToast({ title: '暂未开通', icon: 'none' })
		}
	}
}
</script>

<style lang="scss">
.about { padding: 24rpx; }
.hero { padding: 32rpx 24rpx; display: flex; flex-direction: column; align-items: center; gap: 10rpx; }
.logo { width: 160rpx; height: 160rpx; border-radius: 32rpx; }
.title { margin-top: 8rpx; font-size: 36rpx; font-weight: 800; color: $uni-text-color; }
.subtitle { font-size: 26rpx; color: $uni-text-color-grey; }
.card { margin-top: 18rpx; background: $uni-bg-color-grey; border-radius: 16rpx; overflow: hidden; }
.row { display: flex; align-items: center; padding: 24rpx; border-top: 1rpx solid $uni-border-color; }
.label { color: $uni-text-color-grey; }
.value { margin-left: auto; color: $uni-text-color; }
.link { margin-left: auto; color: $uni-color-primary; }
</style>


