flx:调整样式问题 进度管理新增展开/收起
This commit is contained in:
parent
81373ab727
commit
207817a6c2
Binary file not shown.
|
Before Width: | Height: | Size: 135 KiB After Width: | Height: | Size: 122 KiB |
@ -473,6 +473,7 @@ onMounted(async () => {
|
|||||||
background: url("@/assets/images/bthgIcon/homeOverview_bg5.png") no-repeat;
|
background: url("@/assets/images/bthgIcon/homeOverview_bg5.png") no-repeat;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
font-size: 14px;
|
||||||
>img {
|
>img {
|
||||||
width: 14%;
|
width: 14%;
|
||||||
height: 14%;
|
height: 14%;
|
||||||
|
|||||||
@ -580,6 +580,7 @@ onMounted(() => {
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
margin-top: 15px;
|
margin-top: 15px;
|
||||||
|
font-size: 14px;
|
||||||
> div::after {
|
> div::after {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|||||||
@ -50,7 +50,7 @@
|
|||||||
</template>
|
</template>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody :class="{myTbody : !showDwon}">
|
||||||
<template v-for="(cur, index) in projectItemList">
|
<template v-for="(cur, index) in projectItemList">
|
||||||
<tr class="td_start_boxs" v-for="(item, index) in cur.children" :key="item.id">
|
<tr class="td_start_boxs" v-for="(item, index) in cur.children" :key="item.id">
|
||||||
<td v-if="index == 0" :rowspan="cur.children.length">
|
<td v-if="index == 0" :rowspan="cur.children.length">
|
||||||
@ -109,7 +109,7 @@ import quarterOfYear from 'dayjs/plugin/quarterOfYear';
|
|||||||
import isBetween from 'dayjs/plugin/isBetween';
|
import isBetween from 'dayjs/plugin/isBetween';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
props: ['yearList', 'milestoneList', 'projectItemList'],
|
props: ['yearList', 'milestoneList', 'projectItemList', 'showDwon'],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
// 年份列表
|
// 年份列表
|
||||||
@ -365,6 +365,10 @@ export default {
|
|||||||
-webkit-overflow-scrolling: touch;
|
-webkit-overflow-scrolling: touch;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.myTbody {
|
||||||
|
height: 516px;
|
||||||
|
}
|
||||||
|
|
||||||
tbody::-webkit-scrollbar {
|
tbody::-webkit-scrollbar {
|
||||||
/*隐藏滚轮*/
|
/*隐藏滚轮*/
|
||||||
display: none;
|
display: none;
|
||||||
@ -444,7 +448,7 @@ export default {
|
|||||||
vertical-align: bottom;
|
vertical-align: bottom;
|
||||||
|
|
||||||
td:first-child {
|
td:first-child {
|
||||||
min-width: 130px;
|
min-width: 155px;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -645,7 +649,7 @@ export default {
|
|||||||
|
|
||||||
td {
|
td {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
min-width: 180px;
|
min-width: 90px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
@ -739,13 +743,13 @@ export default {
|
|||||||
// 美化滚动条
|
// 美化滚动条
|
||||||
.gasanalysis-table1::-webkit-scrollbar,
|
.gasanalysis-table1::-webkit-scrollbar,
|
||||||
tbody::-webkit-scrollbar {
|
tbody::-webkit-scrollbar {
|
||||||
width: 5px;
|
width: 8px;
|
||||||
height: 5px;
|
height: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gasanalysis-table1::-webkit-scrollbar-track,
|
.gasanalysis-table1::-webkit-scrollbar-track,
|
||||||
tbody::-webkit-scrollbar-track {
|
tbody::-webkit-scrollbar-track {
|
||||||
width: 6px;
|
width: 8px;
|
||||||
background: rgba(#101f1c, 0.1);
|
background: rgba(#101f1c, 0.1);
|
||||||
-webkit-border-radius: 2em;
|
-webkit-border-radius: 2em;
|
||||||
-moz-border-radius: 2em;
|
-moz-border-radius: 2em;
|
||||||
|
|||||||
@ -1,9 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="schedule-plan">
|
<div class="schedule-plan">
|
||||||
<div class="top">
|
<div class="top" :style="{height: (!showDown ? '100%' : '65%')}">
|
||||||
<rightTop class="rightTop"></rightTop>
|
<rightTop class="rightTop" :showDown="showDown"></rightTop>
|
||||||
</div>
|
</div>
|
||||||
<div class="bottom">
|
<div class="bottom" v-if="showDown">
|
||||||
<completionProjectQuantity class="leftTop"></completionProjectQuantity>
|
<completionProjectQuantity class="leftTop"></completionProjectQuantity>
|
||||||
<!-- <ganttText class="rightTop"></ganttText> -->
|
<!-- <ganttText class="rightTop"></ganttText> -->
|
||||||
<!-- <div class="rightBottom">
|
<!-- <div class="rightBottom">
|
||||||
@ -12,6 +12,12 @@
|
|||||||
</div> -->
|
</div> -->
|
||||||
<rightBottom class="rightBottom"></rightBottom>
|
<rightBottom class="rightBottom"></rightBottom>
|
||||||
</div>
|
</div>
|
||||||
|
<el-tooltip class="box-item" effect="dark" :content="showDown ? '收起' : '展开'" placement="top">
|
||||||
|
<el-icon @click="showDownFn" :style="{top: (showDown ? '64.5%' : '96%')}" class="showDown">
|
||||||
|
<ArrowUpBold v-show="!showDown" />
|
||||||
|
<ArrowDownBold v-show="showDown" />
|
||||||
|
</el-icon>
|
||||||
|
</el-tooltip>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -26,12 +32,26 @@ import rightBottomRight from "./rightBottomRight.vue";
|
|||||||
import rightBottom from "./rightBottom.vue";
|
import rightBottom from "./rightBottom.vue";
|
||||||
import ganttText from "./ganttText.vue";
|
import ganttText from "./ganttText.vue";
|
||||||
|
|
||||||
|
const showDown = ref(true);
|
||||||
|
const showDownFn = () => {
|
||||||
|
showDown.value = !showDown.value;
|
||||||
|
}
|
||||||
|
|
||||||
onMounted(() => {});
|
onMounted(() => {});
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.schedule-plan {
|
.schedule-plan {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
.showDown {
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 20px;
|
||||||
|
position: absolute;
|
||||||
|
right: 20px;
|
||||||
|
top: 64.5%;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
.top {
|
.top {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 65%;
|
height: 65%;
|
||||||
@ -57,7 +77,7 @@ onMounted(() => {});
|
|||||||
margin-top: 1% !important;
|
margin-top: 1% !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.leftTop {
|
.leftTop {
|
||||||
width: 49%;
|
width: 49%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|||||||
@ -31,6 +31,7 @@
|
|||||||
:yearList="pageInfo.yearList"
|
:yearList="pageInfo.yearList"
|
||||||
:milestoneList="pageInfo.milestoneList"
|
:milestoneList="pageInfo.milestoneList"
|
||||||
:projectItemList="pageInfo.projectItemList"
|
:projectItemList="pageInfo.projectItemList"
|
||||||
|
:showDwon="props.showDown"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -46,6 +47,13 @@ import { GlobalStore } from "@/stores";
|
|||||||
import Card from "@/components/card.vue";
|
import Card from "@/components/card.vue";
|
||||||
const store = GlobalStore();
|
const store = GlobalStore();
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
showDown: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
const pageInfo = reactive({
|
const pageInfo = reactive({
|
||||||
pageNo: 1,
|
pageNo: 1,
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user