修改：我的订单页面优化

components.d.ts

@@ -16,7 +16,6 @@ declare module '@vue/runtime-core' {
     ElAlert: typeof import('element-plus/es')['ElAlert']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElDialog: typeof import('element-plus/es')['ElDialog']
-    ElIcon: typeof import('element-plus/es')['ElIcon']
     ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
@@ -36,7 +35,6 @@ declare module '@vue/runtime-core' {
     VanIcon: typeof import('vant/es')['Icon']
     VanList: typeof import('vant/es')['List']
     VanLoading: typeof import('vant/es')['Loading']
-    VanOverlay: typeof import('vant/es')['Overlay']
     VanPullRefresh: typeof import('vant/es')['PullRefresh']
     VanStepper: typeof import('vant/es')['Stepper']
     VanUploader: typeof import('vant/es')['Uploader']

src/config/cartoon.ts

@@ -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,

src/views/cartoon/myOrder.vue

@@ -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"');
+  gap: 8px;
-  padding: v-bind('config.myOrder.styles.padding.vertical + "px"') v-bind('config.myOrder.styles.padding.horizontal + "px"');
+  padding: 24px 16px;
 }
 
 .order-item {
   position: relative;
-  width: v-bind('config.myOrder.styles.itemWidth');
+  width: calc(50vw - 4px);
-  height: v-bind('config.myOrder.styles.itemHeight');
+  height: calc(50vw - 4px);
-  box-shadow: v-bind('config.myOrder.styles.shadow');
+  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"');
+  bottom: 5px;
-  right: v-bind('config.myOrder.styles.status.right + "px"');
+  right: 5px;
-  padding: v-bind('config.myOrder.styles.status.padding.vertical + "px"') v-bind('config.myOrder.styles.status.padding.horizontal + "px"');
+  padding: 2px 12px;
-  border-radius: v-bind('config.myOrder.styles.status.borderRadius + "px"');
+  border-radius: 12px;
-  font-size: v-bind('config.myOrder.styles.status.fontSize + "px"');
+  font-size: 12px;
-  color: v-bind('config.myOrder.statusStyles.default.color');
+  color: #fff;
-  background: v-bind('config.myOrder.statusStyles.default.background');
+  background: #bdbdbd;
-  opacity: v-bind('config.myOrder.statusStyles.default.opacity');
+  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 {