<!--
*@Author wangliang
*@date 20220729
-->
<template>
  <div  style="background-color: #f5f5f5">
    <div class="rarle">
      <!--上部分-->
      <div style="width:100%;height: calc(30vh);background: linear-gradient(90deg, #76befa 0%, #3672f1 99%);">
        <tatle-bar :tatle="titleName" :tatleflag="titleflag" >
        </tatle-bar>
        <div >
          <div style="color: #FFFFFF;text-align: center;margin-top: 4%;">
            <div >黑龙江农信理财-月月增利1号</div>
            <div>YYZL01H</div>
          </div>
<!--          <div>-->
<!--            <span>111</span>-->
<!--            <span class="line"></span>-->
<!--            <span>1111</span>-->
<!--          </div>-->
          <div style="margin-top: 6%">
            <van-row  type ="flex" >
              <van-col span="3"></van-col>
              <van-col span="8" class="lins">4.4660%</van-col>
              <van-col span="2" class="lins"> <img :src="require('@/assets/svg/u1176.svg')"/></van-col>
              <van-col  span="8" class="lins"> <van-row  type ="flex" gutter="20">
                <van-col span="24" class="lins">1.017155</van-col>
                <van-col span="24" class="linsl">净值（2022-07-04）</van-col>
              </van-row>
              </van-col>
            </van-row>
          </div>
        </div>
      </div>
      <div style="background-color: #FFFFFF">
        <van-row  type ="flex" >
          <van-col span="7"><van-row  type ="flex"  gutter="20"><van-col span="24" class="type1">0</van-col>
            <van-col span="24" class="type2">剩余额度(元)</van-col></van-row></van-col>
          <van-col span="1" style="margin-top: 4%"> <img :src="require('@/assets/svg/u1181.svg')"/></van-col>
          <van-col span="7"><van-row  type ="flex"  gutter="20"><van-col span="24" class="type1">0.01</van-col>
            <van-col span="24" class="type2">起购金额</van-col></van-row></van-col>
          <van-col span="1" style="margin-top: 4%"> <img :src="require('@/assets/svg/u1181.svg')"/></van-col>
          <van-col  span="7">
            <van-col span="24"  class="type1" style="margin-top: 22%">每日开放</van-col>
          </van-col>
        </van-row>
      </div>
      <div style="margin-top: 4%;background-color: #FFFFFF">
<!--        <van-row>
          <van-col span="1"></van-col>
          <van-col span="7" class="type3" style="text-align: left">发起购买</van-col>
          <van-col span="8" class="type3">截至购买</van-col>
          <van-col span="7" class="type3" style="text-align: right">计算收益</van-col>
          <van-col span="1"></van-col>
        </van-row>
        <van-row>
          <van-col span="24" style="margin-left: 4%;"><img :src="require('@/assets/svg/u1188.svg')"/></van-col>
        </van-row>
        <van-row>
          <van-col span="1"></van-col>
          <van-col span="7" class="type4" style="text-align: left">今天</van-col>
          <van-col span="8" class="type4">2022-07-06  15:30前</van-col>
          <van-col span="7" class="type4" style="text-align: right">2022-07-07</van-col>
          <van-col span="1"></van-col>
        </van-row>-->
        <van-steps :active="active">
          <van-step>发起购买</van-step>
          <van-step>截至购买</van-step>
          <van-step>计算收益</van-step>
        </van-steps>
        <van-row style="width: 94%;margin-left: 3%;    margin-top: -4%;
    padding-bottom: 4%;">
<!--          <van-col span="1"></van-col>-->
          <van-col span="8" class="type4" style="text-align: left">今天</van-col>
          <van-col span="8" class="type4">2022-07-06  15:30前</van-col>
          <van-col span="8" class="type4" style="text-align: right">2022-07-07</van-col>
<!--          <van-col span="1"></van-col>-->
        </van-row>
      </div>
      <div style="margin-top: 4%;background-color: #FFFFFF">
