From 80204d08eda36faa49aa201b97a8884a2eca87cc Mon Sep 17 00:00:00 2001
From: liudianxin <liudianxin@bd-apaas.com>
Date: Thu, 30 Apr 2020 18:48:13 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9C=8D=E5=8A=A1=E5=88=97=E8=A1=A8+=E6=9C=8D?=
 =?UTF-8?q?=E5=8A=A1=E8=AF=A6=E6=83=85=EF=BC=88=E6=8C=89=E5=8E=9F=E5=9E=8B?=
 =?UTF-8?q?=E5=86=99=E7=9A=84=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/commodity-cell.vue | 95 +++++++++++++++++++++++++++++++
 src/components/commodity-list.vue | 25 ++++++++
 src/components/commodity.vue      | 94 +++++++++++++++++++++++-------
 src/pages/example_com_list.vue    | 31 ++++++++++
 src/pages/example_commodity.vue   | 18 +++++-
 src/pages/example_table.vue       |  6 +-
 src/router/index.js               |  5 ++
 7 files changed, 249 insertions(+), 25 deletions(-)
 create mode 100644 src/components/commodity-cell.vue
 create mode 100644 src/components/commodity-list.vue
 create mode 100644 src/pages/example_com_list.vue

diff --git a/src/components/commodity-cell.vue b/src/components/commodity-cell.vue
new file mode 100644
index 0000000..f8f5227
--- /dev/null
+++ b/src/components/commodity-cell.vue
@@ -0,0 +1,95 @@
+<template>
+  <div class="com_cell">
+    <div class="com_cell_img_box">
+      <img
+        src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
+        class="com_cell_img"
+      />
+    </div>
+    <div class="com_cell_message">
+      <div class="com_cell_msg_title">水路货物周转量情况</div>
+      <div class="com_cell_item">
+        <span class="com_cell_item_title">资源摘要：</span>
+        <span
+          class="com_cell_data"
+        >提供水路货物周转量排名和同比增长的专题数据服务提供水路货物周转量排名和同比增长的专题数据服务提供水路货物周转量排名和同比增长的专题数据服务</span>
+      </div>
+      <div class="com_cell_item">
+        <span class="com_cell_item_title">提供机构：</span>
+        <span class="com_cell_data">贵州省交通运输厅</span>
+      </div>
+      <div class="com_cell_item">
+        <span class="com_cell_item_title">数据领域：</span>
+        <span class="com_cell_data">经济建设</span>
+      </div>
+      <div class="com_cell_item">
+        <span class="com_cell_item_title">服务类型：</span>
+        <span class="com_cell_data">数据服务 专题数据服务 企业专题数据服务</span>
+      </div>
+      <div class="com_cell_item">
+        <span class="com_cell_item_title">更新时间：</span>
+        <span class="com_cell_data">2020-03-12 18:31:12</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  data: () => ({}),
+  computed: {},
+  watch: {},
+  methods: {},
+  mounted() {}
+};
+</script>
+
+<style scoped>
+.com_cell {
+  display: flex;
+  justify-content: flex-start;
+  padding: 10px;
+  border-bottom: 2px #f4f7fc solid;
+}
+.com_cell_img_box {
+  width: 166px;
+  height: 166px;
+  border-radius: 12px;
+  overflow: hidden;
+}
+.com_cell_img {
+  width: 100%;
+  height: 100%;
+}
+.com_cell_message {
+  padding-left: 20px;
+  width: calc(100% - 190px);
+}
+.com_cell_msg_title {
+  color: #0d1847;
+  font-size: 22px;
+  font-weight: 700;
+  margin-bottom: 6px;
+}
+.com_cell_item {
+  font-size: 16px;
+  line-height: 26px;
+  margin-top: 1px;
+  color: #51ac14;
+  display: flex;
+  align-self: start;
+}
+.com_cell_item_title {
+  width: 80px;
+}
+.com_cell_data {
+  display: inline-block;
+  width: calc(100% - 90px);
+  color: #f1ac14;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>
+
diff --git a/src/components/commodity-list.vue b/src/components/commodity-list.vue
new file mode 100644
index 0000000..c8c908e
--- /dev/null
+++ b/src/components/commodity-list.vue
@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <commodity-cell v-for="item in list" :key="item"></commodity-cell>
+  </div>
+</template>
+
+<script>
+import CommodityCell from "@/components/commodity-cell.vue";
+export default {
+  components: {
+    "commodity-cell": CommodityCell
+  },
+  data: () => ({
+    list: [1, 2, 3, 4, 5, 6]
+  }),
+  computed: {},
+  watch: {},
+  methods: {},
+  mounted() {}
+};
+</script>
+
+<style scoped>
+</style>
+
diff --git a/src/components/commodity.vue b/src/components/commodity.vue
index aa66a40..74f2430 100644
--- a/src/components/commodity.vue
+++ b/src/components/commodity.vue
@@ -2,65 +2,90 @@
   <div class="commodity">
     <el-row>
       <el-col :span="24">
-        <div class="com_title">水路货物周转量情况</div>
+        <div class="com_title">{{ datas.productName }}</div>
       </el-col>
-      <el-col :span="12">
+      <el-col :span="11">
+        <div>
+          <img
+            src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
+            class="commodity_img"
+          />
+        </div>
         <div class="com_item">
           <span class="com_item_title">提供机构：</span>
-          <span class="com_data">北京比格数据</span>
+          <span class="com_data">{{ datas.providedBy }}</span>
         </div>
         <div class="com_item">
           <span class="com_item_title">发布时间：</span>
-          <span class="com_data">2020-03-12 18:31:12</span>
+          <span class="com_data">{{ datas.releaseTime }}</span>
         </div>
         <div class="com_item">
           <span class="com_item_title">更新时间：</span>
-          <span class="com_data">2020-03-12 18:31:12</span>
+          <span class="com_data">{{ datas.updated }}</span>
         </div>
         <div class="com_item">
           <span class="com_item_title">数据领域：</span>
-          <span class="com_data">经济建设</span>
+          <span class="com_data">{{ datas.dataField }}</span>
         </div>
         <div class="com_item">
           <span class="com_item_title">服务类型：</span>
-          <span class="com_data">综合应用服务</span>
+          <span class="com_data">{{ datas.serviceType }}</span>
         </div>
         <div class="com_item">
           <span class="com_item_title">资源摘要：</span>
-          <span
-            class="com_data"
-          >提供视频监控的空间分布展示和视频监控直播的服务提供视频监控的空间分布展示和视频监控直播的服务提供视频监控的空间分布展示和视频监控直播的服务</span>
+          <span class="com_data">{{ datas.resourceSummary }}</span>
         </div>
         <div class="com_item">
           <span class="com_item_title">开放级别：</span>
           <span class="com_data">
-            <el-tag size="small">共享</el-tag>
+            <el-tag size="small">{{ datas.openLevel }}</el-tag>
           </span>
         </div>
         <div class="com_item">
           <span class="com_item_title">浏览次数：</span>
-          <span class="com_data_view">99999</span>
+          <span class="com_data_view">{{ datas.views }}</span>
           <span class="com_item_title">获取次数：</span>
-          <span class="com_data_get">99999</span>
+          <span class="com_data_get">{{ datas.numberOfAcquisitions }}</span>
         </div>
       </el-col>
-      <el-col :span="12">
+      <el-col :span="11" :offset="2">
         <div class="com_item">
           <span class="com_item_title">规格：</span>
-          <span class="com_data">综合应用服务</span>
+          <span class="com_data">
+            <el-button size="mini" class="com_data_button_btm" round>超小按钮</el-button>
+            <el-button size="mini" class="com_data_button_btm" round>超小按钮</el-button>
+            <el-button size="mini" class="com_data_button_btm" round>超小按钮</el-button>
+            <el-button size="mini" class="com_data_button_btm" round>超小按钮</el-button>
+            <el-button size="mini" class="com_data_button_btm" round>超小按钮</el-button>
+            <el-button size="mini" class="com_data_button_btm" round>超小按钮</el-button>
+            <el-button size="mini" class="com_data_button_btm" round>超小按钮</el-button>
+            <el-button size="mini" class="com_data_button_btm" round>超小按钮</el-button>
+            <el-button size="mini" class="com_data_button_btm" round>超小按钮</el-button>
+            <el-button size="mini" class="com_data_button_btm" round>超小按钮</el-button>
+          </span>
         </div>
         <div class="com_item">
           <span class="com_item_title">规格说明：</span>
-          <span class="com_data">综合应用服务</span>
+          <span class="com_data">{{ datas.specifications }}</span>
         </div>
         <div class="com_item">
           <span class="com_item_title">购买方式：</span>
-          <span class="com_data">综合应用服务</span>
+          <span class="com_data">
+            <el-button size="mini" class="com_data_button_btm" round>超小按钮</el-button>
+            <el-button size="mini" class="com_data_button_btm" round>超小按钮</el-button>
+          </span>
         </div>
         <div class="com_item">
           <span class="com_item_title">购买时长：</span>
           <span class="com_data">
-            <el-input-number v-model="num" @change="handleChange" size="small" :min="1" :max="10" label="描述文字"></el-input-number>月
+            <el-input-number
+              v-model="num"
+              @change="handleChange"
+              size="small"
+              :min="1"
+              :max="12"
+              label="描述文字"
+            ></el-input-number>&nbsp;月
           </span>
         </div>
       </el-col>
@@ -71,6 +96,24 @@
 <script>
 export default {
   components: {},
+  props: {
+    datas: {
+      type: Object,
+      default: {
+        productName: "",
+        providedBy: "",
+        releaseTime: "",
+        updated: "",
+        dataField: "",
+        serviceType: "",
+        resourceSummary: "",
+        openLevel: "",
+        views: "",
+        numberOfAcquisitions: "",
+        specifications: ""
+      }
+    }
+  },
   data: () => ({
     num: 1
   }),
@@ -111,5 +154,18 @@ export default {
 .com_data_get {
   color: #f1ac14;
 }
+.com_data_button_btm {
+  margin-bottom: 10px;
+}
+.commodity_img {
+  width: 100%;
+}
 </style>
-
+<style>
+.com_data .el-input-number__decrease {
+  border-radius: 8px 0 0 8px;
+}
+.com_data .el-input-number__increase {
+  border-radius: 0 8px 8px 0;
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/example_com_list.vue b/src/pages/example_com_list.vue
new file mode 100644
index 0000000..2f014b3
--- /dev/null
+++ b/src/pages/example_com_list.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="com_ex">
+    <block-radius>
+      <h3>商品列表，分页啥乱七八糟的都没有，再说</h3>
+      <commodity-list :datas="datas"></commodity-list>
+    </block-radius>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import CommodityList from "@/components/commodity-list.vue";
+import BlockRadius from "@/components/block-radius";
+export default {
+  components: {
+    "commodity-list": CommodityList,
+    BlockRadius
+  },
+  data: () => ({
+    datas: {}
+  }),
+  mounted() {},
+  methods: {}
+};
+</script>
+<style scoped>
+.com_ex {
+  margin-top: 100px;
+  padding: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/example_commodity.vue b/src/pages/example_commodity.vue
index 1034c21..81affe1 100644
--- a/src/pages/example_commodity.vue
+++ b/src/pages/example_commodity.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="com_ex">
     <block-radius>
+      <h3>按原型大致做了一下，调优等后续</h3>
       <Commodity :datas="datas" />
     </block-radius>
   </div>
@@ -17,11 +18,22 @@ export default {
   },
   data: () => ({
     datas: {
-
+      productName: "地图视频融合服务",
+      providedBy: "北京比格数据",
+      releaseTime: "2020-03-12 18:31:12",
+      updated: "2020-03-12 18:31:12",
+      dataField: "经济建设",
+      serviceType: "综合应用服务",
+      resourceSummary:
+        "提供视频监控的空间分布展示和视频监控直播的服务提供视频监控的空间分布展示和视频监控直播的服务",
+      openLevel: "共享",
+      views: "99999",
+      numberOfAcquisitions: "99999",
+      specifications:
+        "用户服务申请通过审核确认后，每日可对应急资源地图进行20次免费访问用户服务申请通过审核确认后，每日可对应急资源地图进行20次免费访问"
     }
   }),
-  mounted() {
-  },
+  mounted() {},
   methods: {}
 };
 </script>
diff --git a/src/pages/example_table.vue b/src/pages/example_table.vue
index 246ae92..0493d86 100644
--- a/src/pages/example_table.vue
+++ b/src/pages/example_table.vue
@@ -75,9 +75,9 @@ import cesTable from "@/components/table-um";
 export default {
   data: () => ({
     headers: [
-      { label: "服务url", prop: "date", type: "href", align: "left",minWidth: "50%" },
-      { label: "服务名称", prop: "name", type: "href", align: "center" },
-      { label: "中文名", prop: "address", type: "href", align: "right" },
+      { label: "服务url", prop: "date", type: "href", align: "left", minWidth: "50%" },
+      { label: "服务名称", prop: "name", type: "href", align: "center", minWidth: "60%" },
+      { label: "中文名", prop: "address", type: "href", align: "right",width: "100" },
       {
         label: "操作",
         type: "Button",
diff --git a/src/router/index.js b/src/router/index.js
index 431910e..29c9d41 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -91,6 +91,11 @@ export default new Router({
       path: "/example_commodity", // 商品详情实例
       name: "example_commodity",
       component: () => import("@/pages/example_commodity")
+    },
+    {
+      path: "/example_com_list", // 商品列表实例
+      name: "example_com_list",
+      component: () => import("@/pages/example_com_list")
     }
   ]
 });
-- 
2.26.0