From db750bd87cdcb545e9ca24c0102e6891ec5596fd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=90=95=E6=9D=B0=E5=88=9A?= <1543758718@qq.com> Date: Tue, 1 Jul 2025 14:50:01 +0800 Subject: [PATCH] =?UTF-8?q?=E7=AC=AC=E4=B8=89=E6=96=B9=E7=99=BB=E5=BD=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + src/common/assets/iconfont/iconfont.css | 29 ++++++++++++++ src/main.ts | 1 + src/pages/login/index.vue | 53 +++++++++++++++++++++++-- types/auto/components.d.ts | 3 ++ vite.config.ts | 25 +++++++----- 6 files changed, 100 insertions(+), 12 deletions(-) create mode 100644 src/common/assets/iconfont/iconfont.css diff --git a/package.json b/package.json index b54308f..d6c2da8 100644 --- a/package.json +++ b/package.json @@ -55,6 +55,7 @@ "unplugin-svg-component": "0.12.1", "unplugin-vue-components": "28.4.1", "vite": "6.2.3", + "vite-plugin-svg-icons": "2.0.1", "vite-svg-loader": "5.1.0", "vitest": "3.0.9", "vue-tsc": "2.2.8" diff --git a/src/common/assets/iconfont/iconfont.css b/src/common/assets/iconfont/iconfont.css new file mode 100644 index 0000000..70a5eff --- /dev/null +++ b/src/common/assets/iconfont/iconfont.css @@ -0,0 +1,29 @@ +@font-face { + font-family: "iconfont"; /* Project id 4963823 */ + /* Color fonts */ + src: + url('//at.alicdn.com/t/c/font_4963823_az9ar7pc4xi.woff2?t=1751352287411') format('woff2'), + url('//at.alicdn.com/t/c/font_4963823_az9ar7pc4xi.woff?t=1751352287411') format('woff'), + url('//at.alicdn.com/t/c/font_4963823_az9ar7pc4xi.ttf?t=1751352287411') format('truetype'); +} + +.iconfont { + font-family: "iconfont" !important; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-weibo1:before { + content: "\e636"; +} + +.icon-qq:before { + content: "\e66a"; +} + + +.icon-weixin:before { + content: "\e607"; +} diff --git a/src/main.ts b/src/main.ts index a9ca3d7..f082c47 100644 --- a/src/main.ts +++ b/src/main.ts @@ -11,6 +11,7 @@ import "nprogress/nprogress.css"; import "element-plus/theme-chalk/dark/css-vars.css"; import "vxe-table/lib/style.css"; import "@@/assets/styles/index.scss"; +import "@@/assets/iconfont/iconfont.css"; import "virtual:uno.css"; import md5 from 'js-md5'; diff --git a/src/pages/login/index.vue b/src/pages/login/index.vue index ba043cb..4ff5d12 100644 --- a/src/pages/login/index.vue +++ b/src/pages/login/index.vue @@ -12,8 +12,8 @@ import { Lock, User, Iphone, Promotion, Check } from "@element-plus/icons-vue"; import { loginApi } from "./apis"; import Owl from "./components/Owl.vue"; import { useFocus } from "./composables/useFocus"; -import { reactive, ref ,inject } from "vue"; -const $md5 = inject('md5') +import { reactive, ref, inject } from "vue"; +const $md5 = inject("md5"); const router = useRouter(); @@ -156,7 +156,7 @@ async function handleUserLogin(formEl) { await formEl.validate((valid, fields) => { if (valid) { loading.value = true; - loginFormData.password = $md5(loginFormData.password) + loginFormData.password = $md5(loginFormData.password); loginApi(loginFormData) .then(({ data }) => { userStore.setToken(data.token); @@ -355,6 +355,23 @@ watch(isDisabled, (newVal, oldVal) => { > 忘记密码？ + +
+
+
其他方式登录
+
+
+
+ + + +
{ border-radius: 5px; } } + .login-thirdprty { + font-size: 14px; + margin-top: 20px; + display: flex; + color: #9196a1; + flex-direction: row; + flex-wrap: nowrap; + align-items: center; + .css-1vli2z { + width: 128px; + height: 0; + border-top: 1px solid #ebeced; + } + .css-wna3id { + margin: 0 20px; + } + } + .iconAll { + display: flex; + justify-content: space-evenly; + margin-top: 20px; + button { + border: none; + background-color: #fff; + cursor: pointer; + i { + font-size: 30px; + } + } + } } } } diff --git a/types/auto/components.d.ts b/types/auto/components.d.ts index cc7aeaa..e924267 100644 --- a/types/auto/components.d.ts +++ b/types/auto/components.d.ts @@ -18,6 +18,7 @@ declare module 'vue' { ElCard: typeof import('element-plus/es')['ElCard'] ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider'] ElContainer: typeof import('element-plus/es')['ElContainer'] + ElDatePicker: typeof import('element-plus/es')['ElDatePicker'] ElDialog: typeof import('element-plus/es')['ElDialog'] ElDivider: typeof import('element-plus/es')['ElDivider'] ElDrawer: typeof import('element-plus/es')['ElDrawer'] @@ -38,6 +39,8 @@ declare module 'vue' { ElScrollbar: typeof import('element-plus/es')['ElScrollbar'] ElSubMenu: typeof import('element-plus/es')['ElSubMenu'] ElSwitch: typeof import('element-plus/es')['ElSwitch'] + ElTable: typeof import('element-plus/es')['ElTable'] + ElTableColumn: typeof import('element-plus/es')['ElTableColumn'] ElTabPane: typeof import('element-plus/es')['ElTabPane'] ElTabs: typeof import('element-plus/es')['ElTabs'] ElTag: typeof import('element-plus/es')['ElTag'] diff --git a/vite.config.ts b/vite.config.ts index eef6581..7c02582 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -10,7 +10,8 @@ import { ElementPlusResolver } from "unplugin-vue-components/resolvers" import Components from "unplugin-vue-components/vite" import { defineConfig, loadEnv } from "vite" import svgLoader from "vite-svg-loader" - +import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' +import path from 'path' // Configuring Vite: https://cn.vite.dev/config export default defineConfig(({ mode }) => { const { VITE_PUBLIC_PATH } = loadEnv(mode, process.cwd(), "") as ImportMetaEnv @@ -83,13 +84,13 @@ export default defineConfig(({ mode }) => { mode === "development" ? undefined : { - // 打包构建时移除 console.log - pure: ["console.log"], - // 打包构建时移除 debugger - drop: ["debugger"], - // 打包构建时移除所有注释 - legalComments: "none" - }, + // 打包构建时移除 console.log + pure: ["console.log"], + // 打包构建时移除 debugger + drop: ["debugger"], + // 打包构建时移除所有注释 + legalComments: "none" + }, // 插件配置 plugins: [ vue(), @@ -131,7 +132,13 @@ export default defineConfig(({ mode }) => { Components({ dts: "types/auto/components.d.ts", resolvers: [ElementPlusResolver()] - }) + }), + // iconfont + createSvgIconsPlugin({ + iconDirs: [path.resolve(process.cwd(), 'src/common/assets/icons')], + symbolId: 'icon-[dir]-[name]', + }), + ], // Configuring Vitest: https://cn.vitest.dev/config test: {