|
|
@@ -0,0 +1,549 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <view class="status_bar"></view>
|
|
|
+ <view class="" style="position: relative;top: 40px;">
|
|
|
+ <view style="position: fixed;z-index: 100;width: 100%;">
|
|
|
+ <uni-nav-bar @clickLeft="clickLeft" left-icon="back" left-text="返回" title="设备详情"></uni-nav-bar>
|
|
|
+ </view>
|
|
|
+ <view class="info">
|
|
|
+ <view class="info_item">
|
|
|
+ <image
|
|
|
+ :src="eqinfo.item.is_online==1?$imageURL+'/bigdata_app/image/cb/onBg.png':$imageURL+'/bigdata_app/image/cb/offBg.png'"
|
|
|
+ mode="" class="bgi"></image>
|
|
|
+ <p style="font-size: 32rpx;" @click="copy(eqinfo.item)">设备
|
|
|
+ ID:{{eqinfo.item.imei}}
|
|
|
+ <image :src="$imageURL+'/bigdata_app/image/environment/fuzhi.png'" mode=""
|
|
|
+ class="tishi"></image>
|
|
|
+ </p>
|
|
|
+ <p>设备名称:{{eqinfo.item.device_name?eqinfo.item.device_name:"无"}}</p>
|
|
|
+ <p>最近上报时间:<span v-if="eqinfo.item.uptime">{{eqinfo.item.uptime|timeFormat()}}</span><span
|
|
|
+ v-else>{{eqinfo.item.addtime|timeFormat()}}</span></p>
|
|
|
+ <p>地址:{{eqinfo.item.address||"--"}}</p>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="control">
|
|
|
+ <view class="control_item" @click="control">
|
|
|
+ <image :src="$imageURL+'/bigdata_app'+'/image/environment/8.png'" mode=""></image>
|
|
|
+ <p>设备控制</p>
|
|
|
+ </view>
|
|
|
+ <view class="control_item" @click="repairs">
|
|
|
+ <image :src="$imageURL+'/bigdata_app'+'/image/environment/7.png'" mode=""></image>
|
|
|
+ <p>一键报修</p>
|
|
|
+ </view>
|
|
|
+ <view class="control_item" v-if="$QueryPermission(397)" @click="charts">
|
|
|
+ <image :src="$imageURL+'/bigdata_app'+'/image/environment/10.png'" mode=""></image>
|
|
|
+ <p>历史数据</p>
|
|
|
+ </view>
|
|
|
+ <view class="control_item" @click="siminfo(eqinfo.item.d_id)">
|
|
|
+ <image :src="$imageURL+'/bigdata_app'+'/image/cb/6.png'" mode=""></image>
|
|
|
+ <p>SIM卡信息</p>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="realtime">
|
|
|
+ <p class="realtime_title"><span>实时数据</span></p>
|
|
|
+ <view class="realtime_text">
|
|
|
+ <view class="realtime_text_item">
|
|
|
+ <view class="realtime_text_item_info" v-for="(item,index) in olddata" :key="index"
|
|
|
+ @click="oneday(index,item)">
|
|
|
+ <view class="item_info_img" :style="{'background-color':olddatas[1]}">
|
|
|
+ <image
|
|
|
+ :src="$imageURL+'/bigdata_app'+'/image/environment/icon_'+item.num+'.png'"
|
|
|
+ mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="item_info_text">
|
|
|
+ <p>{{item.name+item.unit}}</p>
|
|
|
+ <p style="margin-top: 20rpx;">
|
|
|
+ {{parseFloat(item.value) == -99.99 ?'N/A':parseFloat(item.value)}}
|
|
|
+ </p>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="realtime_tishi" v-if="realtimeTF && !dataloadingtf">
|
|
|
+ 暂无数据
|
|
|
+ </view>
|
|
|
+ <view class="realtime_tishi" v-if="dataloadingtf">
|
|
|
+ <p class="dataloading">加载中</p>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <u-modal v-model="show" :title-style="{color: 'red'}" :mask-close-able="true" title="24小时数据">
|
|
|
+ <p class="tishiTF" v-if="tishiTF">暂无24小时数据</p>
|
|
|
+ <view class="slot-content" v-else>
|
|
|
+ <canvas canvas-id="canvasColumnA" id="canvasColumnA" class="charts" @touchstart="touchLineA($event)"
|
|
|
+ @touchmove="moveLineA($event)" @touchend="touchEndLineA($event)" disable-scroll=true
|
|
|
+ :style="{'width':cWidth*pixelRatio+'px','height':cHeight*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth*(pixelRatio-1)/2+'px','margin-top':-cHeight*(pixelRatio-1)/2+'px'}"></canvas>
|
|
|
+ <view class="maxdata">
|
|
|
+ <view class="maxdata_box">
|
|
|
+ <p class="dian"></p>
|
|
|
+ <p>当天最大值:{{onedatasMax}}  {{onedatasMaxtime|timeFormat()}}</p>
|
|
|
+ </view>
|
|
|
+ <view class="maxdata_box">
|
|
|
+ <p class="dian diantwo"></p>
|
|
|
+ <p>当天最小值:{{onedatasMin}}  {{onedatasMintime|timeFormat()}}</p>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-modal>
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import uCharts from '../../components/js_sdk/u-charts/u-charts/u-charts.js';
|
|
|
+ var canvasColumnA = null;
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ eqinfo: {
|
|
|
+ item: {
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ olddata: [],
|
|
|
+ olddatas: ["#fba825", "#53d67c", "#008cf2", "#fb504d", "#d87ffc", "#4ec5f0"],
|
|
|
+ city: "",
|
|
|
+ kongtf: false,
|
|
|
+ daydatatf: false,
|
|
|
+ shujutf: false,
|
|
|
+ onedatas: [],
|
|
|
+ canvastishiTF: true,
|
|
|
+ cWidth: '300',
|
|
|
+ cHeight: '200',
|
|
|
+ pixelRatio: 1,
|
|
|
+ show: false,
|
|
|
+ onedatasMax: 0,
|
|
|
+ onedatasMin: 0,
|
|
|
+ onedatasMaxtime: "",
|
|
|
+ onedatasMintime: "",
|
|
|
+ tishiTF: false,
|
|
|
+ realtimeTF: false, //暂无数据提示
|
|
|
+ dataloadingtf: true, //加载中提示
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ clickLeft() {
|
|
|
+ uni.navigateBack({
|
|
|
+ delta: 1
|
|
|
+ })
|
|
|
+ },
|
|
|
+ async history() { //实时数据
|
|
|
+ this.dataloadingtf = true
|
|
|
+ const res = await this.$myRequest({
|
|
|
+ url: '/api/api_gateway?method=greenhouse.env_first.recent_data',
|
|
|
+ data: {
|
|
|
+ device_id: this.eqinfo.item.imei || this.eqinfo.item.equip_id
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.dataloadingtf = false
|
|
|
+ this.olddata = res.recent
|
|
|
+
|
|
|
+ this.realtimeTF = false
|
|
|
+
|
|
|
+ },
|
|
|
+ // weather.weather.qxz_data_chart 一天的数据
|
|
|
+ async onehistory() { //设备列表
|
|
|
+
|
|
|
+ var date = new Date()
|
|
|
+ var newtime = +date / 1000
|
|
|
+ // var oldtime = newtime - 24 * 60 * 60
|
|
|
+ var oldtime = Number(new Date(date.toLocaleDateString()).getTime()) / 1000;
|
|
|
+ const res = await this.$myRequest({
|
|
|
+ url: '/api/api_gateway?method=weather.weather.qxz_data_chart',
|
|
|
+ data: {
|
|
|
+ device_id: this.eqinfo.item.imei || this.eqinfo.item.device_id,
|
|
|
+ begin: parseInt(oldtime - 24 * 60 * 60),
|
|
|
+ end: parseInt(newtime - 24 * 60 * 60)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.onedatas = res.data
|
|
|
+ console.log(this.onedatas)
|
|
|
+ },
|
|
|
+ control() { //设备控制
|
|
|
+ console.log(this.eqinfo.item)
|
|
|
+ uni.navigateTo({
|
|
|
+ url: "./contros?id=" + this.eqinfo.item.d_id+'&device_type_id=38'+'&device_id='+this.eqinfo.item.imei
|
|
|
+ })
|
|
|
+ },
|
|
|
+ charts() { //历史数据
|
|
|
+ var device_id = this.eqinfo.item.imei || this.eqinfo.item.device_id
|
|
|
+ uni.navigateTo({
|
|
|
+ url: "./history-new?device_id=" + device_id+'&device_type_id=38'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ reverseGeocode(lat, lng) {
|
|
|
+ uni.request({
|
|
|
+ type: "GET",
|
|
|
+ url: "https://restapi.amap.com/v3/geocode/regeo?output=JSON&location=" + lng + "," + lat +
|
|
|
+ "&key=27273b81090f78759e4057f94474516f&radius=1000&extensions=all",
|
|
|
+ dataType: "json",
|
|
|
+ complete: ress => {
|
|
|
+ console.log(ress)
|
|
|
+ this.city = ress.data.regeocode.formatted_address
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ copy(item) {
|
|
|
+ uni.setClipboardData({
|
|
|
+ data: item.imei || item.device_id,
|
|
|
+ success: function() {
|
|
|
+ console.log('success');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ repairs() {
|
|
|
+ console.log(this.eqinfo.item)
|
|
|
+ var device_id = this.eqinfo.item.imei || this.eqinfo.item.device_id
|
|
|
+ uni.navigateTo({
|
|
|
+ url: "../afterSale/addafter?device_id=" + device_id + "&device_type=" + 38
|
|
|
+ })
|
|
|
+ },
|
|
|
+ oneday(key,item) {
|
|
|
+ // console.log(key)
|
|
|
+ var obj = {
|
|
|
+ name: item.lable=="PM255(ug/m3)"?"PM2.5(ug/m3)":item.lable,
|
|
|
+ data: [],
|
|
|
+ }
|
|
|
+ var xtitle = []
|
|
|
+ var linearr = []
|
|
|
+ var arr = []
|
|
|
+ var timearr = []
|
|
|
+ // console.log(key)
|
|
|
+ // console.log(this.olddata)
|
|
|
+ // console.log(this.onedatas)
|
|
|
+ // return
|
|
|
+ for (var i = 0; i < this.onedatas.length; i++) {
|
|
|
+ var times = new Date(this.onedatas[i].time * 1000)
|
|
|
+ // console.log(this.onedatas[i].dat[this.olddata[key].value[2]].split("#")[0])
|
|
|
+ arr.unshift(Number(this.onedatas[i].dat[this.olddata[key].value[2]].split("#")[0]))
|
|
|
+ if(times.getMinutes().toString().length>=2){
|
|
|
+ xtitle.unshift(times.getMonth() + 1 + "/" + times.getDate() + "-" + times.getHours() + ":" + times.getMinutes())
|
|
|
+ } else{
|
|
|
+ xtitle.unshift(times.getMonth() + 1 + "/" + times.getDate() + "-" + times.getHours() + ":0" + times.getMinutes())
|
|
|
+ }
|
|
|
+
|
|
|
+ timearr.unshift(+new Date(times) / 1000)
|
|
|
+ obj.data.unshift(Number(this.onedatas[i].dat[this.olddata[key].value[2]].split("#")[0]))
|
|
|
+ }
|
|
|
+ arr.sort(function(a, b) {
|
|
|
+ return a - b
|
|
|
+ })
|
|
|
+ // console.log(arr)
|
|
|
+ this.onedatasMin = arr[0]
|
|
|
+ this.onedatasMax = arr[arr.length - 1]
|
|
|
+ for (var i = 0; i < obj.data.length; i++) {
|
|
|
+ if (this.onedatasMax == obj.data[i]) {
|
|
|
+ this.onedatasMaxtime = timearr[i]
|
|
|
+ }
|
|
|
+ if (this.onedatasMin == obj.data[i]) {
|
|
|
+ this.onedatasMintime = timearr[i]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ console.log(obj)
|
|
|
+ linearr.push(obj)
|
|
|
+ if (obj.data.length == 0) {
|
|
|
+ this.tishiTF = true
|
|
|
+ } else {
|
|
|
+ this.tishiTF = false
|
|
|
+ }
|
|
|
+ console.log(xtitle)
|
|
|
+ // console.log(linearr)
|
|
|
+ // return
|
|
|
+ this.showColumn("canvasColumnA", xtitle, linearr)
|
|
|
+ this.show = true
|
|
|
+ },
|
|
|
+ showColumn(id, xtitle, xinfo) {
|
|
|
+ var _self = this
|
|
|
+ const ctx = uni.createCanvasContext(id, this);
|
|
|
+ canvasColumnA = new uCharts({
|
|
|
+ context: ctx,
|
|
|
+ type: 'line',
|
|
|
+ legend: {
|
|
|
+ position: "top"
|
|
|
+ },
|
|
|
+ fontSize: 11,
|
|
|
+ background: '#FFFFFF',
|
|
|
+ pixelRatio: 1,
|
|
|
+ animation: true,
|
|
|
+ dataLabel: false,
|
|
|
+ categories: xtitle,
|
|
|
+ series: xinfo,
|
|
|
+ enableScroll: true, //开启图表拖拽功能
|
|
|
+ xAxis: {
|
|
|
+ disableGrid: true,
|
|
|
+ type: 'grid',
|
|
|
+ gridType: 'dash',
|
|
|
+ itemCount: 4, //x轴单屏显示数据的数量,默认为5个
|
|
|
+ scrollShow: true, //新增是否显示滚动条,默认false
|
|
|
+ // scrollAlign: 'left', //滚动条初始位置
|
|
|
+ scrollBackgroundColor: '#F7F7FF', //默认为 #EFEBEF
|
|
|
+ scrollColor: '#DEE7F7', //默认为 #A6A6A6
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ format: (val) => {
|
|
|
+ return val.toFixed(2)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ width: _self.cWidth * 1,
|
|
|
+ height: _self.cHeight * 1,
|
|
|
+ extra: {
|
|
|
+ line: {
|
|
|
+ type: 'curve'
|
|
|
+ },
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ touchLineA(e) {
|
|
|
+ canvasColumnA.scrollStart(e);
|
|
|
+ },
|
|
|
+ moveLineA(e) {
|
|
|
+ canvasColumnA.scroll(e);
|
|
|
+ },
|
|
|
+ touchEndLineA(e) {
|
|
|
+ canvasColumnA.scrollEnd(e);
|
|
|
+ //下面是toolTip事件,如果滚动后不需要显示,可不填写
|
|
|
+ canvasColumnA.showToolTip(e, {
|
|
|
+ format: function(item, category) {
|
|
|
+ return category + ' ' + item.name + ':' + item.data
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ siminfo(sim) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: "/pages/prevention/sim?id=" + sim
|
|
|
+ })
|
|
|
+ },
|
|
|
+ async getbaseinfo(id) {
|
|
|
+ const res = await this.$myRequest({
|
|
|
+ url: '/api/api_gateway?method=forecast.worm_lamp.lamp_list',
|
|
|
+ data: {
|
|
|
+ device_type_id:38,
|
|
|
+ page: 1,
|
|
|
+ page_size: 10,
|
|
|
+ device_id: id,
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // console.log(res.ids.id)
|
|
|
+ this.eqinfo.item = res.data[0] || {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(option) {
|
|
|
+ this.$forceUpdate()
|
|
|
+ this.eqinfo.item = JSON.parse(option.shebei)
|
|
|
+ console.log(JSON.parse(option.shebei))
|
|
|
+ if (!this.eqinfo.item.iccid) {
|
|
|
+ this.getbaseinfo(this.eqinfo.item.equip_id)
|
|
|
+ }
|
|
|
+ this.history()
|
|
|
+ // this.onehistory()
|
|
|
+ // if (this.eqinfo.item.lat == '' || this.eqinfo.item.lng == "") {
|
|
|
+ // console.log(1)
|
|
|
+ // } else {
|
|
|
+ // this.reverseGeocode(this.eqinfo.item.lat, this.eqinfo.item.lng)
|
|
|
+ // }
|
|
|
+ // uni.getStorage({
|
|
|
+ // key: "jurisdiction",
|
|
|
+ // success: (res) => {
|
|
|
+ // console.log(JSON.parse(res.data))
|
|
|
+ // let items = JSON.parse(res.data).filter((item) => {
|
|
|
+ // return item.pur_id == 40
|
|
|
+ // })
|
|
|
+ // let items2 = items[0].children.filter((item) => {
|
|
|
+ // return item.pur_id == 41
|
|
|
+ // })
|
|
|
+ // var arr = items2[0].children
|
|
|
+ // console.log(arr)
|
|
|
+ // for (var i = 0; i < arr.length; i++) {
|
|
|
+ // switch (arr[i].pur_id) {
|
|
|
+ // case 144:
|
|
|
+ // this.kongtf = true
|
|
|
+ // break
|
|
|
+ // case 145:
|
|
|
+ // this.daydatatf = true
|
|
|
+ // break
|
|
|
+ // case 147:
|
|
|
+ // this.shujutf = true
|
|
|
+ // break
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // })
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .info {
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ top: 44px;
|
|
|
+
|
|
|
+ .info_item {
|
|
|
+ width: 90%;
|
|
|
+ margin: 0 auto;
|
|
|
+ height: 250rpx;
|
|
|
+ padding: 26rpx 50rpx;
|
|
|
+ position: relative;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .bgi {
|
|
|
+ width: 100%;
|
|
|
+ height: 250rpx;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: -1;
|
|
|
+ }
|
|
|
+
|
|
|
+ p {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+
|
|
|
+ .tishi {
|
|
|
+ width: 30rpx;
|
|
|
+ height: 30rpx;
|
|
|
+ margin: 0rpx 0 0 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .control {
|
|
|
+ width: 90%;
|
|
|
+ position: absolute;
|
|
|
+ top: 372rpx;
|
|
|
+ left: 5%;
|
|
|
+ display: flex;
|
|
|
+ text-align: center;
|
|
|
+ // padding: 0 30rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .control_item {
|
|
|
+ width: 128rpx;
|
|
|
+ height: 120rpx;
|
|
|
+ width: 33%;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 70rpx;
|
|
|
+ height: 70rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ p {
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .realtime {
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ top: 500rpx;
|
|
|
+
|
|
|
+ .realtime_title {
|
|
|
+ font-weight: 700;
|
|
|
+ width: 90%;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dataloading:after {
|
|
|
+ overflow: hidden;
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: bottom;
|
|
|
+ animation: ellipsis 2s infinite;
|
|
|
+ content: "\2026";
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes ellipsis {
|
|
|
+ from {
|
|
|
+ width: 2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ to {
|
|
|
+ width: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .realtime_tishi {
|
|
|
+ width: 90%;
|
|
|
+ margin: 0 auto;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 32rpx;
|
|
|
+ padding-top: 40rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .realtime_text {
|
|
|
+ width: 90%;
|
|
|
+ margin: 0 auto;
|
|
|
+
|
|
|
+ .realtime_text_item {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ margin-bottom: 50rpx;
|
|
|
+
|
|
|
+ .realtime_text_item_info {
|
|
|
+ width: 48%;
|
|
|
+ box-shadow: 0 0 10rpx #bcb9ca;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ display: flex;
|
|
|
+ padding: 20rpx 0rpx 20rpx 20rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .item_info_img {
|
|
|
+ width: 90rpx;
|
|
|
+ text-align: center;
|
|
|
+ margin-right: 28rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ height: 90rpx;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 64rpx;
|
|
|
+ height: 64rpx;
|
|
|
+ margin-top: 15rpx
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item_info_text {
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .charts {
|
|
|
+ // width: 650upx;
|
|
|
+ // height: 400upx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tishiTF {
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .maxdata {
|
|
|
+ font-size: 26rpx;
|
|
|
+
|
|
|
+ .maxdata_box {
|
|
|
+ display: flex;
|
|
|
+ padding-left: 30rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dian {
|
|
|
+ width: 20rpx;
|
|
|
+ height: 20rpx;
|
|
|
+ background-color: red;
|
|
|
+ margin: 8rpx 10rpx 0 0;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .diantwo {
|
|
|
+ background-color: #16c60d;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|