diff --git a/modules/mogo-module-v2x/src/main/java/com/mogo/module/v2x/adapter/V2XSurroundingAdapter.java b/modules/mogo-module-v2x/src/main/java/com/mogo/module/v2x/adapter/V2XSurroundingAdapter.java
index 2fefe935c1..fa111adadc 100644
--- a/modules/mogo-module-v2x/src/main/java/com/mogo/module/v2x/adapter/V2XSurroundingAdapter.java
+++ b/modules/mogo-module-v2x/src/main/java/com/mogo/module/v2x/adapter/V2XSurroundingAdapter.java
@@ -74,16 +74,11 @@ public class V2XSurroundingAdapter extends RecyclerView.Adapter<V2XSurroundingVi
             @Override
             public void onClick(View v) {
                 if (mClickListener != null) {
-                    mClickListener.onItemClickListener(v, position, surroundingConstruction, getTypeName(surroundingConstruction.getPoiType()));
+                    mClickListener.onItemClickListener(v, position, surroundingConstruction);
                 }
             }
         });
 
-        //数据绑定
-//        Glide.with(mContext)
-//                .load(getTypeRes(surroundingConstruction.getPoiType()))
-//                .into(mBgImageView);
-
         mBgImageView.setBackgroundResource(getTypeRes(surroundingConstruction.getPoiType()));
         mTypeImageView.setBackgroundResource(getTypeSmallRes(surroundingConstruction.getPoiType()));
 //        RequestOptions requestOptions = new RequestOptions()
diff --git a/modules/mogo-module-v2x/src/main/java/com/mogo/module/v2x/fragment/V2XEventPanelFragment.kt b/modules/mogo-module-v2x/src/main/java/com/mogo/module/v2x/fragment/V2XEventPanelFragment.kt
index 2d06d27c82..d7b1318b1a 100644
--- a/modules/mogo-module-v2x/src/main/java/com/mogo/module/v2x/fragment/V2XEventPanelFragment.kt
+++ b/modules/mogo-module-v2x/src/main/java/com/mogo/module/v2x/fragment/V2XEventPanelFragment.kt
@@ -1,21 +1,36 @@
 package com.mogo.module.v2x.fragment
 
 import android.content.Intent
+import android.graphics.Color
 import android.graphics.Typeface
+import android.os.Bundle
+import android.text.SpannableString
+import android.text.Spanned
+import android.text.style.AbsoluteSizeSpan
+import android.text.style.ForegroundColorSpan
+import android.text.style.StyleSpan
 import android.view.View
 import android.widget.ImageView
 import android.widget.RadioButton
 import android.widget.RadioGroup
+import android.widget.TextView
 import androidx.constraintlayout.widget.ConstraintLayout
 import androidx.fragment.app.Fragment
+import androidx.recyclerview.widget.LinearLayoutManager
+import androidx.recyclerview.widget.RecyclerView
 import androidx.viewpager2.widget.ViewPager2
 import com.google.android.material.tabs.TabLayoutMediator
 import com.mogo.commons.debug.DebugConfig
 import com.mogo.commons.mvp.MvpFragment
+import com.mogo.module.common.entity.MarkerExploreWay
+import com.mogo.module.common.entity.MarkerPoiTypeEnum
 import com.mogo.module.v2x.R
+import com.mogo.module.v2x.SpacesItemDecoration
 import com.mogo.module.v2x.V2XConst.MODULE_NAME
 import com.mogo.module.v2x.V2XServiceManager
 import com.mogo.module.v2x.adapter.V2XEventPagerAdapter
+import com.mogo.module.v2x.adapter.V2XSurroundingDetailAdapter
+import com.mogo.module.v2x.entity.panel.SurroundingConstruction
 import com.mogo.module.v2x.presenter.EventPanelPresenter
 import com.mogo.module.v2x.utils.TrackUtils
 import com.mogo.module.v2x.view.V2XEventPanelHistoryCountView
@@ -23,6 +38,9 @@ import com.mogo.module.v2x.voice.V2XVoiceCallbackListener
 import com.mogo.module.v2x.voice.V2XVoiceConstants
 import com.mogo.module.v2x.voice.V2XVoiceManager
 import com.mogo.utils.logger.Logger
+import org.greenrobot.eventbus.EventBus
+import org.greenrobot.eventbus.Subscribe
+import org.greenrobot.eventbus.ThreadMode
 
 
 /**
@@ -50,6 +68,12 @@ class V2XEventPanelFragment : MvpFragment<V2XEventPanelFragment, EventPanelPrese
     private var mRbSurroundingEvent: RadioButton? = null
     private var mRbShareEvents: RadioButton? = null
 
+    private var mBackImage: ImageView? = null
+    private var mTopBriefTv: TextView? = null
+    private var mDetailRecyclerView: RecyclerView? = null
+    private lateinit var mSurroundingDetailAdapter: V2XSurroundingDetailAdapter
+    var markerExploreWays = mutableListOf<MarkerExploreWay>()
+
     private val mV2XScenarioHistoryFragment = V2XScenarioHistoryFragment()
     private val mV2XShareEventsFragment = V2XShareEventsFragment()
     private val mV2XSurroundingFragment = V2XSurroundingFragment()
@@ -77,6 +101,11 @@ class V2XEventPanelFragment : MvpFragment<V2XEventPanelFragment, EventPanelPrese
         }
     }
 
+    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
+        super.onViewCreated(view, savedInstanceState)
+        EventBus.getDefault().register(this)
+    }
+
     // 打开周边事件TAB
     private val mCheckSurroundingCb = V2XVoiceCallbackListener { _: String?, _: Intent? ->
         try {
@@ -120,6 +149,12 @@ class V2XEventPanelFragment : MvpFragment<V2XEventPanelFragment, EventPanelPrese
             mRbSurroundingEvent = mRootView.findViewById(R.id.rbSurroundingEvent)
             mRbShareEvents = mRootView.findViewById(R.id.rbShareEvents)
 
+            mBackImage = mRootView.findViewById(R.id.back_image)
+            mTopBriefTv = mRootView.findViewById(R.id.tv_brief_detail)
+            mDetailRecyclerView = mRootView.findViewById(R.id.surrounding_detail_recycleview)
+
+            initDetail()
+
             // M1 不基于地图的版本直接展示事件面板，且不可关闭
             if (!DebugConfig.isMapBased()) {
                 mClPanelContainer?.visibility = View.VISIBLE
@@ -174,6 +209,10 @@ class V2XEventPanelFragment : MvpFragment<V2XEventPanelFragment, EventPanelPrese
                 hidePanel()
             }
 
+            mBackImage?.setOnClickListener {
+                showBaseUi(true)
+            }
+
             mV2XEventPanelHistoryCountView = V2XEventPanelHistoryCountView(context)
             mV2XEventPanelHistoryCountView!!.setOnClickListener {
                 if (mClPanelContainer == null) {
@@ -201,6 +240,7 @@ class V2XEventPanelFragment : MvpFragment<V2XEventPanelFragment, EventPanelPrese
     }
 
     override fun onDestroyView() {
+        EventBus.getDefault().unregister(this)
         mediator?.detach()
         // 避免内存泄漏
         fragment = null
@@ -215,7 +255,7 @@ class V2XEventPanelFragment : MvpFragment<V2XEventPanelFragment, EventPanelPrese
     /*
     * 语音查询热心指数需求
     * */
