1

wisdom-app/src/app/tab4/tab4.page.html

@@ -11,10 +11,23 @@
   <ion-card>
     <!-- 未登录 -->
      @if(!currentUser?.id){
-       <ion-card-header>
+       <!-- <ion-card-header>
          <ion-card-title>请登录</ion-card-title>
          <ion-card-subtitle>暂无信息</ion-card-subtitle>
-        </ion-card-header>
+        </ion-card-header> -->
+        <ion-content>
+          <ion-card class="login-card">
+              <ion-card-header>
+                  <ion-card-title>请登录</ion-card-title>
+                  <ion-card-subtitle>暂无信息</ion-card-subtitle>
+                  <ion-card-content>欢迎来到“智养人生”！在这里，我们为您提供科学、全面的健康管理方案，帮助您实现身心的和谐与平衡。无论是饮食、运动还是心理调适，我们的专业团队将为您量身定制个性化的健康计划。让我们一起探索智慧养生的奥秘，开启健康新生活！登录后，您将踏上智养之旅，发现更好的自己。欢迎您的加入，智养人生，从此刻开始！</ion-card-content>
+              </ion-card-header>
+              <div class="image-container">
+                <img src="../../assets/image/logo.png" alt="健康主题图片" class="responsive-image">
+            </div>
+          </ion-card>
+          
+      </ion-content>
       }
         <!-- 已登录 -->
      @if(currentUser?.id){

wisdom-app/src/app/tab4/tab4.page.scss

@@ -95,4 +95,31 @@ ion-card:hover {
 
 .user-info {
     flex: 1; /* 使用户信息部分占据剩余空间 */
-}
+}
+
+ion-content {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 68vh; /* 使内容区域高度为视口高度 */
+}
+
+.login-card {
+    width: 94%; /* 可以根据需要调整宽度 */
+    max-width: 400px; /* 设置最大宽度以避免过宽 */
+    text-align: center; /* 文本居中 */
+    padding: 10px; /* 添加内边距 */
+}
+
+.image-container {
+    width: 100%; /* 图片容器宽度100% */
+    display: flex; /* 使用flex布局 */
+    justify-content: center; /* 水平居中 */
+    margin-top: 10px; /* 上方间距 */
+}
+
+.responsive-image {
+    max-width: 80%; /* 最大宽度为容器宽度 */
+    height: auto; /* 高度自动 */
+    border-radius: 8px; /* 可选：添加圆角效果 */
+}