Skip to content

J
jd-vx-app
Commit 1594045f authored by 肖健's avatar 肖健
Browse files
Options

广告动态垂直居中

parent e4e40ee1
Hide whitespace changes
Inline Side-by-side
Showing with 686 additions and 631 deletions
pages/personal.vue
View file @ 1594045f
<!--
* @Author: euzhi
* @Description: 个人中心
-->
<template>
<view class="" v-if="show">
<view class="personal">
<view class="ps__bg">
<view class="ps__title"></view>
<view class="ps__info">
<view class="info__cover">
<image v-if="avatar" :src="avatar" />
<image v-else src="http://jdnc-oss.uzosp.com/2022/06/23/c53258e744fd43e2bddca70511a94e2e.png" />
</view>
<view>
<view class="info__name">{{userInfo.nickName || '默认昵称'}}</view>
<view class="view__info" @click="editInfo">
查看个人主页或编辑资料
<span>
<image src="@/static/my/my7.png">
</span>
</view>
</view>
</view>
<!-- <view class="ps__shop">
<view class="shop__tab">
<view class="tab__top">
<span>商品订单</span>
<view class="tab__all" @click="goOrder(0)">
<span>全部订单</span>
<span>
<image src="@/static/my/my5.png">
</span>
</view>
</view>
<view class="tab__bottom">
<view class="tab__item" v-for="(vo,inx) in items" :key="inx" @click="goOrder(inx+1)">
<image :src="vo.icon" />
<view>{{vo.title}}</view>
</view>
</view>
</view>
</view> -->
</view>
<view class="ps__list">
<view class="list__item" v-for="(vo,inx) in menu" :key="inx" @click="goUrl(vo)">
<view class="list__left">
<image :src="vo.icon" alt="" srcset="">
{{vo.title}}
</view>
<view class="list__right">
<image src="@/static/my/my5.png" alt="" srcset="">
</view>
</view>
</view>
<view class="ps__btn" v-if="token" @click="loginOut">退出登录</view>
<u-gap bgColor="transparent" v-if="carouselFlag" height="20"></u-gap>
<view v-if="carouselFlag" style="width: 700rpx;margin: 0 auto;position: relative;">
<u-swiper radius="12rpx" :height="120" :list="list5" circular @change="e => current = e.current"
:autoplay="true" keyName="imageUrl" @click="goOtherLink">
</u-swiper>
<view style="position: absolute;right: 10rpx; top:10rpx;z-index: 99999;">
<u--image src="/static/my/close.png" width="12px" height="12px" @click="closeCarouselFlag"></u--image>
</view>
</view>
</view>
<u-gap bgColor="transparent" height="70"></u-gap>
</view>
</template>
<script>
import util from '@/pages/login/util.js'
let plugin = requirePlugin('loginPlugin');
export default {
data() {
return {
show:false,
logoutFlag : false,
menu: [
// {
// icon: require("@/static/my/my01.png"),
// title: "我的订单",
// url: "",
// type:"jd"
// },
// {
// icon: require("@/static/my/my12.png"),
// title: "我的地址",
// url: "/pagesD/pages/personal/myAddress"
// },
{
icon: require("@/static/my/my8.png"),
title: "使用帮助",
url: "/pagesD/pages/personal/help"
},
{
icon: require("@/static/my/my1.png"),
title: "常见问题",
url: "/pagesD/pages/personal/asking"
},
{
icon: require("@/static/my/my11.png"),
title: "问题反馈",
url: "/pagesD/pages/personal/ask"
},
{
icon: require("@/static/my/my15.png"),
title: "微信通知设置",
url: ""
},
],
items: [{
title: '待发货',
icon: require('@/static/my/my2.jpg'),
page: 0
},
{
title: '待收货',
icon: require('@/static/my/my3.png'),
page: 2
}, {
title: '已完成',
icon: require('@/static/my/my14.png'),
page: 3
}, {
title: '退款/售后',
icon: require('@/static/my/my9.png'),
page: 4
}
],
//用户信息
userInfo: null,
//头像
avatar: '',
token:null,
list5: [],
current: 0,
carouselFlag:false,
}
},
methods: {
closeCarouselFlag() {
this.carouselFlag = false
},
getRotationList() {
let opts = {
url: '/app/index/adv/2',
method: 'get'
};
this.http.httpTokenRequest(opts, {}).then(res => {
if (res.data.code == 200 && res.data.data && res.data.data.length > 0) {
let data = []
data = res.data.data
let imgList = []
data.forEach(e => {
imgList.push(e)
})
this.list5 = imgList
this.carouselFlag = true
}
})
},
// 轮播跳转其他页面
goOtherLink(index) {
let item = this.list5[index]
this.$goToLocation(item)
},
loginOut() {
this.$http.request({
url:'/logout',
method:'post',
data:{},
}).then(res => {
this.token = null
uni.removeStorageSync('userToken')
uni.removeStorageSync('xcxIndexPath')
// uni.removeStorageSync('openid')
plugin.logout().then((res) => {
console.jdLoginLog(res, 'logoutres');
uni.reLaunch({
url: '/pages/main'
});
});
})
},
goOrder(current) {
let token = uni.getStorageSync('userToken');
uni.removeStorageSync('routerLogin')
if(!token){
// uni.navigateTo({
// url: '/pages/binding/index?url=/pages/main&index=4'
// })
let returnPage= '/pages/main';
let pageType = "reLaunch"
uni.navigateTo({
url:"/pages/login/index/index?returnPage="+returnPage+'&pageType='+pageType
})
return;
}
uni.navigateTo({
url: '/pagesD/pages/personal/myOrder?current=' + current
});
},
goUrl(vo) {
let token = uni.getStorageSync('userToken');
uni.removeStorageSync('routerLogin')
uni.setStorageSync('routerLogin', vo.url)
if(!token){
// uni.navigateTo({
// url: '/pages/binding/index?url=/pages/main&index=4'
// })
let returnPage= '/pages/main';
let pageType = "reLaunch"
uni.navigateTo({
url:"/pages/login/index/index?returnPage="+returnPage+'&pageType='+pageType
})
return;
}
if(vo.type == "jd"){
uni.navigateToMiniProgram({
appId: 'wx91d27dbf599dff74', // 跳转目标小程序的id
path: '', // 目标小程序的页面路径
extraData: { // 需要携带的参数
},
success(res) {
// 打开成功
}
})
return;
}
if (vo.title != '微信通知设置') {
uni.navigateTo({
url: vo.url
});
} else {
this.openMsg()
}
},
editInfo() {
let token = uni.getStorageSync('userToken');
uni.removeStorageSync('routerLogin')
uni.setStorageSync('routerLogin', '/pagesD/pages/personal/userInfo')
if(!token){
// uni.navigateTo({
// url: '/pages/binding/index?url=/pages/main&index=4'
// })
uni.navigateTo({
url: '/pages/login/index/index'
})
return;
}
uni.navigateTo({
url: '/pagesD/pages/personal/userInfo'
});
},
async getUserInfo() {
let token = uni.getStorageSync('userToken');
if(!token){
this.logoutFlag = false
return
}
this.logoutFlag = true
let opts = {
url: '/app/user/info',
method: 'get'
};
await this.http.httpTokenRequest(opts, {}).then(res => {
if (res.data.code == 200) {
this.userInfo = res.data.data
if (this.userInfo.avatar) {
this.avatar = this.userInfo.avatar
}
} else {
uni.showToast({
title: res.data.msg,
icon: 'none',
duration: 2000
});
}
})
},
openMsg() {
var that = this;
let nc_templateid = that.nc_templateid;
// 获取用户的当前设置，判断是否点击了“总是保持以上，不在询问”
wx.getSetting({
withSubscriptions: true, //是否获取用户订阅消息的订阅状态，默认false不返回
success(res) {
if (that.is_authorization) {
wx.openSetting({
withSubscriptions: true,
});
} else {
if (res.subscriptionsSetting[nc_templateid] == "reject") {
//用户点击了“总是保持以上，不再询问”
wx.showModal({
title: "温馨提示",
content: "检测到您没有开启订阅消息的权限，是否去设置？",
success: function (modal) {
if (modal.confirm) {
// 点击肯定
wx.openSetting({
withSubscriptions: true,
});
that.is_authorization = true;
uni.setStorageSync("is_authorization", true);
} else {
uni.showToast({
title: "您已拒绝订阅消息授权，无法接收通知",
icon: "error",
});
that.is_authorization = false;
}
},
});
} else {
// 用户没有点击“总是保持以上，不再询问”则每次都会调起订阅消息
// var templateid = that.setting.templateid.map(item => item.tempid)；
let tmpid = [nc_templateid];
uni.requestSubscribeMessage({
tmplIds: tmpid,
success(res) {
if (res[tmpid[0]] == "accept") {
uni.showToast({
title: "订阅成功",
icon: "none",
});
that.is_authorization = true;
uni.setStorageSync("is_authorization", true);
} else {
uni.showToast({
title: "您拒绝订阅消息授权，无法接收通知",
icon: "none",
});
that.is_authorization = false;
}
},
fail: (res) => {
wx.showModal({
title: "温馨提示",
content: "检测到您没有开启订阅消息的权限，是否去设置？",
success: function (modal) {
if (modal.confirm) {
// 点击肯定
wx.openSetting({
withSubscriptions: true,
});
that.is_authorization = true;
uni.setStorageSync("is_authorization", true);
} else {
uni.showToast({
title: "您已拒绝订阅消息授权，无法接收通知",
icon: "error",
});
that.is_authorization = false;
}
},
});
},
});
}
}
},
});
},
},
mounted() {
setTimeout(() => {
this.show=true
}, 100);
this.token = uni.getStorageSync('userToken');
if(this.token){
this.getUserInfo()
}
this.getRotationList()
},
onReady: function () {
uni.setNavigationBarTitle({
title: '个人中心'
});
},
};
</script>
<style lang="scss" scoped>
.personal {
.ps__bg {
background: url('@/static/my/my-bg.png') no-repeat;
background-size: cover;
z-index: 999;
padding-bottom:40rpx;
.ps__title {
font-size: 40rpx;
font-family: PingFang SC;
font-weight: bold;
color: #FFFFFF;
text-align: center;
padding-top: 40rpx;
}
.ps__info {
padding: 65rpx 40rpx 0rpx 40rpx;
display: flex;
align-items: center;
position: relative;
.info__cover {
width: 170rpx;
height: 170rpx;
text-align: center;
background: url('@/static/my/my10.png') no-repeat;
background-size: 100% 100%;
margin-right: 32rpx;
image {
width: 130rpx;
height: 130rpx;
border-radius: 50%;
position: relative;
top:16rpx;left:-5rpx;
}
}
.info__name {
font-size: 38rpx;
font-family: PingFang SC;
font-weight: bold;
color: #FFFFFF;
opacity: 0.96;
margin-bottom: 28rpx;
}
.view__info {
font-size: 30rpx;
font-family: PingFang SC;
font-weight: 500;
color: #FFFFFF;
opacity: 0.96;
display: flex;
align-items: center;
span {
position: absolute;
right: 40rpx;
image {
width: 16rpx;
height: 26rpx;
}
}
}
}
.ps__shop {
padding: 0 40rpx;
.shop__tab {
padding: 30rpx;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.16);
border-radius: 20rpx;
.tab__top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20rpx;
>span {
font-size: 34rpx;
font-family: PingFang SC;
font-weight: bold;
color: #333333;
}
.tab__all {
font-size: 26rpx;
font-family: PingFang SC;
font-weight: 500;
color: #999999;
image {
width: 11rpx;
height: 18rpx;
padding-left: 20rpx;
}
}
}
.tab__bottom {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 20rpx;
.tab__item {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #666666;
width: 25%;
text-align: center;
image {
width: 60rpx;
height: 49rpx;
margin-bottom: 10rpx;
}
}
}
}
}
}
.ps__list {
background: #FFFFFF;
box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.16);
border-radius: 20rpx;
// margin-top: 20rpx;
position: relative;
top: -20rpx;
.list__item {
position: relative;
padding: 26rpx 40rpx;
display: flex;
align-items: center;
justify-content: space-between;
.list__left {
font-size: 32rpx;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
display: flex;
align-items: center;
image {
width: 28rpx;
height: 28rpx;
margin-right: 34rpx;
}
}
.list__right {
image {
width: 11rpx;
height: 18rpx;
}
}
}
.list__item::before {
content: '';
position: absolute;
right: 0;
bottom: 0;
width: 650rpx;
height: 1rpx;
background: rgba(0, 0, 0, .1);
}
// .list__item:nth-of-type(2) {
// .list__left {
// image {
// width: 29rpx;
// height: 25rpx;
// margin-right: 32rpx;
// }
// }
// }
// .list__item:nth-of-type(3) {
// .list__left {
// image {
// width: 28rpx;
// height: 28rpx;
// margin-right: 33rpx;
// }
// }
// }
// .list__item:nth-of-type(4) {
// .list__left {
// image {
// width: 28rpx;
// height: 28rpx;
// margin-right: 33rpx;
// }
// }
// }
// .list__item:last-child {
// .list__left {
// image {
// width: 28rpx;
// height: 28rpx;
// margin-right: 33rpx;
// }
// }
// }
.list__item:nth-last-of-type(1)::before {
content: '';
background: transparent
}
}
.ps__btn {
margin-top: 20rpx;
width: 100%;
height: 100rpx;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.16);
border-radius: 20rpx;
text-align: center;
line-height: 100rpx;
font-size: 32rpx;
font-family: PingFang SC;
font-weight: 500;
color: #666666;
}
}
</style>
<!--
* @Author: euzhi
* @Description: 个人中心
-->
<template>
<view class="" v-if="show">
<view class="personal">
<view class="ps__bg">
<view class="ps__title"></view>
<view class="ps__info">
<view class="info__cover">
<image v-if="avatar" :src="avatar" />
<image v-else src="http://jdnc-oss.uzosp.com/2022/06/23/c53258e744fd43e2bddca70511a94e2e.png" />
</view>
<view>
<view class="info__name">{{userInfo.nickName || '默认昵称'}}</view>
<view class="view__info" @click="editInfo">
查看个人主页或编辑资料
<span>
<image src="@/static/my/my7.png">
</span>
</view>
</view>
</view>
<!-- <view class="ps__shop">
<view class="shop__tab">
<view class="tab__top">
<span>商品订单</span>
<view class="tab__all" @click="goOrder(0)">
<span>全部订单</span>
<span>
<image src="@/static/my/my5.png">
</span>
</view>
</view>
<view class="tab__bottom">
<view class="tab__item" v-for="(vo,inx) in items" :key="inx" @click="goOrder(inx+1)">
<image :src="vo.icon" />
<view>{{vo.title}}</view>
</view>
</view>
</view>
</view> -->
</view>
<view class="ps__list">
<view class="list__item" v-for="(vo,inx) in menu" :key="inx" @click="goUrl(vo)">
<view class="list__left">
<image :src="vo.icon" alt="" srcset="">
{{vo.title}}
</view>
<view class="list__right">
<image src="@/static/my/my5.png" alt="" srcset="">
</view>
</view>
</view>
<view class="ps__btn" v-if="token" @click="loginOut">退出登录</view>
</view>
<view v-if="carouselHeight == 0">
<u-gap bgColor="transparent" v-if="carouselFlag" height="20"></u-gap>
</view>
<view v-if="carouselFlag" :class="carouselHeight > 0 ? 'carouselView' : 'carouselView carouselView2'" :style="{height: carouselHeight > 0 ? carouselHeight + 'rpx' : '120px'}">
<view style="position: relative; width: 100%;">
<u-swiper radius="12rpx" :height="120" :list="list5" circular @change="e => current = e.current"
:autoplay="true" keyName="imageUrl" @click="goOtherLink">
</u-swiper>
<view style="position: absolute;right: 10rpx; top:10rpx;z-index: 99999;">
<u--image src="/static/my/close.png" width="12px" height="12px" @click="closeCarouselFlag"></u--image>
</view>
</view>
</view>
</view>
</template>
<script>
import util from '@/pages/login/util.js'
let plugin = requirePlugin('loginPlugin');
export default {
data() {
return {
show:false,
logoutFlag : false,
menu: [
// {
// icon: require("@/static/my/my01.png"),
// title: "我的订单",
// url: "",
// type:"jd"
// },
// {
// icon: require("@/static/my/my12.png"),
// title: "我的地址",
// url: "/pagesD/pages/personal/myAddress"
// },
{
icon: require("@/static/my/my8.png"),
title: "使用帮助",
url: "/pagesD/pages/personal/help"
},
{
icon: require("@/static/my/my1.png"),
title: "常见问题",
url: "/pagesD/pages/personal/asking"
},
{
icon: require("@/static/my/my11.png"),
title: "问题反馈",
url: "/pagesD/pages/personal/ask"
},
{
icon: require("@/static/my/my15.png"),
title: "微信通知设置",
url: ""
},
],
items: [{
title: '待发货',
icon: require('@/static/my/my2.jpg'),
page: 0
},
{
title: '待收货',
icon: require('@/static/my/my3.png'),
page: 2
}, {
title: '已完成',
icon: require('@/static/my/my14.png'),
page: 3
}, {
title: '退款/售后',
icon: require('@/static/my/my9.png'),
page: 4
}
],
//用户信息
userInfo: null,
//头像
avatar: '',
token:null,
list5: [],
current: 0,
carouselFlag:false,
carouselHeight : 0,
}
},
methods: {
closeCarouselFlag() {
this.carouselFlag = false
},
getRotationList() {
let opts = {
url: '/app/index/adv/2',
method: 'get'
};
this.http.httpTokenRequest(opts, {}).then(res => {
if (res.data.code == 200 && res.data.data && res.data.data.length > 0) {
let data = []
data = res.data.data
let imgList = []
data.forEach(e => {
imgList.push(e)
})
this.list5 = imgList
this.carouselFlag = true
}
})
},
// 轮播跳转其他页面
goOtherLink(index) {
let item = this.list5[index]
this.$goToLocation(item)
},
loginOut() {
this.$http.request({
url:'/logout',
method:'post',
data:{},
}).then(res => {
this.token = null
uni.removeStorageSync('userToken')
uni.removeStorageSync('xcxIndexPath')
// uni.removeStorageSync('openid')
plugin.logout().then((res) => {
console.jdLoginLog(res, 'logoutres');
uni.reLaunch({
url: '/pages/main'
});
});
})
},
goOrder(current) {
let token = uni.getStorageSync('userToken');
uni.removeStorageSync('routerLogin')
if(!token){
// uni.navigateTo({
// url: '/pages/binding/index?url=/pages/main&index=4'
// })
let returnPage= '/pages/main';
let pageType = "reLaunch"
uni.navigateTo({
url:"/pages/login/index/index?returnPage="+returnPage+'&pageType='+pageType
})
return;
}
uni.navigateTo({
url: '/pagesD/pages/personal/myOrder?current=' + current
});
},
goUrl(vo) {
let token = uni.getStorageSync('userToken');
uni.removeStorageSync('routerLogin')
uni.setStorageSync('routerLogin', vo.url)
if(!token){
// uni.navigateTo({
// url: '/pages/binding/index?url=/pages/main&index=4'
// })
let returnPage= '/pages/main';
let pageType = "reLaunch"
uni.navigateTo({
url:"/pages/login/index/index?returnPage="+returnPage+'&pageType='+pageType
})
return;
}
if(vo.type == "jd"){
uni.navigateToMiniProgram({
appId: 'wx91d27dbf599dff74', // 跳转目标小程序的id
path: '', // 目标小程序的页面路径
extraData: { // 需要携带的参数
},
success(res) {
// 打开成功
}
})
return;
}
if (vo.title != '微信通知设置') {
uni.navigateTo({
url: vo.url
});
} else {
this.openMsg()
}
},
editInfo() {
let token = uni.getStorageSync('userToken');
uni.removeStorageSync('routerLogin')
uni.setStorageSync('routerLogin', '/pagesD/pages/personal/userInfo')
if(!token){
// uni.navigateTo({
// url: '/pages/binding/index?url=/pages/main&index=4'
// })
uni.navigateTo({
url: '/pages/login/index/index'
})
return;
}
uni.navigateTo({
url: '/pagesD/pages/personal/userInfo'
});
},
async getUserInfo() {
let token = uni.getStorageSync('userToken');
if(!token){
this.logoutFlag = false
return
}
this.logoutFlag = true
let opts = {
url: '/app/user/info',
method: 'get'
};
await this.http.httpTokenRequest(opts, {}).then(res => {
if (res.data.code == 200) {
this.userInfo = res.data.data
if (this.userInfo.avatar) {
this.avatar = this.userInfo.avatar
}
} else {
uni.showToast({
title: res.data.msg,
icon: 'none',
duration: 2000
});
}
})
},
openMsg() {
var that = this;
let nc_templateid = that.nc_templateid;
// 获取用户的当前设置，判断是否点击了“总是保持以上，不在询问”
wx.getSetting({
withSubscriptions: true, //是否获取用户订阅消息的订阅状态，默认false不返回
success(res) {
if (that.is_authorization) {
wx.openSetting({
withSubscriptions: true,
});
} else {
if (res.subscriptionsSetting[nc_templateid] == "reject") {
//用户点击了“总是保持以上，不再询问”
wx.showModal({
title: "温馨提示",
content: "检测到您没有开启订阅消息的权限，是否去设置？",
success: function (modal) {
if (modal.confirm) {
// 点击肯定
wx.openSetting({
withSubscriptions: true,
});
that.is_authorization = true;
uni.setStorageSync("is_authorization", true);
} else {
uni.showToast({
title: "您已拒绝订阅消息授权，无法接收通知",
icon: "error",
});
that.is_authorization = false;
}
},
});
} else {
// 用户没有点击“总是保持以上，不再询问”则每次都会调起订阅消息
// var templateid = that.setting.templateid.map(item => item.tempid)；
let tmpid = [nc_templateid];
uni.requestSubscribeMessage({
tmplIds: tmpid,
success(res) {
if (res[tmpid[0]] == "accept") {
uni.showToast({
title: "订阅成功",
icon: "none",
});
that.is_authorization = true;
uni.setStorageSync("is_authorization", true);
} else {
uni.showToast({
title: "您拒绝订阅消息授权，无法接收通知",
icon: "none",
});
that.is_authorization = false;
}
},
fail: (res) => {
wx.showModal({
title: "温馨提示",
content: "检测到您没有开启订阅消息的权限，是否去设置？",
success: function (modal) {
if (modal.confirm) {
// 点击肯定
wx.openSetting({
withSubscriptions: true,
});
that.is_authorization = true;
uni.setStorageSync("is_authorization", true);
} else {
uni.showToast({
title: "您已拒绝订阅消息授权，无法接收通知",
icon: "error",
});
that.is_authorization = false;
}
},
});
},
});
}
}
},
});
},
async getElInfo() {
let rectInfo = await this.$u.getRect('.personal');
console.log('rectInfo', rectInfo);
}
},
mounted() {
setTimeout(() => {
this.show=true
}, 100);
this.token = uni.getStorageSync('userToken');
if(this.token){
this.getUserInfo()
}
this.getRotationList()
let that = this
uni.getSystemInfo({
success: (res) => {
// 注意这里获得的高度宽度都是px，需要转换rpx
// 可使用窗口高度，不包含导航栏
let windowHeight = res.windowHeight
// 可使用窗口宽度
let windowWidth = res.windowWidth
let query = uni.createSelectorQuery().in(that);
setTimeout(() => {
query.select(".personal").boundingClientRect(function(data) { //data - 各种参数 // 获取元素高度
let personalHeight = data.height
uni.createSelectorQuery().in(that.$parent.$refs.myTab).select(".weui-tabbar").boundingClientRect(function(data) { //data - 各种参数
console.log('weui-tabbar', data)
// 获取元素高度
let tabbarHeight = data.height
let remainder = windowHeight - personalHeight - tabbarHeight
console.log('remainder', remainder);
if(remainder > 130) {
//可使用窗口高度，将px转换rpx
that.carouselHeight = (remainder * (750/ windowWidth))
}
}).exec()
}).exec()
}, 100);
}
})
},
onReady: function () {
uni.setNavigationBarTitle({
title: '个人中心'
});
},
};
</script>
<style lang="scss" scoped>
.carouselView {
width: 700rpx;
margin: 0 auto;
display: flex; justify-content: center; align-items: center;
height:120rpx;
}
.carouselView2 {
display: block;
margin-bottom: 30px;
// margin: 20rpx 30rpx auto auto;
}
.personal {
.ps__bg {
background: url('@/static/my/my-bg.png') no-repeat;
background-size: cover;
z-index: 999;
padding-bottom:40rpx;
.ps__title {
font-size: 40rpx;
font-family: PingFang SC;
font-weight: bold;
color: #FFFFFF;
text-align: center;
padding-top: 40rpx;
}
.ps__info {
padding: 65rpx 40rpx 0rpx 40rpx;
display: flex;
align-items: center;
position: relative;
.info__cover {
width: 170rpx;
height: 170rpx;
text-align: center;
background: url('@/static/my/my10.png') no-repeat;
background-size: 100% 100%;
margin-right: 32rpx;
image {
width: 130rpx;
height: 130rpx;
border-radius: 50%;
position: relative;
top:16rpx;left:-5rpx;
}
}
.info__name {
font-size: 38rpx;
font-family: PingFang SC;
font-weight: bold;
color: #FFFFFF;
opacity: 0.96;
margin-bottom: 28rpx;
}
.view__info {
font-size: 30rpx;
font-family: PingFang SC;
font-weight: 500;
color: #FFFFFF;
opacity: 0.96;
display: flex;
align-items: center;
span {
position: absolute;
right: 40rpx;
image {
width: 16rpx;
height: 26rpx;
}
}
}
}
.ps__shop {
padding: 0 40rpx;
.shop__tab {
padding: 30rpx;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.16);
border-radius: 20rpx;
.tab__top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20rpx;
>span {
font-size: 34rpx;
font-family: PingFang SC;
font-weight: bold;
color: #333333;
}
.tab__all {
font-size: 26rpx;
font-family: PingFang SC;
font-weight: 500;
color: #999999;
image {
width: 11rpx;
height: 18rpx;
padding-left: 20rpx;
}
}
}
.tab__bottom {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 20rpx;
.tab__item {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #666666;
width: 25%;
text-align: center;
image {
width: 60rpx;
height: 49rpx;
margin-bottom: 10rpx;
}
}
}
}
}
}
.ps__list {
background: #FFFFFF;
box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.16);
border-radius: 20rpx;
// margin-top: 20rpx;
position: relative;
top: -20rpx;
.list__item {
position: relative;
padding: 26rpx 40rpx;
display: flex;
align-items: center;
justify-content: space-between;
.list__left {
font-size: 32rpx;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
display: flex;
align-items: center;
image {
width: 28rpx;
height: 28rpx;
margin-right: 34rpx;
}
}
.list__right {
image {
width: 11rpx;
height: 18rpx;
}
}
}
.list__item::before {
content: '';
position: absolute;
right: 0;
bottom: 0;
width: 650rpx;
height: 1rpx;
background: rgba(0, 0, 0, .1);
}
// .list__item:nth-of-type(2) {
// .list__left {
// image {
// width: 29rpx;
// height: 25rpx;
// margin-right: 32rpx;
// }
// }
// }
// .list__item:nth-of-type(3) {
// .list__left {
// image {
// width: 28rpx;
// height: 28rpx;
// margin-right: 33rpx;
// }
// }
// }
// .list__item:nth-of-type(4) {
// .list__left {
// image {
// width: 28rpx;
// height: 28rpx;
// margin-right: 33rpx;
// }
// }
// }
// .list__item:last-child {
// .list__left {
// image {
// width: 28rpx;
// height: 28rpx;
// margin-right: 33rpx;
// }
// }
// }
.list__item:nth-last-of-type(1)::before {
content: '';
background: transparent
}
}
.ps__btn {
margin-top: 20rpx;
width: 100%;
height: 100rpx;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.16);
border-radius: 20rpx;
text-align: center;
line-height: 100rpx;
font-size: 32rpx;
font-family: PingFang SC;
font-weight: 500;
color: #666666;
}
}
</style>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment