af-mobile-client-vue3 1.1.15 → 1.1.16

package/src/components/data/XOlMap/utils/wgs84ToGcj02.js

@@ -1,154 +1,154 @@
-// 导入proj控件
-import * as proj from 'ol/proj'
-
-function forEachPoint(func) {
-  return function (input, opt_output, opt_dimension) {
-    const len = input.length
-
-    const dimension = opt_dimension || 2
-    let output
-
-    if (opt_output) {
-      output = opt_output
-    }
-    else {
-      if (dimension !== 2) {
-        output = input.slice()
-      }
-      else {
-        output = [len]
-      }
-    }
-    for (let offset = 0; offset < len; offset += dimension) {
-      func(input, output, offset)
-    }
-    return output
-  }
-}
-
-const gcj02 = {}
-const PI = Math.PI
-const AXIS = 6378245.0
-// eslint-disable-next-line no-loss-of-precision
-const OFFSET = 0.00669342162296594323 // (a^2 - b^2) / a^2
-
-function delta(wgLon, wgLat) {
-  let dLat = transformLat(wgLon - 105.0, wgLat - 35.0)
-  let dLon = transformLon(wgLon - 105.0, wgLat - 35.0)
-  const radLat = (wgLat / 180.0) * PI
-  let magic = Math.sin(radLat)
-  magic = 1 - OFFSET * magic * magic
-  const sqrtMagic = Math.sqrt(magic)
-  dLat = (dLat * 180.0) / (((AXIS * (1 - OFFSET)) / (magic * sqrtMagic)) * PI)
-  dLon = (dLon * 180.0) / ((AXIS / sqrtMagic) * Math.cos(radLat) * PI)
-  return [dLon, dLat]
-}
-
-function outOfChina(lon, lat) {
-  if (lon < 72.004 || lon > 137.8347) {
-    return true
-  }
-  return lat < 0.8293 || lat > 55.8271
-}
-
-function transformLat(x, y) {
-  let ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x))
-  ret += ((20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0) / 3.0
-  ret += ((20.0 * Math.sin(y * PI) + 40.0 * Math.sin((y / 3.0) * PI)) * 2.0) / 3.0
-  ret += ((160.0 * Math.sin((y / 12.0) * PI) + 320 * Math.sin((y * PI) / 30.0)) * 2.0) / 3.0
-  return ret
-}
-
-function transformLon(x, y) {
-  let ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x))
-  ret += ((20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0) / 3.0
-  ret += ((20.0 * Math.sin(x * PI) + 40.0 * Math.sin((x / 3.0) * PI)) * 2.0) / 3.0
-  ret += ((150.0 * Math.sin((x / 12.0) * PI) + 300.0 * Math.sin((x / 30.0) * PI)) * 2.0) / 3.0
-  return ret
-}
-
-gcj02.toWGS84 = forEachPoint((input, output, offset) => {
-  let lng = input[offset]
-  let lat = input[offset + 1]
-  if (!outOfChina(lng, lat)) {
-    const deltaD = delta(lng, lat)
-    lng = lng - deltaD[0] // 改回减法
-    lat = lat - deltaD[1] // 改回减法
-  }
-  output[offset] = lng
-  output[offset + 1] = lat
-})
-
-gcj02.fromWGS84 = forEachPoint((input, output, offset) => {
-  let lng = input[offset]
-  let lat = input[offset + 1]
-  if (!outOfChina(lng, lat)) {
-    const deltaD = delta(lng, lat)
-    lng = lng + deltaD[0] // 改回加法
-    lat = lat + deltaD[1] // 改回加法
-  }
-  output[offset] = lng
-  output[offset + 1] = lat
-})
-
-const sphericalMercator = {}
-const RADIUS = 6378137
-const MAX_LATITUDE = 85.0511287798
-const RAD_PER_DEG = Math.PI / 180
-
-sphericalMercator.forward = forEachPoint((input, output, offset) => {
-  const lat = Math.max(Math.min(MAX_LATITUDE, input[offset + 1]), -MAX_LATITUDE)
-  const sin = Math.sin(lat * RAD_PER_DEG)
-  output[offset] = RADIUS * input[offset] * RAD_PER_DEG
-  output[offset + 1] = (RADIUS * Math.log((1 + sin) / (1 - sin))) / 2
-})
-
-sphericalMercator.inverse = forEachPoint((input, output, offset) => {
-  output[offset] = input[offset] / RADIUS / RAD_PER_DEG
-  output[offset + 1] = (2 * Math.atan(Math.exp(input[offset + 1] / RADIUS)) - Math.PI / 2) / RAD_PER_DEG
-})
-
-const projzh = {}
-
-projzh.ll2gmerc = function (input, opt_output, opt_dimension) {
-  const output = gcj02.toWGS84(input, opt_output, opt_dimension) // 改用 toWGS84
-  return projzh.ll2smerc(output, output, opt_dimension)
-}
-
-projzh.gmerc2ll = function (input, opt_output, opt_dimension) {
-  const output = projzh.smerc2ll(input, input, opt_dimension)
-  return gcj02.fromWGS84(output, opt_output, opt_dimension) // 改用 fromWGS84
-}
-
-// smerc2gmerc 需要修改
-
-projzh.smerc2gmerc = function (input, opt_output, opt_dimension) {
-  let output = projzh.smerc2ll(input, input, opt_dimension)
-  output = gcj02.toWGS84(output, output, opt_dimension) // 这里应该用 toWGS84
-  return projzh.ll2smerc(output, output, opt_dimension)
-}
-
-// gmerc2smerc 需要修改
-
-projzh.gmerc2smerc = function (input, opt_output, opt_dimension) {
-  let output = projzh.smerc2ll(input, input, opt_dimension)
-  output = gcj02.fromWGS84(output, output, opt_dimension) // 这里应该用 fromWGS84
-  return projzh.ll2smerc(output, output, opt_dimension)
-}
-
-projzh.ll2smerc = sphericalMercator.forward
-projzh.smerc2ll = sphericalMercator.inverse
-
-// 定义WGS84转GCJ02的投影
-const extent = [-20037508.342789244, -20037508.342789244, 20037508.342789244, 20037508.342789244]
-export const wgs84ToGcj02Projection = new proj.Projection({
-  code: 'WGS84-TO-GCJ02',
-  extent,
-  units: 'm',
-})
-
-// 添加投影和转换方法
-proj.addProjection(wgs84ToGcj02Projection)
-// 注意这里转换方法的顺序与原来相反
-proj.addCoordinateTransforms('EPSG:4326', wgs84ToGcj02Projection, projzh.ll2gmerc, projzh.gmerc2ll)
-proj.addCoordinateTransforms('EPSG:3857', wgs84ToGcj02Projection, projzh.smerc2gmerc, projzh.gmerc2smerc)
+// 导入proj控件
+import * as proj from 'ol/proj'
+
+function forEachPoint(func) {
+  return function (input, opt_output, opt_dimension) {
+    const len = input.length
+
+    const dimension = opt_dimension || 2
+    let output
+
+    if (opt_output) {
+      output = opt_output
+    }
+    else {
+      if (dimension !== 2) {
+        output = input.slice()
+      }
+      else {
+        output = [len]
+      }
+    }
+    for (let offset = 0; offset < len; offset += dimension) {
+      func(input, output, offset)
+    }
+    return output
+  }
+}
+
+const gcj02 = {}
+const PI = Math.PI
+const AXIS = 6378245.0
+// eslint-disable-next-line no-loss-of-precision
+const OFFSET = 0.00669342162296594323 // (a^2 - b^2) / a^2
+
+function delta(wgLon, wgLat) {
+  let dLat = transformLat(wgLon - 105.0, wgLat - 35.0)
+  let dLon = transformLon(wgLon - 105.0, wgLat - 35.0)
+  const radLat = (wgLat / 180.0) * PI
+  let magic = Math.sin(radLat)
+  magic = 1 - OFFSET * magic * magic
+  const sqrtMagic = Math.sqrt(magic)
+  dLat = (dLat * 180.0) / (((AXIS * (1 - OFFSET)) / (magic * sqrtMagic)) * PI)
+  dLon = (dLon * 180.0) / ((AXIS / sqrtMagic) * Math.cos(radLat) * PI)
+  return [dLon, dLat]
+}
+
+function outOfChina(lon, lat) {
+  if (lon < 72.004 || lon > 137.8347) {
+    return true
+  }
+  return lat < 0.8293 || lat > 55.8271
+}
+
+function transformLat(x, y) {
+  let ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x))
+  ret += ((20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0) / 3.0
+  ret += ((20.0 * Math.sin(y * PI) + 40.0 * Math.sin((y / 3.0) * PI)) * 2.0) / 3.0
+  ret += ((160.0 * Math.sin((y / 12.0) * PI) + 320 * Math.sin((y * PI) / 30.0)) * 2.0) / 3.0
+  return ret
+}
+
+function transformLon(x, y) {
+  let ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x))
+  ret += ((20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0) / 3.0
+  ret += ((20.0 * Math.sin(x * PI) + 40.0 * Math.sin((x / 3.0) * PI)) * 2.0) / 3.0
+  ret += ((150.0 * Math.sin((x / 12.0) * PI) + 300.0 * Math.sin((x / 30.0) * PI)) * 2.0) / 3.0
+  return ret
+}
+
+gcj02.toWGS84 = forEachPoint((input, output, offset) => {
+  let lng = input[offset]
+  let lat = input[offset + 1]
+  if (!outOfChina(lng, lat)) {
+    const deltaD = delta(lng, lat)
+    lng = lng - deltaD[0] // 改回减法
+    lat = lat - deltaD[1] // 改回减法
+  }
+  output[offset] = lng
+  output[offset + 1] = lat
+})
+
+gcj02.fromWGS84 = forEachPoint((input, output, offset) => {
+  let lng = input[offset]
+  let lat = input[offset + 1]
+  if (!outOfChina(lng, lat)) {
+    const deltaD = delta(lng, lat)
+    lng = lng + deltaD[0] // 改回加法
+    lat = lat + deltaD[1] // 改回加法
+  }
+  output[offset] = lng
+  output[offset + 1] = lat
+})
+
+const sphericalMercator = {}
+const RADIUS = 6378137
+const MAX_LATITUDE = 85.0511287798
+const RAD_PER_DEG = Math.PI / 180
+
+sphericalMercator.forward = forEachPoint((input, output, offset) => {
+  const lat = Math.max(Math.min(MAX_LATITUDE, input[offset + 1]), -MAX_LATITUDE)
+  const sin = Math.sin(lat * RAD_PER_DEG)
+  output[offset] = RADIUS * input[offset] * RAD_PER_DEG
+  output[offset + 1] = (RADIUS * Math.log((1 + sin) / (1 - sin))) / 2
+})
+
+sphericalMercator.inverse = forEachPoint((input, output, offset) => {
+  output[offset] = input[offset] / RADIUS / RAD_PER_DEG
+  output[offset + 1] = (2 * Math.atan(Math.exp(input[offset + 1] / RADIUS)) - Math.PI / 2) / RAD_PER_DEG
+})
+
+const projzh = {}
+
+projzh.ll2gmerc = function (input, opt_output, opt_dimension) {
+  const output = gcj02.toWGS84(input, opt_output, opt_dimension) // 改用 toWGS84
+  return projzh.ll2smerc(output, output, opt_dimension)
+}
+
+projzh.gmerc2ll = function (input, opt_output, opt_dimension) {
+  const output = projzh.smerc2ll(input, input, opt_dimension)
+  return gcj02.fromWGS84(output, opt_output, opt_dimension) // 改用 fromWGS84
+}
+
+// smerc2gmerc 需要修改
+
+projzh.smerc2gmerc = function (input, opt_output, opt_dimension) {
+  let output = projzh.smerc2ll(input, input, opt_dimension)
+  output = gcj02.toWGS84(output, output, opt_dimension) // 这里应该用 toWGS84
+  return projzh.ll2smerc(output, output, opt_dimension)
+}
+
+// gmerc2smerc 需要修改
+
+projzh.gmerc2smerc = function (input, opt_output, opt_dimension) {
+  let output = projzh.smerc2ll(input, input, opt_dimension)
+  output = gcj02.fromWGS84(output, output, opt_dimension) // 这里应该用 fromWGS84
+  return projzh.ll2smerc(output, output, opt_dimension)
+}
+
+projzh.ll2smerc = sphericalMercator.forward
+projzh.smerc2ll = sphericalMercator.inverse
+
+// 定义WGS84转GCJ02的投影
+const extent = [-20037508.342789244, -20037508.342789244, 20037508.342789244, 20037508.342789244]
+export const wgs84ToGcj02Projection = new proj.Projection({
+  code: 'WGS84-TO-GCJ02',
+  extent,
+  units: 'm',
+})
+
+// 添加投影和转换方法
+proj.addProjection(wgs84ToGcj02Projection)
+// 注意这里转换方法的顺序与原来相反
+proj.addCoordinateTransforms('EPSG:4326', wgs84ToGcj02Projection, projzh.ll2gmerc, projzh.gmerc2ll)
+proj.addCoordinateTransforms('EPSG:3857', wgs84ToGcj02Projection, projzh.smerc2gmerc, projzh.gmerc2smerc)

