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/home/home.vue
+94 -209
View File
@@ -1,104 +1,55 @@
<template>
<view
v-if="pageReady"
class="home_warp"
:class="platformType ? '' : 'iosplatformType'"
>
<view v-if="pageReady" class="home_warp" :class="platformType ? '' : 'iosplatformType'">
<!-- 带背景的头部 -->
<view class="home_content_z_warp">
<view class="home_header_warp">
<view class="header_title_warp">
<view
class="language_warp"
style="width: 100%; justify-content: flex-start"
@click="jumpSearch"
>
<view class="language_warp" style="width: 100%; justify-content: flex-start" @click="jumpSearch">
<view style="margin-top: 10rpx">
<up-image
src="https://static.tbmall.xin/static/home/search_b.png"
width="20"
height="20"
bgColor="#f1f6ff00"
></up-image>
<up-image src="https://static.tbmall.xin/static/home/search_b.png" width="20" height="20"
bgColor="#f1f6ff00"></up-image>
</view>
<text class="search_msg_warp">搜索</text>
</view>
<image
src="https://static.tbmall.xin/static/chart.png"
class="chart_img"
@click.stop="jumpNewSearch('list')"
></image>
<image src="https://static.tbmall.xin/static/chart.png" class="chart_img" @click.stop="jumpNewSearch('list')">
</image>
</view>
<view class="logo_banner">
<view style="padding: 20rpx 0 0 20rpx">
<up-image
src="https://static.tbmall.xin/static/home/logo_banner.png"
width="108"
height="16"
bgColor="#f1f6ff00"
></up-image>
<up-image src="https://static.tbmall.xin/static/home/logo_banner.png" width="108" height="16"
bgColor="#f1f6ff00"></up-image>
<view class="logo_banner_title">TB聚合商城</view>
<view class="logo_banner_msg">全民共创共享的电商平台</view>
</view>
<up-image
src="https://static.tbmall.xin/static/logo_banner2.png"
width="140"
height="98"
bgColor="#f1f6ff00"
></up-image>
<up-image src="https://static.tbmall.xin/static/logo_banner2.png" width="140" height="98"
bgColor="#f1f6ff00"></up-image>
</view>
<!-- 分类 -->
<view class="home_sort_warp">
<view
class="sort_comm_warp"
v-if="sortList && sortList.length !== 0 && isBlockedDate"
>
<view
v-for="item in sortList"
:key="item.id"
class="sort_item_comm"
@click="jumpSort(item)"
>
<up-image
:src="item.icon"
width="40"
height="32"
bgColor="#f1f6ff00"
></up-image>
<view class="sort_comm_warp" v-if="sortList && sortList.length !== 0 && isBlockedDate">
<view v-for="item in sortList" :key="item.id" class="sort_item_comm" @click="jumpSort(item)">
<up-image :src="item.icon" width="50" height="36" bgColor="#f1f6ff00"></up-image>
<view class="sort_item_title_comm">{{ item.name }}</view>
</view>
</view>
<view v-else class="not_order_warp">
<up-image
src="https://static.tbmall.xin/static/not_order.png"
width="80"
height="80"
bgColor="#f1f6ff00"
></up-image>
<up-image src="https://static.tbmall.xin/static/not_order.png" width="80" height="80"
bgColor="#f1f6ff00"></up-image>
<view class="not_order_msg_warp">暂无分类</view>
</view>
</view>
<!-- 爆款专区-->
<view
class="home_content_warp Hot_Picks_Zone"
v-if="faddishProduct && faddishProduct.length !== 0"
@click="onJumpYou"
>
<view class="home_content_warp Hot_Picks_Zone" v-if="faddishProduct && faddishProduct.length !== 0"
@click="onJumpYou">
<view class="product_comm_yp">
<view class="yp_title">
<view class="yp_title_left">
<text class="yp_title_main">信任桥优品</text>
<up-image
src="https://static.tbmall.xin/static/home/youxuan.png"
width="14"
height="14"
bgColor="#f1f6ff00"
></up-image>
<text class="yp_title_sub" style="margin-left: 8rpx"
>品牌五折秒杀福利</text
>
<up-image src="https://static.tbmall.xin/static/home/youxuan.png" width="14" height="14"
bgColor="#f1f6ff00"></up-image>
<text class="yp_title_sub" style="margin-left: 8rpx">品牌五折秒杀福利</text>
</view>
<view class="yp_title_right">
<text>立即抢购</text>
@@ -109,27 +60,14 @@
</view>
<view class="yp_content">
<!-- <up-loading-icon :show="productLoading"></up-loading-icon> -->
<view
class="yp_item"
v-for="item in faddishProduct"
:key="item.id"
@click.stop="jumpInfo(item)"
>
<view class="yp_item" v-for="item in faddishProduct" :key="item.id" @click.stop="jumpInfo(item)">
<view class="yp_item_image_wrapper">
<up-image
:src="item.url"
width="100%"
height="88"
bgColor="#f1f6ff00"
shape="square"
radius="15"
></up-image>
<up-image :src="item.url" width="100%" height="88" bgColor="#f1f6ff00" shape="square"
radius="15"></up-image>
</view>
<view class="yp_item_info">
<view class="yp_item_name">{{ item.title }}</view>
<view class="yp_item_price_tag"
>优选价{{ item.price }}元</view
>
<view class="yp_item_price_tag">优选价{{ item.price }}元</view>
</view>
</view>
</view>
@@ -150,12 +88,8 @@
<view>好物随心兑</view>
</view>
</view>
<up-image
src="https://static.tbmall.xin/static/home/min_card_jfdh_2.png"
width="55"
height="55"
bgColor="#f1f6ff00"
></up-image>
<up-image src="https://static.tbmall.xin/static/home/min_card_jfdh_2.png" width="55" height="55"
bgColor="#f1f6ff00"></up-image>
</view>
<!-- 红包抽奖 -->
<view class="min_card_item" @click="jumpTurntable">
@@ -166,88 +100,46 @@
<view>现金红包等你拿！</view>
</view>
</view>
<up-image
src="https://static.tbmall.xin/static/home/min_card_hbcj_2.png"
width="45"
height="45"
bgColor="#f1f6ff00"
></up-image>
<up-image src="https://static.tbmall.xin/static/home/min_card_hbcj_2.png" width="55" height="55"
bgColor="#f1f6ff00"></up-image>
</view>
</view>
<view class="home_actived_warp">
<view
class="home_actived_item_warp"
v-for="item in homeActivedList"
:key="item.id"
>
<view
class="home_actived_item"
v-if="
(item.activedType === 'seckill' &&
seckillGoodsList.length !== 0) ||
(item.activedType === 'super' && superGoodsList.length !== 0)
"
>
<view class="home_actived_item_warp" v-for="item in homeActivedList" :key="item.id">
<view class="home_actived_item">
<view class="product_comm_tip" @click="jumpPage(item.path)">
<view class="product_comm_tip_left">
<image class="uni-image" :src="item.title_icon"></image>
<view
:class="[
activedTabId === 'actived'
? 'tip_title_lable'
: 'tip_title',
]"
style="margin-right: 10rpx"
v-if="item.title_text"
@click.stop="jumpTab(item, 'actived')"
>{{ item.title_text }}</view
>
<view
:class="[
activedTabId === 'seckill'
? 'tip_title_lable'
: 'tip_title',
]"
@click.stop="jumpTab(item, 'seckill')"
>{{ item.title }}</view
>
<view :class="[
activedTabId === 'actived'
? 'tip_title '
: 'tip_title_lable',
]" style="margin-right: 10rpx" v-if="item.title_text" @click.stop="jumpTab(item, 'seckill')">{{
item.title_text }}</view>
<view v-if="item.activedType === 'seckill'" :class="[
activedTabId === 'seckill'
? 'tip_title '
: 'tip_title_lable',
]" @click.stop="jumpTab(item, 'actived')">{{ item.title }}</view>
<view v-else class="tip_title_lable">{{ item.title }}</view>
</view>
<view class="product_comm_tip_right"
>{{ item.rightText }}
<up-image
src="/static/common/right.png"
width="15"
height="15"
bgColor="#f1f6ff00"
></up-image>
<view class="product_comm_tip_right">{{ item.rightText }}
<image class="uni-image" src="/static/common/right.png"></image>
<!-- <up-image src="/static/common/right.png" width="15" height="15" bgColor="#f1f6ff00"></up-image> -->
</view>
</view>
<!-- 限时秒杀 -->
<view v-if="item.activedType === 'seckill'">
<view
class="product_seckill_card"
v-for="ele in seckillGoodsList"
:key="ele.id"
>
<productSeckillCard
:item="ele"
:actived-type="item.activedType"
/>
<view class="product_seckill_card" v-for="ele in seckillGoodsList" :key="ele.id">
<productSeckillCard :item="ele" :actived-type="seckillActivedType" :attributes='attributes' />
</view>
</view>
<!-- 超级补贴 -->
<view v-if="item.activedType === 'super'">
<view
class="product_seckill_card"
v-for="ele in superGoodsList"
:key="ele.id"
>
<productSeckillCard
:item="ele"
:actived-type="item.activedType"
/>
<view class="product_seckill_card" v-for="ele in superGoodsList" :key="ele.id">
<productSeckillCard :item="ele" :actived-type="item.activedType" />
</view>
</view>
</view>
@@ -263,12 +155,7 @@
<up-modal :show="openShow" :showConfirmButton="false">
<view class="slot-content">
<view class="close_warp" @click="openShow = false">
<up-image
src="/static/common/close.png"
width="20"
height="20"
bgColor="#f1f6ff00"
></up-image>
<up-image src="/static/common/close.png" width="20" height="20" bgColor="#f1f6ff00"></up-image>
</view>
<view class="content_">
<view class="content_1">温馨提示</view>
@@ -290,24 +177,14 @@
<view class="banner_box">
<view class="conter">{{ updateApkObj.content }}</view>
<view class="banner_foot" v-if="!bannerPercentageShow">
<button
@click="goUpdate(updateApkObj, platformType)"
class="banner_foot_button"
>
<button @click="goUpdate(updateApkObj, platformType)" class="banner_foot_button">
立即更新
</button>
<view
@click="bannerShow = false"
class="banner_foot_button_no"
v-if="!updateApkObj.isForce"
>暂不更新
<view @click="bannerShow = false" class="banner_foot_button_no" v-if="!updateApkObj.isForce">暂不更新
</view>
</view>
<view v-else>
<up-line-progress
:percentage="bannerPercentage"
activeColor="#a85cfa"
></up-line-progress>
<up-line-progress :percentage="bannerPercentage" activeColor="#a85cfa"></up-line-progress>
<view class="banner_loading_msg">
更新中{{ bannerPercentage }}%
</view>
@@ -330,11 +207,7 @@
</view>
</view>
</up-overlay>
<HomePopup
:show="homeShow"
:dataObj="curData"
@jumpShop="onJumpShop"
></HomePopup>
<HomePopup :show="homeShow" :dataObj="curData" @jumpShop="onJumpShop"></HomePopup>
</view>
</template>
@@ -390,22 +263,23 @@ export default {
{
id: 1,
title: "超级补贴",
title_icon: "https://static.tbmall.xin/static/new-home/home_4.png",
title_icon: "https://static.tbmall.xin/static/new-home/home_9.png",
path: "super-subsidy",
rightText: "官方补贴 .100%正品",
activedType: "super",
},
{
}, {
id: 2,
title: "限时秒杀",
title_text: "活动预告",
title_icon: "https://static.tbmall.xin/static/new-home/home_3.png",
title: "活动预告",
title_text: "限时秒杀",
title_icon: "https://static.tbmall.xin/static/new-home/home_10.png",
path: "limited-time",
rightText: "专属补贴 . 低价秒杀",
activedType: "seckill",
},
], // 首页活动列表
activedTabId: "seckill", // 当前选中的活动类型
attributes: {},
seckillActivedType: 'seckill'
};
},
onShow() {
@@ -446,17 +320,21 @@ export default {
// 不需要启动页，才渲染首页
this.pageReady = true;
},
mounted() {},
mounted() { },
methods: {
// 切换活动类型
jumpTab(item, type) {
if (this.activedTabId === type) return;
this.activedTabId = type;
// this.attributes = { activeSeckillType: type }
this.seckillActivedType = type;
this.onGetSeckillCurrent();
},
// 获取秒杀
onGetSeckillCurrent() {
const url =
this.activedTabId === "seckill" ? getSeckillCurrent : getSeckillPreview;
console.log('获取秒杀----', this.activedTabId)
url().then((res) => {
console.log("获取秒杀", res);
if (res.bizcode === 100) {
@@ -480,11 +358,11 @@ export default {
}
});
},
jumpSearch() {
uni.navigateTo({
url: "/pages/rwa_package/dongjian/search",
});
},
jumpSearch() {
uni.navigateTo({
url: "/pages/rwa_package/dongjian/search",
});
},
// 商品列表
onGetSuperGoodsList() {
searchList({
@@ -691,7 +569,7 @@ export default {
prg = parseInt(
(parseFloat(task.downloadedSize) /
parseFloat(task.totalSize)) *
100,
100,
);
self.bannerPercentage = prg;
break;
@@ -798,8 +676,8 @@ export default {
.home_header_warp {
background: linear-gradient(270deg, #af39c4 0%, #7732ff 100%);
height: 900rpx;
padding: 160rpx 30rpx 0rpx;
height: auto;
padding: calc(var(--status-bar-height) + 80rpx) 30rpx 30rpx;
}
.home_content_z_warp {
@@ -817,8 +695,12 @@ export default {
right: 0;
z-index: 999;
background: linear-gradient(270deg, #af39c4 0%, #7732ff 100%);
padding: 60rpx 30rpx 20rpx;
padding: calc(var(--status-bar-height) + 20rpx) 30rpx 20rpx;
/* 解决部分机型下 fixed 定位底部出现 1px 渲染缝隙（白线）的问题 */
border-bottom: 1px solid transparent;
border-image: linear-gradient(270deg, #af39c4 0%, #7732ff 100%) 1;
}
.header_right_warp {
display: flex;
align-items: center;
@@ -855,6 +737,7 @@ export default {
justify-content: space-between;
// padding: 0 30rpx;
color: #ffffff;
margin-top: 50rpx;
.logo_banner_title {
font-weight: bold;
@@ -1163,13 +1046,13 @@ export default {
display: flex;
gap: 10rpx;
justify-content: space-between;
padding: 30rpx 30rpx 0;
padding: 30rpx 30rpx 15rpx;
background-color: #fff;
.min_card_item {
padding: 10rpx 12rpx;
flex: 1;
height: 108rpx;
// height: 108rpx;
border-radius: 30rpx;
opacity: 0.8;
border-radius: 16rpx;
@@ -1209,7 +1092,8 @@ export default {
.home_actived_item_warp {
padding: 0 30rpx 30rpx;
background-color: #fff;
margin-bottom: 30rpx;
margin-bottom: 20rpx;
&:last-child {
margin-bottom: 0;
}
@@ -1223,11 +1107,12 @@ export default {
.product_comm_tip_left {
display: flex;
align-items: center;
font-size: 32rpx;
font-size: 36rpx;
.uni-image {
width: 50rpx;
height: 100%;
width: 40rpx;
height: 40rpx;
margin-right: 10rpx;
}
.tip_title {
@@ -1246,11 +1131,12 @@ export default {
font-size: 24rpx;
color: #666666;
::v-deep(.u-image) {
display: flex !important;
align-items: center !important;
margin-left: 10rpx;
.uni-image {
width: 30rpx;
height: 30rpx;
vertical-align: middle;
}
}
}
}
@@ -1259,8 +1145,7 @@ export default {
.uni-banner-news {
width: 540rpx;
margin: 0 auto;
background: url(https://hashmall-prod.oss-cn-shenzhen.aliyuncs.com/common/image/%E9%9D%9E%E5%BC%BA%E5%88%B6%E5%8D%87%E7%BA%A7.png)
no-repeat;
background: url(https://hashmall-prod.oss-cn-shenzhen.aliyuncs.com/common/image/%E9%9D%9E%E5%BC%BA%E5%88%B6%E5%8D%87%E7%BA%A7.png) no-repeat;
background-size: 100% 100%;
.close_btn {