aidlab/Code-Create
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

登录注册

Browse Source
This commit is contained in:
李志鹏
2026-05-18 15:22:08 +08:00
parent 4af58134fd
commit d327797236
16 changed files with 734 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/pages/my-account/account-info.vue Normal file
View File

@@ -0,0 +1,28 @@
<template>
<div class="account-info">
<div class="left">
<img alt="" src="" class="avatar" />
<div class="name">12312</div>
<div class="name">12312</div>
<div class="name">12312</div>
</div>
<div class="content"></div>
</div>
</template>
<script setup lang="ts">
import { computed } from 'vue'
</script>
<style scoped lang="less">
.account-info {
display: flex;
>.left{
width: 270px;
border-right: 1px solid #e1e1e1;
margin-right: 30px;
}
>.content{
flex: 1;
}
}
</style>

124
src/pages/my-account/css/style.css Normal file
View File

@@ -0,0 +1,124 @@
.login,
.register {
padding: 35px;
border: 1px solid #e1e1e1;
background-color: #fff;
border-radius: 5px;
}
.login > h2,
.register > h2 {
font-weight: 600;
color: #222;
font-size: 24px;
margin-bottom: 24px;
}
.login > form > *,
.register > form > * {
margin-bottom: 20px;
}
.login > form > .form-item,
.register > form > .form-item {
display: flex;
flex-direction: column;
}
.login > form > .form-item > label,
.register > form > .form-item > label {
margin-bottom: 5px;
font-size: 16px;
line-height: 1.6;
color: #333;
font-weight: 400;
}
.login > form > .form-item > label::after,
.register > form > .form-item > label::after {
content: ' *';
color: #f00;
}
.login > form > .form-item > .input-container > input,
.register > form > .form-item > .input-container > input,
.login > form > .form-item > input,
.register > form > .form-item > input {
width: 100%;
height: 35px;
padding: 0 17px;
font-size: 16px;
border: 1px solid #e1e1e1;
outline: none;
}
.login > form > .form-item > .input-container > input:focus,
.register > form > .form-item > .input-container > input:focus,
.login > form > .form-item > input:focus,
.register > form > .form-item > input:focus {
border-color: #000;
}
.login > form > .form-item > .input-container,
.register > form > .form-item > .input-container {
position: relative;
}
.login > form > .form-item > .input-container > input,
.register > form > .form-item > .input-container > input {
padding-right: 35px;
}
.login > form > .form-item > .input-container > .iconfont,
.register > form > .form-item > .input-container > .iconfont {
position: absolute;
right: 10px;
top: 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
cursor: pointer;
}
.login > form > .remember,
.register > form > .remember {
display: flex;
align-items: center;
}
.login > form > .remember > input,
.register > form > .remember > input {
margin: 4px 8px 0 0;
}
.login > form > .remember > label,
.register > form > .remember > label {
color: #333;
}
.login > form > .remember > .link,
.register > form > .remember > .link {
margin-left: auto;
color: #222;
}
.login > form > .subscribe,
.register > form > .subscribe {
font-size: 16px;
line-height: 1.6;
color: #333;
}
.login > form > .tip,
.register > form > .tip {
font-size: 16px;
line-height: 1.6;
color: #333;
}
.login > form > .tip > a,
.register > form > .tip > a {
color: #000;
}
.login > form > button,
.register > form > button {
width: 100%;
height: 38px;
border-radius: 4px;
border: none;
background-color: #9a2125;
color: #fff;
transition: all 0.3s ease-in-out;
box-shadow: 0 2px 5px rgba(7, 129, 105, 0.3);
cursor: pointer;
font-size: 12px;
}
.login > form > button:hover,
.register > form > button:hover {
background-color: #99494c;
}

61
src/pages/my-account/index.vue Normal file
View File

@@ -0,0 +1,61 @@
<template>
<div class="my-account">
<div class="header">
<h1 class="title">
<span class="iconfont icon-tubiao-"></span>
<span>My Account</span>
</h1>
</div>
<div class="content" v-if="!token">
<Login />
<Register />
</div>
<div class="content" v-else>
<AccountInfo />
</div>
</div>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import Login from './login.vue'
import Register from './register.vue'
import AccountInfo from './account-info.vue'
import { useUserInfoStore } from '@/stores/userInfo'
const userInfoStore = useUserInfoStore()
const token = computed(() => userInfoStore.state.token)
</script>
<style scoped lang="less">
.my-account {
background-color: #f9f9f9;
> .header {
border-top: var(--main-header-height, 85px) solid #000;
background-color: #666;
padding: 32px 0;
color: #fff;
margin-bottom: 32px;
> h1 {
display: flex;
align-items: center;
justify-content: center;
height: 80px;
> span {
font-size: 40px;
font-weight: 400;
}
}
}
> .content {
max-width: 1200px;
margin: 0 auto;
padding-bottom: 80px;
display: flex;
align-items: flex-start;
gap: 60px;
> * {
flex: 1;
}
animation: opacity-in 0.3s linear both;
}
}
</style>

