diff --git a/src/assets/images/swiperLeft.png b/src/assets/images/swiperLeft.png new file mode 100644 index 0000000..57f920d Binary files /dev/null and b/src/assets/images/swiperLeft.png differ diff --git a/src/assets/images/swiperRight.png b/src/assets/images/swiperRight.png new file mode 100644 index 0000000..f680f73 Binary files /dev/null and b/src/assets/images/swiperRight.png differ diff --git a/src/assets/styles/base.css b/src/assets/styles/base.css new file mode 100644 index 0000000..be1d1f3 --- /dev/null +++ b/src/assets/styles/base.css @@ -0,0 +1,18 @@ + + +.towRowTxt { + -webkit-line-clamp: 2; + display: -webkit-box; + -webkit-box-orient: vertical; + overflow: hidden; + word-wrap: break-word; + text-overflow: ellipsis; + white-space: normal; +} + +.oneRowTxt { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + +} \ No newline at end of file diff --git a/src/assets/zlxcimgs/andriod.png b/src/assets/zlxcimgs/andriod.png new file mode 100644 index 0000000..8bb562b Binary files /dev/null and b/src/assets/zlxcimgs/andriod.png differ diff --git a/src/assets/zlxcimgs/home_image_banner@2x.png b/src/assets/zlxcimgs/home_image_banner@2x.png index c94ea72..eb73da1 100644 Binary files a/src/assets/zlxcimgs/home_image_banner@2x.png and b/src/assets/zlxcimgs/home_image_banner@2x.png differ diff --git a/src/assets/zlxcimgs/ios.png b/src/assets/zlxcimgs/ios.png new file mode 100644 index 0000000..0cf88ee Binary files /dev/null and b/src/assets/zlxcimgs/ios.png differ diff --git a/src/components/Foot.vue b/src/components/Foot.vue index 1eb5242..32ad2ad 100644 --- a/src/components/Foot.vue +++ b/src/components/Foot.vue @@ -4,15 +4,15 @@
联系我们
相关站点
diff --git a/src/components/dstributiondMap.vue b/src/components/dstributiondMap.vue index 213d7de..f29f495 100644 --- a/src/components/dstributiondMap.vue +++ b/src/components/dstributiondMap.vue @@ -22,7 +22,7 @@ import { ScatterChart } from "echarts/charts"; echarts.use([ScatterChart]); // 引入洛阳市地图数据(引入方式重点) import mapJson from "../assets/luoyang.json"; -const regions = [ +let regions = [ //对不同的区块进行着色 { name: "老城区", //区块名称 @@ -148,6 +148,9 @@ const regions = [ normal: { areaColor: "#FBE5F1", }, + emphasis: { + areaColor: "#F7F77A", + } }, }, @@ -185,63 +188,30 @@ export default { geo: { // 地图配置 show: true, - map: "hangzhou", + map: "louyang", label: { normal: { show: true, // 文字显示 + textStyle: { + color: "#333", //文字颜色 + fontSize: 12, //文字大小 + } }, emphasis: { show: false, + }, }, roam: false, itemStyle: { normal: { - borderWidth: 2, - borderColor: { - type: 'linear', - x: 0, - y: 0, - x2: 0, - y2: 2, - colorStops: [{ - offset: 0, color: 'rgba(100,100,100, 0.6)' // 0% 处的颜色 - }, { - offset: 1, color: 'rgba(242,242,242, 0.1)' // 100% 处的颜色 - }], - global: false // 缺省为 false - }, //区域边框色 - areaColor: "#F4F4F8", //区域背景色 - label: { - show: true, - textStyle: { - color: "#6495ED", //文字颜色 - fontSize: 20, //文字大小 - }, - }, + // borderWidth: 1, + borderColor: '#fff', //区域边框色 }, emphasis: { // 选中样式 borderWidth: 1, - borderColor: 'rgba(234,229,229,0.7)', - color: { - type: 'radial', - x: 0.6, - y: 0.6, - r: 1, - colorStops: [{ - offset: 0, color: '#CBCBD8' // 0% 处的颜色 - }, { - offset: 1, color: 'rgba(251,251,253, 0.4)' // 100% 处的颜色 - }], - global: false // 缺省为 false - }, - label: { - show: true, - textStyle: { - color: "#000", - }, - }, + borderColor: '#fff', }, }, regions: regions, @@ -268,7 +238,12 @@ export default { }, }, mounted() { + regions = regions.map((item)=>{ + this.$set(item.itemStyle, 'emphasis', {areaColor : '#F7F77A'}) + return item + }) this.initCharts(); + }, beforeDestroy() { if (!this.dismapchart) { @@ -299,11 +274,12 @@ export default { let mapDom = this.$refs.dismapchart; this.dismapchart = echarts.init(mapDom); //这个是关键，之前拿到的杭州各街道数据 - echarts.registerMap("hangzhou", mapJson, {}); + echarts.registerMap("louyang", mapJson, {}); let myOption = { // echarts 配置 tooltip: { trigger: "item", + }, geo: this.geo, series: [ @@ -315,7 +291,7 @@ export default { formatter: (p) => { let dataCon = p.data; let txtCon = dataCon.name; - return ""; + return txtCon+'：'+ dataCon.num; }, }, name: "", @@ -324,19 +300,17 @@ export default { symbolSize: 40, coordinateSystem: "geo", data: this.convertData(this.sanData), - // showEffectOn: "emphasis", + showEffectOn: "emphasis", rippleEffect: { brushType: "stroke", }, - emphasis: { - areaColor: "#EC9D4B", //修改移入时地图颜色 - }, + hoverAnimation: true, label: { normal: { show: true, formatter: function (params) { - return params.data["num"]; //大头针标记上显示的信息 + return params.data["num"]; //大头针标记上显示的信息 }, position: "inside", fontSize: 12, @@ -349,10 +323,6 @@ export default { normal: { color: "#FEC006", }, - emphasis: { - label: { show: true }, - areaColor: "#749f83", //修改移入时地图颜色 - }, }, }, ], @@ -362,7 +332,6 @@ export default { window.addEventListener("resize", this.dismapchart.resize); //单击事件 this.dismapchart.on("click", function (params) { - console.log("click", params); // if (params.value) { // centerPoint = params.value; // } else { diff --git a/src/components/foot.scss b/src/components/foot.scss index 502cb23..f1f38d3 100644 --- a/src/components/foot.scss +++ b/src/components/foot.scss @@ -21,6 +21,7 @@ background: #E3E3E4; border-radius: 10px; margin-right: 20px; + min-width: 400px; .caption{ font-size: 22px; font-weight: 600; diff --git a/src/components/swiper.vue b/src/components/swiper.vue index a86cbc6..752ab48 100644 --- a/src/components/swiper.vue +++ b/src/components/swiper.vue @@ -46,6 +46,21 @@
搜索
+
+
+ +
+
+
+
+
ios
+
+
+
+
andriod
+
+
+
@@ -120,18 +135,18 @@ export default { .swiper-area{ width: 100vw; min-width: 1400px; - height: 397px; + height: 571px; position: relative; top: 0; left: 0; - /deep/ .swiper-container-autoheight, .swiper-container-autoheight .swiper-slide{ - height: 397px; + /deep/ .swiper-container-autoheight, .swiper-container-autoheight .swiper-slide, .banner-item{ + height: 571px; } .swiper-search{ width: 40%; position: absolute; top: 18%; - left: 14%; + right: 10%; z-index: 999; .search-title{ display: flex; @@ -186,4 +201,53 @@ export default { } } } + + .downLoad { + display: flex; + align-items: center; + padding-top: 30px; + .qrCode { + width: 114px; + height: 114px; + padding: 6px; + background: rgba(255,255,255,0.6); + img { + display: block; + width: 100%; + height: 100%; + } + } + + .phoneType { + padding-left: 20px; + display: flex; + flex-direction: column; + justify-content: center; + .typeItem { + display: flex; + align-items: center; + // justify-content: center; + width: 106px; + height: 30px; + border-radius: 6px; + margin-bottom: 10px; + background: #fff; + .icon { + width: 20px; + height: 20px; + margin: 0 10px; + img { + display: block; + width: 100%; + height: 100%; + } + } + + .txt { + font-size: 16px; + color: #333; + } + } + } +} \ No newline at end of file diff --git a/src/components/swiperCoach.vue b/src/components/swiperCoach.vue new file mode 100644 index 0000000..b0e35e9 --- /dev/null +++ b/src/components/swiperCoach.vue @@ -0,0 +1,118 @@ + + + + + + + \ No newline at end of file diff --git a/src/components/swiperSchool.vue b/src/components/swiperSchool.vue new file mode 100644 index 0000000..9015ab9 --- /dev/null +++ b/src/components/swiperSchool.vue @@ -0,0 +1,134 @@ + + + + + + + \ No newline at end of file diff --git a/src/main.js b/src/main.js index 72afa55..c29210d 100644 --- a/src/main.js +++ b/src/main.js @@ -12,6 +12,7 @@ import 'element-ui/lib/theme-chalk/index.css' import 'swiper/dist/css/swiper.css' import directive from '@/utils/directives' import '@/assets/styles/element-variables.scss' +import '@/assets/styles/base.css' import 'normalize.css/normalize.css' import animated from 'animate.css' diff --git a/src/views/drivingMap/index.vue b/src/views/drivingMap/index.vue index 2034445..c18a944 100644 --- a/src/views/drivingMap/index.vue +++ b/src/views/drivingMap/index.vue @@ -60,7 +60,7 @@ export default { return { markers: [], map:{ - center: {lng:120.219375416, lat:30.2592444615},//'洛阳市',120.219375416,30.2592444615 + center: {lng:112.477298, lat: 34.682945},//'洛阳市', zoom: 12, width:'100vw', height:'700px' diff --git a/src/views/home/index.scss b/src/views/home/index.scss index 7d6e61e..6fb6852 100644 --- a/src/views/home/index.scss +++ b/src/views/home/index.scss @@ -39,7 +39,7 @@ position: relative; &::after{ content: ""; - width: 2px; + width: 1px; height: 59px; background: #CACACA; position: absolute; @@ -56,7 +56,7 @@ .total-info{ .info-num{ display: inline-block; - font-size: 60px; + font-size: 50px; color: #333333; margin-right: 4px; } @@ -258,38 +258,50 @@ display: flex; justify-content: space-between; align-items: center; - .list-li{ + flex-wrap: wrap; + box-sizing: border-box; + .list-li1 { + width: 50%; + padding: 26px 20px ; display: flex; - flex-direction: column; - justify-content: space-between; - width: 382px; - height: 198px; - box-shadow: -1px 1px 13px 1px rgba(50, 50, 50, 0.14); - padding: 26px 18px 28px; + align-items: center; box-sizing: border-box; - transition: all .35s ease-in; - -moz-transition: all .35s ease-in; - -webkit-transition: all .35s ease-in; - border-radius: 6px; - &:hover{ - background: #4497F8; - transform:translateY(-8px); - .li-info{ - color: #ffffff; + margin-bottom: 20px; + .li-time { + width: 83px; + height: 83px; + background: #EC9D4B; + border-radius: 50%; + font-size: 20px; + color: #fff; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + flex-shrink: 0; + .year { + } - .li-time{ - color: #ffffff; + + .date { + } } - .li-info{ - font-size: 20px; - font-weight: 500; - color: #333333; - line-height: 30px; - } - .li-time{ - font-size: 15px; - color: #999999; + + .li-info { + width: 0; + flex: 1; + padding-left: 22px; + .title { + font-size: 24px; + color: #333; + margin-bottom: 14px; + } + + .text { + font-size: 20px; + color: #999; + } } } } diff --git a/src/views/home/index.vue b/src/views/home/index.vue index 682e0fc..d6e8d95 100644 --- a/src/views/home/index.vue +++ b/src/views/home/index.vue @@ -1,6 +1,6 @@