@zykjcommon/questions 0.0.1

package/src/assets/scss/dialog/dialog.scss

@@ -0,0 +1,144 @@
+@keyframes uptodown {
+  0%{
+    top:-100px;
+  }
+  100%{
+    top: 50px;
+  }
+}
+.dialog{
+  & .mask{
+    z-index:1001;
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: #000;
+    opacity: 0.6;
+  }
+  & .contentDialog{
+    padding:45px 20px 34px;
+    width: 362px;
+    height: 210px;
+    margin-left:-181px;
+    margin-top: -105px;
+    box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.15);
+    border-radius: 10px;
+    z-index:1001;
+    background: #fff;
+    position: fixed;
+    left:50%;
+    top:50%;
+    .header{
+      height: 50px;
+      line-height: 50px;
+      position: absolute;
+      top:0;
+      left:0;
+      width: 100%;
+      .close{
+        position: absolute;
+        right:0;
+        top:0;
+        font-weight: bold;
+        font-size: 30px;
+        cursor: pointer;
+      }
+    }
+    .content{
+      height: 100%;
+      overflow: auto;
+      text-align: center;
+      .con-text-1{
+        color: #222222;
+        line-height: 32px;
+        .con-text-2{
+          font-size: 12px;
+          color: #999999;
+        }
+      }
+    }
+    .footer{
+      width: 100%;
+      position: absolute;
+      left:0;
+      bottom: 20px;
+      display: flex;
+      justify-content: center;
+      .btn{
+        width: 120px;
+        height: 35px;
+        border-radius: 4px;
+        font-size: 12px;
+        text-align: center;
+        line-height: 35px;
+        &.btn-cancel{
+          background: #FFFFFF;
+          border: 1px solid #FF7D30;
+          color:#FF7D30;
+        }
+        &.btn-confirm{
+          background: #FF7D30;
+          color:#fff;
+          border: 1px solid transparent;
+        }
+        &.ml20{
+          margin-left:20px;
+        }
+      }
+    }
+  }
+  /*message弹窗*/
+  .message-box{
+    border-radius: 4px;
+    padding:10px;
+    max-width: 380px;
+    border-width: 1px;
+    border-style: solid;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position:fixed;
+    top:50px;
+    left:50%;
+    transform: translateX(-50%);
+    z-index:1000005;
+    animation: 0.7s uptodown;
+    &.warning{
+      background: #fdf6ec;
+      border-color: #faecd8;
+      .ico{
+        width: 10px;
+        height: 10px;
+        background: #E6A23C;
+        color:#fff;
+        &:before{
+          content:'!';
+          font-size: 12px;
+          transform: scale(0.75);
+        }
+      }
+      .content{
+        color:#E6A23C;
+      }
+    }
+    &.center{
+      top:45%;
+      //animation: 1s uptoCenter;
+      animation:none;
+    }
+    .ico{
+      display: inline-block;
+      border-radius: 50%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .content{
+      margin-left:10px;
+      font-size: 15px;
+    }
+  }
+  /*message弹窗*/
+}

package/src/assets/scss/exam/exam.scss

