证书查询样式调整

pages/certificateDetail/certificateDetail.css

@@ -122,14 +122,35 @@
 /* 考试公告 */
  .note-box {
      width: 100%;
+	 height: 7.3rem;
      background-color: #FFFFFF;
-     padding: 0.2rem;
+     padding:0 0.2rem 0.2rem; 
      box-sizing: border-box;
      margin-top: 0.2rem;
-}
+	 overflow-y: scroll;
+	 border-top: 0.01rem solid #ededed;
+}
+.note-box::-webkit-scrollbar {
+ width:0.06rem;
+ }
+ /* 滚动槽 */
+  .note-box::-webkit-scrollbar-track {
+ border-radius:0.1rem;
+ }
+ /* 滚动条滑块 */
+  .note-box::-webkit-scrollbar-thumb {
+ border-radius:0.1rem;
+ background:rgba(0,0,0,0.1);
+ }
  .note-title {
-     margin-bottom: 0.18rem;
+     /* margin-bottom: 0.18rem; */
      font-size: 0.16rem;
+	 background-color: #fff;
+	 padding:0.26rem 0.3rem;
+	 width: 100%;
+	 height: 0.7rem;
+	 line-height: 0.7rem;
+	 box-sizing: border-box;
 }
  .note-title-icon {
      width: 0.18rem;
@@ -138,11 +159,16 @@
 }
  .note-item {
      justify-content: space-between;
-     font-size: 0.12rem;
+     font-size: 0.14rem;
      font-weight: 400;
      line-height: 0.3rem;
      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
      cursor: pointer;
+	 padding: 0 0.1rem;
+	 position: relative;
+}
+.note-item:hover{
+	background-color: #ededed;
 }
  .note-item-content {
      color: #666666;
@@ -151,6 +177,8 @@
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-right: 0.1rem;
+	 border-bottom: 0.01rem solid #ededed;
+	 line-height: 0.6rem;
 }
  .note-item-content:hover {
      text-decoration: underline #666666;
@@ -158,6 +186,16 @@
  .note-item-date {
      color: #999999;
 }
+.note-item-selected:before{
+	content: '';
+	width: 0.03rem;
+	height: 0.2rem;
+	background-color: #007aff;
+	position: absolute;
+	top: 50%;
+	transform: translateY(-50%);
+	left:-0.01rem
+}
  
 
 

pages/certificateDetail/certificateDetail.vue

@@ -67,14 +67,18 @@
 			</view>
 			<!-- 答题卡区域 -->
 			<view class="test-info ddflex">
+				<view class="note-title ddflex">
+					<image class="note-title-icon" src="/static/images/cjwt.png"</image>
+					<view>所有证书</view>
+				</view>
 				<view class="note-box" style="margin-top: 0;">
-					<view class="note-title ddflex">
+					<!-- <view class="note-title ddflex">
 						<image class="note-title-icon" src="/static/images/cjwt.png"</image>
 						<view>所有证书</view>
-					</view>
+					</view> -->
 					<view>
 						<view class="note-item ddflex" v-for="item,index in infoList" :key="index" @click="changeItem(item)">
-							<view class="note-item-content">{{index+1}}. {{item.cateName}}</view>
+							<view :class="'note-item-content '+(item.selected?'note-item-selected':'')">{{index+1}}. {{item.cateName}} {{item.selected}}</view>
 						</view>
 					</view>
 				</view>
@@ -156,9 +160,9 @@
 			<uni-popup ref="popup" background-color="#fff">
 				<view class="popup-content popup-height">
 					<view class="m-title" style="margin-bottom: 10rpx;font-size: 30rpx;font-weight: bold">所有证书</view>
-					<view>
+					<view style="overflow-y: scroll;max-height: 85%">
 						<view class="m-note-item ddflex" v-for="item,index in infoList" :key="index" @click="changeItem(item)">
-							<view class="m-note-item-content">{{index+1}}. {{item.cateName}}</view>
+							<view class="m-note-item-content" :style="item.selected?'color:#007aff':''">{{index+1}}. {{item.cateName}}</view>
 						</view>
 					</view>
 				</view>
@@ -242,7 +246,9 @@
 			},
 			getDetail(){
 				req.getRequest('/api/v3/exam/user/manager/certificate',this.options,res=>{
+					res.map(item=>{item.selected = false})
 					this.infoList = res
+					res[0].selected = true
 					this.info = res[0]
 				})
 			},
@@ -254,6 +260,10 @@
 					this.$refs.popup.close()
 				}
 				setTimeout(()=>{
+					this.infoList.map(item=>{
+						item.selected = false
+					})
+					item.selected = true
 					this.info = item
 					uni.hideLoading()
 				},500)