|
|
@@ -1,104 +0,0 @@
|
|
|
-<template>
|
|
|
- <view class="empty-state">
|
|
|
- <view class="empty-icon">
|
|
|
- <text class="empty-icon-text">!</text>
|
|
|
- </view>
|
|
|
-
|
|
|
- <text class="empty-title">{{ title }}</text>
|
|
|
- <text class="empty-desc">{{ description }}</text>
|
|
|
-
|
|
|
- <button class="login-btn" hover-class="login-btn-hover" @tap="handleGoLogin">
|
|
|
- {{ buttonText }}
|
|
|
- </button>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script setup lang="ts">
|
|
|
-interface Props {
|
|
|
- title?: string
|
|
|
- description?: string
|
|
|
- buttonText?: string
|
|
|
- loginUrl?: string
|
|
|
- enableRedirect?: boolean
|
|
|
-}
|
|
|
-
|
|
|
-const props = withDefaults(defineProps<Props>(), {
|
|
|
- title: '暂无内容',
|
|
|
- description: '登录后可查看学术信息和产品相册',
|
|
|
- buttonText: '去登录',
|
|
|
- loginUrl: '/pages/login/index',
|
|
|
- enableRedirect: true,
|
|
|
-})
|
|
|
-
|
|
|
-const handleGoLogin = (): void => {
|
|
|
- uni.navigateTo({
|
|
|
- url: props.loginUrl,
|
|
|
- })
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped lang="scss">
|
|
|
-.empty-state {
|
|
|
- min-height: calc(100vh - 88rpx);
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 180rpx 48rpx 0;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- flex-direction: column;
|
|
|
- background: #fff;
|
|
|
-}
|
|
|
-
|
|
|
-.empty-icon {
|
|
|
- width: 128rpx;
|
|
|
- height: 128rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- border-radius: 50%;
|
|
|
- background: #f2f8ff;
|
|
|
-}
|
|
|
-
|
|
|
-.empty-icon-text {
|
|
|
- font-size: 72rpx;
|
|
|
- font-weight: 700;
|
|
|
- color: #40a9ff;
|
|
|
-}
|
|
|
-
|
|
|
-.empty-title {
|
|
|
- margin-top: 36rpx;
|
|
|
- font-size: 32rpx;
|
|
|
- font-weight: 600;
|
|
|
- color: #333;
|
|
|
-}
|
|
|
-
|
|
|
-.empty-desc {
|
|
|
- margin-top: 16rpx;
|
|
|
- font-size: 26rpx;
|
|
|
- line-height: 38rpx;
|
|
|
- color: #999;
|
|
|
- text-align: center;
|
|
|
-}
|
|
|
-
|
|
|
-.login-btn {
|
|
|
- width: 320rpx;
|
|
|
- height: 80rpx;
|
|
|
- margin-top: 48rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- border-radius: 999rpx;
|
|
|
- border: none;
|
|
|
- background: #40a9ff;
|
|
|
- color: #fff;
|
|
|
- font-size: 30rpx;
|
|
|
- line-height: 80rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.login-btn::after {
|
|
|
- border: none;
|
|
|
-}
|
|
|
-
|
|
|
-.login-btn-hover {
|
|
|
- opacity: 0.85;
|
|
|
-}
|
|
|
-</style>
|