Compare commits
No commits in common. 'main' and 'qjj' have entirely different histories.
@ -1,34 +1,18 @@
|
||||
// 使用 `export` 关键字将名为 `button` 的变量作为模块的导出项，这样其他模块就能引入并使用它。
|
||||
// `button` 被赋值为通过 `Behavior` 函数创建的一个行为对象（在微信小程序等框架里，行为对象可以被组件引入，以复用其中定义的各类属性、方法以及外部类名等内容）。
|
||||
export const button = Behavior({
|
||||
// `externalClasses` 属性用于定义该行为对象外部可传入的类名列表，这里定义了一个名为 `hover-class` 的外部类名。
|
||||
// 外部类名意味着使用了这个行为的组件，在外部使用时可以通过这个类名来自定义相应的样式，增强组件样式的可定制性。
|
||||
externalClasses: ['hover-class'],
|
||||
|
||||
// `properties` 属性用于定义该行为对象包含的一系列属性，这些属性可以被使用了这个行为的组件所接收和使用，相当于组件对外暴露的可配置属性。
|
||||
properties: {
|
||||
// `id` 属性，其值被限定为字符串类型（`String`），外部使用组件时传入的 `id` 值需要符合字符串的格式要求，可用于唯一标识组件等用途。
|
||||
id: String,
|
||||
// `lang` 属性，详细定义了它的类型为字符串类型（`type: String`），并且设置了默认值为 `'en'`。意味着如果外部没有传入该属性值，组件内部会默认使用 `'en'` 这个值，常用于设置语言相关的配置。
|
||||
lang: {
|
||||
type: String,
|
||||
value: 'en'
|
||||
},
|
||||
// `businessId` 属性，限定接收的值类型为数字类型（`Number`），用于接收和处理与业务相关的数字标识等信息。
|
||||
businessId: Number,
|
||||
// `sessionFrom` 属性，其值限定为字符串类型（`String`），可用于表示会话来源等相关信息，外部使用组件时需要传入符合字符串格式的数据。
|
||||
sessionFrom: String,
|
||||
// `sendMessageTitle` 属性，限定为字符串类型（`String`），可能用于设置发送消息时的标题内容等，外部传入对应字符串来配置此功能相关信息。
|
||||
sendMessageTitle: String,
|
||||
// `sendMessagePath` 属性，同样限定为字符串类型（`String`），也许用于指定发送消息的路径相关信息，由外部传入合适的字符串值进行配置。
|
||||
sendMessagePath: String,
|
||||
// `sendMessageImg` 属性，也是字符串类型（`String`），大概用于配置发送消息时所附带的图片相关信息，外部传入对应字符串进行定制。
|
||||
sendMessageImg: String,
|
||||
// `showMessageCard` 属性，其类型被定义为布尔类型（`Boolean`），用于控制是否显示消息卡片等相关功能的显示与否，外部传入 `true` 或 `false` 来进行相应设置。
|
||||
showMessageCard: Boolean,
|
||||
// `appParameter` 属性，限定为字符串类型（`String`），可用于传递应用相关的参数信息，外部传入对应字符串来配置相应功能。
|
||||
appParameter: String,
|
||||
// `ariaLabel` 属性，同样是字符串类型（`String`），在无障碍访问相关的场景下，用于设置元素的可访问性标签等信息，方便屏幕阅读器等辅助工具使用。
|
||||
ariaLabel: String
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,30 +1,17 @@
|
||||
// 使用 `export` 关键字将名为 `link` 的变量作为模块的导出项，这样其他模块就可以引入并使用它。
|
||||
// `link` 在这里被赋值为通过 `Behavior` 函数创建的一个行为对象，在微信小程序等框架中，行为对象能够被组件引入，以此复用其中定义的属性、方法等内容，来扩展组件的功能。
|
||||
export const link = Behavior({
|
||||
// `properties` 属性用于定义该行为对象所包含的组件可接收的外部属性，相当于对外暴露的配置项，外部使用组件时可以传入对应的值来配置组件的行为和状态。
|
||||
properties: {
|
||||
// `url` 属性，其值被限定为字符串类型（`String`），外部使用组件时需要传入符合字符串格式的数据，通常用于指定链接的地址，比如页面跳转的目标地址等。
|
||||
url: String,
|
||||
// `linkType` 属性，详细定义了它的类型为字符串类型（`type: String`），并且设置了默认值为 `'navigateTo'`。
|
||||
// 这个属性大概率用于指定链接跳转的方式，默认是 `'navigateTo'`，表示以小程序中对应的页面跳转方式（类似 `wx.navigateTo`）进行跳转，外部也可以传入其他符合要求的跳转方式字符串来改变默认行为。
|
||||
linkType: {
|
||||
type: String,
|
||||
value: 'navigateTo'
|
||||
}
|
||||
},
|
||||
// `methods` 属性用于定义该行为对象中包含的方法，这些方法可以被使用了这个行为的组件所调用，用于实现特定的功能逻辑。
|
||||
methods: {
|
||||
// 定义名为 `jumpLink` 的方法，该方法用于触发链接跳转的操作，接收一个可选参数 `urlKey`，默认值为 `'url'`。
|
||||
jumpLink(urlKey = 'url') {
|
||||
// 从组件实例的数据（`this.data`）中获取由 `urlKey` 指定的属性值，并赋值给变量 `url`。
|
||||
// 通常情况下，如果 `urlKey` 使用默认值 `'url'`，就是获取之前定义的 `url` 属性所对应的值，也就是目标跳转地址。
|
||||
const url = this.data[urlKey];
|
||||
// 判断获取到的 `url` 是否存在（不为空字符串、`null`、`undefined` 等假值情况），如果存在，则执行页面跳转操作。
|
||||
if (url) {
|
||||
// 通过 `wx` 对象（微信小程序提供的全局 API 对象），使用 `this.data.linkType` 指定的跳转方式来进行页面跳转，将获取到的 `url` 作为参数传递给对应的跳转方法。
|
||||
// 例如，如果 `linkType` 的值为 `'navigateTo'`，就相当于执行 `wx.navigateTo({ url })`，实现跳转到指定的页面地址。
|
||||
wx[this.data.linkType]({ url });
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,37 +1,25 @@
|
||||
// 使用 `export` 关键字将名为 `openType` 的变量作为模块的导出项，使得其他模块能够引入并使用它。
|
||||
// `openType` 被赋值为通过 `Behavior` 函数创建的一个行为对象，在微信小程序的开发框架中，行为对象可供组件引入，以复用其中定义好的属性、方法等内容，从而扩展组件的功能。
|
||||
export const openType = Behavior({
|
||||
// `properties` 属性用于定义该行为对象所关联组件能够接收的外部属性，也就是组件对外暴露的可配置项，外部在使用组件时可以传入相应的值来设定组件的相关特性。
|
||||
properties: {
|
||||
// `openType` 属性，其值被限定为字符串类型（`String`），外部使用组件时需传入符合字符串格式的数据，该属性通常用于指定某种开放类型相关的设置，具体含义会依据微信小程序不同的开放能力场景而定。
|
||||
openType: String
|
||||
},
|
||||
// `methods` 属性用于定义行为对象中包含的一系列方法，这些方法可以被引入该行为的组件所调用，用于实现特定的业务逻辑以及与外部的交互操作。
|
||||
methods: {
|
||||
// 定义名为 `bindGetUserInfo` 的方法，它接收一个 `event` 参数，该参数通常包含了微信小程序触发对应事件时传递过来的相关信息。
|
||||
// 此方法的作用是，当触发获取用户信息的相关事件时，通过 `this.$emit` 向外（可能是组件的父组件等监听者）触发一个名为 `getuserinfo` 的自定义事件，并将 `event.detail`（即包含用户信息详情的数据）作为参数传递出去，方便外部进行相应的处理，比如获取到用户信息后进行展示或者存储等操作。
|
||||
bindGetUserInfo(event) {
|
||||
this.$emit('getuserinfo', event.detail);
|
||||
},
|
||||
// 定义名为 `bindContact` 的方法，同样接收 `event` 参数，当触发与联系人相关的事件时，通过 `this.$emit` 向外触发名为 `contact` 的自定义事件，并传递 `event.detail`（包含联系人相关详细信息的数据），使得外部可以处理联系人相关的业务逻辑，例如更新联系人列表等操作。
|
||||
bindContact(event) {
|
||||
this.$emit('contact', event.detail);
|
||||
},
|
||||
// 定义名为 `bindGetPhoneNumber` 的方法，接收 `event` 参数，在触发获取手机号码相关事件时，使用 `this.$emit` 向外触发 `getphonenumber` 自定义事件，同时将 `event.detail`（包含手机号码相关信息的数据）传递出去，便于外部获取并使用该手机号码信息，比如进行验证或者存储等处理。
|
||||
bindGetPhoneNumber(event) {
|
||||
this.$emit('getphonenumber', event.detail);
|
||||
},
|
||||
// 定义名为 `bindError` 的方法，接收 `event` 参数，当出现错误相关的事件触发时，通过 `this.$emit` 向外触发 `error` 自定义事件，将 `event.detail`（包含错误详细信息的数据）传递出去，方便外部根据错误信息进行相应的错误处理，例如提示用户或者记录日志等操作。
|
||||
bindError(event) {
|
||||
this.$emit('error', event.detail);
|
||||
},
|
||||
// 定义名为 `bindLaunchApp` 的方法，接收 `event` 参数，在触发启动应用相关的事件时，利用 `this.$emit` 向外触发 `launchapp` 自定义事件，把 `event.detail`（包含启动应用相关详细信息的数据）传递出去，使得外部可以根据启动情况做后续处理，比如判断启动是否成功等操作。
|
||||
bindLaunchApp(event) {
|
||||
this.$emit('launchapp', event.detail);
|
||||
},
|
||||
// 定义名为 `bindOpenSetting` 的方法，接收 `event` 参数，当触发打开设置相关的事件时，通过 `this.$emit` 向外触发 `opensetting` 自定义事件，同时传递 `event.detail`（包含打开设置相关详细信息的数据），方便外部知晓设置页面的打开情况以及进行相应的后续操作，例如判断用户是否进行了相关设置调整等操作。
|
||||
bindOpenSetting(event) {
|
||||
this.$emit('opensetting', event.detail);
|
||||
}
|
||||
},
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,57 +1,39 @@
|
||||
// 定义一个全局变量 `cache`，用于缓存获取到的安全区域相关信息，初始值设置为 `null`。
|
||||
let cache = null;
|
||||
|
||||
// 定义 `getSafeArea` 函数，该函数用于获取设备的安全区域相关信息，返回一个 `Promise` 对象，方便进行异步操作的处理。
|
||||
function getSafeArea() {
|
||||
return new Promise((resolve, reject) => {
|
||||
// 首先检查 `cache` 是否已经有值（不为 `null`），如果已经缓存了安全区域信息，则直接通过 `resolve` 将缓存的信息传递出去，避免重复获取。
|
||||
if (cache!= null) {
|
||||
if (cache != null) {
|
||||
resolve(cache);
|
||||
}
|
||||
// 如果 `cache` 为 `null`，说明还没有获取过安全区域信息，需要调用微信小程序的 `wx.getSystemInfo` 方法来获取系统相关信息。
|
||||
else {
|
||||
wx.getSystemInfo({
|
||||
// `success` 回调函数会在成功获取到系统信息后被调用，它接收一个包含系统信息的对象作为参数，解构出其中需要的属性（`model` 表示设备型号，`screenHeight` 表示屏幕高度，`statusBarHeight` 表示状态栏高度）。
|
||||
success: ({ model, screenHeight, statusBarHeight }) => {
|
||||
// 通过正则表达式判断设备型号是否匹配 `iphone x`（不区分大小写），用于识别是否为 iPhone X 系列设备，将结果赋值给 `iphoneX` 变量。
|
||||
const iphoneX = /iphone x/i.test(model);
|
||||
// 判断设备型号是否匹配 `iPhone11`（不区分大小写）并且屏幕高度是否为 `812`，用于识别特定的 iPhone 11 相关机型，将结果赋值给 `iphoneNew` 变量。
|
||||
const iphoneNew = /iPhone11/i.test(model) && screenHeight === 812;
|
||||
// 将安全区域相关信息缓存到 `cache` 变量中，包括是否为 iPhone X 系列或特定 iPhone 11 机型（通过 `iphoneX` 或 `iphoneNew` 判断）以及状态栏高度信息。
|
||||
cache = {
|
||||
isIPhoneX: iphoneX || iphoneNew,
|
||||
statusBarHeight
|
||||
};
|
||||
// 通过 `resolve` 将缓存好的安全区域信息传递出去，用于后续的处理。
|
||||
resolve(cache);
|
||||
},
|
||||
// 如果获取系统信息失败，调用 `reject`，将错误信息传递出去，由调用 `getSafeArea` 函数的地方进行相应的错误处理。
|
||||
fail: reject
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 使用 `export` 关键字导出一个名为 `safeArea` 的函数，该函数返回一个通过 `Behavior` 创建的行为对象，用于在微信小程序组件中实现与安全区域相关的功能和属性配置。
|
||||
export const safeArea = ({ safeAreaInsetBottom = true, safeAreaInsetTop = false } = {}) => Behavior({
|
||||
// `properties` 属性用于定义行为对象关联的组件可接收的外部属性，这里定义了两个与安全区域插入相关的布尔类型属性。
|
||||
properties: {
|
||||
// `safeAreaInsetTop` 属性，其类型为布尔类型（`Boolean`），默认值由传入 `safeArea` 函数的参数 `safeAreaInsetTop` 决定（如果未传则默认为 `false`），用于控制是否在顶部插入安全区域相关的样式或布局调整等。
|
||||
safeAreaInsetTop: {
|
||||
type: Boolean,
|
||||
value: safeAreaInsetTop
|
||||
},
|
||||
// `safeAreaInsetBottom` 属性，同样是布尔类型（`Boolean`），默认值由传入 `safeArea` 函数的参数 `safeAreaInsetBottom` 决定（如果未传则默认为 `true`），用于控制是否在底部插入安全区域相关的样式或布局调整等。
|
||||
safeAreaInsetBottom: {
|
||||
type: Boolean,
|
||||
value: safeAreaInsetBottom
|
||||
}
|
||||
},
|
||||
// `created` 生命周期钩子函数，在组件被创建时会被调用，这里用于获取安全区域信息并设置到组件的 `data` 中，以便组件后续使用这些信息进行相应的布局或样式处理。
|
||||
created() {
|
||||
// 调用 `getSafeArea` 函数获取安全区域信息，当获取成功后（`Promise` 状态变为 `resolved`），解构出 `isIPhoneX`（是否为 iPhone X 系列等相关机型）和 `statusBarHeight`（状态栏高度）信息，并通过 `this.set`（这里假设是微信小程序组件中用于设置数据的方法）将这些信息设置到组件的数据中。
|
||||
getSafeArea().then(({ isIPhoneX, statusBarHeight }) => {
|
||||
this.set({ isIPhoneX, statusBarHeight });
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,391 +1,365 @@
|
||||
/* 容器样式 */
|
||||
.container {
|
||||
width: 100%; /* 设置容器宽度为100% */
|
||||
background: #f4f4f4; /* 设置背景颜色 */
|
||||
min-height: calc(100vh - 118rpx); /* 设置最小高度为视窗高度减去底部导航栏高度 */
|
||||
width: 100%;
|
||||
background: #f4f4f4;
|
||||
min-height: calc(100vh - 118rpx);
|
||||
}
|
||||
|
||||
/* 产品列表样式 */
|
||||
.prod-list {
|
||||
padding-bottom: 118rpx; /* 底部填充以防止内容被固定底部遮挡 */
|
||||
width: 100%; /* 设置宽度为100% */
|
||||
/* 单个产品块样式 */
|
||||
padding-bottom: 118rpx;
|
||||
width: 100%;
|
||||
.prod-block {
|
||||
background: #fff; /* 背景颜色 */
|
||||
margin-top: 15rpx; /* 上边距 */
|
||||
/* 折扣提示样式 */
|
||||
background: #fff;
|
||||
margin-top: 15rpx;
|
||||
.discount-tips {
|
||||
padding: 20rpx 0 20rpx 20rpx; /* 内边距 */
|
||||
border-bottom: 2rpx solid #f4f4f4; /* 下边框 */
|
||||
height: 40rpx; /* 高度 */
|
||||
line-height: 40rpx; /* 行高 */
|
||||
/* 文字块样式 */
|
||||
padding: 20rpx 0 20rpx 20rpx;
|
||||
border-bottom: 2rpx solid #f4f4f4;
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
.text-block {
|
||||
padding: 3rpx 5rpx; /* 内边距 */
|
||||
border-radius: 8rpx; /* 圆角 */
|
||||
font-size: 22rpx; /* 字体大小 */
|
||||
color: #eb2444; /* 文字颜色 */
|
||||
border: 2rpx solid #eb2444; /* 边框 */
|
||||
padding: 3rpx 5rpx;
|
||||
border-radius: 8rpx;
|
||||
font-size: 22rpx;
|
||||
color: #eb2444;
|
||||
border: 2rpx solid #eb2444;
|
||||
}
|
||||
/* 文字列表样式 */
|
||||
.text-list {
|
||||
font-size: 24rpx; /* 字体大小 */
|
||||
margin-left: 10rpx; /* 左边距 */
|
||||
font-size: 24rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 产品项样式 */
|
||||
.item {
|
||||
background: #fff; /* 背景颜色 */
|
||||
display: flex; /* 使用弹性布局 */
|
||||
align-items: center; /* 垂直居中对齐 */
|
||||
padding: 20rpx; /* 内边距 */
|
||||
/* 产品信息样式 */
|
||||
background: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx;
|
||||
.prodinfo {
|
||||
position: relative; /* 相对定位 */
|
||||
color: #999; /* 文字颜色 */
|
||||
width: 100%; /* 宽度 */
|
||||
/* 底线伪元素 */
|
||||
position: relative;
|
||||
color: #999;
|
||||
width: 100%;
|
||||
&::after {
|
||||
content: ''; /* 伪元素内容为空 */
|
||||
background-color: #f4f4f4; /* 背景颜色 */
|
||||
left: 0; /* 左偏移 */
|
||||
height: 1px; /* 高度 */
|
||||
transform-origin: 50% 100% 0; /* 变换原点 */
|
||||
bottom: -20rpx; /* 底部偏移 */
|
||||
position: absolute; /* 绝对定位 */
|
||||
display: block; /* 显示为块级元素 */
|
||||
width: 642rpx; /* 宽度 */
|
||||
padding-left: 20rpx; /* 左内边距 */
|
||||
content: '';
|
||||
background-color: #f4f4f4;
|
||||
left: 0;
|
||||
height: 1px;
|
||||
transform-origin: 50% 100% 0;
|
||||
bottom: -20rpx;
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 642rpx;
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
/* 最后一个子元素去除底线 */
|
||||
&:last-child {
|
||||
.pic {
|
||||
text-align: center;
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
line-height: 180rpx;
|
||||
font-size: 0;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
.prodinfo {
|
||||
&::after {
|
||||
height: 0; /* 高度设为0 */
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
/* 图片容器 */
|
||||
.pic {
|
||||
text-align: center; /* 文本居中 */
|
||||
width: 180rpx; /* 宽度 */
|
||||
height: 180rpx; /* 高度 */
|
||||
line-height: 180rpx; /* 行高 */
|
||||
font-size: 0; /* 字体大小 */
|
||||
}
|
||||
}
|
||||
/* 状态样式 */
|
||||
.staus {
|
||||
text-align: center; /* 文本居中 */
|
||||
background: rgb(196, 192, 192); /* 背景颜色 */
|
||||
font-size: 20rpx; /* 字体大小 */
|
||||
width: 50rpx; /* 宽度 */
|
||||
color: #fff; /* 文字颜色 */
|
||||
text-align: center;
|
||||
background: rgb(196, 192, 192);
|
||||
font-size: 20rpx;
|
||||
width: 50rpx;
|
||||
color: #fff;
|
||||
}
|
||||
/* 操作选项样式 */
|
||||
.opt {
|
||||
font-size: 28rpx; /* 字体大小 */
|
||||
margin-left: 20rpx; /* 左边距 */
|
||||
width: 100%; /* 宽度 */
|
||||
font-size: 28rpx;
|
||||
margin-left: 20rpx;
|
||||
width: 100%;
|
||||
}
|
||||
/* 图片样式 */
|
||||
.pic {
|
||||
image {
|
||||
max-width: 100%; /* 最大宽度 */
|
||||
max-height: 100%; /* 最大高度 */
|
||||
vertical-align: middle; /* 垂直对齐 */
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 失效产品样式 */
|
||||
.lose-efficacy {
|
||||
.discount-tips {
|
||||
padding: 20rpx 0; /* 内边距 */
|
||||
border-bottom: 2rpx solid #ddd; /* 下边框 */
|
||||
height: 50rpx; /* 高度 */
|
||||
line-height: 50rpx; /* 行高 */
|
||||
margin-left: 20rpx; /* 左边距 */
|
||||
/* 文字列表样式 */
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 2rpx solid #ddd;
|
||||
height: 50rpx;
|
||||
line-height: 50rpx;
|
||||
margin-left: 20rpx;
|
||||
.text-list {
|
||||
font-size: 30rpx; /* 字体大小 */
|
||||
margin-left: 10rpx; /* 左边距 */
|
||||
font-size: 30rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 产品信息样式 */
|
||||
.prodinfo {
|
||||
display: flex; /* 使用弹性布局 */
|
||||
margin-left: 20rpx; /* 左边距 */
|
||||
/* 操作选项样式 */
|
||||
display: flex;
|
||||
margin-left: 20rpx;
|
||||
.opt {
|
||||
.prod-name {
|
||||
color: #333; /* 文字颜色 */
|
||||
max-height: 72rpx; /* 最大高度 */
|
||||
line-height: 36rpx; /* 行高 */
|
||||
display: -webkit-box; /* WebKit行盒模型 */
|
||||
word-break: break-all; /* 允许单词内断行 */
|
||||
overflow: hidden; /* 隐藏溢出内容 */
|
||||
text-overflow: ellipsis; /* 溢出用省略号表示 */
|
||||
-webkit-line-clamp: 2; /* 限制行数 */
|
||||
-webkit-box-orient: vertical; /* 竖向排列 */
|
||||
color: #333;
|
||||
max-height: 72rpx;
|
||||
line-height: 36rpx;
|
||||
display: -webkit-box;
|
||||
word-break: break-all;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
/* 产品信息文本样式 */
|
||||
.prod-info-text {
|
||||
color: #999; /* 文字颜色 */
|
||||
display: inline-block; /* 显示为行内块 */
|
||||
-webkit-line-clamp: 1; /* 限制行数 */
|
||||
height: 48rpx; /* 高度 */
|
||||
line-height: 48rpx; /* 行高 */
|
||||
background: #f9f9f9; /* 背景颜色 */
|
||||
padding: 0 10rpx; /* 内边距 */
|
||||
border-radius: 4rpx; /* 圆角 */
|
||||
margin: 10rpx 0 0rpx 0; /* 外边距 */
|
||||
overflow: hidden; /* 隐藏溢出内容 */
|
||||
font-size: 24rpx; /* 字体大小 */
|
||||
position: relative; /* 相对定位 */
|
||||
font-family: arial; /* 字体系列 */
|
||||
color: #999;
|
||||
display: inline-block;
|
||||
-webkit-line-clamp: 1;
|
||||
height: 48rpx;
|
||||
line-height: 48rpx;
|
||||
background: #f9f9f9;
|
||||
padding: 0 10rpx 0 10rpx;
|
||||
border-radius: 4rpx;
|
||||
margin: 10rpx 0 0rpx 0;
|
||||
overflow: hidden;
|
||||
font-size: 24rpx;
|
||||
position: relative;
|
||||
font-family: arial;
|
||||
}
|
||||
/* 空的产品信息文本样式 */
|
||||
.prod-info-text.empty-n {
|
||||
padding: 0; /* 内边距 */
|
||||
padding: 0;
|
||||
}
|
||||
/* 价格和数量样式 */
|
||||
.price-count {
|
||||
display: flex; /* 使用弹性布局 */
|
||||
align-items: center; /* 垂直居中对齐 */
|
||||
justify-content: space-between; /* 两端对齐 */
|
||||
/* 价格样式 */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.price {
|
||||
color: #eb2444; /* 文字颜色 */
|
||||
color: #eb2444;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 产品信息文本伪元素样式 */
|
||||
.prod-info-text {
|
||||
&:before {
|
||||
border-top: 5px solid #aaa; /* 上边框 */
|
||||
border-top: 5px solid #aaa;
|
||||
}
|
||||
|
||||
&:after {
|
||||
border-top: 5px solid #f9f9f9; /* 上边框 */
|
||||
top: 9px; /* 顶部偏移 */
|
||||
border-top: 5px solid #f9f9f9;
|
||||
top: 9px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 失效产品样式 */
|
||||
.lose-efficacy {
|
||||
.prodinfo {
|
||||
.opt {
|
||||
.price-count {
|
||||
.price {
|
||||
color: #999; /* 文字颜色 */
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
margin-top: 20rpx; /* 上边距 */
|
||||
background: #fff; /* 背景颜色 */
|
||||
/* 产品项样式 */
|
||||
margin-top: 20rpx;
|
||||
background: #fff;
|
||||
.item {
|
||||
background: #f8f8f9; /* 背景颜色 */
|
||||
background: #f8f8f9;
|
||||
}
|
||||
/* 折扣提示样式 */
|
||||
.discount-tips {
|
||||
.empty-prod {
|
||||
color: #777; /* 文字颜色 */
|
||||
font-size: 26rpx; /* 字体大小 */
|
||||
border: 2rpx solid #999; /* 边框 */
|
||||
padding: 0 10rpx; /* 内边距 */
|
||||
border-radius: 8rpx; /* 圆角 */
|
||||
float: right; /* 向右浮动 */
|
||||
margin-right: 20rpx; /* 右边距 */
|
||||
color: #777;
|
||||
font-size: 26rpx;
|
||||
border: 2rpx solid #999;
|
||||
padding: 0 10rpx;
|
||||
border-radius: 8rpx;
|
||||
float: right;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 数量选择器样式 */
|
||||
.m-numSelector {
|
||||
.minus,
|
||||
.plus {
|
||||
float: left; /* 向左浮动 */
|
||||
box-sizing: border-box; /* 盒模型 */
|
||||
height: 56rpx; /* 高度 */
|
||||
border: 2rpx solid #d9d9d9; /* 边框 */
|
||||
position: relative; /* 相对定位 */
|
||||
width: 56rpx; /* 宽度 */
|
||||
&::before,
|
||||
&::after {
|
||||
position: absolute; /* 绝对定位 */
|
||||
.minus {
|
||||
float: left;
|
||||
box-sizing: border-box;
|
||||
height: 56rpx;
|
||||
border: 2rpx solid #d9d9d9;
|
||||
position: relative;
|
||||
width: 56rpx;
|
||||
border-right: 0;
|
||||
border-top-left-radius: 4rpx;
|
||||
border-bottom-left-radius: 4rpx;
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: auto; /* 自动外边距 */
|
||||
content: ' '; /* 伪元素内容为空 */
|
||||
width: 22rpx; /* 宽度 */
|
||||
height: 3rpx; /* 高度 */
|
||||
background-color: #7f7f7f; /* 背景颜色 */
|
||||
margin: auto;
|
||||
content: ' ';
|
||||
width: 22rpx;
|
||||
height: 3rpx;
|
||||
background-color: #7f7f7f;
|
||||
}
|
||||
}
|
||||
/* 减号按钮样式 */
|
||||
.minus {
|
||||
border-right: 0; /* 右边框 */
|
||||
border-top-left-radius: 4rpx; /* 左上圆角 */
|
||||
border-bottom-left-radius: 4rpx; /* 左下圆角 */
|
||||
}
|
||||
/* 输入框样式 */
|
||||
input {
|
||||
float: left; /* 向左浮动 */
|
||||
box-sizing: border-box; /* 盒模型 */
|
||||
height: 56rpx; /* 高度 */
|
||||
border: 2rpx solid #d9d9d9; /* 边框 */
|
||||
width: 56rpx; /* 宽度 */
|
||||
text-align: center; /* 文本居中 */
|
||||
color: #333; /* 文字颜色 */
|
||||
float: left;
|
||||
box-sizing: border-box;
|
||||
height: 56rpx;
|
||||
border: 2rpx solid #d9d9d9;
|
||||
width: 56rpx;
|
||||
text-align: center;
|
||||
color: #333;
|
||||
}
|
||||
/* 加号按钮样式 */
|
||||
.plus {
|
||||
border-left: 0; /* 左边框 */
|
||||
border-top-right-radius: 4rpx; /* 右上圆角 */
|
||||
border-bottom-right-radius: 4rpx; /* 右下圆角 */
|
||||
float: left;
|
||||
box-sizing: border-box;
|
||||
height: 56rpx;
|
||||
border: 2rpx solid #d9d9d9;
|
||||
position: relative;
|
||||
width: 56rpx;
|
||||
border-left: 0;
|
||||
border-top-right-radius: 4rpx;
|
||||
border-bottom-right-radius: 4rpx;
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
content: ' ';
|
||||
width: 22rpx;
|
||||
height: 3rpx;
|
||||
background-color: #7f7f7f;
|
||||
}
|
||||
&::after {
|
||||
transform: rotate(90deg); /* 旋转90度 */
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
content: ' ';
|
||||
width: 22rpx;
|
||||
height: 3rpx;
|
||||
background-color: #7f7f7f;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
float: right; /* 向右浮动 */
|
||||
/* 非禁用状态下的交互样式 */
|
||||
float: right;
|
||||
&:not(.disabled) {
|
||||
.minus,
|
||||
.minus {
|
||||
&:not(.disabled) {
|
||||
&:active {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
}
|
||||
}
|
||||
.plus {
|
||||
&:not(.disabled) {
|
||||
&:active {
|
||||
background-color: #f4f4f4; /* 激活时背景颜色 */
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 深层选择器用于复选框样式 */
|
||||
:deep(checkbox) {
|
||||
.uni-checkbox-input,
|
||||
.wx-checkbox-input {
|
||||
border-radius: 50%; /* 圆形 */
|
||||
width: 35rpx; /* 宽度 */
|
||||
height: 35rpx; /* 高度 */
|
||||
border-radius: 50%;
|
||||
width: 35rpx;
|
||||
height: 35rpx;
|
||||
}
|
||||
/* 选中状态下的复选框样式 */
|
||||
.wx-checkbox-input.wx-checkbox-input-checked {
|
||||
background: #eb2444; /* 背景颜色 */
|
||||
border-color: #eb2444; /* 边框颜色 */
|
||||
background: #eb2444;
|
||||
border-color: #eb2444;
|
||||
&::before {
|
||||
text-align: center; /* 文本居中 */
|
||||
font-size: 22rpx; /* 字体大小 */
|
||||
color: #fff; /* 文字颜色 */
|
||||
background: transparent; /* 透明背景 */
|
||||
transform: translate(-50%, -50%) scale(1); /* 居中缩放 */
|
||||
-webkit-transform: translate(-50%, -50%) scale(1); /* WebKit浏览器居中缩放 */
|
||||
text-align: center;
|
||||
font-size: 22rpx;
|
||||
color: #fff;
|
||||
background: transparent;
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
-webkit-transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 空状态样式 */
|
||||
.empty {
|
||||
font-size: 26rpx; /* 字体大小 */
|
||||
color: #aaa; /* 文字颜色 */
|
||||
padding-top: 200rpx; /* 上内边距 */
|
||||
/* 文字样式 */
|
||||
font-size: 26rpx;
|
||||
color: #aaa;
|
||||
padding-top: 200rpx;
|
||||
.txt {
|
||||
text-align: center; /* 文本居中 */
|
||||
margin-top: 30rpx; /* 上边距 */
|
||||
text-align: center;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
/* 图片样式 */
|
||||
.img {
|
||||
margin-top: 80rpx; /* 上边距 */
|
||||
text-align: center; /* 文本居中 */
|
||||
margin-top: 80rpx;
|
||||
text-align: center;
|
||||
image {
|
||||
width: 80rpx; /* 宽度 */
|
||||
height: 80rpx; /* 高度 */
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 价格和数量样式 */
|
||||
.price-count {
|
||||
.disable-price {
|
||||
color: #999; /* 文字颜色 */
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
/* 购物车底部栏样式 */
|
||||
.cart-footer {
|
||||
position: fixed; /* 固定定位 */
|
||||
bottom: calc(90rpx + env(safe-area-inset-bottom)); /* 底部距离 */
|
||||
left: 0; /* 左偏移 */
|
||||
width: 100%; /* 宽度 */
|
||||
display: flex; /* 使用弹性布局 */
|
||||
flex-direction: row nowrap; /* 行内不换行 */
|
||||
height: 98rpx; /* 高度 */
|
||||
border-top: 2rpx solid #f4f4f4; /* 上边框 */
|
||||
z-index: 999; /* 层叠顺序 */
|
||||
/* 按钮样式 */
|
||||
position: fixed;
|
||||
bottom: calc(90rpx + env(safe-area-inset-bottom));
|
||||
left: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row nowrap;
|
||||
height: 98rpx;
|
||||
border-top: 2rpx solid #f4f4f4;
|
||||
z-index: 999;
|
||||
.btn {
|
||||
position: relative; /* 相对定位 */
|
||||
display: flex; /* 使用弹性布局 */
|
||||
flex-grow: 1; /* 弹性增长 */
|
||||
justify-content: center; /* 水平居中 */
|
||||
align-items: center; /* 垂直居中 */
|
||||
width: 0; /* 宽度 */
|
||||
background-color: #fafafa; /* 背景颜色 */
|
||||
background: rgba(255,255,255,0.95); /* 半透明背景 */
|
||||
font-size: 28rpx; /* 字体大小 */
|
||||
/* 总金额消息样式 */
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 0;
|
||||
background-color: #fafafa;
|
||||
background: rgba(255,255,255,0.95);
|
||||
font-size: 28rpx;
|
||||
.total-msg {
|
||||
font-size: 20rpx; /* 字体大小 */
|
||||
font-size: 20rpx;
|
||||
}
|
||||
}
|
||||
/* 总价按钮样式 */
|
||||
.btn.total {
|
||||
display: flex; /* 使用弹性布局 */
|
||||
flex-flow: column; /* 列方向 */
|
||||
align-items: flex-start; /* 左对齐 */
|
||||
width: 300rpx; /* 宽度 */
|
||||
/* 价格样式 */
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: flex-start;
|
||||
width: 300rpx;
|
||||
.price {
|
||||
color: #eb2444; /* 文字颜色 */
|
||||
font-size: 30rpx; /* 字体大小 */
|
||||
color: #eb2444;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
/* 删除按钮样式 */
|
||||
.btn.del {
|
||||
color: #eb2444; /* 文字颜色 */
|
||||
width: 70rpx; /* 宽度 */
|
||||
font-size: 22rpx; /* 字体大小 */
|
||||
text-align: left; /* 文本左对齐 */
|
||||
display: block; /* 显示为块级元素 */
|
||||
line-height: 102rpx; /* 行高 */
|
||||
color: #eb2444;
|
||||
width: 70rpx;
|
||||
font-size: 22rpx;
|
||||
text-align: left;
|
||||
display: block;
|
||||
line-height: 102rpx;
|
||||
}
|
||||
/* 全选按钮样式 */
|
||||
.btn.all {
|
||||
width: 150rpx; /* 宽度 */
|
||||
font-size: 26rpx; /* 字体大小 */
|
||||
/* 标签样式 */
|
||||
width: 150rpx;
|
||||
font-size: 26rpx;
|
||||
label {
|
||||
display: flex; /* 使用弹性布局 */
|
||||
flex-grow: 1; /* 弹性增长 */
|
||||
justify-content: center; /* 水平居中 */
|
||||
align-items: center; /* 垂直居中 */
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
/* 结算按钮样式 */
|
||||
.btn.settle {
|
||||
width: 200rpx; /* 宽度 */
|
||||
background: #eb2444; /* 背景颜色 */
|
||||
color: #fff; /* 文字颜色 */
|
||||
width: 200rpx;
|
||||
background: #eb2444;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,284 +1,247 @@
|
||||
/* 定义容器的基本样式 */
|
||||
.container {
|
||||
background: #f4f4f4; /* 设置背景颜色为浅灰色 */
|
||||
background: #f4f4f4;
|
||||
}
|
||||
|
||||
/* 订单详情的样式 */
|
||||
.order-detail {
|
||||
margin-bottom: 120rpx; /* 设置底部外边距，确保与其他元素有足够的间距 */
|
||||
padding-bottom: 160rpx; /* 设置底部内边距，用于留出足够的空间 */
|
||||
|
||||
.delivery-addr { /* 配送地址部分的样式 */
|
||||
padding: 20rpx 30rpx; /* 设置上下左右内边距 */
|
||||
background: #fff; /* 设置背景颜色为白色 */
|
||||
|
||||
.user-info { /* 用户信息的样式 */
|
||||
line-height: 48rpx; /* 设置行高 */
|
||||
word-wrap: break-word; /* 允许长单词或URL地址换行到下一行 */
|
||||
word-break: break-all; /* 在任何字符间断开 */
|
||||
overflow: hidden; /* 超出内容隐藏 */
|
||||
text-overflow: ellipsis; /* 超出内容以省略号显示 */
|
||||
display: -webkit-box; /* 使用Webkit的弹性盒子模型 */
|
||||
-webkit-line-clamp: 1; /* 限制文本行数为1 */
|
||||
-webkit-box-orient: vertical; /* 盒子的方向是垂直的 */
|
||||
|
||||
.item { /* 用户信息项的样式 */
|
||||
font-size: 28rpx; /* 设置字体大小 */
|
||||
margin-right: 30rpx; /* 设置右边距 */
|
||||
vertical-align: top; /* 垂直对齐方式为顶部 */
|
||||
display: inline-block; /* 作为行内块级元素显示 */
|
||||
margin-bottom: 120rpx;
|
||||
padding-bottom: 160rpx;
|
||||
.delivery-addr {
|
||||
padding: 20rpx 30rpx;
|
||||
background: #fff;
|
||||
.user-info {
|
||||
line-height: 48rpx;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
.item {
|
||||
font-size: 28rpx;
|
||||
margin-right: 30rpx;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.addr { /* 地址的样式 */
|
||||
font-size: 26rpx; /* 设置字体大小 */
|
||||
line-height: 36rpx; /* 设置行高 */
|
||||
color: #999; /* 设置字体颜色为浅灰色 */
|
||||
word-wrap: break-word; /* 允许长单词或URL地址换行到下一行 */
|
||||
.addr {
|
||||
font-size: 26rpx;
|
||||
line-height: 36rpx;
|
||||
color: #999;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 商品项的样式 */
|
||||
.prod-item {
|
||||
background-color: #fff; /* 设置背景颜色为白色 */
|
||||
margin-top: 15rpx; /* 设置上边距 */
|
||||
font-size: 28rpx; /* 设置字体大小 */
|
||||
|
||||
.item-cont { /* 商品内容的样式 */
|
||||
.prod-pic { /* 商品图片的样式 */
|
||||
background-color: #fff;
|
||||
margin-top: 15rpx;
|
||||
font-size: 28rpx;
|
||||
.item-cont {
|
||||
.prod-pic {
|
||||
image {
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
width: 100%;
|
||||
height: 100%; /* 确保图片填满整个容器 */
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
font-size: 0; /* 消除行内元素间的空隙 */
|
||||
display: block; /* 作为块级元素显示 */
|
||||
font-size: 0;
|
||||
display: block;
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
overflow: hidden; /* 超出内容隐藏 */
|
||||
background: #fff; /* 设置背景颜色为白色 */
|
||||
margin-right: 16rpx; /* 设置右边距 */
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
display: flex; /* 使用弹性布局 */
|
||||
align-items: center; /* 垂直居中对齐 */
|
||||
padding: 30rpx; /* 设置内边距 */
|
||||
border-top: 2rpx solid #f1f1f1; /* 设置上边框 */
|
||||
|
||||
.prod-info { /* 商品信息的样式 */
|
||||
margin-left: 10rpx; /* 设置左边距 */
|
||||
font-size: 28rpx; /* 设置字体大小 */
|
||||
width: 100%; /* 设置宽度为100% */
|
||||
position: relative; /* 设置相对定位 */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 30rpx;
|
||||
border-top: 2rpx solid #f1f1f1;
|
||||
.prod-info {
|
||||
margin-left: 10rpx;
|
||||
font-size: 28rpx;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
height: 80px;
|
||||
flex: 1; /* 占据剩余空间 */
|
||||
|
||||
.prodname { /* 商品名称的样式 */
|
||||
font-size: 28rpx; /* 设置字体大小 */
|
||||
line-height: 40rpx; /* 设置行高 */
|
||||
max-height: 86rpx; /* 设置最大高度 */
|
||||
overflow: hidden; /* 超出内容隐藏 */
|
||||
display: -webkit-box; /* 使用Webkit的弹性盒子模型 */
|
||||
-webkit-line-clamp: 1; /* 限制文本行数为1 */
|
||||
-webkit-box-orient: vertical; /* 盒子的方向是垂直的 */
|
||||
text-overflow: ellipsis; /* 超出内容以省略号显示 */
|
||||
word-break: break-all; /* 在任何字符间断开 */
|
||||
-webkit-flex: 1;
|
||||
-ms-flex: 1;
|
||||
-webkit-box-flex: 1;
|
||||
-moz-box-flex: 1;
|
||||
flex: 1;
|
||||
.prodname {
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
max-height: 86rpx;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.prod-info-cont { /* 商品信息内容的样式 */
|
||||
position: relative; /* 设置相对定位 */
|
||||
color: #999; /* 设置字体颜色为浅灰色 */
|
||||
margin-top: 10rpx; /* 设置上边距 */
|
||||
font-size: 24rpx; /* 设置字体大小 */
|
||||
|
||||
.info-item { /* 信息项的样式 */
|
||||
color: #999; /* 设置字体颜色为浅灰色 */
|
||||
height: 28rpx; /* 设置高度 */
|
||||
margin-top: 10rpx; /* 设置上边距 */
|
||||
font-size: 24rpx; /* 设置字体大小 */
|
||||
overflow: hidden; /* 超出内容隐藏 */
|
||||
display: -webkit-box; /* 使用Webkit的弹性盒子模型 */
|
||||
-webkit-line-clamp: 1; /* 限制文本行数为1 */
|
||||
-webkit-box-orient: vertical; /* 盒子的方向是垂直的 */
|
||||
text-overflow: ellipsis; /* 超出内容以省略号显示 */
|
||||
word-break: break-all; /* 在任何字符间断开 */
|
||||
width: 70%; /* 设置宽度 */
|
||||
.prod-info-cont {
|
||||
position: relative;
|
||||
color: #999;
|
||||
margin-top: 10rpx;
|
||||
font-size: 24rpx;
|
||||
.info-item {
|
||||
color: #999;
|
||||
height: 28rpx;
|
||||
margin-top: 10rpx;
|
||||
font-size: 24rpx;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.number { /* 数量的样式 */
|
||||
float: left; /* 向左浮动 */
|
||||
margin-right: 20rpx; /* 设置右边距 */
|
||||
.number {
|
||||
float: left;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.price-nums { /* 价格和数量的样式 */
|
||||
margin-top: 30rpx; /* 设置上边距 */
|
||||
|
||||
.prodprice { /* 商品价格的样式 */
|
||||
color: #333; /* 设置字体颜色 */
|
||||
height: 50rpx; /* 设置高度 */
|
||||
line-height: 50rpx; /* 设置行高 */
|
||||
font-size: 24rpx; /* 设置字体大小 */
|
||||
float: left; /* 向左浮动 */
|
||||
.price-nums {
|
||||
margin-top: 30rpx;
|
||||
.prodprice {
|
||||
color: #333;
|
||||
height: 50rpx;
|
||||
line-height: 50rpx;
|
||||
font-size: 24rpx;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.btn-box { /* 按钮容器的样式 */
|
||||
float: right; /* 向右浮动 */
|
||||
text-align: right; /* 文本右对齐 */
|
||||
|
||||
.btn { /* 按钮的样式 */
|
||||
padding: 6rpx 30rpx; /* 设置内边距 */
|
||||
line-height: 36rpx; /* 设置行高 */
|
||||
margin-left: 20rpx; /* 设置左边距 */
|
||||
font-size: 24rpx; /* 设置字体大小 */
|
||||
display: inline-block; /* 作为行内块级元素显示 */
|
||||
border: 2rpx solid #e4e4e4; /* 设置边框 */
|
||||
border-radius: 50rpx; /* 设置圆角 */
|
||||
.btn-box {
|
||||
float: right;
|
||||
text-align: right;
|
||||
.btn {
|
||||
padding: 6rpx 30rpx;
|
||||
line-height: 36rpx;
|
||||
margin-left: 20rpx;
|
||||
font-size: 24rpx;
|
||||
display: inline-block;
|
||||
border: 2rpx solid #e4e4e4;
|
||||
border-radius: 50rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 订单消息的样式 */
|
||||
.order-msg {
|
||||
background: #fff; /* 设置背景颜色为白色 */
|
||||
margin-top: 15rpx; /* 设置上边距 */
|
||||
font-size: 28rpx; /* 设置字体大小 */
|
||||
|
||||
.msg-item { /* 消息项的样式 */
|
||||
padding: 20rpx; /* 设置内边距 */
|
||||
border-top: 2rpx solid #f1f1f1; /* 设置上边框 */
|
||||
|
||||
&:first-child { /* 第一个消息项没有上边框 */
|
||||
background: #fff;
|
||||
margin-top: 15rpx;
|
||||
font-size: 28rpx;
|
||||
.msg-item {
|
||||
padding: 20rpx;
|
||||
border-top: 2rpx solid #f1f1f1;
|
||||
&:first-child {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.item { /* 消息项内部的样式 */
|
||||
display: flex; /* 使用弹性布局 */
|
||||
padding: 10rpx 0; /* 设置上下内边距 */
|
||||
align-items: center; /* 垂直居中对齐 */
|
||||
box-sizing: border-box; /* 设置盒模型 */
|
||||
|
||||
.item-tit { /* 项目标题的样式 */
|
||||
min-width: 140rpx; /* 设置最小宽度 */
|
||||
color: #999; /* 设置字体颜色为浅灰色 */
|
||||
line-height: 48rpx; /* 设置行高 */
|
||||
.item {
|
||||
display: flex;
|
||||
padding: 10rpx 0;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
.item-tit {
|
||||
min-width: 140rpx;
|
||||
color: #999;
|
||||
line-height: 48rpx;
|
||||
}
|
||||
|
||||
.item-txt { /* 项目文本的样式 */
|
||||
flex: 1; /* 占据剩余空间 */
|
||||
line-height: 48rpx; /* 设置行高 */
|
||||
.item-txt {
|
||||
flex: 1;
|
||||
line-height: 48rpx;
|
||||
}
|
||||
|
||||
.item-txt.remarks { /* 备注文本的样式 */
|
||||
max-width: 600rpx; /* 设置最大宽度 */
|
||||
white-space: nowrap; /* 不允许换行 */
|
||||
overflow: hidden; /* 超出内容隐藏 */
|
||||
text-overflow: ellipsis; /* 超出内容以省略号显示 */
|
||||
.item-txt.remarks {
|
||||
max-width: 600rpx;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.copy-btn { /* 复制按钮的样式 */
|
||||
display: block; /* 作为块级元素显示 */
|
||||
margin-left: 20rpx; /* 设置左边距 */
|
||||
border: 2rpx solid #e4e4e4; /* 设置边框 */
|
||||
padding: 6rpx 24rpx; /* 设置内边距 */
|
||||
border-radius: 50rpx; /* 设置圆角 */
|
||||
font-size: 24rpx; /* 设置字体大小 */
|
||||
line-height: 28rpx; /* 设置行高 */
|
||||
.copy-btn {
|
||||
display: block;
|
||||
margin-left: 20rpx;
|
||||
border: 2rpx solid #e4e4e4;
|
||||
padding: 6rpx 24rpx;
|
||||
border-radius: 50rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 28rpx;
|
||||
}
|
||||
|
||||
.item-txt.price { /* 价格文本的样式 */
|
||||
text-align: right; /* 文本右对齐 */
|
||||
.item-txt.price {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.item.payment { /* 支付信息的样式 */
|
||||
border-top: 2rpx solid #f1f1f1; /* 设置上边框 */
|
||||
color: #eb2444; /* 设置字体颜色为红色 */
|
||||
padding-top: 30rpx; /* 设置上边距 */
|
||||
.item.payment {
|
||||
border-top: 2rpx solid #f1f1f1;
|
||||
color: #eb2444;
|
||||
padding-top: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 订单详情页脚的样式 */
|
||||
.order-detail-footer {
|
||||
position: fixed; /* 固定定位 */
|
||||
bottom: 0; /* 固定在页面底部 */
|
||||
width: 100%; /* 设置宽度为100% */
|
||||
max-width: 750rpx; /* 设置最大宽度 */
|
||||
background: #fff; /* 设置背景颜色为白色 */
|
||||
margin: auto; /* 水平居中 */
|
||||
display: flex; /* 使用弹性布局 */
|
||||
padding: 22rpx 0; /* 设置上下内边距 */
|
||||
font-size: 26rpx; /* 设置字体大小 */
|
||||
box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05); /* 设置阴影效果 */
|
||||
|
||||
.dele-order { /* 删除订单按钮的样式 */
|
||||
margin-left: 20rpx; /* 设置左边距 */
|
||||
line-height: 60rpx; /* 设置行高 */
|
||||
display: block; /* 作为块级元素显示 */
|
||||
margin-right: 20rpx; /* 设置右边距 */
|
||||
width: 150rpx; /* 设置宽度 */
|
||||
text-align: center; /* 文本居中 */
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
max-width: 750rpx;
|
||||
background: #fff;
|
||||
margin: auto;
|
||||
display: -webkit-flex;
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
padding: 22rpx 0;
|
||||
font-size: 26rpx;
|
||||
box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);
|
||||
.dele-order {
|
||||
margin-left: 20rpx;
|
||||
line-height: 60rpx;
|
||||
display: block;
|
||||
margin-right: 20rpx;
|
||||
width: 150rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer-box { /* 页脚容器的样式 */
|
||||
flex: 1; /* 占据剩余空间 */
|
||||
text-align: right; /* 文本右对齐 */
|
||||
line-height: 60rpx; /* 设置行高 */
|
||||
|
||||
.buy-again { /* 再次购买按钮的样式 */
|
||||
font-size: 26rpx; /* 设置字体大小 */
|
||||
color: #fff; /* 设置字体颜色为白色 */
|
||||
background: #eb2444; /* 设置背景颜色为红色 */
|
||||
border-radius: 50rpx; /* 设置圆角 */
|
||||
padding: 10rpx 20rpx; /* 设置内边距 */
|
||||
margin-right: 20rpx; /* 设置右边距 */
|
||||
.footer-box {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
line-height: 60rpx;
|
||||
.buy-again {
|
||||
font-size: 26rpx;
|
||||
color: #fff;
|
||||
background: #eb2444;
|
||||
border-radius: 50rpx;
|
||||
padding: 10rpx 20rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.apply-service { /* 申请服务按钮的样式 */
|
||||
font-size: 26rpx; /* 设置字体大小 */
|
||||
border-radius: 50rpx; /* 设置圆角 */
|
||||
padding: 10rpx 20rpx; /* 设置内边距 */
|
||||
border: 1px solid #e4e4e4; /* 设置边框 */
|
||||
margin-right: 20rpx; /* 设置右边距 */
|
||||
.apply-service {
|
||||
font-size: 26rpx;
|
||||
border-radius: 50rpx;
|
||||
padding: 10rpx 20rpx;
|
||||
border: 1px solid #e4e4e4;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 清除浮动的样式 */
|
||||
.clearfix {
|
||||
&:after { /* 使用伪元素清除浮动 */
|
||||
&:after {
|
||||
content: " ";
|
||||
display: table; /* 创建一个新的格式化上下文 */
|
||||
clear: both; /* 清除所有浮动 */
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
/* 订单状态的样式 */
|
||||
.order-state {
|
||||
height: 70rpx; /* 设置高度 */
|
||||
line-height: 70rpx; /* 设置行高 */
|
||||
text-align: right; /* 文本右对齐 */
|
||||
margin-right: 20rpx; /* 设置右边距 */
|
||||
|
||||
.order-sts { /* 订单状态文本的样式 */
|
||||
color: #eb2444; /* 设置字体颜色为红色 */
|
||||
font-size: 28rpx; /* 设置字体大小 */
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
text-align: right;
|
||||
margin-right: 20rpx;
|
||||
.order-sts {
|
||||
color: #eb2444;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.order-sts.gray { /* 灰色状态文本的样式 */
|
||||
color: #999; /* 设置字体颜色为浅灰色 */
|
||||
height: 32rpx; /* 设置高度 */
|
||||
line-height: 32rpx; /* 设置行高 */
|
||||
.order-sts.gray {
|
||||
color: #999;
|
||||
height: 32rpx;
|
||||
line-height: 32rpx;
|
||||
}
|
||||
|
||||
.order-sts.normal { /* 正常状态文本的样式 */
|
||||
color: #333; /* 设置字体颜色为深灰色 */
|
||||
.order-sts.normal {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue