{"remainingRequest":"/Users/linhuakun/Downloads/nodejs/codewhy/node_modules/vue-loader/lib/index.js??vue-loader-options!/Users/linhuakun/Downloads/nodejs/codewhy/src/views/detail/childComps/DetailShopInfo.vue?vue&type=script&lang=js&","dependencies":[{"path":"/Users/linhuakun/Downloads/nodejs/codewhy/src/views/detail/childComps/DetailShopInfo.vue","mtime":1607666509057},{"path":"/Users/linhuakun/Downloads/nodejs/codewhy/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/Users/linhuakun/Downloads/nodejs/codewhy/node_modules/babel-loader/lib/index.js","mtime":499162500000},{"path":"/Users/linhuakun/Downloads/nodejs/codewhy/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/Users/linhuakun/Downloads/nodejs/codewhy/node_modules/vue-loader/lib/index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:Ly8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KCglleHBvcnQgZGVmYXVsdCB7CgkJbmFtZTogIkRldGFpbFNob3BJbmZvIiwKICAgIHByb3BzOiB7CgkJICBzaG9wOiB7CgkJICAgIHR5cGU6IE9iamVjdCwKICAgICAgICBkZWZhdWx0KCl7CgkJICAgICAgcmV0dXJuIFtdCiAgICAgICAgfQogICAgICB9CiAgICB9LAogICAgZmlsdGVyczogewogICAgICBzZWxsQ291bnRGaWx0ZXI6IGZ1bmN0aW9uICh2YWx1ZSkgewogICAgICAgIGlmICh2YWx1ZSA8IDEwMDAwKSByZXR1cm4gdmFsdWU7CiAgICAgICAgcmV0dXJuICh2YWx1ZS8xMDAwMCkudG9GaXhlZCgxKSArICfkuIcnCiAgICAgIH0KICAgIH0KCX0K"},{"version":3,"sources":["DetailShopInfo.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"DetailShopInfo.vue","sourceRoot":"src/views/detail/childComps","sourcesContent":["<template>\n  <div class=\"shop-info\">\n    <div class=\"shop-top\">\n      <img :src=\"shop.logo\">\n      <span class=\"title\">{{shop.name}}</span>\n    </div>\n    <div class=\"shop-middle\">\n      <div class=\"shop-middle-item shop-middle-left\">\n        <div class=\"info-sells\">\n          <div class=\"sells-count\">\n            {{shop.sells | sellCountFilter}}\n          </div>\n          <div class=\"sells-text\">总销量</div>\n        </div>\n        <div class=\"info-goods\">\n          <div class=\"goods-count\">\n            {{shop.goodsCount}}\n          </div>\n          <div class=\"goods-text\">全部宝贝</div>\n        </div>\n      </div>\n      <div class=\"shop-middle-item shop-middle-right\">\n        <table>\n          <tr v-for=\"(item, index) in shop.score\" :key=\"index\">\n            <td>{{item.name}}</td>\n            <td class=\"score\" :class=\"{'score-better': item.isBetter}\">{{item.score}}</td>\n            <td class=\"better\" :class=\"{'better-more': item.isBetter}\"><span>{{item.isBetter ? '高':'低'}}</span></td>\n          </tr>\n        </table>\n      </div>\n    </div>\n    <div class=\"shop-bottom\">\n      <div class=\"enter-shop\">进店逛逛</div>\n    </div>\n  </div>\n</template>\n\n<script>\n\texport default {\n\t\tname: \"DetailShopInfo\",\n    props: {\n\t\t  shop: {\n\t\t    type: Object,\n        default(){\n\t\t      return []\n        }\n      }\n    },\n    filters: {\n      sellCountFilter: function (value) {\n        if (value < 10000) return value;\n        return (value/10000).toFixed(1) + '万'\n      }\n    }\n\t}\n</script>\n\n<style scoped>\n  .shop-info {\n    padding: 25px 8px;\n    border-bottom: 5px solid #f2f5f8;\n  }\n\n  .shop-top {\n    line-height: 45px;\n    /* 让元素垂直中心对齐 */\n    display: flex;\n    align-items: center;\n  }\n\n  .shop-top img {\n    width: 45px;\n    height: 45px;\n    border-radius: 50%;\n    border: 1px solid rgba(0,0,0,.1);\n  }\n\n  .shop-top .title {\n    margin-left: 10px;\n    vertical-align: center;\n  }\n\n  .shop-middle {\n    margin-top: 15px;\n    display: flex;\n    align-items: center;\n  }\n\n  .shop-middle-item {\n    flex: 1;\n  }\n\n  .shop-middle-left {\n    display: flex;\n    justify-content: space-evenly;\n    color: #333;\n    text-align: center;\n    border-right: 1px solid rgba(0,0,0,.1);\n  }\n\n  .sells-count, .goods-count {\n    font-size: 18px;\n  }\n\n  .sells-text, .goods-text {\n    margin-top: 10px;\n    font-size: 12px;\n  }\n\n  .shop-middle-right {\n    font-size: 13px;\n    color: #333;\n  }\n\n  .shop-middle-right table {\n    width: 120px;\n    margin-left: 30px;\n  }\n\n  .shop-middle-right table td {\n    padding: 5px 0;\n  }\n\n  .shop-middle-right .score {\n    color: #5ea732;\n  }\n\n  .shop-middle-right .score-better {\n    color: #f13e3a;\n  }\n\n  .shop-middle-right .better span {\n    background-color: #5ea732;\n    color: #fff;\n    text-align: center;\n  }\n\n  .shop-middle-right .better-more span {\n    background-color: #f13e3a;\n  }\n\n  .shop-bottom {\n    text-align: center;\n    margin-top: 10px;\n  }\n\n  .enter-shop {\n    display: inline-block;\n    font-size: 14px;\n    background-color: #f2f5f8;\n    width: 150px;\n    height: 30px;\n    text-align: center;\n    line-height: 30px;\n    border-radius: 10px;\n  }\n</style>\n"]}]}