<template>
  <div class="person">
    <div class="banner">
      <img src="../../static/images/bannerny.jpg" alt="">
    </div>
    <div class="con">
      <div class="wp">
        <div class="mbx">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/' }">个人中心</el-breadcrumb-item>
            <el-breadcrumb-item>我的信息</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="zhuti">
          <div class="left">
            <div class="left1" :class="show ? 'active' : ''">
              <img v-if="!show" src="../../static/images/arrow.png" alt="">
              <img v-else src="../../static/images/arrow_a.png" alt="">
              <p>我的信息</p>
            </div>
            <div class="left1" :class="show1 ? 'active' : ''">
              <img v-if="!show1" src="../../static/images/arrow.png" alt="">
              <img v-else src="../../static/images/arrow_a.png" alt="">
              <p>我的收藏</p>
            </div>
            <div class="left1" :class="show2 ? 'active' : ''">
              <img v-if="!show2" src="../../static/images/arrow.png" alt="">
              <img v-else src="../../static/images/arrow_a.png" alt="">
              <p>我的订单</p>
            </div>

            <!-- <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
          >
            <el-menu-item index="2">
              <i class="el-icon-menu"></i>
              <span slot="title">业务动态</span>
            </el-menu-item>
            <el-menu-item index="3">
              <i class="el-icon-document"></i>
              <span slot="title">新闻事件</span>
            </el-menu-item>
            <el-menu-item index="4">
              <i class="el-icon-setting"></i>
              <span slot="title">通知公告</span>
            </el-menu-item>
          </el-menu> -->
          </div>
          <div class="list">
            <div class="title">
              <p>基本信息</p>
            </div>
            <div class="list_con">
              <div class="con_left">
                <div class="left_top">
                  <img src="../../static/images/tx.png" alt="">
                  <p>马小云</p>
                </div>
                <div class="list_mid">
                  <div class="mid_1">
                    <p>最后一次登录</p>
                    <span>2023年2月10日 14:23:09</span>
                  </div>
                  <div class="mid_2">
                    <p>最后一次订单</p>
                    <span>2023年2月10日 14:23:09</span>
                  </div>
                </div>
                <div class="list_dibu">
                  <div class="dibu_1">
                    <img src="../../static/images/bianji.png" alt="">
                    <p>修改资料</p>
                  </div>
                  <div class="dibu_1">
                    <img src="../../static/images/mima2.png" alt="">
                    <p>修改密码</p>
                  </div>
                </div>
              </div>
              <div class="con_right">
                <div class="right1">
                  <p>注册时间</p>
                  <span>2022年2月10日  13:23:30</span>
                </div>

                <div class="right1">
                  <p>所在单位</p>
                  <span>中科院深海科学与工程研究所</span>
                </div>

                <div class="right1">
                  <p>联系方式</p>
                  <span>+86  13590998987</span>
                </div>

                <div class="right1">
                  <p>身份</p>
                  <span>样品管理员</span>
                </div>

                <div class="right1">
                  <p>邮箱</p>
                  <span>sysadmin@idsse.ac.cn</span>
                </div>

                <div class="right1">
                  <p>备注</p>
                  <span>系统自动生成用户注册</span>
                </div>

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>

export default {
  name: 'Person',
  components: {

  },
  data() {
    return {
      show: true,
      show1: false,
      show2: false
    }
  }
}
</script>
<style>
  .person .el-breadcrumb__item{
        font-size: 18px;
        color: #fff;
        float: none;
    }
   .person .el-breadcrumb__inner{
        font-size: 18px;
        color: #fff !important;
    }
</style>

<style scoped lang="scss">

.person {
  width: 100%;
  height: 100%;
  .banner {
    width: 100%;
    height: 300px;
    img{
        width: 100%;
        height: 100%;
    }
  }
  .con{
    width: 100%;
    height: auto;
    padding-bottom: 80px;
    background: url(../../static/images/news/bg.png) center no-repeat;
    background-size: 100% 100%;
    .wp{
       max-width: 1600px;
       margin:-150px auto 0 auto;
       width:96%;
       height: auto;
       .mbx{
        width: 100%;
        height: auto;
        margin-bottom: 55px;
       }
       .zhuti{
        width: 100%;
        height: auto;
        display: flex;
        justify-content: space-between;
        .left{
            width: 290px;
            height: 290px;
            box-sizing: border-box;
            padding: 25px;
            background: #fff;
            border-radius: 10px;
            .left1{
                width: 100%;
                height: 60px;
                background: #f0f4fa;
                display: flex;
                box-sizing: border-box;
                padding: 20px;
                margin-bottom: 15px;
                border-radius: 10px;
                cursor: pointer;
                &.active{
                    background: #13a1f0;
                    p{
                        color: #fff;
                    }
                }
                &:hover{
                    background: #13a1f0;
                    p{
                        color: #fff;
                    }
                }
                &:last-child{
                    margin-bottom: 0;
                }
                img{
                    width: auto;
                    margin-right: 20px;
                }
                p{
                    font-size: 18px;
                    color: #212121;
                    line-height: 20px;
                }
            }
        }
        .list{
            width: 80%;
            height: auto;
            background: #fff;
            box-sizing: border-box;
            padding: 25px;
            padding-bottom: 70px;
            border-radius: 10px;
            .title{
              width: 100%;
              height: 30px;
              border-left: 6px solid #212121;
              box-sizing: border-box;
              padding-left: 20px;
              p{
                font-size: 26px;
                color: #212121;
                line-height: 30px;
              }
            }
            .list_con{
              width: 100%;
              height: auto;
              display: flex;
              align-items: center;
              justify-content: space-between;
              .con_left{
                width: 50%;
                height: auto;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                border-right: 1px solid #eef2f8;
                .left_top{
                  margin-bottom: 60px;
                  width: 100%;
                  height: auto;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  flex-direction: column;
                  img{
                    margin-bottom: 15px;
                    width: 100px;
                    height: 100px;
                  }
                  p{
                    font-size: 24px;
                    color: #212121;
                  }
                }
                .list_mid{
                  margin-bottom: 60px;
                  width: 75%;
                  height: 125px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  background: #f0f4fa;
                  .mid_1{
                    width: 50%;
                    height: auto;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    border-right: 1px solid #ccc;
                    p{
                      font-size: 16px;
                      color: #666;
                      line-height: 35px;
                      text-align: center;
                    }
                    span{
                      font-size: 16px;
                      text-align: center;
                      color: #212121;
                    }
                  }
                  .mid_2{
                    width: 50%;
                    height: auto;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    p{
                      font-size: 16px;
                      color: #666;
                      line-height: 35px;
                    }
                    span{
                      font-size: 16px;
                      color: #212121;
                      text-align: center;
                    }
                  }

                }
                .list_dibu{
                  width: 75%;
                  height: 45px;
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  .dibu_1{
                    width: 48%;
                    height: 45px;
                    border: 1px solid #ccc;
                    border-radius: 5px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    img{
                      width: auto;
                      display: block;
                      margin-right: 10px;
                    }
                    p{
                      font-size: 16px;
                      color: #212121;
                    }
                  }
                }
              }
              .con_right{
                width: 50%;
                height: 446px;
                box-sizing: border-box;
                padding-left: 100px;
                display: flex;
                flex-direction: column;
                align-items: baseline;
                justify-content: space-between;
                .right1{
                  display: flex;
                  flex-direction: column;
                  p{
                    font-size: 16px;
                    color: #999;
                    line-height: 35px;
                  }
                  span{
                    font-size: 16px;
                    color: #212121;
                  }
                }
              }
            }
        }
       }
    }
  }
}
</style>
