ETA1.0.9样式更改

src/views/positionAnalysis_manage/components/chartDetail.vue

@@ -23,12 +23,26 @@
             >
           </el-radio-group>
         </div>
+        <div>
+            <el-date-picker
+                v-model="selectDate"
+                type="date"
+                placeholder="请选择日期"
+                value-format="yyyy-MM-dd"
+                :picker-options="pickerOption"
+                @change="$emit('handleOpt','date')"
+                style="margin-right: 10px"
+            />
+            <el-button type="primary" plain @click="$emit('handleOpt','beforeDate')">查看前一天</el-button>
+            <el-button type="primary" plain @click="$emit('handleOpt','nextDate')" :disabled="disabledNextBtn">查看后一天</el-button>
+        </div>
       </div>
       <div
         class="chart-wrap"
         v-if="chartItemInfo&&chartItemInfo.List && chartListState.BuyList.List"
       >
         <div class="top-info-box">
+          <span>{{$route.query.classify_type}}</span>
           <span>{{ chartItemInfo.name }}</span>
           <span
             ><span style="color: #999; margin-right: 2px">总计 </span
@@ -66,6 +80,11 @@ export default {
       },
     },
   },
+  props:{
+    disabledNextBtn:Boolean,
+    selectDate:String,
+    pickerOption:Object
+  },
   data() {
     return {
       isPcShow: true,

src/views/positionAnalysis_manage/components/indexContent.vue

@@ -106,13 +106,12 @@ export default {
         }
     }
     .list-wrap{
-        flex: 1;
         padding: 30px;
-        /* height: 958px; */
+        height: 958px;
         box-sizing: border-box;
         overflow-y: auto;
         .item{
-            margin-bottom: 40px;
+            margin-bottom: 30px;
             /* display: flex; */
 
             .label{

src/views/positionAnalysis_manage/detail.vue

@@ -3,29 +3,22 @@
     <div class="detail">
         <div class="detail-top">
             <div>
-                <el-date-picker
-                    v-model="selectDate"
-                    type="date"
-                    placeholder="请选择日期"
-                    value-format="yyyy-MM-dd"
-                    :picker-options="pickerOption"
-                    @change="handleOpt('date')"
-                    style="margin-right: 10px"
-                />
-                <el-button type="primary" plain @click="handleOpt('beforeDate')">查看前一天</el-button>
-                <el-button type="primary" plain @click="handleOpt('nextDate')" :disabled="disabledNextBtn">查看后一天</el-button>
-                </div>
-            <div>
-            <!-- <el-button type="primary" @click="refreshData" plain>一键刷新</el-button> -->
-            <el-button type="primary" @click="handleOpt('beforeClassifyType')">上一个合约</el-button>
-            <el-button type="primary" @click="handleOpt('nextClassifyType')">下一个合约</el-button>
-        </div>
+                <!-- <el-button type="primary" @click="refreshData" plain>一键刷新</el-button> -->
+                <el-button type="primary" @click="handleOpt('beforeClassifyType')">上一个合约</el-button>
+                <el-button type="primary" @click="handleOpt('nextClassifyType')">下一个合约</el-button>
+            </div>
         </div>
         <div class="content-box detail-content">
-            <chartDetail ref="chartDetailRef" @setInfo="e => { selectDate=e.date; }"/>
+            <chartDetail ref="chartDetailRef" 
+                :disabledNextBtn="disabledNextBtn"
+                :selectDate="selectDate"
+                :pickerOption="pickerOption"
+                @setInfo="e => { selectDate=e.date;}"
+                @handleOpt="handleOpt"
+            />
         </div>
     </div>
-    <div class="list">
+    <div class="list" :class="{'expand-list':isSlide}">
         <div class="header">
             <span>持仓列表</span>
             <div>历史合约
@@ -55,6 +48,9 @@
                 />
             </el-tab-pane>
         </el-tabs>
+        <span class="slide-icon" @click="isSlide = !isSlide">
+            <i :class="{'el-icon-d-arrow-left':!isSlide,'el-icon-d-arrow-right':isSlide}"></i>
+        </span>
     </div>
   </div>
 </template>
@@ -73,7 +69,8 @@ export default {
       activeType: '',
       list: [],
       loading: false,
-      isHistory:false
+      isHistory:false,
+      isSlide:false,
     }
   },
   computed: {
@@ -198,16 +195,15 @@ export default {
 .position-analysis-detail-page{
   min-height: calc(100vh - 410px);
   display: flex;
+  position: relative;
   .list{
       width:379px;
       margin-left:20px;
       position: relative;
       background: #fff;
-      border: 1px solid #ececec;
+      border: 1px solid #F2F2F2;
       border-radius: 4px;
       /* box-shadow: 0 3px 6px rgba(0,0,0,.05); */
-      display: flex;
-      flex-direction: column;
       .header{
           padding:30px;
           display: flex;
@@ -220,10 +216,31 @@ export default {
       }
       .tabs-wrap{
           flex: 1;
+          border-top: 1px solid #DCDFE6;
+      }
+      .slide-icon{
+        position:absolute;
+        left: -10px;
+        padding: 20px 0;
+        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3);
+        border-radius: 5px;
+        cursor: pointer;
+        top: 50%;
+        transform: translateY(-50%);
+        z-index: 99;
+        background-color: #fff;
       }
   }
+  .expand-list{
+      position:absolute;
+      right:0;
+      width:50%;
+  }
   .detail{
       flex:1;
+      display: flex;
+      flex-direction: column;
+      max-width: calc(100% - 379px - 20px);
   }
   .detail-top {
     padding: 20px;
@@ -236,6 +253,7 @@ export default {
     justify-content: space-between;
   }
   .detail-content {
+      flex: 1;
     padding: 20px;
     background: #fff;
     border-right: 2px solid #F2F2F2;