# 9.3 曲线图

<template>
  <div class="wrapper">
    <dof-minibar title="9.3 曲线图" @click.native="reloadPage"></dof-minibar>
    <SwitchTheme />

    <scroller class="scroller">
      <div class="title-box">
        <text class="title-text">基础样式</text>
      </div>
      <div class="barchart-wrapper">
        <div class="space"></div>
        <midea-linechart-view class="line-chart" :data="chartData0"></midea-linechart-view>
      </div>
      <div class="barchart-wrapper">
        <div class="space"></div>
        <midea-linechart-view class="line-chart" :data="chartData1"></midea-linechart-view>
      </div>
      <div class="barchart-wrapper last-wrapper">
        <div class="legend-box">
          <div class="legend">
            <div class="legend-img">
              <dof-iconfont :code="'\u4741'" :size="50" :color="'#fff'"></dof-iconfont>
            </div>
            <div class="legend-text">
              <text class="legend-num">0.4度</text>
              <text class="legend-sub">近一个月用电</text>
            </div>
          </div>
          <div class="legend">
            <div class="legend-img">
              <dof-iconfont :code="'\u4802'" :size="50" :color="'#fff'"></dof-iconfont>
            </div>
            <div class="legend-text">
              <text class="legend-num">56度</text>
              <text class="legend-sub">仅一个月用水</text>
            </div>
          </div>
        </div>

        <midea-linechart-view class="line-chart" :data="chartData2"></midea-linechart-view>
      </div>
    </scroller>
  </div>
</template>

<script>
// [1，30]区间的数字value
const nums = function() {
  let arr = []
  for (let i = 1; i <= 30; i++) {
    arr.push(i)
  }
  return arr
}

// 生成值为1-30字符串的labels
const labels = function() {
  let arr = []
  for (let i = 1; i <= 30; i++) {
    if (i === 2 || i === 10) {
      arr.push(i + '')
    } else {
      arr.push('')
    }
  }
  return arr
}

//随机生成[30,40]随机数
const randomNum = function() {
  let arr = []
  for (let i = 0; i < 30; i++) {
    var random = Math.floor(Math.random() * 10 + 30)
    arr.push(random)
  }
  return arr
}
const lowRandomNum = randomNum().map(x => x - 10)
console.log('num', randomNum())
console.log('lowRandomNum', lowRandomNum)
const isIos = weex.config.env.platform == 'iOS' ? true : false

import { DofMinibar, DofIconfont } from 'dolphin-weex-ui'
import SwitchTheme from 'src/components/SwitchTheme.vue'

