账号归属配置

src/api/modules/insuranceCompany.ts

@@ -12,6 +12,20 @@ const company = (axiosInstance: ApiInstance) => ({
   CompanyDel: (id: String) => axiosInstance.get(`esmInsCompany/${id}`),
   //查询一级列表
   selectLevelList: (data: Types.companyTreeRequest) => axiosInstance.post('esmInsCompany/selectLevelList', data),
+  //账号归属模版配置
+  attributionTemplate: (data: Types.attributionRequest) => axiosInstance.post('manager/attributionTemplate/submit', data),
+  //获取账号归属配置
+  attributionTemplatequery: (data: Types.attributionRequest) => axiosInstance.post('manager/attributionTemplate/getList', data),
+  // 二维码保存配置
+  QRBarcodeAdd: (data: Types.qrBarcodeRequest) => axiosInstance.post('qrBarcode/save', data),
+  //二维码配置修改
+  QRBarcodeUpdate: (data: Types.qrBarcodeRequest) => axiosInstance.post('qrBarcode/updateById', data),
+  //二维码配置分页查询
+  QRcodePage: (data: Types.pageRequest) => axiosInstance.post('/qrBarcode/queryPage', data),
+  //二维码配置查询
+  QRcodeById: (id: string) => axiosInstance.get(`qrBarcode/queryById/${id}`),
+  //二维码配置分页查询
+  QRcodeDel: (id: string) => axiosInstance.get(`qrBarcode/delete/${id}`),
 
 })
 

src/api/types/insuranceCompanyTypes.ts

@@ -53,3 +53,171 @@ export type info = {
   type: number | string;
   [property: string]: any;
 }
+
+export type attributionRequest = {
+  /**
+   * api类型为2（python）必传
+   */
+  /**
+   * api类型
+   */
+  apiType?: number;
+  /**
+   * 归属配置
+   */
+  attributionConfig?: string;
+  /**
+   * 字段集
+   */
+  fields?: PtlAttributionTemplateDto[];
+  /**
+   * id
+   */
+  id?: string;
+  /**
+   * 影像上传
+   */
+  imageUpload?: string;
+  /**
+   * 保险公司ID
+   */
+  insCompanyId?: string;
+  /**
+   * 核保
+   */
+  insurance?: string;
+  /**
+   * 人工核保状态刷新
+   */
+  manualStatusRefresh?: string;
+  /**
+   * 非车险查询
+   */
+  nonCarInsurance?: string;
+  /**
+   * 缴费查询
+   */
+  paymentQuery?: string;
+  /**
+   * 保单下载
+   */
+  policyDownload?: string;
+  /**
+   * 报价
+   */
+  quotation?: string;
+  /**
+   * 撤销订单
+   */
+  revokeOrder?: string;
+  [property: string]: any;
+}
+/**
+ * com.jzg.commons.entity.agreement.dto.PtlAttributionTemplateDto
+ *
+ * PtlAttributionTemplateDto，归属配置模版
+ */
+export type PtlAttributionTemplateDto = {
+  /**
+   * 字段
+   */
+  field?: string;
+  /**
+   * 是否允许修改（true 可修改，false 不可修改）
+   */
+  isEdit?: boolean;
+  /**
+   * 标签
+   */
+  label?: string;
+  /**
+   * 类型（text 文本框，select 选择框）
+   */
+  type?: string;
+  /**
+   * 值
+   */
+  value?: string;
+  [property: string]: any;
+}
+/**
+ * QrBarcodeConfigAdd，二维码配置新增
+ */
+export type qrBarcodeRequest = {
+  /**
+    * 主键
+    */
+  id?: string;
+  /**
+   * 请求类型 1：api 2：python
+   */
+  apiType: number | string;
+  /**
+   * 保险公司id
+   */
+  companyId: string;
+  /**
+   * 保险公司名称简称
+   */
+  companyName: string;
+  systemCode?: string;
+  /**
+   * 类型 0：url   1：base码   2：h5
+   */
+  type: number | string;
+  [property: string]: any;
+}
+/**
+ * QrBarcodeConfigParam，二维码配置查询参数
+ */
+export type pageRequest = {
+  /**
+   * 保险公司
+   */
+  companyName?: string;
+  page?: Page;
+  pages?: number;
+  size?: number;
+  [property: string]: any;
+}
+export type Page = {
+  countId?: string;
+  current?: number;
+  maxLimit?: number;
+  optimizeCountSql?: PageObject;
+  optimizeJoinOfCountSql?: boolean;
+  orders?: OrderItem[];
+  pages?: number;
+  records?: { [key: string]: any }[];
+  searchCount?: PageObject;
+  size?: number;
+  total?: number;
+  [property: string]: any;
+}
+
+/**
+ * PageObject
+ */
+export type PageObject = {
+  countId?: string;
+  current?: number;
+  maxLimit?: number;
+  optimizeCountSql?: PageObject;
+  optimizeJoinOfCountSql?: boolean;
+  orders?: OrderItem[];
+  pages?: number;
+  records?: { [key: string]: any }[];
+  searchCount?: PageObject;
+  size?: number;
+  total?: number;
+  [property: string]: any;
+}
+
+/**
+* OrderItem
+*/
+export type OrderItem = {
+  asc?: boolean;
+  column?: string;
+  [property: string]: any;
+}

