xbx #86
@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<view class="zhibo">
|
||||
<image class="head"></image>
|
||||
<view class="zhibo" @click="zhibo">
|
||||
<image class="head" :src="image"></image>
|
||||
<view class="user">
|
||||
<view class="name">
|
||||
<image></image>
|
||||
<text>这是名字</text>
|
||||
<text class="u-line-1" style="width:130rpx">{{name}}</text>
|
||||
</view>
|
||||
<view class="pingbi">
|
||||
<image></image>
|
||||
<text>屏蔽用户</text>
|
||||
<text>1屏蔽用户</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -70,6 +70,17 @@ export default {
|
||||
return {
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
zhibo(){
|
||||
this.$u.route({
|
||||
url:"/pageB/zhibo/index",
|
||||
params:{
|
||||
url:this.url
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
props:['name','image','url']
|
||||
}
|
||||
</script>
|
||||
@ -19,11 +19,11 @@
|
||||
</swiper>
|
||||
<view v-else style=" display: flex;flex-direction: column;height: calc(100vh - 88rpx);">
|
||||
<view class="select">
|
||||
<view @click="sx(0)" data-type="xl">销量</view>
|
||||
<view @click="sx(0)" class="xz" data-type="xl">销量</view>
|
||||
<view class="xz" @click="sx(1)">
|
||||
<text>价格</text>
|
||||
<view class="jiage">
|
||||
<view class="top"></view>
|
||||
<view class="top topxz"></view>
|
||||
<view class="bottom bottomxz"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
126
pageB/zhibo/index.nvue
Normal file
126
pageB/zhibo/index.nvue
Normal file
@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<view>
|
||||
<video :src="url" class="vodio" autoplay="true" :show-fullscreen-btn="false" :show-play-btn="false" :enable-progress-gesture="false" :show-center-play-btn="false" :show-progress="false" :controls="false" :style="{'height':height}">
|
||||
|
||||
</video>
|
||||
<view class="user" :style="{'top': top}">
|
||||
<view class="back"></view>
|
||||
<image class="head"></image>
|
||||
<view class="userinfo">
|
||||
<text class="name">萨和登</text>
|
||||
<text class="info">萨大赛大赛大赛大赛大</text>
|
||||
</view>
|
||||
<view class="guanzhu"><text style="color:#fff;font-size:24rpx">关注</text></view>
|
||||
</view>
|
||||
<view class="userlist" :style="{'top': top + 10 * rpx}">
|
||||
<image class="userlistitem" v-for="(i,j) in [0,2]" :style="{'right': (-j * 15 * rpx) + 'px'}"></image>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.userlistitem{
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
position: relative;
|
||||
background-color: #0f0;
|
||||
border-radius: 30rpx;
|
||||
|
||||
}
|
||||
.userlist{
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
width: 150rpx;
|
||||
height: 60rpx;
|
||||
position: fixed;
|
||||
right: 156rpx;
|
||||
|
||||
}
|
||||
.name {
|
||||
font-size: 24rpx;
|
||||
color: #fff;
|
||||
lines: 1;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.info {
|
||||
font-size: 20rpx;
|
||||
color: #fff;
|
||||
margin-top: 6rpx;
|
||||
lines: 1;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.userinfo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100rpx;
|
||||
margin-left: 20rpx;
|
||||
|
||||
}
|
||||
.guanzhu {
|
||||
width: 100rpx;
|
||||
height: 50rpx;
|
||||
background-color: #ff780f;
|
||||
border-radius: 25rpx;
|
||||
margin-left: 10rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.head {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
border-radius: 35rpx;
|
||||
background-color: #0f0;
|
||||
}
|
||||
.back {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: #000;
|
||||
opacity: 0.2;
|
||||
width: 308rpx;
|
||||
height: 70rpx;
|
||||
border-radius: 35rpx;
|
||||
}
|
||||
.user {
|
||||
position: fixed;
|
||||
left: 30rpx;
|
||||
width: 308rpx;
|
||||
height: 70rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 35rpx;
|
||||
overflow: hidden;
|
||||
flex-direction: row;
|
||||
}
|
||||
.video {
|
||||
width: 750rpx;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
export default {
|
||||
name: "zhibo",
|
||||
data() {
|
||||
return {
|
||||
url: "",
|
||||
top: 0,
|
||||
height: 0,
|
||||
rpx:0
|
||||
};
|
||||
},
|
||||
onLoad(a) {
|
||||
this.url = a.url;
|
||||
console.log(this.url);
|
||||
let that = this;
|
||||
uni.getSystemInfo({
|
||||
success(a) {
|
||||
console.log(a.windowHeight);
|
||||
that.height = a.windowHeight;
|
||||
// that.start()
|
||||
that.top = a.statusBarHeight + 5;
|
||||
that.rpx = (a.windowWidth / 750)
|
||||
console.log(that.rpx)
|
||||
},
|
||||
});
|
||||
},
|
||||
};
|
||||
</script>
|
||||
58
pages.json
58
pages.json
@ -80,6 +80,13 @@
|
||||
{
|
||||
"root": "pageB",
|
||||
"pages": [
|
||||
{
|
||||
"path": "zhibo/index",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "follow/index",
|
||||
"style": {
|
||||
@ -138,55 +145,17 @@
|
||||
{
|
||||
"path": "search/index",
|
||||
"style": {
|
||||
"app-plus": {
|
||||
"titleNView": {
|
||||
"titleColor": "#333333",
|
||||
"backgroundColor": "#FFFFFF",
|
||||
"buttons": [
|
||||
{
|
||||
"type":"none",
|
||||
"text":"搜索",
|
||||
"float":"right",
|
||||
"fontSize":"16",
|
||||
"color": "#FF780F"
|
||||
}
|
||||
],
|
||||
"searchInput": {
|
||||
"align": "left",
|
||||
"borderRadius": "15px",
|
||||
"placeholder": "搜索您需要的商品",
|
||||
"backgroundColor": "rgb(236,236,236)",
|
||||
"disabled": false
|
||||
}
|
||||
}
|
||||
}
|
||||
"navigationBarTitleText": "",
|
||||
"navigationStyle": "custom"
|
||||
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "search/out",
|
||||
"style": {
|
||||
"app-plus": {
|
||||
"titleNView": {
|
||||
"titleColor": "#333333",
|
||||
"backgroundColor": "#FFFFFF",
|
||||
"buttons": [
|
||||
{
|
||||
"type":"none",
|
||||
"text":"搜索",
|
||||
"float":"right",
|
||||
"fontSize":"16",
|
||||
"color": "#FF780F"
|
||||
}
|
||||
],
|
||||
"searchInput": {
|
||||
"align": "left",
|
||||
"borderRadius": "15px",
|
||||
"placeholder": "搜索您需要的商品",
|
||||
"backgroundColor": "rgb(236,236,236)",
|
||||
"disabled": false
|
||||
}
|
||||
}
|
||||
}
|
||||
"navigationBarTitleText": "",
|
||||
"navigationStyle": "custom"
|
||||
|
||||
}
|
||||
},
|
||||
{
|
||||
@ -227,6 +196,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
{
|
||||
"path": "cart/index",
|
||||
|
||||
@ -39,10 +39,10 @@
|
||||
<u-swiper mode="dot" :list="zhiboImageSwiper" name="adv_code"></u-swiper>
|
||||
<view class="list">
|
||||
<view>
|
||||
<zhiboItem v-for="item in 10"></zhiboItem>
|
||||
<zhiboItem v-for="item in tabLiveLists.filter((_, index) => !(index&1))" :key="item.live_id" :name="item.store_name" :image="item.cover_img" :url="item.url"></zhiboItem>
|
||||
</view>
|
||||
<view style="margin-left:20rpx">
|
||||
<zhiboItem v-for="item in 10"></zhiboItem>
|
||||
<zhiboItem v-for="item in tabLiveLists.filter((_, index) => index&1)" :key="item.live_id" :name="item.store_name" :image="item.cover_img" :url="item.url"></zhiboItem>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -203,6 +203,7 @@
|
||||
recommendList: [], // 推荐达人
|
||||
indexImageSwiper: [],
|
||||
zhiboImageSwiper: [],
|
||||
tabLiveLists:[]
|
||||
}
|
||||
},
|
||||
components: {
|
||||
@ -222,6 +223,7 @@
|
||||
tabLiveList(){
|
||||
this.$u.api.tabLiveList().then((res)=>{
|
||||
console.log(res)
|
||||
this.tabLiveLists = res.data
|
||||
})
|
||||
},
|
||||
getSwiper() {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user