<template>
  <div class="main-box product">
    <div class="banner"></div>
    <div class="breadcrumb-wrap">
      <div class="container">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item to="/">Home</el-breadcrumb-item>
          <el-breadcrumb-item>{{ leftText }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
    <div class="content auto clearfix">
      <div class="filter-box">
        <div class="filter-inp">
          <span class="title">{{ sText }}</span>

          <el-input v-model.trim="newParams.seek" placeholder="Please enter search content" style="width: 458px" @keyup.enter="handleSearch" />

          <el-select v-model="newParams.seekFields" clearable :placeholder="palcText" style="width: 150px" @change="handleSearch">
            <template v-if="newParams.seekType == '1'">
              <el-option v-for="item in jdArr" :key="item" :label="item" :value="item" />
            </template>
            <template v-else>
              <el-option v-for="item in fzArr" :key="item" :label="item" :value="item" />
            </template>
          </el-select>

          <el-button class="el-search" @click="handleSearch">Search</el-button>
          <el-button @click="cancelSearch">Back to Directory</el-button>
        </div>

        <p class="s-error">{{ sError }}</p>

        <div v-if="showDiv" class="result-wrap">
          <p class="tip">{{ tip }}</p>
          <ul class="r-type-wrap">
            <li v-for="(item, index) in searchCategoryList" :key="item.id || index" :class="{ current: item.id == ccurId }" @click="switchSearchCategory(index, item.id)">
              {{ item.nameEn }}
            </li>
          </ul>
        </div>
      </div>

      <div class="content-con">
        <div v-if="!showDiv" class="leftNav">
          <h3>{{ leftText }}</h3>
          <div class="item-wrap">
            <div v-for="(item, index) in categoryList" :key="item.id || index" class="item">
              <h4 @click="setIndex(item.id, item)">
                {{ item.nameEn }}
                <i :class="{ isOpen: cur == item.id }"></i>
              </h4>

              <ul v-if="cur == item.id">
                <li v-for="(sub, idx) in item.subCatgory || []" :key="sub.id || idx" :class="{ current: sub.id == curId }" @click="link(item.id, sub.id)">
                  {{ sub.nameEn }}
                </li>
              </ul>
            </div>
          </div>
        </div>

        <div class="rightCon" :class="{ rightCon2: showDiv }">
          <div class="product-wrap">
            <!-- 搜索结果 -->
            <template v-if="showDiv">
              <div>
                <table class="data-table" width="100%" align="center">
                  <tbody>
                    <tr class="head-row tr-header" bgcolor="#e5484c" style="color: rgb(255, 255, 255); font-size: 14px;">
                      <td>Product Image</td>
                      <td>{{ newParams.seekType == '2' ? 'Model' : 'Name' }}</td>
                      <td>Package Type</td>
                      <td>Datasheet</td>
                      <td v-for="(v, i) in zrTitle" :key="i">
                        {{ v.nameEn }}
                      </td>
                    </tr>

                    <template v-if="newParams.seekType == '2'">
                      <tr v-for="(v, i) in searchList" :key="i" class="tr-two">
                        <td><img :src="v.img" :alt="v.goodsType" height="45" /></td>
                        <td>{{ v.goodsType }}</td>
                        <td>{{ v.packageSpecification }}</td>
                        <td>
                          <a v-if="v.manual" :href="v.manual" target="_blank">
                            <img src="@/assets/img/d.png" :alt="v.manual" style="margin-top:6px;">
                          </a>
                        </td>
                      </tr>
                    </template>

                    <template v-else>
                      <tr class="tr-two">
                        <td><img :src="searchList?.img" :alt="searchList?.goodsType" height="45" /></td>
                        <td>{{ searchCategoryList[sIdx]?.nameEn }}</td>
                        <td v-html="searchList?.packageSpecification"></td>
                        <td>
                          <a v-if="searchList.manual" :href="searchList.manual" target="_blank">
                            <img src="@/assets/img/d.png" :alt="searchList.manual" style="margin-top:6px;">
                          </a>
                        </td>
                        <td v-for="(v, i) in zrTitle" :key="i" class="bord">
                          <span v-html="searchList?.['attr' + v.sort]"></span>
                        </td>
                      </tr>
                    </template>
                  </tbody>
                </table>

                <div v-if="newParams.seekType == '2'" class="page-size">
                  <el-pagination small :page-size="newParams.size" layout="prev, pager, next, jumper" :current-page="searchCurrentPage" :total="totalPage2" @current-change="changeSearchPagination" />
                </div>
              </div>
            </template>

            <!-- 正常分类列表 -->
            <template v-else>
              <div v-if="!summary" class="tableHead clear">
                <table class="data-table" width="100%" align="center">
                  <tbody align="center">
                    <tr v-if="typeHead" class="head-row" bgcolor="#e5484c" style="color: rgb(255, 255, 255); font-size: 14px;">
                      <td v-if="typeHead.img">{{ typeHead.img }}</td>
                      <td v-if="typeHead.goodsType">{{ typeHead.goodsType }}</td>
                      <td v-if="typeHead.packageSpecification">{{ typeHead.packageSpecification }}</td>
                      <td v-if="typeHead.manual">{{ typeHead.manual }}</td>
                    </tr>

                    <tr v-for="(v, i) in productList" :key="i" class="tr-two">
                      <td v-if="typeHead?.img">
                        <img :src="v.img" :alt="v.goodsType" height="45" />
                      </td>
                      <td v-if="typeHead?.goodsType">{{ v.goodsType }}</td>
                      <td v-if="typeHead?.packageSpecification">{{ v.packageSpecification }}</td>
                      <td v-if="typeHead?.manual">
                        <a v-if="v.manual" :href="v.manual" target="_blank">
                          <img src="@/assets/img/d.png" :alt="v.manual" style="margin-top:6px;">
                        </a>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>

              <div v-if="!summary" class="page-size">
                <el-pagination small :page-size="10" layout="prev, pager, next, jumper" :current-page="currentPage" :total="totalPage" @current-change="changePagination" />
              </div>

              <div v-if="summary">
                <table class="data-table" width="100%" align="center">
                  <tbody>
                    <tr class="head-row" v-if="typeHead" bgcolor="#e5484c" style="color: rgb(255, 255, 255); font-size: 14px;">
                      <td>{{ typeHead.img }}</td>
                      <td>{{ typeHead.goodsType }}</td>
                      <td>{{ typeHead.packageSpecification }}</td>
                      <td>{{ typeHead.manual }}</td>
                      <template v-for="v in 10" :key="v">
                        <td v-if="typeHead['attr'+v]">
                          <span v-html="typeHead['attr'+v]"></span>
                        </td>
                      </template>
                    </tr>
                    <tr v-if="productList[0]" class="tr-two">
                      <td><img :src="productList[0].img" alt="product" /></td>
                      <td>{{ currentCategory?.nameEn }}</td>
                      <td v-html="productList[0].packageSpecification"></td>
                      <td>
                        <a v-if="productList[0].manual" :href="productList[0].manual" target="_blank">
                          <img src="@/assets/img/d.png" :alt="productList[0].manual" style="margin-top:6px;">
                        </a>
                      </td>
                      <template v-for="v in 10" :key="v">
                        <td v-if="productList?.[0]?.[`attr${v}`]" class="bord">
                          <span v-html="productList[0][`attr${v}`]"></span>
                        </td>
                      </template>
                    </tr>
                  </tbody>
                </table>
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, watch } from "vue";
import { useAll } from "~/api/pubAll/service";

