commit 76827aedfe3bbd7b655b1092dcb0c1b7a75397d7 Author: RyRh <3123294924@qq.com> Date: Thu Aug 20 18:29:49 2026 +0800 首次提交 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 +