EvenManage-GM/src/components/pages/race/eventCenter.vue

<template>
  <div style="height: 100%; width: 100%">
    <div class="center_head">
      <el-carousel
        trigger="click"
        style="width: 100%; height: 100%"
        arrow="never"
      >
        <el-carousel-item v-for="item in bannerList" :key="item.id">
          <img class="imgS" :src="item" alt="" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="center_nav">
      <span @click="steps = 1" :class="{ active: steps == 1 }">活动信息</span>
      <span @click="steps = 2" :class="{ active: steps == 2 }">我的案例</span>
      <el-button
        v-if="$store.state.userInfo.role == 1"
        @click="
          goTo('/score1?userid=' + userid + '&oid=' + oid + '&org=' + org)
        "
        type="primary"
        >查看评分</el-button
      >
      <!-- <span @click="steps = 3" :class="{ active: steps == 3 }">项目进度</span> -->
    </div>
    <div :class="steps == 1 ? 'center_body' : 'center_body1'">
      <EventMessage v-if="steps == 1"></EventMessage>
      <MyAnli
        :userid="userid"
        :oid="oid"
        :org="org"
        :type="tType"
        v-if="steps == 2"
      ></MyAnli>
      <!-- <ProjectJd v-if="steps == 3"></ProjectJd> -->
    </div>
    <div class="center_btn" v-if="steps == 1">
      <el-button
        type="primary"
        style="background: rgb(112, 135, 228)"
        @click="goTo('/addRace')"
        >案例设计（必填）</el-button
      >
      <!-- <el-button
        type="primary"
        style="margin-left: 110px; background: rgb(91, 134, 210)"
        @click="goToX()"
        >平台实施（选填）</el-button
      > -->
    </div>
  </div>
</template>

<script>
import EventMessage from "./eventCenter/eventMessage.vue";
import MyAnli from "./eventCenter/myAnli.vue";
import ProjectJd from "./eventCenter/projectJd.vue";
export default {
  components: {
    EventMessage,
    MyAnli,
    ProjectJd,
  },
  data() {
    return {
      steps: this.$route.query.steps ? this.$route.query.steps : 1,
      userid: this.$store.state.userInfo.userid,
      oid: this.$store.state.userInfo.oid,
      org: this.$store.state.userInfo.org,
      tType: this.$store.state.userInfo.type,
      bannerList: [
        "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_202310191355531697694971924.png",
      ],
    };
  },
  methods: {
    goTo(path) {
      this.$router.push(path);
    },
    goToX() {
      this.$message("暂未开放");
      return;
      window.parent.postMessage({ tools: "46" }, "*");
    },
  },
};
</script>

<style scoped>
.center_head {
  height: 135px;
  width: 100%;
}

.center_head >>> .el-carousel__container {
  height: 100%;
}
.center_head >>> .el-carousel__indicator--horizontal {
  display: none;
}

.center_head .imgS {
  width: 100%;
  height: 100%;
  cursor: pointer;
  object-fit: cover;
}

.center_nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 20px auto 10px;
  position: relative;
}

.center_nav span {
  box-sizing: border-box;
  padding: 8px 5px;
  cursor: pointer;
  color: #767676;
  height: 42px;
  font-size: 18px;
}

.center_nav span + span {
  margin-left: 90px;
}

.center_nav .active {
  color: #191919;
  border-bottom: 5px solid rgb(96 162 231);
}
.center_nav >>> .el-button {
  position: absolute;
  right: 30px;
  top: 0;
}
.center_body,
.center_body1 {
  display: flex;
  width: 100%;
  justify-content: center;
  margin: 0 auto;
  height: calc(100% - 268px);
}
.center_body1 {
  height: calc(100% - 200px);
}
.center_btn {
  width: 100%;
  display: flex;
  justify-content: center;
  background: #fff;
  height: 58px;
  align-items: center;
  box-shadow: 0 -5px 5px 0px #eeeeee;
  z-index: 99;
  position: relative;
  bottom: -20px;
}
</style>