AI-app/pages/setting/index.vue

<template>
    <view class="setting-page">
		<uni-nav-bar left-icon="left" @clickLeft="$pageJumb.backJump()" title="设置" >
			<template v-slot:left>
				<view ></view>
			</template>
			<template v-slot:right>
				  <view class="close" @tap="onClose">✕</view>
			</template>
		</uni-nav-bar>

        <view class="group" >
            <view class="group-title">账户</view>
            <view class="card">
                <view class="item" @tap="onItem('账号管理')">
                    <view class="left">
                        <view class="icon-wrap"><uni-icons type="person" size="20" color="#3b3f45" /></view>
                        <text class="text">账号管理</text>
                    </view>
                    <text class="arrow">›</text>
                </view>
                <view class="divider" />
                <view class="item" @tap="onItem('数据管理')">
                    <view class="left">
                        <view class="icon-wrap">
							<image src="../../static/data-management.png" mode="widthFix" style="width: 20px;"></image>
						</view>
                        <text class="text">数据管理</text>
                    </view>
                    <text class="arrow">›</text>
                </view>
            </view>
        </view>

        <view class="group">
            <view class="group-title">关于</view>
            <view class="card">
                <view class="item" @tap="onItem('检查更新')">
                    <view class="left">
                        <view class="icon-wrap"><uni-icons type="refreshempty" size="20" color="#3b3f45" /></view>
                        <text class="text">检查更新</text>
                    </view>
                    <text class="arrow">›</text>
                </view>
                <view class="divider" />
                <view class="item" @tap="onItem('服务协议')">
                    <view class="left">
                        <view class="icon-wrap"><uni-icons type="help" size="20" color="#3b3f45" /></view>
                        <text class="text">服务协议</text>
                    </view>
                    <text class="arrow">›</text>
                </view>
            </view>
        </view>

        <view class="card single" style="margin-top: 30px;">
            <view class="item" @tap="onItem('联系我们')">
                <view class="left">
                    <view class="icon-wrap"><uni-icons type="phone" size="20" color="#3b3f45" /></view>
                    <text class="text">联系我们</text>
                </view>
                <text class="arrow">›</text>
            </view>
        </view>

        <view class="card single">
            <view class="item danger" @tap="onLogout">
                <view class="left">
                    <view class="icon-wrap"><image src="../../static/quit.png" mode="widthFix" style="width: 20px;"></image></view>
                    <text class="text danger">退出登录</text>
                </view>
            </view>
        </view>

        <view class="brand">
			<image src="../../static/cxlogo.png" mode="heightFix" style="height: 40px;"></image>
        </view>
    </view>
</template>

<script>
export default {
    methods: {
        onClose() {
            uni.navigateBack();
        },
        onItem(name) {
            uni.showToast({ title: name, icon: 'none' })
        },
        onLogout() {
            uni.showModal({
                title: '提示',
                content: '确认退出登录？',
                success: (res) => {
                    if (res.confirm) {
                        uni.showToast({ title: '已退出', icon: 'none' })
                    }
                }
            })
        }
    }
}
</script>

<style scoped >
.setting-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #eef1f4;
}

.header {
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: #eef1f4;
}

.title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.close {
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    color: #666;
}

.content {
    flex: 1;
    padding: 8px 14px 20px;
}

.group {
    width: 80vw;
    margin: 8px auto;
}

.group-title {
    font-size: 12px;
    color: #9aa3b2;
    margin: 10px 6px;
}

.card {
    width: 80vw;
    margin: 0 auto;
    background: #fff;
    border-radius: 12px;
    padding: 0 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    box-sizing: border-box;
}

.card.single {
    margin-top: 12px;
}

.item {
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.icon-wrap {
    width: 28px;
    height: 28px;
    border-radius: 14px;
    background: #f1f3f6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-wrap.danger {
    background: #fdecea;
}

.text {
    font-size: 14px;
    color: #333;
}

.arrow {
    color: #b3bac5;
    font-size: 18px;
}

.divider {
    height: 1px;
    background: #eef0f3;
}

.brand {
   position: absolute;
   bottom: 20px;
   left : 50%;
   transform: translateX(-50%);
}
</style>