From 76827aedfe3bbd7b655b1092dcb0c1b7a75397d7 Mon Sep 17 00:00:00 2001 From: RyRh <3123294924@qq.com> Date: Thu, 20 Aug 2026 18:29:49 +0800 Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E6=AC=A1=E6=8F=90=E4=BA=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- App.vue | 20 + README.md | 87 + app.css | 230 + index.html | 20 + main.js | 28 + manifest.json | 70 + package.json | 12 + pages.json | 54 + pages/index/index.css | 828 + pages/index/index.vue | 532 + pages/product-detail/product-detail.css | 327 + pages/product-detail/product-detail.vue | 303 + pages/products/products.css | 500 + pages/products/products.vue | 760 + sitemap.json | 9 + transform.log | 40 + uni.scss | 76 + uni_modules/mp-html/README.md | 193 + uni_modules/mp-html/changelog.md | 129 + .../mp-html/components/mp-html/mp-html.vue | 498 + .../mp-html/components/mp-html/node/node.vue | 576 + .../mp-html/components/mp-html/parser.js | 1335 ++ uni_modules/mp-html/package.json | 76 + .../static/app-plus/mp-html/js/handler.js | 1 + .../app-plus/mp-html/js/uni.webview.min.js | 1 + .../static/app-plus/mp-html/local.html | 1 + uni_modules/p-f-unicom/1.jpg | Bin 0 -> 80482 bytes uni_modules/p-f-unicom/README.md | 188 + uni_modules/p-f-unicom/changelog.md | 2 + uni_modules/p-f-unicom/index.js | 369 + uni_modules/p-f-unicom/package.json | 84 + uni_modules/zp-mixins/changelog.md | 14 + uni_modules/zp-mixins/index.js | 52 + uni_modules/zp-mixins/index.ts | 31 + uni_modules/zp-mixins/lifecycle/index.js | 2 + .../zp-mixins/lifecycle/pageLifetimes.js | 39 + uni_modules/zp-mixins/methods/clone.js | 10 + uni_modules/zp-mixins/methods/dataset.js | 21 + uni_modules/zp-mixins/methods/escape.js | 36 + uni_modules/zp-mixins/methods/event.js | 10 + uni_modules/zp-mixins/methods/getTabBar.js | 19 + uni_modules/zp-mixins/methods/index.js | 8 + uni_modules/zp-mixins/methods/relation.js | 10 + .../zp-mixins/methods/selectComponent.js | 196 + uni_modules/zp-mixins/methods/setData.js | 90 + uni_modules/zp-mixins/package.json | 86 + uni_modules/zp-mixins/readme.md | 107 + uni_modules/zp-mixins/utils/_set.js | 26 + uni_modules/zp-mixins/utils/debounce.js | 17 + .../dev/.automator/mp-weixin/.automator.json | 0 .../.sourcemap/mp-weixin/common/main.js.map | 1 + .../mp-weixin/common/runtime.js.map | 1 + .../.sourcemap/mp-weixin/common/vendor.js.map | 1 + .../mp-weixin/pages/index/index.js.map | 1 + .../product-detail/product-detail.js.map | 1 + .../mp-weixin/pages/products/products.js.map | 1 + unpackage/dist/dev/mp-weixin/app.js | 4 + unpackage/dist/dev/mp-weixin/app.json | 39 + unpackage/dist/dev/mp-weixin/app.wxss | 3 + unpackage/dist/dev/mp-weixin/common/main.js | 152 + unpackage/dist/dev/mp-weixin/common/main.wxss | 208 + .../dist/dev/mp-weixin/common/runtime.js | 158 + unpackage/dist/dev/mp-weixin/common/vendor.js | 12756 ++++++++++++++++ .../dist/dev/mp-weixin/pages/index/index.js | 664 + .../dist/dev/mp-weixin/pages/index/index.json | 5 + .../dist/dev/mp-weixin/pages/index/index.wxml | 1 + .../dist/dev/mp-weixin/pages/index/index.wxss | 724 + .../pages/product-detail/product-detail.js | 444 + .../pages/product-detail/product-detail.json | 4 + .../pages/product-detail/product-detail.wxml | 1 + .../pages/product-detail/product-detail.wxss | 283 + .../dev/mp-weixin/pages/products/products.js | 866 ++ .../mp-weixin/pages/products/products.json | 4 + .../mp-weixin/pages/products/products.wxml | 1 + .../mp-weixin/pages/products/products.wxss | 446 + .../dist/dev/mp-weixin/project.config.json | 36 + unpackage/dist/dev/mp-weixin/sitemap.json | 9 + 77 files changed, 24937 insertions(+) create mode 100644 App.vue create mode 100644 README.md create mode 100644 app.css create mode 100644 index.html create mode 100644 main.js create mode 100644 manifest.json create mode 100644 package.json create mode 100644 pages.json create mode 100644 pages/index/index.css create mode 100644 pages/index/index.vue create mode 100644 pages/product-detail/product-detail.css create mode 100644 pages/product-detail/product-detail.vue create mode 100644 pages/products/products.css create mode 100644 pages/products/products.vue create mode 100644 sitemap.json create mode 100644 transform.log create mode 100644 uni.scss create mode 100644 uni_modules/mp-html/README.md create mode 100644 uni_modules/mp-html/changelog.md create mode 100644 uni_modules/mp-html/components/mp-html/mp-html.vue create mode 100644 uni_modules/mp-html/components/mp-html/node/node.vue create mode 100644 uni_modules/mp-html/components/mp-html/parser.js create mode 100644 uni_modules/mp-html/package.json create mode 100644 uni_modules/mp-html/static/app-plus/mp-html/js/handler.js create mode 100644 uni_modules/mp-html/static/app-plus/mp-html/js/uni.webview.min.js create mode 100644 uni_modules/mp-html/static/app-plus/mp-html/local.html create mode 100644 uni_modules/p-f-unicom/1.jpg create mode 100644 uni_modules/p-f-unicom/README.md create mode 100644 uni_modules/p-f-unicom/changelog.md create mode 100644 uni_modules/p-f-unicom/index.js create mode 100644 uni_modules/p-f-unicom/package.json create mode 100644 uni_modules/zp-mixins/changelog.md create mode 100644 uni_modules/zp-mixins/index.js create mode 100644 uni_modules/zp-mixins/index.ts create mode 100644 uni_modules/zp-mixins/lifecycle/index.js create mode 100644 uni_modules/zp-mixins/lifecycle/pageLifetimes.js create mode 100644 uni_modules/zp-mixins/methods/clone.js create mode 100644 uni_modules/zp-mixins/methods/dataset.js create mode 100644 uni_modules/zp-mixins/methods/escape.js create mode 100644 uni_modules/zp-mixins/methods/event.js create mode 100644 uni_modules/zp-mixins/methods/getTabBar.js create mode 100644 uni_modules/zp-mixins/methods/index.js create mode 100644 uni_modules/zp-mixins/methods/relation.js create mode 100644 uni_modules/zp-mixins/methods/selectComponent.js create mode 100644 uni_modules/zp-mixins/methods/setData.js create mode 100644 uni_modules/zp-mixins/package.json create mode 100644 uni_modules/zp-mixins/readme.md create mode 100644 uni_modules/zp-mixins/utils/_set.js create mode 100644 uni_modules/zp-mixins/utils/debounce.js create mode 100644 unpackage/dist/dev/.automator/mp-weixin/.automator.json create mode 100644 unpackage/dist/dev/.sourcemap/mp-weixin/common/main.js.map create mode 100644 unpackage/dist/dev/.sourcemap/mp-weixin/common/runtime.js.map create mode 100644 unpackage/dist/dev/.sourcemap/mp-weixin/common/vendor.js.map create mode 100644 unpackage/dist/dev/.sourcemap/mp-weixin/pages/index/index.js.map create mode 100644 unpackage/dist/dev/.sourcemap/mp-weixin/pages/product-detail/product-detail.js.map create mode 100644 unpackage/dist/dev/.sourcemap/mp-weixin/pages/products/products.js.map create mode 100644 unpackage/dist/dev/mp-weixin/app.js create mode 100644 unpackage/dist/dev/mp-weixin/app.json create mode 100644 unpackage/dist/dev/mp-weixin/app.wxss create mode 100644 unpackage/dist/dev/mp-weixin/common/main.js create mode 100644 unpackage/dist/dev/mp-weixin/common/main.wxss create mode 100644 unpackage/dist/dev/mp-weixin/common/runtime.js create mode 100644 unpackage/dist/dev/mp-weixin/common/vendor.js create mode 100644 unpackage/dist/dev/mp-weixin/pages/index/index.js create mode 100644 unpackage/dist/dev/mp-weixin/pages/index/index.json create mode 100644 unpackage/dist/dev/mp-weixin/pages/index/index.wxml create mode 100644 unpackage/dist/dev/mp-weixin/pages/index/index.wxss create mode 100644 unpackage/dist/dev/mp-weixin/pages/product-detail/product-detail.js create mode 100644 unpackage/dist/dev/mp-weixin/pages/product-detail/product-detail.json create mode 100644 unpackage/dist/dev/mp-weixin/pages/product-detail/product-detail.wxml create mode 100644 unpackage/dist/dev/mp-weixin/pages/product-detail/product-detail.wxss create mode 100644 unpackage/dist/dev/mp-weixin/pages/products/products.js create mode 100644 unpackage/dist/dev/mp-weixin/pages/products/products.json create mode 100644 unpackage/dist/dev/mp-weixin/pages/products/products.wxml create mode 100644 unpackage/dist/dev/mp-weixin/pages/products/products.wxss create mode 100644 unpackage/dist/dev/mp-weixin/project.config.json create mode 100644 unpackage/dist/dev/mp-weixin/sitemap.json diff --git a/App.vue b/App.vue new file mode 100644 index 0000000..614f749 --- /dev/null +++ b/App.vue @@ -0,0 +1,20 @@ + + diff --git a/README.md b/README.md new file mode 100644 index 0000000..da0fa79 --- /dev/null +++ b/README.md @@ -0,0 +1,87 @@ +# miniprogram-to-uniapp 转换说明 + +## 0x00 转换模式 +根据转换模式，转换后的项目使用相应的工具打开，目前有两种模式： + +### HBuilder X 模式 +转换后的目录(以_uni结尾的目录), 需使用HBuilder X导入，进行运行和调试。 +如果项目使用了npm模块，需先使用npm install等命令进行安装，然后再运行 + +### Vue-cli 模式 +转换后的目录(以_vue-cli结尾的目录), 需使用命令行安装依赖、运行和打包。 +详见文档：https://uniapp.dcloud.io/quickstart-cli.html#%E8%BF%90%E8%A1%8C%E3%80%81%E5%8F%91%E5%B8%83uni-app + +注： +上述两种项目类型，可以相互转换。 +[uni-app HBuilderX 工程与 vue-cli 工程相互转换](https://ask.dcloud.net.cn/article/35750) + + +## 0x01 调试建议 +如果您想转换小程序为uni-app项目，并发布为App， +建议运行到H5平台，因为H5平台速度快，而且与App平台贴合度更高。 +只有当强依赖硬件时，才使用真机调试，这样可以节约时间！ + + +## 0x02 常见问题 +### 1.命令行提示：“'wtu'不是内部或外部命令, 也不是可运行的程序” +一般是node未安装在默认目录导致的，参照文章 [解决“npm不是内部或外部命令“](https://www.cnblogs.com/ldq678/p/10291824.html) 解决。 + + +### 2.PowerShell里提示：无法加载文件 XXXXXXXXX.ps1，因为在此系统上禁止运行脚本。 +以管理员身份运行`powershell`，执行 +``` +set-executionpolicy remotesigned +``` +输入 y 即可 +或者，在PowerShell输入 `cmd` 后回车也行 + + +### 3.setData为什么没有转换？需要我手动改吗？那我有100多个页面怎么改呀？ +`setData`函数已内置，在main.js通过mixin全局混入，所以不用转换，可直接使用`setData`函数！！！ + + +### 4.命令行报错："cannot read property ‘某某某’ of undefined" +报错解释：有代码“`xx.某某某`”，但xx的值是undefined，因此，需要进报错的页面，调试调试，为啥xx为undefined，相应的调试代码即可。 +常见原因：可能接口跨域，可能真的没值，也可能没声明变量，也可能是工具转换问题等。 + + +### 5.为什么我运行到H5或app时，拿不到小程序用户的信息？为什么登录失败？ +转换后的uni-app项目，如需运行到其他小程序、H5和App时，登录和支付功能均需“重新对接”，需要增加 “新” 接口！ + + +### 6.跨域问题：为什么我的接口都没有返回数据呀？ +控制台有“CORS”、“Access-Control-Allow-Origin”等关键字时，不要犹豫，果断判断是因为跨域，导致访问接口失败。 +跨域，前端老生常谈，有N种解决办法，最简单的办法是运行到“内置浏览器”。 +PS: 仅仅 H5 平台存在跨域问题！发布后上传到服务器无此问题！ + + +### 7.Vant项目怎么转换呀？ + +Vant项目比较常见的报错是：代码``转到后，运行会报错，因为uni-app不支持在class里面写函数） + +由于Vant的一些语法uni-app并不支持，因此需要特殊处理一下，这里分享三种方案，可以根据自己的情况进行选择。 + +#### 方案一：【替换Vant组件】 +转换前，将vant组件全部用别的组件库替换掉再转换。 + +#### 方案二：【替换Vant组件】 +转换后，将vant组件使用uview1.x替换掉同功能组件。 + +#### 方案三：【不替换Vant组件】 +转换后，按uniapp引入小程序组件文档重新引入vant组件（小程序自定义组件支持： +https://uniapp.dcloud.io/tutorial/miniprogram-subject.html#%E5%B0%8F%E7%A8%8B%E5%BA%8F%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E6%94%AF%E6%8C%81） + + +### 8.小程序转换为uni-app项目后，还能转换成其他小程序项目吗？ +当然可以，必须可以！ +小程序转换为uni-app项目后，就是uni-app项目了，uni-app项目能做啥就能做啥， +能再次生成为各种小程序、发布H5和App。 + + +### 9.uni-app生成的小程序项目，还能再转换回uni-app项目吗？ +不能。不支持这种项目的转换！ + + +### 其他 +- 因各种原因，本工具并非100%完美转换！有问题实属正常！ +- 如遇运行报错，请在https://github.com/zhangdaren/miniprogram-to-uniapp，将详细情况提交Issue！ diff --git a/app.css b/app.css new file mode 100644 index 0000000..af12b00 --- /dev/null +++ b/app.css @@ -0,0 +1,230 @@ +/* 全局样式 - 印美达 Inkreach 微信小程序 */ +page { + --color-primary: #ff6800; + --color-primary-light: #fff0e5; + --color-primary-dark: #e55a00; + --color-secondary: #f26522; + --color-dark: #121212; + --color-text-primary: #333333; + --color-text-secondary: #666666; + --color-text-tertiary: #999999; + --color-bg-page: #f5f5f5; + --color-bg-card: #ffffff; + --color-border: #eeeeee; + --color-tag-bg: #f2f2f2; + --color-success: #52c41a; + --color-warning: #faad14; + + --radius-sm: 8rpx; + --radius-md: 12rpx; + --radius-lg: 20rpx; + --radius-xl: 32rpx; + + --spacing-xs: 8rpx; + --spacing-sm: 16rpx; + --spacing-md: 24rpx; + --spacing-lg: 32rpx; + --spacing-xl: 48rpx; + + font-size: 28rpx; + color: var(--color-text-primary); + background-color: var(--color-bg-page); + font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; +} + +/* 通用样式 */ +.container { + min-height: 100vh; + background-color: var(--color-bg-page); +} + +.flex-row { + display: flex; + flex-direction: row; + align-items: center; +} + +.flex-col { + display: flex; + flex-direction: column; +} + +.flex-center { + display: flex; + align-items: center; + justify-content: center; +} + +.flex-between { + display: flex; + align-items: center; + justify-content: space-between; +} + +.flex-1 { + flex: 1; +} + +.flex-wrap { + display: flex; + flex-wrap: wrap; +} + +/* 文字样式 */ +.text-primary { + color: var(--color-primary); +} +.text-secondary { + color: var(--color-text-secondary); +} +.text-tertiary { + color: var(--color-text-tertiary); +} +.text-white { + color: #ffffff; +} + +.text-bold { + font-weight: 600; +} +.text-center { + text-align: center; +} + +.text-sm { + font-size: 24rpx; +} +.text-md { + font-size: 28rpx; +} +.text-lg { + font-size: 32rpx; +} +.text-xl { + font-size: 40rpx; +} +.text-xxl { + font-size: 56rpx; +} + +/* 间距 */ +.mt-xs { + margin-top: 8rpx; +} +.mt-sm { + margin-top: 16rpx; +} +.mt-md { + margin-top: 24rpx; +} +.mt-lg { + margin-top: 32rpx; +} +.mt-xl { + margin-top: 48rpx; +} + +.mb-xs { + margin-bottom: 8rpx; +} +.mb-sm { + margin-bottom: 16rpx; +} +.mb-md { + margin-bottom: 24rpx; +} +.mb-lg { + margin-bottom: 32rpx; +} + +.p-sm { + padding: 16rpx; +} +.p-md { + padding: 24rpx; +} +.p-lg { + padding: 32rpx; +} + +.px-md { + padding-left: 24rpx; + padding-right: 24rpx; +} +.px-lg { + padding-left: 32rpx; + padding-right: 32rpx; +} + +/* 按钮 */ +.btn-primary { + display: inline-flex; + align-items: center; + justify-content: center; + background-color: var(--color-primary); + color: #ffffff; + font-size: 28rpx; + font-weight: 500; + padding: 20rpx 48rpx; + border-radius: var(--radius-lg); + border: none; + line-height: 1.5; +} + +.btn-primary::after { + border: none; +} + +.btn-outline { + display: inline-flex; + align-items: center; + justify-content: center; + background-color: transparent; + color: var(--color-primary); + font-size: 28rpx; + font-weight: 500; + padding: 20rpx 48rpx; + border-radius: var(--radius-lg); + border: 2rpx solid var(--color-primary); + line-height: 1.5; +} + +.btn-outline::after { + border: none; +} + +/* 卡片 */ +.card { + background-color: var(--color-bg-card); + border-radius: var(--radius-md); + padding: 24rpx; + box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04); +} + +/* 标签 */ +.tag { + display: inline-flex; + align-items: center; + padding: 4rpx 16rpx; + border-radius: var(--radius-sm); + font-size: 20rpx; + background-color: var(--color-tag-bg); + color: var(--color-text-secondary); +} + +.tag-primary { + background-color: var(--color-primary-light); + color: var(--color-primary); +} + +/* 分割线 */ +.divider { + width: 100%; + height: 1rpx; + background-color: var(--color-border); +} + +/* 安全区底部 */ +.safe-bottom { + padding-bottom: env(safe-area-inset-bottom); +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..c3ff205 --- /dev/null +++ b/index.html @@ -0,0 +1,20 @@ + + + + + + + + + + +
+ + + diff --git a/main.js b/main.js new file mode 100644 index 0000000..5016b80 --- /dev/null +++ b/main.js @@ -0,0 +1,28 @@ +import App from './App'; + +// 全局mixins，用于实现setData等功能，请勿删除！'; +import zpMixins from '@/uni_modules/zp-mixins/index.js'; + +// #ifndef VUE3 +import Vue from 'vue'; + +Vue.use(zpMixins); + +Vue.config.productionTip = false; +App.mpType = 'app'; +const app = new Vue({ + ...App +}); +app.$mount(); +// #endif + +// #ifdef VUE3 +import { createSSRApp } from 'vue'; +export function createApp() { + const app = createSSRApp(App); + app.mixin(zpMixins); + return { + app + }; +} +// #endif diff --git a/manifest.json b/manifest.json new file mode 100644 index 0000000..210f49a --- /dev/null +++ b/manifest.json @@ -0,0 +1,70 @@ +{ + "name": "inkreach-miniprogram", + "appid": "", + "description": "", + "versionName": "1.0.0", + "versionCode": "100", + "transformPx": false, + "app-plus": { + "usingComponents": true, + "nvueStyleCompiler": "uni-app", + "compilerVersion": 3, + "splashscreen": { + "alwaysShowBeforeRender": true, + "waiting": true, + "autoclose": true, + "delay": 0 + }, + "modules": {}, + "distribute": { + "android": { + "permissions": [ + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "" + ] + }, + "ios": {}, + "sdkConfigs": {} + } + }, + "quickapp": {}, + "mp-weixin": { + "appid": "wxd0e6eff3c220337b", + "setting": { + "urlCheck": false + }, + "usingComponents": true, + "permission": { + "scope.userLocation": { + "desc": "你的位置信息将用于小程序位置接口的效果展示" + } + }, + "plugins": {} + }, + "mp-alipay": { + "usingComponents": true + }, + "mp-baidu": { + "usingComponents": true + }, + "mp-toutiao": { + "usingComponents": true + }, + "uniStatistics": { + "enable": false + }, + "vueVersion": "2" +} \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..60775bd --- /dev/null +++ b/package.json @@ -0,0 +1,12 @@ +{ + "name": "inkreach-miniprogram", + "version": "1.0.0", + "description": "", + "main": "main.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "", + "dependencies": {}, + "license": "ISC" +} \ No newline at end of file diff --git a/pages.json b/pages.json new file mode 100644 index 0000000..b6fbd88 --- /dev/null +++ b/pages.json @@ -0,0 +1,54 @@ +{ + "pages": [ + { + "path": "pages/index/index", + "style": { + "navigationBarTitleText": "印美达 Inkreach", + "navigationStyle": "custom", + "usingComponents": {} + } + }, + { + "path": "pages/products/products", + "style": { + "navigationBarTitleText": "产品中心", + "usingComponents": {} + } + }, + { + "path": "pages/product-detail/product-detail", + "style": { + "navigationBarTitleText": "产品详情", + "usingComponents": {} + } + } + ], + "tabBar": { + "color": "#999999", + "selectedColor": "#FF6800", + "backgroundColor": "#ffffff", + "borderStyle": "white", + "list": [ + { + "pagePath": "pages/index/index", + "text": "首页" + }, + { + "pagePath": "pages/products/products", + "text": "产品" + } + ] + }, + "style": "v2", + "sitemapLocation": "sitemap.json", + "lazyCodeLoading": "requiredComponents", + "globalStyle": { + "navigationBarBackgroundColor": "#ffffff", + "navigationBarTextStyle": "black", + "navigationBarTitleText": "印美达 Inkreach", + "backgroundColor": "#f5f5f5", + "backgroundTextStyle": "dark", + "enablePullDownRefresh": false + }, + "subPackages": [] +} \ No newline at end of file diff --git a/pages/index/index.css b/pages/index/index.css new file mode 100644 index 0000000..9ddb378 --- /dev/null +++ b/pages/index/index.css @@ -0,0 +1,828 @@ +/* 首页样式 - 印美达 Inkreach */ + +.home { + min-height: 100vh; + background: #ffffff; + overflow-x: hidden; +} + +/* 导航栏 */ +.nav-bar { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 1000; + background: #ffffff; + box-shadow: 0 1rpx 0 rgba(0, 0, 0, 0.05); +} + +.nav-content { + height: 88rpx; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 32rpx; +} + +.nav-logo { + display: flex; + align-items: baseline; + gap: 8rpx; +} + +.logo-text { + font-size: 32rpx; + font-weight: 700; + color: #ff6800; + font-style: italic; +} + +.logo-cn { + font-size: 24rpx; + color: #333; + font-weight: 500; +} + +.nav-actions { + display: flex; + align-items: center; + gap: 24rpx; +} + +.nav-btn { + font-size: 26rpx; + color: #333; +} + +.nav-login { + font-size: 24rpx; + color: #ff6800; + border: 2rpx solid #ff6800; + padding: 8rpx 24rpx; + border-radius: 32rpx; +} + +/* Hero 首屏 */ +.hero { + position: relative; + padding: 60rpx 32rpx 80rpx; + overflow: hidden; + background: linear-gradient(180deg, #fff5ee 0%, #ffffff 100%); +} + +.hero-bg { + position: absolute; + top: -100rpx; + right: -200rpx; + width: 600rpx; + height: 600rpx; + background: radial-gradient(circle, rgba(255, 104, 0, 0.06) 0%, transparent 70%); + border-radius: 50%; +} + +.hero-content { + position: relative; + z-index: 2; +} + +.hero-title { + display: flex; + flex-direction: column; + gap: 8rpx; +} + +.hero-title-main { + font-size: 72rpx; + font-weight: 800; + color: #1a1a1a; + line-height: 1.2; + letter-spacing: 2rpx; +} + +.hero-subtitle { + font-size: 30rpx; + color: #666; + margin-top: 24rpx; +} + +.hero-tags { + display: flex; + gap: 16rpx; + margin-top: 32rpx; +} + +.hero-tag { + font-size: 22rpx; + color: #ff6800; + background: rgba(255, 104, 0, 0.08); + padding: 8rpx 20rpx; + border-radius: 24rpx; + font-weight: 500; +} + +.hero-cta { + display: inline-flex; + align-items: center; + justify-content: center; + background: #ff6800; + color: #ffffff; + font-size: 30rpx; + font-weight: 600; + padding: 24rpx 64rpx; + border-radius: 48rpx; + margin-top: 48rpx; + box-shadow: 0 8rpx 24rpx rgba(255, 104, 0, 0.3); +} + +/* 3D插画区 */ +.hero-illustration { + position: relative; + height: 400rpx; + margin-top: 40rpx; +} + +.hero-illust-item { + position: absolute; +} + +.hero-illist-tshirt { + top: 20rpx; + left: 20rpx; + transform: rotate(-8deg); +} + +.hero-illist-bag { + top: 60rpx; + right: 40rpx; + transform: rotate(12deg); +} + +.hero-illist-box { + bottom: 0; + left: 50%; + transform: translateX(-50%) rotate(-3deg); +} + +.illust-placeholder { + border-radius: 24rpx; + display: flex; + align-items: center; + justify-content: center; + font-size: 80rpx; +} + +.illust-placeholder.tshirt { + width: 200rpx; + height: 220rpx; + background: linear-gradient(135deg, #ff6800 0%, #ff8c40 100%); +} + +.illust-placeholder.bag { + width: 180rpx; + height: 200rpx; + background: linear-gradient(135deg, #f26522 0%, #ff8855 100%); +} + +.illust-placeholder.box { + width: 240rpx; + height: 180rpx; + background: linear-gradient(135deg, #ff6800 0%, #ffa040 100%); +} + +/* 通用 section */ +.section-title { + font-size: 40rpx; + font-weight: 700; + color: #1a1a1a; + text-align: center; + display: block; +} + +.section-subtitle { + font-size: 26rpx; + color: #999; + text-align: center; + margin-top: 12rpx; + display: block; +} + +.section-title-small { + font-size: 28rpx; + color: #666; + text-align: center; + display: block; + margin-bottom: 32rpx; +} + +/* 信任指标 */ +.trust-section { + padding: 64rpx 32rpx; + background: #ffffff; +} + +.trust-grid { + display: flex; + flex-wrap: wrap; + gap: 24rpx; +} + +.trust-card { + flex: 1; + min-width: 160rpx; + background: #fff8f3; + border-radius: 16rpx; + padding: 28rpx 16rpx; + text-align: center; +} + +.trust-number { + font-size: 40rpx; + font-weight: 700; + color: #ff6800; + display: block; +} + +.trust-label { + font-size: 24rpx; + color: #666; + margin-top: 8rpx; + display: block; +} + +/* 4步流程 */ +.steps-section { + padding: 64rpx 32rpx; + background: #fafafa; +} + +.steps-list { + margin-top: 40rpx; +} + +.step-item { + display: flex; + align-items: center; + padding: 24rpx; + background: #ffffff; + border-radius: 16rpx; + margin-bottom: 16rpx; + transition: all 0.3s; + border: 2rpx solid transparent; +} + +.step-item.active { + border-color: #ff6800; + box-shadow: 0 4rpx 16rpx rgba(255, 104, 0, 0.1); +} + +.step-number { + font-size: 36rpx; + font-weight: 800; + color: #ddd; + width: 80rpx; + flex-shrink: 0; +} + +.step-item.active .step-number { + color: #ff6800; +} + +.step-info { + flex: 1; + display: flex; + flex-direction: column; + gap: 6rpx; +} + +.step-title { + font-size: 30rpx; + font-weight: 600; + color: #333; +} + +.step-desc { + font-size: 24rpx; + color: #999; +} + +.step-visual { + margin-top: 32rpx; +} + +.step-visual-card { + background: #ffffff; + border-radius: 20rpx; + padding: 48rpx 32rpx; + text-align: center; + border: 2rpx solid #ff6800; +} + +.step-visual-icon { + width: 120rpx; + height: 120rpx; + border-radius: 50%; + background: #fff0e5; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto 24rpx; +} + +.step-visual-emoji { + font-size: 56rpx; +} + +.step-visual-text { + font-size: 28rpx; + color: #666; + line-height: 1.6; +} + +/* 全球POD货盘 */ +.catalog-section { + padding: 64rpx 0; + background: #ffffff; +} + +.catalog-section .section-title { + padding: 0 32rpx; +} + +.category-tabs { + white-space: nowrap; + padding: 24rpx 32rpx; +} + +.cat-tab { + display: inline-block; + padding: 12rpx 32rpx; + margin-right: 16rpx; + font-size: 26rpx; + color: #666; + background: #f5f5f5; + border-radius: 32rpx; + transition: all 0.3s; +} + +.cat-tab.active { + background: #ff6800; + color: #ffffff; +} + +.product-preview-grid { + display: flex; + flex-wrap: wrap; + padding: 0 32rpx; + gap: 24rpx; +} + +.product-preview-card { + width: calc(50% - 12rpx); + background: #ffffff; + border-radius: 16rpx; + overflow: hidden; + box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04); +} + +.product-preview-img { + width: 100%; + height: 280rpx; + display: flex; + align-items: center; + justify-content: center; +} + +.product-preview-emoji { + font-size: 80rpx; +} + +.product-preview-info { + padding: 16rpx; +} + +.product-preview-name { + font-size: 26rpx; + color: #333; + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.product-preview-price { + font-size: 28rpx; + color: #ff6800; + font-weight: 600; + margin-top: 8rpx; + display: block; +} + +.see-more { + display: flex; + align-items: center; + justify-content: center; + gap: 8rpx; + padding: 24rpx; + font-size: 28rpx; + color: #ff6800; +} + +.see-more .arrow { + font-size: 24rpx; +} + +/* 平台功能 */ +.features-section { + padding: 64rpx 32rpx; + background: #fafafa; +} + +.features-grid { + display: flex; + flex-wrap: wrap; + gap: 24rpx; + margin-top: 40rpx; +} + +.feature-card { + width: calc(50% - 12rpx); + background: #ffffff; + border-radius: 16rpx; + padding: 32rpx 24rpx; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 12rpx; +} + +.feature-icon { + width: 80rpx; + height: 80rpx; + border-radius: 20rpx; + display: flex; + align-items: center; + justify-content: center; +} + +.feature-emoji { + font-size: 40rpx; +} + +.feature-title { + font-size: 30rpx; + font-weight: 600; + color: #333; +} + +.feature-desc { + font-size: 24rpx; + color: #999; + line-height: 1.5; +} + +/* 为什么选择 */ +.why-section { + padding: 64rpx 32rpx; + background: #ffffff; +} + +.why-grid { + display: flex; + flex-wrap: wrap; + gap: 24rpx; + margin-top: 40rpx; +} + +.why-card { + width: calc(50% - 12rpx); + text-align: center; + padding: 32rpx 16rpx; + background: #fff8f3; + border-radius: 16rpx; +} + +.why-icon { + width: 72rpx; + height: 72rpx; + margin: 0 auto 16rpx; + display: flex; + align-items: center; + justify-content: center; + background: #ffffff; + border-radius: 50%; +} + +.why-emoji { + font-size: 36rpx; +} + +.why-title { + font-size: 28rpx; + font-weight: 600; + color: #333; + display: block; + margin-bottom: 8rpx; +} + +.why-desc { + font-size: 22rpx; + color: #999; + display: block; +} + +/* 公司简介 */ +.company-section { + padding: 64rpx 32rpx; + background: #fafafa; +} + +.company-card { + background: #ffffff; + border-radius: 20rpx; + padding: 40rpx 32rpx; + margin-top: 32rpx; +} + +.company-headline { + display: flex; + flex-direction: column; + font-size: 32rpx; + font-weight: 600; + color: #1a1a1a; + line-height: 1.6; + margin-bottom: 32rpx; +} + +.company-content { + display: flex; + flex-direction: column; + gap: 24rpx; +} + +.company-block-title { + font-size: 26rpx; + font-weight: 600; + color: #ff6800; + display: block; + margin-bottom: 8rpx; +} + +.company-block-text { + font-size: 24rpx; + color: #666; + line-height: 1.7; +} + +.company-stats { + display: flex; + justify-content: space-around; + margin-top: 32rpx; + padding-top: 32rpx; + border-top: 1rpx solid #eee; +} + +.company-stat { + text-align: center; +} + +.company-stat-number { + font-size: 36rpx; + font-weight: 700; + color: #ff6800; + display: block; +} + +.company-stat-label { + font-size: 22rpx; + color: #999; + margin-top: 4rpx; + display: block; +} + +/* 用户案例 */ +.cases-section { + padding: 64rpx 0; + background: #ffffff; +} + +.cases-section .section-title { + padding: 0 32rpx; +} + +.cases-scroll { + white-space: nowrap; + padding: 32rpx; +} + +.case-card { + display: inline-block; + width: 480rpx; + background: #ffffff; + border-radius: 20rpx; + overflow: hidden; + margin-right: 24rpx; + box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06); + vertical-align: top; +} + +.case-image { + width: 100%; + height: 320rpx; + display: flex; + align-items: center; + justify-content: center; +} + +.case-emoji { + font-size: 80rpx; +} + +.case-info { + padding: 24rpx; +} + +.case-title { + font-size: 28rpx; + font-weight: 600; + color: #333; + display: block; + margin-bottom: 12rpx; +} + +.case-tags { + display: flex; + gap: 8rpx; + margin-bottom: 16rpx; +} + +.case-tag { + font-size: 20rpx; + padding: 4rpx 12rpx; + background: #fff0e5; + color: #ff6800; + border-radius: 8rpx; +} + +.case-metrics { + display: flex; + gap: 24rpx; + padding-top: 16rpx; + border-top: 1rpx solid #eee; +} + +.case-metric-value { + font-size: 32rpx; + font-weight: 700; + color: #ff6800; + display: block; +} + +.case-metric-label { + font-size: 22rpx; + color: #999; + display: block; +} + +/* 最终CTA */ +.cta-section { + position: relative; + padding: 80rpx 32rpx; + overflow: hidden; +} + +.cta-bg { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(135deg, #ff6800 0%, #ff8c40 100%); +} + +.cta-content { + position: relative; + z-index: 2; + text-align: center; +} + +.cta-title { + display: flex; + flex-direction: column; + font-size: 48rpx; + font-weight: 700; + color: #ffffff; + line-height: 1.4; +} + +.cta-desc { + font-size: 26rpx; + color: rgba(255, 255, 255, 0.85); + margin-top: 16rpx; + display: block; +} + +.cta-input-wrap { + display: flex; + gap: 16rpx; + margin-top: 40rpx; + padding: 0 16rpx; +} + +.cta-input { + flex: 1; + height: 80rpx; + background: rgba(255, 255, 255, 0.95); + border-radius: 40rpx; + padding: 0 32rpx; + font-size: 26rpx; + color: #333; +} + +.cta-placeholder { + color: #ccc; +} + +.cta-btn { + display: flex; + align-items: center; + justify-content: center; + background: #1a1a1a; + color: #ffffff; + font-size: 28rpx; + font-weight: 600; + padding: 0 40rpx; + border-radius: 40rpx; +} + +/* 底部 */ +.footer { + background: #121212; + padding: 48rpx 32rpx; + padding-bottom: calc(48rpx + env(safe-area-inset-bottom)); +} + +.footer-top { + text-align: center; + margin-bottom: 40rpx; +} + +.footer-logo { + display: flex; + align-items: baseline; + justify-content: center; + gap: 8rpx; + margin-bottom: 16rpx; +} + +.footer-logo-en { + font-size: 36rpx; + font-weight: 700; + color: #ff6800; + font-style: italic; +} + +.footer-logo-cn { + font-size: 28rpx; + color: #fff; +} + +.footer-slogan { + font-size: 22rpx; + color: rgba(255, 255, 255, 0.5); +} + +.footer-links { + display: flex; + justify-content: space-around; + margin-bottom: 40rpx; +} + +.footer-col { + display: flex; + flex-direction: column; + gap: 12rpx; +} + +.footer-col-title { + font-size: 26rpx; + font-weight: 600; + color: #fff; + margin-bottom: 8rpx; +} + +.footer-link { + font-size: 22rpx; + color: rgba(255, 255, 255, 0.5); +} + +.footer-bottom { + text-align: center; + padding-top: 32rpx; + border-top: 1rpx solid rgba(255, 255, 255, 0.1); +} + +.footer-copyright { + font-size: 20rpx; + color: rgba(255, 255, 255, 0.3); +} diff --git a/pages/index/index.vue b/pages/index/index.vue new file mode 100644 index 0000000..95664d8 --- /dev/null +++ b/pages/index/index.vue @@ -0,0 +1,532 @@ + + + + diff --git a/pages/product-detail/product-detail.css b/pages/product-detail/product-detail.css new file mode 100644 index 0000000..664071d --- /dev/null +++ b/pages/product-detail/product-detail.css @@ -0,0 +1,327 @@ +/* 产品详情页样式 */ +.detail-page { + min-height: 100vh; + background: #f5f5f5; + padding-bottom: 140rpx; +} + +/* 图片区 */ +.detail-images { + position: relative; + background: #ffffff; +} + +.detail-swiper { + width: 100%; + height: 750rpx; +} + +.swiper-img { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} + +.swiper-emoji { + font-size: 160rpx; +} + +.detail-badges { + position: absolute; + top: 24rpx; + left: 24rpx; + display: flex; + flex-direction: column; + gap: 8rpx; +} + +.detail-badge { + font-size: 20rpx; + padding: 4rpx 12rpx; + border-radius: 6rpx; +} + +/* 产品信息 */ +.detail-info-section { + background: #ffffff; + padding: 32rpx 24rpx; + margin-bottom: 16rpx; +} + +.detail-header { + display: flex; + flex-direction: column; + gap: 8rpx; +} + +.detail-name { + font-size: 36rpx; + font-weight: 600; + color: #1a1a1a; + line-height: 1.4; +} + +.detail-code { + font-size: 24rpx; + color: #999; +} + +.detail-price-row { + display: flex; + align-items: baseline; + gap: 8rpx; + margin-top: 20rpx; +} + +.detail-price { + font-size: 48rpx; + font-weight: 700; + color: #ff6800; +} + +.detail-price-unit { + font-size: 24rpx; + color: #ff6800; +} + +.detail-price-original { + font-size: 24rpx; + color: #ccc; + text-decoration: line-through; + margin-left: 12rpx; +} + +.detail-meta { + display: flex; + justify-content: space-between; + margin-top: 32rpx; + padding-top: 24rpx; + border-top: 1rpx solid #f0f0f0; +} + +.meta-item { + text-align: center; +} + +.meta-label { + font-size: 22rpx; + color: #999; + display: block; + margin-bottom: 8rpx; +} + +.meta-value { + font-size: 26rpx; + color: #333; + font-weight: 500; +} + +/* 通用section */ +.detail-section { + background: #ffffff; + padding: 32rpx 24rpx; + margin-bottom: 16rpx; +} + +.section-label { + font-size: 30rpx; + font-weight: 600; + color: #333; + display: block; + margin-bottom: 24rpx; +} + +/* 颜色选择 */ +.color-options { + display: flex; + flex-wrap: wrap; + gap: 20rpx; +} + +.color-option { + display: flex; + align-items: center; + gap: 8rpx; + padding: 12rpx 20rpx; + border-radius: 32rpx; + border: 2rpx solid #eee; + background: #fafafa; +} + +.color-option.selected { + border-color: #ff6800; + background: #fff0e5; +} + +.color-dot { + width: 32rpx; + height: 32rpx; + border-radius: 50%; + border: 2rpx solid #fff; + box-shadow: 0 0 0 1rpx rgba(0, 0, 0, 0.1); +} + +.color-name { + font-size: 24rpx; + color: #666; +} + +.color-option.selected .color-name { + color: #ff6800; +} + +/* 尺码选择 */ +.size-options { + display: flex; + flex-wrap: wrap; + gap: 16rpx; +} + +.size-option { + min-width: 72rpx; + text-align: center; + padding: 16rpx 24rpx; + font-size: 26rpx; + color: #666; + background: #f5f5f5; + border-radius: 8rpx; + border: 2rpx solid transparent; +} + +.size-option.selected { + background: #fff0e5; + color: #ff6800; + border-color: #ff6800; +} + +/* 参数表 */ +.params-table { + display: flex; + flex-direction: column; +} + +.param-row { + display: flex; + padding: 16rpx 0; + border-bottom: 1rpx solid #f5f5f5; +} + +.param-label { + width: 200rpx; + font-size: 26rpx; + color: #999; + flex-shrink: 0; +} + +.param-value { + flex: 1; + font-size: 26rpx; + color: #333; +} + +/* 工艺说明 */ +.craft-info { + display: flex; + flex-direction: column; + gap: 20rpx; +} + +.craft-card { + display: flex; + align-items: center; + gap: 16rpx; + padding: 20rpx; + background: #fafafa; + border-radius: 12rpx; +} + +.craft-icon { + width: 64rpx; + height: 64rpx; + border-radius: 12rpx; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; +} + +.craft-emoji { + font-size: 32rpx; +} + +.craft-name { + font-size: 26rpx; + font-weight: 600; + color: #333; + flex-shrink: 0; + width: 120rpx; +} + +.craft-desc { + flex: 1; + font-size: 22rpx; + color: #999; + line-height: 1.5; +} + +/* 底部操作栏 */ +.detail-bottom-bar { + position: fixed; + bottom: 0; + left: 0; + right: 0; + height: 120rpx; + background: #ffffff; + display: flex; + align-items: center; + padding: 0 24rpx; + gap: 16rpx; + box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.06); + z-index: 100; +} + +.bottom-btn-icon { + display: flex; + flex-direction: column; + align-items: center; + gap: 4rpx; + width: 80rpx; + flex-shrink: 0; +} + +.bottom-icon { + font-size: 36rpx; +} + +.bottom-icon-text { + font-size: 18rpx; + color: #999; +} + +.bottom-btn-cart { + flex: 1; + height: 80rpx; + display: flex; + align-items: center; + justify-content: center; + background: #fff0e5; + color: #ff6800; + font-size: 28rpx; + font-weight: 600; + border-radius: 40rpx; +} + +.bottom-btn-design { + flex: 1; + height: 80rpx; + display: flex; + align-items: center; + justify-content: center; + background: #ff6800; + color: #ffffff; + font-size: 28rpx; + font-weight: 600; + border-radius: 40rpx; +} diff --git a/pages/product-detail/product-detail.vue b/pages/product-detail/product-detail.vue new file mode 100644 index 0000000..9a83b38 --- /dev/null +++ b/pages/product-detail/product-detail.vue @@ -0,0 +1,303 @@ + + + + diff --git a/pages/products/products.css b/pages/products/products.css new file mode 100644 index 0000000..4f506a6 --- /dev/null +++ b/pages/products/products.css @@ -0,0 +1,500 @@ +/* 产品列表页样式 */ + +.products-page { + min-height: 100vh; + background: #f5f5f5; + display: flex; + flex-direction: column; +} + +/* 搜索栏 */ +.search-bar { + display: flex; + align-items: center; + gap: 16rpx; + padding: 16rpx 24rpx; + background: #ffffff; +} + +.search-input-wrap { + flex: 1; + display: flex; + align-items: center; + background: #f5f5f5; + border-radius: 32rpx; + padding: 0 24rpx; + height: 64rpx; +} + +.search-icon { + font-size: 28rpx; + margin-right: 12rpx; +} + +.search-input { + flex: 1; + font-size: 26rpx; + color: #333; +} + +.search-placeholder { + color: #ccc; +} + +.filter-btn { + display: flex; + align-items: center; + gap: 4rpx; + padding: 0 16rpx; +} + +.filter-icon { + font-size: 28rpx; + color: #666; +} + +.filter-text { + font-size: 24rpx; + color: #666; +} + +/* 国家选择条 */ +.country-bar { + white-space: nowrap; + background: #ffffff; + padding: 16rpx 24rpx; + border-bottom: 1rpx solid #eee; +} + +.country-item { + display: inline-flex; + align-items: center; + gap: 6rpx; + padding: 8rpx 20rpx; + margin-right: 12rpx; + border-radius: 24rpx; + background: #f5f5f5; +} + +.country-item.active { + background: #fff0e5; +} + +.country-flag { + font-size: 28rpx; +} + +.country-name { + font-size: 22rpx; + color: #666; +} + +.country-item.active .country-name { + color: #ff6800; + font-weight: 500; +} + +/* 已选筛选标签 */ +.active-filters { + display: flex; + align-items: center; + gap: 12rpx; + padding: 12rpx 24rpx; + background: #ffffff; + overflow-x: auto; + white-space: nowrap; +} + +.active-filter-tag { + display: inline-flex; + align-items: center; + gap: 8rpx; + background: #f2f2f2; + border-radius: 8rpx; + padding: 6rpx 16rpx; + font-size: 22rpx; + color: #666; + flex-shrink: 0; +} + +.filter-remove { + font-size: 20rpx; + color: #ccc; +} + +.clear-all { + font-size: 22rpx; + color: #ff6800; + flex-shrink: 0; +} + +/* 主体内容 */ +.content-body { + flex: 1; + display: flex; + overflow: hidden; +} + +/* 左侧分类侧边栏 */ +.sidebar { + width: 180rpx; + background: #ffffff; + border-right: 1rpx solid #eee; + height: 100%; + flex-shrink: 0; +} + +.sidebar-item { + position: relative; + padding: 28rpx 20rpx; + font-size: 24rpx; + color: #666; + text-align: center; +} + +.sidebar-item.active { + background: #f5f5f5; + color: #ff6800; + font-weight: 600; +} + +.sidebar-indicator { + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); + width: 6rpx; + height: 32rpx; + background: #ff6800; + border-radius: 0 4rpx 4rpx 0; +} + +.sidebar-promo { + margin: 24rpx 16rpx; + padding: 20rpx 12rpx; + background: linear-gradient(135deg, #ff6800 0%, #ff8c40 100%); + border-radius: 12rpx; + text-align: center; +} + +.promo-title { + font-size: 24rpx; + font-weight: 700; + color: #fff; + display: block; +} + +.promo-desc { + font-size: 20rpx; + color: rgba(255, 255, 255, 0.9); + display: block; + margin-top: 4rpx; +} + +/* 右侧产品列表区 */ +.product-list-area { + flex: 1; + height: 100%; +} + +/* 子分类 */ +.sub-categories { + display: flex; + flex-wrap: wrap; + gap: 12rpx; + padding: 16rpx 20rpx; + background: #ffffff; +} + +.sub-cat-item { + font-size: 22rpx; + padding: 8rpx 20rpx; + border-radius: 24rpx; + background: #f5f5f5; + color: #666; +} + +.sub-cat-item.active { + background: #ff6800; + color: #fff; +} + +/* 产品网格 */ +.product-grid { + display: flex; + flex-wrap: wrap; + gap: 16rpx; + padding: 16rpx 20rpx; +} + +.product-card { + width: calc(50% - 8rpx); + background: #ffffff; + border-radius: 12rpx; + overflow: hidden; + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04); +} + +.product-img { + width: 100%; + height: 300rpx; + display: flex; + align-items: center; + justify-content: center; + position: relative; +} + +.product-emoji { + font-size: 80rpx; +} + +.product-badges { + position: absolute; + top: 12rpx; + left: 12rpx; + display: flex; + flex-direction: column; + gap: 4rpx; +} + +.product-badge { + font-size: 18rpx; + padding: 2rpx 8rpx; + border-radius: 4rpx; +} + +.product-info { + padding: 16rpx; +} + +.product-name { + font-size: 24rpx; + color: #333; + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.product-bottom { + margin-top: 8rpx; + display: flex; + align-items: center; + justify-content: space-between; +} + +.product-price { + font-size: 30rpx; + font-weight: 700; + color: #ff6800; +} + +.product-price-unit { + font-size: 20rpx; + font-weight: 400; + margin-left: 2rpx; +} + +/* 分页 */ +.pagination { + padding: 24rpx 20rpx; + text-align: center; +} + +.page-info { + font-size: 22rpx; + color: #999; + display: block; + margin-bottom: 16rpx; +} + +.page-controls { + display: flex; + align-items: center; + justify-content: center; + gap: 8rpx; +} + +.page-btn { + padding: 8rpx 20rpx; + font-size: 22rpx; + color: #666; + background: #fff; + border-radius: 8rpx; + border: 1rpx solid #eee; +} + +.page-btn.disabled { + color: #ccc; +} + +.page-num { + min-width: 48rpx; + height: 48rpx; + line-height: 48rpx; + text-align: center; + font-size: 24rpx; + color: #666; + background: #fff; + border-radius: 8rpx; + border: 1rpx solid #eee; +} + +.page-num.active { + background: #ff6800; + color: #fff; + border-color: #ff6800; +} + +.page-size { + margin-top: 12rpx; + font-size: 22rpx; + color: #999; +} + +.loading-more { + padding: 24rpx; + text-align: center; + font-size: 24rpx; + color: #999; +} + +/* 筛选弹窗 */ +.filter-overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.5); + z-index: 1000; + opacity: 0; + visibility: hidden; + transition: all 0.3s; +} + +.filter-overlay.show { + opacity: 1; + visibility: visible; +} + +.filter-drawer { + position: fixed; + top: 0; + right: 0; + width: 80%; + height: 100%; + background: #ffffff; + z-index: 1001; + transform: translateX(100%); + transition: transform 0.3s; + display: flex; + flex-direction: column; +} + +.filter-drawer.show { + transform: translateX(0); +} + +.filter-drawer-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 32rpx 24rpx; + border-bottom: 1rpx solid #eee; +} + +.filter-drawer-title { + font-size: 32rpx; + font-weight: 600; + color: #333; +} + +.filter-drawer-close { + font-size: 32rpx; + color: #999; +} + +.filter-drawer-body { + flex: 1; + padding: 24rpx; +} + +.filter-group { + margin-bottom: 32rpx; +} + +.filter-group-title { + font-size: 28rpx; + font-weight: 600; + color: #333; + display: block; + margin-bottom: 16rpx; +} + +.filter-options { + display: flex; + flex-wrap: wrap; + gap: 12rpx; +} + +.filter-option { + padding: 12rpx 24rpx; + font-size: 24rpx; + color: #666; + background: #f5f5f5; + border-radius: 8rpx; + border: 2rpx solid transparent; +} + +.filter-option.selected { + background: #fff0e5; + color: #ff6800; + border-color: #ff6800; +} + +.filter-price-range { + display: flex; + align-items: center; + gap: 16rpx; +} + +.price-input { + flex: 1; + height: 64rpx; + background: #f5f5f5; + border-radius: 8rpx; + padding: 0 20rpx; + font-size: 24rpx; +} + +.price-divider { + color: #ccc; +} + +.filter-drawer-footer { + display: flex; + gap: 16rpx; + padding: 24rpx; + border-top: 1rpx solid #eee; +} + +.filter-reset { + flex: 1; + text-align: center; + padding: 24rpx; + font-size: 28rpx; + color: #666; + background: #f5f5f5; + border-radius: 12rpx; +} + +.filter-confirm { + flex: 1; + text-align: center; + padding: 24rpx; + font-size: 28rpx; + color: #fff; + background: #ff6800; + border-radius: 12rpx; +} diff --git a/pages/products/products.vue b/pages/products/products.vue new file mode 100644 index 0000000..82e07d6 --- /dev/null +++ b/pages/products/products.vue @@ -0,0 +1,760 @@ + + + + diff --git a/sitemap.json b/sitemap.json new file mode 100644 index 0000000..e70d9cf --- /dev/null +++ b/sitemap.json @@ -0,0 +1,9 @@ +{ + "desc": "印美达 Inkreach 小程序", + "rules": [ + { + "action": "allow", + "page": "*" + } + ] +} diff --git a/transform.log b/transform.log new file mode 100644 index 0000000..795297a --- /dev/null +++ b/transform.log @@ -0,0 +1,40 @@ +开始转换…… +小程序路径: C:\gs\project\官网小程序demo\官网小程序demo +搜索到25个文件(含目录)，耗时：3ms + +开始分析文件 +分析文件信息完成，共5组数据 +开始转换文件组为vue文件 +开始二次遍历及生成vue文件 +write pages.json success! +write manifest.json success! +write main.js success! +write package.json success! + + +统计信息： + +Component数量: 0 +Page数量: 3 +支付api数量: 0 +登录api数量: 0 +chooseMedia数量: 0 +getLocation数量: 0 +getRelationNodes数量: 0 +数量: 0 +数量: 0 +