feat: init

src/views/list/card/components/the-service.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="list-wrap">
+    <a-typography-title class="block-title" :heading="6">
+      {{ $t('cardList.tab.title.service') }}
+    </a-typography-title>
+    <a-row class="list-row" :gutter="24">
+      <a-col
+        v-for="item in renderData"
+        :key="item.id"
+        :xs="12"
+        :sm="12"
+        :md="12"
+        :lg="6"
+        :xl="6"
+        :xxl="6"
+        class="list-col"
+        style="min-height: 162px"
+      >
+        <CardWrap
+          :loading="loading"
+          :title="item.title"
+          :description="item.description"
+          :default-value="item.enable"
+          :action-type="item.actionType"
+          :expires="item.expires"
+          :open-txt="$t('cardList.service.open')"
+          :close-txt="$t('cardList.service.cancel')"
+          :expires-text="$t('cardList.service.renew')"
+          :tag-text="$t('cardList.service.tag')"
+          :expires-tag-text="$t('cardList.service.expiresTag')"
+          :icon="item.icon"
+        >
+          <template #skeleton>
+            <a-skeleton :animation="true">
+              <a-skeleton-line :widths="['100%', '40%', '100%']" :rows="3" />
+              <a-skeleton-line :widths="['40%']" :rows="1" />
+            </a-skeleton>
+          </template>
+        </CardWrap>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { queryTheServiceList, ServiceRecord } from '@/api/list'
+import useRequest from '@/hooks/request'
+import CardWrap from './card-wrap.vue'
+
+const defaultValue: ServiceRecord[] = new Array(4).fill({})
+const { loading, response: renderData } = useRequest<ServiceRecord[]>(queryTheServiceList, defaultValue)
+</script>
+
+<style scoped lang="less"></style>