112 lines
2.8 KiB
Vue
112 lines
2.8 KiB
Vue
<template>
|
|
<view style="height: 100vh;">
|
|
<uni-nav-bar shadow left-icon="left" fixed rightIcon="more-filled" rightText="编辑" title="他/她的主页"
|
|
backgroundColor="transparent" />
|
|
|
|
<uni-swiper-dot class="uni-swiper-dot-box" :info="info" :current="current" mode="round" field="content">
|
|
<swiper class="swiper-box" :current="swiperDotIndex">
|
|
<swiper-item v-for="(item, index) in info" :key="index">
|
|
<view class="swiper-item" :class="'swiper-item' + index" style="width: 100%; height: 100%;">
|
|
<image :src="item.url" mode="aspectFill" alt="" style="width: 100%; height: 100%;"></image>
|
|
</view>
|
|
|
|
</swiper-item>
|
|
</swiper>
|
|
</uni-swiper-dot>
|
|
<uni-section class="mb-10" title="昵称">
|
|
</uni-section>
|
|
<uni-section class="mb-10" title="最新动态">
|
|
<template v-slot:right>
|
|
<uni-icons type="right"></uni-icons>
|
|
</template>
|
|
</uni-section>
|
|
<uni-section class="mb-10" title="认证信息">
|
|
<template v-slot:right>
|
|
<uni-icons type="right"></uni-icons>
|
|
</template>
|
|
</uni-section>
|
|
<uni-section class="mb-10" title="个人资料">
|
|
<template v-slot:right>
|
|
<uni-icons type="right"></uni-icons>
|
|
</template>
|
|
</uni-section>
|
|
<uni-section class="mb-10" title="我想说的话">
|
|
<template v-slot:right>
|
|
<uni-icons type="right"></uni-icons>
|
|
</template>
|
|
</uni-section>
|
|
<uni-section class="mb-10" title="我的标签">
|
|
<template v-slot:right>
|
|
<uni-icons type="right"></uni-icons>
|
|
</template>
|
|
</uni-section>
|
|
<uni-section class="mb-10" title="贵族">
|
|
<template v-slot:right>
|
|
<uni-icons type="right"></uni-icons>
|
|
</template>
|
|
</uni-section>
|
|
<view class="goods-carts">
|
|
<uni-goods-nav :options="options" :button-group="buttonGroup" />
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
current: 0,
|
|
swiperDotIndex: 0,
|
|
info: [{
|
|
colorClass: 'uni-bg-red',
|
|
url: 'https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
|
|
content: '内容 A'
|
|
},
|
|
{
|
|
colorClass: 'uni-bg-green',
|
|
url: 'https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
|
|
content: '内容 B'
|
|
},
|
|
{
|
|
colorClass: 'uni-bg-blue',
|
|
url: 'https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
|
|
content: '内容 C'
|
|
}
|
|
],
|
|
options: [{
|
|
icon: 'chat',
|
|
text: '私信',
|
|
}, {
|
|
icon: 'star',
|
|
text: '关注',
|
|
}],
|
|
buttonGroup: [{
|
|
text: '撩一下TA',
|
|
backgroundColor: 'linear-gradient(90deg, #ff55ff, #ff557f)',
|
|
color: '#fff'
|
|
}],
|
|
}
|
|
},
|
|
methods: {
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.goods-carts {
|
|
/* #ifndef APP-NVUE */
|
|
display: flex;
|
|
/* #endif */
|
|
flex-direction: column;
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
/* #ifdef H5 */
|
|
left: var(--window-left);
|
|
right: var(--window-right);
|
|
/* #endif */
|
|
bottom: 0;
|
|
}
|
|
</style>
|