partnerApp/pages/my/my.vue

<template>
	<view>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		
		<!-- 头部信息Start -->
		<view class="prodet-intro d-flex" v-show="prodetIntroShow">
			<view class="icon iconfont icon-notice d-flex a-center j-center"></view>
			<view class="u-f1">
				<p class="animate">掌柜爆款百万医疗！众安尊享e生2020版，最高300万一般医疗保障，100种重疾+121种罕见病医疗最高600万保障，四大增值服务，一年低至136元起！点击了解>></p>
			</view>
			<view class="icon iconfont icon-cuo d-flex a-center j-center" @tap="controlProdetIntro"></view>
		</view>
		<view class="home-info d-flex">
			<view class="mystatus d-flex a-center j-center">{{mystatusText}}</view>
			<image :src="avatar" mode="aspectFill" @tap="popupShow = true"></image>
			<view class="person-info" @tap="openDetail">
				<h3>{{userInfo.sysUser.name}}</h3>
				<p>你身边最贴心、最权威的保险咨询专家【个性化签名】</p>
			</view>
		</view>
		<!-- 头部信息End -->
		<!-- 我的订单Start -->
		<scroll-view scroll-x class="my-orders">
			<view :style="'width: calc(((690upx)/4)*'+orderTypeList.length+')'">
				<uni-grid :column="orderTypeList.length" :show-border="false" :square="false" @change="openOrder" style="width: 100%;height:100%">
					<uni-grid-item style="width: calc((690upx)/4)" class="d-flex a-center j-center"  v-for="(item ,index) in orderTypeList" :index="index" :key="index">
						<view style="width: calc((690upx)/4)" class="grid-item-box d-flex a-center j-center flex-column">
							<view class="icon iconfont" :class="item.icon" :style="'color:'+item.iconColor"></view>
							<text class="text">{{item.text}}</text>
							<view v-if="item.badge" class="grid-dot" v-show="item.badge>0">
								<uni-badge :text="(item.badge>99)?'99+':item.badge" :type="item.type" size="small" :inverted="false" />
							</view>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
		</scroll-view>
		<!-- 我的订单End -->
		
		<!-- 广告轮播 -->
		<view class="swiper-view">
			<swiper class="swiper" indicator-dots="true" autoplay="true" circular="true" indicator-active-color="#ffffff" :indicator-dots="swiperList.length>1">
				<swiper-item v-for="swiper in swiperList" :key="swiper.sid">
					<image mode="aspectFill" :src="swiper.img" lazy-load></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 广告End -->
		
		<!-- 我的钱包Start -->
		<view class="my-wallet">
			<view class="header d-flex a-center j-sb">
				<view>我的钱包</view>
				<span @tap="toWallet" style="font-size: 24upx;color: #333;">更多</span>
			</view>
			<view class="wallet-body d-flex">
				<view class="flex-1" @tap="toBillDetails(1)">
					<view class="d-flex a-center j-center">预收账户</view>
					<view style="color: #33AAEE;" class="d-flex a-center j-center">￥{{advanceMoney}}</view>
				</view>
				<view class="flex-1" @tap="toBillDetails(2)">
					<view class="d-flex a-center j-center">可提现余额</view>
					<view style="color: #33AAEE;" class="d-flex a-center j-center">￥{{withdrawal}}</view>
				</view>
				<view class="flex-1" @tap="toBillDetails(3)">
					<view class="d-flex a-center j-center">推广费</view>
					<view style="color: #DA4452;" class="d-flex a-center j-center">￥{{extendMoney}}</view>
				</view>
			</view>
		</view>
		<!-- 我的钱包End -->
		
		<!-- 我的工具Start -->
		<view class="my-tools">
			<view class="header d-flex a-center j-sb">
				<view>我的工具</view>
			</view>
			<view class="order-body d-flex a-center">
				<!-- 因为swiper特性的关系，请指定swiper的高度 ，swiper的高度并不会被内容撑开-->
				<swiper style="height:calc(324upx)" class="swiper" :indicator-dots="(toolsListLength!=1)?true:false">
					<swiper-item class="swiper" v-for="(count,cindex) of  toolsListLength" :key="count">
						<uni-grid :column="4" :show-border="false" :square="false" :highlight="false" @change="toTools($event,'toolsList')" >
							<uni-grid-item class="d-flex a-center j-center" v-show="(index>=(cindex)*8) && (index<(cindex+1)*8)"  v-for="(item ,index) in toolsList" :index="index" :key="item.text" >
								<view class="grid-item-box d-flex a-center j-center flex-column">
									<view class="icon iconfont" :class="item.icon" :style="'color:'+item.iconColor" ></view>
									<text class="text">{{item.text}}</text>
								</view>
							</uni-grid-item>
						</uni-grid>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!-- 我的工具End -->
		
		<!-- 售后管理Start -->
		<view class="my-tools">
			<view class="header d-flex a-center j-sb">
				<view>售后管理</view>
			</view>
			<view class="order-body d-flex a-center">
				<!-- 因为swiper特性的关系，请指定swiper的高度 ，swiper的高度并不会被内容撑开-->
				<swiper style="height:calc(162upx)" class="swiper" :indicator-dots="(serviceListLength!=1)?true:false">
					<swiper-item class="swiper" v-for="(count,cindex) of  serviceListLength" :key="count">
						<uni-grid :column="4" :show-border="false" :square="false" :highlight="false" @change="toTools($event,'serviceList')" >
							<uni-grid-item class="d-flex a-center j-center" v-show="(index>=(cindex)*8) && (index<(cindex+1)*8)"  v-for="(item ,index) in serviceList" :index="index" :key="item.text" >
								<view class="grid-item-box d-flex a-center j-center flex-column">
									<view class="icon iconfont" :class="item.icon" :style="'color:'+item.iconColor" ></view>
									<text class="text">{{item.text}}</text>
								</view>
							</uni-grid-item>
						</uni-grid>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!-- 售后管理End -->
		
		<!-- 我的关于Start -->
		<view class="my-tools">
			<view class="header d-flex a-center j-sb">
				<view>关于掌柜</view>
			</view>
			<view class="order-body d-flex a-center">
				<!-- 因为swiper特性的关系，请指定swiper的高度 ，swiper的高度并不会被内容撑开-->
				<swiper style="height:calc(162upx)" class="swiper" :indicator-dots="(aboutListLength!=1)?true:false">
					<swiper-item class="swiper" v-for="(count,cindex) of  aboutListLength" :key="count">
						<uni-grid :column="4" :show-border="false" :square="false" :highlight="false" @change="toTools($event,'aboutList')" >
							<uni-grid-item class="d-flex a-center j-center" v-show="(index>=(cindex)*8) && (index<(cindex+1)*8)"  v-for="(item ,index) in aboutList" :index="index" :key="item.text" >
								<view class="grid-item-box d-flex a-center j-center flex-column">
									<view class="icon iconfont" :class="item.icon" :style="'color:'+item.iconColor" ></view>
									<text class="text">{{item.text}}</text>
								</view>
							</uni-grid-item>
						</uni-grid>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!-- 我的关于End -->
		
		<!-- 菜单Start -->
		<block v-for="(item,index) in menusList" :key="index">
			<my-list-item :item="item" :index="index"></my-list-item>
		</block>
		<!-- 菜单End -->
		
		<!-- 头像预览Start -->
		<z-popup v-model="popupShow" :hideOnBlur="false" type="center" width="600upx" radius="12upx">
			<view class="popup_title">
				<text @click="popupShow = false">取消</text>
				<view>头像预览</view>
				<text @click="changeAvatar">更换</text>
			</view>
			<view class="popup_content">
				<view class="body d-flex a-center j-center">
					<image :src="avatar" mode="aspectFill" @longtap="saveAvatar"></image>
				</view>
			</view>
		</z-popup>

	</view>
