0210071 4 hónapja
szülő
commit
1d67ee357b

+ 36 - 0
src/app/tab1/tab1.page.html

@@ -89,7 +89,43 @@
   </ion-row>
 </ion-grid>
 
+<<<<<<< HEAD
 
+=======
+<!-- 卡片三 -->
+<ion-card style="width: 95%; margin: 5px auto;">
+  <img src="/assets/img/huiyuan.png" alt="Card 3">
+</ion-card>
+
+<div class="tool_title">
+ 服务订阅
+</div>
+
+<ion-card style="width: 95%; margin: 5px auto;">
+  <ion-card-content>
+    <ion-grid>
+      <ion-row>
+        <!-- 左侧部分 -->
+        <ion-col size="6">
+          <img src="/assets/img/p4.jpg" style="width: 100%;" alt="Left Image">
+          <div class="subscription-text">
+            <p style="font-size: initial; margin-top: -25%;">一篇论文了解数字生命<br>媒介连接逝者<br>逝者犹可追</p>
+            <ion-button color="medium" expand="block">点击立即订阅</ion-button> 
+          </div>
+        </ion-col>
+        <!-- 右侧部分 -->
+        <ion-col size="6">
+          <img src="/assets/img/p5.jpg" style="width: 100%;" alt="Right Image">
+          <div class="subscription-text">
+            <p style="font-size: initial; margin-top: -25%;">中国特色的社会哀悼<br>陌生人的持续性联结<br>对抗遗忘</p>
+            <ion-button color="secondary" expand="block">点击立即订阅</ion-button> 
+          </div>
+        </ion-col>
+      </ion-row>
+    </ion-grid>
+  </ion-card-content>
+</ion-card>
+>>>>>>> 9fc80d911babc0cd066a96ce55fcbf27739e418e
 
   <!-- 右下角上传按钮 -->
   <ion-fab vertical="bottom" horizontal="end" slot="fixed">

+ 33 - 1
src/app/tab1/tab1.page.scss

@@ -179,4 +179,36 @@ ion-grid{
 			border-radius: 10px;
 		}
 	}
-}
+}
+.subscription-text {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	height: 100%;
+  }
+  
+  .subscription-text p {
+	margin-bottom: 10px;
+  }
+
+  .subscription-text {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  margin-bottom: 50px;
+  height: 50%;
+}
+
+.subscription-text p {
+  margin-bottom: 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+ion-fab-button {
+	--background: #ba9327!important; /* 设置按钮背景色为橙红色 */
+	--color: rgb(14, 13, 13) !important; /* 设置按钮文字颜色为白色 */
+  }

BIN
src/assets/img/p4.jpg


BIN
src/assets/img/p5.jpg