update: 样式调整

5a24c09b · caoyanzhi · 3abdf48d · 5a24c09b · 5a24c09b · 5a24c09b
Commit 5a24c09b authored Apr 13, 2022 by caoyanzhi
24 changed files
--- a/src/assets/style/base/index.scss
+++ b/src/assets/style/base/index.scss
@@ -36,30 +36,6 @@
 }

 .dm-title__label {
-  margin-bottom: 10px;
-  padding-left: 20px;
-  font-size: 16px;
-  font-weight: 500;
-  color: #303133;
-  line-height: 40px;
-  height: 40px;
-  width: 100%;
-  box-sizing: border-box;
-  &::before {
-    content: '';
-    display: inline-block;
-    vertical-align: middle;
-    transform: translate(-20px, -1px);
-    width: 4px;
-    height: 16px;
-    background: #2f54eb;
-  }
-  &.border-top {
-    border-top: 1px solid #E4E7ED;;
-  }
-  &.border-bottom {
-    border-bottom: 1px solid #E4E7ED;;
-  }
  &--tips {
    padding:8px 16px;
    border:1px solid #91d5ff;
@@ -73,20 +49,12 @@
  &--icon {
    font-size:14px;
    padding-left:4px;
+    padding-right: 4px;
    vertical-align: middle;
    color:#909399;
  }
 }

-.dm-title__label--outer {
-  border-bottom: 1px solid #DCDFE6;
-  width: calc(100% + 24px);
-  padding: 0 0 20px 24px;
-  font-size: 16px;
-  font-weight: 500;
-  margin: 0 0 20px -24px;
-}
-
 .gic-people--button{
  background: #f2f3f4;
  padding: 0px 0px 20px 124px;

--- a/src/views/card/analysis-shelf.vue
+++ b/src/views/card/analysis-shelf.vue
@@ -2,23 +2,25 @@
  <section>
    <!-- 渠道分析 -->
    <div class="dm-form__wrap" v-if="$route.meta.type !== 'shelf'">
-      <h3 class="dm-title__label">
-        <span class="card-chart__title">渠道分析</span>
-        <el-date-picker class="fr ml5 mr20" v-model="dateTime2" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="cardChannelAnalysis"></el-date-picker>
-      </h3>
+      <dm-sub-title title-align="space-between" class="mb10">
+        渠道分析
+        <el-date-picker v-model="dateTime2" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="cardChannelAnalysis"></el-date-picker>
+      </dm-sub-title>
      <el-table tooltipEffect="light" :data="tableList" style="width:100%" v-loading="loading">
        <el-table-column v-for="(v, i) in tableHeader" :key="i" :align="v.align" :width="v.width" :min-width="v.minWidth" :prop="v.prop" :label="v.label" :formatter="v.formatter"></el-table-column>
      </el-table>
    </div>
    <!-- 卡券报表趋势分析 -->
    <div class="dm-form__wrap">
-      <h3 class="dm-title__label clearfix">
-        <span class="card-chart__title">卡券报表趋势分析</span>
-        <el-date-picker class="fr ml5 mr20" v-model="dateTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="cardTrendEchart"></el-date-picker>
-        <el-select class="fr w200" v-model="chartParams.kpiName" placeholder="选择状态" @change="cardTrendEchart">
-          <el-option v-for="(v, i) in kpiNameOptions" :key="i" :label="v.label" :value="v.value"></el-option>
-        </el-select>
-      </h3>
+      <dm-sub-title title-align="space-between">
+        卡券报表趋势分析
+        <div>
+          <el-select class="w200" v-model="chartParams.kpiName" placeholder="选择状态" @change="cardTrendEchart">
+            <el-option v-for="(v, i) in kpiNameOptions" :key="i" :label="v.label" :value="v.value"></el-option>
+          </el-select>
+          <el-date-picker class="ml5" v-model="dateTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="cardTrendEchart"></el-date-picker>
+        </div>
+      </dm-sub-title>
      <div id="mountNode" ref="mountNode" v-show="list.length"></div>
      <div class="chart--nodata" v-show="!list.length"></div>
    </div>
@@ -231,12 +233,3 @@ export default {
  }
 };
 </script>
-
-<style lang="scss" scoped>
-.card-chart__title {
-  display: inline-block;
-  vertical-align: middle;
-  padding-top: 13px;
-  font-weight: 700;
-}
-</style>
--- a/src/views/card/analysis.vue
+++ b/src/views/card/analysis.vue
@@ -39,14 +39,16 @@
    </div>
    <!-- 渠道分析 -->
    <div class="dm-form__wrap">
-      <h3 class="dm-title__label">
-        <span class="card-chart__title" style="margin-right:auto;">
+      <dm-sub-title title-align="space-between" class="mb10">
+        <div>
          渠道分析
          <span class="ml20" style="color:#606266;font-size:13px;"><i class="el-icon-info" style="color:#2f54eb;margin-right:4px"></i>数据均来自于统计时间段内</span>
-        </span>
-        <el-checkbox v-model="flag" label="查看全部" border @change="cardChannelStatistics"></el-checkbox>
-        <el-date-picker class="ml10" :disabled="flag" :clearable="false" v-model="dateTime2" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="cardChannelStatistics"></el-date-picker>
-      </h3>
+        </div>
+        <div>
+          <el-checkbox v-model="flag" label="查看全部" border @change="cardChannelStatistics"></el-checkbox>
+          <el-date-picker class="ml10" :disabled="flag" :clearable="false" v-model="dateTime2" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="cardChannelStatistics"></el-date-picker>
+        </div>
+      </dm-sub-title>
      <el-table tooltipEffect="light" :data="tableList" style="width:100%" v-loading="loading2">
        <el-table-column :show-overflow-tooltip="true" min-width="120" fixed="left" align="left" label="渠道名称">
          <template slot-scope="scope">
@@ -187,14 +189,4 @@ export default {
    }
  }
 }
