feat: blog页面完成+研究pdf

components/common/block/faq.vue

@@ -129,7 +129,7 @@ const activeName = ref()
   </div>
 </template>
 
-<style lang="less">
+<style lang="less" scoped>
 .custom-collapse {
   .el-collapse {
     .el-collapse-item {

pages/blog/index.vue

@@ -1,11 +1,62 @@
 <script lang='ts' setup>
+import { submitSubscribeApi } from '~/api/model/common'
+
+const form = ref<any>({
+  mail: '',
+})
+async function submitSubscribe() {
+  try {
+    await submitSubscribeApi(form.value)
+    ElMessage.success(`You've subscribed successfully.`)
+    form.value.mail = ''
+  }
+  catch (error) {
+    console.log(error)
+  }
+}
+const validateEmail = computed(() => {
+  const emailReg = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/
+  if (!form.value.mail)
+    return true
+  return emailReg.test(form.value.mail)
+})
 </script>
 
 <template>
   <div>
-    solutions
+    <div class="pt-184px pb-50px bg-#F3F4FB text-center">
+      <h2 class="text-60px fw-800 ls-2 text-#333 inline-block pos-relative">
+        EJET Spark  <span class="custom-title-bg">Blog</span>
+        <img src="@/assets/images/blog_icon05.png" class="w-90px h-90px pos-absolute top--10px left--120px" alt="" srcset="">
+        <img src="@/assets/images/blog_icon06.png" class="w-70px h-70px pos-absolute top--20px right--100px" alt="" srcset="">
+      </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">
+          Subscribe
+        </el-button>
+      </div>
+    </div>
+    <AppFooter />
   </div>
 </template>
 
 <style lang='less' scoped>
+.custom-title-bg{
+  position: relative;
+  display: inline-block;
+  background: url(~/assets/images/title_bg03.png);
+  background-repeat: no-repeat;
+  background-position: 88% 150%;
+  background-size: 94% auto;
+}
+::v-deep(.custom-input){
+  .el-input__wrapper{
+    border-radius:4px!important;
+    padding: 7px 10px!important;
+    color: #999;
+    font-size: 16px;
+    box-shadow: unset!important;
+  }
+}
 </style>

pages/categories/[slug].vue

@@ -50,7 +50,7 @@ const list = [
       </div>
     </div>
     <common-block-catalogs />
-    <common-block-blog class="!pb-0"/>
+    <common-block-blog class="!pb-0" />
     <AppFooter />
   </div>
 </template>
@@ -59,4 +59,12 @@ const list = [
 .header{
   background-position: 50% 75%;
 }
+.custom-title-bg{
+  position: relative;
+  display: inline-block;
+  background: url(~/assets/images/title_bg04.png);
+  background-repeat: no-repeat;
+  background-position: 88% 150%;
+  background-size: 94% auto;
+}
 </style>