通知配置页面

src/views/ToConfigure/components/noticeConfig.vue

@@ -7,15 +7,85 @@
         <el-button size="medium" :class="{'is-active':activeTab===3}" @click="activeTab=3">未启用</el-button>
         <el-button size="medium" :class="{'is-active':activeTab===4}" @click="activeTab=4">全部</el-button>
       </el-button-group>
-      <el-button type="primary" size="medium" class="control-add">
-        <i class="el-icon-plus" />
-        新建
-        <i class="el-icon-arrow-down" />
-      </el-button>
+      <el-popover
+        placement="bottom"
+        width="150"
+        trigger="click"
+        popper-class="notice-config-popper"
+      >
+        <ul class="add-require-task">
+          <li>需求定时通知</li>
+          <li>任务定时通知</li>
+        </ul>
+        <el-button slot="reference" type="primary" size="medium" class="control-add">
+          <i class="el-icon-plus" />新建<i class="el-icon-arrow-down" />
+        </el-button>
+      </el-popover>
     </div>
+    <ul class="notice-list">
+      <li class="notice-item">
+        <div class="item-detail">
+          <div class="require-img"><img :src="requireImg"></div>
+          <div class="item-title">需求定时通知</div>
+          <div class="item-span">
+            <label>需求范围：</label>
+            <el-tooltip
+              effect="dark"
+              content="用户体验；营销增长；乘客端5.4.20"
+              placement="bottom"
+              popper-class="item-span-tooltip"
+            >
+              <span>用户体验；营销增长；乘客端5.4.20</span>
+            </el-tooltip>
+          </div>
+          <div class="item-span">
+            <label>通知条件：</label>
+            <el-tooltip
+              effect="dark"
+              content="任务事件 开始开发 1天前开始提醒"
+              placement="bottom"
+              popper-class="item-span-tooltip"
+            >
+              <span>任务事件 开始开发 1天前开始提醒</span>
+            </el-tooltip>
+          </div>
+          <div class="item-span">
+            <label>通知方式：</label>
+            <span>Dchart群</span>
+          </div>
+          <div class="item-span">
+            <label>通知时刻：</label>
+            <span>10:00</span>
+          </div>
+          <el-button size="small" class="item-link">点击查看详情</el-button>
+        </div>
+        <div class="item-bottom">
+          <div class="item-status"><span />启用中</div>
+          <div class="item-creater"><span>朱晓菲</span>创建于2020-06-06</div>
+          <i class="el-icon-edit-outline" />
+          <el-popover
+            placement="bottom"
+            width="150"
+            trigger="click"
+            popper-class="notice-item-popper"
+          >
+            <ul class="add-require-task">
+              <li>停用</li>
+              <li>复制</li>
+              <li>删除</li>
+            </ul>
+            <i slot="reference" class="el-icon-more" />
+          </el-popover>
+        </div>
+      </li>
+      <li class="notice-item" />
+      <li class="notice-item" />
+    </ul>
   </section>
 </template>
 <script>
+import requireImg from '@/assets/detailPage/需求@2x.png'
+import taskImg from '@/assets/detailPage/任务@2x.png'
 export default {
   props: {
     bizId: {
@@ -26,7 +96,9 @@ export default {
   },
   data() {
     return {
-      activeTab: 1
+      activeTab: 1,
+      requireImg: requireImg,
+      taskImg: taskImg
     }
   },
   created() {
@@ -35,26 +107,180 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+ul,li{
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
 .notice-config{
   padding: 10px 30px;
-  .top-control {
-    display: flex;
-    justify-content: space-between;
+}
+.top-control {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 30px;
+  .el-button-group {
+    button{
+      padding: 0;
+      width: 65px;
+      height: 36px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .is-active {
+      color:#409EFF;
+      border: 1px solid #409EFF;
+    }
+  }
+  .control-add {
+    padding: 0;
+    width: 90px;
+    height: 30px;
+    /deep/span{
+      width: 100%;
+      padding: 0 5px;
+      display: flex;
+      justify-content: space-around;
+    }
+  }
+}
+.add-require-task {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 12px;
+  li{
+    margin-bottom: 12px;
+    cursor: pointer;
+    color: #444444;
+  }
+}
+.notice-list {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  justify-content: space-between;
+}
+.notice-item {
+  min-width: 450px;
+  height: 280px;
+  width: 48%;
+  box-shadow:0px 6px 12px rgba(0,0,0,0.16);
+  border-radius:5px;
+  margin-bottom: 40px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  .item-detail {
+    width: 100%;
+    height: 226px;
+    padding: 24px 31px 0 121px;
+    position: relative;
+    .require-img {
+      position: absolute;
+      left: 31px;
+      top: 27px;
+      height: 58px;
+      width: 58px;
+      background:rgba(64,158,255,0.14);
+      border-radius:20px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      img {
+        width: 27px;
+        height: 30px;
+      }
+    }
+    .item-title {
+      color:#333333;
+      font-size: 16px;
+      margin-bottom: 18px;
+    }
+    .item-span {
+      font-size: 12px;
+      margin: 9px 0;
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      label{
+        color: #666666;
+        font-weight: 200;
+      }
+      span {
+        color:#333333;
+        cursor: pointer;
+      }
+    }
+    .item-link {
+      color:#409EFF;
+      border: 1px solid #409EFF;
+      padding: 7px 10px;
+    }
+  }
+  .item-bottom {
+    width: calc(100% - 28px);
+    height: 53px;
+    border-top:1px solid rgba(112,112,112,0.27);
+    font-size: 12px;
+    display: grid;
+    grid-template-columns: 20% 70% 5% 5%;
     align-items: center;
-    .el-button-group {
-      button{
-        padding: 0;
-        width: 65px;
-        height: 36px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
+    .item-status {
+      color: #409EFF;
+      padding-left: 19px;
+      span{
+        display: inline-block;
+        height: 8px;
+        width: 8px;
+        background-color: #409EFF;
+        border-radius: 50%;
+        margin-right: 5px;
       }
-      .is-active {
-        color:#409EFF;
-        border: 1px solid #409EFF;
+    }
+    .item-creater {
+      color: #999999;
+      span{
+        margin-right: 5px;
       }
     }
+    .el-icon-edit-outline,.el-icon-more {
+      font-size: 16px;
+      color: #666666;
+    }
   }
 }
 </style>
+<style>
+.notice-config-popper {
+  min-width: 124px !important;
+  width: 124px !important;
+}
+.notice-item-popper {
+  min-width: 86px !important;
+  width: 86px !important;
+}
+.item-span-tooltip {
+  background-color: rgba(121,132,150,0.8) !important;
+  position: relative;
+}
+.item-span-tooltip::before{
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: -6px;
+  transform: translateX(-50%);
+  width: 0;
+  height: 0;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-bottom: 6px solid rgba(121,132,150,0.8);
+}
+.item-span-tooltip .popper__arrow {
+  display: none !important;
+}
+</style>