web/pages/market/index.vue

<template>
  <div class="market" id="market">
    <div class="top">
      <img src="@/assets/images/market/img1.png" alt="">
      <div>
        <div class="top_title">Custom Research</div>
        <div class="top_location">
          <span class="iconfont icon-weizhi"></span>
          Current Location ： Home <span class="iconfont icon-dkw_guanbi-"></span> <span>Custom Research</span>
        </div>
      </div>
    </div>
    <div class="contactUs">
      <div class="contactUs_l">
        <div class="contactUs_l_t">
          <img src="@/assets/images/market/img2.png" alt="">
          <div> WENKH Market Research Accurately Understands the Market and CustomizesExclusive Research Methods</div>
        </div>
        <div class="contactUs_l_b">We tailor research solutions for different industries and customer needs, integrating qualitative and quantitative analysis, combining desktop research, industryinterviews and data prediction models to ensure accurate market insights. Through a variety of data collection strategies, we efficiently complete research tasksand help customers obtain more valuable market insights.</div>
        <div class="contactUs_l_btn">Contact Us</div>
      </div>
      <div class="contactUs_r">
        <img src="@/assets/images/market/img3.png" alt="">
      </div>
    </div>
    <div class="customization">
      <div class="customization_title">Customization Process</div>
      <div class="customization_text">Accurate market research is crucial for businesses looking to expand into new markets. It not only helps in gaining deep insights into the market, customer needs, and competitive landscape but also provides data-driven supportfor strategic decision-making. Many successful companies achieve continuous growth by closely monitoring market dynamics and precisely understanding customer demands. Among various research methods, segmented marketresearch is a key approach for businesses to optimize product positioning and accurately target their ideal customer base. Through scientific data analysis, companies can identify their strengths and develop products and servicesthat align with market needs, ultimately enhancing their competitiveness. The core objective of segmented market research is to help businesses formulate differentiated strategies for various markets and products. Wenqu HuiZhispecializes in segmented market research, providing high-value market analysis and strategic support to help businesses navigate the market with precision.</div>
      <div class="customization_list">
        <div class="customization_item">
          <div class="customization_item_l">
            <img src="@/assets/images/market/img5.png" alt="">
            <div>Research market Overview and Project Background</div>
          </div>
          <div class="customization_item_r">
            <img src="@/assets/images/market/img4.png" alt="">
          </div>
        </div>
        <div class="customization_item">
          <div class="customization_item_l">
            <img src="@/assets/images/market/img6.png" alt="">
            <div>Design Research Outline</div>
          </div>
          <div class="customization_item_r">
            <img src="@/assets/images/market/img4.png" alt="">
          </div>
        </div>
        <div class="customization_item">
          <div class="customization_item_l">
            <img src="@/assets/images/market/img7.png" alt="">
            <div>Team Division of Labor</div>
          </div>
          <div class="customization_item_r">
            <img src="@/assets/images/market/img4.png" alt="">
          </div>
        </div>
        <div class="customization_item">
          <div class="customization_item_l">
            <img src="@/assets/images/market/img8.png" alt="">
            <div>Building Channels</div>
          </div>
          <div class="customization_item_r">
            <img src="@/assets/images/market/img4.png" alt="">
          </div>
        </div>
        <div class="customization_item">
          <div class="customization_item_l">
            <img src="@/assets/images/market/img9.png" alt="">
            <div>Execute</div>
          </div>
        </div>
      </div>
    </div>
    <div class="customizable">
      <div class="customizable_title">Customizable Research</div>
      <div class="customizable_table">
        <n-table :bordered="false" :single-line="false">
          <th align="center">{{$t('table.title1')}}</th>
          <th align="center">{{$t('table.title2')}}</th>
          <th align="center">{{$t('table.title3')}}</th>
          <tbody>
            <tr>
              <td class="lab" rowspan="4">{{$t('table.text1')}}</td>
              <td>{{$t('table.text2')}}</td>
              <td>{{$t('table.text3')}}</td>
            </tr>
            <tr>
              <td>{{$t('table.text4')}}</td>
              <td>{{$t('table.text5')}}</td>
            </tr>
            <tr>
              <td>{{$t('table.text6')}}</td>
              <td>{{$t('table.text7')}}</td>
            </tr>
            <tr>
              <td>{{$t('table.text8')}}</td>
              <td>{{$t('table.text9')}}</td>
            </tr>
            <tr>
              <td class="lab" rowspan="2">{{$t('table.text10')}}</td>
              <td>{{$t('table.text11')}}</td>
              <td>{{$t('table.text12')}}</td>
            </tr>
            <tr>
              <td>{{$t('table.text13')}}</td>
              <td>{{$t('table.text14')}}</td>
            </tr>
            <tr>
              <td class="lab" rowspan="4">{{$t('table.text15')}}</td>
              <td>{{$t('table.text16')}}</td>
              <td>{{$t('table.text17')}}</td>
            </tr>
            <tr>
              <td>{{$t('table.text18')}}</td>
              <td>{{$t('table.text19')}}</td>
            </tr>
            <tr>
              <td>{{$t('table.text20')}}</td>
              <td>{{$t('table.text21')}}</td>
            </tr>
            <tr>
              <td>{{$t('table.text22')}}</td>
              <td>{{$t('table.text23')}}</td>
            </tr>
            <tr>
              <td class="lab" rowspan="4">{{$t('table.text24')}}</td>
              <td>{{$t('table.text25')}}</td>
              <td>{{$t('table.text26')}}</td>
            </tr>
            <tr>
              <td>{{$t('table.text27')}}</td>
              <td>{{$t('table.text28')}}</td>
            </tr>
            <tr>
              <td>{{$t('table.text29')}}</td>
              <td>{{$t('table.text30')}}</td>
            </tr>
            <tr>
              <td>{{$t('table.text31')}}</td>
              <td>{{$t('table.text32')}}</td>
            </tr>
            <tr>
              <td class="lab" rowspan="3">{{$t('table.text33')}}</td>
              <td>{{$t('table.text34')}}</td>
              <td>{{$t('table.text35')}}</td>
            </tr>
            <tr>
              <td>{{$t('table.text36')}}</td>
              <td>{{$t('table.text37')}}</td>
            </tr>
            <tr>
              <td>{{$t('table.text38')}}</td>
              <td>{{$t('table.text39')}}</td>
            </tr>
          </tbody>
        </n-table>
      </div>
    </div>
    <div class="Research">
      <div class="Research_title">Research Scope</div>
      <div class="Research_list">
        <template v-for="(v,i) in list1" :key="i">
          <div class="Research_item">
            <img :src="v.img" alt="">
            <img class="Research_item_img1" src="@/assets/images/market/img18.png" alt="">
            <div class="Research_item_box1">
              {{v.title}}
            </div>
            <img class="Research_item_img2" src="@/assets/images/market/img19.png" alt="">
            <div class="Research_item_box2">
              <div class="Research_item_box2_title"> {{v.title}}</div>
              <div v-for="(k,j) in v.des" :key="'a'+j">{{k}}</div>
            </div>
          </div>
        </template>
      </div>
    </div>
    <div class="industry">
      <div class="industry_title">Industry and Regional Coverage</div>
      <div class="industry_text">China, the United States, Japan, Germany, South Korea, the United Kingdom, France, Canada, Italy, Spain, Russia, India, Brazil, Mexico, Australia, Vietnam, Thailand, Türkiye, Malaysia, South Africa, Saudi Arabia, Egypt</div>
      <div class="industry_list">
        <div class="industry_item" v-for="(v, i) in professionList" :key="i">
          <img :src="v.imgUrl" :alt="v.title" />
          <div v-html="v.title"></div>
        </div>
      </div>
    </div>
    <div class="latest">
      <div class="latest_title">Latest Reports</div>
      <div class="latest_list">
        <template v-for="item in hots" :key="item">
          <div class="latest_item">
            <img :src="BaseUrl + '/report/' + item.fileName" alt="">
            <div class="latest_item_content">
              <div class="latest_item_content_title">{{ item.title }}</div>
              <a :href="'/reports/' + item.webTitle + '-' + item.id" class="latest_item_content_btn">
                View details
              </a>
            </div>
          </div>
        </template>
      </div>
    </div>
    <ConnectUs />
  </div>
