You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

101 lines
1.8 KiB

2 years ago
<template>
<view>
<view class="mine-top">
<image :src="topimg" class="mine-top-img"></image>
</view>
<view class="vrlist">
<view class='vritem' v-for="item in vrList">
<img :src="item.picture" alt="">
<view>
<img :src="party" alt="">
<span>{{item.name}}</span>
</view>
</view>
</view>
<tabbar :current-page="2"></tabbar>
</view>
</template>
<script>
import tabbar from "../../components/tabbar/tabbar.vue"
export default {
components: {
tabbar
},
data() {
return {
topimg: require('@/static/img/vrbg.png'),
party: require('@/static/img/party.png'),
vrList: [{
name: '习近平新时代中国特色社会主义思想指引下的苏州实践',
picture: require('@/static/img/vrimg.png'),
},
{
name: '习近平新时代中国特色社会主义思想指引下的苏州实践',
picture: require('@/static/img/vrimg.png'),
}
]
}
},
onReady() {},
onShow() {},
methods: {
}
}
</script>
<style>
.uni-navbar--border {
border-bottom-width: 0 !important;
}
page {
background: #fff;
height: 100vh;
}
.mine-top-img {
width: 100%;
height: 600rpx;
}
.vrlist {
margin-top: -200rpx;
margin-left: 50rpx;
display: flex;
justify-content: space-between;
overflow: auto;
}
.vritem {
margin-right: 30rpx;
padding: 15rpx;
background: linear-gradient(to bottom, #fff, #fff9e9);
border-radius: 20rpx;
}
.vritem>img {
width: 486rpx;
height: 900rpx;
}
.vritem>view {
display: flex;
align-items: center;
padding: 10rpx 0rpx;
}
.vritem>view img {
width: 43rpx;
height: 43rpx;
margin: 0 10rpx;
}
.vritem>view span {
width: 390rpx;
margin-left: 15rpx;
font-size: 28rpx;
}
</style>