dianshang-qianduan/src/views/portraitModel/components/repurchaseAnalysis.vue

<template>
  <div class="content">
    <div class="import" @click="knowledgeFlag = !knowledgeFlag">
      <img src="@/assets/images/导入.png" alt="" />
      <span>任务知识导入</span>
    </div>
    <div v-if="knowledgeFlag" v-html="knowledgeHtml"></div>
    <div v-if="!knowledgeFlag">
      <div class="caseBack">
        <div class="title">
          <img src="@/assets/images/caseIcon.png" alt="" />
          <span>案例背景：</span>
        </div>
        <span style="line-height: 25px; font-size: 14px">
          某购物网站2024年2月份有如下订单数据，需要复购的角度展开分析。
        </span>
        <div style="margin-top: 10px; display: flex">
          <el-table
            :data="fileTable1"
            style="width: 650px"
            border
            :header-cell-style="{
              color: '#fff',
              fontSize: '14px',
              backgroundColor: '#6A7DE9!important',
            }"
          >
            <el-table-column label="订单ID" align="center" prop="id">
            </el-table-column>
            <el-table-column label="客户ID" align="center" prop="goods1">
            </el-table-column>
            <el-table-column label="购买金额" align="center" prop="goods2">
            </el-table-column>
            <el-table-column label="购买商品" align="center" prop="goods3">
            </el-table-column>
            <el-table-column label="订单日期" align="center" prop="goods3">
            </el-table-column>
          </el-table>
          <div class="download">下载数据</div>
        </div>
      </div>
      <div class="line"></div>
      <div class="caseBack">
        <div class="title">
          <img src="@/assets/images/步骤.png" alt="" />
          <span>第一步，区分首购订单 or 复购订单</span>
        </div>
        <span style="line-height: 25px; font-size: 14px">
          我们需要根据用户ID、订单ID和购买日期，区分每行数据订单是首购or
          复购第几次。<br />

          通常采用的方法是用户ID作为主排序字段，购买日期作为第二排序字段，分类汇总次数。<br />
          首购订单记为1，复购订单依次累加
        </span>
        <div style="margin-top: 10px; display: flex">
          <el-table
            :data="step1Data"
            style="width: 850px"
            border
            :header-cell-style="{
              color: '#fff',
              fontSize: '14px',
              backgroundColor: '#6A7DE9!important',
            }"
          >
            <el-table-column label="订单ID" align="center" prop="name">
            </el-table-column>
            <el-table-column
              label="客户ID"
              align="center"
              prop="name"
              width="100"
            >
            </el-table-column>
            <el-table-column label="购买金额" align="center" prop="name">
            </el-table-column>
            <el-table-column label="购买商品" align="center" prop="name">
            </el-table-column>
            <el-table-column label="订单日期" align="center" prop="name">
            </el-table-column>
            <el-table-column
              label="首购订单&复购订单"
              align="center"
              prop="amount"
            >
              <template #default="scope">
                <el-select
                  v-model="scope.row.params"
                  placeholder="请选择"
                  style="width: 95px"
                  size="small"
                >
                  <el-option
                    :label="item"
                    :value="item"
                    v-for="item in 10"
                    :key="item"
                  />
                  <!-- <el-option :label="item" :value="item" />
                <el-option label="C" value="C" />
                <el-option label="D" value="D" /> -->
                </el-select>
              </template>
            </el-table-column>
          </el-table>

          <div class="submit">提交</div>
        </div>
      </div>
      <div class="line"></div>
      <div class="caseBack">
        <div class="title">
          <img src="@/assets/images/步骤.png" alt="" />
          <span>第二步，复购率计算</span>
        </div>
        <span style="line-height: 25px; font-size: 14px">
          用户复购率=单位时间内购买两次及以上的用户数/有购买行为的总用户数<br />
          可见，需要计算出两点，一是有复购行为的用户数，二是有购买行为的总用户数，基于二者计算用户复购率。
        </span>
        <div style="margin-top: 10px; display: flex">
          <el-table
            :data="step2Data"
            style="width: 650px"
            border
            :header-cell-style="{
              color: '#fff',
              fontSize: '14px',
              backgroundColor: '#6A7DE9!important',
            }"
          >
            <el-table-column label="计算指标" align="center" prop="name">
            </el-table-column>
            <el-table-column label="计算说明" align="center" prop="description">
            </el-table-column>
            <el-table-column label="计算值" align="center" prop="amount">
              <template #default="scope">
                <el-input
                  v-model="scope.row.params"
                  placeholder="请输入"
                  style="width: 70px"
                >
                </el-input
                ><span v-if="scope.$index == 2">%</span>
              </template>
            </el-table-column>
          </el-table>
          <div class="submit">提交</div>
        </div>
      </div>
      <div class="line"></div>
      <div class="caseBack">
        <div class="title">
          <img src="@/assets/images/步骤.png" alt="" />
          <span>第三步，复购时间趋势分析</span>
        </div>
        <span style="line-height: 25px; font-size: 14px">
          对于复购率的分析，需要按照日期维度，可以按季度、按月、按周查看复购率和用户数/订单数之间的变化关系，绘制变化曲线图。同时实时/定期监控数据健康度，理想状态下复购率应该是较为稳定的，根据数据变化，及时发现异常问题。
        </span>
        <div style="margin-top: 10px; display: flex">
          <img src="@/assets/images/u4316.png" alt="" />
        </div>
      </div>
      <div class="line"></div>
      <div class="caseBack">
        <div class="title">
          <img src="@/assets/images/步骤.png" alt="" />
          <span>第四步，复购时间间隔分析</span>
        </div>
        <span style="line-height: 25px; font-size: 14px">
          针对第二步计算的表格，统计分析第二次购买与首购的时间间隔，并根据复购时间间隔进行分组统计分析。<br />

          复购时间间隔分析的作用，在于了解用户在不同时间间隔范围内，进行复购行为的占比情况，从而制定营销活动的推出时间间隔。
        </span>
        <div style="margin-top: 10px; display: flex">
          <el-table
            :data="step4Data"
            :span-method="tableSpanMethod"
            style="width: 950px"
            border
            :header-cell-style="{
              color: '#fff',
              fontSize: '14px',
              backgroundColor: '#6A7DE9!important',
            }"
          >
            <el-table-column
              label="订单ID"
              align="center"
              prop="data1"
              width="120"
            >
            </el-table-column>
            <el-table-column
              label="客户ID"
              align="center"
              prop="data2"
              width="120"
            >
            </el-table-column>
            <el-table-column
              label="购买金额"
              align="center"
              prop="data3"
              width="120"
            >
            </el-table-column>
            <el-table-column
              label="购买商品"
              align="center"
              prop="data4"
              width="120"
            >
            </el-table-column>
            <el-table-column
              label="订单日期"
              align="center"
              prop="data5"
              width="120"
            >
            </el-table-column>
            <el-table-column
              label="首购订单&复购订单"
              align="center"
              prop="data6"
              width="120"
            >
            </el-table-column>
            <el-table-column
              label="第二次购买与首购的时间间隔"
              align="center"
              prop="amount"
            >
              <template #default="scope">
                <el-input
                  size="small"
                  v-model="scope.row.params1"
                  placeholder="请输入"
                  style="width: 70px"
                >
                </el-input
                >天
              </template>
            </el-table-column>
            <el-table-column label="时间间隔分组" align="center" prop="amount">
              <template #default="scope">
                <el-select
                  v-model="scope.row.params2"
                  placeholder="请选择"
                  style="width: 85px"
                  size="small"
                  @change="handleChangeTime"
                >
                  <el-option label="7天内" value="7天内" />
                  <el-option label="15天内" value="15天内" />
                  <el-option label="30天内" value="30天内" />
                  <el-option label="30天以上" value="30天以上" />
                </el-select>
              </template>
            </el-table-column>
          </el-table>
          <div class="submit">提交</div>
        </div>
        <div style="display: flex; align-items: center">
          <p style="line-height: 25px; font-size: 14px">
            根据分组字段，使用饼图/环形图展示占比情况。
          </p>
          <div class="draw" @click="draw">绘制</div>
        </div>
        <div id="echarts" style="width: 500px; height: 360px"></div>
      </div>
      <div class="line"></div>
      <div class="caseBack">
        <div class="title">
          <img src="@/assets/images/步骤.png" alt="" />
          <span>第五步，制定营销策略</span>
        </div>
        <span style="line-height: 25px; font-size: 14px">
          通过购物篮分析，能给实际销售带来的价值：
        </span>
        <div class="customerType" style="width: 887px">
          <img src="@/assets/images/促销.png" alt="" />
          <span
            >优化商品配置：可以厘清哪些商品可以一起购买,关联商品可以优化陈列方式、进行促销等;</span
          >
        </div>
        <div class="customerType" style="width: 887px">
          <img src="@/assets/images/需求.png" alt="" />
          <span
            >了解客户需求：分析出顾客的购买习惯，顾客购买商品的时间、地点等;
          </span>
        </div>
        <div class="customerType" style="width: 887px">
          <img src="@/assets/images/趋势.png" alt="" />
          <span
            >分析销售趋势：利用数据仓库对品种和库存的趋势进行分析,选定需要补充的商品,研究顾客购买趋势,分析季节性购买模式,确定降价商品。</span
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
const { proxy } = getCurrentInstance();
const knowledgeHtml = ref(
  `<p style="text-align: left;">一、理解购物篮分析</p><p style="text-align: left;"><span style="font-family: 微软雅黑;">购物篮分析是指通过分析消费者在电商平台上的购物数据，了解他们购买商品之间的关联性，从而发现潜在的消费行为和需求，为电商平台提供决策支持。通过购物篮分析，电商平台可以更好地理解用户的购物习惯和偏好，从而为用户提供更加精准的推荐和产品布局。</span></p><p>购物篮分析的关键衡量指标有三个：支持度、置信度、提升度</p><p>为了更好地解释这三个指标，这里我先跟大家举个例子，后续就用这个例子说明。</p><p>某超市30天订单数一共10000单，其中包含A商品的订单有600单，包含B商品的订单有400单，同时包含A和B两种商品的订单有300单。</p><p>购买A商品的概率 P(A)=(600/10000)*100%=6%</p><p>购买B商品的概率 P(B)=(400/10000)*100%=4%</p><p>同时购买A商品和B商品的概率 P(A∩B)=(300/10000)*100%=3%</p><p style="text-align: left;">1.支持度</p><p style="text-align: left;">支持度是指A和B两个商品同时被购买的概率，代表了这个组合的可靠程度。</p><p style="text-align: left;">AB组合的支持度=同时包含A和B商品的订单数/总订单数*100%</p><p style="text-align: left;">在本例中,AB组合的支持度=P(A∩B)=(300/10000) *100%=3%</p><p style="text-align: left;">2.置信度</p><p style="text-align: left;">置信度是指购买A之后又购买了B的条件概率,是买了A和B的订单占所有买了A的订单里的占比。代表买了A的用户有多大概率会再买B，既买A产品对B产品产生了多大的影响。</p><p style="text-align: left;">A对B的置信度=同时包含A和B商品的订单数/包含A商品的订单数*100%</p><p style="text-align: left;">在本例中，A对B的置信度=P(A∩B)/P(A)=(300/600)*100%=50%</p><p style="text-align: left;">3.提升度</p><p style="text-align: left;">A对B提升度=A对B的置信度/P(B)，是指在购买A产品这个条件下购买B产品的可能性与没有这个条件下购买B 产品的可能性之比。</p><p style="text-align: left;">它的计算方法是：A对B的置信度/P(B)。提升度和置信度一样，也是一个条件概率。</p><p style="text-align: left;"> &nbsp; &nbsp; 当置信度&gt;P(B)时,A对B的提升度&gt;1，则表示买A再买B的概率大于本身买B的概率,就表示买A对买B带来了提升效果。</p><p style="text-align: left;"> &nbsp; &nbsp; 当置信度＜P(B)时,A对B的提升度&lt;1，则表示买A再买B的概率小于本身买B的概率,就表示买A对买B带来了负向效果。</p><p style="text-align: left;"> &nbsp; &nbsp; 当置信度等于P(B)时,A对B的提升度=1，则代表买A对买B没有影响。</p><p style="text-align: left;">在本例中，A对B的提升度=A对B的置信度/P(B)=50%/4%=12.5，表示商品A对商品B有较大的提升，有较大的搭配价值，建议搭配。</p><p style="text-align: left;">二、利用购物篮分析优化产品推荐</p><p style="text-align: left;"><span style="font-family: 微软雅黑;">1. 推荐算法优化：根据用户的历史购物数据，结合用户画像和行为数据，制定更加精准的推荐算法。通过分析用户的购买行为，了解他们的购物习惯和偏好，为不同的用户提供个性化的推荐。</span></p><p style="text-align: left;"><span style="font-family: 微软雅黑;">2. 动态推荐：根据用户在购物过程中的实时行为，实时调整推荐结果，确保推荐内容与用户需求高度匹配。</span></p><p style="text-align: left;"><span style="font-family: 微软雅黑;">3. 推荐内容丰富度：除了商品推荐外，还可以考虑推荐相关服务、优惠券、套餐等，增加用户购物的丰富度和满意度。</span></p><p style="text-align: left;">三、利用购物篮分析优化产品布局</p><p style="text-align: left;"><span style="font-family: 微软雅黑;">1. 商品分类优化：根据用户的购物
);
const list = ref(["-"]);
const combinationValue1 = ref("");
const combinationValue2 = ref("");
const knowledgeFlag = ref(false);
//时间间隔分组数-7天内
const sevenNum = ref(0);
//时间间隔分组数-15天内
const fiftyNum = ref(0);
//时间间隔分组数-30天内
const thirtyNumIn = ref(0);
//时间间隔分组数-30天以上
const thirtyNumOut = ref(0);
const step1Data = ref([
  {
    name: "A",
    amount: "2300",
  },
  {
    name: "B",
    amount: "2300",
  },
  {
    name: "C",
    amount: "2300",
  },
  {
    name: "D",
    amount: "2300",
  },
]);
const fileTable1 = ref([
  {
    id: "A",
    goods1: "200",
    goods2: "2023.02.01",
    goods3: "3",
  },
  {
    id: "B",
    goods1: "300",
    goods2: "2023.02.02",
    goods3: "3",
  },
  {
    id: "A",
    goods1: "2023.02.03",
    goods2: "200",
    goods3: "3",
  },
  {
    id: "D",
    goods1: "2023.02.04",
    goods2: "150",
    goods3: "3",
  },
  {
    id: "C",
    goods1: "2023.02.05",
    goods2: "100",
    goods3: "3",
  },
]);
const step2Data = ref([
  {
    name: "有购买行为的总用户数",
    description: "第一步表格中“首购订单&复购订单”那一列数字“1”的个数",
    account: "800",
  },
  {
    name: "有复购行为的用户数",
    description: "第一步表格中“首购订单&复购订单”那一列数字“2”的个数",
    account: "1200",
  },
  { name: "复购率", description: "", account: "600" },
]);
const step3Data = ref([
  {
    data1: "A-B",
    data2: "5900",
  },
  {
    data1: "A-C",
    data2: "2400",
  },
  {
    data1: "A-D",
    data2: "1100",
  },

  {
    data1: "B-C",
    data2: "600",
  },
  {
    data1: "B-D",
    data2: "600",
  },
  {
    data1: "C-D",
    data2: "600",
  },
]);
const step4Data = ref([
  {
    data1: "dd001",
    data2: "A",
    data3: "189",
    data4: "衬衫",
    data5: "2024-02-02",
    data6: "1",
  },
  {
    data1: "dd017",
    data2: "A",
    data3: "39",
    data4: "睡衣",
    data5: "2024-02-24",
    data6: "2",
  },
  {
    data1: "dd008",
    data2: "B",
    data3: "143",
    data4: "外套",
    data5: "2024-02-14",
    data6: "1",
  },
  {
    data1: "dd013",
    data2: "B",
    data3: "59",
    data4: "衬衫",
    data5: "2024-02-22",
    data6: "2",
  },
  {
    data1: "dd015",
    data2: "C",
    data3: "94",
    data4: "睡衣",
    data5: "2024-02-23",
    data6: "1",
  },
  {
    data1: "dd019",
    data2: "C",
    data3: "186",
    data4: "睡衣",
    data5: "2024-02-28",
    data6: "2",
  },
  {
    data1: "dd007",
    data2: "D",
    data3: "138",
    data4: "裤子",
    data5: "2024-02-14",
    data6: "1",
  },
  {
    data1: "dd010",
    data2: "D",
    data3: "150",
    data4: "裤子",
    data5: "2024-02-16",
    data6: "2",
  },
]);
const step5Data = ref([
  {
    title: "平均值",
  },
]);
const step6Data = ref([
  {
    data1: "1",
    data2: "小明",
    data3: "4",
    data4: "2",
    data5: "4",
  },
  {
    data1: "2",
    data2: "小红",
    data3: "5",
    data4: "2",
    data5: "2",
  },
  {
    data1: "3",
    data2: "小李",
    data3: "5",
    data4: "1",
    data5: "1",
  },
]);
const rulesTable = ref([
  {
    data1: "1.重要价值用户",
    data2: "高",
    data3: "高",
    data4: "高",
  },
  {
    data1: "2.重要发展用户",
    data2: "高",
    data3: "低",
    data4: "高",
  },
  {
    data1: "3.重要保持用户",
    data2: "低",
    data3: "高",
    data4: "高",
  },
  {
    data1: "4.重要挽留用户",
    data2: "低",
    data3: "低",
    data4: "高",
  },
  {
    data1: "5.一般价值用户",
    data2: "高",
    data3: "高",
    data4: "低",
  },
  {
    data1: "6.一般发展用户",
    data2: "高",
    data3: "低",
    data4: "低",
  },
  {
    data1: "7.一般保持用户",
    data2: "低",
    data3: "高",
    data4: "低",
  },
  {
    data1: "6.一般挽留用户",
    data2: "低",
    data3: "低",
    data4: "低",
  },
]);
const typeData = ref([
  {
    data1: "A类商品",
    data2: "占总销售额的80%，需要重点关注",
  },
  {
    data1: "B类商品",
    data2: "占总销售额的10%，给予次要关注",
  },
  {
    data1: "C类商品",
    data2: "占总销售额的10%，给予一般关注",
  },
]);
const moveUp = (index, row) => {
  console.log("上移", index, row);
  if (index > 0) {
    const upDate = step2Data.value[index - 1];
    step2Data.value.splice(index - 1, 1);
    step2Data.value.splice(index, 0, upDate);
  } else {
    alert("已经是第一条，不可上移");
  }
};
const moveDown = (index, row) => {
  console.log("下移", index, row);
  if (index + 1 === step2Data.value.length) {
    alert("已经是最后一条，不可下移");
  } else {
    const downDate = step2Data.value[index + 1];
    step2Data.value.splice(index + 1, 1);
    step2Data.value.splice(index, 0, downDate);
  }
};
const addCombination = () => {
  if (list.value[0] == "-") {
    list.value = [];
  }
  // list.value = [];
  if (combinationValue1.value == "" || combinationValue2.vlaue == "") {
    proxy.$modal.msgError("请选择组合");
    return;
  }
  list.value.push(combinationValue1.value + "—" + combinationValue2.value);
};
const tableSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  if (rowIndex === 0) {
    if (columnIndex === 6) {
      return [2, 1];
    }
  }
  if (rowIndex === 0) {
    if (columnIndex === 7) {
      return [2, 1];
    }
  }
  if (rowIndex === 2) {
    if (columnIndex === 6) {
      return [2, 1];
    }
  }
  if (rowIndex === 2) {
    if (columnIndex === 7) {
      return [2, 1];
    }
  }
  if (rowIndex === 4) {
    if (columnIndex === 6) {
      return [2, 1];
    }
  }
  if (rowIndex === 4) {
    if (columnIndex === 7) {
      return [2, 1];
    }
  }
  if (rowIndex === 6) {
    if (columnIndex === 6) {
      return [2, 1];
    }
  }
  if (rowIndex === 6) {
    if (columnIndex === 7) {
      return [2, 1];
    }
  }
};
const handleChangeTime = (e) => {
  console.log(e);
};
const draw = () => {
  sevenNum.value = 0;
  fiftyNum.value = 0;
  thirtyNumIn.value = 0;
  thirtyNumOut.value = 0;
  if (
    !step4Data.value[0].params2 ||
    !step4Data.value[2].params2 ||
    !step4Data.value[4].params2 ||
    !step4Data.value[6].params2
  ) {
    proxy.$modal.msgError("请完成所有时间间隔分组选择！");
    return;
  }
  for (let item in step4Data.value) {
    if (step4Data.value[item].params2 === "7天内") {
      sevenNum.value++;
    }
    if (step4Data.value[item].params2 == "15天内") {
      fiftyNum.value++;
    }
    if (step4Data.value[item].params2 === "30天内") {
      thirtyNumIn.value++;
    }
    if (step4Data.value[item].params2 === "30天以上") {
      thirtyNumOut.value++;
    }
  }
  console.log("7天数量", sevenNum.value);
  console.log("15天数量", fiftyNum.value);
  console.log("30天内", thirtyNumIn.value);
  console.log("30天以上", thirtyNumOut.value);
  var chartDom = document.getElementById("echarts");
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    title: {
      text: "Referer of a Website",
      left: "center",
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      left: "left",
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: "50%",
        data: [
          { value: 1048, name: "Search Engine" },
          { value: 735, name: "Direct" },
          { value: 580, name: "Email" },
          { value: 484, name: "Union Ads" },
          { value: 300, name: "Video Ads" },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  };

  option && myChart.setOption(option);
};
</script>

<style scoped lang="scss">
.content {
  width: 100%;
  background: rgba(0, 29, 64, 0.5);
  border: 1px solid #0452c6;
  padding: 10px;
  //   opacity: 0.5;

  .import {
    display: flex;
    font-size: 15px;
    font-weight: bold;
    width: 180px;
    height: 56px;
    background-image: url("@/assets/images/01.png");
    background-size: 180px 56px;
    text-align: center;
    align-items: center;
    line-height: 56px;
    cursor: pointer;
    img {
      margin-left: 20px;
      margin-right: 15px;
    }
  }
  .caseBack {
    .title {
      font-weight: bold;
      margin-top: 10px;
      display: flex;
      align-items: center;
      span {
        margin-left: 10px;
      }
    }
    .download {
      cursor: pointer;
      margin-left: 20px;
      color: #000;
      padding-left: 10px;
      font-size: 14px;
      text-align: center;
      line-height: 31px;
      width: 89px;
      height: 31px;
      background: url("@/assets/images/downloadIcon.png");
    }
    .submit {
      cursor: pointer;
      margin-left: 20px;
      color: #000;
      padding-left: 10px;
      font-size: 14px;
      text-align: center;
      line-height: 31px;
      width: 99px;
      height: 31px;
      background: url("@/assets/images/提交任务.png");
    }
    .customerType {
      padding-left: 10px;
      display: flex;
      align-items: center;
      width: 945px;
      height: 26px;
      background: #003b75;
      border-radius: 10px;
      border: 1px solid #0052a3;
      font-size: 12px;
      margin-top: 10px;
      img {
        margin-right: 10px;
      }
    }
  }
  .line {
    width: 1400px;
    height: 1px;
    border: 1px solid #0452c6;
    opacity: 0.5;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .addBtn {
    background-color: #6af5fb;
    color: #080138;
    height: 31px;
    border: 1px solid #6af5fb;
    margin-left: 10px;
  }
  .comList {
    ul {
      text-align: center;
      list-style-type: none;
      border: 1px solid #7190d4;
      border-bottom: none;
      width: 124px;
      padding: 0;
      // padding: 0;
      margin: 0;
      p {
        width: 122px;
        height: 40px;
        line-height: 40px;
        background: #6e70f0;
        margin: 0;
      }
      li {
        padding: 0;
        margin: 0;
        line-height: 30px;
        width: 122px;
        height: 30px;
        background: #003b75;
        border-bottom: 1px solid #7190d4;
        font-size: 14px;
      }
    }
  }
  .draw {
    width: 89px;
    height: 31px;
    background: url("@/assets/images/绘制.png");
    text-align: center;
    line-height: 31px;
    color: #000;
    font-size: 14px;
    cursor: pointer;
  }
}
::v-deep .el-table tr {
  background-color: #002652 !important;
  color: #fff;
}
</style>