服务列表+服务详情（按原型写的）

src/components/commodity-cell.vue

+<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>
+

src/components/commodity-list.vue

+<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>
+

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

src/pages/example_com_list.vue

+<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

src/pages/example_commodity.vue

 <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>

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",

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")
     }
   ]
 });