cmoit

src/views/myETA/ChartDetail.vue

@@ -145,9 +145,9 @@ function handleUpdateRender(val){
             v-if="sameOptionType.includes(chartInfo.ChartType)||chartInfo.ChartType===2" 
             @click="chartState.showTimePop=true"
         >
-            <span>开始日期</span>
-            <span>至</span>
-            <span>结束日期</span>
+            <img class="left-icon" src="@/assets/imgs/icon_calendar.png" alt="">
+            <span :class="['val-box',!chartState.startTime?'val-box_grey':'']">{{chartState.startTime||'开始日期'}} ~ {{chartState.endTime||'结束日期'}}</span>
+            <van-icon class="right-icon" name="arrow" />
         </div>
 
         <div class="chart-box" id="chart-box"></div>
@@ -179,6 +179,26 @@ function handleUpdateRender(val){
             <div class="list-lable">指标信息</div>
             <van-cell :title="item.EdbName" is-link v-for="item in edbList" :key="item.EdbInfoId" @click="showEDB=true,showEDBData=item"/>
         </div>
+
+        <!-- 底部悬浮操作模块 -->
+        <div class="fix-bot-action-box">
+            <div class="item">
+                <img class="icon" src="@/assets/imgs/icon_arrow.png" alt="">
+                <div>上一张</div>
+            </div>
+            <div class="item">
+                <img class="icon" style="transform: rotate(180deg);" src="@/assets/imgs/icon_arrow.png" alt="">
+                <div>下一张</div>
+            </div>
+            <div class="item">
+                <img class="icon" src="@/assets/imgs/myETA/icon_limit.png" alt="">
+                <div>上下限</div>
+            </div>
+            <div class="item">
+                <img class="icon" src="@/assets/imgs/myETA/icon_menu.png" alt="">
+                <div>更多</div>
+            </div>
+        </div>
     </div>
 
     <!-- 选择日期弹窗 -->
@@ -225,6 +245,7 @@ function handleUpdateRender(val){
 <style lang="scss" scoped>
 .chart-detail-page{
     padding: $page-padding;
+    padding-bottom: 120px;
     .chart-title{
         font-size: 36px;
         margin-bottom: 56px;
@@ -233,6 +254,26 @@ function handleUpdateRender(val){
         width: 100%;
         height: 700px;
     }
+
+    .select-time-box{
+        display: flex;
+        align-items: center;
+        .left-icon{
+            width: 48px;
+            height: 48px;
+        }
+        .right-icon{
+            margin-left: auto;
+        }
+        .val-box{
+            margin-left: 32px;
+            font-size: 32px;
+            &.val-box_grey{
+                color: $font-grey_999;
+            }
+        }
+    }
+
     .select-year-box{
         width: 100vw;
         position: relative;
@@ -248,6 +289,9 @@ function handleUpdateRender(val){
             height: 0;
         }
         .item{
+            line-height: 88px;
+            position: relative;
+            height: 100%;
             flex-shrink: 0;
             display: inline-block;
             margin-right: 40px;
@@ -255,6 +299,18 @@ function handleUpdateRender(val){
             color: $font-grey_999;
             &.active{
                 color: #333;
+                &::after{
+                    content: '';
+                    display: block;
+                    width: 50px;
+                    height: 6px;
+                    border-radius: 3px;
+                    background-color: $theme-color;
+                    position: absolute;
+                    bottom: 0;
+                    left: 50%;
+                    transform: translateX(-50%);
+                }
             }
         }
     }
@@ -296,5 +352,32 @@ function handleUpdateRender(val){
             left: 0;
         }
     }
+
+    .fix-bot-action-box{
+        position: fixed;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        z-index: 99;
+        background-color: #fff;
+        border-top: 1px solid $border-color;
+        height: 112px;
+        display: flex;
+        align-items: center;
+        .item{
+            height: 100%;
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            font-size: 20px;
+            .icon{
+                width: 40px;
+                height: 40px;
+                margin-bottom: 5px;
+            }
+        }
+    }
 }
 </style>

src/views/myETA/ChartList.vue

@@ -67,7 +67,8 @@ function goChartDetail(item){
     router.push({
         path:"/myETA/chartdetail",
         query:{
-            code:item.UniqueCode
+            code:item.UniqueCode,
+            
         }
     })
 }

src/views/myETA/components/EDBInfo.vue

@@ -73,7 +73,7 @@ function handleConfirmChange(){
         <div class="con-box">
             <ul class="info-list">
                 <li class="item" v-for="item in list" :key="item.key">
-                    <span class="lable">{{item.name}}:</span>
+                    <span class="lable">{{item.name}}</span>
                     <span class="text">{{data[item.key]}}</span>
                 </li>
             </ul>
@@ -99,29 +99,37 @@ function handleConfirmChange(){
 .edb-info-wrap{
     .top-box{
         display: flex;
-        padding: 20px $page-padding;
+        align-items: center;
+        padding: 32px $page-padding;
         .title{
             flex: 1;
             text-align: center;
+            font-size: 32px;
         }
     }
     .con-box{
         padding: $page-padding;
+        max-height: 60vh;
+        overflow-y: auto;
+        &::-webkit-scrollbar{
+            display: none;
+        }
     }
     .info-list{
-        border-bottom: 1px solid $border-color;
         padding-bottom: 40px;
         margin-bottom: 40px;
         .item{
             display: flex;
             justify-content: space-between;
-            padding: 10px 0;
+            padding: 32px 0;
+            border-bottom: 1px solid $border-color;
             .lable{
                 flex-shrink: 0;
             }
             .text{
                 width: 70%;
                 text-align: right;
+                color: $font-grey_999;
             }
         }
     }