<template>
  <div class="pathmap">
    <TitleHead text="中级产品经理"></TitleHead>
    <div class="main">
      <div class="title">
        <div class="box">
          <div class="nav">
            <span class="announcement">课程公告</span>
            <span class="share">共享文档</span>
          </div>
          <div class="content">
            请各位选课的同学提前阅读本课程的“教学大纲与计划”“课程考核要求”与“学习要求”，并按给定的中学化学教学主题分好小组 <br>每位同学在网上学习的活动轨迹都会自动被系统记录，将作为大家个人线上参与的评价依据；<br>请大家务必在规定的时间内提交作业，否则会被系统自动记录为“迟交”或“未交”，则会影响线上参与的平时成绩；
          </div>
        </div>       
      </div> 
        <div class="messaeg">
           <div class="mani">
        <div class="uptitle">
            <div class="img"></div>
            <div class="rightmain">
              <div class="talk">个人信息</div>
              <div class="box"></div>
            </div>
          </div>
          <div class="information">
            <div class="photo"></div>
            <div class="description">
              <span class="text1">乐晓琪（显示事业）</span>
              <span class="text2">真正的陪伴经得起坎坷，经得起平淡。</span>
            </div>
          </div>
          <div class="downtitle">
            <div class="img"></div>
            <div class="rightmain">
              <div class="talk">学习进度</div>
              <div class="box"></div>
            </div>
          </div>
          <div class="speed">
            <span class="text3">上次学到：启航班 - 领导寄语</span>
            <button class="btn">去上课</button>
          </div>
          <div class="progress">
            <div class="total">
              <div class="total_part">
                <span class="text4">总进度</span> <span class="text5">32%</span>
              </div>             
              <div class="progress">
                <div class="progress_part"></div>
              </div>
            </div>
            <div class="compulsory">
              <div class="compulsory_part">
                <span class="text6">必修进度</span> <span class="text7">10%</span>
              </div>             
              <div class="progress1">
                <div class="progress1_part"></div>
              </div>
            </div>
          </div>
        </div>
        </div> 
      <div class="course">
        <div class="course_box">
          <div class="course_first">
            <span class="text8">序：产品经理从初级到中级</span>
            <span class="text9"><span class="circular"></span>进行中</span>
          </div>
        </div>
      </div>
    </div>
    
  </div>
</template>

<script>
// import { reactive, toRefs } from "vue";
import TitleHead from "@/components/TitleHead.vue";
export default {
  name: "BallotPage",
  components: {
    TitleHead,
  },
  setup() {},
};
</script>