124
src/pages/my-account/less/style.less Normal file
View File

@@ -0,0 +1,124 @@
.login,
.register {
padding: 35px;
border: 1px solid #e1e1e1;
background-color: #fff;
border-radius: 5px;
>h2 {
font-weight: 600;
color: #222;
font-size: 24px;
margin-bottom: 24px;
}
>form {
>* {
margin-bottom: 20px;
}
>.form-item {
display: flex;
flex-direction: column;
>label {
margin-bottom: 5px;
font-size: 16px;
line-height: 1.6;
color: #333;
font-weight: 400;
&::after {
content: ' *';
color: #f00;
}
}
>.input-container>input,
>input {
width: 100%;
height: 35px;
padding: 0 17px;
font-size: 16px;
border: 1px solid #e1e1e1;
outline: none;
&:focus {
border-color: #000;
}
}
>.input-container {
position: relative;
>input {
padding-right: 35px;
}
>.iconfont {
position: absolute;
right: 10px;
top: 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
cursor: pointer;
}
}
}
>.remember {
display: flex;
align-items: center;
>input {
margin: 4px 8px 0 0;
}
>label {
color: #333;
}
>.link {
margin-left: auto;
color: #222;
}
}
>.subscribe {
font-size: 16px;
line-height: 1.6;
color: #333;
}
>.tip {
font-size: 16px;
line-height: 1.6;
color: #333;
>a {
color: #000;
}
}
>button {
width: 100%;
height: 38px;
border-radius: 4px;
border: none;
background-color: #9a2125;
color: #fff;
transition: all 0.3s ease-in-out;
box-shadow: 0 2px 5px rgba(7, 129, 105, 0.3);
cursor: pointer;
font-size: 12px;
&:hover {
background-color: #99494c;
}
}
}
}

62
src/pages/my-account/login.vue Normal file
View File

@@ -0,0 +1,62 @@
<template>
<div class="login">
<h2>Login</h2>
<form @submit.prevent="handleSubmit">
<div class="form-item">
<label for="email">Username or email address</label>
<input type="email" id="email" name="email" required v-model="fromData.email" />
</div>
<div class="form-item">
<label for="password">Password</label>
<div class="input-container">
<input
id="password"
name="password"
required
:type="passShow ? 'text' : 'password'"
v-model="fromData.password"
/>
<span
class="iconfont"
:class="[passShow ? 'icon-hide' : 'icon-show']"
@click="passShow = !passShow"
></span>
</div>
</div>
<div class="remember">
<input type="checkbox" id="remember" name="remember" v-model="remember" />
<label for="remember">Remember me</label>
<router-link class="link" to="/my-account/lost-password"
>Lost your password?</router-link
>
</div>
<button type="submit">LOG IN</button>
</form>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useGlobalStore } from '@/stores/global'
const globalStore = useGlobalStore()
import { useUserInfoStore } from '@/stores/userInfo'
const userInfoStore = useUserInfoStore()
const passShow = ref(false)
const remember = ref(false)
const fromData = ref({
email: '',
password: ''
})
const handleSubmit = () => {
console.log(fromData.value, remember.value)
globalStore.setLoading(true)
setTimeout(() => {
globalStore.setLoading(false)
userInfoStore.setToken('123456')
}, 1000)
}
</script>
<style scoped lang="less">
@import './less/style.less';
</style>

78
src/pages/my-account/register.vue Normal file
View File

@@ -0,0 +1,78 @@
<template>
<div class="register">
<h2>Register</h2>
<form @submit.prevent="handleSubmit">
<div class="form-item">
<label for="username">Username</label>
<input
type="username"
id="username"
name="username"
required
v-model="fromData.username"
/>
</div>
<div class="form-item">
<label for="email">Email address</label>
<input type="email" id="email" name="email" required v-model="fromData.email" />
</div>
<div class="form-item">
<label for="password">Password</label>
<div class="input-container">
<input
id="password"
name="password"
required
:type="passShow ? 'text' : 'password'"
v-model="fromData.password"
/>
<span
class="iconfont"
:class="[passShow ? 'icon-hide' : 'icon-show']"
@click="passShow = !passShow"
></span>
</div>
</div>
<div class="subscribe">
<input
type="checkbox"
id="subscribe"
name="subscribe"
v-model="fromData.subscribe"
/>
<label for="subscribe"
>Subscribe to Code Create product/service news and newsletter</label
>
</div>
<div class="tip">
Your personal data will be used to support your experience throughout this website,
to manage access to your account, and for other purposes described in our
<router-link class="link" to="/my-account/privacy-policy"
>Privacy Policy</router-link
>
</div>
<button type="submit">REGISTER</button>
</form>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useUserInfoStore } from '@/stores/userInfo'
const userInfoStore = useUserInfoStore()
const passShow = ref(false)
const remember = ref(false)
const fromData = ref({
username: '',
email: '',
password: '',
subscribe: false
})
const handleSubmit = () => {
console.log(fromData.value, remember.value)
}
</script>
<style scoped lang="less">
@import './less/style.less';
</style>