{"version":3,"sources":["webpack:///./src/components/Ship/ShipExperience.vue?26b0","webpack:///src/components/Ship/ShipExperience.vue","webpack:///./src/components/Ship/ShipExperience.vue?3839","webpack:///./src/components/Ship/ShipExperience.vue","webpack:///./src/components/Ship/ShipExperience.vue?dfa7"],"names":["render","_vm","this","_h","$createElement","_c","_self","ref","staticClass","_l","category","i","directives","name","rawName","value","currentCategory","expression","key","attrs","bannerImageUrl","contentTitle","_v","_s","contentSubTitle","class","active","on","$event","onCategoryClick","getCategoryIcon","getItemList","getSubCategories","showExperiencePopup","isMenuFixed","scrollToStart","targetItem","ships","isShowExperiencePopup","closeExperiencePopup","staticRenderFns","component"],"mappings":"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","file":"js/chunk-6214af70.6aac1172.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:\"experiencePart\",staticClass:\"shipDetail-pcpCon\"},[_c('div',{staticClass:\"shipDetail-pcpContainer\"},[_c('div',{ref:\"experienceBanner\",staticClass:\"shipDetail-pcpMenuBg\"},_vm._l((_vm.cruiseRoyalExperienceItems),function(category,i){return _c('div',{directives:[{name:\"show\",rawName:\"v-show\",value:(_vm.currentCategory==category.category),expression:\"currentCategory==category.category\"}],key:('categoryBanner_' + i),staticClass:\"pcpMenuBg-img\"},[_c('img',{attrs:{\"src\":category.bannerImageUrl,\"alt\":category.contentTitle}}),_c('div',{staticClass:\"pcpMenuBg-imgTxt\"},[_c('div',{staticClass:\"pcpMenuBg-imgTxtB\"},[_vm._v(_vm._s(category.contentTitle))]),_c('div',[_vm._v(_vm._s(category.contentSubTitle))])]),_c('div',{staticClass:\"pcpMenuBg-modelBg\"})])}),0),_c('div',{staticClass:\"shipDetail-pcpMenuList\"},_vm._l((_vm.cruiseRoyalExperienceItems),function(category,i){return _c('div',{key:('categoryMenu_' + i),staticClass:\"shipDetail-pcpMenu\",class:{ active: _vm.currentCategory==category.category},on:{\"click\":function($event){return _vm.onCategoryClick(category.category)}}},[_c('div',{staticClass:\"pcpMenu-itemPic\"},[_c('img',{attrs:{\"src\":_vm.getCategoryIcon(category.category)[0],\"alt\":category.category}})]),_c('div',{staticClass:\"pcpMenu-itemCon\"},[_c('div',{staticClass:\"pcpMenu-itemIcon\"},[_c('img',{attrs:{\"src\":_vm.getCategoryIcon(category.category)[1],\"alt\":category.category}})]),_c('div',{staticClass:\"pcpMenu-itemIconActive\"},[_c('img',{attrs:{\"src\":_vm.getCategoryIcon(category.category)[2],\"alt\":category.category}})]),_c('p',{staticClass:\"pcpMenu-itemTxt\"},[_vm._v(_vm._s(category.category))])])])}),0),_vm._l((_vm.categories),function(category,i){return _c('ShipExperienceGroup',{directives:[{name:\"show\",rawName:\"v-show\",value:(_vm.currentCategory==category),expression:\"currentCategory==category\"}],key:('itemGroup_' + i),attrs:{\"items\":_vm.getItemList(category),\"subCategories\":_vm.getSubCategories(category),\"category\":category,\"onItemClick\":_vm.showExperiencePopup,\"isMenuFixed\":_vm.isMenuFixed,\"scrollToStart\":_vm.scrollToStart}})}),_c('ShipExperiencePopup',{attrs:{\"item\":_vm.targetItem,\"ships\":_vm.ships,\"isShow\":_vm.isShowExperiencePopup,\"onClose\":_vm.closeExperiencePopup}})],2),_c('div',{directives:[{name:\"show\",rawName:\"v-show\",value:(_vm.isMenuFixed),expression:\"isMenuFixed\"}],staticClass:\"shipDetail-topMenu\"},[_c('div',{staticClass:\"topMenu-content\"},[_c('ul',_vm._l((_vm.cruiseRoyalExperienceItems),function(category,i){return _c('li',{key:('categoryFixedMenu_' + i),class:{ active: _vm.currentCategory==category.category},on:{\"click\":function($event){return _vm.onCategoryClick(category.category)}}},[_c('div',{staticClass:\"menuIcon\"},[_c('img',{staticClass:\"imgT\",attrs:{\"src\":_vm.getCategoryIcon(category.category)[1],\"alt\":category.category}}),_c('img',{staticClass:\"imgF\",attrs:{\"src\":_vm.getCategoryIcon(category.category)[2],\"alt\":category.category}})]),_c('span',[_vm._v(_vm._s(category.category))])])}),0)])])])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n    <div class=\"shipDetail-pcpCon\" ref=\"experiencePart\">\r\n        <div class=\"shipDetail-pcpContainer\">\r\n            <div class=\"shipDetail-pcpMenuBg\" ref=\"experienceBanner\">\r\n                <div class=\"pcpMenuBg-img\" v-for=\"(category, i) in cruiseRoyalExperienceItems\"\r\n                :key=\"('categoryBanner_' + i)\" v-show=\"currentCategory==category.category\"\r\n                >\r\n                    <img :src=\"category.bannerImageUrl\" :alt=\"category.contentTitle\">\r\n                    <div class=\"pcpMenuBg-imgTxt\">\r\n                        <div class=\"pcpMenuBg-imgTxtB\">{{category.contentTitle}}</div>\r\n                        <div>{{category.contentSubTitle}}</div>\r\n                    </div>\r\n                    <div class=\"pcpMenuBg-modelBg\"></div>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"shipDetail-pcpMenuList\">\r\n                <div class=\"shipDetail-pcpMenu\" v-for=\"(category, i) in cruiseRoyalExperienceItems\"\r\n                :key=\"('categoryMenu_' + i)\" @click=\"onCategoryClick(category.category)\"\r\n                :class=\"{ active: currentCategory==category.category}\">\r\n                    <div class=\"pcpMenu-itemPic\">\r\n                        <img :src=\"getCategoryIcon(category.category)[0]\" :alt=\"category.category\">\r\n                    </div>\r\n                    <div class=\"pcpMenu-itemCon\">\r\n                        <div class=\"pcpMenu-itemIcon\">\r\n                            <img :src=\"getCategoryIcon(category.category)[1]\" :alt=\"category.category\">\r\n                        </div>\r\n                        <div class=\"pcpMenu-itemIconActive\">\r\n                            <img :src=\"getCategoryIcon(category.category)[2]\" :alt=\"category.category\">\r\n                        </div>\r\n                        <p class=\"pcpMenu-itemTxt\">{{category.category}}</p>\r\n                    </div>\r\n                </div>\r\n               \r\n            </div>\r\n\r\n            <ShipExperienceGroup \r\n                v-for=\"(category, i) in categories\" :key=\"('itemGroup_' + i)\"\r\n                v-show=\"currentCategory==category\"\r\n                :items=\"getItemList(category)\"\r\n                :subCategories=\"getSubCategories(category)\"\r\n                :category=\"category\"\r\n                :onItemClick=\"showExperiencePopup\"\r\n                :isMenuFixed=\"isMenuFixed\"\r\n                :scrollToStart=\"scrollToStart\"\r\n            />\r\n\r\n            <ShipExperiencePopup \r\n                :item=\"targetItem\"\r\n                :ships=\"ships\"\r\n                :isShow=\"isShowExperiencePopup\"\r\n                :onClose=\"closeExperiencePopup\"\r\n            />\r\n\r\n        </div>\r\n\r\n        <div class=\"shipDetail-topMenu\" v-show=\"isMenuFixed\">\r\n            <div class=\"topMenu-content\">\r\n                <ul>\r\n                    <li v-for=\"(category, i) in cruiseRoyalExperienceItems\"\r\n                    :key=\"('categoryFixedMenu_' + i)\" @click=\"onCategoryClick(category.category)\"\r\n                    :class=\"{ active: currentCategory==category.category}\">\r\n                        <div class=\"menuIcon\">\r\n                            <img class=\"imgT\" :src=\"getCategoryIcon(category.category)[1]\" :alt=\"category.category\">\r\n                            <img class=\"imgF\" :src=\"getCategoryIcon(category.category)[2]\" :alt=\"category.category\">\r\n                        </div>\r\n                        <span>{{category.category}}</span>\r\n                    </li>\r\n                </ul>\r\n            </div>\r\n        </div>\r\n\r\n    </div>\r\n</template>\r\n\r\n<script>\r\nconst ShipExperienceGroup = () => import('@/components/Ship/ShipExperienceGroup')\r\nconst ShipExperiencePopup = () => import('@/components/Ship/ShipExperiencePopup')\r\nexport default {\r\n    name: \"ShipExperience\",\r\n    components: {\r\n        ShipExperienceGroup,\r\n        ShipExperiencePopup\r\n    },\r\n    props: {\r\n        productModel: {\r\n            type: Array,\r\n        },\r\n        cruiseRoyalExperienceItems: {\r\n            type: Array,\r\n        },\r\n        itemViewModels: {\r\n            type: Array\r\n        },\r\n        ships: {\r\n            type: Array\r\n        }\r\n    },\r\n    data () {\r\n        return {\r\n            currentCategory: \"\",\r\n            // 点击选中的item\r\n            targetItem: {},\r\n            isShowExperiencePopup: false,\r\n            isMenuFixed: false\r\n        }\r\n    },\r\n    beforeMount () {\r\n        window.addEventListener(\"scroll\", this.menuFixedHandler)\r\n        window.addEventListener('hashchange', this.initCurrentCategory)\r\n    },\r\n    beforeDestroy () {\r\n        window.removeEventListener(\"scroll\", this.menuFixedHandler)\r\n        window.removeEventListener(\"hashchange\", this.initCurrentCategory)\r\n    },\r\n    methods: {\r\n        getItemList (category) {\r\n            return this.productModel.filter(r=>r.category==category)\r\n        },\r\n        getBanner (category) {\r\n            return this.cruiseRoyalExperienceItems.find(r=>r.category == category) || {}\r\n        },\r\n        getSubCategories (category) {\r\n            switch (category) {\r\n                case '超凡美食': return [\"免费餐厅\", \"收费餐厅\", \"酒吧\", \"其他餐饮服务\"]\r\n                case '超凡客房': return [\"套房\", \"阳台房\", \"海景房\", \"内舱房\"]\r\n                case '超凡活动': return [\"招牌演出\", \"休闲娱乐\", \"激情运动\", \"互动课程\"]\r\n                case '超凡童趣': return [\"海上历奇\", \"梦工厂\", \"儿童游乐\"]\r\n                default: return ['']\r\n            }\r\n        },\r\n        getCategoryIcon (category) {\r\n            switch (category) {\r\n                case '超凡美食': \r\n                    return ['https://resource.rcclchina.com.cn/rcclQN/image/shadowimg1.png'\r\n                    ,'https://resource.rcclchina.com.cn/shipDetail/Food.png'\r\n                    , 'https://resource.rcclchina.com.cn/shipDetail/FoodHover.png']\r\n                case '超凡客房': \r\n                    return ['https://resource.rcclchina.com.cn/rcclQN/image/shadowimg2.png'\r\n                    , 'https://resource.rcclchina.com.cn/shipDetail/guestRoom.png'\r\n                    , 'https://resource.rcclchina.com.cn/shipDetail/guestRoomHover.png']\r\n                case '超凡活动':\r\n                    return ['https://resource.rcclchina.com.cn/QN%E7%BE%8E%E9%A3%9F/%E8%B6%85%E5%87%A1%E6%B4%BB%E5%8A%A8%20(1).jpg'\r\n                    , 'https://resource.rcclchina.com.cn/shipDetail/entertainments.png'\r\n                    , 'https://resource.rcclchina.com.cn/shipDetail/entertainmentsHover.png']\r\n                case '超凡购物':\r\n                    return ['https://resource.rcclchina.com.cn/QN%E7%BE%8E%E9%A3%9F/%E8%B6%85%E5%87%A1%E8%B4%AD%E7%89%A9%20(1).jpg'\r\n                    , 'https://resource.rcclchina.com.cn/shipDetail/shopping.png'\r\n                    , 'https://resource.rcclchina.com.cn/shipDetail/shoppingHover.png']\r\n                case '超凡童趣':\r\n                    return ['https://resource.rcclchina.com.cn/rcclQN/image/shadowimg7.png'\r\n                    , 'https://resource.rcclchina.com.cn/shipDetail/childimg.png'\r\n                    , 'https://resource.rcclchina.com.cn/shipDetail/childimgHover.png']\r\n                case '超凡设施':\r\n                    return ['https://resource.rcclchina.com.cn/rcclQN/image/facitilies143x273.png'\r\n                    , 'https://resource.rcclchina.com.cn/rcclQN/image/facitiliesimg3.png'\r\n                    , 'https://resource.rcclchina.com.cn/rcclQN/image/facitiliesimg4.png']\r\n                default:\r\n                    return ['', '', '']\r\n            }\r\n        },\r\n        showExperiencePopup (item) {\r\n            const itemViewModel = this.itemViewModels.find(r=>r.id == item.id)\r\n            if (!itemViewModel) {\r\n                return\r\n            }\r\n            this.targetItem = itemViewModel\r\n            this.isShowExperiencePopup = true\r\n        },\r\n        closeExperiencePopup () {\r\n            this.targetItem = {}\r\n            this.isShowExperiencePopup = false\r\n        },\r\n        menuFixedHandler () {\r\n            const scrollTop = window.scrollY\r\n            const experienceBanner = this.$refs.experienceBanner\r\n            const experiencePart = this.$refs.experiencePart\r\n            const targetTop = experienceBanner.offsetTop + experienceBanner.offsetHeight + experiencePart.offsetTop \r\n            if (scrollTop >= targetTop) {\r\n                this.isMenuFixed = true\r\n            } else {\r\n                this.isMenuFixed = false\r\n            }\r\n        },\r\n        onCategoryClick (category) {\r\n            this.currentCategory = category\r\n            this.scrollToStart()\r\n        },\r\n        //页面滚动至Item开始的地方\r\n        scrollToStart () {\r\n            const scrollTop = window.scrollY\r\n            const experienceBanner = this.$refs.experienceBanner\r\n            const experiencePart = this.$refs.experiencePart\r\n            const targetTop = experienceBanner.offsetTop + experiencePart.offsetTop\r\n            if (scrollTop > targetTop) {\r\n                window.scroll({\r\n                    top: targetTop,\r\n                    behavior: \"smooth\"\r\n                })\r\n            }\r\n        },\r\n        initCurrentCategory () {\r\n            if (this.cruiseRoyalExperienceItems.length > 0) {\r\n                let menuIndex = 0\r\n                let urlHash = this.$router.currentRoute.hash + \"\"\r\n                if (urlHash && urlHash.length > 0) {\r\n                    urlHash = urlHash.toLowerCase()\r\n                    switch (urlHash) {\r\n                        case \"#food\":\r\n                            menuIndex = 0; break;\r\n                        case \"#room\":\r\n                            menuIndex = 1; break;\r\n                        case \"#activity\":\r\n                            menuIndex = 2; break;\r\n                        case \"#shopping\":\r\n                            menuIndex = 3; break;\r\n                        case \"#kid\":\r\n                            menuIndex = 4; break;\r\n                        case \"#entertainment\":\r\n                            menuIndex = 5; break;\r\n                        default:\r\n                            break;\r\n                    }\r\n                }\r\n                if (menuIndex < this.cruiseRoyalExperienceItems.length) {\r\n                    this.currentCategory = this.cruiseRoyalExperienceItems[menuIndex].category\r\n                } else {\r\n                    this.currentCategory = this.cruiseRoyalExperienceItems[0].category\r\n                }\r\n            }\r\n        }\r\n    },\r\n    computed: {\r\n        categories () {\r\n            return this.cruiseRoyalExperienceItems.map(r=>r.category)\r\n        }\r\n    },\r\n    watch: {\r\n        cruiseRoyalExperienceItems () {\r\n            this.initCurrentCategory()\r\n        }\r\n    }\r\n}\r\n</script>\r\n\r\n<style lang=\"less\" scoped>\r\nimg {\r\n    width: 100%;\r\n}\r\n.shipDetail-pcpCon {\r\n    background-color: #fff;\r\n    padding-bottom: 15px;\r\n    .shipDetail-pcpContainer {\r\n        position: relative;\r\n    }\r\n    .shipDetail-pcpMenuBg {\r\n        width: 100%;\r\n        height: 188px;\r\n        overflow: hidden;\r\n        .pcpMenuBg-img {\r\n            position: relative;\r\n            width: 100%;\r\n            height: 100%;\r\n            img {\r\n                width: 112%;\r\n            }\r\n        }\r\n        .pcpMenuBg-imgTxt {\r\n            position: absolute;\r\n            top: 40px;\r\n            left: 50%;\r\n            width: 352px;\r\n            text-align: center;\r\n            margin-left: -176px;\r\n            font-size: 12px;\r\n            color: #fff;\r\n            letter-spacing: 1px;\r\n            z-index: 33;\r\n            .pcpMenuBg-imgTxtB {\r\n                font-size: 15px;\r\n                margin-bottom: 2px;\r\n            }\r\n        }\r\n        .pcpMenuBg-modelBg {\r\n            width: 100%;\r\n            height: 100%;\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            background-color: rgba(0,0,0,.3);\r\n        }\r\n    }\r\n\r\n    .shipDetail-pcpMenuList {\r\n        overflow: hidden;\r\n        padding: 0 3.2%;\r\n        margin-top: -92px;\r\n        text-align: center;\r\n        display: flex;\r\n        justify-content: center;\r\n        .shipDetail-pcpMenu {\r\n            width: 15.1%;\r\n            position: relative;\r\n            float: left;\r\n            .pcpMenu-itemPic {\r\n                width: 100%;\r\n                height: 120px;\r\n                overflow: hidden;\r\n                img {\r\n                    width: 140%;\r\n                }\r\n            }\r\n            .pcpMenu-itemCon {\r\n                background-color: rgba(0,0,0,.7);\r\n                position: absolute;\r\n                top: 0;\r\n                left: 0;\r\n                width: 100%;\r\n                height: 120px;\r\n                .pcpMenu-itemIcon {\r\n                    margin: 0 auto;\r\n                    margin-top: 35px;\r\n                    width: 34.286%;\r\n                    height: 17px;\r\n                }\r\n                .pcpMenu-itemIconActive {\r\n                    margin: 0 auto;\r\n                    margin-top: 35px;\r\n                    width: 20.455%;\r\n                    height: 17px;\r\n                    display: none;\r\n                }\r\n                .pcpMenu-itemTxt {\r\n                    margin-top: 9px;\r\n                    font-size: 12px;\r\n                    color: #fff;\r\n                    text-align: center;\r\n                    transform: scale(.95);\r\n                    -webkit-transform: scale(.95);\r\n                    -moz-transform: scale(.95);\r\n                    -o-transform: scale(.95);\r\n                }\r\n            }\r\n        }\r\n        .shipDetail-pcpMenu.active {\r\n            width: 24.333%;\r\n            float: left;\r\n            .pcpMenu-itemCon {\r\n                background-color: rgba(240,175,17,.9);\r\n                .pcpMenu-itemIcon {\r\n                    display: none;\r\n                }\r\n                .pcpMenu-itemIconActive {\r\n                    display: block;\r\n                }\r\n                .pcpMenu-itemTxt {\r\n                    font-size: 13px;\r\n                    color: #000;\r\n                    font-weight: bolder;\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    .shipDetail-topMenu {\r\n        position: fixed;\r\n        width: 100%;\r\n        top: 50px;\r\n        z-index: 20;\r\n        .topMenu-content {\r\n            background: #f2f2ef;\r\n            text-align: center;\r\n            ul {\r\n                width: 100%;\r\n                overflow: hidden;\r\n                li {\r\n                    font-size: 12px;\r\n                    width: 55px;\r\n                    height: 53px;\r\n                    float: left;\r\n                    .menuIcon {\r\n                        width: 100%;\r\n                        height: 24px;\r\n                        overflow: hidden;\r\n                        margin-top: 3px;\r\n                        margin-bottom: 3px;\r\n                    }\r\n                    span {\r\n                        transform: scale(.9);\r\n                        -webkit-transform: scale(.9);\r\n                        -moz-transform: scale(.9);\r\n                        -o-transform: scale(.9);\r\n                    }\r\n                    img {\r\n                        width: 19px;\r\n                        margin: 0 auto;\r\n                        vertical-align: -webkit-baseline-middle;\r\n                    }\r\n                    .imgF {\r\n                        display: none;\r\n                    }\r\n                    .imgT {\r\n                        display: inline-block;\r\n                    }\r\n                }\r\n                li.active {\r\n                    width: 99px;\r\n                    background: #f1af12;\r\n                    font-size: 13px;\r\n                    font-weight: 600;\r\n                    .menuIcon {\r\n                        margin-bottom: 1px;\r\n                    }\r\n                    span {\r\n                        transform: scale(1);\r\n                        -webkit-transform: scale(1);\r\n                        -moz-transform: scale(1);\r\n                        -o-transform: scale(1);\r\n                    }\r\n                    .imgF {\r\n                        display: inline-block;\r\n                    }\r\n                    .imgT {\r\n                        display: none;\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    }\r\n}\r\n</style>","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ShipExperience.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ShipExperience.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./ShipExperience.vue?vue&type=template&id=381eab05&scoped=true&\"\nimport script from \"./ShipExperience.vue?vue&type=script&lang=js&\"\nexport * from \"./ShipExperience.vue?vue&type=script&lang=js&\"\nimport style0 from \"./ShipExperience.vue?vue&type=style&index=0&id=381eab05&lang=less&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"381eab05\",\n  null\n  \n)\n\nexport default component.exports","import mod from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--10-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--10-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--10-oneOf-1-2!../../../node_modules/less-loader/dist/cjs.js??ref--10-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ShipExperience.vue?vue&type=style&index=0&id=381eab05&lang=less&scoped=true&\"; export default mod; export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--10-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--10-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--10-oneOf-1-2!../../../node_modules/less-loader/dist/cjs.js??ref--10-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ShipExperience.vue?vue&type=style&index=0&id=381eab05&lang=less&scoped=true&\""],"sourceRoot":""}