首页样式开发

common/styles/global/components.scss

@@ -24,44 +24,6 @@ view{box-sizing: border-box;}
   background-position: $position;background-size: contain;background-repeat: no-repeat;
 }
 
-/***** 富文本处理  *****/
-@mixin ezy-rich-text() {
-	white-space: pre-wrap;text-align: justify;
-	div,p,span{margin: 0;padding: 0;}
-	img{max-width: 100%;}
-	
-	.ql-align-center{text-align: center}
-	.ql-align-right{text-align: right}
-	// 9号字
-	.ql-size-9px{font-size: 18rpx;}
-	// 12号字
-	.ql-size-12px{font-size: 24rpx;}
-	// 14号字
-	.ql-size-14px{font-size: 28rpx;}
-	// 16号字
-	.ql-size-16px{font-size: 32rpx;}
-	// 18号字
-	.ql-size-18px{font-size: 36rpx;}
-	// 24号字
-	.ql-size-24px{font-size: 48rpx;}
-	// 32号字
-	.ql-size-32px{font-size: 64rpx;}
-
-	// 单倍行距
-	.line-height-lineHeight1{line-height: 1;}
-
-	// 1.5倍行距
-	.line-height-lineHeight1-5{line-height: 1.5;}
-
-	// 2倍行距
-	.line-height-lineHeight2{line-height: 2;}
-
-	// 2.5倍行距
-	.line-height-lineHeight2-5{line-height: 2.5;}
-
-	// 3倍行距
-	.line-height-lineHeight3{line-height: 3;}
-}
 
 /***** 标题栏  *****/
 // 三个元素

common/styles/global/pages.scss

@@ -1,7 +1,48 @@
 /***** 这里存放通用页面样式 *****/
