web/pages/bulletin/index.vue

<template>
  <div class="page" id="page">
    <div class="top-title wow fadeInUp" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
      <div class="top-container">
        <n-icon :component="IosFiling" size="40" style="vertical-align: middle" />
        <span>简报智库</span>
      </div>
    </div>

    <div class="page-nav-container wow fadeInLeft" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
      <div class="nav-txt">
        <n-breadcrumb separator=">">
          <n-breadcrumb-item> <n-icon :component="MdHome" /><router-link to="/home">首页</router-link> </n-breadcrumb-item>
          <n-breadcrumb-item> <n-icon :component="IosFiling" />简报智库 </n-breadcrumb-item>
        </n-breadcrumb>
      </div>
    </div>
    <div class="search wow fadeInRight" :class="{ 'mobile-search': !pcShow }">
      <div class="search-box">
        <n-input v-model:value="params.title" clearable placeholder="请输入关键字进入搜索">
          <template #prefix>
            <span class="bqfl-iconfont icon-sousuo color80"></span>
          </template>
        </n-input>
        <n-button class="btn" type="primary" color="#18A058" @click="getList"> 搜索 </n-button>
      </div>
    </div>
    <div class="bulletin" :class="{ 'mobile-body': !pcShow }">
      <div class="container">
        <div class="classify wow fadeInLeft">
          <div class="row-classify">
            <div class="sub-label">
              <span class="bqfl-iconfont icon-hangyefenlei"></span>
              <span class="sub-label-txt">行业分类</span>
            </div>
            <div class="classify-items">
              <template v-if="categoryList && categoryList.length > 0">
                <div class="item" :class="{ 'active-item': categoryID == item.id }" v-for="item in categoryList" :key="item.id" @click="handleCategory(item, 'Category')">
                  {{ item.name }}
                </div>
              </template>
              <template v-else> 暂无行业分类数据 </template>
            </div>
          </div>
          <div class="row-classify">
            <div class="sub-label">
              <span class="bqfl-iconfont icon-tags"></span>
              <span class="sub-label-txt">产品标签</span>
            </div>
            <div id="classify-tag" class="classify-items classify-tag">
              <div class="up-off" @click="isOff = !isOff" v-if="isShowUpOff">{{ isOff ? '全部展开' : '收起' }}</div>
              <div id="tags-box" class="tags-box" :class="{ 'up-off-tags': isOff }" v-if="categoryTagList && categoryTagList.length > 0">
                <div class="item" :class="{ 'active-item': categoryTagID == item.id }" v-for="item in categoryTagList" :key="item.id" @click="handleCategory(item, 'CategoryTag')">
                  {{ item.name }}
                </div>
              </div>
              <template v-else> 暂无产品标签数据 </template>
            </div>
          </div>
        </div>
        <div class="bulletin-main">
          <div class="sub wow fadeInLeft">
            <span class="bqfl-iconfont icon-zhinengjianbao mr10"></span>
            <span>{{ routeTitle }}</span>
          </div>
          <div class="main-body">
            <div class="left wow fadeInLeft" data-wow-duration="3s" data-wow-delay="0s" data-wow-offset="0">
              <div class="list" v-if="pageData.count">
                <ul class="items">
                  <li class="item" v-for="item in pageData.list" :key="item.id">
                    <div class="img">
                      <img :src="BaseUrl + '/fileupload/' + item.filePath + item.imageFileName" style="object-fit:contain;" />
                    </div>
                    <div class="report-info">
                      <a :href="`/bulletin/bulletin-detail/${item.webTitle}-${item.id}`">
                        <h2 class="report-title">{{ item.title }}</h2>
                      </a>
                      <!-- <div class="report-title" @click="toDetail(item)">
                        {{ item.title }}
                      </div> -->
                      <p class="report-des">{{ item.outline }}</p>
                      <div class="tags">
                        <span class="tag" v-for="(tag, t) in item.secondLabelName.split(',')" :key="t">{{ tag }}</span>
                      </div>
                      <p>
                        <span class="publisth-time">{{ formatDate(item.publishDate) }}</span> 页数：{{ item.pdfNum || 0 }}
                      </p>
                    </div>
                  </li>
                </ul>
                <div class="pagination">
                  <n-pagination :page="params?.pageNo" :page-count="pageData?.count" :page-size="params?.pageSize" size="large" :on-update-page="changePage" :page-slot="7" />
                </div>
              </div>
              <div class="empty" v-else>
                <n-empty description="暂无数据" size="huge"> </n-empty>
              </div>
            </div>
            <div class="right wow fadeInRight" data-wow-duration="3s" data-wow-delay="0s" data-wow-offset="0">
              <div class="winnow">
                <h3>精选简报</h3>
                <ul v-if="winnowList && winnowList.length > 0">
                  <li v-for="item in winnowList" :key="item.id">
                    <div class="img">
                      <img :src="BaseUrl + '/fileupload/' + item.filePath + item.imageFileName" />
                    </div>
                    <a :href="`/bulletin/bulletin-detail/${item.webTitle}-${item.id}`">
                      <h4 class="report-title">{{ item.title }}</h4>
                    </a>
                    <!-- <p @click="toDetail(item)">{{ item.title }}</p> -->
                  </li>
                </ul>
                <div class="empty" v-else>
                  <n-empty description="暂无数据" size="huge"> </n-empty>
                </div>
              </div>
              <div class="hots">
                <h3>热门报告</h3>
                <ul v-if="hotsList && hotsList.length > 0">
                  <li v-for="item in hotsList" :key="item.id">
                    <div class="img">
                      <img :src="BaseUrl + '/report/' + item.fileName" />
                    </div>
                    <div>
                      <a :href="`/reports/${item.webTitle}-${item.id}`">
                        <h4>{{ item.title }}</h4>
                      </a>
                      <!-- <p @click="toDetail(item)">{{ item.title }}</p> -->
                      <span class="tags" v-if="item.secondLabelName">
                        <span class="tag">{{ item.secondLabelName.split(',')[0] }}</span>
                      </span>
                    </div>
                  </li>
                </ul>
                <div class="empty" v-else>
                  <n-empty description="暂无数据" size="huge"> </n-empty>
                </div>
              </div>
              <div class="service">
                <h3>咨询服务</h3>
                <ul>
                  <li v-for="item in serviceList" :key="item.id + item.icon" @click="jump(item)">
                    <div class="img">
                      <span class="bqfl-iconfont service-icon-img color18A058" :class="item.icon"></span>
                    </div>
                    <div>{{ item.label }}</div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <n-spin class="load" description="数据加载中" :show="spinShow" :delay="1000">
      <div style="width: 150px"></div>
    </n-spin>
  </div>
