parent
bd9813ae49
commit
5fdadd26bf
|
After Width: | Height: | Size: 638 B |
@ -1,3 +1,147 @@
|
||||
<template>
|
||||
<div>123</div>
|
||||
</template>
|
||||
|
||||
<div class="grid-container">
|
||||
<div class="grid-item item-1">
|
||||
<!-- 整体项目情况 -->
|
||||
<div class="allarea">
|
||||
<AllArea />
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-item item-2">
|
||||
<!-- 消息通知 -->
|
||||
<div class="itemhead">
|
||||
<span>消息通知</span>
|
||||
</div>
|
||||
<div class="mainarea">
|
||||
<Message />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AllArea from '@/views/components/analysis/all.vue'
|
||||
import FunctionArea from '@/views/components/analysis/function.vue'
|
||||
import InvestArea from '@/views/components/analysis/invest.vue'
|
||||
import Message from '@/views/components/analysis/message.vue'
|
||||
import ProjectList from '@/views/components/analysis/projectList.vue'
|
||||
import MapArea from '@/views/components/analysis/map.vue'
|
||||
|
||||
export default {
|
||||
name: "Pc2FbEcharts",
|
||||
components: {
|
||||
AllArea,
|
||||
FunctionArea,
|
||||
InvestArea,
|
||||
Message,
|
||||
ProjectList,
|
||||
MapArea,
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.grid-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
/* 三列 */
|
||||
grid-template-rows: auto auto auto;
|
||||
/* 三行 */
|
||||
gap: 1rem;
|
||||
/* 模块之间的间隔 */
|
||||
padding: 1rem;
|
||||
/* 容器内边距 */
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
|
||||
}
|
||||
|
||||
.itemhead {
|
||||
width: 100%;
|
||||
border-left: 0.25rem solid #2B62F1;
|
||||
margin: 0.94rem 0;
|
||||
height: 1.25rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.relaitem{
|
||||
position: relative;
|
||||
}
|
||||
.itemsall{
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
top: 5.5rem;
|
||||
left: 7.2rem;
|
||||
}
|
||||
.itemsall span:nth-child(1){
|
||||
font-family: DIN, DIN;
|
||||
font-weight: 500;
|
||||
font-size: 1.75rem;
|
||||
color: #292C33;
|
||||
line-height: 2.44rem;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
.itemsall span:nth-child(2){
|
||||
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
|
||||
font-weight: 400;
|
||||
font-size: 0.88rem;
|
||||
color: #9E9E9E;
|
||||
line-height: 1.25rem;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
.itemhead span {
|
||||
margin-left: 1rem;
|
||||
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
color: #3D424C;
|
||||
line-height: 1.69rem;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
.mainarea{
|
||||
padding: 0rem 0rem 0 1.4rem;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/* 第一行：第一个模块占两列 */
|
||||
.item-1 {
|
||||
grid-column: span 2;
|
||||
background-image: url(../../../src/assets/images/allbg.png);
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.allarea {
|
||||
width: 100%;
|
||||
height: 14.5rem;
|
||||
padding: 1rem 1.5rem;
|
||||
}
|
||||
|
||||
/* 最后一行：一个模块占一整行 */
|
||||
.item-6 {
|
||||
grid-column: span 3;
|
||||
/* 占三列 */
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue