web/pages/report-industries/detail.vue

<template>
  <div class="page">
    <div class="location">
      <div class="location_l"> <span class="iconfont icon-weizhi"></span></div>
      <div class="location_r"> Current Location ： Home <span class="iconfont icon-dkw_guanbi-"></span> <span>Reports</span></div>
    </div>
    <div class="content">
      <div class="content_t">
        <img src="/assets/images/report/img2.png" alt="">
        <div class="">
          <img :src="BaseUrl + '/report/' + record?.fileName" alt="">
          <div>
            <div class="content_t_l">
              <div class="content_t_l_title">{{ record?.title }}</div>
              <div class="content_t_l_tag">
                <div>Published：<span>{{ record?.publishDate }}</span></div>
                <div>ReportID：<span>{{ record?.reportCode }}</span></div>
                <div>Report Format： <span class="desc-icon">
                    <img src="@/assets/images/doc.png" />
                    <img src="@/assets/images/pdf.png" />
                    <img src="@/assets/images/xlsx.png" />
                  </span></div>
                <div>Delivery：<span>48-72h</span></div>
              </div>
              <div class="content_t_l_btn">
                <template v-for="(vo,i) in priceFullList" :key="i">
                  <div class="content_t_l_btn_item " :class="{active:vo?.configValue === price}" @click="handlePrice(vo, vo?.configValue)">
                    <div class="content_t_l_btn_item_l">
                      <div class="content_t_l_btn_item_l_t"> {{
                          vo.configName?.split("-")[3] == "单用户版单价"
                            ? 'Single User License'
                            : vo.configName?.split("-")[3] == "多用户版单价"
                            ? 'Multi User license'
                            : 'Enterprise License'
                        }}</div>
                      <div class="content_t_l_btn_item_l_b">{{
                          vo.configName?.split("-")[3] == "单用户版单价"
                            ? 'Only for l user access'
                            : vo.configName?.split("-")[3] == "多用户版单价"
                            ? '1-10 users access'
                            : 'UJnlimited users acces!'
                        }}</div>
                    </div>
                    <div class="content_t_l_btn_item_r">
                      <div></div>
                      <span class="iconfont icon-duigou"></span>
                    </div>
                  </div>
                </template>
              </div>
            </div>
            <div class="content_t_r">
              <div class="content_t_r_price">${{Number(price).toFixed(2)}}</div>
              <div class="content_t_r_btn">Request Sample</div>
              <div class="content_t_r_btn">Buy Now</div>
              <div class="content_t_r_btn black">Download Sample</div>
            </div>
          </div>
        </div>
      </div>
      <div class="content_b">
        <div class="content_b_l">
          <div class="content_b_l_clause">
            <img src="/assets/images/report/img3.png" alt="">
            <div>
              <div class="content_b_l_title">Important Clause:</div>
              <div class="content_b_l_text">Recently, our company has discovered that some websites have plagiarized, quoted and modified our original report catalog without authorization, and sold reports under our brand, which has seriously infringed our interests. Therefore, our company recommends that you contact the relevant phone number, email address or leave a message to purchase the report to prevent being deceived.</div>
              <div class="content_b_l_tag">*All report contents displayed on this website are original to WENKH, and our company has the sole copyright. Any modification, reprinting or quotingin any form is prohibited without our prior written permission. Otherwise, our company reserves the right to pursue legal responsibility.</div>
            </div>
          </div>
          <div class="content_b_l_scope">
            <div class="content_b_l_scope_l">Research Scope</div>
            <div class="content_b_l_scope_r"><span class="iconfont icon-shouqi"></span></div>
          </div>
          <!-- 富文本 -->
          <div>
            <n-tabs justify-content="space-evenly" :value="tabsValue" size="large" pane-style="border-top: 1px solid #e1e1e1;padding: 20px" :animated="true" tab-style="padding:20px;">
              <n-tab-pane name="Research Scope" display-directive="show">
                <h2 class="market-title_h2" v-if="record?.marketScale || record?.marketDriven">
                  {{ t("report.detail.marketOverview") }}
                </h2>
                <div v-html="record?.reportScopeHtmlCopy"></div>
              </n-tab-pane>
              <n-tab-pane name="Table of Contents" display-directive="show">
                <div class="detail-directory" v-html="record?.directoryHtml"></div>
              </n-tab-pane>
              <n-tab-pane name="Tables and Figures" display-directive="show">
                <div v-html="record?.chartsHtml"></div>
              </n-tab-pane>
              <n-tab-pane name="Methodology" display-directive="show">
                <div></div>
              </n-tab-pane>
            </n-tabs>
          </div>
        </div>
        <div class="content_b_r">
          <img class="content_b_r_img" src="/assets/images/report/img4.png" alt="">
          <div class="content_b_r_jump">Jump To Content</div>
          <div class="content_b_r_list">
            <template v-for="(v,i) in tabsTitleList" :key="i">
              <div class="content_b_r_list_item" :class="{active:v==tabsValue}" @click="tabsValue=v">
                <span class="iconfont icon-shouqi1"></span>
                <div>{{v}}</div>
              </div>
            </template>
          </div>
          <div class="content_b_r_list_related">
            <div class="content_b_r_list_related_title">
              <div></div>
              Related Reports
            </div>
            <div class="content_b_r_list_related_list">
              <template v-for="(item,i) in moreList" :key="item">
                <a :href="'/reports/' +item.webTitle +'-' +item.id" v-if="i<5">
                  <img :src=" BaseUrl + '/report/' + item?.fileName" alt="">
                  <div>
                    <div class="title">Global Healthcare Supply Chain Managements Market Competitors, Segment Types and...</div>
                    <div class="date">
                      <span class="iconfont icon-normal"></span>
                      2024-11-05
                    </div>
                  </div>
                </a>
              </template>
            </div>
          </div>
        </div>
      </div>
    </div>
    <ConnectUs />
  </div>