</template>

<script lang="ts" setup>
import {
  ref,
  reactive,
  onMounted,
  watch,
  onServerPrefetch,
  nextTick,
} from "vue";
// import {
//   NIcon,
//   NBreadcrumb,
//   NBreadcrumbItem,
//   NButton,
//   NInput,
//   NPagination,
//   NEmpty,
//   NSpin,
// } from "naive-ui";
import { IosFiling, MdHome } from "@vicons/ionicons4";
import { useRouter, useRoute } from "vue-router";
import { useI18n } from "#imports";
const router = useRouter(); // 传递参数
const route = useRoute(); // 接收参数
const routeTitle = ref<string>("行业简报");
const pcShow = ref<boolean>(true);
const config = useRuntimeConfig();
const BaseUrl = ref(config.public.baseUrl);
const pageSize = 10;
const { t } = useI18n();
const params = reactive({
  pageSize: pageSize,
  pageNo: 1,
  marketType: "",
  title: "",
  topLabelId: "",
  secondLabelId: "",
});
const initialize = ref([
  {
    id: "",
    name: "全部",
  },
]);
const allClassfiy = ref([]);
const categoryList = ref([]);
const categoryTagList = ref([]);
const pageData = ref({});
const hotsList = ref([]);
const winnowList = ref([]);
const categoryID = ref("");
const categoryTagID = ref("");
const spinShow = ref(false);
const serviceList = [
  {
    label: "研究报告",
    icon: "icon-iconyanjiubaogao01",
    id: 0,
    path: "contactUsIndex",
  },
  {
    label: "商业计划书",
    icon: "icon-shangyeqihuashu",
    id: 1,
    path: "contactUsIndex",
  },
  {
    label: "可研报告",
    icon: "icon-yanjiubaogao",
    id: 2,
    path: "contactUsIndex",
  },
  {
    label: "定制服务",
    icon: "icon-dingzhifuwu",
    id: 3,
    path: "contactUsIndex",
  },
  {
    label: "市场调查",
    icon: "icon-shichangtiaochabiao",
    id: 4,
    path: "contactUsIndex",
  },
  {
    label: "IPO咨询",
    icon: "icon-IPO",
    id: 5,
    path: "contactUsIndex",
  },
];
const isOff = ref(false);
const upOffHeight = ref(16 * 2 * 5);
const isShowUpOff = ref(false);

