应用仓库列表

src/components/app-card.vue

+<template>
+  <div class="app_card">
+    <a class="remove_btn" @click.prevent="deleteApp">
+      <i class="el-icon-close"></i>
+    </a>
+    <div class="app_card-icon">
+      <el-avatar shape="square" :size="56" fit="cover" :src="data.img" />
+    </div>
+    <div class="app_card-info">
+      <p class="app_card-name text_clip" v-text="data.name"></p>
+      <p class="app_card-version text_clip" v-text="data.version"></p>
+    </div>
+    <div class="app_card-action">
+      <el-button type="primary" plain @click="deploymentAction">
+        一键部署
+      </el-button>
+    </div>
+    <!-- <p class="app_card-text">
+      <span>
+        <i class="el-icon-time"></i>
+        <span>上线时间：</span>
+      </span>
+      <span class="text_clip" v-text="data.time"></span>
+    </p> -->
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    data: {
+      type: Object,
+      default: {},
+    },
+  },
+  methods: {
+    deploymentAction() {
+      console.log("一键部署 --- " + this.data.id);
+    },
+    deleteApp() {
+      console.log("删除应用 --- " + this.data.id);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.app_card {
+  width: calc(20% - 36px);
+  background-image: url(../assets/imgs/bg_block.png);
+  background-size: 100% 100%;
+  padding: 33px 25px 34px;
+  box-sizing: border-box;
+  margin: 0 18px 38px;
+  display: inline-flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  position: relative;
+}
+.app_card:hover {
+  background-image: url(../assets/imgs/bg_block_hov.png);
+}
+.app_card > .remove_btn {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  font-size: 20px;
+  color: #8890a7;
+  cursor: pointer;
+}
+.app_card > .app_card-icon {
+  margin-right: 18px;
+}
+.app_card > .app_card-info {
+  width: calc(100% - 56px - 20px);
+}
+.app_card-info > .app_card-name {
+  font-size: 18px;
+  line-height: 32px;
+  color: #0d1847;
+}
+.app_card-info > .app_card-version {
+  font-size: 14px;
+  line-height: 25px;
+  color: #8890a7;
+  margin-top: 5px;
+}
+.app_card > .app_card-action {
+  width: 100%;
+  text-align: center;
+  margin: 34px 0 5px;
+}
+.app_card-action > .el-button {
+  width: 100%;
+}
+.app_card-text {
+  width: 100%;
+  font-size: 14px;
+  color: #8890a7;
+  line-height: 25px;
+  margin-top: 19px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.app_card-text > span:nth-child(1) {
+  flex-shrink: 0;
+}
+</style>
+
+<style>
+.app_card-action > .el-button--primary.is-plain {
+  background-color: #d0d5e7;
+  border-color: #a5afd6;
+  color: #0f2683;
+}
+</style>

src/components/app-list.vue

+<template>
+  <div class="app_list">
+    <app-card
+      v-for="(item, index) in data"
+      :key="'app_card_' + index"
+      :data="item"
+    ></app-card>
+  </div>
+</template>
+
+<script>
+import appCard from "./app-card";
+
+export default {
+  components: {
+    appCard,
+  },
+  props: {
+    data: {
+      type: Array,
+      default: [],
+    },
+  },
+};
+</script>
+
+<style scoped>
+.app_list {
+  margin: 20px -25px 0;
+  padding: 30px 0 0;
+  border-top: 1px solid #e3e5ef;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+</style>

src/components/table-filter.vue

@@ -133,20 +133,6 @@ export default {
 
 <style scoped>
 .ces_filter_container {
-  background-color: #f7f8f9;
-  padding: 14px 19px;
-  border: 1px solid #e3e5ef;
-  border-radius: 6px;
-  margin: 0 0 10px;
-}
-.ces_filter_container > li {
-  display: flex;
-  justify-content: flex-start;
-  align-items: flex-start;
-  padding-top: 12px;
-}
-.ces_filter_container {
-  background-color: #f7f8f9;
   padding: 14px 19px;
   border: 1px solid #e3e5ef;
   border-radius: 6px;

src/components/table-um.vue

@@ -7,7 +7,7 @@
           v-if="filterList && filterList.length"
           size="small"
           style="float: left;"
-          @click="filterAction"
+          @click="showFliterList = !showFliterList"
         >
           {{ showFliterList ? "收起" : "筛选" }}
           <i
@@ -513,9 +513,6 @@ export default {
     getTableData() {
       return this.selectedTabsPage;
     },
-    filterAction() {
-      this.showFliterList = !this.showFliterList;
-    },
     filterChange(filter) {
       console.log(filter);
     }

src/pages/yyglList.vue

@@ -6,19 +6,175 @@
         <el-breadcrumb-item>{{ pathName }}</el-breadcrumb-item>
       </el-breadcrumb>
     </div>
-    <div class="main_container"></div>
+    <div class="main_container">
+      <div class="filter_contaner">
+        <el-button
+          v-if="filterList && filterList.length"
+          size="small"
+          @click="showFliterList = !showFliterList"
+        >
+          {{ showFliterList ? "收起" : "筛选" }}
+          <i
+            class="el-icon--right"
+            :class="
+              showFliterList ? 'el-icon-caret-bottom' : 'el-icon-caret-top'
+            "
+          ></i>
+        </el-button>
+        <table-filter
+          :show="showFliterList"
+          :filter-list="filterList"
+          @filter-change="filterChange"
+          style="margin-top: 5px;"
+        ></table-filter>
+      </div>
+      <app-list :data="appList"></app-list>
+      <comments-pagination
+        :total="100"
+        :page-sizes="pageSizes"
+        :page-size="pageSize"
+        :current-page="currentPage"
+        @size-change="changePageSize"
+        @current-change="changeCurrentPage"
+      ></comments-pagination>
+    </div>
   </div>
 </template>
 
 <script>
-import cesTable from "@/components/table-um";
+import tableFilter from "@/components/table-filter";
+import appList from "@/components/app-list";
+import tableUm from "@/components/table-um";
 import dialogAction from "@/components/dialog-action";
+import commentsPagination from "@/components/comments-pagination";
 import { mapState } from "vuex";
 
 export default {
+  components: {
+    tableFilter,
+    appList,
+    tableUm,
+    dialogAction,
+    commentsPagination,
+  },
   data: () => ({
     level: 0, // 用户等级
     type: 0, // 访问的页面
+    showFliterList: false,
+    filterList: [
+      {
+        name: "在线状态",
+        prop: "zxzt",
+        data: ["平台应用", "开发者应用", "未上架"],
+      },
+      {
+        name: "应用类型",
+        prop: "yylx",
+        data: ["基础工具", "通用工具", "业务应用"],
+      },
+      {
+        name: "业务领域",
+        prop: "ywly",
+        data: [
+          "公安应用",
+          "应急应用",
+          "政务服务应用",
+          "金融应用",
+          "交通应用",
+          "旅游应用",
+        ],
+      },
+      {
+        name: "是否支持开发",
+        prop: "sfzckf",
+        data: ["全部", "支持开发", "不支持开发"],
+      },
+    ],
+    appList: [
+      {
+        id: 1000001,
+        img:
+          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+        name: "mapvideos",
+        version: "V2.0",
+        time: "2019-04-11 12:50:30",
+      },
+      {
+        id: 1000002,
+        img:
+          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+        name: "语音识别",
+        version: "V2.0",
+        time: "2019-04-11 12:50:30",
+      },
+      {
+        id: 1000003,
+        img:
+          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+        name: "轨迹绘制",
+        version: "V2.0",
+        time: "2019-04-11 12:50:30",
+      },
+      {
+        id: 1000004,
+        img:
+          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+        name: "轨迹绘制",
+        version: "V2.1",
+        time: "2019-04-11 12:50:30",
+      },
+      {
+        id: 1000005,
+        img:
+          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+        name: "轨迹绘制",
+        version: "V2.2",
+        time: "2019-04-11 12:50:30",
+      },
+      {
+        id: 1000006,
+        img:
+          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+        name: "轨迹绘制",
+        version: "V2.3",
+        time: "2019-04-11 12:50:30",
+      },
+      {
+        id: 1000007,
+        img:
+          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+        name: "轨迹绘制",
+        version: "V2.4",
+        time: "2019-04-11 12:50:30",
+      },
+      {
+        id: 100000,
+        img:
+          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+        name: "轨迹绘制",
+        version: "V2.5",
+        time: "2019-04-11 12:50:30",
+      },
+      {
+        id: 1000009,
+        img:
+          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+        name: "轨迹绘制",
+        version: "V2.6",
+        time: "2019-04-11 12:50:30",
+      },
+      {
+        id: 1000010,
+        img:
+          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+        name: "轨迹绘制",
+        version: "V2.7",
+        time: "2019-04-11 12:50:30",
+      },
+    ],
+    pageSizes: [10, 50, 100],
+    pageSize: 10,
+    currentPage: 1,
   }),
   computed: {
     ...mapState({
@@ -28,11 +184,18 @@ export default {
       return this.yyglNav[this.level][this.type];
     },
   },
-  components: {
-    cesTable,
-    dialogAction,
+  methods: {
+    filterChange(filter) {
+      console.log(filter);
+    },
+    changePageSize(value) {
+      this.pageSize = value;
+      this.currentPage = 1;
+    },
+    changeCurrentPage(value) {
+      this.currentPage = value;
+    },
   },
-  methods: {},
   created() {
     this.level = parseInt(this.$route.params.level);
     this.type = parseInt(this.$route.params.type);
@@ -52,6 +215,6 @@ export default {
   background-color: #fff;
 }
 .main_container .ces-table-page {
-  margin-top: 42px;
+  margin-top: 18px;
 }
 </style>