<template>
  <div class="home_wrapper">
    <!--  头部开始  -->
    <van-nav-bar
      title="发布商品"
      fixed
      placeholder
      left-arrow
      @click-left="onClickLeft"
    />
    <!--  头部结束  -->


    <!--  内容开始  -->
    <div class="main">
      <van-field label="产品名称" input-align="right" placeholder="请输入产品名称" />
      <van-field label="产品类型" input-align="right" placeholder="请输入产品类型" />
      <van-field label="二级分类" input-align="right" placeholder="请输入二级分类" />
      <van-field label="产品规格" input-align="right" placeholder="请输入产品规格" />
      <van-field label="所属主体" input-align="right" placeholder="请输入所属主体" />
      <van-field label="单价" input-align="right" placeholder="请输入单价" />
      <van-field label="数量" input-align="right" placeholder="请输入数量" />
      <van-field label="联系电话" input-align="right" placeholder="请输入联系电话" />
      <van-field label="联系人" input-align="right" placeholder="请输入联系人" />
      <van-field label="服务区域" input-align="right" placeholder="请输入服务区域" />
      <van-field label="地址" input-align="right" placeholder="请输入地址" />
      <van-field label="简介" input-align="right" placeholder="请输入简介" />
      <van-field label="详情" input-align="right" placeholder="请输入详情" />
      <van-field label="图片" :border="false" input-align="right" placeholder="请输入图片" />
      <div style="padding: 0 4% 2vh;">
        <van-uploader />
      </div>
    </div>

    <div class="main">
      <baidu-map :center="center" panBy="[50,50]" :zoom="zoom" :scroll-wheel-zoom="true" :pinch-to-zoom="true" map-type="BMAP_NORMAL_MAP" style="height:25vh" >
        <!-- 必须给容器指高度，不然地图将显示在一个高度为0的容器中，看不到 -->
        <bm-marker :position="center" :dragging="true" animation="BMAP_ANIMATION_BOUNCE" :icon="{url: '../../../../static/images/lawEnforcement/new/address.gif', size: {width: 50, height: 50}}"></bm-marker>
      </baidu-map>
    </div>

    <div class="main_btn">
      <p>发布</p>
      <p>存稿</p>
    </div>
    <!--  内容结束  -->
  </div>
</template>
<script>
  import Cookies from "js-cookie";
  export default {
    name: "agriculturalTrusteeshipSocializationRelease",
    data() {
      return {
        activeKey: 0,
        active: 0,
        loading: false,
        finished: false,
        center: { lng: 122.089726, lat: 37.540728 }, //经纬度
        zoom: 15, //地图展示级别
        showDialog:false
      };
    },
    created() {

    },
    methods: {

    },
  }
</script>
<style scoped lang="scss">
.home_wrapper{
  background: #F6F6F6;
  min-height: 100vh;
}
.main{
  width: 92%;
  margin: 0 auto;
  margin-top: 2vh;
  border-radius: 10PX;
  overflow: hidden;
  background-color: #FFF;
}
  .main_btn{
    display: flex;
    justify-content: space-around;
    padding: 4vh 0;
    p{
      font-size: .4rem;
      width: 35%;
      text-align: center;
      padding: 10PX 0;
      border-radius: 5rem;
      box-shadow: 0px 3PX 6PX 0px rgba(0,0,0,0.16);
      &:nth-child(1){
        background: #334281;
        color: #ffffff;
      }
      &:nth-child(2){
        background: #E60505;
        color: #ffffff;
      }
    }
  }
</style>
