修改v4k线浏览布局

v4/src/views/home/index.vue

@@ -1,82 +1,37 @@
 <template>
 <div class="contract-page">
-    <div class="page-top d-flex pt-2">
+    <div class="page-top d-flex pt-2" >
-        <div class="kline-box flex-fill mr-2">
+        <div class="kline-box flex-fill mr-2 ml-2">
-            <div class="coin-change d-flex align-items-center py-2 pl-4 heading justify-content-between">
+            <div class="d-flex align-items-center py-2 pl-4 heading justify-content-between">
-              <div class="d-flex align-items-center">
+              <div style="margin: 10px 0px;">
-                <div class="d-flex fn-12">
+                <div>
-                  金币名称：
+					<div style="font-size: 20px;width: 100px;margin-top: 8px;float: left;">金币名称：</div>
+					<div v-for="(item,index) in contractList" :key="item.coin_name + 1" style="display: flex;flex-wrap: wrap;">
+						<div v-for="items in item.marketInfoList" :key="items.symbol" :class="{ activecorl: items.symbol == activeSymbol }"
+						class="tab_color" @click="ispopover1(items.symbol)">
+							<div>{{ items.symbol }}/{{ item.coin_name }}</div>
 						</div>
-                <div class="d-flex fn-12">
-                  时间阶段：
 					</div>
                 </div>
-               
+                <div class="d-flex" style="margin-top: 15px;width: 100%;">
-               系统时间：
+					<div style="font-size: 20px;width: 100px;float: left;">时间阶段：</div>
-                <div class="d-flex align-items-center">
+					<div style="font-size: 20px;margin-left: 5px;">{{selectTime}}</div>
-                    <!-- 币种价值数据 -->
-                    <div class="d-flex fn-12">
-                        <div class="item px-2">
-                            <div class="title mb-1 text-secondary">
-                                1分钟
-                            </div>
-
-                        </div>
-                        <div class="item px-2">
-                            <div class="title mb-1 text-secondary">
-                                5分钟
-                            </div>
-                        </div>
-                        <div class="item px-2">
-                            <div class="title mb-1 text-secondary">
-                                15分钟
-                            </div>
-                        </div>
-                        <div class="item px-2">
-                            <div class="title mb-1 text-secondary">
-                                30分钟
-                            </div>
-                        </div>
-                        <div class="item px-2">
-                            <div class="title mb-1 text-secondary">
-                                1小时
-                            </div>
-                        </div>
-                        <div class="item px-2">
-                            <div class="title mb-1 text-secondary">
-                                4小时
-                            </div>
-                        </div>
-                        <div class="item px-2">
-                            <div class="title mb-1 text-secondary">
-                                天
-                            </div>
-                        </div>
-                        <div class="item px-2">
-                            <div class="title mb-1 text-secondary">
-                                周
                 </div>
               </div>
             </div>
+            <kline :activeCoin="{ pair_name: activeContract.pair_name }" :contract="true" :wsUrl="wsUrl" @selectTime="selectTime=$event" />
         </div>
-                
-            </div>
-            <kline :activeCoin="{ pair_name: activeContract.pair_name }" :wsUrl="wsUrl" />
-        </div>
-
     </div>
-
-
 </div>
 </template>
 
 <script>
 import kline from "../option/kline";
-
 import Socket from "@/api/server/Socket.js";
-
+import Contract from "@/api/contract";
-// import Home from "@/api/home";
+import Home from "@/api/home";
 import bus from "@/components/bus.js";
+
 export default {
     components: {
         kline
@@ -97,6 +52,7 @@ export default {
             contractOpen: false,
             contractAgreement: {},
             symbolDetail: {},
+			selectTime:''
         };
     },
     computed: {
@@ -112,12 +68,36 @@ export default {
         },
         isLogin() {
             return Boolean(localStorage.token);
-        }
+        },
     },
     watch: {
         activeSymbol() {
             this.holdPosition();
         },
+		selectTime(val){
+			switch(val){
+				case '1':
+				case '5':
+				case '15':
+				case '30':
+					this.selectTime = val + this.$t("exchange.min")
+				  break;
+				case '60':
+					this.selectTime = val + this.$t("exchange.hour")
+				  break;
+				case '1D':
+					this.selectTime = val + this.$t("exchange.day")
+				  break;
+				case '1W':
+					const val1 = val.substring(0, 1)
+					this.selectTime = val1 + this.$t("exchange.week")
+				  break;
+				case '1M':
+					const val2 = val.substring(0, 1)
+					this.selectTime = val2 + this.$t("exchange.month")
+				  break;
+			}
+		}
     },
     destroyed() {
         clearInterval(this._time);
@@ -154,7 +134,6 @@ export default {
     methods: {
         ispopover1(item) {
             this.activeSymbol = item;
-            this.$refs.popover.showPopper = false;
         },
         swapMarketList() {
             let msg = "swapMarketList";
@@ -270,4 +249,24 @@ export default {
 .dark-app .theme-switch .theme-switch-button .right {
     color: white !important
 }
+.tab_color{
+	padding: 8px;
+	color: #999;
+	width: 6.88rem;
+	margin: 5px 10px;
+	font-weight: bold;
+	text-align: center;
+	border: 1px solid #999;
+	&:hover{
+		cursor: pointer;
+	}
+}
+.activecorl{
+	padding: 8px;
+	color: #2020cc;
+	width: 6.88rem;
+	margin: 5px 10px;
+	text-align: center;
+	border: 1px solid #2020cc;
+}
 </style>

v4/src/views/option/kline.vue

@@ -27,11 +27,11 @@ let contractAjax = {
 };
 export default {
   props: {
-    // contract: {
+    contract: {
-    //   default: false,
+      default: false,
-    //   type: Boolean,
+      type: Boolean,
-    //   required: false,
+      required: false,
-    // },
+    },
     activeCoin: {
       default: {},
       type: Object,
@@ -447,6 +447,7 @@ methods: {
                     });
                     // _this.$store.commit("upType", v.type);
                     localStorage.setItem("tim", v.resolution);
+					_this.$emit("selectTime", v.resolution);
                     widget.chart().setChartType(v.chartType); //改变K线类型
                 });
             });
@@ -499,6 +500,7 @@ methods: {
         let tim=localStorage.getItem("tim");
         if(tim){
             this.timer=tim;
+			this.$emit("selectTime", tim);
         }
     },
   mounted() {