联系我们

pages/consult/index.vue

@@ -1,509 +1,119 @@
 <template>
 	<view class="page">
-		<view class="chart" v-if="testData.length">
-			<cusEcharts :option="testOption"></cusEcharts>
+		<view class="banner">
+			<img src="../../static/imgs/concat.png" />
 		</view>
-		<view class="chart" v-if="kxData.length">
-			<cusEcharts :option="kxOption"></cusEcharts>
+		<view class="box">
+			<view class="tit">合作与咨询</view>
+			<view class="txt">
+				请于工作日的08:30至17:30期间来电咨询我们的产品和服务。
+			</view>
+			<view class="btn">
+				<img src="../../static/imgs/call.png" />0551-68992527
+			</view>
 		</view>
-		<view class="chart" v-if="kxData2.length">
-			<cusEcharts :option="kxOption2"></cusEcharts>
+		<view class="box">
+			<view class="tit">演示与在线试用</view>
+			<view class="txt">
+				我们将适时与您取得联系，并为您量身打造适合企业需求的专项演示方案。
+			</view>
+			<view class="btn">
+				立即申请
+			</view>
 		</view>
 		<tabbar :tabbarIndex="2"></tabbar>
 	</view>
 </template>
 
 <script>
-    import * as echarts from "echarts";
+	import * as echarts from "echarts";
 	import aqiData from '@/static/js/aqi-beijing.js'
 	export default {
-		data(){
+		data() {
 			return {
-				testData:[],
-				testOption:null,
-				kxData:[],
-				kxOption:null,
-				kxData2:[],
-				kxOption2:null
+				testData: [],
+				testOption: null,
+				kxData: [],
+				kxOption: null,
+				kxData2: [],
+				kxOption2: null
 			}
 		},
 		mounted() {
 			this.init();
 		},
-		methods:{
-			init(){
-				this.initTestChart();
-				this.initKxChart();
-				this.initKxChart2();
-			},
-			initTestChart(){
-				this.testData = [150, 230, 224, 218, 135, 147, 260];
-				this.testOption = {
-				  xAxis: {
-					type: 'category',
-					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
-				  },
-				  yAxis: {
-					type: 'value'
-				  },
-				  series: [
-					{
-					  data: this.testData,
-					  type: 'line'
-					}
-				  ]
-				};
-			},
-			initKxChart(){
-				this.kxData = [270,220,350,210,280,400];
-				const offsetX = 4;
-				const offsetY = 2;
-				// 绘制左侧面
-				const CubeLeft = echarts.graphic.extendShape({
-					shape: {
-						x: 0,
-						y: 0,
-					},
-					buildPath: function (ctx, shape) {
-						// 会canvas的应该都能看得懂，shape是从custom传入的
-						const xAxisPoint = shape.xAxisPoint;
-						const c0 = [shape.x, shape.y];
-						const c1 = [shape.x - offsetX, shape.y - offsetY];
-						const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
-						const c3 = [xAxisPoint[0], xAxisPoint[1]];
-						ctx
-							.moveTo(c0[0], c0[1])
-							.lineTo(c1[0], c1[1])
-							.lineTo(c2[0], c2[1])
-							.lineTo(c3[0], c3[1])
-							.closePath();
-					},
-				});
-				// 绘制右侧面
-				const CubeRight = echarts.graphic.extendShape({
-					shape: {
-						x: 0,
-						y: 0,
-					},
-					buildPath: function (ctx, shape) {
-						const xAxisPoint = shape.xAxisPoint;
-						const c1 = [shape.x, shape.y];
-						const c2 = [xAxisPoint[0], xAxisPoint[1]];
-						const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
-						const c4 = [shape.x + offsetX, shape.y - offsetY];
-						ctx
-							.moveTo(c1[0], c1[1])
-							.lineTo(c2[0], c2[1])
-							.lineTo(c3[0], c3[1])
-							.lineTo(c4[0], c4[1])
-							.closePath();
-					},
-				});
-				// 绘制顶面
-				const CubeTop = echarts.graphic.extendShape({
-					shape: {
-						x: 0,
-						y: 0,
-					},
-					buildPath: function (ctx, shape) {
-						const c1 = [shape.x, shape.y];
-						const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
-						const c3 = [shape.x, shape.y - offsetX];
-						const c4 = [shape.x - offsetX, shape.y - offsetY];
-						ctx
-							.moveTo(c1[0], c1[1])
-							.lineTo(c2[0], c2[1])
-							.lineTo(c3[0], c3[1])
-							.lineTo(c4[0], c4[1])
-							.closePath();
-					},
-				});
-
-				// 注册三个面图形
-				echarts.graphic.registerShape("CubeLeft", CubeLeft);
-				echarts.graphic.registerShape("CubeRight", CubeRight);
-				echarts.graphic.registerShape("CubeTop", CubeTop);
+		methods: {
+			init() {
 
-				this.kxOption = {
-					tooltip: {
-						trigger: 'axis',
-						backgroundColor: 'rgba(13,5,30,.6)',
-						borderWidth: 1,
-						borderColor: '#4ddd8f',
-						padding: 5,
-						textStyle: {
-							color: '#fff'
-						}
-					},
-					legend: {
-						right: 170,
-						top: 15,
-						textStyle: {
-							fontSize: 12,
-							color: '#A7BFDE'
-						},
-						itemWidth: 6,
-						itemHeight: 8
-					},
-					grid: {
-						left: '4%',
-						right: '3%',
-						top: '25%',
-						bottom: '8%',
-						containLabel: true,
-					},
-					xAxis: {
-						type: 'category',
-						data: ['3月', '4月', '5月', '6月', '7月', '8月'],
-						axisPointer: {
-							type: 'shadow'
-						},
-						axisTick: {
-							show: true,
-							length: 4,
-							lineStyle: {
-								color: 'rgba(199,211,229,0.5)'
-							}
-						},
-						axisLine: {
-							show: true,
-							lineStyle: {
-								color: 'rgba(199,211,229,0.5)'
-							}
-						},
-						axisLabel: {
-							color: '#c7d3e5'
-						}
-					},
-					yAxis: {
-						name:'（单位）',
-						type: 'value',
-						nameTextStyle: {
-							fontSize: 12,
-							color: '#C6D7F1',
-							fontWeight: 400,
-						},
-						nameGap: 25,
-						axisLine: {
-							show: false,
-							lineStyle: {
-								width: 1,
-								color: '#545454'
-							}
-						},
-						splitLine: {
-							show: true,
-							lineStyle: {
-								color: 'rgba(199,211,229,0.3)',
-								width: 1,
-								type: 'dashed'
-							}
-						},
-						axisTick: {
-							show: false
-						},
-						axisLabel: {
-							fontSize: 12,
-							color: '#c7d3e5'
-						}
-					},
-					series: [
-						{
-							name: "国内",
-							type: "custom",
-							renderItem: (params, api) => {
-								const location = api.coord([api.value(0), api.value(1)]);
-								const xAxisPoint = api.coord([api.value(0), 0]);
-								const distance = 7;
-								return {
-									type: "group",
-									children: [{
-											type: "CubeLeft",
-											shape: {
-												api,
-												xValue: api.value(0),
-												yValue: api.value(1),
-												x: location[0] + distance,
-												y: location[1],
-												xAxisPoint: [xAxisPoint[0] + distance, xAxisPoint[1]],
-											},
-											style: {
-												fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-														offset: 0,
-														color: '#0B5FA9',
-													},
-													{
-														offset: 1,
-														color: 'rgba(11,95,169,0)'
-													}
-												]),
-											},
-										},
-										{
-											type: "CubeRight",
-											shape: {
-												api,
-												xValue: api.value(0),
-												yValue: api.value(1),
-												x: location[0] + distance,
-												y: location[1],
-												xAxisPoint: [xAxisPoint[0] + distance, xAxisPoint[1]],
-											},
-											style: {
-												fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-														offset: 0,
-														color: '#088BFF',
-													},
-													{
-														offset: 1,
-														color: 'rgba(8,139,255,0)'
-													}
-												]),
-											},
-										},
-										{
-											type: "CubeTop",
-											shape: {
-												api,
-												xValue: api.value(0),
-												yValue: api.value(1),
-												x: location[0] + distance,
-												y: location[1],
-												xAxisPoint: [xAxisPoint[0] + distance, xAxisPoint[1]],
-											},
-											style: {
-												fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-														offset: 0,
-														color: '#61B5FF',
-													},
-													{
-														offset: 1,
-														color: '#61B5FF'
-													}
-												]),
-											},
-										},
-									],
-								};
-							},
-							itemStyle: {
-								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-										offset: 0,
-										color: "#00BFF4",
-									},
-									{
-										offset: 1,
-										color: "#A5E2FF",
-									},
-								]),
-							},
-							data: [410,330,210,210,480,190],
-						},
-						{
-							name: "出口",
-							type: "custom",
-							renderItem: (params, api) => {
-								const location = api.coord([api.value(0), api.value(1)]);
-								const xAxisPoint = api.coord([api.value(0), 0]);
-								const distance = 7;
-								return {
-									type: "group",
-									children: [{
-											type: "CubeLeft",
-											shape: {
-												api,
-												xValue: api.value(0),
-												yValue: api.value(1),
-												x: location[0] - distance,
-												y: location[1],
-												xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]],
-											},
-											style: {
-												fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-														offset: 0,
-														color: '#28A9A2',
-													},
-													{
-														offset: 1,
-														color: 'rgba(40,169,162,0)'
-													}
-												]),
-											},
-										},
-										{
-											type: "CubeRight",
-											shape: {
-												api,
-												xValue: api.value(0),
-												yValue: api.value(1),
-												x: location[0] - distance,
-												y: location[1],
-												xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]],
-											},
-											style: {
-												fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-														offset: 0,
-														color: '#35FFF4',
-													},
-													{
-														offset: 1,
-														color: 'rgba(53,255,244,0)'
-													}
-												]),
-											},
-										},
-										{
-											type: "CubeTop",
-											shape: {
-												api,
-												xValue: api.value(0),
-												yValue: api.value(1),
-												x: location[0] - distance,
-												y: location[1],
-												xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]],
-											},
-											style: {
-												fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-														offset: 0,
-														color: '#7EFFF8',
-													},
-													{
-														offset: 1,
-														color: '#7EFFF8'
-													}
-												]),
-											},
-										},
-									],
-								};
-							},
-							itemStyle: {
-								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-										offset: 0,
-										color: "#6AAAFF",
-									},
-									{
-										offset: 1,
-										color: "#046EFE",
-									},
-								]),
-							},
-							data: this.kxData,
-						}
-					],
-				};
-			},
-			initKxChart2(){
-				this.kxData2 = [0];
-				let data = aqiData;
-				this.kxOption2 = {
-					title: {
-						text: 'Beijing AQI',
-						left: '1%'
-					  },
-					  tooltip: {
-						trigger: 'axis'
-					  },
-					  grid: {
-						left: '10%',
-						right: '150px',
-						bottom: '20%'
-					  },
-					  xAxis: {
-						data: data.map(function (item) {
-						  return item[0];
-						})
-					  },
-					  yAxis: {},
-					  dataZoom: [
-						{
-						  startValue: '2014-06-01'
-						},
-						{
-						  type: 'inside'
-						}
-					  ],
-					  visualMap: {
-						top: 50,
-						right: 10,
-						pieces: [
-						  {
-							gt: 0,
-							lte: 50,
-							color: '#93CE07'
-						  },
-						  {
-							gt: 50,
-							lte: 100,
-							color: '#FBDB0F'
-						  },
-						  {
-							gt: 100,
-							lte: 150,
-							color: '#FC7D02'
-						  },
-						  {
-							gt: 150,
-							lte: 200,
-							color: '#FD0100'
-						  },
-						  {
-							gt: 200,
-							lte: 300,
-							color: '#AA069F'
-						  },
-						  {
-							gt: 300,
-							color: '#AC3B2A'
-						  }
-						],
-						outOfRange: {
-						  color: '#999'
-						}
-					  },
-					  series: {
-						name: 'Beijing AQI',
-						type: 'line',
-						data: data.map(function (item) {
-						  return item[1];
-						}),
-						markLine: {
-						  silent: true,
-						  lineStyle: {
-							color: '#333'
-						  },
-						  data: [
-							{
-							  yAxis: 50
-							},
-							{
-							  yAxis: 100
-							},
-							{
-							  yAxis: 150
-							},
-							{
-							  yAxis: 200
-							},
-							{
-							  yAxis: 300
-							}
-						  ]
-						}
-					  }
-				}
 			},
 		}
 	}
 </script>
 
 <style scoped lang="less">
