Skip to content

A
apaas-ui
Commit 8ce30f13 authored by 徐一鸣's avatar 徐一鸣
Browse files
Options

服务超市主页

parent 2e8cb24c
Hide whitespace changes
Inline Side-by-side
Showing with 647 additions and 1 deletion
src/assets/css/index.css
View file @ 8ce30f13
......@@ -102,6 +102,15 @@ div{
word-break: break-all;
white-space: nowrap;
}
.text_clip_2 {
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
line-clamp: 2;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.map_container {
background-color: #eee;
}
......
src/components/shop-card.vue 0 → 100644
View file @ 8ce30f13
<template>
<div class="shop_card">
<div class="shop_car-img" v-if="data.img" @click="intoDetail">
<img :src="data.img" width="100%" />
</div>
<div class="shop_card-top">
<p
class="shop_card-title text_clip_2"
v-text="data.title"
:title="data.title"
@click="intoDetail"
></p>
<p class="shop_card-text under_text">
<span
class="text_clip"
v-text="data.provider"
:title="data.provider"
></span>
<span>
<i class="el-icon-star-on"></i>
<span v-text="data.rate"></span>
</span>
</p>
</div>
<div class="shop_card-bottom">
<p class="shop_card-text summary text_clip_2" v-if="data.resourceSummary">
<span v-text="data.resourceSummary"></span>
</p>
<p class="shop_card-text update_time">
<i class="el-icon-time"></i>
<span class="text_clip" v-text="'更新时间：' + data.updateTime"></span>
</p>
<div class="shop_card-text access">
<span>
<img :src="require('@/assets/imgs/icon_liulan.png')" />
<span class="text_clip" v-text="data.viewCount + '次浏览'"></span>
</span>
<span>
<img :src="require('@/assets/imgs/icon_huoqu.png')" />
<span class="text_clip" v-text="data.numberOfMonth + '次获取'"></span>
</span>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
data: {
type: Object,
required: true,
},
detailPath: {
type: String,
required: true,
},
},
methods: {
intoDetail() {
this.$router.push(this.detailPath + this.data.id);
},
},
};
</script>
<style scoped>
.shop_card {
overflow: hidden;
border: 1px solid #ededed;
border-radius: 10px;
box-sizing: border-box;
}
.shop_car-img {
cursor: pointer;
}
.shop_car-img > img {
display: block;
}
.shop_card-top {
background-color: #f9fafc;
padding: 19px 19px 6px;
}
.shop_card-bottom {
background-color: #fff;
padding: 12px 19px 15px;
}
.shop_card-title {
height: 42px;
font-size: 16px;
font-weight: bold;
color: #0d1847;
line-height: 21px;
cursor: pointer;
margin-bottom: 8px;
}
.shop_card-text {
font-size: 14px;
color: #8890a7;
line-height: 21px;
}
.shop_card-text.under_text {
display: flex;
justify-content: space-between;
align-items: center;
}
.shop_card-text.under_text > span:nth-child(2) {
flex-shrink: 0;
margin-left: 10px;
}
.shop_card-text.under_text > span:nth-child(2) > i {
font-size: 20px;
color: #fac266;
}
.shop_card-text.under_text > span:nth-child(2) > span {
font-family: Arial;
font-size: 18px;
font-weight: bold;
color: #ea7d19;
}
.shop_card-text.summary {
height: 42px;
margin-bottom: 12px;
}
.shop_card-text.update_time {
display: flex;
justify-content: flex-start;
align-items: center;
margin-bottom: 15px;
}
.shop_card-text.update_time > i {
flex-shrink: 0;
margin-right: 5px;
}
.shop_card-text.access {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 11px;
border-top: 1px solid #ededed;
}
.shop_card-text.access > span > img {
width: 15px;
margin-right: 5px;
}
</style>
src/components/shop-list.vue 0 → 100644
View file @ 8ce30f13
<template>
<div class="shop_list">
<h3 class="shop_list-title">
<span v-text="name"></span>
<a @click.prevent="goto" :style="{ cursor: to ? 'pointer' : 'text' }">
<i class="el-icon-arrow-right"></i>
</a>
</h3>
<ul class="shop_cards">
<li v-for="(item, index) in data" :key="'card_' + index">
<shop-card :data="item" :detail-path="detailPath"></shop-card>
</li>
</ul>
</div>
</template>
<script>
import shopCard from "./shop-card";
export default {
components: {
shopCard,
},
props: {
name: {
type: String,
required: true,
},
to: {
type: String,
required: true,
},
detailPath: {
type: String,
required: true,
},
data: {
type: Array,
required: true,
},
},
methods: {
goto() {
if (this.to) {
this.$router.push(this.to);
}
},
},
};
</script>
<style scoped>
.shop_list-title {
margin: 13px 20px;
}
.shop_list-title > span {
font-size: 18px;
font-weight: bold;
color: #0d1847;
line-height: 27px;
}
.shop_list-title > a {
display: inline-flex;
justify-content: center;
align-items: center;
width: 28px;
height: 28px;
background-color: #fff;
border: 1px solid #edeff6;
border-radius: 5px;
overflow: hidden;
margin-left: 10px;
}
.shop_list-title > a > i {
font-weight: bolder;
color: #1e3595;
}
.shop_cards {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.shop_cards > li {
width: calc((100% - 60px) / 4);
}
</style>
src/pages/index.vue
View file @ 8ce30f13
<template>
<div class="index_container">
<div class="decor" v-if="$route.fullPath == '/workplace' || $route.fullPath == '/fwzc/fwcs'"></div>
<div class="decor" v-if="$route.fullPath == '/workplace' || $route.fullPath == '/services_shop' || $route.fullPath == '/fwzc/fwcs'"></div>
<router-view/>
</div>
</template>
......
src/pages/services_shop.vue 0 → 100644
View file @ 8ce30f13
<template>
<div class="services_shop-container">
<div class="services_shop-carousel">
<el-carousel height="400px">
<el-carousel-item
v-for="(banner, index) in banners"
:key="'banner_' + index"
>
<img :src="banner" width="100%" />
</el-carousel-item>
</el-carousel>
<ul class="services_shop-info">
<template v-for="(item, index) in servicesShopInfo">
<li class="info_item" :key="'info_' + index">
<div class="left-contianer">
<img :src="item.icon" width="100%" />
</div>
<div class="right-container">
<p v-text="item.name"></p>
<p>
<span v-text="item.value"></span>
<span v-text="item.unit"></span>
</p>
</div>
</li>
<li
class="info_line"
:key="'line_' + index"
v-if="index + 1 < servicesShopInfo.length"
></li>
</template>
</ul>
</div>
<!-- 热门数据 -->
<shop-list
name="热门数据"
to="/shop/data_service_list"
detail-path="/shop/sjfwDetail/"
:data="hot_datas"
></shop-list>
<!-- 精品地图 -->
<shop-list
name="精品地图"
to="/shop/space_time_service_list"
detail-path="/shop/skfwDetail/"
:data="map_datas"
></shop-list>
<!-- 综合应用 -->
<shop-list
name="综合应用"
to="/shop/comprehensive_app_list"
detail-path="/shop/zhyyfwDetail/"
:data="comprehensive_datas"
></shop-list>
</div>
</template>
<script>
import shopList from "../components/shop-list";
export default {
components: {
shopList,
},
data: () => ({
banners: null,
servicesShopInfo: null,
hot_datas: [],
map_datas: [],
comprehensive_datas: [],
}),
methods: {
init() {
this.$http
.get("/static/serviceshop.json")
.then((response) => {
let data = response.body;
let servicesShopInfo = [
{
name: "服务总数",
value: "",
unit: "万",
icon: require("@/assets/imgs/shop_ic_fuwuzs.png"),
},
{
name: "用户总数",
value: "",
unit: "万",
icon: require("@/assets/imgs/shop_ic_yonghuzs.png"),
},
{
name: "接入机构",
value: "",
unit: "",
icon: require("@/assets/imgs/shop_ic_jierujg.png"),
},
{
name: "接入系统",
value: "",
unit: "万",
icon: require("@/assets/imgs/shop_ic_jieruxt.png"),
},
{
name: "服务请求次数",
value: ".2",
unit: "亿",
icon: require("@/assets/imgs/shop_ic_fuwuzs.png"),
},
];
this.banners = data.banners;
this.servicesShopInfo = servicesShopInfo.map((item) => {
let temp = data.servicesShopInfo.find((v) => v.name === item.name);
return {
...item,
value: temp && temp.value,
};
});
this.hot_datas = data.hot_datas;
this.map_datas = data.map_datas;
this.comprehensive_datas = data.comprehensive_datas;
})
.catch(function(error) {
console.log(error);
});
},
},
mounted() {
this.init();
},
};
</script>
<style scoped>
.services_shop-container {
max-width: 1200px;
margin: -157px auto 20px;
}
.services_shop-carousel {
border-radius: 10px;
overflow: hidden;
}
.services_shop-info {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 5px;
background-color: #fff;
}
.services_shop-info > .info_item {
flex-grow: 1;
display: inline-flex;
justify-content: space-between;
align-items: center;
height: 125px;
padding: 10px 10px;
margin: 0 15px;
box-sizing: border-box;
}
.services_shop-info .left-container {
width: 45px;
flex-shrink: 0;
}
.services_shop-info .right-container {
flex-grow: 1;
padding: 0 1.5em;
}
.services_shop-info .right-container > p {
font-size: 16px;
color: #58617a;
line-height: 32px;
text-align: right;
position: relative;
box-sizing: border-box;
}
.services_shop-info .right-container > p:nth-child(2) > span:nth-child(1) {
font-family: Arial;
font-size: 24px;
font-weight: bold;
color: #242c43;
}
.services_shop-info .right-container > p:nth-child(2) > span:nth-child(2) {
position: absolute;
top: 0;
right: -1.2em;
}
.services_shop-info > .info_line {
height: 64px;
border: 1px solid #f2f3f4;
}
</style>
<style>
.services_shop-carousel .el-carousel__button {
width: 30px;
height: 5px;
opacity: 1;
border-radius: 2px;
}
.services_shop-carousel .is-active .el-carousel__button {
background-color: #e56600;
}
</style>
src/router/index.js
View file @ 8ce30f13
......@@ -143,6 +143,11 @@ export default new Router({
name: "workPlace",
component: () => import("@/pages/workPlace"),
},
{
path: "/services_shop",
name: "services_shop",
component: () => import("@/pages/services_shop"),
},
],
},
{
......
static/serviceshop.json 0 → 100644
View file @ 8ce30f13
{
"banners": [
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
],
"servicesShopInfo": [
{
"name": "服务总数",
"value": "80.5"
},
{
"name": "用户总数",
"value": "12,980.5"
},
{
"name": "接入机构",
"value": "2,980"
},
{
"name": "接入系统",
"value": "980"
},
{
"name": "服务请求次数",
"value": "1.2"
}
],
"hot_datas": [
{
"id": 0,
"title": "水路货物周转量情况",
"state": 0,
"resourceSummary": "提供水路货物周转量排名和同比增长的专题数据服务提供水路货物周转量排名和同比增长的专题数据服务提供水路货物周转量排名和同比增长的专题数据服务",
"provider": "提供机构提供机构提供机构",
"dataField": "经济建设",
"serviceType": "数据服务 专题数据服务 企业专题数据服务",
"updateTime": "2020-03-12 18:31:12",
"numberOfMonth": "2698755",
"viewCount": 999,
"rate": 3
},
{
"id": 1,
"title": "水路货物周转量情况水路货物周转量情况",
"state": 2,
"resourceSummary": "提供水路货物周转量排名和同比增长的专题数据服务提供水路货物周转量排名和同比增长的专题数据服务提供水路货物周转量排名和同比增长的专题数据服务",
"provider": "提供机构提供机构提供机构",
"dataField": "经济建设",
"serviceType": "数据服务 专题数据服务 企业专题数据服务",
"updateTime": "2020-03-12 18:31:12",
"numberOfMonth": "2698745",
"viewCount": 999,
"rate": 3.4
},
{
"id": 2,
"title": "水路货物周转量情况水路货物周转量情况水路货物周转量情况水路货物周转量情况水路货物周转量情况水路货物周转量情况",
"state": 1,
"resourceSummary": "提供水路货物周转量排名和同比增长的专题数据服务提供水路货物周转量排名和同比增长的专题数据服务提供水路货物周转量排名和同比增长的专题数据服务",
"provider": "提供机构提供机构提供机构",
"dataField": "经济建设",
"serviceType": "数据服务 专题数据服务 企业专题数据服务",
"updateTime": "2020-03-12 18:31:12",
"numberOfMonth": "2698455",
"viewCount": 999,
"rate": 2.5
},
{
"id": 3,
"title": "水路货物周转量情况",
"state": 0,
"resourceSummary": "提供水路货物周转量排名和同比增长的专题数据服务提供水路货物周转量排名和同比增长的专题数据服务提供水路货物周转量排名和同比增长的专题数据服务",
"provider": "提供机构提供机构提供机构",
"dataField": "经济建设",
"serviceType": "数据服务 专题数据服务 企业专题数据服务",
"updateTime": "2020-03-12 18:31:12",
"numberOfMonth": "267455",
"viewCount": 999,
"rate": 3.7
}
],
"map_datas": [
{
"id": 0,
"img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
"title": "水路货物周转量情况",
"state": 0,
"provider": "提供机构提供机构提供机构",
"dataField": "经济建设",
"serviceType": "数据服务 专题数据服务 企业专题数据服务",
"updateTime": "2020-03-12 18:31:12",
"numberOfMonth": "2698755",
"viewCount": 999,
"rate": 3
},
{
"id": 1,
"img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
"title": "水路货物周转量情况水路货物周转量情况",
"state": 2,
"provider": "提供机构提供机构提供机构",
"dataField": "经济建设",
"serviceType": "数据服务 专题数据服务 企业专题数据服务",
"updateTime": "2020-03-12 18:31:12",
"numberOfMonth": "2698745",
"viewCount": 999,
"rate": 3.4
},
{
"id": 2,
"img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
"title": "水路货物周转量情况水路货物周转量情况水路货物周转量情况水路货物周转量情况水路货物周转量情况水路货物周转量情况",
"state": 1,
"provider": "提供机构提供机构提供机构",
"dataField": "经济建设",
"serviceType": "数据服务 专题数据服务 企业专题数据服务",
"updateTime": "2020-03-12 18:31:12",
"numberOfMonth": "2698455",
"viewCount": 999,
"rate": 2.5
},
{
"id": 3,
"img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
"title": "水路货物周转量情况",
"state": 0,
"provider": "提供机构提供机构提供机构",
"dataField": "经济建设",
"serviceType": "数据服务 专题数据服务 企业专题数据服务",
"updateTime": "2020-03-12 18:31:12",
"numberOfMonth": "267455",
"viewCount": 999,
"rate": 3.7
}
],
"comprehensive_datas": [
{
"id": 0,
"img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
"title": "水路货物周转量情况",
"state": 0,
"provider": "提供机构提供机构提供机构",
"dataField": "经济建设",
"serviceType": "数据服务 专题数据服务 企业专题数据服务",
"updateTime": "2020-03-12 18:31:12",
"numberOfMonth": "2698755",
"viewCount": 999,
"rate": 3
},
{
"id": 1,
"img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
"title": "水路货物周转量情况水路货物周转量情况",
"state": 2,
"provider": "提供机构提供机构提供机构",
"dataField": "经济建设",
"serviceType": "数据服务 专题数据服务 企业专题数据服务",
"updateTime": "2020-03-12 18:31:12",
"numberOfMonth": "2698745",
"viewCount": 999,
"rate": 3.4
},
{
"id": 2,
"img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
"title": "水路货物周转量情况水路货物周转量情况水路货物周转量情况水路货物周转量情况水路货物周转量情况水路货物周转量情况",
"state": 1,
"provider": "提供机构提供机构提供机构",
"dataField": "经济建设",
"serviceType": "数据服务 专题数据服务 企业专题数据服务",
"updateTime": "2020-03-12 18:31:12",
"numberOfMonth": "2698455",
"viewCount": 999,
"rate": 2.5
},
{
"id": 3,
"img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
"title": "水路货物周转量情况",
"state": 0,
"provider": "提供机构提供机构提供机构",
"dataField": "经济建设",
"serviceType": "数据服务 专题数据服务 企业专题数据服务",
"updateTime": "2020-03-12 18:31:12",
"numberOfMonth": "267455",
"viewCount": 999,
"rate": 3.7
}
]
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment