xjs
/
pension-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: some bug

master
xjs 2025-07-25 17:59:54 +08:00
parent acef1db8ea
commit b6a42435f9
22 changed files with 134 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -36,6 +36,7 @@
"@unocss/preset-wind": "^0.65.2", "@unocss/preset-wind": "^0.65.2",
"@vitejs/plugin-basic-ssl": "^1.2.0", "@vitejs/plugin-basic-ssl": "^1.2.0",
"@vitejs/plugin-vue": "^5.2.1", "@vitejs/plugin-vue": "^5.2.1",
"postcss-pxtorem": "^6.1.0",
"prettier": "3.4.2", "prettier": "3.4.2",
"sass-embedded": "^1.86.0", "sass-embedded": "^1.86.0",
"svg-sprite-loader": "^6.0.11", "svg-sprite-loader": "^6.0.11",

12
pnpm-lock.yaml
View File

@ -75,6 +75,9 @@ importers:
'@vitejs/plugin-vue': '@vitejs/plugin-vue':
specifier: ^5.2.1 specifier: ^5.2.1
version: 5.2.1(vite@6.0.3(@types/node@22.10.1)(jiti@2.4.1)(sass-embedded@1.86.0)(sass@1.89.2)(tsx@4.19.2))(vue@3.5.13(typescript@5.6.3)) version: 5.2.1(vite@6.0.3(@types/node@22.10.1)(jiti@2.4.1)(sass-embedded@1.86.0)(sass@1.89.2)(tsx@4.19.2))(vue@3.5.13(typescript@5.6.3))
postcss-pxtorem:
specifier: ^6.1.0
version: 6.1.0(postcss@5.2.18)
prettier: prettier:
specifier: 3.4.2 specifier: 3.4.2
version: 3.4.2 version: 3.4.2
@ -2055,6 +2058,11 @@ packages:
peerDependencies: peerDependencies:
postcss: '>4 <9' postcss: '>4 <9'
postcss-pxtorem@6.1.0:
resolution: {integrity: sha512-ROODSNci9ADal3zUcPHOF/K83TiCgNSPXQFSbwyPHNV8ioHIE4SaC+FPOufd8jsr5jV2uIz29v1Uqy1c4ov42g==}
peerDependencies:
postcss: ^8.0.0
postcss@5.2.18: postcss@5.2.18:
resolution: {integrity: sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==} resolution: {integrity: sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==}
engines: {node: '>=0.12'} engines: {node: '>=0.12'}
@ -4810,6 +4818,10 @@ snapshots:
dependencies: dependencies:
postcss: 5.2.18 postcss: 5.2.18
postcss-pxtorem@6.1.0(postcss@5.2.18):
dependencies:
postcss: 5.2.18
postcss@5.2.18: postcss@5.2.18:
dependencies: dependencies:
chalk: 1.1.3 chalk: 1.1.3

12
postcss.config.js Normal file
View File

@ -0,0 +1,12 @@
export default {
plugins: {
"postcss-pxtorem": {
rootValue: 16, // 根元素字体大小（默认 16px）
propList: ["*"], // 需要转换的属性，* 表示所有属性
selectorBlackList: [], // 忽略的选择器，保留为 px
replace: true, // 是否直接替换值
mediaQuery: false, // 是否转换媒体查询中的 px
minPixelValue: 2, // 最小转换值，小于此值的 px 不转换
},
},
};

BIN
public/images/home/greet.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 98 KiB

After

Width:  |  Height:  |  Size: 98 KiB

BIN
public/images/housekeeping/housekeeping.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 935 KiB

2
src/App.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="flex flex-col h-screen w-screen pb-safe"> <div class="flex flex-col h-screen w-screen pb-safe bg-transparent">
<router-view v-slot="{ Component,route }"> <router-view v-slot="{ Component,route }">
<keep-alive :include="include" :exclude="excludes"> <keep-alive :include="include" :exclude="excludes">
<component :is="Component" :key="route.path" class="flex-auto overflow-auto"/> <component :is="Component" :key="route.path" class="flex-auto overflow-auto"/>

8
src/api/interfaceDocument.ts
View File

@ -1,15 +1,15 @@
const baseUrl = '' const baseUrl = process.env.NODE_ENV !== 'development' ? 'https://api.mock.jinzejk.com' : ''
export const getMapSearch = () => { export const getMapSearch = () => {
return `http://api.tianditu.gov.cn/v2/search` return `https://api.tianditu.gov.cn/v2/search`
} }
export const getLocationByReverseGeography = () => { export const getLocationByReverseGeography = () => {
return `http://api.tianditu.gov.cn/geocoder` return `https://api.tianditu.gov.cn/geocoder`
} }
export const getAdministrative =() => { export const getAdministrative =() => {
return `http://api.tianditu.gov.cn/v2/administrative` return `https://api.tianditu.gov.cn/v2/administrative`
} }
export const getProductCategory = () => { export const getProductCategory = () => {

30
src/main.ts
View File

@ -1,16 +1,26 @@
import { createApp } from 'vue' import { createApp } from "vue";
import '@unocss/reset/tailwind-compat.css' import "@unocss/reset/tailwind-compat.css";
import './style.css' import "./style.css";
import 'uno.css'; import "uno.css";
import App from './App.vue' import App from "./App.vue";
// Pinia 持久化 // Pinia 持久化
import store from '@/store/index' import store from "@/store/index";
//导入路由 //导入路由
import router from '@/router/index' import router from "@/router/index";
const app = createApp(App) const app = createApp(App);
function setRootFontSize() {
const screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
const baseSize = 16; // 基准字体大小
const scale = screenWidth / 375; // 设计稿宽度（通常为 375px）
document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'; // 限制最大缩放比例
}
setRootFontSize();
window.addEventListener('resize', setRootFontSize);
// 注册已经加上了持久化的pinia // 注册已经加上了持久化的pinia
app.use(store).use(router) app.use(store).use(router);
app.mount('#app') app.mount("#app");

2
src/router/publicRoutes.ts
View File

@ -312,7 +312,7 @@ export const publicRoutes:RouteRecordRaw[] = [
meta:{ meta:{
title:'装饰' title:'装饰'
}, },
component: () => import("../views/decoration/index.vue") components: {default:() => import("../views/decoration/index.vue"),backButton:() => import("../components/back-button/index.vue")},
}, },
{ {
path: "/unauthorized", path: "/unauthorized",

6
src/views/checkout/payment.vue
View File

@ -1,14 +1,14 @@
<template> <template>
<div class="bg-gradient-to-b to-50% from-[#28BEBB] to-[#fff] flex flex-col items-center"> <div class="bg-gradient-to-b to-80% from-[#28BEBB] to-[#fff] flex flex-col items-center">
<img src="/images/checkout/payment-success.png" alt="payment-success" class="w-[258rpx] h-[140rpx] mt-[80rpx]" /> <img src="/images/checkout/payment-success.png" alt="payment-success" class="w-[258rpx] h-[140rpx] mt-[80rpx]" />
<p class="text-[56rpx] font-700 text-white mt-[16rpx]">支付成功！</p> <p class="text-[56rpx] font-700 text-white mt-[16rpx]">支付成功！</p>
<div class="px-[16rpx] my-[24rpx] w-full flex flex-col items-center"> <div class="px-[16rpx] my-[24rpx] w-full flex flex-col items-center">
<div class="bg-[#0b9996] w-full rounded-full p-[6rpx] h-[24rpx]"> <div class="bg-[#0b9996] w-full rounded-full p-[6rpx] h-[24rpx]">
<div class="w-full h-full bg-[#004140] rounded-full"></div> <div class="w-full h-full bg-[#004140] rounded-full"></div>
</div> </div>
<div class="h-[468rpx] w-[690rpx] custom-bg relative flex flex-col items-center"> <div class="h-[468rpx] custom-bg relative flex flex-col items-center">
<nut-price :price="money" size="large" class="font-700 price-text mt-[70rpx] flex!" /> <nut-price :price="money" size="large" class="font-700 price-text mt-[70rpx] flex!" />
<ul class="w-full mt-[50rpx] pl-[32rpx]"> <ul class="w-full mt-[50rpx] px-[32rpx]">
<li class="flex items-center mb-[30rpx] text-[32rpx]"> <li class="flex items-center mb-[30rpx] text-[32rpx]">
<span class="text-[#666]">订单编号：</span> <span class="text-[#666]">订单编号：</span>
<span class="mr-[10rpx]">20220308170456105610</span> <span class="mr-[10rpx]">20220308170456105610</span>

4
src/views/healthCare/index.vue
View File

@ -14,8 +14,8 @@
<nut-list class="" :list-data="products" @scroll-bottom="onScrollBottom"> <nut-list class="" :list-data="products" @scroll-bottom="onScrollBottom">
<template #default="{ item }"> <template #default="{ item }">
<div class="flex items-center justify-center mt-[30rpx] mx-[30rpx]" @click="toProductInfo(item)"> <div class="flex items-center mt-[30rpx] mx-[30rpx]" @click="toProductInfo(item)">
<div class="w-[690rpx] h-[256rpx] rounded-[20rpx] bg-[#fff] flex"> <div class="h-[256rpx] w-full rounded-[20rpx] bg-[#fff] flex">
<img :src="item.image" alt="thumb" class="h-full object-cover w-[256rpx] rounded-[20rpx_0_0_20rpx]" /> <img :src="item.image" alt="thumb" class="h-full object-cover w-[256rpx] rounded-[20rpx_0_0_20rpx]" />
<div class="flex flex-col p-[30rpx] flex-auto justify-between"> <div class="flex flex-col p-[30rpx] flex-auto justify-between">
<div class="text-[40rpx] font-500">{{ item.title }}</div> <div class="text-[40rpx] font-500">{{ item.title }}</div>

2
src/views/healthCare/order.vue
View File

@ -5,7 +5,7 @@
<div class="h-[640rpx]"> <div class="h-[640rpx]">
<nut-swiper :auto-play="3000" @change="onChange" :is-prevent-default="false"> <nut-swiper :auto-play="3000" @change="onChange" :is-prevent-default="false">
<nut-swiper-item v-for="(item, index) in serviceDetail?.images" :key="index" class="h-full"> <nut-swiper-item v-for="(item, index) in serviceDetail?.images" :key="index" class="h-full">
<img :src="item" alt="" class="h-[640rpx] w-full object-contain" draggable="false" @click.stop="showFn" /> <img :src="item" alt="" class="h-[640rpx] w-full object-cover" draggable="false" @click.stop="showFn" />
</nut-swiper-item> </nut-swiper-item>
<template #page> <template #page>
<div <div

2
src/views/home/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="flex flex-col bg-[#28BEBB]"> <div class="flex flex-col bg-[#28BEBB]">
<header class="flex items-start justify-end text-[#fff] h-[284rpx] pt-[20rpx] pr-[30rpx] bg-[url(/images/home/greet.png)] bg-bottom-left bg-no-repeat custom-bg-size ml-[24rpx]"> <header class="flex items-start justify-start text-[#fff] h-[284rpx] pt-[20rpx] pr-[30rpx] bg-[url(/images/home/greet.png)] bg-bottom-right bg-no-repeat custom-bg-size ml-[24rpx]">
<div class="flex items-center px-[28rpx] py-[12rpx] rounded-full bg-[#00000066]" @click="toMap"> <div class="flex items-center px-[28rpx] py-[12rpx] rounded-full bg-[#00000066]" @click="toMap">
<MapPin /> <MapPin />
<div class="text-[32rpx] font-500 max-w-[200rpx] truncate">{{ address }}</div> <div class="text-[32rpx] font-500 max-w-[200rpx] truncate">{{ address }}</div>

2
src/views/housekeeping/detail.vue
View File

@ -5,7 +5,7 @@
<div class="h-[640rpx]"> <div class="h-[640rpx]">
<nut-swiper :auto-play="3000" @change="onChange" :is-prevent-default="false"> <nut-swiper :auto-play="3000" @change="onChange" :is-prevent-default="false">
<nut-swiper-item v-for="(item, index) in cleaningDetail?.banner" :key="index" class="h-full"> <nut-swiper-item v-for="(item, index) in cleaningDetail?.banner" :key="index" class="h-full">
<img :src="item" alt="" class="h-[640rpx] w-full object-contain" draggable="false" @click.stop="showFn" /> <img :src="item" alt="" class="h-[640rpx] w-full object-cover" draggable="false" @click.stop="showFn" />
</nut-swiper-item> </nut-swiper-item>
<template #page> <template #page>
<div <div

74
src/views/housekeeping/index.vue
View File

@ -14,28 +14,45 @@
</div> </div>
</template> </template>
<nut-tab-pane v-for="item in list" :key="item.paneKey" :pane-key="item.paneKey"> <nut-tab-pane v-for="item in list" :key="item.paneKey" :pane-key="item.paneKey">
<ul class="flex flex-col p-[30rpx] flex-auto min-h-0 overflow-auto"> <ul class="flex flex-col flex-auto min-h-0 overflow-auto">
<li v-for="(item, index) in cleaningList" :key="index" class="rounded-[20rpx] h-[256rpx] flex bg-white mb-[30rpx]" @click="toDetail(item.id)"> <li
<img :src="item.cover" alt="" class="w-[256rpx] h-[256rpx] rounded-[20rpx_0_0_20rpx]"> v-for="(item, index) in cleaningList"
:key="index"
class="rounded-[20rpx] h-[256rpx] flex bg-white m-[30rpx]"
@click="toDetail(item.id)"
v-if="item.paneKey !== '0'">
<img :src="item.cover" alt="" class="w-[256rpx] h-[256rpx] rounded-[20rpx_0_0_20rpx]" />
<div class="p-[30rpx] flex flex-col flex-auto justify-between"> <div class="p-[30rpx] flex flex-col flex-auto justify-between">
<p class="text-[40rpx]">{{ item.title }}</p> <p class="text-[40rpx]">{{ item.title }}</p>
<div class="text-[26rpx] text-[#1D86FF] font-400 bg-[#edf6ff] px-[10rpx] py-[6rpx] w-[242rpx] mt-[12rpx] mb-[24rpx]">{{ item.tag }}</div> <div class="text-[26rpx] text-[#1D86FF] font-400 bg-[#edf6ff] px-[10rpx] py-[6rpx] w-[242rpx] mt-[12rpx] mb-[24rpx]">{{ item.tag }}</div>
<div class="flex items-end justify-between"> <div class="flex items-end justify-between">
<div> <div>
<nut-price :price="item.price" size="large" class="font-700"/> <nut-price :price="item.price" size="large" class="font-700" />
<span class="text-[#666] text-[28rpx] ml-[4rpx]">起</span> <span class="text-[#666] text-[28rpx] ml-[4rpx]">起</span>
</div>
<div class="text-[#999] text-[24rpx]">{{item.purchased}}人已购</div>
</div> </div>
<div class="text-[#999] text-[24rpx]">{{ item.purchased }}人已购</div>
</div>
</div> </div>
</li> </li>
<li class="rounded-[20rpx] flex flex-col" v-else>
<img src="/images/housekeeping/housekeeping.png" alt="" class="w-full bg-contain flex-1" />
<div class="py-[16rpx] px-[30rpx] flex items-center mt-auto">
<a class="flex flex-col text-[#1D86FF] text-[28rpx] justify-center items-center" :href="`tel:400-810-9999`">
<PhoneCall :stroke-width="1" fill="#1D86FF" class="mb-[4rpx]" />
<span>电话咨询</span>
</a>
<div class="rounded-[20rpx] text-white bg-[#28BEBB] text-[40rpx] font-500 flex-auto py-[26rpx] text-center ml-[24rpx]">立即预约</div>
</div>
</li>
<div
v-if="item.paneKey !== '0'"
class="h-[76rpx] w-[486rpx] rounded-full bg-[#1D86FF] flex items-center justify-center self-center text-[#fff] text-[32rpx] font-500 my-[20rpx] py-[10rpx]">
<span>没有您要的服务，请联系</span>
<PhoneCall :stroke-width="1.5" class="ml-[12rpx]" />
</div>
</ul> </ul>
</nut-tab-pane> </nut-tab-pane>
</nut-tabs> </nut-tabs>
<div class="h-[76rpx] w-[486rpx] rounded-full bg-[#1D86FF] flex items-center justify-center self-center text-[#fff] text-[32rpx] font-500 my-[20rpx] py-[10rpx]">
<span>没有您要的服务，请联系</span>
<PhoneCall :stroke-width="1.5" class="ml-[12rpx]" />
</div>
</div> </div>
</template> </template>
@ -46,16 +63,19 @@
const router = useRouter(); const router = useRouter();
const activeTab = ref("0"); const activeTab = ref("0");
const list = [{title:'优质保姆',paneKey:'0'},{title:'日常保洁',paneKey:'1'},{title:'上门维修',paneKey:'2'}]; const list = [
{ title: "优质保姆", paneKey: "0" },
const {cleaningList} = useGetHousekeepingCleaningList(); { title: "日常保洁", paneKey: "1" },
{ title: "上门维修", paneKey: "2" },
];
const toDetail = (tId:string) => { const { cleaningList } = useGetHousekeepingCleaningList();
router.push({name:'housekeeping-detail',params:{id:tId}})
} const toDetail = (tId: string) => {
router.push({ name: "housekeeping-detail", params: { id: tId } });
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -67,13 +87,13 @@
padding: 0; padding: 0;
background-color: #f5f5f5; background-color: #f5f5f5;
} }
:deep(.nut-tabs__titles){ :deep(.nut-tabs__titles) {
justify-content: space-evenly; justify-content: space-evenly;
} }
:deep(.nut-tabs__content){ :deep(.nut-tabs__content) {
min-height: 0; min-height: 0;
flex: 1 1 auto; flex: 1 1 auto;
} }
} }
</style> </style>

