96 lines
2.0 KiB
Vue
96 lines
2.0 KiB
Vue
|
<template>
|
||
|
|
<div class="layout-pd system-dept-container">
|
||
|
|
<el-card class="apply-detail" v-loading="state.loading" shadow="hover">
|
||
|
|
<div class="top-box">
|
||
|
|
<div class="box-left">
|
||
|
|
<div class="tbl-left">
|
||
|
|
<img :src="viteUrl+(state.data.icon||defaultIcon)" :alt="state.data.name" />
|
||
|
|
</div>
|
||
|
|
<div class="tbl-right">
|
||
|
|
<div class="title">{{state.data.name}}</div>
|
||
|
|
<div class="tips">{{state.data.tips}}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="box-right">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="bottom-box"></div>
|
||
|
|
</el-card>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts" name="applyDetail">
|
||
|
|
import { onMounted, reactive } from 'vue';
|
||
|
|
import { applyApi } from '/@/api/service/apply';
|
||
|
|
import { useRoute } from 'vue-router';
|
||
|
|
import { ElMessage } from 'element-plus';
|
||
|
|
|
||
|
|
// 封面基本路径
|
||
|
|
const viteUrl = import.meta.env.VITE_API_URL;
|
||
|
|
const defaultIcon:string = 'static/pixel/home/default-work.png';
|
||
|
|
|
||
|
|
// 引入 api 请求接口
|
||
|
|
const aplApi = applyApi();
|
||
|
|
|
||
|
|
// 获取模块名称和标签名称
|
||
|
|
const route = useRoute();
|
||
|
|
const id:any = route.query.id;
|
||
|
|
|
||
|
|
const state = reactive<any>({
|
||
|
|
data: {},
|
||
|
|
loading: false,
|
||
|
|
})
|
||
|
|
|
||
|
|
// 获取文章详情-根据id
|
||
|
|
const getApplyDetailById = async(id:number) => {
|
||
|
|
try {
|
||
|
|
state.loading = true;
|
||
|
|
let res = await aplApi.getApplyDetail(id);
|
||
|
|
if(res?.success) {
|
||
|
|
state.data = res.data;
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
ElMessage.error('获取应用服务详情失败');
|
||
|
|
} finally {
|
||
|
|
state.loading = false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
getApplyDetailById(id);
|
||
|
|
})
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.system-dept-container {
|
||
|
|
height: 100%;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
.apply-detail{
|
||
|
|
flex: 1;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
.top-box{
|
||
|
|
display: flex;
|
||
|
|
margin: 0 20px;
|
||
|
|
background-color: aqua;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
.box-left{
|
||
|
|
display: flex;
|
||
|
|
min-width: 60%;
|
||
|
|
background-color: aquamarine;
|
||
|
|
img{
|
||
|
|
width: 120px;
|
||
|
|
height: 120px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.box-right{
|
||
|
|
min-width: 40%;
|
||
|
|
background-color: bisque;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|