{"version":3,"sources":["webpack:///./src/views/BrandPage.vue?3ef1","webpack:///./src/views/BrandPage.vue?f2bd","webpack:///src/views/BrandPage.vue","webpack:///./src/views/BrandPage.vue?8108","webpack:///./src/views/BrandPage.vue"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","menuPage","_v","_s","brandDesc","title","desc","attrs","_l","item","key","id","on","$event","changRoute","route","value","imgUrl","_e","subtitle","staticRenderFns","component"],"mappings":"gHAAA,W,yCCAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACE,YAAY,cAAc,CAAmB,aAAjBN,EAAIO,SAAyBH,EAAG,MAAM,CAACE,YAAY,mBAAmB,CAACF,EAAG,MAAM,CAACE,YAAY,cAAc,CAACF,EAAG,MAAM,CAACE,YAAY,SAAS,CAACN,EAAIQ,GAAGR,EAAIS,GAAGT,EAAIU,UAAUC,UAAUP,EAAG,MAAM,CAACE,YAAY,SAAS,CAACN,EAAIQ,GAAG,IAAIR,EAAIS,GAAGT,EAAIU,UAAUE,MAAM,KAAKR,EAAG,IAAI,CAACE,YAAY,QAAQO,MAAM,CAAC,KAAO,wBAAwB,OAAS,WAAW,CAACb,EAAIQ,GAAG,eAAeJ,EAAG,MAAM,CAACE,YAAY,cAAcN,EAAIc,GAAId,EAAa,WAAE,SAASe,GAAM,OAAOX,EAAG,MAAM,CAACY,IAAID,EAAKE,GAAGX,YAAY,aAAaY,GAAG,CAAC,MAAQ,SAASC,GAAQ,OAAOnB,EAAIoB,WAAWL,EAAKM,UAAU,CAACjB,EAAG,MAAM,CAACE,YAAY,QAAQ,CAACN,EAAIQ,GAAGR,EAAIS,GAAGM,EAAKO,UAAUlB,EAAG,MAAM,CAACS,MAAM,CAAC,IAAME,EAAKQ,OAAO,IAAMR,EAAKO,cAAa,KAAKtB,EAAIwB,KAAuB,UAAjBxB,EAAIO,SAAsBH,EAAG,MAAM,CAACE,YAAY,cAAc,CAACF,EAAG,MAAM,CAACE,YAAY,SAAS,CAACN,EAAIQ,GAAGR,EAAIS,GAAGT,EAAIU,UAAUC,UAAUP,EAAG,MAAM,CAACE,YAAY,UAAU,CAACN,EAAIQ,GAAGR,EAAIS,GAAGT,EAAIU,UAAUe,aAAarB,EAAG,MAAM,CAACE,YAAY,cAAcN,EAAIc,GAAId,EAAa,WAAE,SAASe,GAAM,OAAOX,EAAG,MAAM,CAACY,IAAID,EAAKE,GAAGX,YAAY,aAAaY,GAAG,CAAC,MAAQ,SAASC,GAAQ,OAAOnB,EAAIoB,WAAWL,EAAKM,UAAU,CAACjB,EAAG,MAAM,CAACE,YAAY,QAAQ,CAACN,EAAIQ,GAAGR,EAAIS,GAAGM,EAAKO,eAAc,KAAKtB,EAAIwB,QAChxCE,EAAkB,GCqCtB,GACE,KAAF,YACE,KAFF,WAGI,MAAJ,CAEM,UAAN,EACM,SAAN,WACM,UAAN,GACM,UAAN,KAGE,QAXF,WAaI,KAAJ,eACI,KAAJ,eACI,KAAJ,cAEE,QAjBF,WAkBI,OAAJ,wCAEE,QAAF,CACI,aADJ,WAEM,KAAN,gCAII,aANJ,WAMM,IAAN,OACM,KAAN,8BACQ,OAAR,CACU,UAAV,kBAGA,kBACQ,EAAR,mCACQ,EAAR,sCAGI,WAjBJ,SAiBA,GACM,KAAN,mBAEI,WApBJ,WAqBM,IAAN,uCAEQ,KAAR,SADA,MACA,WAEA,SAGI,OA5BJ,WA6BM,KAAN,gBCvFmV,I,wBCQ/UC,EAAY,eACd,EACA5B,EACA2B,GACA,EACA,KACA,WACA,MAIa,aAAAC,E","file":"js/chunk-5c6c312e.f71482da.js","sourcesContent":["export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../node_modules/css-loader/dist/cjs.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!./BrandPage.vue?vue&type=style&index=0&id=09fb4204&lang=scss&scoped=true&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"brand-page\"},[(_vm.menuPage === 'computer')?_c('div',{staticClass:\"brand-selection\"},[_c('div',{staticClass:\"desc-title\"},[_c('div',{staticClass:\"title\"},[_vm._v(_vm._s(_vm.brandDesc.title))]),_c('div',{staticClass:\"upzip\"},[_vm._v(\" \"+_vm._s(_vm.brandDesc.desc)+\" \"),_c('a',{staticClass:\"upzip\",attrs:{\"href\":\"https://yasuo.360.cn/\",\"target\":\"_blank\"}},[_vm._v(\"360压缩\")])])]),_c('div',{staticClass:\"brand-list\"},_vm._l((_vm.brandList),function(item){return _c('div',{key:item.id,staticClass:\"list-child\",on:{\"click\":function($event){return _vm.changRoute(item.route)}}},[_c('div',{staticClass:\"desc\"},[_vm._v(_vm._s(item.value))]),_c('img',{attrs:{\"src\":item.imgUrl,\"alt\":item.value}})])}),0)]):_vm._e(),(_vm.menuPage === 'phone')?_c('div',{staticClass:\"phone-page\"},[_c('div',{staticClass:\"title\"},[_vm._v(_vm._s(_vm.brandDesc.title))]),_c('div',{staticClass:\"remind\"},[_vm._v(_vm._s(_vm.brandDesc.subtitle))]),_c('div',{staticClass:\"brand-list\"},_vm._l((_vm.brandList),function(item){return _c('div',{key:item.id,staticClass:\"list-child\",on:{\"click\":function($event){return _vm.changRoute(item.route)}}},[_c('div',{staticClass:\"desc\"},[_vm._v(_vm._s(item.value))])])}),0)]):_vm._e()])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n    <div class=\"brand-page\">\r\n        <!-- PC端显示 -->\r\n        <div class=\"brand-selection\" v-if=\"menuPage === 'computer'\">\r\n            <div class=\"desc-title\">\r\n                <div class=\"title\">{{brandDesc.title}}</div>\r\n                <div class=\"upzip\">\r\n                    {{brandDesc.desc}}\r\n                    <a class=\"upzip\" href=\"https://yasuo.360.cn/\" target=\"_blank\">360压缩</a>\r\n                </div>\r\n            </div>\r\n            <div class=\"brand-list\">\r\n                <div class=\"list-child\"\r\n                    v-for=\"item in brandList\"\r\n                    :key=\"item.id\"\r\n                    @click=\"changRoute(item.route)\">\r\n                    <div class=\"desc\">{{item.value}}</div>\r\n                    <img :src=\"item.imgUrl\" :alt=\"item.value\"/>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <!-- 移动端显示 -->\r\n        <div class=\"phone-page\" v-if=\"menuPage === 'phone'\">\r\n            <div class=\"title\">{{brandDesc.title}}</div>\r\n            <div class=\"remind\">{{brandDesc.subtitle}}</div>\r\n            <div class=\"brand-list\">\r\n                <div class=\"list-child\"\r\n                    v-for=\"item in brandList\"\r\n                    :key=\"item.id\"\r\n                    @click=\"changRoute(item.route)\">\r\n                    <div class=\"desc\">{{item.value}}</div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</template>\r\n\r\n<script>\r\nexport default  {\r\n    name: 'BrandPage',\r\n    data () {\r\n        return {\r\n            // 时间戳\r\n            timeStamp: 0,\r\n            menuPage: 'computer',\r\n            brandDesc: {},\r\n            brandList: []\r\n        }\r\n    },\r\n    created () {\r\n        // 获取时间戳\r\n        this.getTimeStamp()\r\n        this.requestBrand()\r\n        this.changeMenu()\r\n    },\r\n    mounted () {\r\n        window.addEventListener('resize', this.resize)\r\n    },\r\n    methods: {\r\n        getTimeStamp () {\r\n            this.timeStamp = new Date().getTime()\r\n            // console.log(this.timeStamp)\r\n        },\r\n        // 获取静态json文件数据\r\n        requestBrand () {\r\n            this.$http.get('/mock/brand.json', {\r\n                params: {\r\n                    timeStamp: this.timeStamp\r\n                }\r\n            })\r\n                .then((res) => {\r\n                    this.brandList = res.data.data.brandImgList\r\n                    this.brandDesc = res.data.data.tooltipInfo\r\n                })\r\n        },\r\n        changRoute (val) {\r\n            this.$emit('change', val)\r\n        },\r\n        changeMenu () {\r\n            var screenwidth = document.documentElement.clientWidth\r\n            if (screenwidth > 900) {\r\n                this.menuPage = 'computer'\r\n            } else {\r\n                this.menuPage = 'phone'\r\n            }\r\n        },\r\n        resize () {\r\n            this.changeMenu()\r\n        }\r\n    }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.brand-page {\r\n    width: 100%;\r\n    background: #409EFF;\r\n    // height: calc(100vh - 61px);\r\n    .brand-selection {\r\n        display: flex;\r\n        flex-direction: column;\r\n        justify-content: center;\r\n        align-items: center;\r\n        margin: 0 auto;\r\n        width: 960px;\r\n        height: 100%;\r\n        .desc-title {\r\n            display: flex;\r\n            flex-direction: column;\r\n            justify-content: center;\r\n            align-items: center;\r\n            .title {\r\n                height: 50px;\r\n                line-height: 50px;\r\n                color: #fff;\r\n                font-size: 55px;\r\n                font-weight: bold;\r\n                letter-spacing: 5px;\r\n            }\r\n            .upzip {\r\n                margin-top: 12px;\r\n                height: 20px;\r\n                line-height: 20px;\r\n                color: #fff;\r\n                font-size: 16px;\r\n                a {\r\n                    font-size: 12px;\r\n                    font-weight: bold;\r\n                    color: #fff000;\r\n                    text-decoration: none;\r\n                }\r\n            }\r\n        }\r\n        .brand-list {\r\n            display: flex;\r\n            flex-direction: row;\r\n            flex-wrap: wrap;\r\n            // justify-content: center;\r\n            align-items: center;\r\n            margin-top: 30px;\r\n            margin-left: -30px;\r\n            width: 960px;\r\n            .list-child {\r\n                display: flex;\r\n                flex-direction: column;\r\n                justify-content: center;\r\n                align-items: center;\r\n                margin: 0 0 10px 30px;\r\n                width: 30%;\r\n                background: #fff;\r\n                border-radius: 3px;\r\n                cursor: pointer;\r\n                img {\r\n                    width: 260px;\r\n                    height: 160px;\r\n\r\n                }\r\n                .desc {\r\n                    margin-top: 10px;\r\n                    height: 40px;\r\n                    line-height: 40px;\r\n                    color: #409EFF;\r\n                    font-size: 30px;\r\n                    font-weight: bold;\r\n                    text-align: center;\r\n                    letter-spacing: 5px;\r\n                }\r\n            }\r\n        }\r\n    }\r\n    .phone-page {\r\n        display: flex;\r\n        flex-direction: column;\r\n        justify-content: center;\r\n        align-items: center;\r\n        height: 100%;\r\n        .title {\r\n            height: 40px;\r\n            line-height: 40px;\r\n            color: #fff;\r\n            font-size: 40px;\r\n            font-weight: bold;\r\n            letter-spacing: 5px;\r\n        }\r\n        .remind {\r\n            margin-top: 15px;\r\n            height: 30px;\r\n            line-height: 30px;\r\n            color: #fff;\r\n            font-size: 20px;\r\n        }\r\n        .brand-list {\r\n            display: flex;\r\n            flex-direction: row;\r\n            flex-wrap: wrap;\r\n            justify-content: space-between;\r\n            align-items: center;\r\n            margin: 10px 30px 0;\r\n            .list-child {\r\n                margin-top: 15px;\r\n                width: 45%;\r\n                height: 50px;\r\n                line-height: 50px;\r\n                text-align: center;\r\n                color: #409EFF;\r\n                font-size: 30px;\r\n                font-weight: bold;\r\n                letter-spacing: 5px;\r\n                background: #fff;\r\n                border-radius: 3px;\r\n                cursor: pointer;\r\n                .desc {\r\n                    height: 50px;\r\n                    line-height: 50px;\r\n                    color: #409EFF;\r\n                    font-size: 25px;\r\n                    font-weight: bold;\r\n                    text-align: center;\r\n                    letter-spacing: 5px;\r\n                }\r\n            }\r\n        }\r\n    }\r\n}\r\n</style>\r\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!./BrandPage.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!./BrandPage.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./BrandPage.vue?vue&type=template&id=09fb4204&scoped=true&\"\nimport script from \"./BrandPage.vue?vue&type=script&lang=js&\"\nexport * from \"./BrandPage.vue?vue&type=script&lang=js&\"\nimport style0 from \"./BrandPage.vue?vue&type=style&index=0&id=09fb4204&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  \"09fb4204\",\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}