watch(
  () => [
    route.params.marketType,
    route.params.categoryID,
    route.params.categoryTagID,
    route.params.title,
  ],
  async (
    [newval, newCategoryID, newCategoryTagID, newTitle],
    [oldval, oldCategoryID, oldCategoryTagID, oldTitle]
  ) => {
    params.marketType = newval;
    params.title = newTitle;
    params.topLabelId = "";
    categoryID.value = "";
    params.secondLabelId = "";
    categoryTagID.value = "";
    getTitle(newval);
    getHots(newval);
    getWinnow(newval);
    // 列表
    getList();
    await getCategory(newval);
    if (categoryID.value) {
      getCategoryTags(categoryID.value);
    } else {
      getAllClassfiy(newval);
    }
  }
);

watch(
  () => categoryTagList.value,
  (val) => {
    if (val && val.length > 0) {
      nextTick(() => {
        const tagsLabel = document.getElementById("tags-box");
        if (tagsLabel) {
          if (tagsLabel.clientHeight > upOffHeight.value) {
            isShowUpOff.value = true;
            isOff.value = true;
          } else {
            isShowUpOff.value = false;
            isOff.value = false;
          }
        } else {
          isShowUpOff.value = false;
          isOff.value = false;
        }
      });
    } else {
      isShowUpOff.value = false;
      isOff.value = false;
    }
  }
);

// watch(
//   () => categoryID,
//   (val) => {
//     if (!val)
//       categoryTagList.value = [...initialize.value, ...allClassfiy.value];
//   }
// );

const getAllClassfiy = async (marketType: string) => {
  const { code, data } = await allClassfiy_Api({
    marketType: marketType,
  });
  if (code === 200) {
    allClassfiy.value = data || [];
    categoryTagList.value = [...initialize.value, ...allClassfiy.value];
  } else {
    allClassfiy.value = [];
  }
};

const getTitle = (marketType: string) => {
  let title = "";
  switch (marketType) {
    case "industry-brief":
      title = "行业简报";
      break;
    case "enterprise-hole-analysis":
      title = "企业洞察";
      break;
    default:
      title = "行业简报";
      break;
  }
  routeTitle.value = title;
};

const getCategory = async (marketType: string) => {
  const { code, data } = await bulletinCategory_Api({
    marketType: marketType,
  });
  if (code === 200) {
    categoryList.value = [...initialize.value, ...data];
    categoryTagList.value = [...initialize.value, ...allClassfiy.value];
  }
};

const getHots = async () => {
  const data = await hotResearchList({
    lang: "zh-CN",
  });
  hotsList.value = data || [];
};

const getWinnow = async (marketType: string | any) => {
  const { code, data } = await bulletinWinnow_Api({
    marketType: marketType,
  });
  if (code === 200) {
    winnowList.value = data;
  }
};

const handleCategory = (item: object, type: string) => {
  const id = item.id;
  if (type == "Category") {
    if (categoryID.value == id) {
      return false;
    }
    categoryID.value = id;
    params.topLabelId = id;
    categoryTagID.value = "";
    params.secondLabelId = "";
    params.pageNo = 1;
    if (id) getCategoryTags(id);
    if (!id) getAllClassfiy(params.marketType);

    // router.push({
    //   name: "bulletinThinkTank",
    //   params: {
    //     marketType: params.marketType,
    //     categoryID: id,
    //   },
    // });
  } else {
    if (categoryTagID.value == id) {
      return false;
    }
    params.pageNo = 1;
    categoryTagID.value = id;
    params.secondLabelId = id;
    // router.push({
    //   name: "bulletinThinkTank",
    //   params: {
    //     marketType: params.marketType,
    //     categoryID: categoryID.value || "all",
    //   },
    // });
  }
  getList();
};

