deerflow-code/situation-overview-web/src/components/Overview/index.vue

<template>
    <div class="Overview">
        <div class="title">
            <span>ZZ任务</span>
            <img src="@/assets/map-icon/down-logo.svg" alt="" />
        </div>
        <div class="content">
            <div class="taskName">
                任务名称任务名称任务名称任务名称任务名称任务名称任务名称任务名称任务名称任务名称任务名称任务名称任务名称任务名称任务名称
            </div>
        </div>
        <div class="task-details">
            <div class="task-line-bg task-line-top"></div>
            <div class="" style="margin-top: 5px;">
                <!-- {{ taskData.overview }} -->
            </div>
            <div class="task-line-bg task-line-bottom"></div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
        };
    },
    methods: {
    },
    watch: {
    },
};
</script>

<style lang="less">
.Overview {
    position: fixed;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;

    .title {
        width: 160px;
        height: 30px;
        line-height: 33px;
        margin: auto;
        background: url(/src/assets/map-icon/task-content-logo.svg) no-repeat;
        background-size: cover;
        color: #ffffff;
        text-align: center;
    }

    .content {
        .taskName {
            background: linear-gradient(90.02deg,
                    rgba(3, 38, 80, 0) 0%,
                    rgba(25, 84, 154, 0.8) 32.88%,
                    rgba(21, 76, 141, 0.8) 67.83%,
                    rgba(3, 38, 80, 0) 99.46%);
            margin-top: 10px;
            font-family: Noto Sans S Chinese;
            line-height: 30px;
            font-weight: 300;
            padding-top: 6px;
            color: #ffffff;
            font-size: var(--titleSize);
            text-align: center;
            padding-bottom: 10px;
            position: relative;
        }
    }

    // 顶部任务信息样式
    .task-content {
        width: 701px;
        position: absolute;
        top: 60px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 550;

        .task-title {
            width: 160px;
            height: 30px;
            line-height: 33px;
            margin: auto;
            background: url(/src/assets/map-icon/task-content-logo.svg) no-repeat;
            background-size: cover;
            color: #ffffff;
            text-align: center;

            img {
                width: 12px;
                margin-left: 10px;
            }
        }

        .task-details {
            width: 701px;
            // height: 75px;
            background: linear-gradient(90.02deg,
                    rgba(3, 38, 80, 0) 0%,
                    rgba(25, 84, 154, 0.8) 32.88%,
                    rgba(21, 76, 141, 0.8) 67.83%,
                    rgba(3, 38, 80, 0) 99.46%);
            margin-top: 10px;
            font-family: Noto Sans S Chinese;
            line-height: 30px;
            font-weight: 300;
            padding-top: 6px;
            color: #ffffff;
            font-size: var(--titleSize);
            text-align: center;
            padding-bottom: 10px;
            position: relative;

            .task-line-bg {
                width: 100%;
                height: 2px;
                background: linear-gradient(90deg,
                        rgba(33, 99, 171, 0) -0.82%,
                        #0079fe 48.95%,
                        rgba(33, 99, 171, 0) 100%);
                position: absolute;
            }

            .task-line-top {
                top: 0;
            }

            .task-line-bottom {
                bottom: 0;
            }
        }
    }

    // 顶部行动信息样式
    .action-content {
        width: 1000px;
        position: absolute;
        top: 60px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 550;

        .action-title {
            width: 160px;
            height: 30px;
            line-height: 33px;
            margin: auto;
            background: url(/src/assets/map-icon/task-content-logo.svg) no-repeat;
            background-size: cover;
            color: #ffffff;
            text-align: center;

            img {
                width: 12px;
                margin-left: 10px;
            }
        }

        .action-list {
            width: 1000px;
            margin-top: 20px;
            display: flex;
            justify-content: space-between;

            .action-item {
                width: 255px;
                padding: 0 10px;
                background: linear-gradient(90.07deg, rgba(3, 38, 80, 0) 0%, rgba(15, 63, 120, 0.34) 11.02%, rgba(25, 84, 154, 0.64) 27.47%, rgba(14, 92, 185, 0.64) 50.34%, rgba(21, 76, 141, 0.64) 75.5%, rgba(13, 58, 113, 0.34) 89.24%, rgba(3, 38, 80, 0) 99.43%);
                text-align: center;

                .action-line {
                    width: 100%;
                    height: 2px;
                    background: linear-gradient(90deg, rgba(33, 99, 171, 0) -0.82%, rgba(0, 121, 254, 0.8) 48.95%, rgba(33, 99, 171, 0) 100%);
                }

                .item-title {
                    font-family: Noto Sans S Chinese;
                    color: #ffffff;
                    font-size: 18px;
                    margin-top: 10px;

                    .item-label {
                        font-family: DS-Digital;
                        font-weight: 700;
                        color: rgba(255, 255, 255, 0.8);
                        font-size: 30px;
                        margin-left: 10px;
                        margin-right: 5px;
                    }

                    .item-value {
                        font-family: Noto Sans S Chinese;
                        color: #ffffff;
                        font-size: 16px;
                    }
                }
            }
        }
    }
}
</style>