个人中心 滚动条修改

src/components/user/summaryInfo.vue

@@ -25,7 +25,7 @@
     }
 
     .summaryInfo .noticeitem {
-        width: 100%;
+        /* width: 100% - 2px; */
         padding: 20px;
         display: flex;
         align-items: flex-start;
@@ -120,25 +120,6 @@
         background: #EEFEFD;
     }
 
-    .summaryInfo .scrollbox::-webkit-scrollbar {
-        width: 3px;
-        height: 3px;
-        background-color: #F5F5F5;
-    }
-
-    /*!*定义滚动条轨道 内阴影+圆角*!*/
-    .summaryInfo .scrollbox::-webkit-scrollbar-track {
-        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-        border-radius: 10px;
-        background-color: #F5F5F5;
-    }
-
-    /*!*定义滑块 内阴影+圆角*!*/
-    .summaryInfo .scrollbox::-webkit-scrollbar-thumb {
-        border-radius: 10px;
-        -webkit-box-shadow: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
-        background-color: #0ae;
-    }
 
     .month_export {
         position: relative !important;
@@ -179,9 +160,14 @@
                                 <span class="box_t_itext">公告</span>
                             </div>
                         </div>
-                        <div class="scrollbox" v-if='noticeList.length>0' style="margin-top: 10px;background: #fff;height: 268px; width: 100%;overflow-y: auto;cursor: pointer;padding: 2px;">
+                        <div  v-if='noticeList.length>0' style="margin-top: 10px;background: #fff;height: 268px; width: 100%;overflow-y: auto;cursor: pointer;padding: 2px;">
+                            <q-scroll-area
+                                :thumb-style="thumbStyle"
+                                :bar-style="barStyle"
+                                style="height: 100%; width: 100%;"
+                            >
                                 <div v-if='noticeList.length>0'>
-                                <div v-for="(item,index) in noticeList" :key='index' class="noticeitem"
+                                    <div v-for="(item,index) in noticeList" :key='index' class="noticeitem" style="margin: 2px;"
                                         @click="goNoticeDetail(item)">
                                         <!-- <div class="noticeitem_l">
                                             <div class="noticeitem_l_img"></div>
@@ -203,6 +189,8 @@
                                 <div v-else  class="q-mt-lg flex column justify-center items-center">
                                     <span class="q-mt-md remark-font">没有找到相关数据信息</span>
                                 </div>
+                            </q-scroll-area>
+                            
                         </div>
                         
                     </div>
@@ -216,10 +204,14 @@
                                 <span class="box_t_itext">消息</span>
                             </div>
                         </div>
-                        <div class="scrollbox"
-                            style="margin-top: 10px;background: #fff;height: 268px; width: 100%;overflow-y: auto;cursor: pointer;padding: 2px;">
+                        <div  style="margin-top: 10px;background: #fff;height: 268px; width: 100%;overflow-y: auto;cursor: pointer;padding: 2px;">
+                            <q-scroll-area
+                                :thumb-style="thumbStyle"
+                                :bar-style="barStyle"
+                                style="height: 100%; width: 100%;"
+                            >
                                 <q-list v-if="socektArr.length>0" >
-                                <q-item class="q-my-sm q-pa-xs items-start" v-for="(x,i) in socektArr" :key="i" style="padding: 10px 0;" 
+                                    <q-item class="q-my-sm q-pa-xs items-start" v-for="(x,i) in socektArr" :key="i" style="padding: 10px;border-radius: 6px;" 
                                         clickable v-ripple @click="goMsgDetail(x.JumpUrl,x),readMsgLog(x.Id,i)">
                                         <q-item-section avatar>
                                             <q-avatar :style="{'background-color':'#e1f0ff'}" rounded size="44px"
@@ -239,6 +231,8 @@
                                 <div v-else  class="q-mt-lg flex column justify-center items-center">
                                     <span class="q-mt-md remark-font">没有找到相关数据信息</span>
                                 </div>
+                            </q-scroll-area>
+                           
                         </div>
 
                     </div>
@@ -445,6 +439,21 @@
                     pageIndex: 1,
                     pageSize: 5
                 },
+                thumbStyle: {
+                    right: '0px',
+                    borderRadius: '5px',
+                    backgroundColor: '#027be3',
+                    width: '5px',
+                    opacity: 0.75
+                },
+
+                barStyle: {
+                    right: '-2px',
+                    borderRadius: '9px',
+                    backgroundColor: '#027be3',
+                    width: '9px',
+                    opacity: 0.2
+                },
                 Count: 0,
                 visible: true,
                 noticeList: [],