setVisible(true)} className={styles["mood-mask-1"]}>
diff --git a/projects/translate-h5/src/view/order/index.less b/projects/translate-h5/src/view/order/index.less
new file mode 100644
index 0000000..7fc4f2a
--- /dev/null
+++ b/projects/translate-h5/src/view/order/index.less
@@ -0,0 +1,32 @@
+.order {
+ background-color: #f5f5f5;
+ padding: 0;
+ box-sizing: border-box;
+ min-height: 100%;
+ .tab-box {
+ width: 100%;
+ overflow-x: auto;
+ overflow-y: hidden;
+ white-space: nowrap;
+ position: sticky;
+ top: 0;
+ z-index: 100;
+ // 隐藏滚动条
+ &::-webkit-scrollbar {
+ display: none;
+ }
+
+ // 对于 antd-mobile 的 Image 组件包装器
+ .adm-image {
+ display: inline-block;
+ vertical-align: top;
+
+ // 图片自适应高度
+ img {
+ height: auto;
+ width: auto;
+ max-width: none; // 允许图片超过容器宽度
+ }
+ }
+ }
+}
diff --git a/projects/translate-h5/src/view/order/index.tsx b/projects/translate-h5/src/view/order/index.tsx
new file mode 100644
index 0000000..8a7e040
--- /dev/null
+++ b/projects/translate-h5/src/view/order/index.tsx
@@ -0,0 +1,25 @@
+import MainLayout from "@/layout/main/mainLayout";
+import "./index.less";
+import { Image } from "antd-mobile";
+// import tabsSvg from "@/assets/order/tabs.svg";
+// import contant from "@/assets/order/contant.svg";
+import { useNavigate } from "react-router-dom";
+
+function Order() {
+ const tabsSvg = "http://qiniu.bydj.tashowz.com/assets/order/tabs.svg";
+ const contant = "http://qiniu.bydj.tashowz.com/assets/order/contant.svg";
+
+ const navigate = useNavigate();
+ return (
+
+
+
+
+
+
navigate("/order/detail")} src={contant}>
+
+ );
+}
+
+export default Order;
diff --git a/projects/translate-h5/src/view/orderDetail/index.less b/projects/translate-h5/src/view/orderDetail/index.less
new file mode 100644
index 0000000..52bc8b7
--- /dev/null
+++ b/projects/translate-h5/src/view/orderDetail/index.less
@@ -0,0 +1,14 @@
+.order-detail {
+ background-color: #f5f5f5;
+ padding: 0;
+ box-sizing: border-box;
+ min-height: 100%;
+ .order-contant {
+ padding-bottom: 90px;
+ }
+ .order-bottom {
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ }
+}
diff --git a/projects/translate-h5/src/view/orderDetail/index.tsx b/projects/translate-h5/src/view/orderDetail/index.tsx
new file mode 100644
index 0000000..3b8044f
--- /dev/null
+++ b/projects/translate-h5/src/view/orderDetail/index.tsx
@@ -0,0 +1,29 @@
+import MainLayout from "@/layout/main/mainLayout";
+import "./index.less";
+import { Image } from "antd-mobile";
+// import gdSvg from "@/assets/order/gd.svg";
+// import gdPng from "@/assets/order/gd.png";
+// import bottomSvg from "@/assets/order/bottom.svg";
+
+function OrderDetail() {
+ const gdSvg = "http://qiniu.bydj.tashowz.com/assets/order/gd.svg";
+ const gdPng = "http://qiniu.bydj.tashowz.com/assets/order/gd.png";
+ const bottomSvg = "http://qiniu.bydj.tashowz.com/assets/order/bottom.svg";
+
+ return (
+
+
+
+ );
+}
+
+export default OrderDetail;
diff --git a/projects/translate-h5/src/view/payment/index.less b/projects/translate-h5/src/view/payment/index.less
new file mode 100644
index 0000000..964ff46
--- /dev/null
+++ b/projects/translate-h5/src/view/payment/index.less
@@ -0,0 +1,64 @@
+.payment {
+ background-color: #f5f5f5;
+ padding: 0;
+ box-sizing: border-box;
+ min-height: 100%;
+ .payment-header {
+ position: sticky;
+ top: 0;
+ z-index: 100;
+ }
+ .payment-content {
+ padding: 12px;
+ padding-bottom: 160px;
+ .payment-cart {
+ position: relative;
+ margin-bottom: 10px;
+ .mask {
+ position: absolute;
+ z-index: 99;
+ width: 100%;
+ height: 45.5%;
+ top: 21%;
+ }
+ }
+ }
+ .payment-bottom {
+ position: fixed;
+ bottom: 0;
+ }
+}
+
+.popup-content {
+ max-height: 60vh;
+ overflow: auto;
+}
+
+.popup-header {
+ font-size: 16px;
+ display: flex;
+ justify-content: space-between;
+ padding: 12px;
+}
+
+.popup-bottom {
+ display: flex;
+ padding: 16px;
+ // 设置中间间隔
+ .popup-button {
+ flex: 1;
+ &:last-child {
+ margin-right: 0;
+ }
+ .cancel-button {
+ --background-color: #fff;
+ --border-color: #e9e9e9;
+ --text-color: #000000;
+ }
+ .confirm-button {
+ --background-color: #f5222d;
+ --border-color: #f5222d;
+ --text-color: #fff;
+ }
+ }
+}
diff --git a/projects/translate-h5/src/view/payment/index.tsx b/projects/translate-h5/src/view/payment/index.tsx
new file mode 100644
index 0000000..0102e6c
--- /dev/null
+++ b/projects/translate-h5/src/view/payment/index.tsx
@@ -0,0 +1,106 @@
+import MainLayout from "@/layout/main/mainLayout";
+import "./index.less";
+import { Button, Image, Popup } from "antd-mobile";
+// import HeaderSvg from "@/assets/payment/header.svg";
+// import Cart1Svg from "@/assets/payment/cart-1.svg";
+// import Cart2Svg from "@/assets/payment/cart-2.svg";
+// import Cart3Png from "@/assets/payment/cart-3.png";
+// import BottomPng from "@/assets/payment/bottom.png";
+// import PopupPng from "@/assets/payment/popup.png";
+import { CloseOutline } from "antd-mobile-icons";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+interface DefinedProps {
+ visible: boolean;
+ title: string;
+ children: React.ReactNode;
+ showBottom?: boolean;
+ onClose: () => void;
+}
+function MyPopup(props: DefinedProps) {
+ const { visible, title, children, onClose, showBottom = false } = props;
+ return (
+
+
+
{title}
+
+
+
+
+ {children}
+
+ {showBottom && (
+
+ )}
+
+ );
+}
+
+function Payment() {
+ const HeaderSvg = "http://qiniu.bydj.tashowz.com/assets/payment/header.svg";
+ const Cart1Svg = "http://qiniu.bydj.tashowz.com/assets/payment/cart-1.svg";
+ const Cart2Svg = "http://qiniu.bydj.tashowz.com/assets/payment/cart-2.svg";
+ const Cart3Png = "http://qiniu.bydj.tashowz.com/assets/payment/cart-3.png";
+ const BottomPng = "http://qiniu.bydj.tashowz.com/assets/payment/bottom.png";
+ const PopupPng = "http://qiniu.bydj.tashowz.com/assets/payment/popup.png";
+
+ const [visible, setVisible] = useState(false);
+
+ const navigate = useNavigate();
+
+ const onLink = (link: string) => {
+ navigate(link);
+ };
+
+ return (
+
+
+
+
+
+
+
{
+ setVisible(true);
+ }}
+ className="payment-cart"
+ >
+
+
+
+
+
+
+
+
+
+
+
+ onLink("/result")} src={BottomPng}>
+
+
+
{
+ setVisible(false);
+ }}
+ showBottom={true}
+ >
+
+
+
+
+
+ );
+}
+
+export default Payment;
diff --git a/projects/translate-h5/src/view/result/index.less b/projects/translate-h5/src/view/result/index.less
new file mode 100644
index 0000000..ace1fcf
--- /dev/null
+++ b/projects/translate-h5/src/view/result/index.less
@@ -0,0 +1,13 @@
+.result {
+ min-height: 100%;
+ padding: 0 24px;
+ padding-top: 92px;
+
+ .bottom {
+ position: fixed;
+ width: 100%;
+ bottom: 0;
+ left: 0;
+ background-color: #fff;
+ }
+}
diff --git a/projects/translate-h5/src/view/result/index.tsx b/projects/translate-h5/src/view/result/index.tsx
new file mode 100644
index 0000000..78a79bc
--- /dev/null
+++ b/projects/translate-h5/src/view/result/index.tsx
@@ -0,0 +1,34 @@
+import MainLayout from "@/layout/main/mainLayout";
+import "./index.less";
+import { Image } from "antd-mobile";
+
+// import TitlePng from "@/assets/result/title.png";
+// import ContentSvg from "@/assets/result/content.svg";
+// import BottomSvg from "@/assets/result/bottom.svg";
+import { useNavigate } from "react-router-dom";
+
+function Result() {
+ const TitlePng = "http://qiniu.bydj.tashowz.com/assets/result/title.png";
+ const ContentSvg = "http://qiniu.bydj.tashowz.com/assets/result/content.svg";
+ const BottomSvg = "http://qiniu.bydj.tashowz.com/assets/result/bottom.svg";
+
+ const navigate = useNavigate();
+
+ const onLink = (link: string) => {
+ navigate(link);
+ };
+
+ return (
+
+
+
+
+
+ onLink("/service")} src={BottomSvg} />
+
+
+ );
+}
+
+export default Result;
diff --git a/projects/translate-h5/src/view/service/index.module.less b/projects/translate-h5/src/view/service/index.module.less
new file mode 100644
index 0000000..d9ec3dd
--- /dev/null
+++ b/projects/translate-h5/src/view/service/index.module.less
@@ -0,0 +1,29 @@
+.service {
+ background-color: #f5f5f5;
+ padding: 12px 0;
+ box-sizing: border-box;
+ min-height: 100%;
+}
+
+.homeHeader {
+ display: flex;
+ padding: 12px;
+ position: sticky;
+ top: 0px;
+ background: #f5f5f5;
+ justify-content: space-between;
+ align-items: center;
+ z-index: 99;
+ h3 {
+ font-size: 20px;
+ font-size: 20px;
+ }
+ .headerItem {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ p {
+ font-size: 12px;
+ }
+ }
+}
diff --git a/projects/translate-h5/src/view/service/index.tsx b/projects/translate-h5/src/view/service/index.tsx
new file mode 100644
index 0000000..7dc69d5
--- /dev/null
+++ b/projects/translate-h5/src/view/service/index.tsx
@@ -0,0 +1,44 @@
+import MainLayout from "@/layout/main/mainLayout";
+import styles from "./index.module.less";
+import { Space, Image } from "antd-mobile";
+import { HeadsetOne, TextMessage, TransactionOrder } from "@icon-park/react";
+import { useNavigate } from "react-router-dom";
+
+function Service() {
+ const navigate = useNavigate();
+
+ const content = "http://qiniu.bydj.tashowz.com/assets/service/content.png";
+
+ const onLink = (link: string) => {
+ navigate(link);
+ };
+
+ return (
+
+
+
宠物服务
+
+
+
+
+
+ onLink("/order")} className={styles.headerItem}>
+
+
订单
+
+
+ onLink("/service/detail")} src={content}>
+
+
+ );
+}
+
+export default Service;
diff --git a/projects/translate-h5/src/view/serviceDetail/index.less b/projects/translate-h5/src/view/serviceDetail/index.less
new file mode 100644
index 0000000..95e5308
--- /dev/null
+++ b/projects/translate-h5/src/view/serviceDetail/index.less
@@ -0,0 +1,64 @@
+.service-detail {
+ background-color: #f5f5f5;
+ padding: 0;
+ box-sizing: border-box;
+ min-height: 100%;
+ .swipers {
+ padding-top: 20px;
+ box-sizing: border-box;
+ .swiper-item {
+ margin: 0 10px;
+ }
+ }
+
+ .content {
+ padding: 8px;
+
+ padding-bottom: 92px;
+ .service-item {
+ background-color: #fff;
+ border-radius: 16px;
+ margin-top: 12px;
+ &:first-child {
+ padding: 16px;
+ .tabs {
+ margin: 12px 0;
+ width: 100%;
+ overflow-x: auto;
+ overflow-y: hidden;
+ white-space: nowrap;
+ // 隐藏滚动条
+ &::-webkit-scrollbar {
+ display: none;
+ }
+
+ // 对于 antd-mobile 的 Image 组件包装器
+ .adm-image {
+ display: inline-block;
+ vertical-align: top;
+
+ // 图片自适应高度
+ img {
+ height: auto;
+ width: auto;
+ max-width: none; // 允许图片超过容器宽度
+ }
+ }
+ }
+ }
+ }
+ }
+
+ .bottom {
+ position: fixed;
+ bottom: 0;
+ width: 100%;
+ background-color: #fff;
+ display: flex;
+ justify-content: space-between;
+ box-sizing: border-box;
+ padding: 0 16px;
+ padding-top: 16px;
+ padding-bottom: 36px;
+ }
+}
diff --git a/projects/translate-h5/src/view/serviceDetail/index.tsx b/projects/translate-h5/src/view/serviceDetail/index.tsx
new file mode 100644
index 0000000..50d8e5c
--- /dev/null
+++ b/projects/translate-h5/src/view/serviceDetail/index.tsx
@@ -0,0 +1,93 @@
+import MainLayout from "@/layout/main/mainLayout";
+import "./index.less";
+import { Image, Swiper } from "antd-mobile";
+import { useNavigate } from "react-router-dom";
+
+function ServiceDetail() {
+ const Swiper1Png = "http://qiniu.bydj.tashowz.com/assets/service/swiper-1.png";
+ const Swiper2Png = "http://qiniu.bydj.tashowz.com/assets/service/swiper-2.png";
+ const Swiper3Png = "http://qiniu.bydj.tashowz.com/assets/service/swiper-3.png";
+ const DetailPricePng = "http://qiniu.bydj.tashowz.com/assets/service/detail-price.png";
+ const DetailTapsSvg = "http://qiniu.bydj.tashowz.com/assets/service/detail-taps.svg";
+ const DetailTitlePng = "http://qiniu.bydj.tashowz.com/assets/service/detail-title.png";
+ const SzzPng = "http://qiniu.bydj.tashowz.com/assets/service/szz.png";
+ const SzSvg = "http://qiniu.bydj.tashowz.com/assets/service/sz.svg";
+ const NoBoxSvg = "http://qiniu.bydj.tashowz.com/assets/service/noBox.svg";
+ const BottomLSvg = "http://qiniu.bydj.tashowz.com/assets/service/bottom-l.svg";
+ const BottomRSvg = "http://qiniu.bydj.tashowz.com/assets/service/bottom-r.svg";
+
+ // 批量导入
+ // const images = import.meta.glob("@/assets/service/detail/*.png", { eager: true, as: "url" });
+
+ const images = Array.from({ length: 19 }, (_, index) => {
+ const num = index + 1;
+ return `http://qiniu.bydj.tashowz.com/assets/service/detail/${num}.png`;
+ });
+
+ const navigate = useNavigate();
+
+ const onLink = (link: string) => {
+ navigate(link);
+ };
+
+ const swipers = [{ src: Swiper1Png }, { src: Swiper2Png }, { src: Swiper3Png }];
+
+ return (
+
+
+
+
+ {swipers.map((item, index) => {
+ return (
+
+
+
+
+
+ );
+ })}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {images.map((src, index) => {
+ return ;
+ })}
+
+
+
+
+
+ onLink("/payment")} src={BottomRSvg}>
+
+
+ );
+}
+
+export default ServiceDetail;
diff --git a/projects/translate-h5/src/view/user/index.module.less b/projects/translate-h5/src/view/user/index.module.less
new file mode 100644
index 0000000..3f67373
--- /dev/null
+++ b/projects/translate-h5/src/view/user/index.module.less
@@ -0,0 +1,30 @@
+.user {
+ background-color: #f5f5f5;
+ padding: 0;
+ box-sizing: border-box;
+ min-height: 100%;
+}
+
+.homeHeader {
+ display: flex;
+ padding: 12px;
+ padding-left: 0;
+ position: sticky;
+ top: 0px;
+ background: #f5f5f5;
+ justify-content: space-between;
+ align-items: center;
+ z-index: 99;
+ h3 {
+ font-size: 20px;
+ font-size: 20px;
+ }
+ .headerItem {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ p {
+ font-size: 12px;
+ }
+ }
+}
diff --git a/projects/translate-h5/src/view/user/index.tsx b/projects/translate-h5/src/view/user/index.tsx
new file mode 100644
index 0000000..c0ab79b
--- /dev/null
+++ b/projects/translate-h5/src/view/user/index.tsx
@@ -0,0 +1,47 @@
+import MainLayout from "@/layout/main/mainLayout";
+import styles from "./index.module.less";
+import { Space, Image } from "antd-mobile";
+import { HeadsetOne, Config, TextMessage } from "@icon-park/react";
+import { useNavigate } from "react-router-dom";
+
+function User() {
+ const headerSvg = "http://qiniu.bydj.tashowz.com/assets/user/header.svg";
+ const cartPng = "http://qiniu.bydj.tashowz.com/assets/user/cart.png";
+ const toolPng = "http://qiniu.bydj.tashowz.com/assets/user/tool.png";
+
+ const navigate = useNavigate();
+ const onLink = (link: string) => {
+ // safeNavigate(link);
+ navigate(link);
+ };
+
+ return (
+
+
+
+
onLink("/order")} src={cartPng}>
+
+
+ );
+}
+
+export default User;
diff --git a/projects/translate-h5/src/view/wxIndex/index.less b/projects/translate-h5/src/view/wxIndex/index.less
new file mode 100644
index 0000000..c08fe0f
--- /dev/null
+++ b/projects/translate-h5/src/view/wxIndex/index.less
@@ -0,0 +1,12 @@
+.wx {
+ width: 100%;
+ height: 100%;
+ background: #00000080;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ color: #ffffffdd;
+ font-size: 16px;
+ gap: 10px;
+}
diff --git a/projects/translate-h5/src/view/wxIndex/index.tsx b/projects/translate-h5/src/view/wxIndex/index.tsx
new file mode 100644
index 0000000..a86c4c1
--- /dev/null
+++ b/projects/translate-h5/src/view/wxIndex/index.tsx
@@ -0,0 +1,15 @@
+import MainLayout from "@/layout/main/mainLayout";
+import "./index.less";
+
+function WXIndex() {
+ return (
+
+
+
1.点击右上角
+
2.点击使用浏览器打开
+
+ );
+}
+
+export default WXIndex;
diff --git a/projects/translate-h5/vite.config.ts b/projects/translate-h5/vite.config.ts
index 913c185..30c4d45 100644
--- a/projects/translate-h5/vite.config.ts
+++ b/projects/translate-h5/vite.config.ts
@@ -15,6 +15,7 @@ export default defineConfig({
proxy: {
"/app-api": {
target: "https://petshy.tashowz.com",
+ // target: "http://192.168.1.231:48080",
changeOrigin: true,
},
},