suojin
/
HIYL-localization-web
23
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

登录页-图标更换

Browse Source
main
ysn 3 days ago
parent 8b56cfe867
commit a9d86c2b51
5 changed files with 86 additions and 36 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 17
      src/assets/icons/svg/guide.svg
  2. 14
      src/assets/icons/svg/knowledge.svg
  3. 14
      src/assets/icons/svg/message.svg
  4. 16
      src/assets/icons/svg/peoples.svg
  5. 59
      src/views/login.vue

17
src/assets/icons/svg/guide.svg
Unescape View File

@ -1 +1,16 @@
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M1.482 70.131l36.204 16.18 69.932-65.485-61.38 70.594 46.435 18.735c1.119.425 2.397-.17 2.797-1.363v-.085L127.998.047 1.322 65.874c-1.12.597-1.519 1.959-1.04 3.151.32.511.72.937 1.2 1.107zm44.676 57.821L64.22 107.26l-18.062-7.834v28.527z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="21.14" height="20.63" viewBox="0 0 21.14 20.63">
<title>视讯</title>
<g id="图层_2" data-name="图层 2">
<g id="图层_1-2" data-name="图层 1">
<g>
<path d="M11.38,19.61a.85.85,0,1,1,0-1.71c2.64,0,4.86-1.88,6.05-3.67a.86.86,0,0,1,1.41,1c-1.41,2.09-4.13,4.39-7.46,4.39Z" style="fill: #fff"/>
<path d="M19.1,9.85A.86.86,0,0,1,18.24,9,7.31,7.31,0,0,0,11,1.71h-.38A7.31,7.31,0,0,0,3.28,9,.85.85,0,0,1,1.58,9a9,9,0,0,1,9-9H11a9,9,0,0,1,9,9,.85.85,0,0,1-.85.85Z" style="fill: #fff"/>
<path d="M19.1,9.85" style="fill: #fff"/>
<path d="M3.07,15h-.3A2.77,2.77,0,0,1,0,12.19V11A2.77,2.77,0,0,1,2.77,8.18h.3A2.77,2.77,0,0,1,5.84,11v1.24A2.77,2.77,0,0,1,3.07,15Zm-.3-5.07A1.06,1.06,0,0,0,1.71,11v1.24a1.06,1.06,0,0,0,1.07,1.07h.3a1.06,1.06,0,0,0,1.07-1.07V11A1.06,1.06,0,0,0,3.07,9.89Zm0,0" style="fill: #fff"/>
<path d="M8.44,18.5a1.92,1.92,0,1,0,1.92-1.92A1.92,1.92,0,0,0,8.44,18.5Zm0,0" style="fill: #fff"/>
<path d="M10.36,20.63a2.13,2.13,0,1,1,2.13-2.13,2.11,2.11,0,0,1-2.13,2.13Zm0-3.84a1.71,1.71,0,1,0,1.71,1.71,1.71,1.71,0,0,0-1.71-1.71Zm0,0" style="fill: #fff"/>
<path d="M18.37,15h-.3a2.77,2.77,0,0,1-2.77-2.77V11a2.77,2.77,0,0,1,2.77-2.77h.3A2.77,2.77,0,0,1,21.14,11v1.24A2.77,2.77,0,0,1,18.37,15Zm-.3-5.07A1.06,1.06,0,0,0,17,11v1.24a1.06,1.06,0,0,0,1.07,1.07h.3a1.06,1.06,0,0,0,1.07-1.07V11a1.06,1.06,0,0,0-1.07-1.07Zm0,0" style="fill: #fff"/>
</g>
</g>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 320 B

After

Width:  |  Height:  |  Size: 1.5 KiB

14
src/assets/icons/svg/knowledge.svg
Unescape View File

