update

package.json

@@ -68,7 +68,7 @@
         "thorui-uni": "^3.0.0",
         "uqrcodejs": "^4.0.7",
         "uuid": "^11.1.0",
-        "vue": "^3.4.21",
+        "vue": "^3.5.13",
         "vue-i18n": "^9.1.9"
     },
     "devDependencies": {

pnpm-lock.yaml

@@ -99,7 +99,7 @@ importers:
         specifier: ^11.1.0
         version: 11.1.0
       vue:
-        specifier: ^3.4.21
+        specifier: ^3.5.13
         version: 3.5.13
       vue-i18n:
         specifier: ^9.1.9

src/components/CreditScore.vue

@@ -1,11 +1,44 @@
 <script setup>
-
+import ICON1 from '../static/icons/path1.png';
+import ICON2 from '../static/icons/path2.png';
+import ICON3 from '../static/icons/path3.png';
+import ICON4 from '../static/icons/path4.png';
 </script>
 
 <template>
-    <view class="!size-[164rpx] test"></view>
+    <view class="!size-[132rpx] !grid grid-cols-2 grid-rows-2 relative">
+        <image class="!size-full" :src="ICON1"></image>
+        <image class="!size-full" :src="ICON2"></image>
+        <image class="!size-full" :src="ICON3"></image>
+        <image class="!size-full" :src="ICON4"></image>
+
+        <view class="!absolute left-1/2 top-1/2 -translate-1/2 !flex flex-col justify-center items-center">
+            <view class="score">
+                90
+            </view>
+            <view class="score-info">
+                信用分
+            </view>
+        </view>
+    </view>
 </template>
 
 <style scoped lang="scss">
+.score {
+    color: rgb(22, 93, 255);
+    font-size: 20px;
+    font-weight: 700;
+    line-height: 140%;
+    letter-spacing: 0;
+    text-align: left;
+}
 
+.score-info {
+    color: rgb(29, 33, 41);
+    font-size: 11px;
+    font-weight: 400;
+    line-height: 140%;
+    letter-spacing: 0;
+    text-align: left;
+}
 </style>

src/components/SendMsg.vue

@@ -6,7 +6,7 @@ const modalValue = defineModel();
 </script>
 
 <template>
-    <x-input v-model:model-value="modalValue" placeholder="验证码">
+    <x-input v-bind="$attrs" v-model:model-value="modalValue" placeholder="验证码">
         <template #suffix>
             <x-link>发送验证码</x-link>
         </template>

src/components/XForm.vue

@@ -0,0 +1,41 @@
+<script setup>
+import {showToast} from "../utils/uils.js";
+
+const {model, rules} = defineProps({
+    model: {
+        type: Object,
+        default: {},
+    },
+    rules: {
+        type: Object,
+        default: {},
+    }
+});
+
+const verify = () => {
+    Object.entries(model).forEach(([key, value]) => {
+        if (!rules[key].reg.test(value)) {
+            showToast({
+                icon: 'error',
+                mask: true,
+                title: rules[key].msg,
+            });
+            throw new Error(rules[key].msg);
+        }
+    });
+}
+
+defineExpose({
+    verify
+});
+</script>
+
+<template>
+    <view>
+        <slot></slot>
+    </view>
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/components/XFormItem.vue

@@ -0,0 +1,21 @@
+<script setup>
+const {label} = defineProps({
+    label: {
+        type: String,
+        default: null,
+    }
+});
+</script>
+
+<template>
+    <view class="x-form-item">
+        <view class="!mb-[8rpx]" v-if="label">{{ label }}</view>
+        <slot></slot>
+    </view>
+</template>
+
+<style scoped lang="scss">
+.x-form-item {
+    margin-bottom: 20rpx;
+}
+</style>

src/components/XInfoModal.vue

@@ -0,0 +1,42 @@
+<script setup>
+import XModal from "./XModal.vue";
+
+const emits = defineEmits(['success', 'cancel']);
+const show = defineModel('show');
+
+const success = () => {
+    emits('success');
+}
+
+const cancel = () => {
+    show.value = false;
+    emits('cancel');
+}
+</script>
+
+<template>
+    <x-modal v-model:show="show">
+        <view class="py-[40rpx] px-[32rpx]">
+            <slot></slot>
+        </view>
+
+        <view class="h-[3rpx] w-full bg-[#F2F3F5]"></view>
+
+        <view class="!flex gap-[24rpx] px-[32rpx] pt-[16rpx] pb-[40rpx]">
+            <view
+                @click="cancel"
+                class="rounded-[8rpx] text-[var(--primary-color)] bg-[var(--primary-color-info)] flex-grow py-[20rpx] !flex justify-center items-center">
+                取消
+            </view>
+            <view
+                @click="success"
+                class="rounded-[8rpx] bg-[var(--primary-color)] text-[#fff] flex-grow py-[20rpx] !flex justify-center items-center">
+                确定
+            </view>
+        </view>
+    </x-modal>
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/pages.json

@@ -85,6 +85,13 @@
                 "navigationBarTitleText": "敬请期待",
                 "navigationStyle": "custom"
             }