</template>

<script lang="ts" setup>
import {
  MdHome,
  IosFiling,
  MdSearch,
  IosKeypad,
  IosArrowForward,
  IosRadioButtonOn,
} from "@vicons/ionicons4";
import { useRoute, useRouter } from "vue-router";
import { onMounted, ref, onUnmounted, onServerPrefetch, inject } from "vue";
import { useI18n } from "#imports";
import { useUserStore } from "@/store/user";
// import cheerio from "cheerio";
const config = useRuntimeConfig();
const BaseUrl = ref(config.public.baseUrl);
const route = useRoute();
const router = useRouter();
const record = ref<ResearchReport>();
const integrityShow = ref("block"); // 完整性
const businessSHow = ref("none"); // 企业数据
const price = ref<string>(); // 选择价格
const demandShow = ref(false); // 需求
const rowId = ref<string>(); // id
const rowPrice = ref<string>(); // 选择版本
const rowType = ref<string>(); // 类型，1.样本,2.定制
const rowRegion = ref<string>(); //版本
const { t } = useI18n();
const priceList = ref<Config[]>(); // 企业版价格（价格清单）
const priceFullList = ref<Config[]>(); // 完整版价格
const pageNum = ref<string>(),
  chartNum = ref<string>(); // 页数图表数
const tbodyShow = ref(true); //tbody
const detailIntegrityRef = ref(); //正文目录
//const detailDirListShow = ref<string>('none');  // 正文目录清单显示
const userStore = useUserStore();
const lang = userStore.getLang;
const keyword = ref<string>(""); //关键字
//let indexKeyword: string;
const pcBtnShow = ref<boolean>(true);
const globalTitleKeywordsDescription = inject("globalTitleKeywordsDescription");
const setTitleKeywordsDescription = inject("setTitleKeywordsDescription");
const moreList = ref<ResearchReport[]>();
const offMarketOverview = ref<boolean>(false);
const tabsValue = ref<string>("Research Scope");
const tabsTitleList = ref<string[]>([
  "Research Scope",
  "Table of Contents",
  "Tables and Figures",
  "Methodology",
]);
async function getData() {
  try {
    pcBtnShow.value = !isMobile();
    window.addEventListener("scroll", onScroll);
  } catch (error) {}

  const webTitle = route.params.webTitle;
  const wts = webTitle.split("-");
  //indexKeyword = route.params.keyword;
  const ret = await researchReportForm({ id: wts[wts.length - 1], lang: lang });
  if (ret.vo) {
    if (ret.vo.reportScopeHtml) {
      ret.vo.reportScopeHtmlCopy = `${ret.vo.marketScale || ""}${
        ret.vo.marketDriven || ""
      }${ret.vo.reportScopeHtml}`;
    }
    record.value = ret.vo;

    let keys = "",
      fullKeys = "",
      pageKeys = "";
    if (lang == "zh-CN") {
      if (ret.vo.reportRegion == "1") {
        // 全球与中国，1.企业数据,2.完整
        keys =
          "cn.global.data.single.price,cn.global.data.multi.price,cn.global.data.enterprise.price";
        fullKeys =
          "cn.global.full.single.price,cn.global.full.multi.price,cn.global.full.enterprise.price";
        pageKeys = "cn.global.page.number,cn.global.chart.number";
      } else {
        // 中国
        keys =
          "cn.china.data.single.price,cn.china.data.multi.price,cn.china.data.enterprise.price";
        fullKeys =
          "cn.china.full.single.price,cn.china.full.multi.price,cn.china.full.enterprise.price";
        pageKeys = "cn.china.page.number,cn.china.chart.number";
      }
    } else {
      if (ret.vo.reportRegion == "1") {
        // 全球与中国，1.企业数据,2.完整
        keys =
          "en.global.data.single.price,en.global.data.multi.price,en.global.data.enterprise.price";
        fullKeys =
          "en.global.full.single.price,en.global.full.multi.price,en.global.full.enterprise.price";
        pageKeys = "en.global.page.number,en.global.chart.number";
      } else {
        // 中国
        keys =
          "en.china.data.single.price,en.china.data.multi.price,en.china.data.enterprise.price";
        fullKeys =
          "en.china.full.single.price,en.china.full.multi.price,en.china.full.enterprise.price";
        pageKeys = "en.china.page.number,en.china.chart.number";
      }
    }

    const c1 = await configList({ keys: keys });
    priceList.value = c1;

    const c2 = await configList({ keys: fullKeys });
    price.value = c2[0].configValue;
    priceFullList.value = c2;

    const c3 = await configList({ keys: pageKeys });
    pageNum.value = c3[0].configValue;
    chartNum.value = c3[1].configValue;
    moreList.value = ret.list;
    return ret.vo;
  } else {
    const language = lang === "zh-CN" ? "" : "en";
    router.push({ name: "reports", params: { lang: language } });
  }
  let content =
    record.value.reportScopeHtml?.split("<p>")[3].split("</p>")[0] || "";
  useHead({
    title: record.value.title,
    viewport: "width=device-width,initial-scale=1,maximum-scale=1 ",
    charset: "utf-8",
    meta: [
      {
        hid: "keywords",
        name: "keywords",
        content: record.value.context + "、" + t("defaultSettings.keyword"),
      },
      {
        hid: "description",
        name: "description",
        content: getStringContent(content, "span"),
      },
    ],
  });
}

