feat(passport): 新增忘记密码功能及相关接口

- 新增忘记密码页面，支持邮箱找回和手机找回两种方式，包含验证码倒计时
- 添加密码强度和一致性校验，确保新密码安全性
- 开启对应路由 /forget，恢复已注释的忘记密码入口
- 新增发送短信验证码和邮箱验证码接口，适配未登录场景
- 新增重置密码接口，支持手机短信码及邮箱验证码方式
- 请求拦截器支持 X-Tenant-Skip 头，跳过租户信息注入，避免跨租户串扰
- 国际化新增忘记密码相关英文和中文文案
- 页面样式与登录页视觉风格一致，跨屏幕响应式布局优化

.workbuddy/memory/2026-07-24.md

@@ -35,3 +35,13 @@
 - 分类管理页 `/shop/shopGoodsCategory` 本身**支持**多级：模型有 parentId/children，编辑弹窗用 a-tree-select(toTreeData) 不限层级，列表 computeDepth 递归缩进。
 - 但商品端选分类的级联组件 `src/components/SelectGoodsCategory/index.vue` 的 formatData/filterData 只映射 2~3 级；shopGoodsEdit 的 `chooseGoodsCategory` 写死 `value[1].value`/`value[0].label`（仅 2 级），3 级及以上会选错/选不中。
 - 后端 `/shop/shop-goods-category` 是否限层级需查后端仓库确认（本仓库看不到）。
+
+## 新增：忘记密码（找回密码）功能
+- 参考项目：`/Users/gxwebsoft/VUE/website-admin/app/pages/login.vue`（已验证可用）。
+- 新增页面 `src/views/passport/forget/index.vue`：复用登录页视觉风格，支持「邮箱找回 / 手机找回」两种 Tab，含验证码 60s 倒计时、密码强度校验（≥8 位且含字母+数字）、两次密码一致性校验。
+- 路由：在 `src/router/routes.ts` 启用 `/forget`（登录页「忘记密码」链接 `push('/forget')` 原本就指向它，路由此前被注释）。
+- 新增 API：
+  - `src/api/passport/login/index.ts`：`sendEmailCaptcha(data,{skipTenant})` → POST /sendEmailCaptcha；`sendSmsCaptchaByAdmin(data,{skipTenant})` → POST /sendSmsCaptchaByAdmin。
+  - `src/api/layout/index.ts`：`resetPassword(data)` → POST /resetPassword（带 X-Tenant-Skip:1）；`src/api/layout/model/index.ts` 新增 `ResetPasswordParam`。
+- 关键改动：`src/utils/request.ts` 请求拦截器在请求头含 `X-Tenant-Skip` 时跳过注入 TenantId/CompanyId/MerchantId/Domain（登录前找回密码场景，避免串租户）。`vite build --outDir dist-verify` 验证通过（真实 `vite build` 因沙箱 safe-delete 守卫删 dist 拦截，非代码问题）。
+- 后端同址 server.websoft.top/api，与 website-admin 共用一套找回密码接口。

src/api/layout/index.ts

@@ -1,7 +1,7 @@
 import request from '@/utils/request';
 import type { ApiResult } from '@/api';
 import type { User } from '@/api/system/user/model';
-import type { UpdatePasswordParam, NoticeResult } from './model';
+import type { UpdatePasswordParam, ResetPasswordParam, NoticeResult } from './model';
 import { SERVER_API_URL } from '@/config/setting';
 import { Company } from '@/api/system/company/model';
 import { CmsWebsite } from '@/api/cms/cmsWebsite/model';
@@ -108,6 +108,24 @@ export async function updatePassword(
   return Promise.reject(new Error(res.data.message));
 }
 
