ProductDetails.vue 1.8 KB
<!--
 * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
 * @Date: 2022-07-05 14:05:30
 * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
 * @LastEditTime: 2022-07-13 17:42:26
 * @FilePath: \mcep-h5\src\views\main\MainView.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <product-detail class="productName" :productName="productName"></product-detail>
    <product-card :money="money" :moneyName="moneyName" class="productCard"> </product-card>
     
  </div>

</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { ProductData } from '@/model/entity/ProductData'

@Component({
  name: "ProductDetails",
})
export default class ProductDetails extends Vue {
  productName="小微企业---互助贷款"
  money: string = "¥5000000" //最高额度
  moneyName: string = "五百万元整" //最高额度汉字
  activeNames=["1"]
}
</script>
<style scoped lang="scss">
.productName {
 height: 38vh;
}

.productCard {
  // position: absolute;
  // top: 10%;
  // left: 4%;
  // right: 4%;
  // width: 100%;
  // height: 31%;
  // margin: 2% auto;
  // border-radius: 15px;
  // display: flex;
  // font-weight: 400;
  // font-style: normal;
    position: absolute;
    top: 13%;
    /* left: calc(100vh - -15px); */
    margin: 0px auto;
    right: 4%;
    width: 90%;
    height: 30%;
    /* margin: 2% auto; */
    border-radius: 15px;
    /* display: flex; */
    font-weight: 400;
    font-style: normal;
}
// .producy{
//   position: absolute;
//   top: 10%;
//   left: 4%;
//   right: 4%;
//   width: 100%;
//   height: 31%;
//   margin: 2% auto;
//   border-radius: 15px;
//   display: flex;
//   font-weight: 400;
//   font-style: normal;
// }
</style>