yunsan-pc/src/views/driving/components/Driving8.vue

<template>
    <section class="driving-8">
        <header class="toolbar"><span>对比日期:</span><select v-model="state.date">
                <option>{{ state.date }}</option>
            </select><select v-model="state.period">
                <option>{{ state.period }}</option>
            </select></header>
        <div class="summary">
            <div class="row"><b>最大满载区间</b><span>{{ state.maxSection }} <i>{{ state.loadRate }}%</i></span></div>
            <div class="row"><b>运行图图号</b><span>实际 <i>{{ state.actualTrips }}列</i><em>|</em> 计划 <strong>{{
                state.planTrips }}列</strong></span></div>
            <div class="row"><b>备车情况</b><span>{{ state.spare }}</span></div>
            <div class="row"><b>行车间隔</b><span>高峰: <span style="margin-right: 20px;">{{ state.peakInterval }}min
                    </span>平峰: <span>{{
                        state.offPeakInterval }}min</span></span></div>
        </div>
        <div class="route">
            <div class="route-line">
                <label>西岑</label>
                <span class="station mid">淀山湖大道</span>
                <span class="station end">虹桥火车站</span>
                <small class="time t1">6分钟</small>
                <small class="time t2">3分钟</small>
            </div>
            <div class="flow f1">{{ state.flowLeft }}人/小时</div>
            <div class="flow f2">{{ state.flowRight }}人/小时</div>
        </div>
    </section>
</template>

<script setup>
import { reactive } from 'vue'

const state = reactive({ date: '20251113', period: '早高峰时段', maxSection: '虹桥火车站-国家会展中心', loadRate: 110, actualTrips: 23, planTrips: 24, spare: '东方绿洲/淀山湖', peakInterval: 2.5, offPeakInterval: 4, flowLeft: 225600, flowRight: 225600 })

</script>

<style lang="scss" scoped>
    $panel-bg: rgba(4, 124, 235, 0.1);
    $panel-radius: 6px;
    $route-color: #00e9ed;
    $tag-bg: rgba(34, 71, 122, 0.92);
    $tag-border: #8d7c4e;

    @mixin flex($align: center, $justify: flex-start, $direction: row) {
        display: flex;
        flex-direction: $direction;
        align-items: $align;
        justify-content: $justify;
    }

    @mixin glass-panel {
        background: $panel-bg;
        backdrop-filter: blur(10px);
        border-radius: $panel-radius;
    }

    @mixin route-tag($top) {
        position: absolute;
        top: $top;
        z-index: 2;
        padding: 4px 16px;
        color: inherit;
        white-space: nowrap;
        background: linear-gradient(130deg, #f5ff3442 2%, #ffb23e31 36%, #ff932e27 116%);
        border: 1px solid;
        border-image: linear-gradient(90deg, #ffd343b3 -3%, #ffc85b 51%, #ffcd43b3 102%) 1;
        border-radius: 3px;
    }

    @mixin time-tag($top) {
        position: absolute;
        top: $top;
        z-index: 2;
        padding: 4px 16px;
        color: inherit;
        white-space: nowrap;
        background: linear-gradient(122deg, #28426a 4%, #0d4061 108%);
        border: 1px solid;
        border-image: linear-gradient(90deg, #43aaffb3 -3%, #5bb5ff 51%, #43aaffb3 102%) 1;
        border-radius: 3px;
    }

    .driving-8 {
        @include flex(stretch, flex-start, column);

        position: absolute;
        top: 860.63px;
        left: 3856.58px;
        width: 920.56px;
        height: 726.37px;
        padding: 8px 32px 0;
        color: #FFFFFF;
        font: 22px;
        background: url('/imgs/driving/8-bg.png') no-repeat center / cover;

        .toolbar {
            @include flex(center, flex-end);

            height: 33px;
            margin-top: 70px;
            gap: 12px;
            color: #dcecff;
            font-size: 16px;

            select {
                height: 26px;
                padding: 0 24px 0 10px;
                appearance: none;
                color: #e4f2ff;
                font-size: 17px;
                background-color: #2166a8;
                background-image: linear-gradient(45deg, transparent 50%, #b8d9f7 50%),
                    linear-gradient(135deg, #b8d9f7 50%, transparent 50%);
                background-repeat: no-repeat;
                background-position: calc(100% - 13px) 10px, calc(100% - 8px) 10px;
                background-size: 5px 5px;
                border: 1px solid #4b9ee5;
                border-radius: 2px;
            }
        }

        .summary {
            @include glass-panel;
            @include flex(stretch, space-evenly, column);

            height: 280px;
            padding: 0 18px;

            .row {
                @include flex(center, space-between);

                height: 53px;
                padding: 0 18px;
                margin-bottom: 1px;
                background: linear-gradient(90deg, #0085ff00 0%, #00a3ff48 40%, #00a2ff48 70%, #0075ff0a 100%);

                b {
                    font-size: 22px;
                    font-weight: 500;
                    letter-spacing: 0;
                }

                span {
                    // font-weight: 600;
                    font-size: 22px;
                }

                i,
                strong {
                    padding: 3px 10px;
                    margin-left: 10px;
                    color: white;
                    font-style: normal;
                    background: #D72929;
                    border-radius: 4px;
                    font-weight: 500;
                }

                strong {
                    background: #008CFF;
                    font-weight: 500;
                }

                em {
                    margin: 0 10px;
                    color: #d6e6fa;
                    font-style: normal;
                }
            }
        }

        .route {
            @include glass-panel;

            position: relative;
            height: 290px;
            margin-top: 24px;

            .route-line {
                position: absolute;
                top: 30px;
                left: 44px;
                width: 760px;
                height: 187px;
                border: 3px solid $route-color;
                border-radius: 100px;

                &::after {
                    position: absolute;
                    top: 45px;
                    left: 238px;
                    width: 512px;
                    height: 85px;
                    content: '';
                    border: 3px solid $route-color;
                    border-radius: inherit;
                }

                label {
                    @include route-tag(73px);
                    left: 40px;
                }

                .station {
                    @include route-tag(73px);

                    &.mid,
                    &.end {
                        width: 125px;
                        text-align: center;
                    }

                    &.mid {
                        left: 270px;
                    }

                    &.end {
                        right: 30px;
                    }
                }

                .time {
                    @include time-tag(169px);
                    padding: 3px 20px;

                    &.t1 {
                        left: 190px;
                    }

                    &.t2 {
                        left: 487px;
                    }
                }
            }

            .flow {
                @include time-tag(242px);
                font-size: 18px;

                &.f1 {
                    left: 198px;
                }

                &.f2 {
                    left: 492px;
                }
            }
        }

    }
</style>