修改

src/assets/styles/common.scss

@@ -1,278 +0,0 @@
-.d-block {
-    display: block;
-}
-.navbar-logo {
-    width: 50rpx;
-    height: 50rpx;
-}
-
-.small-icon {
-    width: 38rpx;
-    height: 38rpx;
-}
-.base-icon {
-    width: 48rpx;
-    height: 48rpx;
-}
-.icon-36 {
-    width: 36rpx;
-    height: 36rpx;
-}
-.minn-icon {
-    width: 34rpx;
-    height: 34rpx;
-}
-.min-icon {
-    width: 30rpx;
-    height: 30rpx;
-}
-.small-icon-40 {
-    width: 40rpx;
-    height: 40rpx;
-}
-.active-hover {
-    opacity: 0.8;
-    cursor: pointer;
-}
-.base-page-banner {
-    position: absolute;
-    left: 0;
-    top: 0;
-    r: 0;
-    width: 100%;
-    z-index: -1;
-}
-.no-data-img {
-    width: 300rpx;
-    height: 300rpx;
-}
-.base-content {
-    padding: 24rpx;
-}
-.row-desc {
-    padding: 10rpx;
-    .row-lebal {
-        font-size: 30rpx;
-        color: #333;
-    }
-    .row-value {
-        padding: 30rpx 10rpx;
-        font-size: 30rpx;
-        color: #999;
-    }
-}
-
-.base-block {
-    border-radius: 10rpx;
-    background-color: #fff;
-}
-
-.b-r-c {
-    border-radius: 50%;
-}
-.b-radius {
-    border-radius: 16rpx;
-}
-.wl_bg {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    width: 43rpx;
-    height: 87rpx;
-    margin: auto;
-    z-index: 2;
-}
-.radius-10 {
-    border-radius: 10rpx;
-}
-
-// 移动端底部安全区域
-.safe-area {
-    padding-bottom: constant(safe-area-inset-bottom);
-    padding-bottom: env(safe-area-inset-bottom);
-}
-
-.base-lh {
-    line-height: 1.6;
-}
-
-.u-primary-border {
-    border: 1rpx solid rgba($u-primary, 0.1);
-}
-// 数字字母从中间换行
-.break-word {
-    word-break: break-all;
-}
-
-.base-btm-wrap {
-    position: relative;
-    box-shadow: 6rpx 0px 27rpx 0px rgba($u-primary, 0.3);
-}
-
-.vip-content {
-    min-height: 100rpx;
-    // opacity: .1;
-}
-// 首行缩进
-.base-lh {
-    text-indent: 2em;
-}
-.home_icon {
-    width: 46rpx;
-    height: 46rpx;
-}
-// 超链接
-.base-underline {
-    text-decoration: underline;
-}
-// 底部样式
-.base-bottom-wrap {
-    position: relative;
-    box-shadow: 6rpx 0px 27rpx 0px rgba(#37A954, 0.3);
-    background-color: #fff;
-}
-
-.scroll-x-info {
-    white-space: nowrap;
-}
-.base-tag {
-    padding: 5rpx 12rpx;
-    border-radius: 6rpx;
-}
-.border-bottom-f5 {
-    border-bottom: 1px solid #f5f5f5;
-}
-.border-bottom-f2 {
-    border-bottom: 1px solid #f2f2f2;
-}
-.btm-shadow {
-    box-shadow: 5rpx 0px 13rpx 0px #adadad;
-}
-.pop-msg-box {
-    color: #ff6a07;
-    background-color: #fdf8e2;
-    border-radius: 8rpx;
-}
-.up-border {
-    transform: rotate(360deg);
-}
-
-.badge-num_base {
-    position: absolute;
-    left: 50%;
-    top: 6rpx;
-    transform: translateX(2rpx);
-}
-.fab-drop-shadow {
-    width: 132rpx;
-    height: 132rpx;
-}
-.flex-nowrap {
-    flex-wrap: nowrap;
-}
-.flex-shrink-0 {
-    flex-shrink: 0;
-}
-.left-icon-bg {
-    background-color: rgba(0, 0, 0, 0.3);
-    padding: 10rpx;
-    border-radius: 4rpx;
-}
-.dot-wrap2 {
-  position: absolute;
-  right: 10rpx;
-  bottom: 10rpx;
-  padding: 6rpx 10rpx;
-  background-color: rgba(0, 0, 0, 0.3);
-  border-radius: 4rpx;
-  color: #fff;
-  font-size: 26rpx;
-}
-.money-tag {
-  padding: 10rpx 20rpx;
-  font-size: 30rpx;
-  color: #fff;
-  line-height: 1;
-  background-color:#F4403B;
-  border-radius: 40rpx;
-}
-.ut-tag-primary {
-  padding: 2rpx 10rpx;
-  border-radius: 8rpx;
-  color: #fff;
-  font-size: 26rpx;
-  background-color: $u-primary;
-}
-.ut-tag-danger-plain {
-  padding: 2rpx 10rpx;
-  border-radius: 8rpx;
-  color: #F4403B;
-  font-size: 26rpx;
-  border: 1rpx solid #F4C6C4;
-}
-.ut-tag-info {
-  padding: 2rpx 10rpx;
-  border-radius: 8rpx;
-  color: #333;
-  font-size: 26rpx;
-  background-color: #F2F2F2;
-}
-.ut-tag-danger-plain-min {
-  padding: 2rpx 10rpx;
-  border-radius: 4rpx;
-  color: #F4403B;
-  font-size: 22rpx;
-  border: 1rpx solid #F4C6C4;
-  transform: rotate(360deg);
-}
-
-.btn-two-primary {
-    width: 500rpx;
-    height: 90rpx;
-    border-radius: 10rpx;
-    overflow: hidden;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 36rpx;
-
-    .btn1 {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex: 1;
-        height: 100%;
-        color: #37A954;
-        background-color: #D4E2DC;
-    }
-    .btn2 {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex: 1;
-        height: 100%;
-        color: #FBE6A9;
-        background-color: #37A954;
-    }
-}
-.w-s-no{
-    white-space: nowrap;
-}
-// 超出两行省略
-.text-ellipsis-2 {
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-    overflow: hidden;
-}
-
-.btm-wrap-shadow {
-    position: relative;
-    box-shadow: 6rpx 0px 27rpx 0px rgba(#37A954, 0.3);
-}
-.outview {
-    width: 100%;
-    max-width: 1000rpx;
-    height: 100vh;
-}

src/plant/base/base-edit/models/base-info/base-info.vue

@@ -67,12 +67,17 @@
                         <up-input v-model="form.address" placeholder="请填写村级以下的具体地址信息" border="none" clearable></up-input>
                     </up-form-item>
                     <up-form-item borderBottom>
-                        <view class="flex1">
+                        <view class="flex1 ov-hd">
                             <view class="mb-10">
                                 <span>基地范围</span>
                             </view>
-                            <view class="h-400 bg-#ccc" @click="mapDrawArea">
-                                <image class="w-full h-full" v-if="form.mapArea?.mapImageUrl" :src="form.mapArea.mapImageUrl" mode="aspectFill" />
+                            <view class="bg-#ccc d-flex ov-hd p-rtv" @click="mapDrawArea">
+                                <image class="w-full h-380" v-if="form.mapArea?.mapImageUrl" :src="form.mapArea.mapImageUrl" mode="widthFix" />
+                                <image class="w-full h-380" v-else src="@/static/images/plant/base/select_base_gap.png" mode="widthFix" />
+                                <view class="btn-aree-center d-flex flex-cln a-c j-c">
+                                    <image class="w-52 h-52 mb-10" src="@/static/images/plant/base/draw_area_icon.png" mode="widthFix" />
+                                    <view class="c-primary f-s-28 f-w-400">点击绘制基地范围</view>
+                                </view>
                             </view>
                         </view>
                     </up-form-item>
@@ -136,4 +141,11 @@ const mapDrawArea = () => {
     bottom: 0;
     left: 0;
 }
+.btn-aree-center {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+}
 </style>