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

