新增我的页面
This commit is contained in:
李志鹏
5
src/assets/icons/edit.svg
Normal file
5
src/assets/icons/edit.svg
Normal file
@@ -0,0 +1,5 @@
|
||||
<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M21.9376 6.05719C23.0992 4.79866 23.68 4.16941 24.2971 3.80236C25.7862 2.91671 27.62 2.88916 29.134 3.72971C29.7614 4.07807 30.36 4.68961 31.5573 5.9127C32.7546 7.13579 33.3534 7.74734 33.6943 8.38833C34.5172 9.93494 34.4902 11.8081 33.6232 13.3293C33.2639 13.9598 32.6479 14.5531 31.4159 15.7397L16.7575 29.8581C14.4229 32.1068 13.2556 33.2312 11.7966 33.8009C10.3377 34.3708 8.73382 34.3289 5.52608 34.245L5.08965 34.2336C4.11312 34.2081 3.62484 34.1953 3.34102 33.8731C3.05718 33.5511 3.09593 33.0536 3.17343 32.059L3.21552 31.5189C3.43364 28.719 3.54269 27.3192 4.08942 26.0608C4.63614 24.8023 5.57921 23.7807 7.46533 21.7371L21.9376 6.05719Z" stroke="#ABABAB" stroke-width="3.11758" stroke-linejoin="round"/>
|
||||
<path d="M20.2637 6.23535L31.1752 17.1469" stroke="#ABABAB" stroke-width="3.11758" stroke-linejoin="round"/>
|
||||
<path d="M21.8242 34.2939H34.2945" stroke="#ABABAB" stroke-width="3.11758" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
4
src/assets/icons/email.svg
Normal file
4
src/assets/icons/email.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3.83398 11.5L17.0839 19.0075C21.9687 21.7753 24.0326 21.7753 28.9174 19.0075L42.1673 11.5" stroke="#ABABAB" stroke-width="3.11758" stroke-linejoin="round"/>
|
||||
<path d="M3.86421 25.8279C3.9895 31.7036 4.05216 34.6413 6.22016 36.8177C8.38814 38.9939 11.4055 39.0696 17.4401 39.2212C21.1593 39.3147 24.842 39.3147 28.5613 39.2212C34.5959 39.0696 37.6131 38.9939 39.7813 36.8177C41.9492 34.6413 42.0119 31.7036 42.137 25.8279C42.1775 23.9387 42.1775 22.0607 42.137 20.1714C42.0119 14.2958 41.9492 11.358 39.7813 9.18178C37.6131 7.00553 34.5959 6.92973 28.5613 6.7781C24.842 6.68465 21.1593 6.68465 17.4401 6.77808C11.4055 6.92969 8.38814 7.0055 6.22014 9.18176C4.05214 11.358 3.9895 14.2958 3.86419 20.1714C3.8239 22.0607 3.82392 23.9387 3.86421 25.8279Z" stroke="#ABABAB" stroke-width="3.11758" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 929 B |
7
src/assets/icons/password_0.svg
Normal file
7
src/assets/icons/password_0.svg
Normal file
@@ -0,0 +1,7 @@
|
||||
<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M45.724 16.626C45.724 16.626 37.4104 29.0963 24.9401 29.0963C12.4698 29.0963 4.15625 16.626 4.15625 16.626" stroke="#ABABAB" stroke-width="3.11758" stroke-linecap="round"/>
|
||||
<path d="M31.1758 28.0576L34.2934 33.2536" stroke="#ABABAB" stroke-width="3.11758" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M41.5664 22.8613L45.7232 27.0181" stroke="#ABABAB" stroke-width="3.11758" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M4.15625 27.0181L8.31302 22.8613" stroke="#ABABAB" stroke-width="3.11758" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M18.7055 28.0576L15.5879 33.2536" stroke="#ABABAB" stroke-width="3.11758" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 813 B |
9
src/assets/icons/password_1.svg
Normal file
9
src/assets/icons/password_1.svg
Normal file
@@ -0,0 +1,9 @@
|
||||
<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<rect width="49.8" height="49.8" fill="url(#pattern0_1011_3712)"/>
|
||||
<defs>
|
||||
<pattern id="pattern0_1011_3712" patternContentUnits="objectBoundingBox" width="1" height="1">
|
||||
<use xlink:href="#image0_1011_3712" transform="scale(0.0111111)"/>
|
||||
</pattern>
|
||||
<image id="image0_1011_3712" width="90" height="90" preserveAspectRatio="none" xlink:href="data:image/png;base64,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"/>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
9
src/assets/icons/user.svg
Normal file
9
src/assets/icons/user.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.8 KiB |
@@ -31,7 +31,7 @@
|
||||
const navs = [
|
||||
{ label: 'Home', icon: 'home', size: 73, path: '/stylist/customer', on: onHome },
|
||||
{ label: 'Library', icon: 'library', size: 53, path: '/workshop/library' },
|
||||
{ label: 'Profile', icon: 'profile', size: 55, path: '' }
|
||||
{ label: 'Profile', icon: 'profile', size: 55, path: '/workshop/profile' }
|
||||
]
|
||||
const onNavClick = (nav) => {
|
||||
if (currentRoute.value !== nav.path) nav.on ? nav.on(nav) : nav.path && router.push(nav.path)
|
||||
|
||||
@@ -6,6 +6,7 @@
|
||||
title: { type: String, default: 'AI STYLING ASSISTANT' },
|
||||
hasSetting: { type: Boolean, default: false },
|
||||
styleType: { type: String, default: '1' },//1低 2高
|
||||
isPlaceholder: { type: Boolean, default: true },
|
||||
})
|
||||
|
||||
defineEmits(['clickReturn'])
|
||||
@@ -23,7 +24,7 @@
|
||||
<span class="title">{{ title }}</span>
|
||||
<div class="setting" v-if="hasSetting"><SvgIcon name="setting" size="44" /></div>
|
||||
</div>
|
||||
<div class="placeholder"></div>
|
||||
<div class="placeholder" v-if="isPlaceholder"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -113,6 +113,11 @@ const router = createRouter({
|
||||
name: 'library',
|
||||
component: () => import('../views/Workshop/library.vue')
|
||||
},
|
||||
{
|
||||
path: '/workshop/profile',
|
||||
name: 'profile',
|
||||
component: () => import('../views/Workshop/profile.vue')
|
||||
},
|
||||
{
|
||||
// creation
|
||||
path: '/workshop/creation',
|
||||
|
||||
@@ -6,6 +6,7 @@
|
||||
const query = computed(() => router.currentRoute.value.query)
|
||||
|
||||
onMounted(() => {})
|
||||
const loading = ref(false)
|
||||
const onDownload = () => {
|
||||
DownloadImages([{
|
||||
url: 'http://118.31.39.42:3000/falls/2.png',
|
||||
|
||||
217
src/views/Workshop/profile.vue
Normal file
217
src/views/Workshop/profile.vue
Normal file
@@ -0,0 +1,217 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted, inject } from 'vue'
|
||||
import HeaderTitle from '@/components/HeaderTitle.vue'
|
||||
import FooterNavigation from '@/components/FooterNavigation.vue'
|
||||
import router from '@/router'
|
||||
const emit = defineEmits(['view-type'])
|
||||
const form = reactive({
|
||||
name: { edit: false, msg: '', value: 'Momo Fashion' },
|
||||
email: { edit: false, msg: '', value: 'xxx@gmail.com' },
|
||||
password: { show: false, edit: false, msg: '', value: '1234556' }
|
||||
})
|
||||
|
||||
const onEditItem = (item) => {
|
||||
if (!form[item]) return
|
||||
form[item].edit = true
|
||||
}
|
||||
const onSaveItem = (item) => {
|
||||
if (!form[item]) return
|
||||
form[item].edit = false
|
||||
}
|
||||
const logout = () => {}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header-title style-type="2" :is-placeholder="false" />
|
||||
<div class="profile">
|
||||
<div class="header-bg">
|
||||
<svg
|
||||
width="1079"
|
||||
height="572"
|
||||
viewBox="0 0 1079 572"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M0 -6H1079V504.057C1079 504.057 751.757 572.269 536.733 571.999C323.838 571.733 0 504.057 0 504.057V-6Z"
|
||||
fill="#EBF0F0"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="profile">
|
||||
<div class="edit"><SvgIcon name="edit" size="37" /></div>
|
||||
</div>
|
||||
<div class="title">Momo Fashion</div>
|
||||
<p class="sub">Fashion Design</p>
|
||||
<div class="form-item">
|
||||
<div class="label">Your Name</div>
|
||||
<label class="input">
|
||||
<div class="icon"><SvgIcon name="user" size="50" /></div>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Enter your name"
|
||||
v-model="form.name.value"
|
||||
:readonly="!form.name.edit"
|
||||
/>
|
||||
<div class="icon" v-if="form.name.edit" @click.stop="onSaveItem('name')">
|
||||
<SvgIcon name="confirmation" size="37" />
|
||||
</div>
|
||||
<div class="icon" v-else @click="onEditItem('name')">
|
||||
<SvgIcon name="edit" size="37" />
|
||||
</div>
|
||||
</label>
|
||||
<p class="error" v-show="form.name.msg">{{ form.name.msg }}</p>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="label">Your Email</div>
|
||||
<label class="input">
|
||||
<div class="icon"><SvgIcon name="email" size="50" /></div>
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Enter your email"
|
||||
v-model="form.email.value"
|
||||
:readonly="!form.email.edit"
|
||||
required
|
||||
/>
|
||||
<div class="icon" v-if="form.email.edit" @click.stop="onSaveItem('email')">
|
||||
<SvgIcon name="confirmation" size="37" />
|
||||
</div>
|
||||
<div class="icon" v-else @click="onEditItem('email')">
|
||||
<SvgIcon name="edit" size="37" />
|
||||
</div>
|
||||
</label>
|
||||
<p class="error" v-show="form.email.msg">{{ form.email.msg }}</p>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="label">Password</div>
|
||||
<label class="input">
|
||||
<div class="icon" @click="form.password.show = !form.password.show">
|
||||
<SvgIcon :name="form.password.show ? 'password_1' : 'password_0'" size="50" />
|
||||
</div>
|
||||
<input
|
||||
:type="form.password.show ? 'text' : 'password'"
|
||||
placeholder="Enter your password"
|
||||
v-model="form.password.value"
|
||||
:readonly="!form.password.edit"
|
||||
/>
|
||||
<div class="icon" v-if="form.password.edit" @click.stop="onSaveItem('password')">
|
||||
<SvgIcon name="confirmation" size="37" />
|
||||
</div>
|
||||
<div class="icon" v-else @click="onEditItem('password')">
|
||||
<SvgIcon name="edit" size="37" />
|
||||
</div>
|
||||
</label>
|
||||
<p class="error" v-show="form.password.msg">{{ form.password.msg }}</p>
|
||||
</div>
|
||||
<button class="logout" @click="logout">Log out</button>
|
||||
</div>
|
||||
<footer-navigation is-placeholder />
|
||||
</template>
|
||||
|
||||
<style scoped lang="less">
|
||||
.profile {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
> .header-bg {
|
||||
width: 100%;
|
||||
min-height: 57rem;
|
||||
> svg {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
> .profile {
|
||||
margin-top: -23rem;
|
||||
width: 28.9rem;
|
||||
height: 28.9rem;
|
||||
border-radius: 50%;
|
||||
background-color: #d9d9d9;
|
||||
position: relative;
|
||||
> .edit {
|
||||
position: absolute;
|
||||
right: 1.9rem;
|
||||
bottom: 0;
|
||||
width: 6.4rem;
|
||||
height: 6.4rem;
|
||||
border-radius: 50%;
|
||||
background-color: #74716d;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
--svg-icon-color: #fff;
|
||||
}
|
||||
}
|
||||
> .title {
|
||||
margin-top: 3.7rem;
|
||||
font-family: 'satoshiBold';
|
||||
font-size: 4.1rem;
|
||||
line-height: 120%;
|
||||
color: #262422;
|
||||
}
|
||||
> .sub {
|
||||
font-family: satoshiRegular;
|
||||
font-size: 2.9rem;
|
||||
line-height: 120%;
|
||||
margin-top: 1.6rem;
|
||||
margin-bottom: 2.4rem;
|
||||
color: #ababab;
|
||||
}
|
||||
> .form-item {
|
||||
margin: 4.2rem auto 0;
|
||||
width: 68rem;
|
||||
> .label {
|
||||
margin-bottom: 2.5rem;
|
||||
font-family: satoshiBold;
|
||||
font-size: 2.9rem;
|
||||
line-height: 120%;
|
||||
color: #262422;
|
||||
}
|
||||
> .input {
|
||||
width: 100%;
|
||||
height: 11.5rem;
|
||||
border-radius: 2.5rem;
|
||||
border: 0.2rem solid #f1ecec;
|
||||
box-sizing: content-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> .icon {
|
||||
margin: 0 2.5rem;
|
||||
--svg-icon-color: #ababab;
|
||||
}
|
||||
> input {
|
||||
width: 0;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
font-family: satoshiMedium;
|
||||
font-size: 2.9rem;
|
||||
color: #000;
|
||||
border: none;
|
||||
&::placeholder {
|
||||
color: #ababab;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .error {
|
||||
margin-top: 1rem;
|
||||
font-family: satoshiRegular;
|
||||
font-size: 2.5rem;
|
||||
line-height: 120%;
|
||||
color: #ff0000;
|
||||
}
|
||||
}
|
||||
> .logout {
|
||||
margin-top: 7rem;
|
||||
width: 68rem;
|
||||
height: 11.5rem;
|
||||
border-radius: 2.5rem;
|
||||
background-color: transparent;
|
||||
border: 0.2rem solid #3b3b3b;
|
||||
font-family: satoshiBold;
|
||||
font-size: 3.32rem;
|
||||
line-height: 120%;
|
||||
color: #222;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user