Skip to content

A
apaas-ui
Commit 280f1b65 authored by 刘殿昕's avatar 刘殿昕
Browse files
Options

+侧边栏+列表

parent f5cd5d52
Hide whitespace changes
Inline Side-by-side
Showing with 344 additions and 87 deletions
src/components/commodity-cell.vue
View file @ 280f1b65
......@@ -7,7 +7,12 @@
/>
</div>
<div class="com_cell_message">
<div class="com_cell_msg_title" @click="goUrl('ssurl')">水路货物周转量情况</div>
<div class="com_cell_msg_title">
水路货物周转量情况
<span v-if="cellData.id == 1" class="tags shared">共享</span>
<span v-else-if="cellData.id == 2" class="tags restricted">受限</span>
<span v-else class="tags sensitive">敏感</span>
</div>
<div class="com_cell_item">
<span class="com_cell_item_title">资源摘要：</span>
<span
......@@ -31,6 +36,20 @@
<span class="com_cell_data">2020-03-12 18:31:12</span>
</div>
</div>
<div class="com_cell_right">
<el-rate
v-model="cellData.id"
disabled
show-score
text-color="#58617a"
score-template="{value}"
></el-rate>
<div class="com_cell_right_text">
<span class="com_cell_right_time_tit">本月获取次数：</span>
<span class="com_cell_right_time">26987455次</span>
</div>
<el-button class="com_cell_right_btn" @click="goUrl('ssurl')">查看详情</el-button>
</div>
</div>
</template>
......@@ -38,7 +57,8 @@
export default {
components: {},
props: {
url: { type: String, default: "" }
url: { type: String, default: "" },
cellData: { type: Object, default: {} }
},
data: () => ({}),
computed: {},
......@@ -58,7 +78,7 @@ export default {
.com_cell {
display: flex;
justify-content: flex-start;
padding: 10px;
padding: 20px 10px;
border-bottom: 2px #f4f7fc solid;
}
.com_cell_img_box {
......@@ -73,20 +93,19 @@ export default {
}
.com_cell_message {
padding-left: 20px;
width: calc(100% - 190px);
width: calc(100% - 420px);
}
.com_cell_msg_title {
color: #0d1847;
font-size: 22px;
font-weight: 700;
margin-bottom: 6px;
cursor: pointer;
}
.com_cell_item {
font-size: 16px;
line-height: 26px;
margin-top: 1px;
color: #51ac14;
color: #8890a7;
display: flex;
align-self: start;
}
......@@ -96,10 +115,67 @@ export default {
.com_cell_data {
display: inline-block;
width: calc(100% - 90px);
color: #f1ac14;
color: #242c43;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.com_cell_right {
width: 250px;
padding: 25px 0 0 60px;
}
.com_cell_right_text {
font-size: 14px;
margin-top: 15px;
}
.com_cell_right_time_tit {
color: #8890a7;
}
.com_cell_right_time {
color: #242c43;
}
.com_cell_right_btn {
background-color: #0f2683;
color: #f8f9fd;
width: 160px;
height: 40px;
border-radius: 20px;
margin-top: 35px;
}
.tags {
display: inline-block;
margin-left: 10px;
padding: 1px 8px;
font-size: 12px;
font-weight: 500;
border-radius: 10px;
position: relative;
top: -2px;
}
.shared {
background-color: #e7fdfc;
border: solid 1px #8bd6d0;
color: #25bdb1;
}
.restricted {
background-color: #fffee8;
border: solid 1px #e4c884;
color: #ef9433;
}
.sensitive {
background-color: #ffefef;
border: solid 1px #d7a4a9;
color: #e15260;
}
</style>
<style>
.com_cell_right .el-rate__text {
display: inline-block;
margin-left: 10px;
font-size: 22px;
font-weight: 700;
}
.com_cell_right .el-rate__icon {
font-size: 20px;
}
</style>
\ No newline at end of file
src/components/commodity-list.vue
View file @ 280f1b65
<template>
<div>
<commodity-cell v-for="item in datas" :url="url" :key="item"></commodity-cell>
<commodity-cell v-for="item in datas" :cellData="item" :url="url" :key="item.id"></commodity-cell>
<!-- 分页 -->
<section class="com-pagination" v-if="paginationShow">
<div class="com_page_total">共 {{ pagination.total }} 个条目</div>
<div class="com_page_num" v-if="pageSizeShow">
<div class="com_page_num_sel">
<el-select
v-model="pagination.rowsPerPage"
placeholder="请选择"
size="mini"
@change="handleSizeChange"
>
<el-option
v-for="item in pageOptions"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
<div class="com_page_item">
<div class="com_page_num" v-if="pageSizeShow">
<div>每页行数：</div>
<div class="com_page_num_sel">
<el-select
v-model="pagination.rowsPerPage"
placeholder="请选择"
size="small"
@change="handleSizeChange"
>
<el-option
v-for="item in pageOptions"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</div>
</div>
<div>条 / 页</div>
</div>
<div class="com_page_control">
<el-button
icon="el-icon-arrow-left"
circle
size="mini"
@click="handleCurrentChange(-1)"
:disabled="pagination.page == 1"
></el-button>
&nbsp;&nbsp;第{{ pagination.page }}页 / 共{{
Math.ceil(pagination.total / pagination.rowsPerPage)
}}页
<el-button
icon="el-icon-arrow-right"
circle
size="mini"
@click="handleCurrentChange(1)"
:disabled="
<div class="com_page_control">
<el-button
icon="el-icon-arrow-left"
circle
size="mini"
@click="handleCurrentChange(-1)"
:disabled="pagination.page == 1"
></el-button>
&nbsp;&nbsp;第{{ pagination.page }}页 / 共{{
Math.ceil(pagination.total / pagination.rowsPerPage)
}}页
<el-button
icon="el-icon-arrow-right"
circle
size="mini"
@click="handleCurrentChange(1)"
:disabled="
pagination.page >=
Math.ceil(pagination.total / pagination.rowsPerPage)
"
></el-button>
></el-button>
</div>
</div>
</section>
</div>
......@@ -99,7 +101,7 @@ export default {
this.$emit("refresh");
},
getTotal() {
this.total = this.datas.length;
this.pagination.total = this.datas.length;
}
},
mounted() {
......@@ -119,17 +121,30 @@ export default {
align-items: center;
}
.com_page_num {
width: 120px;
width: 140px;
margin-right: 20px;
display: flex;
justify-content: space-around;
align-items: center;
}
.com_page_num_sel {
width: 66px;
width: 50px;
font-size: 14px;
position: relative;
top: 1px;
}
.com_page_item {
display: flex;
justify-content: flex-end;
align-items: center;
}
</style>
<style>
.com_page_control .el-button {
border: 0;
}
.com_page_num .el-input__inner {
border: 0;
padding: 0;
}
</style>
\ No newline at end of file
src/components/service_shop_menu.vue 0 → 100644
View file @ 280f1b65
<template>
<div class="service_shop_menu">
<ul class="service_shop_menu_list">
<li v-for="(item, index) in menuList" :key="index" @click="active(item)">
<img :src="require('../assets/imgs/' + item.default + '.png')" class="menu_img" />
<span class="menu_item">{{ item.label }}</span>
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
menuList: {
type: Array,
default: [
{
id: 0,
label: "数据服务",
active: "tool_ic_shujufw_sel",
default: "tool_ic_shujufw"
},
{
id: 1,
label: "时空服务",
active: "tool_ic_shikongfw_sel",
default: "tool_ic_shikongfw"
},
{
id: 2,
label: "视频服务",
active: "tool_ic_shipinfw_sel",
default: "tool_ic_shipinfw"
},
{
id: 3,
label: "感知服务",
active: "tool_ic_ganzhifw_sel",
default: "tool_ic_ganzhifw"
},
{
id: 4,
label: "综合应用服务",
active: "tool_ic_zongheyyfw_sel",
default: "tool_ic_zongheyyfw"
},
{
id: 5,
label: "云资源服务",
active: "tool_ic_yunziyuanfw_sel",
default: "tool_ic_yunziyuanfw"
},
{
id: 6,
label: "应用商店",
active: "tool_ic_yingyongsd_sel",
default: "tool_ic_yingyongsd"
}
]
}
},
data() {
return {};
},
methods: {
active() {}
}
};
</script>
<style scoped>
.service_shop_menu {
background-color: #0d1847;
position: fixed;
top: 84px;
left: 0;
width: 200px;
height: 100%;
padding-top: 30px;
}
.service_shop_menu_list > li {
padding: 16px 10px 8px 22px;
border-left: 5px solid #0d1847;
font-size: 16px;
line-height: 24px;
cursor: pointer;
}
.service_shop_menu_list > li:hover,
.service_shop_menu_list > li.current {
border-left: 5px solid #e56600;
background-color: #182665;
color: #e6ebfe;
}
.menu_img {
width: 25px;
margin-right: 6px;
}
.menu_item {
position: relative;
color: #6573ae;
top: -6px;
}
</style>
src/components/table-um.vue
View file @ 280f1b65
......@@ -165,45 +165,47 @@
<!-- 分页 -->
<section class="ces-pagination" v-if="paginationShow">
<div class="ces_page_total">共 {{ pagination.total }} 个条目</div>
<div class="ces_page_num" v-if="pageSizeShow">
<div class="ces_page_num_sel">
<el-select
v-model="pagination.rowsPerPage"
placeholder="请选择"
size="mini"
@change="handleSizeChange"
>
<el-option
v-for="item in pageOptions"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
<div class="ces_page_item">
<div class="ces_page_num" v-if="pageSizeShow">
<div>每页行数：</div>
<div class="ces_page_num_sel">
<el-select
v-model="pagination.rowsPerPage"
placeholder="请选择"
size="small"
@change="handleSizeChange"
>
<el-option
v-for="item in pageOptions"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</div>
</div>
<div>条 / 页</div>
</div>
<div class="ces_page_control">
<el-button
icon="el-icon-arrow-left"
circle
size="mini"
@click="handleCurrentChange(-1)"
:disabled="pagination.page == 1"
></el-button>
&nbsp;&nbsp;第{{ pagination.page }}页 / 共{{
Math.ceil(pagination.total / pagination.rowsPerPage)
}}页
<el-button
icon="el-icon-arrow-right"
circle
size="mini"
@click="handleCurrentChange(1)"
:disabled="
<div class="ces_page_control">
<el-button
icon="el-icon-arrow-left"
circle
size="mini"
@click="handleCurrentChange(-1)"
:disabled="pagination.page == 1"
></el-button>
&nbsp;&nbsp;第{{ pagination.page }}页 / 共{{
Math.ceil(pagination.total / pagination.rowsPerPage)
}}页
<el-button
icon="el-icon-arrow-right"
circle
size="mini"
@click="handleCurrentChange(1)"
:disabled="
pagination.page >=
Math.ceil(pagination.total / pagination.rowsPerPage)
"
></el-button>
></el-button>
</div>
</div>
</section>
</section>
......@@ -673,6 +675,13 @@ em {
.th_pink {
background-color: #faf2e2 !important;
}
.ces_page_control .el-button {
border: 0;
}
.ces_page_num .el-input__inner {
border: 0;
padding: 0;
}
</style>
<style scoped>
.ces-table {
......@@ -703,13 +712,17 @@ em {
/* .ces_page_total {
} */
.ces_page_num {
width: 120px;
width: 140px;
margin-right: 20px;
display: flex;
justify-content: space-around;
align-items: center;
}
.ces_page_num_sel {
width: 66px;
width: 50px;
font-size: 14px;
position: relative;
top: 1px;
}
.table_radius {
border-radius: 8px;
......@@ -788,7 +801,9 @@ em {
background-color: #515fe7;
color: #f4f7fc;
}
.ces_page_control .el-button {
border: 0;
.ces_page_item {
display: flex;
justify-content: flex-end;
align-items: center;
}
</style>
src/pages/example_com_list.vue
View file @ 280f1b65
......@@ -17,7 +17,7 @@ export default {
BlockRadius
},
data: () => ({
list: [1, 2, 3, 4, 5, 6]
list: [{ id: 0 }, { id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }]
}),
mounted() {},
methods: {}
......
src/pages/example_table.vue
View file @ 280f1b65
......@@ -20,6 +20,7 @@
@primary-del="delItem"
:emptyText="emptyText"
:stripe="true"
:paginationShow="true"
:pageSizeShow="true"
:filterList="filterList"
cellClassName="cell_width"
......
src/pages/service_list.vue 0 → 100644
View file @ 280f1b65
<template>
<div class="service_list">
<el-container>
<el-aside width="200px">
<service-shop-menu></service-shop-menu>
</el-aside>
<el-main>
<block-radius>
<commodity-list :datas="list" url="urlssss" :paginationShow="true" :pageSizeShow="true"></commodity-list>
</block-radius>
</el-main>
</el-container>
</div>
</template>
<script>
import CommodityList from "@/components/commodity-list.vue";
import BlockRadius from "@/components/block-radius";
import ServiceShopMenu from "@/components/service_shop_menu";
export default {
components: {
"commodity-list": CommodityList,
BlockRadius,
ServiceShopMenu
},
data: () => ({
list: [{ id: 0 }, { id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }]
}),
mounted() {},
methods: {}
};
</script>
<style scoped>
</style>
\ No newline at end of file
src/router/index.js
View file @ 280f1b65
......@@ -65,6 +65,18 @@ export default new Router({
},
],
},
{
path: "/fwcs", // 服务超市
name: "fwcs",
component: () => import("@/pages/service_list"),
children: [
{
path: "/service_list", // 服务超市列表页
name: "fwcsList",
component: () => import("@/pages/service_list"),
},
],
},
],
},
{
......
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