From 19aef84d40fbe37b8ee49cdc14186261d8b928f5 Mon Sep 17 00:00:00 2001 From: zhangwei <1504152376@qq.com> Date: 星期三, 18 六月 2025 17:09:28 +0800 Subject: [PATCH] '路由配置' --- src/router/modules/remaining.ts | 24 ++ src/views/login/utils/static.ts | 4 public/logo.svg | 8 + src/style/login.css | 11 + src/views/login/index.vue | 11 + src/assets/login/logo1.png | 0 src/router/modules/home.ts | 2 index.html | 2 src/views/register/index.vue | 299 ++++++++++++++++++++++++++++++++++++++++++ src/assets/login/bg.png | 0 public/favicon.ico | 0 src/router/index.ts | 2 src/router/utils.ts | 12 13 files changed, 354 insertions(+), 21 deletions(-) diff --git a/index.html b/index.html index 1193eef..cbafa6c 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@ name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" /> - <title>pure-admin-thin</title> + <title>鑷富鎷涙爣閲囪喘缃�</title> <link rel="icon" href="/favicon.ico" /> </head> diff --git a/public/favicon.ico b/public/favicon.ico index bef93d4..9705b1b 100644 --- a/public/favicon.ico +++ b/public/favicon.ico Binary files differ diff --git a/public/logo.svg b/public/logo.svg index a63d2b1..e3fa865 100644 --- a/public/logo.svg +++ b/public/logo.svg @@ -1 +1,7 @@ -<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="icon" viewBox="0 0 1024 1024"><path fill="#386BF3" d="M410.558.109c0 210.974-300.876 361.752-300.876 633.548 0 174.943 134.704 316.787 300.876 316.787s300.877-141.817 300.877-316.787C711.408 361.752 410.558 210.974 410.558.109"/><path fill="#C3D2FB" d="M613.469 73.665c0 211.055-300.877 361.914-300.877 633.547C312.592 882.156 447.296 1024 613.47 1024s300.876-141.817 300.876-316.788C914.29 435.58 613.469 284.72 613.469 73.665"/><path fill="#303F5B" d="M312.592 707.212c0-183.713 137.636-312.171 226.723-441.39 81.702 106.112 172.12 218.74 172.12 367.726A309.755 309.755 0 0 1 420.36 950.064a323.1 323.1 0 0 1-107.769-242.852z"/></svg> \ No newline at end of file +<svg width="40.921875" height="44.183105" viewBox="0 0 40.9219 44.1831" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <desc> + Created with Pixso. + </desc> + <defs/> + <path id="path" d="M40.92 22.04C40.92 11.47 32.25 2.82 21.41 2.34L21.41 0.92C21.41 0.41 20.98 0 20.46 0C19.93 0 19.5 0.41 19.5 0.92L19.5 2.33C8.66 2.82 0 11.46 0 22.04C0 32.6 8.66 41.25 19.5 41.74L19.5 43.26C19.5 43.76 19.93 44.18 20.46 44.18C20.98 44.18 21.41 43.77 21.41 43.26L21.41 41.74C32.25 41.25 40.92 32.6 40.92 22.04ZM36.88 28.1C36.05 27.73 34.64 27.41 32.29 27.13C32.57 25.5 32.73 23.8 32.73 22.04C32.73 20.3 32.58 18.59 32.3 16.95C34.64 16.67 36.05 16.35 36.88 15.97C37.63 17.86 38.05 19.9 38.05 22.04C38.05 24.17 37.63 26.21 36.88 28.1ZM23.34 38.76C22.71 38.87 22.06 38.94 21.41 38.97L21.41 28.39C24.78 28.41 27.69 28.55 30.02 28.75C28.82 33.57 26.36 37.29 23.34 38.76ZM10.89 28.75C13.22 28.55 16.12 28.41 19.5 28.39L19.5 38.97C18.84 38.94 18.2 38.87 17.57 38.76C14.55 37.29 12.09 33.57 10.89 28.75ZM10.09 22.04C10.09 20.36 10.24 18.72 10.51 17.14C13.13 17.37 16.22 17.51 19.5 17.53L19.5 26.55C16.22 26.57 13.12 26.71 10.51 26.94C10.24 25.38 10.09 23.73 10.09 22.04ZM21.41 26.54L21.41 17.52C24.69 17.5 27.79 17.37 30.4 17.14C30.68 18.71 30.83 20.36 30.83 22.03C30.83 23.73 30.68 25.38 30.41 26.93C27.79 26.7 24.69 26.57 21.41 26.54ZM13.02 6.67C12.81 6.91 12.61 7.16 12.41 7.43C12.11 7.85 12.21 8.42 12.64 8.72C13.07 9.01 13.67 8.92 13.97 8.5C15.06 7.02 16.31 5.94 17.63 5.3C18.24 5.2 18.86 5.13 19.5 5.1L19.5 8.52C19.5 9.02 19.93 9.44 20.46 9.44C20.98 9.44 21.41 9.02 21.41 8.52L21.41 5.1C22.05 5.13 22.67 5.2 23.28 5.3C24.6 5.94 25.86 7.02 26.95 8.5C27.14 8.75 27.43 8.89 27.73 8.89C27.92 8.89 28.11 8.83 28.28 8.71C28.71 8.42 28.81 7.85 28.51 7.43C28.31 7.16 28.11 6.91 27.9 6.67C31.43 8.26 34.33 10.96 36.11 14.3C35.6 14.57 34.15 14.87 31.93 15.13C31.62 13.85 31.23 12.61 30.75 11.46C30.55 10.98 30 10.75 29.5 10.94C29.01 11.13 28.78 11.67 28.97 12.14C29.39 13.15 29.74 14.21 30.01 15.32C27.69 15.52 24.78 15.66 21.41 15.68L21.41 12.68C21.41 12.18 20.98 11.76 20.46 11.76C19.93 11.76 19.5 12.18 19.5 12.68L19.5 15.68C16.13 15.66 13.22 15.52 10.9 15.32C11.18 14.22 11.52 13.15 11.94 12.14C12.14 11.67 11.9 11.13 11.41 10.94C10.92 10.75 10.37 10.98 10.17 11.46C9.69 12.61 9.29 13.85 8.98 15.13C6.76 14.87 5.31 14.57 4.8 14.3C6.59 10.96 9.48 8.26 13.02 6.67ZM4.03 15.97C4.85 16.34 6.27 16.66 8.61 16.94C8.33 18.59 8.17 20.3 8.17 22.03C8.17 23.79 8.33 25.5 8.61 27.12C6.27 27.4 4.86 27.72 4.03 28.1C3.27 26.21 2.85 24.17 2.85 22.03C2.86 19.9 3.28 17.85 4.03 15.97ZM4.8 29.77C5.32 29.5 6.76 29.19 8.99 28.94C9.83 32.33 11.25 35.27 13.08 37.43C9.52 35.84 6.6 33.13 4.8 29.77ZM27.83 37.43C29.65 35.28 31.08 32.34 31.91 28.94C34.14 29.2 35.59 29.5 36.1 29.77C34.31 33.13 31.39 35.84 27.83 37.43Z" fill="#0F5FD2" fill-opacity="1.000000" fill-rule="nonzero"/> +</svg> diff --git a/src/assets/login/bg.png b/src/assets/login/bg.png index 8cdd300..d5c76c1 100644 --- a/src/assets/login/bg.png +++ b/src/assets/login/bg.png Binary files differ diff --git a/src/assets/login/logo1.png b/src/assets/login/logo1.png new file mode 100644 index 0000000..57348b1 --- /dev/null +++ b/src/assets/login/logo1.png Binary files differ diff --git a/src/router/index.ts b/src/router/index.ts index af34dfd..40689c3 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -106,7 +106,7 @@ } /** 璺敱鐧藉悕鍗� */ -const whiteList = ["/login",'/']; +const whiteList = []; const { VITE_HIDE_HOME } = import.meta.env; diff --git a/src/router/modules/home.ts b/src/router/modules/home.ts index 93f13bc..382b61c 100644 --- a/src/router/modules/home.ts +++ b/src/router/modules/home.ts @@ -5,7 +5,7 @@ path: "/welcome", name: "Welcome", component: Layout, - redirect: "/welcome", + // redirect: "/welcome", meta: { icon: "ep/home-filled", title: "棣栭〉", diff --git a/src/router/modules/remaining.ts b/src/router/modules/remaining.ts index 8b99234..8a243a6 100644 --- a/src/router/modules/remaining.ts +++ b/src/router/modules/remaining.ts @@ -2,6 +2,22 @@ export default [ { + path: "/", + name: "Main", + redirect: "/home", + meta: {} + }, + { + path: "/home", + name: "Home", + component: () => import("@/views/home/index.vue"), + meta: { + title: "棣栭〉", + showLink: false, + rank: 101 + } + }, + { path: "/login", name: "Login", component: () => import("@/views/login/index.vue"), @@ -12,11 +28,11 @@ } }, { - path: "/", - name: "Home", - component: () => import("@/views/home/index.vue"), + path: "/register", + name: "Register", + component: () => import("@/views/register/index.vue"), meta: { - title: "棣栭〉", + title: "娉ㄥ唽", showLink: false, rank: 101 } diff --git a/src/router/utils.ts b/src/router/utils.ts index 1e91571..da5f0cd 100644 --- a/src/router/utils.ts +++ b/src/router/utils.ts @@ -120,14 +120,14 @@ /** 鏌ユ壘瀵瑰簲 `path` 鐨勮矾鐢变俊鎭� */ function findRouteByPath(path: string, routes: RouteRecordRaw[]) { - let res = routes.find((item: { path: string }) => item.path == path); + let res = routes?.find((item: { path: string }) => item.path == path); if (res) { return isProxy(res) ? toRaw(res) : res; } else { - for (let i = 0; i < routes.length; i++) { + for (let i = 0; i < routes?.length; i++) { if ( - routes[i].children instanceof Array && - routes[i].children.length > 0 + routes[i]?.children instanceof Array && + routes[i]?.children.length > 0 ) { res = findRouteByPath(path, routes[i].children); if (res) { @@ -158,14 +158,14 @@ (v: RouteRecordRaw) => { // 闃叉閲嶅娣诲姞璺敱 if ( - router.options.routes[0].children.findIndex( + router.options.routes[0].children?.findIndex( value => value.path === v.path ) !== -1 ) { return; } else { // 鍒囪灏嗚矾鐢眕ush鍒皉outes鍚庤繕闇�瑕佷娇鐢╝ddRoute锛岃繖鏍疯矾鐢辨墠鑳芥甯歌烦杞� - router.options.routes[0].children.push(v); + router.options.routes[0].children?.push(v); // 鏈�缁堣矾鐢辫繘琛屽崌搴� ascending(router.options.routes[0].children); if (!router.hasRoute(v?.name)) router.addRoute(v); diff --git a/src/style/login.css b/src/style/login.css index 3e0a8ab..c81363b 100644 --- a/src/style/login.css +++ b/src/style/login.css @@ -1,10 +1,19 @@ .wave { position: fixed; + width: 50%; height: 100%; - width: 80%; left: 0; bottom: 0; z-index: -1; + width: 50%; + height: 100%; + float: left; + justify-content: center; + background: url('@/assets/login/bg.png') no-repeat left center; + background-size: cover; +} +.logo1{ + padding:40px; } .login-container { diff --git a/src/views/login/index.vue b/src/views/login/index.vue index 732463a..1172b01 100644 --- a/src/views/login/index.vue +++ b/src/views/login/index.vue @@ -11,7 +11,7 @@ import { useLayout } from "@/layout/hooks/useLayout"; import { useUserStoreHook } from "@/store/modules/user"; import { initRouter, getTopMenu } from "@/router/utils"; -import { bg, avatar, illustration } from "./utils/static"; +import { bg, avatar, logo1 } from "./utils/static"; import { useRenderIcon } from "@/components/ReIcon/src/hooks"; import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange"; @@ -90,7 +90,10 @@ <template> <div class="select-none"> - <img :src="bg" class="wave" /> + <div class="wave"> + <img width="400px" :src="logo1" class="logo1" /> + </div> + <!-- <img :src="bg" class="wave" /> --> <div class="flex-c absolute right-5 top-3"> <!-- 涓婚 --> <el-switch @@ -103,11 +106,11 @@ </div> <div class="login-container"> <div class="img"> - <component :is="toRaw(illustration)" /> + <!-- <component :is="toRaw(illustration)" /> --> </div> <div class="login-box"> <div class="login-form"> - <avatar class="avatar" /> + <!-- <avatar class="avatar" /> --> <Motion> <h2 class="outline-hidden">{{ title }}</h2> </Motion> diff --git a/src/views/login/utils/static.ts b/src/views/login/utils/static.ts index 18268d8..da908ca 100644 --- a/src/views/login/utils/static.ts +++ b/src/views/login/utils/static.ts @@ -1,5 +1,5 @@ import bg from "@/assets/login/bg.png"; import avatar from "@/assets/login/avatar.svg?component"; -import illustration from "@/assets/login/illustration.svg?component"; +import logo1 from "@/assets/login/logo1.png?component"; -export { bg, avatar, illustration }; +export { bg, avatar, logo1 }; diff --git a/src/views/register/index.vue b/src/views/register/index.vue new file mode 100644 index 0000000..d92a8dc --- /dev/null +++ b/src/views/register/index.vue @@ -0,0 +1,299 @@ +<template> + <div class="content"> + <div class="header"> + <div class="headimg"> + <img width="167px" height="44px" src="@/assets/home/logo.png" alt="" /> + </div> + </div> + <div class="article"> + <div class="formDiv"> + <div class="formheader"> + <span class="title">璇峰~鍐欏凡涓嬫敞鍐屼俊鎭�</span> + <span class="other" + >鏈変紒涓氳惀涓氭墽鐓�(鍚釜浣撳伐鍟嗘埛)鐨勭敤鎴疯娉ㄥ唽銆傛潈鐩婂涓嬶細鍋氫紒涓氬疄鍚嶈璇併�佸弬涓庢嫑鎶曟爣涓氬姟銆佸紑閫氫紒涓氶棬鎴风瓑</span + > + </div> + <el-divider /> + <div class="formContent"> + <el-form + ref="ruleFormRef" + style="max-width: 600px" + :model="ruleForm" + :rules="rules" + label-width="auto" + > + <el-form-item label="娉ㄥ唽韬唤" prop="resource"> + <el-radio-group v-model="ruleForm.resource"> + <el-radio value="Sponsorship">渚涘簲鍟�</el-radio> + <el-radio value="Venue">浠g悊鏈烘瀯</el-radio> + <el-radio value="cgr">閲囪喘浜�</el-radio> + </el-radio-group> + </el-form-item> + <el-form-item label="浼佷笟鍚嶇О" prop="name"> + <el-input + v-model="ruleForm.name" + placeholder="璇疯緭鍏ヨ惀涓氭墽鐓т笂鐨勪紒涓氬悕绉�" + /> + </el-form-item> + <el-form-item label="鐢ㄦ埛鍚�" prop="region"> + <el-input v-model="ruleForm.region" placeholder="璇疯緭鍏ョ敤鎴峰悕" /> + </el-form-item> + <el-form-item label="鐧诲綍瀵嗙爜" prop="password"> + <el-input + v-model="ruleForm.password" + placeholder="8-20浣嶆暟瀛�+澶у皬鍐欏瓧姣�+鐗规畩瀛楃鐨勭粍鍚�" + /> + </el-form-item> + <el-form-item label="瀵嗙爜纭" prop="repassword"> + <el-input + v-model="ruleForm.repassword" + placeholder="璇峰啀娆¤緭鍏ユ偍鐨勫瘑鐮�" + /> + </el-form-item> + <el-form-item label="鑱旂郴浜哄鍚�" prop="repassword"> + <el-input + v-model="ruleForm.repassword" + placeholder="璇疯緭鍏ヨ仈绯讳汉濮撳悕" + /> + </el-form-item> + <el-form-item label="閭" prop="repassword"> + <el-input + v-model="ruleForm.repassword" + placeholder="璇疯緭鍏ヨ仈绯婚偖绠�" + /> + </el-form-item> + <el-form-item label="鎵嬫満鍙风爜" prop="repassword"> + <el-input + v-model="ruleForm.repassword" + placeholder="璇疯緭鍏ユ偍鐨勬墜鏈哄彿鐮�" + /> + </el-form-item> + <el-form-item label="鎵嬫満鍙风爜" prop="repassword"> + <el-input + v-model="ruleForm.repassword" + placeholder="璇疯緭鍏ユ偍鐨勬墜鏈哄彿鐮�" + /> + </el-form-item> + <el-form-item prop="validationCode" label="鎵嬫満楠岃瘉鐮�"> + <el-input + v-model.number="ruleForm.validationCode" + class="form-input" + placeholder="璇疯緭鍏ラ獙璇佺爜" + > + <template #suffix> + <span id="suffix-span"> + <span + id="suffix-span-2" + ref="spanRef" + @click="sendValidationCode(ruleForm.repassword)" + > + {{ isSendValidationCode }} + </span> + </span> + </template> + </el-input> + </el-form-item> + <el-form-item prop="repassword" label=" "> + <el-checkbox value="Online activities" name="type"> + 鎴戝凡闃呰骞跺悓鎰� 銆婇潪鏀块噰鎷涙爣閲囪喘浜ゆ槗骞冲彴鐢ㄦ埛鍗忚銆� + </el-checkbox> + </el-form-item> + <el-form-item label=" "> + <el-button type="primary" @click="submitForm(ruleFormRef)"> + 鍚屾剰骞舵敞鍐� + </el-button> + </el-form-item> + <el-form-item label=" "> + <span>宸叉湁璐﹀彿锛熺珛鍗崇櫥褰�</span> + </el-form-item> + </el-form> + </div> + </div> + </div> + </div> +</template> + +<script lang="ts" setup> +import { reactive, ref } from "vue"; +import type { FormInstance, FormRules } from "element-plus"; + +interface RuleForm { + name: string; + region: string; + count: string; + password: string; + repassword: string; + validationCode: string; + date1: string; + date2: string; + delivery: boolean; + location: string; + type: string[]; + resource: string; + desc: string; +} + +const ruleFormRef = ref<FormInstance>(); +const ruleForm = reactive<RuleForm>({ + name: "", + region: "", + password: "", + validationCode: "", + repassword: "", + count: "", + date1: "", + date2: "", + delivery: false, + location: "", + type: [], + resource: "", + desc: "" +}); + +const locationOptions = ["Home", "Company", "School"]; + +const rules = reactive<FormRules<RuleForm>>({ + name: [ + { required: true, message: "Please input Activity name", trigger: "blur" }, + { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" } + ], + region: [ + { + required: true, + message: "Please select Activity zone", + trigger: "change" + } + ], + count: [ + { + required: true, + message: "Please select Activity count", + trigger: "change" + } + ], + date1: [ + { + type: "date", + required: true, + message: "Please pick a date", + trigger: "change" + } + ], + date2: [ + { + type: "date", + required: true, + message: "Please pick a time", + trigger: "change" + } + ], + location: [ + { + required: true, + message: "Please select a location", + trigger: "change" + } + ], + type: [ + { + type: "array", + required: true, + message: "Please select at least one activity type", + trigger: "change" + } + ], + resource: [ + { + required: true, + message: "Please select activity resource", + trigger: "change" + } + ], + desc: [ + { required: true, message: "Please input activity form", trigger: "blur" } + ] +}); +// 楠岃瘉鐮佸尯鍩熸枃瀛楄鏄� +const spanRef = ref(); +const isSendValidationCode = ref<string>("鑾峰彇楠岃瘉鐮�"); +const submitForm = async (formEl: FormInstance | undefined) => { + if (!formEl) return; + await formEl.validate((valid, fields) => { + if (valid) { + console.log("submit!"); + } else { + console.log("error submit!", fields); + } + }); +}; + +const sendValidationCode = () => {}; + +const resetForm = (formEl: FormInstance | undefined) => { + if (!formEl) return; + formEl.resetFields(); +}; + +const options = Array.from({ length: 10000 }).map((_, idx) => ({ + value: `${idx + 1}`, + label: `${idx + 1}` +})); +</script> + +<style lang="scss" scoped> +.content { + background-color: #f8f8f8; + width: 100%; + height: 100%; + .header { + display: flex; + align-items: center; + height: 80px; + width: 100%; + margin: 0 auto; + background-color: #fff; + .headimg { + width: 1200px; + margin: 0 auto; + } + } + .article { + margin: 20px auto; + width: 1200px; + height: 85%; + background: rgb(255, 255, 255); + .formDiv { + width: 80%; + margin: 0 auto; + .formheader { + display: flex; + align-items: center; + justify-content: space-around; + padding-top: 30px; + } + .title { + color: rgb(51, 51, 51); + font-size: 18px; + font-weight: 700; + line-height: 16px; + letter-spacing: 0%; + text-align: left; + text-transform: capitalize; + } + .other { + color: rgb(173, 173, 173); + font-size: 12px; + font-weight: 500; + line-height: 16px; + letter-spacing: 0%; + text-align: left; + text-transform: capitalize; + } + .formContent { + display: flex; + justify-content: center; + } + } + } +} +</style> -- Gitblit v1.9.1