package/src/views/component/XCellListView/index.vue

@@ -1,117 +1,11 @@
 <script setup lang="ts">
 import XCellList from '@af-mobile-client-vue3/components/data/XCellList/index.vue'
 import NormalDataLayout from '@af-mobile-client-vue3/components/layout/NormalDataLayout/index.vue'
-import { useUserStore } from '@af-mobile-client-vue3/stores/modules/user'
-import { defineEmits, ref } from 'vue'
-import { useRouter } from 'vue-router'
-
-// 定义事件
-const emit = defineEmits(['deleteRow'])
-const userInfo = useUserStore().getUserInfo()
-// 访问路由
-const router = useRouter()
-// 获取默认值
-const idKey = ref('o_id')
+import { ref } from 'vue'
 
 // 简易crud表单测试
-// const configName = ref('orderCarInMobileCRUD')
-// const serviceName = ref('af-gaslink')
-const configName = ref('lngPriceManageMobileCRUD')
-const serviceName = ref('af-gaslink')
-
-// 资源权限测试
-// const configName = ref('crud_sources_test')
-// const serviceName = ref('af-system')
-
-// 实际业务测试
-// const configName = ref('lngChargeAuditMobileCRUD')
-// const serviceName = ref('af-gaslink')
-
-// 跳转到详情页面
-// function toDetail(item) {
-//   router.push({
-//     name: 'XCellDetailView',
-//     params: { id: item[idKey.value] }, // 如果使用命名路由，推荐使用路由参数而不是直接构建 URL
-//     query: {
-//       operName: item[operNameKey.value],
-//       method:item[methodKey.value],
-//       requestMethod:item[requestMethodKey.value],
-//       operatorType:item[operatorTypeKey.value],
-//       operUrl:item[operUrlKey.value],
-//       operIp:item[operIpKey.value],
-//       costTime:item[costTimeKey.value],
-//       operTime:item[operTimeKey.value],
-//
-//       title: item[titleKey.value],
-//       businessType: item[businessTypeKey.value],
-//       status:item[statusKey.value]
-//     }
-//   })
-// }
-
-// 跳转到表单——以表单组来渲染纯表单
-function toDetail(item) {
-  router.push({
-    name: 'XFormGroupView',
-    // query: {
-    //   id: item[idKey.value],
-    // id: item.rr_id,
-    // o_id: item.o_id,
-    // },
-  })
-}
-
-// 新增功能
-// function addOption(totalCount) {
-//   router.push({
-//     name: 'XFormView',
-//     params: { id: totalCount, openid: totalCount },
-//     query: {
-//       configName: configName.value,
-//       serviceName: serviceName.value,
-//       mode: '新增',
-//     },
-//   })
-// }
-function addOption(callback) {
-  router.push({
-    name: 'XFormGroupView',
-    // params: { id: totalCount.value },
-    // query: {
-    //   configName: configName.value,
-    //   serviceName: serviceName.value,
-    //   mode: '新增',
-    // },
-  })
-  // 如果存在回调函数，调用它并传递true表示已处理
-  if (typeof callback === 'function') {
-    callback(true)
-  }
-}
-
-// 修改功能
-function updateRow(result, callback) {
-  console.log('用户----', userInfo)
-  router.push({
-    name: 'XFormGroupView',
-    // params: { id: result.o_id, openid: result.o_id },
-    // query: {
-    //   configName: configName.value,
-    //   serviceName: serviceName.value,
-    //   mode: '修改',
-    // },
-  })
-
-  // 如果存在回调函数，调用它并传递true表示已处理
-  if (typeof callback === 'function') {
-    callback(true)
-  }
-}
-
-// 删除功能
-function deleteRow(result) {
-  emit('deleteRow', result.o_id)
-}
+const configName = ref('defectDispatchPhoneCRUD')
+const serviceName = ref('af-linepatrol')
 </script>
 
 <template>
