<template>
  <div class="homeworkpage">
    <TitleHead text="【投票】管理者进阶腾飞班 - 授课方式"></TitleHead>

    <div class="notice">
      <div class="noticebox">
        <div class="mani">
          <div class="dir">
            <div class="samegt pre"></div>
            <div class="sameg">上一个</div>
            <div class="sameg" style="margin-left: 15.5px">下一个</div>
            <div class="samegt next"></div>
          </div>

          <div class="lefttitle">
            <div class="img"></div>
            <div class="rightmain">
              <div class="talk">作业名称</div>
              <div class="box"></div>
            </div>
          </div>
          <div class="contentone clearfix">
            <div class="onttitle">管理者进阶腾飞班 - 第一次作业 - 沙盘实验</div>
          </div>

          <div class="lefttitle">
            <div class="img"></div>
            <div class="rightmain">
              <div class="talk">投票时间</div>
              <div class="box"></div>
            </div>
          </div>

          <div class="contenttwo clearfix">
            <div class="time">
              <div class="timeone">2022-7-20 00:00</div>
              <div class="timetwo" style="margin-top: -2.5px">至</div>
              <div class="timethr">2022-8-29 23:59:59</div>
            </div>
            <div class="endbox">
              <div class="endtalk clearfix">
                <div class="sameto">距离结束还有</div>
                <div class="sametoo">123</div>
                <div class="sameto">小时</div>
                <div class="sametoo">42</div>
                <div class="sameto">分钟</div>
              </div>
            </div>
          </div>

          <div class="lefttitle">
            <div class="img"></div>
            <div class="rightmain">
              <div class="talk">投票说明</div>
              <div class="box"></div>
            </div>
          </div>

          <div class="contentthr clearfix">
            <div class="thrcontent">
              1、阅读文章，做名校题库，翻译文言文，整体文 化常识和文言知识；<br />
              2、《中国古代诗词文化鉴赏》大唐之音、两宋清 雅、明清情致
            </div>
          </div>

          <div class="lefttitle">
            <div class="img"></div>
            <div class="rightmain">
              <div class="talk">作业内容</div>
              <div class="box"></div>
            </div>
          </div>

          <div class="contentfor clearfix">
            <textarea type="text" class="inputbox" />
          </div>
          <div class="btnbox">
            <div class="btnn">
              <button class="btns btno">上传</button>
              <button class="btns btnt">提交</button>
            </div>
          </div>

          <div class="lefttitle">
            <div class="img"></div>
            <div class="rightmain">
              <div class="talk">历史纪录</div>
              <div class="box"></div>
            </div>
          </div>

          <div class="contentfiv">
            <div class="his clearfix">
              <div class="histime">2022-7-20 00:00</div>
              <div class="hiscon">大唐之音鉴赏 - 2022/7/20.zip</div>
            </div>
            <div class="his clearfix" style="background-color: #fff">
              <div class="histime">2022-7-18 00:00</div>
              <div class="hiscon">
                《木兰辞》翻译：叹息声一声接着一声,木兰姑娘当门在织布。…
              </div>
            </div>
            <div class="his clearfix">
              <div class="histime">2022-7-14 00:00</div>
              <div class="hiscon">湖北黄冈语文压卷题.doc</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
  clear: both;
}
.homeworkpage {
  width: 100%;

  .notice {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 10px;
    .noticebox {
      width: 90%;
      background: #fff;
      border-radius: 4px;
      position: relative;
      display: flex;
      justify-content: center;
      .mani {
        width: 90%;
        margin-top: 20px;

        .dir {
          width: 100%;
          height: 20px;
          // background-color: red;
          margin-bottom: 20px;
          display: flex;
          justify-content: right;
          font-size: 12px;
          color: #2478ff;
          .samegt {
            margin-top: 3px;
            height: 12px;
            width: 12px;
          }
          .samege {
            line-height: 12px;
          }
          .pre {
            margin-right: 5px;
            // background-size: 100%;
            background-image: url(../../assets/image/ballotpage/pre.png);
          }
          .next {
            margin-left: 5px;
            // background-size: 100%;
            background-image: url(../../assets/image/ballotpage/next.png);
          }
        }

        .lefttitle {
          display: flex;
          position: relative;
          width: 90px;
          .img {
            margin-top: 1.5px;
            width: 16px;
            height: 16px;
            background-image: url(../../assets/image/ballotpage/cycle.png);
          }
          .rightmain {
            margin-left: 7.5px;
            .talk {
              margin-left: -1.5px;
              font-size: 14px;
              font-weight: bold;
              color: #333;
              position: absolute;
              z-index: 999;
            }
            .box {
              position: absolute;
              width: 62.5px;
              height: 10px;
              right: 8px;
              bottom: -5px;
              background: #ccdfff;
            }
          }
        }

        .samenum {
          margin-top: 18.5px;
          position: absolute;
          font-size: 18px;
          font-weight: bold;
          left: 50%;
          transform: translate(-50%, 0);
        }
        .samego {
          margin-top: 45px;
          position: absolute;
          font-size: 13px;
          left: 50%;
          transform: translate(-50%, 0);
        }
        .contentone {
          margin-top: 23px;
          display: flex;
          justify-content: center;
          width: 100%;
          margin-bottom: 20px;
          height: 74px;
          // #DFEBFF
          // #fff
          background-image: url(../../assets/image/homeworkpage/bacc.png);
          background-size: 100% 100%;
          color: #4a9cf8;
          font-size: 14px;
          font-weight: bold;
          .onttitle {
            margin-top: 15px;
            // width: 90%;
          }
        }

        .contenttwo {
          position: relative;
          margin-top: 23px;
          width: 100%;
          height: 95px;
          margin-bottom: 20px;
          // #B6C6E1
          // #89AED6
          background-image: linear-gradient(to right, #b6c6e1, #89aed6 90%);
          .time {
            position: absolute;
            left: 50%;
            transform: translate(-50%, 0);
            margin-top: 15px;
            display: flex;
            justify-content: space-between;
            width: 80%;
            color: #fff;
            font-size: 13px;
            height: 20px;
          }
          .endbox {
            margin-top: 42.5px;
            position: absolute;
            left: 50%;
            transform: translate(-50%, 0);
            width: 95%;
            height: 45px;
            background-color: #f2f5f7;
            border-radius: 0 3px 0 3px;
            display: flex;
            justify-content: center;
            .endtalk {
              width: 90%;
              display: flex;
              justify-content: space-between;
              margin-top: 18px;
              .sameto {
                font-size: 14px;
              }
              .sametoo {
                margin-top: -3px;
                font-size: 21.5px;
                color: #4a9cf8;
              }
            }
          }
        }

        .contentthr {
          border-radius: 4px;
          margin-bottom: 23px;
          position: relative;
          margin-top: 23px;
          width: 100%;
          // height: 95px;
          background-color: #f2f5f7;
          display: flex;
          justify-content: center;
          .thrcontent {
            width: 90%;
            margin-top: 19px;
            margin-bottom: 15.5px;
            // background-color: blue;
            font-size: 13px;
            line-height: 24px;
          }
        }

        .contentfor {
          margin-top: 23px;
          width: 100%;
          margin-bottom: 34px;
          height: 200px;
          // background-color: red;
          .inputbox {
            width: 100%;
            background-color: #f5f6f7;
            border: 0;
            height: 256px;
            border-radius: 4px;
            // border-color: blue;
          }
          .inputbox:focus {
            outline: none !important;
            border-color: #719ece;
            box-shadow: 0 0 10px #719ece;
          }
        }
        .btnbox {
          margin-top: 80px;
          // height: 20px;
          width: 100%;
          // background-color: red;
          display: flex;
          justify-content: center;
          margin-bottom: 20px;
          .btnn {
            color: #fff;
            width: 60%;
            font-size: 14px;
            display: flex;
            justify-content: space-between;
            .btns {
              color: #fff;
              width: 83px;
              height: 33px;
              border: 0;
              border-radius: 2px;
            }
            .btno {
              background-color: #ffb96d;
            }
            .btnt {
              background-color: #2478ff;
            }
          }
        }

        .contentfiv {
          margin-top: 26px;
          width: 100%;
          margin-bottom: 34px;
          // height: 200px;
          // background-color: #bfa;
          .his {
            width: 100%;
            // height: 100px;
            background-color: #f2f5f7;
            border-radius: 4px;
            .histime {
              color: #677d86;
              font-size: 12px;
              margin-top: 11px;
              margin-left: 22px;
            }
            .hiscon {
              width: 87%;
              font-size: 13px;
              line-height: 24px;
              margin: 11px 0 11px 22px;
            }
          }
        }
      }
    }
  }
}
</style>
