no message

demo/confirm/src/components/confirm.js

@@ -22,6 +22,7 @@ class Confirm extends React.Component{
         return(
             <div className="confirmContainer">
                 <li className="title">{this.state.text}</li>
+                <div className="content">此操作不可逆,确定要继续吗?</div>
                 <ul className="handle">
                     {this.state.btnOptions.length>0 && this.state.btnOptions.map((item,index)=>{
                         return (

demo/confirm/src/components/style.css

@@ -18,9 +18,9 @@ li{
 .confirmContainer{
     position: relative;
     width: 300px;
-    height: 160px;
     background-color: #fff;
     border-radius: 10px;
+    overflow: hidden;
 }
 .confirmContainer .title{
     width: 100%;
@@ -32,20 +32,33 @@ li{
     color: #555;
     font-weight: bold;
 }
-.confirmContainer .handle{
+.confirmContainer .content{
-    position: absolute;
-    bottom: 0;
-    left: 0;
     width: 100%;
-    height: 30px;
+    height: 160px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 16px;
+    color: #555;
+    font-weight: bold;
+}
+.confirmContainer .handle{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    border-top: 1px solid rgb(220,220,220);
 }
 .confirmContainer .handle .btn{
-    float: left;
     width: 50%;
-    height: 30px;
+    height: 40px;
-    line-height: 30px;
+    line-height: 40px;
     text-align: center;
     color: #333;
     font-weight: bold;
     cursor: pointer;
+    &:hover{
+        color: #fff;
+        background-color: blueviolet;
+    }
 }