@@ -120,21 +14,7 @@ function deleteRow(result) {
       <XCellList
         :config-name="configName"
         :service-name="serviceName"
-        :id-key="idKey"
-        :fix-query-form="{ u_f_price_state: ['生效', '待生效'] }"
-        @to-detail="toDetail"
-        @delete-row="deleteRow"
-        @update="updateRow"
-        @add="addOption"
       />
-      <!--      <XCellList -->
-      <!--        :config-name="configName" -->
-      <!--        :service-name="serviceName" -->
-      <!--        :fix-query-form="{ o_f_oper_name: 'edu_test' }" -->
-      <!--        :id-key="idKey" -->
-      <!--        @to-detail="toDetail" -->
-      <!--        @delete-row="deleteRow" -->
-      <!--      /> -->
     </template>
   </NormalDataLayout>
 </template>

package/src/views/component/XFormGroupView/index.vue

@@ -9,13 +9,6 @@ import { useRoute } from 'vue-router'
 const configName = ref('form_check_test')
 const serviceName = ref('af-system')
 
-// const configName = ref("计划下发Form")
-// const serviceName = ref("af-linepatrol")
-
-// 表单组
-// const configName = ref('lngChargeAuditMobileFormGroup')
-// const serviceName = ref('af-gaslink')
-
 const formData = ref({})
 const formGroup = ref(null)
 const route = useRoute()
@@ -25,36 +18,6 @@ function submit(_result) {
     history.back()
   })
 }
