<template>
	<div style="height: 2000px">
    <img src="/static/home/banner.png" alt="">
    <div class="main">
      <h1 style="text-align: center;margin: 35px auto;font-size: 30px">配置需求</h1>
      <div>
        <el-row style="text-align: center">
          <el-col :span="4" class="download_explain_head " style="border-top-left-radius:10px;"><span> </span></el-col>
          <el-col :span="5" class="download_explain_head ">系统</el-col>
          <el-col :span="6" class="download_explain_head ">CPU</el-col>
          <el-col :span="6" class="download_explain_head ">显卡</el-col>
          <el-col :span="3" class="download_explain_head " style="border-top-right-radius:10px;">内存</el-col>
        </el-row>
        <el-row style="text-align: center">
          <el-col :span="4" class="download_explain_text download_explainBg">推荐配置</el-col>
          <el-col :span="5" class="download_explain_text download_explainBg1">Windows10 64位</el-col>
          <el-col :span="6" class="download_explain_text download_explainBg">英特尔i7九代以上处理器</el-col>
          <el-col :span="6" class="download_explain_text download_explainBg1" style="position: relative">
            <div>GTX3060或同级以上</div>
            <div style="position: absolute;top:22px;left: 75px">（支持光追）</div>
          </el-col>
          <el-col :span="3" class="download_explain_text download_explainBg">16G</el-col>
        </el-row>
        <el-row style="text-align: center">
          <el-col :span="4" class="download_explain_text download_explainBg">最低配置</el-col>
          <el-col :span="5" class="download_explain_text download_explainBg1">Windows7 64位</el-col>
          <el-col :span="6" class="download_explain_text download_explainBg">英特尔i5九代以上处理器</el-col>
          <el-col :span="6" class="download_explain_text download_explainBg1">GTX1660或同级以上</el-col>
          <el-col :span="3" class="download_explain_text download_explainBg">8G</el-col>
        </el-row>
        <p style="color:  #FF6000;margin-top: 6px;font-size: 14px;font-family:PingFang-SC-Regular">温馨提示：安装前请关闭杀毒软件</p>
        <h1 style="text-align: center;margin: 50px auto;font-size: 30px">相关下载</h1>
        <el-row  :gutter="30">
          <el-col :span="12">
            <el-card>
              <div style="display: flex;align-items: center;">
                <div>
                  <img src="/static/home/icon.png" alt="">
                </div>
                <div style="line-height: 22px;margin-left: 10px">
                  <p style="font-weight: 550">UE4依赖库</p>
                  <p style="color:#666666;font-size: 12px ">场景必备运行环境</p>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card>
              <div style="display: flex;align-items: center;">
                <div>
                  <img src="/static/home/icon.png" alt="">
                </div>
                <div style="line-height: 22px;margin-left: 10px">
                  <p style="font-weight: 550">UE4依赖库</p>
                  <p style="color:#666666;font-size: 12px ">场景必备运行环境</p>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "index",
  };
</script>

<style scoped>
  .download_explain_head{
    color: #ffffff;
    height: 30px;
    line-height: 30px;
    background-color: #282c32;
  }
  .download_explain_text{
    height: 120px;
    line-height: 120px;
    border-bottom: 1px solid #efefef;
  }
  .download_explainBg {
    background: #f5f5f5;
  }
  .download_explainBg1 {
    background:#ffffff;
  }
  .main {
    width: 1000px;
    margin: 0 auto;
  }
</style>
