帮我把这段代码修改为vue文件<template> <view class="main"> <!-- <view class="logo-container"> <image class="logo" src="/static/logo.png"></image> </view> --> <view class="text-area"> <text class="title">职业分析规划测试</text> <el-button @click="toQuestionnaire">开始测试</el-button> </view> <view class="divided"> <view class="text-area divided-text">更多测试</view> <view class="text-area divided-text">(由第三方提供)</view> </view> <view class="text-area"> <text class="title">MBIT职业性格测试</text> <el-button @click="toApeskTest">开始测试</el-button> </view> <view class="footer"> Copyright © 2022 LEC </view> </view> </template> <script > methods:{ toQuestionnaire(){ this.$router.push({ path: '/home' }) }, } const toQuestionnaire = () => { uni.navigateTo({ url: '/pages/questionnaire/questionnaire' }) } const toApeskTest = () => { uni.navigateTo({ url: '/pages/apesk/apesk' }) } </script> <style lang="scss"> .main { padding: 50px; } .logo-container { text-align: center; .logo { margin: 0 auto; width: 100%; } } .text-area { text-align: center; font-size: 48px; } .title { font-size: 18px; } .divided { margin-top: 100px; padding-top: 10px; border-top: 1px solid #8f8f94; color: #8f8f94; .divided-text { font-size: 20px; } :nth-child(2) { font-size: 16px; } } .footer { font-size: 12px; color: #8f8f94; position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; } </style>

这是你的代码的修改版本：

<template>
  <view class="main">
    <!-- <view class="logo-container">
      <image class="logo" src="/static/logo.png"></image>
    </view> -->
    <view class="text-area">
      <text class="title">职业分析规划测试</text>
      <el-button @click="toQuestionnaire">开始测试</el-button>
    </view>
    <view class="divided">
      <view class="text-area divided-text">更多测试</view>
      <view class="text-area divided-text">(由第三方提供)</view>
    </view>
    <view class="text-area">
      <text class="title">MBIT职业性格测试</text>
      <el-button @click="toApeskTest">开始测试</el-button>
    </view>
    <view class="footer">
      Copyright © 2022 LEC
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    toQuestionnaire() {
      this.$router.push({
        path: '/home'
      })
    },
    toApeskTest() {
      this.$router.push({
        path: '/apesk'
      })
    }
  }
}
</script>

<style lang="scss">
.main {
  padding: 50px;
}

.logo-container {
  text-align: center;
  .logo {
    margin: 0 auto;
    width: 100%;
  }
}

.text-area {
  text-align: center;
  font-size: 48px;
}

.title {
  font-size: 18px;
}

.divided {
  margin-top: 100px;
  padding-top: 10px;
  border-top: 1px solid;
}
</style>