2
src/views/jinze/index.vue
View File

@ -27,7 +27,7 @@
<p class="text-[40rpx]">{{ item.name }}</p> <p class="text-[40rpx]">{{ item.name }}</p>
<p class="text-[#666] text-[28rpx]">{{item.location}}·{{ item.distance }}</p> <p class="text-[#666] text-[28rpx]">{{item.location}}·{{ item.distance }}</p>
<div class="flex items-end"> <div class="flex items-end">
<nut-price :price="item.pricePerDay" size="large" class="font-700 text-[#1580FF]" /> <nut-price :price="item.pricePerDay" size="large" class="font-700" />
<span class="text-[#666] text-[28rpx] ml-[4rpx]">天/起</span> <span class="text-[#666] text-[28rpx] ml-[4rpx]">天/起</span>
</div> </div>
</div> </div>

2
src/views/location/map.vue
View File

@ -73,7 +73,7 @@
if ((window as any).T) return resolve(); if ((window as any).T) return resolve();
const script = document.createElement("script"); const script = document.createElement("script");
script.type = "text/javascript"; script.type = "text/javascript";
script.src = `http://api.tianditu.gov.cn/api?v=4.0&tk=${mapKey}`; script.src = `https://api.tianditu.gov.cn/api?v=4.0&tk=${mapKey}`;
script.onload = () => resolve(); script.onload = () => resolve();
script.onerror = reject; script.onerror = reject;
document.head.appendChild(script); document.head.appendChild(script);

