fix:增加个人主页相关页面
CHINAMI-3V5PQ9A\Administrator
parent
f842d79894
commit
5471fee5cc
|
|
@ -122,6 +122,15 @@
|
|||
"disableScroll": true
|
||||
}
|
||||
|
||||
}, {
|
||||
"path": "pages/mine/view/homepage/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
// "navigationStyle": "custom"
|
||||
// "transparentTitle": "auto"
|
||||
}
|
||||
}
|
||||
],
|
||||
"tabBar": {
|
||||
|
|
|
|||
|
|
@ -89,7 +89,7 @@
|
|||
<view class="details-main-review">
|
||||
<view class="details-main-review-title">
|
||||
<text>全部评论 (22)</text>
|
||||
<text class="more">更多<uni-icons type="right" size="12"></uni-icons></text>
|
||||
<view class="more">更多<uni-icons type="right" size="12"></uni-icons></view>
|
||||
</view>
|
||||
<view class="details-main-review-list">
|
||||
<view class="review-item">
|
||||
|
|
@ -145,32 +145,65 @@
|
|||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="recommend">
|
||||
<view class="recommend">
|
||||
<view class="recommend-title">
|
||||
<image src="../../../../static/circle/icon_tujian.png" mode="aspectFit" class="icon"></image>
|
||||
<text>为您推荐</text>
|
||||
</view>
|
||||
<view class="car-list">
|
||||
<view class=" car-list-item" v-for="(item,index) in dataresource" :key="index">
|
||||
<image
|
||||
src="https://tse2-mm.cn.bing.net/th/id/OIP-C.QbUp_t4u2fqk5-hxFUdlbQHaFj?w=229&h=180&c=7&r=0&o=5&pid=1.7"
|
||||
mode="scaleToFill" class="car-photo"></image>
|
||||
<view class="item-bottom">
|
||||
<text class="introduce">YAMAHA雅马哈摩托车，需要电话都不回复</text>
|
||||
<view class="tag">
|
||||
<view class="tag-left">
|
||||
<text>铃木DL1050</text>
|
||||
</view>
|
||||
<view class="tag-right">
|
||||
<text>使用一年以下</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="price-view">
|
||||
<view class="price-view-left">
|
||||
<view>
|
||||
<text class="symbol">￥</text>
|
||||
<text>888.8</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="price-view-right">
|
||||
<text>731人看过</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="user">
|
||||
<image
|
||||
src="https://tse4-mm.cn.bing.net/th/id/OIP-C.bye37g-ULgz6dzKsvQtl9gAAAA?w=216&h=216&c=7&r=0&o=5&pid=1.7"
|
||||
mode="aspectFit" class="avatar"></image>
|
||||
<view class="price-view-right">
|
||||
<text>港湾晚风</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="details-footer">
|
||||
<input type="text" :cursorSpacing="20" :focus="firstFocus" @blur="firstFocus=false" placeholder="说点什么吧…"
|
||||
class="input" />
|
||||
<view class="details-footer-nav">
|
||||
<view class="details-footer-nav-item">
|
||||
<image src="../../../../static/common/icon-share.png" mode="aspectFit" class="image"></image>
|
||||
<text>分享</text>
|
||||
<image src="../../../../static/circle/collect.png" mode="aspectFit" class="image"></image>
|
||||
<text>收藏</text>
|
||||
</view>
|
||||
<view class="details-footer-nav-item">
|
||||
<image src="../../../../static/common/icon-upvote.png" mode="aspectFit" class="image"></image>
|
||||
<text>点赞</text>
|
||||
</view>
|
||||
<view class="details-footer-nav-item">
|
||||
<view class="details-footer-nav-item" @click="firstFocus=true">
|
||||
<image src="../../../../static/common/icon-review.png" mode="aspectFit" class="image"></image>
|
||||
<text>评论</text>
|
||||
<text>私信</text>
|
||||
</view>
|
||||
<view class="details-footer-nav-item">
|
||||
<image src="../../../../static/common/gift.png" mode="aspectFit" class="image"></image>
|
||||
<text>送礼</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<input type="text" :cursorSpacing="20" :focus="firstFocus" @blur="firstFocus=false" placeholder="说点什么吧…"
|
||||
class="input" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
|
@ -186,12 +219,13 @@
|
|||
goBack
|
||||
} = userData()
|
||||
const firstFocus = ref(false)
|
||||
const dataresource = ref([{}, {}, {}, {}])
|
||||
// let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
||||
// #ifdef MP-WEIXIN
|
||||
let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
||||
let menuButtonTop = rpxTopx(menuButtonInfo.top)
|
||||
// 计算小程序胶囊顶部位置加底部菜单高度
|
||||
let cssMenuButtonTop = rpxTopx(menuButtonInfo.top) + 88 + 226 + 'rpx'
|
||||
let cssMenuButtonTop = rpxTopx(menuButtonInfo.top) + 88 + 160 + 'rpx'
|
||||
// #endif
|
||||
</script>
|
||||
<style>
|
||||
|
|
@ -203,6 +237,8 @@
|
|||
.container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.nav-bar {
|
||||
position: sticky;
|
||||
|
|
@ -238,7 +274,7 @@
|
|||
width: 100%;
|
||||
background: #F8F8FA;
|
||||
height: calc(100% - v-bind(cssMenuButtonTop));
|
||||
padding-bottom: 226rpx;
|
||||
padding-bottom: 160rpx;
|
||||
// height: 100%;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
|
@ -512,14 +548,14 @@
|
|||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 226rpx;
|
||||
height: 160rpx;
|
||||
background-color: #FFFFFF;
|
||||
padding: 40rpx 32rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
|
||||
.input {
|
||||
width: 366rpx;
|
||||
width: 70%;
|
||||
height: 72rpx;
|
||||
background: #F7F8FC;
|
||||
border-radius: 50rpx;
|
||||
|
|
@ -551,6 +587,129 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.private {
|
||||
width: 70%;
|
||||
background-color: #4ED17F;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 42rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.recommend {
|
||||
// height: 400rpx;
|
||||
|
||||
.recommend-title {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 32rpx 0;
|
||||
color: #252931;
|
||||
|
||||
.icon {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.car-list {
|
||||
padding: 20rpx 24rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
.car-list-item {
|
||||
width: 48.5%;
|
||||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
margin-bottom: 25rpx;
|
||||
|
||||
.car-photo {
|
||||
width: 100%;
|
||||
height: 300rpx;
|
||||
}
|
||||
|
||||
.item-bottom {
|
||||
padding: 20rpx 16rpx;
|
||||
|
||||
.introduce {
|
||||
font-weight: 600;
|
||||
font-size: 28rpx;
|
||||
text-align: center;
|
||||
user-select: text;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 1;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.tag {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
margin: 12rpx 0;
|
||||
|
||||
.tag-left,
|
||||
.tag-right {
|
||||
padding: 8rpx;
|
||||
font-size: 20rpx;
|
||||
border: 1rpx solid #86898C;
|
||||
box-sizing: border-box;
|
||||
border-radius: 8rpx;
|
||||
color: #565960;
|
||||
}
|
||||
|
||||
.tag-left {
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.price-view {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.price-view-left {
|
||||
color: #FF4400;
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
margin-right: 16rpx;
|
||||
|
||||
.symbol {
|
||||
font-size: 28rpx;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.price-view-right {
|
||||
font-size: 20rpx;
|
||||
color: #86898C;
|
||||
}
|
||||
}
|
||||
|
||||
.user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 24rpx;
|
||||
color: #86898C;
|
||||
|
||||
.avatar {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 16rpx;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,355 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
<!-- <image src="../../../../static/common/back.png" mode="aspectFit" class="image" @click="goBack('',3)">
|
||||
</image> -->
|
||||
<!-- <uni-nav-bar class="nav-bar" backgroundColor="rgba(255,255,255,0)" :statusBar="true">
|
||||
<template v-slot:left>
|
||||
<uni-icons type="left" size="24"></uni-icons>
|
||||
</template>
|
||||
</uni-nav-bar> -->
|
||||
<view class="header">
|
||||
<view class="userinfo">
|
||||
<image
|
||||
src="https://tse4-mm.cn.bing.net/th/id/OIP-C.z6L4Gd4XLjdJ-pNrx19Z4QAAAA?w=162&h=180&c=7&r=0&o=5&pid=1.7"
|
||||
mode="scaleToFill" class="avatar"></image>
|
||||
<view class="userinfo-text">
|
||||
<view class="userinfoName">
|
||||
<text>骑行王者</text>
|
||||
<image src="../../../../static/common/vip.png" mode="scaleToFill" class="vip-icon"></image>
|
||||
</view>
|
||||
<view class="car-lv">
|
||||
<view class="car">
|
||||
阿普利亚 GPR 125
|
||||
</view>
|
||||
<view class="Lv">
|
||||
<image src="../../../../static/mine/lv1.png" mode="scaleToFill" class="lv-img"></image>
|
||||
黑铁骑士
|
||||
</view>
|
||||
</view>
|
||||
<view class="user-profile">
|
||||
<view class="user-profile-item">
|
||||
<text class="num">999+</text>
|
||||
<text>关注</text>
|
||||
</view>
|
||||
<view class="user-profile-item">
|
||||
<text class="num">17w</text>
|
||||
<text>粉丝</text>
|
||||
</view>
|
||||
<view class="user-profile-item">
|
||||
<text class="num">66</text>
|
||||
<text>获赞</text>
|
||||
</view>
|
||||
<view class="user-profile-item">
|
||||
<text class="num">999</text>
|
||||
<text>礼物</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="intro">
|
||||
<text class="intro-text">这是简介文字，欢迎大家多关注我，第一时间分享骑行实时动态</text>
|
||||
<view class="sex-ip">
|
||||
<image src="../../../../static/common/sex_nv.png" mode="scaleToFill" class="sex-img"></image>
|
||||
<view class="ip">
|
||||
<text>IP:四川成都</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="message">
|
||||
<view class="message-left">
|
||||
消息
|
||||
</view>
|
||||
<view class="message-right">
|
||||
关注
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="main">
|
||||
<view class="control">
|
||||
<view class="control-item active">
|
||||
<text>动态</text>
|
||||
</view>
|
||||
<view class="control-item">
|
||||
<text>闲置</text>
|
||||
</view>
|
||||
<view class="control-item">
|
||||
<text>二手</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="article">
|
||||
<view class="article-item" v-for="(item,index) in dataResource" :key="index"
|
||||
@click="goBack('/pages/circle/views/details/details',1)">
|
||||
<view class="article-item-head">
|
||||
<view class="article-item-head-left">
|
||||
<image src="../../../../static/mine/lv1.png" mode="" class="avatar"></image>
|
||||
<view class="article-item-head-center">
|
||||
<view class="center-head">
|
||||
<text class="center-head-name">金卡纳练习会</text>
|
||||
<image src="../../../../static/common/vip.png" class="vip-img" mode=""></image>
|
||||
</view>
|
||||
<view class="center-foot">
|
||||
<text style="padding-right: 22rpx;">12-31</text>
|
||||
<text>宝马车主发布</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="article-item-head-right">
|
||||
<view class="item-first">
|
||||
<text>关注</text>
|
||||
</view>
|
||||
<image src="../../../../static/circle/icon_list_more.png" mode="aspectFit" class="image">
|
||||
</image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="article-item-content">
|
||||
<view class="topicList-item">
|
||||
<image src="../../../../static/circle/icon_huati.png" mode="aspectFill"
|
||||
class="topicList-item-iamge">
|
||||
</image>
|
||||
<text class="topicList-item-text">如何有效防止摔车</text>
|
||||
</view>
|
||||
<view class="article-item-content-title">
|
||||
<text>朋友上周推荐的这个骑行软件，数据记录好精准，感觉很不错！</text>
|
||||
</view>
|
||||
<view class="article-item-content-text">
|
||||
1.低速时不要猛捏前刹，避震回弹会使车身重心不稳，女孩子体力小，这种清空很容易摔倒
|
||||
2.过弯时眼睛不要到处乱看，一定要盯着你要去的方向，用户余光快速观察环境，已备随机应对，并且一定要减速！
|
||||
2.过弯时眼睛不要到处乱看，一定要盯着你要去的方向，用户余光快速观察环境，已备随机应对，并且一定要减速!
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view :class="`grid-container${item.url.length<=9?item.url.length:9}`">
|
||||
<view class="grid-item" v-for="(itemchild,indexchild) in item.url" :key="indexchild">
|
||||
<image :lazy-load="true" :src="itemchild" @click="handPreviewImage(item.url)"
|
||||
mode="aspectFill" class="grid-item-iamge">
|
||||
</image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="article-item-address">
|
||||
<image src="../../../../static/common/icon-address.png" mode="aspectFill" class="image"></image>
|
||||
<text>四川省成都市青龙湖湿地公园</text>
|
||||
</view>
|
||||
<view class="article-item-review">
|
||||
<text>说点什么吧~</text>
|
||||
</view>
|
||||
<view class="article-item-controls">
|
||||
<view class="article-item-controls-left-nav">
|
||||
<image src="../../../../static/common/icon-share.png" mode="aspectFill" class="image">
|
||||
</image>
|
||||
<text>分享</text>
|
||||
</view>
|
||||
<view class="article-item-controls-left-nav">
|
||||
<image src="../../../../static/common/icon-review.png" mode="aspectFill" class="image">
|
||||
</image>
|
||||
<text>评论</text>
|
||||
</view>
|
||||
<view class="article-item-controls-left-nav">
|
||||
<image src="../../../../static/common/icon-upvote.png" mode="aspectFill" class="image">
|
||||
</image>
|
||||
<text>点赞</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
getMenuButton,
|
||||
rpxTopx
|
||||
} from "@/utils/common.js"
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
let menuButtonInfo = getMenuButton()
|
||||
let menuButtonTop = rpxTopx(menuButtonInfo.top + menuButtonInfo.height)
|
||||
let cssTop = menuButtonTop + 'rpx'
|
||||
// #endif
|
||||
</script>
|
||||
<style>
|
||||
page {
|
||||
height: 100%;
|
||||
background-color: #f8f9fd;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.header {
|
||||
width: 100%;
|
||||
// height: 500rpx;
|
||||
background-image: url(https://rzyx-tycm.bj.bcebos.com/moto/bg06.png);
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
padding-top: 136rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.userinfo {
|
||||
display: flex;
|
||||
padding: 0 24rpx 24rpx;
|
||||
|
||||
.avatar {
|
||||
width: 172rpx;
|
||||
height: 172rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.userinfo-text {
|
||||
flex: 1;
|
||||
|
||||
.userinfoName {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
font-size: 48rpx;
|
||||
|
||||
.vip-icon {
|
||||
width: 48rpx;
|
||||
height: 32rpx;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.car-lv {
|
||||
display: flex;
|
||||
font-size: 20rpx;
|
||||
align-items: center;
|
||||
color: #FFFFFF;
|
||||
margin: 14rpx 0;
|
||||
|
||||
.car,
|
||||
.Lv {
|
||||
border: 1rpx solid #677973;
|
||||
padding: 12rpx;
|
||||
border-radius: 12rpx;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.car {
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.lv-img {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.user-profile {
|
||||
display: flex;
|
||||
|
||||
.user-profile-item {
|
||||
color: #FFFFFF;
|
||||
// flex: 1;
|
||||
font-size: 22rpx;
|
||||
margin-right: 24rpx;
|
||||
|
||||
.num {
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
margin-right: 5rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.user-profile-item:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.intro {
|
||||
background-color: #fff;
|
||||
padding: 32rpx 24rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 24rpx 24rpx 0 0;
|
||||
margin-top: 50rpx;
|
||||
|
||||
.intro-text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.sex-ip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 22rpx;
|
||||
margin-top: 16rpx;
|
||||
|
||||
.sex-img {
|
||||
width: 48rpx;
|
||||
height: 32rpx;
|
||||
vertical-align: middle;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.ip {
|
||||
background-color: #f5f6fa;
|
||||
padding: 0rpx 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.message {
|
||||
margin-top: 28rpx;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
|
||||
.message-left {
|
||||
width: 188rpx;
|
||||
background-color: #effbf3;
|
||||
padding: 18rpx 0;
|
||||
border-radius: 48rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.message-right {
|
||||
flex: 1;
|
||||
background-color: #4ed17f;
|
||||
padding: 18rpx 0;
|
||||
border-radius: 48rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main {
|
||||
height: 100%;
|
||||
padding: 24rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.control {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.control-item {
|
||||
margin: 0 25rpx;
|
||||
color: #565960;
|
||||
}
|
||||
|
||||
.active {
|
||||
color: #252931;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.active::after {
|
||||
content: '';
|
||||
width: 50%;
|
||||
height: 6rpx;
|
||||
background: #252931;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
margin-top: 12rpx;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 876 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 2.4 KiB |
Loading…
Reference in New Issue