const route = useRoute();
const router = useRouter();

const {
  getGoodsgoryList,
  getContent,
  goodsList,
  esFindFz,
  esFindJd,
  esFindDevice,
} = useAll();

const cid = computed(() => String(route.params.cid || ""));
const id = computed(() => String(route.params.id || ""));
const seekType = computed(() => String(route.query.seekType || "2"));
const sort = computed(() => String(route.query.sort || ""));
const queryPage = computed(() => Number(route.query.page || 1));
const specification = computed(() => String(route.query.specification || ""));
const keyWord = computed(() => String(route.query.keyWord || ""));

const leftText = ref("Discrete Components");
const sText = ref("Model Search");
const palcText = ref("Please select a package");

const sError = ref("");
const totalPage2 = ref(0);
const tip = ref("");
const ccurId = ref<string | number | null>(null);
const curId = ref<string | number>(id.value);
const cur = ref<string | number>(cid.value);
const closeId = ref(-1);
const sIdx = ref(0);

const fzArr = ref<string[]>([]);
const jdArr = ref<string[]>([]);

const showDiv = ref(false);
const searchCategoryList = ref<any[]>([]);
const searchList: any = ref<any[]>([]);
const zrTitle = ref<any[]>([]);

const currentPage = ref(queryPage.value);
const totalPage = ref(0);
const productList = ref<any[]>([]);
const typeHead = ref<any>(null);
const summary = ref(false);
const currentCategory = ref<any>(null);

