hly
/
universal-wechat-uniapp-241007
generated from hly/uniapp-shop-templates
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

首页和个人中心

master
Bobi 4 months ago
parent
e36ec50299
commit
d4af4c2e1e
3 changed files with 460 additions and 249 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +11
    -1
      pages.json
  2. +141
    -234
      pages/index/center.vue
  3. +308
    -14
      pages/index/index.vue

+ 11
- 1
pages.json View File

@ -89,5 +89,15 @@
"backgroundColor": "#F8F8F8", "backgroundColor": "#F8F8F8",
"navigationStyle": "custom" "navigationStyle": "custom"
}, },
"uniIdRouter": {}
"uniIdRouter": {},
"condition" : { //模式配置，仅开发期间生效
"current": 0, //当前激活的模式(list 的索引项)
"list": [
{
"name": "", //模式名称
"path": "", //启动页面，必选
"query": "" //启动参数，在页面的onLoad函数里面得到
}
]
}
} }

+ 141
- 234
pages/index/center.vue View File

@ -1,7 +1,70 @@
<template> <template>
<view class="page"> <view class="page">
<view class="beijin">
<view class=" profile">
<view class="o">
<view class="headImage">
<!-- <img src="https://k.sinaimg.cn/n/sinakd20117/0/w800h800/20240127/889b-4c8a7876ebe98e4d619cdaf43fceea7c.jpg/w700d1q75cms.jpg"
alt="" /> -->
<image
src="https://k.sinaimg.cn/n/sinakd20117/0/w800h800/20240127/889b-4c8a7876ebe98e4d619cdaf43fceea7c.jpg/w700d1q75cms.jpg"
mode="aspectFill"></image>
</view>
<view class="setUp">
设置
</view>
</view>
<view class="account">
<view class="number">
狐友1712378974678376
</view>
<view class="gender">
<uv-icon name="man" size="34rpx" color="rgb(127 200 239)"></uv-icon>
</view>
<view class="authentication">
未认证
</view>
</view>
<view class="Days">
你已经成为狐友133天啦~
</view>
<view class="box">
<view class="followWithnterest">
<view class="digit">
2
</view>
<view class="close">
关注
</view>
</view>
<view class="shut">
|
</view>
<view class="fenst">
<view class="digit">
0
</view>
<view class="fans">
粉丝
</view>
</view>
</view>
</view>
</view>
<view class="Content">
<uv-tabs :list="list" @click="click" lineColor="black" lineWidth="35" lineHeight="5" ></uv-tabs>
</view>
<tabber select="3" /> <tabber select="3" />
</view> </view>
@ -9,274 +72,118 @@
<script> <script>
import tabber from '@/components/base/tabbar.vue' import tabber from '@/components/base/tabbar.vue'
import {
mapGetters
} from 'vuex'
import userShopCommission from '@/components/userShop/userShopCommission.vue'
export default { export default {
components: { components: {
tabber, tabber,
userShopCommission,
},
computed: {
...mapGetters(['userShop']),
customStyle1() {
return {
height: '60rpx',
background: '#FFF',
color: '#000000',
fontSize: '36rpx',
borderRadius: '40rpx', //圆角
// nvue中必须是下方的写法
'border-top-right-radius': '40rpx',
'border-bottom-left-radius': '40rpx',
'border-bottom-right-radius': '40rpx',
'width': '150rpx',
}
},
customStyle2() {
return {
height: '60rpx',
background: '#fd5100',
color: '#FFF',
fontSize: '34px',
borderRadius: '40rpx', //圆角
// nvue中必须是下方的写法
'border-top-right-radius': '40rpx',
'border-bottom-left-radius': '40rpx',
'border-bottom-right-radius': '40rpx',
'width': '150rpx',
}
}
}, },
computed: {},
data() { data() {
return { return {
show: false,
list: [{
name: '关注',
}, {
name: '评论',
}]
} }
}, },
methods: { methods: {
headBtn() {
let self = this
uni.showModal({
title: '演示切换角色之后的效果',
success(res) {
if (res.confirm) {
self.$store.state.shop = !self.$store.state.shop
}
}
})
},
// 联系客服按钮回调
contactUs() {
this.show = true
},
confirm() {
this.show = false
},
cancle() {
this.show = false
},
click(item) {
console.log('item', item);
}
} }
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.page { .page {
.beijin {
background: linear-gradient(to bottom, rgb(85, 94, 123), rgb(45, 51, 73));
background-color: black;
color: white;
.warp {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.rect {
width: 600rpx;
height: 300rpx;
background-color: #fff;
border-radius: 20rpx;
overflow: hidden;
.title {
padding: 10rpx 0 0 15rpx;
background-color: #fd5100;
color: #FFF;
text-align: left;
width: 100%;
height: 18%;
font-size: 36rpx;
}
.center {
height: 40%;
display: flex;
justify-content: center;
align-items: center;
font-size: 36rpx;
}
.bottom {
display: flex;
justify-content: center;
gap: 50rpx;
}
}
}
.profile {
padding: 40rpx;
padding-top: 160rpx;
.box {
padding: 5rpx 10rpx;
display: flex;
align-items: center;
text-align: center;
image {
width: 100%;
height: 100%;
}
.followWithnterest {
.digit {
padding: 20rpx;
}
.head {
display: flex;
background-color: #fff;
padding: 40rpx 20rpx;
align-items: center;
position: relative;
.headImage {
width: 120rpx;
height: 120rpx;
background-image: url(/static/image/center/3.png);
background-size: 100% 100%;
overflow: hidden;
border-radius: 50%;
margin-right: 40rpx;
}
.close {
}
.info {
font-size: 28rpx;
.vip {
background-color: #FCCC92;
color: #FA6239;
width: 100rpx;
display: flex;
justify-content: center;
align-items: center;
height: 40rpx;
border-radius: 20rpx;
margin-top: 20rpx;
}
}
.shut{
margin: 0rpx 20rpx;
}
.fenst {
.digit {
padding: 20rpx;
}
.fans {
}
}
}
.name {
font-size: 32rpx;
}
.account {
display: flex;
align-items: center;
.tips {
font-size: 26rpx;
color: #ABABAB;
}
}
.number {
letter-spacing: 2rpx;
margin-top: 10rpx;
}
.headBtn {
margin-left: auto;
padding: 15rpx 20rpx;
background-color: $uni-color;
color: #fff;
border-radius: 20rpx;
margin-top: 50rpx;
}
.gender {
.setting {
position: absolute;
right: 50rpx;
top: 50rpx;
}
}
margin: 20rpx 10rpx;
.userShop {
.userList {
.title {
font-size: 32rpx;
font-weight: 900;
padding: 20rpx;
}
}
.list {
display: flex;
flex-wrap: wrap;
.authentication {
font-size: 20rpx;
.item {
width: 270rpx;
margin: 20rpx;
display: flex;
flex-direction: column;
padding: 40rpx 30rpx;
background-color: #fff;
border-radius: 30rpx;
line-height: 60rpx;
.name {}
.num {
color: $uni-color;
font-weight: 600;
font-size: 28rpx;
} }
} }
}
}
}
.user {
.line {
display: flex;
background-color: #fff;
margin-top: 20rpx;
padding: 20rpx 0;
.item {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
padding: 20rpx 0;
&:nth-child(1) {
border-right: 1px solid #00000013;
.Days {
margin-top: 15rpx;
font-size: 22rpx;
letter-spacing: 2rpx;
} }
.image {
width: 100rpx;
height: 70rpx;
margin-right: 20rpx;
.o {
display: flex;
align-items: center;
justify-content: space-between;
.headImage {
image {
height: 100px;
width: 100px;
border-radius: 50%;
}
}
.setUp {
}
} }
} }
} }
.grid {
flex-direction: column;
font-size: 26rpx;
padding: 20rpx;
.title {
margin-bottom: 30rpx;
font-size: 28rpx;
font-weight: 600;
}
.image {
width: 70rpx;
height: 70rpx;
margin-bottom: 10rpx;
}
text {
text-align: center;
width: 120rpx;
}
}
.Content {}
} }
</style> </style>

+ 308
- 14
pages/index/index.vue View File

@ -1,13 +1,110 @@
<template> <template>
<view class="page"> <view class="page">
<!-- 瑶都万能墙 -->
<view class="Headbackground">
<view class="top">
<view class=" profilePicture">
</view>
<view class="UniversalWall">
<view class="dynamic">
瑶都万能墙
</view>
<view class="dynamics">
13542动态|23212江华人
</view>
</view>
<view class="join">
加入
</view>
</view>
</view>
<view class="life">
<view class="mouse"
v-for="(item, index) in 4">
<view class="RentingAhouseimg">
</view>
<view class="RentingAhouse">
租房
</view>
</view>
</view>
<view class="LabelOptions">
<uv-tabs :list="list" @click="click"></uv-tabs>
</view>
<image src="https://cdn.uviewui.com/uview/swiper/swiper3.png"
style="w100p"
mode="widthFix"></image>
<PrivacyAgreementPoup/>
<tabber select="0"/>
<view class="works"
v-for="(item, index) in 10">
<view class="box">
<view class="headPortraitimg">
</view>
<view class="YaoduUniversalWall">
<view class="heide">
<view class="qing">
瑶都万能墙
</view>
<view class="inde">
男性
</view>
<view class="inde">
99年
</view>
<view class="inde">
大路铺镇
</view>
<view class="authentication">
官方认证
</view>
</view>
<view class="Times">
<view class="TimeMonth">
10-08
</view>
<view class="Month">
12:34发布
</view>
</view>
</view>
</view>
<view class="dynamics">
漫时光蛋糕店私人蛋糕订制
漫时光蛋糕店私人蛋糕订制
漫时光蛋糕店私人蛋糕订制
漫时光蛋糕店私人蛋糕订制
漫时光蛋糕店私人蛋糕订制
</view>
<view class="">
</view>
<view class="Artworkimages">
<view class="wrokimg"
v-for="(img, i) in 10">
<image src="https://img2.baidu.com/it/u=731471589,1077533873&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067" alt="" />
</view>
</view>
<view class="bottom">
<view class="browse">
6789浏览
</view>
<view class="browse">
231条评论
</view>
<view class="Leavingamessage">
<uv-icon
size="30rpx"
name="chat"></uv-icon>
</view>
</view>
</view>
<PrivacyAgreementPoup />
<tabber select="0" />
</view> </view>
</template> </template>
@ -16,23 +113,220 @@
import tabber from '@/components/base/tabbar.vue' import tabber from '@/components/base/tabbar.vue'
import mixinsList from '@/mixins/list.js' import mixinsList from '@/mixins/list.js'
export default { export default {
mixins : [mixinsList],
components : {
mixins: [mixinsList],
components: {
tabber, tabber,
PrivacyAgreementPoup, PrivacyAgreementPoup,
}, },
data() { data() {
return { return {
list: [{
name: '圈子动态',
}, {
name: '二手集市',
}, {
name: '游戏组局'
}, {
name: '求租求购'
}, {
name: '婚恋交友'
}, {
name: '美食'
}, {
name: '文化'
}, {
name: '财经'
}, {
name: '手工'
}]
} }
}, },
computed : {
},
computed: {},
methods: { methods: {
click(item) {
console.log('item', item);
}
} }
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
</style>
.Headbackground {
display: flex;
align-items: center;
height: 400rpx;
background: linear-gradient(to bottom, rgb(85, 94, 123), rgb(45, 51, 73));
.top {
display: flex;
color: white;
padding: 35rpx;
.profilePicture {
width: 100rpx;
height: 100rpx;
background-color: greenyellow;
border-radius: 15rpx;
}
.UniversalWall {
padding: 0rpx 45rpx;
.dynamic {
font-size: 40rpx;
letter-spacing: 5rpx;
}
.dynamics {
margin-top: 20rpx;
font-size: 25rpx;
}
}
.join {
width: 125rpx;
height: 50rpx;
background-color: #1671ff;
margin-top: 50rpx;
margin-left: 80rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50rpx;
}
}
}
.life {
margin-top: 20rpx;
display: flex;
justify-content: space-around;
text-align: center;
.mouse {
.RentingAhouseimg {
margin-bottom: 15rpx;
width: 125rpx;
height: 85rpx;
background-color: #ffffff;
}
}
}
.works {
margin: 24rpx;
background-color: #fff;
padding: 30rpx;
border-radius: 10rpx;
box-shadow: 0 0 6rpx 6rpx #00000011;
.box {
display: flex;
.headPortraitimg {
width: 100rpx;
height: 100rpx;
background-color: greenyellow;
border-radius: 15rpx;
}
.YaoduUniversalWall{
padding: 0rpx 10rpx;
.heide{
display: flex;
justify-content: center;
align-items: center;
}
.inde{
display: flex;
justify-content: center;
align-items: center;
padding: 0rpx 10rpx;
margin: 0rpx 5rpx;
font-size: 20rpx;
height: 30rpx;
color: white;
background-color:rgb(124,136,242);
border-radius: 7rpx;
}
.authentication{
display: flex;
justify-content: center;
align-items: center;
padding: 0rpx 10rpx;
margin: 0rpx 5rpx;
font-size: 20rpx;
height: 34rpx;
padding: 0rpx 10rpx;
color: white;
background-color:#ffd036;
border-radius: 7rpx;
}
.Times{
display: flex;
padding: 5rpx 0rpx;
font-size: 20rpx;
.Month{
margin: 0rpx 15rpx;
}
}
}
}
.personalInformation{
display: flex;
.inde{
font-size: 25rpx;
padding: 0rpx 8rpx;
}
.authentication{
font-size: 25rpx;
}
}
.dynamics{
margin-top: 20rpx;
font-size: 20rpx;
font-weight: bold;
line-height: 35rpx;
letter-spacing: 5rpx;
}
.Artworkimages{
display: flex;
flex-wrap: wrap;
.wrokimg{
margin: 10rpx;
image{
height: 190rpx;
width: 190rpx;
border-radius: 20rpx;
}
}
}
.bottom{
display: flex;
font-size: 20rpx;
.browse{
margin: 0rpx 30rpx;
color: rgb(132,132,132);
}
.Leavingamessage{
height: 20rpx;
width: 20rpx;
margin-left: auto;
}
}
}
</style>

Write Preview
Loading…
Cancel
Save