cocoroboWork-App2/src/components/pages/learning.vue

<template>
  <div class="pb_content" style="background: #24833d">
    <div class="pb_head">
      <span>五育融合</span>
      <div class="pb_left">
        <span style="font-size: .1rem;">我的任务</span>
      </div>
    </div>
    <div class="pb_content_body" style="height: calc(100% - 3rem)">
      <div class="li_head">
        <div class="li_head_portal">
          <img
            v-lazy="
              smailheadportrait
                ? smailheadportrait
                : require('../../assets/icon/portal.png')
            "
            alt=""
          />
        </div>
        <div class="li_head_body">
          <div class="li_myClass">
            <div>{{ name }}</div>
            <div>
              <span>{{ className }}</span> <span>{{ schoolName }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="xi_content">
        <div class="learn_box">
          <img v-lazy="require('../../assets/icon/leiIcon.png')" alt="" />
          <span>雷达图分析</span>
        </div>
        <div>
          <div>
            <van-image :src="require('../../assets/a.png')" fit="contain" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "main-keep-alive",
  data() {
    return {
      smailheadportrait: this.$store.state.userInfo.smailheadportrait,
      name: this.$store.state.userInfo.name,
      className: this.$store.state.userInfo.classnameA,
      schoolName: this.$store.state.userInfo.schoolName,
    };
  },
  methods: {
    goTo(path, cid) {
      this.$router.push(path);
    },
  },
  activated() {},
};
</script>

<style scoped>
.li_head {
  background: #40aa5c;
  margin-bottom: 0rem;
  display: flex;
  justify-content: start;
  padding: 1rem 0;
  position: relative;
  align-items: center;
}
.li_head_portal {
  height: 3rem;
  min-width: 3rem;
  width: 3rem;
  overflow: hidden;
  border-radius: 10rem;
  margin: 0 0 0 1rem;
}
.li_head_portal img {
  width: inherit;
  height: inherit;
}
.li_head_body {
  margin-left: 0.2rem;
}
.li_myClass {
  font-size: 0.8rem;
  color: #fff;
  /* margin: 0.3rem 0 0 0; */
  /* font-weight: 600; */
}
.li_myClass div:first-child {
  margin-bottom: 0.5rem;
}
.li_myClass span:first-child {
  margin-left: 0rem;
}
.li_myClass span {
  font-size: 0.7rem;
  margin-left: 0.5rem;
}
.xi_content {
  height: calc(100% - 5.8rem);
  background: #439959;
  width: 100%;
  margin-top: 0.8rem;
  padding: 0.2rem 0 0 0;
  box-sizing: border-box;
}
.learn_box {
  display: flex;
  align-items: center;
  margin: 0.3rem 0 0 0.5rem;
  color: #a1ccac;
  font-size: 0.75rem;
}
.learn_box img {
  width: 1rem;
  margin-right: 0.3rem;
}
</style>