-
-// 表单组——数据
-// function initComponents () {
-//   runLogic('getlngChargeAuditMobileFormGroupData', {id: 29}, 'af-gaslink').then((res) => {
-//     formData.value = {...res}
-//   })
-// }
-
-// 纯表单——数据
-// function initComponents() {
-//   formData.value = { plan_name: 'af-llllll', plan_point: '1号点位', plan_single: '1号点位', plan_range: '2024-12-12' }
-// }
-
-// function initComponents() {
-//   runLogic('getlngChargeAuditMobileFormGroupData', { id: route.query?.id, o_id: route.query?.o_id }, 'af-gaslink').then((res) => {
-//     console.log('res------', res)
-//     formData.value = { ...res }
-// formGroup.value.init({
-//   configName: configName.value,
-//   serviceName: serviceName.value,
-//   groupFormData: { ...res },
-//   mode: "新增"
-// })
-//     isInit.value = true
-//   })
-// }
-
-// onBeforeMount(() => {
-//   initComponents()
-// })
 </script>
 
 <template>

package/src/views/component/XFormView/index.vue

@@ -1,133 +1,40 @@
 <script setup lang="ts">
-import XForm from '@af-mobile-client-vue3/components/data/XForm/index.vue'
+import XFormGroup from '@af-mobile-client-vue3/components/data/XFormGroup/index.vue'
 import NormalDataLayout from '@af-mobile-client-vue3/components/layout/NormalDataLayout/index.vue'
