mirror of
https://gitee.com/xiongmao1988/rax-medical.git
synced 2025-08-23 20:44:58 +08:00
✨ 首页制作
This commit is contained in:
gaofy
parent
2555414e11
commit
ad925d7b7c
|
|
@ -1 +1,3 @@
|
|||
/// <reference types="vite/client" />
|
||||
declare module 'element-plus/dist/locale/zh-cn.mjs'
|
||||
declare module 'mockjs'
|
||||
|
|
@ -11,9 +11,11 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"axios": "^1.3.3",
|
||||
"sass": "^1.58.3",
|
||||
"echarts": "^5.4.1",
|
||||
"element-plus": "2.3.1",
|
||||
"pinia": "^2.1.7",
|
||||
"sass": "^1.58.3",
|
||||
"slider-verify-v3": "^1.1.11",
|
||||
"vue": "^3.2.45",
|
||||
"vue-router": "^4.1.6"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
$main-color: #006080;
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
|
|
@ -7,6 +5,7 @@ body {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
|
||||
}
|
||||
|
||||
span,
|
||||
|
|
@ -34,6 +33,14 @@ li {
|
|||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
[class^='icon-'] {
|
||||
font-family: "iconfont" !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
|
|
@ -267,19 +274,24 @@ li {
|
|||
.el-select-dropdown__item.selected {
|
||||
color: #006080;
|
||||
}
|
||||
|
||||
.el-select {
|
||||
--el-select-input-focus-border-color: #006080;
|
||||
}
|
||||
|
||||
.el-dialog {
|
||||
.el-dialog__header {
|
||||
|
||||
.el-dialog__headerbtn:focus .el-dialog__close,
|
||||
.el-dialog__headerbtn:hover .el-dialog__close {
|
||||
color: #006080;
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
--el-button-hover-text-color: #006080;
|
||||
--el-button-hover-bg-color: rgba(0, 96, 128, .1);
|
||||
|
|
@ -303,4 +315,18 @@ li {
|
|||
--el-button-active-border-color: rgba(0, 96, 128, .8);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 验证弹窗
|
||||
#plugin-slider-verify_containe {
|
||||
width: 0;
|
||||
height: 0;
|
||||
#slider-verify {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
$main-color: #006080;
|
||||
$border-color: #EBEEF5;
|
||||
|
||||
.el-button.el-button--primary {
|
||||
background-color: $main-color;
|
||||
border-color: $main-color;
|
||||
opacity: 1;
|
||||
transition: all .6;
|
||||
&:hover, &:active {
|
||||
opacity: .7;
|
||||
transition: all .6;
|
||||
}
|
||||
&:focus {
|
||||
opacity: .9;
|
||||
transition: all .6;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,539 @@
|
|||
/* Logo 字体 */
|
||||
@font-face {
|
||||
font-family: "iconfont logo";
|
||||
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
|
||||
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
|
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
|
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
|
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-family: "iconfont logo";
|
||||
font-size: 160px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* tabs */
|
||||
.nav-tabs {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-tabs .nav-more {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
#tabs {
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
#tabs li {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
border-bottom: 2px solid transparent;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-bottom: -1px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
|
||||
#tabs .active {
|
||||
border-bottom-color: #f00;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.tab-container .content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 页面布局 */
|
||||
.main {
|
||||
padding: 30px 100px;
|
||||
width: 960px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.main .logo {
|
||||
color: #333;
|
||||
text-align: left;
|
||||
margin-bottom: 30px;
|
||||
line-height: 1;
|
||||
height: 110px;
|
||||
margin-top: -50px;
|
||||
overflow: hidden;
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
.main .logo a {
|
||||
font-size: 160px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.helps {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.helps pre {
|
||||
padding: 20px;
|
||||
margin: 10px 0;
|
||||
border: solid 1px #e7e1cd;
|
||||
background-color: #fffdef;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.icon_lists {
|
||||
width: 100% !important;
|
||||
overflow: hidden;
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
.icon_lists li {
|
||||
width: 100px;
|
||||
margin-bottom: 10px;
|
||||
margin-right: 20px;
|
||||
text-align: center;
|
||||
list-style: none !important;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.icon_lists li .code-name {
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.icon_lists .icon {
|
||||
display: block;
|
||||
height: 100px;
|
||||
line-height: 100px;
|
||||
font-size: 42px;
|
||||
margin: 10px auto;
|
||||
color: #333;
|
||||
-webkit-transition: font-size 0.25s linear, width 0.25s linear;
|
||||
-moz-transition: font-size 0.25s linear, width 0.25s linear;
|
||||
transition: font-size 0.25s linear, width 0.25s linear;
|
||||
}
|
||||
|
||||
.icon_lists .icon:hover {
|
||||
font-size: 100px;
|
||||
}
|
||||
|
||||
.icon_lists .svg-icon {
|
||||
/* 通过设置 font-size 来改变图标大小 */
|
||||
width: 1em;
|
||||
/* 图标和文字相邻时，垂直对齐 */
|
||||
vertical-align: -0.15em;
|
||||
/* 通过设置 color 来改变 SVG 的颜色/fill */
|
||||
fill: currentColor;
|
||||
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
|
||||
normalize.css 中也包含这行 */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.icon_lists li .name,
|
||||
.icon_lists li .code-name {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* markdown 样式 */
|
||||
.markdown {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.markdown img {
|
||||
vertical-align: middle;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.markdown h1 {
|
||||
color: #404040;
|
||||
font-weight: 500;
|
||||
line-height: 40px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.markdown h2,
|
||||
.markdown h3,
|
||||
.markdown h4,
|
||||
.markdown h5,
|
||||
.markdown h6 {
|
||||
color: #404040;
|
||||
margin: 1.6em 0 0.6em 0;
|
||||
font-weight: 500;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.markdown h1 {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.markdown h2 {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.markdown h3 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.markdown h4 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.markdown h5 {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.markdown h6 {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.markdown hr {
|
||||
height: 1px;
|
||||
border: 0;
|
||||
background: #e9e9e9;
|
||||
margin: 16px 0;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.markdown p {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.markdown>p,
|
||||
.markdown>blockquote,
|
||||
.markdown>.highlight,
|
||||
.markdown>ol,
|
||||
.markdown>ul {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.markdown ul>li {
|
||||
list-style: circle;
|
||||
}
|
||||
|
||||
.markdown>ul li,
|
||||
.markdown blockquote ul>li {
|
||||
margin-left: 20px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.markdown>ul li p,
|
||||
.markdown>ol li p {
|
||||
margin: 0.6em 0;
|
||||
}
|
||||
|
||||
.markdown ol>li {
|
||||
list-style: decimal;
|
||||
}
|
||||
|
||||
.markdown>ol li,
|
||||
.markdown blockquote ol>li {
|
||||
margin-left: 20px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.markdown code {
|
||||
margin: 0 3px;
|
||||
padding: 0 5px;
|
||||
background: #eee;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.markdown strong,
|
||||
.markdown b {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.markdown>table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0px;
|
||||
empty-cells: show;
|
||||
border: 1px solid #e9e9e9;
|
||||
width: 95%;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.markdown>table th {
|
||||
white-space: nowrap;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.markdown>table th,
|
||||
.markdown>table td {
|
||||
border: 1px solid #e9e9e9;
|
||||
padding: 8px 16px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.markdown>table th {
|
||||
background: #F7F7F7;
|
||||
}
|
||||
|
||||
.markdown blockquote {
|
||||
font-size: 90%;
|
||||
color: #999;
|
||||
border-left: 4px solid #e9e9e9;
|
||||
padding-left: 0.8em;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.markdown blockquote p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.markdown .anchor {
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.markdown .waiting {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.markdown h1:hover .anchor,
|
||||
.markdown h2:hover .anchor,
|
||||
.markdown h3:hover .anchor,
|
||||
.markdown h4:hover .anchor,
|
||||
.markdown h5:hover .anchor,
|
||||
.markdown h6:hover .anchor {
|
||||
opacity: 1;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.markdown>br,
|
||||
.markdown>p>br {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
|
||||
.hljs {
|
||||
display: block;
|
||||
background: white;
|
||||
padding: 0.5em;
|
||||
color: #333333;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-meta {
|
||||
color: #969896;
|
||||
}
|
||||
|
||||
.hljs-string,
|
||||
.hljs-variable,
|
||||
.hljs-template-variable,
|
||||
.hljs-strong,
|
||||
.hljs-emphasis,
|
||||
.hljs-quote {
|
||||
color: #df5000;
|
||||
}
|
||||
|
||||
.hljs-keyword,
|
||||
.hljs-selector-tag,
|
||||
.hljs-type {
|
||||
color: #a71d5d;
|
||||
}
|
||||
|
||||
.hljs-literal,
|
||||
.hljs-symbol,
|
||||
.hljs-bullet,
|
||||
.hljs-attribute {
|
||||
color: #0086b3;
|
||||
}
|
||||
|
||||
.hljs-section,
|
||||
.hljs-name {
|
||||
color: #63a35c;
|
||||
}
|
||||
|
||||
.hljs-tag {
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.hljs-title,
|
||||
.hljs-attr,
|
||||
.hljs-selector-id,
|
||||
.hljs-selector-class,
|
||||
.hljs-selector-attr,
|
||||
.hljs-selector-pseudo {
|
||||
color: #795da3;
|
||||
}
|
||||
|
||||
.hljs-addition {
|
||||
color: #55a532;
|
||||
background-color: #eaffea;
|
||||
}
|
||||
|
||||
.hljs-deletion {
|
||||
color: #bd2c00;
|
||||
background-color: #ffecec;
|
||||
}
|
||||
|
||||
.hljs-link {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* 代码高亮 */
|
||||
/* PrismJS 1.15.0
|
||||
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
|
||||
/**
|
||||
* prism.js default theme for JavaScript, CSS and HTML
|
||||
* Based on dabblet (http://dabblet.com)
|
||||
* @author Lea Verou
|
||||
*/
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
color: black;
|
||||
background: none;
|
||||
text-shadow: 0 1px white;
|
||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
line-height: 1.5;
|
||||
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
pre[class*="language-"]::-moz-selection,
|
||||
pre[class*="language-"] ::-moz-selection,
|
||||
code[class*="language-"]::-moz-selection,
|
||||
code[class*="language-"] ::-moz-selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
pre[class*="language-"]::selection,
|
||||
pre[class*="language-"] ::selection,
|
||||
code[class*="language-"]::selection,
|
||||
code[class*="language-"] ::selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
@media print {
|
||||
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
pre[class*="language-"] {
|
||||
padding: 1em;
|
||||
margin: .5em 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
:not(pre)>code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
background: #f5f2f0;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre)>code[class*="language-"] {
|
||||
padding: .1em;
|
||||
border-radius: .3em;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: slategray;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.namespace {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.boolean,
|
||||
.token.number,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: #905;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: #690;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string {
|
||||
color: #9a6e3a;
|
||||
background: hsla(0, 0%, 100%, .5);
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.keyword {
|
||||
color: #07a;
|
||||
}
|
||||
|
||||
.token.function,
|
||||
.token.class-name {
|
||||
color: #DD4A68;
|
||||
}
|
||||
|
||||
.token.regex,
|
||||
.token.important,
|
||||
.token.variable {
|
||||
color: #e90;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
|
|
@ -0,0 +1,211 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>iconfont Demo</title>
|
||||
<link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
|
||||
<link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
|
||||
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
|
||||
<link rel="stylesheet" href="demo.css">
|
||||
<link rel="stylesheet" href="iconfont.css">
|
||||
<script src="iconfont.js"></script>
|
||||
<!-- jQuery -->
|
||||
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
|
||||
<!-- 代码高亮 -->
|
||||
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
|
||||
<style>
|
||||
.main .logo {
|
||||
margin-top: 0;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.main .logo a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.main .logo .sub-title {
|
||||
margin-left: 0.5em;
|
||||
font-size: 22px;
|
||||
color: #fff;
|
||||
background: linear-gradient(-45deg, #3967FF, #B500FE);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="main">
|
||||
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
|
||||
<img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
|
||||
|
||||
</a></h1>
|
||||
<div class="nav-tabs">
|
||||
<ul id="tabs" class="dib-box">
|
||||
<li class="dib active"><span>Unicode</span></li>
|
||||
<li class="dib"><span>Font class</span></li>
|
||||
<li class="dib"><span>Symbol</span></li>
|
||||
</ul>
|
||||
|
||||
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4373116" target="_blank" class="nav-more">查看项目</a>
|
||||
|
||||
</div>
|
||||
<div class="tab-container">
|
||||
<div class="content unicode" style="display: block;">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">down-circle</div>
|
||||
<div class="code-name">&#xe77f;</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<div class="article markdown">
|
||||
<h2 id="unicode-">Unicode 引用</h2>
|
||||
<hr>
|
||||
|
||||
<p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
|
||||
<ul>
|
||||
<li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
|
||||
<li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
|
||||
</ul>
|
||||
<blockquote>
|
||||
<p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
|
||||
</blockquote>
|
||||
<p>Unicode 使用步骤如下：</p>
|
||||
<h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
|
||||
<pre><code class="language-css"
|
||||
>@font-face {
|
||||
font-family: 'iconfont';
|
||||
src: url('iconfont.woff2?t=1702534663582') format('woff2'),
|
||||
url('iconfont.woff?t=1702534663582') format('woff'),
|
||||
url('iconfont.ttf?t=1702534663582') format('truetype');
|
||||
}
|
||||
</code></pre>
|
||||
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
|
||||
<pre><code class="language-css"
|
||||
>.iconfont {
|
||||
font-family: "iconfont" !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
</code></pre>
|
||||
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
|
||||
<pre>
|
||||
<code class="language-html"
|
||||
><span class="iconfont">&#x33;</span>
|
||||
</code></pre>
|
||||
<blockquote>
|
||||
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content font-class">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-down-circle"></span>
|
||||
<div class="name">
|
||||
down-circle
|
||||
</div>
|
||||
<div class="code-name">.icon-down-circle
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<div class="article markdown">
|
||||
<h2 id="font-class-">font-class 引用</h2>
|
||||
<hr>
|
||||
|
||||
<p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
|
||||
<p>与 Unicode 使用方式相比，具有如下特点：</p>
|
||||
<ul>
|
||||
<li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
|
||||
<li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
|
||||
</ul>
|
||||
<p>使用步骤如下：</p>
|
||||
<h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
|
||||
<pre><code class="language-html"><link rel="stylesheet" href="./iconfont.css">
|
||||
</code></pre>
|
||||
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
|
||||
<pre><code class="language-html"><span class="iconfont icon-xxx"></span>
|
||||
</code></pre>
|
||||
<blockquote>
|
||||
<p>"
|
||||
iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content symbol">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-down-circle"></use>
|
||||
</svg>
|
||||
<div class="name">down-circle</div>
|
||||
<div class="code-name">#icon-down-circle</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<div class="article markdown">
|
||||
<h2 id="symbol-">Symbol 引用</h2>
|
||||
<hr>
|
||||
|
||||
<p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
|
||||
这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
|
||||
<ul>
|
||||
<li>支持多色图标了，不再受单色限制。</li>
|
||||
<li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
|
||||
<li>兼容性较差，支持 IE9+，及现代浏览器。</li>
|
||||
<li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
|
||||
</ul>
|
||||
<p>使用步骤如下：</p>
|
||||
<h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
|
||||
<pre><code class="language-html"><script src="./iconfont.js"></script>
|
||||
</code></pre>
|
||||
<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
|
||||
<pre><code class="language-html"><style>
|
||||
.icon {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
vertical-align: -0.15em;
|
||||
fill: currentColor;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</code></pre>
|
||||
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
|
||||
<pre><code class="language-html"><svg class="icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-xxx"></use>
|
||||
</svg>
|
||||
</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
$('.tab-container .content:first').show()
|
||||
|
||||
$('#tabs li').click(function (e) {
|
||||
var tabContent = $('.tab-container .content')
|
||||
var index = $(this).index()
|
||||
|
||||
if ($(this).hasClass('active')) {
|
||||
return
|
||||
} else {
|
||||
$('#tabs li').removeClass('active')
|
||||
$(this).addClass('active')
|
||||
|
||||
tabContent.hide().eq(index).fadeIn()
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
@font-face {
|
||||
font-family: "iconfont"; /* Project id 4373116 */
|
||||
src: url('iconfont.woff2?t=1702534663582') format('woff2'),
|
||||
url('iconfont.woff?t=1702534663582') format('woff'),
|
||||
url('iconfont.ttf?t=1702534663582') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-family: "iconfont" !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-down-circle:before {
|
||||
content: "\e77f";
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1 @@
|
|||
window._iconfont_svg_string_4373116='<svg><symbol id="icon-down-circle" viewBox="0 0 1024 1024"><path d="M690 405h-46.9c-10.2 0-19.9 4.9-25.9 13.2L512 563.6 406.8 418.2c-6-8.3-15.6-13.2-25.9-13.2H334c-6.5 0-10.3 7.4-6.5 12.7l178 246c3.2 4.4 9.7 4.4 12.9 0l178-246c3.9-5.3 0.1-12.7-6.4-12.7z" ></path><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" ></path></symbol></svg>',function(n){var t=(t=document.getElementsByTagName("script"))[t.length-1],e=t.getAttribute("data-injectcss"),t=t.getAttribute("data-disable-injectsvg");if(!t){var o,i,c,d,s,a=function(t,e){e.parentNode.insertBefore(t,e)};if(e&&!n.__iconfont__svg__cssinject__){n.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(t){console&&console.log(t)}}o=function(){var t,e=document.createElement("div");e.innerHTML=n._iconfont_svg_string_4373116,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?a(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(o,0):(i=function(){document.removeEventListener("DOMContentLoaded",i,!1),o()},document.addEventListener("DOMContentLoaded",i,!1)):document.attachEvent&&(c=o,d=n.document,s=!1,r(),d.onreadystatechange=function(){"complete"==d.readyState&&(d.onreadystatechange=null,l())})}function l(){s||(s=!0,c())}function r(){try{d.documentElement.doScroll("left")}catch(t){return void setTimeout(r,50)}l()}}(window);
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
{
|
||||
"id": "4373116",
|
||||
"name": "rax-medical",
|
||||
"font_family": "iconfont",
|
||||
"css_prefix_text": "icon-",
|
||||
"description": "",
|
||||
"glyphs": [
|
||||
{
|
||||
"icon_id": "4765729",
|
||||
"name": "down-circle",
|
||||
"font_class": "down-circle",
|
||||
"unicode": "e77f",
|
||||
"unicode_decimal": 59263
|
||||
}
|
||||
]
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
10
src/main.ts
10
src/main.ts
|
|
@ -2,14 +2,22 @@ import { createApp, defineComponent, ref, reactive } from 'vue'
|
|||
|
||||
import main from './main.vue'
|
||||
import router from './router'
|
||||
import { createPinia } from 'pinia'
|
||||
import ElementPlus from 'element-plus';
|
||||
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
|
||||
|
||||
import SliderVerify from 'slider-verify-v3'
|
||||
import 'slider-verify-v3/lib/SliderVerify.css'
|
||||
|
||||
import 'element-plus/dist/index.css';
|
||||
import './assets/css/global.scss';
|
||||
import './assets/font/iconfont.css';
|
||||
|
||||
const app = createApp(main)
|
||||
const pinia = createPinia()
|
||||
const app = createApp(main)
|
||||
|
||||
app.use(pinia)
|
||||
app.use(SliderVerify)
|
||||
|
||||
app.use(router)
|
||||
.use(ElementPlus) // ElementPlus 全局引入
|
||||
|
|
|
|||
27
src/main.vue
27
src/main.vue
|
|
@ -1,13 +1,26 @@
|
|||
<script lang="ts">
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
<script lang="ts" setup>
|
||||
import { onMounted } from "vue";
|
||||
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
|
||||
}
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
// 路由初始化后执行
|
||||
router.isReady().then(() => {
|
||||
// 如果访问地址无效则跳转到之前记录的应用或菜单，没有则跳到首页
|
||||
if(!router.hasRoute(route.name || '')) {
|
||||
router.replace('/404');
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<RouterView />
|
||||
<el-config-provider :locale="zhCn">
|
||||
<RouterView />
|
||||
</el-config-provider>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,43 @@
|
|||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import { useLoginStore } from '@/stores/user-info-store'
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
routes: [
|
||||
{ path: '/:pathMatch(.*)*', name: 'not-found', redirect: '/home' },
|
||||
{
|
||||
path: '/',
|
||||
name: '远程管理',
|
||||
component: () => import('@/views/remote-manage/remote-manage.vue'),
|
||||
}
|
||||
path: '/login',
|
||||
name: '登录',
|
||||
component: () => import('@/views/login/login.vue'),
|
||||
},
|
||||
{
|
||||
path: '/',
|
||||
redirect: '/home',
|
||||
children: [
|
||||
{
|
||||
path: '/home',
|
||||
name: '首页',
|
||||
component: () => import('@/views/home/home.vue'),
|
||||
},
|
||||
{
|
||||
path: '/remote-manage',
|
||||
name: '远程管理',
|
||||
component: () => import('@/views/remote-manage/remote-manage.vue'),
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
router.beforeEach((to, from, next) => {
|
||||
const loginInfo = useLoginStore().getlogin()
|
||||
const isLogin = loginInfo.isLogin
|
||||
if (to.fullPath !=='/login' && !isLogin) {
|
||||
next('/login') // 重定向登录页
|
||||
} else {
|
||||
// 如果用户有权限，正常进行导航
|
||||
next()
|
||||
}
|
||||
});
|
||||
|
||||
export default router
|
||||
|
|
|
|||
|
|
@ -0,0 +1,44 @@
|
|||
import Mock from 'mockjs'
|
||||
|
||||
var template = {
|
||||
'title': 'Syntax Demo',
|
||||
|
||||
'string1|1-10': '★',
|
||||
'string2|3': 'value',
|
||||
|
||||
'number1|+1': 100,
|
||||
'number2|1-100': 100,
|
||||
'number3|1-100.1-10': 1,
|
||||
'number4|123.1-10': 1,
|
||||
'number5|123.3': 1,
|
||||
'number6|123.10': 1.123,
|
||||
|
||||
'boolean1|1': true,
|
||||
'boolean2|1-2': true,
|
||||
|
||||
'object1|2-4': {
|
||||
'110000': '北京市',
|
||||
'120000': '天津市',
|
||||
'130000': '河北省',
|
||||
'140000': '山西省'
|
||||
},
|
||||
'object2|2': {
|
||||
'310000': '上海市',
|
||||
'320000': '江苏省',
|
||||
'330000': '浙江省',
|
||||
'340000': '安徽省'
|
||||
},
|
||||
|
||||
'array1|1': ['AMD', 'CMD', 'KMD', 'UMD'],
|
||||
'array2|1-10': ['Mock.js'],
|
||||
'array3|3': ['Mock.js'],
|
||||
|
||||
'function': function () {
|
||||
return this.title
|
||||
}
|
||||
}
|
||||
|
||||
var data = []
|
||||
data.push(Mock.mock(template))
|
||||
data.push(Mock.mock(template))
|
||||
console.log(data)
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
// stores/counter.js
|
||||
import { defineStore } from 'pinia'
|
||||
|
||||
export const useLoginStore = defineStore('login', {
|
||||
state: () => {
|
||||
return {
|
||||
login: {
|
||||
isLogin: false,
|
||||
name: ''
|
||||
} as any
|
||||
}
|
||||
},
|
||||
// 也可以这样定义
|
||||
// state: () => ({ count: 0 })
|
||||
actions: {
|
||||
getlogin() {
|
||||
return this.login
|
||||
},
|
||||
setlogin(key: string,e: any) {
|
||||
this.login[key] = e
|
||||
}
|
||||
},
|
||||
})
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<template>
|
||||
<div>
|
||||
首页
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
|
||||
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<template>
|
||||
<div>
|
||||
<RouterView />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
|
||||
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,396 @@
|
|||
<template>
|
||||
<div class="login-page">
|
||||
<div class="left-content"></div>
|
||||
<div class="right-content">
|
||||
<div class="select-hospital">
|
||||
<el-select v-model="currentHospital" size="small" @change="selectHospital">
|
||||
<el-option v-for="item in hospitals" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</div>
|
||||
|
||||
<img v-show="!isShowRegister" class="logo" src="@/assets/imgs/logo.png">
|
||||
<div class="login-block" v-if="!isShowRegister">
|
||||
<div class="login-way">
|
||||
<span :class="passwordLogin && 'active'" @click="passwordLogin = true">密码登录</span>
|
||||
<span :class="!passwordLogin && 'active'" @click="passwordLogin = false">验证码登录</span>
|
||||
</div>
|
||||
<el-form ref="loginFormRef" :model="loginParams" :rules="loginRules" label-width="0" size="small"
|
||||
status-icon>
|
||||
<div class="login-form password-login" v-if="passwordLogin">
|
||||
<el-form-item prop="account">
|
||||
<el-input v-model="loginParams.account" placeholder="请输入用户名">
|
||||
<template #prepend>
|
||||
<el-icon>
|
||||
<User />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-input v-model="loginParams.password" type="password" placeholder="请输入密码">
|
||||
<template #prepend>
|
||||
<el-icon>
|
||||
<Lock />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-button class="login-btn" type="primary" @click="login('password')">登录</el-button>
|
||||
<span class="register-btn" @click="isShowRegister = true">注册账号</span>
|
||||
</div>
|
||||
<div class="login-form code-login" v-else>
|
||||
<el-form-item prop="phone">
|
||||
<el-input v-model="loginParams.phone" type="password" placeholder="请输入手机号">
|
||||
<template #prepend>
|
||||
<div @click.stop style="display: flex;align-items: center;">
|
||||
<el-dropdown @command="selectPhoneArea">
|
||||
<span>{{ loginParams.phoneArea }}<el-icon>
|
||||
<DCaret />
|
||||
</el-icon></span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item v-for="item in phoneAreas" :command="item">{{ item
|
||||
}}</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="code">
|
||||
<el-input v-model="loginParams.code" placeholder="">
|
||||
<template #append>
|
||||
<span class="send-btn" @click="sendCode">{{ loginParams.sendText }}</span>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-button class="login-btn" type="primary" @click="login('code')">登录/注册</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
<div v-else class="register-block">
|
||||
<div class="header-box">
|
||||
<span class="title">新用户申请</span>
|
||||
<el-icon @click="isShowRegister = false"><Close /></el-icon>
|
||||
</div>
|
||||
|
||||
<el-form ref="registerFormRef" :model="registerParams" :rules="registerRules" label-width="100"
|
||||
status-icon>
|
||||
<el-form-item label="用户名" prop="account">
|
||||
<el-input v-model="registerParams.account" placeholder="请输入用户名"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="密码" prop="password">
|
||||
<el-input v-model="registerParams.password" type placeholder="请输入密码"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="姓名" prop="name">
|
||||
<el-input v-model="registerParams.name" type placeholder="请输入姓名"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号" prop="phone">
|
||||
<el-input v-model="registerParams.phone" type placeholder="请输入手机号"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="医院" prop="hospital">
|
||||
<el-select v-model="registerParams.hospital">
|
||||
<el-option v-for="item in hospitals" :key="item.value" :label="item.label"
|
||||
:value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="性别" prop="sex">
|
||||
<el-radio-group v-model="registerParams.sex">
|
||||
<el-radio label="男" />
|
||||
<el-radio label="女" />
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="验证码" prop="phone">
|
||||
<el-input v-model="registerParams.phone" type placeholder="请输入验证码"></el-input>
|
||||
<img src="" />
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
<div class="footer-box">
|
||||
<el-button type="primary">注 册</el-button>
|
||||
<span @click="isShowRegister = false">已有账号？</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<SliderVerify v-model:isShowSelf="sliderVConf.isShowSelf" :width="sliderVConf.width"
|
||||
:height="sliderVConf.height" @success="toHome"></SliderVerify>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { useLoginStore } from '@/stores/user-info-store'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const hospitals: any = []
|
||||
const phoneAreas: any = ['中国 +86']
|
||||
|
||||
const loginRules = reactive({
|
||||
account: [
|
||||
{ required: true, message: '请输入用户名', trigger: 'blur' },
|
||||
],
|
||||
password: [
|
||||
{ required: true, message: '请输入密码', trigger: 'blur' },
|
||||
],
|
||||
phone: [
|
||||
{ required: true, message: '请输入手机号', trigger: 'blur' },
|
||||
],
|
||||
code: [
|
||||
{ required: true, message: '请输入验证码', trigger: 'blur' },
|
||||
]
|
||||
})
|
||||
const registerRules = reactive({
|
||||
account: [
|
||||
{ required: true, message: '请输入用户名', trigger: 'blur' },
|
||||
],
|
||||
password: [
|
||||
{ required: true, message: '请输入密码', trigger: 'blur' },
|
||||
],
|
||||
name: [
|
||||
{ required: true, message: '请输入用户名', trigger: 'blur' },
|
||||
],
|
||||
phone: [
|
||||
{ required: true, message: '请输入手机号', trigger: 'blur' },
|
||||
],
|
||||
hospital: [
|
||||
{ required: true, message: '请选择医院', trigger: 'blur' },
|
||||
],
|
||||
code: [
|
||||
{ required: true, message: '请输入验证码', trigger: 'blur' },
|
||||
]
|
||||
})
|
||||
|
||||
const loginFormRef = ref()
|
||||
const registerFormRef = ref()
|
||||
const slideVerifyRef = ref()
|
||||
const currentHospital = ref('')
|
||||
const isShowRegister = ref(false)
|
||||
const passwordLogin = ref(true)
|
||||
const loginParams = ref({
|
||||
account: '',
|
||||
password: '',
|
||||
phone: '',
|
||||
phoneArea: phoneAreas[0],
|
||||
code: '',
|
||||
isSendCode: false,
|
||||
sendText: '获取短信验证码'
|
||||
})
|
||||
const registerParams = ref({
|
||||
account: '',
|
||||
password: '',
|
||||
name: '',
|
||||
phone: '',
|
||||
hospital: '',
|
||||
sex: '',
|
||||
code: ''
|
||||
})
|
||||
const sliderVConf = ref({
|
||||
isShowSelf: false,
|
||||
width: 500,
|
||||
height: 200
|
||||
})
|
||||
|
||||
hospitals.push({ label: '北京朝阳医院', value: '北京朝阳医院' })
|
||||
hospitals.push({ label: '北京朝阳医院1', value: '北京朝阳医院1' })
|
||||
hospitals.push({ label: '北京朝阳医院2', value: '北京朝阳医院2' })
|
||||
currentHospital.value = hospitals[0].value
|
||||
|
||||
|
||||
const selectHospital = (e: string) => {
|
||||
console.log(e)
|
||||
}
|
||||
const register = () => {
|
||||
|
||||
}
|
||||
const selectPhoneArea = (e: string) => {
|
||||
loginParams.value.phoneArea = e
|
||||
}
|
||||
const sendCode = () => {
|
||||
|
||||
}
|
||||
const login = async (type: string) => {
|
||||
const obj = loginParams.value
|
||||
await loginFormRef.value.validate((valid: any, fields: any) => {
|
||||
if (valid) {
|
||||
console.log('submit!')
|
||||
sliderVConf.value.isShowSelf = true
|
||||
} else {
|
||||
console.log('error submit!', fields)
|
||||
}
|
||||
})
|
||||
}
|
||||
const toHome = () => {
|
||||
useLoginStore().setlogin('isLogin', true)
|
||||
router.push('/home')
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.login-page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
background-color: #F8F8F8;
|
||||
|
||||
.left-content {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
background: url(@/assets/imgs/login/login_bck.png) no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.right-content {
|
||||
position: relative;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.select-hospital {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
right: 50px;
|
||||
|
||||
:deep(.el-select) {
|
||||
width: auto;
|
||||
|
||||
.el-input__wrapper {
|
||||
padding: 1px 12px;
|
||||
border-radius: 20px;
|
||||
|
||||
.el-input__inner {
|
||||
color: $main-color;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 505px;
|
||||
margin-top: calc(50% - 280px);
|
||||
}
|
||||
|
||||
.login-block {
|
||||
width: 65%;
|
||||
min-width: 500px;
|
||||
min-height: 300px;
|
||||
padding: 50px;
|
||||
margin-top: 20px;
|
||||
background: white;
|
||||
|
||||
.login-way {
|
||||
font-size: 18px;
|
||||
color: #606266;
|
||||
|
||||
span {
|
||||
cursor: pointer;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.active {
|
||||
color: $main-color;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.login-form {
|
||||
:deep(.el-input) {
|
||||
font-size: 16px;
|
||||
margin-top: 20px;
|
||||
|
||||
.el-input-group__prepend,
|
||||
.el-input__wrapper,
|
||||
.el-input-group__append {
|
||||
box-shadow: none;
|
||||
border-bottom: 1px solid $border-color;
|
||||
background-color: transparent;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
.el-input-group__prepend,
|
||||
.el-input-group__append {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 16px;
|
||||
top: calc(50% - 8px);
|
||||
right: 0;
|
||||
background-color: $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input-group__append::after {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.send-btn {
|
||||
cursor: pointer;
|
||||
color: $main-color;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
width: 100%;
|
||||
margin-top: 40px;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
padding: 20px 0 20px 0.5em;
|
||||
border-radius: 10px;
|
||||
letter-spacing: 0.5em;
|
||||
}
|
||||
|
||||
.register-btn {
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
color: $main-color;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.register-block {
|
||||
width: 65%;
|
||||
min-width: 500px;
|
||||
min-height: 300px;
|
||||
padding: 50px;
|
||||
margin-top: 200px;
|
||||
background: white;
|
||||
.header-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 30px;
|
||||
.title {
|
||||
font-size: 20px;
|
||||
color: $main-color;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
.footer-box {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
&>span {
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
color: #909399;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -16,7 +16,7 @@ export default defineConfig({
|
|||
css:{
|
||||
preprocessorOptions:{
|
||||
scss:{
|
||||
// additionalData: '@import "./src/assets/css/global.scss";' //引入scss文件
|
||||
additionalData: '@import "./src/assets/css/variable.scss";' //引入scss文件
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user