商机状态修改按钮

business.html

@@ -466,30 +466,98 @@
                     <div class="d-flex justify-content-between"><span class="text-muted">商机</span><span class="text-muted">陈特 创建于 2019年5月6日 14:55</span></div>
                     <legend>XXXX商机</legend>
                   </div>
-
-                  <ol class="breadcrumb breadcrumb-lg breadcrumb-arrow">
-                        <li>
-                            <a class="text-light">
-                                <span class="hidden-lg-down">验证阶段</span>
-                            </a>
-                        </li>
-                        <li class="active">
-                            <a class="text-light">
-                                <span class="hidden-lg-down">开发阶段</span>
-                            </a>
-                        </li>
-                        <li>
-                            <a class="text-light">
-                                <span class="hidden-lg-down">提案阶段</span>
-                            </a>
-                        </li>
-                        <li>
-                            <a class="text-light">
-                                <span class="hidden-lg-down">赢单</span>
-                                
-                            </a>
-                        </li>
-                    </ol>
+                  <!--商机状态1-->
+                  <div class="busi-state">
+                    <div class="busi-state-item state-suc">
+                      <span class="title">验证客户</span>
+                      <div class="state-circle circle-left"></div>
+                      <div class="state-arrow arrow-right"></div>
+                    </div>
+                    <div class="busi-state-item state-doing">
+                      <span class="title">需求分析</span>
+                      <div class="state-arrow arrow-left"></div>
+                      <div class="state-arrow arrow-right"></div>
+                    </div>
+                    <div class="busi-state-item state-undo">
+                      <span class="title">方案/报价</span>
+                      <div class="state-arrow arrow-left"></div>
+                      <div class="state-arrow arrow-right"></div>
+                    </div>
+                    <div class="busi-state-item state-undo">
+                      <span class="title">结束<i class="far fa-angle-down ml-2"></i></span>
+                      <div class="state-arrow arrow-left"></div>
+                      <div class="state-circle circle-right"></div>
+                    </div>
+                  </div>
+                  <!--商机状态2-->
+                  <div class="busi-state">
+                    <div class="busi-state-item state-suc">
+                      <span class="title">验证客户</span>
+                      <div class="state-circle circle-left"></div>
+                      <div class="state-arrow arrow-right"></div>
+                    </div>
+                    <div class="busi-state-item state-suc">
+                      <span class="title">需求分析</span>
+                      <div class="state-arrow arrow-left"></div>
+                      <div class="state-arrow arrow-right"></div>
+                    </div>
+                    <div class="busi-state-item state-invalid">
+                      <span class="title">方案/报价</span>
+                      <div class="state-arrow arrow-left"></div>
+                      <div class="state-arrow arrow-right"></div>
+                    </div>
+                    <div class="busi-state-item state-fail">
+                      <span class="title"><i class="far fa-times-circle mr-2"></i>输单</span>
+                      <div class="state-arrow arrow-left"></div>
+                      <div class="state-circle circle-right"></div>
+                    </div>
+                  </div>
+                  <!--商机状态3-->
+                  <div class="busi-state">
+                    <div class="busi-state-item state-suc">
+                      <span class="title">验证客户</span>
+                      <div class="state-circle circle-left"></div>
+                      <div class="state-arrow arrow-right"></div>
+                    </div>
+                    <div class="busi-state-item state-suc">
+                      <span class="title">需求分析</span>
+                      <div class="state-arrow arrow-left"></div>
+                      <div class="state-arrow arrow-right"></div>
+                    </div>
+                    <div class="busi-state-item state-invalid">
+                      <span class="title">方案/报价</span>
+                      <div class="state-arrow arrow-left"></div>
+                      <div class="state-arrow arrow-right"></div>
+                    </div>
+                    <div class="busi-state-item state-suc">
+                      <span class="title"><i class="far fa-smile mr-2"></i>赢单</span>
+                      <div class="state-arrow arrow-left"></div>
+                      <div class="state-circle circle-right"></div>
+                    </div>
+                  </div>
+                  <!--商机状态4-->
+                  <div class="busi-state">
+                    <div class="busi-state-item state-suc">
+                      <span class="title">验证客户</span>
+                      <div class="state-circle circle-left"></div>
+                      <div class="state-arrow arrow-right"></div>
+                    </div>
+                    <div class="busi-state-item state-invalid">
+                      <span class="title">需求分析</span>
+                      <div class="state-arrow arrow-left"></div>
+                      <div class="state-arrow arrow-right"></div>
+                    </div>
+                    <div class="busi-state-item state-invalid">
+                      <span class="title">方案/报价</span>
+                      <div class="state-arrow arrow-left"></div>
+                      <div class="state-arrow arrow-right"></div>
+                    </div>
+                    <div class="busi-state-item state-invalid">
+                      <span class="title"><i class="far fa-minus-circle mr-2"></i>失效</span>
+                      <div class="state-arrow arrow-left"></div>
+                      <div class="state-circle circle-right"></div>
+                    </div>
+                  </div>
                   <div class="cldform clearfix">
                     <div class="cldform-line"></div>
                     <div class="cldform-item">

