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">
              <span></span>
            </el-col>
            <el-col :span="24" class="dataShowInfo">
              <el-col :span="8" class="left">
                <el-col :span="1" class="leftTit">
                  <p>数据展示</p>
                  <p></p>
                </el-col>
                <el-col :span="23" class="leftInfo">
                  <userTwo></userTwo>
                </el-col>
              </el-col>
              <el-col :span="8" class="center">
                <maps></maps>
              </el-col>
              <el-col :span="8" class="right">
                <el-col :span="23" class="rightInfo">
                  信息
                </el-col>
                <el-col :span="1" class="rightTit">
                  <p></p>
                  <p>数据展示</p>
                </el-col>
              </el-col>
            </el-col>
            <el-col :span="24" class="top down">
              <span></span>
            </el-col>
          </el-col>
          <el-col :span="24" class="dataImage">
            <el-image :src="centerImage"></el-image>
          </el-col>
          <el-col :span="24" class="dealShow">
            <el-col :span="24" class="top">
              <span></span>
            </el-col>
            <el-col :span="24" class="dealInfo">
              <el-col :span="1" class="dealInfoTit">
                <p>交易动态</p>
                <p></p>
              </el-col>
              <el-col :span="22" class="dealInfoLeft">
                <pie></pie>
              </el-col>
              <el-col :span="1" class="dealInfoTit dealInfoTitTwo">
                <p></p>
                <p>交易动态</p>
              </el-col>
            </el-col>
            <el-col :span="24" class="top down">
              <span></span>
            </el-col>
          </el-col>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import userTwo from './parts/userTwo.vue';
import pie from './parts/down-pie.vue';
import maps from './parts/map.vue';
export default {
  name: 'index',
  props: {},
  components: { userTwo, maps, pie },
  data: () => ({
    centerImage: require('@/assets/dynamic5.png'),
  }),
  created() {},
  computed: {},
  methods: {},
};
</script>

<style lang="less" scoped>
.w_1200 {
  width: 80%;
  margin: 0 auto;
}
.main {
  float: left;
  width: 100%;
  margin: 40px 0;
  min-height: 600px;
}
.dataShow {
  float: left;
  width: 100%;
  height: 709px;
  overflow: hidden;
  margin: 0 0 30px 0;
}
.dataShow .top {
  float: left;
  width: 100%;
  height: 1px;
}
.dataShow .top span {
  float: right;
  width: 30%;
  height: 1px;
  background: #9cb9cb;
}
.dataShow .down span {
  float: left;
  width: 35%;
  height: 1px;
  background: #9cb9cb;
}
.dataShow .dataShowInfo {
  float: left;
  width: 100%;
  height: 707px;
}
.dataShow .dataShowInfo .left {
  float: left;
  width: 33%;
  height: 707px;
}
.dataShow .dataShowInfo .left p:first-child {
  float: left;
  width: 100%;
  height: 100px;
  font-size: 18px;
  color: #003e70;
  font-weight: bold;
}
.dataShow .dataShowInfo .left p:last-child {
  float: left;
  width: 2px;
  height: 606px;
  background: #003e70;
  margin: 0;
  position: relative;
  left: 5px;
}
.dataShow .dataShowInfo .center {
  float: left;
  width: 33%;
  height: 707px;
  border: 1px solid red;
}
.dataShow .dataShowInfo .right {
  float: left;
  width: 34%;
  height: 707px;
  border: 1px solid red;
}
.dataShow .dataShowInfo .right p:first-child {
  float: left;
  width: 2px;
  height: 606px;
  background: #003e70;
  margin: 0;
  position: relative;
  left: 5px;
}
.dataShow .dataShowInfo .right p:last-child {
  float: left;
  width: 100%;
  height: 100px;
  font-size: 18px;
  color: #003e70;
  font-weight: bold;
}
.dataImage {
  float: left;
  width: 100%;
  height: 160px;
  margin: 20px 0;
  overflow: hidden;
}
.dataImage .el-image {
  width: 100%;
  height: 160px;
}
.dealShow {
  float: left;
  width: 100%;
  height: 500px;
  overflow: hidden;
}
.dealShow .top {
  float: left;
  width: 100%;
  height: 1px;
}
.dealShow .top span {
  float: right;
  width: 30%;
  height: 1px;
  background: #9cb9cb;
}
.dealShow .down span {
  float: left;
  width: 35%;
  height: 1px;
  background: #9cb9cb;
}
.dealShow .dealInfo {
  float: left;
  width: 100%;
  height: 496px;
}
.dealShow .dealInfo .dealInfoTit {
  width: 20px;
  height: 496px;
}
.dealShow .dealInfo .dealInfoTit p:first-child {
  float: left;
  width: 100%;
  height: 100px;
  font-size: 18px;
  color: #003e70;
  font-weight: bold;
}
.dealShow .dealInfo .dealInfoTit p:last-child {
  float: left;
  width: 2px;
  height: 395px;
  background: #003e70;
  margin: 0;
  position: relative;
  left: 5px;
}
.dealShow .dealInfo .dealInfoTitTwo p:first-child {
  float: left;
  width: 2px;
  height: 395px;
  background: #003e70;
  margin: 0;
  position: relative;
  left: 10px;
}
.dealShow .dealInfo .dealInfoTitTwo p:last-child {
  float: left;
  width: 100%;
  height: 100px;
  font-size: 18px;
  color: #003e70;
  font-weight: bold;
  background: transparent;
}
.dealShow .dealInfo .dealInfoLeft {
  width: 95%;
  height: 495px;
  margin: 0 15px;
  padding: 45px 0;
}
</style>