@ -1,7 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
<polyline points="14 2 14 8 20 8"/>
<line x1="16" y1="13" x2="8" y2="13"/>
<line x1="16" y1="17" x2="8" y2="17"/>
<polyline points="10 9 9 9 8 9"/>
<svg xmlns="http://www.w3.org/2000/svg" width="18.33" height="20.56" viewBox="0 0 18.33 20.56">
<title>知识库</title>
<g id="图层_2" data-name="图层 2">
<g id="图层_1-2" data-name="图层 1">
<path d="M10.68,16.17H4.26a.83.83,0,0,0-.7.37.69.69,0,0,0,0,.75.83.83,0,0,0,.7.37h6.43a.83.83,0,0,0,.7-.37.69.69,0,0,0,0-.75.83.83,0,0,0-.7-.37Zm-6.43-4.4H8.12a.83.83,0,0,0,.71-.37.69.69,0,0,0,0-.75.83.83,0,0,0-.71-.37H4.26a.83.83,0,0,0-.7.37.69.69,0,0,0,0,.75.83.83,0,0,0,.7.37ZM3.44,14a.79.79,0,0,0,.81.75h9a.83.83,0,0,0,.71-.37.69.69,0,0,0,0-.75.83.83,0,0,0-.71-.37h-9a.79.79,0,0,0-.82.74Zm0,0" style="fill: #fff"/>
<path d="M17.46,3.79H2.94a1.15,1.15,0,0,1-1.2-1.1,1.15,1.15,0,0,1,1.2-1.1H17.46a.84.84,0,0,0,.87-.8.84.84,0,0,0-.87-.8H2.94A2.83,2.83,0,0,0,0,2.7v15.8a2.16,2.16,0,0,0,2.25,2.06H16a2.16,2.16,0,0,0,2.25-2.06V4.59A.84.84,0,0,0,17.46,3.79Zm-.64,15a.5.5,0,0,1-.53.48H2a.5.5,0,0,1-.53-.48V4.86A3.29,3.29,0,0,0,2.7,5.1h7.7V9.4l2.33-1.6,2.34,1.62V5.13h1.75Z" style="fill: #fff"/>
</g>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 394 B

After

Width:  |  Height:  |  Size: 1.0 KiB

14
src/assets/icons/svg/message.svg
Unescape View File

@ -1 +1,13 @@
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M0 20.967v59.59c0 11.59 8.537 20.966 19.075 20.966h28.613l1 26.477L76.8 101.523h32.125c10.538 0 19.075-9.377 19.075-20.966v-59.59C128 9.377 119.463 0 108.925 0h-89.85C8.538 0 0 9.377 0 20.967zm82.325 33.1c0-5.524 4.013-9.935 9.037-9.935 5.026 0 9.038 4.41 9.038 9.934 0 5.524-4.025 9.934-9.038 9.934-5.024 0-9.037-4.41-9.037-9.934zm-27.613 0c0-5.524 4.013-9.935 9.038-9.935s9.037 4.41 9.037 9.934c0 5.524-4.025 9.934-9.037 9.934-5.025 0-9.038-4.41-9.038-9.934zm-27.1 0c0-5.524 4.013-9.935 9.038-9.935s9.038 4.41 9.038 9.934c0 5.524-4.026 9.934-9.05 9.934-5.013 0-9.025-4.41-9.025-9.934z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="20.78" height="19.67" viewBox="0 0 20.78 19.67">
<title>消息</title>
<g id="图层_2" data-name="图层 2">
<g id="图层_1-2" data-name="图层 1">
<g>
<path d="M20,.86A2.74,2.74,0,0,0,18,0H2.81a2.73,2.73,0,0,0-2,.86A3,3,0,0,0,0,2.94V14.07a2.82,2.82,0,0,0,.79,2,2.83,2.83,0,0,0,2,.79H7l2.44,2.37a1.46,1.46,0,0,0,2.06,0l2.4-2.37H18a2.69,2.69,0,0,0,2.8-2.8V2.94A3,3,0,0,0,20,.86Zm-.67,13.22A1.24,1.24,0,0,1,18,15.42H13.57a.73.73,0,0,0-.51.21l-2.61,2.58h0L7.76,15.63a.72.72,0,0,0-.51-.21H2.81a1.24,1.24,0,0,1-1.35-1.35V2.94A1.36,1.36,0,0,1,2.81,1.46H18a1.36,1.36,0,0,1,1.35,1.49Z" style="fill: #fff"/>
<path d="M5.65,7.47A1.28,1.28,0,1,0,6.92,8.75,1.28,1.28,0,0,0,5.65,7.47Z" style="fill: #fff"/>
<path d="M10.19,7.47a1.28,1.28,0,1,0,1.28,1.28,1.28,1.28,0,0,0-1.28-1.28Z" style="fill: #fff"/>
<path d="M14.71,7.45A1.28,1.28,0,1,0,16,8.73a1.28,1.28,0,0,0-1.28-1.28Z" style="fill: #fff"/>
</g>
</g>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 669 B