14
src/views/mine/addAddress.vue
View File

@ -3,11 +3,11 @@
<nut-form class="flex-1 min-h-0 add-address-form"> <nut-form class="flex-1 min-h-0 add-address-form">
<div class="rounded-[20rpx] bg-white px-[30rpx] py-[44rpx]"> <div class="rounded-[20rpx] bg-white px-[30rpx] py-[44rpx]">
<div class="flex items-center"> <div class="flex items-center">
<nut-form-item label-width="48px" class="flex-auto"> <nut-form-item class="flex-auto">
<template #label> <template #label>
<span class="text-[32rpx] font-500 text-black">收货人</span> <span class="text-[32rpx] font-500 text-black">收货人</span>
</template> </template>
<nut-input v-model="formData.name" placeholder="请输入姓名" type="text" input-align="center" /> <nut-input v-model="formData.name" placeholder="请输入姓名" type="text" input-align="left" />
</nut-form-item> </nut-form-item>
<nut-form-item> <nut-form-item>
<nut-radio-group v-model="formData.gender" direction="horizontal"> <nut-radio-group v-model="formData.gender" direction="horizontal">
@ -27,7 +27,7 @@
</nut-form-item> </nut-form-item>
</div> </div>
<nut-divider /> <nut-divider />
<nut-form-item label-width="68px" class="w-full!"> <nut-form-item class="w-full!">
<template #label> <template #label>
<span class="text-[32rpx] font-500 text-black">电话号码</span> <span class="text-[32rpx] font-500 text-black">电话号码</span>
</template> </template>
@ -36,7 +36,7 @@
</div> </div>
<div class="rounded-[20rpx] bg-white px-[30rpx] py-[44rpx] mt-[30rpx]"> <div class="rounded-[20rpx] bg-white px-[30rpx] py-[44rpx] mt-[30rpx]">
<nut-form-item label-width="88px" class="w-full!" label-position="top" star-position="right"> <nut-form-item class="w-full!" label-position="top" star-position="right">
<template #label> <template #label>
<span class="text-[32rpx] font-500 text-black">收货地址</span> <span class="text-[32rpx] font-500 text-black">收货地址</span>
</template> </template>
@ -55,7 +55,7 @@
</div> </div>
</nut-form-item> </nut-form-item>
<nut-divider /> <nut-divider />
<nut-form-item label-width="78px" class="w-full!"> <nut-form-item class="w-full!">
<template #label> <template #label>
<span class="text-[32rpx] font-500 text-black">详细地址</span> <span class="text-[32rpx] font-500 text-black">详细地址</span>
</template> </template>
@ -64,7 +64,7 @@
</div> </div>
<div class="rounded-[20rpx] bg-white px-[30rpx] py-[30rpx] mt-[30rpx]"> <div class="rounded-[20rpx] bg-white px-[30rpx] py-[30rpx] mt-[30rpx]">
<nut-form-item label-width="128px" class="w-full!"> <nut-form-item class="w-full!">
<template #label> <template #label>
<div class="text-[32rpx] font-500 text-black flex items-center h-full">设为默认收货地址</div> <div class="text-[32rpx] font-500 text-black flex items-center h-full">设为默认收货地址</div>
</template> </template>
@ -138,5 +138,7 @@
--nut-switch-inside-height: 26px; --nut-switch-inside-height: 26px;
--nut-switch-inside-open-transform: translateX(100%); --nut-switch-inside-open-transform: translateX(100%);
--nut-switch-inside-close-transform: translateX(10%); --nut-switch-inside-close-transform: translateX(10%);
--nut-form-item-label-width: max-content;
} }
</style> </style>

