dev-cl
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> |
<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> |
</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