分页分页分页分页

<template>
  <div>
    <div id="max_background">
      <div id="main_content">
        <!-- 头部 -->
        <div id="renderheader">
          <img
            class="top_icon"
            @click="$router.openPage('/home01')"
            src="../../assets/img/TOP@2x.png"
            alt=""
          />
          <!-- 搜索框 -->
          <div id="serach_box">
            <img
              class="search_icon"
              src="../../assets/img/搜索@2x.png"
              alt=""
            />
          </div>
          <div class="right_info">
            <li @click="$router.openPage('/playvideo')">Jobs</li>
            <li @click="$router.openPage('/game')">Scenes</li>
          </div>
          <div class="right_info2">
            <div class="right_info2_msg" @click="centerDialogVisible = true">
              ￡258.00 | MCC 56,389.86
            </div>
          </div>
        </div>
        <!-- 头部结束 -->
        <!-- 进度条 -->
        <div id="progress_bar" v-if="progressBar">
          <p class="progress_bar_p1">
            Snooker Opener_scene File.ma is uploading
          </p>
          <p class="progress_bar_p2">
            Keep this page open until upload is complete.
          </p>
          <div class="cancel" @click="cancel">CANCEL</div>
        </div>
        <!-- 进度条 -->
        <!-- 上传框 -->
        <div id="upload_box">
          <img class="cloud" src="../../assets/render/编组 8@2x.png" alt="" />
          <p class="upload_box_info">
            Drag and drop or click here to upload an .ma file.
          </p>
        </div>
        <!-- <el-upload
          class="upload-demo"
          drag
          action="https://jsonplaceholder.typicode.com/posts/"
          multiple>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload> -->
        <div id="sort_by">
          <p style="float: left">Sort By:</p>
          <div class="date" style="float: left">Date</div>
          <div style="float: left">Name</div>
          <div style="float: left">Status</div>
        </div>
        <!-- sort by 结束 -->
        <div id="upload_one">
          <div class="upload_one_left">
            <img
              class="upload_one_left_img1"
              src="../../assets/render/文件@2x.png"
              alt=""
            />
            <div class="upload_one_left_title1">
              Snooker Opener_Scene File.ma
            </div>
            <div class="upload_one_left_p2">Created: Sun Jun 28 2020</div>
            <div class="upload_one_left_p3">
              184.66.MB,1 Render Target,21 Frames,25 FPS,Web upload
            </div>
            <!-- 底部左侧图标 -->
            <img
              class="bottom_left_img"
              src="../../assets/render/连接 (2)@2x.png"
              alt=""
            />
            <!-- 底部左侧msg -->
            <div class="bottom_left_info">Show Previous Renders:2</div>
          </div>
          <!-- 左侧结束 -->
          <div id="upload_one_right">
            <div class="button1" @click="$router.openPage('/rendersteps')">
              <img
                class="button1_img"
                src="../../assets/render/编组 2@2x.png"
                alt=""
              />
              <p>Create New Job</p>
            </div>
            <div class="button2">
              <img
                class="button1_img"
                src="../../assets/render/删除@2x.png"
                alt=""
              />
              <p>Delete Scene</p>
            </div>
            <!-- 右侧底部图标 -->
            <img
              class="right_bottom_img"
              src="../../assets/render/向右 (1)@2x.png"
              alt=""
            />
          </div>
        </div>
        <!--  create new job -->
        <div id="upload_one">
          <div class="upload_one_left">
            <img
              class="upload_one_left_img1"
              src="../../assets/render/文件@2x.png"
              alt=""
            />
            <div class="upload_one_left_title1">cam01.ma</div>
            <div class="upload_one_left_p2">Created:Sun Apr 26 2020</div>
            <div class="upload_one_left_p3">
              184.66.MB,1 Render Target,21 Frames,25 FPS,Web upload
            </div>
            <!-- 底部左侧图标 -->
            <img
              class="bottom_left_img"
              src="../../assets/render/连接 (2)@2x.png"
              alt=""
            />
            <!-- 底部左侧msg -->
            <div class="bottom_left_info">Show Previous Renders:2</div>
          </div>
          <!-- 左侧结束 -->
          <div id="upload_one_right">
            <div class="button1" @click="$router.openPage('/rendersteps')">
              <img
                class="button1_img"
                src="../../assets/render/编组 2@2x.png"
                alt=""
              />
              <p>Create New Job</p>
            </div>
            <div class="button2">
              <img
                class="button1_img"
                src="../../assets/render/删除@2x.png"
                alt=""
              />
              <p>Delete Scene</p>
            </div>
            <!-- 右侧底部图标 -->
            <img
              class="right_bottom_img"
              src="../../assets/render/向右 (1)@2x.png"
              alt=""
            />
            
          </div>
        </div>
        <!--组件分页分页 组件分页分页  组件分页分页 分页 -->
        <div style="text-align:right;">
          <a-pagination 
            v-model="current" 
            :total="50" 
            show-less-items 
            @change="cpage"
          />
        </div>
        <!-- 组件分页分页 组件分页分页 组件分页分页 组件分页分页 -->
        <!-- 底部 -->
        <div id="render_footer_information">
          Copyright © 2021 MetaComputing Technology Inc Co., Ltd. All Rights
          Reserved
        </div>
        <!-- 底部结束 -->
        <!-- 饿了么对话框 -->
        <el-dialog
          title=""
          :visible.sync="centerDialogVisible"
          width="70%"
          center
          :modal="modal"
          height="400px"
        >
          <div class="top_tit">Get more Funds</div>
          <el-tabs v-model="activeName">
            <!-- 左边一项 -->
            <el-tab-pane label="ADD MCC CREDITS" name="first">
              <div class="credits_p1">
                1 EURO, and each credit has the equivalent rendering power of 4
                MCC Tokens. If you already have MCC Tokens in a Metamask wallet,
                select “Add MCC Tokens” above to make a deposit.
              </div>
              <div class="credits_p2 credits_p1">
                Your account currently has 1 REND Credits available for
                rendering. Once despostied, credits cannot be withdrawn and can
                only be used for rendering.
              </div>
              <!-- 两个单选框 -->
              <div class="credits_opation1">
                <el-radio v-model="radio" label="1">PayPal </el-radio>
                <el-radio v-model="radio" label="2">Stripe</el-radio>
              </div>
              <div class="credits_p3 credits_p1">
                How many Credits would you like to purchase?
                <span class="right_num_info">￡ 12</span>
              </div>
              <div class="two_buttons">
                <div
                  class="continue_but1"
                  @click="$router.openPage('/generate')"
                >
                  CONTINUE TO CHECKOUT
                </div>
                <div class="close_but2" aria-label="Close">Close</div>
              </div>
            </el-tab-pane>
            <!-- 左边一项 -->
            <!-- 右边一项 -->
            <el-tab-pane label="ADD MCC TOKENS" name="second">
              <div class="tokens_p1">
                The price of one MCC Credit is equivalent to
              </div>
              <div class="tokens_p2 tokens_p1">
                Your account currently has 386,3 MCC Tokens available for
                rendering. Once deposited MCC cannot be withdrawn and can only
                be used for rendering. To learn more about MCC and how it can be
                used, please visit this page.
              </div>
              <div class="tokens_p3 tokens_p1">Matamask</div>
              <span class="tokens_p3_frame">8888</span>
              <div class="tokens_p4 tokens_p1">
                Metamask Balance: 170.49 MCC
              </div>
              <div class="tokens_p5 tokens_p1">
                How much MCC would you like to deposit?
                <span class="right_num_info">12</span>
              </div>
              <div class="two_buttons">
                <div class="continue_but1">DEPOSIT MCC</div>
                <div class="close_but2">Close</div>
              </div>
            </el-tab-pane>
            <!-- 右边一项 -->
          </el-tabs>
        </el-dialog>
        <!-- 饿了么对话框结束 -->
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      current: 2,
      // 进度条展开关闭
      centerDialogVisible: false,
      progressBar: false,
      modal: false,
      activeName: "second",
      activeNames: 1,
      activeNamesB: 1,
      radio: "1",
    };
  },
  methods: {
    // 打开进度条
    cancel() {
      this.progressBar = false;
    },
    //  组件方法组件方法组件方法组件方法组件方法
    cpage(page, pageSize){
      console.log('page',page);
      console.log('pageSize',pageSize);
      let data = {
        currPage: page,
        pageSize: pageSize
      }
      console.log(data);
      // islist(data)  掉接口
    }
    // 组件方法组件方法组件方法组件方法组件方法组件方法
  },
  components: {},
};
</script>

