baby-app/src/pages/myUser/component/setFocus.vue

<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
  },
}
</route>
<template>
  <view>
    <headerTitle title="设置"></headerTitle>
    <view class="card-item">
      <view class="section" @click="nicknameBtn">
        <view class="section-left">更换手机号码</view>
        <view class="nickname">
          <view class="phone">+8618716785955</view>
          <view>
            <image style="width: 48rpx; height: 48rpx" src="/src/static/icon/chevron-right.svg" />
          </view>
        </view>
      </view>
      <view class="clean" @click="cleanBtn">清除本地缓存</view>
    </view>
    <view class="baby-Bottom">
      <wd-button @click="logOutBnt">退出登录</wd-button>
    </view>
  </view>
</template>

<script setup>
  import headerTitle from './headerTitle.vue'

  const cleanBtn = () => {
    console.log('清楚缓存')
  }
  const logOutBnt = () => {
    console.log('退出登录')
  }
</script>

<style lang="scss" scoped>
  .card-item {
    height: calc(100vh - 280rpx);
    background: #f2f2f2;
  }
  .section {
    padding: 32rpx;
    background: #fff;
    border-bottom: 2rpx solid #f1f5f9;
  }
  .section-left {
    display: flex;
    align-items: center;
    height: 60rpx;
  }

  .nickname {
    display: flex;
    align-items: center;
    height: 60rpx;
    font-size: 28rpx;
    .phone {
      width: 100%;
    }
  }
  .clean {
    padding: 32rpx;
    margin-top: 10px;
    background: #fff;
  }
  .baby-Bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 128rpx;
    padding: 16rpx 32rpx;
  }
</style>