4
src/views/mine/orders.vue
View File

@ -13,7 +13,7 @@
</template> </template>
</nut-searchbar> </nut-searchbar>
<div class="flex flex-col bg-white custom-tabs flex-auto"> <div class="flex flex-col bg-white custom-tabs flex-1">
<nut-tabs v-model="activeTab" :swipeable="true" class="h-full" :title-scroll="true"> <nut-tabs v-model="activeTab" :swipeable="true" class="h-full" :title-scroll="true">
<template #titles> <template #titles>
<div <div
@ -27,7 +27,7 @@
</div> </div>
</div> </div>
</template> </template>
<nut-tab-pane :pane-key="item.paneKey" v-for="(item, index) in list" :key="index" class="flex-auto bg-[#f5f5f5]!"> <nut-tab-pane :pane-key="item.paneKey" v-for="(item, index) in list" :key="index" class=" bg-[#f5f5f5]!">
<ul> <ul>
<li class="rounded-[20rpx] bg-white p-[20rpx] mb-[30rpx] flex flex-col" v-for="(item,index) in carts" :key="index"> <li class="rounded-[20rpx] bg-white p-[20rpx] mb-[30rpx] flex flex-col" v-for="(item,index) in carts" :key="index">
<div class="text-[32rpx]"> <div class="text-[32rpx]">

