pbl-teacher-table/src/components/pages/race/eventCenter/myAnli.vue

<template>
  <div class="center_content">
    <div class="myAnliBox">
      <div class="anLi" v-for="(an, anIndex) in anliBox" :key="anIndex">
        <div class="anliTop">
          <div class="anliTopLeft">
            <div>比赛名称：广东省PBL案例征集</div>
            <div>比赛类别：{{ an.typename ? an.typename : "暂无分类" }}</div>
          </div>
          <div class="anliTopRight">创建人：{{ an.username }}</div>
        </div>

        <div class="anliMiddle">
          <div class="anliBox">
            <div class="anliImg">
              <img
                :src="
                  JSON.parse(an.info).cover && JSON.parse(an.info).cover.length
                    ? JSON.parse(an.info).cover[0].url
                    : noBanner
                "
                alt=""
              />
            </div>
            <div class="anliNav">
              <div>项目名称：{{ JSON.parse(an.info).title }}</div>
              <div>单位：{{ an.schoolName }}</div>
              <div>
                {{ JSON.parse(an.info).courseText }}
              </div>
              <div class="people">
                <div class="man">
                  <img src="../../../../assets/people.png" alt />
                </div>
                <div class="person">0人</div>
              </div>
            </div>
          </div>
        </div>

        <div class="anliBottom">
          <div class="bottomLeft">
            当前状态：{{ an.state == 0 ? "未提交" : "已提交" }}
          </div>
          <div class="bottomRight">
            <div class="rightButton" @click="updateState(an.id)">提交</div>
            <div class="rightButton">导出</div>
            <div class="rightButton">开始教学</div>
            <div
              class="rightButton"
              @click="
                goTo(
                  '/addRace?userid=' + userid + '&oid=' + oid + '&aid=' + an.id
                )
              "
            >
              编辑
            </div>
            <div
              class="rightButton"
              style="background: #225ac7"
              @click="
                goTo(
                  '/anliDetail?userid=' +
                    userid +
                    '&oid=' +
                    oid +
                    '&aid=' +
                    an.id
                )
              "
            >
              查看详情
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["userid", "oid"],
  data() {
    return {
      anliBox: [],
      noBanner: require("../../../../assets/noBanner.jpg"),
    };
  },
  methods: {
    goTo(path) {
      this.$router.push(path);
    },
    selectAnLi() {
      let params = {
        uid: this.userid,
      };
      this.ajax
        .get(this.$store.state.api + "selectRaceList", params)
        .then((res) => {
          this.anliBox = res.data[0];
        })
        .catch((err) => {
          console.error(err);
        });
    },
    updateState(id) {
      let params = {
        id: id,
      };
      this.ajax
        .get(this.$store.state.api + "updateRaceState", params)
        .then((res) => {
          this.$message({
            message: "提交成功",
            type: "success",
          });
          this.selectAnLi();
        })
        .catch((err) => {
          console.error(err);
        });
    },
  },
  created() {
    this.selectAnLi();
  },
};
</script>

<style scoped>
@media screen and (max-width: 1280px) {
  .myAnliBox {
    /* height: 430px !important; */
  }
}
.myAnliBox {
  /* height: 500px; */
  overflow: auto;
  height: 100%;
  /* box-shadow: inset 0px 14px 7px -14px #b9b9b9; */
}
.center_content {
  width: 100%;
  height: 100%;
}
.anLi {
  background: #fff;
  width: 95%;
  margin: 20px auto;
  border-radius: 10px;
}
.anliTop {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
}
.anliTopLeft {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  color: #afafaf;
  padding: 20px 0 10px 30px;
}
.anliTopLeft > div:nth-child(2) {
  padding-left: 20px;
}
.anliTopRight {
  padding: 20px 30px 10px 0;
}
.anliMiddle {
  padding: 0 0 5px 30px;
}
.anliImg {
  width: 200px;
}
.anliImg > img {
  width: 100%;
  height: 100%;
}
.people {
  display: flex;
}

.person {
  margin-left: 10px;
  line-height: 18px;
}
.man {
  width: 16px;
  height: 16px;
}

.man > img {
  width: 100%;
  height: 100%;
}
.anliBox {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
}
.anliNav {
  padding-left: 30px;
}
.anliNav > div:nth-child(1) {
  font-size: 20px;
  font-weight: bold;
}
.anliNav > div:nth-child(2) {
  font-weight: bold;
  margin: 15px 0 10px 0;
}
.anliNav > div:nth-child(3) {
  color: #aba8a8;
  margin-bottom: 10px;
}
.anliBottom {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px 15px 30px;
}
.bottomRight {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}
.rightButton {
  background: #499eef;
  color: #fff;
  width: 60px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  font-size: 14px;
  border-radius: 5px;
  cursor: pointer;
  margin-right: 20px;
}
</style>