nwe

src/components/admittance/technical/addTechnical.vue

@@ -108,6 +108,9 @@ export default {
     mounted(){
         if (this.row !== '') { // 当页面传值过来时
             this.addVal = this.row.name; // 修改名称
+            if (this.row.producies.length !== 0) {
+                this.allProduct = [];
+            }
             console.log(this.row)
             for (let i = 0; i < this.row.producies.length; i++) {
                 let product2List;

src/components/projectManagement/projectInformation/projectInformation.vue

@@ -62,11 +62,37 @@
                         <span>里程碑</span>
                     </p>
                     <div class="milestone">
-                        <div>
+                        <div class="line">
+                            <span>需求调研阶段</span>
+                            <span>开发阶段</span>
+                            <span>试运行阶段</span>
+                        </div>
+                        <p class="blueLine">
+                            <img src="./img/nowbg.png">
+                        </p>
+                        <div class="processAll">
                             <p class="process">
                                 <span>新建</span>
                                 <span>3030-02-01</span>
+                                <span class="processList"></span>
                                 <span></span>
+                            </p>
+                            <p class="process">
+                                <span>需求确认</span>
+                                <span>3030-02-01</span>
+                                <span class="processList"></span>
+                                <span></span>
+                            </p>
+                            <p class="process">
+                                <span>初验</span>
+                                <span>3030-02-01</span>
+                                <span class="processList"></span>
+                                <span></span>
+                            </p>
+                            <p class="process">
+                                <span>终验</span>
+                                <span>3030-02-01</span>
+                                <span class="processList"></span>
                                 <span></span>
                             </p>
                         </div>
@@ -91,6 +117,7 @@
 </template>
 
 <script>
+import $ from 'jquery';
 export default {
     data () {
         return {
@@ -110,12 +137,16 @@ export default {
                     content: 'test',
                     time: '2020-02-02'
                 }
-            ]
+            ],
+            now: 40
         }
     },
     created() {
     },
     mounted(){
+        if (this.now > 0) {
+            $('.processAll>p:nth-child(1) .processList').addClass('blue')
+        }
     },
     methods: {
     },
@@ -175,13 +206,7 @@ export default {
         width: 280px;
         font-family: 'Regular';
     }
-    .projectInformation .content .milestone{
-        height: 180px;
-        margin-top: 30px;
-        padding: 10px;
-        border: 1px solid rgba(8, 104, 157, .1);
-        border-radius: 2px;
-    }
+    /*最新动态*/
     .projectInformation .content .new{
         margin-top: 30px;
         margin-bottom: 30px;
@@ -205,19 +230,83 @@ export default {
     .projectInformation>>>.el-scrollbar__wrap {
         overflow-x: hidden;
     }
+    /*里程碑样式*/
+    .projectInformation .content .milestone{
+        height: 180px;
+        margin-top: 30px;
+        padding: 0 30px 0 30px;
+        border: 1px solid rgba(8, 104, 157, .1);
+        border-radius: 2px;
+    }
     .projectInformation .process{
         display: inline-block;
         width: 90px;
         text-align: center;
+        position: relative;
     }
-    .projectInformation .process>span:nth-child(1), .projectInformation .process>span:nth-child(1){
+    .projectInformation .process>span:nth-child(1){
         display: block;
+        font-size: 16px;
+        color: #4877e6;
     }
-    .projectInformation .process>span:nth-child(3){
+    .projectInformation .process>span:nth-child(2){
         display: block;
+        font-size: 12px;
+        color: #666;
+        margin-bottom: 10px;
+    }
+    .projectInformation .process>span:nth-child(3){
+        display: inline-block;
         width: 30px;
         height: 30px;
         border-radius: 50%;
         background: #ccc;
     }
+    .projectInformation .process>span:nth-child(4){
+        display: inline-block;
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+        background: #fff;
+        position: absolute;
+        bottom: 12px;
+        left: 38px;
+    }
+    .projectInformation .milestone>div:nth-child(3) {
+        display: flex;
+        justify-content: space-between;
+    }
+    .projectInformation .milestone .line{
+        height: 10px;
+        margin: 0 45px 0 45px;
+        background: rgba(8,182,255,0.3);
+        display: flex;
+        justify-content: space-around;
+        font-size: 14px;
+        color: #333;
+        position: relative;
+        top: 76px;
+    }
+    .projectInformation .milestone .line>span{
+        position: relative;
+        top: -35px;
+    }
+    .projectInformation .milestone .blueLine{
+        height: 6px;
+        width: 20%;
+        margin: 0 45px 0 45px;
+        background-image: linear-gradient(to right, #005cff,#00ceff);
+        position: relative;
+        border-top-right-radius: 15px;
+        border-bottom-right-radius: 15px;
+        top: 68px;
+    }
+    .projectInformation .milestone .blueLine>img{
+        position: absolute;
+        right: -66px;
+        top: 10px;
+    }
+    .projectInformation .bule{
+        background: #4877e6;
+    }
 </style>