<style scoped>
li {
  list-style: none;
}
/* 主要内容 */
html,
body {
  width: 100%;
  height: 100%;
}
#renderheader {
  width: 100%;
  height: 79px;
  background: #363636;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  margin: 30px 0 0 0;
}
#main_content {
  width: 1080px;
  height: 921px;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  /* margin-top: 79px; */
}
/* 顶部图片 */
.top_icon {
  width: 200px;
  height: 49px;
  margin: 14px 0 0 13px;
  float: left;
  cursor: pointer;
}
/* 最大背景 */
#max_background {
  width: 100%;
  height: 1050px;
  background: linear-gradient(180deg, #000000 0%, #000000 31%, #cec0a1 100%);
}
/* 搜索框 */
#serach_box {
  width: 320px;
  height: 42px;
  /* background: #FFFFFF; */

  background: rgba(255, 255, 255, 0.05);
  border-radius: 21px;
  /* opacity: 0.1; */
  margin: 19px 0 0 109px;
  float: left;
}
/* 搜索框图标 */
#serach_box .search_icon {
  width: 24px;
  height: 24px;
  margin: 9px 0 0 22px;
}
.right_info {
  float: left;
  height: 79px;
  margin: 0 0 0 89px;
  cursor: pointer;
}
.right_info li:hover {
  background: rgba(0, 0, 0, 0.3);
}
.right_info li {
  float: left;
  line-height: 79px;
  width: 58px;
  text-align: center;
  font-size: 16px;
  font-family: Helvetica;
  color: #ffffff;
}
.right_info2 {
  width: 200px;
  height: 30px;
  background: #fdda95;
  border-radius: 15px;
  margin: 25px 0 0 857px;
}
/* 最右侧椭圆框内文字 */
.right_info2_msg {
  font-size: 13px;
  font-family: Helvetica-Bold, Helvetica;
  font-weight: bold;
  color: #997836;
  line-height: 30px;
  cursor: pointer;
  text-align: center;
}
/* 头部结束 */
/* 上传框 */
#upload_box {
  width: 580px;
  height: 84px;
  border-radius: 8px;
  border: 1px solid #979797;
  margin: 41px auto;
}
#upload_box .cloud {
  width: 40px;
  height: 40px;
  margin: 12px 0 0 270px;
}
#upload_box .upload_box_info {
  width: 324px;
  height: 17px;
  font-size: 14px;
  font-family: Helvetica;
  color: #ffffff;
  line-height: 17px;
  margin: 5px auto;
}
/* sort by 容器 */

