{"version":3,"sources":["webpack:///./src/views/album/Album.vue","webpack:///src/views/album/Album.vue","webpack:///./src/views/album/Album.vue?4c44","webpack:///./src/views/album/Album.vue?6b3c","webpack:///./src/views/album/Album.vue?b444"],"names":["style","_vm","staticClass","_l","photoAlbumList","item","attrs","_c","_v","staticRenderFns","_self","components","Loading","created","listPhotoAlbums","metaInfo","meta","name","content","data","methods","getAlbum","then","res","computed","cover","$store","state","blogInfo","pageList","forEach","pageLabel","pageCover","component"],"mappings":"6KAA0HA,EAAOC,WAAU,IAAGA,EAAM,KAAmBC,UAAY,GAAgB,OAAM,QAAQD,GAAIE,WAAQC,QAAgB,CAAe,YAAU,S,MAAaC,EAAI,O,CAAIC,KAAM,e,YAAM,kB,CAAC,4CAAC,OAAM,SAAM,CAACJ,SAAyB,MAAK,CAASA,O,CAAiC,QAAMG,CAAU,0BAAG,CAACE,EAAG,QAAeL,YAAY,cAAgBI,MAAM,CAAC,IAAK,WAAwBC,EAAG,cAAM,CAACL,YAAY,gBAAa,MAAMM,CAAkCN,cAAY,OAAsD,CAAC,EAAE,MAAM,CACznB,0BACGO,QAAe,GAAG,EAAC,SAAW,SAAKR,YAAQ,cAAG,GAAI,GAACS,EAAMH,GAAE,sBAAC,IAAS,IAAC,IAA6B,EAAU,Y,IAACL,OAA2B,EAAK,EAAI,MAAM,GAC1J,gBAEF,YAAiBO,W,+ECyBjB,GACAE,WAAA,CACAC,gBAEAC,UACA,KAAAC,mBAEAC,SAAA,CACAC,KAAA,EACAC,KAAA,WACAC,QAAA,KACA,CACAD,KAAA,cACAC,QAAA,gDAGAC,KAAA,WACA,OACAf,eAAA,KAGAgB,QAAA,CACAN,kBACAO,iBAAAC,KAAAC,IACA,KAAAnB,eAAAmB,EAAAJ,SAIAK,SAAA,CACAC,QACA,IAAAA,EAAA,GAMA,OALA,KAAAC,OAAAC,MAAAC,SAAAC,SAAAC,QAAAzB,IACA,UAAAA,EAAA0B,YACAN,EAAApB,EAAA2B,aAGA,mBAAAP,EAAA,uCClE2X,I,wBCQvXQ,EAAY,eACd,EACA,EACAxB,GACA,EACA,KACA,WACA,MAIa,aAAAwB,E,oECnBf","file":"js/chunk-2234a0ee.0610f605.js","sourcesContent":["var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',[_c('Loading'),_c('div',{staticClass:\"banner\",style:(_vm.cover)},[_vm._m(0)]),_c('v-card',{staticClass:\"blog-container\"},[_c('v-row',_vm._l((_vm.photoAlbumList),function(item){return _c('v-col',{key:item.id,attrs:{\"md\":6}},[_c('div',{staticClass:\"album-item\"},[_c('v-img',{staticClass:\"album-cover\",attrs:{\"src\":item.cover}}),_c('router-link',{staticClass:\"album-wrapper\",attrs:{\"to\":'/albums/' + item.id}},[_c('div',{staticClass:\"album-name\"},[_vm._v(_vm._s(item.name))]),_c('div',{staticClass:\"album-desc\"},[_vm._v(_vm._s(item.info))])])],1)])}),1)],1)],1)\n}\nvar staticRenderFns = [function (){var _vm=this,_c=_vm._self._c;return _c('div',{staticClass:\"bgShade\"},[_c('h1',{staticClass:\"banner-title\"},[_vm._v(\"相册\")])])\n}]\n\nexport { render, staticRenderFns }","<template>\r\n  <div>\r\n    <Loading></Loading>\r\n    <!-- banner -->\r\n    <div class=\"banner\" :style=\"cover\">\r\n      <div class=\"bgShade\">\r\n        <h1 class=\"banner-title\">相册</h1>\r\n      </div>\r\n    </div>\r\n    <!-- 相册内容 -->\r\n    <v-card class=\"blog-container\">\r\n      <v-row>\r\n        <v-col :md=\"6\" v-for=\"item of photoAlbumList\" :key=\"item.id\">\r\n          <div class=\"album-item\">\r\n            <v-img class=\"album-cover\" :src=\"item.cover\" />\r\n            <router-link :to=\"'/albums/' + item.id\" class=\"album-wrapper\">\r\n              <div class=\"album-name\">{{ item.name }}</div>\r\n              <div class=\"album-desc\">{{ item.info }}</div>\r\n            </router-link>\r\n          </div>\r\n        </v-col>\r\n      </v-row>\r\n    </v-card>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\n  import { getAlbum } from \"../../api\";\r\n  import Loading from \"@/components/loading/loading\";\r\n\r\n  export default {\r\n    components: {\r\n      Loading\r\n    },\r\n    created() {\r\n      this.listPhotoAlbums();\r\n    },\r\n    metaInfo: {\r\n      meta: [{\r\n        name: \"keyWords\",\r\n        content: \" \"  //变量或字符串\r\n      }, {\r\n        name: \"description\",\r\n        content: \"一个专注于技术分享的博客平台,大家以共同学习,乐于分享,拥抱开源的价值观进行学习交流\"\r\n      }]\r\n    },\r\n    data: function() {\r\n      return {\r\n        photoAlbumList: []\r\n      };\r\n    },\r\n    methods: {\r\n      listPhotoAlbums() {\r\n        getAlbum().then(res => {\r\n          this.photoAlbumList = res.data;\r\n        });\r\n      }\r\n    },\r\n    computed: {\r\n      cover() {\r\n        var cover = \"\";\r\n        this.$store.state.blogInfo.pageList.forEach(item => {\r\n          if (item.pageLabel === \"album\") {\r\n            cover = item.pageCover;\r\n          }\r\n        });\r\n        return \"background: url(\" + cover + \") center center / cover no-repeat\";\r\n      }\r\n    }\r\n  };\r\n</script>\r\n\r\n<style scoped>\r\n    .album-item {\r\n        overflow: hidden;\r\n        position: relative;\r\n        cursor: pointer;\r\n        background: #000;\r\n        border-radius: 0.5rem !important;\r\n    }\r\n\r\n    .album-cover {\r\n        position: relative;\r\n        max-width: none;\r\n        width: calc(100% + 1.25rem);\r\n        height: 250px;\r\n        opacity: 0.8;\r\n        transition: opacity 0.35s, transform 0.35s;\r\n        transform: translate3d(-10px, 0, 0);\r\n        object-fit: cover;\r\n    }\r\n\r\n    .album-wrapper {\r\n        position: absolute;\r\n        top: 0;\r\n        bottom: 0;\r\n        left: 0;\r\n        right: 0;\r\n        padding: 1.8rem 2rem;\r\n        color: #fff !important;\r\n    }\r\n\r\n    .album-item:hover .album-cover {\r\n        transform: translate3d(0, 0, 0);\r\n        opacity: 0.4;\r\n    }\r\n\r\n    .album-item:hover .album-name:after {\r\n        transform: translate3d(0, 0, 0);\r\n    }\r\n\r\n    .album-item:hover .album-desc {\r\n        opacity: 1;\r\n        filter: none;\r\n        transform: translate3d(0, 0, 0);\r\n    }\r\n\r\n    .album-name {\r\n        font-weight: bold;\r\n        font-size: 1.25rem;\r\n        overflow: hidden;\r\n        padding: 0.7rem 0;\r\n        position: relative;\r\n    }\r\n\r\n    .album-name:after {\r\n        position: absolute;\r\n        bottom: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 2px;\r\n        background: #fff;\r\n        content: \"\";\r\n        transition: transform 0.35s;\r\n        transform: translate3d(-101%, 0, 0);\r\n    }\r\n\r\n    .album-desc {\r\n        margin: 0;\r\n        padding: 0.4rem 0 0;\r\n        line-height: 1.5;\r\n        opacity: 0;\r\n        transition: opacity 0.35s, transform 0.35s;\r\n        transform: translate3d(100%, 0, 0);\r\n    }\r\n</style>\r\n","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/index.js??vue-loader-options!./Album.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/index.js??vue-loader-options!./Album.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./Album.vue?vue&type=template&id=96b2603a&scoped=true\"\nimport script from \"./Album.vue?vue&type=script&lang=js\"\nexport * from \"./Album.vue?vue&type=script&lang=js\"\nimport style0 from \"./Album.vue?vue&type=style&index=0&id=96b2603a&prod&scoped=true&lang=css\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"96b2603a\",\n  null\n  \n)\n\nexport default component.exports","export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--7-oneOf-1-0!../../../node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--7-oneOf-1-2!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/index.js??vue-loader-options!./Album.vue?vue&type=style&index=0&id=96b2603a&prod&scoped=true&lang=css\""],"sourceRoot":""}