first commit

历届学生/苏琪/项目练习/newApp/appFont/pages/city/city.vue

@@ -0,0 +1,181 @@
+<template>
+	<div class="book">
+	  <view class="uni-margin-wrap">
+	  	<swiper class="swiper" :indicator-dots="indicatorDots" 
+		        :autoplay="autoplay" :interval="interval" :duration="duration">
+	  		<swiper-item v-for="(item,index) in BannerList" :key="index">
+	  			<a :href="item.href">
+					<image :src="item.imgUrl" mode="widthFix"/>
+				</a>
+	  		</swiper-item>
+	  	</swiper>
+	  </view>
+	  <div class="main" v-for="(item,index) in BookList" :key="index">
+		  
+		  <view class="item-list" v-if="item.hasOwnProperty('top')">
+		  	<view class="item-title">
+		  		{{ item.title }}
+		  	</view>
+		  		<div class="item-content" @click="enterInfo(item.top.id)">
+		  			<image class="hot" mode="scaleToFill" :src="item.top.imgUrl" />
+		  			<div class="content-right">
+		  				<h3 class="content-title">{{ item.top.title }}</h3>
+		  				<p class="content-desc">{{ item.top.desc }}</p>
+		  				<div class="content-class"></div>
+		  			</div>
+		  		</div>
+		  		<uni-list class="book-list">
+		  			<uni-list-item v-for="(t, inx) in item.list" :title="t.title" 
+									:key="inx" @click="enterInfo(t.id)"/>
+		  		</uni-list>
+		  </view>
+		  
+		  <view class="item-list" v-else-if="item.title == '编辑力荐' ">
+		  	<view class="item-title">
+		  		{{ item.title }}
+		  	</view>
+			<div class="item-content" v-for="(o,p) in item.list" :key="p"
+				 @click="enterInfo(o.id)">
+				<image class="hot" mode="scaleToFill" :src="o.imgUrl" />
+				<div class="content-right">
+					<h3 class="content-title">{{ o.title }}</h3>
+					<p class="content-desc">{{ o.desc }}</p>
+					<div class="content-class"></div>
+				</div>
+			</div>
+		  </view>
+		  
+		  <view class="item-list" v-else>
+		  	<view class="item-title">
+		  		{{ item.title  }}
+		  	</view>
+		  		<div class="item-content">
+		  			<ul>
+		  				<li v-for="(a,y) in item.list" :key="y"  @click="enterInfo(a.id)">
+		  					<img mode="scaleToFill" :src="a.imgUrl"/>
+		  					<p>{{ a.title }}</p>
+		  				</li>
+		  			</ul>
+		  		</div>
+		  </view>
+		  
+		  
+	  </div>
+	  
+	  
+	</div>
+</template>
+
+<script>
+	import { mapMutations } from "vuex";
+	import uniList from '@/components/uni-list/uni-list.vue'
+	import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
+	export default {
+		data() {
+			return {
+				BannerList: [],
+				BookList: [],
+				indicatorDots: true,
+				autoplay: true,
+				interval: 3000,
+				duration: 500
+			}
+		},
+		created() {
+			this.getIndexData()
+		}, 
+		onLoad() {
+		},
+		methods: {
+			...mapMutations([
+				'SET_HOTLIST'
+			]),
+			async getIndexData() {
+				let indexData = await this.$http.getIndexData({ data: {}, header:{} });
+				this.SET_HOTLIST(indexData.booklist[0])
+				this.BannerList = indexData.banner
+				this.BookList = indexData.booklist
+			},
+			enterInfo(id) {
+				uni.navigateTo({
+					url: `/pages/bookinfo/bookinfo?id=${id}`
+				});
+			}
+		},
+		components: {
+			uniList,
+			uniListItem
+		},
+	}
+</script>
+
+<style lang="less">
+	.book {
+		
+		swiper-item {
+			image {
+			  height: 171px !important;
+			  width: 100%;
+			}
+		}
+		
+		.item-list {
+			padding: 20rpx;
+			.item-title {
+				border-left: 10upx solid #e95e56;
+				padding-left: 20upx;
+				font-size: 32upx;
+			}
+			.book-list {
+				margin-top: 5px;
+			}
+			.item-content {
+				ul {
+					display: flex;
+					justify-content: flex-start;
+					width: 100%;
+					flex-flow: wrap;
+					li {
+						width: 30%;
+						margin-right: 5%;
+						margin-bottom: 5%;
+						img {
+						  width: 100%;
+						  height: 320upx;
+						}
+						p {
+							
+						}
+						&:nth-child(3n) {
+							margin-right: 0 !important;
+						}
+					}
+				}
+				display: flex;
+				flex-direction: row;
+				margin-top: 10px;
+				.hot {
+					width: 114px;
+					height: 85px;
+				}
+				.content-right {
+					margin-left: 17px;
+					.content-title {
+						font-size: 17px;
+						color: #333;
+					}
+					.content-desc {
+						font-size: 13px;
+						color: #888;
+						line-height: 20px;
+					}
+					.content-class {
+						
+					}
+				}
+			}
+		}
+		
+		
+	}
+</style>