版本首页更改

src/router/index.js

@@ -158,6 +158,7 @@ export const constantRoutes = [{
     {
       path: 'versionsCalendar',
       name: '版本日历',
+      hidden: true,
       component: () =>
         import('@/views/projectManage/taskList/versionsCalendar'),
       meta: { title: '版本日历' }

src/views/ToConfigure/configure.vue

@@ -611,7 +611,7 @@ export default {
         this.moduleForm.moduleNames[0] = data.moduleName
       } else if (data && type === 'delete') {
         if (data.childModules && data.childModules.length > 0) {
-          this.$message({ message: '该模块下存在子模块', type: 'error' })
+          this.$message({ message: '该模块下存在子模块，不允许删除', type: 'error' })
         } else {
           this.moduleDialog = true
           this.moduleTitle = '删除确认'

src/views/projectManage/version/list/index.vue

@@ -2,8 +2,9 @@
   <el-container class="version_list">
     <div style="width:100%;height:100%;padding-top:1px;background-color: #F2F3F6;">
       <el-main class="layout_header" style="padding: 1% 2%">
-        <div>
+        <div class="layout_header_title">
           <span style="font-size: 22px;letter-spacing: 1px;font-weight: 600;color: #333B4A;">版本</span>
+          <i class="el-icon-date calendar" @click="link_calendar" />
         </div>
         <div style="position: relative;right: 1%">
           <el-divider />
@@ -485,12 +486,15 @@ export default {
       }
       requirementName += ' '
       return requirementName
+    },
+    link_calendar() {
+      this.$router.push({ name: '版本日历' })
     }
   }
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .time-line-container {
   margin-top: 20px;
   border: 1px solid rgba(238,238,238,1);
@@ -512,6 +516,16 @@ export default {
   border-radius: 4px;
   background-color: #ffffff;
 }
+.layout_header_title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .calendar {
+    padding-right: 30px;
+    color: #909399;
+    font-size: 18px;
+  }
+}
 .layout_main {
   padding: 0 5px 2% 0
 }

src/views/projectManage/version/list/timeLine.vue

@@ -2,11 +2,11 @@
   <div class="swiper-container">
     <swiper ref="mySwiper" class="swiper-wrapper timeline" :options="options">
       <swiper-slide v-for="(item,index) in steps" :key="index" class="swiper-slide">
-        <div class="timestamp">
-          <span class="date">{{ item.dateLabel }}</span>
-        </div>
-        <div class="status">
-          <span>{{ item.title }}</span>
+        <div class="line" />
+        <div class="center" :class="[index%2==0?'circle1':'circle2']"><div class="circle-in center" /></div>
+        <div :class="[index%2==0?'point1':'point2']" />
+        <div :class="[index%2==0?'content1':'content2']">
+          <span>{{ item.title }}</span><span class="date">{{ item.dateLabel }}</span>
         </div>
       </swiper-slide>
       <!-- 分页器 -->
@@ -79,9 +79,10 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .swiper-container {
   padding: 50px 0;
+  position: relative;
 }
 .timeline {
   width: 90%;
@@ -90,48 +91,85 @@ export default {
   padding: 0;
   text-align: center;
 }
-.timeline li {
-  transition: all 200ms ease-in;
-}
-.timestamp {
-  width: 200px;
-  margin-bottom: 20px;
-  padding: 0px 40px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  font-weight: 100;
-}
-.status {
-  padding: 0px 10px;
-  display: flex;
-  justify-content: center;
-  border-top: 4px solid #409eff;
-  position: relative;
-  transition: all 200ms ease-in ;
-}
-
-.status span {
-  font-weight: 600;
-  padding-top: 20px;
-}
-.status span:before {
-  content: '';
-  width: 25px;
-  height: 25px;
-  background-color: #e8eeff;
-  border-radius: 25px;
-  border: 4px solid #409eff;
-  position: absolute;
-  top: -18px;
-  left: 42%;
-  transition: all 200ms ease-in;
-}
 .swiper-slide {
   height: 150px;
   width: 200px;
-  text-align: center;
+  display: flex;
+  align-items: center;
   font-size: 18px;
+  position: relative;
+  .line{
+    width: 100%;
+    border: 1px solid #909399;
+  }
+  .center {
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%,-50%);
+  }
+  .circle1,.circle2 {
+    position: absolute;
+    height: 15px;
+    width: 15px;
+    border-radius: 50%;
+    border: 3px solid #67C23A;
+  }
+  .circle1::before {
+    content: '';
+    position: absolute;
+    height: 30px;
+    border: 1px solid #67C23A;
+    left: 50%;
+    top: 0;
+    transform: translate(-50%,-33px);
+  }
+  .circle2::after{
+    content: '';
+    position: absolute;
+    height: 30px;
+    border: 1px solid #67C23A;
+    left: 50%;
+    bottom: 0;
+    transform: translate(-50%,33px);
+  }
+  .circle-in {
+    position: absolute;
+    border-radius: 50%;
+    border: 4px solid #67C23A;
+  }
+  .point1 {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%,-45px);
+    border-radius: 50%;
+    border: 4px solid #67C23A;
+  }
+  .point2 {
+    position: absolute;
+    left: 50%;
+    bottom: 50%;
+    transform: translate(-50%,45px);
+    border-radius: 50%;
+    border: 4px solid #67C23A;
+  }
+  .content1,.content2 {
+    width: 100%;
+    font-size: 14px;
+    color: #909399;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    span {
+      margin-right: 5px;
+    }
+  }
+  .content1 {
+    top:10px;
+  }
+  .content2 {
+    bottom:10px;
+  }
 }
 .swiper-slide:nth-child(2n) {
   width: 40%;
@@ -141,7 +179,7 @@ export default {
 }
 .swiper-button {
   position: relative;
-  top: -108px;
+  top: -75px;
 }
 </style>