提交代码

mobile/src/pages/xg/xsjcxx/xsqj/cancelLeaveEdit/index.vue

@@ -39,17 +39,16 @@
                 <view class="info-item">
                     <text class="info-label">请假地点：</text>
                     <view class="info-value location-value">
-                        <text>{{ '经纬度:' + leaveInfo.leaveLocation || '-' }}</text>
-                        <u-button
+                        <text class="location-coords-text">
+                            {{ '经纬度：' + leaveInfo.leaveLocation || '-' }}
+                        </text>
+                        <view
                             v-if="leaveInfo.leaveLocation"
-                            size="mini"
-                            type="primary"
-                            plain
-                            :custom-style="{ width: 'auto', height: 'auto' }"
+                            class="location-icon-btn"
                             @click="openLeaveLocationInMap"
                         >
-                            查看位置
-                        </u-button>
+                            <u-icon name="map-fill" size="28" color="#2979ff" />
+                        </view>
                     </view>
                 </view>
                 <view class="info-item">
@@ -203,13 +202,13 @@
                     <view v-if="cancelForm.cancelLocation" class="location-info">
                         <view class="location-coords-container">
                             <text class="location-coords">
-                                经纬度： {{ cancelForm.cancelLocation }}
+                                {{ cancelForm.cancelLocation }}
                             </text>
                         </view>
                         <view class="location-action-container">
-                            <u-button size="mini" type="primary" plain @click="openLocationInMap">
-                                <text>查看位置</text>
-                            </u-button>
+                            <view class="location-icon-btn" @click="openLocationInMap">
+                                <u-icon name="map-fill" size="28" color="#2979ff" />
+                            </view>
                         </view>
                     </view>
                 </u-form-item>
@@ -1729,15 +1728,17 @@ export default {
 }
 .info-label {
     color: #606266;
-    font-weight: 500;
+    font-weight: normal;
     margin-right: 8rpx;
     white-space: nowrap;
+    text-align: left;
 }
 .info-value {
     color: #303133;
     font-weight: 400;
     flex: 1;
     word-break: break-all;
+    text-align: right;
 }
 .location-value {
     display: flex;
@@ -1746,6 +1747,40 @@ export default {
     gap: 12rpx;
 }
 
+/* 经纬度文字样式 */
+.location-coords-text {
+    font-size: 30rpx;
+    color: #303133;
+    word-break: break-all;
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+/* 地图图标按钮 */
+.location-icon-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 48rpx;
+    height: 48rpx;
+    border-radius: 50%;
+    background: #f5faff;
+    border: 1px solid #e6f1ff;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.location-icon-btn:hover {
+    background: #e6f1ff;
+    border-color: #2979ff;
+}
+
+.location-icon-btn:active {
+    transform: scale(0.95);
+}
+
 .readonly-attachment {
     margin-top: 12rpx;
 }
@@ -1830,6 +1865,7 @@ export default {
 }
 .location-coords {
     color: #303133;
+    font-size: 30rpx;
 }
 .location-action-container {
     margin-left: 16rpx;