<template>
  <!-- 盒条件-换货 -->
  <div id="topDiv">
    <van-nav-bar title="" left-text="换货" left-arrow @click-left="$router.go(-1)"
                 style="background-color: #157a61">
    </van-nav-bar>
    <div>
      <img :src="img" class="imgs" alt="">
      <div class="ctr">
<!--        <div class="gotopushConItem" style="background-color: #4FA8C2;" @click="gotorouter('/barter-data')">-->
<!--          <div class="gotopushConItemimg gotopushConItemimgone">-->
<!--            <i class="iconfont icon-huanhuo"></i>-->
<!--          </div>-->
<!--          <p class="itemExplain">条烟换货</p>-->
<!--        </div>-->

        <div class="gotopushConItem" style="background-color: #4c8ecf;" @click="gotorouter('/bar_and_up_index')">
          <div class="gotopushConItemimg gotopushConItemimgone">
            <i class="iconfont icon-huanhuo"></i>
          </div>
          <p class="itemExplain">条烟换货</p>
        </div>

        <div class="gotopushConItem" style="background-color: #4FA8C2;" @click="gotorouter('/bar_up_index')">
          <div class="gotopushConItemimg gotopushConItemimgone">
            <i class="iconfont icon-shangbao"></i>
          </div>
          <p class="itemExplain">无码烟换货</p>
        </div>
<!--        <div class="gotopushConItem" style="background-color: #fd994e;" @click="gotorouter('/bar_ind_index')">-->
<!--          <div class="gotopushConItemimg gotopushConItemimgone">-->
<!--            <i class="iconfont icon-huanhuoshenqing"></i>-->
<!--          </div>-->
<!--          <p class="itemExplain">换货申请</p>-->
<!--        </div>-->
        <div class="gotopushConItem" style="background-color: #30aaa3;" @click="gotorouter('/query_flow_data')">
          <div class="gotopushConItemimg gotopushConItemimgone">
            <i class="iconfont icon-chaxunzhongduanguanli"></i>
          </div>
          <p class="itemExplain">流向查询</p>
        </div>

      </div>
    </div>
  </div>
</template>
<script>
import {Form, NavBar, CellGroup, Cell, List, Button, Dialog, Notify, Popup, Picker, Field} from "vant";

export default {
  name: "relieveRelationIndex",
  components: {
    [NavBar.name]: NavBar,
    [CellGroup.name]: CellGroup,
    [Cell.name]: Cell,
    [List.name]: List,
    [Button.name]: Button,
    [Dialog.Component.name]: Dialog.Component,
    [Notify.Component.name]: Notify.Component,
    [Popup.name]: Popup,
    [Picker.name]: Picker,
    [Field.name]: Field,
    [Form.name]: Form
  },
  data() {
    return {
      offlineQuantity: 0,
      img: new URL("../../../../public/assets/greenbg.png", import.meta.url).href,
    };
  },
  created() {

  },

  methods: {
    // 解析数据
    generateResObject(str) {
      let res = null;
      try {
        res = JSON.parse(str);
        return res;
      } catch (e) {
        return res;
      }
    },
    // 路由跳转
    gotorouter(path) {
      this.$router.push({path: path})
    },
  },
  computed: {}
};
</script>


<style scoped lang="scss">
.btn {
  width: 50%;
  height: 100%;
  font-size: 26px;
  font-family: Source Han Sans CN,sans-serif;
  font-weight: 500;
  color: #18A487;
}

.bottom {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 79px;
  border-top: 2px solid #C7C7C7;
  display: flex;
  flex-direction: row;
}

::v-deep .van-cell {
  position: relative;
  display: flex;
  box-sizing: border-box;
  width: 100% !important;
  height: 58px !important;
  // line-height: 58px !important;
  padding: 0;
  overflow: hidden;
  line-height: var(--van-cell-line-height);
  background: var(--van-cell-background-color);
  font-size: 24px;
  font-family: Source Han Sans CN,sans-serif;
  font-weight: 600;
  color: #000000;
  flex-direction: row;
  align-items: center;
}

.kuang {
  height: 60px;
  line-height: 60px;
  margin-top: 35px;
}

.pop {
  display: flex;
  flex-direction: column;
  padding: 0 20px;

  .headerSize {
    font-size: 26px;
    font-family: Source Han Sans CN,sans-serif;
    font-weight: bold;
    color: #000000;
    margin-top: 28px;
  }

  .border {
    margin-top: 12px;
    width: 100%;
    height: 3px;
    background: #C5C5C5;
  }
}

.topDiv {
  position: relative;
  display: flex;
  align-content: center;
  justify-content: center;
}

.imgs {
  position: absolute;
  top: 85px;
  left: 0;
  width: 100%;
  z-index: 99;
}

.gotopushConItemimg {
  i {
    font-size: 60px;
    color: #fff;
  }
}

.gotopushConItemimgone {
  background: linear-gradient(90deg, #4C8ECF);
}

.gotopushConItem {
  width: 45%;
  height: 30%;
  background: #4C8ECF;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-left: 3.2%;

  p {
    font-size: 30px;
    font-family: Source Han Sans CN,sans-serif;
    font-weight: 400;
    color: #FFFFFF;
    margin-top: 10px;
  }
}

.badge {
  position: absolute;
  top: -12px;
  right: -12px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 55px;
  height: 55px;
  background-color: #ffa100;
  color: white;
  font-size: 12px;
  font-weight: bold;
  border-radius: 50%;
}

.ctr {
  position: absolute;
  top: 195px;
  width: 90%;
  margin-left: 5%;
  height: 65%;
  background: #FFFFFF;
  border-radius: 15px;
  z-index: 999;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 5% 0 0 0;
}
</style>