src/views/insuranceCompanyConfiguration/accountOwnershipConfig.vue

@@ -0,0 +1,550 @@
+<template>
+  <div>
+    <PageMain class="vh100">
+      <ElRow :gutter="20" style="height: 100%;">
+        <ElCol :md="4">
+          <div class="flex f-c " style="height: 100%;">
+            <ElFormItem>
+              <ElInput v-model="companyName" placeholder="输入保险公司名称查找" type="text" tabindex="1" clearable
+                style="width: 100%;" @clear="companyQuery">
+                <template #append>
+                  <el-button :icon="Search" @click="companyQuery" v-auth="'drivingInsurance.add'" />
+                </template>
+              </ElInput>
+            </ElFormItem>
+            <div style=" width: 100%;height: calc(100vh - 310px);  overflow-y: auto;" class="container ">
+              <div class="pad-1 roleitem " :class="{ active: companyactiveID === item.id }"
+                v-for="(item, index) in companyList" :key="index" @click="roleitemClick(item)">
+                <span>{{ item.name }}</span>
+              </div>
+            </div>
+          </div>
+        </ElCol>
+        <ElCol :md="1" style="flex: unset;">
+          <ElDivider direction="vertical" style="height: 100%;"></ElDivider>
+        </ElCol>
+        <ElCol :md="19">
+          <ElCol :md="24" :lg="24" :offset="23" v-if="companyactiveID">
+            <el-button type="primary" @click="parametervalidate(productFormRef)">保存</el-button>
+          </ElCol>
+          <ElCol :md="24" :lg="24">
+            <el-tabs v-model="editableTabsValue" type="card" editable class="demo-tabs" @edit="handleTabsEdit"
+              :closable="editableTabs.length == 1 ? false : true">
+              <el-tab-pane v-for="(item, index) in editableTabs" :key="item.name" :label="item.title" :name="item.name"
+                style=" height: 550px;overflow-y: auto;">
+                <ElCol :md="24" :lg="24" style="padding-bottom: 10px;font-size: 14px;">
+                  <span class="strong">基本信息</span>
+                </ElCol>
+                <el-form :model="item" label-width="120px" :rules="parameterrules" label-position="top"
+                  ref="productFormRef" style="max-width: 1000px;" class="flex a-c f-wrap" :size="fromSize">
+                  <ElCol :md="24" :lg="12">
+                    <el-form-item label="对接方式" prop="apiType">
+                      <el-select v-model="item.apiType" placeholder="请选择对接方式" clearable filterable>
+                        <el-option v-for="(item, index) in dictLists.api_typeList" :label="item.label"
+                          :value="item.value" :key="index" />
+                      </el-select>
+                    </el-form-item>
+                  </ElCol>
+                  <ElCol :md="24" :lg="12" v-if="item.apiType == '2'">
+                    <el-form-item label="保司账号登录地址" prop="attributionConfig">
+                      <el-input v-model="item.attributionConfig" placeholder="输入账号登录地址" />
+                    </el-form-item>
+                  </ElCol>
+                  <ElCol :md="24" :lg="12" v-if="item.apiType == '2'">
+                    <el-form-item label="报价链接" prop="quotation">
+                      <el-input v-model="item.quotation" placeholder="输入报价链接" />
+                    </el-form-item>
+                  </ElCol>
+                  <ElCol :md="24" :lg="12" v-if="item.apiType == '2'">
+                    <el-form-item label="影像上传链接" prop="imageUpload">
+                      <el-input v-model="item.imageUpload" placeholder="输入影像上传链接" />
+                    </el-form-item>
+                  </ElCol>
+                  <ElCol :md="24" :lg="12" v-if="item.apiType == '2'">
+                    <el-form-item label="核保链接" prop="insurance">
+                      <el-input v-model="item.insurance" placeholder="输入核保链接" />
+                    </el-form-item>
+                  </ElCol>
+                  <ElCol :md="24" :lg="12" v-if="item.apiType == '2'">
+                    <el-form-item label="缴费查询链接" prop="paymentQuery">
+                      <el-input v-model="item.paymentQuery" placeholder="输入缴费查询链接" />
+                    </el-form-item>
+                  </ElCol>
+                  <ElCol :md="24" :lg="12" v-if="item.apiType == '2'">
+                    <el-form-item label="保单下载链接" prop="policyDownload">
+                      <el-input v-model="item.policyDownload" placeholder="输入保单下载链接" />
+                    </el-form-item>
+                  </ElCol>
+                  <ElCol :md="24" :lg="12" v-if="item.apiType == '2'">
+                    <el-form-item label="非车险查询链接" prop="nonCarInsurance">
+                      <el-input v-model="item.nonCarInsurance" placeholder="输入非车险查询链接" />
+                    </el-form-item>
+                  </ElCol>
+                  <ElCol :md="24" :lg="12" v-if="item.apiType == '2'">
+                    <el-form-item label="人工核保状态刷新链接" prop="manualStatusRefresh">
+                      <el-input v-model="item.manualStatusRefresh" placeholder="输入人工核保状态刷新链接" />
+                    </el-form-item>
+                  </ElCol>
+                  <ElCol :md="24" :lg="12" v-if="item.apiType == '2'">
+                    <el-form-item label="撤销订单链接" prop="revokeOrder">
+                      <el-input v-model="item.revokeOrder" placeholder="输入撤销订单链接" />
+                    </el-form-item>
+                  </ElCol>
+                </el-form>
+                <ElDivider style="margin: 0;"></ElDivider>
+                <ElCol :md="24" :lg="24" style="margin: 10px 0;font-size: 14px;">
+                  <span class="strong" style="margin-right: 10px;">基本信息</span>
+                  <el-button type="primary" @click="addParameter(index)">
+                    <template #icon>
+                      <ElIcon>
+                        <plus />
+                      </ElIcon>
+                    </template>
+                    添加参数</el-button>
+                </ElCol>
+                <el-table :data="item.fields" style="width: 100%;">
+                  <template #empty>
+                    <div class="flex f-c a-c ">
+                      <img src="../../assets/images/empty.png" alt="">
+                      <span style="font-size: 14px;color: #909399;">暂无数据</span>
+                    </div>
+                  </template>
+                  <el-table-column prop="label" label="字段标题"></el-table-column>
+                  <el-table-column prop="field" label="字段名称" width="180" align="center"></el-table-column>
+                  <el-table-column prop="type" label="类型" width="180" align="center"></el-table-column>
+                  <el-table-column prop="isEdit" label="是否必填" width="180" align="center">
+                    <template #default="scope">
+                      <span v-if="scope.row.isEdit">是</span>
+                      <span v-else>否</span>
+                    </template>
+                  </el-table-column>
+                  <el-table-column prop="value" label="默认数据" width="180" align="center"></el-table-column>
+                  <el-table-column label="操作" width="280" align="center">
+                    <template #default="scope">
+                      <el-button type="primary" link @click="fieldsDel(scope.$index, index)">删除</el-button>
+                    </template>
+                  </el-table-column>
+                </el-table>
+              </el-tab-pane>
+            </el-tabs>
+          </ElCol>
+
+
+        </ElCol>
+      </ElRow>
+
+    </PageMain>
+    <el-drawer v-model="fieldsAddDrawer" :direction="direction" @open="DrawerOpen">
+      <template #header>
+        <h4>编辑参数</h4>
+      </template>
+      <template #default>
+        <div>
+          <el-form :model="fieldsFrom" label-width="120px" :rules="fieldsFromrules" label-position="top"
+            ref="fieldsFromRef" :size="fromSize">
+            <el-form-item label="类型" prop="type">
+              <el-radio-group v-model="fieldsFrom.type">
+                <el-radio value="text">text</el-radio>
+                <el-radio value="select">select</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="字段标题" prop="label">
+              <el-input v-model="fieldsFrom.label" placeholder="请输入字段标题" />
+            </el-form-item>
+            <el-form-item label="字段名称" prop="field">
+              <el-input v-model="fieldsFrom.field" placeholder="请输入字段名称" />
+            </el-form-item>
+            <el-form-item label="是否必填" prop="isEdit">
+              <el-radio-group v-model="fieldsFrom.isEdit">
+                <el-radio :value="true">必填</el-radio>
+                <el-radio :value="false">非必填</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="默认数据">
+              <el-input v-model="fieldsFrom.value" placeholder="请输入默认数据" />
+            </el-form-item>
+          </el-form>
+        </div>
+      </template>
+      <template #footer>
+        <div>
+          <el-button @click="fieldsAddDrawer = false">取消</el-button>
+          <el-button type="primary" @click="fieldsAdd(fieldsFromRef)">保存</el-button>
+        </div>
+      </template>
+    </el-drawer>
+  </div>
+</template>
+
+<script lang='ts' setup>
+import api from '@/api';
+import { ref, reactive, onBeforeMount } from 'vue';
+import { ElMessage, ComponentSize, FormInstance, TabPaneName, FormRules, DrawerProps } from 'element-plus';
+import { Search } from '@element-plus/icons-vue'
+onBeforeMount(() => {
+  companyQuery();
+  dictType('api_type');//展业范围
+
+});
+interface companyList {
+  nameSimple: string,
+  name: string,
+  id: string,
+  [key: string]: any
+}
+interface TabItem {
+  title: string;
+  name: string;
+  id?: string,
+  insCompanyId: string;
+  apiType: string;
+  attributionConfig: string;
+  quotation: string;
+  imageUpload: string;
+  insurance: string;
+  paymentQuery: string;
+  policyDownload: string;
+  nonCarInsurance: string;
+  manualStatusRefresh: string;
+  revokeOrder: string;
+  fields: FieldItem[];
+}
+
+interface FieldItem {
+  field: string;
+  label: string;
+  type: string;
+  isEdit: string;
+  value: string;
+}
+type FieldsFrom = {
+  field: string;
+  label: string;
+  type: string;
+  isEdit: string;
+  value: string;
+};
+const dictLists = ref<{ [key: string]: any[] }>({});//字典集合
+const fieldsAddDrawer = ref(false)//抽屉显示隐藏
+const direction = ref<DrawerProps['direction']>('rtl')
+const companyName = ref<string>("")//保险公司检索条件
+const companyList = ref<companyList>();
+const companyactiveID = ref("");
+const companyactiveName = ref("")
+const productFormRef = ref<FormInstance>()
+const fieldsFromRef = ref<FormInstance>()
+const fromSize = ref<ComponentSize>('default')
+let tabIndex = 1//自增name标识
+const tabIdIndex = ref(0)//配置数组下标
+const editableTabsValue = ref('parameter1')
+const editableTabs = reactive<TabItem[]>([
+  {
+    title: '参数配置1',
+    name: 'parameter1',
+    id: "",
+    insCompanyId: '',//保险公司id
+    apiType: "",//对接方式
+    attributionConfig: "",//保司账号登录地址
+    quotation: "",//报价url
+    imageUpload: "",//影像url
+    insurance: "",//核保url
+    paymentQuery: "",//缴费url
+    policyDownload: "",//保单下载url
+    nonCarInsurance: "",//非车查询url
+    manualStatusRefresh: "",//人工核保刷新url
+    revokeOrder: "",//撤销订单url
+    fields: [],
+  },
+])
+const fieldsFrom: FieldsFrom = reactive({
+  field: "",
+  label: "",
+  type: "",
+  isEdit: "",
+  value: "",
+})
+const fieldsFromrules = ref<FormRules>({
+  field: [
+    { required: true, trigger: 'blur', message: '请输入字段名称' },
+  ],
+  isEdit: [
+    { required: true, trigger: 'change', message: '请选择是否必填' },
+  ],
+  label: [
+    { required: true, trigger: 'blur', message: '请输入字段标题' },
+  ],
+  type: [
+    { required: true, trigger: 'change', message: '请选择类型' },
+  ],
+})
+const parameterrules = ref<FormRules>({
+  apiType: [
+    { required: true, trigger: 'change', message: '请选择对接方式' },
+  ],
+  attributionConfig: [
+    { required: true, trigger: 'blur', message: '请输入账号登录地址' },
+  ],
+  quotation: [
+    { required: true, trigger: 'blur', message: '请输入报价链接地址' },
+  ],
+  imageUpload: [
+    { required: true, trigger: 'blur', message: '请输入影像上传链接地址' },
+  ],
+  insurance: [
+    { required: true, trigger: 'blur', message: '请输入核保链接地址' },
+  ],
+  paymentQuery: [
+    { required: true, trigger: 'blur', message: '请输入缴费查询链接地址' },
+  ],
+  policyDownload: [
+    { required: true, trigger: 'blur', message: '请输入保单下载链接地址' },
+  ],
+  nonCarInsurance: [
+    { required: true, trigger: 'blur', message: '请输入非车险查询链接地址' },
+  ],
+  manualStatusRefresh: [
+    { required: true, trigger: 'blur', message: '请输入人工核保状态刷新链接地址' },
+  ],
+  revokeOrder: [
+    { required: true, trigger: 'blur', message: '请输入撤销订单链接地址' },
+  ],
+})
+//字典信息处理
+const dictType = (type: string) => {
+  api.toolApi.dictType({ dictCode: type }).then((res: any) => {
+    if (res.code == '200') {
+      dictLists.value[type + 'List'] = res.data.map((item: any) => {
+        return {
+          value: item.value,
+          label: item.label
+        };
+      });
+    }
+  });
+}
+const query = () => {
+  api.company.attributionTemplatequery({ companyId: companyactiveID.value }).then((res: any) => {
+    if (res.code == '200' && res.data.length) {
+      // 只保留 editableTabs 中已有的字段
+      const filteredData = res.data.map((item: any) => {
+        const newItem: Partial<TabItem> = {};
+        for (const key in editableTabs[0]) {
+          if (item.hasOwnProperty(key)) {
+            newItem[key as keyof TabItem] = item[key];
+          }
+        }
+        return newItem as TabItem;
+      });
+      editableTabs.splice(0, editableTabs.length, ...filteredData);
+      editableTabsValue.value = editableTabs[0].name;
+      tabIndex = editableTabs.length;
+    } else {
+      let list: TabItem[] = [];
+      list.push({
+        title: '参数配置1',
+        name: 'parameter1',
+        id: "",
+        insCompanyId: '',//保险公司id
+        apiType: "",//对接方式
+        attributionConfig: "",//保司账号登录地址
+        quotation: "",//报价url
+        imageUpload: "",//影像url
+        insurance: "",//核保url
+        paymentQuery: "",//缴费url
+        policyDownload: "",//保单下载url
+        nonCarInsurance: "",//非车查询url
+        manualStatusRefresh: "",//人工核保刷新url
+        revokeOrder: "",//撤销订单url
+        fields: [],
+      })
+      editableTabs.length = 0; // 清空当前内容
+      editableTabs.push(...list); // 将 list 的内容添加到 editableTabs 中
+      editableTabsValue.value = editableTabs[0].name;
+      tabIndex = editableTabs.length;
+    }
+  });
+}
+const handleTabsEdit = (
+  targetName: TabPaneName | undefined,
+  action: 'remove' | 'add'
+) => {
+  if (action === 'add') {
+    const newTabName = `${++tabIndex}`
+
+    editableTabs.push({
+      title: `参数配置${newTabName}`,
+      name: 'parameter' + newTabName,
+      id: "",
+      insCompanyId: companyactiveID.value,//保险公司id
+      apiType: "",//对接方式
+      attributionConfig: "",//保司账号登录地址
+      quotation: "",//报价url
+      imageUpload: "",//影像url
+      insurance: "",//核保url
+      paymentQuery: "",//缴费url
+      policyDownload: "",//保单下载url
+      nonCarInsurance: "",//非车查询url
+      manualStatusRefresh: "",//人工核保刷新url
+      revokeOrder: "",//撤销订单url
+      fields: [],
+
+    })
+    editableTabsValue.value = 'parameter' + newTabName
+  } else if (action === 'remove') {
+    const tabs = editableTabs
+    let activeName = editableTabsValue.value
+    if (activeName != 'parameter1') {
+      if (activeName === targetName) {
+        tabs.forEach((tab, index) => {
+          if (tab.name === targetName) {
+            const nextTab = tabs[index + 1] || tabs[index - 1]
+            if (nextTab) {
+              activeName = nextTab.name
+            }
+          }
+        })
+      }
+      editableTabsValue.value = activeName
+      const index = editableTabs.findIndex((tab) => tab.name === targetName)
+      if (index !== -1) {
+        editableTabs.splice(index, 1)
+      }
+    } else {
+      ElMessage({
+        type: 'warning',
+        message: '至少保留一个',
+        plain: true,
+      })
+    }
+  }
+}
+//保存配置
+const parameterAdd = async () => {
+  editableTabs.map((ele) => {
+    ele.insCompanyId = companyactiveID.value;
+    return ele;
+  })
+  await api.company.attributionTemplate(editableTabs).then((res: any) => {
+    if (res.code == '200') {
+      ElMessage({
+        type: 'success',
+        message: res.msg,
+        plain: true,
+      })
+    } else {
+    }
+  });
+}
+const parametervalidate = async (formEl: FormInstance | undefined | any) => {
+  if (!formEl) return
+  const validationPromises = editableTabs.map((formRef, index) => {
+    return new Promise((resolve, reject) => {
+      if (formRef) {
+        formEl[index].validate((valid: boolean) => {
+          if (valid) {
+            resolve(true);
+          } else {
+            reject(false);
+          }
+        });
+      } else {
+        reject(false);
+      }
+    });
+  });
+
+  try {
+    await Promise.all(validationPromises);
+    // 所有表单验证通过后执行提交逻辑
+    parameterAdd();
+  } catch (error) {
+    ElMessage({
+      type: 'error',
+      message: '请确保所有表单均已完成验证',
+      plain: true,
+    });
+  }
+};
+
+//获取保险公司列表
+const companyQuery = () => {
+  api.company.selectLevelList({ name: companyName.value }).then((res: any) => {
+    if (res.code == '200') {
+      companyList.value = res.data;
+    }
+  });
+}
+//租户列表事件
+async function roleitemClick(item: { id: string, name: string }) {
+  companyactiveID.value = item.id;
+  companyactiveName.value = item.name;
+  query();
+
+}
+/**
+ *
+ * @param fieldsindex 字段数据下标
+ * @param index 配置数组下标
+ */
+const fieldsDel = (fieldsindex: any, index: number) => {
+  editableTabs[index].fields.splice(fieldsindex, 1);
+}
+// 参数添加事件
+const fieldsAdd = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid) => {
+    if (valid) {
+      editableTabs[tabIdIndex.value].fields.push({ ...fieldsFrom })
+      fieldsAddDrawer.value = false;
+    } else {
+      ElMessage({
+        type: 'error',
+        message: '信息不完整',
+        plain: true,
+      })
+    }
+  })
+}
+//抽屉事件
+const addParameter = (index: number) => {
+  tabIdIndex.value = index;
+  fieldsAddDrawer.value = true
+
+}
+
+const DrawerOpen = () => {
+  //抽屉打开清空表单
+  for (const key in fieldsFrom) {
+    fieldsFrom[key as keyof FieldsFrom] = '';
+  }
+}
+</script>
+<style lang="scss" scoped>
+.roleitem {
+  span:first-child {
+    font-size: 16px;
+    color: #333;
+  }
+
+  span:last-child {
+    font-size: 14px;
+    color: #666;
+  }
+}
+
+.roleitem:hover {
+  background: #f4faff;
+  transition: 0.2s;
+}
+
+.active {
+  background: #f4faff;
+  border-right: 2px solid #0083ff;
+}
+
+// .container::-webkit-scrollbar {
+//   display: none;
+
+//   /* 针对 Webkit 浏览器 (如 Chrome/Safari) */
+// }
+</style>