-import { getConfigByName } from '@af-mobile-client-vue3/services/api/common'
-import { post } from '@af-mobile-client-vue3/services/restTools'
-import {
-  showDialog,
-  NavBar as VanNavBar,
-  Space as VanSpace,
-} from 'vant'
-import { defineEmits, getCurrentInstance, onBeforeMount, ref } from 'vue'
-import { useRoute } from 'vue-router'
-
-const emit = defineEmits(['onSumbit'])
-const xForm = ref(null)
-const id = ref(-1)
-const openid = ref('')
-const instance = getCurrentInstance()
-const xFormInit = ref(false)
-const route = useRoute()
-const configName = route.query.configName as string
-const serviceName = route.query.serviceName as string
-const mode = route.query.mode as string
-const updateData = ref({})
-const title = ref('')
-const groupFormItems = ref({})
-const api = ref('/af-system/logic/commonQuery')
-const updateId = {
-  queryParamsName: 'crud_oper_log_manage',
-  pageNo: 1,
-  pageSize: 20,
-  conditionParams: { o_id: route.params.id as string },
-}
-const loadUpdate = ref(false)
-// const serviceName = ref('af-revenue')
-const _currentEvaluate = {
-  id: null,
-  f_business_name: '',
-  f_evaluate_state: '',
-}
-
-// 组件挂载前获取数据
-onBeforeMount(async () => {
-  if (instance) {
-    id.value = route.params.id as unknown as number
-    openid.value = route.params.openid as string
-    formInit()
-  }
-})
-
-// 组件初始化前的判断
-async function formInit() {
-  getConfigByName(configName, (result) => {
-    groupFormItems.value = result
-    title.value = result.title
-    if (mode === '修改')
-      getUpdateData()
-    xFormInit.value = true
-  }, serviceName)
-}
-
-// 获取配置信息
-function queryData() {
-
-}
-
-// 提交操作
-function onSubmit(params) {
-  // const data = {
-  //   id: currentEvaluate.id,
-  //   f_json: params,
-  //   f_evaluate_date: formatDate(new Date()),
-  //   f_evaluate_state: '已评价',
-  //   f_evaluate_type: '用户评价',
-  //   f_evaluate_userid: openid.value,
-  // }
-  // openApiLogic(data, 'saveEvaluate', formServiveName).then((_res: any) => {
-  //     showDialog({ message: '评价成功了' }).then(() => {history.back()})
-  // }).catch(() => {
-  //   showDialog({ message: '评价失败了' })
-  // })
-  if (params) {
-    emit('onSumbit', params)
-    showDialog({ message: '评价成功了' }).then(() => {
-      history.back()
-    })
-  }
-  else {
-    showDialog({ message: '评价失败了' }).then(() => {
-      history.back()
-    })
-  }
+import { ref, toRaw } from 'vue'
+
+const configName = ref('AddConstructionForm')
+const serviceName = ref('af-linepatrol')
+const formGroup = ref(null)
+function safeStringify(obj) {
+  const seen = new WeakSet()
+  return JSON.stringify(toRaw(obj), (key, val) => {
+    if (typeof val === 'object' && val !== null) {
+      if (seen.has(val))
+        return
+      seen.add(val)
+    }
+    return val
+  }, 2)
 }
-
-// 查询需要修改的数据
-async function getUpdateData() {
-  if (api.value && updateId) {
-    const res = await post(api.value, updateId)
-    updateData.value = res.data[0]
-  }
+function submit(result) {
+  console.log('>>>> result: ', safeStringify(result))
 }
 </script>
 
 <template>
-  <NormalDataLayout id="XFormView" title="XForm表单">
+  <NormalDataLayout id="XFormGroupView" title="纯表单">
     <template #layout_content>
-      <VanSpace direction="vertical" fill>
-        <VanNavBar :title="title ? mode.concat(title) : null" />
-        <XForm
-          v-if="xFormInit"
-          ref="xForm"
-          :group-form-items="JSON.parse(JSON.stringify(groupFormItems))"
-          :service-name="serviceName"
-          :form-data="updateData"
-          :mode="mode"
-          style="margin-bottom: 14px;"
-          @on-submit="onSubmit"
-        />
-      </VanSpace>
+      <XFormGroup
+        ref="formGroup"
+        :config-name="configName"
+        :service-name="serviceName"
+        mode="新增"
+        @submit="submit"
+      />
     </template>
   </NormalDataLayout>
 </template>
 
-<style scoped>
-.van-doc-demo-block__title {
-  margin: 0;
-  padding: 32px 16px 16px;
-  color: black;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 16px;
-}
+<style scoped lang="less">
 </style>