首页功能完善

h5_web/pages.json

@@ -1,180 +1,160 @@
 {
-	"easycom": {
-		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
-	},
-	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
-		{
-			"path": "pages/index/index",
-			"style": {
-				"navigationStyle":"custom",// 隐藏系统导航栏
-				"navigationBarTitleText": "首页"
-			}
-		}
-		,{
-		    "path" : "pages/mycode/mycode",
-		    "style" :                                                                                    
-		    {
-		        "navigationBarTitleText": "退役军人码"
-		    }
-		    
-		}
-		,
-		{
-		    "path" : "pages/authentication/authentication",
-		    "style" :                                                                                    
-		    {
-		        "navigationBarTitleText": "退役军人职业教育码申请"
-		    }
-		    
-		},
-		{
-			"path": "pages/phoneLogin/phoneLogin",
-			"style": {
-				"navigationBarTitleText": "登录"
-			}
-		},
-		{
-		    "path" : "pages/bannerDetails/bannerDetails",
-		    "style" :                                                                                    
-		    {
-		        "navigationBarTitleText": "详情页"
-		    }
-		    
-		}
-		,{
-		    "path" : "pages/policyNews/policyNews",
-		    "style" :                                                                                    
-		    {
-		        "navigationBarTitleText": "政策资讯"
-				
-		    }
-		    
-		}
-		,{
-		    "path" : "pages/policyNewsDetails/policyNewsDetails",
-		    "style" :                                                                                    
-		    {
-		        "navigationBarTitleText": "文章详情"
-				
-		    }
-		    
-		}
-		,{
-		    "path" : "pages/newsDetails/newsDetails",
-		    "style" :                                                                                    
-		    {
-		        "navigationBarTitleText": "文章详情"
-		    }
-		    
-		},
-		{
-			"path": "pages/login/code",
-			"style": {
-				"navigationBarTitleText": "验证码"
-			}
-		},
-		{
-            "path" : "pages/mine/mine",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "个人中心",
-				"navigationStyle": "custom"
-            }
-            
-        },
-		{
-            "path" : "pages/center/center",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "中心",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-		,{
-		    "path" : "pages/privacyPolicy/privacyPolicy",
-		    "style" :                                                                                    
-		    {
-		        "navigationBarTitleText": "隐私政策"
-		    }
-		    
-		}
-		,{
-		    "path" : "pages/schools/schools",
-		    "style" :                                                                                    
-		    {
-		        "navigationBarTitleText": "学院列表"
-		    }
-		}
-		,{
-		    "path" : "pages/skillsTraining/skillsTraining",
-		    "style" :                                                                                    
-		    {
-		        "navigationBarTitleText": "技能培训"
-		    }
-		}
-		,{
-		    "path" : "pages/basicTraining/basicTraining",
-		    "style" :                                                                                    
-		    {
-		        "navigationBarTitleText": "适应性培训"
-		    }
-		}
-		,{
-		    "path" : "pages/basicTraining/myBasicTraining/myBasicTraining",
-		    "style" :                                                                                    
-		    {
-		        "navigationBarTitleText": "我的适应性培训"
-		    }
-		}
-		,{
-		    "path" : "pages/basicTraining/basicTrainingDetails/basicTrainingDetails",
-		    "style" :                                                                                    
-		    {
-		        "navigationBarTitleText": "在线上课"
-		    }
-		}
-		,{
-		    "path" : "pages/upgrade/upgrade",
-		    "style" :                                                                                    
-		    {
-		        "navigationBarTitleText": "学历提升"
-		    }
-		}
-		,{
-		    "path" : "pages/inbuild/inbuild",
-		    "style" :                                                                                    
-		    {
-		        "navigationBarTitleText": "建设中"
-		    }
-		}
-    ],
-	"globalStyle": {
-		"navigationBarTextStyle": "black",
-		"navigationBarTitleText": "uni-app",
-		"navigationBarBackgroundColor": "#F8F8F8",
-		"backgroundColor": "#F8F8F8"
-	},
-	"tabBar": {
-	    "color": "#909399",
-	    "selectedColor": "#303133",
-	    "borderStyle": "black",
-	    "backgroundColor": "#ffffff",
-	    "list": [{
-	        "pagePath": "pages/index/index",
-	        "iconPath": "static/icons/index-gray.png",
-	        "selectedIconPath": "static/icons/index.png",
-	        "text": "首页"
-	    }, {
-	        "pagePath": "pages/mycode/mycode",
-	        "iconPath": "static/icons/code-gray.png",
-	        "selectedIconPath": "static/icons/code.png",
-	        "text": "退役军人码"
-	    }, {
-	        "pagePath": "pages/mine/mine",
-	        "iconPath": "static/icons/mine-gray.png",
-	        "selectedIconPath": "static/icons/mine.png",
-	        "text": "我"
-	    }]
-	}
+  "easycom": {
+    "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
+  },
+  "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+    {
+      "path": "pages/index/index",
+      "style": {
+        "navigationStyle": "custom", // 隐藏系统导航栏
+        "navigationBarTitleText": "首页"
+      }
+    }, {
+      "path": "pages/mycode/mycode",
+      "style": {
+        "navigationBarTitleText": "退役军人码"
+      }
+
+    },
+    {
+      "path": "pages/authentication/authentication",
+      "style": {
+        "navigationBarTitleText": "退役军人职业教育码申请"
+      }
+
+    },
+    {
+      "path": "pages/phoneLogin/phoneLogin",
+      "style": {
+        "navigationStyle": "custom",
+        "navigationBarTitleText": "手机登录"
+      }
+    },
+    {
+      "path": "pages/bannerDetails/bannerDetails",
+      "style": {
+        "navigationBarTitleText": "详情页"
+      }
+
+    }, {
+      "path": "pages/policyNews/policyNews",
+      "style": {
+        "navigationBarTitleText": "政策资讯"
+
+      }
+
+    }, {
+      "path": "pages/policyNewsDetails/policyNewsDetails",
+      "style": {
+        "navigationBarTitleText": "文章详情"
+
+      }
+
+    }, {
+      "path": "pages/newsDetails/newsDetails",
+      "style": {
+        "navigationBarTitleText": "文章详情"
+      }
+
+    },
+    {
+      "path": "pages/login/code",
+      "style": {
+        "navigationBarTitleText": "验证码"
+      }
+    },
+    {
+      "path": "pages/mine/mine",
+      "style": {
+        "navigationBarTitleText": "个人中心",
+        "navigationStyle": "custom"
+      }
+
+    },
+    {
+      "path": "pages/center/center",
+      "style": {
+        "navigationBarTitleText": "中心",
+        "enablePullDownRefresh": false
+      }
+
+    }, {
+      "path": "pages/privacyPolicy/privacyPolicy",
+      "style": {
+        "navigationBarTitleText": "隐私政策"
+      }
+
+    }, {
+      "path": "pages/schools/schools",
+      "style": {
+        "navigationBarTitleText": "学院列表"
+      }
+    }, {
+      "path": "pages/skillsTraining/skillsTraining",
+      "style": {
+        "navigationBarTitleText": "技能培训"
+      }
+    }, {
+      "path": "pages/basicTraining/basicTraining",
+      "style": {
+        "navigationBarTitleText": "适应性培训"
+      }
+    }, {
+      "path": "pages/basicTraining/myBasicTraining/myBasicTraining",
+      "style": {
+        "navigationBarTitleText": "我的适应性培训"
+      }
+    }, {
+      "path": "pages/basicTraining/basicTrainingDetails/basicTrainingDetails",
+      "style": {
+        "navigationBarTitleText": "在线上课"
+      }
+    }, {
+      "path": "pages/upgrade/upgrade",
+      "style": {
+        "navigationBarTitleText": "学历提升"
+      }
+    }, {
+      "path": "pages/inbuild/inbuild",
+      "style": {
+        "navigationBarTitleText": "建设中"
+      }
+    }, {
+      "path": "pages/notification/notification",
+      "style": {
+        "navigationBarTitleText": "消息通知",
+        "enablePullDownRefresh": false,
+        "backgroundColor": "#2A322B",
+        "navigationBarBackgroundColor": "#2A322B"
+      }
+    }
+  ],
+  "globalStyle": {
+    "navigationBarTextStyle": "black",
+    "navigationBarTitleText": "uni-app",
+    "navigationBarBackgroundColor": "#F8F8F8",
+    "backgroundColor": "#F8F8F8"
+  },
+  "tabBar": {
+    "color": "#909399",
+    "selectedColor": "#303133",
+    "borderStyle": "black",
+    "backgroundColor": "#ffffff",
+    "list": [{
+      "pagePath": "pages/index/index",
+      "iconPath": "static/icons/index-gray.png",
+      "selectedIconPath": "static/icons/index.png",
+      "text": "首页"
+    }, {
+      "pagePath": "pages/mycode/mycode",
+      "iconPath": "static/icons/code-gray.png",
+      "selectedIconPath": "static/icons/code.png",
+      "text": "退役军人码"
+    }, {
+      "pagePath": "pages/mine/mine",
+      "iconPath": "static/icons/mine-gray.png",
+      "selectedIconPath": "static/icons/mine.png",
+      "text": "我"
+    }]
+  }
 }