</template>

<script lang="ts" setup>
import researchImg1 from "@/assets/images/market/img10.png";
import researchImg2 from "@/assets/images/market/img11.png";
import researchImg3 from "@/assets/images/market/img12.png";
import researchImg4 from "@/assets/images/market/img13.png";
import researchImg5 from "@/assets/images/market/img14.png";
import researchImg6 from "@/assets/images/market/img15.png";
import researchImg7 from "@/assets/images/market/img16.png";
import researchImg8 from "@/assets/images/market/img17.png";
import img01 from "@/assets/images/companyProfile/img01.png";
import img02 from "@/assets/images/companyProfile/img02.png";
import img03 from "@/assets/images/companyProfile/img03.png";
import img04 from "@/assets/images/companyProfile/img04.png";
import img05 from "@/assets/images/companyProfile/img05.png";
import img06 from "@/assets/images/companyProfile/img06.png";
import img07 from "@/assets/images/companyProfile/img07.png";
import img08 from "@/assets/images/companyProfile/img08.png";
import img09 from "@/assets/images/companyProfile/img09.png";
import img10 from "@/assets/images/companyProfile/img10.png";
import img11 from "@/assets/images/companyProfile/img11.png";
import img12 from "@/assets/images/companyProfile/img12.png";
import { useLocaleStoreWithOut } from "@/store";
import {
  MdHome,
  IosFiling,
  MdSearch,
  IosAdd,
  IosRemove,
  MdArrowRoundDown,
} from "@vicons/ionicons4";
import {
  NBreadcrumb,
  NBreadcrumbItem,
  NIcon,
  NCard,
  NModal,
  NInput,
  NTable,
} from "naive-ui";
import { useI18n } from "#imports";
import { onMounted, onServerPrefetch, ref } from "vue";
import { useRouter } from "vue-router";
import { useUserStore } from "@/store/user";
const config = useRuntimeConfig();
const BaseUrl = ref(config.public.baseUrl);
const { t } = useI18n();
const height = ref<string>();
const demandShow = ref(false); // 需求页面
const hots = ref<ResearchReport[]>(); //市场资讯
const router = useRouter();
const keyword = ref<string>(""); //关键字
const show01 = ref(false),
  show02 = ref(false),
  show03 = ref(false),
  show04 = ref(false),
  show05 = ref(false),
  show06 = ref(false),
  show07 = ref(false),
  show08 = ref(false);
