web/pages/news-categories/detail.vue

<template>
  <div class="page" id="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>Industry News</span></div>
    </div>
    <div class="content">
      <div class="content_title">{{ vo?.title }}</div>
      <div class="content_deta">
        <span class="iconfont icon-normal"></span>
        {{formatDateEn(vo?.publishDate)}}
      </div>
      <div class="newsdt-text">
        <div v-html="vo?.context"></div>
      </div>
      <div class="content_btn" @click="router.go(-1)">
        Return to List
      </div>
      <div class="content_list">
        <div class="content_list_item" @click="handleSwt(last)" v-if="last?.title">
          Previous Article ：
          <a>{{last?.title}}</a>
        </div>
        <div class="content_list_item" @click="handleSwt(next)" v-if="next?.title">
          Next Article ：
          <a>{{next?.title}}</a>
        </div>
      </div>
    </div>
    <!-- <div class="load">
      <n-spin size="large">
        <template #description>{{ t('report.content.loading') }}</template>
      </n-spin>
    </div> -->
  </div>
</template>

<script lang="ts" setup>
import { IosFiling, MdTime } from "@vicons/ionicons4";
import { NIcon, NSpin } from "naive-ui";
import { ref, watch, onMounted, onServerPrefetch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useI18n } from "#imports";
import { useUserStore } from "@/store/user";
const userStore = useUserStore();
const lang = userStore.getLang;

const route = useRoute();
const router = useRouter();
const vo = ref<MarketInfo>(),
  last = ref<MarketInfo>(),
  next = ref<MarketInfo>();
//const id = ref();
const spinShow = ref("none");
const { t } = useI18n();

// watch(() => route.params.webTitle, (newValue, oldValue) => {
//     const wts = newValue.split('-');
//     getDetail(wts[wts.length - 1]);
// });

// onMounted(() => {
//   const webTitle = route.params.webTitle;
//   const wts = webTitle.split("-");

//   getDetail(wts[wts.length - 1]);
// });

async function getDetail(id: any) {
  spinShow.value = "block";
  const ret = await marketInfoDetailList({ id: id, lang: lang });
  if (Object.keys(ret).length != 0) {
    setTimeout(() => {
      vo.value = ret.vo;
      last.value = ret.last;
      next.value = ret.next;
      spinShow.value = "none";
    }, 200);
  } else {
    spinShow.value = "none";
    //router.push({name: 'news'});
  }
}

// 上下页切换
function handleSwt(item: MarketInfo) {
  router.push({
    name: "newsDetail",
    params: { webTitle: item.webTitle + "-" + item.id },
  });
}

// onServerPrefetch(async () => {
try {
  const webTitle = route.params.webTitle;
  const wts = webTitle.split("-");

  const ret = await marketInfoDetailList({
    id: wts[wts.length - 1],
    lang: lang,
  });
  if (Object.keys(ret).length != 0) {
    vo.value = ret.vo;
    last.value = ret.last;
    next.value = ret.next;
  }
} catch (error) {
  console.log(error);
}
useHead({
  title: 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";
.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-50) var(--size-195);
    .content_title {
      font-size: var(--size-38);
      font-family: Arial, Arial-Bold;
      font-weight: 700;
      text-align: center;
      color: #1a1a1a;
      line-height: var(--size-59);
    }
    .content_deta {
      font-size: var(--size-18);
      font-family: Arial, Arial-Regular;
      font-weight: 400;
      text-align: center;
      color: #999999;
      line-height: var(--size-44);
      border-bottom: 1px solid #d9d9d9;
      padding-bottom: var(--size-20);
      span {
        font-size: var(--size-18);
        display: inline-block;
        margin-right: var(--size-2);
      }
    }
    .newsdt-text {
      padding: var(--size-40) 0;
    }
    .content_btn {
      font-size: var(--size-18);
      font-family: MicrosoftYaHei;
      text-align: center;
      color: #ffffff;
      line-height: var(--size-63);
      width: var(--size-227);
      height: var(--size-63);
      background: linear-gradient(90deg, #7b9c4f 0%, #549f76 70%, #2da19d 100%);
      border-radius: var(--size-8);
      margin: auto;
      cursor: pointer;
    }
    .content_list {
      margin-top: var(--size-55);
      > div {
        font-size: var(--size-18);
        font-family: Arial, Arial-Regular;
        color: #1a1a1a;
        line-height: var(--size-44);
        a {
          color: #808080;
          cursor: pointer;
        }
        &:hover {
          font-weight: 700;
          color: #639e57;
          a {
            color: #639e57;
          }
        }
      }
    }
  }
}
.load {
  display: v-bind("spinShow");
}
@include responseTo("phone") {
  .page {
    .location {
      padding: 0;
      .location_l {
        margin-right: var(--size-15);
      }
    }
    .content {
      padding: var(--size-15);
      .content_title {
        font-size: var(--size-16);
        font-weight: 700;
        line-height: var(--size-26);
      }
      .content_deta {
        font-size: var(--size-14);
        padding-bottom: var(--size-10);
        span {
          font-size: var(--size-16);
        }
      }
      .newsdt-text {
        padding: 0 0 var(--size-40);
        :deep(img) {
          max-width: 100%;
        }
      }
      .content_list {
        margin-top: var(--size-25);
        > div {
          font-size: var(--size-16);
          line-height: var(--size-28);
          a {
            font-size: var(--size-16);
          }
          &:hover {
            font-weight: 700;
            color: #639e57;
            a {
              color: #639e57;
            }
          }
        }
      }
      .content_btn {
        width: var(--size-108);
        height: var(--size-34);
        font-size: var(--size-14);
        line-height: var(--size-32);
      }
    }
  }
}
</style>
<style lang="scss">
.newsdt-text {
  ul,
  li {
    list-style: disc;
  }
}
</style>