安居客WEEX demo
2018-04-15 本文已影响55人
曾柏超
屏幕快照 2018-04-15 下午9.37.38.png
===========
index.vue
<template>
<scroller>
<div class="rootview" >
<div class="navication" style="flex-direction: row ;height: 100px ; background-color: rgb(115,178,7)" >
<div style="flex: 0.3 ; justify-content:center ;align-items: center">
<text style="font-size: 32px ;color: white">上海→</text>
</div>
<!--//搜索框-->
<div style="flex: 1 ; justify-content:center ">
<div style="flex-direction: row ; height: 70px; background-color: white ; justify-content:center ;align-items: center ;margin-left: 20px;margin-right: 20px; border-radius: 3px">
<image :src="searchicon" ; style=" width: 44px;height: 44px; margin-right: 40px"></image>
<text style="font-size: 28px ">挑好房，上安居客</text>
<image :src="qricon" ; style="background-color: #dddddd ;width: 44px;height: 44px ;margin-left: 40px"></image>
</div>
</div>
<div style="flex: 0.3 ; margin-left: 1px; flex-direction: row ;justify-content: center;align-items: center">
<image :src="mapicon " style="width: 44px ;height: 44px ; margin-left: 1px"></image>
<text style="font-size: 32px ; margin-left: 5px ; font-size: 32px ;color: white">地图</text>
</div>
</div>
<div class="tab" >
<div style="flex-direction: row">
<div style=" justify-content: center;align-items: center ; flex: 1" >
<image :src="test" style="width: 90px;height: 90px "></image>
<text>新房</text>
</div>
<div style=" justify-content: center;align-items: center ; flex: 1" >
<image :src="test" style="width: 90px;height: 90px "></image>
<text>新房</text>
</div>
<div style=" justify-content: center;align-items: center ; flex: 1" >
<image :src="test" style="width: 90px;height: 90px "></image>
<text>新房</text>
</div>
<div style=" justify-content: center;align-items: center ; flex: 1" >
<image :src="test" style="width: 90px;height: 90px "></image>
<text>新房</text>
</div>
</div>
<div style="flex-direction: row">
<div style=" justify-content: center;align-items: center ; flex: 1" >
<image :src="test" style="width: 90px;height: 90px "></image>
<text>新房</text>
</div>
<div style=" justify-content: center;align-items: center ; flex: 1" >
<image :src="test" style="width: 90px;height: 90px "></image>
<text>新房</text>
</div>
<div style=" justify-content: center;align-items: center ; flex: 1" >
<image :src="test" style="width: 90px;height: 90px "></image>
<text>新房</text>
</div>
<div style=" justify-content: center;align-items: center ; flex: 1" >
<image :src="test" style="width: 90px;height: 90px "></image>
<text>新房</text>
</div>
</div>
</div>
<!--banner-->
<div >
<slider class="slider" interval="3000" auto-play="true" >
<div class="frame" v-for="img in imageList" @click="jump">
<image class="image" resize="cover" :src="img.src"></image>
</div>
<indicator class="indicator" style="margin-right: 1300px"></indicator>
</slider>
</div>
<div class="toutiao">
<div style=" flex: 1;flex-direction: row ;height: 120px; background-color: rgb(239,252,234) ;margin-top: 36px">
<!--icon-->
<div class="amjuke" style=" justify-content: center ;align-items: center">
<image :src="anjuIcon" style="width: 110px;height: 110px ;margin-left: 20px;margin-right: 20px"></image>
</div>
<!--分割线-->
<div style="justify-content: center;align-items: center;opacity: 0.5">
<div style="width: 1px;height: 100px ; background-color: #7f7f7f">
</div>
</div>
<!--跑马灯-->
<div style="flex: 1">
</div>
</div>
</div>
<!--免费看房-->
<div style=" height: 220px ;margin-top: 28px; flex-direction: row ">
<div v-for="(item,i) in tabItems.lists" style="justify-content: space-around;align-items: center; flex-direction: row" >
<div style="justify-content: center ; align-items: center" >
<text>{{item.name}}</text>
<!--<image style="width: 178px; height: 144px" :src="freeUrl"></image>-->
<image style="width: 178px; height: 144px" :src="item.url"" ></image>
</div>
<div style="background-color: #7f7f7f ; opacity: 0.2;width: 3px;height: 180px">
</div>
</div>
</div>
<div style="height: 20px;background-color: #e3e3e3"></div>
<div class="guess" style=" ; height: 50px">
<div style="flex-direction: row ;justify-content: flex-start;align-items: center">
<div style="background-color: #00cc99 ; height: 30px ; width: 10px"></div>
<text style="margin-left: 10px">猜你喜欢</text>
</div>
</div>
<line></line>
<!--猜你喜欢-->
<div class="item" style="margin-top: 5px">
<div style=" height: 200px ;justify-content: flex-start ;align-items: center ; flex-direction: row" >
<div style=" ;margin-left: 10px; ">
<image :src="scenseUrl" ; style=" background-color: #00B4FF; margin-left: 10px; width: 250px ;height: 160px"></image>
<div style=" bottom: 0px;left: 5px; position: absolute ;width: 130px;height: 40px">
<text style=" position: absolute ;bottom: 0px; font-size: 30px;margin-left: 20px ;color: white">现房</text>
</div>
</div>
<div style=" margin-left: 30px ;flex-direction: column">
<text style="font-size: 32px">城市一品苑</text>
<div style="flex-direction: row ;margin-top: 5px">
<text style="font-size: 23px ;color: #444444">浦东-..</text>
<text style="margin-left: 100px; font-size: 23px ;color: rgb(211,168,66)">70000元/㎡ 起</text>
</div>
<div style="flex-direction: row ;margin-top: 5px ">
<text style=" padding-left: 5px;padding-right: 5px; font-size: 23px ;color: #444444 ; border-width: 1px;border-color: #444444;border-radius: 5px">即将开盘</text>
<text style=" padding-left: 5px;padding-right: 5px; margin-left: 20px; font-size: 23px ;color: #444444; border-width: 1px;border-color: #444444 ;border-radius: 5px">非毛坯</text>
<text style=" padding-left: 5px;padding-right: 5px; margin-left: 20px; font-size: 23px ;color: #444444 ; border-width: 1px;border-color: #444444;border-radius: 5px">洋房</text>
</div>
<text style="font-size: 23px ;color: green ;margin-top: 5px">11月12日看房团</text>
</div>
</div>
<div style="height: 1px;background-color: #444444;opacity: 0.2"></div>
</div>
</div>
</scroller>
</template>
<script>
import line from './line.vue'
var navigator = weex.requireModule('navigator');
var api=require('./api.js');
export default {
data: {
linecolor : api.appconfig.linecolor,
kaipanUrl:api.apiurl.resulr +'kaipan.png',
freeUrl:api.apiurl.resulr +'free.png',
test:api.apiurl.resulr +'xinfang.png',
anjuIcon:api.apiurl.resulr +'anju.png',
scenseUrl : api.apiurl.resulr + 'scense.png',
tabItems: {
lists: [
{name: '最新开盘',url: api.apiurl.resulr +'kaipan.png'},
{name: '免费看房',url: api.apiurl.resulr +'kaipan.png'},
{name: '金融贷款',url: api.apiurl.resulr +'free.png'},
{name: '智能买房',url: api.apiurl.resulr +'free.png'},
],
images: [
{url: api.apiurl.resulr +'kaipan.png'},
{url: api.apiurl.resulr +'kaipan.png'},
{url: api.apiurl.resulr +'kaipan.png'},
{url: api.apiurl.resulr +'kaipan.png'},
],
},
imageList: [
{ src: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'},
{ src: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'},
{ src: 'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg'}
],
items:[
{data:[{name:'新房',icon:api.apiurl.resulr +'xinfang.png'}]},
{data:[{name:'新房',icon:api.apiurl.resulr +'xinfang.png'}]}
],
searchicon: api.apiurl.resulr +'nor_result_2x.png',
qricon:api.apiurl.resulr +'qr.png',
mapicon:api.apiurl.resulr +'map.png',
},
components: {
'line' : line
},
ready:function () {
},
methods: {
jump (event) {
console.log('will jump')
navigator.push({
url: 'http://cdn.zwwill.com/yanxuan/jsbundles/index.js',
animated: "true"
}, event => {
modal.toast({ message: 'callback: ' + event })
})
}
},
created:function () {
}
}
</script>
<style scoped>
.indicator {
width: 700px;
height: 100px;
item-color: #7f7f7f;
item-selected-color: white;
item-size: 14px;
position: absolute;
top: 230px;
left: 0px;
/*bottom: 3px;*/
}
.image {
width: 700px;
height: 700px;
}
.slider {
margin-top: 25px;
margin-left: 25px;
width: auto;
height: 300px;
/*border-width: 2px;*/
/*border-style: solid;*/
/*border-color: #41B883;*/
}
.frame {
width: auto;
height: 700px;
position: relative;
}
</style>
================
api.js
exports.apiurl = {
resulr: 'http://192.168.0.104:8081/img/'
}