const langShow = ref<string>("");
const pcShow = ref<boolean>(true);
const userStore = useUserStore();
const lang = userStore.getLang;
const list1 = ref([
  {
    title: t("service.fstTitle"),
    img: researchImg1,
    des: [t("service.fstDesc01"), t("service.fstDesc02")],
  },
  {
    title: t("service.thrTitle"),
    img: researchImg2,
    des: [t("service.thrDesc")],
  },
  {
    title: t("service.fivTitle"),
    img: researchImg3,
    des: [
      t("service.fivDesc01"),
      t("service.fivDesc02"),
      t("service.fivDesc03"),
    ],
  },
  {
    title: t("service.sevTitle"),
    img: researchImg4,
    des: [t("service.sevDesc"), t("service.sevDesc01")],
  },
  {
    title: t("service.sndTitle"),
    img: researchImg5,
    des: [t("service.sndDesc01"), t("service.sndDesc02")],
  },
  {
    title: t("service.sixTitle"),
    img: researchImg6,
    des: [t("service.sixDesc01"), t("service.sixDesc02")],
  },
  {
    title: t("service.forTitle"),
    img: researchImg7,
    des: [t("service.forDesc01"), t("service.forDesc02")],
  },
  {
    title: t("service.egtTitle"),
    img: researchImg8,
    des: [t("service.egtDesc"), t("service.egtDesc01")],
  },
]);
const professionList = [
  {
    imgUrl: img01,
    title: "Chemical and Materials",
  },
  {
    imgUrl: img02,
    title: "Aerospace",
  },
  {
    imgUrl: img03,
    title: "Agriculture",
  },
  {
    imgUrl: img04,
    title: "Machinery and Equipment",
  },
  {
    imgUrl: img05,
    title: "Medical and Bio-Health",
  },
  {
    imgUrl: img06,
    title: "Electronics and Semiconductors",
  },
  {
    imgUrl: img07,
    title: "Software and Services",
  },
  {
    imgUrl: img08,
    title: "Consumer Products <br/> and Retail",
  },
  {
    imgUrl: img09,
    title: "Automobile and Transportation",
  },
  {
    imgUrl: img10,
    title: "Food and Beverage",
  },
  {
    imgUrl: img11,
    title: "Emerging Industries",
  },
  {
    imgUrl: img12,
    title: "Other Industries",
  },
];
// 关闭diag
function handleCloseDiag() {
  demandShow.value = false;
}