After

Width:  |  Height:  |  Size: 1014 B

16
src/assets/icons/svg/peoples.svg
Unescape View File

@ -1 +1,15 @@
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M95.648 118.762c0 5.035-3.563 9.121-7.979 9.121H7.98c-4.416 0-7.979-4.086-7.979-9.121C0 100.519 15.408 83.47 31.152 76.75c-9.099-6.43-15.216-17.863-15.216-30.987v-9.128c0-20.16 14.293-36.518 31.893-36.518s31.894 16.358 31.894 36.518v9.122c0 13.137-6.123 24.556-15.216 30.993 15.738 6.726 31.141 23.769 31.141 42.012z"/><path d="M106.032 118.252h15.867c3.376 0 6.101-3.125 6.101-6.972 0-13.957-11.787-26.984-23.819-32.123 6.955-4.919 11.638-13.66 11.638-23.704v-6.985c0-15.416-10.928-27.926-24.39-27.926-1.674 0-3.306.193-4.89.561 1.936 4.713 3.018 9.974 3.018 15.526v9.121c0 13.137-3.056 23.111-11.066 30.993 14.842 4.41 27.312 23.42 27.541 41.509z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="19.79" height="20.34" viewBox="0 0 19.79 20.34">
<title>通讯录</title>
<g id="图层_2" data-name="图层 2">
<g id="图层_1-2" data-name="图层 1">
<g>
<path d="M18.78,0a1,1,0,0,1,1,1v18.3a1,1,0,0,1-1,1H2.54a1,1,0,0,1-1-1V16.27H3.05v2.54H18.27V1.53H3.05v2H1.53V1a1,1,0,0,1,1-1Z" style="fill: #fff"/>
<path d="M2.54,13.22a.51.51,0,0,1,.51.51v.51a.51.51,0,0,1-.51.51h-2A.51.51,0,0,1,0,14.24v-.51a.51.51,0,0,1,.51-.51Z" style="fill: #fff"/>
<path d="M2.29,10.93a.51.51,0,0,1-.51.51H1.27a.51.51,0,0,1-.51-.51v-2a.51.51,0,0,1,.51-.51h.51a.51.51,0,0,1,.51.51Z" style="fill: #fff"/>
<path d="M15.36,14.61a4.7,4.7,0,0,0-4.06-4.52,2.54,2.54,0,1,0-1.29,0A4.7,4.7,0,0,0,6,14.74H7.23v-.12a3.43,3.43,0,0,1,6.86.12h1.27ZM10.66,8.9a1.27,1.27,0,1,1,1.27-1.27A1.27,1.27,0,0,1,10.66,8.9Z" style="fill: #fff"/>
<path d="M2.54,5.08a.51.51,0,0,1,.51.51V6.1a.51.51,0,0,1-.51.51h-2A.51.51,0,0,1,0,6.1V5.59a.51.51,0,0,1,.51-.51Z" style="fill: #fff"/>
<path d="M2.54,5.08" style="fill: #fff"/>
</g>
</g>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 731 B

After

Width:  |  Height:  |  Size: 1.1 KiB

59
src/views/login.vue
Unescape View File

