img

src/App.vue

@@ -1,5 +1,6 @@
 <template>
-  <div id="app">
+  <div id="app">
+	<div class="bg"></div>
     <top-logo></top-logo>
     <nav-bar></nav-bar>
 	<div class="main-wrapper">
@@ -24,5 +25,15 @@ export default {
 .main-wrapper {
 	width: 1200px;
 	margin: 0 auto;
+}
+.bg {
+	position: absolute;
+	top: 0;
+	height: 300px;
+	min-width: 1920px;
+	margin: 0 auto;
+	background-image: url(assets/img/m1.png);
+	background-size: 100% 100%;
+	z-index: -1;
 }
 </style>

src/components/navBar/NavBar.vue

@@ -17,32 +17,32 @@ export default {
 			{
 				path: '/home',
 				title: '首页',
-				imgUrl: '',
+				imgUrl: require('@/assets/img/n1.png')
 			},
 			{
 				path: '/donation',
 				title: '捐赠平台',
-				imgUrl: '',
+				imgUrl: require('@/assets/img/n2.png'),
 			},
 			{
 				path: '/loveList',
 				title: '爱心榜',
-				imgUrl: '',
+				imgUrl: require('@/assets/img/n3.png'),
 			},
 			{
 				path: '/join',
 				title: '我要参与',
-				imgUrl: '',
+				imgUrl: require('@/assets/img/n4.png'),
 			},
 			{
 				path: '/about',
 				title: '关于我们',
-				imgUrl: '',
+				imgUrl: require('@/assets/img/n5.png'),
 			},
 			{
 				path: '/concat',
 				title: '联系我们',
-				imgUrl: '',
+				imgUrl: require('@/assets/img/n6.png'),
 			}
 		],
 		currentIndex: 0
@@ -95,7 +95,7 @@ export default {
     img {
       width: 20px;
       height: 20px;
-      background-color: #fff;
+      // background-color: #fff;
       margin-right: 6px;
     }
   }

src/components/topLogo/TopLogo.vue

@@ -1,10 +1,6 @@
 <template>
   <div class="top">
-    <div class="logo"><img src="" alt="" /></div>
-    <div class="name">
-      <div class="nameo">荆州市红十字会</div>
-      <div class="namet">Red Cross Society of China Jing Zhou Branch</div>
-    </div>
+    <div class="logo"><img src="../../assets/img/logo.png" alt="" /></div>
   </div>
 </template>
 
@@ -21,35 +17,12 @@ export default {};
   align-items: center;
   margin: 0 auto;
   .logo {
-    width: 106px;
-    height: 106px;
-    background-color: #bfa;
-    margin-right: 12px;
-  }
-  .name {
-    height: 178px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-	cursor:default;
-    .nameo {
-      // width: 369px;
-      height: 48px;
-      font-size: 49px;
-      letter-spacing: 6px;
-      font-family: FZCuHeiSongS-B-GB;
-      font-weight: 400;
-      color: #e40012;
-      margin-bottom: 9px;
-    }
-    .namet {
-      // width: 370px;
-      height: 16px;
-      font-size: 17px;
-      font-family: PingFang SC;
-      font-weight: bold;
-      color: #101010;
-    }
+    width: 489px;
+    height: 104px;
+	img {
+		width: 489px;
+		height: 104px;
+	}
   }
 }
 </style>

src/views/Home.vue

@@ -23,33 +23,9 @@
 				<div class="join">
 					<item-title title="善行参与" :topath="'/donation'"></item-title>
 					<div class="join-main">
