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