forked from natuka/web.puabadge.com
修改:我的订单页面优化
This commit is contained in:
1 parent
7427056dfd
commit
018a3db13d
3 files changed
+19
-20
No files matched your search
@@ -345,7 +345,7 @@ export const cartoonConfig = {
|
||||
styles: {
|
||||
gap: 8, // 间距
|
||||
itemWidth: 'calc(50% - 4px)', // 订单项宽度
|
||||
itemHeight: '43vw', // 订单项高度
|
||||
itemHeight: 'calc(50vw - 4px)', // 订单项高度
|
||||
borderRadius: 12, // 圆角
|
||||
padding: {
|
||||
horizontal: 16,
|
||||
|
||||
@@ -78,7 +78,7 @@ function getStatus(status: number) {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style scoped lang="scss">
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -98,47 +98,48 @@ function getStatus(status: number) {
|
||||
.order-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: v-bind('config.myOrder.styles.gap + "px"');
|
||||
padding: v-bind('config.myOrder.styles.padding.vertical + "px"') v-bind('config.myOrder.styles.padding.horizontal + "px"');
|
||||
gap: 8px;
|
||||
padding: 24px 16px;
|
||||
}
|
||||
|
||||
.order-item {
|
||||
position: relative;
|
||||
width: v-bind('config.myOrder.styles.itemWidth');
|
||||
height: v-bind('config.myOrder.styles.itemHeight');
|
||||
box-shadow: v-bind('config.myOrder.styles.shadow');
|
||||
width: calc(50vw - 4px);
|
||||
height: calc(50vw - 4px);
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.order-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: v-bind('config.myOrder.styles.borderRadius + "px"');
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.order-status {
|
||||
position: absolute;
|
||||
bottom: v-bind('config.myOrder.styles.status.bottom + "px"');
|
||||
right: v-bind('config.myOrder.styles.status.right + "px"');
|
||||
padding: v-bind('config.myOrder.styles.status.padding.vertical + "px"') v-bind('config.myOrder.styles.status.padding.horizontal + "px"');
|
||||
border-radius: v-bind('config.myOrder.styles.status.borderRadius + "px"');
|
||||
font-size: v-bind('config.myOrder.styles.status.fontSize + "px"');
|
||||
color: v-bind('config.myOrder.statusStyles.default.color');
|
||||
background: v-bind('config.myOrder.statusStyles.default.background');
|
||||
opacity: v-bind('config.myOrder.statusStyles.default.opacity');
|
||||
bottom: 5px;
|
||||
right: 5px;
|
||||
padding: 2px 12px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
background: #bdbdbd;
|
||||
opacity: 0.9;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.status-processing {
|
||||
background: v-bind('config.myOrder.statusStyles.processing.background');
|
||||
background: #bdbdbd;
|
||||
}
|
||||
|
||||
.status-finished {
|
||||
background: v-bind('config.myOrder.statusStyles.finished.background');
|
||||
background: #8bc34a;
|
||||
}
|
||||
|
||||
.record-image-item-null {
|
||||
|
||||
Reference in new issue
Block a user