feat: 新增博客列表页，博客详情页

assets/style/common.less

@@ -119,7 +119,7 @@
 .el-pagination {
     .el-pager li.is-active {
         color: #fff !important;
-        background-color: #DB977B;
+        background-color: #9B6CFF;
         border-radius: 8px;
     }
 

components/common/block/blog.vue

@@ -33,9 +33,7 @@ getVideoOrBlogsList()
       </div>
       <div class=" grid grid-cols-3 gap-40px text-left">
         <div v-for="item, index in list" :key="index">
-          <NuxtLink to="/register">
-            <common-blog-item :item="item" />
-          </NuxtLink>
+          <common-blog-item :item="item" />
         </div>
       </div>
     </div>

pages/blog/[slug].vue

@@ -1,11 +1,208 @@
 <script lang='ts' setup>
+import { getBlogsDetailApi, getReleaseBlogApi } from '~/api/model/blogs'
+import { ConstKeys } from '~/enums/const-enums'
+
+const route = useRoute()
+const detail = ref<any>({})
+const tabValue = ref('blog')
+
+const options = ref([
+  {
+    label: 'Read Blog',
+    value: 'blog',
+  },
+  {
+    label: 'Preview Catalog',
+    value: 'catalog',
+  },
+])
+const relatedCatalog = ref<any>({
+  thumbnailUrl: 'https://picsum.photos/300/200',
+  contentTitle: 'EJET Spark Catalog Title',
+  contentSubhead: 'EJET Spark catalog description, spark the trend, ignate sales.',
+})
+const slug = route.params.slug
+// const { data, pending, error, refresh } = await useAsyncData(
+//   'blog-detail',
+//   () =>
+//     $fetch(`${ConstKeys.DOMAINPRO}/client/content/detail`, { params: { slug } }),
+// )
+// const seoData = data.value?.result
+// detail.value = seoData
+
+async function getVideoOrBlogsDetail() {
+  const res = await getBlogsDetailApi({
+    slug,
+  })
+  detail.value = res
+}
+getVideoOrBlogsDetail()
 </script>
 
 <template>
-  <div>
-    solutions
+  <div class="blog-detail">
+    <div class="bg-#F3F4FB ">
+      <div class="pt-175px pb-110px w-1200-auto flex px-60px">
+        <img :src="detail.thumbnailUrl" alt="" srcset="" class="w-410px h-256px b-rd-10px object-cover mr-40px">
+        <div class="flex-1 text-left">
+          <div class="b-rd-400px left-10px text-center w-138px h-32px lh-32px bg-#f9fafd text-#9B6CFF text-14px mb-20px">
+            {{ detail.category_dictText }}
+          </div>
+          <h1
+            class="!mb-20px fw-800 text-40px ls-2 text-#333 line-clamp-2 lh-50px"
+          >
+            <!-- {{ detail.contentTitle }} -->
+            EJET Spark Blog Title Trend Report about Catalog
+          </h1>
+          <div class="text-16px text-#999 lh-24px">
+            <!-- {{ detail.contentSubhead }} -->
+            EJET Spark description, spark the trend, ignate sales. EJET Spark catalog description, spark the trend, ignate sales. EJET Spark description, spark the trend, ignate sales. EJET Spark catalog description, spark the trend, ignate sales.
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="w-1200-auto flex pt-30px">
+      <div class="w-840px mr-60px">
+        <el-segmented v-model="tabValue" :options="options">
+          <template #default="scope">
+            <div>
+              <div>{{ scope.item.label }}</div>
+            </div>
+          </template>
+        </el-segmented>
+        <div v-show="tabValue === 'blog'" class="mt-30px content-detail custom-html" v-html="detail.content" />
+        <div v-show="tabValue === 'catalog'" class="mt-30px">
+          <iframe
+            src="http://47.99.151.233:9006/js/baozhen.pdf#view=FitH&toolbar=0&scrollbar=0&navpanes=0"
+            allowfullscreen
+            width="100%"
+            height="1000px"
+            style="border: none"
+          >
+            您的浏览器不支持iframe，请使用现代浏览器查看PDF。
+          </iframe>
+        </div>
+      </div>
+      <div class="flex-1">
+        <div class="pos-relative mb-40px">
+          <img :src="relatedCatalog.thumbnailUrl" alt="" srcset="" class="w-375px h-240px b-rd-10px object-cover">
+          <h4
+            class="!mb-15px !mt-30px fw-800 text-24px text-#333 line-clamp-2"
+          >
+            {{ relatedCatalog.contentTitle }}
+          </h4>
+          <div class="text-14px text-#999 lh-22px line-clamp-2 mb-20px">
+            {{ relatedCatalog.contentSubhead }}
+          </div>
+          <el-button class="!bg-#9B6CFF !text-#fff !b-#9B6CFF !b-rd-380px text-14px fw-bold !h-32px px-20px">
+            Download Catalog
+          </el-button>
+        </div>
+        <div class="px-40px pt-34px bg-#E7EAFF b-rd-10px text-center custom-main">
+          <div class="text-#333 fw-500">
+            Contact Us to Get
+          </div>
+          <div class="text-#333 fw-500 my-6px">
+            Exclusive Trending Products
+          </div>
+          <div class="text-#333 fw-500">
+            Solutions
+          </div>
+          <el-button class="mt-20px !bg-#fff !text-#9B6CFF !w-160px !h-40px !b-0px !b-rd-200px" round>
+            <nuxt-link :to="{ name: 'contact' }">
+              Contact Us
+            </nuxt-link>
+          </el-button>
+        </div>
+      </div>
+    </div>
+    <common-block-blog class="!pb-0" />
+    <AppFooter />
   </div>
 </template>
 
 <style lang='less' scoped>
+ .el-segmented  {
+  --el-segmented-item-selected-color: #fff;
+  --el-segmented-item-selected-bg-color: #9B6CFF;
+  --el-border-radius-base: 16px;
+  --el-segmented-bg-color: #F9FAFB;
+  --el-segmented-color: #333;
+  width: 100%;
+  height: 68px;
+  line-height: 68px;
+  border-radius: 300px!important;
+  overflow: hidden;
+  padding: 0;
+  ::v-deep .el-segmented__group {
+    .el-segmented__item-selected,.el-segmented__item{
+      border-radius: 300px!important;
+      overflow: hidden;
+    }
+  }
+}
+.blog-detail {
+  ::v-deep(.content-detail) {
+    font-family: sans-serif;
+    h2 {
+      font-size: 1.5em;
+      font-family: "CustomTitleFont";
+      margin-top: 1em !important;
+      margin-bottom: 1em !important;
+      font-weight: bold;
+    }
+    h3 {
+      display: block;
+      font-size: 1.17em;
+      margin-block-start: 1em;
+      margin-block-end: 1em;
+      margin-inline-start: 0px;
+      margin-inline-end: 0px;
+      margin-bottom: 1em !important;
+      font-weight: bold;
+      unicode-bidi: isolate;
+      font-family: "CustomTitleFont";
+    }
+    p {
+      display: block;
+      margin-block-start: 1em;
+      margin-block-end: 1em;
+      margin-inline-start: 0px;
+      margin-inline-end: 0px;
+      unicode-bidi: isolate;
+    }
+    ul {
+      display: block;
+      list-style-type: disc;
+      margin-block-start: 1em;
+      margin-block-end: 1em;
+      margin-inline-start: 0px;
+      margin-inline-end: 0px;
+      padding-inline-start: 40px;
+      unicode-bidi: isolate;
+      li {
+        display: list-item;
+        text-align: -webkit-match-parent;
+        unicode-bidi: isolate;
+      }
+    }
+    ol {
+      list-style-type: decimal;
+      display: block;
+      list-style-type: decimal;
+      margin-block-start: 1em;
+      margin-block-end: 1em;
+      margin-inline-start: 0px;
+      margin-inline-end: 0px;
+      padding-inline-start: 40px;
+      unicode-bidi: isolate;
+    }
+  }
+}
+.custom-main{
+  background: url('~/assets/images/swiper_bg.png') no-repeat center center;
+  background-size: cover;
+  width: 300px;
+  height: 190px;
+}
 </style>

pages/blog/index.vue

@@ -1,9 +1,51 @@
 <script lang='ts' setup>
 import { submitSubscribeApi } from '~/api/model/common'
+import { PageSizeEnum } from '~/enums/sizeEnum'
+import {
+  getBlogsListApi,
+} from '~/api/model/blogs'
 
+const list = ref<any>([])
+const currentPage = ref(PageSizeEnum.PAGE)
+const total = ref()
+const page_size = ref(9)
+const categories = ref(
+  [
+    {
+      key: '',
+      title: 'All',
+      slug: 'all',
+    },
+    {
+      key: 'instructions',
+      title: 'Security settings instructions',
+      slug: 'instructions',
+    },
+    {
+      key: 'settings',
+      title: 'Multiple account settings',
+      slug: 'settings',
+    },
+  ],
+)
+const category = ref('')
 const form = ref<any>({
   mail: '',
 })
+async function getVideoOrBlogsList(pageNo = currentPage.value, pageSize = page_size.value) {
+  const params = {
+    pageNo,
+    pageSize,
+    categoryId: category.value,
+    orderBy: 'createTime',
+    orderType: 'desc',
+  }
+  const res: any = await getBlogsListApi(params)
+  total.value = res.total
+  currentPage.value = res.current
+  list.value = res.records
+}
+getVideoOrBlogsList()
 async function submitSubscribe() {
   try {
     await submitSubscribeApi(form.value)
@@ -14,6 +56,14 @@ async function submitSubscribe() {
     console.log(error)
   }
 }
+function onSelectCategory(item: any) {
+  category.value = item.key
+  currentPage.value = PageSizeEnum.PAGE
+  getVideoOrBlogsList(currentPage.value, page_size.value)
+}
+function changePage(current: number, size: number) {
+  getVideoOrBlogsList(current, size)
+}
 const validateEmail = computed(() => {
   const emailReg = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/
   if (!form.value.mail)
@@ -32,10 +82,39 @@ const validateEmail = computed(() => {
       </h2>
       <div class="pos-relative w-500px mx-auto mb-60px mt-40px">
         <el-input v-model.trim="form.mail" class="custom-input h-46px !b-rd-200px overflow-hidden" placeholder="Please enter your email address" />
-        <el-button :disabled="!validateEmail || !form.mail" type="primary" class="!bg-#9B6CFF text-#fff pos-absolute !b-0px top-50% transform-translate-y--50% right-10px w-140px !text-16px !b-rd-150px" @click="submitSubscribe">
+        <el-button :disabled="!validateEmail || !form.mail" type="primary" class="!bg-#9B6CFF text-#fff pos-absolute !b-0px top-50% transform-translate-y--50% right-10px w-120px !text-16px !b-rd-150px" @click="submitSubscribe">
           Subscribe
         </el-button>
       </div>
+
+      <div class="flex gap-30px justify-center">
+        <div
+          v-for="(item, index) in categories"
+          :key="index"
+          class="h-60px lh-60px px-30px b-rd-200px text-16px cursor-pointer hover:bg-#EAE5FA hover:text-#9B6CFF transition-all duration-300"
+          :class="
+            category === item.key
+              ? '!bg-#EAE5FA !text-#9B6CFF'
+              : 'bg-#fff text-#333'
+          "
+          @click="onSelectCategory(item)"
+        >
+          {{ item.title }}
+        </div>
+      </div>
+    </div>
+    <div class="pt-120px w-1200-auto">
+      <div class="grid grid-cols-3 gap-col-40px gap-row-60px ">
+        <div v-for="item, index in list" :key="index">
+          <common-blog-item :item="item" />
+        </div>
+      </div>
+      <div class="mt-60px flex justify-center">
+        <el-pagination
+          v-model:current-page="currentPage" :page-size="page_size" :pager-count="10"
+          layout="prev, pager, next" :total="total" @change="changePage"
+        />
+      </div>
     </div>
     <AppFooter />
   </div>