<template>
    <div class="navigationPhoto">
        <div class="navigationPhoto-title">
            <span>{{title}}</span>
        </div>
        <div class="navigationPhoto-content">
            <div class="center-content-item" v-for="(item,index) in navigationPhotoContent" :key="index">
                <div class="center-content-item-image">
                    <el-image
                        class="center-image"
                        fit="fill"
                        :src="item.photo"
                    ></el-image>     
                </div>
                <div class="center-content-item-title">
                    <span>{{item.title}}</span>
                </div>                                        
            </div>                    
        </div>        
    </div>
</template>

<script>
    export default {
        name: 'navigationPhoto',
        props: {
            title: {
                type: String,
                default: '标题栏'
            },
            navigationPhotoContent: {
                type: Array,
                default: () => [],
            },
        },
        methods: {
        }
    }
</script>

<style lang="scss" scoped>
    .navigationPhoto {
        width: 100%;
        text-align: left;
        cursor: default;
       .navigationPhoto-title {
         width: 100%;
         padding: 10px;
         margin-bottom: 20px;
         box-sizing: border-box;
         display: flex;
         justify-content: space-between;
         align-items: center;
         font-size: $font-common-second-size;
         color: $blue-color;
         border-bottom: 2px dashed $color-border-first;
         .more {
            font-size: 20px;
         }
       }
       .navigationPhoto-content {
          width: 100%;
          .center-content-item {
                width: 100%;;
                margin-bottom: 20px;
                display: flex;
                flex-direction: column;
                align-items: center;
                .center-content-item-image {
                    width: 960px;
                    height: 960px;
                    margin-top: 20px;
                    .center-image {
                        width: 960px;
                        height: 960px;                                    
                    }
                }
                .center-content-item-title {
                    margin-top: 10px;
                    font-size: $font-normal-size;
                    color: $theme-color-blue;
                }
           }
       }
    }
</style>