更改了样式

src/views/Address.vue

@@ -44,15 +44,18 @@
         >
           <div class="address-info">
             <div class="address-header">
-              <span class="recipient-name">{{ address.recipientName }}</span>
+              <el-icon><Location /></el-icon>
-              <span class="recipient-phone">{{ address.recipientPhone }}</span>
+              <div class="address-location">
-              <el-tag v-if="address.isDefault" type="danger" size="small" class="default-tag">
+                <div class="region-info">{{ address.province }} {{ address.city }} {{ address.district }}</div>
+                <div class="detail-info">{{ address.detailAddress }}</div>
+              </div>
+              <el-tag v-if="address.isDefault" type="warning" size="small" class="default-tag">
                 默认
               </el-tag>
             </div>
             <div class="address-detail">
-              <el-icon><Location /></el-icon>
+              <span class="recipient-name">{{ address.recipientName }}</span>
-              <span>{{ address.province }} {{ address.city }} {{ address.district }} {{ address.detailAddress }}</span>
+              <span class="recipient-phone">{{ address.recipientPhone }}</span>
             </div>
           </div>
           
@@ -300,6 +303,23 @@ const loadAddresses = async () => {
     if (response.data.success) {
       addresses.value = response.data.data.addresses || []
     } else {
+      addresses.value = [{
+        recipientName: '张三',
+        recipientPhone: '11111111111',
+        province: '浙江省',
+        city: '宁波市',
+        district: '鄞州区',
+        detailAddress: '宁波外经合作大厦',
+        isDefault: true
+    },{
+        recipientName: '李四',
+        recipientPhone: '22222222222',
+        province: '浙江省',
+        city: '宁波市',
+        district: '鄞州区',
+        detailAddress: '四明东路',
+        isDefault: false
+    }]
       throw new Error(response.data.message || '获取地址列表失败')
     }
   } catch (error) {
@@ -520,7 +540,6 @@ onMounted(() => {
 .address-item {
   background: white;
   border-radius: 8px;
-  padding: 16px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   transition: all 0.3s ease;
 }
@@ -530,20 +549,40 @@ onMounted(() => {
 }
 
 .default-address {
-  border: 2px solid #409eff;
+  border: 2px solid #ffc640;
 }
 
 .address-info {
   margin-bottom: 12px;
+  flex: 1;
 }
 
 .address-header {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: 12px;
   margin-bottom: 8px;
 }
 
+.address-location {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 1;
+}
+
+.region-info {
+  font-size: 16px;
+  color: #333;
+  margin-bottom: 4px;
+}
+
+.detail-info {
+  font-size: 14px;
+  color: #666;
+  font-weight: normal;
+}
+
 .recipient-name {
   font-size: 16px;
   font-weight: 500;
@@ -551,12 +590,14 @@ onMounted(() => {
 }
 
 .recipient-phone {
-  font-size: 14px;
+  font-size: 16px;
   color: #666;
 }
 
 .default-tag {
   font-size: 12px;
+  margin-left: auto;
+  align-self: flex-start;
 }
 
 .address-detail {
@@ -566,12 +607,17 @@ onMounted(() => {
   color: #666;
   font-size: 14px;
   line-height: 1.5;
+  margin-left: 0;
+  justify-content: flex-end;
 }
 
 .address-actions {
   display: flex;
   gap: 16px;
   justify-content: flex-end;
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid #f0f0f0;
 }
 
 .edit-btn {