feat(specialArea): 样式改版
This commit is contained in:
woody
parent
30c32c3d6f
commit
03af5fd69a
|
|
@ -232,7 +232,6 @@ export default {
|
|||
},
|
||||
mounted() {
|
||||
this.newShareMember = uni.getStorageSync('User')?.loginType !== 0
|
||||
console.log(this.newShareMember, '...this.newShareMember')
|
||||
this.setSpecial({
|
||||
value: this.specialArea,
|
||||
})
|
||||
|
|
@ -245,7 +244,6 @@ export default {
|
|||
this.setSmallCarLength(0)
|
||||
},
|
||||
beforeDestroy() {
|
||||
console.log('beforeDestroy........?')
|
||||
this.setSmallCarLength(0)
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -326,7 +324,7 @@ export default {
|
|||
// })
|
||||
this.oneList = res.data
|
||||
this.oneId = this.oneList[0] ? this.oneList[0].pkId : ''
|
||||
this.getClassIfyTwo(this.oneList[0].pkId)
|
||||
// this.getClassIfyTwo(this.oneList[0].pkId)
|
||||
this.getAllGoods(this.oneList[0].pkId)
|
||||
})
|
||||
},
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ module.exports = vm => {
|
|||
|
||||
//#ifdef DEV_SERVER
|
||||
console.log('DEV_SERVER')
|
||||
config.baseURL = 'http://192.168.2.102:8080'
|
||||
config.baseURL = 'https://t-app.beida666.com/prod-api'
|
||||
//#endif
|
||||
|
||||
//#ifdef QA_SERVER
|
||||
|
|
|
|||
|
|
@ -232,6 +232,14 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/specialArea/drawer-list",
|
||||
"style": {
|
||||
"app-plus": {
|
||||
"titleNView": false
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/specialArea/haIndex",
|
||||
"style": {
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -4,14 +4,56 @@
|
|||
<view class="index_header">
|
||||
<view>{{ titLabel }}</view>
|
||||
</view>
|
||||
<!-- 分类抽屉按钮 -->
|
||||
<view class="category-drawer-btn" @click="openCategoryDrawer">
|
||||
<u-icon name="list" size="20" color="#005BAC"></u-icon>
|
||||
<text>分类</text>
|
||||
<view class="shareImg" v-if="specialArea == 7" @click="goShare">
|
||||
<u-icon name="share-square" size="24" color="#005BAC"> </u-icon>
|
||||
</view>
|
||||
|
||||
<u-scroll-list
|
||||
:indicator="false"
|
||||
v-if="itemChildren.length > 1"
|
||||
class="tabList_a"
|
||||
>
|
||||
<view class="tab">
|
||||
<view
|
||||
v-for="(item, index) in itemChildren"
|
||||
:key="index"
|
||||
@click="setSpecial(item)"
|
||||
v-show="item.isShow"
|
||||
:class="[specialArea == item.value ? 'actTab' : 'tab_i']"
|
||||
>
|
||||
<view>{{ item.label }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-scroll-list>
|
||||
<view class="index_btm">
|
||||
<view class="index_r full-width">
|
||||
<!-- sangelxiu1 会员专区 隐藏分类-->
|
||||
<view class="index_l" v-if="!newShareMember">
|
||||
<view
|
||||
v-for="item in oneList"
|
||||
:class="['classIfy', oneId == item.pkId ? 'actOne' : '']"
|
||||
@click="
|
||||
((oneId = item.pkId),
|
||||
getAllGoods(item.pkId),
|
||||
getClassIfyTwo(item.pkId))
|
||||
"
|
||||
:key="item.pkId"
|
||||
>{{ item.classifyName }}</view
|
||||
>
|
||||
</view>
|
||||
<view :class="newShareMember ? 'index_r_2' : 'index_r'">
|
||||
<u-scroll-list :indicator="false" class="tabList">
|
||||
<view class="tab">
|
||||
<view
|
||||
v-for="(item, index) in twoList"
|
||||
:key="index"
|
||||
@click="((twoId = item.pkId), getAllGoods1(item.pkId))"
|
||||
:class="[twoId == item.pkId ? 'actTab' : 'tab_i']"
|
||||
>
|
||||
<view>{{ item.classifyName }}</view>
|
||||
<!-- <view :class="[twoId == item.pkId ? 'heng' : 'heng1']"></view> -->
|
||||
</view>
|
||||
</view>
|
||||
</u-scroll-list>
|
||||
<view class="search">
|
||||
<u--input
|
||||
placeholder="请输入商品名称"
|
||||
|
|
@ -25,41 +67,11 @@
|
|||
></u--input>
|
||||
</view>
|
||||
<view class="goodList">
|
||||
<!-- 空状态提示 -->
|
||||
<view v-if="goodList.length === 0" class="empty-state">
|
||||
<view class="empty-icon">
|
||||
<u-icon :name="getEmptyIcon()" size="80" color="#d0d0d0"></u-icon>
|
||||
</view>
|
||||
<view class="empty-title">{{ getEmptyTitle() }}</view>
|
||||
<view class="empty-desc">{{ getEmptyDesc() }}</view>
|
||||
<view class="empty-tips">
|
||||
<text v-for="(tip, index) in getEmptyTips()" :key="index">
|
||||
• {{ tip }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="empty-actions">
|
||||
<view class="empty-action primary" @click="openCategoryDrawer">
|
||||
<u-icon name="list" size="16" color="#ffffff"></u-icon>
|
||||
<text>浏览分类</text>
|
||||
</view>
|
||||
<view
|
||||
class="empty-action secondary"
|
||||
@click="clearSearch"
|
||||
v-if="waresName"
|
||||
>
|
||||
<u-icon name="close-circle" size="16" color="#005bac"></u-icon>
|
||||
<text>清除搜索</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 商品列表 -->
|
||||
<view
|
||||
v-for="item in goodList"
|
||||
:key="item.waresCode"
|
||||
class="goodList_i"
|
||||
@tap="goDetails(item)"
|
||||
v-else
|
||||
>
|
||||
<view style="display: flex; flex: 1">
|
||||
<view
|
||||
|
|
@ -214,75 +226,6 @@
|
|||
:carLength="shopCarLength"
|
||||
:specialArea="specialArea"
|
||||
></cartBall>
|
||||
|
||||
<!-- 分类抽屉遮罩 -->
|
||||
<view
|
||||
class="drawer-mask"
|
||||
:class="{ show: showCategoryDrawer }"
|
||||
@click="closeCategoryDrawer"
|
||||
v-if="showCategoryDrawer"
|
||||
></view>
|
||||
|
||||
<!-- 分类抽屉 -->
|
||||
<view class="category-drawer" :class="{ show: showCategoryDrawer }">
|
||||
<view class="drawer-header">
|
||||
<text class="drawer-title">商品分类</text>
|
||||
<u-icon
|
||||
name="close"
|
||||
size="20"
|
||||
color="#666"
|
||||
@click="closeCategoryDrawer"
|
||||
></u-icon>
|
||||
</view>
|
||||
|
||||
<view class="drawer-content">
|
||||
<view
|
||||
v-for="item in oneList"
|
||||
:key="item.pkId"
|
||||
class="drawer-menu-group"
|
||||
>
|
||||
<!-- 一级分类 -->
|
||||
<view
|
||||
class="drawer-first-level"
|
||||
:class="{ active: oneId == item.pkId }"
|
||||
>
|
||||
<view class="drawer-menu-text" @click="selectFirstLevel(item)">{{
|
||||
truncateText(item.classifyName, 12)
|
||||
}}</view>
|
||||
<!-- <view
|
||||
v-if="item.children && item.children.length > 0"
|
||||
class="drawer-expand-icon"
|
||||
:class="{ expanded: expandedMenus.includes(item.pkId) }"
|
||||
@click="toggleExpand(item.pkId)"
|
||||
>
|
||||
<u-icon
|
||||
name="arrow-right"
|
||||
size="16"
|
||||
:color="oneId == item.pkId ? '#fff' : '#666'"
|
||||
></u-icon>
|
||||
</view> -->
|
||||
</view>
|
||||
|
||||
<view
|
||||
class="drawer-second-level-container"
|
||||
:class="{ expanded: expandedMenus.includes(item.pkId) }"
|
||||
v-if="item.children && item.children.length > 0"
|
||||
>
|
||||
<view
|
||||
v-for="subItem in item.children"
|
||||
:key="subItem.pkId"
|
||||
class="drawer-second-level"
|
||||
:class="{ active: twoId == subItem.pkId }"
|
||||
@click="selectSecondLevel(subItem)"
|
||||
>
|
||||
<view class="drawer-sub-menu-text">{{
|
||||
truncateText(subItem.classifyName, 12)
|
||||
}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
@ -336,8 +279,6 @@ export default {
|
|||
countryList: [],
|
||||
isCountry: false,
|
||||
waresName: '',
|
||||
expandedMenus: [], // 存储展开的一级菜单ID
|
||||
showCategoryDrawer: false, // 控制分类抽屉显示
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
|
|
@ -407,8 +348,6 @@ export default {
|
|||
},
|
||||
onShow() {
|
||||
this.newShareMember = uni.getStorageSync('User')?.loginType !== 0
|
||||
// 确保抽屉是关闭的
|
||||
this.showCategoryDrawer = false
|
||||
let that = this
|
||||
uni.$on('returnData', function (data) {
|
||||
that.specialArea = data.value
|
||||
|
|
@ -417,7 +356,7 @@ export default {
|
|||
})
|
||||
})
|
||||
// 获取国家
|
||||
// this.getJScountry()
|
||||
this.getJScountry()
|
||||
this.$nextTick(() => {
|
||||
this.$refs.cart.getCar()
|
||||
})
|
||||
|
|
@ -427,138 +366,11 @@ export default {
|
|||
this.setSmallCarLength(0)
|
||||
},
|
||||
beforeDestroy() {
|
||||
console.log('beforeDestroy........?')
|
||||
this.setSmallCarLength(0)
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['setSmallCarLength', 'setShopCarLength']),
|
||||
getAllCategory() {
|
||||
api
|
||||
.getAllCategory({
|
||||
specialArea: this.specialArea,
|
||||
pkCountry: this.pkCountry,
|
||||
})
|
||||
.then(res => {
|
||||
if (res.code === 200) {
|
||||
const tempList = res.data || []
|
||||
this.oneList = tempList.map(item => {
|
||||
const children = item.children
|
||||
if (children && children.length > 0) {
|
||||
item.children = [
|
||||
{ classifyName: '全部', pkId: item.pkId },
|
||||
...children,
|
||||
]
|
||||
}
|
||||
return {
|
||||
...item,
|
||||
}
|
||||
})
|
||||
|
||||
// 默认全部展开
|
||||
this.expandedMenus = this.oneList.map(item => item.pkId)
|
||||
|
||||
// 选择第一个分类
|
||||
if (this.oneList[0]) {
|
||||
this.oneId = this.oneList[0].pkId
|
||||
this.twoId = this.oneList[0].pkId
|
||||
this.getAllGoods(this.oneList[0].pkId)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
truncateText(text, maxLength) {
|
||||
if (!text) return ''
|
||||
if (text.length <= maxLength) return text
|
||||
return text.substring(0, maxLength) + '...'
|
||||
},
|
||||
// 选择一级分类（不影响展开状态）
|
||||
selectFirstLevel(item) {
|
||||
this.oneId = item.pkId
|
||||
this.twoId = item.pkId
|
||||
this.getAllGoods(item.pkId)
|
||||
},
|
||||
// 切换展开状态（不影响选择状态）
|
||||
toggleExpand(pkId) {
|
||||
const index = this.expandedMenus.indexOf(pkId)
|
||||
if (index === -1) {
|
||||
this.expandedMenus.push(pkId)
|
||||
} else {
|
||||
this.expandedMenus.splice(index, 1)
|
||||
}
|
||||
},
|
||||
// 保留原方法以兼容其他地方的调用
|
||||
toggleFirstLevel(item) {
|
||||
this.selectFirstLevel(item)
|
||||
},
|
||||
// 选择二级分类
|
||||
selectSecondLevel(item) {
|
||||
this.twoId = item.pkId
|
||||
this.getAllGoods1(item.pkId)
|
||||
// 不自动关闭抽屉，让用户手动关闭
|
||||
},
|
||||
// 打开分类抽屉
|
||||
openCategoryDrawer() {
|
||||
this.showCategoryDrawer = true
|
||||
},
|
||||
// 关闭分类抽屉
|
||||
closeCategoryDrawer() {
|
||||
this.showCategoryDrawer = false
|
||||
},
|
||||
// 获取空状态图标
|
||||
getEmptyIcon() {
|
||||
if (this.waresName) {
|
||||
return 'search'
|
||||
}
|
||||
return 'shopping-cart'
|
||||
},
|
||||
// 获取空状态标题
|
||||
getEmptyTitle() {
|
||||
if (this.waresName) {
|
||||
return '未找到相关商品'
|
||||
}
|
||||
return '暂无商品'
|
||||
},
|
||||
// 获取空状态描述
|
||||
getEmptyDesc() {
|
||||
if (this.waresName) {
|
||||
return `没有找到包含"${this.waresName}"的商品`
|
||||
}
|
||||
|
||||
// 如果二级分类ID不等于一级分类ID，说明选择了具体的二级分类
|
||||
if (this.twoId !== this.oneId) {
|
||||
const currentCategory = this.oneList.find(
|
||||
item => item.pkId === this.oneId
|
||||
)
|
||||
if (currentCategory && currentCategory.children) {
|
||||
const subCategory = currentCategory.children.find(
|
||||
sub => sub.pkId === this.twoId
|
||||
)
|
||||
if (subCategory) {
|
||||
return `"${subCategory.classifyName}"分类下还没有商品哦`
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 显示一级分类名称
|
||||
const currentCategory = this.oneList.find(
|
||||
item => item.pkId === this.oneId
|
||||
)
|
||||
if (currentCategory) {
|
||||
return `"${currentCategory.classifyName}"分类下还没有商品哦`
|
||||
}
|
||||
return '当前分类下还没有商品哦'
|
||||
},
|
||||
// 获取空状态提示
|
||||
getEmptyTips() {
|
||||
if (this.waresName) {
|
||||
return ['检查搜索词是否正确', '浏览其他分类商品']
|
||||
}
|
||||
return ['试试其他分类', '商品正在陆续上架中']
|
||||
},
|
||||
// 清除搜索
|
||||
clearSearch() {
|
||||
this.waresName = ''
|
||||
this.getAllGoods1()
|
||||
},
|
||||
changeCountry() {
|
||||
this.isCountry = true
|
||||
},
|
||||
|
|
@ -597,8 +409,18 @@ export default {
|
|||
})
|
||||
},
|
||||
setSpecial(item) {
|
||||
this.specialArea = item.value
|
||||
this.getAllCategory()
|
||||
if (item.value == 21) {
|
||||
// uni.navigateTo({
|
||||
// url:
|
||||
// '/pages/specialArea/haIndex?label=' +
|
||||
// this.titLabel +
|
||||
// '&specialArea=21&children=' +
|
||||
// JSON.stringify(this.itemChildren),
|
||||
// })
|
||||
} else {
|
||||
this.specialArea = item.value
|
||||
this.getClassIfy()
|
||||
}
|
||||
},
|
||||
addCar(item) {
|
||||
let carList = {
|
||||
|
|
@ -652,10 +474,6 @@ export default {
|
|||
// })
|
||||
this.oneList = res.data
|
||||
this.oneId = this.oneList[0] ? this.oneList[0].pkId : ''
|
||||
|
||||
// 默认全部展开
|
||||
this.expandedMenus = this.oneList.map(item => item.pkId)
|
||||
|
||||
this.getClassIfyTwo(this.oneList[0].pkId)
|
||||
this.getAllGoods(this.oneList[0].pkId)
|
||||
})
|
||||
|
|
@ -795,222 +613,38 @@ export default {
|
|||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
/* 分类抽屉按钮 */
|
||||
.category-drawer-btn {
|
||||
position: fixed;
|
||||
top: 10rpx;
|
||||
right: 20rpx;
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16rpx 20rpx;
|
||||
|
||||
font-size: 24rpx;
|
||||
color: #005bac;
|
||||
font-weight: 500;
|
||||
|
||||
text {
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
background: rgba(240, 247, 255, 0.95);
|
||||
}
|
||||
}
|
||||
|
||||
.index_btm {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex: 1; // display: flex;
|
||||
|
||||
.index_r {
|
||||
flex: 1;
|
||||
background: #fff;
|
||||
.index_l {
|
||||
width: 198rpx;
|
||||
padding: 10rpx 0;
|
||||
font-size: 11px;
|
||||
font-family:
|
||||
PingFang SC-Regular,
|
||||
PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&.full-width {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 分类抽屉遮罩 */
|
||||
.drawer-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 1000;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
|
||||
&.show {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* 分类抽屉样式 */
|
||||
.category-drawer {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 600rpx;
|
||||
height: 100vh;
|
||||
background: #f8f9fa;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: 1001;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
|
||||
&.show {
|
||||
transform: translateX(0);
|
||||
position: absolute;
|
||||
height: 86vh;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
.drawer-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 40rpx 30rpx 30rpx;
|
||||
background: #ffffff;
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
|
||||
.drawer-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
}
|
||||
.index_r {
|
||||
// flex: 1;
|
||||
background: #fff;
|
||||
margin-left: 198rpx; // padding: 20rpx;
|
||||
// display: flex;
|
||||
}
|
||||
|
||||
.drawer-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 20rpx 0;
|
||||
|
||||
/* 抽屉滚动条 */
|
||||
&::-webkit-scrollbar {
|
||||
width: 4rpx;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 2rpx;
|
||||
}
|
||||
|
||||
.drawer-menu-group {
|
||||
margin-bottom: 8rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 12rpx;
|
||||
margin: 0 20rpx 12rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
|
||||
|
||||
.drawer-first-level {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
|
||||
&.active {
|
||||
background: linear-gradient(135deg, #005bac 0%, #0066cc 100%);
|
||||
color: #ffffff;
|
||||
|
||||
.drawer-expand-icon {
|
||||
.u-icon {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.drawer-menu-text {
|
||||
flex: 1;
|
||||
font-size: 30rpx;
|
||||
line-height: 1.3;
|
||||
padding: 32rpx 24rpx;
|
||||
cursor: pointer;
|
||||
|
||||
&:active {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
.drawer-expand-icon {
|
||||
transition: transform 0.3s ease;
|
||||
padding: 32rpx 24rpx 32rpx 8rpx;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:active {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
&.expanded {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.drawer-second-level-container {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.4s ease;
|
||||
background: #f8f9fa;
|
||||
|
||||
&.expanded {
|
||||
max-height: 1000rpx;
|
||||
}
|
||||
|
||||
.drawer-second-level {
|
||||
padding: 24rpx 48rpx;
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
border-top: 1px solid #e9ecef;
|
||||
transition: all 0.2s ease;
|
||||
position: relative;
|
||||
|
||||
&:active {
|
||||
background: #e9ecef;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: linear-gradient(135deg, #005bac 0%, #0066cc 100%);
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 24rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 8rpx;
|
||||
height: 8rpx;
|
||||
background: #005bac;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.drawer-sub-menu-text {
|
||||
font-size: 28rpx;
|
||||
line-height: 1.3;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.index_r_2 {
|
||||
// flex: 1;
|
||||
background: #fff;
|
||||
margin-left: 20rpx; // padding: 20rpx;
|
||||
// display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1122,95 +756,6 @@ export default {
|
|||
height: calc(100vh - 320rpx);
|
||||
overflow-y: auto;
|
||||
|
||||
/* 空状态样式 */
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
min-height: 500rpx;
|
||||
padding: 80rpx 40rpx;
|
||||
|
||||
.empty-icon {
|
||||
margin-bottom: 40rpx;
|
||||
opacity: 0.6;
|
||||
animation: float 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.empty-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.empty-desc {
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
margin-bottom: 40rpx;
|
||||
text-align: center;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.empty-tips {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 50rpx;
|
||||
|
||||
text {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
margin-bottom: 8rpx;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-actions {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.empty-action {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx 32rpx;
|
||||
border-radius: 50rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
text {
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
|
||||
&.primary {
|
||||
background: linear-gradient(135deg, #005bac 0%, #0066cc 100%);
|
||||
color: #ffffff;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 91, 172, 0.3);
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 91, 172, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
background: rgba(0, 91, 172, 0.1);
|
||||
color: #005bac;
|
||||
border: 2rpx solid rgba(0, 91, 172, 0.2);
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
background: rgba(0, 91, 172, 0.15);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goodList_i {
|
||||
// display: flex;
|
||||
border-bottom: 1px solid #eee;
|
||||
|
|
@ -1569,15 +1114,4 @@ export default {
|
|||
left: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 空状态浮动动画 */
|
||||
@keyframes float {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-10rpx);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue