mec-cloud_-intelligent-manufacturing_client/zkqy-ui/src/views/index.vue

<template>
  <div class="app-container home">

    <!--    <div>-->
    <!--  文件上传测试调用  -->
    <!--      <button @click="upload.open = true">上传</button>-->

    <!--      <el-select v-model="filetype" placeholder="请选择">-->
    <!--        <el-option label="文件形式" value="filePattern"/>-->
    <!--        <el-option label="字节形式" value="bytes"/>-->
    <!--        <el-option label="编码形式" value="base64"/>-->
    <!--      </el-select>-->

    <!--      &lt;!&ndash;      :action="upload.url"&ndash;&gt;-->


    <!--      <el-upload-->
    <!--        action="#"-->
    <!--        :http-request="customUpload"-->
    <!--        :visible.sync="upload.open"-->
    <!--        :on-success="handleSuccess"-->
    <!--        :on-error="handleError"-->
    <!--        :before-upload="beforeUpload"-->

    <!--        :headers="upload.headers"-->
    <!--        :auto-upload="false"-->
    <!--        multiple-->
    <!--        ref="upload">-->
    <!--        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>-->
    <!--        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>-->
    <!--      </el-upload>-->

    <!--      &lt;!&ndash;            <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>&ndash;&gt;-->

    <!--      &lt;!&ndash;              &lt;!&ndash;        :on-progress="handleFileUploadProgress"&ndash;&gt;-->
    <!--      &lt;!&ndash;                                 :on-success="handleFileSuccess"&ndash;&gt;&ndash;&gt;-->
    <!--      &lt;!&ndash;              <el-upload ref="upload" :headers="upload.headers"&ndash;&gt;-->
    <!--      &lt;!&ndash;                         :action="upload.url" :disabled="upload.isUploading"&ndash;&gt;-->

    <!--      &lt;!&ndash;                         :auto-upload="false"&ndash;&gt;-->
    <!--      &lt;!&ndash;                         :file-list="upload.fileList"&ndash;&gt;-->
    <!--      &lt;!&ndash;                         multiple drag>&ndash;&gt;-->
    <!--      &lt;!&ndash;                <i class="el-icon-upload"></i>&ndash;&gt;-->


    <!--      &lt;!&ndash;                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>&ndash;&gt;-->
    <!--      &lt;!&ndash;                <div class="el-upload__tip text-center" slot="tip"></div>&ndash;&gt;-->
    <!--      &lt;!&ndash;              </el-upload>&ndash;&gt;-->
    <!--      &lt;!&ndash;              <div slot="footer" class="dialog-footer">&ndash;&gt;-->
    <!--      &lt;!&ndash;                <el-button type="primary" @click="submitFileForm">确 定</el-button>&ndash;&gt;-->
    <!--      &lt;!&ndash;                <el-button @click="upload.open = false">取 消</el-button>&ndash;&gt;-->
    <!--      &lt;!&ndash;              </div>&ndash;&gt;-->
    <!--      &lt;!&ndash;            </el-dialog>&ndash;&gt;-->


    <!--    </div>-->


    <!-- <el-row :gutter="20"></el-row>
    <el-row :gutter="20"></el-row>
    <el-divider/>

    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
      <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
                 :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
                 :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <div class="el-upload__tip" slot="tip">
            <el-checkbox v-model="upload.updateSupport"/>
            是否更新已经存在的用户数据
          </div>
          <span>仅允许导入xls、xlsx格式文件。</span>
          <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline"
                   @click="importTemplate">下载模板
          </el-link>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>

    <button @click="upload.open = true">上传文件</button>
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="12" :lg="8"></el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>更新日志</span>
          </div>
          <el-collapse accordion> 123123</el-collapse>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>捐赠支持</span>
          </div>
          <div class="body"></div>
        </el-card>
      </el-col>
    </el-row> -->
    <div class="info-content">
      <!-- <div class="header" @click="toPersonalCenter"> -->
      <!-- <img :src="avatar" class="user-avatar" /> -->
      <!-- </div> -->
      <!-- <div class="name">{{ nickName }}</div> -->
      <!-- <div class="tenant-name">{{ tenantName }}</div> -->
      <!-- <div class="date">{{ date }}</div> -->
      <!-- <div class="title">欢迎登录Mec OS 工业应用操作系统</div> -->
      <!-- <div class="title">欢迎登录Mec OS 化纤行业生产管理系统</div> -->
      <div class="echarts1">
        <div class="pieChart" ref="pieChart"></div>
        <div
          :class="'describe' + (parseInt(index) + 1)"
          v-for="(item, index) in processList"
          :key="index"
        >
          <P class="text">{{ item.name }}</P>
          <P class="num">{{ item.value }}</P>
        </div>
      </div>
      <div class="echarts2">
        <div class="lineChart" ref="lineChart"></div>
      </div>
      <div class="echarts3">
        <p class="title">操作日志</p>
        <div class="text">
          <span class="peo">操作人</span>
          <span class="add">ip</span>
        </div>
        <div class="swiper-container">
          <div class="swiper-scrollbar"></div>
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item, index) in swiperList" :key="index">
              <div>
                <span class="name">{{ item.operName }}</span>
                <span class="ip">{{ item.operIp }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="echarts4">
        <div class="gaugeChart" ref="gaugeChart"></div>
      </div>
      <div class="echarts5">
        <div class="barChart" ref="barChart"></div>
      </div>
    </div>
  </div>
</template>

<script>
import {formatDate} from "@/utils";
import {getToken} from "@/utils/auth";
import {mapGetters, mapState} from "vuex";
import "swiper/css/swiper.css";
import Swiper from "swiper";
import {
  getTask,
  getPipeline,
  getOperation,
  getMaterial,
  getLogin, uploadFilesTenant,
} from "@/api/homePage/index";

export default {
  name: "Index",
  data() {
    return {
      filetype: "",
      chartObj: {
        myChart1: null,
        myChart2: null,
        myChart3: null,
        myChart4: null,
      },
      processList: [],
      swiperList: [],
      // 用户导入参数
      upload: {
        formData: {},
        // 文件列表
        fileList: [],
        // 是否显示弹出层（用户导入）
        open: true,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: {Authorization: "Bearer " + getToken()},
        // 上传的地址
        url: process.env.VUE_APP_BASE_API1 + "system/fileManagement/tenantUploadFiles",
      },
      // 版本号
      version: "3.8.5",
    };
  },
  mounted() {
    // 初始化 echarts
    this.initChart1();
    this.initChart2();
    this.initChart3();
    this.initChart4();

    this.initData();
  },
  methods: {

    // 自定义上传
    customUpload(options) {
      const formData = new FormData();
      for (const file of this.$refs.upload.uploadFiles) {
        formData.append('files', file.raw);
      }
      formData.append('fileManagement', this.upload.formData.fileManagement);
      // 上传文件
      uploadFilesTenant(formData).then(response => {
        options.onSuccess(response.data, options.file);
      }).catch(error => {
        options.onError(error);
      });
    },
    handleSuccess(response, file, fileList) {
      console.log('上传成功', response);
    },
    handleError(err, file, fileList) {
      console.log('上传失败', err);
    },
    beforeUpload(file) {
      console.log('上传文件之前', file);
      return true; // 返回false会取消上传
    },
    submitUpload() {
      this.upload.formData.fileManagement = JSON.stringify({fileType: this.filetype});
      // 手动触发上传
      this.$refs.upload.submit();
    },

    initData() {
      //任务统计
      getTask().then((response) => {
        if (response.code == 200) {
          this.processList = response.data;
          //   console.log(this.processList);
          this.chartObj.myChart1.setOption({
            series: [
              {
                data: response.data,
              },
            ],
          });
        } else {
          console.log(response);
          this.$message.error("获取数据失败");
        }
      });

      //管道统计
      getPipeline().then((response) => {
        if (response.code == 200) {
          //  console.log(response.data);
          //  console.log(response.data[0].date);
          let xAxisData = response.data[0].date;
          xAxisData = xAxisData.map(function (dateStr) {
            var date = new Date(dateStr);
            return date.getMonth() + 1 + "月" + date.getDate() + "日";
          });
          let loginList = response.data.map((item) => item.name);
          this.chartObj.myChart2.setOption({
            legend: {
              data: loginList,
            },
            xAxis: {
              data: xAxisData,
            },
            series: response.data,
          });
        } else {
          console.log(response);
          this.$message.error("获取数据失败");
        }
      });

      //操作日志
      getOperation().then((response) => {
        if (response.code == 200) {
          this.swiperList = response.data;
          this.$nextTick(() => {
            var swiper = new Swiper(".swiper-container", {
              direction: "vertical",
              loop: true,
              autoplay: {
                delay: 1000,
                disableOnInteraction: false,
              },
              scrollbar: {
                el: ".swiper-scrollbar",
              },
              slidesPerView: 3,
              freeMode: true,
              // spaceBetween: 1,
            });
          });
        } else {
          console.log(response);
          this.$message.error("获取数据失败");
        }
      });

      //原材料统计
      getMaterial().then((response) => {
        if (response.code == 200) {
          //  console.log(response.data);
          let tabularList = response.data;
          //  tabularList.push({ name: "多表数量", value: 30 });
          let labelList = response.data.map((item) => item.name);
          this.chartObj.myChart3.setOption({
            yAxis: {
              data: labelList,
            },
            series: [
              {
                data: response.data,
              },
            ],
          });
        } else {
          console.log(response);
          this.$message.error("获取数据失败");
        }
      });

      //用户登录统计
      getLogin().then((response) => {
        if (response.code == 200) {
          let modelData = response.data;
          //  console.log(modelData);
          this.chartObj.myChart4?.setOption({
            series: [
              {
                data: [modelData],
              },
            ],
          });
        } else {
          console.log(response);
          this.$message.error("获取数据失败");
        }
      });
    },

    initChart1() {
      this.chartObj.myChart1 = this.$echarts.init(this.$refs.pieChart);
      let option = {
        color: ["#9370db", "#ffd700", "#00ccff", "#ff6600", "#ff9900"],
        title: {
          text: "任务统计",
          left: "left",
          textStyle: {
            fontSize: 16,
            fontWeight: "normal",
            color: "#696969",
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          left: "60%",
          top: "60%",
        },
        series: [
          {
            // name: 'Access From',
            type: "pie",
            radius: ["40%", "100%"],
            avoidLabelOverlap: false,
            itemStyle: {
              // borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            right: "40%",
            top: "50%",
            data: [
              {value: 10, name: "工艺流"},
              {value: 20, name: "审批流"},
            ],
            label: {
              show: false,
              position: "center",
            },
            labelLine: {
              show: false,
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: "bold",
              },
            },
          },
        ],
      };
      this.chartObj.myChart1.setOption(option);
    },

    initChart2() {
      this.chartObj.myChart2 = this.$echarts.init(this.$refs.lineChart);
      let option = {
        color: ["#FF88E0", "#9FE080"],
        title: {
          text: "管道统计",
          textStyle: {
            fontSize: 16,
            fontWeight: "normal",
            color: "#696969",
          },
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["在产生产任务", "完成数量"],
        },
        grid: {
          left: "3%",
          right: "4%",
          top: "20%",
          bottom: "0%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "01\nMon",
            "02\nTue",
            "03\nWed",
            "04\nThu",
            "05\nFri",
            "06\nSat",
            "07\nSun",
            "08\nMon",
            "09\nTue",
            "10\nWed",
            "11\nThu",
            "12\nFri",
            "13\nSat",
            "14\nSun",
            "15\nMon",
            "16\nTue",
            "17\nWed",
            "18\nThu",
            "19\nFri",
            "20\nSat",
            "21\nSun",
            "22\nMon",
            "23\nTue",
            "24\nWed",
            "25\nThu",
            "26\nFri",
            "27\nSat",
            "28\nSun",
            "29\nMon",
            "30\nTue",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "客户端",
            type: "line",
            smooth: true,
            data: [
              10, 23, 42, 13, 30, 25, 40, 30, 42, 55, 40, 28, 20, 30, 45, 25,
              20, 30, 40, 33, 35, 40, 46, 31, 13, 34, 20, 10, 36, 43,
            ],
          },
          {
            name: "工具端",
            type: "line",
            smooth: true,
            data: [
              20, 30, 29, 40, 55, 33, 30, 26, 36, 45, 50, 34, 38, 25, 28, 43,
              16, 30, 45, 52, 40, 46, 33, 57, 50, 33, 40, 59, 56, 56,
            ],
          },
        ],
      };
      this.chartObj.myChart2.setOption(option);
    },

    initChart3() {
      this.chartObj.myChart3 = this.$echarts.init(this.$refs.gaugeChart);
      let option = {
        color: ["#00ccff", "#ff6600", "#ff9900", "#9370db", "#ffd700"],
        title: {
          text: "原材料统计",
          left: "left",
          textStyle: {
            fontSize: 16,
            fontWeight: "normal",
            color: "#696969",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "0%",
          right: "3%",
          top: "20%",
          bottom: "0%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          nameLocation: "middle",
          nameTextStyle: {
            align: "center",
          },
          splitLine: {
            show: false,
          },
        },

        yAxis: {
          type: "category",
          data: ["总数", "入库数量", "出库数量"],
          inverse: true, // 使类目从右向左排列
        },

        series: [
          {
            type: "bar",
            barWidth: "18",
            orientation: "horizontal",
            data: [
              {value: 88, name: "表单"},
              {value: 66, name: "表格"},
              {value: 33, name: "三级联动"},
            ],
            showBackground: true,
            backgroundStyle: {
              color: "#F0F8FF",
            },
          },
        ],
      };
      this.chartObj.myChart3.setOption(option);
    },

    initChart4() {
      this.chartObj.myChart4 = this.$echarts.init(this.$refs.barChart);
      let option = {
        color: ["#5D84FE"],
        title: {
          text: "用户登录统计",
          textStyle: {
            fontSize: 16,
            fontWeight: "normal",
            color: "#696969",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        xAxis: {
          type: "category",
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
        },
        yAxis: {
          type: "value",
          min: 0,
          max: 100,
          interval: 20,
          splitLine: {
            show: false, // 关闭y轴的水平分割线
          },
        },
        grid: {
          left: "5%",
          right: "5%",
          top: "30%",
          bottom: "0%",
          containLabel: true,
        },
        series: [
          {
            data: [0],
            type: "bar",
            barWidth: "30", // 设置柱体宽度
            showBackground: true,
            backgroundStyle: {
              color: "#E8EFFF",
            },
          },
        ],
      };
      this.chartObj.myChart4.setOption(option);
    },

    /** 导入按钮操作 */
    handleImport() {
      this.upload.title = "用户导入";
      this.upload.open = true;
    },
    /** 下载模板操作 */
    importTemplate() {
      this.download(
        "system/user/importTemplate",
        {},
        `user_template_${new Date().getTime()}.xlsx`
      );
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert(
        "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
        response.msg +
        "</div>",
        "导入结果",
        {dangerouslyUseHTMLString: true}
      );
      this.getList();
    },
    // 提交上传文件
    submitFileForm() {
      console.log(this.$refs.upload);
      let {uploadFiles, action, data} = this.$refs.upload
      console.log("uploadFiles", uploadFiles)
      console.log("action", action)
      console.log("data", data)
      data = {}
      uploadFiles.map(file => {
        data[file.name.split(".")[0]] = true
      });
      data.WechatIMG379 = false;

      this.uploadFiles({
        uploadFiles,
        data,
        action,
        success: (response) => {
          console.log(response)
          // 上传成功后，将里面的内容删除
          this.$refs.uploadFile.clearFiles();
          this.$refs.uploadPicture.clearFiles();
        },
        error: (error) => {
          console.log('失败了', error)
        }
      })
      // this.$refs.upload.submit();
    },

    uploadFiles({uploadFiles, headers, data, action, success, error}) {
      let form = new FormData();
      uploadFiles.map(file => form.append("files", file.raw))
      for (let key in data) {
        form.append(key, data[key])
      }
      let xhr = new XMLHttpRequest()
      xhr.open("post", action, true)
      xhr.setRequestHeader("Authorization", getToken());
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
          if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
            success && success(xhr.responseText)
          } else {
            error && error(xhr.status)
          }
        }
      }
      xhr.send(form)

      // let fileVoList = [];
      // let form = new FormData();
      //
      // // 文件对象
      // uploadFiles.map(file => {
      //   let fileVo = {
      //     "file": file.raw,
      //     "isBase64": false
      //   }
      //   fileVoList.push(fileVo);
      // })
      //
      // 附件参数
      // for (let key in data) {
      //   form.append(key, data[key])
      // }
      // let xhr = new XMLHttpRequest()
      // // 异步请求
      // xhr.open("post", action, true)
      // // 设置请求头
      // xhr.setRequestHeader("Authorization", getToken());
      // xhr.onreadystatechange = function () {
      //   if (xhr.readyState == 4) {
      //     if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
      //       success && success(xhr.responseText)
      //     } else {
      //       error && error(xhr.status)
      //     }
      //   }
      // }
      // console.log("form内容：", fileVoList)
      // xhr.send({
      //   "fileVoList": fileVoList
      // })
    },


    goTarget(href) {
      window.open(href, "_blank");
    },

    toPersonalCenter() {
      this.$router.push("/user/profile");
    },
  },
  computed: {
    ...mapState({
      username: (state) => state.user.name,
      owner: (state) => state.user?.tenant.owner,
      tenantName: (state) => state.user?.tenant.tenantName,
      nickName: (state) => state.user?.nickName,
    }),

    ...mapGetters(["avatar"]),
    date: () => {
      return formatDate(new Date());
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  position: relative;
  width: 100%;
  /* height: 500px; */
  background-color: #eff2f7;

  .info-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    .echarts1 {
      position: relative;
      width: 20%;
      height: 280px;
      margin: auto;
      padding: 20px 15px;
      box-shadow: 10px 10px 5px #e0e0e0;
      background-color: #fff;
      border-radius: 10px;

      .pieChart {
        width: 100%;
        height: 100%;
      }

      .describe1 {
        .text {
          position: absolute;
          left: 50px;
          top: 90px;
        }

        .num {
          position: absolute;
          font-size: 20px;
          color: black;
          left: 63px;
          top: 55px;
        }
      }

      .describe2 {
        .text {
          position: absolute;
          left: 157px;
          top: 90px;
        }

        .num {
          position: absolute;
          font-size: 20px;
          color: black;
          left: 170px;
          top: 55px;
        }
      }
    }

    .echarts2 {
      width: 76%;
      height: 280px;
      margin: auto;
      padding: 20px 15px;
      box-shadow: 10px 10px 5px #e0e0e0;
      background-color: #fff;
      border-radius: 10px;
      margin-right: 30px;

      .lineChart {
        width: 100%;
        height: 100%;
      }
    }

    .echarts3 {
      width: 23%;
      height: 200px;
      margin: auto;
      padding: 20px 15px;
      box-shadow: 10px 10px 5px #e0e0e0;
      background-color: #fff;
      border-radius: 10px;
      margin-top: 20px;

      p {
        margin: 0;
      }

      .title {
        font-size: 16px;
        color: "#696969";
      }

      .text {
        display: flex;
        flex-direction: row;
        margin-top: 10px;

        .peo {
          font-size: 14px;
          color: black;
          font-weight: bold;
          margin-left: 20px;
          margin-right: 120px;
        }

        .add {
          font-size: 14px;
          color: black;
          font-weight: bold;
        }
      }

      .swiper-container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 90%;
        height: 80px;
        /* overflow: auto; */
        margin-top: 10px;

        .name {
          text-align: center;
          font-size: 16px;
          margin-left: 2px;
          margin-right: 59px;
        }

        .ip {
          text-align: center;
          font-size: 16px;
        }
      }
    }

    .echarts4 {
      width: 20%;
      height: 200px;
      margin: auto;
      padding: 20px 15px;
      box-shadow: 10px 10px 5px #e0e0e0;
      background-color: #fff;
      border-radius: 10px;
      margin-top: 20px;

      .gaugeChart {
        width: 100%;
        height: 100%;
      }
    }

    .echarts5 {
      width: 53%;
      height: 200px;
      margin: auto;
      padding: 20px 15px;
      box-shadow: 10px 10px 5px #e0e0e0;
      background-color: #fff;
      border-radius: 10px;
      margin-top: 20px;
      margin-right: 30px;

      .barChart {
        width: 100%;
        height: 100%;
      }
    }

    /* .header {
      white-space: nowrap;
      margin-bottom: 5px;
      cursor: pointer;
      .user-avatar {
        width: 160px;
        border-radius: 50%;
      }
    } */
    .name {
      font-size: 30px;
      margin-bottom: 5px;
    }

    .tenant-name {
      font-size: 20px;
    }

    .date {
      margin-bottom: 10px;
    }

    .title {
      font-size: 16px;
    }
  }
}

.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    /* border-left: 5px solid #eee; */
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>