const newParams = ref({
  categoryId: "",
  page: 1,
  seek: "",
  seekFields: "",
  seekType: seekType.value,
  size: 10,
});

if (seekType.value == "1") {
  leftText.value = "Resistors & Capacitors";
  sText.value = "Package Search";
  palcText.value = "Please select tolerance";
}

const { data: initData } = await useAsyncData(
  `cproduct-${cid.value}-${id.value}-${seekType.value}-${sort.value}-${queryPage.value}-${specification.value}-${keyWord.value}`,
  async () => {
    const [categoryRes, contentRes, productRes] = await Promise.all([
      getGoodsgoryList({ sort: sort.value }),
      getContent({ language: 2, code: 6 }),
      goodsList({
        current: queryPage.value,
        size: 10,
        records: [
          {
            categoryId: id.value,
            packageSpecification: null,
            attr1: null,
            attr2: null,
            attr3: null,
            attr4: null,
            attr5: null,
            attr6: null,
            attr7: null,
            attr8: null,
            attr9: null,
            attr10: null,
            specification: specification.value || "",
            keyWord: keyWord.value || "",
          },
        ],
      }),
    ]);

    return {
      categoryRes,
      contentRes,
      productRes,
    };
  }
);

const categoryList = computed(() => {
  const res = initData.value?.categoryRes;
  return res?.data?.data || res?.data || res || [];
});

function normalizeGoodsResult(result: any) {
  const raw = result?.data?.data || result?.data || result;
  return {
    category: raw?.category || null,
    summary: !!raw?.Summary,
    typeHead: raw?.typeHead2 || null,
    productList: raw?.page?.records || [],
    totalPage: raw?.page?.total || 0,
  };
}

const goodsInit = normalizeGoodsResult(initData.value?.productRes);
productList.value = goodsInit.productList;
totalPage.value = goodsInit.totalPage;
typeHead.value = goodsInit.typeHead;
summary.value = goodsInit.summary;
currentCategory.value = goodsInit.category;

async function loadSearchBaseData() {
  if (seekType.value == "1") {
    const res = await esFindJd({ sort: 1 });
    jdArr.value = res?.data || res?.data?.data || [];
  } else {
    const res = await esFindFz({ sort: 2 });
    fzArr.value = res?.data || res?.data?.data || [];
  }
}

await loadSearchBaseData();

function buildSeo() {
  return seekType.value == "1"
    ? {
        title: "Chip Resistors - Metal Film Resistors - Ceramic Capacitors - Shenzhen Hotking Electronics Co., Ltd.",
        description:
          "Provides detailed package, model, and parameter information for Hotking resistor and capacitor products, along with PDF downloads, including metal film resistors, thick-film chip resistors, alloy chip resistors, ceramic capacitors, standard MLCCs, and medium/high-voltage chip capacitors.",
        keywords:
          "chip resistor, metal film resistor, carbon film resistor, wirewound resistor, variable resistor, ceramic capacitor, variable capacitor, trimmer capacitor, chip capacitor",
      }
    : {
        title: "Schottky Diodes - Zener Diodes - Fast Recovery Diodes - Shenzhen Hotking Electronics Co., Ltd.",
        description:
          "Provides detailed package, model, and parameter information for Hotking discrete components, along with PDF downloads, including Schottky diodes, Zener diodes, TVS diodes, switching diodes, fast recovery diodes, MOSFETs, transistors, bridge rectifiers, and integrated circuits.",
        keywords:
          "Schottky diode, Zener diode, fast recovery diode, MOSFET, TVS diode, ESD diode, PNP transistor, bridge rectifier",
      };
}

const seo = buildSeo();

useHead({
  title: seo.title,
  meta: [
    { name: "description", content: seo.description },
    { name: "keywords", content: seo.keywords },
  ],
});

function setIndex(idx: string | number, item: any) {
  if (cur.value == idx) {
    cur.value = -1;
    closeId.value = Number(idx);
  } else {
    cur.value = idx;
    if (closeId.value !== Number(idx) && item?.subCatgory?.length) {
      link(item.id, item.subCatgory[0].id);
    }
  }
}

function cancelSearch() {
  showDiv.value = false;
  newParams.value.seekFields = "";
  newParams.value.seek = "";
  searchCategoryList.value = [];
  searchList.value = [];
}