// onMounted(async () => {
//   //window.addEventListener('popstate', goBack);
//   const data = await getData();
//   const titleMetaInfo = getTitleKeywordsDescription(data);
//   document.title = titleMetaInfo.title;
// });

onUnmounted(() => {
  window.removeEventListener("scroll", onScroll);
});

//返回上一页
// async function goBack(e: Event){
//     const back = router.options.history.state.current || '';
//     if(back && back.toString().includes('/report-industries') && indexKeyword){
//         e.preventDefault();
//         const language = lang === 'zh-CN'?'': 'en';
//         await router.push({ name: 'reports', params: { keyword: indexKeyword, lang: language, category: '' } });
//     }
//     window.removeEventListener('popstate', goBack);
// }

// 完整性
function handleIntegrity() {
  integrityShow.value = "block";
  businessSHow.value = "none";
  price.value = priceFullList.value[0]?.configValue;
}

// 企业数据
function handleBusiness() {
  integrityShow.value = "none";
  businessSHow.value = "block";
  price.value = priceList.value[0].configValue;
}

// 切换版本
function handlePrice(_e: Event, priceValue: string | undefined) {
  price.value = priceValue;
}

//关闭diag
function handleCloseDiag() {
  demandShow.value = false;
}

// 提交需求
function handleDemand() {
  rowId.value = record.value?.id;
  rowPrice.value = price.value;
  demandShow.value = true;
}