<!--        <div class="type5">产品特点&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<img :src="require('@/assets/svg/u278.svg')"/></div>
        <div class="type5">交易规则&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<img :src="require('@/assets/svg/u278.svg')"/></div>
        <div class="type5">产品相关协议</div>-->
        <van-collapse v-model="activeName" accordion>
          <van-collapse-item title="产品特点" name="1" size="large">
            <van-row style="font-size: smaller;color: black">
              <van-col span="8">发行机构：</van-col>
              <van-col span="16">黑龙江省农村信用社联合社</van-col>
            </van-row>
            <van-row style="font-size: smaller;color: black">
              <van-col span="8">产品名称：</van-col>
              <van-col span="16">黑龙江农信理财-月月增利1号</van-col>
            </van-row>
            <van-row style="font-size: smaller;color: black">
              <van-col span="8">产品代码：</van-col>
              <van-col span="16">YYZL01H</van-col>
            </van-row>
            <van-row style="font-size: smaller;color: black">
              <van-col span="8">理财登记编号：</van-col>
              <van-col span="16">Z700129382939</van-col>
            </van-row>
            <van-row style="font-size: smaller;color: black">
              <van-col span="8">币种：</van-col>
              <van-col span="16">人民币</van-col>
            </van-row>
            <van-row style="font-size: smaller;color: black">
              <van-col span="8">销售渠道：</van-col>
              <van-col span="16">手机银行；线上金融服务平台</van-col>
            </van-row>
            <van-row style="font-size: smaller;color: black">
              <van-col span="8">风险等级：</van-col>
              <van-col span="16">二级</van-col>
            </van-row>
          </van-collapse-item>
          <van-collapse-item title="交易规则" name="2" size="large">
            <van-row style="font-size: smaller;color: black">
              <van-col span="10">首次购买起点(元):</van-col>
              <van-col span="14">0.01</van-col>
            </van-row>
            <van-row style="font-size: smaller;color: black">
              <van-col span="10">追加购买起点(元):</van-col>
              <van-col span="14">0.01</van-col>
            </van-row>
            <van-row style="font-size: smaller;color: black">
              <van-col span="10">最小认购单位(元):</van-col>
              <van-col span="14">不限制</van-col>
            </van-row>
            <van-row style="font-size: smaller;color: black">
              <van-col span="10">赎回起点份额(份):</van-col>
              <van-col span="14">0.01</van-col>
            </van-row>
            <van-row style="font-size: smaller;color: black">
              <van-col span="10">最低持有份额(份):</van-col>
              <van-col span="14">0.01</van-col>
            </van-row>
            <van-row style="font-size: smaller;color: black">
              <van-col span="10">最小赎回单位(份):</van-col>
              <van-col span="14">不限制</van-col>
            </van-row>
          </van-collapse-item>
          <van-collapse-item title="产品相关协议" name="3" :is-link="false" size="large">
          </van-collapse-item>
        </van-collapse>
      </div>
      <div style=" color: rgb(0, 92, 191);background-color: #f5f5f5;text-align: center;margin-top: 10px">

        <van-row span="24">
          <van-col span="6" style="font-size: smaller">《产品合同》</van-col>
          <van-col span="6" style="font-size: smaller">《风险提示书》</van-col>
          <van-col span="6" style="font-size: smaller">《销售协议书》</van-col>
        </van-row>
      </div>

    </div>
    <div style="background-color: #FFFFFF;padding-bottom: 1px">
      <div style="margin-top: -8px;"><van-divider
        :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '16px 16px' }"
      >理财非存款，产品有风险，投资需谨慎
      </van-divider></div>
    </div>
  </div>
</template>

<script lang="ts">
import {Component, Vue} from "vue-property-decorator";
@Component({
  name: "ManageProductDetail",
})
export default class ManageProductDetail extends Vue {
  titleName="产品详情";
  titleflag=true;
  activeName:any = "";

}
</script>

<style scoped lang="scss">
.line{
  width: 1px;
  height: 58px;
  border: 1px solid #FFFFFF;
  background-color: #FFFFFF;
  margin-left: 50%;
  margin-top: 6%;
}
.lins{
  text-align: center;
  font-family: 'Arial Normal', 'Arial';
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  color: #FFFFFF;
}
.linsl{
  font-family: 'Arial Normal', 'Arial';
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  color: #FFFFFF;
}
.type1{
  font-size: 12px;
  font-family: 'Arial Normal', 'Arial';
  font-weight: 400;
  font-style: normal;
  color: #333333;
  text-align: center;
  margin-top: 10%;
}
.type2{
  margin-top: 10%;
  font-family: 'Arial Normal', 'Arial';
  font-weight: 400;
  font-style: normal;
  text-align: center;
  line-height: normal;
  font-size: 10px;
  color: #AAAAAA;
  margin-bottom: 10%;
}
.type3{
  text-align: center;
  font-size: 12px;
  font-family: 'Arial Normal', 'Arial';
  font-weight: 400;
  font-style: normal;
  letter-spacing: normal;
  color: #333333;
  line-height: normal;
  margin-top: 4%;
}
.type4{
  text-align: center;
  font-size: 12px;
  font-family: 'Arial Normal', 'Arial';
  font-weight: 400;
  font-style: normal;
  letter-spacing: normal;
  color: #333333;
  line-height: normal;
  margin-top: 2%;
}
.type5{
  font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
  font-weight: 700;
  font-style: normal;
  font-size: 16px;
  padding-top: 6%;
  margin-left: 3%;
}
</style>