Skip to content

C
confucius
Commit a2a7ae3d authored by Mac's avatar Mac
Browse files
Options

个人中心 滚动条修改

parent 71cd71c7
Hide whitespace changes
Inline Side-by-side
Showing with 72 additions and 63 deletions
src/components/user/summaryInfo.vue
View file @ a2a7ae3d
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
} }
.summaryInfo .noticeitem { .summaryInfo .noticeitem {
width: 100%; /* width: 100% - 2px; */
padding: 20px; padding: 20px;
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
...@@ -120,25 +120,6 @@ ...@@ -120,25 +120,6 @@
background: #EEFEFD; 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 { .month_export {
position: relative !important; position: relative !important;
...@@ -179,30 +160,37 @@ ...@@ -179,30 +160,37 @@
<span class="box_t_itext">公告</span> <span class="box_t_itext">公告</span>
</div> </div>
</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;">
<div v-if='noticeList.length>0'> <q-scroll-area
<div v-for="(item,index) in noticeList" :key='index' class="noticeitem" :thumb-style="thumbStyle"
@click="goNoticeDetail(item)"> :bar-style="barStyle"
<!-- <div class="noticeitem_l"> style="height: 100%; width: 100%;"
<div class="noticeitem_l_img"></div> >
</div> --> <div v-if='noticeList.length>0'>
<div style="width: 1px;flex: 1;"> <div v-for="(item,index) in noticeList" :key='index' class="noticeitem" style="margin: 2px;"
<div style="width: 100%;display: flex;align-items: flex-start;justify-content: space-between;"> @click="goNoticeDetail(item)">
<span class="gonggaoName" >{{item.Title}}</span> <!-- <div class="noticeitem_l">
<span style="font-size: 14px;font-weight: 500;color: #C4C6D1;">{{item.DayStr}}</span> <div class="noticeitem_l_img"></div>
</div> </div> -->
<div style="font-size: 14px; font-family: PingFang SC;font-weight: 400;color: #9A9DAB;margin-top: 10px;display: flex;align-items: center;"> <div style="width: 1px;flex: 1;">
<span>{{item.UpdateByName}}</span> <span style="margin-left: 20px;">编号：{{item.Number}}</span> <div style="width: 100%;display: flex;align-items: flex-start;justify-content: space-between;">
<span class="gonggaoName" >{{item.Title}}</span>
<span style="font-size: 14px;font-weight: 500;color: #C4C6D1;">{{item.DayStr}}</span>
</div>
<div style="font-size: 14px; font-family: PingFang SC;font-weight: 400;color: #9A9DAB;margin-top: 10px;display: flex;align-items: center;">
<span>{{item.UpdateByName}}</span> <span style="margin-left: 20px;">编号：{{item.Number}}</span>
</div>
</div> </div>
</div> </div>
<div class="notifyLoadMore" style="text-align: center;margin-top: 10px;" v-if="noticeMsg.pageSize<Count" @click="getMoreNotify()">
<span>加载更多</span>
</div>
</div> </div>
<div class="notifyLoadMore" style="text-align: center;margin-top: 10px;" v-if="noticeMsg.pageSize<Count" @click="getMoreNotify()"> <div v-else class="q-mt-lg flex column justify-center items-center">
<span>加载更多</span> <span class="q-mt-md remark-font">没有找到相关数据信息</span>
</div> </div>
</div> </q-scroll-area>
<div v-else class="q-mt-lg flex column justify-center items-center">
<span class="q-mt-md remark-font">没有找到相关数据信息</span>
</div>
</div> </div>
</div> </div>
...@@ -216,29 +204,35 @@ ...@@ -216,29 +204,35 @@
<span class="box_t_itext">消息</span> <span class="box_t_itext">消息</span>
</div> </div>
</div> </div>
<div class="scrollbox" <div style="margin-top: 10px;background: #fff;height: 268px; width: 100%;overflow-y: auto;cursor: pointer;padding: 2px;">
style="margin-top: 10px;background: #fff;height: 268px; width: 100%;overflow-y: auto;cursor: pointer;padding: 2px;"> <q-scroll-area
<q-list v-if="socektArr.length>0" > :thumb-style="thumbStyle"
<q-item class="q-my-sm q-pa-xs items-start" v-for="(x,i) in socektArr" :key="i" style="padding: 10px 0;" :bar-style="barStyle"
clickable v-ripple @click="goMsgDetail(x.JumpUrl,x),readMsgLog(x.Id,i)"> style="height: 100%; width: 100%;"
<q-item-section avatar> >
<q-avatar :style="{'background-color':'#e1f0ff'}" rounded size="44px" <q-list v-if="socektArr.length>0" >
text-color="negative"> <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;"
<inline-svg :class="['svg-icon',`svg-icon-primary`]" clickable v-ripple @click="goMsgDetail(x.JumpUrl,x),readMsgLog(x.Id,i)">
src="icons/svg/Shopping/Bag2.svg"></inline-svg> <q-item-section avatar>
</q-avatar> <q-avatar :style="{'background-color':'#e1f0ff'}" rounded size="44px"
</q-item-section> text-color="negative">
<q-item-section> <inline-svg :class="['svg-icon',`svg-icon-primary`]"
<q-item-label class="text-weight-bold" style="margin-bottom: 10px;">{{x.Title}}</q-item-label> src="icons/svg/Shopping/Bag2.svg"></inline-svg>
<q-item-label caption lines="3" class="remark-font">{{x.Content}}</q-item-label> </q-avatar>
</q-item-section> </q-item-section>
<q-item-section side class="remark-font">{{x.SendTime.replace('T',' ')}} <q-item-section>
</q-item-section> <q-item-label class="text-weight-bold" style="margin-bottom: 10px;">{{x.Title}}</q-item-label>
</q-item> <q-item-label caption lines="3" class="remark-font">{{x.Content}}</q-item-label>
</q-list> </q-item-section>
<div v-else class="q-mt-lg flex column justify-center items-center"> <q-item-section side class="remark-font">{{x.SendTime.replace('T',' ')}}
<span class="q-mt-md remark-font">没有找到相关数据信息</span> </q-item-section>
</div> </q-item>
</q-list>
<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>
</div> </div>
...@@ -445,6 +439,21 @@ ...@@ -445,6 +439,21 @@
pageIndex: 1, pageIndex: 1,
pageSize: 5 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, Count: 0,
visible: true, visible: true,
noticeList: [], noticeList: [],
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment