'完成登录注册页面' #1
@@ -288,6 +288,18 @@
|
||||
"watchThrottled": true,
|
||||
"watchTriggerable": 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
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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 |
0
.history/src/assets/icons/github_20240421233859.svg
Normal file
0
.history/src/assets/icons/github_20240421233859.svg
Normal file
1
.history/src/assets/icons/github_20240421234027.svg
Normal file
1
.history/src/assets/icons/github_20240421234027.svg
Normal 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 |
0
.history/src/assets/icons/gitlab_20240421233905.svg
Normal file
0
.history/src/assets/icons/gitlab_20240421233905.svg
Normal file
1
.history/src/assets/icons/gitlab_20240421234010.svg
Normal file
1
.history/src/assets/icons/gitlab_20240421234010.svg
Normal 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 |
0
.history/src/assets/icons/gitlab_20240421234024.svg
Normal file
0
.history/src/assets/icons/gitlab_20240421234024.svg
Normal file
1
.history/src/assets/icons/gitlab_20240421234055.svg
Normal file
1
.history/src/assets/icons/gitlab_20240421234055.svg
Normal 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 |
0
.history/src/assets/icons/qq_20240421233838.svg
Normal file
0
.history/src/assets/icons/qq_20240421233838.svg
Normal file
1
.history/src/assets/icons/qq_20240421233842.svg
Normal file
1
.history/src/assets/icons/qq_20240421233842.svg
Normal 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 |
1
.history/src/assets/icons/wechat2_20240421233941.svg
Normal file
1
.history/src/assets/icons/wechat2_20240421233941.svg
Normal 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 |
0
.history/src/assets/icons/wechat_20240421233846.svg
Normal file
0
.history/src/assets/icons/wechat_20240421233846.svg
Normal file
1
.history/src/assets/icons/wechat_20240421234332.svg
Normal file
1
.history/src/assets/icons/wechat_20240421234332.svg
Normal 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 |
181
.history/src/assets/styles/reset_20240421234240.less
Normal file
181
.history/src/assets/styles/reset_20240421234240.less
Normal 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;
|
||||
}
|
||||
100
.history/src/assets/styles/style_20240421223830.less
Normal file
100
.history/src/assets/styles/style_20240421223830.less
Normal 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);
|
||||
}
|
||||
/* 过度动画配置代码结束 */
|
||||
100
.history/src/assets/styles/style_20240421234310.less
Normal file
100
.history/src/assets/styles/style_20240421234310.less
Normal 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);
|
||||
}
|
||||
/* 过度动画配置代码结束 */
|
||||
347
.history/src/views/login/LoginPage_20240421223247.vue
Normal file
347
.history/src/views/login/LoginPage_20240421223247.vue
Normal 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;">注 册</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;">登 录</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>
|
||||
347
.history/src/views/login/LoginPage_20240421233812.vue
Normal file
347
.history/src/views/login/LoginPage_20240421233812.vue
Normal 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;">注 册</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;">登 录</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>
|
||||
347
.history/src/views/login/LoginPage_20240421235011.vue
Normal file
347
.history/src/views/login/LoginPage_20240421235011.vue
Normal 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;">注 册</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;">登 录</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>
|
||||
347
.history/src/views/login/LoginPage_20240422000337.vue
Normal file
347
.history/src/views/login/LoginPage_20240422000337.vue
Normal 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;">注 册</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;">登 录</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>
|
||||
347
.history/src/views/login/LoginPage_20240422000439.vue
Normal file
347
.history/src/views/login/LoginPage_20240422000439.vue
Normal 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;">注 册</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;">登 录</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>
|
||||
347
.history/src/views/login/LoginPage_20240422000448.vue
Normal file
347
.history/src/views/login/LoginPage_20240422000448.vue
Normal 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;">注 册</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;">登 录</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>
|
||||
347
.history/src/views/login/LoginPage_20240422000451.vue
Normal file
347
.history/src/views/login/LoginPage_20240422000451.vue
Normal 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;">注 册</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;">登 录</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>
|
||||
347
.history/src/views/login/LoginPage_20240422000455.vue
Normal file
347
.history/src/views/login/LoginPage_20240422000455.vue
Normal 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;">注 册</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;">登 录</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>
|
||||
347
.history/src/views/login/LoginPage_20240422000500.vue
Normal file
347
.history/src/views/login/LoginPage_20240422000500.vue
Normal 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;">注 册</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;">登 录</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>
|
||||
347
.history/src/views/login/LoginPage_20240422000504.vue
Normal file
347
.history/src/views/login/LoginPage_20240422000504.vue
Normal 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;">注 册</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;">登 录</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>
|
||||
347
.history/src/views/login/LoginPage_20240422000506.vue
Normal file
347
.history/src/views/login/LoginPage_20240422000506.vue
Normal 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;">注 册</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;">登 录</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>
|
||||
347
.history/src/views/login/LoginPage_20240422000508.vue
Normal file
347
.history/src/views/login/LoginPage_20240422000508.vue
Normal 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;">注 册</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;">登 录</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>
|
||||
347
.history/src/views/login/LoginPage_20240422000516.vue
Normal file
347
.history/src/views/login/LoginPage_20240422000516.vue
Normal 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;">注 册</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;">登 录</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>
|
||||
347
.history/src/views/login/LoginPage_20240422000533.vue
Normal file
347
.history/src/views/login/LoginPage_20240422000533.vue
Normal 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;">注 册</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;">登 录</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>
|
||||
347
.history/src/views/login/LoginPage_20240422000538.vue
Normal file
347
.history/src/views/login/LoginPage_20240422000538.vue
Normal 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;">注 册</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;">登 录</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>
|
||||
347
.history/src/views/login/LoginPage_20240422000542.vue
Normal file
347
.history/src/views/login/LoginPage_20240422000542.vue
Normal 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;">注 册</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;">登 录</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>
|
||||
347
.history/src/views/login/LoginPage_20240422000606.vue
Normal file
347
.history/src/views/login/LoginPage_20240422000606.vue
Normal 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;">注 册</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;">登 录</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>
|
||||
347
.history/src/views/login/LoginPage_20240422000608.vue
Normal file
347
.history/src/views/login/LoginPage_20240422000608.vue
Normal 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;">注 册</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;">登 录</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>
|
||||
347
.history/src/views/login/LoginPage_20240422000611.vue
Normal file
347
.history/src/views/login/LoginPage_20240422000611.vue
Normal 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;">注 册</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;">登 录</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>
|
||||
347
.history/src/views/login/LoginPage_20240422000613.vue
Normal file
347
.history/src/views/login/LoginPage_20240422000613.vue
Normal 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;">注 册</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;">登 录</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>
|
||||
347
.history/src/views/login/LoginPage_20240422000616.vue
Normal file
347
.history/src/views/login/LoginPage_20240422000616.vue
Normal 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;">注 册</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;">登 录</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>
|
||||
347
.history/src/views/login/LoginPage_20240422000618.vue
Normal file
347
.history/src/views/login/LoginPage_20240422000618.vue
Normal 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;">注 册</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;">登 录</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>
|
||||
347
.history/src/views/login/LoginPage_20240422000621.vue
Normal file
347
.history/src/views/login/LoginPage_20240422000621.vue
Normal 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;">注 册</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;">登 录</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>
|
||||
347
.history/src/views/login/LoginPage_20240422000624.vue
Normal file
347
.history/src/views/login/LoginPage_20240422000624.vue
Normal 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;">注 册</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;">登 录</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>
|
||||
347
.history/src/views/login/LoginPage_20240422000630.vue
Normal file
347
.history/src/views/login/LoginPage_20240422000630.vue
Normal 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;">注 册</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;">登 录</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>
|
||||
347
.history/src/views/login/LoginPage_20240422000635.vue
Normal file
347
.history/src/views/login/LoginPage_20240422000635.vue
Normal 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;">注 册</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;">登 录</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>
|
||||
347
.history/src/views/login/LoginPage_20240422000640.vue
Normal file
347
.history/src/views/login/LoginPage_20240422000640.vue
Normal 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;">注 册</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;">登 录</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>
|
||||
347
.history/src/views/login/LoginPage_20240422000737.vue
Normal file
347
.history/src/views/login/LoginPage_20240422000737.vue
Normal 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;">注 册</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;">登 录</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>
|
||||
347
.history/src/views/login/LoginPage_20240422000810.vue
Normal file
347
.history/src/views/login/LoginPage_20240422000810.vue
Normal 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;">注 册</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;">登 录</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>
|
||||
347
.history/src/views/login/LoginPage_20240422000836.vue
Normal file
347
.history/src/views/login/LoginPage_20240422000836.vue
Normal 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;">注 册</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;">登 录</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>
|
||||
347
.history/src/views/login/LoginPage_20240422000903.vue
Normal file
347
.history/src/views/login/LoginPage_20240422000903.vue
Normal 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;">注 册</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;">登 录</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>
|
||||
347
.history/src/views/login/LoginPage_20240422000954.vue
Normal file
347
.history/src/views/login/LoginPage_20240422000954.vue
Normal 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;">注 册</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;">登 录</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>
|
||||
347
.history/src/views/login/LoginPage_20240422001019.vue
Normal file
347
.history/src/views/login/LoginPage_20240422001019.vue
Normal 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;">注 册</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;">登 录</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>
|
||||
347
.history/src/views/login/LoginPage_20240422001030.vue
Normal file
347
.history/src/views/login/LoginPage_20240422001030.vue
Normal 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;">注 册</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;">登 录</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>
|
||||
347
.history/src/views/login/LoginPage_20240422001042.vue
Normal file
347
.history/src/views/login/LoginPage_20240422001042.vue
Normal 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;">注 册</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;">登 录</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>
|
||||
347
.history/src/views/login/LoginPage_20240422001113.vue
Normal file
347
.history/src/views/login/LoginPage_20240422001113.vue
Normal 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;">注 册</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;">登 录</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>
|
||||
347
.history/src/views/login/LoginPage_20240422001137.vue
Normal file
347
.history/src/views/login/LoginPage_20240422001137.vue
Normal 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;">注 册</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;">登 录</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>
|
||||
347
.history/src/views/login/LoginPage_20240422001202.vue
Normal file
347
.history/src/views/login/LoginPage_20240422001202.vue
Normal 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;">注 册</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;">登 录</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>
|
||||
347
.history/src/views/login/LoginPage_20240422001217.vue
Normal file
347
.history/src/views/login/LoginPage_20240422001217.vue
Normal 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;">注 册</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;">登 录</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>
|
||||
347
.history/src/views/login/LoginPage_20240422001356.vue
Normal file
347
.history/src/views/login/LoginPage_20240422001356.vue
Normal 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;">注 册</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;">登 录</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>
|
||||
347
.history/src/views/login/LoginPage_20240422001403.vue
Normal file
347
.history/src/views/login/LoginPage_20240422001403.vue
Normal 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;">注 册</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;">登 录</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>
|
||||
347
.history/src/views/login/LoginPage_20240422001427.vue
Normal file
347
.history/src/views/login/LoginPage_20240422001427.vue
Normal 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;">注 册</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;">登 录</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>
|
||||
347
.history/src/views/login/LoginPage_20240422001435.vue
Normal file
347
.history/src/views/login/LoginPage_20240422001435.vue
Normal 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;">注 册</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;">登 录</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>
|
||||
347
.history/src/views/login/LoginPage_20240422001444.vue
Normal file
347
.history/src/views/login/LoginPage_20240422001444.vue
Normal 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;">注 册</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;">登 录</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>
|
||||
347
.history/src/views/login/LoginPage_20240422001451.vue
Normal file
347
.history/src/views/login/LoginPage_20240422001451.vue
Normal 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;">注 册</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;">登 录</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>
|
||||
347
.history/src/views/login/LoginPage_20240422001455.vue
Normal file
347
.history/src/views/login/LoginPage_20240422001455.vue
Normal 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;">注 册</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;">登 录</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>
|
||||
347
.history/src/views/login/LoginPage_20240422001505.vue
Normal file
347
.history/src/views/login/LoginPage_20240422001505.vue
Normal 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;">注 册</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;">登 录</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>
|
||||
52
.history/tsconfig_20240421232406.json
Normal file
52
.history/tsconfig_20240421232406.json
Normal file
@@ -0,0 +1,52 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"noImplicitAny": false,
|
||||
"typeRoots": [
|
||||
"node_modules/@types",
|
||||
"src/types",
|
||||
],
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"module": "ESNext",
|
||||
"lib": [
|
||||
"ES2020",
|
||||
"DOM",
|
||||
"DOM.Iterable"
|
||||
],
|
||||
"skipLibCheck": true,
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "preserve",
|
||||
"baseUrl": "./",
|
||||
"paths": {
|
||||
"@": [
|
||||
"src"
|
||||
],
|
||||
"@/*": [
|
||||
"src/*"
|
||||
]
|
||||
},
|
||||
"allowJs": true,
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": [
|
||||
"src/**/*.ts",
|
||||
"src/**/*.tsx",
|
||||
"src/**/*.d.ts",
|
||||
"src/**/*.vue",
|
||||
"auto-import.d.ts"
|
||||
],
|
||||
"references": [
|
||||
{
|
||||
"path": "./tsconfig.node.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
54
.history/tsconfig_20240421234644.json
Normal file
54
.history/tsconfig_20240421234644.json
Normal file
@@ -0,0 +1,54 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"noImplicitAny": false,
|
||||
"typeRoots": [
|
||||
"node_modules/@types",
|
||||
"src/types",
|
||||
],
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"module": "ESNext",
|
||||
"lib": [
|
||||
"ES2020",
|
||||
"DOM",
|
||||
"DOM.Iterable"
|
||||
],
|
||||
"skipLibCheck": true,
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "preserve",
|
||||
"baseUrl": "./",
|
||||
"paths": {
|
||||
"@": [
|
||||
"src"
|
||||
],
|
||||
"@/*": [
|
||||
"src/*"
|
||||
]
|
||||
},
|
||||
"allowJs": true,
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": [
|
||||
"src/**/*.ts",
|
||||
"src/**/*.tsx",
|
||||
"src/**/*.d.ts",
|
||||
"src/**/*.vue",
|
||||
"./auto-imports.d.ts",
|
||||
"./components.d.ts",
|
||||
"./.eslintrc-auto-import.json"
|
||||
],
|
||||
"references": [
|
||||
{
|
||||
"path": "./tsconfig.node.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
201
.history/vite.config_20240421232406.mts
Normal file
201
.history/vite.config_20240421232406.mts
Normal file
@@ -0,0 +1,201 @@
|
||||
import { defineConfig, loadEnv } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import * as path from 'path'
|
||||
import legacy from '@vitejs/plugin-legacy'
|
||||
|
||||
// 自动导入vue中hook reactive ref等
|
||||
import AutoImport from 'unplugin-auto-import/vite'
|
||||
//自动导入ui-组件 比如说ant-design-vue element-plus等
|
||||
import Components from 'unplugin-vue-components/vite'
|
||||
//ant-design-vue
|
||||
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
|
||||
|
||||
// icons plugin
|
||||
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
|
||||
|
||||
import autoprefixer from 'autoprefixer'
|
||||
|
||||
import viteCompression from 'vite-plugin-compression'
|
||||
import imagemin from 'unplugin-imagemin/vite'
|
||||
|
||||
|
||||
import { createHtmlPlugin } from 'vite-plugin-html'
|
||||
|
||||
export default defineConfig(({ mode, command }) => {
|
||||
const env = loadEnv(mode, process.cwd())
|
||||
return {
|
||||
resolve: {
|
||||
//设置别名
|
||||
alias: {
|
||||
'@': path.resolve(__dirname, 'src')
|
||||
}
|
||||
},
|
||||
css: {
|
||||
// CSS 预处理器
|
||||
preprocessorOptions: {
|
||||
//define global less variable
|
||||
less: {
|
||||
javascriptEnabled: true,
|
||||
charset: false, //禁用字符集声明(charset 选项用于控制是否在生成的 CSS 文件的头部添加 @charset "UTF-8";)
|
||||
additionalData: '@import "./src/assets/styles/variables.less";'
|
||||
}
|
||||
},
|
||||
postcss: {
|
||||
plugins: [
|
||||
autoprefixer({
|
||||
overrideBrowserslist: ['Chrome > 40', 'ff > 31', 'ie 11']
|
||||
})
|
||||
]
|
||||
}
|
||||
},
|
||||
esbuild: {
|
||||
// configure this value when the browser version of the development environment is lower
|
||||
// minimum support es2015
|
||||
// https://esbuild.github.io/api/#target
|
||||
target: 'es2015',
|
||||
include: /\.(ts|jsx|tsx)$/
|
||||
},
|
||||
plugins: [
|
||||
vue(),
|
||||
createHtmlPlugin({
|
||||
minify: true,
|
||||
/**
|
||||
* 在这里写entry后，你将不需要在`index.html`内添加 script 标签，原有标签需要删除
|
||||
* @default src/main.ts
|
||||
*/
|
||||
entry: 'src/main.ts',
|
||||
filename: 'index.html',
|
||||
/**
|
||||
* 如果你想将 `index.html`存放在指定文件夹，可以修改它，否则不需要配置
|
||||
* @default index.html
|
||||
*/
|
||||
template: 'index.html',
|
||||
/**
|
||||
* 需要注入 index.html ejs 模版的数据
|
||||
*/
|
||||
inject: {
|
||||
data: {
|
||||
title: env.VITE_TITLE_NAME,
|
||||
}
|
||||
}
|
||||
}),
|
||||
imagemin({
|
||||
// Default mode sharp. support squoosh and sharp
|
||||
mode: 'sharp',
|
||||
beforeBundle: true,
|
||||
// Default configuration options for compressing different pictures
|
||||
compress: {
|
||||
jpg: {
|
||||
quality: 10
|
||||
},
|
||||
jpeg: {
|
||||
quality: 10
|
||||
},
|
||||
png: {
|
||||
quality: 10
|
||||
},
|
||||
webp: {
|
||||
quality: 10
|
||||
}
|
||||
},
|
||||
conversion: [
|
||||
{ from: 'jpeg', to: 'webp' },
|
||||
{ from: 'png', to: 'webp' },
|
||||
{ from: 'JPG', to: 'jpeg' }
|
||||
]
|
||||
}),
|
||||
viteCompression({
|
||||
verbose: true, // 是否在控制台中输出压缩结果
|
||||
disable: false,
|
||||
threshold: 10240, // 如果体积大于阈值，将被压缩，单位为b，体积过小时请不要压缩，以免适得其反
|
||||
algorithm: 'gzip', // 压缩算法，可选['gzip'，' brotliccompress '，'deflate '，'deflateRaw']
|
||||
ext: '.gz',
|
||||
deleteOriginFile: true // 源文件压缩后是否删除
|
||||
}),
|
||||
// 修改 icons 相关配置
|
||||
createSvgIconsPlugin({
|
||||
// 指定需要缓存的图标文件夹
|
||||
iconDirs: [path.resolve(__dirname, './src/assets/icons')]
|
||||
}),
|
||||
legacy({
|
||||
renderLegacyChunks: true,
|
||||
modernPolyfills: true,
|
||||
targets: ['chrome 52'], // 需要兼容的目标列表
|
||||
additionalLegacyPolyfills: ['regenerator-runtime/runtime'] // 面向IE11时需要此插件
|
||||
}),
|
||||
AutoImport({
|
||||
//安装两行后你会发现在组件中不用再导入ref，reactive等
|
||||
imports: ['vue', 'vue-router','@vueuse/core'],
|
||||
dts: 'auto-import.d.ts',
|
||||
//ant-design-vue
|
||||
resolvers: [AntDesignVueResolver()],
|
||||
eslintrc: {
|
||||
enabled: true // 1、改为true用于生成eslint配置。2、生成后改回false，避免重复生成消耗
|
||||
|
||||
}
|
||||
}),
|
||||
Components({
|
||||
// 指定自动导入的组件位置，默认是 src/components
|
||||
dirs: ['src/components'],
|
||||
//ant-design-vue
|
||||
resolvers: [AntDesignVueResolver({ importStyle: true, resolveIcons: true })]
|
||||
})
|
||||
],
|
||||
optimizeDeps: {
|
||||
include: ['core-js']
|
||||
},
|
||||
server: {
|
||||
proxy: {
|
||||
'/api': {
|
||||
//target是代理的目标路径
|
||||
target: env.VITE_API_BASE_URL,
|
||||
changeOrigin: true, //必须要开启跨域
|
||||
rewrite: (path) => path.replace(/\/api/, '') // 路径重写
|
||||
}
|
||||
}
|
||||
},
|
||||
build: {
|
||||
// target: ['es2015'], // 设置最终构建的浏览器兼容目标
|
||||
moduleResolution: 'node', // 决定如何处理模块。
|
||||
outDir: 'dist', // 指定输出路径
|
||||
assetsDir: 'assets', // 指定生成静态文件目录
|
||||
assetsInlineLimit: '4096', // 小于此阈值的导入或引用资源将内联为 base64 编码
|
||||
cssCodeSplit: true, // 启用 CSS 代码拆分
|
||||
// cssTarget: '', // 允许用户为 CSS 的压缩设置一个不同的浏览器 target 与 build.target 一致
|
||||
sourcemap: false, // 构建后是否生成 source map 文件
|
||||
|
||||
// lib: {}, // 构建为库
|
||||
manifest: false, // 当设置为 true，构建后将会生成 manifest.json 文件
|
||||
ssrManifest: false, // 构建不生成 SSR 的 manifest 文件
|
||||
ssr: undefined, // 生成面向 SSR 的构建
|
||||
minify: 'terser', // 指定使用哪种混淆器
|
||||
// 传递给 Terser 的更多 minify 选项
|
||||
terserOptions: {
|
||||
compress: {
|
||||
drop_console: true,
|
||||
drop_debugger: true
|
||||
}
|
||||
},
|
||||
write: true, // 启用将构建后的文件写入磁盘
|
||||
emptyOutDir: true, // 构建时清空该目录
|
||||
brotliSize: true, // 启用 brotli 压缩大小报告
|
||||
chunkSizeWarningLimit: 2000, // chunk 大小警告的限制
|
||||
watch: null, // 设置为 {} 则会启用 rollup 的监听器
|
||||
rollupOptions: { // 自定义底层的 Rollup 打包配置
|
||||
output: {
|
||||
chunkFileNames: 'js/[name]-[hash].js', // 引入文件名的名称
|
||||
entryFileNames: 'js/[name]-[hash].js', // 包的入口文件名称
|
||||
assetFileNames: '[ext]/[name]-[hash].[ext]' // 资源文件像 字体，图片等
|
||||
}
|
||||
}
|
||||
},
|
||||
output: {
|
||||
// 最小化拆分包
|
||||
manualChunks(id) {
|
||||
if (id.includes('node_modules')) {
|
||||
return id.toString().split('node_modules/')[1].split('/')[0].toString()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
203
.history/vite.config_20240421235257.mts
Normal file
203
.history/vite.config_20240421235257.mts
Normal file
@@ -0,0 +1,203 @@
|
||||
import { defineConfig, loadEnv } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import * as path from 'path'
|
||||
import legacy from '@vitejs/plugin-legacy'
|
||||
|
||||
// 自动导入vue中hook reactive ref等
|
||||
import AutoImport from 'unplugin-auto-import/vite'
|
||||
//自动导入ui-组件 比如说ant-design-vue element-plus等
|
||||
import Components from 'unplugin-vue-components/vite'
|
||||
//ant-design-vue
|
||||
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
|
||||
|
||||
// icons plugin
|
||||
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
|
||||
|
||||
import autoprefixer from 'autoprefixer'
|
||||
|
||||
import viteCompression from 'vite-plugin-compression'
|
||||
import imagemin from 'unplugin-imagemin/vite'
|
||||
|
||||
|
||||
import { createHtmlPlugin } from 'vite-plugin-html'
|
||||
|
||||
export default defineConfig(({ mode, command }) => {
|
||||
const env = loadEnv(mode, process.cwd())
|
||||
return {
|
||||
resolve: {
|
||||
//设置别名
|
||||
alias: {
|
||||
'@': path.resolve(__dirname, 'src')
|
||||
}
|
||||
},
|
||||
css: {
|
||||
// CSS 预处理器
|
||||
preprocessorOptions: {
|
||||
//define global less variable
|
||||
less: {
|
||||
javascriptEnabled: true,
|
||||
charset: false, //禁用字符集声明(charset 选项用于控制是否在生成的 CSS 文件的头部添加 @charset "UTF-8";)
|
||||
additionalData: '@import "./src/assets/styles/variables.less";'
|
||||
}
|
||||
},
|
||||
postcss: {
|
||||
plugins: [
|
||||
autoprefixer({
|
||||
overrideBrowserslist: ['Chrome > 40', 'ff > 31', 'ie 11']
|
||||
})
|
||||
]
|
||||
}
|
||||
},
|
||||
esbuild: {
|
||||
// configure this value when the browser version of the development environment is lower
|
||||
// minimum support es2015
|
||||
// https://esbuild.github.io/api/#target
|
||||
target: 'es2015',
|
||||
include: /\.(ts|jsx|tsx)$/
|
||||
},
|
||||
plugins: [
|
||||
vue(),
|
||||
AutoImport({
|
||||
//安装两行后你会发现在组件中不用再导入ref，reactive等
|
||||
imports: ['vue', 'vue-router','@vueuse/core','pinia'],
|
||||
dts: 'auto-import.d.ts',
|
||||
//ant-design-vue
|
||||
resolvers: [AntDesignVueResolver()],
|
||||
eslintrc: {
|
||||
enabled: true // 1、改为true用于生成eslint配置。2、生成后改回false，避免重复生成消耗
|
||||
|
||||
}
|
||||
}),
|
||||
createHtmlPlugin({
|
||||
minify: true,
|
||||
/**
|
||||
* 在这里写entry后，你将不需要在`index.html`内添加 script 标签，原有标签需要删除
|
||||
* @default src/main.ts
|
||||
*/
|
||||
entry: 'src/main.ts',
|
||||
filename: 'index.html',
|
||||
/**
|
||||
* 如果你想将 `index.html`存放在指定文件夹，可以修改它，否则不需要配置
|
||||
* @default index.html
|
||||
*/
|
||||
template: 'index.html',
|
||||
/**
|
||||
* 需要注入 index.html ejs 模版的数据
|
||||
*/
|
||||
inject: {
|
||||
data: {
|
||||
title: env.VITE_TITLE_NAME,
|
||||
}
|
||||
}
|
||||
}),
|
||||
imagemin({
|
||||
// Default mode sharp. support squoosh and sharp
|
||||
mode: 'sharp',
|
||||
beforeBundle: true,
|
||||
// Default configuration options for compressing different pictures
|
||||
compress: {
|
||||
jpg: {
|
||||
quality: 10
|
||||
},
|
||||
jpeg: {
|
||||
quality: 10
|
||||
},
|
||||
png: {
|
||||
quality: 10
|
||||
},
|
||||
webp: {
|
||||
quality: 10
|
||||
}
|
||||
},
|
||||
conversion: [
|
||||
{ from: 'jpeg', to: 'webp' },
|
||||
{ from: 'png', to: 'webp' },
|
||||
{ from: 'JPG', to: 'jpeg' }
|
||||
]
|
||||
}),
|
||||
viteCompression({
|
||||
verbose: true, // 是否在控制台中输出压缩结果
|
||||
disable: false,
|
||||
threshold: 10240, // 如果体积大于阈值，将被压缩，单位为b，体积过小时请不要压缩，以免适得其反
|
||||
algorithm: 'gzip', // 压缩算法，可选['gzip'，' brotliccompress '，'deflate '，'deflateRaw']
|
||||
ext: '.gz',
|
||||
deleteOriginFile: true // 源文件压缩后是否删除
|
||||
}),
|
||||
// 修改 icons 相关配置
|
||||
createSvgIconsPlugin({
|
||||
// 指定需要缓存的图标文件夹
|
||||
iconDirs: [path.resolve(__dirname, './src/assets/icons')]
|
||||
}),
|
||||
legacy({
|
||||
renderLegacyChunks: true,
|
||||
modernPolyfills: true,
|
||||
targets: ['chrome 52'], // 需要兼容的目标列表
|
||||
additionalLegacyPolyfills: ['regenerator-runtime/runtime'] // 面向IE11时需要此插件
|
||||
}),
|
||||
|
||||
Components({
|
||||
dts: true,
|
||||
// 指定自动导入的组件位置，默认是 src/components
|
||||
dirs: ['src/components','src/views'],
|
||||
//ant-design-vue
|
||||
resolvers: [AntDesignVueResolver({ importStyle: "less", resolveIcons: true })]
|
||||
})
|
||||
],
|
||||
optimizeDeps: {
|
||||
include: ['core-js']
|
||||
},
|
||||
server: {
|
||||
proxy: {
|
||||
'/api': {
|
||||
//target是代理的目标路径
|
||||
target: env.VITE_API_BASE_URL,
|
||||
changeOrigin: true, //必须要开启跨域
|
||||
rewrite: (path) => path.replace(/\/api/, '') // 路径重写
|
||||
}
|
||||
}
|
||||
},
|
||||
build: {
|
||||
// target: ['es2015'], // 设置最终构建的浏览器兼容目标
|
||||
moduleResolution: 'node', // 决定如何处理模块。
|
||||
outDir: 'dist', // 指定输出路径
|
||||
assetsDir: 'assets', // 指定生成静态文件目录
|
||||
assetsInlineLimit: '4096', // 小于此阈值的导入或引用资源将内联为 base64 编码
|
||||
cssCodeSplit: true, // 启用 CSS 代码拆分
|
||||
// cssTarget: '', // 允许用户为 CSS 的压缩设置一个不同的浏览器 target 与 build.target 一致
|
||||
sourcemap: false, // 构建后是否生成 source map 文件
|
||||
|
||||
// lib: {}, // 构建为库
|
||||
manifest: false, // 当设置为 true，构建后将会生成 manifest.json 文件
|
||||
ssrManifest: false, // 构建不生成 SSR 的 manifest 文件
|
||||
ssr: undefined, // 生成面向 SSR 的构建
|
||||
minify: 'terser', // 指定使用哪种混淆器
|
||||
// 传递给 Terser 的更多 minify 选项
|
||||
terserOptions: {
|
||||
compress: {
|
||||
drop_console: true,
|
||||
drop_debugger: true
|
||||
}
|
||||
},
|
||||
write: true, // 启用将构建后的文件写入磁盘
|
||||
emptyOutDir: true, // 构建时清空该目录
|
||||
brotliSize: true, // 启用 brotli 压缩大小报告
|
||||
chunkSizeWarningLimit: 2000, // chunk 大小警告的限制
|
||||
watch: null, // 设置为 {} 则会启用 rollup 的监听器
|
||||
rollupOptions: { // 自定义底层的 Rollup 打包配置
|
||||
output: {
|
||||
chunkFileNames: 'js/[name]-[hash].js', // 引入文件名的名称
|
||||
entryFileNames: 'js/[name]-[hash].js', // 包的入口文件名称
|
||||
assetFileNames: '[ext]/[name]-[hash].[ext]' // 资源文件像 字体，图片等
|
||||
}
|
||||
}
|
||||
},
|
||||
output: {
|
||||
// 最小化拆分包
|
||||
manualChunks(id) {
|
||||
if (id.includes('node_modules')) {
|
||||
return id.toString().split('node_modules/')[1].split('/')[0].toString()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
12
auto-import.d.ts
vendored
12
auto-import.d.ts
vendored
@@ -6,6 +6,7 @@
|
||||
export {}
|
||||
declare global {
|
||||
const EffectScope: typeof import('vue')['EffectScope']
|
||||
const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
|
||||
const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
|
||||
const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
|
||||
const computed: typeof import('vue')['computed']
|
||||
@@ -19,6 +20,7 @@ declare global {
|
||||
const createEventHook: typeof import('@vueuse/core')['createEventHook']
|
||||
const createGlobalState: typeof import('@vueuse/core')['createGlobalState']
|
||||
const createInjectionState: typeof import('@vueuse/core')['createInjectionState']
|
||||
const createPinia: typeof import('pinia')['createPinia']
|
||||
const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
|
||||
const createReusableTemplate: typeof import('@vueuse/core')['createReusableTemplate']
|
||||
const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
|
||||
@@ -29,9 +31,11 @@ declare global {
|
||||
const debouncedWatch: typeof import('@vueuse/core')['debouncedWatch']
|
||||
const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
|
||||
const defineComponent: typeof import('vue')['defineComponent']
|
||||
const defineStore: typeof import('pinia')['defineStore']
|
||||
const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
|
||||
const effectScope: typeof import('vue')['effectScope']
|
||||
const extendRef: typeof import('@vueuse/core')['extendRef']
|
||||
const getActivePinia: typeof import('pinia')['getActivePinia']
|
||||
const getCurrentInstance: typeof import('vue')['getCurrentInstance']
|
||||
const getCurrentScope: typeof import('vue')['getCurrentScope']
|
||||
const h: typeof import('vue')['h']
|
||||
@@ -44,6 +48,11 @@ declare global {
|
||||
const isReadonly: typeof import('vue')['isReadonly']
|
||||
const isRef: typeof import('vue')['isRef']
|
||||
const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable']
|
||||
const mapActions: typeof import('pinia')['mapActions']
|
||||
const mapGetters: typeof import('pinia')['mapGetters']
|
||||
const mapState: typeof import('pinia')['mapState']
|
||||
const mapStores: typeof import('pinia')['mapStores']
|
||||
const mapWritableState: typeof import('pinia')['mapWritableState']
|
||||
const markRaw: typeof import('vue')['markRaw']
|
||||
const nextTick: typeof import('vue')['nextTick']
|
||||
const onActivated: typeof import('vue')['onActivated']
|
||||
@@ -84,9 +93,12 @@ declare global {
|
||||
const resolveComponent: typeof import('vue')['resolveComponent']
|
||||
const resolveRef: typeof import('@vueuse/core')['resolveRef']
|
||||
const resolveUnref: typeof import('@vueuse/core')['resolveUnref']
|
||||
const setActivePinia: typeof import('pinia')['setActivePinia']
|
||||
const setMapStoreSuffix: typeof import('pinia')['setMapStoreSuffix']
|
||||
const shallowReactive: typeof import('vue')['shallowReactive']
|
||||
const shallowReadonly: typeof import('vue')['shallowReadonly']
|
||||
const shallowRef: typeof import('vue')['shallowRef']
|
||||
const storeToRefs: typeof import('pinia')['storeToRefs']
|
||||
const syncRef: typeof import('@vueuse/core')['syncRef']
|
||||
const syncRefs: typeof import('@vueuse/core')['syncRefs']
|
||||
const templateRef: typeof import('@vueuse/core')['templateRef']
|
||||
|
||||
14
components.d.ts
vendored
14
components.d.ts
vendored
@@ -7,7 +7,21 @@ export {}
|
||||
|
||||
declare module 'vue' {
|
||||
export interface GlobalComponents {
|
||||
AAlert: typeof import('ant-design-vue/es')['Alert']
|
||||
AButton: typeof import('ant-design-vue/es')['Button']
|
||||
ACheckbox: typeof import('ant-design-vue/es')['Checkbox']
|
||||
ACol: typeof import('ant-design-vue/es')['Col']
|
||||
ADivider: typeof import('ant-design-vue/es')['Divider']
|
||||
AForm: typeof import('ant-design-vue/es')['Form']
|
||||
AFormItem: typeof import('ant-design-vue/es')['FormItem']
|
||||
AInput: typeof import('ant-design-vue/es')['Input']
|
||||
AInputPassword: typeof import('ant-design-vue/es')['InputPassword']
|
||||
AMenu: typeof import('ant-design-vue/es')['Menu']
|
||||
AQrcode: typeof import('ant-design-vue/es')['QRCode']
|
||||
ARow: typeof import('ant-design-vue/es')['Row']
|
||||
ASpace: typeof import('ant-design-vue/es')['Space']
|
||||
ECharts: typeof import('./src/components/echarts/ECharts.vue')['default']
|
||||
LoginPage: typeof import('./src/views/login/LoginPage.vue')['default']
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
SvgIcon: typeof import('./src/components/svgIcon/SvgIcon.vue')['default']
|
||||
|
||||
12120
package-lock.json
generated
Normal file
12120
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
@@ -14,7 +14,7 @@
|
||||
"dependencies": {
|
||||
"@ant-design/icons-vue": "^7.0.1",
|
||||
"@vueuse/core": "^10.9.0",
|
||||
"ant-design-vue": "4.1.2",
|
||||
"ant-design-vue": "^4.1.2",
|
||||
"axios": "^1.6.8",
|
||||
"core-js": "^3.36.1",
|
||||
"cz-customizable": "^7.0.0",
|
||||
|
||||
1
src/assets/icons/corner_markers.svg
Normal file
1
src/assets/icons/corner_markers.svg
Normal 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 |
1
src/assets/icons/github.svg
Normal file
1
src/assets/icons/github.svg
Normal 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 |
1
src/assets/icons/gitlab.svg
Normal file
1
src/assets/icons/gitlab.svg
Normal 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 |
1
src/assets/icons/qq.svg
Normal file
1
src/assets/icons/qq.svg
Normal 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 |
1
src/assets/icons/wechat.svg
Normal file
1
src/assets/icons/wechat.svg
Normal 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 |
1
src/assets/icons/wechat_2.svg
Normal file
1
src/assets/icons/wechat_2.svg
Normal 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 |
BIN
src/assets/images/background.png
Normal file
BIN
src/assets/images/background.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 376 KiB |
181
src/assets/styles/reset.less
Normal file
181
src/assets/styles/reset.less
Normal 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;
|
||||
}
|
||||
@@ -59,9 +59,9 @@ button:focus-visible {
|
||||
}
|
||||
|
||||
#app {
|
||||
max-width: 1280px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
// padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -97,4 +97,4 @@ button:focus-visible {
|
||||
.animation-leave-active {
|
||||
transition: all 0.3s cubic-bezier(1, 0.6, 0.6, 1);
|
||||
}
|
||||
/* 过度动画配置代码结束 */
|
||||
/* 过度动画配置代码结束 */
|
||||
@@ -1,20 +1,347 @@
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
import SvgIcon from '@/components/svgIcon/SvgIcon.vue'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'LoginPage',
|
||||
components: { SvgIcon }
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<svg-icon icon-class="schisandra" class-name="icon"></svg-icon>
|
||||
<h1>Login</h1>
|
||||
<h2>测试页面，看到这个，那么项目就成功跑起来了</h2>
|
||||
<img style="width: 300px; height: 200px" src="@/assets/images/wallhaven.jpg" />
|
||||
<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;">注 册</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;">登 录</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>
|
||||
|
||||
<style scoped></style>
|
||||
<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>
|
||||
@@ -42,11 +42,13 @@
|
||||
"src/**/*.tsx",
|
||||
"src/**/*.d.ts",
|
||||
"src/**/*.vue",
|
||||
"auto-import.d.ts"
|
||||
"./auto-imports.d.ts",
|
||||
"./components.d.ts",
|
||||
"./.eslintrc-auto-import.json"
|
||||
],
|
||||
"references": [
|
||||
{
|
||||
"path": "./tsconfig.node.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -57,6 +57,17 @@ export default defineConfig(({ mode, command }) => {
|
||||
},
|
||||
plugins: [
|
||||
vue(),
|
||||
AutoImport({
|
||||
//安装两行后你会发现在组件中不用再导入ref，reactive等
|
||||
imports: ['vue', 'vue-router','@vueuse/core','pinia'],
|
||||
dts: 'auto-import.d.ts',
|
||||
//ant-design-vue
|
||||
resolvers: [AntDesignVueResolver()],
|
||||
eslintrc: {
|
||||
enabled: true // 1、改为true用于生成eslint配置。2、生成后改回false，避免重复生成消耗
|
||||
|
||||
}
|
||||
}),
|
||||
createHtmlPlugin({
|
||||
minify: true,
|
||||
/**
|
||||
@@ -123,22 +134,13 @@ export default defineConfig(({ mode, command }) => {
|
||||
targets: ['chrome 52'], // 需要兼容的目标列表
|
||||
additionalLegacyPolyfills: ['regenerator-runtime/runtime'] // 面向IE11时需要此插件
|
||||
}),
|
||||
AutoImport({
|
||||
//安装两行后你会发现在组件中不用再导入ref，reactive等
|
||||
imports: ['vue', 'vue-router','@vueuse/core'],
|
||||
dts: 'auto-import.d.ts',
|
||||
//ant-design-vue
|
||||
resolvers: [AntDesignVueResolver()],
|
||||
eslintrc: {
|
||||
enabled: true // 1、改为true用于生成eslint配置。2、生成后改回false，避免重复生成消耗
|
||||
|
||||
}
|
||||
}),
|
||||
Components({
|
||||
dts: true,
|
||||
// 指定自动导入的组件位置，默认是 src/components
|
||||
dirs: ['src/components'],
|
||||
dirs: ['src/components','src/views'],
|
||||
//ant-design-vue
|
||||
resolvers: [AntDesignVueResolver({ importStyle: true, resolveIcons: true })]
|
||||
resolvers: [AntDesignVueResolver({ importStyle: "less", resolveIcons: true })]
|
||||
})
|
||||
],
|
||||
optimizeDeps: {
|
||||
@@ -198,4 +200,4 @@ export default defineConfig(({ mode, command }) => {
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user