协同宣发

project/sass/apps/AppMaterialLibrary/components/List.vue

@@ -11,20 +11,39 @@
       <div class="left">
         <div class="title">
           <h2>分组</h2>
-          <el-button icon="iconfont iconAdd">添加分组</el-button>
+          <el-button icon="iconfont iconAdd" size="mini">添加分组</el-button>
         </div>
         <el-scrollbar class="group-list">
-          <div class="item" v-for="(item, index) in 20" :key="index">
+          <div
+            class="item"
+            v-for="(item, index) in 20"
+            :class="[currIndex === index ? 'active' : '']"
+            :key="index"
+            @click="currIndex = index">
             <h2>全部分类</h2>
-            <img src="https://cdn.cunwuyun.cn/dvcp/announce/menu-active.png"/>
+            <el-dropdown class="avatar-container">
+              <img v-if="currIndex !== index" src="https://cdn.cunwuyun.cn/dvcp/announce/menu-active.png"/>
+              <img v-else src="https://cdn.cunwuyun.cn/dvcp/announce/menu.png"/>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item>编辑</el-dropdown-item>
+                <el-dropdown-item>删除</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
           </div>
         </el-scrollbar>
       </div>
     </template>
     <template slot="content">
+      <div class="tabs">
+        <span>话术</span>
+        <span>图片</span>
+        <span>小程序</span>
+        <span>话术</span>
+        <span>话术</span>
+      </div>
       <ai-search-bar class="search-bar">
         <template #left>
-          <el-button size="small" type="primary" icon="iconfont iconAdd" @click="toAdd('')">添加话术</el-button>
+          <el-button size="small" type="primary" icon="iconfont iconAdd" @click="toAdd('')">添加素材</el-button>
         </template>
         <template slot="right">
           <el-input
@@ -91,7 +110,7 @@
           taskTitle: '',
           endTime: ''
         },
-        user: [],
+        currIndex: 0,
         tableData: [],
         loading: false,
         total: 0,
@@ -174,5 +193,65 @@
 <style lang="scss" scoped>
   .AppMaterialLibrary {
     height: 100%;
+
+    ::v-deep .ai-list__content--left {
+      margin-right: 0;
+    }
+
+    .left {
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      background: #F5F5F9;
+
+      .title {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 40px;
+        padding: 0 8px 0 16px;
+        background: #FAFAFB;
+        box-shadow: inset 0px -1px 0px 0px #E6ECF0;
+        border-radius: 2px 0px 0px 0px;
+
+        h2 {
+          font-size: 14px;
+          color: #222222;
+        }
+
+        .el-button {
+          height: 28px;
+        }
+      }
+      .group-list {
+        height: calc(100% - 40px);
+        padding-top: 8px;
+        overflow-x: hidden;
+        .item {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          height: 40px;
+          padding: 0 16px 0 24px;
+          cursor: pointer;
+          background: transparent;
+          transition: all ease 0.5s;
+
+          h2 {
+            font-size: 14px;
+            color: #222;
+            font-weight: 600;
+          }
+
+          &:hover, &.active {
+            background: #E8EFFF;
+
+            h2 {
+              color: #2266FF;
+            }
+          }
+        }
+      }
+    }
   }
 </style>