forked from AkkomaGang/admin-fe
Fix styles for report show page
This commit is contained in:
parent
5bd81b1901
commit
4851642faf
1 changed files with 39 additions and 30 deletions
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div v-if="!loading">
|
<div v-if="!loading" class="report-show-page-container">
|
||||||
<header class="report-page-header-container">
|
<header class="report-page-header-container">
|
||||||
<div class="report-page-header">
|
<div class="report-page-header">
|
||||||
<div v-if="propertyExists(report.account, 'nickname')" class="avatar-name-container">
|
<div v-if="propertyExists(report.account, 'nickname')" class="avatar-name-container">
|
||||||
|
@ -11,10 +11,10 @@
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<h1 v-else>{{ $t('reports.report') }}</h1>
|
<h1 v-else>{{ $t('reports.report') }}</h1>
|
||||||
<h4 v-if="propertyExists(report.account, 'id')" class="id">{{ $t('reports.id') }}: {{ report.id }}</h4>
|
|
||||||
</div>
|
</div>
|
||||||
<reboot-button/>
|
<reboot-button/>
|
||||||
</header>
|
</header>
|
||||||
|
<h4 v-if="propertyExists(report.account, 'id')" class="id">{{ $t('reports.id') }}: {{ report.id }}</h4>
|
||||||
<el-card class="report">
|
<el-card class="report">
|
||||||
<report-content :report="report"/>
|
<report-content :report="report"/>
|
||||||
</el-card>
|
</el-card>
|
||||||
|
@ -53,37 +53,46 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style rel='stylesheet/scss' lang='scss'>
|
<style rel='stylesheet/scss' lang='scss'>
|
||||||
.report-page-header {
|
.report-show-page-container {
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
margin: 22px 15px 22px 20px;
|
|
||||||
padding: 0;
|
|
||||||
h1 {
|
|
||||||
display: inline;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
h4 {
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
.avatar-name-container {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
.el-icon-top-right {
|
|
||||||
font-size: 2em;
|
|
||||||
line-height: 36px;
|
|
||||||
color: #606266;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.id {
|
.id {
|
||||||
color: gray;
|
color: gray;
|
||||||
|
margin: 0 15px 22px 15px;
|
||||||
}
|
}
|
||||||
.report-page-avatar {
|
.report {
|
||||||
margin: 0 7px 0 12px;
|
width: 1000px;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
.report-page-header {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin: 10px 0;
|
||||||
|
padding: 0;
|
||||||
|
h1 {
|
||||||
|
display: inline;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
h4 {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.avatar-name-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.el-icon-top-right {
|
||||||
|
font-size: 2em;
|
||||||
|
line-height: 36px;
|
||||||
|
color: #606266;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.report-page-avatar {
|
||||||
|
margin: 0 7px 0 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.report-page-header-container {
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin: 0 15px;
|
||||||
|
padding: 0;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
.report-page-header-container {
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in a new issue