Aniku_electron
/
01-index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
  <!-- <meta http-equiv="Content-Security-Policy"
    content="default-src 'self'; img-src 'self' https://img1.doubanio.com; script-src 'self'">
  <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'"> -->

  <!-- import CSS -->
  <link rel="stylesheet" href="./static/index.css">
  <script type="text/javascript" src="./static/vue.js"></script>
  <script type="text/javascript" src="./static/index.js"></script>

  <title>Hello World!</title>
</head>

<body>

  <div id="nav_menu" class="sidebar">
    <el-row>
      <el-col :span="24">
        <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
          <el-menu-item index="2">
            <i class="el-icon-film"></i>
            <span slot="title">导航二</span>
          </el-menu-item>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-setting"></i>
            <span slot="title">导航四</span>
          </el-menu-item>
          <el-menu-item index="5" @click="add">
            <i class="el-icon-plus"></i>
            <span slot="title">添加</span>
          </el-menu-item>
        </el-menu>
      </el-col>
    </el-row>

  </div>

  <div id="content">
    <!-- 信息展示 -->
    <div class="header">
      <el-row>
        <el-col :span="6">
          <el-card style="margin: 10px;">
            <el-image title="打开文件" :src="img_header" @click="openFile(img_header)"
              style="width: 100%; height: 240px; display: block;" class="header-img" :fit="fit"></el-image>
          </el-card>
        </el-col>
        <el-col :span="18" style="padding: 10px;">
          <el-row>
            <el-col>
              <h2>{{ img_header.split('/').pop() }}</h2>
            </el-col>
            <el-col :span="8">导演</el-col>
            <el-col :span="8">年份</el-col>
          </el-row>
          <el-row>主演</el-row>
        </el-col>

      </el-row>
    </div>
    <!-- 列表 -->
    <div class="content">
      <el-row>
        <el-col :span="span" v-for="img in imgs" :key="img">
          <el-card style="margin: 10px; padding: 0px;" shadow="hover">
            <el-image class="content-img" title="查看详情" :src="img" @click="changeHeader(img)" style=" width: 100%; display: block;"
              :fit="fit">
            </el-image>
            <!-- <img :src="imgs[0]" style="width: 100%; display: block;"> -->
            <div style="padding-top: 14px; text-align: center;">
              <span>{{ img.split('/').pop() }}</span>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>


  <!-- You can also require other files to run in this process -->
  <script src="./renderer/index.js"></script>
  <!-- <script src="./renderer/index.js"></script> -->


</body>

<style>
  .sidebar {
    position: fixed;
    width: 200px;
    height: 100vh;
    left: 0;
    top: 0;
    bottom: 0;
  }

  .header {
    margin-left: 200px;
    margin-right: 10px;
    position: fixed;
    width: calc(100% - 220px);
    height: 300px;
    background-color: #caddbb;
  }

  .header-img:hover {
    filter: alpha(opacity=60);
    -moz-opacity: 0.6;
    opacity: 0.8;
    cursor: pointer;
  }

  .content {
    margin-left: 200px;
    position: relative;
    width: calc(100% - 200px);
    top: 330px;
    height: calc(100vh - 350px);
    overflow: auto;
    background: radial-gradient(ellipse at top left,
        rgba(255, 255, 255, 1) 40%,
        rgba(229, 229, 229, .9) 100%);
  }

  .content-img:hover {
    filter: alpha(opacity=60);
    -moz-opacity: 0.6;
    opacity: 0.6;
    cursor: pointer;
  }

  #pic_list {
    text-align: center;
  }

  #pic {
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  }

  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
</style>

</html>