@@ -0,0 +1,256 @@
+.exam{
+  display: flex;
+  height: 100%;
+
+  flex-direction: column;
+  .content-outter{
+    flex: 1;
+    overflow: auto;
+  }
+  .header{
+    width: 100%;
+    height: 80px;
+    background: rgb(252,120,38);
+    &.fixed{
+      height: 60px;
+      .header-main{
+        .header-right{
+          z-index: 999;
+          position: fixed;
+          right: 120px;
+          line-height: 60px;
+        }
+      }
+    }
+    .header-main{
+      background: url("~@src/assets/img/header-bg.png") no-repeat center;
+      background-size: cover;
+      width: 14.4rem;
+      height: 100%;
+      margin:0 auto;
+      display: flex;
+      justify-content: space-between;
+      color:#fff;
+      padding:0 30px;
+      .header-left{
+        display: flex;
+        flex-direction: column;
+        font-size: 12px;
+        color: #FFFFFF;
+        width: 320px;
+        justify-content: center;
+        .header-left-top{
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        .header-left-bottom{
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        .exam-time{
+          margin-left:50px;
+        }
+        & > div:last-child{
+          margin-top: 13px;
+        }
+      }
+      .header-title{
+        font-size: 24px;
+        font-weight: bold;
+        color: #FFFFFF;
+        line-height: 80px;
+        flex:1;
+        text-align: center;
+      }
+      .header-right{
+        width: 320px;
+        text-align: right;
+        line-height: 80px;
+        font-size: 12px;
+        /*&.fixed{
+          z-index: 999;
+          position: fixed;
+          right: 120px;
+          top: -9px;
+        }*/
+        .time,.score{
+          font-size: 28px;
+          font-family: DIN-Medium, DIN;
+          font-weight: 500;
+          color: #F8DE0D;
+          vertical-align: -3px;
+          margin-left: 10px;
+          span{
+            font-size: 12px;
+          }
+        }
+      }
+    }
+  }
+  .content{
+    width: 14.4rem;
+    margin:0 auto;
+    padding:0.15rem 0.2rem 0;
+    display: flex;
+    justify-content: space-between;
+    .content-left{
+      /*width: 10.83rem;*/
+      flex:1;
+      position: relative;
+      .return-top{
+        width: 66px;
+        height: 66px;
+        background:url("~@src/assets/img/return-top.png") no-repeat center;
+        background-size: cover;
+        position: fixed;
+        /*right:-0.8rem;*/
+        bottom: 40px;
+        cursor: pointer;
+        &:hover{
+          background:url("~@src/assets/img/return-top-hover.png") no-repeat center;
+          background-size: cover;
+        }
+      }
+      .intro{
+        width: 100%;
+        background: #fff;
+        padding:15px;
+        border-radius: 8px;
+        .intro-tit{
+          font-size: 16px;
+          font-family: MicrosoftYaHei;
+          color: #333333;
+        }
+        .intro-txt{
+          margin-top: 9px;
+          font-size: 14px;
+          line-height: 22px;
+          font-family: MicrosoftYaHei;
+          color: #666666;
+          word-break: break-word;
+        }
+      }
+      .question-main{
+        width: 100%;
+        /*margin-top: 15px;*/
+        padding:0.4rem 0.3rem 0.3rem;
+        background: #fff;
+        border-radius: 8px;
+        .tab-list{
+          display: flex;
+          margin-bottom: 30px;
+          li{
+            cursor: pointer;
+            height: 32px;
+            margin-right: 30px;
+            font-size: 14px;
+            color: #666666;
+            position: relative;
+            .count{display: inline-block}
+            span{
+              display: none;
+            }
+            &.current{
+              color:#FF7D30;
+              span{
+                position: absolute;
+                display: inline-block;
+                border-bottom: 2px solid #FF7D30;
+                width: 70%;
+                left:50%;top:28px;
+                margin-left: -35%;
+              }
+            }
+          }
+        }
+        .question-list{
+          li{
+            border-bottom: 1px dotted #B9B9B9;
+            padding-bottom: 50px;
+            padding-top: 50px;
+            &:last-child{
+              border-bottom: none;
+            }
+            &:first-child{
+              padding-top: 0;
+            }
+          }
+        }
+      }
+      margin-right: 15px;
+    }
+    .content-right{
+      width: 302px;
+      .question-car-box{
+        position: fixed;
+        width: 302px;
+        padding:20px 31px 30px;
+        border-radius: 8px;
+        background: #fff;
+        .question-car-tit{
+          text-align: center;
+          font-size: 20px;
+          font-family: PingFang-SC-Medium, PingFang-SC;
+          font-weight: 500;
+          color: #000000;
+          margin-bottom: 20px;
+        }
+        .question-car-list{
+          li{
+            cursor: pointer;
+            float: left;
+            margin-right:10px;
+            width: 40px;
+            height: 40px;
+            line-height: 38px;
+            background: #fff;
+            border: 2px solid #FFA833;
+            border-radius: 50%;
+            text-align: center;
+            color:#FFA833;
+            margin-bottom: 15px;
+            &.current{
+              background: #FFA833;
+              color:#fff;
+              border: 2px solid transparent;
+            }
+            &.right{
+              background: #847CE4;
+              color:#fff;
+              border: 2px solid transparent;
+            }
+            &.err{
+              background: #E02020;
+              color:#fff;
+              border: 2px solid transparent;
+            }
+            &:nth-child(5n){
+              margin-right: 0;
+            }
+          }
+        }
+        .question-car-btngroud{
+          button{
+            width: 240px;
+            height: 35px;
+            border-radius: 18px;
+            margin-top: 15px;
+            cursor: pointer;
+          }
+          .submit{
+            background: #FFA833;
+            color:#fff;
+            border:1px solid transparent;
+          }
+          .quit{
+            color:#FFA833;
+            border:1px solid #FFA833;
+            background: #fff;
+          }
+        }
+      }
+    }
+  }
+}

package/src/assets/scss/home/home.scss

@@ -0,0 +1,222 @@
+.home{
+  width:100%;
+  height:100%;
+  input{
+    border: none;
+    outline: none;
+  }
+  .login-bg{
+    width: 100%;
+    height: 100%;
+    background: url("~@src/assets/img/login-bg.png") no-repeat center center;
+    background-size: cover;
+    overflow: hidden;
+    position: relative;
+    .login-box{
+      padding:57px 35px 0;
+      width: 370px;
+      height: 428px;
+      margin-top: -214px;
+      background: url("~@src/assets/img/login-box-bg.png") no-repeat center center;
+      background-size: contain;
+      position: absolute;
+      /*right:228px;*/
+      /*bottom: 288px;*/
+      right:15%;
+      top:50%;
+      .login-tit{
+        font-family: PingFang, PingFang-Medium;
+        font-size: 20px;
+        font-weight: bold;
+        color: #000000;
+        margin-left: 50px;
+      }
+      .login-txt{
+        margin-bottom: 40px;
+        text-align: center;
+        font-size: 20px;
+        font-family: PingFang, PingFang-Medium;
+        color: #ff7d30;
+        margin-top: 31px;
+      }
+      .login-box-logo{
+        width: 42px;
+        height: 56px;
+        background: url("~@src/assets/img/login-box-logo.png") no-repeat center center;
+        background-size: contain;
+        position: absolute;
+        left:22px;
+        top: 29px;
+      }
+      .login-main{
+        li{
+          padding-bottom: 14px;
+          padding-left: 7px;
+          border-bottom: 1px solid #e2e2e2;
+          margin-bottom: 41px;
+          position: relative;
+          &:last-child{
+            margin-bottom: 36px;
+          }
+          .yzm-btn{
+            cursor: pointer;
+            position: absolute;
+            width: 90px;
+            height: 30px;
+            line-height: 30px;
+            text-align: center;
+            background: #ff7d30;
+            border-radius: 4px;
+            color:#fff;
+            right:0;
+            bottom: 7px;
+            &.dis{
+              background: #e2e2e2;
+              color: #999999;
+              cursor: not-allowed;
+            }
+          }
+        }
+        .login-btn{
+          width: 300px;
+          height: 50px;
+          line-height: 50px;
+          background: #ff7d30;
+          border-radius: 6px;
+          text-align: center;
+          font-size: 16px;
+          color:#fff;
+          cursor: pointer;
+          &.dis{
+            background: #e2e2e2;
+            color:#999999;
+            cursor: not-allowed;
+          }
+        }
+        input{
+          width: 100%;
+          font-size: 14px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei-Regular;
+          &::placeholder{
+            color: #d2d2d2;
+          }
+        }
+      }
+    }
+  }
+  .illustrate-bg{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    background: url("~@src/assets/img/illustrate-bg.png") no-repeat center center;
+    background-size: cover;
+    overflow: hidden;
+    position: relative;
+    .logo-box{
+      width: 168px;
+      height: 88px;
+      background: #fff;
+      position: absolute;
+      left:0;
+      top:0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .illustrate-main{
+      width: 980px;
+      height: 728px;
+      background: url("~@src/assets/img/book-bg.png") no-repeat center center;
+      background-size: contain;
+      padding-top: 95px;
+      position: relative;
+      .deer-logo{
+        width: 310px;
+        height: 448px;
+        position: absolute;
+        right:-136px;
+        bottom: -139px;
+        background: url("~@src/assets/img/deer-logo.png") no-repeat center center;
+        background-size: contain;
+      }
+      .illustrate-tit{
+        margin-bottom: 50px;
+        font-size: 24px;
+        font-family: MicrosoftYaHei, MicrosoftYaHei-Regular;
+        font-weight: bold;
+        text-align: center;
+        color: #000000;
+        letter-spacing: 0.62px;
+        .illustrate-txt{
+          display: inline-block;
+          position: relative;
+          .star-ico{
+            top:-18px;
+            position: absolute;
+            width: 60px;
+            height: 70px;
+            transform: scale(0.5);
+            background: url("~@src/assets/img/star-ico.png") no-repeat center center;
+            background-size: contain;
+            &.star-ico-left{
+              left:-86px;
+            }
+            &.star-ico-right{
+              transform: rotateY(-180deg) scale(0.5);
+              right:-86px;
+            }
+          }
+        }
+      }
+      .illustrate-text-list{
+        width: 478px;
+        margin:0 auto;
+        li{
+          font-size: 16px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei-Regular;
+          color: #333333;
+          letter-spacing: 0.41px;
+          margin-bottom: 30px;
+          &:last-child{
+            margin-bottom: 0;
+          }
+        }
+      }
+      .start-btn-box{
+        width: 478px;
+        margin:50px auto 0;
+        .start-btn{
+          margin-left: 25px;
+          cursor: pointer;
+          width: 360px;
+          height: 50px;
+          line-height: 50px;
+          background: #ff7d30;
+          border-radius: 6px;
+          font-size: 16px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei-Regular;
+          text-align: center;
+          color: #ffffff;
+          letter-spacing: 0.44px;
+          &.dis{
+            background: #e2e2e2;
+            color:#999999;
+            cursor: not-allowed;
+          }
+        }
+        .refresh{
+          display: inline-block;
+          text-align: center;
+          margin-left: 25px;
+          cursor: pointer;
+          width: 360px;
+          margin-top: 20px;
+          text-decoration: none;
+          color:#3693FF;
+        }
+      }
+    }
+  }
+}

package/src/assets/scss/index.scss

@@ -0,0 +1,80 @@
+*{padding: 0;margin: 0;box-sizing: border-box}
+li{list-style: none}
+html,body{
+    height: 100%;
+    overflow: hidden;
+    font-family: MicrosoftYaHei;
+}
+body{
+    font-size: 14px;
+    background: #F4F4F7;
+}
+.clear:after,
+.clear:before {
+    content: " ";
+    display: table;
+}
+
+.clear:after {
+    clear: both;
+}
+.fr{
+    float:right;
+}
+.fl{
+    float:left;
+}
+button{
+    outline: none;
+    border:none;
+    cursor: pointer;
+}
+
+.triangle-top{
+    border-left:6px solid transparent;
+    border-bottom:6px solid #F7F7F7;
+    border-right:6px solid transparent;
+    width: 0;
+    height: 0;
+    position:absolute;
+    left:8px;
+    top:-6px;
+}
+
+
+#app{height: 100%;/*overflow: auto;*/}
+/*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
+::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+}
+
+/*定义滚动条的轨道颜色、内阴影及圆角*/
+::-webkit-scrollbar-track {
+    display: none;
+}
+
+/*定义滑块颜色、内阴影及圆角*/
+::-webkit-scrollbar-thumb {
+    border-radius: 6px;
+    background-color: rgba(144, 147, 153, .3);
+    &:hover {
+        background-color: rgba(144, 147, 153, .5);
+    }
+}
+
+/*定义两端按钮的样式*/
+::-webkit-scrollbar-button {
+    display: none;
+}
+
+/*定义右下角汇合处的样式*/
+::-webkit-scrollbar-corner {
+    display: none;
+}
+/*去除input输入框自动填充后的背景*/
+input:-webkit-autofill { box-shadow: 0 0 0px 1000px white inset;}
+@import "~@src/assets/scss/home/home.scss";
+@import "~@src/assets/scss/exam/exam.scss";
+//@import "~@src/assets/scss/questions/index.scss";
+@import "~@src/assets/scss/dialog/dialog.scss";