<template>
  <div class="pb_content">
    <div class="pb_content_body">
      <div class="body_student">
        <div class="student_head">
          <div class="box_course">
            <div class="wheel"><img src="../assets/tx.png" alt="" /></div>
            <div class="right_box">
              <div class="right_box_title">张子林</div>
              <div class="people">
                <div>
                  <span>班级：</span><span style="color: #999">六年3班</span>
                </div>
                <div style="margin-left: 50px">
                  <span>所属学校：</span
                  ><span style="color: #999">罗浮名剑中学</span>
                </div>
              </div>
              <div>
                <span>手机号码：</span
                ><span style="color: #999">13751117529</span>
              </div>
            </div>
          </div>
        </div>
        <div class="student_body">
          <div style="padding: 20px 30px">个人中心 > 我的作品</div>
          <div class="project_box">
            <div class="three_box_inthis">
              <div class="project">
                <img src="../assets/project.png" alt="" />
              </div>
              <div class="projct_nav">
                <div style="font-size: 18px">
                  认识木头制作 | 颗粒板和胶合板制作
                </div>
                <div>
                  <span>时间：</span
                  ><span style="color: #999">2017-12-12 10:00-11:00</span>
                </div>
                <div><span>提交人</span><span>提交人：张子林</span></div>
              </div>
              <div class="look_score" @click="goTo('/score')">查看评分</div>
            </div>
            <div class="three_box_inthis">
              <div class="project">
                <img src="../assets/project.png" alt="" />
              </div>
              <div class="projct_nav">
                <div style="font-size: 18px">
                  认识木头制作 | 颗粒板和胶合板制作
                </div>
                <div>
                  <span>时间：</span
                  ><span style="color: #999">2017-12-12 10:00-11:00</span>
                </div>
                <div><span>提交人</span><span>提交人：张子林</span></div>
              </div>
              <div class="look_score" @click="goTo('/score')">查看评分</div>
            </div>
            <div class="three_box_inthis">
              <div class="project">
                <img src="../assets/project.png" alt="" />
              </div>
              <div class="projct_nav">
                <div style="font-size: 18px">
                  认识木头制作 | 颗粒板和胶合板制作
                </div>
                <div>
                  <span>时间：</span
                  ><span style="color: #999">2017-12-12 10:00-11:00</span>
                </div>
                <div><span>提交人</span><span>提交人：张子林</span></div>
              </div>
              <div class="look_score" @click="goTo('/score')">查看评分</div>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="bottom_flex">
          <div class="left_bottom_flex">
            <div class="left_title">联系我们</div>
            <div class="left_content">
              <div>地址：深圳市南山区</div>
              <div>手机：13418906754</div>
              <div>邮箱：win.wu@qichuangxin.com</div>
              <div>电话：0755-84658992</div>
              <div>邮编：518129</div>
            </div>
          </div>
          <div class="right_bottom_flex">
            <img src="../assets/logo.png" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    goTo(path) {
      this.$router.push(path);
    },
  },
  created() {},
};
</script>

<style scoped>
.body_student {
  margin: 0px auto;
  width: 80%;
  height: 100%;
}
.student_head {
  width: 80%;
  margin: 0 auto;
  background: #fff;
  height: 30%;
}
.wheel > img,
.project > img {
  width: 100%;
  height: 100%;
}
.box_course {
  display: flex;
  padding: 35px 0 25px 60px;
  align-items: center;
}
.wheel {
  width: 210px;
}
.right_box {
  display: flex;
  flex-direction: column;
  margin-left: 30px;
  /* justify-content: space-around; */
}
.right_box_title {
  font-size: 23px;
}
.people {
  display: flex;
  margin: 30px 0 20px 0px;
}
.student_body {
  width: 80%;
  margin: 0 auto;
  background: #fff;
  margin-top: 20px;
  padding: 0 0 20px;
  min-height: 1000px;
}
.project {
  width: 165px;
}
.project_box {
  /* margin: 0 0 10px 30px; */
}
.three_box_inthis {
  display: flex;
  padding: 40px 30px;
  border-bottom: 1px solid #cecece;
  position: relative;
}
.projct_nav {
  margin-left: 15px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-around;
}
.look_score {
  border-radius: 5px;
  text-align: center;
  position: absolute;
  right: 70px;
  background: #0099ff;
  width: 100px;
  height: 35px;
  font-size: 14px;
  color: #fff;
  line-height: 35px;
  top: 35%;
  cursor: pointer;
}
</style>
