做一个好看的小说uniapp设置页面有退出登入按钮等等

<p>以下是一个简单的示例代码，展示了如何在UniApp中创建一个设置页面，其中包括退出登录按钮等功能。</p>
<template>
  <view class="container">
    <view class="setting-item">
      <text class="item-label">账号</text>
      <text class="item-value">{{ account }}</text>
    </view>
    <view class="setting-item">
      <text class="item-label">密码</text>
      <text class="item-value">{{ password }}</text>
    </view>
    <view class="setting-item">
      <text class="item-label">邮箱</text>
      <text class="item-value">{{ email }}</text>
    </view>
    <button class="logout-button" @click="logout">退出登录</button>
  </view>
</template>
<script>
export default {
  data() {
    return {
      account: 'example',
      password: '******',
      email: 'example@example.com'
    }
  },
  methods: {
    logout() {
      // 在这里执行退出登录的逻辑
      // 可以清除本地存储的登录状态等操作
      uni.reLaunch({
        url: '/pages/login' // 跳转到登录页
      })
    }
  }
}
</script>
<style>
.container {
  padding: 20px;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.item-label {
  font-size: 16px;
  color: #333;
}

.item-value {
  font-size: 16px;
  color: #999;
}

.logout-button {
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: #f00;
  color: #fff;
  font-size: 16px;
  border-radius: 5px;
}
</style>
<p>在这个示例中，我们使用了一个容器视图（container）来包含设置页面的内容。每个设置项都使用设置项视图（setting-item）进行布局，包括标签（item-label）和值（item-value）。最后，我们添加了一个退出登录按钮（logout-button），通过调用logout方法来执行退出登录的逻辑。</p>
<p>当点击退出登录按钮时，我们使用uni.reLaunch方法跳转到登录页，以便重新登录。你可以根据自己的需求进行修改和扩展</p>