表格百分比宽度，商品详情，codes-maxline38

src/components/codes.vue

@@ -22,7 +22,7 @@ export default {
 
   mounted() {
     this.aceEditor = ace.edit(this.$refs.ace, {
-      maxLines: 36,
+      maxLines: 38,
       minLines: 10,
       fontSize: 14,
       mode: this.acemodePath,

src/components/commodity.vue

+<template>
+  <div class="commodity">
+    <el-row>
+      <el-col :span="24">
+        <div class="com_title">水路货物周转量情况</div>
+      </el-col>
+      <el-col :span="12">
+        <div class="com_item">
+          <span class="com_item_title">提供机构：</span>
+          <span class="com_data">北京比格数据</span>
+        </div>
+        <div class="com_item">
+          <span class="com_item_title">发布时间：</span>
+          <span class="com_data">2020-03-12 18:31:12</span>
+        </div>
+        <div class="com_item">
+          <span class="com_item_title">更新时间：</span>
+          <span class="com_data">2020-03-12 18:31:12</span>
+        </div>
+        <div class="com_item">
+          <span class="com_item_title">数据领域：</span>
+          <span class="com_data">经济建设</span>
+        </div>
+        <div class="com_item">
+          <span class="com_item_title">服务类型：</span>
+          <span class="com_data">综合应用服务</span>
+        </div>
+        <div class="com_item">
+          <span class="com_item_title">资源摘要：</span>
+          <span
+            class="com_data"
+          >提供视频监控的空间分布展示和视频监控直播的服务提供视频监控的空间分布展示和视频监控直播的服务提供视频监控的空间分布展示和视频监控直播的服务</span>
+        </div>
+        <div class="com_item">
+          <span class="com_item_title">开放级别：</span>
+          <span class="com_data">
+            <el-tag size="small">共享</el-tag>
+          </span>
+        </div>
+        <div class="com_item">
+          <span class="com_item_title">浏览次数：</span>
+          <span class="com_data_view">99999</span>
+          <span class="com_item_title">获取次数：</span>
+          <span class="com_data_get">99999</span>
+        </div>
+      </el-col>
+      <el-col :span="12">
+        <div class="com_item">
+          <span class="com_item_title">规格：</span>
+          <span class="com_data">综合应用服务</span>
+        </div>
+        <div class="com_item">
+          <span class="com_item_title">规格说明：</span>
+          <span class="com_data">综合应用服务</span>
+        </div>
+        <div class="com_item">
+          <span class="com_item_title">购买方式：</span>
+          <span class="com_data">综合应用服务</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>月
+          </span>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  data: () => ({
+    num: 1
+  }),
+  computed: {},
+  watch: {},
+  methods: {},
+  mounted() {}
+};
+</script>
+
+<style scoped>
+.commodity {
+  padding: 10px;
+}
+.com_title {
+  font-size: 22px;
+}
+.com_item {
+  font-size: 16px;
+  line-height: 26px;
+  margin-top: 10px;
+  color: #51ac14;
+  display: flex;
+  align-self: start;
+}
+.com_item_title {
+  width: 80px;
+}
+.com_data {
+  display: inline-block;
+  width: calc(100% - 90px);
+  color: #f1ac14;
+}
+.com_data_view {
+  color: #f1ac14;
+  margin-right: 10px;
+}
+.com_data_get {
+  color: #f1ac14;
+}
+</style>
+

src/components/table-um.vue

@@ -99,6 +99,7 @@
           :label="item.label"
           :width="item.width"
           :align="item.align"
+          :min-width="item.minWidth"
           :render-header="item.require ? renderHeader : null"
         >
           <template slot-scope="scope">

src/pages/example_commodity.vue

+<template>
+  <div class="com_ex">
+    <block-radius>
+      <Commodity :datas="datas" />
+    </block-radius>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import Commodity from "@/components/commodity.vue";
+import BlockRadius from "@/components/block-radius";
+export default {
+  components: {
+    Commodity,
+    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_table.vue

@@ -11,9 +11,9 @@
       :searchShow="true"
       :addRowBtn="addRowBtn"
       :autoAdd="false"
-      :isDialog="true"
-      :isSelection="true"
-      :isIndex="true"
+      :isDialog="false"
+      :isSelection="false"
+      :isIndex="false"
       :confirmOptions="confirmOptions"
       :detailsUrl="detailsUrl"
       @primary-edit="editItem"
@@ -21,6 +21,7 @@
       :stripe="true"
       :pageSizeShow="true"
       :filterList="filterList"
+      cellClassName="cell_width"
     ></ces-table>
     <h3>可编辑表格，供服务测试用</h3>
     <ces-table
@@ -74,7 +75,7 @@ import cesTable from "@/components/table-um";
 export default {
   data: () => ({
     headers: [
-      { label: "服务url", prop: "date", type: "href", align: "left" },
+      { label: "服务url", prop: "date", type: "href", align: "left",minWidth: "50%" },
       { label: "服务名称", prop: "name", type: "href", align: "center" },
       { label: "中文名", prop: "address", type: "href", align: "right" },
       {

src/pages/fwzc_fwcs.vue

@@ -171,14 +171,14 @@
 </template>
 
 <script>
-import blockRadius from "@/components/block-radius";
-import cesTable from "@/components/table-um";
-import codes from "@/components/codes";
+import BlockRadius from "@/components/block-radius";
+import CesTable from "@/components/table-um";
+import Codes from "@/components/codes";
 export default {
   components: {
-    blockRadius,
-    cesTable,
-    "v-apaas-code": codes
+    BlockRadius,
+    CesTable,
+    "v-apaas-code": Codes
   },
   data: () => ({
     btnList: [

src/router/index.js

@@ -60,6 +60,11 @@ export default new Router({
       path: "/example_topology", // 拓扑图实例
       name: "example_topology",
       component: () => import("@/pages/example_topology")
+    },
+    {
+      path: "/example_commodity", // 商品详情实例
+      name: "example_commodity",
+      component: () => import("@/pages/example_commodity")
     }
   ]
 });