async function switchSearchCategory(index: number, id: string | number) {
  ccurId.value = id;
  newParams.value.page = 1;
  sIdx.value = index;
  await fetchSearchCategoryData();
}

async function fetchSearchCategoryData() {
  const params = {
    ...newParams.value,
    categoryId: ccurId.value,
  };

  const result = await esFindDevice(params);
  const raw: any = result;

  if (raw?.httpCode == 200 && raw?.data?.productVOMap) {
    const current = searchCategoryList.value[sIdx.value];
    const mapData = raw.data.productVOMap[current.productCategoryName];

    if (newParams.value.seekType == "2") {
      searchList.value = mapData?.data || [];
      totalPage2.value = mapData?.count || 0;
    } else {
      const single = mapData || {};
      zrTitle.value = current?.productCategoryAttrList || [];
      if (single.packageSpecification) {
        single.packageSpecification = single.packageSpecification.replace(
          /\|/g,
          "<br>"
        );
      }
      Object.keys(single).forEach((key) => {
        if (
          key.startsWith("attr") &&
          typeof single[key] == "string" &&
          single[key]
        ) {
          single[key] = single[key].replace(/\|/g, "<br>");
        }
      });
      searchList.value = single;
      totalPage2.value = 1;
    }
  } else {
    searchList.value = [];
    totalPage2.value = 0;
  }
}

async function handleSearch() {
  if (!newParams.value.seekFields && !newParams.value.seek) {
    sError.value = "Please enter or select a search value";
    return;
  }

  sError.value = "";

  const result = await esFindDevice(newParams.value);
  const raw: any = result;

  if (raw?.httpCode == 200) {
    showDiv.value = true;

    if (newParams.value.seekFields && newParams.value.seek) {
      tip.value = `Found "${newParams.value.seek} ${newParams.value.seekFields}" in the following categories. Please click a category to view it.`;
    } else if (newParams.value.seek) {
      tip.value = `Found "${newParams.value.seek}" in the following categories. Please click a category to view it.`;
    } else {
      tip.value = `Found "${newParams.value.seekFields}" in the following categories. Please click a category to view it.`;
    }

    const list = raw?.data?.productCategoryVOList || [];
    searchCategoryList.value = list;

    if (list.length) {
      sIdx.value = 0;
      ccurId.value = list[0].id;
      await fetchSearchCategoryData();
    } else {
      searchList.value = [];
      totalPage2.value = 0;
    }
  }
}

async function fetchGoods(page = 1) {
  currentPage.value = page;

  const params = {
    current: page,
    size: 10,
    records: [
      {
        categoryId: curId.value,
        packageSpecification: null,
        attr1: null,
        attr2: null,
        attr3: null,
        attr4: null,
        attr5: null,
        attr6: null,
        attr7: null,
        attr8: null,
        attr9: null,
        attr10: null,
        specification: specification.value || "",
        keyWord: keyWord.value || "",
      },
    ],
  };

  await router.push({
    path: `/cproduct/${cid.value}/${curId.value}`,
    query: {
      page: String(page),
      specification: specification.value,
      keyWord: keyWord.value,
      seekType: seekType.value,
      sort: sort.value,
    },
  });

  const result = await goodsList(params);
  const normalized = normalizeGoodsResult(result);

  productList.value = normalized.productList;
  totalPage.value = normalized.totalPage;
  typeHead.value = normalized.typeHead;
  summary.value = normalized.summary;
  currentCategory.value = normalized.category;
}

function changePagination(page: number) {
  fetchGoods(page);
}

function changeSearchPagination(page: number) {
  newParams.value.page = page;
  searchCurrentPage.value = page;
  fetchSearchCategoryData();
}

const searchCurrentPage = ref(1);

function link(parentCid: string | number, childId: string | number) {
  curId.value = childId;
  router.push({
    path: `/cproduct/${parentCid}/${childId}`,
    query: {
      page: "1",
      seekType: seekType.value,
      sort: sort.value,
    },
  });
}

watch(
  () => productList.value,
  () => {
    if (process.client) {
      window.scrollTo({ top: 0, behavior: "smooth" });
    }
  }
);
</script>