10
src/views/restaurant/index.vue
View File

@ -29,7 +29,7 @@
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="flex items-baseline"> <div class="flex items-baseline">
<nut-price :price="item.price" :decimal-places="2" size="large" class="font-600" /> <nut-price :price="item.price" :decimal-places="2" size="large" class="font-600 restaurant-price" />
<span class="text-[28rpx] font-400 text-[#adafaf]">/份</span> <span class="text-[28rpx] font-400 text-[#adafaf]">/份</span>
</div> </div>
<nut-input-number v-model="item.orderCount" :readonly="true" @reduce="(event) => handleMinus(event, item)" @add="handlePlus(item)" :min="0"> <nut-input-number v-model="item.orderCount" :readonly="true" @reduce="(event) => handleMinus(event, item)" @add="handlePlus(item)" :min="0">
@ -228,5 +228,13 @@
--nut-inputnumber-input-background-color: #fff; --nut-inputnumber-input-background-color: #fff;
--nut-inputnumber-input-margin: 0; --nut-inputnumber-input-margin: 0;
--nut-inputnumber-input-font-size: 18px; --nut-inputnumber-input-font-size: 18px;
--nut-inputnumber-input-width:26px;
} }
.restaurant-price {
--nut-price-symbol-big-size: 16px;
--nut-price-big-size: 22px;
--nut-price-decimal-big-size: 20px;
}
</style> </style>

