<template>
  <div class="personal">
    <!-- 首页导航 -->
    <Navs></Navs>
    <div class="cont">
      <!-- 全局搜索 -->
      <search></search>
      <div class="cont_content">
        <div class="header">
          <div class="left">个人中心</div>
          <div class="right">
            <img :src="imgurl.pos" alt />
            <span>当前位置：</span>
            <span @click="$router.push('/')">首页</span>
            >
            <span @click="$router.go(0)">个人中心</span>
          </div>
        </div>
        <div class="content">
          <div class="left">
            <div :class="{active:staticSelect==='基本设置'}" @click="clickStic('基本设置')">基本设置</div>
            <div :class="{active:staticSelect==='安全设置'}" @click="clickStic('安全设置')">安全设置</div>
            <div :class="{active:staticSelect==='我的收藏'}" @click="clickStic('我的收藏')">我的收藏</div>
          </div>
          <div class="right">
            <div class="right_title">
              <div class="left">{{staticSelect}}</div>
              <div class="right" v-if="staticSelect==='我的收藏'&&collect.length!==0">
                <input type="text" placeholder="请输入搜索内容" v-model="searchCollect" />
                <div @click="getCollectData(1)">搜索</div>
              </div>
            </div>
            <!-- 基本设置 -->
            <div class="right_cont_basic" v-if="staticSelect==='基本设置'">
              <div v-for="(item,index) in cont_basic" :key="index">
                <div>{{item.keys}}</div>
                <div>{{computedStr(item.values)}}</div>
              </div>
            </div>
            <!-- 安全设置 -->
            <div class="right_cont_fafety" v-if="staticSelect==='安全设置'">
              <div class="conty">
                <div class="zm">账号密码</div>
                <div class="updata" @click="updata">修改</div>
              </div>
              <div class="contys">
                <div>{{showPass?password:'********'}}</div>
                <img :src="showPass?imgurl.closeyj:imgurl.openyj" alt @click="staticUp" />
              </div>
            </div>
            <!-- 我的收藏 -->
            <div class="right_cont_collect" v-if="staticSelect==='我的收藏'">
              <div class="collect_yes" v-if="collect.length!==0">
                <div class="content">
                  <div class="header">
                    <div>名称</div>
                    <div>所属库</div>
                    <div>创建时间</div>
                    <div>操作</div>
                  </div>
                  <div class="cont">
                    <div v-for="(item,index) in collect" :key="index">
                      <div :title="item.name">
                        <span v-if="!item.staticInput">{{item.name}}</span>
                        <input
                          type="text"
                          :placeholder="item.name"
                          v-model="collectName"
                          v-if="item.staticInput"
                          v-focus="true"
                          @blur="blurUpset(item.id,item.name)"
                          @keyup.enter="blurUpset(item.id,item.name)"
                        />
                      </div>
                      <div :title="item.database" @click="jumpSearch(item)">{{item.database}}</div>
                      <div>{{item.birthTime}}</div>
                      <div class="handle">
                        <div @click="editName(index)">编辑</div>/
                        <div @click="deleteData(item.id)">删除</div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- 分页 :hide-on-single-page="value"显示隐藏分页-->
                <el-pagination
                  background
                  layout="prev, pager, next"
                  :total="pageConfiguration.countSize"
                  class="pagination"
                  :page-size="pageConfiguration.oneSize"
                  :hide-on-single-page="true"
                  @current-change="currentChange"
                ></el-pagination>
              </div>
              <div class="collect_no" v-else>暂无收藏记录</div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="cont_basic.length===0" class="cont_content_basic">数据加载中...</div>
    </div>

    <!-- 页脚信息 -->
    <FooterInfors></FooterInfors>
    <!-- 设置密码窗口 -->
    <section class="loginSty" v-if="showWinStatic">
      <div class="loginSty_wcont">
        <div class="wcont_header">
          <div>设置密码</div>
          <img :src="imgurl.deleteimg" alt @click="closeLoginWind(false)" />
        </div>
        <div class="wcont_content">
          <div>
            <img :src="imgurl.userpwds" alt />
            <input type="password" placeholder="请输入密码" v-model="userpwd" />
          </div>
          <div>
            <img :src="imgurl.userpwds" alt />
            <input type="password" placeholder="请输入确认密码" v-model="userpwdQR" />
          </div>
          <div @click="closeLoginWind(true)">确认</div>
        </div>
      </div>
    </section>
  </div>
