Browse Source

empty 样式处理

master
xuhuajiao 1 month ago
parent
commit
a421fb717a
  1. 4
      pages.json
  2. 15
      pages/home/home.vue
  3. 7
      pages/lendCar/lendCar.vue
  4. 12
      pages/search/search.vue
  5. 1
      styles/global.scss
  6. 10
      subpkg/pages/activity-list/activity-list.vue
  7. 3
      subpkg/pages/collect-list/collect-list.vue
  8. 10
      subpkg/pages/feedback-list/feedback-list.vue
  9. 14
      subpkg/pages/ranking/ranking.vue
  10. 6
      subpkg/pages/reader-card/reader-card.vue

4
pages.json

@ -3,7 +3,7 @@
{ {
"path": "pages/home/home", "path": "pages/home/home",
"style": { "style": {
"navigationBarTitleText": "图书馆"
"navigationBarTitleText": "葛店经济技术开发区图书馆"
} }
}, },
{ {
@ -21,7 +21,7 @@
{ {
"path": "pages/login/login", "path": "pages/login/login",
"style": { "style": {
"navigationBarTitleText": "登录"
"navigationBarTitleText": "绑定读者证"
} }
}, },
{ {

15
pages/home/home.vue

@ -114,7 +114,7 @@
:circular="false" :circular="false"
> >
<swiper-item v-for="item in readerCardList" :key="item.id"> <swiper-item v-for="item in readerCardList" :key="item.id">
<view class="card-item" @click.stop="showQrcode(item.bindValue)">
<view class="card-item" :class="{'active': item.bindDefault}" @click.stop="showQrcode(item.bindValue)">
<image class="card-left-img" src="@/static/images/card-img2.png" mode="widthFix" /> <image class="card-left-img" src="@/static/images/card-img2.png" mode="widthFix" />
<view class="card-right-info"> <view class="card-right-info">
<text class="info-title">读者证号</text> <text class="info-title">读者证号</text>
@ -179,7 +179,7 @@
<view class="book-title">{{item.name}}</view> <view class="book-title">{{item.name}}</view>
</view> </view>
</view> </view>
<view class="empty-box" v-if="recommendedBooks.length === 0 && !isLoading">
<view class="empty" v-if="recommendedBooks.length === 0 && !isLoading">
<uni-icons custom-prefix="iconfont" type="icon-kongshuju" size="80"></uni-icons> <uni-icons custom-prefix="iconfont" type="icon-kongshuju" size="80"></uni-icons>
<text style="margin-top: 20px;">暂无推荐书籍~</text> <text style="margin-top: 20px;">暂无推荐书籍~</text>
</view> </view>
@ -721,15 +721,4 @@ swiper.menu-swiper{
color: #999 !important; color: #999 !important;
} }
} }
/* 空状态 */
.empty-box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #999;
font-size: 15px;
padding: 20px;
}
</style> </style>

7
pages/lendCar/lendCar.vue

@ -38,7 +38,7 @@
<!-- 空状态 --> <!-- 空状态 -->
<view class="empty" v-if="bookList.length === 0"> <view class="empty" v-if="bookList.length === 0">
<uni-icons custom-prefix="iconfont" type="icon-kongshuju" size="80" color="#ccc"></uni-icons>
<uni-icons style="margin-left: 20px;" custom-prefix="iconfont" type="icon-kongshuju" size="80" color="#ccc"></uni-icons>
<text class="empty-text">暂无借阅图书</text> <text class="empty-text">暂无借阅图书</text>
</view> </view>
</view> </view>
@ -434,17 +434,12 @@ export default {
/* 空状态 */ /* 空状态 */
.empty { .empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: calc(100vh - 140px); height: calc(100vh - 140px);
} }
.empty-text { .empty-text {
margin-top: 20px; margin-top: 20px;
font-size: 14px; font-size: 14px;
color: #999;
} }
/* 底部占位 */ /* 底部占位 */

12
pages/search/search.vue

@ -68,8 +68,9 @@
</view> </view>
<!-- 空状态 --> <!-- 空状态 -->
<view class="empty-box" v-if="isSearched && listData.length === 0">
<text>没有检索到相关数据</text>
<view class="empty" v-if="isSearched && listData.length === 0">
<uni-icons style="margin-left: 20px;" custom-prefix="iconfont" type="icon-kongshuju" size="80" color="#ccc"></uni-icons>
<text style="margin-top: 20px;">没有检索到相关数据</text>
</view> </view>
</view> </view>
</template> </template>
@ -321,13 +322,8 @@ export default {
font-weight: 400; font-weight: 400;
} }
.empty-box {
display: flex;
justify-content: center;
align-items: center;
.empty {
height: 50vh; height: 50vh;
font-size: 14px;
color: #999;
padding-top: 100px; padding-top: 100px;
} }
</style> </style>