+        },
+        {
+            "path": "pages/userInfo/index",
+            "style": {
+                "navigationBarTitleText": "编辑资料",
+                "navigationStyle": "custom"
+            }
         }
     ],
     "globalStyle": {

src/pages/user/components/AccompanyingMentor.vue

@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/pages/user/components/Inviter.vue

@@ -0,0 +1,23 @@
+<script setup>
+import Avatar from '../../../static/images/Avatar.png'
+</script>
+
+<template>
+    <view class="p-[20rpx] bg-[#F2F3F5] rounded-[16rpx] !mt-[40rpx] !flex items-center">
+        <image class="!size-[64rpx]" mode="aspectFill" :src="Avatar"></image>
+        <view class="test-24r !ml-[24rpx]">Adam</view>
+
+        <view
+            class="px-[20rpx] py-[7rpx] test-22r text-[#fff] rounded-full bg-[var(--primary-color)] !flex items-center justify-center !ml-auto">
+            联系TA
+        </view>
+        <view
+            class="px-[20rpx] py-[7rpx] test-22r text-[#fff] rounded-full bg-[#C9CDD4] !flex items-center justify-center !ml-[20rpx]">
+            投诉
+        </view>
+    </view>
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/pages/user/components/MyTeam.vue

@@ -0,0 +1,55 @@
+<script setup>
+
+</script>
+
+<template>
+    <view class="!mt-[40rpx] p-[20rpx] bg-[#F2F3F5] rounded-[16rpx] !flex items-center">
+        <view class="invitationCode">
+            我的邀请码：
+        </view>
+        <view class="invitationCodeValue">
+            123445
+        </view>
+        <view class="view-detail !ml-auto">查看团队详情></view>
+    </view>
+
+    <view class="!mt-[24rpx] !grid grid-cols-3 gap-[22rpx]">
+        <view class="rounded-[16rpx] bg-[#E8F3FF] p-[20rpx] !flex gap-[6rpx] flex-col">
+            <view class="test-22r text-[#86909C]">人数</view>
+            <view class="test-36r text-[#165DFF]">323</view>
+        </view>
+        <view class="rounded-[16rpx] bg-[#E8F3FF] p-[20rpx] !flex gap-[6rpx] flex-col">
+            <view class="test-22r text-[#86909C]">团队收益</view>
+            <view class="test-36r text-[#165DFF]">323</view>
+        </view>
+        <view class="rounded-[16rpx] bg-[#E8F3FF] p-[20rpx] !flex gap-[6rpx] flex-col">
+            <view class="test-22r text-[#86909C]">团队奖励</view>
+            <view class="test-36r text-[#165DFF]">323</view>
+        </view>
+    </view>
+</template>
+
+<style scoped lang="scss">
+.view-detail {
+    color: rgb(29, 33, 41);
+    font-size: 12px;
+    font-weight: 500;
+    letter-spacing: 0;
+}
+
+.invitationCode {
+    color: rgb(78, 89, 105);
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 140%;
+    letter-spacing: 0;
+}
+
+.invitationCodeValue {
+    color: rgb(29, 33, 41);
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 140%;
+    letter-spacing: 0;
+}
+</style>

src/pages/user/index.vue

@@ -1,8 +1,40 @@
 <script setup>
+import {defineAsyncComponent, ref} from 'vue';
+import ICON1 from '../../static/icons/icon_提现记录.png';
+import ICON2 from '../../static/icons/icon_变动记录.png';
+import ICON3 from '../../static/icons/icon_我的钱包.png';
+import ICON4 from '../../static/icons/邀请好友.png';
+import ICON5 from '../../static/icons/账号管理.png';
+import ICON6 from '../../static/icons/联系客服.png';
+import ICON7 from '../../static/icons/消息推送.png';
 import Avatar from "../../static/images/Avatar.png";
 import user_BG from '../../static/images/user_bg.png';
 import XNav from "../../components/XNav.vue";
 import CreditScore from "../../components/CreditScore.vue";
+import {toPage} from "../../utils/uils.js";
+
+const MyTeam = defineAsyncComponent(() => import('./components/MyTeam.vue'));
+const Inviter = defineAsyncComponent(() => import('./components/Inviter.vue'));
+const AccompanyingMentor = defineAsyncComponent(() => import('./components/AccompanyingMentor.vue'));
+
+const tabCur = ref('MyTeam');
+const tabs = [
+    {
+        key: 'MyTeam',
+        name: '我的团队',
+        component: MyTeam,
+    },
+    {
+        key: 'Inviter',
+        name: '邀请人',
+        component: Inviter,
+    },
+    {
+        key: 'AccompanyingMentor',
+        name: '陪跑导师',
+        component: AccompanyingMentor,
+    },
+]
 </script>
 
 <template>
@@ -12,7 +44,7 @@ import CreditScore from "../../components/CreditScore.vue";
     <view class="!w-full !h-[484rpx] overflow-hidden relative">
         <image class="!w-[1200rpx] !h-[480rpx] !absolute left-[-200rpx]" :src="user_BG" mode="aspectFill"></image>
 
-        <view class="test !w-full relative z-10 p-[20rpx] !flex gap-[34rpx] relative">
+        <view class="!w-full relative z-10 p-[20rpx] !flex gap-[34rpx] justify-between">
             <image class="!size-[132rpx]" :src="Avatar" mode="aspectFill"></image>
             <view class="!flex flex-col items-start justify-between box-border py-[4rpx]">
                 <view class="user_name">用户名称</view>
@@ -20,19 +52,162 @@ import CreditScore from "../../components/CreditScore.vue";
                 <view class="user_phone">uid：38578</view>
             </view>
 
-            <credit-score></credit-score>
+            <credit-score class="!mr-[110rpx] !ml-auto"></credit-score>
 
             <view
                 class="bg-[rgba(0,0,0,.8)] text-[#fff] absolute right-0 py-[7rpx] w-[120rpx] rounded-l-full !flex items-center justify-center gap-[4rpx]"
                 style="font-size: 22rpx">
                 <tui-icon name="edit" size="16"></tui-icon>
-                <view class="!mt-[2rpx]">编辑</view>
+                <view class="!mt-[2rpx]" @click="toPage('/pages/userInfo/index')">编辑</view>
+            </view>
+        </view>
+    </view>
+
+    <view class="!mx-[20rpx] relative !mt-[-300rpx] z-10 bg-[#fff] rounded-[20rpx]">
+        <view class="balance-card">
+            <view class="py-[52rpx] px-[44rpx] !grid grid-cols-2">
+                <view>
+                    <view class="info-title">总收益（元）</view>
+                    <view class="info-balance">
+                        24687.65
+                    </view>
+                </view>
+                <view>
+                    <view class="info-title">可提现（元）</view>
+                    <view class="info-balance">
+                        358.32
+                    </view>
+                </view>
+            </view>
+            <view class="gap-line"></view>
+            <view class="py-[32rpx] px-[42rpx] !flex items-center gap-[20rpx]">
+                <view class="info-title !mb-0">已提现（元）</view>
+                <view class="info-balance" style="font-size: 28rpx">24239.33</view>
+            </view>
+        </view>
+
+        <view class="px-[34rpx] py-[20rpx] !flex justify-between">
+            <view class="!flex items-center gap-[12rpx]">
+                <image class="!size-[40rpx]" mode="aspectFill" :src="ICON1"></image>
+                <view class="test-24r">提现记录</view>
+            </view>
+            <view class="!flex items-center gap-[12rpx]">
+                <image class="!size-[40rpx]" mode="aspectFill" :src="ICON2"></image>
+                <view class="test-24r">变动记录</view>
+            </view>
+            <view class="!flex items-center gap-[12rpx]">
+                <image class="!size-[40rpx]" mode="aspectFill" :src="ICON3"></image>
+                <view class="test-24r">我的钱包</view>
+            </view>
+        </view>
+    </view>
+
+    <view class="h-[120rpx] rounded-[20rpx] bg-[#fff] !mx-[20rpx] !mt-[20rpx]"></view>
+
+    <view class="rounded-[20rpx] bg-[#fff] !mx-[20rpx] !mt-[20rpx] py-[26rpx] px-[32rpx]">
+        <view class="!flex gap-[64rpx]">
+            <view v-for="item in tabs" :key="item.key"
+                  :class="['tabs-item', tabCur === item.key ? 'tabs-item-cur' : '']"
+                  @click="tabCur=item.key">{{ item.name }}
+            </view>
+        </view>
+
+        <Suspense>
+            <template #default>
+                <component :is="tabs.find(v=>v.key===tabCur).component"></component>
+            </template>
+
+            <template #fallback>
+                加载中...
+            </template>
+        </Suspense>
+    </view>
+
+    <view class="rounded-[20rpx] bg-[#fff] !mx-[20rpx] !mt-[20rpx] py-[26rpx] px-[32rpx]">
+        <view class="test-28r !mb-[40rpx]" style="font-weight: 700;">其他内容</view>
+        <view class="!grid grid-cols-4">
+            <view class="!flex items-center flex-col justify-center gap-[12rpx]">
+                <image class="!size-[84rpx]" mode="aspectFill" :src="ICON4"></image>
+                <view class="test-24r">邀请好友</view>
+            </view>
+            <view class="!flex items-center flex-col justify-center gap-[12rpx]">
+                <image class="!size-[84rpx]" mode="aspectFill" :src="ICON5"></image>
+                <view class="test-24r">邀请好友</view>
+            </view>
+            <view class="!flex items-center flex-col justify-center gap-[12rpx]">
+                <image class="!size-[84rpx]" mode="aspectFill" :src="ICON6"></image>
+                <view class="test-24r">邀请好友</view>
+            </view>
+            <view class="!flex items-center flex-col justify-center gap-[12rpx]">
+                <image class="!size-[84rpx]" mode="aspectFill" :src="ICON7"></image>
+                <view class="test-24r">邀请好友</view>
             </view>
         </view>
     </view>
 </template>
 
 <style lang="scss" scoped>
+.tabs-item {
+    color: rgb(134, 144, 156);
+    font-size: 14px;
+    font-weight: 500;
+    letter-spacing: 0;
+    transition: 500ms;
+    position: relative;
+
+    &::before {
+        content: '';
+        width: 12rpx;
+        height: 12rpx;
+        display: block;
+        position: absolute;
+        background-color: var(--primary-color);
+        border-radius: 50%;
+        left: 50%;
+        top: 100%;
+        transform: translateX(-50%);
+        opacity: 0;
+        transition: 500ms;
+    }
+}
+
+.tabs-item-cur {
+    color: rgb(29, 33, 41);
+    font-size: 14px;
+    font-weight: 500;
+    letter-spacing: 0;
+
+    &::before {
+        opacity: 1;
+    }
+}
+
+.balance-card {
+    border-radius: 20rpx;
+    background: linear-gradient(90.00deg, rgb(109, 154, 225) 2.278%, rgb(98, 147, 224) 98.521%);
+
+    .gap-line {
+        height: 2px;
+        width: 100%;
+        background-color: rgba(232, 243, 255, 0.14);
+    }
+
+    .info-title {
+        color: rgb(190, 218, 255);
+        font-size: 24rpx;
+        font-weight: 400;
+        letter-spacing: 0;
+        margin-bottom: 16rpx;
+    }
+
+    .info-balance {
+        color: rgb(255, 255, 255);
+        font-size: 52rpx;
+        font-weight: 500;
+        letter-spacing: 0;
+    }
+}
+
 .user_name {
     color: rgb(29, 33, 41);
     font-size: 32rpx;

src/pages/userInfo/components/EditPassWord.vue

@@ -0,0 +1,51 @@
+<script setup>
+import {reactive, ref} from "vue";
+import XInfoModal from "../../../components/XInfoModal.vue";
+import XForm from "../../../components/XForm.vue";
+import XFormItem from "../../../components/XFormItem.vue";
+import XInput from "../../../components/XInput.vue";
+import SendMsg from "../../../components/SendMsg.vue";
+
+const XFormRef = ref();
+const show = defineModel('show');
+const rules = {};
+const form = reactive({
+    phone: null,
+    verificationCode: null,
+    password: null,
+});
+
+const success = () => {
+    XFormRef.value.verify();
+}
+</script>
+
+<template>
+    <x-info-modal v-model:show="show" @success="success">
+        <view class="title">修改密码</view>
+
+        <x-form ref="XFormRef" :model="form" :rules="rules">
+            <x-form-item label="手机号">
+                <x-input height="72rpx" placeholder="微信号" v-model:model-value="form.phone"></x-input>
+            </x-form-item>
+            <x-form-item label="验证码">
+                <send-msg height="72rpx" v-model:model-value="form.verificationCode"></send-msg>
+            </x-form-item>
+            <x-form-item label="新登录密码">
+                <x-input height="72rpx" placeholder="新登录密码" v-model:model-value="form.password"></x-input>
+            </x-form-item>
+        </x-form>
+    </x-info-modal>
+</template>
+
+<style scoped lang="scss">
+.title {
+    color: rgb(29, 33, 41);
+    font-size: 32rpx;
+    font-weight: 500;
+    line-height: 24px;
+    letter-spacing: 0;
+    text-align: center;
+    margin-bottom: 20rpx;
+}
+</style>

src/pages/userInfo/components/EditPhone.vue

@@ -0,0 +1,72 @@
+<script setup>
+import {reactive, ref} from "vue";
+import XInfoModal from "../../../components/XInfoModal.vue";
+import XForm from "../../../components/XForm.vue";
+import XFormItem from "../../../components/XFormItem.vue";
+import XInput from "../../../components/XInput.vue";
+import SendMsg from "../../../components/SendMsg.vue";
+
+const XFormRef = ref();
+const show = defineModel('show');
+const rules = {
+    oldPhone: {
+        reg: /^\[1][3-9]\d{9}$/,
+        msg: '请输入正确的手机号',
+    },
+    oldVerificationCode: {
+        reg: /.+/,
+        msg: '请输入正确的手机号',
+    },
+    newPhone: {
+        reg: /^\[1][3-9]\d{9}$/,
+        msg: '请输入正确的手机号',
+    },
+    newVerificationCode: {
+        reg: /.+/,
+        msg: '请输入正确的手机号',
+    },
+};
+const form = reactive({
+    oldPhone: null,
+    oldVerificationCode: null,
+    newPhone: null,
+    newVerificationCode: null,
+});
+
+const success = () => {
+    XFormRef.value.verify();
+}
+</script>
+
+<template>
+    <x-info-modal v-model:show="show" @success="success">
+        <view class="title">更换手机号</view>
+
+        <x-form ref="XFormRef" :model="form" :rules="rules">
+            <x-form-item label="原手机号">
+                <x-input height="72rpx" placeholder="原手机号" v-model:model-value="form.oldPhone"></x-input>
+            </x-form-item>
+            <x-form-item label="验证码">
+                <send-msg height="72rpx" v-model:model-value="form.oldVerificationCode"></send-msg>
+            </x-form-item>
+            <x-form-item label="原手机号">
+                <x-input height="72rpx" placeholder="新手机号" v-model:model-value="form.oldPhone"></x-input>
+            </x-form-item>
+            <x-form-item label="验证码">
+                <send-msg height="72rpx" v-model:model-value="form.newVerificationCode"></send-msg>
+            </x-form-item>
+        </x-form>
+    </x-info-modal>
+</template>
+
+<style scoped lang="scss">
+.title {
+    color: rgb(29, 33, 41);
+    font-size: 32rpx;
+    font-weight: 500;
+    line-height: 24px;
+    letter-spacing: 0;
+    text-align: center;
+    margin-bottom: 20rpx;
+}
+</style>

src/pages/userInfo/components/EditWxCode.vue

@@ -0,0 +1,47 @@
+<script setup>
+import {reactive, ref} from "vue";
+import XInfoModal from "../../../components/XInfoModal.vue";
+import XForm from "../../../components/XForm.vue";
+import XFormItem from "../../../components/XFormItem.vue";
+import XInput from "../../../components/XInput.vue";
+
+const XFormRef = ref();
+const show = defineModel('show');
+const rules = {
+    wxCode: {
+        reg: /^\[1][3-9]\d{9}$/,
+        msg: '请输入正确的微信号',
+    }
+};
+const form = reactive({
+    wxCode: null,
+});
+
+const success = () => {
+    XFormRef.value.verify();
+}
+</script>
+
+<template>
+    <x-info-modal v-model:show="show" @success="success">
+        <view class="title">修改微信号</view>
+
+        <x-form ref="XFormRef" :model="form" :rules="rules">
+            <x-form-item>
+                <x-input height="72rpx" placeholder="微信号" v-model:model-value="form.wxCode"></x-input>
+            </x-form-item>
+        </x-form>
+    </x-info-modal>
+</template>
+
+<style scoped lang="scss">
+.title {
+    color: rgb(29, 33, 41);
+    font-size: 32rpx;
+    font-weight: 500;
+    line-height: 24px;
+    letter-spacing: 0;
+    text-align: center;
+    margin-bottom: 20rpx;
+}
+</style>

src/pages/userInfo/index.vue

@@ -1,11 +1,101 @@
 <script setup>
+import {defineAsyncComponent, ref} from "vue";
+import Right from "../../static/icons/right.png";
+import Avatar from "../../static/images/Avatar.png";
+import XNav from "../../components/XNav.vue";
 
+const EditWxCode = defineAsyncComponent(() => import('./components/EditWxCode.vue'));
+const EditPhone = defineAsyncComponent(() => import('./components/EditPhone.vue'));
+const EditPassWord = defineAsyncComponent(() => import('./components/EditPassWord.vue'));
+
+const showTool = ref(false);
+const tool = ref('EditWxCode');
+const tools = [
+    {
+        key: 'EditWxCode',
+        component: EditWxCode,
+    },
+    {
+        key: 'EditPhone',
+        component: EditPhone,
+    },
+    {
+        key: 'EditPassWord',
+        component: EditPassWord,
+    }
+];
+
+const openTools = (key) => {
+    tool.value = key;
+    showTool.value = true;
+}
 </script>
 
 <template>
     <!--编辑信息-->
+    <x-nav></x-nav>
+
+    <view class="bg-[#fff] !mt-[20rpx]">
+        <view class="!flex items-center h-[108rpx] px-[32rpx]">
+            <view class="title">头像</view>
+            <image class="!size-[64rpx] !ml-auto" mode="aspectFill" :src="Avatar"></image>
+            <image class="!w-[16rpx] !ml-[16rpx]" mode="widthFix" :src="Right"></image>
+        </view>
+        <view class="h-[3rpx] w-full bg-[rgb(229,230,235)] !ml-[32rpx]"></view>
+
+        <view class="!flex items-center h-[108rpx] px-[32rpx]">
+            <view class="title">昵称</view>
+            <view class="!ml-auto whitespace-nowrap value">酷酷猛吃</view>
+            <image class="!w-[16rpx] !ml-[16rpx]" mode="widthFix" :src="Right"></image>
+        </view>
+        <view class="h-[3rpx] w-full bg-[rgb(229,230,235)] !ml-[32rpx]"></view>
+    </view>
+
+    <view class="bg-[#fff] !mt-[20rpx]">
+        <view class="!flex items-center h-[108rpx] px-[32rpx]" @click="openTools('EditPhone')">
+            <view class="title">手机号</view>
+            <view class="!ml-auto whitespace-nowrap value">178****0214</view>
+            <image class="!w-[16rpx] !ml-[16rpx]" mode="widthFix" :src="Right"></image>
+        </view>
+        <view class="h-[3rpx] w-full bg-[rgb(229,230,235)] !ml-[32rpx]"></view>
+
+        <view class="!flex items-center h-[108rpx] px-[32rpx]" @click="openTools('EditWxCode')">
+            <view class="title">微信号</view>
+            <view class="!ml-auto whitespace-nowrap value">za395739</view>
+            <image class="!w-[16rpx] !ml-[16rpx]" mode="widthFix" :src="Right"></image>
+        </view>
+        <view class="h-[3rpx] w-full bg-[rgb(229,230,235)] !ml-[32rpx]"></view>
+
+        <view class="!flex items-center h-[108rpx] px-[32rpx]">
+            <view class="title">昵称</view>
+            <view class="!ml-auto whitespace-nowrap value">酷酷猛吃</view>
+            <image class="!w-[16rpx] !ml-[16rpx]" mode="widthFix" :src="Right"></image>
+        </view>
+        <view class="h-[3rpx] w-full bg-[rgb(229,230,235)] !ml-[32rpx]"></view>
+
+        <view class="!flex items-center h-[108rpx] px-[32rpx]" @click="openTools('EditPassWord')">
+            <view class="title">登录密码</view>
+            <view class="!ml-auto whitespace-nowrap value">**********</view>
+            <image class="!w-[16rpx] !ml-[16rpx]" mode="widthFix" :src="Right"></image>
+        </view>
+        <view class="h-[3rpx] w-full bg-[rgb(229,230,235)] !ml-[32rpx]"></view>
+    </view>
+
+    <component :is="tools.find(v=>v.key===tool).component" v-model:show="showTool"></component>
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
+.title {
+    color: rgb(29, 33, 41);
+    font-size: 28rpx;
+    font-weight: 500;
+    letter-spacing: 0;
+}
 
+.value {
+    color: rgb(134, 144, 156);
+    font-size: 28rpx;
+    font-weight: 500;
+    letter-spacing: 0;
+}
 </style>

src/scss/global.scss

@@ -59,3 +59,7 @@ $primary-color: #2D5CF6;
 .test-28r {
     font-size: 28rpx;
 }
+
+.test-36r {
+    font-size: 36rpx;
+}

src/scss/index.scss

@@ -2,5 +2,24 @@ page {
     background-color: #F2F3F5;
     font-family: PingFang SC;
     --primary-color: #165DFF;
+    --primary-color-info: #E8F3FF;
     --warning-color: #FF7900;
 }
+
+uni-toast {
+    z-index: 10000;
+}
+
+.uni-toast {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 20rpx;
+    width: auto;
+    padding: 0 20rpx;
+
+    .uni-toast__content {
+        white-space: nowrap;
+    }
+}