const getCategoryTags = async (parentId: string | any) => {
  categoryTagList.value = [...initialize.value];
  const { code, data } = await bulletinCategory_Api({
    parentId: parentId,
    marketType: params.marketType,
  });
  if (code === 200) {
    categoryTagList.value = [...categoryTagList.value, ...data];
  }
};

const getList = async () => {
  spinShow.value = true;
  const { code, data } = await bulletinPage_Api(params);
  if (code === 200) {
    pageData.value = data;
  }
  // setTimeout(() => {
  spinShow.value = false;
  // }, 500);
};

// 改变页数
const changePage = (page: number) => {
  document.documentElement.scrollTop = 0;
  params.pageNo = page;
  getList();
};

const toDetail = (item: object) => {
  router.push({
    name: "bulletinDetail",
    params: {
      id: item.id,
    },
  });
};

const jump = (item) => {
  router.push({
    name: item.path,
  });
};

// onServerPrefetch(async () => {
//   try {
//     params.title = route.params?.title || "";
//     params.marketType = route.params?.marketType || "industry-brief";
//     params.topLabelId = "";
//     categoryID.value = "";
//     params.secondLabelId = "";
//     categoryTagID.value = "";
//     getTitle(params.marketType);
//     const res = await hotResearchList({
//       lang: "zh-CN",
//     });
//     hotsList.value = res.data || [];
//     const res1 = await bulletinWinnow_Api({
//       marketType: params.marketType,
//     });
//     if (res1.code === 200) {
//       winnowList.value = res1.data;
//     }
//     spinShow.value = true;
//     const res2 = await bulletinPage_Api(params);
//     if (res2.code === 200) {
//       pageData.value = res2.data;
//     }
//     await getCategory(params.marketType);
//     if (categoryID.value) {
//       getCategoryTags(categoryID.value);
//     } else {
//       getAllClassfiy(params.marketType);
//     }
//     spinShow.value = false;
//   } catch (error) {
//     console.log("error===>", error);
//   }
// });
onMounted(async () => {
  pcShow.value = !isMobile();
});
const marketType = route.params?.marketType || "industry-brief";
const keyword = route.params?.title || "";
params.title = keyword;
params.marketType = marketType;
categoryID.value = "";
params.topLabelId = categoryID.value;
categoryTagID.value = "";
params.secondLabelId = "";
getTitle(marketType);
getHots();
getWinnow(marketType);
// 列表
getList();
getCategory(marketType);
if (categoryID.value) {
  getCategoryTags(categoryID.value);
} else {
  getAllClassfiy(marketType);
}
useHead({
  title: t("common.navigate.bulletin") + "-" + 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>
.page {
  .search {
    width: 100%;
    height: 152px;
    overflow: hidden;
    background: url("@/assets/images/bulletin-search-bg.png") no-repeat;
    background-size: 100% 100%;

    .search-box {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
    }

    :deep(.n-input) {
      // width: 60%;
      width: 57.6875rem;
      height: 60px;
      border-radius: 8px 0 0 8px;

      .n-input__input-el {
        height: 100%;
      }
    }

    .btn {
      width: 80px;
      height: 60px;
      border-radius: 0 8px 8px 0;
    }
  }

  .bulletin {
    // padding: 50px 200px 0;
    background-color: #fff;

    .container {
      padding-top: 50px;
    }

    .classify {
      margin-bottom: 20px;

      .row-classify {
        display: flex;
        border: 1px solid #f2f2f2;

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

        .sub-label {
          display: flex;
          justify-content: center;
          align-items: center;
          text-align: center;
          font-size: 18px;
          width: 120px;
          // padding: 20px;
          font-weight: bold;
          color: #1a1a1a;
          background: #f3f8ff;
          flex-shrink: 0;

          .icon-tags {
            transform: rotateY(180deg);
          }

          .sub-label-txt {
            margin-left: 10px;
          }
        }

        .classify-items {
          // flex-wrap: wrap;
          padding: 20px;
          font-size: 16px;
          color: #666666;
          line-height: 2;

          .item {
            display: inline-block;
            margin-right: 20px;
            cursor: pointer;
          }

          .active-item {
            color: #18a058;
            font-weight: bold;
          }
        }

        .classify-tag {
          position: relative;
          width: 100%;
          .up-off {
            position: absolute;
            right: 10px;
            bottom: 0;
            color: #18a058;
            cursor: pointer;
          }

          .tags-box {
            width: 100%;
            height: auto;
          }

          .up-off-tags {
            height: calc(16px * 2 * 5);
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 5;
            -webkit-box-orient: vertical;
            word-wrap: break-word;
            word-break: break-all;
            white-space: normal;
          }
        }
      }
    }

    ul {
      padding: 0;

      li {
        margin: 0;
        list-style: none;
        padding: 0;

        p {
          padding: 0;
          margin: 0;
        }

        .img {
          // width: 100%;
          // height: 100%;

          img {
            width: 100%;
            height: 100%;
            vertical-align: middle;
            // object-fit: cover;
            transition: all 0.4s ease;
          }
        }
      }
    }

    .bulletin-main {
      .sub {
        padding: 9px 0;
        font-size: 24px;
        color: #1a1a1a;
      }

      .main-body {
        display: flex;
        justify-content: space-between;

        .left {
          // flex: 1;
          width: 63%;
          // margin-right: 60px;
          // width: 62.875rem;
          // margin-right: 3.75rem;
          border-top: 2px solid #18a058;

          .list {
            width: 100%;

            .items {
              width: 100%;

              .item {
                display: flex;
                padding: 30px 0;
                width: 100%;
                border-bottom: 1px solid #cccccc;

                .img {
                  width: 155px;
                  max-width: 155px;
                  max-height: 190px;
                  margin-right: 25px;
                  background: rgba(0, 0, 0, 0);
                  flex-shrink: 0;
                  // overflow: hidden;

                  img {
                    box-shadow: 5px 2px 12px 0px #94bed9;
                  }
                }

                .report-info {
                  flex: 1;
                  width: 0;
                }

                .report-title {
                  margin-top: 0;
                  margin-bottom: 24px;
                  font-size: 22px;
                  color: #1a1a1a;
                  line-height: 32px;
                  cursor: pointer;
                }

                .report-des {
                  padding: 0;
                  margin: 0;
                  margin-bottom: 15px;
                  font-size: 14px;
                  color: #808080;
                  line-height: 26px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-line-clamp: 3;
                  -webkit-box-orient: vertical;
                }

                .tags {
                  margin-bottom: 10px;

                  .tag {
                    display: inline-block;
                    padding: 5px 17px 3px;
                    text-align: center;
                    margin-right: 10px;
                    margin-bottom: 5px;
                    background: #cbffe3;
                    font-size: 12px;
                    color: #18a058;

                    &:last-child {
                      margin-bottom: 0;
                    }
                  }
                }

                .publisth-time {
                  margin-right: 10px;
                }
              }
            }
          }
        }

        .right {
          // flex: 1;
          // width: 29.625rem;
          width: 33%;

          & > div {
            margin-bottom: 30px;
            padding: 0 30px;
            border: 1px solid #e6e6e6;
            border-top-color: #18a058;
            border-top-width: 2px;

            h3 {
              margin: 0;
              padding: 15px 0 20px;
              font-size: 24px;
              color: #1a1a1a;
              font-weight: normal;
            }
          }

          .winnow {
            ul {
              display: flex;
              flex-wrap: wrap;

              li {
                width: calc((100% - 24px) / 2);
                // width: calc((100% - 24px) / 2);
                margin-right: 24px;
                margin-bottom: 25px;

                &:nth-child(2n) {
                  margin-right: 0;
                }

                .img {
                  width: 100%;
                  height: 235px;
                  margin-bottom: 8px;

                  img {
                    object-fit: contain;
                  }
                }

                h4 {
                  padding: 0;
                  margin: 0;
                  font-weight: normal;
                  font-size: 18px;
                  color: #1a1a1a;
                  line-height: 25px;
                  cursor: pointer;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-line-clamp: 3;
                  -webkit-box-orient: vertical;
                }
              }
            }
          }

          .hots {
            ul {
              li {
                display: flex;
                padding: 20px 0;
                border-bottom: 1px solid #e6e6e6;

                &:first-child {
                  padding-top: 0;
                }

                &:last-child {
                  border: none;
                }

                .img {
                  width: 92px;
                  max-width: 92px;
                  max-height: 92px;
                  margin-right: 20px;
                  flex-shrink: 0;
                }

                h4 {
                  padding: 0;
                  margin: 0;
                  margin-bottom: 20px;
                  font-size: 18px;
                  color: #1a1a1a;
                  line-height: 25px;
                  font-weight: normal;
                  cursor: pointer;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-line-clamp: 2;
                  -webkit-box-orient: vertical;
                }

                .tags {
                  .tag {
                    display: inline-block;
                    font-size: 12px;
                    padding: 5px 19px 3px;
                    margin-right: 5px;
                    margin-bottom: 5px;
                    background: #cbffe3;

                    &:last-child {
                      margin-bottom: 0;
                    }
                  }
                }
              }
            }
          }

          .service {
            padding-bottom: 30px;

            ul {
              display: flex;
              flex-wrap: wrap;

              li {
                width: 50%;
                padding: 35px 0 25px;
                text-align: center;
                border: 1px solid #e6e6e6;
                border-top: none;
                border-left: none;
                cursor: pointer;

                &:nth-child(2n) {
                  position: relative;
                  border-right: none;

                  &::after {
                    position: absolute;
                    left: -10px;
                    bottom: -10px;
                    content: "";
                    width: 20px;
                    height: 20px;
                    background-color: #fff;
                  }
                }

                &:nth-child(5),
                &:nth-child(6) {
                  border-bottom: none;
                }

                .img {
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  width: 93px;
                  height: 93px;
                  margin: 0 auto 10px;
                  background: #e2ffef;
                  border-radius: 50%;
                  overflow: hidden;

                  .service-icon-img {
                    font-size: 40px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
  }

  .empty {
    padding: 50px 0;
  }

  .mobile-search {
    width: 100%;
    height: 100px;

    :deep(.n-input) {
      height: 40px;
    }

    .btn {
      width: 50px;
      height: 40px;
    }
  }

  .mobile-body {
    .container {
      padding: 30px 0;
    }

    .classify {
      margin-bottom: 20px;

      .row-classify {
        .sub-label {
          font-size: 14px;
          padding: 10px;

          .icon-hangyefenlei {
            font-size: 15px;
          }
        }

        .classify-items {
          padding: 20px 10px;
          font-size: 12px;

          .item {
            margin-right: 10px;
          }
        }
      }
    }

    .bulletin-main {
      .sub {
        font-size: 18px;
      }

      .main-body {
        flex-wrap: wrap;

        .left {
          width: 100%;
          margin-right: 0;

          .list > .items > .item {
            padding: 15px 0;

            .img {
              max-width: 100px;
              max-height: 125px;
              margin-right: 15px;
            }

            .report-title {
              margin-bottom: 10px;
              font-size: 18px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            .report-des {
              margin-bottom: 5px;
              font-size: 12px;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 3;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }

        .right {
          width: 100%;

          & > div {
            margin-bottom: 15px;
            padding: 0 15px;

            h3 {
              font-size: 18px;
            }
          }

          .winnow {
            ul li {
              width: calc((100% - 10px) / 2);
              margin-right: 10px;
              margin-bottom: 10px;

              p {
                font-size: 14px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;
                overflow: hidden;
                text-overflow: ellipsis;
              }
            }
          }

          .hots {
            ul li {
              .img {
                margin-right: 10px;
              }

              p {
                margin-bottom: 10px;
                font-size: 14px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;
                overflow: hidden;
                text-overflow: ellipsis;
              }
            }
          }
        }
      }
    }
  }
}

.load {
  :deep(.n-spin-body) {
    left: auto;
  }
}
</style>