web-test/src/views/dynamic/index.vue

<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main">
        <div class="w_1200">
          <el-col :span="24" class="dataShow">
            <el-col :span="24" class="top">
              统计监测
            </el-col>
            <el-col :span="8" class="user">
              <users></users>
            </el-col>
            <el-col :span="8" class="city">
              <maps></maps>
            </el-col>
            <el-col :span="8" class="data">
              正在洽谈，达成意向，交易成功
            </el-col>
          </el-col>
          <el-col :span="24" class="dealShow">
            <el-col :span="24" class="top">
              交易动态
            </el-col>
            <el-col :span="24" class="data">
              <pie></pie>
            </el-col>
          </el-col>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import users from './parts/user.vue';
import pie from './parts/down-pie.vue';
import maps from './parts/map.vue';
export default {
  name: 'index',
  props: {},
  components: { users, pie, maps },
  data: () => ({}),
  created() {},
  computed: {},
  methods: {},
};
</script>

<style lang="less" scoped>
.w_1200 {
  width: 80%;
  margin: 0 auto;
}
.main {
  float: left;
  width: 100%;
  margin: 20px 0;
  min-height: 600px;
}
.dataShow {
  float: left;
  width: 100%;
  height: 500px;
  overflow: hidden;
  margin: 0 0 30px 0;
  border: 1px solid red;
}
.dataShow .top {
  float: left;
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  padding: 0 15px;
  font-weight: bold;
}
.dataShow .user {
  width: 32%;
  height: 460px;
  overflow: hidden;
  border: 1px solid red;
  margin: 0 30px 0 0;
}
.dataShow .city {
  width: 32%;
  height: 460px;
  overflow: hidden;
  border: 1px solid red;
  margin: 0 30px 0 0;
}
.dataShow .data {
  width: 32%;
  height: 460px;
  overflow: hidden;
  border: 1px solid red;
  margin: 0;
}
.dealShow {
  float: left;
  width: 100%;
  height: 500px;
  overflow: hidden;
  border: 1px solid blue;
}
.dealShow .top {
  float: left;
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  padding: 0 15px;
  font-weight: bold;
}
.dealShow .data {
  height: 460px;
  overflow: hidden;
  border: 1px solid red;
  margin: 0;
}
</style>