-	.chart{
-		width: 100%;
-		height: 300px;
-		margin-top: 50px;
-		&:first-child{
-			margin-top: 0;
+	.page {
+		background-color: #E8ECF2;
+		height: 100vh;
+		box-sizing: border-box;
+
+	}
+
+	.banner {
+		img {
+			width: 100%;
+		}
+	}
+
+	.box {
+		width: calc(100% - 48rpx);
+		margin: 0 auto;
+		background-color: #fff;
+		padding: 36rpx 0;
+		border-radius: 12rpx;
+		margin-bottom: 40rpx;
+
+		.tit {
+			font-size: 32rpx;
+			color: #111;
+			padding-left: 30rpx;
+			font-weight: bold;
+			position: relative;
+			line-height: 45rpx;
+
+			&:before {
+				content: "";
+				display: block;
+				width: 12rpx;
+				height: 24rpx;
+				background-color: #1460CA;
+				position: absolute;
+				top: 11rpx;
+				left: 0;
+			}
+		}
+
+		.txt {
+			margin: 7rpx 0 20rpx;
+			line-height: 44rpx;
+			color: #666;
+			font-size: 28rpx;
+			padding: 0 30rpx;
+		}
+
+		.btn {
+			width: 318rpx;
+			height: 68rpx;
+			line-height: 68rpx;
+			color: #fff;
+			background-color: #1460CA;
+			text-align: center;
+			border-radius: 8rpx;
+			margin-left: 30rpx;
+			img{
+				width: 28rpx;
+				height: 28rpx;
+				margin-right: 20rpx;
+			}
 		}
 	}
 </style>