能为刚才写的三个页面添加好看的背景和样式吗

当然可以，下面是一个基于uni-app的三个可互相跳转的手机app界面，并添加了好看的背景和样式的示例代码：

1. 在App.vue中添加全局样式和背景图片：

<template>
  <div>
    <router-view />
  </div>
</template>

<script>
  export default {
    onLaunch: function() {
      uni.setNavigationBarColor({
        frontColor: '#000000',
        backgroundColor: '#FFFFFF'
      })
    }
  }
</script>

<style>
  body {
    background-image: url('../static/background.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    margin: 0;
    padding: 0;
  }
</style>

2. 在pages.json文件中添加全局样式：

{
  "pages": [
    {
      "path": "pages/home/home",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/about/about",
      "style": {
        "navigationBarTitleText": "关于"
      }
    },
    {
      "path": "pages/contact/contact",
      "style": {
        "navigationBarTitleText": "联系我们"
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "Uni-App Demo",
    "navigationBarBackgroundColor": "#FFFFFF",
    "backgroundColor": "rgba(255, 255, 255, 0.8)"
  }
}

3. 在home.vue、about.vue和contact.vue页面中添加好看的样式：

<template>
  <view class="container">
    <view class="content">
      <text class="text">欢迎来到首页！</text>
      <button class="button" @click="goToAbout">关于</button>
      <button class="button" @click="goToContact">联系我们</button>
    </view>
  </view>
</template>

<script>
  export default {
    methods: {
      goToAbout() {
        uni.navigateTo({
          url: '/pages/about/about'
        })
      },
      goToContact() {
        uni.navigateTo({
          url: '/pages/contact/contact'
        })
      }
    }
  }
</script>

<style>
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  }
  .text {
    font-size: 20px;
    margin-bottom: 20px;
    text-align: center;
  }
  .button {
    width: 200px;
    height: 40px;
    background-color: #4CAF50;
    color: #FFFFFF;
    border: none;
    border-radius: 5px;
    margin-bottom: 10px;
  }
</style>

<template>
  <view class="container">
    <view class="content">
      <text class="text">这是{{title}}页面！</text>
      <button class="button" @click="goBack">返回</button>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        title: ''
      }
    },
    onLoad(options) {
      this.title = options.title
    },
    methods: {
      goBack() {
        uni.navigateBack({
          delta: 1
        })
      }
    }
  }
</script>

<style>
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  }
  .text {
    font-size: 20px;
    margin-bottom: 20px;
    text-align: center;
  }
  .button {
    width: 200px;
    height: 40px;
    background-color: #4CAF50;
    color: #FFFFFF;
    border: none;
    border-radius: 5px;
    margin-bottom: 10px;
  }
</style>

通过以上代码，我们添加了全局样式和背景图片，并在页面中添加了好看的样式，使得三个页面看起来更加美观。