-.dm-title__label {
-  display: flex;
-  width: 100%;
-  margin: 0 0 20px 0;
-  align-items: center;
-  font-size: 16px;
-  font-weight: 500;
-  color: rgba(48, 49, 51, 1);
-  line-height: 22px;
-}
 </style>
--- a/src/views/card/group-send.vue
+++ b/src/views/card/group-send.vue
 <template>
  <el-form class="content" :model="form" ref="form" :rules="rules" label-width="100px" v-loading="loading">
    <div class="dm-form__wrap">
-      <h3 class="dm-title__label">基础设置</h3>
+      <dm-sub-title class="mb10">基础设置</dm-sub-title>
      <el-form-item label="活动名称" prop="putOnName">
        <dm-input class="w250" v-model="form.putOnName" :maxlength="9" :disabled="isInfo"></dm-input>
      </el-form-item>
@@ -28,7 +28,7 @@
      </el-form-item>
    </div>
    <div class="dm-form__wrap">
-      <h3 class="dm-title__label">会员设置</h3>
+      <dm-sub-title class="mb10">会员设置</dm-sub-title>
      <div class="pb20">
        <span class="dm-input_label pr10">选择会员</span>
        <el-radio :disabled="isInfo" v-model="form.memberType" :label="0">会员筛选</el-radio>
@@ -53,7 +53,7 @@
    </div>
    <!-- 只有存在卡券的情况下出现卡券通知方式 -->
    <section class="dm-form__wrap">
-      <h3 class="dm-title__label">卡券通知方式配置</h3>
+      <dm-sub-title class="mb10">卡券通知方式配置</dm-sub-title>
      <el-alert type="warning" show-icon :closable="false" style="width: 520px" title="大批量投放卡券时，若搭配“微信模板消息”进行通知，可能导致模板消息被封。"></el-alert>
      <el-form-item label="通知方式" class="is-required" prop="noticeType">
        <el-radio v-model="form.noticeType" :label="0" :disabled="!isEditTemplate || isInfo"

--- a/src/views/ecm/form.vue
+++ b/src/views/ecm/form.vue
@@ -4,7 +4,7 @@
      <!-- 计划内容设置 -->
      <section class="dm-form__wrap">
        <div class="page-tip">营销对象为所有客户，包括非会员和会员(微信会员、POS会员)</div>
-        <h3 class="dm-title__label border-bottom">计划内容设置</h3>
+        <dm-sub-title type="line" class="mb10">计划内容设置</dm-sub-title>
        <el-form-item label="计划名称" prop="ecmPlanName">
          <dm-input class="w400" :maxlength="30" v-model="form.ecmPlanName" :disabled="!isAdd"></dm-input>
        </el-form-item>
@@ -101,9 +101,9 @@
      </section>
      <!-- 消费触发配置 -->
      <section class="dm-form__wrap" v-if="form.effectType == 0 && form.effectAction === 'consume'">
-        <h3 class="dm-title__label border-bottom">
+        <dm-sub-title type="line" class="mb10">
          消费触发配置
-        </h3>
+        </dm-sub-title>
        <p class="fz14 gray ml10">同时满足以下条件即可触发</p>
        <div class="ecm-content">
          <el-radio :label="1" :disabled="!isAdd" v-model="form.consum_type" @change="handleConsumTypeChange"
@@ -267,7 +267,7 @@
      </section>
      <!-- 会员卡升/降级触发设置 -->
      <section class="dm-form__wrap" v-if="form.effectType == 0 && (form.effectAction === 'degrade' || form.effectAction === 'upgrade')">
-        <h3 class="dm-title__label border-bottom">会员卡{{ form.effectAction === 'degrade' ? '降' : '升' }}级触发设置</h3>
+        <dm-sub-title type="line" class="mb10">会员卡{{ form.effectAction === 'degrade' ? '降' : '升' }}级触发设置</dm-sub-title>
        <el-form-item prop="gradeIds" :label="`会员卡${form.effectAction === 'degrade' ? '降' : '升'}级至`">
          <el-select :disabled="!isAdd" v-model="form.gradeIds" multiple placeholder="请选择" class="w300">
            <el-option v-for="v in gradeList" :key="v.gradeId" :label="v.gradeName" :value="v.gradeId" :disabled="v.disabled"></el-option>
@@ -276,11 +276,11 @@
      </section>
      <!-- 储值触发配置 -->
      <section class="dm-form__wrap" v-if="form.effectType == 0 && form.effectAction === 'stored'">
-        <h3 class="dm-title__label border-bottom">
+        <dm-sub-title type="line" class="mb10">
          储值触发配置
-          <i class="dm-title__label--icon iconfont icon-xinxixianshi"></i>
+          <i class="ml10 dm-title__label--icon iconfont icon-xinxixianshi"></i>
          <span class="gray fz13">仅适用于线下单笔充值场景；消费、退款等不会触发</span>
-        </h3>
+        </dm-sub-title>
        <p class="fz14 gray mb20 ml10">同时满足以下条件即可触发</p>
        <el-form-item>
          <div class="no_label_form_label">
@@ -300,11 +300,11 @@
      </section>
      <!-- 营销次数配置  重复 -->
      <section class="dm-form__wrap" v-if="form.effectType == 1">
-        <h3 class="dm-title__label border-bottom">
+        <dm-sub-title type="line">
          营销次数配置
-          <i class="dm-title__label--icon iconfont icon-xinxixianshi"></i>
+          <i class="ml10 dm-title__label--icon iconfont icon-xinxixianshi"></i>
          <span class="gray fz13">设置本营销计划对同个会员的触发次数</span>