</template>

<script>
	import {mapState,mapMutations} from "vuex"
	import zPopup from '@/components/common/z-popup.vue'
	import { pathToBase64,base64ToPath } from '@/common/image-tools-base64.js';
	import myListItem from "@/components/modules/my/my-list-item.vue";
	export default {
		components:{
			zPopup,
			myListItem
		},
		data() {
			return {
				popupShow:false, //头像是否展示
				mystatusText:"未认证",
				prodetIntroShow:true,	//显示滚动公告
				advanceMoney:'0',// 预收账户金额
				withdrawal:'0',//可提现金额
				extendMoney:'0',//推广费
				
				//轮播
				swiperList:[
					{sid:0,src:'自定义src0',img:'/static/image/my/ads/ban1.png'}
				],
				
				orderTypeList: [
					{ icon: 'icon-jixurenwu',orderstatus:0,text: '待继续',badge: '0',type: "primary",orderStage:0,iconColor:'#0696FF'},
					{ icon: 'icon-hebaozhong',orderstatus:1,text: '核保中',badge: '0',type: "success",orderStage:1,iconColor:'#FFA22A'},
					{ icon: 'icon-daijiaofei',orderstatus:2,text: '已核保',badge: '0',type: "warning",orderStage:2,iconColor:'#0696FF'},
					{ icon: 'icon-querenzhifu',orderstatus:5,text: '待缴费',badge: '0',type: "error",orderStage:3,iconColor:'#DD525E'},
					{ icon: 'icon-querenzhifu',orderstatus:6,text: '已缴费',badge: '0',type: "success",orderStage:4,iconColor:'#FFA22A'},
					{ icon: 'icon-peisong',orderstatus:7,text: '已承保',badge: '0',type: "error",orderStage:5,iconColor:'#0696FF'},
					{ icon: 'icon-kehuguanli',orderstatus:3,text: '待修改',badge: '0',type: "warning",orderStage:6,iconColor:'#0696FF'}
				],
				toolsList: [
					{ icon: 'icon-shandian',text: '闪电增员',url:'/pages/tools/addStaff/addStaff',iconColor:'#0696FF'},
					{ icon: 'icon-tuanduiguanli',text: '团队管理',url:'/pages/tools/team/team',iconColor:'#FFA22A'},
					{ icon: 'icon-kehuguanli',text: '客户管理',url:'/pages/tools/customer/customer',iconColor:'#0696FF'},
					{ icon: 'icon-yejiguanli',text: '业绩管理',url:'/pages/tools/achievement/achievement',iconColor:'#0696FF'},
					{ icon: 'icon-20xiaoshifuwurexian',text: '报案服务',url:'/pages/tools/insuranceClaims/insuranceClaims',iconColor:'#DD525E'},
					{ icon: 'icon-qianbao',text: '钱包',url:'/pages/wallet/wallet',iconColor:'#FFA22A'},
					{ icon: 'icon-baodan',text: '保单',url:'/pages/tools/policy',iconColor:'#0696FF'},
					{ icon: 'icon-jisuanqi',text: '计算器',url:'/pages/tools/calculator/calculator',iconColor:'#0696FF'},
					{ icon: 'icon-xiaomishu',text: '掌柜秘书',url:'/pages/tools/messageReminder/messageReminder',iconColor:'#DD525E'},
					{ icon: 'icon-xiaomishu',text: '海报管理',url:'/pages/tools/poster/poster',iconColor:'#0696FF'},
					{ icon: 'icon-xiaomishu',text: '优惠劵',url:'/pages/tools/coupon/coupon',iconColor:'#0696FF'}
				],
				aboutList: [
					{ icon: 'icon-yejiguanli',text: '常见问题',url:'/pages/set/question',iconColor:'#0696FF'},
					// { icon: 'icon-baodan',text: '意见反馈',url:'/pages/set/suggest',iconColor:'#DD525E'},
					{ icon: 'icon-baodan',text: '意见反馈',url:'',iconColor:'#DD525E'},
					{ icon: 'icon-yongjinguanli',text: '联系客服',tel:'4006333016',iconColor:'#FFA22A'},
					{ icon: 'icon-qianbao',text: '关于我们',url:'/pages/set/about',iconColor:'#0696FF'}
				],
				serviceList:[
					{ icon: 'icon-yejiguanli',text: '发票申请',popup:'请加微信15513511113,联系客服操作',iconColor:'#0696FF'},
					{ icon: 'icon-yongjinguanli',text: '保单批改',popup:'请加微信15513511113,联系客服操作',iconColor:'#FFA22A'},
					{ icon: 'icon-qianbao',text: '申请退保',popup:'请加微信15513511113,联系客服操作',iconColor:'#0696FF'},
					{ icon: 'icon-qianbao',text: '自助理赔',popup:'请加微信15513511113,联系客服操作',iconColor:'#0696FF'}
				],
				menusList:[
					{ icon:"shangcheng",name:"掌柜商场",clicktype:"nothing",url:"",auth:true },
					{ icon:"chexiandingdan",name:"车险之家",clicktype:"navigateTo",url:"/pages/carInsure/entry",auth:true }
				]
			}
		},
		onNavigationBarButtonTap(e) {
			if(e.index == 0){
				uni.navigateTo({
					url:"/pages/set/set"
				})
			}
		},
		computed:{
			...mapState(['avatar','userStatus',"userInfo","userCheckInfo"]),
			toolsListLength(){
				return Math.ceil(this.toolsList.length/8);
			},
			aboutListLength(){
				return Math.ceil(this.aboutList.length/4);
			},
			serviceListLength(){
				return Math.ceil(this.serviceList.length/4);
			}
		},
		
		async onload() {
			if(this.userStatus == '1'){
				this.mystatusText="未认证";
			}else if(this.userStatus == '5'){
				this.mystatusText="已认证";
			}else{
				this.mystatusText="认证中";
			}
			
			await this.getAdvanceMoney();//预收金额
			await this.getPayAccount();//可提现余额
			await this.getExtendMoney();//推广费
			await this.getOrderNum();//获取订单数量
			
		},
		methods: {
			...mapMutations(['setUserModules','setOrderType','setOrderStage']),
			//获得订单数量
			async getOrderNum(){
				console.log(this.userInfo)
				var data= {
					"columnFilters":{
						"orderstatus":{"name":"orderstatus","value":""},
						"userid":{"name":"userid","value":this.userInfo.sysUser.id},
						"quotestatus":{"name":"quotestatus","value":'1'}
					},
					"pageNum":1,
					"pageSize":1
				};
				for(let i=0;i<this.orderTypeList.length;i++){
					data.columnFilters.orderstatus.value = this.orderTypeList[i].orderstatus;
					let res = await this.$http.post('/insOrder/findPage',data,{load:false});
					// 请求失败处理
					if (res.code == 200){
						this.orderTypeList[i].badge = res.data.totalSize;
					}else{
						this.orderTypeList[i].badge ='0';
					}
				}
			},
			
			// 预收账户金额查询
			async getAdvanceMoney() {
				let res = await this.$http.get('/insPayApply/advanceAccount?userid=' + this.userInfo.sysUser.id,{},{load:false});
				// 请求失败处理
				if (res.code == 200){
					this.advanceMoney = res.data;
				}else{
					this.advanceMoney ='0';
				}
			},
			
			// 可提现余额查询
			async getPayAccount() {
				let res = await this.$http.get('/insPayApply/payAccount?userid=' + this.userInfo.sysUser.id,{},{load:false});
				// 请求失败处理
				if (res.code == 200){
					this.withdrawal = res.data.accountBalance;
				}else{
					this.withdrawal ='0';
				}
			},
			
			//推广费
			async getExtendMoney() {
				let res = await this.$http.get('/insPayApply/extendAccount?userid=' + this.userInfo.sysUser.id,{},{load:false});
				// 请求失败处理
				if (res.code == 200){
					this.extendMoney = res.data.accountBalance;
				}else{
					this.extendMoney ='0';
				}
			},
			
			// 广告滚动
			controlProdetIntro(){
				this.prodetIntroShow = !this.prodetIntroShow;
			},
		
			//保存头像
			saveAvatar(){
				var that = this;
				uni.saveImageToPhotosAlbum({ //保存图片
					filePath: that.avatar,
					success: (res) => {
						uni.showToast({
							title: '保存成功',
						})
					}
				})
			},
			
			//修改头像
			async changeAvatar(){
				let [err,chooseImageRes] =await uni.chooseImage({
					count:1,
					sizeType:['compressed']
				});
				if (!chooseImageRes) return;
				const isLt2M = chooseImageRes.tempFiles[0].size / 1024 / 1024 < 2;
				if (!isLt2M) {
					return  uni.showToast({ title:'上传图片大小不能超过 2MB!' , icon:"none" });
				}
				// 上传
				pathToBase64(chooseImageRes.tempFilePaths[0])
					.then(async base64 => {
						var paramImg = {
							"imgList": [base64],
							"imgtype": "avatar",
							"taskid": this.userInfo.sysUser.id
						}
						let res =await this.$http.post('/insTaskImage/save',paramImg);
						if(res.code == 200){
							this.setUserModules({title:'avatar',data:base64})
							uni.showToast({ title: '更换头像成功!',icon:'none',duration:2000 });
						}else{
							uni.showToast({ title: '更换头像失败!',icon:'none',duration:2000 });
						}
					})
			},
			
			//去工具页面
			toTools(e,listName){
				if(!!this[listName][e.detail.index].url && (this[listName][e.detail.index].url =='/pages/wallet/wallet')){
					if((!!this.userInfo.esmUserInternal) && (!!this.userInfo.esmUserInternal.accountno)){
						this.navigate({
							url:this[listName][e.detail.index].url
						},"navigateTo",true)
					}else{
						this.navigate({
							url:'/pages/wallet/bindBank',
							complete:() => {
								setTimeout(() => {
									uni.showToast({ title: '请先绑定银行卡',duration:3000,icon:"none"});
								}, 500);
								
							}
						},"navigateTo",true)
					}
				}else if(this[listName][e.detail.index].url){
					this.navigate({url:this[listName][e.detail.index].url},"navigateTo",true)
				}else if(this[listName][e.detail.index].tel){
					uni.makePhoneCall({
						phoneNumber: this[listName][e.detail.index].tel,
					})
				}else if(this[listName][e.detail.index].popup){
					uni.showModal({
						showCancel:false,
					    content: this[listName][e.detail.index].popup,
					});
				}else{
					uni.showToast({
						title:this[listName][e.detail.index].text+'更新中...',
						icon: 'none'
					})
				}
				
			},
			
			// 去账单明细
			toBillDetails(type){
				this.navigate({url:"/pages/wallet/billDetails"+type},"navigateTo",true)
			},
			// 去账单明细
			toWallet(type){
				this.navigate({url:"/pages/wallet/wallet"},"navigateTo",true)
			},
			//跳转个人信息页面
			openDetail(){
				this.navigate({url:"/pages/user/userInfo"},"navigateTo",false)
			},
			//跳转订单页面
			openOrder(e) {
				let index = e.detail.index;
				this.setOrderType(0);
				this.setOrderStage(this.orderTypeList[index].orderStage);
				this.navigate({url:"/pages/orders/orders"},"switchTab",true)
			}
		}
	}
