diff --git a/components/LocationCard/images/loc_bg_img.png b/components/LocationCard/images/loc_bg_img.png new file mode 100644 index 0000000..bd99052 Binary files /dev/null and b/components/LocationCard/images/loc_bg_img.png differ diff --git a/components/LocationCard/images/loc_icon_img.png b/components/LocationCard/images/loc_icon_img.png new file mode 100644 index 0000000..32900b7 Binary files /dev/null and b/components/LocationCard/images/loc_icon_img.png differ diff --git a/components/LocationCard/index.vue b/components/LocationCard/index.vue index 2e13cf6..5d1fd51 100644 --- a/components/LocationCard/index.vue +++ b/components/LocationCard/index.vue @@ -1,7 +1,16 @@ diff --git a/components/LocationCard/styles/index.scss b/components/LocationCard/styles/index.scss index d007b0b..087ee9b 100644 --- a/components/LocationCard/styles/index.scss +++ b/components/LocationCard/styles/index.scss @@ -1,13 +1,13 @@ .store-address { display: flex; - align-items: start; - flex-direction: column; + align-items: center; padding: 16px 12px; - background-color: #f0f0f0; - background-image: url(""); // 预留背景图片位置,用户手动导入 + background-color: #f8f9fa; + background-image: url("./images/loc_bg_img.png"); // 预留背景图片位置,用户手动导入 background-size: cover; background-position: center; border-radius: 12px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); font-size: 14px; color: #333; position: relative; @@ -25,9 +25,19 @@ z-index: 1; } + // 左侧文本容器 + .text-container { + display: flex; + flex-direction: column; + flex: 1; + position: relative; + z-index: 2; + } + // 确保内容在遮罩层之上 .location-label, - .address-text { + .address-text, + .loc-icon { position: relative; z-index: 2; } @@ -35,15 +45,20 @@ .location-label { color: #333; font-size: 14px; - margin-right: 4px; font-weight: 500; } .address-text { margin-top: 4px; - flex: 1; color: #666; font-size: 12px; font-weight: 400; } + + // 右侧图标样式 + .loc-icon { + width: 24px; + height: 24px; + margin-left: 12px; + } }