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 @@
}
.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,30 +160,37 @@
<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'>
<div v-for="(item,index) in noticeList" :key='index' class="noticeitem"
@click="goNoticeDetail(item)">
<!-- <div class="noticeitem_l">
<div class="noticeitem_l_img"></div>
</div> -->
<div style="width: 1px;flex: 1;">
<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 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" style="margin: 2px;"
@click="goNoticeDetail(item)">
<!-- <div class="noticeitem_l">
<div class="noticeitem_l_img"></div>
</div> -->
<div style="width: 1px;flex: 1;">
<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 class="notifyLoadMore" style="text-align: center;margin-top: 10px;" v-if="noticeMsg.pageSize<Count" @click="getMoreNotify()">
<span>加载更多</span>
</div>
</div>
<div class="notifyLoadMore" style="text-align: center;margin-top: 10px;" v-if="noticeMsg.pageSize<Count" @click="getMoreNotify()">
<span>加载更多</span>
<div v-else class="q-mt-lg flex column justify-center items-center">
<span class="q-mt-md remark-font">没有找到相关数据信息</span>
</div>
</div>
<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,29 +204,35 @@
<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;">
<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;"
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"
text-color="negative">
<inline-svg :class="['svg-icon',`svg-icon-primary`]"
src="icons/svg/Shopping/Bag2.svg"></inline-svg>
</q-avatar>
</q-item-section>
<q-item-section>
<q-item-label class="text-weight-bold" style="margin-bottom: 10px;">{{x.Title}}</q-item-label>
<q-item-label caption lines="3" class="remark-font">{{x.Content}}</q-item-label>
</q-item-section>
<q-item-section side class="remark-font">{{x.SendTime.replace('T',' ')}}
</q-item-section>
</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>
<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;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"
text-color="negative">
<inline-svg :class="['svg-icon',`svg-icon-primary`]"
src="icons/svg/Shopping/Bag2.svg"></inline-svg>
</q-avatar>
</q-item-section>
<q-item-section>
<q-item-label class="text-weight-bold" style="margin-bottom: 10px;">{{x.Title}}</q-item-label>
<q-item-label caption lines="3" class="remark-font">{{x.Content}}</q-item-label>
</q-item-section>
<q-item-section side class="remark-font">{{x.SendTime.replace('T',' ')}}
</q-item-section>
</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>
......@@ -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: [],
......
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