<include file="Trade:header" />

 <style type="text/css" media="screen">

 	#tradeLeft{

 		width: 23%;

 		padding: 20px;

 	}

   /*chrome滚动条颜色设置*/

*::-webkit-scrollbar {width:7px; height:10px; background-color:transparent;} /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/

*::-webkit-scrollbar-track {background-color:#f0f6ff;  } /*定义滚动条轨道 内阴影+圆角*/

*::-webkit-scrollbar-thumb {background-color:#73abb1; border-radius:6px;} /*定义滑块 内阴影+圆角*/

.scrollbarHide::-webkit-scrollbar{display: none}

.scrollbarShow::-webkit-scrollbar{display: block}

 </style>

 <div id="tradeLeft">

		 <el-tabs v-model="marketlist" type="card" @tab-click="handleClick">

			    <el-tab-pane  label="USDT" name="first">

				    		 <el-table  stripe height="200"  :data="tableData" :default-sort = "{prop: 'date', order: 'descending'}">

							    <el-table-column prop="date" label="币种" sortable  width="100"></el-table-column>

							    <el-table-column prop="name" label="价格" sortable width="100"> </el-table-column>

							    <el-table-column prop="name" label="日涨跌" sortable width="100"> </el-table-column>

							    <el-table-column prop="address" label="自选" :formatter="formatter"></el-table-column>

						     </el-table>	

			    </el-tab-pane>

			    <el-tab-pane label="BTC" name="second">配置管</el-tab-pane>

			    <el-tab-pane label="ETH" name="third">角色管理</el-tab-pane>

			    <el-tab-pane label="自选" name="fourth">定时任务补偿</el-tab-pane>

		  </el-tabs>

 </div> 

<script>

  new Vue({

  	el:"#tradeLeft",

  	data:{

  		 marketlist: 'first',

  	     tableData: [{

			          date: '2016-05-02',

			          name: '王小虎',

			          address: '上弄'

			        }, {

			          date: '2016-05-04',

			          name: '王小虎',

			          address: '上海17 弄'

			        }, {

			          date: '2016-05-01',

			          name: '王小虎',

			          address: '上海弄'

			        }, {

			          date: '2016-05-03',

			          name: '王小虎',

			          address: '上海弄'

			        }, {

			          date: '2016-05-01',

			          name: '王小虎',

			          address: '上海弄'

        }]

 	},

 	methods:{

 	    handleClick(tab, event) {

          console.log(tab, event);

        },

        formatter(row, column) {

          return row.address;

        }

 	}

  });

//鼠标划入滚动条展现，鼠标划出滚动条隐藏

function scrollbarShowHidden(element){

	element.addClass('scrollbarHide');

	element.hover(function() {

		element.addClass('scrollbarShow');

	}, function() {

		element.removeClass('scrollbarShow');

	});

}

scrollbarShowHidden($('.el-table__body-wrapper'));

</script>

<include file="Public:footer" />