|
|
@@ -1,220 +1,153 @@
|
|
|
-.custom-segment {
|
|
|
- display: flex;
|
|
|
- justify-content: flex-start; /* 左对齐 */
|
|
|
- margin-bottom: 16px; /* 与内容的间距 */
|
|
|
-}
|
|
|
-
|
|
|
-.nav-button {
|
|
|
- flex: 1; /* 每个按钮占据相等的空间 */
|
|
|
- margin-right: 16px; /* 按钮之间的间距 */
|
|
|
- font-size: 16px; /* 默认字体大小 */
|
|
|
- --color: #000; /* 默认字体颜色 */
|
|
|
- --background: transparent; /* 背景透明 */
|
|
|
- border: none; /* 去掉边框 */
|
|
|
- text-align: left; /* 文本左对齐 */
|
|
|
-}
|
|
|
-
|
|
|
-.nav-button:last-child {
|
|
|
- margin-right: 0; /* 最后一个按钮不需要右边距 */
|
|
|
-}
|
|
|
-
|
|
|
-.nav-button.activated {
|
|
|
- font-weight: bold; /* 点击时字体加粗 */
|
|
|
- font-size: 18px; /* 点击时字体变大 */
|
|
|
- --color: black; /* 激活状态的字体颜色（可以根据需要调整） */
|
|
|
-}
|
|
|
-
|
|
|
-.info-section {
|
|
|
- background-color: white; /* 背景色为白色 */
|
|
|
- padding: 16px;
|
|
|
- border-radius: 8px; /* 圆角 */
|
|
|
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 添加阴影 */
|
|
|
- margin-top: 16px; /* 与导航栏的间距 */
|
|
|
-}
|
|
|
-
|
|
|
-.input-row {
|
|
|
- display: flex; /* 使用 flexbox 布局 */
|
|
|
- justify-content: space-between; /* 在行内均匀分布 */
|
|
|
- margin-bottom: 16px; /* 每一行的间距 */
|
|
|
-}
|
|
|
-
|
|
|
-.input-group {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
|
|
|
-.input-group label {
|
|
|
- flex: 1; /* 标签占据剩余空间 */
|
|
|
-}
|
|
|
-
|
|
|
-.input-box {
|
|
|
- border-radius: 15px; /* 圆角矩形 */
|
|
|
- border: none; /* 去掉边框 */
|
|
|
- padding: 8px 12px; /* 内边距 */
|
|
|
- margin-left: 8px; /* 标签与输入框之间的间距 */
|
|
|
- background: linear-gradient(to right, #ffcccb, #add8e6); /* 渐变背景色 */
|
|
|
- width: 75px;
|
|
|
-}
|
|
|
+$primary-color: #3880ff; // 主色调
|
|
|
+$secondary-color: #f4f4f4; // 辅助色调
|
|
|
+$accent-color: #ff4081; // 强调色
|
|
|
+$font-family: 'Helvetica Neue', Arial, sans-serif;
|
|
|
|
|
|
-.unit {
|
|
|
- margin-left: 8px; /* 输入框与单位之间的间距 */
|
|
|
-}
|
|
|
+ion-header {
|
|
|
+ background-color: $primary-color;
|
|
|
+ color: white;
|
|
|
|
|
|
-.gender-section {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-left: 16px; /* 性别选择与年龄输入框的间距 */
|
|
|
-}
|
|
|
-
|
|
|
-.gender-option {
|
|
|
- border-radius: 20px; /* 圆角矩形 */
|
|
|
- padding: 8px 12px; /* 内边距 */
|
|
|
- background: rgb(217, 214, 214); /* 默认背景色为灰色 */
|
|
|
- margin-left: 16px; /* 选项之间的间距 */
|
|
|
- cursor: pointer; /* 鼠标悬停时显示为指针 */
|
|
|
-}
|
|
|
+ ion-toolbar {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
|
|
|
-.gender-option.selected {
|
|
|
- background: linear-gradient(to right, #ffcccb, #add8e6); /* 渐变背景色 */
|
|
|
- color: white; /* 选中时字体颜色为白色 */
|
|
|
+ ion-title {
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
-
|
|
|
-
|
|
|
ion-content {
|
|
|
- --background: #f8f8f8; /* 页面背景颜色 */
|
|
|
- padding: 16px; /* 内容内边距 */
|
|
|
-}
|
|
|
-
|
|
|
-.textarea-section {
|
|
|
- position: relative; /* 使得绝对定位的元素相对于此元素定位 */
|
|
|
- margin-top: 8px; /* 与上方区域的距离 */
|
|
|
-}
|
|
|
-
|
|
|
-.textarea-input {
|
|
|
- width: 100%; /* 宽度100% */
|
|
|
- height: auto; /* 允许高度自适应 */
|
|
|
- min-height: 120px; /* 设置最小高度 */
|
|
|
- border-radius: 8px; /* 圆角矩形 */
|
|
|
- border: none; /* 去掉边框 */
|
|
|
- background-color: white; /* 背景颜色为白色 */
|
|
|
- padding: 8px; /* 内边距 */
|
|
|
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
|
|
|
- resize: none; /* 禁止调整大小 */
|
|
|
- font-size: 17px; /* 字体大小 */
|
|
|
- color: #000; /* 字体颜色 */
|
|
|
-}
|
|
|
-
|
|
|
-.image-display-section {
|
|
|
- background-color: white; /* 背景颜色为白色 */
|
|
|
- border-radius: 8px; /* 圆角矩形 */
|
|
|
- padding: 16px; /* 内边距 */
|
|
|
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
|
|
|
- margin-top: 8px; /* 与上方区域的距离 */
|
|
|
- text-align: center; /* 内容居中 */
|
|
|
- width: 100%;
|
|
|
- height: 325px;
|
|
|
-}
|
|
|
-
|
|
|
-.image-display-section img {
|
|
|
- width: 100%; /* 图片宽度100% */
|
|
|
- height: 100%; /* 图片高度100% */
|
|
|
- object-fit: cover; /* 保持比例填充 */
|
|
|
- border-radius: 5px; /* 图片圆角 */
|
|
|
- margin-top: 10px; /* 图片与标题之间的间距 */
|
|
|
-}
|
|
|
-
|
|
|
-.analysis-button {
|
|
|
- --background: linear-gradient(to right, #ffcccb, #add8e6); /* 渐变背景色 */
|
|
|
- color: white; /* 文字颜色为白色 */
|
|
|
- border-radius: 8px; /* 圆角矩形 */
|
|
|
- margin-top: 16px; /* 与上方区域的距离 */
|
|
|
- width: 100%; /* 按钮宽度100% */
|
|
|
- padding: 12px; /* 内边距 */
|
|
|
- text-align: center; /* 文本居中 */
|
|
|
- font-size: 17px;
|
|
|
-}
|
|
|
-
|
|
|
-.bigbox1 {
|
|
|
- width: 100%;
|
|
|
- background-color: #ffffff; // 背景色
|
|
|
- border: 1px solid #e0e0e0; // 边框
|
|
|
- border-radius: 12px; // 圆角
|
|
|
- padding: 20px; // 盒子内边距
|
|
|
- margin-top: 20px; // 与上方内容的间距
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-/* 当生成文本时的样式 */
|
|
|
-.analysis-button.generating {
|
|
|
- --background: #808080; /* 生成时的背景颜色为灰色 */
|
|
|
- color: white; /* 文字颜色保持为白色 */
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-//AI评价
|
|
|
-.evaluation-content {
|
|
|
-display: flex; /* 使用 flexbox 布局 */
|
|
|
-flex-direction: column; /* 垂直方向排列 */
|
|
|
-align-items: center; /* 水平方向居中 */
|
|
|
-justify-content: center; /* 垂直方向居中 */
|
|
|
-padding: 16px;
|
|
|
-height: 100%; /* 填充整个内容区域 */
|
|
|
-}
|
|
|
-
|
|
|
-ion-textarea {
|
|
|
-width: 100%; /* 使文本区域宽度适应父容器 */
|
|
|
-max-width: 500px; /* 设置最大宽度 */
|
|
|
-min-height: 150px; /* 设置最小高度 */
|
|
|
-margin-bottom: 16px; /* 文本区域和按钮之间的间距 */
|
|
|
-}
|
|
|
-
|
|
|
-.submit-button {
|
|
|
-background-color: orange; /* 橙色背景 */
|
|
|
-color: white !important; /* 强制设置文字颜色为白色 */
|
|
|
-border-radius: 20px; /* 椭圆形 */
|
|
|
-padding: 6px 12px; /* 调整内边距以缩小按钮 */
|
|
|
-font-size: 16px; /* 调整字体大小 */
|
|
|
-height: auto; /* 自适应高度 */
|
|
|
-min-width: 80px; /* 最小宽度 */
|
|
|
-}
|
|
|
-.rating-container {
|
|
|
-display: flex; /* 使用 flexbox 布局 */
|
|
|
-
|
|
|
-height:90px;
|
|
|
-padding-left: 16px;
|
|
|
-border-bottom: 1px solid grey; /* 只显示底部边框，设置为黑色 */
|
|
|
-margin-bottom: 10px; /* 评分容器与文本之间的间距 */
|
|
|
-margin-top: 0;
|
|
|
-}
|
|
|
-
|
|
|
-.rating-label {
|
|
|
-display: flex; /* 使用 flexbox 布局 */
|
|
|
-padding-top: 7px;
|
|
|
-font-weight: bold; /* 加粗评分文本 */
|
|
|
-font-size: 22px; /* 调整字体大小 */
|
|
|
-margin-right: 7px; /* 评分文本与星星之间的间距 */
|
|
|
-}
|
|
|
-
|
|
|
-.actual-score {
|
|
|
-display: flex; /* 使用 flexbox 布局 */
|
|
|
-padding-top: 12px;
|
|
|
-margin-left: 50px; /* 分数与星星之间的间距 */
|
|
|
-font-size: 15px; /* 调整字体大小 */
|
|
|
-color: grey;
|
|
|
-}
|
|
|
-
|
|
|
-.textbox{
|
|
|
-width: 100%; /* 使文本区域宽度适应父容器 */
|
|
|
-height: 300px; /* 设置最大宽度 */
|
|
|
-border-bottom: 1px solid grey; /* 只显示底部边框，设置为黑色 */
|
|
|
-}
|
|
|
-
|
|
|
-.imgbox{
|
|
|
-width: 100%; /* 使文本区域宽度适应父容器 */
|
|
|
-height: 150px; /* 设置最大宽度 */
|
|
|
-background-size: contain; /* 图像填充方式 */
|
|
|
-background-position: center; /* 图像居中 */
|
|
|
-background-repeat: no-repeat; /* 不重复图像 */
|
|
|
-margin-top: 50px;
|
|
|
+ padding: 16px;
|
|
|
+ background-color: $secondary-color;
|
|
|
+
|
|
|
+ .custom-segment {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ margin-bottom: 16px;
|
|
|
+
|
|
|
+ .nav-button {
|
|
|
+ flex: 1;
|
|
|
+ text-align: center;
|
|
|
+ padding: 10px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: $primary-color;
|
|
|
+
|
|
|
+ &.activated {
|
|
|
+ background-color: $primary-color;
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-section {
|
|
|
+ background-color: white;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 16px;
|
|
|
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
|
+ margin-bottom: 16px;
|
|
|
+
|
|
|
+ .input-row {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 16px;
|
|
|
+
|
|
|
+ .input-group {
|
|
|
+ flex: 1;
|
|
|
+ margin-right: 8px;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ label {
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 4px;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+
|
|
|
+ .input-box {
|
|
|
+ width: 100%;
|
|
|
+ padding: 8px;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .unit {
|
|
|
+ font-size: 14px;
|
|
|
+ margin-left: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .gender-section {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .gender-option {
|
|
|
+ padding: 8px 12px;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ border-radius: 4px;
|
|
|
+ margin-right: 8px;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ &.selected {
|
|
|
+ background-color: $primary-color;
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .textarea-section {
|
|
|
+ background-color: white;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 16px;
|
|
|
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
|
+ margin-bottom: 16px;
|
|
|
+
|
|
|
+ .textarea-input {
|
|
|
+ width: 100%;
|
|
|
+ height: 120px;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 8px;
|
|
|
+ resize: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .analysis-button {
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 16px;
|
|
|
+ background-color: $primary-color;
|
|
|
+ color: white;
|
|
|
+ padding: 12px;
|
|
|
+ border-radius: 4px;
|
|
|
+ font-size: 16px;
|
|
|
+ transition: background-color 0.3s;
|
|
|
+
|
|
|
+ &.generating {
|
|
|
+ background-color: $accent-color;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background-color: darken($primary-color, 10%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bigbox1 {
|
|
|
+ background-color: white;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 16px;
|
|
|
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
|
+ margin-top: 16px;
|
|
|
+
|
|
|
+ .content-style {
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 1.5;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