-    public fun showPanelWithSelectedItem(item: Int) {
+    fun showPanelWithSelectedItem(item: Int) {
         mV2XShareEventsFragment.fromVoice = true
         if (isPanelShow()) {
             if (mRbScenarioHistory?.isChecked == true) {
@@ -234,6 +274,79 @@ class V2XEventPanelFragment : MvpFragment<V2XEventPanelFragment, EventPanelPrese
     }
 
 
+    private fun initDetail() {
+        mDetailRecyclerView!!.addItemDecoration(SpacesItemDecoration(resources.getDimension(R.dimen.share_item_padding).toInt()))
+        mSurroundingDetailAdapter = V2XSurroundingDetailAdapter(activity, markerExploreWays)
+        mDetailRecyclerView!!.adapter = mSurroundingDetailAdapter
+        val linearLayoutManager = LinearLayoutManager(activity, LinearLayoutManager.VERTICAL, false)
+        mDetailRecyclerView!!.layoutManager = linearLayoutManager
+    }
+
+    @Subscribe(threadMode = ThreadMode.MAIN)
+    fun updateSurroundingDetail(data: SurroundingConstruction) {
+        loadSurroundingDetail(data)
+    }
+
+    private fun loadSurroundingDetail(detailData: SurroundingConstruction) {
+        showBaseUi(false)
+        if (detailData != null) {
+            markerExploreWays.clear()
+            markerExploreWays.addAll(detailData.getConstrutList().toMutableList())
+            mSurroundingDetailAdapter.notifyDataSetChanged()
+
+            val originStr = String.format(context!!.resources.getString(R.string.v2x_surrounding_detail_top_brief), markerExploreWays.size)
+            val spannableString = SpannableString(originStr + getTypeName(detailData.poiType))
+            spannableString.setSpan(ForegroundColorSpan(Color.parseColor("#459DFF")),
+                    7, originStr.length - getTypeName(detailData.poiType)?.length!!, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
+            //设置字体大小，true表示前面的字体大小 dip
+            spannableString.setSpan(AbsoluteSizeSpan(context!!.resources.getDimension(R.dimen.module_v2x_surrounding_top_textsize).toInt(), true),
+                    7, originStr.length - getTypeName(detailData.poiType)?.length!!, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
+            spannableString.setSpan(StyleSpan(Typeface.BOLD), 7,
+                    originStr.length - getTypeName(detailData.poiType)?.length!!, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
+            mTopBriefTv?.text = (spannableString)
+        }
+    }
+
+    /**
+     * 是否显示基础页面
+     */
+    private fun showBaseUi(isShow: Boolean) {
+        if (isShow) {
+            mBackImage?.visibility = View.GONE
+            mTopBriefTv?.visibility = View.GONE
+            mDetailRecyclerView?.visibility = View.GONE
+
+            mRgTabSelect?.visibility = View.VISIBLE
+            mVpEventPanel?.visibility = View.VISIBLE
+            mBtnHidePanels?.visibility = View.VISIBLE
+        } else {
+            mBackImage?.visibility = View.VISIBLE
+            mTopBriefTv?.visibility = View.VISIBLE
+            mDetailRecyclerView?.visibility = View.VISIBLE
+
+            mRgTabSelect?.visibility = View.GONE
+            mVpEventPanel?.visibility = View.GONE
+            mBtnHidePanels?.visibility = View.GONE
+        }
+    }
+
+    private fun getTypeName(type: String): String? {
+        var typeName = ""
+        typeName = when (type) {
+            MarkerPoiTypeEnum.ROAD_CLOSED -> "封路"
+            MarkerPoiTypeEnum.FOURS_ICE -> "道路结冰"
+            MarkerPoiTypeEnum.FOURS_FOG -> "浓雾"
+            MarkerPoiTypeEnum.TRAFFIC_CHECK -> "交通检查"
+            MarkerPoiTypeEnum.FOURS_ACCIDENT -> "交通事故"
+            MarkerPoiTypeEnum.FOURS_BLOCK_UP -> "拥堵"
+            MarkerPoiTypeEnum.FOURS_ROAD_WORK -> "施工"
+            MarkerPoiTypeEnum.FOURS_PONDING -> "道路积水"
+            MarkerPoiTypeEnum.FOURS_LIVING -> "实时路况"
+            else -> "实时路况"
+        }
+        return typeName
+    }
+
     private fun selectWithItem(item: Int) {
         when (item) {
             0 -> {
diff --git a/modules/mogo-module-v2x/src/main/java/com/mogo/module/v2x/fragment/V2XSurroundingFragment.java b/modules/mogo-module-v2x/src/main/java/com/mogo/module/v2x/fragment/V2XSurroundingFragment.java
index a9d2cfd849..92ebcde361 100644
--- a/modules/mogo-module-v2x/src/main/java/com/mogo/module/v2x/fragment/V2XSurroundingFragment.java
+++ b/modules/mogo-module-v2x/src/main/java/com/mogo/module/v2x/fragment/V2XSurroundingFragment.java
@@ -26,6 +26,7 @@ import androidx.recyclerview.widget.LinearLayoutManager;
 import androidx.recyclerview.widget.RecyclerView;
 
 import com.alibaba.android.arouter.launcher.ARouter;
+import com.mogo.commons.debug.DebugConfig;
 import com.mogo.commons.mvp.MvpFragment;
 import com.mogo.commons.voice.AIAssist;
 import com.mogo.map.MogoLatLng;
@@ -53,6 +54,8 @@ import com.mogo.service.MogoServicePaths;
 import com.mogo.utils.WorkThreadHandler;
 import com.mogo.utils.logger.Logger;
 
+import org.greenrobot.eventbus.EventBus;
+
 import java.util.ArrayList;
 import java.util.Collection;
 import java.util.HashMap;
@@ -82,14 +85,6 @@ public class V2XSurroundingFragment extends MvpFragment<SurroundingEventView, Su
     private IMogoServiceApis mApis;
     private NetworkLoadingView mloadingImage;
 
-    private RelativeLayout mSurroundingDetailLayout;
-    private RecyclerView mDetailRecyclerView;
-    private ImageView mBackImage;
-    private TextView mBriefTv;
-    private V2XSurroundingDetailAdapter mDetailAdapter;
-    private List<MarkerExploreWay> markerExploreWays = new ArrayList<>();
-
-
 
     @Override
     protected int getLayoutId() {
@@ -118,13 +113,6 @@ public class V2XSurroundingFragment extends MvpFragment<SurroundingEventView, Su
         mShareTv.setOnClickListener(this);
         mFreshTv.setOnClickListener(this);
 
-        mSurroundingDetailLayout = findViewById(R.id.layout_surrounding_event_detail);
-        mDetailRecyclerView = findViewById(R.id.surrounding_detail_recycleview);
-        mSurroundingDetailLayout.setVisibility(View.GONE);
-        mBackImage = findViewById(R.id.back_image);
-        mBriefTv = findViewById(R.id.tv_brief_detail);
-        mBackImage.setOnClickListener(this);
-
 //        mRecyclerView.setHasFixedSize(true);
         mRecyclerView.setOverScrollMode(OVER_SCROLL_NEVER);
         GridLayoutManager layoutManage = new GridLayoutManager(getContext(), 2);
@@ -140,15 +128,6 @@ public class V2XSurroundingFragment extends MvpFragment<SurroundingEventView, Su
 
     }
 
-    private void initDetail() {
-        mDetailRecyclerView.addItemDecoration(new SpacesItemDecoration((int) getResources().getDimension(R.dimen.share_item_padding)));
-        mDetailAdapter = new V2XSurroundingDetailAdapter(getActivity(), markerExploreWays);
-        mDetailRecyclerView.setAdapter(mDetailAdapter);
-        LinearLayoutManager linearLayoutManager =
-                new LinearLayoutManager(getActivity(), LinearLayoutManager.VERTICAL, false);
-        mDetailRecyclerView.setLayoutManager(linearLayoutManager);
-    }
-
     @NonNull
     @Override
     protected SurroundingEventPresenter createPresenter() {
@@ -174,8 +153,6 @@ public class V2XSurroundingFragment extends MvpFragment<SurroundingEventView, Su
             }
         } else if (id == R.id.tv_main_refresh || id == R.id.tv_top_refresh) { //刷新
             initData();
-        } else if (id == R.id.back_image) {
-            showDetail(false);
         }
     }
 
@@ -242,7 +219,7 @@ public class V2XSurroundingFragment extends MvpFragment<SurroundingEventView, Su
     /*
      * 语音查询周边事件 TTS播报
      * */
-    public void ttsForVoiceCheckout(){
+    public void ttsForVoiceCheckout() {
         if (poiInfosList.size() > 0) {
             AIAssist.getInstance(V2XUtils.getApp()).
                     speakTTSVoice("为您找到周边以下事件请查看", null);
@@ -323,99 +300,76 @@ public class V2XSurroundingFragment extends MvpFragment<SurroundingEventView, Su
         return poiTypes;
     }
 
-    private void showDetail(boolean isShow) {
-        if (isShow) {
-            mSurroundingLayout.setVisibility(View.GONE);
-            mSurroundingDetailLayout.setVisibility(View.VISIBLE);
-        } else {
-            mSurroundingDetailLayout.setVisibility(View.GONE);
-            mSurroundingLayout.setVisibility(View.VISIBLE);
-        }
-    }
-
     /**
-     * 处理marker的显示 TODO
+     * 处理marker的显示
      *
      * @param v
      * @param position
      * @param construction
      */
     @Override
-    public void onItemClickListener(View v, int position, SurroundingConstruction construction, String poiType) {
-        showDetail(true);
-        initDetail();
+    public void onItemClickListener(View v, int position, SurroundingConstruction construction) {
         if (construction != null) {
-            //处理 marker的显示
-            markerExploreWays.clear();
-            markerExploreWays.addAll(construction.getConstrutList());
-            mDetailAdapter.notifyDataSetChanged();
+            if (!DebugConfig.isMapBased()) {
+                EventBus.getDefault().post(construction);
+            } else {
+                //卡片消失
+                V2XEventPanelFragment.Companion.getInstance().hidePanel();
+                //清除道路事件
+                V2XServiceManager.getMarkerManager().removeMarkers(ServiceConst.CARD_TYPE_ROAD_CONDITION);
 
-            String brief = String.format(getContext().getResources().getString(R.string.v2x_surrounding_detail_top_brief), markerExploreWays.size());
-            mBriefTv.setText(brief + poiType);
-            Logger.d(TAG, "onItemClickListener markerExploreWays.size() = " + markerExploreWays.size());
+                try {
+                    //处理 marker的显示
+                    List<MarkerExploreWay> exploreWayList = construction.getConstrutList();
+                    Logger.d(TAG, "onItemClickListener exploreWayList.size() = " + exploreWayList.size());
+                    if (exploreWayList != null && exploreWayList.size() > 0) {
+                        for (int i = 0; i < exploreWayList.size(); i++) {
+                            MarkerExploreWay exploreWay = exploreWayList.get(i);
+                            MarkerShowEntity markerShowEntity = new MarkerShowEntity();
+                            markerShowEntity.setBindObj(exploreWay);
+                            markerShowEntity.setChecked(false);
+                            markerShowEntity.setTextContent(exploreWay.getAddr());
+                            markerShowEntity.setMarkerLocation(exploreWay.getLocation());
+                            markerShowEntity.setMarkerType(ServiceConst.CARD_TYPE_ROAD_CONDITION);
+
+                            WorkThreadHandler.getInstance().postDelayed(() -> {
+                                IMogoMarker mogoMarker = V2XServiceManager.getIMogoMarkerService().drawMarker(markerShowEntity);
+                                // 点击监听，天际弹窗展示详情
+                                if (mogoMarker != null) {
+                                    mogoMarker.startScaleAnimation(0, 1.2f, 0, 1.2f, 300, new AccelerateInterpolator(), new OnMarkerAnimationListener() {
+                                        @Override
+                                        public void onAnimStart() {
+                                            Logger.d(TAG, " onItemClickListener onAnimStart -----> ");
+                                        }
+
+                                        @Override
+                                        public void onAnimEnd() {
+                                            if (mogoMarker.isDestroyed()) {
+                                                return;
+                                            }
+                                            Logger.d(TAG, " onItemClickListener onAnimEnd ------> ");
+                                            mogoMarker.startScaleAnimation(1.2f, 1, 1.2f, 1, 100, new LinearInterpolator(), null);
+                                        }
+                                    });
+                                    mogoMarker.setOwner(markerShowEntity.getMarkerType());
+                                    mogoMarker.setObject(markerShowEntity);
+                                }
+                            }, i * 100L);
+                        }
+
+                        //自适应显示
+                        showBonndsRoadtion(exploreWayList);
+                    } else {
+                        Logger.e(TAG, "onItemClickListener  exploreWayList == null");
+                    }
+                } catch (Exception e) {
+                    e.printStackTrace();
+                }
+            }
         }
     }
 
 
-//    @Override
-//    public void onItemClickListener(View v, int position, SurroundingConstruction construction) {
-//        if (construction != null) {
-//            //卡片消失
-//            V2XEventPanelFragment.Companion.getInstance().hidePanel();
-//            //清除道路事件
-//            V2XServiceManager.getMarkerManager().removeMarkers(ServiceConst.CARD_TYPE_ROAD_CONDITION);
-//
-//            try {
-//                //处理 marker的显示
-//                List<MarkerExploreWay> exploreWayList = construction.getConstrutList();
-//                Logger.d(TAG, "onItemClickListener exploreWayList.size() = " + exploreWayList.size());
-//                if (exploreWayList != null && exploreWayList.size() > 0) {
-//                    for (int i = 0; i < exploreWayList.size(); i++) {
-//                        MarkerExploreWay exploreWay = exploreWayList.get(i);
-//                        MarkerShowEntity markerShowEntity = new MarkerShowEntity();
-//                        markerShowEntity.setBindObj(exploreWay);
-//                        markerShowEntity.setChecked(false);
-//                        markerShowEntity.setTextContent(exploreWay.getAddr());
-//                        markerShowEntity.setMarkerLocation(exploreWay.getLocation());
-//                        markerShowEntity.setMarkerType(ServiceConst.CARD_TYPE_ROAD_CONDITION);
-//
-//                        WorkThreadHandler.getInstance().postDelayed(() -> {
-//                            IMogoMarker mogoMarker = V2XServiceManager.getIMogoMarkerService().drawMarker(markerShowEntity);
-//                            // 点击监听，天际弹窗展示详情
-//                            if (mogoMarker != null) {
-//                                mogoMarker.startScaleAnimation(0, 1.2f, 0, 1.2f, 300, new AccelerateInterpolator(), new OnMarkerAnimationListener() {
-//                                    @Override
-//                                    public void onAnimStart() {
-//                                        Logger.d(TAG, " onItemClickListener onAnimStart -----> ");
-//                                    }
-//
-//                                    @Override
-//                                    public void onAnimEnd() {
-//                                        if (mogoMarker.isDestroyed()) {
-//                                            return;
-//                                        }
-//                                        Logger.d(TAG, " onItemClickListener onAnimEnd ------> ");
-//                                        mogoMarker.startScaleAnimation(1.2f, 1, 1.2f, 1, 100, new LinearInterpolator(), null);
-//                                    }
-//                                });
-//                                mogoMarker.setOwner(markerShowEntity.getMarkerType());
-//                                mogoMarker.setObject(markerShowEntity);
-//                            }
-//                        }, i * 100L);
-//                    }
-//
-//                    //自适应显示
-//                    showBonndsRoadtion(exploreWayList);
-//                } else {
-//                    Logger.e(TAG, "onItemClickListener  exploreWayList == null");
-//                }
-//            } catch (Exception e) {
-//                e.printStackTrace();
-//            }
-//        }
-//    }
-
-
     /**
      * 自适应显示
      *
diff --git a/modules/mogo-module-v2x/src/main/java/com/mogo/module/v2x/listener/SurroundingItemClickListener.java b/modules/mogo-module-v2x/src/main/java/com/mogo/module/v2x/listener/SurroundingItemClickListener.java
index 83eef72f09..3ebf7bccf3 100644
--- a/modules/mogo-module-v2x/src/main/java/com/mogo/module/v2x/listener/SurroundingItemClickListener.java
+++ b/modules/mogo-module-v2x/src/main/java/com/mogo/module/v2x/listener/SurroundingItemClickListener.java
@@ -10,5 +10,5 @@ import com.mogo.module.v2x.entity.panel.SurroundingConstruction;
  * @since 2020/8/10
  */
 public interface SurroundingItemClickListener {
-    void onItemClickListener(View v, int position, SurroundingConstruction construction, String poiType);
+    void onItemClickListener(View v, int position, SurroundingConstruction construction);
 }
diff --git a/modules/mogo-module-v2x/src/main/res/drawable/bg_v2x_surrounding_event_list_item.xml b/modules/mogo-module-v2x/src/main/res/drawable/bg_v2x_surrounding_event_list_item.xml
new file mode 100644
index 0000000000..d1f0a2354f
--- /dev/null
+++ b/modules/mogo-module-v2x/src/main/res/drawable/bg_v2x_surrounding_event_list_item.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+    <solid android:color="#1F2131"/>
+    <corners android:radius="12px"/>
+</shape>
\ No newline at end of file
diff --git a/modules/mogo-module-v2x/src/main/res/drawable/bg_v2x_surrounding_road_type.xml b/modules/mogo-module-v2x/src/main/res/drawable/bg_v2x_surrounding_road_type.xml
new file mode 100644
index 0000000000..e789d681a3
--- /dev/null
+++ b/modules/mogo-module-v2x/src/main/res/drawable/bg_v2x_surrounding_road_type.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <gradient
+        android:angle="180"
+        android:endColor="#FF4944"
+        android:startColor="#C23632" />
+    <corners android:radius="6px" />
+</shape>
\ No newline at end of file
diff --git a/modules/mogo-module-v2x/src/main/res/layout/module_event_panel_fragment_surrounding.xml b/modules/mogo-module-v2x/src/main/res/layout/module_event_panel_fragment_surrounding.xml
index dca25c89b9..d335682a1c 100644
--- a/modules/mogo-module-v2x/src/main/res/layout/module_event_panel_fragment_surrounding.xml
+++ b/modules/mogo-module-v2x/src/main/res/layout/module_event_panel_fragment_surrounding.xml
@@ -5,201 +5,148 @@
     android:layout_width="match_parent"
     android:layout_height="match_parent">
 
-    <!--两层列表-->
+    <!--周边-->
     <RelativeLayout
+        android:id="@+id/layout_surrounding_event"
         android:layout_width="match_parent"
         android:layout_height="match_parent">
-
-        <!--周边-->
+        <!--顶部layout-->
         <RelativeLayout
-            android:id="@+id/layout_surrounding_event"
+            android:id="@+id/layout_top"
             android:layout_width="match_parent"
-            android:layout_height="match_parent">
-            <!--顶部layout-->
+            android:layout_height="@dimen/module_v2x_surrounding_top_height"
+            android:visibility="visible">
+
+            <TextView
+                android:id="@+id/tv_brief"
+                android:layout_width="wrap_content"
+                android:layout_height="match_parent"
+                android:layout_alignParentTop="true"
+                android:layout_marginLeft="@dimen/module_v2x_surrounding_margin_left"
+                android:gravity="center_vertical"
+                android:text="周围5公里，共15条交通信息"
+                android:textColor="@color/v2x_white"
+                android:textSize="@dimen/module_v2x_surrounding_top_textsize" />
+            <!--            android:layout_centerInParent="true"-->
+
             <RelativeLayout
-                android:id="@+id/layout_top"
-                android:layout_width="match_parent"
-                android:layout_height="@dimen/module_v2x_surrounding_top_height"
-                android:visibility="visible">
+                android:layout_width="@dimen/module_v2x_surrounding_top_bt_width"
+                android:layout_height="@dimen/module_v2x_surrounding_top_bt_height"
+                android:layout_alignParentRight="true"
+                android:layout_centerVertical="true"
+                android:layout_marginEnd="@dimen/module_v2x_surrounding_margin_left"
+                android:background="@drawable/bg_v2x_refresh"
+                android:gravity="center">
 
                 <TextView
-                    android:id="@+id/tv_brief"
+                    android:id="@+id/tv_top_refresh"
                     android:layout_width="wrap_content"
                     android:layout_height="match_parent"
-                    android:layout_alignParentTop="true"
-                    android:layout_marginLeft="@dimen/module_v2x_surrounding_margin_left"
-                    android:gravity="center_vertical"
-                    android:text="周围5公里，共15条交通信息"
-                    android:textColor="@color/v2x_white"
+                    android:layout_centerInParent="true"
+                    android:gravity="center|center_horizontal"
+                    android:text="@string/v2x_surrounding_refresh"
+                    android:textColor="@color/v2x_item_white"
+                    android:textSize="@dimen/module_v2x_surrounding_top_textsize"
+                    android:textStyle="bold" />
+            </RelativeLayout>
+        </RelativeLayout>
+
+        <!--列表相关-->
+        <RelativeLayout
+            android:id="@+id/list_layout_container"
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:layout_below="@+id/layout_top"
+            android:layout_marginBottom="@dimen/module_v2x_panel_surrounding_marginbottom">
+
+            <androidx.recyclerview.widget.RecyclerView
+                android:id="@+id/surrounding_recycleview"
+                android:layout_width="wrap_content"
+                android:layout_height="match_parent"
+                android:layout_marginTop="@dimen/module_v2x_surrounding_empty_tv_margin_top"
+                android:visibility="visible" />
+
+            <!--空数据显示-->
+            <RelativeLayout
+                android:id="@+id/layout_empty_data_show"
+                android:layout_width="match_parent"
+                android:layout_height="match_parent"
+                android:layout_centerHorizontal="true"
+                android:gravity="center_horizontal"
+                android:visibility="gone">
+
+                <ImageView
+                    android:id="@+id/iv_empty"
+                    android:layout_width="@dimen/module_v2x_surrounding_empty_image_height"
+                    android:layout_height="@dimen/module_v2x_surrounding_empty_image_height"
+                    android:layout_centerHorizontal="true"
+                    android:layout_marginTop="@dimen/module_v2x_surrounding_empty_iv_margin_top"
+                    android:src="@drawable/mogo_image_blank_nor" />
+
+                <TextView
+                    android:id="@+id/tv_main_empty_1"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_below="@+id/iv_empty"
+                    android:layout_centerHorizontal="true"
+                    android:layout_marginTop="@dimen/module_v2x_surrounding_empty_tv_margin_top"
+                    android:gravity="center_horizontal"
+                    android:text="周边5公里，暂无交通事件"
+                    android:textColor="@color/v2x_FFF_333"
+                    android:textSize="@dimen/module_v2x_surrounding_top_textsize" />
+
+                <TextView
+                    android:id="@+id/tv_main_empty_2"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_below="@+id/tv_main_empty_1"
+                    android:layout_centerHorizontal="true"
+                    android:layout_marginTop="1px"
+                    android:gravity="center_horizontal"
+                    android:text="你可以试着分享一个事件给其他车主"
+                    android:textColor="@color/v2x_FFF_333"
                     android:textSize="@dimen/module_v2x_surrounding_top_textsize" />
-                <!--            android:layout_centerInParent="true"-->
 
                 <RelativeLayout
-                    android:layout_width="@dimen/module_v2x_surrounding_top_bt_width"
-                    android:layout_height="@dimen/module_v2x_surrounding_top_bt_height"
-                    android:layout_alignParentRight="true"
-                    android:layout_centerVertical="true"
-                    android:layout_marginEnd="@dimen/module_v2x_surrounding_margin_left"
-                    android:background="@drawable/bg_v2x_refresh"
-                    android:gravity="center">
+                    android:layout_width="match_parent"
+                    android:layout_height="match_parent"
+                    android:layout_below="@+id/tv_main_empty_2"
+                    android:layout_marginTop="@dimen/module_v2x_surrounding_empty_bt_margin_top">
 
                     <TextView
-                        android:id="@+id/tv_top_refresh"
-                        android:layout_width="wrap_content"
-                        android:layout_height="match_parent"
-                        android:layout_centerInParent="true"
-                        android:gravity="center|center_horizontal"
+                        android:id="@+id/tv_main_share"
+                        android:layout_width="@dimen/module_v2x_surrounding_empty_bt_width"
+                        android:layout_height="@dimen/module_v2x_surrounding_empty_bt_height"
+                        android:layout_toLeftOf="@+id/center_empty"
+                        android:background="@drawable/bg_v2x_go_to_share"
+                        android:gravity="center"
+                        android:text="@string/v2x_surrounding_go_to_share"
+                        android:textColor="@color/v2x_white"
+                        android:textSize="@dimen/module_v2x_surrounding_top_textsize"
+                        android:textStyle="bold" />
+
+                    <View
+                        android:id="@+id/center_empty"
+                        android:layout_width="@dimen/module_v2x_panel_surrounding_stance"
+                        android:layout_height="@dimen/module_v2x_panel_surrounding_stance"
+                        android:layout_centerInParent="true" />
+
+                    <TextView
+                        android:id="@+id/tv_main_refresh"
+                        android:layout_width="@dimen/module_v2x_surrounding_empty_bt_width"
+                        android:layout_height="@dimen/module_v2x_surrounding_empty_bt_height"
+                        android:layout_toRightOf="@+id/center_empty"
+                        android:background="@drawable/bg_v2x_refresh"
+                        android:gravity="center"
                         android:text="@string/v2x_surrounding_refresh"
-                        android:textColor="@color/v2x_item_white"
+                        android:textColor="@color/v2x_white_refresh"
                         android:textSize="@dimen/module_v2x_surrounding_top_textsize"
                         android:textStyle="bold" />
                 </RelativeLayout>
             </RelativeLayout>
-
-            <!--列表相关-->
-            <RelativeLayout
-                android:id="@+id/list_layout_container"
-                android:layout_width="match_parent"
-                android:layout_height="match_parent"
-                android:layout_below="@+id/layout_top"
-                android:layout_marginBottom="@dimen/module_v2x_panel_surrounding_marginbottom">
-
-                <androidx.recyclerview.widget.RecyclerView
-                    android:id="@+id/surrounding_recycleview"
-                    android:layout_width="wrap_content"
-                    android:layout_height="match_parent"
-                    android:layout_marginTop="@dimen/module_v2x_surrounding_empty_tv_margin_top"
-                    android:visibility="visible" />
-
-                <!--空数据显示-->
-                <RelativeLayout
-                    android:id="@+id/layout_empty_data_show"
-                    android:layout_width="match_parent"
-                    android:layout_height="match_parent"
-                    android:layout_centerHorizontal="true"
-                    android:gravity="center_horizontal"
-                    android:visibility="gone">
-
-                    <ImageView
-                        android:id="@+id/iv_empty"
-                        android:layout_width="@dimen/module_v2x_surrounding_empty_image_height"
-                        android:layout_height="@dimen/module_v2x_surrounding_empty_image_height"
-                        android:layout_centerHorizontal="true"
-                        android:layout_marginTop="@dimen/module_v2x_surrounding_empty_iv_margin_top"
-                        android:src="@drawable/mogo_image_blank_nor" />
-
-                    <TextView
-                        android:id="@+id/tv_main_empty_1"
-                        android:layout_width="wrap_content"
-                        android:layout_height="wrap_content"
-                        android:layout_below="@+id/iv_empty"
-                        android:layout_centerHorizontal="true"
-                        android:layout_marginTop="@dimen/module_v2x_surrounding_empty_tv_margin_top"
-                        android:gravity="center_horizontal"
-                        android:text="周边5公里，暂无交通事件"
-                        android:textColor="@color/v2x_FFF_333"
-                        android:textSize="@dimen/module_v2x_surrounding_top_textsize" />
-
-                    <TextView
-                        android:id="@+id/tv_main_empty_2"
-                        android:layout_width="wrap_content"
-                        android:layout_height="wrap_content"
-                        android:layout_below="@+id/tv_main_empty_1"
-                        android:layout_centerHorizontal="true"
-                        android:layout_marginTop="1px"
-                        android:gravity="center_horizontal"
-                        android:text="你可以试着分享一个事件给其他车主"
-                        android:textColor="@color/v2x_FFF_333"
-                        android:textSize="@dimen/module_v2x_surrounding_top_textsize" />
-
-                    <RelativeLayout
-                        android:layout_width="match_parent"
-                        android:layout_height="match_parent"
-                        android:layout_below="@+id/tv_main_empty_2"
-                        android:layout_marginTop="@dimen/module_v2x_surrounding_empty_bt_margin_top">
-
-                        <TextView
-                            android:id="@+id/tv_main_share"
-                            android:layout_width="@dimen/module_v2x_surrounding_empty_bt_width"
-                            android:layout_height="@dimen/module_v2x_surrounding_empty_bt_height"
-                            android:layout_toLeftOf="@+id/center_empty"
-                            android:background="@drawable/bg_v2x_go_to_share"
-                            android:gravity="center"
-                            android:text="@string/v2x_surrounding_go_to_share"
-                            android:textColor="@color/v2x_white"
-                            android:textSize="@dimen/module_v2x_surrounding_top_textsize"
-                            android:textStyle="bold" />
-
-                        <View
-                            android:id="@+id/center_empty"
-                            android:layout_width="@dimen/module_v2x_panel_surrounding_stance"
-                            android:layout_height="@dimen/module_v2x_panel_surrounding_stance"
-                            android:layout_centerInParent="true" />
-
-                        <TextView
-                            android:id="@+id/tv_main_refresh"
-                            android:layout_width="@dimen/module_v2x_surrounding_empty_bt_width"
-                            android:layout_height="@dimen/module_v2x_surrounding_empty_bt_height"
-                            android:layout_toRightOf="@+id/center_empty"
-                            android:background="@drawable/bg_v2x_refresh"
-                            android:gravity="center"
-                            android:text="@string/v2x_surrounding_refresh"
-                            android:textColor="@color/v2x_white_refresh"
-                            android:textSize="@dimen/module_v2x_surrounding_top_textsize"
-                            android:textStyle="bold" />
-                    </RelativeLayout>
-                </RelativeLayout>
-            </RelativeLayout>
-        </RelativeLayout>
-
-        <!--周边详情-->
-        <RelativeLayout
-            android:id="@+id/layout_surrounding_event_detail"
-            android:layout_width="match_parent"
-            android:layout_height="match_parent"
-            android:visibility="gone">
-
-            <!--顶部layout-->
-            <RelativeLayout
-                android:id="@+id/layout_top_detail"
-                android:layout_width="match_parent"
-                android:layout_height="@dimen/module_v2x_surrounding_top_height">
-
-                <ImageView
-                    android:id="@+id/back_image"
-                    android:layout_alignParentTop="true"
-                    android:src="@drawable/v2x_back_image"
-                    android:layout_marginLeft="@dimen/module_v2x_surrounding_margin_left"
-                    android:layout_width="43px"
-                    android:layout_height="43px"/>
-
-                <TextView
-                    android:id="@+id/tv_brief_detail"
-                    android:layout_width="wrap_content"
-                    android:layout_height="match_parent"
-                    android:layout_alignParentTop="true"
-                    android:layout_toRightOf="@+id/back_image"
-                    android:layout_centerVertical="true"
-                    android:layout_marginTop="8px"
-                    android:layout_marginLeft="19px"
-                    android:text="周围5公里，共15条交通信息"
-                    android:textColor="@color/v2x_white"
-                    android:textSize="18px" />
-
-            </RelativeLayout>
-
-            <androidx.recyclerview.widget.RecyclerView
-                android:id="@+id/surrounding_detail_recycleview"
-                android:layout_marginTop="30dp"
-                android:layout_marginLeft="@dimen/module_v2x_surrounding_margin_left"
-                android:layout_marginRight="@dimen/module_v2x_surrounding_margin_left"
-                android:layout_width="match_parent"
-                android:layout_height="match_parent"
-                android:visibility="visible" />
         </RelativeLayout>
     </RelativeLayout>
 
-
     <com.mogo.module.common.view.NetworkLoadingView
         android:id="@+id/loading_iv"
         android:layout_width="match_parent"
diff --git a/modules/mogo-module-v2x/src/main/res/layout/module_v2x_event_panel_fragment_event_panel.xml b/modules/mogo-module-v2x/src/main/res/layout/module_v2x_event_panel_fragment_event_panel.xml
index 59446aa2c7..da409da47c 100644
--- a/modules/mogo-module-v2x/src/main/res/layout/module_v2x_event_panel_fragment_event_panel.xml
+++ b/modules/mogo-module-v2x/src/main/res/layout/module_v2x_event_panel_fragment_event_panel.xml
@@ -92,10 +92,47 @@
         app:layout_constraintRight_toRightOf="parent"
         app:layout_constraintTop_toTopOf="@+id/rgTabSelect" />
 
-<!--        <View-->
-<!--            android:layout_width="match_parent"-->
-<!--            android:layout_height="58px"-->
-<!--            android:background="@drawable/v2x_shadow_shape_view"-->
-<!--            app:layout_constraintBottom_toBottomOf="parent" />-->
+
+    <!--顶部layout-->
+    <ImageView
+        android:id="@+id/back_image"
+        android:layout_width="43px"
+        android:layout_height="43px"
+        android:layout_alignParentTop="true"
+        android:layout_marginLeft="@dimen/module_v2x_surrounding_margin_left"
+        android:src="@drawable/v2x_back_image"
+        android:visibility="gone"
+        android:layout_marginTop="18px"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent" />
+
+    <TextView
+        android:id="@+id/tv_brief_detail"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginLeft="19px"
+        android:layout_marginTop="26px"
+        app:layout_constraintLeft_toRightOf="@+id/back_image"
+        app:layout_constraintTop_toTopOf="parent"
+        android:text="周围5公里，共15条交通信息"
+        android:textColor="@color/v2x_white"
+        android:visibility="gone"
+        android:textSize="18px" />
+
+    <androidx.recyclerview.widget.RecyclerView
+        android:id="@+id/surrounding_detail_recycleview"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:layout_marginLeft="@dimen/module_v2x_surrounding_margin_left"
+        android:layout_marginTop="90px"
+        android:visibility="gone"
+        app:layout_constraintTop_toBottomOf="@+id/back_image"
+        android:layout_marginRight="@dimen/module_v2x_surrounding_margin_left" />
+
+    <!--        <View-->
+    <!--            android:layout_width="match_parent"-->
+    <!--            android:layout_height="58px"-->
+    <!--            android:background="@drawable/v2x_shadow_shape_view"-->
+    <!--            app:layout_constraintBottom_toBottomOf="parent" />-->
 
 </androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/modules/mogo-module-v2x/src/main/res/layout/module_v2x_event_surrounding_detail_item.xml b/modules/mogo-module-v2x/src/main/res/layout/module_v2x_event_surrounding_detail_item.xml
index 3753401c25..cf502b43fc 100644
--- a/modules/mogo-module-v2x/src/main/res/layout/module_v2x_event_surrounding_detail_item.xml
+++ b/modules/mogo-module-v2x/src/main/res/layout/module_v2x_event_surrounding_detail_item.xml
@@ -5,7 +5,7 @@
     android:id="@+id/surrounding_root"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
-    android:background="@drawable/bg_v2x_event_list_item">
+    android:background="@drawable/bg_v2x_surrounding_event_list_item">
 
     <TextView
         android:id="@+id/surrounding_road_type_address"
@@ -21,7 +21,7 @@
         app:layout_constraintEnd_toStartOf="@+id/surrounding_road_like"
         app:layout_constraintStart_toStartOf="@id/surrounding_road_type"
         app:layout_constraintTop_toTopOf="parent"
-        tools:text="小黄庄北街与北三环辅路交叉口小黄庄北街与北三环辅路交叉口" />
+        tools:text="小黄庄北街与北三环辅路交叉口" />
 
     <TextView
         android:id="@+id/surrounding_username"
@@ -30,10 +30,11 @@
         android:alpha="0.6"
         android:textColor="@color/v2x_FFF_666"
         android:textSize="16px"
-        android:layout_marginStart="@dimen/dp_36"
+        android:layout_marginStart="20px"
+        android:layout_marginTop="6px"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toBottomOf="@+id/surrounding_road_type_address"
-        tools:text="赵云" />
+        tools:text="小蘑菇" />
 
     <TextView
         android:id="@+id/surrounding_time"
@@ -42,8 +43,9 @@
         android:alpha="0.6"
         android:textColor="@color/v2x_FFF_666"
         android:textSize="16px"
-        android:layout_marginStart="@dimen/dp_80"
-        app:layout_constraintStart_toStartOf="@+id/surrounding_username"
+        android:layout_marginStart="@dimen/dp_30"
+        android:layout_marginTop="6px"
+        app:layout_constraintStart_toEndOf="@+id/surrounding_username"
         app:layout_constraintTop_toBottomOf="@+id/surrounding_road_type_address"
         tools:text="2020-1-12" />
 
@@ -51,14 +53,14 @@
         android:id="@+id/surrounding_road_type"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:layout_marginStart="@dimen/dp_36"
-        android:layout_marginTop="@dimen/dp_12"
+        android:layout_marginStart="20px"
+        android:layout_marginTop="6px"
         android:layout_marginBottom="@dimen/dp_36"
         android:background="@drawable/bg_v2x_event_type_read"
         android:gravity="center"
-        android:paddingLeft="5px"
+        android:paddingLeft="6px"
         android:paddingTop="3px"
-        android:paddingRight="5px"
+        android:paddingRight="6px"
         android:paddingBottom="3px"
         android:text="违章停车"
         android:textColor="#ffffff"
diff --git a/skin/mogo-skin-light/src/main/module-v2x-res/drawable-ldpi/v2x_back_image_light.png b/skin/mogo-skin-light/src/main/module-v2x-res/drawable-ldpi/v2x_back_image_light.png
new file mode 100644
index 0000000000..532c21499d
Binary files /dev/null and b/skin/mogo-skin-light/src/main/module-v2x-res/drawable-ldpi/v2x_back_image_light.png differ
diff --git a/skin/mogo-skin-light/src/main/module-v2x-res/drawable-mdpi/v2x_back_image_light.png b/skin/mogo-skin-light/src/main/module-v2x-res/drawable-mdpi/v2x_back_image_light.png
new file mode 100644
index 0000000000..532c21499d
Binary files /dev/null and b/skin/mogo-skin-light/src/main/module-v2x-res/drawable-mdpi/v2x_back_image_light.png differ
diff --git a/skin/mogo-skin-light/src/main/module-v2x-res/drawable/bg_v2x_surrounding_event_list_item_light.xml b/skin/mogo-skin-light/src/main/module-v2x-res/drawable/bg_v2x_surrounding_event_list_item_light.xml
new file mode 100644
index 0000000000..05f8c02d99
--- /dev/null
+++ b/skin/mogo-skin-light/src/main/module-v2x-res/drawable/bg_v2x_surrounding_event_list_item_light.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+    <solid android:color="#DDDDDD"/>
+    <corners android:radius="12px"/>
+</shape>
\ No newline at end of file