<style scoped lang="scss">
.product {
  .filter-box {
    padding: 40px 0;
    // box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
    .s-error {
      font-size: 14px;
      color: #ec1e24;
      margin-top: 5px;
      margin-left: 473px;
    }

    .filter-inp {
      display: flex;
      align-items: center;
      justify-content: center;

      .title {
        height: 40px;
        line-height: 40px;
        font-size: 24px;
        color: #333333;
        margin-right: 20px;
      }
      .el-input {
        height: 40px;
        line-height: 40px;
      }
      :deep(.el-select__wrapper) {
        height: 40px;
        line-height: 40px;
      }
      .el-input__inner {
        border-radius: 0;
      }

      .el-button {
        border-radius: 0;
      }

      .el-search {
        background: #e5484c;
        border-color: #e5484c;
        height: 40px !important;
        color: #fff;
      }

      .el-select {
        margin-left: -1px;
        margin-right: -1px;
      }

      .el-icon-search {
        color: #fff;
      }
    }

    .result-wrap {
      .tip {
        height: 22px;
        font-size: 16px;
        line-height: 22px;
        color: #ec1e24;
        margin-top: 10px;
        margin-left: 473px;
      }

      ul {
        padding: 20px 0 0px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;

        li {
          margin-top: 20px;
          margin-left: 20px;
          border: 1px solid #eb5559;
          height: 40px;
          line-height: 40px;
          border-radius: 4px;
          padding: 0 17px;
          color: #ec1e24;
          cursor: pointer;

          &:hover,
          &.current {
            background: #e5484c;
            color: #fff;
          }
        }
      }
    }
  }

  .banner {
    height: 350px;
    width: 100%;
    background: url(@/assets/img/cpBanner.png) no-repeat center center;
    position: relative;
  }

  .content {
    padding: 10px 15px 30px;
    max-width: 1600px;
    width: 90%;
    margin: 0 auto;
  }

  .leftNav {
    width: 200px;
    box-shadow: 0 0px 6px rgba($color: #000000, $alpha: 0.1);
    padding: 30px 20px 0;

    h3 {
      font-size: 24px;
      margin-bottom: 20px;
      line-height: 30px;
    }

    .item-wrap {
      .item {
        h4 {
          cursor: pointer;
          display: block;
          line-height: 70px;
          font-size: 18px;
          color: #333333;
          border-top: 1px solid #e8e8e8;
          position: relative;

          i {
            background: url("@/assets/img/right.png") no-repeat right center;
            width: 20px;
            height: 20px;
            position: absolute;
            top: 25px;
            right: 0;
            transition: all 0.4s ease 0s;

            &.isOpen {
              transform: rotate(90deg);
            }
          }
        }

        li {
          padding-left: 20px;
          font-size: 14px;
          line-height: 50px;
          display: block;
          color: #333333;
          cursor: pointer;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;

          & + a {
            border-top: 1px solid #e8e8e8;
          }

          &:hover {
            color: #e5484c;
          }

          &.current {
            color: #ec1e24;
          }
        }
      }
    }
  }

  .rightCon {
    margin-left: 30px;
    flex: 1;

    &.rightCon2 {
      width: 100%;
    }

    .product-wrap {
      box-shadow: 0 2px 6px rgba($color: #000000, $alpha: 0.1);
      padding: 0 0 1px;
    }

    .filter-wrap {
      padding: 0 20px;
      height: 70px;
      line-height: 70px;
      background: #f5f5f5;
      border: 1px solid #e8e8e8;
      margin-bottom: 12px;

      .name {
        margin-right: 5px;
        float: left;
        line-height: 70px;
      }

      .el-input-group__prepend,
      .el-input-group__append {
        height: 38px;
        line-height: 38px;
      }

      .el-input {
        width: 250px;
        line-height: 40px;
      }

      .el-select {
        float: left;
        vertical-align: middle;
      }

      .t15 {
        top: 15px;
        margin-right: 20px;
        float: left;
      }
    }

    .tr-two {
      height: 35px;
      line-height: 35px;

      td {
        border: 1px solid #ddd;
        border-right: none;
        border-top: none;

        img {
          margin: 0 auto;
        }

        &:last-child {
          // border-right: 1px solid #ddd;
        }

        &:first-child {
          //border-left: none;
        }
      }
    }

    .check {
      line-height: 1.5;
      color: #333;
      text-align: left;
    }

    .bol-tr {
      font-size: 12px;
      height: 40px;
      line-height: 40px;
      background: #db515b;
      color: #fff;
    }

    .but {
      width: 50px;
      height: 20px;
      background: #db515b;
      color: #fff;
      text-align: center;
      margin-top: 5px;
      cursor: pointer;
    }

    .po-td {
      position: relative;
      cursor: pointer;

      img {
        position: relative;
        top: 4px;
        width: 16px;
      }
    }

    .hide-1 {
      width: 200px;
      min-height: 60px;
      max-height: 280px;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 10px;
      background: #fff;
      position: absolute;
      left: 30px;
      top: 40px;
      border: 1px solid #ccc;
      z-index: 999;

      .check {
        width: 200px;
        overflow-x: hidden;
      }
    }

    :deep(.el-table .cell),
    :deep(.el-table th div),
    :deep(.el-table--border td:first-child .cell),
    :deep(.el-table--border th:first-child .cell) {
      padding-left: 0 !important;
    }

    .page-size {
      margin: 20px 0;
      text-align: right;
      display: flex;
      justify-content: flex-end;
    }

    .bord {
      border: 1px solid #ccc;
      border-right: none;

      &:last-child {
        border-right: 1px solid #ccc;
      }
    }

    .data-table {
      td {
        height: 32px;
        line-height: 32px;
        text-align: center;

        &:first-child {
          border-right: none;
        }
      }
    }

    .crumbs {
      margin: 20px auto 16px;
      line-height: 16px;
    }

    .search {
      border: 2px solid #666;
      margin-bottom: 40px;

      .search-top {
        height: 48px;
        background: #db515b;

        ul {
          li {
            float: left;
            width: 16%;
            line-height: 48px;
            font-size: 18px;
            color: #fff;
            text-align: center;

            &:last-child {
              width: 10%;
            }
          }
        }
      }

      .serch-center {
        ul {
          border-bottom: 2px solid #ccc;
          height: 48px;

          &:last-child {
            border-bottom: none;
          }

          a {
            color: #333;
          }

          &:nth-child(2n-1) {
            a {
              color: #e4342e;
            }
          }

          li {
            float: left;
            width: 16%;
            line-height: 48px;
            font-size: 16px;

            text-align: center;

            &:last-child {
              width: 10%;
            }

            a {
              &:hover {
                color: #e4342e;
              }
            }
          }
        }
      }
    }

    .p-description {
      margin-top: 10px;
      margin-bottom: 30px;

      h3 {
        font-size: 18px;
        line-height: 32px;
        color: rgba(102, 102, 102, 1);
      }

      p {
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
        color: rgba(153, 153, 153, 1);
      }
    }

    .p-application {
      .p-application-tit {
        margin-top: 10px;
        margin-bottom: 5px;
        font-size: 18px;
        line-height: 32px;
        color: rgba(102, 102, 102, 1);
      }

      .cation-items {
        ul {
          li {
            width: 48%;
            float: left;
            margin-bottom: 10px;

            &:nth-child(2n-1) {
              padding-right: 2%;
            }

            img {
              float: left;
              margin-right: 10px;
            }

            a {
              line-height: 20px;
              font-size: 12px;

              &:hover {
                color: #db515b;
              }
            }
          }
        }
      }
    }

    .p-search {
      border: 1px solid rgba(204, 204, 204, 1);
      height: 40px;
      padding-left: 10px;

      .p-text {
        line-height: 40px;
        width: 80%;
        float: left;
      }

      .p-search-btn {
        width: 18%;
        float: right;
        text-align: center;
        height: 38px;
        background: #db515b;
        cursor: pointer;

        img {
          position: relative;
          top: 10px;
        }
      }
    }

    .p-img {
      margin-right: 20px;
    }

    .p-dl {
      dt {
        font-size: 20px;
        font-weight: bold;
        line-height: 32px;
        color: rgba(51, 51, 51, 1);
      }

      dd {
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
        color: rgba(153, 153, 153, 1);
        margin-bottom: 10px;

        .p-titl {
          font-size: 18px;
          font-weight: bold;
          line-height: 32px;
          color: rgba(102, 102, 102, 1);
        }

        .p-btn {
          width: 180px;
          height: 40px;
          display: inline-block;
          background: rgba(219, 81, 91, 1);
          color: #fff;
          text-align: center;
          line-height: 40px;
          border-radius: 4px;
          font-size: 16px;
          margin-top: 20px;
          cursor: pointer;
        }
      }
    }

    :deep(table) {
      margin-top: 0 !important;
    }

    :deep(.el-table th) {
      background: #db515b;
      color: #fff;
    }

    :deep(.el-table th > .cell) {
      text-align: center !important;
    }

    :deep(.el-table .cell) {
      text-align: center !important;
    }

    :deep(.el-table td),
    :deep(.el-table th) {
      padding: 8px 0;
    }
  }
}
.content-con {
  display: flex;
  justify-content: space-between;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}
</style>
