diff --git a/src/pages/data-analysis/my-application.vue b/src/pages/data-analysis/my-application.vue index 04b731fd290eaca8e5812cb2b56152302e3df6bf..e31e9dd76e4b557892e87b4cc22f94efd36bb3b1 100644 --- a/src/pages/data-analysis/my-application.vue +++ b/src/pages/data-analysis/my-application.vue @@ -50,7 +50,37 @@ - + + + ({ @@ -334,9 +366,77 @@ export default { unit: "个" } ], // 应用评分 + hotSearchHeader: [], // 热门搜索 表头 + hotSearchData: [ + { + hotIndex: 1, + name: "地图视频融合服务1", + count: 666, + increases: 1.28, + }, + { + hotIndex: 2, + name: "地图视频融合服务2", + count: 666, + increases: 0.03, + }, + { + hotIndex: 3, + name: "地图视频融合服务3", + count: 666, + increases: 0.58, + }, + { + hotIndex: 4, + name: "地图视频融合服务4", + count: 666, + increases: -0.28, + }, + { + hotIndex: 5, + name: "地图视频融合服务5", + count: 666, + increases: -0.58, + }, + ], // 热门搜索 数据 }), - mounted() {}, + mounted() { + this.hotSearchHeader = [ + { + label: "排名", + type: "hot-index", + width: 100, + align: "center", + }, + { + label: "应用名称", + prop: "name", + type: "button", + callback: this.detailHotSearch, + }, + { + label: "搜索次数", + prop: "count", + width: 100, + align: "center", + }, + { + label: "日涨幅", + prop: "increases", + width: 100, + sortType: "0", // 0:升序 1:降序 + sortable: true, + align: "center", + }, + ] + }, methods: { + detailHotSearch(item) { + console.log("查看热搜详情"); + }, + hotSearchSortChange(sortInfo) { + console.log("应用热门搜索: " + sortInfo); + }, changeServiceTypeBtn(index) { console.log("应用类型分析: " + index); }, @@ -426,4 +526,48 @@ export default { height: calc(100% - 36px); margin-top: 15px; } +.service-hot-search { + display: flex; + justify-content: flex-start; + align-items: stretch; + height: calc(100% - 21px); + margin-top: 0; +} +.service-hot-search > .left-content { + width: 260px; + flex-shrink: 0; + padding: 0 20px; + box-sizing: border-box; + margin-right: 10px; +} +.service-hot-search > .right-content { + flex-grow: 1; + overflow-x: hidden; + overflow-y: auto; +} +.hot-line { + height: 50%; +} +.hot-line-title { + font-size: 14px; + line-height: 36px; + color: #8890a7; +} +.hot-line-chart { + height: calc(100% - 36px); + background-color: pink; +} + + + \ No newline at end of file