{"version":3,"file":"js/788.3c037e67.js","mappings":"04BAQcA,EAAAA,EAAAA,MACCC,EAAAA,EAAAA,MADf,MAEMC,GAAQC,EAAAA,EAAAA,OACR,EAAEC,EAAC,OAACC,KAAWC,EAAAA,EAAAA,MAOfC,IAASC,EAAAA,EAAAA,IAAI,CAACC,UAAU,GAAGC,aAAa,GAAGC,gBAAgB,GAAGC,QAAQ,GAAGC,WAAW,GAAGC,QAAQ,GAAGC,QAAQ,GAAGC,WAAW,GAAGC,OAAO,GAAGC,SAAS,GAAGC,YAAY,GAAGC,aAAa,KAC7KC,GAAYA,MACfC,EAAAA,EAAAA,IAAepB,EAAMqB,OAAOC,IAAIC,MAAMC,IACnCC,QAAQC,IAAIF,GACK,MAAdA,EAAIG,UACJtB,GAAOuB,MAAQJ,EAAIK,KACtB,GACD,E,OAELV,K,2yLCpBA,MAAMW,IAA2B,QAAgB,GAAQ,CAAC,CAAC,YAAY,qBAEvE,S","sources":["webpack://tcb_ranklist_cli/./src/views/ShowView.vue","webpack://tcb_ranklist_cli/./src/views/ShowView.vue?a6f4"],"sourcesContent":["<script setup>\r\nimport {ref} from 'vue'\r\nimport { useRouter, useRoute } from 'vue-router'\r\nimport { useCounterStore } from '@/stores/counter'\r\nimport { useI18n } from 'vue-i18n'\r\nimport Ad from '../components/Ad.vue'\r\n\r\n\r\nconst store = useCounterStore()\r\nconst router = useRouter()\r\nconst route = useRoute()\r\nconst { t,locale } = useI18n()\r\n\r\n// const { count } = store \r\n// 代替解构赋值，直接解构赋值，属性会失去响应式\r\n// const { count } = storeToRefs(store) \r\nimport {getCompanyById} from '@/api/index';\r\n\r\nconst detail = ref({news_list:[],company_name:'',company_name_en:'',country:'',country_en:'',website:'',product:'',product_en:'',listed:'',about_us:'',about_us_en:'',ranking_list:[]})\r\nconst getDetail = ()=>{\r\n   getCompanyById(route.params.id).then((res)=>{\r\n      console.log(res)\r\n      if(res.errcode===200){\r\n         detail.value = res.data\r\n      }\r\n   })\r\n}\r\ngetDetail()\r\n\r\n</script>\r\n\r\n<template>\r\n<div class=\"page-detail\">\r\n<!-- <div>详情页id：{{ route.params.id }}</div>\r\n<div>直接解构store: {{ count }}</div>\r\n<div>store.count: {{ store.count }}</div>\r\n<div @click=\"store.increment()\">点击+1</div> -->\r\n<div class=\"wrap\">\r\n\r\n   <div class=\"flexbox\">\r\n      <div class=\"left\">\r\n         <div class=\"head\">\r\n            <h2>{{ locale==='zh'?detail.company_name:detail.company_name_en }}</h2>\r\n            <div class=\"desp\">\r\n               <div>\r\n                  <span>{{ locale==='zh'?\"总部所在国家：\":\"Country: \" }}<strong>{{ locale==='zh'?detail.country:detail.country_en }}</strong></span>\r\n                  \r\n                  <span>{{ locale==='zh'?\"主营：\":\"Main products: \" }}<strong>{{ locale==='zh'?detail.product:detail.product_en }}</strong></span>\r\n               </div>\r\n               <div>\r\n                  <span v-if=\"locale==='zh'\">上市：\r\n                     <strong v-if=\"detail.listed=='1'\">是</strong>\r\n                     <strong v-if=\"detail.listed=='0'\">未上市</strong>\r\n                     <strong v-if=\"detail.listed=='2'\">IPO</strong>\r\n                  </span>\r\n                  <span v-if=\"locale==='en'\">Listing: \r\n                     <strong v-if=\"detail.listed=='1'\">Yes</strong>\r\n                     <strong v-if=\"detail.listed=='0'\">No</strong>\r\n                     <strong v-if=\"detail.listed=='2'\">IPO</strong>\r\n                  </span>\r\n                  <span>{{ locale==='zh'?\"官网：\":\"Website: \" }}\r\n                     <a :href=\"detail.website\" target=\"_blank\">{{ detail.website }}</a>\r\n                     <strong v-if=\"detail.website===''\">-</strong>\r\n                  </span>\r\n               </div>\r\n            </div>\r\n            <div class=\"desp-m\">\r\n               <div>\r\n                  <span>{{ locale==='zh'?\"总部所在国家：\":\"Country: \" }}</span>\r\n                  <strong>{{ locale==='zh'?detail.country:detail.country_en }}</strong>\r\n               </div>\r\n               <div>\r\n                  <span>{{ locale==='zh'?\"主营：\":\"Main products: \" }}</span>\r\n                  <strong>{{ locale==='zh'?detail.product:detail.product_en }}</strong>\r\n               </div>\r\n               <div>\r\n                  <span>{{ locale==='zh'?\"官网：\":\"Website: \" }}</span>\r\n                  <a :href=\"detail.website\" target=\"_blank\">{{ detail.website }}</a>\r\n                  <strong v-if=\"detail.website===''\">-</strong>\r\n               </div>\r\n               <div>\r\n                  <span>{{ locale==='zh'?\"上市：\":\"Listing: \" }}</span>\r\n                  <span v-if=\"locale==='zh'\"><strong v-if=\"detail.listed=='1'\">是</strong><strong v-if=\"detail.listed=='0'\">未上市</strong></span>\r\n                  <span v-if=\"locale==='en'\"><strong v-if=\"detail.listed=='1'\">Yes</strong><strong v-if=\"detail.listed=='0'\">No</strong></span>\r\n               </div>\r\n            </div>\r\n\r\n         </div>\r\n         <div class=\"context\">\r\n            <div v-if=\"locale==='zh'\" v-html=\"detail.about_us\"></div>\r\n            <div v-if=\"locale==='en'\" v-html=\"detail.about_us_en\"></div>\r\n         </div>\r\n\r\n         <div class=\"bangdang\">\r\n            <!-- <h4>{{ locale==='zh'?\"榜单排名\":\"Rankings\" }}</h4> -->\r\n            <table v-for=\"(item) in detail.ranking_list\" :key=\"item\">\r\n               <caption>{{ item.ranking_year }} {{ locale==='zh'?\"榜单排名\":\"Rankings\" }}</caption>\r\n               <tr>\r\n                  <!-- <th>{{ locale==='zh'?\"时间\":\"Time\" }}</th> -->\r\n                  <!-- <th>总营收</th>\r\n                  <th>全球排名</th> -->\r\n                  <th v-if=\"item.total_revenue_ranking!==''&&item.total_revenue_ranking<=100\">{{ locale==='zh'?'世界陶瓷卫浴100强':'Global 100' }}</th>\r\n                  <th v-if=\"item.ceramic_sales_ranking!==''&&item.ceramic_sales_ranking<=30\">{{ locale==='zh'?'全球陶瓷30强':'Ceramics Global 30' }}</th>\r\n                  <th v-if=\"item.bathroom_sales_ranking!==''&&item.bathroom_sales_ranking<=30\">{{ locale==='zh'?'全球卫浴30强':'Sanitary Ware Global 30' }}</th>\r\n                  <th v-if=\"item.material_sales_ranking!==''&&item.material_sales_ranking<=15\">{{ locale==='zh'?'陶瓷装备和材料企业15强':'Equipment and Materials Global 15' }}</th>\r\n                  <th v-if=\"item.ceramic_production_ranking!==''&&item.ceramic_production_ranking<=30\">{{ locale==='zh'?'全球陶瓷产量30强':'Production Global 30' }}</th>\r\n                  <!-- <th v-if=\"item.ceramic_capacity_ranking!==''\">{{ locale==='zh'?'陶瓷产能30强(中国)':'Production Capacity Top 30(China)' }}</th> -->\r\n                  <th v-if=\"item.single_brand_sales_ranking!==''&&item.single_brand_sales_ranking<30\">{{ locale==='zh'?'陶瓷单一品牌30强(中国)':'Single Brand Top 30(China)' }}</th>\r\n               </tr>\r\n               <tr>\r\n                  <!-- <td>{{ item.ranking_year }}</td> -->\r\n                  <td v-if=\"item.total_revenue_ranking!==''&&item.total_revenue_ranking<=100\">{{ item.total_revenue_ranking }}</td>\r\n                  <td v-if=\"item.ceramic_sales_ranking!==''&&item.ceramic_sales_ranking<=30\">{{ item.ceramic_sales_ranking }}</td>\r\n                  <td v-if=\"item.bathroom_sales_ranking!==''&&item.bathroom_sales_ranking<=30\">{{ item.bathroom_sales_ranking }}</td>\r\n                  <td v-if=\"item.material_sales_ranking!==''&&item.material_sales_ranking<=15\">{{ item.material_sales_ranking }}</td>\r\n                  <td v-if=\"item.ceramic_production_ranking!==''&&item.ceramic_production_ranking<=30\">{{ item.ceramic_production_ranking }}</td>\r\n                  <!-- <td v-if=\"item.ceramic_capacity_ranking!==''\">{{ item.ceramic_capacity_ranking }}</td> -->\r\n                  <td v-if=\"item.single_brand_sales_ranking!==''&&item.single_brand_sales_ranking<30\">{{ item.single_brand_sales_ranking }}</td>\r\n               </tr>\r\n            </table>\r\n         </div>\r\n\r\n      </div>\r\n      <div class=\"right\">\r\n         <div class=\"newslist\" v-if=\"detail.news_list.length>0\">\r\n               <h2>{{ locale==='zh'?\"相关文章\":\"News\" }}</h2>\r\n               <ul>\r\n                  <template v-for=\"(item,index) in detail.news_list\">\r\n                  <li :key=\"index\" v-if=\"(locale==='zh'&&item.title!=='')||(locale==='en'&&item.title_en!=='')\">\r\n                  <RouterLink :to=\"'/cdetail/'+item.news_id\">\r\n                    <div class=\"textbox\">\r\n                      <h4 class=\"ell2\">{{ locale==='zh'?item.title:item.title_en }}</h4>\r\n                      <div class=\"desp\">{{ item.release_date }}</div>\r\n                    </div>\r\n                  </RouterLink>\r\n                  </li>\r\n                  </template>\r\n               </ul>\r\n         </div>\r\n         <Ad width=\"300px\" />\r\n      </div>\r\n   </div>\r\n\r\n</div>\r\n</div>\r\n</template>\r\n\r\n<style scoped>\r\n.page-detail{width:100vw; background:#fff; min-height:calc( 100vh - 225px ); padding-bottom:30px;}\r\n.page-detail .wrap{width:1090px; margin:auto;}\r\n.page-detail .flexbox{display:flex; padding-top:80px; justify-content: space-between; }\r\n.page-detail .left{width:720px; flex:0 0 720px; }\r\n.page-detail .left .head{border-bottom:1px solid #999; padding-bottom:5px;}\r\n.page-detail .left .head h2{font-size:24px; line-height: 24px; font-weight: bold; padding-bottom:20px; color:#333;}\r\n.page-detail .left .head .desp>div{font-size:14px; color:#666; display:flex; }\r\n.page-detail .left .head .desp span:nth-of-type(1){color:#666; display:block; flex:0 0 40%;}\r\n/* .page-detail .left .head .desp span::after{content:\" | \"; padding:0 20px; font-size:14px; color:#8c8c8c;} */\r\n.page-detail .left .head .desp span:nth-last-of-type(1)::after{content:\"\"; }\r\n.page-detail .left .head .desp span strong{color:#111;}\r\n.page-detail .left .head .desp a{color:#2a92e9; text-decoration: underline;}\r\n.page-detail .left .head .desp-m{display:none;}\r\n\r\n.page-detail .left .context{padding:20px 0;}\r\n.page-detail .right{width:315px; flex:0 0 315px;}\r\n.adbox{margin-top:25px;}\r\n.adbox img{width:315px; display: block; margin-bottom: 10px;}\r\n\r\n.newslist h2{font-size:15px; color:#111; border-bottom:2px solid #666;}\r\n.newslist ul{padding:0;}\r\n.newslist ul li{list-style-type: none; display:flex; padding:15px 0; border-bottom:1px solid #ccc;}\r\n.newslist ul li a{color:#001d35;width: 100%; text-decoration: none;}\r\n.newslist ul li a:hover{text-decoration: underline; background:none;}\r\n.newslist ul li .textbox{flex:1 1 auto; display: flex; justify-content: space-between; align-items: flex-end;}\r\n.newslist ul li h4{font-size: 16px; font-weight: bold; padding:5px 0; flex:210px 0 0; }\r\n.newslist ul li .desp{color:#999; display: flex; justify-content: space-between; padding:5px 0;}\r\n\r\n\r\n.bangdang h4{font-size:14px; color:#6d6d6d; margin-bottom:0px;}\r\ntable{width:720px; font-size:12px; margin-top:8px;}\r\ntable caption{text-align: left; font-weight: bold; font-size:14px; color:#333; margin-bottom:5px;}\r\n\r\ntable.mobile-hide{display: table;}\r\ntable tr th{background:#eaeaea; height:24px; font-weight: bold; border-bottom:1px solid #f1f1f1; color:#333;}\r\ntable tr th:nth-of-type(2n),table tr th:nth-of-type(2n){background:#fdfdd4;}\r\ntable tr th:nth-of-type(2n+1),table tr th:nth-of-type(2n+1){background:#e0f7e7;}\r\n/* table tr th:nth-of-type(2n+2),table tr th:nth-of-type(2n+2){background:#fdfdd4;} */\r\ntable tr td{text-align:center; color:#333;}\r\ntable tr:hover{background:#f1f1f1;}\r\ntable tr td{height:26px; line-height: 26px; border-bottom:1px solid #f1f1f1;}\r\n\r\n\r\n@media (max-width: 600px) {\r\n   .page-detail{width:414px;}\r\n   .page-detail .wrap{width:414px;  display: block;}\r\n   .page-detail .flexbox{display: block; padding-top:30px; }\r\n   .page-detail .left{width:414px; flex:0 0 414px; padding:0 15px;}\r\n\r\n   .page-detail .left .head .desp{display:none;}\r\n   .page-detail .left .head .desp-m{display:block;}\r\n   .page-detail .left .head .desp-m>div{display: flex; }\r\n   .page-detail .left .head .desp-m>div>span:nth-of-type(2){width:120px; flex:0 0 120px;}\r\n   .page-detail .left .head .desp-m a{color:#2a92e9; text-decoration: underline;}\r\n   .page-detail .left .head .desp-m span{color:#666;}\r\n   .page-detail .left .head .desp-m span:nth-of-type(1){color:#666; width:110px; display:inline-block;}\r\n   .page-detail .left .head .desp-m strong{color:#666;}\r\n\r\n   .page-detail .right{width:414px; flex:0 0 414px; padding:0 15px;}\r\n   .adbox{margin-top:38px;}\r\n   .adbox img{width:384px; display: block; margin-bottom: 10px;}\r\n\r\n   table{width: 384px; margin-bottom:20px;}\r\n}\r\n</style>\r\n\r\n<style>\r\n.page-detail .left .context div{color:#333;}\r\n.page-detail .left .context p span{text-wrap: wrap!important; color:#333;}\r\n.page-detail .left .context p{text-wrap: wrap!important; color:#333;}\r\n</style>\r\n","import script from \"./ShowView.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./ShowView.vue?vue&type=script&setup=true&lang=js\"\n\nimport \"./ShowView.vue?vue&type=style&index=0&id=49967a4c&scoped=true&lang=css\"\nimport \"./ShowView.vue?vue&type=style&index=1&id=49967a4c&lang=css\"\n\nimport exportComponent from \"../../node_modules/_vue-loader@17.4.2@vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['__scopeId',\"data-v-49967a4c\"]])\n\nexport default __exports__"],"names":["useCounterStore","useRouter","route","useRoute","t","locale","useI18n","detail","ref","news_list","company_name","company_name_en","country","country_en","website","product","product_en","listed","about_us","about_us_en","ranking_list","getDetail","getCompanyById","params","id","then","res","console","log","errcode","value","data","__exports__"],"sourceRoot":""}