-        </h3>
+        </dm-sub-title>
        <div style="padding:20px 0;">
          <label class="mr5">限制对每个用户营销一次</label>
          <el-switch :disabled="!isAdd" v-model="form.marketingOnceFlag" :active-value="1" :inactive-value="0"></el-switch>
@@ -313,11 +313,11 @@
      </section>
      <!-- 营销次数配置  实时触点 -->
      <section class="dm-form__wrap" v-if="form.effectType == 0 && ['consume', 'upgrade', 'degrade', 'stored'].includes(form.effectAction)">
-        <h3 class="dm-title__label border-bottom">
+        <dm-sub-title type="line" class="mb10">
          营销次数配置
-          <i class="dm-title__label--icon iconfont icon-xinxixianshi"></i>
+          <i class="ml10 dm-title__label--icon iconfont icon-xinxixianshi"></i>
          <span class="gray fz13">设置本营销计划对同个会员的触发次数</span>
-        </h3>
+        </dm-sub-title>
        <el-form-item label="营销次数配置" prop="marketingTimesType" v-if="form.consum_type == 1">
          <el-select :disabled="!isAdd" v-model="form.marketingTimesType" class="w150 vertical-middle">
            <el-option v-for="(v, i) in marketingTimesTypeOptions" :key="i" :value="v.value" :label="v.label"></el-option>
@@ -343,14 +343,14 @@

      <!-- 有效时间 -->
      <section class="dm-form__wrap" v-if="form.effectType == 0 || form.effectType == 1">
-        <h3 class="dm-title__label border-bottom" v-if="form.consum_type == 2">
+        <dm-sub-title type="line" v-if="form.consum_type == 2">
          有效时间
-          <i class="dm-title__label--icon iconfont icon-xinxixianshi"></i>
+          <i class="ml10 dm-title__label--icon iconfont icon-xinxixianshi"></i>
          <span class="gray fz13">活动持续时间最长为31天</span>
-        </h3>
-        <h3 class="dm-title__label border-bottom" v-else>
+        </dm-sub-title>
+        <dm-sub-title type="line" v-else>
          有效时间
-        </h3>
+        </dm-sub-title>
        <el-form-item label="有效时间" prop="endDate" :show-message="showMessage" v-if="form.consum_type == 1">
          <el-radio :disabled="isEdit && onlineStatus != 0 && form.expireType == 1" v-model="form.expireType" :label="0">长期有效</el-radio>
          <el-radio :disabled="isEdit && onlineStatus != 0 && form.expireType == 0" v-model="form.expireType" :label="1">固定期限</el-radio>
@@ -371,11 +371,11 @@
      </section>
      <!-- 人群筛选器 -->
      <section class="dm-form__wrap">
-        <h3 class="dm-title__label border-bottom">
+        <dm-sub-title type="line" class="mb10">
          适用人群
-          <i class="dm-title__label--icon iconfont icon-xinxixianshi"></i>
+          <i class="ml10 dm-title__label--icon iconfont icon-xinxixianshi"></i>
          <span class="gray fz13">适用人群创建后不支持修改</span>
-        </h3>
+        </dm-sub-title>
        <div class="pl20 pb20" style="display:flex;align-items:center">
          <el-radio-group style="width: 240px" v-model="form.memberType">
            <el-radio :disabled="!isAdd" :label="0">会员筛选</el-radio>
@@ -396,7 +396,7 @@
      </section>
      <!-- 营销事件组件 -->
      <section class="dm-form__wrap">
-        <h3 class="dm-title__label border-bottom">营销事件</h3>
+        <dm-sub-title type="line">营销事件</dm-sub-title>
        <div style="margin-bottom: 20px">
          <div class="layout--tips mt10" style="display:inline-block;min-width:1280px" v-if="form.effectType == 1 || form.effectType == 2">
            <!-- <i class="el-icon-info inline-block"></i> -->
@@ -442,7 +442,7 @@
      </section>
      <!-- 只有存在卡券的情况下出现卡券通知方式 -->
      <section class="dm-form__wrap" v-if="currentCard.comName">
-        <h3 class="dm-title__label border-bottom">卡券通知方式配置</h3>
+        <dm-sub-title type="line">卡券通知方式配置</dm-sub-title>
        <el-form-item label="通知方式" class="is-required" prop="cardNoticeType">
          <el-radio v-model="form.cardNoticeType" :label="0"
            >不通知
@@ -517,11 +517,11 @@
      </section>
      <!-- 营销分析设置 -->
      <section class="dm-form__wrap" v-if="xsxsFlag == 1">
-        <h3 class="dm-title__label border-bottom">
-          <span class="inline-block mr10">营销分析设置</span>
-          <span class="gray fz12">开启后，可用于统计这次营销计划的触达转化收益情况。</span>
+        <dm-sub-title type="line">
+          营销分析设置
+          <span class="ml10 gray fz12">开启后，可用于统计这次营销计划的触达转化收益情况。</span>
          <!-- <el-switch :disabled="!isAdd" v-model="analyseConfig.open_flag" :active-value="1" :inactive-value="0" @change="onChangeAnalyseConfig($event, true)"></el-switch> -->
-        </h3>
+        </dm-sub-title>
        <div style="padding-bottom:10px;color:#303133">
          <div class="mt20">
            <div class="w150 text-right inline-block mr10">

--- a/src/views/ecm/list.vue
+++ b/src/views/ecm/list.vue
 <template>
  <section class="dm-wrap" v-loading="loading">
-    <h3 class="dm-title__label">
+    <dm-sub-title title-align="space-between" class="mb10">
      计划列表
      <span class="intro_wrap" @click="drawer = true"><i class="iconfont icon-zhibiaoshuoming introlIcon" alt="" /><span class="intro">指标说明</span></span>