<style lang="scss">
  .pathmap {
    width: 100%;
    .main {
      width: 100%;
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;
      margin-top: -14.5px;
      .course {
        width: 90%;
        height: 903px;
        margin-top: 10px;
        border-radius: 4px;
        background-color: rgba(255, 255, 255, 1);
        display: flex;
        justify-content: center;
        .course_box {
          display: flex;
          justify-content: center;
          width: 90%;
          margin-top: 18.5px;
          background-color: pink;
          .course_first {
            width: 100%;
            height: 35px;
            display: flex;
            justify-content: content;
            background-color: #F9F9F9;
            .text8 {
              display: flex;
              flex: 1;
              margin-top: 11px;
              margin-left: 10.5px;
              margin-bottom: 10.5px;
              height: 13.5px;
              font-size: 14px;
              font-weight: 500;
              color: #333330;
            }
            .text9 {
              margin-top: 11px;
              margin-left: 77.5px;
              color: #0060FF;
              font-size:13px;
              font-weight: 400;
              .circular {
                
                border: 1px solid #0060FF;
                border-radius: 25%;
              }
            }
          }
        }
      }
      .title {
        width: 90%;
        height: 272px;
        border-radius: 4px;
        background-color: rgba(255, 255, 255, 1);
        display: flex;
        justify-content: center;
        .box {
          width: 90%;
          display: flex;
          justify-content: center;
          flex-wrap:wrap;
          overflow-y: auto;
          .nav {
              width: 100%;
              height: 49.5px;
              display: flex;
              .announcement {              
                color: #2478FF;
                font-size: 14px;
                line-height: 21.6px;
                font-weight: 700;
                margin-top: 18.5px;
                border-bottom: 1px solid #2478FF;
              }
              .share {
                color: #394145;
                font-size: 13px;
                line-height: 21.6px;
                margin-top: 19px;
                margin-left: 70px;

              }
          }
          .content {
                  width: 100%;
                  height: 180.5px;
                  display: flex;
                  justify-content: center;
                  color: #333330;
                  font-size:13px;
                  line-height: 24px;
            }
          }     
        }
      
      } 
      .messaeg {
        width: 90%;
        height: 314px;
        background-color: rgba(255, 255, 255, 1);
        display: flex;
        justify-content: center;
        margin-top: 10px; 
        .mani {
        width: 90%;
        display: flex;
        flex-direction: column;
        justify-content: content;
        margin-left: 20.5px;
        margin-top: 23px; 
                .downtitle {
          display: flex;
          position: relative;
          width: 90px;
          margin-top: 21.5px;
          .img {
            width: 15.5px;
            height: 14.5px;
            margin-top: 3px;
            background-image: url(../../assets/image/pathmap/study.png);
          }
          .rightmain {
            margin-left: 7.5px;
            .talk {
              font-size: 14px;
              font-weight: bold;
              color: #333;
              position: absolute;
              z-index: 999;
            }
            .box {
              position: absolute;
              width: 62.5px;
              height: 10px;
              right: 6px;
              bottom: -4px;
              background: #ccdfff;
            }
          }
        }
                .uptitle {
          display: flex;
          position: relative;
          width: 90px;
          .img {
            width: 17px;
            height: 15px;
            margin-top: 3px;
            background-image: url(../../assets/image/pathmap/personal.png);
          }
          .rightmain {
            margin-left: 7.5px;
            .talk {
              font-size: 14px;
              font-weight: bold;
              color: #333;
              position: absolute;
              z-index: 999;
            }
            .box {
              position: absolute;
              width: 62.5px;
              height: 10px;
              right: 6px;
              bottom: -4px;
              background: #ccdfff;
            }
          }
        }      
         .information {
        width: 100%;
        height: 50px;
        margin-top: 24px;
        display: flex;
        justify-content: content;
        .photo {
          width: 50px;
          height: 50px;
          background-image: url(../../assets/image/pathmap/photo.png)
        }
        .description {
          display:flex;
          flex-direction: column;
          margin-left: 11.5px;
          .text1 {
            height: 13.5px;
            font-size: 14px;
            font-weight: 700;
            color: #394145;
            line-height: 21.6px;

          }
          .text2 {
            height: 13px;
            margin-top: 12px;
            font-size: 13px;
            color: #394145;
            line-height: 21.6px;
          }
        
      }
      }
     
      
      }
      .speed {
        width: 100%;
        margin-top:11px;
        display: flex;
        justify-content: content;
        .text3 {
          display: flex;
          flex:1;
          margin-top: 4.5px;
          font-size: 13px;
          font-weight: 500;
          line-height: 24px;
          color: #677D86;
          text-overflow: elipsis;
        }
        .btn {                  
          width: 73px;
          height: 28px;
          font-size: 13px;
          line-height: 28px;
          margin-rihgt: 21px;
          color: #2478FF;
          font-weight: 400;
          border: 0.5px solid #2478FF;
          background-color: #FFFFFF;
        }
      }
      .progress {
        display:flex;
        flex-direction: column;
        margin-top: 15px;
        width: 100%;
        height: 74px;
        .total {
          display: flex;
          position: relative;
          width: 100%;
          height: 29px;
        .total_part {
            position: absolute;
            top: 0;
            left: 0;
            margin-bottom: 10px;
            width: 100%;
            height: 12.5px;
          .text4 {          
           width: 38.5px;
            height: 12.5px;
            font-size: 12px;
            // line-height: 30.29px;
            color: #677D86;
          }
          .text5 {
            position: absolute;
            right: 0;           
            width: 25px;
             height: 9.5px;
            font-size: 12px;
            // line-height: 30.29px;
            color: #277AFF;
          }
        }
        
          .progress {
            position: absolute;
            width: 100%;
            height: 6.4px;
            margin-top: 20px;
            background-color: #E8F1FE;
            border-radius: 2px;
            .progress_part {
              width: 32%;
              height: 6.4px;
              border-radius: 2px;
              background: linear-gradient(
                -180deg,
              rgba(36, 120, 255, 1),
               rgba(80, 147, 255, 1)               
              );
            }
          }
        }
        .compulsory{
          display: flex;
          position: relative;
          width: 100%;
          height: 29px;
          margin-top: 16px;
          .compulsory_part {
            position: absolute;
            top: 0;
            left: 0;
            margin-bottom: 10px;
            width: 100%;
            height: 12.5px;
          .text6 {          
           width: 38.5px;
            height: 12.5px;
            font-size: 12px;
            // line-height: 30.29px;
            color: #677D86;
          }
          .text7 {
            position: absolute;
            right: 0;           
            width: 25px;
             height: 9.5px;
            font-size: 12px;
            // line-height: 30.29px;
            color: #EE6661;
          }
        }
          .progress1 {
            position: absolute;
            width: 100%;
            height: 6.4px;
            margin-top: 20px;
            background-color: #E8F1FE;
            border-radius: 2px;
            .progress1_part {
              width: 10%;
              height: 6.4px;
              border-radius: 2px;
              background: linear-gradient(
                -180deg,
              rgba(238, 98, 94, 1),
               rgba(238, 164, 161, 1)               
              );
            }
          }
        }
      }
      } 
     
  }
 
</style>
