模态框

frontend/web/assets/css/model.css

@@ -0,0 +1,96 @@
+.model_wrap{
+    width: 100%;
+    height: 100vh;
+    background-color: #000;
+    opacity: 0.5;
+    position: fixed;
+    top: 0;
+    display:none;
+    z-index:2001;
+}
+.unchoose{
+    display: none;
+}
+.model-bg{
+    width: 560px;
+    position: absolute;
+    top: 30%;
+    left: 60%;
+    color:#fff;
+    margin-left: -600px;
+    z-index:2002 ;
+}
+.content{
+    font-size:20px;
+}
+.jump{
+    cursor: pointer;
+    position:absolute;
+    width:80px;
+    font-size:16px;
+    color:coral;
+    padding: 10px 20px;
+    border-radius: 40px;
+    top:22%;
+    left:53%;
+    z-index: 2002;
+    text-align: center;
+    border: 2px solid coral;
+    transition: background-color .3s
+}
+.jump:hover{
+    background-color: coral;
+    color:#fff;
+}
+.Previous{
+    cursor: pointer;
+    width:100px;
+    text-align: center;
+    font-size:16px;
+    color:#1ecd97;
+    padding: 10px 20px;
+    border-radius: 40px;
+    margin-top: 20px;
+    border: 2px solid #1ecd97;
+    transition: background-color .3s
+}
+.Previous:hover{
+    background-color: #1ecd97;
+    color:#fff;
+}
+.nextPage{
+    cursor: pointer;
+    width: 100px;
+    font-size:16px;
+    color:#1ecd97;
+    padding: 10px 20px;
+    border-radius: 40px;
+    text-align: center;
+    margin-top:-46px;
+    margin-left:150px;
+    border: 2px solid #1ecd97;
+    transition: background-color .3s
+}
+.nextPage:hover{
+    background-color: #1ecd97;
+    color:#fff;
+}
+.point1{
+    width: 525px;
+    height:174px;
+    background:url("../img/prompt.png") no-repeat center/cover;
+    position:absolute;
+    left:-548px;
+    top:-110px;
+}
+.point2{
+    width: 529px;
+    height:170px;
+    background:url("../img/prompt3.png") no-repeat center/cover;
+    position:absolute;
+    left:-548px;
+    top:17px;
+}
+.boo{
+    border:5px solid #fff;
+}