-    </h3>
+    </dm-sub-title>
    <div class="pb22 clearfix">
      <el-input v-model="listParams.searchName" class="w250" placeholder="输入计划名称" clearable @change="search"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
      <el-select class="dm-select" clearable="" v-model="listParams.effectType" placeholder="所有时效" @change="search">

--- a/src/views/ecm/touch-effect.vue
+++ b/src/views/ecm/touch-effect.vue
@@ -5,10 +5,10 @@
        每日上午更新昨日数据
        <span class="intro_wrap" @click="drawer = true"><i class="iconfont icon-zhibiaoshuoming introlIcon" alt="" /><span class="intro">指标说明</span></span>
      </div>
-      <h3 class="dm-title__label">
+      <dm-sub-title title-align="space-between">
        计划整体效果
        <el-button type="primary" class="detail" @click="toClue('计划整体')"><i class="iconfont icon-chakanxiangqing"></i>查看详情</el-button>
-      </h3>
+      </dm-sub-title>
      <touch-charts :type="0" :createTime="$route.query.createTime" />
      <market-list v-if="marketListData.length" :isRepeat="isRepeat" :data="marketListData" :isReference="isReference" :batchNum="batchNum" :batchTimes="batchTime" @toClue="toClue" />
    </div>

--- a/src/views/evaluation/charts.vue
+++ b/src/views/evaluation/charts.vue
@@ -5,19 +5,20 @@
      <store-group width="240" class="pr5" :model="storeGroupData" @commit-store="getStoreGroup"></store-group>
    </div>
    <div class="dm-form__wrap">
-      <h3 class="dm-title__label">
+      <dm-sub-title title-align="space-between">
        评价趋势
-        <el-button style="float: right;padding: 0px 32px;" type="text" @click="preTrend">详情</el-button>
-      </h3>
+        <el-button style="padding: 0px 32px;" type="text" @click="preTrend">详情</el-button>
+      </dm-sub-title>
+
      <div id="mountNode" ref="mountNode" v-show="list.length"></div>
      <div class="chart--nodata" v-show="!list.length"></div>
    </div>
    <div class="dm-form__wrap">
      <div slot="header">
-        <h3 class="dm-title__label">
+        <dm-sub-title title-align="space-between">
          各项评分概况
-          <el-button style="float: right;padding: 0px 32px;" type="text" @click="preDetail">详情</el-button>
-        </h3>
+          <el-button style="padding: 0px 32px;" type="text" @click="preDetail">详情</el-button>
+        </dm-sub-title>
      </div>
      <div class="rate-wrap">
        <div class="rate-item" :class="{ pb20: index !== 2 }" v-for="(item, index) in rate" :key="index">
@@ -38,12 +39,12 @@
    </div>
    <div>
      <div class="charts-half">
-        <h3 class="dm-title__label--outer">正面快评使用统计</h3>
+        <dm-sub-title>正面快评使用统计</dm-sub-title>
        <div id="mountNodePieGood" ref="mountNodePieGood" v-show="goodList.length"></div>
        <div class="chart--nodata mt100" v-show="!goodList.length"></div>
      </div>
      <div class="charts-half">
-        <h3 class="dm-title__label--outer">负面快评使用统计</h3>
+        <dm-sub-title>负面快评使用统计</dm-sub-title>
        <div id="mountNodePieBad" ref="mountNodePieBad" v-show="badList.length"></div>
        <div class="chart--nodata mt100" v-show="!badList.length"></div>
      </div>

--- a/src/views/evaluation/manage.vue
+++ b/src/views/evaluation/manage.vue
@@ -17,14 +17,19 @@ export default {
  components: { Newest, Charts },
  data() {
    return {
-      activeName: 'first'
+      activeName: 'second'
    };
  }
 };
 </script>

 <style lang="scss" scoped>