-						<div class="join-item" @click="navTo('/donation/contribution')">
-							<div class="logo"><img src="" /></div>
-							<div class="title">爱心捐款</div>
-						</div>
-						<div class="join-item" @click="navTo('/donation/organDonation')">
-							<div class="logo"><img src="" /></div>
-							<div class="title">器官捐献</div>
-						</div>
-						<div class="join-item" @click="navTo('/donation/Hpc')">
-							<div class="logo"><img src="" /></div>
-							<div class="title">造血干细胞捐献</div>
-						</div>
-						<div class="join-item" @click="navTo('/join/rescue')">
-							<div class="logo"><img src="" /></div>
-							<div class="title">救护员登记</div>
-						</div>
-						<div class="join-item" @click="navTo('/join/member')">
-							<div class="logo"><img src="" /></div>
-							<div class="title">个人会员登记</div>
-						</div>
-						<div class="join-item" @click="navTo('/join/volunteer')">
-							<div class="logo"><img src="" /></div>
-							<div class="title">志愿者登记</div>
-						</div>
-						<div class="join-item" @click="navTo('/join/train')">
-							<div class="logo"><img src="" /></div>
-							<div class="title">普及培训报名</div>
+						<div class="join-item" v-for="item in miniNavList" @click="navTo(item.path)" :key="item.title">
+							<div class="logo hand"><img :src="item.image" /></div>
+							<div class="title hand">{{item.title}}</div>
 						</div>
 					</div>
 				</div>
@@ -64,7 +40,7 @@
 				</div>
 			</div>
 		</div>
-		<img src="" class="show-live" />
+		<img src="../assets/img/m2.png" class="show-live" />
 		<div class="show-pic">
 			<item-title title="图片展示" isShow="2"></item-title>
 			<div class="imgs-wrapper">
@@ -76,7 +52,7 @@
 		<div class="friends">
 			<item-title title="友情链接" isShow="2"></item-title>
 			<div class="friend-list-wrapper">
-				<div class="friend-item" v-for="item in friendList" >
+				<div class="friend-item" v-for="item in friendList" :key="item.id">
 					<a :href="item.url" class="item-a">{{item.name}}</a>
 				</div>
 			</div>
@@ -92,6 +68,43 @@ export default {
 	},
 	data() {
 		return {
+			miniNavList: [
+				{
+					path: '/donation/contribution',
+					title: '爱心捐款',
+					image: require('@/assets/img/i1.png')
+				},
+				{
+					path: '/donation/organDonation',
+					title: '器官捐献',
+					image: require('@/assets/img/i2.png')
+				},
+				{
+					path: '/donation/Hpc',
+					title: '造血干细胞捐献',
+					image: require('@/assets/img/i3.png')
+				},
+				{
+					path: '/join/rescue',
+					title: '救护员登记',
+					image: require('@/assets/img/i4.png')
+				},
+				{
+					path: '/join/member',
+					title: '个人会员登记',
+					image: require('@/assets/img/i5.png')
+				},
+				{
+					path: '/join/volunteer',
+					title: '志愿者登记',
+					image: require('@/assets/img/i6.png')
+				},
+				{
+					path: '/join/train',
+					title: '普及培训报名',
+					image: require('@/assets/img/i7.png')
+				},
+			],
 			swiperList: ['https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg', 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'],
 			jxList: [
 				{
@@ -279,7 +292,6 @@ export default {
 						img {
 							width: 50px;
 							height: 50px;
-							background-color: #bfa;
 						}
 					}
 					.title {
@@ -318,7 +330,7 @@ export default {
 	width: 1200px;
 	height: 160px;
 	margin: 24px auto;
-	background-color: #cbb385;
+	// background-color: #cbb385;
 }
 .show-pic {
 	width: 1200px;

src/views/homeChild/ItemTitle.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="item-title">
-    <div class="title hand">{{title}}</div>
+    <div class="title moren">{{title}}</div>
     <div class="more hand" v-if="isShow === '1'" @click="loadMore" >【查看更多】</div>
   </div>
 </template>

src/views/popularScience/List.vue

@@ -3,7 +3,7 @@
 		<div class="wrapper">
 			<div class="tip"  v-for="item in tipList" :key="item.id" @click="tipClick(item.id)">
 				<img :src="item.image" />
-				<div class="info">
+				<div class="info hand">
 					<div class="title clamp">{{item.title}}</div>
 					<div class="content clamp">{{item.content}}</div>
 					<div class="num">{{item.num}}人已观看</div>