|
|
@@ -1,34 +1,103 @@
|
|
|
-.bg-color {
|
|
|
- --background: #f4f4f4; /* 设置背景颜色 */
|
|
|
- }
|
|
|
- ion-button {
|
|
|
- --background: white; /* 设置背景颜色 */
|
|
|
- --color: #888;
|
|
|
- --border-radius: 8px; /* 按钮圆角 */
|
|
|
- font-weight: bold; /* 加粗按钮文本 */
|
|
|
- height: 40px; /* 按钮高度 */
|
|
|
- width: auto;
|
|
|
- float: right;
|
|
|
- font-size: 16px; /* 设置按钮字体大小 */
|
|
|
- }
|
|
|
+ion-segment-button ion-label {
|
|
|
+ font-size: 16px; /* 设置字体大小为16px */
|
|
|
+}
|
|
|
+
|
|
|
+// ion-segment-view {
|
|
|
+// height: 150px;
|
|
|
+// }
|
|
|
+ion-segment-content:nth-of-type(2) {
|
|
|
+ background: lightblue;
|
|
|
+}
|
|
|
+ion-segment-content:nth-of-type(3) {
|
|
|
+ background: lightgreen;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+/* 容器的样式 */
|
|
|
+.image-container {
|
|
|
+ display: flex; /* 使用flexbox布局 */
|
|
|
+ flex-wrap: wrap; /* 允许换行 */
|
|
|
+ gap: 20px; /* 图片间距，可以根据需要调整 */
|
|
|
+}
|
|
|
+
|
|
|
+/* 每个图片项的样式 */
|
|
|
+.image-wrapper {
|
|
|
+ display: flex; /* 使用flexbox布局 */
|
|
|
+ flex-direction: column; /* 垂直排列子元素 */
|
|
|
+ height: auto; /* 高度自适应 */
|
|
|
+ width: calc(50% - 10px); /* 每个图片占容器的50%宽度，减去间距 */
|
|
|
+ box-sizing: border-box; /* 确保宽度计算不包括padding */
|
|
|
+ position: relative; /* 方便调整按钮位置 */
|
|
|
+}
|
|
|
+
|
|
|
+/* 图片的样式 */
|
|
|
+.image-wrapper img {
|
|
|
+ width: 100%; /* 图片宽度100%，以适应容器 */
|
|
|
+ height: auto; /* 保持图片比例 */
|
|
|
+}
|
|
|
+
|
|
|
+/* 描述盒子的样式 */
|
|
|
+.description-box {
|
|
|
+ background-color: rgba(255, 255, 255, 0.8); /* 半透明背景 */
|
|
|
+ padding: 10px; /* 内边距 */
|
|
|
+ border-radius: 5px; /* 圆角 */
|
|
|
+ margin-top: auto; /* 自动上边距，使其总是在父盒子底部 */
|
|
|
+ text-align: center; /* 文字居中 */
|
|
|
+ font-size: 12px; /* 文字大小 */
|
|
|
+ border: 1px solid #ccc; /* 添加边界，颜色为浅灰色 */
|
|
|
+}
|
|
|
+
|
|
|
+/* 按钮的样式 */
|
|
|
+.transparent-button {
|
|
|
+ position: absolute; /* 定位按钮 */
|
|
|
+ bottom: 40px; /* 距离底部40px，确保在描述盒子上方 */
|
|
|
+ left: 50%; /* 水平居中 */
|
|
|
+ transform: translateX(-50%); /* 精确居中 */
|
|
|
+ background-color: rgba(255, 255, 255, 0.5); /* 半透明背景 */
|
|
|
+ padding: 10px; /* 按钮内边距 */
|
|
|
+ text-decoration: none; /* 移除下划线 */
|
|
|
+ color: black; /* 按钮文字颜色 */
|
|
|
+ border-radius: 5px; /* 圆角 */
|
|
|
+ font-size: 14px; /* 文字大小 */
|
|
|
+ text-align: center; /* 文字居中 */
|
|
|
+}
|
|
|
+
|
|
|
+.transparent-button:hover {
|
|
|
+ background-color: rgba(255, 255, 255, 0.8); /* 悬停时加深背景色 */
|
|
|
+}
|
|
|
+// .bg-color {
|
|
|
+// --background: #f4f4f4; /* 设置背景颜色 */
|
|
|
+// }
|
|
|
+// ion-button {
|
|
|
+// --background: white; /* 设置背景颜色 */
|
|
|
+// --color: #888;
|
|
|
+// --border-radius: 8px; /* 按钮圆角 */
|
|
|
+// font-weight: bold; /* 加粗按钮文本 */
|
|
|
+// height: 40px; /* 按钮高度 */
|
|
|
+// width: auto;
|
|
|
+// float: right;
|
|
|
+// font-size: 16px; /* 设置按钮字体大小 */
|
|
|
+// }
|
|
|
|
|
|
- ion-toolbar {
|
|
|
- overflow: auto; /* 确保父容器能够包裹浮动元素 */
|
|
|
- }
|
|
|
- ion-button:active {
|
|
|
- --background: #0056b3; /* 按钮按下时的背景颜色 */
|
|
|
- --color: white; /* 按钮按下时的文本颜色 */
|
|
|
- }
|
|
|
-
|
|
|
- ion-img {
|
|
|
- border-radius: 10px; /* 设置圆角 */
|
|
|
- margin: 5px; /* 添加间距 */
|
|
|
- width: 100%; /* 确保图片宽度为100% */
|
|
|
- height: auto; /* 自适应高度 */
|
|
|
- }
|
|
|
-
|
|
|
- ion-card-title {
|
|
|
- font-size: 24px; /* 设置标题字体大小 */
|
|
|
- font-weight: bold; /* 设置标题字体加粗 */
|
|
|
- align-items: center; /* 垂直居中 */
|
|
|
- }
|
|
|
+// ion-toolbar {
|
|
|
+// overflow: auto; /* 确保父容器能够包裹浮动元素 */
|
|
|
+// }
|
|
|
+// ion-button:active {
|
|
|
+// --background: #0056b3; /* 按钮按下时的背景颜色 */
|
|
|
+// --color: white; /* 按钮按下时的文本颜色 */
|
|
|
+// }
|
|
|
+
|
|
|
+// ion-img {
|
|
|
+// border-radius: 10px; /* 设置圆角 */
|
|
|
+// margin: 5px; /* 添加间距 */
|
|
|
+// width: 100%; /* 确保图片宽度为100% */
|
|
|
+// height: auto; /* 自适应高度 */
|
|
|
+// }
|
|
|
+
|
|
|
+// ion-card-title {
|
|
|
+// font-size: 24px; /* 设置标题字体大小 */
|
|
|
+// font-weight: bold; /* 设置标题字体加粗 */
|
|
|
+// align-items: center; /* 垂直居中 */
|
|
|
+// }
|
|
|
+
|
|
|
+
|
