charles/frontend-app
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity
Files
8a3858f8ba7ebc655d3fab0eff9bb7cd7a312c95
frontend-app/pages/home/home.vue
T

1323 lines
34 KiB
Vue
Raw Normal View History

feat: 首页改造
2026-07-12 22:23:16 +08:00
<template>
feat: 首页搜索
2026-07-15 12:08:13 +08:00
<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 style="margin-top: 10rpx">
<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>
</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>
<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>
</view>
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
<!-- 分类 -->
<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_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>
<view class="not_order_msg_warp">暂无分类</view>
</view>
</view>
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
<!-- 爆款专区-->
<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
>
</view>
<view class="yp_title_right">
<text>立即抢购</text>
<view class="yp_arrow_circle">
<view class="yp_arrow_chevron"></view>
</view>
</view>
</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_image_wrapper">
<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>
</view>
</view>
</view>
</view>
</view>
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
<!-- 带灰色背景的内容 -->
<view class="home_content_warp Hot_Picks_content">
<!-- 积分兑换，红包抽奖 -->
<view class="min_card_warp">
<!-- 积分兑换 -->
<view class="min_card_item" @click="jumpIntegral">
<!-- <up-image src="https://static.tbmall.xin/static/home/min_card_jfdh.png" width="60" height="14" bgColor="#f1f6ff00" ></up-image> -->
<view class="min_card_item_content">
<view class="min_card_item_title">积分兑换</view>
<view class="content_msg">
<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>
</view>
<!-- 红包抽奖 -->
<view class="min_card_item" @click="jumpTurntable">
<!-- <up-image src="https://static.tbmall.xin/static/home/min_card_hbcj.png" width="60" height="14" bgColor="#f1f6ff00" ></up-image> -->
<view class="min_card_item_content">
<view class="min_card_item_title">红包抽奖</view>
<view class="content_msg">
<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>
</view>
</view>
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
<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="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>
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
<view class="product_comm_tip_right"
>{{ item.rightText }}
<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>
</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>
</view>
</view>
</view>
fixbug: 修改页面改造bug
2026-07-14 23:08:25 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
<!-- 为您精选 -->
<choiceness />
</view>
</view>
</view>
fixbug: 修改页面改造bug
2026-07-14 23:08:25 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
<!-- 暂未开放 -->
<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>
</view>
<view class="content_">
<view class="content_1">温馨提示</view>
<view class="content_2">暂未开放</view>
</view>
<view class="but_">
<view class="but_copy" @click="openShow = false">确定</view>
</view>
</view>
</up-modal>
<!-- #ifndef H5 || MP-WEIXIN-->
<CustomTabBar :tabIndex="0" />
<!-- #endif -->
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
<up-overlay :show="bannerShow">
<view class="up_content" @tap.stop>
<view class="uni-banner">
<view class="close_btn" @click="bannerShow = false"></view>
<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>
<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>
<view class="banner_loading_msg">
更新中{{ bannerPercentage }}%
</view>
</view>
</view>
</view>
</view>
</up-overlay>
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
<!-- 公告弹窗 -->
<up-overlay :show="newsShow">
<view class="up_content" @tap.stop>
<view class="uni-banner-news">
<view class="close_btn" @click="newsShow = false"></view>
<view class="banner_box">
<view class="banner_box-title">{{ newsList[0].title }}</view>
<view class="banner_box-subTitle">{{ newsList[0].subTitle }}</view>
<view class="banner_box-btn" @click="jumpNewSearch">查看</view>
</view>
</view>
</view>
</up-overlay>
<HomePopup
:show="homeShow"
:dataObj="curData"
@jumpShop="onJumpShop"
></HomePopup>
</view>
feat: 首页改造
2026-07-12 22:23:16 +08:00
</template>
<script>
import choiceness from "@/components/choiceness/choiceness.vue";
import {
feat: 首页搜索
2026-07-15 12:08:13 +08:00
getGoodsDetail,
searchList,
getSeckillCurrent,
getSeckillPreview,
getSeckillGoodsList,
getGoodsTags,
feat: 首页改造
2026-07-12 22:23:16 +08:00
} from "@/api/product.js";
feat: 首页搜索
2026-07-15 12:08:13 +08:00
import { checkAppVersion } from "@/api/common.js";
import { SEARCH_TYPE, SORT_TYPE } from "@/utils/enumUtils.js";
feat: 首页改造
2026-07-12 22:23:16 +08:00
import CustomTabBar from "@/components/custom-tab-bar.vue"; // 引入自定义组件路径可能需要根据项目结构调整
import dayjs from "dayjs";
import useTabber from "tabber-component";
feat: 首页搜索
2026-07-15 12:08:13 +08:00
import { getNewsList } from "@/api/news.js";
import { comparisonVersionHandler } from "@/utils/index.js";
feat: 首页改造
2026-07-12 22:23:16 +08:00
import HomePopup from "@/components/common/home-popup.vue";
import productSeckillCard from "@/components/common/product-seckill-card.vue";
feat: 首页搜索
2026-07-15 12:08:13 +08:00
import { SHARE_URL } from "@/utils/config.js";
feat: 首页改造
2026-07-12 22:23:16 +08:00
export default {
feat: 首页搜索
2026-07-15 12:08:13 +08:00
components: {
choiceness,
CustomTabBar,
HomePopup,
productSeckillCard,
},
data() {
return {
currentNum: 0,
sortList: [],
faddishProduct: [], // 爆款专区
productLoading: false,
openShow: false,
platformType: null, // 当前设备信息
bannerShow: false, // 是否需要強制更新app
type: "", // 设备类型 android:2, ios:1
updateApkObj: {}, // 后台数据
bannerPercentageShow: false, // 是否显示进度条
bannerPercentage: 0, // 进度条
curId: null,
curData: null,
homeShow: false,
newsList: [], // 公告列表
newsShow: false, // 是否显示公告弹窗
seckillGoodsList: [], // 秒杀商品列表
superGoodsList: [], // 超级补贴商品列表
homeActivedList: [
{
id: 1,
title: "超级补贴",
title_icon: "https://static.tbmall.xin/static/new-home/home_4.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",
path: "limited-time",
rightText: "专属补贴 . 低价秒杀",
activedType: "seckill",
},
], // 首页活动列表
activedTabId: "seckill", // 当前选中的活动类型
};
},
onShow() {
// 获取设备是安卓还是ios
const appUpdate = uni.getStorageSync("platform");
const versionUpdateTime = uni.getStorageSync("versionUpdateTime");
// #ifdef APP-PLUS
console.log(
"上次更新时间 versionUpdateTime",
dayjs(versionUpdateTime).format("YYYY-MM-DD HH:mm:ss"),
);
console.log("当前时间戳", dayjs().format("YYYY-MM-DD HH:mm:ss"));
const time1 = dayjs(versionUpdateTime); // 上一次更新的时间
const time2 = dayjs();
const diff = time2.diff(time1);
if (!versionUpdateTime || diff > 5 * 60 * 1000) {
this.platformType = appUpdate == "android" ? "ANDROID" : "IOS";
this.checkUpdate(); // 判断是否需要更新
} else {
this.onClipboard();
}
// #endif
this.getSortList();
this.querySearchList(SEARCH_TYPE.EXPLOSIVE); // 爆单专区
this.onNews(); // 获取公告
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
// 秒杀
this.onGetSeckillCurrent();
this.onGetSuperGoodsList();
},
onLoad() {
/*#ifdef APP-PLUS*/
uni.hideTabBar({
animation: false,
});
/*#endif*/
// 不需要启动页，才渲染首页
this.pageReady = true;
},
mounted() {},
methods: {
// 切换活动类型
jumpTab(item, type) {
this.activedTabId = type;
this.onGetSeckillCurrent();
},
// 获取秒杀
onGetSeckillCurrent() {
const url =
this.activedTabId === "seckill" ? getSeckillCurrent : getSeckillPreview;
url().then((res) => {
console.log("获取秒杀", res);
if (res.bizcode === 100) {
res.data.activityId &&
this.onGetSeckillGoodsList(res.data.activityId, "seckillGoodsList");
}
});
},
// 获取秒杀商品
onGetSeckillGoodsList(activityId, key) {
getSeckillGoodsList({
activityId: activityId,
page: 1,
pageSize: 3,
}).then((res) => {
console.log("获取秒杀商品", res);
if (res.bizcode === 100) {
this[key] = res.data.entitys || [];
console.log(this[key]);
}
});
},
jumpSearch() {
uni.navigateTo({
url: "/pages/rwa_package/dongjian/search",
feat: 首页改造
2026-07-12 22:23:16 +08:00
});
},
feat: 首页搜索
2026-07-15 12:08:13 +08:00
// 商品列表
onGetSuperGoodsList() {
searchList({
type: -2,
page: 1,
pageSize: 3,
}).then((res) => {
console.log("商品列表", res);
if (res.bizcode === 100) {
this.superGoodsList = res.data || [];
console.log(this.superGoodsList);
}
});
},
// 获取公告
jumpNewSearch(type) {
if (type === "list") {
uni.navigateTo({
url: "/pages/login_package/announcement/announcement",
});
return;
}
uni.setStorageSync("isReadNews", this.newsList[0].id);
uni.navigateTo({
url:
"/pages/login_package/announcement-detail/announcement-detail?id=" +
this.newsList[0].id,
});
},
onNews() {
getNewsList({
category: 2,
type: 0,
page: 1,
pageSize: 10,
}).then((res) => {
console.log("获取公告", res);
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
if (res.bizcode === 100) {
this.newsList = res.data.entitys || [];
console.log(this.newsList);
const id = uni.getStorageSync("isReadNews");
this.newsShow = false;
if (id != this.newsList[0].id && this.newsList[0].isPop === 1) {
this.newsShow = true;
}
}
});
},
// 查看详情
onJumpNews() {
uni.navigateTo({
url: `/pages/login_package/news/news?id=${this.newsList[0].id}`,
});
},
onJumpShop() {
uni.navigateTo({
url: `/pages/other_package/productInfo/productInfo?id=${this.curId}`,
});
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
this.curId = null;
this.curData = null;
this.homeShow = false;
},
onClipboard() {
let _this = this;
uni.getClipboardData({
success: function (res) {
// http://localhost:5173/#/pages/other_package/productInfo/productInfo?id=1038
console.log(res.data); // 剪贴板内容
if (
res.data.indexOf(
`${SHARE_URL}/#/pages/other_package/productInfo/productInfo?id=`,
) != -1
) {
uni.showModal({
title: "",
content: "当前APP想要粘贴商品详情，是否继续?",
success: (res1) => {
if (res1.confirm) {
let id = res.data.match(/=(.*?)\s/);
_this.curId = Number(id[1]);
_this.getShop();
uni.setClipboardData({
data: "",
});
}
},
fail: (res2) => {
uni.setClipboardData({
data: "",
});
},
});
}
},
fail: function (err) {
console.error("获取剪贴板内容失败", err);
},
});
},
getShop() {
const params = {
id: this.curId,
};
getGoodsDetail(params).then((res) => {
this.curData = res.data;
this.homeShow = true;
});
},
onJumpYou() {
uni.navigateTo({
url: "/pages/rwa_package/shop/you-shop",
});
},
checkUpdate() {
const self = this,
localAppVersonName = uni.getStorageSync("version"),
localAppVerson = uni.getStorageSync("versionCode");
// #ifdef APP-PLUS
plus.runtime.getProperty(plus.runtime.appid, function (widgetInfo) {
const params = {
terminal: self.platformType,
versionCode: localAppVerson,
};
console.log("wgt更新-0", params);
checkAppVersion(params).then((res) => {
console.log("wgt更新-1", res);
if (res && res.bizcode === 100) {
const data = res.data || {};
// app大版本更新，versionName：1.0.1 versionCode：102
if (
data &&
Object.keys(data).length !== 0 &&
comparisonVersionHandler(localAppVerson, data.versionCode)
) {
uni.hideTabBar(); // 隐藏首页底部tabbar 按钮
self.updateApkObj = data;
self.bannerShow = true; // 显示弹窗
return;
} else {
console.log("wgt更新-2");
self.onClipboard();
return;
}
}
});
});
// #endif
},
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
// 安装
goUpdate(updateApkObj, platformType) {
const self = this;
if (platformType == "ANDROID") {
// 弹出系统等待对话框
var dtask = plus.downloader.createDownload(
updateApkObj.downloadUrl,
{},
function (d, status) {
// 下载完成
if (status == 200) {
plus.runtime.install(
plus.io.convertLocalFileSystemURL(d.filename),
{
force: true,
},
function (resp) {
// 直接重启APP
uni.setStorageSync("versionUpdateTime", dayjs().valueOf()); // 记录升级的时间
plus.runtime.restart();
},
function (error) {
console.log("error", error);
uni.showToast({
title: error.message,
mask: false,
duration: 1500,
});
},
);
} else {
self.bannerPercentageShow = false;
uni.showToast({
title: "更新失败",
mask: false,
duration: 1500,
});
}
},
);
try {
dtask.start(); // 开启下载的任务
let prg = 0;
this.bannerPercentageShow = true;
dtask.addEventListener("statechanged", function (task, status) {
// 给下载任务设置一个监听 并根据状态 做操作
switch (task.state) {
case 1:
break;
case 2:
break;
case 3:
prg = parseInt(
(parseFloat(task.downloadedSize) /
parseFloat(task.totalSize)) *
100,
);
self.bannerPercentage = prg;
break;
case 4:
plus.nativeUI.closeWaiting();
self.bannerShow = false; // 显示弹窗
break;
}
});
} catch (err) {
console.log("更新失败-03err", err);
plus.nativeUI.closeWaiting();
uni.showToast({
title: "更新失败-03",
mask: false,
duration: 1500,
});
}
} else if (platformType == "IOS") {
// ios跳转到app store
plus.runtime.openURL(updateApkObj.downloadUrl);
}
},
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
jumpIntegral() {
uni.navigateTo({
url: "/pages/rwa_package/shop/fen-shop",
});
},
jumpPage(path) {
uni.navigateTo({
url: `/pages/active/${path}/${path}`,
});
},
jumpTurntable() {
uni.navigateTo({
url: "/pages/other_package/nine-grid/nine-grid?backPath=home",
});
},
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
/**
* 查询商品列表
*/
async querySearchList(type) {
this.productLoading = true;
const params = {
type,
page: 1,
isRecomm: true,
pageSize: type === SEARCH_TYPE.SOMETHING ? 4 : 3,
};
const resp = await searchList(params);
if (resp && resp.bizcode === 100) {
this.faddishProduct = resp.data;
}
this.productLoading = false;
},
/**
* 查询分类列表
*/
async getSortList() {
const resp = await getGoodsTags({ type: 4 });
if (resp && resp.bizcode === 100) {
this.sortList = resp.data.sort((a, b) => a.sort - b.sort);
}
},
jumpSort({ id }) {
const item = SORT_TYPE.find((item) => item.key == id);
console.log("跳转到分类栏目", item);
if (item.path.includes("/pages/supply_chain/supply_chain")) {
uni.setStorageSync("sortParams", { key: item.key, value: item.value });
return uni.switchTab({
url: item.path,
});
}
uni.navigateTo({ url: item.path });
},
// 跳转到商品详情
jumpInfo(item) {
uni.navigateTo({
url: "/pages/other_package/productInfo/productInfo?id=" + item.id,
});
},
},
computed: {
isBlockedDate() {
return useTabber(6);
},
},
feat: 首页改造
2026-07-12 22:23:16 +08:00
};
</script>
<style lang="scss" scoped>
.home_warp {
feat: 首页搜索
2026-07-15 12:08:13 +08:00
background: #f4f4f4;
height: calc(100vh - env(safe-area-inset-bottom)); // 是底部的导航栏高度
overflow: auto;
position: relative;
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
&.iosplatformType {
height: 100vh;
}
feat: 首页改造
2026-07-12 22:23:16 +08:00
}
.home_header_warp {
feat: 首页搜索
2026-07-15 12:08:13 +08:00
background: linear-gradient(270deg, #af39c4 0%, #7732ff 100%);
height: 900rpx;
padding: 160rpx 30rpx 0rpx;
feat: 首页改造
2026-07-12 22:23:16 +08:00
}
.home_content_z_warp {
feat: 首页搜索
2026-07-15 12:08:13 +08:00
position: absolute;
left: 0;
width: 100%;
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
.header_title_warp {
display: flex;
align-items: center;
margin-bottom: 30rpx;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
background: linear-gradient(270deg, #af39c4 0%, #7732ff 100%);
padding: 60rpx 30rpx 20rpx;
}
.header_right_warp {
display: flex;
align-items: center;
width: calc(100% - 0rpx);
}
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
.language_warp {
display: flex;
justify-content: space-between;
align-items: center;
width: 100rpx;
padding: 10rpx 20rpx;
background: #ffffff30;
border-radius: 24rpx;
background: linear-gradient(270deg, #ae39c5, #7932fe) 2 2;
}
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
.chart_img {
width: 50rpx;
height: 50rpx;
margin-left: 15rpx;
}
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
.search_msg_warp {
margin-left: 12rpx;
font-weight: 500;
font-size: 28rpx;
color: #ffffffb3;
}
feat: 首页改造
2026-07-12 22:23:16 +08:00
}
.logo_banner {
feat: 首页搜索
2026-07-15 12:08:13 +08:00
display: flex;
justify-content: space-between;
// padding: 0 30rpx;
color: #ffffff;
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
.logo_banner_title {
font-weight: bold;
font-size: 38rpx;
line-height: 36rpx;
margin: 20rpx 0;
}
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
.logo_banner_msg {
font-size: 22rpx;
}
feat: 首页改造
2026-07-12 22:23:16 +08:00
}
.home_sort_warp {
feat: 首页搜索
2026-07-15 12:08:13 +08:00
// position: absolute;
top: 460rpx;
width: 100%;
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
.sort_warp {
background: #ffffff;
padding: 20rpx;
border-radius: 20rpx;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
.sort_item {
width: 18%;
text-align: center;
margin-bottom: 20rpx;
}
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
.sort_item_title {
font-weight: 500;
font-size: 22rpx;
color: #333333;
}
}
feat: 首页改造
2026-07-12 22:23:16 +08:00
}
.home_content_warp {
feat: 首页搜索
2026-07-15 12:08:13 +08:00
padding-bottom: 100rpx;
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
&.Hot_Picks_Zone {
width: 100%;
box-sizing: border-box;
height: auto;
background: linear-gradient(344deg, #ffffff 0%, #ede3ff 100%);
border-radius: 28rpx;
border: 1rpx solid #dfdfdf;
padding: 24rpx 20rpx 20rpx;
margin: 20rpx auto 0;
}
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
.product_comm_yp {
width: 100%;
display: flex;
flex-direction: column;
}
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
.yp_title {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 0 10rpx;
}
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
.yp_title_left {
display: flex;
align-items: center;
}
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
.yp_title_main {
font-weight: 800;
font-size: 36rpx;
color: #000000;
margin-right: 10rpx;
}
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
.yp_title_sub {
font-size: 22rpx;
color: #333333;
font-weight: 500;
}
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
.yp_title_right {
display: flex;
align-items: center;
font-size: 24rpx;
color: #7632ff;
font-weight: bold;
}
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
.yp_arrow_circle {
width: 24rpx;
height: 24rpx;
background-color: #7632ff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-left: 8rpx;
}
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
.yp_arrow_chevron {
width: 8rpx;
height: 8rpx;
border-top: 3rpx solid #ffffff;
border-right: 3rpx solid #ffffff;
transform: rotate(45deg);
margin-left: -2rpx;
}
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
.yp_content {
display: flex;
justify-content: space-between;
align-items: stretch;
width: 100%;
}
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
.yp_item {
// flex: 0 0 32%;
flex: 1;
// height: 268rpx;
max-width: 33.3%;
gap: 10rpx;
min-width: 0;
background-color: #ffffff;
border-radius: 24rpx;
border: 1rpx solid #eae5f9;
padding: 16rpx;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
}
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
.yp_item_image_wrapper {
width: 100%;
display: flex;
justify-content: center;
}
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
.yp_item_info {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
min-width: 0;
}
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
.yp_item_name {
font-size: 24rpx;
color: #000000;
font-weight: bold;
text-align: center;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 12rpx;
}
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
.yp_item_price_tag {
width: 100%;
background: linear-gradient(270deg, #b164fb 0%, #7632ff 100%);
color: #ffffff;
font-size: 20rpx;
display: flex;
justify-content: center;
align-items: center;
height: 44rpx;
border-radius: 12rpx;
white-space: nowrap;
font-weight: bold;
}
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
.product_comm {
border-radius: 30rpx;
padding: 10rpx;
color: #ffffff;
margin-top: 20rpx;
}
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
.yx_warp {
background: linear-gradient(270deg, #fdefff 0%, #ede3ff 100%);
}
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
.product_title_z {
font-weight: 800;
font-size: 36rpx;
color: #333333ff;
margin-right: 10rpx;
}
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
.product_title_zk {
background: #b164fb45;
border-radius: 6rpx;
padding: 2rpx 20rpx;
color: $app-zt-color;
}
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
.product_title_left {
font-size: 20rpx;
display: flex;
align-items: center;
}
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
.product_title_f {
font-size: 20rpx;
color: #ffffff;
margin-left: 10rpx;
display: flex;
align-items: center;
}
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
.product_content_yx {
display: flex;
padding: 20rpx;
}
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
.product_content {
background-color: #ffffff;
padding: 20rpx;
border-radius: 24rpx;
display: flex;
align-items: center;
}
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
.product_content2 {
justify-content: space-between;
}
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
.product_item {
width: 32%;
position: relative;
margin-right: 20rpx;
}
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
.product_item2 {
width: 32%;
position: relative;
}
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
.product_item_yx {
width: 23%;
position: relative;
}
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
.product_item_yx2 {
margin-right: 20rpx;
}
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
.product_f_item {
position: absolute;
bottom: 0;
width: calc(100% - 40rpx);
height: 66rpx;
background: #f0e7fe;
border-radius: 0rpx 0rpx 12rpx 12rpx;
border: 1rpx solid #ffffff;
padding: 10rpx 20rpx;
font-size: 18rpx;
color: #000000;
}
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
.product_f_item_name {
width: 172rpx;
white-space: nowrap;
/* 防止文本换行 */
overflow: hidden;
/* 隐藏溢出的文本 */
text-overflow: ellipsis;
/* 使用省略号表示溢出的内容 */
font-weight: bold;
}
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
.product_f_item_price {
text-align: center;
border-radius: 10rpx;
color: #ffffff;
margin-top: 10rpx;
padding: 2rpx 0;
}
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
.product_f_item_price_yx {
background: #ffba41;
}
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
.product_f_item_price_hx {
background: linear-gradient(270deg, #af39c4 0%, #7732ff 100%);
}
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
.product_tips {
font-size: 24rpx;
line-height: 40rpx;
margin-left: 20rpx;
background: linear-gradient(180deg, #b039c2 0%, #8b34e9 23%, #7632ff 100%);
-webkit-background-clip: text;
color: transparent;
display: inline-block;
}
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
// 积分兑换，红包
.min_card_warp {
display: flex;
gap: 10rpx;
justify-content: space-between;
padding: 30rpx 30rpx 0;
background-color: #fff;
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
.min_card_item {
padding: 10rpx 12rpx;
flex: 1;
height: 108rpx;
border-radius: 30rpx;
opacity: 0.8;
border-radius: 16rpx;
display: flex;
justify-content: space-between;
background: linear-gradient(344deg, #ffffff 0%, #ede3ff 100%);
border-radius: 12rpx;
border: 1rpx solid #dfdfdf;
}
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
.min_card_item_content {
margin-top: 15rpx;
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
.min_card_item_title {
font-weight: bold;
font-size: 32rpx;
color: #000000;
}
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
.content_msg {
font-size: 20rpx;
color: #808080;
display: grid;
margin-top: 10rpx;
}
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
.content_msg_but {
display: flex;
align-items: center;
margin-top: 20rpx;
}
}
}
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
// 热门榜
.home_actived_warp {
.home_actived_item_warp {
padding: 0 30rpx 30rpx;
background-color: #fff;
margin-bottom: 30rpx;
&:last-child {
margin-bottom: 0;
}
}
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
.product_comm_tip {
display: flex;
justify-content: space-between;
padding: 20rpx 0;
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
.product_comm_tip_left {
display: flex;
align-items: center;
font-size: 32rpx;
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
.uni-image {
width: 50rpx;
height: 100%;
}
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
.tip_title {
color: #666666;
}
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
.tip_title_lable {
font-weight: 500;
color: #000000;
}
}
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
.product_comm_tip_right {
display: flex;
align-items: center;
font-size: 24rpx;
color: #666666;
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
::v-deep(.u-image) {
display: flex !important;
align-items: center !important;
margin-left: 10rpx;
}
}
}
}
feat: 首页改造
2026-07-12 22:23:16 +08:00
}
.uni-banner-news {
feat: 首页搜索
2026-07-15 12:08:13 +08:00
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-size: 100% 100%;
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
.close_btn {
position: absolute;
top: 0;
right: 0;
width: 48rpx;
height: 48rpx;
}
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
.banner_box-news {
height: 700rpx;
// padding:40rpx;
width: 90%;
}
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
.banner_box-title {
font-weight: 500;
font-size: 16px;
color: #333333;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
/* 下面两行是为了兼容老版本 Firefox */
line-clamp: 2;
box-orient: vertical;
margin-top: 250rpx;
}
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
.banner_box-subTitle {
font-size: 14px;
color: #868686;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
/* 下面两行是为了兼容老版本 Firefox */
line-clamp: 3;
box-orient: vertical;
margin-top: 30rpx;
}
feat: 首页改造
2026-07-12 22:23:16 +08:00
feat: 首页搜索
2026-07-15 12:08:13 +08:00
.banner_box-btn {
// width: 480rpx;
width: calc(100% - 80rpx);
height: 80rpx;
background: linear-gradient(270deg, #af39c4 0%, #7732ff 100%);
border-radius: 16rpx;
font-weight: 500;
font-size: 32rpx;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
bottom: 60rpx;
}
feat: 首页改造
2026-07-12 22:23:16 +08:00
}
feat: 启动页
2025-12-17 16:22:17 +08:00
</style>
Reference in New Issue Copy Permalink