+/**
+ * 找回/重置密码（未登录场景，登录页"忘记密码"入口）
+ * 后端对应 POST /resetPassword，支持手机或邮箱两种方式
+ */
+export async function resetPassword(
+  data: ResetPasswordParam
+): Promise<string> {
+  const res = await request.post<ApiResult<unknown>>(
+    SERVER_API_URL + '/resetPassword',
+    data,
+    { headers: { 'X-Tenant-Skip': '1' } }
+  );
+  if (res.data.code === 0) {
+    return res.data.message ?? '密码重置成功';
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
 /**
  * 创建完整网站并初始化
  */

src/api/layout/model/index.ts

@@ -24,6 +24,23 @@ export interface UpdatePasswordParam {
   oldPassword: string;
 }
 
+/**
+ * 找回/重置密码参数
+ * 手机找回时传 phone + smsCode，邮箱找回时传 email + emailCode
+ */
+export interface ResetPasswordParam {
+  /** 手机找回时必填 */
+  phone?: string;
+  smsCode?: string;
+  /** 邮箱找回时必填 */
+  email?: string;
+  emailCode?: string;
+  /** 新密码 */
+  newPassword: string;
+  /** 确认新密码 */
+  confirmPassword: string;
+}
+
 /**
  * 通知数据格式
  */

src/api/passport/login/index.ts

@@ -139,6 +139,46 @@ export async function sendSmsCaptcha(data: LoginParam) {
   return Promise.reject(new Error(res.data.message));
 }
 
+/**
+ * 发送短信验证码（后台管理员，跨租户：只要该手机号是超管或管理员即发送）
+ * 后端对应 POST /sendSmsCaptchaByAdmin，参数为 { phone }
+ * @param options.skipTenant 为 true 时不携带 tenantId 请求头（登录前无法确定租户时使用）
+ */
+export async function sendSmsCaptchaByAdmin(
+  data: LoginParam,
+  options?: { skipTenant?: boolean }
+) {
+  const res = await request.post<ApiResult<SmsCaptchaResult>>(
+    SERVER_API_URL + '/sendSmsCaptchaByAdmin',
+    data,
+    options?.skipTenant ? { headers: { 'X-Tenant-Skip': '1' } } : undefined
+  );
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 发送邮箱验证码（找回密码等登录前场景使用）
+ * 后端对应 POST /sendEmailCaptcha，参数为 { email }
+ * @param options.skipTenant 为 true 时不携带 tenantId 请求头（登录前无法确定租户时使用）
+ */
+export async function sendEmailCaptcha(
+  data: LoginParam,
+  options?: { skipTenant?: boolean }
+) {
+  const res = await request.post<ApiResult<unknown>>(
+    SERVER_API_URL + '/sendEmailCaptcha',
+    data,
+    options?.skipTenant ? { headers: { 'X-Tenant-Skip': '1' } } : undefined
+  );
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
 /**
  * 登录
  */

src/i18n/lang/en/login.ts

@@ -10,5 +10,33 @@ export default {
   loading: 'loading',
   oldPassword: 'Old',
   newPassword: 'New',
-  confirm: 'Confirm'
+  confirm: 'Confirm',
+  forgetPage: {
+    title: 'Forgot Password',
+    subTitle: 'Enter your account info to reset the password',
+    tabEmail: 'By Email',
+    tabPhone: 'By Phone',
+    email: 'Email',
+    phone: 'Phone',
+    emailCode: 'Email Code',
+    code: 'SMS Code',
+    getCode: 'Get Code',
+    sentEmail: 'Verification code sent, please check your email',
+    sentPhone: 'Verification code sent',
+    newPassword: 'New Password',
+    confirmPassword: 'Confirm Password',
+    reset: 'Reset Password',
+    backLogin: 'Back to Login',
+    success: 'Password reset successfully, please login with the new password',
+    emailPlaceholder: 'Please enter your registered email',
+    phonePlaceholder: 'Please enter your registered phone',
+    codePlaceholder: 'Please enter the code',
+    passwordPlaceholder: 'At least 8 chars, must contain letters and numbers',
+    confirmPlaceholder: 'Please enter the password again',
+    newPasswordRule: 'Password must be at least 8 chars with letters and numbers',
+    confirmRule: 'The two passwords do not match',
+    emailRule: 'Please enter a valid email address',
+    phoneRule: 'Please enter a valid phone number',
+    codeRule: 'Please enter the code'
+  }
 };

src/i18n/lang/zh_CN/login.ts

@@ -10,5 +10,33 @@ export default {
   loading: '登录中',
   oldPassword: '旧密码',
   newPassword: '新密码',
-  confirm: '确认密码'
+  confirm: '确认密码',
+  forgetPage: {
+    title: '忘记密码',
+    subTitle: '请输入账号信息以重置密码',
+    tabEmail: '邮箱找回',
+    tabPhone: '手机找回',
+    email: '邮箱',
+    phone: '手机号',
+    emailCode: '邮箱验证码',
+    code: '短信验证码',
+    getCode: '获取验证码',
+    sentEmail: '验证码已发送，请查收邮箱',
+    sentPhone: '验证码已发送',
+    newPassword: '新密码',
+    confirmPassword: '确认新密码',
+    reset: '重置密码',
+    backLogin: '返回登录',
+    success: '密码重置成功，请使用新密码登录',
+    emailPlaceholder: '请输入注册邮箱',
+    phonePlaceholder: '请输入注册手机号',
+    codePlaceholder: '请输入验证码',
+    passwordPlaceholder: '至少 8 位，需包含字母和数字',
+    confirmPlaceholder: '请再次输入新密码',
+    newPasswordRule: '新密码至少 8 位，需包含字母和数字',
+    confirmRule: '两次输入的密码不一致',
+    emailRule: '请输入正确的邮箱地址',
+    phoneRule: '请输入正确的手机号',
+    codeRule: '请输入验证码'
+  }
 };

src/router/routes.ts

@@ -50,11 +50,11 @@ export const routes = [
     component: () => import('@/views/passport/merchant/success.vue'),
     meta: { title: '申请提交成功' }
   },
-  // {
+  {
-  //   path: '/forget',
+    path: '/forget',
-  //   component: () => import('@/views/passport/forget/index.vue'),
+    component: () => import('@/views/passport/forget/index.vue'),
-  //   meta: { title: '忘记密码' }
+    meta: { title: '忘记密码' }
-  // },
+  },
   // {
   //   path: '/wx-work-login',
   //   component: () => import('@/views/passport/wx-work/index.vue'),

src/utils/request.ts

@@ -47,6 +47,11 @@ service.interceptors.request.use(
     }
     // 获取租户ID
     if (config.headers) {
+      // 登录前场景（找回密码等）由调用方显式设置 X-Tenant-Skip，
+      // 此时不做任何租户/企业/商户/域名头注入，避免串租户
+      if (config.headers['X-Tenant-Skip']) {
+        return config;
+      }
       // 附加企业ID
       const companyId = localStorage.getItem('CompanyId');
       if (companyId) {

src/views/passport/forget/index.vue

@@ -0,0 +1,507 @@
+<template>
+  <div
+    class="login-wrapper"
+    :style="{
+      backgroundImage: 'url(https://oss.wsdns.cn/20250105/314d2a3da10048b09ef0f0464fdacbff.jpg)'
+    }"
+  >
+    <div class="logo-login" v-if="config?.siteName">
+      <img :src="config.siteLogo" class="logo" />
+      <h4>{{ config.siteName }}</h4>
+    </div>
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      class="login-form ele-bg-white"
+    >
+      <div class="login-title flex justify-center items-center px-12">
+        <h4 class="title-btn active">{{ t('login.forgetPage.title') }}</h4>
+      </div>
+      <p class="forget-subtitle">{{ t('login.forgetPage.subTitle') }}</p>
+
+      <a-tabs
+        v-model:activeKey="activeTab"
+        class="forget-tabs"
+        @change="onTabChange"
+      >
+        <!-- 邮箱找回 -->
+        <a-tab-pane key="email" :tab="t('login.forgetPage.tabEmail')">
+          <a-form-item name="email">
+            <a-input
+              allow-clear
+              size="large"
+              v-model:value="form.email"
+              :placeholder="t('login.forgetPage.emailPlaceholder')"
+            >
+              <template #prefix>
+                <MailOutlined />
+              </template>
+            </a-input>
+          </a-form-item>
+          <a-form-item name="emailCode">
+            <div class="login-input-group">
+              <a-input
+                allow-clear
+                size="large"
+                :maxlength="6"
+                v-model:value="form.emailCode"
+                :placeholder="t('login.forgetPage.codePlaceholder')"
+              >
+                <template #prefix>
+                  <SafetyOutlined />
+                </template>
+              </a-input>
+              <a-button
+                class="login-captcha"
+                :disabled="!!countdownTime"
+                @click="sendCode"
+              >
+                <span v-if="!countdownTime">{{ t('login.forgetPage.getCode') }}</span>
+                <span v-else>{{ countdownTime }} s</span>
+              </a-button>
+            </div>
+          </a-form-item>
+        </a-tab-pane>
+
+        <!-- 手机找回 -->
+        <a-tab-pane key="phone" :tab="t('login.forgetPage.tabPhone')">
+          <a-form-item name="phone">
+            <a-input
+              allow-clear
+              size="large"
+              :maxlength="11"
+              v-model:value="form.phone"
+              :placeholder="t('login.forgetPage.phonePlaceholder')"
+            >
+              <template #prefix>
+                <MobileOutlined />
+              </template>
+            </a-input>
+          </a-form-item>
+          <a-form-item name="code">
+            <div class="login-input-group">
+              <a-input
+                allow-clear
+                size="large"
+                :maxlength="6"
+                v-model:value="form.code"
+                :placeholder="t('login.forgetPage.codePlaceholder')"
+              >
+                <template #prefix>
+                  <SafetyOutlined />
+                </template>
+              </a-input>
+              <a-button
+                class="login-captcha"
+                :disabled="!!countdownTime"
+                @click="sendCode"
+              >
+                <span v-if="!countdownTime">{{ t('login.forgetPage.getCode') }}</span>
+                <span v-else>{{ countdownTime }} s</span>
+              </a-button>
+            </div>
+          </a-form-item>
+        </a-tab-pane>
+      </a-tabs>
+
+      <a-form-item name="newPassword">
+        <a-input-password
+          size="large"
+          v-model:value="form.newPassword"
+          :placeholder="t('login.forgetPage.passwordPlaceholder')"
+        >
+          <template #prefix>
+            <LockOutlined />
+          </template>
+        </a-input-password>
+      </a-form-item>
+      <a-form-item name="confirmPassword">
+        <a-input-password
+          size="large"
+          v-model:value="form.confirmPassword"
+          :placeholder="t('login.forgetPage.confirmPlaceholder')"
+        >
+          <template #prefix>
+            <LockOutlined />
+          </template>
+        </a-input-password>
+      </a-form-item>
+
+      <a-form-item>
+        <a-button
+          block
+          size="large"
+          type="primary"
+          :loading="loading"
+          @click="submit"
+        >
+          {{ loading ? t('login.loading') : t('login.forgetPage.reset') }}
+        </a-button>
+      </a-form-item>
+      <div class="text-center pt-2">
+        <a class="login-forget" @click="goLogin">{{ t('login.forgetPage.backLogin') }}</a>
+      </div>
+    </a-form>
+    <div class="login-copyright">
+      <a-space>
+        <span>© {{ new Date().getFullYear() }}</span>
+        <span>{{ config?.copyright || 'websoft.top Inc.' }}</span>
+      </a-space>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, computed, onUnmounted } from 'vue';
+  import { useI18n } from 'vue-i18n';
+  import { useRouter } from 'vue-router';
+  import { message } from 'ant-design-vue';
+  import {
+    LockOutlined,
+    MobileOutlined,
+    SafetyOutlined,
+    MailOutlined
+  } from '@ant-design/icons-vue';
+  import { FormInstance } from 'ant-design-vue/es/form';
+  import {
+    sendSmsCaptchaByAdmin,
+    sendEmailCaptcha
+  } from '@/api/passport/login';
+  import { resetPassword } from '@/api/layout';
+  import useFormData from '@/utils/use-form-data';
+  import { Config } from '@/api/cms/cmsWebsiteField/model';
+
+  const { t } = useI18n();
+  const router = useRouter();
+
+  // 默认站点配置（与登录页保持一致）
+  const defaultConfig: Config = {
+    siteName: '小程序商城',
+    siteLogo: 'https://oss.wsdns.cn/20240822/0252ad4ed46449cdafe12f8d3d96c2ea.svg',
+    domain: '',
+    icpNo: '',
+    copyright: '',
+    loginBgImg: '',
+    address: '',
+    tel: '',
+    kefu2: '',
+    kefu1: '',
+    email: '',
+    loginTitle: '',
+    sysLogo: ''
+  };
+  const config = ref<Config>({ ...defaultConfig });
+
+  // 找回方式：email(邮箱) / phone(手机)，默认邮箱
+  const activeTab = ref<'email' | 'phone'>('email');
+
+  const { form } = useFormData<{
+    email: string;
+    emailCode: string;
+    phone: string;
+    code: string;
+    newPassword: string;
+    confirmPassword: string;
+  }>({
+    email: '',
+    emailCode: '',
+    phone: '',
+    code: '',
+    newPassword: '',
+    confirmPassword: ''
+  });
+
+  const formRef = ref<FormInstance | null>(null);
+  const loading = ref(false);
+
+  // 验证码倒计时
+  const countdownTime = ref(0);
+  let countdownTimer: number | null = null;
+
+  // 密码强度：至少8位，且包含字母和数字
+  const passwordRules = [
+    {
+      required: true,
+      message: t('login.forgetPage.newPasswordRule'),
+      trigger: 'blur'
+    },
+    { min: 8, message: t('login.forgetPage.newPasswordRule'), trigger: 'blur' },
+    {
+      pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d@$!%*#?&]{8,}$/,
+      message: t('login.forgetPage.newPasswordRule'),
+      trigger: 'blur'
+    }
+  ];
+  const confirmPasswordRules = [
+    {
+      required: true,
+      message: t('login.forgetPage.confirmRule'),
+      trigger: 'blur'
+    },
+    {
+      validator: (_rule: unknown, value: string) =>
+        value === form.newPassword
+          ? Promise.resolve()
+          : Promise.reject(new Error(t('login.forgetPage.confirmRule'))),
+      trigger: 'blur'
+    }
+  ];
+
+  // 根据当前找回方式动态生成校验规则
+  const rules = computed(() => {
+    if (activeTab.value === 'email') {
+      return {
+        email: [
+          { required: true, message: t('login.forgetPage.emailRule'), trigger: 'blur' },
+          { type: 'email', message: t('login.forgetPage.emailRule'), trigger: 'blur' }
+        ],
+        emailCode: [
+          { required: true, message: t('login.forgetPage.codeRule'), trigger: 'blur' }
+        ],
+        newPassword: passwordRules,
+        confirmPassword: confirmPasswordRules
+      };
+    }
+    return {
+      phone: [
+        { required: true, message: t('login.forgetPage.phoneRule'), trigger: 'blur' },
+        { pattern: /^1\d{10}$/, message: t('login.forgetPage.phoneRule'), trigger: 'blur' }
+      ],
+      code: [
+        { required: true, message: t('login.forgetPage.codeRule'), trigger: 'blur' }
+      ],
+      newPassword: passwordRules,
+      confirmPassword: confirmPasswordRules
+    };
+  });
+
+  const onTabChange = () => {
+    formRef.value?.clearValidate();
+  };
+
+  // 发送验证码（邮箱/手机）
+  const sendCode = () => {
+    if (activeTab.value === 'email') {
+      if (!form.email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) {
+        message.error(t('login.forgetPage.emailRule'));
+        return;
+      }
+      sendEmailCaptcha({ email: form.email }, { skipTenant: true })
+        .then(() => {
+          message.success(t('login.forgetPage.sentEmail'));
+          startCountdown();
+        })
+        .catch((e: Error) => message.error(e.message));
+    } else {
+      if (!form.phone || !/^1\d{10}$/.test(form.phone)) {
+        message.error(t('login.forgetPage.phoneRule'));
+        return;
+      }
+      sendSmsCaptchaByAdmin({ phone: form.phone }, { skipTenant: true })
+        .then(() => {
+          message.success(t('login.forgetPage.getCode'));
+          startCountdown();
+        })
+        .catch((e: Error) => message.error(e.message));
+    }
+  };
+
+  const startCountdown = () => {
+    countdownTime.value = 60;
+    countdownTimer = window.setInterval(() => {
+      if (countdownTime.value <= 1) {
+        countdownTimer && clearInterval(countdownTimer);
+        countdownTimer = null;
+      }
+      countdownTime.value--;
+    }, 1000);
+  };
+
+  const goLogin = () => {
+    router.push('/login');
+  };
+
+  // 提交重置
+  const submit = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const params: Record<string, unknown> = {
+          newPassword: form.newPassword,
+          confirmPassword: form.confirmPassword
+        };
+        if (activeTab.value === 'email') {
+          params.email = form.email;
+          params.emailCode = form.emailCode;
+        } else {
+          params.phone = form.phone;
+          params.smsCode = form.code;
+        }
+        resetPassword(params as any)
+          .then((msg) => {
+            message.success(msg || t('login.forgetPage.success'));
+            loading.value = false;
+            router.push('/login');
+          })
+          .catch((e: Error) => {
+            message.error(e.message);
+            loading.value = false;
+          });
+      })
+      .catch(() => {});
+  };
+
+  onUnmounted(() => {
+    if (countdownTimer) clearInterval(countdownTimer);
+  });
+</script>
+
+<style lang="less" scoped>
+  .login-wrapper {
+    padding: 48px 16px 0 16px;
+    position: relative;
+    box-sizing: border-box;
+    background-color: var(--grey-5);
+    background-repeat: no-repeat;
+    background-size: cover;
+    min-height: 100vh;
+
+    &:before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(0, 0, 0, 0.2);
+    }
+  }
+
+  .forget-subtitle {
+    text-align: center;
+    color: #8c8c8c;
+    margin: -8px 0 16px;
+    font-size: 13px;
+  }
+
+  .login-form {
+    width: 380px;
+    margin: 0 auto;
+    max-width: 100%;
+    padding: 0 28px;
+    box-sizing: border-box;
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
+    border-radius: 2px;
+    position: relative;
+    z-index: 2;
+
+    h4 {
+      padding: 22px 0;
+      text-align: center;
+    }
+
+    .title-btn {
+      cursor: pointer;
+      white-space: nowrap;
+    }
+
+    .login-title {
+      position: relative;
+      display: flex;
+      justify-content: space-around;
+      line-height: 50px;
+
+      .active {
+        color: #007dff;
+      }
+    }
+  }
+
+  .forget-tabs {
+    :deep(.ant-tabs-nav) {
+      margin-bottom: 20px;
+    }
+  }
+
+  .login-input-group {
+    display: flex;
+    align-items: center;
+    background-repeat: no-repeat;
+
+    :deep(.ant-input-affix-wrapper) {
+      flex: 1;
+    }
+
+    .login-captcha {
+      width: 102px;
+      height: 40px;
+      margin-left: 10px;
+      padding: 0;
+    }
+  }
+
+  .login-copyright {
+    color: #eee;
+    text-align: center;
+    padding: 48px 0 22px 0;
+    position: relative;
+    z-index: 1;
+  }
+
+  .logo-login {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+
+    img {
+      width: 28px;
+      height: 28px;
+      border-radius: 4px;
+    }
+
+    h4 {
+      margin-left: 6px;
+      color: #ffffff;
+      font-size: 20px;
+    }
+  }
+
+  @media screen and (min-height: 640px) {
+    .login-wrapper {
+      padding-top: 0;
+    }
+
+    .login-form {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translateX(-50%);
+      margin-top: -260px;
+    }
+
+    .login-copyright {
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
+  }
+
+  @media screen and (max-width: 768px) {
+    .login-form {
+      left: 50%;
+      right: auto;
+      margin-left: 0;
+      margin-right: auto;
+      transform: translateX(-50%);
+    }
+  }
+</style>