dianshang-qianduan/src/views/test/index.vue

<template>
  <ProductStandardTrainingPage class="test" task-key="release-channel-evaluation" title="发布渠道评估" badge-text="核心实训 · 产品上线与运营推广" background="电商产品发布渠道评估需要综合用户规模、用户质量、转化率、投资回报率、用户参与度及渠道成本，选择最具价值的投放渠道。" requirement="使用熵值法，根据曝光量、点击量、广告费用、订单金额等数据，评估各投放渠道优劣，为后续重点渠道加大投放提供决策依据。" :goals="taskGoals" @save="saveTask" @submit="submitTask" @reset="resetTask">
    <template #step-content="{ activeStep, hasConfiguredSteps }">
      <section v-show="!hasConfiguredSteps || activeStep === 1" class="release-phase">

    <p class="release-lead">
      在电商产品投放测试中，熵值法可以用于评估不同投放策略或广告内容的效果。
      <br />
      <br />
      通过收集多个反映投放效果的关键指标数据，如点击率、转化率、订单成交量等，利用熵值法计算各指标的权重，从而确定哪些指标对投放效果的影响更大。这有助于优化投放策略，提高广告效果和投资回报率。
    </p>
    <div class="caseBacktitle">
      <span>实验实训</span>
    </div>
    <p>任务背景：某仿真花店铺计划推出新品花束，因商品特性，计划在淘宝、抖音、拼多多三个渠道进行产品投放，初步投放测试数据如下，请评估上述渠道优劣，为后续重点投放提供决策依据。</p>
    <el-table
      :data="tableData"
      border
      style="width: 60%"
      :span-method="arraySpanMethod"
    >
      <el-table-column prop="channel" label="渠道" align="center" />
      <el-table-column prop="exposure" label="曝光量" align="center" />
      <el-table-column prop="clicks" label="点击量" align="center" />
      <el-table-column prop="cost" label="花费" align="center"></el-table-column>
      <el-table-column prop="orderAmount" label="订单金额" align="center"></el-table-column>
    </el-table>
      </section>
      <section v-show="!hasConfiguredSteps || activeStep === 2" class="release-phase">
    <p>数据标准化：</p>
    <p>
      对于正向指标（点击量、曝光量、订单金额），我们采用极差标准化方法：
      <br />
      标准化公式为：Yij = (Xij - min(Xi)) / (max(Xi) - min(Xi)) 例如，某渠道的点击量极差标准化值=（某渠道点击量-点击量最小值）/（点击量最大值-点击量最小值）
      <br />
      对于负向指标（数值越低越好），标准化公式为：Yij = (max(Xi) - Xij) / (max(Xi) - min(Xi))。 例如，某渠道的广告费用极差标准化值=（广告费最大值-某渠道广告费用）/（广告费用最大值-广告费用最小值）
    </p>
    <p>数据标准化结果如下所示：</p>
    <el-table
      :data="tableData1"
      border
      style="width: 60%"
      :span-method="arraySpanMethod"
    >
      <el-table-column prop="channel" label="渠道" align="center" />
      <el-table-column prop="exposureData" label="曝光量" align="center">
        <template #default="{ row }">
          <el-input v-model="row.exposureData" placeholder=""></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="clickData" label="点击量" align="center">
        <template #default="{ row }">
          <el-input v-model="row.clickData" placeholder=""></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="adCost" label="花费" align="center">
        <template #default="{ row }">
          <el-input v-model="row.adCost" placeholder=""></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="orderAmount" label="订单金额" align="center">
        <template #default="{ row }">
          <el-input v-model="row.orderAmount" placeholder=""></el-input>
        </template>
      </el-table-column>
    </el-table>
    <p>计算各指标在各方案下的比值：计算第j项指标在第i个样本中占该指标的比重，即pij = Yij / ΣYij。 例如，某渠道点击量比重=某渠道点击量极差标准化值/各渠道点击量极差标准化值之和</p>
    <p>计算每个指标在每个渠道中的比重：</p>
    <el-table
      :data="tableData2"
      border
      style="width: 60%"
      :span-method="arraySpanMethod"
    >
      <el-table-column prop="channel" label="渠道" align="center" />
      <el-table-column prop="exposureData" label="曝光量" align="center">
        <template #default="{ row }">
          <el-input v-model="row.exposureData" placeholder=""></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="clickData" label="点击量" align="center">
        <template #default="{ row }">
          <el-input v-model="row.clickData" placeholder=""></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="adCost" label="花费" align="center">
        <template #default="{ row }">
          <el-input v-model="row.adCost" placeholder=""></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="orderAmount" label="订单金额" align="center">
        <template #default="{ row }">
          <el-input v-model="row.orderAmount" placeholder=""></el-input>
        </template>
      </el-table-column>
    </el-table>
      </section>
      <section v-show="!hasConfiguredSteps || activeStep === 3" class="release-phase">
    <p>计算各指标的信息熵：根据信息熵的定义，计算各指标的信息熵Ej。公式为：Ej = -k * Σ(pij * ln(pij))，其中k = 1 / ln(m)，m为样本数量。</p>
    <p>例如，我们评估了三种渠道，那么公式中m为3，例如点击量信息熵=-k*（各渠道点击量比重乘以各渠道点击量比重的自然对数之和）</p>
    <p>计算每个指标的信息熵：</p>
    <el-table
      :data="tableData3"
      border
      style="width: 60%"
      :span-method="arraySpanMethod"
    >
      <el-table-column prop="exposureData" label="曝光量" align="center">
        <template #default="{ row }">
          <el-input v-model="row.exposureData" placeholder=""></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="clickData" label="点击量" align="center">
        <template #default="{ row }">
          <el-input v-model="row.clickData" placeholder=""></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="adCost" label="花费" align="center">
        <template #default="{ row }">
          <el-input v-model="row.adCost" placeholder=""></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="orderAmount" label="订单金额" align="center">
        <template #default="{ row }">
          <el-input v-model="row.orderAmount" placeholder=""></el-input>
        </template>
      </el-table-column>
    </el-table>
    <p>确定各指标的权重：根据信息熵计算各指标的权重。权重计算公式为：wj = (1 - Ej) / Σ(1 - Ej)。其中Ej源于上一步计算，为各指标信息熵。</p>
    <p>计算每个指标的权重：</p>
    <el-table
      :data="tableData4"
      border
      style="width: 60%"
      :span-method="arraySpanMethod"
    >
      <el-table-column prop="exposureData" label="曝光量" align="center">
        <template #default="{ row }">
          <el-input v-model="row.exposureData" placeholder=""></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="clickData" label="点击量" align="center">
        <template #default="{ row }">
          <el-input v-model="row.clickData" placeholder=""></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="adCost" label="花费" align="center">
        <template #default="{ row }">
          <el-input v-model="row.adCost" placeholder=""></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="orderAmount" label="订单金额" align="center">
        <template #default="{ row }">
          <el-input v-model="row.orderAmount" placeholder=""></el-input>
        </template>
      </el-table-column>
    </el-table>
      </section>
      <section v-show="!hasConfiguredSteps || activeStep >= 4" class="release-phase">
    <p>综合评分：根据权重和指标数据，计算广告效果的综合评分。公式为：Zi = Σ(wj * Yij)。 例如，某渠道综合评分等于渠道各指标权重乘以渠道各指标极差标准值的和。</p>
    <el-table
      :data="tableData5"
      border
      style="width: 60%"
      :span-method="arraySpanMethod"
    >
      <el-table-column prop="channel" label="渠道" align="center"></el-table-column>
      <el-table-column prop="keywords" label="综合评分" align="center">
        <template #default="{ row }">
          <el-input v-model="row.keywords" placeholder=""></el-input>
        </template>
      </el-table-column>
    </el-table>
    <p>请根据评分情况分析各渠道优劣，分析熵值法优缺点。</p>
    <el-input :autosize="{ minRows: 11, maxRows: 11 }" type="textarea" v-model="scenePromotion" placeholder="" />
    <p>上述实训也可以用Python代码实现，可点击查看示例代码，在在线Python环境中运行代码，得出结果。</p>
    <el-button @click="runResultShow = true">查看代码</el-button>
    </section>
    </template>
  </ProductStandardTrainingPage>
  <pop-model :showModel="runResultShow" title="设置代码" @closePop="closeCode">
    <template v-slot:content>
      <div>
        <codemirror :code="code"></codemirror>
      </div>
    </template>
  </pop-model>
