deming/pageB/photo/index.vue
2020-07-20 08:43:13 +08:00

139 lines
3.3 KiB
Vue

<template>
<view class="photo">
<view class="back">
<image></image>
</view>
<swiper class="swiper">
<swiper-item>
<image :src="list.article_pic"></image>
</swiper-item>
<!-- <swiper-item>
<image></image>
</swiper-item> -->
</swiper>
<view class="bottom">
<view class="item">
<text>图片</text>
<view v-for="(item,index) in 4" :key="index" :style="{'background-color':index == 2 ? '#fff' : '#ede8e8'}"></view>
</view>
<view class="username">自己黑的哈万岁哦划u将</view>
<view class="title">hasjdhajskhj</view>
<view class="info u-line-2">asdjhasjdkasljdklasjkl</view>
</view>
<userinfo class="userinfo" :list="list"></userinfo>
<shpoone class="shpoone"></shpoone>
<shoplist></shoplist>
</view>
</template>
<style lang="scss" scoped>
.photo{
height: 100vh;
background-color: #ececec;
width: 100%;
.back{
padding-top: 28rpx;
padding-right: 31rpx;
>image{
width: 31rpx;
height: 31rpx;
float: right;
}
}
.swiper{
width: 100%;
height: 702rpx;
margin-top: 102rpx;
image{
width: 100%;
height: 100%;
}
}
.bottom{
width: 100%;
height: 270rpx;
background-color: #fff;
position: fixed;
bottom: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 20rpx 30rpx;
.item{
padding: 8rpx 16rpx;
font-size: 24rpx;
color: #fff;
background-color: #999;
display: flex;
align-items: center;
border-radius: 10rpx;
>view{
width: 12rpx;
height: 12rpx;
border-radius: 50%;
margin-left: 10rpx;
}
}
.username{
font-size: 36rpx;
color: #333;
margin-top: 20rpx;
}
.title{
font-size: 26rpx;
color: #333;
margin-top: 23rpx;
}
.info{
font-size: 28rpx;
line-height: 42rpx;
margin-top: 20rpx;
}
}
.userinfo{
position: absolute;
top: 50%;
transform: translateY(-285rpx);
right: 30rpx;
}
.shpoone{
position: absolute;
top: 50%;
z-index: 999;
right: 139rpx;
transform: translateY(100rpx);
}
}
</style>
<script>
import userinfo from "../components/userinfo/index"
import shpoone from "../components/shpoone/index"
import shoplist from "../components/shoplist/index"
export default {
name:"photo",
components:{
userinfo,
shpoone,
shoplist
},
data(){
return {
list:{}
}
},
methods:{
articleInfo(article_id){
this.$u.api.articleInfo({article_id}).then((res)=>{
console.log(res)
this.list = res.data.info
})
}
},
onLoad(o){
this.id = o.id
this.articleInfo(this.id)
}
}
</script>