</script>

<style lang="scss" scoped>
@import '@/style/mixin.scss';
page{
	background-color: #FEFEFE;
}
/* 产品介绍Start */
.prodet-intro{
	width: 100%;
	height: 70upx;
	background-color: #333;
	color: #3ae;
	white-space: nowrap;
	border-top: 1upx solid #666;
	border-bottom: 1upx solid #666;
	box-sizing: border-box;
}
.prodet-intro>view:nth-of-type(1){
	width: 60upx;
	height: 100%;
	flex-shrink: 1;
	padding-left: 20upx;
	font-size: 36upx;
}
.prodet-intro>view:nth-of-type(2){
	overflow: hidden;
	line-height: 70upx;
	font-size: 24upx;
}
.prodet-intro>view:nth-of-type(3){
	width: 60upx;
	padding-right: 20upx;
	flex-shrink: 1;
	height: 100%;
	font-size: 36upx;
}
.animate {
	padding-left: 40rpx;
	display: inline-block;
	white-space: nowrap;
	animation: 20s wordsLoop linear infinite normal;
}
@keyframes wordsLoop {
	0% {
		transform: translateX(750rpx);
		-webkit-transform: translateX(750rpx);
	}
	100% {
		transform: translateX(-100%);
		-webkit-transform: translateX(-100%);
	}
}
/* 产品介绍End */

