update style
This commit is contained in:
@@ -33,6 +33,15 @@
|
|||||||
</div>
|
</div>
|
||||||
</t-form-item>
|
</t-form-item>
|
||||||
</t-form>
|
</t-form>
|
||||||
|
<t-cell-group theme="card">
|
||||||
|
<t-cell title="修改密码" arrow hover @click="toPassword" />
|
||||||
|
</t-cell-group>
|
||||||
|
<t-button
|
||||||
|
class="logout bg-white"
|
||||||
|
theme="danger"
|
||||||
|
@click="confirmLogout"
|
||||||
|
variant="outline"
|
||||||
|
>退出登录</t-button>
|
||||||
<input
|
<input
|
||||||
ref="avatarInputRef"
|
ref="avatarInputRef"
|
||||||
class="avatar-input"
|
class="avatar-input"
|
||||||
@@ -40,11 +49,6 @@
|
|||||||
accept="image/*"
|
accept="image/*"
|
||||||
@change="handleAvatarSelected"
|
@change="handleAvatarSelected"
|
||||||
>
|
>
|
||||||
<t-cell-group theme="card">
|
|
||||||
<t-cell title="修改密码" arrow hover @click="toPassword" />
|
|
||||||
</t-cell-group>
|
|
||||||
<t-button class="save" theme="primary" :loading="isSaving" @click="saveProfile">保存</t-button>
|
|
||||||
<t-button class="logout bg-white" theme="danger" variant="outline" @click="confirmLogout">退出登录</t-button>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -52,6 +56,7 @@
|
|||||||
import { DialogPlugin, Toast } from "tdesign-mobile-vue";
|
import { DialogPlugin, Toast } from "tdesign-mobile-vue";
|
||||||
import { AttachmentAPI, type Gender, UserAPI, useUserStore } from "timi-web";
|
import { AttachmentAPI, type Gender, UserAPI, useUserStore } from "timi-web";
|
||||||
import PhotoField from "@/components/PhotoField.vue";
|
import PhotoField from "@/components/PhotoField.vue";
|
||||||
|
import { useNavBarStore } from "@/store/navBarStore";
|
||||||
import { buildFallbackAvatar } from "@/utils/avatar";
|
import { buildFallbackAvatar } from "@/utils/avatar";
|
||||||
import { compressUploadImage } from "@/utils/imageCompression";
|
import { compressUploadImage } from "@/utils/imageCompression";
|
||||||
|
|
||||||
@@ -65,6 +70,7 @@ defineOptions({
|
|||||||
});
|
});
|
||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
const navBarStore = useNavBarStore();
|
||||||
const userStore = useUserStore();
|
const userStore = useUserStore();
|
||||||
|
|
||||||
// ---------- 头像 ----------
|
// ---------- 头像 ----------
|
||||||
@@ -210,14 +216,19 @@ function buildUserAvatar(user?: UserAvatarSource): string {
|
|||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
navBarStore.setRightText("保存", "var(--td-brand-color)", saveProfile);
|
||||||
fillForm();
|
fillForm();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
navBarStore.clearRight();
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="less">
|
<style scoped lang="less">
|
||||||
.profile-page {
|
.profile-page {
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
padding: calc(var(--app-nav-height) + 1rem) 0 6rem 0;
|
padding: calc(var(--app-nav-height) + 1rem) 0 calc(1rem + env(safe-area-inset-bottom, 0)) 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
@@ -242,19 +253,9 @@ onMounted(() => {
|
|||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.save,
|
|
||||||
.logout {
|
.logout {
|
||||||
left: 1rem;
|
margin: 1rem auto;
|
||||||
right: 1rem;
|
padding: 0 2rem;
|
||||||
position: fixed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.save {
|
|
||||||
bottom: calc(3.75rem + env(safe-area-inset-bottom, 0));
|
|
||||||
}
|
|
||||||
|
|
||||||
.logout {
|
|
||||||
bottom: calc(.75rem + env(safe-area-inset-bottom, 0));
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user