css/cld-custom.css

@@ -363,4 +363,130 @@
 .breadcrumb-arrow li a:hover{
   background:#838383;
   color:#fff;
+}
+/*商机状态设置*/
+.busi-state{
+  padding-left:20px;
+}
+.busi-state-item{
+    padding: 10px 30px;
+    height: 38px;
+    position: relative;
+    margin: 5px 5px 5px 0;
+    border-top: 2px solid #ebebeb;
+    border-bottom: 2px solid #ebebeb;
+    display: inline-block;
+}
+.busi-state-item .state-arrow{
+    width: 38px;
+    height: 38px;
+    -webkit-transform: scale(.707) rotate(
+45deg
+);
+    transform: scale(.707) rotate(
+45deg
+);
+    border-top: 2px solid #ebebeb;
+    border-right: 2px solid #ebebeb;
+    background-color: #fff;
+    position: absolute;
+}
+.state-suc span.title{
+  cursor: pointer;
+}
+.state-doing span.title,.state-undo span.title{
+  color:#967bbd;
+  cursor: pointer;
+}
+.busi-state-item .state-circle{
+    width: 38px;
+    height: 38px;
+    border-radius: 19px;
+    background-color: #fff;
+    -webkit-transform: rotate(
+45deg
+);
+    transform: rotate(
+45deg
+);
+    position: absolute;
+    z-index: -1;
+}
+.circle-left{
+    border-left: 2px solid #ebebeb;
+    border-bottom: 2px solid #ebebeb;
+    top: -2px;
+    left: -17px;
+}
+.circle-right{
+    border-top: 2px solid #ebebeb;
+    border-right: 2px solid #ebebeb;
+    z-index: 1;
+    top: -2px;
+    right: -15.5px;
+}
+.arrow-right{
+    z-index: 1;
+    top: -2px;
+    right: -19px;
+}
+.arrow-left{
+    top: -2px;
+    left: -18px;
+}
+.state-suc .circle-left, .state-suc .circle-right {
+    border-color: #967bbd;
+    background-color: #967bbd;
+}
+.state-suc{
+    border-top: 2px solid #967bbd;
+    border-bottom: 2px solid #967bbd;
+    background-color: #967bbd;
+    color: #fff;
+}
+.state-suc .arrow-right {
+    border-color: #967bbd;
+    background-color: #967bbd;
+}
+.state-doing{
+    border-top: 2px solid #967bbd;
+    border-bottom: 2px solid #967bbd;
+    background-color: #fff;
+    color: #967bbd;
+}
+.state-doing .arrow-left, .state-doing .arrow-right, .state-doing .circle-left, .state-doing .circle-right {
+    border-color: #967bbd;
+    background-color: #fff;
+}
+.state-invalid .circle-left, .state-invalid .circle-right, .state-invalid .state-arrow, .state-invalid .state-circle {
+    border-color: #ebebeb;
+    background-color: #ebebeb;
+}
+.state-fail{
+    border-top: 2px solid #ff6767;
+    border-bottom: 2px solid #ff6767;
+    background-color: #ff6767;
+    color: #fff;
+}
+.state-fail .arrow-left{
+    border-color: #ff6767;
+    background-color: #fff;
+}
+.state-fail .circle-left, .state-fail .circle-right {
+    border-color: #ff6767;
+    background-color: #ff6767;
+}
+.state-invalid{
+    border-top: 2px solid #ebebeb;
+    border-bottom: 2px solid #ebebeb;
+    background-color: #ebebeb;
+    color: #666;
+}
+.state-invalid .arrow-left {
+    border-color: #ebebeb;
+    background-color: #fff;
+}
+.state-invalid .arrow-right{
+    border-color: #ebebeb;
+    background-color: #ebebeb;
 }