h5_web/pages/index/index.scss

@@ -1,6 +1,75 @@
-page{background-color: #F6F6FF;}
-.message{position: absolute;right: 20rpx;top: 30rpx;z-index: 10000;}
-.notice{background-color: #fff;margin-top: 24rpx;padding: 10rpx 0;}
+page{background-color: #f2f2f2;}
+.index{
+  .index-header{
+    width: 100%;
+    height: 585rpx;
+    
+    &-container{
+      display: flex;
+      flex-wrap: wrap;
+      width: 100%;
+      height: 400rpx;
+      background-color: #2A322B;
+      border-bottom-right-radius: 100rpx;
+      border-bottom-left-radius: 100rpx;
+    }
+    
+    &-left{
+      width: 50%;
+      height: 440rpx;
+      background-image: url(../../static/svg/index-header-left-svg.svg);
+      background-repeat: round;
+      background-size: cover;
+    }
+    
+    &-right{
+      width: 50%;
+      height: 440rpx;
+      background-image: url(../../static/svg/index-header-right-svg.svg);
+      background-repeat: round;
+      background-size: cover;
+    }
+    
+    &-top{
+      position: absolute;
+      padding-top: 30rpx;
+      width: 100%;
+      display: flex;
+      flex-wrap: wrap;
+      padding-bottom: 61rpx;
+      line-height: 34px;
+      
+      .header-top-usearch{
+        margin-left: 30rpx !important;
+      }
+      
+      .header-top-notice{
+        margin: 0 30rpx 0 46rpx;
+        line-height: 34px;
+        
+        &-badge{
+          position: relative !important;
+          top: -10px !important;
+          right: 5px !important;
+        }
+      }
+      
+      .header-top-scan{
+        margin-right: 30rpx;
+        line-height: 34px;
+      }
+    }
+    
+    &-banner{
+      position: absolute;
+      width: 100%;
+      height: 440rpx;
+      margin-top: 140rpx;
+      padding: 0 20rpx;
+    }
+  }
+}
+
 .service{
 	.service-item{
 		width: 25%;

h5_web/pages/index/index.vue

@@ -1,31 +1,32 @@
 <template>
-	<view class="content">
-		<view class="message" @click="openPage('pages/inbuild/inbuild','消息中心')" >
-			<u-icon name="chat" color="#000000" size="48"></u-icon>
-			<u-badge size="mini" type="success" count="7"></u-badge>
-		</view>
-		<u-swiper
-			:list="bannerList"
-			name="bannerUrl"
-			border-radius="0"
-			mode="none"
-			height="427"
-			img-mode="scaleToFill"
-			@click="swiperClick"
-		></u-swiper>
-		<!-- <view class="notice u-flex u-p-l-35 u-p-r-40">
-			<u-image width="113rpx" height="83rpx" src="/static/img/tip.png"></u-image>
-			<view class="notice-wrap u-flex-1">
-				<u-notice-bar
-				@click="noticeClick"
-				mode="vertical" 
-				:list="noticeList" 
-				:more-icon="true" 
-				:volume-icon="false" 
-				bg-color="#fff" 
-				color="#373737"></u-notice-bar>
-			</view>
-		</view> -->
+	<view class="index content">
+    <view class="index-header">
+      <view class="index-header-container">
+        <view class="index-header-left"></view>
+        <view class="index-header-right"></view>
+        <view class="index-header-top">
+          <u-search placeholder="请输入您关键词" v-model="headerTopKeyword" :show-action="false" class="header-top-usearch"></u-search>
+          <view class="header-top-notice" @click="openPage('pages/notification/notification','消息通知')" >
+            <u-icon name="bell" color="#FFFFFF" size="48"></u-icon>
+            <u-badge size="mini" type="error" count="7" :absolute="false" class="header-top-notice-badge"></u-badge>
+          </view>
+          <view class="header-top-scan">
+            <u-icon name="scan" color="#FFFFFF" size="48"></u-icon>
+          </view>
+        </view>
+        <view class="index-header-banner">
+          <u-swiper
+          	:list="bannerList"
+          	name="bannerUrl"
+          	border-radius="0"
+          	mode="round"
+          	height="440"
+          	img-mode="scaleToFill"
+          	@click="swiperClick"
+          ></u-swiper>
+        </view>
+      </view>
+    </view>
 		<u-card class="service" :border="false" :foot-border-top="false" :full="true" border-radius="0">
 			<view class="service-head" slot="head">
 				<view class="card-head-title">综合服务</view>
@@ -97,6 +98,7 @@
 	export default {
 		data() {
 			return {
+        headerTopKeyword: '',
 				paginationConfig:{
 					  pageNo: 1,
 					  pageSize: 10
@@ -143,7 +145,6 @@
 							title:res.msg
 						})
 					}
-					
 					// console.log('newsList',JSON.parse(JSON.stringify(res.rows)));
 				})
 			},
@@ -151,17 +152,31 @@
 				this.$u.api.getIndexBannerList()
 				.then(res=>{
 					this.bannerList = res.data;
-					// console.log('bannerList',JSON.parse(JSON.stringify(res)));
+          this.bannerList = [];
+          this.bannerList.push(
+            {
+              bannerUrl: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
+              content: '<p>代码固定测试内容999998</p>',
+              id: "999998",
+              name: "代码固定测试999998"
+            }
+          );
+          this.bannerList.push(
+            {
+              bannerUrl: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
+              content: '<p>代码固定测试内容999999</p>',
+              id: "999999",
+              name: "代码固定测试999999"
+            }
+          );
+					console.log('bannerList',JSON.parse(JSON.stringify(res)));
 				})
 			},
 			// 轮播图点击
 			swiperClick (index) {
 				// console.log('swiperClick',index);
-				// console.log('bannerList',this.bannerList);
 				if(this.bannerList[index].jumpUrl){
-					// console.log(this.bannerList[index].jumpUrl);
 					let url = this.bannerList[index].jumpUrl.split('#')[1];
-					// console.log('url',url);
 					this.$u.route({
 						url: url,
 					});

h5_web/static/svg/index-header-left-svg.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="389px" height="368px" viewBox="0 0 389 368" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>椭圆形</title>
+    <defs>
+        <linearGradient x1="50%" y1="1.5625%" x2="50%" y2="88.9821427%" id="linearGradient-1">
+            <stop stop-color="#80AA92" offset="0%"></stop>
+            <stop stop-color="#2A322B" offset="100%"></stop>
+        </linearGradient>
+        <filter x="-19.1%" y="-19.1%" width="138.1%" height="138.1%" filterUnits="objectBoundingBox" id="filter-2">
+            <feGaussianBlur stdDeviation="24" in="SourceGraphic"></feGaussianBlur>
+        </filter>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.900000036">
+        <g id="编组-12" fill="url(#linearGradient-1)" transform="translate(-70.000000, -63.000000)">
+            <g id="编组-13" transform="translate(21.000000, 1.000000)">
+                <circle id="椭圆形" filter="url(#filter-2)" cx="188.733264" cy="188.733264" r="188.733264"></circle>
+            </g>
+        </g>
+    </g>
+</svg>

h5_web/static/svg/index-header-right-svg.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="498px" height="377px" viewBox="0 0 498 377" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>椭圆形备份</title>
+    <defs>
+        <linearGradient x1="50%" y1="1.5625%" x2="50%" y2="88.9821427%" id="linearGradient-1">
+            <stop stop-color="#2A322B" offset="0%"></stop>
+            <stop stop-color="#80AA92" offset="100%"></stop>
+        </linearGradient>
+        <filter x="-19.1%" y="-19.1%" width="138.1%" height="138.1%" filterUnits="objectBoundingBox" id="filter-2">
+            <feGaussianBlur stdDeviation="24" in="SourceGraphic"></feGaussianBlur>
+        </filter>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.900000036">
+        <g id="首页" transform="translate(-202.000000, 0.000000)" fill="url(#linearGradient-1)">
+            <g id="编组-12" transform="translate(-70.000000, -63.000000)">
+                <g id="编组-13" transform="translate(21.000000, 1.000000)">
+                    <circle id="椭圆形备份" filter="url(#filter-2)" cx="500.074268" cy="250.266736" r="188.733264"></circle>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>