You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
853 lines
20 KiB
853 lines
20 KiB
<template>
|
|
<view class="content">
|
|
<!-- <view class="title">天气</view> -->
|
|
<!-- <back :info="info"></back> -->
|
|
<view class="tianqi">
|
|
<view class="view1">
|
|
<view class="view1_li view1_li1">
|
|
<text class="date">{{ date1 }}</text>
|
|
<!-- <text class="date">{{ date2 }}</text> -->
|
|
<text class="date">{{ date3 }}</text>
|
|
</view>
|
|
<view class="view1_li view1_li2">
|
|
<view class="left">
|
|
<text class="t1">{{ alldata.now.tmp }}</text>
|
|
<text class="t2">℃</text>
|
|
</view>
|
|
<view class="right">
|
|
<image class="img" :src="$gettqimg(alldata.now.cond_code)" mode=""></image>
|
|
</view>
|
|
</view>
|
|
<view class="view1_li view1_li3">
|
|
<text class="title">{{ alldata.now.cond_txt }}</text>
|
|
</view>
|
|
<view class="view1_li view1_li4">
|
|
<text class="kqzl1">空气质量：</text>
|
|
<text class="kqzl2">{{ alldata.aqi.city.aqi }}</text>
|
|
<text class="kqzl3">空气{{ alldata.aqi.city.qlty }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="viewyj" v-if="yjxx.length>0">
|
|
<view class="mintitle">气象预警</view>
|
|
<swiper :autoplay="true" :interval="3000" :duration="1000">
|
|
<swiper-item v-for="(el,ind) in yjxx">
|
|
<view class="swiper-item">{{el.content}}</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
<view class="line"></view>
|
|
<view class="view2">
|
|
<view class="mintitle">24小时天气</view>
|
|
<view class="qiun-charts">
|
|
<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" disable-scroll=true
|
|
@touchstart="touchLineA" @touchmove="moveLineA" @touchend="touchEndLineA"></canvas>
|
|
</view>
|
|
</view>
|
|
<view class="line"></view>
|
|
<view class="view3">
|
|
<ul>
|
|
<li class="view3_li" v-for="(el, index) in view3data">
|
|
<view class="view3_libox">
|
|
<view class="l1">{{el.date}}</view>
|
|
<view class="l2">{{el.title}}</view>
|
|
<view class="l3">
|
|
<image class="img" :src="$gettqimg(el.img)" mode=""></image>
|
|
</view>
|
|
<view class="l4">{{el.wind_dir}}</view>
|
|
<view class="l5">{{el.wind_sc}}</view>
|
|
</view>
|
|
</li>
|
|
</ul>
|
|
<view class="qiun-charts2">
|
|
<canvas canvas-id="canvasLineA2" id="canvasLineA2" class="charts"
|
|
@touchstart="touchLineA2"></canvas>
|
|
</view>
|
|
</view>
|
|
<view class="line"></view>
|
|
<view class="view4">
|
|
<ul>
|
|
<li class="view4_li" v-for="(el, index) in view4data">
|
|
<view class="view4_libox">
|
|
<view class="view4_li_l">
|
|
<image class="img" :src="getImg1(el.img)" mode=""></image>
|
|
</view>
|
|
<view class="view4_li_r">
|
|
<view class="v1">{{ el.name }}</view>
|
|
<view class="v2">{{ el.data }}</view>
|
|
</view>
|
|
</view>
|
|
</li>
|
|
</ul>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<tabBar :info="infos"></tabBar>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import back from '@/components/html/back.vue';
|
|
import tabBar from '@/components/html/tabBar.vue';
|
|
var web = require('@/components/utils/request.js');
|
|
var util = require('@/components/utils/util.js');
|
|
import uCharts from '@/js_sdk/u-charts/u-charts/u-charts.js';
|
|
|
|
var _self;
|
|
var canvaPie = null;
|
|
var color = ['#00DB77', '#FF9024', '#FF4824'];
|
|
var zcolor = ['#22A86C', '#E68320', '#E64120'];
|
|
var canvaLineA = null;
|
|
var canvaLineA2 = null;
|
|
export default {
|
|
components: {
|
|
tabBar,
|
|
back
|
|
},
|
|
data() {
|
|
return {
|
|
info: {
|
|
color: false,
|
|
num: false
|
|
},
|
|
infos: {
|
|
ind: 0,
|
|
color: false
|
|
},
|
|
nowDate: '',
|
|
jqdatas: [],
|
|
kcj: 0,
|
|
kcc: 0,
|
|
jcj: 0,
|
|
jcc: 0,
|
|
hcj: 0,
|
|
hcc: 0,
|
|
// 天气
|
|
alldata: {
|
|
now: {
|
|
cond_code: "",
|
|
cond_txt: "",
|
|
tmp: "",
|
|
wind_dir: "",
|
|
wind_sc: ""
|
|
},
|
|
aqi: {
|
|
city: ''
|
|
}
|
|
},
|
|
data: {},
|
|
nowdate: '',
|
|
date1: '',
|
|
date2: '',
|
|
date3: '',
|
|
view3data: [],
|
|
view4data: [{
|
|
name: '风力等级',
|
|
img: 'tq-icon3.png',
|
|
data: ''
|
|
},
|
|
{
|
|
name: 'PM2.5',
|
|
img: 'tq-icon1.png',
|
|
data: ''
|
|
},
|
|
{
|
|
name: '湿度',
|
|
img: 'tq-icon6.png',
|
|
data: ''
|
|
},
|
|
{
|
|
name: '气压',
|
|
img: 'tq-icon5.png',
|
|
data: ''
|
|
},
|
|
{
|
|
name: '出游',
|
|
img: 'tq-icon2.png',
|
|
data: ''
|
|
},
|
|
{
|
|
name: '空气污染扩散',
|
|
img: 'tq-icon4.png',
|
|
data: ''
|
|
}
|
|
],
|
|
cWidth: '',
|
|
cHeight: '',
|
|
pixelRatio: 1,
|
|
cWidth2: '',
|
|
cHeight2: '',
|
|
pixelRatio2: 1,
|
|
yjxx: []
|
|
}
|
|
},
|
|
onLoad() {
|
|
var date = new Date();
|
|
this.nowDate = date.getFullYear() + "-" + ((date.getMonth() + 1) < 10 ? "0" + (date.getMonth() + 1) : (date
|
|
.getMonth() + 1)) + "-" + (date.getDate() < 10 ? "0" + date.getDate() : date.getDate());
|
|
this.getData3();
|
|
this.getData4();
|
|
_self = this;
|
|
// uni.upx2px(750) 这是uni-app自带的自适应，以750的尺寸为基准。动态变化
|
|
this.cWidth = uni.upx2px(750);
|
|
this.cHeight = uni.upx2px(250);
|
|
this.cWidth2 = uni.upx2px(750);
|
|
this.cHeight2 = uni.upx2px(170);
|
|
this.getWeather();
|
|
},
|
|
onPageScroll(e) {
|
|
if (e.scrollTop > 50 && !this.info.num) {
|
|
this.info.num = true;
|
|
}
|
|
if (e.scrollTop < 50 && this.info.num) {
|
|
this.info.num = false;
|
|
}
|
|
},
|
|
methods: {
|
|
|
|
// 天气
|
|
getNowdata(nowdate) {
|
|
var url = 'weatherInfo/day_data.jspx';
|
|
var para = {
|
|
time: nowdate
|
|
};
|
|
var that = this;
|
|
web.httpPost(that, url, para, function(res) {
|
|
console.log(res.data.data)
|
|
let LineA = {
|
|
categories: [],
|
|
series: []
|
|
};
|
|
//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
|
|
// 自己可以定义数据
|
|
LineA.categories = [];
|
|
LineA.series = [{
|
|
name: "气温",
|
|
data: [],
|
|
color: '#409eff'
|
|
}];
|
|
for (var i = 0; i < res.data.data.length; i++) {
|
|
LineA.categories.push(res.data.data[i].time + ':00')
|
|
LineA.series[0].data.push(parseInt(res.data.data[i].now))
|
|
}
|
|
|
|
// LineA.categories=['00:00','01:00','02:00','03:00','04:00','05:00'];
|
|
// LineA.series=[{
|
|
// name:"南京",
|
|
// data:[12,15,10,18,6,13],
|
|
// color:'#409eff'
|
|
// }];
|
|
// LineA.categories=res.data.data.LineA.categories;
|
|
// LineA.series=res.data.data.LineA.series;
|
|
// 找到id为canvasLineA的块
|
|
that.showLineA("canvasLineA", LineA);
|
|
|
|
});
|
|
},
|
|
getWeather() {
|
|
var url = '/weatherInfo/getWeatherInfo.jspx';
|
|
var para = {};
|
|
var that = this;
|
|
web.httpPost(that, url, para, function(res) {
|
|
if (res.data.status == 200) {
|
|
that.alldata = res.data.allData.HeWeather6[0];
|
|
that.data = res.data.data;
|
|
|
|
that.date1 = that.data.date.substr(5, 2) + '月' + that.data.date.substr(8, 2) + '日';
|
|
that.view4data[0].data = that.alldata.now.wind_sc + '级';
|
|
that.view4data[1].data = that.alldata.aqi.city.pm25 + ' ug/m3';
|
|
that.view4data[2].data = that.alldata.now.hum + '%';
|
|
that.view4data[3].data = that.alldata.now.wind_sc + ' hPa';
|
|
that.view4data[4].data = that.alldata.aqi.city.qlty;
|
|
that.view4data[5].data = that.alldata.aqi.city.aqi;
|
|
|
|
console.log(that.data.date);
|
|
// var lunarDate = util.getLunarDate(that.data.date);
|
|
// var lunarDateString = util.getLunarDateString(lunarDate);
|
|
// that.date2 = '农历' + lunarDateString.month + '月' + lunarDateString.day;
|
|
// var textnl = util.getLunarDate('2021-09-03');
|
|
// console.log(textnl);
|
|
|
|
var date = new Date();
|
|
var week = web.getWeek(date);
|
|
that.date3 = week;
|
|
|
|
that.getNowdata(that.data.date);
|
|
that.view3data = [];
|
|
for (var i = 0; i < that.alldata.daily_forecast.length; i++) {
|
|
that.view3data.push({
|
|
date: that.alldata.daily_forecast[i].date.substr(5, 2) + '/' + that.alldata
|
|
.daily_forecast[i].date.substr(8, 2),
|
|
img: that.alldata.daily_forecast[i].cond_code_n,
|
|
title: that.alldata.daily_forecast[i].cond_txt_n,
|
|
wind_dir: that.alldata.daily_forecast[i].wind_dir,
|
|
wind_sc: that.alldata.daily_forecast[i].wind_sc
|
|
});
|
|
}
|
|
let LineA2 = {
|
|
categories: [],
|
|
series: []
|
|
};
|
|
// 自己可以定义数据
|
|
LineA2.series = [{
|
|
name: "最高",
|
|
data: [],
|
|
color: '#ff0000'
|
|
}, {
|
|
name: "最低",
|
|
data: [],
|
|
color: '#409eff'
|
|
}];
|
|
for (var i = 0; i < that.alldata.daily_forecast.length; i++) {
|
|
LineA2.categories.push('')
|
|
LineA2.series[0].data.push(that.alldata.daily_forecast[i].tmp_max);
|
|
LineA2.series[1].data.push(that.alldata.daily_forecast[i].tmp_min);
|
|
}
|
|
that.showLineA2("canvasLineA2", LineA2);
|
|
|
|
}
|
|
});
|
|
},
|
|
|
|
getImg1(url) {
|
|
return 'https://cs.tour-ma.com/r/cms/www/m/changshu/' + url;
|
|
},
|
|
|
|
// 展示图标的函数 接收参数，一个块的id,一个数据
|
|
showLineA(canvasId, chartData) {
|
|
canvaLineA = new uCharts({
|
|
$this: _self,
|
|
canvasId: canvasId,
|
|
// 图标类型
|
|
type: 'line',
|
|
fontSize: 11,
|
|
padding: [20, 25, 4, 5],
|
|
legend: {
|
|
show: false
|
|
},
|
|
dataLabel: true,
|
|
dataPointShape: true,
|
|
background: '#F6F6F6',
|
|
pixelRatio: _self.pixelRatio,
|
|
categories: chartData.categories,
|
|
series: chartData.series,
|
|
animation: true,
|
|
enableScroll: true, //开启图表拖拽功能
|
|
// x轴显示的内容
|
|
xAxis: {
|
|
type: 'grid',
|
|
disableGrid: true,
|
|
gridColor: '#CCCCCC',
|
|
gridType: 'dash',
|
|
dashLength: 8,
|
|
itemCount: 6, //x轴单屏显示数据的数量，默认为5个
|
|
scrollShow: true, //新增是否显示滚动条，默认false
|
|
scrollAlign: 'left', //滚动条初始位置
|
|
scrollBackgroundColor: '#F7F7FF', //默认为 #EFEBEF
|
|
scrollColor: '#DEE7F7', //默认为 #A6A6A6
|
|
},
|
|
// y轴显示的内容
|
|
yAxis: {
|
|
gridType: 'dash',
|
|
disableGrid: true,
|
|
gridColor: '#CCCCCC',
|
|
dashLength: 8,
|
|
splitNumber: 5,
|
|
format: val => {
|
|
return val.toFixed(0) + '℃';
|
|
}
|
|
},
|
|
width: _self.cWidth * _self.pixelRatio,
|
|
height: _self.cHeight * _self.pixelRatio,
|
|
extra: {
|
|
line: {
|
|
type: 'straight'
|
|
}
|
|
}
|
|
});
|
|
},
|
|
showLineA2(canvasId, chartData) {
|
|
canvaLineA2 = new uCharts({
|
|
$this: _self,
|
|
canvasId: canvasId,
|
|
// 图标类型
|
|
type: 'line',
|
|
fontSize: 11,
|
|
padding: [20, 35, 0, 0],
|
|
legend: {
|
|
show: false
|
|
},
|
|
dataLabel: true,
|
|
dataPointShape: true,
|
|
background: '#F6F6F6',
|
|
pixelRatio: _self.pixelRatio2,
|
|
categories: chartData.categories,
|
|
series: chartData.series,
|
|
animation: true,
|
|
// x轴显示的内容
|
|
xAxis: {
|
|
disabled: true,
|
|
disableGrid: true,
|
|
},
|
|
// y轴显示的内容
|
|
yAxis: {
|
|
disableGrid: true,
|
|
disabled: true,
|
|
},
|
|
width: _self.cWidth2 * _self.pixelRatio2,
|
|
height: _self.cHeight2 * _self.pixelRatio2,
|
|
extra: {
|
|
line: {
|
|
type: 'straight'
|
|
}
|
|
}
|
|
});
|
|
},
|
|
// 点击图表显示的内容
|
|
touchLineA(e) {
|
|
canvaLineA.scrollStart(e);
|
|
// 使用声明的变量canvaLineA
|
|
canvaLineA.showToolTip(e, {
|
|
format: function(item, category) {
|
|
return category + ' ' + item.name + ':' + item.data;
|
|
}
|
|
});
|
|
},
|
|
touchLineA2(e) {
|
|
// 使用声明的变量canvaLineA
|
|
canvaLineA2.showToolTip(e, {
|
|
format: function(item, category) {
|
|
return category + ' ' + item.name + ':' + item.data;
|
|
}
|
|
});
|
|
},
|
|
moveLineA(e) {
|
|
canvaLineA.scroll(e);
|
|
},
|
|
touchEndLineA(e) {
|
|
canvaLineA.scrollEnd(e);
|
|
},
|
|
getData3() {
|
|
var url = '/tours/commonMethod.jspx';
|
|
var para = {
|
|
url: "http://gk.dtly.cn/hk/getByCarType.jspx",
|
|
time: this.nowDate,
|
|
state: 1
|
|
};
|
|
var that = this;
|
|
web.httpPost(that, url, para, function(res) {
|
|
if (res.data.status == 200) {
|
|
for (var i = 0; i < res.data.data.length; i++) {
|
|
if (res.data.data[i].carType == 1 || res.data.data[i].carType == 10 || res.data.data[i]
|
|
.carType == 26) {
|
|
that.kcj += res.data.data[i].count;
|
|
} else if (res.data.data[i].carType == 3 || res.data.data[i].carType == 4 || res.data
|
|
.data[i].carType == 9 || res.data.data[i].carType == 13 || res.data.data[i]
|
|
.carType == 14 || res.data.data[i].carType == 23 || res.data.data[i].carType ==
|
|
24 || res.data.data[i].carType == 35) {
|
|
that.jcj += res.data.data[i].count;
|
|
} else if (res.data.data[i].carType == 2 || res.data.data[i].carType == 5 || res.data
|
|
.data[i].carType == 15 || res.data.data[i].carType == 16 || res.data.data[i]
|
|
.carType == 17) {
|
|
that.hcj += res.data.data[i].count;
|
|
}
|
|
}
|
|
} else {
|
|
uni.showToast({
|
|
title: '查询失败'
|
|
});
|
|
}
|
|
});
|
|
},
|
|
getData4() {
|
|
var url = '/tours/commonMethod.jspx';
|
|
var para = {
|
|
url: "http://gk.dtly.cn/hk/getByCarType.jspx",
|
|
time: this.nowDate,
|
|
state: 2
|
|
};
|
|
var that = this;
|
|
web.httpPost(that, url, para, function(res) {
|
|
if (res.data.status == 200) {
|
|
for (var i = 0; i < res.data.data.length; i++) {
|
|
if (res.data.data[i].carType == 1 || res.data.data[i].carType == 10 || res.data.data[i]
|
|
.carType == 26) {
|
|
that.kcc += res.data.data[i].count;
|
|
} else if (res.data.data[i].carType == 3 || res.data.data[i].carType == 4 || res.data
|
|
.data[i].carType == 9 || res.data.data[i].carType == 13 || res.data.data[i]
|
|
.carType == 14 || res.data.data[i].carType == 23 || res.data.data[i].carType ==
|
|
24 || res.data.data[i].carType == 35) {
|
|
that.jcc += res.data.data[i].count;
|
|
} else if (res.data.data[i].carType == 2 || res.data.data[i].carType == 5 || res.data
|
|
.data[i].carType == 15 || res.data.data[i].carType == 16 || res.data.data[i]
|
|
.carType == 17) {
|
|
that.hcc += res.data.data[i].count;
|
|
}
|
|
}
|
|
} else {
|
|
uni.showToast({
|
|
title: '查询失败'
|
|
});
|
|
}
|
|
});
|
|
},
|
|
getImg(url) {
|
|
return 'https://cs.tour-ma.com/r/cms/www/m/changshu/' + url
|
|
},
|
|
showPie(canvasId, chartData) {
|
|
new uCharts({
|
|
$this: _self,
|
|
canvasId: canvasId,
|
|
type: 'arcbar',
|
|
fontSize: 11,
|
|
legend: {
|
|
show: false
|
|
},
|
|
background: '#FFFFFF',
|
|
pixelRatio: 1,
|
|
series: chartData.series,
|
|
colors: chartData.series[0].data < 40 ? [color[0]] : chartData.series[0].data < 70 ? [color[
|
|
1]] : [color[2]],
|
|
animation: true,
|
|
width: 120,
|
|
height: 120,
|
|
dataLabel: true,
|
|
title: {
|
|
name: Math.round(chartData.series[0].data * 100) + '%', //这里我自动计算了，您可以直接给任意字符串
|
|
color: chartData.series[0].data < 40 ? color[0] : chartData.series[0].data < 70 ? color[
|
|
1] : color[2],
|
|
fontSize: 18,
|
|
offsetY: -2
|
|
},
|
|
subtitle: {
|
|
name: chartData.series[0].name, //这里您可以直接给任意字符串
|
|
color: chartData.series[0].data < 40 ? zcolor[0] : chartData.series[0].data < 70 ? zcolor[
|
|
1] : zcolor[2],
|
|
fontSize: 15,
|
|
offsetY: 2
|
|
},
|
|
extra: {
|
|
arcbar: {
|
|
type: 'circle', //整圆类型进度条图
|
|
width: 10, //圆弧的宽度
|
|
startAngle: 1.5, //整圆类型只需配置起始角度即可
|
|
backgroundColor: '#EFF3F7'
|
|
}
|
|
}
|
|
});
|
|
},
|
|
touchPie(e) {
|
|
canvaPie.showToolTip(e, {
|
|
format: function(item) {
|
|
return item.name + ':' + item.data
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
$twidth:702upx;
|
|
$klwidth:622upx;
|
|
$klheight:250upx;
|
|
$right:200upx;
|
|
$rheight:210upx;
|
|
|
|
swiper {}
|
|
|
|
.swiper-item {
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 24rpx;
|
|
color: #666666;
|
|
}
|
|
|
|
.viewyj {
|
|
width: 90%;
|
|
padding: 0% 5% 0% 5%;
|
|
|
|
.mintitle {
|
|
color: #333333;
|
|
font-size: 30rpx;
|
|
font-weight: 600;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 15rpx;
|
|
}
|
|
|
|
.mintitle::before {
|
|
content: '';
|
|
display: inline-block;
|
|
width: 36rpx;
|
|
height: 32rpx;
|
|
background: url(https://cs.tour-ma.com/r/cms/www/m/changshu/icon-qxyj.png) no-repeat;
|
|
background-size: 100% auto;
|
|
margin-right: 5rpx;
|
|
}
|
|
}
|
|
|
|
.title {
|
|
font-size: 50upx;
|
|
font-family: Microsoft YaHei;
|
|
font-weight: 600;
|
|
color: #230F00;
|
|
line-height: 56upx;
|
|
width: $twidth;
|
|
margin-top: 60upx;
|
|
margin-bottom: 50upx;
|
|
}
|
|
|
|
.content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
background: #F6F6F6;
|
|
padding-bottom: 100upx;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
|
|
.tianqi {
|
|
.view1 {
|
|
width: 100%;
|
|
background: url(https://cs.tour-ma.com/r/cms/www/m/changshu/tq-view1-bg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
object-fit: cover;
|
|
height: 360rpx;
|
|
padding-top: 140rpx;
|
|
padding-bottom: 40rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.view1_li {
|
|
padding-left: 60rpx;
|
|
padding-right: 60rpx;
|
|
}
|
|
|
|
.view1_li1 .date {
|
|
margin-right: 30rpx;
|
|
color: #666666;
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.view1_li2 {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.view1_li2 .left {
|
|
color: #000000;
|
|
}
|
|
|
|
.view1_li2 .left .t1 {
|
|
font-size: 100rpx;
|
|
}
|
|
|
|
.view1_li2 .left .t2 {
|
|
font-size: 60rpx;
|
|
}
|
|
|
|
.view1_li2 .right {
|
|
width: 148rpx;
|
|
height: 148rpx;
|
|
}
|
|
|
|
.view1_li2 .right .img {
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
}
|
|
|
|
.view1_li3 .title {
|
|
color: #666666;
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.view1_li4 .kqzl1 {
|
|
margin-right: 15rpx;
|
|
color: #666666;
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.view1_li4 .kqzl1::before {
|
|
content: '';
|
|
display: inline-block;
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
background: url(https://cs.tour-ma.com/r/cms/www/m/changshu/tq-icon-kqzl.png) no-repeat;
|
|
background-size: 100% auto;
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
.view1_li4 .kqzl2 {
|
|
margin-right: 30rpx;
|
|
color: #666666;
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.view1_li4 .kqzl3 {
|
|
margin-right: 30rpx;
|
|
color: #11b954;
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.view4 {
|
|
width: calc(100% - 50rpx);
|
|
padding: 40rpx 25rpx;
|
|
}
|
|
|
|
.view4 .view4_li {
|
|
width: 50%;
|
|
display: inline-block;
|
|
}
|
|
|
|
.view4 .view4_li .view4_libox {
|
|
display: flex;
|
|
justify-content: start;
|
|
align-items: center;
|
|
border-bottom: 1rpx solid #ebebeb;
|
|
border-right: 1rpx solid #ebebeb;
|
|
padding: 30rpx 0;
|
|
}
|
|
|
|
.view4 .view4_li:nth-last-child(1) .view4_libox,
|
|
.view4 .view4_li:nth-last-child(2) .view4_libox {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.view4 .view4_li:nth-child(2n) .view4_libox {
|
|
border-right: none;
|
|
}
|
|
|
|
.view4_li .view4_li_l {
|
|
width: 72rpx;
|
|
height: 72rpx;
|
|
padding-left: 40rpx;
|
|
padding-right: 25rpx;
|
|
}
|
|
|
|
.view4_li .view4_li_l .img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.view4_li .view4_li_r {}
|
|
|
|
.view4_li .view4_li_r .v1 {
|
|
color: #a0a0a0;
|
|
font-size: 27rpx;
|
|
}
|
|
|
|
.view4_li .view4_li_r .v2 {
|
|
color: #333333;
|
|
font-size: 27rpx;
|
|
}
|
|
|
|
.view2 {
|
|
width: 90%;
|
|
padding: 0% 5% 5% 5%;
|
|
}
|
|
|
|
.view2 .mintitle {
|
|
color: #333333;
|
|
font-size: 30rpx;
|
|
font-weight: 600;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.view2 .mintitle::before {
|
|
content: '';
|
|
display: inline-block;
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
background: url(https://cs.tour-ma.com/r/cms/www/m/changshu/icon-24h.png) no-repeat;
|
|
background-size: 100% auto;
|
|
margin-right: 5rpx;
|
|
}
|
|
|
|
.view3 {
|
|
padding: 2.5% 5%;
|
|
position: relative;
|
|
}
|
|
|
|
.view3 ul {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.view3 ul li.view3_li {
|
|
margin: 0 10rpx;
|
|
}
|
|
|
|
.view3 ul li.view3_li .view3_libox {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.view3_libox .l1 {
|
|
color: #515151;
|
|
font-size: 25rpx;
|
|
}
|
|
|
|
.view3_libox .l2 {
|
|
color: #515151;
|
|
font-size: 25rpx;
|
|
}
|
|
|
|
.view3_libox .l3 {
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
}
|
|
|
|
.view3_libox .l3 .img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.view3_libox .l4 {
|
|
color: #515151;
|
|
font-size: 25rpx;
|
|
margin-top: 170rpx;
|
|
}
|
|
|
|
.view3_libox .l5 {
|
|
color: #A2A2A2;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
|
|
.qiun-charts {
|
|
width: 100%;
|
|
height: 250rpx;
|
|
// background-color: #FFFFFF;
|
|
}
|
|
|
|
.qiun-charts2 {
|
|
width: 90%;
|
|
height: 170rpx;
|
|
// background-color: #FFFFFF;
|
|
position: absolute;
|
|
top: 150rpx;
|
|
left: 5%;
|
|
}
|
|
|
|
.charts {
|
|
width: 100%;
|
|
height: 100%;
|
|
// background-color: #FFFFFF;
|
|
}
|
|
|
|
.line {
|
|
width: 100%;
|
|
height: 23rpx;
|
|
background-color: #f6f6f6;
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|
|
|