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-16 15:54:26 +08:00
parent 4a669ec670
commit aa2f1009e8
12 changed files with 538 additions and 623 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/active/limited-time/limited-time.vue
+38 -25
View File
@@ -1,9 +1,9 @@
<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)">
<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>
@@ -11,26 +11,25 @@
</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>
<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">
<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'
}"
>
<text class="text-28 text-space" :style="{
color: curTab == index ? '#7A35F6' : '#666'
}">
{{ item.name }}
</text>
<!-- <view class="line" v-if="curTab == index"></view> -->
@@ -40,10 +39,11 @@
<view class="setting-view">
<view class="name-box">
<mescroll-uni ref="mescrollRef" @down="downCallback" @up="upCallback" :up="upOption" :down="downOption" @init="mescrollInit" :fixed="false">
<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" />
<productSeckillCard :item="item" :actived-type="activedScekillType" :attributes="attributes" />
</view>
</mescroll-uni>
</view>
@@ -83,8 +83,8 @@ export default {
curTab: 0,
activeTab: 0,
activeTabList: [
{ name: '今日秒杀', type: 'current' },
{ name: '活动预告', type: 'preview' }
{ name: '今日秒杀', type: 'current', activedType: 'seckill' },
{ name: '活动预告', type: 'preview', activedType: "actived" }
],
upOption: {
auto: false,
@@ -104,7 +104,8 @@ export default {
bgColor: 'rgba(0,0,0,0)'
},
mescroll: null,
attributes: {} // 限时秒杀卡片属性
attributes: {},// 限时秒杀卡片属性
activedScekillType: 'seckill'
};
},
onLoad() {
@@ -179,9 +180,7 @@ export default {
},
downCallback() {
this.$nextTick(function () {
this.mescroll && this.mescroll.resetUpScroll();
});
this.mescroll && this.mescroll.resetUpScroll();
},
mescrollInit(mescroll) {
@@ -207,8 +206,12 @@ export default {
if (index !== this.activeTab) {
this.activeTab = index;
this.dataList = [];
if (this.mescroll) {
this.mescroll.isUpScrolling = true;
}
const item = this.activeTabList[index];
this.onGetSeckillCurrent(item.type);
this.activedScekillType = item.activedType;
}
},
@@ -234,27 +237,29 @@ export default {
<style lang="scss" scoped>
.content-two {
height: calc(100vh);
height: 100vh;
background-color: #fff;
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
}
.product_info_header_warp {
position: relative;
.product_info_header_swiper {
height: 600rpx !important;
height: 660rpx !important;
border-radius: 0 !important;
::v-deep(.u-swiper__wrapper) {
height: 600rpx !important;
height: 660rpx !important;
.u-swiper__wrapper {
height: 600rpx !important;
height: 660rpx !important;
.u-swiper__wrapper__item__wrapper__image {
height: 600rpx !important;
height: 660rpx !important;
border-radius: 0 !important;
}
}
@@ -376,7 +381,7 @@ export default {
background-color: #fff;
overflow-x: auto;
position: absolute;
top: 520rpx;
top: 600rpx;
left: 0;
.tab-list-container {
@@ -386,6 +391,8 @@ export default {
flex-direction: row;
align-items: center;
overflow-x: auto;
padding: 0 12rpx;
box-sizing: border-box;
}
.tab-list {
@@ -403,6 +410,7 @@ export default {
margin-top: 0;
width: 100%;
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
@@ -411,11 +419,16 @@ export default {
padding: 0 32rpx;
box-sizing: border-box;
position: relative;
margin-top: 106rpx;
margin-top: 126rpx;
/* #ifndef H5 || MP-WEIXIN */
margin-bottom: calc(100rpx + env(safe-area-inset-bottom));
/* #endif */
.name-box {
width: 100%;
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
align-items: center;
pages/active/newcomer-exclusive/newcomer-exclusive.vue
+23 -15
View File
@@ -1,6 +1,5 @@
<template>
<view class="content-two">
<TopSafe></TopSafe>
<view class="product_info_header_warp">
<up-swiper :list="swiperList" class="product_info_header_swiper" @click="onSwiper"
@@ -92,7 +91,7 @@ export default {
};
},
onLoad() {
this.cascadeCategory();
this.cascadeCategory();
this.getCarouselImage()
this.upCallback({ num: 1, size: 10 });
},
@@ -130,7 +129,7 @@ export default {
let params = {
page: page.num,
pageSize: page.size,
// tag:
tag: 3
};
if (this.curTab != 0) {
params["categoryId"] = this.tabList[this.curTab].id;
@@ -139,6 +138,7 @@ export default {
}
searchList(params).then((res) => {
let curPageLen = res.data ? res.data.length : 0;
if (page.num === 1) this.dataList = [];
if (res.data) {
this.dataList = page.num === 1 ? res.data : this.dataList.concat(res.data);
}
@@ -151,9 +151,7 @@ export default {
},
downCallback() {
this.$nextTick(function () {
this.mescroll && this.mescroll.resetUpScroll();
});
this.mescroll && this.mescroll.resetUpScroll();
},
mescrollInit(mescroll) {
@@ -193,25 +191,29 @@ export default {
<style lang="scss" scoped>
.content-two {
height: calc(100vh);
height: 100vh;
background-color: #fff;
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
}
.product_info_header_warp {
position: relative;
.product_info_header_swiper {
height: 600rpx !important;
height: 660rpx !important;
border-radius: 0 !important;
::v-deep(.u-swiper__wrapper) {
height: 600rpx !important;
height: 660rpx !important;
.u-swiper__wrapper {
height: 600rpx !important;
height: 660rpx !important;
.u-swiper__wrapper__item__wrapper__image {
height: 600rpx !important;
height: 660rpx !important;
border-radius: 0 !important;
}
}
@@ -297,7 +299,7 @@ export default {
background-color: #fff;
overflow-x: auto;
position: absolute;
top: 520rpx;
top: 600rpx;
left: 0;
.tab-list {
@@ -319,9 +321,10 @@ export default {
}
.setting-view {
margin-top: 20rpx;
margin-top: 40rpx;
width: 100%;
height: calc(100vh - 88rpx - 80rpx - 100rpx - var(--status-bar-height));
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
@@ -331,9 +334,14 @@ export default {
box-sizing: border-box;
position: relative;
/* #ifndef H5 || MP-WEIXIN */
margin-bottom: calc(100rpx + env(safe-area-inset-bottom));
/* #endif */
.name-box {
width: 100%;
height: calc(100vh - 88rpx - 80rpx - 100rpx - var(--status-bar-height));
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
align-items: center;
pages/active/super-subsidy/super-subsidy.vue
+21 -13
View File
@@ -1,6 +1,5 @@
<template>
<view class="content-two">
<TopSafe></TopSafe>
<view class="product_info_header_warp">
<up-swiper :list="swiperList" class="product_info_header_swiper" @click="onSwiper"
@@ -120,6 +119,7 @@ export default {
}
searchList(params).then((res) => {
let curPageLen = res.data ? res.data.length : 0;
if (page.num === 1) this.dataList = [];
if (res.data) {
this.dataList = this.dataList.concat(res.data);
}
@@ -132,9 +132,7 @@ export default {
},
downCallback() {
this.$nextTick(function () {
this.mescroll && this.mescroll.resetUpScroll();
});
this.mescroll && this.mescroll.resetUpScroll();
},
mescrollInit(mescroll) {
@@ -175,25 +173,29 @@ export default {
<style lang="scss" scoped>
.content-two {
height: calc(100vh);
height: 100vh;
background-color: #fff;
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
}
.product_info_header_warp {
position: relative;
.product_info_header_swiper {
height: 600rpx !important;
height: 660rpx !important;
border-radius: 0 !important;
::v-deep(.u-swiper__wrapper) {
height: 600rpx !important;
height: 660rpx !important;
.u-swiper__wrapper {
height: 600rpx !important;
height: 660rpx !important;
.u-swiper__wrapper__item__wrapper__image {
height: 600rpx !important;
height: 660rpx !important;
border-radius: 0 !important;
}
}
@@ -279,7 +281,7 @@ export default {
background-color: #fff;
overflow-x: auto;
position: absolute;
top: 520rpx;
top: 600rpx;
left: 0;
.tab-list {
@@ -301,9 +303,10 @@ export default {
}
.setting-view {
margin-top: 20rpx;
margin-top: 40rpx;
width: 100%;
height: calc(100vh - 88rpx - 80rpx - 100rpx - var(--status-bar-height));
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
@@ -313,9 +316,14 @@ export default {
box-sizing: border-box;
position: relative;
/* #ifndef H5 || MP-WEIXIN */
margin-bottom: calc(100rpx + env(safe-area-inset-bottom));
/* #endif */
.name-box {
width: 100%;
height: calc(100vh - 88rpx - 80rpx - 100rpx - var(--status-bar-height));
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
align-items: center;