@ -17,10 +17,10 @@
</div>
<!-- 右侧登录表单区 -->
<div class="login_right">
<div class="login_header">
<!-- <div class="login_header">
<i class="el-icon-setting" @click="showSettingsDialog = true"></i>
<!-- <i class="el-icon-close" @click="handleClose"></i> -->
</div>
<i class="el-icon-close" @click="handleClose"></i>
</div> -->
<el-form
ref="loginForm"
:model="loginForm"
@ -29,7 +29,8 @@
>
<div class="form-header">
<div class="role-icon">
<img :src="loginForm.avatar" alt="" />
<img v-if="loginForm.avatar" :src="loginForm.avatar" alt="" />
<span v-else>{{ roleIconText }}</span>
</div>
<h3 class="title">你好, {{ loginForm.name }}</h3>
</div>
@ -63,7 +64,7 @@
</el-input>
</el-form-item>
<el-form-item>
<el-checkbox v-model="loginForm.rememberMe"> 自动登录 </el-checkbox>
<el-checkbox v-model="loginForm.autoLogin"> 自动登录 </el-checkbox>
</el-form-item>
<el-form-item>
<el-button
@ -82,20 +83,20 @@
<el-dialog
title="登录设置"
:visible.sync="showSettingsDialog"
width="500px"
width="310px"
:close-on-click-modal="false"
>
<el-form :model="settingsForm" label-width="80px">
<el-form :model="systemConfig" label-width="40px">
<el-form-item label="地址">
<el-input v-model="settingsForm.address" placeholder="请输入地址" />
<el-input v-model="systemConfig.host" placeholder="请输入地址" />
</el-form-item>
<el-form-item label="端口">
<el-input v-model="settingsForm.port" placeholder="请输入端口" />
<el-input v-model="systemConfig.port" placeholder="请输入端口" />
</el-form-item>
<el-form-item label="协议">
<el-radio-group v-model="settingsForm.protocol">
<el-radio label="HTTP">HTTP</el-radio>
<el-radio label="HTTPS">HTTPS</el-radio>
<el-radio-group v-model="systemConfig.protocol">
<el-radio label="http">HTTP</el-radio>
<el-radio label="https">HTTPS</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
@ -110,8 +111,9 @@
</template>
<script>
import Cookies from "js-cookie";
import { encrypt, decrypt } from "@/utils/jsencrypt";
import CryptoJS from "crypto-js";
import { encrypt, decrypt } from "@/utils/jsencrypt";
import defAva from '@/assets/images/profile.jpg'
export default {
name: "Login",
data() {
@ -120,9 +122,9 @@ export default {
roleName: "会诊专家", // 示例：你好, 会诊专家
roleIconText: "家", // 示例：顶部圆形图标文字
loginForm: {
username: "hzzjys",
username: "",
password: "",
rememberMe: false,
autoLogin: false,
uuid: "",
},
loginRules: {
@ -136,10 +138,10 @@ export default {
loading: false,
redirect: undefined,
showSettingsDialog: false,
settingsForm: {
address: "47.92.192.91",
port: "8688",
protocol: "HTTP",
systemConfig: {
host: "47.92.192.91",
port: "8080",
protocol: "http",
},
};
},
@ -161,19 +163,23 @@ export default {
},
getCookie() {
const name = Cookies.get("name");
const avatar = Cookies.get("avatar");
const avatar = Cookies.get("avatar") || defAva;
const username = Cookies.get("username");
const password = Cookies.get("password");
const rememberMe = Cookies.get("rememberMe");
const autoLogin = Cookies.get("autoLogin");
const config = Cookies.get("systemConfig");
if (config) {
this.systemConfig = JSON.parse(config);
}
this.loginForm = {
name: name,
avatar: avatar,
username: username === undefined ? this.loginForm.username : username,
password:
password === undefined ? this.loginForm.password : decrypt(password),
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
autoLogin: autoLogin === undefined ? false : Boolean(autoLogin),
};
if (this.loginForm.rememberMe) {
if (this.loginForm.autoLogin) {
this.handleLogin();
}
},
@ -181,14 +187,14 @@ export default {
this.$refs.loginForm.validate((valid) => {
if (valid) {
this.loading = true;
if (this.loginForm.rememberMe) {
if (this.loginForm.autoLogin) {
Cookies.set("avatar", this.loginForm.avatar, { expires: 30 });
Cookies.set("name", this.loginForm.name, { expires: 30 });
Cookies.set("username", this.loginForm.username, { expires: 30 });
Cookies.set("password", encrypt(this.loginForm.password), {
expires: 30,
});
Cookies.set("rememberMe", this.loginForm.rememberMe, {
Cookies.set("autoLogin", this.loginForm.autoLogin, {
expires: 30,
});
} else {
@ -196,7 +202,7 @@ export default {
Cookies.remove("name");
Cookies.remove("username");
Cookies.remove("password");
Cookies.remove("rememberMe");
Cookies.remove("autoLogin");
}
this.$store
.dispatch("Login", {
@ -221,6 +227,7 @@ export default {
},
// 登录设置确定逻辑
handleSettingsConfirm() {
Cookies.set("systemConfig", JSON.stringify(this.systemConfig));
// 这里可以添加保存地址、端口、协议的逻辑
this.showSettingsDialog = false;
},

Write Preview
Loading…
Cancel
Save