ads_web/src/views/efTools/automation/components/automatedRuleTips.vue

<script lang="ts" setup>
/**
 * @Name: automatedRuleTips.vue
 * @Description: 自动化规则提示
 * @Author: xinyan
 */
import {ref} from 'vue';

const props = defineProps({
  drawerVisible: {
    type: Boolean,
    default: false,
  }
});
const drawerVisible = ref(props.drawerVisible);
const activeNames = ref(['1']);

</script>

<template>
  <el-drawer v-model="drawerVisible" :close-on-click-modal="false" :destroy-on-close="true"
             size="30%"
             title="如何使用自动化规则？"
             style="color: #0b0d0d;font-weight: 600;">
    <div class="description">
      <p>
        自动化规则提供分时调价、开启/暂停广告活动、添加关键词、添加否定词模板，您可以根据您的需求选择对应模板并进行设置，关联具体的广告活动。</p>
    </div>
    <div style="padding: 20px;">
      <el-collapse v-model="activeNames">
        <el-collapse-item name="1" title="分时调价">
          <p>设置分时条件模板可以精确到一周每天每小时的颗粒度设置您的竞价，可以应用到您关联的每个广告活动。</p>
        </el-collapse-item>
        <el-collapse-item name="2" title="开启/暂停广告活动">
          <p>设置开启暂停广告活动模板支持您自定义设置开启和暂停操作的条件，并应用到关联的广告活动。</p>
        </el-collapse-item>
        <el-collapse-item name="3" title="添加关键词">
          <p>
            设置添加关键词模版，根据自定义数据指标，将对应搜索词（含关键词、商品），添加到指定广告组进行投放；将模版应用到关联的广告活动时，表示自定义数据指标将从这些广告活动中获取。</p>
        </el-collapse-item>
        <el-collapse-item name="4" title="添加否定词">
          <p>根据自定义数据指标，添加否定词到指定的广告组中。</p>
        </el-collapse-item>
      </el-collapse>
    </div>
  </el-drawer>
</template>

<style scoped>
.description {
  padding: 20px 20px 0;
  font-size: 13px;
  color: #666;
  margin: 0;
}

::v-deep .el-collapse-item__header {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.el-collapse-item__content p {
  font-size: 13px;
  color: #666;
  margin: 0;
}

</style>