</template>
<script>
// 导航
import Nav from '@/components/nav/Nav.vue'
// 页脚信息
import FooterInfor from '@/components/footerInfor/FooterInfor.vue'
// 全局搜索
import search from '@/components/search/search.vue'
export default {
  name: 'personal',
  components: {
    Navs: Nav,
    FooterInfors: FooterInfor,
    search: search
  },
  data () {
    return {
      imgurl: {
        pos: require('../../../static/company/posweizhi.png'),
        openyj: require('../../../static/personalCenter/openyj.png'),
        closeyj: require('../../../static/personalCenter/closeyj.png'),
        userpwds: require('../../../static/nav/userpwds.png'),
        deleteimg: require('../../../static/nav/deleteImg.png')
      },
      // 当前左侧选中状态
      staticSelect: '基本设置',
      // 基本设置数据
      cont_basic: [
        // {
        //   keys: '用户名称',
        //   values: '张三'
        // },
        // {
        //   keys: '邮箱',
        //   values: '1234567@163.com'
        // },
        // {
        //   keys: '所属部门',
        //   values: '部门'
        // },
        // {
        //   keys: '机构名称',
        //   values: '某某机构'
        // },
        // {
        //   keys: '机构地址',
        //   values: '某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某'
        // }
      ],
      // 密码
      password: sessionStorage.getItem('userPwd'),
      // 密码显示状态
      showPass: false,
      // 设置密码窗口状态
      showWinStatic: false,
      userpwd: '',
      userpwdQR: '',
      // 收藏搜索
      searchCollect: '',
      // 收藏列表数据
      // collect: [
      //   // {
      //   //   name: '发的货接口的话接口io福达合金你接口撒环能科技河南地方撒即可',
      //   //   database: '月度数据发的货接口的话接口io福达合金你接口撒环能科技河南地方撒即可',
      //   //   birthTime: '2019-09-18',
      //   //   staticInput: false
      //   // },
      //   // {
      //   //   name: '1',
      //   //   database: '月度数据',
      //   //   birthTime: '2019-09-18',
      //   //   staticInput: false
      //   // },
      //   // {
      //   //   name: '1',
      //   //   database: '月度数据',
      //   //   birthTime: '2019-09-18',
      //   //   staticInput: false
      //   // },
      //   // {
      //   //   name: '1',
      //   //   database: '月度数据',
      //   //   birthTime: '2019-09-18',
      //   //   staticInput: false
      //   // },
      //   // {
      //   //   name: '1',
      //   //   database: '月度数据',
      //   //   birthTime: '2019-09-18',
      //   //   staticInput: false
      //   // }
      // ],
      collect: [],
      // 我的收藏名称
      collectName: '',
      // 分页配置
      pageConfiguration: {
        // 每页显示条数
        oneSize: 5,
        // 数据总条数
        countSize: 36,
        // 总页数
        countPage: 1
      }
    }
  },
  methods: {
    clickStic (sta) {
      this.staticSelect = sta
      if (this.staticSelect === '我的收藏') {
        this.getCollectData()
      }
    },
    staticUp () {
      this.showPass = !this.showPass
    },
    // 设置密码
    closeLoginWind (status) {
      if (status) {
        // 调接口上传，成功后关闭窗口
        if (this.userpwd === '') {
          // alert('密码不能为空！')
          this.$alert('密码不能为空！', '温馨提示', {
            confirmButtonText: '确定'
          })
        } else if (this.userpwdQR === '') {
          // alert('确认密码不能为空！')
          this.$alert('确认密码不能为空！', '温馨提示', {
            confirmButtonText: '确定'
          })
        } else if (this.userpwd !== this.userpwdQR) {
          // alert('密码与确认密码不一致！')
          this.$alert('密码与确认密码不一致！', '温馨提示', {
            confirmButtonText: '确定'
          })
        } else {
          // 调接口判断密码是否输入正确,改变登录状态
          this.$axios({
            method: 'POST',
            url: 'member/index/change-pwd',
            data: {
              'password_hash': this.userpwd,
              password: this.userpwdQR
            }
          }).then(res => {
            console.log(res)
            // 请求接口完成   请求成功
            this.$alert(res.data.message, '温馨提示', {
              confirmButtonText: '确定'
            })
            // alert(res.data.message)
            if (res.data.code === 200) {
              this.showWinStatic = !this.showWinStatic
            }
          }).catch((fail) => {
            console.log(fail)
          })
        }
      } else {
        this.showWinStatic = !this.showWinStatic
      }
    },
    // 修改
    updata () {
      this.showWinStatic = !this.showWinStatic
    },
    // 编辑名称
    editName (indexs) {
      this.collect.forEach((item, index) => {
        index === indexs ? (item.staticInput = true) : (item.staticInput = false)
      })
    },
    // 文本框失去焦点或者回车enter
    blurUpset (ids, names) {
      let bStr = this.collectName === '' ? names : this.collectName
      this.$axios({
        method: 'POST',
        url: 'member/index/edit',
        data: {
          id: ids,
          name: bStr
        }
      }).then(res => {
        console.log(res, 12569)
        // 请求接口完成   请求成功
        // alert(res.data.message)
        if (res.data.code === 200) {
          // alert('修改成功!')
          this.$alert('修改成功!', '温馨提示', {
            confirmButtonText: '确定'
          })
          console.log('文本框失去焦点')
          // 调用接口修改数据
          this.collect.forEach((item, index) => {
            item.staticInput = false
          })
          this.getCollectData()
        }
      }).catch((fail) => {
        console.log(fail)
      })
    },
    // 删除收藏数据
    deleteData (ids) {
      // 调用接口删除数据
      this.$axios({
        method: 'POST',
        url: 'member/index/del',
        data: {
          id: ids
        }
      }).then(res => {
        console.log(res, 1256000009)
        // 请求接口完成   请求成功
        // alert(res.data.message)
        if (res.data.code === 200) {
          // alert('删除成功!')
          this.$alert('删除成功!', '温馨提示', {
            confirmButtonText: '确定'
          })
          this.getCollectData()
        }
      }).catch((fail) => {
        console.log(fail)
      })
    },
    // 获取收藏数据
    getCollectData (pagess) {
      // 调接口获取数据
      console.log(this.pageConfiguration.countPage)
      this.$axios({
        method: 'GET',
        url: 'member/index/favorite',
        params: {
          page: pagess,
          limit: 5,
          key: this.searchCollect
        }
      }).then(res => {
        console.log(res, 12569)
        // 请求接口完成   请求成功
        // alert(res.data.message)
        if (res.data.code === 200) {
          this.pageConfiguration.countSize = res.data.data.total
          this.collect = res.data.data.list.map((item, index) => {
            return {
              name: item.name,
              database: item.db,
              birthTime: item.created_at,
              staticInput: false,
              adv: item.adv,
              id: item.id,
              classify_id: item.classify_id,
              type: item.type,
              uid: item.uid,
              f: item.f
            }
          })
        }
      }).catch((fail) => {
        console.log(fail)
      })
    },
    // 获取个人中心数据
    getPersonalCenter () {
      this.$axios({
        method: 'GET',
        url: 'member/index/basic-setup',
        params: {}
      }).then(res => {
        console.log(res, 12569)
        // 请求接口完成   请求成功
        // alert(res.data.message)
        if (res.data.code === 200) {
          let resdatares = [
            {
              keys: '用户名称',
              values: '张三'
            },
            {
              keys: '邮箱',
              values: '1234567@163.com'
            },
            {
              keys: '所属部门',
              values: '部门'
            },
            {
              keys: '机构名称',
              values: '某某机构'
            },
            {
              keys: '机构地址',
              values: '某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某'
            }
          ]
          resdatares[0].values = res.data.data.username
          resdatares[1].values = res.data.data.email
          resdatares[2].values = res.data.data.company_dept
          resdatares[3].values = res.data.data.company_name
          resdatares[4].values = res.data.data.company_addr
          this.cont_basic = resdatares
          console.log(this.cont_basic, 'this.cont_basic')
        }
      }).catch((fail) => {
        console.log(fail)
      })
    },
    // 当前页数发生改变时
    currentChange (val) {
      this.getCollectData(val)
      console.log(val, '1010110')
    },
    // 跳转至查询页面
    jumpSearch (listCount) {
      console.log(listCount)
      this.$router.push(
        {
          path: '/datasweb',
          query: {
            type: listCount.type === '1' ? listCount.f : 'area',
            defaultLeftId: listCount.classify_id
          }
        }
      )
    },
    // 页面刷新跳转
    beforeunloadEv () {
      this.$router.push({ path: '/' })
    }
  },
  // 自定义指令v-*
  directives: {
    focus: {
      inserted: function (el, { value }) {
        // console.log(el, { value })
        if (value) {
          el.focus()
        }
      }
    }
  },
  computed: {
    // 计算字符串
    computedStr () {
      return (str) => {
        console.log(str, 'str10123')
        let Strs = ''
        str.length <= 62 ? (Strs = str) : (Strs = str.slice(0, 61) + '...')
        return Strs
      }
    }
  },
  mounted () {
    let that = this
    this.getPersonalCenter(1)
    window.addEventListener('beforeunload', e => {
      that.beforeunloadEv()
    })
  }

}
</script>
<style lang="scss" scoped>
// 注册窗口
// 登陆窗口
.loginSty {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  & > .loginSty_wcont {
    width: 37.5rem;
    height: 32.6875rem;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    & > .wcont_header {
      width: 32.8125rem;
      height: 3.875rem;
      border-bottom: 0.0625rem solid #dbdbdb;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      & > div {
        margin-left: 1rem;
        font-size: 1.375rem;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0rem;
        color: #333333;
      }
      & > img {
        margin-right: 1rem;
        width: 1.3125rem;
        height: 1.3125rem;
      }
      & > img:hover {
        cursor: pointer;
      }
    }
    & > .wcont_content {
      width: 30.8125rem;
      height: 26.5rem;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;
      & > div:nth-last-child(n + 2) {
        width: 100%;
        height: 3.25rem;
        border: 0.0625rem solid #dbdbdb;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        & > input {
          width: 21.625rem;
          height: 1.6rem;
          border: none;
        }
        & > input::-webkit-input-placeholder {
          font-size: 1.25rem;
          font-weight: normal;
          font-stretch: normal;
          // line-height: 2rem;
          letter-spacing: 0rem;
          color: #999999;
        }
        & > input::-moz-placeholder {
          /* Mozilla Firefox 19+ */
          font-size: 1.25rem;
          font-weight: normal;
          font-stretch: normal;
          // line-height: 2rem;
          letter-spacing: 0rem;
          color: #999999;
        }
        & > input:-moz-placeholder {
          /* Mozilla Firefox 4 to 18 */
          font-size: 1.25rem;
          font-weight: normal;
          font-stretch: normal;
          // line-height: 2rem;
          letter-spacing: 0rem;
          color: #999999;
        }
        & > input:-ms-input-placeholder {
          /* Internet Explorer 10-11 */
          font-size: 1.25rem;
          font-weight: normal;
          font-stretch: normal;
          // line-height: 2rem;
          letter-spacing: 0rem;
          color: #999999;
        }
      }
      & > div {
        & > img {
          margin: 0 1.35625rem;
          width: 1.0625rem;
          height: 1.3125rem;
        }
      }
      & > div:nth-last-child(1) {
        width: 100%;
        height: 3.1875rem;
        background-color: #52b6e3;
        border-radius: 0.3125rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 1.25rem;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0rem;
        color: #ffffff;
      }
      & > div:nth-last-child(1):hover {
        cursor: pointer;
      }
    }
  }
}
.cont {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  & > .cont_content {
    margin-bottom: 1.875rem;
    width: 84.25rem;
    // border: 0.0625rem solid red;
    & > .header {
      width: 84.25rem;
      height: 4.25rem;
      // border: 1px solid red;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;

      & > .left {
        // margin-left: 1.5rem;
        font-size: 1.5rem;
        font-weight: bold;
        font-stretch: normal;
        letter-spacing: 0.125rem;
        color: #000000;
      }
      & > .right {
        // margin-right: 1.5rem;
        font-size: 1.25rem;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0rem;
        color: #8fa3ae;
        & > img {
          width: 1rem;
          height: 1.25rem;
          margin-right: 0.45rem;
        }
        & > span:nth-child(n + 3):hover {
          cursor: pointer;
          color: #52b6e3;
        }
      }
    }
    & > .content {
      width: 100%;
      height: 33.75rem;
      background-color: #fff;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      & > .left {
        width: 14.875rem;
        display: flex;
        height: 30.625rem;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        // border: 1px solid red;
        border-right: 0.125rem solid #dbdbdb;
        & > div {
          width: 14.875rem;
          height: 2.75rem;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          font-size: 1.25rem;
          font-weight: normal;
          font-stretch: normal;
          // line-height: 22px;
          letter-spacing: 0rem;
          color: #333333;
        }
        & > .active {
          background-color: #f5f5f5;
          border-right: 0.125rem solid #52b6e3;
        }
        & > div:hover {
          cursor: pointer;
        }
      }
      & > .right {
        width: 100%;
        // margin-left: 7.5rem;
        height: 30.625rem;
        & > .right_title {
          margin-left: 7.5rem;
          width: 53.875rem;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          font-size: 2.125rem;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0rem;
          color: #333333;
          & > .right {
            width: 16rem;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            & > input {
              width: 10.75rem;
              height: 2.25rem;
              border-radius: 0.3125rem;
              border: solid 0.125rem #dbdbdb;
            }
            & > div {
              width: 3.625rem;
              height: 2.25rem;
              background-color: #52b6e3;
              border-radius: 0.3125rem;
              font-size: 1.125rem;
              font-weight: normal;
              font-stretch: normal;
              // line-height: 39px;
              letter-spacing: 0rem;
              color: #ffffff;
              display: flex;
              flex-direction: row;
              justify-content: center;
              align-items: center;
            }
            & > div:hover {
              cursor: pointer;
            }
          }
        }
        & > .right_cont_basic {
          margin-left: 7.5rem;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          align-items: flex-start;
          & > div {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: flex-start;
            & > div:nth-child(1) {
              width: 7.5rem;
              height: 4.375rem;
              display: flex;
              flex-direction: row;
              justify-content: flex-start;
              align-items: center;
              font-size: 1.25rem;
              font-weight: normal;
              font-stretch: normal;
              letter-spacing: 0rem;
              color: #333333;
            }
            & > div:nth-child(2) {
              // border: 1px solid red;
              width: 38.75rem;
              height: 4.375rem;
              display: flex;
              flex-direction: row;
              justify-content: flex-start;
              align-items: center;
              flex-wrap: wrap;
              font-size: 1.25rem;
              font-weight: normal;
              font-stretch: normal;
              letter-spacing: 0rem;
              color: #333333;
            }
          }
        }
        & > .right_cont_fafety {
          margin-left: 7.5rem;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          align-items: flex-start;
          & > .conty {
            width: 38.75rem;
            height: 4.375rem;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            & > div:nth-child(1) {
              font-size: 1.25rem;
              font-weight: normal;
              font-stretch: normal;
              letter-spacing: 0rem;
              color: #333333;
            }
            & > div:nth-child(2) {
              font-size: 1.25rem;
              font-weight: normal;
              font-stretch: normal;
              letter-spacing: 0rem;
              color: #52b6e3;
            }
            & > div:nth-child(2):hover {
              cursor: pointer;
            }
          }
          & > .contys {
            width: 38.75rem;
            height: 4.375rem;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            & > div {
              font-size: 1.25rem;
              font-weight: normal;
              font-stretch: normal;
              letter-spacing: 0rem;
              color: #333333;
            }
            & > img {
              margin-left: 1.5rem;
              width: 2.875rem;
              height: 1.875rem;
            }
            & > img:hover {
              cursor: pointer;
            }
          }
        }
        & > .right_cont_collect {
          margin-top: 1.625rem;
          margin-left: calc((100% - 61.75rem) / 2);
          width: 61.75rem;
          // border: 1px solid red;
          & > .collect_yes {
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            & > .content {
              width: 100%;
              & > .header {
                width: 100%;
                height: 3.5rem;
                display: flex;
                flex-direction: row;
                justify-content: space-around;
                align-items: center;
                font-size: 1.375rem;
                font-weight: bold;
                font-stretch: normal;
                letter-spacing: 0rem;
                color: #333333;
                border-bottom: 0.0625rem solid #bdbdbd;
                & > div:nth-child(1) {
                  width: 6rem;
                  // border: 1px solid red;
                }
                & > div:nth-child(n + 2) {
                  width: 14rem;
                  // border: 1px solid red;
                }
                & > div {
                  display: flex;
                  flex-direction: row;
                  justify-content: center;
                  align-items: center;
                }
              }
              & > .cont {
                width: 100%;

                & > div {
                  width: 100%;
                  height: 3.5rem;
                  display: flex;
                  flex-direction: row;
                  justify-content: space-around;
                  align-items: center;
                  font-size: 1.375rem;
                  font-weight: normal;
                  font-stretch: normal;
                  letter-spacing: 0rem;
                  color: #666666;
                  & > div:hover {
                    cursor: pointer;
                  }
                  & > div:nth-child(1) {
                    width: 6rem;
                    // border: 1px solid red;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 1; /* 省略号在第几行 */
                    -webkit-box-orient: vertical;
                  }
                  & > div:nth-child(2) {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 1; /* 省略号在第几行 */
                    -webkit-box-orient: vertical;
                  }
                  & > div:nth-child(n + 2) {
                    width: 14rem;
                  }
                  & > div {
                    display: flex;
                    flex-direction: row;
                    justify-content: center;
                    align-items: center;
                  }
                  & > .handle {
                    display: flex;
                    flex-direction: row;
                    justify-content: center;
                    align-items: center;
                    & > div {
                      margin: 0 0.75rem;
                    }
                    & > div:hover {
                      cursor: pointer;
                      color: #52b6e3;
                    }
                  }
                }
                & > div:nth-last-child(n + 2) {
                  border-bottom: 0.0625rem solid #bdbdbd;
                }
              }
            }
            & > .pagination {
              margin-top: 2.285rem;
            }
          }
          & > .collect_no {
            width: 100%;
            height: 24rem;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            font-size: 2.125rem;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0rem;
            color: #bdbdbd;
          }
        }
      }
    }
  }
  & > .cont_content_basic {
    width: 100%;
    background-color: #fff;
    height: 38rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}
</style>
