<template>
|
<view class="page">
|
<view class="navigation-bar">
|
<view class="back-button" @tap.stop="goBack"><image class="back-icon" src="/static/icons/lucide/back-left.svg" mode="aspectFit"></image></view>
|
<text class="page-title">商户协议</text>
|
</view>
|
|
<view class="content">
|
<view class="agreement-card">
|
<view class="agreement-row" @tap="openAgreement('user')">
|
<view class="agreement-leading"><view class="icon-wrap"><image class="agreement-icon" src="/static/icons/lucide/file-text.svg" mode="aspectFit"></image></view><text class="agreement-label">用户协议</text></view>
|
<image class="row-arrow" src="/static/icons/lucide/chevron-right.svg" mode="aspectFit"></image>
|
</view>
|
<view class="divider"></view>
|
<view class="agreement-row" @tap="openAgreement('privacy')">
|
<view class="agreement-leading"><view class="icon-wrap"><image class="agreement-icon" src="/static/icons/lucide/badge-check.svg" mode="aspectFit"></image></view><text class="agreement-label">隐私与权限</text></view>
|
<image class="row-arrow" src="/static/icons/lucide/chevron-right.svg" mode="aspectFit"></image>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script setup lang="uts">
|
const goBack = () => {
|
uni.navigateBack()
|
}
|
|
const openAgreement = (type: string) => {
|
uni.navigateTo({ url: '/pages/agreement-detail/agreement-detail?type=' + type })
|
}
|
</script>
|
|
<style>
|
page { background-color: #F4F6F9; }
|
.page { display: flex; flex: 1; flex-direction: column; width: 100%; height: 100vh; overflow: hidden; background-color: #F4F6F9; }
|
.navigation-bar { display: flex; height: 174rpx; padding: 68rpx 38rpx 0; flex-direction: row; align-items: center; background-color: #F4F6F9; box-sizing: border-box; position: relative; flex: none; }
|
.back-button { display: flex; width: 64rpx; height: 64rpx; justify-content: center; align-items: center; position: absolute; left: 38rpx; top: 89rpx; z-index: 2; }
|
.back-icon { width: 38rpx; height: 38rpx; }
|
.page-title { width: 100%; color: #202B3E; font-size: 34rpx; line-height: 48rpx; text-align: center; font-weight: 700; }
|
.content { flex: 1; padding: 0 34rpx; background-color: #F4F6F9; box-sizing: border-box; }
|
.agreement-card { overflow: hidden; border-radius: 32rpx; background-color: #FFFFFF; box-shadow: 0 14rpx 34rpx rgba(42, 53, 69, 0.05); }
|
.agreement-row { display: flex; height: 104rpx; padding: 0 28rpx; flex-direction: row; align-items: center; justify-content: space-between; box-sizing: border-box; }
|
.agreement-leading { display: flex; flex-direction: row; align-items: center; }
|
.icon-wrap { display: flex; width: 58rpx; height: 58rpx; justify-content: center; align-items: center; border-radius: 29rpx; background-color: #FFF1E9; }
|
.agreement-icon { width: 31rpx; height: 31rpx; }
|
.agreement-label { color: #273345; font-size: 29rpx; line-height: 41rpx; margin-left: 20rpx; font-weight: 600; }
|
.row-arrow { width: 29rpx; height: 29rpx; opacity: 0.62; }
|
.divider { height: 1rpx; margin-left: 106rpx; background-color: #EDF0F4; }
|
</style>
|