// 联系我们
function handleContact() {
  demandShow.value = true;
}

function viewDetail(item: ResearchReport) {
  const language = lang === "zh-CN" ? "" : "en";
  router.push({
    name: "reportDetail",
    params: { webTitle: item.webTitle + "-" + item.id, lang: language },
  });
}

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

function keyDown() {
  handleSearch();
}

// onServerPrefetch(async () => {
try {
  height.value = lang == "zh-CN" ? "200px" : "350px";
  const res = await hotResearchList({ lang: lang });
  hots.value = res;
  langShow.value = lang;

  pcShow.value = !isMobile();
} catch (error) {}
// });

// onMounted(async () => {
//   height.value = lang == "zh-CN" ? "200px" : "350px";
//   //const lang = useLocaleStoreWithOut().getLocale;
//   const res = await hotResearchList({ lang: lang });
//   hots.value = res.data;

//   langShow.value = lang;

//   pcShow.value = !isMobile();
// });
useHead({
  title: t("common.navigate.market") + "-" + t("defaultSettings.title"),
  viewport: "width=device-width,initial-scale=1,maximum-scale=1 ",
  charset: "utf-8",
  meta: [
    {
      hid: "keywords",
      name: "keywords",
      content: t("defaultSettings.keyword"),
    },
    {
      hid: "description",
      name: "description",
      content: t("defaultSettings.desc"),
    },
  ],
});
</script>

