feat: 移动端标讯详情页遮罩组件添加

apps/mobile/src/utils/utils.js

@@ -837,3 +837,8 @@ export function fixH5BackRefresh() {
     iosBackRefresh()
   }
 }
+
+// vite动态获取图片
+export function getAssetsFile(url) {
+  return new URL(`../assets/image/${url}`, import.meta.url).href
+}

apps/mobile/src/views/article/ui/MaskCard.vue

@@ -1,35 +1,78 @@
 <template>
-  <ContentModuleCard class="mask-card bg-white">
-    <div class="header-title" slot="title">
-      <AppIcon name="arrow" />
-      <span class="header-title-text"></span>
+  <section class="mask-card-container bg-white">
+    <div
+      class="mask-card-bg flex flex-(items-center justify-center)"
+      :style="bgImageStyle"
+    >
+      <div class="mask-card-content">
+        <div
+          class="mask-content-header flex flex-(items-center justify-between)"
+        >
+          <h5 class="mask-content-title">{{ title }}</h5>
+          <span class="mask-content-actions">
+            <span class="mask-content-action">
+              <span>查看服务介绍</span>
+              <van-icon name="arrow" />
+            </span>
+          </span>
+        </div>
+        <div class="mask-content-main">
+          <div class="mask-content-example-image">
+            <img :src="exampleImageUrl" />
+          </div>
+        </div>
+        <div class="mask-content-footer">
+          <p class="mask-content-desc-text">{{ desc }}</p>
+          <div class="mask-content-footer-btn">
+            <van-button type="primary" class="mask-footer-btn" size="small">
+              {{ footerButtonText }}
+            </van-button>
+          </div>
+        </div>
+      </div>
     </div>
-    <div class="banner-center">
-      <div class="banner-center-title">数据导出</div>
-      <p class="banner-center-subtitle">
-        最近5年招标采购数据均可导出下载，如需更多年份和行业字段您可申请数据定制
-      </p>
-    </div>
-    <div class="banner-right">
-      <AppIcon name="arrow" />
-    </div>
-  </ContentModuleCard>
+  </section>
 </template>
 <script>
-import ContentModuleCard from '@/views/article/ui/ContentModuleCard.vue'
-import { AppIcon } from '@/ui'
+import { Icon, Button } from 'vant'
+import { getAssetsFile } from '@/utils'
+
 export default {
   name: 'MaskCard',
   components: {
-    ContentModuleCard,
-    AppIcon
+    [Icon.name]: Icon,
+    [Button.name]: Button
   },
   props: {
-    dataList: {
-      type: Array,
-      default() {
-        return []
+    title: {
+      type: String,
+      default: '大会员专家版权益'
+    },
+    bgImage: {
+      type: String,
+      default: 'mask/bg/customer-list-mask-bg@2x.png'
+    },
+    exampleImage: {
+      type: String,
+      default: 'mask/example/customer-list-example-img@2x.png'
+    },
+    desc: {
+      type: String,
+      default: '根据区域、业务范围、客户类型帮助企业快速找到目标地区潜在业务需求客户及联系方式。'
+    },
+    footerButtonText: {
+      type: String,
+      default: '免费体验'
+    }
+  },
+  computed: {
+    bgImageStyle() {
+      return {
+        backgroundImage: `url(${getAssetsFile(this.bgImage)})`
       }
+    },
+    exampleImageUrl() {
+      return `${getAssetsFile(this.exampleImage)}`
     }
   },
   data() {
@@ -40,4 +83,62 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.mask-card-bg {
+  padding: 45px 0;
+  background-size: 100% auto;
+}
+.mask-card-content {
+  padding: 16px;
+  width: 303px;
+  min-height: 371px;
+  font-size: 13px;
+  line-height: 20px;
+  background: transparent
+    url(@/assets/image/mask/bg/mask-content-wrapper-bg.png) no-repeat;
+  background-size: auto 100%;
+  background-position: top center;
+  border-radius: 8px;
+}
+.mask-content-header {
+  font-size: 13px;
+  line-height: 20px;
+  color: $gold_light;
+  h5 {
+    font-weight: 400;
+  }
+}
+
+.mask-content-example-image {
+  position: relative;
+  margin: 12px 0;
+  border-radius: 4px;
+  overflow: hidden;
+
+  &::after {
+    content: '示例';
+    position: absolute;
+    top: 0;
+    right: 0;
+    border-top-right-radius: 4px;
+    padding: 1px 8px;
+    font-size: 13px;
+    line-height: 20px;
+    color: $main;
+    background-color: $color_main_background;
+  }
+
+  img {
+    display: block;
+    width: 100%;
+  }
+}
+.mask-content-footer-btn {
+  margin-top: 12px;
+}
+.mask-footer-btn {
+  width: 100%;
+  height: 36px;
+  border-radius: 6px;
+}
+</style>

apps/mobile/src/views/article/ui/ServiceIntroCard.vue

@@ -2,7 +2,7 @@
   <section class="service-intro-card bg-white">
     <header
       v-if="showHeader"
-      class="service-intro-header bg-white flex flex-(item-center justify-between)"
+      class="service-intro-header bg-white flex flex-(items-center justify-between)"
     >
       <h5 class="service-intro-title">
         <slot name="title">{{ title }}</slot>

apps/mobile/src/views/article/ui/ServiceIntroMaskCard.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="service-intro-mask-card bg-white">
+    <div class="intro-mask-container">
+      <ServiceIntroCard class="content-card" showHeader />
+    </div>
+  </div>
+</template>
+<script>
+import ServiceIntroCard from '@/views/article/ui/ServiceIntroCard.vue'
+export default {
+  name: 'ServiceIntroMaskCard',
+  components: {
+    ServiceIntroCard
+  },
+  props: {
+    dataList: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  data() {
+    return {}
+  },
+  created() {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.intro-mask-container {
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  height: 282px;
+  background: #fff url(@/assets/image/mask/bg/service-intro-bg@2x.png) no-repeat;
+  background-size: contain;
+}
+.content-card {
+  width: 100%;
+}
+</style>