From f397a6cfd118ae36022576374ed4a1fd9e15448d Mon Sep 17 00:00:00 2001 From: zhangwei <1504152376@qq.com> Date: 星期四, 26 六月 2025 17:13:05 +0800 Subject: [PATCH] '登录注册完善' --- src/views/home/index.vue | 263 +++++++++++++++++++++++++++++----------------------- 1 files changed, 146 insertions(+), 117 deletions(-) diff --git a/src/views/home/index.vue b/src/views/home/index.vue index 041ec08..9645a61 100644 --- a/src/views/home/index.vue +++ b/src/views/home/index.vue @@ -1,3 +1,4 @@ +el <template> <div class="header"> <img width="227px" height="74px" src="@/assets/home/logo.png" alt="" /> @@ -41,64 +42,71 @@ </div> </div> <div class="right"> - <el-tabs v-model="activeName" class="demo-tabs"> + <!-- <el-tabs v-model="activeName" class="demo-tabs"> <el-tab-pane label="鎰忓悜鍏紑" name="first"> - 鎰忓悜鍏紑 - <!-- <div class="item"> - <span - ><span style="color: #145ccd; font-weight: 600">路</span - >銆愬洓宸濈渷鎴愰兘甯傘��2024骞寸煶鐩樿閬撲粯瀹剁鏉戠伯娌逛骇涓氬洯鍖哄強閰嶅鍩虹璁炬柦寤鸿椤圭洰纾嬪晢鍏憡</span - > - <span>2024-04-15 18:10</span> - </div> - <div class="item"> - <span - ><span style="color: #145ccd; font-weight: 600">路</span - >銆愬洓宸濈渷鎴愰兘甯傘�戠唺鐚胺娓稿涓績灞�閮ㄦ敼閫犻」鐩鍟嗗叕鍛�</span - > - <span>2024-04-15 18:10</span> - </div> - <div class="item"> - <span - ><span style="color: #145ccd; font-weight: 600">路</span - >銆愬洓宸濈渷鎴愰兘甯傘�戜腹鏅閬撴皯婀栫ぞ鍖虹孩鐧藉枩浜嬫湇鍔″満鎵�纾嬪晢鍏憡</span - > - <span>2024-04-15 18:10</span> - </div> - <div class="item"> - <span - ><span style="color: #145ccd; font-weight: 600">路</span - >銆愬洓宸濈渷鎴愰兘甯傘�戞垚閮戒笢閮ㄦ柊鍖轰笁宀旀箹楂樼骇涓浣撹壓涓績鍓嶄复鏃跺仠杞﹀尯鍜屾鏍¢棬涓や晶闂ㄥ崼瀹ら棿鍖哄煙榛戝寲鍙婃帓姘存彁鍗囪В闄ゅ唴娑濋」鐩鍟嗗叕鍛�</span - > - <span>2024-04-15 18:10</span> - </div> - <div class="item"> - <span - ><span style="color: #145ccd; font-weight: 600">路</span - >銆愬洓宸濈渷鎴愰兘甯傘�戝洓宸濈渷鎴愰兘鎴掓瘨搴峰鎵�鐥呮畫鎴掓瘨浜哄憳搴峰娲诲姩涓績缁翠慨鏀归�犻」鐩浜屾纾嬪晢鍏憡</span - > - <span>2024-04-15 18:10</span> - </div> - <div class="item"> - <span - ><span style="color: #145ccd; font-weight: 600">路</span - >銆愬洓宸濈渷鎴愰兘甯傘�戣�佸共閮ㄦ椿鍔ㄤ腑蹇冭淇敼閫犻」鐩鍟嗗叕鍛�</span - > - <span>2024-04-15 18:10</span> - </div> - <div class="item"> - <span - ><span style="color: #145ccd; font-weight: 600">路</span - >銆愬洓宸濈渷鎴愰兘甯傘�戦噾鐗涘尯鎶㈤櫓鏁戠伨宸ョ▼椤圭洰宸ョ▼闃熶紞鍌ㄥ搴擄紙鎴垮缓銆佸競鏀跨被锛夋嫑鏍囧叕鍛�</span - > - <span>2024-04-15 18:10</span> - </div> --> - </el-tab-pane> + 鎰忓悜鍏紑 --> + <div class="item"> + <span + ><span style="color: #145ccd; font-weight: 600">路</span + >銆愬洓宸濈渷鎴愰兘甯傘��2024骞寸煶鐩樿閬撲粯瀹剁鏉戠伯娌逛骇涓氬洯鍖哄強閰嶅鍩虹璁炬柦寤鸿椤圭洰纾嬪晢鍏憡</span + > + <span>2024-04-15 18:10</span> + </div> + <div class="item"> + <span + ><span style="color: #145ccd; font-weight: 600">路</span + >銆愬洓宸濈渷鎴愰兘甯傘�戠唺鐚胺娓稿涓績灞�閮ㄦ敼閫犻」鐩鍟嗗叕鍛�</span + > + <span>2024-04-15 18:10</span> + </div> + <div class="item"> + <span + ><span style="color: #145ccd; font-weight: 600">路</span + >銆愬洓宸濈渷鎴愰兘甯傘�戜腹鏅閬撴皯婀栫ぞ鍖虹孩鐧藉枩浜嬫湇鍔″満鎵�纾嬪晢鍏憡</span + > + <span>2024-04-15 18:10</span> + </div> + <div class="item"> + <span + ><span style="color: #145ccd; font-weight: 600">路</span + >銆愬洓宸濈渷鎴愰兘甯傘�戞垚閮戒笢閮ㄦ柊鍖轰笁宀旀箹楂樼骇涓浣撹壓涓績鍓嶄复鏃跺仠杞﹀尯鍜屾鏍¢棬涓や晶闂ㄥ崼瀹ら棿鍖哄煙榛戝寲鍙婃帓姘存彁鍗囪В闄ゅ唴娑濋」鐩鍟嗗叕鍛�</span + > + <span>2024-04-15 18:10</span> + </div> + <div class="item"> + <span + ><span style="color: #145ccd; font-weight: 600">路</span + >銆愬洓宸濈渷鎴愰兘甯傘�戝洓宸濈渷鎴愰兘鎴掓瘨搴峰鎵�鐥呮畫鎴掓瘨浜哄憳搴峰娲诲姩涓績缁翠慨鏀归�犻」鐩浜屾纾嬪晢鍏憡</span + > + <span>2024-04-15 18:10</span> + </div> + <div class="item"> + <span + ><span style="color: #145ccd; font-weight: 600">路</span + >銆愬洓宸濈渷鎴愰兘甯傘�戣�佸共閮ㄦ椿鍔ㄤ腑蹇冭淇敼閫犻」鐩鍟嗗叕鍛�</span + > + <span>2024-04-15 18:10</span> + </div> + <div class="item"> + <span + ><span style="color: #145ccd; font-weight: 600">路</span + >銆愬洓宸濈渷鎴愰兘甯傘�戦噾鐗涘尯鎶㈤櫓鏁戠伨宸ョ▼椤圭洰宸ョ▼闃熶紞鍌ㄥ搴擄紙鎴垮缓銆佸競鏀跨被锛夋嫑鏍囧叕鍛�</span + > + <span>2024-04-15 18:10</span> + </div> + <div class="item"> + <span + ><span style="color: #145ccd; font-weight: 600">路</span + >銆愬洓宸濈渷鎴愰兘甯傘�戦噾鐗涘尯鎶㈤櫓鏁戠伨宸ョ▼椤圭洰宸ョ▼闃熶紞鍌ㄥ搴擄紙鎴垮缓銆佸競鏀跨被锛夋嫑鏍囧叕鍛�</span + > + <span>2024-04-15 18:10</span> + </div> + <!-- </el-tab-pane> <el-tab-pane label="宸ョ▼鎷涙爣" name="second">宸ョ▼鎷涙爣</el-tab-pane> <el-tab-pane label="璐х墿鎷涙爣" name="third">璐х墿鎷涙爣</el-tab-pane> <el-tab-pane label="鏈嶅姟鎷涙爣" name="fourth">鏈嶅姟鎷涙爣</el-tab-pane> - <el-tab-pane label="缃戜笂绔炰环" name="fourth">缃戜笂绔炰环</el-tab-pane> - </el-tabs> + <el-tab-pane label="缃戜笂绔炰环" name="fourth1">缃戜笂绔炰环</el-tab-pane> + </el-tabs> --> </div> </div> <div class="daixie"> @@ -140,7 +148,7 @@ <div class="user"> <div class="all"> <div class="left"> - <div class="item item1"> + <div v-for="item in state.roleList" :key="item.id" class="item item1"> <div class="box"> <img width="18px" @@ -148,65 +156,44 @@ src="@/assets/home/car1.png" alt="" /> - 閲囪喘浜� + {{ item.name }} </div> <div> - <span class="hover:cursor-pointer" @click="toRegister">娉ㄥ唽</span - ><span class="m-2">|</span - ><span class="hover:cursor-pointer" @click="toLogin">鐧诲綍</span> - </div> - </div> - <div class="item"> - <div class="box"> - <img - width="18px" - height="18px" - src="@/assets/home/car.png" - alt="" - /> - 浠g悊鏈烘瀯 - </div> - <div> - <span class="hover:cursor-pointer" @click="toRegister">娉ㄥ唽</span - ><span class="m-2">|</span - ><span class="hover:cursor-pointer" @click="toLogin">鐧诲綍</span> - </div> - </div> - <div class="item"> - <div class="box"> - <img - width="18px" - height="18px" - src="@/assets/home/car.png" - alt="" - />渚涘簲鍟� - </div> - <div> - <span class="hover:cursor-pointer" @click="toRegister">娉ㄥ唽</span - ><span class="m-2">|</span - ><span class="hover:cursor-pointer" @click="toLogin">鐧诲綍</span> - </div> - </div> - <div class="item"> - <div class="box"> - <img - width="18px" - height="18px" - src="@/assets/home/car.png" - alt="" - />璇勫涓撳 - </div> - <div> - <span class="hover:cursor-pointer" @click="toRegister">娉ㄥ唽</span - ><span class="m-2">|</span - ><span class="hover:cursor-pointer" @click="toLogin">鐧诲綍</span> + <el-link + v-if="state.rolesCode.indexOf(item.code) !== -1" + :underline="false" + class="hover:cursor-pointer" + @click="toRegister" + >閫�鍑�</el-link + > + <el-link + v-else + :underline="false" + class="hover:cursor-pointer" + @click="toRegister" + >鐢宠</el-link + ><span class="m-2">|</span> + <el-link + v-if="state.rolesCode.indexOf(item.code) !== -1" + :underline="false" + class="hover:cursor-pointer" + @click="toWelcome" + >杩涘叆</el-link + > + <el-link + v-else + :underline="false" + class="hover:cursor-pointer" + :disabled="state.accessToken" + @click="toLogin" + >鐧诲綍</el-link + > </div> </div> </div> <div class="right" /> </div> </div> - <div class="more"> <div class="content"> <div class="item"> @@ -399,16 +386,45 @@ </template> <script lang="ts" setup> -import { ref } from "vue"; +import { onMounted, ref, computed, reactive } from "vue"; import myFooter from "./component/myFooter.vue"; -let activeName = ref("first"); +import { useUserStoreHook } from "@/store/modules/user"; +import { exRole } from "@/api/register/index.ts"; +import { storageLocal, isString, isIncludeAllChildren } from "@pureadmin/utils"; + +import { getToken } from "@/utils/auth"; import { useRoute, useRouter } from "vue-router"; defineOptions({ - name: "Home" + name: "Main" }); +let activeName = ref("first"); +/** 瑙掕壊锛堝鏋滄樀绉颁负绌哄垯鏄剧ず鐢ㄦ埛鍚嶏級 */ +const getUseRoles = () => { + state.userInfo = storageLocal().getItem("user-info"); + state.userInfo.exRoles.forEach(element => { + state.rolesCode.push(element.code); + }); +}; +const state = reactive({ + roleList: [], + rolesCode: [], + userInfo: {}, + accessToken: "" +}); +onMounted(() => { + exRole().then(res => { + state.roleList = res.result; + }); + getUseRoles(); + state.accessToken = getToken().accessToken; +}); + const router = useRouter(); const toRegister = () => { router.push({ name: "Register" }); +}; +const toWelcome = () => { + router.push({ name: "Welcome" }); }; const toLogin = () => { router.push({ name: "Login" }); @@ -552,9 +568,12 @@ justify-content: space-between; align-items: center; padding: 0 30px; - height: 25%; + height: 23%; text-align: left; color: #5f5f5f; + // box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; + border-radius: 6px; + margin-bottom: 10px; .box { display: flex; justify-content: center; @@ -569,13 +588,13 @@ color: #ffffff; } } - .left :first-child { - border-top-left-radius: 8px; - border-top-right-radius: 8px; - } - .left *:not(:first-child):not(:last-child) { - border-bottom: #c6c6c6 1px solid; - } + // .left :first-child { + // border-top-left-radius: 8px; + // border-top-right-radius: 8px; + // } + // .left *:not(:first-child):not(:last-child) { + // border-bottom: #c6c6c6 1px solid; + // } .right { background: #a9b3c4; width: 75%; @@ -721,4 +740,14 @@ border-radius: 4px; } } +a { + font-size: 16px; + + // font-weight: 600; + color: #fff; +} +a:hover, +a:active { + color: #fff; +} </style> -- Gitblit v1.9.1