|
|
@@ -0,0 +1,716 @@
|
|
|
+<template>
|
|
|
+ <view class="page-container">
|
|
|
+ <view class="shop-list" v-if="!$util.isEmpty(list.data)">
|
|
|
+ <view
|
|
|
+ class="shop-card"
|
|
|
+ v-for="(item, index) in list.data"
|
|
|
+ :key="item.id"
|
|
|
+ >
|
|
|
+
|
|
|
+ <view class="shop-header">
|
|
|
+ <view class="shop-avatar">
|
|
|
+ <image class="shop-logo" :src="item.smallAvatar" mode="aspectFill" />
|
|
|
+ </view>
|
|
|
+ <view class="shop-info">
|
|
|
+ <text class="shop-name">{{ item.name }}</text>
|
|
|
+ <text class="shop-address"
|
|
|
+ >{{ item.dist }}{{ item.address }}{{ item.floor }}</text
|
|
|
+ >
|
|
|
+ </view>
|
|
|
+ <view class="shop-action">
|
|
|
+ <view class="recover-btn" @click.stop="recoverHd(item)">
|
|
|
+ <text>恢复</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view v-else class="empty-state">
|
|
|
+ <text class="empty-title">暂无记录</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import AppSwiper from "@/components/app-swiper";
|
|
|
+import TuiListCell from "@/components/plugin/list-cell";
|
|
|
+import TuiListView from "@/components/plugin/list-view";
|
|
|
+import AppActivilyCoupon from "@/components/module/app-activily-coupon";
|
|
|
+import { getList, recover } from "@/api/hd";
|
|
|
+import { share } from "@/mixins";
|
|
|
+import AppAvatarModule from "@/components/module/app-avatar";
|
|
|
+import { mapGetters } from "vuex";
|
|
|
+import { list } from "@/mixins";
|
|
|
+export default {
|
|
|
+ name: "hasDel",
|
|
|
+ components: {
|
|
|
+ AppAvatarModule,
|
|
|
+ AppSwiper,
|
|
|
+ TuiListView,
|
|
|
+ TuiListCell,
|
|
|
+ AppActivilyCoupon,
|
|
|
+ },
|
|
|
+ mixins: [share, list],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ pageAction: { refresh: 0 }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ if (this.pageAction.refresh == 1) {
|
|
|
+ this.resetList();
|
|
|
+ this.init();
|
|
|
+ this.pageAction.refresh = 0;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onPullDownRefresh() {
|
|
|
+ this.resetList();
|
|
|
+ // 重新获取数据
|
|
|
+ this.getMyHdList()
|
|
|
+ .then(() => {
|
|
|
+ uni.stopPullDownRefresh();
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ uni.stopPullDownRefresh();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ onReachBottom() {
|
|
|
+ // 滚动到底部加载更多
|
|
|
+ this.toBottom();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ toBottom() {
|
|
|
+ if (!this.list.finished) {
|
|
|
+ this.getMyHdList().then((res) => {
|
|
|
+ uni.stopPullDownRefresh();
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ uni.stopPullDownRefresh();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ init() {
|
|
|
+ this.getMyHdList()
|
|
|
+ },
|
|
|
+ getMyHdList() {
|
|
|
+ return getList({ delStatus:1,page: this.list.page }).then((res) => {
|
|
|
+ this.completes(res);
|
|
|
+ if (this.$util.isEmpty(res.data)) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ recoverHd(item) {
|
|
|
+ this.$util.confirmModal({ content: "确认恢复？" }, () => {
|
|
|
+ recover({ id: item.id }).then((res) => {
|
|
|
+ if (res.code == 1) {
|
|
|
+ this.$msg("已恢复");
|
|
|
+ this.resetList();
|
|
|
+ this.getMyHdList();
|
|
|
+
|
|
|
+ // 通知上一页(recent.vue)刷新
|
|
|
+ let pages = getCurrentPages();
|
|
|
+ if (pages.length > 1) {
|
|
|
+ let prePage = pages[pages.length - 2];
|
|
|
+ if (prePage.$vm) {
|
|
|
+ prePage.$vm.pageAction.refresh = 1;
|
|
|
+ } else {
|
|
|
+ prePage.pageAction.refresh = 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+page {
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+.login-container {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ min-height: 70vh;
|
|
|
+ padding: 0upx 40upx 40upx 40upx;
|
|
|
+
|
|
|
+ .login-content {
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ .login-title {
|
|
|
+ display: block;
|
|
|
+ font-size: 48upx;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 16upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-subtitle {
|
|
|
+ display: block;
|
|
|
+ font-size: 34upx;
|
|
|
+ color: #666;
|
|
|
+ margin-top: 50upx;
|
|
|
+ margin-bottom: 60upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-btn {
|
|
|
+ background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
|
|
|
+ color: white;
|
|
|
+ border: none;
|
|
|
+ border-radius: 50upx;
|
|
|
+ padding: 24upx 60upx;
|
|
|
+ font-size: 32upx;
|
|
|
+ font-weight: 500;
|
|
|
+ box-shadow: 0 8upx 20upx rgba(255, 107, 107, 0.3);
|
|
|
+
|
|
|
+ &:active {
|
|
|
+ box-shadow: 0 4upx 12upx rgba(255, 107, 107, 0.4);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 主要内容区域
|
|
|
+.main-content {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+// 个人中心版块
|
|
|
+.profile-section {
|
|
|
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
+ padding: 35upx 30upx;
|
|
|
+ margin-bottom: 20upx;
|
|
|
+ box-shadow: 0 4upx 20upx rgba(102, 126, 234, 0.15);
|
|
|
+
|
|
|
+ .profile-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ margin-bottom: 35upx;
|
|
|
+ padding: 0 10upx;
|
|
|
+ border-radius: 10upx;
|
|
|
+
|
|
|
+ .avatar-container {
|
|
|
+ margin-right: 30upx;
|
|
|
+ flex-shrink: 0;
|
|
|
+
|
|
|
+ .avatar-button {
|
|
|
+ background: none !important;
|
|
|
+ border: none !important;
|
|
|
+ padding: 0 !important;
|
|
|
+ margin: 0 !important;
|
|
|
+ line-height: 1;
|
|
|
+ display: block;
|
|
|
+ color: transparent !important;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ border: none !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* &:active {
|
|
|
+ background: none !important;
|
|
|
+ } */
|
|
|
+
|
|
|
+ &:focus {
|
|
|
+ background: none !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .avatar {
|
|
|
+ width: 110upx;
|
|
|
+ height: 110upx;
|
|
|
+ border-radius: 55upx;
|
|
|
+ border: 3upx solid rgba(255, 255, 255, 0.3);
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ box-shadow: 0 4upx 12upx rgba(0, 0, 0, 0.1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-info {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .username {
|
|
|
+ display: block;
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 45upx;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 8upx;
|
|
|
+ text-shadow: 0 2upx 4upx rgba(0, 0, 0, 0.1);
|
|
|
+ line-height: 1.2;
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-id {
|
|
|
+ display: block;
|
|
|
+ color: rgba(255, 255, 255, 0.8);
|
|
|
+ font-size: 28upx;
|
|
|
+ line-height: 1.2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .arrow-container {
|
|
|
+ margin-left: 20upx;
|
|
|
+ flex-shrink: 0;
|
|
|
+
|
|
|
+ .arrow-icon {
|
|
|
+ color: rgba(255, 255, 255, 0.7);
|
|
|
+ font-size: 28upx;
|
|
|
+ font-weight: 300;
|
|
|
+ text-shadow: 0 1upx 2upx rgba(0, 0, 0, 0.1);
|
|
|
+ transition: all 0.2s ease;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* &:active .arrow-icon {
|
|
|
+ color: #ffffff;
|
|
|
+ } */
|
|
|
+ }
|
|
|
+
|
|
|
+ .function-grid {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 10upx;
|
|
|
+
|
|
|
+ > * {
|
|
|
+ margin-right: 15upx;
|
|
|
+ flex: 1 1 auto;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .function-item-wrapper {
|
|
|
+ position: relative;
|
|
|
+ // 这里的 flex: 1 1 auto 已经由 > * 继承
|
|
|
+
|
|
|
+ > .function-item {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .message-badge {
|
|
|
+ position: absolute;
|
|
|
+ top: -15upx;
|
|
|
+ right: -15upx;
|
|
|
+ width: 42upx;
|
|
|
+ height: 42upx;
|
|
|
+ background: #ff4757;
|
|
|
+ border-radius: 21upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 22upx;
|
|
|
+ font-weight: bold;
|
|
|
+ box-shadow: 0 4upx 12upx rgba(255, 56, 56, 0.6);
|
|
|
+ z-index: 10;
|
|
|
+ text-shadow: 0 1upx 2upx rgba(0, 0, 0, 0.3);
|
|
|
+ line-height: 1;
|
|
|
+ min-width: 42upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .function-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ height: 70upx;
|
|
|
+ padding: 0 16upx; // 增加左右内边距防止字挤边上
|
|
|
+ box-sizing: border-box; // 确保内边距不会撑开容器
|
|
|
+ background: rgba(255, 255, 255, 0.15);
|
|
|
+ border-radius: 15upx;
|
|
|
+ border: 1upx solid rgba(255, 255, 255, 0.2);
|
|
|
+ backdrop-filter: blur(10upx);
|
|
|
+ transition: all 0.2s ease;
|
|
|
+ box-shadow: 0 2upx 8upx rgba(0, 0, 0, 0.1);
|
|
|
+
|
|
|
+ .function-text {
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 26upx; // 稍微调小一点字体，不然五个字多的可能会超出屏幕
|
|
|
+ font-weight: 500;
|
|
|
+ text-shadow: 0 1upx 2upx rgba(0, 0, 0, 0.1);
|
|
|
+ line-height: 1;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 生日礼物提示横幅
|
|
|
+ .birthday-banner {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ background: #fff5f5;
|
|
|
+ border-radius: 15upx;
|
|
|
+ padding: 20upx 24upx;
|
|
|
+ margin-top: 20upx;
|
|
|
+ border: 1upx solid #ffe4e4;
|
|
|
+ box-shadow: 0 2upx 8upx rgba(255, 182, 193, 0.2);
|
|
|
+
|
|
|
+ .gift-icon-container {
|
|
|
+ width: 60upx;
|
|
|
+ height: 60upx;
|
|
|
+ background: #ff4757;
|
|
|
+ border-radius: 30upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-right: 20upx;
|
|
|
+ flex-shrink: 0;
|
|
|
+
|
|
|
+ .gift-icon {
|
|
|
+ font-size: 32upx;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .banner-text {
|
|
|
+ flex: 1;
|
|
|
+ margin-right: 20upx;
|
|
|
+
|
|
|
+ .banner-title {
|
|
|
+ font-size: 28upx;
|
|
|
+ color: #ff4757;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 1.4;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .banner-button {
|
|
|
+ background: #ff4757;
|
|
|
+ border-radius: 20upx;
|
|
|
+ padding: 12upx 24upx;
|
|
|
+ flex-shrink: 0;
|
|
|
+
|
|
|
+ .button-text {
|
|
|
+ font-size: 26upx;
|
|
|
+ color: #ffffff;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* &:active {
|
|
|
+ background: #fff0f0;
|
|
|
+ } */
|
|
|
+}
|
|
|
+}
|
|
|
+
|
|
|
+// 花店列表
|
|
|
+.shop-list {
|
|
|
+padding: 0 20upx;
|
|
|
+}
|
|
|
+
|
|
|
+// 花店卡片
|
|
|
+.shop-card {
|
|
|
+background: white;
|
|
|
+border-radius: 20upx;
|
|
|
+margin-bottom: 20upx;
|
|
|
+margin-top:40upx;
|
|
|
+padding: 30upx;
|
|
|
+position: relative;
|
|
|
+box-shadow: 0 4upx 20upx rgba(0, 0, 0, 0.08);
|
|
|
+
|
|
|
+.more-btn {
|
|
|
+ position: absolute;
|
|
|
+ top: 20upx;
|
|
|
+ right: 20upx;
|
|
|
+ width: 40upx;
|
|
|
+ height: 40upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ border-radius: 20upx;
|
|
|
+ background: rgba(0, 0, 0, 0.05);
|
|
|
+
|
|
|
+ .more-icon {
|
|
|
+ font-size: 24upx;
|
|
|
+ color: #666;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.shop-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 24upx;
|
|
|
+
|
|
|
+ .shop-avatar {
|
|
|
+ margin-right: 20upx;
|
|
|
+
|
|
|
+ .shop-logo {
|
|
|
+ width: 80upx;
|
|
|
+ height: 80upx;
|
|
|
+ border-radius: 12upx;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .shop-info {
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+ .shop-name {
|
|
|
+ display: block;
|
|
|
+ font-size: 38upx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 8upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .shop-address {
|
|
|
+ display: block;
|
|
|
+ font-size: 24upx;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .shop-action {
|
|
|
+ margin-left: 20upx;
|
|
|
+ flex-shrink: 0; // 不被压缩
|
|
|
+
|
|
|
+ .recover-btn {
|
|
|
+ background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
|
|
+ color: white;
|
|
|
+ font-size: 26upx;
|
|
|
+ padding: 16upx 36upx; // 增加上下左右的内边距，让它更高更大一些
|
|
|
+ border-radius: 40upx; // 配合高度稍微加大一点圆角
|
|
|
+ box-shadow: 0 4upx 10upx rgba(16, 185, 129, 0.3);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ text {
|
|
|
+ line-height: 1.2; // 调整行高避免被挤压
|
|
|
+ }
|
|
|
+
|
|
|
+ /* &:active {
|
|
|
+ opacity: 0.8;
|
|
|
+ } */
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.balance-section {
|
|
|
+ margin-bottom: 24upx;
|
|
|
+
|
|
|
+ .balance-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 20upx 24upx;
|
|
|
+ background: #f8f9fa;
|
|
|
+ border-radius: 12upx;
|
|
|
+
|
|
|
+ .balance-label {
|
|
|
+ font-size: 32upx;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+
|
|
|
+ .balance-amount {
|
|
|
+ font-size: 34upx;
|
|
|
+ font-weight: 600;
|
|
|
+
|
|
|
+ &.negative {
|
|
|
+ color: #ff4757;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.positive {
|
|
|
+ color: #667eea;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .balance-action {
|
|
|
+ font-size: 34upx;
|
|
|
+ color: #667eea;
|
|
|
+ text-decoration: underline;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .balance-action-2 {
|
|
|
+ font-size: 34upx;
|
|
|
+ color: #ff4757;
|
|
|
+ text-decoration: underline;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.action-buttons {
|
|
|
+ display: flex;
|
|
|
+ gap: 15upx;
|
|
|
+ margin-bottom: 24upx;
|
|
|
+
|
|
|
+ .action-btn {
|
|
|
+ flex: 1;
|
|
|
+ padding: 35upx 20upx;
|
|
|
+ border-radius: 15upx;
|
|
|
+ text-align: center;
|
|
|
+ box-shadow: 0 4upx 12upx rgba(0, 0, 0, 0.15);
|
|
|
+ transition: all 0.2s ease;
|
|
|
+
|
|
|
+ /* &:active {
|
|
|
+ box-shadow: 0 2upx 8upx rgba(0, 0, 0, 0.2);
|
|
|
+ } */
|
|
|
+
|
|
|
+ &.primary {
|
|
|
+ background: linear-gradient(135deg, #a55eea 0%, #8e44ad 100%);
|
|
|
+ flex: 0.9;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.secondary {
|
|
|
+ background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
|
|
|
+ flex: 1.1;
|
|
|
+
|
|
|
+ &.disabled {
|
|
|
+ background: linear-gradient(135deg, #ccc 0%, #999 100%);
|
|
|
+ opacity: 0.6;
|
|
|
+ box-shadow: none;
|
|
|
+ pointer-events: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.tertiary {
|
|
|
+ background: #e91e63;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-text {
|
|
|
+ color: white;
|
|
|
+ font-size: 36upx;
|
|
|
+ font-weight: 600;
|
|
|
+ text-shadow: 0 1upx 2upx rgba(0, 0, 0, 0.2);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.record-buttons {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 12upx;
|
|
|
+
|
|
|
+ .record-btn {
|
|
|
+ flex: 1;
|
|
|
+ min-width: 140upx;
|
|
|
+ padding: 16upx 12upx;
|
|
|
+ background: #f8f9fa;
|
|
|
+ border-radius: 8upx;
|
|
|
+ text-align: center;
|
|
|
+ border: 1upx solid #e9ecef;
|
|
|
+
|
|
|
+ /* &:active {
|
|
|
+ background: #e9ecef;
|
|
|
+ } */
|
|
|
+
|
|
|
+ .record-text {
|
|
|
+ font-size: 26upx;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+}
|
|
|
+
|
|
|
+// 弹出菜单
|
|
|
+.options-popup {
|
|
|
+position: fixed;
|
|
|
+top: 0;
|
|
|
+left: 0;
|
|
|
+width: 100vw;
|
|
|
+height: 100vh;
|
|
|
+z-index: 1000;
|
|
|
+
|
|
|
+.popup-overlay {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: rgba(0, 0, 0, 0.4);
|
|
|
+}
|
|
|
+
|
|
|
+.popup-content {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ background-color: white;
|
|
|
+ border-radius: 20upx;
|
|
|
+ padding: 0;
|
|
|
+ min-width: 500upx;
|
|
|
+ box-shadow: 0 20upx 40upx rgba(0, 0, 0, 0.3);
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .popup-item {
|
|
|
+ padding: 40upx 50upx;
|
|
|
+ border-bottom: 1upx solid #f0f0f0;
|
|
|
+ text-align: center;
|
|
|
+ transition: all 0.2s ease;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* &:active {
|
|
|
+ background-color: #f8f9fa;
|
|
|
+ } */
|
|
|
+
|
|
|
+ &.cancel {
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+
|
|
|
+ text {
|
|
|
+ color: #333;
|
|
|
+ font-size: 36upx;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+}
|
|
|
+
|
|
|
+// 空状态
|
|
|
+.empty-state {
|
|
|
+display: flex;
|
|
|
+flex-direction: column;
|
|
|
+align-items: center;
|
|
|
+justify-content: center;
|
|
|
+padding: 100upx 40upx;
|
|
|
+text-align: center;
|
|
|
+
|
|
|
+.empty-icon {
|
|
|
+ font-size: 120upx;
|
|
|
+ margin-bottom: 30upx;
|
|
|
+}
|
|
|
+
|
|
|
+.empty-title {
|
|
|
+ font-size: 36upx;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 12upx;
|
|
|
+}
|
|
|
+
|
|
|
+.empty-subtitle {
|
|
|
+ font-size: 28upx;
|
|
|
+ color: #999;
|
|
|
+}
|
|
|
+}
|
|
|
+
|
|
|
+// 动画效果
|
|
|
+@keyframes pulse {
|
|
|
+0% {
|
|
|
+ transform: scale(1);
|
|
|
+ opacity: 1;
|
|
|
+}
|
|
|
+50% {
|
|
|
+ transform: scale(1.2);
|
|
|
+ opacity: 0.8;
|
|
|
+}
|
|
|
+100% {
|
|
|
+ transform: scale(1);
|
|
|
+ opacity: 1;
|
|
|
+}
|
|
|
+}
|
|
|
+</style>
|
