|
|
@@ -1,509 +1,195 @@
|
|
|
<template>
|
|
|
- <view class="page">
|
|
|
- <view class="chart" v-if="testData.length">
|
|
|
- <cusEcharts :option="testOption"></cusEcharts>
|
|
|
- </view>
|
|
|
- <view class="chart" v-if="kxData.length">
|
|
|
- <cusEcharts :option="kxOption"></cusEcharts>
|
|
|
- </view>
|
|
|
- <view class="chart" v-if="kxData2.length">
|
|
|
- <cusEcharts :option="kxOption2"></cusEcharts>
|
|
|
+ <view class="page" :style="{'height':h+'px'}">
|
|
|
+ <view class="left">
|
|
|
+ <view class="item" :class="[(index===nIndex)?'active':'',index===(nIndex+1)?'rtb':'']"
|
|
|
+ v-for="(item,index) in navList" :key="index" @click="changeType(index)">
|
|
|
+ {{item.name}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="right">
|
|
|
+ <block v-if="solutionList.length">
|
|
|
+ <u-list class="ulist" @scrolltolower="scrolltolower">
|
|
|
+ <u-list-item class="item" v-for="(item, index) in solutionList" :key="index" @click="toDetails(item)">
|
|
|
+ <view class="top">
|
|
|
+ <image :src="item.img"></image>
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ {{item.name}}
|
|
|
+ </view>
|
|
|
+ </u-list-item>
|
|
|
+ </u-list>
|
|
|
+ </block>
|
|
|
+ <block v-else></block>
|
|
|
</view>
|
|
|
<tabbar :tabbarIndex="1"></tabbar>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import * as echarts from "echarts";
|
|
|
- import aqiData from '@/static/js/aqi-beijing.js'
|
|
|
export default {
|
|
|
data(){
|
|
|
return {
|
|
|
- testData:[],
|
|
|
- testOption:null,
|
|
|
- kxData:[],
|
|
|
- kxOption:null,
|
|
|
- kxData2:[],
|
|
|
- kxOption2:null
|
|
|
+ navList:[
|
|
|
+ {name:'全部'},
|
|
|
+ {name:'智慧楼宇'},
|
|
|
+ {name:'总部园区'},
|
|
|
+ {name:'产业园区'},
|
|
|
+ {name:'工业园区'},
|
|
|
+ {name:'智慧校园'},
|
|
|
+ {name:'智慧场馆'},
|
|
|
+ {name:'公共交通'},
|
|
|
+ {name:'智慧文旅'},
|
|
|
+ {name:'城市服务'},
|
|
|
+ {name:'住宅社区'},
|
|
|
+ {name:'3D可视化'},
|
|
|
+ {name:'智慧运维'},
|
|
|
+ {name:'智慧安防'},
|
|
|
+ {name:'楼宇自控'},
|
|
|
+ {name:'能耗管理'},
|
|
|
+ {name:'智能照明'},
|
|
|
+ {name:'智慧通行'},
|
|
|
+ {name:'智能环卫'},
|
|
|
+ {name:'智慧电梯'},
|
|
|
+ {name:'应急指挥'},
|
|
|
+ {name:'资产管理'}
|
|
|
+ ],
|
|
|
+ nIndex:0,
|
|
|
+ solutionList:[],
|
|
|
+ isOver:false
|
|
|
}
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.init();
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ this.getList();
|
|
|
},
|
|
|
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);
|
|
|
-
|
|
|
- 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
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
+ changeType(index){
|
|
|
+ this.nIndex = index;
|
|
|
+ },
|
|
|
+ scrolltolower() {
|
|
|
+ if (this.isOver) return;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ getList(){
|
|
|
+ this.solutionList = [
|
|
|
+ {
|
|
|
+ img:'../../static/imgs/home_default.png',
|
|
|
+ name:'智慧园商业解决方案'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img:'../../static/imgs/home_default.png',
|
|
|
+ name:'智慧园商业解决方案'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img:'../../static/imgs/home_default.png',
|
|
|
+ name:'智慧园商业解决方案'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img:'../../static/imgs/home_default.png',
|
|
|
+ name:'智慧园商业解决方案'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img:'../../static/imgs/home_default.png',
|
|
|
+ name:'智慧园商业解决方案'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img:'../../static/imgs/home_default.png',
|
|
|
+ name:'智慧园商业解决方案'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img:'../../static/imgs/home_default.png',
|
|
|
+ name:'智慧园商业解决方案'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img:'../../static/imgs/home_default.png',
|
|
|
+ name:'智慧园商业解决方案'
|
|
|
+ }
|
|
|
+ ];
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="less">
|
|
|
- .chart{
|
|
|
- width: 100%;
|
|
|
- height: 300px;
|
|
|
- margin-top: 50px;
|
|
|
- &:first-child{
|
|
|
- margin-top: 0;
|
|
|
- }
|
|
|
+ .page{
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .left{
|
|
|
+ width: 168rpx;
|
|
|
+ height: 100%;
|
|
|
+ overflow-y: auto;
|
|
|
+ background: #F3F4F8;
|
|
|
+ .item{
|
|
|
+ width: 100%;
|
|
|
+ height: 98rpx;
|
|
|
+ background: #F3F4F8;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #9D9DA0;
|
|
|
+ line-height: 37rpx;
|
|
|
+ &.active{
|
|
|
+ background: #FFFFFF;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #1460CA;
|
|
|
+ }
|
|
|
+ &.rtb{
|
|
|
+ border-top-right-radius: 16rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .right{
|
|
|
+ width: calc(100% - 168rpx);
|
|
|
+ padding: 0 24rpx 20rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .ulist{
|
|
|
+ height: 100% !important;
|
|
|
+ ::v-deep .uni-scroll-view-content>uni-view{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-between;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ }
|
|
|
+ .item{
|
|
|
+ width: calc(50% - 13rpx);
|
|
|
+ margin-top: 20rpx;
|
|
|
+ border-radius: 12rpx 12rpx 0rpx 0rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ .top{
|
|
|
+ width: 100%;
|
|
|
+ height: 186rpx;
|
|
|
+ background: #D8D8D8;
|
|
|
+ border-radius: 12rpx 12rpx 0rpx 0rpx;
|
|
|
+ image{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 12rpx 12rpx 0rpx 0rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .text{
|
|
|
+ width: 100%;
|
|
|
+ padding: 16rpx 10rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ font-family: PingFang-SC, PingFang-SC;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #111111;
|
|
|
+ line-height: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