function handleContact() {
  demandShow.value = true;
}

function handleOrder(type: string) {
  rowId.value = record.value?.id;
  rowPrice.value = price.value;
  rowType.value = type;
  rowRegion.value = record.value?.reportRegion;
  demandShow.value = true;
}

// 鼠标滑动
function onScroll() {
  // 价格显示隐藏
  const scollTop = document.documentElement.scrollTop;
  if (scollTop > 370 && pcBtnShow.value) {
    tbodyShow.value = false;
  } else {
    tbodyShow.value = true;
  }

  // 正文目录滑动时，正文菜单显示隐藏
  // const top = detailIntegrityRef.value.getBoundingClientRect().top;   // 顶点距离
  // const height = detailIntegrityRef.value.clientHeight;   // 正文高度
  // if(top <= 0 && height >= scollTop - 100){
  //     detailDirListShow.value = 'block';
  // }else{
  //     detailDirListShow.value = 'none';
  // }
  // 滑动时自动定位到正文清单
  // console.log("顶部距离："+scollTop);
  // const calcTop = Math.trunc(scollTop - 840);
  // const childrens = document.getElementsByClassName('bjfl-list')[0]?.children;
  // const len = document.getElementsByClassName('bjfl-list')[0]?.children.length;
  // if(len && len > 0){
  //     for(let i = 1; i < len; i++){
  //         let outId = "c"+i, lastTop = 0;
  //         if(i < 10){ outId = "c0" +i;}
  //         const top = document.getElementById(outId)?.offsetTop || 0;
  //         if(top === calcTop){
  //             childrens.forEach(item => { item.className = ''; })
  //             childrens[i].className = 'active';
  //             break;
  //         }else{
  //             if(i > 1){
  //                 // 上一节点到顶部距离
  //                 let lastId = "c"+(i-1);
  //                 if(i < 11){ lastId = "c0"+(i-1); }
  //                 lastTop = document.getElementById(lastId)?.offsetTop || 0;
  //                 //console.log(outId+":"+top);
  //                 // 滑动距离在i和i-1中间，则设置i-1为active，其余为空
  //                 //console.log("outId:"+outId+",top:"+top+",lastTop:"+top);
  //                 if(top > calcTop && lastTop <= calcTop){
  //                     childrens.forEach(item => { item.className = ''; })
  //                     childrens[i-1].className = 'active';
  //                     break;
  //                 }
  //             }else{
  //                 if(top >= calcTop){
  //                     childrens.forEach(item => {  item.className = '';})
  //                     childrens[i].className = 'active';
  //                     break;
  //                 }
  //             }
  //         }
  //     }
  // }
}

// 正文目录内容导航点击事件
// function handleDir(e: Event){
//     if(e.target.className != 'bjfl-t01'){
//         document.getElementsByClassName(e.target.offsetParent.className)[0].childNodes.forEach(item => {
//             if(item.className != 'bjfl-t01'){
//                 item.className = '';
//             }
//         })
//         e.target.className = 'active';

//         const outId = e.target.getAttribute('data-id');
//         const top = document.getElementById(outId)?.offsetTop || 0;
//         document.documentElement.scrollTop = top + 840;
//     }
// }

// 显示价格
function showPrice() {
  //window.scrollTo(0,0);
  let scollTop = document.documentElement.scrollTop;
  const timeTop = setInterval(() => {
    document.documentElement.scrollTop =
      document.documentElement.scrollTop =
      scollTop -=
        10;
    if (scollTop <= 0) {
      clearInterval(timeTop);
    }
  }, 10);
}

