Fix：2963 【商城小程序】城市切换提示--提示框效果优化

pages/cloud/haveFun.vue

@@ -8,6 +8,7 @@
             <image :src="webUrl+'/orderIcon/map.png'" mode="scaleToFill"></image>
           </view>
         </view>
+        
         <view class="search-box v12-primary-border flex jc-between ai-center">
           <input
             v-model="name"
@@ -26,6 +27,19 @@
           </view>
         </view>
       </view>
+      <view class="v12-pa-2" style="position: relative">
+        <view class="v12-radius-20 v12-px-2 v12-py-1 tip-wrap v12-align-center v12-justify-between">
+          <view class="v12-align-center">
+            <image
+              class="map-icon"
+              mode="scaleToFill"
+              :src="webUrl + '/orderIcon/map_white.png'"
+            ></image>
+            <text style="width: 85%" class="v12-font-24 v12-white-text">定位显示你在  {{ cityName }}  点击可切换其他城市</text>
+          </view>
+          <view  @click="goCity('cloud')" class="qh-btn v12-white v12-radius-10 v12-font-24 v12-font-bold v12-dark-text v12-px-2">点击切换</view>
+        </view>
+      </view>
       <view>
         
         <scroll-view class="type-box flex" scroll-x enable-flex>
@@ -341,6 +355,32 @@ export default {
 }
 </script>
 <style scoped lang="less">
+.map-icon{
+  width: 30rpx;
+  height: 30rpx;
+  margin-right: 5rpx;
+}
+.qh-btn{
+  padding-top: 4rpx;
+  padding-bottom: 4rpx;
+  // border: thin dashed #999;
+  white-space: nowrap;
+}
+.tip-wrap{
+  background: #AAAEB3;
+  position: relative;
+  align-items: self-start !important;
+  &::before{
+    position: absolute;
+    content: '';
+    border-left: 15rpx solid transparent;
+    border-right: 15rpx solid transparent;
+    border-top: 20rpx solid transparent;
+    border-bottom: 20rpx solid #AAAEB3;
+    top: -30rpx;
+    left: 10%;
+  }
+}
 .icon-box{
   border: 1rpx solid #fff;
   border-radius: 100%;
@@ -450,7 +490,7 @@ export default {
       height: 200rpx;
       box-sizing: border-box;
       white-space: nowrap;
-      padding: 20rpx 20rpx 0 20rpx;
+      padding: 0rpx 20rpx 0 20rpx;
 
       .item {
         width: 154rpx;
@@ -482,7 +522,7 @@ export default {
   }
 
   .body {
-    padding: 20rpx 20rpx;
+    padding: 0 20rpx 20rpx;
     background: #f5f5f5;
   }