1
styles/global.scss

@ -243,6 +243,7 @@
align-items: center; align-items: center;
padding: 20px; padding: 20px;
color: #999; color: #999;
font-size: 15px;
} }
// 覆盖 uni-popup 层级 // 覆盖 uni-popup 层级

10
subpkg/pages/activity-list/activity-list.vue

@ -45,7 +45,7 @@
</view> </view>
</view> </view>
<view class="empty-box" v-if="displayList.length === 0">
<view class="empty" v-if="displayList.length === 0">
<uni-icons custom-prefix="iconfont" type="icon-kongshuju" size="80"></uni-icons> <uni-icons custom-prefix="iconfont" type="icon-kongshuju" size="80"></uni-icons>
<text style="margin-top: 20px;">暂无{{ currentTab === 0 ? '进行中的活动' : '往期活动' }}~</text> <text style="margin-top: 20px;">暂无{{ currentTab === 0 ? '进行中的活动' : '往期活动' }}~</text>
</view> </view>
@ -304,14 +304,8 @@ scroll-view {
height: calc(100vh - 120px); height: calc(100vh - 120px);
} }
.empty-box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.empty {
height: calc(100vh - 200px); height: calc(100vh - 200px);
color: #999;
font-size: 15px;
} }
.activity-item { .activity-item {

3
subpkg/pages/collect-list/collect-list.vue

@ -95,10 +95,7 @@ export default {
} }
.empty { .empty {
text-align: center;
padding: 60px 0; padding: 60px 0;
color: #999;
font-size: 14px;
} }
.no-more { .no-more {
text-align: center; text-align: center;

10
subpkg/pages/feedback-list/feedback-list.vue

@ -1,7 +1,7 @@
<template> <template>
<view class="feedback-page"> <view class="feedback-page">
<view class="feedback-list"> <view class="feedback-list">
<view class="empty-box" v-if="feedbackList.length === 0">
<view class="empty" v-if="feedbackList.length === 0">
<uni-icons style="margin-left: 20px;" custom-prefix="iconfont" type="icon-kongshuju" size="80" color="#ccc"></uni-icons> <uni-icons style="margin-left: 20px;" custom-prefix="iconfont" type="icon-kongshuju" size="80" color="#ccc"></uni-icons>
<text style="margin-top: 20px;">暂无留言</text> <text style="margin-top: 20px;">暂无留言</text>
</view> </view>
@ -79,14 +79,8 @@ export default {
padding: 10px; padding: 10px;
} }
.empty-box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.empty {
height: calc(100vh - 200px); height: calc(100vh - 200px);
color: #999;
font-size: 15px;
} }
.feedback-item { .feedback-item {

14
subpkg/pages/ranking/ranking.vue

@ -17,9 +17,9 @@
<view class="ranking-list"> <view class="ranking-list">
<!-- 空状态 --> <!-- 空状态 -->
<view class="empty-box" v-if="rankingData.length === 0">
<uni-icons type="cube" size="70" color="#ccc"></uni-icons>
<text>暂无读者排行数据</text>
<view class="empty" v-if="rankingData.length === 0">
<uni-icons style="margin-left: 20px;" custom-prefix="iconfont" type="icon-kongshuju" size="80" color="#ccc"></uni-icons>
<text style="margin-top: 20px;">暂无读者排行数据</text>
</view> </view>
<view <view
@ -195,14 +195,8 @@ export default {
} }
/* 空状态 */ /* 空状态 */
.empty-box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.empty {
height: 50vh; height: 50vh;
color: #999;
font-size: 15px;
} }
.ranking-item{ .ranking-item{

6
subpkg/pages/reader-card/reader-card.vue

@ -12,7 +12,7 @@
v-for="(item, index) in cardList" v-for="(item, index) in cardList"
:key="item.id" :key="item.id"
@click="handleSelectItem(item.bindValue)" @click="handleSelectItem(item.bindValue)"
:class="{ active: selectedValue === item.bindValue }"
:class="{ active: selectedValue === item.bindValue || (!isEditMode && item.bindDefault) }"
> >
<image class="card-left-img" src="@/static/images/card-img2.png" mode="widthFix" /> <image class="card-left-img" src="@/static/images/card-img2.png" mode="widthFix" />
<view class="card-right-info"> <view class="card-right-info">
@ -365,11 +365,11 @@ export default {
.card-setting{ .card-setting{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center;
align-items: flex-end;
justify-content: center; justify-content: center;
button{ button{
padding: 0 8px !important; padding: 0 8px !important;
margin-bottom: 6px;
margin-bottom: 16px;
font-size: 12px; font-size: 12px;
} }
::v-deep .icon-erweima{ ::v-deep .icon-erweima{

Loading…
Cancel
Save