浏览代码

三角图:外三角去连接线改为V分隔线,开始页年/月/日同一行

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
liaoxg 3 月之前
父节点
当前提交
0915f9c40d
共有 2 个文件被更改,包括 46 次插入76 次删除
  1. 31 64
      client/components/TriangleChart.vue
  2. 15 12
      client/pages/index/index.vue

+ 31 - 64
client/components/TriangleChart.vue

@@ -118,6 +118,10 @@
         </view>
       </view>
 
+      <!-- 外三区之间的 V 形分隔线 -->
+      <view class="sep-v sep-v-left"></view>
+      <view class="sep-v sep-v-right"></view>
+
     </view>
 
     <!-- 底部 日(2) 月(2) 年(4) -->
@@ -600,84 +604,34 @@ export default {
   color: rgba(255, 255, 255, 0.75);
 }
 
-/* 顶部 — 倒T形线段(向下连接三角形顶点) */
+/* 顶部 */
 .top-tri {
   top: -58rpx;
   left: 50%;
   transform: translateX(-50%);
   position: absolute;
 }
-.top-tri::after {
-  content: '';
-  position: absolute;
-  bottom: -32rpx;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 1rpx;
-  height: 26rpx;
-  background: rgba(255, 255, 255, 0.3);
-}
 .top-tri .tri-main {
   font-size: 52rpx;
   color: #fbbf24;
   text-shadow: 0 0 28rpx rgba(251, 191, 36, 0.4);
 }
 
-/* 左侧 — T形线段(─┬─ 向右连接三角形) */
+/* 左侧 */
 .left-tri {
   top: 28%;
   left: 58rpx;
   position: absolute;
 }
-.left-tri::after {
-  content: '';
-  position: absolute;
-  right: -24rpx;
-  top: 50%;
-  transform: translateY(-50%);
-  height: 1rpx;
-  width: 22rpx;
-  background: rgba(255, 255, 255, 0.25);
-}
-.left-tri::before {
-  content: '';
-  position: absolute;
-  right: -14rpx;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 1rpx;
-  height: 44rpx;
-  background: rgba(255, 255, 255, 0.2);
-}
 
-/* 右侧 — T形线段(─┬─ 向左连接三角形) */
+/* 右侧 */
 .right-tri {
   top: 28%;
   right: 58rpx;
   position: absolute;
 }
-.right-tri::after {
-  content: '';
-  position: absolute;
-  left: -24rpx;
-  top: 50%;
-  transform: translateY(-50%);
-  height: 1rpx;
-  width: 22rpx;
-  background: rgba(255, 255, 255, 0.25);
-}
-.right-tri::before {
-  content: '';
-  position: absolute;
-  left: -14rpx;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 1rpx;
-  height: 44rpx;
-  background: rgba(255, 255, 255, 0.2);
-}
 
-/* 顶部的两外侧数字到 M/N 的短线 */
+/* 顶部的两外侧数字之间的分隔线 */
 .top-tri .tri-subs {
   position: relative;
 }
@@ -685,21 +639,34 @@ export default {
   content: '';
   position: absolute;
   left: 50%;
-  top: -18rpx;
+  bottom: -20rpx;
   transform: translateX(-50%);
-  width: 96rpx;
+  width: 130rpx;
   height: 1rpx;
-  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2) 15%, rgba(255, 255, 255, 0.2) 85%, transparent);
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15) 15%, rgba(255, 255, 255, 0.15) 85%, transparent);
 }
-.top-tri .tri-subs::after {
-  content: '';
+
+/* ---- 外三区之间的 V 形分隔线 ---- */
+.sep-v {
   position: absolute;
-  left: 50%;
-  top: -18rpx;
-  transform: translateX(-50%);
+  z-index: 2;
   width: 1rpx;
-  height: 18rpx;
-  background: rgba(255, 255, 255, 0.2);
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.05) 100%);
+  pointer-events: none;
+}
+.sep-v-left {
+  top: 20rpx;
+  left: 50%;
+  height: 70rpx;
+  transform-origin: top center;
+  transform: rotate(-36deg);
+}
+.sep-v-right {
+  top: 20rpx;
+  left: 50%;
+  height: 70rpx;
+  transform-origin: top center;
+  transform: rotate(36deg);
 }
 
 /* ---- 底部日期 ---- */

+ 15 - 12
client/pages/index/index.vue

@@ -15,16 +15,18 @@
           v-model="name"
           placeholder="请输入姓名"
         />
-        <text class="label mt-16">出生年份</text>
-        <input
-          class="input-field"
-          type="digit"
-          maxlength="4"
-          v-model="birthYear"
-          placeholder="例如 1990"
-        />
         <view class="row-inputs">
-          <view class="half-input">
+          <view class="third-input">
+            <text class="label">年份</text>
+            <input
+              class="input-field"
+              type="digit"
+              maxlength="4"
+              v-model="birthYear"
+              placeholder="1990"
+            />
+          </view>
+          <view class="third-input">
             <text class="label">月份</text>
             <picker class="picker-wrap" mode="selector" :range="monthRange" @change="onMonthChange">
               <view class="input-field picker-field">
@@ -33,7 +35,7 @@
               </view>
             </picker>
           </view>
-          <view class="half-input">
+          <view class="third-input">
             <text class="label">日期</text>
             <picker class="picker-wrap" mode="selector" :range="dayRange" @change="onDayChange">
               <view class="input-field picker-field">
@@ -255,11 +257,12 @@ async function proceedConsultation(year, month, day, birthday) {
 
 .row-inputs {
   display: flex;
-  gap: 12px;
+  gap: 10rpx;
 }
 
-.half-input {
+.third-input {
   flex: 1;
+  min-width: 0;
 }
 
 /* Picker */