<style lang="scss" scoped>
@import "~/assets/css/tool.scss";
.market {
  margin-top: var(--size-130);
  .top {
    width: 100%;
    position: relative;
    margin-top: var(--size-130);
    img {
      width: 100%;
    }
    > div {
      width: 100%;
      padding: var(--size-60) var(--size-176) 0;
      position: absolute;
      top: 0;
      left: 0;
      .top_title {
        font-size: var(--size-48);
        font-family: Arial, Arial-Bold;
        font-weight: 700;
        text-align: left;
        color: #ffffff;
      }
      .top_location {
        font-size: var(--size-14);
        font-family: Arial, Arial-Regular;
        font-weight: 400;
        color: #ffffff;
        .icon-dkw_guanbi- {
          color: #ffffff;
          font-size: var(--size-12);
        }
        span {
          color: #72ff56;
        }
      }
    }
  }
  .contactUs {
    padding: 55px 145px;
    background: #f6f7fa;
    display: flex;
    justify-content: space-between;
    .contactUs_l {
      .contactUs_l_t {
        display: flex;
        align-items: center;
        img {
          width: 9px;
          height: 84px;
        }
        > div {
          width: 1037px;
          font-size: 28px;
          font-family: Arial, Arial-Bold;
          font-weight: 700;
          text-align: left;
          color: #0d3757;
          line-height: 38px;
          margin-left: 20px;
        }
      }
      .contactUs_l_b {
        width: 1126px;
        font-size: 16px;
        font-family: Arial, Arial-Regular;
        color: #1a1a1a;
        line-height: 24px;
        margin-top: 15px;
      }
      .contactUs_l_btn {
        width: 158px;
        height: 50px;
        background: linear-gradient(90deg, #60ab91, #84a86c);
        border-radius: 8px;
        font-size: 16px;
        font-family: Arial, Arial-Regular;
        text-align: center;
        color: #ffffff;
        line-height: 50px;
        margin-top: 24px;
        cursor: pointer;
      }
    }
    .contactUs_r {
      img {
        width: 415px;
      }
    }
  }
  .customization {
    background: #ffffff;
    padding: 55px 145px 60px;
    .customization_title {
      font-size: 28px;
      font-family: Arial, Arial-Bold;
      font-weight: 700;
      color: #0d3757;
      line-height: 38px;
    }
    .customization_text {
      font-size: 16px;
      font-family: Arial, Arial-Regular;
      color: #1a1a1a;
      line-height: 24px;
    }
    .customization_list {
      display: flex;
      justify-content: space-between;
      margin-top: 30px;
      .customization_item {
        display: flex;
        align-items: center;
        .customization_item_l {
          width: 243px;
          height: 184px;
          background: #ffffff;
          border: 1px solid #e6e6e6;
          text-align: center;
          padding: 30px 18px 0;
          img {
            width: 59px;
            height: 63px;
          }
          div {
            font-size: 16px;
            font-family: Arial, Arial-Bold;
            font-weight: 700;
            text-align: center;
            color: #1a1a1a;
            line-height: 22px;
            margin-top: 25px;
          }
        }
        .customization_item_r {
          img {
            width: 22px;
            height: 52px;
          }
        }
      }
    }
  }
  .customizable {
    padding: 70px 145px;
    background: #f5f5f5;
    .customizable_title {
      font-size: 28px;
      font-family: Arial, Arial-Bold;
      font-weight: 700;
      text-align: center;
      color: #0d3757;
      line-height: 38px;
    }
    .customizable_table {
      margin-top: 30px;
      ::v-deep .n-table {
        --n-border-color: #fff !important;
      }
      th {
        font-size: 18px;
        background-color: #82a86d;
        color: #fff;
        text-align: center;
        &:nth-child(1) {
          width: 12%;
        }
        &:nth-child(2),
        &:nth-child(3) {
          width: 37%;
          // font-weight: 700;
        }
      }
      tr {
        td {
          padding: 10px;
          background: none;
          text-align: center;
          background-color: #e2f1ee;
          font-size: 16px;
        }
        &:nth-child(-n + 7) {
          background-color: #e2f1ee;
        }
        &:nth-child(n + 8):nth-child(-n + 11) {
          background-color: #e2f1ee;
        }
        &:nth-child(n + 12):nth-child(-n + 13) {
          background-color: #e2f1ee;
        }
        .lab {
          background-color: #61ab91;
          color: #fff;
          font-size: 18px;
          font-weight: 600;
        }
      }
    }
  }
  .Research {
    padding: 60px 145px 30px;
    .Research_title {
      font-size: 28px;
      font-family: Arial, Arial-Bold;
      font-weight: 700;
      text-align: center;
      color: #0d3757;
      line-height: 38px;
    }
    .Research_list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-top: 25px;
      .Research_item {
        position: relative;
        width: 793px;
        margin-bottom: 30px;
        cursor: pointer;
        img {
          width: 793px;
          height: 518px;
        }
        .Research_item_img1 {
          position: absolute;
          top: 0;
          left: 0;
        }
        .Research_item_box1 {
          position: absolute;
          bottom: 0;
          left: 0;
          z-index: 5;
          font-size: 22px;
          width: 100%;
          font-family: Arial, Arial-Bold;
          font-weight: 700;
          color: #ffffff;
          line-height: 38px;
          padding: 20px 30px;
        }
        .Research_item_img2,
        .Research_item_box2 {
          display: none;
        }
        &:hover {
          .Research_item_box1 {
            display: none;
          }
          .Research_item_img2 {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 6;
          }
          .Research_item_box2 {
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 0 30px;
            position: absolute;
            bottom: 0;
            left: 0;
            top: 0;
            right: 0;
            z-index: 7;
            font-size: 14px;
            font-family: Arial, Arial-Regular;
            font-weight: 400;
            color: #ffffff;
            line-height: 22px;
            .Research_item_box2_title {
              font-size: 22px;
              font-family: Arial, Arial-Bold;
              font-weight: 700;
              text-align: left;
              color: #ffffff;
              line-height: 38px;
              margin-bottom: 5px;
            }
          }
        }
      }
    }
  }
  .industry {
    background: linear-gradient(159deg, #499f81 3%, #749c56 91%, #749c56 97%);
    padding: 55px 145px 0;
    .industry_title {
      font-size: 28px;
      font-family: Arial, Arial-Bold;
      font-weight: 700;
      text-align: center;
      color: #ffffff;
      line-height: 24px;
      margin-bottom: 25px;
    }
    .industry_text {
      font-size: 16px;
      font-family: Arial, Arial-Regular;
      text-align: center;
      color: #ffffff;
      line-height: 24px;
    }
    .industry_list {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      margin-top: 35px;
      .industry_item {
        position: relative;
        width: var(--size-256);
        font-size: 0;
        img {
          width: var(--size-256);
          height: var(--size-172);
        }
        > div {
          position: absolute;
          font-size: var(--size-16);
          color: #ffffff;
          width: 100%;
          text-align: center;
          left: 0;
          bottom: var(--size-15);
        }
      }
    }
  }
  .latest {
    background: #f6f7fa;
    padding: 60px 145px 40px;

    .latest_title {
      font-size: 28px;
      font-family: Arial, Arial-Bold;
      font-weight: 700;
      text-align: center;
      color: #0d3757;
      line-height: 38px;
    }
    .latest_list {
      display: flex;
      flex-wrap: wrap;
      margin-top: 25px;
      .latest_item {
        border-radius: 10px;
        overflow: hidden;
        width: 359px;
        margin-right: 59px;
        margin-bottom: 60px;
        &:nth-child(4n) {
          margin-right: 0;
        }
        img {
          width: 359px;
          height: 404px;
          display: block;
        }
        .latest_item_content {
          background: #ffffff;
          padding: 15px 15px 40px;
          .latest_item_content_title {
            font-size: 18px;
            font-family: MicrosoftYaHei;
            color: #1a1a1a;
            line-height: 28px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
          .latest_item_content_btn {
            width: 170px;
            height: 48px;
            display: block;
            background: linear-gradient(
              90deg,
              #7b9c4f 0%,
              #549f76 70%,
              #2da19d 100%
            );
            border-radius: 8px;
            font-size: 18px;
            font-family: MicrosoftYaHei;
            font-weight: normal;
            text-align: center;
            color: #ffffff;
            line-height: 48px;
            margin-top: 35px;
          }
        }
      }
    }
  }
}
@include responseTo("phone") {
  .market {
    .top {
      img {
        height: 100px;
        object-fit: cover;
      }
      > div {
        padding: 15px;
        .top_title {
          font-size: 28px;
        }
      }
    }
    .contactUs {
      padding: 15px;
      flex-direction: column-reverse;
      .contactUs_l {
        .contactUs_l_t {
          div {
            width: 100%;
            font-size: 18px;
            line-height: 22px;
          }
        }
        .contactUs_l_b {
          width: 100%;
          font-size: 14px;
          line-height: 20px;
        }
        .contactUs_l_btn {
          margin-top: 15px;
        }
      }
      .contactUs_r {
        img {
          width: 100%;
        }
      }
    }
    .customization {
      padding: 15px;
      .customization_title {
        font-size: 18px;
      }
      .customization_text {
        font-size: 14px;
      }
      .customization_list {
        flex-direction: column-reverse;
        align-items: center;
        .customization_item {
          flex-direction: column-reverse;
          align-items: center;
          .customization_item_r {
            transform: rotateZ(90deg);
          }
          .customization_item_l {
            padding: 30px 15px 0;
            div {
              margin-top: 15px;
            }
          }
        }
      }
    }
    .customizable {
      padding: 15px;
      .customizable_title {
        font-size: 18px;
      }
      .customizable_table {
        margin-top: 30px;
        th {
          font-size: 16px;
        }
        tr {
          td {
            padding: 5px;
            font-size: 14px;
          }
          .lab {
            font-size: 16px;
          }
        }
      }
    }
    .Research {
      padding: 15px;
      .Research_title {
        font-size: 18px;
      }
      .Research_list {
        .Research_item {
          img {
            width: 100% !important;
            height: auto !important;
          }
          .Research_item_box1 {
            font-size: 16px;
            text-align: center;
          }
          .Research_item_box2 {
            position: static;
            color: black;
          }
          .Research_item_box2,
          &:hover .Research_item_box2 {
            position: static;
            color: black;
            display: block;
            padding: 0;
            .Research_item_box2_title {
              display: none;
            }
          }
          .Research_item_box1,
          &:hover .Research_item_box1 {
            display: block;
            top: 160px;
          }
          .Research_item_img2,
          &:hover .Research_item_img2 {
            display: none;
          }
        }
      }
    }
    .industry {
      padding: 15px;
      .industry_title {
        font-size: 18px;
        margin-bottom: 10px;
      }
      .industry_text {
        font-size: 14px;
      }
      .industry_list {
        .industry_item {
          width: 33.33%;
          img {
            width: 100%;
            height: auto;
          }
          div {
            font-size: 14px;
            bottom: 5px;
          }
        }
      }
    }
    .latest {
      padding: 15px;
      .latest_list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .latest_item {
          width: 48%;
          margin-bottom: 10px;
          margin-right: 0;
          img {
            width: 100%;
            height: auto;
          }
          .latest_item_content {
            padding: 10px 10px 20px;
            .latest_item_content_btn {
              width: 100px;
              height: 35px;
              font-size: 14px;
              line-height: 35px;
              margin-top: 10px;
            }
          }
        }
      }
    }
  }
}
</style>