#sort_by {
  width: 254px;
  height: 17px;
  font-size: 14px;
  font-family: Helvetica;
  color: #ffffff;
  line-height: 17px;
}
#sort_by > div {
  /* margin: ; */
  width: 61px;
  height: 24px;
  text-align: center;
  line-height: 24px;
}
#sort_by > div:hover {
  background: grey;
  border-radius: 20px;
}
#sort_by .date {
  margin: 0 0 0 10px;
}
#sort_by > p {
  line-height: 24px;
  height: 24px;
  font-family: Helvetica;
}
/* 上传容器1 */
#upload_one {
  width: 1080px;
  height: 192px;
  border-radius: 8px;
  background: rgba(100, 122, 122, 0.1);

  margin: 53px 0 0 0;
}
.upload_one_left {
  width: 480px;
  height: 192px;
  float: left;
  overflow: hidden;
}
.upload_one_left_img1 {
  width: 48px;
  height: 48px;
  margin: 42px 0 0 24px;
  float: left;
}
/* 第一个标题 */
.upload_one_left_title1 {
  width: 337px;
  height: 19px;
  font-size: 16px;
  font-family: Helvetica-Bold, Helvetica;
  font-weight: bold;
  color: #ffffff;
  line-height: 19px;
  margin: 32px 0 0 105px;
}
/* 段落2 */
.upload_one_left_p2 {
  width: 248px;
  height: 17px;
  font-size: 14px;
  font-family: Helvetica;
  color: #ffffff;
  line-height: 17px;
  margin: 8px 0 0 105px;
}
.upload_one_left_p3 {
  width: 448px;
  height: 17px;
  font-size: 14px;
  font-family: Helvetica;
  color: #ffffff;
  line-height: 17px;
  margin: 10px 0 0 105px;
}
.bottom_left_img {
  width: 24px;
  height: 24px;
  margin: 47px 0 0 27px;
  float: left;
}
.bottom_left_info {
  width: 273px;
  height: 17px;
  font-size: 14px;
  font-family: Helvetica-Bold, Helvetica;
  font-weight: bold;
  color: #ffffff;
  line-height: 17px;
  margin: 50px 0 0 105px;
}
/* 右侧开始 */
#upload_one_right {
  width: 160px;
  height: 192px;
  overflow: hidden;
  margin: 0 0 0 900px;
}
#upload_one_right .button1 {
  width: 160px;
  height: 40px;
  background: #fdda95;
  border-radius: 20px;
  cursor: pointer;
  margin: 35px 0 0 0;
}
#upload_one_right .button2 {
  width: 160px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  margin: 10px 0 0 0;
  cursor: pointer;
}
/* 右侧底部图标 */
#upload_one_right .right_bottom_img {
  width: 16px;
  height: 16px;
  margin: 20px 0 0 139px;
}
.button1_img {
  height: 16px;
  width: 16px;
  margin: 12px 0 0 16px;
  float: left;
}
.button1 p {
  width: 145px;
  height: 19px;
  font-size: 14px;
  font-family: Helvetica-Bold, Helvetica;
  font-weight: bold;
  color: #997836;
  line-height: 40px;
  margin: 0 0 0 40px;
}
.button2 p {
  width: 145px;
  height: 19px;
  font-size: 14px;
  font-family: Helvetica-Bold, Helvetica;
  font-weight: bold;
  color: #ffffff;
  line-height: 40px;
  margin: 0 0 0 40px;
}
/* 底部 */
#render_footer_information {
  width: 499px;
  height: 28px;
  font-size: 14px;
  font-family: Helvetica;
  color: #ffffff;
  line-height: 28px;
  margin: 113px auto;
}
/* 进度条 */
#progress_bar {
  width: 1080px;
  height: 208px;
  background: #2e2e2e;
  border-radius: 16px;
  position: absolute;
  top: 120px;
  left: 0;
}
/* 进度条的第一段文字 */
.progress_bar_p1 {
  width: 349px;
  height: 19px;
  font-size: 16px;
  font-family: Helvetica-Bold, Helvetica;
  font-weight: bold;
  color: #ffffff;
  line-height: 19px;
  margin: 33px 0 0 33px;
}
.progress_bar_p2 {
  width: 283px;
  height: 17px;
  font-size: 14px;
  font-family: Helvetica;
  color: #ffffff;
  line-height: 17px;
  margin: 8px 0 0 33px;
}
.cancel {
  width: 100px;
  height: 40px;
  background: #fdda95;
  border-radius: 20px;
  margin: 59px 0 0 948px;
  text-align: center;
  line-height: 40px;
}
/* 上传框 */
::v-deep .el-upload-dragger {
  margin: 0 0 0 304px !important;
  background: red;
  position: none;
  height: 152px;
  width: 485px;
}
/* elem对话框css */

