🎨 细节调整

This commit is contained in:
gaofy 2023-12-19 14:03:07 +08:00
parent 268debf65c
commit 21b6f6a32e
10 changed files with 124 additions and 24 deletions

View File

@ -54,6 +54,24 @@
<div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe799;</span>
<div class="name">setting</div>
<div class="code-name">&amp;#xe799;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe751;</span>
<div class="name">首页</div>
<div class="code-name">&amp;#xe751;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe61e;</span>
<div class="name">安全保障</div>
<div class="code-name">&amp;#xe61e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6eb;</span>
<div class="name">预约</div>
@ -126,9 +144,9 @@
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1702710850882') format('woff2'),
url('iconfont.woff?t=1702710850882') format('woff'),
url('iconfont.ttf?t=1702710850882') format('truetype');
src: url('iconfont.woff2?t=1702965078511') format('woff2'),
url('iconfont.woff?t=1702965078511') format('woff'),
url('iconfont.ttf?t=1702965078511') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步:定义使用 iconfont 的样式</h3>
@ -154,6 +172,33 @@
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-setting"></span>
<div class="name">
setting
</div>
<div class="code-name">.icon-setting
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shouye"></span>
<div class="name">
首页
</div>
<div class="code-name">.icon-shouye
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-anquanbaozhang"></span>
<div class="name">
安全保障
</div>
<div class="code-name">.icon-anquanbaozhang
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-RectangleCopy"></span>
<div class="name">
@ -262,6 +307,30 @@
<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-setting"></use>
</svg>
<div class="name">setting</div>
<div class="code-name">#icon-setting</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shouye"></use>
</svg>
<div class="name">首页</div>
<div class="code-name">#icon-shouye</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-anquanbaozhang"></use>
</svg>
<div class="name">安全保障</div>
<div class="code-name">#icon-anquanbaozhang</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-RectangleCopy"></use>

View File

@ -1,8 +1,8 @@
@font-face {
font-family: "iconfont"; /* Project id 4373116 */
src: url('iconfont.woff2?t=1702710850882') format('woff2'),
url('iconfont.woff?t=1702710850882') format('woff'),
url('iconfont.ttf?t=1702710850882') format('truetype');
src: url('iconfont.woff2?t=1702965078511') format('woff2'),
url('iconfont.woff?t=1702965078511') format('woff'),
url('iconfont.ttf?t=1702965078511') format('truetype');
}
.iconfont {
@ -13,6 +13,18 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-setting:before {
content: "\e799";
}
.icon-shouye:before {
content: "\e751";
}
.icon-anquanbaozhang:before {
content: "\e61e";
}
.icon-RectangleCopy:before {
content: "\e6eb";
}

File diff suppressed because one or more lines are too long

View File

@ -5,6 +5,27 @@
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "4765891",
"name": "setting",
"font_class": "setting",
"unicode": "e799",
"unicode_decimal": 59289
},
{
"icon_id": "577364",
"name": "首页",
"font_class": "shouye",
"unicode": "e751",
"unicode_decimal": 59217
},
{
"icon_id": "33986995",
"name": "安全保障",
"font_class": "anquanbaozhang",
"unicode": "e61e",
"unicode_decimal": 58910
},
{
"icon_id": "7733536",
"name": "预约",

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@ -10,7 +10,7 @@
<div class="tabs-item" v-for="(item, index) in ['基础信息', '安全信息']" :key="item"
:class="{ 'active': tabActive === index }" @click="tabActive = index">{{ item }}</div>
</div>
<el-form ref="formRef" :model="formData" :rules="rules" label-width="100">
<el-form ref="formRef" :model="formData" :rules="rules" label-width="60">
<template v-if="tabActive === 0">
<el-upload action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" :limit="1"
:show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
@ -158,10 +158,10 @@ const submitForm = async () => {
width: 128px;
height: 148px;
object-fit: contain;
margin: 0 0 20px 50px;
margin: 0 0 20px 60px;
}
.submit-box {
padding-left: 50px ;
padding-left: 60px;
}
}
</style>

View File

@ -52,7 +52,7 @@
<div class="main-content">
<RouterView />
</div>
<el-drawer v-model="isShowUserInfoDrawer" title="I am the title" :with-header="false">
<el-drawer v-model="isShowUserInfoDrawer" size="35%" :with-header="false">
<userInfoForm @close="isShowUserInfoDrawer = false" />
</el-drawer>
</div>
@ -73,12 +73,12 @@ const userInfo = useLoginStore().getlogin()
const hospitals: any = getHospitalsData()
const menus = [
{ label: '首页', path: '/home', icon: 'icon-shouye-zhihui' },
{ label: '权限管理', path: '/permissions-manage', icon: 'icon-24gl-userGroup' },
{ label: '首页', path: '/home', icon: 'icon-shouye' },
{ label: '权限管理', path: '/permissions-manage', icon: 'icon-users' },
{ label: '患者管理', path: '/patients-manage', icon: 'icon-renyuanguanli' },
{ label: '远程管理', path: '/remote-manage', icon: 'icon-yuanchengfei' },
{ label: '远程管理', path: '/remote-manage', icon: 'icon-anquanbaozhang' },
{ label: '后台管理', path: '/system-manage', icon: 'icon-houtaiguanli' },
{ label: '日志管理', path: '/logs-manage', icon: 'icon-31shezhi' }
{ label: '日志管理', path: '/logs-manage', icon: 'icon-setting' }
]
const isShowUserInfoDrawer = ref(false)
@ -144,7 +144,7 @@ const userCommand = (e: string) => {
.head-box {
width: 100%;
height: 50px;
height: 70px;
padding: 0 24px;
background: white;
display: flex;
@ -152,7 +152,7 @@ const userCommand = (e: string) => {
align-items: center;
.logo-box {
height: 100%;
height: 50px;
img {
height: 100%;
@ -170,7 +170,7 @@ const userCommand = (e: string) => {
font-size: 18px;
font-weight: 600;
color: $main-color;
line-height: 50px;
line-height: 70px;
padding: 0 20px;
margin: 0;
transition: all .5s;
@ -188,8 +188,7 @@ const userCommand = (e: string) => {
-webkit-transition: all .5s;
}
img {
height: 20px;
i {
margin-right: 10px;
}
}
@ -229,7 +228,7 @@ const userCommand = (e: string) => {
}
&>.main-content {
width: 100%;
height: calc(100% - 50px);
height: calc(100% - 70px);
background: #f5f7fa;
}
}

View File

@ -275,6 +275,7 @@ const toHome = () => {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.select-hospital-box {
@ -284,8 +285,7 @@ const toHome = () => {
}
.logo {
width: 505px;
margin-top: calc(50% - 280px);
height: 70px;
}
.login-block {
@ -376,7 +376,6 @@ const toHome = () => {
min-width: 500px;
min-height: 300px;
padding: 50px;
margin-top: 150px;
background: white;
.header-box {
display: flex;