export default {
  components: { DofMinibar, SwitchTheme, DofIconfont },
  data() {
    return {
      chartData0: {
        x: {
          value: [1, 2, 3, 4, 5, 6, 7],
          label: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        y: [
          {
            value: [25, 30, 28, 40, 45, 35, 50],
            title: '用水量',
            color: '#E7704C', //折线颜色
            starcolor: '#00E7704C', //区域背景渐变开始颜色（从下自上）
            endcolor: '#ccE7704C', //区域背景渐变结束颜色（从下自上）
            smooth: 1, //0直线，1平滑
            lineWidth: 1, //折线宽度
            //竖线
            drawVerticalHighlightIndicatorEnabled: true, //默认false 是否绘制高亮时的竖线，默认不显示 6.5.1支持
            highlightColor: '#8E969B', //竖线的颜色 6.5.1支持
            highlightLineWidth: 1, //竖线的宽度 默认0.5 6.5.1支持
            highlightLineDashLengths: [2, 3] //第一位代表实线宽度，第二位代表虚线的宽度6.5.1支持
          },
          {
            value: [2, 3, 2, 3, 4, 2, 4],
            title: '用电量',
            color: '#D7D7D7', //折线颜色
            starcolor: '#00ffffff', //区域背景渐变开始颜色（从下自上）
            endcolor: '#ccffffff', //区域背景渐变结束颜色（从下自上）
            smooth: 1, //0直线，1平滑
            lineWidth: 1, //折线宽度
            axisDependency: 'right', //依赖的坐标轴。默认对齐left , 设置right 才会生效变化

            //竖线
            drawVerticalHighlightIndicatorEnabled: true, //默认false 是否绘制高亮时的竖线，默认不显示 6.5.1支持
            highlightColor: '#8E969B', //竖线的颜色 6.5.1支持
            highlightLineWidth: 1, //竖线的宽度 默认0.5 6.5.1支持
            highlightLineDashLengths: [2, 3] //第一位代表实线宽度，第二位代表虚线的宽度6.5.1支持
          }
        ],
        xAxisColor: '#1affffff', //x轴线的颜色，如果不设置，则默认是黑色线
        yAxisGridAlpha: 0.1, //y轴上分割线透明度,安卓分割线的颜色不支持透明度，需要设置该属性
        yAxisColor: '#00ffffff', //y轴线的颜色，如果不设置，则默认是黑色线
        xAxisLabelColor: '#66ffffff', //x label的字体颜色，如果不设置，则默认是黑色字体颜色
        yAxisLabelColor: '#66ffffff', //y label的字体颜色，如果不设置，则默认是黑色字体颜色
        xAxisGridLine: false, //iOS上默认关闭 设置是否开启X轴分割线绘制
        yAxisGridLine: true, //iOS上默认关闭 设置是否开启X轴分割线绘制   add by lau
        xAxisGridColor: '#1affffff', //x轴上分割线颜色
        yAxisGridColor: '#1affffff', //y轴上分割线颜色   add by lau
        xAxisLabelTextSize: 10, //x轴文字大小
        yRightAxisColor: '#00ffffff', //右y轴线的颜色
        yRightAxisLabelColor: '#66ffffff', // label的字体颜色，如果不设置，则默认是黑色字体颜色
        yAxisLabelTextSize: 10, //y轴文字大小
        xAxisGridAlpha: 1, //x轴上分割线透明度
        yAxisLabelShow: true, //是否只显示最大最小值，true: 显示y轴值；false: 不显示y轴值；默认true
        isUnEquelDistance: true, //iOS6.2新增不等距属性，默认打开（iOS专用）false关闭
        granularity: 1, //间距本身是自适应的，可以使用该值进行调整间距的比例，比如自适应间距是20px，granularity设置为2的时候，界面显示的间距为 40px
        description: '',
        xAxisYOffset: 11, //x轴文字和x轴的距离
        yGraduationLabel: '升',
        yRightAxisEnable: true, //是否显示右y轴
        yRightAxisMaximum: 5, //右y轴刻度最大值
        yRightGraduationLabel: '度', //右y轴刻度单位
        legend: {
          position: 'TOP_RIGHT', //"TOP_LEFT"/"TOP_RIGHT"
          orientation: 'HORIZONTAL', //"HORIZONTAL"/"BOTTOM_RIGHT"
          textColor: '#66ffffff', //图例文字颜色（8.7）
          textSize: 10, //图例文字大小（8.7）
          xOffset: 10, //图例水平间距（8.7）
          form: 'LINE', //图例类型NONE, EMPTY, SQUARE, CIRCLE, LINE（8.7）
          formSize: 10, //图例大小（8.7）
          formLineWidth: 1, //图例线宽大小（8.7）
          space: 16 //图例之间的间距（8.7）
        },
        unit: {
          x: '',
          y: '七天日志'
        },
        extraTopOffset: 20, //顶部padding(8.7)
        extraLeftOffset: 16, //左边padding(8.7)
        extraRightOffset: 16, //右边padding(8.7)
        extraBottomOffset: 20 //底部padding(8.7)
      },
      chartData1: {
        x: {
          value: [1, 2, 3, 4, 5, 6, 7],
          label: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        y: [
          {
            value: [25, 30, 28, 40, 45, 35, 50],
            title: '用水量',
            color: '#E7704C', //折线颜色
            starcolor: '#00E7704C', //区域背景渐变开始颜色（从下自上）
            endcolor: '#E7704C', //区域背景渐变结束颜色（从下自上）
            smooth: 1, //0直线，1平滑
            lineWidth: 1, //折线宽度

            isDrawHighLightCircles: true, //是否启动 点击高亮 （5.12）
            highLightCircleRadius: 8, // 高亮的圆圈半径设置（5.12）
            highLightCircleHoleRadius: 3.5, // 高亮的圆内半径设置（5.12）
            highLightCircleOutsideWidth: 0, // 高亮的圆外宽度设置（5.12）
            highLightCircleColor: '#80B35336', // 高亮的圆圈颜色（5.12）
            highLightCircleHoleColor: '#B35336', // 高亮的圆内颜色（5.12）
            highLightCircleOutsideColor: '#00B35336', // 高亮的圆外颜色设置（5.12）

            isVerticalHighlightIndicatorEnabled: true, //垂直高亮线是否显示，默认不显示（8.7）
            highLightColor: '#33ffffff', //高亮线的颜色（8.7）
            highLightLineWidth: 1, //高亮线的线宽（8.7）
            highLineDashAble: true //true-虚线，false-实线，默认是为false（8.7）
          },
          {
            value: [2, 3, 2, 3, 4, 2, 5],
            title: '用电量2',
            color: '#06C270', //折线颜色
            starcolor: '#0006C270', //区域背景渐变开始颜色（从下自上）
            endcolor: '#cc06C270', //区域背景渐变结束颜色（从下自上）
            smooth: 1, //0直线，1平滑
            lineWidth: 1, //折线宽度
            axisDependency: 'right', //依赖的坐标轴。默认对齐left , 设置right 才会生效变化

            isDrawHighLightCircles: true, //是否启动 点击高亮 （5.12）
            highLightCircleRadius: 8, // 高亮的圆圈半径设置（5.12）
            highLightCircleHoleRadius: 3.5, // 高亮的圆内半径设置（5.12）
            highLightCircleOutsideWidth: 0, // 高亮的圆外宽度设置（5.12）
            highLightCircleColor: '#8006C270', // 高亮的圆圈颜色（5.12）
            highLightCircleHoleColor: '#06C270', // 高亮的圆内颜色（5.12）
            highLightCircleOutsideColor: '#0006C270', // 高亮的圆外颜色设置（5.12）

            //竖线
            drawVerticalHighlightIndicatorEnabled: true, //默认false 是否绘制高亮时的竖线，默认不显示 6.5.1支持
            highlightColor: '#8E969B', //竖线的颜色 6.5.1支持
            highlightLineWidth: 1, //竖线的宽度 默认0.5 6.5.1支持
            highlightLineDashLengths: [2, 3] //第一位代表实线宽度，第二位代表虚线的宽度6.5.1支持
          },
          {
            value: [1, 2, 1, 2, 3, 1, 4],
            title: '用电量3',
            color: '#00FAFF', //折线颜色
            starcolor: '#0000FAFF', //区域背景渐变开始颜色（从下自上）
            endcolor: '#cc00FAFF', //区域背景渐变结束颜色（从下自上）
            smooth: 1, //0直线，1平滑
            lineWidth: 1, //折线宽度
            axisDependency: 'right', //依赖的坐标轴。默认对齐left , 设置right 才会生效变化

            isDrawHighLightCircles: true, //是否启动 点击高亮 （5.12）
            highLightCircleRadius: 8, // 高亮的圆圈半径设置（5.12）
            highLightCircleHoleRadius: 3.5, // 高亮的圆内半径设置（5.12）
            highLightCircleOutsideWidth: 0, // 高亮的圆外宽度设置（5.12）
            highLightCircleColor: '#8000FAFF', // 高亮的圆圈颜色（5.12）
            highLightCircleHoleColor: '#00FAFF', // 高亮的圆内颜色（5.12）
            highLightCircleOutsideColor: '#0000FAFF', // 高亮的圆外颜色设置（5.12）
            //竖线
            drawVerticalHighlightIndicatorEnabled: true, //默认false 是否绘制高亮时的竖线，默认不显示 6.5.1支持
            highlightColor: '#8E969B', //竖线的颜色 6.5.1支持
            highlightLineWidth: 1, //竖线的宽度 默认0.5 6.5.1支持
            highlightLineDashLengths: [2, 3] //第一位代表实线宽度，第二位代表虚线的宽度6.5.1支持
          }
        ],
        xAxisLabelHighLightColor: '#ccffffff', //x轴刻度选择后颜色
        xAxisLabelHighLightTextSize: 14, //x轴高亮label字体大小（8.23新增)
        marker: {
          markerShow: true, //默认为false,不显示maker
          markerColor: '#313237', //默认为黑色，marker的背景色
          markerTextColor: '#ffffff', //默认白色，marker字体字颜色
          markerTextSize: '9', //默认12
          markerCornerRadius: '8', //圆角
          markerGraduationLabel: '升', //显示单位 默认为空""
          markerOffsetY: 15, //垂直间距设置
          markerType: 1, //0：显示单个y轴数据，1：显示双y轴数据（8.7）
          markerMarginX: 10 //marker距离选择点的右边距离，默认是10像素（8.7）
          // shadowColor: '#00ff00', //阴影颜色（8.7 android）
          // blur: 15, //阴影程度大小（8.7,android）
          // offsetY: 1, //垂直方向阴影大小    （8.7,android）
          // offsetX: 0, //水平方向阴影大小（8.7,android）
          // markermaximumFractionDigits: '1',
        },
        barSelectIndex: this.getTime('day') - 1, //当前选中
        xAxisColor: '#1affffff', //x轴线的颜色，如果不设置，则默认是黑色线
        yAxisColor: '#00ffffff', //y轴线的颜色，如果不设置，则默认是黑色线
        yAxisGridAlpha: 0.1, //y轴上分割线透明度,安卓分割线的颜色不支持透明度，需要设置该属性
        yRightAxisColor: '#00ffffff', //右y轴线的颜色
        xAxisLabelColor: '#66ffffff', //x label的字体颜色，如果不设置，则默认是黑色字体颜色
        yAxisLabelColor: '#66ffffff', //y label的字体颜色，如果不设置，则默认是黑色字体颜色
        yRightAxisLabelColor: '#66ffffff', // label的字体颜色，如果不设置，则默认是黑色字体颜色
        xAxisGridLine: false, //iOS上默认关闭 设置是否开启X轴分割线绘制
        yAxisGridLine: true, //iOS上默认关闭 设置是否开启X轴分割线绘制   add by lau
        xAxisGridColor: '#1affffff', //x轴上分割线颜色
        yAxisGridColor: '#1affffff', //y轴上分割线颜色   add by lau
        xAxisLabelTextSize: 10, //x轴文字大小
        yAxisLabelTextSize: 10, //y轴文字大小
        xAxisGridAlpha: 1, //x轴上分割线透明度
        yAxisLabelShow: true, //是否只显示最大最小值，true: 显示y轴值；false: 不显示y轴值；默认true
        isUnEquelDistance: true, //iOS6.2新增不等距属性，默认打开（iOS专用）false关闭
        granularity: 1, //间距本身是自适应的，可以使用该值进行调整间距的比例，比如自适应间距是20px，granularity设置为2的时候，界面显示的间距为 40px
        description: '',
        xAxisYOffset: 11, //x轴文字和x轴的距离
        yGraduationLabel: '升',
        yRightAxisEnable: true, //是否显示右y轴
        yRightAxisMaximum: 5, //右y轴刻度最大值
        yRightGraduationLabel: '度', //右y轴刻度单位
        legend: {
          position: 'TOP_RIGHT', //"TOP_LEFT"/"TOP_RIGHT"
          orientation: 'HORIZONTAL', //"HORIZONTAL"/"BOTTOM_RIGHT"
          textColor: '#66ffffff', //图例文字颜色（8.7）
          textSize: 10, //图例文字大小（8.7）
          xOffset: 10, //图例水平间距（8.7）
          form: 'LINE', //图例类型NONE, EMPTY, SQUARE, CIRCLE, LINE（8.7）
          formSize: 10, //图例大小（8.7）
          formLineWidth: 1, //图例线宽大小（8.7）
          space: 16 //图例之间的间距（8.7）
        },
        unit: {
          x: '',
          y: '用水量'
        },
        signPost: {
          //底部界面  v5.8.0
          lineHeight: 1, //线条的高度
          lineColor: '#33ffffff', //标签线的颜色 如果不设置，则默认是黑色线
          linePointRadius: 2.5, //标签线上圆点的半径, 默认10
          lineMarginTop: 11, //线条距离X轴的距离
          lineMarginBottom: '0',
          cursorColor: '#B35336', //标签（三角形）的颜色 如果不设置，则默认是黑色线
          cursorMarginTop: '5', //标签（三角形）距离线条的距离
          cursorHigh: '12', //标签（三角形）本身高度
          cursorMarginBottom: '0',
          show: true, //默认是 false 是否显示底部界面
          showType: 'all', //端点的显示样式，支持 all,ends,none 三种模式
          isSelectedDisappear: false, //是否标签 滑动到的端点消失不见
          isSelectedShake: true //选择后是否支持震动，默认不支持，因为震动体验问题，该功能仅ios支持 （5.10）
        },
        extraTopOffset: 20, //顶部padding(8.7)
        extraLeftOffset: 16, //左边padding(8.7)
        extraRightOffset: 16, //右边padding(8.7)
        extraBottomOffset: 20 //底部padding(8.7)
      },
      chartData2: {
        x: {
          value: [1, 2, 3, 4, 5, 6, 7],
          label: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        y: [
          {
            value: [25, 30, 28, 40, 45, 35, 50],
            title: '用水量',
            color: '#E7704C', //折线颜色
            starcolor: '#00E7704C', //区域背景渐变开始颜色（从下自上）
            endcolor: '#ccE7704C', //区域背景渐变结束颜色（从下自上）
            smooth: 1, //0直线，1平滑
            lineWidth: 1, //折线宽度
            //竖线
            drawVerticalHighlightIndicatorEnabled: true, //默认false 是否绘制高亮时的竖线，默认不显示 6.5.1支持
            highlightColor: '#8E969B', //竖线的颜色 6.5.1支持
            highlightLineWidth: 1, //竖线的宽度 默认0.5 6.5.1支持
            highlightLineDashLengths: [2, 3] //第一位代表实线宽度，第二位代表虚线的宽度6.5.1支持
          },
          {
            value: [2, 3, 2, 3, 4, 2, 5],
            title: '用电量',
            color: '#D7D7D7', //折线颜色
            starcolor: '#00ffffff', //区域背景渐变开始颜色（从下自上）
            endcolor: '#ccffffff', //区域背景渐变结束颜色（从下自上）
            smooth: 1, //0直线，1平滑
            lineWidth: 1, //折线宽度
            axisDependency: 'right', //依赖的坐标轴。默认对齐left , 设置right 才会生效变化

            //竖线
            drawVerticalHighlightIndicatorEnabled: true, //默认false 是否绘制高亮时的竖线，默认不显示 6.5.1支持
            highlightColor: '#8E969B', //竖线的颜色 6.5.1支持
            highlightLineWidth: 1, //竖线的宽度 默认0.5 6.5.1支持
            highlightLineDashLengths: [2, 3] //第一位代表实线宽度，第二位代表虚线的宽度6.5.1支持
          }
        ],
        xAxisColor: '#1affffff', //x轴线的颜色，如果不设置，则默认是黑色线
        yAxisColor: '#00ffffff', //y轴线的颜色，如果不设置，则默认是黑色线
        yAxisGridAlpha: 0.1, //y轴上分割线透明度,安卓分割线的颜色不支持透明度，需要设置该属性
        yRightAxisColor: '#00ffffff', //右y轴线的颜色
        xAxisLabelColor: '#66ffffff', //x label的字体颜色，如果不设置，则默认是黑色字体颜色
        yAxisLabelColor: '#66ffffff', //y label的字体颜色，如果不设置，则默认是黑色字体颜色
        yRightAxisLabelColor: '#66ffffff', // label的字体颜色，如果不设置，则默认是黑色字体颜色
        xAxisGridLine: false, //iOS上默认关闭 设置是否开启X轴分割线绘制
        yAxisGridLine: true, //iOS上默认关闭 设置是否开启X轴分割线绘制   add by lau
        xAxisGridColor: '#1affffff', //x轴上分割线颜色
        yAxisGridColor: '#1affffff', //y轴上分割线颜色   add by lau
        xAxisLabelTextSize: 10, //x轴文字大小
        yAxisLabelTextSize: 10, //y轴文字大小
        xAxisGridAlpha: 1, //x轴上分割线透明度
        yAxisLabelShow: true, //是否只显示最大最小值，true: 显示y轴值；false: 不显示y轴值；默认true
        isUnEquelDistance: true, //iOS6.2新增不等距属性，默认打开（iOS专用）false关闭
        granularity: 1, //间距本身是自适应的，可以使用该值进行调整间距的比例，比如自适应间距是20px，granularity设置为2的时候，界面显示的间距为 40px
        description: '',
        xAxisYOffset: 11, //x轴文字和x轴的距离
        yGraduationLabel: '升',
        yRightAxisEnable: true, //是否显示右y轴
        yRightAxisMaximum: 5, //右y轴刻度最大值
        yRightGraduationLabel: '度', //右y轴刻度单位
        legendHide: true, //是否需要隐藏legend，默认不隐藏
        legend: {
          position: 'TOP_RIGHT', //"TOP_LEFT"/"TOP_RIGHT"
          orientation: 'HORIZONTAL', //"HORIZONTAL"/"BOTTOM_RIGHT"
          textColor: '#66ffffff', //图例文字颜色（8.7）
          textSize: 10, //图例文字大小（8.7）
          xOffset: 10, //图例水平间距（8.7）
          form: 'LINE', //图例类型NONE, EMPTY, SQUARE, CIRCLE, LINE（8.7）
          formSize: 10, //图例大小（8.7）
          formLineWidth: 1, //图例线宽大小（8.7）
          space: 16 //图例之间的间距（8.7）
        },
        unit: {
          x: '',
          y: ''
        },
        extraTopOffset: 20, //顶部padding(8.7)
        extraLeftOffset: 16, //左边padding(8.7)
        extraRightOffset: 16, //右边padding(8.7)
        extraBottomOffset: 20 //底部padding(8.7)
      }
    }
  },
  created() {
    /**
     * 设置图表背景色，
     *ios有bug，需要用css设置。
     * 安卓正常，安卓不能用css设置,需要用配置
     */
    if (!isIos) {
      this.chartData0.background = '#9943464d'
      this.chartData1.background = '#9943464d'
      this.chartData2.background = '#9943464d'
    }
  },
  methods: {
    reloadPage() {
      this.$bridge.reload()
    },
    getTime(type) {
      var now = new Date()
      var month = now.getMonth() //得到月份
      var date = now.getDate() //得到日期
      var day = now.getDay() //得到周几
      switch (type) {
        case 'month':
          return now.getMonth()
          break
        case 'date':
          return now.getDate()
          break
        default:
          return now.getDay()
          break
      }
    }
  }
}
</script>

<style scoped>
@media screen and (weex-theme: colmo) {
  .wrapper {
    background-color: #151617;
  }
}
.wrapper {
  width: 750px;
  background-color: #ffffff;
  align-items: center;
}
.title-box {
  padding: 32px;
  background-color: #e5e5e8;
  margin-bottom: 32px;
}
.title-text {
  font-family: PingFangSC-Medium;
  font-size: 36px;
  color: #000000;
  font-weight: 500;
}
.chart-header {
  flex-direction: row;
  background: rgba(67, 70, 77, 0.6);
  justify-content: space-between;
  padding: 36px 36px 0 36px;
}
.title-sub {
  font-family: PingFangSC-Regular;
  font-size: 32px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 400;
}
.barchart-wrapper {
  flex-direction: column;
  justify-content: center;
  margin-bottom: 16px;
}

.line-chart {
  background: rgba(67, 70, 77, 0.6);
  width: 750px;
  height: 648px;
}
.last-wrapper {
  margin-bottom: 200px;
}
.legend-box {
  flex-direction: row;
  justify-content: space-around;
  background: rgba(67, 70, 77, 0.6);
  padding-top: 40px;
  padding-bottom: 40px;
}
.legend {
  flex-direction: row;
}
.legend-img {
  width: 52px;
  height: 52px;
  border-radius: 26px;
  background-color: #b35336;
  margin-right: 10px;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.legend-text {
  flex-direction: column;
}
.legend-num {
  font-family: PingFangSC-Medium;
  font-size: 32px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
  margin-bottom: 8px;
}
.legend-sub {
  font-family: PingFangSC-Regular;
  font-size: 24px;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 400;
}
.space {
  background: rgba(67, 70, 77, 0.6);
  height: 40px;
  width: 750px;
}
</style>