</template>
<script setup>


import ProductStandardTrainingPage from "@/views/product/components/ProductStandardTrainingPage.vue";
import useUserStore from "@/store/modules/user";
const userStore = useUserStore();
import * as analysisAPI from "@/api/market-demand-mining.js";
import codemirror from "@/components/codemirror/index.vue";
import popModel from "@/views/components/popModal.vue";
import { getCurrentInstance, onMounted, ref } from "vue";
const { proxy } = getCurrentInstance();
const taskGoals = ["理解熵值法的指标标准化、比重和信息熵计算过程", "能够计算渠道指标权重与综合评分", "基于评价结果形成可执行的发布渠道投放建议"];
const code = `import numpy as np
import pandas as pd
# 数据
data = {
    '渠道': ['淘宝', '抖音', '拼多多'],
    '点击量': [952, 161, 239],
    '曝光量': [25379, 4719, 24202],
    '花费': [3617, 1213, 425],
    '订单金额': [12293, 5206, 880]
}

df = pd.DataFrame(data)

df.set_index('渠道', inplace=True)

# 数据标准化

def normalize_data(df):

    normalized_df = df.copy()

    for column in df.columns:

        max_val = df[column].max()

        min_val = df[column].min()

        if max_val == min_val:

            normalized_df[column] = 0

        else:

            normalized_df[column] = (df[column] - min_val) / (max_val - min_val)

    return normalized_df

normalized_df = normalize_data(df)

# 计算各指标在各方案下的比值

def calculate_pij(normalized_df):

    pij = normalized_df.copy()

    for column in pij.columns:

        column_sum = pij[column].sum()

        pij[column] = pij[column] / column_sum

    return pij

pij = calculate_pij(normalized_df)

# 计算各指标的信息熵

def calculate_entropy(pij, m):

    k = 1 / np.log(m)

    entropy = {}

    for column in pij.columns:

        entropy_sum = 0

        for value in pij[column]:

            if value > 0:

                entropy_sum += value * np.log(value)

        entropy[column] = -k * entropy_sum

    return entropy

m = len(pij)

entropy = calculate_entropy(pij, m)

# 计算各指标的权重

def calculate_weights(entropy):
    weights = {}
    total_entropy = sum(1 - value for value in entropy.values())
    for column, value in entropy.items():
        weights[column] = (1 - value) / total_entropy
    return weights
weights = calculate_weights(entropy)
# 计算综合评分
def calculate_comprehensive_score(normalized_df, weights):
    comprehensive_score = pd.Series(index=normalized_df.index, dtype=float)
    for index, row in normalized_df.iterrows():
        score = 0

        for column, weight in weights.items():

            score += weight * row[column]

        comprehensive_score[index] = score

    return comprehensive_score

comprehensive_score = calculate_comprehensive_score(normalized_df, weights)

# 输出结果

print("标准化后的数据：")

print(normalized_df)

print("各指标的信息熵：")
print(entropy)
print("各指标的权重：")
print(weights)

print("综合评分：")

print(comprehensive_score)`;
const runResultShow = ref(false);
const tableData = [
  {
    channel: "淘宝",
    exposure: 25379,
    clicks: 952,
    cost: 3617,
    orderAmount: 12293,
  },
  {
    channel: "抖音",
    exposure: 4719,
    clicks: 161,
    cost: 1213,
    orderAmount: 5206,
  },
  {
    channel: "拼多多",
    exposure: 24202,
    clicks: 459,
    cost: 625,
    orderAmount: 1280,
  },
];
const tableData1 = ref([
  {
    channel: "淘宝",
    exposureData: "",
    clickData: "",
    adCost: "",
    orderAmount: "",
  },
  {
    channel: "抖音",
    exposureData: "",
    clickData: "",
    adCost: "",
    orderAmount: "",
  },
  {
    channel: "拼多多",
    exposureData: "",
    clickData: "",
    adCost: "",
    orderAmount: "",
  },
]);
const tableData2 = ref([
  {
    channel: "淘宝",
    exposureData: "",
    clickData: "",
    adCost: "",
    orderAmount: "",
  },
  {
    channel: "抖音",
    exposureData: "",
    clickData: "",
    adCost: "",
    orderAmount: "",
  },
  {
    channel: "拼多多",
    exposureData: "",
    clickData: "",
    adCost: "",
    orderAmount: "",
  },
]);
const tableData3 = ref([
  {
    exposureData: "",
    clickData: "",
    adCost: "",
    orderAmount: "",
  },
]);
const tableData4 = ref([
  {
    exposureData: "",
    clickData: "",
    adCost: "",
    orderAmount: "",
  },
]);
const tableData5 = ref([
  {
    channel: "淘宝",
    keywords: "",
  },
  {
    channel: "抖音",
    keywords: "",
  },
  {
    channel: "拼多多",
    keywords: "",
  },
]);
const scenePromotion = ref("");
function checkEmptyValues(tables) {
  const result = {
    hasEmpty: false,
    emptyItems: [],
  };
  tables.forEach((table, tableIndex) => {
    if (!Array.isArray(table)) return;
    table.forEach((row, rowIndex) => {
      const emptyFields = Object.entries(row)
        .filter(([key, value]) => value === "" || value === null || value === undefined)
        .map(([key]) => key);
      if (emptyFields.length > 0) {
        result.hasEmpty = true;
        result.emptyItems.push({
          tableIndex: tableIndex + 1,
          rowIndex: rowIndex + 1,
          channel: row.channel || "无渠道字段",
          emptyFields,
        });
      }
    });
  });
  return result;
}
const closeCode = () => {
  runResultShow.value = false;
};
function mapData(
  sourceArray,
  fieldMapping = {
    exposureData: "exposureData",
    clickData: "clickData",
    adCost: "adCost",
    orderAmount: "orderAmount",
  }
) {
  return sourceArray.map((item) => {
    const mappedItem = {};
    for (const [targetKey, sourceKey] of Object.entries(fieldMapping)) {
      mappedItem[targetKey] = item[sourceKey];
    }
    return mappedItem;
  });
}
const buildTaskParams = () => ({
  userId: userStore.userInfo.userId,
  dataInfoList: mapData(tableData1.value),
  radioInfoList: mapData(tableData2.value),
  messageInfoList: mapData(tableData3.value),
  eventInfoList: mapData(tableData4.value),
  keywords: tableData5.value.map((item) => item.keywords).join(","),
  scenePromotion: scenePromotion.value,
});
const saveTask = () => analysisAPI.releaseChannelSubmit(buildTaskParams()).then(() => {
  proxy.$modal.msgSuccess("当前进度已保存");
});
const submitTask = () => {
  const tablesToCheck = [tableData1.value, tableData2.value, tableData3.value, tableData4.value, tableData5.value];
  const checkResult = checkEmptyValues(tablesToCheck);
  if (checkResult.hasEmpty) {
    proxy.$modal.msgWarning("请完善数据后提交");
    return;
  }
  analysisAPI.releaseChannelSubmit(buildTaskParams()).then(() => {
    proxy.$modal.msgSuccess("提交成功");
  });
};
// 回显数据
const loadTaskInfo = () => {
  analysisAPI.releaseChannelEcho({ userId: userStore.userInfo.userId }).then((res) => {
    if (!res.data) return;
    res.data?.dataInfoList.forEach((item, index) => {
      tableData1.value[index].exposureData = item.exposureData;
      tableData1.value[index].clickData = item.clickData;
      tableData1.value[index].adCost = item.adCost;
      tableData1.value[index].orderAmount = item.orderAmount;
    });
    res.data?.radioInfoList.forEach((item, index) => {
      tableData2.value[index].exposureData = item.exposureData;
      tableData2.value[index].clickData = item.clickData;
      tableData2.value[index].adCost = item.adCost;
      tableData2.value[index].orderAmount = item.orderAmount;
    });
    tableData3.value = res.data.messageInfoList;
    tableData4.value = res.data.eventInfoList;
    res.data?.keywords.split(",").forEach((item, index) => {
      tableData5.value[index].keywords = item;
    });
    scenePromotion.value = res.data.scenePromotion;
  });
};
// 重新实训
const resetTask = () => {
  analysisAPI.productReleaseReTrain({ userId: userStore.userInfo.userId, module: "发布渠道评估" }).then((res) => {
    proxy.$modal.msgSuccess("重新实训成功");
    scenePromotion.value = "";
    clearData([tableData1.value, tableData2.value, tableData3.value, tableData4.value, tableData5.value]);
  });
};
// 清空数据函数
const clearData = (tables) => {
  tables.forEach((table) => {
    table.forEach((row) => {
      Object.keys(row).forEach((key) => {
        if (key !== "channel") {
          row[key] = "";
        }
      });
    });
  });
};
const go = () => {
  window.open("https://jrdsj.sztzjy.com:8000/user/zy84cf311/lab");
};
onMounted(() => {
  loadTaskInfo();
});
</script>
<style lang="scss" scoped>
.test {
  --test-panel: rgba(0, 25, 42, 0.64);
  --test-panel-strong: rgba(1, 14, 26, 0.82);
  --test-line: rgba(82, 174, 226, 0.42);

  min-height: calc(100vh - 106px);
  padding: 0 0 32px;
  color: #eef5ff;
  background:
    radial-gradient(circle at 10% 0%, rgba(0, 170, 255, 0.12), transparent 32%),
    linear-gradient(180deg, rgba(5, 17, 27, 0.98), rgba(3, 14, 24, 0.98));

  :deep(.training-step-area) {
    margin-top: 0 !important;
    border-color: var(--test-line) !important;
    background: var(--test-panel) !important;
    box-shadow: inset 0 1px 0 rgba(169, 229, 255, 0.08), 0 22px 48px rgba(0, 0, 0, 0.22) !important;
  }

  :deep(.training-step-area > p) {
    color: #d7ecff;
    font-size: 15px;
    line-height: 1.8;
  }

  :deep(.el-table) {
    --el-table-border-color: rgba(77, 167, 220, 0.2);
    --el-table-header-bg-color: rgba(8, 55, 82, 0.98);
    --el-table-header-text-color: #eaffff;
    --el-table-row-hover-bg-color: rgba(11, 84, 122, 0.45);
    --el-table-bg-color: rgba(1, 14, 26, 0.72);
    --el-table-tr-bg-color: rgba(1, 14, 26, 0.48);
    --el-table-text-color: #d7f1ff;
    overflow: hidden;
    margin: 12px 0 20px;
    border: 1px solid rgba(0, 180, 255, 0.22);
    border-radius: 22px;
    background: var(--test-panel-strong);
  }

  :deep(.el-table::before),
  :deep(.el-table__inner-wrapper::before) {
    background-color: transparent;
  }

  :deep(.el-table th.el-table__cell) {
    color: #eaffff !important;
    background: rgba(8, 55, 82, 0.98) !important;
    font-size: 14px;
    font-weight: 900;
  }

  :deep(.el-table tr),
  :deep(.el-table td.el-table__cell) {
    color: #d7f1ff !important;
    background: rgba(1, 14, 26, 0.48) !important;
  }

  :deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
    background: rgba(11, 84, 122, 0.45) !important;
  }

  :deep(.el-table .cell) {
    line-height: 1.65;
  }

  :deep(.el-input__wrapper),
  :deep(.el-textarea__inner) {
    border: 1px solid rgba(45, 95, 126, 0.95);
    border-radius: 14px;
    color: #eef5ff;
    box-shadow: none !important;
    background: #0f1a24;
  }

  :deep(.el-input__wrapper) {
    min-height: 38px;
  }

  :deep(.el-input__inner),
  :deep(.el-textarea__inner) {
    color: #eef5ff;
  }

  :deep(.el-input__inner::placeholder),
  :deep(.el-textarea__inner::placeholder) {
    color: #8299aa;
  }

  :deep(.el-input__wrapper.is-focus),
  :deep(.el-textarea__inner:focus) {
    border-color: rgba(92, 224, 255, 0.7);
    box-shadow: 0 0 0 3px rgba(0, 174, 255, 0.13) !important;
  }

  :deep(.el-textarea) {
    display: block;
    max-width: 960px;
    margin-top: 12px;
  }

  :deep(.el-textarea__inner) {
    min-height: 110px !important;
    padding: 12px 14px;
    line-height: 1.65;
  }

  :deep(.el-button) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 18px;
    border: 1px solid rgba(99, 217, 255, 0.55) !important;
    border-radius: 999px;
    color: #e9fbff !important;
    font-weight: 800;
    background: rgba(17, 126, 178, 0.36) !important;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
  }

  :deep(.el-button:hover:not(.is-disabled)) {
    transform: translateY(-1px);
    border-color: rgba(116, 235, 255, 0.85) !important;
    background: rgba(18, 146, 204, 0.5) !important;
  }

  .taskfooter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 52px;
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid rgba(0, 180, 255, 0.2);
  }

  .taskfooter :deep(.el-button) {
    min-width: 172px;
    min-height: 64px;
    padding: 0 28px;
    border-color: #2c83aa !important;
    border-radius: 6px;
    color: #dff7ff !important;
    font-size: 24px;
    font-weight: 900;
    background: rgba(13, 64, 88, 0.62) !important;
  }

  .taskfooter :deep(.el-button:hover:not(.is-disabled)) {
    border-color: #46b5e7 !important;
    color: #ffffff !important;
    background: rgba(18, 85, 116, 0.78) !important;
  }

  :deep(.training-intro__steps) {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    width: calc(100% - 48px) !important;
    min-height: 58px;
    margin: 0 24px 24px !important;
    padding: 6px !important;
    border: 1px solid rgba(0, 180, 255, 0.3) !important;
    border-radius: 60px !important;
    background: rgba(0, 0, 0, 0.3) !important;
  }

  :deep(.training-intro__steps .step-tab) {
    display: inline-flex !important;
    flex: 1 1 0 !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    width: auto !important;
    min-height: 46px !important;
    height: 46px !important;
    padding: 0 14px !important;
    border: 1px solid transparent !important;
    border-radius: 40px !important;
    color: #9ab3d0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    transition: color 0.2s, background 0.2s, border-color 0.2s, box-shadow 0.2s !important;
  }

  :deep(.training-intro__steps .step-tab:hover) {
    border-color: rgba(99, 217, 255, 0.45) !important;
    color: #e9fbff !important;
    background: rgba(17, 126, 178, 0.28) !important;
  }

  :deep(.training-intro__steps .step-tab.active) {
    border-color: rgba(0, 170, 255, 0.55) !important;
    color: #ffffff !important;
    background: linear-gradient(95deg, #0a6b9e, #0a5c86) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  }

  @media (max-width: 900px) {
    :deep(.training-intro__steps) {
      flex-direction: column !important;
      align-items: stretch !important;
      gap: 8px !important;
      width: calc(100% - 36px) !important;
      margin: 0 18px 24px !important;
      border-radius: 24px !important;
    }

    :deep(.training-intro__steps .step-tab) {
      width: 100% !important;
    }

    .taskfooter {
      gap: 14px;
    }

    .taskfooter :deep(.el-button) {
      width: 100%;
    }

    :deep(.el-table) {
      width: 100% !important;
      overflow-x: auto;
    }
  }

  @media (min-width: 901px) and (max-width: 1100px) {
    :deep(.training-intro__steps) {
      flex-direction: row !important;
      align-items: center !important;
    }
  }

  .release-phase {
    display: grid;
    gap: 14px;
  }

  .release-phase > p {
    max-width: 1100px;
    margin: 0;
    color: #d7ecff;
    font-size: 15px;
    line-height: 1.8;
  }

  .release-phase .release-lead {
    padding: 16px;
    border: 1px solid rgba(0, 180, 255, 0.22);
    border-radius: 16px;
    background: rgba(1, 14, 26, 0.72);
  }

  .release-phase .caseBacktitle {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 28px;
    padding: 4px 12px;
    border: 1px solid rgba(106, 226, 255, 0.45);
    border-radius: 999px;
    color: #71dfff;
    background: rgba(0, 127, 184, 0.25);
    font-size: 12px;
    font-weight: 800;
  }

  .release-phase :deep(.el-table) {
    width: 100% !important;
    max-width: 1100px;
    margin: 0;
  }

  .release-phase :deep(.el-input__wrapper) {
    min-height: 42px;
  }

  .release-phase :deep(.el-button) {
    width: fit-content;
    border-color: rgba(92, 224, 255, 0.7) !important;
    color: #ffffff !important;
    background: linear-gradient(95deg, #0b84bd, #096491) !important;
  }

  @media (max-width: 900px) {
    .release-phase :deep(.el-button) {
      width: 100%;
    }
  }
}
</style>