Compare commits

3 Commits
master ... dev

Author SHA1 Message Date
f2a25a048d 修复了分辨率自适应问题 2024-04-23 00:28:39 +08:00
b7e2b6653d 修复了界面显示异常的问题 2024-04-22 23:31:54 +08:00
b74467e2bd '完成登录注册页面' 2024-04-22 01:28:01 +08:00
239 changed files with 83224 additions and 36 deletions

View File

@@ -288,6 +288,18 @@
"watchThrottled": true, "watchThrottled": true,
"watchTriggerable": true, "watchTriggerable": true,
"watchWithFilter": true, "watchWithFilter": true,
"whenever": true "whenever": true,
"acceptHMRUpdate": true,
"createPinia": true,
"defineStore": true,
"getActivePinia": true,
"mapActions": true,
"mapGetters": true,
"mapState": true,
"mapStores": true,
"mapWritableState": true,
"setActivePinia": true,
"setMapStoreSuffix": true,
"storeToRefs": true
} }
} }

View File

@@ -0,0 +1 @@
<svg width="70" height="70" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient x1="17.621%" y1="50%" x2="100%" y2="50%" id="a"><stop stop-color="#FFE2B8" offset="0%"/><stop stop-color="#FFCA7C" offset="100%"/></linearGradient><filter x="-10.7%" y="-10.7%" width="121.4%" height="121.4%" filterUnits="objectBoundingBox" id="c"><feGaussianBlur stdDeviation="6" in="SourceAlpha" result="shadowBlurInner1"/><feOffset dx="3" in="shadowBlurInner1" result="shadowOffsetInner1"/><feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0" in="shadowInnerInner1"/></filter><path id="b" d="m1291 377 70 70v-70z"/></defs><g transform="translate(-1291 -377)" fill="none" fill-rule="evenodd"><use fill="url(#a)" xlink:href="#b"/><use fill="#000" filter="url(#c)" xlink:href="#b"/></g></svg>

After

Width:  |  Height:  |  Size: 953 B

View File

@@ -0,0 +1 @@
<svg t="1713545458159" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6449" width="200" height="200"><path d="M512 85.333333C276.266667 85.333333 85.333333 276.266667 85.333333 512a426.410667 426.410667 0 0 0 291.754667 404.821333c21.333333 3.712 29.312-9.088 29.312-20.309333 0-10.112-0.554667-43.690667-0.554667-79.445333-107.178667 19.754667-134.912-26.112-143.445333-50.133334-4.821333-12.288-25.6-50.133333-43.733333-60.288-14.933333-7.978667-36.266667-27.733333-0.554667-28.245333 33.621333-0.554667 57.6 30.933333 65.621333 43.733333 38.4 64.512 99.754667 46.378667 124.245334 35.2 3.754667-27.733333 14.933333-46.378667 27.221333-57.045333-94.933333-10.666667-194.133333-47.488-194.133333-210.688 0-46.421333 16.512-84.778667 43.733333-114.688-4.266667-10.666667-19.2-54.4 4.266667-113.066667 0 0 35.712-11.178667 117.333333 43.776a395.946667 395.946667 0 0 1 106.666667-14.421333c36.266667 0 72.533333 4.778667 106.666666 14.378667 81.578667-55.466667 117.333333-43.690667 117.333334-43.690667 23.466667 58.666667 8.533333 102.4 4.266666 113.066667 27.178667 29.866667 43.733333 67.712 43.733334 114.645333 0 163.754667-99.712 200.021333-194.645334 210.688 15.445333 13.312 28.8 38.912 28.8 78.933333 0 57.045333-0.554667 102.912-0.554666 117.333334 0 11.178667 8.021333 24.490667 29.354666 20.224A427.349333 427.349333 0 0 0 938.666667 512c0-235.733333-190.933333-426.666667-426.666667-426.666667z" fill="#000000" p-id="6450"></path></svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@@ -0,0 +1 @@
<svg t="1713545458159" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6449" width="200" height="200"><path d="M512 85.333333C276.266667 85.333333 85.333333 276.266667 85.333333 512a426.410667 426.410667 0 0 0 291.754667 404.821333c21.333333 3.712 29.312-9.088 29.312-20.309333 0-10.112-0.554667-43.690667-0.554667-79.445333-107.178667 19.754667-134.912-26.112-143.445333-50.133334-4.821333-12.288-25.6-50.133333-43.733333-60.288-14.933333-7.978667-36.266667-27.733333-0.554667-28.245333 33.621333-0.554667 57.6 30.933333 65.621333 43.733333 38.4 64.512 99.754667 46.378667 124.245334 35.2 3.754667-27.733333 14.933333-46.378667 27.221333-57.045333-94.933333-10.666667-194.133333-47.488-194.133333-210.688 0-46.421333 16.512-84.778667 43.733333-114.688-4.266667-10.666667-19.2-54.4 4.266667-113.066667 0 0 35.712-11.178667 117.333333 43.776a395.946667 395.946667 0 0 1 106.666667-14.421333c36.266667 0 72.533333 4.778667 106.666666 14.378667 81.578667-55.466667 117.333333-43.690667 117.333334-43.690667 23.466667 58.666667 8.533333 102.4 4.266666 113.066667 27.178667 29.866667 43.733333 67.712 43.733334 114.645333 0 163.754667-99.712 200.021333-194.645334 210.688 15.445333 13.312 28.8 38.912 28.8 78.933333 0 57.045333-0.554667 102.912-0.554666 117.333334 0 11.178667 8.021333 24.490667 29.354666 20.224A427.349333 427.349333 0 0 0 938.666667 512c0-235.733333-190.933333-426.666667-426.666667-426.666667z" fill="#000000" p-id="6450"></path></svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@@ -0,0 +1 @@
<svg t="1713703704663" class="icon" viewBox="0 0 1107 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3547" width="200" height="200"><path d="M223.53522 0.010816a46.507741 46.507741 0 0 0-43.98659 31.597143l-0.108157 0.311494L62.710368 391.048988c0 0.311494-0.242273 0.553767-0.311494 0.934481L3.254006 573.608097A64.592763 64.592763 0 0 0 0.000627 594.13099a66.141579 66.141579 0 0 0 27.167011 53.504452l0.173052 0.138442 510.922151 371.242098a26.120046 26.120046 0 0 0 30.974155-0.207663l-0.06922 0.034611L1080.159147 647.843105a66.367629 66.367629 0 0 0 23.949324-74.754164l0.138441 0.484545L1046.100338 395.133016a25.130404 25.130404 0 0 0-1.488248-4.949289l0.069221 0.173053L928.124258 31.573349A46.414726 46.414726 0 0 0 884.20689 0.005408h-0.622987a45.517018 45.517018 0 0 0-43.330073 31.527922l-0.108158 0.311494-111.018305 341.830818H378.510912L267.315228 31.850232A45.626258 45.626258 0 0 0 223.886732 0.010816h-0.346104z m-0.276884 65.543468l100.329096 308.151642H123.408379z m661.156217 0l100.052212 308.151642H784.120067z m-488.872074 360.380918h316.631194l-99.221563 305.382809-59.254107 181.861493z m-254.474138 0.242273h199.442501L482.924036 864.559446z m626.098032 0h199.615553L624.748853 864.628667 761.278277 444.345778z m-670.263081 28.724479L418.894773 867.743604 58.142875 605.551344a14.092927 14.092927 0 0 1-5.849159-11.420354 14.468234 14.468234 0 0 1 0.692208-4.434459l-0.034611 0.108157z m913.657561 0l43.917368 134.833513a13.551058 13.551058 0 0 1 0.692208 4.360912 14.06048 14.06048 0 0 1-5.745328 11.356542l-0.034611 0.03461v0.108158L688.531516 867.674383l1.142144-1.622363z" fill="#FCA121" p-id="3548"></path></svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

@@ -0,0 +1 @@
<svg t="1713545387508" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3584" width="200" height="200"><path d="M68.399765 590.615655c-37.073602 90.765025-43.465533 176.418105-14.062849 191.757941 20.45478 11.505876 53.692423-14.061849 84.374094-60.084355 11.504876 51.135451 42.186547 95.87897 84.373094 132.952572-44.743519 16.619821-74.146204 44.743519-74.146204 75.42519 0 51.135451 79.259149 93.321998 176.418105 93.321997 88.208052 0 161.07627-33.237643 175.138119-77.982162h20.45478C535.009753 990.751357 607.87897 1023.989 696.087023 1023.989c98.436943 0 176.418105-40.908561 176.418104-93.321997 0-30.68167-29.402684-58.806368-74.146203-75.42519 42.186547-37.073602 72.868217-81.817121 84.374094-132.952572 30.68067 46.022506 62.640327 71.589231 84.373093 60.084355 30.68167-15.339835 24.289739-102.270901-14.061849-191.757941-29.403684-70.311245-69.033258-122.725682-99.714929-134.230558 0-3.835959 1.278986-8.949904 1.278987-14.062849 0-26.845712-7.669918-52.413437-20.454781-72.868217v-5.112945c0-12.783863-2.555973-24.289739-7.669917-34.516629C818.813704 145.736434 701.200968 0 510.722014 0 320.24206 0 202.630323 145.736434 194.959406 329.824457c-5.112945 10.22689-7.669918 21.732767-7.669918 34.516629v5.112945c-12.783863 20.45478-20.45478 46.022506-20.45478 72.869217v14.061849c-28.123698 11.504876-69.032258 62.640327-98.434943 134.230558z" fill="#4CAFE9" p-id="3585"></path></svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

@@ -0,0 +1 @@
<svg t="1713545428512" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4631" width="200" height="200"><path d="M683.058 364.695c11 0 22 1.016 32.943 1.976C686.564 230.064 538.896 128 370.681 128c-188.104 0.66-342.237 127.793-342.237 289.226 0 93.068 51.379 169.827 136.725 229.256L130.72 748.43l119.796-59.368c42.918 8.395 77.37 16.79 119.742 16.79 11 0 21.46-0.48 31.914-1.442a259.168 259.168 0 0 1-10.455-71.358c0.485-148.002 128.744-268.297 291.403-268.297l-0.06-0.06z m-184.113-91.992c25.99 0 42.913 16.79 42.913 42.575 0 25.188-16.923 42.579-42.913 42.579-25.45 0-51.38-16.85-51.38-42.58 0-25.784 25.93-42.574 51.38-42.574z m-239.544 85.154c-25.384 0-51.374-16.85-51.374-42.58 0-25.784 25.99-42.574 51.374-42.574 25.45 0 42.918 16.79 42.918 42.575 0 25.188-16.924 42.579-42.918 42.579z m736.155 271.655c0-135.647-136.725-246.527-290.983-246.527-162.655 0-290.918 110.88-290.918 246.527 0 136.128 128.263 246.587 290.918 246.587 33.972 0 68.423-8.395 102.818-16.85l93.809 50.973-25.93-84.677c68.907-51.93 120.286-119.815 120.286-196.033z m-385.275-42.58c-16.923 0-34.452-16.79-34.452-34.179 0-16.79 17.529-34.18 34.452-34.18 25.99 0 42.918 16.85 42.918 34.18 0 17.39-16.928 34.18-42.918 34.18z m188.165 0c-16.984 0-33.972-16.79-33.972-34.179 0-16.79 16.927-34.18 33.972-34.18 25.93 0 42.913 16.85 42.913 34.18 0 17.39-16.983 34.18-42.913 34.18z" fill="#09BB07" p-id="4632"></path></svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

@@ -0,0 +1 @@
<svg t="1713540651413" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6404" width="200" height="200"><path d="M730.4704 357.7856c-101.12 1.3312-189.44 28.928-258.1504 102.4-70.2976 75.2128-89.1392 161.6384-53.0432 266.8544-46.08-5.4272-87.04-11.008-128.7168-14.6432a68.3008 68.3008 0 0 0-36.6592 5.7344c-30.72 16.5888-59.2896 36.5056-89.6512 53.5552a31.9488 31.9488 0 0 1-26.368 1.024c-4.5568-2.4576-5.9904-15.9232-4.3008-23.3984 5.632-24.9344 12.4928-49.7152 20.48-73.984 5.376-16.2816 1.9968-26.0096-11.776-37.4784C47.1552 558.6432 11.1104 458.2912 46.7456 338.944 71.3728 256.5632 129.9456 199.68 206.0288 160.2048c141.0048-72.6528 317.952-51.9168 435.7632 51.5584a275.6096 275.6096 0 0 1 88.6784 146.0224z m-226.2528 8.448a40.96 40.96 0 0 0 40.96-40.6528c-0.512-22.1184-19.0976-38.7584-42.9568-38.4512-23.04 0.3584-42.4448 19.0464-41.9328 40.3968s21.5552 39.2192 43.9296 38.7072z m-228.096 0a40.96 40.96 0 0 0 40.96-40.704c-0.6656-22.2208-19.2512-38.7072-43.1104-38.2976a40.6528 40.6528 0 0 0-41.1648 40.448c0.6144 21.6064 20.3264 39.1168 43.3152 38.5024z" fill="#59ADF8" p-id="6405"></path><path d="M990.6176 624.2304c-0.6656 80.9472-31.1296 135.1168-81.92 178.3808-12.8512 10.9056-16.4352 20.992-13.056 36.3008a242.432 242.432 0 0 1 5.8368 41.9328c0.3072 6.9632-1.6896 17.92-6.2464 20.48a30.72 30.72 0 0 1-23.552-1.2288 143.36 143.36 0 0 1-35.84-22.3744c-19.4048-17.5104-39.3216-18.2272-64.6144-14.08-83.6096 13.6192-162.9184-0.5632-230.912-53.1968-126.3616-97.792-122.88-259.328 5.4784-354.2528 123.5456-91.1872 310.784-65.7408 403.8144 55.6544 27.8016 36.352 42.6496 78.2336 41.0112 112.384z m-356.8128-26.2144c18.176 0 33.1264-13.7216 32.768-30.1568a33.28 33.28 0 0 0-32.9728-30.72c-17.0496 0-32.5632 14.6944-32.768 30.72s14.8992 30.1568 32.9728 30.1568z m191.488-27.0848a32 32 0 1 0-63.9488-3.1232 31.3856 31.3856 0 0 0 32.8704 30.1056c18.3296-0.6656 29.0816-10.3424 31.0784-26.9824z" fill="#59ADF8" p-id="6406"></path></svg>

After

Width:  |  Height:  |  Size: 1.9 KiB

View File

@@ -0,0 +1,181 @@
*,
*:after,
*:before {
box-sizing: border-box;
outline: none;
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
font: inherit;
font-size: 100%;
margin: 0;
padding: 0;
vertical-align: baseline;
border: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
&:before,
&:after {
content: '';
content: none;
}
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -.5em;
}
sub {
bottom: -.25em;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
input,
textarea,
button {
font-family: inhert;
font-size: inherit;
color: inherit;
}
select {
text-indent: .01px;
text-overflow: '';
border: 0;
border-radius: 0;
}
select::-ms-expand {
display: none;
}
code,
pre {
font-family: monospace, monospace;
font-size: 1em;
}

View File

@@ -0,0 +1,100 @@
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
.card {
padding: 2em;
}
#app {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}
/* 过度动画配置代码 */
.animation-enter-from,
.animation-leave-to {
transform: translateX(20px);
opacity: 0;
}
.animation-enter-to,
.animation-leave-from {
opacity: 1;
}
.animation-enter-active {
transition: all 0.7s ease;
}
.animation-leave-active {
transition: all 0.3s cubic-bezier(1, 0.6, 0.6, 1);
}
/* 过度动画配置代码结束 */

View File

@@ -0,0 +1,100 @@
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
.card {
padding: 2em;
}
#app {
width: 100%;
margin: 0 auto;
// padding: 2rem;
text-align: center;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}
/* 过度动画配置代码 */
.animation-enter-from,
.animation-leave-to {
transform: translateX(20px);
opacity: 0;
}
.animation-enter-to,
.animation-leave-from {
opacity: 1;
}
.animation-enter-active {
transition: all 0.7s ease;
}
.animation-leave-active {
transition: all 0.3s cubic-bezier(1, 0.6, 0.6, 1);
}
/* 过度动画配置代码结束 */

View File

@@ -0,0 +1,347 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height: 60vh;
width:60%;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow: hidden;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,347 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height: 60vh;
width:60%;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow: hidden;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,347 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height: 60vh;
width:60%;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow: hidden;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,347 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height: 60vh;
width:60%;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow: scroll;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,347 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height: 50vh;
width:60%;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow: scroll;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,347 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height: 50vh;
width:60%;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow: scroll;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,347 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height: 55vh;
width:60%;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow: scroll;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,347 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height: 54vh;
width:60%;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow: scroll;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,347 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height: 65vh;
width:60%;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow: scroll;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,347 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height: 62vh;
width:60%;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow: scroll;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,347 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height: 63vh;
width:60%;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow: scroll;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,347 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height: 64vh;
width:60%;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow: scroll;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,347 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height: 64.5vh;
width:60%;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow: scroll;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,347 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height: 64.5vh;
width:58%;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow: scroll;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,347 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height: 64.5vh;
width:50%;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow: scroll;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,347 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height: 64.5vh;
width:60%;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow: scroll;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,347 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 87%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height: 64.5vh;
width:60%;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow: scroll;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,347 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 88%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height: 64.5vh;
width:60%;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow: scroll;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,347 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 89%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height: 64.5vh;
width:60%;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow: scroll;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,347 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 88%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height: 64.5vh;
width:60%;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow: scroll;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,347 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 87%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height: 64.5vh;
width:60%;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow: scroll;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,347 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 88%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height: 64.5vh;
width:60%;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow: scroll;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,347 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 88%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 88%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height: 64.5vh;
width:60%;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow: scroll;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,347 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 88%;top: -41px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 88%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height: 64.5vh;
width:60%;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow: scroll;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,347 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 88%;top: -43px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 88%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height: 64.5vh;
width:60%;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow: scroll;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,347 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 88%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 88%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height: 64.5vh;
width:60%;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow: scroll;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,347 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 90%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 88%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height: 64.5vh;
width:60%;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow: scroll;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,347 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 88%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 88%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height: 64.5vh;
width:60%;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow: scroll;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,347 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 88%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 88%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height: 64.5vh;
width:58%;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow: scroll;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,347 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 88%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 88%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height: 64.5vh;
width:60%;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow: scroll;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,347 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 88%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 88%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height: 64.5vh;
width:60%;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow: hidden;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,347 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 88%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 88%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height: 64.5vh;
width:60%;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow:auto;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,347 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 88%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 88%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height: 64.5vh;
width:62%;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow:auto;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,347 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 88%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 88%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height: 64.5vh;
width:70%;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow:auto;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,347 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 88%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 88%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height: 64.5vh;
width:60%;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow:auto;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,347 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 88%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 88%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height: 64.5vh;
width:60%;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow:visible;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,347 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 88%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 88%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height: 64.5vh;
width:60%;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow:-moz-hidden-unscrollable;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,347 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 88%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 88%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height: 64.5vh;
width:60%;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow:initial;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,347 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 85%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 88%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height: 64.5vh;
width:60%;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow:initial;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,347 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 88%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height: 64.5vh;
width:60%;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow:initial;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,347 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height: 64.5vh;
width:60%;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow:initial;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,347 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height: 64.5vh;
width:30dvh
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow:initial;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,347 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height: 64.5vh;
width:30dvh;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow:initial;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,347 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height: 64.5vh;
width:60vh;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow:initial;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,347 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height: 64.5vh;
width:100vh;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow:initial;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,347 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height: 64.5vh;
width:80vh;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow:initial;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,347 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height: 64.5vh;
width:82vh;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow:initial;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,347 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height: 64.5%;
width:82vh;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow:initial;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,347 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height: 70%;
width:82vh;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow:initial;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,347 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height: 80%;
width:82vh;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow:initial;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,347 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height: 100%;
width:82vh;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow:initial;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,347 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height: ;
width:82vh;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow:initial;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,347 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height: auto;
width:82vh;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow:initial;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,347 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height: 80px;
width:82vh;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow:initial;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,347 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height: 100%;
width:82vh;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow:initial;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,347 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height: 100%;
width:82vh;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow:hidden;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,347 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height: 60vh;
width:82vh;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow:initial;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,347 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height: 60px;
width:82vh;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow:initial;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,347 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height: 60vh;
width:82vh;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow:initial;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,348 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
display: flex;
position: relative;
height: 60vh;
width:82vh;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow:initial;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,347 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height: 60vh;
width:82vh;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow:initial;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,347 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100%;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height: 60vh;
width:82vh;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow:initial;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,347 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100dvh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height: 60vh;
width:82vh;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow:initial;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,347 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100dvh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height: 60dvh;
width:82vh;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow:initial;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,347 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height:min-content
width:82vh;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow:initial;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,347 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height:min-content;
width:82vh;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow:initial;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,348 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height:60vh;
min-height: 60vh;
width:82vh;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow:initial;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,349 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
overflow: hidden
}
.login_form{
position: relative;
height:60vh;
min-height: 60vh;
width:82vh;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow:initial;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,349 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
overflow: hidden;
}
.login_form{
position: relative;
height:60vh;
min-height: 60vh;
width:82vh;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow:initial;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,349 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
max-height: 100vh;
}
.login_form{
position: relative;
height:60vh;
min-height: 60vh;
width:82vh;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow:initial;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,349 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
max-height: 100%;
}
.login_form{
position: relative;
height:60vh;
min-height: 60vh;
width:82vh;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow:initial;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,349 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
max-height: 1078px;
}
.login_form{
position: relative;
height:60vh;
min-height: 60vh;
width:82vh;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow:initial;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,349 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
overflow: auto
}
.login_form{
position: relative;
height:60vh;
min-height: 60vh;
width:82vh;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow:initial;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,349 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
overflow: auto;
}
.login_form{
position: relative;
height:60vh;
min-height: 60vh;
width:82vh;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow:auto;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,349 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
overflow: auto;
}
.login_form{
position: relative;
height:61vh;
min-height: 60vh;
width:82vh;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow:auto;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,349 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
overflow: auto;
}
.login_form{
position: relative;
height:65vh;
min-height: 60vh;
width:82vh;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow:auto;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,349 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
overflow: auto;
}
.login_form{
position: relative;
height:65vh;
min-height: 60vh;
width:82vh;
top:15vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow:auto;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,349 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
overflow: auto;
}
.login_form{
position: relative;
height:64vh;
min-height: 60vh;
width:82vh;
top:15vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow:auto;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,349 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
overflow: auto;
}
.login_form{
position: relative;
height:63vh;
min-height: 60vh;
width:82vh;
top:15vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow:auto;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,349 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
overflow: auto;
}
.login_form{
position: relative;
height:63vh;
min-height: 60vh;
width:82vh;
top:14vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow:auto;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

View File

@@ -0,0 +1,349 @@
<template>
<div class="login_container">
<a-form>
<a-row>
<a-col :xs="0"></a-col>
<a-col :xs="17">
<a-form
class="login_form"
ref="loginRef">
<a-row>
<a-col :flex="11">
<!-- 二维码部分 -->
<a-form-item>
<p id="scanTitle">微信扫码登录</p>
</a-form-item>
<a-form-item>
<a-space direction="vertical" align="center">
<a-qrcode :value="text"
icon="src\assets\icons\schisandra.svg"
:size="220"
/>
</a-space>
</a-form-item>
<!-- 提示部分 -->
<a-form-item>
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
<template #icon>
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
</template>
</a-alert>
</a-form-item>
</a-col>
<a-col :flex="1">
<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
</a-col>
<a-col :flex="12">
<!-- 主标题 -->
<a-form-item>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp册</span>
<svg-icon icon-class="corner_markers" >
</svg-icon>
</a>
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">&nbsp录</span>
<svg-icon icon-class="corner_markers" ></svg-icon>
</a>
<div class="title">
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
</svg-icon>
<p id="title">五味子云相册</p>
</div>
</a-form-item>
<!-- 副标题 -->
<a-form-item >
<p id="extra">随时随地分享你的美好瞬间</p>
</a-form-item>
<!-- 菜单切换 -->
<div v-if="status">
<a-form-item>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
</a-form-item>
<!-- 菜单内容主体 -->
<!-- 账户登录 -->
<div v-if="show" id="username" >
<a-form-item >
<a-input placeholder="请输入账号/邮箱/电话号码">
<template #prefix>
<user-outlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
</div>
<div v-else id="phoneNum">
<a-form-item>
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item >
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border:0">获取验证码</a-button>
</a-form-item>
</div>
<!-- 自动登录忘记密码部分 -->
<a-form-item>
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
<a href="" style="float: right;">忘记密码</a>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >登录</a-button>
</a-form-item>
<!-- 其他登录方式 -->
<a-form-item>
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
</a-form-item>
<a-form-item id="icons">
<a href="">
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
<a href="">
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
</a>
</a-form-item>
</div>
<div v-else>
<a-form-item>
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
</a-form-item>
<a-form-item >
<a-input placeholder="请输入手机号">
<template #prefix>
<MobileOutlined />
</template>
</a-input>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请输入密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input-password
show-password placeholder="请再次确认密码"
>
<template #prefix >
<LockOutlined />
</template>
<template #iconRender="v">
<EyeTwoTone v-if="v"></EyeTwoTone>
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item >
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
<template #prefix>
<BarcodeOutlined />
</template>
</a-input>
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
</a-form-item>
<a-form-item>
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
<template #prefix >
<LockOutlined />
</template>
</a-input>
<a-button style="float: right;border: 0;">获取验证码</a-button>
</a-form-item>
<a-form-item>
<a-button class='btn' type='primary' >注册</a-button>
</a-form-item>
</div>
</a-col>
</a-row>
</a-form>
</a-col>
</a-row>
</a-form>
</div>
</template>
<script setup lang="ts">
import { ref,h } from 'vue';
const text=ref('')
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
{
key: 'mail',
icon: () => h(UserOutlined),
label: '账户登录',
title: '账户登录',
},
{
key: 'app',
icon: () => h(MobileOutlined),
label: '短信登录',
title: '短信登录',
},
])
const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
{
key: 'app',
icon: () => h(MobileOutlined),
label: '手机号注册',
title: '手机号注册',
},
])
let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
if(items.item.originItemValue.label==='短信登录') return show.value=false
else return show.value=true
})
//配置登录注册函数
let taggle=ref(()=>{
status.value=!status.value
})
</script>
<style scoped lang="less">
.login_container{
width: 100%;
height: 100vh;
background: url('src/assets/images/background.png');
background-size: cover;
overflow: auto;
}
.login_form{
position: relative;
height:63vh;
min-height: 60vh;
width:82vh;
top:13vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow:auto;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: white;
font-size: 20px;
margin:20px 0 ;
}
.btn{
width: 100%;
}
#scanTitle{
font-size: 30px;
margin-top: 60px;
margin-bottom: 5px;
}
#alert{
text-align: left;
width: 80%;
font-size: 16px;
height: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#title{
text-align:left;
display: inline-block;
font-size: 35px;
margin: 0
}
.title{
margin: 0;
width:280px
}
#extra{
margin: 0;
width: 300px;
text-align: center;
color:rgb(189, 186, 187);
font-size: 15px;
}
#menu{
text-align:center;
width: 300px;
background-color:#fff;
margin: 0 px;
}
#other{
margin-bottom: 0
}
#icons a{
vertical-align:auto;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
border:1px solid rgba(228, 226, 223,0.8);
margin: 0 10px;
}
</style>

Some files were not shown because too many files have changed in this diff Show More