index.vue

<template>
  <div class="app-container home">
    <div class="home-right">
      <div class="home-right-top">
        <p class="title">边坡介绍</p>
        <p class="cont">边坡名称：边坡结构系统</p>
        <p class="cont">边坡工程安全等级：高级</p>
        <p class="cont">边坡危害等级：低级</p>
        <p class="cont">边皮设计稳定系数：高</p>
        <p class="cont">项目概况：</p>
      </div>
      <div class="home-right-bottom">
        <p class="title">边坡介绍</p>
        <p class="cont">GB50778-2012 露天煤矿岩土工程勘察规范</p>
        <p class="cont">GB51289-2018煤炭工业露天矿边坡工程设计标准</p>
        <p class="cont">GB 51214-2017 煤炭工业露天矿边坡工程监测规范</p>
        <p class="cont">GB∕T 37697-2019 露天煤矿边坡变形监测技术规范</p>
        <p class="cont">MT∕T 1183-2020 露天矿边坡稳定性分析及岩移监测方法</p>
        <p class="cont">GB 51016-2014 非煤露天矿边坡工程技术规范</p>
        <p class="cont">GB 16423-2020 金属非金属矿山安全规程</p>
        <p class="cont">
          AQ T 2063-2018 金属非金属露天矿山高陡边坡安全监测技术规范
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      // 版本号
      version: "3.8.5",
    };
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
  },
};
</script>

<style scoped lang="scss">
.home {
  width: 100%;
  height: 100vh;
  background: url("~@/assets/images/index.png") no-repeat center;
  background-size: 100%;
  .home-right {
    width: 30%;
    height: 100%;
    float: right;
    .title {
      width: 199px;
      height: 46px;
      border: 4px solid #04f4f7;
      border-radius: 59px;
      font-size: 24px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #04f4f7;
      line-height: 37px;
      text-align: center;
      box-sizing: border-box;
      margin: 10px 0;
    }
    .home-right-top {
      .cont {
        margin: 0;
        line-height: 48px;
        font-size: 28px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
        text-shadow: 0px 5px 2px rgba(255, 255, 255, 0.2);
        background: linear-gradient(0deg, #7ed7fb 0%, #ffffff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
    .home-right-bottom {
      .cont {
        margin: 0;
        line-height: 48px;
        font-size: 22px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #ffffff;
      }
    }
  }
}
</style>