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="12" class="left">
              <userTwo></userTwo>
            </el-col>
            <el-col :span="12" class="center">
              <maps></maps>
            </el-col>
          </el-col>
          <el-col :span="24" class="two">
            <el-image :src="centerImage"></el-image>
          </el-col>
          <el-col :span="24" class="three">
            <gzcy :list="gzcyList" @show="show"></gzcy>
          </el-col>
        </div>
      </el-col>
    </el-row>
    <el-dialog title="展会服务" :visible.sync="zhfwdialog" width="50%" :before-close="handleClose">
      <zhfw></zhfw>
    </el-dialog>
    <el-dialog title="在线咨询" :visible.sync="zxzxdialog" width="30%" :before-close="handleClose">
      <zxzx></zxzx>
    </el-dialog>
    <el-dialog title="建言献策" :visible.sync="jyxcdialog" width="30%" :before-close="handleClose">
      <jyxc @handleClose="handleClose"></jyxc>
    </el-dialog>
    <el-dialog title="网上调查" :visible.sync="wsdcdialog" width="30%" :before-close="handleClose">
      <wsdc @handleClose="handleClose"></wsdc>
    </el-dialog>
    <el-dialog title="举报邮箱" :visible.sync="jbyxdialog" width="30%" :before-close="handleClose">
      <jbyx></jbyx>
    </el-dialog>
  </div>
</template>

<script>
import userTwo from './parts/userTwo.vue';
import pie from './parts/down-pie.vue';
import maps from './parts/map.vue';
// 公众参与
import gzcy from './parts/gzcy.vue';
//展会服务
import zhfw from './downparts/zhfw.vue';
//在线咨询
import zxzx from './downparts/zxzx.vue';
// 建言献策
import jyxc from './downparts/jyxc.vue';
// 网上调查
import wsdc from './downparts/wsdc.vue';
// 举报邮箱
import jbyx from './downparts/jbyx.vue';

export default {
  name: 'index',
  props: {},
  components: { userTwo, gzcy, maps, zhfw, zxzx, jyxc, wsdc, jbyx },
  data: () => ({
    centerImage: require('@/assets/dynamic5.png'),
    // 公众参与
    gzcyList: [
      {
        url: require('@a/zhfw.png'),
        title: '展会服务',
      },
      {
        url: require('@a/fb.png'),
        title: '我要发布',
      },
      {
        url: require('@a/zxzx.png'),
        title: '在线咨询',
      },
      {
        url: require('@a/jy.png'),
        title: '建言献策',
      },
      {
        url: require('@a/wsdc.png'),
        title: '网上调查',
      },
      {
        url: require('@a/lbyx.png'),
        title: '举报邮箱',
      },
    ],
    // 展会服务
    zhfwdialog: false,
    // 在线咨询
    zxzxdialog: false,
    // 建言献策
    jyxcdialog: false,
    // 网上调查
    wsdcdialog: false,
    // 举报邮箱
    jbyxdialog: false,
  }),
  created() {},
  computed: {},
  methods: {
    show(data) {
      if (data.title == '展会服务') {
        this.zhfwdialog = true;
      } else if (data.title == '我要发布') {
        this.$router.push({ path: '/dynamic/product' });
      } else if (data.title == '建言献策') {
        this.jyxcdialog = true;
      } else if (data.title == '在线咨询') {
        this.zxzxdialog = true;
      } else if (data.title == '网上调查') {
        this.wsdcdialog = true;
      } else if (data.title == '举报邮箱') {
        this.jbyxdialog = true;
      }
    },
    // 公共关闭
    handleClose() {
      // 展会服务
      this.zhfwdialog = false;
      // 在线咨询
      this.zxzxdialog = false;
      // 建言献策
      this.jyxcdialog = false;
      // 网上调查
      this.wsdcdialog = false;
      // 举报邮箱
      this.jbyxdialog = false;
    },
  },
};
</script>

<style lang="less" scoped>
.w_1200 {
  width: 1200px;
  margin: 0 auto;
}
.main {
  float: left;
  width: 100%;
  margin: 20px 0;
  min-height: 600px;
  .dataShow {
    width: 100%;
    height: 505px;
    margin: 0 0 30px 0;
    .left {
      height: 500px;
      box-shadow: 0 0 5px #0370af;
      border-radius: 10px;
      margin: 0 15px 0 0;
      width: 48%;
    }
    .center {
      height: 500px;
      box-shadow: 0 0 5px #0370af;
      border-radius: 10px;
    }
  }
  .two {
    float: left;
    width: 100%;
    height: 140px;
    overflow: hidden;
  }
  .three {
    overflow: hidden;
    height: 255px;
    box-shadow: 0 0 10px #2d64b3;
    border-radius: 10px;
    margin: 15px 0 0 0;
  }
}
</style>