航班保障-详情静态页面

src/mocp/components/global-navbar/global-navbar.vue

@@ -39,9 +39,9 @@ const ps = defineProps({
 console.log(ps.navBarBackground)
 const getTitleStyle = computed(() => {
     return {
-        ...ps.titleStyle,
         color: '#4e5969',
-        fontSize: '34rpx'
+        fontSize: '34rpx',
+        ...ps.titleStyle
     }
 })
 </script>

src/pages/modules/mocp/panel/flight-support/components/DetailsSwiper.vue

+<template>
+    <swiper
+        class="swiperCont"
+        :current="2"
+        active-class="swiper-active"
+        previous-margin="20rpx"
+        next-margin="380rpx"
+        mode="round"
+    >
+        <swiper-item v-for="(item, index) in currentAllRelatedFlights" :key="index">
+            <view class="swiperItem">
+                <text class="title">{{ item.flightNo }}</text>
+            </view>
+        </swiper-item>
+    </swiper>
+
+
+</template>
+
+<script setup>
+import { ref, defineProps } from 'vue'
+import useFlightSupportStore from 'mocp/store/flight-support'
+import { storeToRefs } from 'pinia'
+import { cloneDeep } from 'lodash'
+
+const ps = defineProps({
+    currentAllRelatedFlights: {
+        type: Array,
+        default: []
+    }
+})
+
+const swiperChange = (e) => {
+    console.log(e, e.current)
+}
+</script>
+<style lang="scss" scoped>
+@import '../constants/details';
+</style>

src/pages/modules/mocp/panel/flight-support/constants/details.scss

 @charset "utf-8";
 @import "../constants/flightSupportList.scss";
 
+.margin-r-32 {
+    margin-right: 32rpx;
+}
+
 .flightSupportDetails {
     background-color: $mocp-primary-7;
+
+    .details_header {
+        padding: 32rpx 0 0 32rpx;
+        color: #fff;
+
+        .header_no {
+            font-size: 66rpx;
+
+        }
+
+        .header_info {
+            font-size: 12px;
+
+        }
+
+        .flight-no-image {
+            width: 64rpx;
+            height: 64rpx;
+            margin-right: 12rpx;
+        }
+    }
+
+    .details_swiper {
+        padding: 40rpx 0;
+
+        .swiperCont {
+            height: 168rpx;
+
+            .swiperItem {
+                height: 100%;
+                background-color: #fff;
+                margin-right: 20rpx;
+                padding: 0 10rpx;
+                border-radius: 6rpx;
+
+                .title {
+                    font-size: 32rpx;
+                }
+            }
+        }
+    }
+
+    .details_tab {
+        width: 100%;
+        padding: 40rpx 32rpx;
+        box-sizing: border-box;
+        background-color: $mocp-fill-1;
+        border-radius: 36rpx 36rpx 0 0;
+
+        .btn_lf {
+            margin-right: 46rpx;
+        }
+    }
+}
+
+.scrollItem {
+    width: 50vw;
+    height: 168rpx;
+    margin-right: 20rpx;
+    background-color: #f00;
+    border-radius: 10rpx;
+}
+
+.flight-single-swiper {
+    width: 100%;
+    height: 300rpx;
+    background-color: #ff0000;
 }
 

src/pages/modules/mocp/panel/flight-support/constants/flightSupportList.scss

@@ -4,6 +4,10 @@
     align-items: center;
 }
 
+.f-flex-1 {
+    flex: 1;
+}
+
 .text-center {
     text-align: center;
 }

src/pages/modules/mocp/panel/flight-support/flight-support-details/index.vue

 <template>
-    <global-page title="航班详情" navBarBackground="#0e42d2">
-        <view class="flightSupportDetails">航班详情</view>
+    <global-page title="航班详情" navBarBackground="#0e42d2" :titleStyle="{color: '#fff'}">
+        <view class="flightSupportDetails">
+            <view class="details_header">
+                <view class="header_no flex">
+                    <image
+                        class="flight-no-image"
+                        :src="HnaPic"
+                        mode="widthFix" />
+                    <text>B9999</text>
+                </view>
+
+                <view class="header_info flex">
+                    <text class="margin-r-32">机型：A999</text>
+                    <text>机位：HG99</text>
+                </view>
+            </view>
+
+            <view class="details_swiper">
+                <detailsSwiper :currentAllRelatedFlights />
+            </view>
+
+            <view class="details_tab flex">
+                <global-button
+                    v-for="(item, index) of tabList"
+                    :key="index"
+                    @click="tabCurrent = index"
+                    :type="tabCurrent == index ? 'primary' : 'info'" size="large" :radius="10"
+                    class="f-flex-1" :class="index == 0 ? 'btn_lf' : ''">
+                    {{ item }}--{{ tabCurrent }}
+                </global-button>
+            </view>
+
+        </view>
+
     </global-page>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, reactive } from 'vue'
 import { storeToRefs } from 'pinia'
 import { cloneDeep } from 'lodash'
 import useBaseStore from 'mocp/store/base'
 import useFlightSupportStore from 'mocp/store/flight-support'
 import { onUnload } from '@dcloudio/uni-app'
+import HnaPic from 'mocpStatic/image/air-company/hnhk.png'
+import detailsSwiper from '../components/DetailsSwiper.vue'
+
+const currentAllRelatedFlights = reactive([
+    {
+        flightNo: 'B5555'
+    },
+    {
+        flightNo: 'B6666'
+    },
+    {
+        flightNo: 'B7777'
+    },
+    {
+        flightNo: 'B8888'
+    },
+    {
+        flightNo: 'B9999'
+    }
+])
+const tabList = ['航班信息', '其他信息']
+const tabCurrent = ref(0)
 
 
 </script>