-.evaluation-manage /deep/ .el-tabs__nav-wrap {
-  padding-left: 20px;
+.evaluation-manage {
+  /deep/ .el-tabs__header {
+    margin-bottom: 0;
+  }
+  /deep/ .el-tabs__nav-wrap {
+    padding-left: 20px;
+  }
 }
 </style>
--- a/src/views/ewash/analysis.vue
+++ b/src/views/ewash/analysis.vue
@@ -2,27 +2,25 @@
  <section>
    <!-- 渠道分析 -->
    <div class="dm-form__wrap" v-if="$route.meta.type !== 'shelf'">
-      <h3 class="dm-title__label">
+      <dm-sub-title title-align="space-between" class="mb10">
        渠道分析
-        <div class="fr">
-          <el-date-picker class="ml5 mr20" v-model="dateTime2" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="cardChannelAnalysis"></el-date-picker>
-        </div>
-      </h3>
+        <el-date-picker v-model="dateTime2" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="cardChannelAnalysis"></el-date-picker>
+      </dm-sub-title>
      <el-table tooltipEffect="light" :data="tableList" style="width:100%" v-loading="loading">
        <el-table-column v-for="(v, i) in tableHeader" :key="i" :align="v.align" :width="v.width" :min-width="v.minWidth" :prop="v.prop" :label="v.label" :formatter="v.formatter"></el-table-column>
      </el-table>
    </div>
    <!-- 卡券报表趋势分析 -->
    <div class="dm-form__wrap">
-      <h3 class="dm-title__label clearfix">
+      <dm-sub-title title-align="space-between">
        卡券报表趋势分析
-        <div class="fr">
+        <div>
          <el-select class="w200" v-model="chartParams.kpiName" placeholder="选择状态" @change="cardTrendEchart">
            <el-option v-for="(v, i) in kpiNameOptions" :key="i" :label="v.label" :value="v.value"></el-option>
          </el-select>
-          <el-date-picker class="ml5 mr20" v-model="dateTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="cardTrendEchart"></el-date-picker>
+          <el-date-picker class="ml5" v-model="dateTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="cardTrendEchart"></el-date-picker>
        </div>
-      </h3>
+      </dm-sub-title>
      <div id="mountNode" ref="mountNode" v-show="list.length"></div>
      <div class="chart--nodata" v-show="!list.length"></div>
    </div>

--- a/src/views/ewash/group-send.vue
+++ b/src/views/ewash/group-send.vue
@@ -2,7 +2,7 @@
  <el-form class="content" :model="form" ref="form" :rules="rules" label-width="100px" v-loading="loading">
    <div class="dm-form__wrap">
      <div class="page-tip">风险提示：大规模投放卡券可能导致模板消息被封</div>
-      <h3 class="dm-title__label border-bottom">基础设置</h3>
+      <dm-sub-title type="line" class="mb10">基础设置</dm-sub-title>
      <el-form-item label="活动名称" prop="putOnName">
        <dm-input class="w250" v-model="form.putOnName" :maxlength="9" :disabled="isInfo"></dm-input>
      </el-form-item>
@@ -22,7 +22,7 @@
      </el-form-item>
    </div>
    <div class="dm-form__wrap">
-      <h3 class="dm-title__label border-bottom">会员设置</h3>
+      <dm-sub-title type="line" class="mb10">会员设置</dm-sub-title>
      <div class="pb20">
        <span class="dm-input_label pr10">选择会员</span>
        <el-radio :disabled="isInfo" v-model="form.memberType" :label="0">会员筛选</el-radio>
@@ -46,7 +46,7 @@
    </div>
    <!-- 只有存在卡券的情况下出现卡券通知方式 -->
    <section class="dm-form__wrap">
-      <h3 class="dm-title__label border-bottom">卡券通知方式配置</h3>
+      <dm-sub-title type="line">卡券通知方式配置</dm-sub-title>
      <el-form-item label="通知方式" class="is-required" prop="noticeType">
        <el-radio v-model="form.noticeType" :label="0" :disabled="!isEditTemplate || isInfo"
          >不通知

--- a/src/views/ewash/statements-detail.vue
+++ b/src/views/ewash/statements-detail.vue
@@ -4,7 +4,7 @@
      <el-col :span="18">
        <!-- 预约单信息 -->
        <section class="dm-form__wrap statement-edit__info">
-          <h3 class="dm-title__label border-bottom">预约单信息</h3>
+          <dm-sub-title type="line">预约单信息</dm-sub-title>
          <el-row :gutter="20">
            <el-col :span="12">
              <span class="primary-font-color">达摩订单号：</span><span class="regular-font-color">{{ info.orderNumber || '--' }}</span>
@@ -51,7 +51,7 @@
        </section>
        <!-- e袋洗订单信息 -->
        <section class="dm-form__wrap statement-edit__info">
-          <h3 class="dm-title__label border-bottom">e袋洗订单信息</h3>
+          <dm-sub-title type="line">e袋洗订单信息</dm-sub-title>
          <el-row :gutter="20">
            <el-col :span="12">
              <span class="primary-font-color">e袋洗单号：</span><span class="regular-font-color">{{ info.edaixiOrderNumber || '--' }}</span>
@@ -97,7 +97,7 @@
        </section>
        <!-- 分拣信息 status > 5 && status !== 10 -->
        <section class="dm-form__wrap statement-edit__info" v-if="info.status > 5 && info.status !== 10">
-          <h3 class="dm-title__label border-bottom">分拣明细</h3>
+          <dm-sub-title type="line">分拣明细</dm-sub-title>
          <el-table :data="sortTable" style="width: 100%" class="mt20">
            <el-table-column prop="categoryName" label="名称" minWidth="180"></el-table-column>
            <el-table-column prop="total" label="数量" minWidth="180"></el-table-column>
@@ -121,7 +121,7 @@
      </el-col>
      <el-col :span="6">
        <section class="dm-form__wrap statement-edit__info ml5">
-          <h3 class="dm-title__label border-bottom"><i class="el-icon-s-order primary-color mr5"></i>订单状态</h3>
+          <dm-sub-title type="line" class="mb10"><i class="el-icon-s-order primary-color mr5"></i>订单状态</dm-sub-title>
          <el-timeline>
            <el-timeline-item v-for="(order, index) in orderStatus" :key="index" :icon="order.icon" :type="order.type" :color="order.color" :size="order.size" :timestamp="order.timestamp">
              {{ order.content }}
@@ -129,7 +129,7 @@
          </el-timeline>
        </section>
        <section class="dm-form__wrap statement-edit__info ml5">
-          <h3 class="dm-title__label border-bottom"><i class="el-icon-location danger-color mr5"></i>物流跟踪</h3>
+          <dm-sub-title type="line" class="mb10"><i class="el-icon-location danger-color mr5"></i>物流跟踪</dm-sub-title>
          <el-timeline v-if="logistics.length">
            <el-timeline-item v-for="(logistic, index) in logistics" :key="index" :color="index === logistics.length - 1 ? '#f5222d' : ''" :timestamp="logistic.time" :size="logistic.size">
              {{ logistic.text }}

--- a/src/views/game/common/share.vue
+++ b/src/views/game/common/share.vue
 <template>
  <section class="dm-form__wrap">
-    <h3 class="dm-title__label border-bottom">分享设置</h3>
+    <dm-sub-title type="line">分享设置</dm-sub-title>
    <el-form-item label="分享设置" class="width50 is-required">
      <el-radio-group v-model="form.shareFlag">
        <el-radio :label="1">可分享</el-radio>

--- a/src/views/game/common/threshold.vue
+++ b/src/views/game/common/threshold.vue
 <template>
  <section class="dm-form__wrap clearfix">
-    <h3 class="dm-title__label border-bottom">
+    <dm-sub-title type="line">
      参与门槛
-      <i class="iconfont icon-xinxixianshi pl5 gray"></i>
+      <i class="iconfont icon-xinxixianshi ml10 gray"></i>
      <span class="gray fz13">满足参与门槛会员才可以参与游戏</span>
-    </h3>
+    </dm-sub-title>
    <el-form-item label="参与门槛" prop="memberType">
      <el-radio v-model="form.memberType" :label="0">所有用户</el-radio>
      <el-radio v-model="form.memberType" :label="1">会员筛选</el-radio>

--- a/src/views/game/dzp/form.vue
+++ b/src/views/game/dzp/form.vue
@@ -2,7 +2,7 @@
  <div>
    <el-form class="content" ref="form" :model="form" label-width="100px" :rules="rules" v-loading="loading" element-loading-text="拼命加载中">
      <section class="dm-form__wrap">
-        <h3 class="dm-title__label border-bottom">游戏内容</h3>
+        <dm-sub-title type="line" class="mb10">游戏内容</dm-sub-title>
        <el-form-item label="游戏名称" prop="gameName">
          <dm-input v-model="form.gameName" class="w400" :disabled="isInfo" :maxlength="25"></dm-input>
        </el-form-item>
@@ -46,7 +46,7 @@
        </el-form-item>
      </section>
      <section class="dm-form__wrap">
-        <h3 class="dm-title__label border-bottom">抽奖机制</h3>
+        <dm-sub-title type="line" class="mb10">抽奖机制</dm-sub-title>
        <el-form-item label="抽奖消耗" prop="gameIntegral">
          <el-input-number controls-position="right" v-model="form.gameIntegral" class="w400" :min="0" :precision="0" :disabled="isInfo"></el-input-number> 积分
          <p class="fz12 gray">0表示免费抽奖</p>

--- a/src/views/game/ggk/form.vue
+++ b/src/views/game/ggk/form.vue
@@ -2,7 +2,7 @@
  <div>
    <el-form class="content" ref="form" :model="form" label-width="100px" :rules="rules" v-loading="loading" element-loading-text="拼命加载中">
      <section class="dm-form__wrap">
-        <h3 class="dm-title__label border-bottom">游戏内容</h3>
+        <dm-sub-title type="line" class="mb10">游戏内容</dm-sub-title>
        <el-form-item label="游戏名称" class="width50" prop="gameName">
          <dm-input v-model="form.gameName" class="w400" :disabled="isInfo" :maxlength="25"></dm-input>
        </el-form-item>
@@ -42,7 +42,7 @@
        </el-form-item>
      </section>
      <section class="dm-form__wrap">
-        <h3 class="dm-title__label border-bottom">抽奖机制</h3>
+        <dm-sub-title type="line" class="mb10">抽奖机制</dm-sub-title>
        <el-form-item label="抽奖消耗" class="width50" prop="gameIntegral">
          <el-input-number controls-position="right" class="w400" :min="0" v-model="form.gameIntegral" :precision="0" :disabled="isInfo"></el-input-number> 积分
          <p class="fz12 gray">0表示免费抽奖</p>

--- a/src/views/game/klfl/form.vue
+++ b/src/views/game/klfl/form.vue
 <template>
  <el-form ref="form" :model="form" :rules="rules" label-width="110px" class="ptyx-add content" v-loading="loading" loading-text="加载中">
    <section class="dm-form__wrap">
-      <h3 class="dm-title__label border-bottom">游戏内容</h3>
+      <dm-sub-title type="line" class="mb10">游戏内容</dm-sub-title>
      <el-form-item label="游戏名称" prop="gameName" class="width50">
        <dm-input v-model="form.gameName" class="w400" :maxlength="10"></dm-input>
      </el-form-item>
@@ -94,7 +94,7 @@
      </el-form-item>
    </section>
    <section class="dm-form__wrap">
-      <h3 class="dm-title__label border-bottom">奖项设置</h3>
+      <dm-sub-title type="line" class="mb10">奖项设置</dm-sub-title>
      <el-form-item label="首次特殊策略" class="el-form-item__margin-top14">
        <el-table tooltipEffect="light" :data="tableList" style="width: 100%" v-loading="tableLoading">
          <el-table-column prop="strategyName" label="策略名称" align="left"></el-table-column>

--- a/src/views/game/ptyx/form.vue
+++ b/src/views/game/ptyx/form.vue
 <template>
  <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="ptyx-add content" v-loading="loading" element-loading-text="拼命加载中">
    <section class="dm-form__wrap">
-      <h3 class="dm-title__label border-bottom">游戏内容</h3>
+      <dm-sub-title type="line" class="mb10">游戏内容</dm-sub-title>
      <el-form-item label="游戏名称" prop="gameName" class="width50">
        <dm-input v-model="form.gameName" class="w400" :disabled="isInfo" :maxlength="25"></dm-input>
      </el-form-item>
@@ -53,7 +53,7 @@
      </el-form-item>
    </section>
    <section class="dm-form__wrap">
-      <h3 class="dm-title__label border-bottom">页面设置</h3>
+      <dm-sub-title type="line" class="mb10">页面设置</dm-sub-title>
      <el-form-item label="品牌logo" class="width50 is-required">
        <dm-upload-avatar :model.sync="form.logoImg" label="上传图片" width="80" height="80" tips="请上传高度为85px的PNG透明背景图片" :disabled="isInfo"></dm-upload-avatar>
      </el-form-item>
@@ -73,7 +73,7 @@

    <!-- 游戏背景音乐设置 -->
    <section class="dm-form__wrap">
-      <h3 class="dm-title__label border-bottom">游戏背景音乐设置</h3>
+      <dm-sub-title type="line" class="mb10">游戏背景音乐设置</dm-sub-title>
      <el-form-item label="游戏背景音乐">
        <el-switch v-model="form.musicFlag" :active-value="1" :inactive-value="0"></el-switch>
      </el-form-item>

--- a/src/views/game/znm/form.vue
+++ b/src/views/game/znm/form.vue
 <template>
  <el-form ref="form" :model="form" :rules="rules" label-width="100px" class="ptyx-add content" v-loading="loading" loading-text="加载中">
    <section class="dm-form__wrap">
-      <h3 class="dm-title__label border-bottom">游戏内容</h3>
+      <dm-sub-title type="line" class="mb10">游戏内容</dm-sub-title>
      <el-form-item label="游戏名称" prop="gameName" class="width50">
        <dm-input v-model="form.gameName" class="w400" :maxlength="25"></dm-input>
      </el-form-item>
@@ -28,7 +28,7 @@
      </el-form-item>
    </section>
    <section class="dm-form__wrap">
-      <h3 class="dm-title__label border-bottom">奖项设置</h3>
+      <dm-sub-title type="line" class="mb10">奖项设置</dm-sub-title>
      <el-form-item label="首次奖项设置" class="width50">
        <el-button @click="showCard('firstStrategy')">{{ firstStrategy.cardName || '卡券选择' }}</el-button>
        <template v-if="!isAdd">

--- a/src/views/message/detail.vue
+++ b/src/views/message/detail.vue
 <template>
  <div>
    <el-form class="dm-form__wrap" ref="form" :model="info" label-width="90px">
-      <h3 class="dm-title__label">基本信息</h3>
+      <dm-sub-title class="mb10">基本信息</dm-sub-title>
      <el-row :gutter="20" class="message-detail__label">
        <el-col :span="8">
          <span class="primary-font-color">发送时间：</span>
@@ -39,7 +39,7 @@
      </el-row>
    </el-form>
    <section class="dm-form__wrap">
-      <h3 class="dm-title__label">客户设置</h3>
+      <dm-sub-title>客户设置</dm-sub-title>
      <div class="pt10 pb20">
        <span class="dm-input_label">选择群发客户：</span>
        <el-radio v-model="info.memberType" :label="0" disabled>客户筛选</el-radio>
@@ -62,13 +62,13 @@
      <vue-gic-member-group v-if="info.memberType === 2" :defaltSelected="defaltSelected" :height="500" :projectName="projectName" :headerList="headerList" @handleDataTransferred="handleDataTransferred" @handleDataLeft="handleDataLeft"></vue-gic-member-group>
    </section>
    <section class="dm-form__wrap">
-      <h3 class="dm-title__label">
+      <dm-sub-title class="mb10">
        提交记录
        <div class="layout--tips" style="margin-top:0;width:400px;display:inline-block;margin-left:20px">
          <i class="el-icon-info"></i>
          当天的短信提交记录数据可在隔天下载完整内容
        </div>
-      </h3>
+      </dm-sub-title>
      <div class="clearfix pb22">
        <!-- <el-select class="dm-select" v-model="listParams.sendStatus" placeholder="选择发送状态" @change="LoadMessageDetailList"> <el-option v-for="(v, i) in sendStatusOptions" :key="i" :label="v.label" :value="v.value"></el-option></el-select> -->
        <el-input v-model="listParams.memberName" class="w200" placeholder="客户昵称/手机号/卡号" clearable @change="LoadMessageDetailList"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>

--- a/src/views/message/importSendDetail.vue
+++ b/src/views/message/importSendDetail.vue
 <template>
  <div>
    <el-form class="dm-form__wrap" ref="form" :model="info" label-width="90px">
-      <h3 class="dm-title__label">基本信息</h3>
+      <dm-sub-title class="mb10">基本信息</dm-sub-title>
      <el-row :gutter="20" class="message-detail__label">
        <el-col :span="8">
          <span class="primary-font-color">创建时间：</span>
@@ -43,13 +43,13 @@
      </el-row>
    </el-form>
    <section class="dm-form__wrap">
-      <h3 class="dm-title__label">
+      <dm-sub-title class="mb10">
        提交记录
        <div class="layout--tips" style="margin-top:0;width:400px;display:inline-block;margin-left:20px">
          <i class="el-icon-info"></i>
          当天的短信提交记录数据可在隔天下载完整内容
        </div>
-      </h3>
+      </dm-sub-title>
      <div class="clearfix pb22">
        <!-- <el-select class="dm-select" v-model="listParams.sendStatus" placeholder="选择发送状态" @change="smsSmportPlanLogPage"> <el-option v-for="(v, i) in sendStatusOptions" :key="i" :label="v.label" :value="v.value"></el-option></el-select> -->
        <el-input v-model="listParams.search" class="w200" placeholder="客户昵称/手机号/卡号" clearable @change="smsSmportPlanLogPage"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>

--- a/src/views/msg/edit.vue
+++ b/src/views/msg/edit.vue
 <template>
  <el-form class="content" v-loading="loading" label-width="100px">
    <section class="dm-form__wrap msg-edit__info">
-      <h3 class="dm-title__label">基础信息</h3>
+      <dm-sub-title>基础信息</dm-sub-title>
      <el-row :gutter="20">
        <el-col :span="8">
          <span class="primary-font-color">标题：</span><span class="regular-font-color">{{ info.templateName || '--' }}</span>
@@ -21,7 +21,7 @@
      </el-row>
    </section>
    <section class="dm-form__wrap">
-      <h3 class="dm-title__label">详细内容</h3>
+      <dm-sub-title class="mb10">详细内容</dm-sub-title>
      <div class="msg-edit__content">
        <div class="msg-edit__left">
          <div class="msg-edit__left--inner">
@@ -80,7 +80,10 @@
      </div>
    </section>
    <section class="dm-form__wrap">
-      <h3 class="dm-title__label">跳转设置 <span class="gray fz13 pl10">同时选择跳转小程序和H5页面，优先跳转小程序页面</span></h3>
+      <dm-sub-title class="mb10">
+        跳转设置
+        <span class="gray fz13 pl10">同时选择跳转小程序和H5页面，优先跳转小程序页面</span>
+      </dm-sub-title>
      <div class="msg-edit__url">
        <p class="pb20"><el-checkbox v-model="checked2">跳转小程序</el-checkbox></p>
        <div v-if="checked2">
@@ -108,7 +111,13 @@
      </div>
    </section>
    <section class="dm-form__wrap" v-if="info.triggerCode === 'integralexpires'">
-      <h3 class="dm-title__label">发送时间配置<i class="ml20 ml20 dm-title__label--icon iconfont icon-xinxixianshi"></i><span class="gray fz13"> 22点至次日9点为防骚扰时段，通知将在结束后发送</span></h3>
+      <dm-sub-title class="mb10">
+        发送时间配置
+        <div class="ml20">
+          <i class="dm-title__label--icon iconfont icon-xinxixianshi"></i>
+          <span class="gray fz13"> 22点至次日9点为防骚扰时段，通知将在结束后发送</span>
+        </div>
+      </dm-sub-title>
      <el-form-item label="积分即将过期前" label-width="120px"> <el-input-number :precision="0" controls-position="right" v-model="info.remindDay" :min="1" :max="31"></el-input-number> 天发送该模板消息提醒。 </el-form-item>
      <!-- <el-form-item label="发送时间设置" label-width="120px">
        <el-select v-model="info.sendTime" class="w300">
@@ -118,7 +127,13 @@
    </section>
    <!-- 积分变更提现 -->
    <section class="dm-form__wrap" v-if="info.triggerCode === 'integralChange'">
-      <h3 class="dm-title__label">提醒配置<i class="ml20 ml20 dm-title__label--icon iconfont icon-xinxixianshi"></i><span class="gray fz13"> 开关切换后即生效</span></h3>
+      <dm-sub-title class="mb10">
+        提醒配置
+        <div class="ml20">
+          <i class="dm-title__label--icon iconfont icon-xinxixianshi"></i>
+          <span class="gray fz13"> 开关切换后即生效</span>
+        </div>
+      </dm-sub-title>
      <integral-change v-if="info.triggerCode === 'integralChange'" />
    </section>
    <dm-form-bottom>

--- a/src/views/recharge/board.vue
+++ b/src/views/recharge/board.vue
@@ -8,12 +8,10 @@
  -->
  <section class="recharge">
    <div class="dm-wrap" style="margin-bottom: 4px">
-      <div class="dm-title__label">
+      <dm-sub-title title-align="space-between">
        账户概览
-        <div style="float: right">
-          <el-button v-if="$getButtonLimit($buttonCode.marketingAccountRule)" :limit-code="$buttonCode.marketingAccountRule" class="h32 ghost-btn" type="primary" @click="setRuleVisible = true">计费规则配置</el-button>
-        </div>
-      </div>
+        <el-button v-if="$getButtonLimit($buttonCode.marketingAccountRule)" :limit-code="$buttonCode.marketingAccountRule" class="h32 ghost-btn" type="primary" @click="setRuleVisible = true">计费规则配置</el-button>
+      </dm-sub-title>
      <div class="money_wrap">
        <div class="current">
          <div class="sub_title">
@@ -41,7 +39,7 @@
      </div>
    </div>
    <div class="dm-wrap" style="border-top:1px solid #E4E7ED">
-      <h3 class="dm-title__label">今日消费</h3>
+      <dm-sub-title class="mb10">今日消费</dm-sub-title>
      <select-depart v-if="config.isMoreAccount && config.showAllDepartment" :data="deparment1" class="mb20" @load="() => load('one')" @getDepartId="id => getDepartId(id, 'one')" @remote-search="val => remoteSearch(val, 'one')" :loading="deparment1.loading" />
      <el-row class="recharge-today" :gutter="20" v-loading="loading1">
        <el-col :span="6" style="padding: 0 2px">
@@ -537,6 +535,7 @@ export default {
 }
 .money_wrap {
  display: flex;
+  margin-top: 10px;
  .current,
  .all {
    flex: 1;

--- a/src/views/wechat/form.vue
+++ b/src/views/wechat/form.vue
@@ -24,10 +24,10 @@
      </div>
    </section>
    <section class="dm-form__wrap">
-      <h3 class="dm-title__label">
+      <dm-sub-title>
        会员设置
-        <span class="fz13 gray">默认筛选当前关注公众号会员</span>
-      </h3>
+        <span class="fz13 gray ml10">默认筛选当前关注公众号会员</span>
+      </dm-sub-title>

      <div class="pt10 pb20">
        <span class="dm-input_label">选择会员：</span>
@@ -51,7 +51,7 @@
      <vue-gic-member-group v-bind="storeParams" v-if="info.memberType === 2" :defaltSelected="defaltSelected" :height="500" :projectName="projectName" :headerList="headerList" @handleDataTransferred="handleDataTransferred" @handleDataLeft="handleDataLeft"></vue-gic-member-group>
    </section>
    <section class="dm-form__wrap" v-if="$route.meta.type !== 'imgText'">
-      <h3 class="dm-title__label">群发内容设置</h3>
+      <dm-sub-title class="mb10">群发内容设置</dm-sub-title>
      <span class="dm-input_label">群发类型：</span>
      <el-radio-group :disabled="isInfo || isEdit" v-model="info.contentType">
        <el-radio :label="0" :disabled="isInfo">图文</el-radio>