mirror of
http://112.124.100.131/ebiz-ai/ebiz-ai-knowledge-manage.git
synced 2025-12-24 18:23:05 +08:00
feat(fonts): 登录页UI修改
- 在 demo.css 中更新了 @font-face 规则，增加了新的字体来源 - 在 demo_index.html 中添加了两个新图标的使用示例 - 在 iconfont.css 中增加了两个新图标的 CSS 样式
This commit is contained in:
du.meimei
@@ -370,7 +370,7 @@ export function builtInEnableMetadata(data) {
|
||||
// 查询文档元数据列表
|
||||
export function getMetaDataDocList(data) {
|
||||
return request({
|
||||
url: getUrl(`/document/metadata/list`),
|
||||
url: getUrl(`/documentMetadataEx/list`),
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
|
||||
BIN
src/assets/images/login.png
Normal file
BIN
src/assets/images/login.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
src/assets/images/xing.png
Normal file
BIN
src/assets/images/xing.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
@@ -2,10 +2,14 @@
|
||||
@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');
|
||||
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 {
|
||||
|
||||
@@ -3,9 +3,20 @@
|
||||
<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="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>
|
||||
@@ -37,8 +48,15 @@
|
||||
<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
|
||||
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">
|
||||
@@ -48,11 +66,28 @@
|
||||
<li class="dib"><span>Symbol</span></li>
|
||||
</ul>
|
||||
|
||||
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4902894" target="_blank" class="nav-more">查看项目</a>
|
||||
<a
|
||||
href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4902894"
|
||||
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">穿梭右</div>
|
||||
<div class="code-name">&#xe647;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">眼睛显示</div>
|
||||
<div class="code-name">&#xe76e;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">主页</div>
|
||||
@@ -105,13 +140,15 @@
|
||||
</p>
|
||||
</blockquote>
|
||||
<p>Unicode 使用步骤如下：</p>
|
||||
<h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
|
||||
<h3 id="-font-face">
|
||||
第一步：拷贝项目下面生成的 <code>@font-face</code>
|
||||
</h3>
|
||||
<pre><code class="language-css"
|
||||
>@font-face {
|
||||
font-family: 'iconfont';
|
||||
src: url('iconfont.woff2?t=1745388823017') format('woff2'),
|
||||
url('iconfont.woff?t=1745388823017') format('woff'),
|
||||
url('iconfont.ttf?t=1745388823017') format('truetype');
|
||||
src: url('iconfont.woff2?t=1745918237045') format('woff2'),
|
||||
url('iconfont.woff?t=1745918237045') format('woff'),
|
||||
url('iconfont.ttf?t=1745918237045') format('truetype');
|
||||
}
|
||||
</code></pre>
|
||||
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
|
||||
@@ -130,12 +167,31 @@
|
||||
><span class="iconfont">&#x33;</span>
|
||||
</code></pre>
|
||||
<blockquote>
|
||||
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
|
||||
<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-chuansuoyou"></span>
|
||||
<div class="name">
|
||||
穿梭右
|
||||
</div>
|
||||
<div class="code-name">.icon-chuansuoyou</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-yanjingxianshi"></span>
|
||||
<div class="name">
|
||||
眼睛显示
|
||||
</div>
|
||||
<div class="code-name">.icon-yanjingxianshi</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-zhuye"></span>
|
||||
<div class="name">
|
||||
@@ -188,26 +244,56 @@
|
||||
<h2 id="font-class-">font-class 引用</h2>
|
||||
<hr />
|
||||
|
||||
<p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
|
||||
<p>
|
||||
font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode
|
||||
书写不直观，语意不明确的问题。
|
||||
</p>
|
||||
<p>与 Unicode 使用方式相比，具有如下特点：</p>
|
||||
<ul>
|
||||
<li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
|
||||
<li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
|
||||
<li>
|
||||
相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon
|
||||
是什么。
|
||||
</li>
|
||||
<li>
|
||||
因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class
|
||||
里面的 Unicode 引用。
|
||||
</li>
|
||||
</ul>
|
||||
<p>使用步骤如下：</p>
|
||||
<h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
|
||||
<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>
|
||||
<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-chuansuoyou"></use>
|
||||
</svg>
|
||||
<div class="name">穿梭右</div>
|
||||
<div class="code-name">#icon-chuansuoyou</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-yanjingxianshi"></use>
|
||||
</svg>
|
||||
<div class="name">眼睛显示</div>
|
||||
<div class="code-name">#icon-yanjingxianshi</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-zhuye"></use>
|
||||
@@ -261,12 +347,18 @@
|
||||
<hr />
|
||||
|
||||
<p>
|
||||
这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a> 这种用法其实是做了一个 SVG
|
||||
的集合，与另外两种相比具有如下特点：
|
||||
这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a
|
||||
href=""
|
||||
>文章</a
|
||||
>
|
||||
这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：
|
||||
</p>
|
||||
<ul>
|
||||
<li>支持多色图标了，不再受单色限制。</li>
|
||||
<li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
|
||||
<li>
|
||||
通过一些技巧，支持像字体那样，通过 <code>font-size</code>,
|
||||
<code>color</code> 来调整样式。
|
||||
</li>
|
||||
<li>兼容性较差，支持 IE9+，及现代浏览器。</li>
|
||||
<li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
|
||||
</ul>
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
@font-face {
|
||||
font-family: 'iconfont'; /* Project id 4902894 */
|
||||
src: url('iconfont.woff2?t=1742281383675') format('woff2'), url('iconfont.woff?t=1742281383675') format('woff'),
|
||||
url('iconfont.ttf?t=1742281383675') format('truetype');
|
||||
src: url('iconfont.woff2?t=1745918237045') format('woff2'),
|
||||
url('iconfont.woff?t=1745918237045') format('woff'),
|
||||
url('iconfont.ttf?t=1745918237045') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
@@ -12,6 +13,14 @@
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-chuansuoyou:before {
|
||||
content: '\e647';
|
||||
}
|
||||
|
||||
.icon-yanjingxianshi:before {
|
||||
content: '\e76e';
|
||||
}
|
||||
|
||||
.icon-zhuye:before {
|
||||
content: '\e65e';
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -5,6 +5,20 @@
|
||||
"css_prefix_text": "icon-",
|
||||
"description": "",
|
||||
"glyphs": [
|
||||
{
|
||||
"icon_id": "43551849",
|
||||
"name": "穿梭右",
|
||||
"font_class": "chuansuoyou",
|
||||
"unicode": "e647",
|
||||
"unicode_decimal": 58951
|
||||
},
|
||||
{
|
||||
"icon_id": "33131587",
|
||||
"name": "眼睛显示",
|
||||
"font_class": "yanjingxianshi",
|
||||
"unicode": "e76e",
|
||||
"unicode_decimal": 59246
|
||||
},
|
||||
{
|
||||
"icon_id": "4320362",
|
||||
"name": "主页",
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -8,14 +8,15 @@
|
||||
auto-complete="on"
|
||||
label-position="left"
|
||||
>
|
||||
<div class="title-container">
|
||||
<div class="title-container flex">
|
||||
<img :src="xing" alt="" />
|
||||
<h3 class="title">欢迎登录</h3>
|
||||
</div>
|
||||
|
||||
<el-form-item prop="userName">
|
||||
<span class="svg-container">
|
||||
<svg-icon icon-class="user" />
|
||||
</span>
|
||||
<!-- <span class="svg-container">-->
|
||||
<!-- <svg-icon icon-class="user" />-->
|
||||
<!-- </span>-->
|
||||
<el-input
|
||||
ref="userName"
|
||||
v-model="loginForm.userName"
|
||||
@@ -28,9 +29,9 @@
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="password">
|
||||
<span class="svg-container">
|
||||
<svg-icon icon-class="password" />
|
||||
</span>
|
||||
<!-- <span class="svg-container">-->
|
||||
<!-- <svg-icon icon-class="password" />-->
|
||||
<!-- </span>-->
|
||||
<el-input
|
||||
:key="passwordType"
|
||||
ref="password"
|
||||
@@ -43,25 +44,33 @@
|
||||
@keyup.enter.native="handleLogin"
|
||||
/>
|
||||
<span class="show-pwd" @click="showPwd">
|
||||
<svg-icon
|
||||
:icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
|
||||
/>
|
||||
<i v-if="passwordType === 'password'" class="el-icon-view"></i>
|
||||
<i
|
||||
v-else
|
||||
class="iconfont icon-yanjingxianshi"
|
||||
style="font-size: 20px"
|
||||
></i>
|
||||
<!-- <svg-icon-->
|
||||
<!-- :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"-->
|
||||
<!-- />-->
|
||||
</span>
|
||||
</el-form-item>
|
||||
|
||||
<el-button
|
||||
:loading="loading"
|
||||
type="primary"
|
||||
style="width:100%;margin-bottom:30px;"
|
||||
style="width:100%;margin-top: 127px;margin-bottom: 20px;border-radius: 8px"
|
||||
:style="buttonStyle"
|
||||
@click.native.prevent="handleLogin"
|
||||
>登录</el-button
|
||||
>
|
||||
>登录 <i class="iconfont icon-chuansuoyou"></i
|
||||
></el-button>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { validUsername } from '@/assets/js/utils/validate.js'
|
||||
import xing from '@/assets/images/xing.png'
|
||||
// import { indexUser } from '@/api/app/user'
|
||||
export default {
|
||||
name: 'Login',
|
||||
@@ -81,6 +90,7 @@ export default {
|
||||
}
|
||||
}
|
||||
return {
|
||||
xing,
|
||||
loginForm: {
|
||||
userName: '',
|
||||
password: ''
|
||||
@@ -106,6 +116,20 @@ export default {
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
buttonStyle() {
|
||||
return {
|
||||
backgroundColor:
|
||||
this.loginForm.userName && this.loginForm.password
|
||||
? '#4f47f5'
|
||||
: '#B1B9FB',
|
||||
border:
|
||||
this.loginForm.userName && this.loginForm.password
|
||||
? '#4f47f5'
|
||||
: '#B1B9FB'
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showPwd() {
|
||||
if (this.passwordType === 'password') {
|
||||
@@ -163,33 +187,41 @@ $cursor: #fff;
|
||||
|
||||
/* reset element-ui css */
|
||||
.login-container {
|
||||
background-image: url('../../../../src/assets/images/login.png');
|
||||
background-size: cover;
|
||||
//background-size: 100% 100%;
|
||||
.el-input {
|
||||
display: inline-block;
|
||||
height: 47px;
|
||||
width: 85%;
|
||||
|
||||
input {
|
||||
background: transparent;
|
||||
background: transparent !important;
|
||||
border: 0px;
|
||||
-webkit-appearance: none;
|
||||
border-radius: 0px;
|
||||
padding: 12px 5px 12px 15px;
|
||||
color: $light_gray;
|
||||
height: 47px;
|
||||
caret-color: $cursor;
|
||||
color: #333;
|
||||
height: 40px;
|
||||
caret-color: #4f47f5;
|
||||
|
||||
&:-webkit-autofill {
|
||||
box-shadow: 0 0 0px 1000px $bg inset !important;
|
||||
-webkit-text-fill-color: $cursor !important;
|
||||
&:focus {
|
||||
//border-color: #4f47f5 !important;
|
||||
border-color: #4f47f5;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
border-radius: 5px;
|
||||
color: #454545;
|
||||
|
||||
&:focus-within {
|
||||
border-color: #4f47f5 !important;
|
||||
border-width: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -202,16 +234,19 @@ $light_gray: #eee;
|
||||
.login-container {
|
||||
min-height: 100%;
|
||||
width: 100%;
|
||||
background-color: $bg;
|
||||
background-color: #f0f4fa;
|
||||
overflow: hidden;
|
||||
|
||||
.login-form {
|
||||
position: relative;
|
||||
width: 520px;
|
||||
max-width: 100%;
|
||||
padding: 160px 35px 0;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
width: 427px;
|
||||
padding: 39px 26px;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
bottom: 23vh;
|
||||
right: 14vw;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.tips {
|
||||
@@ -236,12 +271,12 @@ $light_gray: #eee;
|
||||
|
||||
.title-container {
|
||||
position: relative;
|
||||
margin-bottom: 50px;
|
||||
|
||||
.title {
|
||||
font-size: 26px;
|
||||
color: $light_gray;
|
||||
margin: 0px auto 40px auto;
|
||||
text-align: center;
|
||||
color: #000;
|
||||
text-align: left;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
@@ -249,11 +284,36 @@ $light_gray: #eee;
|
||||
.show-pwd {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 7px;
|
||||
top: 3px;
|
||||
font-size: 16px;
|
||||
color: $dark_gray;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
input -internal-autofill-selected {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
/deep/ .el-form-item__content {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
/deep/ .el-form-item__inner {
|
||||
background-color: transparent !important;
|
||||
color: #000;
|
||||
}
|
||||
.el-input .el-input__inner:hover,
|
||||
.el-select .el-input__inner:hover,
|
||||
.el-range-editor .el-input__inner:hover {
|
||||
background-color: transparent !important;
|
||||
color: #000;
|
||||
}
|
||||
.el-input .el-input__inner:hover,
|
||||
.el-select .el-input__inner:hover,
|
||||
.el-range-editor .el-input__inner:hover {
|
||||
color: #4f47f5;
|
||||
}
|
||||
/deep/ .el-input__inner {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user