专业建设样式开发

common/styles/global/components.scss

@@ -211,8 +211,7 @@ view{box-sizing: border-box;}
 .dljt-page-content-box{width: 92%;margin: 0 auto 50rpx;background-color: #fff;
 box-shadow: 0 1rpx 3rpx 0 #227ECE;box-sizing: border-box;padding: 4rpx 10rpx 0;}
 /* 无限滚动区域 */
-// .uni-scroll-view-content{height: calc(100vh - 290rpx)}
-.uni-scroll-view-content{height: calc(100vh - 410rpx)}
+.uni-scroll-view-content{height: calc(100vh - 420rpx)}
 
 /*左侧图片右侧内容列表区域*/
 .list-item-box{

common/styles/global/pages.scss

@@ -2,4 +2,38 @@
 // 首页
 .dljt-index-page{
 }
-    
+
+
+// 专业建设
+.zhuanye-page{
+	.uni-scroll-view-content{height: calc(100vh - 640rpx);}
+	.zhuanye-list-box{
+	  display: flex;justify-content: space-between;margin: 24rpx 10rpx 36rpx;
+	   .zhuanye-item{
+		 width: 19%;display: flex;flex-direction: column;align-items: center;
+	     border: 1rpx solid #ccc;padding: 24rpx 0;
+	     icon{width: 80rpx;height: 73rpx;display: inline-block;@include dljt-no-repeat-cover;}
+	     text{color: #000;font-size: 26rpx;margin-top: 16rpx}
+	   }
+	  .zhuanye-item.active{
+	    background-color: #0f50a4;position: relative;
+	    text{color: #fff;}
+	  }
+	  .zhuanye-item.active::after{
+	    content: '';width: 0;height: 0;position: absolute;bottom: -20rpx;left: 50%;transform: translateX(-50%);
+	    border-left: 16rpx solid transparent;
+	    border-right: 16rpx solid transparent;
+	    border-top: 16rpx solid #0f50a4;
+	  }
+	  .zhuanye-item:nth-child(1) icon{background-image: url("@/static/images/jyjx/jyjx-icon1.png");}
+	  .zhuanye-item:nth-child(1).active icon{background-image: url("@/static/images/jyjx/jyjx-icon1-a.png");}
+	  .zhuanye-item:nth-child(2) icon{background-image: url("@/static/images/jyjx/jyjx-icon2.png");}
+	  .zhuanye-item:nth-child(2).active icon{background-image: url("@/static/images/jyjx/jyjx-icon2-a.png");}
+	  .zhuanye-item:nth-child(3) icon{background-image: url("@/static/images/jyjx/jyjx-icon3.png");}
+	  .zhuanye-item:nth-child(3).active icon{background-image: url("@/static/images/jyjx/jyjx-icon3-a.png");}
+	  .zhuanye-item:nth-child(4) icon{background-image: url("@/static/images/jyjx/jyjx-icon4.png");}
+	  .zhuanye-item:nth-child(4).active icon{background-image: url("@/static/images/jyjx/jyjx-icon4-a.png");}
+	  .zhuanye-item:nth-child(5) icon{background-image: url("@/static/images/jyjx/jyjx-icon5.png");}
+	  .zhuanye-item:nth-child(5).active icon{background-image: url("@/static/images/jyjx/jyjx-icon5-a.png");}
+	}
+}

pages/jyjxZhuanyejianshe/jyjxZhuanyejianshe.vue

@@ -1,5 +1,5 @@
 <template>
-	<view class="dljt-page-box">
+	<view class="dljt-page-box zhuanye-page">
 		<MtaNavbar></MtaNavbar>
 		<view class="dljt-container-box">
 			<view class="dljt-page-title">教育教学</view>
@@ -12,12 +12,12 @@
 					<view class="breadcrumb-active">专业建设</view>
 				</view>
 				
-				<view>
-					<view :class="{active: data.type == 1}" @click="changeType(1)">专业发展</view>
-					<view :class="{active: data.type == 2}" @click="changeType(2)">人培方案</view>
-					<view :class="{active: data.type == 3}" @click="changeType(3)">课程标准</view>
-					<view :class="{active: data.type == 4}" @click="changeType(4)">实训安全</view>
-					<view :class="{active: data.type == 5}" @click="changeType(5)">教材管理</view>
+				<view class="zhuanye-list-box">
+					<view class="zhuanye-item" :class="{active: data.type == 1}" @click="changeType(1)"><icon></icon><text>专业发展</text></view>
+					<view class="zhuanye-item" :class="{active: data.type == 2}" @click="changeType(2)"><icon></icon><text>人培方案</text></view>
+					<view class="zhuanye-item" :class="{active: data.type == 3}" @click="changeType(3)"><icon></icon><text>课程标准</text></view>
+					<view class="zhuanye-item" :class="{active: data.type == 4}" @click="changeType(4)"><icon></icon><text>实训安全</text></view>
+					<view class="zhuanye-item" :class="{active: data.type == 5}" @click="changeType(5)"><icon></icon><text>教材管理</text></view>
 				</view>
 				
 				<MtaScrollViewVue :refreshFn="getList" :other-option="{type: data.type}" ref="listRef">