/* 头像预览Start */
.popup_box {
	width: 100%;
}
.popup_title {
	display: flex;
	justify-content: space-between;
	height: 88upx;
	line-height: 88upx;
	border-bottom: 2upx solid #ebebeb;
	padding: 0 20upx;
	background-color: #FFF;
}
.popup_title view {
	font-size: 32upx;
	display: flex;
	align-items:center;
}
.popup_title text {
	width: 80upx;
	flex-shrink: 0;
	text-align: center;
}
.popup_title text {
	font-size: 28upx;
	color: #999;
}
.popup_title text:last-child {
	color: $themeColor;
}
.popup_content {
	padding: 40rpx 30rpx;
	background-color: #FFFFFF;
	text-align: center;
}
.popup_content .body image{
	width: 300upx;
	height:300upx;
}
/* 头像预览End */	

/* 个人信息Start */
.home-info{
	height:243upx;
	padding-top: 25upx;
	/* background: #343740; */
	background: url(/static/image/my/infoBg.jpg) no-repeat 50%;
	background-size: 100% 100%;
	color: #FFFFFF;
	position: relative;
}
.home-info .mystatus{
	position: absolute;
	top: 100upx;
	left: 45upx;
	border-radius: 20upx;
	z-index: 10;
	font-size: 20upx;
	height: 35upx;
	width: 100upx;
	background-color: #007AFF;
}
.home-info>image{
	width: 110upx;
	height: 110upx;
	margin: 0upx 20upx 0upx 40upx;
	border-radius: 50%;
	flex-shrink: 1;
}
.home-info .person-info{
	display: inline-block;
	width: 70%;
	vertical-align: top;
	padding-top: 5upx;
	color: #fff;
}
.home-info .person-info>p{
	font-size: 24upx;
	line-height: 30upx;
	opacity: .4;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* 个人信息End */

/* 我的订单Start */
.my-orders,.wallet-body{
	position: relative;
	width: 690upx;
	height: 180upx;
	margin: -80upx 30upx 0upx;
	background: #FFFFFF;
	border-radius: 20upx;
	box-shadow: 0upx 0upx 10upx #efeff4;
	overflow: hidden;
}
.my-orders .grid-item-box {
	padding: 20upx 0;
}
.my-orders .grid-item-box .icon{
	width: 60upx;
	height: 70upx;
	font-size: 55upx;
	color: #1396DB;
	margin-bottom: 15upx;
}
.my-orders .grid-item-box .text{
	font-size: 24upx;
	color: #666666;
}
/* 我的订单End */

/* 我的钱包Start */
.wallet-body{
	margin-top: 0upx;
	padding: 20upx 20upx 0;
	box-sizing: border-box;
}
.wallet-body>view{
	flex-shrink: 1;
}
.wallet-body>view>view{
	line-height: 65upx;
}
.wallet-body>view>view:nth-of-type(1){
	font-size: 24upx;
}
.wallet-body>view>view:nth-of-type(2){
	font-size: 28upx;
	font-weight: bold;
}
/* 我的钱包End */

/* 小的分项标题Start */
.header{
	margin-top: 30upx;
	height: 50upx;
	padding: 0upx 50upx;
	font-size: 28upx;
	line-height: 50upx;
	margin-bottom: 10upx;
}
.header>view:nth-of-type(1){
	font-weight: bold;
}
.header>view:nth-of-type(2){
	font-size: 24upx;
	color: #BBBBBB;
}
.header>view:nth-of-type(2) .icon{
	font-size:20upx;
}
/* 小的分项标题End */

.order-body{
	margin: 15upx 30upx;
	box-shadow: 0upx 0upx 10upx #efeff4;
	border-radius: 20upx;
}
.grid-item-box {
	flex: 1;
	padding: 20upx 0;
}
.grid-item-box .icon{
	width: 60upx;
	height: 70upx;
	font-size: 50upx;
	color: #1396DB;
}
.grid-item-box .text{
	font-size: 24upx;
	color: #666666;
}
.grid-dot {
	position: absolute;
	top: 20upx;
	right: 25upx;
	background-color: none;
}
.swiper {
	width: 100%;
}

.swiper-view .keep-out {
	width: 100%;
	height: 30upx;
	border-radius: 100% 100% 0 0;
	margin-top: -15upx;
	position: absolute;
}
.swiper-view .swiper {
	overflow: hidden;
	padding: 30upx 20upx 0;
	box-sizing: border-box;
	width: 100%;
	height: 200upx;
}
.swiper-view .swiper image {
	width: 100%;
	height: 200upx;
}	
	
</style>