{"version":3,"sources":["webpack:///./src/views/List.vue?0a34","webpack:///src/views/List.vue","webpack:///./src/views/List.vue?b750","webpack:///./src/views/List.vue","webpack:///./src/views/List.vue?9a54"],"names":["render","_vm","this","_h","$createElement","_c","_self","ref","staticClass","list","length","_l","item","index","key","on","$event","handleDetail","style","link","_v","_s","last_name","first_name","loading","_e","attrs","staticRenderFns","component"],"mappings":"yHAAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACE,IAAI,UAAUC,YAAY,gBAAgB,CAAEP,EAAIQ,MAAQR,EAAIQ,KAAKC,OAAQT,EAAIU,GAAIV,EAAQ,MAAE,SAASW,EAAKC,GAAO,OAAOR,EAAG,MAAM,CAACS,IAAID,EAAML,YAAY,aAAaO,GAAG,CAAC,MAAQ,SAASC,GAAQ,OAAOf,EAAIgB,aAAaL,MAAS,CAACP,EAAG,MAAM,CAACG,YAAY,QAAQU,MAAM,CAAG,mBAAoB,OAASN,EAAKO,KAAO,OAASd,EAAG,MAAM,CAACG,YAAY,SAASH,EAAG,MAAM,CAACG,YAAY,QAAQ,CAACH,EAAG,OAAO,CAACJ,EAAImB,GAAGnB,EAAIoB,GAAGT,EAAKU,cAAcjB,EAAG,OAAO,CAACJ,EAAImB,GAAGnB,EAAIoB,GAAGT,EAAKW,sBAAuBtB,EAAIuB,QAAsEvB,EAAIwB,KAAjEpB,EAAG,WAAW,CAACqB,MAAM,CAAC,YAAc,0BAAmC,IACrpBC,EAAkB,GC4BtB,GACE,KAAF,aAEE,KAHF,WAII,MAAJ,CACM,KAAN,EACM,KAAN,GACM,SAAN,EACM,MAAN,EACM,OAAN,IAIE,MAAF,CACI,OADJ,WAEM,KAAN,OACM,KAAN,QACM,KAAN,SACM,KAAN,QACM,KAAN,uBAIE,QAAF,CACI,UADJ,SACA,GAAM,IAAN,OACM,IAAN,WAAM,CAEA,IAAN,2BACM,KAAN,WACM,KAAN,MACA,cACQ,IAAR,EACQ,KAAR,EACQ,MAAR,KAEA,kBACQ,EAAR,OACQ,IAAR,SACA,gBACU,EAAV,uBAGA,0BACU,EAAV,aAGA,oBAAQ,OAAR,kBAEI,aAzBJ,SAyBA,GACM,KAAN,cAAQ,KAAR,SAAQ,OAAR,CAAU,GAAV,SAGI,eA7BJ,SA6BA,KACM,OAAN,kDACA,kBAGA,kBACA,wCAKE,QA/DF,WAgEI,KAAJ,cAGE,QAnEF,WAmEI,IAAJ,OACI,OAAJ,oBAEM,IAAN,kBACA,kCACA,iBACA,wCACA,qCAEA,aACA,SAEQ,EAAR,QACQ,EAAR,wBC7G8U,I,wBCQ1UC,EAAY,eACd,EACA5B,EACA2B,GACA,EACA,KACA,WACA,MAIa,aAAAC,E,oECnBf","file":"js/chunk-50fe20e3.926cd547.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:\"listBox\",staticClass:\"list-wrapper\"},[(_vm.list && _vm.list.length)?_vm._l((_vm.list),function(item,index){return _c('div',{key:index,staticClass:\"model-list\",on:{\"click\":function($event){return _vm.handleDetail(item)}}},[_c('div',{staticClass:\"cover\",style:({ 'background-image': 'url(' + item.link + ')' })}),_c('div',{staticClass:\"mask\"}),_c('div',{staticClass:\"name\"},[_c('span',[_vm._v(_vm._s(item.last_name))]),_c('span',[_vm._v(_vm._s(item.first_name))])])])}):(!_vm.loading)?_c('el-empty',{attrs:{\"description\":\"No relevant content\"}}):_vm._e()],2)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","// WOMEN & MEN LIST\n<template>\n    <div class=\"list-wrapper\" ref=\"listBox\">\n        <template v-if=\"list && list.length\">\n            <div\n                class=\"model-list\"\n                @click=\"handleDetail(item)\"\n                v-for=\"(item, index) in list\"\n                :key=\"index\"\n            >\n                <div\n                    class=\"cover\"\n                    :style=\"{ 'background-image': 'url(' + item.link + ')' }\"\n                ></div>\n                <div class=\"mask\"></div>\n                <div class=\"name\">\n                    <span>{{ item.last_name }}</span>\n                    <span>{{ item.first_name }}</span>\n                </div>\n            </div>\n        </template>\n\n        <el-empty v-else-if=\"!loading\" description=\"No relevant content\">\n            <!-- <span slot=\"description\"></span> -->\n        </el-empty>\n    </div>\n</template>\n\n<script>\nexport default {\n    name: 'model-list',\n\n    data() {\n        return {\n            page: 1,\n            list: [],\n            loading: false,\n            lock: false,\n            isEnd: false,\n        };\n    },\n\n    watch: {\n        $route() {\n            this.page = 1;\n            this.lock = false;\n            this.isEnd = false;\n            this.list = [];\n            this.fetchList(this.page);\n        },\n    },\n\n    methods: {\n        fetchList(page) {\n            if (this.isEnd) return;\n\n            const sex = this.$route.query.sex || 1;\n            this.loading = true;\n            this.$http\n                .getModelList({\n                    sex,\n                    page,\n                    limit: 10,\n                })\n                .then((res) => {\n                    this.page = page;\n                    const data = res.list;\n                    if (data && data.length > 0) {\n                        this.list = this.list.concat(data);\n                    }\n\n                    if (res.count === this.list.length) {\n                        this.isEnd = true;\n                    }\n                })\n                .finally(() => (this.loading = false));\n        },\n        handleDetail(item) {\n            this.$router.push({ name: 'detail', params: { id: item.id } });\n        },\n\n        computedOffset(obj, prop) {\n            if (obj === document.body || obj.offsetParent === document.body) {\n                return parseInt(obj[prop], 10);\n            }\n            return (\n                parseInt(obj[prop], 10) +\n                this.computedOffset(obj.offsetParent, prop)\n            );\n        },\n    },\n\n    created() {\n        this.fetchList(1);\n    },\n\n    mounted() {\n        window.onscroll = () => {\n            // 瀑布流盒子\n            const box = this.$refs.listBox;\n            const top = this.computedOffset(box, 'offsetTop');\n            const height = box.offsetHeight;\n            const clientHeight = document.documentElement.clientHeight;\n            const scrollTop = document.documentElement.scrollTop;\n            if (\n                top + height < clientHeight + scrollTop + 50 &&\n                !this.lock\n            ) {\n                this.lock = true;\n                this.fetchList(this.page + 1);\n            }\n        };\n    },\n};\n</script>\n\n<style lang=\"scss\" scoped>\n.list-wrapper {\n    display: flex;\n    flex-wrap: wrap;\n    font-family: Didot-Bold, Didot;\n    align-items: center;\n    padding: 0 0 40px;\n    box-sizing: border-box;\n    @include media-mob {\n        padding: 0 20px 20px;\n    }\n}\n.model-list {\n    width: calc((100% - 120px) / 4);\n    margin: 40px 40px 0 0;\n    height: 550px;\n    border-radius: 20px;\n    overflow: hidden;\n    position: relative;\n    cursor: pointer;\n    @include media-mob {\n        width: calc((100% - 10px) / 2);\n        height: 240px;\n        margin: 10px 10px 0 0;\n        border-radius: 10px;\n        &:nth-child(2n) {\n            margin-right: 0;\n        }\n        &:first-child, &:nth-child(2) {\n            margin-top: 0;\n        }\n    }\n    &:nth-child(4n) {\n        margin-right: 0;\n    }\n    .cover {\n        width: 100%;\n        height: 100%;\n        background-size: cover;\n        background-position: center;\n    }\n    &:hover {\n        .mask, .name {\n            opacity: 0;\n        }\n    }\n    .mask {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        background: rgba(0, 0, 0, 0.3);\n        transition: all 0.4s;\n    }\n    .name {\n        width: 100%;\n        padding: 0 10px;\n        box-sizing: border-box;\n        position: absolute;\n        z-index: 2;\n        left: 50%;\n        transform: translateX(-50%);\n        bottom: 40px;\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        transition: all 0.2s;\n        @include media-mob {\n            bottom: 10px;\n        }\n        span {\n            font-size: 24px;\n            font-weight: 900;\n            color: #ffffff;\n            line-height: 28px;\n            letter-spacing: 3px;\n            @include media-mob {\n                font-size: 13px;\n                line-height: 14px;\n            }\n        }\n    }\n}\n</style>\n","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!./List.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!./List.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./List.vue?vue&type=template&id=9e2a5c38&scoped=true&\"\nimport script from \"./List.vue?vue&type=script&lang=js&\"\nexport * from \"./List.vue?vue&type=script&lang=js&\"\nimport style0 from \"./List.vue?vue&type=style&index=0&id=9e2a5c38&lang=scss&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  \"9e2a5c38\",\n  null\n  \n)\n\nexport default component.exports","export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../node_modules/css-loader/index.js??ref--8-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./List.vue?vue&type=style&index=0&id=9e2a5c38&lang=scss&scoped=true&\""],"sourceRoot":""}