update: temp

index.html

@@ -8,6 +8,8 @@
     <link rel="stylesheet" type="text/css" href="<%= htmlWebpackPlugin.options.BASE_URL %>static/fonts/iconfont.css">
     <link rel="stylesheet" type="text/css" href="<%= htmlWebpackPlugin.options.BASE_URL %>static/css/common.css">
     <link rel="stylesheet" href="//at.alicdn.com/t/font_2996579_93aeeozj35q.css">
+    <link rel="stylesheet" href="//at.alicdn.com/t/font_3229694_tsgoqwe80mp.css"> <!--GIC3.0营销-->
+    <link rel="stylesheet" href="//at.alicdn.com/t/font_3229694_tsgoqwe80mp.js"> <!--GIC3.0营销-->
     <!-- <link rel="stylesheet" href="//web-1251519181.file.myqcloud.com/components/element.2.12.0.css"> -->
     <!-- element 皮肤 -->
     <!-- <link rel="stylesheet" type="text/css" href="http://web-1251519181.file.myqcloud.com/lib/elementUI/theme.1.0.1/index.css"> -->

src/views/ai/index.vue

@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import { task } from './task.vue';
+import task from './task.vue';
 import { manage } from './manage.vue';
 export default {
   data() {

src/views/ai/task.vue

 <template>
-  <div class="contain">外呼列表</div>
+  <div class="contain">
+    <div class="cardList">
+      <div class="card" v-for="item in cardContent" :key="item.title">
+        <div class="cardTitle">
+          <i :class="['iconfont', item.iconName]" style="font-size:20px;" />
+          <span>{{ item.title }}</span>
+        </div>
+        <div class="cardBody">
+          {{ item.content }}
+        </div>
+        <el-button size="small" type="primary">立即新建</el-button>
+      </div>
+    </div>
+    <div class="account"><span>账户可用余额</span><a href="">立即充值</a></div>
+    <div class="searchWarp">
+      <el-form inline="true" class="table-page-search-wrapper" size="small">
+        <el-form-item>
+          <el-input v-model="form.activityName" clearable placeholder="请输入活动名称"> <i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-select v-model="form.scene" placeholder="全部场景">
+            <el-option v-for="item in optionScenes" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-select v-model="form.activityPlanStatus" placeholder="全部活动状态">
+            <el-option v-for="item in optionActive" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-date-picker v-model="form.time" type="daterange" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
+        </el-form-item>
+      </el-form>
+    </div>
+    <el-table> </el-table>
+  </div>
 </template>
 
 <script>
-export default {};
+export default {
+  data() {
+    return {
+      form: {
+        activityName: '',
+        scene: '',
+        activityPlanStatus: '',
+        time: ''
+      },
+      cardContent: [
+        {
+          title: '客户生日',
+          iconName: 'icon-shengrizunxiang',
+          content: '针对生日客户进行营销，提高会员粘性'
+        },
+        {
+          title: '节日活动邀约',
+          iconName: 'icon-huodongyaoyue',
+          content: '节日活动邀约，会员专享权益，提升门店营业额'
+        },
+        {
+          title: '客户复购',
+          iconName: 'icon-kehufugouguanli',
+          content: '针对消费过的客户进行营销，提升核心客户数量'
+        },
+        {
+          title: '其它场景',
+          iconName: 'icon-qitachangjing',
+          content: '自定义营销场景'
+        }
+      ],
+      optionScenes: [
+        {
+          value: 1,
+          label: '客户生日'
+        },
+        {
+          value: 2,
+          label: '节日活动邀约'
+        },
+        {
+          value: 4,
+          label: '客户复购'
+        },
+        {
+          value: 5,
+          label: '其它场景'
+        }
+      ],
+      optionActive: [
+        {
+          value: 0,
+          label: '未开始'
+        },
+        {
+          value: 1,
+          label: '进行中'
+        },
+        {
+          value: 2,
+          label: '已终止'
+        },
+        {
+          value: 3,
+          label: '已结束'
+        },
+        {
+          value: 5,
+          label: '欠费暂停'
+        }
+      ]
+    };
+  }
+};
 </script>
 
-<style></style>
+<style lang="scss" scoped>
+.contain {
+  margin: 0 20px;
+  .cardList {
+    display: flex;
+    .card {
+      width: 224px;
+      height: 140px;
+      background: #f0f3fd;
+      border-radius: 4px;
+      padding: 12px 16px;
+      box-sizing: border-box;
+      margin-right: 1;
+      margin-right: 12px;
+      :last-child {
+        margin-right: 0;
+      }
+    }
+    .cardTitle {
+      i {
+        font-size: 20px;
+        opacity: 0.8;
+        color: #2f54eb;
+      }
+      span {
+        font-size: 16px;
+        margin-left: 10px;
+        font-weight: 500;
+        line-height: 22px;
+      }
+    }
+    .cardBody {
+      margin: 6px 0 12px 0;
+      font-size: 14px;
+      line-height: 20px;
+      height: 40px;
+      color: #606266;
+    }
+  }
+  .account {
+    margin: 20px 0;
+  }
+  .searchWarp {
+    margin-bottom: 20px;
+    .el-form.table-page-search-wrapper {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      flex-wrap: wrap;
+      .el-form-item {
+        margin: 0;
+      }
+    }
+  }
+}
+</style>