|
|
@@ -13,37 +13,149 @@
|
|
|
<image style="vertical-align: middle;" src="/static/img/dingwei.png" mode="widthFix"></image>
|
|
|
<text style="vertical-align: middle;" class="text-size-g">北京Beijing</text>
|
|
|
</view>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
</view>
|
|
|
- <view class="zhuti mt-20">
|
|
|
+ <view class="zhuti mt-50">
|
|
|
+
|
|
|
<tm-grid :grid="5" :list="list3" :icon-size="140" font-color="white"></tm-grid>
|
|
|
+ <!-- 今日穿搭 -->
|
|
|
<tm-sheet class="lunbo">
|
|
|
<view class="py-10 text-size-g dianz">
|
|
|
<image src="/static/img/6.png" mode="widthFix"></image>
|
|
|
<text class="text-white">今日穿搭推荐</text>
|
|
|
</view>
|
|
|
- <view class="mt-20 text-size-g dianz">
|
|
|
- <view class="text-white">西装夹克高级感穿搭 | 彰显</view>
|
|
|
+ <view class="mt-20 text-size-g">
|
|
|
+ <view class="text-white">
|
|
|
+ 西装夹克高级感穿搭 | 彰显
|
|
|
+ <view class="qiehuan">
|
|
|
+ <tm-translate :auto="zidong" class="fl a_1" ref="a_1" :duration="1000" animation-name="fadeIn">
|
|
|
+ <image v-if="current==0" class="anniu mr-10" src="/static/img/14.png" mode="widthFix"></image>
|
|
|
+ <image v-if="current!=0" @click="xia()" class="anniu mr-10" src="/static/img/12.png" mode="widthFix"></image>
|
|
|
+ </tm-translate>
|
|
|
+ <tm-swiper class="tu fl" :previmage="false" :noSwiping="true" :height="220" :width="250" :current="current" :margin="8" :autoplay="false" :list="list"></tm-swiper>
|
|
|
+ <tm-translate :auto="zidong" class="fl a_1" ref="a_5" :duration="1000" animation-name="fadeIn">
|
|
|
+ <image v-if="current<(list.length-1)" @click="shang()" class="anniu fl ml-10" src="/static/img/13.png" mode="widthFix"></image>
|
|
|
+ <image v-if="current>(list.length-2)" class="anniu fl ml-10" src="/static/img/11.png" mode="widthFix"></image>
|
|
|
+ </tm-translate>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
<view class="text-white">秋冬复古型男典范</view>
|
|
|
</view>
|
|
|
- <view class="touxiang mt-20">
|
|
|
+ <view class="touxiang mt-30">
|
|
|
<image src="/static/img/7.png" mode="widthFix"></image>
|
|
|
<text class="text-white text-size-m">可樂crys</text>
|
|
|
</view>
|
|
|
- <view class="shoucang mt-20">
|
|
|
- <image src="/static/img/8.png" mode="widthFix" style="margin-right: 15px;"></image>
|
|
|
- <image src="/static/img/9.png" mode="widthFix"></image>
|
|
|
+ <view class="shoucang mt-30">
|
|
|
+ <view class="fl di mr-20" @click="shouc">
|
|
|
+ <tm-translate ref="a_3" :duration="80" animation-name="fadeIn">
|
|
|
+ <image :src="shoucangsrc?'/static/img/15.png':'/static/img/8.png'" mode="widthFix" style="margin-right: 15px;"></image>
|
|
|
+ </tm-translate>
|
|
|
+ </view>
|
|
|
+ <view class="fl di" @click="zan">
|
|
|
+ <tm-translate ref="a_2" :duration="80" animation-name="fadeIn">
|
|
|
+ <image :src="dianzan?'/static/img/16.png':'/static/img/9.png'" mode="widthFix" style="margin-right: 15px;"></image>
|
|
|
+ </tm-translate>
|
|
|
+ </view>
|
|
|
+ <view style="clear: both;"></view>
|
|
|
+ </view>
|
|
|
+ </tm-sheet>
|
|
|
+ <!-- 明日计划 -->
|
|
|
+ <tm-sheet class="lunbo1">
|
|
|
+ <view class="py-10 text-size-g dianz mingri">
|
|
|
+ <image src="/static/img/17.png" mode="widthFix"></image>
|
|
|
+ <text class="text-white">明日计划</text>
|
|
|
+ </view>
|
|
|
+ <view class="mt-20 text-size-g jihua">
|
|
|
+ <tm-translate class="a_1" ref="a_6" :duration="80" animation-name="zoomIn">
|
|
|
+ <image @click="jihuashang()" class="anniu mr-10" src="/static/img/18.png" mode="widthFix"></image>
|
|
|
+ </tm-translate>
|
|
|
+ <view class="bbb">
|
|
|
+ <tm-swiper class="aaa" :previmage="false" :noSwiping="true" :current="current1" :autoplay="false" :list="list1"></tm-swiper>
|
|
|
+ </view>
|
|
|
+ <tm-translate class="a_1" ref="a_4" :duration="80" animation-name="zoomIn" style="right: 0px;">
|
|
|
+ <image @click="jihuaxia()" class="anniu mr-10" src="/static/img/19.png" mode="widthFix"></image>
|
|
|
+ </tm-translate>
|
|
|
+ <view style="clear: both;"></view>
|
|
|
+ </view>
|
|
|
+ </tm-sheet>
|
|
|
+ <!-- 热门穿搭 -->
|
|
|
+ <tm-sheet class="lunbo1" style="margin-bottom: 70px !important;">
|
|
|
+ <view class="py-10 text-size-g dianz mingri">
|
|
|
+ <image src="/static/img/24.png" mode="widthFix"></image>
|
|
|
+ <text class="text-white">热门穿搭</text>
|
|
|
+ </view>
|
|
|
+ <view class="text-size-g jihua remen">
|
|
|
+ <view style="width: 48%;" class="fl">
|
|
|
+ <view v-for="(item,index) in listdata" v-if="index%2==0" class="round-3 shadow-2 overflow pa-10 mt-20" :class="[$tm.vx.state().tmVuetify.black ? 'black' : 'white']">
|
|
|
+ <image class="logo" :src="item.image" mode="widthFix"></image>
|
|
|
+ <view class="pa-10 text-size-s">
|
|
|
+ <view class="text-overflow-2">
|
|
|
+ <text>{{item.text}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="mt-24 flex-between flex-center">
|
|
|
+ <view class="touxiang mt-30">
|
|
|
+ <image src="/static/img/7.png" mode="widthFix"></image>
|
|
|
+ <text class="text-white text-size-m">可樂crys</text>
|
|
|
+ </view>
|
|
|
+ <view >
|
|
|
+ <!-- <tm-translate ref="a_2" :duration="80" animation-name="fadeIn"> -->
|
|
|
+ <image class="remenzan" :src="dianzan1?'/static/img/29.png':'/static/img/9.png'" mode="widthFix"></image>
|
|
|
+ <!-- </tm-translate> -->
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view style="width: 46%;" class="fr">
|
|
|
+ <view style="width: 100%;" class="fr round-3 shadow-2 overflow pa-10 mt-20" :class="[$tm.vx.state().tmVuetify.black ? 'black' : 'white']">
|
|
|
+ <view class="py-10 text-size-m dianz mingri">
|
|
|
+ <text style="vertical-align: middle;" class="text-white">销量飙升榜</text>
|
|
|
+ <image style="width: 25px;margin-left: 8px;" src="/static/img/36.png" mode="widthFix"></image>
|
|
|
+ </view>
|
|
|
+ <view class="py-10 text-size-s dianz mingri">
|
|
|
+ <text class="text-white">亿万新品趋势洞察</text>
|
|
|
+ </view>
|
|
|
+ <view class="mt-10" v-for="item in list2">
|
|
|
+ <image class="chuandaimg fl" :src="item.img" mode="widthFix"></image>
|
|
|
+ <view class="chuandazi fr">
|
|
|
+ <view class="text-size-m text-weight-b text-overflow-2">{{item.title}}</view>
|
|
|
+ <view class="tm-cartCellListFood-label text-size-s text-grey py-8">{{item.text}}</view>
|
|
|
+ <image class="gengduo fr" src="/static/img/40.png" mode="widthFix"></image>
|
|
|
+ </view>
|
|
|
+ <view style="clear: both;"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view style="clear: both;"></view>
|
|
|
+ <view v-for="(item,index) in listdata" v-if="index%2==1" class="round-3 shadow-2 overflow pa-10 mt-20" :class="[$tm.vx.state().tmVuetify.black ? 'black' : 'white']">
|
|
|
+ <image class="logo" :src="item.image" mode="widthFix"></image>
|
|
|
+ <view class="pa-10 text-size-s">
|
|
|
+ <view class="text-overflow-2">
|
|
|
+ <text>{{item.text}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="mt-24 flex-between flex-center">
|
|
|
+ <view class="touxiang mt-30">
|
|
|
+ <image src="/static/img/7.png" mode="widthFix"></image>
|
|
|
+ <text class="text-white text-size-m">可樂crys</text>
|
|
|
+ </view>
|
|
|
+ <view >
|
|
|
+ <!-- <tm-translate ref="a_7" :duration="80" animation-name="fadeIn"> -->
|
|
|
+ <image class="remenzan" :src="dianzan1?'/static/img/29.png':'/static/img/9.png'" mode="widthFix"></image>
|
|
|
+ <!-- </tm-translate> -->
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view style="clear: both;" class="more ma-40 pt-40" @click="gengmore()">
|
|
|
+ <image src="/static/img/30.png" mode="widthFix"></image>
|
|
|
+ <text class="text-size-s">下拉加载更多~</text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</tm-sheet>
|
|
|
</view>
|
|
|
-
|
|
|
- <!-- <tm-swiper :previmage="false" :noSwiping="true" width="400" :current="current" :margin="32" :autoplay="false" :list="list"></tm-swiper>
|
|
|
- <tm-button theme="white" size="m" @click="shang()">下一张</tm-button>
|
|
|
- <tm-button theme="white" size="m" @click="xia()">上一张</tm-button>
|
|
|
- <view class="bbb">
|
|
|
- <tm-swiper :notouch="true" :disable-touch="true" class="aaa" :current="current1" :autoplay="false" dot-model="rect" :indicator-dots="true" :list="list"></tm-swiper>
|
|
|
- </view>
|
|
|
- <tm-button theme="white" size="m" @click="shang()">下一张</tm-button>
|
|
|
- <tm-button theme="white" size="m" @click="xia()">上一张</tm-button> -->
|
|
|
|
|
|
|
|
|
</view>
|
|
|
@@ -55,6 +167,10 @@
|
|
|
data() {
|
|
|
return {
|
|
|
soso:'',
|
|
|
+ zidong:false,
|
|
|
+ shoucangsrc:true,
|
|
|
+ dianzan:true,
|
|
|
+ dianzan1:true,
|
|
|
list3:[
|
|
|
{icon:'/static/img/1.png',text:'预约家政'},
|
|
|
{icon:'/static/img/2.png',text:'预约服务'},
|
|
|
@@ -62,45 +178,114 @@
|
|
|
{icon:'/static/img/4.png',text:'鞋服洗护'},
|
|
|
{icon:'/static/img/5.png',text:'闲置交换'},
|
|
|
],
|
|
|
- keyword: '',
|
|
|
top: 60,
|
|
|
sys: null,
|
|
|
+ list2:[{
|
|
|
+ img:'/static/img/39.png',
|
|
|
+ title:'单品推荐',
|
|
|
+ text:'3.9万人追捧'
|
|
|
+ },{
|
|
|
+ img:'/static/img/37.png',
|
|
|
+ title:'单品推荐',
|
|
|
+ text:'3.9万人追捧'
|
|
|
+ },{
|
|
|
+ img:'/static/img/38.png',
|
|
|
+ title:'单品推荐',
|
|
|
+ text:'3.9万人追捧'
|
|
|
+ }],
|
|
|
list:[
|
|
|
- 'https://picsum.photos/800?jv=34',
|
|
|
- 'https://picsum.photos/800?jv=74',
|
|
|
- 'https://picsum.photos/800?jv=3',
|
|
|
- 'https://picsum.photos/800?jv=5',
|
|
|
- 'https://picsum.photos/800?jv=74',
|
|
|
- 'https://picsum.photos/800?jv=3',
|
|
|
- 'https://picsum.photos/800?jv=5'
|
|
|
+ '/static/img/10.png',
|
|
|
+ '/static/img/10.png',
|
|
|
+ '/static/img/10.png',
|
|
|
+ '/static/img/10.png',
|
|
|
+ '/static/img/10.png',
|
|
|
+ '/static/img/10.png',
|
|
|
+ ],
|
|
|
+ list1:[
|
|
|
+ {src:'/static/img/20.png',title:'开会'},
|
|
|
+ {src:'/static/img/21.png',title:'聚餐'},
|
|
|
+ {src:'/static/img/22.png',title:'运动'},
|
|
|
+ {src:'/static/img/23.png',title:'娱乐'},
|
|
|
+ {src:'/static/img/20.png',title:'开会'},
|
|
|
+ {src:'/static/img/21.png',title:'聚餐'},
|
|
|
+ {src:'/static/img/22.png',title:'运动'},
|
|
|
],
|
|
|
current:0,
|
|
|
- current1:0
|
|
|
+ current1:0,
|
|
|
+ listdata:[]
|
|
|
};
|
|
|
},
|
|
|
onLoad() {
|
|
|
// #ifdef MP
|
|
|
this.top = uni.upx2px(150);
|
|
|
// #endif
|
|
|
+
|
|
|
},
|
|
|
created() {
|
|
|
+ var that=this;
|
|
|
setTimeout(function(){
|
|
|
+ console.log(1111)
|
|
|
+ that.zidong=true
|
|
|
if(uni.getStorageSync("token")==""){
|
|
|
uni.redirectTo({
|
|
|
url:"/pages/login/index"
|
|
|
})
|
|
|
}
|
|
|
+
|
|
|
},2000)
|
|
|
+
|
|
|
this.sys = uni.getSystemInfoSync();
|
|
|
+ this.randouh()
|
|
|
},
|
|
|
methods: {
|
|
|
+ gengmore(){
|
|
|
+
|
|
|
+ this.randouh()
|
|
|
+ },
|
|
|
+ itemClick(e){
|
|
|
+ console.log(e);
|
|
|
+ uni.$tm.toast(e.dirIndex+':'+e.childrenIndex)
|
|
|
+ },
|
|
|
+ randouh(){
|
|
|
+ let list2 = [],that=this;
|
|
|
+ for(let i=0;i<8;i++){
|
|
|
+ list2.push({
|
|
|
+ image:'../../static/img/25.png',
|
|
|
+ text:'西装穿搭 | 韩系又A又飒休闲西装 高级感'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.listdata=this.listdata.concat(list2)
|
|
|
+ console.log(this.listdata)
|
|
|
+ },
|
|
|
+ jihuashang(){
|
|
|
+ if(this.current1 ==0){
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.$refs.a_6.play()
|
|
|
+ this.current1=this.current1-1;
|
|
|
+ },
|
|
|
+ jihuaxia(){
|
|
|
+ if(this.current1 > (this.list1.length-5)){
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.$refs.a_4.play()
|
|
|
+ this.current1=this.current1+1;
|
|
|
+ },
|
|
|
+ shouc(){
|
|
|
+ this.shoucangsrc=! this.shoucangsrc;
|
|
|
+ this.$refs.a_3.play()
|
|
|
+ },
|
|
|
+ zan(){
|
|
|
+ this.dianzan=! this.dianzan;
|
|
|
+ this.$refs.a_2.play()
|
|
|
+ },
|
|
|
shang(){
|
|
|
+ this.$refs.a_5.play()
|
|
|
this.current=this.current+1;
|
|
|
- this.current1=this.current1+1
|
|
|
},
|
|
|
xia(){
|
|
|
+ this.$refs.a_1.play()
|
|
|
this.current=this.current-1;
|
|
|
- this.current1=this.current1-1
|
|
|
}
|
|
|
},
|
|
|
}
|
|
|
@@ -111,15 +296,14 @@
|
|
|
background-color: #1b1b1b !important;
|
|
|
}
|
|
|
/deep/ .aaa uni-image{
|
|
|
- width: 100px !important;
|
|
|
- height: 100px !important;
|
|
|
+ width: 52px !important;
|
|
|
+ height: 52px !important;
|
|
|
}
|
|
|
/deep/ .aaa uni-swiper-item{
|
|
|
- width: 100px !important;
|
|
|
- height: 100px !important;
|
|
|
- padding: 0 10px !important;
|
|
|
+ width: 52px !important;
|
|
|
+ height: 80px !important;
|
|
|
+ padding: 0 5px !important;
|
|
|
}
|
|
|
- //
|
|
|
.xiangji image{
|
|
|
width: 30px;
|
|
|
height: 22px;
|
|
|
@@ -147,34 +331,35 @@
|
|
|
padding-bottom: 20px;
|
|
|
}
|
|
|
.dingwei image{
|
|
|
- width: 20px;
|
|
|
+ width: 25px;
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
- /deep/ .tm-col{
|
|
|
- width: 20% !important;
|
|
|
- }
|
|
|
- .zhuti{
|
|
|
- padding: 10px;
|
|
|
- }
|
|
|
- /deep/ .lunbo{
|
|
|
- margin:0 !important;
|
|
|
- padding: 8px !important;
|
|
|
- margin-top: 20px !important;
|
|
|
- }
|
|
|
- .dianz image{
|
|
|
- width: 30px;
|
|
|
- vertical-align: middle;
|
|
|
- margin-right: 10px;
|
|
|
- }
|
|
|
- /deep/ .text-size-s span,/deep/ .text-size-g{
|
|
|
- font-size: 15px;
|
|
|
- }
|
|
|
- .touxiang image{
|
|
|
- width: 35px;
|
|
|
- margin-right: 10px;
|
|
|
- vertical-align: middle;
|
|
|
- }
|
|
|
- .shoucang image{
|
|
|
- width: 45px;
|
|
|
- }
|
|
|
+ /deep/ .tm-col{width: 20% !important;}
|
|
|
+ .zhuti{padding: 10px 20px;}
|
|
|
+ /deep/ .lunbo{margin:0 !important;padding: 8px !important;margin-top: 50px !important;}
|
|
|
+ .dianz image{width: 35px;vertical-align: middle;margin-right: 10px;}
|
|
|
+ /deep/ .text-size-s span,/deep/ .text-size-g{font-size: 15px;}
|
|
|
+ .touxiang image{width: 40px;margin-right: 10px;vertical-align: middle;}
|
|
|
+ .shoucang image{width: 45px;}
|
|
|
+ .qiehuan{float: right;}
|
|
|
+ .qiehuan .a_1{margin-top: 25%;}
|
|
|
+ .qiehuan .anniu{width: 20px;}
|
|
|
+ .di{background: #0D0D0D;width: 45px;height: 45px;text-align: center;line-height: 50px;border-radius: 30px;}
|
|
|
+ .mingri image{width: 30px;margin-right: 12px;}
|
|
|
+ .di image{width: 22px;margin: 0 !important;}
|
|
|
+ .jihua image{width: 30px;}
|
|
|
+ .jihua{position: relative;}
|
|
|
+ .jihua .a_1{position: absolute;top: 10%;}
|
|
|
+ .bbb{width: 75% !important;margin: 0 auto !important;}
|
|
|
+ /deep/ .bbb uni-swiper{width: 100% !important;height: 90px !important;}
|
|
|
+ /deep/ .bbb .flex-start{background:rgba(0, 0, 0, 0) !important;padding: 0 !important;width: 100% !important;text-align: center;margin-top: 30px;}
|
|
|
+ /deep/ .lunbo1{margin:0 !important;padding: 8px !important;margin-top: 20px !important;}
|
|
|
+ .remenzan{width: 18px !important;margin-top: 10px;}
|
|
|
+ .remen .logo{width: 100%;}
|
|
|
+ .more{text-align: center;}
|
|
|
+ .more image{margin-right: 10px;vertical-align: middle;}
|
|
|
+ .chuandaimg{width: 50% !important;}
|
|
|
+ .chuandazi{width: 48% !important;}
|
|
|
+ /deep/ .lunbo1 .fulled{width: 100% !important;}
|
|
|
+ /deep/ .gengduo{width: 30px !important;margin-top: 10px !important;}
|
|
|
</style>
|