::v-deep .el-dialog {
  height: 411px;
  background: #262626;
}
::v-deep .el-tabs__nav-scroll {
  margin: 0 0 0 342px;
}
.top_tit {
  padding: 20px 0 0 0;
  position: absolute;
  top: 30px;
  font-size: 20px;
  font-family: Helvetica-Bold, Helvetica;
  font-weight: bold;
}
::v-deep .el-tabs__item.is-active {
  color: white;
}
::v-deep .el-tabs__item {
  color: grey;
}
.credits_p1 {
  font-size: 14px;
  font-family: Helvetica;
  color: #ffffff;
  line-height: 24px;
}
.credits_p2 {
  margin: 22px 0 0 0;
}
.credits_opation1 {
  width: 100px;
  height: 40px;
}
::v-deep .el-radio__input.is-checked .el-radio__inner {
  background: #fdda95;
  border-color: #fdda95;
}
.credits_p3 {
  margin: 22px 0 0 0;
}
.right_num_info {
  display: inline-block;
  border-bottom: 2px solid #676767;
  width: 137px;
}
.tokens_p1 {
  font-size: 14px;
  font-family: Helvetica;
  color: #ffffff;
  line-height: 24px;
}
.tokens_p2 {
  margin: 24px 0 0 0;
}
.tokens_p3 {
  margin: 26px 0 0 0;
  float: left;
}
.tokens_p3_frame {
  display: inline-block;
  width: 604px;
  height: 36px;
  margin: 22px 0 0 17px;
  background: white;
  line-height: 36px;
}
.tokens_p5 {
  margin: 17px 0 0 0;
}
.continue_but1 {
  width: 220px;
  height: 40px;
  background: #fdda95;
  border-radius: 20px;
  text-align: center;
  line-height: 40px;
  float: left;
  cursor: pointer;
}
.close_but2 {
  float: left;
  margin: 10px 0 0 20px;
}
.two_buttons {
  margin: 27px 0 0 406px;
}
/* ::v-deep .el-tabs__item.is-top:last-child:hover{
  background: cyan;
} */
::v-deep .el-collapse-item__header .is-active i {
  margin: 10px 0 0 0px;
}
.show_frame_container {
  width: 1080px;
  height: 200px;
  /* background: white; */
}
.show_frame_line {
  width: 1080px;
  height: 1px;
  border-top: 1px solid #27241e;
}
.num_one {
  float: left;
}
.num_ten {
  float: left;
  margin: 0px 0 0 191px;
}
.num_container {
  margin: 30px 0 0 31px;
  color: white;
}
.progress_bar {
  width: 215px;
  border-bottom: 1px dashed white;
  margin: 1px 0 0 32px;
  height: 1px;
}
/* elem对话框css */
</style>