dev-cl
qsh
1 month ago
parent
ed6da288bc
commit
266aaa312a
@ -0,0 +1,6 @@ |
||||
import request from '@/config/axios' |
||||
|
||||
// 查询应用列表
|
||||
export const getAppList = (params) => { |
||||
return request.get({ url: '/admin-api/system/auth/get-user-client', params }) |
||||
} |
||||
@ -1,7 +1,86 @@ |
||||
<template> |
||||
<div> 首页 </div> |
||||
<div> |
||||
<!-- 展示所有当前用户可打开的应用程序，包含图标和名称及各应用的角色 --> |
||||
<div class="flex flex-wrap gap-4"> |
||||
<el-card |
||||
v-for="item in appList" |
||||
:key="item.id" |
||||
shadow="hover" |
||||
class="width-200px" |
||||
@click="handleAppClick(item)" |
||||
> |
||||
<!-- card body --> |
||||
<el-image :src="item.clientLogo" fit="fill" :lazy="true" style="width: 180px" /> |
||||
<div class="cutout-text">{{ item.clientName }}</div> |
||||
|
||||
<template #footer v-if="item.clientDescription"> |
||||
<div class="text-14px text-gray-400">{{ item.clientDescription }}</div> |
||||
</template> |
||||
</el-card> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup name="Home"></script> |
||||
<script setup name="Home"> |
||||
import { getAppList } from '@/api/platform/index.js' |
||||
|
||||
const appList = ref([]) |
||||
|
||||
onMounted(() => { |
||||
getAppList({ |
||||
pageNo: 1, |
||||
pageSize: -1, |
||||
isCurrentUser: true |
||||
}).then((res) => { |
||||
appList.value = res || [] |
||||
}) |
||||
}) |
||||
|
||||
function handleAppClick(item) { |
||||
window.open(item.redirectUri, '_blank') |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
::v-deep(.el-card__body) { |
||||
background-color: #001529; |
||||
padding: 5px; |
||||
text-align: center; |
||||
} |
||||
|
||||
<style lang="scss" scoped></style> |
||||
.cutout-text { |
||||
position: relative; |
||||
font-size: 40px; |
||||
font-weight: bold; |
||||
-webkit-text-stroke: 1px #9a9acc; |
||||
color: #001529; |
||||
&::before { |
||||
content: ' '; |
||||
width: 100%; |
||||
height: 100%; |
||||
position: absolute; |
||||
left: 0; |
||||
top: 0; |
||||
background-image: linear-gradient(45deg, #ff269b, #2ab5f5, #ffbf00); |
||||
mix-blend-mode: multiply; |
||||
} |
||||
&::after { |
||||
content: ''; |
||||
position: absolute; |
||||
left: -75%; |
||||
top: 0; |
||||
width: 200%; |
||||
height: 100%; |
||||
background: radial-gradient(circle, #fff, #000 50%); |
||||
background-size: 25% 30%; |
||||
mix-blend-mode: color-dodge; |
||||
animation: mix 4s linear infinite; |
||||
background-repeat: repeat; |
||||
} |
||||
} |
||||
@keyframes mix { |
||||
to { |
||||
transform: translateX(25%); |
||||
} |
||||
} |
||||
</style> |
||||
|
||||
Loading…
Reference in new issue