-iframe{z-index: 3;}
+// iframe{z-index: 3;}
 // 首页
 .dljt-index-page{
+	width: 100%;height: auto;position: relative;padding:120rpx 0 0;
+	.index-swiper-box{width: 100%;margin-bottom: 52rpx;}
+	uni-image{width: 100%;height: 340rpx;}
+	.index-content-box{width: 92%;margin: 0 auto 50rpx;}
+	.index-background-box{background-color: #f5f5f5;padding:36rpx 0 10rpx;}
+	.index-more-btn{
+		text-align: right;font-size: 28rpx;cursor: pointer;color: #333;
+		icon{width: 32rpx;height: 32rpx;@include dljt-no-repeat-cover;display: inline-block;vertical-align: middle;
+		background-image: url("@/static/images/index/more-black-icon1.png");margin-left: 4rpx;}
+		text{display: inline-block;vertical-align: middle;margin-left: 8rpx;}
+	}
+	.more-btn-top{margin-top: 24rpx;}
+	
+	.tab-item{
+		width: 100%;color: #1460b6;text-align: center;margin-bottom: 36rpx;
+		padding: 12rpx 0;font-size: 32rpx;cursor: pointer;font-weight: bold;
+		icon{width: 64rpx;height: 64rpx;@include dljt-no-repeat-cover;display: inline-block;
+		vertical-align: middle;margin-right: 16rpx;position: relative;}
+		.tzgg-icon{background-image: url("@/static/images/index/tz-icon.png");}
+		.xwgk-icon{background-image: url("@/static/images/index/xw-icon.png");}
+		.zsjy-icon{background-image: url("@/static/images/index/zsjy-icon.png");}
+	}
+	
+	 .index-list-item{
+	    color: #fff;padding:32rpx 6rpx 24rpx;border-bottom: 1rpx dashed #666;cursor: pointer;line-height: 1;color: #333;
+	    .list-createTime{font-size: 24rpx;margin-bottom: 20rpx;}
+	    .list-title{font-size: 28rpx;@include single-line-ellipsis;height: 32rpx;}
+	}
+	
+	.zsjy-box{
+		.zsjy-tab-item{margin: 56rpx 0 10rpx;}
+		.wnlqfs-box,.xqhz-box{
+			width: 700rpx;height: 409rpx;@include dljt-no-repeat-cover;
+			position: relative;
+			.zsjy-text{position: absolute;bottom:0;left: 0;right: 0;
+			text-align:center;padding: 12rpx 0;color:#fff}
+		}
+		.wnlqfs-box{background-image: url("@/static/images/index/zsjy-img1.png");margin-bottom: 36rpx;}
+		.xqhz-box{background-image: url("@/static/images/index/zsjy-img2.png");}
+	}
+	
 }
 
 
@@ -133,4 +174,5 @@ iframe{z-index: 3;}
 	}
 	.uni-load-more{border-top: 1rpx solid #ccc;}
 }
-  
+
+

pages/index/index.vue

@@ -3,53 +3,62 @@
 
 		<MtaNavbar></MtaNavbar>
 
-		<view class="uni-margin-wrap">
+		<view class="index-swiper-box">
 			<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="5000">
 				<swiper-item v-for="item in banners" :key="item.id" @click="handleBannerSelect(item)">
 					<image :src="item.pic"></image>
 				</swiper-item>
 			</swiper>
 		</view>
-		<view>
+		<view class="index-content-box">
 			<listTwoVue v-for="item in data.xinwen" :key="item.id" :data="item" @click.native="handleClickXinwen(item)"
 				class=index-xinwen-box></listTwoVue>
-			<view v-if="data.xinwenTotal>3" @click="handleXinwenGengDuo">更多</view>
+			<view class="index-more-btn" v-if="data.xinwenTotal>3">
+				<text @click="handleXinwenGengDuo">更多</text>
+				<icon @click="handleXinwenGengDuo"></icon>
+			</view>
 		</view>
-		<br />
-		<view>
-			<view>通知公告</view>
-			<view v-for="item in data.gonggao" :key="item.id" @click="handleClickGonggao(item)">
-				{{item}}
+		<view class="index-background-box">
+			<view class="index-content-box">
+				<view class="tab-item"><icon class="tzgg-icon"></icon><text>通知公告</text></view>
+				<view class="index-list-item" v-for="item in data.gonggao" :key="item.id" @click="handleClickGonggao(item)">
+					<view class="list-createTime">{{item.createTime}}</view>
+					<view class="list-title">{{item.title}}</view>
+				</view>
+				<view class="index-more-btn more-btn-top" v-if="data.xiaowuTotal>5">
+					<text @click="getTongzhigengduo">更多</text>
+					<icon @click="getTongzhigengduo"></icon>
+				</view>
 			</view>
-			<view v-if="data.xiaowuTotal>5" @click="getTongzhigengduo">更多</view>
 		</view>
-		<br />
-		<view>
-			校务: {{data.xiaowu}}
-			<view>校务公开</view>
-			<view v-for="item in data.xiaowu" :key="item.id" @click="handleClickXiaowu(item)">
-				{{item}}
+		<view class="index-background-box">
+			<view class="index-content-box">
+			<view class="tab-item"><icon class="xwgk-icon"></icon><text>校务公开</text></view>
+			<view class="index-list-item" v-for="item in data.xiaowu" :key="item.id" @click="handleClickXiaowu(item)">
+				<view class="list-createTime">{{item.createTime}}</view>
+				<view class="list-title">{{item.title}}</view>
+			</view>
+			<view class="index-more-btn more-btn-top" v-if="data.xiaowuTotal>5">
+				<text @click="getXiaowuGengduo">更多</text>
+				<icon @click="getXiaowuGengduo"></icon></view>
 			</view>
-			<view v-if="data.xiaowuTotal>5" @click="getXiaowuGengduo">更多</view>
 		</view>
 
 		<!-- 招生就业 -->
-		<view class="website-zsjy-title">
-			<p>招生就业</p>
-		</view>
-		<view class="zsjy-box">
+		<view class="index-content-box zsjy-box">
+			<view class="tab-item zsjy-tab-item"><icon class="zsjy-icon"></icon><text>招生就业</text></view>
 			<view class="wnlqfs-box" @click="goFun('wnlqfs')">
-				<p>往年录取分数</p>
+				<view class="zsjy-text">往年录取分数</view>
 			</view>
 			<view class="xqhz-box" @click="goFun('xwhz')">
-				<p>校企合作</p>
+				<view class="zsjy-text">校企合作</view>
 			</view>
 		</view>
 
 		<MtaFooter></MtaFooter>
 
 		<!-- 底部导航 -->
-		<MtaTabBar></MtaTabBar>
+		<!-- <MtaTabBar></MtaTabBar> -->
 
 
 	</view>