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

feat: 首页搜索

Browse Source
This commit is contained in:
黄泽群
2026-07-15 12:08:13 +08:00
parent 45176d7d22
commit 8a3858f8ba
1 changed files with 1204 additions and 1050 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/home/home.vue
+254 -100
View File
@@ -1,44 +1,104 @@
<template> <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_content_z_warp">
<view class="home_header_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 class="logo_banner">
<view style="padding: 20rpx 0 0 20rpx"> <view style="padding: 20rpx 0 0 20rpx">
<up-image src="https://static.tbmall.xin/static/home/logo_banner.png" width="108" height="16" <up-image
bgColor="#f1f6ff00"></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_title">TB聚合商城</view>
<view class="logo_banner_msg">全民共创共享的电商平台</view> <view class="logo_banner_msg">全民共创共享的电商平台</view>
</view> </view>
<up-image src="https://static.tbmall.xin/static/logo_banner2.png" width="140" height="98" <up-image
bgColor="#f1f6ff00"></up-image> src="https://static.tbmall.xin/static/logo_banner2.png"
width="140"
height="98"
bgColor="#f1f6ff00"
></up-image>
</view> </view>
<!-- 分类 --> <!-- 分类 -->
<view class="home_sort_warp"> <view class="home_sort_warp">
<view class="sort_comm_warp" v-if="sortList && sortList.length !== 0 && isBlockedDate"> <view
<view v-for="item in sortList" :key="item.id" class="sort_item_comm" @click="jumpSort(item)"> class="sort_comm_warp"
<up-image :src="item.icon" width="40" height="32" bgColor="#f1f6ff00"></up-image> 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 class="sort_item_title_comm">{{ item.name }}</view>
</view> </view>
</view> </view>
<view v-else class="not_order_warp"> <view v-else class="not_order_warp">
<up-image src="https://static.tbmall.xin/static/not_order.png" width="80" height="80" <up-image
bgColor="#f1f6ff00"></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 class="not_order_msg_warp">暂无分类</view>
</view> </view>
</view> </view>
<!-- 爆款专区--> <!-- 爆款专区-->
<view class="home_content_warp Hot_Picks_Zone" v-if="faddishProduct && faddishProduct.length !== 0" <view
@click="onJumpYou"> class="home_content_warp Hot_Picks_Zone"
v-if="faddishProduct && faddishProduct.length !== 0"
@click="onJumpYou"
>
<view class="product_comm_yp"> <view class="product_comm_yp">
<view class="yp_title"> <view class="yp_title">
<view class="yp_title_left"> <view class="yp_title_left">
<text class="yp_title_main">信任桥优品</text> <text class="yp_title_main">信任桥优品</text>
<up-image src="https://static.tbmall.xin/static/home/youxuan.png" width="14" height="14" <up-image
bgColor="#f1f6ff00"></up-image> src="https://static.tbmall.xin/static/home/youxuan.png"
<text class="yp_title_sub" style="margin-left: 8rpx;">品牌五折秒杀福利</text> width="14"
height="14"
bgColor="#f1f6ff00"
></up-image>
<text class="yp_title_sub" style="margin-left: 8rpx"
>品牌五折秒杀福利</text
>
</view> </view>
<view class="yp_title_right"> <view class="yp_title_right">
<text>立即抢购</text> <text>立即抢购</text>
@@ -49,15 +109,27 @@
</view> </view>
<view class="yp_content"> <view class="yp_content">
<!-- <up-loading-icon :show="productLoading"></up-loading-icon> --> <!-- <up-loading-icon :show="productLoading"></up-loading-icon> -->
<view class="yp_item" v-for="item in faddishProduct" :key="item.id" <view
@click.stop="jumpInfo(item)"> class="yp_item"
v-for="item in faddishProduct"
:key="item.id"
@click.stop="jumpInfo(item)"
>
<view class="yp_item_image_wrapper"> <view class="yp_item_image_wrapper">
<up-image :src="item.url" width="100%" height="88" bgColor="#f1f6ff00" <up-image
shape="square" radius="15"></up-image> :src="item.url"
width="100%"
height="88"
bgColor="#f1f6ff00"
shape="square"
radius="15"
></up-image>
</view> </view>
<view class="yp_item_info"> <view class="yp_item_info">
<view class="yp_item_name">{{ item.title }}</view> <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> </view>
</view> </view>
@@ -78,8 +150,12 @@
<view>好物随心兑</view> <view>好物随心兑</view>
</view> </view>
</view> </view>
<up-image src="https://static.tbmall.xin/static/home/min_card_jfdh_2.png" width="55" height="55" <up-image
bgColor="#f1f6ff00"></up-image> src="https://static.tbmall.xin/static/home/min_card_jfdh_2.png"
width="55"
height="55"
bgColor="#f1f6ff00"
></up-image>
</view> </view>
<!-- 红包抽奖 --> <!-- 红包抽奖 -->
<view class="min_card_item" @click="jumpTurntable"> <view class="min_card_item" @click="jumpTurntable">
@@ -90,37 +166,88 @@
<view>现金红包等你拿！</view> <view>现金红包等你拿！</view>
</view> </view>
</view> </view>
<up-image src="https://static.tbmall.xin/static/home/min_card_hbcj_2.png" width="45" height="45" <up-image
bgColor="#f1f6ff00"></up-image> src="https://static.tbmall.xin/static/home/min_card_hbcj_2.png"
width="45"
height="45"
bgColor="#f1f6ff00"
></up-image>
</view> </view>
</view> </view>
<view class="home_actived_warp"> <view class="home_actived_warp">
<view class="home_actived_item_warp" v-for="item in homeActivedList" :key="item.id"> <view
<view class="home_actived_item" class="home_actived_item_warp"
v-if="(item.activedType === 'seckill' && seckillGoodsList.length !== 0) || (item.activedType === 'super' && superGoodsList.length !== 0)"> 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" @click="jumpPage(item.path)">
<view class="product_comm_tip_left"> <view class="product_comm_tip_left">
<image class="uni-image" :src="item.title_icon"></image> <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
<view :class="[activedTabId === 'seckill' ? 'tip_title_lable' : 'tip_title']" @click.stop="jumpTab(item, 'seckill')">{{ item.title }}</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> </view>
<view class="product_comm_tip_right">{{ item.rightText }} <view class="product_comm_tip_right"
<up-image src="/static/common/right.png" width="15" height="15" >{{ item.rightText }}
bgColor="#f1f6ff00"></up-image> <up-image
src="/static/common/right.png"
width="15"
height="15"
bgColor="#f1f6ff00"
></up-image>
</view> </view>
</view> </view>
<!-- 限时秒杀 --> <!-- 限时秒杀 -->
<view v-if="item.activedType === 'seckill'"> <view v-if="item.activedType === 'seckill'">
<view class="product_seckill_card" v-for="ele in seckillGoodsList" :key="ele.id"> <view
<productSeckillCard :item="ele" :actived-type="item.activedType" /> class="product_seckill_card"
v-for="ele in seckillGoodsList"
:key="ele.id"
>
<productSeckillCard
:item="ele"
:actived-type="item.activedType"
/>
</view> </view>
</view> </view>
<!-- 超级补贴 --> <!-- 超级补贴 -->
<view v-if="item.activedType === 'super'"> <view v-if="item.activedType === 'super'">
<view class="product_seckill_card" v-for="ele in superGoodsList" :key="ele.id"> <view
<productSeckillCard :item="ele" :actived-type="item.activedType" /> class="product_seckill_card"
v-for="ele in superGoodsList"
:key="ele.id"
>
<productSeckillCard
:item="ele"
:actived-type="item.activedType"
/>
</view> </view>
</view> </view>
</view> </view>
@@ -128,9 +255,7 @@
<!-- 为您精选 --> <!-- 为您精选 -->
<choiceness /> <choiceness />
</view> </view>
</view> </view>
</view> </view>
@@ -138,7 +263,12 @@
<up-modal :show="openShow" :showConfirmButton="false"> <up-modal :show="openShow" :showConfirmButton="false">
<view class="slot-content"> <view class="slot-content">
<view class="close_warp" @click="openShow = false"> <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>
<view class="content_"> <view class="content_">
<view class="content_1">温馨提示</view> <view class="content_1">温馨提示</view>
@@ -160,15 +290,24 @@
<view class="banner_box"> <view class="banner_box">
<view class="conter">{{ updateApkObj.content }}</view> <view class="conter">{{ updateApkObj.content }}</view>
<view class="banner_foot" v-if="!bannerPercentageShow"> <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> </button>
<view @click="bannerShow = false" class="banner_foot_button_no" <view
v-if="!updateApkObj.isForce">暂不更新 @click="bannerShow = false"
class="banner_foot_button_no"
v-if="!updateApkObj.isForce"
>暂不更新
</view> </view>
</view> </view>
<view v-else> <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"> <view class="banner_loading_msg">
更新中{{ bannerPercentage }}% 更新中{{ bannerPercentage }}%
</view> </view>
@@ -191,7 +330,11 @@
</view> </view>
</view> </view>
</up-overlay> </up-overlay>
<HomePopup :show="homeShow" :dataObj="curData" @jumpShop="onJumpShop"></HomePopup> <HomePopup
:show="homeShow"
:dataObj="curData"
@jumpShop="onJumpShop"
></HomePopup>
</view> </view>
</template> </template>
@@ -205,34 +348,23 @@ import {
getSeckillGoodsList, getSeckillGoodsList,
getGoodsTags, getGoodsTags,
} from "@/api/product.js"; } from "@/api/product.js";
import { import { checkAppVersion } from "@/api/common.js";
checkAppVersion, import { SEARCH_TYPE, SORT_TYPE } from "@/utils/enumUtils.js";
} from "@/api/common.js";
import {
SEARCH_TYPE,
SORT_TYPE,
} from "@/utils/enumUtils.js";
import CustomTabBar from "@/components/custom-tab-bar.vue"; // 引入自定义组件路径可能需要根据项目结构调整 import CustomTabBar from "@/components/custom-tab-bar.vue"; // 引入自定义组件路径可能需要根据项目结构调整
import dayjs from "dayjs"; import dayjs from "dayjs";
import useTabber from "tabber-component"; import useTabber from "tabber-component";
import { import { getNewsList } from "@/api/news.js";
getNewsList import { comparisonVersionHandler } from "@/utils/index.js";
} from "@/api/news.js";
import {
comparisonVersionHandler
} from "@/utils/index.js";
import HomePopup from "@/components/common/home-popup.vue"; import HomePopup from "@/components/common/home-popup.vue";
import productSeckillCard from "@/components/common/product-seckill-card.vue"; import productSeckillCard from "@/components/common/product-seckill-card.vue";
import { import { SHARE_URL } from "@/utils/config.js";
SHARE_URL
} from "@/utils/config.js";
export default { export default {
components: { components: {
choiceness, choiceness,
CustomTabBar, CustomTabBar,
HomePopup, HomePopup,
productSeckillCard productSeckillCard,
}, },
data() { data() {
return { return {
@@ -257,22 +389,23 @@ export default {
homeActivedList: [ homeActivedList: [
{ {
id: 1, id: 1,
title: '超级补贴', title: "超级补贴",
title_icon: 'https://static.tbmall.xin/static/new-home/home_4.png', title_icon: "https://static.tbmall.xin/static/new-home/home_4.png",
path: 'super-subsidy', path: "super-subsidy",
rightText: '官方补贴 .100%正品', rightText: "官方补贴 .100%正品",
activedType: 'super' activedType: "super",
}, { },
{
id: 2, id: 2,
title: '限时秒杀', title: "限时秒杀",
title_text: '活动预告', title_text: "活动预告",
title_icon: 'https://static.tbmall.xin/static/new-home/home_3.png', title_icon: "https://static.tbmall.xin/static/new-home/home_3.png",
path: 'limited-time', path: "limited-time",
rightText: '专属补贴 . 低价秒杀', rightText: "专属补贴 . 低价秒杀",
activedType: 'seckill' activedType: "seckill",
}, },
], // 首页活动列表 ], // 首页活动列表
activedTabId: 'seckill', // 当前选中的活动类型 activedTabId: "seckill", // 当前选中的活动类型
}; };
}, },
onShow() { onShow() {
@@ -282,7 +415,7 @@ export default {
// #ifdef APP-PLUS // #ifdef APP-PLUS
console.log( console.log(
"上次更新时间 versionUpdateTime", "上次更新时间 versionUpdateTime",
dayjs(versionUpdateTime).format("YYYY-MM-DD HH:mm:ss") dayjs(versionUpdateTime).format("YYYY-MM-DD HH:mm:ss"),
); );
console.log("当前时间戳", dayjs().format("YYYY-MM-DD HH:mm:ss")); console.log("当前时间戳", dayjs().format("YYYY-MM-DD HH:mm:ss"));
const time1 = dayjs(versionUpdateTime); // 上一次更新的时间 const time1 = dayjs(versionUpdateTime); // 上一次更新的时间
@@ -312,7 +445,6 @@ export default {
/*#endif*/ /*#endif*/
// 不需要启动页，才渲染首页 // 不需要启动页，才渲染首页
this.pageReady = true; this.pageReady = true;
}, },
mounted() {}, mounted() {},
methods: { methods: {
@@ -323,11 +455,13 @@ export default {
}, },
// 获取秒杀 // 获取秒杀
onGetSeckillCurrent() { onGetSeckillCurrent() {
const url = this.activedTabId === 'seckill' ? getSeckillCurrent : getSeckillPreview; const url =
this.activedTabId === "seckill" ? getSeckillCurrent : getSeckillPreview;
url().then((res) => { url().then((res) => {
console.log("获取秒杀", res); console.log("获取秒杀", res);
if (res.bizcode === 100) { if (res.bizcode === 100) {
res.data.activityId && this.onGetSeckillGoodsList(res.data.activityId, 'seckillGoodsList'); res.data.activityId &&
this.onGetSeckillGoodsList(res.data.activityId, "seckillGoodsList");
} }
}); });
}, },
@@ -346,6 +480,11 @@ export default {
} }
}); });
}, },
jumpSearch() {
uni.navigateTo({
url: "/pages/rwa_package/dongjian/search",
});
},
// 商品列表 // 商品列表
onGetSuperGoodsList() { onGetSuperGoodsList() {
searchList({ searchList({
@@ -362,15 +501,16 @@ export default {
}, },
// 获取公告 // 获取公告
jumpNewSearch(type) { jumpNewSearch(type) {
if (type === 'list') { if (type === "list") {
uni.navigateTo({ uni.navigateTo({
url: "/pages/login_package/announcement/announcement" url: "/pages/login_package/announcement/announcement",
}); });
return; return;
} }
uni.setStorageSync("isReadNews", this.newsList[0].id); uni.setStorageSync("isReadNews", this.newsList[0].id);
uni.navigateTo({ uni.navigateTo({
url: "/pages/login_package/announcement-detail/announcement-detail?id=" + url:
"/pages/login_package/announcement-detail/announcement-detail?id=" +
this.newsList[0].id, this.newsList[0].id,
}); });
}, },
@@ -417,7 +557,7 @@ export default {
console.log(res.data); // 剪贴板内容 console.log(res.data); // 剪贴板内容
if ( if (
res.data.indexOf( res.data.indexOf(
`${SHARE_URL}/#/pages/other_package/productInfo/productInfo?id=` `${SHARE_URL}/#/pages/other_package/productInfo/productInfo?id=`,
) != -1 ) != -1
) { ) {
uni.showModal({ uni.showModal({
@@ -502,13 +642,15 @@ export default {
if (platformType == "ANDROID") { if (platformType == "ANDROID") {
// 弹出系统等待对话框 // 弹出系统等待对话框
var dtask = plus.downloader.createDownload( var dtask = plus.downloader.createDownload(
updateApkObj.downloadUrl, {}, updateApkObj.downloadUrl,
{},
function (d, status) { function (d, status) {
// 下载完成 // 下载完成
if (status == 200) { if (status == 200) {
plus.runtime.install( plus.runtime.install(
plus.io.convertLocalFileSystemURL(d.filename), { plus.io.convertLocalFileSystemURL(d.filename),
force: true {
force: true,
}, },
function (resp) { function (resp) {
// 直接重启APP // 直接重启APP
@@ -522,7 +664,7 @@ export default {
mask: false, mask: false,
duration: 1500, duration: 1500,
}); });
} },
); );
} else { } else {
self.bannerPercentageShow = false; self.bannerPercentageShow = false;
@@ -532,7 +674,7 @@ export default {
duration: 1500, duration: 1500,
}); });
} }
} },
); );
try { try {
dtask.start(); // 开启下载的任务 dtask.start(); // 开启下载的任务
@@ -549,7 +691,7 @@ export default {
prg = parseInt( prg = parseInt(
(parseFloat(task.downloadedSize) / (parseFloat(task.downloadedSize) /
parseFloat(task.totalSize)) * parseFloat(task.totalSize)) *
100 100,
); );
self.bannerPercentage = prg; self.bannerPercentage = prg;
break; break;
@@ -603,7 +745,6 @@ export default {
}; };
const resp = await searchList(params); const resp = await searchList(params);
if (resp && resp.bizcode === 100) { if (resp && resp.bizcode === 100) {
this.faddishProduct = resp.data; this.faddishProduct = resp.data;
} }
this.productLoading = false; this.productLoading = false;
@@ -619,14 +760,14 @@ export default {
}, },
jumpSort({ id }) { jumpSort({ id }) {
const item = SORT_TYPE.find((item) => item.key == id); const item = SORT_TYPE.find((item) => item.key == id);
console.log('跳转到分类栏目', item); console.log("跳转到分类栏目", item);
if (item.path.includes("/pages/supply_chain/supply_chain")) { if (item.path.includes("/pages/supply_chain/supply_chain")) {
uni.setStorageSync('sortParams', { key: item.key, value: item.value }); uni.setStorageSync("sortParams", { key: item.key, value: item.value });
return uni.switchTab({ return uni.switchTab({
url: item.path, url: item.path,
}); });
} }
uni.navigateTo({url: item.path,}) uni.navigateTo({ url: item.path });
}, },
// 跳转到商品详情 // 跳转到商品详情
jumpInfo(item) { jumpInfo(item) {
@@ -645,7 +786,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.home_warp { .home_warp {
background: #F4F4F4; background: #f4f4f4;
height: calc(100vh - env(safe-area-inset-bottom)); // 是底部的导航栏高度 height: calc(100vh - env(safe-area-inset-bottom)); // 是底部的导航栏高度
overflow: auto; overflow: auto;
position: relative; position: relative;
@@ -657,8 +798,8 @@ export default {
.home_header_warp { .home_header_warp {
background: linear-gradient(270deg, #af39c4 0%, #7732ff 100%); background: linear-gradient(270deg, #af39c4 0%, #7732ff 100%);
height: 854rpx; height: 900rpx;
padding: 100rpx 30rpx 0rpx; padding: 160rpx 30rpx 0rpx;
} }
.home_content_z_warp { .home_content_z_warp {
@@ -666,6 +807,18 @@ export default {
left: 0; left: 0;
width: 100%; width: 100%;
.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 { .header_right_warp {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -749,9 +902,9 @@ export default {
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
height: auto; height: auto;
background: linear-gradient(344deg, #FFFFFF 0%, #EDE3FF 100%); background: linear-gradient(344deg, #ffffff 0%, #ede3ff 100%);
border-radius: 28rpx; border-radius: 28rpx;
border: 1rpx solid #DFDFDF; border: 1rpx solid #dfdfdf;
padding: 24rpx 20rpx 20rpx; padding: 24rpx 20rpx 20rpx;
margin: 20rpx auto 0; margin: 20rpx auto 0;
} }
@@ -1022,9 +1175,9 @@ export default {
border-radius: 16rpx; border-radius: 16rpx;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
background: linear-gradient(344deg, #FFFFFF 0%, #EDE3FF 100%); background: linear-gradient(344deg, #ffffff 0%, #ede3ff 100%);
border-radius: 12rpx; border-radius: 12rpx;
border: 1rpx solid #DFDFDF; border: 1rpx solid #dfdfdf;
} }
.min_card_item_content { .min_card_item_content {
@@ -1106,7 +1259,8 @@ export default {
.uni-banner-news { .uni-banner-news {
width: 540rpx; width: 540rpx;
margin: 0 auto; 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%; background-size: 100% 100%;
.close_btn { .close_btn {