web-website/src/components/trial/index.vue

<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="top">
        <top></top>
      </el-col>
      <el-col :span="24" class="logo">
        <div class="w_1200">
          <logo :info="info"></logo>
        </div>
      </el-col>
      <el-col :span="24" class="menu">
        <div class="w_1200">
          <menuInfo></menuInfo>
        </div>
      </el-col>
      <el-col :span="24" class="main">
        <div class="w_1200">
          <el-col :span="5" class="left">
            <el-col :span="24" class="leftTop">
              <native :nativeList="nativeList" v-on="$listeners"></native>
            </el-col>
            <el-col :span="24" class="leftDown">
              <question></question>
            </el-col>
          </el-col>
          <el-col :span="19" class="right">
            <span v-if="display === 'first'">
              <userInfo :userInfos="userInfos"></userInfo>
            </span>
            <span v-else-if="display === 'second'">
              <userAdmin :userList="userList" :userListTotal="userListTotal" :adminList="adminList" :adminListTotal="adminListTotal"></userAdmin>
            </span>
            <span v-else-if="display === 'third'">
              <userAudit
                v-on="$listeners"
                :alreadyList="alreadyList"
                :alreadyListTotal="alreadyListTotal"
                :notList="notList"
                :notListTotal="notListTotal"
                :JiaoyiList="JiaoyiList"
                :JiaoyiTotal="JiaoyiTotal"
                :alreadyTwoList="alreadyTwoList"
                :alreadyTwoListTotal="alreadyTwoListTotal"
                :notTwoList="notTwoList"
                :notTwoListTotal="notTwoListTotal"
                :JiaoyiTwoList="JiaoyiTwoList"
                :JiaoyiTwoListTotal="JiaoyiTwoListTotal"
              ></userAudit>
            </span>
            <span v-else-if="display === 'fourth'">
              <userStat></userStat>
            </span>
            <span v-else>
              注销账号
            </span>
          </el-col>
        </div>
      </el-col>
      <el-col :span="24" class="foot">
        <div class="w_1200">
          <foot :info="info"></foot>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import top from '@/layout/index/top.vue';
import logo from '@/layout/index/logo.vue';
import menuInfo from '@/layout/index/menuInfo.vue';
import foot from '@/layout/index/foot.vue';
import question from '@/layout/personCenter/question.vue';
import native from '@/layout/trial/native.vue';
import userInfo from '@/layout/trial/userInfo.vue';
import userAdmin from '@/layout/trial/userAdmin.vue';
import userAudit from '@/layout/trial/userAudit.vue';
import userStat from '@/layout/trial/userStat.vue';
export default {
  name: 'index',
  props: {
    info: null, //站点信息
    nativeList: null, //导航
    display: { type: String, default: 'first' },
    userInfos: null, //基本信息
    userList: null, //待审用户
    userListTotal: null, //待审用户分页
    adminList: null, //已审用户
    adminListTotal: null, //已审用户分页
    // 我的需求
    alreadyList: null, //审核信息-已审核信息
    alreadyListTotal: null, //审核信息-已审核信息分页
    notList: null, //审核信息-审核中信息
    notListTotal: null, //审核信息-审核中信息分页
    JiaoyiList: null, //审核信息-交易完成信息
    JiaoyiTotal: null, //审核信息-交易完成信息分页
    // 我的供给
    alreadyTwoList: null, //审核信息-已审核信息
    alreadyTwoListTotal: null, //审核信息-已审核信息分页
    notTwoList: null, //审核信息-审核中信息
    notTwoListTotal: null, //审核信息-审核中信息分页
    JiaoyiTwoList: null, //审核信息-交易完成信息
    JiaoyiTwoListTotal: null, //审核信息-交易完成信息分页
  },
  components: {
    top, //头部
    logo, //logo
    menuInfo, //导航
    foot, //底部
    question, //网上调查
    native, //导航
    userInfo, //基本信息
    userAdmin, //用户管理
    userAudit, //我的审核
    userStat, //统计信息
  },
  data: () => ({}),
  created() {},
  computed: {},
  methods: {},
};
</script>

<style lang="less" scoped>
.w_1200 {
  width: 1200px;
  margin: 0 auto;
}
.top {
  height: 40px;
  overflow: hidden;
  background-color: rgba(11, 58, 125, 0.8);
}
.logo {
  height: 200px;
  overflow: hidden;
}
.menu {
  height: 70px;
  overflow: hidden;
}
.main {
  height: 800px;
  overflow: hidden;
  margin: 10px 0;
}
.main .left {
  width: 240px;
  height: 800px;
  overflow: hidden;
  margin: 0 10px 0 0;
}
.main .left .leftTop {
  height: 360px;
  overflow: hidden;
  background: #fff;
  margin: 0 0 10px 0;
}
.main .left .leftDown {
  height: 430px;
  overflow: hidden;
  background: #fff;
}
.main .right {
  height: 800px;
  overflow: hidden;
  background: #fff;
}
.foot {
  float: left;
  width: 100%;
  min-height: 120px;
}
</style>