2
src/views/shop/index.vue
View File

@ -13,7 +13,7 @@
<nut-list class="bg-[#F5F5F5]" :list-data="products" @scroll-bottom="onScrollBottom"> <nut-list class="bg-[#F5F5F5]" :list-data="products" @scroll-bottom="onScrollBottom">
<template #default="{ item }"> <template #default="{ item }">
<div class="flex items-center justify-center mt-[30rpx] mx-[30rpx]" @click="toProductInfo(item)"> <div class="flex items-center justify-center mt-[30rpx] mx-[30rpx]" @click="toProductInfo(item)">
<div class="w-[690rpx] h-[256rpx] rounded-[20rpx] bg-[#fff] flex"> <div class="h-[256rpx] rounded-[20rpx] bg-[#fff] flex">
<img :src="item.image" alt="thumb" class="h-full object-cover w-[256rpx]" /> <img :src="item.image" alt="thumb" class="h-full object-cover w-[256rpx]" />
<div class="flex flex-col p-[30rpx] flex-auto justify-between"> <div class="flex flex-col p-[30rpx] flex-auto justify-between">
<div class="text-[40rpx] font-500">{{ item.name }}</div> <div class="text-[40rpx] font-500">{{ item.name }}</div>

16
src/views/shop/productInfo.vue
View File

@ -20,7 +20,7 @@
<div class="flex flex-col bg-white rounded-[24rpx] mx-[20rpx] bg-gradient-to-r from-[#FF703F] via-[#FF4417] to-[#ff673b] mt-[20rpx]"> <div class="flex flex-col bg-white rounded-[24rpx] mx-[20rpx] bg-gradient-to-r from-[#FF703F] via-[#FF4417] to-[#ff673b] mt-[20rpx]">
<div class="flex justify-between"> <div class="flex justify-between">
<div class="flex items-center space-x-2 pl-[30rpx] pt-[34rpx] mb-[32rpx]"> <div class="flex items-center space-x-2 pl-[30rpx] pt-[34rpx] mb-[32rpx]">
<nut-price price="120.00" size="large" class="product-price" /> <nut-price :price="productInfo?.price" size="large" class="product-price font-700" />
<div class="w-[90rpx] h-[46rpx] bg-white text-[#F46034] flex items-center justify-center rounded-[10rpx_10rpx_10rpx_0]">包邮</div> <div class="w-[90rpx] h-[46rpx] bg-white text-[#F46034] flex items-center justify-center rounded-[10rpx_10rpx_10rpx_0]">包邮</div>
</div> </div>
<div class="custom-share ml-[30rpx] flex items-center justify-center"> <div class="custom-share ml-[30rpx] flex items-center justify-center">
@ -200,19 +200,15 @@
<style lang="scss" scoped> <style lang="scss" scoped>
:deep(.product-price) { :deep(.product-price) {
--nut-price-symbol-big-size: 26px;
--nut-price-big-size: 40px;
--nut-price-decimal-big-size: 24px;
--nut-primary-color: #fff;
.nut-price--symbol { .nut-price--symbol {
font-size: 26px;
color: #fff;
margin-right: 5px; margin-right: 5px;
} }
.nut-price--large,
.nut-price--decimal-large,
.nut-price--decimal-large {
font-size: 40px;
font-weight: 700;
color: #fff;
}
} }
.custom-bg-size { .custom-bg-size {