flx:调整样式问题 进度管理新增展开/收起

This commit is contained in:
X_Rian 2024-10-30 18:19:59 +08:00
parent 81373ab727
commit 207817a6c2
6 changed files with 45 additions and 11 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 135 KiB

After

Width:  |  Height:  |  Size: 122 KiB

View File

@ -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%;

View File

@ -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;

View File

@ -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;

View File

@ -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%;

View File

@ -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,