charles/frontend-app
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

feat: 首页改造

Browse Source
This commit is contained in:
charles
2026-07-13 18:14:00 +08:00
parent 85fff5c363
commit c6015b8295
15 changed files with 2726 additions and 1399 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/active/limited-time/limited-time.vue
+436
View File
@@ -0,0 +1,436 @@
<template>
<view class="content-two">
<TopSafe></TopSafe>
<view class="product_info_header_warp">
<up-swiper :list="swiperList" class="product_info_header_swiper" @click="onSwiper"
@change="(e) => (currentNum = e.current)">
<template #indicator>
<view class="indicator-num">
<text class="indicator-num__text">{{ currentNum + 1 }}/{{ swiperList.length }}</text>
</view>
</template>
</up-swiper>
<view class="img_comm left_warp">
<up-image src="/static/common/left_b_st.png" width="30" height="30" bgColor="#f1f6ff00"
@click="jumpLeft"></up-image>
</view>
</view>
<view class="tab-view">
<!-- 限时秒杀卡片 -->
<view class="tab-card">
<view
class="tab-item"
:class="{ active: activeTab === index }"
@click="onActiveTabChange(index)"
v-for="(item, index) in activeTabList"
:key="index"
>
<text class="tab-text">{{ item.name }}</text>
</view>
</view>
<!-- 限时秒杀标签 -->
<view class="tab-list-container">
<view class="tab-list" @click="onTab(index)" v-for="(item, index) in tabList" :key="index">
<text class="text-28 text-space" :style="{
color: curTab == index ? '#7A35F6' : '#666',
}">{{ item.name }}</text>
<!-- <view class="line" v-if="curTab == index"></view> -->
</view>
</view>
</view>
<view class="setting-view">
<view class="name-box">
<mescroll-uni ref="mescrollRef" @down="downCallback" @up="upCallback" :up="upOption" :down="downOption"
@init="mescrollInit" :fixed="false">
<!-- 原来单个 v-for 替换成两列 -->
<view class="mescrollUniView" v-for="item in dataList" :key="item.id">
<productSeckillCard :item="item" actived-type="seckill" :attributes="attributes" />
</view>
</mescroll-uni>
</view>
</view>
<!-- #ifndef H5 || MP-WEIXIN-->
<CustomTabBar :tabIndex="2" />
<!-- #endif -->
<up-toast ref="uToastRef"></up-toast>
</view>
</template>
<script>
import { toRaw } from "vue";
import { getCascadeCategory, getCarouselImage } from "@/api/common.js";
import Header from "@/components/common/header.vue";
import TopSafe from "@/components/common/top-safe.nvue";
import MyBtn from "@/components/common/my-btn.vue";
import PingItem from "@/components/shop/ping-item.vue";
import { getSeckillGoodsList, getSeckillCurrent, getSeckillPreview } from "@/api/product.js";
import CustomTabBar from "@/components/custom-tab-bar.vue";
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";
import productSeckillCard from "@/components/common/product-seckill-card.vue";
import { APP_PAGE_TYPE } from "@/utils/enumUtils.js";
export default {
mixins: [MescrollMixin],
components: { Header, TopSafe, MyBtn, PingItem, CustomTabBar, MescrollUni, productSeckillCard },
data() {
return {
swiperList: [],
currentNum: 0,
activityId: "",
dataList: [],
tabList: [{ name: "推荐" }],
curTab: 0,
activeTab: 0,
activeTabList: [
{ name: "今日秒杀", type: "current" },
{ name: "活动预告", type: "preview" }
],
upOption: {
auto: false,
page: {
size: 10, // 每页数据的数量,默认10
},
noMoreSize: 10, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
empty: {
tip: `空空如也`,
},
textColor: "#333",
bgColor: "rgba(0,0,0,0)",
},
downOption: {
auto: false,
textColor: "#333",
bgColor: "rgba(0,0,0,0)",
},
mescroll: null,
attributes: {}, // 限时秒杀卡片属性
};
},
onLoad() {
this.init();
this.getCarouselImage()
},
methods: {
// 查询轮播图
async getCarouselImage() {
const params = {
pageUi: APP_PAGE_TYPE.SECKILL,
};
const resp = await getCarouselImage(params);
if (resp && resp.bizcode === 100) {
const data = resp.data || [];
this.swiperList =
data.length !== 0 ? data.map((obj) => obj.carouselImage) : [];
}
},
// 获取秒杀
onGetSeckillCurrent(type = 'current') {
const url = type === 'current' ? getSeckillCurrent : getSeckillPreview;
url().then((res) => {
if (res.bizcode === 100) {
this.activityId = res.data.activityId;
console.log('获取秒杀当前时间',res.data);
this.attributes ={
leftTime: res.data.leftTime || null,
}
this.$nextTick(() => {
this.mescroll && this.mescroll.resetUpScroll();
});
} else {
this.mescroll && this.mescroll.endErr();
}
}).catch(() => {
this.mescroll && this.mescroll.endErr();
});
},
upCallback(page) {
if (!this.activityId) {
this.mescroll && this.mescroll.endErr();
return;
}
let params = {
page: page.num,
pageSize: page.size,
activityId: this.activityId,
};
if (this.curTab != 0) {
params["categoryId"] = this.tabList[this.curTab].id;
} else {
params["isRecomm"] = true;
}
getSeckillGoodsList(params).then((res) => {
let curPageLen = res.data?.entitys ? res.data.entitys.length : 0;
if (page.num === 1) this.dataList = [];
if (res.data?.entitys) {
this.dataList = this.dataList.concat(res.data.entitys);
}
console.log(this.dataList);
this.mescroll.endBySize(curPageLen, res.data ? res.data.totalCount : 0);
}).catch(() => {
this.mescroll && this.mescroll.endErr();
});
},
downCallback() {
this.$nextTick(function () {
this.mescroll && this.mescroll.resetUpScroll();
});
},
mescrollInit(mescroll) {
this.mescroll = mescroll;
},
async cascadeCategory() {
getCascadeCategory({ parentId: 0 }).then((res) => {
if (res && res.bizcode === 100) {
res.data.forEach((item) => {
this.tabList.push(item);
});
}
});
},
onTab(index) {
if (index != this.curTab) {
this.curTab = index;
this.dataList = [];
this.downCallback();
}
},
onActiveTabChange(index) {
if (index !== this.activeTab) {
this.activeTab = index;
this.dataList = [];
const item = this.activeTabList[index];
this.onGetSeckillCurrent(item.type);
}
},
init() {
this.onGetSeckillCurrent();
this.cascadeCategory();
},
jumpLeft() {
uni.navigateBack({
delta: 1, // 返回的页面数，默认为1,返回到上一级
});
},
onSwiper(index) {
uni.previewImage({
current: index,
loop: true,
urls: this.swiperList,
});
},
},
};
</script>
<style lang="scss" scoped>
.content-two {
height: calc(100vh);
background-color: #fff;
display: flex;
flex-direction: column;
}
.product_info_header_warp {
position: relative;
.product_info_header_swiper {
height: 600rpx !important;
border-radius: 0 !important;
::v-deep(.u-swiper__wrapper) {
height: 600rpx !important;
.u-swiper__wrapper {
height: 600rpx !important;
.u-swiper__wrapper__item__wrapper__image {
height: 600rpx !important;
border-radius: 0 !important;
}
}
}
}
.img_comm {
position: absolute;
top: 140rpx;
}
.left_warp {
left: 40rpx;
}
.right_warp {
right: 40rpx;
}
}
.head-view {
width: 100%;
min-height: 88rpx;
height: 88rpx;
display: flex;
align-items: center;
padding: 0 32rpx;
box-sizing: border-box;
background-color: #fff;
.head-search {
width: 100%;
height: 76rpx;
padding: 0 24rpx;
flex-direction: row;
display: flex;
background-color: #f7f7f7;
align-items: center;
border-radius: 16rpx;
}
}
.tab-box {
width: 100%;
height: 160rpx;
min-height: 80rpx;
display: flex;
flex-direction: row;
align-items: center;
padding: 0 32rpx;
box-sizing: border-box;
background-color: #fff;
overflow-x: auto;
.tab-item {
display: flex;
flex: 1;
flex-direction: column;
align-items: center;
.tab-img {
width: 56rpx;
height: 56rpx;
}
.tab-name {
font-size: 28rpx;
margin-top: 24rpx;
}
}
}
.tab-card {
width: 100%;
height: 74rpx;
display: flex;
align-items: center;
background-color: #f5f5f5;
border-radius: 12rpx;
padding: 0 4rpx;
margin-bottom: 16rpx;
.tab-item {
flex: 1;
height: 60rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10rpx;
background-color: transparent;
transition: all 0.3s ease;
&.active {
background-color: #fff;
.tab-text {
color: #7A35F6;
font-weight: 600;
}
}
.tab-text {
font-size: 28rpx;
color: #666666;
transition: color 0.3s ease;
}
}
}
.tab-view {
border-top-left-radius: 20rpx !important;
border-top-right-radius: 20rpx !important;
width: 100%;
display: flex;
flex-direction: column;
padding: 24rpx 32rpx 0;
box-sizing: border-box;
background-color: #fff;;
overflow-x: auto;
position: absolute;
top: 520rpx;
left: 0;
.tab-list-container{
width: 100%;
height: 60rpx;
display: flex;
flex-direction: row;
align-items: center;
}
.tab-list {
margin-right: 24rpx;
display: flex;
flex-direction: column;
height: 60rpx;
min-height: 60rpx;
align-items: center;
justify-content: space-between;
}
}
.setting-view {
margin-top: 0;
width: 100%;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
overflow-y: auto;
padding: 0 32rpx;
box-sizing: border-box;
position: relative;
margin-top: 106rpx;
.name-box {
width: 100%;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
.mescrollUniView {
width: calc(100vw - 48rpx);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.fall-col {
width: 332rpx;
/* 与 PingItem 宽度一致 */
height: 100%;
}
}
}
}
</style>
pages/active/newcomer-exclusive/newcomer-exclusive.vue
+355
View File
@@ -0,0 +1,355 @@
<template>
<view class="content-two">
<TopSafe></TopSafe>
<view class="product_info_header_warp">
<up-swiper :list="swiperList" class="product_info_header_swiper" @click="onSwiper"
@change="(e) => (currentNum = e.current)">
<template #indicator>
<view class="indicator-num">
<text class="indicator-num__text">{{ currentNum + 1 }}/{{ swiperList.length }}</text>
</view>
</template>
</up-swiper>
<view class="img_comm left_warp">
<up-image src="/static/common/left_b_st.png" width="30" height="30" bgColor="#f1f6ff00"
@click="jumpLeft"></up-image>
</view>
</view>
<view class="tab-view">
<view class="tab-list" @click="onTab(index)" v-for="(item, index) in tabList" :key="index">
<text class="text-28 text-space" :style="{
color: curTab == index ? '#7A35F6' : '#666',
}">{{ item.name }}</text>
<view class="line" v-if="curTab == index"></view>
</view>
</view>
<view class="setting-view">
<view class="name-box">
<mescroll-uni ref="mescrollRef" @down="downCallback" @up="upCallback" :up="upOption" :down="downOption"
@init="mescrollInit" :fixed="false">
<!-- 原来单个 v-for 替换成两列 -->
<view class="mescrollUniView" v-for="item in dataList" :key="item.id">
<productSeckillCard :item="item" actived-type="newcomer" />
</view>
</mescroll-uni>
</view>
</view>
<!-- #ifndef H5 || MP-WEIXIN-->
<CustomTabBar :tabIndex="2" />
<!-- #endif -->
<up-toast ref="uToastRef"></up-toast>
</view>
</template>
<script>
import { toRaw } from "vue";
import { getCascadeCategory, getCarouselImage } from "@/api/common.js";
import Header from "@/components/common/header.vue";
import TopSafe from "@/components/common/top-safe.nvue";
import MyBtn from "@/components/common/my-btn.vue";
import PingItem from "@/components/shop/ping-item.vue";
import { searchList, } from "@/api/product.js";
import CustomTabBar from "@/components/custom-tab-bar.vue";
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";
import productSeckillCard from "@/components/common/product-seckill-card.vue";
import { APP_PAGE_TYPE } from "@/utils/enumUtils.js";
export default {
mixins: [MescrollMixin],
components: { Header, TopSafe, MyBtn, PingItem, CustomTabBar, MescrollUni, productSeckillCard },
data() {
return {
swiperList: [],
currentNum: 0,
activityId: "",
dataList: [],
tabList: [{ name: "推荐" }],
curTab: 0,
upOption: {
auto: false,
page: {
size: 10, // 每页数据的数量,默认10
},
noMoreSize: 10, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
empty: {
tip: `空空如也`,
},
textColor: "#333",
bgColor: "rgba(0,0,0,0)",
},
downOption: {
auto: false,
textColor: "#333",
bgColor: "rgba(0,0,0,0)",
},
mescroll: null,
};
},
onLoad() {
this.cascadeCategory();
this.getCarouselImage()
this.upCallback({ num: 1, size: 10 });
},
methods: {
// 查询轮播图
async getCarouselImage() {
const params = {
pageUi: APP_PAGE_TYPE.NEW,
};
const resp = await getCarouselImage(params);
if (resp && resp.bizcode === 100) {
const data = resp.data || [];
this.swiperList =
data.length !== 0 ? data.map((obj) => obj.carouselImage) : [];
}
},
// 获取秒杀
// onGetSeckillCurrent() {
// getSeckillCurrent().then((res) => {
// console.log("获取秒杀", res);
// if (res.bizcode === 100) {
// this.activityId = res.data.activityId;
// this.$nextTick(() => {
// this.mescroll && this.mescroll.resetUpScroll();
// });
// } else {
// this.mescroll && this.mescroll.endErr();
// }
// }).catch(() => {
// this.mescroll && this.mescroll.endErr();
// });
// },
upCallback(page) {
let params = {
page: page.num,
pageSize: page.size,
// tag:
};
if (this.curTab != 0) {
params["categoryId"] = this.tabList[this.curTab].id;
} else {
params["isRecomm"] = true;
}
searchList(params).then((res) => {
let curPageLen = res.data ? res.data.length : 0;
if (res.data) {
this.dataList = this.dataList.concat(res.data);
}
console.log(this.dataList);
this.mescroll.endBySize(curPageLen, res.data ? res.data.totalCount : 0);
}).catch(() => {
this.mescroll && this.mescroll.endErr();
});
},
downCallback() {
this.$nextTick(function () {
this.mescroll && this.mescroll.resetUpScroll();
});
},
mescrollInit(mescroll) {
this.mescroll = mescroll;
},
async cascadeCategory() {
getCascadeCategory({ parentId: 0 }).then((res) => {
if (res && res.bizcode === 100) {
res.data.forEach((item) => {
this.tabList.push(item);
});
}
});
},
onTab(index) {
if (index != this.curTab) {
this.curTab = index;
this.dataList = [];
this.downCallback();
}
},
jumpLeft() {
uni.navigateBack({
delta: 1, // 返回的页面数，默认为1,返回到上一级
});
},
onSwiper(index) {
uni.previewImage({
current: index,
loop: true,
urls: this.swiperList,
});
},
},
};
</script>
<style lang="scss" scoped>
.content-two {
height: calc(100vh);
background-color: #fff;
}
.product_info_header_warp {
position: relative;
.product_info_header_swiper {
height: 600rpx !important;
border-radius: 0 !important;
::v-deep(.u-swiper__wrapper) {
height: 600rpx !important;
.u-swiper__wrapper {
height: 600rpx !important;
.u-swiper__wrapper__item__wrapper__image {
height: 600rpx !important;
border-radius: 0 !important;
}
}
}
}
.img_comm {
position: absolute;
top: 140rpx;
}
.left_warp {
left: 40rpx;
}
.right_warp {
right: 40rpx;
}
}
.head-view {
width: 100%;
min-height: 88rpx;
height: 88rpx;
display: flex;
align-items: center;
padding: 0 32rpx;
box-sizing: border-box;
background-color: #fff;
.head-search {
width: 100%;
height: 76rpx;
padding: 0 24rpx;
flex-direction: row;
display: flex;
background-color: #f7f7f7;
align-items: center;
border-radius: 16rpx;
}
}
.tab-box {
width: 100%;
height: 160rpx;
min-height: 80rpx;
display: flex;
flex-direction: row;
align-items: center;
padding: 0 32rpx;
box-sizing: border-box;
background-color: #fff;
overflow-x: auto;
.tab-item {
display: flex;
flex: 1;
flex-direction: column;
align-items: center;
.tab-img {
width: 56rpx;
height: 56rpx;
}
.tab-name {
font-size: 28rpx;
margin-top: 24rpx;
}
}
}
.tab-view {
border-top-left-radius: 20rpx !important;
border-top-right-radius: 20rpx !important;
width: 100%;
height: 80rpx;
min-height: 80rpx;
display: flex;
flex-direction: row;
padding: 0 32rpx;
box-sizing: border-box;
background-color: #fff;
overflow-x: auto;
position: absolute;
top: 520rpx;
left: 0;
.tab-list {
margin-right: 24rpx;
display: flex;
flex-direction: column;
height: 60rpx;
min-height: 60rpx;
align-items: center;
justify-content: space-between;
margin-top: 22rpx;
}
.line {
width: 48rpx;
height: 6rpx;
background-color: #7a35f6;
}
}
.setting-view {
margin-top: 20rpx;
width: 100%;
height: calc(100vh - 88rpx - 80rpx - 100rpx - var(--status-bar-height));
display: flex;
flex-direction: column;
align-items: center;
overflow-y: auto;
padding: 0 32rpx;
box-sizing: border-box;
position: relative;
.name-box {
width: 100%;
height: calc(100vh - 88rpx - 80rpx - 100rpx - var(--status-bar-height));
display: flex;
flex-direction: column;
align-items: center;
.mescrollUniView {
width: calc(100vw - 48rpx);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.fall-col {
width: 332rpx;
/* 与 PingItem 宽度一致 */
height: 100%;
}
}
}
}
</style>
pages/active/super-subsidy/super-subsidy.vue
+337
View File
@@ -0,0 +1,337 @@
<template>
<view class="content-two">
<TopSafe></TopSafe>
<view class="product_info_header_warp">
<up-swiper :list="swiperList" class="product_info_header_swiper" @click="onSwiper"
@change="(e) => (currentNum = e.current)">
<template #indicator>
<view class="indicator-num">
<text class="indicator-num__text">{{ currentNum + 1 }}/{{ swiperList.length }}</text>
</view>
</template>
</up-swiper>
<view class="img_comm left_warp">
<up-image src="/static/common/left_b_st.png" width="30" height="30" bgColor="#f1f6ff00"
@click="jumpLeft"></up-image>
</view>
</view>
<view class="tab-view">
<view class="tab-list" @click="onTab(index)" v-for="(item, index) in tabList" :key="index">
<text class="text-28 text-space" :style="{
color: curTab == index ? '#7A35F6' : '#666',
}">{{ item.name }}</text>
<view class="line" v-if="curTab == index"></view>
</view>
</view>
<view class="setting-view">
<view class="name-box">
<mescroll-uni ref="mescrollRef" @down="downCallback" @up="upCallback" :up="upOption" :down="downOption"
@init="mescrollInit" :fixed="false">
<!-- 原来单个 v-for 替换成两列 -->
<view class="mescrollUniView" v-for="item in dataList" :key="item.id">
<productSeckillCard :item="item" actived-type="subsidy" />
</view>
</mescroll-uni>
</view>
</view>
<!-- #ifndef H5 || MP-WEIXIN-->
<CustomTabBar :tabIndex="2" />
<!-- #endif -->
<up-toast ref="uToastRef"></up-toast>
</view>
</template>
<script>
import { getCascadeCategory, getCarouselImage } from "@/api/common.js";
import Header from "@/components/common/header.vue";
import TopSafe from "@/components/common/top-safe.nvue";
import MyBtn from "@/components/common/my-btn.vue";
import PingItem from "@/components/shop/ping-item.vue";
import { searchList } from "@/api/product.js";
import CustomTabBar from "@/components/custom-tab-bar.vue";
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";
import productSeckillCard from "@/components/common/product-seckill-card.vue";
import { APP_PAGE_TYPE } from "@/utils/enumUtils.js";
export default {
mixins: [MescrollMixin],
components: { Header, TopSafe, MyBtn, PingItem, CustomTabBar, MescrollUni, productSeckillCard },
data() {
return {
swiperList: [],
currentNum: 0,
dataList: [],
tabList: [{ name: "推荐" }],
curTab: 0,
upOption: {
auto: false,
page: {
size: 10, // 每页数据的数量,默认10
},
noMoreSize: 10, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
empty: {
tip: `空空如也`,
},
textColor: "#333",
bgColor: "rgba(0,0,0,0)",
},
downOption: {
auto: false,
textColor: "#333",
bgColor: "rgba(0,0,0,0)",
},
mescroll: null,
};
},
onLoad() {
this.cascadeCategory();
this.getCarouselImage()
this.upCallback({ num: 1, size: 10 });
},
methods: {
// 查询轮播图
async getCarouselImage() {
const params = {
pageUi: APP_PAGE_TYPE.SUPER_SUBSIDY,
};
const resp = await getCarouselImage(params);
if (resp && resp.bizcode === 100) {
const data = resp.data || [];
this.swiperList =
data.length !== 0 ? data.map((obj) => obj.carouselImage) : [];
}
},
upCallback(page) {
let params = {
page: page.num,
pageSize: page.size,
type: -2
};
if (this.curTab != 0) {
params["categoryId"] = this.tabList[this.curTab].id;
} else {
params["isRecomm"] = true;
}
searchList(params).then((res) => {
let curPageLen = res.data ? res.data.length : 0;
if (res.data) {
this.dataList = this.dataList.concat(res.data);
}
console.log(this.dataList);
this.mescroll.endBySize(curPageLen, res.data ? res.data.totalCount : 0);
}).catch(() => {
this.mescroll && this.mescroll.endErr();
});
},
downCallback() {
this.$nextTick(function () {
this.mescroll && this.mescroll.resetUpScroll();
});
},
mescrollInit(mescroll) {
this.mescroll = mescroll;
},
async cascadeCategory() {
getCascadeCategory({ parentId: 0 }).then((res) => {
if (res && res.bizcode === 100) {
res.data.forEach((item) => {
this.tabList.push(item);
});
}
});
},
onTab(index) {
if (index != this.curTab) {
this.curTab = index;
this.dataList = [];
this.downCallback();
}
},
jumpLeft() {
uni.navigateBack({
delta: 1, // 返回的页面数，默认为1,返回到上一级
});
},
onSwiper(index) {
uni.previewImage({
current: index,
loop: true,
urls: this.swiperList,
});
},
},
};
</script>
<style lang="scss" scoped>
.content-two {
height: calc(100vh);
background-color: #fff;
}
.product_info_header_warp {
position: relative;
.product_info_header_swiper {
height: 600rpx !important;
border-radius: 0 !important;
::v-deep(.u-swiper__wrapper) {
height: 600rpx !important;
.u-swiper__wrapper {
height: 600rpx !important;
.u-swiper__wrapper__item__wrapper__image {
height: 600rpx !important;
border-radius: 0 !important;
}
}
}
}
.img_comm {
position: absolute;
top: 140rpx;
}
.left_warp {
left: 40rpx;
}
.right_warp {
right: 40rpx;
}
}
.head-view {
width: 100%;
min-height: 88rpx;
height: 88rpx;
display: flex;
align-items: center;
padding: 0 32rpx;
box-sizing: border-box;
background-color: #fff;
.head-search {
width: 100%;
height: 76rpx;
padding: 0 24rpx;
flex-direction: row;
display: flex;
background-color: #f7f7f7;
align-items: center;
border-radius: 16rpx;
}
}
.tab-box {
width: 100%;
height: 160rpx;
min-height: 80rpx;
display: flex;
flex-direction: row;
align-items: center;
padding: 0 32rpx;
box-sizing: border-box;
background-color: #fff;
overflow-x: auto;
.tab-item {
display: flex;
flex: 1;
flex-direction: column;
align-items: center;
.tab-img {
width: 56rpx;
height: 56rpx;
}
.tab-name {
font-size: 28rpx;
margin-top: 24rpx;
}
}
}
.tab-view {
border-top-left-radius: 20rpx !important;
border-top-right-radius: 20rpx !important;
width: 100%;
height: 80rpx;
min-height: 80rpx;
display: flex;
flex-direction: row;
padding: 0 32rpx;
box-sizing: border-box;
background-color: #fff;
overflow-x: auto;
position: absolute;
top: 520rpx;
left: 0;
.tab-list {
margin-right: 24rpx;
display: flex;
flex-direction: column;
height: 60rpx;
min-height: 60rpx;
align-items: center;
justify-content: space-between;
margin-top: 22rpx;
}
.line {
width: 48rpx;
height: 6rpx;
background-color: #7a35f6;
}
}
.setting-view {
margin-top: 20rpx;
width: 100%;
height: calc(100vh - 88rpx - 80rpx - 100rpx - var(--status-bar-height));
display: flex;
flex-direction: column;
align-items: center;
overflow-y: auto;
padding: 0 32rpx;
box-sizing: border-box;
position: relative;
.name-box {
width: 100%;
height: calc(100vh - 88rpx - 80rpx - 100rpx - var(--status-bar-height));
display: flex;
flex-direction: column;
align-items: center;
.mescrollUniView {
width: calc(100vw - 48rpx);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.fall-col {
width: 332rpx;
/* 与 PingItem 宽度一致 */
height: 100%;
}
}
}
}
</style>