function handleSearch() {
  const language = lang === "zh-CN" ? "" : "en";
  router.push({
    name: "reports",
    params: { keyword: keyword.value, lang: language },
  });
}

function keyDown() {
  handleSearch();
}

// onServerPrefetch(async () => {
//   try {
//     const data = await getData();
//     setTitleKeywordsDescription(getTitleKeywordsDescription(data));
//   } catch (error) {
//     console.log(error);
//   }
// });

// function getTitleKeywordsDescription(data: any) {
//   //console.log(window);
//   let title, description, keywords;
//   try {
//     if (data.reportScopeHtml) {
//       let $ = cheerio.load(data.reportScopeHtml);
//       description = $("p").eq(3).text();
//     }
//     title = data.title;
//     keywords = data.context;
//   } catch (error) {
//     console.log("getTitleKeywordsDescription", error);
//   }
//   return {
//     title,
//     keywords,
//     description,
//   };
// }
getData();
// useHead({
//   title: record.value.title,
//   viewport: "width=device-width,initial-scale=1,maximum-scale=1 ",
//   charset: "utf-8",
//   meta: [
//     { hid: "keywords", name: "keywords", content: record.value.context },
//     {
//       hid: "description",
//       name: "description",
//       content: document.getElementsByTagName("p")[3].innerText,
//     },
//   ],
// });
</script>

<style lang="scss" scoped>
@import "~/assets/css/tool.scss";
.page {
  margin-top: var(--size-130);
  .location {
    display: flex;
    border-bottom: 1px solid #e6e6e6;
    padding: 0 var(--size-160);
    background: #ffffff;
    .location_l {
      width: var(--size-60);
      height: var(--size-60);
      background: #dcdcdc;
      color: #383838;
      font-size: var(--size-16);
      text-align: center;
      line-height: var(--size-60);
      margin-right: var(--size-30);
    }
    .location_r {
      font-size: var(--size-14);
      font-family: Arial, Arial-Regular;
      color: #666666;
      line-height: var(--size-59);
      span {
        color: #639e57;
        font-family: Microsoft YaHei, Microsoft YaHei-Regular;
      }
      .icon-dkw_guanbi- {
        color: #666666;
        font-size: var(--size-12);
      }
    }
  }
  .content {
    padding: var(--size-10) var(--size-145) var(--size-130);
    .content_t {
      position: relative;
      > img {
        width: 100%;
      }
      > div {
        width: 100%;
        padding: var(--size-54) var(--size-30);
        position: absolute;
        top: 0;
        left: 0;
        > div {
          display: flex;
          justify-content: space-between;
        }
        > img {
          width: var(--size-245);
          height: var(--size-300);
          background: rgba(0, 0, 0, 0);
          border: 1px solid #707070;
          object-fit: contain;
        }
        .content_t_l {
          .content_t_l_title {
            width: var(--size-1128);
            font-size: var(--size-32);
            font-family: Microsoft YaHei, Microsoft YaHei-Bold;
            font-weight: 700;
            color: #ffffff;
            line-height: var(--size-40);
          }
          .content_t_l_tag {
            font-size: var(--size-18);
            font-family: Microsoft YaHei, Microsoft YaHei-Regular;
            color: #ffffff;
            display: flex;
            margin-top: var(--size-20);
            > div {
              margin-right: var(--size-30);
              span {
                color: #cccccc;
              }
              .desc-icon {
                img {
                  width: var(--size-18);
                  height: var(--size-18);
                  margin-right: var(--size-5);
                  vertical-align: middle;
                }
              }
            }
          }
          .content_t_l_btn {
            display: flex;
            margin-top: var(--size-35);
            .content_t_l_btn_item {
              width: var(--size-304);
              height: var(--size-103);
              background: #ffffff;
              border-radius: var(--size-8);
              padding: var(--size-20);
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-right: var(--size-40);
              cursor: pointer;
              &:last-child {
                margin-right: 0;
              }
              .content_t_l_btn_item_l {
                .content_t_l_btn_item_l_t {
                  font-size: var(--size-22);
                  color: #399ac0;
                }
                .content_t_l_btn_item_l_b {
                  font-size: var(--size-14);
                  color: #399ac0;
                }
              }
              .content_t_l_btn_item_r {
                width: var(--size-27);
                height: var(--size-27);
                border: 1px solid #399ac0;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                > div {
                  width: var(--size-17);
                  height: var(--size-17);
                  background: #399ac0;
                  border-radius: 50%;
                  display: block;
                }
                span {
                  display: none;
                }
              }
            }
            .active {
              background: #399ac0;
              .content_t_l_btn_item_l {
                .content_t_l_btn_item_l_t {
                  color: #ffffff;
                }
                .content_t_l_btn_item_l_b {
                  color: #ffffff;
                }
              }
              .content_t_l_btn_item_r {
                background: #ffffff;
                > div {
                  display: none;
                }
                span {
                  font-size: var(--size-24);
                  color: #399ac0;
                  display: block;
                  position: relative;
                  left: -1px;
                }
              }
            }
          }
        }
        .content_t_r {
          position: relative;
          top: var(--size--25);
          .content_t_r_price {
            font-size: var(--size-48);
            font-family: Microsoft YaHei, Microsoft YaHei-Bold;
            font-weight: 700;
            text-align: right;
            color: #ffffff;
            line-height: var(--size-64);
          }
          .content_t_r_btn {
            width: var(--size-314);
            height: var(--size-64);
            background: #399ac0;
            border-radius: var(--size-8);
            font-size: var(--size-18);
            font-family: Microsoft YaHei, Microsoft YaHei-Bold;
            font-weight: 700;
            color: #ffffff;
            text-align: center;
            line-height: var(--size-64);
            margin-top: var(--size-12);
          }
          .black {
            background: #000000;
          }
        }
      }
    }
    .content_b {
      margin-top: var(--size-30);
      display: flex;
      justify-content: space-between;
      .content_b_l {
        width: var(--size-1079);
        .content_b_l_clause {
          position: relative;
          > img {
            width: var(--size-1079);
          }
          > div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            padding: var(--size-20) var(--size-30);
            .content_b_l_title {
              font-size: var(--size-22);
              font-family: Arial, Arial-Bold;
              font-weight: 700;
              color: #ffffff;
            }
            .content_b_l_text {
              font-size: var(--size-14);
              font-family: Arial, Arial-Regular;
              color: #ffffff;
              line-height: var(--size-18);
            }
            .content_b_l_tag {
              width: 100%;
              background: rgba(0, 0, 0, 0.7);
              font-size: var(--size-14);
              font-family: Arial, Arial-Bold;
              font-weight: 700;
              color: #ffffff;
              padding: var(--size-10);
              border-radius: var(--size-10);
              margin-top: var(--size-15);
            }
          }
        }
        .content_b_l_scope {
          background: linear-gradient(90deg, #60ab91, #84a86c);
          padding: var(--size-14) var(--size-29);
          display: flex;
          justify-content: space-between;
          margin-top: var(--size-18);
          .content_b_l_scope_l {
            font-size: var(--size-20);
            font-family: Arial, Arial-Bold;
            font-weight: 700;
            color: #ffffff;
          }
          .content_b_l_scope_r {
            span {
              font-size: var(--size-20);
              color: #ffffff;
            }
          }
        }
      }
      .content_b_r {
        width: var(--size-520);
        .content_b_r_img {
          width: var(--size-520);
        }
        .content_b_r_jump {
          background: #6aaa87;
          text-align: center;
          padding: var(--size-25) 0;
          font-size: var(--size-22);
          font-family: Arial, Arial-Bold;
          font-weight: 700;
          color: #ffffff;
          line-height: var(--size-22);
          margin-top: var(--size-30);
        }
        .content_b_r_list {
          border: var(--size-1) solid #e6e6e6;
          padding-bottom: var(--size-12);
          .content_b_r_list_item {
            font-size: var(--size-18);
            font-family: Arial, Arial-Regular;
            font-weight: 400;
            text-align: left;
            color: #0d3757;
            line-height: var(--size-22);
            display: flex;
            padding: var(--size-19) var(--size-29);
            cursor: pointer;
            span {
              color: #808080;
              display: inline-block;
              transform: rotateZ(90deg);
              font-size: var(--size-14);
              margin-right: var(--size-10);
            }
          }
          .active {
            background: #dcede8;
            color: #639e57;
            span {
              color: #609d69;
            }
          }
        }
        .content_b_r_list_related {
          margin-top: var(--size-30);
          border: 1px solid #e6e6e6;
          .content_b_r_list_related_title {
            position: relative;
            background: #f4f7f9;
            font-size: var(--size-22);
            font-family: Arial, Arial-Bold;
            font-weight: 700;
            text-align: center;
            color: #0d3757;
            line-height: var(--size-22);
            padding: var(--size-26) 0;
            div {
              width: 100%;
              height: var(--size-2);
              background: linear-gradient(32deg, #60ab90 61%, #84a86c 100%);
              position: absolute;
              top: 0;
              left: 0;
            }
          }
          .content_b_r_list_related_list {
            padding: var(--size-20) var(--size-30);
            > a {
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: var(--size-20) 0;
              border-bottom: var(--size-1) dashed #d9d9d9;
              cursor: pointer;
              &:last-child {
                border-bottom: none;
              }
              img {
                width: var(--size-74);
                height: var(--size-88);
                object-fit: contain;
                margin-right: var(--size-15);
              }
              > div {
                .title {
                  font-size: var(--size-16);
                  font-family: Arial, Arial-Regular;
                  color: #1a1a1a;
                  line-height: var(--size-24);
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-line-clamp: 2;
                  -webkit-box-orient: vertical;
                }
                .date {
                  font-size: var(--size-14);
                  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
                  color: #999999;
                  line-height: var(--size-26);
                  span {
                    color: #999999;
                    font-size: var(--size-14);
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
.market-title_h2 {
  color: rgb(34, 7, 94);
  font-size: var(--size-19);
}
:deep(.n-tabs-wrapper) {
  display: none !important;
}
@include responseTo("phone") {
  .page {
    .location {
      padding: 0;
      .location_l {
        margin-right: 15px;
      }
    }
    .content {
      padding: 0;
      width: 100vw;
      .content_t {
        width: 100vw;
        > img {
          width: 100vw;
          height: 1050px;
          object-fit: cover;
        }
        > div {
          text-align: center;
          padding: 15px;
          > div {
            width: 100%;
            display: block;
            .content_t_l {
              text-align: left;
              .content_t_l_title {
                width: auto;
                font-size: 18px;
                line-height: 24px;
              }
              .content_t_l_tag {
                display: block;
                font-size: 14px;
              }
              .content_t_l_btn {
                justify-content: space-between;
                .content_t_l_btn_item {
                  width: 30%;
                  margin-right: 0;
                  padding: 10px;
                  display: block;
                  .content_t_l_btn_item_l {
                    .content_t_l_btn_item_l_t {
                      font-size: 14px;
                      font-weight: 700;
                    }
                    .content_t_l_btn_item_l_b {
                      font-size: 12px;
                    }
                  }
                }
              }
            }
            .content_t_r {
              top: 0;
            }
          }
        }
      }
      .content_b {
        margin-top: 10px;
        display: block;
        .content_b_l {
          .content_b_l_clause {
            > img {
              width: 100%;
              height: 420px;
              object-fit: cover;
              display: block;
            }
            > div {
              padding: 15px;
            }
          }
          .content_b_l_scope {
            margin-top: 10px;
          }
        }
        .content_b_r {
          .content_b_r_img {
            width: 100%;
            display: block;
          }
          .content_b_r_jump {
            margin-top: 10px;
          }
          .content_b_r_list_related {
            margin-top: 10px;
          }
        }
      }
    }
  }
}
</style>